交互設計原則有哪些?

有那些經典的產品設計原則


產品設計的原則有點太泛哈,這裡想結合自己的工作心得來小結一下手機無線設計8原則:

1:用界面應該是基於用的心裡模型,而不是基於工程實現模型
就是把後台本來很複雜的事情通過設計符合用戶日常生活中常用的瀏覽方式或操作方式。其實這一點是設計師把生活中的細節和數據結合的凝聚點,用戶的心理模型抓的越准,界面就會越優秀。

#左邊界面#:大眾點評新版的價格的搜索就比之前改得更符合用戶心裡模型;#右邊界面#:食神搖搖的搖動手機找餐廳更加符合大眾用戶的心裡,大家應該都有那種中午不知道去哪家餐廳就餐,那麼就搖一搖來隨機抽出一個附近的餐廳。

2:培養用使用情景的思方式做設計
要做到這個原則其實是很難的,需要長期的實戰經驗才能做到這點。
那我們都知道米聊出的比微信早,但後來被微信反超,個人認為不光是QQ幫了微信很大忙,比如用戶登錄門檻低,用戶來源,廣告打得響之類的,其實在用戶使用情景方面米聊研究的沒有微信透徹。

對於一個社交即時通訊產品,添加好友的功能是好友匯聚的來源,雖然米聊微信都綁定手機通訊錄,但話又說回來,用戶找手機通訊錄聯繫人語音聊天的還是比較少。添加好友是引導用戶去發現好友,找好友, 碰好友的一扇門。所以對於這麼重要的功能放置在應用程序的哪個位置,在產品前期就會讓用戶明顯的去選擇用哪個應用,因為聊天工具的前提是要有人和你聊天。再回到現實的界面中來,看看下面的對比:

微信1.0的時候(我這裡只截了4.0的圖)把添加好友放置主Tab上,方便用戶很快的添加好友

米聊2.0時還是把添加好友放置在好友列表的第一排,用戶很難發現

3:盡量少的戶輸入,盡量多出參考
移動端的虛擬鍵盤一直是科技界無法解決的一個難題,虛擬鍵盤的主要缺點:1.輸入定位無法反饋,所以無法形成高效的盲打;2.虛擬鍵盤的空間限制,手指的點擊經常造成誤按。光是上面這兩點就讓虛擬鍵盤在輸入上大打折扣,所以我們在設計應用程序時,只要遇到Input Box的控制項時,首先就要想到盡量讓用戶少輸入,或者智能的給出參考。

百度音樂的搜索先是把近期最熱門的歌曲依次排列在列表中,當有字輸入時,會出現歌手的候選詞,這裡值得稱讚的是百度音樂的搜索能根據用戶輸入的字來判斷用戶是搜索歌手還是歌名。

百度地圖也是我用得比較順手的一個地圖導航應用,在減少輸入方面也做的比較出色,百度地圖擁有cookies功能, 另外就是百度搜索的技術應用在地名的匹配中也很讓人欣喜,在用戶輸入到一半的時候,下面的候選列表就出現了目標地址,用戶直接停止輸入點擊列表即可。

4全局航需要一直存在,最好還能預覽其他模動態
全局導航在Web交互設計中比較容易做到,在手機移動端全局導航要看產品設計的需求,什麼功能需要全局導航,社交應用通常是:消息,通知,請求;音樂視頻應用通常是:下載,搜索;工具類產品經常是核心工具條(tool bar) 比如瀏覽器,語音助理,音樂識別應用等等。
全局導航的價值在於可以讓用戶在使用過程中不會丟失信息,減少主頁面和次級頁面之間的跳轉次數,當然全局導航中的info-task要能在當前頁面完成,如果需要跳轉到新界面,就會失去全局導航的意義,因為當出現多個info-task的時候,就需要用戶不停的進入全局導航頁面來完成。

Facebook 的朋友請求,消息,通知都是採用全局導航的方式,就是面板設計的丑了些~

米聊的通知中心,裡面包含的通知類型蠻多的,顯得有點凌亂,希望下面的版本會篩選歸類

原則5:提供非模的反不打斷任務流
模態彈出框的書面名稱在iphone OS中稱作:Alert-box,在Android OS中稱:Pop-up box, 我們都知道彈框會打斷任務流,所以在有限的屏幕上怎樣讓這些彈框弱化,或者說優雅、紳士的提醒用戶,這個需要設計師來定義。

模態是指界面中只有提醒彈框才具有可交互行為,其他一切都不可操作;非模態不會把提醒做成彈框,可能會處理成List Notification, Toast list等方式來提醒用戶。

Gmail是第一個把刪除的模態彈框設計成List
Notification這種方式的,提醒用戶撤銷剛才的刪除操作,這種非模態的處理,讓刪除的流程更加順暢和輕鬆自如。

K歌達人第二版的彈框就是模態處理,界面很不友好,用戶在K歌過程中要被打斷三次才能發表一首自己唱的歌曲,所以降低了用戶的參與度。

原則6:不要讓用戶等待任務完成,用戶還要發現更多有意思的地方
移動互聯的核心就是給用戶帶來移動體驗的方便和高效,這是 移動互聯網Apps需要考慮的,用戶在使用你產品在很多情況下都是碎片時間,
所以在設計上盡量讓用戶在短時間內熟悉我們的產品,知道這個產品的誠意,特別是某些等待界面需要設計,不能把一個很枯燥的等待界面呈現在用戶的面前,那用戶很快就會換其他apps。

在Instagram 拍完照片後,點擊上傳後,它的處理方式是回到首頁的位置,告訴你的照片正在提交,並不是顯示一個上傳進度的界面,讓用戶看那上傳百分比。因此,我們在設計米吧上傳歌曲文件時也只是告知用戶後台正在幫你上傳,叫用戶放心,用戶自然就會去玩其他的功能,沒有讓用戶焦慮的等待,等上傳完畢時,我們再用Toast list通知用戶已經上傳成功,這樣把查看上傳結果的主動權交給用戶。

原則7:自動保存用戶的輸入成果
在移動端,由於輸入面板的複雜性,而且觸摸輸入沒有物理按鍵的反饋自然,特別是手機上去輸入一段文字或者信息,對用戶而言本身就是一件很痛苦的事情;對產品而言,用戶的在你的產品中輸入是一個很值得慶幸的事情,所以設計人員需要讓你的apps自動保存用戶的輸入成果。

微博官方的手機客戶端在用戶輸入信息後,點擊左上角的叉時會彈出Action sheet來詢問,確認是否要放棄,或者保存為草稿;path的處理則更為人性化,在處於斷網的情景下,用戶依然可以發布照片和文字,當然後面聯網成功後,系統會自動上傳,只是發表時間是連網後發布的時間點;Instagram的評論也很友好,在斷網或者網路情況不穩定的情景,用戶輸入的評論依然可以發布,後面會有一個嘆號提醒用戶稍後發布或者重試,提升了用戶參與的積極行,同時活躍了社區。

原則8:為了程序響應的速度,設計有時候需要擔任掩護的作用
科技並不是萬能的, 技術依然是移動互聯網應用程序最需要優化和完善的,作為技術的盟友我們設計人員也需要輔佐他們,讓用戶覺得程序原本就應該是這麼運行的。特別是程序響應的速度很多時候不光是技術的問題,與網路環境也有很大的關係,這時候設計人員需要考慮這些客觀存在的情況,幫助程序來掩護這些瑕疵,讓用戶感覺到在使用時是流暢的。


#隨後實現# Instagram帖子「贊」 不管對參與者還是帖子作者都是激發其積極性活躍社區氛圍的重要功能,所以在程序的響應方面一定要具有可用,易用的特性,我們看左圖中,「贊」的按鈕已經現實「已贊」,同時我們看紅色框內的「菊花瓣」就知道後台在loading贊的數據,所以這就是設計的巧妙之處,先讓用戶感知到程序是非常快速的,而不是等loading完之後再顯示「已贊」;

#提前傳輸# Instagram中發布帖子的時候,用戶處理完照片點擊「上傳」按鈕就看到中間的界面,這時候界面是讓用戶去為自己的帖子輸入一個主題,或者去設置分享等功能,同時我們可以看到紅色框中的「菊花瓣」,很明顯後台已經開始傳輸剛才上傳的照片了,所以當用戶在點擊「完成」時,數據只需要上傳剩下的一部分,讓用戶感知上傳很迅速;

#邊唱邊完成# 把伴奏和用戶的歌聲合成為一首音樂時需要後台處理大量的數據,如果分步做就要讓用戶等待比較長的合成時間,為了讓用戶不用枯燥的等待合成,我們需要後台在用戶唱歌的同時,後台就已經開始把唱過的伴奏和歌聲合成。

以上八項原則是我在工作中體會比較深刻的交互設計原則,希望能對觀看到這篇博文的朋友有所幫助。當然設計原則是隨著時間的變化而不斷變化的,所以也請各位朋友完善和補充,謝謝!



前一段時間一直在看交互設計方面的書,對於about face 3 頗有感觸,其中有一些產品設計原則,複製過來,可供參考。
第1章
l 交互設計不是憑空猜測。
第2章
l 用戶界面應該基於用戶的心裡模型,而不能基於實現模型。
l 目標導向的交互反應了用戶得的心裡模型。
l 用戶不理解布爾邏輯。
l 不要全盤複製機械時代產品的用戶界面,而一定要按照信息時代的客觀情況進行改良。
l 重大改變必須是非常好的改變。
第3章
l 沒有人願意停留在新手級別。
l 為中間用戶優化。
l 將用戶想像成非常聰明,但非常忙碌的人。
第5章
l 不要讓用戶覺得自己很愚笨。
l 每一個界面的設計關注點在於一個獨立的首要人物角色。

第6章
l 在設計產品」如何」行為之前,要先定義產品」做什麼」。
l 在設計的早期階段假設界面有魔術效應。

第7章
l 絕對不要向利益關係人展示你不滿意的設計方案,可能那正是他們喜歡的。
l 用戶體驗只有一個,形式和行為的設計必須相互和諧。
第9章
l 選擇技術平台時,一定要與交互設計工作和諧一致。
l 全屏幕使用獨佔應用,讓它發揮最優效果。
l 獨佔界面應該採用保守的視覺風格。
l 獨佔式應用程序應該使用豐富的輸入。
l 在獨佔應用中,讓文檔試圖最大化。
l 暫時應用必須簡單、清晰,並且意思明確。
l 暫時式應用程序只使用一個窗口和視圖。
l 運行暫時應用時,它應該處於上一次的位置和配置狀態下。
l 信息亭應該針對首次使用進行優化。
第10章
l 不論你的界面多酷,越少越好。
l 協調的用戶界面是透明的。
l 遵循用戶的心裡模型。
l 少就是多。
l 讓用戶直接操作產品,而不是強迫用戶和產品討論。
l 讓工具在手邊。
l 提供非模態的反饋。
l 為可能設計,為可能做好準備。
l 提供符合情景的信息。
l 提供直接的操作和圖形輸入。
l 反應對象和程序的狀態。
l 避免不必要的報告。
l 不要用對話框來報告常態內容。
l 避免空白的狀態
l 請求原諒,而不是許可。
l 要把命令和設置區別開來。
l 提供選擇而不是提問。
l 隱藏彈射座椅的操縱桿。
l 優化響應能力,調節延遲時間。
第11章
l 儘可能的消除每一個附加工作。
l 不要固定培訓工具。
l 不要極端愚蠢地停止進度。
l 不要讓用戶申請許可。
l 在有輸出的地方允許輸入。
l 為常見的導航調整界面。
l 如果回報值得,用戶願意付出相應的努力。

第12章
l 人來思考,機器來做。
l 軟體應該像人一樣體貼。
l 如果值得用戶輸入,就值得記住程序。
第13張
l 相比之下,大多數人更喜歡成功,而不是知識淵博。
l 所有的習慣用法都需要學習,好的習慣用法之需要學習一次。
l 不要讓你的界面屈從某個隱喻。
第14章
l 視覺模式是視覺界面的基礎。
l 在視覺上區分不同的元素。
l 將功能與行為視覺化。
l 將東西一樣一樣從設計中移走,直到設計坍塌,再把最後一樣移走的東西放回去。
l 視覺顯示告訴我們是什麼類的物體,文本顯示告訴我們是哪一個物體。
l 除非有真正卓越的替代方案,否則必須遵循標準。
l 一致性並不意味著僵化。
第17章
l 管理磁碟和文件並不是用戶的目標。
l 自動保存文檔和設置。
l 將文件放在用戶能夠找到的地方。
l 磁碟是一種設備,而不是設計功能。
第18章
l 錯誤不可能是你犯的,但是有你的責任。
l 審核,而不是矯正。
第19章
l 豐富的視覺交互是直接操作成功的關鍵。
l 應該為瀏覽和選擇人物同時提供滑鼠和鍵盤操作。
l 用游標暗示表明元鍵的含義。
l 一次單擊選擇數據或改變控制項的狀態。
l 在對象或者數據上按下滑鼠意味著選擇。
l 在控制項上滑鼠按下意味著預備動作,滑鼠釋放意味執行動作。
l 在視覺上傳遞出受范性。
l 運用游標暗示來表達受范性。
l 使選擇在視覺上明確醒目。
l 拖放候選對象必須在視覺上顯示他們的接收能力。
l 拖動游標必須在視覺上表示源對象。
l 任何可滾動的拖放目標對象都必須支持自動滾屏。
l 為所有拖動提供顫動方式。
l 任何要求精確對齊的程序必須提供精確的滾動的游標工具。

第20章
l 對話框是另一個房間,去之前要有個好理由。
l 把功能置於需要他們的窗口中。
l 任何交互習慣用法的運用都與所處的情景相關。
第21章
l 大多數布滿控制項的對話框並不是好的用戶界面設計。
l 鏈接用戶瀏覽導航,按鈕和圖標按鈕用戶動作。
l 用圖標來區分重要的文本項。
l 絕不要水平滾動文本。
l 對於有界輸入要使用有界控制項。
l 僅供輸出的文本用非編輯控制項(顯示控制項)顯示。
第22章
l 用菜單來提供一條學習的途徑。
l 禁用不適合的菜單項。
l 在相同的命令向量中使用相同的視覺符號。
第23章
l 工具欄為有經驗的用戶提供快捷訪問常用的功能的途徑。
l 所有的工具欄和圖標控制項都應該使用工具提示。
第24章
l 把主要的交互操作放在主窗口內。
l 對話框適合那些主交互流之外的功能。
l 對話框非常適合整理關於某個主題相關的對象或者應用功能。
l 在功能對話框的標題中使用動詞。
l 在屬性對話框的標題中使用的對象的名字。
l 視覺上區分非模態對話框和模態對話框。
l 對非模態對話框提供一致的終止命令。
l 絕不要動態改變終止按鈕的標籤。
l 當程序將變成無響應狀態時必須通知用戶。
l 絕不要用臨時對話框作為錯誤消息框或確認消息框。
l 所有的交互習慣用法都有其使用範圍。
l 不要堆疊標籤。
第25章
l 錯誤消息框愚蠢的停止進度,應該避免。
l 讓錯誤成為不可能。
l 當軟體告訴用戶他們失敗時,用戶會覺得很沒面子。
l 做,不要問。
l 讓所有的動作都可以撤銷。
l 提供非模態反饋來幫助避免用戶犯錯誤。
第26章
l 在幫助菜單中提供快捷方式。
l 為用戶提供現成的模版庫。


交互設計七大定律(摘自互聯網,這些原則一直在指導我的工作):


「除非有更好的選擇,否則就遵從標準」,那在交互設計領域都有哪些法則定律被認作了標準了呢?

作為交互設計之父的阿蘭·庫珀最為人熟知的或許就是這句「除非有更好的選擇,否則就遵從標準」了,在交互設計領域有很多經過了時間的驗證的法則定律被認作了標準,那麼你都知道都有哪些嗎?

1. Fitts』 Law / 菲茨定律(費茨法則)

定律內容:從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定,到目標的距離和目標的大小(上圖中的 D與 W),用數學公式表達為時間 T = a + b log2(D/W+1)。

它是 1954 年保羅.菲茨首先提出來的,用來預測從任意一點到目標中心位置所需時間的數學模型,在人機交互(HCI)和設計領域的影響卻最為廣泛和深遠。 新的 Windows 8 中由開始菜單到開始屏幕的轉變背後也可以看作是該定律的應用。

菲茨定律的啟示:

1.按鈕等可點擊對象需要合理的大小尺寸。

2.屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因為邊角是巨大的目標,它們無限高或無限寬,你不可能用滑鼠超過它們。即不管你移動了多遠,滑鼠最終會停在屏幕的邊緣,並定位到按鈕或菜單的上面。

3.出現在用戶正在操作的對象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開得更快,因為不需要移動到屏幕的其他位置。

2. Hick"s Law / 席克定律(希克法則)

定律內容:一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。用數學公式表達為反應時間 T=a+b log2(n)。在人機交互中界面中選項越多,意味著用戶做出決定的時間越長。例如比起 2 個菜單,每個菜單有 5 項,用戶會更快得從有 10 項的 1 個菜單中做出選擇。

席克定律多應用於軟體/網站界面的菜單及子菜單的設計中,在移動設備中也比較適用。

3. 神奇數字 7±2 法則

1956 年喬治米勒對短時記憶能力進行了定量研究,他發現人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息後人類的頭腦就開始出錯。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上,如應用的選項卡不會超過 5 個。

4. The Law Of Proximity 接近法則

根據格式塔(Gestalt)心理學:當對象離得太近的時候,意識會認為它們是相關的。在交互設計中表現為一個提交按鈕會緊挨著一個文本框,因此當相互靠近的功能塊是不相關的話,就說明交互設計可能是有問題的。

5. Tesler"s Law 泰思勒定律(複雜性守恆定律)

該定律認為每一個過程都有其固有的複雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的複雜性從一個地方移動到另外一個地方。如對於郵箱的設計,收件人地址是不能再簡化的,而對於發件人卻可以通過客戶端的集成來轉移它的複雜性。

6. 新鄉重夫:防錯原則

放錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。通過改變設計可以把過失降到最低。該原則最初是用於工業管理的,但在交互設計也十分適用。如在硬體設計上的 USB 插槽;而在界面交互設計中也是可以經常看到,如當使用條件沒有滿足時,常常通過使功能失效來表示(一般按鈕會變為灰色無法點擊),以避免勿按。

如上圖所示我們的評論功能快,在留言框沒有內容或郵箱格式不正確的時候是無法獲取驗證碼的,只有兩者都滿足了才可以。

7. Occam"s Razor 奧卡姆剃刀原理(簡單有效原理)

這個原理被稱為「如無必要,勿增實體」,即如有兩個功能相等的設計,那麼選擇最簡單的。在極客公開課?走進 UC 中 UC 瀏覽器產品經理蘇劍南在」UC 瀏覽器 For Android 產品設計思考「演講中也有講到該原理的應用,」如果 UC 手機瀏覽器要發布第一個版本 UC 1.0,你會選擇哪五個功能?『』

為了遵守神奇的數字 7 法則本篇就只介紹到這裡了,如果你還有興趣自己去找找其他的定律法則,如與費茨定律接近的 Steering Law轉向定律、Gutenberg Diagram古登堡圖法則以及雷打不動到哪哪適用的帕累托定律(80/20 原則)、三等分原則等。

最後想說的是雖然這些法則定律被很多人認定為標準,很多人也記得 Alan Cooper 說過的那句名言,但從實際出發這些法則定了起到的只是參考或啟發作為,作為交互設計人員千萬不能照本宣科,因為只有親自做過後才會深有體會。


以下內容轉自:http://www.cnblogs.com/Wayou/p/goodui.html
英文原文地址:http://goodui.org/

1 盡量使用單列而不是多列布局

單列布局能夠讓對全局有更好的掌控。同時用戶也可以一目了然內容。而多列而已則會有分散用戶注意力的風險使你的主旨無法很好表達。最好的做法是用一個有邏輯的敘述來引導用戶並且在文末給出你的操作按鈕。

2 放出禮品往往更具誘惑力

給用戶一份精美小禮品這樣的友好舉動再好不過了。具體來講,送出禮品也是之有效的獲得客戶忠誠度的戰術,這是建立在人們互惠準則上的。而這樣做所帶來的好處也是顯而易見的,會讓你在往後的活動進展(不管是推銷,產品更新還是再次搞活動)中更加順利。

3 合併重複的功能而使界面簡潔

在整個產品開發期間我們會有意無意地創建很多模塊,版面或者元素,而它們的功能可能有些是重疊的。此種情況表明界面已經過度設計了。時刻警惕這些冗餘的功能模塊,它無用且降低了電腦性能。此外,界面上模塊越多,用戶的學習成本就越大。所以請考慮重構你的界面使它足夠精簡。

