首页

一篇文章搞懂毛玻璃拟态

雪涛


设计趋势轮回,玻璃效果以一种新的展现形式回归,我们以往对它的称呼有毛玻璃效果、磨砂效果等,在下文中统称为毛玻璃拟态。

前言


设计趋势总是在不断的变化,近几年拟物风格又以新的形式——新拟态回归大众视野,苹果发布了macOS Big Sur 操作系统,整体风格应用了新拟态的设计思路,采用了3D质感的元素设计,其中还包含了运用阴影、透明度以及背景模糊/高斯模糊手法模仿玻璃形态,构建空间感的新兴拟物态风格——毛玻璃拟态风格。

undefined


一、毛玻璃拟态的历史


毛玻璃视觉其实可以追溯到2007年微软发售的 Windows Vista和Windows7,随之后来的OS X 10.10(Yosemite)和iOS7中大量出现毛玻璃效果,比如底部快捷菜单栏、通知中心和多任务切换窗口等,苹果公司加大了模糊程度,透明效果基于扁平,更顺应当时UI扁平化的设计趋势。


后来,苹果在他们的移动操作系统中大大减少了毛玻璃效果,但是最近在 MacOS Big Sur 中又增加了毛玻璃质感。微软的 Fluent 设计系统也非常注重这一效果,他们称这种效果为 “亚克力”,并将其作为设计系统的组成部分之一。


二、毛玻璃拟态的特征及优缺点


1.毛玻璃拟态的特征

毛玻璃拟态模仿了塑料材质(凹凸质感,凸显层次感),这个新的视觉风格更加注重垂直空间Z轴的使用:

—透明感(使用背景模糊/高斯模糊的磨砂玻璃效果)

—物体漂浮在空间中,通过前后关系表现层次感

—鲜艳的色彩感,更突出了模糊的透明度

—半透明物体边缘的微妙处理,采用细腻的边框来表现玻璃质感

这是注重空间感的典型特征,意味着这种风格有助于用户建立界面的层次结构和深度。用户可以看到物体间的层次关系,哪一层在哪一层之上,就像空间中真实的玻璃一样。


2.毛玻璃拟态的优缺点


优点:

毛玻璃拟态效果之所以被大家应用和认可除了它能带来的优秀视觉表现,更重要的是其本身的功能意义,它能帮助设计师更好的拉开信息层级并达到视觉统一

(1)视觉表达

通过背景毛玻璃化,可以中和扁平化图文带来的生硬不立体。在卡片元素上添加毛玻璃效果,与其他元素叠加后视觉上建立层次感,将信息层级更好的表达出来;在图标中增加毛玻璃效果,可以提升图标通透的质感。

(2)品牌感

良好的视觉统一,有助于提升产品的品牌感。


不足:

毛玻璃拟态效果并不好应用于上线产品。它不适用于按钮或开关(这些重要的界面元素应该具备高对比度,更加清晰明确),模糊效果也要注意分寸,屏幕上过度使用模糊效果,会使整个 UI 对某些用户可阅读性差,同时也会使页面看起来显脏。

也可以这样理解,使用毛玻璃拟态风格的前提是卡片内部有足够的对比度和合适的间距来定义层次结构,并在视觉上 “分组” 所有相关的对象。它可以只在一个元素上使用,也可以作为卡片背景修饰视觉效果,这种很容易达到较好的视觉效果,页面风格也会特别亮眼,整体干净、明亮。


三、毛玻璃拟态的应用


1.卡片背景

用作卡片背景时,能很好的表达信息之间的层级感,朦胧透出下层视觉元素,营造了良好的视觉美感。


2.APP图标

用作APP图标,可以提升图标通透的质感。常见的三种图标案例:A.顶部图形为白色,底部图形为其他色;B.顶部图形和底部图形为同色,顶部图形颜色明度高;C.顶部图形和底部图形不同色


3.界面包装

运用毛玻璃去包装UI界面,页面风格整体干净、明亮,有较好的视觉效果。


四、毛玻璃拟态绘制原理


1.和任何基于卡片的布局一样,物体离我们越近,它吸引的光就越多。在这种情况下,意味着它会更透明一些。

2. 整个效果的基础是阴影、透明度和背景模糊的组合。这种风格可以使用一个透明层,也可以使用多个透明层,但多个透明层叠加在复杂彩色背景上的效果会更好(当至少两个透明层出现在一个相当复杂的彩色背景上时,玻璃形态的效果是最突出的)。


五、毛玻璃拟态-卡片背景的绘制要点


1. 如何设置正确的透明度

重要的是要记住,你不能让整个形状透明,需要调整填充的透明度来达到透明效果。如果不调整填充的透明度,仅仅是调整整个对象的透明度,就不会产生模糊的效果。

在上面的例子中,背景模糊值完全相同,但圆形图像的叠加效果看起来完全不同。当填充不透明度为 100% 时,对象的透明度再低也没有用,根本无法得到想要的模糊效果。


2.如何选择合适的背景

最底层背景在这个效果中扮演着重要的角色。不能太简单或太单调,否则毛玻璃效果就看不出来,但也不能太复杂。

复杂的背景有助于玻璃形态的展现,这可能就是苹果选择了彩色背景作为 MacOS Big Sur 默认壁纸的原因。当模糊的透明层位于背景之上时,那些容易辨别的色调差异也很容易被看到。


六、毛玻璃拟态-图标的简版教程


用作卡片背景绘制操作比较简单,使用背景模糊就可以搞定,重点在于根据实际情况进行透明度和模糊度的调整,这里就不再做展示。


下面是毛玻璃拟态-图标的教程:

第一步:绘制基础图形,顶部图形颜色#DDEDFF,底部图形渐变色#00EDFB——#001EEE

第二步:底部图形复制一层,做高斯模糊效果,高斯模糊:12,不透明度72%,将模糊层置于顶部图形上,添加蒙版

第三步:为了更好的增加图标辨识度,增加渐变描边,渐变色#FFFFFF——#D5E9FF,图标绘制完成。

过程中用到的色值和模糊度可以根据视觉美观度做适当调整,也可为图标增加阴影,提升整体效果。


结束语


作为设计师,我们可以看到,设计趋势一直在变化,每隔几年就会转向另一种风格,但似乎每种风格又有自己的前世今生。所谓趋势轮回,并不只是单纯的回归,而是以一种的更丰富、更立体、更具有层次感的方式呈现在人们面前。

我们要做的就是不盲目,不盲从,看清楚趋势变化的本质。


文章来源:站酷   作者:April_Firefly 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


面向客户的设计:理论篇

雪涛

导语:在面向客户的设计系列文章中,主要分为两部分。此文为第一部分,讲述什么是根据客户意愿进行设计的理论;而在第二部分,作者将会深入地介绍在电子商务网站重新设计项目中,使用该方法的一个实际示例。

作为UX设计师,我们喜欢采用“以人为本”的方法,即在解决问题过程的所有步骤中引入人的视角。无论我们是在与客户交谈,还是与用户共同创造解决方案,这种思维方式都允许我们推出满足人类需求和目标的产品和服务。

问题是,两个人在几分钟内就能相互理解信息在数字产品中很难复制。不管人工智能专家怎么说,当今存在的任何商业技术都无法替代与另一个人的对话。

而且,不管我们如何以人为中心,我们仍然在为比特和像素设计,数字产品仍然是数字化的。

然而,作为用户体验设计师,我们的目标是设计这些数字场所,以满足人类的需求、目标和动机。我们经常问自己的问题是,我们能让我们设计的数字世界更人性化吗?

我们得出的答案是,受限于媒体的一些限制,我们需要设计一种体验,在这种体验中,随着数字场所的变化,尽其所能(在没有聊天机器人的情况下)让用户获得近似于一次面对面的对话。

所以问题是:我们能在多大程度上让我们设计的网站、产品和服务与用户进行更多的“真实对话”?

一、定义用户和企业之间的真实对话

在数字/网络在线环境中,用户和企业之间的“真实对话”是什么?

最初,企业按部门或业务线组织网站导航。如:企业有这5个部门,所以这5个部门将在我们的主页顶部。我们的假设是——而且通常仍然是——网站的业务和最终用户在需求上100%一致。

起初,这是因为客户在学习如何使用互联网时期望值很低。没有太多的竞争性的东西吸引他们的注意力,也没有一个公共平台来记录他们的抱怨。

多年来,人们的上网的习惯已经发生了变化。一定程度上,是因为我们工作做的好,客户开始期望企业表现得更“人性化”。

换句话说,客户希望在网站上找到自己所需的任何东西,就像询问店内客服代表一样容易。并且他们希望能够从网站/应用程序上的任何地方满足他们的需求,而不仅仅在菜单或顶部的主导航栏。

在数字资产应该以更“人性化”的方式表现的预期背景下,我们将“有机对话”定义为客户和品牌之间的自然流动,不论他们遇到了什么数字媒体。

我们还认为,通过设计为基于意图的导航(我们称为“为客户意图设计”)我们可以创建出一种“有机对话”。

只有当我们了解,记录和设计客户与数字媒体交互时打算做什么,而不是针对企业仓库中的内容进行设计时,才能实现这一点。

换句话说,我们问一个问题:“当客户访问网站或使用产品或服务时,打他们的目标是完成什么任务?” 然后,我们设计导航以填写答案。

二、导航作为有机对话的起点

在详细介绍如何围绕客户意图设计导航结构之前,让我们先暂停一下,考虑一下导航本身。

导航是数字财产里非常重要但被低估的结构。现在的导航结构通常是顶部导航(即,“首页”顶部或菜单中的那些链接)和一些带有相关内容的页面导航的组合。

但是,无处不在的概念往往会随着时间的推移而过时,导航需要改进的地方还有很多。

如果我们退后一步想想,把导航看作是数字资产和用户之间的有机对话,那么导航将成为促进人类交流的桥梁。在这个角色中,导航在设计中具有新的意义。它成为了数字资产与其用户进行“有机对话”的一种方式。

三、主要思想

考虑到所有这些因素,我们不仅要把导航视为层次结构(即每个部门/业务线),并且要采取进一步的措施。结合全面的层次结构,创建横向的、基于意图的导航结构,以促进品牌与客户之间的“有机对话”。

我们基于目的的导航想法源于普遍的信息架构和 Dan Willis’ Intent Paths 的目的路径图。

此图形表示人们可以用来浏览软件应用程序或网站的路径。六边形代表数字属性(例如网页)上的个位置。位于六边形中间的人可以使用几种路径(即网页上的链接)来到达下一个位置。

在左边,我们看到了一个客户路径的例子,它通常定义在软件项目中。如果你以前从事过软件项目,那么你会认为这是一条基本路径。

基本路径是假设用户有一个单一的任务,一旦他们开始执行某个任务,用户就会完全专注于他或她的任务。在此过程中,用户没有分心、问题或想法。

太多的导航是以这种非常线性的方式构建的,以确保客户被迫走在基本路径。不幸的是,这种方法在现实生活中没有起到作用,而且它肯定不能促进自然的对话。

对于用户或客户来说,将路径选择限制为=再非常线性的、基本路径上,感觉更像是业务告诉他们应该去哪里,而不像业务支持他们去他们想去的地方。

因此,强制的线性导航会降低用户的内在动机(定义为做一些没有任何明显的外部奖励的事情),减少:

  1. 能力,或者是控制和掌握你所处的网络环境及其结果的愿望;
  2. 自主性,或行使自由意志的愿望。

现在,让我们看看右边的六角图形,更真实的路径。

在这个例子中,用户通过快乐路径门,然后决定向右走。很快,他们的环境发生了改变,以支持实现他们的意图。

通过获得权限,用户为系统提供了有关其访问意图的线索。使用更真实的路径,不管他们是否停留在快乐的路径上,导航路径都会变形并根据其动作进行自定义,因此不会有导航“错误”要恢复。

考虑到用户在选择和培育数字接口时所考虑的因素,数字生态系统的想法增加了能力和自主性,从而增加了内在动力。生态系统变形的能力取决于根据满足客户意图建模的声音信息结构。

四、围绕客户意图设计导航

如果我们设计的数字导航结构能够支持“真实之路”,那么我们将创造人与人之间的绿色对话,并使客户能够实现其对数字财产的计划。

反过来,这将增加客户的内在动力,使他们更加快乐和忠诚,并最终使企业盈利。

此外,横向的、基于意图的导航支持:

  • 客户体验:一个人对品牌的感知是决定客户盈利和留住客户的关键因素,它是资产负债表上的无形价值,这是他们的善意。
  • 可查找性:当客户能够根据他们的需要,而不是根据业务项目的路径去找一个站点或产品时,查找信息的方便性得到了提高。
  • 喜悦:“他们怎么知道我在找它?”这种意想不到的魔力,这是大多数企业所缺乏的认知,它是今天能否赢得市场中竞争的关键因素。当你知道某人的意图并设计信息结构来满足这些意图时,创造这种愉悦感比你想象的要容易得多。
  • 客户忠诚度:随着时间的推移,有了足够的重复、有机、愉快的互动,客户忠诚度——也被称为“圣杯”——得到了极大的提升,使得SWOT分析中的T失去了它的重要性。当公司的价值观符合顾客的价值观时,竞争就不再是竞争。

重要的是要记住:导航不仅仅是关于“导航栏”或者“汉堡包菜单”,它也与公司部门、业务线或公司政治无关。坦率地说,这甚至与产品和服务无关。

导航是指服务于客户想要在网站或产品上做的事情,或者称为客户意向。

通过设计你的信息结构来满足客户的意图,你正在设计一个有机流程,您正在帮助客户满足基于他们的想法、他们的需求和他们打算做什么的信息,而不是基于您的业务结构。

你也没有强迫用户去寻找你的层次结构,而是帮助他们根据他们的需要探索。这允许有机对话的出现。



文章来源:人人都是产品经理   作者:喵吉斯蒂

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




设计师如何洞察用户需求?

雪涛

在设计工作中,你可能会遇到这样一种场景:甲方爸爸开发了一款产品,委托你进行包装推广,但是甲方对于设计将要解决的需求并没有明确定义,或者只给出了行为层的建议,好比高端、大气、上档次,低调、奢华、有内涵balabala,甚至发来带有魔幻主义色彩的参考图,上来就要求出几版方案先看看,这些情况在服务中小型企业时十分常见。


这种情况怎么办?

无视甲方的奇葩要求?凭着自己的经验干?还是顺着甲方的偏好干?毕竟人家是金主吖?

恐怕都难有好结果。

对于设计师是自找改稿,毕竟你连将要解决的问题都不清楚,自然无法有效的论证“设计为什么这么做”,这就相当于把方案的主导权拱手让给了非专业的甲方。而甲方如果思维跳跃“很有想法”,你就有改不完的稿子了。

对于甲方而言,则可能买回一堆无用品,毕竟方案出街后面向的用户其实是甲方的客户,靠设计师和甲方拍脑袋本身是舍本逐末,解决不了问题,用户才是真“爹”。

so,一切以主观为意志的设计行为都不明智,最终很可能落得一个双输的结局。


正确的做法是怎样的呢?

这种情况下就需要设计师上升到产品思维的高度,与甲方沟通推进,乃至于进一步的用户调研。

