一份優(yōu)秀UI設(shè)計(jì)作品集的包裝技巧

　　有多少人在意過自己的作品集包裝，并因?yàn)?a href="http://lb577.com/ui/3097.html" target="_blank">優(yōu)秀的作品集成功拿到offer的呢?我想作品集應(yīng)該是大家比較容易忽略的一個(gè)問題，認(rèn)為工作是靠實(shí)力說話，沒有必要額外包裝作品集。話這么說沒有錯(cuò)，但是在同等條件下，優(yōu)秀的作品集能給設(shè)計(jì)師爭取更大的機(jī)會(huì)得到offer，因此作品集包裝和個(gè)人能力一樣重要。想知道該如何包裝優(yōu)秀的作品集呢?一起來看看AAA教育武老師的分享吧。
 

　　視覺好的作品集與欠缺的作品集都長什么樣?
 

　　以下作品集視覺包裝效果評(píng)級(jí)屬于個(gè)人看法，可能會(huì)出現(xiàn)誤差。
 

　　欠缺
 

　　優(yōu)秀
 

　　影響作品集視覺的因素有哪些?
 

　　通過上面的內(nèi)容，相信大家對(duì)上面作品的視覺好壞都有自己的評(píng)級(jí)。那么大家可以稍微停頓一下，現(xiàn)在我想隔著屏幕提一個(gè)問題，你認(rèn)為影響到作品集好不好看的因素到底有哪些?(展示拋開封面設(shè)計(jì))換句話說大家回想一下自己看到一個(gè)優(yōu)秀作品的時(shí)候，你會(huì)覺得他的那些點(diǎn)給你感覺好看?思考30秒….相信大家或多或少都能舉例出來一些因素，或許不全面，沒關(guān)系。接下來我也會(huì)把我自己總結(jié)的一些內(nèi)容分享給大家，希望能給到大家一個(gè)更全面的了解。
 

　　我根據(jù)自己的素材庫總結(jié)出來以下幾個(gè)點(diǎn)：
 

　　樣機(jī)
 

　　字體選擇
 

　　界面配圖
 

　　色彩搭配
 

　　排版布局
 

　　元素點(diǎn)綴
 

　　對(duì)應(yīng)在作品集中如下所示
 

　　3.1樣機(jī)使用建議
 

　　絕對(duì)不要使用太老款的樣機(jī)，然后可以稍微穿插的使用一些角度的，給自己作品集多一些變化，再有網(wǎng)上可以找到的一些各式各樣品質(zhì)很高的也可以，最近比較流行的C4D模型的也很棒，目的都是為了給自己作品集多一些視覺變化，避免太平緩、呆板，但是需要注意的是你的作品是給人看的，不要全部都是帶透視角度，這樣看不到頁面細(xì)節(jié)，樣機(jī)雖好，但不要貪杯。
 

　　3.2常用字體推薦
 

　　這一篇是推薦的一些使用起來不容易出問題的字體，大家有需要的可以自行下載嘗試，也可根據(jù)項(xiàng)目風(fēng)格自行搭配。
 

　　3.3界面配圖注意事項(xiàng)
 

　　界面配圖遵循高清無碼、簡潔、與產(chǎn)品內(nèi)容相關(guān)聯(lián)(旅游產(chǎn)品配旅游圖片)、與整體視覺風(fēng)格保持一致(色彩傾向產(chǎn)品主色)
 

　　3.4色彩搭配方法
 

　　這里主要講到的就是，假如我們想定制一套風(fēng)格比較鮮明的作品集時(shí)，怎么確定配色。就跟我們?cè)诋嫿缑鏁r(shí)想要表現(xiàn)的品牌感是一樣的道理，給你的作品集建立一個(gè)視覺差異化。假如你不知道怎么配色的時(shí)候，可以看下別人是怎么配色的。我這里從dribbble找到了幾個(gè)界面，我們看下他們是怎么進(jìn)行色彩搭配的：
 

　　首先是第一套，tab可以看出他的品牌色是深藍(lán)色，其他重要的輔助色是紅色，次要輔助色是黃色，可以看到用色存在一定的比例，這個(gè)比例接近6：3：1。
 

　　再有就是輔助色的挑選，第一套作品和第二套作品都用到了基色(主色)的對(duì)比色，也就是在色相環(huán)上120°左右位置的這個(gè)顏色，第三套則是對(duì)比色，那我們可以看到通過調(diào)節(jié)色彩比例后，最終這三套作品視覺效果都不錯(cuò)。選一個(gè)對(duì)比比較強(qiáng)烈的輔助色可以給我們作品集帶來更強(qiáng)烈的視覺效果，當(dāng)然配色這個(gè)東西還是看你想給人一種什么感受，沒有說一定要怎么配。
 

　　還有界面里面除了一些感知明顯的配色外，還有一些感知不那么明顯，但是可以給我們高級(jí)的感受，那就是文字用色，在實(shí)際工作中大多數(shù)的產(chǎn)品界面內(nèi)容文字用色都是常規(guī)的333、666、999。雖然和開發(fā)對(duì)接起來比較方便，但這幾個(gè)色值在看起來會(huì)稍微有點(diǎn)顯臟。這個(gè)時(shí)候我們可以根據(jù)自己的品牌色(假如是冷色的話)去衍生一套高級(jí)灰，整個(gè)畫面也會(huì)看起來更干凈。那可能有人問，假如品牌色不是冷色怎么辦?那就看你們需不需要去優(yōu)化字體顏色，考慮優(yōu)化的話可以從品牌色衍生出來的24色里面找一個(gè)冷色。正常來說往灰色里面加點(diǎn)冷色相看起來會(huì)顯更干凈高級(jí)。
 

