首页

超全面!移动端弹出层组件的定义、应用与设计

鹤鹤

工作中我们常常会听到或在撰写交互说明时提到“从底部向上出现弹层”、“出现浮层”、展示“对话框”、弹出“弹框”、“出现对话框”诸如此类的话术。我相信大家对“浮层、弹层、弹框、对话框……”等称呼常常也会感到困惑。到底什么时候应该称呼为“对话框,什么时候称呼弹框”,此类相似的组件又是如何分类的,应该如何应用、如何设计。

恰好笔者近期在设计弹出层组件,本篇文章将结合自己的实战经历,自己对弹出层组件的理解和设计经验分享给大家,希望帮助大家对弹出层组件有更清晰的认知和理解。

弹出层组件的定义

首先我们看一下弹出层组件的定义:当触发某项操作时,在页面上方展示的弹出层容器,容器内可展示文本、按钮、列表、标签、表单项等内容,英文名称定义为 Popup。

超全面!移动端弹出层组件的定义、应用与设计

△ 弹出层组件的构成

根据弹出位置的不同,我们又可以将 Popup 组件细分为如下 5 种样式。

超全面!移动端弹出层组件的定义、应用与设计

△弹出层组件的 5 种样式

看到弹出层组件的样式,想必大家已经联想到日常用的比较多的组件了,比如“Alert 确认框,picker 选择器、基于场景的筛选组件”等。弹出层组件是十分基础的组件,基于该组件我们可以开发通用性组件以及场景组件。从“形式”角度来看,“浮层、弹层、弹框、对话框……”本质上都是弹出层。

“浮层、弹层、弹框”是泛指的称呼,两大官方平台也都根据自身的规范对相关组件进行命名。Material Design 和 iOS 官方规范中的弹出层组件如下图所示,并且笔者从“功能”角度出发整理了组件之间的对应关系。后文会详述每种组件的定义及应用。

超全面!移动端弹出层组件的定义、应用与设计

△MD 和 iOS 规范中的弹出层组件

在详述组件之前,还需要向大家传达一个概念“模态”,即平时我们常说的“模态弹框”(弹框可理解为是弹出层的一种样式)。并非有一种组件的分类被称作是“模态弹框”,而是当弹框采用了“模态”的设计手法时,我们将其简称为“模态弹窗”。

iOS 官方定义为:

“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”

翻译过来即:模态是一种设计手法,它使用一种临时性的模式将用户之前看到的内容与当前看到的内容进行区分,并且需要通过明确的操作才能退出该模式。模态呈现的内容可以:

帮助用户专注于一个独立的任务或一组紧密相关的选项,确保用户收到关键信息,并在必要时采取行动

由此可见,弹层是否为模态弹层可以根据具体的使用场景进行定义。在 iOS 官方中定义的模态弹层通常包括:Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后续的系统中将 Fullsreen 也作为模态弹层进行使用。MD 中的 Dialogs 组件均为模态,而 sheets 组件不采用模态设计手法。

弹出层组件的分类与应用

1. 警示型弹框

警示型弹框均采用从页面中间进行弹层的方式,MD 和 iOS 中组件的样式略有不同,但其使用场景和功能相同。都是在重要信息提示、需要用户确认的操作、以及破坏性操作之前进行提示,警示型弹窗会中断用户的任务流程,影响用户体验,因此需注意其使用频率。

超全面!移动端弹出层组件的定义、应用与设计

△警示型弹框 Alert Dialog

使用场景:通常在系统级信息的提示,例如权限的获取、系统通知,需要明确告知用户的信息,以及破坏性操作前使用。

超全面!移动端弹出层组件的定义、应用与设计

△警示型弹框应用

2. 任务型弹层

根据用户在弹层中需要完成的任务内容和任务数量,又可分为简单型和复杂型弹层。

简单型弹层

常用于在弹层中展示内容,需要用户进行选择的场景,该场景通常只需要用户完成一种任务,比如通过点击的方式,完成信息的选择或分享。在 iOS 中采用从底部向上弹层的方式,而安卓平台多使用在页面中间弹层的方式。

弹层中是否存在操作按钮可根据实际应用场景去确定。通常选择项条目较少或内容简单易于识别时,可不需要「确认」按钮。而在选择项条目较多时或需要用户作短暂的思考才能确认选项时,可增加「确认」按钮,允许用户有修改选项的机会。

超全面!移动端弹出层组件的定义、应用与设计

△简单型任务弹层的组件样式

超全面!移动端弹出层组件的定义、应用与设计

△简单型任务弹层的组件样式

弹层中信息的呈现方式又可分为“列表”和“网格”两种,大多种场景下,均可使用列表展示内容,更加符合用户从上到下的阅读习惯;而在分享场景下多通过网格的方式将分享渠道展示出来,增加屏显的内容,同时提高用户查看信息的效率,具体样式可参考上图。

使用场景:简单型弹层多用在信息的筛选、排序和信息确认的场景下使用。且在目前市面上的绝大多数应用中,除原生的安卓应用外,大部分应用都采用从底部向上弹层和从顶部向下弹层的方式。

超全面!移动端弹出层组件的定义、应用与设计

△简单型任务弹层的应用

复杂型弹层

复杂型弹层中通常承载的信息量更丰富,包含多种组件,需要用户完成一系列的任务。

涉及到信息筛选时,通常采用侧边弹层组件进行展示,且弹层上的信息仅支持垂直滚动查看,不支持水平滚动查看,且通常采用“非模态”的手法,方便用户快速取消当前弹层。在 iOS 中并无“Sheets:side”组件,但是在 iOS 系统中,很多 APP 应用在复杂的筛选场景下也都采用侧边弹层的方式。

全屏弹层会将当前页面中的全部信息遮挡,更方便用户聚焦于当前需要完成的任务,避免用户的注意力被分散。通常采用模态的设计手法,仅当用户触发确认、取消或关闭操作时,弹层才会消失。一般全屏弹层中需要包含标题、操作按钮、内容区域。用户在全屏弹层中需要完成多个任务,因此内容区域中也会包含多个组件。例如“按钮、输入框、标签、开关、列表、日期选择”等。

超全面!移动端弹出层组件的定义、应用与设计

△复杂型任务弹层的组件样式

使用场景:通常用于完成复杂任务的表单信息填写、内容筛选、搜索和内容展示。

超全面!移动端弹出层组件的定义、应用与设计

△复杂型任务弹层的应用

需要单独说明气泡框组件

在 iOS 的官方定义中,气泡框组件应用于 iPad 应用程序,在 iPhone 应用程序中,通过以全屏模态视图而非弹出框形式显示信息,来利用所有可用的屏幕空间。但是,组件被定义后并不是一成不变的,而是随实际场景进行应用的。例如,在手机端,气泡框组件更多被用于简单信息的展示与选择。

超全面!移动端弹出层组件的定义、应用与设计

△Popovers 气泡框的应用

小结:

笔者按照使用场景、信息的复杂度、功能的相似度等,将弹出层组件归纳为两大类“警示型和任务型”,并且枚举了常用的 MD(安卓系统遵循的规范)和 iOS 两大规范中定义的弹出层组件,方便读者对弹出层组件有更清晰的了解。需要说明的是,由于业务场景是复杂的、多样的,各位设计师也需要结合实际的业务场景和设计目标,灵活的使用组件。

超全面!移动端弹出层组件的定义、应用与设计

△弹出层组件的类型与使用场景

如何设计弹出层组件

1. 设计目的

首先需要理解我们为什么要设计组件,组件最终设计的目标是什么,笔者从“设计侧和技术侧”两方面谈谈自己的理解。

设计侧:规范的组件设计,对内有利于全公司的设计师对组件的使用有统一的认知,明确组件的使用场景,避免误用和错用组件,并且方便新人设计师快速学习和上手,提高设计效率。对外也有利于保证设计上线后的一致性和规范性,方便用户对本公司产品建立统一的心理认知。

技术侧:通用的基础组件,具有可复用性,能够减少重复开发,大大提高开发效率。

组件设计的最终目标可归纳为保持设计的统一性,提升用户体验,同时提高设计和开发的效率。因此,组件设计是非常有必要的,那么到底如何从 0-1 开始设计组件呢,下面我们来看组件设计的详细思路。

2. 设计思路

其实组件设计的基本思路是通用的,不仅适用于弹出层组件,还适用于其他基础组件的设计。通常我们会从组件的定义、用法、构成、种类、行为与状态五个方面进行组件的设计。

超全面!移动端弹出层组件的定义、应用与设计

△组件设计的思路

  • 定义:通过精准的话术描写组件的内容与目的。
  • 用法:组件包含的内容、出现的位置、信息展示的规则等。
  • 构成:通过示意图展示组件包含的具体信息,例如标题、按钮、内容区等。
  • 种类:根据一定的规则对组件进行分类。
  • 行为与状态:使用组件的整个交互流程与交互逻辑说明;组件的状态说明,例如 normal 态、click 态,disable 态,滚动时的页面状态等。

回归到本文所讲的移动端弹出层组件,组件设计时需要考虑其“通用性和可复用性”。基于此原则,将弹出层组件进行拆解,如下图所示。它包括:

  • 遮罩层:覆盖底部页面上的内容,方便用户聚焦当前弹层上的信息
  • 容器层:承载内容的容器
  • 内容层:容器里的内容,不同区块的内容可单独封装

超全面!移动端弹出层组件的定义、应用与设计

△弹出层组件的拆解

从上图中可看出,本文第一部分提出的 Popup 组件是最基本的弹出层组件,基于该组件可进行任何弹层组件的开发。因此,在弹层组件设计时将 Popup 组件抽离出来作为最基础的组件进行开发, 还可以进一步开发通用的弹层组件和高频使用的场景组件。由于上文中已讲 Popoup 组件的构成与样式,且由于该组件相对来讲比较简单,因此不过多赘述。下面以通用组件“Picker 选择器”和筛选场景下的高频组件“筛选器 Filter”为例进行说明。

设计实战

1. Picker 选择器

定义:用于从一组预设数据中进行选择的控件。

用法:

  • 选择器通常显示在屏幕底部或弹出窗口中。
  • 通常包含 2 个操作按钮“取消和确定”,按钮名称支持修改。
  • 可自定义设置是否显示标题。
  • 支持单列选择和多列选择,多列选择一般不超过 4 列,且多列值之间可配置其级联关系。

构成:标题、按钮、内容(当前选项和其他选项)

超全面!移动端弹出层组件的定义、应用与设计

△Picker 选择器组件的构成

种类:根据选项间是否存在级联关系可将其分为 2 类,普通选择和级联选择。

