一、為什么設(shè)計(jì)師要做調(diào)研分析

其實(shí)大部分的視覺(jué)設(shè)計(jì)師經(jīng)過(guò)一兩年工作經(jīng)驗(yàn)的積累，已經(jīng)能掌握大部分常用的軟件操作和視覺(jué)風(fēng)格，那如何在自己已有的技能之上將設(shè)計(jì)結(jié)果發(fā)揮的更好呢？這就需要我們更深的從產(chǎn)品、市場(chǎng)等方向去思考，而不僅限于產(chǎn)品經(jīng)理所歸納的原型框架內(nèi)。

一部分新手設(shè)計(jì)師的工作流程是：拿到原型圖就開(kāi)始去著手設(shè)計(jì)，并沒(méi)有經(jīng)過(guò)產(chǎn)品分析、競(jìng)品對(duì)比等流程，缺乏理論支撐，這樣設(shè)計(jì)輸出的結(jié)果可能更多地會(huì)建立在自己主觀的理解與想象上，視野不夠全面，也不能吸收與改良競(jìng)爭(zhēng)對(duì)手的優(yōu)缺點(diǎn)，導(dǎo)致產(chǎn)品后期迭代、反饋、修改的周期變長(zhǎng)，設(shè)計(jì)結(jié)果不如人意。

只有在對(duì)自己所要設(shè)計(jì)的產(chǎn)品從邏輯和市場(chǎng)等方向深入思考之后，在制定設(shè)計(jì)風(fēng)格及頁(yè)面繪制的時(shí)候才能更加的得心應(yīng)手、運(yùn)用自如。同時(shí)經(jīng)過(guò)充分的調(diào)研分析、對(duì)比評(píng)測(cè)后得出的結(jié)論，能更好的向其他參與項(xiàng)目的人溝通介紹，讓上層管理及程序協(xié)同的同事信任我們的專(zhuān)業(yè)能力，過(guò)稿的幾率也就會(huì)更大。當(dāng)我們思考問(wèn)題的路徑是正確的時(shí)候，會(huì)發(fā)現(xiàn)看待問(wèn)題的視角也會(huì)不同，可能會(huì)發(fā)現(xiàn)很多隱藏著的不同視角，從而更好的去解決問(wèn)題。

通過(guò)自己工作這段時(shí)間接觸的一些項(xiàng)目來(lái)看，其實(shí)很多甲方并不是真的知道自己的產(chǎn)品應(yīng)該設(shè)計(jì)成什么樣，這就需要設(shè)計(jì)師對(duì)項(xiàng)目進(jìn)行更深的了解才能做出符合要求的設(shè)計(jì)。我很喜歡一條設(shè)計(jì)原則：先做對(duì)，再做好。就是首先我們要做的設(shè)計(jì)是對(duì)的，是符合市場(chǎng)需求貼近用戶(hù)習(xí)慣的，在此基礎(chǔ)上再進(jìn)行美學(xué)、藝術(shù)以及情感化處理。這也正是因?yàn)樵O(shè)計(jì)師本身職能的特殊性，正如大家常聽(tīng)的一句話(huà)：設(shè)計(jì)是解決問(wèn)題的。我們從事設(shè)計(jì)的時(shí)間越長(zhǎng)這一點(diǎn)被驗(yàn)證的就會(huì)越徹底。

例如一把椅子，首先是應(yīng)該能坐的，再優(yōu)化一點(diǎn)是使人們坐的舒適，想要更完善一點(diǎn)：那就要考慮到椅子的使用場(chǎng)景，椅子要放在哪兒，哪些人會(huì)使用這把椅子，他們主要在什么樣的時(shí)間段使用椅子，用戶(hù)群的身高和體重在怎樣的范圍內(nèi)等等，之后要考慮的才是怎樣把這把椅子裝飾的好看一點(diǎn)，放在我們所指定的場(chǎng)景里與空間的搭配更融合一點(diǎn)。你看在這個(gè)例子里其實(shí)最不重要的是最后一步。而現(xiàn)在很多的設(shè)計(jì)師做設(shè)計(jì)的順序可能一開(kāi)始就是反的，先考慮的是視覺(jué)效果、其次是使用場(chǎng)景、最后這個(gè)產(chǎn)品落地可能是很難用的。

