92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

垂類品牌年輕化重塑—有駕品牌升級

濤濤

有駕是百度旗下汽車信息與服務平臺,累計用戶超5.3億,為用戶提供真實可靠的看選買車服務,為車企和經銷商提供一站式營銷方案。


什么是“有駕”

【有駕】是百度旗下的汽車信息與服務平臺,累計用戶超5.3億,致力于為用戶提供真實、可靠的看選買車服務,以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。

現狀分析

有駕品牌在孵化初期,重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號,減少歧義,強化用戶的感知。

但是隨著品牌持續運營進入新的階段,我們發現現有的設計無法滿足后續的運營訴求了,主要體現在:

品牌logo:不能體現汽車的行業屬性,缺乏成體系的品牌符號和VI體系,色彩上也不夠符合時下潮流的年輕配色體系。

品牌活動:品牌關聯度弱,活動維度單一。



項目概述

因此,我們重新梳理有駕的品牌定位與調性,借助本次品牌升級,打造有駕差異化風格,形成獨有的視覺印記。

因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知,在原有基礎上進行品牌標識的探索及應用,以強化品牌感知,提升品牌的競爭力,整合業務資源做心智觸達。





前期分析

前期我們對汽車垂類的競品進行了一輪調研,并且結合有駕的用戶群里,尋找有駕品牌的差異點。

有駕用戶群體年輕化為主,普遍具有高學歷,集中在新一線二線城市。

通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后,我們確定了有駕品牌設計的四個核心關鍵詞:年輕、科技、未來、專業。



建立體系

在明確設計方向后,我們梳理了線上線下的所有品牌觸點,結合前期的調研結論,匯總出了有駕設計系統的完整框架,以確保品牌設計的完整性和靈活適用性。




設計落地

基于前期分析洞察結論,我們在繼承圓形和車形的基礎上,對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入,簡化圖形形態,嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。




相對于升級前,新版的logo加入汽車元素,解決升級前logo的行業屬性不明確的問題,讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋,輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。





符號提煉

確定品牌logo后,為了確保品牌能夠更好的拓展應用,進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型,造型偏向輪胎;在不破壞原有型的基礎上,加入一些折角的質感的變化,使圖形變化更加豐富,更有識別度。





設計語言

為了更好的觸達到各業務場景,所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向,以適配不同的落地場景。結合有駕的年輕化,科技感的設計目標,探索出以下三種質感呈現:






符號拓展

在提取的形狀基礎上進行變形,增加折疊細節。在大事件活動,海報等場景使用,增加品牌關聯度。




設計字體

結合全新的品牌定位,我們也優化了有駕的品牌字體,從細節出透出有駕的品牌感知。




品牌手冊

新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。

目前我們也對現有的品牌手冊進行拓展和完善,同步到業務方,以便更好的保證各業務場景觸點下品牌的認知和統一,達到提質增效的目的。



品牌落地

除了對品牌對角度的塑造和升級,我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中,讓有駕品牌形象更加立體多元。









結語

目前有駕品牌升級已經取得階段性成果,沉淀出更加完善的品牌資產,不僅提升設計效率保證全鏈路的品牌曝光,也為業務規?;蛳禄A。之后我們也將不斷完善和擴充品牌資產,將設計成果不斷落地到業務中,細化業務目標并與設計目標緊密結合,多維度助力業務的高速發展。





作者:百度MEUX
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

                           

用戶體驗 | 從生活中感悟峰終定律

鶴鶴

本文講述了“峰終定律”的定義,并結合筆者生活中的兩個例子做了圖文分析,最后通過學習海底撈的案例,然后結合顧客角度將一次糟糕的活動進行了改進。

一、峰終定律定義:

峰終定律( Peak–End Rule),是由丹尼爾·卡尼曼(2002年諾貝爾經濟學獎獲得者,心理學家)提出的——他發現人們對體驗(體驗事物或者產品)的記憶由兩個因素決定:

  • 第一個因素是體驗最高峰時的感覺(最高峰分為正的最高峰和負的最高峰)。
  • 第二個因素是體驗結束時的感覺。

即,除了峰值和終值時之外的其他體驗,無論好與不好體驗的比重是多少,體驗時間的長短,對記憶或感受都沒那么大影響,會被選擇性忽略。

概念講完,下面筆者結合去飯店買飯的故事,使用“峰終定律”進行圖文分析,為什么一家飯店給我的體驗非常糟糕,而另一家飯店我愿意推薦我的同事也去嘗試。

二、兩個故事

1. 第一家體驗不好的店:某燒臘飯店

之前有一段時間飯店聯合天地壹號搞活動,買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店,我特意說明了要醬汁,老板的“嗯嗯哦哦”充滿了敷衍。

我看著店里配餐員配餐、出餐,然后我問這份是不是我的,店里服務員支支吾吾,也沒有看著我,然后那份飯被拿去跟天地壹號的工作人員合影,一張不滿意又拍一張,一個角度拍完又換一個角度。最后,飯店的服務員才把那份飯給我,當時我心里憋了一股氣,就差破口大罵:我中午吃飯+午睡時間就一個小時,為了能睡好點還要吃得快點。

這家店給我的體驗就是,不把用戶當用戶,心里非常不是滋味。

而當我向同事說起這家店時,我會推薦手撕雞飯,這是我在廣州吃過的最好吃的手撕雞飯, 沒有之一。同時,我還會說上面的故事給同事,最后評價道:可以試試的,另外,出餐質量有問題他們也會給你換一份的。

當我說完這次的經歷給同事聽,同事并沒有表示會去嘗試一次,因為我說的故事,又因為價格也不便宜。所以說,店鋪(或者說品牌)是在食物(或者說餐品)之前被消費的,這是給用戶留下第一印象的關鍵,第一印象不好,即便是廣州第一手撕雞,也不會去嘗試。

那么使用“峰終定律”去分析這次糟糕的就餐體驗就是:

峰值有兩個,正峰值是廣州第一手撕雞的“口味”,負峰值是“員工服務”。負峰值的出現,說明了店家在活動開始前并沒有設計好活動流程,服務員也就沒有足夠的授權去處理和應對。

終值是“離店”時的不爽,店家并沒有作出任何的正面回應,沒有表達歉意,沒有意識到這樣做會給顧客造成怎樣的影響。

“員工服務”是直接突破了我的忍耐底線,“離店”時店家的不作為再次挑戰了我的忍耐底線。短時間內兩次挑戰我的忍耐底線,店家不但“失去”了我,我的幾個同事也不會是潛在客戶了。

忍耐底線不是卡尼曼教授的理論,是我結合了梁寧老師講過的內容,然后加到了這張“用戶體驗模型”圖上。

梁寧老師講的是:“PC時代用戶等待一個頁面打開的忍耐底線平均數是7秒,等了7秒還沒打開,基本上99%的用戶就會離開。所以,對成本的控制是本分,但是不能挑戰用戶的忍耐底線。”

2. 第二家體驗好的店:某粥粉面飯店

某天中午我發現寫字樓下新開了一家飯店,我到店里問老板,有什么賣的好的推薦一下,老板面帶笑容用“廣普”跟我一一介紹:哪個菜用什么材料做,哪個湯用什么材料燉,吃不了辣可以吃……在老板眾多推薦中選了一份,第一次嘗試這家店,總體感覺不錯。后面選擇了老板推薦的肉餅飯,發現真合我胃口。

上兩周有兩天中午休息時都到店里想點肉餅飯,但是連續兩天都在我來之前賣完了,之后老板說可以掃門口的小程序預約下單,第二天上班我早早的就預約了肉餅飯,到店之后老板已經打包好了,我把訂單信息給老板看,老板說了一句我聽到就覺得好笑,并且每當給人推薦這家店時就說的一句話:“這是我們專門給您留的肉餅飯。”

當我笑著回應謝謝的時候我也在想,這飯是我在小程序上面早早預定的,老板還說是專門我留的;因為我先付錢了,所以老板不賣給別人了。

我又想到,這家店的老板是愿意站在顧客的角度來提供對應的服務的,并且我也確實感受到了老板的真誠、熱情。

于是我把這家店介紹給了幾個同事,他們都表示下次沒有自己帶午餐的時候會試一下,并且有兩個同事聽了我的推薦后去下單了,其中有一位同事表示會回購。

這家店給我的體驗就是,不把用戶當流量,心里有用戶,產品可以,用戶自然會安利給身邊人嘗試一下。

使用“峰終定律”去分析這次就餐體驗就是:

有兩個正峰值,第一個正峰值是讓我感受到店家心里有顧客的“員工服務”。第二個正峰值是“口味”,這里甚至有一點點主觀上的小驚喜:當時抱著不知道會不會踩雷,試試新店的心態,當我試到肉餅飯時,小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。

小結:

當我跟同事同事說起第一家飯店體驗不好的時候,并不是說他的“港式氛圍”裝修不好,不是說出餐有問題不給換新的,手撕雞也是廣州最好吃的,而是說,這家店給我的感覺是他并不像跟用戶建立長期關系,只做一桿子買賣。于是他們并不注重維護客情關系,當他們把合過影的手撕雞飯遞給我時,連安撫情緒的話都沒有,就餐體驗自然就糟糕透了。

那么如果我是這家燒臘飯店的主理人,那我會如何設計本次活動?

我們先看看餐飲行業的巨頭都是怎么做的,因服務被大家口口相傳的海底撈就是非常值的學習的對象。

三、使用“峰終定律”分析最近一次我去海底撈時的體驗

通過模型,我有以下幾點感悟:

  • 排隊時海底撈提供的各種免費服務及零食飲料,目的是降低顧客等待叫號的無聊感,甚至讓顧客心甘情愿地等待叫號就餐,進而提高顧客滿意度。
  • 海底撈從顧客排隊,到顧客就餐,最后離店,打造了一套密集的正峰值的服務觸點。因此人們講到海底撈最先想起的就是海底撈服務。
  • 上圖列舉的點無明顯的負峰值,并且有很多服務觸點都是免費的,這就要求海底撈必須投入相應的資源,那么成本必然會少不了。
  • 關于資源與成本。理想情況下,每一個服務觸點都需要妥善處理。但實際情況是,我們不可能讓用戶在所有服務觸點都達到預期,我們必須在有限的資源下,換取用戶更多的正峰值與更好的終值,因此如何控制成本,合理配置有限的資源非常重要。

