1.什么是UI設(shè)計(jì)？

《百度百科》中對(duì)UI設(shè)計(jì)作了這樣的定義：“UI即User Interface(用戶界面)的簡(jiǎn)稱，UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)?！?/p>

用戶界面（User interface） ，用戶界面是一個(gè)比較廣泛的概念，指人和機(jī)器互動(dòng)過程中的界面，以手機(jī)為例，手機(jī)上的界面都屬于用戶界面。我們通過這個(gè)界面向手機(jī)發(fā)出指令，手機(jī)根據(jù)指令產(chǎn)生相應(yīng)的反饋。設(shè)計(jì)這套界面視覺的人稱呼為UI設(shè)計(jì)師。

我們一般所說的UI設(shè)計(jì)多指UI視覺設(shè)計(jì)，主要負(fù)責(zé)APP、Web、H5等頁面的色彩、布局、icon、字體方面的設(shè)計(jì)工作。但隨著互聯(lián)網(wǎng)的不斷發(fā)展，純視覺的工作已經(jīng)開始日益減少，行業(yè)要求UI設(shè)計(jì)師也要懂點(diǎn)交互設(shè)計(jì)和產(chǎn)品方面的知識(shí)，即懂用戶體驗(yàn)設(shè)計(jì)（User experience），國(guó)內(nèi)稱UE，國(guó)外叫UX（全棧設(shè)計(jì)師甚至要懂代碼）。UI設(shè)計(jì)最后產(chǎn)出物是高保真視覺稿＋頁面標(biāo)注＋切圖。

出于成本考慮，有的中小型公司和初創(chuàng)型公司也會(huì)讓UI設(shè)計(jì)師負(fù)責(zé)一些平面類的設(shè)計(jì)，如：海報(bào)、宣傳冊(cè)、LOGO等。所以，UI設(shè)計(jì)師如果會(huì)平面設(shè)計(jì)或手繪則是加分項(xiàng)，但不是必須項(xiàng)，不會(huì)也不用擔(dān)心。

UI設(shè)計(jì)是近年來關(guān)注度非常高的一個(gè)行業(yè)，UI設(shè)計(jì)師也是引發(fā)了很多人的關(guān)注。UI設(shè)計(jì)主要是圖形設(shè)計(jì)和交互設(shè)計(jì)。圖形設(shè)計(jì)就是傳統(tǒng)意義上的美工，以前UI設(shè)計(jì)不受重視，所以美工地位不高，現(xiàn)在隨著UI設(shè)計(jì)的興起，美工也被稱為UI設(shè)計(jì)師。其實(shí)UI設(shè)計(jì)師不是單純意義的美術(shù)工人，而是軟件產(chǎn)品的“外形”設(shè)計(jì)師。交互設(shè)計(jì)主要設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)、操作規(guī)范等。

在這個(gè)顏值當(dāng)?shù)赖哪甏?，UI設(shè)計(jì)師的水平高低直接決定了互聯(lián)網(wǎng)產(chǎn)品（不倫手機(jī)還是PC）的顏值。撇開產(chǎn)品的質(zhì)量，用戶接觸產(chǎn)品的第一印象，就是UI設(shè)計(jì)師的杰作，對(duì)于很多受眾來說，一旦產(chǎn)品的顏值/第一印象達(dá)不到標(biāo)準(zhǔn)/審美，那下一步就是直接拜拜了。

一個(gè)好的UI設(shè)計(jì)師，能給予產(chǎn)品一張標(biāo)致的臉，能賦予有趣的靈魂新的價(jià)值，所以說UI設(shè)計(jì)絕不是打雜美工。

2.UI設(shè)計(jì)師的分類：

在PC端從事網(wǎng)頁設(shè)計(jì)，我們稱呼WUI（Web User Interface）設(shè)計(jì)師或者網(wǎng)頁設(shè)計(jì)師。PC端UI設(shè)計(jì)，也就是電腦用戶，界面指的就是電腦上的操作界面。像電腦版的QQ，微信，PS等軟件和網(wǎng)頁的一些按鈕圖標(biāo)等，都屬于PC端UI設(shè)計(jì)。

