首页

福格模型的实际应用

资深UI设计者

超级秒杀日是秒杀频道衍生出来的大促营销活动,在大促期间扮演着重要的角色。虽然秒杀的商品及价格由业务侧主导,但设计师仍可以通过方法论的应用去提升会场的转化效果。本篇将会介绍如何将 fogg(福格) 模型运用到秒杀会场的设计中。

什么是秒杀?

1. 秒杀的特点

秒杀就是在限定时间内,通过发布一些超低价格的商品,吸引买家抢购的一种销售方式。因此秒杀具有两个核心特点,一个是限时降价,一个是限量抢购。

现阶段,秒杀作为一种营销工具,已被各大电商平台广泛使用。利用秒杀的特点,平台可实现用户活跃、粘性提升、销售增长等目标。

2. 超级秒杀日的定位

超级秒杀日是京东秒杀频道推出的营销活动,旨在辅助平台销售的增长,同时提升频道的知名度,带来日常流量的增长。在促销期间,会场承担着流量分发、单品销售、商业合作的作用。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

FOGG(福格) 模型简介

Fogg 模型的核心理论比较好理解——想要用户完成转化,需要满足三个条件:

  • 用户有足够的动机
  • 用户有能力完成转化
  • 有触发用户转化的因素

如下图所示,当用户有高动机,并且有较强的能力完成某件事时,很容易成功触发转化行为,反之则容易触发失败。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

FOGG (福格)模型在秒杀会场中的应用

在实际项目中,需要结合具体的场景,综合考虑三个要素的对应关系,进行针对性的设计。

1. 动机层

动机分层

根据大促的用研报告,将会场用户的动机分为 3 层:强目的性,弱目的性和无目的性。其中,弱目的性的用户占大多数,表明用户的转化还有很大的提升空间。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

因此在会场的整体动线设计上,会对不同动机的用户进行针对性的内容设置,着重提高会场的可逛性,通过多维度营销矩阵刺激这部分用户的消费需求。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

动机增强

除了依靠动线去匹配不同的用户,实现用户动机的增强外,还可以采用氛围营造的方法,快速感染用户的心智,激发用户的潜在需求。这部分通常通过视觉设计进行表现,例如秒杀会场,会通过闹钟元素及鲜亮的颜色,去提示用户商品是限时的,需要马上抢购。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

2. 能力层

降低价格门槛

降低价格门槛的目的是为了匹配用户的购买能力。限时降价是秒杀业务的核心特点,在会场中不仅要明确告知用户商品的价格,还应突出价格优惠的力度,在强调秒杀属性的同时实现用户的快速转化。价格优惠可通过多种形式表现。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

减少决策成本

会场中存在过多冗杂的信息会干扰用户的判断,导致用户流失。因此,要减少用户的决策成本,让用户不经过大脑思考便下了决定。例如,可在会场中增加推荐模块,根据用户的行为进行实时推荐,实现商品的精准打击。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

3. 触发器

触发即是在恰当的时间告知用户,现在可以去做了。因此触发器的本质是将目标用户与目标行为进行连接。在秒杀会场中,触发通常以消息推送,文案提醒,利益刺激等形式呈现。

在预热期设置提醒功能,并将优惠券或券包的使用时间定在高潮期,能有效地提升用户回访,完成购买。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

在楼层和弹窗内设置互动任务,完成后给予奖励,可以提高楼层的点击率,而获得的红包将进一步刺激转化。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

小结

秒杀会场并不仅仅承载着销售转化的功能,因此会场的内容及设计,需要综合考虑业务目标及业务规划。FOGG 模型虽然从理论上来看比较容易理解,但实际的应用情况也是灵活多变的。运用 FOGG 模型,可以让你的设计思路更加清晰,在一些细节上也能更加出彩,只需要加深对它的理解,就能在各种变动中抓住用户转化的关键点,确保会场的转化效果不受影响。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:优设  作者:
JellyDesign

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何做好用户体验度量?

资深UI设计者

体验度量是什么?

简单来说,用户体验度量是通过一套测量体系量化用户体验的过程。

尽管体验很难被科学客观地分析,但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话:If you can’t measure it, you can’t improve it(如果你无法度量它,你就无法改进它)。我们相信更好地衡量体验设计的价值,可以帮助我们更好地实现产品价值、用户价值、商业价值,甚至是社会价值。

为什么要做体验度量?

下面我们再来分析一下做好体验度量能帮我们解决哪些难题,首先从我们遇到的几个问题出发。

概念过于抽象主观:设计师们提出的体验优化方案被认为过于主观,难以得到直接证据支持,各部门很难达成共识,方案难以推进落地。怎么办?

影响因素复杂多元:现有的 NPS 满意度调研反映了每个季度的商家整体满意度,但是团队面对 NPS 结果无法直接定位问题,难以进行有效的诊断和提升。怎么办?

问题难以闭环管理:现有的 VoB 系统能够收集到一定数量的商家反馈问题,但是这些零散的应急需求很难被高效地纳入体验优化项目。怎么办?

如何做好用户体验度量?京东设计师总结了五个步骤!

相信大家或多或少遇到过类似的问题,虽然大家有着“以用户为中心”提升“用户满意度”的共同目标,但在过程中具体该怎么做,仍然是抽象模糊的。体验度量恰恰是解决这些问题的关键策略,我们希望通过体验度量帮助京麦达成以下目标做出更好的设计,创造更大的价值。

目标一:让商家体验从“抽象”到“具象”,从“玄学”到“科学”,定义一套被各部门认可的衡量标准;

目标二:与商家建立更加直接的联系,从商家角度直接洞察需求,更有针对性地定位优化问题;

目标三:更好地实现体验设计价值及体验设计体系化,与各部门建立合作关系,长期监测跟进优化。

怎么做体验度量?

体验度量一般可以分为五个步骤:拆指标、采数据、做诊断、再优化、续监测。

在京麦一期度量中,我们主要完成了前三个步骤,后期我们会尝试推进后两个步骤,同时也将继续完善现有的度量模型和调研方式。

1. 拆指标

首先我们要明确这个产品的用户体验由哪几部分构成,就比如评价一个人的英语水平如何,我们可以从听、说、读、写这四方面进行评价。

通过比对分析业界相对成熟的指标模型,我们发现各个模型有不同的切入点,比如 PULSE 模型以网页产品商业化为导向,HEART 模型以用户为核心,PTECH 模型更适合企业级产品,UES 模型更适合技术产品等。涵盖的维度多种多样,有的维度是产品相关指标,比如留存率、日活用户数、转化率,有的维度是用户侧反馈,如 NPS 净推荐值、满意度。

如何做好用户体验度量?京东设计师总结了五个步骤!

深入分析这些维度,我们发现几乎所有指标都可以被分为系统表现、用户行为、用户感受这三类。

如何做好用户体验度量?京东设计师总结了五个步骤!

有了前面提到的三大目标和参考指标,我们开始分析京麦移动端的现有情况。

由于京麦在现在这个阶段已经有了相对稳定的产品形态,市场上也有了同类型的产品。因此,我们首先把完整性作为反映产品系统表现的重要维度,也就是商家需要的、别人家都有的,京麦“有没有”?

第二项维度是参与度,店长是否会通过移动端来经营管理店铺呢?客服是否会通过移动端来答复客户呢?也就是各类角色“用不用”。

而作为一款 B 端产品,它的使用效率和易用性是至关重要的,我们要关注用户的行为,也就是商家们是否能“又快又好地使用”。

最后一项指标是满意度,它代表了用户的主观整体感受,这也是所有指标中涵盖面最广的一项。总的来说,商家们是否认为这个产品“令人满意”?

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:体验度量具有非常强的业务属性,不同的业务类型、业务阶段、业务规模、资源情况都会有与之相配的不同的合适的度量方式,适合自己的指标才是好指标。

2. 采数据

有了度量指标之后,我们需要通过从不同渠道去收集尽量全面的数据。还是拿英语举例,我们该如何去给听、说、读、写这四部分打分呢?可以通过听力、口语、阅读、写作的统一考试打分,可以让老师根据平时上课的表现打分,也可以让同学互相评价打分。

那么度量的数据也可以有多种来源,比如通过用户访谈得到用户主观使用感受(定性数据),通过问卷调研得到满意度或是易用性评分(定量数据),通过后台数据得到用户的行为数据(定量数据)。

如何做好用户体验度量?京东设计师总结了五个步骤!

基于移动端京麦现在所处的发展阶段阶段,我们重新明确了我们的调研目标:

  • 清晰与竞品差距与机会点;
  • 关注核心模块的使用体验;
  • 了解用户的主观感受。

因此,我们在这个阶段实施了用户访谈、问卷调研和竞品分析三种不同的调研活动,收集了大量的定性数据及定量数据。

如何做好用户体验度量?京东设计师总结了五个步骤!

竞品功能完整性对比分析

调研目的

通过分析对比现在行业内同类产品的功能,计算京麦功能的完整性得分。以千牛、拼多多、京麦三个平台六个端为分析对象,测试各一级、二级、三级功能的支持情况。

调研方法

确认竞品后,通过使用各家产品的具体功能,拆分一级、二级、三级或更细节的功能,填写完整性分析表;

计算完整性得分(京麦具体计算以二级功能为标准,分为六个不同等级,分别对应六个分数)。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:可以通过与产品同学的沟通,共同完成各级功能模块及相应支持程度的定义;后期可以纳入客观数据指标,结合用户的参与情况、平台满意度计算权重,重新定义重要程度、支持程度;以一个季度为统计周期,及时跟进新上线功能。

线上用户访谈

调研目的

与用户直接对话,较为直接、细致地了解不同角色用户如何使用各功能,以及在使用过程中经常遇到的问题,了解他们的使用习惯和实际需求。获得用户画像、用户使用感受、用户问题反馈等定性数据。

调研方法

用户招募:提前 1 周设计招募问卷,并在 QQ 商家群投放、回收,筛选目标用户,提前打电话确认访谈意向;

前期沟通:添加商家的微信,了解商家的基本信息,预约商家参与时间,并要求商家提前在手机/电脑上安装腾讯会议;

访谈大纲:根据具体想要了解的功能模块、用户群体等,撰写访谈大纲,包括开场白、基本信息、具体问题、观察操作提问、延展问题、结束语等;

实施访谈:提前预约会议室,打印访谈记录表。需要至少一位主持人、一位观察记录员,访谈时长控制在 30-45 分钟左右;

访谈结果梳理:每场访谈结束,参与者进行快速回顾总结,截取录屏中关键段落,提炼对应的用户行为、态度、问题、需求等信息,逐步建立猜想,并在后续的访谈中进行验证、修改;每轮访谈结束,对共性问题进行分类归纳,梳理电子化在线表格;撰写访谈报告(可能包括用户体验地图、用户画像等);

后续跟进:邮寄周边礼物,并建立商家体验群,维护长期合作关系。

如何做好用户体验度量?京东设计师总结了五个步骤!

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:提前争取更多利益点吸引商家参与;提前明确目标用户类型,与产品侧配合利用线上使用数据定位筛选访谈用户(如使用经验、使用频率、经营类目等);提前与受访者沟通,可以让商家准备反馈问题列表,与商家反复确认时间;确认用户接受上访谈使用的设备及场景,对可能出现的意外情况做预案;访谈后,在企业版微信建立相对稳定的商家关系,以便回访;访谈信息整理需要更多人同时参与,尽量在访谈当天或次日完成转录、问题分类,及时补充假设,在后续访谈中验证/推翻;及时从录屏中截取关键段落、截图,便于举证。

线上问卷调研

调研目的

以更大样本量验证访谈结论,同时通过对大量用户的主观打分、行为习惯的分析,得到对产品整体的使用评价,直接获得用户角度满意度、参与度、易用性得分。

调研方法

问卷设计:提前 1 周开始设计问卷,根据前期访谈结果,有针对性地设计各模块、各角色对应问题;

问卷投放:针对不同端的问题,分为 2 个问卷,分别投放;(如果需要长期追踪,建议以季度为单位,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放);提前与产品、运营侧进行沟通,确认上线、下线时间,以及所需物料,如文案iconbanner 等;

问卷结果梳理:数据清洗、分析;梳理关键信息,制作图表;输出报告结论。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:1. 尽量咨询用户研究团队专业人员,听取他们对问卷题目设置的建议,留出组内讨论、线上测试时间,进行 1-2 轮调整;

2. 如果需要长期追踪,建议以季度为单位投放问卷,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放;

3. 提前与产品、运营同学进行沟通,确认上线、下线时间,以及所需物料,如文案、icon、banner 图等。


3. 做诊断

收集了大量数据信息之后,我们需要设定不同维度的权重,并通过一定的规则计算出各指标的最终得分。比如工具类产品,可能更强调用户达成任务的效率,因此易用性和任务效率权重较高,而主观数据的满意度权重则相对更低。

同时每项指标的背后都有一种或多种的数据采集方式,每项指标的数据颗粒度也不同,有的可能只针对一个模块,有的可能涵盖整个使用过程。因此,我们在设定计算规则的时候,要尽可能的全面客观。

最后,将度量体系的各个维度进行加权计算,基于数据表现,可以诊断出产品的提升信号。

完整性 | 功能完整性对比分析(客观)

目前,京麦在整个商家后台行业中已经处在功能相对较为完善的阶段,因此完整性将作为一个重要指标纳入整个体验度量体系中。通过与其他同类产品对比,可以看出各端功能的覆盖完整度,这一维度是完全客观的度量指标。

易用性 | 用户使用难易程度(主观)

易用性是衡量用户在使用产品各功能时感受到的难易程度的标准,是完全主观的度量标准。在比较了各类可用性测试、易用性测试度量体系后,我们选取了表格中的四项维度和对应的七个问题。通过问卷的形式,以李科特五度度量(强烈反对=20 分,反对=40 分,中立=60 分,赞同=80 分,强烈赞同=100 分)换算获得了易用性的分数。

如何做好用户体验度量?京东设计师总结了五个步骤!

参与度 | 各角色用户常用功能模块的使用率(主观)

参与度是衡量用户对各功能模块的使用率的主观度量标准。使用京麦的商家可以按照其工作岗位分为店长、运营推广人员、客服人员、财务人员、技术人员等多种类型,通过对各类人群常用功能模块的使用率的加权平均值,计算整体的参与度。

如何做好用户体验度量?京东设计师总结了五个步骤!

任务效率 | 各角色用户完成特定任务的投入产出比(主观&客观)

任务效率是用户通过使用京麦完成某一特定工作任务(发布新商品、填报活动等)的投入产出比,通常以时间、完成度、出错率等具体业务指标来具体定义。一期我们以 100%-用户主观反馈问题的比例来推测计算任务效率。二期计划:与各条业务线沟通,以他们的业务指标来定义更具体的任务效率指标,通过用户行为监控数据来计算客观的任务效率值。

满意度 | 用户对产品整体的使用感受(主观)

使用季度性《平台商家满意度调研报告》统计得分,也可以在问卷中设置相应打分题进行统计。

4. 再改造

通过前面几个步骤的计算得分,产品已经有了较为宏观的改造方向,我们可以再结合前期调研收集的用户反馈问题,重点解析数据表现背后的原因。这个阶段需要引入更细致的专家评估等方法,对各类问题的优先级进行排序。

我们计划结合产品现有的移动化进程,首先提升完整性,然后分批次地针对核心模块优化易用性、任务效率,并通过概念设计及用户测试等方式进行产品优化改造的快速验证。

5. 续检测

后续,我们也希望引入更多用户的行为数据指标,如用户活跃度、用户增长率、功能插件使用率、页面点击率等,从业务指标中获得更全面的数据信息。

同时引入监测工具,对产品重塑后的关键指标进行持续追踪,周期性监测指标的改善情况,让各部门同时参与体验度量的工作,提升优化产品的效率。从体验度量指标的数据采集到数据分析到数据的可视化,再到最后的优化落地,让体验度量的闭环全程可管理。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:优设  作者:京东设计中心JDC

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计体系的响应式设计