服務觸點:用戶為了完成目標,需要做一系列連續的行為,而這一連串行為中會涉及到一個一個的用戶與產品完成交互的觸點,這就是服務觸。比如上圖所示的,海底撈出于提高轉化率、降低顧客等待叫號時的無聊感等原因,在顧客排隊時可以體驗免費的美甲服務、免費擦鞋服務等。

四、燒臘飯店活動改進方案

帶著學習完海底撈得出的感悟,下面我來嘗試思考一下,我現在是這家燒臘飯店的主理人,那我會這樣設計本次活動:

首先需要了解我們的顧客:

1、顧客畫像

附近街坊、附近上班族,方便快捷解決午/晚餐。

2、顧客預期

選擇符合自己口味的菜品,店內就餐/打包回公司吃;店家穩定出餐(口味穩定、不要有異物等);不希望排長龍。

3、服務觸點

點餐時、支付時、等待出餐時(排隊)、(打包完)出餐時、離店時。

其次,才到本次活動的設計:

1、背景

贊助商天地壹號需要做品牌推廣,找到我們合作,方案就是消費即送天地壹號一瓶。

2、目的

幫助合作伙伴宣傳的同時,吸引新的顧客,回饋老顧客,提升營業額。

3、具體方案

3.1、制作印有“12.1~12.3日,消費即送天地壹號一瓶,送完即止”的宣傳海報,并且放置在店鋪門口。

3.2、完善服務流程。(請看下圖)

3.3、設置幾種異常情況的應對方案。(請看下圖)

完善好服務流程,提前設置好幾個異常情況的應對方案,相比于海底撈一連串的各種免費服務,其實花不了多少實際的金錢成本。但是卻能用最少的資源,最大程度的避免“負峰值”的出現。

另外,天地壹號的工作人員提出合影,飯店應該用自己的員工餐,而不是用顧客的。這其實不是異常情況的應對方案,而是作為服務行業從業人員該有的覺悟。

本文到此結束,朋友們如果設計/體驗了好的“峰終體驗”的案例,麻煩在評論區告知我一聲,讓我也去體驗一把~

作者:我是Berwin
來源:人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

設計怎樣讓用戶「同時」做好多件事?

鶴鶴

時間對于我們每個人來說都極為重要和珍貴。隨著生活節奏的加速,很多產品也都開始注重和考慮對于用戶時間的節省和分配。本文重點分享三種在交互設計中幫助用戶「同時做幾件事」的設計方法,以及其對應的優秀案例:

  • 分割屏幕的布局
  • 更容易再續操作
  • 忽略非重要操作

希望會為你帶來更多的設計靈感。

01 分割屏幕的布局

通過將屏幕的布局進行分割處理,可同時呈現多項內容,讓用戶自由選擇任務主次,同時處理多項任務。分屏設計很常見,但其中的體驗細節卻依舊值得研究和優化。

案例1

微信在 Pad 端的分屏布局考慮得很周到,看微信視頻時支持分屏功能,還能夠調整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機尺寸,體驗順暢,看視頻、接微信兩不誤:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例 2

bilibili 在移動端的視頻通過小窗模式可以不間斷播放,不僅可以在 App 內或外呈現小窗模式,正在播的視頻,在被臨時打斷退出視頻后,還可以用音頻的方式繼續播放:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例 3

微信的新功能,在你閱讀文章時依舊能看到朋友發來的微信消息,可以直接在當前頁面回復消息,避免你在看文章時閱讀不了微信消息。你還可以將信息“標記未讀”,一會兒再做處理:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例4

微信視頻號改版后,點擊視頻號下方的博主名稱和頭像,下方彈窗會彈出該博主的主頁和其他視頻,而當前正在播放的視頻會漸漸呈現小屏播放,視頻內容不會被遮擋,既不影響觀看,也不影響用戶探索該博主的其他視頻內容:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例 5

在微信訂閱號中展示的視頻內容可以通過劃到右下角變成小窗播放音頻,既可以聽內容,也不影響你繼續瀏覽訂閱號的其他內容:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

02 更容易再續操作

產品可以讓操作更容易被用戶管理和掌控,在被打斷后很容易被用戶重新再續,給用戶足夠的掌控感。在一些特殊情況下,幾件事可以交替、穿插地處理,同時進行。

案例 1

釘釘的移動端浮窗功能,向右滑動退出正在操作的頁面時,就會出現添加浮窗區域,用于收錄未做完的操作。同時顯示出已添加浮窗的內容數量,最多添加 5 個:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例2

微信的浮窗功能也可以幫助用戶更快捷地收錄未及時閱讀的內容,在打開時還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時間來閱讀長篇文章,可以更合理地掌控閱讀節奏:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例3

微信讀書 App 會在你跳讀到其他章節時,在頁面下方顯示“返回原進度”的按鈕,方便你在跳讀后回來繼續閱讀:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例4

網易163 郵箱側重于為你呈現工作的多線程。每點開一封郵件,頁面上方會增加一個類似瀏覽器標簽頁的 Tab,你可以通過它們查看自己的工作和閱讀軌跡。當你在寫郵件時,同時又收到了其他的新郵件,去查看新郵件之后,可以通過 Tab 直接回到郵件編輯頁面,繼續編寫剛才的郵件:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例5

使用釘釘發起會議邀請,如果中途退出,系統幫助你自動保存。再發起會議邀請時也會給出上次操作的提示,幫你續寫內容:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

03 忽略非重要操作

用戶可以選擇忽略或隱藏并不重要的、正在進程中的任務,將更多的時間用在其他事情而非無法控制的等待上。

案例1

iOS 系統中,當你在不同 App 之間傳遞文件時,如果文件過大,彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”,用戶點擊后可以繼續做其他操作,并不妨礙后臺的文件傳輸。

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例2

微信在接收超大文件時,增加了“發送給朋友”的選項,你不必等待文件在自己這邊下載完成后再發送,可以直接發送源文件給對方,同時下載:

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

案例3

微信撥打語音的界面,在等待好友接聽的過程中,你可以看到對方朋友圈的動態,緩解無聊的等待,也為即將進行的語音聊天提供了話題

案例錦囊|設計怎樣讓用戶「同時」做好多件事?

作者:元堯
來源:人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

如何進行高質量B端用戶訪談?用戶研究方法

鶴鶴

前言

在上一篇《如何設計高質量B端調研問卷?用戶研究方法(一)》一文中,詳細介紹了如何通過調研問卷的方式,整理發現用戶的淺層需求。

本文將分享另一個更為深層全面的B端用戶研究方法——用戶訪談。通過面對面地溝通,以及觀察用戶的表情、行為去挖掘更深層的需求。(文末附模板下載鏈接)


下面是本次分享的文章結構,標??的為重點部分。

01

用戶訪談的兩種路徑

用戶訪談通??梢圆捎?strong>線上會議、電話或者線下面對面交流兩種形式。


線上會議和電話訪談的優勢顯而易見,可以不受地域限制展開調研訪談,整體的成本也比較低,設計師可以自己找領導或者協調資源去推動。

缺點也是比較明顯,溝通起來效率低下,比如我們一定有過“電話里說不清,我們見面詳談”的經歷。

所以,相較而言線下訪談無疑是最佳的調研形式。首先當面溝通更加高效,其次對于搭載硬件設備的產品來說,讓受訪者在真實場景里操作演示,可以發現更多隱性問題。


02

常見的3種受訪者類型

在訪談過程中通常會接觸到以下3種類型的受訪用戶,不同類型的用戶我們應該怎么接觸交流呢?

1.話癆型

話癆型的受訪者占大多數,通常就是想法、意見比較多。他們不僅有一大堆不滿意的點要訴說,甚至連對應的解決方案都想好了。

整體接觸下來,我覺得該類型的受訪者,可提供的有價值信息會更多一點。只不過我們要學會過濾信息。因為他們的修飾用詞通常比較多,例如:“太難用”、“超級麻煩”、“哎  我真的是受不了啊”...

訪談話癆型的受訪者,我們需要注意無論怎么聊都要緊扣主題,防止變成了吐槽專場。

其次也要表達肯定,安撫情緒,并對問題進行進一步提問:“您的這些建議真的很棒,也給我們提供新的思路,我都記下來了,我還想確認下,剛才您說的3個關于結算環節的問題,哪一個給您造成的困擾最大?”

2.牙膏型

顧名思義,受訪者可能是因為性格內向或害怕說錯了不好意思等緣故,在受訪過程中問一句答一句,比較容易冷場。答案的價值也比較低,例如:“對,是的”、“還行吧”、“沒啥感覺啊”、“反正就這樣用用吧”、“說不上來”。

這種情況下要嘗試緩解下氛圍壓力換個形式溝通:“就是隨便聊聊,公司派我們來呢,就是因為非常關注用戶的使用感受,想收集一波用戶反饋與建議,您有啥不滿意的地方都可以跟我講講,越多越好?!?/span>

其次我們在提問的時候也要帶有引導性,例如:“還有呢、然后呢、具體說說呢”,如果對方實在說不出所以然,最有效的辦法就是進入上機操作環節,通常操作過程中那些問題也會隨之暴露出來。


3.專業型

專業型的受訪者一般是老板或者店長、經理崗位的員工,他們對于產品或整個門店乃至行業都了解的比較透徹

和這樣的受訪者溝通,不僅是局限于產品的一些問題挖掘,他們會從這個行業的角度闡述一些個人的見解觀點,給我們提供一些有價值的優化方案或者改進方向。

例如餐飲的老板其實并不是很關心點餐、結算的流程有多么的順暢高效,畢竟他們不需要親自去做這些執行,而且坦率的說,對于絕大部分產品而言,好用并不能成為其核心競爭力。

他們關心的是如何帶來更大的商業價值,類似于如何提升坪效,如何提升門店會員的儲值能力等等。而這些老板的關注點,也會給我們未來的產品優化方向打開新的思路,去思考如何給我們的用戶創造更高的商業價值。


03

采訪者需注意的5個要點

1.多了解行業&業務背景

我們在做訪談之前,首先一定要熟悉產品業務的相關背景、受訪商戶的基本情況。

訪談過程中可能會提及一些專業名詞,例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎相關知識以后,省去了不必要的解釋環節,可以使訪談推進地更順利。

其次建議要了解下行業相關的基礎知識。尤其是餐飲業態,華南、北方、四川等地都因為飲食習慣的不同,在產品的功能和使用上的需求也是相差很大。具備了這些知識點以后,在提問過程中,也更利于提出一些深刻的問題,而不是浮于表面的提問。

行業相關的分析報告,可以去艾瑞、36氪、發現報告等網站進行查詢收集,在此不做贅述。

