首页

掌握这10条动画设计方法,让单调的界面“动”起来【UX】

seo达人


图片

通过汇总动画设计值得注意的十个方法,帮助大家进一步了解UI/UX设计中的动画应该怎么做~

 

一、从原型设计开始

无论是设计初学者还是经验丰富的设计师,在创建动画前都需要进行原型设计。

在原型阶段,对产品和界面进行打磨推敲,能够避免在后期动画设计过程中花费时间返工修改。

图片

 

二、符合物理定律

这条原则是指动画设计要体现现实中物体运动的规律,符合重力、惯性、摩擦等物理定律。确保每个元素都沿着预设的轨迹移动,同时考虑到形状、大小和其他物理特性。

通过遵循物理定律,动画能展现更多细节,为用户带来熟悉的感觉和更好的体验,避免动画过于生硬和单调。

图片

 

三、挤压/拉伸元素

在常见到的卡片式界面设计中,对用户的操作做出卡片收缩、放大、改变重心等反馈效果,让动画尽可能逼真。

图片

 

四、确保平稳移动

在现实生活中,物体不能一直匀速不变的运动,而是以抛物线的形式运动。把这个特性加入到动画设计中,用户与界面的交互会更加自然,缓入缓出的动画效果会更好。

图片

 

五、注意屏幕间的过渡

在APP中避免突然从一个屏幕切换到另一个,应该让用户有所感知,能够为即将发生的操作做好准备。

每款产品界面的过渡动画都不太一样,我们可以充分发挥想象力,让这类必备的翻页动画过渡的更有创意。

 

六、添加趣味性

为了让用户清楚地了解每一步操作之后的结果,并让他们将注意力集中在这一点上,可以让等待的过程变得更加具有趣味性。

例如在展示操作错误的场景中,可以弹出感叹号或叉号来告诉用户操作出现了问题,以及希望用户采取的操作。

 

七、划分层次结构

通过动效设计,可以很清晰地反映出界面中哪个元素更重要。因为最重要的元素通常会在动画的开头就出现,优先级最高,方便用户快速捕捉。

图片

 

八、提供视觉提示

对于刚使用某个产品的新用户来说,要想完全摸透这个产品的全部功能,需要花费很多的学习成本和时间成本,通过动画提示,可以显著降低初次使用产品的门槛。

例如,使用动画提示向新用户解释如何处理界面元素或者给出示例。

图片

 

九、确保动画时长与操作相匹配

考虑每一段动画应该持续多长时间,这样用户就不需要点击了某个操作,还要等这段动画结束了之后,再进行下一步操作。

另外,如果动画结束得太快,可能不利于观看导致用户无法理解。因此在最终上线前,要经过严格的测试和审核,确保每一段动画的时长都能与用户的目标相匹配。

 

十、考虑动画的类型

在设计过程中,我们要根据产品的调性和使用场景匹配最合理的动画类型,为产品带来锦上添花的效果。

例如,弹跳类型的动画不适用于太过正式的企业应用或者官网上,同理,过于单调、不起眼的动画放在娱乐类APP中也不太搭配。

 

最后

以上就是动画设计值得注意的十个方法,希望通过这些内容能让大家进一步了解UI/UX设计中的动画,让单调的界面“动”起来~


作者: Clippp

转载请注明:学UI网》掌握这10条动画设计方法,让单调的界面“动”起来【UX】

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


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


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



抖音变集团啦!还发布了新 LOGO

seo达人


图片

所以说,设计的话题性也是至关重要的,要嘛是品牌自身的影响,要嘛是设计团队在行业中的影响力。一个常规的设计也许很完美,但是不一定被大家所讨论,这样也就是默默的出现再默默的淡化和被接受。具备话题性的设计,无论是针对设计好或者不好的讨论,至少在营销的角度来说,传播性已经足够了。

图片

我们言归正传,今天黑马哥也随波逐流一下,也来和大家分享一下关于抖音集团的 LOGO 设计。“字节跳动”变成了“抖音集团”,LOGO 从原来的四条跳动的竖线变成了字母“d”和“y”进行艺术结合的图形。这也是为了和抖音产品 LOGO 形成视觉关联,整个造型非常柔和,就像飘动的丝带一样青春活泼。

图片

通过和抖音的 LOGO 进行对比,抖音集团的 LOGO 会显得更“正”和具备商务型的特征。而抖音产品的 LOGO 会更娱乐性一些,两者既有关联性也有差异化。借助抖音的影响力可以让公司的知名度更高,不过个人觉得字节跳动这个名字还是挺好的。

图片

在 LOGO 配色上面,选择了三种年轻化的颜色:蓝色和绿色,而这个颜色也是延续了字节跳动原来的色系。这三个颜色组合还是比较容易呈现效果的,蓝色和绿色的搭配在设计层面都是比较容易配色的,不仅会呈现年轻活泼的风格,设计师进行设计延展的驾驭度来说也是非常容易的。

图片

新的字体上面,整个字形和之前的比较接近,在一些笔画上面进行了微调,比如减弱了“斗”部的笔画倾斜感。一些圆角的部分改成了直角的表达,封闭图形部分开了一些缺口,字体笔画更纤细了一些等等。和 LOGO 图形部分搭配感还是不错的,也能控制好整体的视觉平衡度。字形是比较稳重的,也符合集团公司的特征。

图片

有很多设计师根据新 LOGO 的图形风格和配色,联想到了飞书的产品 LOGO,如果将两个 LOGO 一起对比观看的话,还是有异曲同工之处的。

图片

下面来看一下整体的组合效果,对这个改变和抖音集团的 LOGO 你会打几分呢?

图片

 

设计总结:

抖音集团的 LOGO 图形设计主要是以名称首字母进行组合,通过艺术化的处理形成一个全新的视觉符号。现在大型的公司都喜欢将品牌符号化,以此来强化用户的记忆度和识别度。

通过名称首字母进行 LOGO 图形设计也是较为常用的创意形式,无论是单个字母还是多个字母组合,都很容易搜索到众多的案例作为设计灵感。比如我们在浏览器中搜索字母“d”或者字母“y”的 LOGO 设计,都会出现非常多的案例,有了初步的案例作为灵感,设计的时候方向感也会更强一些。

图片

 

以后大家在进行 LOGO 设计的时候,如果没有更好的创意想法,就可以试试首字母这个创意方向。除了字母以外,数字也是一个好的方向,只是数字的重叠性会更高一些。


作者:黑马青年

转载请注明:学UI网》抖音变集团啦!还发布了新 LOGO

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


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


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



新手学习字体设计的高效三步法

seo达人


一、临摹

临摹是新手学习任何技能都需要经历的阶段,学字体设计自然也不例外。即你要去收集一些优秀的字体设计作品,然后照着它们来临摹。

很多人会瞧不上临摹,认为照着参考一模一样做谁都会,事实上真要做起来,很多人都临摹不好,而且临摹的方法也不对。那么,如何正确地临摹呢?

 

1、不要像抠图一样,用钢笔工具直接沿着参考的外轮廓描摹。

而是要照着参考画出文字中的主要笔画,诸如:横、竖、撇、捺、点、提、勾等,然后,用这些笔画照着参考的样子一笔一笔把文字搭建出来。

图片

 

2、如果遇到相同的笔划,不要重新画。

而应该把已有的笔画直接复制过去,有时可能需要做一点简单的变化,这么做可以最大程度上保证笔画的统一性。

 

3、刚开始可以直接在参考的基础上用笔画来搭建文字。

就好似描摹一样,与参考一一对应,等熟练之后可以自行绘制笔画,通过视觉来确定笔画的粗细、长短、结构、摆放的位置等等。

举个例子,如果要临摹下图的字体设计,我们可以先把它的笔划画出来,如果抓不住笔划的特点,或者线条画不流畅,可以在原参考上把笔划描摹出来。

图片

图片

接着,再根据参考画出文字的字框,以确定文字的宽度和高度。

图片

然后,照着参考在字框里用笔画把文字组合出来。

最后,再仔细观察文字笔划的尺寸和位置是否正确,尽量做到与参考一模一样。

经过一段时间的临摹练习,你不仅可以更熟练地使用钢笔工具,同时也能掌握一些字体设计的风格、笔画特征、字体设计的流程等等。

 

 

二、通过参考,举一反三

当临摹做得已经很熟练以后,就可以开始第二步的练习了,即遵照参考中字体设计的风格、特点,设计自己想要的其他文字。其实在实际工作中、很多设计师也会用这种方式来设计字体。想要做好这项练习,首先你要做的是对参考作品进行深度的分析。

诸如对字体类型、字形、字体风格、重心位置、中宫松紧、笔画粗细、笔画结构、笔画的对齐关系、有哪些特殊的处理技巧等特点进行分析。

比如我想根据下图的字体来设计文字:起来嗨。那么我就先要对参考中的字体设计进行分析:

图片

该字体为无衬线体,风格简约而现代,笔划并没有讲究严格的对齐,甚至刻意做了错位处理,各文字的字面大小也不统一,呈现出灵活多变的感觉、笔划较粗,横竖笔划的粗细一样、横笔划右端有类似直角三角形的衬线、部分笔划交汇处会把横笔划做断开处理、点笔划和个别捺笔划被设计成圆点、口部首被设计成圆圈等等。

把参考的设计特点分析出来以后,紧接着需要把我们想设计的文字,用一个常规的字体呈现出来,由于参考中的字体设计是无衬线体,所以我们可以选择黑体作为字体设计的观察对象,看看该文字中有哪些笔划可以直接挪用参考中的,有哪些则需要自己来设计。

接下来就要着手画草图了,需要注意的是,参考中的文字做了整体垂直向上倾斜,在设计字体的时候如果直接设计成倾斜状态,那么很多笔划处理起来会不方便,所以最好先设计成水平状态的,等确认无误后再做倾斜扭曲。

图片

另外,在画草图的时候要多做尝试,对于原参考中没有的笔画,我们要从现有的笔画中找到规律,这些部分的设计没有绝对的标准,关键是要好看、要协调、要与整体的风格相符。比如“起”字下边的“人”笔划,可以借鉴参考中“辶”的处理方式。

草图画好后就可以去电脑上做最后的执行了,在执行的过程中需要注意以下几点:

 

1、草图不是标准,只是执行的思路。

所以在执行的过程中仍可以进行调整、修改。

图片

 

2、一边设计一边规范。

如果你不是在专业的创作本上绘制的草图,那么你的草图通常是很不严谨的,那么在电脑上操作的时候就要边设计边规范,比如统一笔划的粗细和结构、统一笔划断开部分的间距、注意某些笔划之间的对齐关系等等。

图片

 

3、与参考对比。

字体初步设计完以后,要把其与参考放在一起进行比较,看看还有没有处理不到位、看起来不够舒服的地方,水平状态调整完以后,再把文字按照参考的样子往右上方做倾斜处理,然后继续观察以及做最后的完善。

图片

图片

 

 

三、原创字体设计

如果你能熟练地做到通过参考举一反三,那么你的字体设计能力已经初步形成,接下来就可以做原创了。做原创字体设计时我们要注意以下几点:

 

1、做原创也可以找参考。

只不过不要完全按着一个参考来做,我们可以结合好几个参考,也可以在参考的基础上加入自己的想法、做出一些改变等等。

 

2、设计的流程

A.根据要设计的文字、找到符合设计需求的参考。比如我需要设计的文字是:奇遇惊喜,并想设计成有种浪漫、古风的感觉。所以我找了下图的字体来做参考(造字工房逸锋体),该字体字形修长、结合了宋体和黑体的特性,笔划横细数粗但没有衬线,现代而优雅。

图片

B.加入自己的想法。用常规的的字库字体把要设计的文字呈现出来,与参考放在一起进行构思。参考中的字体虽然现代而优雅、但是作为字库字体,独特性自然会有所欠缺,另外笔画还是略过复杂,没有古风和浪漫的感觉,所以我想把笔画继续做一些简化,并加入祥云图形。

图片

图片

C.画草图。

可以先画文字的骨骼部分,以确定文字的基本架构,文字的骨骼决定了文字的基本气质,比如高矮胖瘦、中宫松紧、重心高低、笔画走势等等,这也是设计师可以大做文章的地方,很多优秀的字体,在骨骼上就与普通字体有着很大的差异。这里我把文字的骨架设计得比参考更为修长。

图片

骨骼画好以后,再添加字体的肉身,即笔形,笔形决定了笔划的粗细、端点、衬线、笔划交汇处的处理等细节效果,这些部分的变化也非常多,设计师可以根据文字本身的特点和参考进行多种尝试。

图片

作为字体设计师,了解一些不同笔形的处理技法也很有必要。

图片

▲ 部分横笔画的笔形表现。

D.把草图导入到设计软件中执行。草图画好以后就可以去电脑上执行了,执行的步骤和注意事项与“举一反三”里提到的差不多。

图片

 

3、注意文字的统一性。

在设计字体时,要注意整体的统一性,要让人感觉到这是一套字体,所以原则上来说,每个字的字面大小、重心位置、中宫、相同的笔画等等,都要统一起来,当然,不包括某些为了效果灵活而刻意作出的一些特殊处理。

图片

图片

 

 

图片

临摹、举一反三、原创,简单的三步就能帮你从一个新手变成一个熟手,其实除了字体设计,很多其他类型的设计同样是这个道理。当然,最重要的是你要能走出第一步,先做起来,然后要坚持下去。


作者:葱爷

转载请注明:学U网》新手学习字体设计的高效三步法

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


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


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



斩获6项国际设计奖,百度大字版APP助力老年人跨越数字鸿沟

ui设计分享达人


近日,凭借卓越产品设计能力和社会影响力,百度大字版从数以万计的参赛作品中脱颖而出,接连斩获德国IF、红点、美国Muse Creative Awards 金奖、意大利A’Design 铜奖、中国智造DIA佳作奖以及C-IDEA最佳设计奖共计六项国际设计大奖,设计价值备受权威机构、媒体的肯定。

与此同时,百度大字版的设计、用研、产品相关负责人也收到《设计》的专访邀请,就“用设计弥合数据鸿沟”专题分享了百度APP大字版的适老化设计。

《设计》杂志由中国科学技术协会主管,是中国唯一一本由中国工业设计协会主办的全国性期刊,一直站在国家转变发展方式的政策高度,沟通设计界和产业界的迫切需求,展示全球设计精英和设计教育界的新思维和新作品,促进社会公众设计意识的提升,推广中国设计之国际影响。



当前,我国正面临老龄化问题的严峻挑战。统计表明,中国的老龄化人口已达到2.64亿,且这一数据仍在持续增长,而老年人在生活、情感上都面临诸多问题。

首先,老年人在视觉、听觉、肢体、认知方面都出现了不同程度的退化,无法平等地获取信息和服务。其次,年轻人涌向大城市寻找机会,老年人被迫成为空巢者,疫情的发生更使亲人长期两地分离,老人情感孤独缺少陪伴。此外,疫情的爆发也促使线下服务转为线上化,老年人不能很好适应这一转变,遇到很多困难。

  • AGING 老龄化
  • AGE-FRIENDLY DESIGN 适老化设计
  • "COCOON ROOM" OPTIMIZATION “茧房”优化

