有時(shí)候結(jié)構(gòu)合理、流程表達(dá)清晰有趣的方案呈現(xiàn)，能讓設(shè)計(jì)方案錦上添花。如何讓設(shè)計(jì)的方案又快又好的呈現(xiàn)出來？小編就為大家總結(jié)了5類「設(shè)計(jì)的設(shè)計(jì)」，保存好這些小技巧，突然需要展示設(shè)計(jì)稿的時(shí)候也不會(huì)慌亂無章。

#01

產(chǎn)品主題設(shè)計(jì)

產(chǎn)品主題設(shè)計(jì)是關(guān)于產(chǎn)品的一個(gè)整體表達(dá)，讓瀏覽者對(duì)產(chǎn)品大致的功能用途、品牌風(fēng)格有一個(gè)整體的印象。通常這里要突出展示一個(gè)核心的界面，但如果直接使用界面放入手機(jī)、電腦等mockup，再搭配文案介紹，會(huì)顯得單調(diào)并且缺乏感染力?？梢試L試以下手法讓主題頁豐富起來。

01. 結(jié)合實(shí)景實(shí)物

從產(chǎn)品本身功能角度出發(fā)，用一些攝影圖片作為背景氛圍，讓這些而圖片與產(chǎn)品界面中的圖片有延伸和呼應(yīng)，整體感會(huì)更強(qiáng)。非常適合有線下場(chǎng)景或是有商品廣告圖的頁面。

▲ 圖片來源 behance

02. 結(jié)合概念場(chǎng)景

使用插畫、3D建模元素打造整體的場(chǎng)景感，也可以將界面作為畫面當(dāng)中的一個(gè)元素，例如這個(gè)健身題材的app將界面變成了一個(gè)跑步機(jī)。為了與整體的畫面更協(xié)調(diào)可以對(duì)界面中某些真實(shí)的UI元素進(jìn)行質(zhì)感的處理，但不能過于概念化。

▲ 圖片來源 behance

在展示B端業(yè)務(wù)的產(chǎn)品界面時(shí)，我們不太容易找到一些具有感染力的真實(shí)場(chǎng)景，所以與輕質(zhì)感的3D元素結(jié)合是更適合傳遞B端業(yè)務(wù)通常要表達(dá)的簡(jiǎn)潔、高效。

▲ 圖片來源 behance

#02

演繹視覺語言

過去常常直接將設(shè)計(jì)規(guī)范逐條羅列在一項(xiàng)設(shè)計(jì)方展示中，這種無主次、無差異性的規(guī)范羅列除了能夠體現(xiàn)滿滿的“工作量”以外并不是一個(gè)好的演繹方式。而是體現(xiàn)背后有一套支撐這些元素定義的設(shè)計(jì)理念，對(duì)這套設(shè)計(jì)理念的有效闡述才是好的視覺語言演繹方式。

01. 特征提煉

我們可以對(duì)每一組元素背后的設(shè)計(jì)理念進(jìn)行高度提煉，搭配該元素中具備代表性的圖形放大展示，讓讀者可以清晰的了解視覺語言的理念。如下方案展示中，對(duì)形、色、質(zhì)、構(gòu)等都有一句特征提煉，結(jié)合旁邊的圖例輔助表達(dá)，我們可以一眼就“get”到它的特點(diǎn)。

▲ NEO - 支付寶營銷設(shè)計(jì)語言2.0

02. 動(dòng)態(tài)化呈現(xiàn)

在一些設(shè)計(jì)項(xiàng)目的升級(jí)改版中，設(shè)計(jì)師想要強(qiáng)調(diào)升級(jí)前后的變化，可以嘗試動(dòng)態(tài)化的方式演繹視覺語言升級(jí)，既能夠?qū)⑵放频囊曈X語言演繹的更加生動(dòng)讓讀者了解其背后的設(shè)計(jì)推導(dǎo)過程，也能夠清晰的展示出before—after的變化：

▲ 雪球設(shè)計(jì)語言展示

#03

鏈路表達(dá)

交互鏈路表達(dá)，重點(diǎn)是讓旁觀者一眼get產(chǎn)品核心流程，這就需要設(shè)計(jì)師在表達(dá)時(shí)候抽絲剝繭理出關(guān)鍵節(jié)點(diǎn)、交互亮點(diǎn)，并運(yùn)用恰當(dāng)?shù)氖址ㄟM(jìn)行表達(dá)，避免類似于產(chǎn)品流程圖的邏輯窮舉，也要避免平鋪直敘的進(jìn)行設(shè)計(jì)稿的串聯(lián)。

01. 交互界面模擬演繹

關(guān)于鏈路表達(dá)，最直白有效的表達(dá)方式就是界面的模擬演示，適用于流程中設(shè)計(jì)亮點(diǎn)的表達(dá)和凸顯，能夠在真實(shí)的操作模擬過程中讓旁觀者快速理解界面交互邏輯的同時(shí)，獲取更真實(shí)的交互體感和感官反饋；

▲ 圖片來源 dribbble

02. 全局解讀信息簡(jiǎn)化

下圖通過抽取關(guān)鍵鏈路節(jié)點(diǎn)，頁面信息簡(jiǎn)化，通過低保真概括頁面特征，配以重點(diǎn)文字說明進(jìn)行鏈路表達(dá)，撥除冗余信息顯得鏈路簡(jiǎn)單易懂；

