---
tags: UI 直播班 - 2021 冬季班
---

# W0-課前準備

</br>

## 一、前置作業

### 介面繪圖軟體 → Figma

* 觀看影片：
* Figma 基礎操作影片： [Figma 設計體驗營（上中下）](https://youtube.com/playlist?list=PLYrA-SsMvTPME64yI_Y8vKtfX-ghzN7AU)
* 可搭配簡報複習：[簡報連結](https://www.figma.com/file/jql6OFYkyR13S9hclNwyAB/Figma-Bootcamp?node-id=1%3A8)

- 前置安裝：
1. 從官網下載 [Desktop App](https://www.figma.com/downloads/)（也有網頁版可以使用，介紹都會以桌面版為主）
2. 下載字型外掛 [Font installer](https://www.figma.com/downloads/)（讓網頁版可以使用本機字型，用桌面版其實不需要但可以先裝著）
3. 免費註冊帳號，可以先登入桌面版
* 如果你還是學生，可以選擇去驗證 [教育帳號](https://www.figma.com/education/)（用含 edu 的帳號都可以），這樣就可以使用到全部的功能（每兩年要驗證一次）
* 主要功能免費版都有支援，不用擔心
4. 安裝 Plugins
- Lorem Ipsum 假文假字產生器
- Stark 檢查色彩對比度
- Plugin 安裝流程：

</br>
</br>

### 課程群組 → Discord

- 安裝 [Discord](https://discord.com/)
- 加入 Discord 群組 `UI 設計直播班｜2021 冬季`
- 修改 Discord Name（暱稱 / 工作 / 縣市）
- e.g. `小智 / 神奇寶貝大師 / 真新鎮`
- 更換 Discord 頭像成課前練習所製作的插畫（[詳見下方第三大點](#三、課前練習：個人專屬頭像)）
- 到頻道`🌟｜自我介紹區` 內發個自我介紹
- e.g. `大家好我是小智，目前在真新鎮當神奇寶貝大師，之後想要轉職成道館館主`

</br>

### 直播軟體 → Zoom
> 後續直播授課會使用 Zoom 來進行
- 安裝 [Zoom](https://zoom.us/)
- 註冊 Zoom 的帳號（**要跟註冊直播班的帳號用同一個信箱**）

</br>
---
</br>

## 二、基礎 UI 必備知識

### 什麼是 UI 設計

> UI → User Interface 使用者介面

- 現在多指數位裝置的產品介面，目的是使用者與其互動時，能順利完成任務。

</br>

類型依照常見分類可以粗略分成兩種：

:::spoiler Web 網頁

在瀏覽器上檢視的官方網站、電子商務平台等等


:::

:::spoiler App 應用程式

以手機的作業系統區分還可以再分成 iOS、Android 等等


:::

</br>

所有使用到螢幕的介面也都可以算是 UI 設計的一部份
e.g. 電視、智能手錶、車子儀錶板、甚至是 VR 也都在 UI 的範疇內

</br>

### UI 不等於 UX

> UX → User Experience 使用者體驗

- UX Designer 規劃的會是這個產品有什麼功能、流程怎麼操作
- UI Designer 則是根據 UX Designer 給的架構，去優化介面細節與呈現

實際的職務分配每間公司都不盡相同，也會出現 UI Designer 全包的情況

</br>

### 設計流程

> IA → Logic Flow → Wireframe → Mockup → Prototype

- IA 資訊架構：訂定功能層級
- Logic Flow 邏輯流程：確認互動邏輯
- Wireframe 線框稿：規劃介面元素
- Mockup 精稿：增進視覺呈現
- Prototype 互動原型：模擬操作效果

在這次的直播班會根據課程需求對流程做一些調整，更詳細的內容會在課堂上講解，
這邊稍微知道一下常見的設計流程有哪些階段與其目的就好

</br>

### 設計規範

> 一份告訴你有什麼設計元素能用、用在哪、跟怎麼用的文件

常見的設計規範：

- Google：[Material Design](https://material.io/design)
- Apple：[Human Interface Guideline](https://developer.apple.com/design/human-interface-guidelines/)

設計規範有很多細節可以參考，對於初學者來說，是個快速了解介面規範的範本。
若是對手機 App UI 有興趣的人一定要詳讀這些規範

</br>
---
</br>

## 三、課前練習：個人專屬頭像

要連線到設計師的腦中世界，首先要將自己化身為小怪獸，你會是個怎麼樣的怪獸呢？

> 請使用練習設計稿所提供的五種素材製作出個人專屬頭像

> 詳細內容請至課前練習的 [任務頁面](https://rpg.hexschool.com/training/25/task) 檢視

</br>