“設(shè)計的設(shè)計”五類手法快速提升方案效果
點(diǎn)擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計師一起成長
三分設(shè) x UED聯(lián)盟
有時候結(jié)構(gòu)合理、流程表達(dá)清晰有趣的方案呈現(xiàn)，能讓設(shè)計方案錦上添花。如何讓設(shè)計的方案又快又好的呈現(xiàn)出來？小編就為大家總結(jié)了5類「設(shè)計的設(shè)計」，保存好這些小技巧，突然需要展示設(shè)計稿的時候也不會慌亂無章。
#01
產(chǎn)品主題設(shè)計
產(chǎn)品主題設(shè)計是關(guān)于產(chǎn)品的一個整體表達(dá)，讓瀏覽者對產(chǎn)品大致的功能用途、品牌風(fēng)格有一個整體的印象。通常這里要突出展示一個核心的界面，但如果直接使用界面放入手機(jī)、電腦等mockup，再搭配文案介紹，會顯得單調(diào)并且缺乏感染力?？梢試L試以下手法讓主題頁豐富起來。
01. 結(jié)合實(shí)景實(shí)物
從產(chǎn)品本身功能角度出發(fā)，用一些攝影圖片作為背景氛圍，讓這些而圖片與產(chǎn)品界面中的圖片有延伸和呼應(yīng)，整體感會更強(qiáng)。非常適合有線下場景或是有商品廣告圖的頁面。
▲ 圖片來源 behance
02. 結(jié)合概念場景
使用插畫、3D建模元素打造整體的場景感，也可以將界面作為畫面當(dāng)中的一個元素，例如這個健身題材的app將界面變成了一個跑步機(jī)。為了與整體的畫面更協(xié)調(diào)可以對界面中某些真實(shí)的UI元素進(jìn)行質(zhì)感的處理，但不能過于概念化。
▲ 圖片來源 behance
在展示B端業(yè)務(wù)的產(chǎn)品界面時，我們不太容易找到一些具有感染力的真實(shí)場景，所以與輕質(zhì)感的3D元素結(jié)合是更適合傳遞B端業(yè)務(wù)通常要表達(dá)的簡潔、高效。
▲ 圖片來源 behance
#02
演繹視覺語言
過去常常直接將設(shè)計規(guī)范逐條羅列在一項(xiàng)設(shè)計方展示中，這種無主次、無差異性的規(guī)范羅列除了能夠體現(xiàn)滿滿的“工作量”以外并不是一個好的演繹方式。而是體現(xiàn)背后有一套支撐這些元素定義的設(shè)計理念，對這套設(shè)計理念的有效闡述才是好的視覺語言演繹方式。
01. 特征提煉
我們可以對每一組元素背后的設(shè)計理念進(jìn)行高度提煉，搭配該元素中具備代表性的圖形放大展示，讓讀者可以清晰的了解視覺語言的理念。如下方案展示中，對形、色、質(zhì)、構(gòu)等都有一句特征提煉，結(jié)合旁邊的圖例輔助表達(dá)，我們可以一眼就“get”到它的特點(diǎn)。
▲ NEO - 支付寶營銷設(shè)計語言2.0
02. 動態(tài)化呈現(xiàn)
在一些設(shè)計項(xiàng)目的升級改版中，設(shè)計師想要強(qiáng)調(diào)升級前后的變化，可以嘗試動態(tài)化的方式演繹視覺語言升級，既能夠?qū)⑵放频囊曈X語言演繹的更加生動讓讀者了解其背后的設(shè)計推導(dǎo)過程，也能夠清晰的展示出before—after的變化：
▲ 雪球設(shè)計語言展示
#03
鏈路表達(dá)
交互鏈路表達(dá)，重點(diǎn)是讓旁觀者一眼get產(chǎn)品核心流程，這就需要設(shè)計師在表達(dá)時候抽絲剝繭理出關(guān)鍵節(jié)點(diǎn)、交互亮點(diǎn)，并運(yùn)用恰當(dāng)?shù)氖址ㄟM(jìn)行表達(dá)，避免類似于產(chǎn)品流程圖的邏輯窮舉，也要避免平鋪直敘的進(jìn)行設(shè)計稿的串聯(lián)。
01. 交互界面模擬演繹
關(guān)于鏈路表達(dá)，最直白有效的表達(dá)方式就是界面的模擬演示，適用于流程中設(shè)計亮點(diǎn)的表達(dá)和凸顯，能夠在真實(shí)的操作模擬過程中讓旁觀者快速理解界面交互邏輯的同時，獲取更真實(shí)的交互體感和感官反饋；
▲ 圖片來源 dribbble
02. 全局解讀信息簡化
下圖通過抽取關(guān)鍵鏈路節(jié)點(diǎn)，頁面信息簡化，通過低保真概括頁面特征，配以重點(diǎn)文字說明進(jìn)行鏈路表達(dá)，撥除冗余信息顯得鏈路簡單易懂；
▲ 圖片來源 dribbble
03. 局部解讀放大凸顯
通過動效逐個放大局部信息引導(dǎo)旁觀者進(jìn)行閱讀，暫且不管旁觀者有沒有在晃動的圖片中理解鏈路的邏輯，TA的眼球和情緒已經(jīng)被圖片帶動起來了，情緒調(diào)動是引人入勝、引發(fā)進(jìn)一步理解的關(guān)鍵；
▲ 圖片來源 dribbble
#04
細(xì)節(jié)描繪
01. 細(xì)節(jié)描述的重點(diǎn)強(qiáng)化
業(yè)務(wù)邏輯之外，產(chǎn)品的界面有很多關(guān)鍵功能往往需要被詳細(xì)介紹?？梢赃x取產(chǎn)品界面中的設(shè)計元素運(yùn)用到標(biāo)記視覺符號中，比如主題色、漸變色或者用粗細(xì)動向不同的曲線來鏈接功能點(diǎn)和文字描述，整體文檔看起來調(diào)性統(tǒng)一且細(xì)節(jié)豐富。
▲ 圖片來源 dribbble
02. 界面模塊增強(qiáng)
能讓設(shè)計方案在排列中有呼吸感和視覺重點(diǎn)，那如何再讓整個方案更具細(xì)節(jié)感呢。那么，取1-2個核心模塊做強(qiáng)化是個不錯的選擇。既能讓界面適當(dāng)?shù)钠菩?，也能有利于?qiáng)化一些特殊設(shè)計模塊。
▲ 部分模塊突出
運(yùn)用解構(gòu)的方式來突出關(guān)鍵的的部分。比如打破常理的排版方式，主體方向的改變和超出界面邊界。靜態(tài)界面動態(tài)化的同時，重點(diǎn)信息自然的呈現(xiàn)出來。
▲ 圖片來源 dribbble
#05
方案整體與一致性
在方案呈現(xiàn)中，一定有一環(huán)體現(xiàn)方案一致性和完整度，這時候就需要把核心頁面有節(jié)奏感的展現(xiàn)出來。利用以下3個小技巧，設(shè)計稿呈現(xiàn)質(zhì)感立即拿捏。
01. 編排的呼吸感
在體現(xiàn)頁面一致性且又具有豐富度的大量設(shè)計稿編排時，除了單張設(shè)計稿的美觀度，呼吸感也是極為重要的。在整體編排中可適當(dāng)留白30%的區(qū)域，讓設(shè)計稿密度降低，視覺重點(diǎn)讓觀者更好聚焦核心主界面也同時能感受到設(shè)計方案的完整性和一致性。
▲ 編排的留白與呼吸感
如下，左右對比，能看到左側(cè)有呼吸感和留白的界面呈現(xiàn)能讓頁面更聚焦，也會讓設(shè)計方案更添節(jié)奏感。
▲ 圖片來源 dribbble
02. 色彩的搭配
在色彩占比中，也是有些可以把控的“小心機(jī)”的。適當(dāng)?shù)倪x擇一些色彩較為濃重的界面進(jìn)行整體方案的點(diǎn)綴，會讓方案呈現(xiàn)中會讓人有眼前一亮的視覺沖擊。和適當(dāng)?shù)暮粑写钆?，能起到畫龍點(diǎn)睛的作用。
▲ 編排色彩比重建議
如下圖的一些示例，適當(dāng)?shù)闹厣缑鏁尫桨父霾省?/p>
▲ 圖片來源 dribbble
背景的小心機(jī)：當(dāng)然有些設(shè)計師們的設(shè)計方案如果核心界面色彩都比較平均時，沒有辦法通過色彩的節(jié)奏去提升整改方案時，對于背景的設(shè)計也會讓方案提升整個檔次哦。
▲ 背景光影感和色彩添加 （圖片來源 dribbble）
03. 編排的角度
常規(guī)的45度角編排和上下錯落的編排都是比較好的選擇，使頁面有序呈現(xiàn)。但是有時候一些前后景的差異和角度變化，會使界面靈動起來。統(tǒng)一的角度，能讓頁面更加靈動。
▲ 3類編排建議（圖片來源 dribbble）
45度逆時針傾斜：遵循用戶瀏覽習(xí)慣從上至下、從左至右，有序、透氣，但會忽略頁面模塊，單獨(dú)關(guān)注細(xì)節(jié)時造成視覺誤差。
正常平鋪：適當(dāng)?shù)淖錾舷洛e位能最大程度的真實(shí)呈現(xiàn)界面效果。
前后景錯落：適用于2-4頁的展示，界面能清晰呈現(xiàn)模塊也同時整體體現(xiàn)趣味性。
寫在最后
看了這五類「設(shè)計的設(shè)計」，有些小心機(jī)，稍稍調(diào)整界面角度就會讓方案總結(jié)的時候也更清晰、界面節(jié)奏更明快。當(dāng)然還肯定還有一些更好的設(shè)計表達(dá)，快來評論區(qū)里分享一下“你見過的優(yōu)秀的方案表達(dá)設(shè)計”。