首页

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

资深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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



移动端信息超载设计

资深UI设计者

日常设计中,常常在解决一些由于信息过多,而需要对用户浏览行为进行设计的问题,在这里我们将其定义为“页面信息超载设计”。

由于移动端页面尺寸较小的特性,常常无法像PC端那样在一个页面中展现出多信息多任务,因此在面对多级的信息架构设计时,最常规且传统的做法是将某一场景/任务下的信息,通过设计页面的跳转/或增加页面的长度来实现。


从适用场景角度,可将信息超载的设计类型分为「页面展示信息超载」「页面版块信息超载」,上节我们聚焦「页面展示信息超载」进行了展开,本文将对「页面版块信息超载」进行展开。



页面版块信息超载


在设计内容版块时,当遇到内容放不下的情况,主流的对应策略之一是先在当前版块展示一部分内容,剩余内容以“查看更多”的方式来隐藏,以保证用户当前良好的阅读体验。但考虑到不同业务以及交互层面的使用,不同情况下可以有不同的交互情况。

主要可分为「场景跳转」「场景刷新」、「场景滑动」和「场景组合」。



场景跳转


作为最常见最普遍的一种场景,承载的功能是二级页面的入口,用户通过点击进入二级页面查看更多。


优势:

通用性高,可以进行版块内容的全浏览,给用户最大选择权。


劣势:

跳转到二级页面进行选择,需要整页加载,用户对后续内容没有预期易引起压力;

选择完成需要返回到上级页面,增加用户路径。


适用性:

适合内容体量较大对用户重要性又较高的版块(用户对该版块内容有查看更多需求且频次较高)


案例展示:


交互细节:

入口的设计位置和样式需根据版块的用户浏览动线来决定的。常用的入口位置有「标题右侧」「标题icon」、「版块底部」。


基于福格行为模型的运用,激发用户的跳转行为需要考虑用户的动机、能力、触发


· 标题右侧


M:

多用于横向滑动展示的模块,一定程度上契合用户浏览动线的设计,具备一定的动机,也仍具备跳转本身带来的劣势——易对用户引发没有预期的压力。

A、T:

标题的右侧导致按钮设计的空间从一开始就是被限制,易由于不显眼、面积不大而导致的触发不足、能力受阻。


按钮的设计:

只要具备一定的合理性动机,可以通过体验上的设计提升用户的触发以及能力。

具体化引导文案让用户对后续内容有所预期(如下方案例:蛋卷基金、哔哩哔哩);通过线性或者面型的容器承载文字,让它看起来更易辨识和易点击(如下方案例:网易云音乐);加入主色让它更加醒目(如下方案例:蛋卷基金)。


· 标题icon


M:

几乎适用任何场景,但动机的产生单纯依靠标题以及内容的展示

A、T:

信息传达无学习成本,节省页面空间,但点击区域小;位于顶端,对于内容超过一屏的模块,用户需要上滑返回才能点击


· 板块底部


M:

底部的位置符合用户垂直向下的视觉动线,更容易被展示内容吸引而顺理成章的接受引导进入内页;

但仍具备上述提及跳转本身的劣势。

A、T:

由于底部可设计的空间较足,查看更多除了文字链接的设计以外,还可以有更多发挥空间,层级也能得到显著,进而提高触发条件和点击能力。


按钮设计:

竖向的展示设计,势必会导致占用更多的页面空间,因此在页面模块较多的情况下,仍应该注意不必因强调“查看更多”而占用过多的页面空间。



场景刷新


目的实现当前版块更多内容的即时更换


优势:

大幅降低了新页面跳转带来的弊端,用户不需要承受多链路所带来的短期记忆和整页的加载成本,也无需返回到原有的浏览页面中。虽然内容依旧是缺少预期的,但是在用户的接受范围内,还有一种抽盲盒的惊喜。


劣势:

通用性不强,内容被局限在一个版块中,无法实现内容的全览,而且随机性很强。


适用性:

更适用于类似“猜你喜欢”、“随便看看”的推荐类版块。


案例展示:


交互细节:

以上三个例子选用的按钮位置和“查看更多”常用的位置类似,但可以看到当刷新按钮结合具体化的引导文案进行设计时,更能使用户在一定预期内得到惊喜(如上方案例:网易云音乐)



场景滑动


自ios11中加入了卡片这个崭新的容器后,卡片独立可排列的特征就解锁了横向更多的空间。用户可以通过scroll左右滑动手势获取到更多的内容。


优势:

卡片滑动方式兼容性很强,可利用更少的页面空间展示更多的内容。


劣势:

滑动展示有限,一般需要配合跳转需求出现。


适用性:

更适用于类目的快捷展示,便于用户选择更感兴趣的内容;


案例展示:


交互细节:

多用于固定容器为单位的横向排列侧滑展示更多内容,通常板块底部会有页面指示器,或露出部分来提示用户滑动。而这种横向滑动场景常体现于「卡片式」「金刚区」


· 卡片式


布局上通过展示卡片的一部分,暗示用户可以通过侧滑看到更多。设计上常和跳转场景组合使用,除此之外,也可根据业务上的需要考虑上方案例中且慢app的交互形式,页面指示器结合侧滑无限加载展示用户评论,通过用户交互成本较低的方式,即解决了用户触发动机弱而导致跳转场景转换率不高的问题,也能达成业务上的需求。


· 金刚区


随着各大主流app承载的业务范围越来越广,首页金刚区的运用已经屡见不鲜,能快速展示所有业务,便于用户快速选择需要的内容。



场景组合

为了给用户提供更多的选择,也为了能承载更多的信息,常将刷新场景、滑动场景和跳转场景结合使用。


优势:

弥补了单一交互的不足,用户可以根据自己的选择进行操作。


劣势:

不同的交互类型的集合,用户有可能会优先选择交互成本更低的操作,因此跳转场景可能会被弱化。


适用性:

模块上线初期,可以进行埋点设计,通过数据对比更能知道更贴近用户的行为。


案例展示:


交互细节:


· 场景滑动+场景跳转


结合上文中提到的劣势,如跳转场景的入口设计太深,用户的触发能力就会不足,如上述案例的淘票票,若其没有在标题右侧设计查看全部文字链接,则当用户滑动查看了大量信息仍未感兴趣后,点击更多卡片进入内页的概率也会大大降低。此类情况也经常于金刚区的组合场景出现。


· 场景刷新+场景跳转


当将两类功能都平级的设计出现,可以通过埋点数据分析出此功能区用户的真实心理行为。




总结


移动端由于界面空间有限,具有「一个界面一个任务」的特点,因此当面临产品增加功能时,不能一味在界面中进行功能的堆积排列,而应该更强调于页面场景化的设计,同时页面中的每一个细节设计都应该做到恰到好处,减少用户思考是否需要使用的精力。


本文对移动端页面展示信息超载设计进行了总结分析,但不是唯一,也没有哪一种方案是“绝对的优质体验”,最终的落地设计还需要视场景而定。下篇将对页面板块信息超载设计进行总结分析~

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


UI设计师如何避免用户不满与困惑

资深UI设计者

我们的产品经常会给用户带来一些负面感受和使用困惑,降低并消除这些问题可以大大提升用户体验


案例1.用户操作时的困惑


