首页

UI设计师必须要掌握的十项排版原则

前端达人

当我们合理的运用好文字排版时,它可以增强界面内的可用性,可读性,可访问性和层次结构



转自:站酷.         作者:丝绒Store

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




设计师如何做竞品分析

前端达人

孙子兵法有云:知己知彼,百战不殆。知天知地,胜乃不穷。

“知己知彼”说明了解自己和竞争对手的重要性,“知天知地”则强调了了解行业竞争环境的重要性。能通过竞品分析达到知己知彼、知天知地,是设计师的必备技能。


什么是竞品分析

竞品分析是对市场上存在直接或间接竞争关系的优质产品,进行分类、组织、对比、刨析,总结竞品、以及自己产品的优势和不足,为下一步决策提供帮助。竞品分析维度包含但不限于市场调研、盈利模式、战略定位、产品功能、交互流程、页面框架、视觉表现、文案内容、运营方式等。

竞品分析和市场分析、产品分析、产品体验分析的关系如下:


竞品分析的作用

对设计师来说,竞品分析在了解行业现状、熟悉功能、了解竞争对手、了解用户习惯、明确自己产品定位等方面都有帮助,具体如下:

竞品分析有这么多好处,那么设计师该如何做竞品分析?


设计师如何做竞品分析


1.明确竞品分析的目标

做竞品分析前最重要的是要明确竞品分析的目标。明确竞品分析目标的前提是要“知己”。

“知己”即了解自己产品处在哪一个阶段,有什么问题,接下来打算怎么做或达成什么目标。然后根据产品当前问题确认“要通过本次竞品分析获得什么?”。竞品分析一定是为自己的产品服务的,是通过了解竞品来达成自己产品的某种目的。不能盲目地为分析而分析。


大多数工作流程中,设计师进行竞品分析一般有以下几种场景:

场景一:在产品需求确认之前,通过竞品分析对某功能进行调研,了解行业中该功能的具体设计。

如设计师了解到产品计划对帖子详情页面进行改版,产品需求还没确认。此时进行竞品分析的目的可以是:了解竞品帖子详情页面的设计共有哪几类表达方式,每一类表达方式的优缺点各是什么。


场景二:.在产品需求确认之后,通过分析产品需求,推导出设计目标。此时竞品分析是为产出能满足设计目标的方案服务的。

如产品的设计需求是“提高帖子详情页的点赞数、留言数、评论回复数”。此时推导出的设计目标可能是“营造详情页互动氛围、提高回复评论的效率、减少操作步骤”,对应的竞品分析目的可以是“总结竞品营造社区互动氛围、提高活跃度的方式。掌握竞品回复评论功能中操作步骤少、效率高的设计方式及总结背后原因。”


场景三:产品大改版、重新设计,或者孵化新产品时,通过竞品分析对行业内的产品有一个整体的了解,从而得出自身产品的差异化定位。此时竞品分析的维度会更多元:可以从用户体验的5个要素逐级进行分析,或使用SWOT分析、波士顿矩阵分析等。


场景四:竞品的动态跟进,主要是跟进竞品的迭代情况,以保持长期的“知彼”状态。可以定期(如2周或一个月)对竞品迭代信息进行一次整理。App Store或七麦数据等网站可以查到竞品每个版本的迭代内容。


2.选择合适的竞品

竞品可以选择直接竞品或间接竞品。直接竞品指市场环境、商业模式、目标用户、产品功能都相似的产品。间接竞品可以是市场环境和目标用户相似,但商业模式和产品功能当前不同、未来可能相同的产品。如果只对产品交互流程、页面框架、视觉表现等进行分析,还可以选取功能相似,或者目标用户相似,用户体验好的产品进行分析。

建议通过易观千帆、七麦数据、App Annie等平台了解竞品的数据情况,选取数据排名靠前的产品进行分析。


3.了解竞品定位、盈利方式、用户画像

了解竞品的定位、公司战略、盈利方式和用户画像,有利于我们理解竞品功能的背后的逻辑,利于我们分析竞品为什么设计成这样。竞品分析不只是分析表面看到的功能,还要分析更深层次的原因。

1.了解竞品定位、公司战略途径有:竞品官网、维基百科、拉勾网、天眼查、IT桔子 、Questmobile、App Annie等

2.了解盈利方式的途径有:36 氪

2.了解竞品用户画像的方式有:竞品官网、移动观象台、百度指数、艾瑞咨询等网站。


4.选择合适的竞品分析方法

竞品分析的目的不同,选用的竞品分析方法也不同。以下介绍几种常用的竞品分析方法:


竞品画布

竞品画布是一个简易的竞品分析模板,用一页纸包含了竞品分析的9大问题,如下图。

适用条件:

1.竞品画布可以用在竞品分析之初,用来梳理竞品分析的思路,是竞品报告的MVP(最小可用产品)2.竞品画布包含竞品分析的6个关键步骤,可以让新手快速上手竞品分析。

操作步骤

按照竞品画布模板上的问题依次的分析解答。竞品画布中包含了SWOT分析,注意优势、劣势是对产品或公司内部的分析,而机会和威胁是对外部环境的分析。另外,在分析第3点分析维度时,建议结合分析目标说明选择这些方式的理由。

优点:竞品画布相对其他方法来说视角更全面,可以结合其他分析方法一起使用。

缺点:对UI/UE来说,针对性不够强。


矩阵分析法

矩阵分析法又称知觉图,主要是通过二维矩阵分析2个关键要素,以了解自己和产品的定位及竞争优势。

适用条件:

  1. 矩阵分析法主要用来帮助产品做2个关键要素方面的定位决策。如自营电商平台可用矩阵分析法来决策平台定位是售卖高价格、优质的商品平台(如寺库),还是售卖超低价格、质量一般的商品的平台(如拼多多)。以及帮助产品评估自己的竞争优势,判断产品是否需要重新定位。

  2. 设计师还可以用矩阵分析法分析竞品的视觉风格,以辅助定位自身产品的视觉风格。如下图为视频app logo风格的矩阵分析

操作步骤:

(1)确定两个关键竞争要素。这两个竞争要素应该是用户最会关注、会影响用户决策的关键属性,如价格和配置。

如果是设计师用矩阵分析法来分析竞品视觉风格,可选取两对意思相反,对视觉风格有较大影响的关键词。如严肃—活泼、扁平—拟物

(2)绘制横纵坐标轴,把两个对关键竞争要素作为横坐标和纵坐标填入。

(3)针对竞品关键竞争要素的表现,把竞品放到4个象限的对应位置。并思考自身产品在4个象限中的位置。4个象限的空白区域可能存在机会,而4个象限中竞品较多的区域,用户群可能更广泛,也意味同类公司更多。

优点:矩阵分析法的优点在于聚焦于关键的两个要素,可以直观的表现出用户对自身产品和竞品在关键要素方面的认知。

缺点:矩阵分析法的缺点是只能从两个要素进行分析。如果要分析多个因素,可以使用雷达图分析法。


