首页

需求太碎?设计师如何在小业务中提炼价值

lanlanwork


Chapter One .
理清小业务的业务目标

相对于大业务(例如网站改版),小业务因为简单,其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况,直接从梳理小业务具备哪些功能入手,分析下现状问题后开始制定设计策略,这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体,只是策略的表象。理清小业务所承担的业务目标是前提,那么如何理清呢?

 

理清业务目标

小业务目标来自大业务目标,对大业务的业务目标进行一级级向下拆解后,即可获得小业务对应的目标。目标拆解需要遵循MECE原则,拆解方法包含:二分法、过程法、要素法、公式法、矩阵法。(tips:目标的拆解有一定难度)

图片

Dapp设计详情为例,在酷家乐大增长业务背景下,用户活跃和用户留存为核心的目标,设计详情处于设计路径的一个节点,拆解得到设计详情的5个主要业务目标:

  • 设计详情-用户周活跃
  • 设计详情-新用户留存
  • 设计详情-老用户留存
  • 设计详情-内容投稿数
  • 设计详情-内容分享数
图片

业务目标可分为2个类别:

  • 第一类别:符合用户意愿,如活跃、留存,在满足用户需求的情况下可以自然达成;
  • 第二类别:不符合用户意愿,如内容投稿、内容分享,用户不太会主动去完成,需要去创造动机,激励用户进行。

 

Chapter Two .
挖掘小业务关联的用户需求场景

有小业务的业务目标后,第二步就需要给用户提供价值满足用户需求,以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提,那如何获取用户需求场景呢?

 

用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定,包含四个关键要素,其中需求本身最为核心,需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】,【某用户】做了【某事】来满足【某需求】”

图片

用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组(1-3年、3-5年、5年以上),每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景:

图片

访谈信息整合如下

图片

 

规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的,碎片化场景对设计指导容易出现偏差,需要把场景结构化,为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整,按设计前、设计中、设计后三个阶段进行划分。

图片

以上梳理了设计详情相关的用户需求场景,再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景,在设计师的整个设计流程中只占了一部分。从设计层面来看,该2个场景局限在方案设计大场景中,设计更多做的是对其方案设计操作的体验优化,在原有较好操作体验的现状下,其对给用户创造价值上没有很大增量。再从以上业务目标来看,2个单一场景很难去促使用户对内容进行分享和投稿。

 

Chapter Three .
梳理产品功能矩阵

在理清小业务的业务目标和需求场景后,下一步就是按照场景去梳理产品能力。

 

小业务功能现状分析

老版app设计详情的功能进行初步的现状分析,设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看,多个场景无法实现,如营销、谈单;从业务目标来看,通过当前功能有较大的优化空间,如当前投稿很难让用户知道投稿有什么价值。

图片

 

产品能力梳理

分析现状发现功能不足以支撑用户需求场景,有获取功能2个方向:

  1. 挖掘现有能力:可以扩大梳理范围,从小业务所在的上一级业务到整个平台,一级级往上梳理场景对应的现有功能。
  2. 打造新能力:围绕场景,打造出新的功能

图片

挖掘平台上现有能力,可对业务的能力价值最大化利用,与其他业务形成互通,实现1+1大于2的业务价值。亦可围绕场景打造新能力,可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵,从平台获取到了很多全新的能力,以及对原有的能力进行了能力拓展。

图片

 

Chapter Four .
拆解每个场景的设计目标和策略

在梳理出产品能力后,需要通过设计策略把产品能力有效组织起来,让用户快速感知快速上手使用。设计策略推导自设计目标,那如何得到设计目标?

基于用户需求场景将行为事件拆分,提炼行为事件再推导出设计目标,再基于设计目标给出设计策略。

图片

Dapp设计详情受制于移动端能力,只涉及设计详情中5个相关场景,其设计目标和设计策略的拆解结果如下

图片

拆解出设计目标后,基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状?首先需要明确什么是问题,问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题,很多情况是默认假设了一个预设目标,但这目标得到不严谨、不全面,容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出,其最终都来自设计目标。

图片

对老版Dapp设计详情现状进行了分析,得到了问题:

图片

 

Chapter Five .
设计策略落地

在上一步得到设计策略后,围绕着设计策略是设计方案。本段将不全部展开说明,只选3个关键点讲述设计方案的思考

 

设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多,设计三步思考:

第一步:简化功能认知,对功能结构化,以场景的维度重组织功能,并以场景打造功能集合的认知,建立场景能力区;

第二步:梳理场景共同涉及的内容,作为联系的载体承载场景的放置,设计详情中展示态的方案涉及到了5个场景中的4个场景;

第三步:提取场景中即时性和高优先级功能,打造快捷功能区

框架如下:

图片

建立框架后,填充具体的能力和内容。如场景入口放置于底部,并根据场景优先级做了主次的区分。

图片

设计详情框架建立后,打造细分场景中的设计。

 

营销获客场景设计

营销场景的设计,将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类,就可以清晰去梳理出现有的功能,以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后,再传达各渠道提供的价值激励用户去触发行为。

图片

 

谈单场景设计

谈单场景关键在方案详情上,谈单面对不同情况,存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容:图文方案、全屋漫游、渲染图册。在方案详情中,头部承载了全屋漫游、图册,如图文方案过于繁琐可直接点击全屋漫游图进行讲解,亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航,可快速切换到需要讲解的地方。

 

Chapter Six .
上线验证

上线后数据平稳后观测,设计详情的周活提升了89%,每个场景下的功能数据都得到显著的提升(tips:有部分数据因技术原因没有采集到)。除了改版了Dapp侧的设计详情,后续对PCweb侧的设计详情进行迭代,同样起到不错的结果。数据的结果验证了方法的可行,并起到了积极的效果。

图片

 

Chapter Seven .
思考小结

以上是我应用这套设计方法去做了块小业务优化,反向推动进入产品迭代,上线后取得了不错的成绩。在本次赋能后,对小业务中多了一些感悟

  • 小业务是大业务的缩影,可以作为去赋能大业务前沿验证的实验田,大概率可以快速验证自己的想法,即使方向错了因为小业务改动影响面也小
  • 因知识广度和深度的限制,不是所有设计师都可以一开始就可以把控大业务,小业务可作为打磨设计深度专业度,一些小业务的复杂度并不低于大业务
  • 该设计方法同样适用于大业务,但方法是死的,不是所有情况都套用,得需要把握重点灵活应用
  • 不要总想着搞个大新闻,在能力未被业务方认可时,小业务的赋能可以成为一个很好的发声口
  • 不要轻视小业务,有可能是你根本还不了解

以上内容,感谢阅读!

 

原文链接:酷家乐用户体验设计(公众号)

作者:小波

转载请注明:学UI网》需求太碎?设计师如何在小业务中提炼价值

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

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

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

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


B端设计也“好色”

鹤鹤


我们需要什么样的配色方案?


B端的系统的主色代表着一个系统的气质,与所在行业、产品的定位、用户群体都有一定的关系。前面调研了众多竟品及市场前沿配色方案,目的就是期望从它们身上找出共性,引领我们的系统找到最适合的方案,这是知彼。

光有“知彼”是不够的,我们还要清晰的知道自己是谁?这样我们才可以说我们的配色方案是最适合我们的,有理有据的方案。


B端系统的真正使用人群比较复杂,具有年龄跨度大,文化水平参差不等,从事行业广泛等特点。



源于自然之美的色调,突显灵活性与再生的创意!


依据彩通色彩研究所专家的说法,纽约时装周2021春夏季的色彩强调我们渴望能激发出巧思与创意的色彩,这些色彩的百搭性质穿越季节,容许更多的选择自由,适于表达原创的风格,也足够灵活来适应现代新的更片断化的生活方式 。

“2021春夏的色调呈现出大自然,强调我们渴望拥有全年皆宜的灵活色彩,这一季的色彩充满道地真实的感觉,这种感觉对色彩而言愈来愈重要,同时结合了某种程度的舒适与轻松感,并散发出活力,激励振奋我们的心情”


说到这里“主题色”如何来选择?


色彩对于人的大脑的冲击力大于造型,比如淘宝,我们会记忆起淘宝的主色是橙色;色彩是影响人类视觉思维的重要因素,色彩能直观的体现产品的性格和气质,所以选择一款适合产品的主色很重要。


我们的用户在更替,如何让产品年轻化、品牌年轻化是现在几乎所有企业都在思考的问题,新的用户群体从小接受的教育和喜好决定着产品的发展方向。

比如:我们这次颜色升级中律动、青春活力是核心关键词,而蓝色则可以让产品视觉符号得到延续。



对于主题色的选择指标有哪些?


通过关键词图片像素化提取颜色,同时参考B端产品颜色流行趋势和当年的年度流行色,以及竟品颜色分析结果,获取蓝色的色相、纯度、明度范围。


2020潘通年度颜色经典蓝(19-4052 Classic Blue),颜色值为#174A7B(H207 S81 B48)

2021潘通年度颜色搭配色鸟舍系列中19-4151Skydiver,颜色值为#02569D(H207 S99 B62)


假设:竟品的主题色蓝色的色相范围为205-225;纯度的范围为70-96,平均值为86;明度的范围为70-98,平均值为88,B端产品流行趋势的主色也多是蓝色系,色相范围为200-232;纯度的平均值为70;明度的平均值为68。



色彩的使用范围及色阶有哪些?


色彩的应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景;针对这些使用场景只有一个色值是不能满足所有场景使用的,所以我们要建立主题色的不同色阶来满足不同场景下颜色的使用。以建立色彩层级,或传达信息,或强化界面层级。


在色彩系统中,常使用 Tints and shades 系统来建立调色板,通过在颜色上面增加白色,或者增加黑色,来改变它的明度和饱和度,形成同色系的调色板,在符合无障标准的区域,选择不同明度饱和度的色彩,形成有梯度、有层级的彩色调色板。



B端产品中光有“主角”是不够的,还要有“配角” 所以我们还要看一下辅助颜色是如何定义的?


辅助色是为了帮助页面区分状态和层级而设立的颜色,主要包括图表类仪表盘颜色和功能色,通过合理的颜色传递产品正确的信息,让其信息传达更明确清晰。


辅助色的作用是配合衬托产品主色调,在不同的产品中,辅助色运用的策略是不同的,比如我们在竟品调研中发现,辅助色经常是取自主色的邻近色、对比色和互补色等。


仪表盘配色:通过对竟品的分析可得知,优秀的仪表盘的配色有多系列及低纯度的特点,多系列配色是为了满足用户个性化的需求,而低纯度是考虑用户在长时间使用产品,色彩对其心理的影响。


功能色:这类颜色在系统一般不会随意更改,而且特定的语义一般都有固定的色相,只需改变其纯度和明度,使其视觉上符合主色的气质,使其搭配和谐。


1.通过默认主题色选择辅助色及默认仪表盘颜色

我们以默认主题色为#467FEA(H 219 S 70 B 92) 为起始点,S(饱和度)、B(明度)保持不变,H(色相)以180°为起点,以15°为增量或减量标准,生成24色色板。这个色板是我们选取辅助色的重要依据。



以邻近色、互补色、对比色为原则选择丰富的颜色


邻近色:在色相环中,相差15°的颜色为邻近色,凡在60°范围内的颜色都属于邻近色的范围,主色和邻近色的色系组成的搭配,可以在同一个色调中构建出丰富的视觉层次感和质感,赋予不同的功能含义,信息表达明确,和谐统一感很好,视觉上的趣味性,颜色的搭配显得很柔和。


对比色: 在色相环中,角度相差120°-180°之间的色彩,这里使用了120°为角度来选择对比色。


互补色: 在色相环中成180°角的两种颜色,互为补色;主色可以和其互补色的两个色彩的搭配,该色彩可以为邻近色,例如:蓝色和黄色、橙色的搭配;这种搭配既能保持互补色搭配强烈的对比度,区分关键信息,次要信息,又能增加视觉上的趣味性,色彩看上去丰富多彩。


例如:蓝色作为主色,互补色黄色作为辅助色应用在图表、图标和标签上,再选择黄色的邻近色橙色作为另外一个辅助色,应用在不同的关键信息上,有助于用户更好的阅读产品的功能和内容。



获得辅助色-9色相


通过邻近色、互补色和对比色的选择,我们从24色色相环中得到了9色相色环,9色相色盘优化后将做为图表的仪表盘颜色和语义类的功能色出现页面设计中。


校正辅助颜色


虽然我们保持相同的饱和度和明度,使用科学的方法得到了较为合适的色相,但由于色彩本身自带感官明度属性,导致在视觉感受上的感官体验并不同频。