资深UI设计者

随着产品生态的多端化进程,越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露,例如:

XX 能力要在手机上使用,不得不单独为移动端开发几个页面甚至一个产品(反之亦然);产品数据量很大,Ant Design 默认字体 / 间距太大了,不够紧凑;版式不够优化,造成空间浪费;

Ant Design 基于如何在小屏幕中解决信息展示问题这样的出发点也在很多组件中提供了响应式设计,但拥有更加完备的环境适应性应该是一个设计体系长期的目标之一,因此在全局性地考虑跨端、跨多屏幕尺寸、信息密度等响应式设计方面还值得我们继续深入研究。

本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分,从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息,旨在对响应式设计有一个笼统的了解。

关于 Adaptive Design 与 Responsive Design先厘清两个概念,关于响应式设计通常会有两个普遍认识,即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念,它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸,而 RWD 是同一套代码做弹性的适应,本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题,本篇所指的「响应式设计」 概念包含了两者,不做明显区分,关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。


移动优先设计策略

提响应式设计不得不提「移动优先」设计策略,移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略,基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略,它认为在响应式设计中优先为屏幕限制更大的移动设备设计,再扩展到大屏幕的 PC 端是一种更有效的设计方法。

例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法,Fiori 尤其指出「移动优先」专注核心功能,专注增强而非降级,提前考虑移动端更多的独特特性以及异常情况,能提供更好的体验。Material Design 可能算是移动优先的最佳实践,它本身就诞生于 Android 平台,而后再通过大量响应式规则扩展到桌面及 Web 端,使得 Material 在多端都拥有一致贯穿的良好体验。

(Material Design 的响应式设计)


「移动优先」本质上是基于一种「增强」的设计思想,一个产品如果要同时适应于不同的设备,一直以来有两种策略:优雅降级 vs. 渐进增强,后者认为先从最小和最受限制的低级设备(移动设备)入手,再为更高级的设备(桌面设备)增强信息和交互,这意味着在更多限制下,迫使设计考虑如何减少、汇总,分组信息,有利于聚焦核心信息以及为更多限制考虑。

然而移动设备已不再是「低级设备」,Fiori 尽管强调「专注增强而非降级」,但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖,让「移动优先」沦为了某种形式化的概念而难以执行。

例如下面这个报告界面的场景里,移动端仅展示汇总的报告图表信息,但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表,而在桌面端同时包含了明细数据与图表两部分信息,这看上去并不像是一个「增强」的设计思路,更像是在全量需求下基于设备限制所采用的「降级」策略。

(Fiori 报告界面的 Adaptive Design)


因此「移动优先」并不一定是形式上优先设计移动端,它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下,「移动优先」不再适合作为单独概念提出来,而渐进增强的设计思想应该体现在更细分的场景中,例如在布局、信息排版以及交互反馈中,我们应该优先考虑限制更大的移动端;在一些交互方式上,优先考虑限制更大的鼠标操作。甚至在复杂业务场景里,优先满足核心业务流程顺畅也属于渐进增强的策略范畴。


设计模式

这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案,这些设计模式除了单独应用外,有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案,分别是:调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

Resize – 调整大小

调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式。

(Resize)


Reposition – 重新定位

改变 UI 元素的相对位置,以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上,或是在组件里对一些特定元素的处理,例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。


(Reposition)


Reflow – 重新排列

改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,并结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon 的 Fluid Grid。



(Reflow)

Show / Hide – 显示 / 隐藏

基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。



(Show / Hide)

Replace – 替换

针对不同尺寸的屏幕采用不同形态的组件,通常应用在对具体的组件做针对性响应式设计中,但需要注意用户面对变化时的认知成本。



(Replace)

Re-architect – 重新构建

折叠或拆分信息架构,这种模式在 Web 端较难实现,通常出现在一些 Native App 的场景。



(Re-architect)

Density – 内容密度

除了上述 6 种模式以外,我把内容密度也归纳为一种设计模式,Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度,而针对大屏幕的 Web 端则提供紧凑密度的方案,他们认为移动端手指交互所需的空间要求更高;Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。

(Material Design 的内容密度示例)


值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计,越紧凑的布局栅格间距越小,这看上去很合理,却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义,但在内容密度的处理上和 Atlassian 恰恰相反,它认为高密度内容适用更宽松的栅格空间,相对是一个更合理的设计。在信息密度的问题上,我们的核心目的其实是提升信息效率而非单纯提高视觉密度,因此解法上需要更完善的考虑。

(Atlassian 与 Material 的栅格密度对比)


实施模式

实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段,经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

Rem – 相对尺寸单位

几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位,Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸,即 1rem = 16px,Alta 默认采用是 14px 的规格,并允许基于不同应用选择 12px 或 16px 的规格,默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现,这也许和他们的产品特性相关。

相对尺寸单位是非常具有实施价值的,它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容,这使得设计能更方便地调整内容密度,或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题,且几乎没有前端成本。

国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端,主要为了两个目的:方便计算尺寸、在不同宽度的设备上等比缩放内容,这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段,在使用上本身也存在一定争议,而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用,甚至很多设计师还并不了解相对尺寸单位的使用方法,广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。

Breakpoints – 屏幕断点

屏幕断点是响应式设计的基础依据,它决定了我们要适配到什么样的设备或屏幕规格,并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的,包括考虑了移动设备的横评竖屏情况,关于详细的规格设置其实并没有太大参考价值,设计体系都是根据自身定位以及设备覆盖的情况来制订的,例如 Material 的断点在低分辨率范围分得非常细,是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下,屏幕端点不需要太多,无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。


(屏幕断点分布)

Fiori 的断点设计比较有意思,在设计文档中仅有基本的布局规则,没有明确的 Breakpoints 规则,Fiori 对于不同的组件会设计不同的 Breakpoints,例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格,而在 Form 的组件中,Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞,从这点上看出 Fiori 认为不同的组件有不同的表达模式,因此应该针对性对组件进行优化。

(Fiori 的 Table 组件适配情况)

(Fiori 的 Form 组件适配情况)


Flex Layout – 弹性布局

Flex 布局是 CSS3 提供的强大布局能力,从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局,Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中,Flex 布局通常结合 Breakpoints 使用,在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力,例如 Fluent 在 windows 采用 XAML 构建布局系统。

无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力,响应式设计要解决布局的问题将会深度依赖这些基础技术手段,本篇不进一步展开。

Grid System – 栅格系统

栅格系统是所有设计体系必备的,我们通常将页面横向分为 N 列,定义每一列的尺寸与间距,这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的,通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列,同时一些设计体系还提供了可见性相关的 token,来控制界面元素在不同屏幕的显示与隐藏。

Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统,因为 12 的因数够多,能满足足够多的布局细分同时又不至于太复杂,Carbon 的做法更加 geek 一些,他们的「2x grid」采用了 16 栅格系统,布局粒度更细但放弃了 3,6 这样的因数。 Ant Design 为了满足复杂的业务情况,采用了 24 栅格系统,24 栅格提供了更高的灵活性的同时,也大大增加了复杂度,面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。

另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念,核心思想是在较小的屏幕上降低栅格数量,将多余的栅格自动折行弹性布局。


(Carbon 的栅格定义)

在屏幕尺寸变化时,栅格主要有两种响应模式:Fluid、Fixed


(Fluid)


(Fixed)


这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置,在不需要特定响应式的场景中不再需要指定繁琐的 token,且能满足大部分高频且通用的情况,在一定程度上降低了成本。


组件应用

除了通用的响应式规则以外,设计体系在具体组件中的响应式方案还有许多值得挖掘,能为我们的组件设计提供参考价值,本篇不再一一展开,仅提两个典型的应用情况:

框架

(Carbon 的框架设计)


框架算是一个特殊的组件,在不同的设备中界面框架的适用有非常大的差异,几乎提到响应式的所有设计体系都给出了框架响应式方案,例如 Alta 将界面框架分为四块,以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。

通常情况下设计体系的框架组成按形式可以分为:

  • Header – 通常情况下常驻

  • Sidenav – 分为左侧右侧两种情况,一般用于放置导航,在不同设备会有展开,收缩,隐藏三种状态

  • Content – 内容区,通常由 Grid 控制布局

  • Footer – 如有,固定在页面底部

  • Float – 浮动框架,用于临时状态,通知或弹窗等

设计体系通过对框架的定义,以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。


(Material 的响应式框架)


组件

Fluent 或 Material 在设计文档中更多基于基础的网格,布局,设计模式来阐述通用性的响应式规则,因此他们的响应式设计有非常好的延续性,组件的响应式方案基本上都遵循这些规则。

而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面,他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里,在桌面端与移动端分别是 table 和 list 的模式,这个方案并不是通过全局抽象规则得出来的,而是基于对组件的针对性设计,正如他们为不同的组件设计了不同的 Breakpoints,这种针对性也适用于特定的 UI 解决方案。

(Fiori 针对 Table 的响应式设计)

在一定程度上抽象规则的同时,如果我们能够为每一个组件都考虑到不同场景的响应式,当然就会提供更精细化的体验。在一个完备的设计体系里,在设计每一个组件资产时都以渐进增强的设计策略,考虑到不同的设备及屏幕适配是非常有必要的。

响应式设计的世界烟波浩渺,书不尽言,言不尽意。Ant Design 目前计划从布局基础规则以及内容密度的解决方案切入,逐步完善响应式设计的体系,这是一个重要且漫长的过程,至于文中挖下的坑还需要深入研究逐一补充,本篇初探先到这里,欢迎大家留言指出问题也很希望大家能留下想法共同探讨。





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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





设计师如何在设计中讲好故事?

资深UI设计者

讲故事也是一种设计能力。

更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

讲故事也是一种设计能力

undefined


作为设计师,经常需要和产品,技术,老板去沟通设计方案,每次都是向外发出声音表现你的的机会,很可惜,大多数设计师在表达时,对方还无法理解你的意思,更难理解你的设计概念和设计思路,很多设计师也因此害怕去说,其实设计师学会讲故事非常重要,也是专业能力的一种。今天这篇文章,希望可以帮助到你。


undefined


能把设计说成故事是一门艺术,作为设计师,我们必须借助讲故事的方式,将产品功能推导到用户价值层面,在大公司里面,设计师讲故事是一个越来越重要的技能,一个好的故事能够统一大家的建议,获得领导的认可,是将产品价值和功能流程和用户的情感联系在一起的关键!


看看别人怎么讲故事


韩国的设计,韩国很多潮流的娱乐视频都是围绕一个故事开始的,故事灵感也来源于大多数人生活,容易让观众引起共鸣。


undefined

 


这个MV是来自Zion.T的Eat,讲述了一个人在失落沮丧的时候,要照顾好自己,整个故事围绕着我们生活中各种失落,孤单的情节,再配合美妙的旋律,让观众感同深受。
undefined
K.will的Day也是运用电影短片讲述一个故事,讲述了一个单相思男生的故事,虽然故事很浅,但是每个故事的每一步都是来源于我们每个人生活当中的。


undefined


在Airbnb宣传页面,运用故事讲述了一家3口,为了女儿的生日,一同飞往洛杉矶,他们去了迪士尼乐园,在洛杉矶预订了房源,受到了房东的欢迎!这样宣传比广告更加真实打动人。
故事驱动的设计很容易入手,从情节提要开始,回归用户视角给出用户想要的体验。


undefined


allthatisshe一个英文网站,这个网站最初是在博主休产假期间创办的,它原本是一个很简单的时尚博客,但是博主异想天开的自我表达方案,以家庭小孩为主题的家庭故事,吸引了全世界的关注,在ins上关注度极高。


undefined

 


整个网站每篇文章都在描述博主和小朋友的生活故事,他们一家人相处的很多细节,这中间再推荐一些好用的商品,去旅行带着观众一起看风景等!整个网站的故事一般都是从生活细节出发,比如上班的路上,在品尝美食,听着喜欢的音乐时候,然后结合巧妙的内容,吸引用户。


讲好故事的5个步骤

 


那么,作为设计师,平时在述职,总结时候如何去讲故事呢?怎么去把一个合理的项目,通过叙事的方式,让它能和听众引起共鸣呢?


undefined



今天分享给你,一个讲故事的框架,一共有5步:

1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)

我们来拆解下这个思路。


更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


1.开始(背景)


这个项目是如何开始的,它的整个商业背景是什么,要解决用户的什么问题!在我们演讲或分享时候,尽量在140字以内描述清楚,整个项目的背景和简介,让听众记住你。


undefined


乔布斯著名的演讲家,他分享有个小技巧,就是可以先抛出问题和困惑!一次iPad2发布会时候,乔布斯一上台就抛出几个问题,大家对于iPad销量很担心,iPad被各种抄袭,苹果怎么办?在一开始就通过问题,吸引听众,然后引人入胜!


undefined



来看一个实际案例,来自Facebook相册一个设计改版,在项目开始,设计师就介绍了整个项目背景,Facebook Photos是让用户更方便的分享他们的故事,分享他们的图片,让用户生活丰富多彩!那么如何帮助用户更加便捷,更快的分享照片,是这个项目的设计重点。


2.冲突(问题)


讲一个好的故事很难,一定要有冲突和问题,就像看一部电影,一定要有反派存在,只有冲突明显,观众才会觉得更有趣。那这个环节就需要我们把这次产品改版,最重要几个问题给提炼出来。


undefined


以Facebook为例,Facebook相册遇见的问题是,通过数据研究发现,人们不愿意在Facebook中分享照片有以下几个原因:


1.大家手机中的照片很多,不是为了分享而拍摄的!


2.选择照片很难,比如自拍,一次拍了十几张,选出一个最好的很费时间


3.大家经常忘记了分享

所以,在这个环节,我们需要从生活场景去思考,用浅显易懂的语言去讲述当前产品遇见的问题!


3.情节(解决问题的过程)


针对这些问题,设计师怎么去解决呢,在这个环节,一定要充分把你整个设计过程的思考,详细描述,比如设计师常用的情绪版,竞品分析,设计的形色字构质的思考都可以在这个环节表达清楚。


undefined


Facebook团队,基于用户研究数据,和数据结果,决定先定出一些设计原则,通过设计原则和主张来解决之前发现的问题和冲突!于是这个过程和产品开发一起讨论出来,设计的原则和目标:


1.帮助人们记住他们可以分享的故事


2.轻松快速的分享


3.设计一种新的布局方式,让大家分享时候自豪,能够吸引人!


undefined


然后展示了他们做的竞品分析,情绪板,以及一些设计探索的方向!比如做了十几个原型图,对于相册的展示设计了很多概念方案,包括各个文件类型的展示方案(照片,文字,视频,地图)等等!


4.高潮(设计决策)


基于以上设计过程,就可以得出对应的设计决策,再进行详细的方案设计展示。


undefined


重新设计了页面框架,用户的相册框架图来帮用户更好的分类相册,同时在布局上对各种文件类型进行分类,优化相册的浏览效率。


undefined


视觉设计时候,去掉不需要的设计元素,突出内容,确保每一步都能是一个最佳的解决方案!


undefined


同时在视觉设计上进行了很多创新探索,将相册故事以胶片的形式呈现在顶部,让用户更愿意去分享。


undefined


在设计时,考虑多端的统一性,针对不同端的展示效果,真正的保证设计的落地性!


Facebook这个设计环节就像我们电影的中间高潮部分,怎么去解决冲突的,如何定决策,并逐步去落地整个设计方案的!我们在工作中也需要在这个环节很好阐述你根据设计策略,在设计上怎么去落地的,设计方案是什么样的,最后上线是如何的。


5.行动和结果


undefined


这个环节需要把你故事中遇见的问题抛出来,以及这些问题你是怎么去沟通解决的。

