1.Orb animation WIP

设计师：Aleksey Tsvetkov

亮点：神秘的烟雾特效

这一款设计利用了加载动画中惯用的旋转圆环，再加上烟雾特效，让整个loading动画神秘而吸睛。而且，黑白的色彩搭配，更是强化了烟雾的效果，让用户不知不觉被动画而吸引，从而忘却等待的时间。所以，用户体验也是极佳的。

因此，在你的Web或app加载动画设计中，也可添加类似的烟雾效果，让简单常见的圆环，柱状或条形动画，也能脱颖而出。

2.Loading Micro Animation

设计师：Nick Buturishvili

亮点：结合网页产品特色

作为一款专为酒类网站设计的加载动画，设计师结合产品特色，将其酒类产品制作流程以动画的形式展示出来，减缓用户可能产生的负面情绪的同时，又能让用户更加生动直观地了解公司或产品。

所以，在你的动画设计之中，也可结合产品，公司甚至品牌特色，添加产品制作流程，动态产品展示以及公司文化展示等等，留住用户的同时，加深他们对产品，公司甚至品牌的印象，提升产品知名度。一举三得，何乐而不为呢？

3.Avanti e indietro loader

设计师：Vitaly Silkin

亮点：图形的前后位置变换，加之渐变色彩的精彩应用

这款加载动画，集中采用了图形交替变换位置实现动态变化，简洁直观。渐变色彩的使用也使整款设计，更加的美观舒适。对于丰富用户枯燥乏味的等待时间，也是不错的尝试。

所以，在你的设计中，也可利用类似图形左右，前后，上下等等位置依次变换的方式，同时结合发光，流体以及背景色彩对比之类效果，让整个动画兼具视觉效果和趣味性。

4.Loading Screen Animation – Hourglass

设计师：Makito Ninomiya

亮点：形象的动态沙漏计时，以及文本与动画的结合

这款加载动画，除了采用了更加形象贴切的动态插画沙漏，拉近与客户的距离。还选择了动画与文字的结合方式，安抚用户的同时，也能尽量获取用户理解，实现与用户的情感层面的交流。

所以，在你的设计中，也可适当的采用一些微文本设计，获取用户共鸣的同时，也能提升用户体验。

5.“bouncy” – B&W loading animation 9

设计师：Lilian Tedone

亮点：简单的形状，跳跃以及旋转的完美结合

整款设计简洁清爽，舒适而不失趣味。简单形状，跳跃以及旋转的完美结合，让整个动画设计更加灵动而富有感染力。对于减缓用户等待时的枯燥乏味之感，效果也是立竿见影的。

所以，在你的设计中，也可效仿这款设计，利用有限的简单图形，添加旋转和跳跃等动效，配合颜色和阴影的变化，让整个动画设计简单灵动，丰富多变，视觉效果也是绚丽吸睛。用户体验当然也不会差。

6.Melting loader

设计师：Vitaly Silkin

亮点：巧妙的流体融化特效和发光特效

这款加载动画，采用了如水流动般的流体特效，给人以如冰融化般的视觉效果。同时，黑色背景与蓝色的搭配，也使整个动态曲线具有了黑夜发光般的效果。着实有趣而极富特色。此外，曲线的无限延伸，对于平复用户情绪，打发等待时间，也是不错的策略。

所以，在你的网页或软件加载动画中也可采用类似的流体或水滴特效，利用背景与形状的色彩的对比，制作出发光的效果等等，让你的设计更加与众不同。

7.Loader of things

设计师：UI8

亮点：多层圆环嵌套以及3D立体效果的应用

此款设计，采用了多层圆环嵌套，简单而流畅。3D立体效果的应用，也使整个动画更加直观大气。非常值得效仿。

所以，在你的设计中，为增加加载动画的吸引力，也可采用类似图形嵌套的方式。当然，采用3D立体呈现，对于增强整框设计的视觉效果，提升用户体验，效果也是非常显著的。

8.Preloadeer Animation

设计师：Rodetyo Prast

亮点：可爱的插画风以及与节日特色的有趣结合

此款加载动画不仅采用了美观独特的插画风，而且还结合圣诞节主题，添加了极具圣诞特色的驯鹿作为其主体，可爱而富有童趣。 非常适合一些以儿童为对象的在线课程（尤其是绘画），在线儿童购物以及类似儿童网站或软件，制作一些圣诞专栏时，使用的加载动画。

所以，在你的设计中，也可适当结合各种节日元素，习俗，故事甚至经典人物，让设计更加丰富多变的同时，也能使其极具趣味性和地方特色。

当然，添加一些产品特色，也能让设计更具独特性。总之，这些些设计切入点的使用在转移用户用户注意力，减缓其因等待而产生的焦虑情绪，提升用户体验，效果也是极佳的。

9.Loader Animation

设计师：Burhan Khawaja

亮点：多屏展示与色彩变化，以及旋转动效的极佳结合

此款加载动画，不同于一般设计师惯用单屏展示各类动画，以吸引用户驻足的方式，而是采用不同比例多屏展示的方式，结合动态渐变色彩的应用，以及正反旋转动效的对比嵌套，使整个动画设计，华丽炫酷，优质吸睛。

所以，在你的加载动画中，也可采用多屏展示方式，结合色彩，旋转以及形状之类的动态变化，让整个设计更加华丽而吸睛。

10.Loading screen visual for app

设计师：Nguyen Tran

亮点：美观而炫酷的科幻视觉效果

