作为一个开发者，除了工作外，有时也会突发奇想，想弄一个按自己想法做出来的产品。

但是如果在想法未全部确定之前，就开始直接编码，编码的思路会有局限。做出来的东西效果可能并不好，达不到自己的预期。导致需要重新编码，时间就会浪费掉。

以下介绍对于没有设计功底的开发人员，如何快速设计产品 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、小程序等代码实现。这样很大程度上节省了设计一个产品的时间，同时也可以确定编码思路，避免重新编码。

最后祝大家能快速拥有一个按自己想法开发出来的好产品。正在找工作的同学能通过自己的产品，展示自己的实力，早日找到理想工作。