4 客戶的評價好過自吹自擂

在獲得項目機會或提高項目轉化率時客戶的好評是一種極為有效的手段。當潛在客戶看到其他人對你的服務給予好評時,項目機會會大增。所以試著提供一些含金量高的證據證明這些好評是真實可信的。

5 頻繁展示你的主旨來加深印象

多次重複主旨口號這種方法適用於界面很長或者分頁的情況。首先你肯定不想滿屏刷出相同的信息,這樣會讓人生厭。但當頁面足夠長的時候這些重複就顯示自然多了並且也不顯得擁擠。所在在頁面頂部放一個按鈕然後在頁面底部再適當放個突出的按鈕的做法沒有什麼不妥。這樣當用戶到達頁面底部在思考接下來該做什麼的時候,你提供的按鈕就可以獲得一個潛在的合同或者即使用戶不需要你的服務這個按鈕也可以起到過濾的作用。

6 將選項與按鈕區分開來

諸如顏色,層次及模塊間的對比這些視覺上的設計可以很好地幫助用戶使用產品:他時刻知道當前所處的頁面以及可以轉到哪些頁面。要傳達這樣一個好的界面,你就需要將可點擊的元素(比如連接,按鈕),可選擇的元素(比如單選多選框)以及普通的文字明顯區分開來。在下圖的例子中,我將點擊操作的元素設置為藍色,選中的當前元素為黑色。這樣適當的設計可以讓用戶很方面地在產品的各模塊間切換。但千萬不要把這三種元素設計得混亂不堪。

7 給出推薦而不是讓用戶來選擇

當展示許多項服務時,給出一個重磅的推薦項是個不錯的做法,儘管推薦的設置無法滿足所有用戶。這麼做是有理論依據的,一些研究已經揭示了這麼一種現象:當面臨的選擇越多時,用戶就越難做出決定。所以你可以高亮某個選項來幫助用戶做出選擇。

8 給出撤銷操作來代替確定操作

假設你剛點擊了一個連接或者按鈕,撤銷操作可以讓操作流暢自然,這也符合人類的本能。而每次操作都彈一個確定框則好像是在質問用戶你明白不明白這個操作會產生什麼後果。我還是更習慣假設用戶每次操作都是正確的,其實只有極少數情況下才會發生誤操作。所以,為了防止誤操作而設計的確認窗口其實是不人性化的,用戶每次操作都需要進行毫無意義的確定。所以請考慮在你的產品里實現撤銷操作來增加用戶的操作友好度吧。

9 指出產品適用人群而不是做成全年齡

你是想把產品做成大眾化的呢還是有精確的適用人群?在產品定位上你需要更精確些。通過不斷了解目標客戶的需求及標準,你能把產品做得更好得到更多與客戶交流的機會,並且讓客戶覺得你很專業,在這方面是獨家提供的優質服務。把產品定位得精確的風險就是可能縮小了目標潛在客戶的範圍,也使自身變得不那麼全能。但這種做得更專業的精神卻反過來會贏得信任,權威。

(貼士:喜歡下圖中可愛的小人物造型么?去了解MicroPersonas吧)

10 試著直接果斷而不要唯唯諾諾

你可以通過不確定而顫抖的聲音來表達傳遞自己的意思,當然也可以通過很自信的方式表達。如果你在界面中的表述用語多以問號結束,比如"也許","可能","感興趣?" 或者"想要試試么?",那麼你完全還可以把語氣變得更堅定一些。不過萬事無絕對,或許適當放鬆措詞讓用戶有自行思考的餘地也是可以的。

11 界面要有鮮明對比讓人容易區分

把主要功能區從界面中突出顯示出來效果會好很多。使你的主要口號醒目有很多種方法。通過明暗色調的對比來突顯。通過為元素添加陰影漸變等效果讓界面富有層次感來張顯主題。最後,你甚至可以在色相環上專門選擇互補色(比如黃色與紫色)來設計你的界面,以達到突出重心的目的。綜合所有這些,最後得到的界面會使你的主要意圖與界面其他元素有明顯的區分,得到完美的呈現。

12 指明產地

指明你的地區,所提供的服務,產品來自哪裡意義重大,同時也將與客戶的溝通引入了一個更具體帶有地域特色的場景中。指出具體來自哪裡,國家,省分及城市,也是一種在進行自我介紹或產品展示時被常常提及的。當你在界面設計中實現這點時,讓人覺得非常友好。同時指明區域也會隱形提高產品的聲譽,好上加好。

13 精簡表單內容

人生性就懶惰,在填寫表單時也是同樣的道理,沒人願意填寫一大堆表單欄位。表單中每個欄位都會有失去用戶的風險。不是每個人打字都很快速的,並且在移動設備上進行輸入更是相當麻煩的事情。問下自己表單中是不是每個欄位都必需,然後盡量減少表單中的欄位。如果你確實需要一大堆信息讓用戶填寫,試著將它們分散在不同頁面,在表單提交後還可以繼續補充。過多欄位很容易讓整個表單顯示臃腫,當然想簡潔也很容易,只放少數欄位。

14 暴露選項而不要將操作隱藏

你使用的任何一個下拉框都會對用戶造成信息的隱藏而需要額外的操作才能顯示。如果這些信息是貫穿整個操作所必需的,那你最好把它展示出來做得更顯而易見一點。下拉框最好用在選擇日期,省份等約定俗成的地方。對於程序中重要的選項最好還是不要做成下拉形式。

15 把界面做得環環相扣要好過直白的排版

一個平淡無奇行文無疑會讓用戶失去興趣而繼續閱讀。是的,單列滾動的長頁面是不錯的,但是我們應該適當地設置一些小節,並且環環相扣,來提高用戶的興趣使其繼續閱讀。但需要注意的是節與節之間的留白不要太大。

16 不要放太多鏈接分散用戶注意力

為了滿足各式用戶的需求,在頁面上放些鏈接鏈到這裡鏈到那裡是常見的做法。如果你的主要目的是想讓用戶點擊頁面最後那個下載按扭什麼的話,就需要三思了。因為用戶可能點擊了其他鏈接離開頁面了。所以你需要注意頁面的鏈接數量,最好將用於導航與用於操作的鏈接用樣式區分開。盡量移除頁面不需要的鏈接會讓用戶點擊到你的功能按鈕。

17 將操作的狀態或者進度呈現出來

現如今大多界面當中已經呈現了各色樣式的進度條或者標明狀態的圖標,比如郵件有已讀或未讀的狀態,電子帳單有支付或未支付的狀態。而在界面上呈現這樣的狀態對於用戶來說是很有必要的。這樣用戶就可以知道某些操作是否成功,接下來準備進行怎樣的操作。

18 不要讓用戶覺得是在完成任務

試想界面上有這樣兩個按鈕:一個是"獲取折扣",另一個是"立即註冊"。我敢打賭大多數人會點擊第一個,因為第二個按扭讓人感覺不到有利可圖,並且"註冊"讓人聯想到填不完的表單。也就是說讓用戶感受到獲利的按鈕更有可能被點擊。這種讓用戶感到好處的文字信息也可放在按鈕旁邊,不一定要做為按鈕的標題。當然,正常的按鈕還是有用處的,一般用於重複性操作頻繁的地方。

19 讓操作直觀而不是讓人覺得找不到上下文

不用說直接在元素身上進行操作是更直觀明了的方式。比如在一個列表中,我們想讓用戶對每個條目進行操作那麼就把按鈕放到當前條目上,而不要把放到列表之外。再比如就是直接點擊元素就進入編輯狀態(比如頁面上的地址信息點擊後可以進行編輯)。這種方式比傳統的選中再點擊相應的按鈕進行操作要簡潔省事得多。當然,對於一般性的操作本身就不需要有什麼上下文的,就沒必要這麼做了,比如頁面上的前進,後退按扭。

20 盡量顯示全部內容而不要額外頁面

在一個足夠大的寬屏界面上最好還是直接給出表單,這比點擊按鈕再彈出表單要好很多。首先減少了點擊操作,流程變得簡潔也節省了時間。其次,直接呈現出表單可以讓用戶知道表單有多長,其實也是在告訴用戶註冊花不了多少時間。當然,這條規則適合註冊表單非常簡單的情況。

21 讓界面平滑顯示而不要死板地呈現

用戶進行操作過程中,界面上的元素會經常出現,隱藏,打開,關閉,放大縮小移位等。給這些元素增加些自然的動畫,淡入淡出效果不但美觀,也更符合實際,本來元素尺寸位置的變化就是一個需要時間的動畫過程。但要注意動畫時間不要設置過長,那樣會讓想儘快完成操作的用戶不耐煩。

22 循序漸進的引導而不要直接讓用戶註冊

與其讓用戶馬上註冊,何不讓用戶先進行一些體驗式的操作呢。這個體驗過程可以展示程序的功能,特性等。一旦用戶通過簡單幾步的操作了解了程序的價值所在,那麼它會更願意填寫註冊表單的。這種循序漸進的引導可以盡量推遲用戶註冊的時間但又可以讓用戶在沒註冊的情況下進行個性化設置等簡單操作。

23 過多邊框會讓界面四分五裂

過程邊框會喧賓奪主。不用說,邊框確實在劃分區域進行版塊設置時有很大的作用,但同時其明顯的線條也會吸引走用戶的注意力。為了達到劃分版塊又不轉移用戶注意力的目的,在排版時可以將界面上不同區域的元素通過空白進行分組,用上不同的背景色,將文字對齊方式進行統一,還有就是為不同區域設置不同的樣式。當使用所見即所得的界面設計工具時,我們經常在界面上方便地拖出很多區塊來,這些區塊多了就會顯得雜亂無章。所以我們又會到處放些橫線來分界。一個更好的做法是將區塊垂直對齊,這樣做不會讓那些多餘的線條來擾亂視覺。

24 展示產品帶來的好處而不要羅列產品特性

市場就是這樣的,用戶永遠只關心自身利益而產品特性對他們來說倒不是那麼重要。只有利益才更直觀地體現出使用產品所帶來的價值。Chris Guillebeau在他的著作《100美元起家》中指出,相比壓力,衝突,煩心事和未知的未來,人們在乎得更多的是愛,金錢,認同感和自由支配的空閑時間。所以我相信在展示產品特性時回歸到利益上是必要的。

25 不要把產品設計得過於依賴於數據

界面上經常需要呈現不同數量的數據,從0,1,10,100到10000+等。這裡存在個普遍的問題就是:在程序最開始使用的0條數據到過度到有數據之前,該如何進行顯示界面。這也是我們經常忽視了的地方。當程序初始沒有數據時,用戶看到的就是一片空白,此時用戶可能不知道該進行哪些操作。利用好沒有數據的初始界面可以讓用戶學習和熟悉如何使用程序,在程序中創建數據。力臻完美永遠是我們追求的目標,界面設計也不例外。

26 默認將用戶引入

將界面做成默認用戶選中想要使用你的產品,意味首如果用戶真的需要使用,那麼可以直接點擊確定而不需要額外點選了。當然,也有另一種做法就是默認不選中服務,用戶需要的話可以手動點選。前者這種設計更好的原因有兩點。一是用戶不需要額外點選,非常省事,因為默認設置為用戶需要我們的產品或服務。二是這種做法某種程度上是在向用戶推薦產品,暗示了其他人都選擇了我們。當然,將界面設計成默認選擇的樣子多少存在點爭議,有點強迫用戶的感覺。如果你想道德一點,你可以要麼把讓用戶選擇的文字寫得模稜兩可,要麼使用雙重否定這樣不那麼直白的描述,這兩種方式都可以讓用戶覺得沒有那麼強的感覺是被強迫選擇使用產品的。

27 界面設計得一致,不要增加用戶的學習成本

自從Donald Norman的一系列著作面世後,界面設計中盡量保持一致性成了一個普遍遵循的準則。在設計中保持一致性可以減少用戶的學習成本,用戶不需要學習新的操作。當我們點擊按鈕,或者進行拖拽操作,我們期望這樣的操作在整個程序的各個界面都是一致的,會得到相似的結果出來。反之我們需要新情境下重新學習某種操作會產生何種結果。可以在很多方面下功夫來實現一個一致的界面,包括顏色,方向,元素的表現形式,位置,大小,形狀等。不過在讓界面變得一致之前,記住一點,適當的打破整體的一致性也是可取的。這偶爾的不一致性的設計用在你需要強調的地方可以起到很大的作用。所以世事無絕對,我們應遵從一致的設計準則,但適當地打破這種常規。

28 使用較貼切的默認值會減少操作

適當的默認值和預先填充好的表單欄位可以大量減少用戶的工作量。在節省用戶寶貴的時間上面,這是種非常常見的做法,可以幫助用戶快速填完表單或者註冊信息。

29 遵從一些約定而不要去重新設計

界面設計中遵從約定的準則跟之前的界面一致性準則很相似。如果我們遵從了界面設計中的一些約定,用戶用起來會很方便。相反,不一致和沒有遵從約定的設計則會提高學習成本。有了界面設計中這些約定,我們想都不用想就知道界面右上角(大多數情況下)的叉叉是關閉程序用的,或者點擊一個按鈕後我們能夠預測到將會發生什麼。當然,約定是會過時的,隨著時間的推移,同樣的操作也有可能被賦予新的含義。但要記住,當你在界面中打破這些常規時一定要目的明確,並且出發點是好的。

30 讓用戶覺得可以避免失去而不是獲得

我們喜歡成功,沒有誰願意失敗。根據心理學得到的可靠結論,人們一般更頃向於避免失去擁有的東西而不是獲得新的利益。這一結論也適用於產品的設計和推廣中。試著說明你的產品會幫助客戶維護他的利益,保持健康,社會地位等要好過告訴客戶這個產品會帶來一些他未曾擁有的東西。比如保險公司,它是在銷售我們出事之後可以得到的大筆賠償呢還是在強調可以幫助我們避免失去擁有的財產?

31 具有層次的圖形化展示優於直白的文字描述

具有層次的設計可以將界面上重要的部分與不次要部分區分開來。要讓界面層次分明,可以在這些方面做文章:對齊方式,間距,顏色,縮進,字體大小,元素尺寸等。當所有這些調整運用得適當時,可以提高整個界面的可讀性。相比在一個很直白的界面上用戶一眼就可以從上瞟到底的設計,這樣分明的設計也可以讓用戶放慢速度來慢慢閱讀。這樣也使界面更有特色一些。就好比一次旅行,你可以乘坐高鐵快速到達景區(從頁面頂部瞟到底部),但你也可以慢行以欣賞沿途風光。所以層次分明的設計讓眼睛有可以停留的地方,而不是對著空白單調的一個屏幕。

32 將有關聯的功能分組而不是雜亂無章

將各個功能項分組合併起來可以提高程序的可用性。有點常識的人都知道刀子和叉子,或者打開文件和關閉文件是放在一起的。將功能相近的元素放在一起也符合邏輯,符合我們平時的認知。

33 使用內聯的驗證消息而不是提交後再驗證

在處理表單時,最好立即檢測出用戶所填寫內容是否符合要求然後給出驗證消息。這樣錯誤一出現能就能得到改正。相反,提交後再檢查表單會給出錯誤消息,會讓用戶感到乏力又要重複之前的工作。

34 放寬對用戶輸入的要求

對用戶輸入的數據,盡量放寬限制,包括格式,大小寫什麼的。這樣做可以更人性化一點,也使得界面更加友好。一個再恬當不過的例子就是讓用戶輸入電話號碼的時候,用戶有很多種輸入方式,帶括弧的,帶破折號的,帶空格的,帶區號和不帶區號的等等。如果你在代碼中來處理這些格式的問題,代價也只是你一個人多寫幾行代碼而以,卻可以減少無數用戶的工作量。

35 讓用戶感覺需要快速做出響應而不是毫無時間觀念

適當的緊迫感是個有效的戰術可以讓用戶立即做出決定而不是等上個十天半個月。重要的是這種戰術屢試不爽,因為它暗示了資源的緊缺或者活動的時間有限,今天可以買,但明天可能就無法這麼低價了。另一方面,這一戰術也讓用戶感到會錯失一次大好的機會,再一次,應用了人們害怕失去的本性。當然,這種戰術會被一些人嗤之以鼻,認為是不耿直的做法。不過,這只是種戰術而以,並且在保持合法性的前提下應用也無傷大雅。所以請不要為了營銷而在界面上製造緊迫的假象。

36 使用飢餓營銷

物以稀為貴。飢餓營銷給出的信息就是東西不多,只剩幾件,明天再來,可能沒了。你去比較一下批發與限量版的東西他們的價格差距有多大就知道了。回過頭來看,那些批發商或者大零售商,他們也使用飢餓營銷,以獲得更好的銷量。但在軟體行業,我們經常會忘記有飢餓營銷這回事。因為數字產品是可以很容易拷貝複製的,不存在缺貨的情況。其實,在界面設計中,也可以將其運用起來與現實中的資源緊缺進行聯繫。想想一次網上研討會的門票,想想你一個月可以服務的人數限制,這些信息都可以告知用戶是有限的。

37 讓用戶選擇而不是重新填寫

這一界面設計中的經典準則是有心理學依據的,相比要讓某人回想想某樣東西,從一堆東西中認出某樣東西會更容易些。辨識出一樣東西只需要我們稍微回憶一下,通過一些線索就可以完成。而回想則需要我們全面搜索自己的大腦。也許這也是為什麼試卷上選擇題會比簡答題做得快的原因。所以試著在界面上展示一些用戶之前涉及到的信息讓他們進行選擇,而不是讓他們想半天然後自己填寫。

38 讓點擊更輕鬆

像鏈接,表單的輸入框還有按鈕等,如果尺寸做得大一點則點擊起來更方便容易些。根據費特定律,使用像滑鼠這樣的外設來點擊需要一些時間,特別是元素比較小的情況下,時間會更多。鑒於此,最好還是把你的表單輸入框,按鈕等做大點。抑或者你可以保持原有的設計不變,只是把元素可點擊區域(也就是熱區)增大。這樣的一個典型例子是手機設備上的文本鏈接和導航菜單,它們文字不一定很大但背景是拉伸的,在很寬範圍內點擊都有效。


讀過了 @向華盛 和 @胡含 兩位同學的答案,都非常贊。前者更偏向於實用和工具化(你讀完了馬上就能用上),而後者偏向於理論(雖然可能無法直接用,但是隨著你經驗不斷增多,你會越來越覺得這些理論有道理)。

  我覺得設計原則這東西,看怎麼分。如果往細了分,上百個都有可能;如果粗略的分,可能終極原則總結起來就那麼幾條,比如「Don"t make me think」、「符合用戶的使用場景」、「符合用戶需求」等。這個答案可能是一個處於「實用」和「理論」中間的狀態。

  但是在這之前,我還是想先聲明一下我個人對於使用這些原則時的態度,就是:反對「原教旨主義」。

  原教旨主義是一個宗教名詞,具體的介紹你可以去維基百科上搜一下。很多宗教都會有原教旨主義的分支,概括起來,原教旨主義者的典型特徵如下:

  • 試圖回歸原初的信仰的運動
  • 提倡對其宗教的基本經文或文獻做字面的、傳統的解釋
  • 並且相信從這些闡釋中獲得的教義應該被運用於社會、經濟和政治生活的各個方面

  在整個人類歷史上,原教旨主義給人類帶來了巨大的災難,為此有很多無辜的人犧牲。同樣,在「設計」中,也存在類似的原教旨主義,我將其特徵概括為下面這幾點:

  • 死扣設計原則的字面意思,不考慮或較少考慮場景、整體邏輯
  • 對「潮流」盲目跟風
  • 任性。不考慮或較少考慮狹義設計以外的因素 (關於我所定義的狹義設計,可以參考這個答案 用戶體驗的本質是什麼? - xidea 的回答)

  從我聽過的理論中,我篩選出的,常用的原則有這麼幾個:

  • 符合用戶使用需求
  • 基於用戶的心理模型設計
  • 一致性
  • 及時有效的反饋和解釋
  • 形式追隨功能
  • 單一任務、漸次呈現
  • Less is More
  • 辨識度及信噪比
  • 掃描而非閱讀
  • 使用用戶的語言與其溝通

  這其中前兩個偏理論,並且嚴格講並不是在基於「交互設計」來討論,但卻是其他所有的基礎;後面的偏工具化,但是經常會被濫用。我最近正在寫《寫給產品經理和設計師的用戶體驗知識》系列文章,以上列表中前4個已經寫完了,這個系列文章是將產品設計和基於信息層的設計(如交互和視覺)揉在一起寫的,但是我看到題主在描述裡面也提到了「產品設計」原則,我就直接貼過來了。後面的可能陸續會寫。

