让原型更加高保真,重要的规范是字体、字号、间距、对齐

不懂技术怎么做产品?15天在线学习,补齐产品经理必备技术知识,再也不被开发忽悠。了解一下>

现在部分产品职责中要求中高保真的原型,而是否要求产品经理输出高保真原型有着相反的两种主张,主要矛盾在于时间成本以及影响到了设计师设计。这篇文章里不讨论这个问题,仅仅表述下,笔者作为一个技术出身的产品经理,如何学会能够快速地产出高保真原型的,以下写的也是态度篇,文字较多,期望能够给各位看官大老爷提供个参考。

方是方,圆是圆,规范最重要。

以前我的做法会是找找优质元件库,就我个人而言,这是走了段弯路。好的元件即使它精致且白搭,但对于产品设计来说其实也是不利的,我们做的产品是为了贴合场景、服务用户、优化体验,而不是为了对上漂亮的元件。做得demo多了慢慢发现让原型更加高保真,重要的规范是字体,是字号,是间距,是对齐。

一、字

  1. 字体统一,一般不要用几种字体,就选常用字体就行,1~2种足够;
  2. 字号不要乱,一级标题、二级标题、正文、简介描述等等字号大小都尽可能的统一;
  3. 颜色规范,标题、正文、描述等等颜色事先统一并做出相应的区分。

这里可以把规范事先定好(如图),但并不需要很硬的将规范事先画出来,能够在设计过程中根据实际情况调整为最佳,主要是各个部分的一致性。这种参考数值的图,更多是用在最终稿设计完成后展示设计的数值,而并不能称之为参考数值。

小贴士:善用Axure中的基本元件,添加几个要用的规范文字元件不花时间,也可以直接将本身的元件更新。做好一套就行,不断迭代。操作不详说了,假设不清楚,点点如下图的几个画圈标注的地方就大致了解了。

二、图

主要会用到的图片为以下几种,背景图、展示图(广告/产品/文章等)、图标。在高保真原型设计中,主要考虑的是背景图和图标。对Axure自带的图片元件不太喜欢的,找几张接近项目主题的代替下就行了。

图标还好,目前各icon网站提供的素材都不错,我会经常在各个UI设计的网站上看看,但是一般取icon就在https://www.iconfinder.com/找上一套,实在没成套的,就按同风格的凑一套。不用太花时间,一开始实在不好找,就用小方块代替也可以的。

背景图在整体设计中最为影响项目的体验,也是在设计中会要多花些时间,这时候,看看竞品、和设计师沟通都是不错的方法。之所以重视它,因为颜色、背景等对产品内容、功能等布局有所影响的,在产品设计之初就做出思考,更有可能做出最佳体验的设计。且对于整个项目来说,会减少设计师反复修改的时间。

我们都是期望做出更好的产品,产品原型设计时就能得到各方的建议是好事,不用真等到原型设计后再反复修改。而且多数情况项目开发的流程是瀑布模型,要抓好用户体验以及产品研发效率,可以靠我们产品多把把关多做点事。画原型别太随意,时刻提醒自己保持更新迭代,让乌龟越画越好。

小贴士:同一页面的图尽量用同一色系的,产品图等用透明背景的,要么就有浅灰色背景框替代。为什么不用原型工具里的,颜色和样式太吸引眼球的话,会把注意力带偏

三、间距

间距设定主要一大问题就是统一,千万不要随缘对齐,规规矩矩的按统一的大小排列整齐。各同类间距做到一致,规规矩矩的对齐

其它各个元素之间的间距留白也有技巧,这里就不延伸了。这里每次设计到时都做些许调整会让作品变得更好,尽量的使用动态面板或母版,每次更新时要调整的内容就少很多了。尽量做到可复用,简单修改就能做好每个相关页,不至于让更新变得消极,页面太多确实容易心态爆炸。

四、对比竞品

多看看和竞品的区别,在相似项目上找经验,千万注意度,这里可不能是临摹或抄袭。还有一个较重要的是,仔细的看看自己原型与设计师做完后的提高,这会让自己很快的接收一大波经验,下次肯定会做得更好。色彩尽量的淡,主要还是找准布局,在前人创作上做迭代没理由做得很差的。

五、比上一次做得好

请时刻提醒自己,自己的手艺也要有更新迭代。每次开始做的新内容,我们能做出更好设计的话,起点天然会高点,后续接手的同事也会带来更多优化。

高保真原型的产出也不是一看就会的,这项技能需要我们通过日常工作不断进步,但请相信,它并不困难,相反非常的简单。完全可以通过我们日常工作中做的原型进行不断更新迭代,努力将原型一次做得比一次好。快则三两月,最终设计高保真原型就如同习惯一般,自然而然的就做出来了。

有些童鞋为什么做了很长时间都不能产出高保真原型,因为单单练习只能让自己对工具更加熟练。就如练字,字不用心去写好,写多了,反倒是把坏字练成了习惯。当然比喻不恰当,低保真原型本身可是没错的。而快速产出高保真原型能够在我们日常中练成,当然是最好不过的。

