歡迎光臨
我們一直在努力

【乾貨知識】最全面的互動設計原則和理論彙總(下)

文章摘要: 2.如果設計中的元素的功能可見性與人們的感官預期相符成本效益 1.設計中

【點選上方藍字 ↑↑↑ 關注 「藝戀優夢」 獲得每晚推送】

防錯原則:

防錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。通過改變設計可以把過失降到最低。該原則最初是用於工業管理的,但在互動設計也十分適用。如在硬體設計上的 USB 插槽;而在介面互動設計中也是可以經常看到,如當使用條件沒有滿足時,常常通過使功能失效來表示(一般按鈕會變為灰色無法點選),以避免勿按。

如上圖所示極客公園的評論功能快,在留言框沒有內容或郵箱格式不正確的時候是無法獲取驗證碼的,只有兩者都滿足了纔可以。

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

這個原理被稱為「如無必要,勿增實體」,即如有兩個功能相等的設計,那麼選擇最簡單的。在極客公開課・走進 UC 中 UC 瀏覽器產品經理蘇劍南在「UC 瀏覽器 For Android 產品設計思考」演講中也有講到該原理的應用,「如果 UC 手機瀏覽器要釋出第一個版本 UC 1.0,你會選擇哪五個功能?」

功能可見性

1.在視覺感知上,某些元素適用於某些功能,這些元素便符合功能可見性。

2.如果設計中的元素的功能可見性與人們的感官預期相符,那這種設計會有很高的接納率和使用率,也被認為容易操作。所以在設計時,需要儘可能的符合人們的心理預期,介面設計要模擬人們熟悉的物品或環境,暗示提醒使用者的新系統中的各部件的使用方法和功能。

3.應用例子:生活中門和門把手功能抵觸,有推的標語,就不要設計有門把手。可以去掉文字提示,需要推的一面,設定無把手,需要拉的一面設定有把手,這樣,使用者在進行「推或拉」的動作,根據門把手的功能可見性,就可以準確的操作。再比如電腦螢幕的按鈕設計,電腦桌面的垃圾桶圖示、資料夾等等,都是模擬生活中的物品設計的,符合使用者在生活中的認知,用來提示使用者,這些圖示在軟體中的功能。

圖示:這些圖示設計符合生活中的相關事物,能夠使軟體功能明顯~

無障礙使用

1.好的設計不需要特別調整或修改就能很好的服務各種需要的人,此法則適用於所有大眾。四大要素:易讀性,易操作、簡易性、包容性。

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

提升易讀性方法:a.多種標註方式呈現資訊,文字影象觸覺等;b.輔助性感官設計  c.合理合適的方式呈現操控裝置和操控資訊。

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

提升易操作方法:a.最大限度減少使用者重複操作和不必要的體力消耗  b.運用完善和簡單的功能指導準則,使操作裝置容易使用。 c.輔助人體活動,提供方便的操作環境(殘疾人專用道) d.合理合適的方式呈現操控裝置和操控資訊。

(3)簡易性:不論經驗背景、文化程度、注意力等,都易操控。

提高簡易性方法:a.減不必要的複雜裝飾  b.採用清楚明瞭,持續統一的提示符號和操作資訊。 c.循序漸進展開說明、標註相關資訊和操作裝置。d.所有指令應該提供清楚的提示和反饋,確保資訊簡單易懂,適合不同文化程度的使用者。

(4)包容性:操作錯誤及導致後果最小化。

提高包容性方法:a.利用健全的功能可見性和可操作性(只標註正確的使用方法)預防錯誤。  b.利用確認與警告預防錯誤(刪除時:確認是否刪除)。  c.加入設計自正性的操作功能和安全網(自我調整與修正),減輕避免因錯誤造成的後果。

2.應用例子:大型電梯比小型電梯功能健全,兩套操作板適用站著與坐著的人,操作板多種符號(數字影象盲點)。

成本效益

1.設計中,用來評估新功能/新元素出現的新增成本的最後財務回收狀況。 如果與設計的互動成本>收益,則是不良設計,反之是優秀設計。

2.成本效益可以衡量設計的品質。如:網頁下載的時間常見說法不超過十秒,但是,接受下載時間的長短,更多與網頁提供的效益有關,如果網頁具有合理效益,其實可以抵消超過十秒的下載成本。所以,可以通過改進設計品質來降低互動成本(設計能夠提供效益)。

3.讓產品繼續進行應該效益>=成本,讓產品更好,應該讓效益儘可能的大於成本。應該從效益與成本兩個方面工作:成本限制 或者 效益增加。所以不能僅僅考慮成本限制範圍,也應該考慮互動效益成本。

