不要再叫 PM 或 BD 畫 Wieframe !他們真的不是 UI/UX 的專業人士,如果注重專業,在約還沒簽、規格也還沒訂出來的時候就該把 UX 加進工作流程裡了。PM 最重要的工作是控管時程、各部門單位間溝通,BD 是廣義的 Marketing ,也不該是這個位子的人在搞介面,畫 Wireframe 的是 UX 啊 UX!

UX 被我歸類在「策略」階級,在開發前期就該加入討論的一個職位。舉個例子,音樂播放器依照「策略」的不同,介面就會長得完全不一樣。功能導向的音樂播放器可能會有一整排的選單控件,單純只是要炫的音樂播放器卻可能沒幾個按鈕卻有滿版整螢幕的節奏動畫。

當年的 HIG 按照視覺、行為特性、數據模型、使用者體驗等定義出 3 種應用程式風格:產出型應用程式、公用型應用程式、沉浸式應用程式。這三種雖然是 2010 版的 iPhone Human Interface Guideline 提到的概念,熟知這三種應用程式的設計方式,對工作效率會有很大的幫助。如果客戶想要突顯活動、想給使用者很炫很活潑的印象,UX 就不該交個「產出型應用程式」風格、都是 List 的介面;如果是顯示今天天氣和待辦事項的 App、最好考慮使用「公用型應用程式」的設計風格。

以下內容取自「iPhone User Experience 簡單法則」這本書,(截圖和圖片說明是我加上去的)。

公用型應用程式

可讓使用者快速地取得特定類型的資訊,或執行經嚴格定義的工作,如天氣、股票、交通報導、運動比分等。大多數公用應用程式包含:標準的使用者介面元件、簡單的流程和版面、最少的設定。

標準的使用者介面元件

  • 使用 Human interface guidelines 中所列出的標準使用者介面。
  • 選擇頁、info鈕、指示額外頁數的燈號。


(Yahoo 天氣,標準公用型應用程式,每天都會打開、看一眼就關掉的 App。)

簡單的流程和版面

  • 容易掃視的版面,其中只包含最重要的資訊。
  • 工作流程的精簡。


(內建的時間 App,設定好後就不太需要再動到它,這一頁也是看一眼就會關掉的功能。)

最少的設定

  • 通常第一次啟用後就可直接使用。
  • 設定過程是不必要的,或者維持最基本的即可。


(內建的備忘錄,沒有設定,新增 > 打字 就是了。)

產出型應用程式

功能比公用應用程式更完整,使用時間會依照場合及工作有所不同。大多數產出型應用程式包含:階層式結構、快速鍵和捷徑。

階層式結構

  • 幾乎所有產出型應用程式都有包含列表和細節檢視的階層式結構。
  • 列表檢視包含一份可以捲動的項目(如文字、圖例、視訊)列表。
  • 擁有索引標籤控制可以導覽到應用程式的其他部分。
  • 細節檢視提供更多關於列表資訊、及和這些項目有關的工具。


(Day One,我最愛的 App,介面設計作的很棒,層級分明,操作時會有種「啊、好貼心呢」的感覺。)

快速鍵和捷徑

  • 產出型應用程式的訊息、搜尋或表格通常需要輸入文字,這些工作在行動環境中執行的難度較高。
  • 鍵盤按鍵小、複雜度增加。
  • 所以產出應用型程式應儘可能將文字輸入的控制方式減少。


(改版後的 Evernote 被我打入冷宮,首頁太花字又小,看得很辛苦,不是什麼東西都攤在首頁就等於好用啊!)

沉浸式應用程式

用來玩遊戲、觀看媒體、和執行專業工作。時間可能持續幾分鐘到幾小時。大多數沉浸式應用程式包含:將重點放在內容上、自訂使用者經驗。

將重點放在內容上

  • 沉浸式應用程式可能會佔用整個螢幕,包含顯示電池和網路資訊的狀態列。
  • 設定和其他控制項目依程式不同,出現的時機也不一樣。


(機械迷城,解謎遊戲首選,有 MAC 版也有 iPad 版,我都買了。螢幕大一點玩起來比較過癮!)

自訂使用者經驗

  • 對於不是 Human interface guidelines 中列出的標準控制項目,沉浸式應用程式通常會提供完整的「自訂」使用者經驗。
  • 在自訂使用者經驗前請先確認是否因為設計目標無法用公用程式或產出型來達成才這麼做。


(kingdom rush,最愛手機遊戲之一,前後兩代都必買。)

看完這 3 種應用程式風格的介紹,能理解為什麼 UX 屬於策略面、而且必需在開發前期就加入了嗎?客戶「目標」會引導介面設計的方向,介面設計會影響開發工時、API、FLOW、和某些程度的功能。如果初期沒把 UX 加進去,等規格書都訂了才輪到 UX 上場,會導致 UX 綁手綁腳失去一半以上的戰力。在前期加入 UX 能讓產品更符合客戶所需、也能大幅減少後期開發成本。如果依照目前台灣習性,讓 PM 畫完 Wireframe 再交給 UX…最重要的工作都被 PM 做完了要 UX 幹什麼?

還滿常遇到 PM 塞一份不知打哪來、我從沒看過的 Wireframe 說「幫忙順一下流程、挑挑錯誤。」等到我挑出錯誤、並把 Wireframe 重繪過後才跟我說「這客戶都確認過、不能改了」…那叫我看幹嘛啊!

comments powered by Disqus