一個(gè)頁面只做一件事

去除雜亂

用戶的注意力非常珍貴留荔，我們也要根據(jù)用戶的注意力進(jìn)行設(shè)計(jì)晌端。雜亂的界面展示了過多的信息，讓你的用戶非常的累：每一個(gè)加進(jìn)去的按鈕丧鸯、圖片、文字都會使界面更加復(fù)雜嫩絮。

一屏一個(gè)主要操作丛肢。對于使用者围肥，你設(shè)計(jì)的每一個(gè)頁面應(yīng)該僅提供一個(gè)具有真正價(jià)值的單一操作。這會讓你的應(yīng)用更易上手蜂怎，更易使用穆刻，必要時(shí)也更容易添加功能。100個(gè)清晰的屏幕比1個(gè)雜亂的屏幕更好杠步。

讓導(dǎo)航更加明顯氢伟、不言自明

導(dǎo)航確保用戶在跳轉(zhuǎn)時(shí)不迷路，告訴用戶當(dāng)前在哪篮愉，可以去哪腐芍，如何回去等問題。

全局導(dǎo)航需要使用清晰明了的視覺圖形试躏，無須解釋

所有導(dǎo)航必須一致猪勇，不要再不通過頁面內(nèi)隱藏或移動導(dǎo)航

對手指友好的點(diǎn)擊目標(biāo)

讓你的觸碰點(diǎn)7-10mm大，這樣他們可以用手指準(zhǔn)確的點(diǎn)擊到颠蕴。這樣大小的目標(biāo)對于用戶手指來說非常舒適泣刹，在點(diǎn)擊時(shí)，目標(biāo)的邊緣也是可見的犀被。這可以讓用戶在點(diǎn)擊目標(biāo)之后得到清晰的視覺反饋椅您。

文字內(nèi)容應(yīng)易讀

移動端設(shè)計(jì)的規(guī)則之一：文字至少要有11pt，這樣才能保證他們不需要放大就可以在移動距離內(nèi)看清寡键。

通過行高或字間距來提高可讀性掀泳。大一些的空白有時(shí)可以讓最雜亂的界面看起來具有吸引力和簡潔。

讓界面元素清晰可見

你需要借助顏色和對比來幫助用戶理解你的內(nèi)容西轩。為了支撐可用性员舵，你可以選定主要、次要藕畔、強(qiáng)調(diào)顏色马僻。確保元素間有足夠的顏色對比度，這樣低視力的用戶也可以看見和使用你的APP注服。

文字顏色和背景顏色必須擁有足夠的對比度韭邓，這樣文字才具有可讀性。W3C對主體文字和圖片文字提供了如下對比度建議：

小字需要與背景有至少4.5：1的對比度溶弟；

大字（粗體14pt/18pt女淑，甚至更大）需要與背景至少有3：1的對比度；

界面擁有足夠的對比度對于移動端是非常重要的：用戶在戶外時(shí)辜御，手機(jī)可能因?yàn)楣饩€而只擁有較低對比度诗力。

圖標(biāo)或其他關(guān)鍵元素也應(yīng)當(dāng)采用上述建議的對比度。

根據(jù)手的位置設(shè)計(jì)控制點(diǎn)

Steven Hoober在他的移動設(shè)備使用調(diào)查中發(fā)現(xiàn)，49%的用戶只依賴一個(gè)手指去完成所有的手機(jī)操作苇本。下圖中的圖樣大致是移動手機(jī)屏幕的可達(dá)區(qū)域示意圖袜茧，各顏色代表了用戶可以觸及的與手機(jī)屏幕交互的點(diǎn)。

綠色代表用戶可以輕松觸及的區(qū)域瓣窄；黃色代表用戶需要一點(diǎn)稍微伸展一點(diǎn)笛厦；紅色代表用戶可能需要調(diào)整手持方式才能達(dá)到的點(diǎn)。因此俺夕，手的位置應(yīng)該影響著移動端設(shè)計(jì)時(shí)各控制元素的擺放問題：

一級菜單裳凸、高頻按鍵和常用操作應(yīng)該放置在綠色區(qū)域內(nèi)，因?yàn)檫@樣子單手很容易交互劝贸。

