UI設(shè)計（或稱界面設(shè)計）是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。UI設(shè)計分為實體UI和虛擬UI，互聯(lián)網(wǎng)常用的UI設(shè)計是虛擬UI，UI即User Interface(用戶界面)的簡稱。

好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。

中文名UI設(shè)計外文名User Interface Design應(yīng)用行業(yè)移動互聯(lián)網(wǎng)主要職業(yè)GUI/WUI/UX/UE/VI設(shè)計師應(yīng)用領(lǐng)域軟件，游戲開發(fā)，網(wǎng)頁設(shè)計制作主要工具Ps、Ai、Axure、Ae、HTML/CSS等

目錄

1 概念定義

2 就業(yè)前景

3 設(shè)計原則

4 設(shè)計流程

5 設(shè)計方向

? 用戶研究

? 交互設(shè)計

? 界面設(shè)計

6 設(shè)計規(guī)范

? 一致性原則

? 準(zhǔn)確性原則

? 可讀性原則

? 布局合理化原則

? 系統(tǒng)操作合理性原則

? 系統(tǒng)響應(yīng)時間原則

概念定義編輯 語音

UI其實是一個廣義的概念，《現(xiàn)代漢語詞典》將“界面”定義為：物體與物體之間的接觸面，泛指人和物（人造物、工具、機器）互動過程中的界面（接口）。以車為例，方向盤、儀表盤、中控都屬于用戶界面。從字面上看由用戶與界面兩個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系，所以可分為三個方向：用戶研究、交互設(shè)計、界面設(shè)計。 [1] 

通常意義上，UI是User Interface的縮寫。其中，“Interface”前綴“Inter”的意思是“在一起、交互”，而翻譯成中文“界面”之后， “交互”的概念沒能得到體現(xiàn)。 [1] 

通過以下三個層面來理解UI的概念。

首先，UI是指人與信息交互的媒介，它是信息產(chǎn)品的功能載體和典型特征。UI作為系統(tǒng)的可用形式而存在，比如以視覺為主體的界面，強調(diào)的是視覺元素的組織和呈現(xiàn)。這是物理表現(xiàn)層的設(shè)計，每一款產(chǎn)品或者交互形式都以這種形態(tài)出現(xiàn)，包括圖形、圖標(biāo)( Icon)、色彩、文字設(shè)計等，用戶通過它們使用系統(tǒng)。在這一層面，UI可以理解為User Interface，即用戶界面，這是UI作為人機交互的基礎(chǔ)層面。 [1] 

其次，UI是指信息的采集與反饋、輸入與輸出，這是基于界面而產(chǎn)生的人與產(chǎn)品之間的交互行為。在這一層面，UlbJ以理解為User Interaction，即用戶交互，這是界面產(chǎn)生和存在的意義所在。人與非物質(zhì)產(chǎn)品的交互更多依賴于程序的無形運作來實現(xiàn)，這種與界面匹配的內(nèi)部運行機制，需要通過界面對功能的隱喻和引導(dǎo)來完成。因此，UI不僅要有精美的視覺表現(xiàn)，也要有方便快捷的操作，以符合用戶的認(rèn)知和行為習(xí)慣。 [1] 

最后，UI的高級形態(tài)可以理解為User Invisible。對用戶而言，在這一層面UI是“不可見的”，這并非是指視覺上的不可見，而是讓用戶在界面之下與系統(tǒng)自然地交互，沉浸在他們喜歡的內(nèi)容和操作中，忘記了界面的存在（糟糕的設(shè)計則迫使用戶注意界面，而非內(nèi)容）。這需要更多地研究用戶心理和用戶行為，從用戶的角度來進行界面結(jié)構(gòu)、行為、視覺等層面的設(shè)計。大數(shù)據(jù)的背景下，在信息空間中，交互會變得更加自由、自然并無處不在，科學(xué)技術(shù)、設(shè)計理念及多通道界面的發(fā)展，直至普適計算界面的出現(xiàn)，用戶體驗到的交互是下意識甚至是無意識的。 [1] 

用戶研究工程師一般是心理學(xué)人文學(xué)背景比較合適。

綜上所述UI設(shè)計師就是：軟件圖形設(shè)計師、交互設(shè)計師、用戶研究工程師。

就業(yè)前景編輯 語音

