本文將講解設計前、中、后的結構,總結設計師在什么樣的階段采取什么樣的策略能提高過稿率。

上篇回顧:

過了“望聞問切”的設計需求評估分析階段,已經有了較為深入的了解,可以針對產品目標、制定設計目標。在交互設計輸出后,視覺設計可以轉戰如第二階段大展拳腳!

關鍵詞:方向、分析、輸出

1. 按流程輸出避免返工

按照流程輸出的好處:能夠達成方向的共識,提升設計的效率。避免或減少我們再輸出了全部頁面之后,相關決策人提出風格不符合推翻重來或反復加入自己的主觀審美爭論不休。

我們部門的會將視覺設計主流程按節點拆解為:

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

階段 1:確定風格

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

  1. 能夠與相關決策者以較小的時間和實踐成本達成風格共識。
  2. 設計師也在著手設計前做到成竹在胸,圍繞著“關鍵詞”作為方向錨點進行設計,降低后續方向跑偏的風險。
  3. 后續可以在評審作為設計考核的判斷依據。

(1)因果正向推導:情緒板找大感覺

情緒板一般是根據我們自身產品、人群定位——分析關鍵詞——尋找代表性圖像——指導設計。找到大的感覺方向,再去推導設計結果。從“為什么why”去推導“是什么what”。

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

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

(2)果因逆向推倒:競品分析、拆解

競品分析往往是根據已有的設計結果去拆解:

界面帶來什么樣的大方向感受?拆分頁面結構&設計元素“形、色、字、質、構、動”如何配合實現?有什么樣的創新和可借鑒的地方?為什么要采取這樣的設計策略,他的目標用戶、承載的內容、和產品定位是怎樣的?從“是什么(what)”去推導“為什么(why)”。

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

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

(3)產品擬人化

一個前輩告訴我的小技巧,覺得挺好用推薦給大家,把產品擬人化:

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

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

階段 2:2-3 套主視覺風格視覺提案

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

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

在風格確認后,第三節點全部頁面的輸出要保證重要界面易用,次要界面可用。多花時間和精力放在產品優先級高、用戶操作頻次高的界面優化上。

階段 4:視覺基礎&控件規范梳理

其實在做完典型頁面后,已經可以開始著手基礎規范梳理及簡單常用控件規范。全部頁面完成后對控件規范進行補充整理。規范的制定,可以讓設計、開發協作更規范高效。

階段 5:標注切圖

現在我們基本上已經能夠通過協同軟件進行自動標注。但彈性控件,圖片大小屏適配、操作熱區等,一些設計師自知而開發不一定知道的規律、準則我們也需要主動用文字標注出來,避免因理解不統一造成的開發翻車,最后設計也跟著連坐。切圖時提前與開發預溝通,可能需要采取一些較為特殊的切圖形式。學習“盒模型思維”,用開發的盒模型思維去切圖標注,元素間距、點擊熱區。

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

關于盒模型:

階段 6:開發跟進驗收

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

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

非 Mac 端推薦這款:

2. 如何找參考

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

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

(1)同類產品

同業務類型的產品

(2)同形式

同表現形式的,如卡片式、邀請函形式...

(3)同風格調性

同風格的如科技風格、美漫風、酸性風、像素風、孟菲斯風格....感覺關鍵詞:高端、文藝、小清新、傳統..

(4)跨界突破:跳出自身行業、產品類型限制。

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

(5)同目標人群

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

找到參考之后,不是要照抄,而是要站在巨人的肩膀上學習,用“形色字質構”的分析法拆解表現及原因,再結合融入到自己的設計中,新瓶裝舊酒。

3. 誰說視覺設計不需要動腦!

想的越清楚,對產品 PRD 及用戶深入思考,了解功能,并在設計稿中得體的表現出來,更大發揮設計的價值。

你也可以理直氣壯的說:人、功能、場景、風險項我都考慮到了,我這樣設計都是基于什么樣依據的得出的。從這些的角度可以更全面的思考設計:

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

(1)帶入不同的角色

把自己當成用戶,帶入不同的「用戶角色」:新用戶、老用戶、普通用戶、專家用戶的操作經驗,是否需要操作新人指引、專業名詞用戶是否易于理解?重點內容該如何強調?圖標的示意是否是可被理解的?

帶入不同的「協作者角色」:產品希望突出的重點是?開發的實現成本?運營的包容性怎樣?...

(2)從場景出發:

場景要素:用戶、需求、事件、環境狀態、載體狀態、人物狀態

產品組成:形態、功能、內容

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

(3)從功能完成出發

如何引導用戶操作主線任務;如何引導用戶分流至支線任務;如何引導用戶視覺動線、關注點。目標達成需要增強設計氛圍感還是信息降噪?信息間的層次該如何區分?如何避免用戶誤操作?等等

4. 至少 2-3 個方案

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

(1)自我突破

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

(2)差異化輸出

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

(3)更多的選擇

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

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

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

結論是:好看的圖片 or 真實的圖片全都要!

之前發現很多設計師,只選擇用好看理想的素材圖片去提升整體的設計調性。好看的圖片確實清晰、疏密得當,美觀干凈,在提案的時候能讓我們的設計錦上添花。

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

例:用戶可自定義背景的復雜情況影響圖標即文字識別

如何快速提高過稿率?我分3個階段幫你完全掌握(中)

小結:

設計中關鍵詞:多分析、多嘗試、多驗證,意在筆先。下篇分享下提案的一些經驗總結吧~希望與大家多多交流,共同進步

收藏 92
點贊 29

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。