相信大家在做设计的时候都遇到过这种情况,一个产品内有多个入口指向同一个界面,这是产品的投机取巧还是另有深意,很多人都对这样的设计有不同的看法。


这样的设计就好像是狡兔三窟,在产品中流量可以从不同的入口进来,到多个不同的出口,也可以从不同的入口进入同一个地方。



有人会觉得如果一个界面中有多个入口指向同一个界面会出现问题:


1.违反了效率、用户预期的原则,会认为页面空间有限,在同一个界面中有多个入口指向一个界面效率变低,而且用户知道后往往就会只从一个入口进入。


2.多个选择会让用户拉高转化的成本,用户在选择的时候会花更多的时间思考有什么区别。


我们来看一个例子,下面德邦app之前的一个版本,目前已经优化了。从截图中我们发现页面上方的查询和寄件都和底部标签单独出来的界面功能重复了,并且我的快件也直接可以展示在首页的下方,我的快件目前可以从首页顶部、首页下方和个人中心3个入口进入查看。



通过这个案例我们发现确实这些板块和功能重复度太高,并且没有区分出场景,这样的设计证实了以上的两个说法,降低用户使用效率和提高选择成本。而且从业务角度看也并没有目标的差别。


但是我们分析问题也要多角度去观察,多个入口进入同一个界面只有缺点没有优点吗?


显然不是,我们再来看几个案例


下方是一个商品评价的卡片,经过我小手的实际测试,发现无论点击这个卡片任何有内容的区域,都会跳转到全部评价的界面,那这样的设计逻辑是否会造成和上面的案例一样的问题呢?答案是,不会。



这里的设计逻辑并不是和沙面那里的场景那么单一,而是用户在面临不同需求场景的时候可以有选择。


不知道大家有没有发现一个问题,在上面德邦案例的时候,你会对两个入口有疑问,但是在评价卡片的时候并没有,这个卡片包含了4种不同的场景:

1.我想看看有哪些好评、哪些差评 

2.几个不同标签的用户都是怎么说 

3.下面用户的实拍到底是不是真实的 

4.还有没有更多类似真实用户的使用评价。


所以即便最终到了一个界面,对于用户来说也是从独立的出发点开始的,而再回过头看上面案例,你会发现,我就是要寄东西,这里有两个入口,怎么选。


而且,考拉这里其实还做了从不同内容点进去的一个区分。



再来看个案例,贝壳的地图找房,在首页中有两个入口,导航栏一个,分类中一个,这里出现重复会造成一开始说的问题吗?首先我们看到贝壳的业务很多,以至于在这个分类中居然还需要通过滚动指示器来展示剩余内容,大家也可以思考一下,在这个界面中,会不会出现两个地图找房不同的场景出发点呢?我个人觉得其实是可以商榷的,首先地图找房在房产app中是很核心高频的一个功能,他的属性是“工具”



所以我觉得他之所以在卡片中再放一个地图找房是3个原因


第一个是导航栏的找房肯定不能动,他是一个全局的入口,即使页面滚动也可以随时点击到,即便要撤一个,也肯定要撤下方卡片分类中的。


第二个是卡片分类中的图标入口是都具备工具属性的,那首页上面部分就分为了:搜索、业务分类、工具这三块。所以用户看到这些工具属性也会联想到通过地图去找房。而且这些多色彩的图标对于新进入的用户是比较吸引注意力的,所以很有可能用户看不到右上角的地图找房(可以参考古腾堡图表的原则)。


第三点是可能右上角的地图不太能清晰表达这个图标的具体功能,所以将“地图找房”四个字显示全。


但这些都有一些主观因素在里面,如果真的去掉卡片中的,我觉得可能影响也并不是很大。有小伙伴可能想说是为了分流,但是分流的目前主要是让流量流到他应该去的地方产生实际价值,除了以上的3个原因,好像确实有点重复了。


再来看一个例子,小鹿茶app。



首页的现在下单和底部菜单标签都是到同一个界面,那为什么要重复呢?这里其实考虑更多的他并不想让用户进来就直接去购买,为什么不直接购买呢?应该是想要建立自己的品牌人设、满足更多的消费场景和增值业务,比如给别人点奶茶、周边的杯子跟合作商品推销、最新的奶茶的推荐。


如果只有菜单,产品也会显得更工具化,很难突出自己的品牌,对业务增长没有太大的帮助。有同学要说,那这个界面只是产品的“一厢情愿”,我就只要点奶茶就可以了,多个入口只会给我带来困扰。所以他这里的设计逻辑是在用户打开app的时候首先定位的是菜单,而不是首页。


所以,到底多个入入口进入同一目标我们还是要看不同的场景和目标的。如果既没有业务目标做支撑,又没有用户场景的变化,那么这个重复的入口就是鸡肋的。


最后留一个小思考题:网易云音乐的“歌单”在首页上也重复了,大家知道这里为什么他要做成重复入口吗? 




案例2.用户使用中的不满


一个优秀的产品或者说一个合格的产品,能给用户带来愉悦的体验。何为体验,用大白话来说就是用的舒服、自然、高效率。


再有一个底线就是不要让用户产生由产品带来的负面情绪,例如产品出错了却不告知用户解决方法、用户出错了没有办法及时帮助纠正、高危操作没有二次确认等等,根据负面情绪的严重程度几乎就可以直接让部分用户流失。


很不幸的是我就遇到了这样的体验,当时正在给同学们布置一些作业练习,体验一些产品的优缺点并给出解决方法。我也下载了这款文玩类的App,体验了极速捡漏这个功能模块。


捡漏:在文玩圈的一句行话,意思就是用很便宜的价格买到很值钱的古玩,而卖家却不知情,是一种可遇不可求的行为,所以寓意就是比较难得、走好运了。


进入直播间,商家在卖力吆喝,页面底部有加一手的按钮,就是类似于拍卖,价高者得。于是我就抱着试一试的心态点了加一手按钮,因为我预期是产品会再次向我确认是否要加价,结果是居然加价成功了,发生了什么?最后竞拍结束也没有人继续加价了。




实际场景中用户可能误操作不小心点了按钮,这样的场景和情况是非常多的,即便不是误操作,给一个二次确认的对话框也可以避免这样的尴尬状况,因为用户就喜欢在产品中点来点去,然而你在这里就像埋了一颗地雷。


如果到这里就结束了,那其实我也感觉没必要去吐槽,问题在于当我拍下还没付款,直播间的商家就开始喊我的名字:xx大哥恭喜你拍到了我们的产品,可以去付款了。连续播报了几十遍,我尴尬的直接退出了后台,这种感觉就像是一群观众看着一个被骗的小白一样,当我过10分钟后打开系统提示商品流拍了,并且累积了违约积分。


???


到这里,可能会有人说,你自己拍了的又不付款,当然要惩罚你了。


于是我还是认真的去研究了一下,发现极速捡漏和竞拍并不是同样的规则。该产品和竞品其实都有竞拍板块,在竞拍板块都会有需要用户确认的操作,并在操作下方给出拍卖规则,显示出价即表示同意拍卖规则。




但是该产品极速捡漏的板块并没有这样的说明,既然没有提前展示这样的说明和约定,用户就不知道有这样的规则,我拿了竞品一对比,其实在直播带货的场景下,这个出价流程还是不同的,双方其实都没有给规则说明但竞品还是给了一个出价选择后再出价的步骤。