在移動(dòng)端，從事移動(dòng)設(shè)計(jì)的稱呼為GUI（Graphics User Interface）設(shè)計(jì)師，因?yàn)橐苿?dòng)端會(huì)有大量圖形用戶界面設(shè)計(jì)。也就是說手機(jī)上的所有界面都是移動(dòng)端UI設(shè)計(jì)。比如微信聊天界面，QQ聊天界面，手機(jī)桌面，手機(jī)上看到的所有圖標(biāo)界面點(diǎn)了后會(huì)有反應(yīng)都可以理解成移動(dòng)端UI設(shè)計(jì)。

另外還有游戲UI，和其它UI ，比如像VR界面、AR界面、ATM界面、一些智能設(shè)備的界面，比如智能電視、車載系統(tǒng)等等，用戶較少，但又需要，未來有可能很火，有可能保持現(xiàn)狀。

3.學(xué)習(xí)UI設(shè)計(jì)需要學(xué)習(xí)哪些軟件？

軟件的掌握是一種硬技能，不管我們有多好的想法，都需要好的軟件掌握來實(shí)現(xiàn)。我們需要掌握軟件的基礎(chǔ)操作，例如Photoshop中的形狀工具、鋼筆工具、文字工具、圖層樣式 。也需要了解曲線、色階這部分圖像調(diào)整功能。下面介紹一些在UI設(shè)計(jì)中常見的軟件。

Photoshop：是一款老牌像素處理軟件。主要處理以像素所構(gòu)成的數(shù)字圖像。在圖像、圖形、文字、視頻、出版等各方面都有涉及。各種設(shè)計(jì)行業(yè)圖形處理都會(huì)用到Photoshop，可以滿足UI界面設(shè)計(jì)的日常需要。

Illustrator ：是矢量軟件，廣泛應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等。在處理一些及其復(fù)雜的圖形路徑時(shí)候，可以考慮使用Illustrator ，也有設(shè)計(jì)師所有的圖標(biāo)在Illustrator 中完成，然后連接嵌入到Photoshop。

After Effects：現(xiàn)在扁平化設(shè)計(jì)成為主流，所以動(dòng)效設(shè)計(jì)成為不可或缺的一部分。可通過這個(gè)軟件設(shè)計(jì)動(dòng)效平滑切換界面。

Axure RP：是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具。讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。

4.學(xué)習(xí)UI設(shè)計(jì)需要構(gòu)建哪些知識(shí)體系？

首先我們要知道在實(shí)際工作中“UI設(shè)計(jì)師主要是做什么事兒？”

APP界面設(shè)計(jì)（IOS和安卓）、網(wǎng)頁設(shè)計(jì)、banner設(shè)計(jì)、H5界面，這些都必須熟練掌握，也都是重中之重。

經(jīng)過對(duì)設(shè)計(jì)知識(shí)的重新梳理，我將所需要掌握的基本設(shè)計(jì)技能歸納為以下幾點(diǎn)：

色彩：需要理解色彩的基本原理以及配色方法。色彩很難把控，因?yàn)樗苋菀妆贿^度使用。如果，你還是一個(gè)初學(xué)者，那么盡可能使用柔和的色彩，僅在需要強(qiáng)調(diào)的地方使用更醒目的色彩。

字體與排版：文字往往占據(jù)整個(gè)設(shè)計(jì)內(nèi)容超過80%的區(qū)域，所以理解如何使用正確的字體和排版方式非常重要。請(qǐng)將內(nèi)容的清晰易讀作為你定義字體和做排版的首要目標(biāo)。

動(dòng)效：動(dòng)效能夠顯著增強(qiáng)一個(gè)應(yīng)用的用戶體驗(yàn)。他們能使你的應(yīng)用更有生氣和迷人，前提是你所設(shè)計(jì)的動(dòng)效快速、流暢，并且是符合用戶預(yù)期的。

