一、UI設(shè)計(jì)是什么意思

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

二、UI設(shè)計(jì)方向

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

1、用戶研究

用戶研究包含兩個方面：

(1)、可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計(jì)更容易被人使用、學(xué)習(xí)和記憶；

(2)、通過可用性工程學(xué)研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法。

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

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

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

2、交互設(shè)計(jì)

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

3、界面設(shè)計(jì)

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

三、UI設(shè)計(jì)原則

1、簡易性

界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。值得注意的是，設(shè)計(jì)中不能讓UI設(shè)計(jì)太過引人注目，而要弱化程序本身的功能。需要平衡視覺設(shè)計(jì)和功能，尋找最佳點(diǎn)，消除華麗的裝飾和不必要的元素，UI界面要簡單直接的頁面邏輯和直觀必需的元素組成。

2、高效性

優(yōu)秀的UI設(shè)計(jì)有個共通的特征：高效。提升界面效率最有效的方法是進(jìn)行任務(wù)分析。熟悉用戶的流程，了解用戶的目標(biāo)，然后在此基礎(chǔ)上盡量簡化流程，使得用戶能夠便捷快速的達(dá)成目標(biāo)。在此過程中，仔細(xì)考慮每個功能細(xì)節(jié)，規(guī)避可能存在的漏洞，幫助用戶快速完成用戶流程。

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

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

4、一致性

用戶界面可視化設(shè)計(jì)中最重要的原則是一致性原則。用戶期待用自己的體驗(yàn)探索更多的內(nèi)容，探索是否有效取決于設(shè)計(jì)的一致性是否足夠好。具體表現(xiàn)是為用戶提供一個統(tǒng)一的界面，這意味著用戶可以從一個界面操作自己，從而減少操作和學(xué)習(xí)的時間。這個過程中的體驗(yàn)直接移植到另一個界面，使整個ui體驗(yàn)更加流暢。

5、清晰

清晰性應(yīng)該是所有ui界面的基本屬性。請記住， UI界面是為了讓用戶更容易與系統(tǒng)交互，因?yàn)樗枰軌蚺c用戶清楚地交互。保持一個清晰的ui界面設(shè)計(jì)并不困難。首先，要保證標(biāo)簽和標(biāo)簽文本的操作清晰指向，并允許信息的清晰傳遞，這樣用戶才能快速理解交互的方向性。盡量不要在ui中使用冗長、復(fù)雜、難以記住的文本標(biāo)簽。它越復(fù)雜，對整體用戶體驗(yàn)的影響就越大。

6、用戶的熟悉程度

用戶體驗(yàn)設(shè)計(jì)的一個重要目標(biāo)是要讓用戶能夠憑借直覺來操作UI界面。用戶要能夠自然地理解其中的內(nèi)容，操作自然就不難了，也就是說，要讓用戶對你的界面產(chǎn)生"熟悉感"。所以，要充分利用用戶對于UI設(shè)計(jì)所熟悉的部分。

當(dāng)用戶對UI界面抱有熟悉感的時候，通常意味著他們對于這個設(shè)計(jì)有所了解，甚至知道怎么交互，他們明白操作之后大概會發(fā)生什么，也知道哪些事情不應(yīng)該做。所以，如果你能利用好用戶對于交互和界面模式的熟悉來進(jìn)行設(shè)計(jì)的話，能讓用戶更快上手操作。

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

想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。通過比較真實(shí)與虛擬的事物，完成更好的設(shè)計(jì)。好的UI界面是隱形的，華麗的裝飾和不必要的元素都已經(jīng)被剔除，簡單直接的頁面邏輯和直觀必要的元素構(gòu)成了這樣的UI界面，專注于核心的用戶體驗(yàn)。

8、層次

