看了作品才知道，原來(lái) UI 設(shè)計(jì)師都在做這些…

導(dǎo)讀：

看了很那么多“UI設(shè)計(jì)到底是什么？”的文章，奈何，還是一頭霧水！

對(duì)于小白來(lái)說(shuō)，基本概念都不清楚，實(shí)在沒辦法把自己代入情景，感受這是一份怎樣的工作！

與其去弄懂那些生澀的專業(yè)名詞，不如直接來(lái)看看傳說(shuō)中高大上的UI設(shè)計(jì)師，到底是怎么讓設(shè)計(jì)從無(wú)到有的吧！

本文作品來(lái)源：南寧校區(qū)優(yōu)秀學(xué)員龍可莉

icon | 主題設(shè)計(jì)

UI 設(shè)計(jì)中‘圖標(biāo)設(shè)計(jì)’占了很大一部分。

圖標(biāo)是一種人人都能理解的語(yǔ)言，不論國(guó)籍、種族、年齡。我們現(xiàn)在提及的圖標(biāo)大部分就是移動(dòng)端的圖標(biāo)設(shè)計(jì)，如APP圖標(biāo)、小程序圖標(biāo)設(shè)計(jì)等。

圖標(biāo)的分類、風(fēng)格很多，設(shè)計(jì)圖標(biāo)的時(shí)候，怎樣舒服、美觀，還能抓住用戶的眼球，就成了重點(diǎn)！

IOS | APP交互設(shè)計(jì) 

案例：家裝APP

到底怎樣設(shè)計(jì)一個(gè)APP？怎樣讓頭腦中的模型落實(shí)于眼前呢？

下面的案例中從 構(gòu)建思路 — 信息架構(gòu) — 原型架構(gòu) — 設(shè)計(jì)規(guī)范都一一做了分析，讓你真的走進(jìn)設(shè)計(jì)師的思考世界！

小提示，要用心體會(huì)其中的每一步哦，每個(gè)環(huán)節(jié)對(duì)最 后的效果展現(xiàn)都是十分重要的！

IOS | APP交互設(shè)計(jì)

案例2（讀物APP）

與上一款A(yù)PP不同，這是一個(gè)讀物類APP。

針對(duì)不同的軟件，會(huì)有不同的構(gòu)建思路，也會(huì)有不同的細(xì)節(jié)處理，如：字體的選擇、顏色的更換等。

做設(shè)計(jì)之前，一定要參考競(jìng)品是怎樣設(shè)計(jì)的，最 好是同行業(yè)前幾名的設(shè)計(jì)，都是非常有參考價(jià)值的。

說(shuō)到信息架構(gòu)，就不得不提到“交互”這個(gè)概念。

1.什么是交互

交互，即交流互動(dòng)，其實(shí)這個(gè)詞語(yǔ)離我們的生活很近，例如打招呼：

－李明：吃了嗎，大爺？

－王大爺：吃啦！

簡(jiǎn)單幾個(gè)字的你來(lái)我往，搭配眼神和動(dòng)作，傳遞出了禮貌、親近、尊敬等諸多豐富含義。

人和人之間的交互很好理解，那么人和機(jī)器間的交流互動(dòng)是什么呢？

舉個(gè)例子，如果你想解鎖一個(gè)手機(jī)，你與手機(jī)的交流可能是下面這種情景：

－按Home鍵（－李明：嗨，手機(jī)，好久不見?。?/p>

－屏幕亮了沒解鎖，彈出輸入密碼頁(yè)面（－手機(jī)：哎？是小明來(lái)了么？）

－輸入密碼（－李明：是?。。?/p>

－解鎖（－手機(jī)：歡迎歡迎~）

所以簡(jiǎn)而言之，當(dāng)人和一件事物（無(wú)論是人，機(jī)器，系統(tǒng)、環(huán)境）發(fā)生雙向的信息交流和互動(dòng)，就是一種交互行為。

要注意的是，這種交流和互動(dòng)必須是雙向的，如果只有一方的信息輸出，而沒有第二方的參與，那么只能是信息展示而不是交流互動(dòng)。

例如，圖左的包裝是單方面的信息展示，只能讓人從中獲取信息，而不能反過(guò)來(lái)接收信息并作出反饋，所以不是交互。

圖右輸入框會(huì)根據(jù)輸入的內(nèi)容作出正確和錯(cuò)誤的反饋，有信息的交流，所以是一種交互。