反向操作（例如刪除和消除）應(yīng)該放在單手難觸及的紅色區(qū)域姨谷，因?yàn)槟憧刹幌胝`點(diǎn)擊到它們。

減少輸入

移動端打字是很緩慢且易錯的過程映九。因此梦湘，使用一款移動APP時(shí)應(yīng)盡量減少打字輸入的需求：

讓表單短且簡單，去除一切不需要的內(nèi)容件甥；

適當(dāng)時(shí)使用自動填充

利用各種智能傳感器捌议，攝像頭、麥克風(fēng)引有、陀螺儀瓣颅，以及私人數(shù)據(jù)地理位置、賬戶信息

這樣用戶只需要輸入最少的信息譬正。

減少等待

減少等待宫补、穩(wěn)定快捷，才能幫你留住用戶曾我。許多研究都表明守谓，用戶能夠忍受的最長等待時(shí)間的中位數(shù)，在 6～8 秒之間您单。這就是說，8 秒是一個(gè)臨界值荞雏，如果你的頁面打開速度過慢虐秦，等待 8 秒以上，大部分用戶會離你而去凤优。

在等待過程中轉(zhuǎn)移注意力

instagram在點(diǎn)擊上傳照片后悦陋，會回到首頁的位置，同時(shí)告訴你照片正在提交筑辨，而不是顯示一個(gè)上傳進(jìn)度的界面俺驶，讓用戶看百分比。

減少點(diǎn)擊

產(chǎn)品在使用過程中經(jīng)常會有一些多余的點(diǎn)擊棍辕，對于用戶而言暮现，這些不必要的操作都是附加工作还绘。附加工作消耗用戶的精力，但是不直接實(shí)現(xiàn)用戶的目標(biāo)栖袋。消除附加工作拍顷，可以提升操作效率，改善產(chǎn)品的可用性塘幅。交互設(shè)計(jì)師應(yīng)該對產(chǎn)品中附加工作高度敏感昔案，才能把產(chǎn)品設(shè)計(jì)得更高效。

反饋明確

及時(shí)恰當(dāng)?shù)姆答伳芨嬖V用戶下一步該做什么电媳，幫助用戶做出判斷和決定踏揣，讓用戶知道系統(tǒng)運(yùn)行良好穩(wěn)定。所以匾乓，要營造和諧的人機(jī)對話環(huán)境捞稿，我們必須做到適時(shí)明確的反饋。

非模態(tài)的反饋钝尸，不打斷任務(wù)流

減少使用alertbox括享，使用list notification,toast list等方式來提醒用戶。

Gmail是第一個(gè)把刪除的模態(tài)彈框設(shè)計(jì)成List

Notification這種方式的珍促，提醒用戶撤銷剛才的刪除操作铃辖，這種非模態(tài)的處理，讓刪除的流程更加順暢和輕松自如猪叙。

自動保存用戶的輸入成果

移動端輸入的環(huán)境復(fù)雜娇斩，容易出錯。再輸入后要離開時(shí)要二次確認(rèn)

斷網(wǎng)或網(wǎng)絡(luò)不穩(wěn)定時(shí)穴翩，仍然可以發(fā)布但是顯示嘆號提醒稍后重試犬第。

交互設(shè)計(jì)七大定律

Fitts’ Law / 菲茨定律（費(fèi)茨法則）

定律內(nèi)容：從一個(gè)起始位置移動到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來決定，到目標(biāo)的距離和目標(biāo)的大小芒帕。

菲茨定律的啟示：

1.按鈕等可點(diǎn)擊對象需要合理的大小尺寸歉嗓。

2.屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)檫吔鞘蔷薮蟮哪繕?biāo)背蟆，它們無限高或無限寬鉴分，你不可能用鼠標(biāo)超過它們。即不管你移動了多遠(yuǎn)带膀，鼠標(biāo)最終會停在屏幕的邊緣志珍，并定位到按鈕或菜單的上面。

3.出現(xiàn)在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快垛叨，因?yàn)椴恍枰苿拥狡聊坏钠渌恢谩?/p>

Hick's Law / 席克定律（下着矗克法則）

定律內(nèi)容：一個(gè)人面臨的選擇（n）越多，所需要作出決定的時(shí)間（T）就越長。用數(shù)學(xué)公式表達(dá)為反應(yīng)時(shí)間 T=a+blog2（n）敛纲。

在人機(jī)交互中界面中選項(xiàng)越多喂击，意味著用戶做出決定的時(shí)間越長。

例如比起 2 個(gè)菜單载慈，每個(gè)菜單有 5 項(xiàng)惭等，用戶會更快得從有 10 項(xiàng)的 1 個(gè)菜單中做出選擇。

神奇數(shù)字7±2法則

1956 年喬治米勒對短時(shí)記憶能力進(jìn)行了定量研究办铡，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊辞做，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯。與席克定律類似寡具，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動應(yīng)用交互設(shè)計(jì)上秤茅，如應(yīng)用的選項(xiàng)卡不會超過 5 個(gè)。

The Law Of Proximity 接近法則

根據(jù)格式塔（Gestalt）心理學(xué)：當(dāng)對象離得太近的時(shí)候童叠，意識會認(rèn)為它們是相關(guān)的框喳。在交互設(shè)計(jì)中表現(xiàn)為一個(gè)提交按鈕會緊挨著一個(gè)文本框，因此當(dāng)相互靠近的功能塊是不相關(guān)的話厦坛，就說明交互設(shè)計(jì)可能是有問題的锌蓄。

Tesler's Law 泰思勒定律（復(fù)雜性守恒定律）

該定律認(rèn)為每一個(gè)過程都有其固有的復(fù)雜性账嚎，存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)過程就不能再簡化了，你只能將固有的復(fù)雜性從一個(gè)地方移動到另外一個(gè)地方享言。如對于郵箱的設(shè)計(jì)罪治，收件人地址是不能再簡化的图甜，而對于發(fā)件人卻可以通過客戶端的集成來轉(zhuǎn)移它的復(fù)雜性底靠。

對于這個(gè)定律的理解

事情的復(fù)雜性是肯定存在的，人趨于簡單這個(gè)事實(shí)也是存在的呢蛤。

如果復(fù)雜是針對一個(gè)任務(wù)流而言：看是非常復(fù)雜的任務(wù)惶傻，而使用者在具體使用過程中往往關(guān)注或聚焦其中的一部分，所以可以通過將任務(wù)進(jìn)行拆分完成其障，也可以分割成各個(gè)獨(dú)立的簡單任務(wù)银室，這是一種簡化，當(dāng)然也是一種復(fù)雜励翼，因?yàn)椴鸱烛诟摇⒎指畋旧砭蜁鼮閺?fù)雜，這一點(diǎn)需要平衡抚笔，而我所在的團(tuán)隊(duì)中平衡者往往是交互設(shè)計(jì)師。當(dāng)然這取決于交互設(shè)計(jì)師的經(jīng)驗(yàn)和能力侨拦。

如果復(fù)雜是針對功能操作或信息傳遞殊橙，交互設(shè)計(jì)中的四個(gè)策略的組合使用可以解決這個(gè)問題，如將信息組織更便于理解、識別膨蛮，將次要并繁瑣的轉(zhuǎn)移或隱藏叠纹，將沒有必要的信息刪除等，交互中有化繁為簡之說敞葛，其實(shí)是規(guī)繁為簡誉察、刪繁未間。規(guī)繁為簡更多應(yīng)該是組織惹谐，轉(zhuǎn)移持偏，隱藏。刪繁為簡則為刪除氨肌，移除不必要的說明鸿秆，不必要的考慮。我之前的理解是盡量不要刪繁為簡（因?yàn)閯h除的往往是別人的辛苦工作成果）怎囚，而我現(xiàn)在的理解是從刪除并刪的合理才是真的產(chǎn)品設(shè)計(jì)過程中正確的減法卿叽，這一點(diǎn)往往是不易的。

還有一種復(fù)雜變得簡化的方法就是“破”恳守，打破考婴、改變現(xiàn)在的實(shí)現(xiàn)方式，利用新的規(guī)則催烘、方式沥阱、硬件設(shè)備、技術(shù)讓復(fù)雜直接的簡單化颗圣，也就是創(chuàng)新≡樱現(xiàn)實(shí)視覺中有很多創(chuàng)新，留意即可發(fā)現(xiàn)在岂。身邊最為直接的信息傳遞的方式信件-電報(bào)-電話-手機(jī)等奔则。

復(fù)雜確實(shí)是存在的，復(fù)雜度確實(shí)也是守恒的蔽午，但是我們至少可以做一些事情易茬，讓消費(fèi)者、瀏覽者（這里不說用戶）的感覺（視覺及老、觸覺抽莱、知覺）變得簡單。

防錯原則

防錯原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽骄恶，而不是人為操作疏忽食铐。通過改變設(shè)計(jì)可以把過失降到最低。該原則最初是用于工業(yè)管理的僧鲁，但在交互設(shè)計(jì)也十分適用虐呻。如在硬件設(shè)計(jì)上的 USB 插槽象泵；而在界面交互設(shè)計(jì)中也是可以經(jīng)常看到斟叼，如當(dāng)使用條件沒有滿足時(shí)偶惠，常常通過使功能失效來表示（一般按鈕會變?yōu)榛疑珶o法點(diǎn)擊），以避免勿按朗涩。如上圖所示我們的評論功能快忽孽，在留言框沒有內(nèi)容或郵箱格式不正確的時(shí)候是無法獲取驗(yàn)證碼的，只有兩者都滿足了才可以谢床。

Occam's Razor 奧卡姆剃刀原理（簡單有效原理）

這個(gè)原理被稱為“如無必要兄一，勿增實(shí)體”，即如有兩個(gè)功能相等的設(shè)計(jì)萤悴，那么選擇最簡單的瘾腰。

奧卡姆剃刀的原則不是求真，而是求簡覆履。因?yàn)槲覀兛梢詫Ρ倔w世界做出無數(shù)多個(gè)可能的論述蹋盆，這些論述都有可能是對的，但都不一定是對的硝全，甚至這些論述在使用起來的時(shí)候得到的結(jié)果會是一樣的栖雾。而為了方便，我們只能選擇最簡單的那個(gè)伟众。

注：非原創(chuàng)