最后我甚至被商家拉黑了,不过还给我一个投诉商家的入口


我当时的想法:


1.如果因为误操作让用户付出这么大代价的话成本就太高了。让用户点击是否就等于用户同意?


2.请先告知我约定与协议的内容,单方面在我不知情的情况下对产品进行操作后,通知扣我违约积分,这样就有点“霸道”了。


3.平台对商家和消费者的权益是如何平衡的,文玩行业和互联网结合的难点在哪里。


3.线下文玩圈的一些不成文行规,导致新人入圈后产生的冲突。


于是我就想对此说说我的看法



1.交易是产品平台其中的一个功能属性


交易是产品平台其中的一个功能属性,需要优先满足产品对用户价值,其次再谈交易的合理性。在这个流程中,面对用户很有可能遇到的误操作行为以及需要让用户去下单支付成本,我们必须提前告知用户。在尼尔森可用性原则中我们也发现了,如果用户不小心操作失误,那么我们尽可能减少这些因为用户犯错带来的成本,同时在用户犯错之前就要明显告知用户,将风险控制、前置。


所以,你在注册的时候、登录的时候,产品一定会让你同意一份用户协议,告知你我们要保存你的数据和一些跟你相关的信息,如果你不同意,那就无法继续体验产品。


这是一种契约。


同理,如果你想让用户在这个产品中去参与拍卖,在进入这个板块之前或者用户点击按钮之后,也需要让用户明确这个操作带来的风险是什么,取得用户的同意。而不是直接让用户加价成功,导致用户不明所以的被扣违约积分、被商家拉黑,这就和你去泰国,在街头你朋友拍了一张你和一个抱着蜥蜴的人的照片,结果别人来问你收钱是一个道理。


对于正常线下拍卖的流程,举办方也会对参与拍卖的人员进行相关规则、流程的告知,并且将风险、问题都提前让客户进行协议确认。


所以,在产品中的交易,必须先满足用户与产品信息之间的对称关系,保持信息的透明和契约公正,规则、约束、条件是用户使用你产品的前提和体验反馈的衡量标准之一。



2.对于商家和产品的价值


商家希望有更多的流量来曝光商品,捡漏商品的低价可以快速吸引一大批用户,比如8块钱的一个木头核桃的雕刻挂件等,产品通过营造抢购、限时的氛围,吸引用户下单,并且降低用户参与的门槛。


那么,直接加价成功是一个好的降低门槛的策略吗?我觉得并不是,降低门槛并不意味着就是直接拍到,而是需要提高用户对产品的信任度,这个极速捡漏的模块的目标用户几乎都是小白用户,因为资深的玩家看不上、更不会买,有一定经验的玩家也看的出好坏,明白它的价值。所以面对这些没有了解过文玩产品的小白玩家来说,内心是谨慎的


可能有人会想,这几块钱、十几块钱的东西还需要考虑吗?当然在这个场景中,从众心理是很明显的,大家都觉得很便宜,但就是没人拍。这都几块钱捡漏了怎么都没人要,大部分人都觉得这么便宜东西肯定不咋样,运费是不是贵的离谱、有没有托在背后跟你抬价呢?大家都不拍我也观望。越多人围观,越难促成交易。


还有一种可能就是我卖不卖的出去东西,并不重要,重要的是有人来看了,这些边角料都是用来回馈直播间粉丝的,就是一个窗口,真正有利润的东西在橱窗里。所以这里的捡漏只是一个引流的噱头。


人总是对太轻易得到的东西不珍惜,更何况是几块钱的小玩意儿。所以针对直接拍下这个交互,个人认为是不妥的,无论是上面任何一种情况,都没有办法让降低门槛,甚至通过这种“小聪明”反而会让用户更加不信任产品和用户。


不信任产品是大。尤其是作为一家平台来说,虚假交易、以次充好、滥竽充数等等行为是致命的。



3.文玩的价值


我其实有玩过一段时间文玩,受我老丈人的影响,有一段时间喜欢玩手串、玉什么的。经常也会在某音去刷一些鉴宝类的视频,很有意思。


文玩它的价值在于品相、稀有度、盘玩程度、大众接受度、历史背景还有工艺等等。所以它并不是一个在每个人心中同等效用的商品,同样一块玉,他的种水一般,但是花纹很独特,买卖双方其实心理的价值预期会相差非常多,它就不像买电子产品一样价格那么透明容易计算。


有的人玩这些就是觉得命里该有它,它能给我带来财、运,帮我辟邪,看的是眼缘。而不是路边上一块无用的石头,可以随意拾取丢弃。那么换句话说,如果在用户下单的时候,我们利用一些情感化的文案,让用户喜欢上这款文玩,是不是也可以大概率的促进交易呢?



4.文玩圈的行规


我相信很多玩文玩的小伙伴都知道,在文玩圈有一些不成文的行规。也或许就是因为这些行规出现到了线上产品中。


1.还价意味着出价,出价意味着买下

在文玩圈,你不想买就不要还价。如果卖家同意了你的还价,那你就必须买。这代表着你个人的信誉和道德品质。


所以文玩圈和互联网的用户之前有许多的鸿沟需要一步一步建设桥梁,不能单纯的以线下圈子内的行规来要求刚接触这个圈子的互联网用户,这需要大家一起努力和营造起一个良好的文玩圈的文化和规则,而不是直接生搬硬套,提高这个门槛。


2.不要打听别人的成本

文玩没有实际的成本,可能别人花10块钱淘到的价值1万块的东西,也可能别人花了巨资看走了眼。所以你知道了成本对谁都没好处,别人也不会告诉你。


3.别人在交易的时候保持沉默

文玩在每个人心中的价值不同,所以货币价值也不同,当别人在询价还价的时候,不管怎样我们都不要去表明自己的看法和想法。


当然还有其他的规则就不一一叙述了,针对这3条,其实在互联网的产品中是会有冲突存在的。例如你买了某个文玩,你一拍下,别人就说这个根本不值这个价钱。还有你出价了但是又不想买了,这些原本在文玩圈子中不允许的规则,在互联网上去要求用户着实有点困难,因为互联网上的交易并不一定所见即所得,可能展示的是这样,收到货又是另一个东西。


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

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


文章来源:站酷   作者:应骏

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

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


如何搭建 B 端设计规范

资深UI设计者

在B端产品设计中,有效的设计规范有利于降低团队沟通成本,提高开发效率,并在一定程度上保证产品应用的一致性,最终推动产品设计的优化。本篇文章里,作者总结了从0开始搭建B端设计规范的注意事项与策略方法,一起来看一下。


前言

哈哈哈哈,最近事情太多了,已经快三个月没更新了,现在也忙的差不多了,咱们更新继续~~

今天给大家分享的是关于如何从零开始搭建 B 端设计规范

时间转眼即逝,掐指一算,我接触 B 端已有 4 年之久了,当年刚接触的时候,B 端的从业人员比例还是很少的。近两年 B 端越来越火热,无论从设计风格还是产品数量上,都有了很大的提升。

随着 B 端的产品越来越完善,要求设计师的专业性也要越来越强。设计规范作为基础中的基础,是大家都要熟练掌握的技能,我们不仅要会运用各种规范,还要会撰写适合产品的规范。

分享开始,敲黑板~~