百度大字版是一款运用AI技术专为老年人打造的综合型内容与服务App,帮助老年人更平等便捷地获取信息与服务,轻松乐享数字新生活。作为用户体验设计师,更深层地了解用户,并提供满足目标人群的体验是设计师的使命,未来还将继续深耕于适老化设计和差异化创新,不断改善产品体验,提供更满足老年人诉求的产品,使老年人更平等便捷地获取信息与服务。


///

精细系统的适老化设计


目前行业内缺失成体系的老年人研究报告,针对老年人的研究资料分散在建筑/平面/医疗/家居等各个行业,同时业内也缺少针对老年人系统的设计标准或设计指南,现有无障碍设计标准针对残障人士,且部分标准只适用于PC端,不适用于老年人和移动产品。

因此在进行百度App大字版的适老化设计时,设计研发团队系统的研究了老年人面临的问题、PC端无障碍设计标准及其他相关资料,产出了系统的移动端适老化设计标准体系,同时结合百度App大字版实际场景产出了解决方案。适老化设计包含:易阅读、易收听、易操作、易理解四个方面。

易阅读的手段包括增大字号、使用符合老年人生理、心理特征的颜色、提供有效的反馈提示等;易收听的举措包括:增大音量、降低语速等;易操作的改良包括:增大触控区、降低手指运动距离和操作精准度要求、提供明确的操作反馈、隐性操作显性化及辅助用户输入等;易理解的改善包括:采用通俗易懂的文案、提供清晰明确的图标设计、提升信任感、提供即时的帮助等。



///

AI赋能,情感陪伴

由于很多年轻人去大城市寻找机会,导致产生很多空巢老人,他们情感孤独,缺少陪伴。疫情的爆发,更使老年人在节假日也难以与家人团聚。因此百度App大字版通过语音合成等AI能力,还原儿孙亲友的真实声音,用于全局内容播报朗读,使老年人感受到至亲至爱仿佛陪伴在他们身边,缓解老年人的孤单和思念之情。全局语音朗读也能解决老年人的阅读障碍和长时间阅读导致的视觉疲劳问题,同时可以解放双手,使老年人随时随地听朗读。



///

丰富内容,充盈生活

百度App大字版围绕老年人的实际生活需求,依托百度的内容生态和个性化推荐技术,提供了符合老年人兴趣的图文和音视频内容,一站式满足了老年人的内容消费需求。在设计上,通过AI技术,对视频增加智能字幕,方便老年人获取视频信息;在内容流的操作上,通过统一的容器和流式交互,为老年人提供便捷的操作体验,使他们更方便、平等的获取信息和内容。


///

生活助手,便捷服务

百度App大字版还提供了多种实用工具,满足老年人疫情时代和日常的生活诉求。疫情导致线下服务线上化,为了帮助老年人适应这一生活方式的转变,百度App大字版提供了在线政务工具;很多老年人承担了教育孙辈的责任,因此,大字版提供了一些辅助教学工具,帮助他们带孩子。更有疫情地图、垃圾分类等贴合日常生活场景的工具,使智能技术更贴近、融入老年人的生活。



// 以下对话来自

《设计》与百度App大字版体验设计团队

《设计》:在设计前期的调研阶段,发现了哪些用户需求和体验的痛点?数字时代,老年人群有哪些被忽略了的需求? 

LU:我们的调研发现,中老年用户朋友在使用移动互联网产品时,最主要的体验痛点是由于生理老化带来的。随着年龄增大,他们在判断力、操控力、表达力、感官力的老化不可避免,这些老化也直接影响他们对智能手机的使用。 

首先,随着年龄的增长,中老年朋友的信息筛选和判断力在逐步变弱。相比年轻人,中老年人更容易上当受骗。他们常见的受骗类型包括免费领红包、赠送手机流量、优惠打折团购商品等。因为成长环境的影响,中老年人是更信赖权威的,而老化带来判断力的下降,让他们对权威信息源的依赖度更高。在调研中他们提到,像“官方发布”(比如CCTV、地方电视台发布的官方新闻、人民日报的新闻),以及“疫情辟谣”(比如百度App在2019年疫情爆发初期推出的新冠肺炎辟谣栏目),他们觉得很好、很信赖,能帮助他们判断真伪,甚至会在家族群里向其他人推荐。由此可见,信息流产品应该为中老年人提供更多权威来源、真实可信的信息。 

其次,中老年人的操控力在下降。这导致他们接触信息的自主性变弱。在选择手机App上,他们更依赖于通过别人推荐,或者看到别人在社交平台的分享后下载,或者是选择手机自带的App。相比年轻人,他们很少自己主动去应用商店发现一些新的App。 

再次,中老年人的语言组织和表达能力下降。在组织的中老年用户座谈会中,设计团队深刻感受到他们的表述能力明显不如年轻用户。这表现在老年人的表达有很多重复的地方,中间也会夹杂大量“嗯”“就是”“呢”“吧”等语气词。他们在使用语音交互类产品时表达力差,加上有些用户还有方言,这些都对语音交互、语音识别产品的准确性带来了更具挑战性的要求。 

最后,随着身体机能的老化,中老年人的感官能力也会下降。对手机使用影响最明显的是视力衰老,会导致中老年人看不清小字,对色彩分辨力减弱,出现老花眼等问题,也容易眼疲劳。因此,手机App的文字排版、界面颜色、音视频功能的适老化就显得尤为重要。 

《设计》:要做出理想的适老化设计需要综合运用哪些学科的知识? 

小军:移动互联网产品适老化设计研究涉及面非常广,要求学科背景包括设计学、工效学、心理学、应用数学、社会学等学科和专业。 百度App大字版工作中研究了大量的跨学科文献和研究成果,有效指导产品具体设计工作包括:设计学:对WCAG国际设计标准研究;标识系统无障碍设计研究;移动端中文阅读舒适性研究;工效学:人体手指移动设备屏幕触控区研究;老年用户连续性操作行为研究;心理学:老年人心理特征中关于颜色研究;移动端产品中反馈设计的情感化研究;认知心理学下的移动端产品研究报告;社会学:老年人言语交际障碍实证研究;老年人听觉审美偏好研究;老年人言语交际障碍实证研究;应用数学:用户研究团队开展基于用户数据分析和基于目标用户已有数据用户特性研究。 

雷哥:除了设计专业知识,团队在适老化设计过程中运用了大量用户研究领域的知识,洞察中老年用户的生理老化特点和心理需求,帮助设计师们制定出适合中老年用户需求的适老化设计标准。 

在研究中,一方面运用了社会学、心理学领域常用的用户访谈、问卷调查、座谈会等方法,另一方面还引入了人类工效学领域的眼动实验法。通过科学、严谨的实验,评估不同设计方案在不同使用场景对用户主观体验评价指标和客观眼动指标的影响,最终形成了一套完备、成体系的适老化设计规范,可用于指引资讯类/阅读类App的适老化设计改造。规范明确了搜索、浏览、长文阅读、辅助信息(如功能按钮、设计页面)不同手机阅读场景,标题、摘要、正文等不同信息层级下,理想字号、行距和粗细组合,并给出了不同灰度颜色的全局最小可辨识字号。 

相关研究成果也已撰写成2篇论文,其中《Improving Smartphone Reading Experience for Middle Aged and Elderly Users : The Effect of Font Size, Line Spacing and Stroke Weight》在第24届国际人机交互大会(HCII2022)发表;《中老年移动端数字阅读最小可辩识字号研究》被中文核心期刊《包装工程》录用,即将发表。另外,团队也与中国老龄产业协会合作,发布了《移动互联网应用程序适老化体验规范》团体标准,共享我们的经验,希望带动移动互联网行业关注中老年用户的需求,帮助其他产品提升中老年用户的阅读体验。 

做出理想的适老化设计需要对老年人群体有深入的了解,需要搭建系统的适老化设计理论体系,在前期用户研究阶段需要综合运用生理学、心理学、行为学和社会学等相关的知识,对老年人日常生活和使用移动App所面临的问题有深入系统的分析。在提出解决方案的阶段需要专业的交互设计知识,对人工智能技术有一定的研究,以及对现有业务自身拥有的资源有深入的了解,这样才能提出系统且深入的适老化解决方案,而不只是停留在放大字号和功能精简层面。 

《设计》:针对老年人对有尊严的生活的渴望,除了通过无障碍设计适应老年人群体在生理和心理上的变化之外,百度的适老化设计是否有考虑在实践中帮助老年人群体实现在数字时代中“进化”,来一场跨越数字鸿沟的双向奔赴? 

小军:百度App大字版体验设计目标解决老年人不能用、不敢用、不会用的问题,百度App大字版完成适老化无障碍设计覆盖,解决了产品不能用的问题。 

百度App大字版通过降低操作成本和帮助老年人学习成长,解决不敢用和不会用问题,实现在数字时代中的“进化”,具体措施包括:大字版依托百度领先AI技术,在产品实践中应用语音搜索、图像识别降低输入成本,实现全场景内容朗读降低信息获取成本,通过AI技术应用降低使用成本,解决不敢用的问题。同时计划在产品中增加针对适老功能的分步,直观的教育视频,解决不会用的问题。 

《设计》:大数据时代如何实现“茧房”优化? 

火韦:这个是很专业的问题,深入到了老年人内容消费的核心体验。我尝试片面地回答。 

一般来说,“茧房问题”是指“接收”,就是个性化推荐系统会让人们困在原有的兴趣点上,从而接收不到不同的信息。百度推荐系统一直在解决“茧房问题”。这里重点说百度大字版对中老年用户需求的特别处理,增加用户接收内容的多样化。 

一是,鼓励用户主动兴趣表达,通过合理的引导,让老年人主动表达自己的兴趣点、关注点;同时关注用户对推荐偏好的意见反馈,灵活调整内容推荐;二是,搜索和内容推荐的结合,参考用户的搜索意图,补充实时兴趣点到内容推荐策略中,通过搜索拓展用户对搜索相关领域和兴趣的认知边界;三是,通用资讯和兴趣的满足,在个性化的基础上,会增加平台老年人通用的重大新闻事件和垂直领域热门内容的适度推荐;四是,专项策略和体验评估,包括打散同类的、连出的或霸屏的内容,增加多样性,强化兴趣探索,一年多以来,持续进行实验优化,降低茧房用户占比,通过用户调研阶段性收集用户对多样性的体验反馈。 

茧房问题还有一层含义是“接受”,就是人们会抗拒接受新信息、甚至是新事实。特别是老年人有一些固有的观念和习惯,很难改变。一是,进行科学辟谣,破除错误的意识,倡导健康的生活方式;

二是,鼓励老年人多使用搜索,主动拓展认知边界;三是,在用户消费图文和视频时,系统会出相关词,用户一键搜索得到新知识。此外,今年还推出了“交朋友”模块,通过互动课堂和社区讨论,让老年朋友更好地接受新信息。 

《设计》:老年人使用智能设备进行网络交易时的信息安全和交易安全如何保障? 

火韦:老年人在使用智能设备,已经从简单的浏览信息、开始更多地进行电子购物,涉及到相对复杂的网络交易过程。 

百度App大字版在早期版本就关注到了这个问题,从以下方面持续优化。

一是,我们会主动打压低俗、低质的内容和商品,并给优质和权威的第三方打上官方标,引导老年人识别来源;

二是,我们也加入了百度保障,并且专门推出了老年人保障官网和专属处理流程,对平台发生的网络交易进行提前保障;

三是,推出“暖阳热线”400专线电话,随时与老年用户进行沟通。 

《设计》:在适老设计中,AI技术有哪些独特的功用? 

雷哥:在适老化设计中应用AI技术,可以更好地解决老年人在生理和心理上面临的现实问题,满足老年人的信息获取和情感陪伴诉求。例如,在信息获取层面,通过语音识别和图像识别技术,可以改变传统的输入文本的搜索方式,大幅降低老年人的搜索成本,使老年人仅通过说话或拍照的输入方式即可更方便地答疑解惑,获取新知。AI技术在视频场景也可以发挥作用,通过智能放大字幕和智能添加字幕,可以帮助老年人更好地获取视频信息。通过声纹识别和声音合成技术,我们也可以帮助老年人录制合成亲友声音,用于全局内容朗读,让与亲友分隔两地的空巢老人体验如同亲友在耳畔般的朗读,获取跨越时空的情感陪伴;同时,语音朗读能够解决长时间阅读带来的视觉疲劳问题。这些都得益于百度在人工智能领域的技术积累,所以,AI技术不仅可以在无人驾驶等前沿领域发挥作用,也可以通过产品化解决老年人面临的实际问题。 

《设计》:适老化设计的研究和开发在MEUX部门处于什么位置? 

雷哥:MEUX团队一直很重视适老化设计的研究,很早就启动了相关的专项课题并持续投入。在工信部下发互联网应用适老化及无障碍改造专项相关指示文件之前,我们就已经在进行适老化设计的相关研究和探索,并且研发了公司内的首个适老化产品——百度App大字版,因此我们对国家互联网应用适老化改造的响应是非常积极和及时的。我们的适老化设计研究及产品研发的成功经验,也推广到了公司内部各个产品团队,为公司内移动应用的适老化设计提供了参照标准。在公司外部,我们也与老龄委合作制定了国内首个移动互联网应用适老化设计要求的团体标准,将我们的经验推广到整个行业,形成更加广泛的影响。 

小军:百度MEUX部门配备用户研究、视觉、交互、运营完备的各职能深度参与并持续研究适老化设计,支撑产品建设和持续升级,同时,在学术论文发表、行业团体标准建立、国际奖项申请上均有显著的成果产出。



《设计》:融入老年人服务生态,百度与哪些行业展开了怎样的合作形式?

火韦:百度App大字版的目标是:成为中老年生活的必备App,服务于生活的方方面面。为了实现这个目标,与公司内部相关部门、政府部门、行业伙伴进行了广泛合作。

一是,到今天,百度App大字版已经是拥有搜索、AI能力、图文、视频、直播、电台、小说阅读的综合内容消费平台。在公司内部,多达10多个部门的200多位同事参与了百度App大字版的开发和运营,其中包括搜索、语音搜索和语音智能处理、百家号内容平台、信息流策略、小程序和小说等兄弟业务。

二是,我们积极响应政府相关部门的倡议,全面进行适老化改造,并与百度关怀版一起申请并通过了《移动互联网应用适老化设计要求》团队标准。同时与中国老龄协会一起推出了《老年智能科技大赛》。

三是,在服务生态上,与养老行业机构和企业进行深入合作,包括与红松学堂、人人讲合作推出“交朋友”社区,引入百度健康、薄荷营养提供健康功能,引入喜马拉雅和懒人畅听的小说、相声、评书等娱乐内容。

同时,我们也与这些伙伴一起培育养老市场,让更多的人关心老年群体在智能时代的难处。比如我们在父亲节那天全网推出“你先忙,爸没啥事”活动,用八张大图,说出了父亲和孩子打电话时想说但没有说的话。

《设计》:针对老龄化群体,百度在软硬件开发方面还有哪些具体的长短期规划?

火韦:从2021年1月推出以来,百度App大字版一直专注于为老年手机用户提供友好的内容和服务。这是一个复杂的持久过程,还在苦练内功,与用户沟通、了解他们的需求、喜好和习惯,不断推出新的App功能(电台、视频内容、搜索、AI能力、课程等)。这些业务都有向智能硬件、线下业务延伸的可能性。

