技多不壓身！交互設(shè)計(jì)師如何短時(shí)間內(nèi)做出像樣的視覺作品？

拉瓦不是Geek：有人說，工科背景出身的交互設(shè)計(jì)師跟視覺出身的交互設(shè)計(jì)是的區(qū)別之一是，前者設(shè)計(jì)的東西會(huì)不夠有美感，也就是很Low。雖然邏輯架構(gòu)，特別是做大型管理系統(tǒng)的時(shí)候，可以很快把信息和功能模塊歸類，但是視覺知識(shí)和審美積淀，對(duì)我們這種工科生來說， 卻是天生的Bug。

那么，當(dāng)交互設(shè)計(jì)師在一個(gè)項(xiàng)目中需要承擔(dān)起視覺設(shè)計(jì)的工作的時(shí)候，該怎么辦呢？視覺設(shè)計(jì)的思維不像開發(fā)知識(shí)，或者版面設(shè)計(jì)中那些對(duì)齊理論一樣，惡補(bǔ)幾天就可以用得上。這段時(shí)間在4樓一個(gè)項(xiàng)目支援，做一個(gè)網(wǎng)站首頁，交互兼視覺。對(duì)于新肉來說，還算有點(diǎn)挑戰(zhàn)。

然而，如何在短時(shí)間內(nèi)，做出一個(gè)像樣的視覺作品呢？就拿我最近做的一個(gè)項(xiàng)目首頁為例子，班門弄斧一下。

一、界面背景

頁面設(shè)計(jì)，我一般首先會(huì)先從背景開始，下面有幾個(gè)簡(jiǎn)單粗暴又好用的套路可以參考。

1.1 大圖

最簡(jiǎn)單粗暴的做法是大圖配大字，比如下圖a。這種背景一般會(huì)給人「精致」、「逼格」的印象。一般可以直接用小景深微距的照片，也就是圖片大部分都是模糊的。另一種可以直接在任意大圖上面加一層透明遮罩。

然后大字方面，很多人說大圖配大字，要英文字比較好看，中文的表現(xiàn)就很一般。其實(shí)不是的。類似Helvetica和微軟雅黑這種系統(tǒng)字體，表現(xiàn)力確實(shí)比較一般，但是大家可以試試無襯線字+圓角類型的字體，比如圓體，效果還是不錯(cuò)的，見圖b。關(guān)于圖片的來源可以去www.unsplash.com（有梯子加載會(huì)快一點(diǎn)），里面優(yōu)質(zhì)的圖片都可以免費(fèi)商用。

附上：《私家好貨！設(shè)計(jì)師的高清圖庫(kù)收藏夾（附使用技巧）》

△ 圖a

△ 圖b —— 阿里云持續(xù)交付平臺(tái)

1.2 白色+品牌色

上面說的大圖+大字這個(gè)套路這么好用，而且還顯得比較雅致，那不如整個(gè)頁面幾屏都用這種模式好了？當(dāng)然也會(huì)有些網(wǎng)站是這樣做的，但是里面有個(gè)問題是，用戶在瀏覽的過程中可能會(huì)審美疲勞，而且頁面結(jié)構(gòu)略顯單調(diào)。那么，這里就可以在大圖與大圖之間，用「白色+品牌色」這樣的背景來增加頁面的多樣性。比如下圖c 和圖d（兩個(gè)不同的網(wǎng)站）。

△ 圖c

△ 圖d

1.3 純色背景

用純色做背景，也是目前比較多見的一種方式。比如一個(gè)首頁有4~5屏，每一屏都用一個(gè)純色做背景，這種模式就更加簡(jiǎn)單了。

△ Tumblr

但是這里值得注意的一點(diǎn)就是，由于是一整個(gè)大色塊作為背景，人的視野都被一個(gè)顏色覆蓋，所以明暗度要調(diào)整好，太亮或太暗都不好。具體配色，可以去?https://color.adobe.com?挑選。

二、頁面裝飾元素

背景作為一個(gè)地基打好之后，接著就是往頁面堆元素了。一般包括文案和其它元素。其它元素包括icon、色塊、線條、圖片等設(shè)計(jì)元素，一是幫助用戶更好地理解文字內(nèi)容，二來增強(qiáng)視覺表現(xiàn)力。

2.1 icon

增加視覺表現(xiàn)力，當(dāng)然是少不了icon。所以下次當(dāng)你一籌莫展的時(shí)候，可以試試用icon把信息分條、分塊展示，比如下圖e

△ 圖e

2.2 顏色色塊

跟上面說的icon其實(shí)差不多，但是可以用地更靈活一些。比如下圖f 用不同顏色進(jìn)行分類，圖g 用來突出Title。

△ 圖f

△?圖g

2.3 線條

線條最常用的場(chǎng)景是分離兩個(gè)信息塊。但是除此之外，還可以這樣用哦！

1. 起到聯(lián)系信息塊的作用

2. 然后還可以強(qiáng)調(diào)或者突出Title

3. 甚至，一條簡(jiǎn)單的線條，也可以很美啊！

2.4 圖片

真實(shí)的圖片跟背景融合，也是一種不錯(cuò)的表現(xiàn)力哦！

