首页

用户体验要素

ui设计分享达人


用户体验(用户使用产品,系统或服务过程中的主观感受)

用户在使用产品过程中建立起来的一种纯主观感受。用户体验这个词最早被广泛认知是在上世纪90年代中期,由用户体验设计师唐纳德.诺曼(Donald Norman)所提出和推广。对于一个界定明确的用户群体来讲,用户体验的共性是能够经由良好设计实验来认识到。用户体验并不是指一件产品本身如何工作的,更明确的是指“产品如何与外界发生联系并发生作用”,也就是人们如何‘接触’和‘使用’。无论什么产品,用户体验总是在细微之处,往往细节最能打动人心。用户体验通常要解决的是用户具体的使用场景,要兼顾视觉和功能两方面的因素,同时解决产品所面临的其他问题。



产品的逻辑简易程度对于用户体验是一个反向指标,产品越复杂用户体验会越发困难。往往产品后期更新迭代中,每新增一个特性,功能或者步骤,都会增加导致用户体验不顺畅或者失败的机会。用户体验的每一个流程,对开发者而言都要经过慎重的考虑和验证。实际上设计出一个最优的解决方案需要更多的时间和精力,往往不得不在各个方面作出妥协。但是一个以用户为中心的设计流程保证来这些妥协不是随机决定的。



为什么每个产品都在强调‘站在用户的角度,提升产品的用户体验’,因为优秀的用户体验就是商机,良好顺畅的用户体验会极大的提升用户转化率,增加用户的留存率。好的的用户体验主要体现在两种形式:“帮助人们工作更快”和“减少他们犯错几率”。牢记“以用户为中心的设计”在开发产品的每个流程都要把用户列入考虑的范围,每一个流程步骤都要代入用户的使用场景中体验,想用户所想。提供优质的用户体验是一个重要的,可持续,良性的竞争优势,用户体验形成用户对企业的整体形象,并以此来界定来与竞品的差异。



在产品的整个开发流程中都要考虑用户有可能采取每个步骤的可能性,并且理解整个流程中每一个步骤用户的期望值。

表现层:视觉设计,我们使用无论任何设备的产品最先看到的就是表现层,内容、功能和美学汇集到一起来产生一个最终设计呈现;

框架层:界面设计、导航设计和信息设计,框架层用于优化设计布局,以达到界面中元素的最大效果和效率;

结构层:交互设计和信息架构,相对于框架层更加抽象,框架是结构的具体表达方式,明确来元素应该出现在哪里;

范围层:功能规格和内容需求,结构层明确了产品的各种特性和功能最优的展示组合方式,这些内容构成了产品的范围层;

战略层:产品目标和用户需求,成功的用户体验,其基础是一个被明确表达的“战略”。知道企业与用户双方对产品期许和目标,有助于确立用户体验各方面战略的制定;



在五个层面应该是自下而上的建设,战略 — 范围 — 结构 — 框架 — 表现;不同的层面位置考虑的方向和侧重点是不一样的,随着层面的上升我们考虑的决策变得更加具体,并且涉及越来越精细的细节表现。每一个层面都是根据下面层面来决定的,每一个层面的决定都会影响上层的可用选择,表现层由框架层决定,框架层是建立在结构层的基础上,结构层是具有范围层,范围层是根据战略层制定的。



按照产品不同属性分为两大类:功能性产品/信息型产品;针对不同的类型将五要素细分展示,功能型产品更加关注的是任务,去思考用户如何完成这个过程,用户使用该产品完成一个或多个任务的工具;信息型产品关注的则为信息,产品应该提供哪些信息,并且方便用户快速寻找,理解,创建一个富信息的用户体验;这种把用户体验划分为各个模块和层面的模式,更有利于我们去考虑用户体验中可能出现的麻烦。所有处在同一层面的要素都会决定最终的用户体验效果。



优秀的用户体验基础是要有明确的“战略”立意,知道企业和用户对产品的期许和目标,才能更好的促进用户体验各方面的完善和优化。我们要用过产品获得什么?用户通过产品可用得到什么?回答这两个问题有助于我们更好的明确产品目标和用户需求,结合两者我们组成战略层。



产品目标:目标的制定切记不要太过具体或太宽泛我们需要在这之间找出一个平衡点,为了更好的用户体验我们需要保证所作出的决策都不是头脑发热拍脑门定出来的,每一个决策,都应该建立在我们确切了解他所带来的联动影响效果。明确的定义出成功的条件而不是定义成功的路径,有时候跑的慢一定不一定就是落后者。既然是赛跑肯定会有终点有结果的产出,我们要明确“成功的标准”制定可追踪的指标,成功的标准不仅仅影响各阶段的决策,也是衡量用户体验工作的具体依据,埋点数据采集,上线后的客户流存率,转化率,新用户的增长率,老客户的使用反馈等等。对驱动用户体验的决策而言有意义的成功标准,一定是可用明确与用户行为绑定的标准,而这些用户行为一定是可以通过设计来影响的。



用户需求:明确正确的用户需求是复杂不易的,因为用户群体存在很大差异性,确定大致目标用户后我们还需要精细化的区分,将用户分成较小的,有共同特性的以此来助力我们更好的明确用户需求,通过不同的角色群体使用产品来分析他们的需求。在针对用户需求研究时我们还可以使用一些市场调研(将你想要的信息通过具体,有效的公式化问题,让用户提交你正确的答案);现场调查(完整的,有效且全面的方法,了解与产品使用生活场景最匹配的用户行为);创建人物角色(模拟真实用户使用场景更加贴近用户,再产品思考中和用户更感同身受)。战略应该是用户体验中的起点,但并不意味着项目开始之前战略就完全确定下来,它是可以在整个工作中演变和改进的。



当我们明确了解战略层后,我们就知道产品应该为用户提供什么功能和服务,这些也就逐步演变为范围层。我们要做两个事情来定义范围层 —过程和产品。过程的意义在于当产品还在一个雏形时,可以带动我们去思考流程中可能存在的问题,功能实现的优先级;产品的意义在于明确最终产出的结果,团队有明确的目标。在这其中文档的输出是必不可少的,有计划性说明性的文档输出可以让我们的工作更加有条不紊的推进下去。我们可以从战略层抽象出来 — “我们为什么要开发这个产品?”转而到范围层变为 — “我们要开发的是什么?”在软件开发过程中,范围层确定的是全部功能需求和功能规格。



功能规格:功能规格说明不需要包含产品的每个细节,只需要包含在设计或开发过程中可能出现混淆的功能定义。同时功能规格说明也不需要展望产品未来理想状态,只需要记录在创建产品时确定下来的决议。换句话说,文档不能解决问题,但是定义可以,我们需要不是文档多么详细厚重,而是要足够的清晰和准确。功能说明要明确具体避免主观语气,避免出现歧义,尽可能用量化的可检验的标准来定义功能有助于我们的验收。



内容需求:很多时候我们说到的内容指的是文本。但是图像,音频和视频有时候比文字还要重要。这些不同类型的内容结合到一起,相互协作去满足某一个需求。内容特性想要达到的规模,将对你所做的用户体验产生极大的影响,内容需求应该提供每一种特性规模的大致预估,以便在设计过程中作出最为明智的决策。尽可能早的确定某个人来负责每一个内容元素也是非常重要的,避免后期开发实现达不到我们预期的效果。内容清单的输出也是重要的,究其原因这样团队中的每个人都会清楚知道自己负责的哪些部分,明确责任,提高协同效率。



学会确定需求优先级,了解“不需要做什么”也就意味的我们知道哪些是必须要“马上去做的”,把那些需求点梳理出来,找到一种适宜的方式,让它们符合你长期的规划,这才是真正的价值所在。确定具体,系统的发展要求,并将任何不符合这些要求的想法作为潜在未来功能的囤积,只有通过这种更慎重的途径,才可以真正的管理起整个项目过程。



在罗列出项目需求优先级,梳理出大致的流程,我们对于产品将会包括什么主要内容已经有了清晰的构想。然而,这些需求没有进行全面的整合还是碎片化的存在。而结构层要做的就是整合这些创建一个概念性的结构。结构层适当的将我们关注点从抽象的决策和范围问题,转移到更能影响最后的用户体验具体因素。但是这里的交互设计和信息架构所产出的东西大部分还是概念性的内容。这两项内容并不完全是技术,它要求开发者要有共情能力去理解用户,理解用户行为操作习惯,使用场景,思考方式等。将了解的这些知识代入我们开发过程中,这样会使那些不得不使用我们产品的用户带来更好的用户体验。



交互设计:关注于影响用户执行和完成任务的元素,即关注用户所有操作,同时定义“系统如何配合与响应”这些用户行为。任何一个交互设计的项目都有很大部分牵涉处理“用户错误”当用户发生错误时产品要给出什么提示,并且对于错误发生时,如何防止用户再次发生错误?第一个也是最好的防止错误的方法,就是将产品设计为不可能犯错的。第二个避免错误的方法就是使错误难以发生,即使一些错误发生,产品也应该帮助用户改正错误。有效的错误信息和容易自我解释的界面可以在错误发生之后帮用户纠正。当用户完成一些操作后无法纠正的错误,产品就该提供从错误中恢复的方式。对于那些不可恢复撤销的错误,提供大量警告就是产品唯一可以预防的方法。

信息框架:研究人们如何认知信息的过程,对于产品而言信息架构关注的就是呈现给用户信息是否合理并却具有意义。在以内容为主的网站上,信息架构主要工作就是设计组织分类和导航的结构,让用户可以高效率,有效的浏览网站的内容。信息框架与信息检索和分类体系密布可分,针对分类体系我们可以从上到下或从下到上这两种方法来建立。



从上到下的信息架构从战略层考虑,先从最广泛的,有可能满足决策目标的内容与功能开始进行分类,然后再依据逻辑细分出次级分类;从下到上根据对“内容和功能需求分析”而来,从已有的资料开始,先把他们分为最低级别的分类,然后再归纳到高一级分类,从而逐步构建出反应我们产品目标和用户需求的结构。这两种方法各有弊端,从下而上容易将内容的重要细节忽略,从下而上使架构过于精准的反应内容,对于后期的维护变动不是很灵活。因此我们要尽可能的从两种方式中寻找一个平衡点。一个高效结构的优点就是具备“容纳成长和适用变动”的能力。一个适应性强的信息架构体系,既可以把新内容作为现有结构的一部分容纳进来也可以当成一个新的部分加入。



在充满概念型的结构层牵引出大量需求后,这些需求都是来自我们战略目标的需求。在框架层我们要更进一步的提炼这些需求结构,确定详细的界面外观,导航和信息设计,这样才能使结构变得更加丰满。框架层需要处理更为细节问题,在结构层我们建立了一个框架和交互设计。在框架层我们关注点就是界面的元素以及它们之间的关系。当我们提供用户做某些事情的能力是,属于界面设计;当我们提供用户去某个地方能力,则属于导航设计;当我们要传达想法给用户时,那就是信息设计。



界面设计:成功的界面设计就是要让用户一眼就看到“最重要的东西”,而另一方面,不重要的东西,不应该被注意有时候则它们根本就没有出现在那。设计界面,平面最大的挑战之一就是弄清楚用户不关注的东西并减少他们的比重。将第一要表达的要素快速传递到用户。

导航设计:任何一个网站的导航设计必须同时完成三个目标:1.它必须要提供用户在网站的跳转方式;2.导航设计必须传达出这些元素和它们所包含内容的关系;3.导航设计必须传达出它的内容和用户当前浏览页之间的关系;这三个目标就是必须要纳入考虑的范围,清晰的告知用户“他们在哪里”以及“他们能去哪里”把用户当成是“傻瓜上帝”。



习惯和反射作用是我们与这个世界交互时的基础,我们在使用互联网产品这么多年的时间中,绝大部分的操作效果和下意识的操作方式已经被养成,所以要让你的界面与用户早养成的习惯保持一致是很重要的,界面要与它自身保持一致。这并不是说,每一个界面问题的解决方式都必须毫无条件的死守这些习惯。当某种不同的方式有明显的益处时,你反而应该尝试谨慎的违背一些习惯,到那时需要我们做的每一个决定都要有充分的,明确的理由。有效的使用比喻,就是减少用户在“理解和使用你的产品功能”是的猜忌,让用户第一眼就知道你的图标表达的是什么意思,要有强指示性质。



内容,功能和美学汇集的地方,完成其他四个层面的所有目标并同时满足用户的感官感受。在框架层,我们主要解决放置的事情;在界面设计考虑可交互的元素布局;导航设计考虑在产品引导用户移动元素安排;而信息设计考虑传达给用户的信息要素的排布;在向上就是表现层,我们这里要解决的就是弥补“产品框架层逻辑排布”的感知呈现问题。我们每一次经历最终都是由我们的感觉器官来进行的。在设计的过程中这是用户体验的最后一站:决定我们设计最后被哪些(视觉/听觉/嗅觉/触觉/味觉)感受器官受到呢?



嗅觉和味觉对于用户体验设计师是很少考虑的范围;触觉更多的用于工业设计领域,关注用户和产品之间的物理接触;听觉可以应用到不同类的产品中,如开机/新消息提示等;视觉:这是用户体验师最得心应手饿领域,几乎所有的产品都会涉及视觉设计。代替用“什么具有美感”来评估一个视觉设计方案,应该吧注意力集中在他们能否“良好运作”,对于那些上层决定的目标,设计能否赋能帮助企业更好的变现,设计的本质就是用合适的方式帮助用户/企业完成需求目标;



