尼爾森可用性十大原則
10 Heuristics for User Interface Design: Article by Jakob Nielsen
1-狀態(tài)可見性(Visibility of system status)
狀態(tài)可見就是產(chǎn)品對于用戶的表達,讓用戶了解相關信息,有掌控感。告知用戶當前處于系統(tǒng)的什么位置;告知用戶當前任務的處理進度;告知用戶操作的結果。
告知用戶當前處于系統(tǒng)什么位置,讓用戶知道該去向何處。
告知用戶當前任務的處理進度,減少焦慮,避免用戶任務程序出錯。
明確告知用戶操作的結果,讓用戶明確該如何繼續(xù)。
2-環(huán)境貼切(Match between system and the real world)
產(chǎn)品的表述應該使用用戶熟悉的概念與表達方式,避免艱難晦澀、讓人無法理解。使用通用意義的圖標與交互方式,如下拉刷新;不同的場景使用不同的表述,兒童類的多用動畫、色彩,專業(yè)工具多用術語;使用隱喻的方式,利用用戶在現(xiàn)實生活中的經(jīng)驗,減少學習成本。
使用通用意義的圖標與交互方式,如下拉刷新;
不同的場景使用不同的表述,兒童類的多用動畫、色彩,專業(yè)工具多用術語;
使用隱喻的方式,利用用戶在現(xiàn)實生活中的經(jīng)驗,減少學習成本。
3-用戶可控(User control and freedom)
用戶可以隨時撤銷操作、退出當前模式,容許用戶自由探索,對于不可逆轉操作,進行二次確認,防止用戶出錯。讓用戶感覺到是安全、自由的。
4-一致性(Consistency and standards)
同一產(chǎn)品內,頁面布局、結構,語言與文字表述,圖標、色彩、文字與視覺風格,用戶操作與系統(tǒng)反饋的交互方式等應該保持一致,減少用戶的認知負荷與學習成本,同時開發(fā)與功能新增更加更加方便、有跡可循。
頁面布局、結構,語言與文字表述的一致性
圖標、色彩、文字與視覺風格的一致性
用戶操作與系統(tǒng)反饋的交互方式一致性
5-防錯(Error prevention)
在用戶出錯之前就防止錯誤的發(fā)生,如在未輸入用戶名和密碼之前,登錄按鈕不可用;危險操作使用紅色并進行二次確認。
6-易取(Recognition rather than recall)
提供充分的上下文信息,減少用戶記憶,如面包屑導航;盡量讓用戶選擇而非輸入,如歷史搜索。從當前的頁面即可獲取關鍵信息,而不需要回憶或者聯(lián)想,如頁面標題作為提示信息。
7-靈活高效( Flexibility and efficiency of use)
提供快捷鍵或者用戶自定義設置,提高中間用戶、專家用戶的效率,為新手用戶提供固定、結構化、可用的入口。對于高頻功能,提供快捷入口或者直接重復方式。提供默認值,減少用戶額外的操作。
8-優(yōu)美且簡約(Aesthetic and minimalist design)
界面只展示相關的信息,任何不相干的信息會增加界面的噪音,讓原本重要的信息難以被用戶察覺。避免界面元素過于雜亂;劃分層次,突出重要信息。
9-容錯(Help users recognize, diagnose, and recover from errors)
讓用戶意識到錯誤,知道錯誤發(fā)生在哪里,知道錯誤的原因是什么,知道該如何解決。為用戶提供幫助,讓用戶從錯誤中恢復,減低損失。
10-人性化幫助(Help and documentation)
盡管系統(tǒng)最好不使用幫助文檔,但是我們還是應該提供一份幫助文檔。幫助信息應該易于查找,聚焦于用戶的任務,列出相應的步驟,但文字不要太多。
易發(fā)現(xiàn)性、易理解性、簡明扼要。
迪特拉姆斯設計十誡
01-好設計是創(chuàng)新的
創(chuàng)新也就是陌生化,將稀松平常、人們已經(jīng)熟悉的事物、流程等用一種獨特、與眾不同的形式呈現(xiàn)出來,讓人眼前一亮,從而吸引人的注意力。
對于創(chuàng)新以及創(chuàng)新的點,應該有一個邊界。那就是對于約定俗成、大家具有共識的事物,則應該遵循原本的標準與規(guī)則。如設計移動app時,遵循iOS和android的設計規(guī)范(如iOS是滑動刪除,安卓是長按刪除)、用齒輪表示設置、移動端的確認按鈕在取消按鈕的右側而PC端相反等,可以減少用戶的學習成本與認知負荷,也避免用戶出錯。
02-好的設計讓產(chǎn)品好用
設計不是藝術創(chuàng)造,不是個人的自由表達,而是在技術等等限制下為用戶提供服務,最終通過產(chǎn)品的有用、易用、好用來體現(xiàn)其價值。
03-好的設計是符合美學的設計
美的事物影響人們的心理感受,也是整體體驗的一部分。當然,設計的美不是為了美而美,而是在滿足功能需求的前提下進行美學的體驗提升,如果不可用,單純的美不能視為產(chǎn)品,而是藝術品。
而且設計的美是大多數(shù)人所能接受的美,具有廣泛共識的美。
04-好的設計使產(chǎn)品易懂
設計是一種表達方式,通過形式語言讓產(chǎn)品具有自明性,不用額外的言語解釋就能讓人明白,就像圖片或符號一樣,往往可以跨越語言的障礙。
對于專業(yè)的產(chǎn)品而言,整體的業(yè)務邏輯、產(chǎn)品架構可能并不易懂,但是對于每一個細小的功能、圖標、哪些元素可交互等應該是讓人能夠一下子就理解的。設計師應當學會管理復雜。
05-好的設計是低調的
設計的表達不應該蓋過產(chǎn)品固有的功能。同時,到處都是亮點的設計會讓人找不到重點,顯得呱噪而混亂,也就失去了設計點。
06-好的設計是誠實的
設計應該如實的反應產(chǎn)品的功能。應當遵循一種樸素的價值觀:設計是對產(chǎn)品功能的外顯與表達,而非產(chǎn)品功能的包裝。
07-好的設計是持久的
不顧產(chǎn)品的特性而追趕當下的潮流,當潮流過去之后,便顯得格格不入了。而貼合產(chǎn)品功能、用戶群體、文化背景等的設計,歷久而彌新。
08-好的設計是對每個細節(jié)都追求盡善盡美
細節(jié)精確體現(xiàn)了產(chǎn)品的一種態(tài)度,讓人更具有信賴感,對于構建良好的產(chǎn)品整體形象起到支撐作用。
09-好的設計是環(huán)境友好型的
在設計之初就考慮產(chǎn)品整體使用周期中的歷程,減少對于環(huán)境的破壞,更適用于硬件產(chǎn)品。對于軟件產(chǎn)品而言,減少不必要的產(chǎn)品和頁面,也是對資源的一種節(jié)約。
10-好的設計盡可能的少設計
最高級的藝術是渾然天成,天然去雕飾的,人工的痕跡越明顯,越顯得拙劣。所以,還原事物的本來面貌,不為了炫技增加多余的部分,減少信息噪音,讓產(chǎn)品更加純粹、簡約。
Laws of UX
01-美即好用效應(Aesthetic Usability Effect)
意義
用戶通常認為美觀的設計更好用。
美觀的設計能確保用戶容忍細小的可用性問題。
美觀的設計在人們的腦海中創(chuàng)造了一種積極的響應,使他們相信這個設計實際上更好一些。
美觀的設計可以掩蓋一些可用性問題,并且防止在可用性測試中發(fā)現(xiàn)這些問題。
舉例
toC類的產(chǎn)品,很多時候效率并不是最優(yōu)先考慮的,營造氛圍與品牌的氣質有時候會影響瀏覽/操作效率,但是會讓用戶更有好感。所以,當好看與好用發(fā)生沖突時,如何平衡是關鍵。
如西窗燭APP的首頁,用一整張卡片來顯示兩句詩,顯然是低效的,但是能夠營造安靜恬淡的意境,讓人每天打開都有新鮮感,與APP整體的風格氣質比較符合。
02-多爾蒂門檻/多爾蒂閾值(Doherty Threshold)
當計算機和用戶以一定的速度(<400ms)進行交互時,可以確保兩者都不要等待對方,效率會有極大的提升。
系統(tǒng)應當在400ms內提供反饋,使用戶保持專注,提高生產(chǎn)率。等待時間太長,會打斷用戶的短時記憶,讓用戶的操作流程不流暢,從而影響效率。
使用可以感知的表現(xiàn)來增加響應時間,減少等待感。狀態(tài)之間、頁面之間過渡太快,會讓用戶應接不暇,同時會比較生澀。通過動畫的過渡可以暗示上下文之間的聯(lián)系,讓整體在業(yè)務邏輯上顯得順滑流暢,用戶更容易沉浸其中。
舉例
在網(wǎng)絡、性能等的限制下,不可避免的會出現(xiàn)加載時間過長的情況,常見的加載動畫就是為了讓加載過程顯得一直在持續(xù),減少用戶的焦慮感。
03-費茨定律(Fitts’s Law)
任意一點移動到目標位置中心點的時間與距離成正比,與目標大小成反比。
可交互的目標應當足夠大,使用戶既能識別目標,又能準確選擇他們。
可交互目標之間應該有充足的空間。
可交互目標應該放置在界面中可以讓他們容易被點擊的位置。
具有關聯(lián)的操作應該盡可能接近,可以減少操作的強度、提高效率。
當需要用戶謹慎操作時,可以增加操作的復雜度,讓用戶有更多的時間決策與思考。
舉例
登錄、購買、推廣等頁面中的主要操作,一般會用比較大的按鈕,放置在比較容易觸及的地方,方便用戶快速完成任務。
04-席克定律(Hick’s Law)
隨著選擇數(shù)量和復雜度的增加,用戶做決策的時間也會增加。
將復雜的任務拆解成較小的步驟,可以為用戶簡化選擇。
避免用高亮的推薦選項將用戶淹沒。
使用漸進入門的方式來減少新用戶的認知負擔。
在呈現(xiàn)給用戶之前,產(chǎn)品應當根據(jù)用戶、場景、目的等做一次選擇,讓用戶更加聚焦,避免將所有問題一股腦的拋給用戶而讓其不知所措。
在不可避免的多選項時,應考慮分組、權重(區(qū)分常用/非常用)、排序等方式,讓信息分層、更有邏輯,減少認知負荷。
在長表單的選擇中,應當拆解步驟,讓用戶一次完成的任務單元比較簡單、集中,從而簡化用戶一次所需要消化的信息。
對于不可點擊的項,應當考慮置灰/隱藏,一方面是防錯,一方面是幫助用戶做了選擇。
同時,不能讓用戶失去選擇權,這樣會使他們覺得沒有掌控感。
舉例
蘋果應用商店的推薦,拋棄了電商網(wǎng)站常用的金剛區(qū)、小圖標的形式,而是采用色彩豐富的大卡片。這樣一屏展示的內容更少,但是一方面顯得格調高雅,減少了鬧哄哄的市場感,一方面也簡化了用戶的選擇。因為當選項過多的時候,也就意味著系統(tǒng)的選擇失效了,所謂“推薦”也失去了權威感。
05-雅各布定律(Jakob’s Law)
用戶將大部分時間花在其它的應用/站點上,而非你的。意味著他們希望你的應用和其它當他們已知的應用/站點的使用方式保持一致。
用戶會將他們圍繞一種熟悉的產(chǎn)品建立的期望,轉移到看起來相似的另一種產(chǎn)品上。
通過利用已經(jīng)存在的心智模型,我們可以創(chuàng)造更加出色的用戶體驗,讓用戶聚焦于任務而非學習新的模式。
通過授權用戶在有限的時間內使用熟悉的版本,將不一致性降到最低。
與通用的、相似的、用戶熟悉的產(chǎn)品在基本的元素(使用方式、布局、圖標、可交互元素、超鏈接等)上保持一致性,避免重復發(fā)明輪子。可以降低人們的學習成本,讓人們快速上手、快速熟悉。
舉例
網(wǎng)購類APP的功能區(qū),基本全是首頁推薦、分類查找、瀏覽發(fā)現(xiàn)、購物車、我的這5個模塊。頁面的布局也很大程度上相似,讓用戶在同類產(chǎn)品上建立的經(jīng)驗可以通用。
06-同域原則(Law of Common Region)
在同一明確定義的邊界中的元素,會傾向于被看成是一組的。
在元素或者組的周圍增加邊界是一種創(chuàng)造共同區(qū)域電腦簡單方式。
可以通過元素或元素組后增加背景來創(chuàng)造共同區(qū)域。
通過內容容器來強調元素的相關性,讓頁面更加規(guī)整,減少第一眼的視覺觸點,不會顯得零散。同時通過背景的形式、顏色等,區(qū)分出每個組之間的層級關系。
舉例
簡書“我的”模塊,用卡片的形式將內容組織到一起,區(qū)域內部會被認為是一個整體。從更高層級上看,形成幾塊獨立的區(qū)域,幫助用戶建立關于內容結構的心理模型,減少認知負荷。
07-簡潔定律(Law of Pr?gnanz)
人們會以最簡單的圖形感知并理解模糊或復雜的圖像,因為這種解釋需要我們付出最少的認知努力。
人類的眼睛傾向于在復雜的形狀中尋找簡單和秩序,因為會選擇可以避免我們被信息所淹沒。
研究證實,與復雜的特征相比,人們能夠更好地處理并記住簡單特征。
對人類而言,在幾何形狀中,認知負荷大致為圓形≈矩形≤凸多邊形<凹多邊形
舉例
簡潔法則幫助我們建立秩序,快速認知。在內容較多的信息流(照片、視頻、文字等)頁面中,多樣化的內容被劃分為整齊劃一的形式,就是為了讓整體更有秩序感,減少無關的形式信息對于主要內容呈現(xiàn)的干擾。
08-接近/臨近/親密法則(Law of Proximity)
彼此接近或靠近的對象,傾向于被看成是一組的。
接近性幫助相鄰的對象建立關系。
接近性幫助用戶更快更高效的理解和組織信息。
在設計中,將相關聯(lián)的信息放到一起,用戶能夠快速理解他們之間的關系。不同組的信息通過間距區(qū)分,可以劃分出不同的信息組/模塊。
舉例
間距是區(qū)分內容的一種形式。文章列表中各條目之間的間距、文章中的段與段之間的間距>行距,讓人更容易區(qū)分不同的部分。
09-相似法則(Law of Similarity)
人們的眼睛往往將設計中相似的元素視為完整的圖片、形狀、組合,即使這些元素是分開的。
確保視覺和導航系統(tǒng)與正常的文本元素在視覺上有區(qū)分,并且使用一致的風格樣式。
人眼擅長于填補“空白”或連接“點”。
通過字號、字重、符號、背景等來區(qū)分標題與正文文本,讓標題成為幾個突出的里程碑,可以有效的組織和構建結構。
這也是產(chǎn)品的內部各個頁面、各種元素、控件等保持一致的原因,可以建立產(chǎn)品整體感,讓用戶更具沉浸感,也會更加關注到重要的、變化的內容。
相似也不等于過度重復。機械式的重復讓整體顯得呆板無趣,增加變化可以增添節(jié)奏感、趣味性。就像在一條筆直的高速上,總會增加幾個彎道,避免司機昏昏欲睡。
舉例
文章列表的各個模塊,都是圖片+加粗標題+正文簡介的模式,形成整齊劃一的模式。同時,圖片的差異、標題的長短也形成差異、節(jié)奏、韻律、起伏,避免流水線式的呆板枯燥。和寫文章、作曲等類似,前后呼應但是情節(jié)曲折、旋律在重復中產(chǎn)生變化、升華等。
10-連通性原則(Law of Uniform Connectedness)
視覺上連接起來的元素比沒有連接的元素被認為更相關。
相似的特征具有分組功能,所以可以通過顏色、線條、線框或其它形狀在視覺上進行連接。
頁面設計中,可以在位置較遠的元素之間增加連接線、連接符等,強化二者之間的關聯(lián)關系,同時引導用戶的視線流動。
視線引導不一定要通過顯性的線條,對齊的基線是一種暗示的連接線。
舉例
文章列表中各個相同部分的對齊,形成瀏覽線,引導用戶的視線。
海報中加上線條的連接,讓距離較遠的元素形成關聯(lián)關系。
11-米勒定律(Miller’s Law)
在短時記憶中,一般人只能記住7(加減2)個條目。
分塊是一種以可管理的方式呈現(xiàn)一組內容的有效方式。一次將5~9個條目分成一組。如iOS的文件夾,一次只展示9 個應用。
信息條目較多時,考慮分組的方式,將信息分層,可以解釋信息結構,同時減少一次需要面對的條目數(shù)。每個條目的描述也應當簡潔、明了,讓用戶的認知成本更低。
舉例
iOS推薦的tab bar中選項的數(shù)量為3-5個,iPad os可以多一點。Tab Bars - Bars - iOS - Human Interface Guidelines - Apple Developer
12-奧卡姆剃刀原則(Occam’s Razor)
需要假設最少的解釋,就是最好的解釋。(Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.)
切勿浪費較多的東西去做用較少的東西就可以做好的事情。如無必要,勿增實體。
分析每個元素,并在不損害功能的前提下,盡可能的刪除元素。元素包括界面的可見元素(文字、按鈕、裝飾元素、背景等)、操作的步驟、流程節(jié)點等。
舉例
減少不必要的視覺元素,就是減少不必要的信息干擾,主要內容會更加突出。在從擬物化到扁平化再到新擬物、輕擬物、玻璃擬物風格,去掉了濃重的陰影、質感、肌理,加入漸變、高光等來區(qū)分層級、豐富細節(jié),也是奧卡姆剃刀的視覺層面的使用,扁平化讓人覺得無聊,但是輕擬物也不會像擬物化那樣“重”。在優(yōu)化的過程中,剔除的度很重要。
「新擬物化」過時了!此刻你最應該擁抱的是「玻璃擬物化」! - 優(yōu)設網(wǎng) - UISDC
餓了么、美團都在用的輕擬物風格,到底是什么? - 優(yōu)設網(wǎng) - UISDC
13-帕累托原則(Pareto Principle)
帕累托原則指出,在許多事件中。大約80%的影響來自20%的原因。也叫“二八定律”
將主要精力聚焦于為大多數(shù)用戶帶來最大收益的部分。
將時間、精力投入到用戶經(jīng)常使用的主要功能,改善核心的用戶體驗,則更有可能贏得用戶并鼓勵用戶忠誠度。
舉例
在產(chǎn)品的改版中,針對用戶經(jīng)常使用的功能進行主要優(yōu)化,使用較少的功能可以減低優(yōu)先級,投入更少的精力,讓改版更有針對性。
14-帕金森定律(Parkinson’s Law)
任何任務都會拖延,直到所有可用的時間都被用完為止。
由于畏難/很難長時間集中精力做一件事,需要將復雜的任務分解,并在各階段提供里程碑式的獎勵,讓小階段的成就感不斷鼓勵用戶,最終完成一個復雜的任務。
舉例
幫助用戶克服拖延的心理,就是要降低任務的復雜度,通過逐步設置獎勵來引導用戶完成復雜的任務。如記單詞的應用將大量的單詞任務劃分成多天的計劃、育嬰類應用將關于寶寶的各類知識劃分到每天,給人心理壓力更小。
15-峰終定律(Peak-End Rule)
人們評判體驗的好壞主要基于在巔峰時期和結束點的體驗,而不是每一刻體驗的相加或者平均水平。
密切注意用戶體驗旅程中最激烈的點和最終的時刻(“終點”)。
識別產(chǎn)品中最有幫助、最有價值、最有趣的時刻,并且將這些時刻設計得更好一些。
要記住,用戶對消極體驗的回憶要比對積極體驗的回憶生動得多。
峰終定律是人們的認知偏見,是大腦處理信息的一種機制。我們的記憶并不是對經(jīng)歷的全面描述。我們在記憶中所掌握的細節(jié)數(shù)量有限。為了彌補這一不足,我們的趨勢是回憶高峰經(jīng)歷或亮點以及結局。在最高峰和結尾時的體驗會更多的影響人們對于整體體驗的計算。
在一個點突破,將體驗的峰值推到最高。在結束時,給用戶以獎勵、肯定,用小的驚喜來撫慰用戶。二八定律,將80%的用戶體驗優(yōu)化精力放到這些點上。
舉例
強化最興奮點的體驗,完善結尾處的體驗。如游戲中,成功/通關等時刻,會采用聲音、畫面等多種形式結合來強化用戶的成功感,讓成功的喜悅更加強化。同時游戲結束的時候,會進行總結,給贏家以獎勵,給失敗者以安慰。
16-波斯托定律(Postel’s Law)
接受觀點時持開放態(tài)度,在輸出觀點時持保守態(tài)度。
善解人意,靈活并能夠容忍用戶可能采取的任何行動,意味著可以接受用戶可變的輸入,翻譯輸入以滿足系統(tǒng)要求,定義輸入邊界并且為用戶提供清晰的反饋。
魯棒性、健壯性、容錯性,能夠接受不同類型的輸入,并將之翻譯成有價值的內容。
用戶的輸入可能會出錯,或者與你的預期不一致,系統(tǒng)能夠包容著些并自動糾正的話,可以給人以貼心、聰明的感覺。
給用戶定義操作的邊界就是在輸入時調用不同的鍵盤、使用選擇控件、輸入字數(shù)限制的動態(tài)提醒等,讓用戶的輸入可控。如果用戶的輸入超出范圍、出錯,要及時提供反饋告知用戶。
舉例
在百度、Google、淘寶、京東等搜索內容的時候,即使用戶輸錯一個字或者輸入拼音等非正確的關鍵字,系統(tǒng)也會根據(jù)貝葉斯概率的方式作出最接近的猜測并給出相應結果,避免用戶需要刪除后再次輸入。
17-系列位置效應(Serial Position Effect)
在一系列條目中,用戶傾向于對第一個(首因效應)和最后一個(近因效應)印象最深刻。
將最不重要的條目放在列表中間可能會有所幫助,因為這些條目傾向于在長期和工作記憶中存儲的頻率往往較低。
在諸如導航之類的元素中,將重要動作放在最左邊和最右邊可以增加記憶。
舉例
彈窗采用將標題放在左上角,按鈕放在右下角的模式,也是符合用戶的瀏覽順序。標題(首因效應)和關鍵的動作(近因效應)成為最重要的部分。
tab欄、按鈕組等多個條目的設計中,往往將最重要部分的放在一組中的最前和最后。
購物APP將立即購買放在最右下角且常駐,并采用增加視覺比重(最醒目)的形式,就是利用近因效應,引起人們的注意。同時底部的按鈕在移動端的操作更友好。
就像在比賽節(jié)目中,最后出場的總能給觀眾留下更深刻、清晰的印象(壓軸),也是記憶的近因效應。
18-泰斯勒定律(Tesler’s Law)
復雜守恒定律(The Law of Conservation of Complexity),表明任何系統(tǒng)都有一定的無法消除的復雜性。
產(chǎn)品的復雜性應該交由代碼處理,而非用戶處理。復雜的邏輯計算、重復的操作等交由代碼處理,選擇、決策交由用戶,讓用戶感覺到方便的同時不會失去控制感。
舉例
sketch 在元素尺寸變換時,可以在輸入框中直接寫上算術,如50+234,系統(tǒng)會自動計算出結果并完成修改,避免了用戶需要心算后再填入具體數(shù)值。
19-馮·雷斯托夫效應(Von Restorff Effect)
也稱為隔離效應(The Isolation Effect),在多個相似的對象中,與眾不同的那個比其它的更能讓人記住。
讓重要信息或或關鍵動作視覺上與眾不同。
環(huán)境差異:與周圍的元素進行區(qū)分,獨特的部分會被最先注意到。
經(jīng)驗差異:隨著時間的不同而有不同的形式,讓人記住變化的點。就像Google doodles,在節(jié)假日、重要紀念日等進行特殊設計,形成情感化的記憶點。
差異的度:所有元素形式各異只會顯得雜亂,沒有重點。只有在建立秩序、條理之后增加差異化,才會讓人注意到差異點。
舉例
CTA(Call To Action)按鈕,一般使用較為亮眼的顏色,在頁面中做得比較醒目、扎眼,就是為了讓用戶在較短的時間內注意到,并采取動作。如下圖騰訊安全官網(wǎng)中的“立即查看”按鈕。
20-蔡格尼克記憶效應(Zeigarnik Effect)
與已完成的任務相比,人們對于沒有完成的或者被打斷的任務記憶更深刻。
為復雜的任務使用進度條,當任務未完成時進行視覺提示,從而增加完成任務的可能性。
人存在的一種天生的、做事有始有終的驅動力使人們對于還沒有完成的任務念念不忘。一項任務啟動時,人會處于一種緊張狀態(tài)的場,這會增強所有與該任務相關信息的認知,任務完成后緊張的狀態(tài)會得到緩解。
舉例
網(wǎng)易公開課的一萬分鐘計劃,由于需要長時間的堅持。顯示進度條、剩余時間等告知用戶當前的進度,提示、激勵用戶逐漸完成。
簡單法則
01-刪除(REDUCE)
實現(xiàn)簡約最簡單的方法就是深思熟慮之后的刪除。
簡化系統(tǒng)最簡單的方式就是移除功能。
一方面,你希望產(chǎn)品或服務能夠使用更容易;另一方面,你想讓它能夠做人們看想讓它做的所有事情。
達到完美的簡約狀態(tài)的過程可能很復雜。當功能重復時,那就刪除它。但是要特別注意你所刪除的功能(不能讓系統(tǒng)不可用或常用的功能很難使用)。
02-組織(ORGANIZE)
組織使復雜的系統(tǒng)看起來更簡約。
需要問兩個問題:隱藏什么?放在哪里?
長期來看,組織對于成功的馴服復雜是必要的。換句話說,需要問一問“哪些和哪些是一起的”這種挑戰(zhàn)性的問題。
當然,只有當組的數(shù)量明顯少于需要組織的條目數(shù)時,這一條才成立。
03-時間(TIME)
節(jié)省時間就像是在簡化。
人們花了很多時間在排隊、等待、堵車這種讓人失去耐心的事情上,沒有人喜歡忍受等待帶來的的挫折感,當任何產(chǎn)品或服務提供的交互反應迅速時,我們會將這種效率歸因于體驗的簡約性。
當面臨等待時,生活似乎就有很多不必要的復雜。
04-學習(LEARN)
知識讓所有事情都變得更容易。
就像擰螺絲這種看似簡單的工作,也需要“左松右緊/順時針擰緊”這種知識的輔助,才不會擰錯方向。對于任何不管多困難的系統(tǒng),知識都會讓這一切變得變得簡單。
但學習知識會讓人覺得是在浪費時間,尤其是學習指導手冊。但是大型的軟件,直接去做、試錯的成本,通常比看手冊的成本還高。因為涉及的流程節(jié)點、業(yè)務環(huán)節(jié)會很多,稍有不注意,就會導致失敗。
良好的指導材料、說明文檔、操作指南等讓用戶更有目標的學習、更快的學習、更有興趣學習。
05-差異(DIFFERENCES)
簡約和復雜彼此需要。
沒有人想僅吃甜點。沒有復雜的對比,當我們看見簡約時也會無法分辨。有對比的情況下,我們可以更好地發(fā)現(xiàn)事物的優(yōu)點。就像顏色之間需要冷暖調和,才會更加生動。
06-情境(CONTEXT)
簡約性的周圍環(huán)境絕不是次要的。
當你專注于一件事情的時候,周圍的東西就會被你忽視。可以像激光束一樣瞄準一個目標,或者用同樣的光線,像燈泡一樣照亮周圍的每一個角落。
追求卓越通常意味著為了關注最重要的前景而忽略了背景中的一切。
關注除了主要目標之外的周圍環(huán)境,從而強化整體的簡約感。
07-情感(EMOTION)
情感越多越好。
簡約性可能被認為是丑的。簡約的設計讓產(chǎn)品的生產(chǎn)成本更低,用戶認為其看上去給人感覺是低廉的。人類具有的這種自我表達意識,往往會影響我們的決策。
當情感被認為最重要的時候,就不要害怕增加更多的裝飾或意義層面的東西。就像運營設計大多看上去很復雜、熱鬧,就是為了凸顯歡快的情感。而B端的產(chǎn)品,總是很克制,似乎給人感覺冷冰冰的,也是為了強化效率、專業(yè)的形象。
08-信任(TRUST)
我們相信簡單。
想象一下,有一個設備只有一個沒有寫明用途的按鈕,只要按一下,就能完成我們當前想做的任務。計算機變得越來越聰明,這種想法離我們的現(xiàn)實并不遙遠。
09-失敗(FAILURE)
有些事情,永遠沒法變得簡單。
當你嘗試簡化的時候,總是會面臨失敗,但是你可以從錯誤中學習。在簡化中的失敗經(jīng)驗,可能是復雜性的一種漂亮形式。
復雜是由簡單堆積而來的。簡單的代碼也可以產(chǎn)生復雜的藝術。相反的,谷歌復雜的網(wǎng)絡服務和算法形成了簡單的搜索體驗。簡單和復雜的判斷需要可以參考的框架。
10-唯一(THE ONE)
簡約就是減少明顯、刻意的東西,增加有意義的內容。
格式塔心理學
Design Principles: Visual Perception And The Principles Of Gestalt — Smashing Magazine
格式塔心理學的格式塔是德文Gestalt的音譯,一般又稱為完形心理學。
格式塔心理學主要研究整體與構成整體的各個部分之間有何聯(lián)系,強調研究對象的整體性,不是單純的各個元素本身的特性,而是他們所構成的整體的特性。格式塔心理學認為所有元素相加之和一定會小于研究對象的整體性呈現(xiàn)。
通過補全、簡化等機制,通過簡化、組織、歸納的方式來理解外部世界的復雜信息點,將多個點看成一個整體,減少大腦的認知負荷。
視覺傾向于感知連續(xù)的、整體的形式而不是分散的碎片,通過找到元素間非常微小的共性,將多個不同的信息結合成一個整體,減少視覺觸點,減輕認知負荷。
問題的解決不是由于嘗試錯誤,而是由于頓悟。所謂頓悟,就是內在地把握情境的關系性,并依此改變整個情境。
Proximity (接近/臨近)
距離的遠近能夠傳達關系的親疏,放在一起的會被認為是一組的;距離較遠的會認為是不同的組的。兩個元素越是接近,組合在一起的可能性就越大
舉例
內容之間的間隔區(qū)分,通過距離來組織和區(qū)分不同的內容。
Similarity (相似/類似)
形式上(如顏色、形狀等)相似的元素,人們在感知過程中會認為其是一組的。就像球賽中,穿著一樣隊服的,就是同一個球隊的成員。
舉例
同一個產(chǎn)品內,不同的頁面之間,使用統(tǒng)一的標準(顏色、字號、圖標等),讓人覺得整個產(chǎn)品是一體的,在用戶心中構建一致、強烈的品牌視覺形象。蘋果的設計原則中,就有提到一致性的重要性。Themes - iOS - Human Interface Guidelines - Apple Developer
Continuity (連續(xù)/連通性)
連續(xù)性是指,人們會將分離的各個有關聯(lián)的點,在腦海中自動構建一個完整的線,最終成為一個整體的形狀。
舉例
各個星座的形狀,就是由幾個最亮的星星連線之后形成的。
在設計中去除部分細節(jié),可以增加整體的留白、更有呼吸感,也不會影響整體信息含義的傳達。
Closure (閉合/封閉)
與連續(xù)性類似,也是大腦的一種自動補全機制。我們的視覺感知系統(tǒng)會通過已知的模糊信息,通過以往的經(jīng)驗自動補齊殘缺的部分,將局部的信息當做一個整體的形象來感知。但是這種查漏補缺的形式是建立在,我們已感知的對象提供的是有規(guī)律的形態(tài),而非完全分離的碎片和信息。
舉例
大部分APP的推薦設計中,對于更多內容的暗示,一般會露出一部分,提示用戶還有更多的內容。
圖標設計中的缺口,并不影響對于整個圖標含義的識別。
figure-ground (圖形-背景原則)
我們在看到一個事物的時候,大腦會自動幫助我們在視覺區(qū)域區(qū)分出主體和背景兩個部分,在這個事物中占據(jù)了我們主要的注意力的就是主體,然后剩下的部分就是背景。
“圖形”是一個格式塔,一個突出的實體,是我們知覺到的事物。“背景”是尚未分化的、襯托圖形的東西。知覺幫助我們從背景中將圖形分化出來。圖形與背景的對比差異越大,圖形的輪廓越明顯,則圖形越容易被發(fā)覺。
當小物體與大物體疊加的時候,人們傾向于將小物體視為圖形,將大物體視為背景。
舉例
在設計中,讓主要信息更加醒目,人們一眼就能注意到。這樣可以讓人快速找到頁面的重點以及想要傳達的信息。
彈窗的設計中,也是通過降低背景的亮度,來區(qū)分彈窗的內容與背景的部分。
幫助提示中,將其它部分變暗,用亮點提示焦點,也是突出主體,制造前景的方式。
簡化對稱性原則
人們往往傾向于感知勻稱物體圍繞中心對稱后形成的形狀。在紛繁復雜的信息中尋找規(guī)律、簡單、有序的對象。
舉例
圖片流的內容,通過對稱的形式來減輕閱讀的壓力。
common fate(同方向/共同命運)
與相似性原理類似,這里共同的形式就是運動方向。即具有相同運動方向的元素,會被認為是具有關聯(lián)的,一個組內的。
舉例
版式設計中的線條元素,采用同樣的方向,即便長短不一,也會被認為是一組的。
Simplicity (簡單)
格式塔的核心思想,是指為了更方便的理解這個世界,人類會將接受到的大量信息進行過濾和簡化,因為這種解釋需要我們付出最少的認知努力,避免我們被紛繁復雜的外部信息所淹沒。
舉例
在信息復雜的頁面中,一般采用簡單的幾何形式來組織、歸類各種信息。讓整體更加規(guī)整,減少信息的復雜度。
過去經(jīng)驗原則
我們會自動將之前形成的經(jīng)驗套用到現(xiàn)有的模式上。即用戶的心智模型已經(jīng)建立,我們需要讓實現(xiàn)模型與用戶的心智模型更匹配。
舉例
保持與業(yè)界主流產(chǎn)品的交互一致性,在基礎的、用戶已經(jīng)形成習慣的模式上,盡量與慣用的模式保持一致,避免與用戶的理解不一致而讓其產(chǎn)生挫敗感。
知覺恒常性(perceptual constancy)
是指當距離、縮影比、照明改變的時候,雖然網(wǎng)膜影響已經(jīng)在一定程度發(fā)生改變,但人們對物體大小、形狀和顏色的知覺仍相對穩(wěn)定。比如遠處的一頭牛,看起來可能像一只鳥那么大,但是我們仍然會認為它比鳥大多了。這也是我們的過去經(jīng)驗在起作用。
《web界面設計》六大原則
直截了當:
在哪里輸出,就允許在哪里輸入。讓用戶直接對對象進行操作(選擇、修改、輸入、拖拽等),所見即所得。
簡化交互:
將關聯(lián)的內容放到一起,簡化交互路徑。減少操作步驟,縮短交互流程,簡化功能層級。根據(jù)當前的情境顯示合適的界面元素。
足不出戶:
通過覆蓋層、嵌入層、漸進加載、向導模式等在當前頁面完成操作,減少頁面切換,更好保持上下文。與尼爾森的易取原則類似。
提供邀請:
通過形式、顏色、圖標、動畫提示等,增加功能的可發(fā)現(xiàn)性,引導用戶進入下一交互層次。
巧用變換:
狀態(tài)轉換、頁面跳轉過程中采用動畫過渡的形式,暗示關聯(lián)性,增強趣味性、增加與用戶的溝通。
即時反應:
及時響應用戶的操作,提供實時搜索、即時反饋、建議選項等,減少用戶輸入、防止用戶出錯。
《簡約至上:交互設計四策略》
刪除
刪除就是幫助用戶做選擇,而非將所有的問題都拋給用戶。無關元素太多,會讓整體顯得雜亂、隨意;刪除太多,會讓用戶覺得無法控制、沒有決策權。要在用戶的掌控感和貼心方便之間,把握好尺度。
頁面內容太多時,會增加人的認知負擔,分散人的注意力,從而影響核心目標/核心任務的完成。所以,應當關注頁面的核心功能,減少流程中無關緊要的分支,減少多余的視覺干擾元素,減少過多的樣式和層次。讓用戶聚焦于當前的任務。
轉移
轉移就是充分利用不同平臺、不同設備的特性和優(yōu)勢,如手機APP具有便利性,隨時隨地可進行操作;PC端具有顯示區(qū)域大,輸入快捷的特點。
轉移的另一種邏輯就是不做過多限制,以一種開放性的姿態(tài)滿足不同用戶的需求。讓用戶和產(chǎn)品分別做自己擅長的事情。用戶負責靈活性的決策,產(chǎn)品負責邏輯計算與長期存儲。如用戶定制化的功能菜單、千人千面的算法推薦等。
隱藏
使用常規(guī)的、符合用戶預期的隱形命令:隱形命令就是通過快捷鍵或快捷手勢進行的操作,在界面上沒有可視的操作按鈕。如在視頻播放界面右側上下滑動可以增加/減小音量。
另一種思路是,將不常用的功能收納起來,減少對用戶注意力的干擾。
組織
組織就是將同一類的東西放到一起,然后將不同類別做區(qū)分。符合格式塔心理學提到的,人們認知過程中傾向于將數(shù)量較多、復雜的對象簡化、補全、歸納、組織后看成一個或幾個整體的直覺反應。
這樣整體信息架構會比較清晰有條理,尋找目標信息會更加方便快捷。用戶首先看到的也是幾個大的模塊,從心理上來說,壓力不會那么大。組織對應格式塔心理學的完形、接近、相似原則。也用到《寫給大家看的設計書》中的重復、親密、對齊原則。
參考
First Principles of Interaction Design (Revised & Expanded) | askTog
超全面!高手總結的18條交互設計原則(一) | 優(yōu)設網(wǎng) - UISDC
超全面!高手總結的18條交互設計原則(二) | 優(yōu)設網(wǎng) - UISDC
交互設計快速檢查清單 Interaction Design Quick Checklist - 簡書
用超多案例,帶你學會經(jīng)典的尼爾森十大交互設計原則 | 優(yōu)設網(wǎng) - UISDC
10 Heuristics for User Interface Design: Article by Jakob Nielsen
The Laws of Simplicity / John Maeda
用超多案例,幫你掌握交互設計心理學的古騰堡原則 | 優(yōu)設網(wǎng) - UISDC
讓設計更有說服力的20條經(jīng)典原則:雅各布定律 - 優(yōu)設網(wǎng) - UISDC
Design Principles: Visual Perception And The Principles Of Gestalt — Smashing Magazine
Gestalt Psychology and Web Design: The Ultimate Guide | Interaction Design Foundation (IxDF)
近萬字干貨!帶你全面了解格式塔原則 - 優(yōu)設網(wǎng) - UISDC
用超多案例,幫你學會經(jīng)典格式塔理論的7個視覺原則 - 優(yōu)設網(wǎng) - UISDC
商利燕. 基于格式塔心理學探索虛擬現(xiàn)實技術在設計教學中的應用[D].
趙蔓. 基于格式塔理論下綜合購物類APP界面設計研究[D].