比如Facebook相册问题,就遇见了新版本排期问题,无法一下子改完,那么设计师针对这个问题,设计了中间迭代的方案,一步一步迭代到最终,以及开发测试问题,担心用户情绪反弹比较大,分批次上线等等。


同时,做这个项目你得到了哪些启发和教训,后续如何去避免等,最后的结果和上线后数据可以帮助我们验证设计的正确与否。这些设计过程中的细节问题和决策,是帮助我们丰富故事很重要的因素。


undefined


掌握好了这个框架,生活中很多事情都可以运用这个框架去讲,比如你要去和别人分享【设计师如何做简历】就可以按照这个框架去讲:


1.开始(故事背景和简介)


很多设计师找工作比较难,作品集发出去无人问津,原因是什么?是找工作人太多,还是大环境不好,那么如何提升作品集呢,怎么才能更快的让你作品集脱颖而出。


2.冲突(问题)


通过查阅了几百份设计作品集,发现一些问题,比如:版式同质化,设计风格单一,文字太多,飞机稿太多,这些是影响作品集质量很大的问题,由于这些问题导致很多面试官看作品集时候看见类似基本都跳过了,所以才导致大家找工作难。


3.情节(解决问题的过程)


通过查看大公司的招聘信息,提取重要关键信息,比如设计趋势,数据研究,系统思考这些关键词出现的比较多,同时查看了全球顶级设计师和韩国设计师作品集,发现好的作品集都是简约的,排版舒服的,那针对这些,你决定从这几个问题去优化作品集:


版式上往苹果简约风格去靠。设计风格上贴近主流,优化作品使得作品手法丰富,同时针对飞机稿太多,优化线上案例,重新按照最新手法来做等。


4.高潮(设计策略)


花了一个月时间,去详细设计你的作品集,同时设计完成后对比之前作品发现明显的提升,同时设计的过程也掌握了一些设计趋势,再投递的时候发现获得面试的机会大于之前。


5.行动和结果


最后获得了一个大厂的offer,但是整个过程中是艰苦的,做作品集中间也遇见很多问题,比如没有人指导,不知道最新的趋势是什么,比较焦虑,针对这些现状当时自己是如何调整的。


运用这个框架简单的一个叙事,你会发现这样的体系化思考能让我们表达时候更上一层楼。


运用XYZ公式讲故事

 

undefined


当我们向别人介绍一个新产品时,无法切中要点,明确表达产品用户和概念,很多人会觉得「他们怎么听不懂,一定是他们理解有问题,不是我的问题」很不幸的是,问题就是在于我们的表达上,分享一个XYZ公式给大家。


undefined


分享给大家一个公式,掌握后,你就能轻松的给别人讲清楚:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受


这三个问题,与产品,开发的人都有关系,无论任何项目进展,团队都能想起这个产品愿景,从而让我们对产品轮廓更加清晰,同时这个公式的表达能让团队外的人听的懂。


举个例子


undefined


X:微信一款通讯工具,支持单人、多人参与,通过手机网络发送语音、图片、视频和文字;


Y:它的目标用户是使用手机的用户;


Z:这个产品希望链接用户生活方方面面,是一种新的生活方式。


undefined


X:支付宝一款支付工具,它融合了支付,生活服务,保险,理财公益的生活服务平台 ;


Y:它的目标用户是互联网用户;


Z:这个产品希望给人亲近、安全、可靠的感觉。


上述这个XYZ框架,能够很好帮助你表达一个产品功能和定位,希望在你下次晋升或者述职向别人介绍时,能够用上。


最后

 

undefined


回顾下今天所分享的知识点,如何很好的将你项目讲成故事的5个步骤:


1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)


如何向别人准确表达产品功能和愿景,XYZ公式:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何为券商类产品设计流畅、高效的自选股功能?

资深UI设计者

导语:“自选”作为金融类产品的基础功能,迭代至今已经非常成熟了。放眼望去,市面上主流金融产品的自选功能似乎都大同小异,但是体验下来会发现,细分领域下的设计侧重点却有所不同。


一、把握需求

如果我们将“自选”转化为熟悉的C端功能,它类似于“收藏夹”、“关注列表”的概念,是用户管理交易对象的重要阵地。除了常见的管理对象(交易概念中称作“标的”)、管理分组外,“自选”还会存在对数据和使用习惯的管理需求。

  • 站在业务视角:券商的核心优势在于“交易”,所以业务目标自然为“交易”服务。“自选”相当于一张快捷交易导航,我们提供的诸多功能都是在帮助用户快速、便捷的调整这张表,直到它达到“为我所用”的程度。
  • 站在用户视角:不同交易习惯的用户,对自选的操作频率有高有低,在保证效率的同时,还需要让每一类用户都能用的顺手。

二、竞品调研

1. A梯队:美港股券商,富途、长桥

  • 共同的设计侧重点:功能的组织符合用户心理模型,任务专一,功能精炼,不追求全面、追求使用效率。
  • 共同的弊端:“管理分组”的交互设计不够流畅。

富途“管理分组”采用的交互方案,初期学习成本是很高的,它虽然充分考虑了效率问题,却低估了用户理解上的困难。(截止本文发布前,富途最新版对现方案做了视觉样式上的更新,看来设计师也意识到了该方案目前存在着一些不够清晰的地方,期待后续交互上的迭代。)

长桥将分组的“新建、排序、删除、重命名”拆的很散,理解上不困难,操作起来较为繁琐。

2. B梯队:平台类产品,腾讯自选、东方财富

  • 共同的设计侧重点:相关功能尽可能的聚合在一起
  • 共同的弊端:当用户目前仅想完成一项任务时,产品每次都会同时提供多项任务,操作通常很难专注。用户不可避免的会多花些时间和好奇,来理解与本次操作任务无关的信息

3. C梯队:社区类产品,雪球

设计侧重点:管理标的、分组与数据、使用习惯的设置完全分开

一些细节问题:比如“管理本页股票”,在批量操作的场景下,底部栏却存在不能批量操作的选项

小结:对三类产品的竞品调研也验证了我们最初对需求目标的把握,为券商类产品设计“自选功能”,效率和流畅度是最关键的。设计目标明确了,接下来我们看看目前都存在哪些问题,以及对应的解法。

三、问题与解法

1. 当用户精准搜索一个标的,并将其添加至自选后,并不能在当前完成该标的的分组

如图所示,现在如果想完成上述任务,需要4步、且每次仅能将标的添加至1个组。优化后我们可以通过3步完成,且每次可以将标的同时添加至多个组。

(注:Snackbar虽然源于安卓原生的MD设计系统,在IOS并无此原生控件。但是随着二者在设计上日渐趋同,且控件的应用上也早已互通有无,所以Snackbar在IOS的使用,合理即可,不必纠结于平台差异。)

交互关键点:

  • 想提升操作效率,不仅局限于步数、路径的缩短,它还可能是场景的正确连结、重复操作的合并;
  • 使用Snackbar,本质上是给用户选择的余地。在操作a完成后的2-3秒决定是继续进行操作b,还是离开当前场景。

2. A功能和B功能在自选场景分别有两条触达路径,不过多路径的存在不但没有提升功能的使用体验,反而带来了不小的认知负担

关于“冗余路径”应该保留还是去除,一直以来都存在争议。讨论这个争议的前提是:冗余路径虽然不是最优路径,但是满足了特定场景下用户的特定操作习惯。

当“冗余”只是冗余、没有任何增益时,也要敢于做减法;因为同时还需要考虑一点:出发前的选择越多,用户的决策时间越长。

交互关键点:

在业务方提出为同一个功能再添加一条新的路径时,我们必须要弄清楚,这条新路径是为解决什么问题存在的。不解决问题的需求,大部分是对产品的无效堆砌。做好产品的“守门员”,给出专业的判断,是交互设计师的重要职责之一。

3. 关于“自选”的设置功能,这里会讨论到几个典型的“欲速则不达”的交互问题

1)对功能的整理和归类,是我们为用户留下的使用线索。如果推理时间过长,说明线索的指向性出了问题。

  • 问题:将“管理分组”归至“设置”,分类不清晰;“数据项”Tab中的设置项没有根据相关性进行分组;
  • 解法:在“设置”中去掉“分组” ;数据设置项根据相关性进行分组 (指标→显示→排序)。

2)如果层级 1 包含层级 1.x,那么层级 1.x 的操作不应放置在层级 1 的认知区域。

  • 问题:数据项Tab的“默认数据”放在顶部导航栏,功能层级不匹配;
  • 解法:功能层级调整至匹配。

3)如果用户设置了一些项目,无法在预期场景看到对应的效果,应提前给与说明。

  • 问题:完成数据项设置后,无法在竖屏看到全部生成效果;
  • 解法:在数据项设置页顶部进行生成效果的说明提示。

交互关键点:

注重“效率”是没错的,比如上述case中看似有“效率”的Tab结构。但是这里面隐藏着更多的“清晰”问题。如果一个功能设计的让用户用不明白,也就谈不上“效率”的提升。

4. 最后一个case我们看下互联网产品中最常被忽视的细节-文案

场景1:批量管理标的。

文案问题:按钮表意都是“删除”,带来的实际结果是不同的,存在歧义。

场景2:数据项设置。

文案问题:没有进行规范化处理,增加了选项的理解难度。

交互关键点:

很多时候,一套语义清晰、逻辑顺滑的文案,可以等价于某个功能优化的迭代周期。实际功能点不变,只是替换文案,就能让用户用的清爽明白。这样的“好买卖”,却一直被严重低估。

四、总结思考

遇到同质化较高的需求重构时,初期应扔掉“套路”思维,从用户视角、业务视角推导出主要设计思路。带着问题去分析竞品,推敲竞品在此类需求设计上的精细差异。不要对行业top给出的方案习惯性盲从,要经过思考和反复论证,推导出最适合自己所负责产品的交互方案。

当设计深入到细节,出现了可A可B的选择时,回头看看我们经过深思熟虑推导出来的设计目标。重新评估A/B方案是否符合目标、是否有助益于实现目标。没有太多“怎么设计都可以”的方案,从我们的选择中,也透露了决策的倾向。只是我们需要时刻确认这种“倾向”在整体逻辑中是自洽的。

每一份交互输出都应该是有观点的输出,即使最终我们的观点被业务方、协作方的诸多因素所淹没,仍要保持、增进自己提出观点的能力。那些常被用户生动提起的、打造出特色和性格的产品,都是由一个个鲜明观点铸造而成的。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理  作者:cony的小书包

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何建立一套设计系统

资深UI设计者

一、项目背景

1. 业务背景

  • 3名设计师协同负责APP的设计工作,设计侧介入时间晚,周期短,由于是v1.0版本,没有可以复用的设计组件,从0-1探索设计风格,定义视觉语言。

  • 前期每天依赖钉钉传输本地设计文件,设计语言不统一,效率低。协作工具不是很理想,后期待优化。


2. 设计背景

  • 当我们开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。

  • 直接复用其他产品的现有组件库并不能完美套用在自己的产品上,不能形成自己的产品调性,甚至有些组件不符合自身产品的使用场景。



二、设计规范的价值

1. 设计层面

  • 随着项目开始成熟,设计也需要一套统一的标准,提升设计质量以及设计的一致性。有了规范及标准,输出才能趋向于稳定,迭代才能有序的进行。

  • 沉淀设计资产,使得设计更加持续地输出价值,减少一次性设计,使设计师不要每天局限在元素样式设计中,而是可以站在更高的层面上来思考业务与体验。


2. 开发、测试层面

  • 与设计规范同步形成研发资产,避免重复造轮子,保证代码质量,降低维护和拓展的成本。

  • 测试避免重复的无意义走查。


3. 产品体验层面

  • 统一产品体验,映射品牌心智。

  • 规范的制定,能有序统一不同页面层级的信息架构,视觉表达。用户在产品终端内,各链路、各阵地的体验是一致的,看到的信息元素,也会有共性的传达。这些共性的元素,组成了品牌的内核,能够帮助用户建立心智。


4. 协作层面

  • 降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

  • 设计师无需再花精力思考定义新的元素样式,既能保证统一性,同时通过复用体系,设计师也可以更高的提升效率,释放一定执行的工作量,可以把更多的精力放在前置思考决策环节,帮助业务、用户提升价值。



三、设计规范的目标

1. 设计风格一致

不同设计师有不同的设计风格、设计手法,项目有多个设计师协作时会出现不同的设计语言,需要统一产出的设计样式。

用户在使用产品时可以感受到统一的设计语言,从而降低用户的理解成本。


2. 提高设计效率

通过组件库高效协同工作


3. 建立稳定迭代机制,完善设计流程

版本迭代时,按照设计规范统一设计语言,有不完善之处,和项目设计师讨论确定方案,补充规范文档。



四、如何搭建设计系统

1. 设计原则

对于设计系统而言,在开始的第一步首先要确定一个标准,一个指导原则,在遇到不确定的设计过程中,依靠设计原则来引导方向。   


  • 其他产品设计原则

  • 有赞:产品原则:产品定义、产品设计、产品研发、产品运营。设计原则:高效、友好、安全

  • TED:追求永恒,而不是追求潮流

  • Pinterest:清晰易懂、充满活力、牢不可破

  • Airbnb:统一、通用、风格化的、对话式的

  • 我们的APP:扁平、亲和、简约


2. 色彩规范

主色

  • 采用品牌色红色,色相根据产品调性有所调整

  • 主色色阶使用扩展色生成器生成,在开源网站上根据自己的需求调整参数,创建色彩体系。  

  • 在制作组件时,将颜色添加 主色、辅助色、中性色为一级分类,例如:01_主色;再添加二级分类,例如:01_主色/red ;三级分类根据颜色饱和度,用x%命名,例如01_主色/red/100%。

  • 命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。



辅助色

  • 我们不仅需要品牌色来传递品牌价值,我们还需要辅助色来组成我们产品体系的颜色搭配,实现不同功能点的视觉呈现。目前编程猫APP辅助色暂定为黑色。

  • 对于辅助色的选择,可以选取了同类色、互补色、对比色三种辅助色系。


  • 同类色:

  • 色环上相差15-30度的色彩,非常舒适,色彩过渡自然,温和,给予用户安心,信任的心理预期。并且于品牌色的色相冷暖性质一致,和谐统一。(将品牌色设置为最中间的点,就可以得到两个辅助色)如下图



  • 互补色:

  • 指在色相环上角度为180°的色彩,比如我们最常说到的3组互补色:红和绿、蓝和橙、黄和紫。如下图:



  • 对比色:

  • 没有互补色那么严格,指的是在色相环上角度在120° - 180°之间的色彩,并且理论上来说,互补色应该也是包含于对比色之内的。比如:粉色和绿色就是对比色。如下图:



  • 校正辅助色

  • 校正的原则一:色相差值不能超过15近似色的选取,保证色相不超过15,保持统一的视觉体验。

  • 校正的原则二:尽量保持感官明度一致

中性色

  • 中性色作为辅助色,也是调和颜色视觉的一种。它本身不带情感色彩,可中和其他任何颜色,自然界中没有纯黑或者纯白的颜色,所以将纯黑色降了纯度,使之符合感觉舒适程度。中性色也常用于字体的使用,并且以不透明度的形式落地。

  • 在中性色组件里,由于文字、背景色都属于中性色,分别定义了三大类的二级分类,分别BG、Black、Text


功能色

B端产品多用,此处不过多赘述。


3. 字体规范

字体的命名方式为序号_标题类型/字重/对齐方式/字号的层级结构,例如「01_主文字_标题_按钮文字_正文/加粗/Center/28px」;一级分类定义了五个大类:

  • 主要的文字:主文字、标题、按钮问题、正文;

  • 次要文字:副标题、辅助文字、弱标签字;

  • 禁用文字;

  • 标签文字:文本链接、功能文字;

  • 特殊字体。


4. 栅格系统