忠于眼睛评估一个产品视觉设计最简单的方式,就是你的视觉首先落在什么地方?哪个设计要素第一时间吸引注意力?它们对于战略目标是最需要表现的东西吗?用户第一时间接受的信息是你想要表达的吗?设计还是要把握4大基本原则:对比;重复;对齐;亲密性;



不管你的产品多复杂,用户体验都是一样的,创建良好的用户体验最重要的工作内容就是大量收集解决细微的问题。“成功的方法”和“注定失败的方法”归根究底就是:1.了解你正在试着去解决的问题;2.了解这些解决办法所造成的后果;必须要同时考虑五个层面的全部因素,这对于创建成功的用户体验至关重要。



提成正确的问题,面对那些用户体验需要解决的纠缠不清的问题,要抱有一种正确心态,不要以“节约项目时间或金钱”名义对用户体验问题敷衍了事。

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

作者:许小鹏   来源:站酷

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

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


用户体验写作:作为设计师如何处理产品文案

ui设计分享达人

用户体验设计师经常需要兼职各个角色职责,除了线框图和原型制作之外,还有可能与团队一起研究、写作等问题。这样的例子不胜枚举,用户体验是一个不断发展的多学科领域,因此优秀的 UX 设计需要广泛的技能开发,UX写作位居榜首。

一、内容策略简介

关注用户从内容开始,内容策略是所有产品信息的制作和开发。用户体验(UX)写作是该学科的专长,它专注于帮助用户用语言实现他们的目标。

语言帮助用户到达他们想去的地方,通过关注用户想要实现的目标,内容策略可以建立忠诚度和信任度

UX设计师思考页面上的信息层次结构,然后,这将指导用户操作。UX与研究人员一起测试有关语言的假设并提供专业的见解。

当您拥有 UX 写作的基础,并参与品牌建设时,就会发生惊人的事情,用户体验写作可以让品牌茁壮成长。


二、用户体验写作最佳三个原则

1.清晰

通常在产品中,使用的词是软件操作,请用动词,它往往是句子中最有力的部分。它将与用户的某些操作有关,

保障用户使用中清楚,需要删除技术术语并将操作置于用户的上下文中。


2.简洁

简洁不仅意味着简短,还意味着简单高效。当我们写作时,需要查看我们的信息每个词语都有不同的工作。


以上是产品写作中的常见问题,在这里不需要标题。在系统接口中很常见,研发提供一种状态,我们通过这种状编写文案。我们应该确保内容优于设计,视觉效果与要表达的内容一致。尽量不要把信息塞进不适合的盒子(代码)里。



在这里,我们删除了标题。正如研究表明,大多数人不会阅读屏幕上出现的每个词语,用户倾向于扫描。他们的眼睛会遵循 F 形图案。阅读第一行,第二行,然后开始向下跳过页面,只捕捉每个句子的第一个或第二个词。出于这个原因,保持我们的文本不仅简洁而且前置。将重要概念放在首位,这样做是为了让人们在浏览页面时能看到那些重要的词。



这个原则永远适用,将最重要的文本放在前面,然后无情地编辑后面的内容。


3.有用

号召性用语 (CTA) 引导人们进行下一步,您希望引导用户到达他们想去的地方,号召性用语需要与用户想要做的事情产生共鸣,这里的“好的”不是一个好的行动号召。

“再试一次”是一个不错的选择,这不是全部场景,如果用户忘记了密码,而唯一的按钮只有“再试一次”,用户可能会感到沮丧,我们需要给用户多一个选项「忘记密码」。


注意写作时需要结合使用场景,它可能需要提供的一些基本功能,但可以提升产品的用户体验。



4.最佳实践总结

如果您注意这三个原则,您将更好地与用户建立联系。


这三个原则并不总是协调一致的,他们之间有一种张力在互相竞争。


当我们使文本清规则时,文案仍然很长,而且不太好阅读。当我们使文本简洁规则时,它使文案更短,但可能牺牲一些清晰度为代价。最后,当我们使文本有用规则时,它变得更长且更不易阅读。

三、建立产品品牌文案

1.品牌原则

从一个品牌中,我们可以筛选出 3 或 4 个形容词,以及希望用户如何看待它。提取这些形容词,可以采用头脑风暴练习。

想象一下,如果要设计一个约会产品

您会在产品资料中加入什么词或信息?让它在众多产品中脱颖而出,是什么让用户觉得它最有趣?

是什么让用户想要点击并想要了解更多信息?

然后,您可以将这些品质提炼成描述性词语,这些将成为您的品牌原则。


Google Pay 的原则是:新鲜、善解人意、平易近人。 


2.语气

想想您在不同的环境或情绪中听到声音是什么样,这是语气。

声音和语气之间差异,是声音传播手段,语气是根据情况或内容而不断调整的。在一个产品中,就像在不同的情况下以不同的方式与用户交谈,语气的利用容易带用户进入情感化的设计。

例如:

  • 抱歉,网络连接失败,请重新连接
  • 暂无内容,请刷新试试

3.音谱(产品阶段)

将不同的阶段映射到用户旅程中,可确保用户在整个产品体验中以一致的方式使用产品文案。

对于产品,您的文案写作可能从信息丰富到鼓舞人心或者幽默风趣。创建产品开端与终端后,您需要确定要映射的用户旅程中的哪些时刻,考虑用户体验中不同的里程碑或交互,如注册、引导、或错误提示之类。

为了帮助您确定这些将落在频谱中的哪个位置,您可以考虑:

  • 用户的目标是什么?
  • 那一刻他们可能有什么感受?
  • 你希望他们有什么感觉? 


四、我们做一些写作练习

现在,我们将前面讲的内容,融合在一起做一次UX 写作练习

UX写作原则


举个例子,第一次使用 Android Pay 时需要对用户说什么?

第1步

在流程开始时,从以下描述性内容开始:

第2步

思考良好的用户体验写作的三个原则,文本清晰有用,但并不简洁。让我们查看看哪些信息是必不可少的,哪些部分可以使用视觉效果?最后编辑为如下所示:

Google Pay 的原则是:新鲜、善解人意、平易近人。

第 3 步

文案已经清楚,简洁和有用,现在需要考虑语气词,还有就是“这段文字是否传达了品牌?”不多,感觉很一般。

因此,回到品牌原则,需要考虑如何让它更新鲜、更令人兴奋,因为这可能是用户的第一印象。

五、你的用户体验写作清单

有了这份清单,您就可以让产品在语言上脱颖而出:

  • 用户至上:关注您的用户
  • 清晰:用没有行话的语言和上下文写作
  • 简洁:以高效且可扫描的风格书写
  • 有用的:以指导下一步行动的方式写作
  • 关于品牌:定义品牌的声音并应用适当的语气

作者唐小白92

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


B端设计师如何做产品分析

ui设计分享达人

行业对设计师的要求⼀直都在不断革新,只有「⼀技之⻓」的设计师已经很难满⾜⾏业需要,产品分析已经不仅仅是产品经理的工作内容,对于 UI 设计师来说,也是必备技能之一了,尤其是对于 B 端领域的设计师来说,更需要拓宽视野,思维前置。

那么,该如何去做产品分析呢?本文将从产品分析是什么,如何做两个方面来讲述,为大家提供思路,做真正落地的对设计有帮助的产品分析,提高自己理解业务、处理业务、解决问题的能力,体现出设计师的价值。






1.1 产品分析定义

1.11 B端产品是什么

对于 B 端产品来说,它只有一个目标,就是解决问题,通过对问题的分析得出解决方案,而任何一个问题都不会只有一种解决方案,在权衡利弊后得出了最终的解决方案,产品就是解决方案的表现形式和实际载体。

1.12 产品分析是什么

从设计师的角度来说,产品分析通常是挖掘产品缺陷,优化产品体验,为产品迭代提供依据,比如:通过深度体验产品,挖掘产品的在功能、交互体验方面的不足,并通过分析制定产品优化方案。一款产品从浅至深拥有无数的可被挖掘的信息,这些信息本身是庞杂冗余无意义的,只有通过分类和清洗才能得到对人有意义的信息,本质上来说,产品分析就是在做信息分类和清洗的工作。

1.2 产品分析与市场分析、竞品分析



1.21 市场分析

市场分析是对产品所在的市场进行宏观的竞争态势和市场规模的分析。市场分析主要包括行业背景、市场现状和商业模式三部分。可以看到,市场分析其实是从很宏观的一个角度来切入,更偏向于战略层内容,因此市场分析也是三者中距离设计师最远的一个概念。用通俗的话来说,市场分析最主要的目的就是分析产品是否赚钱。

1.22 竞品分析

广泛意义上说,竞品分析就是根据分析目的,找到切入角度,对竞争对手或市场进行客观分析,找到竞品或自己的优势与不足,为下一步决策提供科学依据,其实就是「知己知彼」的过程。对于设计师而言,竞品分析的目的更倾向于寻找解决方案,比如:通过竞品分析来寻找参考从而解决自己当前遇到的问题。

1.3 产品分析对设计师的意义

  • 1. 设计:帮助设计师理解产品的历史和现状,避免设计时天马行空无法落地
  • 2. 业务:帮助设计师快速理解业务和融入新团队
  • 3. 沟通:可以帮助设计师同产品经理更好地进行对话,降低沟通成本



1.4 难点——业务难以理解

不同于 C 端,B 端往往有很坚固的行业壁垒,所涉及业务也非常难以理解,究其原因,来自以下两个方面:

  • 1. 业务逻辑复杂
  • 2. 远离日常生活



1.41 业务逻辑复杂

B 端产品很多时候,都是在原有线下业务的基础上进行数字化。逻辑的复杂度本质上是来源于这个行业多年来积累的足够成熟的业务流程与规范,而这些东西没有办法速成,只能靠不断地积累来增进理解。

1.42 远离日常生活

C 端产品的设计中,设计师大部分情况下都或多或少地就是用户本身,或者带有用户属性,比较容易产生同理心,去发现问题解决痛点。

而 B 端产品不是给普通用户使用的,是给特定群体使用的,这种特质就决定了设计师很难去真正地理解用户的处境,设计师最厉害的特质——同理心也很难派上用场。

1.5 误区

有的设计师同学,一接到产品分析的任务,到手就是先去网上看看别人是怎么做的,然后按着人家的结构对自己的产品进行一通分析,其中不乏用到了「用户体验五要素」、「SWOT分析」等看起来高大上的方法论。

按这样做,产出的分析报告不能说错,但是最起码是不恰当的,对设计上的帮助微乎其微。其中有这样两个问题:

  • 1. 与产品经理边界混淆
  • 2. 注重方法论,流于表面



1.51 与产品经理边界混淆

产品经理是产品的第一负责人,需要对产品的整个生命周期负责,说人话就是产品经理负责产品做什么不做什么,该什么时候做,而设计师关注的是产品的用户体验。产品是商业的代言人,而设计师是用户的代言人,二者本质上的不同,就决定了在做产品分析时关注点必然不同。如果按着产品经理的思路来做产品分析,得出大环境之类的太过于泛化的结论对设计没有什么实质性的帮助。



1.52 注重方法论,流于表面

用户体验五要素,swot,等等这些高大上的方法论看起来非常有用,从多个维度把一款产品分析得非常清楚。可真实的情况时,往往新手设计师同学既不懂方法论的本质,也不懂使用场景,只是盲目地套用,导致产出的是一篇「八股文」一般的产品分析报告,过于全面但没有重点,什么都是点到为止,对自己理解业务和辅助设计没有实质性的帮助。

我认为,「方法论」本质上是经验主义,使用过去解决问题的方式来解决新的问题。在一定程度上,方法论是有用的,一些简单的问题,确实是有固定解法的,而且,解决问题也更快。但是在更难更特殊的场景下,方法论不再管用了。很多时候,问题表面上看起来一样,可是由于问题的背景不同,所以解法也是不一样的,这时候再采用方法论,就会产生思维固化,强行去套方法流程,得到的一定不是最正确的答案。



在确定了目标和分析重点之后,我们就可以开始进行分析产出产品分析报告了,在这里我整理了几个撰写时的原则供大家参考:

  • 1. 避免主观
  • 2. 思考要全
  • 3. 自上而下



2.1 避免主观——不要把自己当成使用者

第一点是我们要避免去主观臆断功能的合理性。正如我上面提到的一样,我们并非 B 端产品的核心用户,有些我们感觉反常的地方,但是其实有它的合理性,因为 B 端用户的痛点往往是在特定的工作场景下产生的。因此,在不了解真正用户和场景的情况下,仅凭经验下的结论往往是错误的。

我之前的一个项目的设计中,在给图表配色时,我最初的一个版本是用的近似色去完成的,在发给产品经理初审时被打回来了,理由是这种配色不够明显。我追问原因后才知道,我们的一部分用户是年龄比较大的用户,对比度足够高才能方便他们看清楚。最后出的一个版本是对比度非常高的配色,尽管从设计的角度来看这种配色美观度不足,但是能够让用户看得清楚。

在这个例子中,用户对于美观度并没有很高的要求,反而对于数据的识别度要求更高。我们常听的一句话是「己所不欲,勿施于人」,然而在B端的设计中,我们更要做到「己所欲,亦勿施于人」。

2.2 思考要全——使用者和决策者都要考虑

B 端产品有一个很重要的特点,购买决策者与使用者的割裂。我们在思考一个功能时,不能仅仅考虑使用者的体验,也要考虑决策者的想法。

