本文將講解設(shè)計前、中、后的結(jié)構(gòu)，總結(jié)設(shè)計師在什么樣的階段采取什么樣的策略能提高過稿率。

上篇回顧：

過了“望聞問切”的設(shè)計需求評估分析階段，已經(jīng)有了較為深入的了解，可以針對產(chǎn)品目標(biāo)、制定設(shè)計目標(biāo)。在交互設(shè)計輸出后，視覺設(shè)計可以轉(zhuǎn)戰(zhàn)如第二階段大展拳腳！

關(guān)鍵詞：方向、分析、輸出

1. 按流程輸出避免返工

按照流程輸出的好處：能夠達(dá)成方向的共識，提升設(shè)計的效率。避免或減少我們再輸出了全部頁面之后，相關(guān)決策人提出風(fēng)格不符合推翻重來或反復(fù)加入自己的主觀審美爭論不休。

我們部門的會將視覺設(shè)計主流程按節(jié)點拆解為：

階段 1：確定風(fēng)格

好的開頭時成功的一半。若大方向若不對，后面的努力都是白費。產(chǎn)品在 0-1 探索階段或 1-2 視覺升級版本的階段，我們需要花費較多的時間去確定風(fēng)格。有些產(chǎn)品不理解這步的必要性催著設(shè)計立即執(zhí)行，設(shè)計師有必要科普下情緒板的指南針作用，磨刀不誤砍柴工。合理利用設(shè)計工具：

1. 能夠與相關(guān)決策者以較小的時間和實踐成本達(dá)成風(fēng)格共識。
2. 設(shè)計師也在著手設(shè)計前做到成竹在胸，圍繞著“關(guān)鍵詞”作為方向錨點進(jìn)行設(shè)計，降低后續(xù)方向跑偏的風(fēng)險。
3. 后續(xù)可以在評審作為設(shè)計考核的判斷依據(jù)。

（1）因果正向推導(dǎo)：情緒板找大感覺

情緒板一般是根據(jù)我們自身產(chǎn)品、人群定位——分析關(guān)鍵詞——尋找代表性圖像——指導(dǎo)設(shè)計。找到大的感覺方向，再去推導(dǎo)設(shè)計結(jié)果。從“為什么why”去推導(dǎo)“是什么what”。

在使用情緒板時，除了圖片羅列，我還會為提取風(fēng)格的名稱或關(guān)鍵詞作為標(biāo)題、列出根據(jù)關(guān)鍵詞（視覺映射、感覺映射、具象映射），提取歸納共性的色彩、質(zhì)感、形狀等。包括適用的場景、優(yōu)勢劣勢、風(fēng)險成本機(jī)會等角度分析，幫助產(chǎn)品理解。如果時間充裕，可以邀請用戶或相關(guān)決策者共同參與情緒板的關(guān)鍵詞、和圖片篩選。網(wǎng)上有很多制作情緒板的方法這里就不展開了。

（2）果因逆向推倒：競品分析、拆解

競品分析往往是根據(jù)已有的設(shè)計結(jié)果去拆解：

界面帶來什么樣的大方向感受？拆分頁面結(jié)構(gòu)&設(shè)計元素“形、色、字、質(zhì)、構(gòu)、動”如何配合實現(xiàn)？有什么樣的創(chuàng)新和可借鑒的地方？為什么要采取這樣的設(shè)計策略，他的目標(biāo)用戶、承載的內(nèi)容、和產(chǎn)品定位是怎樣的？從“是什么(what)”去推導(dǎo)“為什么(why)”。

兩者都有必要性，“情緒板”我們根據(jù)實際情況可以采取抽象自然的物像，也可以配合更具體的元素拆分。通過對競品的拆解，也會讓我們減少設(shè)計上的“撞衫”和創(chuàng)造“方輪子”，思考為什么大家都用“圓輪子”的合理性。

（3）產(chǎn)品擬人化

一個前輩告訴我的小技巧，覺得挺好用推薦給大家，把產(chǎn)品擬人化：

把你的產(chǎn)品和典型目標(biāo)用戶群里對應(yīng)起來想成一種類型的人，他有什么樣的外形特征，有什么樣的品味，他有怎樣的行為模式，帶入同理心他與別人會如何對話交流。這個形象越是和目標(biāo)用戶重合豐滿，界面設(shè)計風(fēng)格和文案一致性就保持的更好，目標(biāo)群體的自我形象認(rèn)知和產(chǎn)品形象認(rèn)同感就會更吻合。

階段 2：2-3 套主視覺風(fēng)格視覺提案