一、设计规范的目标

在搭建设计系统之前,我们要想清楚设计规范的目标是什么?使用者是谁?

  • 目标:保持产品风格统一性提高设计输出效率减少无效沟通
  • 使用人群:UI交互前端测试。

如何搭建 B 端设计规范

二、设计原则

设计规范要符合基本的设计原则,否则你的规范会杂乱无章。这里我总结了 6 条原则供大家参考。

如何搭建 B 端设计规范

  1. Unity(统一性):页面风格、色彩、布局等要保持全局统一,不可为了某一功能的美观而去破坏整体性。
  2. Accessibility(易用性):易用是首要考虑的因素,能一步解决的事情绝不两步。
  3. Proximity(亲密性):如果信息的关联性强,则他们的距离就要相应的缩短,让他们看起来是一个视觉单元;反之,则距离要加大。要让用户对信息的区域划分一目了然。
  4. Alignment(对齐原则):在界面中,将元素进行对齐,即符合用户的认知,也可以引导视觉流向,让用户更加流畅地阅读信息。
  5. Contrast(对比原则):对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。
  6. Repetition(重复原则):相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

三、框架布局

这里一般采用栅格布局。说到栅格,有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍,如果之前不是很了解栅格的,拿个小本本记下来,要考~~

栅格布局能够适应各种屏幕尺寸及分辨率,确保整体布局的一致性。

栅格建议使用 1、2、3、4、6 切分布局,可以进行多种布局组合,并在整个设计中保持布局的结构的一致性。

如何搭建 B 端设计规范

页面中一般采用 24 列自适应网格,你可以使用它为各种屏幕尺寸创建灵活的布局。

如何搭建 B 端设计规范

边距 Margins、列 Columns、间隔 Gutters 分别是什么?

如何搭建 B 端设计规范

边距 Margins:边距是内容与左右边缘之间的空间。

控制台内容区的边距选用 8 的倍数为设定值,一般采用 16/24px 的居多。

如何搭建 B 端设计规范

需要注意的是:

  • 减去 margin 后,列在页面区域均分,保证每列的宽度是一致的;
  • 在区域有 margin 的情况下,划分列的区域不能包含 margin。

如何搭建 B 端设计规范

列 Columns:在电脑端列的数量是个常量(24列),每一列宽度的尺寸随屏幕大小进行自适应调整。

如何搭建 B 端设计规范

间隔 Gutters:间隔是列与列之间的空隙,控制台产品 gutter 使用固定值也要是 8 的倍数,一般采用 16/24px。

如何搭建 B 端设计规范

需要注意的是:

  • 布局的左右两边的分界线 gutter 可以为 0;
  • 必须保证 column 的宽度是一致的。

如何搭建 B 端设计规范

边距 Padding:padding 指一个元素的内容和其边界之间的空间,padding 最小值是 4px,然后其余均为 8px 的倍数,建议值为 8/16/24px。

如何搭建 B 端设计规范

内容区定宽:此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变,根据页面宽度改变 margin 的值。

如何搭建 B 端设计规范

四、设计风格

1. Color(颜色)

色彩内容主要包含基础色(如品牌色、黑色、白色)和功能色(如链接色、提醒色等)。图表配色为单独的配色体系。

在前期制定颜色规范的时候,精益求精的设定颜色,切忌颜色过多。

颜色的状态色尽量用原色进行转换,设置一个合理的变色公式,让所有颜色的状态色都根据这个公式进行转换。例:

  • Hover:H不变 S加10 B减5
  • Click:H不变 S加20 B减10
  • Disable:HSB均不变,不透明度 30%

在设计规范中,尽量把颜色的色值和 rgba 值都写出来(这里是强迫症患者要标的,因为有时候色值完全一样,但 rgba 数值略有不同,虽然效果一样,但是对于强迫症的你来说,舒服吗)。

状态色有 4 状态色:Normal、Hover、Click、Disable

在设定图表颜色的时候,要考虑不同的使用样式(柱状图、环形图、饼图等……),同时也要考虑它的延展性,比如你设定 12 个 chart 色值,在使用的时候按着顺序来使用,当超过 12 个后可以为同一个颜色。

2. Font(文字)

设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。

首先,要设置一个字体家族,保证产品界面的最优展示。

例如(仅作为展示,不是建议):font-family: “Chinese Quote”, -apple-system,BlinkMacSystemFont,“Segoe UI”,“PingFang SC”,“Hiragino Sans GB”,“Microsoft YaHei”,“Helvetica Neue”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”。

1)字号

现在主流的产品中,主体字为 12px / 14px 的居多,可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数,否则在一些显示器上会有对不齐像素的状况发生。

2)行高

行高常规的有两种规范:

  • 字号+8px;
  • 1.5倍 / 2倍 * 字号。

如何搭建 B 端设计规范

我喜欢用第一种,就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一,因为在算间距的时候,行高是要被算进去的。

3)字重

字重有很多,但是在真正的产品使用中,字重尽量不要太多种,2~3 种即可。

4)字体颜色

字体颜色数量建议在 3~4 个,不宜过多,但是每个层级之间区分要大一些。

文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。

测试对比度的网站:https://contrast-ratio.com

WCAG 2.0 中将颜色对比等级分为 3 种,A级、AA级、AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

  • A级:对比度 3:1,是普通观察者可接受的最低对比;
  • AA级:对比度 4.5:1,是普通视力损失的人可接受的最低对比度;
  • AAA级:对比度 7:1,是严重视力损失的人可接受的最低对比度。

3. icon(图标)

设定统一的图标使用规范,让视觉效果更和谐。

1)icon 大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。

同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。

单独 icon 使用的时候,尽量不要太小,最小值建议为 12px。

2)icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。

所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。

如何搭建 B 端设计规范

4. size(尺寸)

页面内布局间、模块间、模块内的各部件距离。

尺寸大部分规范中都用的是 8 的倍数,不用纠结,直接用就行。我这里有个公式:Sn = 8px * n,n为正整数。

特殊:最小支持4px。

如何搭建 B 端设计规范

五、交互

交互我分为两个方面:交互方式交互状态

1. 交互方式

交互方式指的是对某一个操作所进行的具体行为,比如刷新方式有下拉上滑按压点击等方式,这就是所谓的交互方式。交互方式有很多种,没有最优,只有最适合。

交互方式要保持产品的统一性,同类别的交互不可有不同的操作感受。同时交互方式要符合大众的认知习惯,可创新但不可违背潜意识。

随着时代的发展,交互方式也在不断的更新。比如最开始的手机是按键式的,随着大众对屏幕大小的需求不断提升,到了现在的全面屏手机,如果这个时候你再去做当年火爆的按键手机,那你就只能跟市场说拜拜。

总结交互方式的几个关键点:创新统一紧跟趋势

2. 交互状态

一个完整的产品生态是不会遗漏每一个交互状态的。

同样是做售票的软件,为什么高铁管家就比 12306 做的好呢?是因为高铁管家把很多交互状态友好地做了展现反馈,而不是冰冷的数据吞吐。

同类产品中,每个都有自己独特的交互状态,可能你一直用某个软件的原因只是有个功能的交互状态打动了你,从此你就深深爱上了它。

