# UI 設計稿
[Lighthouse](https://lighthouse.alphacamp.co/courses/80/units/19675)
### [Figma link](https://www.figma.com/file/ywr1YFOekgWOWF3YuoXFr6/Capstone%3A-Twitter_2022?node-id=0%3A1)

{%figma https://www.figma.com/file/ywr1YFOekgWOWF3YuoXFr6/Capstone%3A-Twitter_2022?node-id=0%3A1 %}

**Figma 頁面左側：**

### 🎨 Style Guide
在專案中，Style Guide 是為了統一設計或程式風格而誕生的準則，讓開發團隊（特別是設計師）有一套可以遵循的風格和規則。

在 AC 所提供的 Style Guide 中，設計師說明了網頁的配色規則、定義了不同層級的文字大小，讓小組在不同畫面中，能依循 AC 的 Style Guide 進行開發。


### ✨ Basic Elements
Basic Elements 通常會包含網站中必要的基礎元素，像是：表單，按鈕，Icon 等等，任何專案都需要有這些基礎元素。在 AC 提供的 Twitter 設計稿中，設計師也根據 Style Guide ，畫出了網站中會使用到的基礎元素。


### ⚡UI Components

UI Components 是透過 Basic Elements 組合延伸而成。設計稿中提供的 UI Components 是設計師專為 Twitter 設計的元件，如：Nav Item 中，Icon 與文字的組合、不同的 Modal 中，按鈕的使用方式與陳列。因此，設計師準備了像是推文、發文、彈出視窗等常用的樣式。


### 🙌🏻 使用者介面
頁面左側中，你可以看到設計師設計了不同的使用者介面，其中包含：

* **Desktop 版本**：此為 **AC 指定規格**，請同學於指定時間內完成。
* **後台管理**：此為 **AC 指定規格**，請同學於指定時間內完成。
* Mobile 版本：手機版設計為行有餘力的挑戰規格，不包含在指定功能的規格內，小組可在 Twitter 專案指定功能繳交後，自行決定是否進行額外挑戰。

若小組想在完成指定功能時一併加入手機版設計，除了取得組員共識外，也請小組審慎思考是否會壓縮到指定功能的開發時間，避免無法在期限內交付指定功能。


在指定規格的 Desktop 版中，一共有 22 張頁面（含前台 19 張、後台 3 張），設計稿中所提供的畫面列表如下：

1. 註冊＆登入相關：

1. 註冊頁 - /regist
1. 前台登入頁 - /login

2. 前台主畫面相關：

1. 首頁 tweets 總表- /main
1. 主畫面滾動示意圖 - /main：捲動範圍示意

3. 主畫面發文相關：

1. 新增 tweet - /main/tweet
1. 推文提示 - Tweet Style

4. 主畫回覆相關：

1. 首頁回覆 modal - /main/reply modal
1. 單一 tweet 詳情頁 - /repli_list
1. 單一 tweet 詳情頁回覆 modal - /repli_list/reply modal

5. 前台個人資料頁面：

1. 推文清單 - /user/self（Tab=推文）
1. 回覆過他人的留言清單 - /user/self（Tab=回覆）
1. 喜歡的內容 - /user/self（Tab=喜歡的內容）
1. 自己的 user profile - 編輯資料 - /user/self/edit
1. user 點擊跟隨者清單 - /user/self/follower
1. user 點擊正在跟隨清單 - /user/self/following

6. 查看他人資料前台頁面：

1. 別人的 user profile - /user/other
1. 別人的 user profile (已訂閱/開啟小鈴鐺) - /user/other/noti

7. 前台設定：

1. 個人資料設定 - /setting

8. iPad 版主畫面

9. 後台畫面：

1. 後台登入頁 - /admin
1. 後台推文清單 - /admin_main
1. 後台使用者列表 - /admin_users

---

在 /user/other 畫面中可看見通知 (小鈴鐺) 與私訊按鈕，為進階功能挑戰，暫時不需理會。

若行有餘力，可以在挑戰功能單元，查看更詳細的規格說明。

\
\
[回到首頁](https://hackmd.io/@2022-Oct-Twitter/Hk9m-Pn-j/%2Feax7gnB7R3KcclDqf27iDA%3Fview)

###### tags: `規格`