6個問題,帶你全面了解交互設(shè)計

1 評論 10773 瀏覽 72 收藏 6 分鐘

隨著行業(yè)的發(fā)展,只會圖形 UI 設(shè)計和只會交互設(shè)計的設(shè)計師職業(yè)生涯都會遇到瓶頸。

本文主要是以下6個問題的講解~

1. 什么是交互設(shè)計

2. 當(dāng)今UI 設(shè)計師的能力要求

3. 交互設(shè)計主要做什么工作內(nèi)容

(1)產(chǎn)品UI框架設(shè)計

(2)產(chǎn)品UI風(fēng)格設(shè)計

  1. 產(chǎn)品UI 框架選擇
  2. 簡單式(單一內(nèi)容)
  3. 翻頁式(多頁內(nèi)容)
  4. 宮格式(較多入口)
  5. 上導(dǎo)航
  6. 下導(dǎo)航(4-5大類+分支內(nèi)容)
  7. 舵式
  8. 抽屜側(cè)邊欄(1個重點+其他次要內(nèi)容)
  9. 隱藏式

4. 線框原型圖繪制方法

  • 方法一:黑白灰+色塊
  • 方法二:黑白灰+高保真圖形
  • 方法三:黑白灰+突出色+高保真圖形

5. 交互流程圖繪制

6. 動態(tài)交互原型設(shè)計

我們一個個來看~

1. 什么是交互設(shè)計

可以簡單理解為交互設(shè)計是偏向理性的設(shè)計,圖形設(shè)計是偏向感性的設(shè)計。這兩部分構(gòu)成了我們常說的UI設(shè)計,user interface design.

UI設(shè)計為什么要包含理性的交互設(shè)計呢?這要從2007年移動互聯(lián)網(wǎng)爆發(fā)說起,那時圖形UI設(shè)計炫酷之風(fēng)盛行,例如當(dāng)時音樂播放器設(shè)計,都是這種模擬唱片或磁帶的寫實風(fēng)。

但今天這些設(shè)計都被改掉了。其實好用的相冊是方便用戶更快索引照片。好用的音樂播放器不是模擬超寫實圖標(biāo),還不如歌詞與音樂同步,甚至不如翻譯英文歌詞有價值。

所以,用戶更需要解決實際問題的設(shè)計。

2、當(dāng)今 UI 設(shè)計師的能力要求

隨著行業(yè)的發(fā)展,只會圖形UI 設(shè)計和只會交互設(shè)計的設(shè)計師職業(yè)生涯都會遇到瓶頸。

3、交互設(shè)計做什么

產(chǎn)品架構(gòu)設(shè)計

也就是將眾多的需求按照最終呈現(xiàn)的頁面進(jìn)行架構(gòu)設(shè)計。

產(chǎn)品 UI 風(fēng)格設(shè)計

我們以IOS為例子,你會發(fā)現(xiàn)一個平臺是由多個系統(tǒng)控件組成的,不同控件解決不同的問題,這些控件組成了軟件平臺的UI操作風(fēng)格。例如IOS和windows的UI操作風(fēng)格就完全不同。

  1. 產(chǎn)品UI 框架選擇
  2. 簡單式(單一內(nèi)容)
  3. 翻頁式(多頁內(nèi)容)
  4. 宮格式(較多入口)
  5. 上導(dǎo)航
  6. 下導(dǎo)航(4-5大類+分支內(nèi)容)
  7. 舵式
  8. 抽屜側(cè)邊欄(1個重點+其他次要內(nèi)容)
  9. 隱藏式

4、線框原型圖繪制方法

  • 黑白灰+色塊
  • 黑白灰+高保真圖形
  • 黑白灰+突出色+高保真圖形

5、交互流程圖繪制

交互設(shè)計是面向過程的設(shè)計,所以需要描述清楚產(chǎn)品整體使用流程及相應(yīng)的情況。使用交互文檔進(jìn)行描述是很好的方式,交互文檔將作為技術(shù)開發(fā),測試及設(shè)計人員進(jìn)行全面的界面設(shè)計的依據(jù)。

6、動態(tài)交互原型設(shè)計

為了更好的將產(chǎn)品的動態(tài)展示給Boss或者其它相關(guān)團(tuán)隊成員,可以用最簡單的方式進(jìn)行動畫演示,讓成員可以更快更好的理解產(chǎn)品的使用。

好~以上內(nèi)容就是全部內(nèi)容了~

 

作者:百度UE講堂

來源:微信公眾號【百度UE講堂】

版權(quán)聲明:人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范,所轉(zhuǎn)載的文章都注明作者和來源,若標(biāo)注有誤,請聯(lián)系主編QQ:419297645更改。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我現(xiàn)在還是一個沒畢業(yè)的UI學(xué)員,其實并沒有評論的資格,只是站在我個人角度希望前輩能在某些部分寫多舉一點例子幫助我理解

    回復(fù)