交互設(shè)計(jì)系列之四:交互設(shè)計(jì)師,你要懂視覺(jué)!

2015-4-30    藍(lán)藍(lán)設(shè)計(jì)的小編

 藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:http://www.hao5191.cn/a/diannaojichu/diannaojiqiao/20140313/152285.html

  交互設(shè)計(jì)師之所以要懂得視覺(jué)語(yǔ)言,主要體現(xiàn)在原型制作的工作部分,

  因?yàn)檩敵龅碾m然是低保真原型,但低保真原型的設(shè)計(jì)過(guò)程其實(shí)也是一個(gè)視覺(jué)化過(guò)程。

  廢話少說(shuō),直接解釋吧(大致按照動(dòng)手的時(shí)間順序,以數(shù)字媒體界面為例)。

1 設(shè)計(jì)界面框架要懂視覺(jué)

  在定好功能,搭好信息架構(gòu)之后,一般進(jìn)行單獨(dú)界面的框架設(shè)計(jì)(鬼扯,真實(shí)的操作順序誰(shuí)知道!)

  框架設(shè)計(jì)是元素在界面上的大致布局,界面分幾塊區(qū)域,哪一塊區(qū)域放什么內(nèi)容之類(lèi)的。

  這里需要交互設(shè)計(jì)師確定這么幾件跟視覺(jué)有關(guān)的事情:

  a.界面尺寸

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

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

  b.模塊尺寸

  每個(gè)區(qū)域模塊的大小比例大致怎樣?

  這跟內(nèi)容的類(lèi)型有關(guān),

  比如一篇文章詳情的寬度究竟要多少,用戶閱讀起來(lái)才不會(huì)在目光換行的時(shí)候不會(huì)迷失?


  (如果正文整個(gè)顯示屏那么寬,好讀嗎?)

  這也跟內(nèi)容之間的權(quán)重有關(guān),

  交互設(shè)計(jì)師知道內(nèi)容的輕重,尺寸就是表達(dá)權(quán)重的一種手段。

  c.模塊位置

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

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

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

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

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


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


3 權(quán)重表達(dá)需要視覺(jué)手段

  交互設(shè)計(jì)師有責(zé)任把內(nèi)容的輕重緩急通知視覺(jué)設(shè)計(jì)師,

  除了文字、口頭溝通外,直接在原型上表達(dá)也是重要的。

  如果知道基本的規(guī)劃視覺(jué)層次的原理,就能事半功倍。


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

4 動(dòng)畫(huà)效果了然于胸

  動(dòng)畫(huà)在交互過(guò)程中,起著強(qiáng)化界面暗示或反饋的作用,

  配合用戶的操作,豐富的視覺(jué)效果讓產(chǎn)品有趣,也讓用戶更理解他的操作。

  既然跟操作有關(guān),交互設(shè)計(jì)師怎么可以不懂得動(dòng)畫(huà)設(shè)計(jì)。

  雖然不需要讓動(dòng)畫(huà)變現(xiàn),但心中有動(dòng)畫(huà)的構(gòu)成原理,看到一個(gè)效果,能知道各個(gè)元素是怎么分別到位的,

  絕對(duì)有助于行為的設(shè)計(jì)。

5 用視覺(jué)設(shè)計(jì)師的語(yǔ)言溝通

  在完成交互設(shè)計(jì),開(kāi)始向視覺(jué)設(shè)計(jì)師傳達(dá)設(shè)計(jì)方案的時(shí)候,

  如果能用視覺(jué)設(shè)計(jì)師的語(yǔ)言跟他們溝通,甚至讓他們覺(jué)得,你其實(shí)已經(jīng)在默默照顧他們,

  因?yàn)槟阒浪麄兡玫竭@個(gè)交互原型時(shí),心里是怎么想的,

  就能更快達(dá)成一致。

6 驗(yàn)收時(shí)知道高保真是否傳達(dá)出行為了

  視覺(jué)設(shè)計(jì)的其中一個(gè)最大功能就是傳達(dá)產(chǎn)品行為,也就是表達(dá)好交互設(shè)計(jì)。

  當(dāng)視覺(jué)稿輸出時(shí),你不僅只是看看demo好不好看,更重要的是,你的交互意圖有沒(méi)有被表達(dá)出來(lái)。

  比如還是權(quán)重的問(wèn)題,視覺(jué)設(shè)計(jì)師是否用合適的形式傳達(dá)出來(lái)了,

  或者一些視覺(jué)反饋是否給到用戶足夠的暗示效果。

  以上就是為什么交互設(shè)計(jì)師要懂視覺(jué)的理由。

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