一般選擇 1-2 個界面，如主頁、詳情頁等界面，或者出現(xiàn)用戶密接頻次最多的操作頁進(jìn)行主視覺風(fēng)格嘗試。以 2 套及以上方向差異性較大方案為佳。

階段 3：全部頁面視覺輸出評審

在風(fēng)格確認(rèn)后，第三節(jié)點全部頁面的輸出要保證重要界面易用，次要界面可用。多花時間和精力放在產(chǎn)品優(yōu)先級高、用戶操作頻次高的界面優(yōu)化上。

階段 4：視覺基礎(chǔ)&控件規(guī)范梳理

其實在做完典型頁面后，已經(jīng)可以開始著手基礎(chǔ)規(guī)范梳理及簡單常用控件規(guī)范。全部頁面完成后對控件規(guī)范進(jìn)行補(bǔ)充整理。規(guī)范的制定，可以讓設(shè)計、開發(fā)協(xié)作更規(guī)范高效。

階段 5：標(biāo)注切圖

現(xiàn)在我們基本上已經(jīng)能夠通過協(xié)同軟件進(jìn)行自動標(biāo)注。但彈性控件，圖片大小屏適配、操作熱區(qū)等，一些設(shè)計師自知而開發(fā)不一定知道的規(guī)律、準(zhǔn)則我們也需要主動用文字標(biāo)注出來，避免因理解不統(tǒng)一造成的開發(fā)翻車，最后設(shè)計也跟著連坐。切圖時提前與開發(fā)預(yù)溝通，可能需要采取一些較為特殊的切圖形式。學(xué)習(xí)“盒模型思維”，用開發(fā)的盒模型思維去切圖標(biāo)注，元素間距、點擊熱區(qū)。

關(guān)于盒模型：

階段 6：開發(fā)跟進(jìn)驗收

設(shè)計不是交出去的那一刻結(jié)束的，提前通知產(chǎn)品、開發(fā)為設(shè)計效果還原驗收預(yù)留時間和還原度程度要求，保證我們的“孩子”能安全落地。一般會在第一輪驗收時以文檔形式：設(shè)計圖和實現(xiàn)圖差異對照標(biāo)注，問題清晰說明并給出解決方案（如間距調(diào)整：XX 間距上移 10px），標(biāo)出優(yōu)先級 p0\p1\p2，對于反復(fù)提交無法達(dá)成一致的問題搬個小凳坐過去可能更高效。

推薦截圖工具 MAC 軟件「xnip」 https://xnipapp.com/

非 Mac 端推薦這款：

2. 如何找參考

沒想法時，如何獲取靈感呢？考驗“搜商”的時候到了，我一般會從以下方向去搜索：

（1）同類產(chǎn)品

同業(yè)務(wù)類型的產(chǎn)品

（2）同形式

同表現(xiàn)形式的，如卡片式、邀請函形式...

（3）同風(fēng)格調(diào)性

同風(fēng)格的如科技風(fēng)格、美漫風(fēng)、酸性風(fēng)、像素風(fēng)、孟菲斯風(fēng)格....感覺關(guān)鍵詞：高端、文藝、小清新、傳統(tǒng)..

（4）跨界突破：跳出自身行業(yè)、產(chǎn)品類型限制。

同行互相看很容易審美趨同，比如這段時間 UI 設(shè)計很流行用磨砂玻璃圖標(biāo)、3D 建模。開始新鮮流行的東西，過一段被大量使用就泯然眾人，同類產(chǎn)品我們看的越多，越容易被反復(fù)強(qiáng)化思維定固住。看同行業(yè)的作品沒想法，完全可以跳出行業(yè)類別，熟悉的事物形態(tài)，去看其他行業(yè)的優(yōu)秀作品，攝影、服裝的肌理、舞臺、工業(yè)造型、海報設(shè)計...，重組融合固有元素。說不定會有新靈感，跳出趨同化。

（5）同目標(biāo)人群

比如我們的目標(biāo)人群是年輕潮人，我們想要打造年輕化的界面。除了用撞色、動感圖形等表達(dá)年輕人的潮、酷等特征。我們也可以下載年輕潮人常用軟件和常看的綜藝節(jié)目，了解年輕人的喜好、表達(dá)方式、行為方式、搭配審美等，針對提取到的特定人性特征，采用更個性化、標(biāo)簽化、流行等元素，表達(dá)采用年輕人的口頭禪。

找到參考之后，不是要照抄，而是要站在巨人的肩膀上學(xué)習(xí)，用“形色字質(zhì)構(gòu)”的分析法拆解表現(xiàn)及原因，再結(jié)合融入到自己的設(shè)計中，新瓶裝舊酒。

