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

#01

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

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

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

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

▲ 圖片來源 behance

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

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

▲ 圖片來源 behance

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

▲ 圖片來源 behance

#02

演繹視覺語言

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

01. 特征提煉

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

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

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

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

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

#03

鏈路表達

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

01. 交互界面模擬演繹

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

▲ 圖片來源 dribbble

02. 全局解讀信息簡化

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

▲ 圖片來源 dribbble

03. 局部解讀放大凸顯

通過動效逐個放大局部信息引導(dǎo)旁觀者進行閱讀，暫且不管旁觀者有沒有在晃動的圖片中理解鏈路的邏輯，TA的眼球和情緒已經(jīng)被圖片帶動起來了，情緒調(diào)動是引人入勝、引發(fā)進一步理解的關(guān)鍵；

▲ 圖片來源 dribbble

#04

細節(jié)描繪

01. 細節(jié)描述的重點強化

業(yè)務(wù)邏輯之外，產(chǎn)品的界面有很多關(guān)鍵功能往往需要被詳細介紹。可以選取產(chǎn)品界面中的設(shè)計元素運用到標(biāo)記視覺符號中，比如主題色、漸變色或者用粗細動向不同的曲線來鏈接功能點和文字描述，整體文檔看起來調(diào)性統(tǒng)一且細節(jié)豐富。

▲ 圖片來源 dribbble

02. 界面模塊增強

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

▲ 部分模塊突出

運用解構(gòu)的方式來突出關(guān)鍵的的部分。比如打破常理的排版方式，主體方向的改變和超出界面邊界。靜態(tài)界面動態(tài)化的同時，重點信息自然的呈現(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è)計稿密度降低，視覺重點讓觀者更好聚焦核心主界面也同時能感受到設(shè)計方案的完整性和一致性。

▲ 編排的留白與呼吸感

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

▲ 圖片來源 dribbble

02. 色彩的搭配

在色彩占比中，也是有些可以把控的“小心機”的。適當(dāng)?shù)倪x擇一些色彩較為濃重的界面進行整體方案的點綴，會讓方案呈現(xiàn)中會讓人有眼前一亮的視覺沖擊。和適當(dāng)?shù)暮粑写钆洌芷鸬疆孆堻c睛的作用。

▲ 編排色彩比重建議

如下圖的一些示例，適當(dāng)?shù)闹厣缑鏁尫桨父霾省?/p>

▲ 圖片來源 dribbble

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

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

03. 編排的角度

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

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

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

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

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

?

?

寫在最后

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

來源網(wǎng)絡(luò)