將您的應用程式創意轉變為可供展示的原型

對某個殺手級應用程式有絕佳的點子?使用 Adobe XD 製作初步的模型,
即可在手機上進行展示。

下載線框:
1. 在 Adobe XD 歡迎畫面中,按一下「UI 套件」區段中的「線框」連結。或者,在這裡下載
2. 從 Behance 個人檔案頁面中按一下「下載套件」(Download kits) 連結。
3. 將 wires.zip 檔案解壓縮,然後在 Adobe XD 中開啟適當的 .xd 檔案。
 
建立設計:
1. 選取「縮放」工具,然後在正確的工作畫板上拖曳,以便檢視更多細節。
2. 選擇「選取」工具,然後按一下並拖曳,以選取工作畫板上所要的元素。選擇「編輯 > 複製」,再選擇「檔案 > 新增」,選擇正確的工作畫板大小以建立新的 XD 文件。接著選擇「編輯 > 貼上」,將元素貼到新的工作畫板上。
 
秘訣:您也可以按一下工作畫板標題來選取其內容。然後,複製並貼到新的檔案中。
 
3. Shift+按一下以選取不想要的元素,按一下滑鼠右鍵並選擇「刪除」。
 
秘訣:視工作畫板的建立方式而定,您可能需要開啟「圖層」面板 (「檢視 > 圖層」),在圖層群組上按一下滑鼠右鍵,然後選取「解散群組」來解散群組,然後正確地選取個別元素。
 
4. 視需要拖曳剩餘的元素以重新排列。
5. 按兩下某個形狀 (例如矩形) 以存取可編輯的個別控點。拖曳路徑上的個別控點以重新定義該形狀。
6. 建立可重複使用的字元樣式:選取文字元素,使用屬性檢視窗的「文字」和「外觀」區段中的設定來設定樣式。按一下「資產」面板 (「檢視 > 資產」) 中「字元樣式」旁邊的加號 (+) 圖示,然後在您的設計中重複使用該樣式。
7. 建立可重複使用的符號:建立形狀或設計元素 (視需要將元素組成群組)。按一下「資產」面板中「符號」旁邊的加號 (+) 圖示,然後在您的設計中重複使用該符號。
8. 再建立 2 個工作畫板:選取「工作畫板」工具。按一下適當的工作畫板大小。執行此動作兩次。
9. 使用「選取」工具以拖曳並選取第一個工作畫板上的元素,按一下「重複格線」,然後拖曳右側的綠色控點,在工作畫板上複製工作畫板元素。將滑鼠游標放在兩個工作畫板之間,然後拖曳粉紅色的導引線,直到邊界等於兩個工作畫板之間的距離。
10. 從 Finder 或檔案總管中拖曳 3 張影像,以填入形狀中。
11. 為頁首拖曳含有 3 行文字的文字檔來取代預留位置文字。
12. 取消選取「重複格線」,然後再重新選取。按一下「解散群組格線」,以顯示其他工作畫板上的隱藏內容。
 
建立原型:
1. 按一下頂端的「原型」索引標籤。
2. 將框線從一個工作畫板拖曳到下一個。
3. 按一下頂端的「播放」按鈕,使用「桌面預覽」來測試流程。
 
就是這麼簡單。如需詳細資訊,請造訪 Adobe XD 教學課程頁面。