此款专为iOS或Android手机软件或网页设计的加载动画，采用黑色背景搭配浅蓝色旋转地球和进度条的设计，创造出荧光效果的同时，美观时尚，又带有科幻色彩。极具视觉效果。

所在你的设计中，也可采用类似色彩的对比，动态进度条的添加等等，制造出科幻炫酷的iOS或Android加载动画。

11.Loading animation

设计师：Alex Sailer

亮点：快速旋转与数值的变化设计，极大地提升了用户体验

页面加载时，用户等待最不希望遇到的情况就是，加载页面毫无变化，用户在一片茫然中等待。而此款设计，正好抓住用户这样的心理，添加快速旋转的色条和数值的变化设计，让用户直观的感受到网站或软件后台正在飞速的运转，处理相关问题。而且也易于用户评估可能需要的加载时间，从而极大的提升了用户体验度。让用户有计划，有目地等待。

所以，在你的设计中，也可适当的效仿此类应用数值的变化，尤其是进度条与数值变化的组合，留住用户，提升用户体验。

12.U3D loading animation

设计师：Alex Sailer

亮点：动态展示正在加载地内容，配合背景颜色的变换，可爱，有趣且吸睛

此款加载动画，采用直接动态展示正在加载的网页或软件内容的方式，利用可爱有趣的sticker吸引用户，而且根据不同sticker的主题色，相应变换背景色，也让整个动画更加多变而吸睛。非常有特点。

所以，在你的设计中也可通过，直接展示加载内容的方式，激起用户继续阅读或浏览的兴趣，让动画更加的实用，而且视觉效果也会更佳。

例如，在制作个人在线作品集网站的时候，加载动画，就可直接介绍作者相关情况，动态展示一些作品的截图或一些设计师个人的生活或工作照片展示等等，让用户获得更多的信息，从而忘却等待的乏味和无趣。

13.Spinning Spiral Geometry

设计师：Danny Perry

亮点：色彩条的旋转变换

多色的色彩条旋转本就十分炫酷吸睛，再结合多样的旋转方式，整个动画设计就会更具变化，从而提升吸引力。

所以，在你的设计中也可采用这种色彩条与旋转的结合方式进行设计。让你的设计更具特色。

14.Loading animation icons

设计师：Zach Roszczewski

亮点：各类图标的组合变换

此款加载动画，则采用简单图标的组合和变化，简洁而不失趣味。

所以，在你的设计之中，当没有特别的设计点子时，直接选用软件或页面中的高频使用的图标，结合旋转，色彩以及位置的变化，也可创作出极具特色的加载动画。

15.Glowing loading cube

设计师：Graig Mederios

亮点：采用产品或公司logo以及发光的效果，引起用户共鸣

此款设计，直接采用逐步构建产品或公司3D logo的过程，非常直观而炫酷，对于加深用户印象，提升产品或公司知名度，作用显著。而且，直接使用其logo, 对于激起用户共鸣，效果也是不错的。此外，制作的发光效果，对于吸引用户注意力也是非常有用的。

所以，在你的设计中，也可结合产品或公司logo进行设计。

总之，无论你是需要创建和设计，网页，Android或iOS软件加载动画，希望这里罗列和分析的15款最新的Web和软件加载动画设计能对你有所启发。

Mockplus助你轻松快捷地创建，检测和评估各类网页和软件加载动画

无论一款加载动画如何炫酷吸睛，其终究只是Web或软件界面设计的一部分，只有将其回归到网页或软件之中，才能真正的检测和评估其可行性和有效性。所以，作为设计师的你，急需一款即能够帮助你尽快制作出Web或软件原型，同时又能够简单快捷的将你的动画GIF嵌入这些原型，并轻松快速地检测和评估其实用性和有效性？Mockplus, 作为一款集设计和协作为一身的原型工具，不仅能够助你快速的制作原型，更能助你更好的检测，分享和评估各类网页和软件加载动画：

Mockplus助你简单快速地制作加载动画软件和网页原型

1.利用MP封装的强大项目和页面示例，快速制作出能够嵌入加载动画的原型

尽管，加载动画需要嵌回到对应的软件或网页才能更加直观准确的评估其功能，但并不意味着必须从头一步一步重新制作相应的原型用以测试。事实上，Mockplus封装了强大而丰富的项目和页面示例，能够帮助你简单下载导入，即可根据需要改进所需项目原型，从而尽快的开始加载动画功能的检测和提升工作。

2.利用MP强大的组件库和图标库，轻松快捷地手动制作所需web/app原型

当然，作为专业而严谨的设计师，希望能够手动制作更加贴切优质的web/app原型，以求更加精准地检测加载动画的有效性和可行性？不用担心！Mockplus提供的强大组件库和图标库，快速灵敏的交互设计以及多样的弹出窗口/页面设置等等，都能助你轻松快捷地手动制作所需原型。此外，Mockplus许多新增功能，对于简化设计过程，也是非常有效的。

3.利用GIF组件直接嵌入加载动画

完成所需Web或软件原型之后，你可以简单的拖拽Mockplus的GIF组件，直接将需要的加载GIF文件添加到任何希望的原型界面或位置，简单方便。

Mockplus助你简单便捷地测试和评估加载动画的可行性和有效性

1.8种测试和分享方式，方便尽快获得设计师和用户对于动画的反馈

Mockplus提供了8种多样的测试和分享方式，方便设计师根据需要及时的测试和分享制作好的原型和加载动画，从而更加快速的获取设计师或用户的反馈。

2.团队协作功能，对于设计师协作编辑和改进加载动画效果也是极佳的

