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

首頁

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

鶴鶴

一、前言

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


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

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

本次針對百度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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


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


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

方寸之間縱覽世界-淺析數字時代地圖設計

鶴鶴

引言

如今人們出行都離不開手機,都通過手機接觸過互聯網地圖,手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優勢,形成了成熟的地圖交互體驗。在解析手機地圖的體驗設計前,讓我們先看看地圖的發展歷程。

一、地圖的發展

地圖擁有著古老的歷史,記錄了人類對世界認知的演進過程,經歷過泥板、壁畫、羊皮、紙張等載體,依據使用和文化需要擁有著豐富多樣的美術形式。不同時期、材質、美術形式的地圖見證人們認識世界的過程。

隨著照相機和飛機的發展,出現了航空攝影測量技術,讓地圖的測繪精準度達到頂峰。交通、旅游、印刷業的發展,讓紙媒地圖開始融入人們的生活,地圖的平面設計更是百花齊放,有具體也有抽象,讓地圖兼顧功能、美感、有趣。

再隨著衛星影像、瓦片地圖技術和互聯網的發展,人們可以日常地使用電子地圖。受限于網絡速度的限制,矢量地圖應運而生,在特定范圍顯示相應的矢量瓦片信息,讓互聯網地圖的形狀趨向統一化。

iPhone革命性的觸屏體驗,通過手勢與地圖進行直觀自然的交互體驗,結合內置GPS、陀螺儀傳感器,小藍點成為地圖定位的通用標志,激發更多地圖的功能和創意。

二、手機地圖的創新體驗

手機地圖繼承了互聯網電子地圖的可快速迭代、信息可實時更新的優勢,結合觸屏手勢操作后,大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務和社交娛樂中,這些場景也不斷豐富和完善著地圖的信息。

手勢交互讓地圖從移動到縮放都高效地動起來,激勵人們探索更廣的區域。更革命性的是讓地圖從平面到立體之間的順滑轉換,幫助人們更好的映射到真實世界。 

可視化信息是互聯網地圖的主要優勢之一,將數據轉化為可視化圖形,歸類在不同的數據層,可以單個或多個層級疊加在地圖上展示,傳達位置上的數據。 

底圖是手機地圖的基礎,通常就是地圖本身,它承托著上面的可視化信息。隨著地圖可更自由地縮放,地圖本身的內容不斷細化和歸類,在不同的縮放層級下,展示符合用戶查看場景的核心內容。

三、手勢交互:全方位呈現地圖立面

觸屏手勢交互有別于搖桿、鼠標、觸控筆等物理外設的控制方式,讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作,讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現方式。

單指拖動

拖動是地圖最基本的閱讀操作,一般以用戶的定位為初始中心點,用戶可以有目的有方向地查看附近的地點。

單指劃動

當用戶想快速翻閱時會撥走要略過的內容,劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下,向用戶展示地圖的新區域,是比拖動要快速的瀏覽方式。

雙指拖動縮放

物理控件只能讓地圖根據屏幕中心進行縮放,而觸屏縮放能讓地圖根據兩個指尖的中心點縮放,并同時位移,符合用戶空間操控認知。

雙指劃動縮放

劃動縮放和劃動一樣,讓用戶以更輕量的手勢加速的縮放地圖,并以一定的摩擦力減速停止,讓用戶快速找到目標位置。

單指快捷縮放

為了讓用戶能單手并可控地縮放地圖,不少地圖都設計了自己獨有的縮放方式。 zenly,通過屏幕兩側的邊緣,直接完成地圖的最大和最小縮放跨度。

snapchat拖動右側邊可緣喚起縮放滑塊,并使用emoji來表達距離,充滿幽默感。

騰訊地圖,通過劃動右側的滑塊,實現單手順滑地縮放,滑塊也支持劃動手勢。

百度地圖,通過點擊一個縮放控件,讓地圖以當前中心點進行分段縮放。

無限循環的地圖

地球是圓的,可以無限巡航,一些應用將縮到最小的世界地圖做循環處理,以呼應地球的循環轉動體驗。

方向視角切換

在陌生的環境用戶未必能分得清楚南北方向,利用手機的陀螺儀,可以告知用戶正在面向的方向。定位按鈕的二次點擊,將地圖從南北向轉到用戶面向的方向,有助于用戶二次確認自己的定位。

更多地圖使用了2D/3D視角的切換方式,2D是南北向的標準地圖,3D是用戶面向方向的地圖,幫助用戶更直觀地對應物理空間。

旋轉方向

可通過雙指或陀螺儀旋轉地圖,地圖上的文字也做出相應調整,保持水平、沿道路方向調整,以保證可讀性。

3D的旋轉也一樣,在保持水平和沿道路方向的同時,文字保持垂直。

當縮小到足夠遠時,用戶面向的方向意義就不大了,蘋果在縮小到一定范圍時,將地圖回彈保持南北向。

雙指拖動調整視角

地圖3D視角也支持自由調節,通過雙指平行的上下滑動,可以平順調整3D視圖鳥瞰的角度。

在地圖的最低視角做回彈處理,生動不呆板。

遠近也能影響鳥瞰的視角變化,視角越低越接近平視,拉進時有俯沖的感覺。

四、可視化信息:生動呈現地圖動態數據

從古代開始,人們就已經懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標記,地圖本身就是一個信息可視化工具。 互聯網地圖最大的優勢,就是能提供實時的信息數據。將數據標記在相應位置的坐標上,并分別歸類在不同的層級,疊加在地圖上查看。

地圖的常用數據形式可大致分為:點、線、面、熱力圖等,一個地圖可同時喚起多種類型、多個圖層的信息內容。

點數據

點數據是單個地理坐標上的標記,代表該位置上的信息,是地圖上最常用的數據信息。地圖通過不同的小圖標來區分位置類型,使用頻率越高的樣式越簡潔,地標建筑做形象化圖形標識。

聚合圖在地圖上呈現也是點數據,它實質是顯示一定區域內的信息聚合,但不強調具體的區域。聚合圖可以避免因為該區域的點數據過多,在地圖上信息過于密集。

百度的充電樁地圖就是以區域聚合充電樁數量,根據縮放調整數據的聚合。

騰訊地圖的文博地圖也是聚合圖,并根據文物的類型做了快速篩選。

線數據

線數據在地圖上呈現為線性,一般都沿著可行道路展示信息。導航路線是最常用的線數據,它提供具體行駛路線方案,并實時展示線路行駛的進度與方向。

也有粗略表示進度的線路數據,如快遞的物流進度路線就不需要具體的實際線路,只需要示意大致進程。

街景地圖則僅展示有全景圖的道路范圍,不提供進度與方向。

面數據

面數據要展示地圖上的具體區域,疫情環境下出現了區域風控需求,需通過了面數據畫出區域范圍。疫情地圖采用了聚合圖、面區塊兩種數據形式。

zenly使用了反向的面數據,根據用戶的行走記錄,將用戶走過的范圍擦亮,用戶未走過的地方是一塊彩色的平面,充滿娛樂感。

熱力圖

熱力圖以特殊的高亮梯度顯示地圖上區域的熱度,熱力圖的數據不會指向地圖上具體的位置,它能呈現熱度變化的趨勢。百度地圖用熱力圖直觀展示地區上的擁擠程度。

高德地圖的空氣質量地圖,使用聚合圖作為空氣質量評分,熱力圖作為空氣質量范圍。

snapchat使用熱力圖來表現該區域用戶發布動態的熱度,引導用戶發現內容,由于熱力圖不指向具體位置,能更好的保護用戶隱私。