一个面向市场的产品,被制造出来一定是为了满足市场上某一类用户的需求缺口,否则它就没有存在的理由。而设计是为产品赋能的角色,所以在确定设计将要解决什么问题,以及产生洞见的过程中,一定是围绕“用户需求”为中心,只有真正明确了这一点,你的设计才是有意义的。


那么,如何搞明白用户需求呢?

接下来我会从“什么是用户需求、如何通过做用户调研、如何萃取用户需求”这三个部分来和大家分享,如何通过洞察用户需求,来帮助我们更好的设计。理解了这些能够帮助你提升一个段位(配合收藏+点赞食用更佳)



一、用户需求都有哪些?

在介绍具体的方法论之前,首先你得知道用户需求都有哪些。 人的需求通常可以分为“功能需求”和“情感需求”两大类,分别由左右脑管控。


功能需求,是显而易见的外在具体需求。

比如找工作你会关注工资、五险一金、福利待遇,买电脑会看内存、CPU、屏幕大小,点外卖会看价格、送餐速度。功能需求是用户的“左脑”需求,也是用户基本想要的东西。


情感需求,则是与之相对的,隐性的、抽象的内在心理层次需求。

比如这家火锅店的服务太周到了,让我感觉心里暖暖的,喝一杯星巴克,体验到白领小资的情调,穿上这套西装,让我感觉自己像明星模特。情感需求同样重要,它是感性驱使,用户“右脑”情绪上的需求。


李叫兽曾在《十四天改变计划》课程中的产品战略模块细分出了十类用户需求

这些同样可以归纳为“功能需求”和“情感需求”这两大类。


A功能需求:低价、性能、便捷性、可达性、降低风险。

B情感需求:高端、定制化、新颖、过程体验、理想自我。


给大家解读一下:


  • A1-低价

低价,是解决了“用户曾经因为价格原因无法获得的,现在可以获得了”的需求。

比如我们身边各种无节操的促销活动▽


拼夕夕动不动的砍一刀▽


拼夕夕一言不合就轰炸的红包▽


这些都是切中低价需求的设计,low不low且不说,但它们是成功有效的。

反之如果把一个促销页做成买不起的样子,那注定是个失败的设计。毕竟商业设计从来不是自我陶醉的做出一些高逼格的东西,而是在不同情景下使消费者内心与行动上买单。


  • A2-性能

性能,解决的是“满足用户对某项功能追求”的需求

比如Intermarché 橙汁▽

为了进一步强调产品“新鲜”的特性,在包装上白底黑字印上了超大的数字时间,表示生产日期。这一设计巧思,使产品上市当天便获得5000万次社交媒体曝光,一个月内销量增长了4600%

深泽直人的仿生包装▽

通过对产品包装的色彩、造型,甚至工艺质感上的直观呈现,来表达产品“原生态”的特性,帮助商品在琳琅满目的货架上脱颖而出,大大增加产品售出的机会。


  • A3-便捷性

便捷性,解决的是“降低非货币成本”的需求。

比如亚马逊▽

amazon作为全球商品品种最多的网上零售商,所主张的就是“降低你线下购物的时间成本”,包括亚马逊的标志传递的也是“从A到Z,应有尽有”的概念。

再到联邦快递▽

不论是标志中隐含的箭头,还是对外的品牌创意广告,都是在强调“24小时使命必达”的强大的货运能力。解决的同样是用户的“便捷性”需求。


  • A4-可达性

可达性,是解决“获得过去难以获得的某些东西”的需求。

比如数码相机▽

在胶卷相机时代,拍完了照片得洗出来后才能看到拍的好不好,而数码相机的设计,让你可以实时看到拍摄后的样子,达到了以前达不到的功能,解决了以前不能解决的问题。

美图秀秀▽

你可以让自己变得更加苗条,更美丽。以前只有设计师经过专业学习才能P出好看的照片,现在普通人也可以轻易的对自己的人像实现美化。同理,都是“可达性”的需求切入。


  • A5-降低风险

降低风险,是解决“降低本次消费带来风险”的需求。

比如神州专车▽

用滴滴你可能会遇到黑车、黑司机,之前也闹出过这样的新闻,神州专车则捡大品牌的漏,通过自营车辆专门解决打车过程隐患的风险,解决的就是“降低风险”的问题,在对外推广中也都是在强调专业和安全。



以上是功能性需求,那么情感需求呢?


  • B1-高端

所谓高端,切中的是马斯洛需求模型中的尊重需求“身份认同”

比如小罐茶▽

我给朋友送礼希望摆上一盒茶叶,朋友就知道这茶很贵,不需要解释也能体现我对朋友的重视,自然就需要稳定价格和品质的品牌。小罐茶则抓住了茶类的这一空白地带,顺利打入市场,设计的调性同样都是围绕这一策略服务。



  • B2-定制化

定制化,解决的是“满足用户特定功能与体验”的需求。

比如柠檬盒子▽

根据消费者的健康情况,量身定制满足消费者每日所需的维生素,从对外的广告到带有姓名的产品包装,都是在强调“定制性维生素”的品牌定位,这种差异化打法,让柠檬盒子从保健品中脱颖而出。




  • B3-新颖

新颖,是解决“消费者对过去陈旧市场不满,追逐潮流”的情感需求。

比如味全每日的拼字饮料▽

通过包装的货架创意呈现,与消费者形成互动,最终形成社交媒体自传播,上市后每个月的销售额都有同比40%的成长。

Milgrad牛奶▽

最近也是在社交平台上形成现象级刷屏,为品牌省下不少广告费。

二厂汽水▽

去年夏天的老牌新造,成功逆袭成为网红品牌,年销近三个亿。这些都是从情感性需求“新颖”的角度切入。


  • B4-过程体验

过程体验,是解决了“ 消除用户在完成某个任务的过程中所存在的阻碍”的需求。

比如海底捞▽

餐厅高峰期经常人满为患,排队体验差。海底捞则会在你排队等待的时候,提供免费美甲、护手、零食...等等各种周到服务,赢得了口碑传播。如果你留心观察,你会发现海底捞的标志也是用了一个打招呼的气泡Hi,来强调服务为先的品牌定位,解决的是情感需求中的过程体验。



  • B5-理想自我

理想自我,解决的是“帮助用户成为更理想的自己”的需求。

比如Odorono止汗剂▽

1912年智威汤逊著名广告人詹姆斯·杨,在帮助客户推广面向女性群体的止汗剂时,砍掉了原来“出汗是一种疾病”的推广策略,推出了一条新的至今人被人津津乐道的策略:“出汗将会影响你的人际关系,让你不再受男性欢迎”,这一策略在美国形成现象级轰动,遭到女性愤怒的同时,也成功帮助Odorono打开了女性市场,是“理想自我”的典型应用。



受于篇幅,以上十点讲的比较概括,这些案例很多都非常经典,感兴趣大家可以自己百度搜索。

通过这些案例你会发现,设计其实有很多种“玩法”

讲这十点的意义,一是启发大家在实际工作中思考多个角度可能性,先把思路做多,而不是只局限在通过设计强调产品的某一功能特点,接着着眼于形式,那样很可能我们一开始的切入点就没找对。

另一方面,让大家对这两类需求有更具体的认识,你会发现这些“玩法”都是基于用户需求而存在,不是直觉或玄学更不是毫无章法的创意。设计是基于严谨思考推理的解决问题的过程,而解决的问题无非归纳为理性的“功能需求”与感性的“情感需求”这两类。



那么应该如何发现用户到底有怎样的需求呢?支撑依据是什么? 

固然不是靠甲方拍脑袋,更不是靠设计师拍脑袋,而是靠“用户调研”



二、如何做用户调研?

想想看你都接触过哪些调研方式?

常见的调研方式包括问卷法、后台数据法、访谈法、观察法等等。这些调研方式前两者属于“定量型”,后两者属于“定性型”,它们有不同的侧重点与优缺点。


1.定量型

定量型调研侧重于“广度”,是通过大数据,量化用户的行为偏好。包括:


●后台数据法

通过产品APP或者平台的后台来提取用户操作数据,来获取用户的选择偏好。

举个例子,比如你将要设计某个电商产品详情页,那么你就可以提取该电商平台的后台数据,通过品类下关键词的搜索词频,来获取用户的真实需求,作为设计方向的指导依据。具体可以参考南孚充电宝详情页的设计过程。

这种调研方式的优点,是能快速获取到用户真实的显性需求,缺点是受限于互联网产品或科技类产品。所以对于小众产品,一般会采用第二种定量调研方式。


●问卷法

对覆盖用户以问卷的形式采访,也是最常见的调研方式。比如可以通过目前的主流问卷平台:问卷星、金数据、腾讯问卷等渠道来取样,问卷法的优点是操作简单,易扩散,能够获取到大量的基础反馈数据,缺点是获取到的信息深度十分有限,基本只能获得自己预设范围内的反馈,毕竟大部分用户根本不关心你问卷的填空题。

整体而言,定量性调研只能获取到用户行为层面的显性数据,对于用户为什么会产生这些行为是没有答案的,所以一般情况下还需要定性型调研来配合。


2.定性型

定性型调研侧重于“深度”,是聚焦少量人群,洞察行为背后真实想法的方式。包括:


●访谈法

针对某一类问题,与少量不同的目标用户约谈,通过沟通,挖掘他们行为背后更深层的情感需求。

举个例子,比如肯德基曾经推出了一款特价咖啡,为了从主要竞争对手星巴克手中抢夺用户,当时访谈了很多用户,调查他们选择或不选择星巴克的原因。最终发现购买星巴克的大多数人是为了星巴克提供的附加价值,如第三空间、品牌体验等,包括发现很多人喜欢拿着星巴克的杯子自拍;而不买星巴克的原因是认为咖啡本身太贵,原料不具有性价比。

最后肯德基推出了“咖啡为了觉醒,不是为了凹造型”的广告来攻击星巴克。暗示星巴克的购买者是追求面子、摆造型的肤浅的人,而肯德基咖啡的使用者却是“聪明的消费者”。这种通过对用户行为背后价值观的挖掘,帮助肯德基更好的拉进了产品与受众的心理距离,争取到更多的潜在顾客。这也是定性调研的意义所在。


那么具体来说,访谈的过程中有哪些要点呢?

1)以人为本

将关注焦点始终放在对方身上,而不是对问题清单上固定的内容进行提问和记录。


2)不断追问

问原因、问细节、问感受。你为什么觉得它好?你觉得它好在哪里?你当时是怎么想的呢?这些追问能帮助我们挖掘到用户行为背后,更深层的想法与价值观是怎样的,这也是定量调研无法触及到的部分。


3)留意情感表达

关注对方背后的情感是怎样的?比如随着第二步,留意对方有没有感觉上的形容词并顺着追问。“你说到上次的购买体验很糟糕,能具体说说当时的情况吗?”这些都能帮助我们捕捉到那些没有被用户说出来的隐藏情感需求。


需要注意的是,有时候用户可能并不知道自己的真实需求是什么,或者不愿意说。所以在用户访谈的过程中,不仅要着眼于对方说出来的需求,还需要去观察用户没有说出来的需求,这里就涉及到第二种方法:“观察法”。


●观察法

什么是观察?观察不等于“看”,而是调用你的眼睛、耳朵,以及所有感官去感知,并用心去揣摩用户行为背后的原因。


举个例子,脑白金创始人史玉柱当年在做产品调研的过程中,经常会找小区楼下和老头老太太聊天,询问他们:如果有一个便宜但很好的保健品你会购买吗?不会,如果更便宜呢?还是不会。

史玉柱通过对不同老人的接触与观察发现,老人对自己是很抠门的,他们更愿意把钱留下来给自己的儿孙。但是,如果是别人送给自己的,尤其是自己的儿孙买给自己的,他们则很乐意接受。一方面能感受到儿孙的孝心,另一方面可以和其它老人炫耀。后来脑白金团队花了大量时间钻研如何把送礼这件事说的好,才诞生了那句经典的广告语。诸如此类的伟大洞见,很多都来自于观察中诞生。


那么应该如何来观察呢?其实可以有很多角度:


1)观察自己

自己作为用户试用一遍产品,就相当于换位思考一遍,记录自己整个过程的使用感受,优点是能获得直观的反馈。缺点也很明显,就是你的体验不一定和其它用户是一致的,毕竟每个人的认知和偏好是不同的,萝卜青菜各有所爱,所以只能作为参考和验证方向。


2)观察用户真正在乎的事

用户有时候会“说谎”。就像史玉柱问老人是否买保健品他们回答“买不起”,但显然不是真买不起只是抠门不愿意买而已。再比如你问人为什么会买几万块的品,他的回答大概率是像精致的做工致敬,而不会说是为了身份认同。亦或者,用户可能会给出受限于自身认知的答案,好比如果在过去时代,你问用户理想的交通工具是怎样的,它可能说想要一匹更快的马。面对这些情况,你就需要抽丝剥茧,揣摩用户行为背后的用意,而不是执着于具体回答。


3)观察极端用户

极端用户是指消费群体的天平两端。比如很多游戏公司,都会着重调研初次接触游戏的新手玩家,和职业玩家的反馈,这两波人群就是极端用户,因为他们可能会放大被普通用户被忽视的需求。同理,如果你要推广某产品,去研究初次消费以及最频繁消费的那两波人群,观察他们的需求上怎样的。这并不是指用少数人的需求代替多数人,而是从极端用户身上寻找启发,用来向大多数普通用户验证,他们可能会给你带来宝贵的回馈。如Odorono止汗剂广告的成功,就是从对极端用户的观察中产生洞见。


4)观察用户的变通行为

很多时候,用户并不会注意到某个产品或设计中体验不好的地方,他们往往只会认为“它们本身就是这样的”。你能想象旅行箱的轮子,是在旅行箱发明之后的200年后才加上的吗?在这之前他们都使用推车来运输行李箱。所以,你可以观察用户在使用过程中是否有采用变通方式,有没有“两波三折”的过程,或者是否有“蹩脚”的行为,来判断某些不合理的地方,捕捉这些未被满足的需求。


以上是关于定量型与定性型的调研方式和技巧分享。

而当我们通过这些调研方法,拿到一堆庞杂的数据,又该如何的利用这些数据产生洞见,帮助我们做出更好的设计呢?我们还可以通过一些技巧萃取用户需求,转化成具体的解决对象,帮助我们产生创新想法。



三、如何萃取需求?

关于萃取需求,主要给大家介绍两个实用的方法工具。


1.用户画像

“用户画像”是一个使用频率非常高的工具,它是建立在用户调研的结果之上,通过找到优先级比较高的需求,虚构出“典型人物”,来代表和还原一群人的行为特征。


目的一是“总结”,将用户调研的结论,用更直观、可视化的方式呈现,帮助团队更好的了解用户,促进共同决策。

二是“移情”,建立与用户的同理心。帮助我们从用户视角出发,更好的领会对方的需求和痛点是什么。


这就像打仗前,在地图上勾画敌人的行军路线,帮助我们催生策略与洞见。


怎么做用户画像?

第一步,找出工作目的与用户需求的交集。比如你将要设计一则广告,目的是说服用户购买某产品,那么你就要找出用户购买这个产品的动机是什么,以及为什么会产生这样的动机?这些就是你工作目的与用户需求的交集。


第二步,提炼出用户需求的共性,将调研数据合并同类项,提炼出那些覆盖面广,权重最高的几个共同点需求。


