[筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 3

章節連結

近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域,那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門:畫出有程式邏輯的設計稿 中關於設計流程的第一階段。
layout design


課程相關資訊

[連結]:https://courses.hexschool.com/courses/enrolled/724307

本篇範圍:Chapter 2 ( 設計流程 – 1 ) ,一共有 13 篇

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。


筆記

IA➝Functional Map➝Logic flow➝Wireframe

Information Architecture (資訊架構)

這一段主要為 UX ( 使用者體驗設計師 ) 負責。目的是要增進網站內容的可用性和可尋找性。

User, Contents, Context 這三者的交集,需要有組織的規劃。在此之下會再區分成四塊:組織、導航、標示和搜尋

設計師會參與使用者故事 ( User Story ),通常會以「作為一個…我想要…,才能…」來描述。例如:作為一個使用者,我想要登入會員後,就能編輯個人資料。最後,你需要驗收測試。

為了避免過於發散,可以使用 User Story Mapping。在原先的使用者故事之上,加上使用者行為(想要達成的目標)、任務(如何執行)。
notes-hexschool-ui-design-3-1

Functional Map (功能地圖)

這一段主要為 UX ( 使用者體驗設計師 ) 負責。目的是將使用者需求變成功能規格的圖表,用於和開發人員確認功能。
可以使用 Adobe XD 或是 draw.io 來繪製
notes-hexschool-ui-design-3-2


系列文章

  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 6 – 按鈕
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 5
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 4
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 2
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 1
  • 按讚加入粉絲團

    延伸閱讀