作者：多蘿西

阿蘭·庫珀最為人熟知的就是這句“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”了，在交互設(shè)計領(lǐng)域有很多經(jīng)過了時間驗證法則被認(rèn)作了標(biāo)準(zhǔn)

那些定律準(zhǔn)則，在交互設(shè)計領(lǐng)域有很多經(jīng)過了時間的驗證的法則定律被認(rèn)作了標(biāo)準(zhǔn)，那么你都知道都有哪些嗎？在日常的設(shè)計中，你運(yùn)用了哪些設(shè)計理論呢？

一.7±2法則

根據(jù)George A Miller 的研究，人腦處理信息的能力有限，所以它通過把信息分成塊和單元來處理復(fù)雜問題。人們短時記憶廣度大約為7個單位。即每次只能處理5～9件事情。

來，我們來舉:chestnut:～

1.作為設(shè)計師的日常，我們會逛站酷、UI中國等網(wǎng)站，他們的導(dǎo)航欄模塊不會超過9個，使用的APP底部導(dǎo)航都不會超過5個～

2.如果導(dǎo)航或選項卡內(nèi)容很多，可以用一個層級結(jié)構(gòu)來展示各段及其子段，并注意其深廣度的平衡，像天貓商城和亞馬遜網(wǎng)站的商品分類選項卡，導(dǎo)航是分為多個層級的。

3.把大塊整段的信息分割成各個小段，并顯著標(biāo)記每個信息段和子段，以便清晰的確認(rèn)各自的內(nèi)容，像比如蘋果官網(wǎng)iphonex對于語言版本的介紹板塊，分成了四個板塊的信息來介紹，還有支付寶和微信銀行卡界面卡號信息的展示方式，采取了分段的方式，也源于我們現(xiàn)實生活中使用的銀行卡，分段展示在卡上。

二.席克定律

在簡單判斷的場景中，一個人面臨的選擇越多，他所需要做出的決定的時間就越長。在人機(jī)交互界面中選項越多，意味著用戶做出決定的時間越長，這時就需要對選項進(jìn)行分類，以減輕用戶做出決定的負(fù)擔(dān)。

來，我們繼續(xù)舉:chestnut:～

1.蝦米播放器界面和蝦米駕駛模式播放器界面，對比常規(guī)播放器，刪減了很多在行駛中使用概率很小的功能。增加了【語音搜索】功能，司機(jī)在行駛中有很短的時間來操作播放器，減少選項，才會讓司機(jī)在更短的時間內(nèi)做判斷。

2.keep跑步中界面和跑步暫停界面，要結(jié)合使用場景，再看這個頁面的設(shè)計多么巧妙，點(diǎn)擊【暫?！繒r，會出現(xiàn)【繼續(xù)】和【結(jié)束】，尤其是【結(jié)束】按鈕，需要長按才會真正結(jié)束這次跑步，在減少反應(yīng)速度的同時又降低了錯誤操作概率。

然而，席克定律并不是什么場景都適用。

席克定律不適用于需要高度搜索、閱讀或復(fù)雜的疑難排除決定。這個法則會隨著工作的復(fù)雜性增加，降低其適用性。

螞蟻財富風(fēng)險監(jiān)測界面。在首次在螞蟻財富理財時，金融機(jī)構(gòu)都會強(qiáng)制要求用戶做一次風(fēng)險測評，這時候席克定律就不適用了，因為每道題都需要仔細(xì)的閱讀和思考才能作答，席克定律不適用于這類需要高度閱讀與解答問題的工作。

但是設(shè)計師還是有辦法讓風(fēng)險測評看上去更友好，設(shè)計師將每道試題拆分為一個界面，這樣就會讓用戶在一個頁面上的目標(biāo)更加專注、選擇更少。頭部的進(jìn)度條讓用戶時刻了解自己所處的位置。

三. 雷斯托夫效應(yīng)

某個元素越是違反常理，就越引人矚目，受到更多的關(guān)注。如果想突出某個重要內(nèi)容，就要使他特殊化。通過色彩、尺寸、留白等設(shè)計手段。 又稱隔離效應(yīng)，以及新奇效應(yīng)。