三、點(diǎn)綴和動(dòng)效

上面兩步，其實(shí)已經(jīng)足夠完成80%的頁面，可是，

什么？像PPT ？！

其實(shí)用一般交互設(shè)計(jì)師的思維，最后做出的成品，信息架構(gòu)分明，排版合理，色彩搭配合理，也難免會(huì)做的像簡(jiǎn)報(bào)一樣！很大部分原因，可能是因?yàn)樯倭薆anner！（banner最能區(qū)別視覺和交互兩類人設(shè)計(jì)出來的作品，這是我的鄙見）

不過Banner也不是每個(gè)網(wǎng)站都會(huì)有，要具體看項(xiàng)目的需求。那么剩下的20%，可以通過交互動(dòng)效和其他一些小部件來作最后的點(diǎn)綴。

關(guān)于動(dòng)效的表達(dá)

1. 如果是已經(jīng)其他產(chǎn)品有的交互效果，可以直接打開網(wǎng)頁，展示給開發(fā)GG看。

2. 如果是自己想出來的創(chuàng)新的交互動(dòng)效，那么可以通過直接口頭描述，跟開發(fā)GG溝通；如果還是不行，只能自己去用軟件來實(shí)現(xiàn)，比如Axure、Keynote、AE....

關(guān)于點(diǎn)綴

1. 參照第二點(diǎn)，加上色塊、線條、icon等等

2. 根據(jù)項(xiàng)目的定位，可以適當(dāng)增加多一兩種其他具有視覺沖擊的顏色，作為局部點(diǎn)綴。比如：

總結(jié)

其實(shí)交互和視覺不分家，很多時(shí)候會(huì)有交叉。交互設(shè)計(jì)師，不能因?yàn)樽约旱漠a(chǎn)出物可以是黑白灰，就覺得可以不去學(xué)習(xí)顏色的搭配原理；不能因?yàn)镾ketch是畫圖神器，就不去學(xué)習(xí)AI、PS這些工具...

設(shè)計(jì)無邊，挑戰(zhàn)很多，繼續(xù)努力！

【優(yōu)設(shè)名師訪談系列】

1. 曾任騰訊大粵網(wǎng)設(shè)計(jì)主管的跨域達(dá)人：《優(yōu)設(shè)訪談！騰訊設(shè)計(jì)師米田的設(shè)計(jì)之道與成長(zhǎng)之路》
2. 沒有聽過馮叔的設(shè)計(jì)師不是好設(shè)計(jì)師：《優(yōu)設(shè)訪談！著名設(shè)計(jì)師馮鐵的設(shè)計(jì)思考與經(jīng)驗(yàn)之談》
3. 前端重構(gòu)視覺交互無一不精的設(shè)計(jì)師：《優(yōu)設(shè)訪談！騰訊高級(jí)交互設(shè)計(jì)師C7210的十年設(shè)計(jì)路》
4. 非議不斷前行不止，用心的設(shè)計(jì)團(tuán)隊(duì)：《優(yōu)設(shè)訪談！國(guó)內(nèi)知名設(shè)計(jì)團(tuán)隊(duì)專訪之滴滴DISIGN》
5. 前網(wǎng)易現(xiàn)阿里寫的書是交互領(lǐng)域必讀：《優(yōu)設(shè)訪談！阿里交互設(shè)計(jì)專家劉津的設(shè)計(jì)管理之路》
6. 職業(yè)路徑最為清晰的科班交互設(shè)計(jì)師：《優(yōu)設(shè)訪談！LBE安全大師產(chǎn)品總監(jiān)曉生的職場(chǎng)進(jìn)階之路》
7. 能靠臉吃飯偏偏不的設(shè)計(jì)界「鹿晗」：《優(yōu)設(shè)訪談！阿里資深設(shè)計(jì)師的自學(xué)設(shè)計(jì)之路》
8. 300多人的百度設(shè)計(jì)團(tuán)隊(duì)該如何運(yùn)轉(zhuǎn)：《優(yōu)設(shè)訪談！國(guó)內(nèi)知名設(shè)計(jì)團(tuán)隊(duì)專訪之百度大UE》
9. 百度上海團(tuán)隊(duì)負(fù)責(zé)人的非科班設(shè)計(jì)師：《優(yōu)設(shè)訪談！百度設(shè)計(jì)大咖JJ YING的自學(xué)成才之路》
10. 他帶的學(xué)生已經(jīng)是國(guó)內(nèi)的設(shè)計(jì)大咖了：《優(yōu)設(shè)訪談！灰晝：從非科班生到首席美術(shù)總監(jiān)的15年設(shè)計(jì)路》
11. 設(shè)計(jì)的產(chǎn)品有幾億人在用的非科班生：《優(yōu)設(shè)訪談！騰訊電腦管家視覺負(fù)責(zé)人張曉翔的UI自學(xué)之路》
12. 英雄聯(lián)盟穿越火線天天愛消除都有他：《優(yōu)設(shè)訪談！騰訊游戲Tgideas團(tuán)隊(duì)設(shè)計(jì)總監(jiān)李若凡的十年設(shè)計(jì)路》

原文地址：jianshu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量108萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com