設(shè)計的思考不僅要注重表象層面，也需要圍繞信息傳達這一設(shè)計的本質(zhì)功能，以充滿自省的精神深化和反思自己的設(shè)計意識，即做到“好看、好用”。在設(shè)計過程中，要站在公司的利益上，懂用戶所想，在每一個關(guān)鍵點都要帶給用戶意想不到的驚喜，這些往往都是通過細節(jié)體現(xiàn)出來的。

01.「微信」添加好友-掃描與被掃指尖切換

產(chǎn)品體驗：

使用微信掃一掃添加好友時，如果對方打開二維碼的速度較慢（網(wǎng)絡(luò)不好/手機卡頓/操作不熟），為避免自己久等，可通過左下角的二維碼入口將自己的個人二維碼提供給對方掃描添加。

設(shè)計思考：

微信的掃一掃功能簡直強大到不敢相信，除了我們?nèi)粘Ｒ玫闹Ц陡犊睢⑽锲凡樵?、各種信息的獲取等，還有一個重大的功能就是添加好友。不知道大家有沒有碰到過這種情況，需要添加好友時，自己打開掃一掃，過了很久卻發(fā)現(xiàn)對方還在功能的路徑中徘徊，遲遲沒有打開二維碼頁面，這時我們不得不說一聲“你掃我吧”，于是自己從掃描頁面返回，一頓騷操作，把自己的個人二維碼給對方展示了出來。

微信在掃一掃頁面左下角提供的個人二維碼入口，便于在加好友出現(xiàn)問題時，隨時由被動變?yōu)橹鲃樱讣馇袚Q掃描與被掃的添加方式，節(jié)約用戶時間成本以及緩解掃描等待的焦慮感?；谟脩籼砑雍糜褧r所處的使用環(huán)境，考慮周全且人性化，極大方便用戶使用。

02.「高德地圖」錄入車牌號-降低限行違章概率

產(chǎn)品體驗：

在高德地圖的導(dǎo)航設(shè)置中，錄入自己的車牌號并開啟避開限行提醒，在導(dǎo)航過程中如果途徑限行路段，系統(tǒng)會有語音播報提醒并自動避開限行路段重新規(guī)劃路線。

設(shè)計思考：

自北、上、廣、深四個一線城市交通部分別出臺汽車限行措施后，其他部分城市也相繼出了限外政策，外地車牌如果想要在本城市隨時出行，需要（部分城市通過搖號）獲得本地車牌號方可。不管我們對交通路線有多熟悉、或者經(jīng)過其他城市的限行路段，因限行導(dǎo)致的違章真是防不勝防，畢竟每個地方的限行政策都是通過固定渠道對外宣布，不會通知到每一個駕駛員，如果不能第一時間獲得限行訊息，悔之晚矣。

使用高德地圖導(dǎo)航，在登錄后錄入車牌號并開啟“避開限行”，系統(tǒng)就會自動檢測導(dǎo)航路線，如果要經(jīng)過限行/限外路段時會自動重新規(guī)劃，通過繞行來避讓限行的路段，如果無法避開則提示：已無法為你規(guī)避限行路段，請合理安排出行。自動規(guī)劃路線能夠有效避免因限行導(dǎo)致的違章，給我們造成經(jīng)濟損失，尤其是駕照，畢竟一周期才12分。就算無法避開，也可以通過語音提前知道限行路段，并合理安排出行時間。

（PS：雖然很多用戶感覺無需登錄也可以正常使用，但登錄之后可以享受更多特權(quán)以及更加優(yōu)質(zhì)的服務(wù)）

03.「支付寶」你想要的收款二維碼樣式是這樣的

產(chǎn)品體驗：

在支付寶的收款二維碼頁面截圖時，系統(tǒng)預(yù)判用戶有使用二維碼收款的需求，通過彈窗提示是否需要保存二維碼圖片，自動去掉無關(guān)信息并統(tǒng)一規(guī)范樣式。

設(shè)計思考：

移動支付自上線開始，微信支付和支付寶支付各自占領(lǐng)著半江山，只要涉及線上交易，絕大多數(shù)用戶每天必定會選擇其中一個使用，雖然兩大企業(yè)的方向截然不同，但支付系統(tǒng)在用戶體驗方面都是一如既往的持續(xù)提升，以此來增加用戶的粘性。

支付寶收款二維碼頁面觸發(fā)截圖，在截取成功的狀態(tài)下，同時彈出保存二維碼圖片提示。跟設(shè)備截取的圖片相比，單獨保存的二維碼樣式更加簡潔，且規(guī)范統(tǒng)一，信息內(nèi)容更加聚焦，便于用戶直接傳送或打印使用。其實進入收款二維碼頁面，在下方原本就有保存圖片入口，基于用戶進入此頁面的需求明確，對性子較急且耐性較低的用戶來說，這個被弱化的保存入口，可能直接忽略（別不信，我見過有人手上拿著手機還在到處找手機）。截圖時出現(xiàn)的彈窗提示，相當(dāng)于上了一道保險，避免使用截圖自行裁剪打印的樣式不統(tǒng)一，導(dǎo)致付款用戶心中原本就已存在的默認收款二維碼樣式發(fā)生變化，形成認知負擔(dān)。

04.「抖音」暗示用戶-好看就要分享

產(chǎn)品體驗：

在抖音短視頻頁面停留一段時間后，分享圖標(biāo)會自動變成最近常分享的某個用戶頭像，暗示用戶好東西要分享。

設(shè)計思考：

抖音作為當(dāng)前最火的短視頻（直播）平臺，相信很多用戶即使不經(jīng)常玩，但最起碼會玩，雖然有部分低俗、劣質(zhì)的用戶在破壞著平臺的規(guī)則，但整體看來是利大于弊的，其他的交給人心。下載抖音的用戶大部分獲取來源應(yīng)該是來自于他人的分享，一傳十十傳百，最終傳到人手必備，所以平臺是相當(dāng)注重分享功能的用戶體驗。

抖音的分享功能，其實還有一個小細節(jié)，當(dāng)我們停在某個短視頻頁面一段時間時，原本的分享圖標(biāo)會變成最近分享的用戶的頭像。用戶對分享功能都有常規(guī)的認知，當(dāng)我們在觀看某個視頻一段時間后，系統(tǒng)自動評判該用戶對此視頻感興趣，基于用戶看到感興趣的東西就喜歡炫耀、分享的心理（比如“孫悟空到此一游”），系統(tǒng)將分享圖標(biāo)變成用戶頭像，意在提醒觀者分享，以達到最大化傳播可能的目的，以及為平臺拉取新用戶。

05.「智行火車票」搜索攻略-確保使用的流暢性

產(chǎn)品體驗：

首次打開智行火車票的搜索功能，會自動彈出搜索攻略，以指導(dǎo)用戶可搜索的范圍及使用規(guī)范，后續(xù)再次打開搜索即恢復(fù)常規(guī)用法，如果再次了解，點擊搜索攻略即可。

設(shè)計思考：

對于搜索功能，可謂是熟悉的不能再熟悉了，千篇一律的輸入關(guān)鍵字即可，大不了重新再來。搜索是產(chǎn)品中不可或缺的一部分，無論打開哪個App,都能很快找到，但如果搜索功能做的好了，也是用戶轉(zhuǎn)化的關(guān)鍵流量入口，比如搜索方式、呈現(xiàn)樣式、搜索引導(dǎo)等，用戶體驗不容忽視。

智行火車票APP的搜索攻略就是在合適的時間、合適的地點準(zhǔn)確的傳達給用戶。首次進入，即自動彈出搜索攻略教育新用戶，明確的告知使用搜索功能可以搜什么？怎么搜？避免用戶一打開就直接擼字，而造成使用錯誤的概率提高以及影響搜索結(jié)果的準(zhǔn)確性，用戶一旦碰壁，很有可能轉(zhuǎn)身就離開。自動彈出的搜索攻略由被動變?yōu)橹鲃?，可以提前告知用戶搜索范圍及關(guān)鍵詞示例，降低出錯的幾率，讓整個搜索流程更加順暢，為后續(xù)的使用提供便利，減少用戶的流失。

06.「蝦米音樂」評論-一鍵表達心情

產(chǎn)品體驗：

在蝦米音樂聽歌時，進入評論功能，除了可文字評論外，還能表達聽歌時的心情，隨時查看有多少同樣心情的人在聽這首歌，很有代入感。

設(shè)計思考：

文字是我們交流常用的元素，但很多時候因使用的方法不當(dāng)而造成含義上的變化，比如一段話后面加個感嘆號，到底是消極還是敵意？聲音也是一樣，當(dāng)我們開著車對行人按喇叭，是表示禮貌還是憤怒？而表情則是不同，它表達的是一種類型，比如一個笑臉，可以理解為滿意、開心、高興等。表情除了可以委婉的表達自己內(nèi)心的情感之外，也是因為表情的無責(zé)任性，你會聽到人說，請注意你的言行，但沒人會說，請注意你的表情包。

蝦米音樂APP在歌曲的評論功能，除了有文字評論之外，還可以表達聽歌時的心情，即表情評論。進入評論頁面，首先看到的是某某等幾人使用的什么樣的心情評論，并提示共有多少人參與，引導(dǎo)用戶接下來該做什么，讓用戶快速地進入到產(chǎn)品使用中，給予了明確行為操作的指令，觸發(fā)并提高了用戶的參與度。另外使用表情相比文字評論更容易操作，系統(tǒng)預(yù)設(shè)好可供用戶選擇的表情包并附帶文字提示，用戶無需思考便可一鍵操作，很大程度上降低了完成的難度。事實表明，同樣能達到目的的辦法，簡單的是最實用、也是。

07.「美團」收貨地址-二次提醒降低出錯的概率

產(chǎn)品體驗：

在美團提交訂單頁面選擇好地址后，頁面上滑，詳細地址會懸浮在導(dǎo)航欄，便于用戶二次確認或修改。

設(shè)計思考：

線上購物已經(jīng)成為了我們的家常便飯，外賣行業(yè)解決著我們“吃”的問題更不例外。通常我們在選擇好商品后，地址作為重量級的信息都會優(yōu)先展示在訂單頁面的頂部，首先基本都會提供一個默認地址，如果不需要進入地址修改即可?？v然如此，依然有部分用戶因為急于下單，后續(xù)發(fā)現(xiàn)地址錯誤，就需要聯(lián)系商家修改地址或者取消訂單重新下單，浪費時間不說，還會影響心情。

美團APP在提交訂單頁面，針對地址方面相當(dāng)于加了一道保險。用戶在選擇完地址上滑頁面后，詳細地址懸浮在的標(biāo)題欄上，點擊可直接修改收貨地址，雖然不一定每個用戶都能看到，但長時間懸浮在頁面頂部，時刻都在提醒著用戶，只要稍一抬頭，即可看到醒目的大字（地址），便于用戶潛意識的瀏覽或眼睛的余光掃描，發(fā)現(xiàn)有誤及時修改，降低下單時地址出錯的概率，考慮周全，給予更好的用戶體驗。

08.「菜鳥」下拉刷新-趣味化的“空投”

產(chǎn)品體驗：

菜鳥APP在頁面下拉刷新的過程中，會有一個紙箱從空中落下的動畫效果，類似空投，仿佛在說“你的補給已送到，請及時查收”，非常貼合平臺的屬性及特征。

設(shè)計思考：

下拉刷新早就不是什么新鮮的東西了，幾乎所有的應(yīng)用里都會有這個功能，通常都是一個持續(xù)的動效在告知用戶，頁面的數(shù)據(jù)正在加載，請稍等，市場上很多APP的刷新樣式都是大同小異。不過一旦做好刷新樣式，就不僅僅是告知用戶當(dāng)前頁面狀態(tài)這么回事了，比如下拉刷新前后兩種狀態(tài)借助過渡動效連接到一起，讓用戶了解界面到底發(fā)生了什么改變，以及在刷新的過程中如何留住用戶繼續(xù)等待，避免用戶焦躁的情緒......