黄色、绿色的明度即发光度较高,蓝色就稍微偏暗一些,导致色板看起来不一致,为了让不同色相看起来更加协调,需要调整色板的明度和饱和度,以保证视觉感官体验同频且更加和谐舒适。


校正后的颜色主要用于功能色和仪表盘颜色。




从辅助色中提取功能色及仪表盘色系


通过对竟品的分析总结同时结合默认主题色分析得出的9色色环,归纳分离,最后形成系统的默认仪表盘颜色。


功能色的目的是明确信息及状态,比如成功、出错、失败、提醒、链接等;功能色的选取需要遵守用户对色彩的基本认知,结合分析得出的9色色环,颜色校正,得出系统功能色。




辅助色的色阶


为了度量不同的可视化从高到低的数值,我们仪表盘颜色远远不够,所有为了保证视觉上的统一性,我们需要加入辅助色的明度色阶来区分数据层级。


同时我们产品有深色和浅色两种模式,由于视觉对比的原因,在深色的场景看下看的颜色,和浅色场景下看到的颜色是两种感受,深色场景下颜色会发亮,所以为了保持视觉上统一,我们也需要加入辅助色的色阶。


辅助色色阶建立方法与主色的色阶建立方法一致,使用 Tints and shades 系统,通过在颜色上面增加白色,或者增加黑色,来改变它的明度和饱和度,形成同色系的调色板。



模拟方案一主色、辅助色及消色汇总


通过以上分析我们得出模拟的主题色、仪表盘颜色、功能色及消色。为了方便记忆,我们分别给颜色取了名字和编号,命名方式采用植物色彩命名,这也是200多年前颜色数值出来之前的命名方式,最早见于1814 年出版的《维尔纳色彩命名法》



本期交流就先到这里,希望这个配色的思路能够帮到大家,感谢大家的耐心观看!

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

文章来源:站酷  作者:Evan绘酷设计

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

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

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



当你设计时,你应该思考些什么

鹤鹤

作为设计师的我们总会在自己的闲暇时间去做设计有关的练习,那么我们到底有没有深入思考过我们怎么去练习以及如何思考才是最有效的呢?也许有的人练习了很久发现自己的进步速度很缓慢,有的人练习的不多,但每次输出的作品质量跟上次相比却提升很多。那么其中的差异到底是出现在哪些方面呢,我之前也一直在思考这方面的问题。现在将自己领悟出来的一些方法分享给大家,希望能够起到一些帮助。



前言:什么是最有效的学习方式


在开始正文之前,我希望大家能够理解什么是最有效的学习方式。在当前的大环境下,各个平台学习类的教程或者文章层出不穷,我们似乎总是有学不完的知识,每天也都在积极地学习,当时看完觉得收获颇丰,但一天工作下来也许看过的东西就忘了50%,甚至过了一周后发现自己已经什么都忘了。


那么你有没有思考过为什么会产生这样的结果呢?对于自身的学习和思考方式我们是不是还有待改进的方法?我们可以先来了解一下学习金字塔这个模型:

学习金字塔是美国缅因州的国家训练实验室研究成果


从图上我们可以看出,我们平常用的最多的听讲或者阅读的学习内容留存率[两周以后还能记住内容的多少]仅仅只占5%~10%这个区间,而讨论/实践/教授给他人等这种需要自身参与性强的学习内容留存率则高达50%-90%,平常通过阅读等获取信息很容易遗忘的原因也有一部分在于此。


不难发现,前四类的学习行为都是属于被动输入型学习,而后三类学习行为则是属于主动输出型学习这也就是常说的“最有效的输入方式就是输出”。


因此要想提高听讲或者阅读的学习内容停留率,我们需要将被动输入转化成主动输出,即我们在进行这类活动时需要调动大脑积极思考,将大脑接触到的信息与我们已经掌握的知识产生关联去想一下我看了这些内容可以运用在哪些方面以及怎么去运用,并在最后真正用于实践[经历过实践去输出你才会发现那些潜在性的问题]。我们才能更为有效地去消化一篇文章或教程。好了,希望大家看完能积极思考一下本文所阐述的内容,能够拥有一些不一样的收获就是我写这篇文章最大心愿。那么接下来进入正题。



01 明确自己的设计目的


做任何事情都应该拥有一定的目的,因此我们在开始一项设计练习时,第一件需要做的就是确定我们的练习目的,即你通过这次练习想要表达什么,这种表达可以是技法的展现或者说内心情感的表达,只有明确当前的目的性,你才能有更精准的方向。

但很多人会发现即使自己设立了目的却总是会因为各种原因而中途放弃掉,那么能让我们去坚持完成目的的核心是什么呢,就是去量化你的目的和设立明确的截止日期。量化目标就是要将你的大目标分解到具体每一天应该完成的小任务,这样拆解不仅降低了目标的难度,也能清楚知道每天该做什么,有明确截止日期的话就能避免拖延。


比如拿“在一个月内我的练习目的是做电影界面的设计“和”在1月1日至1月30日期间我要完成30张电影界面“相比,显而易见后者的目标更具象,更具操作性。只要我保证每天一张界面,即可在规定时间内完成任务,偶尔如果遇到特殊事件也能及时弥补落下的部分。前者模糊不清的目标很容易让我们三天打鱼两天晒网,一张界面也是练习,一百张界面也是练习,也许一个月下来发现自己就做了那么几张界面,完全达不到练习效果。



02 目标的确立要跳出我们的舒适区


很多人会说,我确立了明确的目标啊,也有在坚持练习,可一段时间下来却感觉自己的能力没有很明显的提高。这有可能就是你的目标建立出了问题。那么怎样的目的才能最有效地提升我们自身的能力呢,在我看来跳出自身舒适区去建立目标效果才是最正确的。

舒适区指的是一个人所表现的心理状态和习惯性的行为模式,人会在这种状态或模式中感到舒适。舒适区,又称为心理舒适区


如果你发现你每次确立的目标自己都能够很轻松愉快地完成的话,那么你可能只是一直在自己的舒适区内做着重复性的工作, 对自身的能力提升并不会出现显著变化,也就是常说的那句话“你不是有五年工作经验,而是把一个经验用了五年!“

跳出舒适区,指的是来到学习区,去有意识地练习那些你了解过,但是不能熟练应用的技能。例如你对界面的设计已经比较熟练了,但是你对交互动效这一部分仍然感到比较陌生,那么如果继续坚持界面练习可能只是简单在堆积你的练习数量,这时你更应该去尝试一下界面的一些交互效果并将其制作出来。


这样你就可以将你已经掌握的知识与并不熟练的知识连接起来,从而能够更高效地学习和吸收新的知识。前期尽量选择简单的效果练习,循序渐进,以此来建立你的自信心,不要急于求成而误入恐慌区,妄想在几天之内就能够做出和从业几年的大神一样的高难度复杂效果,那样不仅学习效果差,还会打击你的自信心,造成反效果。



03 多看的重要性以及怎样去看


相信大家对于多看这一点已经是耳熟能详的词汇了,曾经也听过很多次大神分享,无一不提及多看多练这种类似的话。那么你有没有深入思考过为什么很多高手都在提及这一点呢,我们所谓的看和他们的看是否说的是一个概念呢?

牛顿曾说“我之所以比别人看得远一些,是因为我站在巨人的肩膀上”,那么在我的理解范围内,多看即是站在巨人的世界里看设计。


在诸如国内网站站酷/UI中国以及外国网站dribbble/behance等平台上,我们可以找到很多优秀的设计作品(在看的过程中可以不要只是局限于UI设计,可以更多地看看首页的其他作品,能够最大限度地提高你的审美),遇见好的作品我们不要只停留在视觉表面,要学会去分析好的设计,以及与我们自身所做的界面产生对比。


分析最直接的方式就是自我提问。这个设计我为什么会觉得它好看,是颜色的搭配吸引了我,还是版式的设计非常合理,又或者是整体的配图非常和谐?”当然,你还可以更近一步——“颜色的搭配是哪里吸引了我,是对比色用得非常合理,还是整体色彩的占比非常平衡,又或者说是颜色的明度和饱和度搭配得非常好看?“


最重要的是要联想到自己已经掌握的知识,将你发现的好的方面与自己的知识进行结合。“如果我下次在做界面练习的时候,我该怎么去使用这种色彩搭配,如果换成其它颜色,我有没有能力将它搭配得像这样和谐美观?“

 

这样自我提问的方式最终目的是将好的东西内化为自己的知识,否则你看再多的东西,也只是你每天所接触的信息而已,过眼即忘,并不能有效转化成为你的设计认知。当然,你要将那么好看的设计都收进你的素材库里,好记性不如烂笔头,建立素材库就是为了让我们更好地去复习我们曾经欣赏和思考过的东西。

自己的eagle资料库



04 不找参考的设计都是耍流氓


毕加索曾说过这样一句话:好的设计师借鉴,伟大的设计师偷。乔布斯也曾说过类似的话。举个例子,我们可以先看左边一个比较古老的界面-施乐公司70年代的界面,再看右边乔布斯拿来改进的做的macintosh界面:

以及经过改良后的macintosh界面,然后比尔盖茨在看过这个设计后而做出的关于微软的界面

看了上面两幅对比图,我们可以发现,伟大的人在创作时也需要找参考,但他们都是尽量吸收参考好的部分,然后加入自己的思考和理解,去创造更好的东西。他们并不是说凭空就可以创造出经典的东西。


所以说,找参考是设计过程中非常关键的一个步骤,在找参考的过程中,就相当于你在和其他优秀的设计师对话。因为一个设计师的脑容量是没法与全世界设计师的脑容量相比的。虽然参考不一定是你做设计的标准,但却能对你的创意和设计带来一定的方向和灵感。因此我们在开始一项新的设计目标前找参考,去观察别人的作品是怎样表现的,他们设计的东西出彩的地方在哪里,和我心中所想的有哪些不一样,我该怎么在我的设计中去融合那些出彩的东西。


只有当你找到足够多的参考,你的心中才会有一定的衡量的标准,才会知道好的设计和坏的设计差距在哪里。最终体现在你所做的设计上。也许有人会说,有的厉害设计师感觉都不怎么找参考,那是因为他们的脑海中已经积累了足够的参考来让他们自由调动。



05 你在设计时是否做到了专注


我们可以做一个小实验,在自己手机上下一个Forest[番茄时钟],设定两个小时的设计练习时间,看看在这个持续时间内你有多少次会情不自禁地拿起手机看消息。(我在做这个测试的时候会发现有很多次都会无意识拿起手机看信息),由此可见我们即使是在练习时间内也会存在很多浪费时间的小动作,如果丢掉这些小动作,我们在有限时间内的产出将会大大提升。

我也是在前些日子看《深度工作》这本书时才意识到专注工作的重要性。书中说:想要迅速掌握困难的技能,你必须高度专注,不能有任何干扰。高质量工作产出=时间x专注度。而现实中的我们往往是花费了很多时间,却由于自己的专注度很低,导致整体效率和产出都大打折扣。我想这也能解释为什么都是在同样的时间内,每个个体的成长度都不一样,成长快的人会把单位时间的效率发挥到极致。


因此在每次给自己规定设计练习时间的过程中,尽量找一个安静不受打扰的环境,将手机设置成番茄时钟模式,保持高度的注意力去完成自己的练习目标,你会发现你比平时用了更少的时间却做出了更好的东西。



06 对于规范的理解


我们应该知道,UI设计不同于绘画以及平面设计,它是基于一定限制而进行的设计活动,而这些限制我们称之为设计规范。就像你在开始游戏之前需要知道游戏规则一样,我们在开始设计前也是必须要了解相应的设计规范的。比如状态栏的高度,底部图标的大小,间距的大小,字号的规范等,在这里不做详细解读。也许刚入行的人会觉得设计规范限制了设计的发挥性,但其实规范只是让你能够朝着一个统一的方向和保持基本数值的准确性,但却依然能够给设计很大的发挥空间。就像之前看到的一段话:[此处将其做成了一个图片]

也许看完这个你更能理解规范对于UI的一种作用,盒子就像我们的手机,展示空间就那么大,你需要在一定的限制内发挥你最大的能力去做出好的设计。

 

因此,当我们在练习app界面时,心中一定要有自己的一套规范(不论是否做出来),执行过程中严格按照定义的基础规范来,从而更能够高效地完成练习任务和保证界面的统一性。


07 学会建立自己的界面走查表


就像在学校时,老师总是强调我们试卷答题完成后一定要进行自我检查去排除一些不该犯的错误。同理,设计也是一样,每当我们初步完成了设计界面后,我觉得最重要的也是进行自我检查,排除一些界面常见的错误。当然,我说的走查并不是单纯看文字等显而易见的错误,而是按照一个优秀的界面要求去走查我们的界面:


设计风格统一了吗?

界面的整体设计风格是否统一,符合产品调性。颜色的使用/图标的设计风格/圆角大小的统一等;

图片是否清晰?有无版权?

你在整个设计界面所使用的图片是否是高清的,有无模糊或者水印,图片是否会构成侵权等,一个低质量的图片会瞬间让你的界面下降了一个档次;


信息层级拉开了吗?

做的界面整体的字号大小是否有重点区分,能不能清晰地看出文字的层级关系,元素间距有没有符合各层级的对比关系;


投影用对了吗?

你的投影考虑了环境色的影响吗,如果用纯黑的投影会让整个投影看起来非常沉重;


你的界面有呼吸感吗?

你的界面看起来会不会很拥挤?不要堆得满满的,注意留白以保持元素的呼吸感,从而让界面更耐看;


对齐了吗?

不论你是工作几年还是刚入行的新人,都一定不要忽略这个问题。左对齐右对对齐以及居中对齐。说起来很简单,但不要因为这个错误的发生而让别人质疑你的专业性;


以上列举了一些部分常见的界面问题走查,还有更多的界面基本问题值得大家去留意。我认为走查表的建立还是应该基于自身的经验来制定,那样不仅会更符合你的设计风格,更会让你走查起来更加高效。刚入行的同学的话可以多看看高手关于界面精度提升的一些建议来作为自己的走查参考。



08 不要闭门造车,走出去


相信通过走查表的建立会让你发现一部分的问题,但碍于自己的审美水平以及理解能力,我们很难去完全找出自己的问题。也就是说,当我们通过走查表纠正了一些常见问题后,我们要学会向大神们去请教问题。


通过你认识的一些大神或者在设计群里发出自己的界面,让其他更厉害的人去发现你界面的其它问题,这样会让你意识到一些你不曾发现的问题,从而提高你的判断能力和界面水平,督促自己的进步。当然,不要把请教别人当成一件理所当然的事情,学会向那些给你提出界面修改意见的人们说一声谢谢。(在这里也谢谢曾经帮助过我的那些可爱的人们~)

写在最后:少熬夜多锻炼,注意身体健康


在这里想向广大辛苦奋斗的设计师们说一句,每次做完设计练习还有时间就多多锻炼吧,身体从来就是我们奋斗的本钱,只有身体健康才能更好地作图呢。所用时间的长短从来不是衡量一个人厉害的标准,熬夜不一定代表就能够做出更好的界面,专注和高效才是我们应该学会的方式,希望大家在新的一年能够用更少的时间做出更精致的界面。

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

文章来源:站酷  作者:进击的M

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

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

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

重新设计东南亚头部在线超市的真实案例

lanlanwork


I. 发现

客户访谈

由于这位甲方的合作态度良好,所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题:

图片

主要问题:

  • 低转化率:杂乱的界面使用户很难浏览商品。
  • 手机端体验不友好:几乎 90% 的用户是通过手机访问网站,但手机版的设计不够理想。
  • 手机端糟糕的界面和体验:目前他们使用的是现有的网站模板,根据目标用户的反馈,缺乏优化而且加载速度很慢。

客户需求

  • 一键式购物
  • 轻松的界面和体验
  • 无缝的商品搜索
  • 折扣和优惠更容易被看到
  • 使用网站时能感觉熟悉而简便

成功指标

  • 增加客单价
  • 增强人们的对品牌的认知感
  • 增加用户和订单数量
  • 无缝的体验
  • 让健康的生活方式更加受欢迎、评价、容易取得,更加有趣而美好
  • 提供并教育用户健康的生活方式,并转化为愉快美好的生活

 

目标人群

根据产品团队提供的数据,整理出了目标人群的特征:

图片

 

II. 构思

人物角色

根据以上信息,整理出了两个完全不同的人物角色:

图片图片

 

故事版

没有区分人物角色的故事版:

图片

目标用户的故事版:

图片

 

体验地图

思考分析用户旅程的五个阶段(探索网站、比较商品、确认下单、完成购买和接收配送)和用户感知的三个方面(行为、思考和感知),制作了体验地图:

图片

将当中的关键信息挑选出来:

图片

 

竞品分析

设计师找到了三家主要竞品,先大概了解他们的特色和优势:

图片图片图片

然后从 Google Play 的评论中寻找竞品的问题,这样就可以思考如何战胜他们:

图片图片

P.S. 评论分析是一种简单有效的竞品分析利器(也可以用来分析自己的产品),具体方法我之前有分享过:别总想着数据分析/用户调研,先把评论分析做了吧!

 

III. 设计

信息导航

先把大致的用户流程确定下来,这样对整个产品就有了一个整体构思:

图片

 

线框图

然后用手画出线框图,定下页面的整体布局:

图片

 

低保真

将线框图手稿用绘图软件细化,制作成低保真方案,用来向客户展示和做用户测试:

图片

图片

 

IV. 完成

可用性测试

找用户做测试时,用的是低保真可交互原型。

根据测试发现的问题,设计师直接将优化方案运用到了高保真方案上,所以下面整理的问题都用高保真方案来配图展示:

  • 1. 自动定位:测试之前用户必须手动搜索位置。
  • 2. 属性选择:由于客户想要一键式购物,所以当用户点击熟悉(通常是重量)右侧的箭头时,可以反转卡片进行详细选择。

图片

  • 3. 促销展示:原本设计了三个促销区,但是测试中发现用户面对大量的信息无法充分理解,所以移除了一部分,只保留了头图和分类优惠。

  • 4. 商品导航:为了避免用户迷路,将商品分类导航放在了所有页面顶部,并且悬停时展示子分类和相关文章。

 

高保真

图片

 

响应式

这个网站需要具备很高的响应式能力,不论在 PC 端还是手机端,都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了,所以不得不使用断点(Breakpoint)来判断用户当前处在哪个端,并展示相应的界面。

这个断点的概念在栅格系统很常用到,指的是当界面尺寸缩小或增大到某个(或几个)零界点时,间距大小或其它界面元素发生突变。

图片

上图来源:三种最主流的响应式栅格

 

这个方案的对于移动端的特殊处理包括:

  • 确保商品分类的位置,方便用户记忆
  • 使用汉堡菜单
  • 提供模仿原生 APP 的吸底导航

图片

 

Before&After

最后对比一下优化前后的方案:

图片

图片
图片
图片

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》重新设计东南亚头部在线超市的真实案例

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

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

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

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




UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

lanlanwork


因为「米勒法则」研究的是人类大脑的短期记忆量,而导航菜单、金刚区这些场景,是侧重用户识别,而不是侧重用户记忆。试想你作为用户的时候,你会去记导航菜单的名称吗,哪怕是短暂地记下来(就像我们记短信中的验证码,然后到另一个应用中输入的场景一样,短暂地记住)?我想大部分的人在这些场景中,应该都是所见所得、过眼云烟的吧。

并且“导航菜单的设计旨在用户识别而不是用户记忆”这个观点,在UX研究咨询公司 Nielsen Norman Group(NN/g 尼尔森诺曼集团)的“web可用性”一文中也有指出。

所以以上导航菜单、金刚区的案例,产品可能确实也是有在控制菜单项目的数量,但更多应该是出于对「希克定律」的考量,而不是「米勒法则」(我之前也有在《交互四策略实现希克定律》一文中说过:用户的决策能力会跟随选项数量的增长而降低,给用户非常多的选择,约等于没给用户选择)。

这些案例完全是强行反推,给套了个「米勒法则」的结论…实属不妥…那我就来谈谈,我对「米勒法则」的理解以及它在产品设计中的用途。

 

01、「米勒定律」在研究什么

米勒在1956年《心理学评论》刊中的《神奇的数字7±2:我们处理信息能力的一些限制(The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information)》一文中,首次提出「米勒定律」。但该文只算是一篇阐述学术观点的文章,不算严格意义上的论文。

米勒在文中引用了实验者记忆变化音调的实验,发现人们在短时间内可以很好地记忆并复述5~6位的信息,随着收到的信息位数增多,记忆出错的概率也在不断增加。但因为实验者存在个体差异,最终的信息记忆量基本都能在该基础上再浮动2~3位。所以得出了“人的大脑在短期记忆中最多可以记住大约7±2个信息团”的结论。

但因为该实验与文章不属于正式的科研研究和论文,所以后来的科研学者又对“人类短期记忆上限”进行了更多的实验研究,最后形成了很多种学说。有坚持7±2的守旧派;有认为最佳短期记忆信息团为4±1的创新派;也有认为“人类的最佳短期记忆不应该被束缚于一个固定数值区间”的不站队派(确实 NN/g 尼尔森诺曼集团也说过,用户的短期记忆能力存在较大的个体差异,前25%的人群比尾部25%的人群会好大约2.4倍)。

但不论怎么说,这些实验都明确表明了:人的短期记忆存在上限,只是对具体能记住的信息团数量存在分歧。

基于这个结论,我们在设计产品时,该如何加以运用呢?

 

02、在人机交互中的运用

NN/g 尼尔森诺曼集团基于「米勒法则」,提出了以下几则设计指南参考:

  • · 响应时间必须足够快,以便用户在等待下一页加载时不会忘记他们正在做什么;(体验侧)
  • · 更改访问链接的颜色,以便用户不会忘记他们已经单击过哪里;(UI+交互侧)
  • · 不要让用户去记优惠券代码,而是该将优惠信息置入短信或邮件中的链接,通过链接自动将优惠券转移到用户的购物车中。这样可以让计算机承担记住晦涩代码的负担;(交互侧)
  • · 在用户可能需要帮助的场景显示“用户帮助”功能,这样他们就不必前往单独的帮助功能区去记步骤,然后再回来解决手头的问题。(交互侧)

你会发现,实际上专业团队对「米勒法则」的理解,基本都在于如何解决“人的短期记忆上限”问题,并没有去纠结,到底是7±2,还是4±1…

并且我在 NN/g 团队每一条设计指南的后面都标注了该条指南作用的侧重向,发现大多都体现在交互侧。因为「米勒法则」研究的是人的短期记忆极限,在视觉表现层其实很少会运用到。视觉更多强调的是“从识别到操作”,这并不是「米勒法则」的研究内容。

举一些切实的例子吧,基于「米勒法则」而诞生的产品交互中,我们最常接触到的就是移动设备自动获取短信验证码,方便用户一键填充;通过图像识别用户的银行卡号,减轻用户记忆负担。

这一类有关用户短时记忆的场景,为减轻用户记忆负担而诞生的交互形式,才是真正的基于「米勒法则」。

现在你明白了吗?因为「米勒法则」中提到了短时记忆极限量为7±2个信息团,让许多人都去关注数字了,而忽略了「米勒法则」到底在研究什么。然而这个数值,迄今为止,在科研领域依然还存在着分歧。

 

03、关于「米勒定律」的拓展与延伸

3.1 拆解与再组合  

米勒在他发表的文章中也提到了:虽然短时记忆存在上限,但是人们的大脑也总是在努力寻找其他方式拓宽这个极限,例如拆解与再组合。

在前面米勒让实验者记忆变化音调的实验中,就有人通过自主拆解、再组合信息形成信息团的形式,来增加自己最终记住的单位信息数。

基于此,前面图像识别用户的银行卡号的示例,如果因为技术受限而无法实现,我们也可以通过拆解卡号为“4位一个信息团”的方式,来方便用户记忆、输入与校验。这样在体验方面也是一种弥补。

 

3.2 让用户放弃记忆  

要将用户的记忆负担减轻到极限,那就干脆让用户放弃记忆。

例如苹果基于自己的云管理与密钥技术,在识别到用户在创建密码时,会自动填充强密码,强密码复杂混乱到很难被人脑记忆。

一方面加强了密码的安全性;另一方面,搭载其他技术手段来减轻用户的记忆负担,不再纠结于用户究竟能记住多少个、多少位的密码,直接将用户需要记忆的内容减轻至0,这也许才是真正基于「米勒定律」而创造出来的产品设计吧。

 

04、写在最后

其实这篇文章我认为更多是写给交互和体验设计师看的,如果你着手的功能有涉及到用户记忆的场景,不防可以参考一下这些减轻用户记忆负担的案例,还有NN/g的设计指南。

但好像现在「米勒定律」被很多UI设计师用成套路了…然而你发现了吗,文中「米勒定律」的案例,与视觉、与“7±2”很少存在关联。

如果文章开头导航菜单、金刚区的例子,你硬要说是参考了神奇数字7±2,我认为勉强也算行吧(嗯…勉强算)。