雷达图分析法

雷达图分析法本身是对企业经营情况进行系统分析的一种有效方法。我们可以将它运用到互联网产品用户体验分析上,用图示化的方式对竞品多个维度的优势、劣势作出直观的展示。下图为对母婴类产品拍大肚照上传功能进行的雷达图分析:

适用条件:

分析竞品多个维度的优势、劣势(一般选6个维度分析)。

操作步骤:

(1)定义分析维度

定义分析维度主要是确认从哪几个角度分析具体功能,如选择可用性、防错设计、易懂、一致性等。分析维度的选取也可以参考尼尔森的十大可用性原则,具体选取什么维度应根据分析的功能来定。

(2)对竞品的每个维度进行打分

定义好分析的维度后,我们依次对竞品的每个维度的表现情况进行打分评估,每个维度满分为100分。

优点:雷达图分析法的优点是相对直观、可以分析多个维度的优势,劣势。

缺点:雷达图包含多个维度,每个维度的满分和量级指标是不一样的。需要分析者心中对每一个维度的满分有个大致预期。如流畅度怎么样算90分,怎么样算80分?有可能同一个产品A同学认为流畅度80分,B同学认为流畅度90分,因此分析可能带有一定的主观性。


表格法

表格法主要是用表格来统计竞品功能元素的有无。

适用条件:

1.当我们想较为全面的了解一个功能的概况,或较为宏观的把握竞品的现状,可使用表格法。2.当我们思考某个功能元素是否需要保留,可使用表格法分析竞品的做法。

操作步骤:

(1)画出一个N行M列的表格,首列填入功能元素的具体名称,首行填入竞品的具体名称。

(2)对每一个竞品的具体功能元素进行统计,若某元素存在则在表格上对应位置打勾,不存在则空着。

(3)进行分析小结。

如果某一列功能元素所有竞品都打了勾,则说明该功能元素竞品都有,是个普遍元素,优先级可能较高。如果某个功能元素是某个竞品独有的,则可能是该竞品的差异化功能,可能是竞品的特色。使用该方法时要注意:即使是其他竞品都有的功能,自身产品也不一定要有,最终自身产品功能元素如何定,要根据需求来分析,不可盲目照搬。

优点:表格法的优点在于可以清晰展示功能细节的有无。

缺点:如果页面元素过多会显得杂乱,且表格中没有显示元素的优先级。


多级功能表格比较法

适用条件:当产品功能较复杂,要统计竞品功能元素、全面了解竞品概括,可用该方法。

操作步骤:在表格法的基础上,将功能点拆解成一级功能、二级功能、三级功能,再进行比较分析和总结。具体形式如下图:

优点:可以清晰的展示一级功能、二级功能、以及功能的子级。

缺点:如果层级太多,或者元素太多表格会比较庞大杂乱。


用户路径分析法

用户路径分析主要是把自己假想成用户,体验用户操作某软件中某功能流程,并记录过程。如下图是对亲宝宝拍摄照片用户路径分析:


适用条件:适用于要分析某一个功能的具体交互流程。

操作步骤:

(1)把自己想成小白用户,给自己布置一个小任务,并用竞品软件操作,完成这个任务,如完成上传照片。

(2)操作时按照:发现入口—了解功能—操作上传—跟进操作反馈的步骤进行。

(3)记录自己在体验功能时的感受,如哪一个步骤觉得疑惑,哪一个步骤觉得爽。

(4)梳理一下该功能的用户路径,看看产品设置的路径中有哪些是自己在体验时主要操作的,它们是不是该功能的主要路径?哪些是自己体验过程中忽略的,是竞品有意弱化或者其他,并总结结论。

优点:专注于操作流程中的细微体验,聚焦于发现体验问题。

缺点:自己的操作习惯不一定完全代表用户的操作习惯,带有一定主观性。


产品视觉表达分析法

产品视觉表达分析指对竞品某个模块的页面表达元素进行拆解分析,并总结每种表达方式体现的内容优先级和规律。

适用条件:适用于设计师横向分析某个功能模块的表达方式,及掌握每种表达方式的适用场景。

操作步骤

(1)将选择竞品具体模块功能进行截图并对比。

(2)提取每个模块的表达元素,并在截图的下方用色块表达提取的元素。

(3)总结共有几种表达方式,每种表达方式的突出对象是什么、适用条件如何、视觉优先级如何。下图为母婴类产品问答功能视觉表达分析。

优点:可以聚焦于单模块的表达方式分析。

缺点:不适用于流程的纵向对比。


5Why分析法

5Why分析法又称5问法,即看到一个现象不断的去问“为什么”来寻找根本原因,以找出解决某个问题治本对策的方法。该方法最初由丰田公司提出并在丰田公司广泛采用。

适用条件:

适用于深挖某个功能表现背后的根本原因。也适用于帮助我们在做竞品分析时养成透过现象看本质的思维习惯。

操作步骤:

(1)把握现状。主要是为了确认问题,调查基本的表现、数据情况等。

(2)原因调查。针对明确的问题,探究背后原因。找到浅层次的原因后,再问为什么,找更深层次的原因,问5次为什么。原因调查过程中要注意:一定要以事实为依据去探究背后原因,不可主观臆想。另外,5why分析法也不一定都要问满5个为什么,重要的是通过多次提问探究到根本原因。

(3)实时措施,纠正问题

(4)吸取教训,从源头上预防错误再发生

5Why分析法用到竞品分析上,重点是在前2步,即把握问题和原因调查。我们不一定要完成5Why分析法的所有步骤,但我们要有问“为什么”的意识,不断的问自己竞品这么做的目的和原因。

优点:聚焦现象背后深层原因,利于我们培养透过现象看本质的思维。



用户体验5要素分析法

用户体验5要素分析指从战略层、范围层、结构层、框架层、表现层5个层级,逐级的去分析。

适用条件:适用于要全面系统地了解某个产品时,对该产品进行全局分析。

操作步骤:

可以按照用户体验要素的5个层级从上到下分析,或从下到上分析。每个层级的分析可以使用不同的分析方法,在此不赘述。需要注意的是使用该方法分析时要避免追求大而全,建议站在竞品分析目的角度,分析时有一定倾向性。

优点:分析较全面,对产品理解会比较深入。

缺点:要真正执行并好不容易,需要对用户体验的5个要素有比较深的理解。


以上就是设计师常用的竞品分析方法的解析说明,我们要根据分析目的灵活选择方法。各方法的对比如下图:


5.了解竞品的用户反馈

除了对竞品进行分析,我们还要关注竞品的用户反馈,了解竞品用户在使用产品过程中遇到的问题,了解用户觉得竞品好在哪里。要对竞品的问题进行规避,对好的使用体验进行分析并学习借鉴。

可以通过网站 https://appbot.co/ 查找App store上的用户反馈。如下图为亲宝宝产品的用户反馈:


6.总结竞品分析结论

不论使用哪一种分析方法,分析完之后都应输出分析小结。在所有分析结束之后,还要输出整体的分析结论。结论可以由定性或者定量分析得出,可以既包含客观分析的结论又包含主观分析的结论。

客观分析的结论如行业市场布局情况、竞品数据情况、界面操作反馈、产品包含的功能点(普遍功能、特色功能、实现程度如何)等。主观分析的结论如竞品的可用性、易用性、操作体验等。



总结

竞品分析是通过分析竞品,得出要解决的问题的结论过程。所以,了解自身产品当前处在哪个阶段,有什么问题相当重要。通过当前问题推导竞品分析目标,再跟进竞品分析目标灵活运用分析方法。竞品分析方法可以有很多,但确认好分析目标才是关键。


参考文献:

《有效竞品分析:好产品必备的竞品分析方法论》——作者:张在旺

《步步为赢 交互设计全流程解析》——作者:董尚昊

《电商类APP:商品卡片竞品分析》——作者:白鹭漫谈




转自:站酷

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

2021最值得期待UI风格 - 玻璃拟态全面解析

前端达人

通过这篇文章,你将全面了解2021UI趋势中最热门的Glassmorphism风格


转自:站酷

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

从零开始!灰大带你画图标

前端达人

图标在UI设计体系中,是重要......



(此处省略1000字)




直接上图!


上图是我以前绘制的一套图标作品,

感兴趣的话就一起来了解一下我平时是怎么创作一套图标的吧~




制作过程


1、搜集+临摹+原创


积累素材是设计师必备的“基本功”,同时也是“职业病”。

平时我会有意识的在速写本上绘制一些简易的图标,如果在一些APP中看到比较好的图标,我也会临摹下来。




下面给大家随机展示一些我平时绘制的图标。





除了绘制图标以外,我平时也喜欢绘制一些其他的图案。





2、反复打磨


将绘制好的图标利用电脑矢量化后打印出来,根据打印稿用笔标记出不合理的地方,比如:线条太粗了,重心不稳.......对不合理的地方进行反复修改,再次打印,再修改,循环多次后直到得到自己满意的效果,最后定稿。



下面这幅手绘图就是文章一开始给大家展示的图标成品的手绘最终稿了。






需要强调的是,这一次图标的绘制,有一个特殊的地方,其中一个图标是有实物的。(左:实物图;右:对应图标)




3、图标插件化


最后,将图标上传阿里的iconfont网站,制作成字体图标





然后将字体图标做成插件(我演示的是ps插件,也可以做成其它xd/sketch/figma插件)





制作过程就是给每个图标赋予关键字,然后利用正则表达式,可以方便的搜索所有图标。



不过这个步骤我就不详细解释了,因为



转自:站酷

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

我们怎样理解暗黑模式

雪涛

/引言

“由理有剧”系列以”我们怎样理解暗黑模式“为开篇,缘由作者正在任职的工作是 TO B 产品交互及界面设计,入职时正值公司整体产品线升级迭代,用户界面从浅色模式向暗黑模式探索的阶段。这个探索阶段面临的本质问题便是“到底什么是暗黑模式”,同时“我们为什么要用暗黑模式”的问题也随之而来。

为了给公司同事阐述这两个问题,作者搜集了大量资料,翻阅了相关产品系统所给出的设计文档,重点围绕“什么是暗黑模式”展开,逐步推敲其中的理论原理,总结出便于理解的文字内容。这样做的目的简单有二,一是与产品、开发、测试方面的同事能够达成向暗黑模式优化升级的共识;二是能够让我们的各个产品线更从容地去拥抱暗黑模式的到来。



/“由理有剧”系列篇01:我们怎样理解暗黑模式


文章大纲

1、是什么?

2、为什么?


一、是什么?



随着 iOS 13 和 Android 10 的正式发布,“暗黑模式 (Dark Mode)”一词逐渐走入了我们的视野,“暗黑模式是什么?”这个问题也一度霸占了Google搜索榜首。想要深入了解暗黑模式,也许我们可以换一个角度,从用户界面的演进历史中寻找线索,从而帮助我们更好地理解暗黑模式。


作者自从拜读了《苹果三剑客》,对于用户界面的前世今生才有了更深的了解,苹果的产品发展史,某种程度上也可以称为用户界面的演进史。废话不说,下面让我们一起简单聊聊。



1、原来,“Dark Mode”是用户界面的起源


计算机诞生的早期,其显示器一直以“暗黑模式”面向操作者,其缘由是早期的显示技术一直被CRT主导,CRT释义为“阴极射线显像管”,在19世纪末被研制出来,因为制造原理相对简单,所以CRT一直是早期电脑显示的主力,但在上世纪80年代之前仅支持单色显示。


下面两图分别为苹果公司于1977至1980年间生产发售的 Apple II 及 Apple III 型计算机

图中显而易见,两款计算机的显示方式均为单调的黑底白字或绿字,呈现出一种“暗黑模式”的视觉效果。苹果公司的 Apple II 和 Apple III 两支产品线一直以这种“暗黑模式”面向用户。这也反映了早期的计算机以输入代码执行数字运算作为主要功能,但是这从另一方面反应出:未来计算机会借助不断成长、成熟的电子技术,必将掀起一场接一场的变革,用户界面也随之不断地革新。



2、Apple Lisa(丽萨)奠定了计算机向“图形用户界面”演进的基础


上个世纪80年代之后,CRT彩色显示技术成熟,逐渐流行普及到各个电子行业,但当时主流的计算机操作系统并没有“图形界面”这个概念,所以大部分计算机产品依旧延续了先前黑色背景的显示方式。


直到1983年1月9日,在年度股东大会上,苹果宣布了两款将在未来的计算机行业中占据关键地位的产品:一款叫 Apple Lisa (丽萨,老乔的第一个女儿),苹果第一台(也是全球第一款)基于图形用户界面(GUI)的计算机,也就是 Macintosh 的前身;另一台叫 Apple IIe ,是已获高度成功的 Apple II 系列的新一代进阶产品。

Apple Lisa 向主流个人电脑行业介绍了一种全新的鼠标控制的图形用户界面,宣布向单调的黑白用户界面告别。


运用形象的图标、方便的下拉菜单和重叠的窗口,替代了此前一贯使用的输入文字命令,Lisa的图形用户界面开启了消费者与个人电脑交互方式的革新之路。尽管Lisa存在诸多缺点,如定价过高,功能缺失、运行缓慢等,但它的图形用户界面依然给它赢得一阵喝彩。


Lisa的GUI影响如此深远,以至于诸多电脑制造商纷纷加入鼠标控制的GUI领域,争相模仿。就在Lisa首次亮相十个月后,微软于1983年11月推出了Windows操作环境。(对于此事,老乔总是公开谴责微软的盖茨抄袭他的产品创意,甚至想让盖茨吃官司,两位大佬一直不合也是业界皆知,跑题了...)

