交互設(shè)計(jì)師如何短時(shí)間內(nèi)做出像樣的視覺作品?
有人說(shuō),工科背景出身的交互設(shè)計(jì)師跟視覺出身的交互設(shè)計(jì)是的區(qū)別之一是,前者設(shè)計(jì)的東西會(huì)不夠有美感,也就是很Low。雖然邏輯架構(gòu),特別是做大型管理系統(tǒng)的時(shí)候,可以很快把信息和功能模塊歸類,但是視覺知識(shí)和審美積淀,對(duì)我們這種工科生來(lái)說(shuō), 卻是天生的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)站首頁(yè),交互兼視覺。對(duì)于新肉來(lái)說(shuō),還算有點(diǎn)挑戰(zhàn)。
然而,如何在短時(shí)間內(nèi),做出一個(gè)像樣的視覺作品呢?就拿我最近做的一個(gè)項(xiàng)目首頁(yè)為例子,班門弄斧一下。
一、界面背景
頁(yè)面設(shè)計(jì),我一般首先會(huì)先從背景開始,下面有幾個(gè)簡(jiǎn)單粗暴又好用的套路可以參考。
1.1 大圖
最簡(jiǎn)單粗暴的做法是大圖配大字,比如下圖a。這種背景一般會(huì)給人「精致」、「逼格」的印象。一般可以直接用小景深微距的照片,也就是圖片大部分都是模糊的。另一種可以直接在任意大圖上面加一層透明遮罩。
然后大字方面,很多人說(shuō)大圖配大字,要英文字比較好看,中文的表現(xiàn)就很一般。其實(shí)不是的。類似Helvetica和微軟雅黑這種系統(tǒng)字體,表現(xiàn)力確實(shí)比較一般,但是大家可以試試無(wú)襯線字+圓角類型的字體,比如圓體,效果還是不錯(cuò)的,見圖b。關(guān)于圖片的來(lái)源可以去www.unsplash.com(有梯子加載會(huì)快一點(diǎn)),里面優(yōu)質(zhì)的圖片都可以免費(fèi)商用。

△ 圖a

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

△ 圖c

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

△ Tumblr
但是這里值得注意的一點(diǎn)就是,由于是一整個(gè)大色塊作為背景,人的視野都被一個(gè)顏色覆蓋,所以明暗度要調(diào)整好,太亮或太暗都不好。具體配色,可以去 https://color.adobe.com 挑選。
二、頁(yè)面裝飾元素
背景作為一個(gè)地基打好之后,接著就是往頁(yè)面堆元素了。一般包括文案和其它元素。其它元素包括icon、色塊、線條、圖片等設(shè)計(jì)元素,一是幫助用戶更好地理解文字內(nèi)容,二來(lái)增強(qiáng)視覺表現(xiàn)力。
2.1 icon
增加視覺表現(xiàn)力,當(dāng)然是少不了icon。所以下次當(dāng)你一籌莫展的時(shí)候,可以試試用icon把信息分條、分塊展示,比如下圖e

△ 圖e
2.2 顏色色塊
跟上面說(shuō)的icon其實(shí)差不多,但是可以用地更靈活一些。比如下圖f 用不同顏色進(jìn)行分類,圖g 用來(lái)突出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%的頁(yè)面,可是,
什么?像PPT ?!
其實(shí)用一般交互設(shè)計(jì)師的思維,最后做出的成品,信息架構(gòu)分明,排版合理,色彩搭配合理,也難免會(huì)做的像簡(jiǎn)報(bào)一樣!很大部分原因,可能是因?yàn)樯倭薆anner!(banner最能區(qū)別視覺和交互兩類人設(shè)計(jì)出來(lái)的作品,這是我的鄙見)
不過(guò)Banner也不是每個(gè)網(wǎng)站都會(huì)有,要具體看項(xiàng)目的需求。那么剩下的20%,可以通過(guò)交互動(dòng)效和其他一些小部件來(lái)作最后的點(diǎn)綴。
關(guān)于動(dòng)效的表達(dá)
1. 如果是已經(jīng)其他產(chǎn)品有的交互效果,可以直接打開網(wǎng)頁(yè),展示給開發(fā)GG看。
2. 如果是自己想出來(lái)的創(chuàng)新的交互動(dòng)效,那么可以通過(guò)直接口頭描述,跟開發(fā)GG溝通;如果還是不行,只能自己去用軟件來(lái)實(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這些工具…
本文地址:http://m.likemindfilms.com/tutorial/id3178.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