希望通过团队协作，获得更多的设计灵感和建议？Mockplus提供团队协作功能，方便设计师根据需要共同编辑和改进加载动画。而且，其一键创建，同步和分享，通知审阅以及评论功能，对于设计师快速地实现原型加载动画有效性和可行性的检测和评估，作用也是极佳的。

总之，无论你是需要尽快制作出Web/app原型，还是希望在原型中检测和评估加载动画的可行性和有效性，Mockplus都能满足你的需求。

结语

加载动画，作为设计师用于留住用户的重要平台之一，无论是一个小小的加载进度条，文案，按钮，背景图片，动效甚至色彩的选择和搭配，都对增强web和软件趣味性和独特性，提升用户体验发挥着至关重要的作用。所以，在具体的设计中，设计师不仅需要将其看作与软件功能和界面一样重要的部件进行设计，同时也可结合网站，软件产品特色，创建一个能供用户暂时放松，娱乐甚至开怀一笑的场所或模块。

总之，无论设计师设计的初衷是什么，为设计和创建最优质的加载动画，最好选择一款最佳的原型工具（例如以上介绍的简单快捷的Mockplus），以便将设计的所有细节快速地转化成直观可视的交互原型，切实地测试和评估，这款加载动画设计能否达到你所期望的，甚至更好的效果。

总之，希望这里介绍的15款最新优质加载动画设计能对你有所帮助。

原文地址：Mockplus

作者：jongde

 转载请注明：学UI网》15个优质加载动画设计，让等待成为一种享受

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

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

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

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

①数字冰雪

-展厅广告图

②冰雪数化

〇 空间质感

-空间质感设定

〇 体验设计

-导览路线图

-空间设计总览

-展厅1-初始视角

展厅1-室内场景

展厅1-室内场景

-衔接展厅一和展厅二的走廊

-展厅2-入口

-展厅2-虚拟转播台

-展厅3 – 初始视角

-展厅3 – 奥林匹克官方旗舰店

· UI设计

1. 空间层-在3D空间中展示最关键的一级信息（图片、视频、标题性文字），让用户像真正线下逛展般沉浸游览；
2. UI层/内容层-在2D空间中通过醒目的标签绑定3D空间中位置信息来展示次要的二级信息，用户点击标签后可以看到该展位的详情内容；

3. 声音层-为了配合UI视觉层的信息立体展示，我们植入虚拟人IP通过声觉层穿插讲解，给用户打造声光电立体沉浸的信息可视方案；

-多层级信息结构图

-虚拟IP声音层讲解

· 技术亮点

-亮点1 — 全景技术与动态真3D的结合

-主动引导型展厅结构

-PC端体验录屏

-识别图中二维码即刻体验

③冰雪之约

-数字巡展产品海报

④过往案例

-阿里巴巴云栖大会·互动导览

-阿里云金融峰会·云上数舱

-达摩院数字展厅·云游达摩

-人工智能实验室线上展厅·云游AI

01、不一样的优惠券叠加设计

优惠券在电商购物场景中运用普遍，如何提高优惠券的关注度和使用率是至关重要的探索。特别是在多个优惠券叠加的场景中，如何在交互层面和视觉引导层面进行突破，作为设计师来说都在不断尝试新的解决方案。

最近发现得物（毒）将多个优惠券设计成左右滑动的动效形式，方便用户关注到更多不一样的优惠券。将有效期设计成失效的倒计时，营造时间紧迫感，提高用户的关注度和优惠券的使用率。

02、突出品牌感的轮播 Banner 设计

轮播图在产品设计中较为普遍，以推广营销活动为主。除了在 Banner 设计本身进行创意发挥以外，在 UI 布局层面也是设计师探索的方向。

得物（毒）在最近的一次新年活动中，利用品牌展示和轮播 Banner 相结合进行布局呈现，不仅突出活动主题，也强化了活动品牌的曝光度。除了自动轮播之外，也可以点击品牌卡片切换，操作也是非常便利。Banner 底部卡片的展示也能让用户在当前视野中浏览到其他品牌，提高了更多品牌的曝光度。

03、多种分类下的轮播设计

单轮播设计较为普遍，当我们遇到按照不同类别轮播类别内的内容时，如何处理好类别的样式和轮播的呈现方式呢？相信这个设计解决方案是一个不错的思路。

网易云音乐 APP 播客栏目中，随心听 FM 除了卡片轮播以外，下方设计了音乐类别的选择，模拟调频场景设计，操作不仅非常便利，感官体验也是非常不错。背景颜色也会随着类别切换进行微变化，带给用户非常自然的视觉过度。

04、通过手势拖拽隐藏红点提示

红点效应从强迫症已经开始过度到治愈期，不过针对信息列表较多的部分，红点提示太多也是非常干扰用户体验的。

在 MOMO 陌陌 APP 消息栏目中，如果你觉得红点提示消息过多时，可以通过拖拽红点隐藏显示，无需挨个删除或者阅读。配合微动效的设计表现，带给用户非常流畅自然的操作体验，借助手势交互的设计提升用户体验。

05、右滑手势探索新的世界

手势交互设计在产品中逐渐得到应用，可以在有限的空间里面探索更多的互动体验，带给用户更加便利的操作体验。

最近研究手势交互的时候，发现 MOMO 陌陌 APP 首页右滑即可开启新功能，探索新的世界，吸引用户前往这个小宇宙去探索。

06、刷新设计的情感化表达

把简单的功能做到极致，把重复的动作做到更有情感化。想要抓住用户的情感共鸣，就要在细微之处带给用户更有情感化的体验。

