設(shè)計(jì)原則總結(jié):最全的交互設(shè)計(jì)原則和理論匯總

11 評(píng)論 99687 瀏覽 594 收藏 40 分鐘

設(shè)計(jì)是有原則和方法論的,鑒于網(wǎng)上各種文章和原則比較零碎,這次統(tǒng)一將交互設(shè)計(jì)的方法和理論匯總,不足之處也希望各位能夠提出,一起補(bǔ)全。

文章包括:格式塔心理學(xué)原則、尼爾森可用性原則、尼爾森F視覺(jué)模型、Heuristic Evaluation十原則、費(fèi)茨定律、席克定律、7+2法則、2秒原理、2/8法則、3次點(diǎn)擊法則、界面黃金8法則、jakob nielson原則、KANO模型、0123簡(jiǎn)單法則、MVP法則、嬰兒鴨綜合癥、包豪斯理念、泰思勒定律、防錯(cuò)原則、奧卡姆剃刀原理、maya法則、信噪比法則、序列效應(yīng)、功能可見(jiàn)性原則、成本效益、古騰堡圖表法、交互易用性五大法則、馬斯洛需求層次理論…

部分理論可能意思相近或重復(fù)。

格式塔原則

格式塔心理學(xué)誕生于1912年,是由德國(guó)心理學(xué)家組成的研究小組試圖解釋人類(lèi)視覺(jué)的工作原理。他們觀(guān)察了許多重要的視覺(jué)現(xiàn)象并對(duì)它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類(lèi)視覺(jué)是整體的,我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu),并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線(xiàn)和區(qū)域?!靶螤睢焙汀皥D形”在德語(yǔ)中是Gestalt,因此這些理論也稱(chēng)做視覺(jué)感知的格式塔原理。

格式塔原則的原理主要有七種:

接近性原理;相似性原理;連續(xù)性原理;封閉性原理;對(duì)稱(chēng)性原理;主體/背景原理;共同命運(yùn)原理。

接近性原理:

物體之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起?;ハ嗫拷ㄏ鄬?duì)于其它物體)的物體看起來(lái)屬于一組,而那些距離較遠(yuǎn)的則自動(dòng)劃為組外。

相似性原理:

如果其它因素相同,那么相似的物體看起來(lái)歸屬于一組。

連續(xù)性原理:

視覺(jué)傾向于感知連續(xù)的形式而不是離散的碎片

封閉性原理:

視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái),從而將其感知為完整的物體而不是分散的碎片。

對(duì)稱(chēng)性原理:

我們傾向于分解復(fù)雜的場(chǎng)景來(lái)降低復(fù)雜度。

主體/背景原理:

我們的大腦將視覺(jué)區(qū)域分為主體和背景。主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素,其余則是背景。

當(dāng)物體重疊時(shí)我們習(xí)慣把小的那個(gè)看成是背景之上的主體。

共同命運(yùn):與接近性、相似永生原理相關(guān),都影響我們感知的物體是否成組。指出一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的。

下面的數(shù)十個(gè)五邊形中,如果其中的7個(gè)同步的前后擺動(dòng),那么雖然它們的距離較遠(yuǎn),還是會(huì)被感知為一組

同樣間距大小顏色的圖形,那么視覺(jué)上會(huì)把一起動(dòng)的圖形分為一組。文件夾拖動(dòng)時(shí)同時(shí)選中的文件夾出現(xiàn)的反白背景及運(yùn)動(dòng)軌跡是共同命運(yùn)原理最直觀(guān)的解釋。

尼爾森可用性原則

尼爾森的十大可用性原則是產(chǎn)品設(shè)計(jì)與用戶(hù)體驗(yàn)設(shè)計(jì)的重要參考標(biāo)準(zhǔn),值得深入研究與運(yùn)用。

1.狀態(tài)可見(jiàn)原則

用戶(hù)在網(wǎng)頁(yè)上的任何操作,不論是單擊、滾動(dòng)還是按下鍵盤(pán),頁(yè)面應(yīng)即時(shí)給出反饋?!凹磿r(shí)”是指,頁(yè)面響應(yīng)時(shí)間小于用戶(hù)能忍受的等待時(shí)間。

2.環(huán)境貼切原則

網(wǎng)頁(yè)的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶(hù)所在的環(huán)境(年齡、學(xué)歷、文化、時(shí)代背景),而不要使用第二世界的語(yǔ)言?!秈Phone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外,還應(yīng)該使用易懂和約定俗成的表達(dá)。

3.撤銷(xiāo)重做原則

為了避免用戶(hù)的誤用和誤擊,網(wǎng)頁(yè)應(yīng)提供撤銷(xiāo)和重做功能。

4.一致性原則

同一用語(yǔ)、功能、操作保持一致。

5.防錯(cuò)原則

通過(guò)網(wǎng)頁(yè)的設(shè)計(jì)、重組或特別安排,防止用戶(hù)出錯(cuò)。

6.易取原則

好記性不如爛筆頭。盡可能減少用戶(hù)回憶負(fù)擔(dān),把需要記憶的內(nèi)容擺上臺(tái)面。

7.靈活高效原則

中級(jí)用戶(hù)的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶(hù)數(shù)。為大多數(shù)用戶(hù)設(shè)計(jì),不要低估,也不可輕視,保持靈活高效。

8.易掃原則