超全面!移动端弹出层组件的定义、应用与设计

△Picker 选择器组件的分类

行为与状态:状态,给出单列选项和多列选项的常态页面以及选项被禁用的状态页面。行为,需要定义完整的组件交互逻辑,从入口->弹层出现->选项查看->选择目标选项->弹层消失的完整逻辑进行说明。

超全面!移动端弹出层组件的定义、应用与设计

△Picker 选择器组件的状态

超全面!移动端弹出层组件的定义、应用与设计

△Picker 选择器组件的交互流程与行为说明

当完成以上全部内容的撰写时,可对本组件开发出的效果进行说明。例如:

  • 普通选择(以单列选择示例,默认项为第一个选项)
  • 普通选择(以 2 列选择示例,默认项为每列的第一个选项)
  • 多列选择无级联关系(以日期选择年、月、日示例,3 列选择,默认项为当天)
  • 多列选择存在级联关系(以城市选择为例,3 列选择,默认项为每列的第一个选项)。如此的说明会让技术同学本次组件的产出示例更加清晰,可减少开发过程中的沟通成本。

2. Filter 筛选器

Filter 组件是基于公司移动端产品均存在的高频“筛选”场景而总结的场景(业务)组件,其设计思路和上方描述的通用组件的设计思路相同,笔者此处只强调 2 个重点注意事项。

场景组件在设计时遵循“加法”逻辑,从而提升组件的复用率。组件内容分区块进行封装,从而增加组件的灵活性。

超全面!移动端弹出层组件的定义、应用与设计

△筛选器组件

在上图所示的筛选场景中,单类目和多类目筛选若均为高频的使用场景,那么单类目和多类目筛选组件均可以抽离成组件并进行开发,且多类目筛选可基于单类目筛选组件进行开发。但是多类目筛选组件是无法覆盖单类目筛选组件的,组件开发不同于设计稿,设计稿可将多个类目删除掉只剩余单个类目,但是组件的代码逻辑不遵循此删除逻辑。在原有组件的代码上修改的开发成本要高于重新开发组件。因此,如果要修改多类目筛选组件的逻辑,不如重新开发出单类目筛选的组件。这也是需要我们牢记的,组件设计需要从“原子组件到复杂组件”,遵循由“简单到复杂”的加法逻辑。

而在组件开发时通过“goup”的形式进行封装,可使组件更加灵活。例如,当业务场景是需要通过“输入框”组件输入筛选条件,只要将 Group 中的内容改为“输入框组件”,即只需修改该 group 下的代码即可,筛选器组件的其他逻辑仍然可复用,这就提高了组件的通用性和复用率。

当然,Filter 组件还需要考虑很多设计细节,例如类目名称是否显示为当前筛选项名称、重置的逻辑是什么、确认筛选后页面信息会如何变化、筛选项支持单选还是多选等等。复杂的场景组件通常是由多个原子组件组合而成,因此组件的逻辑也更为复杂,组件设计的整体流程和交互细节也应考虑的更加全面。

文章来源:优设网   作者:土拨鼠

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



腾讯Lemon Cleaner改版 设计赏析

前端达人

腾讯Lemon Cleaner改版,设计资源赏析

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏


转自:站酷

作者:小佛v5


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

有用性,可用性,实用性:为什么对设计师如此重要

涛涛

今天,我们来谈谈有关使用的三个概念的含义:有用性,可用性和实用性。前两个术语,:有用性,可用性,在用户体验和设计方面被广泛使用,而第三个术语,实用性,很少被提及。然而,我们将会提到,在三个术语中,实用性可能是对设计师和企业来说最重要的一个。

Author/Copyright holder: MsSaraKelly.


有用性


一个有用的产品能让用户完成一个任务或目标。这些任务或目标只有在一些情景中才是明确且意义重大的,其他情境中则不行。


例如,用户使用文字处理程序包,如微软的Word或者LibreOffice中的Writer能够制作文字文件,包括信件、报告、整本书等等,但任务是明确的,结果是看得到的。我能用这个工具写信吗? 是的,你可以。对于任何想使用文字处理程序包的人来说都可以。


另一方面,一件艺术品可能对某个人是“有用的”,可以照亮他们的工作室,但可能对另一个人就没用了。艺术具有主观性,这意味着不同的人对“点亮工作室”这个任务有着不同的要求,可能需要极为不同的产品来达到这个“有用的”标准。


然而,无论提到哪种有用的形式,重要的是有许多潜在用户认为产品有用。(从商业角度来看,至少要有足够的用户才能让产品盈利)。


任何用户都不可能接受没用的东西。

Author/Copyright holder: Alastair Cook.


可用性


可用性针对的是某个特定产品。可用性说明产品不仅具有有用性,它还要仔细考虑产品的使用方式,以及确保用户愉快、简单(或尽可能简单)且有效地使用产品。


大卫·麦奎琳曾在《达尔文》杂志中发表文章《可用性》,里面提到;“可用性与人类行为有关。它承认人类是懒惰,情绪化的,不愿投入大量的精力做事,比如,获得一张信用卡,他们通常更喜欢做容易的事,逃避难做的事情。”


许多“有用的”产品并不具有可用性。想象一下,有一扇门,外面有个把手,上面写着“只能推”。门肯定是一种有用的产品——它把里外分开,可以确保人们有效地使用空调和暖气,还能降噪,等等……


但是一个需要指示的门可用性有多大呢? 其实,一扇门也就只能推或者拉。从用户的角度来看,当他们看到门时,他们应该清楚地知道需要采取什么行动——如果不能而且需要一个标志来解释; 那么这个门的可用性太小。


值得注意的是,对于一个产品来说,即使可用性小也没关系,但要不具备有用性才是真的糟糕。你看当今世界上有很多带有“推”或“拉”标志的门,这就说明了这一点。可用性较低通常只是一个小麻烦(你可能会抱怨那扇门有多不灵活,但你可能不会去修——因为付出太多回报甚微),而不会影响全局。


然而,许多品牌(如苹果)已经建立了整个产品线,设备比他们的竞争对手更具可用性,即使用途实际上是一样的。例如,iPod并不是世界上第一个MP3播放器。然而,从用户的角度来看,这是当时最好用的MP3播放器。正是良好的可用性让iPod从一众MP3里脱颖而出,成为世界上最畅销、最受欢迎的播放器。

Author/Copyright holder: Aido2002.


实用性


一个产品既具备有用性又具备可用性,但仍然不能被使用。设计的最终目标不是让产品具备这两种性能,而是让用户能用上这个设计。如果没有用户使用,这个产品就是失败的,不管它的设计有多好——它仍然是个败笔。


在个人交通领域有两个有名的案例。第一个例子可能对于大多数读者来说非常陌生遥远—辛克莱C5。克莱夫•辛克莱爵士(Sir Clive Sinclair)是计算机行业的一位领军人物,他普及了计算机并使千家万户都用上了这款产品。他旗下的ZX Sinclair系列电脑卖出了数百万台,全世界的家庭里都传出磁带游戏的嗡嗡声,十分快乐。


成功后,克莱夫爵士决定公布他的酷爱的一个项目—单人电池供电的环保汽车。(尽管它在营销文献中被称为“辅助踏板自行车”)。克莱夫在C5产品的投放市场时投入了数百万英镑。这款产品既具备有用性,也具备可用性,但遗憾的是,人们讨厌它。没有人使用C5,英国电视和媒体经常嗤之以鼻。该产品最初的产量为14000台,结果直到公司破产前,只售出了5000台。


第二件事就比较新。“赛格威”是一种个人交通工具,可以让用户用两个轮子去(几乎)任何地方,它于2001年推出,2002年投放市场。它的发明者迪安·卡门(Dean Kamen)预测在世界各地销售上百万台。事实上,在投放市场后的6年里,它的销量还不到3万部。该公司已经出售和转售多次,自从它推出,虽然赛格威满足了少数人的需求,取得了些成功。但事实却是,人们不使用这种工具。


为什么这两个具备有用性和可用性的产品没有得到使用?在Sinclair C5的案例中,产品未能满足特定的需求。正如BBC最近提到的,如今公众的环保意识十分强烈,Sinclair C5产品可能非常受欢迎,但在C5发布的时候,环保问题还没有这么迫切。

Author/Copyright holder: Aido2002.


以赛格威为例,《连线》杂志说:“但这根本没用: 赛格威在技术方面无人能及。可惜这毫无意义。“该公司未能确保产品在发布时通过过相关法律规定(在许多地方在公共场合使用它们不是合法的,现在仍然是不合法的)。”早期的使用者也报告说,他们因为使用赛格威电动车而遭到嘲笑,形象受到诋毁那么销量肯定无望。


一个成功的产品肯定要得以应用。就算生产了一个具备有用性和实用性的产品,但用户仍可能不想使用它。


如果要使用一个产品,它必须是有用的。但如果没有得到使用,它就没有意义,这意味着它永远不会成功。一个产品也应该具备可用性,以增加使用的机会——一个产品的可用性越大,用户用起来就越舒心,也会更容易说服别人使用它。然而,就算具备可用性和有用性,也不能保证一个设计得以使用。除了可用性和有用性之外,还有其他的考虑因素会影响产品的市场普及度。

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

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

产品出海如何做好设计?

涛涛

国内互联网近几年发展迅速,在很多方面都超过了一些其他国家互联网的发展阶段。随着国内互联网产品竞争日趋激烈,很多企业都把目光投向了用户量庞大的海外市场。而疫情对于全球经济的影响更是加速了海外市场的数字化进程。据 Sensor Tower 数据显示,2020 年 Q1 全球移动互联网应用下载量达 336 亿次,同比增长了 20.3%。

产品出海如何做好设计?来看这篇近6000字的总结

产品出海的第一道屏障就是语言。但若想打造一款能够适应海外市场的产品,只完成不同语种的翻译是远远不够的。在产品设计的过程中,我们需要考虑两个方面:国际化与本土化。

国际化+本地化的策略,也就是“glocal—global+local”,指的是结合国际统一和地区差异。这种策略在统一的前提下,通过灵活配置保障地区的个性化体验,既能满足统一维护提升产品效率,也能保障当地用户的特殊诉求,是一种性价比很高的设计方案

产品出海如何做好设计?来看这篇近6000字的总结

产品设计的国际化

产品的国际化,即全球化。国际化的通用设计能够为产品打造一个全球统一的形象与内核。

产品出海如何做好设计?来看这篇近6000字的总结

△ Chrome 的不同地区首页功能与样式基本一致