因此，對(duì)于設(shè)計(jì)師來(lái)說(shuō)我們要做的是：針對(duì)什么樣的人解決他們什么樣的問(wèn)題，那么項(xiàng)目調(diào)研就顯得格外重要。

二、產(chǎn)品設(shè)計(jì)分析案例

以我設(shè)計(jì)的一款海外APP設(shè)計(jì)為例來(lái)說(shuō)明視覺(jué)調(diào)研的大致內(nèi)容，首先從目標(biāo)受眾對(duì)于軟件界面的操作習(xí)慣與設(shè)計(jì)結(jié)構(gòu)來(lái)說(shuō)。我們都知道中國(guó)人比較喜歡鮮亮/有節(jié)日氣氛/熱鬧的展示方式和配色。這樣一方面是為了用顏色引導(dǎo)消費(fèi)者，營(yíng)造節(jié)假日的活動(dòng)氣氛，刺激用戶(hù)點(diǎn)擊欲；另一方面，國(guó)內(nèi)互聯(lián)網(wǎng)市場(chǎng)同行業(yè)內(nèi)飽和度高、競(jìng)品太多，需要利用大量設(shè)計(jì)上的差異化拉開(kāi)和競(jìng)品的差距，留住用戶(hù)。

而海外地廣人稀（人口主要集中在大城市），人力資源成本過(guò)高,互聯(lián)網(wǎng)產(chǎn)業(yè)沒(méi)有中國(guó)這么蓬勃，導(dǎo)致了行業(yè)壟斷的嚴(yán)重性。由于同類(lèi)競(jìng)品太少，用戶(hù)選擇范圍狹窄，因此產(chǎn)品設(shè)計(jì)方式和中國(guó)有所差異：對(duì)于廠商來(lái)說(shuō)只關(guān)心顧客能不能有效轉(zhuǎn)化，想要的信息能不能傳輸?shù)?，?duì)于視覺(jué)設(shè)計(jì)及品牌營(yíng)造相比于中國(guó)重視度會(huì)輕一些。

由于地域環(huán)境和用戶(hù)行為習(xí)慣的差異，導(dǎo)致西方國(guó)家在進(jìn)行軟件操作時(shí)，出發(fā)點(diǎn)也跟國(guó)人不同。當(dāng)?shù)鼗ヂ?lián)網(wǎng)環(huán)境競(jìng)品較少，因此很多用戶(hù)在使用前不會(huì)做很多對(duì)比分析的工作，更多的是從自己主觀需求出發(fā)，目的導(dǎo)向明確。所以在設(shè)計(jì)中會(huì)采取簡(jiǎn)潔、清晰導(dǎo)向明確的展示方式，將最重要的信息展示在用戶(hù)前幾次點(diǎn)擊內(nèi)，讓用戶(hù)能盡快點(diǎn)擊或滑動(dòng)能找到自己所需要的功能入口。而在海外本土軟件上，并不像國(guó)內(nèi)軟件一樣用大量的圖標(biāo)/色彩/輔助圖形去做設(shè)計(jì)，而是簡(jiǎn)單直接的展示信息和功能入口，圖標(biāo)的顏色都采用了弱化處理，減少對(duì)文字及圖片信息的視覺(jué)干擾。使用戶(hù)能只專(zhuān)注信息本身的內(nèi)容，找到自己需要的功能入口。

總結(jié)：簡(jiǎn)約的視覺(jué)風(fēng)格也并非沒(méi)有優(yōu)化空間。視覺(jué)風(fēng)格的簡(jiǎn)單、直接，并不代表效率并不一定是最高的，可以通過(guò)信息層級(jí)的分類(lèi)、對(duì)比、收納以及輔助色的加入，使內(nèi)容展示變得更清晰，操作效率也會(huì)有明顯提升。

視覺(jué)設(shè)計(jì)的本質(zhì)是“信息重組”，在設(shè)計(jì)的過(guò)程中需要兼顧產(chǎn)品功能。一個(gè)界面設(shè)計(jì)衡量的標(biāo)準(zhǔn)是 : 功能 > 信息 > 形式,這里面的關(guān)系并非互斥，也就是好看的界面不一定就是難用的，好用的界面也不一定就是丑的。而最重要的是在功能明確的狀態(tài)下把頁(yè)面美觀度做到最好，這樣就會(huì)在同類(lèi)產(chǎn)品中脫穎而出了。