比如钉钉的「已读未读」这个功能,相信大家对这个功能是槽点满满。但是在 B 端产品中,决策链上游是购买决策者即老板,因此就有了这个功能。如果只考虑到用户体验,这个设计从一开始就不该出现。但是,与 C 端产品的流量思维不同,B 端产品不是靠体验来吸引用户存活的,而是靠满足决策者的需要来活下去的。很多大家感觉不好用或者体验很差劲的 B 端产品,仍然活得很好,就是这个道理。

说句题外话,钉钉已经注意到了这个细节,在去年的一个演讲上,钉钉总裁也提到了对这个功能点的考虑,他举了一个场景,在不改变现有设计的情况下解决了这个问题,通过智能手表等外设来预览消息,而手机和电脑依然显示未读,自己考虑好了的时候再去回复。

2.3 自上而下——从宏观到微观

从战略层到功能架构,再到每个功能细节,采用金字塔原理去遍历,避免遗漏的同时层层深入。



在此处,我介绍一下我认为一份合格的产品分析报告应该包含的部分,各位设计师同学可以根据自己的需要进行适当调整。



3.1 文档说明

3.11 版本说明

因为产品分析是有一定的时效性的,且是针对某一个具体版本去进行分析的,所以在文档开头要列出自己所分析产品的版本,例如(飞书 V5.6.9,钉钉 6.3.35)。

3.12 分析时间

即设计师进行产品分析的时间,留档以供以后查看。

3.2 产品概述

此处要回答的问题是,产品是用来干嘛的,给谁设计的以及怎么赚钱的。



3.21 产品定位

即产品是用来干嘛的,不需要特别具体,只需要在大方面上对产品进行概括即可。举个栗子,抖音定位是一款短视频消费型产品,以“内容”的新鲜有趣为主,强调分享和信息获取,满足幸福快乐的美好时刻需要。

3.22 目标用户

即产品是给谁设计的,在此处需要对客户和用户做区分。客户一般是指企业的 CEO/管理者,他们来决定是否要斥「巨资」购买一款软件。比如说某公司的 CEO 最终决定买钉钉还是飞书作为办公协同软件。而用户一般是企业内的员工,他们使用软件来完成一些日常工作。分析目标用户的意义是,在之后的分析中,我们都要以用户为落脚点,去分析功能的合理性。

需要注意的是,此处并不需要去做一套完整的用户画像,只需要大概描述一下是产品的客户和用户的职位和核心需求即可。

举个栗子,对于某客服工作台产品,

  • 用户:客服,主要职责是接受用户咨询,帮助顾客解答疑惑。
  • 客户:公司 CEO,目标是对业务情况进行把控,提高客服效率。

3.23 商业模式

即产品如何赚钱,在这里,我们并不需要用各种很高端的工具——比如商业模式画布,去分析商业模式,我们仅需要知道产品的赚钱方式即可。作为设计师,我们不需要有产品经理那么专业的商业思维,但是我们也一定要能够从商业角度理解产品的价值,一款产品最健康的状态一定是用户价值与商业价值并存。因为本质上而言,用户体验也是商业价值的一部分。

对于B端产品而言,有两种最常见的售卖方式:

  • 1. 本地部署模式
  • 2. SaaS 模式



1. 本地部署 —— 按软件数量售卖

本地部署是指产品的应用、数据都存储在一台计算机中,这台计算机不与其他任何服务器、计算机相连。21世纪之前的传统 IT 公司大部分都属于这类,比如 Adobe 旗下的产品(尽管他们也在做云,但是更多情况下我们还是把 PS 当做本地产品来使用),那时候 B 端企业的商业模式是:主要服务于大企业客户,通过与顶级的合作伙伴合作,推出顶级的产品,提供一整套软硬件解决方案,并进行深度服务,一次性收取高昂的软硬件费用,并且每年加收不少服务费。

2. SaaS —— 订阅制

21 世纪后,随着云计算技术的发展,越来越多的产品开始部署在云上,也就逐渐发展成了现在的 SaaS 产品,从这个角度来讲,我们通常所说的 SaaS 产品其实就是将本地部署变为云端部署的产品服务。

这时候 B 端企业的主要商业模式是:不仅服务于大型企业,也服务于中小企业。以订阅制的方式,定期收取费用,并且提供不同的版本,进行差异化定价,实现收益最大化。

举个例子,蓝湖就是提供了四个版本并且以季付或年付的方式进行收费。



3.3 功能架构

3.31 什么是功能

将需求转化为对应的软件层面可实现的能力,即功能,功能可以实现需求所期望达成的目标。

3.32 什么是功能架构

一个完整的 B 端产品包含若干功能,将一套功能依据业务进行分类整合,形成的抽象化业务模型即功能架构。

3.33 功能架构与信息架构

功能架构指的是产品是如何由这些功能组成的。我们在分析功能架构时实际上更偏向于产品的实现模型。

信息架构是包括组织系统、标签系统、导航系统、搜索系统在内的综合系统。我们在分析信息架构时,分析的是这个产品是如何将不同的功能组合在一起展现在用户面前的,分析的是产品的呈现模型。

3.34 为什么要分析功能架构

一个成熟的 B 端产品甚至会有甚至会有三四百个功能,我们在分析功能细节前,必须要先厘清架构,以一种抽象的框架视角来全局思考,而不是也仅仅以用户的视角来看产品的表象。

3.35 如何分析功能架构



收集

真正地去使用产品,并将产品的所有功能与模块收集到一起。

整理

以模块作为分类依据,将所有功能分到不同的模块里,必要的话,可以继续细分子模块。

在这里要注意,一个功能是否属于某一个模块,不能以这个功能是否在某个页面为依据。一个页面出现了某个功能,只是因为这个场景下用户需要这个功能,而不是这个功能属于这个页面。

以飞书后台为例,很多人在分析时会把首页也作为功能架构图中的一个节点去分析,这是错误的。

首页只是功能的聚合,而非功能模块,例如「添加成员」这一功能应该属于「组织架构」模块中,如果将首页也加入分析,势必会出现功能的重复。



3.4 功能分析

在分析完整个功能架构之后,我们可以深入到每个功能的细节了。其中包括以下两点:

  • 1. 功能使用流程
  • 2. 功能背后的需求



3.41 功能使用流程

通过绘制功能的使用流程,我们可以模拟用户在使用产品时的流程,发现一些从宏观角度上忽略的点。在绘制时,要注意的是,要控制在页面 & 操作维度,避免拔高到功能维度甚至业务维度。

3.42 背后的需求

我们除了要知道这个功能该怎么用之外,还要知道功能与业务的关系 —— 功能背后的需求。

3.43 需求分析

在分析背后的需求时,除了知道这一需求是什么,如果可以多走一步,对需求进行分类,那对于我们了解产品时大有裨益的。

3.44 马斯洛模型的局限性



关于需求的分级,在 C 端中常用的模型是马斯洛需求模型,但是这一理论并不适用于 B 端,主要是由于以下原因:

  • 1. 马斯洛需求研究的是人,而 B 端产品面向的是企业和组织
  • 2. B 端系统一般复杂度较高,除了业务目标之外,还要考虑软件架构、体系构建等问题。

3.45 B 端产品的需求划分

一般而言,我们可以将需求划分为功能性需求与非功能性需求。非功能性需求,指的是隐藏在功能需求背后以及开发需要考虑的的需求,也叫作“跨功能需求”。最常见的非功能性需求就是产品的响应时间,一般非功能性需求是由开发和测试同学考虑的。

而对于功能性需求,有三大类:业务需求、功能需求、产品需求。而这三类需求也有比较立体的层次关系:



业务需求,提出者是业务范围、业务模式和业务规则的制定者,一般是指业务方的高层人物,比如 CEO、高级经理等。产品设计是服务于业务定位的,进而使得产品战略遵循于企业的发展战略,只有这样产品方向才不至于发生偏差,因此,他们提出的需求一般不能违反,换句话说,他们提出的需求是整个系统设计的最高纲领。

用户需求,提出者是基层管理者和执行者。他们关心的是如何使用产品完成自己的工作,提出的需求相对细节,例如对操作、流程上的诉求。

产品需求,由于 B 端产品的复杂性,在建设时需要考虑到功能复用问题,以及与其他系统的架构交互问题。举个例子,语雀 App 是阿里旗下的产品,在开发登录界面时,没有重新开发,而是集成了阿里云的 SDK。产品需求本身对业务实现没有价值,它的价值体现在节省人力和优化软件架构上。

三者虽然并没有绝对意义上的优先级顺序,但是一般而言,B 端产品时优先考虑业务需求,其次关注用户体验,满足用户需求,最后才是考虑产品需求。了解了这一点,我们对功能背后的需求进行分类后,就可以从更高的视角来分析功能的设计逻辑,而不仅仅是停留在好不好看的层次上对功能进行分析。



3.5 交互设计

3.51 交互设计是什么

在《交互设计原理》中是指:对于交互式数字产品、环境、系统和服务的设计,定义人造物的行为方式,即人工制品在特定场景下的反应。

在《交互设计精髓4》定义为:设计交互式数字产品、环境、系统和服务的设计,聚焦于如何设计行为。

而在《超越人机交互》中则是指:设计交互式产品来支持人们在日常工作生活中交流和交互的方式,创造用户体验以增强人们工作、生活以及通信的方式,聚焦在实践上,即怎样设计用户体验。

交互设计即行为设计,关注于如何设计系统如何帮助用户更高效愉快地达成目标。



3.52 怎么分析交互设计

仅仅知道是什么远远不够,我们更要知道如何去分析一个产品的交互设计好坏。在这里,我提供两个思路供大家参考:

  • 1. 从行为维度拆分
  • 2. 十大可用性原则

从行为维度拆分

上文提到,交互设计的对象是行为,而这里的「行为」可以拆分为 3 个部分:导航,输入和展示。



导航系统:即用户在哪里和去哪里

设计要点:

  • 1. 导航不能是一个页面上可以链接到其他所有页面,而是要有的放矢,选择用户关心的,更想要去的页面添加导航。
  • 2. 导航要显示出来导航本身与所包含内容的关系
  • 3. 导航要显示所包含内容与当前页面的关系



例如:掘金的顶部导航,既体现出来了导航本身与包含内容的关系(导航的标签是当前内容的概括),又体现出来了内容与当前页面的关系(当前页面是首页下的一个子页面)。

输入系统:即用户向系统提供信息

这里的输入不仅仅指我们日常中的输入,而是一个广义的概念,将所有用户向系统提供信息的方式统称为输入。输入可以通过多种方式完成,包括输入命令、按下按钮、快捷键、甚至打手势、语音等方式。



设计要点:

  • 1. 高效,例如绝大多数的产品都提供了快捷键提高用户的操作效率。



  • 2. 准确,例如 sketch 里方向键的作用是移动 1 像素,使用户在使用鼠标快速移动的基础上,也可以准确操作。
  • 3. 防错,例如大部分的产品都会在危险操作前二次确认。



  • 4. 符合预期,例如在「幕布」中,在画布区和在滚动条区都向下拖动鼠标,操作结果是相反的,但却符合用户的预期。
  • 5. 适当隐喻,隐喻是指提供熟悉的实体,是人们能够容易地理解底层概念模型并知道在界面上做什么。例如我们所熟悉的购物车就是现实世界中购物车的隐喻,帮助用户快速理解软件的使用逻辑。

展示系统:即系统向用户提供信息

设计要点:



  • 1. 突出重点。用户的浏览动作不是读,不是看,而是扫。设计中应该突出重点,弱化和剔除无关信息。
  • 2. 保持一致性。样式规范一致性给用户带来品牌信赖感的同时,还能够通过一致的重复降低用户反复学习成本。
  • 3. 及时反馈。系统应该让用户知道目前的状态, 并及时给予相对应的反馈。

十大可用性原则

尼尔森十大原则由毕业于哥本哈根的人机交互学博士 Jakob Nielsen 发表,他提出十大可用性原则,用来评价用户体验的好坏,我们也可以以此为依据来分析一个产品的交互设计好坏。具体的内容网上有很多资料,笔者就不再赘述。

3.6 视觉设计

3.61 概念

视觉设计即 UI 设计,负责产品的图形、图标、色彩、视觉风格等,从视觉层面把控产品界面设计,决定营造出什么样的视觉体验。

3.62 分析内容

视觉设计的分析内容可以拆分为形、色、字、构、质、动。在分析时,如果是网页端,可以借助浏览器的开发者模式或者谷歌浏览器的插件「VisBug」来详细查看各个维度属性细节。






图标的圆角,卡片的圆角,icon 的风格与统一度(包括:视觉大小,线段粗细,端点类型、拐点类型等)

例如,同样是头像卡片,QQ采用了圆形来体现灵动轻盈的风格,而主打熟人社交的微信则采用了小圆角。



色彩分析包括用色规范、色彩搭配、层级等。在 B 端产品中,色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。

字体的属性有字号、行高、字体、字重等。通过合适字号和字重可以对界面元素划分视觉层级,帮助用户识别。而在一些特殊的场景下,可以运用特殊字体来提高识别度和增加页面美观度。

例如:支付宝使用了常用的 Din pro 作为其数字字体,其他 APP 厂商也分别使用了特殊的数字字体。



此处的构是指页面结构,分为层级和间距两大部分。合适的层级和间距可以帮助用户理解页面,并给予界面呼吸感和通透感。

质感与风格、界面风格,投影数值,扁平还是拟物。