原則1:符合用戶使用需求

  是的,一般的基礎原則,講出來都像是廢話。設計一個產品,最基礎的原則就是要符合用戶的使用需求。確定需求是一個產品經理的基本工作內容,有很多方法和工具可以幫助我們找到用戶的需求。例如觀察用戶行為、分析數據、構建用戶場景等等。由於這篇文章是從用戶體驗的角度切入,所以在這個原則中,我們來討論這樣一個問題:你覺得12306這個服務的用戶體驗如何?

  聽起來好像又是一句廢話。我們翻一翻網上的各種評論就知道,大家對於12306基本上是罵聲一片的。例如,在知乎上面就有一個類似的問題:

  如你所料,一片罵聲,甚至當年還有人說你們這些做「用戶體驗」的,做「設計」的,P用沒有,你看人家12306,「設計」得那麼爛,PVUV流量不照樣是全國領先,所以「用戶體驗」沒用。我覺得說這話的人,一方面是冤枉我們這些「做設計」的人了,另一方面,只能說,您對「用戶體驗」的理解還不夠。如果把12306看做一個互聯網產品,它的體驗真的是爛到極點了。交互流程混亂、UI難看、服務不穩定等等。但是請注意,我的問題是「12306這個「服務」的用戶體驗如何」。從服務的角度看,12306是一個幫你買火車票的東西。我們想一下在沒有12306的時候,我們買火車票的體驗是怎樣的呢?那年我在北京,零下20多度的氣溫,為了買到過年回家的火車票,我需要凌晨4點半起床,搭最早一班2號線地鐵到北京站;需要排3個小時的隊,有時候還是在室外排;但你會發現總是會有1到2個人排在你前面,好不容易開始賣票了,他們會天南海北買一堆車票。雖然你排第二,但是輪到你的時候,卧鋪票保證已經賣光了。

上圖:北京站門口排隊購票的人群

  但是現在有了12306,你依然只是「有可能」在上面買到票而已,但是至少我覺得,概率並不低於去車站排隊。在這個前提下,你可以放票的時候再起床,可以坐在溫暖的家裡,可以一邊喝咖啡一邊點滑鼠。平心而論,對於買票這個需求來說,12306的體驗比去火車站好太多了。

  從產品策劃角度,我把一個產品的「體驗」分為3個層級,分別是「有用」、「可用」、「易用」。

  而12306這貨,在「有用」這個層級上是要等於或優於排隊的,雖然在「可用」和「易用」兩個層級做得很差,但綜合起來,其「用戶體驗」還是要優於其「競品」——去火車站排隊。

原則2:基於用戶的心理模型設計

  這個原則聽起來有點兒抽象,但如果我在後面加上後半句,理解起來就會容易一些:基於用戶的心理模型設計,而不是基於業務或者工程模型,更加不是基於你自己的想法。

  我們來研究這樣一個用戶場景:假設我的房東給我發簡訊,催我交房租,內容如下:
話說,該交房租了啊。把錢匯到我的銀行賬戶吧。建設銀行,622600000001123,戶名:房東

  這條簡訊中,核心信息有3個,銀行名稱、賬號和戶名。於是我打開某銀行的手機app,點擊了一個叫「轉賬匯款」的入口後,看到了這樣一個界面:

  這是一個典型的基於業務模型,而不是用戶的心理模型來設計的功能。行內轉賬、跨行轉賬我還能理解,但是不免想到,如果只給我一個框,選擇對方的銀行名稱,難道app本身還沒辦法判斷是「行內」還是「跨行」嗎?第三項叫「跨行轉入」... 聽起來好像是我會收到錢,它為什麼會出現在「轉賬匯款」裡面呢?好奇怪。後面,「手機號轉賬」和「一鍵轉賬」又是什麼東西?如果我想使用這兩個功能需要另外開通嗎?另外「手機號轉賬」,聽起來好像是不需要知道對方的賬號,知道對方的手機號就能轉賬?是這個意思嗎?但是如果對方沒開通這個服務,會怎樣?我的錢會不會丟?萬一有兩個人在銀行使用了同一個手機號,我的錢到底會匯到哪兒去呢?

  如果對於一個像我一樣,至少還上過幾年學,自己本身在做互聯網,並且其實每個月都要用相同方式交房租的人來說,看到這些都會糊塗的話,那如果對方是一個不懂互聯網,不懂金融的普通用戶呢?簡直是災難。

  但相比之下,我們看看互聯網公司做的產品,就很不一樣了。下圖是支付寶的「轉賬匯款」界面:

  這個界面上,只有卡號、銀行、姓名和金額4個必填項目,與房東提供的信息高度重合,完全符合用戶的心理模型。作為普通用戶,幾乎完全不需要思考,即可使用了。

  再舉一個例子,是我親身經歷的。我之前在「騰訊微雲」這個項目做交互設計,我們用了很長時間,產品、設計、開發通力合作,終於做出了我們自己認為很牛x的微雲2.0手機客戶端。平心而論,微雲2.0在當時,不論是功能上,還是狹義的「設計」上,包括給用戶提供的存儲容量上,在國內都是領先的。於是我們信心滿滿的將它提交到了App Store,過了一段時間,我們去翻看用戶的評論,好的就不說了,但是用戶罵的,大部分集中在同一個問題上。先賣個關子,您能從下面這幾張對比圖上,猜到用戶可能罵什麼嗎?

上圖:微雲1.6(舊版)的iPhone客戶端截圖

上圖:微雲2.0(新版)界面。以內容為核心,幫助用戶更加方便的找到存在雲端的內容,同時引入分類概念,使檢索更加有效。在交互、界面風格等方面也更加「現代」。

  怎麼樣?對比了這兩個版本的截圖後,有沒有猜到,用戶最不滿意的罵的最多的是哪裡?恩,估計你猜不到,因為截圖上沒有體現出來。哈哈~~ 事實上,用戶抱怨最多的,可能佔80%以上的,是一個叫「簽到」的運營功能。如下圖所示:

  簽到這個功能跟所有你見過的類似功能差不多,是用來拉活躍度的。具體來講,就是用戶每天可以打開微雲,在一個特定的地方點一下,就能獲得一些空間,少則16M,多則512M。

  微雲2.0發布前夕,正好是國內「網盤大戰」最火熱的時期。競品們推出了各種各樣的送空間活動,有送10G的,有送20G的,有送幾百G的,也有上T的。微雲自然也不甘落後,喊出了贈送10T空間的口號。只要進行幾個簡單的操作(例如登錄手機客戶端),就可以獲得10T空間,到了後來,幾乎是只要註冊就能拿到10T的空間了。按照我們掌握的數據,結合國內的網速,我們認為10T是很大的空間,很多用戶可能「一輩子」都用不完。既然如此,在微雲2.0發布時,我們選擇了將簽到功能砍掉(當時想的是,以後上一個更完善的用戶等級體系),我們的邏輯很簡單,你既然都已經有10T空間了,並且你拚命用都很難用完,那每天送你的那幾百M空間,自然是沒有意義了。

  但出乎預料的是(現在想來,簡直是必然的),用戶對於升級了新版後找不到簽到功能這件事情大為憤怒(前提是他們知道自己已經擁有10T的存儲空間),紛紛到App Store給一星,破口大罵,甚至在百度貼吧「微雲吧」裡面開始流傳舊版本的apk安裝包用來降級。最終,我們加回了簽到功能(HTML5做的,不需要升級客戶端)。

  這是一個比較典型的,沒有「基於用戶的心理模型設計」,而是基於業務模型和自己的想法設計的案例。按照業務模型來思考,既然空間已經足夠多,那每天增長的那一點點空間顯然是無意義無價值的;但是如果結合用戶的心理模型,就很容易理解用戶的行為。很多用戶已經習慣了每天過來點一下,到也不一定是送的那一點兒空間他真的有用,只是這樣的行為會很大程度上加深用戶的成就感,這就是「人性」啊。

原則3:一致性

  一致性是產品設計過程中的一個基礎原則,它要求在一個(或一類)產品內部,在相同或相似的功能、場景上,應盡量使用表現、操作、感受等相一致的設計。一致性的目的是降低用戶的學習成本,降低認知的門檻,降低誤操作的概率。聽起來有些雲里霧裡,我們還是來看看案例吧。

  請看這幅圖:

  如果我告訴你,這張是某公司宣傳海報的一部分,你猜,可能是哪家公司?好吧,如果猜不到,我再提示一下,是做飲料的公司... 估計你猜到了,沒錯,是可口可樂。完整版本是這樣的:

  為什麼最上面這張圖並沒有出現可口可樂的標誌、產品圖片、產品介紹等任何信息,你卻能猜到它是可口可樂呢?是因為在可口可樂背後,有一套叫做VI(視覺識別系統)的體系在指導它全部對外的形象設計。VI的本質就是通過視覺上高度的一致性,來引導用戶將某種視覺信息與某企業、產品強行關聯。圖上的白色飄帶部分其實是可口可樂VI系統中常用的輔助圖形,這個圖形在幾乎所有的可口可樂宣傳資料上出現,其顏色(包括背景的紅色)、形狀、扭曲的角度等完全一致,所以當我們再次見到類似的圖形和配色時,我們的大腦會立即產生「這應該是可口可樂」這樣的反應,認知成本被大幅度降低,這就是一致性的最簡單應用。

  與此相反,我們看另一個例子,想像一下電梯上的各種按鈕。每一部電梯上的按鈕其承載的功能幾乎完全相同,無疑就是選擇樓層、開關門,最多再加一個呼叫功能。但是當你走進一棟陌生的寫字樓,你要上7層,你肯定會在一堆按鈕面前遲疑一下;終於找到7了,按下,然後發現門還沒關,你繼續找關門鍵,十有八九還會遲疑一下,然後才能正確操作。

  為什麼我們每天都要乘電梯,但是進入一個功能完全一樣,但是之前沒來過的電梯時依然無法熟練操作呢?理由很簡單,因為不同品牌、不同型號的電梯的操作界面(按鈕)缺乏一致性。按鈕的排布順序、大小、樣式完全不同,所以每次遇到新的,我們都要學習後才能使用,雖然這種學習很快就能完成,但如果一定要從「用戶體驗」的角度去糾它的問題,這其實是一種因為「一致性」做得不好而產生的不太好的體驗。

上圖:不同電梯中的操作按鈕樣式、排布可能完全不同

  一致性繼續延伸,可以突破單個的產品,在某一類產品、某行業中形成更大範圍內的「一致」,並得到大家的承認。這時,一致性就會變成「標準」。

  想像這樣一個場景,我從錢包里掏出一張招商銀行的儲蓄卡,想取一些現金。但是我找來找去,發現附近只有建設銀行,於是我將招商銀行卡插入建設銀行的提款機,順利的提取了現金。這樣的場景很常見,但是這些司空見慣的場景背後,是諸多的「一致性」和「標準」組合的結果。最簡單的,銀行卡的尺寸一定是高度一致,從而形成標準的,否則我的A銀行卡不可能塞到B銀行的提款機裡面去;同樣,銀行卡磁條上攜帶的信息格式、讀取磁條的設備等等,都要遵循相同的標準,才可能實現通信。

上圖:要想在ATM上實現跨行交易,銀行卡的尺寸首先要一致

  當一致性形成標準後,它可以起到更大的作用,為用戶帶來更大的便利。例如,幾乎全世界在市場上銷售的手動擋汽車,都是離合器在左腳邊,剎車和油門在右腳邊。我想一般不會有廠商為了「創新」調換這三者的位置,理由很簡單,有了這個標準,你只要會駕駛汽車,理論上你就可以駕駛全世界任何一輛汽車,而不需要重新學習適應,比不遵循一致性用戶體驗會好很多吧。所以哪家廠商如果輕易把這個規則打破,估計它生產的汽車很難賣得出去了。

上圖:左腳踩離合器,右腳踩油門或剎車,是手動擋汽車的操作標準

  在互聯網產品的設計中,一致性也很重要。例如,目前手機上最流行的兩種操作系統——Android和iOS,它們在UI層面都有各自的設計標準文檔,這些文檔規定了在相應的系統下標準的控制項、布局、動效,甚至顏色的使用方式。它們的存在使得同一個操作系統中,完成相似的功能的操作基本一致,(特別是)在智能手機問世的最初幾年,較好的降低了用戶的學習和使用門檻。

上圖:iOS的設計Guideline文檔

  例如,在iOS系統中,對於一個對話框來說,其操作按鈕的排布順序在業界有一些爭議。但是大部分情況下,大家傾向於將代表「肯定性操作」、「有利於流程繼續的操作」的按鈕放在右側。

上圖:在iOS平台,在不同的應用中,彈出的對話框均採用了將「主操作按鈕」放右側的設計

  但是這是在iOS平台,或者說是手機平台上。如果在Windows平台,那我們就要遵循Windows上的一致性,將主操作按鈕放左側了。

上圖:在Windows平台上,同樣是對話框,要遵循另外一套一致性原則

  這種一致性其實在潛移默化的影響著用戶的行為,當你在手機上遇到對話框時,你會傾向於不自覺的去點按右側的按鈕;而你在Windows中遇到對話框時,則會傾向於不自覺的去點擊左側按鈕。這樣的好處很明顯,效率提升,減少用戶的思考。但是,還記得我們在第一篇文章中,在討論設計原則之前提到的「設計原教旨主義」嗎?當你使用一致性標準時,或許它就隱藏在你周圍試圖迷惑你。想像一下,如果是一個非常重要並且危險的刪除操作,在彈出對話框對用戶進行二次確認時,是否應該將「有利於流程繼續」的刪除按鈕放在主操作位置(iOS右側,Windows左側)呢?

  用戶體驗這東西的精妙之處就在於,很多時候沒有固定的答案。這個問題我並不能給出一個確定的觀點,只是想提示各位,在使用一致性(以及其他)原則時,永遠不要忘記該原則最初的目的,永遠不要忘記用戶的具體使用場景、產品的目標等因素,不要成為一個「設計原教旨主義者」。好吧如果一定要出方案,最簡單的,可以按照這麼3種方向去嘗試(請不要陷入到具體方案裡面去,我們只為了說明原則,討論一下方向而已):

  • 將「刪除」按鈕放在主操作位置,然後同步提供「回收站」功能。(這就是Windows的方案,好處是避免誤操作帶來的損失,壞處是把整個流程搞複雜了,真想刪除的時候還要去清空回收站)
  • 將「刪除」按鈕放在輔助操作位置。(好處還是避免誤操作帶來的損失,壞處是,用戶真想刪除的時候,又習慣性的點按了主操作位置的按鈕,結論是流程斷了,用戶也可能會覺得無奈和氣憤)
  • 將「刪除」按鈕放在主操作位置,同時標紅表示警示。然後一旦執行了刪除操作,提供一次「恢復」功能。(這個看起來好一些。第一,它用警示色提示了用戶;第二,它符合相應系統的一致性原則,照顧到了那些真想刪除的用戶;第三,它提供了一個一次性的補救措施,萬一刪錯了,馬上能恢復;另一方面,如果用戶沒恢復,那估計是真想刪。那這個方案有壞處嗎?當然有,邏輯複雜了啊,開發成本增加了啊。所以作為一個產品經理,你要思考的角度是多方面的。)

  另一方面,如果你真的有各方面都更優的方案,則應該拋棄一致性,勇敢的創新。但是請注意,在創新的時候,最好不要跟已有的各種一致性相衝突。

  比如說,現在已經廣泛應用的「下拉刷新」功能,最初出現在一款叫做Tweetie的Twitter客戶端上。這是一個很棒的創新,首先,刷新其實是一個使用頻次不會很高,但是在某些場景下(例如微博類應用,從後台喚起,想獲取最新信息的時候)可能高頻使用的功能。這意味著如果在類似標題欄之類的地方放一個刷新按鈕會比較冗餘,如果不放又滿足不了用戶需求。其次,在一個列表的頂端下拉這個動作,除了在iOS的一些場景中可以划出搜索框外,還沒有其他的定義,不會與用戶的固有習慣相衝突,而下拉刷新與搜索框本身也並不衝突。所以當大家發現了這個功能後,逐一效仿,用戶在用了類似功能後,在其他的應用中想實現刷新功能,也會下意識的下拉一下試試,儼然,這個操作已經在類似應用中形成了一定程度的一致性。並且有一些應用還再次基礎上做了個改進,將其變成了廣告位。

上圖:從左到右,知乎使用了很簡潔的「下拉刷新」4個字,京東有趣一些,你能看到一個快遞員在跑,而網易新聞則是把這裡開闢成了一個廣告位

原則4:及時有效的反饋和解釋

  你是否遇到過這樣的場景:

  在餐館吃飯,叫服務員,叫了5聲,依然沒人搭理你。好不容易揪到一個,跟她說:「麻煩加一套餐具。」人家理都沒理你,就走了,你都不知道丫聽沒聽清,更加不知道這一套餐具究竟什麼時候能拿來。

  打客服電話,轉人工,好不容易打通了,敘述清楚了自己遇到的問題。但是你發現客服除了說很多非常禮貌的廢話之外,基本上沒辦法幫你解決任何問題。

  我就遇到過第二種,不信,有截圖為證:

  如果你看不清圖的話,我簡單敘述一下這個故事。大概意思是說,有一段時間我手機收不到一些驗證碼簡訊,但是別人的手機能收到,並且我把手機卡換到別人手機上,依然收不到,甚至去營業廳換了sim卡也無法解決(這證明簡訊網關、手機和sim卡都沒問題,只能是運營商服務的問題),接連幾個月都是如此。於是我找到運營商的客服,反饋了這個問題。說了半天,對方居然讓我提供「下發內容的具體代碼、對方下發的時間以及對方系統是否已提示發送成功」,話說,我都沒收到簡訊,如何提供這些內容呢?

  以上這些場景中,服務員或者客服都存在著同一類問題,就是給予用戶的反饋和幫助不夠及時,或者雖然及時給了反饋,但是邏輯上說不通,也即不夠有效,從而嚴重影響了用戶體驗。

  不論是人類之間面對面的交流,遠程的打電話、寫信,還是人與機器之間的「交流」,本質上都是信息的傳遞過程。信息有去有回,才能連貫,才會形成有效的交互與彼此的理解。所以及時有效的反饋和解釋尤為重要。

  在幾乎所有需要人機交互的界面上,當用戶進行了某些操作,系統都需要使用變色、形狀改變、振動、發光等方式來給用戶即時的反饋,目的是告知用戶,你剛才的操作我已經知道了。