因为虽然我认为其设计理论更多是建立于「希克定律」之上的,但「希克定律」告诉我们要减少展示给用户的选项数量,却并没有给出一个建议值。如果你希望在某些场合给你的设计一些立足点(大家懂的),你如果说结合了「希克定律」与神奇数字7±2,我认为比直接说基于「米勒定律」要更内行一些。

 

原文地址:UCD耍家(公众号)

作者:Howiet

转载请注明:学UI网》UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

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

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

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

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



单色配色你真的会用吗?(实操篇)

lanlanwork


01 单色配色实操

图片

选择基色“H:255 S:100 B:100”的深蓝色为背景。

然后绘制两个正圆,调整底对齐:

图片

图片

图片

大圆颜色调整为和背景相同的颜色,透明度降低至0;调整小圆的颜色,色相(H)和亮度(B)保持不变,降低饱和度(S)为80%。

图片

为了让颜色混合更融洽,给主体执行“效果—模糊—高斯模糊”;再执行“效果—纹理—颗粒”添加质感。

图片

最后添加文案排版,方案一就设计好了。

可以看到本案例精简了色彩层级,色调干净统一且稳定。利用两款同色相颜色的渐变层次变化,产生了低对比度的和谐美感。

图片

使用同样的方法还可以设计出其他方案:

图片

图片

 

02 单色配色实操

第二个方案把英文作为主体。从“视图”菜单中打开“符号”面板,选择英文点击“新建”按钮,把英文设置为新符号。

图片

接着画出圆形外框,执行“效果—3D—凸出与斜角”命令,设定旋转角度和凸出深度:

图片

点击“贴图”进入贴图视窗,勾选“三维模型不可见”,表面选择“4/4”,符号找到新建的英文符号,勾选“缩放以适合”将文字缩放成适合的大小:

图片

背景选择“H:255 S:100 H:100”的深蓝色作为基色。把英文图形执行“对象-扩展外观”,双击进入图形中分别给文字和背景填色,保持色相(H)不变,调整饱和度(S)和亮度(B)的数值。

图片

使用相同的方法制作出其他英文圆环,并填充颜色:

图片

最后加入文字排版,设计完成。

图片

可以看到此方案虽然选择了多个颜色,但通过单色搭配可以得到统一协调的视觉效果。

图片

使用同样的方法还可以设计出其他方案:

图片

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》单色配色你真的会用吗?(实操篇)

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

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

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

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



金刚区也要考虑交互,不只是画图标而已

lanlanwork


金刚区是什么,想必大家都有所了解。

没有的话看这张图就懂了:

图片

图片来源:淘宝首页

 

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。

但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。

金刚区设计不好,会对我的使用造成直接影响:

  1. 不够清晰易懂根本不想去看
  2. 首次使用找不到需要的内容
  3. 下次使用记不住图标的样子
  4. 图标设计得怪怪的不好理解

我今天就来总结一下,对于金刚区设计的交互/体验思考:

  • 数量
  • 顺序
  • 颜色
  • 样式

 

数量

金刚区里有多少项比较合适?

这其实是米勒法则(Miller’s Role)的典型运用了。

如果你还不太了解米勒法则,看看下面这张图里的词语:

图片

现在,半分钟回忆一下,你记住了多少个?

……

大部分人能记住 5~9 个。

米勒的研究发现,普通人的工作记忆(Working Memory)只有 7±2 个信息块。

如果给的信息超出了这个数字,大部分人也只能记住这么多。

所以说,金刚区里的图标数量,最好也维持在这个数,否则就是对用户的记忆能力要求过高了。

通常来,4 个图标很轻松,说 6 个图标是比较理想的,8~9 个就有点吃力了,10 个就超纲了。

例如支付宝这个就过分了,好在这只是工具类产品,复杂一点也没办法:

图片

 

顺序

人们在看阅读文字时,视线轨迹是之字形:

图片

人们在阅读表格时,视线轨迹是除草机形:

图片

上图来源:这样设计表格,看着真难受!

 

虽然金刚区的眼动图我没有,但第一步肯定是从左上角开始往右扫。

图片

所以,用户最有可能使用的图标,应该从左到右排在最上面一行,最不常用的可以排在右下角。

例如美团外卖这个设计,看着就挺合理。不但把重要内容放在第一行,而且还做了很大的视觉区分:

图片

不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传,难免损失点易用性。

 

颜色

仿真图标

如果追求质感,多半会使用物品本身的颜色,例如每日优鲜这个:

图片

这种图标就没什么颜色好讨论了,注意一下整体和谐就好。

 

数量较少

如果图标数量不多可以使用一个颜色,那么颜色上,同样没什么好讨论的。

例如 QQ 音乐:

图片

 

数量适中

如果图标数量在 7 个左右或以内,那么可以每种颜色的图标都来一个,这样用户也能记住大概什么颜色代表什么。

例如京东这样:

图片

 

数量很多

图标数量远超过 7 时,就不可能每种颜色来一个了,否则颜色都不够用了。

如果还是想要划分颜色,可以将类型作为依据,这样用户在寻找图标时会比较有方向。

当然,其实也可以简单点,干脆都一个颜色,例如联通手机营业厅:

图片

 

样式

底框

一些产品为了统一感,会用圆圈或者圆角矩形,把所有图标都框起来。

这样视觉上是好处理了,但交互上很不推荐,因为会大大降低图标的识别度,眨眼一看都长一样。

这种底框在主流产品里已经很少见了,不过这么做的设计师还是不少,至少站酷上可以找到很多:

图片

这种图标数量少,有颜色区分还好,如果数量多又一个颜色,那就很难辨认了。

 

风格

纵观常见的金刚区图标,通常不外乎四种样式:线条、形状、2D、3D、仿真。

图片

联通手机营业厅

 

图片

QQ音乐

 

图片

京东

 

图片

美团外卖

 

图片

每日优鲜

 

任何样式都能让用户识别和记忆,但是不同的样式给人的感官不同。

真实性越高的视觉样式,就越容易给人高级的感觉;相反真实性越低的视觉样式,越容易给人简单边界的感觉。

 

总结

我发现做设计时,从不同的角度会带来截然不同的思考。

今天这篇分析,算是一个以交互体验为主,融合了一些视觉角度,希望带给大家一些灵感~

如果你还有什么 idea,欢迎在评论区探讨~

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》金刚区也要考虑交互,不只是画图标而已

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

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

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

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


详解|用户体验地图,到底该如何使用?

lanlanwork


WHAT:用户体验地图是什么

用户体验地图(Experience Maps)旨在通过描述用户历程和故事,使设计师、产品经理等项目成员更好地了解用户和洞察诉求。所以对于用户体验地图,我们可以将其定义为以下内容:

  • 是一种描述用户故事可视化工具
  • 是一种帮助设计师、产品经理等更好地了解用户的共创工具
  • 用户视角出发,直观展现产品流程各个触点上用户的痛点、需求和情绪;
  • 用户体验地图绘制的形式并不唯一,可以根据项目需求,增减内容。

图片

△ 途家 App 用户租房 · 用户体验地图案例

 

通常在接触到需求之后,设计师就可以开始梳理现有流程、使用用户体验地图了。要注意的是:

  • 需要梳理的功能不分大小,都可以使用;
  • 做之前,务必要先调研和访谈用户使用产品的情况。

建议时长:

  • 重要项目:120~180 分钟
  • 日常项目:60~120分钟

参与者:

  • 必选:设计师、产品
  • 可选:研发、市场、其他

工具:

  • 电脑或白板+便利贴

 

WHY:为什么需要用户体验地图

需要发现和拆解产品现有问题梳理用户流程时使用用户体验地图,可以在聚焦阶段,整合用户诉求和业务诉求,共创机会点,找出解决方案,通常在以下场景中使用:
  • 新产品设计:需要对需求进行拆解和优先级排序;
  • 产品优化:发现产品现有问题,洞察设计发力点。

由此可见,在设计过程中使用用户体验地图作为设计工具,有以下益处

  • 更好的以用户视角来看产品的体验;
  • 通过共创,项目成员达成共识
  • 确认触点,作为我们的设计方向
  • 通过用户痛点找到机会点
  • 帮助梳理产品流程

图片

△ 用户体验地图共创现场

 

HOW:用户体验地图操作流程 

我们通常会将流程分成 4 个阶段:定义原则和目的 —— 梳理阶段流程 —— 洞察痛点 —— 寻找机会点。

1. 定义原则和目的  

首先要了解我们做用户体验地图的原因和目的,包括用户是谁、解决什么问题、用户的目标、产品的整体目标、限定条件等等,对用户群体、整个项目背景和共创任务目标有清晰、全面的认知。

图片

 

2. 梳理阶段流程  

首先是划分阶段,将用户的行为拆分成几个大的阶段,在整理时要注意:

  • 在整个产品的范围之内尽量把故事、流程讲完整;
  • 广度优先,而非深度,不要过早的沉浸到细节中。

接下来我们要将主要阶段拆分成单个任务,并梳理具体的任务和触点,罗列出过程中的任务和各个触点,要做到事无巨细

图片

然后根据任务和触点,整理对应的用户疑问、用户感受/情绪。通过对用户的观察和访谈进行梳理,客观的描述事实,切勿自说自话或是将自己的情绪代入其中,也不要急于猜想与分析。

图片

 

3. 洞察痛点

这一步需要我们汇总用户的痛点,并将痛点分级,洞察用户痛点背后的真实诉求。这个过程中可以先让大家在一定时间内写出自己的想法,每一条写在一张卡片上,做到先相互不干扰,之后再统一整理和总结

图片

 

4. 寻找机会点

通过上述总结,思考新的机会点、解决方案、优化整体流程,并对新流程下的功能做优先级排序。可以通过准备一些问题来刺激大家脑爆出更多的内容,比如:用户还有其他选择么?怎么做用户才能更爽?其他用户来到这里该怎么处理?等等。在这个阶段需要:

  • 对内容进行对标、讨论,把公认的点保留下来,无用的点剔除出局;
  • 根据实际情况和项目成本、进度等条件,对新流程下的功能做优先级排序

图片

 

TIPS:如何为过程提效 

在实际的工作过程中,因为项目时间都非常紧张,绘制这样一个完整的用户体验地图比较耗费时间,所以推荐大家几个提效的技巧,既可以减少时间浪费,也可以提高共创质量:

1. 事前

充分做好用户调研,提前准备好用户地图模板,可以在开始之前的一到两天发给参会人员,让所有人对产品有一个整体梳理和思考,有助于提高大家的产出质量。

2. 事中

如果是优化的产品,可以将设计稿 demo 或者线上产品截图打印出来,这样可以增强大家的代入感,有利于想法的输出。

3. 事后

整理电子版体验地图,需要跟随产品的演进进行更新,上传到项目共享空间随时查看。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》详解|用户体验地图,到底该如何使用?

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

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

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

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


研究半天,才发现原来这几个效果这么简单就完成了!

lanlanwork


小技巧1

有一天一位同学问我这个图形怎么切出来的:

图片
怎么切出来的,我倒是不知道,但是我可以用其他方法做出来。
只需要两步,第一步先用ai软件里的螺旋线工具画一个螺旋,具体数值可以自己调整:
图片
不同数值可以画出不同的螺旋线:
图片
挑一个你觉得合适的。
但是这个描边的粗细是一样的,所以,我们开始第二部,让描边变成两端细一点,其实很简单,只需要选中锚点,然后按下快捷键shift+w(宽度工具),一拖动,描边就变细了:
图片
是不是很神奇。这样刚才的图形就出来了,想做个棒棒糖啥的:
图片
这个小技巧必须学一下子!

 

小技巧2

大家在画一些图形,本来两端是尖锐的,想让其面的圆润一些,比如月亮:
图片
我们怎么让它的两端圆润呢,其实在ai里面直接选中锚点就能直接变圆润,但是在sketch里,有时候就不能了:
图片
交大家一个万能的方法,直接切掉尖角,然后拿一个圆形接上去就好了,看下图:
图片
这个方法在任何情况下都适用,在做图标的时候,经常会用到。

 

小技巧3

很多同学说不知道爱心怎么画,那种两边是直线的就不说了,很简单,两个大圆角举行直接一拼就出来了:
图片
那种两边是弧形的爱心呢?其实也很简单,先画一个圆,然后拉住一个锚点把圆形拉长:
图片
然后再复制一个,镜像后再一合并就出来了:
图片
是不是也很简单,单个图形的形状决定了合并后爱心的形状细节:
图片
大家可以多多尝试。

 

总结

好了,以上就是今天和大家分享几个小技巧,赶紧练起来了吧!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