比如说相比普通的单层阴影, Ant Design 采用了三层阴影的表达方式,让阴影更柔和,更符合真实状态。具体可查看 https://ant.design/docs/spec/shadow-cn



最近几年,越来越多的公司和团队已经意识到动效在产品用户体验中的重要性,动效设计已经成为产品设计语言的重要构成之一。

动效设计并不只是为了修饰,使用动效不仅可以更清晰地体现内容元素之间的逻辑和层级关系,还可以提供当前的状态反馈,加强用户对操作行为的感知,给用户以可控的感觉。



除了上述内容之外,我们在分析一个产品时还可以做以下两件事:



4.1 用户体验自查

4.11 为什么要做体验自查?

在被问到「你觉得这款产品的用户体验好吗?」时,我想大部分设计师同学即使做完了产品分析,也很难回答这个问题。那么,我们该如何做才可以较为准确地回答这一问题呢?

基于这个问题,我们从用户体验的定义出发,ISO 对用户体验的定义有着如下解释:

用户体验,即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受,包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

从定义可以看出,用户体验不仅是主观的,而且范畴非常广,所以在描述时,我们不能仅仅用好/不好来概括。要解决这个问题,要点在于建立一个清晰合适的标准来量化用户体验,体验自查就是在做这样一件事 —— 度量体验。

通过做体验自查,可以达成以下效果:

  • 1. 将用户体验量化,探索设计破局点
  • 2. 帮助设计师更全面地审视产品设计
  • 3. 将产品体验上的问题可视化,更直观地展示体验问题

4.12 工具 —— 设计走查表

本质上,设计走查表通常是设计师在完成设计稿后,用于快速遍历方案、修正遗漏或不周的工具。在产品分析中,我们使用这个工具也可以达成体验自查的目标。通常,我们是需要根据产品建立一套适合自己的交互设计自查表的。如果暂时没有,也可以暂时使用网上成熟的自查表来进行。



4.13 步骤



收集



字段说明

问题位置:

即体验问题发生的位置。

类别:

不同自查表对问题的分类不同,例如用户体验五要素、可用性原则等。

重要程度:

如果采用正向思考,很容易陷入“都很重要”的困境,所以这里一般采用反向分析法,也就是如果不解决这个体验问题,会造成多大的影响。我这里将重要程度分成了三个等级,分别是:

  • 1. 基本没有影响,有替代功能
  • 2. 不解决也可以用,但不太好用
  • 3. 不解决基本/完全不能用

发生频率:

同样是三个等级,需要注意的是,这里不是以时间频率来定义的,而是以「每经历 n 次业务节点就会出现这一问题」的方式来定义的,如果不好量化,也可以使用每次,经常,偶尔这样的词来代替。

严重程度:

严重程度 = 重要程度 * 发生频率

这里要注意的是,我们作为设计师,提出严重程度的判断仅仅是作为优先级参考,但是真正的优先级和排期还是需要产品经理来做。



问题描述:

即对体验问题的详细描述。

整理

首先,对问题进行重新审查和校验,去掉非体验问题、重复问题、补充不完整的问题描述等,然后整理到一起,这就是整个产品存在的大大小小、各种各样的问题了。

然后,我们通过图表对数据进行二次加工,一般采用雷达图或柱状图。

示例 - 雷达图的使用方式



严格意义上说,这并不是标准的雷达图,只是使用了雷达图的图表背景。

外圈:上述表格中的「分类」

数值:上述表格中的「重要程度」

为每个模块/流程各制作一张表,然后将每个问题都以点的形式置于图中,哪个分类问题最多,哪个模块/流程问题最多?哪些问题较为严重亟待解决?一目了然。

4.2 专业名词库

设计的本质是为了更好的解决问题,了解业务是解决问题的基础,也是沟通顺畅的利器。但是想要成为一个业务专家,没有长时间的沉淀上是不太可能的,但是公司一般不会给很长的时间去学习业务,那我们该如何在短期内快速掌握业务知识呢?

在理解业务时遇到的最大挑战就是那些晦涩难懂的特殊名词,如 json 文件,API 等开发中特定的术语。

针对这个问题,在产品分析的过程中,我们可以同步建立一个专业名词库,来记录这些特殊名词,并将这些概念用自己的语言进行描述。这样,在了解产品的同时也对业务有了一定程度的了解。



对设计师而言,相比 C 端的各种炫酷效果,B 端设计很难做的出彩,设计的价值更多是隐形的价值,基本不存在会有人因为你把一个按钮做得好看夸你。从这个角度来说,确实成就感比较低。

但是,通过自己的设计让帮助用户更有效率地完成工作,这何尝不会带来满满的成就感?B 端产品一般是用户不得不使用的产品,作为设计师的我们更应该对自己所设计的产品有着敬畏之心。

最后,给大家分享我很喜欢的一段话,与大家共勉。



本次的分享到这里就结束了,希望可以对大家有帮助。由于文章字数较多,笔者几经修改,仍不免有疏漏错误之处,如发现错误,请读者于评论区或私信指出,不胜感激。

在快节奏的洪流中,保持设计的初心,做有灵魂的设计,我们下篇再见~

作者靳凯杰ah

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


用设计诠释搜索热点

ui设计分享达人

刷刷手机看看今天又发生了什么热点大事,已经成为现代人茶余饭后消遣时间的主要方式,而搜索热点区别于其他社区类产品,最大的优势是能够把大家关注的事件始末及相关知识服务快速聚合起来,帮助用户更全面的掌握信息。设计师作为连接用户与信息之间的纽带,在项目实践中也进行了系列的设计探索,除助力平台高效聚合呈现信息外,并以更丰富的设计层次诠释热点,帮助用户更便捷的获取所需。

///

设计思考及诠释方法

我们先要去了解用户是如何消费热点内容的,基于用户情景认知链路分析用户在事件消费的链路,可以分为三个重要节点:1.热点环境的感知;2.热点事件的理解;3.事件观点的产生。

结合用户的消费路径,我们将设计逻辑框架拆分为三个层级:

1.氛围背景层:分层呈现热度氛围,辅助用户感知热点环境;

2.信息内容层:精细化拼装管理,帮助用户理解热点事件;

3.功能互动层:轻互动玩法设计,激发用户参与抒发事件观点。

1. 热点环境感知:分层呈现热度氛围

从氛围表现层面,助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求,归类了两种设计表现层次:1.日常热度氛围 2. 大事件热度氛围

1)第一个层次:日常热度氛围

主要应用于热点新闻场景,时效性要求高,同时事件热度也会在:“发酵--爆发--消退” 间实时变化,设计根据热度“强弱”程度需求,划分两档视觉展现阶梯,以自动化的方式展现,满足热度的实时变化需求,辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点,“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。

如,“马斯克收购推特”,搜索热度持续上升,以第一阶梯-标签方式展示低热氛围;在 “马斯克收购推特” 的事件热度不断增长,成为热榜事件后,以第二阶梯 - 高热氛围自动匹配 ,通过背景及榜单标签的呈现,明确告知用户当前事件的火热程度。

2)第二个层次:大事件热度氛围

主要应用于热点大事件或运营活动场景,个性化展现要求高,同时事件关注度及重要程度也不同,设计根据事件的关注度及重要程度划分为两档阶梯,以人工配置的方式展现,超强的运营氛围,可以让用户充分感知当前事件的重要程度,“A级氛围”头部叠加场景元素设计用以展现大事件,“S级氛围”整页沉浸式视觉设计用以展现重大事件。

如,冬奥会,重大事件,选用第二阶梯 S级氛围,打造超强的运营大事件会场认知。

///

前置突发大事件氛围设计

近几年我们不断的经历各类突发大事件,如:疫情/暴雨/名人逝世等等,每次突然发生的事件都让设计师措手不及,匆忙产出运营氛围设计方案紧急上线,保时效就很难保障质量,因此我们在想能不能总结事件类型提前储备设计,以备不时之需。

不同突发事件会牵动网友不同的情感情绪,比如河南暴雨,我们为受难同胞担心,为救助工作加油,为逝者哀悼;火箭发射成功,我们骄傲喝彩;名人结婚,我们送上温馨的祝福。不同事件带来不同的情感情绪,也要求设计师要用准确的视觉语言表达。

因此我们在前置设计时也充分考虑了事件情感因素,通过对近一年突发大事件的归类梳理,并推导不同细分场景下的用户情绪,通过情绪分类的方式,总结两种视觉设计表达形式:1.实景图合成效果满足严肃/庄重/权威场景情感需求;2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计,保障突发热点运营设计质效。

截至22年Q1,前置设计已在38个热点场景应用:

2. 热点事件理解:内容精细化拼装管理

为满足用户不同事件场景下的信息需求,设计结合百度搜索:主要内容区(主要需求满足)+ 延展内容区(延展需求满足)的综合聚合能力,通过组件分区布局+精细化规则管理,为热点场景内容的高效拼装打好体验基础。

1)主要内容区

主要内容区,能够帮助用户快速了解事件的主题、时间及主要内容,结合热点事件长期的需求沉淀,设计将主要内容区又细分为主题区域及内容区域。主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件;内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定,业务可以快速选择所需组件进行页面组织拼装,达成分场景个性化满足用户主需求的目标。

如:元宵晚会,热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。

因为有设计拼装规则,不同大事件活动,各场景内容可个性化满足需求,交互布局设计上又可兼顾横向一致性。

2)延展内容区

延展内容区,能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求,选择多个延展内容模板与主要内容区进行拼装,搭建完整页面以呈现不同热点事件内容。

如:俄乌战争-战事场景,脉络卡帮助用户快速了解事件进展 ;冬奥会-赛事场景,数据卡帮助可视化呈现赛事进展;博鳌亚洲论坛-会议场景,百科卡帮助用户科普相关名词知识。

3. 事件观点产生-轻互动玩法强化参与感

通过氛围打造和内容组织,已经达成用户需求满足的目标,但到此截止,搜索结果的体验还是理智疏远单向的,搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析,并采取具体的设计策略逐步引导用户参与互动。

1)互动唤醒 - 吸引围观增强互动意愿

优化前的热搜结果页,用户的讨论内容都是隐藏在资讯落地页评论区内,需要点击进内容落地页内才能参与“围观”或“讨论”,除互动氛围已脱离当前场景外,也削弱了用户对此事件表态的参与积极性。

通过弹幕滚动+输入框组件组合外显的交互设计方式,将用户讨论外露,不仅丰富热点事件搜索场景的内容维度,同时基于从众心理,进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。

2)情绪抒发-轻互动玩法降低互动门槛

而投票表态+弹幕轻互动组合效果设计,能进一步降低用户交互心理门槛,让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法,使用户互动情绪表达更充分。

3)惊喜反馈-强化视效打造记忆点

原有设计风格,无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感,无互动反馈状态仅有互动前后状态变化。

结合热点场景积极外放情绪及庄重内敛情绪,视觉主要从形/质两个维度进行优化升级,并增加互动反馈动效,同时运营可结合具体事件主题配置,综合提升互动惊喜效果,打造产品记忆点。

视觉层:通过更立体的形态和更丰富的层次质感,更精准的表达情感

动效反馈层:以主图形+辅助元素,通过符合场景氛围的动态效果设计,更充分的表达情感

运营主题配置:在日常反馈基础上,增加运营主题配置层级,为特定主题场景提供定制反馈效果

///

写在最后

通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段,助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展,如营销活动、品牌造节等。设计不会止步于此,我们将基于用户需求不断探索深耕,为用户呈现更快速、准确、全面、有温度的搜索热点体验。

作者:百度MEUX

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


筛选篇 | 提升用户决策效率的筛选控件

ui设计分享达人

前言

“少即是多”是经常挂在嘴边的话题,在设计过程中,设计师们都会想尽一切办法去简化交互流程、组件元素及各种设计属性,让用户使用起来更简单。当产品简化到一定程度,就必须要面对其不可简化的复杂性。
诺曼曾说过 “复杂是世界的一部分,但它不应该令人困惑 ”,如果复杂性是合理的,我们应该学会如何去管理复杂,考虑好复杂的问题在流向用户后以何种方式处理,筛选控件就是用户自行处理复杂信息的方式之一,只要是符合用户行为做出的设计,将应有的复杂以筛选的形式呈现给用户,让其自行决定,用户反而会乐意接受。
筛选控件的使用频率非常高,本文根据笔者对各类筛选控件的拆解及自身经验进行分总结,整理了在移动端中常用筛选控件的类型、使用场景以及设计思路,帮助大家在设计中更好的选择适合自己产品的筛选控件。

分享目录

一、现实生活中的筛选
二、筛选功能的重要性
三、常见的筛选类样式
四、筛选的几个维度
五、筛选功能设计准则
六、总结


一、现实生活中的筛选

在日常生活中,我们天天都在跟筛选打交道。设想一下,当你走进超市,在没有任何分类指示的情况下,看到琳琅满目的商品是否会不知所措,答案是肯定的,且不论超市规模大小、商品的多少,相信没有任何一个人愿意在不清楚的情况下花时间去找一个很可能不存在的商品,即便这点时间会很短。
道理还没说完,大家都感觉自己很懂,可依然逃脱不了如今在各种形形色色的应用中找不到自己需要的功能而苦恼,那么这些应用又是谁设计的呢?答案就是「大多数人」。


换言之,如果我们能通过标识牌、平面图指引(模糊查找),询问服务员、记忆指引(精准查找),就容易很多,这些指引路径就完全充当了筛选功能,至于通过什么方式,只能根据人们自身或现场条件自行选择,能满足自己的需求即可。在功能繁多、交互流程复杂的互联网产品中也是如此。