應(yīng)用在移動設(shè)備上 1.3-4月份的拉勾app首頁的底部導(dǎo)航，中間的【全民升職記】，使用了與整體icon完全不相同的風(fēng)格。所以用戶記住這樣獨(dú)特、有特色的iocn的可能性才會大增。

2.淘寶app大促版與平日版對比圖

為什么大促的時候，每個電商app都會選擇重新設(shè)計首頁，讓首頁與以往不同呢？以淘寶app為例，首頁增加了大促入口，入口icon都換成了節(jié)日icon

四. 費(fèi)茨定律

一.按鈕等可點(diǎn)擊區(qū)域在合理的范圍之內(nèi)越大越容易點(diǎn)擊，反之，可點(diǎn)擊區(qū)域越小，越不容易操作，將按鈕放置在離開始點(diǎn)較近的地方，相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊。

根據(jù)研究表明，人們在使用手機(jī)的時候，75%的交互操作都是由拇指驅(qū)動的，而拇指懸停的位置恰恰就是屏幕下方。pc端設(shè)備，就是鼠標(biāo)右鍵操作了。

對于一些相關(guān)性較強(qiáng)的按鈕，可以考慮將他們放在一起，比如：【上一頁】和【下一頁】，【注冊】和【登錄】。

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

繼續(xù)舉:chestnut:，比如知乎、Twitter 及Facebook等社交APP的發(fā)帖按鈕，放置在屏幕的右下角處，這樣的設(shè)計正是運(yùn)用了上面的要點(diǎn)，使得用戶的操作難度和成本降低，提升了用戶體驗。

大家再思考下～為什么win系統(tǒng)要將【開始】按鈕放在角落？

原因就是屏幕的四角和四邊無限大，mac的docker更是將定律發(fā)揮的淋漓盡致，當(dāng)鼠標(biāo)hover到對應(yīng)的app icon上的時候，icon還會放大，增加了點(diǎn)擊面積。

三.費(fèi)茨定律的反向運(yùn)用

我們來設(shè)計個手機(jī)的關(guān)機(jī)界面。那么首先思考這里的設(shè)計約束為：

1.此操作不能過于便捷

2.防止誤觸

3.如有必要需要有防待操作

接下來我們來出設(shè)計方案：

1.先嘗試加大拇指到目標(biāo)的距離，那么可以得到甲方案。

2.根據(jù)相關(guān)按鈕放在一起更便于點(diǎn)擊，所以我們嘗試將【關(guān)閉手機(jī)】和【取消分開】，并且將【關(guān)閉手機(jī)】做小，從而得出乙方案。

3.其實，距離是可以創(chuàng)造出來的，觸屏的偉大之處就是，它不僅僅有點(diǎn)擊操作，還有滑動操作。通過滑動操作也可以創(chuàng)造出距離，如丙方案所示，完成關(guān)機(jī)操作的總距離=【大拇指移動移動到頂部滑塊的距離】+【按住滑塊滑動到右邊的距離】。

這就是為什么很多人覺得iPhone的體驗比絕大多數(shù)的安卓手機(jī)好。

費(fèi)茨定律的啟示：

1.按鈕做大點(diǎn)更易于點(diǎn)擊

2.將按鈕放置在離開始點(diǎn)較近的地方

3.相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊

4.屏幕的四角和四邊是無限可選中位置

5.通過費(fèi)茨定律的反向使用，可以降低按鈕被點(diǎn)擊的可能。

五.格式塔原則

格式塔，意思是“整體、完形”。是設(shè)計中非常著名的心理學(xué)派，它的核心理論是，人的視覺具有整體化，簡化處理圖形傾向，人的視覺思維會傾向于自動將其補(bǔ)全，使其變成一個已知的、常見的、完整的整體圖形，即“完形”。

本篇來了解它的5個特性，即相似性、鄰近性、封閉性、連續(xù)性、簡單性。