转载请注明:学UI网》研究半天,才发现原来这几个效果这么简单就完成了!

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

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

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

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


一篇文章看懂交互中的细节-微交互

lanlanwork

 

1 微交互的定义

微交互通常是指一些比较细节性的操作行为的反馈,通常是某单个事件或者交互行为。微交互可以是产品的部分功能或者就是产品本身,例如我们日常生活使用中的榨汁机,它提供一个功能,就是将我们放进的水果榨成鲜榨果汁,或者我们上完洗手间,把手伸到水龙头下面的时候,水会自动的流出来,而不用按下任何的按钮,这便是现实物理世界的一种微交互,因为他的设计是单个功能的动作,使水从水龙头中流出。

所以微交互通常是专注于某个事件或某个单个任务,例如我们最常使用的点赞后的反馈就是一次微交互事件。

 

1.10 微交互诞生的背景

计算机科学家拉里·特斯勒(Larry Tesler)在为施乐Xerox电脑的文字处理软件Gypsy设计程序时,突发奇想,给软件Gypsy加入了鼠标操作和GUI图形界面,这样便大大的方便了Gypsy作为文字处理软件的实用性与便捷性,于是在不断体验与尝试的过程中,于是拉里·特斯勒在改版的时候,给Gypsy加入了复制、粘贴功能键。这些概念随后成为了文本编辑与计算机操作系统用户界面的基石之一。

拉里·特斯勒其实当初设计复制和粘贴的思路便是减少用户操作的阻力,让用户在使用过程中不会被其他的事物所打断,往后的数十年,拉里都为了这个目标在奋斗,所以“复制”和“粘贴”便是精心设计过的微交互,没有任何提示和阻力,一气呵成的便捷交互。

交互设计以及人机交互在不断的发展的历史,实际上就是微交互的历史。今天,我们在桌面和笔记本电脑中、在移动设备中习以为常的那些交互方式, 都曾引发过微交互设计的革命。无论是保存文档,还是把文件拖放文件夹,还是连接到Wi-Fi网络,都曾经是精心设计的微交互。就连滚动和打开多个窗口这么“基本的”交互方式,也都要经过设计。技术在快速发展,不断对微交互提出创新的要求。用户习惯了拿来就用,他们只会关注更好的交互方式,或者是那些由于技术发展催生的、或强制必须使用的微交互方式。

所以,好的微交互就像“Ctrl+C””Ctrl+v”那样方便,会改善我们的使用体验。

 

1.20 移动端微交互应用场景的发展历程

还是“复制”“粘贴”的例子,我们在功能机的时代,我们想要把一段文字从一个软件复制到另外一个软件上,我们通常要在两个软件不停止的去切换,然后通过记忆内容然后在来输入,这样的效率和精准度都不是很高,而且要是需要复制的内容过于庞大,想要完成便是一件让人头疼和心累的事情。

但是在进入移动智能机的时代,该功能的微交互便发生的天翻地覆的变化,第一步我们只需用长按需要复制的文字,调出复制按钮,第二步,选中我们需要复制的文本内容,第三步便是切换到需要粘贴文字的APP,第四步,长按调出粘贴按钮,选择粘贴文字,这与之前仅靠人肉记忆去输入文字无论在效率上还是在准确度上都有了不小的飞跃。

但是随着技术的革新和从业者对于用户体验的理解更加深刻,我们的操作追求更高效,更精准,于是,该场景的交互又迎来的一次技术的变革,为了跟上时代的发展与用户的诉求,在2016年10月19日的锤子手机发布会上,它推出了两个功能:“Big Bang”和“One Step”。“Big Bang”的功能是长按一段文字,可以根据算法自动将文字的内容分割独立的词语按钮,只需点击这些分割的按钮就可以选择想要的内容。而“一步”可以直接将所选内容拖动到其他目标应用程序中,而无需在应用程序之间切换。这两个功能的结合,将之前需要四个步骤的功能简化为只有两个步骤:第一步是按下选择内容;第二步,拖动到目标应用程序。

在2021年6月8日凌晨,一年一度的苹果WWDC大会在线上正式举行,ios带来了类似于“big bang”的功能:live text,也宣告着这个小小复制粘贴功能又完成了一次新的进化,所以,无论是“live text”还是“Big Bang”,这两个功能本质其实就是微交互的进化,只不过用了两个不同的名字去代表而已。

 

1.30 为什么要重视微交互

微交互在的存在是为了让用户在体验过程中感觉舒适和流畅。因为微交互它可能在产品中出现频次会比较多,以至于很多用户会忽视甚至感觉不到它的存在。

相信很多男生的梦想都是拥有一辆法拉利的车吧,法拉利的无论是在车外观造型上的设计还是发动机的挑选,都是让人心旷神怡,但是,无论这辆车多么优秀,一个车胎漏气的法拉利都会破坏整个良好体验中的氛围。

所以在产品中的微交互绝大多数是微小且不会引起用户的关注,但是它的存在确实让产品有更加流畅且自然的用户体验。

通常微交互完整的可以达到以下三点目的:1.提高用户的留存      2.放大品牌价值      3.提升可用性。

 

1.31 提高用户的留存

设计师对于每一次微交互的设计,都是为了让用户自然且路径清晰高效的完成任务,用户在潜意识要确认对本次体验的满意度时,用户自身会经历一种对“时间忽视”的现象,即会忘记本次体验所需要花费的时间,而会专注于当前的事情。

  • 峰终定律

无论是正向的还是负向的,开始时与结束时的感觉,这就是峰终定律(Peak-End Rule)。这条定律基于潜意识总结体验的特点:对一项事物的体验之后,所能记住的就只是在峰与终时的体验,而在过程中好与不好体验的比重、好与不好体验的时间长短,对记忆差不多没有影响。

所以好的微交互应该注重于用户的“峰终定律”体验,如果处理得当,微交互会持续的刺激用户大脑中的多巴胺的释放,从而创造出小小的愉悦时刻。

这些会有助于改善用户的体验并提升用户继续使用我们的产品的可能性,有助于提升产品的留存率。

 

1.32 传递品牌记忆

微交互比较有价值的地方就是它有机会让我们在用户心智中建立品牌的影响,让用户对我们的品牌更有记忆力。

人们通常对品牌认知记忆最基础便是图形,但是品牌的传递的记忆点除了图像还可以一段标志性的动作或者是一段旋律。

通常微交互传递品牌记忆有两点:1.标志动作   2.标志声音。

 

  • (1)标志动作

我记得有次看综艺节目,里面请到了一个选秀的出来的团叫“R1SE”,在表演完一段唱跳后,在自我介绍后,他们表演了一段团队的“团队动作”,这个在外人看来这无疑是“社死”尴尬瞬间,但是在品牌传播的角度,这种标志性的动作确实有有助于传播,例如迈克尔杰克逊的招牌动作太空步是很经典的一个但有两种,一种是倒滑,另一种是侧滑,还有倾斜45°,无论是谁在去模仿,都很容易容易让人想起迈克尔杰克逊,另外一个就是诺基亚的开机画面的“手牵手的动作”,更是陪伴一代人的青春,所以无论是哪个说唱厂牌和选秀出来的团,都是设定自己的团的固定的动作,都是有助于让自己的特点使粉丝产生记忆的联想。

而在微交互的设计结构中,也是包含动作这一设定的。

 

  • (2)标志声音

我们在听到“噔,等噔等噔”等时候,我们便会想起英特尔的广告,所以每个手机品牌的都会给自己短信、系统通知和电话来电设计独特的声音,让用户在只在听的阶段,还没掏出设备,便可以判断是什么品牌手机。

在微交互的设计中,声音也组成了微交互的一部分,所以合理的应用微交互有助于用户对品牌多维度的记忆。

 

1.33 提升可用性

微交互的设计,包含了为用户提供持续的反馈方式,当用户在迅雷和百度云盘在下载成功时,除了提供的反馈,也会提供声音的提示反馈,考虑的是一般下载大型文件的时候,我们不可能实时的等待在设备前面,我们只用通过声音便可以知道是否下载完成了。大多数iPhone用户遇到的一个常见的微观交互是在锁屏幕上输入密码。如果输入了错误的密码,则屏幕在清除密码时会震动。在整个过程中,屏幕上不会出现任何文本来指示用户出了什么问题,用户也可以根据使用经验来判断当前进行到哪一步了,所以,因为这些细微的反馈细节,整个用户体验变得更加直观和方便,让用户的可用性大大提升了。

 

1.40 微交互与动效的关系

我们需要了解的是微交互与动效还是有区别的。动效囊括的范围比较广泛,它可以与多个功能和页面进行补充和解释,而微交互则是只针对一个功能进行优化,所以针对一个功能的细小的动效可以算作是一次微交互,它是辅助用户更好的对本次功能的操作。

 

1.50 微交互与交互的区别

交互设计是串联起产品各个页面与功能反馈的工作,如果缺少了某个交互环节可能会导致产品的BUG或其他负面情况,交互设计简单的来说就是满足了产品的可用性。然而微交互的存在是为了给产品提升易用性与好用性,能起到锦上添花的作用。

例如我们常用的点赞功能,用户在点击过后,一个线性的点赞图标变为填充的红色图标,这是完成了一次交互行为的闭环,微交互则是让本次点赞由线性变为填充的过程怎么更有趣,更有意思,更加让用户在本次点赞中得到满足感。

 

1.60 微交互的应用场景

微交互的在产品中的应用场景也是比较广泛,那些小的细节都可以提升用户体验,通常在不同的场景下也能体现出不同的细节。

微交互不是刻意的,而是被动发现问题的优化过程,当静态设计不能满足的时候,可以考虑动态的微交互设计,

所以,我们需要考虑如何满足用户的操作体验,微交互是否帮产品的数据上有提升,设计角度上微交互是否有创意。

 

1.61 系统可见性

用户只有知道当前系统状态是怎样的,用户才能做出更改,也就是说消除评估和执行之间的鸿沟并弄清楚下一步需要做什么才能更好的完成任务。系统应该在合理的时间内通过适当的反馈让用户清楚了解正在发生的情况和目前的状态,例如,开车时仪表盘的速度指示驾驶者减速还是加速,信息获取的缺失一般代表着控制的缺失。

 

  • (1)明确位置

无论是在现实还是在产品的使用状态,对于迷失方向感都是一件让人没有安全感的事情,也对接下来的操作造成比较大的影响,所以我们可以通过微交互吸引用户的注意力,让用户能合理的明确自己现在所在的位置。

 

  • (2)反馈进度

每当用户与系统交互时,他们都需要知道交互是否成功,如果因为各种原因,系统无法及时反馈,我们应该给与用户进度的反馈,或者是用户在进行某些任务的时候,我们应该分步骤给用户,并在执行的过程中给与用户当前的进度,来预估完成该任务还需要多久。

 

1.62 系统反馈

每当用户和系统发生交互时,用户需要知道操作是否成功。而这个反馈的过程适合的微交互可以增添用户在使用过程中的趣味性,另外一种便是可以增强用户在使用过程中的“确定性”,避免用户在点击后因为反馈不太明显而误以为没有点击的错觉。

  • (1)点击后的反馈

按钮是我们在使用APP中使用频次最多的交互功能,根据场景的不同,我们需要反馈的样式也是不一样的,比如,我们的点赞后的反馈微交互应该是积极正向的,当这个按钮的功能属于功能形式的时候,我们的反馈应该是给与用户明确的反馈,例如我们开关按钮,让用户能明确当前按钮的状态。

 

  • (2)引导视线

按钮的能给与用户除了功能方面的微交互的反馈外,还有一种是点击用途的反馈,例如,我们常常使用的美团外卖,我们在选好我们想要的商品后,点击后我们会看到商铺成抛物线的进了购物车,这样微交互的就是非常明确的告诉用户你先选择的东西可以去哪里找到。

 

1.63.系统状态

系统的状态从本质上讲和沟通的透明度有关,系统状态的可见性是指系统状态传达给用户的程度,理想的情况是,系统应该始终在合理的时间内通过适当的反馈使用户了解当前发生的情况。

  • (1)当前的系统状态

我们在生活中,要是当前手上事情比较忙碌,无法帮助别人去处理一些事情或者无法回音别人的消息的时候,我们应该告知对方,这是比较礼貌的一件事情。

所以当我们的系统正在加载中、或者在执行某项工作的时候,应该通过微交互的方式告知用户,让用户知道我们的产品并没有宕机,而是在工作中。加载时长在6-10秒的情况下,我们一般是通过这样的微交互会采用循环加载的动画去呈现,而需要等待10-15秒这样的,或者更长的时间,循环加载的动画也会给人一种宕机的错觉,我们应该适当的给与用户一个进度条,告知用户当前处理的进度,可以使得用户在焦虑不安中解放出来。

 

  • (2)内容加载状态