第三步,将画像具象化。用更直观生动的方式演绎用户需求和用户特征。


一般来说,一个用户画像包括:

1)用户的基本信息:肖像、名字、性别、年龄、工作等等。 

2)用户与调研主题相关的特征描述:比如性格、兴趣、习惯等等。 

3)用户的动机与痛点描述:他想要什么?为什么想要这些?阻拦他达到目标的障碍是什么?

前两个是显性数据,通过定量型调研就能拿到,最后一个是定量性与定性型调研综合的结果,也是画像的核心。


举个小栗子,南孚充电宝的电商详情页设计,经过前期后台数据调研,和用户访谈。

得知用户购买充电宝的场景有:

1)外出旅行  2)出门逛街  3)商务出差。

用户对充电宝的特征和偏好有:

1)希望容量大,够用。2)希望体积迷你,方便携带。3)希望是大品牌,更安全有保障。

那么我们就可以勾勒出一张用户画像,如下所示。



这样一张画像就完成了。当然一张画像只能代表一部分群体,不能代表全部类型的用户,所以按照调研需求,可以分别勾勒出多张不同的用户画像。具体数量取决于想要覆盖的人群。比如还可以有:王小丽38岁,公司高管,经常旅游······周小芳22岁,大学生,喜欢逛街·····


在确定了用户画像之后,再给大家介绍第二种启发创作思路的工具:用户触点地图。



2.用户触点地图


所谓用户触点地图,也叫服务蓝图,或者用户旅程地图,也就是研究用户是怎样与我们的产品&服务发生接触的,一共有哪些接触点,每一次会接触有怎样的体验?将这一连串接触点像地图一样呈现出来,从而帮助我们汰劣留良。


海底捞在这方面做的就特别好,它将用户从进店到离店的整个体验过程,细分出了N多个接触点,从进店、带位、点餐、用餐、结账、甚至上洗手间,都面面俱到的顾及客人需求,你排队不耐,给你擦鞋、美甲,你用餐时担心头发沾上味道,给你发圈,你孩子哭,给你带娃······


而用户触点地图在其中的意义,则是一个有效的整体体验规划工具。通过触点地图的绘制,你可以知道用户在各个环节下,在想什么、要什么、有什么感受,帮助我们提炼出待改善或是创新的机会点,完善整体体验。


怎么绘制用户触点地图?

很多专业书籍和文章会讲的很复杂,但其实关键就两步:

1)横坐标画出用户使用产品从“始”到“终”的过程,

2)纵坐标画出三种感受,分为满意、一般、糟糕。并在坐标内填充各个关节的体验是怎样的。


举个例子,我经常会收到一些求职者的简历作品集,但是在这一个过程体验有时候并不好,比如文件太大,有的文件打不开,有的干脆发过来源文件或者网址······如果把这个体验过程从始(收到email)到终(保存联系)画出来,可能是这样的。


如果在这之前就针对这一过程,从用户的角度出发绘制了用户触点地图,那么你就能很大程度避免这些误区。这也是绘制用户触点地图的主要意义。


最后再啰嗦一句,用户触点地图不仅能帮助我们建立整体认识,避免踩雷,还能帮助我们找到关键节点,更合理的分配资源。这里涉及到一个诺奖级别的配套知识点“峰终定律”


所谓峰终定律,指的是人们在经历了一次事件后,只会记住两个因素,一个是事件的高潮,即为“峰”,还有一个是事件的结束,即为“终”。这一定律在服务体验中经常被用到。


比如在宜家的购物流程中有很多负体验,迷宫般的路线、有时还得自己搬运产品。但是看到精致优雅的产品,以及结束后的1元冰淇淋,会让我们觉得整体的体验还是不错的,愿意下次再来。正是因为在关键时刻和结尾带给我们的体验是正峰值。


这给到我们最大的启示是,任何商业以及设计行为,能调用的资源是有限的,而我们可以通过在关键节点与结尾,制造正峰值,达到资源的更大化利用。

比如在很多日本的设计上都有这样的小巧思。

蘑古力零食,吃完以后,盒子最里面写着“无论何时,都请再来享受一刻小憩”。



拉面馆喝完最后的拉面汤才看得到碗底写着“谢谢”。顾客对店主肯定的同时,也获得了店主的感谢。



这些小彩蛋,都是对用户终值体验的提升,甚会因此细节而留意,成为回头客。

这些何不是精妙的设计?

设计是一门科学的艺术,我们要懂得利用社会上已被证实的方法论,避免行为的盲目性。这比单纯的从速成派大师那里学一些水面上的术,重要太多了。


总结一下本文讲述的内容。

设计不是玄学也不是直觉,它是有逻辑的满足用户需求的过程,而调研则是洞察用户需求与创新之源。

关于「如何洞察用户需求」这个话题。


首先,我们分析了用户的需求有两类,一类是“功能需求”,它是表面的、理性的,另一类是“情感需求”,它是深层的、感性的。功能需求包括但不限于低价、性能、便捷性、可达性、降低风险;情感需求包括但不限于高端、定制化、新颖、过程体验、理想自我,这些都能启发我们思考不同方向的可能性。


其次,介绍了两类基础的调研方法,分别是“定量型”“定性型”。定量调研侧重于广度,如后台数据法、问卷法,能帮助我们获得大量显性数据;定性调研侧重于深度,如访谈法、观察法,能帮助我们捕捉用户行为背后的原因,这些也都是洞察用户需求的基本功。


最后,我们介绍了两种萃取用户需求的工具,分别是“用户画像”“用户触点地图”。用户画像是提炼用户关键需求,虚构出具体人物来代表一类人群,是一种可视化的用户需求总结方法,同时也能帮助我们切换视角,与用户同理共情,催生创新想法。 用户触点地图是细分出用户接触产品的各个环节,帮助我们汰劣留良,发现机会点,以及更合理的分配资源。


文章来源:站酷   作者:两个太阳

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

深度解析B端用户画像从理解到建立

雪涛

在B端的设计中,用户画像的建立一直困扰着广大设计师朋友们,由于对于业务的不熟悉、对建立目的的不明确,经常会采用无脑硬套C端用户画像、刻意为建立画像而画像、过于追求画像广度而不注重深度这样的方式来进行用户画像的勾勒。导致的结果就是建立的用户画像与业务场景的关联甚微无法对垂直业务进行有效赋能、目标客户锁定出现偏差导致无法创造真正的用户价值,间接的导致产品无法创造商业价值等一系列问题


今天我们就来讨论如何更为精准地建立B端用户画像,从而能更好的为你的设计进行决策,为产品打下优良的准备基础











B端用户画像在大体的定义上其实和C端没有太大的差别,都可以简而言之地定义为是一种勾画目标用户/客户、洞察用户特征、联系用户诉求与设计目标有效工具都采用贴标签的方式对用户进行分析和描述,解决的问题也都是更为明确的告诉设计师:“我们服务的是一群什么样的人?”





之所以最后的落脚点还是人是因为无论是To C还是To B我们所服务的目标用户始终都是人这样一个载体,都是在为人做设计(明确这点很重要)。所以这就要求我们无论是C还是B始终都需要站在人的角度来进行情感体验带入、痛点需求分析、决策因素推导,和C端一样B端同样需要想方设法的通过设计与用户达到情感共振


只是对比C端而言B端所聚焦的方向有所不同,较为笼统说就是To C的用户画像是对个人个性、特征的放大、筛选、整合,To B的用户画像是对于具体行业职能、职位和权重需求的发现、剖析和理解。而这具体的异同点我会在后面的篇章中详细的讲解










2.1 基础特征

从基础特征来说,B端和C端的共通特征其实并没有太大的出入,都具有:标签性、真实性、实用性


鲜明而独特的标签使是我们连接目标用户的依据,告诉我们为什么选择这类用户而不是那一类用户,同时可以让设计团队进一步验证产品定位。在标签不断被丰富的过程中,用户的形象也在不断变得立体,产品与设计的思考决策随之会更全面


可信的真实度可以让设计师、产品经理较为有依据地对客户的诉求进行把握不至于被错误的信息影响设计目标的确立,同时这也是在项目推进的过程中与各部门沟通强有力的凭借和背书,能有效地抢夺设计过程中的话语权,所以一定要尽量去对你的目标客户进行的真实还原


实用的意义主要存在于项目工作效率中,在B端的设计和产品中会比C端更加强调效率,项目的进程总是一环扣一环,前一个环节的错误都必然会影响到后面的环节,从而影响整体的进度,好的用户画像是一定能为你的设计开个好头,准确切中正确用户的正确需求,以其实用性大大提升整个团队的生产效率




2.2 独有特征

除了上述的基础特征之外,B端用户画像还有着其独特的特点,而这也往往是困扰设计师们在建立有关用户画像的时候的难点,具体体现在:


2.2.1 用户信息获取壁垒较高

在这点上我把他们大概总结为四种主要原因:用户样本少、数据获取难、业务理解需求高、测试难进行




第一,说到B端用户画像感受最为直接的就是:“关于B端的用户反馈是真的少”这主要是因为B端的用户的总量从体量上来说就比C端少了很多。要成为一个B端的用户首先得是一个有B端系统赋能之下的工作的从业人员,这就一下子刷掉了许多人可以成为目标的客户,不像是C端基本上没有什么太大的限制


然后再加上B端行业的领域性较强,经过具体垂直行业的细分后,能够成为你所研究的某一具体行业的目标客户者更是少之又少,这就导致了可调研的样本不足(因为可以被接收到的反馈的声音就少了)很难去做定量研究


第二,对于行业内部用户的有关数据的获取来说同样不是一个容易的过程,毕竟多数都是很难通过互联网的查阅就直接进行获取的,通常需要通过询问目标客户组织内的关键人物如:CEO、业务负责人、商务BD、行业顾问专家才能相对准确的获得相关数据,而这些数据的保密程度都较高,像企业目前的经营概况、主要合作方信息、公司内部架构……这类信息本身都有较高的获取成本,更何况对方也不一定愿意透露


哪怕是通过外部数据公司进行购买,也需要你的公司或者团队有能力、有意愿去承担在这方面所付出的成本,还需要你本人有能够甄别数据是否可用的本事,如此,就在你构建用户画像的调研阶段形成了一道天然的行业壁垒


第三,对于业务的理解需求在B端行业尤其重要,特别是对于UX来说。对业务较为深入的理解可以快速有效的帮我们熟悉在具体工作中角色与角色之间形成的业务泳道,进而准确抓取画像中的关键角色




比如我们需要为餐饮行业从业人员提供一套线上B端解决方案以提高他们的运营效率,在描绘这个用户画像的时候我们可以先通过对业务的理解梳理出从点餐到买单的整条业务的泳道图,在图中我们得出了一系列的角色,从中分析出这条业务链中的关键角色(或者说是关键决策人):前台、服务员,将其定为目标用户,然后针对关键角色开始通过业务分析痛点需求,为其建立用户画像


这说起来容易但是实践却很难,前文就讲过行业之间千差万别,很多时候真的就是隔行如隔山,不同行业的业务泳道完全不是我们能够通过固有的经验能推测的出来的,需要实实在在反复做用研才有可能完全将其还原,虽然不是说要多年深耕其中,但是起码要对业务有一个较为立体的认知,后文会具体讲到


而这对于我们传统的设计师尤其是新手设计师来说并不属于我们的“天赋技能”,毕竟传统意义上对于业务的深入理解完全不在我们的工作需求范围,还是习惯于做一个产品经理提需求然后卑微照做的“撸图小美工”,就算有心也很少有机会能够参与到用户调研中去了解业务。对于是设计自家企业内研系统的同学来说可能还好一点,可以通过很多公司内部的人员与数据去了解,甚至还能比较容易地实地考察,但是对于外包、SaaS类型的设计同学来说自身用研经验不足、缺少方法论无法真正理解业务是阻碍精准建立用户画像的又一道壁垒


第四,由于B端的产品和公司的业务息息相关会直接影响到公司的日常运营,所以很难像C端那样悄无声息地或者是有选择性的将用户放置在真实场景中进行灰度测试、A/B Test等,很容易造成新的功能与交互与用户原习惯不相符的情况从而耽误日常工作,这是绝对不被允许的,就算是招募了用户进行专门的测试,也很容易因为提前告知这是测试的刻意性使用户造成心理偏差从而导致测试结果的会有偏颇。


这就直接导致了用户画像中推测的痛点需求很难被及时有效验证


2.2.2 角色与角色之间差异较大

首先,角色与角色之间的差异较大也是B端用户群体较为显著的一个特点,这主要是因为职位的不同导致的,不同的职位除了会形成表面上的上下级关系外本质上来看应该是形成了不同的职能、产生了不同的权重,对于用户而言这就导致了不同角色之间关心的价值不同(可以说是用户目标不同)、决策权大小不同、使用人数不同……


举个最简单的例子就是,一家店老板是一个角色、店长又是一个角色、前台又是一个角色,这三者之间关心的与自身价值相关的事儿肯定是不一样的,比如老板的目的是如何通过降本增效达到店铺的利润最大化,店长的目标是如何提升团队管理效率提升自我业绩,前台的目标是如何优化日常交互提升自己的工作体验与效率

个人认为可以将角色的差异聚焦到以下四个维度作为参考比较:用户目标、使用人数、使用频次和决策权重,那么套用到以上的例子中就可以呈现为下图




通过此图我们可以较为直观的感觉到角色差异所带来的特征,同样的通过对这些差异的比较也有助于我们找到关键角色、关键决策人(权重较高的人)


其次,除了用户目标这些差异外,对于设计师来说很重要的一点就是明确不同用户的具体使用场景,因为事实上就算是同一家门店、同一家公司的各个角色他们的使用场景都有可能千差万别


举个例子同样是老板和前台的两个岗位会因为岗位职责要求个人使用偏好习惯这个两个主要因素导致他们选择使用产品的场景、平台有所区别




前台因为是执行层员工所以有必须天天到岗的要求,所以她的使用场景大部分情况下都会是在门店内,更准确的说是门店的前台位,而从工作内容上来说主要是高频地处理每天店内的各种订单业务、进行登记、结账、数据录入等所以在端口的选择上可能会更多的选择固定端口、Web端,这就构成了属于前台的基本使用场景

而立足于老板而言,他没有每天都需要到岗的需求,主要需求是通过系统查看门店的营业数据,快速进行一些较为大型的申请的审批等,而且使用频次不高,所以老板的使用场景除了门店外可能更多的是要考虑到在店外、在家的场景,而使用端口上则应该更加偏好移动端APP来进行操作(当然这个还是要放到具体的项目中具体分析)


本质上来说和用户目标等因素一样,使用场景主要也是由行业中的具体岗位职责所决定的


最后,角色与角色之间的差异还体现在置于产品不同阶段的决策链路中同一个角色的参考权重会不一样。听着是不是很抽象,没关系举个例子你就迅速能明白




在产品的销售阶段,也就是目标客户的初次购买阶段,此时决策链路的关键是老板是否出资购买产品?很明显的是员工在这个阶段是没有出资决策权的,而且员工的态度对促成这个链路影响甚微,那么我们的主要精力就是应该放在打动老板这个角色的目标上,此时老板的意见、需求……会成为我们用户画像中参考权重较为重大的部分甚至是全部