熱力圖并不局限于面,路線也可以反映道路的熱度。Strava利用用戶的騎行數據,生成光點線路的熱力圖,可以看出些是熱門的騎行線路和必經地點。

路況也是一種線性的熱力圖,路況使用按段測量的方式,熱力值的梯度相對跳躍。

讓數據動起來

地圖是安靜的,但真實世界是忙碌的,讓數據動起來,給地圖增添更多情感化設計,緩解用戶的等待壓力。

忙碌的商家

外賣小哥端午節雨中送餐

公交努力奔來

五、底圖:為更好呈現信息的色彩系統

手機地圖的底圖最常使用矢量瓦片地圖,因為數據體積小,在互聯網環境下讀取速度快。矢量地圖用幾何圖形來表達區域,不展示具體細節,因此需要通過顏色去傳達不同區域的屬性或功能。 

人們對于顏色和環境是能建立一定的聯想的,如綠色想到大自然,藍色想到水,紅色想到警示。根據人們對色彩的聯想,給矢量地圖中不同屬性的區域進行配色,幫助用戶理解地圖。谷歌地圖就曾經為不同類型的信息標記出700多種顏色,最后簡化為25個顏色,形成了地圖的色彩系統。

工具類地圖應用以地圖為核心基礎,對矢量圖形有最全面的歸類,因而擁有最豐富的配色系統。由于人們對區域功能的顏色聯想是相似的,各地圖廠商的標準地圖的配色都很接近。地圖用色素雅,才能讓多個顏色能和諧的同時存在,降低用戶的視覺疲勞,并能突出地圖上的信息圖層,讓用戶聚焦所關心的數據。

而一些垂直場景的應用,地圖區域功能的描述相對次要,通常會對地圖的用色進行大幅度精簡。以打車應用為例,地圖用色少且色調相近,突出核心的打車狀態信息顏色,同時體現應用的品牌特色。

不少運用地圖的概念設計中,會更極致的使用單色系地圖,僅突出數據信息的顏色,充滿未來感。

六、未來的地圖

隨著網絡速度的提升,手機硬件的升級,順應AR/VR技術的發展,地圖逐步進入3D和全真時代。蘋果地圖在現有的地圖的3D視圖下,已對地標建筑賦予更多細節,并在夜間模式模擬了燈光效果。

3D地圖就像是虛擬世界中的基礎建設一樣,蘋果地圖添加精細地標模型后,同時應用到Carplay的導航中,在駕駛時可直觀看到與現實世界對應的3D地標。

谷歌更是提出“沉浸式視圖”的高保真3D地圖,使用圖像還原一座城市的面貌,為瀏覽一座城市提供了幾乎真實的鳥瞰視角。

同時全真模擬日照和天氣系統,和現實一樣模擬東升西落的光線方向,模擬晚上和雨天下的城市面貌。

隨著地圖的立體全真化,地圖的數據也將向空間延伸。相對全真地圖而言,人們本身就身置真實的地圖場景中,未來借助AR設備,人們無需對照地圖即可完成導航。

結語

地圖歷來是人們借助藝術的手法,以極具想象力的方式對世界進行再現,它遵循科學測量的法則,使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認知,而現代的科學技術讓地圖呈現盡可能客觀。但地圖并非單純地呈現地球,而是呈現人們眼中的世界,它寄托著人們對美好生活的想象,更好的認識、探索和規劃世界。

作者:騰訊ISUX
轉載請注明:站酷

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


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


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

如何做好用戶故事?學會讓用戶幫你“帶貨”

鶴鶴

其實用戶故事還是由人物故事演化而來。

傳統的人物故事主人公一定是一個響當當的名人,至少是做出了某種貢獻的,并且這類的內容傳播目的并不在于轉化或“帶貨”,而是為了傳遞某種價值觀。

或許我們可以把傳統的人物故事稱為“名人傳記”。

到現在,越來越多的企業、品牌,甚至是個人IP都在做用戶案例故事,而這類內容與傳統人物故事恰恰相反:

  1. 主人公可能是個名不經傳的小人物
  2. 除了體現正向價值觀,還另有目的
  3. 內容調性更接地氣

那么,如何讓用戶幫你的產品講好故事,賣得更好?接下來從三點展開說說。

一、明確做用戶案例故事的目的

以目的為導向,在決定做用戶故事/用戶案例分享前,首先要明確:

  • 為什么要做用戶案例故事的項目?
  • 希望通過用戶故事達到什么目的/效果?

一般做用戶故事,我們所期望達到的效果不外乎是以下三種:

1)品牌宣傳

通過用戶故事達到品牌曝光和宣傳的效果,讓用戶知道我們的品牌、知道有這么一個產品。

B端產品,且對接客戶是比較有名的公司,會比較適合使用客戶故事來進行品牌宣傳。

比如:影刀RPA、三維家。

內容結構一般是某大公司使用了我們的產品,解決了什么問題,達到了一個怎樣的驚人效果。

2)產品介紹

這類產品的功能或許比較多,借助用戶故事來介紹產品及其功能的使用場景,并根據不同的用戶使用場景來給出具體的解決方案。

比如:印象筆記、訊飛智能錄音筆。

一般內容結構是用戶在某類場景下遇到什么難點,如何使用產品,達到了什么目的/收獲了什么。

3)種草營銷

如果是為了營銷,讓用戶種草某類產品而輸出用戶故事,那么此類故事要深究用戶的痛點和爽點,這樣才能精準打動用戶,促使用戶進行下一步的使用、購買等轉化動作。

比如:微眾銀行(理財產品)、人人都是產品經歷(付費課程)。

值得一提的是,像小紅書的種草筆記也是很不錯的素材,但對于種草軟文來說篇幅略短,需要擴寫。

一般內容結構是用戶使用產品前后的對比、反轉,給人一種出其不意的效果,讀者看了后會覺得很爽,也想達到一樣的效果。

二、如何收集用戶素材并策劃用戶故事?

用戶故事的素材來源一般有以下幾個方式:

1)用戶投稿

最簡單快捷的方式就是由用戶自行撰寫,當然如果能提前跟用戶溝通好主題、確認好內容框架,并且用戶文筆還不錯,那自然是最好的。但這個方式對用戶的門檻還是比較高的。

如果用戶故事想要追求真實性、接地氣,這類素材是最合適的。要是真能遇到一個很不錯的故事,還可以由官方再次編輯再進行傳播。

素材收集渠道:官方自有投稿渠道、用戶外部平臺分享(如小紅書、微博、豆瓣等)。

2)征稿活動

策劃征稿活動,明確內容主題、內容要求,由用戶輸出,再由官方進行二次創作。

二次創作的方式一般有2種:

①一篇長文

長文形式一般是在用戶原創的基礎上(此類用戶的創作水平一般,文案多以流水文形式呈現),對排版、邏輯、結構進行打亂重建,讓文章結構整體更具邏輯性及可讀性,并突出產品優勢,必要時可能需要加上一些“夸張手法”。

②一個專題

從大量稿件中篩選一批有相同點的精彩內容,由官方匯總成專題,并加上官方導語、前言或結語等。這種形式的工作量會輕松很多,并且豐富性更強。

征稿方式:公眾號、官方社區、核心用戶群等官方自有陣地發布征稿活動。

3)征集話題

以話題形式征集用戶案例素材,官方借用相關案例進行原創輸出。

手段跟征稿活動的方式差不多,但活動形式較后者更輕。話題討論對用戶和運營方的壓力都不大,并且對運營方來說可創作的自由性更大。

形式同樣可以長文或專題的結構來呈現,如果是專題,只需要把比較精彩的內容呈現出來即可;如果是長文,需要提煉主觀點,再結合產品進行小觀點的闡述。

征集方式:公眾號、官方社區、核心用戶群等官方自有陣地發布話題征集活動。

4)核心用戶采訪

這類素材是最真實、最有說服力的,但同時操作難度也是比較大的,并且還有一個隱形問題,就是你辛辛苦苦做了人物采訪,好不容易輸出了一篇自認為很優秀的用戶故事,但讀者卻不這樣認為,各項數據可能都不會太好看。

但這類用戶故事是最適合做品牌宣傳的。因為你做了一個很高大上的東西出來,無論是掛在公司網站首頁,還是用來推廣產品,這都可以作為一個品牌的門面。

在方式上來說,可以采用問卷的形式,最終文稿還是由官方撰寫。問卷的形式最簡單便捷也是使用互聯網工作風格的。

對于使用產品的核心用戶,他們既不會自行撰寫,也不會參與任何的話題討論,但是典型的使用用戶,那么可以根據他們對產品的使用習慣,提出相關的問題,以問卷或邀約訪談的方式進行了解他們對產品的使用感受。

三、我們能給到用戶什么?

對于提供案例故事的用戶,最好能由官方給與一定的獎勵,哪怕是由用戶自發輸出的內容,也應當給與一定的回應,會顯得品牌方更有人情味。

當然獎勵不一定非要實物獎勵或金錢獎勵,有時候一個肯定或感謝也能讓用戶感到很暖心。

一般回饋用戶不過就是“老四樣”:

1)金錢獎勵

根據用戶參與的程度、提供素材的豐富度、故事的完整度等設定不同等級的金錢獎勵標準。

2)物質獎勵

對于參與的用戶,可以獎勵一些產品周邊、紀念品等實物。

3)榮譽獎勵

設置一些徽章、頭銜名稱給到用戶,比如xx代言人,xx宣傳官等。

4)流量獎勵

給與一些運營位、廣告位宣傳參與的用戶或其公司,類似異業合作,此類獎勵適用于小有名氣的kol或商家用戶;

如果是B端產品的用戶,還可以有“人脈獎勵”,即搭建核心用戶社群或舉辦線下交流會,定期舉辦一些課程、培訓等,不僅能幫助用戶搭建人脈橋梁,還能讓用戶有收獲知識的快感。

作者:啊懶運營筆記
轉載請注明:人人都是產品經理

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


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


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

如何做好用戶體驗研究?不如嘗試一下“三角測量”法!

鶴鶴

“三角測量”在用戶體驗研究領域正在變成一個時髦用語。它究竟是什么?它可以如何幫助你提高用戶洞察的質量呢?

一、什么是“三角測量”?

1. 定義

“三角測量”這一術語源自幾何學,它指的是根據已知的點向未知的點構建三角形的方式來確定該點的位置。

在社會科學領域,三角測量指采用多種調查方法來研究同一種現象(例如訪談或定量調查等)。這一概念跟法醫學中的“交叉詰問”(cross- examination)接近,通過詢問多位目擊者的證詞更易接近事實真相。這是通過發現數據的一致性和不一致性來實現的。

根據《研究設計百科全書》(Encyclopedia of Research Design)的定義:

三角測量是指使用多種來源的數據進行研究,或使用多種方法分析數據,以提升調查研究的可信度。

研究的可信度通常包含:

  • 內部有效性(或定性研究的可信度):我們在測量自己想要測量的東西嗎?
  • 外部有效性(或定性研究的可轉移性):我們正在測量的東西可以運用到現實世界嗎?
  • 可靠性(或定性研究的可靠性):如果我們再做一次研究,是否會得出同樣的結果?

2. 類型

Denzin [1] 認為,沒有哪一種的方法、理論或觀察員可以捕獲一項研究中所有相關或者重要事物。而三角測量法正是被提出來解決這一問題的。Denzin 在 20 世紀 70 年代確定了四種主要類型的三角測量法,如今仍舊被研究學界廣泛地認可。

([1]諾曼·K.鄧津,伊利諾伊大學香檳分校社會學系榮譽教授,質性研究法終身成就獎獲得者之一)

1)數據三角測量(多數據集)

指在一項研究中使用不同的數據源。尤其是,通過不同的樣本策略收集數據,例如收集不同時間、不同環境或不同的研究對象的數據。這種方法可以用其他數據的優點來彌補當前數據存在的不足,這樣可以提升結果的有效性和可靠性。

2)研究員三角測量(多研究員)

該方法指在同一調查中采用多個調查人員 / 評估人員。為了做好三角測量,每一位評估者都會使用相同方法(例如訪談、觀察)進行相同的實驗,之后將所有評估者的發現進行比較。如果所有研究人員都得出了一樣的結論,那么其有效性就成立。

在用戶體驗研究中,同樣可以通過讓多個研究人員分析同一組定性數據來實現。使用不同種族、年齡、性別和階級群體的研究人員可以糾正諸如觀察者或訪談者偏見的問題。

3)理論三角測量(多理論)

該方法只涉及一組數據,但研究人員會采用不同的理論或替代的理論進行詮釋。人們甚至通過一些相互矛盾的理論視角來看待數據。

4)方法三角測量(多方法)

指在使用不同的方法來研究一種情景或現象。其目的是用其他方法的優點補足某一種方法的不足和偏差。該類型的三角測量與在社會科學研究中所使用的“混合研究方法”(mixed-method approaches)類似,用一種方法得出的結果來提升、增強和闡述另一種方法的結果。

二、用戶研究中的“三角測量”

不同的方法可以解答不同的問題,但同樣也有一定的局限性。在用戶研究(或者說任何一種社會研究)中沒有哪種方法是完美的。

利益相關者或初級研究員們會經常來問我,究竟該如何解決各種研究方法的局限性,我的解答通常就是“三角測量”。即使是計劃周密、控制得當的研究仍舊會存在局限。但針對特定的問題采用 多個視角(方法、數據點、研究人員以及理論),可以提升我們的信心,幫助我們獲得可信度。

在用戶體驗研究中,最常用的三角測量類型就是“方法三角測量”(例如通過調查和訪談來研究同樣的問題)和“研究員三角測量”(例如多個研究員分析同一組數據)。三角測量使我們對研究數據更有信心,揭示意想不到的發現,對現象有更清晰的認識。

用戶研究中應用三角測量的例子

針對一個問題使用多種方法進行研究以理解用戶的行為及其原因。例如,我們可以調查用戶如何使用一個特定的功能,然后通過深度訪談來探究為什么用戶會這樣用。使用混合方法常常可以讓我們用更清晰的視角看問題。

通常來說,研究會從定性的方法開始,以確定和縮小問題。例如,在做發現研究時,我們可以從訪談開始,一旦我們確定了一些主題,就可以用定量的方法來驗證我們的見解。當然過程也可以反過來,這取決于我們正在研究的問題。

三、“三角測量”的局限性

無論是哪種類型的三角測量都是基于這樣一個假設:使用不同的數據來源、方法或者研究員可以減少數據集或方法論的偏差。

這意味著,使用三角測量可以增加我們對自己的見解的信心。

然而使用這一方法的同時,需要警告的是,它也可能導致“證實偏差”。可能你不太熟悉這一含義,“證實偏差”就是描述我們潛在的傾向,即注意、聚焦且更相信那些符合我們現有信念的證據。

如果你之前并未使用過三角測量,請記住它有時會得出矛盾和不一致的結果。在這些情況下,要由研究者來理解數據和不一致的來源。這對于經驗較少的研究者來說尤其有挑戰性。

三角測量有助于我們對正在研究的現象有更寬泛的視野但仍舊不是全貌。不用說,合適的設計研究仍舊對保證可信度至關重要。如果你的設計研究較差,那么三角測量將對你幫助不大 —— 輸出的質量往往取決于輸入的質量

