交互設(shè)計師如何短時間內(nèi)做出像樣的視覺設(shè)計作品？發(fā)布者：本站     時間：2020-06-20 14:06:11

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

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

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

1.1 大圖

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

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



1.2 白色+品牌色

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


1.3 純色背景

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



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

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

2.1 icon

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


2.2 顏色色塊

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