開發人員如何快速設計移動 APP

做爲一個開發者，除了工做外，有時也會突發奇想，想弄一個按本身想法作出來的產品。

可是若是在想法未所有肯定以前，就開始直接編碼，編碼的思路會有侷限。作出來的東西效果可能並很差，達不到本身的預期。致使須要從新編碼，時間就會浪費掉。

如下介紹對於沒有設計功底的開發人員，如何快速設計產品 ui。

設計工具

由於開發人員沒有設計功底，對 PS AI 等不少東西沒有徹底掌握。因此直接使用 Adobe XD（下載地址），安裝後再更新成最新版。

它相對於其餘的工具，好比 PS AI，具備跟代碼層面同樣的組件化優點。並且專一於 ui 層面，沒有其餘無關的功能。讓咱們專一於產品上，有各類組件可讓咱們快速完成設計。不至於浪費太多時間在設計 ui 上。

安裝完成後有一個初始教程，按照教程指示花幾分鐘就能夠掌握 XD 的使用方法。

安裝 UI 模板

Adobe XD 安裝完成並更新後，注意要更新，否則模板下載下來打不開。在如下網址下載 xd 格式的模板。

• material 通用模板

• apple 通用模板

界面介紹

• 工具

• 資源面板，至關於代碼層面上的公共全局組件

• 圖層面板，至關於代碼層面的 src 目錄資源

• 原型面板，至關於代碼層面的連接跳轉

快速設計一個產品

新建

新建一個 XD 文件

複製通用模板

刪除生成的默認頁面，並打開下載的 material 通用模板 xd 文件，選擇並複製登陸、註冊、列表、我的中心、設置、圖文、搜索、音樂、視頻頁面。選中下載的模板中須要的頁面，按 ctrl + c 複製。切換到新建的文件，ctrl + v 粘貼。並拖動調整到適當的位置。

更換顏色

• 修改顏色

• 更換顏色

修改組件

修改圖片

先從網上搜索下載想要的圖片。免費高質量圖片網站：https://picjumbo.com

選中須要修改圖片的組件，而後把圖片拖入進來

修改圖標

經過 iconfont 查找圖標：icon font 網址
進入網站後搜索圖標，能夠像購物那樣把想要的圖標加入到購物車，登陸後將購物車的圖標保存到新建的項目裏。之後想增長其餘圖標能夠往項目里加。很是方便，並且圖標很是全面。

選擇顏色後，下載 png 格式圖標

而後把圖標 ctrl + c，ctrl + v 複製到 xd 文件的相應頁面的相應位置上。移動到適當的文件夾的適當位置上，並調整大小

---

結語

經過以上的操做，根據本身的想法調整，根據本身的想法創造組件。能夠快速完成一個產品的設計。肯定產品後，再去經過 react、vue、小程序等代碼實現。這樣很大程度上節省了設計一個產品的時間，同時也能夠肯定編碼思路，避免從新編碼。

最後祝你們能快速擁有一個按本身想法開發出來的好產品。正在找工做的同窗能經過本身的產品，展現本身的實力，早日找到理想工做。