开发人员如何快速设计移动 APP

更新于 3月26日  约 6 分钟

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

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

以下介绍对于没有设计功底的开发人员,如何快速设计产品 ui。

设计工具

因为开发人员没有设计功底,对 PS AI 等很多东西没有完全掌握。所以直接使用 Adobe XD(下载地址),安装后再更新成最新版。

它相对于其他的工具,比如 PS AI,具有跟代码层面一样的组件化优势。而且专注于 ui 层面,没有其他无关的功能。让我们专注于产品上,有各种组件可以让我们快速完成设计。不至于浪费太多时间在设计 ui 上。

安装完成后有一个初始教程,按照教程指示花几分钟就可以掌握 XD 的使用方法。

image.png

安装 UI 模板

Adobe XD 安装完成并更新后,注意要更新,不然模板下载下来打不开。在以下网址下载 xd 格式的模板。

image.png

image.png

界面介绍

  • 工具

image.png

  • 资源面板,相当于代码层面上的公共全局组件

image.png

  • 图层面板,相当于代码层面的 src 目录资源

image.png

  • 原型面板,相当于代码层面的链接跳转

image.png

快速设计一个产品

新建

新建一个 XD 文件
image.png
image.png

复制通用模板

删除生成的默认页面,并打开下载的 material 通用模板 xd 文件,选择并复制登录、注册、列表、个人中心、设置、图文、搜索、音乐、视频页面。选中下载的模板中需要的页面,按 ctrl + c 复制。切换到新建的文件,ctrl + v 粘贴。并拖动调整到适当的位置。
image.png

更换颜色

  • 修改颜色

image.png

  • 更换颜色

image.png

修改组件

image.png

修改图片

先从网上搜索下载想要的图片。免费高质量图片网站:https://picjumbo.com

选中需要修改图片的组件,然后把图片拖入进来
image.png

修改图标

通过 iconfont 查找图标:icon font 网址
进入网站后搜索图标,可以像购物那样把想要的图标加入到购物车,登录后将购物车的图标保存到新建的项目里。以后想增加其他图标可以往项目里加。非常方便,而且图标非常全面。
image.png
选择颜色后,下载 png 格式图标
image.png
然后把图标 ctrl + c,ctrl + v 复制到 xd 文件的相应页面的相应位置上。移动到适当的文件夹的适当位置上,并调整大小
image.png


结语

通过以上的操作,根据自己的想法调整,根据自己的想法创造组件。可以快速完成一个产品的设计。确定产品后,再去通过 react、vue、小程序等代码实现。这样很大程度上节省了设计一个产品的时间,同时也可以确定编码思路,避免重新编码。

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

阅读 279更新于 3月26日

推荐阅读
目录