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

  1 、什麼是互動設計
  2 、當今 UI 設計師的能力要求
  3 、互動設計主要做什麼工作內容
  (1)產品 UI 框架設計
  (2)產品 UI 風格設計

  產品 UI 框架選擇
  簡單式(單一內容)
  翻頁式(多頁內容)
  宮格式(較多入口)
  上導航
  下導航 (4-5 大類+分支內容)
  舵式
  抽屜側邊欄(1 個重點+其他次要內容)
  隱藏式

  4 、線框原型圖繪製方法
  方法一:黑白灰+色塊
  方法二:黑白灰+高保真圖形
  方法三:黑白灰+突出色+高保真圖形

  5 、互動流程圖繪製
  6 、動態互動原型設計

  下面我們一個個來解析:

  1 、什麼是互動設計

  可以簡單理解為互動設計是偏向理性的設計,圖形設計是偏向感性的設計。這兩部分構成了我們常說的 UI 設計,user interface design 。

  

  UI 設計為什麼要包含理性的互動設計呢?這要從 2007 年移動網際網路爆發說起,那時圖形 UI 設計炫酷之風盛行,例如當時音樂播放器設計,都是這種模擬唱片或磁帶的寫實風。

  但今天這些設計都被改掉了。其實好用的相簿是方便多使用者更快索引照片。好用的音樂播放器不是模擬超寫實圖示,還不如歌詞與音樂同步,甚至不如翻譯英文歌詞有價值。

  

  所以,多使用者更需要解決實際問題的設計。

  2 、當今 UI 設計師的能力要求

  

  隨著行業的發展,只會圖形 UI 設計和只會互動設計的設計師職業生涯都會遇到瓶頸。

  3 、互動設計做什麼

  產品架構設計

  也就是將眾多的需求按照終呈現的頁面進行架構設計。

  

  產品 UI 風格設計

  我們以 IOS 為例子,您會發現一個平臺是由多個系統控制元件組成的,不同控制元件解決不同的問題,這些控制元件組成了軟體平臺的 UI 操作風格。例如 IOS 和 windows 的 UI 操作風格就完全不同。

  產品 UI 框架選擇
  簡單式(單一內容)
  翻頁式(多頁內容)
  宮格式(較多入口)
  上導航
  下導航 (4-5 大類+分支內容)
  舵式
  抽屜側邊欄(1 個重點+其他次要內容)
  隱藏式

  4 、線框原型圖繪製方法

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

  5 、互動流程圖繪製

  互動設計是程式導向的設計,所以需要描述清楚產品整體使用流程及相應的情況。使用互動檔案進行描述是很好的方式,互動檔案將作為技術開發,測試及設計人員進行全面的介面設計的依據。

  

  6 、動態互動原型設計

  為了更好的將產品的動態展示給 Boss 或者其它相關團隊成員,可以用簡單的方式進行動畫演示,讓成員可以更快更好的理解產品的使用。