如何開啟設計思路，避免不斷改稿？只需提前做好這一步

以下文章來源於ID設計站 ，作者ID設計站


編者按 作為設計師，你是否經常被要求改設計方向？如果是，或許情緒版設計能幫到你。那麼，什麼是情緒版？怎麼做情緒版設計？本文作者將分享一些自己做情緒版設計的經驗方法，希望對大家有所幫助。


我們在設計中經常會遇到新版本或改版的設計，從創意想法到設計初稿的過程可能會花費比較長的時間。而作為設計師除了自己思考設計之外，還需要與產品、設計老大溝通我們的一些設計想法。因此，我們需要在不同的階段輸出不同的內容反饋進度並達成一些共識。

在多年的設計過程中，我也經常會去嘗試一些情緒版的設計，在這方面也沉澱了一些自己做情緒版設計的方法。因此可以藉助這次機會給大家分享下這方面的經驗，同時也希望起到拋磚引玉的作用，與大家交流下這方面的內容。


首先我們要明確什麼是情緒版？我的理解是：情緒版既不是初稿也不是最終的風格方向，而是設計師在瞭解了相關的產品背景後，基於自己對於產品的理解給出的一個較為初始的設計建議，並且希望可以通過這個初始的建議與產品側達成一些相關的設計共識。


情緒版的設計流程大概分為前中後三個階段，前期：分析-收集，中期：篩選-組合，後期：打磨-呈現。


前期：分析-收集

主要是分析產品相關背景或需求本身的方向，結合產品背景及需求本身再進一步分析大概的設計方向並收集相關素材內容。


中期：篩選-組合

當我們收集完成後需要對現有素材進行二次篩選並組合，基於現有素材組合大概的設計方案結構。


後期：打磨-呈現

基礎方案組合完成後需要進行二次打磨，細化方案的內容表現，檢查整體的一致性及完整度，最後呈現給產品方。



可能很多設計師會疑惑為什麼要做情緒版，直接設計初稿不就好了嗎？如果有這個疑問，可能還沒實際瞭解到情緒版的作用。但我們可以試著從我們在設計過程中遇到的痛點來了解情緒版的作用或者意義。

在設計的過程中你是否會存在下面幾個問題：

• 前期思考不夠——設計產出方案少；
• 設計不懼探索性——設計來源沒有考究；
• 初稿多次修改沒能達成共識——設計表達不出對方想要的；
• 設計中期出現不一致——設計沒有貫徹始終。
  

從這幾個問題中，我們可以得到一個比較統一的結論就是：前期設計呈現內容不夠，導致溝通不足而產生方向不統一。因此基於這個關鍵點，我們再來看情緒版的作用。


1、輔助構建世界觀

在前期，世界觀、背景方面的內容大多是以文字的方式呈現，因此設計師可以通過情緒版的方式，來輸出對應的世界觀設計表現，這樣可以更加直觀的表現出對應的視覺語言。


2、具象設計想法

在初期與產品側溝通時，單純靠語言表達的方式很難讓對方達到一種腦補的狀態。因此藉助情緒版的方式更加直觀的呈現設計想法，通過具象的圖形或者圖形，大大降低雙方的溝通成本。


3、明確設計方向

基於第二點的溝通，我們可以明確的瞭解到產品側的一些喜好。為後續設計初稿時起到一個清晰的方向作用。


4、提高前期設計的效率

從零到一設計一套完整的方案往往需要耗費較長的時間，藉助情緒版設計的方式來快速響應一些想法及創意，這樣可以大大提高前期的輸出效率。



從多次的嘗試中，我總結梳理了幾個基本原則，瞭解這些原則可以讓我們在做的時候更加嚴謹，輸出更加準確的設計方案。


1、多方向性

情緒版的設計與我們日常設計一樣，需要給出不同的方向建議，單一的方案往往難以抉擇。多方案輸出除了提升抉擇空間之外，還可以增加方案碰撞的情況，往往可能是方案A的某部分內容疊加方案B的某部分內容才能產生最初的方向。

2、嘗試性

此階段的所有輸出皆屬於嘗試與探索，因此不必過於考究設計細節，重點在於表達出需要相關的設計概念及思考想法，把更多的時間留作設計思考及方案嘗試。

3、效率性

情緒版的輸出重點在於前期溝通而達到一個比較好的共識，因此在保證質量的情況下，避免花費過多的時間而影響輸出的效率性。儘量做到快與準。在過往中專案組，基本上是以半天（4個小時左右）為一個單位來完成一套方案。

4、試探性

情緒版是一種非常有效試探產品側想要往那種方向去推動的方式，因為我們在實際的設計過程中，產品側可能也對整體的設計大調並不少特別有明確的腦補，因此設計師可以藉助情緒版的設計來挖掘產品側想要往哪個方向進行發力。


