交互設(shè)計師,你要懂視覺

2 評論 4202 瀏覽 1 收藏 5 分鐘

推薦理由:作者@Danis2010 。交互設(shè)計師之所以要懂得視覺語言,主要體現(xiàn)在原型制作的工作部分,因為輸出的雖然是低保真原型,但低保真原型的設(shè)計過程其實也是一個視覺化過程。

 

一、設(shè)計界面框架要懂視覺

在定好功能,搭好信息架構(gòu)之后,一般進(jìn)行單獨界面的框架設(shè)計??蚣茉O(shè)計是元素在界面上的大致布局,界面分幾塊區(qū)域,哪一塊區(qū)域放什么內(nèi)容之類的。這里需要交互設(shè)計師確定這么幾件跟視覺有關(guān)的事情:

a.界面尺寸

界面默認(rèn)的寬高是多少(如果是軟件)?最大化的寬高是多少?

這也許需要通盤考慮每個界面大致的內(nèi)容類型,需要考慮用戶的閱讀舒適度(翻屏幕爽嗎?水平掃描爽嗎?)。

b.模塊尺寸

每個區(qū)域模塊的大小比例大致怎樣?這跟內(nèi)容的類型有關(guān),比如一篇文章詳情的寬度究竟要多少,用戶閱讀起來才不會在目光換行的時候不會迷失?如下圖,如果正文整個顯示屏那么寬,好讀嗎?這也跟內(nèi)容之間的權(quán)重有關(guān),交互設(shè)計師知道內(nèi)容的輕重,尺寸就是表達(dá)權(quán)重的一種手段。

JH01

c.模塊位置

模塊的相對位置如何?整個產(chǎn)品的界面如何瓜分成一個固定連續(xù)的閱讀習(xí)慣(如果需要的話)?

如果是一個網(wǎng)頁,為什么最重要的內(nèi)容也許需要放在界面左上角,你要知道這是用戶的視覺落腳點。

當(dāng)然框架只是粗略布局,尺寸不需要精準(zhǔn),但如果能接近精準(zhǔn),不是更好嗎?

 

二、元素細(xì)節(jié)布局需要排版功力

如果你知道閱讀節(jié)奏,能排成這樣:

JH02

如果你知道視覺區(qū)分邏輯,能拍成這樣:

JH03

 

三、權(quán)重表達(dá)需要視覺手段

交互設(shè)計師有責(zé)任把內(nèi)容的輕重緩急通知視覺設(shè)計師,除了文字、口頭溝通外,直接在原型上表達(dá)也是重要的。如果知道基本的規(guī)劃視覺層次的原理,就能事半功倍。

jh04
(標(biāo)簽比對應(yīng)的內(nèi)容不重要)

 

四、動畫效果了然于胸

動畫在交互過程中,起著強化界面暗示或反饋的作用,配合用戶的操作,豐富的視覺效果讓產(chǎn)品有趣,也讓用戶更理解他的操作。

既然跟操作有關(guān),交互設(shè)計師怎么可以不懂得動畫設(shè)計。雖然不需要讓動畫變現(xiàn),但心中有動畫的構(gòu)成原理,看到一個效果,能知道各個元素是怎么分別到位的,絕對有助于行為的設(shè)計。

 

五、用視覺設(shè)計師的語言溝通

在完成交互設(shè)計,開始向視覺設(shè)計師傳達(dá)設(shè)計方案的時候,如果能用視覺設(shè)計師的語言跟他們溝通,甚至讓他們覺得,你其實已經(jīng)在默默照顧他們,因為你知道他們拿到這個交互原型時,心里是怎么想的,就能更快達(dá)成一致。

 

六、驗收時知道高保真是否傳達(dá)出行為了

視覺設(shè)計的其中一個最大功能就是傳達(dá)產(chǎn)品行為,也就是表達(dá)好交互設(shè)計。當(dāng)視覺稿輸出時,你不僅只是看看demo好不好看,更重要的是,你的交互意圖有沒有被表達(dá)出來。比如還是權(quán)重的問題,視覺設(shè)計師是否用合適的形式傳達(dá)出來了,或者一些視覺反饋是否給到用戶足夠的暗示效果。

 

 

文章轉(zhuǎn)載于:http://reynold.cn/

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 正在努力!

    來自湖南 回復(fù)