用户体验设计是一个动态领域,每年都会为我们带来新的趋势,最近十二个月也不例外。全球新冠病毒大流行和国家封锁使我们与数字世界和现实世界之间的互动方式发生了突然的变化。人们不仅开始在网上花费更多的时间;他们的思考方式和表现方式也发生了不同。
本文主要阐述2021用户体验的趋势,我们相信这将在新的一年里占据主导地位。查看一下您可以利用哪些趋势超越竞争对手并在人群中脱颖而出吧。
我们在2020年UX状态预测中讨论了语音用户界面(VUI)。如今年所示,语音指令仍然是UX设计中最热门的趋势之一。可以肯定地说,明年不应忽略它。
毫无疑问,到2021年,语音聊天机器人和虚拟助手将继续流行。用户在数字体验方面一直在寻求简单性和效率。市场需求,高期望值以及人工智能技术的迅速发展使品牌别无选择,只能在其产品中包含基于语音的功能。
已经有许多企业为广泛的VUI实施奠定了基础。例如,星巴克推出了一种名为My Starbucks Barista的基于AI的聊天机器人。其目标是通过允许用户通过语音命令购买自己喜欢的饮料来改善咖啡订购体验。
极简主义可能是当今视觉设计中最明显的趋势之一。用户正在体验越来越多的网站所有者想要传递的关键消息。Cookie弹出窗口,打折广告和各种通知旨在吸引和转化网站访问者,但它们也吸引了我们的注意力。这就是简约的以用户为中心的设计应运而生的地方。
但是,“极简主义”并不意味着“沉闷”或“原始”。意思是“优雅”和“高效”。尽管必须使用数量有限的颜色,设计元素和明亮的组合,但UX设计人员仍然有很大的发挥空间。此外,元素的功能最为重要,正确突出产品功能并传达正确信息的能力需要大量的创造力。相反,仅具有装饰目的的组件正逐渐失去其重要性。
内容,消息和导航的清晰度是UX设计的简约方法的另一个重要方面。信息过载对于大多数现代用户来说是一个痛苦,这意味着网站所有者应努力使自己的UX文字简洁明了。
负空间是用户体验设计的一种大趋势,它已经脱离了对简约UI的市场需求。简而言之,负空间是页面布局中对象周围(宏空间)或对象内部(微空间)的空白区域。它已经成为独立的设计元素,在视觉美学和用户体验优化中起着至关重要的作用。谷歌的主页,苹果的官方商店以及一些用Webflow创建的网站就是很好的例子。
留出一定的空间,在设计中添加“寂静的感觉”,必须是始终有意义的。否则,用户可以将其视为缺少信息。负空间的主要功能是整理网页,以吸引用户对关键对象和消息的注意。建立清晰的内容层次结构有助于UX设计人员将用户的注意力吸引到最重要的内容上。
负空间有时也称为“空白区域”或“留白区域”。所有这些术语都是可以互换的。当区域中没有元素时,您还可以在深色模式或任何其他颜色下使用此用户体验趋势。
在发生COVID-19大流行之后的在线体验将与我们习惯的在线体验不同。UX设计以相关方式反映了缺陷。为了使品牌的数字化形象更具关联性,设计师有意在版面设计中实现了一些“缺陷”。 它可以是任何东西,从手绘对象到构图或页面的不寻常元素。
通常,不完美的设计可以很好地证明品牌的身份并突出其独特性。但是,如果要应用这种UX趋势,则必须记住一个关键规则:必须保持平衡。如果你做得过多,那是行不通的。
中性风格是UI设计中其他两种大规模方法(拟态和平面设计)的组合,它们通常被认为彼此相对。拟态化是关于模仿现实世界中的物体以及我们与物体交互的方式。
几十年前,当需要使用超现实元素来创建直观且用户友好的UI时,它很流行。垃圾桶就是例子之一。另一方面,平面设计是一个更新的,简化的概念,围绕二维元素,极简主义和鲜艳的色彩。
同质性兼顾了两者的优点。它使用图形强度大的元素,阴影和渐变来使按钮和卡片类似于自然界中的对象,而不是精确地重新创建它们。中性风格不会将现实主义推到极致。取而代之的是,它努力实现浅色和微妙对比度的“柔和”外观。
在过去大约一年的时间里,同质化一直是UI / UX专业人员中讨论最多的主题之一。尽管仍然没有很多真正的数字产品的用户界面遵循这种方法,但许多设计人员对该概念感到兴奋。像Behance和Dribbble这样的专业平台已经包含了许多同态的例子。因此,我们有充分的理由相信,这一趋势最终将在2021年出现在我们的手机和笔记本电脑中。
视差效果和3D元素并不是UX设计中的全新内容。我们已经看到了如何在许多Web设计解决方案中实现它们。但是,我们仍然观察到这些用户体验趋势正在逐步普及。
首先,它的使用量显着增加。如今,3D元素和视差效果已不再是网络上奇特的事物。它们更为常见,特别是在代表着脱颖而出的时尚和电子商务品牌的网站和应用上。
另一种趋势是尝试在一个界面中结合视差效果和3D图形。使用视差滚动时,网页背景和前景元素以不同的速度移动。仅凭它就能产生深度感。通过为此添加3D对象,您可以创建一种真正的身临其境的体验,并将在用户的记忆中保留很长时间。
随着我们设备屏幕的变宽,UI / UX设计中出现了不对称趋势。通常,不对称是野兽派的一种属性,这是艺术和网页设计中与极简主义相反的一种风格。但是,如果与其他残酷的设计元素分开使用,它可以使您的网站看起来有趣,同时使它保持微妙和优雅。
不对称布局的UI / UX趋势通常与其他创造性的Web设计技术一起实现,例如破碎的网格,重叠的元素和分割的屏幕。您也可以将不对称性应用于排版。如果操作正确,它将使您的品牌信息更加引人注目和令人难忘。
但是,请务必记住,非对称设计并不意味着“随机放置的UI元素”。在布局上定位对象的不寻常方式应该引导用户的眼睛朝正确的方向前进,并帮助品牌强调重要信息。
今天,当我们在互联网上进入随机网站时,很可能会看到GIF,微型动画,动画插图或其他一些运动设计元素。动画在用户体验设计中仍然很流行,并且使用频率不断增长。
除了具有视觉吸引力之外,移动物体还可以改善用户参与度并简化导航。他们还可以为数字产品或服务注入生命,使它们更具个性。
如果要在用户界面设计中使用这种软件开发趋势,那么明智地执行此操作至关重要。漂浮在屏幕上没有特定目的的对象可能会使访问者感到困惑,从而促使他们甚至比计划的要早离开网页。动画元素也不应使用户界面不必要地复杂。它们始终必须是相关的,有价值的和平稳的。
信息体系结构是在页面上组织和构造不同内容的方式。它是以用户为中心的设计(UCD)的基本要素,旨在使用户的数字环境更加舒适。与用户研究和可用性测试一起,构建有效,有用且一致的信息体系结构是UCD流程的必不可少的阶段。
为了创建一个实用的信息体系结构,UX设计人员需要对产品的目标受众,其行为以及使用数字解决方案的原因有深入的了解。用户应该无需花费太多精力就能获得所需的结果。因此,在设计过程的线框阶段始终必须考虑用户的目标,清晰的导航和内容表示(包括盲点监视)。
我们创建此文章是为了让您在当今竞争异常激烈的数字世界中站稳脚跟。这里提到的所有UX趋势绝对可以改善几乎每个软件解决方案或网站的用户体验。即使用户期望很高,它们也可以使您的产品在视觉上对目标受众更具吸引力。
文章来源:站酷 作者:ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
不同的阶段,临摹的目的不尽相同。一般来说,前期临摹更多的是练习软件、技法,后期练习别人的风格表达,综合运用。所以,我把临摹分为技法临摹、半原创到原创 3 个阶段,每一个阶段没有绝对的界限,都是在积累创意,完全是可以用到自己的项目中去的。
今天会分享一个我当年做临摹练习并融入实际项目中的小案例。
大概是在 15 年左右,在网上看到锤子设计师设计的一个图标,觉得非常惊艳,当时就想把它临摹下来,这是当时临摹的一个效果。
△ 原作
△ 这是我当时临摹的图
我在临摹这张图的时候,想达到的目标是能根据自己的 logo 色及文字,做一个半原创的设计。
然后实际练习中,不断观察原作发现有一些细节值得学习:
当时,对我来说,在练习的过程中有一个难点就是关于第 3 个细节水的纹理执行有些难度,因为其中包括了粗细变化、虚实变化、明暗变化等等,单纯的用图层样式或者矢量去画的话,难度都比较大。这个细节当时耗费了我不少时间,后面突然想到其实也可以用合成的办法来实现,然后我去找了真实水纹的图片进行叠加,很快就搞定了。所以,只要能达到效果,不能太过于局限某一种思路。
分析并完成这些细节后,就是你在做这个练习中学到的点,尝试把它们学以致用。
记得当时在 360 时需要设计一套关于摩洛哥蓝色小镇的官方定制版主题图标。从搜集的当地代表性的图片中发现,多彩颜料是当地的一大特征,所以决定以染料为关键词去画一个图标,又因为颜料本身自带多彩的特点,所以以它为主题图标就很合适了。
然后在思考这个图标的时候,首先会应用参考图中的配色,并结合染缸的造型做出了第一版的效果。
这个效果虽然是表达了那个意思,但缺乏亮点,联想之前练习过水的技法表达(临摹中第 3 点细节运用),正好可以利用水的纹理做下强化,这样就优化出了第二版。
嗯,看起来感觉有了一些特点,但感觉缺乏细节,接着思考水除了有纹理高光,应该还会有边缘高光(结合临摹中第 5 点细节),所以在边缘尝试加了高光,增加体积感,做出水要漫出来的感觉。
如果只有这一层高光的话,细节度感觉还是不大够,在之前的文章《如何从优秀作品中偷师,用一个游戏案例教你思路》我有分享到在 UI 大佬的作品中能学到他们对于 1px 高光的使用(临摹作用中的第 7 点),这里因为是液体的材质表现,所以增加一个高光点增加水的通透感。
到目前为止,似乎看起来已经差不多了,但考虑到现实世界中,溢出的彩色液体在透光性很好的情况下,也会对周围环境产生影响,所以我在颜料设计的四周,配上对应的四种颜色的模糊投影(临摹练习中的第 6 点)。
在思考下,在临摹的图标中为了使得图标更加自然,作品中其实结合了很多真实世界中会发生的情况,比如水的折射,气泡的比例,深浅等等,那对于染料来说,会有怎样的真实情况发生呢?我当时想到一点是,染料在用的过程中其实很容易洒出来,所以图标背板上现在太过于干净了,增加一些细节能够使得背板能够跟主体物产生关联,也更加自然。嗯,又是一个小细节。
最后,我们对比下第一版和最终版的效果,细节确实丰富了很多。
一张动态图可以更加清晰的看到变化。
这次图标的优化过程,我觉得有几个要点对我来说印象深刻的:
图标的风格可以是扁平的,但想要增加自然舒服的细节,一样可以像画写实风格那样仿照现实。你需要留心观察这个世界,就算是一张照片中也能有非常多可以利用的细节。
碰到难做出来的细节,多想想有没有更效率的办法。比如在做水纹理的时候,一开始就想着完全靠鼠绘画出来,结果效果一直不大好,然后利用 PS 合成的方法,很快就能把效果做出来。
对于图标来说,要注意其整体性。比如图标中的主体物不要跟背景脱离,不要让图标背板只是作为一个容器,而要让背板也成为图标本身的一部分,这样图标的整体性会更好。
临摹的过程中,一定要多分析,多记录自己觉得是细节的点。每一次记录,都可能是将来设计时提升细节的灵感来源。
以上内容只是我在日常练习中应用到实际项目中的一个小案例,其实还有非常多的灵感想法都来自于你平时做的练习,关键是要多动手,多总结,才能增强自己对细节的把握能力。
文章来源:优设网 作者:彩云译设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近负责的新项目快上线了(感觉我好像一直在做 0-1),给大家总结了5个一定会遇到的新项目盲区及最新的解法,希望能帮助大家在交付开发前就顺利完成设计输出。
2020 年 4 月后,我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮,但关于这个按钮的设计规范其实有比较硬性的规定,没有注意的话到了开发还原的时候就容易踩坑。
在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”,手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。
苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的,其中就包含将其弱化为一个圆形的图标按钮,只是图标与圆形按钮的大小比例是官方固定的比例(这个大家直接下载官方提供的图标,它是自带留白的区域的,保持图标与高宽一致就符合要求了)。
而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存,主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。
这个时候需要特别注意的是,苹果官方对于这种大按钮的限制主要在于 3 个部分:
剩下的按钮样式,比如颜色和描边也非常有限,只可以使用白色填充黑色描边与纯黑色底这 2 种。
想了解更多具体内容,可以参考官方贴:https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的,基本就是尺寸换换。这次输出启动图标,被安卓的开发大大告知,安卓可以出这种带动效效果的启动图标了,它的原理和效果,如下图:
实现这个效果的设计配合输出也很简单,只需要整理一下的具体启动图标输出就可以:
1. 启动图标(前景,不带背景的)-108dp(324px)
当然以上仅针对纯色背景,可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下:
想了解更多具体内容的铁汁,戳底下官方传送门:https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
这次新项目又遇到了开发中改稿的问题,大部分都因为全屏的背景图切图大小问题。
个别全屏视觉的界面,比如闪屏、登录页、音视频语音等等,我们通常设计时不考虑切图的大小问题就会比较放飞去设计。
但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右,就算把压缩率提到 80%+(市面上大部分压缩软件的压缩率都很有限,比如大家常用的 tinypng、pp 鸭等),就算你重复压缩,也有至少 200 多 KB,远远超出开发 100k 以内的切图大小限制。
所以不得不要求我们在输出格式的时候抛弃 png 格式,启用 JPG。
不过实际设计时候我们可能仍然会遇到不能用 JPG,必须用 PNG 格式的情况(透明度蒙层),那么建议大家可以尝试以下 2 个小技巧:
最后不想屈服于样式限制的铁汁,一定记得提前输出格式大小康康会不会超标严重(尽量控制在 100k 以内),不然无法落地再好看也没有用咯。
目前关于移动端界面里个别小动效的导出比较主流的几种格式是:Gif、逐帧图、Lottie(Jason)、Webp、Apng。
Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了,这里稍微科普 2 个陌生一点的格式:
目前我觉得性价比最高的就是 webp,它的优势主要在于:
唯一的 2 个问题在于:
我度娘过一些导出 webp 的方式都不是很好用,问了我司的动效设计师,推荐一个比较简单靠谱的方式分享给大家:
1. 先从 AE 导出逐帧图(记得需要循环的动效做好循环)
不知道如何到逐帧图的看这里:渲染→渲染设置→格式→选择“PNG”序列→导出即可
2.下载 isparta
3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式(可选)
设计交付的协同平台现在市面上很多,很多大厂也有自己内部的协同平台来承载设计交付,俺们猪厂用的叫 dbox(非常滴不好用),在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台,把交付的协同平台都做了一番调研,这里给大家直接看表格吧。
看完图大家就会发现除了 Figma 大家的使用情况不会差很多,差的主要还是钱。总的来说的建议就是,如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。
如果还在用 sketch 和 XD 的铁汁,交付型的协同平台我个人比较推荐 Zeplin,虽然有的人会说它服务器在国外很卡,我觉得其实还好吧,同时 Zeplin 近几年还解决了 Win 系统适配的问题。
然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的,因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台,也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件,瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能,到底是企鹅的社交基因太强大还是怎么肥四?
文章来源:优设网 作者:Nana的设计锦囊
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
调查问卷,是一个低成本快速收集资料的定量分析工具。这是个看起来简单,产出的问卷也看似很简单,但是在整体设计的过程却是需要很多的思考和预备。
关于调查问卷,会分成三个部分来解说,
废话不说,直接开干!
1. 为什么做问卷
这个是问卷的目的,也直接影响后面问题的设计。
2. 如何使用问卷的研究结果
这是关于问卷解决方案的落地。不需要太过细致的落地计划,但是至少要清楚,这份问卷的研究成果,可以获得多少支持力度。不管问卷发现了多么伟大的问题,如果没有落地,其实是没有无意义。也切忌不要今年做的研究结果,明年来实施,那问卷的时效性和准确性就会大打折扣了,因为市场的瞬息万变。
这是做所有事前,都要问的问题,「为什么做 Why」。而这个问题为什么重要呢,因为这会关系到设计问卷的核心内容是什么,会影响问卷的构成,当然最后也会产出不同的结果。
问卷的目的主要可以分为六个方面
1. 收集用户信息
很多时候,我们或许知道理想目标用户是谁,但是谁才是真正使用我们产品的用户呢?了解真正使用的用户,可以对用户进行更针对性的分析和设计。
2. 了解用户使用习惯
了解用户在产品上是如何使用产品的,以及用户的使用路径是否按着我们期待的方式进行,这是很有必要,这也是一个验证的过程。
2. 满意度
了解用户对产品的满意程度,对于用户不满意的方面,可以进行归纳总结,并给出合理的解决方案
3. 建议反馈、吐槽、好评
从问卷中收集用户的心声,明白槽点是什么。同时也收集用户的好评,这也是激励团队一个很好的方法,因为是直接来自用户。
4. 体验优化
对一个成功的产品来说,它要好用,它也要好看。产品有大改版前,可以用问卷来评估整体产品的体验如何,以便在重新设计的方向上能更好聚焦。
5. 需求验证
很多时候,需求可能没那么明确,用户和产品间始终存在着 gap, 所以我们有时对方案琢磨不定时,可能会试运行,后续看用户反馈。通过合理设计问卷,我们也可以稍微窥探到用户的想法
但是对需求的验证,单通过问卷还是比较难的,只能窥探到比较浅的一层,最好后续可以对用户进行访谈来做后续跟踪,以便了解事情的全面。
这里要注意的是,问卷不适合探索用户的新的需求,或者要验证很精准的信息等比较复杂性的问题。
如果你问用户,近期会推出新功能,问他会不会用。大致上,你得到的回答都是肯定。很多时候,同意比拒绝更简单。
根据提问的方式,可以分为 「是什么」「怎么样」「怎么办」
1. 是什么
主要是用户信息、使用习惯等问题。
例如,年龄层、职业、使用产品目的、知道产品的渠道、使用频率、使用竞品软件、整体满意度等
2. 怎么样
主要是询问用户原因,比如打这个分数的原因,某功能使用如何等
3. 怎么办
主要是询问用户的建议、期待产品改进的地方
问卷中并不是所有问题都适合问,有一些比较敏感的问题需要去避免,以免激起用户的负面情绪
1. 敏感性问题
个人信息类的问题比较容易会有敏感信息存在,就像你问用户工资区间,和在问卷最后告知用户参与问卷都有奖品,需要填写收货地址。很明显收货地址的准确性会比工资更高。
2. 措辞严谨
3. 问卷的顺序
先简单后复杂,并注意整体逻辑性的表达。循序渐进,如果一开头就是很难的问题,用户很容易放弃答题
4. 问题长度
尽量保持所有问题在一个差不多的长度呢,保持一样的节奏。避免时长时短
5. 避免专业词汇
很多时候,我们会用一些所谓的“行话”来表达,但是在问卷当中,无法保证用户同样是理解的,而且也会让用户产生距离感,非必要情况下,不要使用专业词汇
6. 选择题枚举要穷尽
题目数最好不多于 7 个,太多也会造成用户选择困难,最后记得加个其他并提供文本框输入
7. 避免互斥、重复、相似
问题避免前后矛盾,造成用户困扰,也不要重复或相似度极高的问题,除非这个问题是陷阱题,为了检验用户是否认真答题。但是在数量有限的问题中,一般比较少使用陷阱题
8. 保持开放性
为所有选择的选项,加入「其他——」「以上都不是」「不知道」,用户可能会觉得问题或答案不匹配,而不知道选什么,这时需要给用户一个出口,避免产生无效数据
9. 避免询问引导性的问题
大部分用户认为 XX 功能,很好用,你觉得呢?
如果看到这样问题,大概可以从中读出两个信息,1. 大家都觉得好用 2. 平台希望我说好用。
这个问题所传达出来的隐藏含义会引导用户做出不真实的反馈,这是没有意义的问题
10. 避免让用户选择「 是/否」「真/假」「好/坏」
强制选择非黑即白,大部分情况下没什么意思,因为用户可能不确定。这个问题本身也没有太大价值,也会错过用户一些比较有趣的回答。
所以如果这个问题的目的,是一定要知道的,可以更改提问的方式。
对于用户的问题,答案要可以量化表达,来产生数据,才便于后续数据的分析
11. 避免问用户将来的事,或回忆许久前的事
当人们将自己的行为投射到未来时,通常会过于简单化和理想化,人们更擅于解释当下进行的内容。
所以,如果要知道特定环境下用户的操作,则要配合合适的场景预设,并且是用户熟悉的场景。或者可以直接问,今天你会如何如何
所以可以通过询问今天的行为来,确定将来会不会使用。当然这不是绝对的,毕竟未来存在太多变数。
对于许久前的用户的操作行为,也尽量不询问,因为会忘记,而当强迫他去思考时,他可能自己脑补,产生不准确的记忆,进而对研究结果产生偏差。
12. 其他
问卷中存在多选题,必选题,选填题,记得预览问卷时,注意问题平台有无自动添加文字说明。
不要用 checkbox, radio 来区别多选和单选,这是不能准确的传达,也有可能用户没有注意到,或者就不清楚,而使用文字的表述会更清晰,不会产生歧义。
必选题,选填题,如果问卷平台,也只是用*号来表达必选时,建议在文字上也加上这样的说明
整体问卷的过程需要时间,所以也需要的具体的日程安排,以便整体问卷的进行是井然有序。
日程安排中,要包括:
调查问卷从准备到产出报告,需要一个过程,建议与其他设计师或 PD 来一起配搭工作,更高效的完成,一个人去做,总是会有一些盲点,并且会比较大的压力。
如果你在问卷方面是新手,也建议找个有经验的设计师或 PD 来做你顾问,减少一些不必要的坑。
文章来源:优设网 作者:箴盐设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“世界如此精彩,当然不能置身局外”,“愿你向世界交付你的价值”
为什么要写这片文章?
自己入行交互一年多,最近从梁宁老师的《产品思维30讲》和《增长思维30讲》获得了两套思维框架,并从中铭记了两句话:“世界如此精彩,当然不能置身局外”,“愿你向世界交付你的价值”,于是想通过运用这两套思维框架,重新审视各类产品,把自己训练成一个客观的人,并向世界交付我自己的价值。
微信作为一款从2G时代出现的产品,跨越了十一年的时间,成为了如今国民级的应用,甚至正逐渐成为我们的生活方式,却一直保持着简单和连接的理念。就在今年一月份,微信推出了8.0版本,其中添加了很多新奇有趣的功能,站在用户视角上,能看到评价有褒有贬,有人说微信根本不了解用户而且孤傲,有人说微信正在变得臃肿,有人说微信体验不好但是没有替代品不得不用。看了很多介绍微信8.0的文章,发现都只是在介绍微信8.0更新了什么,但是没有看到有人会更深层次地聊微信为什么要这样更新;上周我在听完张小龙的微信十周年演讲后,感触良多,并从中窥探出了微信更新的些许用意。于是想试着从用户体验的角度去分析微信,所以我想把第二个思维框架分析对象确定在了微信身上。
愿读完这篇文章,你能获得我所希望交付的价值~
微信是一款什么软件?
先说结论,微信本质上是一款连接的信息流流量平台。
在很多人人眼中,微信就应该是一款社交工具,希望微信能够做好社交的本职工作就够了,不需要再加上其他杂七杂八的功能;有人抱怨说微信变得越来越臃肿,很多功能其实自己并不用得到,还占用手机的内存,已经丢失原来简单的模样。
但是要知道,你眼中所看到的世界,其实是由各种外部和内部的因素所塑造的。就像几年前有一句特别火的话:你的眼睛里,有你走过的路,看过的风景,读过的书和爱过的人。你能成为你今天的样子,其实是由你的人生经历所决定的。所以微信十年来不断改版,从一款通讯工具变成如今的连接信息流的平台,其实是由微信的基因所决定的。张小龙在2021年1月微信十周年公开课中讲到:“微信10年,如果非要用两个词来描述微信,我想一个是连接,一个是简单。从一开始微信从一开始的连接人,到后来的连接企业,微信支付功能后开始连接现金流,到如今8.0的视频号来连接视频,短视频的信息流,微信基于连接的理念从来没有变过。这也是为什么当年微信能够战胜米聊成为当今最火热的社交工具的原因。
在2014年的时候,微信1.0版本的时候,微信只有400万用户,而雷军米聊有2000万用户,两者的差距从微信3.0推出陌生人社交拉开,从推出微信支付功能开始彻底打败了米聊。是因为米聊是只是在社交,而微信却是在做连接;微信把社交看成一种信息流,从而把更多的信息流整合连接自己的体系内;因为要把更多的信息流整合到平台上,于是微信变得越来越大,占用的内存越来越多。看似有意为之,实则情非得已。另外说一句,雷军貌似是在这次大战之后学会了教训,并把这套战略用在了小米身上,于是能看到你OPPO,ViVO把手机作为核心盈利产品,而小米却只是把手机作为流量连接的入口,继而发展出小米智能家居这一庞大的产业链。
所以你以为微信只是一款社交工具,但其实微信是连接信息流的流量平台。
什么是信息流?字节跳动的张一鸣认为世界是由人流、物流、资金流、信息流组成。比如文字,语音,视频,支付、都是信息流的一个分类。你可以把互联网想象成一条大江大河,无数的企业将大江大河中的水引入自己的支流中,使自己变得强大;所以互联网的的竞争,本质上是流量的竞争,流量指的其实就是信息流。
什么是平台?美团副总裁张川的理解是:平台首先是动态不平衡,你不知道你能在这里遇到谁;第二条,用户彼此之间要产生网络效应;第3条,用户之间永远有彼此的需求,无法握手,需要平台从中撮合。
微信里有的那么多陌生的人,陌生的公众号,你不知道你能在这里遇到谁,你在微信中与熟人,陌生人社交,能够产生巨大的网络效应,催生出了微信支付、公众号这样的庞大商业体系;用户与熟人或陌生人之间、用户与公众号之间、用户与商家之间,永远存在需求,而微信在从中充当了连接的作用。
张小龙说过一段特别牛逼的话:让产品自然生长。微信作为超级巨大的流量平台,真正做到了不打扰用户,让微信的流量自然碰撞、发酵,构建出了如今如此庞大的微信帝国。
微信带给了用户什么样的确定性?
微信始终致力于连接于简单,十年来不曾改变。
连接上面已经说过了,下面来说说简单。微信提供了简单的确定性,每一个功能都切中要害,张小龙说微信最骄傲的是,十年的样子和今天的样子并没有什么改变。通过最简单的方式做到最大程度满足用户的需求,这对产品经理对用户情绪把控要求特别高。分析一个产品一般要从三个角度去分析,首先是从宏观视角看这个产品是附着在什么样的经济体上,竞争对手是谁,也就是常说的看大局,看清楚谁是自己的朋友,谁是自己的敌人。然后是从中观视角去分析产品的服务人群,功能流程,信息结构,并由此得出用户画像、用户体验地图、痛点痒点爽点等用户体验相关的结论。最后是从微观视角,从用户内心的底层情绪出发,去探究产品对于用户内心情绪的影响,由此来进一步分析产品带给用户什么样的确定性。
一般来说,用户体验设计师掌握好中观视角,基本上就能在行业内生存下来。中观视角更多靠的是经验和套路,掌握分析产品的方法和路径,多花时间去实践,假以时日,你就能成为行业内合格的用户体验设计师。但更难的,其实是掌握好宏观视角和微观视角。宏观视角是打大仗的能力,需要你站在足够高的视角去俯瞰整个大局,看清楚产业周期,产业的方向,靠的其实是定战略,和找杠杆,入行不久的体验设计师或产品经理通常没经历过大仗,是很难体会到的,我自己也没经历过,所以只是听梁宁老师介绍,学了一些这方面的思维框架而已,感兴趣的读者可以去了解。但其实梁宁老师更希望我们做到的,是掌握分析微视角的能力。
张小龙就是一个对产品的微观视角特别敏感的人,他能从用户底层细微的情绪变化中分析出用户的需求点。想想微信从通讯工具到熟人社交,再到陌生人社交,再到公众号、微信支付,直到今天的视频号,都是精准地把握了用户最底层的情绪需求的结果。比如,微信的朋友圈从完全开放,到仅设置三天可见,再到三个月或半年可见,直到可直接管理是否看朋友圈,到了微信8.0,甚至要求用户验证好友时就首先确定朋友圈权限,这一连串改变,其实都是源于张小龙对用户在当下社交情绪逐渐发生变化的精准把控能力,这也是为什么都称张小龙是产品经理之神的原因。
微信为什么推出视频号?
微信为什么推出视频号呢?在我看来是为了争夺信息流。这是腾讯继2018年微视在短视频大战战败后发起的第二波战争。
上面说到过,互联网的本质其实是信息流,谁拥有的信息流越多,谁就能获得更大的势能。淘宝靠着电商和支付的信息流,就成为了中国第一的电商公司,字节跳动靠着短视频载体的抖音和长视频载体的西瓜视频以及新闻载体的今日头条在几年间迅速成为了互联网巨无霸级别的存在。
我们可以倒回几年前回顾一下那场大战,战场上有抖音、快手、微视、还有就是一些草莽或腰部的小视频软件。当时快手用户数是高于抖音和微视的,甚至放出不屑于花钱买广告做推广的言论。结果就在2018年春节,抖音8天烧了5亿美元,重金做推广,吸引了大批短视频爱好者和流量;随后快手感觉势头不对,也开始疯狂重金砸广告,做补贴,并成了2020年春晚赞助商。而微视的做法是,大量补贴的同时,借助腾讯的杠杆,直接将入口做在了QQ和微信中,全面禁止非腾讯系短视频链接在微信朋友圈中扩散。结果出乎意料的是,微视和一众其他成为了短视频大战的牺牲品,从此短视频市场二分天下,南抖音北快手的阵容确定下来。与此同时,还有一件事值得关注,就是2019年,三家互联网企业对微信发起了挑战,一个是马桶MT,一个是罗永浩的 聊天宝,最后一个是抖音的多闪,最后是以微信的不理会作为收场。
为什么短视频如此重要?因为它很可能是未来信息流主流的载体。
不知道你有没有感受到,微信公众号没以前那么火了,其实很大的原因是因为我们把看微信公众号文章的时间拿去刷抖音、看短视频了 。在2018年之前,微信公众号是微信信息流非常重要的入口。在PC互联网时代,搜索引擎百度是流量的入口,旗下的百度贴吧,百度知道,百度百科组成了中国最大的中文互联网内容创作社区,使得百度成为了BAT三巨头的头部企业。但是在移动互联网时代,各大应用开始自建搜索引擎,自营内容对百度进行了封锁;微信公众号从中崛起成为了新的流量入口,无数的自媒体创业者通过微信公众号上创作内容,成为了移动互联网时代的信息流入口。但是,随着4G技术带来了更高的网络带宽与传输速率,视频内容开始发展,短视频应运而生。
短视频为什么能够取代文章?
回到底层情绪来看,是因为人们比起文字本能地更能理解简单、直接的图像。文字带给人的反馈是延时的:你得先识别文字本身,理解语义,上下文联想,最后你才能得出一段文字的含义。而短视频是带来即时反馈的,它没有阅读成本,能通过视觉和听觉,就能给用户带来更加深刻和即时的情绪上的变化。其次,短视频的创作门槛比写文章低,张小龙在演讲中说到,许多人其实是不擅长写长文章的,但是你让他用手机拍一段视频,这是一件很容易就能做到的事情。最后是因为当代人的心智提上去了,这时代的人们的观念正在逐渐开放,更加乐于表达自己,短视频当然就能使更多人参与进来,自然就能成为下一阶段主流的信息流载体,微信当然不能置身局外。
所以,到这里,你其实就已经能看清一些微信在做的事情了。微信为什么要开设视频号?就是为了争夺下一阶段信息流入口。为什么当年支付宝要推微信?是为了争夺的信息流。
当前阶段,谁是微信的竞争对手?信息流的上游是人,谁掌握了最大的信息流谁就是竞争对手,目前能看到的是抖音,2018年抖音推出多闪,其实就是为了构建自己信息流平台;在之后,可以预见到抖音和微信在短视频流量争夺上必有一战。
微信能不能赢?
我觉得微信这次能赢,因为人性的弱点推动了互联网的流量,但人性的光明构筑了商业的文明。
互联网商业本质是流量*转化率,字节跳动鼓励人们在抖音、西瓜视频上发视频,采用的是补贴的方式,这会使得视频博主在其平台上发布视频的目的变得利益化,是在变相鼓励视频创作者生产更具强吸引力的题材,取夸张的标题名字来吸引更多用户点击,从而获得更多流量,并通过广告商的投资,带来商业的变现。去年甚至还爆发了直播带货的新蓝海,其实本质上都是帮助视频创作者带来商业利益。色欲作为人类的本能,自然是最能吸引用户的手段,所以你能看到与性相关的视频在抖音,快手等平台占比是最多的。
这种利用人性的弱点(贪婪、色欲、虚荣、窥视)构筑的互联网流量,使得抖音快手在短视频草莽时代逐渐成为了短视频中的头部平台,但是在存量竞争市场上这一机制终究不可持续。相比,我更喜欢微信视频号的做法。
微信选择只做内容承载和传递的载体,这就意味着微信不会去生产内容,也不会去买内容,并不会关注具体的内容到底是什么,而是真正做到让用户自发地去生产和分享内容,让产品自然生长。张小龙说视频号的目标是,希望人人都能够很容易地通过视频化的方式去公开表达内容。这使得内容创作者本身很难带有利益目的。视频号的初衷,就不是让一部分内容创作者获得极高的关注度,成为网红,获得商业变现,而是希望人人都能够像在朋友圈发布图文一样,以视频化的形式去表达自己的内容。微信能这么做,是因为其拥有巨大的信息流,有足够的能力去做这件事。
尽管现在打开视频号,里面同样充斥各种基于人性的弱点所创作的内容,微商、网课、低俗,诱惑等内容遍地,但现在你看到的它的样子,绝不是它本该有的样子。我相信随着微信对视频号的迭代,视频号终会成为微信所目标的那个人人都能表达自己的样子。
为什么张小龙说直播新的表达方式?
张小龙在公开课中讲到:未来直播可能变成一种很多人都在用的、个人表达方式。为什么?因为直播能够营造场景。
什么是场景?场就是时间+空间。景呢?是能够触发情绪的交互。直播比起视频,更能够激发用户内心的情感,能够让主播和听众之间产生更深刻的连接。这种感受其实是视频无法比拟的。就像你在现场看演唱会和看录播体验是完全不一样的,周边的环境会影响用户的情绪。令我很深刻的体验是,今年王者荣耀冬季赛决赛第四局DYG对战南京Hero战队,当时的局面是0:3,如果第四局DYG没有赢就意味着比赛的结束。当时直播中所有人的心都很紧张,结果DYG里的清清用一手关羽力挽狂澜,赢得比赛,在场主持人,和屏幕前的观众都被DYG清清的不服输感动,场面一度到达高潮,我的内心也被深深震撼到了。但是之后看录播,就会发现有人在看外星人似的,发弹幕很冷淡地表示都是基本操作,完全不懂我们在激动什么。这才使我意识到,直播真的比视频更能激发用户的情绪。
现在你打开微信直播,内容质量其实并不好,是因为新流量入口会带来新红利,投机者当然不会放过这个机会。但实际上,微信直播应该和会如今刷礼物求关注,公会云集的直播平台不一样,会呈现出一个更加开放、生活化的样子。
微信为什么要在表情包、状态上的创新?
微信8.0更新了动态表情包,动态,把视频放在名片,音乐播放器优化上等一系列新有趣的小功能。这些功能按照张小龙的说法是人们对情绪的表达更强烈了:他觉得人们喜欢表达更加强烈的表情,他觉得设置状态能够帮助用户找到同类,他觉得音乐播放器不该是一个电唱机放在那里转,而应该给用户更直观的视觉表达。你会发现,张小龙描述需求的方式,是极度自我的表现,他会用心里想的美好的用户故事来解释为什么要加这个功能,而没有根据数据来得出结论。甚至他说想做一个功能,让十几亿人都能在同一张画布上画画,然后看最后画出来的是什么样子。这些一些功能,张小龙就是拉一个一二十人的团队,讨论了一下自己的想法,就这么简单的做了,就这么推出了。
这里我想说说自我与自律。成为高手的路径是一万小时定律,但是,想让一个人持续在一件事情上花费一万个小时是很难的,有两种方法可以实现。一个是保持自律,带着对失败的恐惧,坚持下去;另一个是对这件事保持满足和愉悦感,靠着对做这件事的热爱来度过这一万个小时。自我和自律的人都能成为非常成功的人,你从小受学校的灌输自律的理念其实是为了便于管理。但自我的人,是充满创造力的,对不满意的事物是抱有强烈的情绪的,他们不能容忍不完美的事情,并会去努力改变它。苹果大神乔布斯是一个极度自我的人,他能乐此不疲地对着ppt演练上百次,他不能容忍手机附带个键盘笨重的样子,乔布斯让自己追求卓越的精神成为了苹果的设计理念。梁宁老师说,张小龙是一个极度自我的产品经理,正是由于其对用户在社交需求上极其敏感的感受,才催生出了如今简单并且连接世界的微信,张小龙说自己是被上帝选中的,其实是因为持续做出了正确的决定,而这决定,与其对用户情绪的深刻把控有关。所以腾讯出产品经理,阿里出运营人才。
你吸收谁的营养,你就变成谁。你靠什么满足你,你就会成为它的样子。什么东西持续满足你的东西,什么东西永远让你不爽,这就是你的命运。
总结
这次分析微信,我没有严格根据梁宁老师给的中观思维框架来分析(痛点痒点爽点、用户画像、用户故事、用户体验地图、服务蓝图等),而是从微观情绪和宏观大局上分析了微信带给人的确定感,微信视频号的意义所在,聊了些关于自我与自律的事情。因为我觉得微信成为今天这个样子,服务着如此庞大的用户量,它已经成为了我们生活中不可或缺的一部分了,人生百态,微信包容了无数种用户画像,在其上也书写着无数的感动人心的故事,我觉得这时再去聊中观套路其实已经没有什么意义了。微信从1.0,跨越2G到5G的技术革新,从一个简单的通讯工具,不忘简单和连接的理念,十年时间迭代成为了我们离不开的一种生活方式,这放在人身上该是一个多么励志的事情啊!
最后我想交付给你一句,也是梁宁老师交付给我的,一直触动鼓励我坚持下去的话:
今天你在什么样的点位上其实并不重要,重要的是在未来,你会以哪种方式,持续迭代。
文章来源:站酷 作者:努力的橙子
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计的最终目标都是驱动业务增长,商业价值转化。那用户体验地图是如何赋能的?
在日常的工作中,或多或少都听过用户体验地图。在一些大公司,这部分通常是由用研部门来负责,对于一些配置有限的公司而言,则是由产品、UI设计(全链路设计)等职位来担任的,一些UI/UE设计也会参与制作过程中。你对它的理解有多深?在工作中,有使用过它吗?
有些人会觉得画图就行了,搞那么多干什么,又不是我的事。刨根问底的想想,设计到底是为什么服务?你做图的意义是什么?商业?艺术?最终目标都是驱动业务增长,商业价值转化。设计在组织架构里面本质是以用户为中心、帮业务去解决问题,而解决问题能力来源于对用户同理心洞察、对业务目标的理解。而说到用户体验地图则对于0-1阶段的产品的可靠度是很低的,因为没有数据的支撑,一切都是虚拟的。对于1—∞阶段的产品,可以更好的帮我们找到用户的痛点、爽点,触发创意和发掘新的需求。也就是通过我们的专业知识、见解和洞察搞清楚用户在使用产品这段旅途中坑在哪里、怎么填才能让用户走的更顺。帮助用户更容易获取产品价值,帮助项目组获得成功。
用户体验地图是用视觉化的方式表示用户(第一人称视角)的图,以叙述故事的方式来描述用户与产品、服务、系统交互时的体验和关系,以此来帮助理解用户需求和寻找用户痛点。
可以先看一张图了解一下用户体验地图
简单点说用户体验地图在互联网产品设计中的主要应用是记录用户从使用产品到离开产品的全部过程中的情绪体验,从中洞察到机会点,帮助设计建立更好的用户体验。
用户体验地图包含两种强大的工具—讲故事(叙述事情)+可视化
这两大方法是用户体验地图必不可少的方面。以令人记忆深刻、简洁明了的方式传达信息。创建一个完整的体验视图,将不同的数据点聚集在一起并可视化,促进相关参与人的协作、对话和挖掘新观等。
第一个观点:故事比数据更重要。重要的不是零散的收集数据,拿数据证明自己的对错,而是建立一个有代表性的故事。例如,两个人相亲,最简单的收集收据的方式就是问:“你多大了?有房有车吗?多少存款?”而询问的数据只能代表这个人,你能根据这个数据做决策吗?他背后的故事是什么?他经历了什么才会变成现在这样?直接拿数据说事是很难有说服力的,每个人对于数据的解读都是不一样的,更多的是要关注其背后的故事。
第二个观点:所以一个好产品,是从一个好故事开始。
用户体验地图全局可以帮助大家理解用户,理解用户了解产品,使用产品的整个路径和感受,从而帮助产品决策和设计决策。
看了上图,那体验地图的价值就显而易见了:
在一眼地图中可以选择和定位用户的体验点,触发更多的创意点和挖掘更多的新观点。
例子—公司研发一个高级的木质挂衣钩,用户视角就是买回来—装上去——直接使用。继续挖掘其中的点,目前的挂衣钩需要打孔才能装,这里就衍生出两条线:第一种方案卖已经打好孔的木质挂衣钩,可以直接安装,操作起来方便;第二种方案把安装工具和木质挂衣钩一起卖,用户安装成本会比较大。
在体验地图中,需要多人参与,能够让所有的人都梳理一遍流程,促进跨部门协作、沟通与思考。能把所有的人都拉到同一频道。
设计师在进入一家新公司后,应赶紧熟悉公司业务,在后期的讨论,与产品是同频的,这样参与感会增加很多,也会显得更专业。
用户体验地图能帮助团队在梳理的过程中找到重新设计与改进的节点,照顾到用户在其中的情感需求,精准锁定产品引发强烈情绪反应的时刻,也就是“尖叫”时刻。
回到上面的例子,如果你卖的挂衣钩已经打好孔,直接安装就可,不用费过多精力,那就是用户尖叫的时刻,惊喜的时刻,如果使用了另一个方案,就会考虑到这个东西买的人会不会用安装工具,会不会浪费过多精力,以至于该挂衣钩有可能被拉入黑名单。
用户体验地图,可以让产品在需求探索的过程中,能够更全面、更全局的去定位问题、看待问题,并且从中找出潜在的机会点,可以促进让用户在使用产品时,爽点更爽,解决痛点问题。
那整体总结下来就是:
记录 将模糊的需求拆解为各要素,文字+图形表达出来;
评估 当前产品和服务的状态以及预测未来可能出现的情况;
发现 体验过程中的痛点,寻找创新机会;
提炼 帮助团队更好的交流和讨论、作出更好的决策和设计方案;
注:为了清晰的介绍,这里会yy一个电影票的App。
常见的调研方式:用户访谈、查看用户投诉记录、询问客服、查看用户在社交媒体上的评价、调研相关竞品,定性定量调研
· 举例说明
比如app store上用户的投诉评价,可以针对性进行收集与分析,理性分析,了解用户心声,在评论区有时能找到产品的最痛点。
比如上面【用户2】和【用户3】提出的评价—这两类总结就属于一类问题:关于用户定位准确性的问题。
用户访谈中可以面对面、也可以电话沟通,这样尽可能获得最直接、最准确的资料。
根据产品的主要目标进行用户分类,为每个用户创建用户模型(需求、期望、痛点),每个角色将对应不同的用户体验地图。
罗列出用户在体验产品过程中的关键节点以及对应的用户感受。同时通过头脑风暴,挖掘新的关键节点。在每个阶段有各个用户目标,以yy的电影票为例, 主要分为四个阶段【线上—购票前,线下—观影前,观影中,观影后】在这四个大的阶段里面 有细分一些节点,你怎么去具体操作,选择app——找电影票——购票——选座——取票、检票——观影——观影后的动作。
根据每个节点就可以知道用户在各个阶段下的目标。
这个短时间内挖掘更多新的关键节点,同时使关键节点种类更加丰富
已经列出了关键节点,那用户在整个节点中的一连串行为,是不是断层的?是不是可闭环的?在整个过程中,又可以挖掘新的优化点,让APP更充盈、更丰富。
整个用户行为:从一开始的选择该APP,对比各APP之间的差异,到app内具体怎么买自己想看的电影票,再到线下取票、检票、观影,再到观影结束后,写影评。
对关键节点进行分类,对关键节点进行筛选,移除掉重复、没有价值的内容。例如在整个购票过程中,购票支付就是一个关键性动作。
对于之前总结归纳的关键节点的行为,使用场景有哪些?用户产生的“触点”的环境有哪些?(例如网站、手机客户端)
用以描述用户在整个体验过程中的情感变化。在各个节点下,用户的想法是什么,他的情绪曲线是怎么变化的。量化描述各个阶段里用户的体验值。把【问题】和【惊喜点】放到对应的每个行为节点上。并区分颜色。
比如在买票的过程中,邀约朋友一起去观影,把选中电影的链接分享给朋友,打开链接,竟然跳转不了APP,情绪是非常糟糕。
分析全部过程后,总结痛点,并从中找到机会点。
绘制完成≠项目结束,报告产出后,要积极与项目参与者同步,对调研问题快速脑暴出解决方案。
对于一次性产出较多的问题点,划分优先级,并按计划分布落地。
良性用户故事地图像一个捕鱼的过程,可以发现新的场景和机会点,可以帮助我们站在全流程的角度,挖掘使用场景下更多的体验优化点。体验地图可以使部门或小组在需要解决的过程中具有不同阶段或关键接触点的对齐方式更加清晰。
体验地图不是必须的,但是做好一个好产品必要的步骤。它的一切都与用户有关,在每个阶段都可以参与进来。它可以让我们以用户的角度来审视体验过程、可以让大家都参与进来,促进跨部门跨角色无边界思考合作,可以协助团队锁定“尖叫“时刻,可以更好全局的去定位痛点、解决痛点、找到机会点。
文章来源:站酷 作者:玛丽的设计笔记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为产品设计者,经常遇到一个备受灵魂拷问的问题:怎么衡量我们设计的产品,用户体验是过关的?
今年,我们在内部中后台产品进行尝试,发现「易用度」可以作为合适的度量指标,并成功推广到 35 个产品,帮助PD、设计师、工程师等产品设计者去衡量产品体验现状,发现改进机会点。实践证明,易用度,相比满意度、尖叫度、NPS,更适合技术类产品的体验度量。结合用户行为数据,可以为用户画像、改进方向、运营策略提供更准确的决策依据。
在掌握了这些信息之后,我们在内部的技术类产品上,进行了一轮新的探索。经过半年时间的试点,结合业界的解决方案、内部产品的业务特性,我们最终选择主观衡量法,并使用「易用度」这个衡量指标。
为什么易用度相比其他指标更适合技术类产品呢?主要有 3 个原因:
结合行为数据,易用度可以进行描述、分类。使用现状描述找出低分人群的高频问题,使用对比差异找到多角色的不同诉求,分析影响关系找到影响易用度的主要因素,结合用户行为数据进行聚类找到典型人群。
文章来源:站酷 作者:Ant_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
设计的思考不仅要注重表象层面,也需要围绕信息传达这一设计的本质功能,以充满自省的精神深化和反思自己的设计意识,即做到“好看、好用”。在设计过程中,要站在公司的利益上,懂用户所想,在每一个关键点都要带给用户意想不到的惊喜,这些往往都是通过细节体现出来的。
2021 | 第01篇分享目录(001~015)
001.「夸克浏览器」首个页面-我的地盘我做主
002.「百度」为什么把返回按钮放在了左下角?
003.「优酷」弹幕中毫不违和感的广告推送
004.「QQ」发送图片-便捷的交互路径
005.「美团」减少一步操作、提升一级体验
006.「京东」搜索框-触发用户转化动机的占位符
007.「腾讯视频」付费片-试看6分钟的激进小心思
008.「高德地图」模拟现实事物运行规律的微交互
009.「网易云音乐」定制您的专属首页
010.「夸克浏览器」关键词-提前预知用户的需求
011.「快手」刚刚看多-贴心的用户提醒
012.「腾讯视频」VIP栏目-免费营销策略转化用户
013.「支付宝」城市天气-不仅仅是天气预报
014.「躺平」趣味化的下拉刷新样式
015.「滴滴打车」添加途经点-解决位置不统一的情况
001.「夸克浏览器」首个页面-我的地盘我做主
产品体验:
进入夸克浏览器的首个页面,除此必要的元素之外,看到的是一片纯净之美。长按搜索框下方的空白区域,点击“+”号,可根据用户自己的喜好从弹窗中将想要的站点入口添加到搜索页,便于快捷访问。
设计思考:
UC浏览器可能不是每个移动端用户都知道,但绝对是一方霸主,夸克与UC本是一家。昨天在网上看到一个帖子说“自从用了夸克之后就把别的浏览器全部删掉了,没有天气挂件、没有新闻推送、没有购物频道、没有游戏插件、没有精准广告、就是最原始的上网工具,仿佛在这看到了当年的塞班时代一心一意做用户体验的影子”。迄今为止,没有任何一个应用可以满足所有用户的需求,UC浏览器也是如此,夸克可以将那些视UC为粪土的用户给揽过来,表面上看似抢夺用户,实则是风险对冲,当一个出了问题不是还有另一个么?用户不管是在夸克还是UC,其实都在自家,一个独善其身,一个兼济天下。
用过手机浏览器的人都知道,在资讯爆炸的今天,夸克的画面干净得令人难以置信。在干净的同时,并非是缺少这些站点模块,而是放在了暗处,用户可以根据自己的喜好将站点咨询模块调用出来,自定义空白区域,寓意用户“自己的地盘自己做主”。众所周知,大多数浏览器都有站点推荐的功能,不过该功能都是给相应网站打广告的,内容沉杂,尤其是一些强制性的内容让用户产生了逆反心理,而夸克精选中的网站,则是一些价值很高的优秀站点,并非广告业务,这点可以从致用户的一封信和网站类型得出。这也是夸克被誉为最纯净浏览器的原因之一,不管是APP内容还是用户体验、易用性方面都能提升用户的忠诚度,深得广大用户喜爱。
002.「百度」为什么把返回按按钮放在了左下角?
产品体验:
进入百度APP,页面中80%以上的返回操作入口都放置在左下角,单手操作手机的用户触手可及。
设计思考:
Android智能设备的返回入口其实一直都在屏幕下方,只不过是根据品牌的不同,左右位置不同而已。根据后来大屏手机的普及,为了节约空间资源,使屏幕最大化的被使用,把原先硬件上的部分操作入口给隐藏了,但一直都存在。设计师都知道,iOS与Android的设计规范存在着差异化,比如返回入口就一直在左上角,虽然也有右滑返回的交互手势,但毕竟是隐藏的,而且对于部分页面的左右滑动,只能对tab导航起到作用,基于目前的趋势,手机的屏幕越来越大,单手操作的灵活性就成了难点。
百度APP的大部分页面则是把返回按钮直接从左上角搬到了左下角,被较为激进的用户称为反人类的设计,其实并非如此。大屏幕尺寸已经是趋势,屏幕大意味着内容可以更大限度地得到展示,将返回按钮放在左下角能有效的解决的用户单手操作大屏幕手机操作的难点,更易于操作,提升便捷性。更有效的防止用户因操作困难而导致手机滑落(碎屏),增加安全系数。
003.「优酷」弹幕中毫不违和感的广告推送
产品体验:
在优酷观看视频打开弹幕后,每隔几分钟,系统会推送一条广告穿插在弹幕的内容中,点击可进入对应的页面。
设计思考:
在互联网产品中,花样广告的出场方式屡见不鲜,比如在看视频、看书之前/过程中,总是被突入起来的的广告打断,用户虽然很烦但别无选择,毕竟没有一款真正的既免费又免广告还很牛B的产品无偿提供给用户使用,即便用户觉得自己没有认真看过这些广告,但是只要它们在用户面前完成了播放,哪怕只是听到了,那就完成了品牌意识 的输出这个过程,可能会无形中就知道了这个品牌的存在和定位,在未来的某个场景中,用户会默许和遵从这个品牌的输出方式,乃至消费。广告作为企业盈利的一种方式,不可避免,只会在尽可能减少用户反感或抗拒的情况下自然出现。
优酷APP用了一种较为新奇的方式植入广告,基于很多用户在看视频时都有开弹幕的习惯,直接将广告穿插在了弹幕区域,每间隔几分钟就会推送一条,跟随弹幕一起流动,毫无违和感。虽然广告植入会引起用户的反感,但以弹幕的方式出现,并未占用额外空间及打扰用户观看视频,很大程度上降低了对用户的打扰及观看视频的沉浸体验,增加了用户对广告的接受程度,如果对某个广告感兴趣,点击后面的入口即可直接跳转对应的内容页面。
004.「QQ」发送图片-便捷的交互路径
产品体验:
在QQ聊天对话框,点击工具栏的图片入口调出相册,按住想要发送的图片并往上拖动,松手即可发送。
设计思考:
我们下载到手机的APP,大部分在首次打开时都会弹出一系列的系统权限,比如相册、相机、位置、网络...等,社交类型的更是不必多说,基于应用本身的性质,相册、相机及通讯录类型的权限都是必备开启状态,以便于在使用过程中的图片、视频交流。
QQ开启相册权限后在用户体验上更是举一反三,用户在聊天过程中如果有使用图片的需求,点击后,系统会将手机最近保存的50张图片,按照时间的先后顺序以完整缩略图的方式直接显示在聊天界面的工具栏下方,用户只需按住想要选择的图片并往上拖动,松手即可发送,非常方便,免去了常规的触发跳转页面调取相册的多步骤操作,且有效降低聊天过程中因页面跳转带来的沉浸式的视觉思路阻断,优化了操作路径,提升产品的易用性。
005.「美团」减少一步操作、提升一级体验
产品体验:
在美团订单列表页面,单击其中一个订单从右侧向最左侧滑动,即可出现弹出提示,点击删除完成操作。
设计思考:
删除操作,我们一点也陌生,大部分出现在列表类型的页面。早期智能设备的删除入口基本都是通过右上角编辑或单个内容区域明显的删除图标入口以完成对应的删除需求。后来,也不乏一些应用为了节省页面空间,去掉了明面上的删除入口,通过长按交互操作来完成删除流程,但时至今日,并不广为人知。
美团APP的订单列表,只需将单个内容从右滑至最左侧,从自动出现的弹窗中完成删除操作。其实这种交互方式在目前看来并不新鲜,基本普及了,但关注细节的用户会发现,大部分APP内容的删除,都是在左滑之后调出删除入口,需点击之后才弹出确认框,继而完成删除。美团APP则是在用户有明确删除需求的情况,从右至左大区域滑动并自动触发删除入口,省去点击触发弹窗的操作步骤,正所谓移动界面、体验至上,减少一步操作,就能提升一级体验。
(除了需要对用户的删除操作做出挽留、有营销的多功能隐藏入口外,如无明确需求,建议省略左滑后需要再次点击触发弹窗的这一步操作)
006.「京东」搜索框-触发用户转化动机的占位符
产品体验:
京东搜索框的占位符,会根据用户曾经搜索或查看过的商品关键词进行提示,每2秒钟切换一次,以便提醒用户再次查找之前可能想购买的的商品。
设计思考:
占位符就是在输入框中占住一个固定的位置,然后用户可以根据文案描述或提示语来明确每个表单输入框应当填什么内容,并且能够促进表单输入完成和提高转化率所存在的一个元素。最为常见的就是“请输入xxx”一段提示性质的文案,但如果把占位符的作用仅限于此,那就太浪费资源了。
京东APP搜索框的占位符开启了自动搜索建议机制,不仅展示了平台主推、热门等部分商品的关键词,还通过动态预测用户查询方向,曾经搜索或浏览过的商品关键词会替代占位符给予用户提示。比如用户搜索或购买过狗粮,后续进入APP,系统就以占位符的方式推荐跟小狗相关的商品,比如狗窝、驱虫药、罐头等,虽然不能直接进行搜索,但足以唤醒无目标用户的购物记忆,帮助用户明确购物需求,以便用于迅速作出决策、执行操作,起到提升下单转化的推动作用。
007.「腾讯视频」付费片-试看6分钟的激进小心思
产品体验:
观看腾讯视频付费影片,可免费试看6分钟,时间到了会自动暂停并弹出付费渠道弹窗,付费/放弃观看二选一。
设计思考:
广告和影片付费对视频类型的应用来说,是两个非常重要的盈利渠道。平台除了日常的维护费用外,且不说影片的质量怎么样,单是购买版权就是很大一笔费用,所以收费也是合情合理,用户通常可以通过购买单片或开通平台VIP观看付费影片。使用过腾讯视频的用户都知道,付费影片可以免费试看6分钟,那么为什么不是直接放在付费区域,只对付费用户开放呢?
腾讯视频的试看其实相当于打开用户的潘多拉魔盒,大部分影片6分钟基本已初入剧情,能吊足胃口,激发用户看下去的兴趣,如果用户不喜欢,也有自己选择的权利。通过一小段的试看把付费片的部分价值明确告知用户,用细节不断触达用户心智,达到吸引用户、引导用户转化目的。另外,很多用户都倾向于回报别人的好意,投之以木桃,报之以琼瑶,通过免费时间段的观看,碍于面子心理,也有可能触发用户的付费动机(这个不难理解,比如我们路过某个熟人的水果摊,每次都会叫我们去尝一下,久而久之,即使没有购买需求,碍于面子,多少也会买一点),从而形成转化,为平台带来收益。
008.「高德地图」模拟现实事物运行规律的微交互
产品体验:
高德地图规划路线后,选择出行方式时,用模拟现实事务的微动效图标+文案提示对应的出行方式,直观且趣味的表现方式更有代入感。
设计思考:
我们经常在网上看到这样的问题“高德地图与百度地图到底哪个好用”,准确的说是各有千秋,高德地图用户略多于百度地图,若论起用户使用体验,两家的应用一点都不含糊。在导航软件作为用户出行必备软件之一的今天,不仅仅是认路,更是用户在外吃、喝、玩、乐的一款综合体,其用户体验一直都是企业研究的重点。
使用高德地图选择出行时,出行方式图标以模拟现实事物的运行规律, 利用现有认知,帮助用户轻松掌握界面的使用方式,缩短对出行方式的理解时间, 的降低用户的学习成本。同时图标动效的展现方式,能增加趣味性、以及用户对于界面功能直接操纵的感知,降低操作难度,用情感化方式的表现,提升用户粘性。
009.「网易云音乐」定制您的专属首页
产品体验:
在网易云音乐首页,将页面向上滑至底部,进入自定义排序功能,即可定制用户自己喜欢的专属首页样式以及功能模块的先后顺序。
设计思考:
很多设计团队都深知用户体验至上的道理,但一个应用界面的交互及展现样式不管以何种方式呈现,都不可能满足所有用户的需求,只能在不断追求细节的基础上来满足更多用户。首页自定义在一些部分较为个性化的APP上已经不足为奇了,即根据用户自身的需求,去修改系统、官方提供的页面内容及先后顺序。不过在众多APP的首页自定义功能的认知里,都是对页面的原有功能进行增减及自定义排序。
在网易云音乐APP版本的首页底部也增加了自定义排序功能入口,不同于其他APP页面自定义的是除了能对现有功能进行增减及排序外,还特别定制了三种不同设计样式的呈现以供用户选择,相当于用户随时都可以对首页进行改版。不用的用户都有不同的视觉浏览及操作喜好,比如大卡片、九宫格、操作热区的范围等,网易云音乐通过提供不同的首页样式可以满足更多用户的需求,提供更愉快的使用体验,增强用户的信任感,即多满足一个用户就可能多留住一群用户,降低了用户流失概率。
010.「夸克浏览器」关键词-提前预知用户的需求
产品体验:
使用夸克浏览器搜索相关内容时,系统会自动检索关键词,并将关键词对应的常见内容结果以卡片样式展示给用户,随着关键词的变化,匹配的内容也随之改变。
设计思考:
说到浏览器的作用,想必大家脑海里的第一印象就是搜索,将自己不明白的东西通过搜索引擎从互联网大数据中自动匹配出海量的相关数据链接,提供的信息量非常庞大,包含各色各样的新闻、问答、文章,可以说一应俱全,涵盖一切,其各种浏览器的搜索操作方式大同小异,基本都是通过输入关键词,然后点击搜索出结果。
夸克浏览器在用户搜索的操作(点击搜索之前)过程中,增加了一个细节,即“行为预判”,通过用户输入的关键词,提前预知用户可能想要查找的内容,以简介的方式呈现,给用户提供一个快捷通道,加深用户对此关键词条的认知,快速判断出是否满足自己的需求。系统所匹配的卡片式内容简介是通过数据库长时间的数据分析,提取其中较为共性、常见的内容来反映用户可能出现的兴趣与需求,并合理挖掘使用,通过引导便于用户快速识别并点击,缩短输入时间,还能解决用户对关键词组织不清晰、逻辑不清的用户给与指导,提升产品的易用性。
011.「快手」刚刚看过-贴心的用户提醒
产品体验:
从快手“精选”栏目进入用户主页,在作品列表将所浏览过的视频上标记刚刚看过,避免重复点击观看。
设计思考:
身处移动互联网浪潮之中,我们不难发现,如今的短视频把用户的卷入和参与推向了一个新高度,尤其是生活在大城市高度压力下的年轻用户群。学累了,就想刷个小视频放松下,真以为然后就能集中精力再去学习?其实都是在扯淡,总觉得接下来的某个视频会有种奇异的魔力,一刷就停不下来,就好比在无边无际的海洋中,越喝越渴,别说自身难以碎片化学习,就连老人和小孩都带进来了。抖音和快手作为目前短视频的代表,都有着庞大的用户群,在用户需求基本都能满足的条件下,其战略方向准确的基础上,谁的用户体验最好,谁就是最后的赢家。
快手APP虽然被后来者抖音赶超,但在用户体验上从未含糊过。细心的用户可能会发现,在用户主页的作品列表中,刚刚看过的短视频做作了提醒标记,告知用户少走冤路,避开已看过的短视频,可以避免用户因重复点击观看而浪费时间,且在非WiFi环境下,还能节约用户的数据流量,这个提示算是很贴心了。
012.「腾讯视频」VIP栏目-免费营销策略转化用户
产品体验:
腾讯视频VIP栏目中的电视剧,基本都可以免费看前面的几集,然后根据剧情的发展程度,从免费变成付费,未完结的电视剧还可以通过二次付费进行超前点播。
设计思考:
免费的东西人人都喜欢,古今中外大都如此,免费策略营销也因此有强大的生命力。但互联网应用如若完全免费,不具商业性,可能连基本的日常生活都难以维持。大家都知道,会员付费是影视类应用盈利的一大来源,但用户对付费造成自己财产损失有种天然的抗拒,通常电视剧都提供几集免费观看,然后才硬性要求开通VIP。
视频类应用大都如此,这里以腾讯视频为例。不难发现,付费区不同的电视剧,其免费观看的集数不同,这并不是随意设定,而是根据剧情的发展程度,在某个“高潮”即将迭起的那一集开始收费,通过免费阶段的观看,对用户产生一定的吸引,勾起想要看下去的欲望,从而出现付费动机以促成用户开通VIP。这其中还有一部分互惠原则存在,即给用户免费一部分之后,降低用户付费的心理负担,提高对费用的接受程度,来而不往非礼也。针对未完结的电视剧,如果热度较高,在用户的观看欲望高涨之际抓住机会点,通过二次付费提供超前点播,用户也随之接受。不管是强制VIP还是二次付费点播,其都需要在合适的时间、合适的地点予以合理的出现,才有利于的转化用户。
013.「支付宝」城市天气-不仅仅是天气预报
产品体验:
支付宝首页左上角城市下方提供了天气状况,进入切换地区页面,会展示当前城市最近几天的天气情况。
设计思考:
随着支付功能的普及,几乎也成了每天都会打开的引用,它集合了我们的衣食住行,以前出门不能忘了带钱包,而现在只需要一部手机就能搞定一切。虽然功能众多,但对大部分用户来说,最主要还是归结于支付功能,除了部分线上支付外,就是线下支付了,顾名思义,线下即涉及用户的出行。
支付宝首页城市下方的天气预报,为用户提供了贴心的提醒,便于有出行需求的用户根据天气状况的程度决定是否必须出行或准备出行的必备物品。同时支付宝集合人们的生活服务,即使用户放弃出行,部分事情也可以通过支付宝线上解决,比如外卖、购物等。
014.「躺平」趣味化的下拉刷新样式
产品体验:
躺平APP在页面下拉刷新时,会出现一个倒挂俯冲的“小人儿”动效结合情感化设计,趣味且引人注目。
设计思考:
下拉刷新是APP不可缺少的功能,十分常见,主要从品牌、功能、惊喜、运营、反馈五个维度结合情感化设计。在页面下拉刷新的时候,整个页面也会跟着下移,待页面数据加载完成,页面会恢复到初始状态,在这中间就存在一个时间差,一个好的下拉刷新样式,能让用户通过时间差享受到趣味化的视觉体验及减少等待过程中的焦虑感。
躺平APP下拉刷新使用了品牌IP插图,从外观视觉上是给用户打造品牌印象,倒挂俯冲的“小人儿”动效结合情感化设计,趣味化的用户体验,能在产品特性上带给用户惊喜,勾起回忆,通过视觉跟用户进行情感互动。
015.「滴滴打车」添加途经点-解决位置不统一的情况
产品体验:
使用滴滴出行叫车,用户在行程前输入目的地时,点击右侧“+”符号添加最多不超过三个途经点。司机将按照乘客预先设定多个“途经点”,把多个乘客送达预定位置,每个途经点的停留时间不超过3分钟。
设计思考:
打车模式从之前的线下出租车转战到线上,诞生的了很多叫车平台,其用的最多、知名度最高的当属滴滴出行,线上叫车服务给我们的出行带来的极大的便利。不知道大家有没有碰到过这种情况,几个人一起叫车但下车点不同,等到需要时可能会跟司机发生不必要的纠纷或不愉快的出行。多个人的上车点不同,但终点一样,也会被迫每人都要叫车,因此需要付出更多的金钱成本。
滴滴出行APP的添加途经点功能,完美的解决的多个用户出行的这种烦恼。途经点旨在满足多人共同乘车、个人多点出行等场景下多目的地经停的需求,减少口头沟通带来的误解与不便。途经点可以为乘客停车3分钟,不用额外收费,如乘客需要在某个地点长时等待,则需与司机沟通达成一致即可,随着此功能的上线,滴滴出行为用户提供了更为便捷的打车体验。
文章来源:站酷 作者:大漠飞鹰CYSJ
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
完美,不是因为没有什么可以增加,而是没有什么可以减少。
创建美观、可用和的 UI 界面需要花费时间进行设计细节的打磨,本文从视觉和情感化设计两个方面来说说如何提升 UI 设计的高级感。
在互联网产品日趋成熟的今天,你会发现所有的 App 越来越像,似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。一个 App 设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的 UI 设计。本节总结了 12 个简单直观的提升设计感的小细节,一起来学习。
在对 UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。如果可以的话,你甚至可以采用两到三种颜色:
类似的,在 UI 设计的时候,通常两种不同的字重足以营造出优秀的层次感:
大多数的文本采用正常的字重(400 到 500,具体取决于字体)
对于需要强调的文字采用较重的字重(600 到 700,具体取决于字体)
△ 主标题字重为600,其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于 400,因为这一部分字体本身尺寸已经较小,低于 400 会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。
但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:
一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。
△ 左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相的颜色
其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃。通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。
选择一种基础色,再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。
阴影是 UI 设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净,增加了画面的精致。如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。
阴影不一定是黑色的,还有一种扩散阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。在 UI 设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。
合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个 App 的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。通常,大多数 App 都是使用 iOS 规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了。要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。
3D 立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
Tab 是 App 设计中最常见的控件之一,它源自 Material Design 的设计规范。现在很多 iOS 产品当中也开始使用这种导航栏样式来进行设计,而原本属于 iOS 规范当中的分段选择器变得不那么常见了。
在视觉表现形式上,Tab 和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。例如虾米音乐的 Tab 选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的 Tab 就被创造出来了。
我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为 Tab 选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到 Tab 的设计上,既让界面视觉,又进一步强化了用户对品牌形象的认知。
在 UI 设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:
使用阴影
阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力,让内容更聚焦。
使用不同的背景色来区分
通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是 UI 设计中的常用手法。
在 App 中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观。这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。
选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。虽然默认字体可以满足大多数 App 的设计需求。但会出现一个问题就是,系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微。例如在运动类 App 中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。
大多数 App 都支持三方登陆,他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。一个设计精致的 App 不应漏过任何的细节,我们可以以自家 App 的图标风格为依据,对第三方图标进行优化设计。
App 中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式,为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。
图片的质量影响着整个 App 的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想。而低品质的图片会瞬间拉低 App 的质感。在 App 设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用。即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。
现在的 UI 界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。
心理学认为,情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时,使他产生情感的变化,那么产品便不再冷冰冰,他透过眼前的东西,看到的是设计师为了他的使用体验,对每一个魔鬼细节的用心琢磨,人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈,有时候仅仅一句文案、一幅插图、一个动画就能打动人心,使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面,这些简单而美好的设计细节充满了积极情绪,它是满足产品的功能性和易用性之后,追求更高层次的目标。
1. 提示性文字
语言是情感化设计最直接的利器,拟人化的对白相比冰冷的话语更能获得用户的好感,赋予产品的新的生命力。例如 App 那些 push 推送通知,因为用户每天收到的 PUSH 实在是太多了,早已心如止水!这个时候,你就需要一条成本低、效率高的 PUSH 文案,去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣,让人看到会心一笑。
2. 下拉刷新
下拉刷新是用户在 App 使用中经常进行的操作,常见的下拉刷新设计是图标加文字的形式,这种设计简单、直观,但毫无设计感,不能引发用户任何的情绪。
下拉刷新是一种临时状态,丰富它的设计细节不会造成与产品界面的格格不入,相反,一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如 uc 头条在下拉刷新时会蹦出一只奔跑的小鹿,暗示正在快马加鞭的加载新内容,小鹿形象延续了品牌 logo。作为资讯类产品,内容更新速度至关重要,奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感,瞬间就让下拉刷新变得生动有趣。
3. 头像设计
个人中心页与用户信息密切相关,用户的虚拟形象在这里得以展现,常见的设计是一个用户头像加登陆文字的形式,这种默认的头像设计无法得到用户的认同感。
现在很多的产品已经放弃了死板的默认头像,给用户更多的选择。赋予产品一些人格魅力,可以让产品富有生命力,消除人机界面的冰冷交互,帮助用户和产品建立友好的联系。例如美团外卖和躺平,它们各自的身份都代表了产品的气质和用户的属性,让用户产生一种身份的认同感。
4. 缺省页化解负面情绪
通常状态是,当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式,这种简陋的设计会给用户心理造成很大的落差,陷入负面情绪中。情感化设计在此时就可发挥巨大的作用,它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大,根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景,让用户会心一笑,使产品充满了趣味性。
5. 标签栏微动效
情感化设计变得越来越丰富,图标设计上升至可以展示动画效果。通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。精心设计的动态效果,能够缓解用户等待时焦躁的心情,从心理上缩短用户等待时长,让品牌更加深入人心。
6. 模拟用户行为
如果一个产品可以模拟用户的行为,将用户代入真实的情境中,用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化,播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。
情感化设计可以拉近用户与产品之间的距离,在更深的层面体现出对人性的关怀,为人们带去情感上的愉悦和感动。洞悉用户的行为,换位思考去满足用户的需求,情感交流就产生了。例如当你截屏了一张图片,打开微信对话框时就会自动显示这张图片,提前预知了你发截图的需求。
再例如很多观众都习惯了在电影结尾等彩蛋的习惯,因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时,你会发现影片详情页会有彩蛋提醒,告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息,就不必再为了不确定的彩蛋期待浪费时间啦。
7. 有趣的细节设计
俗话说:有趣的灵魂万里挑一,可见有趣是可以引发交流进而让人们产生积极的情绪。 在 UI 设计中,有些有趣的设计是隐形的,需要用户自己去发现,当用户找到这颗彩蛋时,就会获得一份喜悦和乐趣,增强用户对产品的探知欲。例如在电脑端打开 B 站的鬼畜区长按这个返回图标 10 秒左右,你会打开鬼畜区的新世界(⊙o⊙)(友情提示:记得戴上耳机或调小音量)其实长按「返回顶部」10秒后网页下方会出现一条黑框提示「尝试输入字母,发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕!
有些有趣的设计又是显性的,目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员,不仅可以尊享丰富的影视资源,还能让自己的 ID 在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕,让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性,一方面也丰富了弹幕区的多样化,可谓一举两得了。
总的来说:UI 设计的“高级感”意味着在视觉层面要从细微之处着手,创造出精致富有设计感的画面;另一方面要从情感化设计出发,使用户与产品产生情感上的共鸣,获得更高层次的使用体验。
好的学习方式就是把日常积累的知识点汇总并讲出来才能真正为自己所有,新的一年愿每位设计师都能继续保持对设计&生活的激情和热爱。希望这篇文章对你有所帮助。
文章来源:优设网 作者:印迹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com