這裡總結情緒版的設計方法大概有這幾種：

1、參考影像/插圖

在我們設計一些專題活動或者繪製插圖相關的一些設計時，可以考慮使用這種方法來輸出你的情緒版設計，可以通過參考一些設計網站或插圖網站上的現有素材來拼接，並表達自己在這方法的一些設計意圖及想法。


2、結合實際場景引申

從更概念化的角度出發，通過引用一些實際場景、物品、影像，來擴充相關的圖形、質感、色彩方面的設計，並且輸出相關的設計雛形。例如我們在設計LOGO或者圖形類的一些設計，使用這種方法就可以幫助我們突破一些現有的認知壁壘。


3、參考同型別設計

在設計之初，我們通常會有一個大概的思考雛形，但如果直接開始設計往往效率上並不高。因此可以參考一些設計網站上的設計，通過摘取組合的方式呈現自己的初步想法。我通常會在UI新版或者改版的時候使用這種方式，但只能表達大概的想法且不能代表最終的初稿設計。


4、繪製草稿

當我們想要表達一些溝通或者框架的設計時，我們可以使用草稿繪製的方式來表現，這個方式簡單快捷，可以很有效率的對齊大部分的設計共識。



基於原則及方法，我們可以來簡單瞭解下情緒版設計中需要注意的一些事項，通過這些內容讓你在實際操作過程中少踩一些坑。


1、控制方案的數量

設計方案控制在2-3個左右即可，前期大多是屬於試探性方案呈現及找方向，太多則容易導致選擇困難。

2、避免篇幅過長

篇幅過長往往容易降低別人閱讀的耐心，對於情緒版的輸出也是如此。結合過往的經驗，建議以16:9的畫面為一頁來呈現一個方案。

3、區分重點次要

在一頁內呈現的方案避免過於平均，可以適當突出某些想要重點表達的內容，例如在這個方案中想要重點突出圖示、顏色等，那麼這裡需要突出這部分在畫面中的比例，適當縮小其他模組的尺寸。

4、結合世界觀

在輸出情緒版設計方案時還可以適當考慮結合產品的世界觀，通過一些具象化的圖形或者插圖來表現相關的內容。例如我們之前在遊戲中心改版的嘗試中，就發散了幾個相關的世界觀，因此我們在輸出方案時，則只需要把對應的世界觀作為方案，通過情緒版的方式表現出來即可。

5、保持整體風格一致性

一致性是表現一個設計師是否具有系統化、全域性觀的思考思維，因此我們在表現情緒版時也需要關注這方面的內容，避免整體的調性不匹配。

6、完整性表達

在呈現方案時，儘量多維度的進行對比，呈現一個完整性、系統性的設計。例如我們在設計UI相關的內容，從圖示、顏色、字型等等一系列的內容需要細緻的闡述清楚，讓人更加能夠了解你的意圖。


由於我日常以設計UI為主，因此可以給大家重點分享我在UI情緒版設計的經驗。希望可以幫助到大家快速上手。

當你在做UI設計情緒版時，需要明確瞭解UI設計中的結構，更系統性的去思考整體的內容。我們在UI設計中往往需要包含以下這些內容：圖形系統（圖示+輔助圖形）、顏色系統、字型字形系統、質感形態、介面形態、插圖風格、動效系統、影像系統，等等這些部分的內容。


UI情緒版模版


過往實際案例分享

案例一：整體風格比較偏個性一些，頁面嘗試用深色的背景設計。

優點：整體風格比較酷，配色比較未來感符合年輕的人的審美，深色的背景讓內容更加聚焦。

缺點：深色的設計接受度是否可以，是否適合平臺類APP設計。


案例二：整體風格3D化的設計，包括頁面的一些體驗上都可以增加視察的效果來設計。

優點：整體設計風格比較新穎，符合現在的設計趨勢，整體感覺也比較年輕多彩。

缺點：3D的製作成本相對較大。


案例三：整體風格比較清爽，白色融入漸變的設計也會顯得比較年輕。

優點：整體頁面清爽，可以滿足任何內容的透出，漸變色的圖示和按鈕的設計補充了細節。

缺點：整體氛圍感、娛樂感較弱。



很多時候我們會覺得情緒版設計可有可無，或者因為時間的關係不允許我們經過這一步。但，如我一開始提到的點，情緒版可以在前期幫助我們去打通很多思考的壁壘，輔助設計師在前期直觀的與產品側進行方向上的探討，從而找到大方向上的共識。

以上都是屬於我個人總結的一些經驗，因此建議大家在日常專案中多去嘗試，並在嘗試中找到適合自己的方法。


來源：ID設計站
原文：https://mp.weixin.qq.com/s/JAR2dVZGJJ8pPVuLXeGPag