现在工作中,我们都在讲人效,拼命地去更新迭代,去研发新功能,开拓新产品,往往会忽略交互状态这个点,因为很多时候付出收获比是很低的,但是真正好的产品,这部分是不可或缺的。

交互真的太大了,单独写一篇文章都写不完,这篇我只能抛砖引玉,勾起你的思维,如果有任何要探讨的,欢迎来叨扰。

六、引导

引导分为 5 种:Newbie guide(新手引导)Steps guide(步骤引导)Help / Operation guide(帮助/操作引导)New function guide(新功能引导)Blank guide(空白页引导)

1. Newbie guide(新手引导)

新手引导是针对新用户的,首次进入产品的时候,我们要着重地把自己产品的亮点以及操作快速的介绍给新用户,让他用最短的时候上手我们的产品。

新手引导要言简意赅,并且如果非必要的话,尽量给用户一个可以直接关闭的按钮,让用户有选择权。我就非常讨厌有一些产品的新手引导,必须走完全部流程后才能关闭,恶心得不行。

如何搭建 B 端设计规范

2. Steps guide(步骤引导)

步骤引导一般用在有固定操作步骤的场景下,指引用户一步一步地完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。

如何搭建 B 端设计规范

3. Help/Operation guide(帮助/操作引导)

帮助/操作引导的展现方式是比较丰富多彩的,可以是提示语、辅助性文本、tooltips 等等,它的作用就是辅助用户去了解并且知道如何操作这个功能。

这个也是在产品中使用频率最高的,运用好它,可以让你的产品事半功倍。

4. New function guide(新功能引导)

它就是常用在新功能上线后,用户第一次登陆相关页面后做的一些引导,目的是为了告诉用户我们做了新东西,你快来试试吧。

如何搭建 B 端设计规范

5. Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。

比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。

如何搭建 B 端设计规范

七、组件

组件是设计系统里面最为庞大的东西。组件可以分为了 5 类:

  1. Navigation(导航);
  2. Data Entry(数据录入);
  3. Data Display(数据显示);
  4. Feedback(反馈);
  5. Other(其它)。

基本上这几类已经覆盖了多数的组件,下面我把我自己整理的这几类分别都包含哪些组件、以及组件的简单介绍给列出来,快来保存吧。

1. Navigation(导航)

  • Affix(固钉):将页面元素钉在可视范围。
  • Breadcrumb(面包屑):显示当前页面在系统层级结构中的位置,并能向上返回。
  • Menu(导航菜单):为页面和功能提供导航的菜单列表。
  • Pagination(分页):采用分页的形式分隔长列表,每次只加载一个页面。
  • Steps(步骤条):引导用户按照流程完成任务的导航条。

2. Data Entry(数据录入)

  • Checkbox(多选框):可选择多个。
  • Radio(单选框):只可选择一个。
  • Switch(开关):开关选择器。
  • Form(表单):具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
  • Input(输入框):通过鼠标或键盘输入内容,是最基础的表单域的包装。
  • Select(选择器):下拉选择器。
  • Skeleton(加载占位图):在需要等待加载内容的位置提供一个占位图。
  • Time selectors and sliders(日期时间选择过滤器):当用户需要输入一个时间或日期,可以点击标准输入框,弹出时间面板进行选择。
  • Transfer(穿梭框):双栏穿梭选择框。
  • Upload(上传):文件选择上传和拖拽上传控件。

3. Data Display(数据显示)

  • Badge(微标):图标右上角的圆形徽标数字。
  • Card(卡片):通用卡片容器。
  • Collapse(折叠面板):可以折叠/展开的内容区域。
  • Popover(气泡卡片):点击/鼠标移入元素,弹出气泡式的卡片浮层(可操作)。
  • Tabs(标签页):选项卡切换组件。
  • Table(表格):展示行列数据。
  • Tag(标签):进行标记和分类的小标签。
  • Timeline(时间轴):垂直展示的时间流信息。
  • Tooltip(文字提示):简单的文字提示气泡框。
  • Tree(树形控件):文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

4. Feedback(反馈)

  • Alert(警告提示):警告提示,展现需要关注的信息。
  • Notification(通知提示框):全局展示通知提醒信息。
  • Drawer(抽屉):抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。
  • Modal(对话框):模态对话框和非模态对话框。
  • Progress(进度):展示操作的当前进度。
  • Spin(加载):用于页面和区块的加载中状态。

5. Other(其它)

  • Button(按钮):按钮用于开始一个即时操作。
  • chart(图表):图标数据显示。
  • Copyright(版权):版权信息。
  • Divider(分割线):区隔内容的分割线。
  • logo(标志):logo 的使用。
  • LocaleProvider(国际化):为组件内建文案提供统一的国际化支持。
  • Text link(文字链):点击有链接跳转的文字。
  • Scrollbar(滚动条):在特定界面区域内进行内容的更多展示。

以上组件可根据自己的产品进行增删,把组件规范设计完成后,整个设计规范就完成了 90% 以上,可以算一个比较完整的设计规范了。

八、总结

每一个设计规范都是有灵魂的,规范是为了更好地做设计,而不是限制设计师双手的枷锁。

设计规范也不是一成不变的,它在落地使用的时候多少都会有问题,需要慢慢地去反复检验规范的合理性,发现不合理的及时更正。


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

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


文章来源:人人都是产品经理   作者:友设青年

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

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



想打好品牌年轻化的战,就要让年轻群体先看到你

资深UI设计者

在当下市场,年轻人是消费的主力人群。抓住年轻人就等于抓住了市场,不少品牌们也纷纷开始“年轻化”。要想打好品牌年轻化的战,我们应该怎么做呢?


现在我们很多“老”品牌企业为了能够抓住年轻人的胃口,都在争先恐后的讨好着年轻消费者。在移动互联网的冲击下,通信路径、通信方式和文化环境都发生了重大变化。

市场不再欢迎我们习以为常的老办法。面对新时期的消费者和新市场的消费环境,品牌也面临着年轻化的问题。重复的市场,让品牌必须处理的手段,就是所谓的八仙过海,各显神通。

校果在与大部分中小企业品牌的前期沟通过程中可以发现,很多品牌都想通过自己不断地年轻化迭代,保持一个品牌活力,不被“新”时代的消费者抛弃。

传统品牌洗心革面,不遗余力地争夺年轻人的市场,但总是做不到自己想做的事情。品牌年轻化固然重要,但许多品牌往往误解了这件事的实质和核心,因为选用品牌年轻化存在一些误区。

01 让年轻用户看到,所以品牌需要年轻化

品牌通常是年轻人看到、俘获年轻消费者的年轻化推广,听起来合情合理,但其实并不是所有品牌、所有行业都需要品牌年轻化。

品牌年轻化并不是最终的目的,品牌的年轻化需要甄选行业。对于品牌而言,品牌年轻化的首要条件就是,确认品牌到底有没有年轻化的必要,年轻化所需要的解决的是什么商业课题,TO B企业就不一定会适合做年轻化,因为对于TO B企业来说给客户带来的关键词是安全感、信任感、专业度,所以这类品牌做年轻化的意义并不大。

而对于一些快消品来说,品牌的年轻化就格外的重要了,因为年轻化能够帮TOC端的品牌获得用户感知、流量获取、产品销售等一系列的问题。

所以说,品牌的年轻化其实是一个伪命题。品牌年轻化只是一个品牌的表面策略而已,核心技术仍然是企业品牌在新的内部控制外部市场环境下的商业述求。

