调研报告:原型图出稿
作者: dkvirus 发表于: 2018-08-02 20:04:48 最近更新: 2018-08-02 20:06:58

之前做 Web 项目,拿到手就开始编码,编到一半又会变得很迷糊,这是由于准备工作不充分给后续工作带来的坑。我了解的项目生命周期是这样的:(也可能不准确啦…)

  • 需求分析。拿到客户提的需求进行分析;(产品经理)
  • 原型图出稿。UI 设计师画原型图跟客户确定是否页面大致做成这样;(产品经理)
  • 设计表结构。原型图确认之后,分析业务,这一过程要考虑表之间关联关系;(开发人员)
  • 开发代码。原型图帮助开发人员理清做出来的东西像什么样子,表结构帮助开发人员确认功能如何开发;(开发人员)
  • 测试代码。写测试案例,覆盖尽可能多的应用场景,让代码变得健壮;(开发人员 + 测试人员)
  • 运维。服务器选择/购买+环境搭建+部署代码;(运维人员)
  • 交付项目。前面每一步都按部就班,编写对应的文档,这一步就会变得很简单,汇总完整的开发流程文档,方便后续维护人员修复 bug 或者扩展功能。(运维人员)

就我个人来说,前面关注点大多放在开发、测试和运维。对于需求分析、原型图出稿和表结构设计没怎么接触。很多项目组开发都会忽略其中一至两点,但在我看来缺一不可。


本文调研原型图出稿的 “硬件”,使用什么软件制作原型图,相关的素材网站、学习教程等。

1. 原型图设计工具

  • Axure RP。老牌设计工具,貌似对中文支持不是很好,但有汉化包可以解决这一问题;
  • 磨刀。国产工具,可在浏览器在线编辑,也可以下载客户端本地编辑。使用文档比较齐全,视频教程也很 nice;
  • xiao piu。

2. 处理图片——ps

原型图设计的页面比较单调,需要加点图片、图标等点缀。这就需要 photoshop。常见的抠图、修图等。推荐一本 ps 入门书 《好学、好用、好玩的 Photoshop》,不像板砖那么厚,有很多插图,看着都能懂。(这周刚好买了本二手书,费用:¥18)

3. 图片素材

使用 ps 抠图/修图都需要图片,图片从哪来??网上有很多图片素材网站,多逛逛总有适合的图片,也能培养自己的审美,看的多了有比较了也就知道什么好看了。收集的素材网:

  • 创客贴
  • 包图网
  • 千图网
  • 昵图网
  • 花瓣网

4. 图标

除了图片也会用到图标,现在图标基本都用字体库代替而不是纯图片了。图标库有:

  • iconfont
  • font-awsome

在做移动端如微信小程序底部 bar 会用到图片而不是图标,使用 ps 慢慢修吧。

5. 矢量图

有时候对图片有要求,要用矢量图,相关设计软件有 ai(Adobe Illustrator)

吐槽一下:Adobe 的正版软件 Illustrator 和 photoshop 单独购买都是 3300 元。去网上下载试用期只有一个月,找序列号真是累死人,试了好多都不管用。有人说下载注册机,装个软件麻烦的一逼。

首页
友链
归档
dkvirus
动态
RSS