先舉個(gè)例子來理解一下：我要點(diǎn)擊手機(jī)上的確認(rèn)按鈕所需要的時(shí)間，和 手與按鈕的距離（D）   按鈕的大小（S）有關(guān)。  當(dāng)距離越長，所需要的時(shí)間越長。當(dāng)按鈕越大，所需要的時(shí)間越短。

自我理解：我們將日常看到的界面元素進(jìn)行去色彩和去信息化，把這些控件/元素等都變成灰色色塊，其實(shí)也就變成了最簡單的原型圖。這些灰色色塊拋開了視覺上的屬性，其實(shí)有兩大最基本的屬性，即色塊的位置和大小。  菲茲定律告訴我們，要通過控制色塊或者說界面元素的    大小和位置（絕對距離和相對距離）   來進(jìn)行界面布局，進(jìn)而控制交互時(shí)間，達(dá)到我們設(shè)計(jì)或者業(yè)務(wù)層面的目的。

     

a  合理的自身大小

這里是說合理的大小。一般來講越大用戶越容易到達(dá)，但是屏幕的大小是一定的，某一按鈕/目標(biāo)越大就會(huì)降低其他按鈕/目標(biāo)的大小。所以大小是相對制衡的，要根據(jù)具體情景和需求制定合理的大?。òㄈ庋鄞笮『蛯?shí)際熱區(qū)大小）。但是關(guān)于手指點(diǎn)擊的最小熱區(qū)有規(guī)定是44x44px，一般的圖形的熱區(qū)大小都要高于這個(gè)大小，才能便于點(diǎn)擊。其他大小要根據(jù)功能需求進(jìn)行制定。

b 控制合理的相對距離

相對距離指的是界面內(nèi)部各個(gè)元素與控件之間的距離。一般通過研究 整個(gè)流程 的交互動(dòng)作，相互關(guān)聯(lián)的操作元素/操作手勢 距離會(huì)相對比較近，這樣能有效減少操作的時(shí)間。

c 特殊的絕對位置：屏幕邊界

屏幕邊界是可以確定的（鼠標(biāo)向某一方向一直移動(dòng)終會(huì)停留在屏幕邊界），但是屏幕中央確是較難確定的（四個(gè)方向鼠標(biāo)均能延展出去）。一些重要和主要的操作放在屏幕的邊界，可以方便用戶快速到達(dá)，也是菲茨定律的普遍應(yīng)用。

d  反向設(shè)計(jì)：增加時(shí)間來達(dá)成業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)有時(shí)候是與用戶目的是相違背的，也需要根據(jù)具體場景來判斷菲茨定律的使用走向。在特殊情境下也會(huì)通過距離和自身大小來反向增加使用時(shí)間來完成目的。

自我理解：席克定律也在研究交互時(shí)間。我們需要通過控制席克定律所總結(jié)的兩大因素：數(shù)目和復(fù)雜程度 進(jìn)而去左右界面布局的形式，從而縮短交互時(shí)間，達(dá)成良好的體驗(yàn)。

a 精簡選擇的余地

選擇增加也就意味著事情可以發(fā)展的方向更加多元化，用戶就需要權(quán)衡事情該往哪個(gè)方向發(fā)展，而這就需要時(shí)間。不要讓你的用戶思考太多，所以一般給出的選項(xiàng)在滿足需求的情況下要盡可能的少。（這里注意：一般情況下要少但也不能太少，強(qiáng)迫用戶也是不可取。）

b  減少事情的復(fù)雜程度

事情越復(fù)雜，越難處理。盡可能的將復(fù)雜的事件通過交互或者版式等手段進(jìn)行簡化，讓用戶覺得容易把握，而不是大量事物/流程/元素的堆砌。

自我理解：米勒定律對人的記憶數(shù)目進(jìn)行了定量的研究，即 5-9 個(gè)是人腦接受起來比較合適的，多了就容易混亂。

a 控制選項(xiàng)的數(shù)量

同一類型或者同一層級的元素出現(xiàn)，數(shù)目一般控制在5-9個(gè)。

b 將多信息進(jìn)行分段處理，便于理解記憶

面對有大量信息的時(shí)候（數(shù)字/文字/段落）將其分割到5-9個(gè)等大腦容易記住的數(shù)量。

c 順應(yīng)時(shí)代的取舍

看到了有一些設(shè)計(jì)并沒有按照米勒定律去執(zhí)行，因?yàn)殡S著時(shí)代的發(fā)展，有一些定律并不是萬能適用的。定律不可照搬，要根據(jù)具體情境去做取舍，以最終效果為導(dǎo)向。

自我理解：和四大基本原則的親密性原則類似，即在界面布局的時(shí)候性質(zhì)相同的事物要相接近，不相同的要遠(yuǎn)離，這樣更符合人們的既定認(rèn)知。

a 將相近的功能的分為一組

在面臨很多復(fù)雜功能時(shí)，簡單的堆砌顯得啰嗦，需求又不能隨意刪減。這時(shí)候就可以將相類似的功能放在同一個(gè)組別里面進(jìn)行收納整理，這與席克定律也相接近。

b 按照事物性質(zhì)和關(guān)聯(lián)程度嚴(yán)格把握布局的間距

這里與視覺設(shè)計(jì)也有很多重疊，即落實(shí)到頁面的高保真的細(xì)節(jié)。保證內(nèi)容想接近的元素間距要小，內(nèi)容有區(qū)分的間距要大。