上圖:在iPhone的撥號界面,當按下一個號碼按鍵尚未鬆開時,這個區域的背景顏色會發生改變,同時這個按鍵代表的數字會在屏幕上方顯示,用以提示用戶「你已經按到了」

  不僅僅是針對於用戶的操作,有時候在產品中出現的一些概念、名詞等,也需要適當的向用戶做以解釋,才能夠確保用戶順利的使用。

  每一個稍微複雜點兒的互聯網產品,都會有諸多的設置選項。但是有一些設置項卻需要用戶理解一定的背景知識才能正確的操作。這時就有必要向用戶解釋一下,例如在iPhone的設置選項中,有一個界面是這樣的:

  在這個界面中,有一個選項叫做「數據漫遊」。對於普通用戶來說,單看這個選項的字面意思,貌似無法清楚的意識到,將它打開或者關閉將會發生什麼。所以在它的下方,緊接著放置了一段文字說明,用以提示用戶,這個選項是用來防止在異地旅行時產生高額漫遊費用的。並且,還列舉了最常用的幾個可能產生數據流量的行為,如「Web瀏覽」「電子郵件」等。這樣,即便用戶完全運營商的「數據業務」沒概念,他也能意識到,在漫遊時使用這些功能,就可能會被「大量扣費」,從而做出適合他的設置。

  除了互聯網和軟體產品之外,很多體驗原則其實在更大範圍內是通用的。我們來看一個日常生活中的案例吧。

  有沒有這樣的經驗:你來到一個陌生的公交站牌前,尋找某條到達A站的線路,找到後開始等車。過一會車來了,你上車。但是走了一段,你覺得好像不對,於是仔細查看公交車上面的站名表,發現坐反了...

  這個場景中的問題在於,公交站牌只提供了站名列表,但是並沒有有效的提醒你行車的方向。有的城市有箭頭指示,但是一般那個箭頭都不太明顯,並且在這個方案中,需要將站名列表與箭頭相結合才能表意全面。比如這樣:

  在深圳,你會發現這個問題被很容易的解決了,因為你會發現深圳的公交站牌上站名列表是這樣的:

  每一條線路,除了列出了所有站名,還同步將這個方向已經通過的站名標記了灰色。在大多數人的認知中,灰色與黑色配合,則代表著「失效」。所以這個方案雖然並沒有直接表述行車方向,但是可以較好的提醒用戶他有沒有站錯位置,理解成本也低,用戶體驗不錯。

  這個案例也引出了另外一個問題,就是,我們應該如何向用戶解釋和反饋?答案很簡單,但是比較虛,就是「要弄清楚用戶的需求和使用場景」,這個答案幾乎是所有互聯網產品設計問題的終極答案。

  在上面這個案例中,很多城市都是提醒用戶行車的方向。但是了解方向其實並不是用戶的最底層需求,弄清楚方向的目的是為了讓用戶站對站台,上對車。當我們理解到了這一層,我們就應該能夠想到,為什麼要造出一個「方向」的概念讓用戶去思考呢?你只要告訴用戶,如果你要去的是黑色部分,就站這兒就對了;如果你要去灰色部分,那你要去路對面看看。簡潔、明確,這才是用戶真正想要的。

  再看一個同樣是跟公交車有關的案例。在一個和城市的繁忙路段,經常會有大量的公交車經過。在某一站停車時,如果恰好趕上了多輛車同時停靠(這種概率是很大的),就會使車站附近的道路擁擠不堪。這種情況下,一般的方法是將同一個站名的車站分開設置2個或更多的站台。這樣雖然緩解了擁堵的問題,卻產生了另外一個問題,如圖:

  騰訊公司附近的公交車站叫做「深大北門」。這是一個繁忙的路段,最多時會有近50條線路的公交車經過。於是該站的站台被一分為二建設。同樣叫做「深大北門」的2個站台,相距300米左右。

  設想一下這樣的用戶場景:我要去拜訪一個朋友,他打電話告訴我說:「你從公司出發是吧?那你到深大北門坐B線路公交車,到xx站下車就行。」好的,天氣很熱,我從騰訊大廈出發,向東走,找到了公交站。我極力尋找打算搭乘的B線路公交車,找了很久,發現,沒找到... 我已經汗流浹背。這時,我並不知道其實附近還有另外一個站台。或者即便我知道,我也搞不清楚另一個站台在哪個方向,我該往東走,還是往西走。

  很差的用戶體驗,不是嗎?但是解決的方案其實很簡單,看圖:

  首先,我們發現站名後面跟著一個編號。例如,圖上所示,是「深大北門②」。這時,我就會意識到,附近應該還存在著一個「深大北門①」的站台。緊接著,下方放置了「溫馨提示」。告訴我另一個站台的具體方位,以及列出了在另一個站台停靠的線路列表。至此,問題解決了。

原則5:形式追隨功能

  在互聯網行業,很多設計師最討厭的事情就是別人叫他「美工」。如果你去BAT或者其他稍微大一點兒的互聯網公司的招聘網站上翻一翻,你會發現他們很少會招「美工」這樣的職位,即便有,大部分也都是類似「客服部」、「行政部」之類不做產品的部門。主流的互聯網公司早已達成一致,就是互聯網產品的「設計」,遠遠不是「美」那麼簡單。即便單說「美」這個維度,也要美得有意義,絕不僅僅是所謂的「有創意」、「有視覺衝擊力」這個層面上。


  「形式追隨功能」這個原則,或許就是「美工」與「設計師」的分水嶺之一。這個原則最初由建築設計師提出,在互聯網行業,我將其解釋為:對於一個產品來說,形式上的、視覺上的、起裝飾作用的東西,應該是為功能和用戶場景服務的。


  很多人總是習慣性的將「設計」與「藝術」聯繫在一起,但我認為,能夠與「藝術」聯繫在一起的,大部分是狹義的,針對表現層的設計。而我所理解的大部分設計,是跟藝術完全不同的。簡單說,藝術是給人「看」的,給人「感受」的;而設計是給人「用」的,幫助人類解決問題的。所以這兩者最初的出發點就是不一樣的。形式追隨功能這個原則也一直在提醒我,時刻記住兩者的區別。


  既然是建築大師提出的觀點,那我們就先來看看建築方面案例吧。首先必須承認的是,有時候在功能之外,需要有點兒「情懷」。所以很多時候一些小的「設計」如果能夠讓用戶身心愉悅,會心一笑,即便它沒什麼用,也是不錯的。


  在紐約地鐵的某個車站,有一個很長的通道,據說每天會有很多上班族行色匆匆的路過。在這條通道上,每隔一段距離,如果你抬頭看,就會有一句話,就像下面這張圖:

  而這些句子連起來,居然是一首詩:

Overworked.

So Tired.

If Late

Get Fired.

Why Bother?

Why the Pain?

Just Go Home.

Do It Again.

  這東西看起來好像沒什麼「功能」,但是很有趣,可以讓人會心一笑。這是好的設計,或者換句話說,能夠讓用戶身心愉悅,也是一種「功能」。


  但是有的建築,過度追求形式,不但對「功能」沒什麼幫助,還會引起用戶反感。2012年,美國有線電視新聞(CNN)旗下的生活旅遊網站評選出了全球最丑的十大建築,中國瀋陽的一棟叫做「方圓大廈」的建築榜上有名。我看到這則新聞的時候,馬上去搜索了一下方圓大廈的圖片,結果... 僅個人感覺,的確,丑...

  後來我還簡單搜索過相關資料,試圖去了解這樣的設計是不是有什麼功能上的好處。但是沒找到有說服力的資料。如果既沒有功能上的好處,又讓人覺得丑的話,那這樣的「形式創新」就真的是一種失敗的設計了。


  對於互聯網產品來說,也是一樣的。下圖是國內某銀行信用卡app的主界面:

  這個手機app內部有很多不同的功能,從賬戶查詢、還款操作,到辦卡申請、開卡、分期,再到商城、優惠信息、積分兌換等等。但是該app的主界面上的大部分面積,被一朵我個人認為並不漂亮的「花」佔據... 這個形狀本身其實並沒有特別大的意義,但是卻佔用了大量的空間,以至於想推活動的時候,經常需要給用戶彈下面這樣的浮層,不但會阻斷用戶操作,引起用戶反感,而且一次只能推一個活動:

  其實,何必追求這樣華而不實的形式呢?我們來看另外一家銀行的app吧:

  上圖是招商銀行的兩個app。招行貌似將用戶場景分成了兩類,對應的是兩個不同的app。


  左側的名叫「招商銀行」,以功能為主,是與銀行賬戶強綁定的,提供的功能主要是各種銀行服務,例如賬戶查詢、轉賬、理財等。這個app裡面大部分信息的組織形式是嚴謹、簡潔的列表形式,用戶可以比較方便的找到所需功能,操作也會比較順暢(除了一部分內嵌wap形式的功能比較亂,其他還是挺順暢的)。


  而右側的app叫「掌上生活」,以運營為主,會提供招行體系下包括信用卡、借記卡在內可以享受的各種優惠活動信息。其信息組織形式要活潑、生動得多,會出現大量的圖片,會像電商網站一樣將數字(包括人民幣和積分)放大顯示,更加能夠吸引用戶的關注,更加適合沒事兒「逛一逛」的用戶場景。


  這兩個app在信息的表現「形式」上區別還挺大,但都是為各自的功能服務的。我認為是銀行裡面比較不錯的設計。


  再看一個生活中的例子。如果你注意一下城市中的各種路牌、指示牌,你就會發現,所有指示牌上面的文字,都是非常簡明的黑體或者宋體。

上圖:常見的街道上的指示牌,文字大多數是簡明的黑體。

上圖:香港國際機場的指示牌,或許是繁體字筆畫太多,用黑體類的字體會聚成一團,所以在這裡中文部分使用了相對簡潔的MingLiU體(類似宋體,筆畫比較細一些),英文部分則是類似於Tahoma之類的字體,跟中文用黑體類的感覺差不多。


  這些都是在日常生活中很自然的設計。因為指示牌的核心功能是用於指示地點或者方位的,所以其最底層的要求,就是讓行人(或者機動車駕駛員)能夠很容易的(有時候是距離較遠的時候)看清楚上面的文字。這是典型的形式追隨功能的正面案例。不信,我換一下字體你體會一下:

上圖:將指示牌上的文字字體換成更加「飄逸」的舒體,(我知道... 正常的設計師很少會用這個字體... 我就只是舉個例子而已,別罵我...)其識別度會降低。是不是覺得,不如原來黑體看得清楚?如果距離再遠些,就更加看不清了。(英文部分我就不改了,如果改掉會更加明顯)


  繁體中文由於筆畫多,更慘:

  以上案例已經能夠很明顯的看出,如果拋棄了功能,單純的去做形式上的「創新」——甚至有時候根本不是創新,而只是「不同」——往往無法做到好的用戶體驗。


原則6:單一任務,漸次呈現

  在偉大的首都北京,有一個被戲稱為「世界第九大奇蹟」的建築,這就是傳說中的西直門立交橋。這座橋結構狂複雜,並且據說在每天的不同時段通過,即便是去往相同的方向都有可能有不同的走法。很多北京的計程車司機都不敢說自己能走得明白。


  西直門立交橋的主要問題我覺得是產品策劃的問題,或者往大點兒講,是產品戰略(所謂的城市規劃)問題。但是這些都太大了,我只是想用這座橋底下的一個路牌來引出一個小得多的問題。路牌是這樣的:

  雖然如果您現在去西直門找,已經找不到這個路牌了,因為已經拆了。但這真不是段子,是真實存在的。如果您把路牌這東西看作UI的話,這個UI的確真實的反應了產品的功能,只是,它包含的信息量太大了。它一次性告訴用戶,要在5個不同的轉彎處選對方向,還不能錯過任何一個。這麼大的信息量,在司機開車路過的瞬間,很難記得清楚。或者,即便真的記住了,其實圖上每一個圈對應的實際道路都是不一樣的(雖然圖上看起來一樣),有的是大圈,有的是小圈,有的是上引橋,有的是進入主路,在實際駕駛過程中很難操作準確。


  這就說到了我們將要討論的這個原則,叫做「單一任務,漸次呈現」。與之前我們討論過的各種原則相比,這一則更像是一個小tips,是學習過之後馬上就可以當工具直接用的。在一個流程中,我們最好是將整個流程拆分成一個一個的步驟,並且在每個步驟裡面引導用戶只做一件事情。


  還是拿路牌來說,如果是一系列複雜的轉彎動作,可以考慮將其拆分成幾個步驟,在每一個分支處給用戶單一的引導。例如,在深圳深南大道東行方向,行駛到「深南南海立交橋」時,會首先看到這樣的一個路牌(圖片來自:騰訊街景地圖):

  這個路牌標註還算清晰吧,假設我想去「濱海大道」,我就知道,這裡應該從右側上引橋。進入右側車道後,又能夠看到第二個路牌,如下:

  又有一個路牌,告訴我濱海大道靠右。於是我靠右直行,即可前往濱海大道方向。當然,這個方案也不是沒有問題,相反,其實問題挺多的。比如,兩個路牌距離比較近,不熟悉路的新手司機有時候反應不過來,來不及變道... 但這已經不是這個原則的討論範疇了。其實由此我們也應該能夠意識到,單一的設計原則往往只能解決或者緩解單一的問題,永遠不要指望有一個公式一樣的東西存在,只要套進去,就搞定。不可能的。(換句話講,如果有一天,設計行業的大部分問題都可以通過簡單的公式解決,那設計師們也就真的變成「美工」了。)


  在互聯網和軟體行業,這個原則也有比較多的應用,比如最典型的,就是Windows的「安裝嚮導」。如果我沒記錯的話,「嚮導」這種形式在Windows系統最初的應用應該是在Windows95上面。微軟當年將安裝Windows95整個過程切分成一個一個的步驟,將每一步依次呈現給用戶,用戶在安裝過程中,每一步一般只需要做一件事情。例如下面這張截圖,是用來設置用戶信息的:

  「嚮導」的另一個好處是,因為形成了類似流水線的方式,所以對於非關鍵步驟,可以給用戶提供默認設置。這樣,用戶如果不想更改設置,只需要使用「上一步」和「下一步」按鈕,就可以控制流程前進或者後退。嚮導的大量應用,讓用戶在Windows操作系統上安裝軟體變得特別容易,即便您看不懂路徑設置,看不懂功能模塊選項,甚至即便軟體界面是阿拉伯語,您只要不停點擊下一步按鈕,就能成功安裝了(當然,Mac OS上拖一個圖標就搞定的方式更簡單)。


  在手機平台上,單一任務的設計更加重要,特別是對於比較長的流程來說,因為手機屏幕太小了。比如說著名的Instagram,將發布照片的流程分為3步,分別是:拍攝-調整(濾鏡)-添加說明。

  這樣的步驟有利於用戶在每個節點集中精力做好一件事情,以便於優化最終的效果。比如,拍攝環節,用戶集中精力構圖,決定要將哪些被攝主體收入鏡頭;調整環節,用戶對顏色、風格進行細緻化的微調,以適應自己的喜好;添加說明環節,則可以聚精會神的編寫文字。每一個環節要進行的操作被嚴格控制,這也有利於降低用戶的認知成本。


原則7:Less is More

  不太有經驗的產品經理和設計師比較容易犯的一個錯誤就是,將一大堆功能沒有主次,不分先後的塞進一個容器裡面。看起來功能強大,四通八達,但實際上信息組織混亂,功能之間邏輯不清晰,用戶體驗一般不會太好。比如這個:

  上圖是某銀行手機客戶端的界面。仔細研究一下,發現它的最底層結構貌似是「手機銀行、金融資訊、直銷銀行、生活商城」這4項(上面第三個界面,是點擊「手機銀行」後出現的,這裡同時違反了一致性原則),而這4個TAB中每一個都堆滿了各種入口,並且這些入口裡面有的還有非常複雜的三級或者更多級的入口和結構。再仔細研究,發現甚至有一些入口是重複的。


  以上這個案例所引出的是一個老生常談的原則,估計很多朋友都聽說過。就是「Less is More」。它最初由建築大師Ludwig Mies van der Rohe提出,是一種提倡簡單,反對過度裝飾的設計理念。這個原則歷史太悠久,在很多行業中衍生出了很多不同的解釋。在互聯網行業,類似「簡約的設計風格」、「做減法」、「把不必要的內容收起來」、「7加減2原則」等等說法,都或多或少與這個原則有關。


  在傳統行業中有很多Less is More的成功案例。比如,1979年,索尼發現大部分用戶對於播放的需求遠遠大於錄音,所以他們去掉了傳統錄音機的錄音功能,甚至去掉了當時認為必不可少的外置揚聲器。然後把剩下的部分做到一個小盒子內,並配以立體聲耳機。這就是風靡全球的Walkman隨身聽。

上圖:就是這貨,當年可是潮人物件。帶這玩意兒上街邊走邊聽,酷斃了


  1984年,IBM在滑鼠和軌跡球的基礎上,精簡結構,發明了TrackPoint(小紅帽),在移動設備上有效的替代了滑鼠的功能,並解決了軌跡球佔用空間過大等缺點。現在TrackPoint已經成為了Thinkpad筆記本的標誌,並且類似的設計被應用在很多其他品牌的筆記本電腦上。


  2007年,蘋果精簡了手機的按鍵,甚至砍掉了傳統的實體鍵盤,推出了iPhone。後面的故事你們都知道了。


  Less is More的正面案例太多了,很多朋友都已經能夠很熟悉的應用,所以,其實今天不想跟大家討論這些,而是希望能討論點兒不一樣的。我們從另一個角度切入,就是,看看Less is More是如何被理解錯,用錯的。


  Less最初的意思是反對「過度裝飾」,並不是一味的追求所謂的「簡單」。我所理解的Less,是我們要努力降低用戶的認知和操作成本,這才是在互聯網行業Less的本質。


  還是某銀行的app,在你點擊一個叫「xx商城」的入口後,或許是在不同的城市,商城提供的商品不同,所以它會先進入一個選擇城市的界面,這個界面是這樣的:

  天啊... 把所有支持的城市列了個表。沒有看出任何邏輯順序!太不負責任了吧?請問,深圳在哪兒?杭州呢?南京呢?這樣的設計(或者說,這玩意兒有「設計」嗎?)根本不是Less好不好?是懶!在這個案例中,如果要幫助用戶更加高效的尋找到他需要的城市,我們要做的不是減法,是加法。


  比如說,最簡單的,至少排個序吧:

  將所有城市按照其首字母A-Z的順序排列,尋找起來會容易很多。如果同步提供快速定位功能(界面右側,類似iPhone的通訊錄)則會更加高效。


  如果你繼續思考,可能還會發現其他問題,比如:

  • 能否讀取用戶的地理位置信息,然後在這個列表裡面給出一個建議選項。例如,發現我目前在深圳,就把深圳作為默認選項(但是我可以修改)。
  • 上面那個方案,好像A-Z的方式解決了問題。但是如果用戶不懂英文或者拼音呢?這個還是不work吧?要不要考慮按省份分類?這個app的目標用戶中,完全不懂英文的人佔多大比例呢?

  回到Less上來。很多時候它會成為產品設計者懶惰和推卸責任的借口。我們在日常工作中很容易遇見這樣的場景,就是對於一個功能,想著想著,想不明白了,產品經理就說:「哎呀算了,簡單點兒做,先只考慮xxx吧。」或者開發就說:「這樣太複雜了,為了這一個功能,整個架構都變複雜了。還是別做這個xxx了吧。」這其實並不是Less。事實上,如果你希望用戶側Less,產品邏輯側和開發側,很多時候就是要More。「做減法」不是單純的「少」,也不是簡單的「砍需求」,相反,是更加深入的思考每一種可能(對於試錯派,也應該是盡量多的試錯,遍歷盡量多的可能性),最後用最合理的方案,讓用戶付出最少的認知成本,達到用戶的目的(以及你的目的)。


  另一方面,很多時候你的產品能否足夠Less,是要取決於其他因素的。比如技術因素,比如環境因素。最近在網上流行的一個視頻,就是有力的證據。


視頻封面車載電話不懂方言 山東大漢怒罵語音服務視頻

  視頻上的山東大叔已經要瘋了。開車的時候,需要撥電話,為了保證行車安全使用全語音撥號,這是個非常棒的設計。看起來好像能夠讓司機很簡單的完成需求,夠Less吧?但是從視頻上(以及我看過的該品牌設備的評測文章)看來,這玩意兒的中文語音識別準確度並不高。視頻裡面的大叔作為山東人,說山東話至少沒什麼錯吧,但是識別情況一塌糊塗。我看過一些評測指出,普通話的識別率其實也不怎麼樣。


  說白了,這個產品使用的語音識別技術並不成熟。在這樣的技術限制情況下,產品雖然很希望做得Less,但實際上效果並不好。這時候不如More一些,用笨一些麻煩一些但是更可靠一些的方式解決問題,總比不work好。比如說,是否有可能考慮這麼幾個方向:

  • 3遍語音識別失敗後,引導用戶使用撥號按鍵。
  • 擔心開車使用撥號按鍵有危險,能否把這個設備跟多功能方向盤(很多車都有吧)結合?使用方向盤上的按鍵輸入號碼。
  • 如果擔心在方向盤上放一個10鍵的數字鍵盤還是有可能會讓司機分心發生危險,那可否放一個單項按鍵?按一下,代表1;按兩下,代表2。如果停止按鍵超過3秒,則系統語音報出剛才輸入的數字,然後等待下一位數字的輸入。這方案聽起來逼格很低吧?但是它足夠穩定,能解決問題啊。
  • 再往前走一步。我們真的需要通過輸入電話號碼的方式撥號嗎?事實上除了一些類似預定酒店、預定餐廳之類的臨時性場景外,大部分情況下我們打電話並不使用撥號盤,而是通訊錄。不信請現在回憶一下,你手機通訊錄裡面有幾個人的電話號碼是你真正能背下來的?所以輸入號碼撥號這事兒,本身就有偽需求的嫌疑。那如何設計邊開車邊撥號的功能,我沒多想,留給大家去思考吧。

  再稍微深入一點點。在這個原則最後我想斗膽討論一下「扁平化」和「擬物化」的問題。這是個最近幾年在UI設計界非常熱門的話題,在各種論壇上就像是「php是最好的語言」一樣經常能吵起來的話題。


  首先,明確的反對類似下面的觀點:

  • 擬物化已經過時了!未來是扁平化的世界。
  • 你的這個界面/圖標/banner/海報怎麼還沒拍平?太跟不上時代了。
  • 扁平化時代來了,設計是不是誰都能做了?你看這圖標要畫出來多簡單!你看這界面,我用Windows畫圖就能畫。

  關於扁平化設計,網上有各種各樣的觀點。我個人比較贊同的是這樣:

  1. 現在是一個信息爆炸的年代,信息越來越多,越來越雜。所以對於用戶來說,應該把注意力集中在有效的信息本身上面,而不是界面上。扁平化設計將界面弱化,將多餘裝飾Less掉,將信息突出,更加能夠適應現在以及未來世界的發展。
  2. 在iPhone剛剛推出的那個年代,大部分用戶還並不太熟悉這種使用手指操作的設備。擬物化設計因為更加接近於現實生活中的各種物件,所以在當時有利於降低用戶的認知門檻,有利於引導用戶更加「自然」的使用設備。但現在智能設備已經非常普遍,用戶對於「使用手指,通過屏幕來操作設備」這件事情的基本方法已經比較熟悉了,對於現在的大部分用戶,給他一個方框,裡面寫兩個字,他就知道這是按鈕,能夠接受點按操作。所以綜合第一點,類似陰影、按下效果等等擬物化元素已經沒必要了。

  以上邏輯聽起來都是對的。但是,擬物化有一個重要的好處,就是它更加接近於真實世界,以至於,它更加容易引導用戶獲得「沉浸式體驗」。就僅僅是基於這一點,擬物化設計不但不會死,而且在相當長的一段時間內都會活得很好。比如說:

  • 對於遊戲的UI設計,十有八九是擬物化更加合適。理由很簡單,因為遊戲是一種需要引導用戶獲得「沉浸式體驗」的東西。一個遊戲好不好玩,很大程度上取決於它的「畫面逼真程度」。
  • 對於特定的用戶,例如老年人,他們可能並不是很熟悉計算機或者觸控類設備的操作。所以如果你要設計一個老人手機,或者給老年人使用的電子設備,那就可以考慮回歸擬物化設計。因為這玩意兒更加接近於現實世界,能夠降低這些特定用戶的認知門檻。