一套通用的设计系统和设计规范,既可以帮助我们在产品的国际化设计中 树立产品调性,又可以保证操作的一致性,同时提升设计的高效性。阿里旗下面向东南亚市场的购物平台 Lazada 在开发之初,通过使用 Fusion Design 的设计系统,大大节省了设计的时间。在如此复杂的电商业务场景之下,整套产品的设计最终仅 3 靠个设计师就完成了。

产品出海如何做好设计?来看这篇近6000字的总结

△ 设计系统对产品研发成本的影响

除此之外,一致的内核也能够帮助企业在全球范围内建立起统一的品牌形象,增强品牌的识别度与知名度。

产品设计的本土化

想要让产品在某一个市场上站稳脚跟,对于本土化的思考是必不可少的。本土化的核心是 因地制宜,根据地区差异相应调整产品策略。

产品出海如何做好设计?来看这篇近6000字的总结

△ UC 浏览器在不同地区的首页布局

为什么说本土化对于产品的出海非常重要?其原因并不难理解。Charles Eames 说过,“Recognizing the need is the primary condition for design.” 任何设计的本质都脱离不开对需求和问题本身的理解。好的设计是在对需求、动机、心理、环境等相关因素有了充分了解之后所产出的解决方案。

针对海外设计研究的思维框架

在考虑产品的本土化时,我们需要关注到用户的需求是什么、是否仍然成立,用户的行为模式是什么样的,以及整个外在社会物质、精神环境等方面的状况。蚂蚁金服团队通过海外本土化设计实践,总结出了一套“环境-人-需求“的研究框架,列出了可以去调研的多个方面。

产品出海如何做好设计?来看这篇近6000字的总结

△ 蚂蚁金服-“环境-人-需求”出海产品设计研究框架(做了小部分修改)

1. 需求(价值)

首先,我们要做的第一步判断就是原来的用户需求是否成立。产品在原市场想要解决的问题,是否在新的市场仍然存在,即我们的产品是否 有用?这个问题的答案决定了原先的产品是否对于该市场的用户是有价值的。如果有价值,那么就可以深入探索如何让用户用起来;如果没有价值,那么就需要进一步判断是否要继续开拓这个市场,以及如果继续开拓这个市场,在原有的产品形态上,我们能否通过改造的手段让它符合在新市场的用户群中挖掘出来的、不一样的新价值?

达到了“有用”的标准,我们则需要开始考虑“ 好用”的问题。只有满足“好用”这一条件,产品才能够被用户用起来、从而真正在新市场落地。在实现“好用”的过程中,我们可以关注以下几个层面的影响因素:

生活形态、价值观

生活环境与社会环境会塑造当地用户的生活形态与习惯。

下图分别是日本和北美地区的新闻资讯类 App。同样是推送新闻资讯,两者在表现形式上却大相径庭。可以看出日本的新闻 App 布局紧凑、信息量大、页面坪效很高;而北美的新闻 App 则更注重突出重点内容,信息密度相对来说并不高。

产品出海如何做好设计?来看这篇近6000字的总结

△ 日本-新闻资讯类 App

产品出海如何做好设计?来看这篇近6000字的总结

△ 北美-新闻资讯类 App

这种差异的背后,其实是两地上班族生活形态的差异。日本城市小、人口密度大,上班族通勤大多会选择地铁。而北美地区面积大,大部分人会驾车上班。驾车的人双手需要长时间控制方向盘,同时开车也需要持续注意路况,只能在间隙中查看新闻内容;而乘坐地铁的人双手更加自由,也有较长的通勤时间需要消磨,故可以接受更多的信息,也能够接受更繁琐的操作。

产品出海如何做好设计?来看这篇近6000字的总结

△ 北美(左)和日本(右)各自的生活形态

有时候,某个地区的用户长期习惯的操作模式,会与主流的操作模式有所差异。设计师 junu 在个人博客中讲述了他为 Melon(一个韩国主流音乐播放器)进行体验优化的一段经历。他发现 Melon 当时的播放操作逻辑比较冗长,用户需要先点选列表中的多首乐曲,再点击底下的播放键,此时 Melon 会将用户所选歌曲自动生成一个列表并进行播放。这和当时 Spotify 等音乐播放器“点击即播放”的主流交互逻辑相比,要更复杂和麻烦,尤其是在用户只是想要立即听到某一首歌曲的时候。因此,junu 提议引入“点击=播放”的操作方式。但当他们设计出了这样的优化方案后,却发现在测试过程中老用户们对这样的交互方式感到陌生和沮丧。基于用户反馈,最终,他们采取了一个折中的方案,既保留了原先的复选框作为多选操作的区域,让用户仍然能够选择乐曲生成列表并且播放;同时又引入了点击单曲直接播放的操作。相比第一版优化方案,用户的接受程度有了明显提升。

产品出海如何做好设计?来看这篇近6000字的总结

△ Melon 播放器的点选操作逻辑

设备环境

10 年前,高端大屏幕手机在东南亚和非洲市场普及率并不高,因此产品出海时需要考虑当地常见的设备是什么,并作出相应的适配。近几年,随着市场经济的发展以及中国手机的成功出海,即使是东南亚和非州的发展中国家,高端移动设备的普及率也已经很高,这为设计师在考虑通用性的过程中减轻了不少负担。不过,在为每个地区的用户做产品设计时,仍然需要调研清楚当地设备的使用情况,比如什么样设备更流行、普及率更高;如果某一地区的设备不够发达,那么设计的操作也需要考虑到设备不同所造成的差异。

业态/监管

在不同的国家或者地区,各个行业的标准与制度也可能存在很大区别。例如财会软件行业中,在北美和英国占据了重要市场份额的 Quickbooks、Xero 等公司,却无法成功打入欧洲一些国家的市场。因为财会软件本身的功能、流程设计与当地的财务制度是紧密相关的。在这样的情况下,欧洲本土的企业显然会对当地的政策和制度更加熟悉,也更容易设计出符合当地企业与会计需求的财会产品。

2015 年,Airbnb 进入中国市场。在最初的市场调研和用户调研之后,针对本土化,他们所迈出的第一步就是根据中国的业态环境对产品的前 10%和后 10%做了改造。其中,产品的前 10%指的是登录这一类用户开始使用产品所需要进行的步骤,而后 10%指的则是支付等用户完成一个完整流程所需要进行的操作。因为当用户进入到产品主要链路中时,其功能流程基本相通(搜索地点、挑选房间、浏览信息等),不需要做过多的改变;但产品的前 10%和后 10%则决定了用户能不能把产品用起来并不遇到障碍。因此,针对登录的部分,爱彼迎将原先的 Facebook 等第三方登录替换成了微信与微博账号的登录;而在支付的部分,爱彼迎引入了支付宝与微信支付的方式,打破了中国本土用户进入产品和完成订单的壁垒。

产品出海如何做好设计?来看这篇近6000字的总结

△ Airbnb 产品中国本土化的“前 10%与后 10%”策略

社会经济

社会经济环境的不同代表着社会阶层状况的不同,它会影响人们在消费时的行为方式。蚂蚁金服在调研菲律宾市场时发现,当地拥有银行账户的人口仅占了总人口的 34%,同期中国拥有银行账户的人口则占了总人口的 85%。而这 34%的人基本上都是当地的富人及中产阶层。在贫富分化严重的菲律宾,大部分普通民众是没有银行账户的。这一人口学特征很大程度影响了蚂蚁金服电子钱包业务对菲律宾目标用户的描绘,继而影响了产品各个层面的设计。

文化/宗教

在各个文化/宗教里存在着不同的意象,也会有各自的表达方式与禁忌等等。在某个文化下表示友好的行为,在另一种文化下可能是一种冒犯。这些都是在设计时需要去注意的。除此之外,在不同的文化/宗教语境下,人们会有不同的行为模式与价值取向,这里我们会引入一个模型——霍夫斯泰德文化维度模式,来对这一问题进行更详细的解读。

霍夫斯泰德文化维度模式

霍夫斯泰德文化维度模式是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个理论框架。它可以帮助我们对于不同文化群体的价值观有一个较为全面的了解,从而更明白该文化群体中人们的行为倾向。此理论总结了衡量各文化价值观的六个维度:

权力距离指数(power distance index,缩写为 PDI):指在家庭、公司、社区等组织机构中地位较低的成员对于权力分配不平等的接受程度。权力距离指数高的文化,组织更中心化、有特定的等级秩序、更容易听从领袖的决策;而权力距离指数低的文化,组织更扁平化、主张人人平等、更倾向于自己做判断而不易受控制。

个人主义(individualism,缩写为 IDV):与集体主义相对,指个人融入集体的程度。个人主义越高的文化,自我意识更强烈,更看重依靠个人努力获取利益和价值,追求隐私保证和自由;而个人主义程度越低的文化,会期望得到“团体”的照顾,更忠诚地依赖于群体和熟悉的社交关系,更倾向跟随主流价值观做决定。

不确定性规避指数(uncertainty avoidance index,缩写为 UAI):指社会能在多大程度上容忍不确定性。不确定性规避指数越高,人们会更遵循规则,恐惧变化、喜欢熟悉,并且习惯通过已知经验推演事物逻辑。而不确定性规避指数越低,人们会更有更强的安全感,对变化的包容性更强,有着更轻松的生活态度,鼓励冒险,对风险的承受度更高。

男性化(masculinity,缩写为 MAS):与女性化(femininity)相对,指人们(不论男女)更富有竞争精神,自信与野心,注重财富和社会资源的积累,而女性化社会责注重人们之间的关系和生活的品质。故男性化程度高的社会,人们会更加自信、进取、好胜,追求英雄主义,关注物质成功及权利地位;而男性化程度低的社会,人们会更加注重合作与谦和,信奉中庸共识主义,更享受生活、关爱他人。(注:男女平等)

长期导向(long-term orientation,缩写为 LTO):最初名为“儒家动力”(Confucian dynamism),指社会对未来的重视程度。长期导向的社会,注重坚持不懈和节俭,愿意计划未来生活,也会设定长期目标;而短期导向的社会,会认为活在当下更重要。

放任与约束(indulgence vs. restraint,缩写为 IVR):指社会成员在多大程度上意图控制自身的欲望。放纵指数越高的社会,人们会更加乐观、积极、冲动,认同随心所欲的观点,更倾向自我欲望的满足和表达;而克制指数越高的社会,则会在心态上更加严肃、严谨、审慎,会有更严格的社会规范制度,而认为休闲娱乐不重要。

