-
UI設計
(軟件界面設計)
鎖定
好的UI設計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現軟件的定位和特點。
- 中文名
- UI設計
- 外文名
- User Interface Design
- 所屬學科
- 計算機科學
UI設計概念定義
UI其實是一個廣義的概念,《現代漢語詞典》將“界面”定義為:物體與物體之間的接觸面,泛指人和物(人造物、工具、機器)互動過程中的界面(接口)。以車為例,方向盤、儀表盤、中控都屬於用户界面。從字面上看由用户與界面兩個部分組成,但實際上還包括用户與界面之間的交互關係,所以可分為三個方向,用户研究、交互設計、界面設計。
[1]
通過以下三個層面來理解UI的概念。
首先,UI是指人與信息交互的媒介,它是信息產品的功能載體和典型特徵。UI作為系統的可用形式而存在,比如以視覺為主體的界面,強調的是視覺元素的組織和呈現。這是物理表現層的設計,每一款產品或者交互形式都以這種形態出現,包括圖形、圖標( Icon)、色彩、文字設計等,用户通過它們使用系統。在這一層面,UI可以理解為User Interface,即用户界面,這是UI作為人機交互的基礎層面。
[1]
其次,UI是指信息的採集與反饋、輸入與輸出,這是基於界面而產生的人與產品之間的交互行為。在這一層面,Ul以理解為User Interaction,即用户交互,這是界面產生和存在的意義所在。人與非物質產品的交互更多依賴於程序的無形運作來實現,這種與界面匹配的內部運行機制,需要通過界面對功能的隱喻和引導來完成。因此,UI不僅要有精美的視覺表現,也要有方便快捷的操作,以符合用户的認知和行為習慣。
[1]
最後,UI的高級形態可以理解為User Invisible。對用户而言,在這一層面UI是“不可見的”,這並非是指視覺上的不可見,而是讓用户在界面之下與系統自然地交互,沉浸在他們喜歡的內容和操作中,忘記了界面的存在(糟糕的設計則迫使用户注意界面,而非內容)。這需要更多地研究用户心理和用户行為,從用户的角度來進行界面結構、行為、視覺等層面的設計。大數據的背景下,在信息空間中,交互會變得更加自由、自然並無處不在,科學技術、設計理念及多通道界面的發展,直至普適計算界面的出現,用户體驗到的交互是下意識甚至是無意識的。
[1]
UI設計設計原則
原則 | 介紹 |
簡易性 | |
用户語言 | |
記憶負擔最小化 | |
一致性 | |
清楚 | |
用户的熟悉程度 | 用户可通過已掌握的知識來使用界面,但不應超出一般常識。 |
從用户習慣考慮 | 想用户所想,做用户所做。用户總是按照他們自己的方法理解和使用。 |
排列 | |
安全性 | |
靈活性 | |
人性化 |
UI設計設計流程
一確認目標用户
用户交互要考慮到目標用户的不同引起的交互設計重點的不同。
例如:對於科學用户和對於電腦入門用户的設計重點就不同。
二採集目標用户的習慣交互方式
當然還要在此基礎上通過調研分析找到用户希望達到的交互效果,並且以流程確認下來。
三提示和引導用户
對於用户交互的結果和反饋,提示用户結果和反饋信息,引導用户進行用户需要的下一步操作。
軟件中往往存在多個組成部分(組件、元素)。不同組成部分之間的交互設計目標需要一致。
例如:如果以電腦操作初級用户作為目標用户,以簡化界面邏輯為設計目標,那麼該目標需要貫徹軟件(軟件包)整體,而不是局部。
交互元素的外觀往往影響用户的交互效果。同一個(類)軟件採用一致風格的外觀,對於保持用户焦點,改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統一的衡量方法。因此需要對目標用户進行調查取得反饋。
交互行為一致
例如:所有需要用户確認操作的對話框都至少包含確認和放棄兩個按鈕。
五可用性原則
可理解
如果不能為用户理解,那麼需要提供一種非破壞性的途徑,使得用户可以通過對該元素的操作,理解其對應的功能。
可達到
用户是交互的中心,交互元素對應用户需要的功能。因此交互元素必須可以被用户控制。
要注意的是交互的次數會影響可達到的效果。當一個功能被深深隱藏(一般來説超過4層)那麼用户達到該元素的幾率就大大降低了。
可控制
軟件的交互流程,用户可以控制。
功能的執行流程,用户可以控制。
UI設計設計方向
UI是用户界面,是英文User和interface的縮寫。從字面上看是用户與界面2個組成部分,但實際上還包括用户與界面之間的交互關係,所以這樣可分為3個方向,他們分別是:用户研究、交互設計、界面設計。
UI設計用户研究
用户研究包含兩個方面:
一是可用性工程學(usability Engineering),研究如何提高產品的可用性,使得系統的設計更容易被人使用、學習和記憶;
二是通過可用性工程學研究,發掘用户的潛在需求,為技術創新提供另外一條思路和方法。
用户研究通過對於用户的工作環境、產品的使用習慣等研究,使得在產品開發的前期能夠把用户對於產品功能的期望、對設計和外觀方面的要求融入到產品的開發過程中去,從而幫助企業完善產品設計或者探索一個新產品概念。
他是得到用户需求和反饋的途徑,也是檢驗界面與交互設計是否合理的重要標準。
UI設計交互設計
這部分指人與機之間的交互工程,在過去交互設計也由程序員來做,其實程序員擅長編碼,而不善於與最終用户交互。所以,很多的軟件雖然功能比較齊全,但是交互方面設計很粗糙,繁瑣難用,學習困難。使用這樣的軟件後,不是使人聰明與進步而是讓人感到愚弄與羞辱。許多人因為不能操作電腦軟件而下崗失業,這樣的交互使電腦成為讓人恐懼的科技怪獸。於是把交互設計從程序員的工作中分離出來單獨成為一個學科,也就是人機交互設計。他的目的在於加強軟件的易用、易學、易理解,使計算機真正成為方便地為人類服務的工具。
UI設計界面設計
在漫長的軟件發展中,界面設計工作一直沒有被重視起來。做界面設計的人也被貶義的稱為“美工”。其實軟件界面設計就像工業產品中的工業造型設計一樣,是產品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受,拉近人與電腦的距離,為商家創造賣點。界面設計不是單純的美術繪畫,他需要定位使用者、使用環境、使用方式並且為最終用户而設計,是純粹的科學性的藝術設計。檢驗一個界面的標準即不是某個項目開發組領導的意見也不是項目成員投票的結果,而是最終用户的感受。所以界面設計要和用户研究緊密結合,是一個不斷為最終用户設計滿意視覺效果的過程。
UI設計設計規範
一致性原則
- 字體-保持字體及顏色一致,避免一套主題出現多個字體;-不可修改的字段,統一用灰色文字顯示。
- 對齊-保持頁面內元素對齊方式的一致,如無特殊情況應避免同一頁面出現多種數據對齊方式。
- 表單錄入-在包含必須與選填的頁面中,必須在必填項旁邊給出醒目標識(*);-各類型數據輸入需限制文本類型,並做格式校驗如電話號碼輸入只允許輸入數字、郵箱地址需要包含“@”等,在用户輸入有誤時給出明確提示。
- 鼠標手勢-可點擊的按鈕、鏈接需要切換鼠標手勢至手型;
- 保持功能及內容描述一致-避免同一功能描述使用多個詞彙,如編輯和修改,新增和增加,刪除和清除混用等。建議在項目開發階段建立一個產品詞典,包括產品中常用術語及描述,設計或開發人員嚴格按照產品詞典中的術語詞彙來展示文字信息。
準確性原則
使用一致的標記、標準縮寫和顏色,顯示信息的含義應該非常明確,用户不必再參考其它信息源。
- 顯示有意義的出錯信息,而不是單純的程序錯誤代碼。
- 避免使用文本輸入框來放置不可編輯的文字內容,不要將文本輸入框當成標籤使用。
- 使用縮進和文本來輔助理解。
- 使用用户語言詞彙,而不是單純的專業計算機術語。
- 高效地使用顯示器的顯示空間,但要避免空間過於擁擠。
- 保持語言的一致性,如“確定”對應“取消”、“是”對應“否”。
可讀性原則
- 文字長度
文字的長度,特別是在大塊空白的設計中很重要,太長會導致眼睛疲憊,閲讀困難。太短又經常會造成尷尬的斷裂效果,斷字的使用也會造成大量的複合詞,這些斷裂嚴重的影響了閲讀的流暢性。
- 空間和對比度
每個字符同線路長度,間距也是重要的。所以每個字符之間的空間至少等於字符的尺寸,大多數數字設計人員習慣選擇一個最小的文字大小的150%為空間距離,這就可以留下足夠的空間。當每一行中讀取大段的文字,且線路長度過多或線之間的空間太少,都會造成理解困難。
- 對齊方式
無論是在文本中心,還是偏左,或者是沿着一個文件的右側對齊,文本的對齊相當重要,可以極大地影響可讀性。一般而言,文本習慣向左對齊,因為它反映了閲讀方式 – 從左至右。熟悉每一行開始和結束的地方。
佈局合理化原則
在進行設計時需要充分考慮佈局的合理化問題,遵循用户從上而下,自左向右瀏覽、操作習慣,避免常用業務功能按鍵排列過於分散,以造成用户鼠標移動距離過長的弊端。多做“減法”運算,將不常用的功能區塊隱藏,以保持界面的簡潔,使用户專注於主要業務操作流程,有利於提高軟件的易用性及可用性。
- 菜單 -保持菜單簡潔性及分類的準確性,避免菜單深度超過3層。 -菜單中功能是需要打開一個新頁面來完成的,需要在菜單名字後面加上“…”。【只適用於C/S架構,B/S請無視】。
- 按鈕 確認操作按鈕放置左邊,取消或關閉按鈕放置於右邊。
- 功能 -未完成功能必須隱藏處理,不要置於頁面內容中,以免引起誤會。
- 排版 -所有文字內容排版避免貼邊顯示(頁面邊緣),儘量保持10~20像素的間距並在垂直方向上居中對齊;各控件元素間也保持至少10像素以上的間距,並確保控件元素不緊貼於頁面邊沿。
- 表格數據列表 -字符型數據保持左對齊,數值型右對齊(方便閲讀對比),並根據字段要求,統一顯示小數位位數。
- 滾動條 -頁面佈局設計時應避免出現橫向滾動條。
- 頁面導航(麪包屑導航) -在頁面顯眼位置應該出現麪包屑導航欄,讓用户知道當前所在頁面的位置,並明確導航結構,如:首頁>新聞中心>歐科智能招商服務平台正式發佈,其中帶下劃線部分為可點擊鏈接。
- 信息提示窗口 -信息提示窗口應位於當前頁面的居中位置,並適當弱化背景層以減少信息干擾,讓用户把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。
系統操作合理性原則
- 查詢檢索類頁面,在查詢條件輸入框內按回車應該自動觸發查詢操作。
- 在進行一些不可逆或者刪除操作時應該有信息提示用户,並讓用户確認是否繼續操作,必要時應該把操作造成的後果也告訴用户。
- 避免使用鼠標雙擊動作,不僅會增加用户操作難度,還可能會引起用户誤會,認為功能點擊無效。
- 表單錄入頁面,需要把輸入焦點定位到第一個輸入項。用户通過Tab鍵可以在輸入框或操作按鈕間切換,並注意Tab的操作應該遵循從左向右、從上而下的順序。
系統響應時間原則
- 2~5秒窗口顯示處理信息提示,避免用户誤認為沒響應而重複操作;
- 5秒以上顯示處理窗口,或顯示進度條;
一個長時間的處理完成時應給予完成警告信息。