interaction-designer-visual-design-1

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

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

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

一、界面背景

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

1.1 大圖

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

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

附上:《私家好貨!設計師的高清圖庫收藏夾(附使用技巧)》

1ch20160119

△ 圖a

2ch20160119

△ 圖b —— 阿里云持續交付平臺

1.2 白色+品牌色

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

3ch20160119

△ 圖c

4ch20160119

△ 圖d

1.3 純色背景

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

tumblr20160119

△ Tumblr

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

二、頁面裝飾元素

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

2.1 icon

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

5ch20160119

△ 圖e

2.2 顏色色塊

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

hb20160119

△ 圖f

6ch20160119

△?圖g

2.3 線條

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

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

7ch20160119

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

8ch20160119

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

9ch20160119

2.4 圖片

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

10ch20160119

11ch20160119

三、點綴和動效

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

什么?像PPT ?!

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

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

關于動效的表達

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

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

關于點綴

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

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

12ch20160119

總結

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

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

【優設名師訪談系列】

  1. 曾任騰訊大粵網設計主管的跨域達人:《優設訪談!騰訊設計師米田的設計之道與成長之路》
  2. 沒有聽過馮叔的設計師不是好設計師:《優設訪談!著名設計師馮鐵的設計思考與經驗之談》
  3. 前端重構視覺交互無一不精的設計師:《優設訪談!騰訊高級交互設計師C7210的十年設計路》
  4. 非議不斷前行不止,用心的設計團隊:《優設訪談!國內知名設計團隊專訪之滴滴DISIGN》
  5. 前網易現阿里寫的書是交互領域必讀:《優設訪談!阿里交互設計專家劉津的設計管理之路》
  6. 職業路徑最為清晰的科班交互設計師:《優設訪談!LBE安全大師產品總監曉生的職場進階之路》
  7. 能靠臉吃飯偏偏不的設計界「鹿晗」:《優設訪談!阿里資深設計師的自學設計之路》
  8. 300多人的百度設計團隊該如何運轉:《優設訪談!國內知名設計團隊專訪之百度大UE》
  9. 百度上海團隊負責人的非科班設計師:《優設訪談!百度設計大咖JJ YING的自學成才之路》
  10. 他帶的學生已經是國內的設計大咖了:《優設訪談!灰晝:從非科班生到首席美術總監的15年設計路》
  11. 設計的產品有幾億人在用的非科班生:《優設訪談!騰訊電腦管家視覺負責人張曉翔的UI自學之路》
  12. 英雄聯盟穿越火線天天愛消除都有他:《優設訪談!騰訊游戲Tgideas團隊設計總監李若凡的十年設計路》

原文地址:jianshu

uisdc-hao

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量108萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 3

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