新手入門手冊(cè)！UI視覺設(shè)計(jì)師工作流程上的總結(jié)與建議

@Jeanny ：最近有一些剛?cè)胄械膶W(xué)妹來問我，如何才能成為一名合格的設(shè)計(jì)師，我想言簡(jiǎn)意賅很難傳達(dá)，于是預(yù)備了一篇長(zhǎng)文，重要是根據(jù)積累的經(jīng)驗(yàn)和對(duì)該行業(yè)的熟悉來敘述作為視覺設(shè)計(jì)師必要哪些能力。

• 理解營(yíng)業(yè)需求、產(chǎn)品定位和交互邏輯
• 理性確立設(shè)計(jì)風(fēng)格并初步評(píng)審
• 設(shè)計(jì)過程中結(jié)合需求，合理優(yōu)化設(shè)計(jì)
• 保持有用溝通，輸出并跟進(jìn)設(shè)計(jì)實(shí)現(xiàn)

首先我們要清楚視覺設(shè)計(jì)在整個(gè)產(chǎn)品中的作用和目的是什么，是給用戶提供舒適美好的視覺享受嗎，照舊為了用戶使用產(chǎn)品的時(shí)候更順暢，這些都包括但不僅僅如此，視覺設(shè)計(jì)還應(yīng)該傳達(dá)品牌差異化，讓用戶清晰地辨識(shí)、記憶并喜好該產(chǎn)品，并以促成營(yíng)業(yè)目標(biāo)為效果。因此做視覺設(shè)計(jì)就不能只流于外觀情勢(shì)，應(yīng)該周全讀懂營(yíng)業(yè)需求和用戶群的特性，做出吻合該營(yíng)業(yè)需求和品牌調(diào)性的設(shè)計(jì)。

一. 理解營(yíng)業(yè)需求、產(chǎn)品定位和交互邏輯

曾經(jīng)有個(gè)偕行跟我說他犯過的一個(gè)錯(cuò)誤，拿到需求或原型后，大概是迫于時(shí)間緊迫和經(jīng)驗(yàn)不足，就立急開始設(shè)計(jì)，最終的制品確實(shí)很嵬峨上，獲得許多同事好評(píng)，但是產(chǎn)品經(jīng)理和老板就提出了有引導(dǎo)性的意見，這個(gè)網(wǎng)站是給內(nèi)部人員使用的，應(yīng)該以方便快速觸達(dá)目標(biāo)為主，而不是做成多屏的滾動(dòng)網(wǎng)頁(yè)。雖然老板不懂設(shè)計(jì)，但是他卻懂營(yíng)業(yè)，可見設(shè)計(jì)不應(yīng)該是炫技，也不應(yīng)該是給產(chǎn)品潤(rùn)色，應(yīng)該是根據(jù)營(yíng)業(yè)需求做出多方面綜合考量的效果。

拿到需求之后，內(nèi)心有個(gè)也許，這個(gè)產(chǎn)品是干什么用的，重要是吸引哪些用戶群，營(yíng)業(yè)邏輯和使用場(chǎng)景也許是什么樣的，當(dāng)進(jìn)行了一翻思考之后，假如還覺得陌生，應(yīng)該怎么辦呢，那當(dāng)然是找到交互設(shè)計(jì)交流啦，有的公司沒有交互設(shè)計(jì)崗位，這時(shí)候可以找到產(chǎn)品經(jīng)理，他一定會(huì)不厭其煩為你講解。

理解產(chǎn)品的定位，重要是理清產(chǎn)品的類型（如對(duì)內(nèi)或?qū)ν?、to B或to C產(chǎn)品）、目標(biāo)人群、核心功能，以及用戶群的重要特性，如年齡、性別、喜愛、使用時(shí)間段和操作場(chǎng)景等。甚至可以參與該產(chǎn)品前期的調(diào)研分析，提前了解并構(gòu)思產(chǎn)品的視覺傳達(dá)，品牌定位題目。

如何理清交互邏輯，拿到原型后可以按步驟和網(wǎng)頁(yè)分支來形成一個(gè)大致的概念，如產(chǎn)品分為幾大模塊，幾大首頁(yè)都有些什么內(nèi)容，甚至可以結(jié)合構(gòu)架圖去理清思路，碰到不明晰之處則與負(fù)責(zé)人交流。大致上來講交互邏輯重要應(yīng)該搞懂以下幾點(diǎn)：