三、項(xiàng)目進(jìn)行中的工作流程

在對(duì)產(chǎn)品和視覺(jué)有充分了解以后我們便可以開(kāi)始著手做設(shè)計(jì)。在一個(gè)大型產(chǎn)品設(shè)計(jì)進(jìn)行過(guò)程中，需要保持四個(gè)好習(xí)慣:

1、先全面再具體

大型項(xiàng)目中設(shè)計(jì)師的設(shè)計(jì)周期大部分是控制比較緊的，而且還涉及到向上下游的對(duì)接，在產(chǎn)品方案上出現(xiàn)變化或開(kāi)發(fā)端實(shí)現(xiàn)效果不理想都有可能隨時(shí)改動(dòng)設(shè)計(jì)方案，因此在 1.0 版本上線(xiàn)前，建議大家在設(shè)計(jì)完成度上不要要求特別高，應(yīng)該將主要精力投入在產(chǎn)品的主要功能上，在項(xiàng)目的主要功能都完善好、評(píng)審?fù)ㄟ^(guò)之后，再去投入精力細(xì)化完善設(shè)計(jì)，這樣不僅節(jié)約了1.0版本的設(shè)計(jì)時(shí)間，也能使整個(gè)項(xiàng)目進(jìn)程更加順利，設(shè)計(jì)師和程序員少一些改稿返工。

2、上下游的溝通協(xié)調(diào)

大部分的設(shè)計(jì)師是不善言辭的，可是內(nèi)向的性格不論是在職場(chǎng)中還是在生活里都對(duì)自身發(fā)展不利，而在產(chǎn)品設(shè)計(jì)過(guò)程中，如果我們遇到問(wèn)題不跟產(chǎn)品、程序多去溝通交流，僅憑自己主觀理解去設(shè)計(jì)很容易導(dǎo)致改稿延誤開(kāi)發(fā)進(jìn)度。事實(shí)上，經(jīng)驗(yàn)越豐富的設(shè)計(jì)師在項(xiàng)目進(jìn)程中提的問(wèn)題以及向上下游協(xié)調(diào)所用的精力越多，因?yàn)檫@樣不僅會(huì)使你的同事對(duì)你認(rèn)真負(fù)責(zé)的態(tài)度留下好印象，而且也解決了你在設(shè)計(jì)過(guò)程中的攔阻與困惑，使你的工作開(kāi)展的更加順利。

3、多想一步

在接到原型設(shè)計(jì)稿之前，先別著急入手去設(shè)計(jì)，最好能根據(jù)產(chǎn)品方給來(lái)的原型圖在紙上或xmind 里畫(huà)出一副自己的思維導(dǎo)圖，弄清楚產(chǎn)品的邏輯跳轉(zhuǎn)關(guān)系，以及產(chǎn)品的一級(jí)和二級(jí)功能，以便我們的設(shè)計(jì)成果能更貼近甲方需求，甚至我們可以在理清楚邏輯之后對(duì)產(chǎn)品的功能點(diǎn)提出自己的合理化建議，這樣不僅能有效減少后期的修改返工，還能提升我們?cè)诩追叫睦锏膶?zhuān)業(yè)度，贏得信賴(lài)。

Tips ：在設(shè)計(jì)制作的過(guò)程中，我們可以根據(jù)事先整理好的思維導(dǎo)圖有效設(shè)計(jì)，有疑問(wèn)或者覺(jué)得自己可以?xún)?yōu)化的點(diǎn)都列在小本子里，在跟甲方溝通的時(shí)候，可以統(tǒng)一跟甲方提出自己的建議，最好能根據(jù)理解多輸出幾套設(shè)計(jì)方案，體現(xiàn)設(shè)計(jì)師對(duì)產(chǎn)品的用心專(zhuān)注度。

4、多做一步