　　排版布局、元素點(diǎn)綴在如何學(xué)會(huì)借鑒篇中一起講
 

　　04 新增內(nèi)容(關(guān)于作品集中背景的處理)
 

　　匯總幾乎所有背景底色使用的形式，也給到了一些個(gè)人使用建議。看看收集的素材后，發(fā)現(xiàn)幾乎都可以用以下六種形式涵蓋，要么就是組合起來使用。(也有可能由于見識(shí)不夠廣，出現(xiàn)遺漏)
 

　　4.1豎向切割
 

　　豎向色塊分割常用比例 1:1 、1:0.6 、4：3。頁面內(nèi)通常進(jìn)行左右位置切換使用，可嘗試變化色塊大小，給與版面更多變化。也可視情況在切割邊緣進(jìn)行破型處理
 

　　需要注意的是，避免頁面出現(xiàn)過多大面積有彩色底色。消色可適當(dāng)增加使用，但整體還是以簡潔、干凈、突出界面內(nèi)容為主。
 

　　4.2橫向切割
 

　　橫向配色或配圖切割，通常適用于頁面內(nèi)文字信息不多，但界面圖片精美，更強(qiáng)調(diào)作品內(nèi)容呈現(xiàn)及細(xì)節(jié)展示。主要考驗(yàn)文字排版、作品本身質(zhì)量，注重包裝形式感。
 

　　4.3全屏色塊
 

　　全屏色塊又分背景純色和多色，純色可使用產(chǎn)品主色或重要輔助色，需注意背景與文字的對(duì)比度，避免對(duì)比度過低造成閱讀障礙。多色需注意配色比例和協(xié)調(diào)與否，可參考前面色彩搭配篇。
 

　　建議在頁面內(nèi)偶爾穿插使用，避免連貫性出現(xiàn)大量有彩色，因?yàn)榭赡軙?huì)導(dǎo)致視覺壓力。消色及特殊產(chǎn)品氣質(zhì)的可忽略此條建議。
 

　　4.4圓形
 

　　圓形底色可以起到很好的視覺聚焦作用，沒有過多使用限制?？梢缘脑捲趫A形上加多一些設(shè)計(jì)細(xì)節(jié)、及文字排版變化。
 

　　需要提醒的是圓形不是真的只是一個(gè)圓，輪廓可靈活變化，需避免設(shè)計(jì)局限。
 

　　4.5斜角
 

　　斜角的帶來的是視覺沖擊，可根據(jù)產(chǎn)品風(fēng)格覺得是否使用，例如幼兒類產(chǎn)品(卡片風(fēng)格圓角較大)，可能在包裝時(shí)就需要減少這類表現(xiàn)形式。
 

　　4.6抽象圖形
 

　　使用抽象圖形最需要注意的是，抽象出來的圖形是否與產(chǎn)品風(fēng)格符合(圓潤配圓潤，棱角配棱角)，圖形是否與產(chǎn)品界面內(nèi)存在某一聯(lián)系。當(dāng)兩者滿足的情況下可大膽使用，并且還可以在整個(gè)包裝中使用，因?yàn)檫@能很好的體現(xiàn)你抽象圖形設(shè)計(jì)能力。最后圖形繪制好了后別忘了迎合產(chǎn)品配色。
 

　　05 如何學(xué)會(huì)借鑒來快速提升?
 

　　一雙將優(yōu)秀作品原型化的眼
 

　　5.1案例階段
 

　　思考將如上信息(文字闡述、界面)進(jìn)行包裝設(shè)計(jì)
 

　　5.2首次嘗試
 

　　文字排版(對(duì)比、對(duì)齊、親密性)
 

　　5.2再次優(yōu)化
 

　　界面居左，將界面內(nèi)元素破型拿出，底部增加色塊聚焦。一個(gè)簡易的界面包裝完成，這類包裝在站酷是比較常見的，可感覺缺少了什么。但這個(gè)時(shí)候已經(jīng)不知道怎么優(yōu)化了，怎么辦?這個(gè)時(shí)候就講到到本文重點(diǎn)，找到合適的借鑒對(duì)象 — 原型化它 — 調(diào)整布局 — 填充內(nèi)容
 

　　5.3案例
 

　　找到一個(gè)合適的網(wǎng)頁設(shè)計(jì)參考，將其原型化，調(diào)整頁面布局，填充內(nèi)容，得到如下：
 

　　視覺設(shè)計(jì)說明(以案例一為例)：
 

　　首先是確定配色和比例，這里配色保持產(chǎn)品(豆果美食)配色。
 

　　借鑒參考中主體物周圍環(huán)繞的表現(xiàn)手法，將界面內(nèi)元素拿出。再在底部新增“圓形”，并增加紋理，這里的圓形取自界面內(nèi)頂部的選中Tab裝飾。
 

　　標(biāo)題設(shè)計(jì)(字體選擇+色彩裝飾)，選擇了一個(gè)合適的字體，這里用的是Gilroy。
 

　　文字編排，調(diào)整行間距2倍。
 

　　由于原本給到的內(nèi)容中不包含數(shù)據(jù)(無法直接借鑒參考原型中左下布局形式)這里給到的方式是將設(shè)計(jì)闡述中部分內(nèi)容進(jìn)行圖標(biāo)化處理，豐富界面布局的同時(shí)可以很好的體現(xiàn)個(gè)人設(shè)計(jì)態(tài)度及圖標(biāo)設(shè)計(jì)能力。
 

　　文章說到的借鑒，其實(shí)是獲取靈感的一種方式。如果你有更好的意見和建議，可以在留言告訴我哦。更多資訊請(qǐng)關(guān)注AAA教育~