2.訪談框架不設限

在訪談初期,需要準備一份訪談框架,但并不意味著我們整個過程只能按提綱來提問。尤其是B端這種千載難逢的訪談機會,只按規定的框架提問屬實是太吃虧了。所以在時間允許的情況下,除了框架以內的問題,盡可能多發散的去提問。

例如餐飲業態,會有各種不同載體的終端設備聯動使用,一體機POS、手持的POS、廚房KDS、廚顯大屏、各類打印機等等都可以順便了解、調研下,讓我們對于全鏈路的協作流程也會有更深刻的認知。

再例如后廚會涉及到KDS大屏顯示,可以問問目前的大屏顯示是否夠清晰(字夠大),也可以和負責海鮮稱重的工作人員聊聊,海鮮的售賣、計價流程,以及菜品雙單位(例如:1【條】魚,重量1【公斤】)的使用等等。

在溝通過程中,一定會有一些觸類旁通的收獲與問題被發現。這些問題也許來自一個模塊、或者某個特定角色,又或者是主產品關聯的其他后臺產品。


3.講大白話

在提問的時候要考慮到受訪者的年紀和理解能力,如果措辭過于專業,可能會導致受訪者理解不到位,因此溝通的過程中要盡可能的說大白話。


4.多看多問多感受

我們都知道沒有經歷過的事,很難感同身受。有時候看到客戶群里,因為產品的各種原因導致商戶情緒激動,我們理智上非常理解,但是情感上很難共鳴。

因此每次的門店調研,我都會抓住機會觀察整個門店的運營情況,去感受那種忙碌的氛圍。有時候開始進入營業高峰期,機器出現卡頓或者外賣不接單等情況時,自己的情緒都會一下子緊張起來,也能夠深刻感受到產品給客戶帶來的困擾

當再次有產品迭代優化時,這些體驗總能讓自己能更容易代入用戶的角度思考問題。

除了去體會產品對情緒的直接影響,還可以關注下整個門店的布局、收銀產品的數量與擺放位置、不同產品的協同使用等等。

這些都會幫助我們發現,到底什么是門店運營環節里最重要的模塊。

5.做事有始有終

在訪談過程中,不排除受訪客戶會反饋一些暫時無法解決的問題。這時候一定要告訴受訪商戶:“您的問題我已經記錄下來,回去會針對這個問題反饋上報,最遲X天我會讓顧問給您回復的”。

這么做一方面也是細節處維護公司品牌的整體售后體驗,其次也有助于我們再次回訪時,受訪商戶樂意花時間跟我們聊。


04

用戶訪談的3個階段

了解了用戶訪談的一些基本信息和注意點以后,到了本文核心部分,關于整個訪談的推進過程,一共分為3個階段。

1.準備階段

① 訪談的3種類型

首先明確訪談的類型,用戶訪談的類型主要分為以下三種,最常見的就是第三種類產品使用回訪。

新品場景調研

新品調研的訪談,一般是由于業務的發展,可能需要升級或者打磨一款新產品來滿足市場的需求。

在訪談的過程中,我們需要關注的點就是用戶畫像、商戶訴求、使用場景、終端載體等一系列因素。


潛在商戶拜訪

當去往一個城市進行批量客戶調研的時候,偶爾會有拜訪潛在客戶的調研機會。這種類型訪問的關注點集中在商戶的痛點與需求上。

由于是潛在客戶,我們勢必是要了解他們想要購買或者替換產品的前因后果。也是借此機會了解到競對的優劣勢,他們放棄競對的原因,以及我們當前產品的功能是否滿足客戶的需求,還有哪些點不滿足,客戶重點關注的是什么。


產品使用回訪

使用回訪是最常見的訪問類型,主要目的是對商戶進行售后維護、提升使用體驗

且由于B端產品的復雜性和遠距離特點,以及新功能同步給商戶存在的滯后性,公司會安排定期的上門回訪。如果有這樣的機會,UED一定要盡量申請跟著去門店調研。


 問題設計3步走

到了最關鍵的一步,就是關于訪談的問題設計。

總結一下,問題的設計渠道來源主要有3種。主要還是根據調研目標進行問題設計,另外兩種方式,作為輔助。

那具體問題應該怎么設計,這邊我們分為3個步驟,從面到點依次拆解進行問題設計。

第一步:了解產品全場景能力

B端產品的特點可以借用《U一點料》的9個字概括,“多場景、全鏈路、多角色”,所以設計問題前,我們可以從場景+鏈路+角色/節點功能的維度來設計問題。

以餐飲行業的產品舉例,首先建議了解自家產品的全場景業務能力。即從商家端到消費端會經歷的產品模塊和具備的現有功能,做到心中有數即可,畢竟不會一下子調研這么多模塊和功能。

第二步:確定要調研的流程主線

其他ToB產品同理,可根據某個操作鏈路為主線,確定主流程后進行問題設計。其實就可以理解為確定調研的目標。例如下圖要調研的主流程,就是提取點餐>下單>結算為主線。

第三步:關鍵節點問題展開設計

根據剛才確定的主流程  我們找到所有關鍵節點進行問題框架設計。

以上3個步驟可以理解為,如何在功能極其復雜的B類產品當中,篩選出與訪談目標緊密相連的功能鏈路。避免我們的訪談提綱做的過于冗余沒有核心。


③ 2種提前準備工作

提前告知

這點也非常重要,每一次去門店調研之前,先由當地負責的顧問與受訪商戶提前溝通。


一方面是需要與對方預約時間,另外一方面這種訪談對商戶而言就相當于優質的售后服務,會有受訪商戶提前列框架,準備問題。


那么這種情況更有利于調研,因為受訪者明確自己的問題點在哪里,就等著調研團隊(售后團隊)來門店后,好好拉扯一番。

準備材料與設備

萬事具備,只欠東風。我們再盤點確認下本次訪談的各類工具是否備齊,準備進入訪談階段,大致需要準備的東西是以下4種材料工具。

2.訪談階段

在了解了受訪者類型、采訪者需要注意的點,以及帶著我們設計好的問題,下面正式進入訪談階段。

① 開場白

到達門店后,我們的顧問會給受訪客戶做一下來訪成員介紹,并講明此次到店的目的。一般都是產品使用回訪,或者新功能推薦培訓。


通常來說,受訪商戶對來訪團隊總是有很多”心里話“想嘮一嘮,因此暖場氛圍比較容易起來,也有助于我們接下來的溝通


② 訪談中

進入正題以后,我們會先大致了解下受訪者最近使用的體驗以及遇到的問題,而后會根據問題框架進行提問。在整個過程中也需要注意觀察用戶在描述問題時候的表情和肢體語言,搜集用戶對于產品的真實態度。

其實整個訪談流程我們歸納一下,需要關注的就是四個關鍵點,手+口+心+顏。

手-實操演示

關于實操演示放在第一個講,是因為這個環節非常重要。線下訪談時強烈不建議“脫機訪問”,這種形式對受訪者而言需要花更多的時間去思考問題的答案。


會遺忘甚至想不起來當時的具體情況,隨便的敷衍回答“嗯,還行”、“挺好的”,或者干脆彼此都不在一個頻道上。


其次,在操作過程中,建議用手機進行拍攝記錄。因為每個人對產品的理解方式與程度不同,在用戶操作的過程中,會發現一些有意思的代償方案。這些也是思考的切入點。代償方案是否比原先設定的實現方法更便捷。


回去通過視頻仔細分析受訪者的操作路徑,以及每個操作之前是否有遲疑等等。并且將問題點一一記錄下來。


口-問具體操作

這個就是根據問題框架進行提問。在這個過程中,通常會穿插著上機操作演示,在現場記錄的時候可以先記錄個大概,等結束后再仔細整理。

心-問心里感受

問受訪者的心理感受,其實就比較偏主觀了,我們可以從“我們家的產品”和“人家的產品”兩個維度去對比詢問心里感受。值得注意的是,即使是這樣開放式的提問,也有提問技巧。


比如“你覺得現在還有什么不好用的地方”就比“你感覺現在的產品好用么”這樣的提問方式更有效。

因為產品一定是有可有優化的空間,“有什么不好用的地方”這樣提問的方式就是具體到了某個點上面,具體什么點不好用。


而后者的提問方式是基于整個產品,受訪者可能會出于不好意思等原因直接說“你們的東西還行吧,還可以”。


顏-關注動作表情

當我們提問產品優缺點的時候,受訪者大部分都會帶上表情和肢體語言,并且情緒表現和性格有比較大的關系。

性格比較雷厲風行、急躁一點的,通常會像連珠炮一樣瘋狂輸出,并且措辭會比較極端。例如:“真的太難用了”、“太麻煩了”、“嚴重影響門店營業了啊”。

接受到這種信息我們首先要做的就是安撫對方的情緒,其次對于這些信息要學會剔除一些夸張描述。

性格溫和一點的受訪者,在闡述問題的時候也會比較婉轉?!安皇翘奖恪薄ⅰ斑@個改動沒啥感覺”、“也還行、都可以”,如果某個高頻操作真的很影響日常工作效率,往往會表現得很無奈,甚至還有點委屈。

那么無論是哪種表現,其實都要考驗采訪者的經驗,結合產品的功能去考慮,找到反饋中真實有效的部分。

通過以上4個環節,其實就可以收集到很多有用的信息,語言信息、視頻信息、動作表情信息等等。接下來的任務就是信息的梳理歸納。

③ 結束語

訪談結束后,我們需要做個簡單的總結回顧。將關鍵問題再次復述確認,進行查漏補缺并且再次感謝受訪者,表達他們今天提的建議價值很大,后續會梳理出可落地的點優化到產品當中。


如果說聊得比較開心,大多數的受訪商戶都會邀請來訪團隊吃個飯再走,也算是額外的福利。在就餐過程中的非正式場合交流,也可以聊聊門店的一些運營情況等等,幫助我們更深入的了解這個行業。


3.收尾階段

① 資料梳理

我們在訪談過程中會有大量未整理的一手記錄,結束后需盡快的梳理,盡可能詳細的記錄下用戶描述的細節、肢體動作表情語言等等。建議使用石墨、語雀、騰訊文檔等在線編輯工具,方便分享修改。(本文提供模板可下載)如果是連續訪談幾位商戶,我會在訪談結束以后,迅速地將剛才的訪談內容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒有的問題,去下一家受訪商戶的時候可以驗證下該問題的普遍性。

② 整理落地

