複製鏈接
請複製以下鏈接發送給好友

UI設計

(軟件界面設計)

鎖定
UI設計(或稱界面設計)是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。UI設計分為實體UI和虛擬UI,互聯網常用的UI設計是虛擬UI,UI即User Interface(用户界面)的簡稱。
好的UI設計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現軟件的定位和特點。
中文名
UI設計
外文名
User Interface Design
所屬學科
計算機科學
應用行業
移動互聯網
主要職業
GUI/WUI/UX/UE/VI設計師
應用領域
軟件,遊戲開發,網頁設計製作
主要工具
PsAiAxureAeHTML/CSS

UI設計概念定義

UI其實是一個廣義的概念,《現代漢語詞典》將“界面”定義為:物體與物體之間的接觸面,泛指人和物(人造物、工具、機器)互動過程中的界面(接口)。以車為例,方向盤、儀表盤、中控都屬於用户界面。從字面上看由用户與界面兩個部分組成,但實際上還包括用户與界面之間的交互關係,所以可分為三個方向,用户研究、交互設計、界面設計。 [1] 
通常意義上,UI是User Interface的縮寫。其中,“Interface”前綴“Inter”的意思是“在一起、交互”,而翻譯成中文“界面”之後, “交互”的概念沒能得到體現。 [1] 
通過以下三個層面來理解UI的概念。
首先,UI是指人與信息交互的媒介,它是信息產品的功能載體和典型特徵。UI作為系統的可用形式而存在,比如以視覺為主體的界面,強調的是視覺元素的組織和呈現。這是物理表現層的設計,每一款產品或者交互形式都以這種形態出現,包括圖形、圖標( Icon)、色彩文字設計等,用户通過它們使用系統。在這一層面,UI可以理解為User Interface,即用户界面,這是UI作為人機交互的基礎層面。 [1] 
其次,UI是指信息的採集與反饋、輸入與輸出,這是基於界面而產生的人與產品之間的交互行為。在這一層面,Ul以理解為User Interaction,即用户交互,這是界面產生和存在的意義所在。人與非物質產品的交互更多依賴於程序的無形運作來實現,這種與界面匹配的內部運行機制,需要通過界面對功能的隱喻和引導來完成。因此,UI不僅要有精美的視覺表現,也要有方便快捷的操作,以符合用户的認知和行為習慣。 [1] 
最後,UI的高級形態可以理解為User Invisible。對用户而言,在這一層面UI是“不可見的”,這並非是指視覺上的不可見,而是讓用户在界面之下與系統自然地交互,沉浸在他們喜歡的內容和操作中,忘記了界面的存在(糟糕的設計則迫使用户注意界面,而非內容)。這需要更多地研究用户心理和用户行為,從用户的角度來進行界面結構、行為、視覺等層面的設計。大數據的背景下,在信息空間中,交互會變得更加自由、自然並無處不在,科學技術、設計理念及多通道界面的發展,直至普適計算界面的出現,用户體驗到的交互是下意識甚至是無意識的。 [1] 
綜上所述UI設計師就是:軟件圖形設計師、交互設計師、用户研究工程師。

UI設計設計原則

原則
介紹
簡易性
界面的簡潔是要讓用户便於使用、便於瞭解產品,並能減少用户發生錯誤選擇的可能性。 [2] 
用户語言
界面中要使用能反映用户本身的語言,而不是遊戲設計者的語言。 [2] 
記憶負擔最小化
人腦不是電腦,在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定,24小時內存在約25%的遺忘率。所以對用户來説,瀏覽信息要比記憶更容易。 [2] 
一致性
它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致,風格必須與產品內容相一致。 [2] 
清楚
在視覺效果上便於理解和使用。 [2] 
用户的熟悉程度
用户可通過已掌握的知識來使用界面,但不應超出一般常識。
從用户習慣考慮
想用户所想,做用户所做。用户總是按照他們自己的方法理解和使用。
通過比較兩個不同世界(真實與虛擬)的事物,完成更好的設計。如:書籍對比竹簡。 [2] 
排列
一個有序的界面能讓用户輕鬆的使用。 [2] 
安全性
用户能自由的作出選擇,且所有選擇都是可逆的。在用户作出危險的選擇時有信息介入系統的提示。 [2] 
靈活性
簡單來説就是要讓用户方便的使用,但不同於上述。即互動多重性,不侷限於單一的工具(包括鼠標鍵盤手柄界面)。 [2] 
人性化
高效率和用户滿意度是人性化的體現。應具備專家級和初級玩家系統,即用户可依據自己的習慣定製界面,並能保存設置。 [2] 