而在产品的续费阶段,此时决策链路的关键变成了老板是否会进行续费?虽然表面上看似乎和初次购买区别不大,但是实际上此时员工的态度的参考权重已相对提升。这是因为老板会通过员工在使用系统时的反馈和通过引进系统所带来的效果作为是否续费考量,此时执行层的体验需求是设计师需要去重点关注的,他们的意见在画像中的参考权重会提升,这就是为什么角色的参考权重会随着产品阶段的改变而改变


总结一下,角色与角色之间的差异体现在不同角色的用户目标不同、使用场景不同、使用频次不同、使用人数不同、决策权重不同和不同阶段意见参考权重不同


2.3 内容组成

经过以上的特征分析用户画像的构成在我们的脑中已经初具雏形了,那么具体来说用户画像的构成应该如何较为系统的拆解呢?个人认为较为合理的方式应该是先思考用户画像的功能或者说用户画像需要反馈什么信息


这个问题的答案其实从之前的特征中我们可以较为明确的找到即反映企业的信息反映企业中角色的信息,这两部分的信息我比较喜欢将其称之为客户画像和角色画像




2.3.1 客户画像

客户画像简而言之就是指你目前的设计所服务的组织、公司的画像,它涵盖了该组织所在行业的特征、现状(包括行业类别、产业链细分等)和自身企业特征(规模、发展阶段、市场、业务情况等)。这有助于我们快速地验证我们对产品的定位准确性并且迅速地找准大致方向以便于随时补充所在该垂直领域相关信息以更加了解客户。当然从团队协作的角度来说,这些信息还可以帮助销售团队更为方便的找到目标客户进行签约


客户画像以一种较为精炼的方式进行拆解可以分为基本信息、业务信息、组织架构和关键角色,其中具体来说


基本信息:行业属性、地理位置、企业规模


业务信息:业务概览、经营模式、付费能力、使用目标


组织架构:组织自上而下有哪些机构,彼此之间有何联系


关键角色:组织中所包含的各个岗位




如果我们以一家连锁餐饮门店为案例那么可以具体这样进行进行描绘




2.3.2 角色画像

而角色画像就是指你目前的设计所服务的组织、公司中的使用人员包括了公司的高、中、底层即决策层、中间管理层、执行层,它包括了你所研究的角色的个人特质或者说岗位特征(包括了岗位特征、职能、职场处境、决策链路位置、希望解决问题的目标等)


角色画像以一种较为精炼的方式进行拆解可以分为角色名称、基本信息、工作目标、和使用场景,其中具体来说


角色名称:具体职位的具体职位名称或是工种


基本信息:文化水平、办公场地、平台偏好、使用频次


工作目标:岗位职能、岗位责任和使用期望


使用场景:以较为干练的故事叙事的方式对日常工作的各个场景进行描述





如果我们以一家连锁餐饮门店的店长为案例那么可以具体这样进行进行描绘




而在细化到每一个角色岗位的情况下,在使用场景上甚至可以进行武装到牙齿般的场景再细分,比如厨师长在一天后厨管理中最高频的需求是什么?对后厨订单的显示有什么样的自己的想法需求?这都是我们可以在画像部分进行不断深入思考的,当然不断细化势必会自然而然涉及交互的具体设计,由于篇幅原因之后会单独写一篇文章来进行叙述,这里就不做过多的探讨


大家一定需要记住的就是构成用户画像的基本组成部分包括了客户画像、角色画像两大部分,而每个大部分中又分成了属于各自的小部分,具体的细分和调整还是要落实到具体的业务、具体的行业中去进行构建


2.4 B端与C端用户的不同

之前就提到过B端的用户画像与C端用户画像的特征上有比较大的区别,而且对用户的描绘侧重不同,这也是为什么很多从C端的设计师同学在转B端设计的时候发现在用户画像的勾勒上一些形式无法直接复用的原因,具体来说分为以下这些区别:




2.4.1 产品选择

C端用户选择产品的感性(主观)因素相对较多,而B端则更趋于理性。什么意思呢?影响C端用户的购买因素一般包括品牌偏好、商品颜值、社交信息影响等因素,这类因素都较为主观化、情绪化。这是因为C端的产品对于用户而言更多的时候是通过购买达到一种自我满足、自我彰显,用户目标的个性化较强,简单的来说就是我买来是让我爽的,所以C端购买商品的时候会趋于感性与主观


而反观B端来说影响到用户的购买因素就理性的多,也更加的谨慎与全面,比如:易用性、投入产出比、能为业务赋能的程度、员工学习成本等,这是因为B端的产品与用户的盈利、运作都息息相关,会直接影响到用户日常的工作,用户的目标主要是通过购买产品达到对自己工作、业务的赋能,提升效率和盈利,不会有谁说我用美团的系统就比你用微盟的系统更高一层,说白了谁能让我的工作更加的、谁能让我的公司赚更多的钱谁就会成为我的选择,所以这也是B端的用户购买决策都比较理性的原因


2.4.2 购买决策权

C端的用户购买决策权一般不受社会关系的影响而B端的购买决策比较受其影响。这里的社会关系主要是指职业、岗位,这点其实比较好理解。很简单C端的产品大部分面向用户的细分不会像B端那么局促很多时候C端的商品只要用户的经济实力足够其实是可以随时随地随性进行购买,如果用户愿意哪怕是光头猛男也可以购买小裙子,别人是管不着的(当然也不一定啊)


但是B用户的购买决策权其实在前文就很明显的看出是非常受社会关系的影响的,比如一个执行层的小员工因为公司系统太垃圾突然想一拍脑袋给公司换个系统,然后第二天公司就自上而下换了一套新系统这种事儿想想都不太可能(当然一般也没有人脑子抽了想这么干)


这是因为无论如何在这条决策链中执行层小员工始终都是处在一个使用者的身份上,纵然你再有钱也不可能成为一个出资方的身份(当然除了那种你把公司买了自己当老板的)你最多只有建议权,并没有购买权,只有决策层的领导(很多时候都是最大的老板)是具备出资的权利的(注意我说的是权利不是能力),所以这样的结构特征在基因上就决定了B端和C端用户在购买决策权上有本质的区别


2.4.3 年龄、性别影响因素

C端用户相对来说购买倾向上受年龄、性别、职业、受教育水平这些因素的影响而B端相对较小。很简单C产品的购买理由虽然相对自由,但是对于产的定位还是会以一定的年龄层次、不同的性别等因素进行划分从而达到精准营销,毕竟不是那么多产品都是男女老少皆宜的,举个例子,美柚APP在大部分情况下用户都是女性而且是青年中年女性,服务于女性通过其监控自己的生理健康,一般情况很少有男性用户(例外除外啊),再比如经常会有APP给年轻人打造自己的潮流社群这样的定位,说明这个产品的用户主打年轻人这个群体


而放在B端这些因素其实参考价值并不大,这是因为首先一个组织、一个公司、一个门店的员工组成是复杂的,自上而下很可能覆盖了老中青三个年龄层次,性别男女都有,不会因为你的这些属性就影响了了产品的购买决策,全公司除了老板之外基本都是无理由被动接受产品并使用的客观状态,所以在这种状态下年龄、性别等问题的参考价值就基本不大了


以上的区别造成了B端和C端的用户画像在基因上就有“种族区别”,所以在对B端用户进行标签设计的时候再次提醒千万不能生搬硬套照搬C端,还是要深入了解业务、职能之后才能做出较为落地的符合属于你的用户的画像







3.1 B端用户画像的价值

其实在用户画像的价值上B端和C端没有太大的区别,主要都是为了进行精准营销个性化服务




精准营销的的价值主要是针对市场和销售团队而言的,我们所收集到的关于客户的每一点信息都可以称之为是一组数据,在大数据营销已经逐渐成熟的当下一个成功的用户画像是可以助力销售团队更快速的找到正确的业务方向,筛选出真正的目标用户,提升转化率,大大降低了浪费在与非目标用户的交流上,也是销售团队不断进行调整自我调整的指南


对于市场来说,通过对于用户画像的具体分析可以更为准确的调整营销内容和营销策略,从而更好的对渠道选择进行更合理的配置,在有效的用户画像基础之上思考创造出更多的有效客户。是一个非常有效的降本增效的辅助




而个性化服务的价值则是对于产品、产研团队而言的。当今的B端产品大致可以分为三种大的类目:企业自研、外包和SaaS,在面对自己的客户进行产品设计与服务的时候都多多少少会对每个用户不同的需求进行具体问题具体分析,从而进行一定的个性化定制服务


所以当用户画像足够的时候产研团队可以的对用户的一些差异化需求进行精准把控并制定出最适合的解决方案,而在产品迭代的阶段也能更加具有针对性的对产品的功能、交互进行完善


3.2 B端用户画像的意义

用户画像的意义其实是贯穿了从产品研发到产品是投入服务的每一个阶段的




3.2.1 产品定位

在研发初期,用户画像的明确可以帮我们迅速清晰产品定位模糊这个问题,因为很多产品在研发初期其实是搞不清楚自己的产品定位的,这会导致后面一系列的开发问题造成连锁反应,而用户画像是为了在项目一开始就帮助我们地知道我们在为一群什么样的人服务,这样就把准了产品的相对较为准确的定位,规避了后面出现偏差的风险




3.2.2 产品架构

在画像确立后的设计阶段我们需要对产品进行架构设计,用户画像是防止我们的架构设计混乱,梳理层级轻重、功能优先级的指南利器。我们经常会一下子同时接到各种各样的需求,很多人选择无论吞枣的一股脑把需求中的功能全部堆砌上去,这样直接导致的就是产品层级混乱,功能无归类,交互毫无逻辑,开发效率低下,就算最后做出来了用户也很难上手,甚至无法通过产品顺利走完一套业务闭环


明确的用户画像可以在一开始就为你产品的功能排布、架构设计赋予逻辑,因为用户画像可以明确的知道用户的具体目标,从而将需求可以进行轻重缓急的分类,此时每一个功能都可以归类到相应的模块,功能所处的位置可以按照需求的重要程度进行优先级的位置放置,同时交互更加符合实际使用场景,确保产品在产品再投入使用后能快速上手,快速解决用户的问题




3.2.3 团队争议

在设计进行的阶段团队内部会议时,不同岗位之间经常会出现对功能设计、视觉设计、交互设计不同的意见,甚至会产生很大的争议,在面对这样的争议很多时候其实设计师在产品经理、运营的面前是没有什么话语权的,这主要是因为大部分设计师其实对业务的熟悉和用户思维背书较弱,而别的岗位也会经常把设计当作撸图工具人使用,所以导致了现在很多设计师尴尬的现状:经常会被面临提出设想后被毙稿的情形


而一个具有说服力的用户画像其实在很大程度上能够对这个弱项进行弥补,用户画像代表了我们所服务的目标用户,那么我们需要解决的一切问题都是要围绕他来展开的,通过对于用户画像的核心需求的利用作为你的方案最好的佐证材料,不仅能够在设计目标上与同事达成共识,解决沟通过程中的各种争议问题,还能让你的设计真正做到言之有物,经得起推敲从而大大提升你的话语权





3.2.4 产品测试

到了产品的测试阶段,用户画像同样发挥着其重要的作用,虽然B端的产品相对来说测试较为难以进行,但是找到最为符合目标的用户对其进行产品可用性测试记录其实还是具有非常重要的意义的。精准的用户画像可以较为快速帮我们锁定我们需要进行招募的用户


3.2.5 产品迭代

当产品上线后用户画像的作用也还并没有结束,任何产品都希望自己的产品生命周期能更为长久,这就需要通过对自己的目标用户进行不断的深入需求挖掘,在不断的迭代中成为最适合你所服务的用户的定制化产品


而一个完善的用户画像是具有不断的需求挖掘潜力的,产研团队可以通过对于画像的深入研究进行用户的深入需求挖掘,从而指导产品功能的良性生长。







4.1 前提

建立用户画像的第一个前提是要知道用户画像被一般会被需要的时机,这点来说其实比较好理解,那就是当业务需求出现或是改变,产品出现了一些有待解决的问题时候,这也是设计、改版被需要的时候。举个例子当我们发现我们的产品上线后效益一直处于并不乐观的情况,这时候很可能是我们对于用户的需求分析出现了偏差,导致供应无法对应需求


那么我们就应该重新设计我们的用户画像,再次深入挖掘正确的需求,以适应我们的目标用户


还有一个前提就是你需要大致明确你所服务的用户,也就是开篇说的“我们服务的是一群什么样的人”在这一步你对这个概念不一定需要有一个十分的把控,但是至少需要大方向上的正确,因为这是为你后面的信息数据收集工作进行导航,确定查找范围,以防方向上的失误


4.2 信息准备与假设

当确立了具体的大致方向后,我们就要开始初步的信息收集与准备工作,也就是具体了解你所服务用户的业务,这是你能做好的B端用户画像的前提


4.2.1 原因

首先,这是因为如果不了解你的业务很容易造成你无法从一个全局视角对你的设计业务进行理解,当你不知道你的用户所处在业务中的位置,会很容易造成对真正的关键人的定位失误,造成用户同理心的缺失,那么也就无法真正分析出最为贴合用户的需求,对业务足够理解你就不会对关键人的寻找定位失误,也能上站在用户的角度来思考问题




其次,对业务较为理解的通透,是有利于你在信息求证阶段(用户访谈阶段)与用户进行较为顺畅的沟通的。你对业务的理解足够深入能够在被访谈的用户面前树立出一种专业的感觉,这可以让用户较为放心地和你进行交流,你与用户之间也才会存在共鸣,同时用户会因为你的专业感产生与你继续交谈的兴趣,你才有可能获取到更多的信息,毕竟大家都喜欢跟懂行的人聊天


相反当你不理解业务时与用户进行交流本身就会存在一种不自信感,而你所设计的问题会表现的十分生涩,造成用户觉得与你交流是在浪费时间的感觉。要知道用户其实是很不喜欢和你解释一些行业内所谓的“懂得都懂”的术语、表面问题的,而且很多概念可能就是用户实际工作中不存的显得很荒诞。如果你要问我怎么知道的,不怕大家笑话我的第一次用户访谈基本上全程踩雷


由于对业务的不熟悉就冒然进行用户访谈,会导致最后用户在问我:“你到底要问什么呢?”“你是不是要问这个?”“你说的我不是很理解,我们好像从没听过这个名词”这样的情况真的十分尴尬


最后,深入了解业务不仅能通过激发被访谈用户兴趣的方式启发你们对与更深层次需求的交流,这些深层次的需求捕捉是可以作为你后面在建立用户画像标签、推进项目的时候很有利的背书,作为你的设计的有利支撑依据





4.2.2 获取手段

在初步的信息获取阶段,其实我们是可以有较多的手段来进行的,我将其分为外部资源、内部资源两大部分




内部资源包括:


  1. 像产品经理索要业务方面的相关文档,这些文档具体来说可以是在做业务的过程形成的资料入:提案或者结案时候的PPT、Keynote文档,通过成功的或已经在进行的案例快速了解业务信息和行业概况,还有就是可以通过进入一些客户反馈群来收集整理客户实时反馈的需求信息


2.公司后台数据,公司后台数据是你的独特优势,因为一般公司的后台数据都比较少进行公开属于内部资料,但普遍具有较强的真实性,你可以通过内部的资源搜索找到你需要的数据


