• 跳至主要導覽
  • 跳至主要內容
  • 跳至主要資訊欄
  • 跳至頁尾
Logo

張阿道

  • SEO課程
  • 工作職缺
  • 聯絡

UI, UX設計師自學課程 (軟體、使用者情境分析)

UI、UX意思

UI (User Interface 使用者介面) 是讓人能與電腦互動的軟體或設備,特別是 App 和網頁上的視覺元素 – 如顏色、文字、圖案和圖形、表單/欄位、按鈕、選單、排版與佈局、導覽列… 等。「UI設計」是UX設計工作內容之一。

廣義的 UI 包括所有讓人能與電腦互動的電子設備 – 如鍵盤、滑鼠、遙控器、VR眼鏡、觸控螢幕…

UX (User experience 使用者體驗) 是一個人使用 App、網站和網頁的整體體驗,尤其是在易用性 (Usability) 方面。「UX設計」著重於解決問題,讓使用者順利達成目標 = 有助提升使用者/顧客滿意度。

UI、UX設計自學課程

流程:

  1. 使用者研究 (User research) 方法:透過問卷調查、關鍵字分析、深度訪談、Persona分析和同理心地圖分析使用者需求&行為,並撰寫 Problem statement (問題陳述) 。
  2. 同理心地圖 (Empathy map) 有助訓練換位思考

    使用者研究流程(5W2H1E):

    • 確立研究目的(Why)
    • 提出假設&問題(What)
    • 設計研究方法(How)
    • 招募受試者/目標使用者(Who)
    • 蒐集資料(When、Where)
    • 分析資料/研究結果(How much、Effect)
    • 結論與建議,並撰寫研究報告
  3. User story (使用者故事) 樣板寫法: As a [who] , I should be able to [do what] so I can [achieve what objective] .
  4. 範例: As a gym member, I should be able to view my payment history so I can know how I’m being billed.

    Acceptance criteria / Conditions of satisfaction (驗收標準/滿足條件) 樣板寫法: User should be able to [do what] .

    範例: User should be able to view payments made in the last 12 months.

    User/Customer journey map (使用者/顧客旅程地圖) 模板

  5. IA (Information Architecture 資訊架構) :用KJ法/親和圖法分析資訊架構,並透過心智圖軟體(如Miro Mind Map、MindMeister、GitMind、XMind)或表格(如Excel、Google試算表)製作資訊架構圖。
  6. 範例:

    用Miro Mind Map製作的 Apple 網站資訊架構圖(部分)
  7. UI Flow / Wireflow 設計工具:Balsamiq、Moqups、MockFlow、Justinmind、FlowMapp
  8. Wireframes (線框圖) vs Wireflow (線框流程圖)
  9. UI Prototype 設計工具:Figma、Adobe XD、Sketch、Framer、Justinmind、proto.io、UXPin
  10. 一般來說, UI Prototype (原型) 工具的擬真度比 Wireframe/Wireflow 工具高。

    Adobe XD 截圖
  11. Hex 和 RGB color code (顏色代碼) 配色網站:Coolors、Color Hunt
  12. Coolors 截圖
    Color Hunt 截圖

    使用的顏色愈少愈好,特別是不要干擾文字易讀性 (Legibility) 。

  13. 字體:建議使用 System font 或 Web-safe font ;使用的字體愈少愈好,優先考慮可讀性 (Readability) 。
  14. 字體大小:可以在 Type Scale 預覽有黃金比例的字體大小。
  15. Type Scale 截圖

    字體不要太小——除非有不想讓人看,但又不得不寫的字,例如 Apple 產品頁底部的小字。

UI、UX工作/實習

UI, UX設計師工作內容:

  • 與產品經理、前端&後端工程師溝通協調
  • RWD與無障礙網站設計、軟體/App設計
  • 使用者研究
  • Problem statement 撰寫
  • User story & Acceptance criteria 撰寫
  • 使用者旅程地圖製作
  • 資訊架構分析、網站架構樹狀圖設計
  • UI flow 設計
  • UI prototype 設計
  • 視覺設計(顏色、文字、圖案和圖形、表單/欄位、按鈕、選單、排版與佈局、導覽列)
  • UAT(A/B測試、眼球追蹤、易用性測試)

UI, UX設計師薪水約 4 ~ 8 萬,視工作經驗、內容與績效而定。

UI, UX面試要準備作品集。

SEO課程

想增加網站流量、營收和發揮影響力? 張阿道SEO(搜尋引擎優化)課程教你

  • 如何讓Google搜尋到自己的網站
  • 網站架構規劃
  • SEO關鍵字設定
  • SEO文章架構
  • 網頁優化
  • 如何被「Google精選摘要」
  • SEO成效分析
  • SEO公司怎麼選

Check your inbox or spam folder to confirm your subscription.

SEO課程

想增加網站流量、營收和發揮影響力? 張阿道SEO(搜尋引擎優化)課程教你

  • 如何讓Google搜尋到自己的網站
  • 網站架構規劃
  • SEO關鍵字設定
  • SEO文章架構
  • 網頁優化
  • 如何被「Google精選摘要」
  • SEO成效分析
  • SEO公司怎麼選

Check your inbox or spam folder to confirm your subscription.

  

主要資訊欄

廣告文案

廣告文案範例 (撰寫、行銷課程、創意企劃銷售)

網頁設計

網頁設計教學:軟體、範例與自學課程

電商平台

電商意思、平台比較&課程 (網路商店開店)

行銷企劃

行銷企劃書範例(工作內容、提案計畫格式)

Footer

  • SEO課程
  • 工作職缺
  • 聯絡

張阿道最新教材

Check your inbox or spam folder to confirm your subscription.

Logo

隱私權政策 | 使用條款

© 2023 張阿道 保留一切權利。

↑