輸出后我們需要再次進行提煉,將有價值可落地的問題點提取出來,進行匯報分享,并找到相對應的產品研發進行探討排期,這樣就形成了一個完整的閉環,真正做到了發現問題、解決問題.

③ 流程概括

前文絮絮叨叨說了很多,其實關于用戶訪談這事用6個字就可以概括,簡單理解:


問誰?問啥?答啥?改啥?

能夠回答清楚這4個問題,那么這就是一次有價值的訪談經歷。

最后

ToB業務的特點就是會有一定的行業壁壘,設計師在剛接觸的時候一定會有很多茫然時刻。對于各種專業詞匯的一臉懵,對于行業的不了解。


或者很多人對于B端的認知還停留在,B端好像沒啥好設計的,都是現成的組件庫拖一拖,成就感比C端差遠了。


那么做訪談、體驗優化的意義是什么呢?


作者:B端設計情報局
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

Tab Bar 動態設計提示

博博

01 前言

你有沒有注意過,App底部的圖標是如何變成選中的?大多數產品是將靜態圖標替換(硬切過渡),來完成狀態切換。




當我看完上百個動態后,找到了更有趣的方式...

02 App底部導航構成

通常由圖標、文字/點線裝飾、和底板卡片組成,(當然也有些產品只使用圖標或文字),但設計師在進行動態設計時則是針對這3部分。




03 Tab Bar動態類型

  • 圖標動態
  • 裝飾元素動態
  • 底板卡片動態

動態效果由弱到強,視覺層級由低到高依次排序:圖標動態 — 裝飾元素動態 — 底板卡片動態。(根據本文案例效果來排序,但效果不同會有所差異)

圖標動態?
我們知道圖標風格可以簡單的分為:線性、面性還有線面。在這基礎上通過修改顏色或造型,又能延展出更多風格。



  • 在底部導航中,假如圖標選中前后都是線性風格

最常用的是添加修剪路徑(Ae的一種路徑效果),你可以把它理解成托尼老師,可以通過調整百分百參數來控制線條生長。




但只是單色修剪,看起來很單調。我們可以在這個動畫基礎上再多復制幾層,并分別加入品牌色,這樣可以讓視覺看起來更豐富。



也可以換一種方式,只調整不同顏色圖標的位置屬性,便能得到故障效果。




如果你覺得這些太浮夸,那么單個圖標添加修剪路徑,再配合位移、旋轉等基礎屬性則是更好的選擇。



  • 假如選中圖標是面型風格

通用的方法是調整不透明度,相比于硬切更柔和,且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產品來說,可能會顯得有些普通。




我們可以考慮使用遮罩來制作動態,首先在圖標周圍繪制幾個圓,再將圖標外輪廓,作為圓的遮罩,來控制其顯示范圍,最后調整圓的縮放即可。




在一些特殊的時間,設計師們可能會技癢,而將圖標繪制的更加豐富,來營造氛圍。



對于這類圖標,只需要參考它們的物理狀態[下方解釋],再遵循從下往上,從中心往四周擴張的原則來調整基礎屬性,便能制作出細節豐富的出場動畫。



(物理狀態:該物體在現實場景下的狀態,上圖獎杯真實世界狀態通常是放置地面,所以出場方向是從下到上。但假如你的圖標是錦旗,那么物理狀態應該是掛在墻上,所有出場方向是從上到下)


當然如果去掉高光和投影,在制作一些動態時會更方便。
例如:復制一顆星,將其初始位置設定為一個獎杯的距離,并記錄關鍵幀,然后整體再移動一個獎杯距離。耳朵則調整路徑來完成移動和變形,這樣便能營造出3d旋轉的錯覺。



  • 假如選中圖標是線面風格

對于結構復雜的圖標,可以提前分層。其中線條依舊可以使用修剪路徑(在Tab bar中,不同圖標修剪路徑的起始點方向通常相同,以便保持一致性),而填充只需要調整元素縮放,并借助蒙版限制其顯示范圍就行。




裝飾元素動態?
如果你覺得前面這些方案不夠新穎,那我們可以對裝飾元素下手。(當然這類方案很少見,原因在于商業價值不足,實現成本高,所以這里也只是提供一些創意練習思路)
在一些年輕化產品中,如果圖標含義很容易理解,那么設計師可能會用線或點來替代文字,讓整體更簡潔。
國外設計師Tubik,通過讓點元素在移動時呈現心電圖樣式,讓人眼前一亮。




通過動態效果,甚至能體現出產品行業屬性。

  • 基于這種思路,我們同樣讓裝飾元素放在下方

嘗試修改軌跡樣式,然后為元素不透明度和位置添加動畫,你能猜出這是什么類型的產品嗎?




又或者再夸張些,將軌跡設計成電路圖。其中線條添加修剪路徑,再借助Ae路徑跟蹤方法,使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍,這個方案看起來適合科技或游戲類產品。



  • 裝飾元素還可以放在上方

通過調整元素路徑來改變其造型,模擬液體滴落,再通過蒙版縮放,讓選中狀態下的圖標出現。



  • 裝飾元素還可以放在中間

假如你的圖標設計的足夠巧妙,我們可以提前繪制好關鍵筆畫的運動軌跡,便能通過修剪這條軌跡來完成筆畫的移動。





底板卡片動態?
這類動態少見的原因在于其動態效果面積大,視覺層級高,容易過度吸引用戶注意力。目前也只是在個別產品中看過卡片凸起效果。

  • 當選中圖標時,讓卡片凸起

在Ae中要制造這樣的效果,最先想到的可能是調整卡片路徑,但這樣的方式在制作彈性時非常麻煩。