喜马拉雅 APP 在下拉刷新时，不是固定的文案提示，针对这个动作设置了不一样的文案提示。每一次刷新都会展示不一样的文案，让用户感受到这是一个有温度的产品，情感化设计的表达提高了用户的情感共鸣。

07、融入春节元素的金刚区设计

春节元素融入到 UI 设计中近期出现了很多案例，在金刚区图标设计中的表现尤为突出，带给用户情感化的场景代入感。

自如 APP 就将春节中的元素融入到金刚区的图标设计中，带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等，结合中国红营造出浓厚的春节氛围。

08、醒目的引导提示设计

针对新业务或者新功能的新手引导设计，有助于提高用户对于内容的熟悉度，也能降低摸索学习的成本。

记账城市 APP 在打开应用时，会在底部弹出新增的一些功能或者交互玩法。通过俏皮可爱的卡通形象以对话式的形式传递内容，降低了用户的学习成本，一目了然且不会形成对主功能区域的干扰。

09、用设计为北京冬奥会加油

最近比较热门的话题就是北京冬奥会了，各大品牌都在不同的渠道通过各种形式进行曝光，借助营销策划或者单纯的加油祝贺，为北京冬奥会的举办增添色彩。

高德地图 APP 在地图主页添加火炬元素突出冬奥主题，点击会展开“点燃昂扬斗志，中国队加油”。保持当前结构的基础上，通过元素的添加达到主题的突出，既不干扰用户操作，也能通过情感化的设计与用户产生共鸣。

10、游戏化的签到积分设计

签到挣积分获取相应的奖励，在产品中较为常见，特别是电商类产品。随着这种形式的普及，起初的新鲜感逐渐减少，有差异和创意的表达方式才能吸引用户的关注度。

得物（毒）结合游戏化的形式表达签到和领取积分的设计，通过积分换取优惠券和礼品等。积分采用极光的形式表达，不足的情况下可以通过“找极光”获取，激发用户的参与度。

小结

从感官体验的角度体验产品，总结了在 UI 设计视觉层面的解决方案，有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达，总结优秀的设计呈现方案，希望这个栏目可以带给你更多帮助！

WHAT? 什么是用户研究?

用户研究听起来是个非常大的学科和话题，没有具象的描述和切实的研究方法就显得虚无缥缈，让人有种雾里看花的感觉。用户研究和用户体验一样，在国外市场得到验证、认可并被不同行业的企业所接受，而国内市场处于萌芽阶段，只有部分行业的头部企业对其有较为清晰的认知和应用。

那么怎么定义用户研究？首先，用户研究的目的是了解用户，对用户有更清晰、具象的画像，是一系列研究方法的概括型的名称。聚焦互联网行业，什么岗位的同学最需要关注和学习用户研究方法？与用户、数据打交道的岗位需要对相关用研方法和分析方法有不同程度了解和应用能力，例如，用户研究员、市场研究员、数据分析师、产品经理、体验设计师、交互设计师等等。作为体验设计师或交互设计师，可以通过研究方法对用户目标、需求和能力的系统研究，用于指导设计、产品结构或者工具的优化，提升用户工作和生活体验。

HOW? 怎么做用户研究?

研究中包含的用研方法有很多，可以根据实际场景和资源选择适合的方法，目前常用的实用性、可操作性比较强的四大方法：可用性测试、网站访客（埋点数据）、用户调查、A/B Test。在设计过程中的每个阶段，用户研究是都需要做的工作，但很多时候由于工期较短，deadline在前，设计师在产品设计初期没有办法做到较为完善的用户研究，那么这部分工作就会被延后，在验证阶段研究任务就会变得比较重，后期的优化对此依赖性也比较强。可用性测试是设计师在验证阶段相对比较能贴近用户的用研方式，在测试过程中通过观察用户行为，从即时的反馈中更容易获得贴近真实的定性数据，用对话沟通的方式深度挖掘用户遇到的问题，从而锁定优化重点。

1、了解可用性测试

1.1 可用性测试的优势

可用性测试是确定用户是否完成目标的核心方式，它与其他用户研究方法有许多相同的测试指标，并且能够得出较多可用的定性数据，可以收集的数据类型也比较多，例如，完成率、出错数、任务时间、任务水平的满意度、测试水平的满意度、寻求帮助的次数和可用性问题清单，这些数据极大的便利了后续的分析工作，帮助多维度的判断产品的状态、用户的满意度、体验问题等等。

1.2 可用性测试的类型

可用性测试可以分为两种测试类型：形成性测试（Formative Test）和总结性测试（Summative Test）

1.形成性测试：主要作用于查找与修复可用性问题，提供及时反馈便于改进，是设计师重点参与的测试类型

• 通常以小样本量的定性调查
• 数据以问题描述和设计建议形成输出
• 采用频率和严重性为指标量化问题，追踪那些用户用到什么样的问题，衡量完成任务时长，并判定他们是否成功的完成任务等

2.总结性测试：用指标度量可用性，用来评估效果，其中又分为基准测试和比较测试

1.3 可采集的数据

样本量：通常大于30，当数据量小于10可通过统计学方法计算得到有效统计分析结论

代表性：样本能够代表预期要描述的用户群，若存在不同用户群组中有重要差异因素的使用分层抽样（Stratified Sampling）的方式

随机性：考虑所有重要变量，设计理想样本，合理合并用户群组

测试数据：现场/远程测试，观察记录用户用户行为，与用户互动深入挖掘问题

完成率：即成功率，完成=1、失败=0，完成率=完成任务用户数/用户总数