互聯(lián)網(wǎng)用戶(hù)瀏覽網(wǎng)頁(yè)的動(dòng)作不是讀,不是看,而是掃。易掃,意味著突出重點(diǎn),弱化和剔除無(wú)關(guān)信息。

9.容錯(cuò)原則

幫助用戶(hù)從錯(cuò)誤中恢復(fù),將損失降到最低。如果無(wú)法自動(dòng)挽回,則提供詳盡的說(shuō)明文字和指導(dǎo)方向,而非代碼,比如404。

10.人性化幫助原則

幫助性提示最好的方式是:1、無(wú)需提示;2、一次性提示;3、常駐提示;4;幫助文檔。

尼爾森F型視覺(jué)模型

尼爾森F型視覺(jué)模型由 Jakob Nielsen于2006年提出

他指出,我們?cè)诘谝淮斡^(guān)看頁(yè)面時(shí),視線(xiàn)會(huì)呈 F的形狀關(guān)注頁(yè)面

  1. 先從頂部開(kāi)始從左到右水平移動(dòng)
  2. 目光再下移開(kāi)始從左到右觀(guān)察但是長(zhǎng)度會(huì)相對(duì)短些
  3. 以較短的長(zhǎng)度向下掃視,形成一個(gè) F形狀,此時(shí)我們的閱讀速度較慢,更為系統(tǒng)和條理性

具體如圖:

根據(jù)尼爾森F模型,我們可以得出幾個(gè)心理暗示:

  • 用戶(hù)快速掃視時(shí),具體的文字并不重要
  • 多用小標(biāo)題、短句引起閱讀者注意
  • 將重要的內(nèi)容放在最上邊

NN Group最經(jīng)典的Heuristic Evaluation的十原則

1.Visibility of system status

可視性原則:系統(tǒng)狀態(tài)有反饋,等待時(shí)間要合適。

e.g. 鍵盤(pán)大寫(xiě)的時(shí)候會(huì)有小綠燈告訴你哦!

2.Match between system and the real world

不要脫離現(xiàn)實(shí) :使用用戶(hù)語(yǔ)言而不是開(kāi)發(fā)者語(yǔ)言,貼近生活實(shí)際而不是學(xué)術(shù)概念

e.g. 惹人厭的404錯(cuò)誤,根本不明白什么意思好嗎!

3.User Control and Freedom

用戶(hù)有自由控制權(quán):操作失誤可回退

e.g. 啊不小心發(fā)錯(cuò)了,求撤回!

4.Consistency and Standards

一致性原則:同一事物和同類(lèi)操作的表示用語(yǔ)要各處保持一致

e.g. 熟悉了一個(gè)Adobe產(chǎn)品,其他的我就都會(huì)啦!

5.Error prevention

有預(yù)防用戶(hù)出錯(cuò)的措施:關(guān)鍵操作有確認(rèn)提示,及早消除誤操作

e.g. 哎媽差點(diǎn)刪除錯(cuò)了!

6.Recognition rather than recall

要在第一時(shí)間讓用戶(hù)看到:識(shí)別勝于回憶,提供必要的信息提示(可視&易?。瑴p少記憶負(fù)擔(dān)

e.g. 我對(duì)什么感興趣來(lái)著?哦哦有選項(xiàng)啊,那就方便多啦,我對(duì)旅行、藝術(shù)都很感興趣哦!(pinterest在用戶(hù)注冊(cè)后詢(xún)問(wèn)用戶(hù)preference的時(shí)候直接提供選項(xiàng),避免強(qiáng)迫用戶(hù)回憶。)

7.Flexibility and efficiency of use

使用起來(lái)靈活且高效:為新手和專(zhuān)家設(shè)計(jì)定制化的操作方式,快捷操作可調(diào)整。

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

8.Aesthetics and minimalist design

易讀性:減少無(wú)關(guān)信息,體現(xiàn)簡(jiǎn)潔美感

e.g. 我用Cash這個(gè)應(yīng)用就是為了打錢(qián)的,不要看到其他信息,我只在乎金額!(很多交互設(shè)計(jì)的初學(xué)者都會(huì)容易有一個(gè)誤區(qū),就是想把頁(yè)面填滿(mǎn)。實(shí)際上,你頁(yè)面上放什么,什么信息要突出,取決于你的用戶(hù)需求。避免為了“填滿(mǎn)”界面而放入無(wú)關(guān)信息。)

9.Help users recognize, diagnose and recover from errors

給用戶(hù)明確的錯(cuò)誤信息,并協(xié)助用戶(hù)方便的從錯(cuò)誤中恢復(fù)工作

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

10.Help and documentation

必要的幫助提示與說(shuō)明文檔:無(wú)需文檔就能流暢應(yīng)用當(dāng)然更好,一般地文檔很必要,而且也提供便利的檢索功能,面向用戶(hù)任務(wù)描述,列出具體實(shí)現(xiàn)步驟,并且不要太冗長(zhǎng)。

e.g. 哎怎么從web page導(dǎo)入PDF???搜索一下!哇一步一步的help documentation好清楚??!

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

定律內(nèi)容:從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定,到目標(biāo)的距離和目標(biāo)的大?。ㄉ蠄D中的 D與 W),用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)。

它是 1954 年保羅.菲茨首先提出來(lái)的,用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型,在人機(jī)交互(HCI)和設(shè)計(jì)領(lǐng)域的影響卻最為廣泛和深遠(yuǎn)。 新的 Windows 8 中由開(kāi)始菜單到開(kāi)始屏幕的轉(zhuǎn)變背后也可以看作是該定律的應(yīng)用。