4.應用例子:loading頁設計:用成本效益來考慮,為什麼loading頁設計多樣,不只是因為「有趣」這麼簡單的理由,有趣只是使用者的直觀感受。這種設計的應用實質可以用成本效益解釋,等待的時間可以當做是成本,在技術無法縮短合理的等待時間時,成本就相當於無法降低,那麼想要產品更好,需要從效益入手,設計可以帶來效益,那麼就需要改進等待頁的設計。所以現在的loading頁、進度條、錯誤頁等等設計都體現能帶來效益的創意互動。

圖示:

8020法則

1.定義:在所有大系統中,高達80%的效果是由僅佔20%的關鍵因素決定,在實際操作中發現,關鍵變數佔10-30%不等。適用範圍普遍,適用互不相關的事物影響。

2.8020法則有助於資源整合,可以幫助提升設計最大化。比如:客戶用80%的時間集中於產品20%的功能時,那設計與檢測應該集中於那20%,剩餘80%應該重新評估,確認他們的價值。設計師可以利用此法則,對設計中的所有元素進行重新評估,劃定重新設計與優化的範圍,有效決定優勢資源進行再設計,80%非關鍵能減則減,時間與資源有限時,不要試圖改進與優化那80%。

3.應用例子:圖形用戶界面把大部分功能隱藏在功能選單(降低視覺複雜性),常用功能難以找到(增加操作複雜性),所以應把20%關鍵功能放在功能選單中(工具條的使用)。

圖示:在印象筆記這個軟體裡,上層是功能選單,在主頁面上方設有常用功能的工具條,這就是把20%的關鍵功能擺設出來,沒有隱藏掉。

前衛與親近(MAYA法則)

1.成功的設計可以從很多方面界定:功能、美學角度、適用性等,如果我們從商業績效也就是銷售量來定義設計的成功,可以從兩個變數取得平衡:親切熟悉+獨一無二。MAYA法則就是幫助我們找到這兩個變數的平衡契合點,所以一個設計如果可以結合讓人感到熟悉+新奇的感受,就能夠提升設計的成功。此法則應用於:面向大眾物件的產品,使用者是大眾,而非專業設計師和藝術家。

2.使用者喜歡熟悉的東西(曝光效應:物品或環境的吸引力會隨著曝光次數的增加而增加),也喜歡新奇的設計。人們對新奇的關注與記憶大於典型性。此法則認為最理想的做法是:兼顧熟悉性和新奇性。 對使用者來講:最新奇但依舊可辨識的物品或環境,最富美學吸引力。

3.應用例子:設計的演變雖然一直有創意新奇的設計,但是都在從前被大眾接受的設計漸漸演變而來,而非完全脫離重新創造,因此新奇的設計+過去設計的熟悉感,會使得使用者具有吸引力和接受能力。圖示、介面的演變。

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

區域對齊

1.該對齊適用於:元素形狀不一,不對稱時,元素可為圖形或文字元素,如果是元素形式簡單對稱,就採用邊線對齊的方式。

2.對齊方法:將要對齊的元素順著中軸線擺放,讓中軸線兩邊的視覺重心或者面積相等。區域對齊方法無法使邊線對齊,如果想同時邊線對齊,只能令元素邊線在邊線內或邊線外。

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

訊雜比(常用於資訊設計)

1.同一顯示中,相關資訊與無關資訊的比例就是訊雜比。在資訊的創造、傳達、接收過程中,資訊的形式會遞減,無關資訊會增加。如何使得訊雜比高,從而達到優秀的設計目標?可從兩方面看:訊號最大化或噪音最小化。

2.訊號最大化:清楚的傳達資訊,高效率的呈現資訊可以使得訊號最大化。簡單的設計可以帶來極小的效能負荷,讓使用者專注於資料的意義。比如,沒有用正確的圖表呈現特定資料資料,基本會扭曲資料原意,所以正確的設計決策非常重要,必要時應進行測試。 還有一種方法,及時強調資訊的關鍵方面,也可以減少訊號遞減的現象。比如:強調或備援識別,凸顯產品的重要性。

3.噪音最小化:去除或減少不必要的元素,每一個不必要的資料專案、圖示、線條、圖案,都會讓使用者從重要元素上分心。每個設計元素的使用應該適當,一旦過多就是噪音。

4.應用:圖表、表格設計的演變。

圖示:左側的圖表無關資訊元素比較多,圖示的圖案多樣,表格的邊框又粗又重,這會使得「噪音」增加。右側是優化後的圖表,減去了無關資訊,用清楚明瞭的圖示表示資料內容。

序列效應

1.在列舉資訊時,排在最前和最後的元素,比排在中間的更容易讓人記住。

2.對排在開頭的資訊產生加強的回想效果,稱為:初始效應,人們有時候會把最前面的資訊儲存在長期記憶中。排在結尾的資訊產生加強的回想效果,稱為:時近效應。時近效應適用於聽覺刺激。初始效應適用於視覺刺激。