二、筛选功能的重要性

1.筛选的定义

在我们设计筛选控件之前,需要清楚了解什么是筛选,东施效颦不是什么明智之举。筛选,即用户根据自身需求、通过一个或多个特定条件,在已有的内容中快速找到满足自己当前条件的信息,单独呈现的同时、并将未满足条件的信息暂时作隐藏处理,以便用户完成自己的目标需求。
筛选也可以称之为过滤器,是搜索框架的一部分。这里需要说明一点,筛选不同于搜索,它是系统结合用户提出的条件,对内容进行规则性的查找,准确的说,用户属于被动,筛选出的结果在产品侧「精准」、用户侧「模糊」;而搜索则是用户通过明确的目标主动进行精准查找,要么直接找到自己想要的结果、要么对结果不满意,搜索出的结果在产品侧「模糊」、用户侧需要「精准」。说直接点就是,搜索直接查找出结果、筛选只是缩小查找范围(并非绝对,也可以对搜索结果缩小范围)。


2.为什么要使用筛选

在电商应用中,如果有目标的用户更多使用的是搜索,那么没有目标的用户更多使用的则是系统推荐或商品分类,不管是哪种类型的用户,前面虽然已经进行过一次范围缩减,但下一步还是逃不掉要面对的海量商品,这时,不给用户提供选择上的便利,用户很可能因浏览商品耗时过长、选择性困难等原因扭头就走,即便离转化仅一步之遥,也无法避免用户流失的问题。
增加筛选功能就能很好解决这个困局,用户通过筛选、设置接近于目标需求的条件,缩短查找路径,就能从海量的商品信息中快速找到符合条件的内容,大大降低了用户的查找成本,节省了很多查找时间,用户体验得到很大程度的提升,由此可见,为什么要使用筛选,不言而喻。



3.什么时候使用筛选

1)系统定义筛选需求
方向性的筛选:用户通过系统提供的多种类型进行频道切换,还会存在多少子级,可定义为一级筛选。例如订单列表(待支付/待发货/待收货/待评价),优惠券(未使用/已使用/已过期)等,用户从已有的类型列表中选择自己所需。


2)用户自定义筛选需求
精细化筛选:当系统已提供方向性的筛选,用户依然可从分类筛选出的结果中进一步细化。例如针对单个类型的商品列表自定义价格区间、发货地、品牌...等,也可称之为二级次筛选,相比一级筛选,其筛选的结果会更精细化,也更接近于用户的真实需求。


(PS:系统定义筛选条件后,配合用户自定义二次筛选条件以及排序功能,则更容易满足用户需求)

三、常见的筛选样式

1.Tab筛选

Tab式筛选条件大部分在操作前、操作中、操作后基本都会一直显示,有横向Tab和纵向Tab两种,如新闻、视频类型的应用大多使用横向Tab,通过将不同的内容以大的方向、区块进行分类,便于用户随时切换、筛选出不同的内容;纵向Tab更多则是在电商类应用中出现,且会存在多个子级,例如我们在京东购买「鼠标」,则需要在tab分类中依次找到「电脑办公>外设产品>鼠标」进行筛选。


Tab类型主要以大的维度进行筛选,所筛选出的结果可能模糊且信息量极大,如果想要结果更加精准,则需配备其他类型的控件进行二次筛选。

2.弹窗式筛选

操作中以蒙层的方式弹出,其他时候均为隐藏状态。弹窗类型的筛选最大的优点是占用空间小,仅需一个入口,能在有限的弹出空间中从多个维度展示筛选条件,用户选中或自定义对应的筛选项,即可快速筛选出自己想要的信息。

3.折叠式筛选

介于Tab式与弹窗式之间,筛选条件初始为隐藏状态并提供一个入口。点击后展开,期间不影响当前页面的任何其他操作且一直处于展示状态,需经过再次点击才会将筛选条件隐藏。

4.高级筛选

基于自定义筛选条件过多,为满足用户个性化需求,点击后会跳转到新页面操作多个条件进行筛选。相比前面提到的Tab、弹窗更为复杂,对筛选的要求较高。
高级筛选适合用在颗粒度很细的场景,为的是避开其他视觉元素的干扰,让用户更专注于当前页面较为复杂的筛选条件,降低因受其他因素影响而出错的情况。例如:在选择汽车时,需要对服务、价格、级别、排量...等各种情况作出非常细致的选择,这时用高级筛选就再合适不过。


5.筛选、排序组合

筛选、排序组合方式算是商品列表中的标配了,尤其在空间资源有限的移动端设备中,能最大化的将多个控制条件一次性展示给用户,在筛选出结果后再使用排序功能,便于更快找到想要的商品。例如美团、饿了么将筛选与排序控件形成组合,极大的提高了用户筛选的效率。


四、筛选的几个维度

1.单维度

单维度的筛选不管是设计还是操作都相对简单,无需操作确定/下一步按钮,触发筛选条件后会就会更新信息列表,大家最熟悉的订单系统(待支付、待发货、待收货...)即是单维度筛选。
另外,单维度具备短、明、快的特点,为方便用户识别,单个标签一般不超过5个文字,且语义明确,用户不用任何思考就能快速理解。


2.多维度

当产品中的属性过多,使用单维度筛选不仅会降低筛选结果的精准度,还可能会导致用户因反复/重复无用的操作而产生挫败感,已无法满足用户的需求。这时,需采用多维度筛选帮助用户缩小查找范围,让其快速找到符合自己需求的内容。
多维度筛选条件一般以按钮(单选/多选)、输入框为主,有些还会以滑块来控制数据范围。设定好筛选条件需通过重置、确认操作按钮,用来清空筛选条件或进入下一步。在移动端,因屏幕空间有限,一级筛选数量最好不要超过9个,如果太多,建议进行整合或并入二级筛选。


3.多等级(单维度/多维度)

在多级筛选控件中,可以把当前筛选条件的上一级看成是筛选分类菜单,每个等级中可包含一个或多个单维度/多维度的筛选条件,移动端最多不超过3个等级。
从表面看,多级筛选与多维度筛选其本质是一样的,但多级筛选会存在下一级或再下一级,而多维度会将所有筛选条件平铺在空间中。当单维度、多维度筛选还是无法满足用户需求,多等级就能作为最好的延伸。


五、筛选功能设计准则

1.迎合用户需求

在设计筛选之前,需要思考用户为什么要使用筛选、在什么样的场景下使用筛选、以及如何满足用户的心理预期等,有了清晰的用户需求,设计出来的筛选才能更好的帮助用户满足其需求。
以「饿了么」用户点餐为例,使用点餐服务的用户类型虽然很多,不过主力还是来自于办公室白领、宅男/女这两大用户群体,有目标的用户会从搜索、收藏、订单记录等入口直接去购买,但绝大多数用户因长期点外卖的原因,“吃什么”就成了最大的问题,这时如果用户还要“吃”,就必须得使用筛选功能,从Tab分类(模糊)到弹窗式筛选(精准)再配合排序功能满足自己的点餐需求,得出结论:
1)一群不知道“吃什么”的白领、宅男/女用户;
2)需要使用筛选功能解决自己“吃什么”的问题;
3)问题很快得到解决后,对结果及使用体验非常满意。


上面的案例可以看出,用户想要在海量的信息中找到自身所需,从表面上看,最直接、真实的需求就是找到满意的商品去下单。站在产品的角度并非如此,最应该解决的应该是效率的问题,这才是筛选的终极目标,不管用户花多长时间,笔者相信都能找到想要的,但所花费的时间成本越少,满意度就会越高,其产品的可信度、使用粘性、用户体验也随之提升。

2.不同产品不同对待

筛选并非千篇一律,不要一上场就来一波大众化的筛选条件,很多APP首页设计就是最好的例子,什么都不考虑,直接导航栏+轮播图+金刚区+内容推荐...传统的一套流程走下来,结果可想而知。
设计筛选功能时,不同类型的产品需要根据其产品定位、用户目标以及使用场景来定义筛选条件,用户需求是用来设定筛选条件范围的决定因素。例如:购物类产品需要结合商品的销量、评价、价格及知名度等,而新闻类产品侧重于用户偏好、点赞量、热度值来提供筛选,方便用户快速找到感兴趣的内容。

3.根据需求排列优先级

在满足上述两个条件后也不能将筛选项一股脑的挨个排出来,即便是在同一个页面内,也需要结合当前内容的属性对筛选条件进行优先级排序,将用户高频使用的条件按先后顺序依次排列,不重要的也可将其隐藏于某个入口。
以淘宝为例,在「手机」商品列表,筛选条件中首先看到的是品牌,其次是内存、容量...,我相信很少人不在乎手机品牌吧;而在「钢钉」列表中,依次是价格排序、销量...,品牌条件隐藏在了高级筛选中,试问,如果是你购买钉子这种实用性的商品,是在乎价格、还是品牌呢?


六、总结

筛选功能旨在满足用户查找需求,通过缩短用户选择商品的范围,节约查找时间,快速将符合条件的信息呈现出来,并让用户在这一过程中产生愉悦的使用体验,以发挥产品的最大价值,从而增强用户的使用粘性。
至于在设计中该使用何种筛选控件则取决于用户需求和使用场景,设定符合需求的筛选维度及条件,且根据内容属性做灵活变动即可,切记筛选的核心需求是通过简单易用的方式来帮助用户提高操作效率。

来源:站酷
作者:大漠飞鹰CYSJ

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

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

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

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

用户体验设计定义&详细案例

ui设计分享达人

一、什么是用户体验?


用户体验(User Experience,简称UE/UX)这个词是在上世纪90年代中期,由用户体验设计师 唐纳德·诺曼(Donald Norman)所提出和推广。

定义:用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受,包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。




二、可用性原则


可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何,主观感受怎样,实际上是从用户角度所看到的产品质量,是产品用户体验的核心,不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。




01 易学性


指的是用户学习如何与产品进行交互,以实现目标所花费的时间和精力,即用户能否在初次使用产品时完成简单的任务或实现用户目标。




02 效率


用户在使用产品一段时间后,能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例,用户能否快速的下载想要的东西,在同一系列中,可以快速下载更多的相关内容。




03 可记忆性


我们常说互联网是有记忆的,好的产品体验是帮助用户去记忆。用户在体验中,要对一些有意识、无意识的行为进行记忆是一个比较大的负担,如果在一些环节通过系统能帮用户记录,会降低用户的负担。比如在搜索、历史记录、浏览记录等。




04 容错性


用户在使用产品时,发生错误后,能否快速帮助用户识别和纠正错误,帮助用户从错误中恢复的能力。如常见的注册登录,当用户属于邮箱格式不对的时候,给出提示,并且告知错在哪里。如果提示语只是:"请输入正确的邮箱" 用户可能会疑惑,错在哪里。




05 满意度


满意度指的是用户与设计互动产生的愉悦程度,可以是用户使用产品时流畅的交互和优秀的视觉设计,也可以是用户在产品中得到的满足感。比如sir语音交互,王者荣耀等级(满足感)





06 实用性


产品能否提供用户在完成任务时所需要用到的基本功能,例如P图类软件,用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。




07 个性化


在满足实用性的基础上 针对用户提供不同场景下的功能定制,如美图秀秀,在提供图片美化的同时,针对用户不同的使用场景还提供视频剪辑、视频美容等功能。




08 可预测性


用户能够预测到下一步操作或者整个流程的交互,将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。




三、可见性原则


可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。



01 物理功能可见性


物理功能可见性是基于对象的物理外观。在视觉上,这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件,最常使用的就是播放/暂停,上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中,这就是功能可见性。




02 状态可见性


当信息或者列表过多时区分状态的展示,将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来,会极大地破坏易用性,因为人们将不得不进入一个个邮件详情页当中进行确认,才能获取到原本由徽标提供的状态信息,这样的互动非常低效且乏味。




03 步骤可见性


当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤,后面还有多少步骤,完整清晰的流程展示。如果将这些信息隐藏起来,用户会困惑当前进行到哪一步,接下来还有多少步骤。




四、可供性原则


强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素(如滚动条、命令按钮和图标等)的设计必须能够为用户提供足够清楚的建议,让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么,以及如何与它们进行交互行为(点击、长按、滑动 等)




五、反馈


给用户及时、恰当的反馈,是体验设计中非常重要的一项原则;对每个用户的操作都应该有恰当的系统反馈(包含视觉、听觉、触觉)。



01 告知性


明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。




02 动作连接性


当用户产生某个动作时,给予相对应的连接反馈。如大概用户点击某个按钮时,按钮默认的外观与点击后的外观发生变化,结合现实世界的开关去思考(按下 开灯)动作与反馈是连接的,即时的。




六、希克定律


希克定律,是1951年由威廉·埃德蒙·希克首先提出的,认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加。




如京东筛选,在搜索结果页会将筛选条件收起,因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单,并且做好归类,用户能够更迅速的作出决定。




七、费茨定律


费茨定律,是1954 年 由保罗.菲茨首次提出,在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。


T:代表完成移动所需的平均时间

A:代表光标开始/停止时间

B:代表光标移动速度

D:代表从起点到目标中心的距离

W:代表目标的尺寸


简单来说就是指:随着目标的距离增加,移动到目标的时间更长,并且随着目标的尺寸减小,选择目标的时间也会增加。


所以在界面设计当中会遵循越重要的功能,占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。




屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中,所以我们在进行产品设计的过程中,会将常用/重要的操作放置在屏幕边缘处,便于用户操作。



八、神奇数字 7 ± 2


神奇数字7±2法则是1956年由 乔治·米勒 所提出的,根据乔治·米勒的研究,人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。




由于人类的大脑处理信息的能力有限,大脑会将复杂信息划分成 块 和小的单元。如:京东和每日优鲜的分类处理。




人类短期的记忆一般一次只能记住5-9个,所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。




九、复杂守恒定律


复杂守恒定律是1984年由 拉里·泰斯勒 所提出的,也称作泰斯勒定律。认为每一个产品设计的过程中,都有其固有的复杂性,存在着一个临界点,超过了这个点产品设计的过程就不能再简化了,你只能将固有的复杂性从一个地方转移到另外一个地方。


在产品设计中,会尽量的简化界面。当功能过多时进行一个整合的处理,跳转或者滑动操作。如查看更多或者常见的汉堡导航。




十、新乡重夫:防错原则


新乡重夫认为遗忘有两种:一种是疏漏,另一种是忘却。他建议采用一些措施来预防产品的缺陷。


防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;比如常见的信息输入状态,未输入置灰不可点,输入变为可点击状态。




微信拍一拍:微信在出了拍一拍功能之后,很多时候点击头像的时候会不小心拍到别人,现在的拍一拍是可以撤销的,在客户端鼠标悬浮上就可以进行撤回,移动端长按出现撤回弹窗,两分钟内有效。




微信朋友圈动态:点击返回图标会出现的弹窗,避免误操作。利用防错原则,可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。




十一、奥卡姆剃刀原理


奥卡姆剃刀 定律 :它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 (William of Occam,约1285年至1349年)提出。 这个 原理 称为“如无必要,勿增实体 ”,即“ 简单有效原理 ”




01、只放置必要的元素


不必要的元素会降低设计的效率,不管是实体、视觉或者认知上,多余的设计元素,有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息,可以用「更多信息」来实现。如夸克浏览器,首页只放置重要功能 搜索 和几个整合内容的图标入口。




02、减少点击次数


让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件,在播放音乐之后进入其他的tab,在上面都会悬浮播放/暂停的区域。都能够随时操作。




03、“老人”规则


就是产品的易用性,如果年纪大点的人,也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验,简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内,并且抖音会根据用户的停留时长等推送用户感兴趣的内容。




04、减少“段落”个数


页面的使用率,当你想要在一屏新增很多内容时,页面的布局就会变得拥挤和区域变小,容易过于干扰用户做出选择,重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口;uc浏览器首页内容过多,当用户想要使用搜索功能时很容易被其他内容干扰。




05、给予更少的选项


前面说到的希克定律说到,当选择的数量越多,用户做决定的时间就更长。做过多的决定也是一种压力,在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示,马蜂窝根据产品属性放置了6个重要的功能入口,便于用户更快的去选择所想要的功能。




十二、设计和艺术的区别是什么?


最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是:艺术抛出问题,而设计解决问题。


我们设想一个场景,当你在艺术展厅站在一副名画面前,你所思考的是什么?是惊叹画家的画技还是整个画面给你的感觉是一种故事,你会不会思考艺术家在作画时的心情,处境,为什么要这么去画?想表达怎么样的情感?



然后我们再设想一个场景,同样在艺术展厅,你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧?因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。


原文地址:站酷
作者:左言右设

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计心理学-15种用户体验法则

纯纯

一、认知负荷


定义:

认知负荷是完成一项任务所需的精神努力总量。您可以将其视为用户与产品交互所需的处理能力。如果需要处理的信息超出了用户的处理能力,那么认知负荷就太高了。


案例:

造成用户认知负荷的的原因大多都是,产品在交互和视觉上过于复杂,设计的统一性不够,导致用户在使用时不断进行思考无法形成习惯


例如移动端中的空状态,目的是为了引导用户完成任务,在设计时无论是文案展示与视觉表现都应简单明了、层次分明、视觉统一




二、锚点效应


定义:

用户获得的初始信息会影响后续的判断,用户对某件事做出判断时,会不自觉的将开始看到的信息作为衡量标准。


案例:

在日常生活中锚点效应非常常见,例如平常不带帽子,偶尔带帽子出门的你,走在大街上会发现挺多人都有带帽子,因为心理活动是把带帽子这件事作为起始衡量,而你刻意的在寻找与帽子产生共鸣的事


在产品设计中最典型的就是会员体系,例如某视频平台的会员价格默认选中的那一栏会比其他的价格低,那么用户在使用时心理会默认这是会员的价格,相对应其他更高的价格只是作为衡量这个最低价格而存在



三、诱饵效应


定义:

又称对比效应,指人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力,通过对比诱导人购买商家想让他购买的商品。


案例:

有一位著名的行为经济学家他叫丹·艾瑞里教授,他曾经做过一本《经济学人》杂志的定价策略,这里不细讲感兴趣的可以搜一下。诱饵效应运用最多的是在超市场景,我们经常看到超市的货架上会有看起来很实惠的物品在,如一袋泡面可能是5元,而旁边还有3包泡面一起出售可能也就12元,然后开心的拿走了,这就是诱饵效应,那一袋5元的就是诱饵,商家的目的就是为了让你买走12元的


而在线上产品策略中运用最多的则是电商场景,如下图中的图书商品,单价610元,定价980元,三件单价488元,这里的单价和定价都是诱饵,目的是为了让用户同时购买三件商品,而用户内心是欣然接受因为更划算




四、注意偏差


定义:

在检查所有可能的结果时,我们倾向于关注一些看起来合理且熟悉的事物,从而忽略了其他结果。


案例:

13年9月twitter公司宣布IPO,当时11月份才开始交易,但是在这两个月时间里有一家名为twweeter的公司三天内涨了13倍,只是在名字上与推特公司极为相似,但实际业务毫无关系,机构就是利用用户的注意偏差让不了解实际情况的投资者只看到相关性,而另一面的不相关的结果用户自然的忽视掉


在产品设计的客服助手中,就属于注意偏差,我们习惯的认为向客服回复人工等关键字时,会自动切换人工客服,而产品则会设置一些虚拟的智能客服来节省成本,而用户在这个过程中则忽略了细节,误以为智能客服是人工客服



五、菜斯托夫效应


定义:

前苏联前苏联心理学家菜斯托夫提出特殊事物才易被人牢记。也就是说,有个性的人、与众不同设计得商品、不寻常的事情,都会让人留下更深的印象。


案例:

生活中我们很难记住某个点或某件事,但是当这件事足够突出拥有独特的个性我们便会深深印在脑海里,比如一串字符ezol4tpmb,我们最容易记住的是4,因为他是唯一的数字,在比如说让你去记忆国内某些城市的特点,如西安、开封、浙江我们想到的就是秦皇陵、包青天、西湖等著名具有特征的地点,因为这些事物比较特殊更容易被记住


在品牌设计中菜斯托夫效应运用的比较广泛,如何通过视觉的表现让用户对产品更加的印象深刻,对此就衍生出产品IP、品牌符号这种具有特殊意义的标识便于加强产品印象



六、菲茨定律


定义:

任意一点移动到目标点的时间与该目标点的距离和大小有关,距离越远时间越长,目标越大时间越短,公式: 

T = a + b log2(D/W+1)


案例:

在交互设计中经常用到此定律,无论是正向还是逆向此定律都能够很好的运用到交互中,如mac系统上的关闭按钮,始终在左上角并且很小,我们的鼠标在右侧,移动到左侧上角时间会随之变长,因此这一交互结构就避免了用户误操作关闭软件


再例如移动端中会把重要的按钮操作放置在屏幕右下或者居下,因为大多数人是右手使用手机,因此在使用时右手拇指距离点击区域会更近



七、幸存者偏差


定义:

幸存者偏差是指把一些事的不同角度的人员筛选出来,筛选出一部分人进行采访从而制造舆论,观察者只能看到事物的一面,而另一面则被忽略,也被称为以偏概全


案例:

某次春节记者采访到一些在火车上的群众,聊一些购票的过程以及买到票的心理感受,最后向公众公布出今年回家的票大家都买到了,但这个过程中却忽略了那些不在车上或者没买到票的人们,因此就以偏概全的传输单方面信息,这些被采访到的人们就是幸存者


在做产品时经常会听到用户画像这个词,用户画像就是利用幸存者偏差而把广大的用户数据通过典例呈现,当然这个幸存者的样本必须是压倒性的庞大,否则就掉入幸存者偏差的陷阱



八、邻近法则


定义:

彼此靠近或接近的对象往往会组合在一起,相近的元素可以建立关系,人们会不自然的把相近的元素看作一个整体。


案例:

在UI设计中,经常会用到邻近法则进行设计,如一些组件、卡片的建立,由不同的元素组成变成一个整体,其次邻近法则能够有效的用户层级的划分,如下图中的一些卡片、icon进行规律的排布最后组成一个整体,与上下模块的层级有效的区分



九、特斯勒定律


定义:

特斯勒定律又称复杂性守恒定律,他指出对于任何系统都存在一定的复杂度并且是无法避免的,问题是谁来处理它。


案例:

在任何产品设计中无论是功能还是流程都存在一定的复杂度,依据特斯勒定律有些复杂度是无法避免的,那么需要我们在设计中去解决这些问题,保证在用户的角度来看它是合理的简单的


像我们常见的话题功能,输入#自动引导出关键词供用户填写省去用户输入时间,再例如b站的一键三连,长按点赞的同时会把收藏、打赏功能一并完成;结构层面也会用到此定律如产品中的设置页面,按照不同的维度进行区分如系统维度、反馈维度、功能维度帮助用户更快的完成操作



十、帕累托原则


定义:

它是由意大利经济学家帕累托提出,它指出对于许多事件,大约80%的影响来自20%的原因


案例:

在设计中我们会发现一个产品页面有几十上百个,对于用户而言能够提供价值的可能也就那么几个功能页面,这几个页面可能占总产品的20%左右,那么我们在做优化的时候则需要去考虑如果把20%做好把它的价值放大


再往细了说,例如打车软件在这个页面中能够为用户提供核心价值的区域则是地图区域和选择目的地区域,那么在做优化体验时应当着重关注此区域,而页面中剩下的区域则受上面20%的影响



十一、社会证明


定义:

社会证明是用户用来确定行为方式的便捷捷径,当他们不确定目标时,他们最有可能认为并接受他人的行为是正确的,人数越多,行动似乎越合理。


案例:

最近抖音在评论区新增了一个踩一下与点赞进行互补,但是奇怪的是我们进行踩一下时并不会展示具体数量,试想一下当点赞的数量大于踩一下的时候,我们有时就会被影响认为这条评论值得点赞


再例如购物中的评论排序,像京东把好评优先展示在前面,当好评的数量大于其他维度时就会影响用户判断,用户会把数量多的好评当作参考依据认定这个商品符合自己的需求



十二、好奇心差距


定义:

指用户知道的内容与他们想要或需要知道的内容之间的空间,这个空间叫做差距,差距会导致痛苦,要消除痛苦,用户需要填补知识差距。


案例:

例如在做产品设计中都会涉及到登录注册流程,那么对于有些产品则需要在登录注册阶段大量收集用户信息完成更好的推荐策略,但对于用户而言用户的认知是固有的流程,如填完手机号就收到验证码,最后完成注册进入首页,如果说中间的过程需要收集用户信息,则需要对应的解决方案来弥补用户的心理差距


即可App在收集用户信息的阶段使用了偏趣味性的一些设计表现,在用户的这个空间差里面来缓解用户的情绪,激起用户填写欲望



十三、心智模型


定义:

心智模型是对某人关于事物在现实世界中如何运作的思考过程的解释,它是对周围世界的表示,可能准确或不准确,用户认为他们对您的产品的了解会改变他们使用产品的方式。


案例:

心智模型其实就是我们对未来发展的预测,内心对要发生的事情进行预判,然后采取行动,例如我们要购物想到的就是淘宝、京东,想到吃饭可能就是美团、饿了么,这些产品就打入了用户的心智。往细了说心智模型是一个广泛的概念,它还包括行为模型、实现模型、表现模型


像我们常用的聊天软件,在聊天过程中撤回消息,就会有个重新编辑功能,这就是满足用户的心智模型,预判用户的操作例如微信、钉钉、飞书



十四、拟态认知


定义:

拟态是在页面中模仿现实世界物品,通过它的外观和交互模仿现实,拟物化适合用来让用户适应新的页面和技术形态。


案例:

我们在做页面时都会涉及到图标的绘制,那么那些具有业务属性的图标则需要通过拟物的方式进行呈现,对于用户能够降低理解成本,如经典的红包、自如的金刚区等



十五、奇点效应


定义:

与群体相比,用户对个人的关注不成比例,与大型抽象群体相比,人们更愿意同情一个单一的、可识别的人。


案例:

这个如果用逆向思维来想的话,类似于我们说的“对抗性人格”在大多数人都对一件事或事物看法一致时,出现一个不一样的声音,试想一下我们在刷短视频时评论区总有那么些人与大多数人的看法不太一致,这就是奇点效应


在设计中体现最多的是等级体系和勋章体系,一方面为用户的攀比心理,另一方面则是奇点效应,这类用户的想法就是为什么要一样,为什么不可以独树一帜。


       原文地址:站酷
作者:爱吃猫的鱼___

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


轮播设计总结-提高用户点击

ui设计分享达人