UI界面的視覺層次是非常重要且常常被忽視的一個屬性，它能夠幫助用戶專注重要的內(nèi)容。如果你想讓界面中每個內(nèi)容都看起來很重要，那么只會單純地讓信息過載，讓每個元素都分?jǐn)傆脩舻淖⒁饬?，最終只會讓整個設(shè)計(jì)顯得混亂不堪。不同尺寸的字體、不同的色彩和不同的控件最終應(yīng)該是相互搭配，構(gòu)成層次，有輕重緩急地呈現(xiàn)給用戶，將復(fù)雜的結(jié)構(gòu)簡單化，幫助用戶完成任務(wù)。

9、靈活性

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

10、安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。這樣會讓用戶會覺得很安全，自己的權(quán)益不會遭到損失！

11、人性化

高效、用戶滿意度是人性化的體現(xiàn)。應(yīng)該有一個專家和初級玩家系統(tǒng)，即用戶可以根據(jù)自己的習(xí)慣自定義界面并保存設(shè)置。因此，一個好的界面設(shè)計(jì)師，在技巧方面，不僅可以畫圖標(biāo)，而且界面會有很多的互動知識。

四、UI設(shè)計(jì)流程

1、產(chǎn)品需求分析

當(dāng)一個UI設(shè)計(jì)師拿到項(xiàng)目或者需求之后，正常情況是交互設(shè)計(jì)師細(xì)化過后的交互文檔，里面包含交互原型。而作為ui設(shè)計(jì)師所要做的就是理解并吃透文檔，包括里面交互邏輯，具體的操作方式，流程，反饋等，需要不斷核對和確認(rèn)。

2、深層次的用戶體驗(yàn)研究與分析

對已定義的目標(biāo)用戶群體及特征進(jìn)行深層次的剖析，包括目標(biāo)用戶群體的年齡，性別及目標(biāo)戶群體的一些情感習(xí)慣，心理特征等，這樣就可以有針對的對這個產(chǎn)品構(gòu)想設(shè)計(jì)出一個大概的色系搭配及元素控件設(shè)計(jì)。

3、初稿設(shè)計(jì)

結(jié)合產(chǎn)品設(shè)計(jì)原型和自己對產(chǎn)品的體驗(yàn)研究分析結(jié)合起來設(shè)計(jì)初稿。（大概的色系搭配，框架布局，元素控件，圖標(biāo)ICON等設(shè)計(jì)都可以在這一步呈現(xiàn)出來）

4、視覺規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)

初稿設(shè)計(jì)完成后，就是要做好視覺規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)。視覺規(guī)范設(shè)計(jì)就是要對整個產(chǎn)品的顏色，字體，字號，元素控件，圖標(biāo)ICON，間距及交互效果做個統(tǒng)一的規(guī)范，這樣才可以做出一個成熟的產(chǎn)品，對前端制作也是有很大的好處的。

5、前端對接

確認(rèn)完設(shè)計(jì)稿后，進(jìn)入ui設(shè)計(jì)師與前端工程師對接的階段，ui設(shè)計(jì)師需要提供切圖，標(biāo)注，設(shè)計(jì)說明文檔以及設(shè)計(jì)圖給到前端工程師，一般常用的與開發(fā)對接的工具有藍(lán)湖，figma。這個階段需要保持跟開發(fā)頻繁地溝通，確?？梢院芎玫剡€原設(shè)計(jì)稿（實(shí)際工作中很難苛求百分百還原），特別是需要設(shè)計(jì)師自身要懂得一點(diǎn)前端代碼知識，可以更好地進(jìn)行溝通。

6、測試與反饋

產(chǎn)品進(jìn)入到測試階段，需要測試人員介入，一般這個時候是先部門內(nèi)部進(jìn)行可用性測試，然后擴(kuò)大到整個公司，反復(fù)測試幾輪之后確保沒有很大的問題之后才可以發(fā)包給客戶測試或者上線，而ui設(shè)計(jì)師這個時候就要收集反饋，收集意見，與產(chǎn)品一起討論改進(jìn)方案。

五、UI設(shè)計(jì)三大定律