自我理解：任何事物都有其復(fù)雜性，不可避免。某些事物一旦失去其復(fù)雜性，其作用本質(zhì)就可能失去效果。不要抱怨某些流程和工作，他們的復(fù)雜性是其發(fā)揮作用所必然帶來的。所以才需要你來優(yōu)化和簡化。

a 把復(fù)雜性降到最低點(diǎn)

事物的復(fù)雜性是固定，但是要思考你所面對的是最簡程度的復(fù)雜性么。首先優(yōu)化內(nèi)部系統(tǒng)的整個(gè)流程和不必要的步驟能夠有效降低系統(tǒng)本身的復(fù)雜性。

b 把復(fù)雜性進(jìn)行轉(zhuǎn)移 組合 隱藏

再把復(fù)雜性降低到最低程度之后，事物/流程仍然表現(xiàn)出一定復(fù)雜性時(shí)。就要考慮造成復(fù)雜的元素是什么，是否要將造成復(fù)雜的元素進(jìn)行收納組合，甚至隱藏。

自我理解：在相同前提下我們選擇最簡單有效的。單純的炫技是可恥的。

a 給用戶清晰的引導(dǎo)

想清楚這張界面的主要目的是什么，順著這個(gè)目標(biāo)去引導(dǎo)用戶，其他元素的視覺層級要讓步，來讓用戶抓住重點(diǎn)。

b 少即是多

少代表流程/步驟/界面元素的減少，多意味著用戶量的增加 體驗(yàn)感的增強(qiáng)。

c 衡量產(chǎn)品功能的取舍

產(chǎn)品在功能迭代改版上，會(huì)出現(xiàn)大量不同的聲音和方向。但功能不是越多越好，用戶的時(shí)間是確定的，在某一功能上消耗的時(shí)間長，在其他功能上就短了。奧卡姆剃刀就要求我們找到主功能點(diǎn)，其他功能點(diǎn)要做出讓步妥協(xié)甚至砍掉。

自我理解：關(guān)于防錯(cuò)定律和我的上一篇文章入門（一）的放錯(cuò)和容錯(cuò)原則基本近似，只是分類的更細(xì)致一些，分解到了操作的前中后階段來防止錯(cuò)誤。上一篇有更多解釋。

a  操作前  禁止操作或者預(yù)告結(jié)果

有一些功能在你操作之前就禁止操作，避免了錯(cuò)誤的發(fā)生?；蛘咄ㄟ^告知操作之后會(huì)產(chǎn)生的不良后果

b 操作中 提醒用戶

在操作過程中，進(jìn)行錯(cuò)誤提醒，有效避免錯(cuò)誤的進(jìn)行

c 操作后給用戶彌補(bǔ)錯(cuò)誤的機(jī)會(huì)

用戶在使用app的過程進(jìn)入錯(cuò)誤的路線，需要給用戶彌補(bǔ)的機(jī)會(huì)

自我理解：這一點(diǎn)主要體現(xiàn)在產(chǎn)品設(shè)計(jì)上，通過對未完成任務(wù)的提醒，來去博得用戶的注意力，進(jìn)而達(dá)到商業(yè)目的。

a 倒計(jì)時(shí)/讀條等交互反饋

倒計(jì)時(shí)會(huì)給人一種緊促感，逼迫用戶去注意，無形之中給用戶規(guī)定了任務(wù)，這個(gè)任務(wù)也就是咋們的業(yè)務(wù)目標(biāo)。倒計(jì)時(shí) 讀條等交互方式也應(yīng)該謹(jǐn)慎恰當(dāng)使用，因?yàn)椴皇敲恳粋€(gè)任務(wù)場景都需要給用戶緊迫感。

b 定向反饋提醒

這一點(diǎn)也是利用未完成任務(wù)的相關(guān)信息反饋達(dá)到讓用戶去完成任務(wù)的業(yè)務(wù)目的。

自我理解：在上一篇一致性原則里面講到了和競品保持一致/和迭代版本保持一致，其實(shí)是我拓展的。這一定律是明確指出了一致的根本原因。在產(chǎn)品設(shè)計(jì)的時(shí)候，用戶的心理就是我希望你的使用方式/操作和主流一致，超出預(yù)期的就會(huì)有人群不接受，就會(huì)有用戶流失。

a 能不創(chuàng)新就不創(chuàng)新

創(chuàng)新意味著改變，改變的不僅僅是你的界面還有用戶習(xí)慣和長久以來的認(rèn)知模型。破壞習(xí)慣重建習(xí)慣是有很大風(fēng)險(xiǎn)的。

其實(shí)能看到很多Dribble頁面很有特點(diǎn)，也不是完全沒有落地性，但是實(shí)際國內(nèi)產(chǎn)品并沒有看到這樣的設(shè)計(jì)，原因就是不符合雅各布定律。

b 好的的產(chǎn)品都是創(chuàng)新的 不同的

這一點(diǎn)好像和上一點(diǎn)有點(diǎn)相悖。但是其實(shí)也不違背，有很多分寸的拿捏往往不是理論能完全決定的。微信后來居上絕不是因?yàn)檎瞻醧q，如果新的創(chuàng)新帶來的優(yōu)勢能夠彌補(bǔ)不相同所帶來的不足，也是可以嘗試的。

文章來源：站酷    作者：花城丶

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)