上圖:擬物化設計在遊戲中依然有著廣泛的應用


  至於有人認為扁平化時代的到來意味著不再需要專業設計師,這種觀點簡直懶得討論了。舉個例子,假設你想表達一個「橘子」的形象,最容易的方式,是拍一張橘子的照片,還是只用單色繪製出一個讓人覺得像「橘子」的簡單圖形呢?有沒有想過,你畫出的「橘子」圖形,可能會讓人誤以為是橙子或者檸檬。事實上,扁平化的設計因為細節變少了,所以對設計師的表現力的要求,不但沒有變低,反而是變得更高了。


  綜上,我認為雖然從邏輯上,扁平化是一種所謂的「趨勢」。但是人總是很奇怪的,很多時候我們追求的並不僅僅是高效,很多時候我們並不是「理性」的。有人喜歡簡約的宜家風格,就會有人喜歡所謂的歐式復古風格。所以我更加傾向於認為,扁平化和擬物化只是兩種不同的設計風格而已,現在看起來好像是扁平化更加「流行」,事實上流行這事兒,你還真說不準以後會怎樣。我們不應該僅僅為了「趕時髦」而將什麼都拍平了。

  Less不能流於表面,「設計」也一樣。

參考:
《寫給產品經理和設計師的用戶體驗知識1 - xidea的咖啡館 - 知乎專欄》
《寫給產品經理和設計師的用戶體驗知識2 - xidea的咖啡館 - 知乎專欄》
《寫給產品經理和設計師的用戶體驗知識3 - xidea的咖啡館 - 知乎專欄》

(前文提到的最後3個原則以前都或多或少的寫過,在此先省略了。)


本來想整理一些,後來發現視頻的感染力比文字羅列更好,於是發上來了
百度商業UE團隊整理的設計原則,不全,但是理解起來很容易
設計原則傳遍中國總結


居然沒有人提到NN Group最經典的Heuristic Evaluation的十原則。

10 Heuristics for User Interface Design: Article by Jakob Nielsen 指一些評測員來檢測評價界面是否符合一些廣為人所知的交互設計的十條可用性原則。大家可以查看NN group原英文,獲得更加精準的了解。


1 Visibility of system status

可視性原則:系統狀態有反饋,等待時間要合適

e.g. 鍵盤大寫的時候會有小綠燈告訴你哦!

2 Match between system and the real world

不要脫離現實 :使用用戶語言而不是開發者語言,貼近生活實際而不是學術概念


e.g. 惹人厭的404錯誤,根本不明白什麼意思好嗎!

3 User Control and Freedom

用戶有自由控制權:操作失誤可回退


e.g. 啊不小心發錯了,求撤回!

4 Consistency and Standards

一致性原則:同一事物和同類操作的表示用語要各處保持一致

e.g. 熟悉了一個Adobe產品,其他的我就都會啦!

5 Error prevention

有預防用戶出錯的措施:關鍵操作有確認提示,及早消除誤操作


e.g. 哎媽差點刪除錯了!

6 Recognition rather than recall

要在第一時間讓用戶看到:識別勝於回憶,提供必要的信息提示(可視易取),減少記憶負擔


e.g. 我對什麼感興趣來著?哦哦有選項啊,那就方便多啦,我對旅行、藝術都很感興趣哦!
(pinterest在用戶註冊後詢問用戶preference的時候直接提供選項,避免強迫用戶回憶。)

7 Flexibility and efficiency of use

使用起來靈活且高效:為新手和專家設計定製化的操作方式,快捷操作可調整。


e.g. 我用CAD已經是一把好手啦,才懶得去菜單欄里找insert rectangle呢,我就用快捷鍵就行啦!

8 Aesthetics and minimalist design

易讀性:減少無關信息,體現簡潔美感


e.g. 我用Cash這個應用就是為了打錢的,不要看到其他信息,我只在乎金額!
(很多交互設計的初學者都會容易有一個誤區,就是想把頁面填滿。實際上,你頁面上放什麼,什麼信息要突出,取決於你的用戶需求。避免為了「填滿」界面而放入無關信息。)

9 Help users recognize, diagnose and recover from errors

給用戶明確的錯誤信息,並協助用戶方便的從錯誤中恢復工作


e.g. 哎腫么進不去了?哦哦還好,有人可以幫我/方法可以解決。

10 Help and documentation

必要的幫助提示與說明文檔:無需文檔就能流暢應用當然更好,一般地文檔很必要,而且也提供便利的檢索功能,面向用戶任務描述,列出具體實現步驟,並且不要太冗長。


e.g. 哎怎麼從web page導入PDF啊?搜索一下!哇一步一步的help documentation好清楚啊!

節選自June的免費直播講座。圖片來源於網路,在講座中均有credit。


其他關聯文章:

如何自學UX設計

UX元素與方法

想學UX, 從讀書開始

UX設計作品集展開式

UX前景,轉專業方式,作品集


特贊編譯團經授權編譯了人機交互專家 Bruce Tognazzini 的文章《交互設計的首要原則》,無論是對於傳統的GUI環境、網路、移動機械設備、可穿戴設備、或者聯網的智能設備,這些介紹都是在設計中簡單又快速起作用的原則。

原文較長,先貼鏈接:
Tezign教程 | 交互設計的首要原則(上)
Tezign教程 | 交互設計的首要原則(下)

接下來是正文。滿滿的乾貨,請自備健胃消食片Orz
---------------------------------------------------------------------------------------------------------------------------

目錄


?引文

?美感

?預期

?自主性

?顏色

?一致性

?默認值

?可發現性

?用戶的效率

?可探索的界面

?費茨定律

?人際交互界面的對象

?減少延遲

?易學性

?隱喻的應用

?保護用戶的操作

?可讀性

?簡約

?狀態

?可視化導航


引文


高效的界面大多在視覺上色彩分明並且可變性較高,能夠讓用戶輕易地掌控。用戶能夠很快地看到每一個選項的功能,掌握如何實現他們的目標,並很快開始著手做事。它不需要用戶提供內部系統的工作原理,用戶只需下簡單的指令,每一個步驟就都會被認真清楚地保留下來,並隨時撤銷任何活動,同時開啟並執行多項應用工作。


因為在互聯網或者移動設備上,應用程序或服務不會被改變,那麼這些設施的原則就會變得更加重要。

我喜歡蘋果,但它並不完美


我在這篇文章中寫了許多關於蘋果產品的例子,特別是它的界面常壞這一方面。蘋果在交互設計上有著許多革命性地突破,我深信這一個局面將一直持續下去。他們也存在缺陷,相對其他品牌較少,但由於我用的幾乎都是蘋果,我天天都會遇到面對和遭受這些缺陷。在我編寫這篇文章的時候,我用的是蘋果,那就很自然而然地我會用它來舉例了。


請不要因為這篇文章而覺得我是一個討厭蘋果的人。1978年,在我被喬布斯招募之後,我設計了蘋果公司第一個人機界面,我在蘋果公司待了14年,每一個蘋果新產品發布的第一天都能看到我排隊購買的身影,我的大部分退休資金也用於投資蘋果的股票。我愛蘋果,支持蘋果,希望它能做得更好。

美感


?原則:美感設計最好就是留給那些對軟體駕輕就熟的圖形/視覺設計師

?原則:一切以實用性為前提


長久以來時尚都是一個淘汰產品的元素,從衣服到車,皆無例外。一個新的時尚元素不應該也不需要偏離用戶性能,大視覺效果或者大的行為程序改變有時還可以促進生產力顯著增長。


?原則:用戶能夠通過已被視覺設計出來的界面進行相對的「視覺設計」


在用戶設計好自己的頁面後,與呈現出來的界面效果如果能夠相互切合,又不會影響原有設計程序和規劃的功能性,能讓用戶滿意,那麼這個設計就算是在一定程度上取得了成功。如果不是的話,那麼設計師們就要重新考慮新加入的美感的問題了。


預期


?原則:為用戶考慮每一個過程中所需要的所有的信息和工具


軟體與硬體系統應該嘗試去預測及迎合用戶所需。不要等著讓用戶離開眼前的屏幕去搜尋他所需要的信息。他所需要的信息應該是已經被安置放在他眼前,能夠隨手用的。


預期設置要求設計師能深入地了解他任務關鍵所在和用戶所需,洞察出用戶的欲求。同時也要求足夠的測試去確保目標是否真正地實現。如果一個工具或者信息來源就在屏幕上,但用戶卻找不到,那麼它就沒有存在的價值了。


失敗來臨前不會提前通知你,它總是突襲並且久久不願離去。特別是如果你沒有一個受你俘虜的用戶,正如公共網址和一些應用程序,用戶開始使用後通常都不會停止使用它們。但即使你有一個受俘虜的用戶,你沒有受你俘虜的客戶,而這個客戶的員工在花費時間去找新的資源,那麼你的競爭對手將有機會扳得一局。


自主性


?原則:計算機、界面設備和任務環境都「屬於」用戶,但追求用戶的自主性並不意味著我們放棄了我們的原則


給用戶自主選擇的空間。讓用戶能夠快速學習並掌握設備,能感覺自己在掌控設備。但要相對地給予自由和界限。小孩會在封閉的小房間哭泣,也會在空大的房間里哭泣。成年人也同樣如此。成年人感覺最舒適的,是既不封閉又不會過於空大的環境,他們喜歡在環境里自由探索,但又不危險。


?原則:讓用戶自己做決定,即使效果可能會差強人意,失去審美和效率


自主意味著讓用戶決定他們想要什麼鍵盤就用什麼鍵盤,想要桌面設計成怎麼樣就設計成怎麼樣(即使他們喜歡混亂),又或者喜歡什麼應用程序就要什麼應用程序。如果開發人員將這種控制權帶走了,那麼用戶就會感到沮喪和生氣。


?原則:練習負責控制


給用戶自主並不意味著開發人員應該放棄所有的控制。與此相反,開發人員必須掌控必要的控制,給用戶過多的選擇會造成適得其反,無法選擇的結果。然而,就在今天,不少開發商不僅過度地控制設備設計,還在過程中造成巨大的人機交互上的一些錯誤。例如,文章中的字體及其大小收到限制,但人的普通視力無法正常的進行閱讀。在設計程序時提供的編輯文案並沒有考慮實際,單純地考慮到用戶用他的的胖手指用文本游標去移動編輯修改文字,以符合審美需求,卻沒有考慮到功能的已經受損缺失。


比如,他們還會隨意設置時間界限來決定一個用戶是否是有意按壓一個鏈接的,而非只要用戶觸碰一下並向上滑動屏幕就開始滾動了。他們也不會給用戶改變這個時間界限的機會,於是很多用戶因誤觸屏幕進入本不想打開的頁面,這樣的情況每天都會發生很多次。這就是一個不負責任的控制設計。30年前,我們學習到用戶要通過雙擊打開一個文件。觸屏設備的用戶也需要同樣的東西來控制打開鏈接所需要的停留時間。



眼動追蹤

分分鐘的完美鏈接觸發口


在解決這種意外鏈接觸發時,你需要考慮用戶之間的區別,即用戶是不小心觸發了鏈接和用戶想要觸發鏈接兩者之間的區別。


想想看這兩者之間的區別其實很簡單。當我嘗試觸發一個鏈接時我會看著它。如果是意外觸發的鏈接我不會看著它。打開相機或者使用一個內置的專用眼動跟蹤器去查看用戶的眼睛,如果他看著鏈接的時間足夠長到他的腦海里已經有了鏈接的印象並且發現他正觸碰它,那麼就說明用戶正在主動去觸發鏈接。如果他並沒有看著鏈接,那麼就是意外地觸碰到了的鏈接了。即如果你有目的有動機時,你就是想要觸發鏈接。但當你認為用戶不是在故意觸碰到鏈接時,你可能忽略了一個事實,那就是——用戶正在觸碰它。


為了節約能量,實施這種方法,在用戶點擊鏈接前相機或者眼動跟蹤器不需要打開,這種方法還需要微調時間進行發展,但還待考究是否準確。


這可能已經被發明出來了,但如果沒有,我把它叫做「眼動跟蹤法——降低意外觸發鏈接行為」,並在此將其放置於共有的公共文化財產中。

?原則:用狀態機制讓用戶時刻都能知道和了解信息


沒有自主是能在缺乏控制的情況下存在的,同時控制也不能在缺乏信息下存在。狀態機制是為用戶提供必要條件並讓用戶時刻能夠應變不斷改變的環境的重要條件。


?原則:時刻保持用簡單的視圖來更新狀態


如果等著用戶來找狀態信息,那樣就太遲了。相反,他們應該能夠看一眼他們的工作環境就能很快地收集到第一手資料信息和狀態。


?原則:確保狀態信息的準確性


狀態信息的更新有時並不準確。我在撰寫這篇文章時,遇到一個狀況,一個用戶更新iPhone或iPad的新一代系統軟體時,進度指示器顯示它大約需要五分鐘來完成這個任務。但實際上,它通常需要一個小時或更多的時間。(新系統本身自我審計需要五分鐘,但緊接而至的幾百兆幾萬兆的信息都需要被轉載)。果斷被騙了,但又只能帶著不自在的感覺拿回她的設備。


顏色


色盲


?原則:無論何時當你在交流中使用顏色去傳達信息時,你應該使用清晰地,次要的線索去傳達信息給那些無法看到呈現出來的顏色的人群。


當下,大多數人有著彩色的顯示器。然而,大約10%的男性和少於1%的女性都有著某種形式的色盲。


?原則:現場測試一下,看你到底是什麼顏色的色盲


在Google上搜索模擬工具。例如,對於網站,你應該嘗試一下Chrometric

對於圖像,則是Coblis — Color Blindness Simulator



左圖為紅色盲,右圖為藍色盲


顏色是一種重要的對接元素


?原則:不要在交流中迴避顏色,因為並不是所有的使用者都能看到所有的顏色


顏色是度量我們有限的溝通能力的重要尺度。比起一個完全不能看到、被關閉了整個畫面的人,一個只是被剝離了顏色的色盲可以做的其實還有很多。對於那些人來說,一個備用線索的存在是很重要的。


?原則:不要因為一個過去的圖像設計風尚而在交流中剝離或者忽略顏色的暗示


通過時尚產生人工的報廢是一種傳統有效地方法來完成從衣服到車這些產品的轉變。然而,一種新的時尚不應該也不需要從用戶性能上進行減損。在完成了審美上的改變之後的用戶測試,會成為新舊設計之間衡量的標杆。要確保易學性、滿意度和生產率已經得到提高或者至少保持不變的水平。如果無法達到,那麼會導致新問題的這些新添加進去的審美元素將會被重新考慮。


一致性


如果那些對用戶來說最重要的一致性領域沒有受到嚴重的擾亂,接下來的這四個放到一起的一致性原則,給交互設計師在產品的演變上提供了巨大的跨度。


一致性的級別


以下清單是根據那些需要最忠實的一致性努力的界面元素來排列給那些最需要的人。(有些人假設這些項目1至6的順序應該被準確的逆轉。這會導致當用戶面對那些看起來相似但實際上表現完全不同的頁面時會產生確實的混亂。)


1.最高級的一致性


平台的一致性:通常帶有一致的法律上和事實上的標準。

內部的一致性:在你的產品或者服務上維持一個正常的外觀和感覺。

要聯繫商標並且使你的其他產品和服務上更容易、迅速的得到採納。


2.一套產品上的一致性,如:微軟辦公工具


通常外觀和感覺要和所有的系列的產品聯繫在一起。


3.一個單一的應用程序、介紹或者服務啟動畫面、設計元素等的整體外觀和感覺


一個視覺性的產品應該被有目的性的建立並且經過對視覺語言的深思熟慮,最後形成於可用性測試。


4.小型的可見的結構,例如:圖標、符號、按鈕、滾動條等。


如果人們沒有花費一半的時間來嘗試弄清楚怎麼去滾動或者列印,那麼這些對象的外觀就需要被嚴格的控制。他們的位置相比於他們的外觀僅略顯次要。如果在哪裡規範它的位置是有意義的,那麼就這樣做吧。


5.隱形結構


隱形結構是指像微軟WORD里的那個巧妙地有著多種神奇的性能的小型左邊框,只要你能發現他的存在。它有可能會或可能不會出現在你這個版本的WORD裡面。如果沒有,那麼因為他的不可見性,你可能永遠都不會確切的知道他是否真的在那裡。如果你堅持使用他們,那麼你就會清楚的了解到隱形結構的問題所在,和為什麼嚴格的一致性會尤為重要。


蘋果明顯的想到了這是個很好的注意,並且開始通過到處在產品中加入從滾動條到按鈕這些隱形結構來複制微軟的做法。這樣的一種情況在Mac上卻顯得很糟糕。在21世紀早期,用戶發現使用電腦許多最基礎功能的唯一方法就是使用Google尋求幫助。


嚴格來說,一些可見的對象像是並沒有被操控過,因此對於自己的設備,使用者可能從來都沒有發現他們被操控後的作用。如果你非常堅持偽裝控制,那麼秘密的法則就會爽快的出現。例如:你可以點擊和拖動當前的Macintosh 窗口來調整他們的大小。或者有時候你可以點擊和拖動不同的東西,但不是其他東西其他時候。要多嘗試各種東西,並看看會有什麼會發生。


如果有的話,比起被用於產生信息的對象,包含信息的對象應該很少被隱藏起來。蘋果在隱形的Macintosh 上製作滾動條時已經違反了這個原則,直到被另一個使用者超越了他們。


6.用戶行為的解釋


改變你對使用者習慣性行為的解釋是你對使用者所做的其中一個最糟糕的事情。快捷鍵必須要維持他們的意義。一個習慣的手勢必須以標準的方式進行解釋。如果一個用來帶使用者去下一頁或者下一幕的按鈕在過去30年里一直是位於右下方,那麼就不要把它移動到右上方。改變一個需要使用者忘掉下意識的動作並且學習新的動作的按鈕的位置,對使用者來說是會令他極其的挫敗的。使用者甚至很可能會沒有意識到發生了什麼,並假設是他們的硬體或者是軟體出現了問題。


如果你想要去吸引其他產品現有的用戶到你的產品中,你應該嘗試著通過同樣的方式去解讀你的新用戶的命令。例如:允許他們去重複使用那些他們已經習慣了的相同的快捷鍵。

案例分析:蘋果「命令」(Command)鍵的修改


幾年前,蘋果最終為了他們鍵盤的快捷鍵而讓windows 用戶能以一個簡單的方式來繼續使用控制鍵,而不是為了命令鍵。那些新接觸Mac的windows 用戶在忘卻或重新學習這樣一個根深蒂固的習慣時面臨著巨大的困難。隨著在辦公室和家裡之間移動而不得不在2種操作系統之間轉換,用戶不得不每天兩次的進行忘卻和重新學習,並且最終會不斷地持續犯錯和在每一次想要利用那些不在快捷的快捷鍵的時候,不得不拋開他們的任務來有意識的考慮要按什麼修飾鍵。轉換和使用雙操作系統大部分的難度由於這一個功能的缺失,並且這從一開始就是一個完全沒有必要的障礙。