3.在列舉資訊元素時,如果列舉資訊屬於視覺性,那麼把重要的資訊放在最前面;如果是聽覺性,就放在最後面。如果是使用者必須做決定,並且是最後一項出現後馬上做決定,那麼就將想要使用者做決定的資訊放置最後,以便增加獲選概率,否則放在最前面。

4. 應用例子:比如在很多app產品設計時,個人賬戶與設定基本放在頁面的最前面和最後面,這體現著產品資訊的序列關係,重要次序,所以在進行設計時,可以在資訊排序上遵循序列效應。 當然還有一些產品想對使用者進行引導操作,也可以利用這個法則,將資訊放置最前或最後。

圖示:

古騰堡圖表法

古騰堡圖表法又稱 Diagonal Balance(對角線平衡的和諧狀態),設計理念緣自 Johannes Gutenburg(歐洲活字印刷術的發明者)應用於印刷的古騰堡圖表。它指出:

人們在瀏覽頁面或佈局時視線趨於從左上角移動到右下角,具體如圖

古騰堡圖表法說明我們觀看頁面的視線並不是鏡面對稱的,我們需要在設計中避免出現此類錯誤但絕不是墨守成規,將頁面的 Logo放置在左上角而主體向右下角延伸,左下和右上作為視覺的盲點可以新增輔助元素

其它一些簡易法則:

2秒鐘法則——使用者在使用某類系統時的等待反映不應該超過2秒。

3次點選法則——使用者在3次點選之內如果還沒有找到他們想要的資訊或瞭解產品/網站的特色,他們就會離開。

2/8法則——80%的結果由20%的原因產生 。

介面8黃金法則:

1)努力做到連貫;

例如網站首頁需要和每一個下級頁面保持一致的風格,導航都要放在螢幕的左上角,具有高度一致性的介面能給人清晰整潔的感覺。

2)允許頻繁使用系統的使用者使用快捷方式;

快捷鍵表示產品使用的靈活性和有效性,想想每次我們使用搜索引擎的時候是滑鼠點選的搜尋還是按的回車?

3)提供資訊反饋;

出現錯誤時要明確說出錯誤的含義,而且需要考慮使用者能否理解,比如我們基本上都遇到過HTTP404錯誤,但絕大多數人能看懂麼?

4)為關閉這一動作設計對話方塊;

要在使用者完成某項任務或操作後進行提示。如果他們在做了很多操作後卻得不到反饋,他們就無法知道自己是否達成目標。

5)提供簡單的設計處理;

例如把某些當前不能點選的按鈕設定為灰色,在系統執行時讓使用者在確認一下

6)應該方便使用者取消某個操作;

大多數的應用軟體都有撤銷和恢復的功能,如果使用者總是懼怕一失足成千古恨,那樣的使用者體驗可想而知

7)使用者應掌握控制權;

一般而言使用者希望自己去控制系統互動,在執行任務中,使用者應該可以隨時中止或退出,而不是無奈的看著系統繼續

8)降低短期記憶載荷;

我們應該儘可能幫助使用者避免要求他們記住各種資訊,例如各個選單項之間的邏輯關聯,更好的分類就會幫助使用者找出哪個功能按鈕在什麼地方。

Jakob Nielsen的10條可用性原則:

KANO模型:

包豪斯運動——形式追隨功能,去除干擾和裝飾。

Skeumorphic設計理念——花費很大的力氣來指向或模模擬實世界的功能。

嬰兒鴨綜合症——使用者習慣了以前的設計,對新的產品架構感到不舒服,他們必須找到自己的方式來使用產品。

自我參照效應——與我們個人觀念相聯絡的事物要比那些和我們沒有直接聯絡的事物記得更清楚。

0123簡單法則——無需說明書,一看就會,兩秒等待時間,三步以內的操作。

MVP法則(最簡化可實行產品法則)——一開始就拿產品來接觸使用者,從很早就根據使用者的回饋來改進你的產品。

麥肯錫金字塔方法——任何事情都能歸納出一箇中心點,而從中心論點可以由數個一級論據支撐,而這些一級論據也可以被數個二級論據支撐,如此衍生,狀如金字塔。

人機互動五大原則:

認知心理學是一個呈現心理過程的狀態

心流理論:人們全身心投入某件事中的一種心理狀態、沉浸在忘我的境界中

色彩心理

不超過三種色相的搭配

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

主色決定了品牌方向

運用相似性來進行色彩呼應,畫面更有節奏感和舒適性

運用顏色漸變穿插,讓介面平衡在一個頻率上

馬斯洛需求層次理論:

未經允許不得轉載:頭條楓林網 » 【乾貨知識】最全面的互動設計原則和理論彙總(下)