首页 > axure 图文教程 > B端产品原型进化录


B端产品原型进化录


本文作者从设计原则、色彩、图标这3个角度对产品原型设计进行了拆解。

关于B端Web产品前期从流程上进行了复盘,这次从原型设计的角度来进行梳理。

原型设计是产品经理的硬技能,也是产品经理与各相关方沟通的直观桥梁。只有看到了原型demo,甲方爸爸们才会清楚的知道他们不要什么,可能还需要什么。

我的原型设计之路,从一开始的野路子,到目前的稍有章法,多亏了Ant design的组件库、设计语言,以及参照《写给大家看的设计书.第4版》一书中所进行的刻意练习。

特此给大家做个小小的分享,给入门的产品小白以参照,如有设计师出身的产品大大们还请拍砖。

目录:

  1. 设计基本原则
  2. Ant design精选
  3. 个人建议

一、设计基本原则

参照基本的设计原则,可以帮助我们更高效、高质量的完成原型设计。

四大设计原则,是在《写给大家看的设计书.第4版》一书中由罗宾·威廉姆斯(RobinWilliams)提出的,包括亲密性、对比、对齐、重复,适用于印刷品、出版物,也适用于Web的产品设计。

1. 亲密性(Proximity)

含义:将相关的项组织在一起。彼此相关的项应当靠近,归组在一起;不相关的项,则远离。

作用:有助于组织信息,减少混乱,为读者提供清晰的结构。

表现:在一个页面上,物理位置的接近就意味着存在关联(实际生活中也是如此)。

问题:哪副图看起来这两位像亲密母子,哪幅像是路人?

图源自《写给大家看的设计书.第4版》

亲密性在Web页面的体现是横向、纵向的间距。信息的关联性越强,则间距越小,反之则间距越大。

间距规格分为小、中、大三种,对应8px、16px、24px,再大些可用32px、48px。也可以参照公式来设定间距 y=8+8 * n(n>=0),y为纵向间距。这个公式不等于y=8*n(数学学渣已经想了一遍) 来扩展间距。

踩过的坑儿:

一期设计时,对间距的认知是需要间距,标准自定义为10px的倍数,吭哧吭哧一顿调,还觉得页面比上实战课时画的好,羞愧。直到原型已经画完了,和UI同学请教,才发现标准是8px的倍数,再后来看到了Ant design上的建议,先按照着规范来。

亲密性bad case示例(图源自某产品试用版)

2. 对齐(Alignment)

含义:任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。

作用:使页面统一而且有条理。

表现:在页面中无形的一条线,常见的有左对齐、右对齐、居中对齐。Ant design建议是文案左对齐,表单冒号对齐,数字取相同的有效位的右对齐,其中冒号对齐是一种特殊的右对齐。

踩过的坑儿:

对于表单的冒号对齐,官方解释是,能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项。

目前我的理解是,表单内存在输入前、输入中、输入后三种状态,输入前和输入中,需要了解填写哪些内容,固然是左侧的项目信息重要。而在输入后,左侧信息变为了辅助,而右侧输入框中的内容变为了主要,即使没有左侧的项目信息,你也依然能够轻松理解、校验其内容。

图源自Ant Design Pro(也可对比上一张图片,亲密性上有很大差异)

3. 对比(Contrast)

含义:页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。

作用:不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者,制造焦点。

表现:Ant design提供了主次、总分、状态这3种关系的对比示例。

踩过的坑儿:

主次关系对比,比如在页面操作区一共有5个按钮(可以用一个更多来隐藏3个按钮)。那5个按钮,谁是主,谁是次,需要产品经理去判断,去引导去告知用户这个页面的核心功能是什么。

主次关系不明确的bad case(优化方案有多种):

状态对比,可通过改变颜色、增加辅助形状等方法来实现。一开始认为由文案来进行状态区分即可,颜色是非必需的。最近在学习了视觉认知的内容后,转变观念,确实可以运用颜色来进行辅助;例如贴近生活的红绿灯、自然灾害的蓝黄橙红预警,都能够让用户更好区分信息。

图源自Ant Design Pro。

4. 重复(Repetition)

含义:设计的某些方面需要在整个作品中重复。重复元素可以是一种粗字体、一条粗线、某个项目符号、颜色、图片、设计要素、某种格式、空间关系等。

作用:增加条理性,统一性,并增强视觉效果。

表现:大于1次、1个以上元素的多次出现;最常见、易被感知的是首页的介绍区。

图来自Ant Design Landing模板

踩过的坑儿:

初期在首页中原本预留了功能介绍的区域(如上图),因为一期只有一个大功能,就被砍掉了。在合适的时间做合适的展示就好。

目前的设计中的重复元素是页面的顶部格式,每个二级页面统一使用了色块和二级主菜单的文案为顶部内容区,打造了系统的统一性。

二、Ant design精选

1. 设计语言

除了上文出现的4个基本原则,Ant design的设计语言中提到了6组进阶原则,分别是直截了当、足不出户、简化交互、提供邀请、巧用过渡、即时反应。

结合目前的经验,运用较多的是这3组原则——直截了当、提供邀请、即时反应。

1)直截了当

即简洁明了,不仅仅适用于原型设计,也是适用于文案的设计、异常信息的提示等。

B端距离用户近,如果设计不贴合业务,文案又难以理解,那么等待你的很可能是用户的狂轰乱炸,不断有人询问这操作是啥意思,这功能咋用。

最近在琢磨公司内部用户行为分析的平台,作为一个产品看不懂另一个产品的用户手册o(╥﹏╥)o。

2)提供邀请

官方解释是酱紫的,【邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么】。

提供邀请,体现在交互之前给出反馈,解决易发现性问题。

图源自中国大学MOOC网页端

动态邀请常见的是悬停(hover)邀请。如上图,从左至右依次命名为A、B、C。

A是默认展示效果,B是鼠标hover效果;对比A,B有了阴影效果和右上角的更多按钮。当点击B图中更多按钮后,出现的是C图,告知我们可以在这里查看课程介绍和退出课程。当你对老师的讲课风格不中意,学习精力分配不过来之时,就可以来尝试着退出课程咯。

3)即时反应

即在交互之后立即给出反馈。反馈过多对用户是打扰,没有反馈,则确定性较低,对用户是困扰。

举个例子:

友人发来一张有趣的图片,你想要保存;点击下载之后,系统刚好弹出一个toast提示【已保存到系统相册】,2s后提示消失,即没有过多打扰,也新增一枚斗图表情包。假设没有这个toast,强迫症患者(我)要么是多次下载,要么是从APP跳出进入相册中进行二次确认。

即时无法处理完时,产品如何解决用户焦虑?

一期遇到一个case,流程是用户导入数据,后台执行校验后执行增删改查操作。

当数据量级超过2万条时,处理时长达到2min,数据量级较低时2s可执行完毕。尽管在设计之初有双重的提示,操作完成后会进行邮件通知,然而2min内用户如何自处,是刷新当前页面,还是静静等待。

2. 色彩

Ant Design 将色彩体系解读成两个层面:系统级色彩体系和产品级色彩体系。系统级色彩体系主要包括了基础色板、中性色板;而产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色(进阶之选)。

对于产品小白,比如我,基础色板中共有120个颜色,可以充分满足日常所需喔,颜色是酱紫滴。

图源自Ant design(C位是亮点)

产品级色彩体系第一次实践,一开始选取的是沉稳大气的深蓝色为主体色(高大上的说法是品牌色),而后在UI同学提供首页的设计图后,采用了与首页设计图中主色调一致的颜色作为产品主色,代表着明亮、活力、科技。

3. 图标

图标,官方解释是将某个概念转换成清晰易读的图形,从而降低用户的理解成本,提升界面的美观度。

我的理解是调节枯燥的页面,图文结合。

目前遇到过的坑儿是,Axure中有好几套的图标库,每次都反复在几个图标库中寻找更合适的icon,时间上存在浪费。图标存在的意义是在于对系统有效,提醒自己切勿舍本逐末。可以先研究透一套icon,再进行拓展升级打怪。

三、个人建议

1. 关于原型中的页面说明&PRD

我的进化史是这样的,一开始原型上除了图,无任何说明,文字说明依靠PRD;而后发现评审时大家更(只)喜欢看大原型,第二阶段原型上增加说明,并且是需说明之处的临近位置(页面显示有点吃藕);第三阶段,在原型的底部固定区域,固定颜色标注关键页面说明。

第三阶段目前已固定,既可以提示关键信息,也可以提前整理PRD思路。

2. 关于从头画起&组件套用

一个组件,可套用模板组件,也可手工画。个人建议,初期参照模板自己画,可以更快熟悉标准、规范,锻炼扎实的基本功;后期套用模板,高效、高质量的完成原型设计。

画图是个很耗时的工作,谁画谁知道,特别是有强迫症的同学。

组件是产品传达的基础,组件承载的信息,才是核心。表格很容易画出来,重要的是表格里展示哪些信息,又不展示哪些内容。

3. 产品原型低保真&中保真

在产品的培训课中,当时属于初学阶段,画出的是低保真,已是满足;在工作中开始画原型时,看着低保真就觉得有些简陋了。所以,现在产出的原型大多为中保真,并且在逐渐接近高保真,页面的颜值有时候也是实力。

在没有UI同学的参与时,个人建议是由产品经理完成中保真页面的原型产出,借由较好的原型demo,以无形的压力督促前端同学,一起给产品打造个漂亮的面子。

有UI同学可合作时,产品经理按照业务逻辑、设计基本原则、中性色板提供原型,由UI进行逼格提升,各自安好~

产品设计经验尚浅,还请各位看官不吝拍砖。

共勉。

参考:

1. Ant design设计语言 https://ant.design/docs/spec/introduce-cn

2.《写给大家看的设计书.第4版》