可用性问题：根据问题出现的频率和影响程度评估严重性、优先级

任务时间：任务完成时间、直到用户失败所用的时间、任务总时间

出错数：尝试任务产生的无意识的出错数量，诊断失败原因，预判可能出现的场景

满意度评分：使用标准化可用性问卷，回收数据计算得出

复合分数：复合型总结可为用户体验提供更好的总体描述

2、可用性测试问卷

经过长期的研究和市场验证，目前已沉淀出很多标准化的可用性问卷，不同的问卷的评估针对性不一样，可以满足大部分用研需求。使用标准化的问卷是因为这些问卷是经过大量的使用后验证校准后产生的，是被认可具有通识性的衡量标准，这些问卷都具备客观性、重复性、量化、经济、沟通、科学的普适性的优质属性。

2.1 标准化的可用性测试问卷

问卷类型主要可以分为以下两大类：

列表中的问卷大部分是需要缴纳一定的费用后才能使用，但其中系统可用性整体评估问卷、软件可用性问卷、场景后问卷是标准可用性问卷中可以免费使用的。应用广泛且被专家推荐的测试问卷是：软件可用性问卷主要针对系统或功能进行整体评估，问题设计精炼清晰，使用快捷方便；单项难易度问题追求的是心理测试的简单和适用性，有5分和7分制，7分制的可靠性更高；主观脑力负荷问题是在线测试，灵敏性更好。综合评估下，软件可用性问卷（Software Usability Scale，SUS）是设计日常中最合适最经济实用的测试问卷。

2.2 软件可用性问卷（SUS）

软件可用性问卷是可用性测试结束时的主观性评估问卷，应用广泛，测试后该问卷使用占比约43%。整个问卷共10题，每题为5分制，奇数项为正面描述，偶数项为反面描述，可以通过修改问题文案聚焦测试范围；如有需要可以将偶数项的问题调整为正面描述，但数据验证调整为正面描述的问卷结果与包含负面描述的问卷差异不大，不影响问卷的测试结论。在完成测试任务后，用户需快速完成各个题目，不进行过多思考，若用户因某些原因无法完成其中某个题目，则视为选择中间值。

2.3 可用性、易用性抽取

问卷整体可以抽取部分题目作为子测量表来作为单独的问卷有针对性的进行可用性和易学性测量，可用性由问卷中1-3、5-9题构成，易学性由问卷中4、10题构成。研究表明使用子测量表对量表的可信度的减低可忽略不计（0.92  → 0.91），并且使用子测量表可减少答题时间。

2.4 分值计算

得分计算：范围在0-4，每题进行转化分值；奇数题（正面）：原始分减去1，（x-1）；偶数题（负面）：5减去原始分，（5-x）

• SUS总分= 所有转化过的分值相加 * 2.5, 多样本算SUS总分均值
• 可用性总分=所有转化过的可用性分数相加*3.125
• 易用性总分=所有转化过的易用性分数相加*12.5

3、统计学描述方法

可用性测试因为耗费时间较长，能够参与测试的用户资源稀缺，回收样本量小能够收集到的样本量一般会比较小。样本量小的情况下这个样本量所能概括的整体是范围比较大的，会存在较大误差，那么在较为严谨的报告中，可能需要对所得分数和除测试样本外的分值预期进行描述，这时候会涉及到统计学中常用的描述方式，即通过置信度及置信区间来描述，根据置信区间的下边界看软件是否低于行业标准。

3.1 相关概念

置信区间是指在一定概率下包含样本位置总体参数的这部分数值区间，通过计算置信区间来描述测试结果的概率。置信区间宽度和样本量之间是一个逆平方根的关系， 样本量越小，误差越大，未知样本数据可能所在的区间更大。

置信度就是说，你测得的均值，和总体真实情况的差距小于这个给定的值的概率，应该是1-α；换句话描述，即我们有1-α的信心认为，你测得的这个均值和总体的实际期望很接近了（测得的均值就是总体期望是很草率的，但是说，我有95%的把握认为我测得的均值，非常接近总体的期望了）。研究员可以选择0%-100%之间的任意数值的置信度，通常设为90%或95%（最常用）。

临界值是在原假设下，检验统计量在分布图上的点，这些点定义一组要求否定原假设的值。

3.2 置信区间计算

置信区间= （样本平均值-误差幅度）～（样本平均值+误差幅度）=（x -（x- μ））～（x +（x- μ））

• x = 样本平均值
• 误差幅度=临界值*（样本标准差/样本量的平方根），即：（x – μ） = α* （s / sqrt（n））
• α=临界值（Excel函数=TINV（1-置信度，样本量-1））
• μ=被检验的基准值（行业标准）
• s=样本的标准差（Excel函数=STDEVP（N1，N2，..））
• n=样本量

tips：临界值可以通过所设置信度和样本量在t分布表中查找相应的值

3.3 可用性测试策划应用

在做可用性测试前，需要进行很多准备，过程中也需要记录很多相关的信息，初步尝试的设计师可以参照以下步骤完成可用性测试的整个流程：

• Step1: 确定调研目标（目的、用户、时间、环境）
• Step2: 确定测试任务（任务内容、测试方案、SUS问卷地址），任务内容可以通过抽取用户体验地图（User Journey Map）流程中的触点设计，保证流程的完整性和任务的关联性

• Step3: 引导测试用户完成可用性测试，过程中记录测试时间、用户遇到的问题、发生的频率等等，记录类型可以根据测试测中点进行记录