2.什么是交互設(shè)計(jì)

詞條給出的解釋是：“交互設(shè)計(jì)，是人工制品、環(huán)境和系統(tǒng)的行為，以及傳達(dá)這種行為的外形元素的設(shè)計(jì)與定義?！?/p>

其實(shí)可以簡(jiǎn)單理解為，交互設(shè)計(jì)把一個(gè)或者一系列交流互動(dòng)，用文字、圖像或文檔等方式，從交流的內(nèi)容、方式、規(guī)則等維度進(jìn)行統(tǒng)一的設(shè)計(jì)。

并且，好的UI設(shè)計(jì)不只是讓軟件變得有個(gè)性有品味而已，更重要的是讓軟件的操作變得舒適、簡(jiǎn)單、易用，并且充分體現(xiàn)軟件的定位和特點(diǎn)。

WEB | 網(wǎng)頁(yè)設(shè)計(jì)

UI 設(shè)計(jì)師的薪資之所以高，很大一部分原因也是因?yàn)樗麄兗寄芏啵?/p>

網(wǎng)頁(yè)設(shè)計(jì)對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō)，也是必備功課。

企業(yè)需要通過(guò)網(wǎng)站呈現(xiàn)產(chǎn)品、服務(wù)、理念、文化，或向大眾提供功能服務(wù)。

因此，網(wǎng)頁(yè)設(shè)計(jì)必須首先明確設(shè)計(jì)的目的和用戶的需求，從而做出切實(shí)可行的設(shè)計(jì)方案。

PLANE | 電商/平面

這里我們還是要區(qū)別一下平面設(shè)計(jì)與 UI 設(shè)計(jì)

1、側(cè)重點(diǎn)不同

平面設(shè)計(jì)主要側(cè)重于紙張媒體，ui設(shè)計(jì)更注重交互。

2、 技術(shù)支持上的不同

除了熟悉產(chǎn)品的用戶使用習(xí)慣、交互特征之外，ui設(shè)計(jì)需要更多技術(shù)支持。

不僅僅是傳統(tǒng)的PS、AI、coreldraw等圖形處理技術(shù)。

ui設(shè)計(jì)主要應(yīng)用在網(wǎng)頁(yè)、移動(dòng)界面設(shè)計(jì)中，合格的 UI 設(shè)計(jì)師對(duì)于DW、CSS、FW、IOS、android等技術(shù)也要了解，才能配合開發(fā)人員做出最 好的產(chǎn)品，技術(shù)是平面設(shè)計(jì)師轉(zhuǎn)UI設(shè)計(jì)師最 大的難點(diǎn)之一。

3、實(shí)現(xiàn)過(guò)程不同

平面設(shè)計(jì)是用印刷工藝去實(shí)現(xiàn)，比如一張名片，設(shè)計(jì)好了需要印刷出來(lái)才能使用。

UI設(shè)計(jì)則是運(yùn)用程度代碼，設(shè)計(jì)好了后通過(guò)程序代碼讓設(shè)計(jì)實(shí)現(xiàn)其功能。

4、完成設(shè)計(jì)工作的人數(shù)不同

平面設(shè)計(jì)一個(gè)人便可以完成全程的設(shè)計(jì)。提供需求后，平面設(shè)計(jì)師便可以直接完成設(shè)計(jì)。

UI設(shè)計(jì)則需要團(tuán)隊(duì)成員一起設(shè)計(jì)方能完成，比如設(shè)計(jì)APP，需要客戶給需求，然后產(chǎn)品經(jīng)理，視覺設(shè)計(jì)師，程序來(lái)配合起來(lái)才能完成。

UI 設(shè)計(jì)師因?yàn)榧寄芏?，?jīng)常有大量的作品想要展示進(jìn)作品集。

可其實(shí)，成熟的 UI 設(shè)計(jì)師作品集應(yīng)該像南寧校區(qū)優(yōu)秀學(xué)員龍可莉一樣，重新進(jìn)行統(tǒng)一設(shè)計(jì)編排！

每個(gè)技能都可以展示到位，又不雜亂無(wú)章！看的人舒服、清晰，人賞心悅目，這也是好設(shè)計(jì)的真諦！

以上這樣優(yōu)秀的具體實(shí)例，有沒有讓你更加了解 UI 設(shè)計(jì)了呢？