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

章節連結

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


課程相關資訊

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

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

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


筆記

  • 1. User Interface ( UI ) 指的是產品介面,其目的就是讓使用者與其互動時,得以順利完成使用者需求 ( Web  / App  … 等)
    2. 可概略分為四個階段:
    Research:了解產品相關知識和概觀
  • Synthesis & Ideation:探索使用者真正的痛點
  • Prototyping & Design:線框稿、介面流程、原型設計、視覺設計
  • Implementation:工程師依照設計規範,確保圖面和所要呈現的互動效果一致

3. 依據上述的分類,可以區分成各種不同類別的設計師
ui-design-engineers


系列文章

  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 9 – 單選按鈕和複選框
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 8 – Input 輸入格
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 7 – 物件狀態
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 6 – 按鈕
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 5
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 4
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 3
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 2
  • 按讚加入粉絲團

    延伸閱讀