你是想給用戶提舒適體驗，還是想給他們一個麻煩？
如果您想讓他們的體驗更快更容易，請使用輸入框上面的字段對齊標簽.或輸入框內的對齊標簽模式。
與左對齊和右對齊的標簽相比，頂部對齊或內部左對齊標簽填寫起來更快、更容易。這是因為標簽只需要有一半多的視覺固定物。
頂部對齊標簽還允許用戶以一個可視方向向下移動輸入框。左對齊和右對齊的標簽需要兩個視覺指示才能填寫。
頂部對齊標簽的唯一缺點是，它們可以使表單變得很長。但是現在用戶滾動的頻率越來越高，所以這不是問題。
通過減少字段之間的空白，可以減少表單長度。您還可以將表單拆分成多個頁面，以使表單更短。
頂部和左/右對齊標簽之間的差異很明顯。頂部對齊標簽更容易在眼睛上，并使表格更容易填寫。雖然他們可以使表單更長，
但用戶將從完成表單所需的時間和精力的減少中獲益更多。
如果頂部對齊的標簽能夠給用戶提供更好的表單體驗，那么它是值得采用的。設計師應該更多地考慮他們的字段標簽對齊。
它可以區別于用戶填寫表單還是放棄表單。
“取消”按鈕是在沒有完成任務的情況下將用戶帶回原來屏幕的輔助動作。
根據它們的功能，最好的順序是什么？“確定”按鈕應該出現在“取消”按鈕之前還是之后？
許多人提到了以下幾點平臺約定作為答案。雖然這似乎是一個解決問題的方法，但實際上并非如此。它不能回答哪個位置對用戶更好，以及為什么。為了一致性而遵循平臺慣例的建議是不夠好的，給設計師留下了空手而歸的機會。
“一致性”是設計師們常用的一個詞。不深入考慮用戶面臨的設計問題也是一個流行的借口。如果一個人不知道為什么會存在，遵循設計慣例有什么好處呢？
如果某個設計約定對用戶有害呢？設計師應該為了一致性而盲目地遵循嗎？糟糕的設計實踐是否應該持續下去，因為設計師們希望通過平臺設計的一致性來解決每一個問題？
今天，有一些平臺設計約定被廣泛使用，因為它們是為用戶工作的。但這里的要點是，平臺設計的一致性永遠不應該讓設計師滿意，因為這是做某事的唯一理由。理解為什么您應該以一種方式而不是另一種方式來設計您的用戶界面的原因是關鍵。
人們可能會說，讓你的動作按鈕突出給它更多的視覺重量和一個清晰清晰的標簽比它的位置更重要。雖然動作按鈕的視覺重量和標簽是一個重要的設計方面需要考慮，但它不是唯一的方面。
只關注一個設計方面而不是其他方面是一個粗心的設計師的行為。一絲不茍的設計師會思考每個設計方面是如何影響用戶的。
對于設計師來說，最難搞清楚的是主動作和次要動作是如何放置的。這就是為什么“確認”/“取消”按鈕的爭論在設計師中如此流行的原因。
當你通過了平臺慣例的爭論后，你會質疑哪個位置最有效。您可以通過分析設計如何影響用戶來解決這個問題。
一些設計師認為，在第二個操作之前將主操作放在左邊對用戶更好，因為它更接近，因此，點擊的時間更少。
這是有意義的，但您不能忽視這樣一個事實，即用戶在選擇要采取的操作之前將查看他們的所有選項。
這意味著大多數用戶不會盲目地單擊主操作按鈕而不查看它旁邊的輔助操作按鈕。
他們將首先看到左邊的主要動作，然后查看右邊的次要動作。然后，他們會把眼睛移回主要的動作，點擊它。這將在多個方向上總共創建三個視覺固定。
將其與放置在對話框右側的主操作和放置在左側的輔助操作進行比較。用戶從第二個動作的眼睛開始，然后將眼睛移到主動作上單擊按鈕。這在一個方向上總共創建了兩個視覺固定，給用戶一個更快的視覺流。
用戶只關注每個按鈕一次，并在主動作按鈕上結束。將主操作放在左邊可能會使用戶更容易到達，但是當您從用戶的思維過程和視覺固定的角度來看速度時，將主操作放置在對話框的右側實際上更快。
當用戶單擊輔助操作按鈕時，他們期望應用程序什么也不做，并將它們帶回到原來的屏幕。因此，“取消”按鈕的功能類似于“后退”按鈕。
當用戶單擊主操作按鈕時，他們期望應用程序執行按鈕所述的操作，并將其轉到下一個屏幕。因此，“確認”按鈕的功能類似于“下一頁”按鈕。將輔助動作按鈕放置在左側，主動作按鈕在右邊映射到用戶可以期待的‘后退’和‘下一步’按鈕功能。
它類似于分頁按鈕的放置方式。將用戶帶到下一頁的按鈕位于右側，將用戶帶回其早期頁面的按鈕位于左側。這個按鈕的放置工作是因為它映射到用戶從左到右的閱讀和導航方向，其中右是前進的方向，左是后退的方向。
對話框中的“確認”和“取消”按鈕應該遵循類似的交互模式，因為它們的功能類似于分頁按鈕。
不僅如此，在中國用戶習慣了左右方向的模式。
將您的主要操作放在右側，將次要操作放置在左側，將使您的對話框按鈕更容易、更直觀地為用戶所理解。
將您的按鈕放置在終端區域可以讓用戶看到他們最后需要采取的主要操作。這不僅改善了視覺流，也改善了任務流。
用戶在掃描時不會跳過主動作按鈕。當他們通過時，他們的眼睛就會盯著它，所以他們可以立刻點擊它。
另一個問題是設計師經常想知道他們是應該把按鈕放在角落里，還是把它們放在一起。當您將主操作和輔助操作放置在對話框
的角中時，它將很好地映射到左右方向。但是，由于‘取消’和‘確認’按鈕不是導航按鈕，所以沒有必要遵循方向映射。有時它弊大于利。
如果應用程序要執行用戶無法撤消的關鍵操作，那么用戶可以看到“取消”按鈕和“確定”按鈕是很重要的。在這種情況下，“取消”按鈕的功能可能像“先前”按鈕，但更重要的是，因為它充當安全按鈕，以防止任何更改。
在左下角放置“取消”按鈕的危險是，由于兩個按鈕之間的視覺分隔很大，它可能導致用戶忽略它。將“取消”按鈕和“確定”按鈕放在一起，可以使用戶更容易在一次凝視中查看和比較這兩個動作，從而選擇最佳的操作和點擊。
我們經常卸載軟件的時候一不留神就會點錯，或者是我們在裝某一個軟件的時候全家桶一擁而上。所以在不同場景當中我們所用的按鈕形態也是不一致的。
菜單欄沒有主次之分
當您對菜單項進行全文本或全圖標處理時，問題就會出現.當用戶掃描他們想要的項目時，他們的注意力分散在菜單周圍。這是因為沒有層次來吸引他們的注意力。
通過將用戶的注意力引導到您的主要項目，使您的菜單可掃描。
要實現這一點，我們可以看下面設計形式來強調重點內容
與其在每個菜單項上放置圖標，還不如將其放置在主菜單項上。視覺強調首先將用戶的注意力引導到這些項目上。
次要項目上缺少圖標，這使得它們能夠得到其余的關注。
如果要使所有圖標處，請稍微放大需要突出的圖標。
稍微的增大會使視覺效果有很大的不同，同時字形更容易辨認，每一行的線高也會增加。讓整個看起來更加有空間感一些。
讓用戶瀏覽閱讀起來也會更加舒暢一些。
甚多的設計師設通常喜歡使用主按鈕的輪廓形狀作為輔助按鈕。按鈕樣式看起來可能不一樣，但還不夠。
他們仍然會競爭，因為他們的顏色對比度相等。
為了給主按鈕更多的注意，削弱輪廓按鈕的對比度。與其使用重顏色，不如使用它的色調。你可以通過降低重顏色的亮度和飽和度來制作。確保對比度足夠高，以達到主要的按鈕突出性。
設計師的另一個趨勢是把第二個按鈕變成黑色。他們認為，使用中性的顏色，它是不會競爭的。然而，黑色按鈕更為突出，因為它有一個更高的對比度。
不要使用黑色，而要使用重顏色的色調，以使輔助按鈕比主按鈕更弱。要做到這一點，增加亮度和降低飽和水平。
將彩色按鈕與中性灰色配對并不總是意味著彩色按鈕會得到更多的關注。如果主按鈕的顏色太輕，則中性輔助按鈕將更加突出
要避免這一錯誤，請選擇不太明亮的顏色。明亮的顏色可能看起來很有吸引力，但它與白色背景或文字的對比不太好。在主按鈕上使用更暗的顏色，這樣第二個按鈕就不會引起注意。
在設計當中我們經常會遇到做選擇性的勾選，往往很多設計師會犯的一些錯誤問題和選擇障礙問題。
我們設計單選框的時候這不是秘密而是讓用戶做出選擇，復選框是很難點擊，因為他們的小擊中目標。
設計師通常會讓標簽點擊，但如果它不是直觀的，那也于事無補。
通過將復選框轉換為復選標記，您可以為用戶提供更大的命中目標和更清晰的交互提示。
有時你可能想提供不同數量的商品。使用多個復選框復制它會產生更多的文本來讀取，并使界面混亂,且讓用戶難以進行選擇。對于增量輸入更改使用數字選擇器一次顯示該項會為更好些。
總結以上兩點，實際商用應用案例如下所示
卡片內容有幾種文本類型，提供不同的信息功能。讓我們看看基本內容卡的文本類型。
首先是眉毛，它是一個明確的詞或短語，用來描述內容的主題。
還有一個標題，它用一個句子中的幾個單詞告訴用戶內容是關于什么的。
在此之后，就會有一個描述內容的正文。
最后，就是時間與操作的按鈕
必須通過確定哪些文本類型對用戶更重要，從而為您的卡片新聞建立文本層次結構。
此內容新聞卡片的適當文本層次結構為：
1.眉毛-可以是時間，可以是新聞分類
2.標題-最重要的是，因為它描述的內容最快。
3.正文-包含一個描述性段落，但閱讀時間最長。
4.描述內容的正文對內內容的簡要描述。
您的內容卡應指導用戶按此順序瀏覽文本類型。要實現這一點，您需要使用瀏覽控制對文本類型應用適當的視覺強調。
通過適當的視覺強調，可以控制用戶瀏覽的順序，并指定反映文本層次結構的瀏覽模式。
當掃描遵循文本層次結構時，用戶會浪費更少的眼球運動，并且可以更快地處理信息。
下面的示例說明了瀏覽控制如何讓眼球工作比較。不同的是強調不同的文本類型。
其他文本類型具有相同的強調度，這使得它們爭奪用戶的注意力。
在內容顏色的控制上我們可以為三種，重要的突出的需要用戶重點進行關注的就用黑色
例如：#333333 #222222 #454545 等等色值
在不需要突出的內容上我們可以用稍微淺一點的色值保證用戶能夠進行閱讀即可，
例如：#999999 #787878 #666666 等等色值更加容易記住
其他輔助的內容表達比內容正文更淺
例如：#bbbbbb #A8A8A8 等等色值
說到這里我要說一用戶體驗關于文字的事情如果做出來的設計文字是給自己看的隨意設計讀沒人會說你，有句話說的好：現在
是內容為王的時代，如果在內容上不夠吸引或者顏色不夠吸引眼球那就是一個很失敗的案例。
轉自：站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計的思考不僅要注重表象層面，也需要圍繞信息傳達這一設計的本質功能，以充滿自省的精神深化和反思自己的設計意識，即做到“好看、好用”。在設計過程中，要站在公司的利益上，懂用戶所想，在每一個關鍵點都要帶給用戶意想不到的驚喜，這些往往都是通過細節體現出來的。
01.「微信」添加好友-掃描與被掃指尖切換
產品體驗：
使用微信掃一掃添加好友時，如果對方打開二維碼的速度較慢（網絡不好/手機卡頓/操作不熟），為避免自己久等，可通過左下角的二維碼入口將自己的個人二維碼提供給對方掃描添加。
設計思考：
微信的掃一掃功能簡直強大到不敢相信，除了我們日常要用的支付付款、物品查詢、各種信息的獲取等，還有一個重大的功能就是添加好友。不知道大家有沒有碰到過這種情況，需要添加好友時，自己打開掃一掃，過了很久卻發現對方還在功能的路徑中徘徊，遲遲沒有打開二維碼頁面，這時我們不得不說一聲“你掃我吧”，于是自己從掃描頁面返回，一頓騷操作，把自己的個人二維碼給對方展示了出來。
微信在掃一掃頁面左下角提供的個人二維碼入口，便于在加好友出現問題時，隨時由被動變為主動，指尖切換掃描與被掃的添加方式，節約用戶時間成本以及緩解掃描等待的焦慮感?；谟脩籼砑雍糜褧r所處的使用環境，考慮周全且人性化，極大方便用戶使用。
02.「高德地圖」錄入車牌號-降低限行違章概率
產品體驗：
在高德地圖的導航設置中，錄入自己的車牌號并開啟避開限行提醒，在導航過程中如果途徑限行路段，系統會有語音播報提醒并自動避開限行路段重新規劃路線。
設計思考：
自北、上、廣、深四個一線城市交通部分別出臺汽車限行措施后，其他部分城市也相繼出了限外政策，外地車牌如果想要在本城市隨時出行，需要（部分城市通過搖號）獲得本地車牌號方可。不管我們對交通路線有多熟悉、或者經過其他城市的限行路段，因限行導致的違章真是防不勝防，畢竟每個地方的限行政策都是通過固定渠道對外宣布，不會通知到每一個駕駛員，如果不能第一時間獲得限行訊息，悔之晚矣。
使用高德地圖導航，在登錄后錄入車牌號并開啟“避開限行”，系統就會自動檢測導航路線，如果要經過限行/限外路段時會自動重新規劃，通過繞行來避讓限行的路段，如果無法避開則提示：已無法為你規避限行路段，請合理安排出行。自動規劃路線能夠有效避免因限行導致的違章，給我們造成經濟損失，尤其是駕照，畢竟一周期才12分。就算無法避開，也可以通過語音提前知道限行路段，并合理安排出行時間。
（PS：雖然很多用戶感覺無需登錄也可以正常使用，但登錄之后可以享受更多特權以及更加優質的服務）
03.「支付寶」你想要的收款二維碼樣式是這樣的
產品體驗：
在支付寶的收款二維碼頁面截圖時，系統預判用戶有使用二維碼收款的需求，通過彈窗提示是否需要保存二維碼圖片，自動去掉無關信息并統一規范樣式。
設計思考：
移動支付自上線開始，微信支付和支付寶支付各自占領著半江山，只要涉及線上交易，絕大多數用戶每天必定會選擇其中一個使用，雖然兩大企業的方向截然不同，但支付系統在用戶體驗方面都是一如既往的持續提升，以此來增加用戶的粘性。
支付寶收款二維碼頁面觸發截圖，在截取成功的狀態下，同時彈出保存二維碼圖片提示。跟設備截取的圖片相比，單獨保存的二維碼樣式更加簡潔，且規范統一，信息內容更加聚焦，便于用戶直接傳送或打印使用。其實進入收款二維碼頁面，在下方原本就有保存圖片入口，基于用戶進入此頁面的需求明確，對性子較急且耐性較低的用戶來說，這個被弱化的保存入口，可能直接忽略（別不信，我見過有人手上拿著手機還在到處找手機）。截圖時出現的彈窗提示，相當于上了一道保險，避免使用截圖自行裁剪打印的樣式不統一，導致付款用戶心中原本就已存在的默認收款二維碼樣式發生變化，形成認知負擔。
04.「抖音」暗示用戶-好看就要分享
產品體驗：
在抖音短視頻頁面停留一段時間后，分享圖標會自動變成最近常分享的某個用戶頭像，暗示用戶好東西要分享。
設計思考：
抖音作為當前最火的短視頻（直播）平臺，相信很多用戶即使不經常玩，但最起碼會玩，雖然有部分低俗、劣質的用戶在破壞著平臺的規則，但整體看來是利大于弊的，其他的交給人心。下載抖音的用戶大部分獲取來源應該是來自于他人的分享，一傳十十傳百，最終傳到人手必備，所以平臺是相當注重分享功能的用戶體驗。
抖音的分享功能，其實還有一個小細節，當我們停在某個短視頻頁面一段時間時，原本的分享圖標會變成最近分享的用戶的頭像。用戶對分享功能都有常規的認知，當我們在觀看某個視頻一段時間后，系統自動評判該用戶對此視頻感興趣，基于用戶看到感興趣的東西就喜歡炫耀、分享的心理（比如“孫悟空到此一游”），系統將分享圖標變成用戶頭像，意在提醒觀者分享，以達到最大化傳播可能的目的，以及為平臺拉取新用戶。
05.「智行火車票」搜索攻略-確保使用的流暢性
產品體驗：
首次打開智行火車票的搜索功能，會自動彈出搜索攻略，以指導用戶可搜索的范圍及使用規范，后續再次打開搜索即恢復常規用法，如果再次了解，點擊搜索攻略即可。
設計思考：
對于搜索功能，可謂是熟悉的不能再熟悉了，千篇一律的輸入關鍵字即可，大不了重新再來。搜索是產品中不可或缺的一部分，無論打開哪個App,都能很快找到，但如果搜索功能做的好了，也是用戶轉化的關鍵流量入口，比如搜索方式、呈現樣式、搜索引導等，用戶體驗不容忽視。
智行火車票APP的搜索攻略就是在合適的時間、合適的地點準確的傳達給用戶。首次進入，即自動彈出搜索攻略教育新用戶，明確的告知使用搜索功能可以搜什么？怎么搜？避免用戶一打開就直接擼字，而造成使用錯誤的概率提高以及影響搜索結果的準確性，用戶一旦碰壁，很有可能轉身就離開。自動彈出的搜索攻略由被動變為主動，可以提前告知用戶搜索范圍及關鍵詞示例，降低出錯的幾率，讓整個搜索流程更加順暢，為后續的使用提供便利，減少用戶的流失。
06.「蝦米音樂」評論-一鍵表達心情
產品體驗：
在蝦米音樂聽歌時，進入評論功能，除了可文字評論外，還能表達聽歌時的心情，隨時查看有多少同樣心情的人在聽這首歌，很有代入感。
設計思考：
文字是我們交流常用的元素，但很多時候因使用的方法不當而造成含義上的變化，比如一段話后面加個感嘆號，到底是消極還是敵意？聲音也是一樣，當我們開著車對行人按喇叭，是表示禮貌還是憤怒？而表情則是不同，它表達的是一種類型，比如一個笑臉，可以理解為滿意、開心、高興等。表情除了可以委婉的表達自己內心的情感之外，也是因為表情的無責任性，你會聽到人說，請注意你的言行，但沒人會說，請注意你的表情包。
蝦米音樂APP在歌曲的評論功能，除了有文字評論之外，還可以表達聽歌時的心情，即表情評論。進入評論頁面，首先看到的是某某等幾人使用的什么樣的心情評論，并提示共有多少人參與，引導用戶接下來該做什么，讓用戶快速地進入到產品使用中，給予了明確行為操作的指令，觸發并提高了用戶的參與度。另外使用表情相比文字評論更容易操作，系統預設好可供用戶選擇的表情包并附帶文字提示，用戶無需思考便可一鍵操作，很大程度上降低了完成的難度。事實表明，同樣能達到目的的辦法，簡單的是最實用、也是。
07.「美團」收貨地址-二次提醒降低出錯的概率
產品體驗：
在美團提交訂單頁面選擇好地址后，頁面上滑，詳細地址會懸浮在導航欄，便于用戶二次確認或修改。
設計思考：
線上購物已經成為了我們的家常便飯，外賣行業解決著我們“吃”的問題更不例外。通常我們在選擇好商品后，地址作為重量級的信息都會優先展示在訂單頁面的頂部，首先基本都會提供一個默認地址，如果不需要進入地址修改即可?？v然如此，依然有部分用戶因為急于下單，后續發現地址錯誤，就需要聯系商家修改地址或者取消訂單重新下單，浪費時間不說，還會影響心情。
美團APP在提交訂單頁面，針對地址方面相當于加了一道保險。用戶在選擇完地址上滑頁面后，詳細地址懸浮在的標題欄上，點擊可直接修改收貨地址，雖然不一定每個用戶都能看到，但長時間懸浮在頁面頂部，時刻都在提醒著用戶，只要稍一抬頭，即可看到醒目的大字（地址），便于用戶潛意識的瀏覽或眼睛的余光掃描，發現有誤及時修改，降低下單時地址出錯的概率，考慮周全，給予更好的用戶體驗。
08.「菜鳥」下拉刷新-趣味化的“空投”
產品體驗：
菜鳥APP在頁面下拉刷新的過程中，會有一個紙箱從空中落下的動畫效果，類似空投，仿佛在說“你的補給已送到，請及時查收”，非常貼合平臺的屬性及特征。
設計思考：
下拉刷新早就不是什么新鮮的東西了，幾乎所有的應用里都會有這個功能，通常都是一個持續的動效在告知用戶，頁面的數據正在加載，請稍等，市場上很多APP的刷新樣式都是大同小異。不過一旦做好刷新樣式，就不僅僅是告知用戶當前頁面狀態這么回事了，比如下拉刷新前后兩種狀態借助過渡動效連接到一起，讓用戶了解界面到底發生了什么改變，以及在刷新的過程中如何留住用戶繼續等待，避免用戶焦躁的情緒......
菜鳥APP在下拉刷新的過程中就使用了趣味性的動畫方式，首先通過空中出現的箱子緩緩落到地面，有趣又貼合產品整體的設計概念，用生動形象的情感化設計反饋平臺行為，為人機交互增加了趣味性和互動性，而且還可以緩解用戶在等待刷新過程中的焦慮感；其次，這種動效可用幫助用戶理解屏幕上發生了什么，也會讓用戶有所期待。
（看到這個動效，有沒有似曾相識的感覺“哇，那邊有空投，馬上要落地了，趕緊上車沖過去”）
09.「美團」匿名差評-降低商家對用戶的騷擾
產品體驗：
對美團的訂單進行評價時，如果選擇差評（1~2分），系統將自動開啟匿名開關以便于用于匿名評價，商家是無法查詢到匿名用戶信息的。
設計思考：
評價在商品頁面展示給所有用戶，對店鋪商品起著至關重要的作用。95%的用戶購物之前都會參考評價，好評會增加用戶購買信心；而差評可能會讓用戶放棄購買這個商品，甚至認為這不僅僅是劣質商品，更有劣質店鋪的潛在想法。其實有很多商家都有通過刷單來提升店鋪的銷售量和買家秀的質量，作假都尚且如此，何況是真實用戶呢？所以商品一旦有了差評，不僅會影響店鋪的整體動態評分和好評率，還會降低店鋪排名，很大程度上會影響其他用戶判斷及產品的轉化率，所以商家一看到差評就激動得馬上打電話和買家溝通改評價，低頭認錯，尤其是新店或者新品有差評時，不斷的聯系（騷擾）會給消費者帶來一定的困擾。
美團APP的訂單評價如果選擇差評，系統將自動開啟匿名評價，由被動變為主動，避免用戶因情緒化或忘記打開匿名，而遭受到商家電話的騷擾，通過補償被要求修改或刪除差評。當然，如果用戶不想匿名，關閉開關即可。匿名評價不僅降低用戶的困擾，還能提升商品評論的真實性，以協助平臺通過大數據對整體店鋪進行排名和評分展示，減少對后來消費者的誤導。
（杠精思維“這樣豈不是讓很多鍵盤俠來惡意給店鋪差評”。其實別忘了一個前提，就是必須要通過下單支付并等待訂單完結后才可以進行評價，畢竟大部分用戶不會刻意這樣做，任何產品不就是滿足80%以上的用嗎？）
10「釘釘」保護信息隱私的密聊
產品體驗：
從釘釘好友對話框的右上角進入設置頁面，點擊進入密聊，即可對聊天信息上一道鎖，保護信息隱私安全。
設計思考：
眾所周知，我們在聊天的過程中，信息很容易泄露，有很多窺探用戶隱私的程序，比如進入某些網頁會提示需要獲取用戶位置、讀取通訊錄等都屬于隱私。尤其是社交類型的應用，會有相關保護交流信息的安全措施。如消息撤回、閱后即焚、動態瀏覽權限等都有一定效果。
釘釘推出的密聊功能就是聊天信息的一道安全鎖。進入密聊后，消息禁止復制和轉發、頭像名字打碼防截屏、不可被錄屏、消息通知不顯示內容等，很大強度上保護交流信息的隱私，給用戶帶來安全保障。
（有人會問，用微信的人更多，為什么沒有密聊功能呢？從用戶群體和性質來分析，微信主打社交，男女老少通吃，基本上都是嗨聊、打發時間或平時的常規交流等；而釘釘主打的移動辦公，主流的用戶基本趨向于白領類型的群體，一般屬于工作交流，很多聊天都涉及到商業信息，包括一些文件和商業機密，誰都清楚商業機密泄露的嚴重性）
結語：
設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結能力，也為日后輸出優秀的作品當鋪墊，對自己的能力提升以及未來的職業發展帶來便利。
轉自：站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
可以說，每個項目因合作方式，人員習慣，落地形式的不同，所形成的規范是有區別的。所以，設計規范更應該是針對項目來說的，除非是問你Android或iOS這種已經廣泛適用的平臺級規范。不然是很難有標準答案的，回答更應該是一種思路的描述，比如你會如何定義一套規范、解決了哪些問題以及如何驗證這套規范真的助力了產品的體驗提升。
Don't make me think。大家都知道，好用得產品都是盡可能的減少用戶思考，不斷去貼近用戶的使用習慣。比如在iOS系統里想返回上一個頁面時，你會熟悉的去左上角找返回操作，但如果把返回操作放在右上角就會很不習慣；再比如對國內用戶來說，他們習慣正確按鈕用綠色，錯誤按鈕用紅色，如果你非要反過來制造所謂的差異化，用戶就會感到困惑，誤操作的概率也可能會大量增加。
其實網上很多設計規范，原理之類的文章，源頭都來自于這些大廠規范，想獲得一手信息，最好是自己去這些網站多看看。
這也就是我為什么不寫具體規范數值的原因，因為網上的資料實在是太多太詳細了，寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己，需要更多的主動性，這樣才能提升自己的學習能力和解決問題的能力。
2）針對自己要做的模塊，有針對性的找市面上大廠的應用作為參考，直接截圖標注，自己總結規律印象會更加深刻。
我開始做UI的時候就這樣學習的，不知道字體該用多大，間距用多大，顏色怎么用，就直接去找相類似的界面截圖參考，量它們的尺寸，吸它們的顏色，然后就這樣一步步的把規范經驗積累起來了。
比如從QQ的動態tab頁面中，我們可以借鑒到很多信息，比如列表的高度，列表左側的圖標尺寸和圓角，間隔線高度和配色，右側的箭頭大小和配色，列表文字的字號和配色，用戶頭像大小和結合的樣式，圖標與文字的間距等等。這些借鑒并非是抄襲，要你做的跟這個界面一模一樣，只是參考這里面的某幾個屬性然后結合自己的產品綜合運用，減少出錯。
發現了嗎？一個優秀的界面設計，上面的任何信息其實都可以拿來參考，就看你會不會用了。
文章來源：彩云譯設計 作者：彩云
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
結合理論落地項目功能，從邏輯層面思考問題。
節前有一位讀者問了一個關于單選與復選框樣式選擇的問題，大概是：
看到很多單選與多選的設計形式，多種多樣，以前看到「圓點+圓圈」就知道是單選，但是為什么現在單選與多選的設計樣式五花八門，都沒有遵守前面這種規范呢？這些組件的樣式到底該如何確定呢？為什么會有一種模糊不清，不知道如何使用的情況？
我發現許多人都有一個習慣，就是喜歡把某個具象的內容抽象化，把某個具體的問題概念化。
比如認為單選就應該是「圓圈+圓點」的形式，但似乎從來也沒有任何明文規定單選就必須是這樣的形式，只不過大家看得多了，就習慣認為是這樣，覺得就是這樣規定的，但其實并沒有過這樣的規則。
要知道，樣式常常根據功能在變化。比如功能優化了，樣式也需要進行修飾，并不是說這里有一個單選操作，就必須是「圓圈+圓點」的形式給用戶選擇。無論是在電腦還是手機上，都是一樣的道理。
這樣去處理問題，常常會把實際的業務問題給處理沒了，最后變成控件選擇的問題，而不是功能本身的問題。
比如普通的彈框，也是一種單選狀態，為什么不也改成下圖右邊這樣的呢？不就是操作路徑長，點擊起來麻煩，多此一舉，而且也不好看么？
即便真的在某個場景下，非得使用上圖右邊的單選形式，那么把樣式改成下圖這樣，又有何不可呢？
只不過常規的「圓圈+圓點」被使用得多了，大家形成了共識而已，但并不代表它就是一種標準。
如果有一個規則規定說，單選必須是「圓點+圓圈」，那么各位目前所設計的絕大部分組件都將不能使用，包括各類菜單或開關。比如下圖這樣的 action sheet 就不應該存在，而它的出現也是因為功能屬性、設備遷移、操作形式等內容的演化所呈現的結果。
這就是大家在處理設計問題時，習慣做一種概括，希望能復用于絕大多數場景而導致的錯誤情況，沒有落實具體問題具體分析的原則。
包括這位讀者的問題，也是希望能夠明確單選與復選樣式的選擇問題，以便往后能夠更有條理的使用。但可惜并不是這樣，從上述我舉的控件例子可以看出，單選形式早就已經變了模樣，而多數人并沒有注意到，還在認為單選與多選就應該是圓圈與方框的形式。
設計工具/方法論，確實是有部分指導作用，但不能作為絕對性或權威性的內容來吸收，應該辯證地去看。
而之所以在移動端延伸出許多自定義組件（形式并沒有遵循所謂的市場常見規范），正是因為業務與功能的多樣性導致的結果。
樣式的選擇不單單是看到的那部分，它還可以任意變化地處理，無論是單選或者是多選，不該被樣式套牢了。而它的決定因素應該是內容。
比如，iOS 鬧鐘的鈴聲選擇，有許多可選項。
但是因為內容的明確性，大家都知道，鬧鈴只能選擇一種，不會同時有 2 個鈴聲響起來（當然也可以這么做），所以即便鬧鈴的單選形式再如何變化，大家也都知道它是單選的，這就是功能決定了操作形式的例子。
類似于，再如何變化選擇樣式，無論是圓圈、方框，或只有勾，甚至是其他情況，大家也都知道它就是單選。
而之所以用勾或圓點表示被選中狀態，只不過是人的一種正常認知意識，即使改成三角形，只要能說清楚是被選中狀態，那也不是不行，只不過三角形沒有勾來得清晰罷了，而并不是因為有什么特殊含義。
所以只要梳理出符合自己產品的「單多選」樣式，形成規范即可。一些人會感到模糊不清的原因是它本來就沒有所謂的標準，又何來的清晰呢？
寫到這，想到之前有讀者問：什么時候該遵循設計規范，什么時候不該？
要知道，設計規范本身就是基于某個具體產品內容所構建的一個整合標準，為了規范化存在共性的功能形式。而對于共性的判斷也應該是從功能來定義的，比如返回都在左上角類似的，但是一定么？
單拎出來說什么時候該遵循，什么時候不該遵循，是很概念化的一個問題，不可能存在一個具體話術標準，說什么時候應該，什么時候不應該的。
如果我回答，符合規范中已有的形式的，就遵循，不符合的就不遵循。那就是一句典型的廢話了。但除此之外，我也就不知道如何解答了，除非你把規范和具體問題發給我，我可以跟你一起討論討論。
寫這篇文章的時候，看到一位朋友發的信息：
為什么手機刷新都喜歡下拉？因為神經科學研究表明，這個動作，更容易讓人產生對不確定性和驚喜的期待，原理和賭場的老虎機類似。
很多人都會習慣性給一些操作或交互形式做類似這樣的定義。
但這么定義是不對的，因為這相當于前面說的，把業務給解釋沒了，成了形式上的討論。而為什么會使用下拉、以及下拉會有什么情況，包括它所解決的問題，都沒有任何的分析。
比如，下拉之所以讓人上癮，并不是因為「刷新」本身。下拉只是一種交互行為，它的出現也只是為了解決早期刷新按鈕占據屏幕空間的問題，希望通過下拉進行刷新，以隱藏掉屏幕上的刷新按鈕，給屏幕留出更多可用空間。
而采用下拉是因為它更符合人的直覺 —— 往下拉能看到更多新的內容。
但是人之所以會對下拉上癮，并不是因為下拉這個行為，而是因為下拉能看到更多信息。下拉本身只是解決了屏幕空間的問題，而人其實是對內容上癮。
比如我在騰訊新聞里看 NBA 的資訊，通常只會直接上滑，看下面的內容，看完了就關了，不會進行下拉刷新。
因為在騰訊新聞里，下拉刷新的新聞并不是的內容，更多是今天或今天之前的信息，不刷新反而是剛剛更新的資訊，那么下拉刷新雖然也是刷新，但是刷新出來的內容是舊的，也并不吸引我，反而成了我要避免的操作，因為只要一下拉，的資訊就會被舊的資訊擠掉，要刷掉進程重新打開 App 才會重新再顯示的。
所以就不能簡單的定義說「下拉刷新是一個容易讓人上癮的操作」，而是要關注內容，如果刷新的信息都是舊的，或者是用戶沒興趣的，那即便刷新了，也不會引起用戶的注意，也更不可能讓用戶上癮了。
讀者：
呆呆，這個圖的卡片列表里，標題用省略號合適嗎？
（因為原圖涉及讀者項目隱私，所以重畫了個草圖。）
又是一個沒有業務背景的問題。不過這個問題比較簡單，可以展開來說一下。
通常，我們會在各類產品里面見到諸如「標題超出部分用省略號顯示」這樣的設計，譬如上面這圖。
于是，許多人在自家產品的設計過程中，遇到此類情況，被開發問到時，也會搪塞一句：文案要是超出就「…」顯示吧。
大多數遇到這種情況的，都是因為之前沒考慮好，才臨時想了這個解決辦法。
而很多時候，一些產品之所以用「…」顯示，并不是因為單純地文案溢出，可能是專門設計過的。
所以，如果簡單地認為「…」就是解決溢出而使用的方法，那就有問題了。
下面舉幾個例子。
有些產品，我們幾乎看不到列表視圖里的標題是有省略號的。
因為這類產品的目的就是讓用戶讀到完整的標題信息，對眼前的內容好做判斷，從而考慮是否點進去看詳情。
所以在設定的時候，界面中標題字數的規定，與界面樣式就已經提前規劃好了，可能在后臺設置就限定死字數，要求運營人員上新時要統一界面的展示形式。
這種情況下，一般就不會再有省略號的問題，譬如一些知識付費類產品。
比較典型的還有 TED 演講視頻的標題，在《設計體系》這本書里專門提到了這個案例。
對于 TED 來說，演講標題的信息優先級是最高的，所以他們寧可保留所有標題文案，也不對文案做截斷用「…」顯示。
因為對標題做截斷是很容易的，而難的是把一個演講主題提煉成一句簡短句子，所以他們為了展示更清晰的標題，寧可在界面上保留長標題，甚至為長標題的顯示而專門設計相符合的展示形式。
反過來，他們也因為這一點而確定了界面上標題字數的上限，確保文案不會超過界面顯示的最大臨界值。
包括一些資訊類產品，在標題上也會做限制，以滿足最大化呈現且不使用省略號。意思是：假設界面上文案范圍定了 30 個字符，那么配置的時候就必須 30 個字符以內把內容表達清楚，且必須完全顯示在界面上。
所以經常看到一些 UGC 產品之所以會限制標題字數，原因除了常見的標題不能過長之外，還有一點是為了在列表頁就能顯示完整。
各位在設計這類產品功能時，也要注意到這一點，而不是隨意說一個「字符不能超過 50 吧」。
而有些產品的內容列表，之所以頻繁使用省略號，它的目的是為了引導用戶點擊用的。
這類形式一般出現在營銷號發的文章里，多是營銷人員自己為了文章點擊率而做的。很少會有一款產品的所有內容都是這樣的，除非是一些內容產品，運營方是企業自己，為了讓產品上的內容有更多人點擊而這樣去設計，當中可能涵蓋了廣告，以此賺取廣告費。
不過這類內容的設計已經讓用戶開始反感，所以如果不是特殊情況，最好少這樣去做。
當然，還有同類型的，一般出現在頁面面積小且需要展示更多信息的集合類視圖，比如：
這種形式的設計，就是因為頁面上想展示的信息太多，以至于通過這類合集來展示某個模塊里的內容，營造出一種很豐富的感覺。
也就是利用「…」引導用戶點擊，表示信息沒有展示全，如果要看，就點開詳情，進二級頁面。
還有一些產品的省略號，純粹就是大家理解的，溢出就省略號顯示。
比如同樣是資訊或內容類，以文字為主的產品，雖然標題超出范圍用了省略號，但用戶基本也已經知道是什么內容（上面那個集合類視圖也是一種），且還有摘要引讀。
比如下圖：
這種標題字符限制在了兩行以內，多余字符用「…」展示，基本上已經是一句完整的話，能讓人大致了解這條信息的意思。并且還有部分摘要，已經足夠用戶判斷是否對它有興趣，如果沒興趣，直接刷走也無所謂。
包括一些電商類產品，用戶多以商品圖片為主要決策因素，商品標題作為輔助信息，優先級不高，所以標題溢出是否省略號顯示也無所謂。
這其中有一個特殊情況，就是有些產品的標題即不展示全，同時又沒有省略號，比如淘寶的商品搜索結果頁面。
因為這類列表實質是一個產品賣點集合的濃縮詞，不是完整的一句話，多余字符展示或者不展示，都不會有太大影響，所以也不重要。
當中我比較反感的還要數農藥了。
好友邀請的列表視圖里，常?？床蝗欠Q，因為好友會有游戲昵稱，微信備注會展示在游戲昵稱后面，以至于要點到游戲關系里先看全昵稱，再到匹配界面邀請好友。
既然已經區分了微信好友與游戲好友，為什么昵稱上面不也加以區分呢？
當然，經常玩的好友可能沒這個必要，畢竟頭像或昵稱都可以很快識別出來，但是偶爾一起玩的好友通過這樣的識別方式就比較難了。
這里就是簡單提一句。
通過上面提到的一些例子，以及不同場景下標題省略號的處理方式，相信大家對這塊的理解會比之前更深。
同樣，對于開篇讀者提到的問題，更符合的情況可能類似于知乎這種，有完整句子，所以標題是否省略號處理也就沒太大影響。
但具體的還是要結合業務詳情仔細考量。
而標題內容的展示是否要用省略號處理，優先要看這條信息的業務權重，以及是否會影響用戶決策。
所以各位在設計這類內容標題是否要用「…」顯示時，也要注意判斷自己的產品特性符合哪種類型，而不是隨意一句話，說「超出就省略號顯示好了」。
最近收到兩個問題，正好都與輸入框有關：一個是怎么判斷輸入框要不要放置清空按鈕；另一個是輸入框超過限制后，是禁止用戶繼續輸入，還是允許超出但會警告提示。
在一定程度上，這兩個問題的分析邏輯是類似的，所以放到一起聊正合適。
先看第一個問題：怎么判斷輸入框里要不要放置清空按鈕？
原問題是這樣的：
呆呆，我最近在優化公司的產品，遇到一個問題，就是 PM 想在聊天輸入框里加一個「清除按鈕」，可我覺得不太合適，但是說不出原因，只能說沒見過在聊天框里加清空按鈕的。這個問題要怎么判斷呢？
我們一般會在搜索、手機號輸入框里看到類似的清空按鈕，比如輸錯了就點一下，清空后再重新輸入。但是很少會在聊天框里看到清空按鈕，為什么呢？
主要是「時效性」…算了，這種概念詞用多了，發現現在人都不會講話了。說白話就是「要快」。
無論在登錄注冊還是搜索的場景下，除了內容本身之外，最注重的就是效率。
譬如有個數據大概是說，用戶登錄注冊花的時間超過某個范圍，轉化率就會對應逐步降低。而率，就是讓用戶能快速登錄注冊賬號，使用產品功能。所以設計師們會在登錄注冊的操作流程里抓住可提率的每個細節，輸入框使用效率就是其中之一。
搜索也是一樣，當用戶有明確目的使用搜索框時，關鍵詞就是用戶當下最關注的信息，如果輸錯，再一個個刪除，顯得麻煩，所以清空按鈕能在這里提高用戶的操作效率，甚至 iOS 的搜索組件也會自帶一個清空按鈕。如果是電商產品，率是能間接提高成交率的。
這里的輸錯，也有兩層意思，一個是用戶在輸入過程中發現錯字，比如登錄注冊時，發現手機號輸錯了，一個個刪除反而沒清空重新輸入來得快，因為刪了之后，號碼要重新背一遍，具體到某個數字，然后接著輸，特麻煩。
或者搜索內容時，發現有錯別字，刪除某個字再重新輸入，反而沒有清空重新輸入來得快，畢竟輸入法有串聯關鍵詞組的功能。
另一個是反饋的結果不符合用戶的心理預期。比如輸入手機號已被注冊，或者搜索結果不滿意要重新輸入關鍵詞，使用一鍵清空都是比較的。
而且輸入之后，系統需要給用戶呈現結果，如果結果不滿足用戶預期，還會存在短時間內多次輸入與清空的情況。那么，無論是錯字還是對結果不滿意，清空按鈕都可以非常便捷地幫助用戶一鍵清除上次輸入的字段，讓用戶更快速地重新輸入新字段，從而提高用戶的操作效率。
于是，我們會把這類場景下的「清空」說成是「一鍵清空」，主要是因為方便。而它的作用就是，在出錯的場景下，更快捷地給用戶重置的操作。
反過來，各位可能要說：那聊天框不滿足這個條件么？
我們接著看聊天輸入框。
我們知道，聊天輸入框的內容不是固定的，它是根據對話內容而變化的，用戶甚至需要花時間持續輸入并糾正自己的用詞，以及話術的準確度。過程中，如果輸入的內容多，而且又是即興的，耗費的時間與精力也是很大的，清空后也難以再恢復。
它不像登錄或搜索，固定的輸個數字串或關鍵詞，它是一段完整內容。雖然也會有某一句話或者某個詞輸錯的情況，但是一鍵清空的操作成本太低，對應著聊天框的高輸入成本，一鍵清空的存在與之并不相符。
于是，這里就引出了一個概念，叫做「輸入成本」與「修改成本」。
清空按鈕對應的，就是低修改成本，因為簡單點擊一下，就清空了。它所適用的場景就是低輸入成本的情況，也就是前面提到的登錄注冊或搜索 —— 輸入的內容相對固定，且可能反復。
對于登錄、搜索等指向性比較明確的輸入框來說，用戶在乎的是輸入和反饋的效率高不高。一鍵清空操作能帶來效率上的提升，而且操作后帶來的損失成本是很低的。因此，一鍵清空操作在這個場景下，對用戶來說是安全且的。
但是在聊天場景下，一鍵清空作為低修改成本的作用是不適合的，因為這時候輸入成本比較高。
用戶在聊天輸入框內表達清楚自己的想法是為了讓對方理解，達到交流的目的，這樣的內容是不確定的。而且在聊天輸入出錯情況下，我們有多種操作方式讓用戶重輸，比如鍵盤快滑定位，觸摸定位錯字等，都比一鍵清空重新輸入的成本低很多，而它所謂的「便捷性」在這里意義也就不大了。
于是乎，在衡量輸入框是否需要清空按鈕時，我們首先要知道，清空按鈕是低修改成本，那么如果輸入框的輸入成本比較低時，我們就會使用清空按鈕，來提高操作效率。而當輸入成本比較高時，一鍵清空的操作就顯得配不上這個輸入框了。所以，它在聊天框里就沒有存在的必要了。
包括其他非固定內容的輸入框，也是一樣的道理。
接著，延伸出第二個同學的問題：輸入框超過限制是禁止用戶繼續輸入，還是允許超出但會警告提示？
相信各位讀完上面的，再看這個問題，應該也能分析出原因了吧？邏輯跟上面的也差不多。
也看輸入成本，比如是固定內容的手機號，我們正常會禁止多余輸入，因為這樣用戶更容易判斷手機號是否正確。
如果是短長文，說明用戶可能是手打字超出限制，這時候如果禁止輸入，用戶不好在輸入框里做內容刪減或修改，也會打斷用戶的輸入流，畢竟還沒寫完就限制了，那得先刪掉前面的，再來思考后面怎么寫，會亂。而且如果是復制的，禁止輸入的話，超出部分就被截斷了，也要先刪減，再繼續復制剩余部分，非常麻煩。除非先在別處刪減到限制字數內，再復制過來，但這樣又增加了用戶的操作成本。
如果允許輸入但警告提醒，那么用戶就可以根據自己已經輸入完的內容做刪減修改。
所以對于這個問題，我們從這個視角出發，也能了解一二，就是通過適用場景與輸入成本來分析。
當然，以上所有內容更偏向于通用性說明，針對具體業務還需要具體分析。
1、從單復選組件反思功能設計問題
2、標題文案溢出使用「…」合理嗎？
3、怎么判斷輸入框里放不放清空按鈕？
文章來源：站酷 作者：呆總、
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天分享的題目是從品牌到UI，用設計的思想與這個世界和解；這里的我說的和解比較寬泛，大家可以理解成與客戶和解，也可與產品經理和解，也可以是與自己和解；
為什么選這個主題呢，原因是之前在網上聽一群人總是說互聯網走到了下半場，我和好奇，就去查這個下半場到底是什么，后來總算知道了，互聯網行業走到現在，已經從增量時代轉為存量時代，這個存量時代就是下半場，人口、流量、資本的紅利都逐漸收緊。
在這種情況下我的產品如何從同類產品中脫穎而出，或許增加品牌屬性是種方法，希望大家在聽完這個分享后，會有一些啟發。
在互聯網的增量時代，品牌設計與UI設計是兩條平行線，幾乎沒有交集，你做你的畫冊、slogan、包裝，我做我的網站、app、微信小程序，偶爾互相模仿，但也不是主流，畢竟兩者載體不同，目的不同，用戶也不同；
但是到了存量時代，影響用戶選擇的一個重要因素是「品牌」，一個產品要想從同類產品中區別出來，需要有個性，UI+品牌成為產品生命周期中重要的一環，下面我們看看如何在用戶心中植入產品品牌；
在在品牌植入方便，國外很多產品已經走在了我們前面，我們來看看谷歌，谷歌開發者大會上對 Material（ Design做了更新，我印象特別深刻的是Google對圖形語言單獨拿出來做一個模塊解釋它，它提取了圓形作為視覺DNA，并沿用到產品的每一個控件；
當然，如果我們想傳達我們產品的品牌理念，只在圖標組件里運用是遠遠不夠的。
誕生于1886年的可口可樂，每年都做產品運營推廣，不斷大量的重復它logo的弧線元素和瓶子的外形；
還有剛剛過去的雙11，從2012年11月11日開始的天貓節，現在是全球最大的B2C平臺，天貓貓頭運用也是滲透到全產品線里面去了，問大家個問題，大家有沒有人知道這個貓頭品牌是誰創立的？其實就是馬云的繼任者，現任阿里巴巴集團董事局主席張勇；講的有點遠了，我們再回到我們的主題；
這個圖很好的解釋了品牌與產品與用戶的關系，產品需要品牌牽引、支撐，現在互聯網產品越來越趨于同質化，UI 設計師已經不能局限于界面的表現層，更要了解產品背后的邏輯，然后以業務為依據設計品牌，以品牌為基準去設計產品。
第一章意義Significance，這個章節我們講講從品牌到UI的意義
第一個意義是對內：可以規范統一，協作
品牌本身就可以作為設計規范的一個重要指導原則，通過對配色、文字、圖標、控件等建立設計規范，可以有效減少設計決策時間，傳達一致的品牌調性。
第二個意義是對外：可以提高認知，溢價增值
如果一個產品失去了個性，不看 logo，單純看界面的話，很多時候根本分不清是到底是哪一家公司的產品。如果能夠關注設計細節對品牌的影響，肯定能更好地提高用戶對產品的認知，當你對一件產品注入了感情，同時也就為產品提供了營銷推廣的立足點；也可以這么說，設計師創造的情感性價值，直接實現了產品的溢價增值；
第二章感知Perception
有位設計界的前輩講過，品牌知名度其實就是信任度的體現，他說世界上最成功的品牌就是宗教，這里沒有詆毀任何宗教的意思，但是宗教建立的品牌信任度，遠遠超過了任何商品；
這里我們從用戶的角度出發，看下用戶是如何從產品感知品牌的；
在設計產品的時候常常會發現我們覺得理所當然的地方，用戶往往沒按我們想的方式去使用。那是因為設計師通常有整體觀，站在金字塔頂端去規劃一個產品的設計，而用戶則恰恰相反，在金字塔底端往上爬，他們不知道這個金字塔多高，也不知道從哪一面開始最好爬，所以會遇到各種問題。
同樣，用戶對品牌的感知由低向高的，用戶通過各種場景接觸到產品，再通過產品的視覺呈現、功能體驗、信息內容等感知品牌，最后在心中形成印象，構建品牌信念，從而影響下次產生相應需求時對產品的選擇；
可以聯想下我們的購物體驗，是不是總是從同一個地方shopping，這就是購物APP品牌價值已經使你已經形成了習慣選擇；
作為設計師，我們需要充分理解品牌內核，由內向外將抽象的品牌內核轉化為具象的視覺符號，再延伸到用戶與產品的各個接觸點，從而將品牌理念植入用戶內心。
第三章融合Integration既然上面我們講品牌和UI最終要走的一起，這一章我們講他們如何在工作融合
第一步，明確定位，提取關鍵詞，建立情緒板
當代廣告教皇，美國奧美廣告創始人大衛.奧格威說，“最重要的決定是如何定位你的產品?！?/span>
在大師的指引下，我們發現首先找到品牌定位，定位自己的細分市場和目標用戶；
2.圍繞品牌定位提取關鍵詞；
3.建立情緒版，將抽象的概念轉化為可感知的視覺；
第二步，提取視覺表現元素，并設計融入品牌定位。我們重點從顏色、圖形、紋理、字體四個方面講一下。
有時甚至不需要任何圖形，單憑顏色就能產生對某一事物的聯想。
現在UI設計流行的極簡風，我們發現這些應用采用極簡化設計的同時，圖標也變得更鮮艷，更引人注目，說明這些產品也在尋求一個平衡，在 UI 設計變得極簡趨同的同時，仍然能保留核心的品牌基因。
顏色在 UI 中的表現有 logo、導航欄底色、圖標、文字、可視化圖表、插圖、按鈕等等。 
現在UI設計流行的極簡風，我們發現這些應用采用極簡化設計的同時，圖標也變得更鮮艷，更引人注目，說明這些產品也在尋求一個平衡，在 UI 設計變得極簡趨同的同時，仍然能保留核心的品牌基因。 
圖形
我們知道顏色是抽象感知，圖形是相對具象的表現方式。
一旦某個特有的圖形在用戶心中形成烙印，用戶見到相似的圖形組合都能往該圖形聯想，從而關系到圖形背后所代表的品牌，這也是很多企業做品牌升級的時候 logo 都越來越簡潔的原因，因為這樣能有效降低用戶的認知負擔，提高品牌認知。
圖形通常從 logo 本身提取，并在 UI 中延伸應用。比如馬蜂窩、百度網盤、京東做品牌升級的時候都不約而同地從 logo 中提取了一個代表微笑的弧度，傳遞友好、溫暖的品牌形象。
飛豬提取了 logo 中「豬的發型」用于搜索框，韓國的電商品牌11街也將 logo 延長作為界面中的搜索框。
紋理
在 UI 設計或者運營推廣運用中，通過提取品牌圖形元素，再運用分形、排列、重復、平鋪等設計手法形成品牌紋理。
我們看看京東的啟動頁用 Joy 的外形旋轉做成的紋理背景；
國外著名的聊天應用 Whatsapp，在聊天頁的背景用涂鴉插圖紋理做背景；
還有騰訊文檔的啟動頁、登錄頁用了漸變的菱形作為紋理，輔助品牌的視覺表現。
我們還在聊圖形復制變形的時候，國外的UI設計已經細化到了十分驚人的程度
例如UBER 在做的品牌升級，設計師出來將每個國家富有代表性的圖形提煉， 然后重復運?平鋪，形成帶有地域特色的?何紋理，運?到閃屏和線上線下的產品當中。
字體
字體是最容易被忽視的設計元素，很多人會認為 UI 中的字體用系統默認的就行。其實字體對于產品氣質的體現著很大的作用，很多品牌都把字體設計當成品牌基因中重要一部分。
字體的選擇需要契合產品功能特點與品牌調性。
微信讀書使用了方正宋三，讓人閱讀起來有種文字秀麗的浸入感；每日故宮使用了方正清刻悅宋體，字里行間隱含著歷史古韻，滲透著文化氣息；澎湃新聞使用方正準雅宋體，體現其作為新聞產品「專注時政與思想」的嚴肅一面。
英文字體也可以使用契合產品氣質的英文字體。比如常被用作數字字體的 Din、經典的襯線字體 Playfair Display、?歌御用的 Roboto 等。
第三步，融入品牌觸點
這里我解釋下品牌觸點這概念，是指一款產品中品牌信息接觸點，是決定用戶對產品品牌印象的關鍵；
我們看幾個案例，
啟動頁：知乎的啟動頁采用 slogan 加 logo 的方式來體現品牌，這也是絕大多數應用的做法；每日故宮啟動的時候伴隨著一聲鐘聲，頁面會有一個光線流動的動畫，極具儀式感，一下子就把用戶帶入故宮莊嚴的氛圍當中。
圖標：東家的每一個圖標都融入了印刷式字體的元素，體現其匠人的品牌基因；mono 則直接把產品名稱「 M O N O」用于導航欄。
插圖：Dropbox 的兒童風格的插畫與 B站 的二次元插畫都非常契合品牌特征。
品牌觸點式多樣的，除了上面的啟動頁、圖標、插圖之外，還有預加載圖、loading、動效、新手引導等等都能體現品牌觸點，這些品牌觸點，都是講述品牌故事的關鍵載體，幫助產品從同行業中脫穎而出，這里由于時間的關系我們就不展開講了，有興趣的同學，我們可以單獨交流哦
互聯網行業已經過了拓荒時代，行業沉淀下了許多有價值的知識，也有許多非常好的 UI 組件和規范文檔可以直接使用；
另一方面，很多公司對于 UI 設計在整個產品生命周期中的價值，普遍覺得不是非常重要，UI 設計部門只是一個業務支持部門，起不到主導作用。而如果 UI 設計師做的工作還是停留在把產品的原型文檔變漂亮，肯定是不行了。
設計師不僅需要對產品業務和商業有深入了解，更重要的是對于品牌在整個產品鏈路中的應用與把控。
我們需要走出舒適圈，主動去挖掘更深層次的設計價值，提升自我價值。
誠然改變一個大的設計生存環境是非常漫長的過程。要不停的嘗試，就像不停的迭代做新產品一樣，不能因為一兩次的失敗打消掉設計的積極性。
設計的終極最后就是和解 Compromise
開篇我提到了與世界和解，分享下我是怎么和這個世界和解的，我相信三句話，可以跟這個世界和解
再次謝謝大家聽我叨叨，如果大家喜歡，下次我們可以叨叨點關于設計的更有意思的事，謝謝
文章來源：tob.design 作者：無名大師29aef85c40
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
無論是從個性化內容還是用戶體驗上來說，為界面內容選擇正確的選擇類控件可能比想象的要難，全文10,856字 ，預計閱讀20分鐘， 建議收藏。
本文主要研究選擇控件的設計細節，雖然是很常見的控件設計，但也有非常多需要注意的地方。能提煉總結常見事物的一般規律，這本身就是對自己已有知識理解加深的過程。
對數據進行便捷選擇
單選框(Radio button，也叫“單選按鈕”)—— 用戶從一組選項中必須選擇一個選項。
復選框(Checkbox)—— 當有一個或多個獨立選項時，用戶可以選擇任意數量的選項，包括零個、一個或多個。
切換開關(Toggle Switches)—— 兩個互斥狀態（打開和關閉）之間的可視切換。
選擇標簽(Choice chips)—— 是按鈕選擇的一個替代方案。至少兩個選項，用戶可以選擇一個或多個。
列表選擇(List Select)——可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。
下拉菜單(drop-down menu，也叫“下拉按鈕”)——按鈕包括一個單箭頭指示符，單擊后會顯示包含選項列表的菜單。
單選按鈕的命名（Radio）來源于舊收音機上用于頻率和預設電臺之間切換的的實際物理按鈕。當一個按鈕被按下時，所有其他的按鈕都會彈出，使被按下的按鈕成為唯一處于“按下”狀態的按鈕。
后來被用于錄音機，盒式錄音機和可穿戴音頻播放器中，90年代初-用于“播放/暫停/快退/快進”控件。
UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研發公司，幾乎涉及到我們現在每天使用的計算機技術，包括：以太網，圖形用戶界面（GUI），面向對象的編程，計算機鼠標，激光打印等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設備。
單選框用于對信息的選擇，允許用戶從一組選項中必須選擇一個，通常以2-5組顯示，單選框應互斥。單選框的外觀一般是一個空白的圓洞，旁邊則通常有文字標簽。標簽的用途除了描述之外，還可以作為操作區域，當用戶選中標簽，所應的單選框就會被選上。已選上的單選按鈕一般會在圓洞內加上一小圓點。單選框僅顯示合理和正確的選項。
單選按鈕的狀態為打開（實心圓圈）或關閉（空圓圈）。
單選框一旦選上，除了選擇另一個選項之外，便沒法取消。所以有時會有空白的選擇、重置或默認選擇。
每個單選按鈕的標題應清楚地描述選擇它的效果，通常句子結束沒有標點符號。此外，考慮使用下拉菜單，會比顯示所有選項占用更少空間。
復選框是一種按鈕類型，可用于打開或關閉選項。當存在選項對象時，復選框允許用戶從一組對象中選擇一個或同時選中多個和全部項目。每個復選框都是單獨的個體，因此選中一個復選框不會影響其他復選框的取消選中狀態，全選除外。
復選框使操作在兩個相反的狀態，操作或無操作之間進行選擇。復選框在屏幕上顯示為一個小方框，選中時，它被認為是“開”，選中的復選框包含復選標記，正方形將充滿復選標記。；關閉時，則被認為是“關”，它是空的矩形框。復選框一般放置在可選信息左側(圖片、視頻以宮格形式表現的頁面除外）。
復選框可以用作單個元素，也可以組合成一個列表或嵌套式的層級列表以從中選擇多個。如果需要將選擇項分成幾組，則使用多級復選框。
混合狀態，僅在多級復選框時出現。如果使用復選框組，全局啟用和禁用多個子復選框，當這些子項并非都處于同一狀態時，父復選框應顯示為混合狀態（用短劃線表示）?；旌蠣顟B常在嵌套層級等對多個對象一同操作時使用，以代表該選項下的子選項沒有被全選。當半選的復選框被點擊時，它便會變成平常的復選框，而它的子選項亦會跟隨全選或取消全選。
如果存在多個復選框時，考慮使用分組標簽來進行描述。并將標簽的基線與組中的第一個復選框對齊。通常，當復選框垂直列出時，更容易區分它們的狀態。通常，復選框應左對齊，當您需要表示層次結構，例如當父復選框的狀態控制子復選框的狀態時，請使用縮進格式。
開關是兩個互斥狀態（打開和關閉）之間的可視切換?？傆幸粋€默認使用，撥動開關即立即生效。它是在打開時顏色是可見的，關閉時出現無色或灰色。
移動端中切換開關一般有交互動效，PC端沒有。
開關與其他選擇控件最大的區別是：開關操作后，程序立即執行相關操作。而其他選擇控件一般用在表單里，僅反映當前的選擇狀態，如果要執行操作并生效，需要點擊額外的提交按鈕。
注意:
不要為切換開關創建層次結構，避免使用開關控制單個細節或次要設置。開關的層級結構這在視覺上更容易分散注意力，而且會造成一種錯誤的印象，即所有的子選項都是開著/關著的。所以禁止濫用開關按鈕。
開關具有比復選框更明顯的視覺效果，因此它控制的功能應比復選框更為強大。如，可以使用開關打開或關閉一組復選框設置。因此它控制的功能應比復選框更為強大。如，可以使用開關打開或關閉一組復選框設置。
注意加載狀態
如果開關所執行的操作需要考慮加載狀態，例如開關切換狀態不是瞬間（短時間）完成的話，開關則需要顯示加載狀態。
另外一種目前比較流行的加載方式是視覺上加載成功，服務器隨后加載成功。用戶操作開關之后，開關視覺上立即響應改變，然后再向服務器相應改變，中間會存在一定的時間差，這樣能帶給用戶更流暢的體驗。
避免在開關內添加說明標簽。關于開關的打開或關閉，可以通過視覺樣式讓用戶很明確的感知。額外的提供文本標簽描述開關狀態是多余的，還會使界面混亂不堪。
單一的 icon 通過顏色或圖形的變化來表示開或關的狀態。常見的且體驗比較好的設計方案是將開關樣式設計為當前狀態樣式。如下圖相機界面內HDR與AI功能的關閉與開啟狀態。
當然也有其它情況。最典型的就是視頻的播放暫停開關，他們表示的就是操作后的狀態而不是當前狀態。
名稱變化，名稱變化指的是開關按鈕依賴于其名稱的變化告知用戶開關的當前狀態和操作，如：關注與取消關注，已關注與已取關。名稱變化的開關由于語言的模糊性，仍然造成了部分歧義。我們可以在操作后加入其它提示來消除歧義（如：toast 提示）。
是否統一操作狀態倒不是關鍵，關鍵是我們是否能夠讓用戶理解按鈕相應的意圖，不做出混亂的選擇便可。
通常用于切換不同的視圖，或者在表單中作為單選組件使用。一個分段tab通常會由2-6個單選項，可以是圖標和短詞，它適合導航形式，被設計成一個水平或豎直的容器進行單選。一組選項卡中的所有內容應該根據較大的分組原則進行分組，每個選項卡的內容與其他選項卡的內容都互相獨立。
可以包含下拉列表的選項和使用翻頁。
固定的選項卡應該只包含有限數量的選項，并且保持選項的位置不變，有利于用戶記憶?？蓾L動選項卡用于有很多選項或選項數量可變的情況，但不推薦使用。
優點：將所有選項都擺在一行或一列，對空間的利用率能達到最佳，設計樣式也可以做到非常直觀，漂亮。
缺點：不大適合處理長詞，短語，如果要將這些內容放在選項中，就須精簡文本。水平空間非常有限，尤其是移動端，即使是少量的選項，有時候你仍然要精簡文本。
Tab選擇時，不要加載整個頁面，只有選項標簽及其內容區域應更改。交替切換標簽時，用戶應該感覺自己在同一位置。不要在選項卡內容中包含支持滑動手勢的內容，因為滑動手勢是用于在選項之間導航的。例如，避免在選項卡中包含一個可以拖動的地圖，或者一個可以滑動刪除的列表。
當功能不可用時，顯示空狀態，加入情感化提示，不要刪除選項卡，確保所有選項卡都啟用。
空狀態：是用戶在使用產品時某個界面無法顯示的時刻，即沒有其他元素。良好的空狀態可以讓用戶知道正在發生的情況，發生的原因以及該怎么做。
這是四種常見的空狀態類型：
首次使用——新產品沒有內容可以顯示時，例如打開新注冊的印象筆記時會遇到這種情況。
內容被清除——當用戶完成類似清空消息或收件箱等操作后，會出現一個空白的屏幕。
出現錯誤——產品由于網絡問題造成離線時，會出現空狀態的使用。
無結果——如果用戶進行搜索，但是查詢內容為空時會發生這種情況。
具有3個選擇項的Tab標簽，我們能明顯區分選中和未選中狀態，應為Tab標簽是單選控件。但是，如果只有兩個選項，又是矩形按鈕的選擇項，則很難區分當前選擇是哪個，哪個為選中狀態？我自己某段時間一直默認顏色填充形按鈕是選中狀態，但經同事一提，一陣猛驚，那另一個是否為選中狀態？在兩個選項中存在選擇疑惑，我們如何確定狀態呢？
因此，我努力在統一風格的提前下，找出固有的特征，增強選中狀態。這個大家如果有更好想法，歡迎留言。
標簽選擇通常用于要從3-10個選項中進行多次選擇操作情況，它們最適合用一到兩個簡短的單詞或數字。它們設計的形式一般是一個個按鈕，通過背景色來區分“選中”和“未選中”。由于不存在2個選項的情況，所以
面對多選標簽時，面對多個選擇項的彼此堆疊，需讓讓用戶知道他們可以選擇多少個選項。添加輔助說明，既可以明確它是多選，又可以規范的最大選擇項；選項過多時進行標簽分類。
優點：節省空間，標簽堆砌在一起的具體樣式是由文本長度決定的。它們給人的印象是輕量的，有趣的。
缺點：這種形式與tab選項形式有一樣的弊端，都不能很好的處理長詞。不建議對文本進行折行或者調整大小，會不方便用戶閱讀，同時使用兩行以上的標簽會使得每個標簽非常難以快速掃描。
其他樣式：用圓形或其他形狀來表示一個個標簽選項，比較重要或更受歡迎的選項形狀更大，用戶選中多個圓形就是選擇了多個選項；也可以在常見的按鈕中加入圖片的元素，這種的話樣式新穎，但要注意選中時的文字圖片的對比，文字是否具有可見性，適當加上文字選中效果。
Tab標簽和多選標簽
選項數量是tab控件和標簽控件之間最大的區別。一個連續的背景幫助用戶理解他們必須要選擇一個，而一個分離的背景表明他們可以選擇多個。
列表選擇控件包含選擇按鈕，容器框，項目列表和標簽。用戶可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。列表框可能會滾動，具體取決于它包含的項目數和可見區域，更復雜的列表框允許用戶通過將項目從一個列表框移動到另一個列表框來調整容器框的大小，重新排列項目列表以及進行選擇。
優點：
交互成本低：列表框不需要用戶單擊任何內容即可在進行選擇之前顯示其中的選項（但是，如果有太多項，它們可能需要用戶滾動列表）。
增加了可見性：一次查看多個選項的能力可以加快決策速度并提高選擇準確性。列表選擇為內容提供了更多的空間。它們易于閱讀，可以容納多文字，文本可以換行，還可以增加圖片。但是，應避免在多列列表框中進行水平滾動。
用多選雙列表框，用戶可以控制項目的顯示順序，并獲得所選項目的清晰概述，這在列表框包含多個選項時很有用。
缺點：
空間：他們往往很占用空間，不適合用在垂直高度受限的頁面中。
陌生：用戶可能不知道如何立即與列表框進行交互-特別是，如果多選列表框中未包含復選框，則他們可能不知道如何選擇倍數。這就是為什么將復選框包含在多選列表框中非常重要的原因，除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。
用戶可能無法一次看到所有選定的選項：如果在可見區域中看不到更多的可用項目，則用戶可能無法同時看到所有選定的項目。為避免此缺點，請在列表框上方將所選項目顯示為標記，或在不可滾動的列表中突出顯示所選項目。
可以根據選擇類型進行分類，這些列表框形式都可以滾動。
用戶只能從互斥選項列表中選擇一項。最初的單選按鈕被用于列表中超過6個選項時，被設計成垂直方向，圓形輪廓，并擺在列表項的開頭，這就是列表單選?，F一些設計中，選中被設計成在列表選項外加一個描邊框形式或帶有背景色，用以節省水平空間。
這種類型的列表框包括使多個選擇更加明顯的復選框，設計樣式上，web通常是在列表開頭處設計一個正方形描邊框（復選框）。
這種類型的列表框由兩個列表框組成，兩處的列表框內容可以相互拖拽。比如左側的列表框已選中項目可拖拽至右側列表框，同時支持表內上下拖拽更換順序。
點擊“ 右箭頭”按鈕可將左側的列表框所選項目移動至右側列表框。多選雙列表框實際運用較少。
這是是一種彈出按鈕，單擊后會顯示包含選項列表的菜單。下拉列表以最簡單的形式包含四個主要部分：一個容器框，一個朝下的箭頭按鈕，一個項目列表和一個標簽。用戶可以單擊向下箭頭以顯示互斥項的列表，從中只能選擇一項。標準下拉菜單是針對我們所理解的“下拉”這個動詞。在激活狀態，當你點擊文本輸入欄的地方時，它會打開一個菜單。列表項僅在單擊向下箭頭后出現，選擇一個項目或在下拉列表的外部單擊將其關閉。
下拉列表的優點：
為用戶提供最佳選項的功能，默認情況下處于選中狀態。
淡化替代選項和更改：由于下拉列表隱藏了其他可用選項，因此它們很好地淡化了替代選項并過分強調了進行更改的能力。（這在默認值可以滿足大多數用戶的情況下，并且其他選項可能對非專業用戶來說是危險的或令人困惑的情況下是有利的。）
熟悉：下拉列表是大多數用戶熟悉的選擇機制，因為下拉列表在Web和本機應用程序中得到廣泛使用。
缺點是需要點擊項目列表中的選項，包括：
列表包含過多的內容，可能會很麻煩地滾動。
當用戶習慣于捕獲眾所周知的值時，它們會使用戶放慢速度。例如，當輸入生日或信用卡到期日期時，與下拉列表進行交互相比，在直接鍵入內容通常更快，更容易。
忽視：由于表單內容非常緊湊，因此用戶可能會意外忽視表單，網頁和應用程序中的下拉列表。
容易消除：不小心將光標從框中移開會關閉下拉菜單，不得不重新開始選擇過程。
當長型下拉菜單的設計不是特別理想時，你可以把列表分組，這樣搜索起來更加簡單。
可編輯的下拉菜單在菜單上方顯示當前選擇的菜單項，用戶可以輸入菜單中未列出的值。您可以將用戶可以輸入的值的類型限制為某些類型。例如，設計軟件中輸入字體大小時，系統會默認一些數值，同時支持你編輯修改。
為了更方便用戶的填入，支持字詞搜尋，填寫一半時，就會出現帶有關鍵詞名稱選單。在選項很多的情況下，這個功能變得格外實用。
下拉菜單多選是復選框的延伸：用戶可以在同一個輸入區域選擇多個。這件控件用的比較少。
這種控件我一般在多個對象進行對比時才使用，如選擇多個公司比較他們的能耗水平與用電規模，由于公司字段比較長，在查看選中狀態時需注意容器能否充分顯示選擇的字段，在導航菜單中會明顯擁擠，在表單中使用相對自由。如果可以的話，篩選中盡量避開這種類型。
將站點，應用程序或系統的所有不同部分合并為一個長列表，該列表進一步細分為子類別，并可以從導航欄中訪問，例如下面華為云的下拉列表，大型下拉菜單用于顯示大量的選項，分類，數據集或其他類型的相關內容組。
任何偏離你所設計的平臺標準的行為都會給用戶帶來額外的認知負擔。
選擇控件在操作過程中必須更改其狀態/外觀，以便用戶知道是否能選中，是否被選中。添加這些小的視覺反饋，以使用戶正向的理解，但是差異化設計又不能喧賓奪主。
默認就是選擇器的開始狀態。向用戶表明，可對該選擇控件進行操作。
選擇按鈕置灰顯示，用戶將無法與選項進行交互。除非產品規則指定，否則很少會遇到這種狀態。
像按鈕一樣，選擇控件應向用戶指示它們是可交互的。通常，通過突出顯示鼠標懸停項目區域的背景來突出顯示，吸引用戶的注意。觸摸設備沒有懸停狀態。
當用戶按住鼠標/手指點擊，選擇控件處于被點擊的狀態。
列表多選支持批量選擇和清除
使用列表多選，一次全選或取消已選擇的多個選擇項毫不費力。
下拉列表狀態
下拉列表在按下狀態時會打開選項列表，還有種常見做法是懸停狀態時直接打開選項列表。我更喜歡第一種，第二種在我沒有明確操作的情況下，下拉列表就自動打開的這點讓我比較困惑。
列表選擇狀態
列表選擇控件在管理文件時，只有通過按下選中選項才能進行編輯性操作。
點擊按鈕進入批量編輯狀態，狀態未選擇時，操作按鈕置灰。按下/勾選列表選項后，操作按鈕點亮，展示已選項的數量，即對當前勾選操作的反饋。點擊操作按鈕，進入對應操作編輯流程。
一般都是用戶沒有進行選擇，單擊“提交”按鈕后收到失敗反饋。
在實際的使用過程中，選擇控件有默認、禁用、懸停、按下等不同狀態，雖然這些狀態看起來很多，但是這些狀態涉及到實際交互的需求和不同場景，并且是實現可靠交互的基礎。
這個針對于單選框控件
如果用戶不想做出選擇，那么應該提供一個中立選項。為用戶提供一個明確的方向，中立選項比錯誤選擇要好。
在單選框的選擇時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。例如，要考慮到用戶不進行選擇的情況，這時需要提供一個“無”的選項；給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都不會選，就需要提供一個“其它”選項。
單選框所有選項應該滿足“互斥”的原則，因此選項之間要避免存在交集，選項覆蓋要全面，不能出現遺漏。例如，在一個年齡的選擇設置上，如果提供的選項為“20-30歲”和“30-40歲”，那么如果用戶剛好30歲該如何選擇？
這個針對于單選框，Tab切換，下拉列表
單選框最好有一個默認選項，當單選框把選項默設置為為選中時，一旦選擇了一個單選按鈕，用戶就不可撤銷，無法返回默認狀態；而默認選中一個則可以防止這類問題，一開始就向用戶傳遞信息必須要在這組單選項之中選擇一個。
下拉菜單中默認選項優與請選擇，如果根據權限或使用頻率能定位到適用于大多數用戶的選擇項時，就不要默認為“請選擇”，而是使用默認選項，這樣做可以降低交互成本和節省用戶的時間和點擊數。
如“國家”和“語言”字段。在這種情況下，根據權限IP，默認選項是合理的，絕大多數用戶也不會更改選項，因此繼續選擇就會很煩人，耽誤時間。
帶有默認選項的單選按鈕組合是給用戶的強有力建議——甚至是推薦。默認選項可能會引導用戶做出最好的決定，并在接下來增加他們的信心。尤其是默認選項可以輔助用戶，并讓用戶向著產品所希望的方向傾斜。
在用戶需做出復雜決定或處在不熟悉領域時特別有幫助。當標題和描述都很陌生的時候，默認選項可以引導用戶在各個可能未能理解的選項里做出最好的決定。
在產品上總想說服用戶做出對產品有利的動作。默認選項就會引誘用戶去走特定的道路。常見的例子就是活動頁面，對于忍痛離開按鈕低調置灰顯示，對于留在頁面按鈕高亮顯示。
當然也有許多時候是不帶默認選項的：
不知道用戶行為或想要什么
選擇是否會冒昧，如性別，稱呼等
防錯，保證用戶能夠看到選項并動手做出選擇，比起用戶會出錯并事后給出警示強
如果希望用戶只選擇一定數量的項目。要強制執行此操作，如果用戶單擊的次數多于所選數量，則他們最早的選擇將會被最近的選擇替換。同時注意需要加上輔助說明。
選項排序會影響用戶操作，因此需要遵守一定排列原則。
你應該將所有選項按邏輯順序擺放，比如按被選中可能性由大到小，按操作難易度由簡單到復雜，按風險由小到大，將最安全的操作放在前邊，列表選擇一般按照信息時間排序，由新到舊。
選項的順序可以說服用戶進行選擇，就像前面說的默認選擇項一樣，他們可能只是因為第一個選項在列表中的位置而選擇了第一個選項?？梢暂o助用戶，也可以讓用戶向著產品所希望的方向傾斜。
一般情況下，左側對齊排列發揮最佳效果，標簽選擇除外。豎直排列相對于水平排列而言，容易讀取和定位，每行一個選項足以，可以提高用戶的瀏覽效率并減少錯誤。
但是豎直排列會占用較多的垂直空間，如果垂直空間受限，可以考慮水平排列。水平排列的時候，要注意每個選項之間的間距盡量大一點，以清晰的傳達選項對應哪個標簽。
移動端更多的情況是左側標簽對齊，右側按鈕對齊，二者與頁面留出相同的邊距。垂直屏幕占比小，常用于呼出選擇、開關等有選擇操作的表單標簽。
交互區域要適當大。單選框的面積較小，用戶在點擊的時候會比較困難，尤其是在移動設備上，易誤操作，可以通過擴大點擊區的交互區域來提高易用性。復選框和單選按鈕一般都很小，點擊或點選會很麻煩，可點擊區域中應同時包含按鈕和標簽，增加操作區域的面積，方便用戶操作。
列表選擇中可以點擊容器框所在行區域來切換行對象的選中和未選中。
每個選項都要配合相應的文字標簽來指示該選項含義。
最好在每個區域上提供同類型的標簽，這樣可以給用戶一種視覺穩定性的感覺。同時盡量保證每個文字標簽用語的表達的一致性，避免否定詞，不要出現有的用名詞，有的用動詞的情況。
不要在同一組標簽中混用文字和圖標
一個分段就像是一個按鈕，按鈕內當然可以使用文字或者圖標代表其含義，但是請不要在同一個Segment Controls中混用文字和圖標，避免讓用戶覺得混亂和不一致。
文字標簽需要簡潔明了，一般使用短語而不是句子，因此不需要以句號來結尾。如果需要解釋說明，可以在選項下方使用單獨一行文字說明。僅體現每個個體之間的差異，不用重復選項之間相同的部分，將重復部分提出來放在整個選項的上方。
輔助提示很好地補充在消除歧義上的不足，但我們也需要合理使用，進行克制，否則就會造成不必要的視覺噪聲。
暗示指的是用戶在操作選擇前，給予用戶的提示，用戶根據這些提示可以判斷當前狀態以及操作后狀態。
比如在界面風格模式，主題色，導航模式切換中，用戶可以通過當前界面的樣式判斷當前是是什么模式，以及選中其它選項后會產生什么結果，如下圖（來源螞蟻設計語言）在選擇圖標中就給予相對應模式的提示。
下圖，白天模式與夜間模式，用戶可以通過當前界面的樣式判斷當前是否已經開啟了相關模式，從而判斷撥動開關后是什么結果。
環境暗示的優勢是我們不需要其它設計和反饋告知用戶當前狀態，可以通過選擇對象和當前界面環境給予直觀暗示。
由于按下開關控件后立即執行操作，如果操作比較危險，請在危險操作后加入二次彈窗確認，告知用戶當前狀態以及潛在風險，避免造成嚴重損失。
當用戶操作后，提示框氣泡反饋告知用戶，讓用戶知道自己是觸發了開啟還是關閉。彈窗提示強度大，使用在一些危險、重要的反饋中，提示框則使用在一些輕量的提示中。
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明。下圖是手機信號設置和省電設置相關的選擇，開關的主體是名稱，但是下面的一行輔助文案很清晰地傳達了開關開啟后的后的狀態。
并不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信號告知用戶當前狀態。界面設計與交互中，我們也仍然可以使用聽覺和觸覺來消除開關的歧義。
在安卓微信聊天列表中，選擇一行聊天對象長按，手機會輕微振動一下，表示已點擊，給予觸覺反饋，同時展開的多個選項可進行選擇操作；手機在關閉電源時，手機會卡擦一下，給予聽覺反饋，表示已關閉屏幕，而不需要眼睛盯著屏幕關閉。
我們很容易陷入到特定控件的中，所以我最好是從整體上開始思考。然后做出最佳決定，決定使用哪種選擇設計最有利于一致性、差異性和層次感，控件的高度，寬度，樣式設計和選項數量都是至關重要的因素。我們可以從被選擇對象是單選還是多選出發，來確定使用哪種選擇控件，可以根據下圖情況選擇，當然由于使用場景和內容的不同，請選擇性參考。
單選按鈕認知成本低，它能可見所有選項并讓用戶容易做出選擇。
單選框，用戶能夠很快看到有幾個選項以及每個選項是什么，而不用點擊或其他操作再去發現這些信息。讓所有選項都可見，使用戶可以方便地進行比較，這樣可以減少認知負荷，幫助表單更加透明。
涉及到選擇項與內容組之間以及在相同層次結構中進行導航時，使用Tab標簽。不要將標簽用于無關的目的地，也不要加載選項卡的整個頁面，只有選項卡及其內容區域進行更改。
如果選項的數量超過6個時，應考慮使用下拉列表中或列表單選，因為單選按鈕太多，也會令人不知所措并引起混亂，用戶無論如何都無法記住所有的選項。
下拉列表簡潔。更多適用于可預測的、類似的或增量的選項(年份選擇 )。數量較多且相類似的選項選擇用下拉菜單整合。
如果屏幕空間有限，請使用下拉菜單。如果不是，請使用列表框。使用下拉菜單，可以使用默認選項，并淡化其它選擇。
選擇項標簽短小且一致時，使用復選框，可以方便地進行比較，這樣可以減少認知負荷，幫助表單也更加透明。
列表多選一般應用于6個以上選擇項進行多選的情況，數量更多出現將翻頁或滾動情況，需要告知用戶已選多少條數據，并在選中選項時出現相關操作。
選擇項數量在3-10之間，標簽不能過長，考慮使用多選標簽。多選標簽它們給人的印象是輕量的，有趣的。
切換開關是一種數字開關。任何由切換開關觸發的效果應立即生效。如果不是這樣，最好用單個復選框替換切換開關。
多選標簽不能很好的處理長詞。不建議對文本進行折行或者調整大小，因為會不便于用戶閱讀，使用兩行以上的標簽會使得每個標簽非常難以快速掃描。
你應該防止出現很難看清選擇哪個控件的情況（確保按鈕和文本標簽的間距），可以考慮使用選擇標簽或拉大間距以此來在視覺上清晰地分隔選項。
本文介紹了多種選擇類控件，從用戶使用選擇類控件的角度闡釋了模式定義，涵蓋了大多數錄入場景。選擇類控件本身也需要不斷進行迭代、優化和拓展，以適應更多的應用場景。后續我將持續關注，希望本文的能幫助你。
歡迎留言糾正，感謝閱讀。
文章來源：tob.design 作者：小龍
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
亞馬遜作為一個知名的電商平臺，它的成功背后卻有一個很難讓人理解的設計邏輯：成功的設計不一定是美觀的。為什么會這么說呢？本文將從四個維度展開分析，希望對你有幫助
編輯導語：B端產品往往由于業務體量龐大，導致信息復雜，同時對業務的性的要求很高；服務于B端的業務，不能夠出信息錯誤，填錯一個信息，就會引發巨大的問題。本文結合筆者自己的工作經驗，總結了大型B端業務中表單的設計方法，供小伙伴參考。
表單是信息添加、錄入的通用形式；其作為獲取用戶輸入的重要交互方式，也承擔著將問題和答案進行配對的角色。
設計原則是任何一種解決方案的指路燈，它們體現解決方案應包含的基本目標。
針對互聯網表單設計，我倡導的原則如下：
我們先看看表單的結構，表單主要由5部分組成：
標簽根據標簽與輸入域的位置關系，分為：左對齊、右對齊、頂部對齊、內聯標簽、圖標標簽和浮動標簽。
每種標簽樣式都有自身的優點與局現性，根據不同的場景選擇適合的標簽樣式，能提高用戶閱讀效率，同時還能降低信息填寫時的錯誤率。
1）頂部對齊：根據Matteo Penzo 發布的關于標簽放置的文章表明：采用頂部對齊的標簽樣式，瀏覽表單所需的時間最短；如果希望用戶能快速掃描填寫表單，頂部對齊的標簽是一個不錯的選擇。
頂部對齊的結構，使得能放下更長的標簽；但對于縱向空間是一個挑戰，當填寫信息過多時，表單就會很長。
2）左對齊：左對齊標簽，文字開頭按閱讀視線對齊，符合人們的閱讀習慣，是有利于閱讀的。
瀏覽表單所需時間最長，但是緩慢完成率并不總是一件壞事——如果表單要求敏感數據(例如提供駕駛證、身份證、銀行卡號等，可以故意減緩用戶的填寫速度，來確保填寫的準確性）。
左對齊的結構需要更多的橫向空間，因此在移動端的呈現上可以是個問題。
此外，在屏幕空間有限的情況下，也會一定程度上限制了標簽和輸入框的長度。
3）右對齊：右對齊使得標簽和輸入之間的距離固定，有明確的視覺關聯。
對于簡短的表格，右對齊的標簽可以有很快的完成時間；但由于標簽長短不同，左邊緣參差不齊，整體掃讀表單的時候不容易了解全部信息。
與左對齊類似，在屏幕空間有限的情況下，也會一定程度上限制了標簽和輸入框的長度。
4）內聯標簽：內聯標簽由于它對空間的占比很小，往往運用于移動端的界面設計中；但如果在交互上處理不好，會有很大的缺陷。
內聯標簽是用作提示性文字，來告訴用戶應該填寫什么內容，但用戶在填寫的適合，它就會消失；因此用戶無法仔細檢查他們是否寫下了所要求的內容，這增加了錯誤的可能性。
另外一個問題是：用戶可能會把占位符文本誤認為預填數據，因此忽略它（正如尼爾森諾曼集團的眼動追蹤研究所證實的）。
5）圖標標簽：圖標標簽是內聯標簽的一種演化形式，在一定程度上緩解用戶的困惑和自我懷疑的心理。
但就圖標而言，用戶需要時間來反應它所代表的意思——若表意性不強或者并不是常見的圖標樣式，用戶就要思考和猜測它的含義。
此外，輸入項一多，還得記憶那個圖標所對應的意思。
6）浮動標簽：用戶在輸入時，內部標題（提示信息）進行浮動位移，即節省了空間，提示性信息依舊在。
但相比其他幾種標簽樣式來說，需要一定的開發成本。
關于標簽樣式的選擇
輸入域是表單的核心主體，包含了文本框、選擇器、開關、復選框、單選框、步驟條、滑塊、上傳、標簽頁等控件（按類型分）。
選擇適合的控件樣式，能在一定程度上提高表單填寫的效率。
在輸入域中，存在多種控件樣式，那么在設計產品的過程中，我們該如何選擇，如何取舍呢？
以下是我在日常工作中的一些摸索，也包括借鑒前輩的一些經驗。供大家參考。
1）文本框
文本框包含了單行文本框和多行文本框。
針對單行文本框的設計建議：
a. 選擇適合的大小，它的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。
如下圖即一典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理的話，容易誤導用戶對所需輸入金額的判斷，造成極大不安全感。
b. 采用字段掩碼，自動匹配特定數字的輸入格式。
例如：電話、身份證、銀行卡等；按照7加減二法則，根據用戶的記憶結構來最大化提升閱讀體驗。
c. 彈出鍵盤應與需要輸入的文本類型相匹配（移動端）。
d. 涉及到金額輸入時，當用戶輸入的金額超過千時，出現最高分位提示，每多輸入一位，最高分位隨之增加。
e. 文字輸入最好有自動補全、自動建議功能，減少不必要的文字輸入，減少出錯。
例如：填寫地址欄通常是表單中最成問題的部分，像地址自動填充（基于用戶的定位和輸入提供準確的建議）的工具使用戶能以更少打字量完成輸入。
f. 有限制輸入時，給予用戶明確的提示，增加用戶感知，減少出錯率。
知識擴展：什么是7加減二法則？
早在19世紀中葉，愛爾蘭哲學家漢米爾頓觀察到，有一個神奇的7±2效應；意思就是人們的短時記憶的信息量是7個，可能會上下浮動2個。
針對多行文本框的設計建議：
使用可拉伸的文本框比固定框更好，從使用體驗講，可變化的文本框使頁面整體效果更統一。
固定文的文本框當輸入文本超過其設置的寬度，會出現內滾動條，當頁面上出現兩個滾動條時（大頁面的滾動條），在使用操作上會帶來一定的混亂。
2）選擇框
包括下拉列表、選框、開關、日期選擇器等。
對于選擇框有如下幾個建議：
a. 避免設置默認值：除非您認為大部分用戶將選擇該值，尤其是必填字段。
為什么？
因為你可能會增加錯誤，用戶會快速掃描表單，所以他們可能會跳過一些已經有默認值的字段。
但是這個規則不適用于智能的默認值，也就是根據用戶的信息設置的默認值；因為智能的默認值可以使表單更快，更準確地完成。
例如：根據定位數據預先選擇用戶所在的國家/地區。
不過，請謹慎使用。
b. 當選項很多時，提供檢索功能。
c. 提示信息要明確，要讓用戶明確自己選擇的是什么。
3）單選框與復選框
a. 按一定的邏輯進行選項排序，例如根據發生的可能性、難易程度、風險大小來排序。
b. 選項應該易于理解，容易區分。
c. 盡可能提供默認選項。
4）關于控件的選擇
a. 選擇框優于輸入框。
任何高密度的操作，都會引起用戶的不適；因此，在輸入項的選擇時，用選擇來代替鍵盤輸入。
相較于輸入框，選擇操作步驟少，相對來說效率較高；同時，用戶用思考輸入值，也不用承擔輸入錯誤要重新輸入的風險。
用戶可以通過選擇項，清晰明確的知道有哪些值可以選擇，對于一些無關緊要，或者用戶較難理解的輸入項，可以預制默認值，可以照顧到各階段的用戶。
b. 單選框與下拉選擇框。
單選框較為適合選項較少（少于五個），同時選擇項之間較為類似，需要強調或對比時，可以優先考慮單選框。
另外，當選項能見度和快速響應優先時，也建議優先考慮單選框。
因為相較于下拉選擇，用戶可以通過展示出來的選項，直接選中目標選項，提升輸入效率。
下拉選擇框較為適合選項較多（超過五個），有默認選項或者選擇項之間有較大差異，同時下拉選擇，最好不要引起隨后輸入項數量以及頁面的變化；否則下拉選擇的收起以及頁面的變化，易引起用戶不適。
若選項過多，超過二十個，最好引入模糊匹配以及一定排序規則（首字母排序、數字排序等），方面用戶提前預知選項的大致位置，或通過模糊檢索找到相應的選項。
5）關于必填項
大多數情況下，所有字段都是必填項，只有幾個字段是可選的，一般用“*”標記必填字段。
但星號并不適合所有類型的用戶，記得之前客戶問星號是什么意思？
它是頁面中的標簽還是描述中的標簽；同時，并且紅色會從用戶方面引起負面關聯，因為紅色表示錯誤。
為了避免這種誤解，可采用文本框內暗提示。
它也是一個比較清晰標志必填項的方式，并且還很節省空間，也能在一定程度上起到視覺降噪的作用。
提示信息可以分為引導性提示（幫助文字、輸入框提示、錯誤提示信息）和反饋性提示兩種。
這里主要想講講錯誤提示的設計：
1）關于錯誤提示的最佳位置
Javier Bargas-Avila和Glenn Oberholzer對表單驗證的研究發現——在表單頂部顯示所有錯誤信息，會給用戶的記憶造成較高的認知符合，會強制用戶回憶每個錯誤輸入框中的錯誤消息。
錯誤信息提示在輸入框行間顯示是減少記憶認知負荷的有效方法。
它可以幫助當場識別錯誤而不是靠回憶錯誤，縮短反應時間，提高表單填寫效率。
因此，錯誤信息提示與錯誤的字段鄰近放置可以獲得最佳性能。
下面來看一個簡單的例子，如下圖：
當我們在錄入客戶信息時，假設填寫錯誤手機號碼，按照上面的論述，錯誤提示可以最直觀的顯示在這4個位置。
哪一個位置是最佳位置呢？
答案是：右邊。理由如下：
a. 錯誤信息提示右邊，符合人們從左到右的閱讀習慣；用戶視覺路徑自然流暢，很大程度上減少了用戶的精力和視覺工作。
放在左邊則恰恰相反，同時左邊與用戶期望相違背，因為左側放置更高優先級的元素，是我們的直覺。
但事實上用戶需要專注于糾正他們的輸入，因此輸入框應該是更重要的元素。
b. 對于上邊的錯誤信息提示，有著更高的認知負荷。
當標簽頂部對齊時，錯誤提示和輸入框中的提示這兩個文本靠得很近會產生視覺噪音，用戶注意力被分散，很難專注于其中一個，并且可能混淆它們。
c. 放置下邊的錯誤信息提示，雖然不符合從左到右的閱讀習慣，但它確與自然的從上倒下的閱讀流程相對應。
手機屏幕缺少水平空間，把錯誤信息提示放置在下方是個不錯的選擇。
雖然它可能會增加用戶閱讀文本時的認知負荷（與類比上邊的錯誤信息提示），但可以通過將它們隔開足夠的間隔來防止這種情況。
綜上所述，如果是web端請選擇放置在右邊，如果是移動端則放置在下邊。
當然，如果開發時間有限，都選擇放置下邊也可以，方便適配。
2）幫助信息
有時候需要幫助性信息，來輔助用戶完成表單填寫。
當文本簡短的時候，可以直接放在改輸入框的附近。
當文案過長的時候，就需要做氣泡框——獲取鼠標焦點，則展開信息，失去焦點則消失（在氣泡展開時，切忌勿擋住input輸入框）。
也有些產品是將幫助信息放在頁面頂部，如果是針對全局幫助性信息，則可以采用這種方式。
如果只是針對某個元素提醒，則應將兩者放在一起，讓用戶知道當前處于什么地方，在針對什么進行引導、輔助。
在復雜業務表單設計中采用單列布局，大家有沒有遇到過類似的問題，例如：
針對這些問題，我們團隊從自身的業務出發，對復雜業務表單布局進行了相應的探索。
首先，我們根據下圖的規則對復雜業務的表單布局進行多方案的實驗：
方案一：采用4列布局，標簽頂對齊。
那為什么標簽不采用右對齊呢？
四列布局，頁面已經很擁擠，加上標簽長度長短不一且最大長度也無法確定（用戶自定義），所以放置采用了標簽頂對齊。
總體上來看，縮減的長圖并不理想。
方案二：三列布局，標簽右對齊的方式。
由于三列布局，頁面空間較大，嘗試著把標簽右對齊，總體上達到了縮減表單長度的目的。
但字段若出現換行，則頁面信息模塊是混亂的。
根據CXL研究所的發現：單列表單比多列表單完成得更快一些。在這項研究中，參與測試的人完成單列表單的平均速度比多列表單快15.4秒；多列布局雖然縮減了表單長度，空間利用率也提高了，但整體的填寫效率降低了，這與表單設計原則相違背。
同時從開發效率來看，單列成本較低（多列需要做響應式）；從業務承載上看，單列擴展性更強，適合復雜多樣的業務場景（多列適合交單一的場景）。
綜上，最后還是采用單列布局。
面臨的問題該如何解決？
我們團隊重新審視了客戶的這些反饋：空白區域過大、留白過大、表單太長、我看不全、不知道什么時候可以填完等等。
我們嘗試把這些問題翻譯成：我無法預知表單的填寫內容，我想要是把空白的地方也利用上我是不是就看全了整個表單。
如果是這樣，用戶的本質述求就是想要掌控感。
對現有的單列布局做了以下幾個處理：
感謝閱讀！本文給表單設計提供了一個基本的指南，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。
文章來源：人人都是產品經理 作者：@Nick
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：如今，谷歌可以說是科技領域最大、最具有影響力的公司之一。正因為如此，它們的數字產品設計會對整個行業產生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（用戶界面&用戶體驗）設計指南中，設計師們提到了10條原則，不管是iOS還是安卓系統都同樣適用。在這篇文章中，作者從這10條指南出發，加上自己的經驗和相關案例，在設計方面為大家提供一些建議，希望對大家設計產品有幫助。
這里的聲音特指“Hero sounds”，用于襯托一些喜慶的、重要的高光時刻，它們常被用來激起用戶的情感，或烘托一種喜悅的氣氛，從而塑造產品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds：慶祝用戶進行了某項操作；歡迎用戶使用新的應用程序或體驗；確認用戶成功使用某款產品?！豆雀杪曇粼O計指南》
聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到，Hero sounds出現的次數不應該頻繁，否則無法突出其重要性。通過在同樣的環節提供同樣的聲音，久而久之用戶會將這種提示音與成就感掛鉤，從而增加對產品的粘性。如每成功更新一次應用程序就會出現慶祝的聲音，或者每次待辦事項標記為完成后就會出現慶祝的提示音。
不管我們是否注意到這一點，我們所聽到的產品的聲音與自己的感覺都是相掛鉤的。無論是手機發出的“叮咚”的消息提示音，還是MacBook的廢紙簍在清空時發出的揉紙的聲音，都在某種程度上影響著我們的情緒，也幫助我們更加了解用戶界面上發生的一切。
觸覺可以和聲音配合使用，也可以單獨使用。舉個例子，在手機黑屏的時候，觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時，觸覺應該強有力、傳達愉悅的情緒。——《安卓觸覺設計指南》
除了聲音之外，觸覺設計（如震動）也是一種刺激感覺的好方法，可以為用戶提供更加完整的體驗。用戶可以通過觸覺提示來嘗試、學習使用某一款產品。在有了不同的觸覺體驗后，我們將會對產品的某些功能有更加深入的了解。
舉個例子，如果某個用戶通過APP進行付款，但在付款過程中出現了錯誤。這時候APP會進行一連串緊張、短促的震動，對用戶進行錯誤反饋。當用戶熟悉了這種震動模式之后，下一次再感受到這種震動，就會立刻知道付款出現了問題。
產品設計師很容易忽略聲音和觸覺這兩個板塊，而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果，可以為用戶體驗錦上添花。
圖片來自Material
動圖可以增加用戶的好感，在互動中為用戶增加個性化體驗，也可以表現品牌獨特的風格?！豆雀枋謩菰O計指南》
動圖是我自己設計的產品Confetti中一個非常重要的因素，這是一款運動追蹤APP，是為那些追蹤自己生活習慣的用戶設計的。在設計這款產品時，我希望可以為用戶創造出一種滿足感，鼓勵他們培養好習慣。在這款APP中，我大量使用切換功能，通過不同的手勢，界面或進程可以平滑過渡，使用起來非常便捷。當一個好習慣完成時，還會出現彩屑動畫飛舞的，加強用戶的滿意度。
簡言之，動圖可以應用于不同的場景，通過過渡和變化的吸引用戶。
動圖可以強化兩種元素之間的聯系，實現快速切換，迅速解決特定的任務。動圖可以讓用戶專注于眼下最重要的事，不被其他因素所干擾?！豆雀枋謩菰O計指南》
在2020年，你的產品可以在一秒之內激怒用戶。正如塔拉斯·斯凱斯基（Taras Skytski）在《用戶體驗設計中動畫使用的終極指南》中指出的那樣：“眾多研究發現，界面動畫的最佳速度在200到500毫秒之間。這一數字是通過研究人類大腦運行機制所得出的。100毫秒及以下的動畫因為速度太短而無法被識別，而超過1秒的動畫則會造成一種延遲感，讓用戶感到不舒服?！?/span>
通過動圖及產生的動畫效果（如切換）可以改善用戶體驗，同時保證可以迅速找到需要的版面，而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間，又不能改善體驗，那么這種環節就沒有必要存在。
圖片來自Bribble｜制圖Elena Petkovska
我們或多或少都有這樣的體驗：打開一個界面，里面充斥著太多文字和太少的圖像。在用戶體驗設計中，展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產品，而是希望通過圖像對一款產品進行直觀的視覺理解。
你所選擇的圖像應該能夠清晰地展示產品特點，不管是用戶自己上傳的圖片，專業攝影師的圖片，還是插畫風格的圖片，它們都應該能直觀展示產品外觀，反應產品的特點?！豆雀鑸D像設計指南》
APP里的插圖和所有的視覺元素一樣重要，好的圖片可以讓用戶界面更加生動，使用戶體驗更加完善。恰當的圖片還能展示品牌風格，成為無聲的“故事講述者”。
我們應當有目的地使用圖像，作為總體內容的補充而非替代。照片或者插圖最好能夠傳達足夠的信息，如產品外形、風格，APP的用途，狀態等。媒體界有這么一句話：一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網站上找到高質量的圖片。
圖片來自Material
用戶界面設計中應該關注產品的像素密度，讓界面可以適應不同的屏幕。——《谷歌像素密度設計指南》
像素密度（PPI）是用來衡量每物理英寸的像素數。另一個常用的單位是DP（Density-independent pixels，有時候簡稱為DIP）。像素密度=屏幕寬度或高度（以像素為單位）/屏幕寬度或高度（以英寸為單位）。
在設計界面時，我們不應該只關注像素，還應該關注不同設備的像素密度。這樣可以讓我們在做設計時保證元素適當縮放，以適應不同屏幕的尺寸。
舉個例子，我們現在有一個按鈕素材資源，大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示；在一個320ppi的屏幕上它就會擴大成400 x 100 px，相當于原始素材的兩倍大。
通過以上例子我們可以了解，在像素密度不同的屏幕上，素材呈現的狀態是不一樣的。在實際應用中，素材可以會被放大三倍甚至四倍，如果素材不夠清晰，就會在拉大后虛掉。這就需要我們在選擇素材時格外謹慎，嘗試在不同設備上打開并檢查。
素材密度如何適應屏幕尺寸？舉個例子，iPhone XS Max的屏幕是414 x 896 pt，注意這里的尺寸是物理尺寸pt，而非像素。如果以像素為單位計算，那么它的屏幕是1242 x 2688 px。所以當我們為iPhone XS Max設計應用產品時，我會首先考慮用414 x 896 pt的素材，然后在輸出素材時將其乘以3。
圖片來自Material
離線狀態可以讓用戶知道這款應用程序沒有連接網絡。如果你的產品有一些功能需要聯網使用，你最好能向用戶明確顯示連線狀態。——《谷歌離線設計指南》
離線訪問功能是設計師經常忽略、對用戶體驗影響卻非常重要的一環。雖然有些功能離線也可以使用，但是在能聯網的時候，最好還是主動提示用戶，推薦他們連接網絡。
如果有可能的話，要提前告知用戶下載相關信息，以便脫機訪問。最常見的例子就是Spotify等音樂應用程序，它允許用戶下載歌曲，以便在沒有網絡的時候也能繼續聽歌。
假如你的產品不像Spotify或者Netflix那樣需要下載具體內容，你可以發揮創意來設計在線、離線兩種模式。
谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子（在谷歌瀏覽器連網的過程中，離線畫面會出現一只霸王龍，按空格鍵或者向上的箭頭就能控制霸王龍——譯者注）。這個小游戲填補了用戶等待連線的時間，將消極體驗轉變成了積極體驗。
我希望這份設計指南可以為你提供一些想法。除了谷歌的設計指南之外，我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網站找到關于用戶界面和用戶體驗的設計指導，在這一領域進行更深入地探索。
文章來源：人人都是產品經理 作者：Danny Sapio 譯者：Michiko
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶行為分析，認識用戶滿足用戶最直接要求為設計中心
用戶行為是指用戶在使用產品時的行為，針對網站而言，就是用戶在進入網站后所有的操作。網站用戶行為分析，就是在獲得網站王文量基本數據的情況下，對有關數據進行統計、分析，從中發現用戶訪問網站的規律，并將這些規律與產品目標及策略相結合，從中發現目前網站存在的問題，為進一步改善網站，滿足用戶需求，提升用戶體驗提供依據。
常見的用戶分析內容包含以下幾個方面內容：
（1）用戶在網站的停留時間、跳出率、回訪率、新用戶、回訪次數、回訪相隔天數；
（2）注冊用戶和非注冊用戶，分析二者之間的瀏覽習慣；
（3）用戶所使用的搜索引擎、關鍵詞、關聯關鍵詞和站內關鍵詞；
（4）用戶選擇什么樣的入口形式（廣告或者網站入口鏈接）更有效；
（5）用戶訪問網站流程，用來分析頁面結構和網頁覆蓋數據；
（6）用戶在頁面上的網頁熱點圖分部數據和網頁覆蓋圖數據；
（7）用戶在不同時間段的訪問量情況等；
（8）用戶對于網站的設計及字體配色的喜好程度等。
通過研究發現，80%的用戶僅僅使用了軟件20%的功能，而那些沒用的功能不僅浪費開發時間，也使軟件更加難以使用。一個成功的軟件應該是簡練精干的，可以單獨職能化的化解決的單個問題，要以滿足用戶最直接要求為 i設計中心。
很多網站往往為了滿足不同用戶的需求而增加功能，增加的功能必然需要再界面中用視覺呈現出來，這就會使網頁內容越來越多，很多的功能摻雜在一起，如果不經過過濾，必然會違背原來閱讀的初衷，所以每一個功能的增加都要慎重。
用戶對于互聯網功能需求也和對軟件的功能要求一樣。既喜歡簡單的，也喜歡復雜的。而且用戶的體驗需求也會隨時隨地的發生變化。這里的復雜不是指很難用、流程超級復雜、容易出錯的用戶體驗，而是指豐富的功能。
首先如何讓用戶體驗更簡單呢？當然將復雜的功能去除是最好的，如果實在無法去除某個復雜的功能，那就應該將其隱藏。因為大多數情況下，不常用的功能要比經常使用的功能占據更多的空間。
真正好的用戶體驗其實是給用戶所需的任何功能，為用戶設計一款“復雜”的產品，并將這款產品從表現上簡化，讓基礎功能操作簡化，給擴展功能保留使用入口即可。這個設計思路最具代表性的例子就是Microsoft Office和Adobe
系列產品。
用戶的需求并不是一層不變的，短期內用戶會因為某種強烈的需求要一個產品。隨著市場和行業的不斷發展，用戶對于一個產品的評價也會隨之發生變化。例如肯德基剛進入中國市場，被人們認為是一種的象征，小朋友以吃一次肯德基為榮。隨著經濟條件的發展，人們對于肯德基的體驗就完全不一樣了，熱量過高，不利于健康。這是一個很典型的對一個產品評價的變遷的過程。
用戶的期望值會因為因素而發生變化，有的來自外部的環境，有的來自產品自身，有的來自用戶成長。這些影響期望值的因素都會相輔相成的影響。有的時候不是我們的體驗或者產品變了，而是用戶發生了變化，所以用戶體驗的設計，除了要考慮產品本身以外，還要考慮用戶所需要的。
用戶通常會根據個人喜好做事，這就是習慣。習慣沒有好壞之分，關鍵要看根本的是什么。從用戶體驗的角度來說，任何產品都可以分兩種：遵循現有用戶習慣的產品和顛覆用戶習慣的產品。
在設計網站時可以在技術上創新，在業務模式上改變，也要在以下幾點上遵循用戶的習慣。
生活和文化背景是必須要遵循的習慣。想去顛覆或是磨滅一個群體甚至是民族的習慣，基本上會付出慘重的代價。例如使用紅色表現喜慶，白色表現悲傷，是中華民族幾千年的一種傳統習慣。如果想去改變這個習慣，使用其他顏色肯定起不到好效果。比如：可口可樂官網就是用紅色做的主色調，而紅色也與“可口可樂”品牌主色調相統一，點綴少量黃色，非常符合中國的傳統文化，也更容易使中國人接受。
在設計網站頁面時，還要考慮到網站用戶群體的基礎屬性，例如年齡層、身體承受力等?？梢詫㈨撁嬷械奈淖趾蛨D片做放大處理，使老年人可以清楚的看到內容。比如一些老年網站，會采用大號字體，強對比色便于閱讀，而且在設計的時候也不會使用過多的色彩，雖然整體視覺可能顯得簡陋不夠豐富，但是充分的考慮了老年人人群的特點。
人在評定事情好壞的時候，通常喜歡以自我為中心，所以用戶體驗設計時，必須滿足用戶這種需求。使每個用戶可以體會到以“自我為中心”的優越感，這樣用戶就會成為最忠實的客戶。例如很多人沉迷于網游就是因為在現實生活中會受到各種各樣的限制，而無法實現真正的以自我為中心，而在網游的世界里卻可以完全實現。
在設計網站時，設計師通常會根據網站內容把網站劃分為不同的區塊，然后在分別進行美化。設計師在思維定勢中 自我感覺良好，一旦突破了思維定勢就會有新的收獲。作為用戶體驗的設計師來說，有下面兩個方面可以顛覆。
在設計網站時，有很多頁面都具有獨特性，例如注冊頁、登錄頁和搜索頁。這些頁面用戶只會訪問一次或者幾次，而且這些網頁本身也是在網站發展的同時逐步完善的。所以，在用戶體驗的設計中，這些習慣就可以顛覆的。設計師可以根據個人的喜好對這些頁面進行設計、優化和修改，而不會影響用戶的習慣。
在網站設計中需要結合當前的潮流趨勢和的技術來表現網站，這樣才能給用戶帶來全新的體驗。頁面中流暢惡化便捷的交互應用，可以給用戶帶來良好的體驗。
尊重用戶秀感可以快速讓用戶接受網站，同時也會由于尊重了用戶的習慣而減少產品對用戶的刺激，會使得用戶很難成為網站的忠實用戶。另一方面，如果不尊重用戶習慣，用戶可能很難馬上接受。所以在用戶體驗設計時，要根據網站具體情況自我權衡。
最好的辦法就是在網站核心用戶體驗不變的基礎上，增加新功能、設計風格逐步變化、進行網站整體融合。
轉自：站酷-忻蕓
藍藍設計的小編 http://www.syprn.cn