12个规范原型的方法,好看的原型就是有用

UI设计有设计规范要遵循,同样的原型图也有自己的规范。

任何通过图形示意的东西一样,规范带来的最大的好处是提高信息传达效率。

人是视觉动物,好看的东西总喜欢多看两眼,混乱的东西给人最直白的感受就是逻辑混乱。

这就是「卷面分」。

这篇文章我们说下原型图的规范。

所谓的规范就是定规则,按照这一套规则作为标准进行执行,这里边包含元素规范、布局、颜色等等。

我对画原型图对规范的要求是:尽量向着规范靠近。

原型图不像UI图,不用去到像素级别去抠。

因为画原型我们需要考虑时间,考虑效率,我们需要将最大的精力去放到方案的产出,写需求文档上。

规范只是为了让我们有个标准,如果你想画的规范时,给你一个参考。

原型图规范

1. 尺寸

对于手机端、PC端、平板、车机等不同的产品形态,最大的区别是尺寸。

在画原型图之前,我们要做的就是先把页面原型尺寸给定下来。

可以参考的规范有:手机端首屏的尺寸设置为 375×667 px。

注:375 × 667 是首屏高度,也就是原型图的最小高度,并不是原型的固定高度,当内容很多时,直接把高度拉长到合适的内容即可。下边提到的PC端尺寸也是这个道理。

状态栏:375 × 20 px

导航栏:375 × 44 px

底部tab:375 × 49 px

12个规范原型的方法,好看的原型就是有用

这个规范的尺寸是使用的 iPhone8 的尺寸,产品经理火的那几年就是这个尺寸火,所以用这个尺寸的多。

你同样的也可以使用其他常用的手机端尺寸,这没有固定限制。

我比较建议用这个尺寸,因为很多Axure组件也都是按照这个尺寸去做的,适配的比较好。

对于PC端,尺寸可以按照 1440×900px。

12个规范原型的方法,好看的原型就是有用

虽然当前使用最多的屏幕尺寸是1920×1080。

对于原型图1440的宽度,如果是左边是原型图,右边写需求描述的话,在屏幕上可以正好展示出原型图 需求描述,不用左右滑动去看。

12个规范原型的方法,好看的原型就是有用

对于平板,建议直接使用 768×1024 px。

12个规范原型的方法,好看的原型就是有用

2. 颜色

对于原型图的颜色,我们可以分别来看:

1)有UI设计师参与的

我们可以考虑使用中性色,中性色是指不强烈的色彩,常见的就是黑白灰。

在选择黑白灰时,我很推荐的是Axure色板中自带的颜色,在画原型时直接选取使用就行。

12个规范原型的方法,好看的原型就是有用

另外一些大厂规范中,都有自己的中性色定义,你也可以选择使用。不过我不建议你花费太多时间去处理颜色。

如下图,左边是用Axure中的黑白灰,右边是使用的Arcodesign的中性色,在画原型时,整体上影响并没有那么大。

12个规范原型的方法,好看的原型就是有用

虽然右边的更好点,如果你要用其它中性色,可以将颜色收藏进Axure的色板中,方便下次使用。

12个规范原型的方法,好看的原型就是有用

2)没有UI设计参与的

比如说后台,可以添加一些颜色。

后台一般都是内部使用,对样式没有太高要求,也不会让UI进行设计;

因为后台一般都是使用现成的UI组件进行开发的,比如Antdesign、Element等;

具体什么颜色,可以用万能的蓝色作为主色调,使用其他颜色作为辅助即可。

12个规范原型的方法,好看的原型就是有用

对于语义色,来表达成功、警告、错误语义,可以选择红绿黄进行使用即可。

12个规范原型的方法,好看的原型就是有用

3. 文字

对于文字,涉及到字体、字号、粗细、行间距等。

12个规范原型的方法,好看的原型就是有用

字体

可以使用 Arial,也就是Axure默认的字体。

同样的,也可以使用苹方、微软雅黑,这两个字体则需要单独安装。

不过当你通过Axure打包发布出去时,如果对方没有安装对应的字体,将则不会展示为苹方/微软雅黑字体进行展示。

对方查看的效果和你看的效果会不一样,我正在找处理方案,目前还没找到。

字号、字重

也就是字体大小、字体粗细,对于字体大小、粗细,还有颜色,影响的信息层级关系。

我们直接看规范:

一级标题:20px、加粗,颜色#000000

主标题:18px、选择性加粗,颜色#000000

次标题:16px、选择性加粗,颜色#000000

小标题:14px、选择性加粗,颜色#000000

正文:14px、选择性加粗,颜色#000000/#333333

辅助文字:14px/12px,不加粗,颜色#333333/#555555

