文字是設(shè)計(jì)中的重要組成部分，就像我們平時(shí)看到的海報(bào)，里面各種被精心設(shè)計(jì)過(guò)的字體經(jīng)常會(huì)成為視覺(jué)焦點(diǎn)，以醒目且個(gè)性化方式傳達(dá)出內(nèi)容的精髓，最后達(dá)到的效果事半功倍。
雖然在UI設(shè)計(jì)中不需要對(duì)文字過(guò)分設(shè)計(jì)，但圖文作為主要的傳播途徑，字體的使用是否規(guī)范合理將直接影響著信息傳播的優(yōu)先級(jí)、重要程度以及用戶(hù)的接收質(zhì)量和效率。所以不管是平面設(shè)計(jì)還是UI設(shè)計(jì)，字體都是不可忽視的核心元素，做好對(duì)文字信息層級(jí)的處理，對(duì)用戶(hù)的視覺(jué)體驗(yàn)有著至關(guān)重要的作用。
互聯(lián)網(wǎng)經(jīng)過(guò)多年的發(fā)展，也積累的很多的專(zhuān)業(yè)字體知識(shí)，設(shè)計(jì)師應(yīng)該去了解字體的性格及特征并將其合理運(yùn)用，才能將信息更清晰的傳達(dá)給用戶(hù)。本文將圍繞著字型、字號(hào)、字距、字重等幾個(gè)屬性，針對(duì)各方面深度解析，希望能夠幫到大家。
一、字體的基本特征
二、字體的基本屬性
三、不同場(chǎng)景下的屬性參考
四、字體使用基本原則
五、UI設(shè)計(jì)需注意的問(wèn)題
六、結(jié)語(yǔ)
文字是信息內(nèi)容的載體，能最直接的將信息清晰的表達(dá)出來(lái)，字體則表現(xiàn)了文字的外在特征，合理的使用這些屬性特征不僅能清晰準(zhǔn)確的傳遞信息、用于特定場(chǎng)景還能賦予情感表達(dá)，展現(xiàn)出獨(dú)特的魅力，例如：健身、器械類(lèi)的產(chǎn)品使用的字體通常會(huì)給人一種力量、剛硬、壯實(shí)的感覺(jué)，而女性專(zhuān)用產(chǎn)品字體則顯的纖細(xì)、苗條。
不同類(lèi)型的字體傳達(dá)出不同的氣質(zhì)，綜合來(lái)講，字體可分為黑體、宋體、圓體、書(shū)法體這四類(lèi)，平時(shí)大家看到的各種形形色色的其他字體，基本是通過(guò)這幾類(lèi)延伸而來(lái)。
在UI設(shè)計(jì)中，絕大多數(shù)的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋(píng)方（ios）、微軟雅黑（PC web）等都是標(biāo)準(zhǔn)的黑體。另外，特定場(chǎng)景如瓷片區(qū)、卡片、banner、專(zhuān)題頭圖、引導(dǎo)頁(yè)、閃屏等，對(duì)于用什么字體不會(huì)有太大的限制，在避免商用侵權(quán)的前提下符合產(chǎn)品氣質(zhì)即可。
黑體字的筆畫(huà)橫平豎直、粗細(xì)均勻且字面呈正方形，一般來(lái)說(shuō)，沒(méi)有襯線(xiàn)的字體都可以稱(chēng)作黑體。黑體結(jié)構(gòu)清晰、簡(jiǎn)潔有力，能讓界面顯得莊重還附有現(xiàn)代感，雖然氣質(zhì)上沒(méi)有太大的個(gè)性化、但可塑性很強(qiáng)，這也是在UI設(shè)計(jì)中、黑體一直很受青睞的原因，無(wú)論是標(biāo)題、正文、提示等使用場(chǎng)景都可以作為首選，對(duì)老設(shè)計(jì)師能多一個(gè)選擇、新手設(shè)計(jì)師也不易犯錯(cuò)。
iOS與Android是移動(dòng)設(shè)備的兩大系統(tǒng)，雖然很多設(shè)計(jì)師用一稿適配兩端、遇到特殊頁(yè)面也只是單獨(dú)拎出來(lái)微調(diào)即可，但對(duì)于中、大型的互聯(lián)網(wǎng)公司則很難滿(mǎn)足優(yōu)質(zhì)用戶(hù)體驗(yàn)中的部分細(xì)微差別，例如：iOS的蘋(píng)方字體在Android設(shè)備中無(wú)法高度還原、預(yù)留的文字?jǐn)?shù)量上限位置無(wú)法顯示完整等，都會(huì)影響用戶(hù)體驗(yàn)。
此外，iOS和Android都有自己獨(dú)立的設(shè)計(jì)規(guī)范，大家有時(shí)間的可自行查看，本文只對(duì)字體規(guī)范作基本了解。
iOS使用的是「蘋(píng)方」字體，提供了6個(gè)字重，英文字體為「San Francisco」；Android使用的是Google聯(lián)合Adobe發(fā)布的「思源黑體」，為充分滿(mǎn)足設(shè)計(jì)要求，提供了7個(gè)字重，英文字體為「Roboto」。
此外，如果界面中涉及的數(shù)據(jù)較多，數(shù)字使用DIN字體也是不錯(cuò)的選擇，字體外形較長(zhǎng)，易用且耐看，很適合數(shù)據(jù)統(tǒng)計(jì)展示，不過(guò)這款字體商用的話(huà)需要收費(fèi)的。
字號(hào)的大小決定信息的層次和權(quán)重，不規(guī)律的使用字號(hào)會(huì)讓頁(yè)面信息雜亂，不利于用戶(hù)閱讀。在設(shè)定字號(hào)規(guī)范時(shí)，需特別注意最小值和遞增值。
最小值決定信息的可讀性，以2倍圖為例，iOS11系統(tǒng)將最小字號(hào)規(guī)范為11pt（22px），但很多產(chǎn)品依然將最小字號(hào)設(shè)定為20px，甚至部分產(chǎn)品將18px的數(shù)字加粗運(yùn)用在標(biāo)簽中，所以最小字號(hào)的設(shè)定并沒(méi)有固定數(shù)值，原則上不影響用戶(hù)的瀏覽就行。筆者建議最小字號(hào)不要低于20px，在設(shè)計(jì)過(guò)程中，可以通過(guò)設(shè)備實(shí)時(shí)預(yù)覽，因?yàn)橥瑯拥淖痔?hào)在不同的環(huán)境、色值、背景下，其視覺(jué)效果都有所區(qū)別。
其次，遞增值決定著信息層級(jí)區(qū)分的明顯程度，遵循字號(hào)越大、遞增值越大的原則，常用字號(hào)數(shù)量控制在6種左右。iOS和Android都是采用的2倍數(shù)柵格系統(tǒng)，為了讓字號(hào)的層級(jí)區(qū)分更明顯，字號(hào)設(shè)定要避開(kāi)奇數(shù)且最小遞增值不要低于4px，下面舉幾個(gè)常見(jiàn)的例子：
①：20、24、28、32、40、48、64...
②：20、24、30、36、42、48、64...
③：22、26、30、34、40、48、60...
...
規(guī)范好的字號(hào)該如何使用，還得根據(jù)界面中的實(shí)際場(chǎng)景來(lái)決定，如下圖：
字間距是指兩個(gè)字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調(diào)整需求較大外，中文通常只保持默認(rèn)，只有少數(shù)場(chǎng)景才會(huì)手動(dòng)調(diào)整，且沒(méi)有固定的規(guī)律，保持視覺(jué)舒適狀態(tài)即可。例如：banner、界面大標(biāo)題、重要數(shù)字（取件碼）顯示等。
行高是指包圍在字體之外的隱形邊框，一個(gè)字體元素的的行高等于文字上邊框+下邊框+字號(hào)的高度之和。
西文字體因高度的參差不齊，本身就能制造出視覺(jué)上的上下空間，通常行高為字號(hào)的1.2倍，而中文字體沒(méi)有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號(hào)較小且折行較多，行高甚至能達(dá)到字號(hào)的2倍。
字重指的是字體的粗細(xì)，不同的字重能體現(xiàn)出不同的層級(jí)關(guān)系，給用戶(hù)的視覺(jué)感受也截然不同。
像蘋(píng)方、思源、阿里巴巴普惠這些家族字體一般都會(huì)有極細(xì)體、細(xì)體、常規(guī)體、黑體、粗體等多個(gè)字重，在UI設(shè)計(jì)中，實(shí)用的就常規(guī)體、加粗兩個(gè)字重，再通過(guò)色彩、字號(hào)使其成為對(duì)立關(guān)系，明顯的拉開(kāi)文字內(nèi)容層級(jí)后，方能保持良好的瀏覽體驗(yàn)。
這種主要針對(duì)標(biāo)點(diǎn)符號(hào)，以英文字母為標(biāo)準(zhǔn)，半角是指一個(gè)符號(hào)占用一個(gè)標(biāo)準(zhǔn)字符（英文）的位置，全角則是占用兩個(gè)字符位置。
眾所周知，中文使用都是全角、英文使用半角，并且會(huì)隨著中/英文的切換而自動(dòng)改變，但有時(shí)候難免會(huì)操作失誤讓頁(yè)面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時(shí)間/日期也大多會(huì)使用半角符號(hào)，所以設(shè)計(jì)師對(duì)此有一定的了解時(shí)候、，在處理這些細(xì)枝末節(jié)就能做到收放自如。
在色彩規(guī)范中，除主/輔助色之外，設(shè)計(jì)師還會(huì)提供3~4個(gè)等級(jí)的配色，如通用的#333（標(biāo)題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規(guī)范，不同的字號(hào)需用色規(guī)律。
如果想進(jìn)一步延展，可以增加一點(diǎn)品牌色，也可以使用#000（純黑）調(diào)整不透明度來(lái)體現(xiàn)文字色彩層級(jí)，深色模式中很常見(jiàn)，下面我們一起來(lái)了解幾個(gè)常見(jiàn)的使用場(chǎng)景。
標(biāo)題的主要作用是讓用戶(hù)以最快的速度了解界面主要信息，需要時(shí)刻吸引用戶(hù)的注意力，例如APP中的導(dǎo)航欄、模塊標(biāo)題、內(nèi)容標(biāo)題、數(shù)據(jù)統(tǒng)計(jì)等。需要簡(jiǎn)單明了且有沖擊力，字號(hào)一般會(huì)控制在30px以上并加粗顯示，直接使用一級(jí)色值（#333）即可。
在特殊場(chǎng)景下，標(biāo)題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協(xié)調(diào)，不然花里胡哨的還不如用回一級(jí)色值。
正文并不需要吸引用戶(hù)注意力，它主要是提供標(biāo)題的注釋或內(nèi)容的詳細(xì)說(shuō)明。
當(dāng)白色背景文本內(nèi)容過(guò)多、在需要用戶(hù)仔細(xì)閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號(hào)使用二級(jí)文字（#666）色值。
提示類(lèi)文字使用場(chǎng)景就相對(duì)較多，它除了給用戶(hù)展示當(dāng)前狀態(tài)，還能給予合理的引導(dǎo)，促進(jìn)用戶(hù)進(jìn)行下一步操作。常見(jiàn)使用色值為三級(jí)（#999）、四級(jí)色值（#ccc），例如界面中的操作注意事項(xiàng)、表單占位符等。字號(hào)一般為24px，因使用場(chǎng)景不同，也會(huì)有特殊的存在，例如表單中占位符的字號(hào)會(huì)跟隨輸入后的字號(hào)統(tǒng)一。
超鏈接在字號(hào)、色值上沒(méi)有一定的限制，但需要一個(gè)特定的輔助元素/屬性來(lái)提示用戶(hù)這是可點(diǎn)擊的。
例如APP登錄頁(yè)面，找回密碼、注冊(cè)、獲取驗(yàn)證碼等，大部分都是用主體色、圖標(biāo)（右箭頭）等方式強(qiáng)化可操作入口，而PC端網(wǎng)頁(yè)中超鏈接的表現(xiàn)方式，下劃線(xiàn)、藍(lán)色字體、>>這三種方式幾乎能涵蓋所有。
規(guī)范并非不可更改，它只能幫助設(shè)計(jì)師在大部分使用場(chǎng)景中減少設(shè)計(jì)出入并提高產(chǎn)出效率，但總有一些使用場(chǎng)景需特殊對(duì)待，字體也不例外，如以下場(chǎng)景：
◇ APP金剛區(qū)入口字體大多使用24px，一級(jí)色值（#333）；
◇ 底部Tab欄字體未激活使用淺色，激活后切換為一級(jí)色值（#333）或主體色；
◇ 重量級(jí)的提示語(yǔ)用紅色色值；
◇ 按鈕中的文字跟隨按鈕的等級(jí)權(quán)重變化；
◇ 深色容器標(biāo)簽的文字反白；
◇ ......
雖說(shuō)黑體（蘋(píng)方、思源、阿里巴巴普惠）是UI設(shè)計(jì)中的首選字體，但這也僅僅只是建立在不出錯(cuò)的的情況下、滿(mǎn)足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類(lèi)型、情感、氣質(zhì)等品牌屬性，在不影響用戶(hù)識(shí)別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗(yàn)，對(duì)于追求完美的APP來(lái)時(shí)是一個(gè)不錯(cuò)的解決方案。
例如，部分藝術(shù)、女性類(lèi)的APP會(huì)選擇使用宋體，整體看起來(lái)有一種高端、時(shí)尚且優(yōu)雅的感覺(jué)。
整體界面使用特殊字體還是相對(duì)較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場(chǎng)景，會(huì)讓產(chǎn)品更有特色，例如banner、瓷片區(qū)、大標(biāo)題、頭圖等，對(duì)用戶(hù)的視覺(jué)吸引力能得到很大提升。
在一個(gè)APP中，堅(jiān)持使用同一個(gè)家族的字體，對(duì)標(biāo)題、正文等文字信息有一個(gè)統(tǒng)一的視覺(jué)規(guī)劃，這樣有助于建立起體系化的設(shè)計(jì)思路，避免在開(kāi)發(fā)落地時(shí)存在一致性問(wèn)題，減少開(kāi)發(fā)與設(shè)計(jì)的出入。
筆者曾見(jiàn)過(guò)這樣的設(shè)計(jì)師，界面中原本用了「蘋(píng)方」字體，在一個(gè)特殊場(chǎng)景下，「蘋(píng)方」的粗體字重?zé)o法滿(mǎn)足大標(biāo)題的使用需求，于是將大標(biāo)題單獨(dú)改為「阿里巴巴普惠體」的最大字重。
從表面上看，上述的設(shè)計(jì)需求是滿(mǎn)足了，但稍有不慎就會(huì)成為沒(méi)有價(jià)值的藝術(shù)品，首先，單獨(dú)一處使用不同家族的字體，會(huì)影響整體視覺(jué)的一致性；其次，若程序沒(méi)有嵌入另外的字體，產(chǎn)品落地后其視覺(jué)效果毫無(wú)改觀(guān)，且更沒(méi)有必要為了某個(gè)場(chǎng)景的使用要單獨(dú)嵌入幾十到幾百兆的家族字體，讓?xiě)?yīng)用安裝包無(wú)故加大。在設(shè)計(jì)中，有時(shí)候在解決某個(gè)問(wèn)題時(shí)，解決方案并非無(wú)可替代，加粗字體亦是如此。
另外，在可用性、實(shí)用性強(qiáng)且必要的情況下，并非不能再增加一個(gè)家族字體，例如所有標(biāo)題系列使用「阿里巴巴普惠體」、數(shù)字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。
在同一個(gè)界面中，字體色值、字號(hào)、字重等，都是用于區(qū)分信息層級(jí)，盡量不要使用過(guò)多的層級(jí)，避免層級(jí)混亂影響信息瀏覽。
在信息層級(jí)處理方式的四個(gè)基本原則中，「對(duì)比」就是將復(fù)雜的信息通過(guò)元素的各種屬性以不同的視覺(jué)效果呈現(xiàn)，來(lái)體現(xiàn)信息節(jié)奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。
避頭尾使用在文字內(nèi)容較多的折行場(chǎng)景中，主要處理標(biāo)點(diǎn)符號(hào)剛好出現(xiàn)在一行文字的開(kāi)頭或結(jié)尾時(shí)，通過(guò)自動(dòng)調(diào)整單行的字符間距、在視覺(jué)上將標(biāo)點(diǎn)符號(hào)前移或后移。
在新聞資訊類(lèi)應(yīng)用的詳情頁(yè)中，避頭尾使用的較多，用以避免頭/尾存在標(biāo)點(diǎn)符號(hào)造成視覺(jué)重量不一、信息參差不齊的問(wèn)題出現(xiàn)。
很多時(shí)候，為了區(qū)分信息層級(jí)，首先想到的是利用不同的字號(hào)、字重來(lái)體現(xiàn)，這當(dāng)然沒(méi)有問(wèn)題，但如果結(jié)合字體的明暗關(guān)系（灰度色值等級(jí)）則效果更佳。
如下圖：標(biāo)題一級(jí)色值（#333）、正文二級(jí)色值（#666）、時(shí)間日期三級(jí)色值（#999）。
備用字體只會(huì)運(yùn)用在web頁(yè)面中，如果網(wǎng)站需要一款特殊的字體才能彰顯其獨(dú)特的氣質(zhì)、同時(shí)又擔(dān)心用戶(hù)在某些設(shè)備中因?yàn)闆](méi)有這個(gè)字體而無(wú)法瀏覽其效果，則會(huì)另外再選擇一款相近的通用字體作為備選，以彌補(bǔ)視覺(jué)體驗(yàn)上的損失。
如果字體包不大，也可以讓開(kāi)發(fā)將其放在服務(wù)器端，這樣能讓所有用戶(hù)都能看到相同的效果，省去了不少麻煩。
可讀性應(yīng)該是選擇字體的首要元素，雖說(shuō)很多文字我們都可以從前后字義、聯(lián)想詞等角度將自己的理解補(bǔ)充完整，但完全沒(méi)有必要。
UI設(shè)計(jì)不像海報(bào)那樣融入較多的藝術(shù)成分，更需要的是內(nèi)容清晰、表意明確、高效率的傳達(dá)，任何增加用戶(hù)閱讀、理解成本的做法都應(yīng)該規(guī)避掉，例如過(guò)于變形的可愛(ài)風(fēng)格、書(shū)法手寫(xiě)體等都盡量少用。
文本內(nèi)容是UI界面中占比較多的元素之一，設(shè)計(jì)師需要對(duì)其基本屬性及使用場(chǎng)景有一個(gè)清晰的了解，使用的是否恰當(dāng)取決于我們對(duì)字體的選擇。雖說(shuō)在UI領(lǐng)域，字體模塊類(lèi)的文章比較少（更多是文字、字庫(kù)的設(shè)計(jì)），但它在設(shè)計(jì)規(guī)范中的地位是舉足輕重，選好一款字體對(duì)設(shè)計(jì)來(lái)說(shuō)是錦上添花。
關(guān)于UI界面中的字體，其實(shí)沒(méi)有太多的講究，也沒(méi)必要整得花里胡哨，重點(diǎn)在于排版過(guò)重中注意信息層級(jí)的劃分以及有足夠的視覺(jué)舒適度即可。
作者：大漠飛鷹CYSJ 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
按鈕設(shè)計(jì)是我們經(jīng)常會(huì)遇到的一個(gè)類(lèi)型，一個(gè)好的按鈕其最重要的就是激起點(diǎn)擊欲，讓人忍不住去戳戳戳。
我們來(lái)看看下面這個(gè)按鈕：
很普通，處處都很常見(jiàn)的一種按鈕，沒(méi)有任何點(diǎn)擊欲。
那我們應(yīng)該怎么做出她的點(diǎn)擊欲呢？
其實(shí)就是要讓按鈕更有立體感，話(huà)不多說(shuō)直接上干貨！
可以用不同的顏色，放大一圈，形成對(duì)比：
上下錯(cuò)開(kāi)一些讓按鈕的造型飽滿(mǎn)立體一些，從原來(lái)的單一一層變?yōu)閮蓪樱?
為了讓按鈕更立體我們可以把這兩層個(gè)復(fù)制一層，往下移動(dòng)幾個(gè)像素：
這樣按鈕是不是就已經(jīng)立體多了？別急，還有呢！
這里細(xì)節(jié)就比較多，想把按鈕做到晶瑩剔透可不容易，給大家好好講一下。
先給圖形加上一個(gè)內(nèi)發(fā)光：
使用剪切蒙版，涂顏色或者再來(lái)一層內(nèi)發(fā)光，加強(qiáng)這個(gè)效果：
復(fù)制一層，選用更深的顏色，向下移動(dòng)，剪切蒙版到里面去，把按鈕有一個(gè)明顯的明暗分割線(xiàn)，形成這種光的層次和厚度：
沿著造型刻畫(huà)高光，和邊緣有些間隔：
在白色的底座上加入按鈕的投影：
這樣一個(gè)剔透，立體感強(qiáng)的按鈕造型就完成啦！
那還能不能讓點(diǎn)擊欲更強(qiáng)一些呢？
放上文案看看：
就還是有點(diǎn)單對(duì)吧。
這種時(shí)候我們就可以從按鈕的文案出發(fā)，加入一些圖案，讓它更生動(dòng)！
比如這里的文案是“發(fā)射”，就聯(lián)想到了火箭，我們可以繪制一個(gè)火箭出來(lái)。
把它加入到按鈕上：
這樣一個(gè)豐富且有點(diǎn)擊欲的按鈕就完成了！
并可以用同樣的邏輯去延展別的按鈕，讓他們保持統(tǒng)一性：
增強(qiáng)按鈕的點(diǎn)擊欲的方式，其實(shí)就是讓它變得立體且豐富。
1.層次：單獨(dú)的一個(gè)色塊，會(huì)很單薄，增加層次增加其在造型上的豐富度。
2.厚度：厚度可以讓按鈕變得更立體。
3.光影：讓按鈕富有變化，更立體和吸引人。
4.表像圖形：一個(gè)關(guān)聯(lián)文案信息的點(diǎn)綴圖案，可以讓人更有食欲。
作者：菜心輕量文 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
今天和大家分享用了幾年的一個(gè)社交軟件Instagram。發(fā)現(xiàn)這款軟件整體的設(shè)計(jì)與體驗(yàn)有值得學(xué)習(xí)的地方，從10個(gè)維度分享分享，希望大家喜歡啦～～
下圖是關(guān)于Instagram的從2010-2022整個(gè)圖標(biāo)變化的過(guò)程，從中能發(fā)現(xiàn)：
1.圖標(biāo)從擬物的風(fēng)格慢慢變成扁平的風(fēng)格。
2.從具象的相機(jī)變成更加簡(jiǎn)約線(xiàn)形的相機(jī)圖標(biāo)。
3.顏色越來(lái)越艷麗、明亮，給人年輕、炫彩、簡(jiǎn)約的設(shè)計(jì)感受。
4.從logo的變化中能看出頁(yè)面將從擬物的時(shí)代跨進(jìn)了扁平時(shí)代，也能折射Instagram界面必將是往極簡(jiǎn)、炫彩的方向走。
我重新臨摹Instagram啟動(dòng)圖標(biāo)，發(fā)現(xiàn)里面有許多的設(shè)計(jì)小知識(shí)點(diǎn)值得學(xué)習(xí)。
例如：圖標(biāo)背景顏色有黃色、紅色、紫紅色、紫色，相鄰的兩個(gè)顏色互為鄰近色，使得繪制出的背景自然而炫彩，非常不錯(cuò)的設(shè)計(jì)，漸變的融入也很自然。
當(dāng)我們自己做漸變的圖標(biāo)背景時(shí)可以用兩兩相鄰的顏色，讓漸變?nèi)谌氲母匀弧?/span>
明顯的發(fā)現(xiàn)Instagram顏色跟色譜的規(guī)律一致，顏色從左到右色相的變化值在50度左右，4種顏色都是用的高飽和度、高明度的色彩，非常艷麗、明亮，利用漸變附在英文上做出英文版的logo。
iPhone 14的字體漸變也是用的這種方法，利用兩兩相鄰的顏色來(lái)做漸變。連蘋(píng)果、Instagram都在用，趕緊學(xué)起來(lái)吧，你也可以的～～
1.通過(guò)自己仔細(xì)的觀(guān)察發(fā)現(xiàn)Instagram攝像頭圖標(biāo)圓角是帶有平滑過(guò)度的圓角，和普通的圓角不一樣。
2.平滑圓角給用戶(hù)的感受會(huì)更舒適、平滑、有活力，而普通的圓角顯得更加生硬、不自然。
3.蘋(píng)果的主題圖標(biāo)都是帶有平滑過(guò)度的圓角而不是一個(gè)普通圓角，使得圖標(biāo)顯得更加自然。
4.可以去看看之前原研哉幫小米設(shè)計(jì)的logo，會(huì)發(fā)現(xiàn)他們的logo給人干凈會(huì)更加有活力、生命力，而不是使用這種普通圓角，而是一種平滑過(guò)度的圓角～
1.從Instagram的啟動(dòng)頁(yè)面看出，Instagram追求的是簡(jiǎn)約、突出品牌色的方向。
2.主界面主要以用戶(hù)發(fā)的圖片為主而不是文字，往往圖片比文字更容易產(chǎn)生閱讀與反饋。
3.整體的界面簡(jiǎn)約、素白，圖標(biāo)都是統(tǒng)一用黑色線(xiàn)條的描邊。
4.當(dāng)自己關(guān)注的用戶(hù)，發(fā)了一些視頻，頭像上附帶Instagram的品牌色的圓形，在白色的界面用品牌色進(jìn)行了點(diǎn)綴，讓單調(diào)的界面更具有識(shí)別性。
Instagram的發(fā)現(xiàn)頁(yè)面做的很不錯(cuò)，我重新繪制了這個(gè)頁(yè)面，發(fā)現(xiàn)系統(tǒng)想推送給你的圖片或者視頻會(huì)做等比放大2倍處理，一屏顯示圖片或者視頻至少有一個(gè)最大顯示，給用戶(hù)的感受是有主次。同時(shí)開(kāi)發(fā)也能很好實(shí)現(xiàn)這種布局，具有一定的規(guī)律性。
在Instagram界面當(dāng)用戶(hù)發(fā)的圖片超出5張時(shí)，圖片下方的輪播點(diǎn)會(huì)出現(xiàn)變化，有大有小。
我重新繪制了一個(gè)用戶(hù)發(fā)的7張圖片的示例，當(dāng)用戶(hù)在左右滑動(dòng)圖片時(shí)，輪播的點(diǎn)會(huì)跟著動(dòng)，同時(shí)會(huì)有大小的顯示，暗示用戶(hù)后面或者前面還有多張圖片，有近大遠(yuǎn)小的感覺(jué)，非常細(xì)節(jié)的設(shè)計(jì)～（可以利用在自己的一些設(shè)計(jì)上）
1.在Instagram的用戶(hù)界面，視頻、多張圖片、單張圖片和置頂4種狀態(tài)右上角有個(gè)圖標(biāo)的標(biāo)識(shí)，讓用戶(hù)清晰知道圖片的內(nèi)容狀態(tài)，提前給用戶(hù)有個(gè)心理預(yù)期與區(qū)分。
2.當(dāng)用戶(hù)點(diǎn)擊進(jìn)去類(lèi)似抖音的布局，可以進(jìn)行上下滑動(dòng)切換視頻內(nèi)容，雙擊可給該視頻點(diǎn)贊，整體的體驗(yàn)很絲滑，沒(méi)有任何的卡頓與拖沓。同時(shí)界面圖標(biāo)用線(xiàn)性的形式，布局統(tǒng)一、和諧。
Instagram整體的圖標(biāo)設(shè)計(jì)是線(xiàn)性的圖標(biāo)，線(xiàn)性圖標(biāo)給人的感覺(jué)是可點(diǎn)擊、可操作的，同時(shí)感覺(jué)簡(jiǎn)潔明快的氣質(zhì)。圖標(biāo)的統(tǒng)一讓每一個(gè)界面的視覺(jué)感受都是一致的。
這個(gè)界面放在你面前可能都會(huì)知道是Instagram這個(gè)應(yīng)用，這個(gè)界面框架已經(jīng)形成品牌意識(shí)。 Instagram幾年一直沒(méi)有更改這個(gè)布局，非常經(jīng)典的設(shè)計(jì)，沒(méi)有太多花里胡哨的圖標(biāo)與信息，只有簡(jiǎn)約的線(xiàn)性圖標(biāo)與用戶(hù)發(fā)布的圖片，克制的設(shè)計(jì)。也有很多相機(jī)應(yīng)用、戶(hù)外廣告都借鑒了Instagram布局，已經(jīng)在用戶(hù)的心智里面了～
1.越來(lái)越多的企業(yè)的品牌色往鮮艷的方向走，突出品牌形象。
2.圖片的排版不一定是同樣大小的，可以有大有小，取決于更想給用戶(hù)傳達(dá)什么。
3.圖標(biāo)的統(tǒng)一性很重要，當(dāng)整個(gè)app的圖標(biāo)風(fēng)格都一致時(shí)，給用戶(hù)的體驗(yàn)的感受也是一致的。
4.不斷重復(fù)一個(gè)設(shè)計(jì)框架、設(shè)計(jì)組件時(shí)，會(huì)形成品牌意識(shí)，讓用戶(hù)記得你的產(chǎn)品。
百度小說(shuō)是百度APP內(nèi)的垂直頻道，擁有過(guò)億月活和行業(yè)最全的正版書(shū)籍。隨著著作權(quán)保護(hù)意識(shí)逐步上升，越來(lái)越多的用戶(hù)愿意為優(yōu)質(zhì)的資源和閱讀體驗(yàn)付費(fèi)。2019年底，為了滿(mǎn)足用戶(hù)消費(fèi)升級(jí)所產(chǎn)生的一系列需求，百度小說(shuō)初步建立了會(huì)員體系。經(jīng)過(guò)兩年多的打磨，我們不斷提升會(huì)員的服務(wù)體驗(yàn)，并進(jìn)行了多次優(yōu)化升級(jí)，現(xiàn)在將我們的設(shè)計(jì)經(jīng)驗(yàn)分享給大家。
一、設(shè)計(jì)背景
2021年我國(guó)數(shù)字閱讀用戶(hù)規(guī)模達(dá)到5.06億，同比增長(zhǎng)2.43%，半數(shù)以上用戶(hù)愿意為電子閱讀付費(fèi)，占比最重的人群為19~25歲用戶(hù)，達(dá)到44.63%（數(shù)據(jù)來(lái)源《中國(guó)數(shù)字閱讀報(bào)告》），“Z世代”已經(jīng)成為我國(guó)數(shù)字閱讀的主要群體。隨著消費(fèi)升級(jí)，用戶(hù)對(duì)服務(wù)的需求不斷提升，更看重信息之上的附加價(jià)值，如認(rèn)同感、歸屬感和儀式感。
二、改版原因
2019年，由于時(shí)間緊、任務(wù)重，我們完成了小說(shuō)會(huì)員從無(wú)到有、從0-1的基礎(chǔ)場(chǎng)景搭建。但隨著設(shè)計(jì)趨勢(shì)的變化，當(dāng)時(shí)小說(shuō)會(huì)員的設(shè)計(jì)風(fēng)格與主流用戶(hù)的喜好不完全匹配，在使用場(chǎng)景中也存在易用性不足、內(nèi)容缺乏吸引力等問(wèn)題。下圖是2019年小說(shuō)會(huì)員的界面。
同時(shí)，我們對(duì)小說(shuō)用戶(hù)進(jìn)行了視頻訪(fǎng)談，搜集了用戶(hù)在使用會(huì)員服務(wù)中遇到的問(wèn)題，如會(huì)員福利少、找不到會(huì)員專(zhuān)屬內(nèi)容、購(gòu)買(mǎi)過(guò)程有卡頓等，最終梳理為的三大核心問(wèn)題：身份感知弱、購(gòu)買(mǎi)路徑長(zhǎng)和資源內(nèi)容少。
三、設(shè)計(jì)目標(biāo)
在小說(shuō)會(huì)員亟待改版的背景下，我們結(jié)合業(yè)務(wù)目標(biāo)、舊版核心問(wèn)題和用戶(hù)訴求，推導(dǎo)出了本次改版的設(shè)計(jì)目標(biāo)—品牌化、鏈路化和服務(wù)化。
1、品牌化—強(qiáng)化會(huì)員品牌
小說(shuō)會(huì)員作為百度APP眾多會(huì)員之一，設(shè)計(jì)團(tuán)隊(duì)希望能帶給閱讀用戶(hù)一些不同的品牌記憶點(diǎn)。
1）設(shè)計(jì)關(guān)鍵詞
基于會(huì)員的主流用戶(hù)、產(chǎn)品屬性和用戶(hù)訴求，我們衍生出以下關(guān)鍵詞：年輕、品質(zhì)、尊貴、超值。年輕用戶(hù)群體的占比越來(lái)越高，新版的設(shè)計(jì)風(fēng)格力求更好滿(mǎn)足年輕用戶(hù)的審美需求。
2）會(huì)員符號(hào)
符號(hào)是最直觀(guān)的視覺(jué)元素之一，能夠以最快的方式傳遞產(chǎn)品記憶點(diǎn)。在會(huì)員品牌符號(hào)設(shè)計(jì)的草圖階段，我們從字母V、VIP、鉆石、王冠和小說(shuō)IP白嘟嘟等多個(gè)方向進(jìn)行了方案發(fā)散。最終采用了白嘟嘟圖形與尊貴感的V形符號(hào)相結(jié)合的形式。該方案既延續(xù)了小說(shuō)的視覺(jué)符號(hào)，又與競(jìng)品的會(huì)員標(biāo)識(shí)形成差異，從而加深用戶(hù)的品牌感知和視覺(jué)記憶。
3）會(huì)員色彩
為了確定更加獨(dú)特的品牌色，設(shè)計(jì)團(tuán)隊(duì)搜集了大量的尊貴氛圍圖片，提煉出了玫瑰金，牙金，赤墨等8個(gè)具有品質(zhì)感的顏色。在視覺(jué)初稿階段，我們選擇了玫瑰金和黃金兩種主色進(jìn)行了方案嘗試。最終根據(jù)整體效果確定主色為明亮、高貴的玫瑰金，輔色為黑茶棕，深支子和漆黑的配色方案。新的配色方案讓用戶(hù)感受到新穎、現(xiàn)代，煥然一新。
4）會(huì)員圖標(biāo)
在圖形元素上，為了增強(qiáng)親和感，我們選擇了圓潤(rùn)的面形圖標(biāo)樣式，通過(guò)大圓弧和小圓角的細(xì)節(jié)處理，傳遞給用戶(hù)一種年輕、品質(zhì)的品牌印記。
5）信息傳達(dá)
我們對(duì)會(huì)員購(gòu)買(mǎi)頁(yè)和權(quán)益詳情頁(yè)進(jìn)行了布局重構(gòu)，采用深色的背景襯托卡片信息，使得產(chǎn)品框架層和內(nèi)容信息層更加明確，突出核心內(nèi)容。
在各類(lèi)場(chǎng)景中，我們通過(guò)會(huì)員品牌色彩、圖形、符號(hào)和IP形象的滲透，強(qiáng)化會(huì)員品牌印記。
經(jīng)過(guò)分析研究和實(shí)踐，我們完成了主場(chǎng)景的設(shè)計(jì)升級(jí)。
2、鏈路化—精細(xì)化運(yùn)營(yíng)
就會(huì)員體驗(yàn)而言，我們需要關(guān)注用戶(hù)在各種時(shí)間和各類(lèi)場(chǎng)合下的需求，因此我們將會(huì)員的全鏈路狀態(tài)分為時(shí)機(jī)、場(chǎng)景和人群三個(gè)維度。
1）時(shí)機(jī)
在不同的時(shí)機(jī)狀態(tài)下，我們需要傳遞給用戶(hù)不同的信息。只有深入剖析不同狀態(tài)下的用戶(hù)訴求，才能為其提供更好的服務(wù)。接下來(lái)我們從購(gòu)買(mǎi)前、購(gòu)買(mǎi)中、購(gòu)買(mǎi)后和即將過(guò)期四個(gè)階段闡述：
①購(gòu)買(mǎi)前—權(quán)益/優(yōu)惠信息引導(dǎo)
在用戶(hù)購(gòu)買(mǎi)前，我們強(qiáng)化了低價(jià)和省錢(qián)信息，讓用戶(hù)直觀(guān)的感受到購(gòu)買(mǎi)會(huì)員后的價(jià)格福利。為此我們從三個(gè)方向上進(jìn)行優(yōu)化，在開(kāi)通購(gòu)買(mǎi)頁(yè)，外露省錢(qián)金額，幫助用戶(hù)了解開(kāi)通會(huì)員可享受的收益；在會(huì)員頻道頁(yè)，采用外露多項(xiàng)權(quán)益，讓用戶(hù)快速了解會(huì)員權(quán)益；在章節(jié)購(gòu)買(mǎi)頁(yè)，采用突出會(huì)員折扣和會(huì)員優(yōu)惠價(jià)，讓用戶(hù)感受到開(kāi)通會(huì)員的折扣福利。
②購(gòu)買(mǎi)中—優(yōu)化路徑流程
在用戶(hù)購(gòu)買(mǎi)中，我們?cè)跁?huì)員購(gòu)買(mǎi)鏈路環(huán)節(jié)進(jìn)行簡(jiǎn)化，采用當(dāng)前頁(yè)彈出半層面板替代跳轉(zhuǎn)至?xí)T聚合頁(yè)的方式，縮短等待加載時(shí)間；在章節(jié)付費(fèi)鏈路環(huán)節(jié)，將商品選擇區(qū)信息結(jié)構(gòu)進(jìn)行優(yōu)化，減少多章購(gòu)買(mǎi)的頁(yè)面跳轉(zhuǎn)，使得用戶(hù)能夠更流暢的完成支付，提升付費(fèi)體驗(yàn)。
③購(gòu)買(mǎi)后—強(qiáng)化權(quán)益感知
在用戶(hù)購(gòu)買(mǎi)后，鑒于付費(fèi)用戶(hù)對(duì)商品和服務(wù)品質(zhì)有著更高追求，為此我們通過(guò)在各類(lèi)重要入口展示會(huì)員權(quán)益，包括省錢(qián)金額、去廣告次數(shù)以及各類(lèi)場(chǎng)景VIP狀態(tài)提示等方法，以達(dá)到強(qiáng)化用戶(hù)的權(quán)益感知。
④即將過(guò)期—輕引導(dǎo)續(xù)費(fèi)
在即將過(guò)期前，為了避免對(duì)用戶(hù)造成強(qiáng)付費(fèi)的不友好感知。過(guò)期前3天，我們采用了輕量化的形式告知用戶(hù)續(xù)費(fèi)，通過(guò)各類(lèi)引導(dǎo)信息的提示，讓用戶(hù)知曉會(huì)員服務(wù)期限屆滿(mǎn)。
2）場(chǎng)景
我們?cè)谌肟诤凸δ軋?chǎng)景中也進(jìn)行了精細(xì)化設(shè)計(jì)，讓用戶(hù)更便捷地使用會(huì)員服務(wù)。為了突出會(huì)員優(yōu)質(zhì)內(nèi)容和服務(wù)，我們?cè)O(shè)置了會(huì)員專(zhuān)屬的頻道和書(shū)庫(kù)，方便用戶(hù)選擇。
在各類(lèi)功能場(chǎng)景中，為了方便用戶(hù)在使用功能的過(guò)程中隨時(shí)購(gòu)買(mǎi)，我們?cè)O(shè)置了多個(gè)功能場(chǎng)景的會(huì)員開(kāi)通入口。讓用戶(hù)快捷享受會(huì)員服務(wù)。
3）人群
通過(guò)小說(shuō)用戶(hù)數(shù)據(jù)分析，我們將用戶(hù)人群分為會(huì)員用戶(hù)、潛在用戶(hù)、新用戶(hù)和過(guò)期用戶(hù)。
為了讓會(huì)員用戶(hù)能夠體驗(yàn)到區(qū)分于普通用戶(hù)的尊貴感，我們?cè)诟顿M(fèi)頁(yè)、批量離線(xiàn)、TTS播放頁(yè)和簽到頁(yè)等場(chǎng)景均采用了會(huì)員定制化的配色方案和引導(dǎo)提示，這樣使得會(huì)員用戶(hù)在體驗(yàn)服務(wù)的各類(lèi)場(chǎng)景中有更強(qiáng)的身份專(zhuān)屬性。
所謂潛在用戶(hù)，是指仍在猶豫是否購(gòu)買(mǎi)會(huì)員的用戶(hù)。我們通過(guò)限時(shí)優(yōu)惠券、激勵(lì)視頻試用15分鐘、書(shū)架省錢(qián)提示、挽留彈窗和降級(jí)版免廣告權(quán)益等方式，讓潛在用戶(hù)不僅可以先試后買(mǎi)了解會(huì)員權(quán)益，而且可以通過(guò)各類(lèi)信息提示通曉會(huì)員體驗(yàn)，更好地判斷是否通過(guò)會(huì)員服務(wù)減少付費(fèi)金額和提升閱讀體驗(yàn)。
我們針對(duì)新用戶(hù)建立了新人見(jiàn)面禮活動(dòng)，用戶(hù)在新手福利活動(dòng)期內(nèi)可享受超值折扣開(kāi)通會(huì)員，低價(jià)體驗(yàn)會(huì)員權(quán)益。而針對(duì)已過(guò)期的用戶(hù)，我們通過(guò)下發(fā)優(yōu)惠券、強(qiáng)化特權(quán)等形式喚醒用戶(hù)，以免錯(cuò)過(guò)各類(lèi)福利和特權(quán)。
3、服務(wù)化—提升會(huì)員服務(wù)
在內(nèi)容為王的時(shí)代背景下，為了增加會(huì)員產(chǎn)品的核心競(jìng)爭(zhēng)力，我們持續(xù)擴(kuò)充會(huì)員書(shū)庫(kù)的數(shù)量和類(lèi)目、拓展會(huì)員權(quán)益，讓用戶(hù)閱讀到更加豐富的小說(shuō)內(nèi)容和體驗(yàn)到更多權(quán)益的會(huì)員服務(wù)。小說(shuō)書(shū)庫(kù)的付費(fèi)和免費(fèi)書(shū)數(shù)量大幅擴(kuò)充，且書(shū)籍類(lèi)型新增了有聲書(shū)和短篇故事，增添了小說(shuō)資源的多樣性。
在權(quán)益上，對(duì)內(nèi)我們持續(xù)拓展會(huì)員特權(quán)，從最初的4項(xiàng)擴(kuò)展為10項(xiàng)，新增了有聲免費(fèi)聽(tīng)、免費(fèi)讀故事、整本離線(xiàn)、專(zhuān)屬字體、簽到1.5倍書(shū)幣等權(quán)益；對(duì)外我們聯(lián)合其他產(chǎn)品，推出了會(huì)員贈(zèng)禮和聯(lián)合會(huì)員服務(wù)，用戶(hù)可以根據(jù)自己的需求進(jìn)行購(gòu)買(mǎi)，享受組合購(gòu)買(mǎi)的優(yōu)惠。
通過(guò)多個(gè)版本的迭代，我們完成了會(huì)員體系的設(shè)計(jì)升級(jí)和落地，用戶(hù)體驗(yàn)得到了顯著提升。
四、未來(lái)規(guī)劃
提升付費(fèi)產(chǎn)品的用戶(hù)體驗(yàn)是一個(gè)體系化的研究課題，需要各個(gè)角色通力合作，合力同行，開(kāi)拓革新。將來(lái)我們還會(huì)不斷探索，通過(guò)不斷優(yōu)化體驗(yàn)細(xì)節(jié)，不斷增加用戶(hù)權(quán)益感知，不斷嘗試方案創(chuàng)新，形成設(shè)計(jì)組合拳，為用戶(hù)提供更好的服務(wù)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
百度酒店以比價(jià)為核心特色，經(jīng)歷多次設(shè)計(jì)探索，初步建立了用戶(hù)認(rèn)知。
設(shè)計(jì)中通過(guò)“核心流程分析-明確用戶(hù)關(guān)注信息-探索比價(jià)價(jià)值”的方式去制定設(shè)計(jì)策略，并在方案探索與落地階段，通過(guò)思路發(fā)散、多輪數(shù)據(jù)驗(yàn)證與方案迭代，驗(yàn)證了“氛圍感知強(qiáng)化、價(jià)值信息傳達(dá)、聚合比價(jià)”等設(shè)計(jì)手段的作用，希望給服務(wù)和電商等比價(jià)類(lèi)產(chǎn)品的設(shè)計(jì)師一些啟發(fā)和參考。
一、項(xiàng)目背景
酒店住宿在線(xiàn)預(yù)訂市場(chǎng)中，各個(gè)平臺(tái)基于用戶(hù)權(quán)益、運(yùn)營(yíng)補(bǔ)貼等差異進(jìn)行著激烈的價(jià)格競(jìng)爭(zhēng)，導(dǎo)致行業(yè)存在天然的價(jià)差。而在我們進(jìn)行的一次酒店預(yù)訂訪(fǎng)談中發(fā)現(xiàn)，超過(guò)半數(shù)的用戶(hù)在預(yù)訂酒店時(shí)會(huì)進(jìn)行比價(jià)，而比價(jià)的用戶(hù)中多數(shù)會(huì)使用2個(gè)以上的酒店APP。因此，在市場(chǎng)存在價(jià)差且用戶(hù)有比價(jià)訴求的背景下，百度酒店通過(guò)接入多家供給及會(huì)員低價(jià)，旨在建立酒店聚合比價(jià)平臺(tái)，為用戶(hù)提供性?xún)r(jià)比最高的酒店搜索服務(wù)。
二、設(shè)計(jì)策略與落地觸點(diǎn)
1.目標(biāo)和策略制定
在上述背景下，我們與產(chǎn)品側(cè)對(duì)齊業(yè)務(wù)目標(biāo)，結(jié)合對(duì)用戶(hù)訴求的分析，確定了設(shè)計(jì)目標(biāo)。
為了達(dá)成設(shè)計(jì)目標(biāo)，需要明確比價(jià)在酒店預(yù)訂的各個(gè)觸點(diǎn)下對(duì)用戶(hù)的價(jià)值是什么，以探索比價(jià)如何發(fā)揮作用。下圖列出了酒店預(yù)訂的核心流程、核心模塊及用戶(hù)關(guān)注信息，由于用戶(hù)在各個(gè)環(huán)節(jié)關(guān)注的信息不同，比價(jià)所能發(fā)揮的價(jià)值也就不同，因此基于比價(jià)是否影響用戶(hù)進(jìn)行選擇和決策，我們又將核心流程分成服務(wù)報(bào)價(jià)選擇前、服務(wù)報(bào)價(jià)選擇時(shí)、服務(wù)報(bào)價(jià)選擇后。
設(shè)計(jì)目標(biāo)的實(shí)現(xiàn)也對(duì)應(yīng)上述3個(gè)環(huán)節(jié)如下圖：
2.明確落地觸點(diǎn)
為了找到一些好的比價(jià)概念和價(jià)值的傳達(dá)方式，以及提升比價(jià)體驗(yàn)的方式，我們進(jìn)行了競(jìng)品調(diào)研，競(jìng)品包含酒店、商品等不同行業(yè)，調(diào)研結(jié)論歸納如下：
結(jié)合競(jìng)品調(diào)研結(jié)論，我們根據(jù)百度酒店的核心流程和觸點(diǎn)進(jìn)行了設(shè)計(jì)策略的拆解，建立了策略和落地的映射關(guān)系。
三、方案探索與落地
1.提升感知-讓用戶(hù)知道百度酒店可以比價(jià)
這一環(huán)節(jié)的設(shè)計(jì)目標(biāo)是要讓用戶(hù)知道百度酒店可以比價(jià)，以吸引用戶(hù)在百度酒店完成下單行為，因此清晰、有吸引力的比價(jià)元素設(shè)計(jì)十分重要。基于競(jìng)品調(diào)研內(nèi)容，我們進(jìn)行了設(shè)計(jì)探索。
1）酒店列表-氛圍感知強(qiáng)化及價(jià)值信息傳達(dá)
下圖所示為酒店列表比價(jià)設(shè)計(jì)的探索過(guò)程，最初的方案，為了保證酒店信息的獲取體驗(yàn)，采用了與傳統(tǒng)酒店預(yù)訂平臺(tái)采用一致的結(jié)構(gòu)和信息優(yōu)先級(jí)，僅結(jié)合圖片區(qū)域和價(jià)格做了比價(jià)信息的結(jié)合，但這種設(shè)計(jì)與傳統(tǒng)酒店預(yù)訂平臺(tái)差異很小，比價(jià)感知和價(jià)值的傳達(dá)效果并不好。因此設(shè)計(jì)側(cè)轉(zhuǎn)變思路，在酒店列表中通過(guò)更強(qiáng)化的模塊來(lái)突出比價(jià)的感知，同時(shí)結(jié)合“比某平臺(tái)低xx”的文案說(shuō)明比價(jià)結(jié)果，傳達(dá)“比價(jià)獲得更低價(jià)”的感知。
酒店列表覆蓋多個(gè)場(chǎng)景，為了建立百度酒店一致的體驗(yàn)和認(rèn)知，我們將列表的設(shè)計(jì)覆蓋到了搜索結(jié)果頁(yè)和小程序的多個(gè)頁(yè)面，如圖所示。
2）房型及服務(wù)報(bào)價(jià)-基于低價(jià)推薦去強(qiáng)化比價(jià)
房型及服務(wù)報(bào)價(jià)模塊對(duì)應(yīng)酒店精準(zhǔn)需求和酒店詳情頁(yè)，與酒店列表思路一致，方案在逐漸與傳統(tǒng)酒店預(yù)訂平臺(tái)產(chǎn)生差異化，去強(qiáng)化比價(jià)、低價(jià)的感知，形成記憶點(diǎn)。
下圖為搜索結(jié)果頁(yè)的方案，最初外露了多個(gè)房型，以滿(mǎn)足用戶(hù)的選擇訴求，但從用戶(hù)行為數(shù)據(jù)來(lái)看，百度酒店的絕大多數(shù)用戶(hù)會(huì)選擇酒店的最低價(jià)房型及報(bào)價(jià)，因此我們調(diào)整設(shè)計(jì)方案，結(jié)合最低報(bào)價(jià)，用模塊式的對(duì)比方式去強(qiáng)化比價(jià)，并通過(guò)“低價(jià)立省xx”的信息去傳達(dá)低價(jià)感知。另外，這一部分的設(shè)計(jì)也和聚合比價(jià)有所結(jié)合，后面會(huì)進(jìn)行詳細(xì)的說(shuō)明。
詳情頁(yè)的主要模塊設(shè)計(jì)與搜索結(jié)果頁(yè)基本一致，如下圖所示，詳情頁(yè)中將最低報(bào)價(jià)作為低價(jià)房型推薦，以建立一致的比價(jià)認(rèn)知同時(shí)便于用戶(hù)快捷預(yù)訂低價(jià)。另外，在常規(guī)的報(bào)價(jià)列表中，為了提升用戶(hù)查找報(bào)價(jià)的效率，相比于最低價(jià)房型，采用了弱化的形式。最終方案上線(xiàn)后，數(shù)據(jù)上也取得了正向的效果，報(bào)價(jià)展現(xiàn)到預(yù)訂點(diǎn)擊的轉(zhuǎn)化得到了提升。
3）“產(chǎn)品縫隙”中的比價(jià)概念滲透
“產(chǎn)品縫隙”并不像上述列表模塊那樣感知強(qiáng)烈，設(shè)計(jì)的目的是為了進(jìn)一步加深“百度酒店可以比價(jià)”的用戶(hù)印象。結(jié)合百度酒店的核心頁(yè)面，我們重新設(shè)計(jì)了酒店列表和房型報(bào)價(jià)列表的加載態(tài)，利用“多資源方交替動(dòng)效+文案說(shuō)明”的方式，構(gòu)建動(dòng)態(tài)的比價(jià)感知，在用戶(hù)進(jìn)入頁(yè)面或者進(jìn)行篩選等場(chǎng)景時(shí)會(huì)出現(xiàn)。另外，我們也利用了小程序首頁(yè)和詳情頁(yè)的頁(yè)尾，在閱讀結(jié)束時(shí)去傳達(dá)全網(wǎng)比價(jià)的概念。
2.建立認(rèn)知-聚合比價(jià)模式的構(gòu)建
在競(jìng)品調(diào)研部分，我們提到了聚合比價(jià)模式，百度酒店由于報(bào)價(jià)復(fù)雜，也適合用這種方式去簡(jiǎn)化報(bào)價(jià)。
如圖所示，常規(guī)酒店預(yù)訂平臺(tái)，同一房型（如標(biāo)準(zhǔn)大床房）會(huì)存在不同服務(wù)政策（早餐服務(wù)、取消規(guī)則、支付方式）的報(bào)價(jià)，而在百度酒店中，由于又加入了預(yù)訂平臺(tái)的差異，報(bào)價(jià)會(huì)更加復(fù)雜，數(shù)量更多且同質(zhì)化嚴(yán)重，即服務(wù)政策相同，僅預(yù)訂平臺(tái)不同的報(bào)價(jià)多次出現(xiàn)，這就導(dǎo)致了報(bào)價(jià)列表的查看和選擇效率較低。
聚合比價(jià)模式就是要將這些服務(wù)政策相同的報(bào)價(jià)聚合在一起進(jìn)行比價(jià)，以簡(jiǎn)化報(bào)價(jià)列表提升選擇效率，同時(shí)在服務(wù)相同的情況下，絕大部分用戶(hù)會(huì)更傾向于低價(jià)，在報(bào)價(jià)聚合后，可以突出低價(jià)以便用戶(hù)預(yù)訂。
我們也在探索如何讓聚合比價(jià)更簡(jiǎn)單，初始方案采用點(diǎn)擊展開(kāi)的形式，用戶(hù)可以保持滑動(dòng)瀏覽的交互體驗(yàn)，整個(gè)過(guò)程的交互體驗(yàn)比較流暢，但頁(yè)面的層級(jí)關(guān)系較為復(fù)雜，用戶(hù)認(rèn)知成本高。因此我們又嘗試了調(diào)起面板展示比價(jià)詳情，讓用戶(hù)聚焦在當(dāng)前報(bào)價(jià)的對(duì)比，并通過(guò)模塊式的設(shè)計(jì)，清晰羅列了每個(gè)平臺(tái)的服務(wù)、優(yōu)惠明細(xì)等差異信息，讓信息的對(duì)比更高效，同時(shí)強(qiáng)化低價(jià)平臺(tái)，與前面的比價(jià)模塊保持認(rèn)知一致。
聚合比價(jià)模式下，存在了兩種用戶(hù)路徑，如圖所示。用戶(hù)可以直接選擇最低價(jià)資源方完成預(yù)訂，也可以通過(guò)比價(jià)詳情彈層，查看針對(duì)同一服務(wù)的所有平臺(tái)報(bào)價(jià)，對(duì)比平臺(tái)的詳細(xì)服務(wù)、優(yōu)惠差異后再選擇預(yù)訂。
這種預(yù)訂模式的目的，一方面在教育用戶(hù)建立百度酒店可以比價(jià)、可以買(mǎi)到低價(jià)的認(rèn)知，另一方面也提升了用戶(hù)選擇低價(jià)平臺(tái)的效率。另外，聚合比價(jià)要具有清晰的規(guī)則才能被理解和信任，在比價(jià)詳情中，為了進(jìn)一步降低認(rèn)知成本，我們通過(guò)標(biāo)題突出了聚合項(xiàng)，并增加了比價(jià)說(shuō)明入口，讓聚合規(guī)則更明確。聚合比價(jià)的方案上線(xiàn)后，報(bào)價(jià)的預(yù)訂點(diǎn)擊到成單轉(zhuǎn)化也得到了提升。
另外，前文提到的精準(zhǔn)需求搜索結(jié)果頁(yè)和詳情頁(yè)的低價(jià)房型推薦也利用了這種模式，不過(guò)在比價(jià)感知上做了更強(qiáng)化的處理。用戶(hù)可以在詳情頁(yè)直接點(diǎn)擊各個(gè)平臺(tái)報(bào)價(jià)完成預(yù)訂，也可以點(diǎn)擊文字部分查看房型詳情，在頁(yè)面底部的比價(jià)詳情中完成報(bào)價(jià)的對(duì)比和預(yù)訂。
3.強(qiáng)化記憶-比價(jià)價(jià)值感的再次強(qiáng)化
填單場(chǎng)景是在預(yù)訂完成后，這個(gè)環(huán)節(jié)我們可以將比價(jià)的概念和價(jià)值再次展示給用戶(hù)，以加深用戶(hù)對(duì)比價(jià)的認(rèn)知。這里的設(shè)計(jì)手段與“提升感知”階段類(lèi)似，如圖所示為一些方案探索，在用戶(hù)選擇低價(jià)平臺(tái)預(yù)訂，點(diǎn)擊跳轉(zhuǎn)至填單頁(yè)后，我們會(huì)強(qiáng)化用戶(hù)“預(yù)訂到最低價(jià)”以及“為用戶(hù)節(jié)省xx元”的感知。另外，在用戶(hù)提交訂單時(shí)，會(huì)存在一定的加載時(shí)間，我們也利用了這里的“產(chǎn)品縫隙”，結(jié)合加載態(tài)繼續(xù)傳遞低價(jià)、省錢(qián)的認(rèn)知。
四、結(jié)語(yǔ)
回顧百度酒店的比價(jià)設(shè)計(jì)過(guò)程，我們以比價(jià)及低價(jià)感知傳達(dá)、高效預(yù)訂低價(jià)為設(shè)計(jì)目標(biāo)，基于百度酒店的核心預(yù)訂流程，探索比價(jià)在各個(gè)環(huán)節(jié)如何發(fā)揮作用，進(jìn)而將設(shè)計(jì)目標(biāo)的實(shí)現(xiàn)劃分為了“提升感知、建立認(rèn)知、強(qiáng)化記憶”三個(gè)階段，并為業(yè)務(wù)帶來(lái)轉(zhuǎn)化提升。
提升感知過(guò)程結(jié)合流程中的主要模塊，通過(guò)模塊式對(duì)比形式、傳達(dá)比價(jià)價(jià)值感、基于低價(jià)推薦強(qiáng)化比價(jià)、以及利用“產(chǎn)品縫隙”等手段，去吸引用戶(hù)了解和使用比價(jià)；建立認(rèn)知過(guò)程利用“聚合比價(jià)”模式去精簡(jiǎn)報(bào)價(jià)，同時(shí)結(jié)合對(duì)低價(jià)報(bào)價(jià)、低價(jià)平臺(tái)的強(qiáng)化，讓用戶(hù)更便捷的預(yù)訂低價(jià)；最后強(qiáng)化記憶的環(huán)節(jié)，我們進(jìn)行了一些方案嘗試，再次強(qiáng)調(diào)比價(jià)的價(jià)值。另外，為了建立一致的比價(jià)認(rèn)知，整體的設(shè)計(jì)中也堅(jiān)持一致性的原則。百度酒店的比價(jià)設(shè)計(jì)也在不斷地嘗試和優(yōu)化中，希望能給用戶(hù)創(chuàng)造更好的使用體驗(yàn)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
通知是產(chǎn)品中極其重要的一部分，它能快速將內(nèi)容的狀態(tài)及變化通過(guò)不同的方式傳達(dá)給用戶(hù)，以便用戶(hù)在收到信息后根據(jù)所傳遞的內(nèi)容及時(shí)做出應(yīng)對(duì)策略。
在這里，有一個(gè)很現(xiàn)實(shí)的問(wèn)題，很多產(chǎn)品喜歡一股腦的把有效的/無(wú)效的、重要的/不重要的、用戶(hù)想知道的/不想知道的等所有信息通通推送給用戶(hù)。那么，你的推送渠道真的用對(duì)了嗎？是否做了信息優(yōu)先級(jí)區(qū)分？推送時(shí)間段是否有效？站在用戶(hù)角度，下面這些場(chǎng)景你肯定碰到過(guò)：
◇ 手機(jī)屏幕總是頻繁彈出信息，接二連三的震動(dòng)、提示音讓你一怒之下卸載了一些不太常用的APP；
◇ 桌面圖標(biāo)99+、主頁(yè)的消息入口99+、進(jìn)入消息分類(lèi)還是99+，清理起來(lái)非常麻煩，還不如關(guān)閉幾個(gè)分類(lèi)通知，少一個(gè)也能緩口氣；
◇ 一天少看了幾個(gè)小視頻，好不容易節(jié)省出來(lái)的流量被通知無(wú)情的消耗，還不如關(guān)閉系統(tǒng)通知權(quán)限來(lái)得快；
◇ 每隔一段時(shí)間，都要在手機(jī)短信中回復(fù)一大堆TD（退訂），想吐的感覺(jué)；
◇ ......
在頻繁地打擾下，用戶(hù)關(guān)閉了一個(gè)個(gè)通知權(quán)限、甚至一度卸載APP。不難看出，好的消息通知能巧妙的將用戶(hù)求留?。ú糠钟脩?hù)利用通知就能保持對(duì)微信、QQ的控制欲），做的不好就會(huì)起到負(fù)面作用、失去了消息通知的初衷，這里面最需要把控就是推送的一個(gè)“度”。
用戶(hù)可能因?yàn)橐粭l走心的推送而轉(zhuǎn)化、也可能因?yàn)楸淮驍_而放棄使用，站在設(shè)計(jì)角度，需盡可能打造讓用戶(hù)更喜歡的通知系統(tǒng)。那么，對(duì)于不同的業(yè)務(wù)需求及使用場(chǎng)景，又該如何差異化的進(jìn)行消息推送，筆者通過(guò)本文進(jìn)行分析總結(jié)，與大家一起了解。
一、消息推送的基本知識(shí)
二、消息通知渠道
三、讓用戶(hù)再次開(kāi)啟通知權(quán)限
四、提高觸達(dá)率的小技巧
五、結(jié)語(yǔ)
消息通知是產(chǎn)品提供的一項(xiàng)服務(wù)，能夠及時(shí)將產(chǎn)品的期待或內(nèi)容的變化、根據(jù)其等級(jí)權(quán)重合理的通過(guò)不同渠道及時(shí)同步給用戶(hù)，常見(jiàn)的如互動(dòng)提醒、老用戶(hù)召回、活動(dòng)拉新、產(chǎn)品更新或幫助提醒等，通過(guò)站內(nèi)紅點(diǎn)、彈窗、短信、郵件等方式與用戶(hù)進(jìn)行信息交換。
用戶(hù)層面，方便及時(shí)獲取到想要知道的信息、以及對(duì)信息交換的控制權(quán)。例如：用戶(hù)發(fā)布一條新的短視頻想要對(duì)評(píng)論/點(diǎn)贊及時(shí)掌控、給心上人發(fā)了信息想在第一時(shí)間看到回復(fù)...等，產(chǎn)品也是借此用戶(hù)對(duì)內(nèi)容的控制欲，利用消息推送提升用戶(hù)的使用體驗(yàn)。
產(chǎn)品層面，通過(guò)主動(dòng)推送想讓用戶(hù)知道的信息，以達(dá)到新/老用戶(hù)轉(zhuǎn)化的目的。例如：通過(guò)手機(jī)短信形式發(fā)放優(yōu)惠券對(duì)老用戶(hù)召回、應(yīng)用內(nèi)通知或桌面推送對(duì)用戶(hù)拉新...等，以此提高產(chǎn)品收益，獲取更大的商業(yè)價(jià)值。
首先，一個(gè)好的消息系統(tǒng)首先需要將消息內(nèi)容設(shè)計(jì)的全面，以便用戶(hù)通過(guò)消息通知能準(zhǔn)確無(wú)誤的了解到對(duì)應(yīng)內(nèi)容；
其次，消息的觸達(dá)方式需合理有效，必須提供便捷的操作入口以供用戶(hù)及時(shí)反饋；
另外，為了避免過(guò)于打擾用戶(hù)，需選擇合理的推送渠道，提高用戶(hù)觸達(dá)概率及反饋效率。
消息通知渠道分為應(yīng)用內(nèi)通知應(yīng)用外通知。應(yīng)用內(nèi)通知主要來(lái)源于消息中心或系統(tǒng)主動(dòng)觸發(fā)的彈窗來(lái)體現(xiàn)，而應(yīng)用外通知包括桌面圖標(biāo)紅點(diǎn)、手機(jī)短信、電子郵件、push、公眾號(hào)信息（需綁定）等渠道推送。
1）消息功能入口
消息功能入口提示也稱(chēng)為紅點(diǎn)提示，主要有底部Tad欄、首頁(yè)右上角、個(gè)人中心右上角三種形式。當(dāng)有新的通知出現(xiàn)時(shí)，對(duì)應(yīng)圖標(biāo)的右上角會(huì)出現(xiàn)小紅點(diǎn)提示，清晰明了，關(guān)于小紅點(diǎn)設(shè)計(jì)，之前《小紅點(diǎn)篇 | 用好這招，讓用戶(hù)的觸達(dá)率大幅度提升！》這篇文章有詳細(xì)說(shuō)明。
紅點(diǎn)提示的用戶(hù)觸達(dá)率較高，但需要用戶(hù)在登錄狀態(tài)下才能查看，比如訂單狀態(tài)變化、用戶(hù)與用戶(hù)/產(chǎn)品之間的互動(dòng)消息、產(chǎn)品活動(dòng)通知等。
2）消息列表
當(dāng)產(chǎn)品的消息類(lèi)型較多時(shí)，點(diǎn)擊消息功能入口即可跳轉(zhuǎn)至二級(jí)分類(lèi)列表。與上述相比，消息列表的內(nèi)容則更加清晰，通過(guò)第一次消息入口功能的引導(dǎo)觸發(fā)，這里的用戶(hù)觸達(dá)率將成倍增加。
3）彈窗通知
以彈窗的形式覆蓋在頁(yè)面內(nèi)容頂層，阻礙用戶(hù)的當(dāng)前操作并迫使用戶(hù)對(duì)彈窗做出決策，可以是系統(tǒng)主動(dòng)彈出或用戶(hù)手動(dòng)觸發(fā)，對(duì)用戶(hù)的干擾極大。
彈窗通知最大的優(yōu)勢(shì)在于會(huì)100%被用戶(hù)看到，無(wú)法忽略，否則將不能進(jìn)行其他操作，很適合產(chǎn)品的一些重要事件提醒，例如應(yīng)用升級(jí)、活動(dòng)通知、優(yōu)惠券引流等。
4）Toast 通知
Toast通知是用戶(hù)在操作之后給出的即時(shí)反饋，與當(dāng)前頁(yè)面內(nèi)容關(guān)聯(lián)性極強(qiáng)，但不會(huì)中斷用戶(hù)的操作，出現(xiàn)的時(shí)間很短，一般持續(xù)3秒后自動(dòng)消失，對(duì)用戶(hù)的干擾也比較小。
需要注意的是，Toast容易在用戶(hù)不注意的情況下被遺漏，所以適合用于操作后不影響大局、且不可二次操作、不可逆轉(zhuǎn)的輕量提示，例如刪除成功、提交成功等。
1）桌面小紅點(diǎn)
小紅點(diǎn)通常以圓點(diǎn)+數(shù)字的形式出現(xiàn)在圖標(biāo)右上角，用來(lái)提示應(yīng)用內(nèi)的未讀消息數(shù)量，進(jìn)入應(yīng)用查看或清除后小紅點(diǎn)則會(huì)消失。桌面小紅點(diǎn)有一個(gè)必備前提，需要同時(shí)開(kāi)啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限方能接收提醒通知。
在部分應(yīng)用中，桌面小紅點(diǎn)具有較大的價(jià)值，能對(duì)用戶(hù)產(chǎn)生積極的影響，使用頻率得到進(jìn)一定的提升。例如：社交類(lèi)應(yīng)用中的私信、評(píng)論、點(diǎn)贊等；商家端的咨詢(xún)信息、下單提醒等，用戶(hù)在看到后都會(huì)有強(qiáng)烈的點(diǎn)擊欲望，對(duì)一些數(shù)據(jù)的提升起到推動(dòng)作用。
2）PUSH推送
PUSH推送通知常見(jiàn)于設(shè)備頂部橫幅（幾秒后消失）、通知中心以及鎖屏后的中部區(qū)域，用戶(hù)可從卡片中的內(nèi)容獲取信息類(lèi)型及重要程度，用以決策是否需要立即打開(kāi)。
這種推送方式，用戶(hù)幾乎很難忽略，不處理的話(huà)會(huì)長(zhǎng)時(shí)間浮于屏幕之上，非常適合價(jià)值及時(shí)效性較高的消息通知。除視覺(jué)提醒之外，還可通過(guò)聽(tīng)覺(jué)觸達(dá)用戶(hù)，例如支付號(hào)、微信的收款信息等，不過(guò)依然要同時(shí)開(kāi)啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限。
3）手機(jī)短信
短信推送是大家很熟悉的通知渠道了，畢竟現(xiàn)在都是用手機(jī)注冊(cè)賬號(hào)，手機(jī)號(hào)獲取難度幾乎為“0”，常見(jiàn)的有驗(yàn)證碼短信（用戶(hù)請(qǐng)求）、營(yíng)銷(xiāo)短信（產(chǎn)品推送）兩種：
驗(yàn)證碼類(lèi)似“一問(wèn)一答”的互動(dòng)，沒(méi)有什么特別的玩法；
營(yíng)銷(xiāo)類(lèi)短信對(duì)于拉取新用戶(hù)、老用戶(hù)召回、節(jié)日/活動(dòng)促銷(xiāo)能起到不可替代作用，產(chǎn)品可通過(guò)短信發(fā)送圖片、文字以及超鏈接，內(nèi)容的時(shí)效性、用戶(hù)的觸達(dá)率都相對(duì)較高。
著重說(shuō)明一點(diǎn)，因?yàn)槎绦磐ㄖ某杀据^高，在使用之前需要足夠的思考分析，細(xì)分用戶(hù)群體做到精準(zhǔn)投放，避免所花費(fèi)的成本與產(chǎn)生的價(jià)值不成正比。另外，如果需要放超鏈接，那么短信內(nèi)容一定要有足夠的說(shuō)服力及吸引力，總是被用戶(hù)當(dāng)做詐騙短信刪除、舉報(bào)的話(huà)還不如不放。
為了減少對(duì)用戶(hù)的打擾，讓產(chǎn)品更人性化，一般會(huì)在短信結(jié)尾提供TD（退訂）提示，用戶(hù)回復(fù)即可取消后續(xù)的推送，但是否真的取消成功，這就得看產(chǎn)品了(???)...
4）電子郵件
電子郵件推送方式使用的并不多，一方面需要產(chǎn)品有web端服務(wù)，純粹的移動(dòng)端APP郵件推送不會(huì)有什么效果；另一方面，絕大多數(shù)的用戶(hù)登錄電子郵箱并不頻繁，還容易被用戶(hù)一鍵清理或誤刪。
電子郵件唯一的好處就是用戶(hù)可通過(guò)超鏈接直達(dá)內(nèi)容出處，相比APP應(yīng)用，免去了下載等一系列操作，還可以長(zhǎng)時(shí)間滯留，便于用戶(hù)隨時(shí)查看或添加星標(biāo)，處理時(shí)間段選擇較為靈活，很適合web端服務(wù)。針對(duì)一些商業(yè)化的郵件推送，也需要花費(fèi)一定的經(jīng)濟(jì)成本。
產(chǎn)品獲取用戶(hù)郵箱地址的難度較大（郵箱賬號(hào)除外），不難理解，使用手機(jī)號(hào)一鍵登錄、驗(yàn)證碼登錄、第三方賬號(hào)登錄遠(yuǎn)比郵箱地址登錄要方便的多。除此之外，還可以通過(guò)個(gè)人設(shè)置的添加郵箱、問(wèn)卷調(diào)查的郵箱地址預(yù)留來(lái)獲取，不過(guò)這就要看用戶(hù)的主動(dòng)意愿了。
5）公眾號(hào)消息
公眾號(hào)背靠社交應(yīng)用，普及程度及用戶(hù)觸達(dá)率是極高的，不過(guò)這需要產(chǎn)品利用部分業(yè)務(wù)、活動(dòng)為導(dǎo)向，引導(dǎo)用戶(hù)關(guān)注公眾號(hào)后方能接收到消息通知。
目前公眾號(hào)只能向用戶(hù)發(fā)送符合部分場(chǎng)景要求的服務(wù)通知，例如刷卡通知、物流軌跡變化、商品購(gòu)買(mǎi)等。如果預(yù)算足夠的話(huà)，還可以購(gòu)買(mǎi)公眾號(hào)列表、內(nèi)容詳情頁(yè)、朋友圈等產(chǎn)品廣告位進(jìn)行特定用戶(hù)群體推送，無(wú)需用戶(hù)關(guān)注也可以看到并進(jìn)行轉(zhuǎn)化。
用戶(hù)一旦關(guān)閉通知權(quán)限，對(duì)產(chǎn)品來(lái)說(shuō)無(wú)疑是一個(gè)損失，這意味著沒(méi)有消息通知的推動(dòng)，用戶(hù)的使用頻率以及與產(chǎn)品之間的互動(dòng)顯然會(huì)減少（就連夫妻之間都需要時(shí)常互動(dòng)與溝通交流，何況對(duì)于有選擇余地的產(chǎn)品），時(shí)間長(zhǎng)了，用戶(hù)轉(zhuǎn)投其他產(chǎn)品的“懷抱”也不是不可能。
有沒(méi)有想過(guò)，用戶(hù)只是關(guān)閉通知權(quán)限而已，并沒(méi)有卸載APP，真的就沒(méi)辦法了嗎？是不是該做點(diǎn)什么...
用戶(hù)之所以還未卸載APP，說(shuō)明還有價(jià)值，歸根結(jié)底，關(guān)閉通知權(quán)限的原因都是因?yàn)橄⒌摹翱褶Z亂炸”帶來(lái)的無(wú)盡騷擾，幾乎沒(méi)有例外，而產(chǎn)品還會(huì)添上一把火，用戶(hù)再次打開(kāi)APP時(shí)無(wú)底線(xiàn)的催促用戶(hù)再度開(kāi)啟，耗盡用戶(hù)最后一點(diǎn)耐心后，或許再也沒(méi)有機(jī)會(huì)了。
這個(gè)時(shí)候，設(shè)計(jì)師考慮的不是頻繁提醒用戶(hù)開(kāi)啟，而是用戶(hù)關(guān)閉通知的真正原因（“狂轟亂炸”只是概括），細(xì)化各種可能性，然后從中找出機(jī)會(huì)點(diǎn)，但凡有所改進(jìn)都值得試一試，畢竟相比什么都不做不會(huì)更糟。這么解釋似乎毫無(wú)說(shuō)服力，下面舉個(gè)例子：
當(dāng)產(chǎn)品中的某項(xiàng)免費(fèi)服務(wù)突然有一天開(kāi)始收費(fèi)了，但受到了大多數(shù)用戶(hù)的抵觸，這個(gè)時(shí)候你該怎么做，是無(wú)視用戶(hù)訴求繼續(xù)收費(fèi)、還是恢復(fù)到之前的免費(fèi)？這并不是一個(gè)選擇題，繼續(xù)收費(fèi)會(huì)導(dǎo)致大量用戶(hù)流失、恢復(fù)免費(fèi)可能連維持運(yùn)營(yíng)成本都難，所以不經(jīng)思索的選擇草草收?qǐng)?、連下下策都算不上。用戶(hù)抵觸的原因可能收費(fèi)過(guò)高或是與實(shí)際價(jià)值不符，有沒(méi)有想過(guò)利用限時(shí)折扣、附加其他增值服務(wù)（成本較?。┗蛘呓M合捆綁銷(xiāo)售也不失為一種策略。
那么，到底該如何做既能愉快的發(fā)送消息通知、還能能挽回用戶(hù)的心呢？
用戶(hù)關(guān)閉通知權(quán)限，并非沒(méi)有需求，最典型的就是在某寶、某東加了滿(mǎn)滿(mǎn)一“車(chē)”商品等待降價(jià)，然后抱怨消息通知太吵關(guān)掉了通知權(quán)限，最后就是無(wú)法收到折扣通知、還把問(wèn)題怪在了APP身上，著實(shí)太冤。用戶(hù)只要還有需求，通知權(quán)限就還有被重新開(kāi)啟的機(jī)會(huì)。
1）損失厭惡/利益引誘
首先，我們需要找出對(duì)應(yīng)的價(jià)值點(diǎn)，利用優(yōu)秀的文案給予用戶(hù)思考的余地，用戶(hù)每多思考一會(huì)，結(jié)果都有可能發(fā)生改變。
人們都討厭失去，對(duì)于損失的不可控很難接受，在引導(dǎo)用戶(hù)開(kāi)啟通知權(quán)限時(shí)，需要強(qiáng)調(diào)不開(kāi)啟會(huì)失去什么，畢竟面對(duì)“得到”和“失去”時(shí)，損失更加讓人難以忍受，例如物流產(chǎn)品告訴用戶(hù)“未開(kāi)啟通知，將錯(cuò)過(guò)重要的快遞信息”。還可以通過(guò)激勵(lì)等進(jìn)行利益引誘，如“開(kāi)啟后能及時(shí)獲取紅包卡券、折扣通知”等，并提供快捷通道，促使用戶(hù)重新開(kāi)啟通知權(quán)限。
2）消息分類(lèi)/分別處理
每種類(lèi)型的通知都不可能符合所有用戶(hù)的“胃口”，針對(duì)社交、電商類(lèi)產(chǎn)品，可將通知類(lèi)型分類(lèi)處理，用戶(hù)希望接收哪種類(lèi)型的消息單獨(dú)開(kāi)啟即可。
例如支付寶將消息拆分為多個(gè)類(lèi)型；京東還增加了午休免打擾設(shè)置，開(kāi)啟后在12：30-13：30不會(huì)收到任何消息提醒；微信群過(guò)多、消息太吵時(shí)，開(kāi)啟免打擾又擔(dān)心錯(cuò)過(guò)重要人的信息，于是微信在去年上線(xiàn)了開(kāi)啟群消息免打擾后、可設(shè)置群內(nèi)4個(gè)人的消息正常通知，算是比較人性化的設(shè)計(jì)了。
3）提供關(guān)閉/關(guān)不徹底
部分產(chǎn)品提供了關(guān)閉消息通知功能，但又關(guān)不徹底，這是產(chǎn)品基于妥協(xié)的基礎(chǔ)上，依然在低頻推送消息的“流氓”玩法，與用戶(hù)完全關(guān)閉相比，已經(jīng)算是不錯(cuò)的結(jié)果了。
常見(jiàn)于PC客戶(hù)端，就像很多軟件的插件一樣，不管怎么關(guān)，總是無(wú)法徹底關(guān)閉，甚至還將開(kāi)啟操作偽裝成其他內(nèi)容引導(dǎo)用戶(hù)誤觸；手機(jī)短信推送也會(huì)有這種情況，用戶(hù)回復(fù)過(guò)“退訂”后依然會(huì)收到相關(guān)短信。
這種方式需謹(jǐn)慎使用，在用戶(hù)關(guān)閉通知后，需通過(guò)后續(xù)推送內(nèi)容的質(zhì)量、頻率試探用戶(hù)底線(xiàn)，然后逐漸提升，切不可無(wú)視用戶(hù)操作。
反復(fù)推送相同的內(nèi)容只會(huì)讓用戶(hù)更加反感，回復(fù)退訂、卸載應(yīng)用都可能在這一刻發(fā)生。
很明顯，消息發(fā)出后，如果用戶(hù)的觸達(dá)率較高就沒(méi)必要再次推送。反之觸達(dá)率較低，重復(fù)推送會(huì)讓用戶(hù)有種被催促、脅迫的感覺(jué)，適得其反，觸達(dá)率低有沒(méi)有可能是文案不夠友好、表達(dá)不夠清晰或者吸引力不夠？即便同一件事情，也盡量使用不同的表達(dá)方式，如何想辦法重新引起用戶(hù)的關(guān)注才是關(guān)鍵點(diǎn)。
中華文字博大精深，且有56個(gè)民族，其性格習(xí)慣各異，特別在利用當(dāng)前社會(huì)熱點(diǎn)、媒介進(jìn)行的營(yíng)銷(xiāo)推送時(shí)，盡可能規(guī)避掉敏感信息，如地域/民族歧視、性暗示等。
很多時(shí)候，消息推送太少無(wú)法滿(mǎn)足產(chǎn)品目標(biāo)、太多則會(huì)惹惱用戶(hù)導(dǎo)致通知權(quán)限被徹底關(guān)閉，所以不僅要考慮消息推送頻率，更重要的是對(duì)受眾群體進(jìn)行分類(lèi)、分別推送，不要每次都一股腦的將消息發(fā)給所有用戶(hù)，當(dāng)然，能做到千人千面（成本大）則會(huì)更好。
沒(méi)有用戶(hù)愿意在不明所以的情況下來(lái)看長(zhǎng)篇大論的內(nèi)容，需確保消息內(nèi)容簡(jiǎn)單直接、清晰易懂，并符合用戶(hù)認(rèn)知習(xí)慣，還得保持友好的語(yǔ)氣以及富有創(chuàng)造力的品牌形象。
處于營(yíng)銷(xiāo)目的時(shí)，可利用感興趣的事件/事物勾起用戶(hù)的點(diǎn)擊欲望，例如網(wǎng)絡(luò)熱詞、時(shí)下熱點(diǎn)等，筆者雖然并不提倡“標(biāo)題黨”，但不得不說(shuō)，很多標(biāo)題黨都能起到不錯(cuò)的效果。
消息通知需要一個(gè)有效操作入口，并且在消息內(nèi)容中有對(duì)應(yīng)的指向，點(diǎn)擊應(yīng)用內(nèi)通知切換APP界面、應(yīng)用外推送鏈接跳轉(zhuǎn)至web頁(yè)，從始至終都需要為用戶(hù)提供一個(gè)查看更多內(nèi)容或參與的有效途徑。
消息通知設(shè)計(jì)的主要目的是在正確的時(shí)間、以正確的方式將內(nèi)容呈現(xiàn)給用戶(hù)，并提高產(chǎn)品的轉(zhuǎn)化率，不管用戶(hù)愿不愿意接受，這始終都是一個(gè)呈現(xiàn)信息的不錯(cuò)途徑。
本文主要總結(jié)了消息的通知渠道、常見(jiàn)問(wèn)題處理、提升用戶(hù)觸達(dá)率的方法，以幫助新手設(shè)計(jì)師快速掌握完整的消息系統(tǒng)。或許最終的結(jié)果事與愿違，但不能否認(rèn)其魔力，需要做好的是確保消息內(nèi)容質(zhì)量、對(duì)應(yīng)的受眾群體及合理的推送渠道，相信總有一種方式適合你產(chǎn)品。
作者：大漠飛鷹CYSJ 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前幾天眼睛不太舒服，去醫(yī)院做了一個(gè)檢查（視疲勞導(dǎo)致）。因?yàn)橐呱瘫?，所以要使用社保卡，之前我記得用社保結(jié)算都需要去人工窗口，我剛過(guò)去就被一個(gè)穿著紅馬褂的大媽攔住說(shuō)自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開(kāi)始幫我點(diǎn)擊操作。
她覺(jué)得我應(yīng)該不會(huì)操作，所以讓我看一遍，其實(shí)這個(gè)操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周?chē)矝](méi)引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過(guò)來(lái)看病的覺(jué)得你是個(gè)騙子，后面好幾個(gè)人都還是去了窗口。
在B端產(chǎn)品中也有很多類(lèi)似問(wèn)題，用戶(hù)不知道有這個(gè)功能、也不知道這個(gè)功能怎么使用，特別是一些大數(shù)據(jù)產(chǎn)品，專(zhuān)業(yè)性比較強(qiáng)。產(chǎn)品、技術(shù)都認(rèn)為用戶(hù)和他們一樣都懂，實(shí)際上并不是，這個(gè)時(shí)候你需要提供一些邀請(qǐng)，引導(dǎo)用戶(hù)進(jìn)行使用。
邀請(qǐng)就是引導(dǎo)用戶(hù)進(jìn)行操作前的提醒和暗示，通常包括實(shí)時(shí)的提示信息和預(yù)期功能，以表明在下這個(gè)界面或下個(gè)界面可以做什么，這是成功的交互式界面關(guān)鍵所在。
例如：飛書(shū)我的空間，當(dāng)鼠標(biāo)停留在可編輯區(qū)域上時(shí)，就會(huì)實(shí)時(shí)地顯示邀請(qǐng)（復(fù)選框），這個(gè)例子的缺點(diǎn)是鼠標(biāo)如果不處于相應(yīng)區(qū)域上，就不會(huì)顯示邀請(qǐng)。
另一種方案是任何時(shí)候都顯示邀請(qǐng)，例如：石墨文檔我的桌面，復(fù)選框一直顯示。
靜態(tài)邀請(qǐng)就是通過(guò)直接在頁(yè)面上給出交互提示，可以讓用戶(hù)隨時(shí)看到期望的界面功能。
靜態(tài)邀請(qǐng)主要有兩種模式：引導(dǎo)操作邀請(qǐng)、漫游探索邀請(qǐng)
例如：華為云HECS服務(wù)器產(chǎn)品就給出1、2、3操作步驟 引導(dǎo)操作會(huì)占據(jù)頁(yè)面較大的空間，同時(shí)也會(huì)吸引用戶(hù)的眼球。所以在設(shè)計(jì)時(shí)需要思考一下，你希望引導(dǎo)用戶(hù)執(zhí)行什么操作，用戶(hù)是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁(yè)面和信息層。
另一種引導(dǎo)操作邀請(qǐng)叫作白板式引導(dǎo)。 意思很明確：現(xiàn)在只有一個(gè)空白頁(yè)面，需要引導(dǎo)用戶(hù)創(chuàng)建內(nèi)容。
利用空白區(qū)域“變廢為寶”，如何對(duì)該區(qū)域應(yīng)有的功能給出提示，是誘導(dǎo)用戶(hù)創(chuàng)建內(nèi)容（填補(bǔ)空白）的有效方式。
與引導(dǎo)操作邀請(qǐng)關(guān)系密切的是漫游探索邀請(qǐng)。假設(shè)你重新設(shè)計(jì)了某個(gè)頁(yè)面并添加了一組全新的功能，怎樣才能保證用戶(hù)恰當(dāng)?shù)厥褂眯马?yè)面，同時(shí)發(fā)現(xiàn)新添加的功能呢？漫游邀請(qǐng)是向用戶(hù)介紹新功能最好的方法。
1、漫游功能用戶(hù)可能不想用，所以需要有可選功能，也就是可以跳過(guò)或關(guān)閉；
2、漫游功能不是“創(chuàng)可貼”不要亂用，只有針對(duì)精心設(shè)計(jì)的界面使用才能發(fā)揮價(jià)值；
3、設(shè)計(jì)漫游的關(guān)鍵在于保持簡(jiǎn)單，讓它容易開(kāi)始也容易停止。漫游應(yīng)該只是頁(yè)面本身的一個(gè)演示。脫離頁(yè)面的“教程”式漫游很難起到作用。
靜態(tài)邀請(qǐng)適合提示用戶(hù)當(dāng)前界面中包含什么功能。然而，許多調(diào)查試驗(yàn)表明，用戶(hù)經(jīng)常不會(huì)閱讀指導(dǎo)說(shuō)明性的文字。而在用戶(hù)交互過(guò)程中，在他們需要的時(shí)候提供邀請(qǐng)則是一種不錯(cuò)的方式。動(dòng)態(tài)邀請(qǐng)就是在用戶(hù)交互過(guò)程中的某個(gè)點(diǎn)上吸引用戶(hù)，并引導(dǎo)他們繼續(xù)下一步操作。
吸引用戶(hù)的一種方式是通過(guò)鼠標(biāo)懸停來(lái)顯示邀請(qǐng)
例如：飛書(shū)消息列表鼠標(biāo)移入后， 背景變化的同時(shí)會(huì)有一個(gè)“勾”圖標(biāo)來(lái)吸引用戶(hù)，鼠標(biāo)移入上去后提示可以勾選完成，點(diǎn)擊完成后消息移除列表。
1、當(dāng)操作沒(méi)有內(nèi)容重要，而且希望界面整潔時(shí)，使用懸停邀請(qǐng)。
2、在實(shí)現(xiàn)懸停邀請(qǐng)時(shí)，可以通過(guò)改變光標(biāo)、改變背景和顯示提示條共同配合表明所邀請(qǐng)的操作
3、在交互的不同階段，盡量點(diǎn)綴一些用戶(hù)熟悉的元素，通過(guò)熟悉的概念引出新概念有助于用戶(hù)快速理解新功能。最常見(jiàn)的元素是按鈕、鏈接、下拉箭頭和眾所周知的圖標(biāo)。
4、通過(guò)距離表明邀請(qǐng)操作的目標(biāo)對(duì)象。
唐納德·諾曼將這個(gè)術(shù)語(yǔ)引入到設(shè)計(jì)領(lǐng)域。最經(jīng)典的例子是門(mén)把手，門(mén)把手的預(yù)期功能是可以抓握、扭轉(zhuǎn)或按壓。屏幕元素可感知的預(yù)期功能沒(méi)有物理屬性，不過(guò)，由于習(xí)慣、術(shù)語(yǔ)、圖形及一致性等原因，用戶(hù)能夠在某種程度上感覺(jué)到他們可以操作這些元素。
例如：第一張圖飛書(shū)文檔sheet頁(yè)“加號(hào)”圖標(biāo)與第二張圖“三個(gè)點(diǎn)”圖標(biāo)，就是一種預(yù)期功能邀請(qǐng)。用戶(hù)沒(méi)觸發(fā)之前就能猜到觸發(fā)后會(huì)是什么效果。
預(yù)期功能邀請(qǐng)之所以有效，是因?yàn)槔萌藗円阎牧?xí)慣與認(rèn)知引入交互，從而讓用戶(hù)順利完成一連串操作。
1、通過(guò)人們習(xí)以為常、司空見(jiàn)慣的概念來(lái)引出新的、不熟悉的交互方式。
2、使用可感知的預(yù)期功能來(lái)給出邀請(qǐng)?zhí)崾?例如，用向下的箭頭表示可以打開(kāi)下拉菜單，而用向上的箭頭表示可以關(guān)閉菜單)
3、把邀請(qǐng)安排在適當(dāng)?shù)纳舷挛闹?，特別是要靠近交互的主體。
設(shè)計(jì)邀請(qǐng)時(shí)怎么才能猜測(cè)用戶(hù)的想法，也是一項(xiàng)重要挑戰(zhàn)。如果用戶(hù)下一步可能會(huì)執(zhí)行多種操作，而事實(shí)上又不可能準(zhǔn)確判斷用戶(hù)想法，那么面臨的困難就會(huì)比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)點(diǎn)后，進(jìn)行第二個(gè)點(diǎn)連接時(shí)，會(huì)有多種可能性，這個(gè)時(shí)候系統(tǒng)也不確定用戶(hù)會(huì)怎樣連接，但會(huì)給出對(duì)應(yīng)的提示，比如：端點(diǎn)、中點(diǎn)、背面、側(cè)面等點(diǎn)位來(lái)輔助用戶(hù)進(jìn)行連接。
例如：這種工作流場(chǎng)景個(gè)人覺(jué)得也算是一種，點(diǎn)擊“加號(hào)”右側(cè)會(huì)滑出面板，給出你可以添加的動(dòng)作。 這種在交互期間以可見(jiàn)方式向用戶(hù)表明系統(tǒng)推斷出的用戶(hù)想法被稱(chēng)為推論邀請(qǐng)。
圖片類(lèi)型的更多邀請(qǐng)，例如：站酷相關(guān)推薦
文字更多邀請(qǐng)，例如：QQ郵箱右側(cè)最近聯(lián)系人
精心設(shè)計(jì)的應(yīng)用能夠通過(guò)邀請(qǐng)?bào)w現(xiàn)出各自的細(xì)微差別，無(wú)論是靜態(tài)還是動(dòng)態(tài)，都是引導(dǎo)用戶(hù)順利進(jìn)入下一個(gè)交互層次的有效方法。
謝謝觀(guān)看！
搜索的本質(zhì)是什么？無(wú)疑是內(nèi)容的召回和信息的推薦。
可隨著時(shí)代的發(fā)展和行業(yè)公司的內(nèi)卷，不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外，在搜索的體驗(yàn)和彩蛋上也是下了不少功夫，從而進(jìn)一步加強(qiáng)自有產(chǎn)品的競(jìng)爭(zhēng)力與用戶(hù)黏性。因此今天就來(lái)盤(pán)點(diǎn)一些，那有意思的大廠(chǎng)搜索交互。
大體上分為兩類(lèi)：彩蛋流和體驗(yàn)流
注重提升搜索過(guò)程中的趣味程度，以增加用戶(hù)的好感度與產(chǎn)品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說(shuō)是搜索彩蛋的先行者，內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋，如娛樂(lè)角色：搜索【滅霸】，頁(yè)面右邊會(huì)打響指，相關(guān)字段會(huì)被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點(diǎn)擊彩蛋
還有各種有意思的搜索結(jié)果比如搜：is google down（谷歌關(guān)閉了嗎），搜索結(jié)果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話(huà)：the answer to life, the universe, and everything。此時(shí)搜索結(jié)果頁(yè)會(huì)自動(dòng)計(jì)算成42。貌似也只有讀過(guò)《銀河系漫游指南》的人才能明白其中的奧秘。聽(tīng)說(shuō)是生命、宇宙與萬(wàn)事萬(wàn)物的終極解答。
而且在日常的節(jié)日、活動(dòng)、熱點(diǎn)運(yùn)營(yíng)上，谷歌也從不缺席。都會(huì)在搜索框上用【插畫(huà)、動(dòng)效】等形式承載各種活動(dòng)入口、吸引用戶(hù)參與，可以已經(jīng)形成一個(gè)穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復(fù)活節(jié)、開(kāi)學(xué)季、母親節(jié)動(dòng)效。而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠(chǎng)里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應(yīng)該是搜索【黑洞】時(shí)，頁(yè)面上會(huì)出現(xiàn)黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關(guān)鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉(zhuǎn)】，頁(yè)面會(huì)左右翻過(guò)來(lái)
搜索【跳躍】，頁(yè)面會(huì)在上下跳動(dòng)
搜索【失重】，頁(yè)面上的字會(huì)飄起來(lái)?
而在【活動(dòng)運(yùn)營(yíng)】上，百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計(jì)，力求給用戶(hù)一種眼前一亮的感覺(jué)。比如每年的愚人節(jié)，搜索結(jié)果頁(yè)上都有‘調(diào)戲’用戶(hù)的創(chuàng)意設(shè)計(jì)，各種輕松調(diào)皮的畫(huà)風(fēng) 給不少用戶(hù)帶來(lái)了新鮮感和趣味性。
還有在【活動(dòng)入口】的設(shè)計(jì)上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動(dòng)入口’嵌套‘在結(jié)果頁(yè)卡片中間，用活動(dòng)里的ip形象-雪人「抬著」結(jié)果頁(yè)卡片和在上面「滾動(dòng)」
用這種充滿(mǎn)創(chuàng)意+應(yīng)景的的入口設(shè)計(jì)與引導(dǎo)方式，最大限度地降低漏斗，吸引讓更多用戶(hù)參與該活動(dòng)。另外，百度搜索框上面的運(yùn)營(yíng)活動(dòng)入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠(chǎng)里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
注重提升搜索過(guò)程中的交互體驗(yàn)，以增加用戶(hù)的操作效率與產(chǎn)品易用性。
代表：蘋(píng)果產(chǎn)品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢(xún)手機(jī)上的各種信息、文件，它還自帶了【匯率轉(zhuǎn)換和計(jì)算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時(shí)會(huì)自動(dòng)計(jì)算對(duì)應(yīng)的結(jié)果。無(wú)需用戶(hù)額外打開(kāi)計(jì)算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤(pán)里，可以根據(jù)輸入詞檢測(cè)+搜索對(duì)應(yīng)的手機(jī)號(hào)碼：當(dāng)你輸入 【打+我或通訊錄好友+電話(huà)】時(shí)，鍵盤(pán)上會(huì)自動(dòng)顯示自己或好友的電話(huà)號(hào)碼，點(diǎn)擊號(hào)碼就能自動(dòng)粘貼在輸入框中。
用戶(hù)無(wú)需前往通訊錄就能輕松「獲知+想起」誰(shuí)誰(shuí)的電話(huà)號(hào)碼，大大提升操作體驗(yàn)與效率
·Mac
在Mac電腦的工具欄上搜索相關(guān)幫助時(shí)，系統(tǒng)會(huì)直接把該結(jié)果所對(duì)應(yīng)的頁(yè)面位置調(diào)取出來(lái)并懸浮展示。用戶(hù)可以直觀(guān)地該結(jié)果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助，在結(jié)果列表上會(huì)以聚光燈的形式展示各個(gè)結(jié)果入口。選擇具體某個(gè)結(jié)果時(shí)，該入口的聚光燈會(huì)更清晰些，特別容易找到搜索結(jié)果。
夸克瀏覽器除了傳統(tǒng)的「點(diǎn)擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢(shì)同樣可以喚出搜索框。
降低「需要往上手指移動(dòng)，才能點(diǎn)擊搜索框」的操作成本，讓用戶(hù)更快、更精準(zhǔn)地觸達(dá)搜索。
而且在輸入網(wǎng)址或英文等字段時(shí)，搜索框下方會(huì)出現(xiàn)一個(gè)滑塊區(qū)。點(diǎn)擊就會(huì)變成長(zhǎng)條的滑塊，拖拽滑塊即可改變光標(biāo)位置。
而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠(chǎng)里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
讓用戶(hù)更方便地將光標(biāo)快速移動(dòng)到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會(huì)前置搜索結(jié)果， 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會(huì)以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶(hù)無(wú)需觸發(fā)搜索、進(jìn)入結(jié)果頁(yè)才能看到想要查詢(xún)的信息。
– END
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn