首页

超多案例!B 端后台类产品的图表设计思路及方法

周周

随着大数据的兴起,数据价值的不断挖掘,图表作为数据呈现与分析的有效手段,正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考:如何让图表清晰的传达信息,同时带来美观的视觉感受。

为了达到清晰传达和视觉美观的目标,我们结合实际项目,进行大量探索及思考,梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法,涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。

超多案例!B 端后台类产品的图表设计思路及方法

图表视觉层级

图表能够承载大量数据信息,同时视觉元素较多,如果只是凭借设计师的审美喜好进行视觉设计,没有整体信息读取考量,可能会导致重要信息未能凸显,降低用户读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

为清晰传达信息,进一步提升读取效率,我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度,将图表元素分为三类,分别为“底层元素”、“中层元素”和“顶层元素”,并依据不同视觉强度分别设计三类元素。底层元素最弱,顶层元素最强。通过这种方法,梳理图表元素的前后关系,能够清晰把握元素视觉层次,保证信息传递效率。

超多案例!B 端后台类产品的图表设计思路及方法

1. 底层元素设计

在各类图表中,我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰,最大程度突出主图形,底层元素全部使用浅灰色进行设计。我们发现,当元素与背景颜色的明度对比在 1.2:1 时,人眼较难看到元素;当对比度在 2.0:1 时,视觉强度过强,易吸引用户注意力。通过元素视觉强度的调研及视觉尝试,最终确定元素与背景对比度在 1.6:1 左右,视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀,只在需要查看时可以被发现。

超多案例!B 端后台类产品的图表设计思路及方法

2. 中层元素设计

中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素,是图表中表达数据的关键元素。与底层元素相比,中层元素采用更低明度与更高饱和度的数据色来表现,使元素从页面中凸显出来,保证可读性。同时在样式上适当加入渐变、描边等样式,丰富视觉层次,带来美观的视觉感受。

超多案例!B 端后台类产品的图表设计思路及方法

3. 顶层元素设计

我们把顶层元素定义为图表高亮信息,内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出,使用深灰色、强调色等强对比度样式,并辅以动画、投影等手法保证明显的视觉强调效果,保证顶层信息最有效的传达给用户。

超多案例!B 端后台类产品的图表设计思路及方法

4. 最终效果

通过层级梳理,并绑定元素重要程度和视觉强度的方法,设计后图表主次信息均按重要程度进行对应视觉强度的展示,让用户能够在第一时间接收到最重要的信息,提升信息读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

图表排版设计

图表排版是指各元素在图表中的尺寸及布局等,对于 B 端后台类产品来说,不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验?我们经过大量讨论推敲,梳理出一套针对 B 端后台类产品的排版规则,力求保证用户图表的使用体验。

1. 图表尺寸

图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大,例如巨量数据的图表挤在名片大小的区域例显示,这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景,并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸,针对不同尺寸优化图表的信息展示密度,以达到高效读取信息的目的。

“迷你图”尺寸最小,舍弃了 Y 轴等不必要信息,利用小面积展示最关键的图表信息,并控制数据密度,保证信息高效读取。

“中号图表”尺寸受限,限制坐标轴刻度数量和数据的密度,例如曲线图数据点不高于每 4 像素 1 个数据点,Y 轴坐标刻度不超过 5 个,以确保信息密度不过载,这类图表尺寸通常用在针对某大类内容进行多方面检视时。

“大号图表”尺寸最大,不限制数据信息密度,给予最全最详细的展示,这类尺寸通常用在数据详情页等详细分析场景中。

最后考虑到多图表混合排列时,饼图、地图等大面积填色图表,相较折线图等描边型图表,视觉感受更加膨胀。我们缩小了填色类图表的实际高度,保证多种图表混合排列时,视觉感受的均衡。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

2. 坐标轴

坐标轴在图表中出现的频率较高,那么坐标轴常见的设计问题有哪些呢?

第一是横纵坐标轴的刻度出现过密情况。

如果坐标轴所承载的是连续数据(连续数据指可量化的,连续不断的,在区间内可任意取值的数据,如时间、金额、人数等),设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据(离散数据指不可量化的,无关联的,不可在区间内任意取值的数据,如分类、软件版本、省份等),可采取增加坐标轴缩放功能解决。

第二个常见问题是刻度的说明文字过长。

如果是 X 轴(横轴)文字过长,除了在可控范围内减少刻度,还可采取文字倾斜 45°~90°的办法(如文字全部为中文,可用竖排代替倾斜 90°),缓解信息过密看不清的情况。

如果是 Y 轴(纵轴)文字过长,需联合研发一起调整数据的单位,比如把“元”调整为“百万元”。

如果不能调整,那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库,需要提前预估刻度文字长度并预留出来,否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库,则不必提前处理,图表库会自动按刻度长度进行整体调整。

超多案例!B 端后台类产品的图表设计思路及方法

3. 图例

图例作为图表中不可或缺的部分,在各类图表库中位置不尽相同,由于不同图表样式差异很大,图例的位置需整体考虑并适当布局摆放,但在同一产品或页面内,过于随意的摆放图例,会导致页面统一性较差,同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵,作为面向用户的产品集合,产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题,我们基于业务特点,针对 B 端商业产品矩阵制定了图例布局指导原则。

我们以提升屏幕信息密度为目标,分析不同场景的页面排布,制定了顶部和右侧两种较为宽松的指导原则,供设计师在没有明确的更优方案时选用。

当图表是左右两端对齐的类型,例如折线图、柱状图时,建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布,减少占用空间。当图表本身左右都有空余空间时,例如饼图,建议将图例放置于图表的右侧。也能够节省页面的空间。

超多案例!B 端后台类产品的图表设计思路及方法

数据色板设计

色板作为常见的数据表达手段,能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试,梳理总结出图表色彩的两个关键维度:辨识度与统一性。既需要颜色间突出强烈可清晰辨别,又需要颜色整体能形成统一风格,以达到清晰传递和美观的目标。如何平衡辨识度与统一性,是我们遇到的难题。

超多案例!B 端后台类产品的图表设计思路及方法

1. 辨识度

辨识度在图表中有两方面:颜色与页面底色的辨识度,各颜色之间的辨识度。对于第一种,我们采用控制颜色的明亮程度来确保色彩辨识度,尤其对于黄色、青色等本身较亮的颜色,降低颜色的明度,确保在浅色背景下颜色可辨识。

对于第二种也就是各颜色之间的辨识度,通过实验发现单纯的颜色色相变化,例如红色与橙色的区分,人眼不容易分辨。所以采用了色相变化+明度变化的方法,即深红色与亮橙色,深蓝色与亮紫色等,这样用户能在第一眼就明确分辨,保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中,运用欧几里得距离公式测算颜色间的距离长短,来衡量各颜色间色差数值。颜色间距离越远代表色差越大,利用数据辅助衡量辨识效果。

超多案例!B 端后台类产品的图表设计思路及方法

2. 统一性

色彩统一性的作用在于确保图表整体风格一致,色彩搭配舒适,从而带来美观、统一的视觉感受。为达目的,我们首先提炼商业产品设计风格为明亮、强对比,其次把设计风格转化为色彩数值。经过实验,把颜色明度限制在 50%-70%,把饱和度限制在 75%-85%,并在区间内不断波动。这样既保证了色彩视觉感受的统一,各颜色间又能够有清晰的辨识度。

超多案例!B 端后台类产品的图表设计思路及方法

3. 颜色量化与工具

量化颜色,将色彩转化为数值,利用数值来验证设计师的「感觉」,能够保证方案合理性,保证设计质量。但通过尝试,我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料,我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式,它能够将人眼对颜色的感知精确的量化为数值,例如黄色相比蓝色明度更高,都能如实的反馈到数值上。也由于此特性,HCL 模式在诞生距今不到 20 年间,已被一些先锋设计师用于数据可视化的呈现中。

超多案例!B 端后台类产品的图表设计思路及方法

但是 HCL 作为小众色彩模式,目前设计软件鲜有支持,造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题,我们已初步完成智能配色程序,只需输入品牌色,就能自动生成图表色版,并在风格上与品牌色匹配,达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末,帮助大家直观的查看和使用 HCL 模式颜色。

结语

数据价值就像不为人知的宝藏,隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙,是发掘数据价值的强有力武器。通过对图表的不断探索优化,我们希望能够最大化数据的价值。通过图表,让数据最直观的展现;通过图表,让其背后的规律浮出水面被人探知;通过图表,让 B 端不再有难懂的数据。

附:色板及 HCL 工具

超多案例!B 端后台类产品的图表设计思路及方法


文章来源:优设网    作者:百度MEUX


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


数据可视化设计必修课(一):图表篇

周周


图表是数据可视化中最常用的一种表现形式,一定要吃透它。

随着互联网数字化越来越完善,数据可视化这个词的使用频率也越来越高,而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计,都离不开图表的使用。然而关于图表类相关的资料太零碎了,不成体系,对于初学者非常不友好,本篇文章我从图表的祖辈开始,把它都给挖了出来,希望对你有帮助。

什么是图表

图表的定义:可直观展示统计信息的属性,对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观、形象地可视化的手段。

英文叫法:Chart。

用户对图形的敏感程度远远大于文字,所以产品就需要把数据信息可视化,用简单的图形表示出更多的信息量,而图表是数据可视化中最常用的表现形式。

接下来我们来介绍图表的具体构成及元素解析。

图表的构成

图表是由:标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成,每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来,精简化显示想要展示的内容即可。

数据可视化设计必修课(一):图表篇

图表元素解析

1. 标题

顾名思义,标题就是图表的名字,标题是必不可少的元素。标题的内容一定要言简意赅,不要太长,能两个字写清楚绝对不用三个字。

标题的常用位置有 3 个:左上角、顶部居中、底部居中。

数据可视化设计必修课(一):图表篇

一般情况下,标题字号 / 色值要突出一些,用户第一眼看到 chart 的时候,要清晰的看到这个图表是做什么的。

特殊情况下,如果需要对标题有额外解释的话,两种展现形式:

  • 增加提示图标;
  • 增加提示语。

数据可视化设计必修课(一):图表篇

2. 图例

图例的组成

颜色、名称、数值、单位。

数据可视化设计必修课(一):图表篇

图例的展现形式

圆形、开关、矩形、鼓包线、实线、虚线。

数据可视化设计必修课(一):图表篇

图例的位置

从左至右、从上至下。

数据可视化设计必修课(一):图表篇

图例的作用

  • 标识出每个颜色所代表的的类别;
  • 开启 / 隐藏数据显示;
  • 图例显示的数值一般为当前值。

图例的颜色选择

同一组图例中,不要出现相近的颜色,否则在图表显示中分不清彼此。

数据可视化设计必修课(一):图表篇

产品使用中,要规范图例颜色使用,一般分为两种:

  • 常用的图例颜色(颜色本身代表着行业中的某种含义),此类颜色需要是固定色值,无论哪个 chart 中,都是这个颜色;
  • 无特殊含义的图例,可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色,图例整齐划一。

图例过多时如何展示

  • 如果图例可整合前提下,展示主要图例 / top n 图例,其他的图例做整合,增加个详情页来展示完整的;
  • 如果图例不可整合/省略,则需要给出足够的展示空间。

共用图例

如果多个 chart 的图例一样,可进行合并,减少冗余图例。

数据可视化设计必修课(一):图表篇

图例省略

如果 chart 中只有一个图例的话,可省略。

数据可视化设计必修课(一):图表篇

图例名称限制

根据不同使用场景,为了更好的展示效果,要给图例名称设置一个最大值,超过最大值后省略展示。

数据可视化设计必修课(一):图表篇

3. 坐标轴

坐标轴分为 X 轴和 Y 轴,常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。

数据可视化设计必修课(一):图表篇

刻度值代表的意义

  • 时间点:12:00;
  • 时间段:周一、周二。

数据可视化设计必修课(一):图表篇

坐标轴使用规则

是否带单位:

  • 如果刻度值的含义明确的情况下,可以不用带单位,比如:2018、2019、2020…;
  • 如果刻度值含义有歧义的情况下,必须加上单位(具体是统一一个位置加单位,还是每个刻度值上加单位,则需要根据场景来判断)。

数据可视化设计必修课(一):图表篇

对齐方式(常用,但非必须):

  • X 轴:居中对齐;
  • Y 轴:右对齐。

数据可视化设计必修课(一):图表篇

刻度值过多时如何显示:

  • 可选择规律性省略刻度名称;
  • 倾斜文字以显示更多的文案

数据可视化设计必修课(一):图表篇

刻度值的选用一定要是同一个规律,禁止同距离的刻度值代表不同数据。

刻度点的样式使用规则:

刻度的线朝外。

数据可视化设计必修课(一):图表篇

4. 数据展示

数据的展示是 chart 中最为明显的地方,可以说如果只显示一个元素的话,就是他了。

数据展示的使用规则:

  • 边界要清晰,不可虚化;
  • 多个数据同时显示的时候,要保证每个数据都能清晰的看到,可以采用透明度来保证所有数据的显示。

5. 网格线

网格线的作用

呼应坐标轴,美观度。

网格线的使用规则

  • 线的颜色要弱化,不要喧宾夺主;

数据可视化设计必修课(一):图表篇

网格线使用实线居多,尽量不用虚线。

使用场景

横、纵、横纵结合、无网格线。

数据可视化设计必修课(一):图表篇

6. 提示信息

通常情况下,提示信息用来标识出 chart 中重要点的数据信息,需要注意的是:重要信息尽量简化,信息量不要太大,言简意赅就好。

数据可视化设计必修课(一):图表篇

7. 水位线

根据不同产品的使用场景,有的时候会用到阈值,当达到某个阈值后,就会触发某种联动。这个时候就需要有个水位线了,它起到警示的作用。

形式有两种,实线和虚线,颜色的选取则取决于产品的警告级别。

水位线可以是一个,也可以是多个,视情况而定。

8. 时间轴

时间轴可以灵活地调节刻度值的上下限,从而更精确的看到自己想看的数据。

时间轴的功能及限制没有不是很复杂,所以就不过多解释了,需要用的话就用。

图表使用建议

1. 折线图 line

定义

折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。折线图是通过线条的波动来表示数据的波动,主要体现的是数据随着时间的推移而变动的图表。

数据可视化设计必修课(一):图表篇

使用场景

常用于观察一段时间内数据波动的浮动变化,比如:一天内内存的使用情况。

使用建议

Y 轴刻度值选择要合理,当前显示的数据波动要最大化的显示;

数据可视化设计必修课(一):图表篇

重要节点可以单独做重点标注;

数据可视化设计必修课(一):图表篇

数据拐点要平滑,不要太锋利。

2. 面积图 area

定义

面积图和折线图比较类似,区别在于面积图把数据区域做了个面积划分,让数据的显示更加清晰。

数据可视化设计必修课(一):图表篇

使用场景

面积图展示尽量不要超过 3 个图例,否则数据多的情况下,数据的展示会特别乱,影响观看。

使用建议

面积区域要和折线的颜色用统一色系,不要换色系;

数据可视化设计必修课(一):图表篇

面积区域一般要比折线颜色浅一些,这样视觉上更加让人舒适;

数据可视化设计必修课(一):图表篇

如果多条数据情况下也用面积图的话,面积区域尽量使用透明度,否则有的数据会被遮挡看不到。

数据可视化设计必修课(一):图表篇

3. 柱状图 bar

 定义

柱形图,又称长条图、柱状统计图。用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析。

数据可视化设计必修课(一):图表篇

使用场景

  • 柱状图分为横向和纵向两种展现形式;
  • 用于在同一维度下不同数据的对比,用柱状图更能清晰的对比出数据的差异化。

使用建议

柱状图的厚度不要是固定值,要做成自适应来应对不同尺寸的分辨率显示;

数据可视化设计必修课(一):图表篇

厚度与间距的对比要合理设计;

数据可视化设计必修课(一):图表篇

可使用小圆角,千万不要用大圆角,太丑了……

数据可视化设计必修课(一):图表篇

如果想要强调某个柱子的话,可以进行颜色区分,但是柱子颜色不要超过 2 个(同一维度下);

数据可视化设计必修课(一):图表篇

如果想要在柱子上显示数值的话,使用建议(下面的顺序为推荐顺序):

  • hover 的时候出现数值;
  • 数值默认在柱子上显示;
  • 数值在柱子顶部 / 右侧显示。

4. 饼图 pie

定义

饼图仅排列在工作表的一列或一行中的数据,它是有一个总和数据,方面查看每个类别分别占总数据的百分比的一种图表。

数据可视化设计必修课(一):图表篇

使用场景

  • 常用于做总结、年度汇报等;
  • 所有数据相加必须是 100% 才可用。

使用建议

  • 每个数据要使用单独的颜色来表示,不要有相同颜色;
  • 饼图中不能有负值;
  • 图例数量没有限制,但是如果遇到可以合并的图例,可以进行合并;
  • 饼图的开始点为 0/12 点位置。

数据可视化设计必修课(一):图表篇

5. 环形图

定义

环形图是由两个不同大小的圆叠在一起,切割中心部分得到的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

  • 环形图有一个独有的特点,就是可以在中心圆的位置突出某一项指标的数值。
  • 它常用于做数据的监控,监控某一类指标是否正常。

使用建议

  • 环形图的开始点为 0/12 点位置;
  • 环的粗细要合理,不要太粗和太细;

数据可视化设计必修课(一):图表篇

环形图的两个圆要从中心对齐。

数据可视化设计必修课(一):图表篇

6. 堆叠面积图

定义

堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

常用于不同资源中流量 / 容量的使用。

使用建议

  • 不要有重复的颜色;
  • 尽可能的把数据量按大小的顺序,由下至上的堆叠。

7. 堆叠柱状图

定义

堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

常用于不同维度下相同几个指标的展示。

使用建议

  • 不要有重复的颜色;
  • 按重要等级由下至上排序。

8. 非常用图表

上面介绍了常用的图表的使用建议,但是图表类型远远不止于此,还有很多非常用的图表类型,这次我先给大家列出来,如果大家感兴趣的话,我后面再写一期冷门图表的使用建议:

雷达图,散点图,K 线图,盒须图,热力图,旭日图,桑基图,树图,漏斗图,仪表盘。

数据可视化设计必修课(一):图表篇

常用的图表开源网站

1. echartsecharts

网站链接:https://echarts.apache.org/zh/index.html

数据可视化设计必修课(一):图表篇

2. highcharts

网站链接:https://www.highcharts.com.cn/

数据可视化设计必修课(一):图表篇

3. antv

网站链接:https://antv-g2.gitee.io/zh/examples/gallery

数据可视化设计必修课(一):图表篇

总结

Chart 是数据可视化必修课中最重要的模块之一,不可忽略。只有了解每个 chart 的定义及使用场景,才能在产品中用到最合适的那一个。



文章来源:优设网    作者:Luck gg


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



热门的手机用户输入设计模式

ui设计分享达人

对于任何手机应用程序,如果没有来自用户的一些初始和正在进行的输入,就不会发生任何事情。因此,手机产品设计师、开发人员和产品经理必须了解允许用户这样做的最佳方式。

虽然手机应用程序以及使用它们的用户通常是独一无二的,但是有许多常见的模式(新模式和旧模式)被用来解决这个特定的问题。


用户输入设计的6个目标


在我们深入研究模式之前,了解用户输入设计的六个主要目标是很重要的:

  1. 选择合适的输入和资料登录方法

  2. 减少输入量

  3. 设计有吸引力的数据输入屏幕

  4. 使用验证检查来减少输入错误

  5. 设计所需的输入文档

  6. 制定有效的输入控制


模式的概述


在记住以上设计目标的前提下,下面是我们在将本文中详细介绍的设计模式的概述,在我们的电子书《2014年手机用户界面设计模式》中有更详细的介绍:

1.智能键盘
2.默认值&自动完成
3.立即沉浸(或“惰性注册”)
4.操作栏
5.社交账号登录
6.巨大按钮
7.滑动操作
8.通知
9.显性控件
10.可扩展输入
11.撤销


1.智能键盘


Facebook记事本,Android联系人


问题
用户希望快速输入信息。


解决方案
当用户点击应用程序中允许输入信息的部分时,给他们与输入数据相关的键盘。这使他们不必在字母数字屏幕之间寻找正确的按钮,或者多走一步来访问键盘。这不仅方便了用户,而且还指示了需要从用户那里得到什么类型的输入。手机平台允许相应地标记文本字段,这允许在哪些按钮显示在更显著位置方面有一定的灵活性。


例如,在地址簿或拨号器中输入电话号码时,用户不需要完整的键盘。当他们点击这些字段时,数字小键盘就会弹出,而不是整个键盘,这样就减少了不必要的按钮,简化了操作过程。类似地,点击浏览器中的URL栏会弹出一个稍微修改过的键盘,其中“/”和“。com”按钮显示在空格键旁边,而不是符号键后面。通过连接到系统提供的这些智能键盘类型,你的UI可以根据用户当前尝试的操作进行调整。


2.默认值&自动完成

Skype, Flightboard


问题
用户希望快速完成操作。


解决方案
通过为用户提供预先填充的默认值或基于先前输入的数据的提示,预测频繁选择的项并使用户更容易地进行数据输入。这可以与自动完成功能相匹配,比如在谷歌Play Store搜索中,通过加速来显著改善用户体验。这种模式在标准化用户输入和在问题发生之前预测问题方面特别有用。例如,Skype会自动为输入的电话号码匹配国家代码。从用户的角度来看,这是有意义的,因为他们不习惯定期输入这些信息,但在这种情况下,这种匹配很重要,因为Skype是一个国际电话应用程序。


另一种实现方法是保存用户输入的最后一项,并在用户再次输入或搜索时显示这些最近使用过的项。例如,Flightboard在搜索框下面列出了以前使用过的位置,以避免用户再次输入。大多数地图或导航应用程序也采用这种模式,在搜索方向时自动输入用户当前位置,为用户节省几次点击,因为这是最常见的情况。


3.立即沉浸(或“惰性注册”)

Wunderlist


问题
用户希望在注册之前先尝试一下。


解决方案
越来越多的应用程序允许用户在任何事情发生之前——甚至是注册或登录之前——立即沉浸在应用程序中。


记住,他们一次只能做一件事,而且测试每个新产品的时间有限。随着应用程序的日益专业化,在扶持它们之前找到高质量的用户或客户越来越重要——他们可能会讨厌你的产品或很快意识到它不是他们想要的。向用户询问注册账户所需的信息可能是一件很困难的事情,而且会降低甚至是适合的访问者的注册率。在积极的方面,通过让他们立即体验你的产品,他们更有可能被吸引,因为他们能够在第一次体验时深入探索应用程序。这比我们接下来讨论的onboarding walkthrough UI模式更好,因为它向用户展示而非告诉他们应用程序如何工作。


对于Carousel或Duolingo等依赖用户数据来运行的应用程序来说,允许延迟注册是没有意义的,但Wunderlist或Houzz等应用程序可以允许用户在要求他们确认身份之前进入并使用该应用程序。通常情况下,注册会带来一些额外的好处,比如在Wunderlist中进行跨设备同步,或者在Houzz中创建一本想法书,这会让注册变得更有吸引力。延迟注册并不总是一个好主意,但是选择“注册前试用”可以很好地提高你的应用程序的参与度。


4.操作栏

Facebook Paper, Behance


问题
用户希望快速访问常用的操作。


解决方案
从应用程序的操作栏(或iOS术语中的“工具栏”)提供对重要操作的快速访问。虽然导航条主导了web和早期的手机应用程序设计, 但其他模式的使用,如折叠、滑出式工具栏和侧边栏、指向所有内容的链接、按钮转换、垂直的和基于内容的导航,产生了更简单的应用程序视图,用户可以专注于一级和二级操作,而不是二级导航。常见的操作有:在应用程序中搜索、共享和创建新内容。这个存留的菜单可以帮助用户熟悉UI,还可以通过专注于与用户相关的重要操作清除一些混乱。


5.社交账号登录

undefined

Beats Music, Flipboard


问题
用户需要一种更简单的注册和登录方式。


解决方案
整合社交账号登录方法,允许用户通过现有账户登录。这意味着他们少了一个需要担心的用户名/密码组合,同时,你也不必担心密码的安全性。Facebook、Twitter和谷歌是主要的OAuth登录提供商,根据平台和目标受众的不同,你可以在你的应用程序中提供所有这些或其中之一,而不是让用户建立一个他们可能会也可能不会在未来使用的单独的帐户。使用这个注册和登录模式也可以为你提供一些基本的关于用户的数据(当他们使用应用程序时,会自动填充数据), 同时,通过不强迫用户在刚下载的陌生应用程序中输入他们的详细信息,让他们更加舒适。这个简单的特性可以在很大程度上改进你的UX,因此这种模式正在成为一种期望。


6.巨大按钮

Tinder, Shazam


问题
用户希望立即知道他们可以采取哪些操作。


解决方案
理想的触屏点击目标大小可能是72 px,但是一些应用程序,像Tinder,也会给你巨大的按钮让你确切地知道该做什么, 无论你在什么位置,无论你在做什么,你都能很快完成操作——很难错过这些巨大的按钮,即使你没在仔细看。这在更简单的应用程序中尤其有价值,因为在这些应用程序中,用户需要执行的操作非常有限,因此更有理由让他们在各种情境中更容易地执行这些操作。例如,Shazam是用来看电视或听音乐的,它实际上只做一件事。对于试图在这种分心状态下进行多任务处理的用户来说,巨大的按钮是一个巨大的改进。


7.滑动操作

Carousel


问题
用户希望关注特定的内容。


解决方案
允许内容被滑动或移动。这为用户提供了一种非常直观的方式来处理屏幕上的信息。例如,谷歌中的“卡片”现在可以在你不需要的时候被滑走,以清理杂物;类似地,Tinder中的配置文件可以向左或向右滑动,以表示积极或消极的响应。这个模式与我们在导航模式中讨论的滑动视图不同。在这里,滑动手势被用于一项操作,而不仅仅是浏览。有些应用程序结合了两种滑动模式,比如Carousel,它可以让你通过将照片滑动到一边来浏览多张照片,也可以通过向上或向下滑动来分享或隐藏照片。邮箱推广了电子邮件客户端的左右滑动操作,允许你分别通过向右或向左滑动将邮件标记为已读或安排为待处理。Secret用让你发现新菜单的方式来让你发现新动作。向左滑动一个secret代表你喜欢它。


8.通知

LinkedIn, Facebook


问题
用户希望了解他们应该浏览的新活动或操作。


解决方案
通过标记新内容来突出最近的活动。这个模式有几种实现方式。例如,在标签上放置一个计数徽章是由iOS推广开来的,但现在这也可以在许多其他应用程序中看到,如LinkedIn、Facebook或Quora。Twitter在通知按钮上也这样做,但它在时间轴图标的顶部还有一个小点,以更微妙的方式指示新的活动。另一种显示通知的方式是在应用程序中使用一个向下拉的横幅来显示新活动。Facebook应用程序也能做到这一点,当新闻推送中出现新条目时,它会弹出一个小窗口。


9.显性控件

Secret


问题
用户希望快速访问那些二级的或仅与应用程序中的特定部分或内容相关的控件。


解决方案
清理杂物,让用户只在需要时才发现特定的操作。这些看不见的控件可以通过任何手势来访问——滑动、轻击、双击、长按等等(我们在手势模式中讨论过)。这使你能够将这些操作保留在屏幕之外,从而节省一些宝贵的空间。例如,Secret使用手势而不是可视控件。向右滑动,就会出现一个动作菜单,这是我们前面介绍过的折叠模式的简化版。在创建内容时,用户可以在背景上水平滑动或垂直滑动手指来改变背景的颜色和图案,或者在使用图片时,可以改变图片的亮度、饱和度或模糊度。没有其他控件允许你这样做——也不应该有其他控件。这种UI设计模式非常直观、清晰,你一定会看到更多这种类型的交互。Pinterest是另一个使用手势隐藏动作按钮的应用程序。长时间按下一个图像,就会出现一个按钮,用户可以通过将弹出控件拖动到该按钮上来对其进行固定或评论。


Uber是这种设计模式的另一种实现方式。Uber还可以让你在预订和查看车费估算之间进行切换,只要你选择了你想要的乘车类型,就可以通过点击滑块按钮来查看车费估算。这是一个简单而又重要的UI设计模式,每当我在做五件事的同时还想搭个便车,同时还要确保Uber不会用峰时价格来骗我的时候,它都会让我微笑。Snapchat和Facebook Messenger允许你在需要的时候通过滑走所有朋友的账户来访问这些功能。


10.可扩展输入

YouTube


问题
用户希望关注内容,而不是牺牲屏幕空间给控件。


解决方案
设计当用户点击时会展开的控件。这使得大多数控件在用户需要它们之前都不会出现。例如,YouTube和Facebook通过将搜索栏隐藏在一个图标后面来节省屏幕空间,当用户点击这个图标时,它就会展开成一个搜索栏。


11.撤销

Gmail, Chrome


问题
用户希望在没有中断(例如:确认)的情况下快速地执行操作,但是可以选择恢复意外操作。


解决方案
为用户提供一个简单的方法来撤销他们的操作,而不只是要求他们事先确认。在某些情况下,某个操作可能会导致不方便或数据丢失,例如删除电子邮件或编辑一些文本。用户可能因为不知道会发生什么而完成了一个动作;一个宽容的用户界面可以让他们体验到更多的参与感和友好。对于高级用户来说,撤销功能也很强大,他们会喜欢在整个过程中不用UI反复询问他们是否确定要继续操作,就能更好地控制局面。在解释将要发生的事情时,确认弹出窗口可能很有用,但是用户可能直到看到操作的结果才会理解其含义。在这种情况下,最好是让开,同时提供一个安全网络,以防出现错误。


获取用户的输入
时刻记录你应该从用户那里获得输入的位置,他们是否曾经查看过这些输入区域,他们使用这些输入控件的频率,他们从哪里来,又从哪里进入应用程序(即用户流),等等。不断地重新安排、重新排序、调整大小和调整这些控件,直到你获得更多所需的操作。当然,当用户能够提供输入时,要深入考虑他们实际上是如何使用你的移动应用程序的——确保你在设计应用程序时没有遗漏什么明显的东西。

文章来源:站酷  作者:马克笔设计留学

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

Web产品的适配设计选型

ui设计分享达人

开篇


  • 宽度单位我是用百分比还是px?还是rem?区别是什么?

  • 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、设备像素、css像素?浏览器窗口大小和设备大小和分辨率大小区是什么区别?

  • 什么是响应式网站,自适应又是什么?两者有何区别和联系?

  • 百分比宽度布局和流式布局和前者的关系是什么?

  • 既然响应式这么流行,为何淘宝、京东等没有去做,而是单独开发了一个移动端版?这里面有那些坑需要避开?



历史长廊


在早期,硬件设备落后,网页使用的是绝对静态布局为主,绝对固定宽度的布局被称为是静态布局(StaticLayout),也有叫固定布局(Fixed Layout)。


后随时代变迁,技术发展。因浏览器的增多,开发者们忙于兼容各种浏览器。在这个期间,实际已经有了针对各设备适配的解决方案,只是未成为主流,这种新布局方式叫自适应布局(Adaptive Web Design,简称AWD)。

在当时,大多指的就是宽度自适应布局。在这种新思想下,又出现了两派的具体解决方案:百分比宽度布局和流体式布局(Fluid Layout)。


在当时,大家都还没有响应式布局的概念,但此时出现了一个新的词--渐进增强。渐进增强出现后,另一个词优雅降级也随之出现了。这里只是举个典型的例子:gmail和qqmail。这两个都是百分比宽度布局,都属于自适应布局,但有区别。


qqmail就是css hack的完美体现,你用任何一个浏览器,几乎可以看到同一个样子的邮箱,为的是用户体验统一。gmail则使用了渐进增强,你的浏览器越新越强,你看到的效果就越好,为的是用户体验增强。再后来,Google发布了Android,移动互联网爆发,html5标准发布。


互联网大战从PC打到了手机。手机虽然屏幕变小了,但是却提供了更丰富的功能,用户要求不断提高,网站更加看重的是用户体验了,所以,谷歌式的渐进增强被广泛认可,结合自适应的思想,出现了响应式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。


描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备。



现如今,为何需要考虑多设备的兼顾呢,依然是因为时代发展与生活方式的变迁:

  • 即便是PC或Mac用户,有查显示只有一半的人会将浏览器全屏显示,而剩下的一般人使用多大的浏览器,很难预知;

  • 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加,“主流设备”的概念正在消失;

  • 屏幕分辨率正飞速发展,同一张图片在不同设备上看起来,大小可能天差地别。

    结合自身产品用户访问浏览器分辨率

  • 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

因此我们需要在了解基本布局方式的特征下,选择适合自身产品的布局实现方式。


布局方式对比


静态式、自适应、流体式、响应式布局,A+R混合布局的特点对比如下


静态式布局:

窗口缩小后内容被遮挡时,拖动滚动条显示布局。不管在哪种设备,哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。



自适应布局:

用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。


分别为不同的屏幕分辨率设备设计不同的样式布局,相当于多个静态布局组成的一个系列合集,每个静态布局对应一个屏幕分辨率范围,页面通过百分比自动适配设备屏幕分辨率和可视窗口大小,当可视窗口改变时,不会出现横向滚动条,UI,图片,文字会自动缩放,元素内容、布局、交互方式基本不变。



弹性布局:

以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果。



流体式布局:

属于自适应的一个子集,也是通过百分比自动适配设备屏幕分辨率和可视窗口大小,不同于百分比自适应的是随着窗口大小的改变,页面的布局会发生小的变化,可以进行适配调整,这个正好与自适应相补。



响应式布局:

如果从广义上讲,响应式布局实际上就是更好、更机智、更灵活的去实现自适应,他们都算是一种弹性布局。再通俗点讲响应式重在于「响应」它会随着设备属性(如宽高)的变化。


页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和删格、布局、图片、css media query的使用等。


狭义上讲,响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。



A+R混合模型布局

R和A上的区别

当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。


他们之间主要的区别是DOM结构,当采用响应式思维开发时,HTML代码在各种情况下都会一样(除非你用JS移除某些DOM节点),而在自适应开发中我们可能会有不一样的代码结构和体验。


R采用流体+断点,在断点之间,页面依然会随窗口大小自动缩放(通过fluid grid),直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始(通常采用mobile first策略),所以旧的网站要做RWD很可能要完全重建。


A只在针对几种分辨率(如320,480,760,960,1200,1600px)进行优化,在断点之间的自动过渡比较少。而A则采用保留现有桌面网站(desktop version)而对于更小的分辨率做针对性的优化(适应),减小重构的成本。



两种设计思维都是有效的,需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计,例如通过自适应开发来构建定制化体验。


两种方法各有利弊,但是如果同时使用它们到底会得到什么呢?A+R模型结合了基于单个主要临界点的自适应和响应式方法。


混合式布局就是为不同终端设备的屏幕分辨率定义布局(适配各种尺寸的PC、手机、穿戴设备等等),在每个布局中,页面元素随着窗口调整而自动适配,混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。



自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。


很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能是保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点,后面内容会讲到)保持统一逻辑。


否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式,非等分的多栏结构布局则需要采用混合布局的实现方式。


选型

如何考虑实践过程中的判断呢。一是看应用场景,二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。


但请注意响应式不仅仅是响应式布局。对于大型站简单用media query是远远不够的。于是在同一个controller层上,识别UA,渲染不同版本的模板,组合相应的静态资源。这也算是响应式。开发及维护成本明显提高。

当各个版本间的差异很大时,维护成本很可能会大到无法接受。即便分开做,架构上也要调整,后端服务化,应用层app化。


