對(duì)于很多設(shè)計(jì)師來(lái)講在設(shè)計(jì)界面過(guò)程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁(yè)面時(shí)往往是直接拿到競(jìng)品的頁(yè)面搬運(yùn)到自己產(chǎn)品上，這種做法理論上不會(huì)讓自己的頁(yè)面出錯(cuò)，但是很多人往往忽略了一點(diǎn)，就是別人這么設(shè)計(jì)的目標(biāo)是什么，是否會(huì)匹配自己的設(shè)計(jì)目標(biāo)，如果不了解這些貿(mào)然的去搬運(yùn)設(shè)計(jì)，那么時(shí)間久了會(huì)養(yǎng)成一個(gè)不好的習(xí)慣，需要設(shè)計(jì)師去進(jìn)行設(shè)計(jì)時(shí)可能就會(huì)遇到很多難點(diǎn)，作為初級(jí)設(shè)計(jì)師或者剛?cè)胄械脑O(shè)計(jì)師，前期可以去進(jìn)行搬運(yùn)設(shè)計(jì)，但是一定要了解別人為什么這么做。
接下來(lái)將分享12個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗(yàn)。
一、快捷交互
二、提升交互路徑
三、問(wèn)題前置
四、提升可讀性
五、點(diǎn)擊引導(dǎo)
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級(jí)
九、圖標(biāo)保持一致
十、利用對(duì)比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時(shí)可以時(shí)常利用交互手勢(shì)去幫助用戶提升操作效率，避免繁雜小操作步驟
左側(cè)為什么錯(cuò)？？
左圖中針對(duì)單條消息的操作匯聚到了icon內(nèi)，對(duì)于用戶理解成本比較高，當(dāng)用戶想要去刪除或者屏蔽消息時(shí)需要通過(guò)聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類(lèi)似的消息場(chǎng)景或者其他列表形式的場(chǎng)景中，添加一些交互手勢(shì)，隨著手機(jī)系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無(wú)法操作的情況，增加手勢(shì)有弊端也有優(yōu)勢(shì)，右圖中手勢(shì)增加了用戶首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個(gè)理論上是可以接
受的。
實(shí)際產(chǎn)品中的運(yùn)用
利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶操作效率。
左側(cè)為什么錯(cuò)？？
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶進(jìn)行操作，當(dāng)然如果整個(gè)模塊的熱區(qū)都是同一個(gè)，這樣并沒(méi)有什么問(wèn)題，用戶點(diǎn)擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個(gè)模塊內(nèi)存在多個(gè)熱區(qū)入口，而用戶想要到達(dá)目標(biāo)必須通過(guò)按鈕點(diǎn)擊才能進(jìn)入，那么左圖中的排版位置就會(huì)提升用戶的操作時(shí)間。
建議正確做法～～
當(dāng)一個(gè)頁(yè)面內(nèi)出現(xiàn)多個(gè)相同模塊或者一個(gè)模塊出現(xiàn)多個(gè)熱區(qū)入口時(shí)，按鈕點(diǎn)擊區(qū)域有限，我們?cè)O(shè)計(jì)時(shí)就可以利用拇指定律進(jìn)行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時(shí)快速到達(dá)目標(biāo)，因?yàn)閲?guó)內(nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶，所以我們需要滿足大部分的體驗(yàn)，合理利用拇指定律。
相關(guān)定律：費(fèi)茲定律、拇指定律
實(shí)際產(chǎn)品中的運(yùn)用
對(duì)于我們來(lái)講很多東西是簡(jiǎn)單的，但是不乏會(huì)有一些用戶是陌生的，對(duì)于他們來(lái)講可能會(huì)有填寫(xiě)成本。
左側(cè)為什么錯(cuò)？？
左圖中理論上并不是錯(cuò)，我們經(jīng)常設(shè)計(jì)表單時(shí)都會(huì)用的提示話術(shù)，但是我們需要考慮更多維度的東西，對(duì)于我們來(lái)講填寫(xiě)這種表單非常簡(jiǎn)單，例如個(gè)別用戶，可能會(huì)臨時(shí)忘了郵箱格式，又或者輸入手機(jī)號(hào)時(shí)多填了一位數(shù)等等情況，用戶錯(cuò)誤一次操作步驟就會(huì)多一步，反之就是降低使用產(chǎn)品時(shí)的體驗(yàn)。
建議正確做法～～
如右圖中，我們?cè)O(shè)計(jì)時(shí)可以更改提示的話術(shù)，幫助用戶把問(wèn)題前置，當(dāng)用戶看到提示郵箱時(shí)就會(huì)按照格式去填寫(xiě)，通過(guò)把手機(jī)號(hào)的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無(wú)論對(duì)產(chǎn)品還是用戶都沒(méi)有任何損失，反而能降低錯(cuò)誤頻率。
實(shí)際產(chǎn)品中的運(yùn)用
無(wú)論是頁(yè)面還是模塊，用戶在閱讀時(shí)是已掃讀的方式進(jìn)行瀏覽，我們需要保證頁(yè)面的文字元素具備一定的規(guī)律，以此來(lái)提升閱讀效率。
左側(cè)為什么錯(cuò)？？
左圖中可以看到，文字與輸入框放在同一列進(jìn)行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫(xiě)的頁(yè)面，在頁(yè)面中都是具有很大的空間位置，這樣排布會(huì)造成視覺(jué)上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M(jìn)行使用。
建議正確做法～～
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長(zhǎng)短不一，但依據(jù)對(duì)齊原則在豎列情況看是具備對(duì)齊規(guī)律的，有效的提升信息篩選效率。
實(shí)際產(chǎn)品中的運(yùn)用
我們?cè)谧鱿到y(tǒng)功能模塊時(shí)需要注意添加功能點(diǎn)擊引導(dǎo)，用戶對(duì)此類(lèi)消息模塊認(rèn)知上會(huì)默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。
左側(cè)為什么錯(cuò)？？
我們常見(jiàn)的消息模塊內(nèi)容為兩種，一種是互動(dòng)類(lèi)消息即用戶與用戶，另一種時(shí)是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶習(xí)慣而言用戶已經(jīng)沒(méi)有使用成本默認(rèn)是可以進(jìn)行點(diǎn)擊交互，后者因?yàn)椴糠之a(chǎn)品會(huì)把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點(diǎn)擊交互，這就導(dǎo)致了用戶認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實(shí)從視覺(jué)上看，并不具備點(diǎn)擊欲望，因此可能會(huì)對(duì)用戶造成錯(cuò)誤的理解。
建議正確做法～～
當(dāng)我們?cè)谠O(shè)計(jì)時(shí)需要注意，若消息列表中存在系統(tǒng)類(lèi)消息并且可以進(jìn)行交互，在設(shè)計(jì)時(shí)可以添加向箭頭、紅點(diǎn)提示等方式告知用戶可以點(diǎn)擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。
實(shí)際產(chǎn)品中的案例
目前市場(chǎng)上產(chǎn)品幾乎都有深色版本，我們?cè)谠O(shè)計(jì)時(shí)深色版本的顏色時(shí)需要注意飽和度的高低，同樣的飽和度在黑色背景上會(huì)比白色背景上更加亮，這跟人的視覺(jué)感官有很大的關(guān)系，因此我們?cè)谧龊谏姹緯r(shí)需要注意是否調(diào)整飽和度。
左側(cè)為什么錯(cuò)？？
在黑色背景中使用過(guò)高的飽和度會(huì)刺激眼睛，很多深色版本都是從白色模式通過(guò)反向顏色直接調(diào)整，而彩色元素會(huì)直接運(yùn)用到深色中，那么就會(huì)造成一個(gè)問(wèn)題，因?yàn)槲覀兞?xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開(kāi)手電筒”，對(duì)眼睛的傷害很高。
建議正確做法～～
我們?cè)谠O(shè)計(jì)深色版本時(shí)可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來(lái)緩沖對(duì)用戶視覺(jué)感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進(jìn)行處理，這樣無(wú)需在添加更多的顏色規(guī)范。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)模塊或者頁(yè)面時(shí)不建議使用特殊字體來(lái)突出文字層級(jí)，這樣會(huì)導(dǎo)致視覺(jué)不統(tǒng)一，以及開(kāi)發(fā)成本增加。
左側(cè)為什么錯(cuò)？？
左圖中灰色字使用了特殊字體，看起來(lái)雖然好看，但在實(shí)際開(kāi)發(fā)中會(huì)導(dǎo)致開(kāi)發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開(kāi)發(fā)同學(xué)添加對(duì)應(yīng)字體包，這樣會(huì)導(dǎo)致我們的產(chǎn)品包的內(nèi)存過(guò)大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價(jià)值。
建議正確做法～～
一般系統(tǒng)字體就能夠滿足我們的設(shè)計(jì)需求，在UI設(shè)計(jì)中我們可以通過(guò)不同的字體粗細(xì)來(lái)調(diào)整文字層級(jí)，這樣能夠保證視覺(jué)更加統(tǒng)一，減少產(chǎn)品包大小。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)時(shí)需要注意多個(gè)入口在同一位置時(shí)，需要把它們進(jìn)行層級(jí)劃分，避免影響用戶決策
左側(cè)為什么錯(cuò)？？
圖中可以看到，兩個(gè)面性按鈕非常明顯的在模塊中，當(dāng)用戶在瀏覽頁(yè)面中很容易出現(xiàn)困惑，到底需要點(diǎn)擊哪個(gè)才能購(gòu)買(mǎi)預(yù)定，因?yàn)閮蓚€(gè)都是面性無(wú)法快速進(jìn)行定位入口，這樣不僅影響用戶決策效率，還會(huì)影響產(chǎn)品點(diǎn)擊率。
建議正確做法～～
建議設(shè)計(jì)類(lèi)似模塊中時(shí)，無(wú)論是pc還是移動(dòng)端都需要對(duì)入口進(jìn)行結(jié)構(gòu)劃分，這樣能夠使用戶在瀏覽頁(yè)面時(shí)快速定位到入口，提升決策效率，做體驗(yàn)是解決用戶的思考時(shí)間。
實(shí)際產(chǎn)品中的案例
在UI設(shè)計(jì)中使用圖標(biāo)時(shí)，要保持一致性，確保他們共有相同的視覺(jué)風(fēng)格，相同的重量，填充和描邊。不要混搭。
左側(cè)為什么錯(cuò)？？
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點(diǎn)綴，這在UI設(shè)計(jì)中嚴(yán)重違背了一致性的原則，會(huì)導(dǎo)致我們的頁(yè)面不夠嚴(yán)謹(jǐn)專業(yè)。
建議正確做法～～
在設(shè)計(jì)圖標(biāo)時(shí)，首先要保證圖標(biāo)風(fēng)格一致，其次在這個(gè)基礎(chǔ)上保證圖標(biāo)的描邊粗細(xì)、視覺(jué)占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)頁(yè)面模塊時(shí)，可以多利對(duì)比度的方式來(lái)體現(xiàn)設(shè)計(jì)的表現(xiàn)力，鮮明直接的色值能夠直接表達(dá)事物的性質(zhì)以及特點(diǎn)，通過(guò)對(duì)比，也能夠更加清晰的強(qiáng)調(diào)設(shè)計(jì)中的重點(diǎn)，這樣給用戶的印象會(huì)更深刻，同樣會(huì)給產(chǎn)品帶來(lái)一定的趣味性。
左側(cè)為什么錯(cuò)？？
左圖中單看視覺(jué)也沒(méi)問(wèn)題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺(jué)表現(xiàn)力較差，在設(shè)計(jì)中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺(jué)效果但不夠強(qiáng)，對(duì)用戶的記憶點(diǎn)不夠深刻。
建議正確做法～～
設(shè)計(jì)到類(lèi)似的模塊時(shí)我們可以利用對(duì)比的關(guān)系，以此突出視覺(jué)元素，通過(guò)顏色焦點(diǎn)引導(dǎo)用戶關(guān)注，強(qiáng)化用戶印象同時(shí)還能增加頁(yè)面的視覺(jué)表現(xiàn)力和氛圍感。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)圖文疊加的卡片或者頁(yè)面時(shí)，我們需要注意不同明度的圖片上，文字識(shí)別是否有阻礙，一般情況會(huì)通過(guò)遮罩方式避免這個(gè)情況。
左側(cè)為什么錯(cuò)？？
左圖中在深色圖片下字體的可讀性是沒(méi)有問(wèn)題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對(duì)復(fù)雜時(shí)便會(huì)影響識(shí)別，第二種情況當(dāng)圖片明度過(guò)高時(shí)文字同樣無(wú)法識(shí)別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無(wú)法看清，嚴(yán)重影響閱讀體驗(yàn)。
建議正確做法～～
在界面設(shè)計(jì)時(shí)如果遇到類(lèi)似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識(shí)別度，或者添加純黑色透明遮罩進(jìn)行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗(yàn)。
實(shí)際產(chǎn)品中的案例
UI設(shè)計(jì)中經(jīng)常會(huì)遇到彈窗，彈窗是需要配合頁(yè)面遮罩來(lái)讓用戶進(jìn)行專注操作，不同的遮罩透明度所帶來(lái)的專注度也不同。
左側(cè)為什么錯(cuò)？？
左圖中我們看到，遮罩的透明度過(guò)低，我案例設(shè)置的是17%，此時(shí)彈窗內(nèi)容與頁(yè)面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來(lái)讓用戶跳脫頁(yè)面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶目標(biāo)，當(dāng)彈窗無(wú)法聚焦時(shí)便很難達(dá)到目標(biāo)，并且視覺(jué)上層級(jí)更加混亂。
建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時(shí)再看彈窗很容易就忽略頁(yè)面內(nèi)容，因?yàn)榛疑礁?，遮擋度越高，用戶跳脫感就越?qiáng)，這樣我們可以讓用戶專注彈窗內(nèi)容，同時(shí)視覺(jué)結(jié)構(gòu)上也區(qū)分很明顯。
實(shí)際產(chǎn)品中的案例
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
企業(yè)多產(chǎn)品線模式下，UI體驗(yàn)文化打造、UI設(shè)計(jì)質(zhì)量品控5個(gè)方面闡述項(xiàng)目快速、規(guī)模化提升多產(chǎn)品線整體體驗(yàn)中的方法論和實(shí)踐經(jīng)驗(yàn)。
SaaS 產(chǎn)品體驗(yàn)要求越來(lái)越高，用戶體驗(yàn)已經(jīng)成為產(chǎn)品競(jìng)爭(zhēng)力的重要組成部分，怎樣在多業(yè)務(wù)線的產(chǎn)品環(huán)境中做好體驗(yàn)設(shè)計(jì)，本文從貼合業(yè)務(wù)線的設(shè)計(jì)規(guī)范、敏捷易用的前端組件庫(kù)、產(chǎn)品研發(fā)協(xié)作流程保障、UI體驗(yàn)文化打造、UI設(shè)計(jì)質(zhì)量品控5個(gè)方面闡述項(xiàng)目快速、規(guī)模化提升多產(chǎn)品線整體體驗(yàn)過(guò)程中方法論和實(shí)踐經(jīng)驗(yàn)。
關(guān)鍵詞：
用戶體驗(yàn)設(shè)計(jì)；UI設(shè)計(jì)規(guī)范；多產(chǎn)品線；體驗(yàn)文化；UI設(shè)計(jì)落地
面對(duì)多產(chǎn)品體系，多產(chǎn)品線，需要積極尋找和探索適合我們客觀情況的最佳實(shí)踐，我們面臨的問(wèn)題有：
1.過(guò)往以功能堆砌為主、基本“能用”，缺乏平臺(tái)規(guī)范和一致性，體驗(yàn)不足。
2.產(chǎn)品線多、體量大。
3.客戶對(duì)產(chǎn)品體驗(yàn)要求越來(lái)越高。
4.產(chǎn)品歷史包袱、修復(fù)改動(dòng)困難。
5.對(duì)用戶體驗(yàn)認(rèn)知不一，協(xié)同、溝通成本高。
6.重復(fù)的開(kāi)發(fā)成本。
7.第三方組件與業(yè)務(wù)的匹配度不佳。
解決以上幾大難題，我們啟動(dòng)了UI 設(shè)計(jì)規(guī)范的搭建、UI組件庫(kù)的開(kāi)發(fā)等，讓規(guī)范和組件庫(kù)成為各產(chǎn)品線堅(jiān)實(shí)底座的一部分，使用戶體驗(yàn)文化賦能前端和產(chǎn)品經(jīng)理，協(xié)同 QA 力量一起推動(dòng)產(chǎn)品體驗(yàn)升級(jí)，以下整理分享的實(shí)踐方法適用于中小型UED團(tuán)隊(duì)支撐復(fù)雜、多業(yè)務(wù)線的企業(yè)，本文嘗試從以下幾個(gè)方面總結(jié)和提煉實(shí)踐經(jīng)驗(yàn)，跟業(yè)界同行探討。
設(shè)計(jì)規(guī)范體系的搭建對(duì)于新的團(tuán)隊(duì)，如何從復(fù)雜海量的業(yè)務(wù)場(chǎng)景中制定出一套適用于自己產(chǎn)品的UI設(shè)計(jì)規(guī)范，是第一道待翻越的高墻，完整的設(shè)計(jì)規(guī)范應(yīng)該是包含視覺(jué)規(guī)范與交互規(guī)范，本文主要針對(duì)設(shè)計(jì)規(guī)范實(shí)踐過(guò)程進(jìn)行闡述。
貼合場(chǎng)景的設(shè)計(jì)規(guī)范：
雖然市面上已經(jīng)有眾多成熟的設(shè)計(jì)規(guī)范體系可供使用，但是當(dāng)前我們所處的產(chǎn)品階段、多業(yè)務(wù) 線以及復(fù)雜的業(yè)務(wù)場(chǎng)景等綜合因素，決定了需要重新搭建一套符合我們自己業(yè)務(wù)場(chǎng)景的設(shè)計(jì)規(guī) 范體系。
UI規(guī)范效益最大化：
一旦我們決定制作規(guī)范，就要把規(guī)范當(dāng)成一個(gè)產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流 程，去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價(jià)值。 依據(jù)規(guī)范效益模型，在規(guī)范的制定中盡可能的提高規(guī)范的通用性至90%，先解決統(tǒng)一性，再解決場(chǎng)景細(xì)分，打造高質(zhì)量通用的模式庫(kù)以提高質(zhì)量和效率，并力求讓更多人從這套設(shè)計(jì)體系中獲益， 從而讓規(guī)范體系發(fā)揮更大的價(jià)值。
UI規(guī)范制定的策略：
明確用戶對(duì)設(shè)計(jì)規(guī)范的訴求，構(gòu)建適合產(chǎn)品的UI設(shè)計(jì)規(guī)范，首先，需要明確規(guī)范體系的用戶群體經(jīng)過(guò)設(shè)計(jì)團(tuán)隊(duì)多輪調(diào)研，確定設(shè)計(jì)規(guī)范面向的目標(biāo)用戶群、基于核心用戶的訴求，為后續(xù)規(guī)范內(nèi)容框架的制定提供依據(jù)。
確定UI設(shè)計(jì)價(jià)值觀：
產(chǎn)品歷史包袱重，系統(tǒng)結(jié)構(gòu)復(fù)雜，在提升用戶體驗(yàn)時(shí)，內(nèi)容表達(dá)「清晰明確」是第一要?jiǎng)?wù)，例如尊重已經(jīng)形成的用戶習(xí)慣，優(yōu)化改造時(shí)，注意版本之間的銜接，讓用戶「清晰明確」，這也是為什么將「清晰明確」作為價(jià)值觀之首，另外提升效率是企業(yè)級(jí)產(chǎn)品用戶體驗(yàn)的永恒主題，同時(shí)兼顧系統(tǒng)的簡(jiǎn)潔與一致。
梳理UI規(guī)范框架：
UI設(shè)計(jì)規(guī)范包括設(shè)計(jì)價(jià)值觀、全局規(guī)則、組件庫(kù)、模式庫(kù)、典型頁(yè)面、移動(dòng)端規(guī)范和設(shè)計(jì)資源框架整理主要從以下3個(gè)方面進(jìn)行：
1.梳理現(xiàn)有組件，剔除不使用的部分 。?
2.同類(lèi)競(jìng)品的框架借鑒，查漏補(bǔ)缺。 ?
3.場(chǎng)景驗(yàn)證，與業(yè)務(wù)場(chǎng)景深度結(jié)合經(jīng)過(guò)充分論證和梳理，對(duì)規(guī)范框架做了重新定義，增補(bǔ)了業(yè)務(wù)缺少的內(nèi)容。
如上圖所示，例如對(duì)高頻的工具欄組件的補(bǔ)充，典型頁(yè)面的補(bǔ)充，增加模式庫(kù)以及全局規(guī)則，當(dāng)前第一個(gè)版本的規(guī)范框架是基于業(yè)務(wù)場(chǎng)景優(yōu)先級(jí)最高的內(nèi)容進(jìn)行制定，更多的規(guī)范內(nèi)容的增加依托于不斷的迭代，逐漸完善規(guī)范框架。
規(guī)范內(nèi)容的制定及評(píng)審：
組件規(guī)范包含：變更記錄、組件定義、何時(shí)使用、組件的類(lèi)型、組件的響應(yīng)。
規(guī)范內(nèi)容制定的原則： ?
1.有明確場(chǎng)景可依。?
2.精簡(jiǎn)不必要的分支 例如在定義表單規(guī)范時(shí)，對(duì)于表單標(biāo)簽的對(duì)齊方式做了統(tǒng)一的約束，標(biāo)簽右對(duì)齊，輸入框左對(duì)齊全局保持統(tǒng)一。
邏輯正確、規(guī)則明確易懂： ?
例如常見(jiàn)的alert （警告提示）名稱調(diào)整為常駐提示，語(yǔ)義更貼合場(chǎng)景，便于理解。
規(guī)則的可拓展性，多場(chǎng)景的兼容性： ?
產(chǎn)品架構(gòu)是PC端到移動(dòng)端的自動(dòng)適配，因此在組件設(shè)計(jì)的時(shí)候需同時(shí)考慮PC端與移動(dòng)端的對(duì)應(yīng)關(guān)系以及兩端場(chǎng)景的兼容性。
協(xié)作及敏捷迭代： ?
規(guī)范發(fā)布后，伴隨著實(shí)際項(xiàng)目的檢驗(yàn)，業(yè)務(wù)場(chǎng)景的擴(kuò)充變化，如何高效的對(duì)設(shè)計(jì)規(guī)范進(jìn)行迭代，決定了設(shè)計(jì)系統(tǒng)能否持續(xù)的走得更遠(yuǎn)，規(guī)范內(nèi)容定期評(píng)審，必須通過(guò)業(yè)務(wù)、技術(shù)、設(shè)計(jì)評(píng)審，確保規(guī)范是可用的、可落地并且易于使用的規(guī)范后期不同的規(guī)范模塊專屬人負(fù)責(zé)，同時(shí)有backup，可以幫助走查復(fù)盤(pán)雙重保障規(guī)范的質(zhì)量。
敏捷易用的前端組件庫(kù)： ?
復(fù)雜的業(yè)務(wù)場(chǎng)景和多產(chǎn)品線特點(diǎn)，快速打造一套敏捷易用、高質(zhì)量并符合實(shí)際業(yè)務(wù)場(chǎng)景的前端組件庫(kù)，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗(yàn)的關(guān)鍵。
復(fù)雜的業(yè)務(wù)場(chǎng)景和多產(chǎn)品線特點(diǎn)，快速打造一套敏捷易用、高質(zhì)量并符合實(shí)際業(yè)務(wù)場(chǎng)景的前端組件庫(kù)，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗(yàn)的關(guān)鍵。
前端組件庫(kù)建立目標(biāo)： ?
1.提高開(kāi)發(fā)效率，對(duì)高頻使用、通用組件進(jìn)行代碼化封裝，避免重復(fù)開(kāi)發(fā)工作。 ?
2.提高開(kāi)發(fā)質(zhì)量，通過(guò)各類(lèi)業(yè)務(wù)場(chǎng)景和業(yè)務(wù)線的錘煉，沉淀組件代碼最佳實(shí)踐。 ?
3.提高產(chǎn)品體驗(yàn)，組件封裝代碼化，減少在多角色協(xié)同中因?yàn)槔斫馄睢⑿畔鬟f問(wèn)題等導(dǎo)致的不確定性和結(jié)果不可控性，不同業(yè)務(wù)線、不行項(xiàng)目、共用一套基礎(chǔ)代碼，保證體驗(yàn)的一致性，組件的組織形式： 結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景和原子設(shè)計(jì)理論，將組件劃分為不同顆粒度：基礎(chǔ)組件、業(yè)務(wù)組件、典型頁(yè)面 組件，以適用于不同研發(fā)場(chǎng)景使用。
1.基礎(chǔ)組件，基礎(chǔ)組件為組件庫(kù)最小顆粒度，構(gòu)成系統(tǒng)界面的基本構(gòu)件。 ?
2.業(yè)務(wù)組件，在基礎(chǔ)組件的基礎(chǔ)上，結(jié)合具有共性業(yè)務(wù)特征的業(yè)務(wù)場(chǎng)景，梳理出具有業(yè)務(wù)特征的 業(yè)務(wù)組件。 ? 3.典型頁(yè)面組件，梳理具有業(yè)務(wù)特點(diǎn)的典型頁(yè)面，相比基礎(chǔ)組件和業(yè)務(wù)組件，典型頁(yè)面更加具體， 為用戶提供具有代表性的內(nèi)容和框架，并準(zhǔn)確描述用戶最終看到的內(nèi)容。如列表和左樹(shù)右表典型 頁(yè)面組件，作為最為常見(jiàn)的頁(yè)面結(jié)構(gòu)，各業(yè)務(wù)場(chǎng)景可復(fù)用頁(yè)面組件，保證了頁(yè)面組件內(nèi)各基礎(chǔ)組 件的一致性，最大程度的實(shí)現(xiàn)不同產(chǎn)品線產(chǎn)品中頁(yè)面體驗(yàn)的一致性。
推進(jìn)前端組件庫(kù)落地執(zhí)行： ?
前期設(shè)計(jì)規(guī)范落地到組件庫(kù)過(guò)程中，面臨諸多問(wèn)題和阻礙，比如開(kāi)發(fā)落地質(zhì)量不高、內(nèi)容遺漏、 各方理解不一致、驗(yàn)收及修復(fù)問(wèn)題不到位等問(wèn)題。處理這些問(wèn)題對(duì)UI團(tuán)隊(duì)資源造成很大消耗， 通過(guò)總結(jié)復(fù)盤(pán)前期組件庫(kù)落地時(shí)的經(jīng)驗(yàn)和教訓(xùn)，梳理落地執(zhí)行流程，在新的協(xié)作流程下，新一 批的組件開(kāi)發(fā)不論在協(xié)作效率和開(kāi)發(fā)質(zhì)量上都有質(zhì)的提升。
分層推進(jìn)： ?
組件庫(kù)開(kāi)發(fā)是一個(gè)持續(xù)迭代的過(guò)程，考慮到組件庫(kù)開(kāi)發(fā)資源極為有限且無(wú)專職負(fù)責(zé)人員，在跟組 件庫(kù)開(kāi)發(fā)團(tuán)隊(duì)協(xié)同過(guò)程中，我們通過(guò)分步開(kāi)發(fā)來(lái)解決組件庫(kù)更新優(yōu)化的問(wèn)題并通過(guò)不斷優(yōu)化協(xié)作流程來(lái)助力組件庫(kù)高效落地。
前端組件庫(kù)分步開(kāi)發(fā)原則： ?
1.優(yōu)先級(jí)原則，優(yōu)先開(kāi)發(fā)適用于業(yè)務(wù)線普適場(chǎng)景的組件。 ?
2.緊急性原則，對(duì)于急需的業(yè)務(wù)線所需組件優(yōu)先開(kāi)發(fā)。 ?
3.快速可實(shí)現(xiàn)原則，開(kāi)發(fā)實(shí)現(xiàn)成本高的組件暫緩處理。
自查走查驗(yàn)收： ?
組件UI責(zé)任人梳理出下屬組件需開(kāi)發(fā)落地的細(xì)節(jié)點(diǎn)，整理為文檔，待開(kāi)發(fā)人員完成組件開(kāi)發(fā)后，自行參照UI提供的自查文檔，查漏補(bǔ)缺，保障進(jìn)入U(xiǎn)I驗(yàn)收環(huán)節(jié)的前端組件不會(huì)出現(xiàn)較多的缺陷，降低后期走查和溝通修改的工作量，同時(shí)監(jiān)督開(kāi)發(fā)人員提高組件落地還原度和質(zhì)量。
組件庫(kù)的持續(xù)迭代： ?
UI團(tuán)隊(duì)通過(guò)一套標(biāo)準(zhǔn)的流程來(lái)把控組件庫(kù)迭代的質(zhì)量，在日常工作中經(jīng)常會(huì)收到產(chǎn)品經(jīng)理或項(xiàng)目 方提出新的組件需求或?qū)ΜF(xiàn)有組件的優(yōu)化。UI部門(mén)作為推動(dòng)組件庫(kù)搭建的核心環(huán)節(jié)，需要以全局 和更深入的視角加以判斷把關(guān)，保證前端組件庫(kù)內(nèi)容的普適性和高質(zhì)量，避免組件庫(kù)內(nèi)容冗余， 降低研發(fā)維護(hù)成本。
產(chǎn)品研發(fā)協(xié)作流程保障： ?
好的過(guò)程是好的結(jié)果的有力保障，一個(gè)業(yè)務(wù)需求從產(chǎn)生到開(kāi)發(fā)落地需要經(jīng)過(guò)多角色協(xié)同、一系 列環(huán)節(jié)。必須依靠規(guī)范的研發(fā)協(xié)作流程，確保各角色清楚自己職責(zé)以及如何跟上下游銜接，同 時(shí)我們也希望協(xié)作流程能夠確保設(shè)計(jì)資源可以向重點(diǎn)業(yè)務(wù)模塊傾斜，以及發(fā)揮各個(gè)角色可以發(fā) 揮的作用去共同提升產(chǎn)品體驗(yàn)。
UED團(tuán)隊(duì)建立之初，我們面臨的首要問(wèn)題是：需求隨機(jī)，完全取決于各產(chǎn)品線和產(chǎn)品經(jīng)理 個(gè)人，為了解決這個(gè)問(wèn)題，我們制定了UI融入研發(fā)體系的流程以解決合理、有效利用UI資 源的問(wèn)題。
企業(yè)級(jí)產(chǎn)品特點(diǎn)、多業(yè)務(wù)線、大量面向管理員用戶的具有相似頁(yè)面結(jié)構(gòu)和交互模式的業(yè)務(wù) 模塊、產(chǎn)品經(jīng)理跟交互團(tuán)隊(duì)人員配比等因素都決定了并非所有需求都需要流轉(zhuǎn)到UI團(tuán)隊(duì)進(jìn) 行設(shè)計(jì)，在判斷哪些需求需要流轉(zhuǎn)至UI團(tuán)隊(duì)設(shè)計(jì)時(shí)，我們給出了如下指導(dǎo)性方向： ?
1.用戶量角度，大量終端用戶使用的場(chǎng)景，例如訂票、報(bào)銷(xiāo)、采購(gòu)頁(yè)面 。 ?
2.用戶重要程度角度，核心、重要用戶使用的場(chǎng)景 eg.公司領(lǐng)導(dǎo)、決策層。 ?
3.通用性角度，通用組件或框架，需要UI通盤(pán)考慮各個(gè)業(yè)務(wù)線場(chǎng)景需求進(jìn)行設(shè)計(jì)。 其他需求則主要由產(chǎn)品經(jīng)理進(jìn)行設(shè)計(jì)，UX以評(píng)審方式輕度參與。
協(xié)作流程迭代，UI驗(yàn)收成為必要一環(huán)： 隨后我們又面臨新的問(wèn)題：設(shè)計(jì)還原度差，被公司老板生動(dòng)的形容為：看設(shè)計(jì)稿是“精裝修”， 開(kāi)發(fā)落地后就成了“毛坯房”了。為盡可能確保設(shè)計(jì)還原質(zhì)量，我們?cè)谘邪l(fā)流程中明確了所有涉 及前端頁(yè)面的功能需求都需要在研發(fā)協(xié)同工具中流轉(zhuǎn)到UI負(fù)責(zé)人驗(yàn)收，在產(chǎn)品團(tuán)隊(duì)TAPD中記 錄UI缺陷、標(biāo)明嚴(yán)重程度，對(duì)于 “嚴(yán)重” 級(jí)別以上UI缺陷，禁止發(fā)版。
UI工期評(píng)估合理化：
為了既能盡力配合各產(chǎn)品線迭代計(jì)劃又要爭(zhēng)取合理UI設(shè)計(jì)時(shí)間、保證產(chǎn)出質(zhì)量，合理評(píng)估設(shè)計(jì)周期對(duì)UI人力管理尤其重要。對(duì)此，我們對(duì)設(shè)計(jì)需求分成了ABC三級(jí)進(jìn)行評(píng)估。 對(duì)于A和B級(jí)需求，通常模塊較大，先有UI設(shè)計(jì)方案再去分期迭代開(kāi)發(fā)，對(duì)于這兩類(lèi)需求，在評(píng)估 模型中給出了大致工期概念，比如以月為單位，大于1個(gè)月或2個(gè)月。
對(duì)于C級(jí)需求，通常為產(chǎn)品經(jīng)理先排進(jìn)某個(gè)迭代再來(lái)提UI設(shè)計(jì)需求，設(shè)計(jì)范圍相對(duì)明確，我們則結(jié)合典型頁(yè)面數(shù)量因子和設(shè)計(jì)難度因子給出了UI工期大概評(píng)估公式，以天為單位。 ?
1.設(shè)計(jì)難度因子：根據(jù)業(yè)務(wù)線的復(fù)雜程度而定，范圍為（0.8~1.5）。 ?
2.典型頁(yè)面數(shù)量因子：評(píng)估需求范圍規(guī)模（N）。
UI設(shè)計(jì)團(tuán)隊(duì)在協(xié)作過(guò)程中面臨諸多挑戰(zhàn)：產(chǎn)品線多、產(chǎn)品邏輯復(fù)雜、研發(fā)鏈路長(zhǎng)、各級(jí)人員對(duì)產(chǎn)品認(rèn)知及重視程度不一、好的體驗(yàn)設(shè)計(jì)難落地、溝通成本高等問(wèn)題，想要解決這些問(wèn)題，若僅靠UI團(tuán)隊(duì)自身力量是不夠的，需要?jiǎng)訂T公司各個(gè)環(huán)節(jié)和人員重視用戶體驗(yàn)，共同促進(jìn)產(chǎn) 品體驗(yàn)提升。
搭建體驗(yàn)文化灌溉機(jī)制：
UI部門(mén)通過(guò)多維度的體驗(yàn)知識(shí)內(nèi)容矩陣、多渠道多場(chǎng)景全員覆蓋，普及和加深各級(jí)對(duì)產(chǎn)品體驗(yàn) 價(jià)值的認(rèn)識(shí)，提升產(chǎn)品體驗(yàn)思考力和洞察力，幫助企業(yè)以新的視角思考業(yè)務(wù)、產(chǎn)品研發(fā)和用戶 體驗(yàn)的關(guān)系，賦能產(chǎn)品經(jīng)理及研發(fā)人員高質(zhì)量的輸出，“以用戶為中心”和“打造產(chǎn)品極致體驗(yàn)” 的價(jià)值觀根植與企業(yè)文化中，指導(dǎo)研發(fā)流程中各項(xiàng)工作最終影響到產(chǎn)品的戰(zhàn)略層、范圍層、結(jié) 構(gòu)層、框架層和表現(xiàn)層這5個(gè)產(chǎn)品體驗(yàn)維度，以實(shí)現(xiàn)企業(yè)產(chǎn)品的“極致產(chǎn)品體驗(yàn)”目標(biāo)。 通過(guò)搭建體驗(yàn)文化灌溉機(jī)制，提升全員體驗(yàn)意識(shí)，能為產(chǎn)品研發(fā)帶來(lái)長(zhǎng)久的價(jià)值： ?
1.提高設(shè)計(jì)還原度 ?
2.減少培訓(xùn)成本 ?
3.提升跨部門(mén)溝通效率 ?
4.提升UI團(tuán)隊(duì)影響力 ?
5.提升客戶滿意度
體驗(yàn)文化落地實(shí)踐：
針對(duì)不同類(lèi)型的體驗(yàn)知識(shí)，我們采取不同的傳播渠道進(jìn)行透，以期達(dá)到最好的效果，避免形式化， 將體驗(yàn)文化滲透、學(xué)習(xí)落到實(shí)處，最終影響產(chǎn)品研發(fā)的各個(gè)環(huán)節(jié)。
以下為UI團(tuán)隊(duì)在企業(yè)體驗(yàn)文化 推廣的主要渠道和方法： ?
極致體驗(yàn)公眾號(hào)主要發(fā)布產(chǎn)品體驗(yàn)的基礎(chǔ)原理，體驗(yàn)價(jià)值、項(xiàng)目復(fù)盤(pán)、常見(jiàn)體驗(yàn)問(wèn)題等深度長(zhǎng)文。讓公司各級(jí)人 員認(rèn)識(shí)用戶體驗(yàn)及價(jià)值，讓用戶體驗(yàn)理念深入人心。 ?
體驗(yàn)知識(shí)小卡片整理產(chǎn)品體驗(yàn)小的知識(shí)點(diǎn)，閱讀學(xué)習(xí)成本低。利用員工碎片時(shí)間，對(duì)細(xì)小體驗(yàn)知識(shí)點(diǎn)的學(xué)習(xí)，積 跬步，至千里。 ?
直播宣講針對(duì)重點(diǎn)且復(fù)雜的產(chǎn)品體驗(yàn)內(nèi)容，如交互規(guī)范宣講、重點(diǎn)問(wèn)題復(fù)盤(pán)、產(chǎn)品經(jīng)理及開(kāi)發(fā)人員應(yīng)知應(yīng) 會(huì)的知識(shí)點(diǎn)，采用宣講直播的方式，更好的對(duì)內(nèi)容進(jìn)行詳細(xì)解說(shuō)和疑難問(wèn)題溝通。 ?
體驗(yàn)調(diào)研分享UI部門(mén)成員對(duì)核心競(jìng)品進(jìn)行體驗(yàn)調(diào)研，整理分析后對(duì)產(chǎn)品經(jīng)理及相關(guān)人員進(jìn)行分享，賦能產(chǎn)品經(jīng) 理，為產(chǎn)品的體驗(yàn)設(shè)計(jì)提供新的思路。
UI團(tuán)隊(duì)專業(yè)水平一定程度上決定了公司產(chǎn)品體驗(yàn)的上限，持續(xù)提升UI自身專業(yè)輸出能力可以從源頭提升公司產(chǎn)品體驗(yàn)。
設(shè)計(jì)自查：
企業(yè)級(jí)產(chǎn)品的大量體驗(yàn)問(wèn)題都是設(shè)計(jì)基礎(chǔ)問(wèn)題。因此需要設(shè)計(jì)師不論在內(nèi)審前，還是內(nèi)審過(guò)程中都要牢記設(shè)計(jì)原則，查漏補(bǔ)缺，守住底線。我們?cè)诓块T(mén)內(nèi)部制定了一套適合企業(yè)產(chǎn)品的UI自查表來(lái)檢查設(shè)計(jì)方案，通過(guò)這些自查點(diǎn)來(lái)避免產(chǎn)品中出現(xiàn)基礎(chǔ)體驗(yàn)問(wèn)題，從UI設(shè)計(jì)師自己這里 把好第一道關(guān)。
在日常工作中，UI自查表始終占據(jù)工區(qū)的醒目位置。在評(píng)審過(guò)程中，大家也會(huì)通過(guò)線上文檔的形 式來(lái)對(duì)設(shè)計(jì)原則的條目進(jìn)行逐一檢查。
做好UI內(nèi)部評(píng)審：
設(shè)計(jì)團(tuán)隊(duì)內(nèi)評(píng)審（Design critique）是幾乎所有國(guó)內(nèi)外設(shè)計(jì)團(tuán)隊(duì)的普遍、經(jīng)典做法，可以有效提 高設(shè)計(jì)產(chǎn)出水平、保證團(tuán)隊(duì)對(duì)外輸出質(zhì)量。方法是普適的，但具體執(zhí)行時(shí)如何做才能有更好的效果卻各有各異。 在如何做好內(nèi)部評(píng)審上，我們進(jìn)行了如下嘗試。 從“全員參與” 到 “組成內(nèi)部評(píng)審委員會(huì)” 團(tuán)隊(duì)內(nèi)評(píng)審時(shí)邀請(qǐng)全員參加，但發(fā)現(xiàn)只有少數(shù)同事發(fā)言，另外一些同事因資歷淺、不了解評(píng)審產(chǎn)品或者積極性不高給不出建議。同時(shí)隨著團(tuán)隊(duì)成員數(shù)量從幾個(gè)增加到十幾個(gè)，評(píng)審會(huì)議的時(shí)間成 本大大增加。
選取團(tuán)隊(duì)內(nèi)相對(duì)資深和積極提出問(wèn)題、建議的同事組成內(nèi)部評(píng)審委員會(huì)，以月為周期輪流進(jìn)行， 可以有效分散評(píng)審委員在團(tuán)隊(duì)內(nèi)部評(píng)審上的工作負(fù)荷，并明確一次UI內(nèi)部評(píng)審除了內(nèi)部評(píng)審委員 會(huì)還有哪些關(guān)聯(lián)同事需要參加。 關(guān)于邀請(qǐng)?jiān)u審內(nèi)容關(guān)聯(lián)同事，比如“消息中心” UI評(píng)審跟另外一位同事負(fù)責(zé)的“討論消息”有關(guān)聯(lián)，則需要邀請(qǐng)這位同事一起評(píng)審，以便發(fā)現(xiàn)關(guān)聯(lián)問(wèn)題，整體考慮設(shè)計(jì)方案。
以上參與評(píng)審機(jī)制明確在團(tuán)隊(duì)內(nèi)部協(xié)作工具上，做到人人清楚。另外，對(duì)于評(píng)審建議，要做到有 記錄、有回應(yīng)、有跟蹤，確保有效發(fā)揮了內(nèi)部評(píng)審的價(jià)值。
UI設(shè)計(jì)師的能力模型：不言而喻，UI設(shè)計(jì)師自身能力的培養(yǎng)是UI品控的重要一環(huán)。因此對(duì)于設(shè)計(jì)師能力培養(yǎng)通道上，我 們引入了以下模型。
我們將UI設(shè)計(jì)師能力歸納成了3x3能力矩陣。這可以設(shè)計(jì)師在工作中也可以有目的提升自身薄弱環(huán)節(jié)，同時(shí)也讓企業(yè)對(duì)UI設(shè)計(jì)師的要求更加清晰，除此之外，我們要求UI設(shè)計(jì)師也需要多了解業(yè)務(wù)和前端知識(shí)，往前多走一步，跟上下游角色更好的銜接，一方面，UI設(shè)計(jì)師需要理解業(yè)務(wù)，要能夠有半個(gè)產(chǎn)品經(jīng)理的業(yè)務(wù)知識(shí)儲(chǔ)備， 如果能站在更高的行業(yè)視角對(duì)自己所服務(wù)的業(yè)務(wù)領(lǐng)域（向 業(yè)務(wù)產(chǎn)品經(jīng)理再邁進(jìn)一點(diǎn)）有一定的理解是更好的了，另外一方面，UI設(shè)計(jì)師跟自己的下游-前端 開(kāi)發(fā)工程師也需要很好的銜接上，知道相關(guān)前端技術(shù)概念、基本頁(yè)面布局和交互實(shí)現(xiàn)邏輯、方法，能夠無(wú)縫地將界面和交互設(shè)計(jì)翻譯成前端可理解的語(yǔ)言。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
2022 原創(chuàng)輸出第 15 篇，我們互相努力。
作為設(shè)計(jì)師都會(huì)時(shí)刻關(guān)注設(shè)計(jì)趨勢(shì)，以 UI 設(shè)計(jì)來(lái)說(shuō)每年都會(huì)出現(xiàn)很多相關(guān)的趨勢(shì)總結(jié)，基本是結(jié)合預(yù)測(cè)和實(shí)際相結(jié)合的。趨勢(shì)可以讓我們把控設(shè)計(jì)的方向，帶給用戶更好的感官體驗(yàn)。
最近黑馬哥結(jié)合落地產(chǎn)品所呈現(xiàn)出來(lái)的設(shè)計(jì)趨勢(shì)，進(jìn)行了這方面的探索，今天以其中之一的趨勢(shì)-極光風(fēng)和大家先聊一聊。
一、極光風(fēng)趨勢(shì)的來(lái)源
二、UI 場(chǎng)景中的極光風(fēng)設(shè)計(jì)
三、實(shí)現(xiàn)極光風(fēng)設(shè)計(jì)的方法
四、極光風(fēng)案例實(shí)戰(zhàn)
五、小結(jié)
極光（Aurora），是一種絢麗多彩的等離子體（發(fā)光）現(xiàn)象，在夜間出現(xiàn)燦爛美麗的光輝。在南極被稱為南極光，在北極被稱為北極光，視為自然界中最漂亮的奇觀之一。（來(lái)源于百度百科）
這樣的自然奇觀被攝影師捕捉到靜態(tài)的影像中，設(shè)計(jì)師再結(jié)合這樣的影像作品，視覺(jué)化之后出現(xiàn)在了一些設(shè)計(jì)作品中。在 2021 年被廣泛運(yùn)用，形成一種流行的視覺(jué)風(fēng)格。在眾多的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，也經(jīng)常運(yùn)用這種類(lèi)似極光的視覺(jué)影像風(fēng)格，稱之為 Aurora UI。
在產(chǎn)品設(shè)計(jì)底層需求獲得滿足之后，感光體驗(yàn)的提升被重視，視覺(jué)感的強(qiáng)化對(duì) UI 設(shè)計(jì)師來(lái)說(shuō)至關(guān)重要?；诓桓淖儽旧淼慕Y(jié)構(gòu)層，在背景層和裝飾性元素上面發(fā)揮，使得 Aurora UI 得到了發(fā)揮的空間。
富有創(chuàng)意的極光風(fēng)在背景層和裝飾性元素上面發(fā)揮得淋漓盡致，助推了其成為 UI 設(shè)計(jì)趨勢(shì)的關(guān)鍵，下面就讓我們一起來(lái)看看落地產(chǎn)品中的 Aurora UI。
由于在眾多落地產(chǎn)品中被廣泛運(yùn)用，形成了近些年影響 UI 設(shè)計(jì)趨勢(shì)的風(fēng)格。極光風(fēng)和彌散光在表現(xiàn)形式上類(lèi)似，也有設(shè)計(jì)師將該風(fēng)格歸類(lèi)為彌散光，下面就看一下具體的運(yùn)用場(chǎng)景。
2.1、強(qiáng)化導(dǎo)航欄設(shè)計(jì)的視覺(jué)感
如果想要強(qiáng)化頂部導(dǎo)航欄的視覺(jué)感，通常是利用品牌色作為背景顏色，這樣也會(huì)顯得頂部比重較大。通過(guò)白色或者淺灰色作為背景屬于比較弱化的處理方式，而極光風(fēng)的處理形式處于輕重之間的理想狀態(tài)。不僅可以豐富視覺(jué)表現(xiàn)力，也能使得整體風(fēng)格更加年輕化。
2.2、強(qiáng)化個(gè)人中心頂部視覺(jué)區(qū)域
隨著互聯(lián)網(wǎng)用戶年輕化的趨勢(shì)，在配色上面逐步趨近于年輕化，眾多產(chǎn)品在個(gè)人中心界面的設(shè)計(jì)上面亦是如此。利用極光風(fēng)效果呈現(xiàn)出的設(shè)計(jì)比較符合年輕化的趨勢(shì)，可以是同色系的飽和度變化，也可以是不同色相的相互融合。利用低飽和度高明度的配色原則，使得整體的視覺(jué)感更加輕量化，視覺(jué)效果清新自然且通透力更強(qiáng)。
也有基于品牌色結(jié)合極光風(fēng)進(jìn)行融合，相對(duì)單色來(lái)說(shuō)效果更加豐富自然，使得背景的變化更加多樣。
2.3、豐富背景設(shè)計(jì)的視覺(jué)感
除了在頂部區(qū)域進(jìn)行運(yùn)用以外，也有一些產(chǎn)品會(huì)在背景層面進(jìn)行強(qiáng)化，相較于白色或者淺灰色的背景來(lái)說(shuō)色彩感更豐富。運(yùn)用到整個(gè)界面背景層相對(duì)比較少，在局部背景層上的運(yùn)用比較多些，可以強(qiáng)化局部模塊的視覺(jué)感。
2.4、點(diǎn)綴彈窗設(shè)計(jì)局部
極光風(fēng)的設(shè)計(jì)表現(xiàn)也會(huì)出現(xiàn)在一些局部功能的細(xì)節(jié)處，比如運(yùn)用到彈窗的色彩處理中，作為背景局部或者插畫(huà)部分等的襯托。帶來(lái)的視覺(jué)感更加親和自然，也不會(huì)過(guò)度干擾其他元素的呈現(xiàn)。
2.5、強(qiáng)化卡片式設(shè)計(jì)局部
卡片式設(shè)計(jì)也是近些年運(yùn)用比較多的設(shè)計(jì)趨勢(shì)之一，基本是以白色卡片居多，具有整合信息的好處。在卡片的邊緣位置強(qiáng)化色彩，可以使得卡片色彩更加豐富，也有一些電商產(chǎn)品是起到與商品形成色彩呼應(yīng)的作用。
2.6、突出搜索設(shè)計(jì)的差異化
搜索框的設(shè)計(jì)在大部分的認(rèn)知里面都是白色或者淺灰色，也有一些是帶有邊框的形式，利用低飽和度高明度的配色原則來(lái)進(jìn)行設(shè)計(jì)，帶來(lái)的效果更加年輕化。也是一種差異化設(shè)計(jì)的嘗試，打破常規(guī)的設(shè)計(jì)認(rèn)知。也可以舉一反三，在一些按鈕或者標(biāo)簽設(shè)計(jì)中運(yùn)用。
2.7、分類(lèi)標(biāo)簽的裝飾設(shè)計(jì)
這是一個(gè)裝飾性的設(shè)計(jì)嘗試，在突出模塊分類(lèi)的當(dāng)前狀態(tài)時(shí)，通常都會(huì)通過(guò)裝飾元素來(lái)進(jìn)一步強(qiáng)化?？梢酝ㄟ^(guò)字體粗細(xì)、顏色深淺、字體大小和裝飾元素來(lái)強(qiáng)化，裝飾元素除了線段和一些圖形元素以外，極光風(fēng)的背景元素也是一種不錯(cuò)的表現(xiàn)手法。
2.8、圖標(biāo)設(shè)計(jì)中的運(yùn)用
運(yùn)用到圖標(biāo)設(shè)計(jì)中通常是出現(xiàn)在質(zhì)感類(lèi)圖標(biāo)，輔助強(qiáng)化圖標(biāo)的色彩感和層次感。有時(shí)候無(wú)法通過(guò)常規(guī)的漸變形式達(dá)到要求，就可以嘗試運(yùn)用極光風(fēng)的處理技巧，將顏色通過(guò)模糊和剪切蒙版的形式融入到圖標(biāo)中，可以使得圖標(biāo)色彩豐富和強(qiáng)化光影變化。
2.9、深色卡片色彩強(qiáng)化
以上案例屬于在淺色或者白色的環(huán)境中運(yùn)用，在深色主題中依然會(huì)用到極光風(fēng)進(jìn)行設(shè)計(jì)強(qiáng)化。在界面背景和卡片背景中運(yùn)用，效果也是非常不錯(cuò)的，可以給深色的卡片一些色彩感和豐富度。
2.10、作品包裝中的背景強(qiáng)化
除了在 UI 設(shè)計(jì)場(chǎng)景中運(yùn)用以外，最近發(fā)現(xiàn)在設(shè)計(jì)師作品包裝中的運(yùn)用也是非常普遍，用于背景層的渲染帶來(lái)的視覺(jué)體驗(yàn)度也是非常不錯(cuò)的。在作品包裝環(huán)節(jié)中作為背景運(yùn)用和局部裝飾，也有在封面設(shè)計(jì)中重點(diǎn)運(yùn)用，使得作品集緊貼設(shè)計(jì)趨勢(shì)，提高作品的打開(kāi)率。
2.11、其他場(chǎng)景中的應(yīng)用普及
在 UI 場(chǎng)景還有很多運(yùn)用場(chǎng)景，這里僅為拋磚引玉，無(wú)論是作為背景強(qiáng)化還是元素裝飾，都能帶給用戶更加年輕化的感官體驗(yàn)。
除了在 UI 場(chǎng)景中呈現(xiàn)以外，極光風(fēng)的設(shè)計(jì)也會(huì)出現(xiàn)在更多其它場(chǎng)景中。在 Banner 設(shè)計(jì)、海報(bào)設(shè)計(jì)、專題頁(yè)設(shè)計(jì)等視覺(jué)設(shè)計(jì)層面也是運(yùn)用廣泛，是一個(gè)影響范圍比較廣的設(shè)計(jì)趨勢(shì)之一。
通過(guò)一些線上的案例欣賞和分析，相信大家對(duì)于極光風(fēng)在 UI 場(chǎng)景中運(yùn)用都有一定的了解，在項(xiàng)目設(shè)計(jì)中也能輕松嘗試。這一類(lèi)風(fēng)格從技法實(shí)現(xiàn)的角度來(lái)說(shuō)并不難，關(guān)鍵因素在于控制好配色原理，下面就為大家總結(jié)幾種實(shí)現(xiàn)的方法。
方法 01 ：利用不透明度漸變?nèi)诤?/strong>
不透明度漸變?cè)谠O(shè)計(jì)中的運(yùn)用比較普遍，利用的是不透明度從 100%-0% 之間形成漸變，讓色彩逐漸消失或者淡化。
畫(huà)一個(gè)圓形，選擇徑向漸變，漸變兩端的顏色選擇同一個(gè)色相。然后設(shè)置中間顏色不透明度為 100%，另一個(gè)顏色不透明度設(shè)置為 0%，這里顏色適合選擇低飽和度的范圍。同樣的方法反復(fù)繪制幾個(gè)不同顏色的圓形進(jìn)行組合，即可完成極光風(fēng)背景設(shè)計(jì)。
方法 02 ：利用模糊度變化融合
這個(gè)方法是結(jié)合了形狀和模糊設(shè)置（高斯模糊等），繪制幾個(gè)大小不等的圓形進(jìn)行排版組合，然后選擇所有圓形一起進(jìn)行模糊設(shè)置。形狀的繪制上面最好是有大小差異，排版錯(cuò)落有致，這樣形成的效果比較富有變化。
在顏色的選擇上面需要根據(jù)背景的強(qiáng)化程度選擇，低飽和度的顏色融合性更高，適合作為弱化性質(zhì)的背景使用。
方法 03 ：利用背景模糊融合
背景模糊在 Sketch、Figma 等設(shè)計(jì)軟件中有該功能，是一個(gè)影響設(shè)計(jì)趨勢(shì)較為常用的功能，特別是在實(shí)現(xiàn)玻璃質(zhì)感和一些質(zhì)感圖標(biāo)上面非常實(shí)用。
在背景層繪制圖形，顏色和形狀均可自由發(fā)揮，然后再繪制一個(gè)形狀作為調(diào)節(jié)層，調(diào)節(jié)層是用于控制模糊效果的。在調(diào)節(jié)層的形狀上面設(shè)置一個(gè)帶有透明度的顏色（必須要帶有透明度），然后再設(shè)置背景模糊，背景模糊數(shù)值的大小決定模糊的程度，不透明度的大小決定整體效果的亮度。
方法 04 ：利用圖片模糊融合
以上的方法都需要進(jìn)行配色處理，如果色感方面比較薄弱的設(shè)計(jì)師，也可以挑選一些不錯(cuò)的圖片來(lái)實(shí)現(xiàn)極光風(fēng)效果。
挑選一張色彩符合要求的圖片，然后在 Photoshop 等設(shè)計(jì)軟件中執(zhí)行高斯模糊，半徑值的多少?zèng)Q定了模糊之后的自然度。我們?cè)谶x擇圖片的過(guò)程中除了整張圖片進(jìn)行操作以外，也可以截取其中的一部分，也許可以帶來(lái)意想不到的效果。
除了這幾個(gè)方法以外還有更多不一樣的實(shí)現(xiàn)方法，大家可以根據(jù)自己的探索選擇最適合自己的方法。根據(jù)使用軟件的差別選擇最簡(jiǎn)單的形式，根據(jù)想要實(shí)現(xiàn)的效果選擇最靈活的方法，這樣才能便于后期的反復(fù)調(diào)整。
五、小結(jié)
研究落地產(chǎn)品的設(shè)計(jì)細(xì)節(jié)和視覺(jué)趨勢(shì)，將有助于提高我們對(duì)于當(dāng)前有效設(shè)計(jì)趨勢(shì)的把控，而不僅僅只是停留在概念化的預(yù)測(cè)階段，而是行之有效的真實(shí)案例。
極光風(fēng)是近些年運(yùn)用在落地產(chǎn)品中的 UI 設(shè)計(jì)趨勢(shì)之一，通過(guò)大量案例驗(yàn)證之后的有效方法，希望大家能夠掌握并靈活運(yùn)用到項(xiàng)目設(shè)計(jì)中。落地產(chǎn)品的 UI 設(shè)計(jì)趨勢(shì)還有很多，本次分享的僅為拋磚引玉，后續(xù)將和大家探討更多的有效設(shè)計(jì)趨勢(shì)，輔助提高我們的設(shè)計(jì)能力。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
搜索框的設(shè)計(jì)并不簡(jiǎn)單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。
你可能認(rèn)為，搜索不就是一個(gè)矩形框+放大鏡圖標(biāo)再加一個(gè)占位符不就搞定了嗎？
經(jīng)過(guò)多年的設(shè)計(jì)工作頻繁設(shè)計(jì)搜索功能后，我發(fā)現(xiàn)在不同類(lèi)型的產(chǎn)品中搜索框的交互方式、視覺(jué)樣式都有所不同，且用戶在搜索前、搜索中、搜索后都需要注意用戶在搜索各個(gè)流程中的可能操作，包括正向流程、反向流程。
搜索框的設(shè)計(jì)并不簡(jiǎn)單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。
友情提示：文章尾部有福利相送，不要錯(cuò)過(guò)~
搜索是用戶將查詢的信息輸入搜索器中，搜索引擎就會(huì)在約定的規(guī)則下將獲取到的信息反饋給用戶的過(guò)程。
搜索是B端產(chǎn)品中非常重要的一個(gè)功能模塊，通過(guò)搜索框用戶可以快速找到或者篩選出自己想要的內(nèi)容，在引導(dǎo)用戶走向方面起到了絕對(duì)性的作用。
體驗(yàn)設(shè)計(jì)中有個(gè)概念叫用戶分層，即便是同一個(gè)頁(yè)面，我們也需要去細(xì)分不同的場(chǎng)景對(duì)用戶做分層，為不同的用戶做設(shè)計(jì)，搜索功能就是最好的為有明確目標(biāo)的用戶分層的設(shè)計(jì)。
搜索功能的用戶分層可分為幾種場(chǎng)景：
搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱？編號(hào)？等等...
有明確目的型用戶在進(jìn)行了搜索這個(gè)行為后，便生成了搜索歷史。因此，我們可以通過(guò)挖掘用戶搜索行為背后的目的，來(lái)分析為什么使用不同的布局。
模糊搜索使用的頻率居多，畢竟有時(shí)候用戶不一定可以精準(zhǔn)的記住想要搜索的準(zhǔn)確信息。不過(guò)也不是絕對(duì)的，兩者皆可選擇，可根據(jù)產(chǎn)品場(chǎng)景選擇。
搜索功能可以簡(jiǎn)單地輸入，快速輸出，只要幾個(gè)關(guān)鍵字就可以獲得符合用戶需求的內(nèi)容，將原有的用戶行為成本轉(zhuǎn)移給系統(tǒng)，從而讓使用體驗(yàn)更加快捷、輕松。
同時(shí)語(yǔ)音輸入和拍照搜索進(jìn)一步降低了用戶行為門(mén)檻。
搜索功能可以幫助用戶快速定位信息，從而提高了用戶對(duì)內(nèi)容的觸達(dá)效率。常見(jiàn)的例子就是：bi?r用戶有明確的購(gòu)物需求時(shí)，不需要一步步點(diǎn)擊商品分類(lèi)，選擇商品類(lèi)型、品牌等信息，就可以快速直達(dá)自己所需的商品。
所以，搜索框的體驗(yàn)如何，決定著B(niǎo)端產(chǎn)品解決問(wèn)題的能力、效率以及用戶的使用頻率。
好的搜索框一方面能幫助用戶節(jié)約時(shí)間成本，讓用戶在大量且復(fù)雜的信息中篩查所需目標(biāo)，提升用戶體驗(yàn)；另一方面，還能協(xié)助產(chǎn)品收集用戶行為目標(biāo)并做好數(shù)據(jù)埋點(diǎn)，為后期的更新迭代提供強(qiáng)有力的依據(jù)。
除了設(shè)計(jì)方式外，搜索還涉及到結(jié)果信息的數(shù)據(jù)匹配規(guī)則，受到算法精準(zhǔn)性、商業(yè)化干預(yù)程度的影響，設(shè)計(jì)師同樣需要關(guān)注搜索結(jié)果如何更好地匹配用戶的精確搜索、模糊搜索需求，以從信息設(shè)計(jì)層面提升用戶體驗(yàn)。
搜索流程，即搜索前、搜索中、搜索后的頁(yè)面跳轉(zhuǎn)以及搜索框形態(tài)的變化。
對(duì)應(yīng)的就有：搜索入口——搜索推薦頁(yè)——搜索聯(lián)想頁(yè)——搜索結(jié)果頁(yè)——搜索結(jié)果頁(yè)返回。
設(shè)計(jì)師想要設(shè)計(jì)流暢的搜索體驗(yàn)是無(wú)法避開(kāi)梳理搜索流程的，考慮完整的搜索鏈路和用戶關(guān)鍵體驗(yàn)路徑，并且設(shè)計(jì)出對(duì)應(yīng)的所有細(xì)節(jié)，將搜索功能的價(jià)值發(fā)揮到最大化。
對(duì)于搜索系統(tǒng)來(lái)說(shuō)，整個(gè)流程可以分為三步，分別是：
B 端業(yè)務(wù)中搜索使用的場(chǎng)景有兩類(lèi)：一類(lèi)是全局搜索，一類(lèi)是頁(yè)面局部搜索（常見(jiàn)的有列表搜索、表單搜索）。
對(duì)于B端系統(tǒng)中模塊分類(lèi)較多，所涉及到的內(nèi)容比較全面的，一般會(huì)選擇全局搜索，全局搜索是通過(guò)關(guān)鍵詞匹配全局范圍內(nèi)的信息來(lái)搜索的。
優(yōu)勢(shì)：無(wú)學(xué)習(xí)門(mén)檻，用戶無(wú)需考慮內(nèi)容對(duì)應(yīng)的分類(lèi)只需輸入關(guān)鍵詞；
劣勢(shì)：精準(zhǔn)度不夠高；搜索出來(lái)內(nèi)容泛；需用戶二次查找目標(biāo)內(nèi)容。
注意：設(shè)計(jì)全局搜索時(shí)要注意搜索后的結(jié)果展示邏輯，如果分類(lèi)較多，界面還可以根據(jù)分類(lèi)tab分別歸類(lèi)不同。
tips：搜索功能在頁(yè)面中的重要程度及搜索范圍，決定了搜索的位置和樣式。
目前大部分網(wǎng)站在布局搜索框位置時(shí)，大致遵循以下幾個(gè)規(guī)則：頁(yè)面居中、頁(yè)面頂部居中、頁(yè)面頂部右邊、頁(yè)面頂部左邊
知乎的搜索入口位于頂部導(dǎo)航欄的顯著位置，引導(dǎo)用戶進(jìn)行搜索，并且搜索框內(nèi)的占位文字根據(jù)算法會(huì)間隔一段時(shí)間改變，引導(dǎo)用戶發(fā)現(xiàn)新的內(nèi)容，促進(jìn)用戶在知乎上的使用時(shí)長(zhǎng)。
最常見(jiàn)的搜索方式之一，將搜索以輸入框的形式居于頁(yè)面頂部（狀態(tài)欄或標(biāo)題欄下方），在視覺(jué)上非常醒目，用戶進(jìn)入應(yīng)用即能快速找到，很符合用戶的視覺(jué)瀏覽動(dòng)線，也是C端產(chǎn)品提高轉(zhuǎn)化率的流量入口。
形態(tài)相對(duì)比較簡(jiǎn)單，通常以“放大鏡”樣式的 icon 出現(xiàn)在界面右上角，視覺(jué)上不會(huì)過(guò)于突出，常用于搜索行為不是特別頻繁的場(chǎng)景，需點(diǎn)擊后才會(huì)跳轉(zhuǎn)至搜索框頁(yè)面。
Icon 搜索入口相較于上述提到的類(lèi)型在視覺(jué)引導(dǎo)方面略遜一籌，相對(duì)弱化了搜索功能，但節(jié)省了更多的導(dǎo)航欄空間，呈現(xiàn)位置比較靈活，可單獨(dú)呈現(xiàn)、也可與其多個(gè)其他功能 icon 并列組合展示。
指的是在頁(yè)面中的某個(gè)模塊加入搜索的功能。
常見(jiàn)在數(shù)據(jù)列表頁(yè)面加入搜索的功能，搜索的目標(biāo)只在該模塊該內(nèi)容中進(jìn)行搜索，搜索的信息具有局限性，當(dāng)然也是更加準(zhǔn)確地搜索用戶想要的目標(biāo)信息。
下圖是一個(gè)美團(tuán)商家后臺(tái)的列表頁(yè)面，此頁(yè)面加入了搜索的功能。
另外，B端常見(jiàn)在表單頁(yè)面加入搜索的功能，搜索的目標(biāo)只在表單選擇內(nèi)中進(jìn)行搜索，搜索的信息同樣具有局限性，可以通過(guò)控制某個(gè)字段或者某幾個(gè)字段的信息來(lái)展開(kāi)搜索。
B端業(yè)務(wù)中復(fù)雜的場(chǎng)景中存在同一個(gè)頁(yè)面中有多個(gè)搜索入口（如上圖美團(tuán)），設(shè)計(jì)前需梳理清楚每一個(gè)搜索入口的交互邏輯，不同搜索入口覆蓋的搜索范圍、搜索過(guò)程、搜索結(jié)果是否一致，在占位文本上也需體現(xiàn)出該搜索入口的搜索內(nèi)容。
模糊搜索是用戶搜索意圖不明確時(shí)，將用戶的查詢與待檢索的內(nèi)容進(jìn)行模糊匹配。
模糊搜索無(wú)法精確理解用戶的查詢意圖，搜索結(jié)果可能有大批量用戶不想要的信息，使用模糊搜索時(shí)一定要結(jié)合實(shí)際場(chǎng)景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶來(lái)的記憶負(fù)擔(dān)；
缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索186，把相關(guān)號(hào)碼也匹配出來(lái)。
精確搜索是指用戶在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。
根據(jù)業(yè)務(wù)場(chǎng)景不同，我們會(huì)查找某一字段，或者是用標(biāo)簽切換不同字段來(lái)查找?？梢詭椭脩粼诰薮蟮男畔⒊刂锌s小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。
缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索。
總結(jié)：
我們可以根據(jù)產(chǎn)品的發(fā)展階段、需求側(cè)重、用戶的專業(yè)度和使用習(xí)慣來(lái)綜合決策使用哪一種方式更合適。如果側(cè)重查詢效率且用戶是有專業(yè)門(mén)檻的使用者時(shí)，可以優(yōu)先考慮精確搜索；如果側(cè)重查詢結(jié)果的豐富度，可以優(yōu)先考慮模糊搜索。
基于搜索欄的表現(xiàn)形式，可以分為以下四種類(lèi)型：?jiǎn)螌傩运阉鳌⑶袚Q屬性搜索、多屬性模糊搜索以及多屬性組合搜索。
類(lèi)型之間沒(méi)有優(yōu)劣之分，根據(jù)業(yè)務(wù)場(chǎng)景使用對(duì)應(yīng)的類(lèi)型即可。
單屬性精確搜索：通過(guò)某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，具有唯一識(shí)別性的、高使用頻率的、對(duì)用戶決策有意義的。
適用場(chǎng)景：表格單一數(shù)據(jù)信息特征突出，可以用此數(shù)據(jù)標(biāo)簽快速定位目標(biāo)數(shù)據(jù)。
切換屬性搜索也被稱為定向搜索，是由用戶主動(dòng)選定搜索范圍后再進(jìn)行搜索；
優(yōu)勢(shì)：搜索精準(zhǔn)度高。
劣勢(shì)：增加了部分用戶的學(xué)習(xí)成本及操作步驟。
適用于注重搜索結(jié)果的精準(zhǔn)性或展示產(chǎn)品搜索能力等場(chǎng)景，定向搜索適用的幾種場(chǎng)景：
a、產(chǎn)品數(shù)據(jù)量足夠大且重搜索功能，用戶對(duì)于搜索有明確目標(biāo)，定向可以幫助用戶提高搜索的精準(zhǔn)范圍和效率；
b、搜索時(shí)輸入的內(nèi)容無(wú)法通過(guò)同一套搜索交互方式和后臺(tái)計(jì)算邏輯承載；如單次搜索和批量搜索的輸入格式不同，搜索結(jié)果存在多樣性；
c、需外露產(chǎn)品亮點(diǎn)功能，有多個(gè)常用的搜索屬性，對(duì)于前置條件的數(shù)據(jù)計(jì)算能力和開(kāi)發(fā)成本更高。
明確并固定選項(xiàng)類(lèi)別，降低用戶操作難度。下拉篩選適合的選項(xiàng)類(lèi)別有限，不適合多類(lèi)別、復(fù)雜維度的分類(lèi)。
平鋪展示搜索條件內(nèi)容，每個(gè) Tab 標(biāo)簽代表一個(gè)篩選維度，操作便捷。Tab 標(biāo)簽的數(shù)量不宜過(guò)多。
B 端類(lèi)產(chǎn)品數(shù)據(jù)量豐富，在實(shí)際使用時(shí)，簡(jiǎn)單的方式很難全面覆蓋到各個(gè)搜索場(chǎng)景，精準(zhǔn)定位搜索結(jié)果。所以通過(guò)多個(gè)篩選維度的結(jié)合，形成多屬性的組合搜索，能夠大幅提升搜索結(jié)果的準(zhǔn)確性。
B端系統(tǒng)還有一種比較常見(jiàn)的搜索類(lèi)型，是在定向搜索的基礎(chǔ)上，進(jìn)一步豐富了搜索選項(xiàng)，比如指定搜索的時(shí)間范圍、數(shù)據(jù)類(lèi)型等，設(shè)置的選項(xiàng)越詳細(xì)越能夠提升搜索結(jié)果的效果和準(zhǔn)確性。
在設(shè)計(jì)時(shí)需要注意，B 端系統(tǒng)用戶角色多，層次不同，所以更加需要注重搜索前的引導(dǎo)，針對(duì)搜索規(guī)則、搜索限制等，應(yīng)該適時(shí)的以簡(jiǎn)練易懂的語(yǔ)言提示。
多標(biāo)簽?zāi)：阉鳎罕砀穸鄠€(gè)數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對(duì)數(shù)據(jù)的精確度較高。
適用場(chǎng)景：業(yè)務(wù)類(lèi)型多樣用戶可能記憶不精確且有多個(gè)數(shù)據(jù)特征，對(duì)搜索的便捷性要求高精確性要求低。
多屬性組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），對(duì)空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。
適用場(chǎng)景：綜合篩選項(xiàng)，對(duì)空間的利用率高，多標(biāo)簽組合搜索可以得到較為精準(zhǔn)的搜索結(jié)果。
聊了這么多搜索內(nèi)容，與設(shè)計(jì)師密切相關(guān)且對(duì)外輸出的首要就是搜索欄設(shè)計(jì)。
對(duì)于用戶來(lái)說(shuō)，搜索是為了解決用戶明確或者不明確的搜索需求，讓用戶能夠快速準(zhǔn)確搜到想搜的內(nèi)容。設(shè)計(jì)欄設(shè)計(jì)的目的就是，讓搜索能夠提高用戶獲取信息、內(nèi)容的效率。
常見(jiàn)搜索框設(shè)計(jì)樣式
1、填充色：通常選用與頁(yè)面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶查找。
2、線框：多用于干凈簡(jiǎn)潔的背景頁(yè)面。
3、投影：常用于風(fēng)格簡(jiǎn)潔輕量的風(fēng)格頁(yè)面，同時(shí)搜索功能級(jí)別較高的場(chǎng)景。
4、透明度：常用于背景色復(fù)雜的場(chǎng)景，目的是為不破壞背景頁(yè)面的整體效果，在視覺(jué)上更和諧。 無(wú)外框：用于風(fēng)格簡(jiǎn)潔的大留白的頁(yè)面。
完整的搜索流程包含了各種細(xì)節(jié)：例如搜索欄的形式、光標(biāo)停留、輸入狀態(tài)、異常數(shù)據(jù)、搜索結(jié)果、二次篩選等等。整個(gè)過(guò)程包含很多交互的細(xì)節(jié)設(shè)計(jì)，下面從激活搜索欄、輸入反饋、觸發(fā)方式來(lái)展開(kāi)說(shuō)明。
搜索激活指用戶激活搜索框時(shí)出現(xiàn)的搜索下拉面板，B端業(yè)務(wù)中搜索激活內(nèi)容常見(jiàn)以下三種：
搜索記錄通常以標(biāo)簽或列表的形式顯示，以時(shí)間順序從新到舊排列，一般不會(huì)完全展示，可以滑動(dòng)查看更多，或者折疊展開(kāi)。
注意：搜索記錄會(huì)涉及對(duì)用戶行為的記錄，關(guān)系到用戶的搜索隱私，所以應(yīng)當(dāng)允許用戶手動(dòng)刪除。
在 PC 端產(chǎn)品具有頁(yè)面空間優(yōu)勢(shì)，用戶的搜索過(guò)程完全是通過(guò)搜索欄完成的。
搜索欄中會(huì)增加歷史搜索記錄，下方增加推薦關(guān)鍵詞，幫助用戶快速完成搜索。同時(shí)也可以喚醒用戶對(duì)某些商品的興趣和記憶，從而挖掘用戶潛在的搜索需求，這一點(diǎn)電商產(chǎn)品用得偏多。
在面板中展示“搜索歷史”和“最近瀏覽”，增加相關(guān)內(nèi)容曝光，去給用戶提供更多選擇以觸達(dá)目標(biāo)內(nèi)容，該交互形式通常出現(xiàn)在全局性搜索或多維度搜索功能中。
搜索發(fā)現(xiàn)是系統(tǒng)基于用戶的搜索記錄，依據(jù)算法向用戶展示的搜索關(guān)鍵詞推薦，但并不是必需模塊，可以基于產(chǎn)品定位進(jìn)行考量。常規(guī)的c端產(chǎn)品上用得多，B端產(chǎn)品用得少。
由于搜索發(fā)現(xiàn)也涉及用戶隱私，但應(yīng)用一般不會(huì)讓用戶直接刪除，所以應(yīng)當(dāng)允許用戶對(duì)搜索發(fā)現(xiàn)進(jìn)行隱藏，不然極其容易引起用戶的反感。淘寶、京東都有搜索發(fā)現(xiàn)，并且也允許用戶進(jìn)行關(guān)閉/顯示的操作。
熱門(mén)推薦是搜索推薦頁(yè)里面內(nèi)容推薦的總稱，可以演變成多種推薦形式，比如“熱搜推薦”、“推薦活動(dòng)”等，熱門(mén)搜索是應(yīng)用商業(yè)化的重要手段，許多應(yīng)用都有這種模塊，并且內(nèi)容形式多樣。
知乎的熱搜就是結(jié)合熱搜、時(shí)事熱點(diǎn)等進(jìn)行推薦。
搜索反饋指用戶輸入本文時(shí)未確認(rèn)搜索執(zhí)行的中間過(guò)程狀態(tài)。在B端場(chǎng)景下搜索反饋具備很強(qiáng)的引導(dǎo)作用給予用戶當(dāng)下的狀態(tài)提示；
是通過(guò)已輸入的關(guān)鍵詞來(lái)預(yù)測(cè)可以找到的搜索結(jié)果，為用戶創(chuàng)造更加便捷的體驗(yàn)。
搜索聯(lián)想承載的不止顯性的設(shè)計(jì)呈現(xiàn)，還有背后的算法邏輯；例如是否可以識(shí)別拼音、不同搜索方式呈現(xiàn)的聯(lián)想詞范圍，都需要提前確認(rèn)落地可行性后再統(tǒng)一定義相關(guān)交互規(guī)則，并在產(chǎn)品中的所有搜索場(chǎng)景中保持相同的交互邏輯。
用戶在搜索時(shí)輸入了錯(cuò)誤的詞匯，系統(tǒng)經(jīng)過(guò)判斷后會(huì)展示正確詞匯的搜索結(jié)果給用戶，并友好地告知用戶正確的搜索方式。特殊狀態(tài)包含無(wú)結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。
實(shí)時(shí)搜索+實(shí)時(shí)顯示；搜索只有一個(gè)文本輸入框，沒(méi)有按鈕可點(diǎn)擊，這樣的搜索交互是通過(guò)輸入關(guān)鍵詞后，系統(tǒng)自動(dòng)檢測(cè)所有內(nèi)容中符合關(guān)鍵詞的目標(biāo)信息，隨著關(guān)鍵詞的持續(xù)輸入，與之相匹配的結(jié)果會(huì)逐漸減少、直至找到目標(biāo)，類(lèi)似自定義篩選功能。
這種交互一般對(duì)于數(shù)據(jù)信息比較少的情況下會(huì)比較友好，加載的速度更快，避免服務(wù)器的壓力太大、影響反饋效率，例如地址搜索、查找聯(lián)系人等。
關(guān)鍵詞輸入完成后，需要手動(dòng)點(diǎn)擊搜索按鈕向服務(wù)器發(fā)送指令才會(huì)得到相應(yīng)的搜索結(jié)果，這種方式適合大部分表格場(chǎng)景，更加適合B端產(chǎn)品復(fù)雜且龐大的數(shù)據(jù)場(chǎng)景。
搜索結(jié)果頁(yè)是用戶搜索的落腳點(diǎn)，在這個(gè)頁(yè)面，用戶會(huì)有目的性地瀏覽搜索結(jié)果。
搜索結(jié)果中隱含著搜索邏輯，全局搜索場(chǎng)景下多數(shù)為模糊搜索，即把與搜索關(guān)鍵詞詳盡的內(nèi)容頁(yè)反饋出來(lái)，匹配度低，需要花時(shí)間對(duì)結(jié)果二次篩選。
1. 快速瀏覽數(shù)據(jù)，并能夠準(zhǔn)確找到數(shù)據(jù)。
2. 需要經(jīng)常變換條件的組合迭代查詢數(shù)據(jù)，對(duì)查詢結(jié)果精準(zhǔn)定位。這就需要搜索結(jié)果后，不要清除用戶的查詢內(nèi)容。
3. 對(duì)數(shù)據(jù)進(jìn)行操作，如收藏、刪除、下載等。
不同的內(nèi)容需要不同的頁(yè)面布局來(lái)支撐的，b端場(chǎng)景中最常見(jiàn)的兩種布局，篩選上下布局和左右布局，當(dāng)然內(nèi)容部分又分列表布局和柵格布局。
1、凸顯關(guān)鍵信息：
為了便于用戶找到精準(zhǔn)高效的信息或者進(jìn)行便捷操作，在搜索聯(lián)想頁(yè)狀態(tài)時(shí)，當(dāng)用戶輸入的信息足夠清晰可預(yù)測(cè)，可以將關(guān)鍵信息凸顯呈現(xiàn)，以引起用戶的注意力，在進(jìn)入搜索結(jié)果頁(yè)之前就可以提升轉(zhuǎn)化的可能性。
此外，這種關(guān)鍵信息凸顯的形式，在搜索的商業(yè)轉(zhuǎn)化方面也有明顯的作用。
2、沒(méi)有結(jié)果，如何設(shè)計(jì)
搜索沒(méi)有結(jié)果會(huì)讓用戶感到非常沮喪的，尤其是當(dāng)用戶進(jìn)行了好幾次搜索之后，依然沒(méi)有結(jié)果，應(yīng)當(dāng)為他們提供有價(jià)值的替代品。
一般出現(xiàn)無(wú)結(jié)果的狀態(tài)有兩種情況：
a. 用戶輸入錯(cuò)誤，一般會(huì)提用戶正確的搜索方式，并且自動(dòng)幫助用戶糾錯(cuò)，
b.搜索結(jié)果無(wú)，這種情況一般設(shè)計(jì)會(huì)以空狀態(tài)提示用戶，采用友好的方式提醒用戶更換關(guān)鍵詞。
在使用中，搜索本身應(yīng)該是0思考成本的，否則就失去了索引的核心價(jià)值，基于此，總結(jié)一下5個(gè)設(shè)計(jì)注意點(diǎn)：
當(dāng)用戶輸入搜索文本，點(diǎn)擊搜索按鈕，就進(jìn)入了搜索結(jié)果頁(yè)流程，此時(shí)搜索框內(nèi)應(yīng)當(dāng)保留搜索文本，以便于用戶明確搜索的內(nèi)容（不要依賴用戶的記憶力），同時(shí)，也便于用戶再次編輯搜索文本。
考慮到輸入/清除的便捷性，應(yīng)用也應(yīng)當(dāng)提供一鍵清除按鈕，點(diǎn)擊一鍵清除搜索的文本，減少用戶的操作成本。
搜索項(xiàng)目不可避免的比較多時(shí)，可以進(jìn)行分類(lèi)展示，降低尋找成本，常用的有兩種分類(lèi)方式：
無(wú)效的自動(dòng)建議讓整個(gè)搜索體驗(yàn)降低，而精準(zhǔn)的自動(dòng)建議會(huì)讓整個(gè)體驗(yàn)好上許多，它會(huì)根據(jù)用戶用戶的輸入內(nèi)容（詞匯詞根和后臺(tái)數(shù)據(jù)）為用戶提供有用和精準(zhǔn)的輸入內(nèi)容建議，這有助于幫助用戶提高搜索過(guò)程的精準(zhǔn)度，提升整個(gè)搜索體驗(yàn)。
輸入錯(cuò)誤絕對(duì)是最常見(jiàn)的錯(cuò)誤，如果用戶錯(cuò)誤地輸入某個(gè)關(guān)鍵詞，而你的檢測(cè)到了，并且針對(duì)錯(cuò)誤提供更正之后的結(jié)果，這樣就成功的規(guī)避了因?yàn)殄e(cuò)誤的關(guān)鍵詞所導(dǎo)致的不良后果，用戶也不用再次進(jìn)行搜索了。
即使用戶熟知搜索引擎的全部功能，也需要借助大腦記憶來(lái)挑選關(guān)鍵詞，進(jìn)行搜索。
想要找出有意義的、可用的搜索關(guān)鍵詞搭配，用戶需要結(jié)合他們的搜索方向，最近的查詢，聯(lián)想相關(guān)的屬性和關(guān)鍵詞，使搜索體驗(yàn)更便捷流暢。
總結(jié)
搜索是我們?nèi)粘Ｖ蓄l繁接觸的功能，看似簡(jiǎn)單，背后都隱藏了很多流程與邏輯，不建議設(shè)計(jì)師盲目遵從原型依葫蘆畫(huà)瓢。
設(shè)計(jì)師更應(yīng)該在設(shè)計(jì)之初從業(yè)務(wù)類(lèi)型、功能定位、使用場(chǎng)景等多維度綜合分析選擇，從交互體驗(yàn)層面去深思搜索功能，因?yàn)樗阉鞒藬?shù)據(jù)匹配精準(zhǔn)度、搜索內(nèi)容廣度之外，搜索體驗(yàn)的便捷性也會(huì)影響用戶搜索的感受。
每一處細(xì)節(jié)背后的設(shè)計(jì)思路就變得尤為重要。
本文總結(jié)梳理了搜索功能，從搜索基本屬性、應(yīng)用場(chǎng)景，到搜索分類(lèi)，再到搜索欄設(shè)計(jì)，都進(jìn)行了闡述，最后再總結(jié)了搜索設(shè)計(jì)的一些注意點(diǎn)。希望你能夠幫忙理解搜索功能的設(shè)計(jì)。
作者：三原設(shè)計(jì)社
鏈接：https://www.zcool.com.cn/article/ZMTUzOTE0OA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 移動(dòng)端UI設(shè)計(jì)文章及欣賞
本文將從對(duì)當(dāng)下常見(jiàn)banner的設(shè)計(jì)規(guī)則等進(jìn)行剖析，并融入自己的思考和總結(jié)，著重從用戶的角度去思考一張banner廣告的設(shè)計(jì)規(guī)律。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 移動(dòng)端UI設(shè)計(jì)文章及欣賞
你一定也發(fā)現(xiàn)了，在這個(gè)時(shí)代下只要處在同一賽道的產(chǎn)品，大多數(shù)免不了日趨同質(zhì)化，不論是功能還是形式、內(nèi)容還是算法。就拿內(nèi)容型產(chǎn)品來(lái)舉例：去掉顏色，以下四個(gè)產(chǎn)品的首頁(yè)，你能分得清誰(shuí)是誰(shuí)嗎？
雖然可以做品牌差異化，但很多產(chǎn)品在招牌打響前，也會(huì)經(jīng)歷相當(dāng)漫長(zhǎng)的一段成長(zhǎng)期。而在大家都卷的分不清誰(shuí)是誰(shuí)的時(shí)候，通過(guò)趣味性來(lái)建立情感鏈接倒是一個(gè)獨(dú)辟蹊徑的狠招。
之前在團(tuán)隊(duì)有幸負(fù)責(zé)過(guò)一次產(chǎn)品趣味性的探索，雖未全部落地，但沉淀了不少經(jīng)驗(yàn)。今天，我將這些經(jīng)驗(yàn)以文章的方式分享給你，希望對(duì)你有所啟發(fā)。
為什么產(chǎn)品需要趣味性
1.符合本能需求
馬斯洛的“需求層次理論”（Hierarchy of Needs）你一定聽(tīng)過(guò)。這個(gè)理論提出人類(lèi)的需求狀態(tài)是持續(xù)不斷的，一段時(shí)間內(nèi)，個(gè)人的動(dòng)機(jī)或許可以獲得暫時(shí)性的滿足。但從人的成長(zhǎng)角度來(lái)看，人類(lèi)的需求永遠(yuǎn)不會(huì)止步于一個(gè)階段。類(lèi)似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后，自然會(huì)需要情感的滿足。
尤其現(xiàn)在這個(gè)相對(duì)嚴(yán)峻、內(nèi)卷成風(fēng)的時(shí)代下，大家都渴望在上了一天班之后，自己用的產(chǎn)品可以給自己解壓，而不只是個(gè)單純的冷血工具。
2.影響用戶行為
產(chǎn)品傳達(dá)趣味性的信息，那么這些信息便更容易被用戶接受、甚至激發(fā)興趣。正如用戶關(guān)系和精準(zhǔn)化運(yùn)營(yíng)的先驅(qū)——史蒂文·貝萊格姆的那句話：“趣味是設(shè)計(jì)產(chǎn)品中最人類(lèi)化,最直接,最能引起人們興趣的因素。”
根據(jù)艾達(dá)模型這個(gè)經(jīng)典理論，一旦用戶對(duì)某件事產(chǎn)生興趣后，則更容易促成他的決策、乃至最后行為的發(fā)生。畢竟我們絕大多數(shù)的決策并非源自理性。
另外，《瘋傳》這本書(shū)提及過(guò)一個(gè)重要的概念：情緒喚醒。當(dāng)情緒喚醒度較高時(shí)，往往會(huì)更容易激發(fā)用戶的分享行為（比如愉悅、驚喜這樣的正面情緒，當(dāng)然也會(huì)包括憤怒、恐懼這樣的負(fù)面情緒）。而產(chǎn)品所呈現(xiàn)的趣味性，很大程度上更容易引發(fā)用戶的高喚醒情緒，從而主動(dòng)采取一些產(chǎn)品希望他實(shí)施的行為。
3.緩解負(fù)面情緒
使用一款產(chǎn)品的過(guò)程中，必然會(huì)出現(xiàn)不夠正向的反饋，比如404、斷網(wǎng)、填寫(xiě)格式錯(cuò)誤、輸入隱私信息等等。一旦超出了用戶的容忍能力，很容易造成行為中斷甚至流失。
但此時(shí)如果通過(guò)一種趣味性的方式呈現(xiàn)，很大程度上可以緩解用戶的負(fù)面情緒。
比如readme的登錄頁(yè)面，當(dāng)你輸入密碼時(shí)，貓頭鷹捂住雙眼，很好得緩解了用戶的不安全感。再比如餓了么，惡劣天氣下會(huì)實(shí)時(shí)記錄當(dāng)前的天氣狀態(tài)，通過(guò)同理心的觸發(fā)也可以緩解用戶等待時(shí)產(chǎn)生的焦慮。
4.實(shí)現(xiàn)情感鏈接
對(duì)應(yīng)諾曼在《情感化設(shè)計(jì)》中的「反思層」，通過(guò)品牌差異、獨(dú)有內(nèi)涵等方式來(lái)喚起用戶深層的記憶和情感，產(chǎn)生情感共鳴，從而形成認(rèn)知，建立起深厚的情感鏈接，以讓用戶越來(lái)越忠實(shí)于產(chǎn)品。此時(shí)產(chǎn)品作用更多的是作為一個(gè)承擔(dān)情感的載體。
我們旅游時(shí)經(jīng)常會(huì)購(gòu)買(mǎi)一些貌似沒(méi)什么實(shí)用性的紀(jì)念品，明信片、木雕、徽章等等，可能最多只能放在房間當(dāng)裝飾。但是紀(jì)念品的關(guān)鍵意義，在于承載著旅游時(shí)的記憶。類(lèi)似的還有單機(jī)游戲發(fā)售時(shí)，除了標(biāo)準(zhǔn)版外，往往會(huì)同步發(fā)售包含手辦、美術(shù)設(shè)定集等物品的豪華版，同樣用來(lái)承載玩家的情懷。
最典型的例子，就是Google的Doodle設(shè)計(jì)，在不同的節(jié)日、紀(jì)念日、或者緬懷一些先驅(qū)、藝術(shù)家時(shí)，會(huì)投入很高的成本起設(shè)計(jì)各種趣味性的插畫(huà)logo，豐富有趣，而且很多時(shí)候可以支持互動(dòng)游戲。比如18年的萬(wàn)圣節(jié)，就做了一個(gè)有趣的多人對(duì)戰(zhàn)的小游戲。
Doodle不僅是Google文化、價(jià)值觀的象征，也通過(guò)這種趣味性的創(chuàng)意讓用戶實(shí)現(xiàn)更深層次的情感交流，建立情感紐帶并增加粘性，不會(huì)輕易得流失到其他替代品中。
趣味性是什么
關(guān)于這個(gè)概念，有三條相對(duì)客觀專業(yè)的說(shuō)法。
德國(guó)古典哲學(xué)創(chuàng)始人康德《實(shí)用人類(lèi)學(xué)》中，指出趣味性是人類(lèi)由于受到外部環(huán)境的影響而對(duì)客觀事物產(chǎn)生的直接的感性反應(yīng)，不具有普遍性和必然性。通俗來(lái)講是人們對(duì)身邊的事物感到新奇、有趣、有意思，從而心理產(chǎn)生愉悅的變化。
另外，康德在《判斷力批判》也指出，趣味是指主體以積極主動(dòng)的姿態(tài)，在超功利的層次上對(duì)某一對(duì)象表現(xiàn)出喜愛(ài)和愉悅的情緒狀態(tài)。
《漢語(yǔ)詞典》將趣味釋義為：使人感到愉快，能引起興趣的特性。
看似各不相同，但根據(jù)這三個(gè)概念提煉下，可以發(fā)現(xiàn)他們都是在融入一種正向的情緒加以解釋。
那么，趣味性背后的情緒到底是什么？
趣味性背后的情緒
情緒這東西千變?nèi)f化，為了避免主觀臆斷的不準(zhǔn)確，我搜羅了關(guān)于情緒的研究資料，目前相對(duì)權(quán)威的有三個(gè)：plutchik情緒輪、日本感性工學(xué)、諾曼的三層理論。
后兩者未對(duì)情緒進(jìn)行指標(biāo)的定義，所以這里只聚焦在情緒輪上。
情緒輪由羅伯特·普洛特契克開(kāi)創(chuàng)，這個(gè)理論指出人類(lèi)的基本情緒一共由8種，生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負(fù)面情緒，能夠符合趣味性帶來(lái)的情緒基本就三種：愉悅、期待和意外。
為了為產(chǎn)品所用，就需要提煉出更具象的特征。下面，我通過(guò)腦暴的方式對(duì)每類(lèi)情緒進(jìn)行發(fā)散聯(lián)想。
聯(lián)想了大量可以引發(fā)愉悅情緒的事物，比如可愛(ài)的貓貓、各類(lèi)好玩的表情包、毛絨玩具、影視作品里那些會(huì)突然說(shuō)話的動(dòng)物、解壓神器等等。
我發(fā)現(xiàn)這些事物，一般具備了以下特征：
1.會(huì)給予我們即時(shí)反饋；
2.擬人化，比如帶有人類(lèi)才有的表情，或者是人類(lèi)的動(dòng)作語(yǔ)言；
3.柔軟的、毛茸茸的、圓潤(rùn)的、有溫度的；
4.會(huì)動(dòng)的、解壓的
聯(lián)想了大量可以引發(fā)期待情緒的事物，比如被買(mǎi)爆的泡泡瑪特盲盒，商家售賣(mài)的福袋，各種諸如擲骰子、老虎機(jī)的隨機(jī)性游戲，各類(lèi)抽獎(jiǎng)活動(dòng)，一些游戲開(kāi)局roll屬性點(diǎn)的環(huán)節(jié)（比如金2、河洛等游戲，當(dāng)年玩的時(shí)候我驚訝得發(fā)現(xiàn)我居然能roll上一整天）
這些事物大致會(huì)帶有這些特征：
1.未知的、神秘的；
2.滿足人類(lèi)的好奇心的；
3.對(duì)結(jié)果能滿懷希望的；
4.隨機(jī)的正向獎(jiǎng)賞；
5.只需要一步簡(jiǎn)單到發(fā)指的操作（打開(kāi)容器、拉動(dòng)拉桿、點(diǎn)擊按鈕等等），不需要任何的行動(dòng)門(mén)檻，也沒(méi)有等待時(shí)間
比如《設(shè)計(jì)中的設(shè)計(jì)》這本書(shū)中提到的出入境的印章案例、一蘭拉面碗底的細(xì)節(jié)、電影或者游戲中突然出現(xiàn)的彩蛋、iPhone第一代的發(fā)布現(xiàn)場(chǎng)、突然發(fā)現(xiàn)的世外桃源、突襲的生日驚喜等等。
這些事物大致會(huì)帶有這些特征：
1.超出原有預(yù)期的；
2.未提前告知的；
3.正向結(jié)果的；
4.產(chǎn)生共鳴的
那么，這些特征又該如何更具象得落地成策略，產(chǎn)品中又是如何利用這些策略，引導(dǎo)用戶產(chǎn)生這些情緒的呢？
下面，我將基于這三類(lèi)維度，并結(jié)合大量的大廠案例來(lái)為一步步你抽絲剝繭。
如何制造愉悅感
基于上面的挖掘，我發(fā)現(xiàn)能引發(fā)愉悅感的一個(gè)明顯特征，就是擬人化，這個(gè)非常有意思。
克利福德·納斯在《the man who lied to his laptop》這本書(shū)中提出過(guò)一個(gè)觀點(diǎn)：人們對(duì)待電腦的方式，與我們?cè)谂c他人交流時(shí)使用的社會(huì)規(guī)范是一致的。我們對(duì)電腦的反應(yīng)，就好像它們是人類(lèi)一樣。
也正因此，很多原本沒(méi)有生命體征的物體，一旦被賦予了擬人形象，就容易被大家所接納、引發(fā)愉悅。
做一下細(xì)分的話，擬人化基本涵蓋了三個(gè)方面：語(yǔ)言、形象和表情。
1.1擬人化的語(yǔ)言
人對(duì)于具體的擬人形象更容易產(chǎn)生情感，其中便包含擬人化的口吻。使用這種口吻與用戶交流，而非冷冰冰的設(shè)備語(yǔ)言，就可以提升產(chǎn)品溫度，引導(dǎo)用戶對(duì)產(chǎn)品產(chǎn)生正向情感，關(guān)于這塊我總結(jié)了兩方面。
一方面，文案盡量得接地氣、輕松。
拿京東這款產(chǎn)品舉例，文案從口吻上都會(huì)采用一種很輕松、接地氣的擬人語(yǔ)氣，來(lái)拉近和用戶間的距離。比如在引導(dǎo)詞后加入“哦~”“~”這種輕松的語(yǔ)氣詞。
另外，「京東問(wèn)答」版塊的引導(dǎo)詞：傳統(tǒng)產(chǎn)品是“添加問(wèn)答”，是不是平平無(wú)奇。但京東使用了“我來(lái)助你一臂之力~”
QQ瀏覽器的評(píng)論暗提示，也不是傳統(tǒng)的“寫(xiě)評(píng)論”“輸入評(píng)論”，而是像日常聊天那樣“我來(lái)說(shuō)兩句”，非常接地氣、生活化。知乎直接套用了流行語(yǔ)，詼諧的同時(shí)引導(dǎo)用戶注意言論。
另一方面，人類(lèi)富有情緒變化，所以一旦用戶觸發(fā)了某個(gè)正面/負(fù)面行為，就可以給與情緒反饋。
在用戶完成商品評(píng)價(jià)后，京東不僅僅是很傳統(tǒng)得反饋“評(píng)價(jià)成功”，而是又加入了“感謝您！”的感謝詞?？此萍恿巳齻€(gè)字，但行動(dòng)過(guò)后的正向感激反饋，和我們?nèi)粘Ｉ钪惺艿秸蚍答佉粯?，被喚起正向的愉悅情緒。并愿意繼續(xù)這個(gè)行為。
知乎的圈子業(yè)務(wù)，在用戶完成簽到后，反饋完成的基礎(chǔ)上，使用了正向的情感反饋“ 我就知道你會(huì)再來(lái)看我”，仿佛是一位關(guān)系不錯(cuò)的老朋友，來(lái)喚起用戶正向情緒。
另外，知乎在改版后，回答收到贊也不僅僅是“點(diǎn)贊成功”這類(lèi)冷冰冰的機(jī)器語(yǔ)言，而是“已收到你的喜歡，謝謝！”并且配以作者頭像，非常形象得傳出對(duì)對(duì)方對(duì)我們的感謝反饋。這種正向反饋，相比”點(diǎn)贊成功“更有效得喚起正向情緒，形成正向激勵(lì)。
當(dāng)然，用戶的消極行為也可以產(chǎn)生情緒反饋。
比如現(xiàn)在很多產(chǎn)品的取關(guān)反饋，不是傳統(tǒng)的“確認(rèn)”“取消”，而是用“殘忍取關(guān)”和“給個(gè)機(jī)會(huì)”這種融入情感的文案來(lái)做挽留，就好像真的有個(gè)活生生的人，在被你否定后反饋給你的情緒，請(qǐng)求你再給個(gè)機(jī)會(huì)。有趣的同時(shí)一定程度上也可以喚醒用戶的同情。（雖然這種做法過(guò)于業(yè)務(wù)導(dǎo)向，且有綁架用戶的嫌疑）
人對(duì)于具體的擬人形象更容易產(chǎn)生情感。因此，樹(shù)立一個(gè)擬人化的品牌形象（也就是我們常說(shuō)的IP），可以使用戶對(duì)產(chǎn)品快速建立情感聯(lián)系，也可以強(qiáng)化品牌感知。比如優(yōu)酷的猴子、高德地圖的老鷹、釘釘?shù)难嘧?、linefriends等等。
世界杯的吉祥物也是同理，每一屆的吉祥物必定會(huì)融入擬人化的特征，憑著親切、可愛(ài)的形象和全世界的觀眾一起熱情互動(dòng)。
說(shuō)到產(chǎn)品，以京東的這只狗子為例，兜底頁(yè)、缺省頁(yè)、啟動(dòng)頁(yè)，都做了狗這個(gè)擬人形象的貫穿。
如果你記得沒(méi)錯(cuò)的話，形象改版之前這只狗還是四腳坐地上的，但改版后就兩腳著地了。這同樣是通過(guò)更擬人的形象來(lái)賦予「人格」，以此提升愉悅感，拉近距離。
再比如夸克，它甚至單獨(dú)新增了底tab入口，通過(guò)3d品牌形象，實(shí)現(xiàn)與用戶的智能交流。另外，卡片和語(yǔ)音搜索都做了形象貫穿，后者還使用了形象的眼睛，來(lái)通過(guò)眼睛的變化進(jìn)行情感交流。
一段文字在加入了表情后，我們就能迅速了解到對(duì)方的情緒（比如我們?nèi)粘５牧奶欤Ｒ虼吮砬檫@一招，也可以用以加深用戶與產(chǎn)品的情感交流。
它可以和語(yǔ)音、形象靈活結(jié)合使用。通過(guò)全面的擬人化，來(lái)大幅提升用戶對(duì)產(chǎn)品的形象感知，促進(jìn)用戶情感的產(chǎn)生、加深用戶和產(chǎn)品的情感鏈接。
比如用語(yǔ)言輸入，當(dāng)系統(tǒng)未識(shí)別清楚時(shí)，傳統(tǒng)的方案可能是一個(gè)錯(cuò)誤圖標(biāo)加上「未識(shí)別聲音，請(qǐng)?jiān)僭囈槐椤沟奈陌?，但夸克中則使用了品牌形象的雙眼來(lái)傳達(dá)失落的表情，并結(jié)合了擬人化的語(yǔ)言。
同樣做法的還有百度的未開(kāi)麥提示、段子頭圖，快速傳達(dá)產(chǎn)品的情緒，和用戶情感交流。
另外，閑魚(yú)設(shè)置昵稱時(shí)，正在輸入時(shí)、以及超出了限定字?jǐn)?shù)，右側(cè)的形象表情也會(huì)發(fā)生變化。
除了擬人化能引發(fā)愉悅外，還有一個(gè)很容易被忽略的要素同樣能起到作用——動(dòng)畫(huà)反饋。
提起動(dòng)畫(huà)的作用，我們更多人首先想到的可能是強(qiáng)引導(dǎo)、注意力吸引，但動(dòng)畫(huà)同樣能觸發(fā)用戶愉悅。比如當(dāng)動(dòng)畫(huà)更加貼近現(xiàn)實(shí)，或者結(jié)合擬人化的特征時(shí)。
最典型的例子，就是蘋(píng)果appstore從卡片到詳情頁(yè)的轉(zhuǎn)場(chǎng)過(guò)渡，點(diǎn)按的預(yù)備動(dòng)作、卡片的放大展開(kāi)、緩出的曲線、轉(zhuǎn)場(chǎng)完成的慣性等等，都很貼近現(xiàn)實(shí)物理世界的運(yùn)動(dòng)規(guī)律。而這種自然的絲滑也更能引發(fā)用戶的愉悅。
比如知乎的加載動(dòng)畫(huà)，結(jié)合了擬人化的特征，讓這個(gè)過(guò)程變得格外有趣。劉看山奮筆疾書(shū)的動(dòng)作也很符合知乎這款產(chǎn)品的定位。
如何制造期待感
根據(jù)我們對(duì)期待感的腦暴，發(fā)現(xiàn)能觸發(fā)這種情緒最典型的特征，就是隨機(jī)性。
在產(chǎn)品中，則可以通過(guò)隨機(jī)給予用戶有價(jià)值的內(nèi)容來(lái)引發(fā)用戶的關(guān)注。結(jié)果的不確定使過(guò)程充滿神秘，這種狀態(tài)讓用戶興奮和滿懷期待，不會(huì)輕易離開(kāi)。
比如網(wǎng)易新聞在進(jìn)行新聞加載的操作時(shí)，會(huì)在加載動(dòng)畫(huà)上加入一個(gè)隨機(jī)的小貼士。內(nèi)容大致有三類(lèi)：黃歷、名言和一句話新聞。而且這些內(nèi)容完全是隨機(jī)出現(xiàn)，這種刷新過(guò)程好像在開(kāi)盲盒，你無(wú)法預(yù)知會(huì)給你什么內(nèi)容，非常有趣。而且它們?nèi)肟谏?，不干擾；內(nèi)容對(duì)用戶也具有價(jià)值。
同樣的還有丁香醫(yī)生。在首頁(yè)每次下來(lái)刷新后，都會(huì)出現(xiàn)不一樣的健康類(lèi)的小貼士。隨機(jī)性很強(qiáng)，富有趣味。而且可以很好得滿足求知欲。
雪球的個(gè)人頁(yè)上，上劃時(shí)也會(huì)隨機(jī)給一條關(guān)于投資、市場(chǎng)的名言和網(wǎng)友的熱門(mén)觀點(diǎn)。
把現(xiàn)實(shí)生活中的游戲搬到了手機(jī)，同樣能激發(fā)用戶的好奇和期待。比如微信讀書(shū)的翻牌子、搖一搖、老虎機(jī)。還有天貓的翻牌子。
如何制造驚喜感
格雷戈里·伯恩斯曾做個(gè)關(guān)于腦部區(qū)域的研究，發(fā)現(xiàn)大腦不僅探尋未知，而且實(shí)際上還渴望未知。相比那些已知的日常慣例，新鮮新穎的事物更容易引人注意。所以提供一些以往沒(méi)有過(guò)的、出乎意料的事物或互動(dòng)，不但能引起注意力，而且也會(huì)帶來(lái)驚喜感。
產(chǎn)品中的驚喜感設(shè)計(jì)，可以說(shuō)是使用瞬間能夠觸達(dá)我們內(nèi)心的一種短暫性愉悅，一個(gè)體驗(yàn)的峰值。
根據(jù)對(duì)驚喜感的挖掘，一個(gè)典型的特征就是超出預(yù)期，并且未提前預(yù)料。
比如Figma使用過(guò)程中，團(tuán)隊(duì)成員和你同時(shí)長(zhǎng)按鼠標(biāo)，并且靠在一起后，就可與觸發(fā)擊掌的動(dòng)畫(huà)彩蛋，非常有意思。
比如京東在五星好評(píng)后，會(huì)放煙花慶祝。
比如很多內(nèi)容型產(chǎn)品，在詳情頁(yè)長(zhǎng)按點(diǎn)贊按鈕后，會(huì)觸發(fā)全屏的「爆贊」動(dòng)畫(huà)。
再比如用戶生日當(dāng)天，通過(guò)啟動(dòng)頁(yè)、彈窗等場(chǎng)景送上生日祝福等等。
這些能夠超出用戶預(yù)期的細(xì)節(jié)，即便多么細(xì)枝末節(jié)、出現(xiàn)頻率多低，但只要能夠被觸發(fā)，都可能因?yàn)轶@喜感而生成情緒峰值，加深用戶和產(chǎn)品的情感鏈接。
最后
以上，便是趣味性背后的情緒挖掘和案例講解。
作為設(shè)計(jì)師，我們?cè)诠ぷ髦锌偸菑?qiáng)調(diào)以用戶為中心，通過(guò)不斷的調(diào)研、跟訪、可用性測(cè)試來(lái)了解、分類(lèi)用戶，但更多的結(jié)果可能只是讓產(chǎn)品不斷得貼合用戶的心智、符合預(yù)期。但如何增加粘度、建立深層鏈接，就需要通過(guò)趣味性這種情感化表達(dá)方式，來(lái)為用戶制造愉悅、期待甚至驚喜。
正像諾曼在「情感與設(shè)計(jì)」中說(shuō)的那樣，每個(gè)產(chǎn)品都需要令人更放松、更愉悅的設(shè)計(jì)，以此來(lái)增強(qiáng)產(chǎn)品的適用性。
希望這篇文章能對(duì)你有所啟發(fā)。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 移動(dòng)端UI設(shè)計(jì)文章及欣賞
本文將以有駕導(dǎo)流體驗(yàn)升級(jí)的項(xiàng)目為例，分享導(dǎo)流增長(zhǎng)探索的設(shè)計(jì)思路與實(shí)踐經(jīng)驗(yàn)。
// 寫(xiě)在前面
端到端導(dǎo)流是指在產(chǎn)品矩陣體系內(nèi)引導(dǎo)優(yōu)質(zhì)產(chǎn)品的用戶使用另外一款產(chǎn)品，帶來(lái)使用量的提升，從而實(shí)現(xiàn)用戶規(guī)模提升的一種增長(zhǎng)手段。隨業(yè)務(wù)快速增長(zhǎng)，有駕從百度汽車(chē)頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣，依托各端流量實(shí)現(xiàn)矩陣產(chǎn)品間的導(dǎo)流，逐步積累用戶規(guī)模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導(dǎo)流體驗(yàn)升級(jí)的項(xiàng)目為例，分享導(dǎo)流增長(zhǎng)探索的設(shè)計(jì)思路與實(shí)踐經(jīng)驗(yàn)。
// 為什么要做導(dǎo)流
導(dǎo)流的目的
對(duì)于業(yè)務(wù)本身而言，隨著移動(dòng)互聯(lián)網(wǎng)流量紅利期的結(jié)束，獲取新用戶的成本越來(lái)越高，不管是新產(chǎn)品還是成熟型產(chǎn)品，都需要通過(guò)導(dǎo)流的手段來(lái)持續(xù)擴(kuò)充新用戶。其次，對(duì)于有駕產(chǎn)品生態(tài)而言，需要各端產(chǎn)品間的相互聯(lián)動(dòng)，協(xié)同發(fā)揮優(yōu)勢(shì)，實(shí)現(xiàn)流量?jī)r(jià)值最大化。
導(dǎo)流的優(yōu)勢(shì)
成本低，相較于投放、活動(dòng)等渠道流量獲取方式，矩陣導(dǎo)流成本低；
高意向，用戶購(gòu)車(chē)意向明確更容易實(shí)現(xiàn)商業(yè)轉(zhuǎn)化；
可共享，用戶數(shù)據(jù)及行為關(guān)聯(lián)互通。
// 如何做好導(dǎo)流設(shè)計(jì)
1.問(wèn)題分析
通過(guò)梳理核心場(chǎng)景的4種導(dǎo)流條，發(fā)現(xiàn)各個(gè)場(chǎng)景導(dǎo)流形式各異，用戶缺乏統(tǒng)一認(rèn)知，導(dǎo)流引導(dǎo)語(yǔ)單一內(nèi)容吸引力弱。在用戶在瀏覽頁(yè)面時(shí)，點(diǎn)擊功能入口或想要繼續(xù)查看更多內(nèi)容，需要下載APP才能繼續(xù)阻礙用戶瀏覽：
缺乏統(tǒng)一認(rèn)知：視覺(jué)表達(dá)形式不成體系，用戶感知不夠；
內(nèi)容吸引力弱：內(nèi)容單一缺乏吸引力，用戶沒(méi)有點(diǎn)擊欲望；
阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗(yàn)。
從導(dǎo)流鏈路的用戶行為來(lái)看，整個(gè)流程下載路徑過(guò)長(zhǎng)，發(fā)現(xiàn)用戶流失較大的轉(zhuǎn)化點(diǎn)：
從小程序落地頁(yè)到下載頁(yè)：在進(jìn)入小程序?yàn)g覽頁(yè)面時(shí)，用戶沒(méi)有注意到導(dǎo)流條就滑走了；
點(diǎn)擊導(dǎo)流條進(jìn)入下載頁(yè)：點(diǎn)擊導(dǎo)流條會(huì)先調(diào)起導(dǎo)流彈窗，點(diǎn)擊確認(rèn)后再進(jìn)入到下載頁(yè)，用戶未選擇下載就退出了。
2.明確設(shè)計(jì)方向
針對(duì)導(dǎo)流現(xiàn)狀缺乏統(tǒng)一認(rèn)知，內(nèi)容吸引力弱、阻礙用戶瀏覽、下載路徑過(guò)長(zhǎng)的問(wèn)題，我們搭建了一個(gè)完整的導(dǎo)流鏈路圖，根據(jù)用戶增長(zhǎng)模型，把用戶生命周期各節(jié)點(diǎn)的用戶行為與產(chǎn)品觸點(diǎn)一一羅列出來(lái)，找到增長(zhǎng)路徑的設(shè)計(jì)機(jī)會(huì)點(diǎn)。
通過(guò)以上的問(wèn)題分析，如何建立用戶和產(chǎn)品的鏈接，保障友好的體驗(yàn)，是本次導(dǎo)流升級(jí)要解決的問(wèn)題。根據(jù)用戶關(guān)鍵行為，我們可以將整個(gè)導(dǎo)流鏈路拆分為3個(gè)階段來(lái)挖掘主要機(jī)會(huì)點(diǎn)：
下載前：興趣激發(fā)導(dǎo)流吸引，建立用戶穩(wěn)定認(rèn)知；
下載中：強(qiáng)化用戶轉(zhuǎn)化動(dòng)機(jī)，刺激用戶完成下載；
下載后：保障還原體驗(yàn)暢通，提升首次使用體驗(yàn)。
下面將分別介紹導(dǎo)流下載前階段的設(shè)計(jì)落地實(shí)踐，以及下載中、下載后階段的延伸設(shè)計(jì)思考。
// 下載前
1.強(qiáng)化觸點(diǎn)吸引
是否能成功引起用戶注意，是轉(zhuǎn)化開(kāi)始的第一步，統(tǒng)一的視覺(jué)風(fēng)格和滿足用戶訴求的內(nèi)容，有利于增強(qiáng)導(dǎo)流條的吸引力。
1）收斂導(dǎo)流條類(lèi)型
針對(duì)【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒(méi)有跳轉(zhuǎn)預(yù)期的體驗(yàn)問(wèn)題，下線了阻斷式和截?cái)嗍絻煞N體驗(yàn)不友好的導(dǎo)流類(lèi)型，將原來(lái)4種導(dǎo)流類(lèi)型收斂為2種，僅保留通用導(dǎo)流條和功能延展導(dǎo)流條，基于這2種導(dǎo)流形態(tài)進(jìn)行深入的設(shè)計(jì)探索。
2）建立通用視覺(jué)標(biāo)準(zhǔn)
針對(duì)【缺乏統(tǒng)一認(rèn)知】視覺(jué)表達(dá)形式不成體系、用戶感知不夠的視覺(jué)問(wèn)題，建立了通用導(dǎo)流條標(biāo)準(zhǔn)化規(guī)范。統(tǒng)一視覺(jué)形態(tài)，優(yōu)化為頁(yè)面內(nèi)通欄嵌入式，同時(shí)融入品牌色強(qiáng)化用戶感知，根據(jù)頁(yè)面布局制定了不同的展示規(guī)則。
上線后，內(nèi)嵌導(dǎo)流條在展現(xiàn)受限的情況下，導(dǎo)流轉(zhuǎn)化數(shù)據(jù)與改版前基本持平，為了進(jìn)一步提升導(dǎo)流的點(diǎn)擊效果，開(kāi)始探索場(chǎng)景化定制提轉(zhuǎn)的設(shè)計(jì)方向。
3）定制場(chǎng)景化內(nèi)容
針對(duì)【內(nèi)容吸引力弱】?jī)?nèi)容單一缺乏吸引力、用戶沒(méi)有點(diǎn)擊欲望的內(nèi)容問(wèn)題，在通用標(biāo)準(zhǔn)化形態(tài)的基礎(chǔ)上，根據(jù)不同場(chǎng)景用戶訴求點(diǎn)，豐富導(dǎo)流內(nèi)容。分別從內(nèi)容定制、按鈕文案優(yōu)化、以及氛圍強(qiáng)化3個(gè)方向驗(yàn)證對(duì)轉(zhuǎn)化的影響。
內(nèi)容定制：豐富導(dǎo)流利益點(diǎn)、場(chǎng)景化內(nèi)容更能激發(fā)用戶興趣，促進(jìn)轉(zhuǎn)化達(dá)成；
按鈕文案：轉(zhuǎn)化按鈕文案導(dǎo)向性明確、內(nèi)容與導(dǎo)流利益點(diǎn)匹配，可以助力按鈕轉(zhuǎn)化提升；
氛圍強(qiáng)化：導(dǎo)流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導(dǎo)流條點(diǎn)擊。
2.拓展場(chǎng)景擴(kuò)量
復(fù)利通用標(biāo)準(zhǔn)導(dǎo)流條的成功經(jīng)驗(yàn)，應(yīng)用到功能延展類(lèi)導(dǎo)流條中繼續(xù)驗(yàn)證有效性，從產(chǎn)品價(jià)值點(diǎn)出發(fā)，挖掘高流量場(chǎng)景的機(jī)會(huì)點(diǎn)從而帶來(lái)轉(zhuǎn)化增量。
1）價(jià)值傳遞
根據(jù)小程序和APP兩端各自的不同點(diǎn)，分別從功能差異及體驗(yàn)差異兩個(gè)方向進(jìn)行優(yōu)化。
APP特有功能：APP完善的功能體驗(yàn)可以更好滿足用戶訴求，例如參配瀏覽場(chǎng)景下，引導(dǎo)用戶體驗(yàn)搜索及橫屏查看的高頻功能，對(duì)于導(dǎo)流轉(zhuǎn)化有正向幫助；
各端體驗(yàn)差異：小程序和APP兩端體驗(yàn)存在差異，例如圖片瀏覽場(chǎng)景下，APP清晰流暢的瀏覽體驗(yàn)及放大全屏查看圖片的交互體驗(yàn)，能夠刺激用戶轉(zhuǎn)化。
2）價(jià)值延續(xù)
當(dāng)用戶完成核心內(nèi)容消費(fèi)后，是否可以引導(dǎo)用戶去APP繼續(xù)瀏覽更多相關(guān)內(nèi)容，進(jìn)而引導(dǎo)用戶下載呢？
服務(wù)透?jìng)?/strong>：平臺(tái)服務(wù)內(nèi)容傳遞，例如在內(nèi)容落地頁(yè)文末增加品牌廣告導(dǎo)流條，幫助用戶建立品牌認(rèn)知；
相關(guān)推薦：引導(dǎo)相關(guān)內(nèi)容消費(fèi)，例如在文章或視頻頁(yè)增加相關(guān)推薦導(dǎo)流條，引導(dǎo)用戶瀏覽更多相似內(nèi)容。
// 下載中
當(dāng)用戶通過(guò)導(dǎo)流條進(jìn)入到下載流程時(shí)，還有哪些手段可以刺激用戶激活減少流失呢？
強(qiáng)化下載動(dòng)機(jī)：下載頁(yè)前置APP落地頁(yè)內(nèi)容，例如將通用下載頁(yè)優(yōu)化為場(chǎng)景化下載頁(yè)，給用戶超前產(chǎn)品體驗(yàn)吸引轉(zhuǎn)化；
減少用戶流失：縮短鏈路簡(jiǎn)化流程，例如可在下載中間頁(yè)完成應(yīng)用下載，同時(shí)退出下載頁(yè)時(shí)增加挽留。
// 下載后
當(dāng)用戶在應(yīng)用商店下載完成后，我們還能做哪些提升首次啟動(dòng)APP的體驗(yàn)?zāi)兀?/p>
還原鏈路暢通：提升場(chǎng)景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導(dǎo)新用戶探索功能，根據(jù)用戶興趣推薦適合的內(nèi)容。
以上內(nèi)容是下載中和下載后階段導(dǎo)流優(yōu)化方向的一些延伸設(shè)計(jì)思考，為大家提供可以繼續(xù)探索的方向。
// 寫(xiě)在最后
總結(jié)一下本篇文章關(guān)于導(dǎo)流的體驗(yàn)設(shè)計(jì)要點(diǎn)：
全鏈路洞察，對(duì)導(dǎo)流鏈路進(jìn)行拆解，通過(guò)盤(pán)點(diǎn)導(dǎo)流鏈路的用戶行為，明確每個(gè)節(jié)點(diǎn)的設(shè)計(jì)方向；
降低廣告干擾性，減少用戶瀏覽過(guò)程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導(dǎo)，讓用戶專注于產(chǎn)品本身傳遞的價(jià)值，引領(lǐng)用戶完成對(duì)產(chǎn)品的探索從而完成下載激活。
希望以上的設(shè)計(jì)思考，可以帶給大家一些啟發(fā)。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 設(shè)計(jì)思維
對(duì)于產(chǎn)品設(shè)計(jì)師來(lái)說(shuō)，在同質(zhì)化的環(huán)境中我們需要具備突破創(chuàng)意的思維，這樣才能輸出差異化的設(shè)計(jì)方案。而創(chuàng)意離不開(kāi)優(yōu)秀作品的靈感啟發(fā)，發(fā)現(xiàn)有意思的設(shè)計(jì)細(xì)節(jié)也能提高我們的設(shè)計(jì)思維。
今天黑馬哥將會(huì)繼續(xù)為大家?guī)?lái)一些優(yōu)秀的設(shè)計(jì)細(xì)節(jié)，我們一起來(lái)反思一下，這樣的設(shè)計(jì)想法為啥自己沒(méi)有想到呢？
分享目錄
一、營(yíng)造頂部區(qū)域視覺(jué)感與情感化
二、主題化配圖增強(qiáng)視覺(jué)感
三、彈幕式標(biāo)簽提高關(guān)注度
四、IP 強(qiáng)化底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)
五、強(qiáng)化動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)
六、連貫性的插畫(huà)突出卡片特色
七、動(dòng)態(tài)表情化的評(píng)價(jià)設(shè)計(jì)
八、場(chǎng)景化的推薦設(shè)計(jì)
九、上下輪播的 Banner 設(shè)計(jì)
十、情感化的氛圍營(yíng)造
一、營(yíng)造頂部區(qū)域視覺(jué)感與情感化
產(chǎn)品頂部區(qū)域的視覺(jué)感是吸引用戶的關(guān)鍵，在一些功能單一的產(chǎn)品中，強(qiáng)化視覺(jué)表現(xiàn)力也是提升產(chǎn)品豐富度的有效形式。
比如麥當(dāng)勞 App 首頁(yè)的設(shè)計(jì)中，頂部區(qū)域結(jié)合溫馨的場(chǎng)景插畫(huà)進(jìn)行表達(dá)，讓你早上打開(kāi)麥當(dāng)勞就有種心情愉悅感。動(dòng)態(tài)的太陽(yáng)微笑畫(huà)面給你一天好心情，情感化的設(shè)計(jì)不僅增強(qiáng)了視覺(jué)感，也帶給用戶美好的產(chǎn)品使用體驗(yàn)。
二、主題化配圖增強(qiáng)視覺(jué)感
封面圖在產(chǎn)品規(guī)范中相對(duì)比較難約束，通過(guò)構(gòu)圖、比例、固定元素和配圖質(zhì)量等，在一定程度上可以提高感官體驗(yàn)。如果是在重點(diǎn)突出的內(nèi)容上面，結(jié)合主題化配圖也可以增強(qiáng)視覺(jué)感。
之前在使用優(yōu)酷 App 時(shí)，當(dāng)時(shí)在重點(diǎn)突出熱劇的設(shè)計(jì)中，就將主題化的內(nèi)容融入到宮格的配圖中。以統(tǒng)一的畫(huà)面風(fēng)格和設(shè)計(jì)表現(xiàn)形式填充封面，增強(qiáng)了視覺(jué)表現(xiàn)力，以此突出熱劇的吸引力。
三、彈幕式標(biāo)簽提高關(guān)注度
在固定的結(jié)構(gòu)布局中如何提高局部?jī)?nèi)容的關(guān)注度，我們需要在不改變結(jié)構(gòu)的前提下進(jìn)行創(chuàng)意融入。比如動(dòng)態(tài)畫(huà)面、突出視覺(jué)感、內(nèi)容特異化等等，而最近發(fā)現(xiàn)彈幕式標(biāo)簽也是一個(gè)不錯(cuò)的選擇。
在體驗(yàn)優(yōu)酷 App 時(shí)，在動(dòng)漫欄目中針對(duì)推薦的熱播新番，想要突出的動(dòng)漫結(jié)合了彈幕式標(biāo)簽進(jìn)行強(qiáng)化。動(dòng)感的節(jié)奏會(huì)提高用戶的關(guān)注度，在不改變當(dāng)前結(jié)構(gòu)的基礎(chǔ)上，不失為一種有效的解決方案。
四、IP 強(qiáng)化底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)
底部標(biāo)簽欄圖標(biāo)是產(chǎn)品設(shè)計(jì)師經(jīng)常發(fā)揮的場(chǎng)景，在一些節(jié)慶主題或者活動(dòng)中都會(huì)定制設(shè)計(jì)。
優(yōu)酷 App 在元旦促銷(xiāo)活動(dòng)期間，就將底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)與 IP 形象結(jié)合，默認(rèn)以促銷(xiāo)主題文字展示，點(diǎn)擊狀態(tài)以 IP 形象顯示。圖標(biāo)與活動(dòng)相結(jié)合，不僅突出圖標(biāo)視覺(jué)表現(xiàn)，也營(yíng)造了活動(dòng)氛圍感。
五、強(qiáng)化動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)
對(duì)于靠?jī)?nèi)容吸引用戶參與度的產(chǎn)品來(lái)說(shuō)，提高用戶發(fā)布動(dòng)態(tài)的意愿度至關(guān)重要，突出動(dòng)態(tài)發(fā)布的吸引力也能起到促進(jìn)作用。
會(huì)玩 App 在動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)中給出了不錯(cuò)的思路，未發(fā)布動(dòng)態(tài)時(shí)會(huì)以形象化的空狀態(tài)設(shè)計(jì)進(jìn)行引導(dǎo)。動(dòng)態(tài)發(fā)布的按鈕旁以俏皮可愛(ài)的形象進(jìn)行引導(dǎo)設(shè)計(jì)，提高了按鈕的吸引力，讓用戶有種參與的沖動(dòng)。情感化設(shè)計(jì)的引導(dǎo)不僅可以增強(qiáng)感官體驗(yàn)，也更容易攻破用戶的防備心理。
六、連貫性的插畫(huà)突出卡片特色
卡片式設(shè)計(jì)已經(jīng)成為主流的產(chǎn)品設(shè)計(jì)趨勢(shì)，信息的歸納感可以提高識(shí)別效率。探索卡片設(shè)計(jì)的表現(xiàn)特色尤為重要，重點(diǎn)在于卡片造型和內(nèi)部視覺(jué)表現(xiàn)力的發(fā)揮層面。
麥當(dāng)勞 App 在主內(nèi)容的卡片設(shè)計(jì)上運(yùn)用了配送場(chǎng)景插畫(huà)，連貫性的插畫(huà)突出了卡片特色。插畫(huà)場(chǎng)景結(jié)合了品牌圖形，增強(qiáng)了麥當(dāng)勞的品牌曝光度；白天和晚上還以不同配色風(fēng)格和細(xì)節(jié)進(jìn)行差異表現(xiàn)，無(wú)論是想法還是設(shè)計(jì)細(xì)節(jié)都非常不錯(cuò)，是一個(gè)挺有創(chuàng)意的案例表現(xiàn)。
七、動(dòng)態(tài)表情化的評(píng)價(jià)設(shè)計(jì)
用戶評(píng)價(jià)可以反饋服務(wù)的質(zhì)量，進(jìn)而做出產(chǎn)品迭代或者服務(wù)調(diào)整的思路。如何提高用戶參與評(píng)價(jià)的積極性，需要產(chǎn)品設(shè)計(jì)師多多探索啦！
最近在使用順豐速運(yùn)小程序時(shí)，完成快遞業(yè)務(wù)之后進(jìn)行評(píng)價(jià)，表情化的星級(jí)評(píng)價(jià)非常有意思。不同等級(jí)以不同的表情呈現(xiàn)，動(dòng)態(tài)表達(dá)非常形象生動(dòng)，讓人不由的挨個(gè)體驗(yàn)。動(dòng)態(tài)表情的形式提高了評(píng)價(jià)的關(guān)注度，情感化的表達(dá)讓用戶更愿意參與評(píng)價(jià)，提高了評(píng)價(jià)的體驗(yàn)度。
八、場(chǎng)景化的推薦設(shè)計(jì)
針對(duì)電商類(lèi)產(chǎn)品來(lái)說(shuō)，商品/店鋪推薦模塊出現(xiàn)頻次較高，吸引用戶關(guān)注度自然成為了設(shè)計(jì)的首要目標(biāo)。
在體驗(yàn) Mars App 時(shí)，在生活超市推薦的設(shè)計(jì)中，模擬了便利店的場(chǎng)景形象。真實(shí)感的場(chǎng)景表達(dá)帶給用戶親切自然的購(gòu)物體驗(yàn)，同時(shí)也提高了用戶對(duì)于該模塊的關(guān)注度。
九、上下輪播的 Banner 設(shè)計(jì)
輪播 Banner 圖算是產(chǎn)品設(shè)計(jì)中最常見(jiàn)的模塊，在移動(dòng)端的設(shè)計(jì)中通常左右輪播為主，最近體驗(yàn)到上下輪播的案例，打破常規(guī)也不失為一種新的設(shè)計(jì)思路。
在 Mars App 的首頁(yè) Banner 圖以上下輪播進(jìn)行交互，左側(cè)固定展示定位城市的天氣等信息，提高了 Banner 位置的利用率。Banner 與金剛區(qū)懸浮在特定的背景上，帶給用戶沉浸式的感官體驗(yàn)。
十、情感化的氛圍營(yíng)造
情感化的設(shè)計(jì)可以讓產(chǎn)品更有溫度，增加用戶對(duì)產(chǎn)品的好感度。配合傳統(tǒng)節(jié)日或者節(jié)氣主題進(jìn)行表達(dá)是相對(duì)比較普遍的形式，會(huì)在產(chǎn)品主題和視覺(jué)區(qū)域進(jìn)行氛圍營(yíng)造。
在清明節(jié)期間體驗(yàn)飛豬旅行 App 時(shí)，頂部區(qū)域以踏春的場(chǎng)景營(yíng)造氛圍感，還在搜索區(qū)域以青團(tuán)（青團(tuán)是江南人家在清明節(jié)吃的一道傳統(tǒng)點(diǎn)心）替代搜索按鈕。情感化的設(shè)計(jì)營(yíng)造不僅體現(xiàn)了產(chǎn)品的溫度，也帶給用戶對(duì)于節(jié)日的場(chǎng)景體驗(yàn)。
小結(jié)
禁錮我們思維的不是我們的技術(shù)，而是我們的眼界和設(shè)計(jì)感知。發(fā)現(xiàn)優(yōu)秀的設(shè)計(jì)并總結(jié)和轉(zhuǎn)化，才能讓我們打開(kāi)禁錮的思維，在優(yōu)秀的基礎(chǔ)上輸出更好的設(shè)計(jì)解決方案。
本文對(duì)于設(shè)計(jì)的理解闡述屬于個(gè)人見(jiàn)解，不足之處歡迎大家留言補(bǔ)充，我們互相進(jìn)步。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 平面設(shè)計(jì)
這期內(nèi)容依然是關(guān)于設(shè)計(jì)中的細(xì)節(jié)處理?；谖移綍r(shí)的工作經(jīng)驗(yàn)，下面給大家整理了10個(gè)排版小貼士，希望能為你帶來(lái)幫助。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
精準(zhǔn)的分析了UX設(shè)計(jì)師的技能定位。其實(shí)不光是作為一些交互設(shè)計(jì)師自己不太清楚，領(lǐng)導(dǎo)和客戶往往也會(huì)忽略這一重要的步驟...
交互設(shè)計(jì)：我們是不是要把“用戶體驗(yàn)”中的“用戶”拿掉了？
前言：這篇文章寫(xiě)得特別好，很精準(zhǔn)的分析了UX設(shè)計(jì)師的技能定位。其實(shí)不光是作為一些交互設(shè)計(jì)師自己不太清楚，領(lǐng)導(dǎo)和客戶往往也會(huì)忽略這一重要的步驟。文章篇幅有點(diǎn)長(zhǎng)希望大家能靜下心看完，會(huì)幫助自己了解更多哦~
什么是用戶體驗(yàn)設(shè)計(jì)師？
我最近從一位來(lái)自MathWorks（世界領(lǐng)先的技術(shù)計(jì)算和基于模型的設(shè)計(jì)的軟件開(kāi)發(fā)商和供應(yīng)商）的高級(jí)用戶體驗(yàn)專家那兒看到了一個(gè)很棒的廣告，這是其中一些節(jié)選：
與開(kāi)發(fā)團(tuán)隊(duì)合作，遵循以用戶為中心的設(shè)計(jì)方法，協(xié)同工作，對(duì)復(fù)雜的問(wèn)題進(jìn)行頭腦風(fēng)暴和設(shè)計(jì)創(chuàng)新的解決方案
向團(tuán)隊(duì)成員建議使用哪些可行的方法來(lái)回答他們關(guān)于用戶的問(wèn)題，并根據(jù)項(xiàng)目的需求、目標(biāo)和約束來(lái)設(shè)計(jì)方向
與團(tuán)隊(duì)成員密切合作，進(jìn)行用戶研究，發(fā)現(xiàn)痛點(diǎn)，開(kāi)發(fā)用戶配置文件，并創(chuàng)建任務(wù)列表
在紙上畫(huà)出功能原型
進(jìn)行可用性測(cè)試，進(jìn)行用戶交流和網(wǎng)上調(diào)研，組織調(diào)查，并進(jìn)行你認(rèn)為合適的其他可行性評(píng)估
它準(zhǔn)確地描述了我在對(duì)于用戶體驗(yàn)工作的期望。我們從目標(biāo)人群和競(jìng)品那里學(xué)習(xí)有關(guān)項(xiàng)目的一切知識(shí)，找到方法來(lái)研究用戶的需求和目標(biāo)，與目標(biāo)人群一起評(píng)估這些需求，修改項(xiàng)目計(jì)劃，并在最終確定產(chǎn)品之前創(chuàng)造出經(jīng)過(guò)用戶驗(yàn)證的解決方案。
但當(dāng)我換一份新的工作時(shí)（當(dāng)然那是個(gè)例外），我看到許多職位描述都要求具備廣泛的用戶體驗(yàn)技能，有些人甚至要求具備除此以外的更多技能。但似乎他們真的需要一個(gè)能進(jìn)行原型設(shè)計(jì)的視覺(jué)設(shè)計(jì)師。
來(lái)自高級(jí)UI/UX設(shè)計(jì)師的廣告：
有測(cè)試和可用性實(shí)驗(yàn)的經(jīng)驗(yàn)和熟練的交互原型的經(jīng)驗(yàn)
創(chuàng)造清晰和具有視覺(jué)沖擊畫(huà)面的能力
深入了解用戶的興趣和需求
聽(tīng)起來(lái)他們?cè)趯ふ乙粋€(gè)精通調(diào)研、可用性測(cè)試和交互原型的人。但更迫切的需要反映在以下關(guān)于"附加"的要求中：
項(xiàng)目工作能展示強(qiáng)大的用戶體驗(yàn)過(guò)程和完美的細(xì)節(jié)視覺(jué)和交互設(shè)計(jì)原則（IA，IxD，排版，布局，層次結(jié)構(gòu)，顏色，組成）
你認(rèn)為他們只會(huì)招聘一個(gè)可以進(jìn)行用戶調(diào)研，畫(huà)線框圖和測(cè)試的人嗎？或是視覺(jué)設(shè)計(jì)做的很出眾的人？也許這反映了“UI”這部分的職位描述。讓我們來(lái)看看一個(gè)純粹的UX設(shè)計(jì)師的職位，它要求：
優(yōu)秀的分析能力
在實(shí)際用戶研究、信息架構(gòu)、交互設(shè)計(jì)、以用戶為中心的設(shè)計(jì)過(guò)程以及用。戶體驗(yàn)原則和技術(shù)等方面有豐富的經(jīng)驗(yàn)
聽(tīng)起來(lái)不錯(cuò)！但其真面目會(huì)在下一個(gè)要求中顯示：
把想法/概念轉(zhuǎn)化為優(yōu)質(zhì)的視覺(jué)設(shè)計(jì)
如今，用戶體驗(yàn)已成為熱門(mén)詞匯。盡管看起來(lái)不言自明，但一些公司并沒(méi)有明白這一點(diǎn)——他們?nèi)匀缓鲆暳诵袨榻?jīng)驗(yàn)，而不是外表和感覺(jué)。我看到的許多廣告都是在視覺(jué)設(shè)計(jì)上表達(dá)了最具體和生動(dòng)的語(yǔ)言。這讓我撓頭，懷疑是否只有最成熟、規(guī)模最大的公司才真正需要用戶體驗(yàn)，并有足夠的預(yù)算來(lái)支持它。難道其他公司只是通過(guò)招聘視覺(jué)設(shè)計(jì)師并給他們貼上“UX”的標(biāo)簽，來(lái)追個(gè)市場(chǎng)熱點(diǎn)而已嗎？
遠(yuǎn)離調(diào)研？
用戶研究員Alan最近離開(kāi)了一家總部位于亞特蘭大的公司，那里擁有大量的用戶體驗(yàn)員工。他在公司的頭兩年里，參加了全國(guó)各地許多不同類(lèi)型的用戶調(diào)研。然而，在最后一年，他發(fā)現(xiàn)他的調(diào)研被拋到一邊了。
"我的新老板不關(guān)心做調(diào)研。似乎整個(gè)公司都在降低它的重要性。相反，他們會(huì)開(kāi)辦設(shè)計(jì)思維講習(xí)班，直接進(jìn)入開(kāi)發(fā)階段。“任何研究或可用性測(cè)試都被留到最后，只是為了驗(yàn)證解決方案。”
由于該公司以嚴(yán)厲對(duì)待用戶體驗(yàn)而聞名，這一點(diǎn)尤其令人不快。
像用戶體驗(yàn)（ux）這樣流行的詞匯會(huì)突然變得受人追捧，我想不出在這個(gè)行業(yè)還有什么比“設(shè)計(jì)思維”更重要的了。根據(jù)谷歌在過(guò)去的五年中的數(shù)據(jù)，對(duì)設(shè)計(jì)思維的網(wǎng)頁(yè)搜索翻了兩倍。
顯示從2012年12月到2017年6月設(shè)計(jì)思維搜索增加的圖表。
搜索“設(shè)計(jì)思維”，2012年12月-2017年6月（資料來(lái)源：Google Trends）
設(shè)計(jì)思維過(guò)程的第一步是移情化，就是讓用戶參與并觀察他們?nèi)绾握務(wù)摰模瑫r(shí)觀察他們?nèi)绾握嬲瓿扇蝿?wù)。換句話說(shuō)，這就是用戶調(diào)研。誰(shuí)做調(diào)研？做用戶體驗(yàn)的諸位！不難想象互聯(lián)網(wǎng)項(xiàng)目負(fù)責(zé)人和利益相關(guān)者繞過(guò)這個(gè)步驟，直接進(jìn)入步驟2和3，開(kāi)始定義問(wèn)題和開(kāi)展頭腦風(fēng)暴去解決方案。爽死他們了。
在“設(shè)計(jì)思考家最初犯的五個(gè)錯(cuò)誤，”Dana Mitroff Silvers，一個(gè)設(shè)計(jì)思維驅(qū)動(dòng)者和數(shù)據(jù)戰(zhàn)略家寫(xiě)道，“我經(jīng)常被客戶要求跳過(guò)這個(gè)階段，直接進(jìn)入解決問(wèn)題的階段。”
她還描述了我有過(guò)很多次的經(jīng)歷，公司禁止接近用戶！很多時(shí)候，silvers的客戶都會(huì)問(wèn)他們是否可以跳過(guò)這個(gè)階段，因?yàn)樗麄?ldquo;已經(jīng)知道他們的受眾需要什么，可以為他們代言。”
這就說(shuō)的通了。團(tuán)隊(duì)繞過(guò)不熟悉的移情階段，直接進(jìn)入定義問(wèn)題及其解決方案，過(guò)去一直都是這么做的。而且如果沒(méi)有在移情方面的訓(xùn)練和指導(dǎo)，或者充分了解，很容易跳過(guò)這個(gè)階段。在我接下來(lái)的交談中可以看到，一個(gè)公司告訴我他們需要一個(gè)兼并的ux/視覺(jué)設(shè)計(jì)師。我問(wèn)他們是否需要設(shè)計(jì)思維，產(chǎn)品總監(jiān)回答：“是的。”他們跳過(guò)移情步驟了嗎？他同樣回答道：“是的。”
如果一家公司僅僅遵循設(shè)計(jì)思維的最后四個(gè)階段——設(shè)計(jì)、構(gòu)思、原型和測(cè)試——那么一個(gè)用戶體驗(yàn)設(shè)計(jì)師是什么樣的呢？是一個(gè)可以做原型開(kāi)發(fā)的視覺(jué)設(shè)計(jì)師。
分離調(diào)研和設(shè)計(jì)
用戶體驗(yàn)架構(gòu)師Alyssa最近與一家大型電信公司簽訂了用戶調(diào)研合同。讓人失望的是，設(shè)計(jì)師似乎沒(méi)有責(zé)任跟蹤調(diào)研結(jié)果。調(diào)研人員每一到兩周進(jìn)行一次新的可用性測(cè)試，然后將測(cè)試結(jié)果提交給設(shè)計(jì)師，也不知道設(shè)計(jì)師是否會(huì)遵循建議
這似乎不對(duì)。
我已經(jīng)注意到越來(lái)越多的公司在調(diào)研和設(shè)計(jì)師之間拆分他們的用戶體驗(yàn)實(shí)踐。問(wèn)題是，“用戶體驗(yàn)設(shè)計(jì)師”通常不僅要處理交互設(shè)計(jì)，還要處理視覺(jué)設(shè)計(jì)。盡管易于使用的工具的出現(xiàn)使得創(chuàng)建可點(diǎn)擊的原型變得容易，但這是兩個(gè)不同的技能。我期望交互設(shè)計(jì)師分析行為和工作流程，并充當(dāng)用戶的擁護(hù)者；視覺(jué)設(shè)計(jì)師則負(fù)責(zé)推廣品牌。
將設(shè)計(jì)團(tuán)隊(duì)分成調(diào)研人員和設(shè)計(jì)師可能會(huì)阻礙有效的軟件開(kāi)發(fā)。為了真正了解用戶，設(shè)計(jì)師需要培養(yǎng)共情心。他們和其他團(tuán)隊(duì)成員可以通過(guò)進(jìn)行用戶調(diào)研或可用性研究——或者參與調(diào)研過(guò)程來(lái)實(shí)現(xiàn)這一點(diǎn)。這就鎖定了用戶的目標(biāo)和痛點(diǎn)，并讓設(shè)計(jì)師了解到什么是最重要的點(diǎn)，這將有效幫助如何更有針對(duì)性的設(shè)計(jì)。除了對(duì)設(shè)計(jì)人員有好處之外，定期的用戶調(diào)研還可以讓公司了解用戶的期望和行為。如果這些好處能被廣泛理解，那公司一定會(huì)對(duì)共情心和用戶調(diào)研付出比口頭更多的心思了。
功能原型和測(cè)試不足
Alan Cooper是視覺(jué)基礎(chǔ)的創(chuàng)造者和用戶體驗(yàn)的領(lǐng)袖，也是《囚犯?jìng)児芾硎杖菟芬粫?shū)的作者，他在Twitter上抨擊了“原型和測(cè)試”的思維模式并表示：“原型和測(cè)試不是交互設(shè)計(jì)”。 Cooper寫(xiě)道交互和測(cè)試能讓領(lǐng)導(dǎo)感到高興，但它只是蚍蜉撼大樹(shù)。盡管它創(chuàng)造了微小的改進(jìn)，讓設(shè)計(jì)師和他們的領(lǐng)導(dǎo)們充滿希望和快樂(lè)，但它從來(lái)沒(méi)有真正從大的程度上理解用戶或者產(chǎn)品。
我們都搞錯(cuò)了
我們已經(jīng)看到，在設(shè)計(jì)思維的大旗下，公司可能會(huì)跳過(guò)移情階段，回歸到一個(gè)舒適、獨(dú)立的設(shè)計(jì)過(guò)程。設(shè)計(jì)思維確實(shí)帶來(lái)了一個(gè)有價(jià)值的原型/測(cè)試階段，但在用戶研究上的偷工減料卻使本末倒置，并錯(cuò)過(guò)了一個(gè)時(shí)機(jī)，去進(jìn)行具體的見(jiàn)解和創(chuàng)新，從而可以將產(chǎn)品推向頂峰。而斷斷續(xù)續(xù)的研究只會(huì)拖延我們“想要知道我們的用戶想要什么”的心態(tài)。
雖然強(qiáng)調(diào)視覺(jué)設(shè)計(jì)的技巧，但分離研究和設(shè)計(jì)，可能消耗掉那些面向認(rèn)知將用戶體驗(yàn)放在首位的設(shè)計(jì)師。視覺(jué)設(shè)計(jì)提供了一個(gè)重要的初步印象，許多研究表明，人們對(duì)第一眼有吸引力的網(wǎng)站的評(píng)價(jià)通常比較高。但視覺(jué)只是用戶體驗(yàn)中的一部分。一個(gè)經(jīng)常使用你的產(chǎn)品的用戶到底是如何評(píng)價(jià)的？視覺(jué)效果將發(fā)揮一定作用，但我認(rèn)為它更有可能依賴于一個(gè)偉大的工作流程——需要反復(fù)跟進(jìn)用戶體驗(yàn)的流程。
我們到底要什么？
我不知道出了什么問(wèn)題，但我猜是我們的理由還不夠充分。我們都含蓄地理解真正的用戶體驗(yàn)過(guò)程的價(jià)值，但開(kāi)發(fā)或市場(chǎng)主管是否也是如此？
可能是我們自己被自己的完美所欺騙了。我們已經(jīng)大幅改善了用戶體驗(yàn)的程度，現(xiàn)在在任何手機(jī)上都可以找到偉大設(shè)計(jì)的例子。改進(jìn)后的開(kāi)發(fā)工具利用了我們創(chuàng)新的交互模式，小工具使平面設(shè)計(jì)看起來(lái)很棒。也許開(kāi)發(fā)領(lǐng)導(dǎo)者覺(jué)得他們已經(jīng)看到了足夠好的設(shè)計(jì)，他們相信他們也可以做到這一點(diǎn)。
作者：March1996
鏈接：https://www.zcool.com.cn/article/ZNzYyNDU2.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jsyqsx.cn