• Step4:  用户填写SUS问卷，回收问卷分数进行计算，得出SUS分数、可用性分数、易用性分数的均值作为本次测试的结论

• Step5: 作为补充，可以计算SUS样本分数的置信区间，预期未被测到的目标用户对产品的评分可能落在的区间，区间下限可横向对比，看是否低于行业标准。可以描述为“样本分数标准误差约=5.34，置信区间为63.78～69.12；有95%的把握认为测得的均值接近总体期望，未测样本分值将落在63.78～69.12之间，符合行业标准预期”。
• Step6: 通过测试过程中观察用户行为，探讨用户提出或下意识忽略的问题，并进行问题的记录和分类
• Step7: 用户访谈记录问题进行解析，对问题的严重程度进行评级，选出问题较多的部分并提供可能的解决办法进行优化

• Step8: 根据以上结论对测试进行总结性分析

原文链接：酷家乐用户体验设计（公众号）

作者：藜漫

转载请注明：学UI网》量化用户研究：可用性测试

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

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

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

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

基础表单 

平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单。

分组表单 

单次任务的表单页中需要填写内容众多，且不同内容之中存在一定可分类归纳性。

1) 标题分组

表单项较多(超过了7个设置项)的情况下建议分组，分组标题能够引导用户完成表单填写。但分组内设置项要有强关联性，否则不能归为一组，不能因为字段多为了分组去分组。

2) 卡片分组

7-15个设置项，用标题分组不足以给信息做层级区分，为了让用户在操作时更聚焦，同时也需要给用户更明确的操作引导，即可使用卡片分组。

卡片分组之间关联性更弱，分类更明确，多个设置项，多个分类。

3) 基础分步表单

如果每个组之间有逻辑先后顺序，那么推荐使用分步表单，利用步骤条告知用户完整流程和进度。

通常在最后提交前让用户再次确认信息，并在流程结束给与明确的结果反馈。适用于具有明确的线性逻辑的任务和用户在操作完成后就不再参与的复杂表单。

4) 标签分组式表单

如果每个组既没有逻辑先后顺序，也没有关联性时，推荐使用标签分组，适用于表单内容过多，为减少加载时间将表单分页展现的情况。

高级表单 

1) 动态增减

建议条目表单数≤3项，并且每个输入框不需要单独的标题使用。

2) 可编辑表格

建议条目表单数2~5项时使用，以使得每行内容可被完整呈现。

3) 折叠面板编辑

建议条目表单数在6~8项时使用。

4) 规则树

应用于规则编辑场景。适用于页面中需要添加一个或多个对象，且每个对象都需要添加或编辑多组数据的情况。

5) 语句式表单

让用户在预设的结构来完成语句，常用于设置、编辑规则类表单，表单读起来更友好更人性化。

最后 

希望通过前两部分表单内容的学习，能让大伙对B端表单有一个初步的认识和理解。

在表单设计的第③部分，将会为大伙分享实操性的方法来提升表单体验，并能够运用到实际工作中。

如果想学习更多关于「B端表单设计」的内容，记得及时关注接下来的文章推送。

慢慢来比较快，如觉得有帮助，请关注公众号，点个赞&在看，谢谢！

原文地址：Clip设计夹（公众号）

作者：Cassie

转载请注明：学UI网》如何又快又好地设计B端表单？先学会这些表单设计样式

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

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

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

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

  

  

 

 

 

  

  

 

 

 

  

 

  

  

  

  

 

 

  

  

  

 

 

 

 

 

  

 

  

 

 

 

  

 

 

 

 

 

 

 

  

 

 

  

  

设计步骤：

总结：

原文地址：胡晓波工作室（公众号）

作者：告白天

转载请注明：学UI网》你的拟人化LOGO真的应该再有趣一点

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

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

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

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

 

以点为中心，以直径为距离旋转一周所形成的封闭曲线叫做圆，也是中心对称图形。

这些形状本身并没有什么含义，但跟设计有关系吗？

有关系。 

同一张图片正方形的视觉看起来稳固，但视线却不容易有着重点，显得呆板沉闷。

16：9的长方形能让观看者有沉浸的体验感，视线也显得宽广，符合人眼的生理需要。（人的眼球视野基本是椭圆形，两个椭圆形相加从中裁出的矩形就是16:9的长方形，更符合观赏）

这也就为什么在生活中数码设备、影院荧幕、书本、海报的大部分尺寸都以长方体为主的原因。

而圆形虽没有长方形的视线宽广， 但却有着独具一格的聚焦特点，能让视线完全集中在图形内部，体现出一种东方特质的艺术美感。

圆的使用场景不仅与生活息息相关，例如汤圆、剪纸、圆桌、太极、建筑等有关。

「在东方」

「在中国」

更代表着团圆与美好寓意

二十四节气「以圆为形，以气为本」

中国传承千年的优秀文化

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》形状跟设计有关系吗? 有关系

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

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

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

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

目录

一、应用图标设计

二、金刚区图标设计

三、底部标签栏设计

四、导航栏设计区域

五、顶部视觉区域

六、背景氛围强化

七、模块分类强化

八、闪屏氛围营造

九、功能区域置换

十、运营设计营造

一、应用图标设计

应用图标是用户接触产品的第一个环节，也是视觉差异化体现的重要部分。在春节主题氛围中也是表现丰富多样，从不同的方向体现出春节的浓厚氛围。

主要的处理形式会围绕春节主题文案、生肖卡通形象、主题皮肤、春节元素和颜色等。以春节主题文案举例，通常是春节祝福语和营销结合的文案为主，设计在应用图标底部居多，将图形适当向上位移进行视觉平衡。也有一些产品结合自身图标因素，将文案设计在顶部位置，也是为了保持整体结构的稳定性。