3.通过与销售团队和客户成功团队(CSM)的访谈交流得知行业和用户的信息,尤其是CSM团队他们和客户的接触周期最长,最快也最全地能拿到关于客户的一手数据,是很好的可以去获取数据的途径


4.公司高层访谈,公司高层决策层面对客户考虑问题相对而言会更加全面,通过与高层的交流可以拓展你的思维广度


外部资源包括:


  1. 同行交流,在行业中寻找业务能力较为强的同行朋友,虚心向对方进行请教受益良多(这也是我最经常用的方式)


2.付费数据,在市场上存在着比较多的进行数据付费的机构,比如企查查、客户堂、用友等,当然这个需要考虑支付成本,承受能力


3.公司官网、行业资讯门户网站,通过对目标客户的公司官网进行一定的研究可以较为直观的对客户的特征进行了解,而想要获取行业特征与资讯可以养成经常上行业资讯门户网站的习惯,进行对行业需求风向的实时把控,如:艾瑞网


4.相关的文章资料,可以通过类似于人人都是产品经理或者是收藏一些比较有权威性的语雀知识库,同样是一个比较好的渠道


4.2.3 必要信息搜集



通过丰富的渠道你可以对你需要的数据进行大量的搜集,但其中一定需要搜集到的信息包括如下:


  1. 客户公司基本信息,这其中包括:公司或组织相关的关键人(决策者)信息、组织的人员架构(尤其是对每个决策连路上关键人的位置把握),如果业务涉及CRM的模块还需要去了解公司的管理制度、赏罚机制、晋升制度


2.客户主营业务信息,这其中包括了:客户基本业务、核心业务、业务整体架构、核心业务使用场景、达成业务目标的资源需求和能力配置


3.客户公司产业链信息,这点的搜集虽然比较繁琐涉及面广,但是如果时间允许还是建议去搜集,当知道了客户业务处于其产业链的哪一个位置,其中有那些头部公司,就可以更加理解客户的各种决策背后的因素


4.一些专业术语的掌握,专业术语的掌握可以为后续你在求证假设的访谈阶段起到重要作用,不仅能给对方创造你很专业的感觉,还能减少对方不必要的专业名词解释工作,节省用研时间成本


4.2.4 问题整理与假设

当我们从各种渠道搜集完信息之后,信息是较为驳杂的,我们需要进行的是对于信息的第一遍过滤处理,将问题按照关联度的轻重进行筛选(不然很容易出现面对很多问题时我们无法抓住最为显著的主要问题),然后就是对于你想要了解但是还没有通过资料找到的部分以自己的经验进行假设并记录,通过后面对信息的求证部分完成对于你的假设部分的验证


4.2.5 收集目的

将这些信息收集是有明确的目的性存在的,主要分为三点:




第一,初步找到客户信息中的共性要素,在寻找各路数据的过程中,是经常会多次被反馈到相同的信息的,当你被反馈相同的信息频次比较高的时候,你就要特别注意这些信息,因为这很可能是你的目标客户群具有的共性,可以初步写入你的画像草案中


第二,圈定设计目标与范围,当了解了客户的大致基本信息时,我们就应该对我们的设计目标有了一个大致的判断,同时知道客户对于不同的需求优先级,通过对于优先级的梳理,我们可以在画像信息中将这些需求进行有秩序的排布,有利于项目推进中大家集中资源优先解决重要问题,范围的划定也有效放置了我们在调研过程中的方向偏离


第三,将你的调研目标具体化,为下一步信息求证做准备,当我们经过了初步的信息收集与检索后我们就对我们的用户有了一个更加清晰的认知,此时我们即将进行对这些数据的再一次求证,当求证之前我们需要圈定我们的调研具体目标,而这一步的意义就是为用户访谈做准备


4.3 信息求证

信息求证的阶段其实是与目标用户的接触,也就是我们经常听说的用户调研,如果说在之前的阶段我们都是通过间接的方式了解用户,那么到了这个阶段就是与用户进行直接的沟通,概括的来说就是通过设计好的问题询问到我们需要的数据


涉及到的方法其实有很多比如:用户访谈、问卷调查、实地调研、询问专家用户……由于篇幅的限制我就浅谈一下用户访谈这一求证方式,日后也可以出一篇单独讲用户访谈篇目的




首先要知道的是无论进行什么方式的验证其本质目的都是为了丰富和校正我们的用户画像,是带有一定认知基础进行的,所以我们的核心目的一定是:尽量深入的挖掘用户需求和验证自己的假设以对画像进行补充,在这个思路基础之上来进行


4.3.1 准备与限制

这个阶段很难说做到定量访谈,所以需要提前明确的是我们进行的一定是有计划的定性访谈,我们首先需要经过精挑细选通过自己的判断筛选出5-7个我们认为值得去调研的对象并提前与之取得联系


然后就是设计准备好问题提纲,录音设备和文字记录设备(可以是笔记本也可以是电脑)这里需要注意的是问题的设计的问题要有针对性,比如你想确切的了解具体在实际场景中员工是如何操作执行的;还有就是问题的设计尽量以解决你初步整理资料后留下的疑问为目标,这样会比较有效率;询问的问题在文案上尽量口语化,不然很容易让被访问者有一种“被审问的反感”





4.3.2 执行与交流



当一切准备就绪后我们就开始了与用户的交流,在访谈开始时不要表现的目的性那么强,很容易让客户产生疏离感,我们可以先与客户进行简单的寒暄当作热场,让对方的话匣能尽量打开,卸下对方下意识的防备,在访问中除了注意及时记录还需要注意的是:




  1. 注意问题的开放性,不要将问题限制的过于小,比如,只是问:“你们现在有外卖业务吗?”那么你得到的回答对你的指导意义并不大,比如你在后面可以加上“您认为在这块儿的业务有哪些可以更加改进的地方?有什么自己的看法?”把问题变成开放式问题,让客户有自己发挥的空间,这样做有利于你从客户口中能了解到更多存在于“专家盲点区”的深层需求


2.要以一种学徒的心态来进行交流,千万不要用户半句话还没说完你就突然又蹦出一个问题,用户访谈对于执行者来说是一个极其克制的过程,很多时候宁愿等对方说完,冷场个两三秒,也不要急于主动发言,这会大大降低每一次问题所能带给你信息反馈量,很多时候执行者要做的就是倾听


实话实说我的第一次用户访谈用户体验非常差就是因为自己性子急躁,突然想到问题就立马问,这是一定要避免的


3.当对于一个问题存疑的时候,可以先进行记录,在用户叙述完后针对这个问题以不断问为什么的方式进行提问,直到用户无法继续回答,这是一种典型对问题深入挖掘的方式,在实际访谈中很受用


4.对隐私问题谨慎提问,没有人不对隐私被问起不反感,如:店铺这个月的营收状况。当需要问起隐私问题的时候需要斟酌再三,能不问就不问,如果真的需要问可以在访谈结束后,以一种非正式的方式进行提问,会比较妥当


4.3.3 访后资料整理

采访后整理资料并不是是说所有采访结束后再整理,而是在每一次采访结束后就习惯性进行一次整理。这是因为这有助于我们二次加深每次访谈中的重点问题,而且在冷静的状态下通过回顾的方式可以更有效地过滤出每位用户的需求重点


除了及时进行归档备份外在十分确认的关键点上及时将其补充至画像标签库中;在仍有存疑的问题上进行记录保留想办法在下一次访谈中得到答案;思考在访谈中自身的不足之处,进行改正,避免在下一次访谈中再犯


在这样的良性循环中,能确保你的访谈能达到最高的效率


4.4 信息筛选与整合



当所有的调研工作结束之后,你已经对客户有了一个较为立体的认知,下面就需要对你收集到的所有数据进行一个筛选整合


这一步做目的就是找到相同角色的共性特征,并提取一些必要的差异化需求,对角色进行较为真实的还原


比如我们可以从样本中提取所有门店同一个角色:店长,针对店长这个角色对其进行在行为变量和痛点上的分析建模,所谓的行为变量比如就是角色日常在使用场景中的活动、自身对系统的学习能力等等,他能直接帮助我们推测出用户对产品的接受程度、使用成本等问题





当我们把行为变量和痛点需求罗列成坐标后,把符合的角色带入模型中进行一一映射,就可以快速的知道哪些是共性特征,哪些是值得研究的独有特征,哪些痛点是普遍痛点,哪些是差异性特点,详情见下图




至此,我们的信息筛选与整合部分就算是完成了,那么画像的产出也显得水到渠成、顺理成章


4.5 信息产出

如果上面的工作做的较为顺利,画像的呈现将会较为顺理,通过提炼的共同点将其对应的点反应在画像上的各个部分,由于在2.3.2部分中已经叙述过用户画像基本的组成部分,这里就不再过多的赘述,主要是以展示信息是如何有理有据地产生的这个过程为主


还是以2.3.2中角色画像的形式呈现来进行案例演示,通过对于我们收集到的数据来进行具体文字叙述的对应转化,逐渐构建出我们所看到的用户画像




当然痛点、共性和需求肯定远远不止上述所示,用户画像的信息还可以被更为细化的进行扩充,根据自身产品的特点、业务、定位进行更为贴合信息补充






至此,用户画像的建立就完成了,感谢你看到这里,在最后一部分我想和大家再讨论讨论用户画像中比较常见的错误,有我自己的教训也有前辈告知的经验




5.1 重形式感,实用性差

这应该是不管是B端还是C端的用户画像经常会出现的一个问题了,具体表现为:一味地追求形式的炫酷,在丝毫不考虑为什么要添加这些标签的情况下,直接在一些渠道上照着别人的用户画像就是一顿猛抄,盲目更风生搬硬套,给人一种为了画像而去画像的感觉(由于怕被打我就不放图了),很多时候就是当你问他为什么要添加这个标签的时候,他的回答就是:“我看别人画像上也有这个,我也这么用”(不要笑这样的情况还真不少)


这样导致的结果就是用户画像与我们目标用户的业务、使用场景关联度并不高,设计无法真实还原用户的使用情况,设计流于表面,销售也很难通过用户画像找到真正的KA客户,这样的用户画像可以说是基本处于一种不可用的状态。


其实甄别可用还是不可用最为直接的办法就是找到一个很确定的目标客户,将以上痛点和使用场景通过对其访谈询问,带入真实工作场景就可以进行最直接的验证




所以我们在这点上还是要以实用性大于形式感的思路、高场景关联度的方式,去踏实地进行绘制才有可能绘制出可信度高,可用性高的用户画像


5.2 片面追求完整性导致设计成本浪费

许多比较有实力的公司对于用户画像十分重视,希望通过大量的成本投入来尽可能的全面展示其用户的特征,这本是好事儿,但是很多时候会出现“用力过猛”的情况,具体表现为:通过大量的对用户的每个细节进行标签建立并记录并存档,导致用户本身关键性特征不明确。有一句话叫:“一个人如果都是特点,那么他也就没有特点了”这是对这种情况最中肯的评价


导致的后果就是,你会发现的你的标签库中存在着大量的标签,但是会完全抓不准用户的主要矛盾进行发力。当好不容易从几百个标签中抓住了核心发力点,发现其实至少一半以上的标签都是出于闲置状态,也没有对业务的拓展起到更多的作用,非常浪费设计资源、设计成本




所以我们还是要从一开始就抓住用户最核心的诉求,在以核心诉求为中心,进行需求的发散,不同的痛点罗列出不同的优先级,集中资源优先解决最重要的问题,面对标签的态度应该是在精而不在多


5.3 不注重用户标签的维护和迭代

我把这种情况称之为“形而上学”的的用户画像,具体情况表现为:当产品第一次成功上线后,所建立的用户画想就一劳永逸基本不去进行信息更新了。诚然由于很多产品产品周期的长久,面对的用户使用周期较长,很多时候用户标签的迭代看上去是一件没有必要的事儿,但是想要产品长期高度贴合用户的需求,保持优良的体验感,就一定要重视对于用户画像标签的维护和迭代升级





因为用户的需求和业务都是动态变化的,那么对于我们服务供应侧来说对于用户的认知也一定要随时处于一个动态的状态,但凡产品突然满足不料用户的需求了,那么客户随时可能找一个更为合适的替代品,用户的忠诚度就和渣男渣女心一样,都经不起考验,不要抱有任何的幻想,随时对用户保持清醒的认知,对他们的特征进行记录,才能长久的做出贴合其需求的产品,所以用户画像的更新迭代,任重而道远


结语:

关于B端用户画像其实还远不止以上的内容,仅希望通过以上的心得体会能帮助到正在为之犯难的你,与大家相互交流,如果能碰巧助你一臂之力那么真的不甚荣幸,祝正在努力的我们都能变得更强


文章来源:站酷   作者:核糖bro


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


深度解析设计系统

雪涛

你觉得设计系统重要吗?那目前手里的设计系统是在灵活运用?还是落灰、摆设?你对设计系统理解有多深?它在你的设计中有多大的用处?节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范?那怎么避免设计系统带来了统一和便利,但同时失去了变化和新鲜感?





设计系统是今年来热门的话题之一,想要带来良好的用户体验,设计系统就是其中重要的一环,那它和设计规范、设计模式、设计语言、设计原则有什么关系?


设计系统

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档,在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色,文案,字体等等),所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的,是需要维护与改进的。


设计模式

设计模式是一种经常性,可重复使用的解决方案,可用于解决设计问题,我们经常会说解决整个方案我们要运用什么样的设计模式。


设计语言

设计语言是把设计作为一种“沟通的方式”,用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。


设计原则

设计原则可以理解为设计语言中的语法,是构建设计语言系统的起点,用于传达品牌主张或设计理念,它将指引业务设计执行的方向。


比如Airbnb的设计原则可以简单归纳为几点:

设计规范

设计规范对于设计师来说并不陌生,日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率,同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。


那是不是只要制作一套设计系统,在团队进行扩散就可以了?那平台的统一性就解决了?


我曾经加入一个设计团队,看到平台风格不统一,当时很自豪很坚定的制定了一套平台设计规范,从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系,还有交互方面。当时一心想着有这个规范宝典在手,平台统一性指日可待,没想到这个规范就成了我自己的规范,仅仅是我在自嗨。

为什么已经建立设计规范了,还是没能解决平台统一的问题?这里延伸出另一个问题,为什么其他设计成员不用?协作不起来?是它不够好?我严格按照标准来,为什么推不起来?


那要追溯到设计体系的目的是什么?它的意义何在?

1-建立统一的设计文化体系

2-保证多团队成员共同参与的项目视觉一致性

3-提升品牌调性

4-节省与研发人员的沟通成本

5-将元素组件化,提升设计师和程序员的工作效率

6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。

7-在用户层方面,对某产品的体验一致性得到落实

8-减少设计出错率

……


整体可以归纳为

1-对内统一,对外区分

2-管理与协作变得方便

3-建立设计文化体系,建立品牌感

4-减少、优化错误出现


对内统一,对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一,一个品牌的设计风格,是要有别于同类竞品的,比如阿里云、腾讯云,他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分,一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站,各个页面的设计差异明显,像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。


undefined



管理与协作变得方便


for Designer:

多个设计成员协同一个产品,迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队,如果没有统一设计规范,那网站会变成什么样子。


for Developer:

在UI还原中,设计需要经常与前端进行沟通“这里这里这样做,那里那里这样做”,对于每一块的设计,前端都会询问你,这样大大增加了沟通的成本,把时间花在了无效的事情上。

设计规范统一后,减少了无效沟通,可以更专注创新方向,比如:要改变预先设定的一个辅助色,无论是设计还是开发,修改组件的颜色,全局使用到这个组件的地方都会改动,大大节省了设计时间。


建立设计文化体系,突出品牌感

做品牌的时候需要制定一整套VI规范手册,那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式,更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐,看到界面都可以立马识别出这是哪个app。



undefined


你能分出哪个是网易云播放界面,哪个是QQ音乐播放界面吗?


减少、优化错误出现

设计经常碰到设计完后需要修改一个点,然后就要找出设计稿中所有相同的地方进行修改,这样很容易漏,统一规范后只需要修改组件即可。尽可能的避免错误的出现。


设计规范的意义这么强大,对网站及品牌有至关重要的作用,那为什么还会出现没有应用起来的情况呢?

很多设计师会说:“设计不就应该是变化多端的吗?就是要表现创新力呀?制定了设计规范是不是就失去了变化和新鲜感?那设计还有什么意义?开发都可以做设计的事情了。”


这里就要看设计规范理解的深度—设计规范是分层次的平台规范归根结底是为了确保产品的易用性,是为了减少用户的学习成本


对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式,比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素,给用户一种统一的视觉形象,在跨界面、跨端、跨系统间有熟悉感,从而潜移默化地进行品牌的渗透。



增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定,对组合自由度较高的复合组件减少过于局限的限定条件,考虑各种拓展的可能性。组件在制定过程中要考虑多种状态,多种可能。



设计规范随着业务的发展或技术的变革终究是会过时的,是需要迭代的。

设计规范是需要迭代的,而不是我只要制作出来就放那了,就像女生买衣服,去年的衣服已经配不上今年的我,嘻嘻

~~希望我每天都有新衣服穿,做梦中~


对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力,设计师可以更多的时间去发挥创造性。


误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范,那我的创造性从哪发挥,界面都长的差不多。在设计中,设计目的是解决商业或用户的问题,并不仅仅是为了有创意而引入新的样式或交互方式。


有了设计体系,统一了整体品牌风格,不用把精力花费在比如调整间距、对齐元素等琐碎的事情上,更多的回去关注更全局的设计策略。


误解2-设计系统只关乎设计,可由设计师独立完成

它仅仅是设计软件上可复用的组件,所以可由设计师独立完成,这种想法是错误的,是需要来自不同角色支持和参与的,这里包括前端、品牌、动态设计、 用户研究等。


误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了,其实不然,对待设计规范就像对待产品一样,是需要维护和改进的,包括两个方面:一种是对内部使用的开发以及同事,一种是对用户的,应该定期收集用户以及同事的反馈,确保及时更新迭代。


误解4-设计系统的重要性

1-提高设计开发效率,最显而易见的好处就是,组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2-确保设计一致性,为用户提供连贯一致的用户体验,设计的一致性让用户能缩短的学习使用产品的周期,让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验,会让用户产生一种掌控感。

3-设计系统促进了公司内部的合作和交流,一个成功的设计系统是需要跨功能团队参与,设计系统因此促进了公司内部不同职位的合作和交流,这种文化的建立也会帮助公司更有效地推出新的产品或服务。


那我们要如何去执行呢?

已经了解了规范的目的/意义,那该怎么去着手呢?


  • 对于设计规范的意义要同步给设计人员,提高认知,这是一件提率的规范,规范必须落地。

在制定规范前期,不应该是一个人规定这个规范,设计团队的成员应积极参与,前期先把规范的基调定好,人人都参与进来了,规范也就能更好的运营,当时我就是一个人定了规范,只是单纯把规范发给其他设计人员,他们没有参与,自然不会使用规范,对里面的设计元素没有加深理解。


主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力,这样能把纰漏降到。

undefined


  • 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范,从UI的定义,User Interface—用户界面,用户与界面之间的交互关系,可以归纳规范其实可以包含两大类,一类是视觉规范,一类是交互规范。


视觉规范可以给用户传达统一的品牌形象,确保视觉一致性。后期的设计元素须复合规范的原则。


交互规范可以减少用户的学习成本,让用户有归属感。交互规范在制定的过程中,需要写好交互规则与条件,不然后期维护会混乱。像盖房子一样,地基都没打稳的话,整个楼都是偏的。


那在使用规范时,一定要遵循规范里的要求进行应用,否则会乱套,不仅起不到统一的品牌风格,反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。



设计规范的节点

节点和公司的进度搭边,看当前的产品是应该先独立风格还是先统一基础规范。


1-固定的设计风格规范,比如:google的“扁平”,微软的“磁贴”,可以全局使用,并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队,定好基调,不会走偏。


2-不断优化的设计规范,根据公司的节奏,有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后,进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。



建立规范


·制作原理—利用粒子构成的原理与三维解构

利用粒子构成的原理与三维解构,一个组件被科学的三维解析后由粒子再构成,理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变,高度灵活


·具体过程

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。


·元素是工具库的必要部分

并不是每个时刻都能够直接使用完整的组件,元素是我们工具库必不可少的部分,它可以更大的方便你修改组件,再造组件以及特殊的排版,方便拖拉拽。


·组件的命名规范化

规范组件命名,方便查找、方便协作。


协作

一键导出/同步组件到Sketch模板。

标注方面,目前我们团队使用的是蓝湖私有化。



那是不是所有的公司都需要创建设计系统?

一般情况下,公司有不同的产品线,且都需要长期的开发与迭代。

公司中,越来越多的设计师加入,设计风格需要统一。


那建立一套设计体系会面临什么挑战?

设计体系里面包含了设计语言、设计规范,需要与前端、品牌、动态设计、 用户研究等沟通,还是需要迭代优化的,这是非常繁琐耗时的项目,初期会非常的艰难,当设计师开始做组件时,也是非常耗时的工作,需要考虑不同场景下的使用情况以及设计的延展性,都需要投入大量的设计人力。


聊了这么多,大家对设计系统有了一定了解,建立好设计系统可以事半功倍,以此提升效率才能提升UED价值。


文章来源:站酷   作者:玛丽的设计笔记

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




Pantone 2021年双流行色重磅发布:灰+亮丽黄

雪涛

今天早上,权威色彩机构 Pantone 公布了2021年度双流行色:灰+亮丽黄。

这是继2016年水晶粉+宁静蓝之后,第二次推出组合年度色,寓意光明,传递力量与希望。

灰+亮丽黄这两个独立的色彩,联手打造出梦寐以求的色彩组合,像是自然风化的岩石上浮起的日出,带来了一种更深层的体贴和踏实感,同时也表现了对未来充满希望的乐观精神。

这正是经历过艰难的2020年后,世界所需要的。

PANTONE 17-5104 Ultimate Gray是海滩上的鹅卵石和自然元素的颜色,其风化的外观彰显了经得起时间考验的能力,象征着坚实而可靠,体现了恒久不渝的感觉。

PANTONE 13-0647 Illuminating则是充满活力的明亮欢快黄色,是充满阳光的温暖黄色阴影。

灰与亮丽黄的双流行色组合,突显不同的元素如何互相支持,寓意着阳光和友善,凝聚了更深程度的体贴感。

这个色彩组合实用又稳固,温暖又乐观,为我们带来韧性和希望。

Jil Sander Pre-Fall 2021

当人们期望寻求能量来强化自己,克服持续的不确定感时,坚实可靠而又热情洋溢的色调,恰好能够满足我们对生命力的追求。

在过去几年里,潘通的选择充满了社会意义,被看作是对全球情绪的捕捉。

而在经历了记忆中最黯淡的一年之后,2021年的组合色旨在以坚韧的精神基底传递积极和幸福即将到来的讯息,给人们带来希望,让人感到一切都将变得更加光明。

Prada 2021SS

持久耐看的灰和生动活泼的亮丽黄,联手表达出我们所需要的坚韧的正向态度。

这种力量与正向的结合,是一种结合了洞察力、创新和直觉,以及对智慧和经验尊重的颜色。

它启发了重生的能力,推动我们前进,迈向新的思考方式与新观念,最能代表 Pantone 2021年度代表色的精神。

针对这组双流行色,Pantone 还推出了5种不同的官方配色系列,表现灰和亮丽黄的多功能性,以帮助大家更好地理解和应用。

AVIARY 鸟舍

【鸟舍】是生动活泼,令人愉悦的色彩组合,有着异想天开的独特性和极强的爆发力。

持久耐看的灰带来属于大自然基本元素的颜色,温暖乐观、充满活力的亮丽黄为色彩组合注入更多能量,高雅的云端舞者白则为系列注入戏剧感。

ENLIGHTENMENT 启蒙

【启蒙】是一个面对未来、年轻的色彩故事,唤起一个催眠的空间,将我们的心灵延伸到另一个界域,激发出我们重新开始想象的渴望。

灰与亮丽黄的配比,融合了智慧、经验以及我们想要前进,迈向新的思考方式与发掘新的深刻见解的渴望。

与此同时,银金属色的铅水晶则增添一丝闪烁的月夜光泽。

INTRIGUE 魅惑

【魅惑】是一个迷人的色彩百汇,拥抱各种影响因素的大融合。一方面流露奇特又强烈的个人主义风格,同时又显示一种大众化的吸引力。

其四季皆宜的持久性,在加入稳定可靠的 P灰与象征阳光的亮丽黄之后被突显出来。

ORBITAL 轨道

【轨道】反映了探索星际旅行的狂热,是在令人着迷的外太空星系中发现的闪烁着金属色调的调色板,能让人联想到遥远的星系。

SUN AND SHADOW 光影

【太阳与阴影】是一种永恒而无性别的色彩组合,描述着我们周围的原始之美。灰和亮丽黄为大地色系注入更多的希望和力量,将今年的双色年度色的特殊韵味发挥到。

除了这五组配色之外,Pantone 还推出了一系列灰+亮丽黄的色彩营销案例。

色彩营销案例

可以预见,在接下来的一年里,我们会更多地看到这些色彩,因为它们意味着对时代精神的内在定义,传达着消费者的期望与态度。

现在,咱们就先来康康这组能够引起全球共鸣色彩的无限可能吧!

时尚领域

Agatha Ruiz de la 2021SS

Prada 2021SS

Alice + Olivia 2021SS

友善、愉悦又乐观的亮丽黄,是一种年轻个性的色彩,明媚肆意,预示着阳光灿烂的一天即将到来,让人忍不住想要亲近。

把亮丽黄带入服饰中,可以给整个造型增加一种明亮感。

Alexander Mcqeen 2021SS

Brandon Maxwell 2021SS

灰有着洗净铅华的淡然与不争,它游离于所有颜色的边缘,却能与任何色彩作搭配。彰显着低调内敛的品质感和恰到好处的高级感。

Prada 2021SS

将灰与亮丽黄相结合,给低调耐看的灰加入一些明亮感,可以带来一种另类吸引力,传达出阳光与力量的讯息。

除了服饰之外,灰和亮丽黄还经常出现在围巾、鞋履、包袋、披肩等配饰上,产生一种夺目的搭配效果。

美妆领域

灰与亮丽黄是热色调与冷色调的混搭,运用在美妆领域可以营造戏剧化的风格。

家居装饰领域

灰与亮丽黄的组合,非常适合用来为家里任意一个房间的气氛定调,增添一丝阳光与正面的气息。

黄色往往作为家具家居上的提亮高光色,而灰色则会被设计成基底色,常出现在水泥家具或地板中的颜色。

将亮丽黄与灰并用在桌布、床单及家饰品包括枕头与桌上摆饰会带来生机与活力。

以灰做为扎实的基础,衬托吸引注意、强化直觉、活泼的亮丽黄,是位于家中或商业空间的任何办公室最理想的色彩组合,点亮通往开放心灵,寻找追求知识的欲望、原创力及丰富智谋的路径。

把大门涂上亮丽黄色,并在外侧加工时用上稳固可靠的灰,可以传达着温暖欢迎的讯息。

包装设计领域

将拥有最高可见度与反光度的亮丽黄搭配坚韧的灰,不论出现在何处都能引起注目。

结合友善的亮丽黄与默默令人安心的灰,应用在装置设计上,为可靠、智慧与经验的扎实基础,注入一股活力。

文章来源:腾讯网   作者:浪设计

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

仪表盘必须牢记的3个心理学要点

雪涛

开篇我们先说一下什么是仪表盘?

这个开头CC还是有点慌张的,毕竟用脚趾头想大家也应该都知道什么是仪表盘了,但是照顾新入行的小朋友以及走个过场CC还是要简单说一下。

史蒂芬·弗里(Stephen Few)在他的书中(《Information Dashboard Design》文末提供下载)说得最好:
“仪表板是实现一个或多个目标所需的最重要信息的可视化显示。整合并排列在单个屏幕上,因此可以一目了然地监控信息。”

| 图片源自Dribble  @Bhavna Kashyap



当下我们都感受到了信息化社会的巨大冲击,大多数行业都避免不了接触到信息可视化,仪表盘(dashboard)作为数据可视化的重要载体,已经成为了一个用来  呈现数据情报、处理关键情报 非常有用的展示方法。


CC作为一个混迹大厂多年的B端设计师,对于仪表盘的设计接触的是非常多的,B端设计中会有非常多的关于仪表盘的涉及,比如管理系统,数据分析系统,用来显示相关的可操作数据以及跟踪统计信息和关键绩效指标(KPI)等等。


| 图片源自Dribble  @Omer Erdogan



C端也越来越多的囊括到了数据可视化,比如健身软件中的数据变化展示,还有我们最常用的支付宝消费账单,年底被一年一度的消费王刷屏的时候想必大家都感受到数据可视化的魅力了。

CC在这两天对仪表盘进行了深刻的复盘,总结出了在设计当中会考虑到的几点需要我们牢记的用户心理学知识。



继续阅读吧~


|  用户渴望复杂性简化的信息显示


设计者在设计数据可视化过程中的,目的是创建一个有效的内容展示,这个内容如果会被读者很好地接受,那就能更好的利于用户理解。

那什么叫有效的内容展示呢?如果老师发了一沓书,说明天要考试,那你一定恨不得课代表发挥超强的学习能力把重点都划出来,明天就可以高枕无忧了。这就跟我们通常说的“干货”是一个意思, 实际的,有用的,智慧的结晶

用户的心理说白了就是我们的心理,讨厌繁琐的信息,喜欢务实的内容。

那是不是只要提炼重要的信息展示出来,就可以了呢?还是刚刚的例子,课代表帮我们把重点勾画出来很开心了,那如果课代表还给我们写了大纲,告诉我们明天老师可能会怎样出题,CC明天就给他买奶茶,这可真是个优秀的课代表。

同理,优秀的仪表盘除了一目了然地显示可操作信息和有用的信息、帮助涉众了解,还会为用户 展示总结信息,给出分析数据,提出关键见解

注意不仅仅展示信息数据,更要展示如何处理这些数据!
内容帮助用户思考:发生了什么变化?为什么会这样?将带来怎样的影响?


针对以上用户心理CC总结了关键要点:


1)增强对情况的认识-关键信息的重点显示

通过字体大小,层级变化,突出表现用户最为关注的重点内容,帮助用户提炼重点信息,淡化不必要的次要信息。
这是有效信息的第一步。