菜鳥APP在下拉刷新的過程中就使用了趣味性的動畫方式，首先通過空中出現(xiàn)的箱子緩緩落到地面，有趣又貼合產(chǎn)品整體的設(shè)計概念，用生動形象的情感化設(shè)計反饋平臺行為，為人機交互增加了趣味性和互動性，而且還可以緩解用戶在等待刷新過程中的焦慮感；其次，這種動效可用幫助用戶理解屏幕上發(fā)生了什么，也會讓用戶有所期待。

（看到這個動效，有沒有似曾相識的感覺“哇，那邊有空投，馬上要落地了，趕緊上車沖過去”）

09.「美團」匿名差評-降低商家對用戶的騷擾

產(chǎn)品體驗：

對美團的訂單進行評價時，如果選擇差評（1~2分），系統(tǒng)將自動開啟匿名開關(guān)以便于用于匿名評價，商家是無法查詢到匿名用戶信息的。

設(shè)計思考：

評價在商品頁面展示給所有用戶，對店鋪商品起著至關(guān)重要的作用。95%的用戶購物之前都會參考評價，好評會增加用戶購買信心；而差評可能會讓用戶放棄購買這個商品，甚至認為這不僅僅是劣質(zhì)商品，更有劣質(zhì)店鋪的潛在想法。其實有很多商家都有通過刷單來提升店鋪的銷售量和買家秀的質(zhì)量，作假都尚且如此，何況是真實用戶呢？所以商品一旦有了差評，不僅會影響店鋪的整體動態(tài)評分和好評率，還會降低店鋪排名，很大程度上會影響其他用戶判斷及產(chǎn)品的轉(zhuǎn)化率，所以商家一看到差評就激動得馬上打電話和買家溝通改評價，低頭認錯，尤其是新店或者新品有差評時，不斷的聯(lián)系（騷擾）會給消費者帶來一定的困擾。

美團APP的訂單評價如果選擇差評，系統(tǒng)將自動開啟匿名評價，由被動變?yōu)橹鲃?，避免用戶因情緒化或忘記打開匿名，而遭受到商家電話的騷擾，通過補償被要求修改或刪除差評。當(dāng)然，如果用戶不想匿名，關(guān)閉開關(guān)即可。匿名評價不僅降低用戶的困擾，還能提升商品評論的真實性，以協(xié)助平臺通過大數(shù)據(jù)對整體店鋪進行排名和評分展示，減少對后來消費者的誤導(dǎo)。

（杠精思維“這樣豈不是讓很多鍵盤俠來惡意給店鋪差評”。其實別忘了一個前提，就是必須要通過下單支付并等待訂單完結(jié)后才可以進行評價，畢竟大部分用戶不會刻意這樣做，任何產(chǎn)品不就是滿足80%以上的用嗎？）

10「釘釘」保護信息隱私的密聊

產(chǎn)品體驗：

從釘釘好友對話框的右上角進入設(shè)置頁面，點擊進入密聊，即可對聊天信息上一道鎖，保護信息隱私安全。

設(shè)計思考：

眾所周知，我們在聊天的過程中，信息很容易泄露，有很多窺探用戶隱私的程序，比如進入某些網(wǎng)頁會提示需要獲取用戶位置、讀取通訊錄等都屬于隱私。尤其是社交類型的應(yīng)用，會有相關(guān)保護交流信息的安全措施。如消息撤回、閱后即焚、動態(tài)瀏覽權(quán)限等都有一定效果。

釘釘推出的密聊功能就是聊天信息的一道安全鎖。進入密聊后，消息禁止復(fù)制和轉(zhuǎn)發(fā)、頭像名字打碼防截屏、不可被錄屏、消息通知不顯示內(nèi)容等，很大強度上保護交流信息的隱私，給用戶帶來安全保障。

（有人會問，用微信的人更多，為什么沒有密聊功能呢？從用戶群體和性質(zhì)來分析，微信主打社交，男女老少通吃，基本上都是嗨聊、打發(fā)時間或平時的常規(guī)交流等；而釘釘主打的移動辦公，主流的用戶基本趨向于白領(lǐng)類型的群體，一般屬于工作交流，很多聊天都涉及到商業(yè)信息，包括一些文件和商業(yè)機密，誰都清楚商業(yè)機密泄露的嚴重性）

結(jié)語：

設(shè)計師需要養(yǎng)成體驗產(chǎn)品的好習(xí)慣并將優(yōu)秀的產(chǎn)品細節(jié)記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結(jié)能力，也為日后輸出優(yōu)秀的作品當(dāng)鋪墊，對自己的能力提升以及未來的職業(yè)發(fā)展帶來便利。

轉(zhuǎn)自：站酷

作者： 大漠飛鷹CYSJ 

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1.什么是設(shè)計規(guī)范？

可以說，每個項目因合作方式，人員習(xí)慣，落地形式的不同，所形成的規(guī)范是有區(qū)別的。所以，設(shè)計規(guī)范更應(yīng)該是針對項目來說的，除非是問你Android或iOS這種已經(jīng)廣泛適用的平臺級規(guī)范。不然是很難有標(biāo)準(zhǔn)答案的，回答更應(yīng)該是一種思路的描述，比如你會如何定義一套規(guī)范、解決了哪些問題以及如何驗證這套規(guī)范真的助力了產(chǎn)品的體驗提升。

2.設(shè)計規(guī)范的作用

1）遵守用戶習(xí)慣，減少認知成本

2）統(tǒng)一品牌性格

3）降低新人學(xué)習(xí)成本

4）提高開發(fā)效率

5）保證設(shè)計的一致性

3.怎么學(xué)習(xí)設(shè)計規(guī)范

其實網(wǎng)上很多設(shè)計規(guī)范，原理之類的文章，源頭都來自于這些大廠規(guī)范，想獲得一手信息，最好是自己去這些網(wǎng)站多看看。
這也就是我為什么不寫具體規(guī)范數(shù)值的原因，因為網(wǎng)上的資料實在是太多太詳細了，寫一些重復(fù)的知識實在是沒多少價值。學(xué)知識的路上一定不要什么都等別人喂給自己，需要更多的主動性，這樣才能提升自己的學(xué)習(xí)能力和解決問題的能力。
2）針對自己要做的模塊，有針對性的找市面上大廠的應(yīng)用作為參考，直接截圖標(biāo)注，自己總結(jié)規(guī)律印象會更加深刻。
我開始做UI的時候就這樣學(xué)習(xí)的，不知道字體該用多大，間距用多大，顏色怎么用，就直接去找相類似的界面截圖參考，量它們的尺寸，吸它們的顏色，然后就這樣一步步的把規(guī)范經(jīng)驗積累起來了。
比如從QQ的動態(tài)tab頁面中，我們可以借鑒到很多信息，比如列表的高度，列表左側(cè)的圖標(biāo)尺寸和圓角，間隔線高度和配色，右側(cè)的箭頭大小和配色，列表文字的字號和配色，用戶頭像大小和結(jié)合的樣式，圖標(biāo)與文字的間距等等。這些借鑒并非是抄襲，要你做的跟這個界面一模一樣，只是參考這里面的某幾個屬性然后結(jié)合自己的產(chǎn)品綜合運用，減少出錯。

發(fā)現(xiàn)了嗎？一個優(yōu)秀的界面設(shè)計，上面的任何信息其實都可以拿來參考，就看你會不會用了。

4.怎樣定義出設(shè)計規(guī)范

5.使用規(guī)范會影響設(shè)計的創(chuàng)意性嗎？

總結(jié)

文章來源：彩云譯設(shè)計     作者：彩云

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

今天分享的題目是從品牌到UI，用設(shè)計的思想與這個世界和解；這里的我說的和解比較寬泛，大家可以理解成與客戶和解，也可與產(chǎn)品經(jīng)理和解，也可以是與自己和解；

為什么選這個主題呢，原因是之前在網(wǎng)上聽一群人總是說互聯(lián)網(wǎng)走到了下半場，我和好奇，就去查這個下半場到底是什么，后來總算知道了，互聯(lián)網(wǎng)行業(yè)走到現(xiàn)在，已經(jīng)從增量時代轉(zhuǎn)為存量時代，這個存量時代就是下半場，人口、流量、資本的紅利都逐漸收緊。

在這種情況下我的產(chǎn)品如何從同類產(chǎn)品中脫穎而出，或許增加品牌屬性是種方法，希望大家在聽完這個分享后，會有一些啟發(fā)。

在互聯(lián)網(wǎng)的增量時代，品牌設(shè)計與UI設(shè)計是兩條平行線，幾乎沒有交集，你做你的畫冊、slogan、包裝，我做我的網(wǎng)站、app、微信小程序，偶爾互相模仿，但也不是主流，畢竟兩者載體不同，目的不同，用戶也不同；

但是到了存量時代，影響用戶選擇的一個重要因素是「品牌」，一個產(chǎn)品要想從同類產(chǎn)品中區(qū)別出來，需要有個性，UI+品牌成為產(chǎn)品生命周期中重要的一環(huán)，下面我們看看如何在用戶心中植入產(chǎn)品品牌； 

在在品牌植入方便，國外很多產(chǎn)品已經(jīng)走在了我們前面，我們來看看谷歌，谷歌開發(fā)者大會上對 Material（ Design做了更新，我印象特別深刻的是Google對圖形語言單獨拿出來做一個模塊解釋它，它提取了圓形作為視覺DNA，并沿用到產(chǎn)品的每一個控件；

當(dāng)然，如果我們想傳達我們產(chǎn)品的品牌理念，只在圖標(biāo)組件里運用是遠遠不夠的。

誕生于1886年的可口可樂，每年都做產(chǎn)品運營推廣，不斷大量的重復(fù)它logo的弧線元素和瓶子的外形；

還有剛剛過去的雙11，從2012年11月11日開始的天貓節(jié)，現(xiàn)在是全球最大的B2C平臺，天貓貓頭運用也是滲透到全產(chǎn)品線里面去了，問大家個問題，大家有沒有人知道這個貓頭品牌是誰創(chuàng)立的？其實就是馬云的繼任者，現(xiàn)任阿里巴巴集團董事局主席張勇；講的有點遠了，我們再回到我們的主題；

這個圖很好的解釋了品牌與產(chǎn)品與用戶的關(guān)系，產(chǎn)品需要品牌牽引、支撐，現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品越來越趨于同質(zhì)化，UI 設(shè)計師已經(jīng)不能局限于界面的表現(xiàn)層，更要了解產(chǎn)品背后的邏輯，然后以業(yè)務(wù)為依據(jù)設(shè)計品牌，以品牌為基準(zhǔn)去設(shè)計產(chǎn)品。

第一章意義Significance，這個章節(jié)我們講講從品牌到UI的意義

第一個意義是對內(nèi)：可以規(guī)范統(tǒng)一，協(xié)作

品牌本身就可以作為設(shè)計規(guī)范的一個重要指導(dǎo)原則，通過對配色、文字、圖標(biāo)、控件等建立設(shè)計規(guī)范，可以有效減少設(shè)計決策時間，傳達一致的品牌調(diào)性。

第二個意義是對外：可以提高認知，溢價增值

如果一個產(chǎn)品失去了個性，不看 logo，單純看界面的話，很多時候根本分不清是到底是哪一家公司的產(chǎn)品。如果能夠關(guān)注設(shè)計細節(jié)對品牌的影響，肯定能更好地提高用戶對產(chǎn)品的認知，當(dāng)你對一件產(chǎn)品注入了感情，同時也就為產(chǎn)品提供了營銷推廣的立足點；也可以這么說，設(shè)計師創(chuàng)造的情感性價值，直接實現(xiàn)了產(chǎn)品的溢價增值；

第二章感知Perception

有位設(shè)計界的前輩講過，品牌知名度其實就是信任度的體現(xiàn)，他說世界上最成功的品牌就是宗教，這里沒有詆毀任何宗教的意思，但是宗教建立的品牌信任度，遠遠超過了任何商品；

這里我們從用戶的角度出發(fā)，看下用戶是如何從產(chǎn)品感知品牌的；

在設(shè)計產(chǎn)品的時候常常會發(fā)現(xiàn)我們覺得理所當(dāng)然的地方，用戶往往沒按我們想的方式去使用。那是因為設(shè)計師通常有整體觀，站在金字塔頂端去規(guī)劃一個產(chǎn)品的設(shè)計，而用戶則恰恰相反，在金字塔底端往上爬，他們不知道這個金字塔多高，也不知道從哪一面開始最好爬，所以會遇到各種問題。