《设计》:在做适老化设计的过程中,作为设计师、工程师,你们收获了怎样的体验?

LU:怀着同理心和使命感来设计产品。中老年人是我们的长辈,他们年轻时为社会、为国家贡献了很多。当他们年迈,因为身体老化在融入信息社会面临困难时,我们有责任、有义务去帮助他们,让他们能够轻松、愉快、便利地享受信息生活。在此,我们也呼吁更多的移动互联网App、设计师和产品经理参与进来,推进移动互联网产品的适老化升级,帮助中老年人享受信息社会,为中国的信息无障碍建设贡献自己的一份力量。
小军:作为设计师,参与多轮的用户访谈,扫公园接触真实用户收集使用反馈意见。收集政府、竞对、研究机构的情况。这让我们对老年用户有了更深入的认知。产品设计中相比功能上的优化,情感上的关怀也是内在需求。我们的着眼点从无障碍设计,深入到情感化设计中。

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

作者:腾讯ISUX团队    来源:百度MEUX

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

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

品牌定位,抢占用户心智第一步

ui设计分享达人

在产品日趋同质化的背景下,品牌价值得到凸显,新老品牌不断更新品牌内涵,以期更加靠近目标人群,抢占用户心智。作为品牌经营的第一步,品牌定位成功与否决定了后期的品牌建设,品牌定位重要性可见一斑。


品牌定位是企业建立与目标市场有关的品牌形象的过程和结果,使产品在用户心中占领一个独特位置,当产生某种需求时,能第一时间想到该品牌,从而使用其产品。

本文将通过实际案例,详细介绍品牌定位的经典思路STP(Segmentation市场细分,Targeting确定目标用户群,Positioning定位),为品牌进入新市场、品牌诊断、品牌再定位等提供方法论借鉴,也能给不同阶段产品和设计迭代提供方向牵引。STP中涉及的Segmentation即“市场细分”也同样适用于人群/用户细分,服务于产品精细化运营。

1. 什么是品牌定位?

品牌是如何做到家喻户晓的?举个例子,当有些用户产生搜索需求时,他们的第一想法是“百度一下”,而不是“我要搜索”。百度作为一个品牌,在中国市场已经成为搜索的替代词,反应出品牌对用户心智强大的作用力。


打造强品牌的第一步就是品牌定位。不管是创建新品牌还是更新现有品牌,品牌定位策略会影响业务发展的方方面面,不仅是营销策略,还包括产品开发、用户体验等。


那么,什么是品牌定位?简单讲,品牌定位就是决定企业希望在用户心目中是什么形象的过程。以苹果公司为例。苹果作为一家科技企业,在全球范围内被熟知,并在诸多同类科技公司中独具魅力,受到用户的喜爱与追捧,这不得不得益于成功的品牌定位。


苹果赋予品牌三大内涵:Think Different,Tech that works以及Your privacy is safe with us。这些品牌内涵成功让苹果与其他科技公司形成区隔度,在用户心智中占据独特位置。在用户看来,苹果是与众不同的、走在科技前沿的、创新突破的、隐私安全受保护的,这些品牌形象正是成功定位的结果,必将成为公司强大的品牌资产。


除了能够让用户快速识别、在众多竞品中脱颖而出外,品牌定位还会对定价策略和销量产生影响。如果产品定价更多依据高质量、高品质,同时品牌也将高质量、高品质作为定位点,那么在用户心目中,产品价位会很自然地被合理化。当做购买决策时,用户会被品牌独特内涵吸引,快速促成购买,帮助企业提升市场份额,同时增强用户忠诚度。

2. 品牌定位如何做?

品牌定位的基本思路是STP(Segmentation市场细分,Targeting确定目标用户群,Positioning定位),即将整个品类市场中的消费者划分为不同细分人群,识别各类细分人群的特征和需求,并结合竞争情况、企业战略等因素,选择其中一个或多个细分市场进入,形成品牌定位,对每个目标细分市场进行品牌营销。

从中可以看到,市场细分只是手段,定位才是目的,即S+T=P。


Step 1:Segmentation市场细分

市场细分本质上是根据消费者的差异,将整个市场切分成不同部分。用于细分的维度/标准主要有四方面:地理因素、人口学因素、心理因素和行为因素。

其中,市场细分普遍使用的维度是人口学因素,比如女性消费力、银发经济等,就是按照性别、年龄等维度进行的细分。这一方法简单高效,实用性强,但也存在一个很大的问题,即使用户在这些方面很相似,但内心的诉求可能是完全不同的,导致细分市场内部差异很大,这就违背了细分的初始目的。


为了解决这一问题,市场细分会使用心理因素,从最深层的情感需求出发,确保每一细分群体内部高度相似,而不同群体之间高度区隔。

细分用户情感需求的常用解决方案有Needscope、Censydiam等,通过“个人-归属”和“释放-压抑”两个维度,相互作用,将用户情感需求划分为6个或8个类型,从而实现对某个市场的人群细分。

以Needscope为例。Needscope的心理学基础是荣格的原型理论。荣格认为,原型是天生的倾向,在影响人类行为方面发挥作用。基于此,将人类情感需求划分为六大类:有活力的、充分自信的、有能力的、关怀的、被动的、无忧无虑的。应用于不同品类时,对类型的描述可做调整。

在用Needscope做市场细分时,通常会使用投射工具挖掘用户对品类的需求,形成该品类下用户的情感需求细分。以资讯类APP为例,通过投射工具,挖掘到用户对资讯类产品的情感诉求,可分为:新热/前沿的、权威/信服的、智慧/有思想的、全面/可依赖的、轻松/实用的、愉悦/释放的。

在用Needscope做市场细分时,通常会使用投射工具挖掘用户对品类的需求,形成该品类下用户的情感需求细分。以资讯类APP为例,通过投射工具,挖掘到用户对资讯类产品的情感诉求,可分为:新热/前沿的、权威/信服的、智慧/有思想的、全面/可依赖的、轻松/实用的、愉悦/释放的。

  • 新热/前沿的:这类用户希望获得最新、最热的资讯信息,第一时间快速获取,给自己带来“走在前沿的”“领先的”的感受,他们对资讯产品品牌形象的需求中强调“新热”“前沿”“领先”等。
  • 权威/公正的:这类用户对资讯的诉求集中在立场上,希望获得客观公正的权威信息,给自己带来“公正的”“客观的”感受,具备这些内涵的品牌形象对他们来说更有吸引力。
  • 智慧/有思想的:这类用户的核心情感诉求是“高端”“格调”,希望使用资讯产品带给自己“有思想的”“有智慧的”感受,品牌形象突出“高品质”“有深度”会对他们产生吸引力。
  • 全面/可依赖的:这类用户的情感需求强调“安全”“可依赖”“平和”,使用资讯产品与他们较固定的日常生活相匹配,获取“全面”“安全”的信息以便更好融入周边环境,获取内心的平和。
  • 轻松/实用的:这类用户看重资讯产品的“实用”价值,希望在“轻松”的状态下获取实用信息,解决问题,带给自己“物有所值”“得力助手”的感受。
  • 愉悦/释放的:这类用户追求“无忧无虑”“趣味释放”,希望看资讯让自己感到“有趣”“快乐”“释放”,对于品牌来说,强调“娱乐”“轻松”“释放自我”“有料有趣”对他们来说更有吸引力。

到此,我们便用Needscope对资讯类产品市场做了细分。

Step 2:Targeting确定目标用户群

在对市场做了细分后,接下来需要确定哪个/哪些细分市场可作为目标人群,主要考虑两个因素:市场份额和竞争环境。

在进行情感需求细分时,通过量化方式可得到每一类细分人群的占比,代表着市场上有多大比例的用户有这一类情感诉求,这就反应了市场份额的大小。还是以资讯产品为例,“轻松/实用的”这一细分市场占比最大,达到22%,说明在目前市场上,大多数用户对资讯产品的诉求是读完有轻松感,内容实用有帮助。

但仅考虑市场份额是不够的,各品牌可能都看到了大的市场份额而纷纷进入,经过时间沉淀还会形成难以撼动的头部品牌,竞争会异常激烈。因此,在选择细分市场时还需考虑竞争环境,这一点可通过Brand Map来直观体现。

在使用Needscope获取用户对品类情感需求的同时,还会了解目前市场上的资讯品牌满足了用户哪些诉求,因此形成每个品牌在不同情感细分领域的得分,得到品牌地图。

通过品牌地图,很容易看到市场份额最大的“轻松/实用的”领域竞品数量多,且有今日头条、腾讯新闻等头部竞品,对于新品牌或者小品牌来说,不再建议切入该领域。对于“愉悦/释放的”这一领域,现有品牌数量适中,并且靠近圆心位置,意味着还未形成极具该特色的品牌,单从竞争角度来说,该细分市场值得考虑。


综合市场份额与品牌地图,便可确定目标细分领域。对于新品牌/小品牌,可以考虑“愉悦/释放的”这一领域,因为市场份额可观(20%),市场还未形成满足程度高的竞品;对于打算更新定位的大品牌来说,品牌本身具备与头部竞品对抗的实力,可以优先选择市场份额大的市场,但需注意定位的跨度,建议选择与现有定位临近的区间。


确定好细分领域也就意味着锁定了目标人群。在做情感需求细分时,会一并了解该用户的人口学特征、产品使用行为等信息,因此,每一细分情感诉求都可以还原到对应的人群。


还是以资讯产品为例,“愉悦/释放的”这一细分市场对应的人群在某些特征上显著高于其他人群,这些明显特征就是品牌后期要去营销的目标群体,如以男性为主,偏年轻,年龄集中在18-24岁,更多分布在一二线城市,偏好B站、知乎等产品。

Step 3:Positioning定位

按照S+T=P的公式,完成市场细分以及锁定目标人群后,就得到了品牌定位。但这个阶段的定位只是明确了方向,具体到细分领域内部该如何定位,还需进一步深探。


结合资讯产品品牌定位的例子,新品牌确定了“愉悦/释放的”这一细分市场,接下来需要对该细分领域的目标人群和竞品表现做深入挖掘,找到用户未被满足或满足状况不佳的需求,明确本竞品之间的差距与不同,从而获得更精准的定位点。


在了解目标人群时,不再局限于他们使用资讯产品的习惯,还需走进日常,挖掘指导行为的价值观念和态度。

  • 画像及态度:人口学特征(性别、年龄、城市级别、家庭月收入等)、生活态度、价值观、品牌观,真实立体地还原品牌营销对象
  • 资讯产品使用行为:使用场景、需求、使用产品、频次、时长、路径、满足点及痛点,发现本品在产品力上与竞品的差距,挖掘产品卖点
  • 资讯产品品牌态度:对各品牌的认知度、喜爱度、品牌形象认知,发现本品在品牌力上与竞品的差距,挖掘品牌利益点
  • 触媒特点:偏爱的触媒渠道、品牌沟通方式/内容、转化效果,帮助品牌找到有效营销渠道和传播形式

到这个阶段,就完成了品牌定位全流程。这些定位理念可以作为品牌发展的牵引思路,指引产品和设计围绕定位的方向深入发展,为目标人群带去更好的使用体验。

3. 品牌再定位

市场环境时刻在发生变化,品牌必须通过不断变革来永葆青春,品牌再定位就是实现品牌变革的一种重要方式。

通常来说,品牌再定位有几种可能情况。一是原本定位错误,品牌定位时可能找错了目标人群,也可能没有挖掘到精准需求,导致在后续对品牌监测时,发现品牌健康度、销售情况等与预期差距太大,比如著名的万宝路香烟,最初定位是针对女性,市场业绩表现一般,后来更改策略重新定位为男士香烟,并使用了具有男子汉气概的西部牛仔形象,使得品牌脱颖而出。

定位优势不复存在也是促使品牌再定位的一个因素,这主要因为竞争环境发生了较大变化,新的竞品出现,甚至成长成强劲品牌,这就削弱了本品品牌原有的优势和竞争力,如果坚守原有定位,势必会处于被动挨打的地位。

此外,目标客户群消费动机和需求的改变,也是促使品牌再定位升级的重要动力。

总体来说,品牌定位是一个长期动态的过程,它既是品牌策略的起点,也是最终目的,即精准把握目标用户需求,基于此推动产品和设计迭代,从而牢牢占据用户心智,在与竞品的竞争中脱颖而出,缩短用户决策使用/购买产品路径,促进用户数量/销量等产品核心指标的提升。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:腾讯ISUX团队    来源:百度MEUX



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



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


用户访谈、共情地图、用户画像、用户故事、5w1h、价值主张、竞品分析、HMW

ui设计分享达人

一、与用户共情 Empathize


理解同理心


同理心是在某种情况下理解他人感受或想法的能力。


同理心vs同情心 


同理心有时会与同情相混淆,但这两个词并不是同一个意思。同理心是指理解别人的感受或想法,通常是通过自己感受这些情绪。同情是一种表现出关心或同情而不去感受情绪本身的体验。


通过有效地与用户感同身受,尽最大努力了解他们的需求,你为产品体验奠定了良好的基础,这将有助于解决他们独特的问题。


同理心意味着什么? 


带着同理心进行设计将提升你所创造的产品。通过与用户建立更深层次的联系,您将更好地理解他们的观点和痛点。尽早找到这种联系可以引导你走上正确的设计道路,并避免在设计过程的后期阶段大量修改产品。 


为什么要共情


作为一个用户体验设计师,与用户共情可以帮助我们创造体验更好的产品,因为我们在设计过程中会站在用户的角度去体验产品。我们越是善于预测用户的欲望和需求,用户对我们的设计就越满意,用户才越有可能长期地使用我们设计的产品。


如何与用户共情 


1.问很多的问题


设计师要避免自我假设很多需求,我们要通过问很多的问题来了解用户的直接需求和想法(跟我们需要设计的产品相关的问题)。可以使用是什么、为什么、怎么样等问题来深入了解用户。


2.更细心


需要注意整个用户,而不仅仅是他们的语言。详细研究用户与产品互动的过程,用视频、录音、笔记等方式详细记录。


3.做一个积极的倾听者


全神贯注地倾听,理解并记住与你互动的用户所说的话,避免分心。在用户体验设计中,练习积极倾听可以帮助你直接从用户那里得到公正的反馈,你可以应用它来改进你的设计。


4.多元反馈


收到的反馈是客观和公正的,这点很重要。朋友或同事通常会提供偏颇的、大多是正面的反馈,因为他们想支持你或取悦你。因此,不同的来源和不同的用户组的反馈很重要。在寻求反馈时,可以多使用开放式的问题。


5.避免偏见


我们都有偏见。记住,偏见是基于有限的信息而对某事或某人有偏见。作为用户体验设计师,我们必须把这些偏见放在一边,以便更好地与他人产生共鸣。你的目标是理解用户,而不是用你自己的观点和情绪复杂化他们的反馈。


6.跟进UX研究的最新进展


关注研究人员,加入在线社区,了解影响用户体验设计师和用户的最新研究。随着我们对人类心理学的了解越来越多,研究也在不断变化和发展。紧跟潮流会让你在理解听众和与听众互动方面更有优势。


用户访谈


步骤1:定义研究目标 