2)讲清楚一个故事

在基于展示当前基线信息的同时提供数据信息的 上下文,通过连接数据和业务去解决用户的疑问,最终用于为用户预测和规划未来。



以一个会员制网站后台管理为例,如果仪表盘上仅仅显示当日新增用户100人,用户会觉得不同寻常吗?
那如果采用趋势显示本月每日新增都在20-40人区间,今日突然激增100人,这就成功引起注意了,后续用户会思考当日进行了哪些操作引起了数据量的变化,后续的动作又要如何进行。迅速为用户提供促进产品优化的根据点。

这里印证了CC刚说的优秀内容帮助用户对三个问题的思考。
也是用户非常需要的有效信息。

3)减少短时记忆对用户的影响

短时记忆又称感觉记忆,保存时间短暂,如果信息得不到及时复述,大概只能保持15-20秒钟,对用户而言反复复述数据是很痛苦的一件事,所以对比表单和折线图,用户从折线图中记住起起落落比记住确切的数字要容易的多。


尽可能利用可视化图表信息代替表格信息,利用图标代替标签和标题。


|  过多信息会导致用户“分析瘫痪”-席克定律


仪表盘的作用并不是要提前显示所有内容。信息太多会导致页面臃肿,甚至会造成所谓的 “分 析瘫痪”,即过度分析的状态发生,用户将会非常难进行重点的聚焦,也很难抉择下一步操作,这点选择恐惧症的朋友们估计一说就懂了。

席克定律指出,人在面临选择越多的时候,所要消耗的时间成本就越高。

如果说这世界上出了第一款智能手机,那我们只需要思考买智能手机还是不买智能手机,但当市面上有了苹果,华为,Oppo一堆各式各样的智能机以后,我们需要花费很大的精力去思考买哪一款智能机。

同时认知心理学告诉我们, 人脑只能一次理解7+-2个图像,所以我们在设计的时候可以采用雅各布的 “渐进式公开原则”,逐步披露信息。预先显示最重要的数据点片段,并允许用户在需要的情况下进一步向下钻取。


针对以上用户心理CC总结了关键要点:


1)隐藏不必要的信息,提高选择效率

使用下拉菜单,折叠菜单,弹出窗口,滑出菜单等。




2)跨选项卡拆分数据,并将所有相关数据放在一个选项卡下

通过将信息分解为不同类别的区块,来减少用户的认知负担。当相关数据放在同一个选项卡下时,用户就很容易进行数据分析比对了。




3)钻取式信息披露

仪表盘提供了关键数据的概览信息,这样可以直观展示数据,减少信息短时记忆的负载。如果用户需要有关特定数据集的详细信息,可以选择向下钻取,得到更多的关联信息。




|  用户渴求对系统和信息的把控感


可控感是安全感的来源,想象一下如果我们身处于一个不可控的环境中比如陌生的城市,我们会感到不安,因为从物种进化的角度来看,不可控的环境无法给我们的潜意识带来做好应对危险的准备,只有在足够把控周围环境后,我们才会创造更好的生存机会。

仪表盘中的掌控感也是这样,没有仪表盘我们很难在某处看到汇总的系统分析数据,所以仪表盘也被很多人叫做控制台,作用在于通过一个主中台来帮助用户进行有效的信息跟踪和处理,提高对于系统整体了解情况的认知,对有可能发生的应急情况做出判断。

通过控制台,用户希望能获得更好的把控感。


针对以上用户心理CC总结了关键要点:


1)对于关键任务的及时预警通知,避免事到临头的手忙脚乱

比如管理系统中的内存管理,除了简单的展示剩余空间外我们还可以对使用量进行预警,通过高中低划分内存的使用率情况,起到提前预设应急计划的作用。




2)根据不同用户的不同需求制定细节规划

每个用户都有属于自己的掌控计划,有些用户可能需要能够看到更精细的数据视图,而有的用户只需进行概览即可。

场景也相同,针对不同场景制定不同的控制计划,有的用户场景下更关注具体数据有的则需要更关注趋势走向,贴合用户的使用心向更能迎合用户的把控欲望。

3)对界面的操作响应(信息)&(交互)

作为一个数据中台,仪 表盘上的所有数据都应该是可以交互的数据, 不要过多的干预用户的操作,让用户自由选择例如关注类型,时间范围,甚至图表展示形式,这点可以结合上一心理知识的“钻取”,用户在独立的自我意识中控制仪表盘的信息呈现能获得更自由的控制体验。


文章来源:站酷   作者:CC本人

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

三分钟搞懂,iPhone 12发布后的设计尺寸调整

雪涛

前言

距离iPhone 12系列发售已经有段时间。

之所以没第一时间撰文,是因为 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式发售。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

而在此之前,即便是Apple线下店也没有样机。

保险起见,我等接触到 Mini 和 Max 真机后,开始着手撰文。

一周前完成了文字部分,本周终于完成了几十张配图,这才和大家见面。

为了方便新同学更好的了解本文内容,我会简单提及一些关于适配的必要信息。

并附上往期内容的链接,方便延展翻阅。

本文约3200字,分以下六个部分:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

基本参数

在网络上搜索手机界面适配的相关内容。常会看到文中提及以下几个参数:比如屏幕分辨率(物理分辨率)、屏幕尺寸、PPI数值…

三分钟搞懂,iPhone 12发布后的设计尺寸调整

其实,在处理常见手机界面适配时,设计师只要关注以下3个基本参数:渲染像素(Pixel)、逻辑像素(Point)、 倍率(Scale)

三分钟搞懂,iPhone 12发布后的设计尺寸调整

渲染像素(Pixel)可以理解为是手机截屏时所得到的图片尺寸,单位是px;

逻辑像素(Point)可以理解为是程序员在用代码绘制页面时所用的尺寸,也被叫做“1倍图尺寸”。比如Sketch中对应的机型尺寸

三分钟搞懂,iPhone 12发布后的设计尺寸调整

对应的就是手机的逻辑像素尺寸。

倍率(Scale)因为逻辑像素和渲染像素存在着一定的比例关系,这种比例通常被称为倍率,比如切图后缀的@2x、@3x对应的就是倍率的数值。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

值得一提的是,倍率不一定是整数,比如三星GALAXY J2(540×960),倍率是@1.5x;

华为M3 Life 8.0”(1920×1200)的倍率则是@2.25x

两种适配

适配方式主要有两种:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

1. 倍率适配

主要应用在逻辑像素相同,但倍率不同的设备。

比如iPhone 11适配到 iPhone 11 Pro Max

三分钟搞懂,iPhone 12发布后的设计尺寸调整

两个适配的逻辑像素都是 414 x 896pt,但倍率不同,前者是@2x、后者是@3x。

2. 逻辑像素适配

这种适配方式应用在两个倍率相同,但逻辑像素不同的设备,

比如iPhone 11 到iPhone 8:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

两个设备的倍率都是@2x,逻辑像素则分别是:414 x 896pt 和 375 x 667pt。

如果两个设备的倍率和逻辑像素都不相同,比如iPhone 8 到 iPhone 11 Pro Max

三分钟搞懂,iPhone 12发布后的设计尺寸调整

那通常会先进行逻辑像素适配,再进行倍率适配。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

由于倍率适配相对简单,只需要考虑分割线和切图这两个因素。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

因此,设计师通常说的手机适配、尺寸适配常指逻辑像素适配。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

所以搞清楚iPhone有哪几种逻辑像素,就成了iPhone适配和验收的关键。

iPhone 12对设计的影响

在今年10月份发布的iPhone 12系列共有四部机型。

在谈新设备前,我们先简单回顾截止iPhone 11系列时,iPhone的几款主流机型及其对应的参数:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

通过图表可知,在iPhone 12发布前,市面上的iPhone共有6种不同的分辨率需要完成适配。

那么iPhone 12又带来哪些变化呢?

从官方给出的屏幕数据可知,四款设备的物理像素如下:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

由图可知,今年iPhone共新增了3种全新的屏幕尺寸。(其中iPhone 12和iPhone 12 Pro的物理分辨率相同,故合并看待)

但在设计层面,iPhone 12系列四款手机,只为设计师增加了1170×2532、1284×2778 两种新的设计尺寸。

画重点:目前有一些文章,错把iPhone 12 mini的屏幕参数1080×2340当做最终的绘图尺寸,认为12 mini的逻辑像素为360x780pt 。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

事实上iPhone 12 mini采用了iPhone X一样的渲染像素,即1125 x 2436px,对应的逻辑像素是375x812pt。

为了解释这个问题,得从大家比较熟悉的iPhone Plus系列手机说起。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

在前文提到,手机界面适配时,设计师只要关注:渲染像素(Pixel)、逻辑像素(Point) 以及倍率(Scale)这三个基本参数。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

而其中的渲染像素通常会和屏幕的物理像素保持一致,比如常见iPhone 8、iPhone XS、iPhone 11 Pro都是如此。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

这也导致大家很容易把物理像素和渲染像素混为一谈。

但既然说了是“通常会保持一致”,就总会有例外。

比如iPhone Plus系列,官方给出的屏幕参数(物理像素)是1080×1920,但渲染像素却是1242×2208。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

所以设计师在针对Plus系列做图的时候,就得按照1242×2208进行输出。

而新款iPhone 12 mini的情况和Plus系列一样:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

官方给出的物理像素尺寸是1080×2340 ,但拿到设备真机后,通过测量可知12 mini采用的渲染像素是1125×2436,这和iPhone X的渲染像素保持一致。

在明确这一点后,我们再看下iPhone 12系列设备的参数:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

如果我们只看逻辑像素,加上iPhone 12系列,目前iPhone 共有7种尺寸。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

这些尺寸都需要设计师留心,并完成相关机型的验收走查。

不过,到这里还没完。考虑到iPhone存在“标准”和“放大”两种模式的视图。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

还需要将放大模式的尺寸考虑在内。

目前各个设备的放大模式对应的适配三要素分别如下:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

其中320x693pt是全新的尺寸,出现在12 mini、12、12 Pro这三款设备中。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

由此,在把放大模式纳入适配考量范围后,iPhone的逻辑像素共统计出8种尺寸。

如果将其中最小尺寸和最大尺寸比较宽高的话,宽度相差了108pt、高度相差了358pt

三分钟搞懂,iPhone 12发布后的设计尺寸调整

对于那些横滑需要外露一部分的页面,需要重新设计尺寸或调整局部的适配方案。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

这对于一些单屏显示的页面而言,也是件麻烦事。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

iPhone市场占比变化

先思考一个问题,在下面几个尺寸的iPhone中,你觉得哪一种尺寸的iPhone在市面上占比最高?

在 iPhone 12发布之前,在iPhone这几种屏幕尺寸中,你觉得哪一种iPhone的市场占有率最大?

三分钟搞懂,iPhone 12发布后的设计尺寸调整

我相信绝大多数设计师,都会下意识觉得750×1334这个尺寸的机型占比最多。毕竟在过去很多年里,大家都是用这个尺寸在做图。

那实际情况究竟如何呢?

我们先看下阿里友盟今年05月01日的数据:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

PS:数据公司按设备的物理分辨率进行统计,而非渲染像素。所以这里的1920×1080对应的是Plus系列手机。

今年五月,国内iPhone占比最高的机型是Plus系列。而设计师钟爱的750×1334 和 1125×2436分别排在第二和第三。

其中排在第三的1125×2436(对应@2x的设计尺寸是750×1624)和前两者的占比仍有较大的差距。

那是不是随着时间的推移,1125×2436的机型占比会逐渐增大,并逐渐占据第一呢?

如果你也有同样的想法,恐怕又得失望了。

翻看5月份的iPhone增量数据,会发现一个有意思的情况:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

在增量中,828×1792(对应iPhone 11)增速以51.9%遥遥领先第二名的1125×2436。

下面,看下的11月统计的iPhone存量数据:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

828×1792已经从占比第四名上升到了第三名,

再看11月份的增量数据:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

828×1792的增速不减反增,从5月份的51.9%增加到了最近的63.8%

如果不考虑的iPhone 12系列,828×1792有望接替Plus系列,成为市场占比最大的iPhone尺寸。

在828×1792的设备飞速增长的同时,1125×2436这个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2%

iPhone 设计尺寸演变

三分钟搞懂,iPhone 12发布后的设计尺寸调整

过去设计师常用的设计师尺寸是750×1334,但随着iPhone进入全面屏时代,如果再把750×1334作为设计的基准尺寸显然已经不合时宜。

而目前常用的750×1624尺寸对应的机型(对应1125×2436在@2x下的尺寸)无论在存量市场中的占比,还是增量市场中的占比都少的可怜。

而新发售的iPhone 12系列中,也只有12 mini采用了1125×2436作为渲染像素的尺寸。而其余三款,采用全新的渲染像素和逻辑像素。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

很难想象1125×2436这个尺寸的设备,还能和过去的750×1334尺寸一样,成为iPhone主流的分辨率尺寸……

设计基准尺寸的选择,除了要看设备的占有率,还要兼顾适配的成本。比如,当有大中小三种尺寸的设备需要设计时,优选中间尺寸作为基准尺寸。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

以中间尺寸为基准,无论是适配到小尺寸、还是适配到大尺寸,界面的调整幅度都是最小的,偏差不会太大。

反之,如果选择小或大作为基准,或许页面适配到中间尺寸时感觉还行,但适配到另一侧相对极端的尺寸时,则容易出问题。

新,设计基准

界面设计师所用的绘图基准尺寸并非一成不变。回看过去:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

设计师用的基准尺寸已经从最初的640×960、变成640×1136、再到750×1334,以及现在的750×1624,已经变化了4次。设计师几乎每隔两年就会随着新iPhone的发布调整一次设计尺寸。如今随着iPhone 12的发布,加上750×1624对应机型在市场中占比的低迷,我们可以重新思考在iPhone众多尺寸中,哪一款更适合作为设计的基准尺寸。

这里先不考虑设计师对尺寸的惯性依赖,只思考适配兼容性和市场占有率这两方面。适配兼容性,按照“大中小”优选中间尺寸这一原则。我们可以很容易的在目前8种iPhone的尺寸(指逻辑像素)中选出位于中间的尺寸:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

分别是 375x812pt 以及390x844pt,前者对应1125x2436px ,后者则对应1170x2532px,如果进一步将其转换成大家熟悉的@2x尺寸,则分别对应:750×1624和780×1688

三分钟搞懂,iPhone 12发布后的设计尺寸调整

在市场占有率层面,随着Apple逐渐停售之前的设备,新款iPhone的分辨率占领市场只是时间问题。而在新设备中,只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px(375x812pt,对应@2x下尺寸750x1624px)。如果按照此前的经验推算,iPhone 12(1170×2532)接替iPhone 11(828×1792)成为最热卖且占比最高的设备只是时间问题。

截止iPhone 12发布为止,显然 390x844pt (对应@2x下尺寸780x1688px)更适合作为今后的设计基准尺寸。

文章来源:优设   作者:海边来的设计师


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

复杂UI界面的8个核心设计法则

雪涛

复杂应用大多情况下是偏专业和B端的一些UI界面,它们大多出现在桌面端使用环境,并且终端用户类型多样,涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章,来自UX设计领域的存在NNGroup,作者为凯特·卡普兰。

到底什么是复杂应用?