菲茨定律的啟示:

按鈕等可點(diǎn)擊對(duì)象需要合理的大小尺寸

屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因?yàn)檫吔鞘蔷薮蟮哪繕?biāo),它們無(wú)限高或無(wú)限寬,你不可能用鼠標(biāo)超過(guò)它們。即不管你移動(dòng)了多遠(yuǎn),鼠標(biāo)最終會(huì)停在屏幕的邊緣,并定位到按鈕或菜單的上面。

出現(xiàn)在用戶(hù)正在操作的對(duì)象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開(kāi)得更快,因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。

擴(kuò)展閱讀:Windows 設(shè)計(jì)規(guī)范中的鼠標(biāo)交互、菲茨定律與互聯(lián)網(wǎng)設(shè)計(jì)、費(fèi)茲定律Fitts’ Law與使用者介面設(shè)計(jì)、Google Chrome 與 Fitts Law、談?wù)?Fitts 定律、費(fèi)茨法則在交互設(shè)計(jì)中的應(yīng)用 (Readlists)

Hick’s Law / 席克定律(希克法則)

定律內(nèi)容:一個(gè)人面臨的選擇(n)越多,所需要作出決定的時(shí)間(T)就越長(zhǎng)。用數(shù)學(xué)公式表達(dá)為反應(yīng)時(shí)間 T=a+b log2(n)。在人機(jī)交互中界面中選項(xiàng)越多,意味著用戶(hù)做出決定的時(shí)間越長(zhǎng)。例如比起 2 個(gè)菜單,每個(gè)菜單有 5 項(xiàng),用戶(hù)會(huì)更快得從有 10 項(xiàng)的 1 個(gè)菜單中做出選擇。

席克定律多應(yīng)用于軟件/網(wǎng)站界面的菜單及子菜單的設(shè)計(jì)中,在移動(dòng)設(shè)備中也比較適用。

擴(kuò)展閱讀:席克法則、談?wù)凥ick定律(Readlists)

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

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

?The Law Of Proximity 接近法則

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

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

該定律認(rèn)為每一個(gè)過(guò)程都有其固有的復(fù)雜性,存在一個(gè)臨界點(diǎn),超過(guò)了這個(gè)點(diǎn)過(guò)程就不能再簡(jiǎn)化了,你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。如對(duì)于郵箱的設(shè)計(jì),收件人地址是不能再簡(jiǎn)化的,而對(duì)于發(fā)件人卻可以通過(guò)客戶(hù)端的集成來(lái)轉(zhuǎn)移它的復(fù)雜性。

防錯(cuò)原則:

防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽,而不是人為操作疏忽。通過(guò)改變?cè)O(shè)計(jì)可以把過(guò)失降到最低。該原則最初是用于工業(yè)管理的,但在交互設(shè)計(jì)也十分適用。如在硬件設(shè)計(jì)上的 USB 插槽;而在界面交互設(shè)計(jì)中也是可以經(jīng)??吹剑绠?dāng)使用條件沒(méi)有滿(mǎn)足時(shí),常常通過(guò)使功能失效來(lái)表示(一般按鈕會(huì)變?yōu)榛疑珶o(wú)法點(diǎn)擊),以避免勿按。

如上圖所示極客公園的評(píng)論功能快,在留言框沒(méi)有內(nèi)容或郵箱格式不正確的時(shí)候是無(wú)法獲取驗(yàn)證碼的,只有兩者都滿(mǎn)足了才可以。

Occam’s Razor 奧卡姆剃刀原理(簡(jiǎn)單有效原理)

這個(gè)原理被稱(chēng)為“如無(wú)必要,勿增實(shí)體”,即如有兩個(gè)功能相等的設(shè)計(jì),那么選擇最簡(jiǎn)單的。在極客公開(kāi)課?走進(jìn) UC 中 UC 瀏覽器產(chǎn)品經(jīng)理蘇劍南在“UC 瀏覽器 For Android 產(chǎn)品設(shè)計(jì)思考”演講中也有講到該原理的應(yīng)用,“如果 UC 手機(jī)瀏覽器要發(fā)布第一個(gè)版本 UC 1.0,你會(huì)選擇哪五個(gè)功能?”

功能可見(jiàn)性

1.在視覺(jué)感知上,某些元素適用于某些功能,這些元素便符合功能可見(jiàn)性。

2.如果設(shè)計(jì)中的元素的功能可見(jiàn)性與人們的感官預(yù)期相符,那這種設(shè)計(jì)會(huì)有很高的接納率和使用率,也被認(rèn)為容易操作。所以在設(shè)計(jì)時(shí),需要盡可能的符合人們的心理預(yù)期,界面設(shè)計(jì)要模擬人們熟悉的物品或環(huán)境,暗示提醒使用者的新系統(tǒng)中的各部件的使用方法和功能。