心态篇 

1、不要担心自己没有艺术细胞

我们是产品经理,天生为创造美好而存在,不一定在色彩上酷炫,但肯定能做出精致的原型的。尤其像笔者一样从事ToB产品的童鞋,视觉上更是简单了些,表现简单清晰,操作方便简单,体现专业严谨就好。

2、别害怕影响到了设计师

即使公司给配备了各类设计,多数能被自己影响动摇的都是相对“年轻”的,设计比自己还差的,刚好共同进步。当然,多数应该是甩上自己几条街的设计“爸爸”,可能会被好好教育的,但没关系的,能够做出提高的总规是好的。

我们这些产品经理,有个好品质,能够很快承认错误,接受自身不足而去不断改正雕磨产品。我很佩服一类人,能对自己动刀动枪的那种,书面点,就是常自省的人。很庆幸,常年从事产品工作让自己也能有机会变成自己佩服的那一类人。

真不要怕影响到设计师,我们本身职责就有相关产品设计的工作,无论处于什么目的及方向,原型就是要影响到设计师的,如何让设计更加偏向好的影响而不是负面影响,也是我们工作一个重要职能。

3、熟能生巧

原型的产出总会占上我们工作的一部分,我们每次要求产品做出提高,我们不断丰富的经营,不断累积的设计,也足够让自己的原型逐步变成高保真原型了。所以吧,让每次都比上一次好,让高品质设计变成习惯,产出高保真原型其实可以变成一个很简单的过程,经历了,它自然就提高了。熟练之后,高保真原型花费的时间并不多,还是很合理的。

预祝春节快乐。

 

本文由 @用心的工匠 原创发布于人人都是产品经理。未经许可,禁止转载。

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. 厉害了哥厉害

    回复
  2. 学习了

    回复
  3. 您好,请问从“iconfinder”网站上下载的元件,怎样导入到Axure里进行使用呢?

    回复
    1. 我自己是直接当图片使用的。
      需要导入axure以后方便使用的话,可以先创建元件库再载入元件库就好的。
      对图标感兴趣iconfont.cn也不错,只是这也不是axure元件库。

      回复
    2. 感谢,感谢 :lol:

      回复
  4. 想请教一下,一个刚入门的产品助理,需要会做交互动效的原型吗?大部分产品经理做原型图是静态的还是可以交互的呢?

    回复
    1. 产品岗需要向相关部门或人员传达设计的思路,我个人觉得,动效是一种不错的表达方式,但无论使用哪种形式,只要传达得清晰,协作得顺畅都是好的。而仅职责来说,看任职的公司根据自身团队来定。并且这个不难,抽些时间做做,今后需要做动效也能很轻松实现,祝好。

      回复
    2. 真是太感谢你的耐心回答了!TAT 我去努力了

      回复
    3. 🤝

      回复
  5. 不是很明白,评论区里很多反对高保真原型的,难道是不具备画高保真原型的能力?说实话,高保真原型可以不时常画,但这个能力应该具备不是么?

    回复
    1. 🤝

      回复
    2. 同样有这个疑问,而且可以帮忙解答一下吗

      回复
    3. 无论如何,终归是想做出一款值得称赞的产品,高保真多少能够拉高起点。我个人觉得能力应该要有的,我们产品在指指点点UI的时候,理应更加的硬气。界面、用户体验、交互这些都要把控,严格要求自己,原型定会越做越好,越做越快。仅个人看法,并不一定适合所有人。

      回复
  6. 不错,可以按照高保真的规范去做线框。视觉上留给设计发挥。 ;-)

    回复
    1. 🤝

      回复
  7. 一直以为高保真原型是要细致到一个icon的设计,到具体的颜色,
    但是看完作者的分享,其实是在低保真原型的基础上,注意了字体、大小、位置的精细度

    这确实是对自己的高标准,也不会影响到UI对色彩的考量

    回复
    1. 🤝

      回复
    2. 这是我觉得能提升保真度比较重要的一部分

      回复
  8. 移动端里出现了下拉框???

    回复
    1. 不好意思,作图时没注意到。我也并不是被要求输出高保真原型的,平时工作和技术也产生了些默契,下次发文尽量注意细节

      回复
  9. 好奇作者是哪家公司的?

    回复
    1. 浙江就来帮企业

      回复
  10. 做的太精细,会影响UI的发挥

    回复
    1. 嗯,无论怎么输出,最终还是有利协作最重要。如果我们能做到往积极的影响就最好了

      回复
  11. 其实我不建议产品画高保真的原型,费时费力,且也限制了UI本身的发挥空间,各个工种干自己该的事情,只要要求清除,自然会拿出想要的东西

    回复
    1. 嗯,利于当下团队协作的方式最好

      回复
圈子
关注微信公众号
大家都在问