///一个有意思的事儿:今年7月份,一位外国的苹果粉在Twitter上发布了一条关于 Apple IIe 型计算机的动态,内容展示了自己使用 Apple IIe 型计算机进行智能化任务的过程,如发送推文、在Evernote中写作、发送电子邮件,甚至控制智能家居(如下图)。要知道,这台计算机生产发售至今已有37年的时间。由此感叹,不得不说苹果对于产品的品控做到了那个时代的。



3、Macintosh(麦金塔)推动了“暗黑模式”向“浅色模式”的迈进


1984年,苹果发布了个人计算机 Macintosh(麦金塔),Macintosh 延续了 Lisa 的图形界面语言,并向世界普及了图形用户界面(Graphic User Interface)的概念,从而开启了以白色为底色的图形交互时代。

Lisa获得的一些成就在 Macintosh 上体现的淋漓尽致,包括灵活的鼠标、点阵影像图、桌面的布局、形象的图标、相称的字体、屏幕上方的下拉菜单和重叠的窗口,这些也得益于日益成熟的显示技术和不断进步的计算处理技术。形象生动的图形设计和界面交互一直是老乔最引以为傲的杰作,不得不说,老乔对于计算机行业甚至是设计行业都有着极高的敏感度和先于旁人的前瞻性。(当然,这里的主语应该是苹果)


Macintosh 产品的成功,不是苹果一味地迎合计算机消费市场,而是利用创新的方式引导市场,引领计算机行业向人性化的用户界面发展、迈进。


至此,我们也彻底地向“暗黑模式”说了再见,全面拥抱“浅色模式”的到来。



4、“浅色模式”成为用户界面的主流


麦金塔搭载的 System 1 打破了字符终端的模式,浅色的界面风格一直持续到 System 6 都没有显著的改变。直到1991 年的 System 7 开始引入彩色,图标也增加了隐约的灰色,蓝色和黄色阴影。System 7 系列中的 7.6 版本正式被苹果公司改名为 Mac OS ,而这一年是1997年。

与此同时,微软的 Windows 从黑屏的 DOS 发展到全屏幕的 Windows 1,再到较为成熟的 Windows 3,最后演变到奠定当今 Windows 界面基础的炫丽多彩的 Windows 95。用那个时代的眼光来看,微软的变化是相当惊人的,微软俨然成为了一匹计算机行业的黑马,一路赶超苹果成为行业霸主,而苹果因为因循守旧,在界面设计上从领先掉到了最后。

此后,从 Mac OS 8 到 Mac OS X Server 1.0 ,苹果一直专注于改善操作系统和优化界面表现,直到2001 年 3 月,经历了四个开发者预览版和一个公共测试版之后的 Aqua 界面终于跟随 10.0 正式发布,发布后改变了人们对计算机界面的印象,在随后的10年里苹果一直沿用这套界面风格。

OS X 系列用户界面较大的更新来自于2007年10月发布的 10.5 Leopard 豹,虽然基本的界面仍为 Aqua 和其糖果滚动条,但新加入了一些铂灰色和蓝色,另外重新设计的 3D Dock和更多的动画交互使得新界面看上去 3D效果更强,此外还改进了 Finder、半透明菜单条并新增了最初只用于 iTunes 的 Cover Flow界面。


整体来说,Mac OS X 10.5 Leopard 豹 这一版本的用户界面相比之前有了翻天覆地的变化,灵活生动的图形语言和交互体验重新得到了用户青睐,苹果也以此,再一次走上了引领潮流之路,使得多彩的“浅色模式”成为用户交互界面的主流。

苹果开创性的界面图形语言也延续到了移动设备领域。

2007年的初代iPhone作为苹果公司第一个移动设备产品(iPhone1代)首次亮相市场,惊艳了整个行业,iPhone搭载的 iPhone OS 和后来更名为 iOS 的系统,延续了 Mac OS 用户界面的设计语言。在历代iPhone上可以看到没有物理键盘侵占空间的屏幕,精美的的方块图案整齐的排列开来,颜色丰富且耐看。

依稀记得当时的我们,还玩着黑白屏幕上的俄罗斯方块,还敲打着物理键盘上的九宫格,挪鸡鸭也表示永不为奴。

2010年堪称iPhone史上最重要的一年,苹果推出了“改变一切”的iPhone 4,并对其用户界面进行了革新。

生动的拟物化设计风格正式成为业界潮流,这也使得UI行业逐渐热了起来,苹果的界面设计规范也顺势成为了主流的移动端设计规范。

苹果以此作为移动端界面设计的基础,沿用到之后的iPhone系列中,期间iOS系统的风格保持依旧,只有 iPhone 5S 搭载的 iOS 7 做出了图标由拟物化向扁平化的改变,但整体都以“浅色模式”作为主流的用户界面视觉模式。



5、“暗黑模式”的正式登场


在 Mac OS 的系统上,用户可以通过“通用设置-外观”来对整体界面进行浅色、深色的切换,可以看出,苹果早已把“暗黑模式”纳入到他们的开发队列中,也就是说,“暗黑模式”的概念主要来源于苹果的 Mac OS,这也为“暗黑模式”的正式登场埋下了伏笔。

自从有了这个概念之后,很多网站都为用户提供了“浅色”和“深色”两套界面,便于用户根据自己的习惯或爱好进行切换。在 Mac OS 之后,很多 App 和 Android 定制 ROM 也加入了所谓“深色模式”的支持,其中也不乏 Web 端的网站、系统等。

北京时间2019年6月4日,果粉期待已久的苹果WWDC19如期而至。

发布会上,库克一如既往地优先调侃了Andriod系统一番….(苹果一直喜欢用数据说话,想了解的同学可以回顾一下发布会的视频)

言归正传,在发布了一系列硬件之后,库克终于介绍了大家期待已久的 iOS 13。新发布的 iOS 13,除了提升系统流畅度和增加系统稳定性外,还介绍了其他提升用户体验的优化。


其中,最为引人注目的“暗黑模式”即将亮相于新系统。

发布会表示,暗黑模式可以“改善电池寿命,改善视力不佳和强光下的人的可视性,以及在弱光环境中更好地使用设备”。

“Wow,beautiful!”、“That’s beautiful!”、“That’s so beautiful!”发布会的主持人一边演示使用在暗黑模式下的App应用,一边不由自主地发出赞美。这也许也受到了老乔的影响,犹如在剧场舞台中心的话剧演员,有着一种无可比拟的自信和气场。

但有意思的一点是,主持人展示了 iOS 13 暗黑模式的开发团队合照,从极客穿着到赛博朋克式的暗黑摇滚装扮,这一戏剧性的变化似乎在告诉大家:“玩,我们也是认真的。”

发布会上简单演示了暗黑模式下的漂亮界面,虽然没有过多地阐述暗黑模式的开发细节,但是这标志着暗黑模式“重新”登上历史舞台。



6、小结


我们从苹果产品发展史中,不难发现苹果对于用户体验的理解是具有创造性的,总是能先于用户发现用户的潜在需求。苹果产品的发展史也可以称之为用户界面的演进史,从早期黑色背景的计算机桌面发展到以浅色为主的用户界面,再到 iOS 13 正式发布的“暗黑模式”,这一过程貌似是在“返祖”,但这些始终是围绕以用户体验为中心的改变和突破。


“暗黑模式”是什么?抛开技术理论,简单理解就是降低用户界面在设备上的亮度,以深色的背景、较低的对比度、灰阶的色彩来呈现用户界面,提升用户使用产品的体验。



二、为什么?


上面我们提到了,根据 Apple 官方的说法,暗黑模式可以“改善电池寿命,改善视力不佳和强光下的人的可视性,以及在弱光环境中更好地使用设备”。

我们可以围绕这个说法,结合我们与设备、环境的关系进行探讨。



1、更好地适应弱光环境


随着人们对智能设备的依赖性越来越强,设备使用的时间也高频覆盖了白天到黑夜,夜晚使用的频率更是与日俱增,所以暗光环境的使用需求被实实在在地摆到了台面上。以设计职业为例,在阿里巴巴 UCAN 2019 设计大会上分享的数据结果显示:设计师群体夜晚的工作时间通常在5-6个小时…

不是在加班就是在加班路上的我们更习惯于在夜间工作,夜间安静的环境更能让我们专注设计、灵感爆棚。但这也在另一方面表达了我们需要设备更加符合我们在弱光环境下的视听需求。

Dark Mode 由此应运而生,使用暗色模式可以缩小屏幕显示内容与环境光强度的差距,可以保证使用者在暗光环境下使用设备的舒适度。也就是说 Dark Mode 可以降低屏幕的整体视觉亮度,降低对眼睛的视觉压力,再也不用怕夜晚的设备屏幕刺瞎我们的双眼了。


但这里我们要理解一个概念,“降低对眼睛的视觉压力”并不等同于所谓的“护眼”,夜晚使用暗黑模式的设备,实际上并没有改变屏幕的“频闪”问题,所以说用户看屏幕的时候依旧会有视觉疲劳的症状,所以各位大佬还是晚上少看屏幕,多爱护眼睛吧。



2、更好地专注显示内容



想象一下,我们在电影院看电影时,为什么要全场关灯?

甚至有些APP, 在影片的下方也会有一个模拟关灯效果的按钮,来让整个手机屏幕变黑, 只剩下视频画面的部分,这都帮助我们可以更专注、更沉浸在当前的内容下,也就是所谓的“沉浸感”。


这其中的原理就是色彩本身是具有层级关系的,深色会在视觉感官上自动后退,浅色部分则会向前延展,这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作;尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。

这一点在股票交易软件上就是最好的验证,目前来看全世界绝大多数的股票软件采用的都是负极性,也就是暗色底的设计方式。红色和绿色代表的涨或跌(不同国家颜色表示可能不一样)在这样的深色背景下就会特别显眼,还有一些颜色比如蓝色用于某些数据的走势图。这样的显示帮助用户更好地集中精力在数据获取上,更快地做出决策。


3、更好地迎合消费品味


这里所提到的消费品味是来自用户层面的潜在心理需求。

从心理学角度而言,颜色可以影响观者的感受和情绪,这直接影响到用户对于一个事物的判断和选择,这就像我们消费购物一般,有时候我们的消费不完全是为功能、实用性买单,而更加看重的是一个产品的外观属性,当产品的外观符合我们的消费审美甚至超越预期时,我们往往会更快地做出消费选择。


而黑色在积极层面的外在直观表现为高贵、庄严、镇定、神秘,这代表着黑色相比其他颜色存在着更多的可能性,这也造就了黑色成为百搭色,可以作为其他颜色的底色、陪衬色进行使用。暗黑模式也存在同样的心理暗示,沉稳、神秘的黑色会让用户联想到产品的稳定和高级,提升用户的心理信任度,迎合用户的消费品味。

4、更好地改善电池寿命


最后才探讨耗电功效方面的问题,算是一个压轴问题了,在某种程度上说,智能移动设备目前最大的矛盾是性能与电池功效的博弈。如果去微博等社交网站进行搜索可以发现,为了省电而使用深色主题或者说黑暗模式的用户大有人在,尤其是一些中高端采用 OLED 屏幕的手机。这是为什么?


暗黑模式省电的作用来源于 OLED 这种材质的特性,这种屏幕经过多年发展如今已经取代了 LCD 在中高端手机上的地位。和 LCD 依赖于背光不同,OLED 自发光的特性使得屏幕能够独立控制单个像素是否发光,也就是说画面越黑,采用 OLED 屏幕的手机就越省电。下图做了一个简单的理解示例,每一列的格子代表亮度,在不同亮度下有相对应的耗电量显示,闪电的亮度代表耗电量的多少。

理解了简单含义,我们再来看一下Notebookcheck上对于OLED功耗的专业研究数据。在使用 OLED 屏幕时,屏幕上显示的内容决定了功耗。当屏幕基本全黑时(OLED <1% White),OLED 屏在任何亮度下的功耗都保持恒定。显示了白色内容的屏幕,功耗曲线会随着亮度提高而逐渐变陡。

上面的可视化图表相对来说可能需要一定的理解时间,让我们翻译简化一下。

上图显而易见,OLED屏幕的耗电量不仅受到亮度高低的影响,关键在于在OLED屏幕显示了什么,有多少区域是浅色甚至是白色的,有多少区域是深色甚至黑色的,深色区域占比越高,相比较之下OLED屏幕也就越省电。这也就证明:OLED屏幕在使用以深色为主的显示模式时,能够降低耗电量,提升供电效率,也就是改善电池寿命。


文章来源:站酷   作者:强强0075

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


如何设计B端表格?

雪涛

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

数据查看

让我们先来回顾一下表格的基本构成,最上面的为表头,横为行,纵为列,内容区每一组展示数据区域为单元格。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

表格的设计,虽然看似简单,但是作为用户最常用的组件之一,我们需要对视觉和交互的精准把握,才能保证用户在使用表格时更加。

这里我推荐表格的”四维自检法“,对我们设计的表格是否合理,做出一个标准的判断。

分别是:信息降噪、呼吸适中、易读、详情查看。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

  • 信息降噪:分别对表格内容和视觉层面进行重要性梳理,剥离不重要的元素,使表格轻量化;
  • 呼吸适中:保持内容和元素之间合适的间距,使表格页拥有一个好的呼吸感,将给用户营造一个舒适的操作环境;
  • 易读:通过对需求内容的解读,对内容形式加以分类辨别,做出可读性最强的样式;
  • 详情查看:b端系统往往伴随着表格数据类目庞大的问题,通常会采用另一种形式去展示全部信息。
1. 信息降噪

精简表格内容

当表格的字段非常重要时,一定要将字段全部展示出来让用户更清晰地了解数据。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

如果你的用户只需要了解部分字段,那么全部展示是没有必要的,只需展示最重要的字段即可。