3.應(yīng)用例子:生活中門(mén)和門(mén)把手功能抵觸,有推的標(biāo)語(yǔ),就不要設(shè)計(jì)有門(mén)把手??梢匀サ粑淖痔崾荆枰频囊幻?,設(shè)置無(wú)把手,需要拉的一面設(shè)置有把手,這樣,用戶(hù)在進(jìn)行“推或拉”的動(dòng)作,根據(jù)門(mén)把手的功能可見(jiàn)性,就可以準(zhǔn)確的操作。再比如電腦屏幕的按鈕設(shè)計(jì),電腦桌面的垃圾桶圖標(biāo)、文件夾等等,都是模擬生活中的物品設(shè)計(jì)的,符合用戶(hù)在生活中的認(rèn)知,用來(lái)提示使用者,這些圖標(biāo)在軟件中的功能。

圖示:這些圖標(biāo)設(shè)計(jì)符合生活中的相關(guān)事物,能夠使軟件功能明顯~

無(wú)障礙使用

1.好的設(shè)計(jì)不需要特別調(diào)整或修改就能很好的服務(wù)各種需要的人,此法則適用于所有大眾。四大要素:易讀性,易操作、簡(jiǎn)易性、包容性。

(1)易讀性:不論感官功能差異,都可以理解的設(shè)計(jì)。

提升易讀性方法:a.多種標(biāo)注方式呈現(xiàn)信息,文字圖像觸覺(jué)等;b.輔助性感官設(shè)計(jì) ?c.合理合適的方式呈現(xiàn)操控裝置和操控信息。

(2)易操作:不論身體狀況如何都可以使用。

提升易操作方法:a.最大限度減少使用者重復(fù)操作和不必要的體力消耗 ?b.運(yùn)用完善和簡(jiǎn)單的功能指導(dǎo)準(zhǔn)則,使操作裝置容易使用。 c.輔助人體活動(dòng),提供方便的操作環(huán)境(殘疾人專(zhuān)用道) d.合理合適的方式呈現(xiàn)操控裝置和操控信息。

(3)簡(jiǎn)易性:不論經(jīng)驗(yàn)背景、文化程度、注意力等,都易操控。

提高簡(jiǎn)易性方法:a.減不必要的復(fù)雜裝飾 ?b.采用清楚明了,持續(xù)統(tǒng)一的提示符號(hào)和操作信息。 c.循序漸進(jìn)展開(kāi)說(shuō)明、標(biāo)注相關(guān)信息和操作裝置。d.所有指令應(yīng)該提供清楚的提示和反饋,確保信息簡(jiǎn)單易懂,適合不同文化程度的使用者。

(4)包容性:操作錯(cuò)誤及導(dǎo)致后果最小化。

提高包容性方法:a.利用健全的功能可見(jiàn)性和可操作性(只標(biāo)注正確的使用方法)預(yù)防錯(cuò)誤。 ?b.利用確認(rèn)與警告預(yù)防錯(cuò)誤(刪除時(shí):確認(rèn)是否刪除)。 ?c.加入設(shè)計(jì)自正性的操作功能和安全網(wǎng)(自我調(diào)整與修正),減輕避免因錯(cuò)誤造成的后果。

2.應(yīng)用例子:大型電梯比小型電梯功能健全,兩套操作板適用站著與坐著的人,操作板多種符號(hào)(數(shù)字圖像盲點(diǎn))。

成本效益

1.設(shè)計(jì)中,用來(lái)評(píng)估新功能/新元素出現(xiàn)的新增成本的最后財(cái)務(wù)回收狀況。 如果與設(shè)計(jì)的互動(dòng)成本>收益,則是不良設(shè)計(jì),反之是優(yōu)秀設(shè)計(jì)。

2.成本效益可以衡量設(shè)計(jì)的品質(zhì)。如:網(wǎng)頁(yè)下載的時(shí)間常見(jiàn)說(shuō)法不超過(guò)十秒,但是,接受下載時(shí)間的長(zhǎng)短,更多與網(wǎng)頁(yè)提供的效益有關(guān),如果網(wǎng)頁(yè)具有合理效益,其實(shí)可以抵消超過(guò)十秒的下載成本。所以,可以通過(guò)改進(jìn)設(shè)計(jì)品質(zhì)來(lái)降低互動(dòng)成本(設(shè)計(jì)能夠提供效益)。

3.讓產(chǎn)品繼續(xù)進(jìn)行應(yīng)該效益>=成本,讓產(chǎn)品更好,應(yīng)該讓效益盡可能的大于成本。應(yīng)該從效益與成本兩個(gè)方面工作:成本限制 或者 效益增加。所以不能僅僅考慮成本限制范圍,也應(yīng)該考慮互動(dòng)效益成本。

4.應(yīng)用例子:loading頁(yè)設(shè)計(jì):用成本效益來(lái)考慮,為什么loading頁(yè)設(shè)計(jì)多樣,不只是因?yàn)椤坝腥ぁ边@么簡(jiǎn)單的理由,有趣只是用戶(hù)的直觀(guān)感受。這種設(shè)計(jì)的應(yīng)用實(shí)質(zhì)可以用成本效益解釋?zhuān)却臅r(shí)間可以當(dāng)做是成本,在技術(shù)無(wú)法縮短合理的等待時(shí)間時(shí),成本就相當(dāng)于無(wú)法降低,那么想要產(chǎn)品更好,需要從效益入手,設(shè)計(jì)可以帶來(lái)效益,那么就需要改進(jìn)等待頁(yè)的設(shè)計(jì)。所以現(xiàn)在的loading頁(yè)、進(jìn)度條、錯(cuò)誤頁(yè)等等設(shè)計(jì)都體現(xiàn)能帶來(lái)效益的創(chuàng)意互動(dòng)。

