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

Posted onAuthorANDY LIEN

章節連結

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

課程相關資訊

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

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

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

筆記

IA➝Functional Map➝Logic Flow➝Wireframe

Logic Flow

使用特定圖形符號來表示解決問題的步驟和程序，每個形狀是有意義的。
notes-hexschool-ui-design-4-1
上述步驟完成後，會進行 UI 介面流程圖：常見的有文字列表和介面圖表。
notes-hexschool-ui-design-4-2 notes-hexschool-ui-design-4-3

Wireframe

以單純的線條或是單色的色塊去規劃頁面版型，進而和團隊一起制定下來技術規格。( 目的：呈現產品頁面上主要的資訊、排版與架構，並了解使用者如何與產品互動 )
notes-hexschool-ui-design-4-4 notes-hexschool-ui-design-4-5
要記得需要有頁面註解，否則只是單純的畫面草稿

系列文章

  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 9 – 單選按鈕和複選框
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 8 – Input 輸入格
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 7 – 物件狀態
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 6 – 按鈕
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 5
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 38 – 專案協作上的常見問題
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 37 – 如何與工程師互動 2
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 36 – 如何與工程師互動
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 35 – 原型設計的種類與技巧
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 34 – 設計標註檔
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 33 – 切圖命名與格式
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 32 – 設計規範
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 31 – 深色模式
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 30 – 頁面
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 3
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 29 – 改變頁面狀態來提升使用者體驗
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 28 – 響應式排版
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 27 – 高轉換的登陸頁
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 26 – 模板
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 25 – 運用常見的介面版型排出好設計
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 24 – 頁尾
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 23 – 頁首
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 22 – C.R.A.P. 四個幫助你優化介面的設計準則
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 21 – Form 表單
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 20 – DataTable 資料表
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 2
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 19 – Alert 警告訊息
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 18 – Modal 互動視窗
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 17 – Card 卡片
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 16 – Tooltip 提示工具
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 15 – 摺疊面板
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 14 – 導覽元件
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 13 – 通用設計
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 12 – 色彩
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 11 – 文字
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 10 – 連結和圖示
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 1
    • 按讚加入粉絲團

    延伸閱讀