次级文字:12px/10px,不加粗,颜色#555555/#7F7F7F

注:对于文字的大小,前提是在 375×667、1440×900 的页面尺寸下的。如果你使用的尺寸过大,对应的字号也需要加大。

这个规范不用记,可以用字号 14 作为标准,层级高的字号 2,加粗、颜色加重即可,层级低的字号就-2,不加粗,颜色浅一些。

12个规范原型的方法,好看的原型就是有用

行间距

在原型中不重要,Axure时会根据字体大小自动调整行间距,如果文字内容过多时,可以手动进行加大间距。

12个规范原型的方法,好看的原型就是有用

4. 图标

原型中如果是「图标 文字说明」一起出现,不用管图标,直接使用圆形或矩形代替即可。

占位符太丑,不建议用。

颜色不要使用太深的中性色。如下图示例:

12个规范原型的方法,好看的原型就是有用

如果只有「图标」,可以选择能表达具体含义的图标。

从iconfont、iconpark中搜索复制svg格式粘贴到Axure使用即可。

如下图中的扫一扫、设置、播放图标。

12个规范原型的方法,好看的原型就是有用

如果你觉得使用圆形或矩形表达图标的意思不明显,或者是不想找图标,就在加个「icon」文字,或者直接用写文字。

如下图的扫一扫、设置、播放,直接使用文字说明即可。

对于头像、图片等,都可以加个文字说明。

12个规范原型的方法,好看的原型就是有用

如果是没有UI介入设计,当需要确定图标时,则需要产品经理确定,同样的去iconfont、iconpark中找到图标,按前端要求提供过去即可。

5. 图片

图片在原型中不需要使用真实图片,直接使用矩形代替即可。

Axure中自带的图片元件太丑了,不建议用。

可以再加上文字说明,来表达这是图片,比如加个img,或者根据图片特性,如封面、头像,都是可以的。

12个规范原型的方法,好看的原型就是有用

原型中的图片规范可以按照宽高比,比如 4:3,3:2,16:9,1:1。

当然这个没那么严格,如果你想规范些,可以这样用。

12个规范原型的方法,好看的原型就是有用

6. 圆角

圆角在原型中不重要,如果你想使用圆角,可以按照2的倍数调整。

圆角在UI中的作用很大,而且规范还挺多,原型中就无所谓了。

12个规范原型的方法,好看的原型就是有用

7. 阴影

阴影不重要。如果想使用阴影,可以将阴影使用纯黑色号000000,透明度30%,模糊5。

8. 对齐

对齐是版式设计的基本原则,使用工具进行对齐即可。

具体采用「左对齐、右对齐、上对齐、底对齐、居中对齐」,你可以按照布局来,比如靠右的元件,使用右对齐。

12个规范原型的方法,好看的原型就是有用

9. 分布

分布是指将页面内容使用水平分布、垂直分布的方式进行平均分布,来保证页面元素之间的间距相同。

当相同的元素多次出现时,我们可以使用分布快速调整,让页面更规范。

12个规范原型的方法,好看的原型就是有用

10. 间距

间距没有那么重要,但是规范的原型一定要有会有间距。

间距分为上下左右间距,分为模块与模块间的间距,子模块与子模块的间距,元素与元素之间的间距。

对于整个移动端来说,可以使用 5 的倍数调整间距。

对于尺寸较大的PC端原型,可以按照 10 的倍数调整间距。

也可以直接将元件结合「对齐、分布」直接调整,不用关注具体间距。

根据我们之前提到的设计原则「亲密性」,属于同组的内容间距小,不同组的内容间距大。

11. 组件规范

组件是就是可以直接拿过来的元件组合。

12个规范原型的方法,好看的原型就是有用

对于每个组件都是通过基础的形状、文字、颜色、尺寸、间距等进行组合形成的。

12个规范原型的方法,好看的原型就是有用

就是UI设计中的原子化设计。

当完成基础的形状、文字、颜色、尺寸、间距等规范确定后,进行基础元素的组合即可得到规范的组件。

你可以基于上边的规范去制定自己的产品组件库,可以快速使用规范的组件。

12. 内容的贴合性

在画原型时,可以将原型中的内容尽量填写为真实内容,使用极值状态,将内容最多、数据最多的情况画出来。

12个规范原型的方法,好看的原型就是有用

12个规范原型的方法,好看的原型就是有用

总结

规范建立好是为了使用,我们了解清楚原型的规范后,可以在画原型时往规范上靠,慢慢的养成好习惯。

一个规范好看的原型图在求职面试、评审的时候,会是个加分项。

当然,不要过度遵循规范,原型图不是UI图,重要的是使用原型将功能表达出来。

对于刚入门的产品经理来说,原型图是日常的基本工作。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部