尼爾森可用性十大原則
10 Heuristics for User Interface Design: Article by Jakob Nielsen
1-狀態(tài)可見性(Visibility of system status)
狀態(tài)可見就是產(chǎn)品對于用戶的表達废境,讓用戶了解相關(guān)信息缨硝,有掌控感。告知用戶當前處于系統(tǒng)的什么位置慌烧;告知用戶當前任務(wù)的處理進度;告知用戶操作的結(jié)果。
告知用戶當前處于系統(tǒng)什么位置,讓用戶知道該去向何處柿汛。
告知用戶當前任務(wù)的處理進度,減少焦慮埠对,避免用戶任務(wù)程序出錯络断。
明確告知用戶操作的結(jié)果,讓用戶明確該如何繼續(xù)项玛。
2-環(huán)境貼切(Match between system and the real world)
產(chǎn)品的表述應(yīng)該使用用戶熟悉的概念與表達方式貌笨,避免艱難晦澀、讓人無法理解襟沮。使用通用意義的圖標與交互方式锥惋,如下拉刷新;不同的場景使用不同的表述开伏,兒童類的多用動畫膀跌、色彩,專業(yè)工具多用術(shù)語固灵;使用隱喻的方式捅伤,利用用戶在現(xiàn)實生活中的經(jīng)驗,減少學習成本怎虫。
使用通用意義的圖標與交互方式暑认,如下拉刷新困介;
不同的場景使用不同的表述大审,兒童類的多用動畫、色彩座哩,專業(yè)工具多用術(shù)語徒扶;
使用隱喻的方式,利用用戶在現(xiàn)實生活中的經(jīng)驗根穷,減少學習成本姜骡。
3-用戶可控(User control and freedom)
用戶可以隨時撤銷操作、退出當前模式屿良,容許用戶自由探索圈澈,對于不可逆轉(zhuǎn)操作,進行二次確認尘惧,防止用戶出錯康栈。讓用戶感覺到是安全、自由的。
4-一致性(Consistency and standards)
同一產(chǎn)品內(nèi)啥么,頁面布局登舞、結(jié)構(gòu),語言與文字表述悬荣,圖標菠秒、色彩、文字與視覺風格氯迂,用戶操作與系統(tǒng)反饋的交互方式等應(yīng)該保持一致践叠,減少用戶的認知負荷與學習成本,同時開發(fā)與功能新增更加更加方便嚼蚀、有跡可循酵熙。
頁面布局、結(jié)構(gòu)驰坊,語言與文字表述的一致性
圖標匾二、色彩、文字與視覺風格的一致性
用戶操作與系統(tǒng)反饋的交互方式一致性
5-防錯(Error prevention)
在用戶出錯之前就防止錯誤的發(fā)生拳芙,如在未輸入用戶名和密碼之前察藐,登錄按鈕不可用;危險操作使用紅色并進行二次確認舟扎。
6-易确址伞(Recognition rather than recall)
提供充分的上下文信息,減少用戶記憶睹限,如面包屑導航譬猫;盡量讓用戶選擇而非輸入,如歷史搜索羡疗。從當前的頁面即可獲取關(guān)鍵信息染服,而不需要回憶或者聯(lián)想,如頁面標題作為提示信息叨恨。
7-靈活高效( Flexibility and efficiency of use)
提供快捷鍵或者用戶自定義設(shè)置柳刮,提高中間用戶、專家用戶的效率痒钝,為新手用戶提供固定秉颗、結(jié)構(gòu)化、可用的入口送矩。對于高頻功能蚕甥,提供快捷入口或者直接重復(fù)方式。提供默認值栋荸,減少用戶額外的操作菇怀。
8-優(yōu)美且簡約(Aesthetic and minimalist design)
界面只展示相關(guān)的信息夷家,任何不相干的信息會增加界面的噪音,讓原本重要的信息難以被用戶察覺敏释。避免界面元素過于雜亂库快;劃分層次,突出重要信息钥顽。
9-容錯(Help users recognize, diagnose, and recover from errors)
讓用戶意識到錯誤义屏,知道錯誤發(fā)生在哪里,知道錯誤的原因是什么蜂大,知道該如何解決闽铐。為用戶提供幫助,讓用戶從錯誤中恢復(fù)奶浦,減低損失兄墅。
10-人性化幫助(Help and documentation)
盡管系統(tǒng)最好不使用幫助文檔,但是我們還是應(yīng)該提供一份幫助文檔澳叉。幫助信息應(yīng)該易于查找隙咸,聚焦于用戶的任務(wù),列出相應(yīng)的步驟五督,但文字不要太多。
易發(fā)現(xiàn)性瓶殃、易理解性充包、簡明扼要。
迪特拉姆斯設(shè)計十誡
01-好設(shè)計是創(chuàng)新的
創(chuàng)新也就是陌生化遥椿,將稀松平常基矮、人們已經(jīng)熟悉的事物、流程等用一種獨特冠场、與眾不同的形式呈現(xiàn)出來家浇,讓人眼前一亮,從而吸引人的注意力慈鸠。
對于創(chuàng)新以及創(chuàng)新的點蓝谨,應(yīng)該有一個邊界。那就是對于約定俗成青团、大家具有共識的事物,則應(yīng)該遵循原本的標準與規(guī)則咖楣。如設(shè)計移動app時督笆,遵循iOS和android的設(shè)計規(guī)范(如iOS是滑動刪除,安卓是長按刪除)诱贿、用齒輪表示設(shè)置娃肿、移動端的確認按鈕在取消按鈕的右側(cè)而PC端相反等咕缎,可以減少用戶的學習成本與認知負荷,也避免用戶出錯料扰。
02-好的設(shè)計讓產(chǎn)品好用
設(shè)計不是藝術(shù)創(chuàng)造凭豪,不是個人的自由表達,而是在技術(shù)等等限制下為用戶提供服務(wù)晒杈,最終通過產(chǎn)品的有用嫂伞、易用、好用來體現(xiàn)其價值拯钻。
03-好的設(shè)計是符合美學的設(shè)計
美的事物影響人們的心理感受帖努,也是整體體驗的一部分。當然粪般,設(shè)計的美不是為了美而美煤率,而是在滿足功能需求的前提下進行美學的體驗提升采蚀,如果不可用,單純的美不能視為產(chǎn)品,而是藝術(shù)品担锤。
而且設(shè)計的美是大多數(shù)人所能接受的美,具有廣泛共識的美具则。
04-好的設(shè)計使產(chǎn)品易懂
設(shè)計是一種表達方式迟隅,通過形式語言讓產(chǎn)品具有自明性,不用額外的言語解釋就能讓人明白躲惰,就像圖片或符號一樣致份,往往可以跨越語言的障礙。
對于專業(yè)的產(chǎn)品而言础拨,整體的業(yè)務(wù)邏輯氮块、產(chǎn)品架構(gòu)可能并不易懂,但是對于每一個細小的功能诡宗、圖標滔蝉、哪些元素可交互等應(yīng)該是讓人能夠一下子就理解的。設(shè)計師應(yīng)當學會管理復(fù)雜塔沃。
05-好的設(shè)計是低調(diào)的
設(shè)計的表達不應(yīng)該蓋過產(chǎn)品固有的功能蝠引。同時,到處都是亮點的設(shè)計會讓人找不到重點蛀柴,顯得呱噪而混亂螃概,也就失去了設(shè)計點。
06-好的設(shè)計是誠實的
設(shè)計應(yīng)該如實的反應(yīng)產(chǎn)品的功能鸽疾。應(yīng)當遵循一種樸素的價值觀:設(shè)計是對產(chǎn)品功能的外顯與表達吊洼,而非產(chǎn)品功能的包裝。
07-好的設(shè)計是持久的
不顧產(chǎn)品的特性而追趕當下的潮流制肮,當潮流過去之后冒窍,便顯得格格不入了递沪。而貼合產(chǎn)品功能、用戶群體综液、文化背景等的設(shè)計款慨,歷久而彌新。
08-好的設(shè)計是對每個細節(jié)都追求盡善盡美
細節(jié)精確體現(xiàn)了產(chǎn)品的一種態(tài)度谬莹,讓人更具有信賴感檩奠,對于構(gòu)建良好的產(chǎn)品整體形象起到支撐作用。
09-好的設(shè)計是環(huán)境友好型的
在設(shè)計之初就考慮產(chǎn)品整體使用周期中的歷程届良,減少對于環(huán)境的破壞笆凌,更適用于硬件產(chǎn)品。對于軟件產(chǎn)品而言士葫,減少不必要的產(chǎn)品和頁面乞而,也是對資源的一種節(jié)約。
10-好的設(shè)計盡可能的少設(shè)計
最高級的藝術(shù)是渾然天成慢显,天然去雕飾的爪模,人工的痕跡越明顯,越顯得拙劣荚藻。所以屋灌,還原事物的本來面貌,不為了炫技增加多余的部分应狱,減少信息噪音共郭,讓產(chǎn)品更加純粹、簡約疾呻。
Laws of UX
01-美即好用效應(yīng)(Aesthetic Usability Effect)
意義
用戶通常認為美觀的設(shè)計更好用除嘹。
美觀的設(shè)計能確保用戶容忍細小的可用性問題。
美觀的設(shè)計在人們的腦海中創(chuàng)造了一種積極的響應(yīng)岸蜗,使他們相信這個設(shè)計實際上更好一些尉咕。
美觀的設(shè)計可以掩蓋一些可用性問題,并且防止在可用性測試中發(fā)現(xiàn)這些問題璃岳。
舉例
toC類的產(chǎn)品年缎,很多時候效率并不是最優(yōu)先考慮的,營造氛圍與品牌的氣質(zhì)有時候會影響瀏覽/操作效率铃慷,但是會讓用戶更有好感单芜。所以,當好看與好用發(fā)生沖突時枚冗,如何平衡是關(guān)鍵缓溅。
如西窗燭APP的首頁,用一整張卡片來顯示兩句詩赁温,顯然是低效的坛怪,但是能夠營造安靜恬淡的意境,讓人每天打開都有新鮮感股囊,與APP整體的風格氣質(zhì)比較符合袜匿。
02-多爾蒂門檻/多爾蒂閾值(Doherty Threshold)
當計算機和用戶以一定的速度(<400ms)進行交互時,可以確保兩者都不要等待對方稚疹,效率會有極大的提升居灯。
系統(tǒng)應(yīng)當在400ms內(nèi)提供反饋,使用戶保持專注内狗,提高生產(chǎn)率怪嫌。等待時間太長,會打斷用戶的短時記憶柳沙,讓用戶的操作流程不流暢岩灭,從而影響效率。
使用可以感知的表現(xiàn)來增加響應(yīng)時間赂鲤,減少等待感噪径。狀態(tài)之間、頁面之間過渡太快数初,會讓用戶應(yīng)接不暇找爱,同時會比較生澀。通過動畫的過渡可以暗示上下文之間的聯(lián)系泡孩,讓整體在業(yè)務(wù)邏輯上顯得順滑流暢车摄,用戶更容易沉浸其中。
舉例
在網(wǎng)絡(luò)仑鸥、性能等的限制下吮播,不可避免的會出現(xiàn)加載時間過長的情況,常見的加載動畫就是為了讓加載過程顯得一直在持續(xù)锈候,減少用戶的焦慮感薄料。
03-費茨定律(Fitts’s Law)
任意一點移動到目標位置中心點的時間與距離成正比,與目標大小成反比泵琳。
可交互的目標應(yīng)當足夠大摄职,使用戶既能識別目標,又能準確選擇他們获列。
可交互目標之間應(yīng)該有充足的空間谷市。
可交互目標應(yīng)該放置在界面中可以讓他們?nèi)菀妆稽c擊的位置。
具有關(guān)聯(lián)的操作應(yīng)該盡可能接近击孩,可以減少操作的強度迫悠、提高效率。
當需要用戶謹慎操作時巩梢,可以增加操作的復(fù)雜度创泄,讓用戶有更多的時間決策與思考艺玲。
舉例
登錄、購買鞠抑、推廣等頁面中的主要操作饭聚,一般會用比較大的按鈕,放置在比較容易觸及的地方搁拙,方便用戶快速完成任務(wù)秒梳。
04-席克定律(Hick’s Law)
隨著選擇數(shù)量和復(fù)雜度的增加,用戶做決策的時間也會增加箕速。
將復(fù)雜的任務(wù)拆解成較小的步驟酪碘,可以為用戶簡化選擇。
避免用高亮的推薦選項將用戶淹沒盐茎。
使用漸進入門的方式來減少新用戶的認知負擔兴垦。
在呈現(xiàn)給用戶之前,產(chǎn)品應(yīng)當根據(jù)用戶庭呜、場景滑进、目的等做一次選擇,讓用戶更加聚焦募谎,避免將所有問題一股腦的拋給用戶而讓其不知所措扶关。
在不可避免的多選項時,應(yīng)考慮分組数冬、權(quán)重(區(qū)分常用/非常用)节槐、排序等方式,讓信息分層拐纱、更有邏輯铜异,減少認知負荷。
在長表單的選擇中秸架,應(yīng)當拆解步驟揍庄,讓用戶一次完成的任務(wù)單元比較簡單、集中东抹,從而簡化用戶一次所需要消化的信息蚂子。
對于不可點擊的項,應(yīng)當考慮置灰/隱藏缭黔,一方面是防錯食茎,一方面是幫助用戶做了選擇。
同時馏谨,不能讓用戶失去選擇權(quán)别渔,這樣會使他們覺得沒有掌控感。
舉例
蘋果應(yīng)用商店的推薦,拋棄了電商網(wǎng)站常用的金剛區(qū)哎媚、小圖標的形式喇伯,而是采用色彩豐富的大卡片。這樣一屏展示的內(nèi)容更少抄伍,但是一方面顯得格調(diào)高雅艘刚,減少了鬧哄哄的市場感管宵,一方面也簡化了用戶的選擇截珍。因為當選項過多的時候,也就意味著系統(tǒng)的選擇失效了箩朴,所謂“推薦”也失去了權(quán)威感岗喉。
05-雅各布定律(Jakob’s Law)
用戶將大部分時間花在其它的應(yīng)用/站點上,而非你的炸庞。意味著他們希望你的應(yīng)用和其它當他們已知的應(yīng)用/站點的使用方式保持一致钱床。
用戶會將他們圍繞一種熟悉的產(chǎn)品建立的期望,轉(zhuǎn)移到看起來相似的另一種產(chǎn)品上埠居。
通過利用已經(jīng)存在的心智模型查牌,我們可以創(chuàng)造更加出色的用戶體驗,讓用戶聚焦于任務(wù)而非學習新的模式滥壕。
通過授權(quán)用戶在有限的時間內(nèi)使用熟悉的版本纸颜,將不一致性降到最低。
與通用的绎橘、相似的胁孙、用戶熟悉的產(chǎn)品在基本的元素(使用方式、布局称鳞、圖標涮较、可交互元素、超鏈接等)上保持一致性冈止,避免重復(fù)發(fā)明輪子狂票。可以降低人們的學習成本熙暴,讓人們快速上手闺属、快速熟悉。
舉例
網(wǎng)購類APP的功能區(qū)怨咪,基本全是首頁推薦屋剑、分類查找、瀏覽發(fā)現(xiàn)诗眨、購物車唉匾、我的這5個模塊。頁面的布局也很大程度上相似,讓用戶在同類產(chǎn)品上建立的經(jīng)驗可以通用巍膘。
06-同域原則(Law of Common Region)
在同一明確定義的邊界中的元素厂财,會傾向于被看成是一組的。
在元素或者組的周圍增加邊界是一種創(chuàng)造共同區(qū)域電腦簡單方式峡懈。
可以通過元素或元素組后增加背景來創(chuàng)造共同區(qū)域璃饱。
通過內(nèi)容容器來強調(diào)元素的相關(guān)性,讓頁面更加規(guī)整肪康,減少第一眼的視覺觸點荚恶,不會顯得零散。同時通過背景的形式磷支、顏色等谒撼,區(qū)分出每個組之間的層級關(guān)系。
舉例
簡書“我的”模塊雾狈,用卡片的形式將內(nèi)容組織到一起廓潜,區(qū)域內(nèi)部會被認為是一個整體。從更高層級上看善榛,形成幾塊獨立的區(qū)域辩蛋,幫助用戶建立關(guān)于內(nèi)容結(jié)構(gòu)的心理模型,減少認知負荷移盆。
07-簡潔定律(Law of Pr?gnanz)
人們會以最簡單的圖形感知并理解模糊或復(fù)雜的圖像悼院,因為這種解釋需要我們付出最少的認知努力。
人類的眼睛傾向于在復(fù)雜的形狀中尋找簡單和秩序味滞,因為會選擇可以避免我們被信息所淹沒樱蛤。
研究證實,與復(fù)雜的特征相比剑鞍,人們能夠更好地處理并記住簡單特征昨凡。
對人類而言,在幾何形狀中蚁署,認知負荷大致為圓形≈矩形≤凸多邊形<凹多邊形
舉例
簡潔法則幫助我們建立秩序便脊,快速認知。在內(nèi)容較多的信息流(照片光戈、視頻哪痰、文字等)頁面中,多樣化的內(nèi)容被劃分為整齊劃一的形式久妆,就是為了讓整體更有秩序感晌杰,減少無關(guān)的形式信息對于主要內(nèi)容呈現(xiàn)的干擾。
08-接近/臨近/親密法則(Law of Proximity)
彼此接近或靠近的對象筷弦,傾向于被看成是一組的肋演。
接近性幫助相鄰的對象建立關(guān)系抑诸。
接近性幫助用戶更快更高效的理解和組織信息。
在設(shè)計中层玲,將相關(guān)聯(lián)的信息放到一起惰帽,用戶能夠快速理解他們之間的關(guān)系。不同組的信息通過間距區(qū)分,可以劃分出不同的信息組/模塊。
舉例
間距是區(qū)分內(nèi)容的一種形式。文章列表中各條目之間的間距伪很、文章中的段與段之間的間距>行距锉试,讓人更容易區(qū)分不同的部分。
09-相似法則(Law of Similarity)
人們的眼睛往往將設(shè)計中相似的元素視為完整的圖片、形狀、組合叔磷,即使這些元素是分開的咖为。
確保視覺和導航系統(tǒng)與正常的文本元素在視覺上有區(qū)分鸣哀,并且使用一致的風格樣式吞彤。
人眼擅長于填補“空白”或連接“點”。
通過字號挠羔、字重、符號破加、背景等來區(qū)分標題與正文文本,讓標題成為幾個突出的里程碑雹嗦,可以有效的組織和構(gòu)建結(jié)構(gòu)了罪。
這也是產(chǎn)品的內(nèi)部各個頁面吱七、各種元素景醇、控件等保持一致的原因,可以建立產(chǎn)品整體感吝岭,讓用戶更具沉浸感三痰,也會更加關(guān)注到重要的吧寺、變化的內(nèi)容。
相似也不等于過度重復(fù)散劫。機械式的重復(fù)讓整體顯得呆板無趣稚机,增加變化可以增添節(jié)奏感、趣味性获搏。就像在一條筆直的高速上赖条,總會增加幾個彎道,避免司機昏昏欲睡常熙。
舉例
文章列表的各個模塊纬乍,都是圖片+加粗標題+正文簡介的模式,形成整齊劃一的模式裸卫。同時仿贬,圖片的差異、標題的長短也形成差異墓贿、節(jié)奏茧泪、韻律、起伏募壕,避免流水線式的呆板枯燥调炬。和寫文章、作曲等類似舱馅,前后呼應(yīng)但是情節(jié)曲折、旋律在重復(fù)中產(chǎn)生變化刀荒、升華等代嗤。
10-連通性原則(Law of Uniform Connectedness)
視覺上連接起來的元素比沒有連接的元素被認為更相關(guān)。
相似的特征具有分組功能缠借,所以可以通過顏色干毅、線條、線框或其它形狀在視覺上進行連接泼返。
頁面設(shè)計中硝逢,可以在位置較遠的元素之間增加連接線、連接符等绅喉,強化二者之間的關(guān)聯(lián)關(guān)系渠鸽,同時引導用戶的視線流動。
視線引導不一定要通過顯性的線條柴罐,對齊的基線是一種暗示的連接線徽缚。
舉例
文章列表中各個相同部分的對齊,形成瀏覽線革屠,引導用戶的視線凿试。
海報中加上線條的連接排宰,讓距離較遠的元素形成關(guān)聯(lián)關(guān)系。
11-米勒定律(Miller’s Law)
在短時記憶中那婉,一般人只能記住7(加減2)個條目板甘。
分塊是一種以可管理的方式呈現(xiàn)一組內(nèi)容的有效方式。一次將5~9個條目分成一組详炬。如iOS的文件夾盐类,一次只展示9 個應(yīng)用。
信息條目較多時痕寓,考慮分組的方式傲醉,將信息分層,可以解釋信息結(jié)構(gòu)呻率,同時減少一次需要面對的條目數(shù)硬毕。每個條目的描述也應(yīng)當簡潔、明了礼仗,讓用戶的認知成本更低吐咳。
舉例
iOS推薦的tab bar中選項的數(shù)量為3-5個,iPad os可以多一點元践。Tab Bars - Bars - iOS - Human Interface Guidelines - Apple Developer
12-奧卡姆剃刀原則(Occam’s Razor)
需要假設(shè)最少的解釋韭脊,就是最好的解釋。(Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.)
切勿浪費較多的東西去做用較少的東西就可以做好的事情单旁。如無必要沪羔,勿增實體。
分析每個元素象浑,并在不損害功能的前提下蔫饰,盡可能的刪除元素。元素包括界面的可見元素(文字愉豺、按鈕篓吁、裝飾元素、背景等)蚪拦、操作的步驟杖剪、流程節(jié)點等。
舉例
減少不必要的視覺元素驰贷,就是減少不必要的信息干擾盛嘿,主要內(nèi)容會更加突出。在從擬物化到扁平化再到新擬物饱苟、輕擬物孩擂、玻璃擬物風格,去掉了濃重的陰影箱熬、質(zhì)感类垦、肌理狈邑,加入漸變、高光等來區(qū)分層級蚤认、豐富細節(jié)米苹,也是奧卡姆剃刀的視覺層面的使用,扁平化讓人覺得無聊砰琢,但是輕擬物也不會像擬物化那樣“重”蘸嘶。在優(yōu)化的過程中,剔除的度很重要陪汽。
「新擬物化」過時了训唱!此刻你最應(yīng)該擁抱的是「玻璃擬物化」! - 優(yōu)設(shè)網(wǎng) - UISDC
餓了么挚冤、美團都在用的輕擬物風格况增,到底是什么克蚂? - 優(yōu)設(shè)網(wǎng) - UISDC
13-帕累托原則(Pareto Principle)
帕累托原則指出像街,在許多事件中。大約80%的影響來自20%的原因反番。也叫“二八定律”
將主要精力聚焦于為大多數(shù)用戶帶來最大收益的部分澜薄。
將時間为肮、精力投入到用戶經(jīng)常使用的主要功能,改善核心的用戶體驗肤京,則更有可能贏得用戶并鼓勵用戶忠誠度颊艳。
舉例
在產(chǎn)品的改版中,針對用戶經(jīng)常使用的功能進行主要優(yōu)化忘分,使用較少的功能可以減低優(yōu)先級籽暇,投入更少的精力,讓改版更有針對性饭庞。
14-帕金森定律(Parkinson’s Law)
任何任務(wù)都會拖延,直到所有可用的時間都被用完為止熬荆。
由于畏難/很難長時間集中精力做一件事舟山,需要將復(fù)雜的任務(wù)分解,并在各階段提供里程碑式的獎勵卤恳,讓小階段的成就感不斷鼓勵用戶累盗,最終完成一個復(fù)雜的任務(wù)。
舉例
幫助用戶克服拖延的心理突琳,就是要降低任務(wù)的復(fù)雜度若债,通過逐步設(shè)置獎勵來引導用戶完成復(fù)雜的任務(wù)。如記單詞的應(yīng)用將大量的單詞任務(wù)劃分成多天的計劃拆融、育嬰類應(yīng)用將關(guān)于寶寶的各類知識劃分到每天蠢琳,給人心理壓力更小啊终。
15-峰終定律(Peak-End Rule)
人們評判體驗的好壞主要基于在巔峰時期和結(jié)束點的體驗傲须,而不是每一刻體驗的相加或者平均水平蓝牲。
密切注意用戶體驗旅程中最激烈的點和最終的時刻(“終點”)。
識別產(chǎn)品中最有幫助泰讽、最有價值例衍、最有趣的時刻,并且將這些時刻設(shè)計得更好一些已卸。
要記住佛玄,用戶對消極體驗的回憶要比對積極體驗的回憶生動得多。
峰終定律是人們的認知偏見累澡,是大腦處理信息的一種機制梦抢。我們的記憶并不是對經(jīng)歷的全面描述。我們在記憶中所掌握的細節(jié)數(shù)量有限永乌。為了彌補這一不足惑申,我們的趨勢是回憶高峰經(jīng)歷或亮點以及結(jié)局。在最高峰和結(jié)尾時的體驗會更多的影響人們對于整體體驗的計算翅雏。
在一個點突破圈驼,將體驗的峰值推到最高。在結(jié)束時望几,給用戶以獎勵绩脆、肯定,用小的驚喜來撫慰用戶橄抹。二八定律靴迫,將80%的用戶體驗優(yōu)化精力放到這些點上。
舉例
強化最興奮點的體驗楼誓,完善結(jié)尾處的體驗玉锌。如游戲中,成功/通關(guān)等時刻疟羹,會采用聲音主守、畫面等多種形式結(jié)合來強化用戶的成功感,讓成功的喜悅更加強化榄融。同時游戲結(jié)束的時候参淫,會進行總結(jié),給贏家以獎勵愧杯,給失敗者以安慰涎才。
16-波斯托定律(Postel’s Law)
接受觀點時持開放態(tài)度,在輸出觀點時持保守態(tài)度力九。
善解人意耍铜,靈活并能夠容忍用戶可能采取的任何行動邑闺,意味著可以接受用戶可變的輸入,翻譯輸入以滿足系統(tǒng)要求业扒,定義輸入邊界并且為用戶提供清晰的反饋检吆。
魯棒性、健壯性程储、容錯性蹭沛,能夠接受不同類型的輸入,并將之翻譯成有價值的內(nèi)容章鲤。
用戶的輸入可能會出錯摊灭,或者與你的預(yù)期不一致,系統(tǒng)能夠包容著些并自動糾正的話败徊,可以給人以貼心帚呼、聰明的感覺。
給用戶定義操作的邊界就是在輸入時調(diào)用不同的鍵盤皱蹦、使用選擇控件煤杀、輸入字數(shù)限制的動態(tài)提醒等,讓用戶的輸入可控沪哺。如果用戶的輸入超出范圍沈自、出錯,要及時提供反饋告知用戶辜妓。
舉例
在百度枯途、Google、淘寶籍滴、京東等搜索內(nèi)容的時候酪夷,即使用戶輸錯一個字或者輸入拼音等非正確的關(guān)鍵字,系統(tǒng)也會根據(jù)貝葉斯概率的方式作出最接近的猜測并給出相應(yīng)結(jié)果孽惰,避免用戶需要刪除后再次輸入晚岭。
17-系列位置效應(yīng)(Serial Position Effect)
在一系列條目中,用戶傾向于對第一個(首因效應(yīng))和最后一個(近因效應(yīng))印象最深刻勋功。
將最不重要的條目放在列表中間可能會有所幫助腥例,因為這些條目傾向于在長期和工作記憶中存儲的頻率往往較低。
在諸如導航之類的元素中酝润,將重要動作放在最左邊和最右邊可以增加記憶。
舉例
彈窗采用將標題放在左上角璃弄,按鈕放在右下角的模式要销,也是符合用戶的瀏覽順序。標題(首因效應(yīng))和關(guān)鍵的動作(近因效應(yīng))成為最重要的部分夏块。
tab欄疏咐、按鈕組等多個條目的設(shè)計中纤掸,往往將最重要部分的放在一組中的最前和最后。
購物APP將立即購買放在最右下角且常駐浑塞,并采用增加視覺比重(最醒目)的形式借跪,就是利用近因效應(yīng),引起人們的注意酌壕。同時底部的按鈕在移動端的操作更友好掏愁。
就像在比賽節(jié)目中,最后出場的總能給觀眾留下更深刻卵牍、清晰的印象(壓軸)果港,也是記憶的近因效應(yīng)。
18-泰斯勒定律(Tesler’s Law)
復(fù)雜守恒定律(The Law of Conservation of Complexity)糊昙,表明任何系統(tǒng)都有一定的無法消除的復(fù)雜性辛掠。
產(chǎn)品的復(fù)雜性應(yīng)該交由代碼處理,而非用戶處理释牺。復(fù)雜的邏輯計算萝衩、重復(fù)的操作等交由代碼處理,選擇没咙、決策交由用戶猩谊,讓用戶感覺到方便的同時不會失去控制感。
舉例
sketch 在元素尺寸變換時镜撩,可以在輸入框中直接寫上算術(shù)预柒,如50+234,系統(tǒng)會自動計算出結(jié)果并完成修改袁梗,避免了用戶需要心算后再填入具體數(shù)值宜鸯。
19-馮·雷斯托夫效應(yīng)(Von Restorff Effect)
也稱為隔離效應(yīng)(The Isolation Effect),在多個相似的對象中遮怜,與眾不同的那個比其它的更能讓人記住淋袖。
讓重要信息或或關(guān)鍵動作視覺上與眾不同。
環(huán)境差異:與周圍的元素進行區(qū)分锯梁,獨特的部分會被最先注意到即碗。
經(jīng)驗差異:隨著時間的不同而有不同的形式,讓人記住變化的點陌凳。就像Google doodles剥懒,在節(jié)假日、重要紀念日等進行特殊設(shè)計合敦,形成情感化的記憶點初橘。
差異的度:所有元素形式各異只會顯得雜亂,沒有重點。只有在建立秩序保檐、條理之后增加差異化耕蝉,才會讓人注意到差異點。
舉例
CTA(Call To Action)按鈕夜只,一般使用較為亮眼的顏色垒在,在頁面中做得比較醒目、扎眼扔亥,就是為了讓用戶在較短的時間內(nèi)注意到场躯,并采取動作。如下圖騰訊安全官網(wǎng)中的“立即查看”按鈕砸王。
20-蔡格尼克記憶效應(yīng)(Zeigarnik Effect)
與已完成的任務(wù)相比推盛,人們對于沒有完成的或者被打斷的任務(wù)記憶更深刻。
為復(fù)雜的任務(wù)使用進度條谦铃,當任務(wù)未完成時進行視覺提示耘成,從而增加完成任務(wù)的可能性。
人存在的一種天生的驹闰、做事有始有終的驅(qū)動力使人們對于還沒有完成的任務(wù)念念不忘瘪菌。一項任務(wù)啟動時,人會處于一種緊張狀態(tài)的場嘹朗,這會增強所有與該任務(wù)相關(guān)信息的認知师妙,任務(wù)完成后緊張的狀態(tài)會得到緩解。
舉例
網(wǎng)易公開課的一萬分鐘計劃屹培,由于需要長時間的堅持默穴。顯示進度條、剩余時間等告知用戶當前的進度褪秀,提示蓄诽、激勵用戶逐漸完成。
簡單法則
01-刪除(REDUCE)
實現(xiàn)簡約最簡單的方法就是深思熟慮之后的刪除媒吗。
簡化系統(tǒng)最簡單的方式就是移除功能仑氛。
一方面,你希望產(chǎn)品或服務(wù)能夠使用更容易闸英;另一方面锯岖,你想讓它能夠做人們看想讓它做的所有事情。
達到完美的簡約狀態(tài)的過程可能很復(fù)雜甫何。當功能重復(fù)時出吹,那就刪除它。但是要特別注意你所刪除的功能(不能讓系統(tǒng)不可用或常用的功能很難使用)辙喂。
02-組織(ORGANIZE)
組織使復(fù)雜的系統(tǒng)看起來更簡約趋箩。
需要問兩個問題:隱藏什么赃额?放在哪里?
長期來看叫确,組織對于成功的馴服復(fù)雜是必要的。換句話說芍锦,需要問一問“哪些和哪些是一起的”這種挑戰(zhàn)性的問題竹勉。
當然,只有當組的數(shù)量明顯少于需要組織的條目數(shù)時娄琉,這一條才成立次乓。
03-時間(TIME)
節(jié)省時間就像是在簡化。
人們花了很多時間在排隊孽水、等待票腰、堵車這種讓人失去耐心的事情上,沒有人喜歡忍受等待帶來的的挫折感女气,當任何產(chǎn)品或服務(wù)提供的交互反應(yīng)迅速時杏慰,我們會將這種效率歸因于體驗的簡約性。
當面臨等待時炼鞠,生活似乎就有很多不必要的復(fù)雜缘滥。
04-學習(LEARN)
知識讓所有事情都變得更容易。
就像擰螺絲這種看似簡單的工作谒主,也需要“左松右緊/順時針擰緊”這種知識的輔助朝扼,才不會擰錯方向。對于任何不管多困難的系統(tǒng)霎肯,知識都會讓這一切變得變得簡單擎颖。
但學習知識會讓人覺得是在浪費時間,尤其是學習指導手冊观游。但是大型的軟件搂捧,直接去做、試錯的成本备典,通常比看手冊的成本還高异旧。因為涉及的流程節(jié)點、業(yè)務(wù)環(huán)節(jié)會很多提佣,稍有不注意吮蛹,就會導致失敗。
良好的指導材料拌屏、說明文檔潮针、操作指南等讓用戶更有目標的學習、更快的學習倚喂、更有興趣學習每篷。
05-差異(DIFFERENCES)
簡約和復(fù)雜彼此需要瓣戚。
沒有人想僅吃甜點。沒有復(fù)雜的對比焦读,當我們看見簡約時也會無法分辨子库。有對比的情況下,我們可以更好地發(fā)現(xiàn)事物的優(yōu)點矗晃。就像顏色之間需要冷暖調(diào)和仑嗅,才會更加生動。
06-情境(CONTEXT)
簡約性的周圍環(huán)境絕不是次要的张症。
當你專注于一件事情的時候仓技,周圍的東西就會被你忽視∷姿可以像激光束一樣瞄準一個目標脖捻,或者用同樣的光線,像燈泡一樣照亮周圍的每一個角落兆衅。
追求卓越通常意味著為了關(guān)注最重要的前景而忽略了背景中的一切地沮。
關(guān)注除了主要目標之外的周圍環(huán)境,從而強化整體的簡約感涯保。
07-情感(EMOTION)
情感越多越好诉濒。
簡約性可能被認為是丑的。簡約的設(shè)計讓產(chǎn)品的生產(chǎn)成本更低夕春,用戶認為其看上去給人感覺是低廉的未荒。人類具有的這種自我表達意識,往往會影響我們的決策及志。
當情感被認為最重要的時候片排,就不要害怕增加更多的裝飾或意義層面的東西。就像運營設(shè)計大多看上去很復(fù)雜速侈、熱鬧率寡,就是為了凸顯歡快的情感。而B端的產(chǎn)品倚搬,總是很克制冶共,似乎給人感覺冷冰冰的,也是為了強化效率每界、專業(yè)的形象捅僵。
08-信任(TRUST)
我們相信簡單。
想象一下眨层,有一個設(shè)備只有一個沒有寫明用途的按鈕庙楚,只要按一下,就能完成我們當前想做的任務(wù)趴樱。計算機變得越來越聰明馒闷,這種想法離我們的現(xiàn)實并不遙遠酪捡。
09-失敗(FAILURE)
有些事情纳账,永遠沒法變得簡單逛薇。
當你嘗試簡化的時候,總是會面臨失敗疏虫,但是你可以從錯誤中學習金刁。在簡化中的失敗經(jīng)驗,可能是復(fù)雜性的一種漂亮形式议薪。
復(fù)雜是由簡單堆積而來的。簡單的代碼也可以產(chǎn)生復(fù)雜的藝術(shù)媳友。相反的斯议,谷歌復(fù)雜的網(wǎng)絡(luò)服務(wù)和算法形成了簡單的搜索體驗。簡單和復(fù)雜的判斷需要可以參考的框架醇锚。
10-唯一(THE ONE)
簡約就是減少明顯哼御、刻意的東西,增加有意義的內(nèi)容焊唬。
格式塔心理學
Design Principles: Visual Perception And The Principles Of Gestalt — Smashing Magazine
格式塔心理學的格式塔是德文Gestalt的音譯恋昼,一般又稱為完形心理學。
格式塔心理學主要研究整體與構(gòu)成整體的各個部分之間有何聯(lián)系赶促,強調(diào)研究對象的整體性液肌,不是單純的各個元素本身的特性,而是他們所構(gòu)成的整體的特性鸥滨。格式塔心理學認為所有元素相加之和一定會小于研究對象的整體性呈現(xiàn)嗦哆。
通過補全、簡化等機制婿滓,通過簡化老速、組織、歸納的方式來理解外部世界的復(fù)雜信息點凸主,將多個點看成一個整體橘券,減少大腦的認知負荷。
視覺傾向于感知連續(xù)的卿吐、整體的形式而不是分散的碎片旁舰,通過找到元素間非常微小的共性,將多個不同的信息結(jié)合成一個整體但两,減少視覺觸點鬓梅,減輕認知負荷。
問題的解決不是由于嘗試錯誤谨湘,而是由于頓悟绽快。所謂頓悟芥丧,就是內(nèi)在地把握情境的關(guān)系性,并依此改變整個情境坊罢。
Proximity (接近/臨近)
距離的遠近能夠傳達關(guān)系的親疏续担,放在一起的會被認為是一組的;距離較遠的會認為是不同的組的活孩。兩個元素越是接近物遇,組合在一起的可能性就越大
舉例
內(nèi)容之間的間隔區(qū)分,通過距離來組織和區(qū)分不同的內(nèi)容憾儒。
Similarity (相似/類似)
形式上(如顏色询兴、形狀等)相似的元素,人們在感知過程中會認為其是一組的起趾。就像球賽中诗舰,穿著一樣隊服的,就是同一個球隊的成員训裆。
舉例
同一個產(chǎn)品內(nèi)眶根,不同的頁面之間,使用統(tǒng)一的標準(顏色边琉、字號属百、圖標等),讓人覺得整個產(chǎn)品是一體的变姨,在用戶心中構(gòu)建一致族扰、強烈的品牌視覺形象。蘋果的設(shè)計原則中钳恕,就有提到一致性的重要性别伏。Themes - iOS - Human Interface Guidelines - Apple Developer
Continuity (連續(xù)/連通性)
連續(xù)性是指,人們會將分離的各個有關(guān)聯(lián)的點忧额,在腦海中自動構(gòu)建一個完整的線厘肮,最終成為一個整體的形狀。
舉例
各個星座的形狀睦番,就是由幾個最亮的星星連線之后形成的类茂。
在設(shè)計中去除部分細節(jié),可以增加整體的留白托嚣、更有呼吸感巩检,也不會影響整體信息含義的傳達。
Closure (閉合/封閉)
與連續(xù)性類似示启,也是大腦的一種自動補全機制兢哭。我們的視覺感知系統(tǒng)會通過已知的模糊信息,通過以往的經(jīng)驗自動補齊殘缺的部分夫嗓,將局部的信息當做一個整體的形象來感知迟螺。但是這種查漏補缺的形式是建立在冲秽,我們已感知的對象提供的是有規(guī)律的形態(tài),而非完全分離的碎片和信息矩父。
舉例
大部分APP的推薦設(shè)計中锉桑,對于更多內(nèi)容的暗示,一般會露出一部分窍株,提示用戶還有更多的內(nèi)容民轴。
圖標設(shè)計中的缺口,并不影響對于整個圖標含義的識別球订。
figure-ground (圖形-背景原則)
我們在看到一個事物的時候后裸,大腦會自動幫助我們在視覺區(qū)域區(qū)分出主體和背景兩個部分,在這個事物中占據(jù)了我們主要的注意力的就是主體冒滩,然后剩下的部分就是背景轻抱。
“圖形”是一個格式塔,一個突出的實體旦部,是我們知覺到的事物〗系辏“背景”是尚未分化的士八、襯托圖形的東西。知覺幫助我們從背景中將圖形分化出來梁呈。圖形與背景的對比差異越大婚度,圖形的輪廓越明顯,則圖形越容易被發(fā)覺官卡。
當小物體與大物體疊加的時候蝗茁,人們傾向于將小物體視為圖形,將大物體視為背景寻咒。
舉例
在設(shè)計中哮翘,讓主要信息更加醒目,人們一眼就能注意到毛秘。這樣可以讓人快速找到頁面的重點以及想要傳達的信息饭寺。
彈窗的設(shè)計中,也是通過降低背景的亮度叫挟,來區(qū)分彈窗的內(nèi)容與背景的部分艰匙。
幫助提示中,將其它部分變暗抹恳,用亮點提示焦點员凝,也是突出主體,制造前景的方式奋献。
簡化對稱性原則
人們往往傾向于感知勻稱物體圍繞中心對稱后形成的形狀健霹。在紛繁復(fù)雜的信息中尋找規(guī)律旺上、簡單、有序的對象骤公。
舉例
圖片流的內(nèi)容抚官,通過對稱的形式來減輕閱讀的壓力。
common fate(同方向/共同命運)
與相似性原理類似,這里共同的形式就是運動方向。即具有相同運動方向的元素钮蛛,會被認為是具有關(guān)聯(lián)的富俄,一個組內(nèi)的。
舉例
版式設(shè)計中的線條元素七芭,采用同樣的方向,即便長短不一,也會被認為是一組的卒煞。
Simplicity (簡單)
格式塔的核心思想,是指為了更方便的理解這個世界叼架,人類會將接受到的大量信息進行過濾和簡化畔裕,因為這種解釋需要我們付出最少的認知努力,避免我們被紛繁復(fù)雜的外部信息所淹沒乖订。
舉例
在信息復(fù)雜的頁面中扮饶,一般采用簡單的幾何形式來組織、歸類各種信息乍构。讓整體更加規(guī)整甜无,減少信息的復(fù)雜度。
過去經(jīng)驗原則
我們會自動將之前形成的經(jīng)驗套用到現(xiàn)有的模式上哥遮。即用戶的心智模型已經(jīng)建立岂丘,我們需要讓實現(xiàn)模型與用戶的心智模型更匹配。
舉例
保持與業(yè)界主流產(chǎn)品的交互一致性眠饮,在基礎(chǔ)的奥帘、用戶已經(jīng)形成習慣的模式上,盡量與慣用的模式保持一致仪召,避免與用戶的理解不一致而讓其產(chǎn)生挫敗感翩概。
知覺恒常性(perceptual constancy)
是指當距離、縮影比返咱、照明改變的時候钥庇,雖然網(wǎng)膜影響已經(jīng)在一定程度發(fā)生改變,但人們對物體大小咖摹、形狀和顏色的知覺仍相對穩(wěn)定评姨。比如遠處的一頭牛,看起來可能像一只鳥那么大,但是我們?nèi)匀粫J為它比鳥大多了吐句。這也是我們的過去經(jīng)驗在起作用胁后。
《web界面設(shè)計》六大原則
直截了當:
在哪里輸出,就允許在哪里輸入嗦枢。讓用戶直接對對象進行操作(選擇攀芯、修改、輸入文虏、拖拽等)侣诺,所見即所得。
簡化交互:
將關(guān)聯(lián)的內(nèi)容放到一起氧秘,簡化交互路徑年鸳。減少操作步驟,縮短交互流程丸相,簡化功能層級搔确。根據(jù)當前的情境顯示合適的界面元素。
足不出戶:
通過覆蓋層灭忠、嵌入層膳算、漸進加載、向?qū)J降仍诋斍绊撁嫱瓿刹僮鞒谧鳎瑴p少頁面切換畦幢,更好保持上下文。與尼爾森的易取原則類似缆蝉。
提供邀請:
通過形式、顏色瘦真、圖標刊头、動畫提示等,增加功能的可發(fā)現(xiàn)性诸尽,引導用戶進入下一交互層次原杂。
巧用變換:
狀態(tài)轉(zhuǎn)換、頁面跳轉(zhuǎn)過程中采用動畫過渡的形式您机,暗示關(guān)聯(lián)性穿肄,增強趣味性、增加與用戶的溝通际看。
即時反應(yīng):
及時響應(yīng)用戶的操作咸产,提供實時搜索、即時反饋仲闽、建議選項等脑溢,減少用戶輸入、防止用戶出錯赖欣。
《簡約至上:交互設(shè)計四策略》
刪除
刪除就是幫助用戶做選擇屑彻,而非將所有的問題都拋給用戶验庙。無關(guān)元素太多,會讓整體顯得雜亂社牲、隨意粪薛;刪除太多,會讓用戶覺得無法控制搏恤、沒有決策權(quán)违寿。要在用戶的掌控感和貼心方便之間,把握好尺度挑社。
頁面內(nèi)容太多時陨界,會增加人的認知負擔,分散人的注意力痛阻,從而影響核心目標/核心任務(wù)的完成菌瘪。所以,應(yīng)當關(guān)注頁面的核心功能阱当,減少流程中無關(guān)緊要的分支俏扩,減少多余的視覺干擾元素,減少過多的樣式和層次弊添。讓用戶聚焦于當前的任務(wù)录淡。
轉(zhuǎn)移
轉(zhuǎn)移就是充分利用不同平臺、不同設(shè)備的特性和優(yōu)勢油坝,如手機APP具有便利性嫉戚,隨時隨地可進行操作;PC端具有顯示區(qū)域大澈圈,輸入快捷的特點彬檀。
轉(zhuǎn)移的另一種邏輯就是不做過多限制,以一種開放性的姿態(tài)滿足不同用戶的需求瞬女。讓用戶和產(chǎn)品分別做自己擅長的事情窍帝。用戶負責靈活性的決策,產(chǎn)品負責邏輯計算與長期存儲诽偷。如用戶定制化的功能菜單坤学、千人千面的算法推薦等。
隱藏
使用常規(guī)的报慕、符合用戶預(yù)期的隱形命令:隱形命令就是通過快捷鍵或快捷手勢進行的操作深浮,在界面上沒有可視的操作按鈕。如在視頻播放界面右側(cè)上下滑動可以增加/減小音量眠冈。
另一種思路是略号,將不常用的功能收納起來,減少對用戶注意力的干擾。
組織
組織就是將同一類的東西放到一起玄柠,然后將不同類別做區(qū)分突梦。符合格式塔心理學提到的,人們認知過程中傾向于將數(shù)量較多羽利、復(fù)雜的對象簡化宫患、補全、歸納这弧、組織后看成一個或幾個整體的直覺反應(yīng)娃闲。
這樣整體信息架構(gòu)會比較清晰有條理,尋找目標信息會更加方便快捷匾浪。用戶首先看到的也是幾個大的模塊皇帮,從心理上來說,壓力不會那么大蛋辈。組織對應(yīng)格式塔心理學的完形属拾、接近、相似原則冷溶。也用到《寫給大家看的設(shè)計書》中的重復(fù)渐白、親密、對齊原則逞频。
參考
First Principles of Interaction Design (Revised & Expanded) | askTog
交互設(shè)計原則有哪些纯衍? - 貴妃奶黃包的回答 - 知乎
超全面!高手總結(jié)的18條交互設(shè)計原則(一) | 優(yōu)設(shè)網(wǎng) - UISDC
超全面苗胀!高手總結(jié)的18條交互設(shè)計原則(二) | 優(yōu)設(shè)網(wǎng) - UISDC
交互設(shè)計快速檢查清單 Interaction Design Quick Checklist - 簡書
用超多案例襟诸,帶你學會經(jīng)典的尼爾森十大交互設(shè)計原則 | 優(yōu)設(shè)網(wǎng) - UISDC
10 Heuristics for User Interface Design: Article by Jakob Nielsen
The Laws of Simplicity / John Maeda
用超多案例,幫你掌握交互設(shè)計心理學的古騰堡原則 | 優(yōu)設(shè)網(wǎng) - UISDC
讓設(shè)計更有說服力的20條經(jīng)典原則:雅各布定律 - 優(yōu)設(shè)網(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)設(shè)網(wǎng) - UISDC
用超多案例歌亲,幫你學會經(jīng)典格式塔理論的7個視覺原則 - 優(yōu)設(shè)網(wǎng) - UISDC
商利燕. 基于格式塔心理學探索虛擬現(xiàn)實技術(shù)在設(shè)計教學中的應(yīng)用[D].
趙蔓. 基于格式塔理論下綜合購物類APP界面設(shè)計研究[D].