同樣，用戶對品牌的感知由低向高的，用戶通過各種場景接觸到產(chǎn)品，再通過產(chǎn)品的視覺呈現(xiàn)、功能體驗、信息內(nèi)容等感知品牌，最后在心中形成印象，構(gòu)建品牌信念，從而影響下次產(chǎn)生相應(yīng)需求時對產(chǎn)品的選擇；

可以聯(lián)想下我們的購物體驗，是不是總是從同一個地方shopping，這就是購物APP品牌價值已經(jīng)使你已經(jīng)形成了習(xí)慣選擇；

作為設(shè)計師，我們需要充分理解品牌內(nèi)核，由內(nèi)向外將抽象的品牌內(nèi)核轉(zhuǎn)化為具象的視覺符號，再延伸到用戶與產(chǎn)品的各個接觸點，從而將品牌理念植入用戶內(nèi)心。

第三章融合Integration既然上面我們講品牌和UI最終要走的一起，這一章我們講他們?nèi)绾卧诠ぷ魅诤?/span>

 第一步，明確定位，提取關(guān)鍵詞，建立情緒板

當(dāng)代廣告教皇，美國奧美廣告創(chuàng)始人大衛(wèi).奧格威說，“最重要的決定是如何定位你的產(chǎn)品?！?/span>

在大師的指引下，我們發(fā)現(xiàn)首先找到品牌定位，定位自己的細分市場和目標(biāo)用戶；

2.圍繞品牌定位提取關(guān)鍵詞；

3.建立情緒版，將抽象的概念轉(zhuǎn)化為可感知的視覺；

第二步，提取視覺表現(xiàn)元素，并設(shè)計融入品牌定位。我們重點從顏色、圖形、紋理、字體四個方面講一下。

有時甚至不需要任何圖形，單憑顏色就能產(chǎn)生對某一事物的聯(lián)想。

現(xiàn)在UI設(shè)計流行的極簡風(fēng)，我們發(fā)現(xiàn)這些應(yīng)用采用極簡化設(shè)計的同時，圖標(biāo)也變得更鮮艷，更引人注目，說明這些產(chǎn)品也在尋求一個平衡，在 UI 設(shè)計變得極簡趨同的同時，仍然能保留核心的品牌基因。

顏色在 UI 中的表現(xiàn)有 logo、導(dǎo)航欄底色、圖標(biāo)、文字、可視化圖表、插圖、按鈕等等。 

現(xiàn)在UI設(shè)計流行的極簡風(fēng)，我們發(fā)現(xiàn)這些應(yīng)用采用極簡化設(shè)計的同時，圖標(biāo)也變得更鮮艷，更引人注目，說明這些產(chǎn)品也在尋求一個平衡，在 UI 設(shè)計變得極簡趨同的同時，仍然能保留核心的品牌基因。 

圖形

我們知道顏色是抽象感知，圖形是相對具象的表現(xiàn)方式。

一旦某個特有的圖形在用戶心中形成烙印，用戶見到相似的圖形組合都能往該圖形聯(lián)想，從而關(guān)系到圖形背后所代表的品牌，這也是很多企業(yè)做品牌升級的時候 logo 都越來越簡潔的原因，因為這樣能有效降低用戶的認知負擔(dān)，提高品牌認知。

圖形通常從 logo 本身提取，并在 UI 中延伸應(yīng)用。比如馬蜂窩、百度網(wǎng)盤、京東做品牌升級的時候都不約而同地從 logo 中提取了一個代表微笑的弧度，傳遞友好、溫暖的品牌形象。

飛豬提取了 logo 中「豬的發(fā)型」用于搜索框，韓國的電商品牌11街也將 logo 延長作為界面中的搜索框。

紋理

在 UI 設(shè)計或者運營推廣運用中，通過提取品牌圖形元素，再運用分形、排列、重復(fù)、平鋪等設(shè)計手法形成品牌紋理。

我們看看京東的啟動頁用 Joy 的外形旋轉(zhuǎn)做成的紋理背景；

國外著名的聊天應(yīng)用 Whatsapp，在聊天頁的背景用涂鴉插圖紋理做背景；

還有騰訊文檔的啟動頁、登錄頁用了漸變的菱形作為紋理，輔助品牌的視覺表現(xiàn)。

我們還在聊圖形復(fù)制變形的時候，國外的UI設(shè)計已經(jīng)細化到了十分驚人的程度

例如UBER 在做的品牌升級，設(shè)計師出來將每個國家富有代表性的圖形提煉， 然后重復(fù)運?平鋪，形成帶有地域特色的?何紋理，運?到閃屏和線上線下的產(chǎn)品當(dāng)中。

字體

字體是最容易被忽視的設(shè)計元素，很多人會認為 UI 中的字體用系統(tǒng)默認的就行。其實字體對于產(chǎn)品氣質(zhì)的體現(xiàn)著很大的作用，很多品牌都把字體設(shè)計當(dāng)成品牌基因中重要一部分。

字體的選擇需要契合產(chǎn)品功能特點與品牌調(diào)性。

微信讀書使用了方正宋三，讓人閱讀起來有種文字秀麗的浸入感；每日故宮使用了方正清刻悅宋體，字里行間隱含著歷史古韻，滲透著文化氣息；澎湃新聞使用方正準(zhǔn)雅宋體，體現(xiàn)其作為新聞產(chǎn)品「專注時政與思想」的嚴肅一面。

英文字體也可以使用契合產(chǎn)品氣質(zhì)的英文字體。比如常被用作數(shù)字字體的 Din、經(jīng)典的襯線字體 Playfair Display、?歌御用的 Roboto 等。

第三步，融入品牌觸點

這里我解釋下品牌觸點這概念，是指一款產(chǎn)品中品牌信息接觸點，是決定用戶對產(chǎn)品品牌印象的關(guān)鍵；

我們看幾個案例，

啟動頁：知乎的啟動頁采用 slogan 加 logo 的方式來體現(xiàn)品牌，這也是絕大多數(shù)應(yīng)用的做法；每日故宮啟動的時候伴隨著一聲鐘聲，頁面會有一個光線流動的動畫，極具儀式感，一下子就把用戶帶入故宮莊嚴的氛圍當(dāng)中。

圖標(biāo)：東家的每一個圖標(biāo)都融入了印刷式字體的元素，體現(xiàn)其匠人的品牌基因；mono 則直接把產(chǎn)品名稱「 M O N O」用于導(dǎo)航欄。

插圖：Dropbox 的兒童風(fēng)格的插畫與 B站 的二次元插畫都非常契合品牌特征。

品牌觸點式多樣的，除了上面的啟動頁、圖標(biāo)、插圖之外，還有預(yù)加載圖、loading、動效、新手引導(dǎo)等等都能體現(xiàn)品牌觸點，這些品牌觸點，都是講述品牌故事的關(guān)鍵載體，幫助產(chǎn)品從同行業(yè)中脫穎而出，這里由于時間的關(guān)系我們就不展開講了，有興趣的同學(xué)，我們可以單獨交流哦

互聯(lián)網(wǎng)行業(yè)已經(jīng)過了拓荒時代，行業(yè)沉淀下了許多有價值的知識，也有許多非常好的 UI 組件和規(guī)范文檔可以直接使用；

另一方面，很多公司對于 UI 設(shè)計在整個產(chǎn)品生命周期中的價值，普遍覺得不是非常重要，UI 設(shè)計部門只是一個業(yè)務(wù)支持部門，起不到主導(dǎo)作用。而如果 UI 設(shè)計師做的工作還是停留在把產(chǎn)品的原型文檔變漂亮，肯定是不行了。

設(shè)計師不僅需要對產(chǎn)品業(yè)務(wù)和商業(yè)有深入了解，更重要的是對于品牌在整個產(chǎn)品鏈路中的應(yīng)用與把控。

我們需要走出舒適圈，主動去挖掘更深層次的設(shè)計價值，提升自我價值。

誠然改變一個大的設(shè)計生存環(huán)境是非常漫長的過程。要不停的嘗試，就像不停的迭代做新產(chǎn)品一樣，不能因為一兩次的失敗打消掉設(shè)計的積極性。

設(shè)計的終極最后就是和解 Compromise

開篇我提到了與世界和解，分享下我是怎么和這個世界和解的，我相信三句話，可以跟這個世界和解 

再次謝謝大家聽我叨叨，如果大家喜歡，下次我們可以叨叨點關(guān)于設(shè)計的更有意思的事，謝謝

文章來源：tob.design        作者：無名大師29aef85c40

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

無論是從個性化內(nèi)容還是用戶體驗上來說，為界面內(nèi)容選擇正確的選擇類控件可能比想象的要難，全文10,856字 ，預(yù)計閱讀20分鐘， 建議收藏。

本文主要研究選擇控件的設(shè)計細節(jié)，雖然是很常見的控件設(shè)計，但也有非常多需要注意的地方。能提煉總結(jié)常見事物的一般規(guī)律，這本身就是對自己已有知識理解加深的過程。

對數(shù)據(jù)進行便捷選擇

單選框(Radio button，也叫“單選按鈕”)—— 用戶從一組選項中必須選擇一個選項。

復(fù)選框(Checkbox)—— 當(dāng)有一個或多個獨立選項時，用戶可以選擇任意數(shù)量的選項，包括零個、一個或多個。

切換開關(guān)(Toggle Switches)—— 兩個互斥狀態(tài)（打開和關(guān)閉）之間的可視切換。

選擇標(biāo)簽(Choice chips)—— 是按鈕選擇的一個替代方案。至少兩個選項，用戶可以選擇一個或多個。

列表選擇(List Select)——可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。

下拉菜單(drop-down menu，也叫“下拉按鈕”)——按鈕包括一個單箭頭指示符，單擊后會顯示包含選項列表的菜單。

單選按鈕的命名（Radio）來源于舊收音機上用于頻率和預(yù)設(shè)電臺之間切換的的實際物理按鈕。當(dāng)一個按鈕被按下時，所有其他的按鈕都會彈出，使被按下的按鈕成為唯一處于“按下”狀態(tài)的按鈕。

后來被用于錄音機，盒式錄音機和可穿戴音頻播放器中，90年代初-用于“播放/暫停/快退/快進”控件。

UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研發(fā)公司，幾乎涉及到我們現(xiàn)在每天使用的計算機技術(shù)，包括：以太網(wǎng)，圖形用戶界面（GUI），面向?qū)ο蟮木幊?，計算機鼠標(biāo)，激光打印等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設(shè)備。

1.1 單選框

單選框用于對信息的選擇，允許用戶從一組選項中必須選擇一個，通常以2-5組顯示，單選框應(yīng)互斥。單選框的外觀一般是一個空白的圓洞，旁邊則通常有文字標(biāo)簽。標(biāo)簽的用途除了描述之外，還可以作為操作區(qū)域，當(dāng)用戶選中標(biāo)簽，所應(yīng)的單選框就會被選上。已選上的單選按鈕一般會在圓洞內(nèi)加上一小圓點。單選框僅顯示合理和正確的選項。

單選按鈕的狀態(tài)為打開（實心圓圈）或關(guān)閉（空圓圈）。

單選框一旦選上，除了選擇另一個選項之外，便沒法取消。所以有時會有空白的選擇、重置或默認選擇。

每個單選按鈕的標(biāo)題應(yīng)清楚地描述選擇它的效果，通常句子結(jié)束沒有標(biāo)點符號。此外，考慮使用下拉菜單，會比顯示所有選項占用更少空間。

1.2 復(fù)選框

復(fù)選框是一種按鈕類型，可用于打開或關(guān)閉選項。當(dāng)存在選項對象時，復(fù)選框允許用戶從一組對象中選擇一個或同時選中多個和全部項目。每個復(fù)選框都是單獨的個體，因此選中一個復(fù)選框不會影響其他復(fù)選框的取消選中狀態(tài)，全選除外。