圖標(biāo)：優(yōu)秀的圖標(biāo)往往與我們每天見到的事物緊密關(guān)聯(lián)，比如 相機(jī)、垃圾桶、云等等，能讓人一眼就識(shí)別出它所代表的功能。因此，使用那些具有良好辨識(shí)度的圖標(biāo)，避免讓用戶產(chǎn)生混淆。

UI要掌握的知識(shí)技能確實(shí)很多，但是你要是把順序搞錯(cuò)了，你將浪費(fèi)很多時(shí)間，走很多彎路。

先從網(wǎng)頁設(shè)計(jì)開始，同時(shí)學(xué)習(xí)平面設(shè)計(jì)的基礎(chǔ)（三大構(gòu)成，排版配色等）。然后再過度到APP，這樣你會(huì)相對(duì)容易很多。

圖標(biāo)之類的平時(shí)也需要多畫畫，特別是布爾運(yùn)算要熟練掌握。圖標(biāo)這些可以讓你對(duì)軟件操作更加熟練，對(duì)圖形的把握更加準(zhǔn)確。能夠根據(jù)產(chǎn)品的特點(diǎn)自己繪制一套符合產(chǎn)品個(gè)性的原創(chuàng)小圖標(biāo)。

審美必須長(zhǎng)期去培養(yǎng)，做的東西丑，主要是審美差，多看看優(yōu)質(zhì)的設(shè)計(jì)案例，多整理個(gè)人素材庫(kù)，看到好設(shè)計(jì)及時(shí)收藏歸類。審美提升這個(gè)過程是比較漫長(zhǎng)的，只能多看、多分析。累積到達(dá)一定程度，會(huì)豁然開朗，立馬開竅的。

界面設(shè)計(jì)是最重要、也是最難掌握的。需要多花心思去分析需求，提煉信息，合理的布局排版，遵循交互邏輯，避免犯錯(cuò)。

banner設(shè)計(jì)要加強(qiáng)練習(xí)，保證信息傳遞準(zhǔn)確的前提下，提升設(shè)計(jì)形式感，包括文字的變形組合，色彩的搭配，背景氛圍的烘托。這是設(shè)計(jì)師日常工作中非常重要的一部分。

當(dāng)你能輕松的設(shè)計(jì)出合格的界面了，接下來再搞搞AE小動(dòng)畫，Axure原型等等。記住，一定要抓重點(diǎn)，界面設(shè)計(jì)是最核心的。

你一定要做出拿的出手的成套的作品，并且要對(duì)自己做的東西有一個(gè)深刻的理解，要說的上來為什么要這樣去設(shè)計(jì)。

5.UI設(shè)計(jì)師的基礎(chǔ)修養(yǎng)

大局觀

在進(jìn)入一個(gè)未知的領(lǐng)域前，必須先了解這個(gè)領(lǐng)域的架構(gòu)，待有了比較全面認(rèn)知后再深挖，這其實(shí)也是大學(xué)專業(yè)課程設(shè)置的思路，先學(xué)習(xí)一門導(dǎo)論課，了解基本概念，再進(jìn)入細(xì)分領(lǐng)域。同理UI設(shè)計(jì)，先對(duì)整個(gè)行業(yè)有總體認(rèn)知，再去學(xué)技法層面的內(nèi)容、規(guī)則，慢慢把知識(shí)庫(kù)填充完整，這樣，在學(xué)習(xí)前，就能做到心中有數(shù)。

知識(shí)和技術(shù)基礎(chǔ)

如果說程序員一天中大部分時(shí)間都在當(dāng)碼農(nóng)，那么設(shè)計(jì)師的時(shí)間都留給了Ps和AI這種圖片處理軟件，而這些也正是“美工”稱呼的來源。嫻熟的技法，是完美展現(xiàn)設(shè)計(jì)作品的必備條件，作為UI設(shè)計(jì)師，掌握這些常用軟件也就成為了人人都會(huì)的基本功。

繪畫基礎(chǔ)

有人以為，設(shè)計(jì)師只要去圖庫(kù)網(wǎng)站找一些素材，借助工具進(jìn)行修飾即可（這就是真美工了），借鑒固然是一種能力，但當(dāng)你的技法嫻熟到一定程度，就可以嘗試創(chuàng)作，在知識(shí)和技法的積累上創(chuàng)作屬于自己的作品。

