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

導(dǎo)讀：

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

對于小白來說，基本概念都不清楚，實在沒辦法把自己代入情景，感受這是一份怎樣的工作！

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

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

icon | 主題設(shè)計

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

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

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

IOS | APP交互設(shè)計 

案例：家裝APP

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

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

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

IOS | APP交互設(shè)計

案例2（讀物APP）

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

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

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

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

1.什么是交互

交互，即交流互動，其實這個詞語離我們的生活很近，例如打招呼：

－李明：吃了嗎，大爺？

－王大爺：吃啦！

簡單幾個字的你來我往，搭配眼神和動作，傳遞出了禮貌、親近、尊敬等諸多豐富含義。

人和人之間的交互很好理解，那么人和機器間的交流互動是什么呢？

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

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

－屏幕亮了沒解鎖，彈出輸入密碼頁面（－手機：哎？是小明來了么？）

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

－解鎖（－手機：歡迎歡迎~）

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

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

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

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

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

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

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

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

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

UI 設(shè)計師的薪資之所以高，很大一部分原因也是因為他們技能多！

網(wǎng)頁設(shè)計對于 UI 設(shè)計師來說，也是必備功課。

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

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

PLANE | 電商/平面

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

1、側(cè)重點不同

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

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

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

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

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

3、實現(xiàn)過程不同

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

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

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

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

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

UI 設(shè)計師因為技能多，經(jīng)常有大量的作品想要展示進(jìn)作品集。

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

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

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