除了文案表达以外，配合生肖卡通形象也是较为常见的手法，可以是局部元素的装饰，也有是作为皮肤使用的。比如今年是虎年，利用老虎的形象或者局部元素表达也是层出不穷。

无论是文字表达还是图形结合，应用图标上的表现都是在主题活动中优先考虑的场景，这是被用户在众多产品中发现的第一眼。

二、金刚区图标设计

金刚区就像百变金刚一样，将各种功能和业务聚集在一个区域，便于用户进行快捷操作。在金刚区图标上面进行设计发挥是最为普及的，春节期间众多产品都在各种形式上面进行发挥，呈现出很多优秀的设计案例。

最为简单的做法就是将带有春节主题的文案融入到图标设计中，这个形式适用于各类节假日和活动主题中。表现手法也是非常简单的，配合元素点缀和色彩渲染，很容易体现出主题氛围。

保持图标造型不变，在外形轮廓背景中融入春节元素也是一个可行的方向。比如将灯笼作为图标背景，配合元素装饰和色彩搭配，呈现出的春节氛围也是非常浓厚的。

也有结合春节元素对金刚区图标进行设计重构，带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等，结合中国红营造出浓厚的春节氛围。

将春节元素点缀到图标中也是一种不错的选择，或者配合春节主题颜色进行搭配，也能够营造出浓厚的新春氛围。

金刚区图标设计是营造氛围的最佳区域，不会对业务布局和产品结构造成影响，能够根据氛围的要求作出灵活的调整。

三、底部标签栏设计

底部标签栏是用户进行功能模块切换最频繁的区域，通常营造氛围和金刚区一样，都是非常直观和效果显著的区域。

将春节元素融入到底部标签栏图标设计中，带来的感官体验是非常不错的。可以是单个的春节元素，也可以是元素的局部装饰，都可以非常直观的传达给用户，突出春节活动氛围。

也有将春节主题文字融入到图标设计中，一种是直接结合字体设计和春节元素表达；一种是结合外轮廓背景，字体作为图标部分镶嵌入背景中。文字的识别性有助于用户更快理解，传达氛围也是非常直观高效的。

如果不想改变太多，也有一些产品只是在中间凸起模块图标上面进行氛围设计，也能传递春节的氛围。这样的设计解决方案最大限度的保留了原本的设计内容，属于弱氛围营造，也能达到一定的氛围营造目的。

除了在图标设计上面营造以外，也能在底部标签栏背景上面营造，配合中国红营造出来的氛围也是非常浓厚的。也可以是配合颜色和元素进行营造，比如烟花效果也是不错的选择。

底部标签栏设计区域的氛围营造效果非常显著，无论是背景层面的营造还是图标设计上的创新，都能带给用户非常直观的体验。

四、导航栏设计区域

导航栏+状态栏通常是品牌色或者白色居多，也有少数产品会使用其他颜色进行设计。在春节期间这个区域也是作为氛围营造的不错选择，除了利用中国红作为颜色层面的选择以外，也有结合春节元素进行设计表达的。

除了静态的设计表达以外，也有结合动效的表达提高吸引力，突出春节浓厚的氛围。（比如：途牛旅游）

五、顶部视觉区域

顶部视觉区域和导航栏区域比较类似，不过顶部的范围更大一些，运用的场景更多一些。除了首页以外，在其他主界面也可以使用这个区域，带来春节氛围的营造。

首页 Banner 区域是顶部视觉区域面积较大的板块，结合 Banner 进行背景营造，带来的视觉效果也是非常突出的。

除了根据 Banner 效果营造以外，也有只是营造背景层面的形式，将背景颜色营造出春节的氛围，效果也是一目了然。

在其他的主界面中顶部视觉区域也可以进行营造，比如个人中心的视觉营造，带给用户的感官体验也是非常的直观。

六、背景氛围强化

除了在局部的区域进行背景的氛围强化以外，也有将大面积背景进行春节强化的。通常是通过颜色来强化，比如通过中国红来烘托春节氛围，也会在背景中装饰一些春节元素，进而增强氛围感。

背景强化适合卡片式布局，更能衬托出空间感，强化视觉效果。

七、模块分类强化

在大视觉模块区域强化表现是较为突出的，为了体现精细化的表达，在细节的设计中也会加以注重。

细分模块的设计嵌入可以弱化视觉比重，也能达到融入春节主题的目的。比如在模块分类的设计中，将春节主题字体替换到类别中，作为活动栏目的表达，也是非常不错的设计表达。

八、闪屏氛围营造

闪屏和启动页本身属于相同的表达，都是为了缓解用户启动应用时，等待过程中所产生的焦虑感。不过随着闪屏广告的概念，被区分呈现出来了。

体验了很多产品，发现还是闪屏广告居多，以营销活动为主的案例较多。单纯突出春节主题表达的很少，以春节主题配合营销活动设计比较多些。

不过启动页的位置作为主题氛围营造是值得考虑的方向，作为品牌情感化的延伸是非常不错的选择。

九、功能区域置换

功能区域在这个环节我是作为整合而存在，指的是下拉刷新、空状态、加载、主按钮等等。在一些重点区域强化春节氛围是很多设计师的首选，也有一些会在细微之处深入挖掘。

下拉刷新对于一些内容更新频繁的产品来说，是用户操作非常频繁的功能。通常情况下，是结合文案提示、默认动效、品牌元素、吉祥物动效等进行表达，而春节期间很多产品也嵌入了春节活动，将功能区域进行置换。不仅可以达到刷新的目的，也能带给用户春节的氛围感。

在一些主按钮比较突出的产品中，也会在按钮的设计上面融入春节的元素，在细微之处带给用户氛围感。

以上案例仅为列举，功能区域置换是一个可以探索的方向，不仅可以达到突出主题的目的，也不会影响功能的操作。

十、运营设计营造

运营设计通常都是最活跃的，不会放过任何一个主题的参与，春节这样的大节日更是重点参与的对象。

在春节期间通过各类活动的设计突出春节氛围，让用户在感受氛围的同时促进消费。除了在视觉效果上呈现出丰富多样的表达，在互动玩法上面也是费尽了心思，带给用户更多趣味和年味。

运营设计的营造主要是在专题活动的表达上呈现，也会配合 Banner 设计或者其他插入式广告，还有弹窗广告的结合也是较为普遍。

小结

春节随着时间的推移已经过去，本文梳理了在春节期间观察到的移动端 UI 层面的变化，总结案例是为了探索大家的设计解决方案，积累更多不一样的设计思路。案例主要以感官层面的为主，希望这些视觉表达层面的思路，可以带给你更多灵感。

本文主要是个人观察所感，不足之处望大家自行补充，我们互相进步。

项目背景

柠檬爱美依托百度庞大的流量与移动生态服务优势，在“精准搜索+精准推荐”双引擎下，用百度大脑结合大数据建立精准用户画像，通过下探业务目标、挖掘用户诉求，结合百度APP生态，搭建搜索场景下的医美科普内容服务平台。

1. 业务战略升级

近年来，医疗美容行业增速迅猛，行业乱象频发，亟需提升整个行业服务质量和品质。本次业务战略升级围绕内容建权威专家科普解读，打造用户放心、安心的医美服务保障品牌。目前设计价值重申迫在眉睫，品牌logo也应配合战略方向优化升级，助力品牌心智打造。

· 设计趋势变化

随着时代的变化，人们需求的变革，极简化、扁平化已成为近几年的品牌logo设计趋势。品牌升级的背后除了商业模式的变革，也是顺应新的设计流行趋势变化。

2. 问卷调研

· 设计问卷

项目初期，我们采取一对一的访谈方式去了解产品背景和诉求，寻找设计抓手。通过精心设计的、有场景带入的问题，让参与者在放松的状态下把他对产品定位等关键信息准确表达出来，这里需要注意的是邀约参与者必须包含各业务方向的产品决策人。过程中也对医美行业、大环境的洞察分析以及目标受众、竞争对手、产研方向等做了探讨。

· 定量分析问卷结果

通过分析问卷结果，我们与业务方达成了本次品牌升级的目标，希望通过品牌logo升级，传递出权威科普、服务保障、科技医美的品牌定位。

3. 概念探索

通过前期调研我们已经有了明确的业务定位，但是我们所提供的服务要给用户建立什么样的心智印象？什么样的品牌传播能产生用户共鸣？我们如何处理电商与内容的品牌关系？都仍是未知，这也恰好是品牌需要解决的问题。

带着这些疑问，我们收集并查阅了大量用研、品牌资料，我们通过金字塔模型从产品的功能属性、实际价值、情感价值、产品个性、品牌精髓5个纬度逐一进行关键词的发散与收拢，帮助我们进一步清晰柠檬爱美品牌“模样”。

为了尽可能提炼出既符合产品理念又有用户共鸣，且引发互动的品牌理念。我们将金字塔中的关键词分别对应图形参考案例，面向业务方发起了第二轮调研，在调研讨论的过程中，我们不断完善聚焦概念，“爱美有度”这个概念方案也一步步浮出水面。

4. 方案设计

· 概念锁定

经过长达1个月的不断尝试，逐步明确概念如何转化成可执行方案。最终我们锁定在“爱美有度”，“度”这个兼具名词与动词属性，具有更大的想象空间和丰富的情感属性。不仅暗指百度医美垂类品牌，更传递的是平台价值观：内容有信度、服务有温度、科技有态度的涵义，天然带有积极的导向意义。

· 草图绘制

在草图绘制过程中，最大的挑战在于“柠檬”与“度”的图形诠释。首先我们需要一个不落入俗套的柠檬外形。其次“爱美有度”品牌概念如何通过图形元素能让用户感知，又能精准的传递“权威保障”信息。

手绘的方式简单快捷，可以很高效的对齐大部分的设计共识。期间大家发散了很多想法，尝试了很多方案。经过两轮手绘下来，主体定格在“手托举”的柠檬外形，虚形恰好是柠檬，建立品牌专属记忆点。造型饱满圆润，充满能量且呈向上趋势，象征求美者的美好希冀，也体现了“爱美有度”的设计理念。让受众能感受到品牌传递的权威、专业、信赖。

· 提案设计

总结各阶段结论，最终形成设计提案主线。采用视觉冲击力强的图片辅以文案，精准传递logo方案表达的设计概念，最终方案定稿。

写在最后

品牌升级不仅仅是换个logo那么简单，而是产品定位和策略发展落地中的重要一环。本次柠檬品牌logo设计，我们无时无刻都在思考如何更好地了解用户，贴近产品，传达理念。希望通过本次升级，用户能感受到柠檬爱美品牌为了更好的服务用户敢于突破，力求革新的决心和信心。

转载请注明：学UI网》爱美有度——柠檬爱美品牌LOGO升级

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

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

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

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