我们都知道多数栅格里的间距都采用8/6的倍数,有了8这个基数后其他都很容易定义,但是前期我们2位设计师在设计初期页面时,1个采用6倍栅格,1个采用了8倍栅格,导致设计稿不统一,浪费了时间修改调整

      

那具体应该是用6还是8呢?

  • Web端常见框架Bootstrap用8为基数,响应式布局更灵活

  • 减少出现奇像素偏移造成模糊

  • 开发更容易理解的数字8

  • 能被最多的屏幕尺寸整除适配



5. 图标设计

一级分类分为导航类、功能类、系统类三大类,二级分类根据场景和名称进行细分。前期二级分类用尺寸来进行分类,但是后期讨论用尺寸定义寻找某个图标不够便捷,如果找「返回」,设计师并不知道这个返回是多大尺寸的,寻找起来就比较费力,所以改成了按照场景分类。

 

根据图标形状,按照方形、圆形、横向、纵向输出图标绘制模版,便于用户感知到统一的图标风格,也便于设计师对图标进行绘制和调整。


6. 通用控件

根据原子理论的定义和命名方式,依次完成对其他通用控件的原子、分子和组织的定义,例如:按钮、列表、空状态等,整个过程都是通过 Symbol 的不断嵌套,最终实现组件库的创建。


Diolog 弹窗

  • 满足基本组件需求,跟随文案内容自动适配弹窗高度,按钮颜色可更换,文案字符样式可更换

  • 使用包含具体动作的动词,即使不看上下文也可以通过按钮判断,而不是使用【确定】、【取消】等宽泛的词汇。



Default 缺省页

给用户提供解决方案,而不是让用户自己寻找问题原因

List 列表

  • 符合前端-盒子模型

  • 盒模型是一种描述对象尺寸和间距的方法。它由 4 个组件组成:边框、边距、内边距和元素本身的尺寸。

  • 边框:围绕元素边缘的描边粗细。大多数设计工具不允许这影响整体间距和尺寸。

  • Padding:元素边界与其子元素边界之间的空间

  • 边距:元素边界与相邻对象之间的空间


在做每个模块时,不仅仅只是把默认的文本/元素制作出来,它的热区也要让开发可以理解,按照盒子模型的原理,比如在做List,「单项输入」文本的行高,整个单元格的高度需要用白底画出来,明确padding值;与其他元素/设备之间的边距(Margin)要也表示出来。



五、维护与管理

1. 存储地址

  • sketch cloud云端同步

  • 云端管理会有一些较大的优势。比如更新通知更方便、每次大家访问,都能下载到最新的规范,维护管理起来也会省事一些。


2. 更新同步

规范的改动性不要过于频繁,通常半年及1年左右的时间以上,进行一次较大迭代是比较合适的。每次更新以后,需要邮件或者其它形式,周知所有跟规范可能相关的人员。同步的信息主要有  :

规范本次修改范围及修改原因;

  1. 修改点罗列

  2. 优化后的版本号

  1. 最新的文件同步

  2. 推进变更计划




    蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

    截屏2021-05-13 上午11.41.03.png


    文章来源:站酷  作者:AmberU

    分享此文一切功德,皆悉回向给文章原作者及众读者.
    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何让用户更好的理解新产品

资深UI设计者

在做出一个新产品时,如果不能够有效地让用户感知到该产品所提供的价值,那么可能会让自己的判断有所偏颇。本文作者分享了如何让用户更好地理解新产品,我们一起来看看吧。


在做新产品过程中,我们会通过用户调研、市场研究等一系列的方法来维护自己产品的可行性。想要通过自己的努力证明产品是可以经受磨炼的,这都没错,但是我们会发现产品一面市,就会出现各种各样的问题。

这个时候你会怀疑自我的判断到底是否正确,还是决策上的失误,当然我们也可以把问题推到用户身上或者是市场的抛点行为。那么这些问题到底如何存在的?能否避免?

当构建新产品时,你需要帮助客户快速了解你的产品提供的价值。围绕客户的心智模型进行设计是关键。

但是你的产品是什么,它的作用是什么、针对的人群有哪些。对不同的人来说可能意味着非常不同的事情。

我们以modao为例。试想当我们听到它名称时候会感觉是一个什么样的产品?能帮助我们工作中的哪些问题呢?会不会有我想要的功能模块?

这些都是针对不同客户的。随着时间的推移,你的产品可以做什么,这些不同假设和观察会形成不同的心理模型。这些是客户看到新产品的镜头。

我今天要和你谈谈我经常思考的事情,任何正在构建产品的人都应该考虑的事情。

那就是用户如何理解新产品?当您构建新产品时,人们将如何理解它是什么、它做什么以及它将提供什么价值?

不久前,我遇到了一个案例,它非常清楚地说明了不同的人如何以截然不同的方式思考同一件事。那东西就是面包。该活动的工作原理是让人们拿一张纸和一支笔,画出制作面过的过程。

这看起来很简单,现在每个人都在构思面包的制作过程以及想要画出的东西:和面——揉面团——摆弄形状——添加食材——放入烤箱——成品(心里活动)。

如何让用户更好的理解新产品

但这只是一个人对如何制作面包的心理过程。事实上,如果你要求很多人这样做,你会得到人们如何制作面包的多种版本。

对于某些人来说,这完全取决于个人的心里活动。有的人会更多地考虑烤面包机的机械原理。所有的部分是什么?其他人会考虑整个供应链,从进入面包的谷物开始。

如何让用户更好的理解新产品

如何让用户更好的理解新产品

一、不同的思维方式决定着不同的面包模型

这些是不同人的心理模型的插图,一个人如何相信某事是有效的。由于人们有不同的经历,做出不同的假设和观察,他们可以形成不同的心理模型。

现在,如果我们看看面包的实际制作方法,有六个主要部分。有两个主要对象,面和烤箱。然后你就有了热量和时间应用于它们。

当你将这些组合在一起时,你将获得使用烤箱制作面包的系统模型。你只需将弄好的面包模型放入烤箱,打开它,加热面包,等待一段时间,面包就可以吃了。这就是我们所说的系统模型。这就是实际工作的方式。

当你构建软件时,这通常会向人们展示并通过界面交付给他们。当你拥有人们相信某事如何运作的心智模型,以及它实际运作的系统模型时,当这两者相交时就会变得有趣。

当他们见面并有意义时,人们会发现界面很直观。当事情不匹配并且存在断开连接时,人们会发现它很难使用。

如果人们用许多不同的方式来解释如何做面包,那么解释一些新的东西可能真的很难。

人们通过将它们映射到现有类别来理解他们所看到的事物。当他们无法将某些东西映射到他们已经知道的东西时,他们会发现它很混乱。

以醒图为例,人们以非常不同的方式看待它。有些人认为它是一个摄影应用程序,其他人认为它是关于增强现实和应用滤镜的。

有些人将其视为一种游戏,而另一些人则认为它只是社交分享。

但是,如果您以前没有使用过醒图,那么您可能会对它有一个非常不同的心智模型。你实际上可能会感到困惑。也许这只是美少女使用的东西。

这就是为什么第一次使用新的东西,当它没有映射到你已经知道的东西时,会真的很混乱。

既然你了解了它们是什么,那么你如何真正开始了解客户的心智模型?

这真的很难。你如何提取他们对某事如何运作的信念并使其对自己有用?你需要做的第一件事是与您的用户交谈。就像面包的例子,你想让人们画出使用你的产品的系统。

他们怎么相信它有效?当他们没有列出您构建的所有功能并专注于对他们真正重要的事情时,你可能会感到惊讶。

就像制作面包一样,你将获得大量不同的图纸,然后你需要将它们综合起来并找出共性。

让人们向你解释这些图纸,告诉你他们认为它是如何工作的。听听他们使用的词语。如果我们考虑面包的例子,你可能会得出两种不同的心理模型,人们看待制作面包的两种基本方式。

一方面,有些人会用烤面包机来做,而另一些人会用烤架来做。它们只是两种不同的方法。

如果你是一家生产烤面包机的公司,并且拥有一台具有许多不同功能的全新烤面包机,想象一下你试图将其出售给考虑在烤架上烤面包的人;这没有意义。

它不会真正引起他们的共鸣。那是因为在他们使用某物的方式,他们相信它如何工作以及您的产品如何工作之间的心理模型之间存在差距。

你需要通过两种主要方式弥合这一差距。首先,您可以尝试让您的产品反映他们对产品运作方式的看法。

您可以做的另一件事是教育您的客户,向他们传授新知识并帮助他们创建新的心智模型。

二、如何教育用户使用你的产品

让我们谈谈如何教育你的客户。当出现人们不知道且无法解释的新事物时,你需要告诉他们它是什么,并且需要有人向他们展示和解释。

简单的东西可能真的很好,如果你能马上理解一些东西,那真的很强大。

但是很多事情并不是这样运作的,他们也没有必要这样做。你有一些例子,比如非常简单的超级马里奥,一直到最后迎接公主。这并不意味着上下左右的操作和游戏模式一样简单。也不应该。

但是让它易于学习,这样你就可以教人们如何使用它在软件中真的很强大。那你怎么能做到呢?

最简单的方法是使用教程和指南。就像在电子游戏中一样,当你开始并通过第一级工作时,你就开始探索和学习世界。

你想对你的客户做同样的事情,并教他们什么是东西。解释什么是新概念,新术语。进行演练并与你的客户交谈。

你可以做的另一件事是帮助你的产品与他们的心智模型紧密贴合。有几种方法可以做到这一点。

1. 内容层面

在界面层面,你可以一直使用标准模式。Web 或 iOS 或 Android 的模式已经过尝试和测试,人们已经通过使用其他地方的接口来学习这些。

如果某物看起来像一个按钮,它应该像一个按钮。如果它看起来像一个文本框,它应该像一个文本框。花时间在这些界面上虽然新颖而有创意但实际上会使客户感到困惑。

他们花时间学习如何使用模式或界面,而他们应该花时间了解你的产品是什么及其提供的价值。

2. 内容级别

接下来真正强大的是内容级别。大多数时候,人们不会花很多时间考虑他们在产品中使用的内容和语言。但它可以非常强大。

当人们解释他们认为您的产品如何工作时,您想听听他们使用的名词和动词。名词是他们认为在您的系统中的对象。这是他们为他们使用的语言。

动词是他们认为连接在一起的方式。因此,如果他们说,“发送消息”,那么这就是你想要与他们产生共鸣的语言。所有这些都意味着当你第一次打开它们时,你知道会发生什么。

你可以使用的最后一件事是隐喻。这些对于连接人们现有的心智模型非常有效,因为你正在捎带他们已经学到的东西。通过这样做,你可以帮助他们快速理解某些内容。他们越早了解某物是什么,他们就能越早从中获得价值。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


用困难分解法解决特殊场景的交互难题

资深UI设计者

在B端产品中,经常会出现层级深或者数据量过大而导致正常控件出现体验问题,那在这方面的交互时,可以引入什么样的新思路呢?

量变引起质变的交互难题


作为唯物辩证法的基本规律之一,“量变引起质变”适用于很多事物的发展规律,而我最近在交互设计中,也发现了很多类似的问题。例如一些常见的控件或者交互方式,在数据量庞大或者层级过多的特殊场景下,就变成了一种“蹂躏用户”的存在。所以在一些特殊业务场景的B端产品中,当“Corner Case”变成一种常态,常见的控件就会开始因为“量变”而引发“质变”,一下子成为用户的困扰。













看了以上两个案例,我们会发现,常规的控件和常用的交互方式在这些“难搞”的场景下,都不再好用了。那我们是否能另辟蹊径,利用一些其它的交互思维,来解决这些棘手的交互难题呢?


困难拆解法


其实一提到“棘手”,“困难”,大家可能多多少少,在网上听过这样的“鸡汤”:“别畏惧困难,困难是可以拆解的,当把一个困难拆解成一个一个小目标去完成时,我们离总目标就会越来越近了。”

这就是我今天想聊的——“困难拆解法”。说到困难拆解法,无论是网上火爆的各类成功学,还是一些成熟的项目管理理论(例如经典的Work Breakdown Structure)都对此有详细的、深层次的研究和实践。我们通常会把这个思维应用到复杂工作和项目的管理中去,但是我今天想做一个大胆的实验,把困难拆解法应用到交互设计中来,看看利用困难拆解法,能否解决我们上面提到的因为特殊业务场景而严重影响交互体验的问题。



既然要做困难拆解,我们总不能随意去拆解,总得有一些拆解的原则和方法论,以支撑行为的正确性。“成功学”中肯定很难找到详细的方法论,那就参考一下Work Breakdown Structure中的拆解原则,来看一看是否可以应用于交互设计的场景。

先一起来看下WBS中定义的分解原则:

  1. 将主体目标逐步细化分解,最底层的日常活动可直接分派到个人完成;

  2. 每个任务原则上要求分解到不能再细分为止;

  3. 日常活动要对应到人、时间和资金投入;

  4. 整体拆解的任务,最终可以支撑总任务的完成。

如果我们从中提取一下关键意义,就是:

  1. 大目标拆解成小目标;

  2. 拆分到最小颗粒度;

  3. 每个小目标需要有对应成本的衡量;

  4. 最终完成总目标。


最后,可以将原则的关键意义与交互设计做一个对应:

  1. 将一个场景内的大的任务目标,逐步分解成一个个小的交互行为

  2. 每个交互行为要尽可能的简单直接,只针对一个交互目的的达成;

  3. 拆解的每一个小目标都要有对应的交互成本的计算;

  4. 整体拆解出的小的交互行为,最终可以支撑总任务目标的完成。


分析到这里,我们大概总结出了一些拆解的原则,但是仔细看这四条原则,大家会发现,目前还少了一个概念的输入:那就是交互成本。如果没有交互成本的计量,那就没办法真正衡量出我们最后通过拆解制定出的方案,是否真正节省了用户的交互成本,提升了任务效率。

所以,在开始拆解之前,还需要先一起了解下交互成本。


交互成本


什么是交互成本呢?尼尔森·诺曼(Nielsen Norman)将“交互成本”定义为用户为实现其目标而必须付出的身心努力的总和大多数初级设计人员都有这样的误解,即交互成本等于用户完成任务所需的点击次数。但是,它远不止于此。《Interaction design is more than just user flows and clicks》(作者Richard Yang)一文中讲到:交互成本可以分为物理交互成本(PIC)和心理交互成本(MIC)。


1. 心理交互成本(MIC)

  • 心理交互成本(MIC)的两个最重要的组成部分是注意力记忆力。当一项任务需要过多的注意力或记忆才能完成时,它将具有较高的心理交互成本(MIC),从而降低了可用性。

  • 对于不同类型的记忆都有广泛的分类。最短的记忆类型称为工作记忆,通常在任务过程中仅持续几秒钟。换句话说,当我们参与其他认知过程时,我们的工作记忆负责我们可以掌握的信息。米勒定律指出,普通人一次只能在他们的工作记忆中保留5-11件物品。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。所以,任务不应要求用户随时在其工作记忆中保留七个以上的项目。在极少数情况下,如若必须要求用户在其记忆中保存11个以上的项目,请使用“区块”减轻其精神负担。“区块”指将信息分组。

  • 与注意力和记忆有关的另一个考虑因素是“希克定律”。此条定律指出,“做出决定所需的时间会随着选择的数量和复杂性而增加”。




2. 物理交互成本(PIC)

  • 常见的物理交互成本(PIC)因素包括到达距离和目标宽度,用户输入的数量以及完成任务所需的操作等。

  • 费茨定律指出,点击目标的时间(例如,单击按钮)是距输入设备的距离和目标的击中框宽度的函数。例如,如果鼠标光标很远且按钮很小,则单击桌面上的按钮将花费更长的时间。

  • 评估物理交互成本(PIC)的最佳方法是“任务分析”和检查可用性指标,例如“任务时间”。