大部分設(shè)計(jì)師在制作設(shè)計(jì)稿時(shí)更多的是依賴(lài)自己已有的設(shè)計(jì)習(xí)慣，而在一些較大的互聯(lián)網(wǎng)公司，對(duì)于設(shè)計(jì)工具的使用、項(xiàng)目文件的整理都有比較嚴(yán)格的規(guī)范，因此，我們平常在設(shè)計(jì)制作時(shí)，最好養(yǎng)成整理源文件、圖層的好習(xí)慣，這樣后期與其他設(shè)計(jì)師交接工作或是向甲方交接設(shè)計(jì)源文件時(shí)，能讓對(duì)方感知到我們的細(xì)致專(zhuān)業(yè)程度，也方便他人修改或調(diào)試。

如果有機(jī)會(huì)和程序員交接開(kāi)發(fā)的話(huà)，也最好先詢(xún)問(wèn)清楚程序員的開(kāi)發(fā)習(xí)慣。需要我們輸出哪些內(nèi)容，哪幾種分辨率，是否需要輸出 svg 等等，設(shè)計(jì)前簡(jiǎn)短的溝通，既減少了雙方的工作量，也能使最后開(kāi)發(fā)結(jié)果還原度更高，保證產(chǎn)品的落地質(zhì)量。

四、項(xiàng)目結(jié)束后的工作

在進(jìn)行完設(shè)計(jì)制作的過(guò)程之后，并不意味著我們的工作就全部結(jié)束了，優(yōu)秀的設(shè)計(jì)師更應(yīng)該要多做幾步：

1、差缺補(bǔ)漏、審查核對(duì)

在進(jìn)行完第一版所有頁(yè)面的設(shè)計(jì)之后， 我們可以利用程序員開(kāi)發(fā)測(cè)試的空余時(shí)間段，對(duì)已經(jīng)設(shè)計(jì)完成的頁(yè)面進(jìn)行查漏補(bǔ)缺，仔細(xì)核對(duì)原型圖與輸出高保真頁(yè)面之間的功能、內(nèi)容是否完整，設(shè)計(jì)中的圖標(biāo)樣式是否統(tǒng)一等等，對(duì)于一些項(xiàng)目周期比較緊張的大型應(yīng)用來(lái)說(shuō)，很多時(shí)候留給設(shè)計(jì)師的制圖時(shí)間不是特別寬裕的，而且設(shè)計(jì)往往會(huì)與開(kāi)發(fā)同時(shí)并行，因此我們?cè)谧鲈O(shè)計(jì)優(yōu)化時(shí)，需要去及時(shí)詢(xún)問(wèn)程序員的開(kāi)發(fā)進(jìn)度，對(duì)已經(jīng)開(kāi)發(fā)完成的頁(yè)面盡量不要做大規(guī)模的修改調(diào)整，這樣會(huì)拖慢整個(gè)項(xiàng)目的迭代進(jìn)度，可以將可以?xún)?yōu)化的部分全部整理標(biāo)注，放到下一個(gè)迭代周期里，以此來(lái)保證項(xiàng)目的完成進(jìn)度。

如今各類(lèi)互聯(lián)網(wǎng)產(chǎn)品在國(guó)內(nèi)已經(jīng)相當(dāng)成熟，市場(chǎng)競(jìng)爭(zhēng)、行業(yè)壓力迫使大部分公司沒(méi)有足夠的耐心在完整打磨好一款產(chǎn)品之后發(fā)布，而大家的方式往往是出快招，打快拳，在產(chǎn)品基礎(chǔ)功能沒(méi)有太大問(wèn)題的基礎(chǔ)上快速發(fā)布，快速迭代，以此來(lái)適應(yīng)市場(chǎng)，之后根據(jù)用戶(hù)反饋快速調(diào)整產(chǎn)品策略。設(shè)計(jì)師作為產(chǎn)品制作流程中的一員，也要具備宏觀意識(shí)，懂得產(chǎn)品的商業(yè)策略，才能更好的配合上下游完成工作。

2、設(shè)計(jì)規(guī)范總結(jié)及完善

在大部分的設(shè)計(jì)流程中，我的習(xí)慣一般是先去做設(shè)計(jì)執(zhí)行，在過(guò)程中慢慢調(diào)整優(yōu)化，最終再去總結(jié)設(shè)計(jì)規(guī)范。因?yàn)樵谠O(shè)計(jì)之初我們可能對(duì)執(zhí)行中所面臨的實(shí)際問(wèn)題預(yù)判不到位，導(dǎo)致最初設(shè)定的規(guī)范需要做大幅度更改，這樣就耽誤了我們的設(shè)計(jì)進(jìn)度，還需要不斷地去修正規(guī)范耽誤時(shí)間。而在設(shè)計(jì)結(jié)束之后，設(shè)計(jì)師有充分的時(shí)間對(duì)設(shè)計(jì)輸出進(jìn)行歸納整理，并從中提取設(shè)計(jì)規(guī)范，既節(jié)約了時(shí)間，又能得到一份完整的規(guī)范輸出，提高了工作效率。