自定义字段展示

不同用户想看的的信息侧重不同,有时候我们无法准确判断用户看重哪些字段,还可以让用户自定义展示字段。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

精简字段名称

当我们去设计表格的时候,通常会发现表格需要承载的信息量是非常大的,有时候为了表现出字段的准确含义,在定义字段名称时往往会非常的长。但是当这些字段同时出现在一个表格里时,过长的字段名称,又会显得冗余,让本就不大的页面空间更加杂乱。

所以当我们设计表格的时候,我们可以分析字段名称,对字段名称做精简,看看是不是少一个字用户就无法理解字段的含义。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

添加字段说明

当字段名称过长,又必须展示,才能有效的理解字段含义时。我们可以定义一个专有名词代替,并且在字段名称后使用添加字段说明的形式,来对字段加以说明。

这样一来用户既可以清晰的理解字段含义,又可以在有限的页面空间下获取到更多的数据信息。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

简化表格样式

早期表格的设计,出发点主要以拟物形式,以最接近现实表格的样式去设计。

但是随着互联网的普及度加深,极简的表格设计,使界面更加轻盈,让用户更加专注于数据内容。

去除纵向列的分割线,仅以浅色的横向分割线区分行,但是要注意分割的颜色不能过于浅而缺乏辨识度,部分人群对颜色的辨识度会偏低,显示器的硬件性能也会影响颜色的可辨识性。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

减少不必要的颜色区分

表格设计中一定不要使用过多的颜色区做状态或操作的区分,过多的颜色细分会使表格变得更加混乱,影响用户体验

对状态的区分,仅用轻量的颜色区分即可,操作栏保持主色按钮色。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

2. 呼吸适中

如何定义单元格的高度

了解单元格的结构,以及实现单元格的基本逻辑,有助于我们更好的去把控我们的设计。

单元格内的可控尺寸包含:单元格高度、文字字号、文字/段落行高、文字上下间距。

我们基于视觉呼吸感,赋予各个元素合适的尺寸,我在这里给出一套参考方案:

  • 文字字号 = N
  • 文字行高 = 1.5N
  • 上下间距 = 1.2N
  • 单元格高度 = 内容高度 + 上间距 +下间距

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

如何定义列的间距

首先我们要了解列的两种类型,第一种是定宽列,第二种是自适应列。

  • 定宽列

顾名思义就是它的宽度是固定的,比如:第一列我们设置宽度为200px,第二列我们设置为300px,五六七列分别设为100px,那么我们这个列表的宽度就等于200 + 300 + 100*3 = 1100px,在任何分辨率尺寸下你的这个列表都会保持这个宽度不变。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

  • 自适应列

就是列会随着分辨率变化而产生宽度的变化,比如:列表有五列,我们定义列表的宽度为界面宽度的50%,假定界面宽度为1200px,那么列表宽度就为600px,而每一列的宽度则为120px。此时我们将界面的宽度缩小到600px时,那么列表的宽度就为300px,而每一列的宽度则为60px。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

在实际设计案例中,我们往往会面临由于每一列的内容不同,所需要的宽度也就不同,我们希望在列不多时可以保持宽度自适应,但是如果每一列都做成自适应列的话,内容多的列无法展示全内容,内容少的列空间又会很大。

所以,固定列 + 自适应列的综合运用,可以让我们更好的实现我们想要的设计方案

  • 列的结构

然后,我们一起来了解列的结构。每一列分为内容区和左右间距区,在固定列里面内容区和左右间距区都是保持不变的。但是在自适应列却不同,它的内容区是随界面分辨率变化而变化的,左右间距区的宽度是保持不变的(在代码里间距区被叫做Padding)。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

  • 固定列

当表格字段数量不确定时,通常我们会为自定义列的内容区写一个最小值(min-width),以确保字段很少时可以自适应宽度,字段较多时仍然能保证完整展示表格数据,不影响对内容的阅读。

当表格的列过多又必须全部展示时,固定必需固定的列(如姓名、任务名称、操作项等),其他字段横向滚动。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

3. 呼吸适中

列的对齐方式

基于人的惯性浏览顺序,设计每列合理的对齐方式,能够辅助用户更的完成工作。

  • 标题和内容:一般采用左对齐,更的浏览顺序;
  • 有长短不一的数字时(序号除外):右对齐,方便比较 ;
  • 操作项一般放在尾列:右对齐;

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

不留空白格

从心理学的角度讲,人对未知事物会产出恐惧情绪。我们在设计表格的时候,要考虑到表格的各种展示情况,非特殊情况不要出现单元格空白。

没有数量用“0”表示,没有该项内容用“-”表示。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

选择合适的分页器

表格是一种可以承载大量数据的组件,当数据行数很多时我们通常会选择分页器,使用分页器有哪些优点:

  • 快速查看:通过分页数据加载缓解服务器压力;
  • 清晰易读:由于界面的空间是有限的,通过分页展示数据,有助于缓解用户的阅读压力;
  • 灵活便捷:如果客户想在一页展示很多数据,可以通过分页器自行选择,还可以了解到数据的总数目。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

收起低频的操作项

当界面空间有限、表格列数很多时,如果表格的操作项过多,会占用很多页面空间,需要有选择的展示,将低频操作项收起,用点击更多按钮去触发选择。

如果是1.0的产品,我们可以和产品经理沟通,分析每个功能按钮的优先级。

如果是上线的产品,我们还可以通过按钮点击PV(页面成功访问次数),来了解按钮的使用频率,做出按钮优化。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

行的排序

如果产品没有特殊需求,那么默认最近创建的在最上面。可以用带有排序的表头,让用户自定义排序。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

4. 查看详情

详情入口

如果表格的内容项很多,我们通常会在表格上只展示部分重要数据,而其余数据放在详情页面展示。

作为详情页面的入口,通常会有两种设计方式:

  • 将详情按钮放在操作项里
  • 将首行的名称做成可点击样式,点击跳转至详情

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

详情页的展开形式

如果详情内容不多,没有新开页面的必要,我们可以采用展开行、弹窗、抽屉的形式,但是要注意尽量减少过多的样式,给用户增加疑惑感。如果详情的内容很多,而且有编辑的需求,建议采用新开页的形式。

建议根据详情页信息量的多少,以此采用展开行、弹窗、抽屉、新开页的形式。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

数据过滤

数据过滤是表格页很重要的组成部分,包含搜索、筛选、标签页。

这一部分的主要作用是帮助用户,梳理表格数据信息,精准定位所需的数据项。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

1. 搜索

模糊搜索

模糊搜索是指在用户搜索意图不明确时,搜索引擎将用户的查询与待检索的内容进行模糊匹配,找出与查询相关的内容。模糊搜索无法理解用户的查询意图,返回的结果中可能包括了一大批用户不想要的信息,所以在使用模糊搜索时一定要结合自己的实际场景,慎重使用。

  • 优点:只要有相关的内容都会被检索出来,减少了精准搜索带来的记忆负担
  • 缺点:容易把相关的信息也带出来,例如检索手机号,把相关编码也匹配出来

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