为了确保访谈中能够充分利用时间,不谈一些偏离的话题,需要先制定访谈目标。


下面是一些关于与用户共情的常见研究目标: 

我想了解人们在使用我设计的产品解决问题时所经历的过程和产生的情绪是怎么样的 

我想确定目前人们对此问题是如何解决的?其常见的用户行为和体验如何? 

我想了解用户的需求和不满

步骤2:写下访谈问题

时刻记住访谈目标,提前写下你的访谈问题,访谈问题越符合你的目标,你得到的数据就越有用。 

多问开放式的问题,访谈者可以更自由地分享他们真实的想法 

保持问题简短明了,访谈者才容易理解你的问题 

追问问题,在访谈者回答完一个问题后,试着多问他们“为什么?”或者用“多告诉我一点”来获取更深层的信息

步骤3:创建一个筛选调查,以找到合适的参与者


选择研究对象需要基于研究目标和所设计产品的目标用户。可以发送一份筛选调查问卷来确定潜在参与者是否符合研究要求,收集的数据例如:年龄、地理位置、职业或行业、性别等。


步骤4:开始招募参与者 


一旦你确定了研究目标和书面采访问题(在如何确定你的研究目标和问题),并创建筛选调查,以找到研究参与者的代表性样本,你就可以开始招募参与者了! 


如何以及在哪里找到研究参与者取决于你工作的公司、你设计的产品类型、研究的时间限制、项目预算和目标用户的可访问性。基于这些项目细节,您可以选择从各种各样的方式来寻找研究参与者。 

个人社交圈。考虑一下符合你的目标用户的家庭、朋友或同事。 

现有用户。如果你的产品已经有一些用户基础,你可以从现有用户中招募参与者。

互联网招募。如果是为新成立的企业设计产品,最简单的招募参与者的方法是网上招募。你可以使用社交媒体来寻找研究参与者,或者使用专门招募用户的网站,如用户测试和用户访谈。你也可以找一些符合你目标用户群体的聊天群去招募用户。

走廊测试。去最可能遇到产品目标受众的地方,比如狗公园或咖啡店,现场拉一些路过的人进行测试。如果你招募的参与者不多,时间有限,或者你想免费进行研究,那么走廊测试是比较好的选择。然而,以这种方式寻找参与者是有风险的,因为他们可能不是你的潜在用户。 

第三方机构。有预算的企业可以雇佣第三方研究机构,他们可以节省你的时间,而且更加专业。

步骤5:进入用户访谈 


1.制作脚本


将你要问用户的所有问题列下来,在实践中已经证实保持访谈者问题的一致性很重要。当然,访谈脚本只是一个指南,当有必要的时候我们可以偏离准备的问题以了解用户更多的痛点。


2.准备物料


制作一份访谈所需物品的清单,比如一台电脑、一份打印出来的问题清单,或者纸和铅笔。如果你在访谈中需要使用新的设备或技术,一定要提前了解清楚怎么使用。


3.研究用户


尽可能提前了解你要访谈的人。如果你准备访谈的用户在访谈前提供了他们的个人信息,要注意确认他们的个人信息是否符合真实情况,避免访谈一个竞争对手的卧底。


4.模拟访谈


在正式访谈之前练习一下你要问的问题,跟同事或朋友模拟地进行一次访谈。


5.开场白


感谢用户的到来。在面试开始前,感谢用户花时间与你见面并分享他们的观点。感谢用户是建立良好关系的一部分,可以帮助他们觉得自己的意见是有价值的。 


收集基本的细节。当你与用户见面时,记得询问与访谈者相关的基本信息,如他们的姓名或人口统计信息。11 


6.问访谈问题


遵守访谈礼仪
提问时,说话要清晰简洁,无论用户如何回答问题,都要保持专业。当用户分享他们的观点时,表现出你在积极地倾听,比如点头、进行适当的眼神交流或做笔记。 


问开放式的问题
避免问那些会导致简单回答“是”或“不是”的问题,最好多问一些以“为什么”开头的问题。如果参与者确实提供了一个简短的“是”或“不是”的回答,你应该追问一些问题,让他们分享更多信息。 


及时记笔记
如果不做笔记,准确复述参与者所表达的几乎是不可能的!当你在面试中观察和倾听参与者的谈话时,尽可能多地写下你能捕捉到的内容。当你想出解决用户痛点的想法时,一份完整的笔记和观察清单将会很有帮助。这里有一些最好的做法,可以帮助你在面试中做笔记: 


突出引人注目的报价
面试中最明显的部分就是记录面试者所说的话。有趣的引用是用户真实想法和感受的有力指示器。在你的同理心地图中包含引用是一种很好的方式,以真实用户的第一手视角为特色,这可以在你开始设计时提供有价值的见解。 


记录对参与者的观察
不仅要记录用户所说的话,还要记录他们的情绪、表情、肢体语言和行为。要特别注意外界因素,比如噪音或干扰,这些可能会影响面试结果。在创建同理心地图时,所有这些观察结果都是重要的考虑因素。 


语音/视频记录访谈
询问参与者是否允许你录入访谈。如果他们同意的话,录下来的访谈在之后会很有帮助,可以帮助你回顾访谈中你可能不记得的部分,或者在访谈结束后整理额外的笔记。 


7.追问补充分享


在你问完所有的访谈问题后,给用户一个机会分享他们对面试中讨论的任何项目的最终想法。一些参与者可能会公开他们的观点,并透露他们之前没有分享的见解。 


8.感谢参与者


另外,记得再次感谢参与者。你要让用户在访谈结束时对你及未来的产品和你可能代表的公司有一个不错的感觉。


同理心地图/共情地图


帮助设计师以图表的形式梳理每次访谈的信息,以明确用户需求


背景目的


你的公司正在开发一个新的应用程序来帮助人们安排遛狗的时间。该应用程序的目的是将合格的遛狗者与需要帮助照顾他们的狗的客户匹配起来,类似于拼车或家庭共享应用程序。你是用户体验团队的一员,你的团队处于设计应用程序的早期阶段,并正在了解用户的痛点。一位同事已经采访了经常使用该应用程序的狗主人和专业遛狗者。现在你有责任用同理心地图总结每次采访。


采访记录示例:


名称:Makayla斯科特


情境:Makayla是一名45岁的女教师,住在德克萨斯州休斯顿。她有两条狗。作为一名四年级老师,Makayla日常的工作比较多。放学后,她还自愿担任排球教练。Makayla的伴侣是一名全职儿科外科医生,经常在当地医院的夜班和白班之间轮流工作。


UXR:
你能描述一下你目前的工作情况以及是如何照顾你的狗的吗?


Makayla:
我是一名教师,放学后我要教排球,所以我的狗Reggie和Snowball在很长一段时间内要被单独留在家里。我的伴侣在一家医院工作,需要随叫随到,还通常有12个小时的白班或夜班。当我们都很忙的时候,我们需要有人遛Reggie和Snowball。


UXR:
你在照顾你的狗狗时面临什么挑战?这让你有什么感觉?


Makayla:
我爱我的狗!他们是那么的可爱。如果问他们要出去玩多少次,他们肯定会说一天想要遛五次!但是,按照我们的日常工作情况,很难经常带他们出去。我每天早上第一件事就是把它们放出来玩一会儿,然后晚上也会把它们放出来玩一会儿。有时候,我会付钱给隔壁邻居17岁的儿子让他帮我遛狗。但是,我们去旅游的时候就会有很大的困扰。我和我的伴侣喜欢去旅行,我们不能总是带着我们的宠物。如果我们能预定一个遛狗的人,那我们就能安心地出去玩了。
我们邻居的儿子今年就要毕业了,他的日程安排越来越不稳定。我不能在一直依赖他,我担心他没有专业的照顾狗狗的经验。当然,一个17岁的孩子只是每天带狗散散步是没问题,但如果他周末带狗出去玩,Snowball生病了怎么办?他怎么知道该做什么,或者该不该给我打电话?这确实让我很担心,但我又不想把狗狗拿去宠物店寄养。
还有很多地方我不能带Reggie去,他比Snowball大得多。他不像Snowball那样容易过敏。因为它太大了,带它去公路旅行都很困难。我们去年刚搬到休斯顿,可以求助的人不多。我考虑过在网上发布广告,但我不确定把谁留在家里会比较安全,谁可以和狗很好地相处。


UXR:
你觉得有什么方法可以解决这些挑战吗?


Makayla:
我想找一个遛狗的人,我希望我可以了解更新他们的信息并且提前筛选。我希望能有一种固定预约的方式。比如这个人可以每个周末来,然后在我白天工作的时候也可以约一些特定的时间。理想情况下,我可以提前几天安排遛狗。我只需要一个固定的遛狗者,希望可以通过筛选,确保他们是安全可靠的,与宠物可以友好相处的!我愿意多花一点钱来得到这样的服务,而不用老是向我的邻居求助。


创建同理心地图/共情地图


Step 1:添加用户名称 

把被采访人的名字写进你的同理心地图 

Step 2: 所说 

逐字引用访谈中的内容。准确地写下这个人说了什么而不要用你自己的话来总结。如果总结了访谈者的话,可能会错误地解释用户的意思。在访谈中要时刻关注用户的状态,并记录他们的痛点。例如,如果用户在访谈中多次重申相同的问题,那么这可能是一个主要的痛点。 

Step 3: 所想 

在这里,你可以总结一下用户表达的想法。添加用户通过肢体语言、语气或其他明显的指示来传达的感受,即使他们没有口头上向你表达。你可以对这些感觉做出推断,但你必须注意不要对用户做出假设。例如,Makayla对邻居十几岁的儿子表示担忧,并提到了他的年龄和资格。一个假设是,Makayla想要一个成年遛狗者。一个推论是,她想要一个有汽车和驾照的遛狗人,可以带狗去急诊兽医。如果你发现任何矛盾,你可以让你的用户解释他们的肢体语言。 

Step 4: 所做 

Makayla向我们详细说明了她为克服遛狗面临的挑战而采取的行动步骤。 

Step 5: 所感 

在访谈中,注意用户的愤怒、沮丧、兴奋等情绪,列在这个模块。它可能与你在“所想”中列出的一些内容重叠,没有关系,就重叠地列出来。如果用户在访谈中没有明确提到任何感受,你可以通过追问“这让你有什么感受?”来探究用户感受。



这张同理心地图分解了你的团队在决定你的应用如何满足Makayla需求时需要考虑的所有要点。真正的挑战来自于你要从所有用户访谈中得出的聚合共情地图,并找出每个潜在用户需求的重叠。


同理心地图/共情地图类型


重要的是要理解有两种类型的共情地图:单用户共情地图和聚合共情地图(也称为“多用户共情地图”)。

单用户共情地图是通过从一个用户的访谈中获取数据并将其转化为共情地图来创建的,就像本文前面的例子一样。这种方法可以帮助设计师将单个用户的想法、感受和特征提炼成一种更容易收集数据的格式。


聚合共情地图,代表了一组拥有相似想法、观点或品质的用户。聚合共情地图是通过创建多个单用户共情地图来创建的,然后将用户表达类似内容的地图组合成一个新的共情地图。这有助于设计师确定有相似倾向的人群,他们将会使用产品。聚合共情地图的洞察力允许设计师确定主题,这有助于他们更好地与他们正在设计的群体共情。

要了解更多不同类型的共情图,请查看尼尔森·诺曼集团关于共情图的这篇文章。
https://www.nngroup.com/articles/empathy-mapping/


用户画像



角色是虚构的用户,多个用户汇聚成一类角色,他们的目标和特征代表了更大的用户群体的需求。您创建的每个角色都将代表一组具有您通过研究了解到的类似特征的用户。角色是设计过程的关键,因为它们反映了用户的生活方式,并给你的团队提供了如何满足用户需求或挑战的思路。


在用户体验设计的世界里,用户永远是第一位的。我们要了解用户需求,必须知道我们的用户是谁。


角色是通过进行用户研究、确定痛点来创建的,痛点是指用户体验方面的痛点,它们会挫败和阻碍用户从产品中获得他们需要的东西。


在创建人物角色时,要在数据中查找最常见的标签,并将这些标签拟人化的用户分组在一起。例如,想象一下,从遛狗应用程序的用户访谈中收集的数据显示,许多年龄在45岁到60岁之间的潜在用户都担心遛狗者能够进入他们的家。这肯定是你想要在代表特定年龄段用户的角色中包含的痛点。


一般来说,创建3到8个角色就足以代表产品的大部分用户。把人物角色看作是你所有研究和采访的总览。虽然人物角色准确地代表用户很重要,但不可能满足他们的每一个特定需求。角色也是特定于环境的,这意味着他们应该专注于用户与产品有效互动的行为和目标。


以下是Daniela的用户画像:




专业提示:


在构建用户角色之前,先征求团队对产品用户的意见。在你构建了角色之后,审查来自你的团队的建议,并将它们与你创建的角色进行比较。指出数据是如何验证或反驳他们的建议的。团队中的每个人都需要理解角色,这样才能与用户真正地建立联系。


用户故事




例子:安妮卡


“作为一名为团队收集咖啡订单的市场实习生,我想提前提交和监控团队订单,以便更好地管理订单准确性和计划取货时间。”


安妮卡是一家中型广告公司的市场实习生。每周两次,在晨会之前,他们会从附近的咖啡店为团队收集6-12杯咖啡。但有时他们会发现自己点的菜不完整,或者因为等了太久才来取菜而凉了。他们需要一种方法来提前下单,跟踪订单状态,并更好地计划他们的到货时间。


例子:阿离


“作为一名每天花3-4小时学习和购买产品的远程学生,我希望能够在不起床的情况下点餐,这样我就可以享受CoffeeHouse的产品,并继续工作。”


阿离是一名厨师,住在一个小城市,大部分时间在晚上工作。白天,阿离会参加3-4小时的在线编程训练营,学习一项新的就业技能。他们通常在当地的咖啡店进行新兵训练营,但有时会因为座位有限而感到沮丧。他们还担心,如果他们站起来点新的咖啡或食物,会失去他们的桌子。阿离可以使用CoffeeShop应用程序预订店内工作区,并在顾客到达后通过该应用程序下单。



在用户调研的时候考虑无障碍设计 


无障碍设计是为残疾人设计产品、设备、服务或环境。无障碍设计是考虑所有用户的旅程,牢记他们的永久性、临时性或情境性残疾。通过研究残疾人如何与你的产品互动,你可以更好地理解如何为他们设计。我们不可能准确猜测用户体验产品的所有方式,这也是为什么在你的研究中包含残疾人是如此重要的原因之一。
当你在设计过程的共情阶段进行研究时,需要考虑以下几点。


触觉


你会如何为那些只使用一只手的用户设计,无论是永久的、暂时的还是情境的?

  • 根据手的不同尺寸来决定按钮的位置。
  • 创建允许双击以避免意外点击图标的功能。
  • 启用单手键盘功能和一般键盘兼容性。
  • 允许定制按钮,方便访问用户认为最重要的信息。

视觉


你将如何为那些视力有限的用户设计,无论是永久的、暂时的还是情境的?

使用更大的字体来设计更适合读者的应用程序。 

确保应用程序和图像有可被屏幕阅读器读取的替代文本。

检测用户是否在驾驶机动车。 

