开发人员如何快速设计移动 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、小程序等代码实现。这样很大程度上节省了设计一个产品的时间，同时也能够肯定编码思路，避免从新编码。

最后祝你们能快速拥有一个按本身想法开发出来的好产品。正在找工做的同窗能经过本身的产品，展现本身的实力，早日找到理想工做。