3. 交互路径和动机
在某些情况下,用户可能采取多种路径来实现其目标。用户根据“预期效用”的概念来决定采用哪种路径。

  • 用户权衡每个操作的收益和成本,然后选择收益与成本之间最佳平衡的路径。用户趋向于选择自己预期中交互成本更低的那条路径。如果操作路径不直观或不熟悉,即使物理操作成本很低,但由于心理交互成本(MIC)较高,他们最终也会选择他们更熟悉的路径。

  • 具有较高动力(例如,由于品牌运营)的用户更有可能承担较高的互动成本以实现其目标。假如消费者是某品牌的忠粉,那即使这个网站的交互成本很高,那么用户可能仍有足够的动力去完成他们的任务。然而,如果用户购买常规产品时付款流程的交互成本很高的话,那么他们很可能去其它网站购买。


从以上具体理论的阐述中我们可以看出,在评估交互成本的时候,步骤数,点击次数以及操作路径长短这些我们日常最关注的几个维度,并不能完全评判交互行为的好坏。而注意力成本和记忆力成本,以及预期效用,往往也会成为决定一种交互行为成败的关键而对于上面提到的“困难场景”,也正是因为数据量过大和层级过深致使用户的注意力和记忆力成本阶梯式增加,从而导致常规组件体验感崩塌。
下图中,我具体整理了各个交互成本组成的因素,以及会导致的结果。

如何拆解?案例一


我们详细聊了困难拆解法的基本原则和交互成本的主要概念之后。接下来开始进入正题,我们通过困难拆解法和交互成本计算的逻辑,来解决上面提到的两个案例的问题。

首先,我们先拆解一个简单的案例。

拆解困难法的核心是将一个大的难以达成的目标拆成各个小目标,所以我们需要先确定这个案例的核心困难点。
第一步,分析问题:
这个方案的优点就在于:在物理交互成本上,省了一步点击,将信息直接po到定位的周围,根据格式塔的接近原则,用户可以很容易的寻找和查看相应定位对象的详情。但是这些优点只限于在定位对象少,展示的详情信息数据量小的场景内。一旦处于数据量庞大的场景下,就会产生大量的信息杂揉。定位与详情相互交织、覆盖,非常混乱。如果用户想在这种界面去寻找信息的话,将需要付出非常大的注意力成本,大大加长了用户选择信息的时间。心理交互成本的增加,对于用户的使用情绪,也会产生消极的影响。
所以,此案例的核心问题就是:移动端屏幕很小,在有限的展示范围内,无法容纳大量的数据,所以导致信息杂糅在一起,对用户使用造成了极大的干扰。

那怎么去解决这个核心问题呢?让我们开始进行第二步:拆解方案的主体。
通过分析可知,这个案例最小颗粒度的两个交互主体为:

  1. 在地图上找到关注区域的定位标记;

  2. 查看定位标记相对应的详情数据。

那么现在,根据上面提到的拆解原则,我们要将本来一步到位的交互行为,拆分成两个最小颗粒度的交互行为,然后分成两步来达成同样的任务目标。
第一步,在地图上只留下定位标记的显示,这样的目的主要在于让用户只专注于寻找相应区域的定位标记。在去掉了了大量数据信息之后,页面就一下会清爽许多;



而第二步就是将查看详细数据拆分成一个操作,即点击某一个定位标记时,详情数据通过弹出卡片,或者弹出弹窗的形式,去陈列详细数据。(如果详情数据少,就可以使用卡片的形式,这样不会打断当前操作;如果详情数据量很大,并且需要足够的拓展性以便后期增加详情,则可以使用弹窗的形式。)这么做则是为了让用户更专注于查看他所关注的详情信息。



阐述完解决方案,根据原则的3,4条,我们一起衡量下方案对交互体验和任务效率是否有提升。
首先从成本角度来衡量方案:

1.物理交互成本:

  • 多增加了一个点击步骤。

2.心理交互成本:

  • 去除了界面中大量杂糅的信息,让用户可以清晰、迅速地查看地图位置,并高效的寻找用户所关注的区域定位;

  • 让用户只专注于查看他所关注的定位信息,避免了其它大量信息的干扰。即使通过粗略的估算,也可以算出来,这多点击一下的交互时间,要比在大量信息中去检索信息的时间要小得多。


其次从任务目标角度来衡量方案:
1.达成了与原方案相同的目的,即可以寻找某个区域内的定位标记,并可以查看对应的详情。
2.解决了信息杂糅在一起,对用户使用造成极大干扰的交互难题。
所以,综合成本和目标来看结果,这“多一步”的代价,实际大大提高了用户的检索效率。


如何拆解?案例二


当然,上面这个例子过于简单,第一交互路径短,第二也属于比较常规的交互解决方案。那接下来,我们一起来分析一个稍微复杂点的案例,看一看,当“海量数据”再加上“深层级”时,我们用这种方式是否还能解决。

首先呢,还是老套路,先一起来确定一下我们要核心解决的问题:


首先总结这个案例的优点:可以将操作在一个页面内全部铺开,并且通过点击快速打开下级页面,然后在一个页面里对多层数据进行查看和操作。这种交互在数据较少的场景里,是没有问题的。
但是,在移动端场景中,因为屏幕大小有限,一直存在着数据展示条目十分局限的问题,而当层级过深甚至数据条目过多时,这种问题就会愈加愈烈。所以,如果生产环境中长期处于数据量非常庞大的状态,就会引出以下问题:


  1. 在一条完整的下拉控件中,只有第一层级的数量是恒定为1的,而二三四层的数据量都有可能为多个,尤其第四层的详情部分,数据条目会更多。所以在一个下拉控件中,假设每一层级都有数据的话,用户至少会看到4条信息。而如果二级信息大于两条的话,在全展开的情况下,就已经占据了一整屏的位置(场景三),从而导致用户在一屏下,至少要去看10-12行(数量随着层级4数据条目的变化有所增减)的信息。假设我们再划一屏,用户就至少需要阅读和记忆20-24行信息。前面的米勒定律也提到,普通人一次只能在他们的工作记忆中保留5-11条信息。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。用户在这个过程中面对海量数据,以及繁复的层级,会付出大量的注意力和记忆力成本,导致用户在使用产品的过程中,心理交互成本呈阶梯式增长。

  2. 当一个下拉控件二三四层的数据量过大时(图示场景二、三),除了会增加用户的注意力和记忆力成本,还会增加反复操作的频次以及用户的错误成本,一旦操作错误或者看错数据,重新找到这条数据的成本会变的很高。如果滑动一下的物理交互成本为1,那么在多次滑动的情况下,我们滑动的成本就会变为1*X,这个X变量会随着数据量的增大而成正比的不断增加。


根据希克定律我们可知:决策所需要花费的时间随着选择的数量和复杂性增加而增加。
所以改进方案的核心点就是:减少页面内的层级和数据量,降低用户选择的复杂性。
但是从业务上来说,肯定不能直接去减少数据的总量,所以我们必须从交互的角度,去制定出可以减少用户选择的方案。找到了要核心解决的问题,接下来我们就开始“拆解”。
那么从哪个角度开始拆解呢?目前的状态是:随着每个层级的不断铺开,用户查看的数据就会不断增加。那既然数据总量上我们无法动刀,那我们就从层级入手,把每个层级单独拆出来,根据拆分原则的最小颗粒度原则,给用户每一屏提供最少层级的选项,让用户专注于最少数据的筛选。具体怎么做呢?一起来看看下面的解决方案。


首先,我们先来拆分第一层级。第一层级是展开后面层级的前提,所以我将第一层级,设计成了一个顶部切换。点开切换后,会跳出弹窗,这个弹窗中会包含所有的第一层级的选项。随着弹窗中不同选项的切换,我们会立马回到列表页面,而页面下方的数据也会刷新为此一级选项下的所有数据。因为第一层级的数据量,相比其它层级,在常规情况下是最少的,所以面对更少的选择,用户便可更专注、更迅速、更便捷的锁定任务目标。



其次,我们将二层与三层,作为展开式的卡片,形成一个卡片式列表。(这里将二三层放在一个页面内,没有拆到最小颗粒度让其形成两个页面,主要是为了控制跳转次数。)列表中的数据只包含对应的第一层级内的数据,所以这个页面中展示的数据比起之前场景中的“大而全”,已经得到一个非常明显的过滤。下拉层级,也减少为两层,层级复杂度相比之前简单了许多。另一方面,每条二层的数据都形成了一个独立的卡片,这样在视觉上,会有一个明显的区分。无论是数据量上的选择复杂度,还是视觉上对于层级的区分度,都大幅度缩小了用户的辨别成本。


最后,因为第四层经常会囊括大量数据,我们将第四层单独提出来作为一个独立页面(或弹窗),通过点击第三层的条目进入。独立的页面第一可以大大提升用户对于场景的专注性,第二有利于数据的拓展性,即使再多的信息列入,也不会影响其它层级的展示效果。而如果这些详情信息还分为不同类别的话,我们甚至还可以加入TAB筛选,这样就可以更加快速的通过类别筛选过滤出用户想查看的信息。



老规矩,在阐述完方案后,我们依旧根据原则的3,4条,对方案进行各角度的衡量。


成本角度:

  • 物理交互成本:点击数有小幅度增加,而因为屏幕内数据量减少,下划数得到了锐减,另外跳转步骤增多。页面的数据量越大,增幅的物理交互成本越少。

  • 心理交互成本:用户在每一个页面所需要做出的信息筛选得到了大幅的减少,每一步足够直观。因为层级页面拆分,而导致的数据大量过滤可以帮助用户完成快速决策。而信息筛选节省出来的时间成本,大大高于因点击而增加的时间成本。低量心理成本的付出,也会提升用户的预期效用,从而使用户忽略一定程度的物理交互成本。

任务目标角度:
这个方案,把选择和查看多层数据条目,拆解成了多步操作,让用户在完成每一个层级内的查看和筛选中,去逐步完成对所有层级的查看和筛选。


拆解之后,每个层级页面中为用户减少了大量的选择和干扰,降低了用户选择的复杂性,帮助用户节省更多的选择任务时间。解决了用户在大量信息中去海选的痛点。
所以从结果来看,通过拆解,既完成了场景下的任务目标、解决了之前存在的交互难题,也节省了大量的心理交互成本,提高了用户的预期效用。


困难拆解等于绕圈子?




看到这里,也许有人会说,感觉所谓的“拆解”,都是在“绕圈子”。其实没错,我们以上的两个方案都多绕了一步。但是交互中本就没有最完美的方案,只有最适合场景的方案。如果可以解决核心的场景问题,对于低幅度的交互成本的增加是可以接受的。
另外,我们有时候在设计交互方案时,经常会过于计较物理交互成本,将“省一步”封为了交互设计的“金科玉律”,从而忽略心理交互成本和预期效用对用户体验的影响,结果导致用户对于产品的选择性和体验感一起降低。
所以当用户面对高额心理交互成本的困境时,不妨付出一些“提升物理交互成本”的代价,也许这多绕的一圈,或者多走的一步,反而会让用户更快的通往“罗马”。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:回去干活

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


在B端产品中,经常会出现层级深或者数据量过大而导致正常控件出现体验问题,那在这方面的交互时,可以引入什么样的新思路呢?

量变引起质变的交互难题


作为唯物辩证法的基本规律之一,“量变引起质变”适用于很多事物的发展规律,而我最近在交互设计中,也发现了很多类似的问题。例如一些常见的控件或者交互方式,在数据量庞大或者层级过多的特殊场景下,就变成了一种“蹂躏用户”的存在。所以在一些特殊业务场景的B端产品中,当“Corner Case”变成一种常态,常见的控件就会开始因为“量变”而引发“质变”,一下子成为用户的困扰。













看了以上两个案例,我们会发现,常规的控件和常用的交互方式在这些“难搞”的场景下,都不再好用了。那我们是否能另辟蹊径,利用一些其它的交互思维,来解决这些棘手的交互难题呢?


困难拆解法


其实一提到“棘手”,“困难”,大家可能多多少少,在网上听过这样的“鸡汤”:“别畏惧困难,困难是可以拆解的,当把一个困难拆解成一个一个小目标去完成时,我们离总目标就会越来越近了。”

这就是我今天想聊的——“困难拆解法”。说到困难拆解法,无论是网上火爆的各类成功学,还是一些成熟的项目管理理论(例如经典的Work Breakdown Structure)都对此有详细的、深层次的研究和实践。我们通常会把这个思维应用到复杂工作和项目的管理中去,但是我今天想做一个大胆的实验,把困难拆解法应用到交互设计中来,看看利用困难拆解法,能否解决我们上面提到的因为特殊业务场景而严重影响交互体验的问题。



既然要做困难拆解,我们总不能随意去拆解,总得有一些拆解的原则和方法论,以支撑行为的正确性。“成功学”中肯定很难找到详细的方法论,那就参考一下Work Breakdown Structure中的拆解原则,来看一看是否可以应用于交互设计的场景。

先一起来看下WBS中定义的分解原则:

  1. 将主体目标逐步细化分解,最底层的日常活动可直接分派到个人完成;

  2. 每个任务原则上要求分解到不能再细分为止;

  3. 日常活动要对应到人、时间和资金投入;

  4. 整体拆解的任务,最终可以支撑总任务的完成。

如果我们从中提取一下关键意义,就是:

  1. 大目标拆解成小目标;

  2. 拆分到最小颗粒度;

  3. 每个小目标需要有对应成本的衡量;

  4. 最终完成总目标。


最后,可以将原则的关键意义与交互设计做一个对应:

  1. 将一个场景内的大的任务目标,逐步分解成一个个小的交互行为

  2. 每个交互行为要尽可能的简单直接,只针对一个交互目的的达成;

  3. 拆解的每一个小目标都要有对应的交互成本的计算;

  4. 整体拆解出的小的交互行为,最终可以支撑总任务目标的完成。


分析到这里,我们大概总结出了一些拆解的原则,但是仔细看这四条原则,大家会发现,目前还少了一个概念的输入:那就是交互成本。如果没有交互成本的计量,那就没办法真正衡量出我们最后通过拆解制定出的方案,是否真正节省了用户的交互成本,提升了任务效率。

所以,在开始拆解之前,还需要先一起了解下交互成本。


交互成本


什么是交互成本呢?尼尔森·诺曼(Nielsen Norman)将“交互成本”定义为用户为实现其目标而必须付出的身心努力的总和大多数初级设计人员都有这样的误解,即交互成本等于用户完成任务所需的点击次数。但是,它远不止于此。《Interaction design is more than just user flows and clicks》(作者Richard Yang)一文中讲到:交互成本可以分为物理交互成本(PIC)和心理交互成本(MIC)。


1. 心理交互成本(MIC)

  • 心理交互成本(MIC)的两个最重要的组成部分是注意力记忆力。当一项任务需要过多的注意力或记忆才能完成时,它将具有较高的心理交互成本(MIC),从而降低了可用性。

  • 对于不同类型的记忆都有广泛的分类。最短的记忆类型称为工作记忆,通常在任务过程中仅持续几秒钟。换句话说,当我们参与其他认知过程时,我们的工作记忆负责我们可以掌握的信息。米勒定律指出,普通人一次只能在他们的工作记忆中保留5-11件物品。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。所以,任务不应要求用户随时在其工作记忆中保留七个以上的项目。在极少数情况下,如若必须要求用户在其记忆中保存11个以上的项目,请使用“区块”减轻其精神负担。“区块”指将信息分组。

  • 与注意力和记忆有关的另一个考虑因素是“希克定律”。此条定律指出,“做出决定所需的时间会随着选择的数量和复杂性而增加”。




