iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 1

【Day 01】什麼是 UI 設計 ( 從 SEO 工程師到 UI )

前言

Hi,我是 Ted !
進入 SEO 領域超過五年,接觸過許多產業、不同類型的客戶,眾多的專案下累積了豐富的經驗。
我發現在數位行銷這一塊,要有效的協助客戶、推進事項,越來越需要跨領域的技能。
以前中後來看,從一開始了解客戶產品定位、訪談需求、競品分析,到搭配客戶行銷活動作策略規劃,以及後續流量導入,登陸頁改善、路徑優化等。一連串 PDCA 的過程,以不單單像早期對於 SEO 工作的想像。

在專案的進程中,要如何引導客戶、滿足客戶的需求,順利推動事情 ?
我決定從 UI 設計入門學習,期待透過 30 天的鐵人賽,快速建立架構,作為後續跨領域的溝通與合作。


本篇重點

  • 什麼是 UI 設計 ?
  • 一般開發流程有什麼環節 ?
  • 以介面設計工作範疇來說,會遇到什麼哪些職稱的人 ?
  • 設計規範,協同合作的共同語言
  • 設計流程有那些環節 ?

什麼是 UI 設計 ?

使用者介面 ( User Interface ),現在多指數位裝置的產品介面

目的是要使用者與其互動時,能順利完成任務。

對於新手,透過簡單的定義,可以思考的點有:

  • 在網頁設計中,不同的行動裝置,應有不同的設計考量 ( 例如:桌機、平版 )
  • 不同的系統,須注意設計上的差異 ( 例如:iOS、Android )
  • 在每個互動中,背後想要傳遞的訊息或要完成的操作目標是什麼

一般開發流程有什麼環節 ?

了解產品開發的階段流程,可以粗略知道,在每個環節中,相對應的事情會是什麼。進而有方向構思能得到有效回答的問題,溝通才會到位順利。

  1. Research ( 研究探索 ) -> 產出:產業背景研究、競業分析、人物訪談
  2. Synthesis & Ideation ( 創意發想 ) -> 探討使用者真正的痛點,產出:人物誌、使用者旅程、心智地圖
  3. Prototyping & Design ( 設計迭代 ) -> loop的運作方式,使用線框圖,確認資訊架構與任務流程,再繪製介面,產出:資訊架構、介面流程、線框稿、原型設計 (確認產品概念是否符合使用者需求)、視覺設計
  4. Implementation ( 執行應用 ) -> 依設計規範,效能與程度的考量,產出:程式撰寫

會遇到哪些人 ?

依開發流程,各階段可能會參與的團隊成員

  • 研究:使用者研究員、使用者體驗設計師
  • 發想:使用者研究員、使用者介面設計師使用者體驗設計師
  • 設計:視覺設計師、原型設計師 ( 精稿完成後,製作能互動的原型 )、使用者介面設計師使用者體驗設計師網頁設計師 ( 網頁頁面、網頁切版 )
  • 執行:前端工程師 ( 版面、動畫 )、網頁設計師 ( 網頁頁面、網頁切版 )

新手必看的設計規範

以網站開發、行銷頁面製作為例,不同的設計師與團隊成員,可能就會對同一個顏色有不同認知的情況,因此,設計規範的目的,在於讓大家有依循的準則,可以有共同語言進行溝通 ( 例如:原生物件的名稱 )

統一設計調性、提升工作效率、優化細節體驗

  • Google:Material Design
  • Apple:Human Interface Guideline

設計流程有那些環節 ?

設計流程主要橫跨 "創意發想" 和 "設計迭代",有六個階段:

  • IA ( 資訊架構 )
    • User Story ( 使用者故事 )
  • Functional Map ( 功能圖表 )
  • Logic Flow ( 邏輯流程 )
    • Flow Chart ( 流程圖 ) -> 以上多為使用者體驗設計師
    • UI Flow ( 介面流程 ) -> 這邊開始多為使用者介面設計師
  • Wireframe ( 線框圖稿 )
  • Mockup ( 設計精稿 )
  • Prototype ( 互動原型 )

接下來,會依序介紹,再正式進入繪製之前的四個階段: IA -> Functional Map -> Logic Flow -> Wireframe


下一篇
【Day 02】設計流程 (一):IA 資訊架構
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言