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

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

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

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

1.1 大圖

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

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



1.2 白色+品牌色

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


1.3 純色背景

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



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

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

2.1 icon

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


2.2 顏色色塊

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