搜索

搜索是指用户在搜索时,针对某一数据字段搜索,来查找所需要的数据。根据业务场景不同,我们会查找某一字段,或者是用标签切换不同字段来查找。

  • 优点:搜索匹配精准度高
  • 缺点:每次只能对单一条件进行搜索

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

2. 筛选

筛选器主要是针对内容较少的字段进行查找的一种方式, 通过筛选器的选择可以快速定位所需的数据,取消用户输入的过程,提升查找效率。一般筛选有两种形式,第一种是下拉筛选,第二种是平铺式筛选。

下拉筛选

下拉筛选就是将需要筛选的内容放置于选择器当中,通过点击选择器下拉,来选择需要筛选的内容。

  • 优点:空间利用率高,起到了很好的收纳作用
  • 缺点:无法直观看到所有的筛选项

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

平铺筛选

平铺筛选就是将筛选项的内容,直接展示于页面之上,通过点击选择的方式直接进行筛选。或者可以通过自定义内容的筛选。

  • 优点:操作效率高,筛选项一目了然,支持输入更多筛选条件
  • 缺点:空间利用率低,不适合选项太多的情况

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

如何合理的使用筛选项

当数据内容需要的筛选类目过多时,如何合理的摆放,才能提高用户的使用效率。

  • 信息排序:基于用户使用场景,以目标导向为依据,将高频的筛选项排列到前面,低频的筛选项置于后面
  • 默认折叠低频筛选项:当筛选项过多时,会极大的占用界面空间,使用户在阅读数据时产生非常不好的用户体验,通过展示高频筛选项、隐藏低频筛选项,将更好的提升用户体验。
  • 所有筛选项都很低频:以点击高级筛选按钮的形式触发,将全部筛选项置于气泡或者弹窗之中。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

如何判定筛选项的使用频率呢?通常会有两种方式:

  • 第一种是给筛选项增加数据埋点,这样一来就可以通过对用户点击行为的分析了解到筛选项的使用频率;
  • 第二种是用户调研,通过问卷或者面谈,了解到用户的真实使用需求。
3. 标签页

标签页又叫选项卡,在组件中我们通常叫Tabs,指的是分隔内容上有关联但属于不同类别的数据集合。

默认展示常用项

在使用标签页时,有一点我们要特别注意,通常在B端设计中,我们会把标签页的位置定位在最常用的一个选项。

增加数据条目

如果是订单一类的分页,我们还可以将数据条数,展示在标签右侧,用来帮助用户快速了解到待办数据量。

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

数据操作

1. 分类

数据操作即对表格的数据进行操作,首先我们对数据操作进行分类。

按控制范围分:

  • 单行操作
  • 批量操作
  • 全局操作

按操作属性分:

  • 新增数据
  • 编辑数据
  • 删除数据
  • 业务处理
2. 如何合理的设计数据操作

第一步,先判断控制范围

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

第二步,判断摆放位置

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

第三步,优化信息层级

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

以上是操作项和筛选项较多的情况,那么不多时,我们还是要合理利用空间,灵活设计

如何设计B端表格?这篇近5000字的干货帮你完全掌握!

以上就是《如何设计表格?》的全部内容了,后续还会努力更新更多B端设计分享!与君共勉

文章来源:优设   作者:三斤

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


一组有质感的拟物图标

前端达人

拟物图标临摹练习



转自:站酷

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


星空 The Starry Night

前端达人


过去与未来,皆是同一片星空


转自:站酷

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

喜马拉雅 移动端APP redesign

前端达人

终于赶在2020年的尾巴发出来了。下半年开始摸索着学习UI设计和交互设计,用这个作品给这一阶段画上一个小逗号,新的一年好好学习,好好生活。

第一次做redesign练习,知道自己做的有很多需要改进,有不成熟不合理的地方感谢大家帮我指出,一起交流。感谢@酸梅干超人老师,从作品中学到很多。




转自:站酷

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

用户认知——真的了解用户吗?

雪涛

产品最终服务于用户,所以产品在设计阶段,对于用户的了解是非常有必要的,不同产品面对不同人群的需求是不一样的,要深入用户了解他们真正的需求;本文作者分享了关于用户认知的一些思考,我们一起来看一下。

产品设计脱离不了用户认知,我们是否真的了解用户呢?用户是什么样的人?他们有什么属性特征?我们能满足他们什么需求?

这些其实是个大课题,但总体来讲,产品为用户而生,用户怎么用产品,什么场景下使用,这些都决定了我们的产品要怎么去设计,因此认知用户是产品设计中最重要的一步。

一、走进用户和使用场景

无论目前你负责的产品是从0-1还是1-N,在领导给了一个问题让你去解决时,你把这个问题先放到一边,先思考是什么样的用户会来使用我们的产品。

举个例子,当你听到老板说最近热线渠道上老是有客户抱怨没有人工入口,我们不是做了那么多引导了吗?你去定位并解决下这个问题。

这时候有两种做法:

  • 你先找到反馈这个声音的用户的轨迹;
  • 判断用户轨迹发现他来电是中午12点左右,中午属于话务时间较繁忙的时段,这时会播放人工话务繁忙的话术;
  • 根据语义解析的意图得出用户的问题属于比较紧急的业务,
  • 用户投诉意愿上升;
  • 造成问题的原因-中午时段人工话务繁忙;
  • 得出结论:需在中午增加坐席人力投入;

从以上的做法来看,问题是得到了解决,但是老板会给这个方案打50分甚至是30分,为什么?

因为这个方案你只解决了一个问题,却让公司的人力成本上升了一个层级。

现在让我们来换个思路,先来思考什么样的客户会来反馈人工难。

我们很容易可以划分出一部分特殊人群:老年人,还有其他自助解决不了问题的人。

此时我们再去看用户轨迹,按照刚刚的步骤再走一遍直至第5步:

  • 先找到反馈…
  • 造成问题的原因-中午时段人工话务繁忙
  • 分析定位该用户使用过其他自助渠道;
  • 确定目标客户是老年人客群;
  • 得出结论:需在中午时段增加人工坐席的投入;针对多次使用过自助的用户/老年人客户需要有对应的绿色通道-直入人工/预判业务;

当我们拿着第二种方案给领导汇报时,领导可能会打80分,剩下20分可能扣在你增加了公司人力成本。

为什么第二种会比第一种好呢?因为第一种只解决了一个问题而第二个是解决了三个转人工难的问题,如老年人对热线渠道的机器人使用存在一定障碍、多次使用自助后来电的用户,繁忙时段来电的用户。

其实方案二也许还可以再改进,如针对重复来电的用户也可以直入绿色通道等,但在这里就不展开。

举上面的例子是想说明,在我们分析问题前,我们可以多思考用户画像和用户群体,以及使用我们产品的场景,这对我们问题的分析和制定方案是有一定的帮助,至少能针对性的解决不同类型的用户问题。

