AAA教育

現(xiàn)在UI設(shè)計行業(yè)的需求已經(jīng)飽和，找到一份稱心的UI設(shè)計工作并不容易，若想打動教官，一份美麗的作品集是必不可少的，今天和大家分享一下效果圖的包裝方式，讓作品更加突出、精致，更能打動人。

下面我們從6個方面，說說一些設(shè)計圖的包裝方式：

1. 斜放界面

1. 斜放界面
2. 產(chǎn)品和界面結(jié)合
3. 平鋪界面
4. 攤開界面
5. 背景圖設(shè)計
6. 用戶+載體+使用場景的結(jié)合表現(xiàn)

斜放界面設(shè)計非?；顫?，整個界面有律動感，不會呆板，并且還會給人一種無線延伸的感覺。

圖1

圖2

但因為是斜放的界面，所以不可避免的會讓部分界面設(shè)計擋在版面之外，比如像圖2的左下角的界面，只露出了非常少的一部分設(shè)計，其他部分都看不清楚，這個是斜放界面的一個缺點。大家在使用該方式表現(xiàn)效果時，布圖需要謹慎一些，盡量把最重要的界面放到中間部分，其他界面再排到周圍，會比較合適。

圖3

2. 產(chǎn)品和界面結(jié)合

為了可以直觀的看出設(shè)計在手機、Pad或者電腦上的界面效果，很多交互設(shè)計師會把實體的載體和界面結(jié)合展示，圖4、圖5和圖6都是一些優(yōu)秀的案例。

圖4在展示時，把效果圖和產(chǎn)品的簡單介紹結(jié)合在了一起，感覺非常專業(yè)，是一種很好的效果圖表現(xiàn)方法。

圖4

另外，如果界面的設(shè)計質(zhì)量非常好的話，只要干干凈凈的把載體和界面擺在一起也是可以的，這樣的方式會讓讀者更集中于具體的界面設(shè)計。比如圖5中載體的顏色（手機的顏色）跟背景的顏色的統(tǒng)一，顯得整個畫面更加干凈利索。

圖5

圖6是網(wǎng)頁設(shè)計最終效果圖的表現(xiàn)案例，非常有創(chuàng)意性，所有的界面飄在空中，形式非常自由。

圖6

但有一點需要留意的是，像圖6這樣排列時，大家一定要掌握好其透視關(guān)系，以及把控好布圖的自由程度是。上圖中畫面雖然是隨意漂浮的表現(xiàn)形式，但是整體的界面擺放的方向都是統(tǒng)一的，這樣利于查看界面里的內(nèi)容，同時除了界面和產(chǎn)品之外沒有其他雜七雜八的設(shè)計，不然會讓畫面顯得“亂”過頭。

3. 平鋪界面

平鋪界面是大家常使用的方法，也是最簡單，也最有效的表達方法。像圖7這樣的干干凈凈的對齊，能讓考官一眼看出其關(guān)系，設(shè)計要素在設(shè)計中的應(yīng)用，配色方案以及標識設(shè)計。

圖7

但平鋪界面，建議大家在內(nèi)容設(shè)計和界面設(shè)計的質(zhì)量都非常好的情況下使用，如果設(shè)計的界面內(nèi)容非常多，且無法全部展示的話，大家可以挑選比較關(guān)鍵的Key Screens進行展示，如圖8。

圖8

4. 攤開界面

攤開界面形式，一般應(yīng)用于滑動的界面之間是連在一起的情況。制作的方法是要用載體（手機、Pad、電腦等）來卡住需要顯示的關(guān)鍵界面部分，其他沒能進入到平面里的內(nèi)容可以鋪在載體周圍，示意除了關(guān)鍵界面部分以外還有更多的隱藏內(nèi)容。

圖9

圖10

5. 背景圖設(shè)計

背景圖的設(shè)計可以跟交互產(chǎn)品本身的設(shè)計結(jié)合，背景和界面融合在一起，可以讓版面更加自然。

比如說像圖11，把界面的某個復(fù)雜的圖案放大，將其當作是整個效果圖的表現(xiàn)背景，可以避免畫面太單調(diào)。

圖11

而圖12則是從設(shè)計的要素中提取了顏色和形狀，將這兩者結(jié)合作為背景圖，整體感非常強。

圖12

另外，虛化也是很多交互設(shè)計師愛用的命令之一，虛化背景可以襯托主題，讓讀者更加集中于界面的設(shè)計，讀者明白是其設(shè)計靈感是從何而來的，同時會給人一種優(yōu)雅的朦朧美。大家可以在制作效果圖時，將其合理加入自己的設(shè)計中，可以起到很好的突出作用。

圖13

6. 用戶+載體+使用場景的結(jié)合表現(xiàn)

場景的結(jié)合表現(xiàn)是一種還原使用場景的方法，這樣的效果圖最明顯的特征便是更真實。

圖14

一般來說，場景結(jié)合表現(xiàn)的手法多用在AR項目最終效果圖中。因為AR本身需要采集真實場景的數(shù)據(jù)，并且要把虛擬的設(shè)計放到真實世界，讓真實環(huán)境和虛擬信息在同一個畫面或空間顯示。像圖15和圖16都是很好的例子，這樣的效果圖放到作品集中，考官很容易就可以明白信息和環(huán)境之間的關(guān)系。

圖16

圖17

Final:以上只是幾種效果圖的表現(xiàn)方式，大家在做效果圖時，更為重要的是，要考慮清楚自己設(shè)計中要凸顯某幾個界面，還是全部要展示出來，是要干凈簡潔的效果，還是要用炫酷動感的設(shè)計等問題，只有對自己的設(shè)計有了一定的把控后，才能更好的與這些效果表現(xiàn)形式相契合，從而實現(xiàn)最好的界面效果。

相關(guān)文章《讓設(shè)計更有趣味性的5個Tips》