3. 誰說視覺設(shè)計不需要動腦！

想的越清楚，對產(chǎn)品 PRD 及用戶深入思考，了解功能，并在設(shè)計稿中得體的表現(xiàn)出來，更大發(fā)揮設(shè)計的價值。

你也可以理直氣壯的說：人、功能、場景、風(fēng)險項我都考慮到了，我這樣設(shè)計都是基于什么樣依據(jù)的得出的。從這些的角度可以更全面的思考設(shè)計：

（1）帶入不同的角色

把自己當(dāng)成用戶，帶入不同的「用戶角色」：新用戶、老用戶、普通用戶、專家用戶的操作經(jīng)驗，是否需要操作新人指引、專業(yè)名詞用戶是否易于理解？重點內(nèi)容該如何強(qiáng)調(diào)？圖標(biāo)的示意是否是可被理解的？

帶入不同的「協(xié)作者角色」：產(chǎn)品希望突出的重點是？開發(fā)的實現(xiàn)成本？運營的包容性怎樣？...

（2）從場景出發(fā)：

場景要素：用戶、需求、事件、環(huán)境狀態(tài)、載體狀態(tài)、人物狀態(tài)

產(chǎn)品組成：形態(tài)、功能、內(nèi)容

用戶通常會在什么樣的時間、地點、滿足什么樣的目的以什么樣的方式使用產(chǎn)品？早、中、晚使用高頻時間段是？使用的環(huán)境是否會有干擾被打斷？是否有多線程任務(wù)需要進(jìn)度提示？...

（3）從功能完成出發(fā)

如何引導(dǎo)用戶操作主線任務(wù)；如何引導(dǎo)用戶分流至支線任務(wù)；如何引導(dǎo)用戶視覺動線、關(guān)注點。目標(biāo)達(dá)成需要增強(qiáng)設(shè)計氛圍感還是信息降噪？信息間的層次該如何區(qū)分？如何避免用戶誤操作？等等

4. 至少 2-3 個方案

（1）自我突破

多出方案多去嘗試，經(jīng)過長期驗證，我發(fā)現(xiàn)最優(yōu)秀的設(shè)計往往不會在第一稿時出現(xiàn)，往往是在自己的能力圈內(nèi)的保守方案，越做越有感覺，越能打破原型圖的布局束縛，長期看對自己的設(shè)計能力也有提升。沒法每次都做到 100 分盡善盡美，但可以每次都嘗試做更好，每天進(jìn)步一點點，瓶頸期的時候才會逐漸突破。

（2）差異化輸出

方案之間的差異性最好大一些，保留保守的方案和大膽突破創(chuàng)新方案，我習(xí)慣在提案時標(biāo)注分析每個方案的特征，和方案的優(yōu)劣點，書面化梳理思路。這對日后整理作品集也會有幫助，幫你想起來當(dāng)時為什么這么想這么做。

（3）更多的選擇

出多個方案也可以在評審時，分散下產(chǎn)品的注意力在選擇上，而不是集中火力對一個方案的挑剔上，多次提出不同的修改意見。甲方總是貪婪的，想要看到更多的可能性，有對比才更方便做決策，那就提前把更多的可能性展示出來。

5. 選擇好看的圖片 or 真實的圖片

結(jié)論是：好看的圖片 or 真實的圖片全都要！

之前發(fā)現(xiàn)很多設(shè)計師，只選擇用好看理想的素材圖片去提升整體的設(shè)計調(diào)性。好看的圖片確實清晰、疏密得當(dāng)，美觀干凈，在提案的時候能讓我們的設(shè)計錦上添花。

但如果項目落地是涉及到用戶可以自由選擇上傳圖片這類 UGC 內(nèi)容，圖片的質(zhì)量就不是我們所能夠把控的。那各種情況都可能發(fā)生：雜亂的圖片、透明的背景、純白純黑的背景都會使得可讀的文字信息或操作圖標(biāo)識別性變差。如果我們在設(shè)計時也用真實情況的圖片去驗證，尋找更好的解決方案，根據(jù)實際情況去添加蒙層、為白色文字加上投影是不是就可以避免這類影響體驗的情況發(fā)生。同理在輸入條件不可控的前提下，盡量多用真實數(shù)據(jù)或素材去更全面驗證設(shè)計的合理性。

例：用戶可自定義背景的復(fù)雜情況影響圖標(biāo)即文字識別

小結(jié)：

設(shè)計中關(guān)鍵詞：多分析、多嘗試、多驗證，意在筆先。下篇分享下提案的一些經(jīng)驗總結(jié)吧～希望與大家多多交流，共同進(jìn)步