編輯導語：在産品設計中，很多交互細節方面的設計會很大程度的影響用戶體驗，在設計産品時需要把握好設計中的幾種原則，做到産品最基本的易用性；本文作者分享了關于産品設計中的交互設計原則，我們一起來了解一下。

本文主要聊一下産品中使用的幾個交互設計原則：一緻性、費茨定律、容錯性、希克定律。

01 一緻性

我們在做設計時，經常會講到要保持一緻。

一緻性的好處：

• 從外部來說，可以極大的提升産品的易用性，降低用戶的學習成本，同時也有利于品牌形象的傳達。
• 從内部來說，将一些相同或類似的功能進行複用，提高團隊的協作效率，讓資源得到更充分的利用。

那麼設計師該如何做到一緻性呢?

一緻性體現在産品中可以體現在很多方面，比如是視覺風格統一，交互操作統一。

• 視覺上可以是配色、字體、圖标、頁面布局、插畫，以及在不同終端上的統一。
• 交互操作可以是相同相似功能在不同頁面的呼出方式，一些地方動畫的表現形式。

另外，産品與本身所處的行業内的競品的一緻性，比如音樂播放頁面，用戶已經習慣了上面是歌曲宣傳圖。

下面是播放切換的控件，各個産品的排版布局都是相似的，這樣的統一可以讓用戶沒有陌生感，在接觸一個新的音樂類産品時很快的上手。

滴答清單的網頁端、桌面版、網頁插件，将頁面的主要功能信息都放在了左邊，中間部分是清單列表，最右側是清單詳情，配色都是用了灰色、白色、淺藍色，圖标風格上使用的面型風格；這三個終端的視覺風格是保持了高度的一緻，傳遞給用戶的也是很強的品牌理念。

阿裡雲盤，App啟動頁和網頁功能介紹，都是使用了C4D插畫，來保證兩個終端品牌風格的一緻性。

微博App的詳情頁及他人主頁，這兩個頁面的評論功能都使用了相同的底部彈出框的控件樣式，用戶可以在不用思考的情況下直接操作，這是利用了相同功能在不同頁面複用了相同的交互控件。

02 費茨定律

簡單點來說，有兩個關鍵因素，兩個操作目标的距離、操作目标大小。

第一個因素意思就是在當前産品中兩步操作，手指移動的距離越短，操作就越容易；第二個因素是當前操作目标越大，操作越容易。

石墨文檔App，在頁面右下角有一個懸浮的新建按鈕，點擊後從底部彈出活動視圖，用戶可以進行新建文檔、表格等操作；這裡使用從底部彈出活動視圖，而不是在新頁面或者頁面中間，正是利用了費茨定律，縮短了兩步操作之間手指移動的距離，降低操作難度。

滴滴出行、如祺出行

滴滴出行打車頁面，App首先會自動定位你當前所在位置為出發位置，目的地一欄顯示文案「輸入目的地」；設計師将輸入框設計的很大，文案字體也很大，在當前頁面中非常醒目，極大的方便了用戶的操作；這就是應用了費茨定律的第二個因素，當前操作目标越大，操作也就越容易。

反觀如祺出行的打車頁面，出發地一欄和目的地一欄的尺寸是一樣大的，都是使用圖标 文字樣式，出發地一欄使用深灰色的圖标、深灰色的字體；而目的地一欄圖标雖然使用了橙色主題色，但是文字的顔色是淺灰色，字号也沒有放大，非常不顯眼。

要知道用戶當前的迫切需求是輸入目的地，這樣設計無疑是增加了用戶操作的難度。

03 容錯性

平時在操作産品界面時，經常會因為一些原因造成操作錯誤，而有些錯誤造成的損失是無法挽回的。

那麼設計師應該怎麼避免用戶操作中犯錯呢？容錯性原則可以很好的解決這個問題。

容錯性定義是：

“容錯性是産品對錯誤操作的承載性能，即一個産品操作時出現錯誤的概率和錯誤出現後得到解決的概率和效率；容錯性最初應用于計算機領域，它的存在能保證系統在故障存在的情況下不失效，仍然正常工作；産品容錯性設計能使産品與人的交流或人與人借助産品的交流更加流暢。”

拆解一下，影響「操作時出現錯誤的概率」的因素有，操作前的引導提醒以及操作時的提示；影響「錯誤出現後得到解決的概率和效率」的因素有，操作後的解決方案。

微信的修改微信号功能，不同于修改昵稱直接進入編輯頁面，微信在中間增加了一個頁面，頁面内容顯示當前的微信号及提示文字，目的是提醒用戶要慎重，避免有些用戶修改了微信号之後後悔；這裡是用到了容錯性的操作前的引導提醒，降低了出現錯誤的概率。

QQ注冊頁面，用戶輸入昵稱後，系統會檢測昵稱是否可用，及時給出給出提示；輸入密碼時會自動出現密碼設置的提示，及時提醒密碼都有哪些規則，避免用戶輸入不符合要求的密碼；操作中給出這些相應的提示，可以使用戶更加流暢的完成注冊流程。

印象筆記網頁版，将一篇筆記删除後，頁面頂部會出現一個提示框，文案是「已将XX文章移至廢紙簍」，提示框2、3秒之後自動消失；如果剛好這篇筆記是不小心誤删的，這裡的提示框給予了用戶反悔的機會，幫助用戶及時的找回筆記，彌補錯誤。

04 希克定律

希克定律，又叫是希克一海曼定律（Hick Hymalrs 1aw），是一種心理物理學定律，應用在産品設計當中；就是當頁面中需要有不同選項時，要盡可能的少而簡單，降低用戶的決策成本。

美團外賣頁面的金剛區，共有三行應用；核心推薦的5個應用是放在第一排，其他10個應用排成兩排，核心推薦應用與其他應用在圖标風格上使用了區别化設計，用戶在進行選擇時變成了5選1，而不是15選1。

這是設計師在功能設計時針對應用做出了重要程度的區分，以幫助用戶更快做出選擇。

本文由 @YI易設計 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部