圖示:

8020法則

1.定義:在所有大系統(tǒng)中,高達(dá)80%的效果是由僅占20%的關(guān)鍵因素決定,在實(shí)際操作中發(fā)現(xiàn),關(guān)鍵變量占10-30%不等。適用范圍普遍,適用互不相關(guān)的事物影響。

2.8020法則有助于資源整合,可以幫助提升設(shè)計(jì)最大化。比如:客戶(hù)用80%的時(shí)間集中于產(chǎn)品20%的功能時(shí),那設(shè)計(jì)與檢測(cè)應(yīng)該集中于那20%,剩余80%應(yīng)該重新評(píng)估,確認(rèn)他們的價(jià)值。設(shè)計(jì)師可以利用此法則,對(duì)設(shè)計(jì)中的所有元素進(jìn)行重新評(píng)估,劃定重新設(shè)計(jì)與優(yōu)化的范圍,有效決定優(yōu)勢(shì)資源進(jìn)行再設(shè)計(jì),80%非關(guān)鍵能減則減,時(shí)間與資源有限時(shí),不要試圖改進(jìn)與優(yōu)化那80%。

3.應(yīng)用例子:圖形用戶(hù)界面把大部分功能隱藏在功能菜單(降低視覺(jué)復(fù)雜性),常用功能難以找到(增加操作復(fù)雜性),所以應(yīng)把20%關(guān)鍵功能放在功能菜單中(工具條的使用)。

圖示:在印象筆記這個(gè)軟件里,上層是功能菜單,在主頁(yè)面上方設(shè)有常用功能的工具條,這就是把20%的關(guān)鍵功能擺設(shè)出來(lái),沒(méi)有隱藏掉。

前衛(wèi)與親近(MAYA法則)

1.成功的設(shè)計(jì)可以從很多方面界定:功能、美學(xué)角度、適用性等,如果我們從商業(yè)績(jī)效也就是銷(xiāo)售量來(lái)定義設(shè)計(jì)的成功,可以從兩個(gè)變量取得平衡:親切熟悉+獨(dú)一無(wú)二。MAYA法則就是幫助我們找到這兩個(gè)變量的平衡契合點(diǎn),所以一個(gè)設(shè)計(jì)如果可以結(jié)合讓人感到熟悉+新奇的感受,就能夠提升設(shè)計(jì)的成功。此法則應(yīng)用于:面向大眾對(duì)象的產(chǎn)品,用戶(hù)是大眾,而非專(zhuān)業(yè)設(shè)計(jì)師和藝術(shù)家。

2.用戶(hù)喜歡熟悉的東西(曝光效應(yīng):物品或環(huán)境的吸引力會(huì)隨著曝光次數(shù)的增加而增加),也喜歡新奇的設(shè)計(jì)。人們對(duì)新奇的關(guān)注與記憶大于典型性。此法則認(rèn)為最理想的做法是:兼顧熟悉性和新奇性。 對(duì)用戶(hù)來(lái)講:最新奇但依舊可辨識(shí)的物品或環(huán)境,最富美學(xué)吸引力。

3.應(yīng)用例子:設(shè)計(jì)的演變雖然一直有創(chuàng)意新奇的設(shè)計(jì),但是都在從前被大眾接受的設(shè)計(jì)漸漸演變而來(lái),而非完全脫離重新創(chuàng)造,因此新奇的設(shè)計(jì)+過(guò)去設(shè)計(jì)的熟悉感,會(huì)使得用戶(hù)具有吸引力和接受能力。圖標(biāo)、界面的演變。

圖示:IOS不同版本的設(shè)計(jì)元素的對(duì)比,可以看出,雖然新版具有新奇性,但是仍然可以找到以前版本的熟悉感受。

區(qū)域?qū)R

1.該對(duì)齊適用于:元素形狀不一,不對(duì)稱(chēng)時(shí),元素可為圖形或文字元素,如果是元素形式簡(jiǎn)單對(duì)稱(chēng),就采用邊線(xiàn)對(duì)齊的方式。

2.對(duì)齊方法:將要對(duì)齊的元素順著中軸線(xiàn)擺放,讓中軸線(xiàn)兩邊的視覺(jué)重心或者面積相等。區(qū)域?qū)R方法無(wú)法使邊線(xiàn)對(duì)齊,如果想同時(shí)邊線(xiàn)對(duì)齊,只能令元素邊線(xiàn)在邊線(xiàn)內(nèi)或邊線(xiàn)外。

圖示:可以明顯感受到右邊對(duì)齊效果更好。

信噪比(常用于信息設(shè)計(jì))

1.同一顯示中,相關(guān)信息與無(wú)關(guān)信息的比例就是信噪比。在信息的創(chuàng)造、傳達(dá)、接收過(guò)程中,信息的形式會(huì)遞減,無(wú)關(guān)信息會(huì)增加。如何使得信噪比高,從而達(dá)到優(yōu)秀的設(shè)計(jì)目標(biāo)?可從兩方面看:信號(hào)最大化或噪音最小化。