使用高对比度的颜色设计应用程序。 

不要依赖文本颜色来解释导航或下一步操作。例如,不要单独使用红色文本作为警告的指示。相反,你的设计应该包含明确的说明。

可定制的文本


还有一些额外的网页辅助工具,有阅读障碍或其他视觉处理障碍的人可以从中受益。其中一种方法是自定义文本,该特性允许用户更改文本的显示方式,以便更容易地阅读文本。文本定制包括更改从颜色或字体到文本大小甚至间距的所有内容。例如,有些字体可能更便于用户阅读,因此定制字体可能会有很大帮助。因此,可定制文本提供了比简单地放大或放大文本更多的选项,使内容更具适应性,同时保持功能。


听觉


你会如何为那些永久性、暂时性或情境性听力受限的用户进行设计?

不要仅仅依靠声音来提供应用更新,比如新消息通知。相反,应该启用触觉技术,即吸引用户触觉的振动和通知灯。 

对所有视频应用封闭字幕。 

在应用程序中提供一个文本消息系统,允许用户通过书写进行交流。

语言


你会如何为那些永远、暂时或情境性不能说话的用户设计? 

  • 除了基于视频的内容外,还要为用户提供书面介绍、描述和说明。 
  • 在与用户通话或应用程序支持时提供实时短信。 
  • 为依赖语音识别的自动化系统安排替代方案。 
  • 提供应用内部消息系统,允许使用表情符号和图片上传。 

在为残疾用户设计时,这个列表只是需要考虑的一小部分。了解如何改进你的设计的最好方法是进行研究并直接从残疾人那里获得反馈。


辅助技术 


创造一个考虑到每个能力范围的产品设计是非常困难的。值得庆幸的是,有一些服务和应用程序旨在帮助弥合这一差距。例如,手机供应商最近新增的一项服务是“实时短信”(Real-Time text),用户可以在打电话时发短信,以改善沟通。 


另一个帮助残疾人的功能是替代文本。视力低下或失明的人通常依赖屏幕阅读器大声朗读屏幕上的内容。但是,如果信息图标没有标签或替代文本,屏幕阅读器就无法向用户描述该按钮的功能。不是每个图像或图标都是信息,所以只在必要的时候添加描述。 


研究和学习辅助技术将帮助您更好地理解这些技术的影响。这里有一些链接可以帮助你开始: 

讨论残疾技术的价值:YouTube上TEDx演讲中的残疾技术 

https://www.youtube.com/watch?v=eFkhFxJZvho 

科技的可达性如何改变生活:盲人如何利用科技从YouTube上的TEDx演讲中看到世界 

https://www.youtube.com/watch?v=0EQOZRIA-nA 

智能手机可访问性:来自Uswitch的全面指南 

https://www.uswitch.com/mobiles/guides/smartphone-accessibility/ 

谷歌无障碍信息中心主页 

https://www.google.com/accessibility/

将包容性设计付诸实践 


为了将包容性设计付诸实践,重要的是让自己沉浸在残疾人可能使用的辅助技术中,并与他们讨论他们的经历。为你周围的世界进行同理心设计的最好方法是与你的用户互动,并询问他们你的设计可以帮助他们成功的方法。 
要了解更多关于包容性设计的知识,这里有一些额外的资源可以帮助你入门: 

描述方法设计产品包容性:包容性设计:12种方法为每个人设计从Shopify 

https://www.shopify.com/partners/blog/inclusive-design 

谷歌的包容性设计的无障碍方法:从谷歌I/O的包容性设计的无障碍过程 

https://www.youtube.com/watch?v=TAzkrXTGEOM&feature=emb_title 

分解重要的包容性设计原则:来自UX Planet的6条包容性设计原则 

https://uxplanet.org/6-principles-for-inclusive-design-3e9867f7f63e

理解人行道斜坡效应





路沿石切 Curb cut


坡道与相邻街道形成坡道的人行道的斜面


人行道斜坡效应 Curb-cut effect


路沿切割通常在十字路口发现。多亏了路缘切割,坐轮椅、腿支架或拐杖的人可以更自由地在他们的社区里穿行。但是,有趣的是:削减路沿的好处延伸到每个人,从推婴儿车的人到骑自行车的人,搬家的人,和老年人。很有可能,路边停车对你也有帮助。路缘切割已经成为无障碍设计的一个非常流行的例子,现在有一个完整的概念以它命名。


“人行道斜坡效应”是一种现象,描述的是为残疾人设计的产品和政策如何最终帮助到所有人


二、定义并陈述问题 Define


识别用户面临的问题是用户体验设计中最重要的部分之一。在这篇阅读中,你将学习如何定义用户未说出口的痛点,并利用它们形成强有力的问题陈述。


痛点和问题陈述之间的联系 


痛点:任何让用户受挫并阻碍他们获得所需内容的用户体验问题。


想想遛狗应用和我们的一个用户角色,Arnold。Arnold快50岁了,他的孩子们鼓励他升级到智能手机。Arnold是公司的领导者,他不习惯承认自己对技术不适应。妻子去世后,Arnold成了家里动物的主要照料者。但是,他每周工作60多个小时,无法每天两次带着他的三条狗散步。Arnold向遛狗软件求助。





痛点可以分为四类: 

财务:与金钱相关的痛点。 

产品:与质量问题相关的痛点。 

过程:与用户旅程相关的痛点。 

支持:与从客户服务获得帮助有关的痛点。 

Arnold的痛点属于过程范畴。他最大的挑战是他不懂技术,所以他很难理解如何使用这款应用。 要构建问题陈述,您可以利用5w1h框架。


5个w和1个H:谁,什么,何时,何地,为什么,如何 


用于创建问题陈述的最常用框架是5w1h框架。在定义了用户的痛点之后,您可以回答谁、什么、何时、何地、为什么以及如何解决用户的问题。



谁正在经历这个问题?
了解用户及其背景能为用户设计更好的解决方案。

你想要解决的痛点是什么?
尽早确定用户的痛点可以让您回答剩下的这些问题,并阐明痛点的上下文。

当用户使用产品时,他们在哪里?
用户的物理环境对您的设计很重要。

什么时候出现问题?
也许是漫长而乏味的过程刚刚结束,也可能是每天都在发生的事情。知道问题何时发生可以帮助您更好地理解用户的感受。

为什么这个问题很重要?
了解这个问题如何影响用户的体验和生活将有助于明确潜在的后果。

用户如何使用产品以达到他们的目标?
了解用户如何达到他们的目标可以让你绘制用户通过你的产品的旅程。

以Arnold举例:


谁:一个忙碌的主管 。
事情:Arnold想为他的三只狗雇一个每日遛狗的人。 
地点:Arnold很可能在工作中,在路上使用这款应用。 
何时:当Arnold打开应用程序时,他会感到沮丧。 
原因:Arnold在手机应用或类似技术方面没有太多经验。 
如何操作:Arnold希望从应用程序的主屏幕轻松切换到遛狗者列表,再到确认屏幕。


问题表述公式 


那么,如何创建问题陈述呢?首先定义用户是谁,他们的需求和动机是什么。


【用户名】是一个【用户特征】ta需要【用户需求】因为【洞察】


现在把这个公式应用到Arnold身上。Arnold是一个忙碌的专业人士,他需要一个遛狗人。但它的洞察力是什么?他的电话!他的孩子们给了他一部闪亮的新智能手机。Arnold分享说,他经常与技术作斗争,在应用程序导航上有问题。 


好的问题

该问题以人为中心,专注于特定角色的需求; 

该问题有发散的空间; 

该问题可以用实用的设计方案来解决;

陈述解决方案


有两种常用的方式可以用来陈述解决方案:


如果.....那么....(关注用户需求)


如果Arnold下载了遛狗应用程序,那么他们就可以利用“简化”模式设置只查看应用程序的基本功能。 
如果Arnold斯注册了遛狗软件,那么他们就可以快速轻松地选择适合自己时间表的遛狗者。


我们相信,....将...(从团队的角度描述并保持对用户需求的同理心)


我们相信,Arnold的遛狗应用程序的简化模式将允许他们高效地雇用遛狗者。 
我们相信,Arnold可以方便地找到遛狗的人,这将增加他们为宠物选择的散步次数。


好的方案


该方案说明了一个具体的操作,并能够说明解决方案应该让用户做什么;
该方案成功满足用户需求的期望结果;


价值主张 


我们如何使用到目前为止构建的所有内容(共情地图、人物角色、用户故事、问题陈述和假设陈述)让用户认为,“我必须拥有这个!” 。答案是:从定义产品的价值主张开始。


价值主张总结了消费者为什么应该使用一种产品或服务。


价值主张的例子:


看看一个你可能认识的产品——Gmail——然后问问你自己,你是否能认出它的一些价值主张。当谷歌在2004年推出Gmail时,他们进入了一个已经非常拥挤的免费电子邮件服务市场。Gmail提供:

免费收发电子邮件 

电子邮件分类、归档和星星功能 

垃圾邮件过滤 

电子邮件对话视图 

1g的云存储

清单上的两项是当时其他电子邮件服务无法提供的独特服务:电子邮件对话视图,它将单个电子邮件放在更大的线程上下文中;还有整整1gb的存储空间,这是竞争对手提供的存储空间的1000倍。这些都是Gmail独特的价值主张。 


你的产品所提供的一切对你来说可能是显而易见的,但你必须把自己放在用户的心里。用户还不知道你的产品,也不了解它的价值。这就是价值主张的用武之地。

首先,你需要做一些调查,以回答以下两个问题:

  • 你们的产品是做什么的?清楚地解释你的产品为用户提供的服务。
  • 用户为什么要关心?描述你的产品如何解决用户的痛点。 

一旦你回答了这些问题,你就可以遵循一系列的步骤来专注于你的产品独特的价值主张。让我们以遛狗应用程序为例来探索这是如何工作的。


步骤1:描述你的产品的特点和好处



列出你的产品的所有伟大的功能和好处,无论大小。列出所有想到的东西,然后再缩小范围。

步骤2:解释产品的价值





任何你确定为价值主张的东西都需要对你的用户有益。在本例中,对于遛狗应用程序,在用户访谈中确定了四类产品价值:可访问性、遛狗者的专业体验、成本和可靠性。第一步的功能和好处被分成了这四个类别。 


最初的列表中有一些功能和好处不属于这四个类别,并没有为用户增加真正的“价值”:

每月为您的宠物提供有机食品和新产品资讯 

专门供遛狗使用(不含其他宠物) 

遛狗者分级系统 

培训技巧

这些特性和好处没有被分类到这四类,而是被放在了一边。


步骤3:将这些特性和好处与用户的需求联系起来




我们的目标是确定对用户真正有价值的东西,而不仅仅是用户没有要求的酷功能。为了确定价值,将你所开发的人物角色与满足其最大痛点的价值主张配对。


步骤4:回顾你的官方价值主张清单


通过将它们与实际用户需求相匹配,您已经缩小了大量好处和功能的范围。现在是时候回顾你的产品提供的价值主张清单了。对于遛狗应用程序,以下是与早期开发的人物角色相匹配的价值主张:

  • 遛狗者的专业培训
  • 可将遛狗者升级为狗保姆的预定散步功能
  • 可以追踪遛狗者的地理位置
  • 日期预选
  • 延迟取消费用通知
  • 为您的房子钥匙提供方便的储物柜
  • 易于使用的应用设计

这就是你的价值主张清单!然而,您的竞争对手也提供了其中的一些功能和好处。那么,你如何知道是什么让你的产品在竞争中脱颖而出呢?确定应用的独特价值定位。这意味着要重新审视与你的人物角色相匹配的价值主张列表,并删除竞争对手也提供的价值主张。

了解你的产品的竞争对手的方法之一是阅读评论。将评论从低到高进行排序,仔细检查评论者对你的竞争对手分享了什么。以下是一款竞品遛狗应用的一些评论:





你能在这个例子中找出最大的痛点吗?在一些评论中,一个共同的主题是需要对遛狗者进行彻底的、面对面的培训,以确保遛狗者知道如何做好他们的工作。一些评论还呼吁遛狗者需要可靠。没有其他遛狗应用程序可以满足这种需求,所以这是我们的应用程序可以提供的独特价值主张! 


关键点


关于价值主张最重要的一点是,它们必须简短、清晰、切中要点。用户希望能够很容易地准确地确定您的产品将如何满足他们的独特需求,以及是什么使您的产品在市场上与众不同。有时候用户不知道他们需要什么,除非你向他们解释。这才是产品设计创新的真正核心。


三、创意想法 Ideate


在创意想法之前的准备活动

第1步:和用户共情


设计师需要了解我们是为谁解决问题,他们的需求是什么。我们可以通过用创建共情图、角色模型、用户故事和用户旅程图

第2步:定义问题


首先我们需要定义好所面临的问题,这样团队中的所有成员才能为了解决同一个问题而集中发力。明确我们所面临的问题也可以帮助我们始终将用户需求放在第一位。


第3步:准备一个适合创造的环境


我们需要一个舒适的空间,让团队中的每个人都可以聚在一起表达各自的想法。如果是线下会议,建议选择一个不同于平常工作环境的创意空间。如果是远程会议,可以在家里找一个容易集中精力的地方。


第4步:设置有限的时间


日常的设计工作是无穷无尽的,我们需要给自己充分的时间去创意想法。然而,你不能一直头脑风暴,所以需要设置头脑风暴的限定时间并且开始更深刻地思考你想出来的创意点。


第5步:组建多样化的团队


一个由不同种族、性别、能力和背景的成员组成的包容性的团队,将帮助你想出各种各样的解决方案。


第6步:跳出思维定势


不要把自己局限于传统的想法和解决方案,我们需要天马行空的创意。如果你有一个看起来与众不同的很酷的想法,把它写下来!


扩展阅读
https://careerfoundry.com/en/blog/ux-design/what-is-ideation-in-design-thinking/
https://designthinking.ideo.com/


竞品分析


竞品分析是对竞争对手优势劣势的分析,可以从中获取产品的基本市场情况,也可以帮助我们设计出对用户更有帮助和更独特的产品。竞品可以分为两种:直接和间接。直接竞品与你的产品功能相近、用户群体相同。间接竞品与你的产品功能相近但用户群体不同,或用户群体相似但功能不同。


竞品分析的作用

  • 帮助我们了解市场上现有的产品及其设计
  • 当前面临的一些设计问题可以从竞品中获得解决方案的灵感
  • 找到市场上目前无法满足用户需求的产品缺口,使我们的产品相对于竞品有独特的竞争力
  • 了解当前市场上产品的预期生命周期
  • 了解当前产品有哪些方向可以改进,参考这些改进点给竞争对手带来了什么影响

竞品分析的局限性

  • 限制了思维,不利于创新
  • 依赖对研究结果的解读
  • 竞品的设计并不一定适用于你的产品
  • 竞品分析需要持续地做多次

竞品分析步骤

案例项目背景:假设你正在为你的新客户花园汉堡进行关于快餐汉堡餐厅的竞品研究。花园汉堡认为他们目前的网站缺少吸引力,获客少,他们想让你帮助公司重新设计他们的网站。

第1步:明确分析目标


目标:比较竞品网站的用户体验 

使用一致的维度来梳理竞品信息可以帮助我们更加直观地对竞品评级。 

