# 如何看Adobe XD 設計稿

## :pencil2:步驟 1.
使用PC打開Adobe專案網址

* 店家 - 聚合碼支付
https://xd.adobe.com/view/7a3a7f9d-a698-474b-6cec-9c7edd08e695-0c0b/flow

* 停車場 - 聚合碼支付
https://xd.adobe.com/view/ededc3d7-c23f-4152-770b-7fcc385a06bc-9bdc/flow

:::warning
:zap:注意：

Adobe XD專案只能用電腦PC瀏覽，沒辦法用行動裝置看。
:::

打開後，可以看到所有的設計稿：

畫面左上方是專案名稱、設計稿數量、更新時間


---

## :pencil2: 步驟 2.
畫面右上方有兩個切換按鈕，分別是「**網格模式**」與「**流程模式**」

### **網格模式：** 網址末尾為「/grid」


### **流程模式：** 網址末尾為「/flow」

:::warning
:zap: 流程模式支援鍵盤：

**Ctrl + 滑鼠滾輪** → 放大縮小畫面
**Space + 滑鼠右鍵** → 位移畫面
:::


---

## :pencil2: 步驟 3.

切換到「**流程模式**」，可以看見：

Mockup畫面(不同裝置畫面)、尺寸標示、區塊細節標示、Icon表、圓角模擬圖等。

* 店家 - 聚合碼支付

* 停車場 - 聚合碼支付

* **Mockup 設計稿：** 呈現各種尺寸裝置的視覺設計，用假資料模擬各種可能的畫面。
* **尺寸標示稿：** 使用各種色塊來標示元件尺寸、元件邊距等等。類似排版的設計會整合成一張尺寸標示稿。
* **區塊細節標示：** 比較複雜的區塊，會特別標示說明。
* **Icon表：** 所有的icon尺寸與檔案名稱。
* **模擬圖：** 套上iphone圓角的模擬圖。

:::warning
:zap: 「Mockup設計稿」與「尺寸標示稿」的不同：

:::

## :pencil2: 步驟 4

點開「**尺寸標示稿**」，右邊的選單點選「**</>**」Tab，打開詳細訊息。


將滑鼠點擊任何一個色塊，可以看到色塊的長寬尺寸。


將滑鼠點擊文字，可以看到文字顏色、大小等資訊。


* **範例 1.**
下箭頭 icon 的長寬為 24 x 24


下箭頭 icon+間距長寬為 48 x 48 ，icon上下左右各間距12。


* **範例 2.**
有些元件的長寬尺寸，會用文字特別說明。
例如：按鈕寬度 = 螢幕寬度 - 32 (左右邊距)