復(fù)選框使操作在兩個相反的狀態(tài)，操作或無操作之間進行選擇。復(fù)選框在屏幕上顯示為一個小方框，選中時，它被認為是“開”，選中的復(fù)選框包含復(fù)選標(biāo)記，正方形將充滿復(fù)選標(biāo)記。；關(guān)閉時，則被認為是“關(guān)”，它是空的矩形框。復(fù)選框一般放置在可選信息左側(cè)(圖片、視頻以宮格形式表現(xiàn)的頁面除外）。

復(fù)選框的數(shù)量

復(fù)選框可以用作單個元素，也可以組合成一個列表或嵌套式的層級列表以從中選擇多個。如果需要將選擇項分成幾組，則使用多級復(fù)選框。

混合狀態(tài)，僅在多級復(fù)選框時出現(xiàn)。如果使用復(fù)選框組，全局啟用和禁用多個子復(fù)選框，當(dāng)這些子項并非都處于同一狀態(tài)時，父復(fù)選框應(yīng)顯示為混合狀態(tài)（用短劃線表示）?；旌蠣顟B(tài)常在嵌套層級等對多個對象一同操作時使用，以代表該選項下的子選項沒有被全選。當(dāng)半選的復(fù)選框被點擊時，它便會變成平常的復(fù)選框，而它的子選項亦會跟隨全選或取消全選。

如果存在多個復(fù)選框時，考慮使用分組標(biāo)簽來進行描述。并將標(biāo)簽的基線與組中的第一個復(fù)選框?qū)R。通常，當(dāng)復(fù)選框垂直列出時，更容易區(qū)分它們的狀態(tài)。通常，復(fù)選框應(yīng)左對齊，當(dāng)您需要表示層次結(jié)構(gòu)，例如當(dāng)父復(fù)選框的狀態(tài)控制子復(fù)選框的狀態(tài)時，請使用縮進格式。

1.3 切換開關(guān)

開關(guān)是兩個互斥狀態(tài)（打開和關(guān)閉）之間的可視切換。總有一個默認使用，撥動開關(guān)即立即生效。它是在打開時顏色是可見的，關(guān)閉時出現(xiàn)無色或灰色。

移動端中切換開關(guān)一般有交互動效，PC端沒有。

開關(guān)與其他選擇控件最大的區(qū)別是：開關(guān)操作后，程序立即執(zhí)行相關(guān)操作。而其他選擇控件一般用在表單里，僅反映當(dāng)前的選擇狀態(tài)，如果要執(zhí)行操作并生效，需要點擊額外的提交按鈕。

注意:

不要為切換開關(guān)創(chuàng)建層次結(jié)構(gòu)，避免使用開關(guān)控制單個細節(jié)或次要設(shè)置。開關(guān)的層級結(jié)構(gòu)這在視覺上更容易分散注意力，而且會造成一種錯誤的印象，即所有的子選項都是開著/關(guān)著的。所以禁止濫用開關(guān)按鈕。

開關(guān)具有比復(fù)選框更明顯的視覺效果，因此它控制的功能應(yīng)比復(fù)選框更為強大。如，可以使用開關(guān)打開或關(guān)閉一組復(fù)選框設(shè)置。因此它控制的功能應(yīng)比復(fù)選框更為強大。如，可以使用開關(guān)打開或關(guān)閉一組復(fù)選框設(shè)置。

注意加載狀態(tài)

如果開關(guān)所執(zhí)行的操作需要考慮加載狀態(tài)，例如開關(guān)切換狀態(tài)不是瞬間（短時間）完成的話，開關(guān)則需要顯示加載狀態(tài)。

另外一種目前比較流行的加載方式是視覺上加載成功，服務(wù)器隨后加載成功。用戶操作開關(guān)之后，開關(guān)視覺上立即響應(yīng)改變，然后再向服務(wù)器相應(yīng)改變，中間會存在一定的時間差，這樣能帶給用戶更流暢的體驗。

避免在開關(guān)內(nèi)添加說明標(biāo)簽。關(guān)于開關(guān)的打開或關(guān)閉，可以通過視覺樣式讓用戶很明確的感知。額外的提供文本標(biāo)簽描述開關(guān)狀態(tài)是多余的，還會使界面混亂不堪。

其它樣式

單一的 icon 通過顏色或圖形的變化來表示開或關(guān)的狀態(tài)。常見的且體驗比較好的設(shè)計方案是將開關(guān)樣式設(shè)計為當(dāng)前狀態(tài)樣式。如下圖相機界面內(nèi)HDR與AI功能的關(guān)閉與開啟狀態(tài)。

當(dāng)然也有其它情況。最典型的就是視頻的播放暫停開關(guān)，他們表示的就是操作后的狀態(tài)而不是當(dāng)前狀態(tài)。

名稱變化，名稱變化指的是開關(guān)按鈕依賴于其名稱的變化告知用戶開關(guān)的當(dāng)前狀態(tài)和操作，如：關(guān)注與取消關(guān)注，已關(guān)注與已取關(guān)。名稱變化的開關(guān)由于語言的模糊性，仍然造成了部分歧義。我們可以在操作后加入其它提示來消除歧義（如：toast 提示）。

是否統(tǒng)一操作狀態(tài)倒不是關(guān)鍵，關(guān)鍵是我們是否能夠讓用戶理解按鈕相應(yīng)的意圖，不做出混亂的選擇便可。

1.4 選擇標(biāo)簽

Tab標(biāo)簽

通常用于切換不同的視圖，或者在表單中作為單選組件使用。一個分段tab通常會由2-6個單選項，可以是圖標(biāo)和短詞，它適合導(dǎo)航形式，被設(shè)計成一個水平或豎直的容器進行單選。一組選項卡中的所有內(nèi)容應(yīng)該根據(jù)較大的分組原則進行分組，每個選項卡的內(nèi)容與其他選項卡的內(nèi)容都互相獨立。

可以包含下拉列表的選項和使用翻頁。

固定的選項卡應(yīng)該只包含有限數(shù)量的選項，并且保持選項的位置不變，有利于用戶記憶?？蓾L動選項卡用于有很多選項或選項數(shù)量可變的情況，但不推薦使用。

優(yōu)點：將所有選項都擺在一行或一列，對空間的利用率能達到最佳，設(shè)計樣式也可以做到非常直觀，漂亮。

缺點：不大適合處理長詞，短語，如果要將這些內(nèi)容放在選項中，就須精簡文本。水平空間非常有限，尤其是移動端，即使是少量的選項，有時候你仍然要精簡文本。

Tab選擇時，不要加載整個頁面，只有選項標(biāo)簽及其內(nèi)容區(qū)域應(yīng)更改。交替切換標(biāo)簽時，用戶應(yīng)該感覺自己在同一位置。不要在選項卡內(nèi)容中包含支持滑動手勢的內(nèi)容，因為滑動手勢是用于在選項之間導(dǎo)航的。例如，避免在選項卡中包含一個可以拖動的地圖，或者一個可以滑動刪除的列表。

當(dāng)功能不可用時，顯示空狀態(tài)，加入情感化提示，不要刪除選項卡，確保所有選項卡都啟用。

空狀態(tài)：是用戶在使用產(chǎn)品時某個界面無法顯示的時刻，即沒有其他元素。良好的空狀態(tài)可以讓用戶知道正在發(fā)生的情況，發(fā)生的原因以及該怎么做。

這是四種常見的空狀態(tài)類型：

• 首次使用——新產(chǎn)品沒有內(nèi)容可以顯示時，例如打開新注冊的印象筆記時會遇到這種情況。

• 內(nèi)容被清除——當(dāng)用戶完成類似清空消息或收件箱等操作后，會出現(xiàn)一個空白的屏幕。

• 出現(xiàn)錯誤——產(chǎn)品由于網(wǎng)絡(luò)問題造成離線時，會出現(xiàn)空狀態(tài)的使用。

• 無結(jié)果——如果用戶進行搜索，但是查詢內(nèi)容為空時會發(fā)生這種情況。

明確選中狀態(tài)

具有3個選擇項的Tab標(biāo)簽，我們能明顯區(qū)分選中和未選中狀態(tài)，應(yīng)為Tab標(biāo)簽是單選控件。但是，如果只有兩個選項，又是矩形按鈕的選擇項，則很難區(qū)分當(dāng)前選擇是哪個，哪個為選中狀態(tài)？我自己某段時間一直默認顏色填充形按鈕是選中狀態(tài)，但經(jīng)同事一提，一陣猛驚，那另一個是否為選中狀態(tài)？在兩個選項中存在選擇疑惑，我們?nèi)绾未_定狀態(tài)呢？

因此，我努力在統(tǒng)一風(fēng)格的提前下，找出固有的特征，增強選中狀態(tài)。這個大家如果有更好想法，歡迎留言。

多選標(biāo)簽

標(biāo)簽選擇通常用于要從3-10個選項中進行多次選擇操作情況，它們最適合用一到兩個簡短的單詞或數(shù)字。它們設(shè)計的形式一般是一個個按鈕，通過背景色來區(qū)分“選中”和“未選中”。由于不存在2個選項的情況，所以

面對多選標(biāo)簽時，面對多個選擇項的彼此堆疊，需讓讓用戶知道他們可以選擇多少個選項。添加輔助說明，既可以明確它是多選，又可以規(guī)范的最大選擇項；選項過多時進行標(biāo)簽分類。

優(yōu)點：節(jié)省空間，標(biāo)簽堆砌在一起的具體樣式是由文本長度決定的。它們給人的印象是輕量的，有趣的。

缺點：這種形式與tab選項形式有一樣的弊端，都不能很好的處理長詞。不建議對文本進行折行或者調(diào)整大小，會不方便用戶閱讀，同時使用兩行以上的標(biāo)簽會使得每個標(biāo)簽非常難以快速掃描。

其他樣式：用圓形或其他形狀來表示一個個標(biāo)簽選項，比較重要或更受歡迎的選項形狀更大，用戶選中多個圓形就是選擇了多個選項；也可以在常見的按鈕中加入圖片的元素，這種的話樣式新穎，但要注意選中時的文字圖片的對比，文字是否具有可見性，適當(dāng)加上文字選中效果。

Tab標(biāo)簽和多選標(biāo)簽

選項數(shù)量是tab控件和標(biāo)簽控件之間最大的區(qū)別。一個連續(xù)的背景幫助用戶理解他們必須要選擇一個，而一個分離的背景表明他們可以選擇多個。

1.5 列表選擇

列表選擇控件包含選擇按鈕，容器框，項目列表和標(biāo)簽。用戶可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。列表框可能會滾動，具體取決于它包含的項目數(shù)和可見區(qū)域，更復(fù)雜的列表框允許用戶通過將項目從一個列表框移動到另一個列表框來調(diào)整容器框的大小，重新排列項目列表以及進行選擇。

優(yōu)點：

交互成本低：列表框不需要用戶單擊任何內(nèi)容即可在進行選擇之前顯示其中的選項（但是，如果有太多項，它們可能需要用戶滾動列表）。

增加了可見性：一次查看多個選項的能力可以加快決策速度并提高選擇準(zhǔn)確性。列表選擇為內(nèi)容提供了更多的空間。它們易于閱讀，可以容納多文字，文本可以換行，還可以增加圖片。但是，應(yīng)避免在多列列表框中進行水平滾動。

用多選雙列表框，用戶可以控制項目的顯示順序，并獲得所選項目的清晰概述，這在列表框包含多個選項時很有用。

缺點：

空間：他們往往很占用空間，不適合用在垂直高度受限的頁面中。

陌生：用戶可能不知道如何立即與列表框進行交互-特別是，如果多選列表框中未包含復(fù)選框，則他們可能不知道如何選擇倍數(shù)。這就是為什么將復(fù)選框包含在多選列表框中非常重要的原因，除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。

用戶可能無法一次看到所有選定的選項：如果在可見區(qū)域中看不到更多的可用項目，則用戶可能無法同時看到所有選定的項目。為避免此缺點，請在列表框上方將所選項目顯示為標(biāo)記，或在不可滾動的列表中突出顯示所選項目。

可以根據(jù)選擇類型進行分類，這些列表框形式都可以滾動。

列表單選