推荐评级标准: 

需改进:无法满足用户需求 

良好:有缺陷,但可以满足用户需求 

优秀:较好地满足用户需求,但易用性有待提升 

卓越:符合或超出用户预期,并且体验一致


第2步:竞品罗列


可以询问客户来了解他们的直接或间接对手有哪些。比如花园汉堡认为汉堡来了是他们的直接竞争对手,而你根据自己的研究发现约翰汉堡和小高牛肉汉堡是与花园汉堡在同一区域的汉堡餐厅,因此他们是两个更直接的竞品。同时,你还发现有个叫素食汉堡的间接竞品,他们网站上的图片非常吸引人。通过以上信息,我们可以构建竞品分析图表的框架如下:



第3步:列出分析维度


举例:
第一印象:网络是否有延迟?跨设备的适配怎么样?你觉得这个网站怎么样?
交互:有哪些功能?是不是所有用户都可以访问网站?对不使用英语的用户包容性如何?在使用过程中是否会感到困惑?导航是否清晰?
视觉设计:视觉是否一致?品牌是否与目标用户匹配?页面设计是否让人难忘?
文案内容:文案内容是否符合公司品牌?用户可以找到他们感兴趣的细节吗?
可以将列举出来的维度放在竞品分析表的第一行,然后我们需要填写每一个竞品的这些信息。


第4步:调研每个竞品


目标群体


调研发现,千禧一代及其家庭是竞争对手们的主要目标群体,其次是z世代的大学生。这与花园汉堡的目标群体非常相似。只有素食汉堡的目标群体不同,因此它被列入间接竞品中。




第一印象


第一印象最好的是小高牛肉汉堡和素食汉堡。两者的图片都很清晰且吸引人,网站的响应速度很快。汉堡来了和约翰汉堡的网站不太容易记住,它们的导航很清晰,但是布局需要改进一下。 就手机网站体验来说,只有汉堡来了没有做好适配,手机端的间距不对,导致一些信息看不到。 评分较低的网站最大的问题是菜单,有时菜单无法访问或展示的形式难以阅读。这绝对是你重新设计汉堡花园网站时要注意的事情!



交互

小高牛肉汉堡的网站有加载动画,约翰汉堡的网站首页有很多不必要的内容使得人们很难找到他们想要的重要信息。另外,清晰的导航(明确哪些元素可点击,哪些不可点击)在网站设计中非常重要,素食汉堡在这方面做的很好,具有定位商店等功能和全面的可访问性,包含多种语言选项并且兼容多种浏览器。



视觉设计

网站清晰和一致的视觉设计可以吸引用户去了解产品和公司。花园汉堡目前的网页设计非常扎实,但是存在一些优化点可以更好地反应他们的品牌调性。 

小高牛肉汉堡和素食汉堡通过独特的颜色、字体和图片传达他们的品牌。约翰汉堡和汉堡来了缺少一致的网站风格设计,约翰汉堡并没有很好地传达自身品牌




文案内容


文案的描述也是传达公司品牌和吸引用户的另一个好办法。大多数花园汉堡的竞品都使用吸引注意和有趣的语言来迎合他们的客户。花园汉堡的语言基调有一些不一致,并且没有它的竞品那样感觉让人放松。
总的来说,竞品的内容简短且易于理解。汉堡花园目前的网站描述显得有些枯燥和冗长。





第5步:总结洞察

在进行研究、收集数据和分析洞察之后需要进行总结。需要根据竞品分析目标来梳理报告中的内容以及呈现洞察。


例如,如果竞品分析目标是对了比较竞争对手的目标群体,我们可以使用一些信息图形来呈现数据。或者,目标重点是视觉设计,我们可以截取竞品的图片并突出显示重点区域。


如何展现竞品分析


可以使用ppt或书面文档的形式来展现竞品分析报告,ppt会更有视觉冲击力表现形式更丰富,但需要花费更多的时间。书面文档写起来很方便,如果你的报告对象比较少,建议使用书面文档。


信息结构上的注意点


概述研究问题、研究方法以及与竞品相比较的一些产品特征,这部分内容可以让团队对竞品分析的目标有一个清晰的认知。





为了更好地向听众传达信息结构,在每个部分开始前需要有一个标题页,就像下图所示:





下一步,总结你从竞品身上学到的以及跟自身产品的对比。一定要指出本产品的优势和可以改进的机会点。
在你组织信息呈现的时候,要注意思考如何最有效地展现你的洞察点。保持整体设计简单和干净,避免杂乱,让听众能聚焦在重要信息。





最后,总结关键点。竞品最多可以比较10家公司,这里面的信息量非常大,总结概括最重要的信息来帮助听众记忆。


有效地展示数据


展示数据的方式会影响听众的解读,不同类型的数据需要用到不同的展现形式。例如,你的报告有很多数字或量化数据,一个图表或图表可以帮助听众比较数据。为了演示竞品的特定功能或问题,可以在演示中加入录屏视频。


最后,可以加入你在竞品分析中使用到的评分标准的说明。例如,我们在示例中将评级分为“需改进”到“卓越”,对应每间餐厅在每个类别中以1到4的等级,从而形成最终的评级。


其他小提示

  • 提前分享报告,获得反馈,在正式汇报前不断改进。
  • ppt上的文字尽可能少,细节留给演讲。
  • 坚持挑亮点。如果想了解更多细节,可以将它们添加到演示的附录中,或者创建一份书面报告。 
  • 使用笔记。提纲或便条卡可以帮助你记忆主题。
  • 提前练习。在重要的日子之前做几次测试,以适应你演讲的内容和节奏。 
  • 使用相关的图片。确保所有的图片和图形都与你的演讲主题直接相关。仔细选择图像和图形,以确保它们增强清晰度。 
  • 控制自己的偏见。要意识到你自己的设计偏见,并尽量防止它们在演示过程中影响你的判断。 
  • 能够为自己的结论辩护。确保你有证据支持你的结论。尽可能使用实际数据和具体例子。 

《福布斯》的这篇文章将帮助你缓解演讲时的紧张感,听听来自专家的关于与听众沟通的建议:
https://www.forbes.com/sites/markfidelman/2014/08/15/20-world-class-presentation-experts-share-their-top-tips/?sh=2920b075c40d


头脑风暴设计创意点


方法一:我们如何能够 How Might We (HMW) 


“我们如何能够 How might we (HMW)”是一种将问题转化为设计机会的设计思维活动。HMW可以激发设计师的创造力,并引导设计师从不同的角度思考问题,从而想出各种各样的解决方案。要想创建好的HMW问题,我们需要一个好的问题陈述来定义问题。


来自斯坦福大学设计学院的思考角度建议:


假设用户Darren面临一个问题:Darren是一个音乐会观众,他需要一直拿着音乐会门票,因为他们在通过安检时需要门票。 

放大好处(如何利用问题中的积极因素来解决问题) 

我们怎样才能使记录门票成为朋友间的一种有趣的竞争呢? 

探索相反的方向(将如何解决你所列出的问题的反面) 

我们怎样才能发明一种不用拿着票的方法呢? 

改变现状(想想完全改变这个过程的方法) 

我们如何制作非纸质的音乐会门票? 

将POV分解为碎片(这对于长时间、复杂的问题尤其有帮助) 

我们怎样才能使顾客的票不丢失呢?我们怎样才能让安全团队更容易处理丢失的机票呢? 

消除坏处(想想如何完全消除问题中消极的部分) 

我们怎样才能让音乐会观众不需要门票就能进入场馆呢? 

改变现状(把消极的形容词试着变成积极的) 

我们怎样才能使门票持有者在进入音乐会场地时不那么紧张呢? 

质疑假设(删除或更改任何有质疑的流程) 

我们如何在音乐会中取消安全检查程序? 

根据需要或上下文创建一个类比(考虑将这个用户体验与另一个用户体验进行比较的方法) 

我们怎样才能让通过安检像玩电子游戏一样? 

识别意外资源(考虑一下如何通过问题陈述中没有提到的资源来解决问题) 

如何使用面部识别软件帮助管理音乐会入场?

更多资讯:https://static1.squarespace.com/static/57c6b79629687fde090a0fdd/t/589cc8b8d2b85721b37d3efe/1486670008488/HMW-Worksheet.pdf


实践思考


开放的 

一个好的HMW模型应该允许多个解决方案。例如“我们如何使跟踪门票变得有趣和有竞争力?”可以用无数种方式来回答。 

不要太宽泛 

HMW是全面的,但要足够聚焦,才能关注到解决方案的重点。一个过于宽泛的HMW问题的例子:“我们如何才能使票务更好?”这个HMW没有为提出解决方案的想法提供足够明确的指导。 

进行多次修改 

在写完HMW问题后,可以修改它们。如果你发现你的HMW不能帮助你想出任何有用的解决方案,那就改变它! 

创造性的 

HMW意味着富有想象力,甚至是有趣的。你可以使用上面斯坦福大学列出的建议,想出新的、有创意的方法来组织你的问题。 

写尽可能多的HMW 

你拥有的HMW越多,你就能想出更多的解决方案。如果你能从所学的一个框架中提出不止一个问题,那就大胆写下所有!


方法二:八个疯狂创意 Crazy Eights


将一张纸对折3次,得到8个用划痕划分的模块,分别记录下8个设计创意点。相比于电脑,纸更加快速方便,只需要八分钟,你就可以获得八个解决方案并且非常方便团队交流。注意要控制创意时间,大概1分钟画1个方案草图。每个人选择两三个自己认为优秀的方案和团队成员共享交流,选出最好的方案,然后继续细化。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:腾讯ISUX团队    来源:伊糖巷陌



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



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

用户体验为什么很重要?

ui设计分享达人

你是否经历过以下场景?

>. 早上起床去上班,匆匆忙忙下楼发现公交车刚走,导致你需要等下一班车。

>. 好不容易坐上公交车,刷卡器半天才识别出来手机二维码,排在你后面的人都等的不耐烦。

>. 早高峰时期,行驶的路上公交车发生了一起车祸,你不得不下车选择骑共享单车,这导致上班花在路上的时间已经远远超过你的预想。

>. 来到公司你发现刚刚在公交车上点的咖啡还没有送过来,外卖订单显示已超时,小哥着急给你打电话说,找公司花了点时间,晚点送到。结果就是:尽管你很努力,但还是迟到了。终于,你来到自己的办公桌旁,感到焦躁不安,满腹委屈,精疲力尽,实际上你的一天还没有真正的开始,甚至连咖啡都没喝到。

什么是用户体验?


生活中难免会遇见各种各样的倒霉事,而这只是很多日子的一天,我们回头分析一下这些事情是不是本来就可以避免的。

外卖超时:之所以外卖小哥没找到公司地址可能是因为误触按钮,导致需要花更多时间找到订单页面。

交通事故:公交车和一辆从路口冲出来的汽车相撞,原因是司机为了调低收音机的音量,而暂时把视线从路面上离开造成的。

刷卡器:由于太着急,你把手机直接贴在机器上,导致无法识别,但也没有任何立马反馈你应该怎么做才会成功

公交车:早上之所以没有赶上公交车那是因为手机关注的公交车没有提醒你,当前班次的预计到达时间,如果公交或者地图软件能够有提前提醒功能,你就有足够的时间来规划选择坐哪个时间点的车。

人们在设计产品或服务时,如果能够多一点考虑到用户体验,以上的各种倒霉事也许都是可以避免的。我们所生产出来的产品是供人们在现实世界使用的,在产品开发过程中,人们更多的关注产品将来做什么,而用户体验是经常被忽略的一个因素,即产品如何工作,而这个因素恰恰是决定产品成败的关键因素。
用户体验更多的是指“产品如何与外界发生联系并发挥作用”,也就是人们如何“接触”和“使用”它。当人们问起你某个产品或者服务时,问的是使用体验,例如,用起来难不难?是否容易学会?使用感觉又如何?

用户体验总是体现在细微之处。例如在ios系统提前设定好了闹钟,用户使用手机过程中,如果到达了临近时间会提醒是否要关闭闹钟,反之则正常响铃,而且随着用户拿起手机的过程,音量也在逐渐下降。好的体验带来的是好的印象和感受,用户会继续发现其他商品的绝妙之处,为商家带来的是连续购买需求和利益。



从产品设计到用户体验设计

在大家常规的认知里,提到产品设计时更多的是在感官、功能角度上的理解。用户体验设计通常解决的是应用环境的综合问题。兼顾视觉和功能两方面因素,同时解决产品所面临的其他问题。比如在对于iphone刘海屏这一个工业产品设计的缺点,灵动岛的奇思妙想打破了硬件和软件之间的界限,还保证了用户尝试去完成其他某个任务时,相应的交互反馈起到的有效作用。



为体验而设计:使用第一

产品设计和用户体验设计的不同在哪里呢?对于简单的产品来说,创建一个良好的用户体验设计的要求,完全等同于产品自身的定义:即一把不能坐的椅子就不能称之为“椅子”。
对于更加复杂的产品来讲,在不断迭代的过程,每新增一个功能、特性、步骤,都会增加导致用户体验失败的机会。随着技术的崛起,一部拥有更多复杂功能的手机比起老旧电话机来讲,设计并生产的过程会变得更加困难。所以将用户体验设计纳入产品设计考虑范围内也变得至关重要。

用户体验就是商机

如果产品是一个以传递内容为主的平台,仅仅简单的排布信息是远远不够的。通过一种能帮助人们理解和接受的方式呈现出来的,尽可能有效的传达信息才是主要目标之一。否则用户很难发现所提供的或产品正是他想要寻找的。即使看到这些信息,也会觉得绝得这个产品很难用。
对于多种具有类似“特性”和“功能”的平台,用户如果得不到一次好的体验,他们则会选择使用你的竞争对手的产品。购买火车票时用户比较关注时间、票价、座席等信息,智行在多次体验优化之后页面信息展示越来越能够高效的传达,帮助用户在各种购买车票的场景快速筛选并作出决定判断。随着体验的提升为产品带来更加忠实的用户和转化率。用户体验对用户忠诚度有着很大的影响,营销广告或福利都可能无法让用户再访问第二次。但一次良好的体验却可以,而且你不会有太多的“第二次机会”去纠正它。



在乎你的用户


创建吸引人的、高效率的用户体验方法称为“以用户为中心的设计”。即:在开发产品的每个步骤中都要把用户列入考虑范围。在用户使用产品的过程中体验的每一件事情,对设计师来讲都应该是经过慎重和论证以后的决定。给予用户更多积极和愉快的体验,经过长期的时间检验,用户的粘性会越来越高。
iphone在第一代苹果上市销售,距今已经有15年的时间。产品设计所一直所坚持的原则之一即:用户体验。从细节开始,并贯穿于每个细节。以用户需求为主,在产品上实现了巨大革新,多点触控技术的成熟给予了如科幻电影般的交互体验,乔布斯创造出无与伦比具有改变人类生活的产品。随着科技和现代生活水平的发展,满足用户需求并带来优质体验也成为一个企业口碑和用户忠诚度的重要标准之一。

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

作者:腾讯ISUX团队    来源:Sissi生姜


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

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

设计方法丨国际主流人机交互设计模型

资深UI设计者