根据不同公司的技术特点,调整的成本也难讲是否可行。对于大型站,分开做更清晰,同时用响应式组件解决复用、功能同步的问题。总之,根据场景响应式可以从各种层面,各种粒度上做。这是现代web开发的特点。


建议开发一套响应式电脑网站(过渡到平板端,不过渡到手机端)和开发一套响应式手机端网站(过渡到平板端以下的尺寸,不过渡到平板端)响应式布局有可能造成冗余的代码较多,对研发的要求也更高,比如如何更好地让图片,适配,UI动画自适应各种布局。


大站还是要考虑数据计算和承载的问题,会对桌面和移动端输出不同数据,减轻压力。



实践与技巧

首先,我们需要了解几种分辨率的差别。


ps:原生应用可查询横纵两个方向的像素密度,通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率


以一个SaaS类后台产品为例,对于基本流量来自Web端网页的产品而言,需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况,数据来源百度统计,如图所示:



如上所述,选择适配方式时,设计目标为:区分web与pad端可共享的设计布局大于手机端,且产品规划上web端为主流量来源,pad端属于短期兼顾。考虑技术维护成本与开发成本的平衡,于是判断需要选择A+R模式来完成产品的跨端设计。


自适应(A)方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点,根据全局统计信息定义,我们会得到一些相似处:

  • 左侧的可视区代表整个屏幕小于960px时的具体布局和内容

  • 右侧的可视区代表整个屏幕大于等于960px时的另一种布局



在使用响应式(R)技术时,我们可以利用主要临界点创建两个互不相同的体验情景,每种体验里,我们都可以在可用空间内定义二级临界点去调整布局。



通过结合自适应和响应的方法,我们得到A+R模型。利用自适应技术,我们将致力于体验和功能,作出两种不同的情景设计。使用响应式组件,我们可以处理上下文内的UI组件和布局。



这种设计方法要求设计师真正了解他们想要提供的体验,以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的,你的产品将具有很强的灵活性,但同时也很复杂。


因为你要处理不同的代码库和环境(非强制性),Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站,则可以根据移动用户的期望来检验它们是如何改变的用户体验的。


其他辅助手段


删格

栅格系统可以帮助我们设计,但却不能保证我们的设计。它有多种可能的用途,并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言,这是一项十分有效的辅助手段。


1. 列和槽(Columns and Gutters)列(Column)用于对齐内容。其中的槽(Gutter)是指相邻列之间的空间,把控页面留白,有助于分隔内容。



2. 页面边距(Side Margins)页边距是指内容和屏幕边缘之间的空间。将边距宽度定义为固定值,这些值决定了每个屏幕尺寸的最小呼吸空间。



3,用于组成栅格的列数称为列结构。8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。12列结构是相对灵活的。它可以进一步细分,将内容排列在4-4-4或3-3-3-3大小的文本框中,也有部分设计系统采用来24列的形式,如Ant-D

4,断点是指屏幕尺寸的特定范围,列结构、列宽、槽宽和边距都取决于断点。在这个范围内,布局会根据可用的屏幕尺寸重新调整,以获得最佳的布局视图。


如果较小的屏幕有足够的可用空间容纳内容,则列将按比例缩小。如果一列的内容无法在较小屏幕上显示,该列将垂直放置图文内容。

5,网格规则,列跟槽的宽度是以网格作为基本单位来做增减,所以应该先定义好栅格的原子单位,“网红款”8点网格指的是设计页面时,也应该遵循8点规律。值得注意的是,列跟槽的值尽量取8的倍数,但不是非得是8的倍数。


产品中各类元素应该遵循这个倍数原则(图标、组件大小等),不同的设计系统根据自身需求,设定这个规则。例如在Material Design中使用的是2X网格。

6.流体栅格与混合删格

流体栅格有不同宽度的列,固定的槽和固定的边距。流体栅格有灵活的内容宽度,根据屏幕大小变化在流体栅格中,列可以增长或收缩以适应可用空间。


混合栅格既有不同的宽度,也有固定宽度。在现代布局中,一些元素超出了网格边缘,与屏幕边缘对齐。页眉、页脚、出血都是一些常见的例子。


如果内容宽度大于可用的屏幕尺寸,那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格,以充分适应内容。

结语


设计需在技术方案前介入,根据你的产品特点,进行设计方案评估,可借助的手段有删格,网格规则等,设计断点规则时,需关注设备的常见系统分辨率。


移动和桌面设计的差别远不止是布局问题。只要有足够的编程量,这些差别是可以通过响应式设计来解决的。事实上,你可以认为如果一种设计不能兼顾两种平台的主要差别,就不能算是合格的响应式设计。


但是,如果确实想要处理好平台间的所有差异,我们就回到了原点:进行两种不同的设计或者使用A+R的模型,在寻求合适的过程中,关注技术的革新。


A与B不是硬币的正反面,它们为了解决同一个问题而生,是同一种思想的延伸。

文章来源:站酷 作者:酷家乐

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



空状态-用户体验最被忽视的方面

ui设计分享达人

管对用户体验很重要,但空状态经常被忽略。知道它们是什么以及如何使用它们,应用于UX最佳实践,可以产生很多好处。

 

什么是空状态?

UX设计师有很多机会来创造愉悦而有意义的体验。一种经常被忽略的机会是“空状态”或空白屏幕。空状态是用户体验产品时无法显示的时刻。

以下是一些常见的空状态情况的示例:

A. 一个新的Dropbox屏幕,其中未创建任何文件或文件夹。

B. 在待办事项列表管理器中完成所有任务后的结果屏幕。

C. 不支持命令时,在Slack中显示错误屏幕。

D. 启动一个新的社交帐户,并且没有任何连接。

E. 在Gmail中搜索内容,但没有结果。

这些介于中间的时刻提供了改善用户体验并因此扩大商机的机会。对于UX设计人员而言,抓住一切机会来改善用户体验并为业务增加更多价值是一件好事。

一个有用的空状态将使用户知道发生了什么,为什么发生以及如何处理。这是良好的空状态UX设计的两个示例:

在首次启动产品时,Dropbox Paper为用户提供了良好的空状态界面。号召性用语按钮可帮助您继续使用,而不必担心下一步该怎么做。


搜索查询不返回任何结果时,空状态界面设计的一个很好的例子。该界面提供有用的参考,并让用户知道发生了什么。

 

以下是一些机会错误的空状态设计示例:

这是一个空状态的界面,可以提供一些反馈,但是却错过了向用户提供任何其他指导或要采取措施的机会。

 

在这种空状态的界面中,我们只是看到一个几乎空白的网页。图像本身很棒,但是它不会引导用户沿任何特定路径点击,也不会通知或指示用户。

 

空状态的类型

这是四种常见的空状态:

A. 首次使用–在没有其他内容可以显示时,例如新的Evernote或Dropbox帐户,发生在新产品或服务上。

B. 用户已清除–在用户完成诸如清除其收件箱或任务列表之类的操作且结果为空白屏幕时发生。

C. 错误–发生错误时或由于网络问题而导致手机脱机等问题时,会发生这些错误。

D. 无结果/无数据–在无内容显示时发生。如果有人执行搜索并且查询为空或没有可用数据显示(例如,在筛选没有数据的日期范围时),就会发生这种情况。

随着空状态设计受到越来越多的关注,UX设计人员发现,从业务和用户体验的角度来看,利用它们都有有益的结果。

 

使用设计良好的空状态的好处

设计周到且有用的空白状态屏幕可以帮助提高产品参与度,使用户满意并减少用户流失。

Scott McKain在他的《客户真正想要什么》一书中提出了出色的客户体验的六个指导原则。

a. 引人入胜的体验

b. 个人重点

c. 相互忠诚

d. 差异化

e. 协调

f. 革新

当将这些原则应用于空状态设计时,它们可能对企业非常有益-例如,提高产品满意度和降低放弃率。

以下三个方面也可以从良好的空状态设计中受益:

A. 用户入门–除了增强的用户体验之外,还提供了建立信任和继续使用产品的机会。

B. 品牌建设–产生知名度并提升公司形象,以建立更多的品牌资产。

C. 个性化–在各种使用状态下都有趣或充满活力;营造一种个人风格的感觉。

设计良好的空状态的好处不可低估。它们不仅为引人注目的客户体验做出了贡献,而且随着客户满意和参与的机会窗口越来越短,它们可以说是非常好的体验。

 

如何用目的填充空白屏幕

以下是一些UX最佳实践,可确保将空白屏幕设计为有用的信息。

共情。UX设计师即使在产品的最黑暗角落也能创造出更好的体验,这一切都增加了惊喜。对于空屏幕,同理心的消息传递增加了多样性,并创建了一种更具吸引力的个性化体验。

Gusto是用个性化和一些有趣的个性填充空白状态屏幕的一个很好的例子。

 

意象。有一种设计原则称为亲生物效应。从自然角度看,这是一种减少压力和提高注意力的状态。添加一些风景图像(例如,空状态错误屏幕的背景)可以带来更愉悦的用户体验。

围绕亲生物效应设计的空状态屏幕可通过减轻压力和帮助参与而对用户体验产生积极影响。

 

正确的指导。根据产品类型的不同,可以使用空状态来指导用户。一个很好的例子是项目管理应用程序。使用新帐户后,尚无任何项目在进行中,这为帮助用户快速入门提供了潜在的绝佳机会,从而减少了放弃的机会。这是一个例子:

Evernote在引导用户使用其空状态页面设计方面做得很好。

 

入门内容。有很多屏幕空白的时间足够使用户感到沮丧和离开。对于某些产品,提供良好的入门内容有助于他们直观地了解正在发生的事情以及下一步可以做什么。

这是带有启动程序内容的空白状态屏幕的示例:

它为用户提供了基础,并减少了产品混淆和遗弃的机会。

 

提供一个行动步骤。对于某些产品,我们不需要提供指导或在屏幕上填满任何内容,因为这没有任何意义。在这种情况下,设计人员可以简单地提供一个动作步骤。

但是,最好将动作减到最少。希克定律指出:“做出决定所需的时间随着选择的数量和复杂性而增加。” 因此,当号召性用语最多保持一两个时,用户可能会更快地采取行动。这是一个很好的例子:

它告诉用户采取措施,但仍将其保持在最低水平。

 

另一个很好的例子是Instagram。当人们不熟悉该平台时,他们还没有关注任何人(也没有人关注他们)。专注于Instagram的所有出色功能很容易,但是,一个良好的空白状态屏幕可以为他们提供“添加要关注的人”的选项。

当首次使用该平台时,Instagram用户会以一种快速便捷的方式来寻找人。

 

结论

在UX设计中很容易忽略空白状态(或空白屏幕),因为它们很少发生并且并不总是很容易理解。但是,将它们包含进来的好处被低估了,因为它们可以增强用户体验并帮助创建更具凝聚力的产品。

文章来源:站酷 作者:对啊设计君

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

30个启发性的3D图形Web设计概念

ui设计分享达人

在平面插图趋势大放异彩之后,3D图形又回到了主流,并在Web和移动用户界面,插图,动画视频和广告图形中表现出明亮而多样化的性能。最近几年,在不同的团队和媒体资源对UI设计趋势的所有众多评论中都提到了3D艺术和动画。因此,越来越多的设计师将它们集成到网站和登录页面中。

以上为Web端设计中的3D的图形运用,希望可以给大家启发,共勉。

文章来源:站酷  作者:对啊设计君

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

声音设计的魅力是你想象不到的

ui设计分享达人

声音记忆是一种非常普遍存在的现象。声音是基于人类本能的记忆方式,虽然并不代表它是最强的一种记忆形态,但它是最直接、原始的,因为它包含了结构化的图像、符码等特征,所以声音发出时本身就隐藏着巨大的想象力,既有直观又有想象,而且往往是被动接收的。尤其是当我们听到一段熟悉的音乐或是文字、音效,自然而然地就会想到某些事情。我一直认为音乐是记忆的载体,当然声音本身更是如此。


Ototo是一个可以让你使用任何导电物体来演奏音乐的电子套件。主控板上有对应一个八度内的所有黑白键的孔位,通过鳄鱼夹把任何的导电物件(水、水果、植物、金属餐具等等)与这些孔位相连,就能把这些导电物体变成按键。它的核心在于PCB合成器,实际上它是一块袖珍电路板,12个黑点和数个白点组成“琴键”,再加上一个外置的扬声器,只要与可导电的物体相连,摩擦就能发出声音。即便你是不懂乐理知识的人,即便没有专业的设备,也能拿起手边的日常小物创作一段美妙音乐。它还可以外接四种传感器的连接方式来改变声音模式。

Bareconductive的板子我之前在另外一篇文章中介绍过了《聊一聊音乐套件Bare Conductive Touch Board》,它比OTOTO的优势在于它有两种基础连接方式,鳄鱼夹和导电墨水。相对于鳄鱼夹,导电墨水体积更小,更方便。

下面再给大家介绍几个音乐装置项目:

  • + Looks Like Music +

Looks Like Music是Yuri Suzuki在2013年为卢森堡的Mudam艺术博物馆的暑期公共项目创作的互动式音乐装置。Yuri Suzuki设计了一系列几何造型的小型机器,它们可以沿着用马克笔画出的黑色线路前进,参与者可以在黑色线路边上涂色,这些小型机器会在经过这些颜色时把它们“翻译”成为声音。通过试验不同的涂色以及颜色之间的间距,参与者就可以创作出基本的曲调。

下面这个装置是个公共音乐装置,6个高度连小朋友也能够到的声音装置站立在博物馆外的广场上,它们能吞咽、扭曲声音和回声,组成一个音速游乐场。在任意一个喇叭面前,你都可以发出声音,说一句话,唱一句词,声音会通过弯弯曲曲的管道流淌,至于这条声音将从哪一端的喇叭里流出,就要靠你自己去探索了。

  • Synth Play

推动不同充气体的不同位置,随机产生的音乐就会响起。几个朋友共同配合,在推一推的解压氛围中便能创作出一支专属于你们的曲子。这样的创作方式将诞生出无数种组合,每一点微小的变化,都会带来微妙的听觉享受。有点呆萌的白色方块用来设定节拍,两个白色的充气体是创作音乐的主力,黑色充气体则用来控制和调节音效。

  • Face the Music

在名为 ‘ 面对音乐 ‘(Face the Music)的互动性平台上,你可以通过面部识别系统演奏电子音乐:抬抬眉毛敲敲鼓,张大嘴巴调音调,晃晃脑袋调整音长。还有歌剧、科幻小说、蓝调和电子舞曲等四种风格供你自由选择。

声音设计是很大的一个领域,现在还很少有学生专门做一个音乐装置放在作品集中,同学们如果感兴趣,想尝试的话,可以构思构思,为自己的作品集多增加一些色彩。


文章作者:程雅秋
英国皇家艺术学院产品设计硕士
擅长产品服务系统设计、用户体验设计和硬件Arduino交互

文章来源:站酷  作者:马克笔设计留学

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


聊天机器人的用户体验

ui设计分享达人

今天的聊天机器人远非“智能”,它们引导用户通过简单的线性流程,我们的用户研究表明,每当用户偏离这些流程时,它们都会遇到困难。

聊天机器人是智能助手的可怜“亲戚”。


定义:聊天机器人是一种特定于基于文本的对话界面,支持用户完成有限的任务。


在其他地方,我们讨论了智能助手的6个特性:语音输入、自然语言处理、语音输出、智能解释、代理和前面所有特性的集成。聊天机器人只需要具备这两种属性:自然语言处理和智能解释。换句话说,聊天机器人应该能够以自然语言接收查询,并正确地理解和解释它们(然后执行它们)。


在当今世界,至少有三个不同的因素推动着聊天机器人的发展和普及。首先,人们希望通过用机器人取代人工代理人来降低客户服务成本。其次,像微信这样的基于对话的系统的成功,提出了聊天机器人作为企业和服务的交互渠道的想法,旨在补充现有的渠道,如移动网络和移动应用程序。最后,Alexa和Google Home等语音智能助手的流行,促使许多企业在较小规模上效仿它们。


这些因素映射到今天可用的两种不同类型的聊天机器人:

在企业与客户之间的聊天交互中,客服机器人会接管部分人工负载。这类机器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


交互机器人的目的是提供与业务交互的额外通道,而不是用于客户服务。例如,Domino的批萨机器人允许用户订购批萨;来自Progressive公司的Flo可以提供一份汽车保险报价。这种交互机器人可以在各种平台上使用,其中最著名的是Facebook Messenger。(其他平台包括Twitter和Slack。)然而,它们也可以存在于应用程序(美国银行的Erica)中,或者通过短信(Capital One的Eno)提供服务。

UPS.com网站使用聊天机器人来回答客服问题。

Kiehl ‘s Messenger聊天机器人:用户可以通过在“发送消息”文本框中输入文本或选择屏幕上显示的选项之一(发送位置或邮政编码;文本输入框下面的主菜单选项)。


虽然客服机器人通常是纯文本的,但交互机器人将文本与可视化UI元素结合起来作为交互方法。


研究


为了了解聊天机器人的可用性,我们招募了8名美国参与者,让他们在移动设备(5名参与者)和桌面设备(3名参与者)上执行一组与聊天相关的任务。其中一些任务涉及为客户服务而与人或机器人聊天,另一些任务则针对Facebook Messenger或基于短信的聊天机器人。


对机器人的态度


一般来说,人们对机器人的态度从中立到略微积极。互动机器人是一个相当模糊的渠道:在我们的美国研究中,大多数参与者之前从未与此类机器人互动,他们也不知道它的存在。相比之下,微信公众号页面通常是这些机器人的复杂版本,我们的中国参与者对它们很熟悉。我们的一些参与者惊喜地发现了这个互动渠道,其他人则认为与其他传统渠道如网络或移动应用相比,它并没有带来足够的价值。