提到轮播首先可能想到的是广告,我们经常在移动端首页或网站首页会看到各式各样的轮播banner,不管在移动端还是网页上通常点击数据都是非常差的,本篇文章带你深入了解banner轮播。


如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。


本篇文章通过以下几点探索轮播的特性,预计阅读20分钟


目录

1、用户真的使用轮播吗

2、轮播的轮换形式

3、轮播的进度展示

4、轮播定位

5、轮播的切换

6、对轮播进行分类

7、使用缩略图进行预知

8、轮播异形化

9、轮播时间

10、总结


一、用户真的使用轮播吗

用户是否对轮播有感知,这个则需要根据不同的场景进行判断,包括每个产品中的每个轮播对用户用户的定位也不相同,常见的应用场景品牌曝光、活动营销、产品展示,每个场景下相关的数据也不相同。


促销轮播banner


品牌推广轮播banner


产品介绍轮播banner


同时还有个关键因素,轮播的占比,这里以pc端为例若是产品是以品牌效应吸引用户的,大多轮播是以大的屏幕占比为主通常会占首屏的50%,如果是以营销、内容为主的产品,轮播通常以16:9、7:4的常规比例进行展示。


轮播的页数

用户在使用产品时会默认忽略轮播区域,一般轮播都会有自动轮换机制,一定时间后自动轮放下一张banner,那么每当页面上进行轮播时便会吸引用户进行关注,效果上会有一定的提升,所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。


还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。


如果banner是作为内容传播希望用户通过banner了解内容,那么则要避免放在最后一位置,对于用户而言最后一张轮播路径过于长,并且用户很少会手动滑动banner。


国外一家公司在针对轮播中进行了相关的研究测试,随着页数的增加用户的点击逐步下降。

那么如果想让产品中的轮播更具有效果,则需要根据不同的场景设定策略达到目的。




二、轮播的轮换形式

不管在移动端还是手机端,轮播都有各种交互形式和尺寸,以pc为例在交互上会多样化一些,常见的几种则是通过滚轮滑动、通过点击切换两种。


如下图某艺术网站,它则是通过鼠标滚轮进行切换轮播banner,并且banner的占比也是铺满首屏,这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点,同时也符合用户目标。



在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换,并且占比也是铺满首屏,在医美领域用户更关注美感,而轮播形态也是符合用户的心理预期更加沉浸美观。


而在移动端轮播的形式就比较统一,大多都是自动播放+手指滑动进行切换。




三、轮播的进度展示

在网页中轮播都会有当前的定位点,许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标,不用一张一张切换,但是在有些产品中会忽略这一点,设计中会做的非常小导致用户在点击上可用性不太友好,如下图中的banenr进度点设计上过于小导致点击上有些阻碍。





如以下网站去除进度定位的方式,通过缩略图预览来告知用户下一个banner的内容,空白区域也可以添加缩略图引导介绍等关键信息,帮助用户提前预知在体验上相对较好。

以下国外某网站在进度定位的设计上采用了标签文案方式进行设计,能够帮助用户更加全局的了解banner内容




四、轮播的定位

定位主要是用来指示当前轮播的进度,像上图中讲的便于用户更加全局的观看banner的张数和当前进度。


以下网站的设计中则把定位与进度相结合,进度条展示该banner预计多久会切换下一张,对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。

以下是某个国外网站,不管是pc还是移动端都在轮播底部添加了水平条,告知用户当前位置


随着市场上产品同质化严重,产品的竞争力也更依赖体验,在下图中的数据可视化的网站上,在进度条上就利用了产品的特性以饼状图的形式进行展示。






五、轮播的切换

在刚才上面举的例子中很多优秀的网站在设计上都很有创新性,但是需要注意一个点,在轮播中不只有自动播放,还需要考虑用户手动切换,因为在实际用户浏览中可能会对产品的播放时间达不到预期,此时则会使用手动切换,除去可点击的进度点,还需要上一张和下一张的入口切换。


在此基础上需要注意,在处于最后一张banner时,下一张切换还能不能点击,第一张时上一张切换还能不能切换,这个取决于产品特性和轮播张数,如果轮播张数过小的话则需要进行循环播放,如果过多的页数则第一步和最后一步不可点击。

切换的距离和位置

上一张和下一张的距离远近取决于banner的大小,如果轮播banner占比较大时则需要考虑用户的操作时长,距离越短时间越快,为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出,便于用户寻找。


如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大,保持视觉平衡,因为小区域banner用户能够更加全局的观看,在使用上不会犹豫。




反观移动端在轮播中除了展示banner进度外很少展示切换按钮,移动端更加依赖手势交互。


六、对轮播进行分类

当轮播banner过多时利用标签进行分类,用户通过点击标签进行查看相关的轮播组合。


此方式更适合一些电商平台、新闻网站这种内容过多的产品


如下图国外社交媒体网站则使用了标签进行分类,此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。


七、使用缩略图进行预知

在banner首屏中,显示的内容越多,越能激发用户进行点击,像上面讲过的农业产品网站就使用下一张预览图的形式进行展示,当然不仅局限于这种形式,如下图中的餐饮网站把所有的轮播banner展示给用户观看。


相对于缩放图,图标展示效果上也较好,空间占用更少,使用这种方式需要谨慎,对图标的识别性要求较高,我印象中能够使用的这种方法的网站是苹果官网,让产品抽象化展示。


在移动端也存在这种设计手法,但是基于分辨率原因移动端的缩略图展示过少,最常见的如下图中的马蜂窝和企鹅电竞。






八、轮播个性化

轮播最大的缺陷则是像刚开始讲的用户会默认为广告,对此可以使用个性化设计突破用户心理障碍,使轮播banner更具备亲和力。


如下图中的数码科技网站,利用产品与背景的结合营造出一种功能性的展示。


再例如下图中苹果官网入口,结合百度的定制化功能在大搜中进行个性化处理,把常规的banner轮播以功能卡片形式进行展示,同时卡片承载产品动画引导用户进行点击。


苹果官网进入后随意点击产品介绍页后会发现,苹果把轮播结合鼠标滚轮营造沉浸式观看,每个屏效内都展示产品一个功能特点,打破传统banner的展现形式。




九、自动轮播时间

自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级,如我们平常使用产品时会忽略banner广告,我们会更加关注移动中的东西,特别是在移动端上通常是banner进行轮播时才会关注。


谷歌设计团队曾对banner轮播的时间进行测试,测试结果得出5s-7s的轮播时间最佳,在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。


如下图谷歌商店的轮播时间设定在6s。

同时还需要注意,在自动播放的过程中如果用户鼠标hover上去后,则需要判定播放暂定,避免用户错过感兴趣的内容。




十、总结

本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍,在实际产品中轮播有很多可用性上的问题存在,我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。

文章来源:站酷   作者:爱吃猫的鱼——

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


产品体验思考

ui设计分享达人

一、好的收藏体验该怎么做?

用户喜欢在网上收藏各种东西,把收藏到的东西占为己有,满足自我的占有欲,每个用户都为此而乐此不疲。

很多互联网产品在用户点击收藏后,让用户去选择收藏夹。其实用户并不喜欢去选择,他们只想简单的把自己喜欢的东西收藏下来。



选择本身并不是一件很容易的事情,尤其是对于那些有选择困难症的人来说。实际上,我每次都是选默认那个。

这并不是一个好的用户体验。


微信收藏润物细无声

当然也有一些做的很好的体验,比如微信的收藏,收藏后会出现一个“收藏成功”的非模态反馈。

同时可以添加标签,但这个并非强制,为了满足那些有这种需求的用户。添加标签的目的是为了方便用户在日后的检索。



在收藏列表,微信会根据收藏的内容自动分成链接、文件、图片和视频等,最近使用位于第一位。

也就是说并不需要用户去创建自定义分类。


你也可以搜索标签来找到之前收藏的内容。通过这些方式基本上满足了大部分用户的需求。



拼趣(pinterest)智能识别收藏夹

网站会根据你采集的图片在极短的时间内,自动识别出图片对应的收藏夹类型。可以直接采集到对应的文件夹。

然而经过测试,经常会出现误差。因为图片的分类其实很复杂的,属于高度自定义,很显然,智能识别并不是一个好的解决方案。



花瓣的快速采集

花瓣是一个设计师收集灵感的网站,该网站常见的用户使用场景是,设计师在浏览素材时,会大量采集自己感兴趣的素材,但每次都要选择文件夹,非常繁琐且低效。

后来花瓣网加入了快速采集的功能,其逻辑是网站会默认选择上一次采集的收藏夹,这大大提高了用户采集图片的效率。

而如果你需要选择其他文件夹则可点击普通采集。这两种采集方式满足了设计师的不同需求。


二、互动信息的隐私保护

社区类产品有各种点赞,收藏等互动信息,但用户又不想被别人知道这些信息。

因此,在规划产品时需要考虑到用户互动隐私的保护,这是用户侧的刚性需求。


私密的点赞列表

抖音个人主页的点赞列表,我记得刚开始是公开的,且不能设置为私密。

用户点赞的视频会出现在这里,却少有人希望这些信息被别人看到,总有些点赞视频你并不想被别人看到。

如果点赞列表可见,那么用户在点赞的时候就会有所顾虑,这不利于平台的互动率。


特别是随着抖音上熟人也越来越多,强关系社交场景在渐渐加强。


抖音后来也发现了这个问题,把它设计成了默认隐藏。(当然可以自己设置为公开,但只有极少数用户会这样做。)



由于点赞是私密的,用户可以随心所欲的点赞自己喜欢的视频,毫无社交压力。


这是为何?

源于人性心理学:窥私欲。人人都喜欢窥视别人的隐私,而不喜欢自己的隐私被窥视。

不然为何如今的QQ空间基本上都设置了权限,毕竟,谁想被别人窥视当年那个煞笔的自己呢?


公众号“在看”和视频号“私密赞”的逻辑

现在订阅号打开率越来越低,朋友圈分享曾是订阅号流量来源的一大入口。

朋友圈早已沦为了一个人设打造的阵地,现在的人发圈越来越谨慎。

用户似乎越来越不愿意在朋友圈分享文章了,除非是有利于自己人设打造的内容。

为了减轻用户的这种社交压力,微信推出了“在看”的功能。


用户点了“在看”后,此文章会出现在看一看这个模块,且七天前的分享将不可见,这就相当于一个弱化版的分享功能。



这将大大减轻用户分享的社交压力。对于公众号主来说,相当于增加了一个流量入口,激发他们创作更多的内容。


视频号点赞也是同理,会被朋友看到,导致用户在点赞的时候就会有所顾虑。


他会考虑,我点赞了这个视频,我老师、上司、父母、亲戚、朋友会不会看到?他们会怎么想?


但他在抖音上点赞是没有这么多顾虑的,单纯的喜欢就行。


第一,抖音是弱关系平台;

第二,抖音上的点赞默认是私密的。


因此,微信才推出了私密赞的功能,需要长按才能触发。

这并是一个优雅的解决方案,一是操作成本有点高,二是用户存在较高的学习成本。



微信作为一个强关系社交场景,这正是微信与抖音不一样的地方。

以上两者的目的都是一致的,那就是为了减轻用户的社交压力。


三、确定按钮放左边还是右边?

同时用过mac OS和windows系统的用户不知是否发现,这两个操作系统的弹窗按钮“确定”和“取消”的位置是不一样的?



mac的弹窗按钮确定在右,取消在左;而windows的刚好反过来,确定在左,取消在右。


为什么会有这样的差异?哪一种更加合理?


模态反馈定义

在交互设计中,这种弹窗叫做模态反馈,艾伦·库珀在《About Face 4》中提到:模态模式一种临时模式,它通过遮罩将用户当前看到的内容和之前看到的内容区分开来,界面中只有 popup(弹出层)组件具有可交互行为,需要用户操作才能退出该模式。模态的优势在于让用户专注于完成某个任务而不被干扰。


哪个优先级更高

首先我们要明白这两个按钮哪个使用率更高,一般来说,“确定”的点击率要远远高于“取消”。这是因为大多数用户对于自己的操作行为是明确的。


所以这两个按钮在视觉上一定要做出差异化,“确定”的视觉层级要高于“取消”,这样用户才会一目了然,不会感到困惑。


两者背后的逻辑差异

回到刚才的问题,逆向思考这两者背后的逻辑差异。


windows弹窗的背后逻辑:

人的阅读习惯是从左到右,所以把点击率更高的按钮放在左边更加符合人的正常阅读习惯。


mac弹窗的背后逻辑:

根据一般的任务的流程,“取消”在左代表返回上一步操作,而“确定”在右代表进入下一步任务流程。


看上去似乎都有道理,这两种交互方式本身没有绝对的对与错。只要在整个系统中保持一致性,让用户形成操作习惯就没有啥问题。


从个人的使用习惯而言,个人更倾向于mac的这种方式。



四、手机的实体键怎么放才合理?

手机上的实体按键电源键和音量键通常有两种分布方式,放在左右两侧或都放在右侧,前者以iPhone为代表,后者以安卓手机为代表。



这两种方式有什么区别?哪种方式更加合理?电源键和音量键属于完全不同类型的两种按键,且都是高频使用,它们的功能自然不用赘述。


用户场景

我们先来看看都放在右侧会有什么问题,以下使用场景相信用户不会陌生:


用户a,在地铁上玩王者,声音有点大,想把声音调小,结果不小心按到了电源键,导致手机息屏,而此刻你正在激烈的团战,内心有一万只“草尼玛”奔腾而过……