我们之前将「复杂应用」界定为特定专业领域当中,需要经过广泛培训之后使用的,有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象,不过这么说你可能会 更容易理解:从科学研究到专业人员,诸如金融分析师,它们常用的那些专业软件应用。这类应用通常有着这些特点:

  • 为有专业知识和训练有素的用户提供支持
  • 帮助用户浏览、管理大型数据库,并提供高级的数据分析和处理的功能
  • 通过可变和多样的基础任务功能来解决问题或者达成目标
  • 需要在多个角色、工具、平台之间进行协作或者切换
  • 可以用来减轻高影响力/高价值任务的风险,降低损失

尽管不同的复杂应用之间差异很大,但是他们的共同点是,专业的从业人员对于这类工具有着极强的依赖性。

考虑到设计师和开发者在面对这类工具的时候的挑战,我梳理总结了 8 个复杂应用的设计原则和指南。

1、采用边做边学的用户流程

很多研究表明,对于复杂的应用和工具,用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。

与大量的教程、文档、帮助和设置说明相比,能够立刻开始的任务和项目,对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。

虽然在专业领域当中,倚靠摸索和试错学习是不恰当也不安全的,但是一定程度的边做边学是必须的,因为不可能在培训和手册当中涵盖所有的使用场景。

所以,在设计的时候应该提供「跳过教程」的直接上手的偏好设置,同时进行相应的安全性设置,避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作,让控制面板实时显示操作结果或者预览结果,这样用户无需执行全部操作就可以知道大概的结果。

团队出品:复杂UI界面的8个核心设计法则

在 Salesforce 控制面板当中,就可以实时预览面板编辑的效果。

2、为用户提供有效的方法和建议

绝大多数用户都不是进阶的专家级用户,他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后,通常不会主动做出改变,而这在日积月累之后导致大量的时间浪费,效率低下。

值得一提的是,这个时候依赖冗长的文档和教程其实很难达成效果,更合理的方式是结合用户所处的上下文环境,通过界面工具提示的方式,适时地告知用户「有更方便的方法」。

通常,可以使用悬停提示,或者是弹出式工具提示来实现这一功能。

团队出品:复杂UI界面的8个核心设计法则

ArcMap 是一款地理信息系统类工具,它通常会通过上下文环境下的信息引导,来帮助用户了解技巧。

3、提供灵活而流畅的功能路径

复杂的应用程序,通常会有很多功能是分散的而非线性的,不同的功能组合起来可以实现特定的功能。在这类工具当中,用户日常可能也不是很确切知道最终的目标是什么,而需要通过数据分析来逐步推进,同时,在知道确切目标的情况下,也应该可以遵循不同的路径灵活地达成目标。

设计师这些应用的时候,设计师应该避免使用固定、唯一、 僵化的实现路径,迫使用户必循严格按照某一固定路径来做事情。一方面,允许用户跳过某个步骤,或者回滚到更早的路径,另一方面,允许用户遵循不同的方式和路径来达成目标。

团队出品:复杂UI界面的8个核心设计法则

比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。

4、 帮助用户跟踪行为和思考过程

复杂的任务,通常意味着它需要很多步骤,不同的环节,而在实际的应用场景中,某个分析步骤耗费几个小时甚至几天,都是有可能的。在高度复杂的现实生活中,某个步骤可能会换人接手,可能会因为硬件、 网络等问题而暂停甚至丢失,这也意味着「可追溯性」是很重要的。

所以,在这样的复杂应用当中,应该允许用户在使用过程中,可以便捷清晰地记录、保存、 导出内容和记录,允许用户中断,中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。

团队出品:复杂UI界面的8个核心设计法则

在决策建模软件TreeAge 当中,用户可以在分析和建模过程中进行开放式的注释,可以后续在底部快速访问这些笔记。

5、可以协调多工具并且在工作空间之间转换

复杂的应用通常还会面临一个状况,就是工具本身的不足,用户需要在多个工作空间上使用工具和内容的时候,它需要具备切换的功能。对于不具备的功能,应用程序应该允许使用第三方的应用来作为补充。

比如当软件不支持某个操作的时候,应该允许用户从线上的其他数据库中获取并导出数据来使用,可以依托外部文档作为支持,允许用户在应用中做注释和评论。

减轻工作负担的一个要点,是尽量使用通用的API、接口和标准,尽量兼容行业标准软件,比如 Excel、Powerpoint ,尽量使用标准格式,等等。

团队出品:复杂UI界面的8个核心设计法则

微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能,非常方便

6、减少混乱而不影响功能

复杂应用通常旨在保持泛用性。使用场景多样,多种不同的功能,一家汽车生产厂家,可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是,这种泛用性的另外一面,就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户,而后者用到的功能很小概率会被基础用户用到。

所以,设计者需要在不降低功能性的情况下,基于应用场景、 用户需求来进行简化和优化,在保持功能完整易用的前提之下,降低复杂度和混乱度。

分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后,再呈现特定功能,是有效的设计方法。

团队出品:复杂UI界面的8个核心设计法则

7、主次信息之间要能平稳过渡

即使降低了混乱度,在复杂应用当中,信息量可能依然是过载的。通常,对于这种情况可以通过区分信息层级的主次来进行快速的区分,不过,从交互上来说,这可能依然不够。

对于诸如控制面板一样的界面,用户可能需要时刻查看面板上的信息,需要了解次级信息但是又不能离开界面,这就体现出主次信息之间的过渡呈现的重要性了。

一般而言,使用类似与悬停显示的方式,能够比较柔和地将次级信息呈现出来,允许用户查看详细的定量数据。下面这个案例当中就是,悬停显示更多次级信息。

团队出品:复杂UI界面的8个核心设计法则

8、在视觉上突出关键信息

复杂应用通常在界面上包含由大量的信息,而这个时候关键性的数据如果不在视觉上做突出显示,会被用户错过。通过视觉区分、提示警报的方式,让用户及时注意到,才有可能规避可能存在的问题。

值得注意的是,让关键信息和元素凸显的方式,并不一定非得是使用鲜艳的色彩和较粗的字体,简单的放大呈现,使用图形化的元素辅助提示,或者是提供足够的留白都可以达到目的,就像下面的案例一样:

团队出品:复杂UI界面的8个核心设计法则

结论

复杂的应用多种多样,支持的服务和功能也千差万别,但是无论如何呈现,此类复杂应用的设计都是非常挑战设计师的设计功底的,需要设计师了解业务,了解用户,并且能够通过设计更好地提供服务。

文章来源:优设   作者:Kate Kaplan

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

如何设计出合理的下单流程?

雪涛

随着网购成为了人们购买东西的第一选择,各大平台的竞争也逐渐转移到了提升用户体验感的身上。不管购买什么东西,最终都要经历下单这一流程。一个合理的下单流程,往往可以让消费者体验流畅,从而提升对平台的好感度,进而愿意长期的使用。

这是个非常值得研究的内容,最近我在优化商城下单流程的过程中,遇到了许多问题,通过不断地探究,也对整个模块有了更深刻的理解,希望通过总结能给大家带来一些启发。

下面将从目标的提出,结合案例的解说,并最终推到出结论的方式讲解。

作为漏斗模型的最终收口的购买步骤,是购买转化的关键。

但往往有些产品由于对流程没有系统深刻的理解,会有很多迷惑的操作,使得下单的流程相当混乱。我也曾经经历过类似的购物情景,经过一轮谜之操作后,我终于下完单了,但过后会担心刚才买的东西有没出错。

关于流程的优化我们遵循的原则是:先让流程合理了,再提高用户每步操作的效率。

怎么理解合理,必须解决以下两个问题,整个下单流程涉及到哪些步骤?步骤之间有什么逻辑关系?

我们需要洞悉到流程之间是如何串连,信息是如何层层递进并最终达成目的。因为只有每环节解决了对应的问题,流转到下一环节才能更省心。才能避免信息的反复确认,影响操作的效率甚至引发出错。

可以拆分成三个维度考量,第一是页面布局的重点突出的提效,第二是信息展示直观的提效;第三是交互操作简化的提效。清晰的页面信息传达能让用户清楚并了解自己的操作结果,并快速做出决策。

一、下单流程的拆分和排序

下单流程按需要提交的信息进行拆分,一般下单需要先确定商品(一切影响商品价格的因素的确定,如规格);其次是订单信息的确认(不影响商品价格,是订单层面信息的确认,如收货人,备注等),而后是订单支付,支付方式的确认。

最后是订单进度的跟踪。这里列出的每一步前提都是上一步内容的确定。只有这样才能做到环环相扣,并且信息流转。

二、第一步:确定商品信息

你是否遇到过在逛商城时看到某个服务,想购买时,进入的详情页却没有价格,然后需要你点击咨询客服,打开了一个咨询窗口

卖东西不标价,你卖个寂寞吗?

作为用户的我难免会有浪费老子时间的负面情绪出来,撇开一些特殊情况说,一个详情最重要的两个要素是商品信息和商品价格。因为了解商品的目的是购买,购买的决策需要价格的支撑。

这是一对不可分离的组合,没有价格的商品陈列和没有目标指向的价格都是没有意义的。

那么总结一下:商品详情必备的两个信息:

1. 元素展示的顺序

满足了必备元素展示后,我们还要考虑元素的放置位置,首先是突出重要的元素,其次是浏览顺序符合用户场景。这样才能真正做到提高下单效率,我们来看看下面这个例子:

京东的商品详情作为购物电商商品详情的代表来说一下,可以看到视觉浏览路径是非常流畅的,明确的实觉引导和操作指引,先看价格,再选规格,而后点击购买。

权大师的商品详情虽然页面中这重要元素都非常醒目,但它却没有让用户的决策提效,我猜测费用总计为什么放在这个位置,是希望用户直观看到选择不同的服务项目对应的收费的变化。

可是也忽略了金额作为重要的元素,当用户进入详情需要第一样看到,导致浏览路径有点绕圈圈。

携程的详情可以说是权大师的一个优化,同样的考虑,头部不仅展示了重要的价格和商品信息,给到用户购买的预期。在规格选择后,预定按钮旁边还展示商品的总价。减少用户来回查看金额的不便。

2. 规格的展示

在购物中,选择商品或者服务的规格是一个常见的操作流程,选择规格的目的有:

  1. 确定商品的规格是否在你的要求范围内(比如你想买的是红色的 iphone 12,要看一下有没有红色这个规格的选择);
  2. 确定对应规格是否有库存;
  3. 确定是否还有其他增值选项,比如购买保险,分期支付等;
  4. 确认购买数量等。

以上几个选项,根据不同的业务会有不一样的描述,不过可以概括两个内容,一是影响能不能买,二是能买的话不同规格的选择怎么影响商品价格。

图像化选项,比如颜色外形等规格有图像的描述就更加直观。如果换成文字的话,用户的生活经验会影响对文字解读的结果。

数值化选项,这样不需要选中再查看总价来判断金额的变动情况。很方便地不同选项的价格,方便对比然后选择。

通常门票或者酒店的规格选择会用上面这种方式展示,同样的道理,把不同项目的价格列出来,让项目之间的对比更直观。

3. 变化可见

下图的例子中参考身高这一项规格说一下,身高的规格本来就是有规律的,比如从矮到高,或者从高到矮。

如果我选择红色规格衣服,身高规格最后两项灰掉了,这时就算我不看具体身高规格是多少,也大概知道红色衣服身高最高的规格没货了。

这时,我想找一个有170cm身高的衣服,我就会不断切换颜色规格,用视线的余光去看什么时候170cm的规格亮起来。规格的展示通过位置和内容的支撑,能让用户更快速找到变化的差异。

三、第二步:确认订单信息

不影响商品价格,是订单层面信息的确认,如收货人、备注等。

第一步说的是商品信息的确认,这一步是订单信息的确认,这两个维度怎么理解呢?

举个例子:比如你到商场买东西,你首选是挑选好要买的商品放到购物篮里,再到结算台支付。

这时候你是有个比较清晰购物列表在脑海中的,因为在挑选时候已经经过判断,我拿了一个薄荷味的牙膏,还拿了一个潘婷的洗发水。现在只需要把这些给到收银员,她再确认一次就可以了。

但试想如果在你的结算的时候,有个小孩把你购物篮的东西搅乱了,放了一些别的商品或者拿走了其中的一些商品,你在收银台这里就会变得十分混乱。我又得重新确认一下自己要买的东西是什么。

订单的确认是建立在商品的确认上的,而且步骤之间本来就存在了递进的关系。先确认能不能买,再考虑能买的话收货人等订单的信息。在这一步,确认的信息尽量不影响商品的单价。

淘宝这个例子的话,订单确认的页面需要确认收货人信息、数量、配送方式、运费险等,这几个元素都不影响商品单价的,都是订单层面的信息确认。这就符合前面所说的,页面信息层层递进,减少相同信息反复确认的原则。

飞猪买门票这个流程中,从详情页到规格选择到订单确认,门票类型始终可以选择,到最后填写订单了,还是可以选择不同的票种。

这操作有点迷惑,前面都告诉我了当前选择了成人票,到最后还告诉我,你还可以选择要一张学生票噢。最后确认下单信息要把商品信息再确认一次,这就是影响下单效率的表现。

四、第三步:确认支付

支付的确认也有两个重要的元素,金额和支付方式的选择。

但也有的商城也会做成下面右图,在订单确认页面把支付方式也一并选择了。

表面上简化了步骤,但由于不同步骤确认的突出的信息是不一样的,如果我选择支付,那在支付前我必定会关注金额。所以右图这样就没法让突出重要信息,需要费劲地找一下金额是多少。

五、第四步:跟踪订单进度

订单的详情页里包含的信息有:商品的信息、订单的信息、支付的信息、订单进度的信息。这个环节,订单的进度信息无疑是重点。

对信息展示优先级排序为:订单进度信息 > 商品信息 > 支付信息 > 订单信息,淘宝的订单详情按重要程度自上而下排列:

有的商城甚至会把一些权重低的信息收起来,如订单信息、支付信息。想查看时候可以点击查看更多信息,这样做的好处是能让界面整体更清爽,降低页面的复杂程度,那么对重点信息的抓取就更快速了。

对订单办理的进度展示优化,我认为淘宝可以说是个经典的案例:

  • v1.0 物流只是通过文字去描述物流的信息,这时候我只知道包裹到了哪;
  • v2.0 出现了地图的展示方式,我能通过地图上的货车位置判断包裹离我多近;
  • v3.0 在地图的基础上加了预计到达日期的显示,让整个订单的时间进度更;
  • v4.0 在我的页面提供物流信息快速查看入口,方便用户查看订单进度;
  • v5.0 在外置的快速查看物流入口,提供了更丰富的查询维度,比如“派送中”、“待取件”等用户在物流派送结尾更加关心的节点筛选。

以上改动都是让订单进度掌控的体感更加丰满的过程:

以上进度展示的关键点可以概括为:当前进度、整体流程、完成的预期。有了以上三点,用户对于整个进度的才能有一个清晰的把握。

六、总结

在订单流程设计各环节中,如果我们明白每一步的操作的目的,提炼出关键点。那在优化中就能更加得心应手。如果发现本文有什么逻辑的错误,欢迎大家指正,一起进步。

下面附上本文的知识目录:



文章来源:人人都是产品经理   作者:
小圈学产品


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档