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

章節連結

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


課程相關資訊

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

本篇範圍:Chapter 1 ( 基本概念 ) ,一共有 13 篇

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


筆記

  • 設計規範的目的在於:統一設計調性和細節體驗,進而提升工作效率
  • 有什麼能用、用在哪、怎麼用
  • 常用的兩款設計規範:Google 的 Material Design, Apple 的 Human Interface Guideline

為什麼要有規範

1. 色彩不統一:如紅色是指哪種紅
2. 間距的大小單位的設定:以每 4px 或是 5px 作為基準單位
3. 字體、字距、字重…等
4. 插畫、格線和動畫轉換速率

詳情的設計概念和動畫示範,可以看這篇:初识Material Design设计规范(精简版)
Human Interface Guidelines


系列文章

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

    延伸閱讀