UI設計設計流程

一確認目標用户
在UI設計過程中,需求設計角色會確定軟件的目標用户,獲取最終用户和直接用户的需求。 [3] 
用户交互要考慮到目標用户的不同引起的交互設計重點的不同。
例如:對於科學用户和對於電腦入門用户的設計重點就不同。
二採集目標用户的習慣交互方式
不同類型的目標用户有不同的交互習慣。這種習慣的交互方式往往來源於其原有的針對現實的交互流程、已有軟件工具的交互流程。 [3] 
當然還要在此基礎上通過調研分析找到用户希望達到的交互效果,並且以流程確認下來。
三提示和引導用户
軟件是用户的工具。因此應該由用户來操作和控制軟件。軟件響應用户的動作和設定的規則。 [3] 
對於用户交互的結果和反饋,提示用户結果和反饋信息,引導用户進行用户需要的下一步操作。
設計目標一致 [3] 
軟件中往往存在多個組成部分(組件、元素)。不同組成部分之間的交互設計目標需要一致。
例如:如果以電腦操作初級用户作為目標用户,以簡化界面邏輯為設計目標,那麼該目標需要貫徹軟件(軟件包)整體,而不是局部。
元素外觀一致 [3] 
交互元素的外觀往往影響用户的交互效果。同一個(類)軟件採用一致風格的外觀,對於保持用户焦點,改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統一的衡量方法。因此需要對目標用户進行調查取得反饋。
交互行為一致
在交互模型中,不同類型的元素用户觸發其對應的行為事件後,其交互行為需要一致。 [3] 
例如:所有需要用户確認操作的對話框都至少包含確認和放棄兩個按鈕。
對於交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是可以看到這個理念雖然在大部分情況下正確,但是的確有相反的例子證明不按照這個理念設計,會更加簡化用户操作流程。 [3] 
五可用性原則
可理解
軟件要為用户使用,用户必須可以理解軟件各元素對應的功能。 [3] 
如果不能為用户理解,那麼需要提供一種非破壞性的途徑,使得用户可以通過對該元素的操作,理解其對應的功能。
比如:刪除操作元素。用户可以點擊刪除操作按鈕,提示用户如何刪除操作或者是否確認刪除操作,用户可以更加詳細的理解該元素對應的功能,同時可以取消該操作。 [3] 
可達到
用户是交互的中心,交互元素對應用户需要的功能。因此交互元素必須可以被用户控制。
用户可以用諸如鍵盤、鼠標之類的交互設備通過移動和觸發已有的交互元素達到其它在此之前不可見或者不可交互的交互元素。 [3] 
要注意的是交互的次數會影響可達到的效果。當一個功能被深深隱藏(一般來説超過4層)那麼用户達到該元素的幾率就大大降低了。
可達到的效果也同界面設計有關。過於複雜的界面會影響可達到的效果。 [3] 
可控制
軟件的交互流程,用户可以控制。
功能的執行流程,用户可以控制。
如果確實無法提供控制,則用能為目標用户理解的方式提示用户。 [3] 

UI設計設計方向

UI是用户界面,是英文User和interface的縮寫。從字面上看是用户與界面2個組成部分,但實際上還包括用户與界面之間的交互關係,所以這樣可分為3個方向,他們分別是:用户研究、交互設計、界面設計。

UI設計用户研究

用户研究包含兩個方面:
一是可用性工程學(usability Engineering),研究如何提高產品的可用性,使得系統的設計更容易被人使用、學習和記憶;
二是通過可用性工程學研究,發掘用户的潛在需求,為技術創新提供另外一條思路和方法。
用户研究是一個跨學科的專業,涉及可用性工程學、人類功效學、心理學、市場研究學、教育學設計學等等學科。用户研究技術是站在人文學科的角度來研究產品,站在用户的角度介入到產品的開發和設計中。
用户研究通過對於用户的工作環境、產品的使用習慣等研究,使得在產品開發的前期能夠把用户對於產品功能的期望、對設計和外觀方面的要求融入到產品的開發過程中去,從而幫助企業完善產品設計或者探索一個新產品概念。
他是得到用户需求和反饋的途徑,也是檢驗界面與交互設計是否合理的重要標準。