▲ 圖片來源 dribbble

03. 局部解讀放大凸顯

通過動(dòng)效逐個(gè)放大局部信息引導(dǎo)旁觀者進(jìn)行閱讀，暫且不管旁觀者有沒有在晃動(dòng)的圖片中理解鏈路的邏輯，TA的眼球和情緒已經(jīng)被圖片帶動(dòng)起來了，情緒調(diào)動(dòng)是引人入勝、引發(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è)計(jì)元素運(yùn)用到標(biāo)記視覺符號(hào)中，比如主題色、漸變色或者用粗細(xì)動(dòng)向不同的曲線來鏈接功能點(diǎn)和文字描述，整體文檔看起來調(diào)性統(tǒng)一且細(xì)節(jié)豐富。

▲ 圖片來源 dribbble

02. 界面模塊增強(qiáng)

能讓設(shè)計(jì)方案在排列中有呼吸感和視覺重點(diǎn)，那如何再讓整個(gè)方案更具細(xì)節(jié)感呢。那么，取1-2個(gè)核心模塊做強(qiáng)化是個(gè)不錯(cuò)的選擇。既能讓界面適當(dāng)?shù)钠菩?，也能有利于?qiáng)化一些特殊設(shè)計(jì)模塊。

▲ 部分模塊突出

運(yùn)用解構(gòu)的方式來突出關(guān)鍵的的部分。比如打破常理的排版方式，主體方向的改變和超出界面邊界。靜態(tài)界面動(dòng)態(tài)化的同時(shí)，重點(diǎn)信息自然的呈現(xiàn)出來。

▲ 圖片來源 dribbble

#05

方案整體與一致性

在方案呈現(xiàn)中，一定有一環(huán)體現(xiàn)方案一致性和完整度，這時(shí)候就需要把核心頁面有節(jié)奏感的展現(xiàn)出來。利用以下3個(gè)小技巧，設(shè)計(jì)稿呈現(xiàn)質(zhì)感立即拿捏。

01. 編排的呼吸感

在體現(xiàn)頁面一致性且又具有豐富度的大量設(shè)計(jì)稿編排時(shí)，除了單張?jiān)O(shè)計(jì)稿的美觀度，呼吸感也是極為重要的。在整體編排中可適當(dāng)留白30%的區(qū)域，讓設(shè)計(jì)稿密度降低，視覺重點(diǎn)讓觀者更好聚焦核心主界面也同時(shí)能感受到設(shè)計(jì)方案的完整性和一致性。

▲ 編排的留白與呼吸感

如下，左右對(duì)比，能看到左側(cè)有呼吸感和留白的界面呈現(xiàn)能讓頁面更聚焦，也會(huì)讓設(shè)計(jì)方案更添節(jié)奏感。

▲ 圖片來源 dribbble

02. 色彩的搭配

在色彩占比中，也是有些可以把控的“小心機(jī)”的。適當(dāng)?shù)倪x擇一些色彩較為濃重的界面進(jìn)行整體方案的點(diǎn)綴，會(huì)讓方案呈現(xiàn)中會(huì)讓人有眼前一亮的視覺沖擊。和適當(dāng)?shù)暮粑写钆?，能起到畫龍點(diǎn)睛的作用。

▲ 編排色彩比重建議

如下圖的一些示例，適當(dāng)?shù)闹厣缑鏁?huì)讓方案更出彩。

▲ 圖片來源 dribbble

背景的小心機(jī)：當(dāng)然有些設(shè)計(jì)師們的設(shè)計(jì)方案如果核心界面色彩都比較平均時(shí)，沒有辦法通過色彩的節(jié)奏去提升整改方案時(shí)，對(duì)于背景的設(shè)計(jì)也會(huì)讓方案提升整個(gè)檔次哦。

▲ 背景光影感和色彩添加 （圖片來源 dribbble）

03. 編排的角度

常規(guī)的45度角編排和上下錯(cuò)落的編排都是比較好的選擇，使頁面有序呈現(xiàn)。但是有時(shí)候一些前后景的差異和角度變化，會(huì)使界面靈動(dòng)起來。統(tǒng)一的角度，能讓頁面更加靈動(dòng)。

▲ 3類編排建議（圖片來源 dribbble）

45度逆時(shí)針傾斜：遵循用戶瀏覽習(xí)慣從上至下、從左至右，有序、透氣，但會(huì)忽略頁面模塊，單獨(dú)關(guān)注細(xì)節(jié)時(shí)造成視覺誤差。

正常平鋪：適當(dāng)?shù)淖錾舷洛e(cuò)位能最大程度的真實(shí)呈現(xiàn)界面效果。

前后景錯(cuò)落：適用于2-4頁的展示，界面能清晰呈現(xiàn)模塊也同時(shí)整體體現(xiàn)趣味性。

寫在最后

看了這五類「設(shè)計(jì)的設(shè)計(jì)」，有些小心機(jī)，稍稍調(diào)整界面角度就會(huì)讓方案總結(jié)的時(shí)候也更清晰、界面節(jié)奏更明快。當(dāng)然還肯定還有一些更好的設(shè)計(jì)表達(dá)，快來評(píng)論區(qū)里分享一下“你見過的優(yōu)秀的方案表達(dá)設(shè)計(jì)”。