我們有更簡單的方法,先多畫出一個圓,然后與卡片路徑合并。
為了讓邊緣圓滑,整體添加高斯模糊簡單阻塞,分別加大參數,便能讓邊緣圓滑。(這種方式有個缺點:會收縮原有卡片寬高。所以添加效果后,需要借助參考線再次調整卡片大?。?/span>



完成圓滑處理后,修改其他元素的基礎屬性即可。



目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾,其弱化了彈性次數。

  • 除了凸起,還可以凹陷

這個效果靈感來源于Dribbble設計師(EuroART93),我們只需要將凸起案例中,圓與底板卡片的布爾運算模式改為相減就行,其他元素同樣調整基礎屬性。



此方案目前還沒有在其他產品中看過,究其原因還是效果太過搶眼。

看了這么多,其實不難發現。同一個圖標,只需要改變不同屬性或元素的運動方式,便能帶來不一樣的感受。



或許創意的產生,并不是腦袋突然迸發出全新的東西。而是許多我們熟知的舊有內容組合了起來。
正是它們之間這種奇妙的融合,給我們帶來了新鮮感,或許這就是我們要的創意。





最后再說兩句:

每個產品都有自己的調性和目標用戶,動態效果也有強有弱。好的動態應該是能與其進行匹配,而不是根據某個產品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態,并不代表只能這樣用。動態效果類型遠遠不止這些,而以上只是最常見的動態屬性組合方式,所以請不要局限你的想法。

作者:幺零三
鏈接:https://www.zcool.com.cn/article/ZMTQ5OTgwOA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。



作者:幺零三      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

動態引導設計

博博

01 前言

在產品設計中,當有新上線的功能或隱藏功能時,我們通常會給予用戶提示。常見的有小紅點、角標、黑色遮罩+文字提示等這類靜態提示。

而人類是視覺生物,相比于靜態內容,我們的注意力更容易被動態內容吸引。

今天來聊一下頁面中常見的動態引導。

02 一個小案例

當你看到這個頁面時



我想你會先被色彩凸出的元素吸引,然后是面積占比大的元素,最后根據閱讀習慣從上到下,從左到右,依次查看其他內容。(大致如下圖)



而當頁面元素都賦予細節時



假如我想讓你關注到其中某個較小元素



其實只需要為它添加動態,便能使其脫穎而出,這就是產品設計中的動態引導。



03 動態引導的作用

  • 新功能提示
  • 重要內容強調
  • 誘導用戶操作
  • 操作教學指引
  • 信息高效傳遞

新功能提示 ?

當產品上線新功能時,設計師們都會根據功能重要程度,來決定使用什么形式讓入口元素和其他元素區分開來。常見的有小紅點、標簽、氣泡這類靜態點綴元素(通常這類形式只出現一次,當用戶點擊后就會消失)。當然,也有將上述點綴元素動態處理的。如果入口是圖標,甚至可以為圖標制作動畫,這在很多電商產品的品類區經??梢钥吹?。



動態處理的形式,比原本的靜態更容易引起用戶對元素的注意力(與動態方式有關),甚至傳遞某種情緒。由于是循環播放的動畫,因此可以持續吸引用戶注意力。

ps:據說,每當頁面多出一個會動的元素,后臺就會多出這樣一些留言,捅了開發窩了[Doge]。



誘導用戶操作 ?

動態引導還常常被設計師用來強調重要內容(有可能被產品、運營拿刀架脖子),來達成某些數據指標,通過利用動態誘導用戶操作。

例如:在會員卡片中添加光效、在廣告中讓按鈕進行縮放、為簽到入口圖標設置動畫。



這些都能充分引起用戶注意,甚至提升功能點擊率。



隱藏功能提示 ?

我們知道,在大屏上有更多空間可以展示信息。但在移動端,受屏幕大小限制,設計師通常會折疊或隱藏不常用的功能,來保持頁面簡潔。



對于這些不可見的功能,在初次使用時需要進行引導,才能被用戶感知與使用。



操作教學指引 ?

講到引導,還必須要提的是手勢引導,通過動態直觀展示不同手勢的作用,提示用戶如何與產品進行交互。



這在游戲教學中就常常使用,它可以幫助用戶快速理解游戲玩法。



回到視頻 App 中,你是否留意到,當你第一打開視頻時, App 會提醒你雙擊屏幕可以點贊,上下滑動可以切換視頻。



在產品交互設計中,如果使用到一些新穎的交互方式,這類引導可以大幅降低用戶學習成本,幫助用戶快速上手。

信息高效傳遞 ?

動態敘述的直觀性,使得我們可以減少對復雜信息進行大量文字描述。通過動態設計,我們可以創建視覺故事,這有助于將復雜信息以更簡單、清晰的方式進行傳遞,從而幫助用戶快速完成任務。

也因此,在一些含有復雜操作的彈窗中,漸漸開始應用。



但是需要注意的是,上述這些大多都只在第一次使用時才會觸發。

當然有特例,例如:

在 App Store 每次下載應用進行驗證時(面容解鎖的情況下),系統會通過動態提醒用戶電源鍵位置,并告知用戶需要雙擊進行人臉識別。



在掃碼時,弱光場景下出現的手電筒,通過動態引起用戶注意,指引用戶使用。



以及作為動態演示,幫助用戶理解如何使用手掌滑動截屏



如何進行NFC感應等等..



04 總結

動態引導像是設計師用來控制我們眼睛的法寶,有的人用它改善產品體驗,有的人用它提升商業轉化。

但法寶雖好,我們只有理性使用,才能避免用戶迷失在這眼花繚亂的世界中。



感謝大家看到這里,我是幺零三,咱們下期見...


作者:幺零三
鏈接:https://www.zcool.com.cn/article/ZMTQ2MTI0OA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。



作者:幺零三      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

7個實用技巧,教你搞定可視化圖表

博博

可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。

可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中,如果沒有系統的可視化知識,會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么,在復雜的數據關系中如何設計和選用圖表,如何在好看的同時提升信息傳達效率,看完這篇文章希望對你的設計過程有所幫助。


// 為什么要數據可視化


數據可視化就是用圖表來表示數據信息,它所傳達的信息包括你所拿到的數據源和你分析后的結果,再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息,是我們可視化的最終目的。



舉個例子,同樣一組數據,用表格的形式呈現是很難有所洞察的;如果將各個地區維度的數據聚合以柱圖形式呈現,很容易就能看出各個地區間數據的差異,并從中洞察規律


關于如何設計好數據可視化圖表,這邊總結了三個步驟:選擇適合的圖表,強化視覺層次,圖表響應式適配。


一、選擇適合的圖表


數據可視化的圖表種類繁多,當我們真的開始作圖,往往會遇到一個困境:有這么多類型,要如何選擇正確的圖表呢?首要依據是考慮所要傳達的信息意圖,即所要制作的圖表它的任務是什么,再通過分析數據關系來選擇表達方式;第二層意圖是圖表傳達內容,這時候我們就需要根據數據的特征去突出和強化。


1. 分析數據關系

根據數據分析的方式來看,每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構,再結合數據關系作出選擇。了解圖表的可能知道,一般圖表的數據關系有構成、比較、分布,以商業數據為例,常見的還有流轉關系。



構成關系

構成關系的圖表表達的是部分和整體的關系,用于分析總體和各部分的占比比例,構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小,也可以使用比較關系的圖表。

常用圖表:餅/環圖、堆疊圖、面積圖等,如涉及到層級結構,還會用矩形樹圖或旭日圖等特殊結構圖表。

關鍵詞:“占比、比例、百分比”



比較關系

比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內,通過對兩個或兩個以上的指標分析,可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式,趨勢對比用于表示一段時間內數據的變化,分類對比用于比較數據規模。

常用圖表:趨勢對比常用圖表有折線圖、散點圖等;分類對比常用條形圖、柱狀圖、氣泡圖等。

關鍵詞:“增減、升降、漲跌、波動”



分布關系

利用空間分區來展示數據之間的分布關系,常用于體現兩個或以上數據的相關性。

常用圖表:散點圖、熱力圖、雷達圖等

關鍵詞:“隨著……而變化、A/B之間的相關性、交/并集”等



關聯與流轉

流轉關系是B端數據常用的一種關系,它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等,以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。

常用圖表:關系圖、?;鶊D、漏斗圖、進度圖等

關鍵詞:“流程步驟、留存、轉化、關系”



2. 分析數據特征

按數據關系和分析目的選擇好圖表類型后,第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有:變量特征、維度特征、層級特征、流程特征。


變量特征

分辨一個指標通常有兩類特征,按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢,離散數據通常統計各分類下數量的變化。

  • 連續型數據:指在一定區間內可以任意取值的數據叫連續數據,其數值是連續不斷的。如身高、體重等帶有時間因素變量的數據等,通常用折線圖體現變化趨勢。
  • 離散型數據:指其數值只能用自然數或整數單位計算的數據。如當天銷量、進店人數等表示分類類型的數據,用柱圖表現更加體現變量的特征。


維度特征

多維度分析需要將多個變量在同一平面上直觀的表示,可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據,可使用不同顏色進行分類

  • 根據分析視角選擇圖表:對于多維度變量的數據我們需要明確分析的視角,去找準對應的數據映射。如案例中多個班級的科目成績的這組數據,如需要全局視角查看個班的綜合素質,推薦使用雷達圖;對比單科成績的變化分布,則推薦使用堆積圖。


層級特征

多層級數據由多個部分構成一個整體,又稱樹形結構數據。除了用結構樹圖表表現以外,還可以考慮以下兩種圖表類型:

  • 矩形樹圖:突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小,它以面積的形式突出展現各個子層級節點的占比,可幫助用戶看到數據的層次結構以及各層級之間的關系。


例如:上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額,通過色調來區分不同類型,顏色的深淺代表分類下的子集,面積體現銷售占比。對比一般結構樹圖表,它的優勢在于可以有效利用空間。

  • 旭日圖:突出細分層級關系。由多個圓環圖嵌套而成,也稱為徑向樹圖,它既能像餅圖一樣表現局部和整體的占比,又能像矩形樹圖一樣表現層級關系。常用于細分分析方法,將事物從大到小進行拆解。每個級別的數據通過1個圓環表示,離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效,而矩形樹圖適合比較相對大小。


流程特征

流轉關系是表達數據轉化流程的重要類型,不僅包含統計意義上的數據總和,同時還表達了信息流轉的路徑;其中?;鶊D和漏斗圖都可以表達路徑中流量的變化,不同的是?;鶊D重點強調流量的強度和走向,漏斗圖更加注重突出轉化率和效果,根據不同的表達目的選用。



二、強化視覺層次


選擇合適的圖表后,在信息傳達上也需要正確的表達,展示形式美觀的同時能夠清晰的體現數據特點。


1. 強化數據特性

使用圖表正確的表達信息,需要設計師在強化數據特性的同時避免偏差

  • 趨勢易感知:折線圖數值如過于平均導致趨勢平緩,有時候無法體現偏差;在強調數據趨勢的場景下,推薦用動態取值范圍讓波動保持在一定范圍內,放大波動占比更突出趨勢。


  • 展示更準確:柱狀圖依靠柱體面積體現最終數值,使用動態范圍截斷將會導致數據解讀不完整;始終將 y 軸從 0 開始,才能更準確的反映柱圖中的值。


2. 色彩視覺傳達

除了在設計構圖上優化以外,顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知,錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板,精確傳達信息同時后續的項目在選用時也可以達到用色的統一。



我們在之前的文章里有介紹過圖表的取色模型,通過調整顏色HSL值的區間,可以得到以下三種意圖色板:

  • 定性型-分類色板:用于區分不同的類型,又稱為無序色板。適合區分沒有內在順序的類別
  • 定量分歧型-發散色板:通過兩邊互補色來體現,具有明亮的中間值,然后以不同的色調在刻度的兩端變暗。通常用于可視化負值和正值
  • 定量順序型-順序色板:從亮到暗或相反的漸變。適合可視化從低到高的數字。

那么我們要怎么樣去使用這些色板呢?下面幾個案例將帶你了解其中的差異。


定性型:使用色調來進行分類

數據內在沒有順序差別時,建議使用色調值(H)進行區分;如定義國家、行業等類型。如果希望圖表看起來更加專業,以下有幾項分類色板的小建議:

  • 選取盡量少的色調:取色時無需使用整個色環,使用鄰近色或互補色的取色方式顯得更加專業。


  • 色板適度明暗交替:一些視障人士無法區分色相,主要靠顏色的明暗差異來識別,通過飽和度和暗度的調整,創造明暗交替的色板。


定量型:使用深淺色板強調內在順序

如果在同一個分類下包含子類別,或者數據本身具有排名屬性,那么建議使用連續色板來突出他們內在的順序,使圖表更加易讀。

  • 順序色板-選擇合適的插值:根據數據的分布情況選擇不同的的插值斷點,突出數據的差異。如以下案例中,根據統計學概念設定不同的取值區間,左側示例使用的是平均線性差值,反映的是數據的集中趨勢;右側示例使用的是中位數插值,能更好的體現數據分布的形態。


  • 發散色板-關注對比色的識別性:盡量避免紅綠配色,如需使用綠色,偏黃或偏藍的綠色更易分辨,對視障人士也更加友好。


三、圖表中的響應式設計


B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報,在基礎設計完成后還需要考慮到圖表展示的環境,根據不同端去適配顯示效果,以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。


1. 布局框架適配

在網頁端顯示時,有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態,將非必要的的元素轉化或隱藏,保留重要的圖形元素去適應當前空間;元素隱藏后使用懸浮交互來保證信息的展示,保持圖表的可讀性同時也避免產生元素的重疊。



如案例中的圖表,在不同尺寸下通過改變和隱藏圖表元素,以達到適配當前空間的效果。

2. 圖表元素適配

要適配移動端,網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外,還需要考慮手機屏幕的尺寸和圖表元素的適配性,去兼容相關的交互操作。

  • 信息浮層:在圖表中,信息卡元素是傳達信息內容的重要組件,在網頁端中懸浮展示,通常會占據很大空間;圖表適配移動端后,信息浮層改動到圖表上方常駐顯示,并跟隨手指的滑動變化響應數值,完整展示信息的同時也避免了頁面抖動。


  • 坐標軸標簽:過長的坐標標簽在適配過程中會產生重疊,而省略也會造成信息展示的不完整。我們需要針對不同的坐標軸類型給出響應的規范。如文本類軸標簽我們可以采用省略、換行、旋轉等方式適配,避免信息的缺失。針對有連續型的數據類坐標軸我們可以使用抽樣、轉化單位等方式適配,精簡空間避免堆疊。


3. 極值適配

因B端平臺的特性,我們無法預知客戶傳入的數據量,可能會遇到因數據量過多,造成圖表顯示不佳,數據讀取困難等問題。這種情況下,提前考慮數據極限場景,通過交互的形式變化的方式讓用戶獲取完整信息,提升理解同時信息展示更靈活。

  • 縮放和平移:在數據范圍過多時增加取值范圍的縮略軸組件,通過限制展示范圍讓數據量顯示可控。


  • 互動切換視圖:如果折線的類別過多且無法省略的,建議分組查看。默認狀態僅當前組折線高亮,其他數據以淺色顯示,通過切換的方式查看其他組別的信息。


  • 懸浮鼠標高亮:在分類過多不好分辨時,可使用懸浮高亮的交互方式突出相關聯的數據組。


還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因,在這篇文章就不做深入講解了,以后可獨立介紹。


// 結語


數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確,才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據,確保用戶能夠更好的接收信息,才是可視化的關鍵。





作者:百度MEUX      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

實戰案例!虛擬人空降語音搜索,探索情感沉浸新體驗

博博

通過構建伙伴認知、滿足情感互動、增強沉浸體驗等手段,增強AI伙伴的曝光率,進一步向用戶傳達智能搜索感知,促進搜索行為轉化。


一、項目背景

語音搜索場景在功能不斷迭代的同時,也在探索更年輕化的玩法、傳遞更多元的體驗感受。在產品初期,我們嘗試在語音搜索場景下增加AI伙伴的形象,雖然線上版本已經實現,但從產品形態以及用戶反饋上看,還沒有達到可情感互動的效果。所以在本次迭代上,我們著重從情感聯結、閑聊互動的維度,對語音搜索進行創新性嘗試。



二、設計挑戰與目標

圍繞項目背景,從現在語音搜索的用戶行為與框架來看,有幾個比較明確的問題:

  • 數字人引入后,發現用戶對人物的點擊行為和聊天訴求均有增加,但由于功能受限,數字人沒有辦法給到及時回應。用戶情感抒發得不到反饋;
  • 用戶一搜即走,不會停留在語音搜索場景探索其他可玩功能。


因為前期在語音搜索的優化中,已經嘗試在面板中引入AI形象,上線后用戶反響強烈,用戶的行為中聊天、互動的訴求也明顯增加。由此可見,滿足用戶對AI伙伴的情感化訴求是十分有必要的,同時語音搜索引入AI伙伴是體現同行業差異化的有力創新點,從行業報告《2021年中國智能語音市場分析報告》中,也闡述了打造沉浸感語音搜索體驗與引入AI是目前智能語音市場的發展趨勢。


綜合以上原因,設計團隊在與產品討論過后,達成本次升級的核心目標:

  • 構建伙伴認知:強化“AI伙伴”認知,激發語音搜索行為。
  • 滿足情感互動:完善語音搜索場景情感化互動體驗,滿足用戶期待。
  • 增強沉浸體驗:打造可搜索、可互動、可操控、可定制等沉浸式語音搜索場景。


三、設計舉措

1、構建認知 - 語音搜索基礎框架升級

在舊頁面中,語音面板限制了人物與按鈕的展現,人物既要承載功能反饋又需要作為物理操作按鍵進行點擊操作,與用戶認知相悖且也不利于功能擴展。因此在新版本設計中,需要明確“人”在語音搜索里的屬性,以及AI伙伴與語音搜索的關系。


我們將語音搜索頁面框架分為主要功能與輔助功能區。從舊語音面板中剝離出人物,并保留收音球在面板中做物理交互功能(發起收音、停止收音操作),利用AI伙伴的人物屬性,打造智能擬人的交互反饋,滿足用戶情感訴求。以“人”為中心,最大化展示AI形象,增強情緒傳遞感的同時保證框架可拓展性。


同時,將原堆積在面板中的功能與信息按優先級歸位,確保頁面信息清晰易讀、功能操作熱區無重疊、信息反饋區無干擾。新框架上線后,AI伙伴互動與語音搜索的認知關系更加清晰,語音搜索跳框量明顯增加,AI伙伴帶動面板整體導流增加,面板退出率下降。



2、引入情感 - 全場景情感化體驗提升

除了通過框架層面進行認知優化之外,為營造更貼合“人”的互動體驗與情感建立,我們又根據語音場景對每個狀態進行了情感體驗升級。改版上線后,用戶閑聊訴求和互動點擊行為均有所提升,從而驗證情感化的體驗提升,滿足了用戶互動訴求。


1)情感化引導提示:視覺上人物破框展示配合AI招手/比心的動作展示,不再是圖片,而是可以對話的實體,同時使用年輕化的引導語氣拉近與用戶間的距離,增加數字人曝光,建立新用戶心理預期,激發興趣點提轉化。





