AAA教育

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

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

1. 斜放界面

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

斜放界面設(shè)計(jì)非常活潑，整個(gè)界面有律動(dòng)感，不會(huì)呆板，并且還會(huì)給人一種無線延伸的感覺。

圖1

圖2

但因?yàn)槭切狈诺慕缑妫圆豢杀苊獾臅?huì)讓部分界面設(shè)計(jì)擋在版面之外，比如像圖2的左下角的界面，只露出了非常少的一部分設(shè)計(jì)，其他部分都看不清楚，這個(gè)是斜放界面的一個(gè)缺點(diǎn)。大家在使用該方式表現(xiàn)效果時(shí)，布圖需要謹(jǐn)慎一些，盡量把最重要的界面放到中間部分，其他界面再排到周圍，會(huì)比較合適。

圖3

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

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

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

圖4

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

圖5

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

圖6

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

3. 平鋪界面

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

圖7

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

圖8

4. 攤開界面

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

圖9

圖10

5. 背景圖設(shè)計(jì)

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

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

圖11

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

圖12

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

圖13

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

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

圖14

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

圖16

圖17

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

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