Nathan Yau 在《數(shù)據(jù)之美》中寫(xiě)到，可視化并不僅僅是一種工具，而更像是一種媒介，能最大化幫助我們挖掘數(shù)字背后的信息，讓數(shù)據(jù)「開(kāi)口」講故事。
可視化設(shè)計(jì)將信息和數(shù)據(jù)轉(zhuǎn)化為用戶(hù)能夠理解的圖表、圖形和地圖等元素，通過(guò)色彩、樣式凸顯其中的變化，幫助用戶(hù)更的獲取信息、判斷趨勢(shì)、識(shí)別變化等。那么在可視化設(shè)計(jì)中怎么讓用戶(hù)能更好的看清看懂?dāng)?shù)據(jù)或信息、讓用戶(hù)快速感知數(shù)據(jù)變化、讓數(shù)據(jù)于用戶(hù)所處的情境相呼應(yīng)是微交互思考的方向。
通過(guò)可視化表達(dá)，將不易理解的信息呈現(xiàn)的更加清晰明了，幫助用戶(hù)理解吸收。
1. 支付寶-基金指數(shù)
運(yùn)用一般人對(duì)紅綠燈的理解，將其綠燈行紅燈停的概念，運(yùn)用在基金投資上，幫助新手能簡(jiǎn)單理解指數(shù)估值的走勢(shì)，更容易去判斷該基金買(mǎi)賣(mài)的時(shí)機(jī)，綠燈為值得購(gòu)買(mǎi)，紅燈為建議賣(mài)出。
2. 支付寶-基金收益
欲購(gòu)買(mǎi)基金時(shí)，透過(guò)尺標(biāo)的形式選擇購(gòu)買(mǎi)金額，同時(shí)下方展示購(gòu)買(mǎi)該金額的預(yù)期收益，并用實(shí)際生活中的物品舉例，幫助用戶(hù)理解獲益的金額價(jià)值。
3. 手機(jī)淘寶-金幣小鎮(zhèn)
做任務(wù)簽到獲取能量，使用進(jìn)度條的形式，來(lái)表達(dá)能量與金幣值轉(zhuǎn)換的關(guān)系，如當(dāng)前獲取多少的能量，能兌換成多少金幣。
可視化中的變化凸顯能幫助用戶(hù)快速達(dá)成目標(biāo)，在最少的時(shí)間內(nèi)獲取更多的信息，并引導(dǎo)用戶(hù)進(jìn)行更深層次的探究。可視化中的變化凸顯能幫助用戶(hù)快速達(dá)成目標(biāo)，在最少的時(shí)間內(nèi)獲取更多的信息，并引導(dǎo)用戶(hù)進(jìn)行更深層次的探究。
1. AirVisual-空氣質(zhì)量指標(biāo)
依據(jù)顏色與人臉圖形表達(dá)空氣質(zhì)量程度，顏色從綠黃橙紅紫暗紫色，人臉圖形從開(kāi)心、難過(guò)的表情、戴口罩到戴防毒面具等，來(lái)表達(dá)空氣質(zhì)量從好到壞，讓用戶(hù)能直接看到顏色與圖形就能感知到當(dāng)前情況，且知道對(duì)應(yīng)的防范方式。
2. 我的天氣-3D地圖
日出日落的時(shí)間以動(dòng)態(tài)的地球展示，地球滑動(dòng)操作，讓用戶(hù)能實(shí)際感知到地球的光照情況。
3. 騰訊手機(jī)管家-充電狀態(tài)
手機(jī)充電時(shí)，以整個(gè)屏幕作為充電量的比例展示，以虛擬鴨子游水的有趣形象，透過(guò)水位的高低表達(dá)當(dāng)前已經(jīng)充電到達(dá)的數(shù)值。
在可視化中增加與用戶(hù)情境相關(guān)的元素，能夠讓用戶(hù)獲得更貼切，更直接的信息感知。
1. 高德-導(dǎo)航
當(dāng)開(kāi)車(chē)導(dǎo)航的當(dāng)下，如果車(chē)速過(guò)快，在屏幕的雙側(cè)會(huì)顯示紅色的超速效果提示，比起左上角的車(chē)速展示，能更直接快速的感知到已經(jīng)超速了。
2. 高德-用時(shí)預(yù)估
查看行程導(dǎo)航的預(yù)估用時(shí)，運(yùn)用柱狀圖直觀展示不同出發(fā)時(shí)間到達(dá)目的地的所需時(shí)間，滑動(dòng)時(shí)有震動(dòng)的切換效果，同時(shí)上方地圖會(huì)顯示該時(shí)段路途上的擁堵情況，顯示預(yù)計(jì)到達(dá)時(shí)間。
提供足夠便捷的篩選或操控組件，方便用戶(hù)查看更多視圖空間，快速定位想要的內(nèi)容。
1. 攜程-機(jī)票票價(jià)對(duì)比
運(yùn)用柱狀圖展示不同日期的機(jī)票票價(jià)，能直觀看出價(jià)格間的差異，點(diǎn)擊后，可切換到該日期，查看具體航班資訊。
2. 攜程-機(jī)票低價(jià)提醒
機(jī)票的價(jià)格是浮動(dòng)的，可透過(guò)低價(jià)提醒的設(shè)置，主動(dòng)提示用戶(hù)票價(jià)已到達(dá)該預(yù)期價(jià)位，設(shè)置時(shí)如果價(jià)格設(shè)置的過(guò)低，到達(dá)的可能性越低，因此以?xún)r(jià)格滑動(dòng)條操作，并以綠橙紅表達(dá)成功率的高低做提示。
文章來(lái)源：優(yōu)設(shè) 作者：AlibabaDesign
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
如何產(chǎn)出一個(gè)對(duì)實(shí)際落地更有指導(dǎo)性的設(shè)計(jì)分析？本文結(jié)合實(shí)際項(xiàng)目中常常會(huì)遇到的一些問(wèn)題，總結(jié)了前期設(shè)計(jì)分析的一些實(shí)踐經(jīng)驗(yàn)。
設(shè)計(jì)分析是作為交互設(shè)計(jì)師必備的一項(xiàng)基礎(chǔ)能力，一套有效的分析思路可以幫助我們找準(zhǔn)設(shè)計(jì)發(fā)力點(diǎn)，更效率的推導(dǎo)出合理的設(shè)計(jì)方案，它是一種思維能力，也是一種方法工具，但是在我們的實(shí)際項(xiàng)目中，常常會(huì)遇到這樣幾種場(chǎng)景：
新手設(shè)計(jì)師或者第一次做活動(dòng)的設(shè)計(jì)師，設(shè)計(jì)分析不知道要如何入手
花了很多時(shí)間做分析，但感覺(jué)對(duì)實(shí)際畫(huà)稿子并沒(méi)有什么幫助
分析過(guò)程中發(fā)散了很多很好的點(diǎn)，但最后大多都落不了地
這些情況常常會(huì)導(dǎo)致設(shè)計(jì)分析流于形式，套用了很多方法、花了很多時(shí)間、輸出了很長(zhǎng)的文檔，內(nèi)容看上去似乎很豐富，但落地的方案卻平平無(wú)奇，甚至也會(huì)自我懷疑設(shè)計(jì)分析真的有用嗎？
總結(jié)下來(lái)，會(huì)出現(xiàn)這些場(chǎng)景的原因有兩點(diǎn)：首先是設(shè)計(jì)分析太泛，沒(méi)有聚焦到核心問(wèn)題；其次是時(shí)間分配不合理，沒(méi)有抓到發(fā)力重點(diǎn)。那么結(jié)合我們目前的項(xiàng)目來(lái)看，怎樣做一個(gè)更有用的設(shè)計(jì)分析呢？
根據(jù)活動(dòng)產(chǎn)品化設(shè)計(jì)思路，可以把我們的日常項(xiàng)目分為兩類(lèi)：迭代型項(xiàng)目以及探索型項(xiàng)目。
迭代型項(xiàng)目是指過(guò)往已有過(guò)積累的成熟項(xiàng)目，例如大促主會(huì)場(chǎng)、我的專(zhuān)屬會(huì)場(chǎng)、榜單會(huì)場(chǎng)、攻略等等，通常是一些已經(jīng)比較固化的經(jīng)典業(yè)務(wù)，或基礎(chǔ)的功能類(lèi)業(yè)務(wù)；探索型項(xiàng)目則是一些全新的業(yè)務(wù)方向，例如下沉?xí)?chǎng)、直播會(huì)場(chǎng)等等，剛處于進(jìn)入期或成長(zhǎng)初期。
迭代型項(xiàng)目容易陷入的一個(gè)誤區(qū)是時(shí)間分配不合理，沒(méi)有抓到發(fā)力重點(diǎn)，尤其是對(duì)于很多新手設(shè)計(jì)師來(lái)說(shuō)，往往大部分的精力花在重復(fù)之前已經(jīng)做過(guò)的內(nèi)容，比如花了很多時(shí)間重新去分析用戶(hù)、分析方向、分析行業(yè)趨勢(shì)等等，但是對(duì)于已經(jīng)比較穩(wěn)定的迭代型項(xiàng)目來(lái)說(shuō)，這部分背景內(nèi)容相對(duì)來(lái)說(shuō)已經(jīng)比較固化（除非有明顯的變化），這就可能會(huì)導(dǎo)致重復(fù)分析出來(lái)的結(jié)論跟之前的差別并不大，也很難帶來(lái)實(shí)際業(yè)務(wù)提升。
既然迭代型項(xiàng)目過(guò)往已有過(guò)經(jīng)驗(yàn)和策略的沉淀，也經(jīng)歷過(guò)多輪的數(shù)據(jù)迭代，核心思路應(yīng)該是先定義要解決什么問(wèn)題、然后才是如何解決，這樣才能找準(zhǔn)關(guān)鍵發(fā)力點(diǎn)。
要解決什么問(wèn)題
首先要思考是不是真的有問(wèn)題，沒(méi)有問(wèn)題的項(xiàng)目也可以不用再花時(shí)間做分析，效率做即可，例如像全部會(huì)場(chǎng)，本身的業(yè)務(wù)模式就比較簡(jiǎn)單，過(guò)往的效果也相對(duì)比較穩(wěn)定，如果不考慮進(jìn)行突破性的創(chuàng)新，通常是可以效率復(fù)用的，這種時(shí)候則不需要再去做分析，畢竟也要考慮投入產(chǎn)出比。
那么怎么定義要解決什么問(wèn)題呢？有三個(gè)常用的思路：看數(shù)據(jù)、看用戶(hù)反饋、看運(yùn)營(yíng)策略。
第一，從數(shù)據(jù)分析中找到關(guān)鍵問(wèn)題，例如根據(jù)618的項(xiàng)目數(shù)據(jù)復(fù)盤(pán)，我們發(fā)現(xiàn)預(yù)售會(huì)場(chǎng)、品牌會(huì)場(chǎng)的頁(yè)面跳失率較高，那么雙11核心可以圍繞“如何降低跌失率？”“如何提升流量利益效率？”去進(jìn)行分析，從而推導(dǎo)出更有針對(duì)性的設(shè)計(jì)策略。
第二，根據(jù)用戶(hù)反饋來(lái)找到關(guān)建問(wèn)題，例如過(guò)往的主會(huì)場(chǎng)，用戶(hù)調(diào)研一直都會(huì)反饋主推樓層太長(zhǎng)而找不到感興趣的內(nèi)容，那么可以圍繞“如何更好的進(jìn)行需求匹配？”“如何提升屏效？”來(lái)思考和分析，解決實(shí)際存在的問(wèn)題，才更有可能提升體驗(yàn)和數(shù)據(jù)。
第三，結(jié)合運(yùn)營(yíng)策略，很多業(yè)務(wù)雖然已經(jīng)相對(duì)穩(wěn)定，但隨著每次大促戰(zhàn)略的變化，運(yùn)營(yíng)策略上也會(huì)有一些新的需求，那么就根據(jù)這些差異化的訴求去找到發(fā)力點(diǎn)。例如針對(duì)我的專(zhuān)屬會(huì)場(chǎng)，在原會(huì)場(chǎng)定位不變的情況下，在近兩次大促中運(yùn)營(yíng)側(cè)都提出需要由這個(gè)會(huì)場(chǎng)來(lái)承載平臺(tái)服務(wù)內(nèi)容曝光的訴求，那么服務(wù)內(nèi)容如何匹配“專(zhuān)屬”會(huì)場(chǎng)的用戶(hù)心智，則是這個(gè)會(huì)場(chǎng)可以重點(diǎn)解決的問(wèn)題。
如何判斷真正有效的解決方案
在定義清楚核心要解決的問(wèn)題后，就可以按照常用的設(shè)計(jì)方法進(jìn)行方案的推導(dǎo)，在發(fā)散解決方案的過(guò)程中，如何判斷方案的合理有效，確保最后的可落地性，是讓我們?cè)O(shè)計(jì)分析有價(jià)值的關(guān)鍵，因此總結(jié)了兩個(gè)常用的技巧。
首先要理解業(yè)務(wù)邏輯，減少無(wú)用的策略發(fā)散，很多時(shí)候我們的方案很難推動(dòng)落地的原因，是沒(méi)有考慮到業(yè)務(wù)的訴求，越能夠深入的了解業(yè)務(wù)，才能更好的解決業(yè)務(wù)側(cè)的顧慮，保證方案的可落地性。
其次是要跳出來(lái)從整體來(lái)看優(yōu)先級(jí)，我們?cè)谶M(jìn)入自己的思維邏輯中時(shí)，會(huì)比較容易陷入細(xì)節(jié)，有時(shí)候自己覺(jué)得很棒的想法花很大力氣去推卻很難獲得其他人的重視，并不是因?yàn)槲覀兊姆桨覆粔蚝?，而是沒(méi)有關(guān)注到整體優(yōu)先級(jí)，因此要學(xué)會(huì)看全局，通過(guò)多溝通多評(píng)估的方式來(lái)讓自己的判斷更加準(zhǔn)確。
探索型的項(xiàng)目沒(méi)有過(guò)往的參考依據(jù)，相當(dāng)于需要從零開(kāi)始去探索如何做，對(duì)于設(shè)計(jì)分析的能力要求會(huì)更高，那么常常容易陷入兩種極端相反的誤區(qū)，要不就是容易被方法論套路，設(shè)計(jì)分析過(guò)泛但得不出實(shí)際有價(jià)值的結(jié)論，要不就是完全沒(méi)有頭緒，屬于想一步做一步的類(lèi)型，分析的內(nèi)容之間缺乏邏輯。
因此，探索型項(xiàng)目的核心思路是要先有分析框架、再做縱向深挖，就像畫(huà)交互稿的過(guò)程一樣，需要先定義交互框架，縱再進(jìn)行交互細(xì)節(jié)的打磨，才能夠保證設(shè)計(jì)效率及效果。
確定分析框架
確定分析框架的過(guò)程主要分為兩步，一是先想清楚要分析哪些內(nèi)容，包括哪些環(huán)節(jié)是必要的，哪些是重點(diǎn)的，時(shí)間要怎么分配。例如當(dāng)我們第一次做寵物品類(lèi)活動(dòng)時(shí)，需要對(duì)這個(gè)品類(lèi)有深入的理解，因此我們?cè)谇捌谛枰シ治鲳B(yǎng)寵人群的特征、寵物行業(yè)的發(fā)展現(xiàn)狀、京東寵物貨品的優(yōu)勢(shì)等內(nèi)容，而如果我們做的是一次大促的綜合會(huì)場(chǎng)，其主要用戶(hù)群體如果跟常規(guī)站內(nèi)主流群體并無(wú)差異時(shí)，則不需要再花費(fèi)大量的時(shí)間單獨(dú)去分析用戶(hù)畫(huà)像，因此，需要結(jié)合項(xiàng)目情況先想清楚需要分析的內(nèi)容、以及這些內(nèi)容的必要性和優(yōu)先級(jí)。
第二步是梳理清楚內(nèi)容之間的邏輯關(guān)系，常見(jiàn)的邏輯結(jié)構(gòu)有兩種，一是遞進(jìn)式的推導(dǎo)（A→B→C），分析維度之間是先后關(guān)聯(lián)的，通過(guò)嚴(yán)謹(jǐn)?shù)倪壿嫴讲酵茖?dǎo)而來(lái)，例如先梳理用戶(hù)畫(huà)像、才能進(jìn)行用戶(hù)行為痛點(diǎn)的分析、進(jìn)而推導(dǎo)解決方案；另一種邏輯結(jié)構(gòu)是進(jìn)行綜合歸納（A+B→C），即通過(guò)幾個(gè)不同的維度綜合推導(dǎo)，例如經(jīng)典的五導(dǎo)家分析方法，結(jié)合用戶(hù)目標(biāo)以及業(yè)務(wù)目標(biāo)綜合推導(dǎo)出設(shè)計(jì)目標(biāo)。
在很多設(shè)計(jì)分析中，我們也會(huì)參考一些方法論，其實(shí)方法論提供的就是分析框架，在理解了這一步之后，相信也能更靈活的應(yīng)用。以下是根據(jù)我們?nèi)粘ｍ?xiàng)目梳理的一些常用分析框架。
縱向深挖如何得到有價(jià)值的策略
有了分析框架后，接下來(lái)就可以進(jìn)入每個(gè)模塊的具體分析了，如果要得到有價(jià)值的策略，同樣有兩個(gè)小技巧。
首先，策略要足夠具體、有差異化，盡量避免提出過(guò)于籠統(tǒng)的結(jié)論。例如針對(duì)如何提升流量利用率比較泛的策略就是要進(jìn)行流量精細(xì)化運(yùn)營(yíng)，這個(gè)大的方向沒(méi)有錯(cuò)，但如果只到這一步是很難指導(dǎo)具體內(nèi)容落地的，所以需要細(xì)化到流量的渠道有哪些、這些渠道有什么樣的特征、針對(duì)不同的渠道用戶(hù)可以用怎樣的內(nèi)容吸引他們，才能夠更準(zhǔn)確的判斷是否會(huì)存什么問(wèn)題。
其次，策略最好能夠關(guān)聯(lián)驗(yàn)證指標(biāo)，可以參考UGD數(shù)據(jù)增長(zhǎng)思路，在推導(dǎo)策略時(shí)要能預(yù)判它能帶來(lái)哪些數(shù)據(jù)指標(biāo)的提升，以保證設(shè)計(jì)分析的結(jié)論是有理有據(jù)的。
文章來(lái)源：站酷 作者：大蔥設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
今天跟大家分享的是深色背景的網(wǎng)站界面，深色背景穩(wěn)重大氣，體現(xiàn)科技感。在界面布局方面簡(jiǎn)潔清晰，同時(shí)界面中的表格、按鈕、標(biāo)簽、圖表等控件精致美觀，不管是做web端網(wǎng)頁(yè)、大屏界面，還是手機(jī)app，都可以借鑒。
（圖片均來(lái)源于網(wǎng)絡(luò)）
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)之網(wǎng)站設(shè)計(jì)案例欣賞（一）
故事線(xiàn)，即故事框架，在前面的系列有略微提到過(guò)，畢竟如何串起信息點(diǎn)以及頁(yè)面的構(gòu)圖方式是服務(wù)于故事線(xiàn)的。在我們服務(wù)用戶(hù)的過(guò)程中，發(fā)現(xiàn)有些項(xiàng)目的表述方式是重復(fù)的。那重復(fù)的原因是啥呢？簡(jiǎn)單的想了下這些問(wèn)題，不難發(fā)現(xiàn)用戶(hù)吸收信息的方式和業(yè)務(wù)邏輯大致是相似的，所以我們?cè)谧鲰?xiàng)目的過(guò)程拿到用戶(hù)給出的需求后想出的解決辦法中也是具有一定的相似性。
解決辦法中的表述方式是單獨(dú)存在的，是對(duì)應(yīng)不同的業(yè)務(wù)場(chǎng)景，我們想要的是將故事線(xiàn)的方法論總結(jié)下來(lái)，畢竟思想是永恒的。專(zhuān)門(mén)用一章講一下我們總結(jié)的方法論是因?yàn)檫@些故事線(xiàn)本身是抽象的，具有高度的總結(jié)性，能夠適用于大多業(yè)務(wù)，也方便新人設(shè)計(jì)師在做需求的時(shí)候有一定之規(guī)可以參考。
發(fā)現(xiàn)現(xiàn)象-提煉問(wèn)題-問(wèn)題分析-解決問(wèn)題這條故事線(xiàn)，是我自己寫(xiě)文章的時(shí)候想出來(lái)的，確實(shí)故事線(xiàn)最早的體現(xiàn)就是工作報(bào)告之中。這個(gè)可算是黃金故事線(xiàn)，百分之八九十都能套進(jìn)去。因此適用面特別廣，我們經(jīng)常使用這條故事線(xiàn)來(lái)講民生問(wèn)題，特別在脫貧攻堅(jiān)的專(zhuān)題中用的較多。那么就圍繞脫貧攻堅(jiān)專(zhuān)題來(lái)講一下怎么鋪開(kāi)這條故事線(xiàn)。
以茶農(nóng)的故事作為切入點(diǎn)，我們發(fā)現(xiàn)實(shí)際的場(chǎng)景是這樣的。A地的茶葉產(chǎn)業(yè)鏈較完整 ，B地是A地的幫扶對(duì)象，但是B地的經(jīng)濟(jì)民生一直不溫不火的狀態(tài)。從大數(shù)據(jù)的角度，通過(guò)監(jiān)控B地產(chǎn)業(yè)鏈的指標(biāo)不難發(fā)現(xiàn)其實(shí)是有文章可以做的，簡(jiǎn)單來(lái)論述下主要是以下四塊內(nèi)容。
發(fā)現(xiàn)現(xiàn)象：B地移植了A地的茶葉產(chǎn)業(yè)做法，本以為能大力提升B地經(jīng)濟(jì) ，但是從B地的GDP、產(chǎn)業(yè)增加值、人均可支配收入并沒(méi)得到明顯持久性提升。
提煉問(wèn)題：通過(guò)監(jiān)控B地的茶葉市場(chǎng)調(diào)研數(shù)據(jù)，不難發(fā)現(xiàn)B地的市場(chǎng)和A地的高度重合。B地的經(jīng)濟(jì)不溫不火應(yīng)該是做法全盤(pán)照抄A地，并未形成自身特色，在市場(chǎng)上未拉開(kāi)差距，一直以低廉利潤(rùn)來(lái)維持銷(xiāo)量，產(chǎn)生不了其他高額的產(chǎn)品附加值。
問(wèn)題分析：通過(guò)分析B地的茶葉市場(chǎng)調(diào)研數(shù)據(jù)，發(fā)現(xiàn)在其他緯度上B地的茶葉產(chǎn)業(yè)市場(chǎng)并沒(méi)有拓展。比如A地深耕多年在銷(xiāo)售渠道上，建立了產(chǎn)業(yè)全國(guó)銷(xiāo)售網(wǎng)，從數(shù)據(jù)上分析上表示祖國(guó)東南板塊基本被A地壟斷，但是其他板塊并沒(méi)有全部滲透，B地是否可以向那些板塊進(jìn)軍。諸如此類(lèi)的問(wèn)題都可以從數(shù)據(jù)層面分析出來(lái)。
解決問(wèn)題：當(dāng)核心問(wèn)題被提出分析后，得到一些改良意見(jiàn)。那么未來(lái)的產(chǎn)業(yè)運(yùn)轉(zhuǎn)以這些意見(jiàn)為參考，建立起合適的監(jiān)控指標(biāo)，用來(lái)佐證這些改良意見(jiàn)是否具有成效。
這條故事性適用性廣，挺多問(wèn)題都能放進(jìn)去。但是需要明確一件事，每一步的對(duì)應(yīng)指標(biāo)需要有代表性，不然說(shuō)明不了問(wèn)題，還有上面的故事線(xiàn)是如何鋪開(kāi)的僅僅作為解釋。
宏觀-中觀-微觀這條故事線(xiàn)，是我在做經(jīng)濟(jì)項(xiàng)目的過(guò)程之中挖掘出來(lái)的。當(dāng)時(shí)在做項(xiàng)目的時(shí)候主要還是從宏觀和微觀兩個(gè)角度去論述，通過(guò)化繁為簡(jiǎn)、以小見(jiàn)大來(lái)表達(dá)我們的想法。最后通過(guò)總結(jié)整理后，發(fā)現(xiàn)加上一個(gè)中觀緯度會(huì)更加順暢和飽滿(mǎn)。這條故事線(xiàn)適用于不同領(lǐng)域至上而下的政策傳導(dǎo)和政府關(guān)懷的信息串聯(lián)。
就拿這個(gè)經(jīng)濟(jì)項(xiàng)目為例子講一下這條線(xiàn)怎么鋪開(kāi)。當(dāng)時(shí)拿到的需求是客戶(hù)想通過(guò)數(shù)據(jù)看下十三五規(guī)劃后一個(gè)變化，怎么去響應(yīng)中央的號(hào)召，怎么通過(guò)解讀工作將政策和人民群眾建立起橋梁，怎么將人民群眾落到實(shí)處。其實(shí)這就是一個(gè)從宏觀到微觀過(guò)程，換句話(huà)說(shuō)就是方向-工作-成果。通過(guò)歸類(lèi)提煉信息點(diǎn)，我們不難發(fā)現(xiàn)可以將信息分成三塊內(nèi)容。
宏觀：中央經(jīng)濟(jì)會(huì)議的主基調(diào)、國(guó)家層面的重大項(xiàng)目、國(guó)家統(tǒng)計(jì)局頒布的監(jiān)測(cè)重點(diǎn)指標(biāo)；
中觀：省委或者地方上是怎么解讀政策的，并且針對(duì)自身特點(diǎn)增添了什么內(nèi)容；
微觀：人民群眾的生活變化——物價(jià)的監(jiān)控指標(biāo)、人均收入的監(jiān)控指標(biāo)、生活質(zhì)量的監(jiān)控指標(biāo)；
分清楚這些后就用設(shè)計(jì)語(yǔ)言一步一步的表述下去，形成從上到下的一整套解釋。順便提一嘴，需要在橫向上做上數(shù)據(jù)比對(duì)分析。這樣縱向有業(yè)務(wù)，橫向有數(shù)據(jù)，整條線(xiàn)才算飽滿(mǎn)。
基礎(chǔ)-工具-落地-成果這條故事線(xiàn)，是我同事在和警察叔叔斗智斗勇好幾個(gè)月后積累出來(lái)的，經(jīng)過(guò)我們不斷實(shí)踐總結(jié)出這條故事線(xiàn)。這條故事線(xiàn)是從大量的業(yè)務(wù)邏輯中提取的，環(huán)節(jié)和環(huán)節(jié)之間并不是完全獨(dú)立，是互補(bǔ)互存的，描述的過(guò)程中需要4個(gè)環(huán)節(jié)同時(shí)存在才能為最后形成的結(jié)論產(chǎn)生背書(shū)。這條故事線(xiàn)適用于描述自有業(yè)務(wù)的從無(wú)到有的演變過(guò)程，體現(xiàn)自身在對(duì)應(yīng)領(lǐng)域的耕耘。
那么就拿我同事這段不堪回首的往事來(lái)解釋這條故事線(xiàn)是怎么鋪開(kāi)的（dog臉~）。當(dāng)時(shí)的需求是這樣的，我們的客戶(hù)即警察叔叔需要向外界介紹他們工作成果（向保護(hù)我們安全的警察叔叔致以最高的敬意?。Ｎ覀兂檎{(diào)了很多相關(guān)的歷史重大事件的破案歷程來(lái)詮釋警察叔叔的辛苦，但是警察叔叔們均不滿(mǎn)意。他們認(rèn)為還是太片面了，并沒(méi)有將大局講清楚。反復(fù)和客戶(hù)溝通最終確認(rèn)了業(yè)務(wù)，因此有了這條故事線(xiàn)的雛形。簡(jiǎn)單來(lái)論述下主要是以下四塊內(nèi)容。
基礎(chǔ)：公安存檔的犯罪記錄庫(kù)與人臉識(shí)別前端設(shè)備相結(jié)合產(chǎn)生大量的預(yù)警，在庫(kù)內(nèi)形成預(yù)警日志；
工具：簡(jiǎn)單來(lái)說(shuō)同一類(lèi)犯罪，比如賭博經(jīng)常出現(xiàn)在某個(gè)片區(qū)，通過(guò)建立模型可以知道大致動(dòng)向。那么不同的規(guī)則不同的對(duì)象可以建立不同的模型，即犯罪模型就是工具；
落地：把模型推廣用出去，使用模型進(jìn)行分析。比如多位賭博人員被捕捉到經(jīng)常出現(xiàn)在大屏上某個(gè)特定的片區(qū)，多地協(xié)調(diào)開(kāi)始偵辦該犯罪活動(dòng)。
成果：將繳獲贓款、犯罪人員、案件細(xì)節(jié)反補(bǔ)入基礎(chǔ)庫(kù)中，形成業(yè)務(wù)上的閉環(huán)。
這條故事線(xiàn)需要將自身想表達(dá)的業(yè)務(wù)嵌入這四個(gè)環(huán)節(jié)之中，并且從頭至尾必須同時(shí)存在，缺少哪個(gè)環(huán)節(jié)最終的閉環(huán)無(wú)法形成。多地業(yè)務(wù)反饋，形成良好的閉環(huán)是優(yōu)勢(shì)互補(bǔ)、避免資源浪費(fèi)的最好體現(xiàn)。
核心-緯度1/緯度2/...緯度N這條故事線(xiàn)，是在做西湖項(xiàng)目的時(shí)候發(fā)現(xiàn)的。主要的做法就是以一個(gè)核心為內(nèi)容，分不同的緯度去詮釋這個(gè)核心的價(jià)值。在表達(dá)方式算是總-分的概念，可能最后在從分的地方再繞回來(lái)。相比其他的故事線(xiàn)，這比較“面”。將一個(gè)大問(wèn)題分割成幾個(gè)小問(wèn)題，一塊一塊去介紹。這條故事線(xiàn)適用于核心內(nèi)容比較寬泛，涉及業(yè)務(wù)領(lǐng)域較多的主體單位。
簡(jiǎn)單介紹下這個(gè)項(xiàng)目用來(lái)解釋這條故事線(xiàn)是在怎么鋪開(kāi)的。西湖的項(xiàng)目是一個(gè)大結(jié)合體，是西湖管委會(huì)關(guān)于自身治理的一個(gè)成果展示。由于管轄的區(qū)域中存在較多不同領(lǐng)域的內(nèi)容，故此采用這種方式論述。主要是以下五塊內(nèi)容。
核心：西湖景區(qū)主要是旅游產(chǎn)業(yè)，對(duì)應(yīng)的核心是景區(qū)游玩人數(shù)（即公園年卡辦理數(shù)、收費(fèi)景點(diǎn)入園人數(shù)）。那么圍繞這個(gè)核心就有挺多緯度是可以影響的，最后確定下來(lái)的是五個(gè)緯度。
緯度1：治景。監(jiān)控實(shí)施客流，以及分景點(diǎn)監(jiān)控其客流量和停車(chē)服務(wù)，實(shí)現(xiàn)動(dòng)態(tài)分析擁擠程度；
緯度2：治業(yè)。監(jiān)控與西湖相關(guān)的產(chǎn)業(yè)和企業(yè)的狀態(tài)值，掌握周邊合作企業(yè)的發(fā)展?fàn)顟B(tài)；
緯度3：治安。轄區(qū)內(nèi)以網(wǎng)格為單位，監(jiān)控網(wǎng)格內(nèi)治安事件的狀態(tài)，比如綜合治理、市場(chǎng)監(jiān)管等事件的發(fā)生數(shù)；
緯度4：治水。西湖大面積是水，因此監(jiān)控西湖的水質(zhì)水量也是重要的一環(huán)；
緯度5：治山。監(jiān)控西湖的山體內(nèi)基礎(chǔ)資源的布設(shè)，是便民利民的體現(xiàn)，也是管理成果之一；
形象的解釋就是核心是塊大餅，不同的緯度就是去分這塊大餅。最終的目的是讓受眾更好的了解故事，因此分大餅的時(shí)候請(qǐng)不要過(guò)于深入展開(kāi)某個(gè)緯度，各個(gè)緯度偏向均衡介紹。避免過(guò)于陷入某個(gè)緯度導(dǎo)致宏觀核心不可觀。
起初-然后-接著-最終這條故事線(xiàn)是按照用戶(hù)行為沉淀出來(lái)的，一般人在介紹自己經(jīng)歷的事情的往往也是用這樣的格式。其實(shí)這個(gè)故事線(xiàn)我們也是偶爾在需要點(diǎn)題的內(nèi)容上做分析詮釋?zhuān)贸鰜?lái)講只是想多個(gè)內(nèi)容多個(gè)探討的資源。這條故事線(xiàn)適用于具體案例一步一步按照節(jié)奏講述的場(chǎng)景。
那我們拿一個(gè)用戶(hù)滿(mǎn)意度的流程來(lái)解釋這條故事線(xiàn)是在怎么鋪開(kāi)的。這個(gè)用戶(hù)滿(mǎn)意度的項(xiàng)目是分析市民來(lái)窗口辦理業(yè)務(wù)的效率以及情緒，從宏觀層面統(tǒng)計(jì)轄區(qū)內(nèi)所有網(wǎng)點(diǎn)窗口的業(yè)務(wù)辦理效率。需要我們將市民來(lái)窗口辦理業(yè)務(wù)的整個(gè)流程清楚細(xì)致的剖析，通過(guò)對(duì)業(yè)務(wù)流程的觀察，我們利用這條故事線(xiàn)大致分了以下四步。
起初：排隊(duì)取號(hào)階段。分析目前所有網(wǎng)點(diǎn)窗口排隊(duì)取號(hào)的擁擠程度（取號(hào)量和等待人數(shù)）
然后：業(yè)務(wù)辦理階段。分析目前所有網(wǎng)點(diǎn)窗口業(yè)務(wù)辦理的速度效率（辦結(jié)量、過(guò)號(hào)量、辦理時(shí)長(zhǎng)）
接著：現(xiàn)場(chǎng)評(píng)價(jià)階段。分析目前所有網(wǎng)點(diǎn)窗口現(xiàn)場(chǎng)及時(shí)反饋的情況（數(shù)量、滿(mǎn)意率、網(wǎng)點(diǎn)排名）
最終：回訪評(píng)價(jià)階段。分析目前所有網(wǎng)點(diǎn)窗口業(yè)務(wù)辦理的質(zhì)量（是否最多跑一次、回訪評(píng)價(jià)）
按照節(jié)奏講述具體案例有個(gè)需要明確的是，信息的接收方會(huì)隨著介紹陷入具體的場(chǎng)景，這時(shí)候當(dāng)講完后繞回來(lái)輔以幾個(gè)總結(jié)性指標(biāo)來(lái)概括整個(gè)場(chǎng)景，會(huì)更加適合信息傳達(dá)。
以上五條故事線(xiàn)均是從表達(dá)中抽離出來(lái)的，它和視覺(jué)手法等都是為信息傳達(dá)服務(wù)的，目標(biāo)都是為了受眾更好的接受信息。故事線(xiàn)本身是抽象的，需要多使用在業(yè)務(wù)上才會(huì)熟悉。上述講述的這五條，其實(shí)大家細(xì)心點(diǎn)會(huì)發(fā)現(xiàn)并不是完全獨(dú)立，存在換套說(shuō)辭就可以融在一起的情況。我們自己在使用的過(guò)程中也是多條一起講問(wèn)題，衡量的標(biāo)準(zhǔn)就是把故事講清楚。
文章來(lái)源：tob.design 作者：王亮亮同學(xué)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
引子
說(shuō)起大數(shù)據(jù)這個(gè)領(lǐng)域，可是近些年相當(dāng)炙手可熱的產(chǎn)業(yè)，而伴隨這個(gè)產(chǎn)業(yè)提供了很多就業(yè)機(jī)會(huì)。黨和國(guó)家大力推進(jìn)政府?dāng)?shù)字化轉(zhuǎn)型，我們也受益于這波浪潮并在其中得到了成長(zhǎng)。我們主要是作為第三方企業(yè)幫助政府推動(dòng)數(shù)字化轉(zhuǎn)型，在這個(gè)過(guò)程中承擔(dān)數(shù)據(jù)可視化設(shè)計(jì)的環(huán)節(jié)。大數(shù)據(jù)時(shí)代下，黨政機(jī)關(guān)的數(shù)據(jù)量也是龐大且復(fù)雜的，我們的用戶(hù)也需要新的技術(shù)去面對(duì)日常工作，對(duì)于設(shè)計(jì)而言是一個(gè)頗有挑戰(zhàn)的課題。
寫(xiě)本系列的初衷是想把工作過(guò)程中的一定之規(guī)總結(jié)沉淀下來(lái)，坦誠(chéng)的講我們也是站在前人的肩膀向前。比如我們的后臺(tái)數(shù)字化解決辦法中融合了螞蟻金服AntDesign的精神和阿里云對(duì)于體驗(yàn)的標(biāo)準(zhǔn)化反饋機(jī)制，并且針對(duì)自身業(yè)務(wù)在某些緯度上做了傾向性的調(diào)整和變化。
在此多說(shuō)一句，我們很榮幸站在這個(gè)時(shí)代的浪潮上去觀賞中國(guó)崛起的史詩(shī)畫(huà)卷，但是我們也時(shí)刻保持著冷靜和客觀。我們很欽佩那些將比較成熟的東西標(biāo)準(zhǔn)化，拉高整個(gè)行業(yè)的體驗(yàn)基準(zhǔn)線(xiàn)的團(tuán)隊(duì)。標(biāo)準(zhǔn)化一定是一件需要全行業(yè)一起推動(dòng)的事情，在此獻(xiàn)上我們的一些總結(jié)和思考。
與傳統(tǒng)的數(shù)據(jù)可視化設(shè)計(jì)體系相比較，由于我們的用戶(hù)是黨政機(jī)關(guān)、事業(yè)單位，因此更有傾向性的選擇和探索。長(zhǎng)時(shí)間的觀察用戶(hù)，發(fā)現(xiàn)外界普遍存在夸大事實(shí)的宣傳和固執(zhí)己見(jiàn)的成見(jiàn)。對(duì)于LOGO又大又紅的需求，其實(shí)有絕大多數(shù)是溝通存在了障礙。
在我們?yōu)橛脩?hù)服務(wù)過(guò)程中，存在經(jīng)常加班和反復(fù)改稿的現(xiàn)象，在一定程度上造成資源浪費(fèi)。作為B端的設(shè)計(jì)師，冷靜的復(fù)盤(pán)項(xiàng)目過(guò)程，排除其中的主觀因素，客觀的分析現(xiàn)象。認(rèn)為問(wèn)題可能是很多同事無(wú)論在業(yè)務(wù)理解和前期規(guī)劃都有一定的障礙和不適之處，不能和用戶(hù)達(dá)成目標(biāo)的一致性。發(fā)生這樣的問(wèn)題是因?yàn)榻M內(nèi)大部分設(shè)計(jì)師C端的思維并未完全過(guò)渡到B端，在工作中沒(méi)有凝煉自己的方法論。故此，寫(xiě)本系列是奔著將我們過(guò)去總結(jié)的方法論給到新人設(shè)計(jì)師，為了更好的融入工作，減少試錯(cuò)成本。
要搞清楚這個(gè)問(wèn)題，首先我們需要解釋下什么是數(shù)據(jù)可視化。
數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。但是別輕易認(rèn)為是簡(jiǎn)單的將數(shù)據(jù)轉(zhuǎn)換成圖表，而是以數(shù)據(jù)為視角，看待世界。換句話(huà)講就是用一些方式方法將以數(shù)據(jù)為內(nèi)容的信息直觀清晰的展現(xiàn)在用戶(hù)面前，幫助用戶(hù)了解真實(shí)的世界，明白數(shù)據(jù)背后隱含的變化規(guī)律。
那么問(wèn)題來(lái)了，用戶(hù)需要看的是什么？
舉個(gè)例子：有的時(shí)候我們給黨政機(jī)關(guān)做可視化大屏的時(shí)候，用戶(hù)在宏觀角度下并沒(méi)有明確表達(dá)需要展現(xiàn)的內(nèi)容，往往這個(gè)過(guò)程中我們需要挖掘用戶(hù)的心態(tài)。一千個(gè)人眼中有一千個(gè)哈姆雷特，每位來(lái)視察的領(lǐng)導(dǎo)對(duì)于看到的內(nèi)容都有不一樣的詮釋。通過(guò)經(jīng)驗(yàn)判斷，有些常用的內(nèi)容是有價(jià)值的，比如GDP增速、一產(chǎn)二產(chǎn)三產(chǎn)的產(chǎn)業(yè)增加值等。這邊我不是說(shuō)讓大家都去碼這些指標(biāo)，這種拿來(lái)主義我們從來(lái)不倡導(dǎo)。我們是想讓大家明白，用以上的指標(biāo)是因?yàn)檫@些內(nèi)容是地方官員工作成果和工作成績(jī)的體現(xiàn)，這些指標(biāo)是通過(guò)大量計(jì)算的一個(gè)結(jié)果值，是反應(yīng)政績(jī)的一種量化指標(biāo)。以往匯報(bào)的時(shí)候，講訴的時(shí)間并不長(zhǎng)，因此要抓住機(jī)會(huì)講結(jié)果。
知道用戶(hù)關(guān)注哪些內(nèi)容后，就冒出一個(gè)問(wèn)題，讓用戶(hù)怎么看！簡(jiǎn)而言之，你怎么去碼這些關(guān)注的內(nèi)容。在政務(wù)系統(tǒng)長(zhǎng)期的建設(shè)下，我們對(duì)用戶(hù)的數(shù)據(jù)有多龐大是有所了解。哪怕歸集數(shù)據(jù)的主體是一個(gè)小的部門(mén)，定義其工作性質(zhì)的就有幾百個(gè)指標(biāo)。你需要理解用戶(hù)是長(zhǎng)期在哪種環(huán)境下的，收到的信息是以什么樣的方式傳遞的。
舉個(gè)例子：你注意下我們這篇文章的主次關(guān)系，有沒(méi)有發(fā)現(xiàn)是按照大標(biāo)題-標(biāo)題-中標(biāo)題-小標(biāo)題-正文的方式敘述的。有空看下政府的紅頭文件或者當(dāng)?shù)氐膱?bào)刊雜志，都是按照規(guī)范的行文方式傳遞信息的。那么用戶(hù)長(zhǎng)期在這樣的環(huán)境，就會(huì)依賴(lài)這種方式去接受信息。
將信息結(jié)構(gòu)化，用寫(xiě)文章寫(xiě)書(shū)那樣的方式將信息傳達(dá)，建議使用總-分或者總-分-總的方式。當(dāng)你這樣還不能梳理清楚，可以借鑒扉頁(yè)-目錄-章節(jié)等方式去表達(dá)。
有的時(shí)候，緣分就是那么巧妙。我們的自我要求和用戶(hù)的訴求趨于同步，一個(gè)故事講的好不好直接關(guān)系著一群人的工作成果。這里的故事化換句話(huà)說(shuō)，就是框架。正所謂大道至簡(jiǎn)，信息傳播最牛逼的就是把一個(gè)特別復(fù)雜的內(nèi)容用最樸素近人的語(yǔ)言總結(jié)，比如獨(dú)立之精神，自由之思想。
我們以一個(gè)案例來(lái)剖析如何有組織有節(jié)奏的表達(dá)內(nèi)容，以下是有關(guān)于經(jīng)濟(jì)的內(nèi)容，僅供參考。
首先，先拆解經(jīng)濟(jì)的信息點(diǎn)，信息本身是有層級(jí)有關(guān)系的。單獨(dú)存在的信息點(diǎn)沒(méi)有比較，是無(wú)法從側(cè)面反應(yīng)客觀規(guī)律的。為了我們盡量少的產(chǎn)生紕漏，先開(kāi)始逐層拆分。我們明確信息點(diǎn)有哪些，根據(jù)上一節(jié)的內(nèi)容，我們獲知信息點(diǎn)取決于用戶(hù)需求，而傳播信息點(diǎn)又受傳播媒介影響，即表達(dá)目的。總結(jié)而言，就是用戶(hù)想看什么和你想讓用戶(hù)看什么？這個(gè)地方需要仔細(xì)想想，不然起步就錯(cuò)了。
在經(jīng)濟(jì)大屏中領(lǐng)導(dǎo)一般關(guān)心的是工作成果和工作成績(jī)。
當(dāng)確定這兩個(gè)內(nèi)容的時(shí)候我們繼續(xù)細(xì)化拆分信息點(diǎn)。當(dāng)前這兩大類(lèi)是很籠統(tǒng)，不具備結(jié)論性。我們需要繼續(xù)拆分信息點(diǎn)，直到可以對(duì)這兩大類(lèi)提供結(jié)論。此時(shí)我們的慣用方法就是用宏觀-微觀作為拆分依據(jù)，如下：
故事化的作用就是將信息點(diǎn)有組織有節(jié)奏的表達(dá)出來(lái)，零散的信息點(diǎn)毫無(wú)意義的。換句話(huà)說(shuō)就是用框架的形式清晰完整的表達(dá)內(nèi)容。好的故事是有主有次，主能概括、次能點(diǎn)題。
主要故事線(xiàn)：用戶(hù)接受度高，能夠概括整個(gè)屏幕的內(nèi)容，快速了解頁(yè)面概況或者特別關(guān)注的重要信息。
次要故事線(xiàn)：對(duì)主要故事線(xiàn)起到解釋補(bǔ)充的作用，能夠全面闡述頁(yè)面信息或者點(diǎn)題的作用。
那么這邊就清楚了，主要故事線(xiàn)就是宏觀內(nèi)容，次要故事線(xiàn)就是微觀內(nèi)容。解釋下，次要并不是說(shuō)不重要。像這邊的微觀內(nèi)容代表的就是地方上的信息，需要存在但不是全面展開(kāi)，它是宏觀的基礎(chǔ)土壤，往往我們?cè)诮榻B的時(shí)候是用來(lái)點(diǎn)題，以小見(jiàn)大的。
最早我們就說(shuō)用戶(hù)關(guān)注的不是數(shù)據(jù)項(xiàng)，數(shù)據(jù)項(xiàng)是過(guò)程的產(chǎn)物，真正的關(guān)注點(diǎn)是最終處理后的信息。我們?cè)V求的信息點(diǎn)是從用戶(hù)想看什么和你想讓用戶(hù)看什么中挖掘出來(lái)的，需要有數(shù)據(jù)背書(shū)。即數(shù)據(jù)關(guān)聯(lián)信息點(diǎn)。
1.明確用戶(hù)關(guān)心的內(nèi)容是重中之重，它決定起調(diào)的方向。有的時(shí)候陷入項(xiàng)目之中，往往是關(guān)注項(xiàng)目細(xì)節(jié)忽略了大局觀，所以經(jīng)常低頭做事也需要抬起頭看看路。
2.按照用戶(hù)習(xí)慣的方式去梳理信息點(diǎn)，減小使用成本。用戶(hù)長(zhǎng)時(shí)間沉浸在有條理有層次的環(huán)境中，因此灌輸信息的方式也要依循這個(gè)節(jié)奏。
3.歸類(lèi)提煉信息點(diǎn)，用故事去串聯(lián)信息，用數(shù)據(jù)背書(shū)信息。有條有理的去表達(dá)我們的想法，能夠讓人更好的接受并且理解。
文章來(lái)源：tob.design 作者：王亮亮同學(xué)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
編輯導(dǎo)讀：經(jīng)過(guò)這次疫情，很多還在猶豫要不要經(jīng)營(yíng)私域流量的零售商都行動(dòng)起來(lái)了。隨著公域流量越發(fā)昂貴，私域流量似乎成為了保持增長(zhǎng)的新藥方。但是，想要玩轉(zhuǎn)私域流量并非手到擒來(lái)。本文將從三個(gè)方面對(duì)此展開(kāi)分析，希望對(duì)你有幫助。
一年之前，對(duì)于很多品牌商和零售商來(lái)說(shuō)，要不要經(jīng)營(yíng)私域流量，要不布局私域業(yè)態(tài)，可能還是掛在PPT上不痛不癢的概念。
疫情逆轉(zhuǎn)了這一切，從公域到私域全線(xiàn)布局，成為了品牌商和零售商的常態(tài)化選擇——這不僅關(guān)乎增長(zhǎng)或者下跌的多寡，甚至還關(guān)乎不少實(shí)體業(yè)態(tài)的生死。
當(dāng)線(xiàn)下客流越發(fā)稀落，公域流量越發(fā)昂貴，私域流量、私域業(yè)態(tài)，似乎成為了保增長(zhǎng)的新藥方。
所謂的私域，與之對(duì)應(yīng)的概念就是公域，是指一次獲取之后，可以反復(fù)觸達(dá)、長(zhǎng)期運(yùn)營(yíng)的客戶(hù)關(guān)系，如企業(yè)通過(guò)公眾號(hào)、小程序、微信群等圈定的用戶(hù)群體。
私域玩得好，增長(zhǎng)跑不了？
話(huà)雖如此，但玩轉(zhuǎn)私域流量，也并非手到擒來(lái)那般簡(jiǎn)單，厘清存量增量關(guān)系，擺正公私兩域位置，是順利開(kāi)張的前提。
從線(xiàn)下發(fā)家的名創(chuàng)優(yōu)品創(chuàng)始人葉國(guó)富，一貫不怎么看重線(xiàn)上渠道。
線(xiàn)上渠道，在名創(chuàng)優(yōu)品一直是小打小鬧——2019年底之前，其線(xiàn)上營(yíng)收貢獻(xiàn)率只有1%左右。
但過(guò)度倚重線(xiàn)下的模式，在疫情面前，被打得七零八落——名創(chuàng)優(yōu)品關(guān)店率一度高達(dá)50%，開(kāi)業(yè)門(mén)店業(yè)績(jī)一度下跌了95%。
要活下去，除了轉(zhuǎn)道線(xiàn)上別無(wú)選擇，這是名創(chuàng)優(yōu)品第一次把線(xiàn)上當(dāng)作第二主場(chǎng)，微信群、小程序、公眾號(hào)等工具迅速集結(jié)起來(lái)，公司業(yè)績(jī)也在年中恢復(fù)到疫前水平。
于名創(chuàng)優(yōu)品來(lái)說(shuō)，快速回血的私域大盤(pán)，相當(dāng)于風(fēng)險(xiǎn)緩沖帶。
而那些趁早挺入私域的零售商，如步步高，在疫情期間，業(yè)績(jī)不降反增，4月交易額相比去年12月提升了四成左右。
一個(gè)疑問(wèn)隨之而來(lái)，疫情期間迅速膨脹的私域大盤(pán)，到底是特殊時(shí)期的曇花一現(xiàn)，還是可以長(zhǎng)期持續(xù)的數(shù)字資產(chǎn)？私域大盤(pán)和傳統(tǒng)的客戶(hù)群體，到底是零和的替代關(guān)系，還是全新的增量？
這個(gè)答案非常復(fù)雜——從短期來(lái)看，似乎是零和關(guān)系，或者說(shuō)從行業(yè)大盤(pán)來(lái)看，有一定的替代性；
但對(duì)于單個(gè)企業(yè)來(lái)說(shuō)，增量效應(yīng)顯著——客戶(hù)從線(xiàn)下大盤(pán)到線(xiàn)上大盤(pán)的趨勢(shì)性轉(zhuǎn)移，很大一部分沉淀在私域大盤(pán)里，私域業(yè)態(tài)走到前列的企業(yè)，可以攫取結(jié)構(gòu)性紅利。
對(duì)此問(wèn)題，天虹數(shù)字化經(jīng)營(yíng)中心總經(jīng)理譚曉華很有發(fā)言權(quán)。
天虹與微信生態(tài)結(jié)合，始于七年前，目前已經(jīng)積攢了3000多萬(wàn)會(huì)員，此前，天虹百貨的線(xiàn)上銷(xiāo)售額貢獻(xiàn)率不到1%，如今已經(jīng)常態(tài)化維持在15-16%左右，疫情結(jié)束之后，也沒(méi)有明顯回落。
增量體現(xiàn)在市場(chǎng)的拓寬上。在線(xiàn)下，天虹僅在8個(gè)省份的26個(gè)城市開(kāi)設(shè)有線(xiàn)下門(mén)店，但借道私域大盤(pán)，天虹的商品銷(xiāo)往了22個(gè)省份的300多個(gè)城市。
“你的服務(wù)范圍跨越到原有的門(mén)店3公里、1公里范圍之外，在產(chǎn)生銷(xiāo)售的時(shí)候，那就是百分之百的增量?！弊T曉華很是滿(mǎn)足。
私域帶來(lái)的交易，還能緩沖線(xiàn)下渠道凋落的風(fēng)險(xiǎn)，有望成為彌補(bǔ)實(shí)體門(mén)店業(yè)績(jī)下降的第二條增長(zhǎng)曲線(xiàn)。
譚曉華的危機(jī)感一直高懸，實(shí)體比重的下降是長(zhǎng)期趨勢(shì)，做私域，未必能“馬上就能彌補(bǔ)下降，但是至少有了這一塊的增長(zhǎng)和增量，是可以讓下降的趨勢(shì)，比如從原來(lái)下降的10%，現(xiàn)在只下降2%了”。
私域大盤(pán)的增長(zhǎng)，還提升了天虹博弈品牌商的話(huà)語(yǔ)權(quán)。
此前，天虹線(xiàn)下門(mén)店中，只有一家蘭蔻專(zhuān)柜，并不是很受重視，“以前這種品，是不愛(ài)跟百貨商超一塊玩的”，譚曉華并不諱言。
但今年3月份，天虹發(fā)起的一場(chǎng)小程序直播，幫助蘭蔻賣(mài)貨230多萬(wàn)元，讓后者很是驚喜，心甘情愿給出了A+級(jí)別的線(xiàn)上代理授權(quán)。
如果看不到私域的增量?jī)r(jià)值，那么商家斷然不會(huì)全力投入。
嚴(yán)格來(lái)說(shuō)，流量并不稀缺，稀缺的是低成本流量——公私兩域流量，也并無(wú)絕對(duì)的好壞之分，而私域的獨(dú)特價(jià)值在于其再生和循環(huán)。
因此，多數(shù)商家都是“公私兼顧”，但在不同平臺(tái)的布局，具有互補(bǔ)性和差異性。比如全渠道布局的蘭蔻，在微信上聚集的是粘性用戶(hù)，因此，加強(qiáng)限量特供、新品種草和專(zhuān)屬服務(wù)是其側(cè)重點(diǎn)。
即便在微信生態(tài)體系里，也是既有公域，也有私域。
在微信支付運(yùn)營(yíng)副總經(jīng)理雷茂鋒看來(lái)，視頻號(hào)算是微信生態(tài)里的公域流量挖掘機(jī)，幫助商家從微信12億用戶(hù)的公海里，引流轉(zhuǎn)化。
歸根結(jié)底，私域與公域的關(guān)系，就如同海洋和河流——不與海洋銜接的內(nèi)陸河，面臨水流干涸之險(xiǎn)；大河?xùn)|流，百川入海，又為海洋引入綿綿不絕的水流。
與此同理，私域流量和公域流量，也并非互斥關(guān)系；開(kāi)源活水之下，雙方可以互相引流，互為增量。
舉例而言，企業(yè)開(kāi)通視頻號(hào)直播時(shí)，可以通過(guò)提前預(yù)告等方式，把沉淀在小程序、公眾號(hào)、企業(yè)微信群的忠實(shí)會(huì)員導(dǎo)流過(guò)去，為視頻號(hào)直播增加人氣，這就是私域?yàn)楣蛞鳌?
正是借助公私兩域流量聯(lián)動(dòng)的打法，今年11·11，香港莎莎的小程序銷(xiāo)售額同比增長(zhǎng)了830%。
相比于其他平臺(tái)可以快速引爆的公域流量，微信平臺(tái)私域流量的挖掘和積攢，可能是個(gè)慢功夫，但其價(jià)值在于，一旦沉淀下來(lái)，轉(zhuǎn)化率要高得多。
今年2月底，上門(mén)定制男裝品牌量品的首場(chǎng)直播帶貨，沒(méi)有網(wǎng)紅加持，也沒(méi)有經(jīng)驗(yàn)支撐，兩小時(shí)內(nèi)僅僅吸引了1.1萬(wàn)人觀看——這個(gè)觀看量著實(shí)有些拿不出手，但銷(xiāo)售額卻超過(guò)了50萬(wàn)。
而天虹常態(tài)化的直播里觀眾甚至只有幾千人，也能賣(mài)貨幾十萬(wàn)。
如今，微信支付的月活用戶(hù)已經(jīng)邁過(guò)12億大關(guān)；今年1-8月，小程序?qū)嵨锷唐稧MV同比增長(zhǎng)115%，品牌自營(yíng)GMV同比增長(zhǎng)210%。業(yè)內(nèi)人士預(yù)計(jì)，今年其交易額有望突破2萬(wàn)億元。
12億用戶(hù)，2萬(wàn)億GMV明晃晃的擺在那里，但能否把公海的水舀到自家池塘里，需要本事。
對(duì)于開(kāi)設(shè)了線(xiàn)下門(mén)店的商家來(lái)說(shuō)，前期存在一個(gè)低成本的紅利轉(zhuǎn)換期——比如在支付完成頁(yè)，設(shè)置積分優(yōu)惠、會(huì)員跳轉(zhuǎn)等功能，把一次性顧客轉(zhuǎn)化為長(zhǎng)期會(huì)員，而后通過(guò)企業(yè)微信、小程序、公眾號(hào)、視頻號(hào)等持續(xù)激活，通過(guò)存量的線(xiàn)下服務(wù)去連接顧客，基本上無(wú)需太多額外投入。
當(dāng)然，接下來(lái)，在存量客戶(hù)全部在線(xiàn)沉淀后，想要繼續(xù)擴(kuò)大私域基本盤(pán)，可能就需要通過(guò)微信朋友圈廣告、支付頁(yè)廣告等去拉新轉(zhuǎn)化。
但花錢(qián)買(mǎi)來(lái)的私域流量性?xún)r(jià)比高不高，歸根結(jié)底在于能不能持續(xù)轉(zhuǎn)化——微信平臺(tái)的小程序觸點(diǎn)繁多，立體組合應(yīng)用挑戰(zhàn)大，可運(yùn)營(yíng)點(diǎn)容易遭到忽視，因此，提升流量利用和交易轉(zhuǎn)化效率，才是重中之重。
于商家來(lái)說(shuō)，河道建起來(lái)不是終點(diǎn)，不能轉(zhuǎn)化的私域流量也沒(méi)有價(jià)值。
社區(qū)電商興盛優(yōu)選的方法是發(fā)動(dòng)外部的螞蟻雄兵，依賴(lài)社群裂變，引導(dǎo)幾十萬(wàn)名團(tuán)長(zhǎng)轉(zhuǎn)發(fā)商品和活動(dòng)，11.11當(dāng)日日訂單突破1200萬(wàn)單。
天虹的路徑則是“全員持槍上崗”，5萬(wàn)名導(dǎo)購(gòu)“人人會(huì)直播”。
其實(shí)，除了少數(shù)種子選手外外，不是每個(gè)導(dǎo)購(gòu)都擅長(zhǎng)直播。最開(kāi)始，天虹導(dǎo)購(gòu)們心理壓力很大，覺(jué)得一場(chǎng)直播賣(mài)不出去幾萬(wàn)十幾萬(wàn)，都拿不出手。
但譚曉華的看法是“聊勝于無(wú)”，“哪怕你搞一場(chǎng)直播，只有三個(gè)人觀看，你在店里一次只能服務(wù)一個(gè)顧客，現(xiàn)在能服務(wù)三個(gè)，這就是價(jià)值”，譚曉華說(shuō)，“我們從過(guò)去的功利模式過(guò)渡到了現(xiàn)在的養(yǎng)生模式”。
所謂的“養(yǎng)生”指得是，并不僅僅以銷(xiāo)量為單一KPI，“特價(jià)搶購(gòu)、新款種草、展示搭配，云走秀，都可以”，門(mén)檻低一點(diǎn)，才能實(shí)現(xiàn)總動(dòng)員。
歸根結(jié)底，公域、私域流量，沒(méi)有好壞之分，都是多多益善，因此，公私兼顧、公私合營(yíng)，可能才是最優(yōu)選項(xiàng)。
連接一切的微信，既要考量C端用戶(hù)體驗(yàn)，又要顧及B端商家利益。
挖掘私域價(jià)值時(shí)，如何做到不打擾不討嫌，避免變成人人嫌惡的微商？
這是商家和微信面臨的共同挑戰(zhàn)。
不打擾用戶(hù)，是微信一直堅(jiān)持的底線(xiàn)，但具體到某個(gè)功能，邊界的精準(zhǔn)拿捏，殊為不易。
雷茂鋒認(rèn)為，解決方案就是把所有的選擇權(quán)交給用戶(hù)——用戶(hù)一旦覺(jué)得打擾，就可以關(guān)閉相關(guān)功能。
此外，微信也在分層開(kāi)發(fā)針對(duì)B端商家和C端用戶(hù)的不同產(chǎn)品，來(lái)設(shè)置隔離帶和緩沖帶，企業(yè)微信就是典型例證。
早期，顧客添加導(dǎo)購(gòu)個(gè)人微信，后者朋友圈可以無(wú)限制發(fā)放導(dǎo)購(gòu)和廣告信息，可能會(huì)對(duì)用戶(hù)造成打擾，而且，導(dǎo)購(gòu)還能查看顧客朋友圈，有些顧客注重隱私，可能就不愿意添加好友。
但企業(yè)微信用戶(hù)看不到好友朋友圈，而且發(fā)布朋友圈次數(shù)也有限制，如此一來(lái)，很多顧客就打消了顧慮。
而對(duì)于商家來(lái)說(shuō)，企業(yè)微信的優(yōu)勢(shì)在于好友無(wú)上限，無(wú)需再增設(shè)微信小號(hào)做運(yùn)營(yíng)；支持人滿(mǎn)自動(dòng)裂變新群，無(wú)需手動(dòng)拉群；支持離職繼承功能，一線(xiàn)導(dǎo)購(gòu)離職后，客戶(hù)和群都可以100%平移給交接人，避免客戶(hù)流失，等等。
也是因?yàn)轭櫦傻紺端用戶(hù)的體驗(yàn)，微信上線(xiàn)商家功能的步子，邁得都比較謹(jǐn)慎。
品牌商向微信提出一個(gè)需求時(shí)，通常收到的答案是“我們回去要商量一下”。
而后要經(jīng)歷長(zhǎng)達(dá)三四個(gè)月甚至半年一年的左右糾結(jié)和反復(fù)評(píng)估，內(nèi)部論證這一功能和微信的基本價(jià)值觀是否一致。
曾有天虹的運(yùn)營(yíng)人員為此抱怨，覺(jué)得微信某些時(shí)候反應(yīng)太慢，但譚曉華的回答是“你不要嫌他們慢，他們做出來(lái)一個(gè)東西就不會(huì)再回退，因?yàn)榛赝耸呛芸膳碌?，或者這個(gè)平臺(tái)不經(jīng)營(yíng)了，對(duì)我們商家來(lái)說(shuō)那是致命性的打擊?！?
一旦評(píng)估某些功能會(huì)遭遇C端用戶(hù)的集體反感，這樣的功能就不會(huì)上線(xiàn)——比如，曾有商家提議，能否開(kāi)發(fā)一個(gè)群轉(zhuǎn)移功能，直接把朋友圈潛在顧客遷移到微信群，方便商家運(yùn)營(yíng)轉(zhuǎn)化，但這樣明顯打擾用戶(hù)的功能，應(yīng)該永遠(yuǎn)都不會(huì)上線(xiàn)。
盡管微信拓展私域業(yè)態(tài)的進(jìn)展也不是一帆風(fēng)順，盡管商家私域業(yè)態(tài)的進(jìn)展快慢不一，但2020年，顯然是私域業(yè)態(tài)的大年景，疫情之后，沒(méi)有多少商家再對(duì)私域流量“視而不見(jiàn)”。
文章來(lái)源：人人都是產(chǎn)品經(jīng)理 作者：財(cái)經(jīng)故事會(huì)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
配色一直以來(lái)都是設(shè)計(jì)圈內(nèi)老生常談的話(huà)題，一幅優(yōu)秀的作品離不開(kāi)合理協(xié)調(diào)的顏色搭配。不同的顏色所表達(dá)的含義不同。即便是相同的顏色，明度和純度不同，給人的視覺(jué)感受也不同。雖然說(shuō)配色是感性的，但每個(gè)人對(duì)于色彩的把控力和敏感度不盡相同，所以導(dǎo)致配色能力也參差不齊，這時(shí)候我們就需要運(yùn)用到一些配色規(guī)則，提升我們對(duì)色彩的感知力。商業(yè)設(shè)計(jì)師跟藝術(shù)家不一樣，配色要考慮普通用戶(hù)的認(rèn)可度和接受能力，有效的傳遞信息才是最重要的。所以在商業(yè)設(shè)計(jì)中，配色并不是越有藝術(shù)感越好，如何做到協(xié)調(diào)才是重點(diǎn)。
文章來(lái)源：優(yōu)設(shè) 作者：美工美邦
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ì)的思想與這個(gè)世界和解；這里的我說(shuō)的和解比較寬泛，大家可以理解成與客戶(hù)和解，也可與產(chǎn)品經(jīng)理和解，也可以是與自己和解；
為什么選這個(gè)主題呢，原因是之前在網(wǎng)上聽(tīng)一群人總是說(shuō)互聯(lián)網(wǎng)走到了下半場(chǎng)，我和好奇，就去查這個(gè)下半場(chǎng)到底是什么，后來(lái)總算知道了，互聯(lián)網(wǎng)行業(yè)走到現(xiàn)在，已經(jīng)從增量時(shí)代轉(zhuǎn)為存量時(shí)代，這個(gè)存量時(shí)代就是下半場(chǎng)，人口、流量、資本的紅利都逐漸收緊。
在這種情況下我的產(chǎn)品如何從同類(lèi)產(chǎn)品中脫穎而出，或許增加品牌屬性是種方法，希望大家在聽(tīng)完這個(gè)分享后，會(huì)有一些啟發(fā)。
在互聯(lián)網(wǎng)的增量時(shí)代，品牌設(shè)計(jì)與UI設(shè)計(jì)是兩條平行線(xiàn)，幾乎沒(méi)有交集，你做你的畫(huà)冊(cè)、slogan、包裝，我做我的網(wǎng)站、app、微信小程序，偶爾互相模仿，但也不是主流，畢竟兩者載體不同，目的不同，用戶(hù)也不同；
但是到了存量時(shí)代，影響用戶(hù)選擇的一個(gè)重要因素是「品牌」，一個(gè)產(chǎn)品要想從同類(lèi)產(chǎn)品中區(qū)別出來(lái)，需要有個(gè)性，UI+品牌成為產(chǎn)品生命周期中重要的一環(huán)，下面我們看看如何在用戶(hù)心中植入產(chǎn)品品牌；
在在品牌植入方便，國(guó)外很多產(chǎn)品已經(jīng)走在了我們前面，我們來(lái)看看谷歌，谷歌開(kāi)發(fā)者大會(huì)上對(duì) Material（ Design做了更新，我印象特別深刻的是Google對(duì)圖形語(yǔ)言單獨(dú)拿出來(lái)做一個(gè)模塊解釋它，它提取了圓形作為視覺(jué)DNA，并沿用到產(chǎn)品的每一個(gè)控件；
當(dāng)然，如果我們想傳達(dá)我們產(chǎn)品的品牌理念，只在圖標(biāo)組件里運(yùn)用是遠(yuǎn)遠(yuǎn)不夠的。
誕生于1886年的可口可樂(lè)，每年都做產(chǎn)品運(yùn)營(yíng)推廣，不斷大量的重復(fù)它logo的弧線(xiàn)元素和瓶子的外形；
還有剛剛過(guò)去的雙11，從2012年11月11日開(kāi)始的天貓節(jié)，現(xiàn)在是全球最大的B2C平臺(tái)，天貓貓頭運(yùn)用也是滲透到全產(chǎn)品線(xiàn)里面去了，問(wèn)大家個(gè)問(wèn)題，大家有沒(méi)有人知道這個(gè)貓頭品牌是誰(shuí)創(chuàng)立的？其實(shí)就是馬云的繼任者，現(xiàn)任阿里巴巴集團(tuán)董事局主席張勇；講的有點(diǎn)遠(yuǎn)了，我們?cè)倩氐轿覀兊闹黝}；
這個(gè)圖很好的解釋了品牌與產(chǎn)品與用戶(hù)的關(guān)系，產(chǎn)品需要品牌牽引、支撐，現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品越來(lái)越趨于同質(zhì)化，UI 設(shè)計(jì)師已經(jīng)不能局限于界面的表現(xiàn)層，更要了解產(chǎn)品背后的邏輯，然后以業(yè)務(wù)為依據(jù)設(shè)計(jì)品牌，以品牌為基準(zhǔn)去設(shè)計(jì)產(chǎn)品。
第一章意義Significance，這個(gè)章節(jié)我們講講從品牌到UI的意義
第一個(gè)意義是對(duì)內(nèi)：可以規(guī)范統(tǒng)一，協(xié)作
品牌本身就可以作為設(shè)計(jì)規(guī)范的一個(gè)重要指導(dǎo)原則，通過(guò)對(duì)配色、文字、圖標(biāo)、控件等建立設(shè)計(jì)規(guī)范，可以有效減少設(shè)計(jì)決策時(shí)間，傳達(dá)一致的品牌調(diào)性。
第二個(gè)意義是對(duì)外：可以提高認(rèn)知，溢價(jià)增值
如果一個(gè)產(chǎn)品失去了個(gè)性，不看 logo，單純看界面的話(huà)，很多時(shí)候根本分不清是到底是哪一家公司的產(chǎn)品。如果能夠關(guān)注設(shè)計(jì)細(xì)節(jié)對(duì)品牌的影響，肯定能更好地提高用戶(hù)對(duì)產(chǎn)品的認(rèn)知，當(dāng)你對(duì)一件產(chǎn)品注入了感情，同時(shí)也就為產(chǎn)品提供了營(yíng)銷(xiāo)推廣的立足點(diǎn)；也可以這么說(shuō)，設(shè)計(jì)師創(chuàng)造的情感性?xún)r(jià)值，直接實(shí)現(xiàn)了產(chǎn)品的溢價(jià)增值；
第二章感知Perception
有位設(shè)計(jì)界的前輩講過(guò)，品牌知名度其實(shí)就是信任度的體現(xiàn)，他說(shuō)世界上最成功的品牌就是宗教，這里沒(méi)有詆毀任何宗教的意思，但是宗教建立的品牌信任度，遠(yuǎn)遠(yuǎn)超過(guò)了任何商品；
這里我們從用戶(hù)的角度出發(fā)，看下用戶(hù)是如何從產(chǎn)品感知品牌的；
在設(shè)計(jì)產(chǎn)品的時(shí)候常常會(huì)發(fā)現(xiàn)我們覺(jué)得理所當(dāng)然的地方，用戶(hù)往往沒(méi)按我們想的方式去使用。那是因?yàn)樵O(shè)計(jì)師通常有整體觀，站在金字塔頂端去規(guī)劃一個(gè)產(chǎn)品的設(shè)計(jì)，而用戶(hù)則恰恰相反，在金字塔底端往上爬，他們不知道這個(gè)金字塔多高，也不知道從哪一面開(kāi)始最好爬，所以會(huì)遇到各種問(wèn)題。
同樣，用戶(hù)對(duì)品牌的感知由低向高的，用戶(hù)通過(guò)各種場(chǎng)景接觸到產(chǎn)品，再通過(guò)產(chǎn)品的視覺(jué)呈現(xiàn)、功能體驗(yàn)、信息內(nèi)容等感知品牌，最后在心中形成印象，構(gòu)建品牌信念，從而影響下次產(chǎn)生相應(yīng)需求時(shí)對(duì)產(chǎn)品的選擇；
可以聯(lián)想下我們的購(gòu)物體驗(yàn)，是不是總是從同一個(gè)地方shopping，這就是購(gòu)物APP品牌價(jià)值已經(jīng)使你已經(jīng)形成了習(xí)慣選擇；
作為設(shè)計(jì)師，我們需要充分理解品牌內(nèi)核，由內(nèi)向外將抽象的品牌內(nèi)核轉(zhuǎn)化為具象的視覺(jué)符號(hào)，再延伸到用戶(hù)與產(chǎn)品的各個(gè)接觸點(diǎn)，從而將品牌理念植入用戶(hù)內(nèi)心。
第三章融合Integration既然上面我們講品牌和UI最終要走的一起，這一章我們講他們?nèi)绾卧诠ぷ魅诤?/span>
第一步，明確定位，提取關(guān)鍵詞，建立情緒板
當(dāng)代廣告教皇，美國(guó)奧美廣告創(chuàng)始人大衛(wèi).奧格威說(shuō)，“最重要的決定是如何定位你的產(chǎn)品?！?/span>
在大師的指引下，我們發(fā)現(xiàn)首先找到品牌定位，定位自己的細(xì)分市場(chǎng)和目標(biāo)用戶(hù)；
2.圍繞品牌定位提取關(guān)鍵詞；
3.建立情緒版，將抽象的概念轉(zhuǎn)化為可感知的視覺(jué)；
第二步，提取視覺(jué)表現(xiàn)元素，并設(shè)計(jì)融入品牌定位。我們重點(diǎn)從顏色、圖形、紋理、字體四個(gè)方面講一下。
有時(shí)甚至不需要任何圖形，單憑顏色就能產(chǎn)生對(duì)某一事物的聯(lián)想。
現(xiàn)在UI設(shè)計(jì)流行的極簡(jiǎn)風(fēng)，我們發(fā)現(xiàn)這些應(yīng)用采用極簡(jiǎn)化設(shè)計(jì)的同時(shí)，圖標(biāo)也變得更鮮艷，更引人注目，說(shuō)明這些產(chǎn)品也在尋求一個(gè)平衡，在 UI 設(shè)計(jì)變得極簡(jiǎn)趨同的同時(shí)，仍然能保留核心的品牌基因。
顏色在 UI 中的表現(xiàn)有 logo、導(dǎo)航欄底色、圖標(biāo)、文字、可視化圖表、插圖、按鈕等等。 
現(xiàn)在UI設(shè)計(jì)流行的極簡(jiǎn)風(fēng)，我們發(fā)現(xiàn)這些應(yīng)用采用極簡(jiǎn)化設(shè)計(jì)的同時(shí)，圖標(biāo)也變得更鮮艷，更引人注目，說(shuō)明這些產(chǎn)品也在尋求一個(gè)平衡，在 UI 設(shè)計(jì)變得極簡(jiǎn)趨同的同時(shí)，仍然能保留核心的品牌基因。 
圖形
我們知道顏色是抽象感知，圖形是相對(duì)具象的表現(xiàn)方式。
一旦某個(gè)特有的圖形在用戶(hù)心中形成烙印，用戶(hù)見(jiàn)到相似的圖形組合都能往該圖形聯(lián)想，從而關(guān)系到圖形背后所代表的品牌，這也是很多企業(yè)做品牌升級(jí)的時(shí)候 logo 都越來(lái)越簡(jiǎn)潔的原因，因?yàn)檫@樣能有效降低用戶(hù)的認(rèn)知負(fù)擔(dān)，提高品牌認(rèn)知。
圖形通常從 logo 本身提取，并在 UI 中延伸應(yīng)用。比如馬蜂窩、百度網(wǎng)盤(pán)、京東做品牌升級(jí)的時(shí)候都不約而同地從 logo 中提取了一個(gè)代表微笑的弧度，傳遞友好、溫暖的品牌形象。
飛豬提取了 logo 中「豬的發(fā)型」用于搜索框，韓國(guó)的電商品牌11街也將 logo 延長(zhǎng)作為界面中的搜索框。
紋理
在 UI 設(shè)計(jì)或者運(yùn)營(yíng)推廣運(yùn)用中，通過(guò)提取品牌圖形元素，再運(yùn)用分形、排列、重復(fù)、平鋪等設(shè)計(jì)手法形成品牌紋理。
我們看看京東的啟動(dòng)頁(yè)用 Joy 的外形旋轉(zhuǎn)做成的紋理背景；
國(guó)外著名的聊天應(yīng)用 Whatsapp，在聊天頁(yè)的背景用涂鴉插圖紋理做背景；
還有騰訊文檔的啟動(dòng)頁(yè)、登錄頁(yè)用了漸變的菱形作為紋理，輔助品牌的視覺(jué)表現(xiàn)。
我們還在聊圖形復(fù)制變形的時(shí)候，國(guó)外的UI設(shè)計(jì)已經(jīng)細(xì)化到了十分驚人的程度
例如UBER 在做的品牌升級(jí)，設(shè)計(jì)師出來(lái)將每個(gè)國(guó)家富有代表性的圖形提煉， 然后重復(fù)運(yùn)?平鋪，形成帶有地域特色的?何紋理，運(yùn)?到閃屏和線(xiàn)上線(xiàn)下的產(chǎn)品當(dāng)中。
字體
字體是最容易被忽視的設(shè)計(jì)元素，很多人會(huì)認(rèn)為 UI 中的字體用系統(tǒng)默認(rèn)的就行。其實(shí)字體對(duì)于產(chǎn)品氣質(zhì)的體現(xiàn)著很大的作用，很多品牌都把字體設(shè)計(jì)當(dāng)成品牌基因中重要一部分。
字體的選擇需要契合產(chǎn)品功能特點(diǎn)與品牌調(diào)性。
微信讀書(shū)使用了方正宋三，讓人閱讀起來(lái)有種文字秀麗的浸入感；每日故宮使用了方正清刻悅宋體，字里行間隱含著歷史古韻，滲透著文化氣息；澎湃新聞使用方正準(zhǔn)雅宋體，體現(xiàn)其作為新聞產(chǎn)品「專(zhuān)注時(shí)政與思想」的嚴(yán)肅一面。
英文字體也可以使用契合產(chǎn)品氣質(zhì)的英文字體。比如常被用作數(shù)字字體的 Din、經(jīng)典的襯線(xiàn)字體 Playfair Display、?歌御用的 Roboto 等。
第三步，融入品牌觸點(diǎn)
這里我解釋下品牌觸點(diǎn)這概念，是指一款產(chǎn)品中品牌信息接觸點(diǎn)，是決定用戶(hù)對(duì)產(chǎn)品品牌印象的關(guān)鍵；
我們看幾個(gè)案例，
啟動(dòng)頁(yè)：知乎的啟動(dòng)頁(yè)采用 slogan 加 logo 的方式來(lái)體現(xiàn)品牌，這也是絕大多數(shù)應(yīng)用的做法；每日故宮啟動(dòng)的時(shí)候伴隨著一聲鐘聲，頁(yè)面會(huì)有一個(gè)光線(xiàn)流動(dòng)的動(dòng)畫(huà)，極具儀式感，一下子就把用戶(hù)帶入故宮莊嚴(yán)的氛圍當(dāng)中。
圖標(biāo)：東家的每一個(gè)圖標(biāo)都融入了印刷式字體的元素，體現(xiàn)其匠人的品牌基因；mono 則直接把產(chǎn)品名稱(chēng)「 M O N O」用于導(dǎo)航欄。
插圖：Dropbox 的兒童風(fēng)格的插畫(huà)與 B站 的二次元插畫(huà)都非常契合品牌特征。
品牌觸點(diǎn)式多樣的，除了上面的啟動(dòng)頁(yè)、圖標(biāo)、插圖之外，還有預(yù)加載圖、loading、動(dòng)效、新手引導(dǎo)等等都能體現(xiàn)品牌觸點(diǎn)，這些品牌觸點(diǎn)，都是講述品牌故事的關(guān)鍵載體，幫助產(chǎn)品從同行業(yè)中脫穎而出，這里由于時(shí)間的關(guān)系我們就不展開(kāi)講了，有興趣的同學(xué)，我們可以單獨(dú)交流哦
互聯(lián)網(wǎng)行業(yè)已經(jīng)過(guò)了拓荒時(shí)代，行業(yè)沉淀下了許多有價(jià)值的知識(shí)，也有許多非常好的 UI 組件和規(guī)范文檔可以直接使用；
另一方面，很多公司對(duì)于 UI 設(shè)計(jì)在整個(gè)產(chǎn)品生命周期中的價(jià)值，普遍覺(jué)得不是非常重要，UI 設(shè)計(jì)部門(mén)只是一個(gè)業(yè)務(wù)支持部門(mén)，起不到主導(dǎo)作用。而如果 UI 設(shè)計(jì)師做的工作還是停留在把產(chǎn)品的原型文檔變漂亮，肯定是不行了。
設(shè)計(jì)師不僅需要對(duì)產(chǎn)品業(yè)務(wù)和商業(yè)有深入了解，更重要的是對(duì)于品牌在整個(gè)產(chǎn)品鏈路中的應(yīng)用與把控。
我們需要走出舒適圈，主動(dòng)去挖掘更深層次的設(shè)計(jì)價(jià)值，提升自我價(jià)值。
誠(chéng)然改變一個(gè)大的設(shè)計(jì)生存環(huán)境是非常漫長(zhǎng)的過(guò)程。要不停的嘗試，就像不停的迭代做新產(chǎn)品一樣，不能因?yàn)橐粌纱蔚氖〈蛳粼O(shè)計(jì)的積極性。
設(shè)計(jì)的終極最后就是和解 Compromise
開(kāi)篇我提到了與世界和解，分享下我是怎么和這個(gè)世界和解的，我相信三句話(huà)，可以跟這個(gè)世界和解
再次謝謝大家聽(tīng)我叨叨，如果大家喜歡，下次我們可以叨叨點(diǎn)關(guān)于設(shè)計(jì)的更有意思的事，謝謝
文章來(lái)源：tob.design 作者：無(wú)名大師29aef85c40
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
移動(dòng)互聯(lián)網(wǎng)的迅速崛起，讓移動(dòng)網(wǎng)頁(yè)，移動(dòng)客戶(hù)端越來(lái)越重要，客戶(hù)端的頁(yè)面設(shè)計(jì)也是一門(mén)很大的學(xué)問(wèn)?？萍佳杆侔l(fā)展的今手機(jī)屏幕的尺寸越來(lái)越放大化，但卻始終 很有限，因此，在APP的界面設(shè)計(jì)中，精簡(jiǎn)是一貫的準(zhǔn)則。這里所說(shuō)的精簡(jiǎn)并不是內(nèi)容上盡可能的少量，而是要注重重點(diǎn)的表達(dá)。在視覺(jué)上也要遵循用戶(hù)的視覺(jué)邏 輯，用戶(hù)看著順眼了，才會(huì)真正的喜歡。
接下來(lái)為大家分享六款精美的app UI設(shè)計(jì)案例：
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專(zhuān)注而深入的UI設(shè)計(jì)公司，公司對(duì)UI設(shè)計(jì)的追求一向很高，致力于為卓越的國(guó)內(nèi)外企業(yè)提供卓越的手機(jī) ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶(hù)研究、交互設(shè)計(jì)等服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)秉承設(shè)計(jì)優(yōu)秀，不斷超越的理念，誠(chéng)信敬業(yè)、專(zhuān)業(yè)耐心的工作作風(fēng)，一直堅(jiān)持注重用戶(hù)心理體驗(yàn)及“設(shè)計(jì)與營(yíng)銷(xiāo)”等領(lǐng)域的理論與實(shí)踐相結(jié)合。10余年專(zhuān)注努力，300+案例磨練。我們對(duì)手機(jī) ui設(shè)計(jì)，用戶(hù)體驗(yàn)與交互設(shè)計(jì)，各種類(lèi)型軟件界面設(shè)計(jì)，國(guó)際化標(biāo)準(zhǔn)和流行趨勢(shì)，進(jìn)行過(guò)不斷的學(xué)習(xí)和實(shí)踐。藍(lán)藍(lán)設(shè)計(jì)提供的是可以信賴(lài)的ui設(shè)計(jì)服務(wù)，我們內(nèi)部有一套管理要求，比如去客戶(hù)現(xiàn)場(chǎng)每周一次的檢視和溝通、內(nèi)部提案會(huì)議、每天下班前的整理反饋成果發(fā)郵件、隨時(shí)溝通的qq、電話(huà)，階段性的匯報(bào)和進(jìn)度記錄整理。多勞多得的獎(jiǎng)勵(lì)機(jī)制，客戶(hù)滿(mǎn)意度評(píng)價(jià)獎(jiǎng)勵(lì)機(jī)制，鼓勵(lì)大家用心、平和、耐心、勤奮、創(chuàng)新的做事.
北京藍(lán)藍(lán)設(shè)計(jì)團(tuán)隊(duì)來(lái)自清華美院，工作多年，行業(yè)經(jīng)驗(yàn)豐富，專(zhuān)業(yè)性很強(qiáng)。我們是熱愛(ài)設(shè)計(jì)，設(shè)計(jì)不僅是我們的專(zhuān)業(yè)，我們的職業(yè)，還是我們的愛(ài)好。每一個(gè)藍(lán)藍(lán)設(shè)計(jì)的設(shè)計(jì)師都希望自己的設(shè)計(jì)越來(lái)越好，以高標(biāo)準(zhǔn)，敬業(yè)用心的態(tài)度、專(zhuān)業(yè)的技藝得到客戶(hù)的認(rèn)可。為此，我們不惜代價(jià)，愿意額外的付出時(shí)間、精力，去學(xué)習(xí)、去嘗試、去研究、去探索。工作賣(mài)力，玩的開(kāi)心。做好卓越的界面設(shè)計(jì)，成為這個(gè)領(lǐng)域的資深專(zhuān)家，幫助客戶(hù)取得成功，是我們的目標(biāo)。
在手機(jī) ui設(shè)計(jì)方面，我們先后參與過(guò)一起海帶app設(shè)計(jì)、詞覓app設(shè)計(jì)、外賣(mài)寶貝H5界面設(shè)計(jì)、樂(lè)自由我app界面設(shè)計(jì)、贊同科技app界面設(shè)計(jì)、近鄰寶界面設(shè)計(jì)、民生銀行手機(jī)界面設(shè)計(jì)、快遞通手機(jī)界面設(shè)計(jì)、沃安科技app界面設(shè)計(jì)、聯(lián)通營(yíng)業(yè)廳界面設(shè)計(jì)、Iphone手機(jī)界面設(shè)計(jì)等成功案例。
--手機(jī)appUI設(shè)計(jì)--
更多精彩文章：
手機(jī)appUI界面設(shè)計(jì)賞析（十一）
手機(jī)appUI界面設(shè)計(jì)賞析（十二）
手機(jī)appUI界面設(shè)計(jì)賞析（十三）
無(wú)論是從個(gè)性化內(nèi)容還是用戶(hù)體驗(yàn)上來(lái)說(shuō)，為界面內(nèi)容選擇正確的選擇類(lèi)控件可能比想象的要難，全文10,856字 ，預(yù)計(jì)閱讀20分鐘， 建議收藏。
本文主要研究選擇控件的設(shè)計(jì)細(xì)節(jié)，雖然是很常見(jiàn)的控件設(shè)計(jì)，但也有非常多需要注意的地方。能提煉總結(jié)常見(jiàn)事物的一般規(guī)律，這本身就是對(duì)自己已有知識(shí)理解加深的過(guò)程。
對(duì)數(shù)據(jù)進(jìn)行便捷選擇
單選框(Radio button，也叫“單選按鈕”)—— 用戶(hù)從一組選項(xiàng)中必須選擇一個(gè)選項(xiàng)。
復(fù)選框(Checkbox)—— 當(dāng)有一個(gè)或多個(gè)獨(dú)立選項(xiàng)時(shí)，用戶(hù)可以選擇任意數(shù)量的選項(xiàng)，包括零個(gè)、一個(gè)或多個(gè)。
切換開(kāi)關(guān)(Toggle Switches)—— 兩個(gè)互斥狀態(tài)（打開(kāi)和關(guān)閉）之間的可視切換。
選擇標(biāo)簽(Choice chips)—— 是按鈕選擇的一個(gè)替代方案。至少兩個(gè)選項(xiàng)，用戶(hù)可以選擇一個(gè)或多個(gè)。
列表選擇(List Select)——可以單擊容器框中隨附的項(xiàng)目，以從列表中選擇一個(gè)或多個(gè)。
下拉菜單(drop-down menu，也叫“下拉按鈕”)——按鈕包括一個(gè)單箭頭指示符，單擊后會(huì)顯示包含選項(xiàng)列表的菜單。
單選按鈕的命名（Radio）來(lái)源于舊收音機(jī)上用于頻率和預(yù)設(shè)電臺(tái)之間切換的的實(shí)際物理按鈕。當(dāng)一個(gè)按鈕被按下時(shí)，所有其他的按鈕都會(huì)彈出，使被按下的按鈕成為唯一處于“按下”狀態(tài)的按鈕。
后來(lái)被用于錄音機(jī)，盒式錄音機(jī)和可穿戴音頻播放器中，90年代初-用于“播放/暫停/快退/快進(jìn)”控件。
UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研發(fā)公司，幾乎涉及到我們現(xiàn)在每天使用的計(jì)算機(jī)技術(shù)，包括：以太網(wǎng)，圖形用戶(hù)界面（GUI），面向?qū)ο蟮木幊?，?jì)算機(jī)鼠標(biāo)，激光打印等。Xerox Star 8010工作站是第一款在圖形用戶(hù)界面中帶有單選按鈕的設(shè)備。
單選框用于對(duì)信息的選擇，允許用戶(hù)從一組選項(xiàng)中必須選擇一個(gè)，通常以2-5組顯示，單選框應(yīng)互斥。單選框的外觀一般是一個(gè)空白的圓洞，旁邊則通常有文字標(biāo)簽。標(biāo)簽的用途除了描述之外，還可以作為操作區(qū)域，當(dāng)用戶(hù)選中標(biāo)簽，所應(yīng)的單選框就會(huì)被選上。已選上的單選按鈕一般會(huì)在圓洞內(nèi)加上一小圓點(diǎn)。單選框僅顯示合理和正確的選項(xiàng)。
單選按鈕的狀態(tài)為打開(kāi)（實(shí)心圓圈）或關(guān)閉（空?qǐng)A圈）。
單選框一旦選上，除了選擇另一個(gè)選項(xiàng)之外，便沒(méi)法取消。所以有時(shí)會(huì)有空白的選擇、重置或默認(rèn)選擇。
每個(gè)單選按鈕的標(biāo)題應(yīng)清楚地描述選擇它的效果，通常句子結(jié)束沒(méi)有標(biāo)點(diǎn)符號(hào)。此外，考慮使用下拉菜單，會(huì)比顯示所有選項(xiàng)占用更少空間。
復(fù)選框是一種按鈕類(lèi)型，可用于打開(kāi)或關(guān)閉選項(xiàng)。當(dāng)存在選項(xiàng)對(duì)象時(shí)，復(fù)選框允許用戶(hù)從一組對(duì)象中選擇一個(gè)或同時(shí)選中多個(gè)和全部項(xiàng)目。每個(gè)復(fù)選框都是單獨(dú)的個(gè)體，因此選中一個(gè)復(fù)選框不會(huì)影響其他復(fù)選框的取消選中狀態(tài)，全選除外。
復(fù)選框使操作在兩個(gè)相反的狀態(tài)，操作或無(wú)操作之間進(jìn)行選擇。復(fù)選框在屏幕上顯示為一個(gè)小方框，選中時(shí)，它被認(rèn)為是“開(kāi)”，選中的復(fù)選框包含復(fù)選標(biāo)記，正方形將充滿(mǎn)復(fù)選標(biāo)記。；關(guān)閉時(shí)，則被認(rèn)為是“關(guān)”，它是空的矩形框。復(fù)選框一般放置在可選信息左側(cè)(圖片、視頻以宮格形式表現(xiàn)的頁(yè)面除外）。
復(fù)選框可以用作單個(gè)元素，也可以組合成一個(gè)列表或嵌套式的層級(jí)列表以從中選擇多個(gè)。如果需要將選擇項(xiàng)分成幾組，則使用多級(jí)復(fù)選框。
混合狀態(tài)，僅在多級(jí)復(fù)選框時(shí)出現(xiàn)。如果使用復(fù)選框組，全局啟用和禁用多個(gè)子復(fù)選框，當(dāng)這些子項(xiàng)并非都處于同一狀態(tài)時(shí)，父復(fù)選框應(yīng)顯示為混合狀態(tài)（用短劃線(xiàn)表示）?；旌蠣顟B(tài)常在嵌套層級(jí)等對(duì)多個(gè)對(duì)象一同操作時(shí)使用，以代表該選項(xiàng)下的子選項(xiàng)沒(méi)有被全選。當(dāng)半選的復(fù)選框被點(diǎn)擊時(shí)，它便會(huì)變成平常的復(fù)選框，而它的子選項(xiàng)亦會(huì)跟隨全選或取消全選。
如果存在多個(gè)復(fù)選框時(shí)，考慮使用分組標(biāo)簽來(lái)進(jìn)行描述。并將標(biāo)簽的基線(xiàn)與組中的第一個(gè)復(fù)選框?qū)R。通常，當(dāng)復(fù)選框垂直列出時(shí)，更容易區(qū)分它們的狀態(tài)。通常，復(fù)選框應(yīng)左對(duì)齊，當(dāng)您需要表示層次結(jié)構(gòu)，例如當(dāng)父復(fù)選框的狀態(tài)控制子復(fù)選框的狀態(tài)時(shí)，請(qǐng)使用縮進(jìn)格式。
開(kāi)關(guān)是兩個(gè)互斥狀態(tài)（打開(kāi)和關(guān)閉）之間的可視切換?？傆幸粋€(gè)默認(rèn)使用，撥動(dòng)開(kāi)關(guān)即立即生效。它是在打開(kāi)時(shí)顏色是可見(jiàn)的，關(guān)閉時(shí)出現(xiàn)無(wú)色或灰色。
移動(dòng)端中切換開(kāi)關(guān)一般有交互動(dòng)效，PC端沒(méi)有。
開(kāi)關(guān)與其他選擇控件最大的區(qū)別是：開(kāi)關(guān)操作后，程序立即執(zhí)行相關(guān)操作。而其他選擇控件一般用在表單里，僅反映當(dāng)前的選擇狀態(tài)，如果要執(zhí)行操作并生效，需要點(diǎn)擊額外的提交按鈕。
注意:
不要為切換開(kāi)關(guān)創(chuàng)建層次結(jié)構(gòu)，避免使用開(kāi)關(guān)控制單個(gè)細(xì)節(jié)或次要設(shè)置。開(kāi)關(guān)的層級(jí)結(jié)構(gòu)這在視覺(jué)上更容易分散注意力，而且會(huì)造成一種錯(cuò)誤的印象，即所有的子選項(xiàng)都是開(kāi)著/關(guān)著的。所以禁止濫用開(kāi)關(guān)按鈕。
開(kāi)關(guān)具有比復(fù)選框更明顯的視覺(jué)效果，因此它控制的功能應(yīng)比復(fù)選框更為強(qiáng)大。如，可以使用開(kāi)關(guān)打開(kāi)或關(guān)閉一組復(fù)選框設(shè)置。因此它控制的功能應(yīng)比復(fù)選框更為強(qiáng)大。如，可以使用開(kāi)關(guān)打開(kāi)或關(guān)閉一組復(fù)選框設(shè)置。
注意加載狀態(tài)
如果開(kāi)關(guān)所執(zhí)行的操作需要考慮加載狀態(tài)，例如開(kāi)關(guān)切換狀態(tài)不是瞬間（短時(shí)間）完成的話(huà)，開(kāi)關(guān)則需要顯示加載狀態(tài)。
另外一種目前比較流行的加載方式是視覺(jué)上加載成功，服務(wù)器隨后加載成功。用戶(hù)操作開(kāi)關(guān)之后，開(kāi)關(guān)視覺(jué)上立即響應(yīng)改變，然后再向服務(wù)器相應(yīng)改變，中間會(huì)存在一定的時(shí)間差，這樣能帶給用戶(hù)更流暢的體驗(yàn)。
避免在開(kāi)關(guān)內(nèi)添加說(shuō)明標(biāo)簽。關(guān)于開(kāi)關(guān)的打開(kāi)或關(guān)閉，可以通過(guò)視覺(jué)樣式讓用戶(hù)很明確的感知。額外的提供文本標(biāo)簽描述開(kāi)關(guān)狀態(tài)是多余的，還會(huì)使界面混亂不堪。
單一的 icon 通過(guò)顏色或圖形的變化來(lái)表示開(kāi)或關(guān)的狀態(tài)。常見(jiàn)的且體驗(yàn)比較好的設(shè)計(jì)方案是將開(kāi)關(guān)樣式設(shè)計(jì)為當(dāng)前狀態(tài)樣式。如下圖相機(jī)界面內(nèi)HDR與AI功能的關(guān)閉與開(kāi)啟狀態(tài)。
當(dāng)然也有其它情況。最典型的就是視頻的播放暫停開(kāi)關(guān)，他們表示的就是操作后的狀態(tài)而不是當(dāng)前狀態(tài)。
名稱(chēng)變化，名稱(chēng)變化指的是開(kāi)關(guān)按鈕依賴(lài)于其名稱(chēng)的變化告知用戶(hù)開(kāi)關(guān)的當(dāng)前狀態(tài)和操作，如：關(guān)注與取消關(guān)注，已關(guān)注與已取關(guān)。名稱(chēng)變化的開(kāi)關(guān)由于語(yǔ)言的模糊性，仍然造成了部分歧義。我們可以在操作后加入其它提示來(lái)消除歧義（如：toast 提示）。
是否統(tǒng)一操作狀態(tài)倒不是關(guān)鍵，關(guān)鍵是我們是否能夠讓用戶(hù)理解按鈕相應(yīng)的意圖，不做出混亂的選擇便可。
通常用于切換不同的視圖，或者在表單中作為單選組件使用。一個(gè)分段tab通常會(huì)由2-6個(gè)單選項(xiàng)，可以是圖標(biāo)和短詞，它適合導(dǎo)航形式，被設(shè)計(jì)成一個(gè)水平或豎直的容器進(jìn)行單選。一組選項(xiàng)卡中的所有內(nèi)容應(yīng)該根據(jù)較大的分組原則進(jìn)行分組，每個(gè)選項(xiàng)卡的內(nèi)容與其他選項(xiàng)卡的內(nèi)容都互相獨(dú)立。
可以包含下拉列表的選項(xiàng)和使用翻頁(yè)。
固定的選項(xiàng)卡應(yīng)該只包含有限數(shù)量的選項(xiàng)，并且保持選項(xiàng)的位置不變，有利于用戶(hù)記憶?？蓾L動(dòng)選項(xiàng)卡用于有很多選項(xiàng)或選項(xiàng)數(shù)量可變的情況，但不推薦使用。
優(yōu)點(diǎn)：將所有選項(xiàng)都擺在一行或一列，對(duì)空間的利用率能達(dá)到最佳，設(shè)計(jì)樣式也可以做到非常直觀，漂亮。
缺點(diǎn)：不大適合處理長(zhǎng)詞，短語(yǔ)，如果要將這些內(nèi)容放在選項(xiàng)中，就須精簡(jiǎn)文本。水平空間非常有限，尤其是移動(dòng)端，即使是少量的選項(xiàng)，有時(shí)候你仍然要精簡(jiǎn)文本。
Tab選擇時(shí)，不要加載整個(gè)頁(yè)面，只有選項(xiàng)標(biāo)簽及其內(nèi)容區(qū)域應(yīng)更改。交替切換標(biāo)簽時(shí)，用戶(hù)應(yīng)該感覺(jué)自己在同一位置。不要在選項(xiàng)卡內(nèi)容中包含支持滑動(dòng)手勢(shì)的內(nèi)容，因?yàn)榛瑒?dòng)手勢(shì)是用于在選項(xiàng)之間導(dǎo)航的。例如，避免在選項(xiàng)卡中包含一個(gè)可以拖動(dòng)的地圖，或者一個(gè)可以滑動(dòng)刪除的列表。
當(dāng)功能不可用時(shí)，顯示空狀態(tài)，加入情感化提示，不要?jiǎng)h除選項(xiàng)卡，確保所有選項(xiàng)卡都啟用。
空狀態(tài)：是用戶(hù)在使用產(chǎn)品時(shí)某個(gè)界面無(wú)法顯示的時(shí)刻，即沒(méi)有其他元素。良好的空狀態(tài)可以讓用戶(hù)知道正在發(fā)生的情況，發(fā)生的原因以及該怎么做。
這是四種常見(jiàn)的空狀態(tài)類(lèi)型：
首次使用——新產(chǎn)品沒(méi)有內(nèi)容可以顯示時(shí)，例如打開(kāi)新注冊(cè)的印象筆記時(shí)會(huì)遇到這種情況。
內(nèi)容被清除——當(dāng)用戶(hù)完成類(lèi)似清空消息或收件箱等操作后，會(huì)出現(xiàn)一個(gè)空白的屏幕。
出現(xiàn)錯(cuò)誤——產(chǎn)品由于網(wǎng)絡(luò)問(wèn)題造成離線(xiàn)時(shí)，會(huì)出現(xiàn)空狀態(tài)的使用。
無(wú)結(jié)果——如果用戶(hù)進(jìn)行搜索，但是查詢(xún)內(nèi)容為空時(shí)會(huì)發(fā)生這種情況。
具有3個(gè)選擇項(xiàng)的Tab標(biāo)簽，我們能明顯區(qū)分選中和未選中狀態(tài)，應(yīng)為T(mén)ab標(biāo)簽是單選控件。但是，如果只有兩個(gè)選項(xiàng)，又是矩形按鈕的選擇項(xiàng)，則很難區(qū)分當(dāng)前選擇是哪個(gè)，哪個(gè)為選中狀態(tài)？我自己某段時(shí)間一直默認(rèn)顏色填充形按鈕是選中狀態(tài)，但經(jīng)同事一提，一陣猛驚，那另一個(gè)是否為選中狀態(tài)？在兩個(gè)選項(xiàng)中存在選擇疑惑，我們?nèi)绾未_定狀態(tài)呢？
因此，我努力在統(tǒng)一風(fēng)格的提前下，找出固有的特征，增強(qiáng)選中狀態(tài)。這個(gè)大家如果有更好想法，歡迎留言。
標(biāo)簽選擇通常用于要從3-10個(gè)選項(xiàng)中進(jìn)行多次選擇操作情況，它們最適合用一到兩個(gè)簡(jiǎn)短的單詞或數(shù)字。它們?cè)O(shè)計(jì)的形式一般是一個(gè)個(gè)按鈕，通過(guò)背景色來(lái)區(qū)分“選中”和“未選中”。由于不存在2個(gè)選項(xiàng)的情況，所以
面對(duì)多選標(biāo)簽時(shí)，面對(duì)多個(gè)選擇項(xiàng)的彼此堆疊，需讓讓用戶(hù)知道他們可以選擇多少個(gè)選項(xiàng)。添加輔助說(shuō)明，既可以明確它是多選，又可以規(guī)范的最大選擇項(xiàng)；選項(xiàng)過(guò)多時(shí)進(jìn)行標(biāo)簽分類(lèi)。
優(yōu)點(diǎn)：節(jié)省空間，標(biāo)簽堆砌在一起的具體樣式是由文本長(zhǎng)度決定的。它們給人的印象是輕量的，有趣的。
缺點(diǎn)：這種形式與tab選項(xiàng)形式有一樣的弊端，都不能很好的處理長(zhǎng)詞。不建議對(duì)文本進(jìn)行折行或者調(diào)整大小，會(huì)不方便用戶(hù)閱讀，同時(shí)使用兩行以上的標(biāo)簽會(huì)使得每個(gè)標(biāo)簽非常難以快速掃描。
其他樣式：用圓形或其他形狀來(lái)表示一個(gè)個(gè)標(biāo)簽選項(xiàng)，比較重要或更受歡迎的選項(xiàng)形狀更大，用戶(hù)選中多個(gè)圓形就是選擇了多個(gè)選項(xiàng)；也可以在常見(jiàn)的按鈕中加入圖片的元素，這種的話(huà)樣式新穎，但要注意選中時(shí)的文字圖片的對(duì)比，文字是否具有可見(jiàn)性，適當(dāng)加上文字選中效果。
Tab標(biāo)簽和多選標(biāo)簽
選項(xiàng)數(shù)量是tab控件和標(biāo)簽控件之間最大的區(qū)別。一個(gè)連續(xù)的背景幫助用戶(hù)理解他們必須要選擇一個(gè)，而一個(gè)分離的背景表明他們可以選擇多個(gè)。
列表選擇控件包含選擇按鈕，容器框，項(xiàng)目列表和標(biāo)簽。用戶(hù)可以單擊容器框中隨附的項(xiàng)目，以從列表中選擇一個(gè)或多個(gè)。列表框可能會(huì)滾動(dòng)，具體取決于它包含的項(xiàng)目數(shù)和可見(jiàn)區(qū)域，更復(fù)雜的列表框允許用戶(hù)通過(guò)將項(xiàng)目從一個(gè)列表框移動(dòng)到另一個(gè)列表框來(lái)調(diào)整容器框的大小，重新排列項(xiàng)目列表以及進(jìn)行選擇。
優(yōu)點(diǎn)：
交互成本低：列表框不需要用戶(hù)單擊任何內(nèi)容即可在進(jìn)行選擇之前顯示其中的選項(xiàng)（但是，如果有太多項(xiàng)，它們可能需要用戶(hù)滾動(dòng)列表）。
增加了可見(jiàn)性：一次查看多個(gè)選項(xiàng)的能力可以加快決策速度并提高選擇準(zhǔn)確性。列表選擇為內(nèi)容提供了更多的空間。它們易于閱讀，可以容納多文字，文本可以換行，還可以增加圖片。但是，應(yīng)避免在多列列表框中進(jìn)行水平滾動(dòng)。
用多選雙列表框，用戶(hù)可以控制項(xiàng)目的顯示順序，并獲得所選項(xiàng)目的清晰概述，這在列表框包含多個(gè)選項(xiàng)時(shí)很有用。
缺點(diǎn)：
空間：他們往往很占用空間，不適合用在垂直高度受限的頁(yè)面中。
陌生：用戶(hù)可能不知道如何立即與列表框進(jìn)行交互-特別是，如果多選列表框中未包含復(fù)選框，則他們可能不知道如何選擇倍數(shù)。這就是為什么將復(fù)選框包含在多選列表框中非常重要的原因，除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。
用戶(hù)可能無(wú)法一次看到所有選定的選項(xiàng)：如果在可見(jiàn)區(qū)域中看不到更多的可用項(xiàng)目，則用戶(hù)可能無(wú)法同時(shí)看到所有選定的項(xiàng)目。為避免此缺點(diǎn)，請(qǐng)?jiān)诹斜砜蛏戏綄⑺x項(xiàng)目顯示為標(biāo)記，或在不可滾動(dòng)的列表中突出顯示所選項(xiàng)目。
可以根據(jù)選擇類(lèi)型進(jìn)行分類(lèi)，這些列表框形式都可以滾動(dòng)。
用戶(hù)只能從互斥選項(xiàng)列表中選擇一項(xiàng)。最初的單選按鈕被用于列表中超過(guò)6個(gè)選項(xiàng)時(shí)，被設(shè)計(jì)成垂直方向，圓形輪廓，并擺在列表項(xiàng)的開(kāi)頭，這就是列表單選?，F(xiàn)一些設(shè)計(jì)中，選中被設(shè)計(jì)成在列表選項(xiàng)外加一個(gè)描邊框形式或帶有背景色，用以節(jié)省水平空間。
這種類(lèi)型的列表框包括使多個(gè)選擇更加明顯的復(fù)選框，設(shè)計(jì)樣式上，web通常是在列表開(kāi)頭處設(shè)計(jì)一個(gè)正方形描邊框（復(fù)選框）。
這種類(lèi)型的列表框由兩個(gè)列表框組成，兩處的列表框內(nèi)容可以相互拖拽。比如左側(cè)的列表框已選中項(xiàng)目可拖拽至右側(cè)列表框，同時(shí)支持表內(nèi)上下拖拽更換順序。
點(diǎn)擊“ 右箭頭”按鈕可將左側(cè)的列表框所選項(xiàng)目移動(dòng)至右側(cè)列表框。多選雙列表框?qū)嶋H運(yùn)用較少。
這是是一種彈出按鈕，單擊后會(huì)顯示包含選項(xiàng)列表的菜單。下拉列表以最簡(jiǎn)單的形式包含四個(gè)主要部分：一個(gè)容器框，一個(gè)朝下的箭頭按鈕，一個(gè)項(xiàng)目列表和一個(gè)標(biāo)簽。用戶(hù)可以單擊向下箭頭以顯示互斥項(xiàng)的列表，從中只能選擇一項(xiàng)。標(biāo)準(zhǔn)下拉菜單是針對(duì)我們所理解的“下拉”這個(gè)動(dòng)詞。在激活狀態(tài)，當(dāng)你點(diǎn)擊文本輸入欄的地方時(shí)，它會(huì)打開(kāi)一個(gè)菜單。列表項(xiàng)僅在單擊向下箭頭后出現(xiàn)，選擇一個(gè)項(xiàng)目或在下拉列表的外部單擊將其關(guān)閉。
下拉列表的優(yōu)點(diǎn)：
為用戶(hù)提供最佳選項(xiàng)的功能，默認(rèn)情況下處于選中狀態(tài)。
淡化替代選項(xiàng)和更改：由于下拉列表隱藏了其他可用選項(xiàng)，因此它們很好地淡化了替代選項(xiàng)并過(guò)分強(qiáng)調(diào)了進(jìn)行更改的能力。（這在默認(rèn)值可以滿(mǎn)足大多數(shù)用戶(hù)的情況下，并且其他選項(xiàng)可能對(duì)非專(zhuān)業(yè)用戶(hù)來(lái)說(shuō)是危險(xiǎn)的或令人困惑的情況下是有利的。）
熟悉：下拉列表是大多數(shù)用戶(hù)熟悉的選擇機(jī)制，因?yàn)橄吕斜碓赪eb和本機(jī)應(yīng)用程序中得到廣泛使用。
缺點(diǎn)是需要點(diǎn)擊項(xiàng)目列表中的選項(xiàng)，包括：
列表包含過(guò)多的內(nèi)容，可能會(huì)很麻煩地滾動(dòng)。
當(dāng)用戶(hù)習(xí)慣于捕獲眾所周知的值時(shí)，它們會(huì)使用戶(hù)放慢速度。例如，當(dāng)輸入生日或信用卡到期日期時(shí)，與下拉列表進(jìn)行交互相比，在直接鍵入內(nèi)容通常更快，更容易。
忽視：由于表單內(nèi)容非常緊湊，因此用戶(hù)可能會(huì)意外忽視表單，網(wǎng)頁(yè)和應(yīng)用程序中的下拉列表。
容易消除：不小心將光標(biāo)從框中移開(kāi)會(huì)關(guān)閉下拉菜單，不得不重新開(kāi)始選擇過(guò)程。
當(dāng)長(zhǎng)型下拉菜單的設(shè)計(jì)不是特別理想時(shí)，你可以把列表分組，這樣搜索起來(lái)更加簡(jiǎn)單。
可編輯的下拉菜單在菜單上方顯示當(dāng)前選擇的菜單項(xiàng)，用戶(hù)可以輸入菜單中未列出的值。您可以將用戶(hù)可以輸入的值的類(lèi)型限制為某些類(lèi)型。例如，設(shè)計(jì)軟件中輸入字體大小時(shí)，系統(tǒng)會(huì)默認(rèn)一些數(shù)值，同時(shí)支持你編輯修改。
為了更方便用戶(hù)的填入，支持字詞搜尋，填寫(xiě)一半時(shí)，就會(huì)出現(xiàn)帶有關(guān)鍵詞名稱(chēng)選單。在選項(xiàng)很多的情況下，這個(gè)功能變得格外實(shí)用。
下拉菜單多選是復(fù)選框的延伸：用戶(hù)可以在同一個(gè)輸入?yún)^(qū)域選擇多個(gè)。這件控件用的比較少。
這種控件我一般在多個(gè)對(duì)象進(jìn)行對(duì)比時(shí)才使用，如選擇多個(gè)公司比較他們的能耗水平與用電規(guī)模，由于公司字段比較長(zhǎng)，在查看選中狀態(tài)時(shí)需注意容器能否充分顯示選擇的字段，在導(dǎo)航菜單中會(huì)明顯擁擠，在表單中使用相對(duì)自由。如果可以的話(huà)，篩選中盡量避開(kāi)這種類(lèi)型。
將站點(diǎn)，應(yīng)用程序或系統(tǒng)的所有不同部分合并為一個(gè)長(zhǎng)列表，該列表進(jìn)一步細(xì)分為子類(lèi)別，并可以從導(dǎo)航欄中訪問(wèn)，例如下面華為云的下拉列表，大型下拉菜單用于顯示大量的選項(xiàng)，分類(lèi)，數(shù)據(jù)集或其他類(lèi)型的相關(guān)內(nèi)容組。
任何偏離你所設(shè)計(jì)的平臺(tái)標(biāo)準(zhǔn)的行為都會(huì)給用戶(hù)帶來(lái)額外的認(rèn)知負(fù)擔(dān)。
選擇控件在操作過(guò)程中必須更改其狀態(tài)/外觀，以便用戶(hù)知道是否能選中，是否被選中。添加這些小的視覺(jué)反饋，以使用戶(hù)正向的理解，但是差異化設(shè)計(jì)又不能喧賓奪主。
默認(rèn)就是選擇器的開(kāi)始狀態(tài)。向用戶(hù)表明，可對(duì)該選擇控件進(jìn)行操作。
選擇按鈕置灰顯示，用戶(hù)將無(wú)法與選項(xiàng)進(jìn)行交互。除非產(chǎn)品規(guī)則指定，否則很少會(huì)遇到這種狀態(tài)。
像按鈕一樣，選擇控件應(yīng)向用戶(hù)指示它們是可交互的。通常，通過(guò)突出顯示鼠標(biāo)懸停項(xiàng)目區(qū)域的背景來(lái)突出顯示，吸引用戶(hù)的注意。觸摸設(shè)備沒(méi)有懸停狀態(tài)。
當(dāng)用戶(hù)按住鼠標(biāo)/手指點(diǎn)擊，選擇控件處于被點(diǎn)擊的狀態(tài)。
列表多選支持批量選擇和清除
使用列表多選，一次全選或取消已選擇的多個(gè)選擇項(xiàng)毫不費(fèi)力。
下拉列表狀態(tài)
下拉列表在按下?tīng)顟B(tài)時(shí)會(huì)打開(kāi)選項(xiàng)列表，還有種常見(jiàn)做法是懸停狀態(tài)時(shí)直接打開(kāi)選項(xiàng)列表。我更喜歡第一種，第二種在我沒(méi)有明確操作的情況下，下拉列表就自動(dòng)打開(kāi)的這點(diǎn)讓我比較困惑。
列表選擇狀態(tài)
列表選擇控件在管理文件時(shí)，只有通過(guò)按下選中選項(xiàng)才能進(jìn)行編輯性操作。
點(diǎn)擊按鈕進(jìn)入批量編輯狀態(tài)，狀態(tài)未選擇時(shí)，操作按鈕置灰。按下/勾選列表選項(xiàng)后，操作按鈕點(diǎn)亮，展示已選項(xiàng)的數(shù)量，即對(duì)當(dāng)前勾選操作的反饋。點(diǎn)擊操作按鈕，進(jìn)入對(duì)應(yīng)操作編輯流程。
一般都是用戶(hù)沒(méi)有進(jìn)行選擇，單擊“提交”按鈕后收到失敗反饋。
在實(shí)際的使用過(guò)程中，選擇控件有默認(rèn)、禁用、懸停、按下等不同狀態(tài)，雖然這些狀態(tài)看起來(lái)很多，但是這些狀態(tài)涉及到實(shí)際交互的需求和不同場(chǎng)景，并且是實(shí)現(xiàn)可靠交互的基礎(chǔ)。
這個(gè)針對(duì)于單選框控件
如果用戶(hù)不想做出選擇，那么應(yīng)該提供一個(gè)中立選項(xiàng)。為用戶(hù)提供一個(gè)明確的方向，中立選項(xiàng)比錯(cuò)誤選擇要好。
在單選框的選擇時(shí)，要充分考慮用戶(hù)的實(shí)際情況，給出的選項(xiàng)要覆蓋到所有的情況。例如，要考慮到用戶(hù)不進(jìn)行選擇的情況，這時(shí)需要提供一個(gè)“無(wú)”的選項(xiàng)；給出的選項(xiàng)有可能都不符合用戶(hù)的情況，如果所有的選項(xiàng)用戶(hù)都不會(huì)選，就需要提供一個(gè)“其它”選項(xiàng)。
單選框所有選項(xiàng)應(yīng)該滿(mǎn)足“互斥”的原則，因此選項(xiàng)之間要避免存在交集，選項(xiàng)覆蓋要全面，不能出現(xiàn)遺漏。例如，在一個(gè)年齡的選擇設(shè)置上，如果提供的選項(xiàng)為“20-30歲”和“30-40歲”，那么如果用戶(hù)剛好30歲該如何選擇？
這個(gè)針對(duì)于單選框，Tab切換，下拉列表
單選框最好有一個(gè)默認(rèn)選項(xiàng)，當(dāng)單選框把選項(xiàng)默設(shè)置為為選中時(shí)，一旦選擇了一個(gè)單選按鈕，用戶(hù)就不可撤銷(xiāo)，無(wú)法返回默認(rèn)狀態(tài)；而默認(rèn)選中一個(gè)則可以防止這類(lèi)問(wèn)題，一開(kāi)始就向用戶(hù)傳遞信息必須要在這組單選項(xiàng)之中選擇一個(gè)。
下拉菜單中默認(rèn)選項(xiàng)優(yōu)與請(qǐng)選擇，如果根據(jù)權(quán)限或使用頻率能定位到適用于大多數(shù)用戶(hù)的選擇項(xiàng)時(shí)，就不要默認(rèn)為“請(qǐng)選擇”，而是使用默認(rèn)選項(xiàng)，這樣做可以降低交互成本和節(jié)省用戶(hù)的時(shí)間和點(diǎn)擊數(shù)。
如“國(guó)家”和“語(yǔ)言”字段。在這種情況下，根據(jù)權(quán)限IP，默認(rèn)選項(xiàng)是合理的，絕大多數(shù)用戶(hù)也不會(huì)更改選項(xiàng)，因此繼續(xù)選擇就會(huì)很煩人，耽誤時(shí)間。
帶有默認(rèn)選項(xiàng)的單選按鈕組合是給用戶(hù)的強(qiáng)有力建議——甚至是推薦。默認(rèn)選項(xiàng)可能會(huì)引導(dǎo)用戶(hù)做出最好的決定，并在接下來(lái)增加他們的信心。尤其是默認(rèn)選項(xiàng)可以輔助用戶(hù)，并讓用戶(hù)向著產(chǎn)品所希望的方向傾斜。
在用戶(hù)需做出復(fù)雜決定或處在不熟悉領(lǐng)域時(shí)特別有幫助。當(dāng)標(biāo)題和描述都很陌生的時(shí)候，默認(rèn)選項(xiàng)可以引導(dǎo)用戶(hù)在各個(gè)可能未能理解的選項(xiàng)里做出最好的決定。
在產(chǎn)品上總想說(shuō)服用戶(hù)做出對(duì)產(chǎn)品有利的動(dòng)作。默認(rèn)選項(xiàng)就會(huì)引誘用戶(hù)去走特定的道路。常見(jiàn)的例子就是活動(dòng)頁(yè)面，對(duì)于忍痛離開(kāi)按鈕低調(diào)置灰顯示，對(duì)于留在頁(yè)面按鈕高亮顯示。
當(dāng)然也有許多時(shí)候是不帶默認(rèn)選項(xiàng)的：
不知道用戶(hù)行為或想要什么
選擇是否會(huì)冒昧，如性別，稱(chēng)呼等
防錯(cuò)，保證用戶(hù)能夠看到選項(xiàng)并動(dòng)手做出選擇，比起用戶(hù)會(huì)出錯(cuò)并事后給出警示強(qiáng)
如果希望用戶(hù)只選擇一定數(shù)量的項(xiàng)目。要強(qiáng)制執(zhí)行此操作，如果用戶(hù)單擊的次數(shù)多于所選數(shù)量，則他們最早的選擇將會(huì)被最近的選擇替換。同時(shí)注意需要加上輔助說(shuō)明。
選項(xiàng)排序會(huì)影響用戶(hù)操作，因此需要遵守一定排列原則。
你應(yīng)該將所有選項(xiàng)按邏輯順序擺放，比如按被選中可能性由大到小，按操作難易度由簡(jiǎn)單到復(fù)雜，按風(fēng)險(xiǎn)由小到大，將最安全的操作放在前邊，列表選擇一般按照信息時(shí)間排序，由新到舊。
選項(xiàng)的順序可以說(shuō)服用戶(hù)進(jìn)行選擇，就像前面說(shuō)的默認(rèn)選擇項(xiàng)一樣，他們可能只是因?yàn)榈谝粋€(gè)選項(xiàng)在列表中的位置而選擇了第一個(gè)選項(xiàng)?？梢暂o助用戶(hù)，也可以讓用戶(hù)向著產(chǎn)品所希望的方向傾斜。
一般情況下，左側(cè)對(duì)齊排列發(fā)揮最佳效果，標(biāo)簽選擇除外。豎直排列相對(duì)于水平排列而言，容易讀取和定位，每行一個(gè)選項(xiàng)足以，可以提高用戶(hù)的瀏覽效率并減少錯(cuò)誤。
但是豎直排列會(huì)占用較多的垂直空間，如果垂直空間受限，可以考慮水平排列。水平排列的時(shí)候，要注意每個(gè)選項(xiàng)之間的間距盡量大一點(diǎn)，以清晰的傳達(dá)選項(xiàng)對(duì)應(yīng)哪個(gè)標(biāo)簽。
移動(dòng)端更多的情況是左側(cè)標(biāo)簽對(duì)齊，右側(cè)按鈕對(duì)齊，二者與頁(yè)面留出相同的邊距。垂直屏幕占比小，常用于呼出選擇、開(kāi)關(guān)等有選擇操作的表單標(biāo)簽。
交互區(qū)域要適當(dāng)大。單選框的面積較小，用戶(hù)在點(diǎn)擊的時(shí)候會(huì)比較困難，尤其是在移動(dòng)設(shè)備上，易誤操作，可以通過(guò)擴(kuò)大點(diǎn)擊區(qū)的交互區(qū)域來(lái)提高易用性。復(fù)選框和單選按鈕一般都很小，點(diǎn)擊或點(diǎn)選會(huì)很麻煩，可點(diǎn)擊區(qū)域中應(yīng)同時(shí)包含按鈕和標(biāo)簽，增加操作區(qū)域的面積，方便用戶(hù)操作。
列表選擇中可以點(diǎn)擊容器框所在行區(qū)域來(lái)切換行對(duì)象的選中和未選中。
每個(gè)選項(xiàng)都要配合相應(yīng)的文字標(biāo)簽來(lái)指示該選項(xiàng)含義。
最好在每個(gè)區(qū)域上提供同類(lèi)型的標(biāo)簽，這樣可以給用戶(hù)一種視覺(jué)穩(wěn)定性的感覺(jué)。同時(shí)盡量保證每個(gè)文字標(biāo)簽用語(yǔ)的表達(dá)的一致性，避免否定詞，不要出現(xiàn)有的用名詞，有的用動(dòng)詞的情況。
不要在同一組標(biāo)簽中混用文字和圖標(biāo)
一個(gè)分段就像是一個(gè)按鈕，按鈕內(nèi)當(dāng)然可以使用文字或者圖標(biāo)代表其含義，但是請(qǐng)不要在同一個(gè)Segment Controls中混用文字和圖標(biāo)，避免讓用戶(hù)覺(jué)得混亂和不一致。
文字標(biāo)簽需要簡(jiǎn)潔明了，一般使用短語(yǔ)而不是句子，因此不需要以句號(hào)來(lái)結(jié)尾。如果需要解釋說(shuō)明，可以在選項(xiàng)下方使用單獨(dú)一行文字說(shuō)明。僅體現(xiàn)每個(gè)個(gè)體之間的差異，不用重復(fù)選項(xiàng)之間相同的部分，將重復(fù)部分提出來(lái)放在整個(gè)選項(xiàng)的上方。
輔助提示很好地補(bǔ)充在消除歧義上的不足，但我們也需要合理使用，進(jìn)行克制，否則就會(huì)造成不必要的視覺(jué)噪聲。
暗示指的是用戶(hù)在操作選擇前，給予用戶(hù)的提示，用戶(hù)根據(jù)這些提示可以判斷當(dāng)前狀態(tài)以及操作后狀態(tài)。
比如在界面風(fēng)格模式，主題色，導(dǎo)航模式切換中，用戶(hù)可以通過(guò)當(dāng)前界面的樣式判斷當(dāng)前是是什么模式，以及選中其它選項(xiàng)后會(huì)產(chǎn)生什么結(jié)果，如下圖（來(lái)源螞蟻設(shè)計(jì)語(yǔ)言）在選擇圖標(biāo)中就給予相對(duì)應(yīng)模式的提示。
下圖，白天模式與夜間模式，用戶(hù)可以通過(guò)當(dāng)前界面的樣式判斷當(dāng)前是否已經(jīng)開(kāi)啟了相關(guān)模式，從而判斷撥動(dòng)開(kāi)關(guān)后是什么結(jié)果。
環(huán)境暗示的優(yōu)勢(shì)是我們不需要其它設(shè)計(jì)和反饋告知用戶(hù)當(dāng)前狀態(tài)，可以通過(guò)選擇對(duì)象和當(dāng)前界面環(huán)境給予直觀暗示。
由于按下開(kāi)關(guān)控件后立即執(zhí)行操作，如果操作比較危險(xiǎn)，請(qǐng)?jiān)谖ｋU(xiǎn)操作后加入二次彈窗確認(rèn)，告知用戶(hù)當(dāng)前狀態(tài)以及潛在風(fēng)險(xiǎn)，避免造成嚴(yán)重?fù)p失。
當(dāng)用戶(hù)操作后，提示框氣泡反饋告知用戶(hù)，讓用戶(hù)知道自己是觸發(fā)了開(kāi)啟還是關(guān)閉。彈窗提示強(qiáng)度大，使用在一些危險(xiǎn)、重要的反饋中，提示框則使用在一些輕量的提示中。
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來(lái)充當(dāng)說(shuō)明。下圖是手機(jī)信號(hào)設(shè)置和省電設(shè)置相關(guān)的選擇，開(kāi)關(guān)的主體是名稱(chēng)，但是下面的一行輔助文案很清晰地傳達(dá)了開(kāi)關(guān)開(kāi)啟后的后的狀態(tài)。
并不是所有提示都需要讓用戶(hù)看見(jiàn)，我們可以給予用戶(hù)其他感官的信號(hào)告知用戶(hù)當(dāng)前狀態(tài)。界面設(shè)計(jì)與交互中，我們也仍然可以使用聽(tīng)覺(jué)和觸覺(jué)來(lái)消除開(kāi)關(guān)的歧義。
在安卓微信聊天列表中，選擇一行聊天對(duì)象長(zhǎng)按，手機(jī)會(huì)輕微振動(dòng)一下，表示已點(diǎn)擊，給予觸覺(jué)反饋，同時(shí)展開(kāi)的多個(gè)選項(xiàng)可進(jìn)行選擇操作；手機(jī)在關(guān)閉電源時(shí)，手機(jī)會(huì)卡擦一下，給予聽(tīng)覺(jué)反饋，表示已關(guān)閉屏幕，而不需要眼睛盯著屏幕關(guān)閉。
我們很容易陷入到特定控件的中，所以我最好是從整體上開(kāi)始思考。然后做出最佳決定，決定使用哪種選擇設(shè)計(jì)最有利于一致性、差異性和層次感，控件的高度，寬度，樣式設(shè)計(jì)和選項(xiàng)數(shù)量都是至關(guān)重要的因素。我們可以從被選擇對(duì)象是單選還是多選出發(fā)，來(lái)確定使用哪種選擇控件，可以根據(jù)下圖情況選擇，當(dāng)然由于使用場(chǎng)景和內(nèi)容的不同，請(qǐng)選擇性參考。
單選按鈕認(rèn)知成本低，它能可見(jiàn)所有選項(xiàng)并讓用戶(hù)容易做出選擇。
單選框，用戶(hù)能夠很快看到有幾個(gè)選項(xiàng)以及每個(gè)選項(xiàng)是什么，而不用點(diǎn)擊或其他操作再去發(fā)現(xiàn)這些信息。讓所有選項(xiàng)都可見(jiàn)，使用戶(hù)可以方便地進(jìn)行比較，這樣可以減少認(rèn)知負(fù)荷，幫助表單更加透明。
涉及到選擇項(xiàng)與內(nèi)容組之間以及在相同層次結(jié)構(gòu)中進(jìn)行導(dǎo)航時(shí)，使用Tab標(biāo)簽。不要將標(biāo)簽用于無(wú)關(guān)的目的地，也不要加載選項(xiàng)卡的整個(gè)頁(yè)面，只有選項(xiàng)卡及其內(nèi)容區(qū)域進(jìn)行更改。
如果選項(xiàng)的數(shù)量超過(guò)6個(gè)時(shí)，應(yīng)考慮使用下拉列表中或列表單選，因?yàn)閱芜x按鈕太多，也會(huì)令人不知所措并引起混亂，用戶(hù)無(wú)論如何都無(wú)法記住所有的選項(xiàng)。
下拉列表簡(jiǎn)潔。更多適用于可預(yù)測(cè)的、類(lèi)似的或增量的選項(xiàng)(年份選擇 )。數(shù)量較多且相類(lèi)似的選項(xiàng)選擇用下拉菜單整合。
如果屏幕空間有限，請(qǐng)使用下拉菜單。如果不是，請(qǐng)使用列表框。使用下拉菜單，可以使用默認(rèn)選項(xiàng)，并淡化其它選擇。
選擇項(xiàng)標(biāo)簽短小且一致時(shí)，使用復(fù)選框，可以方便地進(jìn)行比較，這樣可以減少認(rèn)知負(fù)荷，幫助表單也更加透明。
列表多選一般應(yīng)用于6個(gè)以上選擇項(xiàng)進(jìn)行多選的情況，數(shù)量更多出現(xiàn)將翻頁(yè)或滾動(dòng)情況，需要告知用戶(hù)已選多少條數(shù)據(jù)，并在選中選項(xiàng)時(shí)出現(xiàn)相關(guān)操作。
選擇項(xiàng)數(shù)量在3-10之間，標(biāo)簽不能過(guò)長(zhǎng)，考慮使用多選標(biāo)簽。多選標(biāo)簽它們給人的印象是輕量的，有趣的。
切換開(kāi)關(guān)是一種數(shù)字開(kāi)關(guān)。任何由切換開(kāi)關(guān)觸發(fā)的效果應(yīng)立即生效。如果不是這樣，最好用單個(gè)復(fù)選框替換切換開(kāi)關(guān)。
多選標(biāo)簽不能很好的處理長(zhǎng)詞。不建議對(duì)文本進(jìn)行折行或者調(diào)整大小，因?yàn)闀?huì)不便于用戶(hù)閱讀，使用兩行以上的標(biāo)簽會(huì)使得每個(gè)標(biāo)簽非常難以快速掃描。
你應(yīng)該防止出現(xiàn)很難看清選擇哪個(gè)控件的情況（確保按鈕和文本標(biāo)簽的間距），可以考慮使用選擇標(biāo)簽或拉大間距以此來(lái)在視覺(jué)上清晰地分隔選項(xiàng)。
本文介紹了多種選擇類(lèi)控件，從用戶(hù)使用選擇類(lèi)控件的角度闡釋了模式定義，涵蓋了大多數(shù)錄入場(chǎng)景。選擇類(lèi)控件本身也需要不斷進(jìn)行迭代、優(yōu)化和拓展，以適應(yīng)更多的應(yīng)用場(chǎng)景。后續(xù)我將持續(xù)關(guān)注，希望本文的能幫助你。
歡迎留言糾正，感謝閱讀。
文章來(lái)源：tob.design 作者：小龍
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn