3个模型,完成按钮系统设计

产品小白专属,10周线上特训,测、练、实战,22位导师全程带班,11项求职服务,保障就业!了解一下

在互联网产品中,按钮系统是产品与用户之间的连接枢纽,是构成用户体验的一部分。本文中,笔者将解析产品按钮系统的设计过程,并用基础模型、动态模型与思考流程模型进行说明。

笔者从忙碌的工作生活中抽出时间,分享自己关于按钮系统设计的思考。

我们都知道各种各样不同名称的按钮,比如行为召唤按钮、灵魂按钮等,这些按钮对于大家理解按钮设计很有帮助,但今天不讨论具体的按钮区别。

今天主要和大家分享按钮设计的思考决策,通过模型的方式呈现出连接用户、产品按钮系统的设计思考过程。以四张图的形式展现出来,这四张图分别是:基础模型图、动态模型图、思考流程模型图、表现形式拆解图(对设计元素进行拆解)。

在现实工业社会中,我们接触到的很多工业产品都有是按钮的,这些按钮作为人类的行动点帮助人类操作产品,就像是人与人之间的对话。

随着互联网化的推进,互联网线上产品继承了这个优秀的特征,让人类通过按钮来和网站、App等线上产品沟通交流。按钮作为人类和产品之间的纽带,正在发挥着很大的作用。所以我们需要思考如何使按钮系统价值最大化。

一、按钮的发展历程

首先看一下按钮的发展历程。在生活中,工业制成品的按钮是有很多物理属性的,比如:形状、颜色、质感、声音、震动等等,人类通过不断的学习和理解,逐渐形成了对于按钮的认知(人类对于事物的认知是基于特征的),下图是工业产品的按钮。

随着互联网的发展,线上产品的按钮设计在用户认知模型的基础上,延续了按钮的部分特征——真实、细节、质感等;而现在产品中按钮设计更加地简约,只继承了按钮设计的核心特征。当然在这个过程中,用户对于按钮的认知也是在学习和理解中变化的。

二、按钮系统的设计思考模型

1. 基础模型图

在设计按钮的过程中,设计师容易陷入到每一个具体的需求中。由于需求的零碎而导致按钮价值的零碎,甚至是不统一、不协调。而每一种类型的按钮背后也都承载了数据逻辑和用户行为,按钮系统的不统一就会产生错误的视觉引导和心里暗示。所以设计师需要跳出需求导向的设计思维,从产品的全局出发,在产品体验的基础上,输出具有不同层级且成系统的按钮设计方案。

内容主要包括如下:

  • 产品目标
  • 用户、场景、目标、行为四者之间的关系
  • 人类的认知
  • 按钮的形式

(1)产品目标

产品目标可以帮助设计师更好地理解业务,明确产品的操作流程。区别对待流程的主次,哪个流程最接近产品目标,把产品目标和操作流程做一个相关性的分析和总结。例如电商平台淘宝的产品商业目标是提升GMV。只有和商机相关的行动点才是层级最高的按钮,其他的按钮是次级行动点。

而在筛选页面的场景中,用户的主要目标是通过筛选来选择出符合自己需求的内容。筛选是行为,但用户更关注的是列表的内容;且筛选并不是一个和产品目标强关联的行为,只是其中的一个流程,和整个页面的信息环境相比,筛选按钮相对较弱。

而详情页是可以带来商机和转换的,符合产品的商业目标,所以底部按钮视觉层级较高,形成突出的视觉引导行动点,其他“查看全部信息”、收藏、客服等按钮层级相对较弱。

(2)用户、场景、目标、行为四者之间的关系

同时在每一个操作流程中,用户、场景、目标、行为四个元素是互相关联并且变化的,不同的场景会导致用户目标和行为的变化,所以不同的场景会有不同层级的按钮设计。

例如:在淘宝的列表页场景中,用户的主要目标是查看符合需求的内容,行为是筛选和对比。当用户进入到详情页场景中时,目标则是对内容的深度获取,主要行为是添加购物车或者购买,次要行为是收藏、分享、领券,查看其他信息。

(3)人类的认知

基于互联网产品的使用,用户对产品按钮的设计形式已形成一定的认知和理解,形成了特有的认知模型。通过对于用户的分析和了解,可以帮助设计师缩小设计形式的范围。同一个行业的产品的按钮设计形式都是有一定的共性。

例如下图,电商的按钮通常情况下是暖色系,强转换按钮位于屏幕的底部,按钮的视觉和整个页面形成强烈的对比,更加聚焦。

基于上述三点的分析,设计师在理解产品框架的基础上融合产品和品牌特色,来设计按钮的表达样式。按钮的形式有很多,例如:灵魂按钮、文字按钮、弥散投影按钮、渐变色按钮等等,设计师可以在已知按钮形式的基础上增加视觉特性、建立差异化、提升产品视觉的认知度,塑造全局维度的按钮体系。

2. 动态模型图

通常情况下,设计师在设计方案中的思考是停留在静止页面中,缺乏对于场景页面内容的动态分析和理解。而动态模型图可以帮助设计师主动思考场景内容的动态变化(包括层级和动态)。

动态模型图主要由层级线和动态线构成,通过对基础模型的分析得出按钮的层级和样式,基于层级和表现形式的基础上增加时间的维度,呈现更加立体的按钮设计体系。主要包括不同层级按钮的默认态、点击态、进行态、完成态和不可点击态。

3. 思考流程模型图

为了减轻设计师的思考和理解负担,通过对基础模型图和动态模型图的整理,归纳整理出了一整套思考流程。通过对关键节点的思考,让按钮设计更符合产品目标和用户的认知,使设计赋能产品,提升产品的关键指标。基于需求分析,通过严谨的表现形式传递品牌、特性等感性的视觉信息。总体的思考流程如下:

  • 产品的关键指标
  • 场景目标
  • 用户的行为
  • 用户的特点和认知
  • 按钮的环境
  • 位置
  • 设计形式

(1)关键指标

产品的关键指标为设计确定方向。明确设计目标,在和指标相关联的重要的行动点上设计最高层级的按钮,吸引用户关注点,引导用户操作,对用户形成强心理暗示,提升关键指标数据。

例如:作为电商平台淘宝的关键指标是转换率。只有带来商机的行动点才是层级最高的行为,详情页中的购买和加入购物车是属于和关键指标强关联的行动点。而查看更多、收藏、客服等关联性相对较弱,所以操作层级属于次级行动点。

(2)场景目标
用户在完成自己的目标的流程中会在不同场景中穿梭,由于操作任务的复杂性,每一个场景中都有主要流程和辅助流程。所以对于场景中的主要目标的行动点,采取相对重要层级的按钮设计方式,弱化辅助流程的操作按钮,减弱对于主流程的干扰。

场景的变化也会导致用户目标和行为的变化,在设计中需要根据场景的变化,及时调整按钮重要层级的变化。例如:电商产品中的列表页目标是筛选内容,而详情页是购买物品;同时也有次要流程,比如咨询店家,收藏,查看更多等等。

(3)用户行为

用户行为和用户目标是强关联的,基于目标和用户相关行为的基础上,去理解因为场景的不同,用户会采取不同的行为。

例如:车辆内是相对较小且不稳定的空间,滑动相对点击的成本较低,且对手机固定位置的干扰相对影响小。所以滴滴司机端在接到客人时,确认乘客上车的按钮采用了滑动方式的按钮,更好地迎合用户在具体场景中的适宜行为。

(4)用户特点和认知

用户是自带标签的一个群体,打造符合群体个性的视觉化语言,有利于用户产生认同感和依赖感。同时,有科学数据表明:人类对于颜色的敏感性高于形状。看到事物的第1秒中,颜色信息占所有信息的80%,并且人类对于颜色信息的思考成本要低于形状。所以在按钮设计的过程中,要减少复杂形状的出现,通过颜色的形式聚焦视线、吸引用户。

例如:现在大部分APP的按钮形状采用了矩形、圆角矩形或全圆角矩形,这样的形状更加符合用户的认知模型。再如下图中淘宝和造作的详情页,由于用户群体和产品定位的差异性,整个页面的基调是不同的,而基调差异的第一印象即是通过颜色来区分的。

另一个就是按钮的点击区域大小,根据人类的手指面积大小得出10mm x 10mm是最优的点击目标尺寸。

(5)按钮的环境

按钮的环境具体是指每一个页面的信息复杂情况。内容较少的页面,按钮容易聚焦;然而现实情况是——每一个线上产品都有很多页面,数据多种多样,颜色更是五言六色。在一个颜色复杂、信息繁多,层级划分不明确的页面中,按钮的设计就需要有针对性的设计。

例如下图中自如页面整体信息层级明确,页面内容相对去哪儿app的详情页面较少,所以通过色块的对比就可以聚焦用户视线。但在去哪儿的app页面中,由于产品的差异和运营的不同,页面内容非常丰富,颜色较多,整个页面的环境比较复杂;所以重要行动点的按钮设计,通过颜色、重复、形状来抓住用户的关注点,引导用户的行为。

(6)按钮的位置

合理的位置决定一个按钮的可视性,可用性。按钮的位置需满足:

  • 内容的联系性
  • 符合页面内容的浏览顺序
  • 对应行动点的重要层级

通常情况下按钮的位置与相关信息强联系,按钮位置的变化也对应着背后用户行为逻辑的变化。

例如微信读书邀请好友页面,页面1是符合用户的阅读顺序,并且团队信息和邀请按钮强关联;页面2的按钮形式则弱化了视觉引导,违背了页面目标;页面3虽然强化了引导,但违背了格式塔的相近原则和用户的阅读顺序。

(7)设计形式

设计形式是我们看到的最终表象效果,也是最终的完成效果。需要满足以下特性:

  • 创意性
  • 品牌性
  • 产品特色
  • 层级关系

按钮体系有多种按钮组成,单个按钮由多种元素构成。设计师可以通过调整设计元素匹配用户的认知,去构建不同层级的按钮体系。具体使用哪种形式、哪些表现语言要基于上述决策点的具体分析。

我们都知道按钮有很多种,比如弥散投影按钮,圆角按钮等等。这些按钮主要都是由背景色、描变、底纹、文字、投影、辅助图形、品牌元素等构成,通过对按钮层级的分析和归纳,采用不同的设计元素构建多层级的按钮体系语言,让按钮体系更加统一、协调、一致。

三、总结

设计师需要对产品有深度的理解和思考,跳出业务导向的思考流程,从系统体验维度思考产品的整体性,在整体性的基础上去构思方案中的每一个设计细节。做到从整体开始,从局部入手,再回归到整体的思考设计流程。单一维度的思考和表现,无法完整地凸显设计的价值,更何谈赋能业务。

 

作者:亮king,高级设计师,微信公众号:体验设计说

本文由 @亮kingking 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 滴滴司机端的例子有点儿牵强

    回复
  2. 空洞无物!

    回复
  3. 感谢分享

    回复