人们普遍认为客服机器人不如人类代表有帮助,但我们的参与者也认为它们有一些优势。最重要的优势是速度:与人类聊天通常需要很长的等待时间(要么在队列中,要么在对话开始之前,要么在人类为客户的问题寻找解决方案时),而机器人可以是即时的。另一方面,人们觉得与真人接触表明公司关心客户:“真人真的很好。他们卖给你一件昂贵的物品,所以他们必须在代理人身上花更多的钱。”另一个人说:“如果你有一个人(负责客户服务),那意味着你足够关心;如果你有一个机器人,那么·你应该有一个真正好的机器人。”


交互机器人通常很容易被识别为机器人,但客户服务机器人很难识别。有些企业并不总是提前向客户透露他们正在与机器人进行交互。我们认为这是一个错误。我们的研究参与者很高兴看到企业使用机器人是透明的,因为他们可以调整自己的期望和语言。例如,当用户意识到他们是在和机器人说话时,他们往往会更直接,使用基于关键字的语言,并避免礼貌标记。这种类型的语言通常比通常在正常对话中使用的复杂、间接的语言更成功。


用于交互聊天机器人UI


交互样式
文本和链接/按钮都可以用于向交互聊天机器人输入信息。它们的目的略有不同:

  • 预先确定的链接和按钮避免了用户输入。这些通常显示在一个轮播列表中,可以包括图像。人们喜欢有这些选项,甚至希望它们成为常用输入。

  • 文本允许用户在选择他们想问的问题类型方面有一定的灵活性,并允许他们偏离聊天机器人(通常过于严格)的脚本。


这两种输入机制都很重要,应该同时存在。


当机器人不允许用户选择选项,而是要求用户输入时,用户会抱怨。例如,一个参与者被Booking.com的机器人惹恼了,因为它不允许他选择日期,他必须输入日期。在输入“感恩节”之后,他说:“应该有一些明显的东西来预先填充它。选项应该预先填充——手动输入很乏味。我应该可以点击按钮才对。”

人们更喜欢选择一个选项(左边是Domino的聊天机器人),而不是输入冗长的文本(右边是Booking.com)。考虑为最常见的输入创建按钮。


一些机器人完全取消了输入文本的选项,迫使用户选择屏幕上显示的选项之一。这种类型的设计使机器人类似于一个网站,并限制了用户可以在系统内探索的路径。

Car Dealer聊天机器人不允许用户在选择库存选项后输入自由文本。


当链接和按钮被清晰地标记时,它们的效果最好,人们希望能够点击交互机器人显示的几乎所有非文本元素。例如,当eero Messenger机器人展示一组图片来说明eero的行为时,我们的大多数研究参与者都会点击这些图片,希望获得更多信息。

Eero for Messenger(左):为了告诉我更多信息,该机器人显示了一个轮播,上面有几张图片和一组可能的延续(文本在圆形框中)。用户希望能够点击轮播项,但这些并不是链接。Kielh’s for Messenger (右):轮播上的大图片是不可点击的,但是下面的链接是可点击的。


除了常规的按钮和链接,一些交互聊天机器人还有一个菜单元素,当被选中时,它会显示一组可能的任务。菜单有时显示在输入文本框下面,有时显示为旁边的一个小汉堡包图标。

金州勇士队在输入框下面有一个主菜单链接。选择此链接将显示一组可用的任务。当用户开始在输入框中输入时,菜单图标就显示在它旁边。主菜单链接和汉堡包图标做了同样的事情。


其他链接有时显示在消息框下面。这些链接是相当容易发现的:我们的几个用户与它们交互;然而,靠近输入框的图标不太可能被使用。

CNN bot:信息区下面的链接显示了聊天机器人的一些主要任务(头条新闻、主题、设置)。


线性流


交互聊天机器人似乎最像Alexa的技能:它们被设计用来指导用户完成少量任务。机器人支持的任务最好被概念化为具有有限数量分支的线性流,这些分支依赖于可接受的用户答案。机器人提出一个问题,其答案将推动机器人前进到流的右边分支。

一个线性流程的例子,机器人可能通过它来完成一个任务


当用户遵循流程并提供符合系统期望的“合法”答案,而没有跳跃步骤或使用未知的单词时,用户会感到成功和顺利。例如,一些参与者能够成功地与Domino ‘s Pizza、Wingstop、Progressive等公司的聊天机器人进行交互。然而,一旦用户偏离了规定的脚本,问题就出现了。


例如,当Domino ‘s Pizza机器人询问她的位置是公寓还是房子时,一名参与者输入townhome,机器人回答“我很抱歉。我好像听不懂。”另一位寻找巴宝莉腰带的用户在消息框中输入了“腰带”,但是收到了订单取消的信息。当她把它转换成“女式腰带”时,她被告知要从一个链接列表中选择,没有一个链接与她要找的匹配。

巴宝莉的聊天机器人很难理解用户想要完成的任务,并在机器人的指令表中列出了若干任务。


机器人也很难从问题或意外输入中恢复,有时会迫使用户从树的顶部重新开始,并做更多不必要的工作来获得答案。例如,我们的一个用户想知道起亚是否有四轮驱动的电动车型。为了找到匹配的任务,她不得不遍历整个决策树,回答诸如汽车需要容纳的人数和MPG等问题。当她对车辆类型偏好回答“不”而不是选择一个显示选项时,机器人就会停止并强迫她重新开始。


然而,有些机器人更加灵活,能够理解偏离脚本的请求。例如,一个参与者知道Domino ‘s Pizza正在进行促销活动,他可以让机器人将其加到自己的购物车中。在订餐流程的晚期,他还能够改变其中一个比萨饼的外壳。

Domino ‘s Pizza聊天机器人能够对不属于预订披萨的主要线性流的请求做出满意的响应。左图:用户可以在订购前将订单加到他的购物车中。右图:用户更改了正在订购的两个比萨饼中的一个的外壳。


一些机器人很难做出假设并建立查询的上下文。例如,我们的一名参与者试图与Capital one的基于文本消息的机器人Eno进行交互。他碰巧有两张来自Capital One的信用卡,每次他问一个问题,机器人就会强迫他澄清查询涉及的是哪个账户,而不会将上下文从一个交互传递到下一个交互。


当启动新任务时,机器人通常也不能利用之前输入的信息。例如,我们的一名参与者首先决定叫披萨外卖;她输入了自己的地址,但她被告知Domino ‘s不送货上门。她又开始一遍,这次的目标是去商店取货而不是送货。机器人第二次问她的地址,显然完全忘记了她已经输入了地址。

Capital One的机器人Eno要求用户在回答完每个问题后澄清他询问的是哪个账户。左:Eno只识别用户查询中的关键字“transaction”(尽管拼错了),无法回答用户的特定问题;相反,它给出了其指令库中一个匹配任务的答案。右:Eno重复了之前问的问题。


文章来源:站酷  作者:马克笔设计留学

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



五步法帮你深度分析一个APP产品

ui设计分享达人

不知道你是经常会遇到这样的情况:

拿到一个APP产品不知道如何去分析他的好坏,又或者总是分析的很片面,要么仅仅是交互,要么仅仅是视觉

那么有什么好方法能够帮助我们更全面更系统的分析一个APP产品的好坏呢?


首先

我们需要明白的一点是,我们在分析产品时,应该从山顶逐渐往下看,才能够看到山的全貌,站在山脚下只能看到自己视野几百米的范围。

接下来

我们去分析一个APP产品的时候,就可以通过一个万能的公式更全面更系统的去层层剖析:

1、战略存在层(它为什么存在)

产品的核心驱动力是什么?

这个产品带给用户的价值是什么?

这个产品带给企业的价值是什么?


2、能力范围层(我们自身能力)

能做什么,不能做什么?

现在的能力储备是否能够支持?

做到这个需要什么样的能力储备?


3、资源结构层(内外部资源有哪些)

产品的利益相关者有哪些?

内外部有哪些资源?

竞争对手是哪些,相对于他们优势和劣势在哪里?


4、角色框架层(产品各个角色)

体:产品构建的矩阵如何,这个产品处于什么位置?

面:各个板块的使用场景、目的是什么?

线: 页面的布局如何?

点: 这个功能的目的是什么?用户如何交互?使用流程是否合理?...


5、感知层(如何感知产品的不同)

感知层很多时候设计师都会纠结在细节里面,总会分析色彩、图标、间距等。而感知层最重要的是要分析这个产品的调性如何?和其他同类的差异在哪里?界面设计是否能够吸引用户?


最后

我们通过这个五个步骤去分析下今日头条APP

1、战略存在层

核心驱动力:算法推荐+优质内容

用户价值:今日头条带给用户的价值是通过了解用户的喜好,精准推荐给用户最感兴趣的内容,提升用户的阅读效率

产品价值:以今日头条作为基础的流量池为其他产品相互导流

 

2、能力范围层

2019以前今日头条的slogan是“你关心的,才是头条”定义今日头条的核心是推荐算法

而2019年之后今日头条的slogan是“信息创造价值”定义今日头条的核心是打造优质的内容,让信息创造价值

今日头条从技术到内容的转变,靠的是今日头条的长久以来的能力储备,所以我们会看到今日头条推出的一系列对内容创作者的扶持计划。

3、资源结构层

今日头条的利益相关者:消费信息的用户、产生内容的创作者、广告商

