交互設計師如何短時間內做出像樣的視覺作品？

 　　有人說，工科背景出身的交互設計師跟視覺出身的交互設計是的區別之一是，前者設計的東西會不夠有美感，也就是很Low。雖然邏輯架構，特別是做大型管理系統的時候，可以很快把信息和功能模塊歸類，但是視覺知識和審美積澱，對我們這種工科生來說， 卻是天生的Bug。

　　那麼，當交互設計師在一個項目中需要承擔起視覺設計的工作的時候，該怎麼辦呢?視覺設計的思維不像開發知識，或者版面設計中那些對齊理論一樣，惡補幾天就可以用得上。這段時間在4樓一個項目支援，做一個網站首頁，交互兼視覺。對於新肉來說，還算有點挑戰。

　　然而，如何在短時間內，做出一個像樣的視覺作品呢?就拿我最近做的一個項目首頁為例子，班門弄斧一下。

　　一、界面背景

　　頁面設計，我一般首先會先從背景開始，下面有幾個簡單粗暴又好用的套路可以參考。

　　1.1 大圖

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

　　然後大字方面，很多人說大圖配大字，要英文字比較好看，中文的表現就很一般。其實不是的。類似Helvetica和微軟雅黑這種系統字體，表現力確實比較一般，但是大家可以試試無襯線字+圓角類型的字體，比如圓體，效果還是不錯的，見圖b。關於圖片的來源可以去www.unsplash.com(有梯子加載會快一點)，裡面優質的圖片都可以免費商用。

　　△ 圖a

　　△ 圖b —— 阿裡雲持續交付平台

　　1.2 白色+品牌色

　　上面說的大圖+大字這個套路這麼好用，而且還顯得比較雅致，那不如整個頁面幾屏都用這種模式好了?當然也會有些網站是這樣做的，但是裡面有個問題是，用戶在浏覽的過程中可能會審美疲勞，而且頁面結構略顯單調。那麼，這裡就可以在大圖與大圖之間，用「白色+品牌色」這樣的背景來增加頁面的多樣性。比如下圖c 和圖d(兩個不同的網站)。

　　△ 圖c

　　△ 圖d

　　1.3 純色背景

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

　　△ Tumblr

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

　　二、頁面裝飾元素

　　背景作為一個地基打好之後，接著就是往頁面堆元素了。一般包括文案和其它元素。其它元素包括icon、色塊、線條、圖片等設計元素，一是幫助用戶更好地理解文字內容，二來增強視覺表現力。

　　2.1 icon

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

　　△ 圖e

　　2.2 顏色色塊

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

　　△ 圖f

　　△ 圖g

　　2.3 線條

　　線條最常用的場景是分離兩個信息塊。但是除此之外，還可以這樣用哦!

　　1. 起到聯系信息塊的作用

　　2. 然後還可以強調或者突出Title

　　3. 甚至，一條簡單的線條，也可以很美啊!

　　2.4 圖片

　　真實的圖片跟背景融合，也是一種不錯的表現力哦!

　　三、點綴和動效

　　上面兩步，其實已經足夠完成80%的頁面，可是，

　　什麼?像PPT ?!

　　其實用一般交互設計師的思維，最後做出的成品，信息架構分明，排版合理，色彩搭配合理，也難免會做的像簡報一樣!很大部分原因，可能是因為少了Banner!(banner最能區別視覺和交互兩類人設計出來的作品，這是我的鄙見)

　　不過Banner也不是每個網站都會有，要具體看項目的需求。那麼剩下的20%，可以通過交互動效和其他一些小部件來作最後的點綴。

　　關於動效的表達

　　1. 如果是已經其他產品有的交互效果，可以直接打開網頁，展示給開發GG看。

　　2. 如果是自己想出來的創新的交互動效，那麼可以通過直接口頭描述，跟開發GG溝通;如果還是不行，只能自己去用軟件來實現，比如Axure、Keynote、AE….

　　關於點綴

　　1. 參照第二點，加上色塊、線條、icon等等

　　2. 根據項目的定位，可以適當增加多一兩種其他具有視覺沖擊的顏色，作為局部點綴。比如：

　　總結

　　其實交互和視覺不分家，很多時候會有交叉。交互設計師，不能因為自己的產出物可以是黑白灰，就覺得可以不去學習顏色的搭配原理;不能因為Sketch是畫圖神器，就不去學習AI、PS這些工具…

　　設計無邊，挑戰很多，繼續努力!