各平臺(tái)設(shè)計(jì)規(guī)則

iOS、Android、WP、Windows、Mac OX各個(gè)平臺(tái)都有自己的設(shè)計(jì)規(guī)則和偏好，在移動(dòng)端，連每款機(jī)型的分辨率、狀態(tài)欄高度、導(dǎo)航欄高度、圖標(biāo)尺寸、字體、顏色值都有嚴(yán)格的規(guī)定。遵守這些規(guī)則也是業(yè)內(nèi)的一些最基本的規(guī)矩了。

理解能力

產(chǎn)品經(jīng)理常常會(huì)直接發(fā)需求文檔給設(shè)計(jì)，能讀懂產(chǎn)品文檔、快速分析需求，定位出風(fēng)格、色調(diào)、元素，最后迅速把產(chǎn)品需求視覺化，就是產(chǎn)品經(jīng)理們最愛合作的設(shè)計(jì)師了。當(dāng)然，與之相對(duì)的溝通能力也非常重要，千萬不要發(fā)展成產(chǎn)品經(jīng)理和設(shè)計(jì)師互杠互懟的情況。

6.UI設(shè)計(jì)師的進(jìn)階修養(yǎng)

個(gè)人審美能力

為什么我們總喜歡發(fā)現(xiàn)新的事物并趨之若鶩？讀與設(shè)計(jì)是來說除了應(yīng)用本身生產(chǎn)的優(yōu)質(zhì)內(nèi)容外，設(shè)計(jì)感是很重要的一點(diǎn)，那什么是設(shè)計(jì)感呢？投射到設(shè)計(jì)師身上，大概就是設(shè)計(jì)師自身的審美意識(shí)了和認(rèn)同感了。

至于審美意識(shí)要如何培養(yǎng)、提高，日積月累地瀏覽、學(xué)習(xí)、反復(fù)思考、琢磨，一千個(gè)人心中有一千個(gè)哈姆雷特，相信每個(gè)人的積累也會(huì)誕生出不同的東西。

用戶體驗(yàn)

除了設(shè)計(jì)界面的UI設(shè)計(jì)師之外，互聯(lián)網(wǎng)公司會(huì)專門設(shè)置專門的用戶研究中心來處理用戶體驗(yàn)的種種問題。但對(duì)于一個(gè)互聯(lián)網(wǎng)產(chǎn)品的視覺設(shè)計(jì)，懂產(chǎn)品，懂用戶，才能誕生出大眾喜愛的產(chǎn)品設(shè)計(jì)。

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

很多人分不清交互和UI，UI主要做的是圖形用戶界面，也可以稱為GUI設(shè)計(jì)師；交互設(shè)計(jì)主要做處理點(diǎn)事人機(jī)互動(dòng)的界面，任何與機(jī)器打交道的過程，都需要交互設(shè)計(jì)師來參與。

但坦白說，現(xiàn)在的App中，有多少操作能把UI和交互完全清楚地剝離開來呢？一個(gè)好的產(chǎn)品，需要美觀的界面和順滑的交互，也就離不開設(shè)計(jì)師兩種能力的相輔相成了。尤其現(xiàn)在，設(shè)計(jì)趨向扁平化的時(shí)期，只要遵循設(shè)計(jì)規(guī)范，交互設(shè)計(jì)甚至能出了設(shè)計(jì)稿后直接給開發(fā)去實(shí)現(xiàn)，單純UI設(shè)計(jì)的存在感日益弱化。

代碼能力

這幾年互聯(lián)網(wǎng)產(chǎn)品最火的推廣方式是什么？

自然是H5！

那么如果一個(gè)設(shè)計(jì)師既能做好設(shè)計(jì)，又能完善布局前端代碼，那么只要有一個(gè)簡(jiǎn)單idea，經(jīng)過你的手就能完全實(shí)現(xiàn)。這種復(fù)合型人才會(huì)是多少公司爭(zhēng)搶的對(duì)象呢？這就得看你個(gè)人能努力到哪一個(gè)程度了。