四、何時使用“三角測量”

理想情況下,我們希望有數月的時間以及無限的預算來進行研究。但是事實是,我們通常會發現我們幾乎沒有足夠時間來嚴格執行某一種方法,且資源有限。這就使得應用三角測量具有相當大的挑戰性,它無法應用在我們所做的每個研究中。

所以我們應該如何決定什么時候使用三角測量呢?

  • 做高度重要工作時:我們無法每次做三角測量,但是當需要做一些可能會影響業務和用戶的重要的決策(例如重大的重新設計),我們需要優先考慮它。
  • 你的團隊中擁有多位研究員時:組成一個小組,讓至少 2 名研究員參與數據收集和分析的工作。這可以有效幫助你控制一些偏差(例如訪談者偏見)。
  • 與其他團隊合作:當開始一個新的項目時,你可以從查看現有數據和產品分析開始。讓數據分析師和產品經理參與進來。
作者:TCC翻譯情報局
轉載請注明:人人都是產品經理

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


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


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



字體篇 | 處理好這些,讓信息的傳達效率翻倍

博博

前言

文字是設計中的重要組成部分,就像我們平時看到的海報,里面各種被精心設計過的字體經常會成為視覺焦點,以醒目且個性化方式傳達出內容的精髓,最后達到的效果事半功倍。
雖然在UI設計中不需要對文字過分設計,但圖文作為主要的傳播途徑,字體的使用是否規范合理將直接影響著信息傳播的優先級、重要程度以及用戶的接收質量和效率。所以不管是平面設計還是UI設計,字體都是不可忽視的核心元素,做好對文字信息層級的處理,對用戶的視覺體驗有著至關重要的作用。
互聯網經過多年的發展,也積累的很多的專業字體知識,設計師應該去了解字體的性格及特征并將其合理運用,才能將信息更清晰的傳達給用戶。本文將圍繞著字型、字號、字距、字重等幾個屬性,針對各方面深度解析,希望能夠幫到大家。

分享目錄

一、字體的基本特征
二、字體的基本屬性
三、不同場景下的屬性參考
四、字體使用基本原則
五、UI設計需注意的問題
六、結語

一、字體的基本特征

1、使用前的思考

文字是信息內容的載體,能最直接的將信息清晰的表達出來,字體則表現了文字的外在特征,合理的使用這些屬性特征不僅能清晰準確的傳遞信息、用于特定場景還能賦予情感表達,展現出獨特的魅力,例如:健身、器械類的產品使用的字體通常會給人一種力量、剛硬、壯實的感覺,而女性專用產品字體則顯的纖細、苗條。


2.為什么要使用黑體

不同類型的字體傳達出不同的氣質,綜合來講,字體可分為黑體、宋體、圓體、書法體這四類,平時大家看到的各種形形色色的其他字體,基本是通過這幾類延伸而來。
在UI設計中,絕大多數的文字排版用的是黑體,諸如思源黑體、阿里巴巴普惠體、蘋方(ios)、微軟雅黑(PC web)等都是標準的黑體。另外,特定場景如瓷片區、卡片、banner、專題頭圖、引導頁、閃屏等,對于用什么字體不會有太大的限制,在避免商用侵權的前提下符合產品氣質即可。
黑體字的筆畫橫平豎直、粗細均勻且字面呈正方形,一般來說,沒有襯線的字體都可以稱作黑體。黑體結構清晰、簡潔有力,能讓界面顯得莊重還附有現代感,雖然氣質上沒有太大的個性化、但可塑性很強,這也是在UI設計中、黑體一直很受青睞的原因,無論是標題、正文、提示等使用場景都可以作為首選,對老設計師能多一個選擇、新手設計師也不易犯錯。


3.iOS與Android的區別

iOS與Android是移動設備的兩大系統,雖然很多設計師用一稿適配兩端、遇到特殊頁面也只是單獨拎出來微調即可,但對于中、大型的互聯網公司則很難滿足優質用戶體驗中的部分細微差別,例如:iOS的蘋方字體在Android設備中無法高度還原、預留的文字數量上限位置無法顯示完整等,都會影響用戶體驗。
此外,iOS和Android都有自己獨立的設計規范,大家有時間的可自行查看,本文只對字體規范作基本了解。
iOS使用的是「蘋方」字體,提供了6個字重,英文字體為「San Francisco」;Android使用的是Google聯合Adobe發布的「思源黑體」,為充分滿足設計要求,提供了7個字重,英文字體為「Roboto」。


此外,如果界面中涉及的數據較多,數字使用DIN字體也是不錯的選擇,字體外形較長,易用且耐看,很適合數據統計展示,不過這款字體商用的話需要收費的。


二、字體的基本屬性

1.字體大小

字號的大小決定信息的層次和權重,不規律的使用字號會讓頁面信息雜亂,不利于用戶閱讀。在設定字號規范時,需特別注意最小值和遞增值。
最小值決定信息的可讀性,以2倍圖為例,iOS11系統將最小字號規范為11pt(22px),但很多產品依然將最小字號設定為20px,甚至部分產品將18px的數字加粗運用在標簽中,所以最小字號的設定并沒有固定數值,原則上不影響用戶的瀏覽就行。筆者建議最小字號不要低于20px,在設計過程中,可以通過設備實時預覽,因為同樣的字號在不同的環境、色值、背景下,其視覺效果都有所區別。
其次,遞增值決定著信息層級區分的明顯程度,遵循字號越大、遞增值越大的原則,常用字號數量控制在6種左右。iOS和Android都是采用的2倍數柵格系統,為了讓字號的層級區分更明顯,字號設定要避開奇數且最小遞增值不要低于4px,下面舉幾個常見的例子:
①:20、24、28、32、40、48、64...
②:20、24、30、36、42、48、64...
③:22、26、30、34、40、48、60...
...


規范好的字號該如何使用,還得根據界面中的實際場景來決定,如下圖:


2.字符間距

字間距是指兩個字符之間的橫向間隔距離,在界面排版中,除了西文的字間距調整需求較大外,中文通常只保持默認,只有少數場景才會手動調整,且沒有固定的規律,保持視覺舒適狀態即可。例如:banner、界面大標題、重要數字(取件碼)顯示等。 

3.行高

行高是指包圍在字體之外的隱形邊框,一個字體元素的的行高等于文字上邊框+下邊框+字號的高度之和。
西文字體因高度的參差不齊,本身就能制造出視覺上的上下空間,通常行高為字號的1.2倍,而中文字體沒有上下間隙的延伸,行高則較大,一般在1.5倍左右,如果字號較小且折行較多,行高甚至能達到字號的2倍。


4.字重

字重指的是字體的粗細,不同的字重能體現出不同的層級關系,給用戶的視覺感受也截然不同。
像蘋方、思源、阿里巴巴普惠這些家族字體一般都會有極細體、細體、常規體、黑體、粗體等多個字重,在UI設計中,實用的就常規體、加粗兩個字重,再通過色彩、字號使其成為對立關系,明顯的拉開文字內容層級后,方能保持良好的瀏覽體驗。


5.全角與半角

這種主要針對標點符號,以英文字母為標準,半角是指一個符號占用一個標準字符(英文)的位置,全角則是占用兩個字符位置。
眾所周知,中文使用都是全角、英文使用半角,并且會隨著中/英文的切換而自動改變,但有時候難免會操作失誤讓頁面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時間/日期也大多會使用半角符號,所以設計師對此有一定的了解時候、,在處理這些細枝末節就能做到收放自如。


三、不同場景下的屬性參考