众所周知,人机交互是一门集调研,构思,设计和测试为一体的学科。作为一门覆盖多领域的多学科,包括并不限于心理学,行为学,编程,工程,设计,调研,和工商管理,现代人机交互的核心已经不再是从技术层面去解决问题, 而是侧重于以多个视角去挖掘问题的本质并思考问题背后的价值。也因此,人机交互学术界一直以来都试图寻找一种思考模式,或者理论模型,去将复杂的思考流程提炼出来。




01

————————

主流交互模型


近三十年来,人机交互领域的方法论可谓百花齐放,尽管许多知名研究机构与院校都发布了不同的设计模型与流程图,但是其内核终究大致相同(寻找问题——定义问题——设计——测试)。


以下是近年来国际最主流的七种人机交互设计模型:


1. 尼尔森诺曼集团设计流程 (Nielsen Norman Group)


2. 斯坦福大学设计学院设计流程(Stanford Design Thinking Process)


3. 《情景化设计:为生活而设计》 中的设计流程 (Contextual Design: Design for Life)


4. IBM环形设计模型 (IBM Loop Model)


5. 英国设计协会双钻石设计模型(Design Council Double Diamond)


6. LUMA 学院设计流程(LUMA Institute Design process)


7. Dubberly Design Office 桥型设计模型(Analysis-Synthesis Bridge Model)


其中,前6种应该都是大家相对熟悉的,我们在文末也附上了官方链接供大家探索。今天这篇文章我们将简要的带大家了解列表中最后一个也是最有特色的一个人机交互模型:桥型模型(Analysis-Synthesis Bridge Model)。




02

————————

桥型交互模型


桥型模型是美国 Dubberly Design Office发表的设计流程图(Analysis-Synthesis Bridge Model),对于不清楚的读者,此公司的创始人Hugh Dubberly 曾发布超五十篇人机交互领域的研究型文章,在多个知名设计协会挂名,并被录入美国 ACM 的 SIGCHI Academy, 成为公认对人机交互领域做出最杰出贡献的人之一。Dubberly 也曾在多个美国知名大学任职,因此,此模型也是多数国际人机交互学科的公认理论。


尽管相较于其他的流程图,这个流程图较为抽象,但是其所用的多维度分类却相对明了的阐释了设计的本质。如图所示,桥型模型的x轴分为现在和未来,y轴分为具象和抽象,以此来定义设计的状态。同时也加入了动词“形容”,“分析”,“研究”,“制作”去定义设计中的操作。在这个桥型设计流程中,设计师从左下角到右下角的过程代表从现象走向抽象再从抽象走向产品的过程,与此同时也代表着从今天走向明天,或者说从问题的现在态走向解决问题后的未来态。



现在态

起点从左下角开始,(what “is”)代表着问题本身,而左上角的(model of what “is”) 代表问题的抽象模型或者问题的本质。这两个阶段代表着设计中的调研阶段(Researching)。此时的设计师应该通过“形容具象的现象”(左下角格子 Describe+Concrete)即收集信息来拓宽对问题的了解然后再进行“分析抽象的模型”(左上角格子Interpret+Abstract)去制作问题模型来更清晰的看到现象的本质和规律。


在这个阶段,“世界并不清楚他想要什么样的设计”—— Paola Antonelli


在开始阶段之所以要抽象出问题模型,是因为作为设计师不能单纯的听从人们的诉求。当生活中出现一个问题时,生活中人们往往不太清楚自己烦恼的本质是什么,要么他们只看到了问题的表面,要么他们被太多因素混淆了。因此在这个阶段,设计师的责任就是去分析问题存在的环境与原因,并且以人为中心的角度去分析表象下人们的真正需求。也是因此,避免以技术为中心的分析(machine-centered-research)而选择以人为中心的研究(human-centered-research)才是交互设计师应有的职责。


在做以人为中心的研究时,收集和分析信息时避免内隐偏见(unconcious bias)是非常重要的。这里指由于生长在固定社会和文化下的而无意识带有的偏见,比如身体健全的人忘记考虑残疾人的需求,或者经常用电子产品的人下意识认为一些复杂操作很常规。在设计里,歧视不止包括在搜集用户信息时忽略了个别群体,同时也包括设计师本身所带的特定视角。一个成功的设计纵然应该满足大多数人的需求,但是一个向善的设计也不应该忽视特殊群体的情况。这里不得不提到,虽然现如今很多设计往往依靠大数据来进行设计,但是大数据本身就代表着忽略少部分群体的需求,导致少数群体的歧视愈发严重,甚至一度威胁到一些小众的题材。因此在调研时考虑到人种,年龄,经济情况,教育程度,是否残疾,和对科技的熟悉度可以更严谨的分析不同视角下问题的影响。


左下角常用的用户研究方法有情景调查(contextual inquiry),利益相关者逻辑图(stakeholder map),和参与型研究(Participatory Research)等等。左上角常用的分析方式有带入虚拟人格(persona)和流程图(journey mapping)等等。



未来态

右侧的两个阶段则代表问题的未来态或者设计原型态(prototyping)。右上角的 (model of what "could be")代表问题的未来的可能性,也就是一般说的设计和构思部分,而右下角的(what “could be”)就是将这些未来的可能性做出来,从概念化为产品。


然而如何从右上角的抽象模型到右下角具体设计呢?在这里便需要了解一个大致的设计信息层级。




如图所示,一个设计的是由多层结构组成的,从抽象到具象分为五个阶段,策略(Strategy),内容(Scope),结构(Structure),框架(Skeleton),视觉(Surface)。一个严谨的设计应该是从下而上发展的(从深层的策略到浅层视觉),并且每次在考虑深层的策略时应该避免浅层的干扰。这是因为浅层只是策略的表现的方式,而深层策略才是决定产品核心价值的关键。决定策略(Strategy)时应该直接依据模型左上角“问题的本质”来决定要设立什么样的产品目标。只有策略定了,才能确定这个产品的内容与受众群体。假如目标是让盲人点餐,那么内容有可能就是在这个页面提供特殊的菜单形式和电话快捷键。而假如目标是让人听音乐,那么内容可能就是提供音乐推荐与保存。而在结构方面,确立内容后只需要一个完善的逻辑,比如用户的具体使用流程是什么,就可以快速具现这个产品的结构。最后,框架和视觉阶段则更多只是一种表现手法的选择。无论最终选择如何设计,只要保证框架和视觉元素在整个产品中保持一致并且符合产品定位即可。


从策略到视觉的过程也就是模型中从右上角到右下角的过程。每个设计师的目标都应该是以具象的产品实现相对抽象的策略。而要想让视觉和策略紧密联系,就应该尽可能在每一步的过度时都考虑到前后步骤的衔接是否逻辑通顺,避免层与层之间脱节的现象发生。尽管在现实中,层与层之间的分隔往往没有这么清楚,但是这种分层的设计逻辑可以作为一个有用的构思框架,让设计师在发散思维的时候不偏离目标。


而最后即便到了右下角的产品产出,一个完整的设计流程也不算结束。一个成功的设计总是需要多个设计迭代的。尽管在每一个一个迭代中,右下角可能是最终产出,但是在一个完整设计流程里,右下角还应该连接左下角,将已经完成的设计再一次进行分析和测试并总结出优缺点,再进行下一轮的设计。


在右上角的设计部分中经常使用的方法有故事模版(story boarding),纸质低保真模版(paper prototyping),和以人为中心设计(human centered design)等等。


总而言之,桥型模型作为国际人机交互院校最常用的模型,从多个角度描述了从一个问题从研究到解决的过程。我们可以看得出,设计从来都不是一个随性而为的过程。从左侧的无偏见而系统的分析问题到右侧的遵循结构进行设计,设计师都应该在一个严谨的框架下进行思考和设计,这样才能做到有针对性的解决问题。在这里也希望大家能多多关注各类人机交互设计理念并从中获取灵感亦或找到适合自己的设计流程。




03

——————————

其他设计模型

下面是六种其他主流国际人机交互模型和官方链接供大家探索:


1. 尼尔森诺曼集团设计流程 (Nielsen Norman Group)


研究问题领域(discover),探索不同可能(explore),测试设计(test),和倾听反馈(listen)



官网链接: https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf


2. 斯坦福大学设计学院设计流程(Stanford Design Thinking Process)


抽离问题(empathize),定义问题(define),寻找灵感(ideate),制作原型(prototype),测试成品(test)。


官网链接: https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf 



3. 《情景化设计:为生活而设计》 中的设计流程 (Contextual Design: Design for Life)


理解问题(understand),发明未来(invent),情景话设计(design),制作原型(validate),和开发产品(develop)。



书本链接:https://www.goodreads.com/book/show/33805307-contextual-design




4. IBM环形设计模型 (IBM Loop Model)


观察(observe),反思反馈(reflect),和制作(make)。

官网链接: https://www.ibm.com/design/thinking/page/framework/loop




5. 英国设计协会双钻石设计模型(Design Council Double Diamond Model)


发现(discover),定义(define),制作(develop),传递(deliver)。

官网链接: https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond




6. LUMA 学院设计流程(LUMA Institute Design process)


看(looking),理解(understanding),制作(making)。


官网链接: https://www.luma-institute.com/about-luma/luma-system/




04

——————————

结语


以上就是本篇的全部内容了,希望大家读完后能对国际主流人机交互领域多了一些了解或者从中获取一些启发。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:腾讯ISUX团队    来源:站酷





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



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

玩转AE丨动效设计必备指南

资深UI设计者

动效是用户体验的重要组成部分,也是产品调性的重要体现。如今动效设计也有了更多的解决方案,如Framer、Principle、Flinto、Protopie等,这些软件在制作交互原型时,确实有更轻量便捷的优势,但效果也有一定的局限性,或者要求使用者有代码基础,比较适合有针对性的人群。而After Effects作为动效软件的鼻祖,以其强大的兼容性、效果丰富性和清晰明了的图层操作逻辑深得设计师们喜爱,不论是UI、运营还是多媒体类型的设计都能满足,无疑是目前最具有普适性的动效软件。本文从AE的插件、操作以及落地三个方面,为大家整理了一波实用技巧,希望能帮助大家在工作中更加得心应手。



——————————

Part 1. 便捷灵活-不容错过的精品插件

工欲善其事必先利其器,不论是AE还是其他软件,好的插件都能配合软件本身达到事半功倍的效果。这里介绍十款AE上不容错过的精品插件。



1.1 文件导入

AE与PS有很好的兼容性,PS的图层以及各种样式都能无偏差的导入到AE,但同样是Adobe家族的AI,要导入AE却特别麻烦,更不用说没有血缘的Sketch了。偏偏AI和Sketch却经常需要和AE打交道,这时候以下两款插件便应运而生。


Overlord:AI与AE互导

Overlord不仅可以实现AI导入AE,还能随时从AE导回AI修改,这对本身不适合用于绘制图形的AE来说,无疑是补上了一个短板。


最新的Overlord支持路径、形状、参数图形、剪切关系、文本、甚至大部分的渐变参数都能无偏差互导,并且可以设置导成子图层还是独立图层,可以说是非常方便了。

官网链接:https://www.battleaxe.co/overlord



AEUX:Sketch导入AE

如果说Overlord是AI和AE之间的一座桥梁,那AEUX就是Sketch和AE之间的一座桥梁。导入前在Sketch里将图层整理好,导入AE后图层关系也是一目了然。


官网链接:https://aeux.io/



1.2 使用过程

——————————

Motion Tools:常用功能合辑

如果说AE只能装一款插件,那必然是Motion Tools了,它将很多常用操作整合到一个面板上,并且可以跳过繁琐的常规操作。包括快速调整曲线、定位图层锚点、克隆关键帧、制作回弹效果、错位图层序列、生成多图层空对象等。这里演示几个常用功能。


快速调整速度缓动曲线:



不用再通过输入表达式,做出操控便捷又灵活的回弹效果:



锚点是元素变换时的基准点,更改锚点也是高频操作。Motion Tools不仅可以快速修改图层锚点,并且支持多图层批量操作:



官网链接:https://motiondesign.school/products/motion-tools/


Auto Crop:预合成裁切

新转成的预合成尺寸总是占满画布,不方便做动画且干扰其他图层选择。手动调节的话会影响元素的位置、位移等属性,Auto Crop很好地解决了这个问题,能够将预合成裁切至适合当前元素的尺寸。



官网链接:https://aescripts.com/auto-crop


Auto Sway:飘动效果

Auto Sway能够很便捷的制作头发或者服装飘动的效果,在日常运营设计中,让你的人物快速变得生动灵活起来。


官网链接:https://aescripts.com/autosway


Trapcode Particular:粒子效果

AE自身带有粒子效果器,点击“效果 → 模拟 → CC Particle World ”就是。但更强大更为人所熟知的却是这款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。

很多运营或游戏页面中的氛围元素,例如落花、飘雪、灰烬、火花、彩带等,Particular都可以快速做出。



除了运营设计,粒子在很多UI场景也同样适用,例如结合形变或路径做的飘散和拖尾效果,就可以用在充电或扫描等场景。



官网链接:https://www.maxon.net/zh/red-giant-complete/trapcode-suite



1.3 高品质导出

Bodymovin:Lottie格式输出

Bodymovin能够将AE中矢量图形做成的动效导成json文件,变成一串纯粹的代码,再被Lottie渲染还原出来。这就让“尺寸”和“帧率”摆脱了以往体积的束缚,导出的即使是又高清又流畅的大图,也可以保持很小的体积。


QQ最新的Q弹超清表情,就是用Lottie实现的,大家可以在手机QQ上亲自体验这种爽滑Q弹的感觉哦。


官网链接:https://aescripts.com/bodymovin/


PAG:完整的动画工作流

PAG(Portable Animated Graphics )是一套完整的动画工作流,在动画导出与渲染方面和Lottie相似,但更进一步的是,PAG还引入了视频序列帧结合矢量的混合导出能力,这就保证了PAG能支持AE的所有特性和效果。


另外PAG还提供完善的桌面预览工具、性能监测可视化、运行时可编辑等特点,能很好的打通设计与开发之间,从创作到素材交付上线的流程。



官网链接:https://pag.io/


Gifgun:导出小巧高清的Gif图

Gif格式因为不支持半透明区域且容易有锯齿,如今的实际开发中已经有了Apng、Lottie等很多更好的替代方案,但在网页浏览、文档编辑等许多场景,还是需要使用Gif来演示动效或者作为封面缩略图。AE从2014版本后就不支持Gif导出了,而Gifgun就是一款能很好地导出Gif格式的插件。



Gifgun导出的格式小巧清晰,本文所有动图就是用这款插件导出,真香。

官网链接:https://aescripts.com/gifgun/


Aftercodecs:导出小巧高清的MP4

AE本身不支持直接导出MP4,很多时候只能先导出体积庞大的MOV格式,再通过第三方软件转成MP4,操作繁琐不说,还损失画质。


Adobe自家的多媒体编码软件Media Encoder,也可以完美导出MP4格式,不过这款软件本身体积较大,每次打开都要运行很久。


这里推荐使用更实用的MP4导出软件 — Aftercodecs。安装后在输出模块设置里,就能找到对应的导出项了,并且导出的MP4也是小巧高清的。



官网链接:https://aescripts.com/aftercodecs/