用戶只能從互斥選項列表中選擇一項。最初的單選按鈕被用于列表中超過6個選項時，被設(shè)計成垂直方向，圓形輪廓，并擺在列表項的開頭，這就是列表單選?，F(xiàn)一些設(shè)計中，選中被設(shè)計成在列表選項外加一個描邊框形式或帶有背景色，用以節(jié)省水平空間。

列表多選

這種類型的列表框包括使多個選擇更加明顯的復(fù)選框，設(shè)計樣式上，web通常是在列表開頭處設(shè)計一個正方形描邊框（復(fù)選框）。

多選雙列表框

這種類型的列表框由兩個列表框組成，兩處的列表框內(nèi)容可以相互拖拽。比如左側(cè)的列表框已選中項目可拖拽至右側(cè)列表框，同時支持表內(nèi)上下拖拽更換順序。

點擊“ 右箭頭”按鈕可將左側(cè)的列表框所選項目移動至右側(cè)列表框。多選雙列表框?qū)嶋H運用較少。

1.6 下拉菜單

這是是一種彈出按鈕，單擊后會顯示包含選項列表的菜單。下拉列表以最簡單的形式包含四個主要部分：一個容器框，一個朝下的箭頭按鈕，一個項目列表和一個標(biāo)簽。用戶可以單擊向下箭頭以顯示互斥項的列表，從中只能選擇一項。標(biāo)準(zhǔn)下拉菜單是針對我們所理解的“下拉”這個動詞。在激活狀態(tài)，當(dāng)你點擊文本輸入欄的地方時，它會打開一個菜單。列表項僅在單擊向下箭頭后出現(xiàn)，選擇一個項目或在下拉列表的外部單擊將其關(guān)閉。

下拉列表的優(yōu)點：

• 為用戶提供最佳選項的功能，默認情況下處于選中狀態(tài)。

• 淡化替代選項和更改：由于下拉列表隱藏了其他可用選項，因此它們很好地淡化了替代選項并過分強調(diào)了進行更改的能力。（這在默認值可以滿足大多數(shù)用戶的情況下，并且其他選項可能對非專業(yè)用戶來說是危險的或令人困惑的情況下是有利的。）

• 熟悉：下拉列表是大多數(shù)用戶熟悉的選擇機制，因為下拉列表在Web和本機應(yīng)用程序中得到廣泛使用。

缺點是需要點擊項目列表中的選項，包括：

• 列表包含過多的內(nèi)容，可能會很麻煩地滾動。

• 當(dāng)用戶習(xí)慣于捕獲眾所周知的值時，它們會使用戶放慢速度。例如，當(dāng)輸入生日或信用卡到期日期時，與下拉列表進行交互相比，在直接鍵入內(nèi)容通常更快，更容易。

• 忽視：由于表單內(nèi)容非常緊湊，因此用戶可能會意外忽視表單，網(wǎng)頁和應(yīng)用程序中的下拉列表。

• 容易消除：不小心將光標(biāo)從框中移開會關(guān)閉下拉菜單，不得不重新開始選擇過程。

下拉菜單配分組

當(dāng)長型下拉菜單的設(shè)計不是特別理想時，你可以把列表分組，這樣搜索起來更加簡單。

可編輯的下拉菜單

可編輯的下拉菜單在菜單上方顯示當(dāng)前選擇的菜單項，用戶可以輸入菜單中未列出的值。您可以將用戶可以輸入的值的類型限制為某些類型。例如，設(shè)計軟件中輸入字體大小時，系統(tǒng)會默認一些數(shù)值，同時支持你編輯修改。

快捷搜索選項

為了更方便用戶的填入，支持字詞搜尋，填寫一半時，就會出現(xiàn)帶有關(guān)鍵詞名稱選單。在選項很多的情況下，這個功能變得格外實用。

下拉菜單多選

下拉菜單多選是復(fù)選框的延伸：用戶可以在同一個輸入?yún)^(qū)域選擇多個。這件控件用的比較少。

這種控件我一般在多個對象進行對比時才使用，如選擇多個公司比較他們的能耗水平與用電規(guī)模，由于公司字段比較長，在查看選中狀態(tài)時需注意容器能否充分顯示選擇的字段，在導(dǎo)航菜單中會明顯擁擠，在表單中使用相對自由。如果可以的話，篩選中盡量避開這種類型。

超級下拉菜單（胖菜單）

將站點，應(yīng)用程序或系統(tǒng)的所有不同部分合并為一個長列表，該列表進一步細分為子類別，并可以從導(dǎo)航欄中訪問，例如下面華為云的下拉列表，大型下拉菜單用于顯示大量的選項，分類，數(shù)據(jù)集或其他類型的相關(guān)內(nèi)容組。

不符合當(dāng)下標(biāo)準(zhǔn)的設(shè)計會混淆用戶的感觀

任何偏離你所設(shè)計的平臺標(biāo)準(zhǔn)的行為都會給用戶帶來額外的認知負擔(dān)。

2.1 狀態(tài)

選擇控件在操作過程中必須更改其狀態(tài)/外觀，以便用戶知道是否能選中，是否被選中。添加這些小的視覺反饋，以使用戶正向的理解，但是差異化設(shè)計又不能喧賓奪主。

默認

默認就是選擇器的開始狀態(tài)。向用戶表明，可對該選擇控件進行操作。

禁用

選擇按鈕置灰顯示，用戶將無法與選項進行交互。除非產(chǎn)品規(guī)則指定，否則很少會遇到這種狀態(tài)。

懸停

像按鈕一樣，選擇控件應(yīng)向用戶指示它們是可交互的。通常，通過突出顯示鼠標(biāo)懸停項目區(qū)域的背景來突出顯示，吸引用戶的注意。觸摸設(shè)備沒有懸停狀態(tài)。

按下

當(dāng)用戶按住鼠標(biāo)/手指點擊，選擇控件處于被點擊的狀態(tài)。

列表多選支持批量選擇和清除

使用列表多選，一次全選或取消已選擇的多個選擇項毫不費力。

下拉列表狀態(tài)

下拉列表在按下狀態(tài)時會打開選項列表，還有種常見做法是懸停狀態(tài)時直接打開選項列表。我更喜歡第一種，第二種在我沒有明確操作的情況下，下拉列表就自動打開的這點讓我比較困惑。

列表選擇狀態(tài)

列表選擇控件在管理文件時，只有通過按下選中選項才能進行編輯性操作。

點擊按鈕進入批量編輯狀態(tài)，狀態(tài)未選擇時，操作按鈕置灰。按下/勾選列表選項后，操作按鈕點亮，展示已選項的數(shù)量，即對當(dāng)前勾選操作的反饋。點擊操作按鈕，進入對應(yīng)操作編輯流程。

失敗反饋

一般都是用戶沒有進行選擇，單擊“提交”按鈕后收到失敗反饋。

在實際的使用過程中，選擇控件有默認、禁用、懸停、按下等不同狀態(tài)，雖然這些狀態(tài)看起來很多，但是這些狀態(tài)涉及到實際交互的需求和不同場景，并且是實現(xiàn)可靠交互的基礎(chǔ)。

2.2 選項

中立的選項

這個針對于單選框控件

如果用戶不想做出選擇，那么應(yīng)該提供一個中立選項。為用戶提供一個明確的方向，中立選項比錯誤選擇要好。

在單選框的選擇時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。例如，要考慮到用戶不進行選擇的情況，這時需要提供一個“無”的選項；給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都不會選，就需要提供一個“其它”選項。

單選框所有選項應(yīng)該滿足“互斥”的原則，因此選項之間要避免存在交集，選項覆蓋要全面，不能出現(xiàn)遺漏。例如，在一個年齡的選擇設(shè)置上，如果提供的選項為“20-30歲”和“30-40歲”，那么如果用戶剛好30歲該如何選擇？

通常給一個默認選項

這個針對于單選框，Tab切換，下拉列表

把控制力交給用戶

單選框最好有一個默認選項，當(dāng)單選框把選項默設(shè)置為為選中時，一旦選擇了一個單選按鈕，用戶就不可撤銷，無法返回默認狀態(tài)；而默認選中一個則可以防止這類問題，一開始就向用戶傳遞信息必須要在這組單選項之中選擇一個。

加速進程

下拉菜單中默認選項優(yōu)與請選擇，如果根據(jù)權(quán)限或使用頻率能定位到適用于大多數(shù)用戶的選擇項時，就不要默認為“請選擇”，而是使用默認選項，這樣做可以降低交互成本和節(jié)省用戶的時間和點擊數(shù)。

如“國家”和“語言”字段。在這種情況下，根據(jù)權(quán)限IP，默認選項是合理的，絕大多數(shù)用戶也不會更改選項，因此繼續(xù)選擇就會很煩人，耽誤時間。

增強“建議”

帶有默認選項的單選按鈕組合是給用戶的強有力建議——甚至是推薦。默認選項可能會引導(dǎo)用戶做出最好的決定，并在接下來增加他們的信心。尤其是默認選項可以輔助用戶，并讓用戶向著產(chǎn)品所希望的方向傾斜。

在用戶需做出復(fù)雜決定或處在不熟悉領(lǐng)域時特別有幫助。當(dāng)標(biāo)題和描述都很陌生的時候，默認選項可以引導(dǎo)用戶在各個可能未能理解的選項里做出最好的決定。

在產(chǎn)品上總想說服用戶做出對產(chǎn)品有利的動作。默認選項就會引誘用戶去走特定的道路。常見的例子就是活動頁面，對于忍痛離開按鈕低調(diào)置灰顯示，對于留在頁面按鈕高亮顯示。

當(dāng)然也有許多時候是不帶默認選項的：

• 不知道用戶行為或想要什么

• 選擇是否會冒昧，如性別，稱呼等

• 防錯，保證用戶能夠看到選項并動手做出選擇，比起用戶會出錯并事后給出警示強

注意選擇數(shù)量

如果希望用戶只選擇一定數(shù)量的項目。要強制執(zhí)行此操作，如果用戶單擊的次數(shù)多于所選數(shù)量，則他們最早的選擇將會被最近的選擇替換。同時注意需要加上輔助說明。

2.3 排序

選項排序會影響用戶操作，因此需要遵守一定排列原則。

邏輯順序

你應(yīng)該將所有選項按邏輯順序擺放，比如按被選中可能性由大到小，按操作難易度由簡單到復(fù)雜，按風(fēng)險由小到大，將最安全的操作放在前邊，列表選擇一般按照信息時間排序，由新到舊。

選項的順序可以說服用戶進行選擇，就像前面說的默認選擇項一樣，他們可能只是因為第一個選項在列表中的位置而選擇了第一個選項?？梢暂o助用戶，也可以讓用戶向著產(chǎn)品所希望的方向傾斜。

對齊

一般情況下，左側(cè)對齊排列發(fā)揮最佳效果，標(biāo)簽選擇除外。豎直排列相對于水平排列而言，容易讀取和定位，每行一個選項足以，可以提高用戶的瀏覽效率并減少錯誤。

但是豎直排列會占用較多的垂直空間，如果垂直空間受限，可以考慮水平排列。水平排列的時候，要注意每個選項之間的間距盡量大一點，以清晰的傳達選項對應(yīng)哪個標(biāo)簽。

移動端更多的情況是左側(cè)標(biāo)簽對齊，右側(cè)按鈕對齊，二者與頁面留出相同的邊距。垂直屏幕占比小，常用于呼出選擇、開關(guān)等有選擇操作的表單標(biāo)簽。

3.3 交互區(qū)域

交互區(qū)域要適當(dāng)大。單選框的面積較小，用戶在點擊的時候會比較困難，尤其是在移動設(shè)備上，易誤操作，可以通過擴大點擊區(qū)的交互區(qū)域來提高易用性。復(fù)選框和單選按鈕一般都很小，點擊或點選會很麻煩，可點擊區(qū)域中應(yīng)同時包含按鈕和標(biāo)簽，增加操作區(qū)域的面積，方便用戶操作。

列表選擇中可以點擊容器框所在行區(qū)域來切換行對象的選中和未選中。

2.4 文字標(biāo)簽

每個選項都要配合相應(yīng)的文字標(biāo)簽來指示該選項含義。

一致性