2)互動提示規則升級:圍繞“人”的真實情感,通過彈出氣泡的方式模擬AI伙伴狀態,比如聽歌、讀書、游戲。以此引發用戶點擊或進行互動行為嘗試。并且配合AI伙伴升級引導規則,使引導能夠根據不同場景進行適配,保證其既可以承接語音常規引導功能,又可以承接負一樓聊天互動,點擊氣泡可跳轉對應負一樓場景、聯動數字人語境內容,避免造成場景情感化割裂。 



3)增加“AI伙伴”情感反饋:增加人物動作、豐富情感化動態反饋,想要模擬更真實的“人”的狀態,就需要滿足更多擬人反饋。將語音搜索常見場景劃分為聆聽、識別解析、異常狀態、指令響應、引導等5種狀態。對應不同的狀態,規劃相應的數字人反饋動作或組合使用方式,可復用拓展其他相關場景,為設計與開發提效。



3、感知升級 - 營造沉浸視覺氛圍

確定了產品主要改版方向后,通過對目標的提煉,提取設計關鍵點「年輕化」與「情感化」,配合AI伙伴形象,需要呈現出輕松活力的氛圍感,設計中運用了大面積的毛玻璃質感,使場景更加輕盈、沉浸。通過對色彩的運用來演繹年輕的視覺效果,詮釋語音搜索年輕化的設計突破。


1)定義視覺風格:圍繞改版目標,定義設計關鍵詞,由關鍵詞延伸設計風格要點。



2)形色字構質動:從「形色字質構」5個方面提煉設計特征。



基于視覺方向及特征提煉,在質感、形狀、顏色三個設計中改動最大的方向詳細描述。

  • 質感:設計趨勢不斷變化,半透明磨砂質感是近期流行的視覺風格,透過表層可看到背景模糊形態,有強化品質感、突出層級以及營銷氛圍感的特點,同時匹配視覺方向「輕盈」的特征。


  • 形狀:在形狀的設計上,整體界面元素保持大量帶有弧度的形狀運用,提高面板、按鈕、圖標、彈窗等元素的曲線比例,讓界面始終保持年輕態,給人圓潤、親和的感受。


  • 顏色:顏色的運用為本次改版的重中之重,是打造年輕化氛圍感知的基石。

考慮到語音搜索場景日后的拓展,色彩上希望可以營造給用戶一種輕松柔和的視覺氛圍,并且元素的色彩需要與AI伙伴服飾相呼應,從而使AI伙伴形象更加靈動、場景搭配更加和諧生動。


基礎色彩范圍制定:

以度曉曉為示例,遍歷目前線上所有度曉曉服飾裝扮,對色彩進行歸類處理,從中提取主題色系,從搜索色庫中對應選出主題色環。



如何在數字人裝扮中提取主體色:

我們需要把色彩量化,建立特定場景取色規則,根據規則層層篩選,我們可以從中獲取N種主體侯選色。



校正主體色,與搜索智庫色彩形成映射關系:

通過對數字人裝扮的色彩分類,我們以H值為標準,通過調整S值與B值,劃分了12個色相,設定對應色系的H值區間范圍,如智能取色色值在該色相區間范圍內,且吸取到的候選色個數最多,就在對應的色庫卡中選取主體色。

校正原則:色相必須保持是同類色、保持感官明度同頻、保證視障人群的識別度



建立輔助色搭配規則:

為了保持背景層的色彩氛圍營造,保證其具有清晰的識別度,我們以主體色為起點,選擇了顏色相對較多的鄰近色,在色溫上保持整體色調的一致性,其次利用對比色和互補色,選擇更加豐富多元的色相,制造更強烈的色彩對比,以保證滿足各種使用場景下對色彩的需求。



組件化思維拆解頁面元素:

在梳理了智能取色機制后,我們也在思考,語音面板涉及到的元素過多,往往會面臨不同場景不同適配的情況出現,那么在做到視覺減負的同時,如何能靈活的替換對應元素呢?

我們以組件化思維去拆分設計,進行立體化的分層,將引導層(熱詞推薦引導關注)、信息展示層(承接語音各類狀態與信息)、形象層(強化AI伙伴智能感知)、背景層(烘托視覺氛圍感)羅列出來,各場景可根據需要進行顏色延展,保證視覺樣式達成橫向統一,呈現出更加豐富的視覺內容,避免審美疲勞。



總結本次語音搜索的改版升級,我們通過“構建伙伴認知、滿足情感互動、增強沉浸體驗”等手段,增強AI伙伴的曝光率,進一步向用戶傳達智能搜索的感知,從而促進搜索行為轉化。


構建認知過程中強化AI伙伴形象,增強語音搜索功能拓展性;同時結合“情感化”等全場景引導手段,營造更貼合“人”的互動體驗與情感建立,對每個狀態進行了情感體驗升級;最后重新定制視覺風格,圍繞「年輕化」關鍵點對整體氛圍進行強化,讓語音搜索場景更加年輕、有氛圍感。本次改版上線后,搜索行為、互動行為均有所提升,用戶體驗也得到了顯著提升。



四、寫在最后

我們正處于數字化快速變革的時代,傳統工具的基礎功能已不再滿足用戶的訴求,人們的感官也從現實空間延伸到虛擬空間,AI伙伴會逐漸融入人們的生活,未來語音搜索將不再是一個信息輸入-結果輸出的傳統搜索工具,引入AI伙伴,可以讓搜索更加智能,擁有人類一樣的思維、表達、情感和學習能力,滿足人們更高層次的情感訴求的同時,也可以讓搜索更加簡單有趣。

未來我們持續對語音搜索進行升級,將AI伙伴與搜索鏈接的更加緊密,提升用戶體驗,創造出更多有趣的、創新的、別出心裁的年輕化設計。





作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTQ5NTc3Mg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。





作者:百度MEUX      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

視頻便捷手勢 交互設計探索

博博

我們將常規的基礎通用手勢進行打散重組、結合實踐案例梳理出組合手勢設計模型,探索如何在視頻場景中構建便捷高效的進階手勢體驗

一、前言

視頻播放器中承載著極其豐富的內容畫面和播控功能,尤其是在寸土寸金的移動端視頻播放器中,為使內容更沉浸消費,需盡可能克制界面中的功能元素/入口直接外露。基于此種場景下,合理的手勢設計不但可為界面“減負”,還可幫助用戶更快捷觸達功能、提升操控便捷性。


視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知,如「單擊 暫?!?、「雙擊點贊」、「長按快進」、「橫滑導航」、「縱滑切視頻」、「雙指捏合縮放視窗」等通用手勢。