Part 2. 高效操作-效率翻倍的小技巧和快捷键


2.1 实用小技巧

小技巧这部分,整理了AE高频操作经常会遇见的一些问题,以及对应比较高效的解决方案。

用空对象调整元素

当我们想调整的元素已经打上过关键帧,这时直接调整元素的位置或缩放属性,就会影响到原本的效果,使用空对象就可以解决这一问题。



整体拉伸关键帧

关键帧比较多时,按住 “ Option ” 键,用鼠标拖动最末尾的关键帧,可以对所选关键帧进行整体等比拉伸,并且支持多图层同时操作。


快速定位图层中心锚点

新建形状层的定位锚点总是不对齐图层的中心,这在做一些带缩放或旋转属性的动画时就特别不方便,按住“Command”双击“平移锚点工具”,即可使图层锚点快速对位到图层中心。



还有更直接的方法,就是在“首选项”里将“在新形状图层上居中放置锚点”打上勾,以后新建的形状层锚点都会自动对齐图层中心啦。



中英文AE快速切换

AE的很多插件和表达式对中文版本不兼容,包括很多教程也都是国外案例,所以其实直接用英文版的AE是最好的。但是难免也有跟我一样看见英文界面就抓瞎的同学,平时还是习惯用中文版,有需要时才换成英文版。这里介绍一种AE快速切换中英文的方法,对2018以上的版本都适用。


以macOS系统为例,在以下路径找到:


前往 \ 电脑 \ Macintosh HD \ 资源库 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml



将“application.xml”这个文件用“文本编辑”打开,然后按“Command + F”使用查找命令,将“zh_CN”文本替换为“en_US”,保存后重启AE就是英文版了。



Windows也是同理,对应路径为:


C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml


然后将“application.xml”这个文件用“记事本”打开,同样的查找“zh_CN”后替换“en_US”就好。


之后可以将“application.xml”文件分别存一份“zh_CN”中文和“en_US”英文的版本,下回再要切换时,直接将对应的“application.xml”文件复制到原路径替换即可。


视频素材循环

新置入一段想要循环的视频素材时,很多人习惯将素材复制多次,或者通过时间重映射打上关键帧后在添加循环表达式。其实并不需要这么麻烦,在项目窗口右键对应的素材,选择“解释素材 → 主要”,在弹出窗口直接就可以设置素材循环次数。




2.2 高效快捷键

虽然AE的全部快捷键可以写满长长一串列表,但在精不在多。实际使用时,其实只要记住一些常用的关键快捷键,就已经可以效率翻倍,享受“键步如飞”的感觉了。


以最常用的“添加关键帧”为例,在不使用快捷键的前提下,想要给对象添加一个“位置”关键帧,需要至少3个步骤:


而使用快捷键 “ Option+Shift+P ”,一步即可完成,并且不会展开不相关的属性:



这对于一个工程里需要用到成百上千次的k帧操作来说,着实可以省下不少时间,可以说是不得不用的一个快捷操作。


秉持在精不在多的原则,整理出以下一些高效又常用的快捷键,亲测好用哦!


因为作者是MacOS系统,所以下文中提到的 Option 可以对应 Windows 的 Alt ; Command 对应 Windows 的 Control 。


五大基础变换属性


在对应图层使用这五个快捷键,即可快速展开或收起对应属性。

位置:P(Position)

缩放:S(Scale)

旋转:R(Rotation)

不透明度:T(Transparency)

锚点:A(Anchor)

常用工具选择

选择工具:V

形状工具:Q

钢笔工具:P

摄像机工具:C


关键帧操作

快速添加关键帧:Option + Shift + “ * ”( * = 对应属性快捷键)

向右移动关键帧一帧:Option + 右箭头

向左移动关键帧一帧:Option + 左箭头

向右移动关键帧十帧:Option + Shift + 右箭头

向左移动关键帧十帧:Option + Shift + 左箭头

缓动关键帧:F9


时间指针操作

定位到上一可见关键帧:J

定位到下一可见关键帧:K

定位到图层入点:I

定位到图层出点:O

设置当前为工作区开始:B

设置当前为工作区结束: N


图层操作

将图层拆分 :Shift + Command + D

裁去时间线左侧图层:Option + [

裁去时间线右侧图层:Option + ]

设置当前为入点: [

设置当前为出点: ]

复制图层:Command + D


其他常用操作

展开/收起带关键帧的属性:U

展开/收起所有属性:UU

展开/收起遮罩属性:M

展开/收起音频属性:L

转为预合成:Shift + Command + C

图像自适应合成宽高:Shift + Option + F


After Effects官方快捷键大全:https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html




Part 3 .实际落地-动效输出与标注

设计再好的动效如果不能实际落地,那一切也只是徒劳,所以动效输出在对接开发时非常关键。按照输出和实现的方式不同,我们可以将动效分为两种类型,一种是播放型动效,一种是交互型动效。


3.1 播放型动效输出

播放型动效是指在输出时效果就已经固定的动效,满足触发条件后播放出来,过程中并不会有影响效果的元素。


例如常见的APP底部导航点击效果,icon动效在用户点击时触发播放,这个效果在输出时就是固定的,不受任何其他因素影响,可以由设计师直接导出。

播放型动效有以下几种比较常见的输出格式:


Gif、Apng、Webp本质上都是将位图进行压缩和转换,而Lottie则是基于代码层面的动画渲染,PAG则结合了两者的特性。目前一般使用Apng、Lottie、和PAG就已经可以覆盖大部分的输出场景,是可以优先考虑的动图格式。


3.2 交互型动效标注

交互型动效是指变换内容跟我们的交互操作相关联的动效,并且包含无法由设计师直接导出的元素,比如用户的头像、名称等。


比如这个支付面板切换的效果,变换的元素中包含了用户的余额和绑卡信息,这些信息是无法由设计师输出的。


这种动效需要开发在代码侧还原。如果只是输出视频demo,开发同学很难将其中的细节(例如时间出入点、曲线速率等)还原出来。这就需要设计师有一份清晰的标注文档,将动效的细节参数跟开发更好的明确下来。


一份规范的动效标注文档,至少应该包含以下几个方面,


触发:在什么条件下触发动效,例如点击、双击、滑动、长按等;

对象:发生变换的对象,例如按钮、列表、文字等;

属性:具体变换的属性,例如位移、缩放、不透明度等;

参数:换化属性的具体参数,例如不透明度值从0到1;

时长:变换的起始时间点、持续时间;

曲线:变换的速率曲线,描述在固定的时长范围内,速度是如何变化的;


以上图的支付面板首次切换过程为例,我们的标注文档是这样的:


第一步定义好页面的起始和结束状态,并标明动效元素



第二步则是将各元素的运动细节用具体参数描述清楚





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:腾讯ISUX团队    来源:站酷





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



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

声临其境 | QQ音视频娱乐社交设计

资深UI设计者

平时用QQ音视频来做什么呢?和好友聊天?与家人联系?还是工作开会?现在你有了新选择,解锁视频娱乐新方式,QQ一起派对让你不必出门,也能和好友一起玩聚会游戏。



01

——————————

音视频娱乐新形态


挖掘更好玩的娱乐社交场景,能带给用户更愉悦的体验。疫情期间,线下聚会因此受限,线上娱乐应运而生,在此契机之下,期望借助音视频实时互动、声影重现的特性,开启了新的娱乐形态——QQ一起派对。


观察竞品普遍存在不足之处,即缺乏真实聚会游戏的氛围与互动。因此,解决社交游戏产品缺少真实情境的问题,成为QQ一起派对的创新机会点,有利于在竞品中突围,塑造差异化优势。




02

——————————

打造真实聚会游戏体验

2.1 回归本质,突围创新

QQ一起派对是基于音视频展开的线上聚会游戏,结合了实时互动与娱乐化内容。为了让游戏过程更贴近真实聚会场景,我们从游戏氛围和自然交互两方面切入,寻找创新突破口。


游戏氛围


构建适用于游戏类型的界面框架,让线上聚会更贴近真实世界,并运用视觉感染力,营造环境氛围,包括场景具象化、增强代入感等方法,实时感知好友的情感变化,从而获得社交临场感,在心理上感到彼此的存在。


自然交互


有别于竞品需通过点击按钮作答,QQ一起派对利用实时语音识别,让用户通过更自然的人机交互方式,在游戏过程中进行语音抢答,彷佛置身于真实世界中与好友互动,成为QQ一起派对的独特卖点(Unique Selling Proposition)。




综上所述,QQ一起派对的设计要素包括:、


1. 社交临场感(Social Presence):场景具象化、高度同步实时响应、感知他人情感变化


2. 沉浸感(Immersion):营造氛围、增强代入感、突出内容与主角


3. 可玩性(Playability):游戏界面、游戏机制、游戏互动


4. 凝聚力(Cohesion):将好友聚在一起、吸引更多用户来玩





2.2 游戏界面设计

舞台场景化布局


QQ一起派对能让用户创建房间,邀请好友参加线上聚会,促使游戏氛围具象化。游戏类型聚焦于〝你演我猜〞、〝明星问答〞等猜题游戏,为了增强代入感,让用户融入情境之中,我们采用舞台表演的界面隐喻(Interface Metaphor),借由深色背景突出内容与表演者。界面框架选择一个大画面与多个小画面的组合,更贴近轮流上台表演的游戏类型。通过舞台场景化布局,模拟线下互动的真实感。





多层次感官体验

我们真实还原了线下抢答的互动体验,通过倒计时动效、实时分数标签,以及抢答成功反馈,增添游戏的紧张感与刺激感。


在游戏过程中,除了通过视频画面感知好友的情感变化,用户的语音状态也会实时反馈在头像上,响应抢答题目、好友交谈,以及各种表达情绪的声音,借着声音视觉化的效果,搭配视频与人声的重现,交织出多层次的感官体验。




邀请消息实况化

发送邀请是召集好友的重要途径,而作为〝邀请函〞的消息,需要传达明确的信息,让用户一眼就能感知房间内的状态,包括准备开始、游戏中、游戏结束等,避免用户点击加入游戏时,却因游戏已开始或结束而无法加入。为此,我们将邀请消息实况化,持续更新当前状态、参与成员等,让用户能实时感知派对房间的变化。





03

——————————

拯救孤独,陌生人玩法登场


3.1 让你随时找到伙伴

排解寂寞心理诉求

QQ一起派对初期聚焦于好友一起玩,但仍不免发生创建了房间,当下找不到好友,或因等待过久而退出房间的状况,使得创建房间到实际参与的转化率受到影响。从用户访谈结果来看,用户存在排解寂寞的心理诉求,但对象不一定得是熟人好友,因此渴望找到游戏伙伴、快速开始游戏,成为QQ一起派对扩展至陌生人玩法的契机。


引入陌生人匹配


针对找不到好友的问题,我们新增了匹配陌生人的能力,用户可从游戏大厅进行随机匹配,倘若创建房间后找不到好友,也能在房间内匹配玩家,降低游戏参与门槛。


此外,进一步优化房间内的界面布局,将游戏卡片缩小平铺排列,让用户一眼就能看到多款游戏,提升对游戏数量的感知与转化率。在游戏类型上,新增了猜歌与知识问答两款游戏,并提升现有题库质量,避免游戏趣味性不足,影响用户留存率。




3.2 游戏大厅情感化设计

搭建游戏世界观

为了增强游戏氛围,我们通过情感化设计带领用户进入情景中,让用户更好地理解每个玩法,并从游戏玩法与情感诉求提炼出场景元素,以此搭建游戏世界观,并将故事情节加以推演,增强趣味性与独特性,还能进一步提升记忆度。




利用光效聚焦视线

光效有利于吸引和聚焦视线,并以不同的表现形式来影响情绪。我们从光的色彩、动效、光感和造型等层面,创造出五种增强感官体验的光效设计,将其应用在游戏大厅入口,借由不同的光效类型与动画形态,强化用户的世界观感知。





会讲故事的界面

带有情感的故事会在记忆中发酵,引领用户进入场景。我们将游戏入口的功能属性,转化为富有故事性的场景设计,当用户被故事所吸引,多感官区域被激活,将会激发用户情绪,有利于记忆与理解游戏入口,对游戏产生共情,进而超出产品的功能价值,与用户建立情感链接。




例如匹配陌生人入口,使用QQ的IP形象驾驶UFO,准备召集用户前往神秘的太空之旅,意味着通过陌生人匹配,你将摆脱寂寞,以光速般的速度找到游戏伙伴、快速开始游戏。通过故事剧情激发情感共鸣,并适当结合IP渗透品牌价值,吸引用户参与游戏。



破格设计能够加强张力、突出游戏主题,我们运用破格效果的3D图标造型,彰显游戏的独特调性,树立鲜明的品牌印象。




组件化卡片设计

组件化除了提高设计效率,还能从整体一致性考量差异化。我们将游戏卡片、题库卡片、提示卡片和入口卡片等功能界面,构建一套组件系统,让框架布局贯通全流程,打造体验一致的可玩性,利于后续的扩充与延展。





3.3 生存战增添挑战性

激发持续参与动力

根据游戏可玩性研究,提供挑战与磨练技巧的机会,对持续参与游戏的动机有正面影响。有鉴于此,除了提供随机匹配、召集同好共乐,我们还设计了极限生存战玩法,希望借着1v1淘汰赛制增添乐趣与挑战性,激发用户持续参与的动力,特别是年轻人酷爱这种竞技感,击败的对手越多,获得的奖励就越高,有利于勾起用户的胜负欲。





匹配动效强化氛围

为了营造同场竞技的临场感,我们利用匹配动效强化氛围。随着已加入玩家的数字不断增加,底部会实时展示用户头像,具象化呈现玩家数量,烘托热闹气氛,消除等待时的焦虑感,让用户处于蓄势待发的状态,而红蓝对战布局则进一步强化PK宣战的氛围。过程中若有玩家遭到淘汰,用户也能通过底部头像感知剩馀玩家数量,以此增强游戏临场感与成就感。





增强荣誉感与仪式感

每轮击败对手时,答题区域将变为全屏的庆祝画面,搭配撒花特效、头像聚光灯,营造欢愉的胜利氛围。而在游戏结果页,我们同样利用色彩和动效的差异对比,塑造胜败双方的情绪氛围,以此增强荣誉感与仪式感。在生存战登顶挑战成功的用户,将会站上颁奖台授予最高荣誉,在舞台聚光灯的照耀下,迎接光荣胜利。排行榜有助于强化击败众多好手的感知,激发胜利者的分享欲。





04

——————————

结语


QQ一起派对推出后深受用户喜爱、获得广泛好评,调研结果显示,用户整体评价相当高,也乐于将QQ一起派对推荐给好友。


综而观之,音视频除了广泛应用在通讯场景,正逐渐赋能更多创新场景,而娱乐场景更成为兵家必争之地。QQ一起派对开启了新的娱乐形态,充分发挥音视频声影重现的独特优势,消弭了空间距离,尝试解决社交游戏产品缺少真实情境的问题,让游戏过程更具临场感,就像面对面进行游戏一般。未来将从玩法丰富性、游戏挑战性、题库可玩性三方面持续优化,打造更好玩的音视频体验。




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

作者:腾讯ISUX团队    来源:站酷


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

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

日历

链接

个人资料

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

存档