一、界面背景 頁面設(shè)計，我一般首先會先從背景開始，下面有幾個簡單粗暴又好用的套路可以參考。
1.1 大圖 最簡單粗暴的做法是大圖配大字，比如下圖a。這種背景一般會給人「精致」、「逼格」的印象。一般可以直接用小景深微距的照片，也就是圖片大部分都是模糊的。另一種可以直接在任意大圖上面加一層透明遮罩。 然后大字方面，很多人說大圖配大字，要英文字比較好看，中文的表現(xiàn)就很一般。其實不是的。類似Helvetica和微軟雅黑這種系統(tǒng)字體，表現(xiàn)力確實比較一般，但是大家可以試試無襯線字+圓角類型的字體，比如圓體，效果還是不錯的，見圖b。關(guān)于圖片的來源可以去www.unsplash.com（有梯子加載會快一點），里面優(yōu)質(zhì)的圖片都可以免費商用。 附上：《私家好貨！設(shè)計師的高清圖庫收藏夾（附使用技巧）》
△ 圖a △ 圖b —— 阿里云持續(xù)交付平臺 1.2 白色+品牌色 上面說的大圖+大字這個套路這么好用，而且還顯得比較雅致，那不如整個頁面幾屏都用這種模式好了？當(dāng)然也會有些網(wǎng)站是這樣做的，但是里面有個問題是，用戶在瀏覽的過程中可能會審美疲勞，而且頁面結(jié)構(gòu)略顯單調(diào)。那么，這里就可以在大圖與大圖之間，用「白色+品牌色」這樣的背景來增加頁面的多樣性。比如下圖c 和圖d（兩個不同的網(wǎng)站）。
△ 圖c △ 圖d 1.3 純色背景 用純色做背景，也是目前比較多見的一種方式。比如一個首頁有4~5屏，每一屏都用一個純色做背景，這種模式就更加簡單了。 △ Tumblr 但是這里值得注意的一點就是，由于是一整個大色塊作為背景，人的視野都被一個顏色覆蓋，所以明暗度要調(diào)整好，太亮或太暗都不好。具體配色，可以去 https://color.adobe.com 挑選。 二、頁面裝飾元素 背景作為一個地基打好之后，接著就是往頁面堆元素了。一般包括文案和其它元素。其它元素包括icon、色塊、線條、圖片等設(shè)計元素，一是幫助用戶更好地理解文字內(nèi)容，二來增強視覺表現(xiàn)力。
2.1 icon 增加視覺表現(xiàn)力，當(dāng)然是少不了icon。所以下次當(dāng)你一籌莫展的時候，可以試試用icon把信息分條、分塊展示，比如下圖e
△ 圖e 2.2 顏色色塊 跟上面說的icon其實差不多，但是可以用地更靈活一些。比如下圖f 用不同顏色進(jìn)行分類，圖g 用來突出Title。
△ 圖f △ 圖g 2.3 線條 線條最常用的場景是分離兩個信息塊。但是除此之外，還可以這樣用哦！ 1. 起到聯(lián)系信息塊的作用
2. 然后還可以強調(diào)或者突出Title 3. 甚至，一條簡單的線條，也可以很美啊！
2.4 圖片 真實的圖片跟背景融合，也是一種不錯的表現(xiàn)力哦！
三、點綴和動效 上面兩步，其實已經(jīng)足夠完成80%的頁面，可是， 什么？像PPT ？！ 其實用一般交互設(shè)計師的思維，最后做出的成品，信息架構(gòu)分明，排版合理，色彩搭配合理，也難免會做的像簡報一樣！很大部分原因，可能是因為少了Banner?。╞anner最能區(qū)別視覺和交互兩類人設(shè)計出來的作品，這是我的鄙見） 不過Banner也不是每個網(wǎng)站都會有，要具體看項目的需求。那么剩下的20%，可以通過交互動效和其他一些小部件來作最后的點綴。 關(guān)于動效的表達(dá) 1. 如果是已經(jīng)其他產(chǎn)品有的交互效果，可以直接打開網(wǎng)頁，展示給開發(fā)GG看。
2. 如果是自己想出來的創(chuàng)新的交互動效，那么可以通過直接口頭描述，跟開發(fā)GG溝通；如果還是不行，只能自己去用軟件來實現(xiàn)，比如Axure、Keynote、AE….
關(guān)于點綴 1. 參照第二點，加上色塊、線條、icon等等
2. 根據(jù)項目的定位，可以適當(dāng)增加多一兩種其他具有視覺沖擊的顏色，作為局部點綴。比如：
總結(jié) 其實交互和視覺不分家，很多時候會有交叉。交互設(shè)計師，不能因為自己的產(chǎn)出物可以是黑白灰，就覺得可以不去學(xué)習(xí)顏色的搭配原理；不能因為Sketch是畫圖神器，就不去學(xué)習(xí)AI、PS這些工具… 設(shè)計無邊，挑戰(zhàn)很多，繼續(xù)努力！