2. 物理交互成本(PIC)

  • 常见的物理交互成本(PIC)因素包括到达距离和目标宽度,用户输入的数量以及完成任务所需的操作等。

  • 费茨定律指出,点击目标的时间(例如,单击按钮)是距输入设备的距离和目标的击中框宽度的函数。例如,如果鼠标光标很远且按钮很小,则单击桌面上的按钮将花费更长的时间。

  • 评估物理交互成本(PIC)的最佳方法是“任务分析”和检查可用性指标,例如“任务时间”。





3. 交互路径和动机
在某些情况下,用户可能采取多种路径来实现其目标。用户根据“预期效用”的概念来决定采用哪种路径。

  • 用户权衡每个操作的收益和成本,然后选择收益与成本之间最佳平衡的路径。用户趋向于选择自己预期中交互成本更低的那条路径。如果操作路径不直观或不熟悉,即使物理操作成本很低,但由于心理交互成本(MIC)较高,他们最终也会选择他们更熟悉的路径。

  • 具有较高动力(例如,由于品牌运营)的用户更有可能承担较高的互动成本以实现其目标。假如消费者是某品牌的忠粉,那即使这个网站的交互成本很高,那么用户可能仍有足够的动力去完成他们的任务。然而,如果用户购买常规产品时付款流程的交互成本很高的话,那么他们很可能去其它网站购买。


从以上具体理论的阐述中我们可以看出,在评估交互成本的时候,步骤数,点击次数以及操作路径长短这些我们日常最关注的几个维度,并不能完全评判交互行为的好坏。而注意力成本和记忆力成本,以及预期效用,往往也会成为决定一种交互行为成败的关键而对于上面提到的“困难场景”,也正是因为数据量过大和层级过深致使用户的注意力和记忆力成本阶梯式增加,从而导致常规组件体验感崩塌。
下图中,我具体整理了各个交互成本组成的因素,以及会导致的结果。

如何拆解?案例一


我们详细聊了困难拆解法的基本原则和交互成本的主要概念之后。接下来开始进入正题,我们通过困难拆解法和交互成本计算的逻辑,来解决上面提到的两个案例的问题。

首先,我们先拆解一个简单的案例。

拆解困难法的核心是将一个大的难以达成的目标拆成各个小目标,所以我们需要先确定这个案例的核心困难点。
第一步,分析问题:
这个方案的优点就在于:在物理交互成本上,省了一步点击,将信息直接po到定位的周围,根据格式塔的接近原则,用户可以很容易的寻找和查看相应定位对象的详情。但是这些优点只限于在定位对象少,展示的详情信息数据量小的场景内。一旦处于数据量庞大的场景下,就会产生大量的信息杂揉。定位与详情相互交织、覆盖,非常混乱。如果用户想在这种界面去寻找信息的话,将需要付出非常大的注意力成本,大大加长了用户选择信息的时间。心理交互成本的增加,对于用户的使用情绪,也会产生消极的影响。
所以,此案例的核心问题就是:移动端屏幕很小,在有限的展示范围内,无法容纳大量的数据,所以导致信息杂糅在一起,对用户使用造成了极大的干扰。

那怎么去解决这个核心问题呢?让我们开始进行第二步:拆解方案的主体。
通过分析可知,这个案例最小颗粒度的两个交互主体为:

  1. 在地图上找到关注区域的定位标记;

  2. 查看定位标记相对应的详情数据。

那么现在,根据上面提到的拆解原则,我们要将本来一步到位的交互行为,拆分成两个最小颗粒度的交互行为,然后分成两步来达成同样的任务目标。
第一步,在地图上只留下定位标记的显示,这样的目的主要在于让用户只专注于寻找相应区域的定位标记。在去掉了了大量数据信息之后,页面就一下会清爽许多;



而第二步就是将查看详细数据拆分成一个操作,即点击某一个定位标记时,详情数据通过弹出卡片,或者弹出弹窗的形式,去陈列详细数据。(如果详情数据少,就可以使用卡片的形式,这样不会打断当前操作;如果详情数据量很大,并且需要足够的拓展性以便后期增加详情,则可以使用弹窗的形式。)这么做则是为了让用户更专注于查看他所关注的详情信息。



阐述完解决方案,根据原则的3,4条,我们一起衡量下方案对交互体验和任务效率是否有提升。
首先从成本角度来衡量方案:

1.物理交互成本:

  • 多增加了一个点击步骤。

2.心理交互成本:

  • 去除了界面中大量杂糅的信息,让用户可以清晰、迅速地查看地图位置,并高效的寻找用户所关注的区域定位;

  • 让用户只专注于查看他所关注的定位信息,避免了其它大量信息的干扰。即使通过粗略的估算,也可以算出来,这多点击一下的交互时间,要比在大量信息中去检索信息的时间要小得多。


其次从任务目标角度来衡量方案:
1.达成了与原方案相同的目的,即可以寻找某个区域内的定位标记,并可以查看对应的详情。
2.解决了信息杂糅在一起,对用户使用造成极大干扰的交互难题。
所以,综合成本和目标来看结果,这“多一步”的代价,实际大大提高了用户的检索效率。


如何拆解?案例二


当然,上面这个例子过于简单,第一交互路径短,第二也属于比较常规的交互解决方案。那接下来,我们一起来分析一个稍微复杂点的案例,看一看,当“海量数据”再加上“深层级”时,我们用这种方式是否还能解决。

首先呢,还是老套路,先一起来确定一下我们要核心解决的问题:


首先总结这个案例的优点:可以将操作在一个页面内全部铺开,并且通过点击快速打开下级页面,然后在一个页面里对多层数据进行查看和操作。这种交互在数据较少的场景里,是没有问题的。
但是,在移动端场景中,因为屏幕大小有限,一直存在着数据展示条目十分局限的问题,而当层级过深甚至数据条目过多时,这种问题就会愈加愈烈。所以,如果生产环境中长期处于数据量非常庞大的状态,就会引出以下问题:


  1. 在一条完整的下拉控件中,只有第一层级的数量是恒定为1的,而二三四层的数据量都有可能为多个,尤其第四层的详情部分,数据条目会更多。所以在一个下拉控件中,假设每一层级都有数据的话,用户至少会看到4条信息。而如果二级信息大于两条的话,在全展开的情况下,就已经占据了一整屏的位置(场景三),从而导致用户在一屏下,至少要去看10-12行(数量随着层级4数据条目的变化有所增减)的信息。假设我们再划一屏,用户就至少需要阅读和记忆20-24行信息。前面的米勒定律也提到,普通人一次只能在他们的工作记忆中保留5-11条信息。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。用户在这个过程中面对海量数据,以及繁复的层级,会付出大量的注意力和记忆力成本,导致用户在使用产品的过程中,心理交互成本呈阶梯式增长。

  2. 当一个下拉控件二三四层的数据量过大时(图示场景二、三),除了会增加用户的注意力和记忆力成本,还会增加反复操作的频次以及用户的错误成本,一旦操作错误或者看错数据,重新找到这条数据的成本会变的很高。如果滑动一下的物理交互成本为1,那么在多次滑动的情况下,我们滑动的成本就会变为1*X,这个X变量会随着数据量的增大而成正比的不断增加。


根据希克定律我们可知:决策所需要花费的时间随着选择的数量和复杂性增加而增加。
所以改进方案的核心点就是:减少页面内的层级和数据量,降低用户选择的复杂性。
但是从业务上来说,肯定不能直接去减少数据的总量,所以我们必须从交互的角度,去制定出可以减少用户选择的方案。找到了要核心解决的问题,接下来我们就开始“拆解”。
那么从哪个角度开始拆解呢?目前的状态是:随着每个层级的不断铺开,用户查看的数据就会不断增加。那既然数据总量上我们无法动刀,那我们就从层级入手,把每个层级单独拆出来,根据拆分原则的最小颗粒度原则,给用户每一屏提供最少层级的选项,让用户专注于最少数据的筛选。具体怎么做呢?一起来看看下面的解决方案。


首先,我们先来拆分第一层级。第一层级是展开后面层级的前提,所以我将第一层级,设计成了一个顶部切换。点开切换后,会跳出弹窗,这个弹窗中会包含所有的第一层级的选项。随着弹窗中不同选项的切换,我们会立马回到列表页面,而页面下方的数据也会刷新为此一级选项下的所有数据。因为第一层级的数据量,相比其它层级,在常规情况下是最少的,所以面对更少的选择,用户便可更专注、更迅速、更便捷的锁定任务目标。



其次,我们将二层与三层,作为展开式的卡片,形成一个卡片式列表。(这里将二三层放在一个页面内,没有拆到最小颗粒度让其形成两个页面,主要是为了控制跳转次数。)列表中的数据只包含对应的第一层级内的数据,所以这个页面中展示的数据比起之前场景中的“大而全”,已经得到一个非常明显的过滤。下拉层级,也减少为两层,层级复杂度相比之前简单了许多。另一方面,每条二层的数据都形成了一个独立的卡片,这样在视觉上,会有一个明显的区分。无论是数据量上的选择复杂度,还是视觉上对于层级的区分度,都大幅度缩小了用户的辨别成本。


最后,因为第四层经常会囊括大量数据,我们将第四层单独提出来作为一个独立页面(或弹窗),通过点击第三层的条目进入。独立的页面第一可以大大提升用户对于场景的专注性,第二有利于数据的拓展性,即使再多的信息列入,也不会影响其它层级的展示效果。而如果这些详情信息还分为不同类别的话,我们甚至还可以加入TAB筛选,这样就可以更加快速的通过类别筛选过滤出用户想查看的信息。



老规矩,在阐述完方案后,我们依旧根据原则的3,4条,对方案进行各角度的衡量。


成本角度:

  • 物理交互成本:点击数有小幅度增加,而因为屏幕内数据量减少,下划数得到了锐减,另外跳转步骤增多。页面的数据量越大,增幅的物理交互成本越少。

  • 心理交互成本:用户在每一个页面所需要做出的信息筛选得到了大幅的减少,每一步足够直观。因为层级页面拆分,而导致的数据大量过滤可以帮助用户完成快速决策。而信息筛选节省出来的时间成本,大大高于因点击而增加的时间成本。低量心理成本的付出,也会提升用户的预期效用,从而使用户忽略一定程度的物理交互成本。

任务目标角度:
这个方案,把选择和查看多层数据条目,拆解成了多步操作,让用户在完成每一个层级内的查看和筛选中,去逐步完成对所有层级的查看和筛选。


拆解之后,每个层级页面中为用户减少了大量的选择和干扰,降低了用户选择的复杂性,帮助用户节省更多的选择任务时间。解决了用户在大量信息中去海选的痛点。
所以从结果来看,通过拆解,既完成了场景下的任务目标、解决了之前存在的交互难题,也节省了大量的心理交互成本,提高了用户的预期效用。


困难拆解等于绕圈子?




看到这里,也许有人会说,感觉所谓的“拆解”,都是在“绕圈子”。其实没错,我们以上的两个方案都多绕了一步。但是交互中本就没有最完美的方案,只有最适合场景的方案。如果可以解决核心的场景问题,对于低幅度的交互成本的增加是可以接受的。
另外,我们有时候在设计交互方案时,经常会过于计较物理交互成本,将“省一步”封为了交互设计的“金科玉律”,从而忽略心理交互成本和预期效用对用户体验的影响,结果导致用户对于产品的选择性和体验感一起降低。
所以当用户面对高额心理交互成本的困境时,不妨付出一些“提升物理交互成本”的代价,也许这多绕的一圈,或者多走的一步,反而会让用户更快的通往“罗马”。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:回去干活

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


设计的UI界面总感觉乱糟糟?从这7个问题里找原因!

资深UI设计者

翻译:Siyang  审校:ArialXu  |   UXRen翻译组 #376译文
原作者:Denislav Jeliazkov
原标题:《Is Your UI Messy? 7 Common Mistakes to Avoid》

 

当我们设计高品质产品时,任何微小的细节都是至关重要的。

很多人会争论好的用户体验和好的用户界面哪个更重要,而我则认为两者都非常重要。如果其中一个失败了,你就无法对用户产生影响。然而,很多时候用户并不会考虑用户体验是什么,而是基于外观来评价一款产品。

 

1. 忽视边界/糟糕的规划

Ignoring Scope/Bad Planning

那些含有lorem ipsum(模板里填充的默认文本)的产品和库存照片,你多久使用一次? 我想大家都从来没用过。如果你想提升你的技能,设计时请注入真实内容。网页会展示哪些真实的图片,真实的标题可能有多长字符?一旦你美丽的设计被真实的内容填满,它就会面目全非。

具体来说,在开始UI设计之前,你需要知道页面的每个部分将显示什么类型的内容。你还需要知道内容的最小和最大尺寸。这些转折点(turning point)被称为极限情况(edge case),因为它们决定了界面何时以及如何改变。

图片的选择

你还需要提前研究图片的使用限制。如果你的客户没有任何定制照片或不打算购买任何照片,那你就没必要使用来自Unsplash的漂亮但毫无意义的照片。

为什么毫无意义? 因为这些照片都是纯概念性的。用漂亮的东西是不够的。相反,你需要选择那些能够创造故事情节或具有深远意义的图像。

无论你做什么,不要使用那些毫无必要的照片。如今,人们被大量信息淹没。额外一点无用的视觉信息只会激怒他们。

 

理解重复模块

另一种极限情况与重复模块有关。例如,图像+文本、图标+文本、数字+文本…。你应该考虑两行文本和十行文本时这些模块会是什么样子,以及它们是否会一个接一个地出现。

对于描述性功能的小型文本模块,使用三列布局是一个很好的选择。然而,如果你的文本超过五行,并且不能使用省略号(…)来收起文本,你就必须想出另一种视觉解决方案。为什么?因为又窄又长的大段文本只适合原始的报纸阅读,而对网络阅读十分不友好。可能的解决方案包括这两种:水平滑动的轮播模式(Slides)和两列布局。。

提前为扩展性做规划

了解内容的极限情况有助于更有效地使用屏幕空间,并为界面的各个模块选择正确的界面处理方式。但是要记住,极限情况并不仅仅是你当前已经遇到的情况。优秀的设计师总是会主动思考客户将来扩展UI的可能性。

 

 

2. 没有区分操作行为的主次

No difference between primary and secondary actions

设计应用程序时,会涉及到很多需要用户完成的操作。强化主操作(primary actions)的视觉重要性非常重要。所有的导航都是通过按钮完成,所以你必须通过加粗和突出的方式让用户更容易识别主操作,次要操作(Secondary actions)则不要那么突出,但如果用户需要寻找它们,它们是可见的即可。

以下是区分主操作和次要操作的方法:

  • 在主按钮和次要按钮上采用不同的视重(visual weights),视重最强的按钮会得到更多的关注。
  • 因此,使用强烈的颜色、粗体文本和按钮大小来强化主按钮的视重,次级按钮正好相反。

 

3. 令人沮丧的出错状态

Frustrating error states

当你在设计用户界面时,不要忘记任何用户界面的核心目标:在用户和服务之间提供尽可能流畅的交互。界面不应存在疑惑、没有答案的问题,亦或是任何的不确定性。

设计师应该向用户提供产品状态的清晰反馈,特别是在产品处于出错状态时。因此,出错时的提醒应满足以下的几个简单规则:

  • 它们应该是可识别的和引人注目的。(例如,红色是表示错误的常见 UI 模式)
  • 它们应该清楚地解释发生了什么,以及用户可以如何修复。
  • 它们应该与上下文相关联。(显示错误提示的地方最好紧邻出错的UI元素)
  • 它们不应该是带刺激性的。(你的用户对这个错误还不够恼火吗?)

设计师还应该注意那些意外错误情况(如服务器错误、页面未找到)。任何错误都是用户使用流程上的障碍。这就是我们需要帮助用户处理它的原因,提供任何可能的解决方案,并试图消减糟糕的体验,尤其是那些非用户自身原因造成的错误。例如,对于404和500错误(页面未找到),一个可能的好方案是为这些页面设计插图或动画。

 

慎重对待表单校验

