提起UI設(shè)計(jì)，我們會(huì)想到...

其實(shí)，UI設(shè)計(jì)師們的工作內(nèi)容相當(dāng)廣泛，從圖形設(shè)計(jì)到界面交互、再到用戶體驗(yàn)都有涉獵。由于工作重心的不同，UI設(shè)計(jì)師的工作內(nèi)容會(huì)分為三個(gè)方向：

國內(nèi)的大部分UI設(shè)計(jì)師從事GUI方向的工作，主要負(fù)責(zé)包括網(wǎng)頁設(shè)計(jì)、軟件界面設(shè)計(jì)、移動(dòng)端界面設(shè)計(jì)在內(nèi)的視覺設(shè)計(jì)工作。

IXD的主要工作內(nèi)容，是通過了解人的心理、目標(biāo)和期望，使用有效的交互方式來讓整個(gè)交互過程可用、易用，以及繪制原型圖。

UE的工作就是去關(guān)注用戶使用前、使用過程中、使用后的整體感受，研究用戶包括行為、情感、成就等各個(gè)方面。

而今天我要分享的

主要是移動(dòng)UI設(shè)計(jì)的工作內(nèi)容

從“可用”到“易用”再到“好用”

在短短十幾年的時(shí)間里

移動(dòng)UI設(shè)計(jì)實(shí)現(xiàn)了質(zhì)的飛躍

在2007年蘋果公司推出iphone之前，移動(dòng)應(yīng)用市場(chǎng)還是諾基亞與塞班系統(tǒng)的天下，當(dāng)時(shí)的軟件設(shè)計(jì)并不追求美觀，移動(dòng)UI的設(shè)計(jì)也停留在“保證可用性”的階段。

而iphone的推出，重新定義了人們對(duì)手機(jī)的認(rèn)識(shí)。唯一的home鍵 全觸屏操作，使得UI設(shè)計(jì)師們開始關(guān)注用戶的使用體驗(yàn)以及學(xué)習(xí)成本。于是，拇指熱區(qū)的概念誕生，圖標(biāo)與界面也進(jìn)入擬物設(shè)計(jì)時(shí)代。

2011年，第一款搭載windows系統(tǒng)的諾基亞手機(jī)問世，該系統(tǒng)全新的扁平化界不再一味地追求擬物，而是強(qiáng)調(diào)信息本身。“內(nèi)容為王”的全新界面成為UI設(shè)計(jì)歷史上的又一個(gè)里程碑。另一面，由于手機(jī)屏幕越來越大，UI設(shè)計(jì)開始與手勢(shì)運(yùn)用相結(jié)合，如ios的左滑刪除、下滑搜索等。

UI設(shè)計(jì)在軟件開發(fā)項(xiàng)目中成為越來越重要的一環(huán)，這不僅要求UI設(shè)計(jì)師在考慮視覺之余，去考慮用戶體驗(yàn)、解讀用戶心理與需求...更需要UI設(shè)計(jì)師全程參與項(xiàng)目開發(fā)。那么，在軟件開發(fā)過程中，UI設(shè)計(jì)師都做了哪些工作呢？

UI設(shè)計(jì)師需要充分了解軟件的設(shè)計(jì)需求，才能更準(zhǔn)確地設(shè)計(jì)界面與流程。

UI設(shè)計(jì)師需要在前端開發(fā)完成后，對(duì)頁面進(jìn)行設(shè)計(jì)驗(yàn)收，對(duì)頁面錯(cuò)誤進(jìn)行修改。

UI設(shè)計(jì)師會(huì)收集用戶易用性反饋，比如按鍵位置、字體大小等，以便在下個(gè)版本中對(duì)頁面進(jìn)行修正。

其實(shí)，單就【UI設(shè)計(jì)】環(huán)節(jié)而言，工作內(nèi)容也是十分龐雜。以森通廣告為某移動(dòng)訂貨平臺(tái)開發(fā)的APP的UI視覺設(shè)計(jì)工作為例，一套完整的UI視覺規(guī)范要包括以下部分

UI設(shè)計(jì)師需要制定嚴(yán)格的色彩使用規(guī)范，在完成全部圖標(biāo)與組件的設(shè)計(jì)后還要標(biāo)注明確的組件使用規(guī)范。

在全部設(shè)計(jì)完成之后，UI設(shè)計(jì)師需要繪制頁面，并標(biāo)注各部分的尺寸、距離等細(xì)節(jié)，以及切圖說明。

UI設(shè)計(jì)師們是用什么工具完成這些工作的呢？

你的第一反應(yīng)一定是PS

雖然PS是一個(gè)足夠強(qiáng)大的繪圖軟件

但UI設(shè)計(jì)師卻更青睞這款設(shè)計(jì)利器

Sketch 是一款適用于所有設(shè)計(jì)師的矢量繪圖應(yīng)用，而矢量繪圖正是目前進(jìn)行網(wǎng)頁、圖標(biāo)、界面設(shè)計(jì)的最好方式。除了矢量編輯外，sketch同樣添加了一些基本的位圖工具，比如模糊、色彩校正。在設(shè)計(jì)上，sketch也盡量提供簡(jiǎn)單易理解的操作，讓UI設(shè)計(jì)更簡(jiǎn)單、更高效。

● 便捷的矢量設(shè)計(jì)模式

● 兼容多種格式的倒入/導(dǎo)出：eps、png、jpg、pdf等

● Artboard畫板，多個(gè)畫板、精準(zhǔn)點(diǎn)擊

● 強(qiáng)大的組件庫，讓設(shè)計(jì)更便捷

● 智能切圖功能，支持多種倍數(shù)導(dǎo)出

● 超強(qiáng)的可拓展性，擁有強(qiáng)大的插件庫

最后分享我在UI設(shè)計(jì)時(shí)，常用的兩款插件：

可以實(shí)現(xiàn)設(shè)計(jì)的規(guī)范導(dǎo)出，避免了切圖標(biāo)注時(shí)的復(fù)雜畫面，降低疏漏，方便高效

可在移動(dòng)設(shè)備上即時(shí)預(yù)覽，提升工作效率

針對(duì)軟件開發(fā)過程中的工作對(duì)接，除了使用sketch的measure插件進(jìn)行對(duì)接外，還有一款能夠?qū)崿F(xiàn)在線交流、實(shí)時(shí)修改的軟件zeplin也相當(dāng)不錯(cuò)。我對(duì)兩個(gè)軟件的特點(diǎn)做了一些對(duì)比，設(shè)計(jì)師們可根據(jù)自己的需求酌情選擇。

軟件開發(fā)項(xiàng)目雖被分為UI設(shè)計(jì)與程序開發(fā)兩部分，但項(xiàng)目的所有參與者本身就是一個(gè)team。正如UI設(shè)計(jì)師需要全程跟進(jìn)項(xiàng)目一樣，程序部門的工作也滲透在項(xiàng)目開發(fā)的各個(gè)方面，工作中每一個(gè)環(huán)節(jié)的細(xì)微修整，都有可能帶來蝴蝶效應(yīng)般的連鎖修改，所以在設(shè)計(jì)工作中，各部門的積極溝通就是提高效率的王道~

完