在苹果手机发布的时期,因为网速比较慢,在点开APP的时候,APP的内容都没还加载好,所以乔布斯的解决方案是用启动页去遮挡下这一不完美的问题。

我们在APP在页面的跳转中,肯定也会遇到这样的问题,就是用户在点击后,内容不能及时的加载出来,所以我们通用的解决方案是使用一种加载容器“界面骨架”来呈现,这种临时用来展示的容易不仅可以缓解用户在等待过程中的焦虑,也可以通过“界面骨架”去提前了解页面的大体的结构,构建用户的预期,让用户的视觉得到一个缓冲的时间。

 

1.64.触发状态

当用户主动触发的事件,我们的产品应该及时的给与用户反馈,就像我们遇到熟人打招呼,要是打完招呼对方不回复,那也可以算是一件“社死”的时间了,所以触发反馈事件中的微交互也是值得我们去考量的一件事情,它可以提升用户对产品的友好度。

  • (1)提醒预通知

一般正常的消息通知都是为了提醒用户有事情需要处理,所以,我们采用有趣味的微交互能有效的吸引用户的视线和信息的传递,已达到通知的目的。

 

  • (2)预判用户的输入

在多数的APP 中,填写表单信息的必不可少的步骤,比喻,比较常见的填写注册登陆的信息和一些比喻的资料的填写,由于这些信息表单一般含的信息并不是很少,所以,我们需要在每一步的检测用户填写的内容是否有问题,及时的提醒用户更正,不然等用户全部填写完了在提醒用户的情绪可能会“蚌埠住了”,所以通知我们在填写密码的时候,要是密码过于简单,我们需要提醒用户需要添加哪些内容,邮箱的格式是不是正确的,等等。

 

2 微交互的构成

那怎样才能做好“微交互”呢?丹·赛弗在他的著作《微交互:细节设计成就卓越产品》中,提出了好的微交互应该有的结构: 触发器、规则、反馈、循环与模式 。我们一个个来讲。

 

2.10 触发器

触发器,是启动微交互的“扳机”,是微交互启动的原点。要把识别“扳机”的成本,降得越低越好。就像沈腾在《羞羞的铁拳》的那句经典台词一样“你过来呀”,简单且易于识别。

触发器一般是分为两种,就像平时打游戏一样,有主动技能和被动技能,触发器也被分为手动触发,即用户主动去触发的,被动触发,即系统被动触发的。

 

2.11 手动触发器

手动触发器一般是用户自主的去点击,所以我们尽量要去保证触发器的识别性,以及用户在点击前的一些心里预期的管控。手动触发器一般有三项设计原则:1.降低识别成本    2.对用户的预期管控     3.考虑用户的使用场景

 

  • (1)降低识别成本

触发器是微交互启动的第一步,在使用场景下必须要让用户能识别出来,用户才能去点击,所以触发器要足够清晰明显。

比如,我们在浏览和使用视频屏网站或者视频APP的时候,网页或APP上的视频中间都有个硕大的“播放”按钮,比如,摄像机上的录像键,总是最明显的红色;这些都是触发器在提示用户,应该点它,且外观样式都是采用通俗易懂的外观样式。

 

  • (2)对用户的预期管控

我们一般去一家陌生的商店的时候,有的商店会玻璃门,比较高级的是自动的,一般的店铺都会是手动的,这时候,一般的手动的玻璃在门上都会贴上这个门是用推的形式开还是用拉的形式去关,这样,我们便知道这样去推或者拉门,是肯定可以把门打开的。

另外一种情况是要遵循用户日常生活场景的认知,比如,我曾经使用过一款教育的产品,它有点类似与房子的home键是返回键,但是在绝大多数的APP里都是去首页,所以,这项设计便是违反了用户日常的认知,没有对用户的预期管控。

所以我们的触发器需要让用户知道我点了之后会去到哪里,在形式的设计上需要明确,比如我们的微信或邮件APP的一角会显示未读邮件的数量,提示用户在点击后肯定有未读的邮件或消息。

 

  • (3)考虑用户的使用场景

在我们平时工作和娱乐中使用的键盘,我们键盘的按键的大小都是根据用户在日常使用场景的频次和设计大小的,例如,用户的最多的空格键,是最大的,其次是回车键,使用的最少的开关和其他的控制键是最小的,这都是考虑到我们生活中的使用场景去设计的。

我们在设计触发器的时候也是一样的,需要考虑到用户在日常生活操作的具体情况来对触发器的大小位置来进行设计摆放,尽量让用户操作起来比较合适。

所以我们APP的按钮会根据使用频次来确定图标的大小的层级,方便用户凭借第一反应力去点击使用。

 

2.12 系统触发器

系统触发器的微交互一般需要用户满足了某些条件才会触发的,例如我们平时在工作时间设置的起床闹钟,我们微信的朋友圈的更新提示,都是属于系统触发器,在满足了某些系统设定的规则之后才会触发的。

系统触发器通常会让用手动设置何时触发,触发的频率状况,比如,我最近想学习,不想被朋友圈的信息影响,我可以选择关闭朋友圈红点提示,比如,我的闹钟设置的是周一到周五的工作时间去响铃,我周三晚上加班太晚了,第二天中午十二点去上班,这个时候我就可以单独的选择周四这天闹钟不响。

 

2.20  规则

规则,用来规定微交互的过程,是整个微交互的核心。好的规则,应该顺乎人性、体贴方便。简单的来说,规则就是要按套路出牌,不然就会让用户感觉到出其不意。

 

2.21  微交互的规则是什么

微交互的规则对于不是做程序员或者技术的用户来说,是提示用户,哪些能做哪些不能做,该怎么去做,且规则设定应该让用户一眼就可以看懂,就是日常生活中开灯的开关和门的推拉一样简单。

比如,苹果手机之前“滑动解锁屏幕”这便是微交互的规则,也是最基础的规则。

所以,我们可以发现,规定的设定需要满足两点条件,1.名词(通过什么去调整)即滑动条,2.动词(用户该怎么去做)滑动既可解锁手机。

 

2.22  规则应该符合用户认知

一般每个平台的核心用户都是不一样的,使用的习惯也是不一样,我们尽量了解用户平时的习惯,去设定规则,我们都知道,像一般的电商都是有购物车的,都是为了方便用户将选好的物品一起结算,而拼多多却反其道而行之,它并没有购物车,这便是针对用户生活习性的不同而设定的。

拼多多的主要战略是以农村包围城市,最开始的主要是还是流行在五环外的农村用户,这些用户和淘宝或其它平台也不是重合的,可能是从来没有用过电商APP的用户,而在一些偏远的地区,他们的超市是没有购物车,如果加上购物车会增加用户的教育成本,其次,我们都知道拼单都是讲究及时性的,所以,在考虑到平台用户的用户背景和用户的使用场景,就没有增加购物车。

所以,我们在设定微交互规则的时候,依照现行平台已收集到的使用者的资料来设计,利用已知情境及行为来对现在的互动进行分析与调整。

 

2.23 给用户提供选择

在和异性聊天的时候,如果想和对象一直有话题的话,我们聊天尽量不要以陈述句结束,而是要给对象可以接的上的开放式的问题,让对方能非常轻松的去接话。

所以,我们通过对用户的了解和操作的场景,我们给用户一个选项,并提示给使用者,来串连整个流程。所以,通常用系统默认项>按场景出现项

 

(1) 系统默认选项

系统默认项和考虑场景的选项是相互关联的,正常的情况,在有限的选项中为用户提供默认项。而默认项应该是大部分用户最常用的那个选项。

例如我们在退出或者删除的时候需要二次确认,正常的会将确认放在我们比较好操作的位置且会高亮放大展示,一般的电商平台上的产品也是种类繁多,所以一般的电商平台都会有分类区,将不同的商品归类为不同默认的选项,来供用户选择。

 

(2) 按场景出现的选项

按场景出现的选项我们将它分为两种,一种是只在需要的时候出现,另外一种是只提供需要的选项。

  • a. 在需要的时候出现

在日常的产品的设计中,有些功能不一定需要一直存在,所以我们需要考虑在用户需要的时候在提供给用户,或者是我们对的用户在适当的时候在出现。

比如,我们在听歌的时候,一般时候都会在手机放在一旁做别的时候或者闭上研究休息,只能只有觉得这个歌曲比较好听以后想在KTV去唱的时候或者对歌曲有比较浓厚的兴趣的时候,我们才会去查看歌曲,而网易云音乐也许是发现了这个洞察点,在我们看一会歌词,在歌词下面的地方,会出现K歌的话筒,如果用户想练习下自己唱这个歌是什么样的,便可以点进去直接唱,而不是默默的在屏幕上看着歌词跟唱。

 

  • b. 只提供必要的选项

我们大部分在中午的时候,都纠结中午吃什么这个问题,主要是纠结的点是外卖的选择的太多了,要是公司提供食堂的话,在食堂限定的菜谱内去选择,我想,大部分人中午也不会那么烦恼了。

所以在某些场景中,我们需要根据场景去给用户提供选择,提升用户在使用中效率,比如,我们国内的搜索百度,主界面上只有搜索框和百度一下,简洁明了,让用户一看就知道产品的主要功能,比如,当我们因为软件连接上车上的蓝牙后,便进去的车载的模式,因为开车的时候需要集中注意力去开车,所以车载模式下,很多不必要的功能便会被隐藏起来,只会提供必须的功能选项按钮。

 

2.30 反馈

反馈,是向用户说明规则。用户并不知道你设计了什么规则,你要通过反馈友好地让他知道。

你输入字数太少,它显示:需要6个以上字符;你输入简单单词,它显示:密码太好猜了;符合要求,它会按照密码的强度,逐级显示:弱,不错,强,很强!

其次是及时的反馈可以增加用户的活跃度,虾皮购物在前几年时也用这个手法,让用户每天可以免费转两次,之后要转转盘时,需要付出「虾币」,我即使理性上知道这可能是虾皮回收虾币的手法,而且游戏赢家绝对是虾皮,还是付了几枚虾币,为了多赌几次「我就是那个幸运儿」。只能说当这些经典的实体体验移到线上,其策略与目的还是能顺利运作,从中学到的是,现今的数位产品透过借镜过去「已被验证成功的实体体验」,在数位产品上拷贝并实现其预期效果。

吃角子老虎机善用回馈机制来「强化行为」,提供的不可预测性是游戏的一环。

但一般来说,我们会希望在微互动中提供一致的、对我们期望的行为的正向激励,因此回馈的应该是「可预测」的。

同时,回馈本身就要可以解释规则,如:按下按钮(触动触发器)会发生什麽事(回馈),回馈需要告诉使用者可以对微互动「做什麽」。

 

2.31 反馈给与用户安全感

我们给与用户的反馈要尽量与用户本次的操作的相关,比如,用户下载文件,我们需要给与用户的反馈信息是,已开始下载,下载的进度和下载完成,如果反馈在细节点,我们在下载的过程中可以提升用户,”下载过程中会占用大量的带宽,也许用影响您浏览网页或者其他是上网操作”,反馈越是细节,用户在体验微交互的过程中的负面情绪就越少,提升用户在使用过程中的确定性和安全感。

 

2.32 反馈具有主次性

微交互的反馈直观也是比较重要的因素之一,可以让用户更好的理解规则,降低用户的认知成本,我们反馈给用户的信息应该都是准确且重要的,例如我们的消息提醒,一般都是在有几条就提醒几条消息,消息的传递需要做到少即是多,信息越是重要,反馈的层级就要越高。

 

2.40 循环与模式

循环与模式,我们可以将它理解为是规则的分支。比如,闹钟是你每天接触的第一个“微交互”了吧。眼睛还没睁开,闹钟就响了。你重重拍下去,这时就启动了“再睡一会儿”这个分支的规则,也就是“模式”。如何设计这个分支,最合理呢?你可以让它5分钟后再响,如果再拍下去,就别叫醒他了。“你永远叫不醒一个装睡的人”。这样合理吗?

也许不合理。更合理的做法是,拍第一次,5分钟后再响,拍第二次,3分钟后再响,拍第三次,缩短为1分钟。然后就一直响。因为你拍的次数越多,越有可能因为贪睡误事。

循环与模式,就是一次性的或者循环的分支规则。

 

2.41 什么是模式

模式指的是:执行一种不常用的展示形式(在某些情况下可能会影响到微交互主要要达成的目的)比如,我们的APP中都会有设置功能,我们在修改默认的设置的时候,其实也是对APP的规则的一次修改,让APP朝着我们想要的方向去展示。