UI即用戶界面設(shè)計行業(yè)剛剛在全球軟件業(yè)興起，屬于高薪技術(shù)設(shè)計產(chǎn)業(yè)，與國外在同步發(fā)展水平。其次國內(nèi)外眾多大型IT企業(yè)(例如：百度、騰訊、Yahoo、中國移動、Nokia、聯(lián)想、網(wǎng)易、微軟、盛大、淘寶等眾多企業(yè))均已成立專業(yè)的UI設(shè)計部門，但專業(yè)人才稀缺，人才資源爭奪激烈。就業(yè)市場供不應(yīng)求。如今，國內(nèi)的UI設(shè)計日益發(fā)展，隨著杭州高端段位培訓(xùn)機構(gòu)的出現(xiàn)，ui設(shè)計行業(yè)備受關(guān)注。但總的來說，在這一領(lǐng)域，與西方發(fā)達國家間的差距仍是顯而易見的。軟件領(lǐng)域不像物質(zhì)產(chǎn)品那樣，存在工藝、材料上的限制，其核心問題恰在于人。因此，提高軟件UI設(shè)計師的個人能力，真正提升軟件產(chǎn)品的人性化程度，已成為中國UI發(fā)展的重中之重。

設(shè)計原則編輯 語音

1.簡易性

界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。 [2] 

2.用戶語言

界面中要使用能反映用戶本身的語言，而不是游戲設(shè)計者的語言。 [2] 

3.記憶負(fù)擔(dān)最小化

人腦不是電腦，在設(shè)計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩(wěn)定，24小時內(nèi)存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。 [2] 

4.一致性

它是每一個優(yōu)秀界面都具備的特點。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與產(chǎn)品內(nèi)容相一致。 [2] 

5.清楚

在視覺效果上便于理解和使用。 [2] 

6.用戶的熟悉程度

用戶可通過已掌握的知識來使用界面，但不應(yīng)超出一般常識。

7.從用戶習(xí)慣考慮

想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設(shè)計。如：書籍對比竹簡。 [2] 

8.排列

一個有序的界面能讓用戶輕松的使用。 [2] 

9.安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。 [2] 

10.靈活性

簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。 [2] 

11.人性化

高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。 [2] 

設(shè)計流程編輯 語音

一、確認(rèn)目標(biāo)用戶

在UI設(shè)計過程中，需求設(shè)計角色會確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。 [3] 

用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計重點的不同。

例如：對于科學(xué)用戶和對于電腦入門用戶的設(shè)計重點就不同。

二、采集目標(biāo)用戶的習(xí)慣交互方式

不同類型的目標(biāo)用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來源于其原有的針對現(xiàn)實的交互流程、已有軟件工具的交互流程。 [3] 

當(dāng)然還要在此基礎(chǔ)上通過調(diào)研分析找到用戶希望達到的交互效果，并且以流程確認(rèn)下來。

三、提示和引導(dǎo)用戶

軟件是用戶的工具。因此應(yīng)該由用戶來操作和控制軟件。軟件響應(yīng)用戶的動作和設(shè)定的規(guī)則。 [3] 