2.信號(hào)最大化:清楚的傳達(dá)信息,高效率的呈現(xiàn)信息可以使得信號(hào)最大化。簡(jiǎn)單的設(shè)計(jì)可以帶來(lái)極小的效能負(fù)荷,讓用戶(hù)專(zhuān)注于資料的意義。比如,沒(méi)有用正確的圖表呈現(xiàn)特定資料數(shù)據(jù),基本會(huì)扭曲資料原意,所以正確的設(shè)計(jì)決策非常重要,必要時(shí)應(yīng)進(jìn)行測(cè)試。 還有一種方法,及時(shí)強(qiáng)調(diào)信息的關(guān)鍵方面,也可以減少信號(hào)遞減的現(xiàn)象。比如:強(qiáng)調(diào)或備援識(shí)別,凸顯產(chǎn)品的重要性。

3.噪音最小化:去除或減少不必要的元素,每一個(gè)不必要的數(shù)據(jù)項(xiàng)目、圖標(biāo)、線(xiàn)條、圖案,都會(huì)讓用戶(hù)從重要元素上分心。每個(gè)設(shè)計(jì)元素的使用應(yīng)該適當(dāng),一旦過(guò)多就是噪音。

4.應(yīng)用:圖表、表格設(shè)計(jì)的演變。

圖示:左側(cè)的圖表無(wú)關(guān)信息元素比較多,圖示的圖案多樣,表格的邊框又粗又重,這會(huì)使得“噪音”增加。右側(cè)是優(yōu)化后的圖表,減去了無(wú)關(guān)信息,用清楚明了的圖示表示資料內(nèi)容。

序列效應(yīng)

1.在列舉信息時(shí),排在最前和最后的元素,比排在中間的更容易讓人記住。

2.對(duì)排在開(kāi)頭的信息產(chǎn)生加強(qiáng)的回想效果,稱(chēng)為:初始效應(yīng),人們有時(shí)候會(huì)把最前面的信息儲(chǔ)存在長(zhǎng)期記憶中。排在結(jié)尾的信息產(chǎn)生加強(qiáng)的回想效果,稱(chēng)為:時(shí)近效應(yīng)。時(shí)近效應(yīng)適用于聽(tīng)覺(jué)刺激。初始效應(yīng)適用于視覺(jué)刺激。

3.在列舉信息元素時(shí),如果列舉信息屬于視覺(jué)性,那么把重要的信息放在最前面;如果是聽(tīng)覺(jué)性,就放在最后面。如果是用戶(hù)必須做決定,并且是最后一項(xiàng)出現(xiàn)后馬上做決定,那么就將想要用戶(hù)做決定的信息放置最后,以便增加獲選概率,否則放在最前面。

4. 應(yīng)用例子:比如在很多app產(chǎn)品設(shè)計(jì)時(shí),個(gè)人賬戶(hù)與設(shè)置基本放在頁(yè)面的最前面和最后面,這體現(xiàn)著產(chǎn)品信息的序列關(guān)系,重要次序,所以在進(jìn)行設(shè)計(jì)時(shí),可以在信息排序上遵循序列效應(yīng)。 當(dāng)然還有一些產(chǎn)品想對(duì)用戶(hù)進(jìn)行引導(dǎo)操作,也可以利用這個(gè)法則,將信息放置最前或最后。

圖示:

古騰堡圖表法

古騰堡圖表法又稱(chēng) Diagonal Balance(對(duì)角線(xiàn)平衡的和諧狀態(tài)),設(shè)計(jì)理念緣自 Johannes Gutenburg(歐洲活字印刷術(shù)的發(fā)明者)應(yīng)用于印刷的古騰堡圖表。它指出:

人們?cè)跒g覽頁(yè)面或布局時(shí)視線(xiàn)趨于從左上角移動(dòng)到右下角,具體如圖

古騰堡圖表法說(shuō)明我們觀(guān)看頁(yè)面的視線(xiàn)并不是鏡面對(duì)稱(chēng)的,我們需要在設(shè)計(jì)中避免出現(xiàn)此類(lèi)錯(cuò)誤但絕不是墨守成規(guī),將頁(yè)面的 Logo放置在左上角而主體向右下角延伸,左下和右上作為視覺(jué)的盲點(diǎn)可以添加輔助元素

其它一些簡(jiǎn)易法則:

2秒鐘法則——用戶(hù)在使用某類(lèi)系統(tǒng)時(shí)的等待反映不應(yīng)該超過(guò)2秒。

3次點(diǎn)擊法則——用戶(hù)在3次點(diǎn)擊之內(nèi)如果還沒(méi)有找到他們想要的信息或了解產(chǎn)品/網(wǎng)站的特色,他們就會(huì)離開(kāi)。

2/8法則——80%的結(jié)果由20%的原因產(chǎn)生 。

界面8黃金法則:

1)努力做到連貫;

例如網(wǎng)站首頁(yè)需要和每一個(gè)下級(jí)頁(yè)面保持一致的風(fēng)格,導(dǎo)航都要放在屏幕的左上角,具有高度一致性的界面能給人清晰整潔的感覺(jué)。

2)允許頻繁使用系統(tǒng)的用戶(hù)使用快捷方式;

快捷鍵表示產(chǎn)品使用的靈活性和有效性,想想每次我們使用搜索引擎的時(shí)候是鼠標(biāo)點(diǎn)擊的搜索還是按的回車(chē)?

3)提供信息反饋;

出現(xiàn)錯(cuò)誤時(shí)要明確說(shuō)出錯(cuò)誤的含義,而且需要考慮用戶(hù)能否理解,比如我們基本上都遇到過(guò)HTTP404錯(cuò)誤,但絕大多數(shù)人能看懂么?