那么如何在保留用戶對于常規通用手勢認知的基礎上,進一步對視頻場景中的手勢交互進行擴容升級?這也是我們接下來在手勢進階交互上的重點探索方向。

本次針對百度APP中的視頻播放器場景,為提升手勢操控效率,我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型,以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。

二、什么是「組合手勢」

「組合手勢」是基于常規手勢的組合擴展,其通常由兩種或兩種以上的常規基礎手勢所構成,若組合方式及使用場景得當,可助力用戶更便捷的觸達功能。

以前述的視頻場景常規手勢為例,其觸發機制一般可分為兩個階段:step1交互信號step2執行任務,即用戶通過某一基礎手勢發出交互信號,系統收到信號確認后便可立即執行任務,但整個過程是線性的,手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。

于是我們在現有常規手勢兩階段觸發機制的基礎上,嘗試引入「意圖識別」環節,并梳理出「組合手勢」的設計模型,以探索不同基礎手勢相互組合后的擴展可行性。

「組合手勢」觸發一般可分為三個階段:step1交互信號step2意圖識別step3執行任務,前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。

由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口,因此,其差異化創新具有較大設計靈活度,尤其需根據具體的使用場景進行綜合考量。

三、「長按組合手勢」激活快捷菜單

1.項目背景

百度APP視頻場景早期的播控功能較少,如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。

隨著后續視頻場景的功能建設日漸完善,我們便在基礎菜單面板中拓展了一行視頻菜單,專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項,菜單面板彈出后還需左滑才可露出后面的功能入口,因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。

2.競品調研及選型

通過對競品進行調研,我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型,  分別為:長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。

選型A

「長按觸發獨立播控面板」:通過長按手勢可激活從屏幕底部彈出的獨立播控面板,此方案擴展性較強,但對視頻沉浸觀感體驗有一定的打斷感;


選型B

「長按觸發浮層播控選項」:通過長按手勢可觸發置于視窗上層的浮層選項入口,一定程度上可延續視頻觀看的沉浸體驗,但浮層擴展性有限;


選型C

「長按觸發特定播控功能」:通過長按手勢觸發特定的某個播控功能(如長按“快進”),一定程度上可滿足此功能的重度用戶,但對于長按手勢的使用效率較低;

3.設計方案

1)長按手勢交互擴容

針對目前視頻播控菜單存在的問題,經過和業務對上述三種長按交互選型方案進行綜合考量,最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置,并探索一套更便捷的觸發機制,以此對視頻場景中的播控菜單進行設計升級。

但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據,用戶對此功能的使用頻率高、并已形成較深的操控認知,若直接下線“快進”功能則會對用戶使用習慣產生較大影響,尤其是視頻場景的重度用戶。

那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢?是否有可能將“快進”和“快捷菜單”進行融合?這也是本次項目對于便捷手勢體驗的重要設計探索點。

基于此,我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義,通過「長按+滑選」的機制觸發快捷菜單功能項,以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為:

step1:以“長按手勢”創建一個新模式,即發出交互信號并喚出浮層菜單;

step2:若用戶未松開手指,則系統默認開始識別用戶意圖,是否有以“拖拽手勢”滑選至目標功能項以選擇功能;

step3:用戶滑選錨定至目標功能后,松手釋放即可完成最后的功能執行確認。

「長按+向上滑選」快捷觸發對應功能項;

「長按+向下滑選」快捷觸發“快進”(一定程度上兼容老用戶對于此功能的使用習慣)。

2)容錯性兼容
在設定「長按+滑選」組合手勢的同時,考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程,我們同時也支持點選的操作模式,即用戶長按后若未產生滑選行為便松手,則松手后依然可通過點選的方式觸發對應播控功能項。

3)易用性打磨

差異化的創新設計形式在前期總會面臨質疑和挑戰,本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式,于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試,以預期在上線前可先收集一波體驗問題進行快速打磨優化。

我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本,并邀請了10+名不同年齡段的目標用戶進行訪談測試。

測試訪談的過程中,被測用戶在進行1至2次嘗試操作之后,均可掌握如何使用「長按+滑選」的組合手勢,這也為我們增添了不少信心。

同時,我們通過觀察用戶操作行為及用戶主動反饋,發現仍有部分易用性細節可進一步打磨優化。

3.1 )擴展觸發熱區:

考慮到單手握持手機的使用場景,可盡可能擴大定義長按手勢的觸發熱區,屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外,其它大面積區域熱區均可支持長按觸發快捷菜單,以降低觸發難度、提升易用性。

3.2 )支持跟手觸發:

長按后浮出的快捷功能項,其浮出位置支持跟隨手指的縱向觸發位置而浮出,可減少手指在屏幕上的位移距離、操控更便捷。

3.3 )實時提示及響應反饋:

靈活判斷當前手勢觸控狀態(如滑入選擇 / 松手觸發),在界面中即時給出相對應的引導提示或振感反饋,以幫助用戶快速適應新的手勢觸發機制。

方案上線及驗證

以AB實驗對本次設計方案進行定量測試驗證:

「對照組」效果:長按觸發“快進”(各播控功能入口仍歸置于基礎菜單面板之中);

「實驗組」效果:長按觸發“快捷菜單”選項(支持滑選和點選模式);

小流量實驗上線后,經過近半個月的觀察,大盤指標穩定、播放完成率等滿意度指標穩步提升。

「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升,說明用戶對部分高頻功能的確有很強的快捷觸發訴求。

「實驗組」的“快進”雖多了一步觸發步長,實驗前期“快進”使用率不及「對照組」,但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高,通過滑選觸發“快進”的操作習慣也快速被培養起來,對于用戶來說,長按快捷菜單帶來的整體收益是大于折損的。

二期擴展方案
隨著長按快捷菜單的上線推全,長按手勢的滲透率也持續走高,用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求,于是我們對長按菜單進行了二期的設計升級,在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能,用戶通過長按后的可選播控項增多,播控功能整體的使用量得到進一步提升。

四、「組合手勢」拓展探索

手勢交互是用戶在現實世界行為的映射,無論是基礎手勢還是組合類高級手勢,都須符合用戶認知習慣、并融入具體的使用場景中進行設計。

以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐,我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。

1.「右滑返回手勢」激活“小窗播放”

“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。

基于用戶的此種操控意圖,我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口,隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖,若有短距上滑拖拽行為,松手釋放即可快捷激活視頻小窗,以提升觀看體驗的連續性。

2.「雙指手勢」激活“滿屏播放”

“雙指拖拽手勢”可拖拽并清屏視窗畫面,以此手勢發出交互信號,若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為,則松手釋放即可快捷激活“滿屏播放”,以滿足更沉浸視頻瀏覽體驗。

五、結語

便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑,從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發,后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。

————————————————————————————————————————————————————————————————————

感謝閱讀,以上內容均由百度MEUX團隊原創設計,以及百度MEUX版權所有,轉載請注明出處,違者必究,謝謝您的合作。申請轉載授權后臺回復【轉載】。

也歡迎加入MEUX,視覺/交互/運營設計師可投簡歷至MEUX@BAIDU.COM(注明信息獲取來源如:站酷)

關于我們:
MEUX,百度移動生態用戶體驗設計中心,負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。

MEUX以「簡單極致」為設計理念,創造極致用戶體驗的同時賦能商業,推動設計行業的價值和影響力,讓生活因設計而更美好。


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTUwMjQ1Ng==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。



作者:百度MEUX      來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

千萬級小說產品,會員全鏈路設計復盤

博博

本文通過強化會員品牌、全鏈路精細化運營和提升會員服務的設計手段闡釋如何為用戶提供更好的服務。

百度小說是百度APP內的垂直頻道,擁有過億月活和行業最全的正版書籍。隨著著作權保護意識逐步上升,越來越多的用戶愿意為優質的資源和閱讀體驗付費。2019年底,為了滿足用戶消費升級所產生的一系列需求,百度小說初步建立了會員體系。經過兩年多的打磨,我們不斷提升會員的服務體驗,并進行了多次優化升級,現在將我們的設計經驗分享給大家。

一、設計背景

2021年我國數字閱讀用戶規模達到5.06億,同比增長2.43%,半數以上用戶愿意為電子閱讀付費,占比最重的人群為19~25歲用戶,達到44.63%(數據來源《中國數字閱讀報告》),“Z世代”已經成為我國數字閱讀的主要群體。隨著消費升級,用戶對服務的需求不斷提升,更看重信息之上的附加價值,如認同感、歸屬感和儀式感。

二、改版原因

2019年,由于時間緊、任務重,我們完成了小說會員從無到有、從0-1的基礎場景搭建。但隨著設計趨勢的變化,當時小說會員的設計風格與主流用戶的喜好不完全匹配,在使用場景中也存在易用性不足、內容缺乏吸引力等問題。下圖是2019年小說會員的界面。

同時,我們對小說用戶進行了視頻訪談,搜集了用戶在使用會員服務中遇到的問題,如會員福利少、找不到會員專屬內容、購買過程有卡頓等,最終梳理為的三大核心問題:身份感知弱、購買路徑長和資源內容少。

三、設計目標


在小說會員亟待改版的背景下,我們結合業務目標、舊版核心問題和用戶訴求,推導出了本次改版的設計目標—品牌化、鏈路化和服務化。

1、品牌化—強化會員品牌

小說會員作為百度APP眾多會員之一,設計團隊希望能帶給閱讀用戶一些不同的品牌記憶點。

1)設計關鍵詞

基于會員的主流用戶、產品屬性和用戶訴求,我們衍生出以下關鍵詞:年輕、品質、尊貴、超值。年輕用戶群體的占比越來越高,新版的設計風格力求更好滿足年輕用戶的審美需求。

2)會員符號

符號是最直觀的視覺元素之一,能夠以最快的方式傳遞產品記憶點。在會員品牌符號設計的草圖階段,我們從字母V、VIP、鉆石、王冠和小說IP白嘟嘟等多個方向進行了方案發散。最終采用了白嘟嘟圖形與尊貴感的V形符號相結合的形式。該方案既延續了小說的視覺符號,又與競品的會員標識形成差異,從而加深用戶的品牌感知和視覺記憶。

3)會員色彩

為了確定更加獨特的品牌色,設計團隊搜集了大量的尊貴氛圍圖片,提煉出了玫瑰金,牙金,赤墨等8個具有品質感的顏色。在視覺初稿階段,我們選擇了玫瑰金和黃金兩種主色進行了方案嘗試。最終根據整體效果確定主色為明亮、高貴的玫瑰金,輔色為黑茶棕,深支子和漆黑的配色方案。新的配色方案讓用戶感受到新穎、現代,煥然一新。