使用他们官方网站( https://www.hofstede-insights.com/ )上的 Culture Comparison Tool,可以查询到各个国家的文化维度指数,也可以选择不同的国家进行对比。

产品出海如何做好设计?来看这篇近6000字的总结

△ 日本与荷兰的文化维度指数对比 – hofstede

在为特定地区的用户设计产品时,我们可以从这些维度去解读他们的行为倾向,并据此提出相应的解决方案或者设计方案。滴滴团队在开拓墨西哥市场时,根据墨西哥的文化维度指数在产品的本土化上制定了从功能到外观等不同层面上的设计策略。

产品出海如何做好设计?来看这篇近6000字的总结

△ 墨西哥地区的文化特征指数

产品出海如何做好设计?来看这篇近6000字的总结

△ 滴滴墨西哥的本土化设计策略

这类源于文化差异的设计差异并不少见。在淘宝等国内的电商平台上,“按照销量排序”是一个被高频使用的功能,消费者们认为什么产品买的人多,什么产品就更好。这样的观念也催生了一大批店家刷单的行为。但当在北美的电商平台亚马逊上,我们会发现并没有按销量排序这个选项。因为美国的用户相对来说个人主义更强、更相信自己的判断和选择,他们不认为他人推荐的就一定是好的。

产品出海如何做好设计?来看这篇近6000字的总结

△ 国内外电商平台对比

在企业即时通讯工具行业,国内的主流产品,如企业微信、钉钉等,都选择了蓝色这一比较沉稳的颜色作为主色调,在产品功能的形态上也偏向于严肃。而海外的办公产品 Slack,视觉色彩更加丰富;整体的产品定位也更加活泼欢乐,常常会有“不严肃”的表达,比如在界面多处都使用了 emoji。这样的产品形态差异,其背后是两种文化在放纵(享乐)/克制(严肃)这一维度上的差异。

产品出海如何做好设计?来看这篇近6000字的总结

△ 企业微信与 slack 的产品风格对比

内容本土化

除了功能框架上的设计需要考虑本土化外,产品中运营内容的本土化也是不可轻视的一环。Spotify Design 团队在《Designing for Belonging: Why Image Localization Matters》一文中,记录了他们对于内容本地化的一些经验和思考。同样,内容的翻译仅仅是本土化的第一步。在地区之间区别不大时,完成内容的翻译便能够满足其他地区的需求。如下图中 “浴室歌单( Songs to sing in the shower)”的播放列表,列表上的文案一经翻译,就能够推送给德国、波兰、以色列、意大利等一众国家的用户。但当内容的阅读群体有着更显著的差异时,仅仅翻译是不够的。在看到这张图片的时候,其他人种比如亚洲人可能就不会产生很强的代入感,也会缺少对产品的一种归属感(这个产品并不是为”我“设计的)。

产品出海如何做好设计?来看这篇近6000字的总结

△ Spotify “Songs to sing in the shower” 歌单

下图展示的是 Spotify 另一个歌单—— “快乐时光( Happy Hits)” 的封面在不同地区的呈现形式。可以看到,面对文化差异更大的群体时,Spotify在保持了统一的样式风格的基础上,针对每一个地区都展示了当地人在他们的生活中“快乐”的样子。这种本地化内容更加贴近当地用户,也能够让用户产生更强的连结感与共感。

产品出海如何做好设计?来看这篇近6000字的总结

△ Spotify “Happy Hits” 歌单

结语

回到那句话 —— “Recognizing the need is the primary condition for design.”产品的出海其实只是我们在设计中会遇到的一种场景,在这个特定场景下我们的设计思考与其他场景下是互通的。如果仅仅完成了翻译这一步,那我们就忽视了在新市场下另一群用户的特征、需求、使用情景、操作习惯等关键信息。无论是不是在为产品的出海而设计,我们始终应该保持对用户的好奇,让最终的设计实现我们期望达成的目标。

文章来源:优设   作者:酷家乐UED

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

2020—2021 UI色彩趋势总结

鹤鹤

本文对2020-2021的色彩趋势做了浅显的总结与运用分析,希望能对大家有所帮助,欢迎一起交流与探讨!全文阅读大概需要12分钟。

文章来源:UI中国   作者:贰元

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

2021的10大UI/UX设计趋势解析

鹤鹤


2021趋势已悄悄来袭,还不赶快来看这些落地实例...

前言

在这艰难又魔幻的2020年的尾声,有必要系统汇总下关于UI/UX的设计发展方向,为接下来的2021的开篇带个好头。本文在了解这些趋势的同时,分析特点并举例落地实例,来帮助大家启发创意设计工作的思考切入点。

流行趋势跟人们所处的环境密切相关,从最初的方块马赛克——>追求极度写实——>扁平风——>到现在的质感拟物,扁平设计霸屏的这几年,设计风又向更立体、丰富、更有层次感的方向发展,所以说趋势就是一个轮回。设计风格没有绝对的好坏,在审美达到一定疲劳时,就会开始出现新的设计风格。每一个新风格都值得设计师去拆解、思考,本质都是为了提升更好的交互体验。 

而在进入下一个十年的过程中,我们对数字产品和体验的依赖将日益增长,预测真正胜出的将会是3D动画和用户界面/用户体验设计的结合设计,5G技术的发展,它将重塑了我们以前无法想象的交互方式,这将是一段充满创意、鼓舞人心的发展阶段。在这里让我们来看看未来那些不可忽视的设计趋势吧。

(注:图片来自网络,均标明出处及作者,若有侵权请告知删除)





1、3D与UI结合

随着高效且易用的3d软件工具的出现,3D 元素已经开始变得越来越受欢迎,而在这之前,UI界面一直被平面设计所主导。与 2D 不同,它提供了更为逼真的立体效果,从插画、动效、电商到平面视觉,在所有的设计类型中都能找到它,3D现实主义已是各个领域的大势。

圈中也出现了很多免费或付费的3D预设元素及场景组件,帮助3D小白更快地搭建出具有冲击力的视觉组合。


特点:

• 直观感受;

• 立体真实;

• 形态丰富;

▲Izmahsa


▲Mike


▲Tran Mau Tri Tam ✪


▲Vikiiing


https://www.awwwards.com/inspiration/3d-hover-number-reveal



实例应用:

各大厂都开始纷纷尝试在产品中加入3D元素,将自家IP立体化,植入到各个品牌静态页面,加深品牌印象渗入。3D技术虽然已经出现有一段时间了,但是为了保证速度和性能表现,较少应用到产品中,随着软件技术的提升,立体渲染产品将开始慢慢运用到更多的界面交互、H5活动中。

▲闲鱼、QQ、花椒直播的3D启动页


▲得物(毒)的3D空间动效


▲乐无登录页


网易云音乐每年的音乐总结报告都追随着最新的设计潮流,今年还可以自由选择人物形象,增强了用户的主观代入感,以下是每年的设计风格变化:

▲2018-渐变插画、2019-撞色渐变、2020-3D人物场景


▲2020-总结陈词H5


▲总结报告Banner的动效


其中IP立体化最多的当属K12教育领域,除了制作IP周边外,3D效果能适应丰富的运营场景,高度还原现实世界,给小朋友带来最真实的学习互动体验。

▲洪恩识字(3D学习场景)、腾讯开心鼠英语ABCmouse


▲IP在播放儿歌时的互动


值得一提的是今年苹果发布的macOS Big Sur除了玻璃拟态的变化,图标还加入了3D维度的拟物视觉层次。

苹果的 mac OS 的人机交互指南中也明确指出:“图标不仅是装饰性的,而且在与用户交流中起着至关重要的作用,它应该传达应用程序的主要目的并暗示用户体验。”这次扁平化和拟物化的结合,将又要引领一波设计趋势。





2、软渐变(Soft gradients)

过于强烈的渐变不再是趋势,大多数设计师都开始喜欢使用非常简单和微妙的渐变,如果产品的目标用户人群需要轻松温和的视觉环境,那么此风格再适合不过。

软渐变包括背景、阴影、反光,常与线条平面图形结合,应用于界面、网站、图标、icon等设计中。


特点:

• 低调温和

• 微妙渐变

• 清新愉悦

 


2.1、柔和背景

在设计网站中我们已经看到了许多非常精致,明亮柔和配色方案,混合两种以上的颜色来创造多彩的模糊背景。它使设计看起来非常现代、不打扰、清新而令人愉悦,其中画面内容是主要视觉焦点。

▲Vladimir Gruev


▲Sajon


▲Anton Mikhaltsov


▲Ghani Pradita


实例应用:

▲咔咔、美柚


https://takearecess.com/



2.2、柔和阴影

柔和的彩色阴影使UI有了更微妙的深度变化,在图标设计中经常需要渐变或阴影来塑造物体,柔阴影使设计元素更丰富立体,并且它们有助于区分内容之间的层次结构。

▲Ghani Pradita


▲Sèrgi Mi


▲Taro Huang


实例应用:

▲有道数学(已下架)


▲Uki




3、玻璃拟态(Glassmorphism)

去年新拟态掀起了一阵狂热,但这种模拟受到挤压的塑料效果(凹/凸层次感),在用户的阅读性上可能会出现问题,新拟态更适合用在局部的少量元素点缀,无法完整地使用在整套应用程序中。

▲Alexander Plyut


伴随着今年苹果发布的 MacOS Big Sur 操作系统的发布,新的拟物风格正式回归大众视野,整体风格应用了新拟态(Neumorphism)的设计思路,利用大量的毛玻璃质感和大量投影纵深感,能很好的突出前景信息,中和了扁平化图文带来的生硬不立体感。而Big Sur最新的图标也加入了 3D 质感设计,设计语言更为时尚简洁。苹果设计师 Alan Dye 在发布会上也提到了设计风格转变的原因,主要是希望「降低视觉的复杂度,让用户能够将注意力集中在内容上」。

而最新的玻璃拟态则更加注重垂直空间 z 轴的使用,背景多鲜艳色彩,在上空使用隔一层高斯模糊的毛玻璃质感,模糊的边界有细微的浅色边框,整体效果就是让元素之间有虚实结合的特殊空间。毛玻璃运用在界面中对关键信息起到强调作用,用户可以看到物体间的层次关系,哪一层在哪一层之上,就像物理空间中真实的玻璃一样。


特点:

• 透气磨砂

• 层级空间

• 简洁拟物

▲引领新拟态风格的Alexander的最新作品也朝着玻璃拟态变化


▲Kostia Varhatiuk


▲Ghani Pradita


▲Ibrahim emran


▲Queble


实例运用:▲毛玻璃视觉可追溯到2007年发售的Windows Vista,而当时的 OS X Yosemite 也大量使用了这种设计语言

▲最新的MacOS Big Sur操作系统


▲图标的变化




4、暗黑模式

暗黑模式是白色界面的相反版本,适用于午夜时分。之前用了很长时间微信的暗黑模式,突然切换成白色界面后,就像吸血鬼见到太阳光般刺眼,果然暗黑模式用久了还是比较舒服的。

 暗黑模式和之前经常提到的夜间模式是有区别的,简单来说暗黑模式可以在任何场景下使用,并没有降低对比亮度;夜间模式则专为夜间场景设计,重在降低对比度,以降低在暗光环境下屏幕对人眼的刺激。

 

特点:

• 突出内容

• 减轻干扰

• 沉浸体验

▲Tom Koszyk


▲Victa Wille


▲Golo


https://www.awwwards.com/inspiration/3d-hover-number-reveal


▲Tran Mau Tri Tam ✪


实例应用:

▲有道词典


▲爱范儿(ifanr)


最常使用暗黑模式的车载系统:

▲小度车载


暗黑模式的灵感最早引起大家注意的应该是抖音,在这之前大部分的应用都是白色为主,抖音整体黑色界面带来的沉浸以及轻打扰体验还是很棒的,在这之后也相继出现了以黑色为主的APP设计:

▲MOO音乐(可手动切换颜色模式)


▲Space FM





5、多彩高对比度界面

受Material Design调色板的影响,2020年用户界面趋势的一定不能少了亮色和荧光色的,可以作为主色也可以作为辅色,简约的界面中明亮大胆且对比鲜明的色彩一直都处于增长趋势。荧光色一直是90后喜欢的风格,我个人就非常喜欢荧光色,现在要是谈到该风格的受众主力军可是90后啊。

颜色是为界面添加信息和情绪以及使其看起来美观和吸引人的最有效方式之一,对比鲜明的颜色在白色和黑色界面上都能很快吸引用户的注意力,这种风格已经成为清新、酷炫、数字时代的代名词,而在2021一趋势还将会继续影响UI、平面、广告、插画等领域。

 

特点:

• 活泼大胆

• 对比鲜明

• 潮流科技

▲Amy Martino


▲Halo Mobile


▲Anastasia


▲Paolo Spazzini


在网站设计中的应用:

https://www.theartcenter.nyc/


https://www.squadeasy.com/en/


https://takeboost.com/


实例应用:

▲GoFun出行


▲开言英语





6、抽象几何元素

从上世纪初开始,抽象构成中的简单几何形状就已经用于视觉艺术中,多用于主背景主题或色彩细节,使用钢笔工具编辑最简单的形状(正方形,圆形、椭圆形),加上不同的颜色或渐变,让设计看起来既规则又有趣。

几何图形可以运用到UI设计中 ,将它们混合在一起以创建马赛克的效果,形成具有品牌意向符号的记忆点。


特点:

• 规则组合

• 品牌印象

• 重复记忆

▲Johnny Nova


▲Vladimir Gruev


实例应用:

最近看到的一组原色视觉刚好融合了高对比度+几何这两种风格,那就是SHINee的正规六辑合辑《‘The Story of Light’》,采用红黄蓝三色加上圆形、正方形、三角形的大块面积来打造画面空间及变化,带来极具视觉冲击的音乐色彩与魅力。

▲专辑的主视觉


当然,几何形状不止用于色彩图案细节,在UI界面布局中经常使用大块面图形,这种设计方法受到越来越多的关注。





7、极简风

极简设计的前身是2010年代中期精巧又花哨的设计,这种设计已经存在很长一段时间了,但在2020年,人们每天需要消化的信息量越来越多,所以现在用户想要尽可能避免“视觉垃圾”,这也是为什么我们会选择更简洁专一的界面。


特点

• 专注信息

• 清晰易用

• 简单操作

▲RonDesignLab


▲Quan


▲BAOLIN


▲Gregory Loshakov


https://snp.agency/en


谈到极简主义,就不可避免会涉及到无键趋势,因为按键越少就意味着设计越简洁,而这种简化过的设计将让手势操作和语音交互更为流行。

▲Taras Migulko


▲Gleb Kuznetsov✈


实例应用:


▲夸克浏览器的夸克宝宝





8、将视频应用到UI中

在 2020 年,信息的触达的速度将会变得更快,而视频是很好的载体,各个年龄段的用户都喜欢观看引人入胜的动画,无论是选择通过短视频还是电影的方式来推广产品,都很好地灌输品牌理念,建立与受众群体的关系,加强用户忠诚信任感。


特点:

• 营造氛围

• 类型多样

• 品牌调性

▲Fireart Studio


▲Ehsan Rahimi


实例应用:

▲moo音乐登录页

▲虾米音乐欢迎页




9、插画与3D的界线越来越模糊

艺术插图从2017年开始到现在仍然很流行,几乎适用于任何类型的设计行业,是设计领域中最热的趋势之一。插画的视觉能很好的帮助用户理解产品背后的故事,为了把故事讲好,我们可以创造出一个品牌人物,赋予他人格,为他制造一些故事和冲突,最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础,至于讲故事的方式,在 UI 和 UX 中都有使用,原理一样只是落地方式不同。 

在2018年的蜘蛛侠平行宇宙中我们就已经看到了3D与插画的结合,艺术家保留了人物在美式漫画中的的线条笔触,把“手绘”的细节和质感都放大到了荧幕上,在剧中还采用对比强烈的大色块扩大了视觉张力,分分钟把漫画书甩到面前,让人忍不住惊呼,索尼的艺术家们是怎么把片子做得这么酷!

▲3D人物的画笔触感


▲画面光源处由波普圆点组成的背景


▲纸本漫画书中的“声音词”


▲漫画经典线条


▲Entei Ryu在3D建模使用插画质感


▲Minh Pham ✪在ui界面中的尝试


实例应用:

腾讯旗下音乐平台JOOX最近的概念宣传片,从MG、三维、定格、插画多个风格之间来回切换,给我们带来了一个多元的音乐世界。各大视频网站还搜不到,不能直接链接视频地址,喜欢的朋友可以关注微信视频号“UoU_Studio”观看完整视频。


在3D开始迅速发展的阶段,二维与三维之间的界限变得越来越模糊,插画作品也可以具备强互动性,而3D插画与动效的结合提供了一种奇妙的新方法,希望能够看到未来插画更多的可能性。




10、更多的微交互动效

最后一点,还是要强调动效在UI中的的作用,微交互最早出现在 2018 年,让用户更好地理解系统如何工作,并在引导其获得更好的体验方面扮演着非常重要的角色。它们在 UI 设计中决定了一个 App 或网站是普通还是优秀,从点击反馈、加载等待、导航交互等等,为用户界面设计增加了动态性,交互性和直观性。

 

动效起到的作用:

• 引起人们对应该做什么或接下来将要发生的事情的关注;

• 创造流畅和视觉愉悦的过渡;

• 带给使用者美观的享受;

• 指导我们进行复杂的操作;

• 确认用户使用旅程中的操作。

▲Jakub Antalik


▲Forever D.


▲Kingyo


▲Eugene Paryhin


▲Leo Natsume


▲Taras Migulko

实例应用:

▲GoFun选择车辆后的页面转场动效




结尾:

2020的趋势在满足用户的美学要求上,侧重内容和感情表达,还会根据不同设备载体、新的技术而变化,为用户提供最大程度的丰富体验。

借用Adobe设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款App、网站或设计工具。我们要思考的是人类的需求、用户的需求,打造真正人性化、多元化与包容性的设计。

设计趋势还在快速增长变化,有些趋势总能长期霸屏,未来还将迎来更多新技术,每个设计人员都可以找到自己喜欢的方向,不管哪种趋势最受欢迎,最重要的是如何学习并合理地运用到产品中,以产生最大的设计商业价值。

文章来源:UI中国  作者:_阿丹a_

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


手机appUI界面设计赏析

前端达人

移动互联网的迅速崛起,让移动网页,移动客户端越来越重要,客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化,但却始终 很有限,因此,在APP的界面设计中,精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量,而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑,用户看着顺眼了,才会真正的喜欢。

接下来为大家分享精美的app UI设计案例:

蓝蓝设计(北京兰亭妙微科技有限公司)是一家专注而深入的UI设计公司,公司对UI设计的追求一向很高,致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计,用户研究、交互设计等服务。

jhk-1615795023016.pngjhk-1615795030849.pngjhk-1615795030849.pngjhk-1615795058578.pngjhk-1615795128660.jpgjhk-1615795162438.png

--手机appUI设计--

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

产品设计「需求分析」入门简册

涛涛

嗨,朋友们,不知你是否曾遇到这样的处境,听到需求,大家再熟悉不过了,在产品设计的时候,什么是产品需求?什么是用户需求?什么是商业需求?到底怎么进行产品需求分析?

看到这一系列的问题是否一脸懵,一脸茫然,对需求分析和理解不够的透彻。今天,我为大家分享的是关于产品设计需求分析研究,希望可以对大家有所帮助,更好做好需求分析,理解需求分析。

需求到底是什么?

在工作中我们经常提及需求,谈及需求分析,但就一个简单的需求,我们真的了解吗?真的知道什么是真正的需求吗?天天被客户说你没有理解我的意思,你没有了解我的需求。那么什么是需求?百度百科中解释需求指人们在某一特定的时期内在各种可能的价格下愿意并且能够购买某个具体商品的需要。而关于需求也有人解释为需求是由个体在生理上或心理上感到某种欠缺而力求获得满足的一种内心状态,它是个体进行各种活动的基本动力。而产品是为了满足人们的需求而被生产出来的,因为需求的驱动,才会使得用户需要产品。因此需求,既不是功能,也不是产品,不能把功能和需求混为一谈。需求是用户面临的某一个问题,产品或者产品功能只是为了解决用户的需求的解决方案。

基础科普!产品设计「需求分析」入门简册

1. 需求类型介绍

那么产品的需求都有那些类型呢?

需求按照产品属性可以划分为:idea、新增、优化、Bugfix;按照产品职能可以划分为:功能类需求、运营类需求、数据类需求、设计类需求;按照产品价值划分为用户需求和商业需求;按照产品性质划分为显性需求和隐性需求。

基础科普!产品设计「需求分析」入门简册

2. 需求相关理论在产品设计中的应用

基础科普!产品设计「需求分析」入门简册

马斯洛需求层次理论(hierarchical theory of needs),马斯洛,可以说是我们需求理论界的祖师爷,他认为,人的需要由生理的需要、安全的需要、归属与爱的需要、尊重的需要、自我实现的需要五个等级构成。下面我们看看产品设计中的应用:生理需求方面应用、安全需求方面应用、社交需求方面应用、尊重需求方面应用和自我实现需求方面应用。

生理需求方面应用

生理需求即满足人类的最底层,最基本的生活需求,包括衣、食、住、行、用等。生理需求是推动人类生存的动力,只有生理需求得到满足,人们才会追求更高层次的需求。

比如:唯品会、饿了么、美团、百度地图、Wi-Fi 万能钥匙。

基础科普!产品设计「需求分析」入门简册

安全需求方面应用

安全需求即在满足人类的生理需求的情况下,满足人类的安全和社会保障,包括健康、社会秩序、法律、和平、医疗、教育等,人类需要安全感。

比如:支付宝、360、全民反诈、查悦社保、优健康。

基础科普!产品设计「需求分析」入门简册

社交需求方面应用

社交需求即归属与爱的需求,体现在个人渴望得到家庭、团体、朋友、同事的关怀爱护理解,包括友情、爱情、熟人社交和陌生人社交等的社交需要。

比如:微信、Soul、珍爱网、探探、陌陌。

基础科普!产品设计「需求分析」入门简册

尊重需求方面应用

尊重需求即较高级别的需求,满足前几种需求的前提下,用户开始关注高级需求,包括内部尊重和外部尊重。自尊和希望受到别人的尊重。

比如:朋友圈和抖音的点赞、评论,电脑开机助手

基础科普!产品设计「需求分析」入门简册

自我实现方面应用

自我实现需求即最高级别的需求,实现自己的理想抱负,实现自己的追求,成为伟大的或具有影响力的人物。在人生道路上自我实现的形式是不一样的,每个人都要创造机会去完善自己的能力,满足自我实现的需要。

比如:微博认证、知乎认证、网易云音乐会员、QQ 会员、抖音认证

基础科普!产品设计「需求分析」入门简册

圣经人性七宗罪(seven deadly sins),天主教称七罪宗,或称七大罪或七原罪,属于天主教教义中对人类恶行的分类。

最本质的需求是人类原始的本能欲望,在《圣经》中,人类有七宗罪:色欲(lust)、暴食(gluttony)、贪婪(greed)、懒惰(sloth)、愤怒(wrath)、嫉妒(envy)和傲慢(pride)。

基础科普!产品设计「需求分析」入门简册

一款好的产品,需要对人性做透彻的分析,才能完成其设计。

比如:快播、王者荣耀、拼多多、狼人杀、大众点评。

基础科普!产品设计「需求分析」入门简册

3. 需求层次的规律

需求是不变的,变得是满足需求的产品。从古至今,人类的需求几乎没有发生改变,如为了满足人类移动的更快的需求,历史上有马车、自行车、汽车、火车、飞机,互联网的产品则是,摩拜单车、哈罗单车、滴滴出行。

传统产品

基础科普!产品设计「需求分析」入门简册

互联网产品

基础科普!产品设计「需求分析」入门简册

因此,在进行产品设计中一定要:

  • 把控需求来源
  • 提高需求质量

需求如何进行获取?

聊了这么长的需求,那么需求到底如何进行获取?都有哪些渠道和方法呢?小浪郎看了相关的视频和书籍进行了一定的了解,只要路子野,就不会有悲伤!关于需求也有相关的获取渠道和方式。

1. 需求获取渠道

需求的获取渠道,包括内部渠道和外部渠道,通过多种渠道来获取用户需求。内部渠道包括产品、老板、同事和自己,外部渠道包括市场、用户、竞品和合作伙伴。

外部获取渠道

基础科普!产品设计「需求分析」入门简册

1.市场

产品设计需求会受到行业政策的调整而变化,如政策对顺风车业务的需求影响。

2. 用户

产品就是为了满足用户的需求而服务的,需要及时的了解我们的用户,了解我们的目标用户。

3. 竞品

知己知彼,方能百战百胜。在同领域的竞争对手,通常来说两者之间是相爱相杀的关系。我们既要了解直接竞品,又要了解间接竞品。如碎片化时间、场景相同、用户也相同、但需求不同的抖音与快手、微信读书与网易云音乐。

4. 合作伙伴

合作伙伴能够给企业带来资金资源、先进技术、管理经验,提升企业技术进步的核心竞争力和拓展国内外市场的能力,推动企业技术进步和产业升级的国内外先进企业之间的合作。

内部获取渠道

基础科普!产品设计「需求分析」入门简册

1.产品

通过用户使用产品时所产生的行为数据,来进行产品战略规划和设计,因为用户的行为即是用户的需求。

2.老板

产品设计在满足用户需求的同时必须兼顾企业的战略需求。而这方面需求通常是由老板或公司的高层来进行掌舵的。

3.同事

产品的开发流程,从产品规划到需求分析,从需求分析到产品设计,从产品设计到产品开发,从产品开发到产品测试运维等,涉及了很多的同事,他们对用户也有所理解,间接了解用户的需求。

4.自己

作为产品人,我们也应该成为产品的用户,成为产品的目标用户,这样才能不断为用户思考,为用户解决需求。

2. 需求获取方式

需求的获取方式,包括内部方式和外部方式,通过多种方式来获取用户需求。内部方式也同样包括产品、老板、同事和自己,外部方式包括市场、用户和竞品。

外部获取方式

基础科普!产品设计「需求分析」入门简册

1.市场

通过了解国家的法律法规、政策方针、了解市场的行业动态和数据报告。

2.用户

通过用户调研和用户反馈来进行了解用户的需求,从而为用户进行服务。常见的用户调研包括有:观察法、单人访谈法、焦点小组、问卷法、头脑风暴法、自我陈述法和实验法。常见的用户反馈包括有:论坛、贴吧、微博话题、Appstore 的产品评价等。

3.竞品

需要持续性的进行相关竞品分析,了解优势与劣势,了解相同与不同。查阅相关的竞品分析报告,进行快速了解。

内部获取方式

基础科普!产品设计「需求分析」入门简册

1.产品

通过一次次的数据埋点产生的用户行为数据,有效的用户行为数据分析,出具有业务价值的数据分析结论。

2.老板

及时与老板进行高效沟通,结合企业的战略定位与战略规划,明确产品的战略规划。

3.同事

与同事进行产品头脑风暴,打破常规,积极思考,畅所欲言,充分发表看法。

4.自己

作为产品人,我们要用心观察生活,使用更多的产品,体验更多的产品,总结产品经验与规律。

3. 需求记录

不仅我们需要了解需求,同时各种各样的需求也要规范的进行记录,我们通过需求卡片来进行需求记录,包括需求编号、需求类型、需求来源、需求内容、需求场景、记录时间、记录人员等。

基础科普!产品设计「需求分析」入门简册

需求分析怎么进行?

需求也有真伪,获取了需求,接下来我们需要进行需求分析,分析那些需求是真需求,那些需求是伪需求;哪些需要是必须要做的,哪些需求可以不用做;哪些需求先做,哪些需求后做;如何进行筛选需求等,常见的需求分析包括:需求筛选、需求透视、需求排序。

基础科普!产品设计「需求分析」入门简册

1. 需求筛选

初步进行需求筛选,包含有 4 个分析纬度,真实性、一致性、价值性和可行性。

基础科普!产品设计「需求分析」入门简册

真实性

需求是否是目标用户的真实需求,自己不要 YY 需求,同时也要对用户嘴上说的需求进行斟酌,需求是否真的存在。如用户说星巴克不好喝,但实际是因为太贵了,没钱。

一致性

是否符合产品定位?需求分覆盖面有多大?有多少目标用户有这种需求?这个需求有多大程度上的代表性?

价值性

需求能带来多少价值?(用户价值、企业价值)需求实现要多少成本?(人力、金钱、时间) 需求投入产出比如何?

可行性

需求按照目前现有的人力物力和财力能够实现,过滤掉企业能力范围以外的产品需求,但是我们可以和别的企业达成战略合作,求同存异,互利共赢。

2. 需求透视

需求透视就是从获取的表面需求中提炼出用户的本质需求。理解用户的本质需求,则有利于我们更好地提出产品需求。分析表面需求,本质需求和产品需求。

基础科普!产品设计「需求分析」入门简册

再来一个小案例。

有一天小浪郎和朋友去看电影,走在了街上突然发现没吃饭饿了,小浪郎想吃火锅,但由于要和他的朋友一起看电影,时间来不及,于是它们一起吃了山西刀削面,解决了吃饭问题,然后两人一起去看电影了。

那么上面小浪郎的用户描述需求是想吃火锅,但用户实际想要的只是没有吃饭,只要吃饭了就行,而他们的潜在需求有饮料、啤酒和水果等。

3. 需求排序

根据企业的战略定位、产品规划和用户需求,我们需要对记录的产品需求重要性进行优先级排序。具体而言,通过需求类型、需求频率、需求强度和需求逻辑来进行需求的优先级排序。

基础科普!产品设计「需求分析」入门简册

需求类型

依据 KANO 模型对需求做出的分类,考察需求的类型,包括基本型需求(痛点)、期望型需求(痒点)、兴奋型需求(兴奋点)。

如微信产品,用户的基本需求(痛点)是聊天,微信表情则为用户的痒点(期望型需求),没有表情包也照样聊天撕逼,而微信红包则是用户的兴奋点(兴奋型需求)

需求频率

用户在单位时间内使用产品的次数即为需求的频率,频率越高,需求对用户越重要。如产品设计时,把高频率的功能放在一级,把低频率的产品功能放在二级甚至于三级等。

需求强度

需求的强度可以参考马斯洛需求层次理论,包括必要性、高频次和持续性。

需求逻辑

需求之间也存在着一定的逻辑关系,需求也有先后,先完成第一步需求,才能完成第二步需求。如微信视频,必须先有微信好友,才可进行微信好友视频。

需求不变,变得是适应需求的产品,把控需求来源,提高需求质量。

本篇文章为大家介绍了产品与需求、需求理论知识和应用、需求获取和分析研究,相信基于以上需求分析理论和方式方法,在以后大家对需求分析的处理能够有新思路,高效打造出一个有价值的优秀产品。希望能给到小伙伴建立自己的产品需求分析体系一些启发。

重要的事情说三遍:把控需求来源,提高需求质量;把控需求来源,提高需求质量;把控需求来源,提高需求质量。

文章来源:优设   作者:Hello_姚冰 

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


将迪士尼的10大动画原理应用于UI动效设计

鹤鹤

迪士尼的12条动画基本原则是传统动画中最有价值的原理之一。它出自Johnston和Frank的书《生命的幻觉》。虽然这些原理最初是为传统动画(例如角色动画)设计的,但在本文中,我们将探讨如何将其中的一些原理应用于UI动效上。

01-挤压和拉伸

在动画中,挤压和拉伸表示对象的重力,质量,弹性。当场景中的弹球撞击地面时会被挤压。在UI界面中,挤压和拉伸非常适合与按钮相结合。

例如,按钮的按下状态为挤压。通过控制挤压和拉伸,我们可以轻松地定义按钮的状态。除此之外,它还可以应用于界面上的所有的交互式元素。

应用于按钮上的挤压和拉伸

应用于侧边栏的挤压和拉伸

02-预备动作

预备动作为用户展示了即将发生的事情。就像奔跑开始时,我们的身体会先向后倾,然后才是加速跑,这就是预备动作。在UI动效中,悬停状态就是很好的例子。每当我们将鼠标悬停在元素上时,某些元素都会做出反应,表明它是可单击的,并且当您单击它时会发生某些事情。

悬停互动通常会告诉我们接下来有一个动作发生 

涉及水平滚动的界面通常会显示下一个元素的一部分,该元素会出现在滚动/滑动中

03-时间节奏

在传统动画中,时间由绘制的帧动画来控制。帧数越多,动画将越流畅和越慢。时间还可以表现对象的情绪和性格。

时间也是所有UI动效最基本的属性。定时和缓动功能在动效设计中起着重要的作用。漫长的过渡会使您的用户等待太久。另一方面,如果动画太快,用户可能会错过一些东西。通常,大多数界面动画在200到600毫秒之间。诸如悬停和反馈之类的交互约为300毫秒,而诸如过渡之类的复杂动作约为500毫秒。您可以参考Material Design,其中对每种类型的动画的持续时间都有很好的解释。

右侧的过渡会使用户等待太久

04-动画的缓入缓出

现实世界中的大多数对象都遵循缓动效果。换句话说,物体的运动并不突然。就像自由下落的物体会在运动过程中逐渐加速。

向UI元素添加缓动效果可以使它们看起来更生动自然。制定时间节奏和缓动标准可以让你建立一个高效的动效库。

右侧添加了缓动效果,所以看起来更自然

05-转场

转场,它包括如何将对象放置在场景中,如何以及何时进行每个动画等等。它将用户的注意力引向场景中最重要的对象。

对于UI界面,转场决定了元素的放置位置以及在发生交互时如何对元素进行排版。它将用户的注意力引向最关键的元素。

这是一个音乐类的APP,转场动画将歌曲封面和名称放大置顶,并让“喜欢”按钮单独出现,让用户一目了然

06-弧线运动

从高处抛出的球遵循了抛物线的路径——弧线会让事物更自然。在UI界面中,使用弧线运动会比使用直线运动更加的自然,要突出元素运动的路径时可以使用弧线。

弧线运动更加生动自然

07-辅助动画

在动画中,辅助动画用于强调场景中发生主要动作。例如,角色的头发在行走时的微妙移动,或者是面部表情的微妙变化。

在UI界面中,辅助动画可以使主要动作更加突出,这在向用户反馈信息时非常有帮助,所有微交互的作用均基于此原理。

辅助的例子动画让点赞效果更饱满

08-夸张

场景中的重要角色必须具有吸引力,通常会将某些动作进行夸大以引起更多关注。

在UI界面中,重要的交互作用也需要更夸张一些,以引起用户的注意。下图的设计就是一个很好的例子,悬浮的按钮在静态状态很显眼,因为它的颜色更重,并且悬浮在所有元素之上。当发生任何交互时,夸张的动画让它可以占据整个屏幕,使其吸引力更上一层楼。

占满全屏的夸张动画

夸张的支付按钮更吸引人的眼球

09-惯性与延时

试想,如果你坐在三轮车上,当车前进的时,身体会短暂后仰,然后也会随之前进,我们称之为延时。突然刹车时,又会由于惯性运动身体向前倾然后回来 。

在UI界面中,同样可以在元素静止之前添加惯性运动,以使它们感觉更自然。不同元素直接也可以添加延时效果,让动效更细腻~

窗口放大时添加了惯性效果

图像和文本添加了短暂的延时效果


文章来源:UI中国   作者:设计师深海

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

数据化设计

涛涛

2015年之后的中国互联网,人口红利、流量红利逐渐退场。2019年遭遇第一场资本寒冬,上半年投资总金额同比下降了58.5%。也在2019年,“精益创业”、“精益数据分析”、“增长黑客”等一系列数据思潮开始流行。而UX设计师作为半个产品经理,我们很容易将这股“数据热”迁移到自己身上:每个UX设计师都要学数据分析了吗?数据和设计是什么关系?天天盯数据会限制设计师的想象力吗?数据到底要怎么用?……




Preview

——————————

数据热

过往,设计师一般不会把“数据”挂在嘴边。我们提倡“以用户为中心,打磨极致用户体验”,较少考虑成本和商业效益。


通俗来说,就是产品经理负责“生意”,设计师负责“体验”。以“造鞋”为例子,产品经理做了市场调研,决定要生产儿童运动鞋,设计师负责设计“适合4-11岁的儿童在城市公园玩闹”的鞋子应该长什么样、穿着它跑跑跳跳是不是舒服的。但是设计师不需要担心运动鞋的销量,产品经理则要跟老板汇报销量业绩。


在红利消退、产品同质化严重和快速迭代的多重压力下,UX设计迎来了更高的挑战:仅凭主观判断“好不好用、好不好看”来打磨产品内在体验,不考虑产品的生存、增长和盈利,很难在行业立足。与此同时,随着数据采集工具的日渐成熟,数据以“客观”和“便捷”两大特点,帮助我们更快获得“设计的依据”。精益化设计是必然趋势,而“数据分析”是精益化设计的手段之一。



沿用“设计鞋”的案例,UX设计师要在自己所在领域思考:在设计调研的过程中,我们用什么数据指标来衡量这个儿童鞋好穿、好卖?在鞋进行批量生产前,我们有没有数据资源支持我们研究父母/小孩对鞋子外观的偏好、小孩运动时容易受到哪些物理伤害等等?如果有条件进行小范围的数据实验,我们如何设计数据实验来评估好穿好卖?





PART 01

——————————

数据的定义

“理解任何事物都需要先对它进行定义,这样才能够在头脑中清楚地知道正在讨论的是这个东西,而不是其他东西。”非常喜欢美国经济学家Thomas Sowell在《经济学的思维方式》里说的这句话。


如果我们对“数据”下定义,那么产品设计语境中的“数据”具体是什么?数据是怎么产生的?


从数据采集手段来看,互联网产品的数据来源主要有3个:二手资料数据、问卷调研数据和应用埋点数据。




1/ 二手资料数据

行业数据和竞品数据一般通过二手资料获得,包括商业交易数据、用户群的态度和意愿、用户舆论指数、竞品的用户规模和盈利状况等宏观数据。常用的搜索渠道有:百度指数、企鹅智酷、艾瑞、尼尔森、各大科技资讯平台等。


我们可以将这些理解为“市场数据”,在立项期对产品方向有一定指导意义,能快速了解市场概况,也能帮助产品思考差异化定位的问题。



以“腾讯文档为”项目为例,我们想提高腾讯文档用户创建文档的成功率,通过模板创建文档是关键路径之一。研究用户通过模板创建的路径时,想大概了解用户找模板时可能会在意什么。于是我们尝试使用百度指数搜索“模板”、“文档模板”、“PPT模板”、“Word模板”、“Excel模板”,从搜索量得知:PPT模板搜索量最高,符合我们的推测;Word模板内容中,简历、合同需求量较大,而部分用户只是想要好看的Word背景等等。虽然我们得到的有效信息不多,但我们能够通过二手资料的方式,快速了解用户需求的基本面。



2/ 问卷调研数据

问卷调研数据是通过向目标用户发放问卷获得的,侧重于收集人口学信息、用户自述的历史行为、主观态度或意愿,比如用户满意度调查、流失用户原因调查等。本质上是通过建立假设、再进行抽样统计的方法来得到用户口述的答案。也就是,问卷倾向于听用户说了什么、而看不见用户真正做了什么。严谨的问卷分析也会比对后台数据,校验用户说的和做的是否一致,以清洗无效数据。




3/ 应用埋点数据

较之于问卷调研数据,我们想看“用户做了什么”,则通过分析应用埋点数据获得。

“应用埋点数据”也叫“埋点数据”、“前端页面数据”,我们可以简单理解为“通过技术手段获得用户在应用内(网站、客户端、小程序等)的操作行为数据”。其背后原理是:用户和界面发生交互,系统需要向服务器发送请求和返回请求,把这些请求预埋一段计数代码,就能得到页面的曝光数据和用户的操作数据。

埋点需要产品经理或设计师做好数据指标的定义,跟开发工程师提前沟通,让开发工程师在代码中嵌入埋点。一个埋点由多个字段组成,规范地定义字段,有利于我们在数据平台搜索埋点更方便。当我们怀疑数据有效性时,也更方便排查埋点问题。




埋点类型可分为曝光埋点、操作埋点和时长埋点:

1. 曝光埋点可以捕捉页面被展示的次数,可以是针对整个页面,也可以是页面中的某个区域。即我们常说的PV、UV。


2. 操作埋点则是在用户对页面某个区域(按钮、卡片、提示条等)进行手势操作(点击、双击、长按、滑动等)时,进行打点记录。对应的,也称之为某个操作的PV、UV。


3. 时长埋点是通过标记以上两类埋点、并计算时间差获得的。比如,我们记录用户选取模板耗费的时长,可以通过离开页面的时间(t2)-进入页面的时间(t1)计算。而离开页面则用点击左上角返回按钮、点击具体模板等“离开”操作来核算。



基于以上3种原始数据,我们可以运算得出点击率、功能渗透率、人均点击次数、人均使用时长等具有对比价值的数据。


较之于二手资料和调研数据,埋点数据更加贴近用户的真实表现,作为反馈指标的灵敏度更高,可挖掘性更强,也能作为客观衡量指标引入到每一次产品迭代中。


设计师理解埋点的原理,有助于在数据采集环节跟数据开发更好地沟通,并提出合理的数据需求。另外,当我们拿到一组数据,也需要从根本原理上去判断数据的信度和效度,确保数据没有质量问题再进行下一步分析。




PART 02

——————————

数据之于设计

数据分析能力会在UX设计师的岗位招聘要求中被提及,但除了电商和广告行业的数据化设计知识体系较为成熟,其他领域还在探索。另外,相比于市场营销、产品经理、产品运营等职能,设计师的分析框架是相对晚熟的。


实际上,我们很难从招聘广告中归纳“具备数据分析能力的设计师”长什么样,但我们期望这样的设计师对数据的感知力强、分析逻辑清晰、数据经验丰富,对某个垂直领域的数据仪表盘了如指掌等等。


数据对UX设计有什么用?或者说,在设计链路的哪一个环节,数据和设计才能发生化学反应?



UX设计日常流程为:得到一个需求(需求评审/需求挖掘)——输出设计方案(设计决策)——验证设计方案(设计实验)。顺着这个流程,我们来看看数据在UX设计各阶段的作用。



1/ 需求评审:以提升最终业务数据为目标,评估需求的价值贡献和优先级

肖恩·凯利斯在《增长黑客》开篇就提到“仓筒组织”这个概念:职能组织有各自的KPI,但未必对最终的业务目标都有利。比如开发人力有限的情况下,产品经理想上线新功能,市场运营想搞推广活动,设计想做UI大改版做炫酷的动画——就像N匹马有N个方向,马车跑不快。


尤其是当产品进入成长期,我们会发现“能做的事情真的太多了”!不仅仅是来自老板和产品经理的需求,每天都有用户想教你做产品,刚刚竞争对手又上线了N个新功能等等。另外,当多个产品经理分管不同业务线,每个产品经理都会认为自己提的需求优先级最高。那么,ABCD这几个需求,哪个更值得即刻实现?


有目标导向和成本意识的设计师,不会拿到PRD就开始画稿,而是做需求评审。下次产品经理给你提需求,或者自己想要主动提案,不妨从下面几个问题开始思考效益。


如果这个新功能上线或对已有功能做这些优化点:


|正向评估:如果做,能使哪些用户在什么场景受益?用户会因此使用、消费、甚至推荐我们的产品吗?

|负向评估:如果不做,是否会造成用户口碑变差,甚至弃用我们的产品?

|数据导向:预估这个需求对大盘数据(AARRR)有何贡献?如果无法在短期看到对大盘数据的直接提升,应该取什么样的数据指标来评估其价值(GSM模型)?

|比对优先级:目前有ABCD四个需求,而人力资源有限,当下最应该解决哪个数据环节的问题?


我们以腾讯文档的Excel按行填写功能为例,阐述如何在需求评审阶段就思考数据效益。


一开始,我们只是从用户吐槽中了解到在手机端使用Excel录入信息的困扰:协作人之间容易窜行误删误改别人填写的行,甚至把创建人输入的表头信息都给删掉了。


我们模拟信息收集场景,摘出Excel移动端输入的体验节点,发现“在有限的屏幕内去处理表格信息,需要来回滚动/缩放表格,再回到自己的行再输入”这一点最容易发生错误,尤其在没有冻结首行的情况下。



我们有收集表功能,也支持表格转收集表,但是都依赖创建人主动去使用这个品类/这个功能。我们是否可以在创建人不干预的情况下,直接把来回滚动的表格输入变成纵向的表单输入?



以上都是从“感知”角度发现和分析问题,确认了“存在这么一个问题”,然后提出了一个可行的想法。往往这个时候,我们容易为之兴奋。


但是如果我们坚持更精益的投入产出比,我们应当评估“这是不是一个要优先解决的问题”,即评估收益:改变Excel移动端的输入体验,能带来什么收益?


首先,我们做正负向评估。


|正向评估:如果做,用户可以在手机端更顺畅地录入信息,避免串行删改的错误。虽然这不足以吸引新用户使用我们的产品,但这个体验未在竞品实现,能形成差异化的记忆点,也许能带来好的口碑。

|负向评估:如果不做,手机端的Excel输入体验跟其他竞品无差,用户倒不会因此流失,但是创建人会因为协作者的犯错苦恼,也许会因此转为采用“IM一对一沟通”来避免出错。


然后是设定数据目标:如果这个功能落到数据板上,能作何贡献?


|数据导向:我们预期这个功能能够通过提升手机端的输入体验,来避免用户出错,降低创建人整理数据的负担,以提高用户留存(而非预期这是一个拉新功能)。并且,设计假设正确,应该能通过一些数据指标看到用户的行为变化。




最后,对比同期提出的几个产品需求,评估优先级。


|比对优先级:假设Excel按行填写的需求是A(图中黄色点),同期有一个影响文档安全分享的需求B。如果我们按照正负向评估去考量优先级,将AB两个需求都放在象限图里,越外层越应该优先处理,那么我们就应该优先处理需求B。



以上是为了将思维可视化呈现给读者,实操时更重要的是数据意识和敏感度。图示仅供参考,用何种形式表达不重要。


掌握一套清晰的需求评审思路,才有话语权去讨论这个需求是做还是不做、即刻要做还是延后再做。这不仅仅是UX设计师需要具备的目标导向思维和需求分析能力,而是整个团队都应该建立的数据意识和工作流。这也适用于对设计师提案的自我审查,避免自娱自乐。


2/ 需求挖掘:数据作为产品健康度的体检指标,为设计圈定问题域

产品在不同的成长阶段关注的短期效益会有所不同。初创期,产品先要验证其假设的需求是不是用户真实需求、商业模式是否可行。当产品发展到一定的用户规模,我们可以通过对比关键数据指标,去判断现阶段是否符合预期。这就像我们去医院抽血做体检,血样指标可以反映我们当前是否健康。


如何检验产品健康度呢?我们首先关注宏观的数据转化是否符合预期,即AARRR。海盗指标这一套,想必大家耳熟能详。但对设计师来说,难点在于如何将宏观数据转化与具体的用户使用场景进行关联,进而落实到具体的设计任务。


以腾讯文档为例,在线文档的核心用户价值是“从创作到协作的多人多端无缝同步”,因此我们定义用户的关键路径是“创作→分享→协作”,即:



基于关键路径,我们继续下钻分析每一个环节,建立用于监控“转化质量”的行为漏斗。比如在“分享”这一步,落到APP里,这个行为漏斗是:



我们发现仅30%的创建人在分享文档前设置了非私密权限——这个数据并不符合我们的预期,因为这会导致创建人分享文档后,协作人无法直接查看或编辑文档。协作人需要进行权限申请,创建人则需要处理相应的权限申请通知或更改权限,从“申请权限”到“审批通过”的时间差降低了协作效率。



我们进一步去找关联的数据指标,来确认“这给用户造成了困扰”——“有多少用户在文档分享出去之后再返回来设置权限”‘、“一个创建者平均要处理多少次权限申请”等等。


通过小范围的用户测试,我们了解到“权限设置”是一个视觉盲区。于是,我们优化分享页的信息展示,来改善“用户看不见权限设置”这个问题。另外,当创建人在处理权限申请的通知时,提供修改权限的入口,以避免重复处理同一个文档的申请消息。



最终,我们将“分享前进行权限设置”的转化提高到80%——吹牛的,业务数据太敏感,无法以真实数据跟大家分享,本文的数字皆为脱敏数据。


这就像一个剥洋葱的过程。先找到产品的核心价值和对应的主路径,再拆解到对应的多个用户任务流,关注微观的某个环节转化是否有问题。利用数据诊断产品健康度,然后继续用数据或其他研究方法下钻,下钻到可以落地到设计点的层面。



3/ 设计决策:借鉴用户行为数据,对方案进行快速决策

2016年听了白木彰老师在杭州的一次现场分享,他对“Design”的理解非常透彻。“Sign”是“标志”,应该是大家最共通的常识,就像国旗是这个国家的sign。那“De”是什么?台下有人回答“重新定义”,而白木彰很自信地说:“不,这是一个否定词”。

对于UX来说,同理。每一次的设计都是一次否定,否定现有体验的合理性,否定现有的产品、服务或某一功能完全满足需求。反过来想,则是审问自己的设计方案:每一次的“否定”,真的更好吗?


这里举一个“小需求”为例:腾讯文档Excel的PC端右键菜单高度优化。笔者目前负责腾讯文档编辑模块的UX工作,日常就是很多这样的“小优化”,其实这更加考验数据敏感度和对“严谨”的坚持。


需求背景就是用户反馈“右键菜单太长了,小屏幕看不到菜单底部的内容”。


“展示问题”的解法有很多:


解法1/ 用UI手段,降低单个menu item的高度。



解法2/ 重新归类,通过折叠来缩短菜单。



解法3/ 当菜单无法完整展示,重新锚定其在屏幕的坐标。




对比竞品,确实有表格产品通过(2)去解决这个问题,但是我们捞数据发现:右键菜单中,插入行列是高频操作(红色部分),点击次数比其他功能高5~130倍,且人均点击量分别是3次和2次。我们决定不去对增加行列进行菜单折叠,因为这样做虽然我们解决了“菜单太高”的问题,但降低了点击效率。



接到某个需求的“A问题”,我们容易一叶障目。但是,会不会因为我们解决了A问题而引发B问题呢?数据帮助我们快速决策,避免B问题的出现。谨慎对待每一次小设计,因为每一次小设计都是一次否定。


4/ 设计实验:采用数据实验对设计方案进行择优或改进

大家对数据实验应该不陌生,常用的方法有AB测试和灰度测试,是一种控制变量的抽样实验方法。


AB测试是指通过抽取抽取等量用户样本进行AB两个设计方案的投放,对比两组数据,进行方案择优。这两个方案的差异要严格控制在“仅有一个因素的差异”。这跟我们初中做生物实验论证“一棵小树的生长需要阳光”的思路一样:两组等量的小树,一组有阳光,一组没有阳光,经历相同的时间后对比生长的平均高度差。水、空气、养分等其他条件要严格一致。因此大改版等“多变量”的设计并不适用于AB测试去印证。


大改版则通过灰度测试或拆分变量去做AB测试来确保效果。灰度测试是指如果软件要在不久的将来推出一个全新的功能,或者做一次比较重大的改版的话,要先进行一个小范围的尝试工作,然后再慢慢放量,直到这个全新的功能覆盖到所有用户。也就是说在全量发布的黑白之间有一个灰,所以这种方法也通常被称为灰度测试。


设计师需要观察综合的数据指标,以腾讯文档为例常规的指标有:PV、UV、人均点击次数、功能渗透率、使用该功能的留存率等等。另外是多渠道收集用户反馈,包括腾讯文档的“吐个槽”社区、微博搜索关键词、随访身边的用户朋友等。



Conclusion

——————————

结语

数据化设计不是对“精心打磨体验”的否定。恰恰相反,对设计工匠来说,数据分析能力是一种新的“打磨工具”,提倡在设计实施和决策过程中更科学和客观。UX和数据的关系,就像我们期望鞋子被量产之前能够有数据佐证“这款鞋好看好穿好卖”,而不是否定“好看又好穿的鞋子能带来更好的销量”。

文章来源:站酷   作者:腾讯ISUX

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


日历

链接

个人资料

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

存档