對于用戶交互的結(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導(dǎo)用戶進行用戶需要的下一步操作。

四、一致性原則

設(shè)計目標(biāo)一致 [3] 

軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設(shè)計目標(biāo)需要一致。

例如：如果以電腦操作初級用戶作為目標(biāo)用戶，以簡化界面邏輯為設(shè)計目標(biāo)，那么該目標(biāo)需要貫徹軟件（軟件包）整體，而不是局部。

元素外觀一致 [3] 

交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風(fēng)格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標(biāo)用戶進行調(diào)查取得反饋。

交互行為一致

在交互模型中，不同類型的元素用戶觸發(fā)其對應(yīng)的行為事件后，其交互行為需要一致。 [3] 

例如：所有需要用戶確認(rèn)操作的對話框都至少包含確認(rèn)和放棄兩個按鈕。

對于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是可以看到這個理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個理念設(shè)計，會更加簡化用戶操作流程。 [3] 

五、可用性原則

可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對應(yīng)的功能。 [3] 

如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能。

比如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細的理解該元素對應(yīng)的功能，同時可以取消該操作。 [3] 

可達到

用戶是交互的中心，交互元素對應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。

用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過移動和觸發(fā)已有的交互元素達到其它在此之前不可見或者不可交互的交互元素。 [3] 

要注意的是交互的次數(shù)會影響可達到的效果。當(dāng)一個功能被深深隱藏（一般來說超過4層）那么用戶達到該元素的幾率就大大降低了。

可達到的效果也同界面設(shè)計有關(guān)。過于復(fù)雜的界面會影響可達到的效果。 [3] 

可控制

軟件的交互流程，用戶可以控制。

功能的執(zhí)行流程，用戶可以控制。

如果確實無法提供控制，則用能為目標(biāo)用戶理解的方式提示用戶。 [3] 

設(shè)計方向編輯 語音

UI是用戶界面，是英文User和interface的縮寫。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關(guān)系，所以這樣可分為3個方向，他們分別是：用戶研究、交互設(shè)計、界面設(shè)計。

用戶研究

用戶研究包含兩個方面：一是可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計更容易被人使用、學(xué)習(xí)和記憶；二是通過可用性工程學(xué)研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法。

用戶研究是一個跨學(xué)科的專業(yè)，涉及可用性工程學(xué)、人類功效學(xué)、心理學(xué)、市場研究學(xué)、教育學(xué)、設(shè)計學(xué)等等學(xué)科。用戶研究技術(shù)是站在人文學(xué)科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開發(fā)和設(shè)計中。

用戶研究通過對于用戶的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開發(fā)的前期能夠把用戶對于產(chǎn)品功能的期望、對設(shè)計和外觀方面的要求融入到產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計或者探索一個新產(chǎn)品概念。

他是得到用戶需求和反饋的途徑，也是檢驗界面與交互設(shè)計是否合理的重要標(biāo)準(zhǔn)。

交互設(shè)計

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

界面設(shè)計

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

設(shè)計規(guī)范編輯 語音

一致性原則

堅持以用戶體驗為中心設(shè)計原則，界面直觀、簡潔，操作方便快捷，用戶接觸軟件后對界面上對應(yīng)的功能一目了然、不需要太多培訓(xùn)就可以方便使用本應(yīng)用系統(tǒng)。 [4] 

字體　　-保持字體及顏色一致，避免一套主題出現(xiàn)多個字體；　　-不可修改的字段，統(tǒng)一用灰色文字顯示。

對齊　　-保持頁面內(nèi)元素對齊方式的一致，如無特殊情況應(yīng)避免同一頁面出現(xiàn)多種數(shù)據(jù)對齊方式。

表單錄入　　-在包含必須與選填的頁面中，必須在必填項旁邊給出醒目標(biāo)識（*）；　　-各類型數(shù)據(jù)輸入需限制文本類型，并做格式校驗如電話號碼輸入只允許輸入數(shù)字、郵箱地址需要包含“@”等，在用戶輸入有誤時給出明確提示。

鼠標(biāo)手勢　　-可點擊的按鈕、鏈接需要切換鼠標(biāo)手勢至手型；

保持功能及內(nèi)容描述一致　　-避免同一功能描述使用多個詞匯，如編輯和修改，新增和增加，刪除和清除混用等。建議在項目開發(fā)階段建立一個產(chǎn)品詞典，包括產(chǎn)品中常用術(shù)語及描述，設(shè)計或開發(fā)人員嚴(yán)格按照產(chǎn)品詞典中的術(shù)語詞匯來展示文字信息。

準(zhǔn)確性原則

使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色，顯示信息的含義應(yīng)該非常明確，用戶不必再參考其它信息源。

顯示有意義的出錯信息，而不是單純的程序錯誤代碼。

避免使用文本輸入框來放置不可編輯的文字內(nèi)容，不要將文本輸入框當(dāng)成標(biāo)簽使用。

使用縮進和文本來輔助理解。

使用用戶語言詞匯，而不是單純的專業(yè)計算機術(shù)語。

高效地使用顯示器的顯示空間，但要避免空間過于擁擠。

保持語言的一致性，如“確定”對應(yīng)“取消”,“是”對應(yīng)“否”。

可讀性原則

文字長度

文字的長度，特別是在大塊空白的設(shè)計中很重要，太長會導(dǎo)致眼睛疲憊，閱讀困難。太短又經(jīng)常會造成尷尬的斷裂效果，斷字的使用也會造成大量的復(fù)合詞，這些斷裂嚴(yán)重的影響了閱讀的流暢性。

空間和對比度

每個字符同線路長度，間距也是重要的。所以每個字符之間的空間至少等于字符的尺寸，大多數(shù)數(shù)字設(shè)計人員習(xí)慣選擇一個最小的文字大小的150%為空間距離，這就可以留下足夠的空間。當(dāng)每一行中讀取大段的文字，且線路長度過多或線之間的空間太少，都會造成理解困難。

對齊方式

無論是在文本中心，還是偏左，或者是沿著一個文件的右側(cè)對齊，文本的對齊相當(dāng)重要，可以極大地影響可讀性。一般而言，文本習(xí)慣向左對齊，因為它反映了你的閱讀方式 – 從左至右。你熟悉每一行開始和結(jié)束的地方。

布局合理化原則

在進行設(shè)計時需要充分考慮布局的合理化問題，遵循用戶從上而下，自左向右瀏覽、操作習(xí)慣，避免常用業(yè)務(wù)功能按鍵排列過于分散，以造成用戶鼠標(biāo)移動距離過長的弊端。多做“減法”運算，將不常用的功能區(qū)塊隱藏，以保持界面的簡潔，使用戶專注于主要業(yè)務(wù)操作流程，有利于提高軟件的易用性及可用性。

菜單　　-保持菜單簡潔性及分類的準(zhǔn)確性，避免菜單深度超過3層?！　?菜單中功能是需要打開一個新頁面來完成的，需要在菜單名字后面加上“…”?！局贿m用于C/S架構(gòu)，B/S請無視】。

按鈕　　確認(rèn)操作按鈕放置左邊，取消或關(guān)閉按鈕放置于右邊。

功能　　-未完成功能必須隱藏處理，不要置于頁面內(nèi)容中，以免引起誤會。

排版　　-所有文字內(nèi)容排版避免貼邊顯示（頁面邊緣），盡量保持10-20像素的間距并在垂直方向上居中對齊；各控件元素間也保持至少10像素以上的間距，并確?？丶夭痪o貼于頁面邊沿。

表格數(shù)據(jù)列表　　-字符型數(shù)據(jù)保持左對齊，數(shù)值型右對齊（方便閱讀對比），并根據(jù)字段要求，統(tǒng)一顯示小數(shù)位位數(shù)。

滾動條　　-頁面布局設(shè)計時應(yīng)避免出現(xiàn)橫向滾動條。

頁面導(dǎo)航（面包屑導(dǎo)航）　　-在頁面顯眼位置應(yīng)該出現(xiàn)面包屑導(dǎo)航欄，讓用戶知道當(dāng)前所在頁面的位置，并明確導(dǎo)航結(jié)構(gòu)，如：首頁>新聞中心>歐科智能招商服務(wù)平臺正式發(fā)布，其中帶下劃線部分為可點擊鏈接。

信息提示窗口　　-信息提示窗口應(yīng)位于當(dāng)前頁面的居中位置，并適當(dāng)弱化背景層以減少信息干擾，讓用戶把注意力集中在當(dāng)前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。

系統(tǒng)操作合理性原則

盡量確保用戶在不使用鼠標(biāo)（只使用鍵盤）的情況下也可以流暢地完成一些常用的業(yè)務(wù)操作，各控件間可以通過Tab鍵進行切換，并將可編輯的文本全選處理。

查詢檢索類頁面，在查詢條件輸入框內(nèi)按回車應(yīng)該自動觸發(fā)查詢操作。

在進行一些不可逆或者刪除操作時應(yīng)該有信息提示用戶，并讓用戶確認(rèn)是否繼續(xù)操作，必要時應(yīng)該把操作造成的后果也告訴用戶。

信息提示窗口的“確認(rèn)”及“取消”按鈕需要分別映射鍵盤按鍵“Enter”和“ESC”。

避免使用鼠標(biāo)雙擊動作，不僅會增加用戶操作難度，還可能會引起用戶誤會，認(rèn)為功能點擊無效。

表單錄入頁面，需要把輸入焦點定位到第一個輸入項。用戶通過Tab鍵可以在輸入框或操作按鈕間切換，并注意Tab的操作應(yīng)該遵循從左向右、從上而下的順序。

系統(tǒng)響應(yīng)時間原則

系統(tǒng)響應(yīng)時間應(yīng)該適中，響應(yīng)時間過長，用戶就會感到不安和沮喪，而響應(yīng)時間過快也會影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯誤。因此在系統(tǒng)響應(yīng)時間上堅持如下原則：

2-5秒窗口顯示處理信息提示，避免用戶誤認(rèn)為沒響應(yīng)而重復(fù)操作；

5秒以上顯示處理窗口，或顯示進度條；

一個長時間的處理完成時應(yīng)給予完成警告信息。