最好在每個區(qū)域上提供同類型的標(biāo)簽，這樣可以給用戶一種視覺穩(wěn)定性的感覺。同時盡量保證每個文字標(biāo)簽用語的表達的一致性，避免否定詞，不要出現(xiàn)有的用名詞，有的用動詞的情況。

不要在同一組標(biāo)簽中混用文字和圖標(biāo)

一個分段就像是一個按鈕，按鈕內(nèi)當(dāng)然可以使用文字或者圖標(biāo)代表其含義，但是請不要在同一個Segment Controls中混用文字和圖標(biāo)，避免讓用戶覺得混亂和不一致。

盡量簡潔

文字標(biāo)簽需要簡潔明了，一般使用短語而不是句子，因此不需要以句號來結(jié)尾。如果需要解釋說明，可以在選項下方使用單獨一行文字說明。僅體現(xiàn)每個個體之間的差異，不用重復(fù)選項之間相同的部分，將重復(fù)部分提出來放在整個選項的上方。

2.5 輔助提示

輔助提示很好地補充在消除歧義上的不足，但我們也需要合理使用，進行克制，否則就會造成不必要的視覺噪聲。

圖標(biāo)與環(huán)境暗示

暗示指的是用戶在操作選擇前，給予用戶的提示，用戶根據(jù)這些提示可以判斷當(dāng)前狀態(tài)以及操作后狀態(tài)。

比如在界面風(fēng)格模式，主題色，導(dǎo)航模式切換中，用戶可以通過當(dāng)前界面的樣式判斷當(dāng)前是是什么模式，以及選中其它選項后會產(chǎn)生什么結(jié)果，如下圖（來源螞蟻設(shè)計語言）在選擇圖標(biāo)中就給予相對應(yīng)模式的提示。

下圖，白天模式與夜間模式，用戶可以通過當(dāng)前界面的樣式判斷當(dāng)前是否已經(jīng)開啟了相關(guān)模式，從而判斷撥動開關(guān)后是什么結(jié)果。

環(huán)境暗示的優(yōu)勢是我們不需要其它設(shè)計和反饋告知用戶當(dāng)前狀態(tài)，可以通過選擇對象和當(dāng)前界面環(huán)境給予直觀暗示。

警告框與提示框提示

由于按下開關(guān)控件后立即執(zhí)行操作，如果操作比較危險，請在危險操作后加入二次彈窗確認，告知用戶當(dāng)前狀態(tài)以及潛在風(fēng)險，避免造成嚴重損失。

當(dāng)用戶操作后，提示框氣泡反饋告知用戶，讓用戶知道自己是觸發(fā)了開啟還是關(guān)閉。彈窗提示強度大，使用在一些危險、重要的反饋中，提示框則使用在一些輕量的提示中。

輔助文案

輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當(dāng)說明。下圖是手機信號設(shè)置和省電設(shè)置相關(guān)的選擇，開關(guān)的主體是名稱，但是下面的一行輔助文案很清晰地傳達了開關(guān)開啟后的后的狀態(tài)。

其他輔助

并不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信號告知用戶當(dāng)前狀態(tài)。界面設(shè)計與交互中，我們也仍然可以使用聽覺和觸覺來消除開關(guān)的歧義。

在安卓微信聊天列表中，選擇一行聊天對象長按，手機會輕微振動一下，表示已點擊，給予觸覺反饋，同時展開的多個選項可進行選擇操作；手機在關(guān)閉電源時，手機會卡擦一下，給予聽覺反饋，表示已關(guān)閉屏幕，而不需要眼睛盯著屏幕關(guān)閉。

我們很容易陷入到特定控件的中，所以我最好是從整體上開始思考。然后做出最佳決定，決定使用哪種選擇設(shè)計最有利于一致性、差異性和層次感，控件的高度，寬度，樣式設(shè)計和選項數(shù)量都是至關(guān)重要的因素。我們可以從被選擇對象是單選還是多選出發(fā)，來確定使用哪種選擇控件，可以根據(jù)下圖情況選擇，當(dāng)然由于使用場景和內(nèi)容的不同，請選擇性參考。

3.1 單選時

選項6個以下時，使用單選框&Tab標(biāo)簽

單選按鈕認知成本低，它能可見所有選項并讓用戶容易做出選擇。

單選框，用戶能夠很快看到有幾個選項以及每個選項是什么，而不用點擊或其他操作再去發(fā)現(xiàn)這些信息。讓所有選項都可見，使用戶可以方便地進行比較，這樣可以減少認知負荷，幫助表單更加透明。

涉及到選擇項與內(nèi)容組之間以及在相同層次結(jié)構(gòu)中進行導(dǎo)航時，使用Tab標(biāo)簽。不要將標(biāo)簽用于無關(guān)的目的地，也不要加載選項卡的整個頁面，只有選項卡及其內(nèi)容區(qū)域進行更改。

選項多于6個時，使用下拉列表&列表單選

如果選項的數(shù)量超過6個時，應(yīng)考慮使用下拉列表中或列表單選，因為單選按鈕太多，也會令人不知所措并引起混亂，用戶無論如何都無法記住所有的選項。

下拉列表簡潔。更多適用于可預(yù)測的、類似的或增量的選項(年份選擇 )。數(shù)量較多且相類似的選項選擇用下拉菜單整合。

如果屏幕空間有限，請使用下拉菜單。如果不是，請使用列表框。使用下拉菜單，可以使用默認選項，并淡化其它選擇。

3.2 多選時

選項6個以下時，使用復(fù)選框

選擇項標(biāo)簽短小且一致時，使用復(fù)選框，可以方便地進行比較，這樣可以減少認知負荷，幫助表單也更加透明。

選項多于6個時，使用列表多選

列表多選一般應(yīng)用于6個以上選擇項進行多選的情況，數(shù)量更多出現(xiàn)將翻頁或滾動情況，需要告知用戶已選多少條數(shù)據(jù)，并在選中選項時出現(xiàn)相關(guān)操作。

選項3-10個之間，考慮使用多選標(biāo)簽

選擇項數(shù)量在3-10之間，標(biāo)簽不能過長，考慮使用多選標(biāo)簽。多選標(biāo)簽它們給人的印象是輕量的，有趣的。

3.3 其他

當(dāng)選擇即生效時，使用開關(guān)

切換開關(guān)是一種數(shù)字開關(guān)。任何由切換開關(guān)觸發(fā)的效果應(yīng)立即生效。如果不是這樣，最好用單個復(fù)選框替換切換開關(guān)。

存在長詞時，盡量不使用多選標(biāo)簽

多選標(biāo)簽不能很好的處理長詞。不建議對文本進行折行或者調(diào)整大小，因為會不便于用戶閱讀，使用兩行以上的標(biāo)簽會使得每個標(biāo)簽非常難以快速掃描。

如果垂直空間出問題，考慮標(biāo)簽

你應(yīng)該防止出現(xiàn)很難看清選擇哪個控件的情況（確保按鈕和文本標(biāo)簽的間距），可以考慮使用選擇標(biāo)簽或拉大間距以此來在視覺上清晰地分隔選項。

寫在最后

本文介紹了多種選擇類控件，從用戶使用選擇類控件的角度闡釋了模式定義，涵蓋了大多數(shù)錄入場景。選擇類控件本身也需要不斷進行迭代、優(yōu)化和拓展，以適應(yīng)更多的應(yīng)用場景。后續(xù)我將持續(xù)關(guān)注，希望本文的能幫助你。

歡迎留言糾正，感謝閱讀。

文章來源：tob.design        作者：小龍

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

亞馬遜作為一個知名的電商平臺，它的成功背后卻有一個很難讓人理解的設(shè)計邏輯：成功的設(shè)計不一定是美觀的。為什么會這么說呢？本文將從四個維度展開分析，希望對你有幫助

編輯導(dǎo)語：B端產(chǎn)品往往由于業(yè)務(wù)體量龐大，導(dǎo)致信息復(fù)雜，同時對業(yè)務(wù)的性的要求很高；服務(wù)于B端的業(yè)務(wù)，不能夠出信息錯誤，填錯一個信息，就會引發(fā)巨大的問題。本文結(jié)合筆者自己的工作經(jīng)驗，總結(jié)了大型B端業(yè)務(wù)中表單的設(shè)計方法，供小伙伴參考。

一、表單的定義

表單是信息添加、錄入的通用形式；其作為獲取用戶輸入的重要交互方式，也承擔(dān)著將問題和答案進行配對的角色。

二、表單的設(shè)計原則

設(shè)計原則是任何一種解決方案的指路燈，它們體現(xiàn)解決方案應(yīng)包含的基本目標(biāo)。

針對互聯(lián)網(wǎng)表單設(shè)計，我倡導(dǎo)的原則如下：

1. 盡量減少痛苦；
2. 說明填寫完成路徑；
3. 考慮情境；
4. 確保一直溝通。

三、表單的結(jié)構(gòu)

我們先看看表單的結(jié)構(gòu)，表單主要由5部分組成：

1. 標(biāo)題：這個元素幫助用戶引導(dǎo)完成表單填寫的整個過程，尤其在你對信息進行分組方便用戶填寫時，特別有用。
2. 標(biāo)簽：告訴用戶相對應(yīng)的輸入字段的含義。
3. 輸入域：包含了文本框、密碼框、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
4. 提示信息：包含幫助信息、占位符和反饋信息提示。
5. 操作按鈕：包括提交按鈕、保存按鈕、復(fù)位按鈕和一般按鈕；用于將表單數(shù)據(jù)傳送到服務(wù)器上。

四、表單的表現(xiàn)形式

1. 標(biāo)簽

標(biāo)簽根據(jù)標(biāo)簽與輸入域的位置關(guān)系，分為：左對齊、右對齊、頂部對齊、內(nèi)聯(lián)標(biāo)簽、圖標(biāo)標(biāo)簽和浮動標(biāo)簽。

每種標(biāo)簽樣式都有自身的優(yōu)點與局現(xiàn)性，根據(jù)不同的場景選擇適合的標(biāo)簽樣式，能提高用戶閱讀效率，同時還能降低信息填寫時的錯誤率。

1）頂部對齊：根據(jù)Matteo Penzo 發(fā)布的關(guān)于標(biāo)簽放置的文章表明：采用頂部對齊的標(biāo)簽樣式，瀏覽表單所需的時間最短；如果希望用戶能快速掃描填寫表單，頂部對齊的標(biāo)簽是一個不錯的選擇。

頂部對齊的結(jié)構(gòu)，使得能放下更長的標(biāo)簽；但對于縱向空間是一個挑戰(zhàn)，當(dāng)填寫信息過多時，表單就會很長。

• 優(yōu)點：有最快的瀏覽和處理速度，同時標(biāo)簽長度彈性大。
• 缺點：非常占縱向空間。

2）左對齊：左對齊標(biāo)簽，文字開頭按閱讀視線對齊，符合人們的閱讀習(xí)慣，是有利于閱讀的。