感應的不一致性


?原則:當事情作用不同時,視覺上不一致是很重要的。因為當事情作用相同,它在視覺上保持一致性。

要使作用不同的對象看起來不同。例如,垃圾桶是使用者可能會把垃圾放進去並且會在之後拉回來的對象。如果你想跳過這個「把它拉回來」的功能,那也沒問題。只要使它看起來像焚化爐或碎紙機或者其他除了垃圾桶以外的東西。

使更改過的網頁看起來更改過。如果有人在一個更新過的網站或修訂過的應用系統里遇到了不熟悉的頁面,他們能知道去環顧並且找到不同的是什麼。如果沒有這樣一個隱射,他們會嘗試去使用這個頁面確切來說就像他們一直做的那樣,並且這將會失敗。


持續性


?原則:隨著時間的推移,爭取持續性而不是一致性

如果你拿出你的產品重新加工的地方或者甚至拿出一個全新的產品,讓人們即刻辨識出某些發生過的巨大變化。否則,他們將會跳進試圖使用的,準確來說是他們總是用的那個方法而那個方法將不會有效。「均勻性」將意味著你的下一個產品建輝和你最後一個產品相同,這顯然是錯誤的。但「一致性」在一個會有很多發展出現的領域中會相對好一點。我們的目標是連續性,有一條貫穿我們各種各樣的產品的線。還有就是解放,指引著我們的用戶,而非捆綁著我們的過去。


與用戶期待的一致


?原則:最重要的一致就是和用戶期待的一致——威廉·巴克斯頓


能為事物怎樣運轉而做出一個多麼精彩的邏輯論證都不要緊。如果用戶期待它以一個不同的方式運轉,那麼想要改變這些期望的你將要面對的將是一個上坡和常常無法取勝的鬥爭。如果你的方法並沒有提供一個明顯的優勢,那麼就像你的用戶所期望的方向進發吧。



施樂1981年推出的圖形界面操作系統:Xerox 8010 Star,據說這個界面是蘋果圖形界面靈感的來由

案例分析:施樂之星拖動規則


這個施樂之星提出的拖動圖標的規則是一個優雅的典範:

建議規則:拖動一個文件的圖標從一個對象(例如:文件夾或磁碟)到桌面上的另外一個對象將會移動文件。


很好學,也很好理解。邏輯的,受教的,糟糕的。這個規則,要公平,要在大多數時候都行之有效。在某些情況下,它甚至要比我們今天所使用的那些更複雜的規則要有效得多。例如,如果你從你桌面上的文件夾里拖動一個文件到一個軟盤裡,那麼相比於複製到你的軟盤上,移動文件會好得多。如果你在家裡的文件上做了更改,那麼使用那個現在在軟盤上的文件,你可以第二天早上把文件放回你的桌面工作上,而不需要新版本和前天留下的過時了的舊版本。你只要有一個真實的版本。


直到列印施樂之星的時候才出了問題。在那時候,你將會搶那個文件,並把它拖進列印圖標。那個文件被傳輸到印表機並且永久的從桌面擦除了。工程師和設計師之間的為期兩周的戰爭爆發了。設計師贏了,把這個我們今天所擁有的規則放了進去:


最後的規則:在磁碟分區內拖動文件將會移動它。拖動文件從一個磁碟分區內到另一個磁碟分區內將會複製他。


99%以上的我們的使用者可能都不能夠告訴你什麼是磁碟分區,他們理解的是我們不必明確教導的規則。為什麼?因為這是和用戶的期望所一致的,部分的用戶期望是非常強大的以至於開展例行活動將不會導致他們工作的失敗。

默認值


?原則:欄位中的默認值將會很容易被吹走。


當用戶激活一個欄位,當前的輸入應該被自動選擇,因此按退格/刪除或者開始打字的時候將會消除當前輸入。用戶能夠在欄位內單擊來取消整個欄位的選擇並在欄位內落下文本指針,確切來說是用戶單擊的地方落下文本指針。選擇輸入的規則通常是跟隨今天的。然而,草率的編碼會導致文本游標落在不同的、不可預測的位置。


?原則:默認值應該是"智能的",並且會響應的。


不是所有的東西都需要默認值。如果那裡沒有可預測的成功者,考慮不要提供任何的默認值。在觀察一個覆蓋25%的情況下的默認值並決定是否使用它需要一個珍貴的認知周期。同一時間能夠花費進入實際需要的選擇當中。


?原則:有一個更有意義和響應的詞語來代替單詞「默認」


用戶很少有在任何特定情境下關於默認的意義的概念。(當然,他們確實知道它的字面意思,銀行將會帶走用戶的房子。這確實會使他們感到喜悅)用「恢復標準設置」「恢複習慣設置」「恢復初始設置」或者用更多會實際發生的其他特別詞語描述來代替「默認」。使用者嘗試找到能夠使你的用戶準確的預測出你的軟體能夠實際做到的事情的詞語。


?原則:你的視覺設計還有辭彙必須能夠和回復的眼界聯繫。


通過用戶測試,要確信用戶了解修復的範圍:他們簽署了一些最近本地化項目的良性恢復嗎?或者他們將要花費接下來四天重新進入他們所擁有的應用程序的用戶名和密碼嗎?


用戶測試你的恢複選項來找到用戶所認為的按下這個按鈕將會導致的結果。如果你將要做一些良性的事情,但他們把它解釋為潛在破壞性,他們將不會使用這個選項,並會留下他們和使他們認為是在第一個地方使用它的那些同樣破碎或部分破碎的系統。同樣,如果你消滅幾個小時的精心定製而沒有恰當的準備他們,他們可能不會幾乎如你所預料的一樣心存感激。(我有一次在印度有一個年輕的小夥子幫助我解決了我DVR上的一個小問題。當他解決的時候,他要求我重新初始化硬碟,擦除在機器上的每一個程序。這是比我一直在尋找的多了一點恢復。那之後,我能夠開展我和他剩下的甚至不用電話的談話。我從不知道我能夠叫得那麼大聲。)


當涉及標籤的對象,像是屬性和偏好的Windows時,確信視覺設計使恢復按鈕的範圍明確。個人標籤「卡」應該是視覺從周圍窗體中分離以至於按鈕可能會被放置在單個的卡上或者在周圍區域內,推測按鈕的行為將是僅適用於當前選項卡或所有選項卡。沒有留下這樣一個借口可以讓你留下這樣一個含糊不清的範圍。這不是一個時尚的決定。


可發現性


網頁頁面和基於雲計算的應用


當獨立開發者在位於一個為簡易瀏覽靜態頁面而設計的簡單工具的簡單窗口的限制下努力創建一個複雜的網站和app的時候,第一個「由內而外」的應用網頁瀏覽器中出現了。甚至儘管1996年基本範例的不足被一直什麼都沒做的標準委員會為了解決開發商的需求而展示出來。工作於複雜網頁和基於雲計算應用的開發者獲得了瀏覽器的菜單欄。這已經不是一個持續地醜聞了。想像你的老闆告訴你,要去激起一個針對使用微軟Word菜單欄的PS的競爭者。那麼第一個從你口中說出的話肯定是:但這就意味著我不得不把我所有的菜單都放到用戶的圖像所需的窗口內容區域當中!瘋了,對嗎?而這就是當我們每一次創建一個網頁頁面時所要做的。

在筆記本電腦和台式電腦當中,控制項,特別是隱形控制項在內容區域中是不存在的。

案例分析:蘋果的顛倒應用


在早期的21世紀,蘋果開始了從他們Macintosh應用的內容區域周圍的區域到控制項內容區域本身的遷移。控制項會突然出現在那個會隱藏那個用戶企圖去影響、很有內涵的內容的位置。用戶經常不能夠把控制項移動的足夠的遠來看他們正在做什麼。甚至當控制面板能夠被移動到內容窗口之外的時候,它會恢復到原始的模糊位置直到下一次被調用。然而這一個方法在有些時候對於手機應用軟體的設計來說是有必要的,它對基於傳統電腦基礎上的用於大屏幕的app設計是沒有現實意義的。一些有影響力的app會佔用少於10%或20%的用戶屏幕空間,為控制項突然被迫進入甚至更小的內容空間而提供大量的內存。它會導致用戶滿意度和生產力的嚴重下降。

?原則:傳達你的手勢辭彙和可視化圖表


要包括一個展示你的app能夠理解的手勢的幫助頁面。當用戶第一次打開這個app時要展示這個頁面給他,並在之後讓他清楚了解到哪裡可以找到這個幫助頁面。在手機app中,要使代表頁面的圖標持續地可視化或者讓它形成當用戶接觸到觸發區或者是用戶屏幕時會出現在外圍的這個標準設置的一部分。對於雜誌或者相似的媒體對象,要讓它首先打開的每一個問題的頁面(封面之後)都要是在那裡並且是可用的。

?原則:爭取平衡


這不是1980年,當大多數的人們還沒有看過一部電腦,並且我們很有必要把所有的東西都變得非常明顯。你可以使用一個巧妙的設計:不要在頁面中把一個信息圖標放在每一個單個的項目旁邊。反而要使用像這樣的從會立刻解釋每一個象徵和手勢的Google+ Snapseed的覆蓋。要在這裡看到覆蓋是很難得。但開發商已經永久的加強了他們的取消和申請箭頭,書寫標籤。你是怎麼發現這樣一個加強是否是有必要的呢?你是怎麼發現是否用戶能夠找到要按什麼(在這種情況下,一個始終可見的問號會出現在最右上角),以在開始時能獲得幫助?跟隨著下一個原則並得到結果。

?原則:可發現的用戶測試


為了發現你需要的是什麼樣的交流和為了確認你成功的和她交流,你必須通過整個項目做一個常規可用性測試。要使用具有你的預期水平,帶有系統和任務領域有經驗的人來測試。看他們是否能定位,識別,學習並使用他們需要去執行的那個你所期望你的用戶去執行的任務的工具。如果他們不能,要迭代設計直到他們可以為止。使用主動探索,經銷商模式,所有你所需要的東西來確認你的用戶能夠發現並學習到你產品的特點。


以上所有的我所討論那些將有可能使它永遠的投入生產的錯誤,是用戶體驗組進行可用性研究並基於這些結果來改變那些設計。


用戶的效率


?原則:關注用戶的效率而不是電腦的


當我們評判一個系統的效率時,不能只關注機器的運轉效率。人比機器的代價更高,雖然看起來似乎是機器生產效率的提升必然會導致人們生產效率的提升,但是反過來通常也是正確的。舉一個簡單的例子,有人為了少編寫一行代碼並少一些計算周期,而強迫用戶在沒有合理空間間隔的情況下輸入電話號碼,使所有的數字擠在一起。這通常會導致很多號碼輸入錯誤,因為人們無法準確地分辨十個或更多數字來發現錯誤(這就是為什麼電話號碼一般會被分為幾段)。公司中僅僅一個員工浪費在嘗試找回錯誤號碼的正確版本的時間,就遠遠超過編寫一行代碼增加數字間間隔,以使用戶能夠更清晰地檢查並更正錯誤的時間。更嚴重的是,錯誤的號碼會讓公司丟掉訂單,影響銷量。每一個失去的訂單的利潤都足以支撐上千萬個計算周期的損耗。


?原則:讓用戶專註工作


在一個典型的商業系統中,最昂貴的通常是人力成本。一個員工在系統做出反應之前等候的每一分鐘,都是人力成本的浪費。


?原則:想要最大化一個公司或組織的效率,你必須要提高每一個人的效率,而不能只是IT部門或類似的單一團隊


大型機構傾向於將組織切分,每一個團隊都追求他們自己利益的最大化,有時候這樣會影響機構整體的利益。IT部門通常會陷入這樣的陷阱中,他們創建或採用能夠提高信息資源部門效率、降低成本的系統,但是卻降低了公司整體的效率。你的工作就是要去研究:基於新的、省錢的技術的設計,會提高還是降低工作人員的整體效率,並且會在多大的程度上造成影響,是否觸及了公司的底線。


和公司HR部門或者其他部門的領導一起找出受影響員工的時薪(一個常用的經驗法則是將他們的時薪乘以3,來將他們消耗的相關資源包含進去,包括租金、空調、電、技術支持等)。每個人的總成本x受影響的員工數x一項活動消耗的時間x正向還是負向影響了效率,這樣就能計算出實施某項行動會對成本產生怎樣的實際影響。一個正向的數字可以幫助你更好地讓別人接受你的團隊和設計。而負向的數字會阻止一個所耗不菲的錯誤的發生。


?原則:軟體效率質的提升應該在底層系統基礎架構中完成的,而不是在表層的交互設計中


這個真相可以告訴我們為什麼軟體開發項目中的每個人都應該了解「將用戶效率放在第一位」的重要性,並且理解「建造一個高效的系統」和「服務於高效的用戶」之間至關重要的差異。這個真相也要求工程師和交互設計師更加緊密而經常性地合作、溝通和共謀,如果他們希望讓用戶操作更高效。


考慮一下iPad和它所摧毀的上網本之間的差異。這些差異並不是表面的,它與按哪一個鍵打開郵箱毫無關係;真正的差異在更深層,也許你根本無需觸碰任何一個鍵。


?原則:」Error出錯」信息應該是對解決問題有幫助的


」Error(出錯)」信息一定要由經驗豐富的作者撰寫,來:

1 解釋哪裡出錯了;

2 清晰地告訴用戶如何應對這個問題;

3 要留有這樣的可能性:信息是被一個更深層的系統紊亂錯誤激發出來的。

「Error-1264」就沒有達到上述的要求。其實,幾乎很少的」Error」信息能夠做到第一條,就更不要說後面兩條了。而你應該三條都要做到。質量保障團隊應該負責找到那些不符合標準的信息,並向你彙報。


這個列表中的很多其他原則也在影響著效率,特別是減少延遲和可讀性。


可探索的界面


?原則:將標記清晰的路徑和路標呈現給用戶,然後讓他們在道路隨心所欲


現實中我們已經逐漸形成了具有安全性、一致性、可視性和可預測性的導航系統,我們在設計時要做的就是模擬這個導航系統。要注意,在提供服務時不要用單向通路困住用戶,要隨時讓他們可以進行最簡操作。這樣既可以使新用戶和想儘快完成操作的用戶無需費力地達到目的,同時還可以讓那些想要進一步探索或想要知道「如果這樣操作會發生什麼」的用戶有進一步探索的空間。


?原則:有時候你需要提供深層次的慣例


在經驗曲線上,你的用戶處于越初級的階段就越需要引導。一個為達成未知任務而使用的一次性應用需要更直接的交互設計,而為專業人士設計的習慣性應用則不然。深層次的管理也是一種導航。


?原則:要一直讓用戶感知到「首頁」選項


穩定的視覺元素不僅可以快速導航,它們還是可靠的地標,讓用戶可以感知到「首頁」選項。在每個網頁上放置一個公司logo,並放置「退出此頁面」的選項,都可以讓用戶隨時退回到首頁。這樣,用戶會感覺很安全。而反常的是,這樣的設計讓用戶更少的退回到首頁,因為知道自己隨時可以退出。(減少對誤操作和在探索過程中迷失的不安)


?原則:讓操作可撤銷


人們常常會用導航以外的方式進行探索。有時候他們想要知道當進行具有潛在威脅性的操作時會發生什麼;也有時候,他們並不是有意的,而只是誤操作。讓操作可撤銷,用戶就可以隨意地探索了,也可以在操作時偶爾馬虎大意。只有遲鈍的用戶才會是完美的用戶。(我們的工作要盡量滿足那些「不完美」的客戶)


?原則:總是允許撤消前一步操作


不支持撤銷前一步操作會導致一個不可避免的後果——你必須要製作很多對話框來讓用戶確認「你是不是真的,真的確定了?」這自然會減慢用戶的操作速度。


如果你沒有提供這樣的對話框,而且也沒有撤銷選項,用戶會更慢!幾年前的一項研究顯示人們在有危險的環境中比在安全的環境中犯相似或更少的錯誤,但是速度卻要慢很多,因為要非常小心不要犯錯。這對產出有很大的影響。


我們通常認為沒有撤銷只是一種編程時懶惰的表現,然而又是人們是有意這樣做的。比如,一些電子商務網站希望增加你刪除已經加入購物車中物品的難度。我們在Nielsen Norman Group做過一項關於電子商務的研究,這項研究觀察的是當商家令從購物車中刪除商品變得非常方便時,會發生什麼。正如預想的,人們在這些商家購物時更願意往購物車中添加商品,認為「嗯,我稍後隨時可以把它拿出來。」然而,他們並沒有把這些商品拿出來,因為刪除率和其他商家相似。這些用戶只是買了更多東西。


?原則:總是讓用戶知道如何退出


用戶不應被困於一個迷宮中,他們應該隨時可以清晰地找到退出的路徑。


取消導航


在導航程序中,取消是至關重要的。要讓用戶可以隨時離開當前操作,同時要讓他們知道在哪裡找到並繼續。因此在做用戶測試時,可以讓一些用戶在使用過程中中止,兩周後把他們請回來繼續。觀察他們瀏覽的地方,如果他們會去嘗試不同的地方,那麼就要考慮一下是不是在這些地方都要設置功能按鍵。


?原則:讓界面更能吸引用戶持續使用


清晰的工作流會令用戶更願意繼續某項操作,所謂「清晰的工作流」應可以讓用戶準確定位他們的位置以及如何前進後退。舉一個多步驟付款的例子:理想狀態下,為每一個步驟設置明確的標籤使導航可視化,能夠讓用戶知道他們所處的位置;點擊「上一步」,用戶可回到前一頁修改錯誤或更正想法,比如選擇一個新的送貨地址;接下來用戶應可以點擊某個標籤回到之前的頁面並繼續操作。不允許用戶返回前頁或者在他們返回以後不保存當前操作數據,會影響用戶體驗,讓用戶產生不滿。即使他們咬牙繼續當前的付款流程,也很有可能不再回來,面臨客戶流失的風險。


Fitts』s Law 費茨定律


?原則:取得一項目標的時間是與其距離和目標大小有關的函數。

重要功能用大圖標(大圖標更快)。那些你不太希望用戶使用的功能用小圖標來表示。


在兩側、底部、頂部和角落使用固定的功能按鍵:把圖標融入屏幕邊緣的單行工具欄,要比那些精細設計的擁有一個像素的不能點擊的邊界的雙行工具欄快得多。(即使有一個像素的邊界也會使邊緣的工具速度減慢20%-30%)


雖然乍看之下這個規則似乎是顯而易見的,然而它卻是最容易被忽視的原則之一。費茨定律顯示使用Macintosh下拉菜單比使用窗口菜單要快五倍,這就是證明。


費茨定律預測Windows開始菜單是本末倒置的,最常用的應用被放置在離入口最遠的地方,而且測試也證明了這一點。費茨定律表明,任何計算機顯示屏的四個角都是可以最快訪問的目標。然而,多年來,它們卻是設計師們不惜一切代價避免使用的地方。


多重費茨定律:獲取多重目標所需的時間是每一個目標所需時間的總和


在嘗試「費茨」化某個設計的過程中,要注意不僅應縮短距離並擴大目標,還應該減少完成一項任務所必須的目標的數量。要記住,目標可以分為兩種:虛擬世界中的按鈕、幻燈片、菜單、拖拽下拉點等,還有現實中的鍵盤、按鍵、滑鼠、觸屏設備的物理按鍵等等。這些全部都是的目標。


?原則:費茨定律不論是在觸屏設備還是物理設備上同樣有效


費茨定律並沒有隨著智能手機或平板電腦的出現而失效。保羅·費茨在1940年首次提出他的理論,當時他正在進行飛機駕駛艙的物理控制方面的設計,這種設計更類似於觸控界面而不是間接的滑鼠操控。除非屏幕本身是嵌入的,否則屏幕邊角的固定功能就無法實現。然而,目標的距離和大小仍然會如費茨定律所預測的那樣影響操控效率。


?原則:費茨定律需要進行定時的測試


與大部分人機交互領域的設計一樣,你也要做一個定時的可用性實驗,來測試費茨定律的有效性。


人機交互界面的對象


不同於面向對象的系統,人機交互界面的對象是相互獨立的。這裡所說的對象包括文件夾、文檔、按鈕、菜單和回收站。它們出現在用戶的使用環境中,可能會也可能不會直接映射到面向對象程序的對象上。事實上,很多早期的GUI(GraphicalUser Interface 圖形用戶界面)完全是在非面向對象的環境中建立的。