用户b,每次按电源键(解锁或锁屏)都会不小心同时按到音量键,结果直接就截图了!这种情况发生了不止一次,因为这两个按键离的太近了……


用户c,自家的小米11,电源键位于中间位置,右手拿时大拇指会触碰到,左手拿时中指刚好会触碰到,而电源键又有指纹锁功能,导致手机在不断的解锁,而你毫无察觉……


通过上面的案例,可以得出结论:若按键都放在右侧,会导致用户经常误触而造成不必要的麻烦。


放在两侧就不会有这样的问题。可以有效防止误触,尤其是盲按,不用担心按错,减少误操作的几率。


电源键并非一开始位于右侧

值得一提的是,iPhone手机的电源键一开始是位于顶部位置,这是为何?



因为刚开始时手机都是小屏幕(3.5~4寸左右),对于iPhone5S及以前的手机来说,单手操控,拇指Home,食指电源,刚刚好。


所以电源键放在顶部既按得到又可以减少误操作。


后来随着手机大屏的趋势(4.7寸以上),这个时候单手已经不方便按到顶端了,从6代开始就把电源键放在右侧了。


但无论是哪种方式, 两个按键都是分开放。


按键不在中间的原因

还有一个小细节,iPhone的实体键不是在右侧正中间,而是在靠上的位置。



iPhone设计理念是单手持握,并且大多数人右手握手机,大拇指经常会碰到右侧边框,若果放中间,这样会造成误触音量键和静音键。


其实上面的案例3就已经说明了按键放在中间的弊端。


我想起了当年的锤子T1,左右按键一样大且位于两侧的中间,这是典型的为了追求完美的对称而向用户体验妥协。

iPhone从初代开始就已经建立了自己的设计理念,不管是工业设计还是界面设计,并沿用至今。



五、iPhone静音键有存在的必要么?

从初代开始,iPhone机身左侧音量键上方就有一个静音键。

这些年来,iPhone一直在减少各种实体按键以及外部接口,比如3.5mm耳机孔、home键。

但直到如今这个静音键却一直保留下来,为何iPhone对于这个按键情有独钟?



静音键开启后,任何来电或通知都是无声的,震动也会消失。

在无需点亮屏幕的情况下实现一键静音,方便快捷,深受用户的青睐。


哪些场景用户会开启呢?

根据自身的使用习惯以及用户研究,无非以下几种使用场景,比如看电影、开会、上课等:


1.进电影院看电影前,我一般都会拨一下,避免在看电影的过程中被来电铃声打扰,影响了自己和别人观影。

2.开会的时候也会拨一下,以防在开会的时候突然被来电铃声所打扰,避免不必要的尴尬。

3.学生党在上课前一般也会开启,这样整节课都不怕打电话进来了。


总之,就是不希望自己的手机铃声打扰到自己和别人,带来不必要的麻烦。


如果是虚拟静音键,需要先解锁手机,对着手机屏幕一顿操作。

而实体键不需要这么麻烦,可以盲操作,放在裤兜里都不影响操作。


安卓手机为何没有实体静音键?

这个按键这么重要,却很少看到安卓手机上有(除了一加基本上没有)。

实体静音键并非苹果首创,之前的Palm、Blackberry(黑莓)早已有这样的设计。


可能的原因是安卓控制中心很早有静音按钮,甚至有些定制系统还可以把静音按钮直接放在桌面上,设置静音非常方便,也就没必要再多加一个实体键了,显得多余又徒增成本。


一加三段式按键

上面提到过的,作为安卓阵营唯一的静音键,一加手机引以为傲的三段式按键,该设计可以通过物理键直接实现在静音、免打扰与正常模式当中快速切换。



但个人认为这个设定复杂了,三种模式远比两种模式复杂。用户并不一定能搞明白,有一定的学习成本。


iPhone设计静音实体键的初衷

在早期,iPhone的控制中心并没有静音按钮,想要设置个静音并不是一件容易的事情,而这个功能又是必须的,苹果索性直接做了一个实体物理键。


这样静音的时候只需要把静音键拨过来就可以了,一步到位,使用体验也很好,所以一直保留至今。


虽然现在iPhone的控制中心已经加入了勿扰模式,但考虑到老用户的使用习惯,以及品牌调性,苹果对于这个实体按键的去掉还是显得很谨慎。


考虑到之后iPhone在防水、机身内部空间的改进,不排除苹果终有一天会取消iPhone上这个静音键。


静音键的缺点

静音键虽好,但也并非没有缺点。用户有时候会无意中触发这个按键而不自知,或者开启后忘记关闭,导致错过了一些重要的电话。


静音并非绝对

虽然开启了静音键,但并不是绝对的静音。如果是闹钟,铃声还是会响起,因为闹钟的优先级要远高于静音模式。

苹果这是考虑到了如果有用户不小心触发了静音键,或者开启后忘记了关闭,害怕用户耽误了重要事情。

这就很好的解释了为何明明开启了静音模式,却还可以调解音量大小的原因所在。细微之处方见真功夫。



六、经典的旋钮式交互

在日常生活中,旋钮是个很常见的东西,比如音箱,微波炉,收音机,老式电视,车载旋钮……

在机械产品上,旋钮凸起的把手和它下面的圆盘刻度,是最明显不过的旋转暗示,符合人的自然感知。



旋钮式交互是个人非常偏爱的一种交互方式,我认为这种交互跟iPhone的home键一样经典,主要原因有三:

1.操作简单

旋钮操作简单,看到这种按钮,一岁小孩子都会忍不住用手去抓。对于用户来说,几乎不需要学习成本。

2.尽在掌控

在旋转的过程中,可调大调小,一切尽在用户的掌控之中,用户感觉到有十分的安全感。

3.即时反馈

在调节的过程中,调大调小都能立刻收到即时的反馈,这是用户最喜欢的交互方式。


我们在触摸屏上很少看到这种旋钮式交互,因为这种交互是要建立在抓住旋钮实物的感受。

而触控屏是个二维的世界,没有真实抓握的手感,无法还原出三维世界的真实手感。


汽车上最常见的旋钮就要数音量和空调了。然而自从特斯拉在车上推广大屏幕后,越来越多的国内厂家开始盲目跟风,把绝大部分的功能按钮集成到屏幕中,比如空调,不仅不方便,行车中使用还容易造成危险驾驶。



车上的触控体验跟手机上是完全是两码事,使用场景也完全不同。最大的区别在于后者没有安全问题。

都知道开车不玩手机,可是行车时操作中控屏跟玩手机有什么两样?


车载旋钮有什么优势?

1.驾驶更加安全

对于驾驶员来说更加安全,通过旋钮调节空调,熟悉后完全可以实现盲操,边开车边操作毫无压力。

如果是触控屏,你必须看着屏幕,一顿操作猛如虎,而在开车过程中眼睛哪怕离开前方一秒钟就意味着危险。

而安全是汽车驾驶的重中之重。

2.更加真实的反馈

用户的操作有真实的物理反馈,旋钮阻尼。

屏幕上虚拟按键反馈根本无法与实体旋钮相提并论。

3.更加稳定的机械结构

软件系统用久了会变卡,可能会死机,难免会有bug。而这些不稳定因素将成为汽车驾驶的潜在危险因素。

一旦屏幕失灵,或者系统死机了,那所有按键都失效了。

虽然特斯拉为了提升其车载系统的稳定性下了很大功夫,但是问题从来都没有停止过。

但是硬件基本上很少会出问题,物理旋钮才让人100%放心。



无论厂家如何吹嘘,虚拟屏幕按键在大多数情况下都不会比实体按键有更好的使用体验。

因此,有一些实体键出于安全驾驶的考虑还是应该保留,将各种功能按钮都集成在屏幕里并不见得是一个明智的选择。盲目的把实体按键变为触摸按键存在安全隐患。
文章来源:站酷   作者:CdzhcHappy

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

产品用户体验案例分析

纯纯

目录


1.百度网盘 :会员标识

2.当当:搜索记录隐藏

3.当当:分享动效 ➕ 一键制作朋友圈分享海报

4.抖音:点击复制 ID

5.飞书:效率工作—语言自动转化

6.美团:优惠卷新到提示

7.墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍未上线)

8.起点读书:长按可进行互动

9.腾讯视频:亮度调节的动效设计

10.微博:点赞动效设计

11.知乎:删除搜索记录

12. QQ:可隐藏会话

13. QQ 音乐:搜索入口的听歌识曲

14. QQ 阅读:长按复制的放大设计


一、百度网盘:会员标识别


在开通会员后百度网盘会进行对于应用图标的更换,使得应用图标更加高级,在分享链接时也会加入会员分享的标识。


属于用户激励体系中的一个板块,增强用户的标识和身份。




二、当当搜索记录隐藏


搜索隐藏功能设定。


我们在使用各大应该的搜索功能时总会遇到过这样的场景,当你要某人或者在某种场景下需要进行搜索时,来不及删除自己的搜索记录出现社死的情况。


而当当的搜索隐藏就可以完美的解决这个问题,退一步讲我们可以思考一下为什么别的成熟型应用,没有采用这样的方式。大部分是没有这个功能,其余则是在搜索这一个功能上已经添加了其余用户体验的设计。所以在这一块就没法加入这个设计。




三、当当:分享动效 ➕ 一键制作朋友圈分享海报


在当当应用中点击分享进入页面后不同于传统的分享页面,而是把分享到微信和分享到朋友圈进行了动态设计。并且在分享到朋友圈的右上角加上了海报的标识。我们点击会自动跳转生成海报。


这样的设计可以更加吸引用户的眼球并且自动生成海报可以激发用户在朋友圈转发的次数。



动效展示



四、抖音:点击复制 ID


主页 ID 点击可进行复制  很多应用都有 ID 。但是当我们要进行 ID 搜索的时候,我们便需要一遍一遍的反复查看或者记住这个 ID 然后再进行搜索。


目前部分的应用也上线了类似的功能,让用户点击 ID 区域可进行复制。对于用户体验的提升有着很显著的效果。




五、飞书:效率工作语言自动转化


飞书属于一款协同办公类的应用


在飞书的设置用有语音直接转换文字的说明,飞书本身便是一款协同办公类的产品。此产品效率便是产品关键词之一,所以加入这样的设置可极大的提升用户的体验。




六、美团:优惠卷新到提示


有提示用户新到多少张优惠卷的提示


可以促进用户消费的同时能帮助和提醒用户去使用消费卷不仅提高了商家的销量还使得用户在消费中发现自己的优惠卷及时使用




七、墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍然未上线)


一键登录


应用登陆中目前主流为(1.第三方登录,登陆之后需要再次绑定手机号。2.手机号注册登陆,登陆之后可选择是否绑定第三方。3.一键登录,登陆之后可以选择是否绑定第三方)在设计流程中,设计开发者需要尽可能的减少对流程的复杂化。


一键登录在为看来是最喜欢的一种登陆方式。导致现在如果需要各种注册绑定,除非必要的情况下,我会直接放弃这款应用。





八、起点读书:长按可以进行互动


长按页面可以框选当前的段落,并且出现互动选项。

 

增加用户和用户之间,用户和作者之间的互动。使得用户在读书的同时有着较强的参与感。




九、腾讯视频:亮度调节的动效设计


滑动可调节亮度

 

左边的小动效的设计加上右边的渐变进度条,使用户可以更加明确的知道自己所处于一个什么样的观看环境,并且加入了渐隐渐现的出场和入场。

 

用一个小巧的动效设计帮助用户确定自己的亮度属性,




动效展示




十、微博:点赞动效设计


点击点赞会出现彩色的波浪并且不断扩散的同时有小表情弹出。


增加趣味性和互动性。




动效展示




十一、知乎:删除搜索记录


清空时会在进行确认,再次点击全部删除方可删除。


在下方列表中可逐一删除,上面清空中不是点击后就全部清空。而是再次出现,起强调和确认的作用。


增加用户体验,帮助用户进行二次确认和防止用户误触。作为一款咨讯类应用用户的搜索记录也是比较重要的。




十二、QQ:可隐藏会话


前几天发现的一个神级功能(虽然我已经不用 QQ 进行社交了),当时我外甥和我讲述了这个功能他么00后戏称为养鱼神器。


在好友的设置中可隐藏会话,开启隐藏会话以后。此联系人发来的消息不会显示在联系人列表。需要自己手动去设置隐藏会话列表去寻找。


应用的功能更加多样化满足多种不同的需求。




十三、QQ 音乐:搜索入口的听歌识曲


在搜索入口加入了听歌识曲且进入界面后可进行听歌识曲和哼唱识别的切换


搜索歌曲界面的使用场景为:1.用户得知该歌曲的名称或者歌词进行搜索。2.用户听到了某一首很好听的歌曲想进行搜索。此时在场景二的情况下,正好可以进行听歌识曲。听歌识曲此功能在比较旧的版本属于主页中的一个模块,把听歌识曲放到搜索入口处更加符合用户场景。


对用户场景进行细致的研究,增加了用户体验。




十四、QQ 阅读:长按复制的放大设计


长按复制会有放大镜设计


当用户处于复制文案的场景下时,由于复制需要拖动,在拖动的过程中会按压住自己所处于的复制内容位置。所以在用户进行复制时加入放大镜的设计会使得用户清楚的明白自己复制到哪里,不需要后续用户在进行删减。


极大的加强了此场景下的用户体验


动效展示


文章来源:站酷    作者:张阳光Designer

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

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

存档