瀏覽表單所需時間最長，但是緩慢完成率并不總是一件壞事——如果表單要求敏感數(shù)據(jù)(例如提供駕駛證、身份證、銀行卡號等，可以故意減緩用戶的填寫速度，來確保填寫的準(zhǔn)確性）。

左對齊的結(jié)構(gòu)需要更多的橫向空間，因此在移動端的呈現(xiàn)上可以是個問題。

此外，在屏幕空間有限的情況下，也會一定程度上限制了標(biāo)簽和輸入框的長度。

• 優(yōu)點：文字開頭按閱讀視線對齊，方便閱讀，節(jié)約縱向空間。
• 缺點：填寫速度慢，標(biāo)簽長度和輸入框彈性小。

3）右對齊：右對齊使得標(biāo)簽和輸入之間的距離固定，有明確的視覺關(guān)聯(lián)。

對于簡短的表格，右對齊的標(biāo)簽可以有很快的完成時間；但由于標(biāo)簽長短不同，左邊緣參差不齊，整體掃讀表單的時候不容易了解全部信息。

與左對齊類似，在屏幕空間有限的情況下，也會一定程度上限制了標(biāo)簽和輸入框的長度。

• 優(yōu)點：時間較短，節(jié)約縱向空間。
• 缺點：整體可讀性低，標(biāo)簽長度和輸入框彈性小。

4）內(nèi)聯(lián)標(biāo)簽：內(nèi)聯(lián)標(biāo)簽由于它對空間的占比很小，往往運用于移動端的界面設(shè)計中；但如果在交互上處理不好，會有很大的缺陷。

內(nèi)聯(lián)標(biāo)簽是用作提示性文字，來告訴用戶應(yīng)該填寫什么內(nèi)容，但用戶在填寫的適合，它就會消失；因此用戶無法仔細檢查他們是否寫下了所要求的內(nèi)容，這增加了錯誤的可能性。

另外一個問題是：用戶可能會把占位符文本誤認為預(yù)填數(shù)據(jù)，因此忽略它（正如尼爾森諾曼集團的眼動追蹤研究所證實的）。

• 優(yōu)點：空間占比小。
• 缺點：在增加錯誤的可能性。

5）圖標(biāo)標(biāo)簽：圖標(biāo)標(biāo)簽是內(nèi)聯(lián)標(biāo)簽的一種演化形式，在一定程度上緩解用戶的困惑和自我懷疑的心理。

但就圖標(biāo)而言，用戶需要時間來反應(yīng)它所代表的意思——若表意性不強或者并不是常見的圖標(biāo)樣式，用戶就要思考和猜測它的含義。

此外，輸入項一多，還得記憶那個圖標(biāo)所對應(yīng)的意思。

• 優(yōu)點：空間占比??；在一定程度上緩解用戶的困惑和自我懷疑。
• 缺點：可能造成用戶的認知負擔(dān)，增加用戶記憶成本。

6）浮動標(biāo)簽：用戶在輸入時，內(nèi)部標(biāo)題（提示信息）進行浮動位移，即節(jié)省了空間，提示性信息依舊在。

但相比其他幾種標(biāo)簽樣式來說，需要一定的開發(fā)成本。

• 優(yōu)點：空間占比小，無需用戶對標(biāo)簽進行記憶
• 缺點：需要一定的開發(fā)成本

關(guān)于標(biāo)簽樣式的選擇

2. 輸入域

輸入域是表單的核心主體，包含了文本框、選擇器、開關(guān)、復(fù)選框、單選框、步驟條、滑塊、上傳、標(biāo)簽頁等控件（按類型分）。

選擇適合的控件樣式，能在一定程度上提高表單填寫的效率。

在輸入域中，存在多種控件樣式，那么在設(shè)計產(chǎn)品的過程中，我們該如何選擇，如何取舍呢？

以下是我在日常工作中的一些摸索，也包括借鑒前輩的一些經(jīng)驗。供大家參考。

1）文本框

文本框包含了單行文本框和多行文本框。

針對單行文本框的設(shè)計建議：

a. 選擇適合的大小，它的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負擔(dān)。

如下圖即一典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理的話，容易誤導(dǎo)用戶對所需輸入金額的判斷，造成極大不安全感。

b. 采用字段掩碼，自動匹配特定數(shù)字的輸入格式。

例如：電話、身份證、銀行卡等；按照7加減二法則，根據(jù)用戶的記憶結(jié)構(gòu)來最大化提升閱讀體驗。

c. 彈出鍵盤應(yīng)與需要輸入的文本類型相匹配（移動端）。

d. 涉及到金額輸入時，當(dāng)用戶輸入的金額超過千時，出現(xiàn)最高分位提示，每多輸入一位，最高分位隨之增加。

e. 文字輸入最好有自動補全、自動建議功能，減少不必要的文字輸入，減少出錯。

例如：填寫地址欄通常是表單中最成問題的部分，像地址自動填充（基于用戶的定位和輸入提供準(zhǔn)確的建議）的工具使用戶能以更少打字量完成輸入。

f. 有限制輸入時，給予用戶明確的提示，增加用戶感知，減少出錯率。

知識擴展：什么是7加減二法則？

早在19世紀(jì)中葉，愛爾蘭哲學(xué)家漢米爾頓觀察到，有一個神奇的7±2效應(yīng)；意思就是人們的短時記憶的信息量是7個，可能會上下浮動2個。

針對多行文本框的設(shè)計建議：

使用可拉伸的文本框比固定框更好，從使用體驗講，可變化的文本框使頁面整體效果更統(tǒng)一。

固定文的文本框當(dāng)輸入文本超過其設(shè)置的寬度，會出現(xiàn)內(nèi)滾動條，當(dāng)頁面上出現(xiàn)兩個滾動條時（大頁面的滾動條），在使用操作上會帶來一定的混亂。

2）選擇框

包括下拉列表、選框、開關(guān)、日期選擇器等。

對于選擇框有如下幾個建議：

a. 避免設(shè)置默認值：除非您認為大部分用戶將選擇該值，尤其是必填字段。

為什么？

因為你可能會增加錯誤，用戶會快速掃描表單，所以他們可能會跳過一些已經(jīng)有默認值的字段。

但是這個規(guī)則不適用于智能的默認值，也就是根據(jù)用戶的信息設(shè)置的默認值；因為智能的默認值可以使表單更快，更準(zhǔn)確地完成。

例如：根據(jù)定位數(shù)據(jù)預(yù)先選擇用戶所在的國家/地區(qū)。

不過，請謹慎使用。

b. 當(dāng)選項很多時，提供檢索功能。

c. 提示信息要明確，要讓用戶明確自己選擇的是什么。

3）單選框與復(fù)選框

a. 按一定的邏輯進行選項排序，例如根據(jù)發(fā)生的可能性、難易程度、風(fēng)險大小來排序。

b. 選項應(yīng)該易于理解，容易區(qū)分。

c. 盡可能提供默認選項。

4）關(guān)于控件的選擇

a. 選擇框優(yōu)于輸入框。

任何高密度的操作，都會引起用戶的不適；因此，在輸入項的選擇時，用選擇來代替鍵盤輸入。

• 一方面：簡化用戶的操作，點擊次數(shù)遠小于輸入，減少用戶的操作密度；
• 另一方面：減輕用戶的認知、記憶負擔(dān)。

相較于輸入框，選擇操作步驟少，相對來說效率較高；同時，用戶用思考輸入值，也不用承擔(dān)輸入錯誤要重新輸入的風(fēng)險。

用戶可以通過選擇項，清晰明確的知道有哪些值可以選擇，對于一些無關(guān)緊要，或者用戶較難理解的輸入項，可以預(yù)制默認值，可以照顧到各階段的用戶。

b. 單選框與下拉選擇框。

單選框較為適合選項較少（少于五個），同時選擇項之間較為類似，需要強調(diào)或?qū)Ρ葧r，可以優(yōu)先考慮單選框。

另外，當(dāng)選項能見度和快速響應(yīng)優(yōu)先時，也建議優(yōu)先考慮單選框。

因為相較于下拉選擇，用戶可以通過展示出來的選項，直接選中目標(biāo)選項，提升輸入效率。

下拉選擇框較為適合選項較多（超過五個），有默認選項或者選擇項之間有較大差異，同時下拉選擇，最好不要引起隨后輸入項數(shù)量以及頁面的變化；否則下拉選擇的收起以及頁面的變化，易引起用戶不適。

若選項過多，超過二十個，最好引入模糊匹配以及一定排序規(guī)則（首字母排序、數(shù)字排序等），方面用戶提前預(yù)知選項的大致位置，或通過模糊檢索找到相應(yīng)的選項。

5）關(guān)于必填項

大多數(shù)情況下，所有字段都是必填項，只有幾個字段是可選的，一般用“*”標(biāo)記必填字段。

但星號并不適合所有類型的用戶，記得之前客戶問星號是什么意思？

它是頁面中的標(biāo)簽還是描述中的標(biāo)簽；同時，并且紅色會從用戶方面引起負面關(guān)聯(lián)，因為紅色表示錯誤。

為了避免這種誤解，可采用文本框內(nèi)暗提示。

它也是一個比較清晰標(biāo)志必填項的方式，并且還很節(jié)省空間，也能在一定程度上起到視覺降噪的作用。

3. 提示信息

提示信息可以分為引導(dǎo)性提示（幫助文字、輸入框提示、錯誤提示信息）和反饋性提示兩種。

這里主要想講講錯誤提示的設(shè)計：

1）關(guān)于錯誤提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer對表單驗證的研究發(fā)現(xiàn)——在表單頂部顯示所有錯誤信息，會給用戶的記憶造成較高的認知符合，會強制用戶回憶每個錯誤輸入框中的錯誤消息。

錯誤信息提示在輸入框行間顯示是減少記憶認知負荷的有效方法。

它可以幫助當(dāng)場識別錯誤而不是靠回憶錯誤，縮短反應(yīng)時間，提高表單填寫效率。

因此，錯誤信息提示與錯誤的字段鄰近放置可以獲得最佳性能。

下面來看一個簡單的例子，如下圖：

當(dāng)我們在錄入客戶信息時，假設(shè)填寫錯誤手機號碼，按照上面的論述，錯誤提示可以最直觀的顯示在這4個位置。

哪一個位置是最佳位置呢？

答案是：右邊。理由如下：

a. 錯誤信息提示右邊，符合人們從左到右的閱讀習(xí)慣；用戶視覺路徑自然流暢，很大程度上減少了用戶的精力和視覺工作。

放在左邊則恰恰相反，同時左邊與用戶期望相違背，因為左側(cè)放置更高優(yōu)先級的元素，是我們的直覺。

但事實上用戶需要專注于糾正他們的輸入，因此輸入框應(yīng)該是更重要的元素。

b. 對于上邊的錯誤信息提示，有著更高的認知負荷。

當(dāng)標(biāo)簽頂部對齊時，錯誤提示和輸入框中的提示這兩個文本靠得很近會產(chǎn)生視覺噪音，用戶注意力被分散，很難專注于其中一個，并且可能混淆它們。

c. 放置下邊的錯誤信息提示，雖然不符合從左到右的閱讀習(xí)慣，但它確與自然的從上倒下的閱讀流程相對應(yīng)。

手機屏幕缺少水平空間，把錯誤信息提示放置在下方是個不錯的選擇。

雖然它可能會增加用戶閱讀文本時的認知負荷（與類比上邊的錯誤信息提示），但可以通過將它們隔開足夠的間隔來防止這種情況。

綜上所述，如果是web端請選擇放置在右邊，如果是移動端則放置在下邊。

當(dāng)然，如果開發(fā)時間有限，都選擇放置下邊也可以，方便適配。

2）幫助信息

有時候需要幫助性信息，來輔助用戶完成表單填寫。

當(dāng)文本簡短的時候，可以直接放在改輸入框的附近。

當(dāng)文案過長的時候，就需要做氣泡框——獲取鼠標(biāo)焦點，則展開信息，失去焦點則消失（在氣泡展開時，切忌勿擋住input輸入框）。

也有些產(chǎn)品是將幫助信息放在頁面頂部，如果是針對全局幫助性信息，則可以采用這種方式。

如果只是針對某個元素提醒，則應(yīng)將兩者放在一起，讓用戶知道當(dāng)前處于什么地方，在針對什么進行引導(dǎo)、輔助。

五、復(fù)雜業(yè)務(wù)表單布局結(jié)構(gòu)探索

在復(fù)雜業(yè)務(wù)表單設(shè)計中采用單列布局，大家有沒有遇到過類似的問題，例如：

• 客戶1：“單列右側(cè)空白區(qū)域過大，留白多，表單太長啦?！?/span>
• 客戶2：“單列縱向占比大，表單太長，我看不到全部內(nèi)容。”
• 客戶3：“怎么不采用多列，多列我能看的內(nèi)容多啊”等等…

針對這些問題，我們團隊從自身的業(yè)務(wù)出發(fā)，對復(fù)雜業(yè)務(wù)表單布局進行了相應(yīng)的探索。

1. 多列與單列的探索

首先，我們根據(jù)下圖的規(guī)則對復(fù)雜業(yè)務(wù)的表單布局進行多方案的實驗：

方案一：采用4列布局，標(biāo)簽頂對齊。

那為什么標(biāo)簽不采用右對齊呢？

四列布局，頁面已經(jīng)很擁擠，加上標(biāo)簽長度長短不一且最大長度也無法確定（用戶自定義），所以放置采用了標(biāo)簽頂對齊。