UI設計交互設計

這部分指人與機之間的交互工程,在過去交互設計也由程序員來做,其實程序員擅長編碼,而不善於與最終用户交互。所以,很多的軟件雖然功能比較齊全,但是交互方面設計很粗糙,繁瑣難用,學習困難。使用這樣的軟件後,不是使人聰明與進步而是讓人感到愚弄與羞辱。許多人因為不能操作電腦軟件而下崗失業,這樣的交互使電腦成為讓人恐懼的科技怪獸。於是把交互設計從程序員的工作中分離出來單獨成為一個學科,也就是人機交互設計。他的目的在於加強軟件的易用、易學、易理解,使計算機真正成為方便地為人類服務的工具。

UI設計界面設計

在漫長的軟件發展中,界面設計工作一直沒有被重視起來。做界面設計的人也被貶義的稱為“美工”。其實軟件界面設計就像工業產品中的工業造型設計一樣,是產品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受,拉近人與電腦的距離,為商家創造賣點。界面設計不是單純的美術繪畫,他需要定位使用者、使用環境、使用方式並且為最終用户而設計,是純粹的科學性的藝術設計。檢驗一個界面的標準即不是某個項目開發組領導的意見也不是項目成員投票的結果,而是最終用户的感受。所以界面設計要和用户研究緊密結合,是一個不斷為最終用户設計滿意視覺效果的過程。

UI設計設計規範

一致性原則
堅持以用户體驗為中心設計原則,界面直觀、簡潔,操作方便快捷,用户接觸軟件後對界面上對應的功能一目瞭然、不需要太多培訓就可以方便使用本應用系統。 [4] 
  • 字體-保持字體及顏色一致,避免一套主題出現多個字體;-不可修改的字段,統一用灰色文字顯示。
  • 對齊-保持頁面內元素對齊方式的一致,如無特殊情況應避免同一頁面出現多種數據對齊方式。
  • 表單錄入-在包含必須與選填的頁面中,必須在必填項旁邊給出醒目標識(*);-各類型數據輸入需限制文本類型,並做格式校驗如電話號碼輸入只允許輸入數字、郵箱地址需要包含“@”等,在用户輸入有誤時給出明確提示。
  • 鼠標手勢-可點擊的按鈕、鏈接需要切換鼠標手勢至手型;
  • 保持功能及內容描述一致-避免同一功能描述使用多個詞彙,如編輯和修改,新增和增加,刪除和清除混用等。建議在項目開發階段建立一個產品詞典,包括產品中常用術語及描述,設計或開發人員嚴格按照產品詞典中的術語詞彙來展示文字信息。
準確性原則
使用一致的標記、標準縮寫和顏色,顯示信息的含義應該非常明確,用户不必再參考其它信息源。
  • 顯示有意義的出錯信息,而不是單純的程序錯誤代碼。
  • 避免使用文本輸入框來放置不可編輯的文字內容,不要將文本輸入框當成標籤使用。
  • 使用縮進和文本來輔助理解。
  • 使用用户語言詞彙,而不是單純的專業計算機術語。
  • 高效地使用顯示器的顯示空間,但要避免空間過於擁擠。
  • 保持語言的一致性,如“確定”對應“取消”、“是”對應“否”。
可讀性原則
  • 文字長度
文字的長度,特別是在大塊空白的設計中很重要,太長會導致眼睛疲憊,閲讀困難。太短又經常會造成尷尬的斷裂效果,斷字的使用也會造成大量的複合詞,這些斷裂嚴重的影響了閲讀的流暢性。
  • 空間和對比度
每個字符同線路長度,間距也是重要的。所以每個字符之間的空間至少等於字符的尺寸,大多數數字設計人員習慣選擇一個最小的文字大小的150%為空間距離,這就可以留下足夠的空間。當每一行中讀取大段的文字,且線路長度過多或線之間的空間太少,都會造成理解困難。
  • 對齊方式