二、从用户场景和用户分群去认知用户

认知用户可以从感性和理性两方面入手,理性我们可以通过数据分析可以判断出用户偏好什么,习惯什么样的产品,这能让我们抽象出直接的结论,如我们能从数据分布看出年龄对美妆产品是主要的影响因素。

而感性的认知,我们就得构建用户画像,可以从用户属性特征,用户场景和心智出发;用户画像除了能帮助我们设计个性化或者千人千面的策略外,还有利于我们预测未来用户的行为轨迹,如内心对科技感兴趣的用户,大多会接受新技术尝鲜等。

为什么我们要从两方面认识用户呢?

因为只有理性的认知,产品就是一个冰冷冷的需求载体,如果不能附加一些感性元素,用户就不会对产品产生依赖感知;如大部分用户的认知中,红色感知为警惕而蓝色感知为轻松,产品设计需要遵循这样的认知,网易云正是抓住了年轻人晚上容易产生忧郁的特征,才收获了大多数年轻人使用,也就有了“网抑云”的调侃。

但用户认知其实不是一件简单的事情,产品人其实很容易就会走进“自以为是”的陷阱中,以为自己就是代表了用户的声音。

举个例子,像现在的外卖配送员每当收到一个订单时,应用app都会播报:“您有新的订单信息,请注意查收”,这个播报声音很大且不支持打断,有时还会重复播报几遍,在类似办公室这样的安静场景下,体验上绝对是很差的;但当你真的深入到用户的场景中去,你会发现这才是真的为用户负责的功能设计;因为外卖配送员一般都是在外边跑动,场景相对吵杂,一旦配送员没听到播报,很容易就漏单,这样带来的后果往往很严重,如罚款或者差评等。

用户认知,是要到用户的生活场景,了解用户在这环境下的真实声音,不要一味的在办公室头脑风暴,对产品进行主观色彩性的功能设计,这即是对产品的不负责,也是对用户的不负责。

三、用户认知如何开展

那么我们要怎么开展用户认知呢?笔者认为最重要的就是制作用户画像,不断补充用户特征和进行客群划分。

但如果是做一个全新的app产品,我们没有用户行为数据,这时候其实是不太好制定用户画像。

这时候我们就需要自己先以经验给用户拟定一些特征,如:

  • 美甲用户:一般为女性,都市白领,网络达人;
  • 金融用户:教育程度高,收入中等以上,固定职业;
  • 二次元用户:线上消费,宅,爱好动漫;

但这部分的用户画像其实是不够全面,我们能从中获得的启发很少,怎样才是一个好的用户画像呢?我这里认为的一个完整的画像是即能帮助你找到真实的用户又能代表一类人;

上面三个维度的标准虽然能帮你找到一类人,但颗粒度太泛,对落地产品设计帮助不大;如上面的金融用户偏好什么类型的基金产品,高风险还是低风险,收益偏好是30%还是50%,这些根据上面的用户特性我们是得不出结论的,因为这些是需要根据用户的收入,家庭状况和消费观念相关,这就是为什么基金类等产品都会要求你填写投资风险偏好的原因之一。

补充用户画像的最快速的方法是走进用户的生活,在用户的生活环境下直接与用户聊天,没有比面对面更直接快捷的方式去了解一个人,你可以通过用户的表情、言行举止,去全面挖掘用户特征,用户的言论会体现他的认知,用户的行为会体现他体验产品的习惯,用户的表情代表他对交互的偏好。

这部分工作其实很难由产品经理亲自开展,因为这很考验人的观察力和主持技巧,所以可以委托市场访谈类的公司去帮助你认知用户;他们会有专门的团队协助你,包含但不限于定位目标客户、用户招募、用户访谈到报告制定等工作。

但若没有这部分的预算和渠道,产品经理也可以从身边的人开始了解,确定了身边某个好友是自己的目标客户后,邀请他出来一起聊天的同时,进一步了解他对相关产品的声音,这是一个方案;另外也可以自己亲自去线下采访你的真实用户,但不要透露个人的信息,譬如以学生的身份做市场调研的工作邀请用户面谈,这也是个可行方案。

产品经理开展用户访谈一个前提是确定你的重点用户和具体问题,你随机抽取的用户虽然能提供信息给你;但如果你问题够具体,你的目标客户选取得够好,这样访谈的效果往往事半功倍;一般访谈前,我们可以先考虑下目前我们的产品处于什么状态,目前属于增长期或者成熟期,然后按照你的问题聚焦到某个用户群体中。

问题的提前设置可以聚焦整个访谈过程,如果漫无目的或者太泛的问题容易被用户的情感带着走,以至于我们会无法了解到关键信息,导致工作效率低下;这里可以给读者一个建议,按照用户使用场景的生命周期去考虑你的访谈问题侧重点,然后以使用前-使用中-使用后这样顺序去设置你的对应问题;

基于上面两点,举一个例子来说,如目前团队为了给基金应用增加一个VIP套餐服务,面向高端客群,定期提供理财服务,那我们要怎么去设计这个产品服务呢?

这是一个产品服务设计的问题,这时候就需要开展用户访谈,在这个问题上,你的客群其实比较明确,就是面向高价值用户,那么如何筛选出这部分用户?

可以抽取过往的用户数据,找出投资过5万以上且锁定期为6个月的产品用户出来,这部分用户收入水平相对较好且较为稳定,属于你的高价值用户;然后看看是否有共同的属性特征,基于这些特征去设置你的问题,一般这类客户对基金的转化率会比较关注,不太在意锁定期的长短,所以你的问题侧重点就可以放到转化率的数据去开展;

然后在与用户面谈时,关注和记录用户的反馈信息,特别是感性的信息;人都是复杂的动物,言语背后是想法,想法背后是复杂的意识,意识随用户的认知变化而变化;这也是为什么当面与用户沟通是必须的,我们听到的用户声音有时并不代表他的真实诉求,要结合行为表现,表情特征等综合判断。

另外还要有一个前提是“生活”而非“任务”,为了科学准确性,与用户访谈时尽量不要让用户有负重感;以聊天的形式开展,并以用户有真实诉求为前提去体验产品,这样面谈的效果是最好的;像你现在负责打车app的用户访谈,那就先和用户打车去咖啡馆,期间注意观察用户的操作行为和表情变化。

四、总结

总结一下以上的内容,一般产品设计离不开用户认知,什么样的用户在什么场景下会使用我们的产品,这些需要产品经理通过用户画像、用户分群和场景分析三方面去定义。

而完善用户画像中常见的方法是用户访谈和数据分析,从理性认知和感性认知两方面去补充对用户的认知,不断地丰富用户画像;并且在产品设计中牢记用户画像,为特定用户群体提供个性化解决方案。

以上就是关于用户认知的一些浅薄之谈,希望能给大家工作和生活带来一些帮助,如有不同意见,欢迎补充。

文章来源:人人都是产品经理   作者:SiegZhong

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档