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

# W0-課前準備

</br>

## 一、前置作業

### 介面繪圖軟體 → Adobe Xd

* 觀看 [課前教材影片：Adobe Xd 基本操作](https://courses.hexschool.com/courses/enrolled/1364734)
* 註冊 Adobe 帳號
* 下載 [Adobe Xd](https://www.adobe.com/tw/products/xd.html)，更新到最新版本，並確認可以正常開啟
* 如果沒有安裝過 Adobe Creative Cloud 會自動下載
* 安裝 Xd Plugins
- Lorem Ipsum 假文假字產生器
- Stark 檢查色彩對比度
- Plugin 安裝流程：

</br>

- 安裝字型
* [思源黑體 TW](https://fonts.adobe.com/fonts/source-han-sans-traditional-chinese)（Source Han Sans Traditional Chinese）
* [思源宋體 TW](https://fonts.adobe.com/fonts/source-han-serif-traditional-chinese)（Source Han Serif Traditional Chinese）
* [Roboto](https://fonts.adobe.com/fonts/roboto)
:::spoiler 字型安裝流程
透過 Adobe Fonts 安裝 → 登入 Adobe 帳號後，點擊右上角的開關一次啟用全部字重

        如果你的電腦已經有 Noto Sans CJK TC 等相同的字型，可以不用刪除，但還是要啟用這些字型

:::

</br>

### 課程群組 → Slack

- 安裝 [Slack](https://slack.com/intl/zh-tw/)
- 加入 Slack 群組
- 修改 Slack Display Name（暱稱 / 工作 / 縣市）
- e.g. `小智 / 神奇寶貝大師 / 真新鎮`
- 更換 Slack 頭像成課前練習所製作的插畫（[詳見下方第三大點](#三、課前練習：個人專屬頭像)）
- 到頻道內發個自我介紹
- 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/20/task?type=detail&id=178) 檢視

</br>