三大原則定律包括：格式塔原則、菲茨定律和剃刀法則。

1、格式塔原則

通俗地說格式塔就是知覺的最終結(jié)果。是我們在心不在焉與沒有引入反思的現(xiàn)象學(xué)狀態(tài)時的知覺。格式塔原則包含五個特性，分別為：相近性、相似性、封閉性、連續(xù)性和簡單性。

(1)、相近性：人們會將距離相近的部分潛意識當(dāng)作一個整體。例如下圖所示。左側(cè)距離都相同，人們會認(rèn)為是一個整體，右側(cè)三四列和一二列相隔較遠(yuǎn)，人們會認(rèn)為這是兩部分。

(2)、相似性：人們會將相似的部分，當(dāng)做一個分組整體。例如下圖，一組圓形，人們會當(dāng)做一個組成部分。一組矩形，人們會當(dāng)做另一組組成部分。

(3)、封閉性：元素處于一個封閉空間，人們會將各個部分趨于組成整體。例如圓形被線框包圍，人們會將這個當(dāng)作一個整體。

(4)、連續(xù)性：人們傾向于完整的連成一個圖形，而不是觀察殘缺的線條或者形狀。

(5)、簡單性：具有對稱、規(guī)則的簡單圖形特征各部分趨于組成整體。

2、菲茲原則（費(fèi)茨法則）

任意一點(diǎn)移動到目標(biāo)中心位置所需時間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時間越長，目標(biāo)越大時間越短。

得到結(jié)論：越是重要按鈕，按鈕要越大，這樣操作時間就越短，越方便。位置距離用戶操作越近，這樣用戶越易點(diǎn)擊。

3、奧卡姆剃刀法則

這個原理稱為"如無必要，勿增實(shí)體"，即"簡單有效原理"。若無必要，勿增實(shí)體。不必要的元素會導(dǎo)致設(shè)計(jì)效率的降低，并且會增加不可預(yù)期的后果。在設(shè)計(jì)中我們可以去掉不必要的干擾元素，這樣頁面會比較純粹、簡潔。

六、UI設(shè)計(jì)常用工具

1、Adobe Photoshop

Adobe Photoshop是一種優(yōu)質(zhì)的網(wǎng)頁設(shè)計(jì)工具。它有很多選項(xiàng)來創(chuàng)建和編輯您的Web模板。它適用于圖像，您可以為您的網(wǎng)頁設(shè)計(jì)創(chuàng)建圖形。通過無限的顏色和漸變選項(xiàng)，可以制作出最佳的模板設(shè)計(jì)。它為您提供了一個空白的畫布，讓您的想象力生動。您可以按照自己的方式附加圖像，移動元素，繪制框，裁剪邊緣以及編輯模板。它適用于圖層，這使您的工作非常簡單。您可以顯示/隱藏圖層以有效管理Web設(shè)計(jì)元素。

2、Sketch

Sketch是適用于Mac設(shè)備的網(wǎng)頁設(shè)計(jì)軟件。它是專注于創(chuàng)建Web模板和設(shè)計(jì)的專業(yè)工具。它適用于矢量圖像，因此您將獲得最佳，最高分辨率的結(jié)果。工具欄和選項(xiàng)非常簡單。Sketch提供了創(chuàng)建和管理Web設(shè)計(jì)項(xiàng)目的完全靈活性。它具有鏡像功能，允許在多種設(shè)備（如手機(jī)或平板電腦）上測試您的網(wǎng)頁設(shè)計(jì)模板，可以100％確定您的網(wǎng)頁設(shè)計(jì)將如何在不同的屏幕尺寸上顯示。

3、Figma