在设计错误状态时,尽你的最大努力不要惹恼用户。特别要注意那些所有可能发生的表单校验情况。

举例而言,假设你有一个包含必需字段的表单。这意味着开发人员有一个相应的校验:“所有的必填字段不能为空。”假设用户试图以随机的顺序填写表单,当第1个必填字段失去焦点状态时,它会弹出一个错误提示:“请填写此字段,该选项是必填项!”

看到这个反馈的可怜用户惊叫道:“等一下伙计,我只是在表单项之间切换,还没有点击‘提交’呢!”事情甚至可能变得更糟,例如,假设你有另一个校验设置:在所有必需字段全部填写前,“提交”按钮是禁用状态。

想想看吧!你那些可怜的用户什么也没做,就无法提交表单,但是你已经将好几个错误归咎于他。这肯定会激怒所有人,你最好避免这种情况的出现。

衡量成本与价值

不要听那些开发工程师忽悠:“按你想要的交互方式开发程序,这需要耗费大量精力”。请记住: 如果不能避免这个问题会让你付出代价,“失去用户”的巨大代价!即使它的开发成本很低,没有用户的产品一文不值。

 

4. 没有对齐

Poor alignment

好吧,我承认,我是个对齐狂魔。但这只是因为一旦你发现了对齐的魔力,你就会意识到它是让任何布局看起来漂亮和和谐的关键。

许多设计师认为使用栅格系统(grid)会限制你的创造力,在某种程度上,这的确是真的。然而,如果你是一名刚入行的UI设计师,我认为你十分有必要在打破这些规则之前,先学会它们。

适当的填充(padding)和间距(spacing)可以让你的版面保持整洁有序,同时也能让读者更容易地阅读和理解信息。

在逻辑块(logical blocks)周围应该设置相同尺寸的间距(例如,在顶部和底部,以及在左边和右边)。如果间距尺寸不一,你的页面看起来会很混乱,导致用户对不同部分投入不均等的注意力。

而填充太小则意味着用户无法将内容分解成更多的逻辑模块。为了防止逻辑模块混杂在一起,你需要把它们分开,并在它们之间插入一个大的间距。

维持视觉层级结构的一个简单方法,是遵循如下的简单规则:不同逻辑模块之间的填充尺寸应该大于每个模块内标题和文本之间的填充尺寸。例如,假设你有一个包含主标题、副标题和段落的超长文本,那么你需要:

  • 将标题的底部填充(padding-bottom)设置为40px,然后再在后面在插入文本段落。
  • 段落的底部填充(padding-bottom)设置为10px。
  • 如果段落后面有一个副标题,副标题的顶部填充(padding-top)设置为30px(也即,段落与副标题之间的间隔是30px),并将其底部填充(padding-bottom)设置为20px(也即,副标题与下一个段落之间的间隔是20px)。

这样的设计可以很好的强调重点。主标题是最大号的文本,周围有相对较大的空间,但仍与紧随其后的元素保持相近的距离。

 

5. 弱对比度

Low Contrast

设计产品和设计一座公共建筑(如图书馆、学校等)有些相似之处,产品需要很高的包容性,能满足不同人的需求,这也包括了盲人、色盲和弱视群体。

你可以问问达美乐披萨是否认同产品包容性的重要价值。达美乐的网站设计一点也不无障碍(accessible),他们被一位无法通过网站订购披萨的盲人告上法庭。请不要学达美乐,做设计一定要考虑无障碍。

我们作为设计师,往往关注如何做好看的设计,而忽视了多元化用户的交互需求。

作为一个成熟的设计师,我已经能够心平气和地对待那些限制我做出“完美设计”的条条框框了,这其中就包括ADA(美国残疾人士法案)的相关条例。

为了让文字和水平空间更协调,而把字号缩小到8px;或是仅仅为了美观而使用浅灰色,这些行为都忽视了弱视访客的使用需求。

为了在Dribbble集赞,设计时我们可以忽略无障碍,但是当我们在为真实的用户设计产品的时候,忽略无障碍显然不是个好主意。

按照网络端内容无障碍设计指南(WCAG)的要求,我们至少需要提供4.5:1的色彩对比度。这份指南还阐述了针对运动、听觉和认知障碍用户的视觉设计指导方针。

为确保符合这些规范要求,你可以下载Stark软件,它可以帮助检查你的设计是否满足了无障碍设计的要求。

使用留白

我的意思是,如果你把两个完全不同的元素紧挨着排列,用户无法搞清楚哪个元素是“主要”的,哪个是“次要的”。这就是为什么我们会说,强调对比不仅仅是将不同的视觉效果应用到各个元素上,也需要使用留白的艺术。有时候为了使元素形成对比,你需要用留白来分隔它们。

留白很重要,它使内容更便于用户阅读。当然,有时候留白也会使用不当,比如有太多的空白或者在一个小区域内塞进了太多的内容,这都不是正确使用留白的例子。许多充斥各种广告的网站也缺乏足够的留白。

 

确保文本和图像之间有足够的对比度

避免把低对比度的文本放置在图像上。文字和背景之间应该有足够的对比。为了使文本突出,可以在图像上放置一个提高对比度的滤镜。黑色很流行,但你也可以使用明亮的色彩,搭配使用。

另一种做法是从一开始就使用高对比度的图像。在这种情况下,你可以把文本放在照片或图像的深色区域。

 

6. 糟糕的图标设计

Poor Iconography

当你需要通过一个小符号来表达意思或简单说明一种含义时,图标非常有用。它们也是现代界面设计的基本组成部分,特别是在移动终端上。

在应用程序中,图标通常相当于按钮。看看Instagram,你只会看到图标和文字。

这就是选择正确的视觉图标来呼应元素含义如此重要的原因。听起来很简单,对吧?其实并不简单。找到正确图标的过程是非常痛苦的。

你需要用大家都能理解的、简单的、常见的图标来表达语义。其次,你还需要将这些图标与整体UI风格相匹配,最后,你需要以SVG格式把图标提供给开发人员。

或许你曾经搜索过免费图标,当你为所有元素找到对应的漂亮图标时,你会很兴奋。你想,它们是多么完美地吻合啊! 它们会被每个人理解!遗憾的是,你所选择的图标库给人的整体印象往往是凌乱的。如何才能避免这种凌乱呢?以下是一个简要策略:

  • 线宽(Line width)
    调整尺寸后,所有图标的线宽应该都是一样的。否则,用户会明显感受到线宽不等所带来的混乱。
  • 圆角半径(Corner radius)
    如果你的图标包含一些矩形形状,仔细核对你图标库中每个图标的圆角半径。如果它们尺寸不同,你最好把它们调成一样的。
  • (针对线型图标的)线段末端形状(Line cap shape)
    它可以是矩形的,也可以是圆形的。
  • (针对线型图标的)线段转角形状(Corners join shape)
    它可以是矩形的,也可以是圆形的。

确实,没那么细心的用户可能不会特别注意到线宽或圆角半径的不统一。尽管如此,设计给人的整体印象还是哪里怪怪的,用户能感觉得到。

换句话说,虽然使用免费图标并没有错,但最好还是不要用太多。使用免费图标会让产品看起来很廉价,甚至是不专业的。另外,还有很多免费的图标,人们很容易一下子认出来。为什么? 因为他们早就发现这些图标被到处滥用。

这也是我建议严格筛选免费图标的原因,当然,如果能自己设计图标就更好了。自定义图标总是为用户提供更优越的体验。

 

7. 未考虑多终端

Not thinking cross platform

是的,理想情况下,这在当下应该不再是一个问题。

我们都知道,大多数用户通过移动设备访问网络服务。不幸的是,许多设计师仍然会忘记这一事实。(我猜或许是因为客户不愿意花钱去做移动端设计的优化?)

然而,对于专业的设计师来说,不考虑多设备的兼容优化,这种情况不应该发生。在创建UI时,你应该始终牢记“手机端优先”的法则。

请关注一下不同的用户在每个页面上所看到的内容。然后,问自己:“为了展示某个特定的内容,我选用的UI控件是否合适?”

你可能选了一个很好的UI控件,它可以完美地在桌面设备上工作,但对于手机用户来说,它就并不是那么好用了。反之亦然。这就是为什么我们必须时刻牢记现今设计必须考虑多设备终端的原因。

 

糟糕的触摸区域

微小的点触目标会让用户感到沮丧,因为它们导致用户难以完成预期的操作。我们都经历过在智能手机上点错按钮,等待错误页面加载时的沮丧感!

所以,在设计可点击元素时,请记住用户的手指大小都是不同的:

  • 记住成年人食指的平均宽度是1.6-2cm,要设计适合手指点触的目标。
  • 保证你的点触目标至少有45-57px的宽度。这将给用户足够的空间击中目标,而不必担心准确性。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:UXRen  作者:Denislav Jeliazkov

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



竞品分析:新浪新闻 VS 今日头条

资深UI设计者

编辑导读:随着互联网的迅速发展,人们越来越倾向于移动端浏览新闻资讯。一方是四大门户之一,新闻资讯行业的“老人”,另一方也依靠着抖音的引流以及其众多的视频版权而爆火。本文将就着两个新闻资讯类APP进行多方面分析,一起来看吧!


一、产品概况

1.1 产品概述及版本

新浪新闻是新浪集团旗下的新闻资讯客户端,致力于利用大数据和人工智能技术,为用户提供更丰富、场景化和个性化的内容阅读体验。新浪新闻与微博打通了双平台的内容、数据和账号体系,为用户提供全网资讯、热点要闻、深度精选、精彩视频、高清图集等精彩内容。

新浪新闻始终服务于用户的高品质内容阅读需求,除了将新浪网各频道创作的优质内容和精编专题推送给用户,还与新华社、人民日报、中央广播电视总台等众多权威主流媒体合作,为用户提供高品质的新闻;此外,还邀请众多不同领域的头部自媒体创作者入驻,为用户提供更多优质的长尾内容。

截至2020年四季度,新浪新闻APP月活跃用户已保持连续20个季度的高速增长,月活跃用户规模达1.36亿,日活跃用户规模突破6850万;手机新浪网日均用户量达5774万,月均用户量超过1.76亿;新浪移动月度生态流量突破5.1亿,领跑全行业。

最新版本7.61.0

1.2 体验环境

  • 设备型号:iphoneX
  • 操作系统:ios14.6
  • 测试网络:电信4G

1.3 选择理由

笔者是新浪新闻的老用户,平时把新浪新闻app作为主要收看新闻的方式,作为自己产品生涯的第一份竞品分析报告,选择自己喜欢并且熟悉的app进行分析更加合适。

而且没有任何一款app是完美无缺的,在这个充斥着火药味的市场中,出色的竞品无时无刻不再盯着对手的一举一动,资源争夺战一触即发,新浪新闻如果想赶超对手,力压群雄还有很长的路要走,只有增强自身的优势,补足劣势才能赢得更广阔的市场。

二、竞品选择

2.1 选择目标

今日头条(当前版本8.2.6)

今日头条是北京字节跳动科技有限公司开发的一款基于数据挖掘的推荐引擎产品,为用户推荐信息、提供连接人与信息的服务的产品。由张一鸣于2012年3月创建,2012年8月发布第一个版本。

2.2 选择理由

今日头条基于个性化推荐引擎技术,根据每个用户的兴趣、位置等多个维度进行个性化推荐,推荐内容不仅包括狭义上的新闻,还包括音乐、电影、游戏、购物等资讯。是当今最热门的新闻手机客户端之一,并且通过抖音引流,有大量的新用户涌入,有很多值得学习和借鉴的地方。

2.2.1 市场分析

资讯市场概览:

  • 新资讯行业在疫情期高峰过后用户需求有所减退2020年3月至5月活跃用户规模逐月下降;但到了6月至7月,也许是受到“毕业季”的影响,行业活跃用户出现了小波幅的增长,7月份的MAU接近7亿。
  • 作为连接用户与信息的桥梁,内容对于新资讯平台来说是长久吸引并留住用户的核心要素;资讯内容已从最初单一的专业采编发展成百花齐盛的生产模式,现阶段内容生态正在逐步完善。
  • 目前资讯内容的建设已发展出自采自编、自建生态及内容聚合三种模式;自采自编模式可以保障内容质量内容聚合模式下的内容丰富度更高,而自建生态模式则结合了上述二者的优点。

2.2.2 市场趋势以及行业现状

2.2.2.1新闻资讯行业发展趋势

新闻资讯行业从2012年的PC门户时代,经过移动化、视频化发展,进入基于5G和物联网带来的智能新时代。资讯平台整体月活超6亿,覆盖近八成的移动网民。

由用户每月使用到的各类app统计图来看,新闻排在第6位,有效使用时长排在第4位,说明新闻类的app在人们日常生活中的使用较为频繁,部分用户有通过新闻类app了解资讯的习惯。

                                               数据来源:艾瑞数据

2.2.3 竞品市场规模

2.2.3.1 新资讯行业活跃用户规模

2020年3月开始,随着疫情的好转,新资讯行业整体呈现退潮效应活跃用户规模回落至相对正常水平;到了6月至7月,也许是受到“毕业季”的影响,用户对于高考、大学志愿填报、招聘等相关资讯内容需求增加,行业活跃用户出现了相对明显的增长,7月份的MAU接近7亿,环比Q2的4月份增长约1500万,但随后又有所回落。

2.2.3.2 用户活跃度

移动互联网市场已经全面进入存量时代,用户结构趋于稳定。新闻资讯领域MAU达6亿,今日头条、腾讯新闻、新浪新闻三强鼎立,逾七成的新用户流向这三家。

对比2020年和2021Q1新闻资讯市场MAU、同比变化情况,新浪新闻增长强劲,2020年同比增长60%,2021仍能保持行业里较高水平的增长,从行业第三居上,超过腾讯新闻,成为行业第二;搜狐新闻同比增长在行业里排名第一;看点快报、趣头条MAU连续下跌。

2.2.3.3 用户使用时长

2016-2019年,移动设备单月使用次数呈升高趋势,但使用时长有明显下降。2021Q1今日头条、新浪新闻、趣头条都超过40分钟,而排名较后的看点快报、网易新闻、腾讯新闻在20分钟以内;排名靠前的新浪新闻、排名较后的腾讯新闻、网易新闻的同比增长率较高,趣头条、搜狐新闻的用户使用时长缩短。

2.2.3.4 下载次数

2.2.3.5 平台渗透率

在主要新资讯平台中,百度APP的用户量级处于绝对领先地位,2020Q3渗透率达42.7%,较去年同比有2个百分点的增长。今日头条和新浪新闻等资讯平台在Q3均没有较大幅度的渗透率增长,甚至多数平台同比为负增长。

2.2.3.6 日均新增用户

2020Q2及Q3,百度APP平均每日新增用户数均为150万左右,属主要资讯平台中新增用户量级最大的平台,且在03较去年同期的新增用户多出40万,新浪新闻在03较去年同期新增用户为10.3万,而今日头条等新增用户量同比却有较大幅度的缩减。

三、竞品定位以及用户分析

3.1 产品定位

3.2 使用人群性别占比

新浪新闻:

今日头条:

数据来源:艾瑞数据

从上图可以看出,不管是今日头条还是新浪新闻,男性用户略多。

3.3 使用人群年龄占比

新浪新闻:

今日头条:

数据来源:艾瑞数据

由上图不难发现,在31岁以上的使用人群中,占比是随年龄增长而递减的,说明随年龄增长习惯使用手机来获取新闻资讯的人越来越少。两者人群年龄结构差异主要体现在35岁以下的使用人群当中,新浪新闻使用最多的用户群体在24岁以下,而今日头条使用最多的用户群体在25-30岁。新浪新闻使用群体结构更加年轻化,随着年龄的增长逐渐递减。今日头条在25岁以上的用户群体中则均比新浪新闻占比要多。可以看出,新浪新闻推送的内容以及使用方式可能更受年轻人的青睐。