• 布局體例
• 整頓框架邏輯和流程
• 網(wǎng)頁(yè)承接關(guān)系
• 控件的各種狀況
• 不同條件下的信息顯現(xiàn)

二. 理性確立設(shè)計(jì)風(fēng)格并初步評(píng)審

理清了之后，就可以動(dòng)手確立設(shè)計(jì)風(fēng)格。設(shè)計(jì)不等同于藝術(shù)，產(chǎn)品也不是表達(dá)自我的平臺(tái)，設(shè)計(jì)應(yīng)該是解決詳細(xì)題目并合理論證。因此不應(yīng)該天馬行空，或拘泥于創(chuàng)意，美感和情勢(shì)。然后太看重分析，也會(huì)導(dǎo)致效果沒有新意，太重目的，無法超出用戶的生理預(yù)期，因此應(yīng)該在劃定好的范圍內(nèi)，做一些創(chuàng)意性的延長(zhǎng)工作。大多數(shù)的設(shè)計(jì)師都是由學(xué)習(xí)別人開始的，假如還沒有達(dá)到肯定的高度，可以通過研究偕行業(yè)的產(chǎn)品共性和設(shè)計(jì)特性，然后理性從共性+個(gè)性的角度，并結(jié)合前面理解的定位分析，從而思考自身產(chǎn)品的設(shè)計(jì)風(fēng)格。

從把握流行的設(shè)計(jì)風(fēng)格做出吻合產(chǎn)品定位的，更吻合品牌調(diào)性的設(shè)計(jì)風(fēng)格（當(dāng)然假如該產(chǎn)品不在初期0規(guī)劃階段，而且已經(jīng)有一套設(shè)計(jì)規(guī)范必要遵行，那么就了解清楚必要遵行的是哪方面，多大程度的遵行規(guī)范，如控件的使用，照舊圖標(biāo)的風(fēng)格等等，由于這都將影響最終設(shè)計(jì)的效果），假如有限定，仍可在肯定的范圍內(nèi)發(fā)散思維，從細(xì)節(jié)上創(chuàng)造出超過用戶預(yù)期的設(shè)計(jì)。關(guān)于如何通過視覺設(shè)計(jì)提拔產(chǎn)品的品牌調(diào)性，這個(gè)后面會(huì)通過另外的文章作以分析，這里重要闡述工作推進(jìn)中的一些經(jīng)驗(yàn)和方法。

確立風(fēng)格后，參與初步的風(fēng)格評(píng)審。評(píng)審的作用，在于增長(zhǎng)視覺輸出的合理性和服從，評(píng)審的過程中可以確定設(shè)計(jì)的風(fēng)格，后面的設(shè)計(jì)按計(jì)劃進(jìn)行，沿著此風(fēng)格繼承即可。

三. 設(shè)計(jì)過程中結(jié)合需求，合理優(yōu)化設(shè)計(jì)

在詳細(xì)做設(shè)計(jì)的時(shí)候，碰到不明確的描述，或是考慮到更多流程圖以外的想法時(shí)，可以與交互溝通，加快進(jìn)程。舉個(gè)例子：在做APP通知布告彈窗的時(shí)候，根據(jù)營(yíng)業(yè)模式有可能會(huì)出現(xiàn)比較長(zhǎng)的通知布告，也有可能出現(xiàn)兩條通知布告，而流程上沒有考慮到這么周全，這時(shí)候可以和交互溝通，延長(zhǎng)出更細(xì)化的體驗(yàn)，并做出更吻合邏輯的視覺設(shè)計(jì)。比如通知布告一屏展示多少字，超出的筆墨是點(diǎn)擊按鈕表現(xiàn)下一頁(yè)呢，照舊用滾動(dòng)的體例展示剩余的部分，第二條通知布告通常是在第一條之后展示，那么假如兩條通知布告的長(zhǎng)度不同等怎么處理呢，視覺上不應(yīng)該出現(xiàn)時(shí)長(zhǎng)時(shí)短的彈窗，表現(xiàn)不專業(yè)不規(guī)范，這時(shí)候比較好的方法是折衷選擇一個(gè)高度居中的彈窗設(shè)計(jì)，并且提示產(chǎn)品在通知布告字?jǐn)?shù)上做限定。