無論是在文本中心,還是偏左,或者是沿着一個文件的右側對齊,文本的對齊相當重要,可以極大地影響可讀性。一般而言,文本習慣向左對齊,因為它反映了閲讀方式 – 從左至右。熟悉每一行開始和結束的地方。
佈局合理化原則
在進行設計時需要充分考慮佈局的合理化問題,遵循用户從上而下,自左向右瀏覽、操作習慣,避免常用業務功能按鍵排列過於分散,以造成用户鼠標移動距離過長的弊端。多做“減法”運算,將不常用的功能區塊隱藏,以保持界面的簡潔,使用户專注於主要業務操作流程,有利於提高軟件的易用性及可用性。
  • 菜單  -保持菜單簡潔性及分類的準確性,避免菜單深度超過3層。  -菜單中功能是需要打開一個新頁面來完成的,需要在菜單名字後面加上“…”。【只適用於C/S架構,B/S請無視】。
  • 按鈕  確認操作按鈕放置左邊,取消或關閉按鈕放置於右邊。
  • 功能  -未完成功能必須隱藏處理,不要置於頁面內容中,以免引起誤會。
  • 排版  -所有文字內容排版避免貼邊顯示(頁面邊緣),儘量保持10~20像素的間距並在垂直方向上居中對齊;各控件元素間也保持至少10像素以上的間距,並確保控件元素不緊貼於頁面邊沿。
  • 表格數據列表  -字符型數據保持左對齊,數值型右對齊(方便閲讀對比),並根據字段要求,統一顯示小數位位數。
  • 滾動條  -頁面佈局設計時應避免出現橫向滾動條
  • 頁面導航(麪包屑導航)  -在頁面顯眼位置應該出現麪包屑導航欄,讓用户知道當前所在頁面的位置,並明確導航結構,如:首頁>新聞中心>歐科智能招商服務平台正式發佈,其中帶下劃線部分為可點擊鏈接。
  • 信息提示窗口  -信息提示窗口應位於當前頁面的居中位置,並適當弱化背景層以減少信息干擾,讓用户把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。
系統操作合理性原則
  • 儘量確保用户在不使用鼠標(只使用鍵盤)的情況下也可以流暢地完成一些常用的業務操作,各控件間可以通過Tab鍵進行切換,並將可編輯的文本全選處理。
  • 查詢檢索類頁面,在查詢條件輸入框內按回車應該自動觸發查詢操作。
  • 在進行一些不可逆或者刪除操作時應該有信息提示用户,並讓用户確認是否繼續操作,必要時應該把操作造成的後果也告訴用户。
  • 信息提示窗口的“確認”及“取消”按鈕需要分別映射鍵盤按鍵“Enter”和“ESC”。
  • 避免使用鼠標雙擊動作,不僅會增加用户操作難度,還可能會引起用户誤會,認為功能點擊無效。
  • 表單錄入頁面,需要把輸入焦點定位到第一個輸入項。用户通過Tab鍵可以在輸入框或操作按鈕間切換,並注意Tab的操作應該遵循從左向右、從上而下的順序。
系統響應時間原則
系統響應時間應該適中,響應時間過長,用户就會感到不安和沮喪,而響應時間過快也會影響到用户的操作節奏,並可能導致錯誤。因此在系統響應時間上堅持如下原則:
  • 2~5秒窗口顯示處理信息提示,避免用户誤認為沒響應而重複操作;
  • 5秒以上顯示處理窗口,或顯示進度條;
一個長時間的處理完成時應給予完成警告信息。
參考資料
  • 1.    張劍,李曼丹.UI設計與製作=UI DESIGN AND PRODUCTION:西南師範大學出版社,2015.09:第6頁
  • 2.    黃岩.UI設計與製作:上海人民美術出版社,2016.01:第12頁
  • 3.    羅仕鑑,龔蓉蓉,朱上上. 面向用户體驗的手持移動設備軟件界面設計. 《 計算機輔助設計與圖形學學報 》 , 2010
  • 4.    楊明朗,王紅. 人機交互界面設計中的感性分析. 《 包裝工程 》 , 2007