在年轻消费者购买力越来越强,资讯信息接收更广的背景下,品牌不论是社交平台的亲民互动,营销活动的事件热点,潮流风向的跟进,情感与态度的表达等等这一整套的传播动作背后所要解决的商业课题是:如何让品牌的产品提升新增且值得的溢价。

02 品牌年轻化就是传播现代化

对于普通用户而言,能感知到的品牌年轻化动作通常在传播层面上,但对于整个品牌而言,传播的年轻化可能是最表面的一个维度。卫诗媒体认为,消费者对品牌复兴的感知有三个维度:

1. 第一个维度便是传播维度,我们今天所认识的“双微一抖”的内容输出

社交网络平台上品牌人格化的定位等等,都是一个基于信息传播层面上的东西。

传播层面也是品牌首先调整的层面,在互联网信息大爆炸的时代,年轻消费者每天接触的信息往往一扫而过,这就要求着品牌在传播和营销策略上有着高质量+高频+有态度的输出,这样用户才会去主动的关注你传播的内容。

2. 第二个维度是视觉维度,也就是产品的吸引力

这个维度可以让消费者感觉更直观,比如产品包装,各种视觉表达效果等。在营销中,内容的情感表达是到位的,他们看到产品的那一瞬间是不能被打乱的,所以前面所有的辛苦营销都是白做的。

年轻的包装可以给消费者带来不同的感官体验,如果你的品牌包装或十多年的美学包装,年轻的消费者可以直接感受到品牌的变化…当然,如果能像椰汁一样可以坚持发展自我,独树一帜形成具有强烈的品牌设计风格那更好。

所以,传统文化品牌在视觉上的焕然一新并不是一个追求一种视觉上的颠覆,品牌企业一方面我们需要进行更新自己产品的视觉体验,同时教师也要保留品牌曾有的独特性,更需要的是在品牌价值属性上做视觉审美的升级,而不是全盘否定过去社会形态。

3. 第三个维度是产品维度,也就是真正决定年轻消费者买不买账的关键

品牌的年轻化发展不仅可以仅是企业营销、包装的文章,而是让你的产品进行更加的符合学生新用户群体的需求。比如食品行业,年轻人将需要更多的绿色、环保、健康的食品,品牌年轻化是为人们提供当前生活方式和价格的关键。

其实,品牌年轻化也会涉及到企业的管理、过程,因为对于品牌的年轻化而言,问题不仅仅是指传播或者审美变革。

甚至会考虑,品牌产品进行年轻化发展改革,品牌管理公司员工年轻化的变革等等的细枝末节,真正的年轻化往往会选择需要伤筋动骨。但只要狠得下心,往往会涅槃重生。

正因为如此,当我们帮助品牌走向年轻化的时候,通常从三个方面帮助消费者:

  1. 从品牌战略和营销战略进行调整和改革;
  2. 有助于品牌年轻化的设计,同时保留品牌的独特性;
  3. 从传播层面进行传播策划,搭建与年轻人交流的平台。这样才能找到自己的公司进行全方位的转型升级。

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

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


文章来源:人人都是产品经理   作者:校果研究院

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

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



小数据里的大秘密

资深UI设计者

本次活动中,嘉宾通过众多丰富、有趣的案例介绍了数据可视化的概念、作用和设计方法,信息量满满。

分享框架:

嘉宾首先分享了2个数据可视化案例:

  1. 设计师把阅读困难症患者普遍能看到的东西进行实体化、视觉化,让别人能进入他们的世界。
  2. Aaron Koblin的作品《Flight Patterns》,让人眼突破视域的界限,以“鸟瞰视角”来看北美居民的迁徙过程。

 

活动笔记:

1. 什么是数据视觉化?

其实它就是把不可见的数据转化为可间接被观察数据的过程。它不提供回答,只是提供一种观察的新方式。

举例一个来自小数据观察的自我探索项目:太极。

将太极拳的动作进行数据采集完成了第一张数字国画,有人质疑说好看但无用,嘉宾解释由于好看吸引了人群,从人群的行为进行观察可能会有意想不到的发现。

数据视觉化的初衷并不是为了解决问题,而是为了探索。

前田约翰(John Maeda)曾经说过:“好艺术的使命是唤起思考,好设计则是让事物变得清晰,并能解决实际的问题!”

 

2. 数据视觉化有什么用?

介绍两张数据视觉化历史上教科书级别的神图:

  1. 《拿破仑东征》诞生于1861年,由法国工程师查理·米兰德绘制,描述了1812年拿破仑东征俄罗斯的失败战役。图中透过2个维度呈现了6类资料:拿破仑军的人数、距离、温度、经纬度、移动方向,让人在一个静态的平面上同时观察多种数据变成可能。
  2. 另一位南丁格尔女士,是一名护士。作为军医,她清楚地知道大部分士兵都不是战死沙场,而是死在医疗环境极差的军营里,她自己懂,可是怎样才能影响国会呢?她发明了玫瑰图,用以表达军医院季节性的死亡率,对象是那些不太能理解传统统计报表的公务人员。她的方法打动了当时的军官统领和维多利亚女王本人,于是医事改良的提案才得到大力支持。为了纪念她的贡献,后来她的头像被印在了英镑上。

数据可视化研究的不仅仅是“数据如何能被看清”,还有“数据如何能被看懂”。

 

2.1 数据如何被看清?

可以通过颜色,大小,方向去提高数据的差异性。最简单的例子就是报表中的标红。

  1. 有效标红的第一步:去颜色干扰,第二步:去分隔线干扰;
  2. 去掉没有用的东西,例如框框、加粗;
  3. 对齐很重要:数据右对齐、信息左对齐,注意表头对齐;
  4. 间隔和行距也很重要;
  5. 单位很重要,尽量减少数字本身的长度,不超过4位;
  6. 去重非常重要(尽可能减少画面里的重复信息,可以让重要的信息更突出);
  7. 字体修正(看个人喜好)。

 

2.2 数据如何被看懂?

嘉宾介绍了4个项目:

项目1:国内外艺术院校的数据可视化展示。

由于经常会有同学问各大美院或艺术类院校之间的区别。嘉宾抓取了17所国内国外院校的数据来做展示,蓝色是代表“设计类”,白色代表“纯艺术类”。从中也可以看到院校的结构是否扁平。

 

项目2:嘉宾基于wikidata数据库编写的小工具。

最初只是用来快速查找艺术家的基础信息,后来加入视觉化功能,把所有查询到的人排列到一根时间轴上,横向观察她所关注的艺术家的生活年代及寿命。

通过可视化的展示,她发现自己关注的都是集中在某一个时期的艺术家,除了看到自己的喜好之余还很有效地发现自己的知识盲区(只有看到了自己知道什么,才能知道自己还不知道些什么)

我们可以发现在人类历史上,很多人物在时间即便在空间上没有交集,却在时间上相遇了。

比如Jackson Pollock,艺术史上动态艺术里面用身体的律动去做油画的一个非常重要的艺术家,他和计算机之父图灵原来都是同一年出生的,酒鬼Jackson Pollock居然比图灵还多活了两年。

我们还能八卦一些爱情故事,原来摇滚界的神话列侬跟小野洋子是姐弟恋,而且列侬只陪伴了洋子生命的一小段时间。

我们可以清楚地看到“看得见”的魅力。

很多信息的缺失并不是不存在,而是无法被看见,被观察。

因为看不见,很多信息甚至是完全错误的。在测试代码的过程中作者更意外地发现爱迪生的生日被错写为2016。

 

项目3:纽约大都会艺术博物馆做的Unfinished项目。

Unfinished是大都会艺术博物馆别馆在首次开幕时的处女展,Unfinished讨论的是“艺术很重要”的话题:在艺术的世界里,什么是未完成,展期为半年。嘉宾认为这个线下展展期太短非常可惜,希望可以通过技术的手段延长展期,更希望能降低门槛,让更多世界各地无法前来观展的人可以有机会参与讨论。

于是嘉宾将Unfinished展做成了Google的插件,安装插件之后,当新打开空白页的时候,空白页会自动被Unfinished的作品填满,把一个简单的空白窗口变成艺术之窗,同时让人不需要任何搜索便进入展览。

此外嘉宾赋予了这次改造更多的交互空间,让人可以实现在传统线下博物馆没有的体验,让他们自由地在“未完成”的作品上进行创作并分享,延长了作品的寿命,让艺术品重回人们的生活中,赋予其新的价值和灵魂。

 

项目4:通过整理全国美展的数据总结的一些获奖规律

得到的3个有趣的结论是:

  1. 高亮的红色、黄色很受欢迎
  2. 1999年,30多、40多的艺术家容易获奖
  3. 画一张少数民族在沙发上抱着一头牛的作品在数据上是很可能获奖的

 

3. 数据如何被视觉化?

在实际工作里,大部分人会接触到的数据视觉化实际上是信息图表,关于信息图表的一些规范和小技巧嘉宾也有提及到:

在做图表时,动机往往比较重要。

下图是为了说明布什总统下台的话,居民税收会增长多少,其实只有不足5%的区别,但对图表做了去零线处理,使得看起来差异很大。

作图的时候要先说明结论。

比如下面的表格是员工为了向老板说明自从少了两位员工之后,单子处理不过来了,意思就是说老板你得给我加人。

千万不要出现彩虹柱状图,折线图在多周数据对比的时候会非常实用。

 

最后是一些推荐的网站和资源:

最后释疑:

五步提升你的版面精致度

资深UI设计者


首先,我们怎么去理解在作品集版面中的“精致度”。我觉得可以将其转化为“质感”,“细节”,“细腻”这样的词汇。其实“精致度”不足这个问题大部分同学也是能有所感知的,只是不知道哪里出了问题,也就无从下手。当然还有一小部分同学,可能并不觉得自己有什么问题,也无法体会修改前后的差别,这样的同学,我建议你平时应该多看一些优秀的设计作品,多沉淀一下,这样的方式对你帮助更大。


很多同学经常把“精致度”理解为形式感不够,或者是不够酷炫,这么理解是不准确的。这就好像一个产品,它的精致和它的外观设计并没有什么直接联系,而是更多的取决于这个产品的做工和材质。做工体现在接缝的处理,边角的打磨等等,而材质决定了其质感的好坏。那么同理,版面的“精致度”实际上和你的设计感也是没有直接联系。那么从哪些方面体现版面中的“精致度”呢?我结合自己的经验总结了以下几个方面:

1.舒适的间距。一个合适的,让人舒适的间距特别重要。无论是文字与的,或者说认为不重要的事情。混乱的,不统一的,不舒适的间距会让版面变的排布变的无章,这就好像一个产品各个部件的拼接接缝大小不一,会导致“精致度”下降。

2.大小比例。版面中所有元素的互相之间,以及相对于整个版面的大小比例问题。这个也是非常重要的一个体现“精致度”的地方。所有内容都过于傻大粗,无疑会让版面看起来非常粗糙。

3.层次感。层次感实际上是一个非常好的提升质感从而体现出“精致感”的手段。缺乏层次感的版面会显得非常的寡淡,以及在内容较多时可能会在视觉上造成较乱的感觉。那么如何提升层次感,主要是靠对比的强弱。比如:深与浅,粗与细,大与小,疏与密等等。

4.字体。选择一个精致好看的字体,对版面的精致度有一定的提升,不过还是要注意,字体的与版面之间的大小比例要注意。


5.配图。配图的质量也一定程度上影响了版面的精致度。无论是你自己做的图,比如分析图,效果图等,还是你网上找的图,如参考图等,都很大程度上决定了你这一页的精致度。


通过以上几点的提升,我相信你的版面“精致度”一定会有较为显著的提升,而版面效果也会看上去更为高级。不过这里还是要再次提醒,精致度和设计感是两回事儿,如果只有精致度,而设计感较差,那也是不行的。希望本期的内容对你的版面有所帮助。


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

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


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

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

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


库存领域的业务——库存模块

资深UI设计者

导语:近期公司需要把一个事业部的发货及库存相关业务实现线上化,在我们部门内部进行业务调研及充分讨论后,库存中心的产品规划方案基本确定,本文把我们实战过程中的方案分享给大家,期望能够为读者在设计库存模块时提供些许思路。


01 场景说明

XX事业部主要业务以化工贸易为主,在市场上对部分产品处于核心地位。XX事业部自己不进行产品生产,主要提供营销服务,仓库、物流均以整合社会资源为客户提供服务为主。整体的业务流程如下:

  1. 客户自己在平台下单,或业务员代客户下单,提交订单时需要判断发货仓是否有足够的货物发出。
  2. 内勤确认订单无误后,进行发货操作,业务要求后期需要进行自动发若客户有特殊需求则需要指定具体批次货物进行发货。
  3. 根据发货单,由仓库人员处理出库,并进行实际的库存扣减。
  4. 物流人员根据发货单中的收发货信息安排承运商进行配送,并回收配送相关状态。
  5. 在客户需求变更或配送的货物发生异常情况时能够进行售后申请,把货物进行相应处理。
  6. 对于库存管理人员要求能够定时进行库存盘点,能够及时发现库存货物由于一些管理上的异常情况而导致货物数量异常的情况。
  7. 货物需要定期进行存货核算以及仓储费用结算。

在整体的业务模式中主要可分为以下三种货物供应模式:

  1. 计划性的向供应商采购货物后进行备货,再销售给客户。
  2. 在客户下单时若除常规备货的商品外还有其它货物需求,可由销售反馈给采购后进行零采。
  3. 向兄弟公司调货销售给客户(具体可分为对方公司直接发货给客户和由销售公司发货给客户两种方式)。

在库存管理的业务中,事业部相关人员要求需要及时知道有多少货能够进行销售,其中有多少是已经在仓库可以随时发货,有多少可能是已经采购但货还在配送过程中,还有一些可能是产品管理人员能够预测未来会到货的货物数量。

02 业务分析

通过对上述场景进行分析后,我们能够把和库存配送相关的业务进行如下分类:发货业务、出库业务、到货计划、入库业务、库存管理业务、调拨业务、售后处理、其它出入库业务。

整体的业务架构图如下:

产品设计:库存模块

在整体的业务架构中,各个部分具体的使用角色以及所需要负责的业务具体如下:

发货:一般由销售助理/内勤人员完成,其主要任务是执行销售订单,在客户没有特定要求下,可以设置为系统自动生成,按先进先出的规则进行批次匹配,在客户对批次有特殊要求下需要人工干预,选择对应批次的货物发给客户。

注:在化工行业不同批次货物其性质会有所差异,故客户会有一些特殊要求。而发货单也是事业部对接仓库、承运商的单据,仓库根据发货单进行货物分拣并以发货单与提货司机进行匹配,防止货物错发,同时物流调度人员也会把发货单分配给具体的承运商,承运商下的司机根据发货单到对应的仓库进行提货,并配送到对应的收货地址。

出库:公司以出库单为依据影响库存,同时也根据出库单生成实际发生的应收。主要分为销售出库、退货出库、调拨出库、其它出库。销售出库主要为根据发货的实际情况进行库存扣减,是记录货物从真实的从对应的仓库中已经发出的凭证;退货出库主要为记录售后需要进行退货处理的记录凭证,把退货业务放在出库单中进行记录有一个好处就是能够直接通过负数的单据关联原有单据进行冲销,而根据出库单生成应收后也能直接进行应收冲销,由此不会改变财务核算的逻辑;调拨出主要记录跨组织调拨、转库调拨等情况,能够记录清楚该出库时由哪家公司发起调拨而产生的,最终能够反映在内部结算上;其它出则包含了盘亏出、报损出等不同的情况。

退货质检:主要记录在客户把货物发回到指定地点后到货物再次入库之间的业务信息。能够在该单据上记录货物异常的情况以及责任所属。

到货计划:主要用于记录计划性采购订单货物接收计划,能对在途可售库存进行管理。到货计划需要记录货物是否可售,到货具体的时间、数量、位置等信息。

入库:入库单能够直接影响库存,同时能够根据入库单生成实际发生的应付;主要分为采购入库、退货入库、调拨入库和其它入库,具体逻辑和出库类似。

库存逻辑:主要分为库存设置、明细、库存量和库存报表。库存量的定义和具体逻辑是该部分最为复杂的业务,在讨论库存量前我们需要明确几个定义:

  • 现存量:指仓库(可以是虚拟仓)中实际存放的货物数量,理论上能够进行实际出库的货物数量,有些文档中也称之为物理库存、账面库存。
  • 在途可售:指货物未在仓库,当时也能够销售的库存,支持外部采购在途、内部调拨在途。
  • 待发货量:指已经下单需要进行发货的货物数量,支持销售待发、调拨待发。

以上三个库存量均有实际单据进行对应,由于我们需要管控到批次基本,所以我们需要同时在SKU和批次两个维度进行库存量的记录,在途可售不需要在批次维度进行记录。

基于此我们通过计算得出我们能够用于销售的可售量,再通过一些库存分配策略我们就能实现很好的库存管理,例如:可设置预留量20%,各个渠道设置不同的数量,各个渠道可售数量之和可以大于总库存,但每个渠道的库存则不能大于最大可售量。我们也能够设置相应的库存预警机制,在库存低于一定比例是能够进行预警或者是限售。

03 功能设计

通过对具体的业务进行分析后,我们即可对产品功能进行详细设计,根据业务的实际情况,整体的功能结构如下图:

产品设计:库存模块

从业务分析中我们可发现主要涉及两个领域的业务:物流配送领域和库存领域,物流配送领域我们暂且不做具体的功能设计说明,对库存中心整体分为四个大的模块:出库管理、入库管理、库存管理、其它管理。

出库管理主要满足库存扣减相关的业务场景,例如:销售出库、调拨出库或其他出库,但有一种特殊情况就是售后退货也是放在出库模块,主要是出于财务核算逻辑考虑,如果公司财务核算是应收和收款核销,应付和付款核销,没有应收和应付核销的模式,那么售后退货就应该用出库模块解决,如果公司由应收和应付核销的模式则也可以把售后退货放在入库模块;但第二种模式会增加财务核算的难度,同时在进行库存统计是也会造成入库数据虚高,实际出库不足,主要还是看具体业务的模式。

由于我们服务的事业部暂没有做应收和应付核销的模式所以我们就采用了第一种方式,而对于出库单之前是否一定需要有发货单也是要根据具体业务进行规划,如果仓库管理、物流配送都是自己公司内部完成,也可以使用出库单+配送单的模式进行处理。

由于我们的业务是物流配送和仓库管理都是外包给第三方所以对外是以发货单为标准单据进行管理,所以出库单只是发货单的具体执行情况的记录。

入库管理主要满足库存增加的相关业务场景,例如:采购入库、调拨入库和其它入库,同出库一样在采购发生退货时也是以入库单的形式进行处理,如此设计的理由和销售侧是一样的。

对于库存管理,则属于库存中心最为核心的业务模块,根据业务分析中的相关概念,我们把单据对库存的影响整理一张图:

产品设计:库存模块

上图中有一个核心公式:可用量=现存量+在途可售-待发货量,由于化工行业的产品有分批次的特性故需要考虑SKU级的库存结构设计和SKU+批次级的库存结构,批次级的现存量合计一定要等于SKU级的现存量,而待发货量则不一定相等;在提交订单时(提交或支付)以SKU级的库存(不考虑库存分配规则)进行校验即可,在进行发货时则需要同时满足订单上的可发货量和SKU+批次及的可用量以防止超发或者超卖。

在SKU级的可用量的基础上我们可以根据具体的业务设计库存分配策略,库存策略以可分为预留和可售,预留则表示不对外进行销售,可售又可按渠道、活动级其它逻辑进行分配,各个方式之间的总和可超总可售量,但每种方式不可超总可售量,通过如此设计我们可以最大限度利用库存,而避免出现超卖现象。

库存的核心计算逻辑主要在图示蓝色部分,基本上把各种单据对库存的影响都罗列进去了,但以上的整体逻辑还是基于有货(或在途)的情况下开展的,但还有一种特殊情况是该逻辑不能覆盖的即预售/期货模式,预售/期货模式是以销定采的模式,是在确定了销量的情况下再去进行集中采购;所以对于预售/期货模式 我们需要单独设计一个虚拟库存的模块,而该模块根据实际经营可以轻量级的方式在商品中心进行实现,最终在进行货物交付的时候在通过出库单进行管理即可。

在库存中心还有库存预警、盘点、期初处理等功能,在此不一一展开说明,大家可根据自己的实际情况进行产品功能设计。

04 总结

库存领域的业务是一个相对比较专业和复杂的领域,市场上也有十分之多的传统软件或SaaS,在很多企业认为通过采购的方式去部署一套软件性价比会比自建库存中心要高。

但笔者认为在数字化转型的浪潮之下,通过数字化的工具提升供应链的效率、降低供应链管理的成本一定是一个十分之重要的目的之一,营销测的数字化转型大多数企业已经通过消费互联网认识到了其价值,我想供应链测的数字化转型在接下来的这几年也一定会逐渐显现其宝贵的价值。

传统的库存管理软件不管其架构还是对业务的实现都有其弊端,很难实现和营销侧的互联网架构的系统进行完美对接;所以自建基于互联网架构的库存中心,并培养懂库存业务知识的互联网人员是大多数要做数字化转型或产业互联网的企业必须要完成的任务之一。


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

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


文章来源:人人都是产品经理   作者:不可分类者

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

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






日历

链接

个人资料

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

存档