所以作為一名視覺設(shè)計(jì)師，多了解產(chǎn)品體驗(yàn)，認(rèn)識(shí)營(yíng)業(yè)性子，可以提拔產(chǎn)品的設(shè)計(jì)，尋常除了做好視覺設(shè)計(jì)提拔的基礎(chǔ)上，可以閱讀一些用戶體驗(yàn)和交互設(shè)計(jì)相干的書籍，比如《用戶體驗(yàn)方法論》，對(duì)于產(chǎn)品設(shè)計(jì)都有許多值得思考的觀點(diǎn)，比如書中提到的超預(yù)期的用戶體驗(yàn)的基本要素“Lemers”，即“易學(xué)、高效、易記、糾錯(cuò)、寫意度”。

設(shè)計(jì)并不是本身用心琢磨，把設(shè)計(jì)做得嵬峨上能夠使用就行了，還要學(xué)會(huì)詮釋本身的設(shè)計(jì)，獲得大家的認(rèn)同。這就必要做設(shè)計(jì)的過程中參與體驗(yàn)的思考，做到任何一個(gè)細(xì)節(jié)都經(jīng)過本身的理解和認(rèn)同，否則無法完成后期評(píng)判設(shè)計(jì)時(shí)的解說。

曾經(jīng)雇用人員時(shí)就有發(fā)現(xiàn)，有的設(shè)計(jì)師作品很嵬峨上，也吻合產(chǎn)品需求，但是向他提問為什么如許設(shè)計(jì)卻難以詮釋清楚，后來了解到，他在設(shè)計(jì)過程中照搬原型，本身沒有加入思考，只是負(fù)責(zé)美化工作，當(dāng)然假如是和經(jīng)驗(yàn)充足成熟的產(chǎn)品合作，也不會(huì)出現(xiàn)什么大的題目而且還能推進(jìn)工作流程，但長(zhǎng)期下來會(huì)導(dǎo)致他沒有參與感和認(rèn)同感，久而久之就會(huì)對(duì)工作產(chǎn)生怠惰的生理，甚至對(duì)于他職業(yè)發(fā)展也是不利，畢竟只做好美化的視覺工作是遠(yuǎn)遠(yuǎn)不夠的，即使有充足的創(chuàng)意也應(yīng)該是為產(chǎn)品和營(yíng)業(yè)需求服務(wù)。

四. 保持有用溝通，輸出并跟進(jìn)設(shè)計(jì)實(shí)現(xiàn)

設(shè)計(jì)過程中很可能碰到產(chǎn)品需求有調(diào)整的情況，應(yīng)該保持有用溝通，隨時(shí)預(yù)備設(shè)計(jì)修改。那么設(shè)計(jì)完成以后，事情還沒有完，輸出的過程也尤為緊張，輸出設(shè)計(jì)應(yīng)按優(yōu)先級(jí)輸出關(guān)鍵模塊，并分模塊有序輸出；輸出內(nèi)容同一規(guī)范命名，方便開發(fā)使用，形成合格的交付物。同時(shí)，設(shè)計(jì)過程中就應(yīng)該規(guī)范命名，這直接關(guān)系著后期輸出的流暢，圖層分層和文件夾的歸類也應(yīng)該按網(wǎng)頁(yè)邏輯，以便其它設(shè)計(jì)師使用時(shí)也清晰了然，削減磨合過程。設(shè)計(jì)還應(yīng)定期檢查開發(fā)的設(shè)計(jì)實(shí)現(xiàn)，碰到題目羅列并跟進(jìn)修改。

總結(jié)

視覺設(shè)計(jì)師尋常可以做些繪畫演習(xí)，多欣賞良好的設(shè)計(jì)，保持基本的審美水平，同時(shí)提拔用戶體驗(yàn)知識(shí)，分析不同的產(chǎn)品設(shè)計(jì)背后的動(dòng)機(jī)，畢竟視覺設(shè)計(jì)不只是把產(chǎn)品做悅目就行了。