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

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

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

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

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

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

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

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

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

而海外地廣人?。ㄈ丝谥饕性诖蟪鞘校?，人力資源成本過高,互聯(lián)網(wǎng)產(chǎn)業(yè)沒有中國這么蓬勃，導(dǎo)致了行業(yè)壟斷的嚴(yán)重性。由于同類競品太少，用戶選擇范圍狹窄，因此產(chǎn)品設(shè)計方式和中國有所差異：對于廠商來說只關(guān)心顧客能不能有效轉(zhuǎn)化，想要的信息能不能傳輸?shù)?，對于視覺設(shè)計及品牌營造相比于中國重視度會輕一些。

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

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

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

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

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

1、先全面再具體

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

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

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

3、多想一步

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

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

4、多做一步

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2、Complexion Reducition

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

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

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

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

信息層級：將模塊化的信息層級盡量減少分割條，用留白間隔來區(qū)分，減少分割條對畫面信息的視覺干擾，使用戶操作效率提升。

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

作者公眾號：開到茶花