我们都用过股票软件去看股票行情,在行情页面刚进去的时候,我们是根据A股、港股、美股这样的模式去浏览我们感兴趣的企业股票,然后我们将我们看好的企业添加到自选里面的时候,我们下一次在打开软件的时候,就可以在自选里看到我们感兴趣的股票,这便执行一次模式,模式便是在循环与循环不一样的展示形式,可能是用户自己设定的或者是软件提供的选择。

 

2.42 无限模式与一次性模式

正常的模式是指将一些规定好的操作单独拿出来到另外的空间根据用户的喜好去定义,但是我们在模式中也会分两种情况,一直是无限模式与一次性模式。

(1)无限模式

无限模式是指用户要在某段时间内去使用一种状态的时候才会选择开始,例如,我们使用键盘打英文字母的时候,我们想要大写和小写都是可以去切换选择的,只有我们的用户在需要长时间的去使用大写字母,才会按下键盘上的“Caps lock”去锁定大写状态,这种模式的好处是,用户不会忘记自己正在一个特殊模式中。

(2)一次性模式

一次性模式是用户自主开启,且执行一次便是结束,不再执行,比如我们用siri去喊一句“siri,帮我定一个早上8.的闹钟”,这时,sir会告诉我们定的是几号上午还是下午的闹钟,这个闹钟在执行一次便会失效。

 

2.43 什么是循环

循环决定了微交互的持续时间重复的频率,这个也和我们的规则的设定相关。

 

2.44 循环的分类

(1) 计数循环

即我们在给用户反馈前需要来回检查规定好的次数,发现了问题再给用户反馈。例如,我们的微信在网络不稳定的情况时,我们会看到微信会连续好几次的出现刷新,然后才会给用户网络不好或者断网的提示。

(2) 条件循环

即在满足条件执行后,可以进行自行的内部条件,比如,当我们的房租在没有到了交租的日子没有交的时候,就会收到缴费的提醒,过几天在不交就会在提醒一次,要是按时缴费了便不会在提醒。

(3)集合循环

即循环的核对数值,然后停止,和前面的计数循环有相似之处,例如我们短信系统,会对收到的信息进行系统的统计,然后发现有未读的信息,便会在角标上记录数值1.

(4)无穷循环

即循环开始后,除非人为的干预让它停止或者系统出问题的时候才会停止,否则会一直的循环下去,就像永动机一样。无穷循环分为两种一种是开放循环,另外一种是封闭循环。

(5)开放循环和封闭循环

  • 1)开放循环

即在满足条件后,执行一次便结束,miui有个功能是可以设定手机每天早上什么开始,当每次到达这个时间后,我们原本处于关机状态的手机便会开机,这个指令执行一次便不会在执行了。

  • 2)封闭循环

是根据一定的环境或者其他的反馈可以进行自行的内部调整,比如,当我们手机开机后,我们的手机屏幕的亮点会根据环境光而去调节。

  • 3)长循环

长循环可以理解为是一种陪伴用户在使用我们产品时候记录的一种微交互,使用的时间越长,这种记录就越多,比喻我们软件的搜索记录和浏览记录便是一种长循环。

  • 4)渐进揭示或渐进减少

长循环的另外一种情况便是当用户长期使用后对软件越来越熟悉后,我们可以对有经验的用户开放更加进阶的玩法比如一些快捷键,可以帮助用户提升效率。

长循环的另外一种情况便是渐进较少,即当我们的用户熟悉了我们的软件后,有些界面上的说明解释的提示可以适当的去掉,简化界面,对用户而言,干扰少了,也会提升使用的效率和交互的速度。

 

3 微交互的层次

微交互在产品中的应用场景也是比较丰富的,一般我们的用户首先感受到是微交互给予用户视觉层的体验,其次深入后是功能交互层的体验,最后是体验了一个容错性比较好的心理上的愉悦,也就是情感层。

视觉层主要给予用户感官层面的体验,交互层是给予使用上的效率体验,情感层主要是让用户体验后心理上有满足或者愉快的感受。

但是这些层面又不是绝对独立的,每个微交互设计都能在上述三个层面中找到单独或者组合,比如双击屏幕的反馈,就满足了视觉层面、功能层面与情感层面的三层优化。

 

3.10 微交互视觉层的应用

在视觉层,考虑的转场交互动作是否足够流畅,视觉是否美观,反馈交互是否有创意,是否加深品牌印象。

 

3.11相同的元素串联转场

推拉摇移是摄像中的术语。推指把镜头变焦到长焦端,使景物更近,拉则相反,把镜头变焦到广角端,使景物显得更远,摇指镜头跟随运动的物体做同方向的转动,移指镜头跟随动体做平行移动。这些手法都是经历过前人的无数字的实践所总结出来的道理。

我们在做交互转场也是一样,合适的转场是让产品添姿增色的重要手段之一,在iOS默认的转场效果就是页面从左往右去进场,但是想要在让你交互转场看起来比较舒服,就需要在细节上下功夫,其中比较常见的手法就是界面中有相同的元素的时候,让他们将他们串联起来,这样的交互转场会让你产品看起来更舒适。

 

3.12 卡片推开周围的元素

在安卓的Material Design提出Z轴的概念,在扁平化的界面上让产品有三维的层次感(三维就是X轴(左右)、Y轴(上下)、Z轴(前后)组成的立体世界,而二维就是只有X和Y轴的平面世界。)我们知道手机的界面是一个平面和二维的空间,Material  Design通过一些二维的表现手段,比如投影和动态效果,来构建Z轴(前后)的概念。

在这个基础上,我们可以在微交互上下功夫,例如当界面中的卡片比较多的话,我们想让产品的体验更具有层次感,我们可以通过卡片与周围元素的变化产生关联,营造微交互中的产品层次感。

 

3.13 降低认知难度

我们每个人在遇到自己不同的领域信息的时候,有些信息是用户不易理解的,而我们所服务的产品可能是来自各个行业的,针对比较专业的知识的时候,我们应该专门针对这种场景处单独的处理,降低用户的认知难度。

比如,我们在早上上班经常会用到美团单车,因为是共享单车,所以有的车部分零件会出问题也是比较正常的,在骑行的用户发现了车辆损坏的部位,却无法辨认报修的部位,所以美团单车的处理是将整车拆解,将不同的部位标注出来,哪里有问题可以点击直接报修。

同样的场景也会常常发生在医疗的产品中,比如,我们发现身体哪里不舒服的时候,比较快速的可以通过了解APP来快速问诊,但是通常我们不是医学专业的,所以往往无法准确的说出自己身上哪来不舒服,或者往往只能模糊的说出,所以,我们可以通过将身体部分拆解划分,方便用户及时说出自己哪里不舒服。

 

3.14 专属的元素动画样式

我们人天生都有好奇心,对新鲜的事物都有尝试的心理,我们在微交互的设计中,也需要具有创新精神,让用户在视觉体验层有与其他产品有不一样的观感,这样有利于树立我们产品的品牌感知。

比如,我们在点击TAP时候的特殊的动画呈现,点赞时候独特的反馈,都会在视觉层面给用户留下比较深刻的印象。

3.14 强化操作过程中的趣味性

下拉刷新是我们在产品中日常会使用的交互,现在的产品一般都不会使用默认的“菊花”的下拉刷新,一般会使用自己的IP或者更加有趣的MG动画,都是为了让用户在使用我们的产品时候在视觉层有新的体验,与其他的产品去拉开差距。

 

3.15 循环动画强化产品氛围

我们在酒吧857的时候,酒吧都会有气氛组,来让新来的客人比较快的融入到酒吧愉快的氛围中,或者一般商业区就过节的时候,都会将街道和广场装扮与节日相符的灯光,都是为了让客户快速的融入到气氛中。

我们在产品中也是,有到功能想吸引用户的目光,或者想让用户快速的融入到某节日到氛围中,都是可以通过循环都动画去引导用户。

 

3.20 微交互交互层的应用

通过控制转场样式,反馈样式与反馈时间可提高交互效率,帮助用户认知,提升产品数据。

 

3.21 交互行为主动联动性

我们都知道,我们手机的屏幕空间是有限的,有时候的功能布局方面可能不是那么的合理,这个时候,我们的微交互就可以起作用了,比喻,我们手机上滑当时候,就可以将某些用户比较常用的功能常驻在屏幕上方,当用户想去操作的时候,不用在滑回去在去操作,在体验上减少了用户的操作步骤,提升了用户在产品用户过程中的舒适感。

 

3.22 合适的元素出现在适当的时机

我们经历过这样的时候,当陌生人来找我们做某些事情的时候,我们的第一反应力都是比较抗拒的,但是熟人的话我们可能会因为各种原因不可以拒绝。

产品设计中也是一样,如果我们想让用户去应用商店去给我们的产品一个好评,肯定是不能一上来就给用户引导去评价,这样会极有可能会导致差评的,但是,我们可以利用用户“啊哈时刻”去提升用户的好评动机,例如,当用户觉得某内容不错的时候点赞了,收藏了,我们这个时候让用户去好评,这样好评的几率会大点,起码不会引起用户的逆反心理。

所以,当我们想要用户去为我们做某些事情的时候,一定需要找准时机,结合微交互,提升用户去完成某件事情的意愿。例如,当用户在浏览商品的时候,我们可以给用户发放优惠券,我们想让用户去分享我们的内容的时候,可以在用户在快看完的时候,出现分享按钮,都是可以通过微交互去让用户帮我们去做某些事情,以达我们想要的结果。

我们的知道豆瓣是一个社区内的产品,它是希望用户在豆瓣来发表自己的想法的,所以,当用户看到评论区的时候,它用将评论区给展开放大,吸引用户的注意力,从而加大用户互动的意愿。

 

3.23 提升用户使用效率

一个产品能否让用户高效的操作和使用,是产品好不好的指标之一,产品通过用户在使用过程中的高效体验,能让用户通过一些不经意的小能有“哇”感觉,能让用户感受到产品团队的良苦用心和匠人精神。

 (1)方便用户的操作

我们都在电商产品买东西的时候退过货或者发过快递,每次通过APP填写的那一堆地址都很让人头疼,我们在别的APP上复制了地址,打开菜鸟裹裹APP,系统能自动识别剪贴版上内容,自动跳转页面进入寄件页,将信息拆解为收件人姓名、电话、地址等默认填入,可补全信息或直接提交寄件需求,无需手动录入或一栏一栏的填写内容。这是将用户在进入APP前的行为做保留解析,当打开APP时,为用户预先多想一步,直接提供可能所需的功能,让用户减去层层点击进入功能页面的步骤,高效完成目的性。

我们去一个陌生的地方旅游也是一样,每次找酒店住处都是一件让人比较心累的时候,飞猪APP在在地图找房的的基础上,通手指在地图上画圈来定位,方便了用户自定义找房的用户诉求,给用户体验上的新鲜感。

 

 (2)减少两次操作

我们在日常工作和生活中,我们都不喜欢返工和重复的工作,所以,我们在设计软件的交互过程中,也是尽量让用户不要做重复的工作,避免引起用户焦虑的情绪,为用户提升使用效率。

比如,我们在微信给别人聊天的时候,可以因为各种的场景和其他因素,我们可能会给朋友发消息的时候会发错消息,在输入错后,我们可以针对单条的信息进行撤回和修改,便可以再次再次发送,不需要再次全部重新输入,因为大部分用户打错字可能只是个别的字会错,只需要单独修改那几个字就可以了。

另外还有一种情况是我们大部分的软件都是采用信息流的布局,用户在滑动很远之后在想在回来的时候,也是一件让用户比较痛苦的事情,所以大部分的软件会支持一键返回顶部,像微信的就是双击顶部就可以返回,大部分的软件都是会用户滑动到第二屏的时候,会出现返回顶部的按钮。

 

(3)为不方便而设计

因为现在的手机大部分都是触摸屏,当用户输入内容出错的时候,需要修改的时候,手指无法精准的操作光标移动,所以我们可以在设计操作上帮助用户去解决这个痛点,尽量为用户在操作中提供方便。

比如,夸克浏览器设计一个滑块来解决这个痛点,方便了用在文字输入中需要精准修改的问题,大部分的的文字输入工具也是同样的解决方案。

 

3.24 预判用户的操作

我们在看港剧的时候,一般都会看到这样的剧情,警察在行动的时候,因为场景比较特殊,一般是不能说话交流的,因为怕打草惊蛇。所以,一般在行动的时候,行动的队员们只需要相互打打手势,交流一下眼神,大家都都心领神会了。

所以,我们在产品设计的过程中,也需要了解用户的心理活动,所以好的微交互不仅仅需要满足用户当年的操作,更加需要能预测用户的下一步的操作,这样才可以更加高效的辅助用户完成操作任务。

 

