一個好的產(chǎn)品可以降低用戶犯錯的概率，并且能有效提升失誤被挽回的效率。通俗點說就是幫助用戶避開操作過程中的坑，即使用戶掉進坑里，也能引導他們很快的爬出來。魔鬼藏在細節(jié)里，因此就需要設計師要將細節(jié)方面做到位，必須要考慮到容易被大家普遍忽略的部分。 

 1.主次按鈕

之前有去參加一個設計方案研討會，效果圖由投影儀投到墻上展示，設計風格是簡約風紅灰白三色搭配，設計者結(jié)合PPT講解過程中，次要功能按鈕始終模糊不清（如圖1）。也許當時光線較強，灰色的次要按鈕與白色背景的對比較弱，但外界因素不能成為設計師的擋箭牌，用戶在使用產(chǎn)品的過程中，會由于易讀性差而犯錯誤。主按鈕和次按鈕固然要分清主次，但是也不能忽略主按鈕和輔助按鈕之間的對比度。如圖1、圖2所示：  

                            

                        圖1                                                                圖2    

                  

說到這里不得不提另外一個細節(jié)，大多數(shù)情況下，在進行有一定風險的操作時，會有模態(tài)框提示用戶必須要確認一下，那么問題來了。確定按鈕、取消按鈕的位置規(guī)范怎么定？

           

2. “確定在左，取消在右”or“確定在右，取消在左”

讓用戶遠離危險操作

首先我們要先考慮下企業(yè)或商家的訴求和希望的是什么，“確定/保存”等代表完成當前任務并進入下一環(huán)節(jié)，“取消”代表拒絕不接受當前操作，企業(yè)和商家肯定是希望能夠引導用戶沿著他們設定好的路徑去操作，避開危險操作，并且最后能夠順暢的完成企業(yè)、商家設定的目標，保證盈利。從視覺角度和用戶操作習慣分析，居左遠離用戶，相對而言，居右更靠近用戶。所以“取消”按鈕在左邊，“確認”按鈕在右邊，是否更加符合產(chǎn)品的理念呢？

古騰堡法則

古騰堡圖指人們在瀏覽頁面的時候，人的眼球移動規(guī)律趨向于從上到下，從左到右。左上角是視覺的第一落點區(qū)，而右下角是視覺最終落點區(qū)，右上角和左下角則是視覺盲點。用戶的視覺中心往往在頁面的左上方，而結(jié)束瀏覽時視線往往落在右下角，所以合理利用這個法則可以幫助用戶更好地獲取內(nèi)容并采取行動。

“上一步”與“下一步”的操作習慣

對于確認與取消這兩個操作來說，確認意味著執(zhí)行該操作，即進入到下一步；而取消按鈕則是放棄該操作，即返回到上一步。    按鈕的位置，映射到用戶閱讀和瀏覽從左到右的順序，右邊是前進，左邊是回退。而按照現(xiàn)有一致性的布局，“上一步”一般放在左邊，“下一步”則放在右邊。根據(jù)上一步和下一步按鈕的邏輯來說，確認在右邊，取消在左邊，更加符合用戶的心理預期。

3. 7±2 法則

4月初接到了頂級導航菜單改造方案的需求，需求方提出在原有的8個節(jié)點的基礎上另外增加3項內(nèi)容，并且后期根據(jù)需求可能還會增加，當時產(chǎn)生了極大的困惑，直到了解到被應用在交互設計上的神奇數(shù)字 7±2 法則：

1956 年喬治米勒對短時記憶能力進行了定量研究，發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項信息塊，在記憶了9 項信息后人類的頭腦就開始出錯。PC 端導航或選項卡盡量不要超過9個，應用的選項卡不會超過5個。盡量使得網(wǎng)站導航少于9個會讓用戶對于網(wǎng)站的內(nèi)容一目了然，更快捷也更加有效。

如果導航或選項卡內(nèi)容很多，可以用一個層級結(jié)構(gòu)來展示各段及其子段，并注意其深廣度的平衡，如圖4-參照阿里云。 

 圖3-最初方案 

 圖4-阿里云

4.帶下劃線的超鏈接

之前做頁面設計時，會涉及到鏈接的內(nèi)容，也見過其他案例，當時有點兒不能理解，為什么鏈接文字的內(nèi)容和普通文字已經(jīng)用顏色分開來，還要額外的增加下劃線，從而影響視覺效果，知道前段時間讀到了一篇文章《走心的技巧！為色盲用戶提升網(wǎng)頁可用性的實用設計技巧》。

據(jù)Colour Blind Awareness的統(tǒng)計，總?cè)丝诘?.5%是色盲。如果目標用戶多數(shù)是男性，則這個比例還要上升到8%。之前從沒有想過全世界有8%的人是色盲。這可是一個非常龐大的人群，足足5.6億人口。設計師們常常忘了為色盲設計，因為多數(shù)設計師不是色盲而忽略了這個重要群體。

在日常設計場景中，色弱或者色盲者經(jīng)常被設計師忽略的一個群體，對于他們而言，僅僅是改變鏈接文字的顏色是遠遠不夠的，很有可能他們無法辨別出文章中的鏈接文字與普通文字的顏色區(qū)別，就差過了文章中重要的鏈接，這樣的話，文章作者添加鏈接時的本意也就無法被這部分讀者獲知。

除了鏈接外，延伸另外一個設計中的細節(jié)，通常信息提示的成功、錯誤信號都是通過綠色和紅色來進行表達區(qū)分的。然而這兩種色彩又正好讓色盲用戶很難區(qū)分，這樣一來，他們壓根無法區(qū)分信息的對錯與否。因此增加相應的圖標來說明，用戶就可以更加直觀的了解信息了。 

圖5

結(jié)語

細節(jié)之中藏有魔鬼。而細致到位的細節(jié)能夠讓你的設計更上一層樓，細節(jié)并不只是細節(jié)，它們是成就設計與用戶體驗的重要因素。小小一個按鈕、搭配一個簡單的圖標或者動畫，由于牽扯到與用戶互動的部分，就會牽扯出這么多的細節(jié)出來。雖然追求細節(jié)相當耗費時間，大多數(shù)情況下恐怕都會被認為“這個不影響產(chǎn)品功能”、“這個不是產(chǎn)品的核心”、“細節(jié)問題下個版本迭代再加吧”等等而被忽略。但就像著名的設計師Charles Eames說過：“細節(jié)本身并非細節(jié)，而就是產(chǎn)品的精髓”。