4)為關(guān)閉這一動(dòng)作設(shè)計(jì)對(duì)話(huà)框;

要在用戶(hù)完成某項(xiàng)任務(wù)或操作后進(jìn)行提示。如果他們?cè)谧隽撕芏嗖僮骱髤s得不到反饋,他們就無(wú)法知道自己是否達(dá)成目標(biāo)。

5)提供簡(jiǎn)單的設(shè)計(jì)處理;

例如把某些當(dāng)前不能點(diǎn)擊的按鈕設(shè)置為灰色,在系統(tǒng)執(zhí)行時(shí)讓用戶(hù)在確認(rèn)一下

6)應(yīng)該方便用戶(hù)取消某個(gè)操作;

大多數(shù)的應(yīng)用軟件都有撤銷(xiāo)和恢復(fù)的功能,如果用戶(hù)總是懼怕一失足成千古恨,那樣的用戶(hù)體驗(yàn)可想而知

7)用戶(hù)應(yīng)掌握控制權(quán);

一般而言用戶(hù)希望自己去控制系統(tǒng)交互,在執(zhí)行任務(wù)中,用戶(hù)應(yīng)該可以隨時(shí)中止或退出,而不是無(wú)奈的看著系統(tǒng)繼續(xù)

8)降低短期記憶載荷;

我們應(yīng)該盡可能幫助用戶(hù)避免要求他們記住各種信息,例如各個(gè)菜單項(xiàng)之間的邏輯關(guān)聯(lián),更好的分類(lèi)就會(huì)幫助用戶(hù)找出哪個(gè)功能按鈕在什么地方。

Jakob Nielsen的10條可用性原則:

  1. 系統(tǒng)狀態(tài)的可見(jiàn)性——讓用戶(hù)知道系統(tǒng)在做什么;
  2. 系統(tǒng)和現(xiàn)實(shí)世界的匹配——系統(tǒng)必須使用用戶(hù)的語(yǔ)言;
  3. 用戶(hù)控制和自由——“緊急出口”來(lái)離開(kāi)非預(yù)期的狀態(tài),支持撤銷(xiāo)和重做;
  4. 一致性和標(biāo)準(zhǔn)——遵循平臺(tái)規(guī)范;
  5. 錯(cuò)誤預(yù)防——要么避免容易發(fā)生錯(cuò)誤的情況,要么檢查并在實(shí)際動(dòng)作前確認(rèn)選項(xiàng)提示用戶(hù);
  6. 識(shí)別而不是回憶——將對(duì)象、動(dòng)作和選項(xiàng)可視化以減少用戶(hù)的記憶壓力;
  7. 使用的靈活性和效率——用戶(hù)可以定制經(jīng)常使用的動(dòng)作;
  8. 美學(xué)和最小設(shè)計(jì)——對(duì)話(huà)框不能包含無(wú)關(guān)或者幾乎不需要的信息;
  9. 幫助用戶(hù)認(rèn)識(shí)、診斷錯(cuò)誤并恢復(fù)——錯(cuò)誤消息必須通過(guò)普通語(yǔ)言表達(dá)(不包含代碼)、準(zhǔn)確指出問(wèn)題并積極提示解決方法;
  10. 幫助和文檔——容易搜索、關(guān)注用戶(hù)任務(wù)并列出需要執(zhí)行的具體步驟,而不是大而全的說(shuō)明。

KANO模型:

  1. 魅力因素——提供用戶(hù)想不到的需求會(huì)很大的提升用戶(hù)滿(mǎn)意度,不提供則滿(mǎn)意度不變;
  2. 期望因素——提供期望需求則滿(mǎn)意度會(huì)上升,不提供則會(huì)下降;
  3. 必備因素——優(yōu)化此需求用戶(hù)滿(mǎn)意度不變,不優(yōu)化則滿(mǎn)意度大幅下降;
  4. 無(wú)差異因素——用戶(hù)根本不在意的功能需求;
  5. 反向因素——無(wú)此需求滿(mǎn)意度不變,有次需求則滿(mǎn)意度下降。

包豪斯運(yùn)動(dòng)——形式追隨功能,去除干擾和裝飾。

Skeumorphic設(shè)計(jì)理念——花費(fèi)很大的力氣來(lái)指向或模仿真實(shí)世界的功能。

嬰兒鴨綜合癥——用戶(hù)習(xí)慣了以前的設(shè)計(jì),對(duì)新的產(chǎn)品架構(gòu)感到不舒服,他們必須找到自己的方式來(lái)使用產(chǎn)品。

自我參照效應(yīng)——與我們個(gè)人觀(guān)念相聯(lián)系的事物要比那些和我們沒(méi)有直接聯(lián)系的事物記得更清楚。

0123簡(jiǎn)單法則——無(wú)需說(shuō)明書(shū),一看就會(huì),兩秒等待時(shí)間,三步以?xún)?nèi)的操作。

MVP法則(最簡(jiǎn)化可實(shí)行產(chǎn)品法則)——一開(kāi)始就拿產(chǎn)品來(lái)接觸用戶(hù),從很早就根據(jù)用戶(hù)的回饋來(lái)改進(jìn)你的產(chǎn)品。

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

人機(jī)交互五大原則

  1. 可學(xué)習(xí)性
  2. 效率
  3. 可記憶性
  4. 不易犯錯(cuò)
  5. 滿(mǎn)意度