(1) 预防用户的错误操作

我们的交互无论做的多么滴水不漏,也无法可以避免用户在操作的过程中发生各种失误的情况,所以,我们应该根据用户最常会做出失误的场景提前去纠正用户的操作,为用户去节省时间。

例如,我们在通常的使用中会有很多带有自己习惯的操作,我们最常用支付宝给别人转账的时候,常常会将自己转账金额输入到聊天框,所以每次当支付宝检测到用户只是单独输入了数字的时候,会用小的提示框去提示用户是不是要转账,将用户的错误提前告知。

 

(2) 根据使用历史预判

其实用户的操作使用历史有很多用途,一种是方便我们对用户的操作的习惯的了解,方便我们去改善用户的操作体验,另外一种用户就是我们通过储存用户平时操作和观看历史,方便给用户推荐相关兴趣爱好的信息。

因为现在互联网的迅速发展,基本上每个不同类目都会有各自的APP,每个APP都会有自己的账户,为了方便用户记忆和统一管理,所以大部分的APP都会接入第三方的登录方式,但是第三方登录的账户也是一般是两种到三种,所以会导致用户会忘记自己上次登录的是哪个账户,所以我们软件需要帮用户记住上次的采用的是哪个登录方式,通过微交互的形式来在用户登录的时候提示和告知用户。

 

3.25 为用户使用场景设计

产品在日常的使用的过程中,用户会遇到各种各样的使用场景,我们体验设计师需要针对用户经常在使用产品的过程中的不便去优化,这些小的微交互在用户使用过程中能增加生活的“小确幸”,让我们的产品能给予用户一丝丝温暖。

 

(1)站在用户的角度思考

在我们平时设计交互流程的时候,一般是保证了交互流程能够跑通,一般不会出现什么大的问题,但是,我们还可以从另外的角度去思考,是不是能做的更好,更深的一层。

扫码付款已经深入我们日常的生活,通常我们在超市买完东西让收银员去收款的时候,我们需要将手机转过去让收银员去扫,这样的使用场景在有时候拿的东西比较多的时候是极其不便的。支付宝在用户打开付款码的时候,只用轻轻将手机向下倾斜,二维码和收款的字体也会随之翻过去,方便对方去查看,因为收款和付款在支付宝的使用过程中也是比较常用的,这一设计便是考虑了用户在收付款中的不便的微交互设计。

 

(2)考虑场景提供选择

我们用户通常在做出某些操作,肯定会有下一步的操作的,我们应该考虑到用户某些场景的高频操作,给用户提供选择,缩短用户在使用过程的操作路径。

我们平时在截图的时候,一般除了发送给朋友去观看,其次便是在使用过程中遇到问题需要咨询,所以我们在用户截图后,可以为用户展示分享或者咨询的入口,为用户高频操作提供使用方便。

我们在日常截图在再到微信准备发送图片的时候,微信会将最新的截图以小窗的形式求提醒用户是否要发送,这都是基于用户的高频操作后提供选择的最好的例子。

 

3.25 进场告知用户隐藏的功能和操作

我们做设计的时候可能经常会遇到一些无理的要求,例如,这个功能需要强化,但是又不能去干扰用户,每次遇到这种需求,我们设计师往往都是比较痛苦的时候,例如当用户没有开通会员的时候,我们想给用户去展示会员的一些特权和首次开通的优惠,但是,用户要是没有开通,我们是没办法很好的去展示的,这个时候,我们可以通过微交互,在进场的时候,将隐藏的信息展开,然后过收起来,这样用户即看到信息,又不会影响接下来的操作。还有就是当我们上新某些功能的时候,想让用户去快速的去了解这个功能,这个时候我们可以通过演示动画的微交互来让用户去快速的了解我们新功能怎么去操作。

 

3.26 元素跟随页面的形态改变

我们的产品在操作的时候难免会出现各种状态,为了让每个状态出现的时候都比较符合用户的操作的习惯,这个时候我们需要考虑用户的场景来改变页面的布局,例如快手它的战略是一个内容分享的社区,它注重的是用户与主播之间的沟通,所以,正常的软件,当视频在播放的时候想看评论,这个时候的步骤都只能侧中一个,但是,快手它考虑到用户的体验,当用户在上滑的时候,为了不打断用户继续观看视频,视频内容会慢慢变小,然后固定,这个时候用户可以在看视频的时候也可以查看评论,方便用户与主播之间的沟通,强化了内容社区的氛围。

 

3.27 照顾边缘场景

一个产品它的交互是否比较好,我们看的是它是不是能满足用户大部分的使用的场景,所以,有的时候,当静态的交互无法去满足用户的一些比较特殊的场景的时候, 我们这个时候就可以考虑微交互的设计,让产品的交互体验能覆盖的场景比较全面。

例如,当我们在微信通讯录想根据用户的首字母去查找人的时候,一般左边的字母都会做的比较小,无法精准的查看到我们现在看到哪个字母,所以,当我们的手去点的时候,到了某个字母的时候会放大。再比如,我们因为开会将手机调成静音或者音量关了的时候,我们去播放微信的语音或者看视频,这个时候,APP会提升我们音量未开之类的,这都是考虑到极端的场景,让用户的体验更加顺畅。

 

3.30 微交互情感层的应用

通过趣味幽默化的转场与反馈动画可以降低产品的负面体验或者让用户产生愉悦感。

 

3.31 幽默拉近用户

当我们看到有趣的东西的时候总是想和身边的人去分享我们的喜悦,这是比较底层的逻辑,我们的APP产品也是这样的,当我们想让用户持续去体验我们的产品或者想要用户去主动的分享我们的产品,那么,我们可以将产品做的有趣一点。

比如,转转在登陆的时候为了吸引用户的注意力,它会在用户登录的时候做一个比较有趣的小动画,也消除用户在多一步操作时候的负面的情绪。

 

3.32 同理心场景

用户在使用产品的时候,总有会各种各样的问题和情绪,我们需要通过视觉缓解用户的情绪,通过设计唤起用户同理心,解决用户与平台之间的矛盾。

我们美团和饿了么点外卖的时候,订单超时配送是最让人心烦的事情,特别是遇到极端的情况,订单超时也是常发生的,所以,设计时需要在视觉、内容来换起用户的共情心理,从而缓解用户低谷的情绪,通过设计给用户带来温暖,降低用户的差评与投诉。

 

3.34 为特定场景增加仪式感

我们之所以喜欢去线下看演唱会和LIVE,一是可以和自己喜欢“爱豆”亲密接触,其次就是一种氛围感觉,而一般在线上看直播缺少这种氛围的仪式感,随着全球的疫情加剧,我们很多线下的活动和LIVE都不能开展,大部分都只能退而求其次在到线上去开展。所以,在大环境的趋势下,我们线上活动是越来越多了,我们需要将以前线上的思维转换,为线上观看体验增加仪式感和场景的氛围。

爱奇艺的电视剧在播放到一些比较“甜”场景的时候,都会在交互上下一些功夫,例如,当剧情放到有亲亲的情节的时候,会出现“心动震动”的彩蛋交互,提升用户在沉浸体验过程中的仪式感,让用户能更加能贴心的感受到心动时刻。

 

3.35 转场加载占位符

我们在日常的APP使用中,总会遇到像信号不好的情况,这个时候,我们心里是比较着急的,特别是比较紧急的情况,负面的情绪是比较大的,我们需要将这点考虑进去,为了避免用户在等待时候的焦虑感和负面的情况,我们一般会使用加载的占位符和加载的进度条,让用户知道我们的软件是在工作中,而且是在卖力的工作中,这样,可以缓解用户的负面情绪。

 

3.36 产品的仪式感

对于我们来说,仪式感是很重要的,比如结婚纪念日要去庆祝一下,生日的时候一定要和朋友去high一下,这都是来自我们生活的中的仪式感。

仪式感在产品中也很重要,他可以提升我们用户的幸福感,例如微信在给朋友发送生日快乐的时候,屏幕中会掉下蛋糕,在过年的时候发送新年快乐,屏幕中也会掉落红包,微信将我们日常生活中所需要的仪式感搬到了产品中,通过微交互来提升我们日常的幸福感。

 

3.37 3D touch判断用户的情绪

我们人都是感情动物,让微交互满足人们的日常的情绪需求也是很不错的角度,例如facebook的点赞功能可以通过人点击的力度大小去判断人当天的情绪,例如,点击的力度越大,说明你的心情比较好,或者对那个观点比较赞同,如果你点击的比较轻,说明的你心情不怎么好。

 

4 微交互实际案例的思考

交互是保证这个功能的流程能走的通,用起来没有问题,而微交互则是让用户用起来更顺手,是解决了交互做不到的事情。

 

4.10 评价内容增加流量曝光入口,信息层级优化

例如我们的需求是要在看房的列表处新增精选房源的功能,提升我们房源列表的点击率,让用户不用点进去就可以预判大致的其他用户对这个房源的评价,但是,产品方可能会考虑的一个问题是如果只展示一条房源精选的评价,可能会让用户以为我们是故意只放一条在上面,有故意哄骗用户进去的嫌疑。所以从产品的角度,会考虑多放几条,让用户感觉产品是好评如潮,且展示的不是刻意挑选的。

所以我们在最初给的设计方案可能是在列表上可以展示多条评精选评论,但是这种情况会导致在静态层面会出现一些视觉上的问题,有的列表有精选的评论,有的不够三条的展示,会导致列表也看起来不是很整齐,用户在阅读上的体验就会非常的不好。

这个时候,在不改变产品经理的需求的框架下,我们需要通过微交互的角度去思考,在经历过与产品和开发的反复碰撞下,我们发现,在不改变列表的结构下,我们需要通过微交互来解决列表不统一的情况。

首先,先要确定我们列表信息展示的位置,然后精选的评论信息在一个合适的位置上下去滚动,这样不仅仅决解决了列表高度的不统一的视觉问题,也可以通过动态元素提高产品的视觉层面的活跃度,吸引用户的视觉注意力。

 

4.20 细化产品的分类,提升转换率

在之前的版本中,顶部的TAP栏是可以切换房源、详情的选项,而在这次的新版本中加入了房源相关的功能,并把分小区和推荐功能一起放到首屏。这样在首屏,便把房源拆分为安居房,人才房,普通房,年付四个tab。滑到页面第二屏,一级到tab房源,详情,小区和推荐并慢慢的出来了,二级tab安居房,人才房,普通房,年付置于一级tab下方。

所以,这样页面就出现了比较影响体验的双tab,且双tab一直处于顶部,占用页面的高度资源,影响用户去浏览页面。

 

设计切入点

双tab的形式在静态视觉层面已经是无法在优化了,因为考虑以微交互的形式去解决当前的版本的所存在的视觉问题。

商品的tab作为当前页面的名称是可以不需要一直显示的,因此考虑将“安居房”,“人才房”,“普通房”,“年付”滑动到屏幕顶部时合并收纳进“房源”的tab内,这样处理即满足了用户需要发现改功能的需求,又满足了不占用页面过多空间的需求。

 

用户无法感知tab间的收起

由于需要用户滑动至屏幕顶部时将双tab合并,所以需要让用户100%的了解当前消失的tab何去何从,方便下次使用该功能时能方便且快速的找到。然后问题是,当用户滑动页面比较快的时候,tab的收起很难引起用户的注意力,这样对用户的体验是很差的。

 

方案:增加首屏双TAB之间的差异化,增加合并动画

方案1:运用「斗转星移」法,在用户滑动页面至二屏时,将“安居房”,“人才房”,“普通房”,“年付”作为关键联动元素,整体收拢至顶部Tab栏,并最后出现下拉小三角,告诉用户,原先的四个类目已经统一被收拢到一个类目中。这个收拢的动作虽然在动效表现层上,动静大了些,但是对新版本功能传递,避免用户误操作有良好的效果。

 

最终方案

最后我们在“安居房”,“人才房”,“普通房”,“年付”文字上部加入了图标, 增加用户对新功能Tab的感知,让一级Tab与二级Tab差异更加显性化。

 

实现价值

帮助产品强化新功能认知,帮助用户理清两个层级间的关系,避免用户误操作、误下单。

 

5 总结

成功产品的设计细节是必须在每个层面的体现,细节不仅仅让用户更加坚定的选择了我们,也可以让我们在竞争中脱颖而出,而微交互恰恰就是那个四两拨千斤的设计亮点。

 

原文地址:站酷

作者: Endings

转载请注明:学UI网 » 一篇文章看懂交互中的细节-微交互

日历

链接

个人资料

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

存档