4)會員圖標

在圖形元素上,為了增強親和感,我們選擇了圓潤的面形圖標樣式,通過大圓弧和小圓角的細節處理,傳遞給用戶一種年輕、品質的品牌印記。

5)信息傳達

我們對會員購買頁和權益詳情頁進行了布局重構,采用深色的背景襯托卡片信息,使得產品框架層和內容信息層更加明確,突出核心內容。

在各類場景中,我們通過會員品牌色彩、圖形、符號和IP形象的滲透,強化會員品牌印記。

經過分析研究和實踐,我們完成了主場景的設計升級。

2、鏈路化—精細化運營

就會員體驗而言,我們需要關注用戶在各種時間和各類場合下的需求,因此我們將會員的全鏈路狀態分為時機、場景和人群三個維度。

1)時機

在不同的時機狀態下,我們需要傳遞給用戶不同的信息。只有深入剖析不同狀態下的用戶訴求,才能為其提供更好的服務。接下來我們從購買前、購買中、購買后和即將過期四個階段闡述:

①購買前—權益/優惠信息引導

在用戶購買前,我們強化了低價和省錢信息,讓用戶直觀感受到購買會員后的價格福利。為此我們從三個方向上進行優化,在開通購買頁,外露省錢金額,幫助用戶了解開通會員可享受的收益;在會員頻道頁,采用外露多項權益,讓用戶快速了解會員權益;在章節購買頁,采用突出會員折扣和會員優惠價,讓用戶感受到開通會員的折扣福利。

②購買中—優化路徑流程

在用戶購買中,我們在會員購買鏈路環節進行簡化,采用當前頁彈出半層面板替代跳轉至會員聚合頁的方式,縮短等待加載時間;在章節付費鏈路環節,將商品選擇區信息結構進行優化,減少多章購買的頁面跳轉,使得用戶能夠更流暢完成支付,提升付費體驗。

③購買后—強化權益感知

在用戶購買后,鑒于付費用戶對商品和服務品質有著更高追求,為此我們通過在各類重要入口展示會員權益,包括省錢金額、去廣告次數以及各類場景VIP狀態提示等方法,以達到強化用戶的權益感知。

④即將過期—輕引導續費

在即將過期前,為了避免對用戶造成強付費的不友好感知。過期前3天,我們采用了輕量化的形式告知用戶續費,通過各類引導信息的提示,讓用戶知曉會員服務期限屆滿。

2)場景

我們在入口和功能場景中也進行了精細化設計,讓用戶更便捷地使用會員服務。為了突出會員優質內容和服務,我們設置了會員專屬的頻道和書庫,方便用戶選擇。

在各類功能場景中,為了方便用戶在使用功能的過程中隨時購買,我們設置了多個功能場景的會員開通入口。讓用戶快捷享受會員服務。

3)人群

通過小說用戶數據分析,我們將用戶人群分為會員用戶、潛在用戶、新用戶和過期用戶。

為了讓會員用戶能夠體驗到區分于普通用戶的尊貴感,我們在付費頁、批量離線、TTS播放頁和簽到頁等場景均采用了會員定制化的配色方案和引導提示,這樣使得會員用戶在體驗服務的各類場景中有更強的身份專屬性。

所謂潛在用戶,是指仍在猶豫是否購買會員的用戶。我們通過限時優惠券、激勵視頻試用15分鐘、書架省錢提示、挽留彈窗和降級版免廣告權益等方式,讓潛在用戶不僅可以先試后買了解會員權益,而且可以通過各類信息提示通曉會員體驗,更好地判斷是否通過會員服務減少付費金額和提升閱讀體驗。

我們針對新用戶建立了新人見面禮活動,用戶在新手福利活動期內可享受超值折扣開通會員,低價體驗會員權益。而針對已過期的用戶,我們通過下發優惠券、強化特權等形式喚醒用戶,以免錯過各類福利和特權。

3、服務化—提升會員服務

在內容為王的時代背景下,為了增加會員產品的核心競爭力,我們持續擴充會員書庫的數量和類目、拓展會員權益,讓用戶閱讀到更加豐富的小說內容和體驗到更多權益的會員服務。小說書庫的付費和免費書數量大幅擴充,且書籍類型新增了有聲書和短篇故事,增添了小說資源的多樣性。

在權益上,對內我們持續拓展會員特權,從最初的4項擴展為10項,新增了有聲免費聽、免費讀故事、整本離線、專屬字體、簽到1.5倍書幣等權益;對外我們聯合其他產品,推出了會員贈禮和聯合會員服務,用戶可以根據自己的需求進行購買,享受組合購買的優惠。

通過多個版本的迭代,我們完成了會員體系的設計升級和落地,用戶體驗得到了顯著提升。

四、未來規劃

提升付費產品的用戶體驗是一個體系化的研究課題,需要各個角色通力合作,合力同行,開拓革新。將來我們還會不斷探索,通過不斷優化體驗細節,不斷增加用戶權益感知,不斷嘗試方案創新,形成設計組合拳,為用戶提供更好的服務。


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTQ4NjEzNg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。



作者:百度MEUX     來源:站酷



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
91成人看片片| 欧美日韩国产在线播放网站| 一区在线观看免费| 国产成人aaaa| 波多野结衣久久精品| 国产91精品精华液一区二区三区| 久久电影网电视剧免费观看| 天堂成人国产精品一区| 亚洲欧美一区在线| 国产成人免费网站| 日韩欧美一级二级三级久久久| 久久久影视传媒| 色天天综合色天天久久| 日韩欧美123| 国内不卡一区二区三区| 538国产精品一区二区免费视频| 久久国产精品久久久| 国产精品自拍首页| 中文字幕在线观看一区二区| 精品国产自在精品国产浪潮| 国内精品不卡| 欧美成人aaa| 精品乱码一区二区三区四区| 怡红院红怡院欧美aⅴ怡春院| 亚洲国产天堂网精品网站| 2020久久国产精品| 日本韩国精品在线| 宅男噜噜噜66国产日韩在线观看| 亚洲成年人影院在线| 久久综合九色综合久99| 亚洲一级黄色| 亚洲欧美日本国产专区一区| 日本精品性网站在线观看| 在线视频免费在线观看一区二区| 亚洲日本电影在线| 国产亚洲久久| 99精品女人在线观看免费视频| 麻豆成人91精品二区三区| 欧美日韩一区二区三区免费| 国产精品中文字幕亚洲欧美| 欧美成人亚洲| 欧美极品美女视频网站在线观看免费| 天堂美国久久| 亚洲激情小视频| 欧美视频一区二区三区…| 国产欧美一区二区三区国产幕精品| 美女福利一区| 国产剧情一区| 国产在线播放一区二区三区| 久久国产免费| 麻豆蜜桃在线观看| 好吊色欧美一区二区三区| se69色成人网wwwsex| 成人羞羞网站入口| 亚州精品国产| 成人爽a毛片| 久久美女高清视频| 草草视频在线观看| 国产精品三级电影| 美女主播视频一区| 亚洲精品中文在线| 92看片淫黄大片欧美看国产片| 欧美日韩黄视频| 国产亚洲精品精品国产亚洲综合| 国产极品模特精品一二| 麻豆精品网站| 亚洲视频精选在线| 日本一区福利在线| 国产伦一区二区三区| 97超级碰碰| 制服诱惑亚洲| 欧洲一区二区三区在线| 国产精品成人av在线| 欧美日韩视频第一区| 午夜精品短视频| 国产精品一区在线观看乱码| 色橹橹欧美在线观看视频高清| 中文字幕一区二区三区在线不卡| 久久99国产乱子伦精品免费| 美日韩一区二区| 中文字幕一区二区三区在线视频| 国产精品久久久久免费| 国产日产欧美a一级在线| 美女爽到呻吟久久久久| 久久久精品国产**网站| 中文字幕av免费专区久久| 欧美在线三区| 青娱乐极品盛宴一区二区| 俺来俺也去www色在线观看| 成年人午夜久久久| 国产aⅴ精品一区二区三区久久| 日韩精品永久网址| 国产精品xxxx| 国产精品拍天天在线| 视频一区视频二区中文| 欧美乱大交xxxxx| 国产精品186在线观看在线播放| 午夜精品久久久久久不卡8050| 欧美性受xxxx| 亚洲国产成人在线视频| 国产在线播放一区二区| 欧美粗暴jizz性欧美20| 在线观看亚洲精品| 尤物九九久久国产精品的特点| 国模冰冰炮一区二区| 精品无人区太爽高潮在线播放| 天天操天天干天天综合网| 中文字幕一区二区三区色视频| 欧美日韩喷水| 影院在线观看全集免费观看| 国产亚洲综合av| 成人美女视频在线观看18| 天天好比中文综合网| 成人欧美大片| 久久久青草青青国产亚洲免观| 91精品麻豆| 亚洲国产精品人久久电影| 91av免费看| www.欧美精品一二区| 日本在线一区二区| 欧美淫片网站| 精品国产免费久久久久久尖叫| 欧美另类老女人| 亚洲一区二区三区四区五区中文| 悠悠色在线精品| 国产精品xxx在线观看www| 韩国久久久久| tube8在线hd| 久久91亚洲人成电影网站| 亚洲欧美日韩国产精品| 中文日本在线观看| 北岛玲heyzo一区二区| 久久99精品国产自在现线| 99久热re在线精品996热视频| 麻豆传媒视频在线观看| 精品欧美黑人一区二区三区| 日韩免费特黄一二三区| 51午夜精品| 久久乐国产精品| 欧美一区亚洲一区| 亚洲福利在线视频| 日韩精品免费综合视频在线播放| 欧美多人爱爱视频网站| 欧美一卡在线观看| 久久久久高清| 日日狠狠久久| 亚洲欧美影音先锋| 欧美日韩在线大尺度| 欧美黑人猛交的在线视频| 美日韩免费视频| 久久久亚洲一区| 国模一区二区三区白浆| 亚洲国产精品电影在线观看| 亚洲国产午夜伦理片大全在线观看网站| 91在线免费视频| 色成人综合网| 97热精品视频官网| 亚洲丝袜自拍清纯另类| 久久久免费毛片| 高潮一区二区| 91精品国产视频| 在线观看视频99| 国产日本欧美在线观看| 亚洲精品日韩成人|