?原則:人機交互的對象可以通過看、廳、觸摸或其他感知來獲取


可視的人機交互對象在GUI中更令人熟悉。而用其他感官(如聽覺、觸覺)感知到的對象則令人感覺不那麼熟悉,或者說要用戶不會必然將其與對象聯繫在一起。比如鈴聲是聽覺對象,但是我們傾向於僅僅將他們當作鈴聲,不會為其進行更高級別的分類。


?原則:對象有一個標準的操作模式


按鈕和滑塊分別通過按壓和拖拽起作用。


?原則:對對象進行特定操作行為會產生特定的結果


放入回收站的文件並不會直接刪除,文件會一直儲存在回收站中,除非選擇「清空回收站」選項才會真正地刪除它。


?原則:對象應該是可理解、結構完整並且穩定的


?原則:如果你希望用戶用另一種方式進行交互或者操作會產生不同結果時,選用一個新的對象


如果把一個文件拖放到你的「刪除文件」圖標上時,文件會立即被永久刪除,那麼不要把它設計成一個垃圾箱。人們的期望總是以曾經碰到過的對象為參照,千萬不要嘗試混淆或淡化這種期望。舉個例子,如果你用了垃圾箱的圖標,並且會拖放到其中的文件會被立刻刪除,那麼你就擴大了垃圾箱的使用情景。垃圾箱的規則不再是「放入回收站的文件並不會直接刪除,文件會一直儲存在回收站中,除非選擇『清空回收站』選項才會真正地刪除它。」而變成了「放入回收站的文件會立刻刪除或者在未來的6-12個月內被刪除」。這不僅會使用戶困惑,同時也令其他使用垃圾箱的設計師無法合理運用該圖標。


減少延遲


只要有可能,就要使用多線程來把延遲隱藏到背景中


多任務技術可以使延遲隱藏在用戶看不到的地方,當後台在進行傳輸和計算時,他們可以繼續他們的工作。當用戶完成一個任務時通常需要等待下一個頁面載入,現代瀏覽器都支持預取數據,這樣就可以減少用戶等待時間。


?原則:減少用戶延遲等候時間


在點擊任何按鈕的50毫秒內給予視覺或聽覺的反饋。

鎖定多次點擊同一按鈕或對象的行為。

因為當網路緩慢時,有的用戶會傾向於多次點擊同一按鍵,使速度變得更加緩慢。


?原則:當用戶遇到延遲的時候,要及時提醒

?原則:讓應用可以更快啟動


刪除所有沒有幫助應用程序元素。要堅決。


早期緩慢的網速使用戶的期望值很低。(這也加速了互聯網泡沫的破滅,人們發現自己開車去購物比「騙」網站賣出東西更快)。而現在,隨著時間的推移,人們對慢速越來越無法容忍了。


移動設備在架構上比網頁瀏覽更加符合傳統GUI的應用模式,它一直在提醒人們電腦可以變得更快,同時他們對延遲也更加不耐煩。對可穿戴設備則有更高的預期:沒有人會願意為了看時間而等待,也不會有耐心等著看來電人的名稱或外面是什麼溫度,或者其他任何應該顯示出來的信息。


當前,由於硬體水平較低、不完善的設計和編程以及高延遲,使得車載應用程序通常非常遲鈍難用。想像一下,當一輛汽車沿著公路以每秒88英尺(27米/秒)的速度飛馳,而用戶的眼睛盯著顯示器,等待其顯示出當前正在播放的是ACDC的哪首歌曲。而此時,事故報告富有諷刺意味地提示「這是通向地獄的高速路」。


易學性


最理想的情況下,產品是不需要學習如何使用的:用戶第一次接觸產品時就可以立刻掌握。而事實上,所有的應用和服務,即使它們再簡單,都還是會有一個學習曲線的。


?原則:限制和平衡


易學性和易用性並不是完全排斥的。首先,要定義哪一個是最重要的,然後儘力把兩個都做好。易學性的增加必然要犧牲易用性這是虛構的神話。

案例學習:Ashlar-Velllum Graphite

在Ashlar-Vellum為自己租一個叫做Graphite的高端CAD/CAM項目。尤其要注意到它是如何讓你在10分鐘內學會產出性地工作。然後嘗試其他的CAD/CAM品牌。這時你會發現6個星期後你還在盯著屏幕,思考怎樣開始。(可以跳過其他品牌,但是真的要嘗試Graphite,它會改變你設計的方式。)

那麼,如何決定易學性和實用性哪一個更重要呢?首先要確定的就是產品的使用頻率:這個產品或服務是一次性的、偶爾使用的還是習慣性經常使用的?如果是一次性的,那麼答案很簡單:易學性。如果用戶每天都會使用,每天8小時直到生命終止,那麼我們的答案也是一樣清晰的:實用性。


下一個問題是,誰是買方?如果是經常使用該產品或服務的用戶本人決定是否購買,那麼產品易學性的口碑會是影響購買的關鍵因素。這就是為什麼我們需要決定哪一個最重要,同時二者又要兼顧。


?原則:避免對易學性的單獨測試


很多測試包含一系列階段性測試,20分鐘至一個小時的時間。最終,測試會顯示出所有有關最初的學習曲線的信息,但是卻無法體現長期曲線和最終的使用結果。

如果要測試一個需要長期使用的應用,請採用另一種方式:與公司的人事部門一同招聘一些短期的專員。然後和他們一同用一兩周的時間試用產品,在不同的時間節點用測試來監測他們的整體學習曲線和最終結果,從而得到交互設計有效性更真實的證明。


隱喻的應用


?原則:選擇能夠使用戶立刻抓住概念模型關鍵細節的隱喻(metaphors)


好的隱喻能夠在用戶的頭腦中建立起與過去經驗之間很強的聯繫,不管是和現實世界還是網路空間中遇到的。這樣用戶可以更快而準確地感知到你的系統的功能和限制。


?原則:通過調動人們的感知——視覺、聽覺、觸覺或動覺(kinesthesia),讓隱喻更生動,同時觸發他們的記憶。


*註:動覺(kinesthesia)是一種對肌肉各個部份的動作或者一連串動作所產生的觸覺,稱呼為「自我知覺」。


嘗試在軟體中讓你的概念本身可視化(即不使用輔助工具)。如果無法實現,那麼可以採用插圖的方式,但是插圖必須簡潔且有意義。測試一下它是否有效,如果有效就將它設置在只要用戶想要查看就可以找到的地方。

案例分析


蘋果的HyperCard應用程式:這是互聯網的先驅,它是一個三層結構,背景層(相當於一個網站的全部網頁),一個前端的「卡片」層——和屏幕相同大小的單獨的卡片,一個包含全部按鈕等內容的針對每一張卡片的邏輯控制層。如果你不能理解這個概念就不能在Hypercard中編程。很少有人能夠理解它,直到平面設計師KristeeKreitman畫了一張三個層次的分解圖。當我們用那張圖來做測試時,每個人都能夠立刻掌握它。由HyperCard發明人編寫的20頁非常精確的使用手冊,結果卻什麼用都沒有。而一張簡單的圖,竟然取得了令人難以置信的成功。


Hypercard 三層分解圖


HyperCard是一個蘋果電腦的應用程式,也是一套簡單的編程環境。原生平台是Mac OS versions 9或更早(也可在Mac OS X的經典模式下運行)。

?原則:走得更遠些,超越那些現實中的簡單相對物


大部分隱喻都模擬那些人們熟悉的事物,但是卻能夠並且應該添加一些新的細節。舉個例子,一份電子報刊可能和傳統報紙非常相似,但是憑藉超鏈接用戶可以快速瀏覽他們感興趣的任何地方,而這在紙質的報紙上卻很難做到。這樣做不僅是因為我們沒有必要照抄現實中的物體(skeuomorphism借殼),同時在設計時無謂地限制軟體功能只為「完美」地模擬現實的結果都是糟糕的。


和借殼相反的是抽象——2013年流行起來的所謂扁平化設計的突出特點,把曾經熟悉的圖標和其他元素變為抽象圖形甚至錯誤的象徵圖像。(比如iPhone的瀏覽器圖標變為了羅盤,僅僅通過一些模糊不清的抽象與網路建立起聯繫。iPhone有一個真實的羅盤,所以他們把他們的圖標設計成了……另一個羅盤!兩個羅盤圖標:一個告訴你哪裡是北,另一個把你和你的銀行賬戶連接起來。設置圖標原來看起來像是手錶的機芯,清晰的傳遞出「這是一個可以讓你看到並更改iPhone內部工作狀態的應用」。它現在被抽象到了看起來像一個巨大的工業電扇的程度。)


?原則:如果隱喻成為了阻礙,那麼就放棄它


隱喻的作用是讓用戶使用更便捷。然而,有時候隱喻可能也會阻礙你的設計。

案例學習:Dish Pointer Maps

DP地圖,一個2009年為iPhone設計上線的產品,曾經一度是久享盛名的地圖模擬應用,它能夠讓人們對準衛星天線。

它會疊加一些衛星對準信息,包括在谷歌地圖數據上的衛星的方向(綠線)。有時候位置和方向非常容易定位,就像這個例子中的一樣——當用戶站在1Infinite Loop——蘋果現在的總部的停車場上的時候。這樣一個特別的位置,周圍有很多獨特的地標性建築,定位哪個建築在綠線的方向上需要避開是非常容易的。然而,當用戶身處一片森林,被成千上萬棵樹包圍時就沒這麼容易了,從外太空看起來每一棵都非常相似。這個地圖模擬應用是開發人員基於原本的電腦版本做的最好的改進了。用電腦版本時,使用者要在辦公室的電腦上看好並記住位置,然後再到外面工地去。而iPhone提供了一個新的機遇。

一副新眼鏡


很多時候,在重新實踐一個舊的創意時,不能墨守成規。你需要「戴上一副新眼鏡」來從嶄新的角度觀察舊的問題。在這個案例中,我的建議是開發人員開發人員索性徹底拋棄完全的地圖模擬。採用一種全新的視角,讓他們只要向上看22,000公里以外的衛星軌道就好。而他也確實是這樣做的:

用這個替代應用時,你只要走到外面或者爬到屋頂上,直到你能看到你需要的衛星,保證你和衛星之間沒有障礙物。安裝好天線,大功告成。完全不需要理解地圖的能力。

保護用戶的操作


?原則:保證用戶永遠不會丟失他們的操作成果。


這個原則幾乎是鐵律。任何時候都不應讓用戶丟失他們的信息和操作成果,除了完全無法避免的用戶電源突然中斷以外,不管是用戶個人失誤,還是網路傳輸異常或者其他的任何理由都不可以。我們對數據丟失太習以為常了以至於我們甚至經常都不在意它。那麼就設想一下,如果那些網路上經常發生的事件發生在現實中會是什麼樣子。


——你進到了倫敦的Harrod』s百貨商店裡,選擇好要購買的商品以後,被要求填寫一張四頁的表格。一位男士從頭到尾看了一遍表格,然後指著第三頁底部填寫手機號碼的地方。「很抱歉,」他說,「請看一下這裡。看到你在數字之間用了空格嗎?」當你點頭以後,他繼續說:「我們沒有預想到你會那樣填寫。」同時在他遞給你一份新的表格之前,就拿起原來的那一份把它撕得粉碎。

當然,這樣的事情永遠不會在Harrod』s發生。但是另一個同樣受人尊敬的英國機構卻這樣做了20多年,甚至到了神奇的互聯網時代已然如此。最近我有一次去往倫敦的出行計劃,航空公司要求我填寫緊急聯繫人信息。每次我都會將表格上的八個空格填寫好,但是總會收到至少一個空格填寫錯誤的信息,並且全部八個空格的內容全部都會被清除。我能夠理解這種肆意妄為的清除為我著想(為了信息安全),但是我卻窮極一生也沒有辦法從這些信息里搞清楚它到底想要什麼。20時分鐘過去了,在我換了兩個瀏覽器以後,我放棄了。我敢肯定,其他乘客一定早就放棄了。


總體來說,旅行網站不會考慮重複利用用戶鍵入的關於城市、時間、旅行天數、常旅客號碼或者其他任何要花時間填寫的內容。用戶再不滿意也不過是半個多小時以後放棄這個網站,但是那樣網站就可以理所當然地清除他們的數據了。如果用戶「很粗暴」地去了洗手間,這種行為「必然」會對信息安全造成莫大的威脅,所以他們整晚的工作都應該被刪除,哦,當然會有一條消息解釋說這是為了用戶著想。


旅行網站只是冰山的一角,大部分網站都因他們對用戶辛苦成果的不屑一顧而聲名狼藉。然而這還不是最壞的:傳統的應用程序仍然在不停地摧毀,而電腦系統的這種問題卻已經走到了盡頭。如今,筆記本電腦等其他便攜設備可以在突然斷電的情況下繼續工作,於是也就使很多高端台式機以及操作系統不支持持續存儲變得難以忍受。價值5000美元的機器穩定性還不如一個10美分的玩具,而改變這樣的窘境只需要加一點點斷電仍能保存信息的存儲器而已。


可讀性


?原則:文本和背景必須要形成強烈的對比


最好是黑色文本配白色或淺黃色背景。盡量避免使用灰色背景。


?原則:選擇足夠大的字型大小


你必須要讓市場人員告訴你針對目標用戶的標準展示大小是多少。然後需要和平面設計師和工程師一起來確保編碼可以在這樣的展示情況下呈現合理的字型大小。它不需要是統一的字型大小大小。舉例來說,CSS就能夠根據自己所處的系統來調整大小。


?原則:放大你想讓用戶看到的數據,在標籤和指導中突顯出來


比如,標籤「姓」可以小一些。因為老用戶知道這個灰色模糊的小字說的是讓他們填寫自己的姓氏。即使是新用戶,基於對這個字出現的情景的分析,也能很輕易地猜到需要填寫的是「姓」。但是用戶輸進去的自己的姓一定要非常清晰可讀。當輸入的內容是數字時,這一點就更為重要了。人們的語言通常非常累贅,因為這樣可以讓人們來彌補或猜測那些不清楚的信息。但是,數字卻不是這樣,除了當他們按照某種協議來編碼以外,它們都不會有冗餘的情況發生。因此人們必須檢驗並理解每一個數字。


?原則:菜單和標籤按鈕都應該把關鍵詞放在前面,形成不同的分類


有經驗的用戶在選擇一個項目時,閱讀的僅僅是不同選項之間有差異的部分。而最資深的用戶實際上只是用第一個詞外觀來區分,而不是把所有的項目通讀一遍。


?原則:在你所預期最老的用戶年齡層中測試全部設計


老花眼——需要帶著又厚又不便捷的鏡片,再加上眼睛對光線辨識度變弱,影響著大部分45歲以上的人。如果有老年客戶群的話,決不能用年輕的眼光來做大小和對比度的決定。


?原則:美觀和可讀性經常是負相關的

這一點特別顯示在字體處理上,抗鋸齒(anti-aliasing)處理通常會柔化字體的邊緣,讓文字在數字界面上有更加柔和的外觀。而問題在於人們的視覺系統對銳利的邊緣更敏感。因此,雖然抗鋸齒的字體更有吸引力,但在字型大小較小的情況下卻很難辨識。

有一些抗鋸齒字體會對眼睛所關注的邊緣做銳化處理,所以說這一原則並非非黑即白,不過它絕對是你要注意的一點,雖然大部分平面設計師在學習中並沒有涉及過。在選擇某種字體之前,最好對這些字體做一些閱讀速度和理解測試。


簡約


?原則:在易於安裝和易於使用中取得平衡


作為設計師,我們需要竭力地簡化用戶的生活。這通常需要在使產品更加易於安裝和使用戶使用更為便捷流暢之間取得微妙的平衡。


讓我們想像一下瀏覽器自動填充的功能:用戶需要填入並保存一個包含很多信息的資料庫,每當用戶需要再次填寫這些數據的時候,瀏覽器就會自動填充進去。建成這個資料庫需要一些時間,而每當有任何信息發生變動的時候,都是另一條需要重新添加的信息。此外,它經常會出問題,有時是不填充數據,也有時是把錯誤的數據填充得到處都是。


蘋果把設置過程簡化到允許用戶將Safari的自動填充系統與用戶的通訊錄聯繫起來。然而,Safari實際填充效果依然不容樂觀,很大程度上是因為需要填充的表格沒有標準化的標籤、位置或者其他信息。


我曾用過一個非常複雜技術方案來解決自動填充問題:我用一個叫做Keyboard Maestro的應用,它在後台隨時搜尋一些特定的關鍵片語合。當它找到一個我曾預設過的組合時,就會自動將預先存儲的文本內容填充進去,替換掉我本次輸入的內容。毋庸置疑,設置過程相當複雜,但是當我打開一個表格,在要求輸入名字的地方輸入bbbb的時候,這個應用會把它替換為Bruce;當我輸入aaaa時,我的地址就會替換進去;輸入pppp會替換為電話號碼,等等。我用30秒完成了一個表格,所用時間遠遠多於系統自動填充——如果它起作用的話。但是,這種方式卻能夠保證對每一次填充、每一個表格都能夠起作用。它不僅能節省時間和精力,還能避免自動填充總是出錯帶來的無力感。



Keyboard Maestro


一般情況下,我們都可以假設一個家庭的用戶中至少有一個是技術偏好型。當你需要在易於安裝和易於使用之間取得平衡時,把市場部的工作人員召集起來。如果他們說在所有的用戶中,至少有一個非常聰明或富有經驗的用戶可以依賴,那麼不妨讓一開始的設置更困難一些,如果這樣可以使其他用戶後續使用更為便捷的話。不過,我們仍然要花費精力讓安裝和操作變得越簡越好。這正是Nest公司採用的方式——在家裡,有一個用戶要完成一個非常複雜並常常令人困惑的流程,將他們的產品綁定在網路上,然後其他用戶的使用就會變得非常便捷。



Tony Fadell和Nest


(Nest辯解說,他們正在竭盡全力去攻克Wi-Fi設置時的首要問題。它需要人們關掉平時常用的Wi-Fi,並且登錄一個有著深奧難懂的名字的「網路」,這個「網路」實際上是Nest設備。這是一個非常奇怪並且反習慣的行為,很多用戶在第一次遇到時就避而遠之了。不僅如此,它還需要人們到他們手機或筆記本的「地下室區域」去操作,而那個區域是大部分用戶只要可以避免就不會去觸碰的地方。這個設置過程一無是處,而且當已連接的設備需要在更多的場景下應用時,Wi-Fi協議的管理員就需要隨時處理隨之而來的問題。)

*註:Nest是著名的智能家居公司,由前蘋果公司iPod部門主管Tony Fadell創辦,谷歌以32億美元將其收購。


?原則:避免「簡約幻境」


在本世紀的前幾年,蘋果公司就曾沉迷於將「產品很簡約」的幻覺呈現給潛在客戶,以致於嚴重影響了產品的使用效果。他們認為他們有充分的理由這樣做:他們希望新產品看起來很酷炫,並且對潛在用戶來說足夠簡單。這是一個非常好的目標,但是真正的簡約是由簡化事物而來,而絕非隱藏它們的複雜性。(見可視化)


讓展示廳的產品看起來很簡約是沒有問題的,然而一旦到了你想要隱藏產品的複雜性來避免嚇走用戶時,那麼就只能在你的展示廳做了。如果用戶在家或辦公室準備用你的產品來解決實際問題時,就不能再遵循「簡約至上」了。1978年,我就開始在蘋果軟體中植入一個經銷商模式,這樣,產品在展示時和實際使用中就會有不同的外觀和工作模式。計算機是可以做到的這一點的。然而,在產品發展的過程中,人們常常會忘記。


?原則:用漸進的啟發方式緩和學習曲線


當用戶在學習如何使用產品時,可以通過隱藏更多路徑和功能來簡化用戶的使用環境。而當用戶需要使用並知道如何操作這些路徑和功能的時候,再把他們展示出來。這和簡約幻境是有區別的——簡約幻境指把必要的操作隱藏在隱蔽的地方,如果用戶立刻需要使用這些功能,他們必須在軟體中像尋找寶藏一樣翻翻找找。


用戶處理的任務有簡有繁,當他們在學習到某個高層次任務之前就接觸到了這個層次所需要的功能時,常常通過撥打售後支撐電話來尋求幫助。用漸進的啟發方式能夠極大的減少此類電話的數量,降低支撐費用。同樣的,當人們需要更高層次的功能卻沒有相應的介紹或者被隱藏起來時,也會增加支撐費用。


?原則:不能通過削減必要的功能來追求簡約