認(rèn)知心理學(xué)是一個(gè)呈現(xiàn)心理過(guò)程的狀態(tài)

心流理論:人們?nèi)硇耐度肽臣轮械囊环N心理狀態(tài)、沉浸在忘我的境界中

  1. 引導(dǎo)用戶(hù)達(dá)到目標(biāo)(提示下一步,完成目標(biāo))
  2. 時(shí)刻明確當(dāng)前狀態(tài)(導(dǎo)航、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)、狀態(tài)界面、認(rèn)知心理學(xué)隱喻法)
  3. 可行性的設(shè)計(jì)(使用過(guò)程中可自主性操作、有可逆性)
  4. 防呆性設(shè)計(jì)(防止錯(cuò)誤發(fā)生、限制操作、預(yù)見(jiàn)錯(cuò)誤、跳出空白)
  5. 站在消費(fèi)者心理而設(shè)計(jì):炫耀心理;趨近心理;占便宜心態(tài);有后悔心理;價(jià)位心理。

色彩心理

  1. 顏色常恒性
  2. 顏色的錯(cuò)覺(jué)
  3. 色彩的感知性

不超過(guò)三種色相的搭配

明快的顏色和明暗的色彩搭配能使畫(huà)面更有層次感和朝氣

主色決定了品牌方向

運(yùn)用相似性來(lái)進(jìn)行色彩呼應(yīng),畫(huà)面更有節(jié)奏感和舒適性

運(yùn)用顏色漸變穿插,讓界面平衡在一個(gè)頻率上

馬斯洛需求層次理論

 

本文由 @?Placeless 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 最好結(jié)合例子展示

    來(lái)自北京 回復(fù)
  2. 尼爾森的Heuristic Evaluation的十原則和可用性原則有什么區(qū)別

    來(lái)自廣東 回復(fù)
  3. 古藤堡圖表法和尼爾森視覺(jué)模型有矛盾,在尼爾森視覺(jué)模型中,說(shuō)人的視覺(jué)掃描路線(xiàn)應(yīng)該是F形,而古騰堡圖表法卻說(shuō)人們?yōu)g覽頁(yè)面的視線(xiàn)是左上到右下,而且左下為視覺(jué)盲點(diǎn),這一點(diǎn)與尼爾森模型強(qiáng)烈沖突,筆者可有發(fā)現(xiàn)嗎?

    來(lái)自安徽 回復(fù)
    1. 嗯 F是閱讀文字情況下的瀏覽路線(xiàn) 左上到右下是大多數(shù)情況瀏覽頁(yè)面。這兩者還是有些不同的,比如頁(yè)面上文字多或是圖片多的瀏覽情況,也不用太較真,領(lǐng)會(huì)意思就好

      來(lái)自上海 回復(fù)
    2. 面試被問(wèn)到這個(gè)了,哈哈

      來(lái)自北京 回復(fù)
    3. 這個(gè)問(wèn)題還是挺有意思的。我覺(jué)得這兩個(gè)理論產(chǎn)生的時(shí)代背景不一樣,研究的重點(diǎn)不一樣。古騰堡圖表法是誕生于歐洲活字印刷術(shù)時(shí)期,他觀(guān)察的應(yīng)該是人快速瀏覽一個(gè)頁(yè)面時(shí)的視覺(jué)焦點(diǎn)的本能的分布規(guī)律。而到了尼爾森提出他的視覺(jué)模型的時(shí)間,從宏觀(guān)上人類(lèi)已經(jīng)經(jīng)歷了這么多年的習(xí)慣積累,主要是指閱讀習(xí)慣。到微觀(guān)個(gè)體來(lái)看,大部分人從小接觸的大部分讀物的排版習(xí)慣也引導(dǎo)了讀者在快速瀏覽時(shí)(尤其是文字讀物)的習(xí)慣養(yǎng)成,尼爾森的視覺(jué)模型應(yīng)該更符合我們當(dāng)下大部分人的閱讀習(xí)慣,因此更具有交互設(shè)計(jì)的現(xiàn)實(shí)指導(dǎo)意義。主要還是不同時(shí)代背景下用戶(hù)所長(zhǎng)期養(yǎng)成的習(xí)慣吧。我猜想,在書(shū)寫(xiě)習(xí)慣為從右往左,從上到下的中國(guó)古代,如果他們看到一個(gè)頁(yè)面,大概他們的視覺(jué)習(xí)慣,可能為一個(gè)向右旋轉(zhuǎn)90度的F模型吧

      來(lái)自墨西哥 回復(fù)
  4. 好東西,收藏為敬

    來(lái)自廣東 回復(fù)
  5. 好多重復(fù)一樣的

    來(lái)自廣東 回復(fù)
  6. 贊~作者總結(jié)了好多有用的交互設(shè)計(jì)原則,能推薦幾本詳細(xì)說(shuō)明這些法則的書(shū)籍嘛?想認(rèn)真學(xué)習(xí)一下

    來(lái)自北京 回復(fù)
    1. 設(shè)計(jì)心理學(xué),設(shè)計(jì)中的設(shè)計(jì),交互設(shè)計(jì)精髓,詳細(xì)說(shuō)明這些法則的書(shū)我還沒(méi)看過(guò)

      來(lái)自上海 回復(fù)
    2. 恩恩,非常感謝~~

      來(lái)自北京 回復(fù)