竞争对手: 腾讯新闻(腾讯)、网易新闻(网易)、搜狐新闻(搜狐)、微博...

优势:今日头条通过推荐算法构建了早期产品的核心竞争力,吸引了大批大V和信息消费者,具有先发优势,之后又通过内容产品矩阵构建自己的护城河

劣势: 竞争压力大,都在竞相进入内容领域

 

4、角色框架层

体: 今日头条经过几年的发展,逐渐构建起一个内容聚合平台(图文、短视频、长视频...),作为基础的流量池,为其他的产品相互导流

面: 

首页模块你可能感兴趣的,和你感兴趣的内容

西瓜视频,你可能感兴趣的短视频

放映厅,你可能感兴趣的长视频

所以,我们从导航栏就能够可以看到今日头条产品所构建起来的面:

核心是千人千面定制化推荐,核心之外是图文、短视频、长视频

接下去,就是线和面的分析,这就到了布局和功能层级了,这是交互方面的内容,我就不再一一细说了

线: 页面的布局如何?

点: 加这个功能的目的是什么?用户如何交互?使用流程是否合理?


5、感知层

人去感知一个物体通常常是通过5种感觉:视觉、听觉、味觉、嗅觉、触觉。互联网的产品不像线下体验店5感都能够体现,而我们感知互联网产品主要通过视觉和听觉这2种感觉。

  • 我们听到的是今日头条的报道、今日头条的视频广告

  • 看到的是是今日头条的产品、广告图。而的核心是今日头条的"信息创造价值",围绕这个最基本的核心,给用户的感知才是一致的,才是和其他产品塑造差异化的核心要点。



 

基于这些我们再去分析里面的细节就游刃有余了

比如,同为新闻自媒体平台,今日头条把内容创作者放置在列表页明显的位置,而网易新闻、腾讯新闻在内容列表创作者的名字却被弱化了,原因就在于今日头条定位的是自媒体新闻平台,重点在于内容创作者,而网易新闻、腾讯新闻定位的是新闻媒体平台,重点在于内容。

文章来源:站酷  作者:馒头UX

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

有效的竞品分析方法

ui设计分享达人

互联网因为技术的快速发展,用户的普遍性决定了互联网所必备的特点就是:创新、用户体验、快速迭代。而竞品分析应该贯彻应用的不同阶段。

 

我们在做竞品分析时,首先确定竞品分析的颗粒度,竞品分析可以做得更细,但是必须根据分析的动机、需求出发,清晰自己的目标,来判定做怎样详细的一个竞品分析文档(根据项目大小、时间限制等,选择适当的竞品分析程度)



01 竞品分析四大流程

1.确定竞品分析的目的:明确分析目的,和控制分析产出一样重要,分析是为了有价值的情报收集,而不是无意义的跟踪复盘。

2.筛选出目标产品:从行业出发去选择对标的竞争对手和潜在的竞争对象。

3.收集竞品资料:从分析的纬度来确定,不同职能区分,侧重点会不同(但各纬度是有机联系的,不可以孤立对待)。

战略定位、盈利模式、用户群体、产品功能、产品界面(交互方式、视觉表现)


4.分析、输出竞品分析报告:可采用【总-分-总】的结构


[ 总 ]

首先说明分析目的,然后拿出各模块的结论,这是第一个;

分 ]

围绕这些结论,展开你的分析过程,所有的过程分模块展示、最好要有数据支撑;如果没有,就要有逻辑表达,这是中间的部分;

总 ]

最后得出你在这次分析之后的感受,认为产品应该遵循什么、借鉴什么、避免什么,这是最后一个。

注:分析要追求的是客观性,不要为了分析而分析,不要为了结论而拼凑论据,分析结论的可用性并不应影响分析的初衷。



02 具体分析从哪些点入手

1.市场分析:市场规模、市场趋势、月活跃人数等

2.用户分析:用户地域分析、用户使用时段分析、用户年龄段、用户性别比例等

3.目标用户需求:A、B、C

4.产品信息:产品基本信息(最新情况、产品口号、产品定位、特点、市场规模)

5.产品迭代信息:版本更新频率、优化程度

6.核心竞争力分析

7.功能结构及其分析

8.基本功能对比

9.功能差异化分析

10.界面分析:主要界面、操作流程

11.盈利模式分析

12.其他方面:根据产品特性和类别区别对待



03 竞品分析的相关方法

1.用户体验五要素法:从抽象概念 —— 具体表象


战略层:

这个层面分析, 大多数情况下得出不了什么实质性的结果(也会有厉害的PM能分析出战略上的建议点,不过这都是属于专门去分析战略层的竞品分析)一般战略层面公司的领导或者创始人起初就会想的很明确。如果这个层面都没思考清楚,项目做的意义也不存在了。

产品目标、用户需求


范围层: 

一般是对明确的几个竞品进行功能清单收集,分析一些差异化的功能,然后分析功能背后的原因。别人这么做,有什么意义?能带来什么样的结果?能衍生出什么?

定义需求(内容清单、功能规格说明)、需求优先级排序


结构层:

针对竞品在这个层面需要下功夫,需要去分析梳理竞品的产品流程。比如:注册流程、支付流程等等。去分析现在竞品大多采用什么样的结构设计,比如:什么Tab结构、抽屉式结构等等。

交互设计、信息架构


框架层:

这个层面需要去收集的是竞品的信息是怎么设计的?收集一些竞品的相关细节设计。

界面设计(页面布局和界面各类控件)、导航设计(全部、局部、辅助导航等)


表现层:

一般不用做过多的分析,可留给设计师发挥,留给设计师专门做这个表现层的竞品分析。

感官设计(实现了以上四个维度需要满足用户的感官感受)


2.YES/NO法

主要适用于功能层面,简单来说就是将功能点全盘罗列出,具有该功能点的产品A便标记为“Yes”,没有该功能点的B产品标记为“No”,通过比对可以清晰地了解功能点上产品间的异同。



3.评分法

这个方法在用户研究工作中常会用到,通常适用于定量研究的问卷调研中,即给出1~5分的区间,根据产品中的某一方面或某点进行打分。


4.分析描述法

指将不同产品特性以比较的形式描述出来。



5.SWOT法

针对所要分析的竞品,从“优势、劣势、机会、威胁”四个维度进行比较和梳理。



并且可以进行两两组合分析:

1)SO战略就是依靠内部优势去抓住外部机会战略;

2)WO战略是利用外部机会来克服内部劣势的战略;

3)ST战略就是利用企业优势去避免或减轻外部威胁的战略;

4)WT战略就是直接减少内部劣势和避免外部威胁的战略。



6.Base+Solution分析法

Base:目标用户是什么?目标用户的核心需求是什么?通过什么解决方案能够满足?同其他产品相比,解决方案有什么差异化和卖点?如何推广营销?市场效果如何?

Solution:解决方案如何实现?还有多少空间?陌生用户进来如何使用?信息组织、交互如何?为什么要这么做?是否符合用户预期?配色、UI是否符合用户审美?用户会在哪里困惑?用户打开产品的频率如何?用户是否会向他人推荐产品?


7.Kano模型(卡诺模型)

是对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

在卡诺模型中,将产品和服务的质量特性分为四种类型:

1)必备属性;2)期望属性;3)魅力属性;4)无差异属性。5)反向属性不是用户需求,提供反而影响产品体验。


具体请查看专题文章:产品分析方法之:KANO模型


注:在描述分析的过程,尽量的可视化你的分析过程,这样别人在看的时候清晰易懂!



04 竞品分析的辅助内容

1.数据的引用

分析报告中针对用户体验方面的要素很容易夹杂过多的主观因素,譬如我们容易下这种结论:这种设计不合理!”这类主观的评断。在一份竞品分析报告中,如果为了说明某一条,那量化的数据必然是重要参考依据之一。所以,数据变得比较富有说服力。

数据从何而来?月活排名可以来自Appannie、Usage Intelligence,网站排名来自Alexa。其他数据包括百度指数、淘宝指数、易观智库、CNNIC、艾瑞咨询、新浪微博、微信、上市公司财报等都是比较主流的平台和渠道可以作为数据来源。


2.对比时有截图作参照

这方便读者了解,也在一定程度上有利于保证整份报告保证清晰可读、重点凸显、结论突出。


3.必要时可加任务或案例

任务和案例起到的作用一是佐证,二是便于读者清晰地能够在相应的场景下理解。比如当比较A产品的某项功能或业务逻辑上的问题时,如果引入一个贴切的典型案例或一个模拟的任务会让读者更加有代入感,更便于说明。

另外,在这里也可以适当的引入真实的用户评论。



05 得出结论/建议

1.首先我们也是按照从大到小去写,从框架—功能—流程这个维度去书写总结!

 2.对于结构:我们应该采用……

3.对于功能:我们应该把功能A、功能B加入到版本V1.0内,把功能C滞后、不做功能D…….

4.对于流程:我们可以借鉴竞品A的某某流程、竞品B的某某流程……

5.对于色彩:我们可以以某某颜色为主、某某颜色为辅……

文章来源:站酷  作者:体验为王UX

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



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档