开发人员如何快速设计移动 APP
2020/3/28 5:01:21
本文主要是介绍开发人员如何快速设计移动 APP,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
作为一个开发者,除了工作外,有时也会突发奇想,想弄一个按自己想法做出来的产品。
但是如果在想法未全部确定之前,就开始直接编码,编码的思路会有局限。做出来的东西效果可能并不好,达不到自己的预期。导致需要重新编码,时间就会浪费掉。
以下介绍对于没有设计功底的开发人员,如何快速设计产品 ui。
设计工具
因为开发人员没有设计功底,对 PS AI 等很多东西没有完全掌握。所以直接使用 Adobe XD(下载地址),安装后再更新成最新版。
它相对于其他的工具,比如 PS AI,具有跟代码层面一样的组件化优势。而且专注于 ui 层面,没有其他无关的功能。让我们专注于产品上,有各种组件可以让我们快速完成设计。不至于浪费太多时间在设计 ui 上。
安装完成后有一个初始教程,按照教程指示花几分钟就可以掌握 XD 的使用方法。
安装 UI 模板
Adobe XD 安装完成并更新后,注意要更新,不然模板下载下来打不开。在以下网址下载 xd 格式的模板。
界面介绍
- 工具
- 资源面板,相当于代码层面上的公共全局组件
- 图层面板,相当于代码层面的 src 目录资源
- 原型面板,相当于代码层面的链接跳转
快速设计一个产品
新建
新建一个 XD 文件
复制通用模板
删除生成的默认页面,并打开下载的 material 通用模板 xd 文件,选择并复制登录、注册、列表、个人中心、设置、图文、搜索、音乐、视频页面。选中下载的模板中需要的页面,按 ctrl + c 复制。切换到新建的文件,ctrl + v 粘贴。并拖动调整到适当的位置。
更换颜色
- 修改颜色
- 更换颜色
修改组件
修改图片
先从网上搜索下载想要的图片。免费高质量图片网站:https://picjumbo.com
选中需要修改图片的组件,然后把图片拖入进来
修改图标
通过 iconfont 查找图标:icon font 网址
进入网站后搜索图标,可以像购物那样把想要的图标加入到购物车,登录后将购物车的图标保存到新建的项目里。以后想增加其他图标可以往项目里加。非常方便,而且图标非常全面。
选择颜色后,下载 png 格式图标
然后把图标 ctrl + c,ctrl + v 复制到 xd 文件的相应页面的相应位置上。移动到适当的文件夹的适当位置上,并调整大小
结语
通过以上的操作,根据自己的想法调整,根据自己的想法创造组件。可以快速完成一个产品的设计。确定产品后,再去通过 react、vue、小程序等代码实现。这样很大程度上节省了设计一个产品的时间,同时也可以确定编码思路,避免重新编码。
最后祝大家能快速拥有一个按自己想法开发出来的好产品。正在找工作的同学能通过自己的产品,展示自己的实力,早日找到理想工作。
这篇关于开发人员如何快速设计移动 APP的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-26uniapp 哪里看mp-html 是否有引用-icode9专业技术文章分享
- 2024-09-26uniapp 怎么显示html 代码-icode9专业技术文章分享
- 2024-09-26uniapp 有没有自带mp-html 吗-icode9专业技术文章分享
- 2024-09-25前端高频大厂面试真题解析与实战教程
- 2024-09-25前端高频面试题详解:新手必看指南
- 2024-09-25前端高频面试真题详解与实战攻略
- 2024-09-25前端大厂面试真题及答案详解:从零开始的初级面试攻略
- 2024-09-25前端面试实战:新手必备技巧与案例解析
- 2024-09-25前端面试题及答案详解:初级面试必备
- 2024-09-25前端面试真题及答案详解:适合入门与初级用户