3、設(shè)計(jì)作品輸出及總結(jié)

很多小伙伴在完成設(shè)計(jì)輸出之后，就會(huì)覺(jué)得工作結(jié)束可以好好歇一口氣休息休息了，但如果我們有一些空閑時(shí)間的話(huà)，最好能充分利用起來(lái)，將已經(jīng)完成的設(shè)計(jì)作品做一次歸納總結(jié)，看看自己還有什么不滿(mǎn)意的地方，哪些是由于需求改動(dòng)沒(méi)有達(dá)到設(shè)計(jì)預(yù)期的地方，哪些是因?yàn)闀r(shí)間限制沒(méi)能好好打磨的地方，哪些是自己用心設(shè)計(jì)過(guò)并且加入了自己設(shè)計(jì)理念的地方等等，將這些內(nèi)容做一次歸納總結(jié)，記錄在自己的工作手冊(cè)或 word 文檔里，以此來(lái)記錄自己的設(shè)計(jì)歷程和當(dāng)下的想法。

如果時(shí)間充裕，我們還可以將自己所有不滿(mǎn)意的地方做一次重設(shè)，在不考慮產(chǎn)品邏輯的限制下，制作一個(gè)自己理想的設(shè)計(jì)方案，然后將設(shè)計(jì)成果發(fā)到論壇或設(shè)計(jì)網(wǎng)站上聽(tīng)聽(tīng)大家的反饋，這也是能讓我們?cè)O(shè)計(jì)能力進(jìn)步的最快途徑。

最后，還可以把這次的設(shè)計(jì)方案及時(shí)的添加到我們的作品集里，很多小伙伴平時(shí)不太注重打磨自己的作品集，往往是面臨跳槽、新工作機(jī)會(huì)等才開(kāi)始手忙腳亂的抓緊制作，這樣由于時(shí)間和心態(tài)的緊張，很大程度上會(huì)導(dǎo)致制作過(guò)程應(yīng)付糊弄達(dá)不到我們的完美預(yù)期，最后錯(cuò)失了良好的工作機(jī)會(huì)，因此設(shè)計(jì)師最好能養(yǎng)成一個(gè)經(jīng)常增添作品、完善作品集的好習(xí)慣~

五、設(shè)計(jì)原則及Complexion Reducition

1、設(shè)計(jì)原則定義歸納

設(shè)計(jì)是有原則和邏輯可循的，經(jīng)過(guò)原則的規(guī)范可以使畫(huà)面的美觀度和易用度都得到很好地應(yīng)用或改善。而設(shè)計(jì)中的所有原則都可以用審美原則、清晰原則、一致原則、操作原則、控制原則這六項(xiàng)來(lái)歸納，六項(xiàng)原則中對(duì)于應(yīng)用的展現(xiàn)方式和交互規(guī)則都有規(guī)范。

審美原則：好的軟件并不一定是最好看的，而是要符合產(chǎn)品所針對(duì)用戶(hù)群體的審美偏好，年齡、地區(qū)、生活習(xí)慣不同的用戶(hù)群體在對(duì)互聯(lián)網(wǎng)環(huán)境及應(yīng)用的接受度上是不一樣的，這樣就需要針對(duì)不同用戶(hù)的使用習(xí)慣和審美偏好做定制，基于用戶(hù)原有的使用習(xí)慣做視覺(jué)優(yōu)化。

清晰原則：在軟件展示上最重要的就是信息及功能的展示是否清晰，設(shè)計(jì)師一定要把最重要的功能入口用最簡(jiǎn)單的方式展現(xiàn)給用戶(hù)，不要去讓用戶(hù)花時(shí)間研究入口。對(duì)于目的導(dǎo)向強(qiáng)的用戶(hù)來(lái)說(shuō)，如果界面信息展示很復(fù)雜，不能快速找到自己的需求點(diǎn)，大部分人會(huì)喪失耐心，導(dǎo)致用戶(hù)流失。

