淺談簡約互動設計四策略
通過簡約至上互動式設計四策略這本書,來了解一下要做到簡約設計,設計師應該要注意什麼
今天小編來帶大家瞭解一下如何讓產品能更加簡單易用的四個設計策略:
合理刪除、分層組織、適時隱藏和巧妙轉移;
首先咱們以書中遙控器的例子先簡單介紹下這四個策略~
刪除-去掉所有不必要的按鈕,直到不能再減。
組織-按照有意義的標準將按鈕劃分成組。
隱藏-把那些不是最重要的按鈕安排在活動艙蓋下面去,避免分散使用者的注意力。
轉移-只在遙控器上保留具有最基本功能的按鈕,將其他控制轉移到電視螢幕上的選單裡,從而將複雜性轉移到電視。
• 刪除 •
刪除的目的在於讓使用者在使用產品時聚焦於產品的核心功能,避免被其他因素所幹擾,增加我們的認知負擔。
那麼哪些東西可以刪除?
1.刪除不必要的功能,讓使用者的注意力放在主要功能的完成上
不必要的功能會降低使用者使用產品時的效率,或許你覺得一個功能沒什麼,當你慢慢進行功能的堆砌時,你會意識到整個產品是多麼的混亂,甚至使用者都不知道這個產品是做什麼的。
2.減少選擇項,降低使用者在使用產品的決策負擔
這裡提供三個可參考策略:
(1)提供一個合適的預設值
(2)刪除不必要的選項
(3)不要在選項中使用專業術語來表達
3.刪除不必要的文字,多餘的文字描述很難讓使用者聚焦於關鍵的資訊上
這裡提供三個可參考的策略:
(1)刪除引見性文字,例如:歡迎光臨我們的網站,我們希望您心情愉快...這些話聽起來不會讓人覺得你口才好,只會讓讀者感到尷尬,刪掉這些文字,開門見山會更適合。
(2)刪除不必要的說明,例如:填寫完這些欄位後,請您點選提交按鈕把申請提交給我們,像這些說明的東西完全可以去掉,因為頁面中的標題以及內容已經足以讓使用者明白我現在是在做什麼。
(3)減少廢話。
4.刪除干擾使用者的視覺元素,當混亂的視覺元素出現在介面上時,會大大增加使用者的認識負擔
這裡提供四個可參考的策略:
(1)使用空白或輕微的背景色來劃分頁面,而不要使用線條,因為使用線條會更多的吸引人的注意力。
(2)如果要使用強調,使用其中一種強調方式就可以,不必又加粗,又放大,又變成紅色。
(3)別使用粗黑線,勻稱,淺色的線更好。
(4)減少元素樣式的變化,例如在使用按鈕樣式時,最好只使用1種按鈕樣式,不要使用3-4種按鈕樣式。
這裡引用一下螞蟻金服設計規範中的一條原則,小編認為是一個很好的總結:“人在處理資訊、學習規程和記憶細節方面的能力是有限的。現實中,人可能還面臨各種中斷和打擾,這些都進一步限制了人的能力。介面中過多的小細節會增加使用者的認知負擔,刪除那些可有可無的功能、多餘的選項、冗餘的文字、花哨的修飾,可以減輕使用者的負擔”。
• 組織 •
組織是簡化設計最常見的一種方式,而且這種方式不用過多投入,只需要按照一些設計原則進行資訊的重新組織就可以簡化設計,這種設計策略不侷限於使用在產品設計中,我們日常中也會遇到,例如:我們平常用的電腦鍵盤、洗衣機的控制面板、計算器的按鈕等等。
1.分塊
以微軟的Word為例,其包含了數百項功能。為了便於管理,他們把這些功能組織到了9個選單中,這些大大小小的功能通過分塊,被組織成了清晰的層次結構,另外,分塊的數量最好能控制在“7加減1”,因為這是人的大腦中瞬間能夠記住的最大數目,不過分塊越少,肯定越好,因為分塊越少,選擇越少,記憶也就越少,使用者負擔越輕。
2.圍繞著行為進行組織
在開始組織之前要先理解使用者的行為,例如人們一般都希望按照某種特定的步驟做事情,打亂這個步驟就會讓使用者感到迷惑,所以要先想,他們想要做什麼,繼而先做什麼,後做什麼。
3.確定清晰的分類標準
在對一組性質相同的產品(例如電商產品的分類)進行分類時,確定清晰的分類標準對使用者非常重要,這樣,使用者才能明確到哪裡可以找到自己想要的東西。
4.按照格式來排序
按照格式(文字、圖片、視訊)來對內容進行排序,例如在豆瓣APP搜尋時,列表的內容會按照小組、電影、影評等進行排序,這也是組織的一種形式。
5.時間與空間
按照時間線來組織資訊是一種簡單又通用的方式,例如相簿,另外也可以按照空間來組織資訊也是一種簡單的方式,例如你要規劃一個酒店的網站,可以按照門崗、前臺、餐廳、會議室、客房等,因為每個人都能夠輕易的記住這些空間。
6.大小和位置
不太重要的介面元素應該小一些;對於相似的元素,要放在一起。
7.感知分層
倫敦地鐵圖包含了13條線300多個站點,為了防止資訊混亂不清,使用了一種名為感知分層的技術,每條線路都用一種不同的顏色表示,人們在無意的狀態下,只會感知自己關心的那條線路的顏色,將其他線路排除在意識之外,儘管各條線路交叉縱橫。
感知分層藉助於顏色很容易實現,除了顏色之外,使用灰色陰影,大小縮放,甚至形狀變化,都可以實現感知分層。
8.色標
色標系統是隨處可見的。例如資料夾、交通訊號燈、儀表盤等,因為顏色是利用了人們的記憶原理,因此使用者能快速理解。
9.期望路徑
在描述使用者的使用路徑時,千萬不要被自己規劃圖中清晰的線條和整潔的佈局所迷惑,多觀察下使用者在做同樣的事情時的路徑。
• 隱藏 •
隱藏也就是將使用頻率較低的功能隱藏的更深,在隱藏之前,我們需要知道哪些功能可以隱藏,哪些不能隱藏,如果這個不清楚的話,反而會降低使用者的體驗。
1.哪些功能可以隱藏
(1)事關細節(例如,對伺服器進行配置或設計電子郵件的簽名)
(2)選項與偏好(例如,修改繪圖應用程式的單位,由英寸改為釐米)
(3)特定於地區的資訊(例如,時間和日期等需要頻繁自動更新的資訊)
2.隱藏的形式
(1)自定義
不太贊成讓使用者根據自己的需求來自定義介面,因為這樣會顯得設計人員懶惰,沒有主見,給使用者自己選擇的權利,聽起來很公平,但是問題在於自定義可能是一件非常耗費時間的問題,因此,自定義並不能解決問題,而且在簡化使用者介面之前,必須對這個軟體的各種各樣的功能瞭如指掌。
(2)自動定製
根據使用者的習慣來自動定製,例如系統會給你一個預設選單,你在使用這個選單時,程式會記住你經常使用的命令,並對選單自動調整,最終只顯示你最常用的的命令,隱藏其他命令,看起來好像簡化了設計,其實也有缺陷,
例如很難保證預設選單的準確性,因為每個人想要的東西都不一樣。
(3)漸進展示
通常,一項功能會包含少數核心的供主流使用者使用的控制元件,另有一些是為專家級使用者準備的擴充套件性的控制元件,隱藏這些擴充套件性的控制元件是保持設計簡單不錯的選擇。
例如,當你點選檔案的“儲存”時,對於主流使用者應該先展示核心選項,如命名、儲存到哪裡,對於專家級使用者,可以單擊擴充套件按鈕,然後找到更高階的選項,如建立新資料夾、希望在儲存之前看看哪個硬碟有空間等。
(4)階段展示
除了在軟體中的某個部分隱藏功能,還可以隨著使用者逐步深入介面而展示相應的功能,例如,使用者一開始可能只會使用簡單的文字框來搜尋,如果找不到自己想要的,還可以通過篩選和排序來尋找。
(5)適時出現
例如你在網頁框選一個英文單詞時,會出現一個問號圖示,點選後會給出該單詞的解釋,這種設計的聰明之處在於它隱藏了功能,並且會在你需要的時候在合適位置上出現該功能。
3.如何做好隱藏
(1)隱藏使用頻率非常低的功能
(2)隱藏專家級選項,但專家使用者必須能夠讓這些選項始終保持可見
(3)不可強迫或寄希望於主流使用者使用自定義功能,不過可以給專家提供這個選項
(4)巧妙的隱藏,就是首先需要徹底隱藏,其次是適時出現
同時對於隱藏,小編建議可以參考以下四象限表格來考慮。
•重要且高頻的功能應該放在顯眼並方便使用的位置
•重要但不高頻的功能應該要適當隱藏
•不重要但高頻的功能可以考慮做到方便使用的位置上面,不需要顯眼
•不重要且低頻的功能需要隱藏得比較深
• 轉移 •
以遙控器為例,只保留最常用的功能,例如播放和暫停,把其他功能轉移到電視的控制選單中去,就可以將複雜性轉移到電視。
1.在不同平臺之間轉移
任何裝置或者平臺都有自己的長處和不足,因此,把某項任務的某些部分(如拍攝)轉移到不同的平臺上可能是一種更好的選擇。
2.使用者最擅長於做什麼
像之前提到不同裝置會有自己的長處和不足,那麼人和裝置之間也會有長處與不足,有些事情是程式擅長的,就讓程式去完成,如果不是,還是需要使用者去完成,所以讓使用者感到簡單設計的一個前提是,要先搞清楚把什麼工作交給計算機,把什麼工作留給使用者。