Figma是一個多用戶網(wǎng)頁設(shè)計(jì)軟件。它允許您與設(shè)計(jì)團(tuán)隊(duì)聯(lián)系以使用相同的Web模板。它是與客戶共享項(xiàng)目并在模板設(shè)計(jì)上進(jìn)行實(shí)時更改的智能工具。Figma將網(wǎng)頁設(shè)計(jì)提升到一個全新的水平，它的編輯面板中包含字體，顏色和其他設(shè)置。用于創(chuàng)建圖標(biāo)或完整的Web模板時，工具和選項(xiàng)非常棒。

4、Adobe Illustrator

Adobe Illustrator 提供了一個完美的像素級設(shè)計(jì)環(huán)境，您可以在其中創(chuàng)建靈活且流暢的 Web 元素。它為您提供了創(chuàng)建清爽利落的 Web 布局所需的一切，包括矢量圖形、響應(yīng)式媒體圖標(biāo)、可伸縮組件、CSS 生成、SVG 導(dǎo)出、線框以及可重復(fù)使用的符號。

Adobe Illustrator

5、Adobe XD

adobe家打造的一款集頁面設(shè)計(jì)和交互原型為一體的設(shè)計(jì)工具，支持多人在線實(shí)時協(xié)作功能。另外在兼容性上優(yōu)勢最大，能跟全家桶產(chǎn)品進(jìn)行聯(lián)動；但是在資源和功能這兩方面相對于前面兩款就比較弱勢了。

6、Canva

Canva是一款免費(fèi)的設(shè)計(jì)工具。它不能被認(rèn)為是一個成熟的網(wǎng)頁設(shè)計(jì)軟件，但你可以使用Canva創(chuàng)建有趣和有吸引力的設(shè)計(jì)來支持你的網(wǎng)頁模板。它非常適合構(gòu)建可以添加到Web設(shè)計(jì)中的圖像。

它配備了數(shù)百個模板，使您的工作更輕松。如果您沒有任何設(shè)計(jì)技能，可以使用Canva中的模板，輕松地為您的Web模板構(gòu)建具有專業(yè)外觀的圖像。

七、UI設(shè)計(jì)注意事項(xiàng)

1、布局要簡潔

不管是用戶的瀏覽體驗(yàn)還是操作體驗(yàn)，UI設(shè)計(jì)都應(yīng)當(dāng)盡量將整體的布局設(shè)計(jì)簡單化，讓用戶可以一目了然。

2、色彩運(yùn)用

網(wǎng)頁UI的色彩運(yùn)用傾向于少而精，少代表了整體頁面的顏色使用；精代表了在配色的時候盡可能的協(xié)調(diào)。

3、圖片的使用

網(wǎng)頁 UI 中少用素材圖片，在某些信息展示中不得不用到實(shí)物圖那另當(dāng)別論， 網(wǎng)頁UI不需要大氣精美的banner。

4、注意實(shí)用性

UI設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時，首要考慮的就是該產(chǎn)品的實(shí)用性。只考慮設(shè)計(jì)本身，而脫離產(chǎn)品使用，那產(chǎn)品注定是失敗的。

總結(jié)

優(yōu)化猩SEO：UI設(shè)計(jì)的應(yīng)用日漸廣泛，已成為拉近消費(fèi)者和商品距離的必要需求，UI設(shè)計(jì)的能力水平已逐漸占領(lǐng)企業(yè)間相互競爭的重要領(lǐng)域，成為與對手拉開差距的重要競爭手段。

參考鏈接：

UI設(shè)計(jì)（軟件界面設(shè)計(jì)）_百度百科

https://baike.baidu.com/item/UI%E8%AE%BE%E8%AE%A1/750896

UI設(shè)計(jì)的十大原則【UI設(shè)計(jì)師必看】

https://www.itheima.com/news/20191016/120204.html

UI設(shè)計(jì)流程（原創(chuàng)）_設(shè)計(jì)菜鳥ww7-站酷ZCOOL

https://www.zcool.com.cn/article/ZMTQ3MjI0.html

UI設(shè)計(jì)的注意事項(xiàng) - 知乎

https://zhuanlan.zhihu.com/p/448962966

修改于2023-08-20