總體上來看，縮減的長圖并不理想。

方案二：三列布局，標(biāo)簽右對齊的方式。

由于三列布局，頁面空間較大，嘗試著把標(biāo)簽右對齊，總體上達到了縮減表單長度的目的。

但字段若出現(xiàn)換行，則頁面信息模塊是混亂的。

根據(jù)CXL研究所的發(fā)現(xiàn)：單列表單比多列表單完成得更快一些。在這項研究中，參與測試的人完成單列表單的平均速度比多列表單快15.4秒；多列布局雖然縮減了表單長度，空間利用率也提高了，但整體的填寫效率降低了，這與表單設(shè)計原則相違背。

同時從開發(fā)效率來看，單列成本較低（多列需要做響應(yīng)式）；從業(yè)務(wù)承載上看，單列擴展性更強，適合復(fù)雜多樣的業(yè)務(wù)場景（多列適合交單一的場景）。

綜上，最后還是采用單列布局。

2. 單列布局在復(fù)雜業(yè)務(wù)中運用

面臨的問題該如何解決？

我們團隊重新審視了客戶的這些反饋：空白區(qū)域過大、留白過大、表單太長、我看不全、不知道什么時候可以填完等等。

我們嘗試把這些問題翻譯成：我無法預(yù)知表單的填寫內(nèi)容，我想要是把空白的地方也利用上我是不是就看全了整個表單。

如果是這樣，用戶的本質(zhì)述求就是想要掌控感。

對現(xiàn)有的單列布局做了以下幾個處理：

• a. 采用卡片式布局，區(qū)分內(nèi)容；
• b. 增加引導(dǎo)式的定位錨點；
• c. 在錨處加入微動效反饋，給予用戶確定感。

感謝閱讀！本文給表單設(shè)計提供了一個基本的指南，在具體項目中，你可能需要根據(jù)產(chǎn)品特性和用戶需求進行調(diào)整。

文章來源：人人都是產(chǎn)品經(jīng)理           作者：@Nick 

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

編輯導(dǎo)讀：如今，谷歌可以說是科技領(lǐng)域最大、最具有影響力的公司之一。正因為如此，它們的數(shù)字產(chǎn)品設(shè)計會對整個行業(yè)產(chǎn)生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗）設(shè)計指南中，設(shè)計師們提到了10條原則，不管是iOS還是安卓系統(tǒng)都同樣適用。在這篇文章中，作者從這10條指南出發(fā)，加上自己的經(jīng)驗和相關(guān)案例，在設(shè)計方面為大家提供一些建議，希望對大家設(shè)計產(chǎn)品有幫助。

6. 利用聲音和觸感喚起用戶的情感

這里的聲音特指“Hero sounds”，用于襯托一些喜慶的、重要的高光時刻，它們常被用來激起用戶的情感，或烘托一種喜悅的氣氛，從而塑造產(chǎn)品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds：慶祝用戶進行了某項操作；歡迎用戶使用新的應(yīng)用程序或體驗；確認用戶成功使用某款產(chǎn)品。——《谷歌聲音設(shè)計指南》

聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到，Hero sounds出現(xiàn)的次數(shù)不應(yīng)該頻繁，否則無法突出其重要性。通過在同樣的環(huán)節(jié)提供同樣的聲音，久而久之用戶會將這種提示音與成就感掛鉤，從而增加對產(chǎn)品的粘性。如每成功更新一次應(yīng)用程序就會出現(xiàn)慶祝的聲音，或者每次待辦事項標(biāo)記為完成后就會出現(xiàn)慶祝的提示音。

不管我們是否注意到這一點，我們所聽到的產(chǎn)品的聲音與自己的感覺都是相掛鉤的。無論是手機發(fā)出的“叮咚”的消息提示音，還是MacBook的廢紙簍在清空時發(fā)出的揉紙的聲音，都在某種程度上影響著我們的情緒，也幫助我們更加了解用戶界面上發(fā)生的一切。

觸覺可以和聲音配合使用，也可以單獨使用。舉個例子，在手機黑屏的時候，觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時，觸覺應(yīng)該強有力、傳達愉悅的情緒?！栋沧坑|覺設(shè)計指南》

除了聲音之外，觸覺設(shè)計（如震動）也是一種刺激感覺的好方法，可以為用戶提供更加完整的體驗。用戶可以通過觸覺提示來嘗試、學(xué)習(xí)使用某一款產(chǎn)品。在有了不同的觸覺體驗后，我們將會對產(chǎn)品的某些功能有更加深入的了解。

舉個例子，如果某個用戶通過APP進行付款，但在付款過程中出現(xiàn)了錯誤。這時候APP會進行一連串緊張、短促的震動，對用戶進行錯誤反饋。當(dāng)用戶熟悉了這種震動模式之后，下一次再感受到這種震動，就會立刻知道付款出現(xiàn)了問題。

產(chǎn)品設(shè)計師很容易忽略聲音和觸覺這兩個板塊，而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果，可以為用戶體驗錦上添花。

7. 通過動圖表達獨特的風(fēng)格、塑造個性化品牌體驗

圖片來自Material

動圖可以增加用戶的好感，在互動中為用戶增加個性化體驗，也可以表現(xiàn)品牌獨特的風(fēng)格。——《谷歌手勢設(shè)計指南》

動圖是我自己設(shè)計的產(chǎn)品Confetti中一個非常重要的因素，這是一款運動追蹤APP，是為那些追蹤自己生活習(xí)慣的用戶設(shè)計的。在設(shè)計這款產(chǎn)品時，我希望可以為用戶創(chuàng)造出一種滿足感，鼓勵他們培養(yǎng)好習(xí)慣。在這款A(yù)PP中，我大量使用切換功能，通過不同的手勢，界面或進程可以平滑過渡，使用起來非常便捷。當(dāng)一個好習(xí)慣完成時，還會出現(xiàn)彩屑動畫飛舞的，加強用戶的滿意度。

簡言之，動圖可以應(yīng)用于不同的場景，通過過渡和變化的吸引用戶。

動圖可以強化兩種元素之間的聯(lián)系，實現(xiàn)快速切換，迅速解決特定的任務(wù)。動圖可以讓用戶專注于眼下最重要的事，不被其他因素所干擾?！豆雀枋謩菰O(shè)計指南》

在2020年，你的產(chǎn)品可以在一秒之內(nèi)激怒用戶。正如塔拉斯·斯凱斯基（Taras Skytski）在《用戶體驗設(shè)計中動畫使用的終極指南》中指出的那樣：“眾多研究發(fā)現(xiàn)，界面動畫的最佳速度在200到500毫秒之間。這一數(shù)字是通過研究人類大腦運行機制所得出的。100毫秒及以下的動畫因為速度太短而無法被識別，而超過1秒的動畫則會造成一種延遲感，讓用戶感到不舒服?！?/span>

通過動圖及產(chǎn)生的動畫效果（如切換）可以改善用戶體驗，同時保證可以迅速找到需要的版面，而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間，又不能改善體驗，那么這種環(huán)節(jié)就沒有必要存在。

8. 通過圖像進行交流，并區(qū)分和突出產(chǎn)品特性

圖片來自Bribble｜制圖Elena Petkovska

我們或多或少都有這樣的體驗：打開一個界面，里面充斥著太多文字和太少的圖像。在用戶體驗設(shè)計中，展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產(chǎn)品，而是希望通過圖像對一款產(chǎn)品進行直觀的視覺理解。

你所選擇的圖像應(yīng)該能夠清晰地展示產(chǎn)品特點，不管是用戶自己上傳的圖片，專業(yè)攝影師的圖片，還是插畫風(fēng)格的圖片，它們都應(yīng)該能直觀展示產(chǎn)品外觀，反應(yīng)產(chǎn)品的特點?！豆雀鑸D像設(shè)計指南》

APP里的插圖和所有的視覺元素一樣重要，好的圖片可以讓用戶界面更加生動，使用戶體驗更加完善。恰當(dāng)?shù)膱D片還能展示品牌風(fēng)格，成為無聲的“故事講述者”。

我們應(yīng)當(dāng)有目的地使用圖像，作為總體內(nèi)容的補充而非替代。照片或者插圖最好能夠傳達足夠的信息，如產(chǎn)品外形、風(fēng)格，APP的用途，狀態(tài)等。媒體界有這么一句話：一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網(wǎng)站上找到高質(zhì)量的圖片。

9. 關(guān)注產(chǎn)品的像素密度

圖片來自Material

用戶界面設(shè)計中應(yīng)該關(guān)注產(chǎn)品的像素密度，讓界面可以適應(yīng)不同的屏幕?！豆雀柘袼孛芏仍O(shè)計指南》

像素密度（PPI）是用來衡量每物理英寸的像素數(shù)。另一個常用的單位是DP（Density-independent pixels，有時候簡稱為DIP）。像素密度=屏幕寬度或高度（以像素為單位）/屏幕寬度或高度（以英寸為單位）。

在設(shè)計界面時，我們不應(yīng)該只關(guān)注像素，還應(yīng)該關(guān)注不同設(shè)備的像素密度。這樣可以讓我們在做設(shè)計時保證元素適當(dāng)縮放，以適應(yīng)不同屏幕的尺寸。

舉個例子，我們現(xiàn)在有一個按鈕素材資源，大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示；在一個320ppi的屏幕上它就會擴大成400 x 100 px，相當(dāng)于原始素材的兩倍大。

通過以上例子我們可以了解，在像素密度不同的屏幕上，素材呈現(xiàn)的狀態(tài)是不一樣的。在實際應(yīng)用中，素材可以會被放大三倍甚至四倍，如果素材不夠清晰，就會在拉大后虛掉。這就需要我們在選擇素材時格外謹慎，嘗試在不同設(shè)備上打開并檢查。

素材密度如何適應(yīng)屏幕尺寸？舉個例子，iPhone XS Max的屏幕是414 x 896 pt，注意這里的尺寸是物理尺寸pt，而非像素。如果以像素為單位計算，那么它的屏幕是1242 x 2688 px。所以當(dāng)我們?yōu)閕Phone XS Max設(shè)計應(yīng)用產(chǎn)品時，我會首先考慮用414 x 896 pt的素材，然后在輸出素材時將其乘以3。

10. 考慮設(shè)計在線/離線狀態(tài)

圖片來自Material

離線狀態(tài)可以讓用戶知道這款應(yīng)用程序沒有連接網(wǎng)絡(luò)。如果你的產(chǎn)品有一些功能需要聯(lián)網(wǎng)使用，你最好能向用戶明確顯示連線狀態(tài)?！豆雀桦x線設(shè)計指南》

離線訪問功能是設(shè)計師經(jīng)常忽略、對用戶體驗影響卻非常重要的一環(huán)。雖然有些功能離線也可以使用，但是在能聯(lián)網(wǎng)的時候，最好還是主動提示用戶，推薦他們連接網(wǎng)絡(luò)。

如果有可能的話，要提前告知用戶下載相關(guān)信息，以便脫機訪問。最常見的例子就是Spotify等音樂應(yīng)用程序，它允許用戶下載歌曲，以便在沒有網(wǎng)絡(luò)的時候也能繼續(xù)聽歌。

假如你的產(chǎn)品不像Spotify或者Netflix那樣需要下載具體內(nèi)容，你可以發(fā)揮創(chuàng)意來設(shè)計在線、離線兩種模式。

谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子（在谷歌瀏覽器連網(wǎng)的過程中，離線畫面會出現(xiàn)一只霸王龍，按空格鍵或者向上的箭頭就能控制霸王龍——譯者注）。這個小游戲填補了用戶等待連線的時間，將消極體驗轉(zhuǎn)變成了積極體驗。

11. 總結(jié)

我希望這份設(shè)計指南可以為你提供一些想法。除了谷歌的設(shè)計指南之外，我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網(wǎng)站找到關(guān)于用戶界面和用戶體驗的設(shè)計指導(dǎo)，在這一領(lǐng)域進行更深入地探索。

文章來源：人人都是產(chǎn)品經(jīng)理           作者：Danny Sapio           譯者：Michiko

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)