操作方法
01
軟體使用者介面設計在工作流程上分為結構設計、互動設計、視覺設計三個部分:
一、結構設計(Structure Design)
結構設計也稱概念設計 (Conceptual
Design),是介面設計的骨架。透過對使用者研究和任務分析,制定出產品的整體架構。基於紙質的的低保真原型(Paper
Prototype)可提供使用者測試並進行完善。在結構設計中,目錄體系的邏輯分類和語詞定義是使用者易於理解和操作的重要前提。如西門子手機的設定鬧鐘的
詞條是“重要記事”,讓使用者很難找到。
二、互動設計(Interactive Design)
互動設計的目的是使產品讓使用者能簡單使用。任何產品功能的實現都是透過人和機器的互動來完成的。因此,人的因素應作為設計的核心被體現出來。互動設計的原則如下:
1)有清楚的錯誤提示。誤操作後,系統提供有針對性的提示。
2)讓使用者控制介面。“下一步”、“完成”,面對不同層次提供多種選擇,給不同層次的使用者提供多種可能性。
3)允許兼用滑鼠和鍵盤。同一種功能,同時可以用滑鼠和鍵盤。提供多種可能性。
4)允許工作中斷。例如用手機寫新簡訊的時候,收到簡訊或電話,完成後回來仍能夠找到剛才正寫的新簡訊。
5)使用使用者的語言,而非技術的語言。
6)提供快速反饋。給使用者心理上的暗示,避免使用者焦急。
7)方便退出,如手機的退出,是按一個鍵完全退出,還是一層一層的退出。提供兩種可能性。
8)導航功能。隨時轉移功能,很容易從一個功能跳到另外一個功能。
三、視覺設計(Visual Design)
在結構設計的基礎上,參照目標群體的心理模型和任務達成進行視覺設計。包括色彩、字型、頁面等。視覺設計要達到使用者愉悅使用的目的。視覺設計的原則如下:
1)介面清晰明瞭。允許使用者定製介面。
2)減少短期記憶的負擔。讓計算機幫助記憶,例:User Name,、Password、IE進入介面地址可以讓機器記住。
3)依賴認知而非記憶。如列印圖示的記憶、下拉選單列表中的選擇。
4)提供視覺線索。圖形符號的視覺的刺激;GUI(圖形介面設計):Where, What, Next Step。
5)提供預設(default)、撤銷(undo)、恢復(redo)的功能
6)提供介面的快捷方式。
7)儘量使用真實世界的比喻。如:電話、印表機的圖示設計,尊重使用者以往的使用經驗。
8)完善視覺的清晰度。條理清晰;圖片、文字的佈局和隱喻不要讓使用者去猜。
10)同樣功能用同樣的圖形。
11)色彩與內容。整體軟體不超過5個色系,儘量少用紅色、綠色。近似的顏色表示近似的意思。
當然,要著手開發一個軟體使用者介面,遠遠不止這三步,在進行開發之前還需要進行需求分析、方案驗證等前期工作,而作為UI設計師,這三步則是最核心也是最關鍵的工作。
操作方法
01
軟體使用者介面設計在工作流程上分為結構設計、互動設計、視覺設計三個部分:
一、結構設計(Structure Design)
結構設計也稱概念設計 (Conceptual
Design),是介面設計的骨架。透過對使用者研究和任務分析,制定出產品的整體架構。基於紙質的的低保真原型(Paper
Prototype)可提供使用者測試並進行完善。在結構設計中,目錄體系的邏輯分類和語詞定義是使用者易於理解和操作的重要前提。如西門子手機的設定鬧鐘的
詞條是“重要記事”,讓使用者很難找到。
二、互動設計(Interactive Design)
互動設計的目的是使產品讓使用者能簡單使用。任何產品功能的實現都是透過人和機器的互動來完成的。因此,人的因素應作為設計的核心被體現出來。互動設計的原則如下:
1)有清楚的錯誤提示。誤操作後,系統提供有針對性的提示。
2)讓使用者控制介面。“下一步”、“完成”,面對不同層次提供多種選擇,給不同層次的使用者提供多種可能性。
3)允許兼用滑鼠和鍵盤。同一種功能,同時可以用滑鼠和鍵盤。提供多種可能性。
4)允許工作中斷。例如用手機寫新簡訊的時候,收到簡訊或電話,完成後回來仍能夠找到剛才正寫的新簡訊。
5)使用使用者的語言,而非技術的語言。
6)提供快速反饋。給使用者心理上的暗示,避免使用者焦急。
7)方便退出,如手機的退出,是按一個鍵完全退出,還是一層一層的退出。提供兩種可能性。
8)導航功能。隨時轉移功能,很容易從一個功能跳到另外一個功能。
三、視覺設計(Visual Design)
在結構設計的基礎上,參照目標群體的心理模型和任務達成進行視覺設計。包括色彩、字型、頁面等。視覺設計要達到使用者愉悅使用的目的。視覺設計的原則如下:
1)介面清晰明瞭。允許使用者定製介面。
2)減少短期記憶的負擔。讓計算機幫助記憶,例:User Name,、Password、IE進入介面地址可以讓機器記住。
3)依賴認知而非記憶。如列印圖示的記憶、下拉選單列表中的選擇。
4)提供視覺線索。圖形符號的視覺的刺激;GUI(圖形介面設計):Where, What, Next Step。
5)提供預設(default)、撤銷(undo)、恢復(redo)的功能
6)提供介面的快捷方式。
7)儘量使用真實世界的比喻。如:電話、印表機的圖示設計,尊重使用者以往的使用經驗。
8)完善視覺的清晰度。條理清晰;圖片、文字的佈局和隱喻不要讓使用者去猜。
10)同樣功能用同樣的圖形。
11)色彩與內容。整體軟體不超過5個色系,儘量少用紅色、綠色。近似的顏色表示近似的意思。
當然,要著手開發一個軟體使用者介面,遠遠不止這三步,在進行開發之前還需要進行需求分析、方案驗證等前期工作,而作為UI設計師,這三步則是最核心也是最關鍵的工作。