在蘋果公司發布了他們的移動設備以後,這也成為他們的問題之一。2014年的Mac筆記本上,你可以設置一個提前90分鐘提醒的日程事項。而在iPad上,你可以設置為1個小時或2個小時,卻不能設置成90分鐘。而如果一個人需要的就是提前90分鐘提醒呢?他需要的不是任何其他時間。蘋果公司其實是通過禁止用戶設置任意時間來「簡化」界面。設置時間是一個非常簡單的功能,沒有任何系統缺陷會使蘋果公司無法向用戶提供它。所以,蘋果是故意地限制用戶行為。


如果要在iPad上設置一個提前90分鐘的提醒,就要設置另一個任務——開始時間比正式任務早30分鐘,然後設置一個提前1小時的提醒。

這真的簡化了產品嗎?


同樣的,他們設計了一個非常簡單的界面來尋找相冊中的照片:一張一張照片地瀏覽整個相冊,直到你找到你想找的那一張。雖然你精心為圖片設置了標題或關鍵詞,但是蘋果絕不會用他們來呈現照片,也不會允許你根據它們去分類或搜索。有人會辯解稱這樣的界面非常簡單:如果你需要在設備上的20,000張照片中找出某一張的話,只需將73個相冊從頭到尾看一遍就好了。你不需要學習如何搜索,不需要記住照片的名字,只要你有10到20分鐘的時間在手機上翻找就可以了。


這又真的簡化了產品嗎?


幸運的是,在經過了這麼多年以後,解決方式終於出現了:像PhotoShack HD (HD很重要)這樣的應用允許你搜索一切蘋果導入卻拒絕呈現給你的標準選項。


狀態


?原則:正因為很多基於瀏覽器的產品都在沒有狀態跟蹤的環境中運行,我們則更有責任對用戶的使用狀態進行跟蹤


我們的系統應該「知道」:

? 這是不是用戶第一次使用系統;

? 上次用戶離開的界面;

? 基於用戶在不同區域內的有效停留時間、觸控對象等判斷用戶的喜好;

? 在本次使用中,用戶瀏覽過的區域;

? 用戶目前在哪個區域、在做什麼;


以及其他大量的信息。除了簡單地了解我們用戶瀏覽過的區域以外,我們還可以利用他們的行為。


有一個你很熟悉的網站,他們那麼投入並且擅長追蹤用戶狀態,以致於可以描述為一個偶爾做些其他事情的「狀態跟蹤系統」。它就是http://amazon.com。他們總是能基於我們在網站上的操作歷史,給出我們想要尋找併購買的商品的建議,這種能力簡直不可思議。他們知道我們過去經常查看的昂貴的商品,知道最近使我們猶豫很久的商品,以及基於我們最近購買的商品搜尋與我們相似的用戶,並根據他們的購買歷史給出建議。


?原則:在用戶退出以後,應將他們的狀態信息加密後存儲在伺服器中


系統應做到使用戶在辦公室退出,回家,並在他們之前退出的界面繼續。正如前面保護用戶的操作中所說的,用戶上次的操作應該在最近情況中得到保存。



Physicians OnLine


一項為醫生提供的私人服務——Physicians OnLine在這方面表現得非常出色。比如,醫生完成了一項複雜交易95%的內容,然後退出,六個星期以後在另一個地方登錄。這項服務會問醫生是否希望延續上次的操作。


1996年,「跟蹤狀態」才成為交互設計的原則之一。毫無疑問,在那之前每個人都要自己記錄自己的狀態。由於網頁瀏覽器除了將已訪問的鏈接標為紫色以外,無法提供任何其他的跟蹤工具,工程師們便認為他們不需要再關注狀態了。然而恰恰相反,這樣做法的真實意義是:從那天直到現在,應用工程師和設計師需要全權負責跟蹤狀態,這些工作原是與系統工程師共同承擔的。這樣使跟蹤工作變得更為困難了。


?原則:解釋清楚你希望存儲和保護的用戶的信息


狀態數據無所謂好或壞,但是它卻可以用在好的地方或壞的地方。你應該在隱私條款中註明你會儲存數據,並且從你的實際情況出發說明為什麼這對用戶是有利的。用戶的一切信息,包括狀態信息在內都應該加密並安全地存儲起來。


可視化導航


?原則:導航可視化


大部分用戶不能也不會在腦海中精心製作一張地圖,即使他們想要這樣做也會在複雜的系統中迷失或感到厭倦。


儘管萬維網上有著精美的屏幕顯示和按鈕,事實上,它是一個非可視化的導航空間。是的,你總是可以看到你所在的頁面,但是卻看不到頁面之間的巨大的空間。一旦用戶來到我們的網站或者基於網站的應用時,我們必須將導航信息減少到最少,並且保證剩餘的導航足夠清晰且自然。理想情況是使用戶產生一種總是在同一個位置的幻覺,工作被呈現在他們的眼前,就像桌面比擬(desktop metaphor)。這不僅能消除用戶對地圖和其他導航工具的需求,還會讓用戶產生一種統治和自主的感覺。


你的網站上可能有一千個頁面,如果每一個都有相同的標題和相似的主菜單和二級菜單,用戶會有種自己總是在一個相同的頁面上,而內容隨著頁面上某個框格中的信息變化而變化的感覺。然而,如果他們不知道自己在看哪一個框格指示的內容,他們還是會迷失。因此,通過突顯出那一特定框格中的當前菜單信息,同時在開發系統中支持使用導航控制項如:


NN/g Home AskTog InteractionDesign Section


來幫助他們在頭腦中構建一個模型。至於那些沒有狀態跟蹤的網站,我們必須通過添加用戶可能需要的功能和保護層級來構建模型,而不是輕率地接受網站呈現的框架結構。原生的非可視化網站導航是一個挑戰,而不是不可避免的必然。


?原則:用疊加屏減少必要頁面數量


在設計一個複雜的應用時,盡量使頁面數量最小化,令每一個頁面都展示一個用戶會執行的獨立的任務。當用戶需要執行子任務時,彈出一個比整屏小一些的疊加屏,這樣用戶依然可以在背景中看到暗化的主屏圖像。用戶不需要記憶他們看到的疊加屏,因此他們也就不需要知道怎樣把疊加屏從主屏後召喚出來。


關於用戶體驗設計方面的設計理論還是很多的,我試圖匯總了一部分理論(涵蓋交互和界面)如下:
2法則——人們短期記憶每次能處理5-9件事情,作為把導航菜單的元素限制在7個以內的依據;

2秒鐘法則——用戶在使用某類系統時的等待反映不應該超過2秒;

3次點擊法則——用戶在3次點擊之內如果還沒有找到他們想要的信息或了解產品/網站的特色,他們就會離開;

2/8法則——80%的結果由20%的原因產生;

界面8黃金法則:
1)努力做到連貫;
2)允許頻繁使用系統的用戶使用快捷方式;
3)提供信息反饋;
4)為關閉這一動作設計對話框;
5)提供簡單的設計處理;
6)提供控制器,支持內部控制點;
7)允許簡單的撤銷操作;
8)降低短期記憶載荷。

Fitt"s定律——內容越容易被點擊到,它的點擊率就越高;

短板效應——一個木桶無論有多高,它盛水的高度取決於其中最低的那塊木板;

Jakob Nielsen的10條可用性原則:
1)系統狀態的可見性——讓用戶知道系統在做什麼;
2)系統和現實世界的匹配——系統必須使用用戶的語言;
3)用戶控制和自由——「緊急出口」來離開非預期的狀態,支持撤銷和重做;
4)一致性和標準——遵循平台規範;
5)錯誤預防——要麼避免容易發生錯誤的情況,要麼檢查並在實際動作前確認選項提示用戶;
6)識別而不是回憶——將對象、動作和選項可視化以減少用戶的記憶壓力;
7)使用的靈活性和效率——用戶可以定製經常使用的動作;
8)美學和最小設計——對話框不能包含無關或者幾乎不需要的信息;
9)幫助用戶認識、診斷錯誤並恢復——錯誤消息必須通過普通語言表達(不包含代碼)、準確指出問題並積極提示解決方法;
10)幫助和文檔——容易搜索、關注用戶任務並列出需要執行的具體步驟,而不是大而全的說明。

KANO模型:
1)魅力因素——提供用戶想不到的需求會很大的提升用戶滿意度,不提供則滿意度不變;
2)期望因素——提供期望需求則滿意度會上升,不提供則會下降;
3)必備因素——優化此需求用戶滿意度不變,不優化則滿意度大幅下降;
4)無差異因素——用戶根本不在意的功能需求;
5)反向因素——無此需求滿意度不變,有次需求則滿意度下降。

包豪斯運動——形式追隨功能,去除干擾和裝飾;

Skeumorphic設計理念——花費很大的力氣來指向或模模擬實世界的功能;

嬰兒鴨綜合症——用戶習慣了以前的設計,對新的產品架構感到不舒服,他們必須找到自己的方式來使用產品;

自我參照效應——與我們個人觀念相聯繫的事物要比那些和我們沒有直接聯繫的事物記得更清楚;

0123簡單法則——無需說明書,一看就會,兩秒等待時間,三步以內的操作;

MVP法則(最簡化可實行產品法則)——一開始就拿產品來接觸用戶,從很早就根據用戶的回饋來改進你的產品;

麥肯錫金字塔方法——任何事情都能歸納出一個中心點,而從中心論點可以由數個一級論據支撐,而這些一級論據也可以被數個二級論據支撐,如此衍生,狀如金字塔。


在問這個問題的時候題主能先說下自己讀了幾本交互設計相關的書籍、又總結了多少交互設計原則么?
為什麼給我一種「我既不努力也不思考就等著吃剩飯」的感覺。


原則1:
如果某個功能是用戶需要的,那麼就一定要做,並且做好;
如果是公司需要的,那麼要慎重考慮,慎重添加。

原則2:
合併/甚至刪除冗餘的功能點。

原則3:
技術實現上永遠不是問題,設計不要給技術讓步。

原則4:
交互設計中,考慮貼合現實生活,減少學習成本。


「把用戶當成聰明的人,但是是很忙的人」
——Alan Cooper

——————

dont make me think?
好像大家都這麼說,但我感覺它挺挫的。
用最簡潔的方式和最短的時間,幫助用戶完成目標就好了,我管用戶們think不think幹嘛。


謝謝邀請。
這個問題回答的人已經很多了,大家回答的也挺好。

題主若有具體什麼不理解的地方,或者什麼疑惑,可以單獨問我。



Matry Cagan 提出的十條原則(可詳見其書《啟示錄》)
http://www.svpg.com/great-products-by-design/
(KentZhu的鏈接是中文譯後的:http://www.ikent.me/blog/1266)

aofengdaxia的博客有四篇文章鏈接如下:
http://blog.csdn.net/aofengdaxia/article/details/6633572
http://blog.csdn.net/aofengdaxia/article/details/6647747
http://blog.csdn.net/aofengdaxia/article/details/6668103
http://blog.csdn.net/aofengdaxia/article/details/6677772

我個人想法:
原則,只是一種可能約束人創意的準則,但有時一個優秀的產品設計需要這樣一個條框,或是讓後人可以借鑒的東西:

以技術為背景,以用戶為前提,以市場為導向,以產品原型為基礎,以盈利為最終目的。


自己總結的4個很抽象的交互設計思考域:
發現了什麼;理解成什麼;執行了什麼;感受到什麼
從這四個方面去理解各種設計原則就簡單很多~


下面的內容來自我的《認知與設計》讀書筆記,位於第151頁。
Johnson(2007)
原則 1:專註於用戶和他們的任務,而不是技術。
--了解用戶。
--了解所執行的任務。
--考慮軟體運行環境。
原則 2:先考慮功能,在考慮展示。
--開發一個概念模型。
原則3:與用戶看任務的角度一致。
--要爭取儘可能自然。
--使用用戶所用的辭彙,而不是自己創造的。
--封裝,不暴露程序的內部運作。
--找到功能與複雜度的平衡點。
原則 4:為常見的情況二設計。
--保證常見的結果容易實現。
--兩類「常見」:「很多人」與「很常見」。
--為核心情況而設計,不要糾結於「邊緣」的情況。
原則 5:不要把用戶的任務複雜化。
--不給用戶額外的問題。
--清除那些用戶經過琢磨推導才會用到的東西。
原則 6:方便學習
--「從外向內」而不是「從內向外」思考。
--一致,一致還是一致。
--提供一個低風險的學習環境。
原則 7:傳遞信息而不是數據
--仔細設計顯示,爭取專業的幫助。
--屏幕使用的。
--保持顯示的慣性。
原則8:為響應度而設計
--即刻確認用戶的操作。
--讓用戶知道軟體是否在忙。
--在等待時允許用戶做別的事情。
--動畫要做到平滑和清晰。讓用戶能夠終止長時間的操作。
--讓用戶能夠預計操作所需要的時間。
--儘可能讓用戶來掌控自己的工作節奏。
原則 9:讓用戶試用後再修改
--測試結果會讓設計者感到驚訝。
--安排時間糾正測試發現的問題。
--測試有兩個目的:信息目的和社會目的。
--每一個階段和每一個目標都要有測試。
-------------------------------------------------------------------------------------------------------------------------------
模式的思考:
模式一:我們專註於目標而很少注意使用的工具。
(有點時間想要對比淘寶和亞馬遜的付款流程,但是沖著買東西付錢的目標,會忽略很多東西)
模式二:我們使用外來幫助來記錄正在做的事情。
(這個模式意味著,交互系統應該分別標識出哪些是用戶已經完成的,而哪些是用戶還沒完成的。這個交互系統應該允許用戶標記或者移動對象。)
模式三:我們跟著信息「氣味」靠近目標。
(設計者需要需要理解用戶每次在做決定時目標可能是什麼,並且保證軟體為用戶的每個重要目標提供選項,並清晰地標識出各個目標所對應的選項。)
模式四:我們偏好熟悉的路徑。
(用戶這種對熟悉的和相對不需要動腦筋的路徑的偏好意味著:有時不懂腦子勝過按鍵;引導用戶到最佳路徑;幫助有經驗的用戶提高效率)
模式五:我們的思考周期:目標,執行,評估。
目標:提供完成軟體為用戶設計的目標需要的清晰路徑,包括起始步驟
執行:軟體中的概念(對象和動作)應該基於任務而不是如何實現。
評估:向用戶提供進度反饋和狀態信息。
模式六:完成任務的主要目標之後,我們經常忘記做收尾工作。
(要避免這樣的失誤,交互系統可以也應該設計成能對還沒做徹底的事做出提醒。某些情況下,系統甚至可以自己完成掃尾工作。)

設計的原則及其模式的思考,我能提供內容暫時就是這些了。原則是人們不斷實踐,經驗總結得來的。去思考為什麼有這些原則,會獲得的更多。
我想提問者是學習產品設計的,有實踐才會理解的更深,learning by doing。我目前也在學習產品設計,發現關於設計的書讀多了,理論其實有很多重複的,只不過是各書的側重點不一樣。
以上內容僅供參考,共勉!


最近想做的事情太多,時間不夠用。一直在想聖誕節了,給大家個什麼禮物,那就來寫寫我近期工作中總結的幾個設計原則吧。有很多其他的顯而易見的設計原則我就不多說了,說幾個我覺得很重要的。要是有說到大家覺得不錯的,就幫忙轉發或者點個贊啥的。

設計之前一定要定義好問題

設計方案評審的時候,是不是經常會出現你的方案經不起別人的挑戰,那是因為你自己可能就沒有想的很清楚。我也經歷過這個階段,經常懷疑人生,就是兩眼一抹黑的就想做出多多漂亮的界面,多多酷炫的功能,但是忽略的問題的本質,造成了公司資源的浪費,為啥有經驗的牛逼的產品經理工資可以很高很高,因為他們的經驗與判斷可以為公司省很多錢,增加了團隊的幸福感。所以說,現在做設計之前,我寧願花更多的時間想清楚討論清楚問題,也不願意匆匆的就進入到解決階段。


聚焦用戶的最主要的任務

經驗告訴我,任何的無法幫助到用戶完成主要任務的信息都是噪音,噪音就可能是干擾,甚至打斷了用戶原本的計劃,打斷了他的行為,最終導致的就是轉化率的下降。最典型的例子就是用戶要去下單了,你給一個其它推薦,他就不下單了,再去看看別的東西。如果要放推薦,也要放到產品詳情頁的次要位置,原因就是不要輕易轉移用戶當前的注意力。那麼,像旅行攻略這種東西還要不要放到酒店詳情頁了?


替用戶做決定

不要害怕代替用戶做決定。給用戶盡量少的選擇能夠增加他們的自信心,因為他們不需要擔心太多,這就是選擇博弈論。給用戶過多的選擇只會讓他們產生焦慮,因為他們需要評估每一個選擇是否能夠滿足他們。再就是告訴用戶每個選擇的特點,最好能夠把各自的特點突出呈現給用戶,這樣可以縮短他們的思考時間,幫助他們建立信心,加快了做決定的時間,提高了轉化率。


重視每一句文案

設計師需要經常需要寫文案。一句好文案的威力很有可能超出你的想像,它可能不會輸給一個新功能給公司帶來的效益,因此大公司都會有專門的cope writer。文案要簡潔,因為用戶沒有很多時間跟耐心去看。文案要準確,因為任何的有歧義的解讀都會影響用戶體驗,比如客服單子的增加。文案的語氣要代表公司的氣質跟用戶的年齡特徵,因為每一句文案都是與用戶交流的一次機會,不要錯過任何一次打動用戶的寶貴機會。需要把你的品牌與產品想像成一位服務人員,用簡潔準確生動的方式(文案)去與用戶溝通。

敢於做減法

我們最擅長的就是加加加對不對?但是很多試驗表明,減掉相對次要的信息也會增加轉化率,為什麼?因為減少「噪音」可以讓用戶更加的專註在自己當前的任務上。因此不要害怕捨棄次要信息,舍掉過多的認知負擔。

強大的視覺層級表達信息關係

信息的可讀性也可以為轉化率作出貢獻。可讀性來源於信息的視覺層級。設計可以通過很多方法去創造視覺層級,比如位置,大小,顏色,空間等。總有一個元素是最最最重要的,突出突出再突出。然後就是找出第二級。最後弱化輔助信息造成對比。最好的例子就是多看看蘋果的官網。


請關注我的訂閱號: WOW7DUX
(一枚畢業於清華與美國伊利諾伊理工,現工作於http://Booking.com的移動端設計師。)

我會在公眾號里經常更新我的工作感悟 :) 歡迎大家關注與交流。


移動設計的六條原則:

  • 簡潔。刪除不必要,只抓重點;內容優先,隱藏干擾功能;多了解移動端的特性並加以利用)
  • 高效。即穩定、流暢、快捷。表現為:避免鍵盤輸入(不需要用戶打字);有效觸動(比如增大點擊操作的區域、手勢代替點擊等);減少頁面跳轉(能增加頁面的連貫性,減少用戶記憶負擔。從全局上來講,用戶路徑也更加扁平化。具體可使用抽屜、浮層、局部處理等方法)
  • 一致性。設計上的一致(基本結構布局、模塊化內容、文案、交互行為和視覺風格);與平台環境的一致(如 iOS 屏幕左上角的返回);跨平台的一致(大多移動產品都是多平檯布局)
  • 反饋。需要有效、清晰、即時。可考慮使用 toast、狀態欄、導航欄等反饋方式,也可以考慮結合聲音、振動、閃光等組合方式。
  • 情感化。主要體現在視覺、文案、個性化的設計上,等等。
  • 移動化。需要從PC的思維邏輯中跳出來,充分利用手勢、麥克風、攝像頭、振動硬體、LED燈跟產品融合,同時也要了解感測器的特點,搖一搖的重力感應,LBS 地理位置,陀螺儀的遊戲效果等。

關注設計的話這裡每一條應該都不會陌生,這六條算是總結的比較濃縮,但還是讓人覺得有些主次沒有分好,也沒有很好地達到 MECE(Mutually Exclusive,Collectively Exhaustive) 原則。

《方寸指尖》讀書筆記2
To be updated..


原則不一定好用,或者原則不一定是你講解方案的制勝法寶。
堅持多看,深入的了解你所能接觸的每一個產品的每一個設計框架,流程,控制項設計,動作。然後再深挖每一個產品這樣設計的原因,最終能夠從用戶行為來判斷產品設計的科學性。
交互設計的根本並不是一個框架流程,而是為人而設計,為行為設計最適合環境,或者向apple一樣改變行為本身。


推薦閱讀:

最常被濫用或誤用的交互設計原理有哪些?
如何做一份好的角色設計?

TAG:產品設計 | 交互設計 | 用戶體驗設計 |