在色彩規范中,除主/輔助色之外,設計師還會提供3~4個等級的配色,如通用的#333(標題)、#666(正文)、#999(提示)、#ccc(占位符),這也是UI通用的文字色用色規范,不同的字號需用色規律。


如果想進一步延展,可以增加一點品牌色,也可以使用#000(純黑)調整不透明度來體現文字色彩層級,深色模式中很常見,下面我們一起來了解幾個常見的使用場景。

1.標題

標題的主要作用是讓用戶以最快的速度了解界面主要信息,需要時刻吸引用戶的注意力,例如APP中的導航欄、模塊標題、內容標題、數據統計等。需要簡單明了且有沖擊力,字號一般會控制在30px以上并加粗顯示,直接使用一級色值(#333)即可。
在特殊場景下,標題也可以使用主體色值,但一定要注意容器背景與其他信息色彩的協調,不然花里胡哨的還不如用回一級色值。


2.正文

正文并不需要吸引用戶注意力,它主要是提供標題的注釋或內容的詳細說明。
當白色背景文本內容過多、在需要用戶仔細閱讀的情況下,一定要注意顏色不能太深,不然顯的主次不分,還有些刺眼,這里推薦26~30px字號使用二級文字(#666)色值。


3.提示語

提示類文字使用場景就相對較多,它除了給用戶展示當前狀態,還能給予合理的引導,促進用戶進行下一步操作。常見使用色值為三級(#999)、四級色值(#ccc),例如界面中的操作注意事項、表單占位符等。字號一般為24px,因使用場景不同,也會有特殊的存在,例如表單中占位符的字號會跟隨輸入后的字號統一。


4.超鏈接

超鏈接在字號、色值上沒有一定的限制,但需要一個特定的輔助元素/屬性來提示用戶這是可點擊的。
例如APP登錄頁面,找回密碼、注冊、獲取驗證碼等,大部分都是用主體色、圖標(右箭頭)等方式強化可操作入口,而PC端網頁中超鏈接的表現方式,下劃線、藍色字體、>>這三種方式幾乎能涵蓋所有。


5.其他

規范并非不可更改,它只能幫助設計師在大部分使用場景中減少設計出入并提高產出效率,但總有一些使用場景需特殊對待,字體也不例外,如以下場景:

◇ APP金剛區入口字體大多使用24px,一級色值(#333);

◇ 底部Tab欄字體未激活使用淺色,激活后切換為一級色值(#333)或主體色;

◇ 重量級的提示語用紅色色值;

◇ 按鈕中的文字跟隨按鈕的等級權重變化;

◇ 深色容器標簽的文字反白;

◇ ......


四、字體使用基本原則

1.符合產品氣質

雖說黑體(蘋方、思源、阿里巴巴普惠)是UI設計中的首選字體,但這也僅僅只是建立在不出錯的的情況下、滿足基本條件而選擇,如果想表達出產品的類型、情感、氣質等品牌屬性,在不影響用戶識別的前提下,可選擇一款符合產品氣質的字體,打造出差異化的瀏覽體驗,對于追求完美的APP來時是一個不錯的解決方案。
例如,部分藝術、女性類的APP會選擇使用宋體,整體看起來有一種高端、時尚且優雅的感覺。


整體界面使用特殊字體還是相對較少,為了更好的體現出產品屬性/風格,將其融入不同的模塊及使用場景,會讓產品更有特色,例如banner、瓷片區、大標題、頭圖等,對用戶的視覺吸引力能得到很大提升。 


2.使用同一家族字體

在一個APP中,堅持使用同一個家族的字體,對標題、正文等文字信息有一個統一的視覺規劃,這樣有助于建立起體系化的設計思路,避免在開發落地時存在一致性問題,減少開發與設計的出入。
筆者曾見過這樣的設計師,界面中原本用了「蘋方」字體,在一個特殊場景下,「蘋方」的粗體字重無法滿足大標題的使用需求,于是將大標題單獨改為「阿里巴巴普惠體」的最大字重。
從表面上看,上述的設計需求是滿足了,但稍有不慎就會成為沒有價值的藝術品,首先,單獨一處使用不同家族的字體,會影響整體視覺的一致性;其次,若程序沒有嵌入另外的字體,產品落地后其視覺效果毫無改觀,且更沒有必要為了某個場景的使用要單獨嵌入幾十到幾百兆的家族字體,讓應用安裝包無故加大。在設計中,有時候在解決某個問題時,解決方案并非無可替代,加粗字體亦是如此。
另外,在可用性、實用性強且必要的情況下,并非不能再增加一個家族字體,例如所有標題系列使用「阿里巴巴普惠體」、數字系列都使用「DIN」,前提是一定要形成體系化,并非某一處的使用。


3.明確的信息層級

在同一個界面中,字體色值、字號、字重等,都是用于區分信息層級,盡量不要使用過多的層級,避免層級混亂影響信息瀏覽。
在信息層級處理方式的四個基本原則中,「對比」就是將復雜的信息通過元素的各種屬性以不同的視覺效果呈現,來體現信息節奏感,并非是為了好看而隨意給文字賦予各種屬性及樣式效果。


五、UI設計需注意的問題

1.避頭尾的使用

避頭尾使用在文字內容較多的折行場景中,主要處理標點符號剛好出現在一行文字的開頭或結尾時,通過自動調整單行的字符間距、在視覺上將標點符號前移或后移。
在新聞資訊類應用的詳情頁中,避頭尾使用的較多,用以避免頭/尾存在標點符號造成視覺重量不一、信息參差不齊的問題出現。


2.反差體現層級

很多時候,為了區分信息層級,首先想到的是利用不同的字號、字重來體現,這當然沒有問題,但如果結合字體的明暗關系(灰度色值等級)則效果更佳。
如下圖:標題一級色值(#333)、正文二級色值(#666)、時間日期三級色值(#999)。


3.備用字體

備用字體只會運用在web頁面中,如果網站需要一款特殊的字體才能彰顯其獨特的氣質、同時又擔心用戶在某些設備中因為沒有這個字體而無法瀏覽其效果,則會另外再選擇一款相近的通用字體作為備選,以彌補視覺體驗上的損失。
如果字體包不大,也可以讓開發將其放在服務器端,這樣能讓所有用戶都能看到相同的效果,省去了不少麻煩。

4.確??勺x性

可讀性應該是選擇字體的首要元素,雖說很多文字我們都可以從前后字義、聯想詞等角度將自己的理解補充完整,但完全沒有必要。
UI設計不像海報那樣融入較多的藝術成分,更需要的是內容清晰、表意明確、高效率的傳達,任何增加用戶閱讀、理解成本的做法都應該規避掉,例如過于變形的可愛風格、書法手寫體等都盡量少用。


六、結語

文本內容是UI界面中占比較多的元素之一,設計師需要對其基本屬性及使用場景有一個清晰的了解,使用的是否恰當取決于我們對字體的選擇。雖說在UI領域,字體模塊類的文章比較少(更多是文字、字庫的設計),但它在設計規范中的地位是舉足輕重,選好一款字體對設計來說是錦上添花。
關于UI界面中的字體,其實沒有太多的講究,也沒必要整得花里胡哨,重點在于排版過重中注意信息層級的劃分以及有足夠的視覺舒適度即可。



作者:大漠飛鷹CYSJ      來源:站酷



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

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



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



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

一個按鈕讓我扣了3天細節?。?!

博博

按鈕設計是我們經常會遇到的一個類型,一個好的按鈕其最重要的就是激起點擊欲,讓人忍不住去戳戳戳。

我們來看看下面這個按鈕:

很普通,處處都很常見的一種按鈕,沒有任何點擊欲。

那我們應該怎么做出她的點擊欲呢?

其實就是要讓按鈕更有立體感,話不多說直接上干貨!

1.層次

可以用不同的顏色,放大一圈,形成對比:

上下錯開一些讓按鈕的造型飽滿立體一些,從原來的單一一層變為兩層:

2.層次

為了讓按鈕更立體我們可以把這兩層個復制一層,往下移動幾個像素:

這樣按鈕是不是就已經立體多了?別急,還有呢!

3.光影

這里細節就比較多,想把按鈕做到晶瑩剔透可不容易,給大家好好講一下。

先給圖形加上一個內發光:

使用剪切蒙版,涂顏色或者再來一層內發光,加強這個效果:

復制一層,選用更深的顏色,向下移動,剪切蒙版到里面去,把按鈕有一個明顯的明暗分割線,形成這種光的層次和厚度:

沿著造型刻畫高光,和邊緣有些間隔:

在白色的底座上加入按鈕的投影:

這樣一個剔透,立體感強的按鈕造型就完成啦!

那還能不能讓點擊欲更強一些呢?

4.表像圖形

放上文案看看:

就還是有點單對吧。

這種時候我們就可以從按鈕的文案出發,加入一些圖案,讓它更生動!

比如這里的文案是“發射”,就聯想到了火箭,我們可以繪制一個火箭出來。

把它加入到按鈕上:

這樣一個豐富且有點擊欲的按鈕就完成了!

并可以用同樣的邏輯去延展別的按鈕,讓他們保持統一性:

總結

增強按鈕的點擊欲的方式,其實就是讓它變得立體且豐富。

1.層次:單獨的一個色塊,會很單薄,增加層次增加其在造型上的豐富度。

2.厚度:厚度可以讓按鈕變得更立體。

3.光影:讓按鈕富有變化,更立體和吸引人。

4.表像圖形:一個關聯文案信息的點綴圖案,可以讓人更有食欲。



作者:菜心輕量文      來源:站酷



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

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



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



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

Instagram的視覺體驗分析

博博

國外社交軟件Instagram體驗分析

今天和大家分享用了幾年的一個社交軟件Instagram。發現這款軟件整體的設計與體驗有值得學習的地方,從10個維度分享分享,希望大家喜歡啦~~

1.logo的變化

下圖是關于Instagram的從2010-2022整個圖標變化的過程,從中能發現:
1.圖標從擬物的風格慢慢變成扁平的風格。
2.從具象的相機變成更加簡約線形的相機圖標。
3.顏色越來越艷麗、明亮,給人年輕、炫彩、簡約的設計感受。
4.從logo的變化中能看出頁面將從擬物的時代跨進了扁平時代,也能折射Instagram界面必將是往極簡、炫彩的方向走。


2.圖標設計

我重新臨摹Instagram啟動圖標,發現里面有許多的設計小知識點值得學習。

例如:圖標背景顏色有黃色、紅色、紫紅色、紫色,相鄰的兩個顏色互為鄰近色,使得繪制出的背景自然而炫彩,非常不錯的設計,漸變的融入也很自然。

當我們自己做漸變的圖標背景時可以用兩兩相鄰的顏色,讓漸變融入的更自然。


3.顏色的規律

明顯的發現Instagram顏色跟色譜的規律一致,顏色從左到右色相的變化值在50度左右,4種顏色都是用的高飽和度、高明度的色彩,非常艷麗、明亮,利用漸變附在英文上做出英文版的logo。

iPhone 14的字體漸變也是用的這種方法,利用兩兩相鄰的顏色來做漸變。連蘋果、Instagram都在用,趕緊學起來吧,你也可以的~~


4.圓角的設計

1.通過自己仔細的觀察發現Instagram攝像頭圖標圓角是帶有平滑過度的圓角,和普通的圓角不一樣。

2.平滑圓角給用戶的感受會更舒適、平滑、有活力,而普通的圓角顯得更加生硬、不自然。

3.蘋果的主題圖標都是帶有平滑過度的圓角而不是一個普通圓角,使得圖標顯得更加自然。

4.可以去看看之前原研哉幫小米設計的logo,會發現他們的logo給人干凈會更加有活力、生命力,而不是使用這種普通圓角,而是一種平滑過度的圓角~


5.主界面的分析

1.從Instagram的啟動頁面看出,Instagram追求的是簡約、突出品牌色的方向。

2.主界面主要以用戶發的圖片為主而不是文字,往往圖片比文字更容易產生閱讀與反饋。

3.整體的界面簡約、素白,圖標都是統一用黑色線條的描邊。

4.當自己關注的用戶,發了一些視頻,頭像上附帶Instagram的品牌色的圓形,在白色的界面用品牌色進行了點綴,讓單調的界面更具有識別性。


6.界面布局分析 

Instagram的發現頁面做的很不錯,我重新繪制了這個頁面,發現系統想推送給你的圖片或者視頻會做等比放大2倍處理,一屏顯示圖片或者視頻至少有一個最大顯示,給用戶的感受是有主次。同時開發也能很好實現這種布局,具有一定的規律性。


7.輪播點的設計體驗

在Instagram界面當用戶發的圖片超出5張時,圖片下方的輪播點會出現變化,有大有小。

我重新繪制了一個用戶發的7張圖片的示例,當用戶在左右滑動圖片時,輪播的點會跟著動,同時會有大小的顯示,暗示用戶后面或者前面還有多張圖片,有近大遠小的感覺,非常細節的設計~(可以利用在自己的一些設計上)


8.設計的細節

1.在Instagram的用戶界面,視頻、多張圖片、單張圖片和置頂4種狀態右上角有個圖標的標識,讓用戶清晰知道圖片的內容狀態,提前給用戶有個心理預期與區分。

2.當用戶點擊進去類似抖音的布局,可以進行上下滑動切換視頻內容,雙擊可給該視頻點贊,整體的體驗很絲滑,沒有任何的卡頓與拖沓。同時界面圖標用線性的形式,布局統一、和諧。



9.圖標風格 

Instagram整體的圖標設計是線性的圖標,線性圖標給人的感覺是可點擊、可操作的,同時感覺簡潔明快的氣質。圖標的統一讓每一個界面的視覺感受都是一致的。



10.經典界面 

這個界面放在你面前可能都會知道是Instagram這個應用,這個界面框架已經形成品牌意識。 Instagram幾年一直沒有更改這個布局,非常經典的設計,沒有太多花里胡哨的圖標與信息,只有簡約的線性圖標與用戶發布的圖片,克制的設計。也有很多相機應用、戶外廣告都借鑒了Instagram布局,已經在用戶的心智里面了~



總結

1.越來越多的企業的品牌色往鮮艷的方向走,突出品牌形象。
2.圖片的排版不一定是同樣大小的,可以有大有小,取決于更想給用戶傳達什么。
3.圖標的統一性很重要,當整個app的圖標風格都一致時,給用戶的體驗的感受也是一致的。
4.不斷重復一個設計框架、設計組件時,會形成品牌意識,讓用戶記得你的產品。


作者:黃小偉      來源:站酷

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

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

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

如何把控設計的畫面整體?這個六個視覺語言一定要了解

博博

不管是一部電影,還是一張視覺創意,想要消費者或者老板買單,從形、意、色、字、構、質等一系列視覺語言,都需要很好的掌握。

作者:Peng蓬的芝士追光      來源:站酷

藍藍設計建立了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      來源:站酷



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

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



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



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

用這三步流程,打造百度酒店比價認知

博博

百度酒店以比價及低價感知傳達、高效預訂低價為設計目標,實現劃分為了“提升感知、建立認知、強化記憶”三個階段建立用戶認知。


百度酒店以比價為核心特色,經歷多次設計探索,初步建立了用戶認知。

設計中通過“核心流程分析-明確用戶關注信息-探索比價價值”的方式去制定設計策略,并在方案探索與落地階段,通過思路發散、多輪數據驗證與方案迭代,驗證了“氛圍感知強化、價值信息傳達、聚合比價”等設計手段的作用,希望給服務和電商等比價類產品的設計師一些啟發和參考。

一、項目背景

酒店住宿在線預訂市場中,各個平臺基于用戶權益、運營補貼等差異進行著激烈的價格競爭,導致行業存在天然的價差。而在我們進行的一次酒店預訂訪談中發現,超過半數的用戶在預訂酒店時會進行比價,而比價的用戶中多數會使用2個以上的酒店APP。因此,在市場存在價差且用戶有比價訴求的背景下,百度酒店通過接入多家供給及會員低價,旨在建立酒店聚合比價平臺,為用戶提供性價比最高的酒店搜索服務。

二、設計策略與落地觸點

1.目標和策略制定

在上述背景下,我們與產品側對齊業務目標,結合對用戶訴求的分析,確定了設計目標。


為了達成設計目標,需要明確比價在酒店預訂的各個觸點下對用戶的價值是什么,以探索比價如何發揮作用。下圖列出了酒店預訂的核心流程、核心模塊及用戶關注信息,由于用戶在各個環節關注的信息不同,比價所能發揮的價值也就不同,因此基于比價是否影響用戶進行選擇和決策,我們又將核心流程分成服務報價選擇前、服務報價選擇時、服務報價選擇后。



設計目標的實現也對應上述3個環節如下圖:

  • 在服務報價選擇前,比價還未對用戶決策、預訂體驗產生直接的影響,此時要去傳達比價的概念和價值,并盡可能的強化這種氛圍感知,讓用戶清晰地認識到百度酒店可以比價,以吸引用戶使用比價。
  • 在服務報價選擇時,用戶會利用比價進行選擇和預訂,此時要突出低價、輔助用戶進行高效的對比和預訂。
  • 在服務報價選擇后的下單環節,可以進一步強化比價的感知和價值,以加深用戶對百度酒店比價的印象。

2.明確落地觸點

為了找到一些好的比價概念和價值的傳達方式,以及提升比價體驗的方式,我們進行了競品調研,競品包含酒店、商品等不同行業,調研結論歸納如下:

  • 利用流程中的主要模塊,傳達比價概念以及“享低價”、“省錢”等比價價值認知;
  • 結合“產品縫隙”滲透比價概念,具體指“當前內容”到“下一個閱讀內容”的停頓時間,包括跳轉時的過渡頁、閱讀完結的結束過程等,在用戶不排斥的狀況下,給用戶帶來一些基礎的認知教育;
  • “聚合比價”模式,將針對同一商品或服務的報價由低到高排列,以便用戶快速對比和選擇低價。


結合競品調研結論,我們根據百度酒店的核心流程和觸點進行了設計策略的拆解,建立了策略和落地的映射關系。



三、方案探索與落地

1.提升感知-讓用戶知道百度酒店可以比價

這一環節的設計目標是要讓用戶知道百度酒店可以比價,以吸引用戶在百度酒店完成下單行為,因此清晰、有吸引力的比價元素設計十分重要?;诟偲氛{研內容,我們進行了設計探索。

1)酒店列表-氛圍感知強化及價值信息傳達

下圖所示為酒店列表比價設計的探索過程,最初的方案,為了保證酒店信息的獲取體驗,采用了與傳統酒店預訂平臺采用一致的結構和信息優先級,僅結合圖片區域和價格做了比價信息的結合,但這種設計與傳統酒店預訂平臺差異很小,比價感知和價值的傳達效果并不好。因此設計側轉變思路,在酒店列表中通過更強化的模塊來突出比價的感知,同時結合“比某平臺低xx”的文案說明比價結果,傳達“比價獲得更低價”的感知。


酒店列表覆蓋多個場景,為了建立百度酒店一致的體驗和認知,我們將列表的設計覆蓋到了搜索結果頁和小程序的多個頁面,如圖所示。


2)房型及服務報價-基于低價推薦去強化比價

房型及服務報價模塊對應酒店精準需求和酒店詳情頁,與酒店列表思路一致,方案在逐漸與傳統酒店預訂平臺產生差異化,去強化比價、低價的感知,形成記憶點。

下圖為搜索結果頁的方案,最初外露了多個房型,以滿足用戶的選擇訴求,但從用戶行為數據來看,百度酒店的絕大多數用戶會選擇酒店的最低價房型及報價,因此我們調整設計方案,結合最低報價,用模塊式的對比方式去強化比價,并通過“低價立省xx”的信息去傳達低價感知。另外,這一部分的設計也和聚合比價有所結合,后面會進行詳細的說明。


詳情頁的主要模塊設計與搜索結果頁基本一致,如下圖所示,詳情頁中將最低報價作為低價房型推薦,以建立一致的比價認知同時便于用戶快捷預訂低價。另外,在常規的報價列表中,為了提升用戶查找報價的效率,相比于最低價房型,采用了弱化的形式。最終方案上線后,數據上也取得了正向的效果,報價展現到預訂點擊的轉化得到了提升。


3)“產品縫隙”中的比價概念滲透

“產品縫隙”并不像上述列表模塊那樣感知強烈,設計的目的是為了進一步加深“百度酒店可以比價”的用戶印象。結合百度酒店的核心頁面,我們重新設計了酒店列表和房型報價列表的加載態,利用“多資源方交替動效+文案說明”的方式,構建動態的比價感知,在用戶進入頁面或者進行篩選等場景時會出現。另外,我們也利用了小程序首頁和詳情頁的頁尾,在閱讀結束時去傳達全網比價的概念。


2.建立認知-聚合比價模式的構建

在競品調研部分,我們提到了聚合比價模式,百度酒店由于報價復雜,也適合用這種方式去簡化報價。

如圖所示,常規酒店預訂平臺,同一房型(如標準大床房)會存在不同服務政策(早餐服務、取消規則、支付方式)的報價,而在百度酒店中,由于又加入了預訂平臺的差異,報價會更加復雜,數量更多且同質化嚴重,即服務政策相同,僅預訂平臺不同的報價多次出現,這就導致了報價列表的查看和選擇效率較低。



聚合比價模式就是要將這些服務政策相同的報價聚合在一起進行比價,以簡化報價列表提升選擇效率,同時在服務相同的情況下,絕大部分用戶會更傾向于低價,在報價聚合后,可以突出低價以便用戶預訂。

我們也在探索如何讓聚合比價更簡單,初始方案采用點擊展開的形式,用戶可以保持滑動瀏覽的交互體驗,整個過程的交互體驗比較流暢,但頁面的層級關系較為復雜,用戶認知成本高。因此我們又嘗試了調起面板展示比價詳情,讓用戶聚焦在當前報價的對比,并通過模塊式的設計,清晰羅列了每個平臺的服務、優惠明細等差異信息,讓信息的對比更高效,同時強化低價平臺,與前面的比價模塊保持認知一致。


聚合比價模式下,存在了兩種用戶路徑,如圖所示。用戶可以直接選擇最低價資源方完成預訂,也可以通過比價詳情彈,查看針對同一服務的所有平臺報價,對比平臺的詳細服務、優惠差異后再選擇預訂。

這種預訂模式的目的,一方面在教育用戶建立百度酒店可以比價、可以買到低價的認知,另一方面也提升了用戶選擇低價平臺的效率。另外,聚合比價要具有清晰的規則才能被理解和信任,在比價詳情中,為了進一步降低認知成本,我們通過標題突出了聚合項,并增加了比價說明入口,讓聚合規則更明確。聚合比價的方案上線后,報價的預訂點擊到成單轉化也得到了提升。


另外,前文提到的精準需求搜索結果頁和詳情頁的低價房型推薦也利用了這種模式,不過在比價感知上做了更強化的處理。用戶可以在詳情頁直接點擊各個平臺報價完成預訂,也可以點擊文字部分查看房型詳情,在頁面底部的比價詳情中完成報價的對比和預訂。



3.強化記憶-比價價值感的再次強化

填單場景是在預訂完成后,這個環節我們可以將比價的概念和價值再次展示給用戶,以加深用戶對比價的認知。這里的設計手段與“提升感知”階段類似,如圖所示為一些方案探索,在用戶選擇低價平臺預訂,點擊跳轉至填單頁后,我們會強化用戶“預訂到最低價”以及“為用戶節省xx元”的感知。另外,在用戶提交訂單時,會存在一定的加載時間,我們也利用了這里的“產品縫隙”,結合加載態繼續傳遞低價、省錢的認知。


四、結語

回顧百度酒店的比價設計過程,我們以比價及低價感知傳達、高效預訂低價為設計目標,基于百度酒店的核心預訂流程,探索比價在各個環節如何發揮作用,進而將設計目標的實現劃分為了“提升感知、建立認知、強化記憶”三個階段,并為業務帶來轉化提升。

提升感知過程結合流程中的主要模塊,通過模塊式對比形式、傳達比價價值感、基于低價推薦強化比價、以及利用“產品縫隙”等手段,去吸引用戶了解和使用比價;建立認知過程利用“聚合比價”模式去精簡報價,同時結合對低價報價、低價平臺的強化,讓用戶更便捷的預訂低價;最后強化記憶的環節,我們進行了一些方案嘗試,再次強調比價的價值。另外,為了建立一致的比價認知,整體的設計中也堅持一致性的原則。百度酒店的比價設計也在不斷地嘗試和優化中,希望能給用戶創造更好的使用體驗。




作者:百度MEUX      來源:站酷



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

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



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



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

日歷

鏈接

個人資料

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

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
国产777精品精品热热热一区二区| 国产欧美日韩在线观看| 国内自拍亚洲| 99久久精品国产精品久久| 亚洲最大的免费| 成人av片在线观看| 日本在线不卡视频一二三区| 亚洲专区**| 99亚洲乱人伦aⅴ精品| 亚洲精品午夜精品| 国产日韩一区二区三区| 成人性生交大片免费观看嘿嘿视频| 2019精品视频| 日韩一区av在线| 一本色道久久综合| 婷婷精品久久久久久久久久不卡| 日韩欧美中文字幕电影| 亚洲一区二区影院| 视频一区二区三区中文字幕| 国产一区二区三区精品视频| 婷婷一区二区三区| 亚洲石原莉奈一区二区在线观看| 天堂资源在线亚洲| 国产精品久久久久久久久久久久久久| 中文字幕中文字幕在线十八区| 国产精品国产自产拍在线| 成人黄色免费片| 在线日韩影院| 亚洲精品二三区| 丁香桃色午夜亚洲一区二区三区| 久久欧美在线电影| 欧美一级爆毛片| 亚洲国产激情一区二区三区| 在线亚洲+欧美+日本专区| 亚洲动漫第一页| 开心色怡人综合网站| 欧美精品乱码久久久久久按摩| 成人免费电影网址| 成人在线播放免费观看| 欧美日免费三级在线| 在线日本制服中文欧美| 国产日韩精品在线播放| 午夜在线免费观看视频| 高清在线视频日韩欧美| 亚洲成人精品影院| 美腿丝袜亚洲综合| 国产美女精品人人做人人爽| 成人激情在线播放| 国产精品亚洲片夜色在线| 国产精品1区2区3区在线观看| 亚洲成人免费看| 国产剧情久久久久久| 99re6热在线精品视频播放速度| 日韩一区二区三区电影在线观看| 亚洲欧洲综合另类| 欧美刺激脚交jootjob| 久久婷婷综合激情| 天海翼精品一区二区三区| 国产精品福利av| 国产精品宾馆| 亚洲va久久久噜噜噜久久| 国产精品久久久久av福利动漫| 日韩国产一区久久| 搞黄视频在线观看| 26uuu亚洲婷婷狠狠天堂| 日本高清视频在线观看| 久久久久久国产精品免费免费| 99久久夜色精品国产网站| 欧美在线观看视频一区二区三区| 日韩成人一级大片| 伊人狠狠色j香婷婷综合| 国内成+人亚洲+欧美+综合在线| 韩国久久久久久| 欧美专区日韩视频| 国内精品久久久久久久果冻传媒| 亚洲欧美一级二级三级| 精品影院一区二区久久久| 国产成人免费视频精品含羞草妖精| 一区二区三区日本久久久| 国产精品麻豆一区二区| 国产精欧美一区二区三区| 欧美激情精品久久久六区热门| 欧美一二区在线观看| 亚洲激情视频| 久久亚洲综合色一区二区三区| 国产精品自拍小视频| 九色成人国产蝌蚪91| 黑人巨大精品欧美一区二区免费| 91精品久久久| 奇米四色中文综合久久| 亚洲日韩欧美一区二区在线| 亚洲天堂成人网| 中日韩视频在线观看| 久久久久久久久久久电影| 亚洲精品免费一二三区| 99综合精品| 亚洲国产一区二区三区网站| 亚洲男人的天堂av| 啪啪av大全导航福利综合导航| 欧美日韩成人| 波多野结衣亚洲一区| 欧美韩国日本在线观看| 欧美在线一二三| 亚洲一区二区免费视频| 日韩vs国产vs欧美| 亚洲欧洲精品一区二区三区波多野1战4| 免费看美女视频在线网站| 国模吧一区二区| 亚洲电影一级黄| 制服丝袜亚洲色图| 亚洲精品v亚洲精品v日韩精品| 一区二区欧美久久| 国产免费av国片精品草莓男男| 香蕉成人伊视频在线观看| 欧美国产乱视频| 亚洲传媒在线| 欧美国产免费| 欧美性jizz18性欧美| 国产精品三区四区| 在线视频三区| 色婷婷在线播放| 黄色日韩网站视频| 国产麻豆综合| 亚洲精品97| 国产精品久久久久久久久久久久久久久| 91中文在线| 2019中文字幕在线免费观看| 99re6这里只有精品视频在线观看| 久久精品网站免费观看| 高清在线一区二区| 亚洲精品成人久久久998| 国产精品女人毛片| av毛片在线免费| jlzzjlzz国产精品久久| 国产精品一在线观看| 国产精品爽爽爽爽爽爽在线观看| 亚洲午夜精品久久久久久久久| av毛片在线免费看| 精品免费一区二区三区蜜桃| 日韩美女一区二区三区四区| 日韩精品一区二区在线观看| 中文字幕一区二区三区视频| 四虎4545www国产精品| 亚洲女同一区| 污片视频在线免费观看| 国产成人啪午夜精品网站男同| 欧美精品黑人性xxxx| 欧美激情精品久久久久久大尺度| 国产亚洲福利| 欧美剧在线观看| 成人免费看黄网站| 欧美日韩一区二区三区在线视频| 婷婷一区二区三区| 一本一本久久| 欧美成人第一页| 亚洲一区在线免费观看| 亚洲国产日韩综合一区| 欧美激情精品久久久六区热门| 8x8ⅹ拨牐拨牐拨牐在线观看| 亚洲婷婷影院| 国产视频亚洲精品| 日韩福利视频网| 一区二区三区无码高清视频| 1769免费视频在线观看|