3.4 使用区域占比

新浪新闻:

今日头条:


数据来源:艾瑞数据

分析建议:两者都有显著的特点,用户群多都集中在沿海或者经济较为发达的地区,说明经济条件较好的地区人们有更大的新闻热点资讯需求,更习惯使用新闻类的app,新浪新闻可以增强对内地市场的拓展,抢先占据市场。

3.5 用户主要使用场景时长

由于移动互联网的普及,用户方方面面都离不开互联网,同时,人们对移动新闻客户端的依赖性也逐渐上升,大概分析了下具体的使用场景有以下:

  • 使用场景一:某一白领在早上醒来的时候,会想尽早看到早上的头条新闻,就会打开手机用新闻客户端看新闻。
  • 使用场景二:这个白领在吃完中饭,午休的这段时间,拿出手机看一下有没有什么有趣娱乐的休闲新闻来打发时间。
  • 使用场景三:下班回家,乘地铁的时候,坐下来寻找看看自己感兴趣话题的新闻。

3.6 用户对资讯内容形式偏好

用户对于资讯内容的形式偏好发生改变,视频化趋势明显

近年来,用户对于图文形式的资讯内容偏好度有所减少,更多的注意力转移到短视频、长视频及直播上;其中,短视频凭借“简短有力”的特质,在整个内容产业迅速幕延,直播则具备全时性、即时性、互动性等特点,极大地丰富了用户获取资讯的体验,同时也为平台的商业变现提供了很大的机会;在未来,随着5G技术的发展,互联网直播的体验将会有很大的提升,届时资讯+直播的形式或会抢占用户更多的注意力

数据来源:极光数据

分析:内容载体越来越丰富,用户对于资讯短视频的偏好度明显提升,而刚起步不久的资讯直播形式则极具发展潜力。今日头条通过加大各类视频的发展力度也吸引了大批用户流入。但是新浪也没必要仿照今日头条的发展路线,在做好自身各项新闻资讯功能的同时,完善优化视频专栏。

四、产品结构

今日头条:

结构分析:

不难看到目前版本由四大板块组成(头条,西瓜视频,放映厅,我的),先来看一下首页板块,其实首页作为一款App的核心用户场景,结构简洁肯定是用户非常看重的因素,可以看到头条的首页其实很简单,就是由频道标签(包括)以及编辑、搜索组成,简洁但又能突出重点。紧接着西瓜视频板块的话跟首页类似,但分类的颗粒度要远大于首页相比之前的版本,今日头条取消了底部的微头条,更换成了播放长视频的放映厅。

前三部分的简洁化,使得头条将更多的功能堆放在了“我的”中,这也使得今日头条又有点娱乐视频类app的成分。虽然功能做多做复杂会使产品偏离最初的产品定位,但这些内容也不无显示着今日头条新的尝试与业务扩展方向,但作为用户的话,还是希望产品简单便捷易用,好在功能添加的地方并不明显,也能使用户较为容易的接受。

新浪新闻:

结构分析:

新浪新闻底部由首页,视频,发现,我的组成。和今日头条类似,首页看起来非常简洁,就是紧凑的各类新闻,紧接着是分类颗粒较大的视频页,与今日头条不同的是新浪新闻第三栏为发现栏,点开后首先显示的就是实时热点,也更加方便人们快速了解热度较高的新闻,并且发现页面的分类也更明确。发布动态选项在此页,底栏位置也和微信朋友圈位置一样,方便人们更快的习惯软件。而在我的选项栏则较为复杂,汇集较多功能在此,可执行的操作也更多。与今日头条相比,新浪更加注重新闻资讯相关内容,而今日头条则把一部分重点放在了各类视频上。

五、核心功能

5.1 产品更迭

新浪新闻:

  • 运营:高考上线专题报道、志愿宝典,疫情时上线大量查询工具,DAU猛增。在财经上,是其他平台资讯的来源。娱乐活动方面有优势,“微博之夜”是独家,上线明星打榜功能。
  • 功能:发现页中有精选功能、热门流、话题贴,新增小视频弹幕、热点、热评榜、声浪、听书、“钉”在桌面功能。热榜、快讯功能上线较早,明星打榜、爆款评论声浪是特色。

今日头条:

  • 从版本信息可以看出,头条早期在完善产品功能,促进用户关注大V和朋友,促进用户互动,增加dislike、帮上头条功能,优化推荐系统,2016年就支持视频直播聊天了,上线热搜、热榜。目前热榜有头条热榜、今日关注、本地热榜(疑似下线)。
  • 2020年上线疫情专区、放映厅,小说频道新增千本书籍。

5.2 功能差异

虽然资讯类产品的同质性较高,但通过功能分析可以看出:

  • 新浪新闻:新闻功能全面很全面,背靠微博资源,在娱乐方面有独特优势。
  • 今日头条:推荐流中有问答;底部tag有放映厅功能(资金雄厚才能买得起版权);西瓜视频(偏中长)和小视频的展示分开,内容丰富。

5.2.1 P/UGC

除用户评,新浪新闻虽然可以发布UGC内容,但几乎只在话题里曝光,更偏向PGC平台。

今日头条可以发布UGC内容,支持发布直播和问答 ,其他产品只支持图文、视频。头条还会将用户在抖音里发布的内容同步过来,偏向于PUGC平台。

5.2.2 特色频道

今日头条除了有丰富的视频资源外,未发现特色频道。新浪有微天下、【声浪】热评以及网罗各类明星新闻八卦的星浪圈。【声浪】热评功能会将用户热评显示到相应的资讯页面,加强用户与产品的互动,鼓励用户参与新闻资讯评论与探讨,增加用户黏度。

5.2.3 热榜

今日头条热榜包括事件详情、相关内容等,目前还没有做垂类热榜。新浪新闻很好地利用了微博的资源,在热榜上榜单更加丰富,分类更加细致明确。

5.2.4 放映厅

今日头条拥有有放映厅功能,拥有众多电影、电视剧、动漫等栏目的版权,并且免费、没有广告。这也是今日头条渗透率高的重要原因。

5.2.5 推送

推送是内容平台的重要业务,占据各公司相当比例的DAU。 oppo、vivo厂商操作系统对推送数量限额,且用户默认关闭系统通知权限,而华为、Apple等机型无限制所致。各个竞品的推送包括全量、个性化、地方推送等,作用都是提高用户活跃度。

今日头条、版权丰富,有独家内容,今日头条部分内容会在收到其他竞品push后很久收到,可能为机器推送。新浪新闻速度较快,而且文案质量更高。

数据来源:艾瑞数据

六、交互设计

以下笔者将站在交互和设计的角度,分析两者在各个功能和流程界面设计优劣,比如登陆页面、我的界面,搜索界面等。

6.1 加载页面

新浪:                                                                                    今日头条:

在加载页面两者都能体现各自的风格。对比来看,今日头条使用纯白色背景简洁舒适,红色字体的slogan方方正正,极具现代化。

而对于加载页面而言新浪新闻做的仿佛更加优秀(个人主观),使用白色和浅灰的山水画作为背景,“大浪逐新”中间黑色书法字体slogan显得潇洒飘逸且极为醒目。融入了中国文化元素,第一次就能给用户留下很深刻的印象。

6.2 登录页面

  • 可以明显看到今日头条的登录页面更加简洁,由于抖音app庞大的用户群体,将抖音一键登录选项设置为红色长按键放在正中央,十分醒目;而把手机登陆放在下端,微信、QQ登陆放在了隐藏栏;这也能看出来字节跳动对自身账号体系的信心,如此登录便无需其他多余操作,给用户流畅的体验感。
  • 新浪新闻则是将手机验证登陆放在首选,需要用户手动输入手机号码并且获取验证码登陆。其它选项则依次排列在下端。把“登录赚金币”的标语放在顶端来诱导用户登录。总体看来登录页面信息布局要比今日头条密度更大。

6.3 首页

新浪新闻:

  • 两者都是以红白作为主色调,将分类置于搜索栏下方并且可以在分类最右端编辑自己的频道。点击相应频道便是相关内容资讯,十分方便。文章与文章之间的间距适当,翻阅点击新闻方便,给人以效率简单的感觉。由之前的核心功能分析可知今日头条的发布功能更加全面,所以今日头条将其放在了搜索栏的右边。而新浪新闻较今日头条的明显优势便是其热榜功能,所以将其放在了比较显眼的位置,用户打开app便可以注意到搜索栏边上的热榜功能,而今日头条主页频道里的热榜则需要用户手动添加编辑。
  • 搜索界面来看,两者的历史记录包括清除搜索历史记录选项都置于搜索栏下端,这也符合用户使用搜索功能的习惯,但是今日头条在下方加入了无痕浏览模式的选项,对于不想保留搜索历史的用户可以直接在此处进行模式的选择,无需在切换别的页面去设置。布局方面今日头条十分简单,白色背景给人以清新爽朗的感觉,猜你想搜功能非常的显眼,会根据用户平时的搜索习惯显示相关内容,吸引用户点击浏览。并且热度较高的新闻话题会在边上有一个红色的“热”字标注,点击便可进入话题,和头条热榜;而新浪新闻把其有突出优势的热搜榜和其独特的热评榜放在了此处,占据了主要空间,用户在搜索的同时便能注意到实时热点资讯以及各种有趣的热评,吸引用户点击进入相关内容。
  • 新浪新闻在首页添加了收听功能,分为听书和听新闻。并且点击之后直接自动播放,免去了用户思考的时间。并且图片加上新闻标题的排版会提高用户的收听兴趣。这一功能也增加了用户了解新闻资讯的方式,无需通过手动操作便可以收听新闻,能让用户在忙于其他事情的同时也使用这一功能收听了解资讯。

建议:可以在收听功能中也加入热榜,使用户也能通过收听的方式了解各类热门事件。根据个人喜好推送相关内容,培养用户收听新闻资讯的习惯,增加用户黏性。

6.4 热榜

  • 新浪新闻热榜以深色为背景界面清新、沉浸感十足。而今日头条则是象征着“热”的红色,画面霸气简单,一片红色让用户产生极强视觉冲击效果,给用户留下很深刻的印象。
  • 因为其丰富的微博资源,从之前的结构图可以发现新浪新闻其实很多页面都能进入热榜,并且位置很醒目。因为其丰富的微博资源,热榜分类很多,并且在第一条热榜拥有配图,能更直观的了解最热资讯。拥有垂直类热榜,用户能够了解更多类别以及相关方向的热点。而今日头条则相对简单,只有头条热榜和本地热榜,供用户选择不多。

6.5 视频推荐页

新浪新闻的视频页整体布局为白和淡灰,看起来非常整洁,推荐栏下又进行了一系列分类来供用户选择,虽然种类更多,但是给人有点眼花缭乱的感觉,与上端分类略显重复;今日头条则是将红色为主色调的顶栏贯穿了首页,视频以及放映厅,使用户随时可以在当页进行搜索功能。

建议:新浪新闻的视频分类比较多,可以尝试增加根据用户观看视频偏好把顶端分类自动做排序的功能。

新浪新闻滑动到视频相应位置的时候视频会自动播放,但是没有声音,这种模式用户不用点开视频便可以了解到视频的开头内容,这样,部分视频便会吸引用户点击进入观看完整视频。二级页面有点类似抖音的播放模式,通过上下滑动来播放视频,这种模式的优点便是可以提高用户的观看兴趣,因为不知道下一个视频是什么,便会更想滑到下一个视频去观看。而且除了对应的推荐视频,旁边还有热榜,可以以短视频的方式来了解热点资讯,并且热点视频下端会标记热度排名,用户体验感好。

今日头条的视频不会跳转二级页面播放,点击后滑到相应位置便会自动播放,这样的播放视频的方式免去了很多操作步骤,使用户操作起来更加简单便捷。

6.6 我的页面

布局方面今日头条从简洁清新的风格出发,包括图标、背景颜色、功能布局等等都是给人小而精致的感觉。记而新浪新闻则以红色占据了顶端空间,与下面的白色背景形成视觉反差,两个颜色分割明显,给人一种突然断层的感觉,视觉效果不比今日头条好。

新浪下端加入了签到功能以及福利任务功能,可以提高用户使用应用的乐趣,促使用户每天使用今日头条,增加用户黏性。新浪新闻在常用功能里也分了三页,可以看出来功能明显多于今日头条。但同时也会导致页面排版较为凝重密集。

七、产品优劣势

基于以上的分析,将两款APP进行基于SWOT模型的一个整体的分析

八、总结

从SWOT模型中我们可以清楚的了解到两款APP之间的优势与不足,目前聚合信息流平台产品已进入下半场,进入存量用户时代,之后产品迭代应该会逐渐放缓,各个竞品会在每次热点事件发力,并加速布局其他赛道。

在我看来,产品的基础能力包括冷启动、推荐算法、内容从产出到展现链条、推送策略、广告可适应性、促进互动等等,今日头条擅长算法,冷启动准确率高,新浪的推送质量高,运营上反应迅速。

各大新闻媒体客户端在自身产品上,至少在核心功能都已经很完善了,不管是功能上还是用户体验上,而基于各自的定位,其用户群也各不相同,所以,这一点上,保持自身特色很重要。而现在目前限制新闻类资讯发展的阻碍,内容同质化很严重,所以继续增加优质内容,将大数据与优质算法结合的优点继续保持,才是重点。内容差异化极其重要,优秀创作者和IP资产将成为头部新资讯平台搭建内容生态壁垒的聚焦点。至于是谁能够脱颖而出最后稳坐行业龙头,现在还不好说。

而现在整个行业,用户正在朝着碎片化,移动化,垂直化发展,媒体外延不断扩展,小而精的媒体资讯也成为用户的需求,而随着硬件的发展,包括智能可穿戴设备的发展,用户接受信息的渠道进一步增加,新浪新闻能否针对这些变化做出正确的改变,也是对整个团队的考验

未来内容生态趋势:

 视频化

用户更加喜好视频化资讯内容,头部资讯平台持续加码,布局短视频、直播内容以吸引用户注意力,同时通过扶持、孵化内容创作者以及打造核心IP来筑建自身的内容生态壁垒5G、点云和可穿戴设备等技术的发展可能会从采编到分发形态给新闻行业带来革新,直播体验会有很大提升,资讯+直播会抢占用户更多注意力。

② 新热内容

热点是能吸引两个领域及以上用户的内容,目前新浪新闻在热榜上做得比其他竞品较为完善,新浪热榜也是2021Q1 MAU大涨26.9%的原因,未来今日头条或许将筹备个性化的兴趣热榜,更好满足用户对科技、财经、体育等垂直领域用户。

③ 深度内容

获取深度信息的用户,沉浸行为相对稳定,根据巨量引擎的今日头条人群洞察报告,这部分用户更喜欢娱乐、体育内容,平台使用频率相对低,但粘性和使用时长相对高。满足这些人的需求,可能对平台留存、品牌和调性的塑造有正面影响。

笔者对新浪新闻的几点完善优化建议:

  • 根据用户使用时段偏好,新浪平台更应重点提高使用高峰时段新闻的质量,并且增加高峰时段推送新闻的频率来吸引用户。不应在使用频率较低的时间段过于频繁的推送新闻,此时人们大多数忙于自己的事情,较少有空闲时间去浏览新闻,此时推送新闻可能导致用户关闭手机app通知权限。
  • 吸引更多优质媒体的入驻,让自媒体作家与自家平台签独家协议,可以推出类似今日头条“创作者计划”活动,大力鼓励创作,打造更多的新浪新闻独家内容,为了提供优质化内容做努力。
  • 加强新闻推送审核,根据App Store差评用户反馈,“标题党”“文章内容质量差”出现较为频繁,可以增加文章类似“踩”的差评功能,根据媒体发表的历史文章质量以及好评率决定推送媒体文章的先后顺序.

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档