一.相似性 ( 權(quán)重最大）

人的潛意識里會根據(jù)形狀、大小、顏色、亮度等，將視線內(nèi)一些相似的元素自動整合成集合或整體。

二.相近性

單個元素之間的相對距離會影響我們感知它是否以及如何組織在一起?；ハ嗫拷脑乜雌饋韺儆谝唤M，而那些距離較遠(yuǎn)的則自動劃為組外。這兒這里需要注意的一點(diǎn)是人們對形狀、大小、共同運(yùn)動、方向、顏色的感受權(quán)重是不一樣的，顏色屬性會覆蓋其他屬性的影響。

相近原則被廣泛應(yīng)用于頁面內(nèi)容的組織，以及分組設(shè)計中。對引導(dǎo)用戶的視覺流及方便用戶對界面的解讀有非常重要的作用。對同類內(nèi)容進(jìn)行分組，同時留下間距，會給用戶的視覺以秩序和合理的休憩。

微信的【發(fā)現(xiàn)】，大家會把【掃一掃】和【搖一搖】、【購物】和【游戲】當(dāng)成一個整體，【看一看】和【搜一搜】這樣可以使界面顯得更加清晰，同時還能突出重點(diǎn)，這個列表的兩頭實際上是最突出的，像【朋友圈】和【小程序】。

三.封閉性

人的眼睛在觀看時，大腦并不是在一開始就區(qū)分各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易于理解的統(tǒng)一體。

我們一般叫截斷式設(shè)計。為了讓用戶感知到還有內(nèi)容，我們一般會使用截斷式設(shè)計。

像微信錢包頁面，底部因為屏幕大小的關(guān)系被截掉了部分內(nèi)容，但是用戶可以通過殘留的部分，腦補(bǔ)出下方仍然有個完整的整體。

世界自然基金會的logo，熊貓的頭部和背部并沒有明顯的封閉界限，但是我們依然會把它當(dāng)成一個完整的熊貓。

四.連續(xù)性

人的視覺具備一種運(yùn)動的慣性，會追隨一個方向的延伸，以便把元素連接在一起成為一個整體。

我們傾向于完整的連接一個圖形，而不是觀察殘缺的線條或形狀。

大家覺得圖里的是兩個圓形呢？還是兩個殘缺圓和一個兩圓相交的重合？，按照格式塔原則，我猜大家看到的應(yīng)該是上方左邊的兩個圓形。

五.簡單性

具有對稱、規(guī)則、平滑的簡單圖形特征的各部分趨于組成整體。

六.新鄉(xiāng)重夫：放錯原則

在過程失誤發(fā)生之前加以防止，是一種在作業(yè)過程中采用自動作用、報警、標(biāo)識等手段，使作業(yè)人員不特別注意也不會失誤的方法。在登錄時輸入框沒有內(nèi)容或郵箱格式不正確時，登錄按鈕處于禁用的置灰狀態(tài)，只有兩者都滿足了才可以正常點(diǎn)擊。

像登錄某個app時，在沒有填寫完手機(jī)號碼和密碼前，底部的登陸按鈕是置灰不可點(diǎn)擊的。只有兩項都填寫完整底部的登錄按鈕才會變成可點(diǎn)擊狀態(tài)。

微信發(fā)朋友圈動態(tài)時，點(diǎn)擊返回按鈕出現(xiàn)的提示彈窗。

彈出框方式會增加不可逆操作的難度，當(dāng)用戶發(fā)一條動態(tài)一半的時候，因為誤操作或者其他退出狀態(tài)的時候，使用彈窗是個不錯的選擇。因為用戶這個操作會讓之前辛苦編輯的內(nèi)容刪除找不回，想要再發(fā)只能從頭開始，對用戶損失比較大。

其實還有那些很熟悉但又叫不出名字的設(shè)計法則，比如80/20法則，形式服從功能，系列位置效應(yīng)，泰斯勒定律，這些定律貫穿在我們的UI設(shè)計中，在工作中我們應(yīng)當(dāng)把這些定律巧妙運(yùn)動到設(shè)計中，才能設(shè)計出用戶體驗好的作品～

本文來源網(wǎng)絡(luò)，若有侵權(quán)請聯(lián)系本人刪除

如果大家喜歡葉貓此次分享的精選教程記得點(diǎn)上關(guān)注哦

每日分享優(yōu)選教程，還有原創(chuàng)平面教程原創(chuàng)設(shè)計教程哦

收藏或轉(zhuǎn)發(fā)的朋友可以在學(xué)習(xí)教程結(jié)束后到本文章評論區(qū)交作業(yè)~