一致原則：在一個(gè)主品牌類(lèi)目下的應(yīng)用應(yīng)該是跟品牌的契合度較高的，包括色彩風(fēng)格、交互規(guī)范、圖標(biāo)樣式等等。而且在同一個(gè)APP界面內(nèi)，相同類(lèi)型的表單、彈窗、按鈕等也應(yīng)該保持統(tǒng)一性，給用戶(hù)營(yíng)造良好的操作環(huán)境。

操作原則：要盡量保證頁(yè)面上的元素及內(nèi)容是可以讓用戶(hù)操作的，在按鈕、列表、表單這類(lèi)星系中，需要給用戶(hù)操作自由，使用戶(hù)通過(guò)跟軟件的交互讓使用效率提高。

反饋原則：界面中的所有元素在用戶(hù)操作過(guò)后要給予及時(shí)反饋，例如按鈕按下去以后會(huì)改變顏色，刷新界面時(shí)，及時(shí)沒(méi)有內(nèi)容也會(huì)顯示正在加載的GIF動(dòng)畫(huà)，使用戶(hù)得知自己的操作是有反饋的，不會(huì)產(chǎn)生焦慮的抵觸情緒。

控制原則：在用戶(hù)使用軟件的過(guò)程中，盡量保持用戶(hù)對(duì)于軟件的控制權(quán)，將選擇的權(quán)利交給用戶(hù)，這樣能最大程度的保證用戶(hù)操作的自主性，帶來(lái)優(yōu)秀的用戶(hù)體驗(yàn)。

2、Complexion Reducition

由 IOS 興起的設(shè)計(jì)風(fēng)格已經(jīng)快速風(fēng)靡了全球一線(xiàn)互聯(lián)網(wǎng)應(yīng)用，這種風(fēng)格色彩清晰明快，展示內(nèi)容模塊清晰、信息突出，更受到了很多設(shè)計(jì)師的青睞，那么這種設(shè)計(jì)風(fēng)格的特點(diǎn)及規(guī)范有哪些呢？這里列舉了以下 4 種：

克制用色：除了黑白灰這種無(wú)屬性顏色外，盡量少增加其他顏色來(lái)減少畫(huà)面視覺(jué)的干擾。如需要用到其他顏色，盡量與軟件本身色調(diào)保持高度統(tǒng)一。最好用APP本身的內(nèi)容和圖片來(lái)作為整個(gè)軟件的主視覺(jué)。

文字信息突出：最顯眼的標(biāo)題和文字入口做加大加粗處理，使用戶(hù)能明確自己當(dāng)前所處的頁(yè)面位置。次要文字信息利用顏色、大小、距離做區(qū)分處理。

圖標(biāo)風(fēng)格：做為應(yīng)用中的圖標(biāo)主要作用是幫助用戶(hù)快速了解功能入口、提升頁(yè)面美觀度及設(shè)計(jì)感。從設(shè)計(jì)角度而言最重要的是保證圖標(biāo)的識(shí)別性。

信息層級(jí)：將模塊化的信息層級(jí)盡量減少分割條，用留白間隔來(lái)區(qū)分，減少分割條對(duì)畫(huà)面信息的視覺(jué)干擾，使用戶(hù)操作效率提升。

一套優(yōu)秀成熟的 APP 不僅需要設(shè)計(jì)師對(duì)應(yīng)用的視覺(jué)進(jìn)行豐富和設(shè)計(jì)，作為視覺(jué)設(shè)計(jì)師更多地也要從產(chǎn)品的產(chǎn)品定位、目標(biāo)用戶(hù)、主要功能、界面風(fēng)格、交互方式等方向入手，全面參與項(xiàng)目的產(chǎn)品邏輯、流程把控、上下游管理、上線(xiàn)還原度校正等等...... 不過(guò)養(yǎng)成一個(gè)優(yōu)秀的設(shè)計(jì)工作習(xí)慣也絕非一朝一夕，在這篇文章中僅僅分享了一部分對(duì)于設(shè)計(jì)工作的一些方法論和經(jīng)驗(yàn)

作者公眾號(hào)：開(kāi)到茶花