首页

2020 年值得关注的 9 个交互设计趋势

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在过去两个月,从国外的 Google I/O、Apple WWDC、Facebook 开发者大会,到国内的飞聊、QQ改版、豆瓣FM 6.0,可以看到很多关于交互设计上的趋势。

同时,我从日常的产品体验中,整理了一些思考内容,以下是对 2020 年交互设计趋势的展望。

模态展示

在 iOS 13 中,模态面板采用了新的卡片样式,它占据了屏幕 90% 的面积。模态面板拉起时,原有的页面会有一个纵深效果,以灰色状态显示,防止用户和它们发生交互。模态面板可以通过滑动操作下拉关闭,适用于单手操作,专为大屏服务。

在系统邮件、日历、通讯录、Apple Music、信息 Animoji 等自带应用中,模态面板得到了广泛应用。

△ Apple Music & 邮件

专注下半部分

夸克浏览器是专注下半部分做得最好的一个,夸克并没有像 Safari、Chrome 那样把搜索框放在顶部,而是将整合后的搜索栏放在了用户更容易操作的屏幕下半部分。

分层内容

分层内容是基于动作菜单,弹出分层内容。分层内容的展现形式可以减少页面跳转,让用户保持在最原始的环境中。并且主要操作交互位于界面下半部分,触手可及。

△ Snapchat & Keep

1. 悬停分层

在网易云音乐、即刻、飞聊等应用中,采用了悬停分层。顶部展示的是介绍性内容,随着页面下滑,介绍内容隐藏,同时功能栏将置顶悬停,展示的内容区域大大增加。

△ 网易云音乐 & 即刻

△ Broadcasting iOS App UI Exploration

连续性页面

连续性页面的转换效果可以很好记住产品路线,加强了页面的层级关系。同时,流畅的动画转换效果,带来了更连贯的用户体验。

App Store 和 Behance,以及最近发布的豆瓣 FM 6.0,都采用了这种方式。

△ App Store & Behance

全屏展示

很多App在引导评分样式上,都采用的是系统弹窗。在 Keep App 上,设计了一个全屏展示的评分提示。形式新颖,加上背景图的气氛,让人想去评分的意愿大大增加。

同样,Airbnb 的系统通知提示也是采用的全屏展示,这是一个趋势,值得我们去关注。

△ Airbnb 爱彼迎 & Keep

快捷验证

1. 苹果账号登录

近两年几乎所有的 App 都会推荐首先使用手机号+短信验证码的方式注册/登录,同时也会接入像微信、QQ、支付宝这样的三方登录。

在 WWDC 2019 上,苹果也给我们带来了 「使用苹果账号登录」,几乎所有的苹果设备都会登录 Apple ID。因此,我们可以在不久的将来,通过苹果账号,就可以直接登录所有的 App,是不是很方便?

2. 号码识别

网易易盾的号码识别,可以自动获取当前开启流量的 SIM 卡号码,一键点击即可完成注册、登录操作。减少手机号输入、短信验证码等待时间等传统步骤,提升关键环节转化率。

△ 网易易盾

语音交互

近年来,智能语音技术在很多场景得到了应用,微软的 Cortana,苹果的 Siri、谷歌的 Assistant。在引入深度学习后,语音助手可以在训练中越来越强,吐词更连贯。夸克的语音助手有本地天气、本周本月可视化数据、新闻热点、节日问候、冷知识等功能。

在5月的开发者大会上,谷歌展示了其人工智能与语音识别的 Live Relay 技术。其能够为不便应答电话的用户,提供基于实时语音/文字互转的通话支持。对于聋哑人来说,这绝对是一项实用的功能。

△ Google I/O 2019 Live Relay

事实上,Live Relay 也能帮助到一般人,例如当我们需要接听重要电话,但却无法离开当下所进行事项,Live Relay 在此时就能派上用场,透过输入文字的方式,接听重要来电。

最方便的是,Live Relay 还可整合即时的翻译功能,这在与外国人士沟通时起了很大的帮助作用,可说是另外一种「无障碍功能」。

AR增强现实

1. WANNA KICKS 通过AR技术「试鞋」

通过 AR 增强现实技术与智能手机相机的结合,帮助你看到 YEEZY BOOST 350 等运动鞋「穿」在自己脚上的效果,它甚至还能模拟出鞋子在光线不同环境下的各种效果。

2. 小程序AR+口红试色

昨天,首个支持AR动态试妆的小程序「阿玛尼美妆」同步更新上线。基于小程序基础能力和谷歌 TensorFlow 机器学习开源平台支持,欧莱雅集团开发了 AR 动态试妆能力。相比以前上传照片的试色方式,AR 动态试妆让试色更真实。

AR 使用在网页设计或应用程序领域,它能够自然地将虚拟与现实结合,带来身临其境的新体验。

多窗口预览

△ App Store & QQ

在 QQ 的版本中,列表页面长按消息,会弹出多窗口模式,消息可以来回切换,类似于 iOS 后台切换模式。在会话窗口长按任意地方,也会呼出多窗口模式。

总结

科技发展给设计产生的影响是巨大的,让我更深刻地认识到作为设计师的责任。这些设计趋势有意或无意地将帮助用户得到更好的产品体验。

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

B端产品设计的6大挑战

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

B端产品设计的6大挑战

翻译: alina Wong  审校:华姐  |  UXRen翻译组 #297 译文

 

在VWO工作初期,我遇到的许多情况促使我想弄明白:企业类应用(B2B,后文中统称为B端应用)真的和消费类应用(B2C)不一样吗?对于设计师和设计流程来说,这种区别有多重要?

这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在B端团队工作的设计师们。

 

什么是B端应用?

维基百科中的定义:B端应用是一种用来满足企业而非个人用户需求的计算机软件系统。

这是一些大家可能用过或者见过的B端应用。

在现代社会,大多数B端应用都是复杂的任务关键型应用,具有可拓展、分布式和模块化等特征。B端应用对大量复杂的数据进行展示、处理和存储,并利用这些数据实现对业务流程的支撑及其自动化。

B端工具可以帮助构件你的产品,从而帮助企业和员工更好地完成工作。

注:虽然B2B和B端应用在定义上略有不同,在目前的软件生态中,这些差别几乎无关紧要,所以本文将它们视为一类。

 

在设计方面,B2B与B2C有什么区别?

为B端设计并无特殊之处,优秀设计的一切准则,在这里都适用。不过,设计B2B产品和B2C产品,确实存在一些差别。

试想一下,汽车制造vs.商用飞机制造。它们都是非凡的工业设计,把人们从A点运输到B点。显而易见,它们有很多的不同之处,比如使用场景、制造时间、测试&安全规范、用户预期、购买以及所有权。所有这些不同之处都会影响设计及流程。

同样对于B2B应用来说,不同之处在于其独特挑战和应对方法。

 

六大设计挑战

声明:任何一款软件设计都会面临以下一些挑战,但为B端设计时,这些挑战更加突出。

1. 功能复杂

由于数据多态、可视化选项多、管理操作、多用户协作以及和其他软件集成等诸多因素,B2B应用的复杂度普遍高于B2C应用。为了满足一个需求而做出的一项设计决策,往往会影响其他许多需求,而其方式有时会难以预测。一项看似简单的功能添加,都要进行全面检查,考虑到各种极端情况。

Atlassian公司的Jira软件界面:功能复杂的软件案例。

解决方法:

解决复杂性的方法是什么?

当然是简化。不要将这误认为是简化界面,或者现下流行的极简UI。这是通过恰当的规划和流程达到的简化。无论项目周期多么紧张,都必须在设计开始之前投入时间思考,将收集到的需求和规范进行整理。实际上,这些是设计中非常重要的工作。

当你对设计方案确认无误时,会直接进入Sketch、Figma或者PS阶段,但这往往为时过早。抽点时间来厘清你将要设计的产品的背景和含义。通过研究和规划,找出所有的可能性,处理所有的极端情况。确保准备万无一失时,再进入界面设计阶段。

“如果我有60分钟来砍断一棵树,我会花40分钟先磨好斧子, 20分钟砍倒它。”——亚拉伯罕•林肯

恰当的规划和流程会在长期运行中展露优势,带来流畅无阻的产品体验。

 

2. 基于员工心理的设计

B端用户的心理和行为模式与B2C的用户的截然不同。B端用户除了要完成本职工作之外,还要兼顾在组织内的其他方面,如职业发展,职业学习,职业成功。为在职人士设计时,需要充分了解清楚他们的工作背景、流程、环境、期望、问题以及当前的解决方案。

如何做:

设计B端应用时,理解用户需求非常重要。不仅要了解产品相关的需求,还要了解用户工作和职业相关的需求。与最终用户深入交流,研究他们的领域,尝试用他们当前的方法,这些都非常有助于培养对用户的同理心。

此外,用户太过于习惯现有的工作流程,这导致他们很难想像自己真正想要什么。他们可能会告诉你功能和选项,但却无法提供产品创新之道。

用户可能认为自己想要的只是更多的功能。

B端产品设计团队的设计指导原则,是知道用户目前遇到的困难是什么,然后设计出方案来解决这些困难。一旦真正理解用户的长期目标是什么,设计师就可以有很多发挥的空间了。

“用户购买产品是希望变成更好的自己。”—— JTBD理论

与其关注用户说什么,不如关注他们实际做什么,并以此为创新的基点,构建精益原型,并与用户一起进行测试。

 

3. 降低软件切换成本

一般来说,B端用户习惯且满意现有的工作流程,并没有切换到另一种产品的需要。而且即便他们想换一个,也要层层审批。更不要说,现有数据的迁移对于公司和员工来说都是非常难的事情。所以同大众消费者应用不同,B端应用的切换成本显然要高得多。

解决方法:

说服企业换用你的软件的两大方法:

  1. 比竞品提供更多的功能。
  2. 重新定义现有工作流程,使其用户体验有明显的提升,更快,更好,更有效率。

第二点才是设计中真正闪光之处。生产效率、工作流程是企业最关注的事情。仔细研究它们现在的方案,找到需要提升的地方。考虑如何设计出更快的工作流程,如何提升效率并降低成本。在这几方面上创新,往往会带来可以说服企业作出改变的解决方案。

“衡量创新的唯一标准,就是看它是否改变了人们的行为”——Stewart Butterfield, Slack联合创始人

不断寻找机会,改变传统的方法,使之更有效,更。

 

4.  优先增加新功能

对于B端产品,新增功能几乎总是比提升现有功能的体验更优先。在产品启动时,通常会有专门的设计冲刺阶段。而一旦产品发布出去,用户需求就开始涌入进来。付费客户会不断要求增加新的功能,产品团队也制定繁忙的开发计划。在这种情况下,设计师尤其很难说服有关人士投入时间和资源来提升设计和用户体验。

避免方法:

尝试从这些相关人士的角度看待问题。他们经常认为,任何一段开发时间,无论是一周还是一个月,如果没有用来开发新功能就基本等于舍弃了潜在的收入。这时,让他们明白优化产品所带来的好处就很重要了,要让他们懂得优化远比增加新功能可以带来更多的收入。重点讲讲成功故事。直接和高管聊这件事,让他们接受这种观念。优化设计总是需要仔细分析痛点,检验新的想法,而这些都需要时间和创新。

“电灯不是通过不断优化蜡烛发明出来的。”—奥伦·哈拉里(Oren Harari)

一旦你获得了公司的信任,就要在有限的时间内取得一些小胜利,并且一直努力度量其影响。逐步建立起公司对设计团队的信心,继续尝试更大的改进方案。

让产品和开发团队成员承诺确保优秀的用户体验,并帮助他们主认识到这不仅仅是设计团队的任务。

 

5.体验的一致性

来源:B端用户体验行业报告 2017-2018

最近,一项对3000多名B端产品设计师的调查显示,对B端设计团队来说,最大的挑战是提高产品的用户体验一致性。不同于消费类应用,B2B产品通常有更长的产品周期且异步运行,很多时候都是分布式团队合作设计。

每一名设计师都面对着与其他团队类似的问题,很容易导致产品设计不一致,比如更改设计组件、更新样式,甚至像颜色这样的细节都会产生不同。这些问题随着团队的扩大或者产品的体量增加而变得更加严重。

解决方法:

许多公司开始建立设计规范来保持产品的一致性和可拓展性。设计规范包含可复用的组件集合、清晰的设计指导,可以帮助构建任何数量的产品。设计规范通常包括:

  • 设计指南(设计原则、范例、编辑指南)
  • 视觉元素(颜色、排版层级、图标等等)
  • UI组件(表格、按钮、页面样式)
  • 使用和维护方法

当B端设计团队被问到是否建立了设计规范时,约55%的团队回答是或正在创建中。这是很好的现象。需要指出的是,设计规范永远不会100%完成,它着眼于长期,会随着时间的推移不断更新。

“设计每个元素时都应该考虑到其是否易于制作和修复。” —Leo Fender

设计规范对于保证用户体验一致性具有里程碑意义。

以下是一些B端设计规范,可以给你一些灵感:Salesforce的Lightning设计规范, Intuit的Harmony设计规范。

 

6. 并非每一位设计师都喜欢B端产品设计

不少设计师在做过一段时间B端应用设计后,发现它无聊单调。许多来自咨询公司或者有B2C经验的设计师觉得B端设计缺乏激情和多样性。做那种酷炫的微交互和动画(就是会发在dribbble上那种)的机会并常有。这样,工作就变得乏味无趣,设计师们感受不到成就感,提不起劲来。

避免方法:

B端应用的用户体验旨在帮助用户更好地完成工作。设计一个迷人的界面来吸引用户,(尽管并无害处,却)总是在被排在低优先级。标准化的、可预知的、所见即所得的用户界面,最适合目标用户。

我们的目标是让用户发出“哇!”的感叹,不是因为绚丽的界面,而是因为产品能够帮助他地完成工作。

组建B端应用设计团队时,选择目的和动机一致的设计师最为关键。设计师的动机,应该大量来自于解决复杂的问题,看到自己的设计如何帮助用户完成他们的工作。

所以,在设计师加入团队之前,评估他们的想法并设定正确的期望是非常必要的。

 

B端设计的一般性建议

企业本身是在逐步发展的。B端应用不再是难用、无聊的产品,用户期望B端用户像消费类应用一样有着优秀的体验。他们喜欢漂亮的界面,不希望在使用前看说明文档。下一代技术,例如VR、AI和声音已经进入了我们的生活,也很快会应用到工作中。对B端应用来说,这令人兴奋,而设计师所能做的,则是无限的。

做B端应用设计的三个指导原则:

  1. 拥抱灵活性和模块化。
    设计任何东西的时候,都要考虑到它是会发展变化。不仅仅要为当前的需求定制设计组件,更要考虑它对未来需求的适应性和可扩展性。
  2. 建立条理和流程。
    优秀的合作,定期的用户调研,可执行的问题报告,有侧重点的设计迭代,这些往往都是我们所期待的,但却又难以每次都得以实现。最好建立一个可重复的流程,并在每一个周期都予以改进。
  3. 全局思考。
    时刻关注你的设计和添加会如何影响整个产品以及公司愿景。当你关注整体时,你设计出的产品,你所做的升级,增加的功能,都会自然而然地带来流畅一致的用户体验。

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

     

Material Design数据可视化指南

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

2019年6月18日Material Design更新了设计指南中数据可视化部分,这是谷歌数据可视化团队形成的一套全面的数据可视化指南, 涵盖了设计原则、图表分类、图表的选用、样式设计、交互设计、仪表板设计等方面。个人阅读后进行了翻译,希望能够分享给更多对数据可视化有兴趣的设计同学!


全文章节目录:

原则

类型

选择图表

样式

行为

仪表板




数据可视化

数据可视化就是用图形描绘信息。




原则

数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比,并用它来讲故事,以此来帮助用户做出决策。


数据可视化可以表达不同类型和规模的数据,包括从几个数据点到有大量变量的数据集。

Image title





类型

数据可视化可以以不同的形式表达。图表是表达数据的常用方式,因为它们能够展示和对比多种不同的数据。


图表类型的选择主要取决于两点:要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。


图表类型


1. 随时间变化

随时间变化的图表显示一段时间的数据,例如多个类别之间的趋势或比较。


常见用例包括:

股价表现、卫生统计、年表

Image title



2. 类别比较

类别比较图表是多个不同类别数据之间的比较。

常见用例包括:

不同国家的收入、热门场地时间、团队分配

Image title



3. 排名

排名图表显示项目在有序列表中的位置。

常见用例包括:

选举结果、性能统计

Image title



4. 占比

占比类图表显示了局部与整体的关系。

常见用例包括:

产品类别的综合收入、预算

Image title



5. 关联

关联类图表显示两个或以上变量之间的关系。

常见用例包括:

收入和预期寿命

Image title



6. 分布

分布类图表显示每个值在数据集中出现的频率。

常见用例包括:

人口分布、收入分布

Image title



7. 流程

流程类图表显示了多个状态之间的数据移动。

常见用例包括:

资金转移、投票计数和选举结果

Image title



8. 关系

关系图表显示多个项目之间的关系。

常见用例包括:

社交网络、词图

Image title






选择图表

面对多种类型的图表,以下指南提供了关于如何选择合适的图表见解。



显示随时间的变化

可以使用时间序列图表来表示随时间的变化,就是按时间顺序表示数据点的图表。表示随时间变化的图表包括:折线图,柱状图(条形图)和面积图。


Image title

*基线值是y轴上的起始值。



柱状图(条形图)和饼图

柱状图(条形图)和饼图都可用于显示比例,表示部分与总体的对比。

· 柱状图(条形图)使用共同的基线,通过条形长度表示数量

· 饼图使用圆的圆弧或角度表示整体的一部分


柱状图(条形图),折线图和堆叠面积图在显示随时间的变化方面比饼图更有效地。由于这三个图表都是使用相同的基线,因此可以更轻松地根据条形长度比较值的差异。

Image title



面积图

面积图有多种类型,包括堆叠面积图和层叠面积图:

· 堆叠面积图显示多个时间序列(在同一时间段内)堆叠在一起

· 层叠面积图显示多个时间序列(在同一时间段内)重叠在一起


层叠面积图建议不要使用超过两个时间序列,因为这样做会使数据模糊不清。取而代之,应当使用堆叠面积图来比较一个时间间隔内的多个值(横轴表示时间)。

Image title





样式

数据可视化使用自定义样式和形状,使数据更容易理解,以适合用户需求。


图表可以从以下方面进行优化:

· 图形元素

· 文字排版

· 图标

· 轴和标签

· 图例和注释



不同类型数据的样式设计

可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据(如温度,价格或速度)和定性数据(如类别,风味或表达式)。


这些图形属性包括:

· 形状

· 颜色

· 大小

· 面积

· 体积

· 长度

· 角度

· 位置

· 方向

· 密度



不同属性的表现

多个视觉处理方法可以综合应用于数据点的多个方面。例如,在条形图中,条形颜色可以表示类别,而条形长度可以表示值(如人口数量)。

Image title

形状可用于表示定性数据。在此图表中,每个类别由特定形状(圆形,正方形和三角形)表示,这样可以在一张图表中轻松实现特定范围的比较,同时也可以进行类别之间比较。



1. 形状

图表可以运用形状,以多种方式展示数据。形状的设计可以是有趣的、曲线的,或者和高保真的等等。


形状程度

图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状(在触摸大小和功能可见性方面)展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

Image title



2. 颜色

颜色可用于以四种主要方式区分图表数据:

· 区分类别

· 表示数量

· 突出特定数据

· 表示含义


颜色区分类别

Image title

例:圆环图中,颜色用于表示类别。



颜色表示数量

Image title

例:地图中,颜色用于表示数据值。



颜色突出数据

Image title

例:散点图中,颜色用于突出特定数据。



重点区域

在不滥用的情况下,颜色可以突出焦点区域。不建议大量使用高亮颜色,因为它们会分散用户注意力,影响用户的专注力。

Image title



颜色表示含义

Image title



无障碍

为了适应看不到颜色差异的用户,您可以使用其他方法来强调数据,例如高对比度着色,形状或纹理。

将文本标签应用于数据还有助于说明其含义,同时消除对图例的需求。



3. 线

图表中的线可以表示数据的特性,例如层次结构,突出和比较。线条可以有多种不同的样式,例如点划线或不同的不透明度。


线可以应用于特定元素,包括:

· 注释

· 预测元素

· 比较工具

· 可靠区间

· 异常


Image title



4. 文字排版

文本可用于不同的图表元素,包括:

· 图表标题

· 数据标签

· 轴标签

· 图例



图表标题通常是具有最高层次结构的文本,轴标签和图例具有级别的层次结构。

Image title



字重

标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制,使用有限的字体样式。

Image title



5. 图标

图标可以表示图表中不同类型的数据,并提高图表的整体可用性。


图标可用于:

· 分类数据:用于区分组或类别

· UI控件和操作:例如筛选,缩放,保存和下载

· 状态:例如错误,空状态,完成状态和危险


在图表中使用图标时,建议使用通用可识别符号,尤其是在表示操作或状态时,例如:保存,下载,完成,错误和危险。

Image title




6. 坐标轴

一个或多个坐标轴显示数据的比例和范围。例如,折线图沿水平和垂直坐标轴显示一系列值。

Image title



柱状图(条形图)基线

柱状图(条形图)应从为零的基线(y轴上的起始值)开始。从不为零的基线开始可能导致数据被错误地理解。

Image title



坐标轴标签

标签的设计应体现图表中最重要的数据。应根据需要使用标签,并在UI中保持一致性。他们的出现不应该妨碍查看图表。

Image title



文字方向

为便于阅读,文本标签应水平放置在图表上。


文字标签不应该:

· 旋转

· 垂直堆叠

Image title



7. 图例和注释

图例和注释描述了图表的信息。注释应突出显示数据点,数据异常值和任何值得注意的内容。

Image title

1. 注释

2. 图例


在PC端,建议在图表下方放置图例。在移动端,将图例放在图表上方,以便在交互过程中保持可见。



标签和图例

在简单图表中,可以使用直接标签。在密集的图表(或更大的图表组的一部分)中,可以用图例。

Image title



8. 小显示屏

可穿戴设备(或其他小屏幕)上显示的图表应该是移动端或PC端图表的简化版本。

Image title





行为

图表具有交互模式,使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。


以下推荐的交互模式,样式和效果(如触觉反馈)可以提高用户对图表数据的理解:

渐进式披露

提供了按需求逐步展示详细信息的明确途径。

直接操作

允许用户直接对UI元素进行操作,最大限度地减少屏幕上所需的操作数量,包括:缩放和平移,分页和数据控件。

改变视角

使一种设计可以适用于不同的用户和数据类型,例如数据控件和动效。


1. 渐进式披露

使用渐进式披露显示图表详细信息,允许用户根据需要查看特定数据点。

Image title


2. 缩放和平移

缩放和平移是常用的图表交互,会影响用户对图表数据深入的研究和探索。


缩放

缩放改变界面显示的远近。设备类型决定了如何执行缩放。

· 在PC端,通过单击、拖动或滚动进行缩放

· 在移动端,通过捏合进行缩放


当缩放不是主要操作时,可以通过单击和拖动(在PC端)或双击(在移动端)来实现。


平移

平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如,如果图表的一个维度比另一个维度更重要,则平移的方向可以仅限于该维度。

· 平移通常与缩放功能同时使用。

· 在移动端,平移通常通过手势实现,例如单指滑动。

Image title



3. 分页

在移动端,分页是一种常见模式,让用户通过向右或向左滑动来查看上一个或下一个图表。

Image title

在移动端,用户可以向右滑动以查看前一天。



4. 数据控制

可以使用切换控件,选项卡和下拉菜单筛选或改变数据。

用户调节控件时,这些控件还可以显示指标。

Image title

切换控件,选项卡和下拉菜单可以更改或筛选数据。



5. 动效

动效可以强化数据之间的联系,提升交互体验。应该有目的地使用运动(不是装饰性地),表达不同状态和空间之间的联系。

运动应该是合理,平稳,反应灵敏,不会妨碍用户的使用。

Image title在此示例中,图表数据从按天显示动态切换到按周显示。转换期间不会显示所选日期范围之外的数据,从而降低了复杂性。



Image title动画能够体现两个不同图表的相关性。



6. 空状态

图表数据为空的情况下,可以提供相关数据的预期。

在合适的情况下,可以展示角色动画创造愉悦和鼓励。



Image title有特色的动画提升了空状态的效果。







仪表板

在称为仪表板的UI界面中,数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。



仪表板设计

仪表板的目的应在其布局,样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据,它的设计应该适合它的使用方式。


仪表板应该:

· 突出最重要信息(使用布局)

· 根据信息层级确定信息的焦点(使用颜色,位置,大小和视觉权重)


Image title

应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板,考虑了以下用户问题:

1. 需要注意的问题
2. 发生问题的时间

3.发生问题的位置

4.受问题影响的其他变量



1. 分析类仪表板

分析仪类表板让用户能够研究多组数据并发现趋势。通常,这些仪表板包含能够深入洞察数据的复杂图表。


用例包括:

· 随时间变化的突出趋势

· 回答“为什么”和“假设”的问题

· 预测

· 创建有深度的报告


分析类仪表板示例:

· 跟踪广告活动的收效

· 跟踪产品在其整个生命周期中的销售额和收入

· 随时间变化的城市人口趋势

· 跟踪随时间变化气候数据


Image title

分析类仪表板显示气候数据



2. 操作类仪表板

操作类仪表板旨在回答一组预设的问题。它们通常用于完成与监控相关的任务。

在大多数情况下,这些类型的仪表板具有一系列关于当前信息的简单图表。


用例包括:

· 跟踪目标的当前进度

· 实时跟踪系统性能


操作类仪表板示例:

· 跟踪呼叫中心的活动,例如呼叫音量,等待时间,呼叫长度或呼叫类型

· 监控在云端应用程序的运行状况

· 显示股市情况

· 监控赛车上的遥测数据


Image title

操作类仪表板显示设备存储指标



3. 演示类仪表板

演示类仪表板是为感兴趣的主题提供的展示视图。

这些仪表板通常包括一些小图表或数据卡片,用动态标题描述每个图表的趋势和见解。


用例包括:

· 提供关键绩效指标的总览

· 创建高级执行情况的概要


演示类仪表板示例:

· 提供投资账户绩效的总览

· 提供产品销售和市场份额数据的概要


Image title演示类仪表板显示网站使用数据

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

UI 工作流程指南:需求分析

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优设独家专题为你从零开始梳理出 UI 工作流程,适合新手阅读学习。

本篇工作流程第一节:需求分析。

UI 设计工作,包括 APP 设计、网页设计、小程序设计等方面。而一个产品完整的 UI 设计流程,是指拿到一个新的项目需求后,从设计思考开始,产品前期分析,设计产品,设计评审,用户测试,直至产品上线。

我们的工作流程如下:

以上的流程都是与设计师密切相关的内容,我们的关注点不能只有视觉效果,孤立的设计容易脱离产品,反复修改,因此前期分析与后期支持都值得我们重视。

产品立项后的第一阶段是需求分析阶段,当我们拿到一个新的需求时,首先要了解的就是产品的需求是什么,了解市场背景、产品定位、概念,客户的需求是什么。

一般来说,我们接到的需求分为三类:全新产品、现有产品新增功能、产品改版。

需求文档类型

前期分析阶段中,需求方主要是与产品经理进行沟通,产出文档有三种:

  • BRD文档(Business Requirement Document):商业需求文档,基于商业目标或价值所描述的产品需求内容文档(报告)。
  • MRD文档(Market Requirement Document):市场需求文档,该文档在产品项目过程中属于「过程性」文档,由产品经理或者市场经理编写的一个产品说明需求的文档。
  • PRD文档(Product Requirement Document):产品需求文档是将商业需求文档(BRD)和市场需求文档(MRD)用更加专业的语言进行描述。

分析类网站推荐

产品分析纬度

有了数据参考来源后,我们就能从五个纬度分析产品。

1. 产品分析

市场背景、产品业务、现有产品各项数据。

2. 用户画像

  • 显性画像:即用户群体的可视化的特征描述。如目标用户的年龄、性别、职业、地域、兴趣爱好等特征。
  • 隐性画像:用户内在的深层次的特征描述。包含了用户的产品使用目的、用户偏好、用户需求、产品的使用场景、产品的使用频次等。

3. 需求确认

产品需求主要是为了满足用户或企业价值,所以一定要确认重要且紧要的需求内容是什么,什么功能和内容暂时不需要做,什么功能和内容放在后期做,因此设计时也要考虑产品未来的扩展性。

4. 逻辑流程

  • 逻辑流程,整个产品的逻辑、内部流程;
  • 用户路径,描述用户在产品内部的路径。

5. 竞品分析

和国内外同类产品进行比较分析,知己知彼。

竞品选择,从两个方向出发:

  • 从产品类型出发:比如我们需要设计的产品是财务类,选择的方向也是同类财务类产品;
  • 从产品功能出发:比如说财务产品中有着支付购买的功能板块,选择的竞品也包括了购物、生活类产品。

相关教程:《视觉设计师如何做竞品分析?来看这份超全面的指南!》

最后,比起产品经理来说,设计师在这个阶段能获三个信息:

  • 自己需要完成什么;
  • 要做到什么程度;
  • 扩展性的考虑,可以在设计时预留位置。

文档整理工具

语雀:https://www.yuque.com

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

UI 工作流程指南:需求分析

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优设独家专题为你从零开始梳理出 UI 工作流程,适合新手阅读学习。


本篇工作流程第一节:需求分析。

UI 设计工作,包括 APP 设计、网页设计、小程序设计等方面。而一个产品完整的 UI 设计流程,是指拿到一个新的项目需求后,从设计思考开始,产品前期分析,设计产品,设计评审,用户测试,直至产品上线。

我们的工作流程如下:

以上的流程都是与设计师密切相关的内容,我们的关注点不能只有视觉效果,孤立的设计容易脱离产品,反复修改,因此前期分析与后期支持都值得我们重视。

产品立项后的第一阶段是需求分析阶段,当我们拿到一个新的需求时,首先要了解的就是产品的需求是什么,了解市场背景、产品定位、概念,客户的需求是什么。

一般来说,我们接到的需求分为三类:全新产品、现有产品新增功能、产品改版。

需求文档类型

前期分析阶段中,需求方主要是与产品经理进行沟通,产出文档有三种:

  • BRD文档(Business Requirement Document):商业需求文档,基于商业目标或价值所描述的产品需求内容文档(报告)。
  • MRD文档(Market Requirement Document):市场需求文档,该文档在产品项目过程中属于「过程性」文档,由产品经理或者市场经理编写的一个产品说明需求的文档。
  • PRD文档(Product Requirement Document):产品需求文档是将商业需求文档(BRD)和市场需求文档(MRD)用更加专业的语言进行描述。

分析类网站推荐

产品分析纬度

有了数据参考来源后,我们就能从五个纬度分析产品。

1. 产品分析

市场背景、产品业务、现有产品各项数据。

2. 用户画像

  • 显性画像:即用户群体的可视化的特征描述。如目标用户的年龄、性别、职业、地域、兴趣爱好等特征。
  • 隐性画像:用户内在的深层次的特征描述。包含了用户的产品使用目的、用户偏好、用户需求、产品的使用场景、产品的使用频次等。

3. 需求确认

产品需求主要是为了满足用户或企业价值,所以一定要确认重要且紧要的需求内容是什么,什么功能和内容暂时不需要做,什么功能和内容放在后期做,因此设计时也要考虑产品未来的扩展性。

4. 逻辑流程

  • 逻辑流程,整个产品的逻辑、内部流程;
  • 用户路径,描述用户在产品内部的路径。

5. 竞品分析

和国内外同类产品进行比较分析,知己知彼。

竞品选择,从两个方向出发:

  • 从产品类型出发:比如我们需要设计的产品是财务类,选择的方向也是同类财务类产品;
  • 从产品功能出发:比如说财务产品中有着支付购买的功能板块,选择的竞品也包括了购物、生活类产品。

相关教程:《视觉设计师如何做竞品分析?来看这份超全面的指南!》

最后,比起产品经理来说,设计师在这个阶段能获三个信息:

  • 自己需要完成什么;
  • 要做到什么程度;
  • 扩展性的考虑,可以在设计时预留位置。

文档整理工具

语雀:https://www.yuque.com


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


产品设计之「取消按钮」的使用详解 | 细节分析

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

通过对「取消按钮」的分析,指导各位正确的进行对于「按钮」的设计。


按钮,无论是在 Web 还是 App 上都被广泛地使用,而很少有设计师会注意到按钮当中的细节,导致在设计过程中出现一些低级的错误,使得用户在完成任务的过程中产生阻碍,无法顺利达成目的。


在许多优秀的产品中,关于按钮的设计已经有了一套相应的规范去执行。作为设计师,应该总结这些规范,并产出一套适用于自家产品的设计规则。这也是我写「按钮规范」系列文章的目的。


今天主要先与各位聊聊「取消按钮」的设计思路。


关于「取消」,大多数人对其理解还停留在 PC 端,认为「取消」的目的就是让用户停止操作上的流程。但时至今日,「取消按钮」的设计已经有许多解法与思路,如果不仔细研究与分析,可能会忽略一些用户行为上的细节。


所以我们从下面三个大点来聊聊「取消按钮」的设计:

  1. 按钮中的「召唤行为」(理清按钮设计的概念)

  2. 其背后的控制权(关于按钮的权重信息)

  3. 「取消按钮」的正确解法(重点)



按钮中的「召唤行为」


通常,我们在产品中会为了达成某种指标,需要在界面上引导用户去完成我们希望其完成的操作。且这类操作是可以达成某种目的的,我们把这类操作称为「召唤行为」,即从元素的角度引导用户完成任务。


这类「召唤行为」最常出现的,是在按钮设计的过程中。


用户如何将元素理解为按钮?就是通过对形状和颜色的控制,使该元素看起来像一个按钮。



它唯一的作用就是让用户点击,并且是主动让用户点击

我们经常在各类设计中见到这样的按钮设计,或许还有更多样式,如:



它们的目的一致,都是召唤用户进行点击,至于类型的选择一般根据功能界面的上下文情况进行判断。


其重要程度也是以此顺序排列:凸起 > 扁平 > 边框 > 文本。


这类设计的结果就是:无需让用户思考要点哪里,而是直接判断下一步是否进行。帮助用户简化一个思考点。


注:因为判断是否进行的操作还取决于功能本身以及文案的提示,与我们今天要聊的不是一回事。所以我们跳过这块,直接聊「召唤行为」与「取消按钮」的关系。


这段内容各位只要记住:按钮的行进与回退,基本遵循「召唤行为」的思路来设计。


这个概念知道了,我们就可以对后面的内容继续进行拆解了。



背后的控制权


接下来我们从多个角度来挖一下「取消按钮」的设计,分析其不同地位。


a. 安全性后退


「取消」在多数情况下,意为安全性地后退,并将界面恢复到原有的内容上,不对界面与功能本身造成破坏,防止对系统进行不必要地更改的「安全措施」。


所以正常来说,「取消按钮」不是「召唤行为」。以至于通常在设计上会被弱化,以表示该按钮在功能的流程中,不是主要的,且是提供给用户作为回退余地的操作。


如:



在这张图里,「登录」是「召唤行为」,所以突出显示。根据风格定义,用了扁平按钮。而取消在这个场景里属于「安全性后退」的操作,于是将其弱化。


这是多数产品采用的设计方式。


比如美团的这个页面:



产品希望用户登录,就会强化「登录」行为的按钮,弱化「回退」行为的按钮。


同样,我们在微信朋友圈的设计里也能见到这样的设计:



我们总是希望用户持续操作下去,但也要给用户提供回退的行为,所以在这些设计中,「取消按钮」会被弱化,「行进按钮」会被强化,因为「取消按钮」在这里不是产品人员期望的「召唤行为」。


这是一直以来的设计共识,但如今也发生了些许变化。「取消按钮」也开始具备「召唤行为」的属性。


b. 强化「取消按钮」


当我们不希望用户退出某个界面,或停止某个流程时,往往会选择将「取消按钮」强化。


如:



或:



通过对字体的加粗,以暗示用户不要轻易退出。在这个流程里,「取消按钮」具备了「召唤行为」属性。


也有产品通过改变「取消按钮」的文案,让其具备「召唤行为」的属性,使得用户在此过程中轻易不要退出该流程:



这里的「继续选座」就是「取消」,因为这里的「取消」成了「召唤行为」,所以通过改变文案的方式,确保用户留下来继续进行流程中的任务。


但是不可取的是,这里的「返回」反而给了用户一种需要思考的压力。返回?是留在这里,还是退出去?思考几秒后,反应过来,是退出去。这样的文案与只有在看到「继续选座」后进行对比,才能反应过来具体是什么意思,除非是用户具备操作习惯,知道「右边」是「行进」操作,才能很快理解。(当然还有个问题,我们在第三各模块来说明)


但是多数用户还是得思考一下,所以要改,最好两者文案都能改了,否则思考的「停顿」会让用户产生厌恶感。


且在一些产品界面里,为了避免用户在流程中终止行为,甚至会转移「取消」与「行进」两者的位置,如:



之前截图了某个产品的界面,写文这天发现已经改回来,这里就没放了。


各位谨记,最好不要这样进行设计,因为用户在 App 的操作上已经习惯左边取消,右边行进,调换位置虽然能暂时解决用户的退出行为,但容易产生误操作,与用户的期望不同,导致在产品体验上会被用户排斥。


所以到这里,先给一个结论,即在 App 的设计上,行进操作在右,回退操作在左,召唤属性根据场景对按钮做突出处理。


但是「取消按钮」真的应该具备召唤属性么?不着急,我们第三模块再细聊。下面我们先聊聊 Web 与 App 的之间的差异。


c. Web 与 App 的位置差异


我们现在见到越来越多的 Web 端产品,也开始遵循 App 产品的设计,把「取消按钮」放在左边,「召唤行为」按钮放在右边。


但在早期,Web 的「取消按钮」基本是放在右边,原因是鼠标的移动路径是根据眼动规则来,我们的视线会首先与文案聚焦到「召唤行为」的按钮上,也就是左边,这时候鼠标轻而易举地随之而来。


而手指行为的操作,会以右为前进导向,且右手手势因为便捷性,也会以右为确认操作。否则单手持机,且行进路径长的话,用户想进行确认操作会相对比较吃力。



这就是 Web 与 App 在按钮位置上的主要区别。


那会有同学问到说 Web 的「取消」到底是放在左边还是右边?这里我说点自己的想法。


如果根据眼动规则与鼠标的操作模式来说,Web 「取消按钮」当然是放在右边更为合适。但如今人们已经习惯了移动产品的「右行进,左取消」属性,且在界面上的视觉终点一般是在右边,能引导用户进行召唤行为。


但这不具备指导性原则,如果要拆开说,里面还有很多说法。


比如 windows 和 macOS 的设计规范里「取消按钮」的位置完全是相反的。win 的取消在右,macOS 的取消在左。



两套体系的按钮位置相互矛盾。这件事本身也说明,只要你在你的 Web 产品里规范好自己的设计体系,就没有对错之分。不要一会儿这个「取消」在左边,一会儿那个「取消」又在右边,给用户造成认知障碍即可。


但是!我更推崇 macOS 的设计规范。原因在于成熟度与一致性。


主观因素:众所周知,苹果是更擅长做设计的公司,体验过 Mac 的朋友应该能理解我说的这句话。一般来说,我只听过从 Win 切换到 Mac 的,没有说从 Mac 切换到 Win 的,除了少部分因为工作需求需要同步使用的。


客观因素:移动产品的普及,已经有相当成熟的设计体系支持行进按钮右侧化设计,统一 Web 或 PC 产品只会让用户的操作行为更方便。


这就是我本小节想聊的,关于 Web 与 App 按钮设计的差异。



「取消按钮」的正确解法


我相信,只要是平时稍微有认真观察的同学,都能知道我上述聊的内容。我个人也不认为这些内容具备任何需要总结的价值。但是如果不写出来,就没办法说明我接下来要聊的内容,也是我这篇文章的重点部分。


通过上述内容,我以不同类型的按钮案例来解释「取消按钮」的控制权。各位可以看出,即使是不同类型的「取消按钮」,在权重上的道理也都是一样的。


但我上面举的所有产品功能的例子,都不是最佳设计方案,包括微信。


那如何设计才是最佳方式呢?取消按钮真的具备召唤行为?


a. 界面层与弹框层


其实严谨点来说,界面层的「取消按钮」与弹框层的「取消按钮」的意义是不同的。


虽然都是安全性后退,但是前者多了一层含义:放弃属性。


还是微信朋友圈的界面:



这里的「取消按钮」有两个状态,一是用户刚点进来,无任何操作,点击取消,解散该页面;二是进来之后,附带操作行为,这时候点击取消,不仅仅是解散当前页面,还包括「放弃当前编辑的状态」。


所以会弹出第二层弹窗:



这时候无论点击「保留」还是「不保留」都是取消,退出当前编辑页面,不对系统产生变更行为,但都属于放弃了当前操作。

无非就是微信通过加粗「保留」来告诉用户,这里的召唤行为是它而已。


所以这层「取消」的含义,不仅仅是取消,还多了一步是否把你放弃的内容保留下来的逻辑。


因此在这层含义上,「取消按钮」也需要特殊处理。


如果说微信这里的「取消按钮」在设计上没有突出其特殊性,那 Twitter 同样的例子,就比微信高明很多:



同样是发布行为,Twitter 在「取消按钮」上选用了品牌色。因为在其编辑状态下点击取消,会出现与微信同样的情况:




而 Twitter 的高明之处不仅仅在其对于「取消按钮」的样式处理,还在于其对是否「保留」做了明确的设计区分:微信的保留等于 Twitter 的保存草稿,不保留等于删除。而在通用型设计规范里,删除内容在样式上应该区别于发布以及取消。


更甚者是,其弹出的这个弹框中,还保留了真正意义上的「取消」,即解散行为。在 Twitter 的这个设计上,两个取消虽然都叫取消,但是通过颜色进行区分,来表示它们之间在逻辑上的差异,这才是我说的高明之处 —— 对每个按钮的处理都恰到好处。


类似的还有微博,但是微博对于「取消按钮」的类型差异没有做出区分,原因在于它为了弱化界面层的取消,与弹框层的取消样式保持了一致。



虽然没什么太大问题,但从严格的逻辑上来说,这两者取消是存在歧义的。只是用户已经习惯且理解了,所以没要造成使用的负担。


微信的弹框虽然避免了这层歧义,但在操作上还是不够直观,我每次发微信朋友圈,点取消弹出「保留」与「不保留」我都要停顿一下谨慎地进行选择,生怕自己点错。


当然,这里面还有关于颜色的说法。


这时候再对比 Twitter 的界面就能看出设计师之间的差距了。


b. 弹框层「取消」颜色的差异


上面提到的许多例子中,还存在一个类似的问题:它们大多选用 iOS 自带的弹框直接做为操作对象。


我始终觉得在 iOS 提供的弹框中,两个操作的按钮颜色保持一致是不对的。


粗细有时候很难被直观感受,而颜色可以在第一时间被感知。


比如前面提到的这个案例:



理想情况下,即使用户知道右边是行进,左边是取消,但弹出这个弹框的时候,不免还是需要再次阅读一遍进行确认。


但如果改个颜色,好像就更好理解(当然文案也是问题,但优先级弱于颜色),毕竟弹框也是设计的一部分:



需要注意的是,用户既然已经选择取消,就尽量明确的告知用户,不要为了留存而留存,以至于模糊化该弹窗的选择结果。

所以召唤行为,并不是强迫用户去做,而是遵循用户的「旨意」去提供选择。这里的「返回」才是真正的召唤行为,而「取消」并不具备召唤属性。硬生生的给「取消」附上召唤属性,只会让用户在操作时摸不着头脑。


包括下图,我常常因为在使用 App 时,弹出这样的弹框,而不能在第一时间进行正确的点击,选择退出当前的 App。



这样例子还有很多。


但是我觉得做得好的,应该是这样的:



或:



这就是刻板印象造成的结果。我们应该学会适当地使用控件,并根据自己的产品对其进行优化。而不是一味跟风。


综上所述:界面层的取消,为了表示其作用性的不同,且界面元素众多,突出颜色是没问题的;但弹框层的取消与确认在颜色上没做区分,直接用不太明显的粗细效果让用户聚焦于这两个内容的选择上,其实是不友好的设计。


如果对 iOS 设计规范有足够的了解的同学就能知道:它们在弹框控件上给出的两个选择都不是真正意义上的召唤行为按钮,只是常规内容,且更适用于产品开发,而不是设计指导。


如果你仔细观察 macOS 的设计,就能发现他们为具备召唤行为的按钮位置与颜色都做了特殊处理,并不是简单的同色系,或用粗细表示。如图:



虽然用 macOS 来反驳 iOS 似乎不太合理,但我只是想说明在设计结果上,我们应该有自己的思考。


就这个问题,我在 Twitter 上咨询了前 Apple,后创办了 UXM 的产品设计师 Anthony。原因是,他曾经也就「取消按钮」的颜色提出过一些个人看法。


在我说了这些内容之后,他跟我说的第一句话是:

Hi Dai — While Apple is very good at design, they are not perfect.(Apple 非常擅长设计,但它们并不完美。) 

接着他继续说道:你这套理论非常棒,所以你完全可以按它去给自己的产品构建一套设计规范,并不一定要遵循 Apple。


借着这个机会,我还跟他聊了许多其他内容。而这件事本身再一次验证了我的想法:越牛逼的人越谦虚,且平易近人。


哦,不是,跑题了,应该是:不存在完美的设计规范,设计师在成长过程中并不一定要循规蹈矩,受到规则的限制,认为设计就该如此。而是学会独立思考,突破屏障,去挖掘更深层次的内容。


看完这篇文章,再去翻一翻 Google Material Design Guidelines,就会有一种「哇哦!原来如此!」的感触了。



小结


所以我这篇文章的内容结论是:

  1. 位置固定,左回退,右行进;

  2. 颜色区分,左浅色,右深色;

  3. 召唤行为不是用户想做的事,而是我们应该要让用户做的事,但不是强迫,所以正常情况下,「取消按钮」通常不具备召唤属性。


可能有人会觉得,这么一个小问题,不至于用这么长一篇文章来说明,不过人么,就是存在这样那样的区别。我认为需要就可以了。


本来这篇文章还有一段关于「手势按钮尺寸」的内容,不过到目前为止,文章内容太长了,所以我暂时去掉了,会在之后的文章里分享给大家。


当然,到此为止,我聊的内容基本适用于通用场景,且适用于大部分的产品设计,但在一些特殊场景下的按钮位置、颜色,也会有不同设计方式,这就要根据具体问题来具体分析。


我这里只是把「取消按钮」的设计差异、细节提供给大家,以便帮助各位在工作中有更深入的思考,而不是想当然的说就是放左边或右边,或者就应该是什么颜色等等。包括对待其他内容也一样。

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


FY品牌官网/移动端视觉设计

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Fucking Young(简称 FY) 是一家专注于男性半球的年轻美学,我们自由使用和支配模特及艺术家合作,从而帮助自己与合作方达到合理的业务需求,建立一个拥有创造力的社区,赞助和发布这些惊艳的作品在我们的官网甚至手机产品上。

带来的作品有FY品牌官网与移动端设计,展示部分界面与交互动效,Gif输出存在色差,实际情况以高保真视觉界面为准。

FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计FY品牌官网/移动端视觉设计

文章来源:UI中国

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

Tab Bar 图标动效设计类型总结

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Tab bar 作为整个 APP 的第一触点,给用户传递的理念及信息在整个 APP 中具有不可替代的重要性。我们的第一感受是粗糙或是精致,都会通过这个简单的操作切换而感知。因此 tab bar 的设计,往往也是检验整个 APP 设计是否精致的标准。

Tab bar 设计中,有一个很重要但却常常会被设计师们遗漏的关键点──tab 切换时的 「图标动画设计」。如这些 APP 的底部 tab 设计都使用了这一种方式(以下视频):

Tab bars图标动画的作用

精彩的图标动画,对整体的设计具有画龙点睛的作用,降低 tab 切换时的枯燥感,提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。

1. 动静对比

动态的设计丰富了图标更多可能性的表达,结合不同的动态效果表达出不同的情绪或情感。而除了情感的表达之外,最基础的作用在于动态比静态更加吸引眼球,增加视觉关注度,因此在切换 tab 时具有更强的视觉冲击力。

2. 柔和与生硬

缓动的动效过渡,相比于无动效的设计,在 tab 切换时整体的视觉感受会更加柔和、轻量。过渡直接的反馈,容易造成生硬而不具美感。

3. 趣味的表达

由于动效的加入,我们在设计 tab 切换时会变得更加多元化,而不是单纯的设计一个动作的反馈。在过渡的时间差中,可以进行很多趣味的表达。

3. 情绪代入

图标结合表情的设计,运用动效的设计,让整体的情绪感受更加直观。如下图案例,默认态与选中态通过前后的差异对比,点击后出现的表情惊喜,具有不一样的情绪变化。

Tab bar图标动画的基础类型

动画的设计是多样化的,Tab bar 图标动画的类型实际上并没有明确的划分,这里主要列举的是自己在日常浏览设计网站时的收集,以及个人认为比较常见的一些类型。我们可以基于这些常见类型的设计,对我们的设计进行再升华,从而提高整体设计的质感和趣味。

1. 缩放动画

点击后通过一定的比例 「缩放」 反馈,突出 tab 之前的变化,从而强化了 tab 操作的感知,提升对于操作区域的视觉聚焦。结合不同的缩放效果,可以呈现出不同的视觉感知,缩放动画大致分为线性和弹性两种类型。

线性缩放

图标在放大或缩小的过程中,使用了匀速的动画效果,整体动画一步到位、干净利落。整体视觉感知较为柔和。

弹性缩放

带有弹性缩放的 tab 反馈,让整体的设计更加具有趣味性,相比线性缩放也更有视觉冲击力。图标的运动规则:先从 0 放大到最大(数值根据实际情况设定),然后再回弹至正常大小。

2. 透明度自然过渡

让 tab 切换之间的过渡更加自然、柔和。相比于纯静态切换只多了一层透明度变化,但却具有完全不一样的视觉感受。

3. 位移

位移出现的图标会产生一定的速度感,但需要控制位移的速度,过快容易忽略中间的运动轨迹,而影响自然过渡的效果。

4. 抖动

通过图标的左右、上下快速位移或旋转形成,整体的动画效果节奏较快,具有一定的速度感。情绪表达上较为俏皮。

左右抖动

点击后,图标反馈进行上下快速位移。建议来回位移次数不宜太多,控制在 1-2 次左右,次数太多容易显得拖沓。

跳动的图标

点击切换后,图标从底部弹起再回到初始位置,整体视觉感受具有跳动的韵律感。

晃动的图标

旋转抖动的图标比上下或左右会更加具有趣味感。设定图标的中心点或角点为旋转轴,通过来回晃动而形成的效果。

5. 填充

切换时,默认 tab 由线性向面性的转变。填充类型的动画效果整体简单、直接,直观地表达出图标切换前后的对应关系。关键点在于处理好线性与面性图标的细节转换。

中心填充

使用某种几何图形(可以是圆形或其他)通过发散放大的设计方式,结合一定的节奏韵律扩展至填满整个图标。

扫描填充

动画效果从图标的一侧,通过划动变化至填满。

6. 画线-线性轨迹

以线性图标或线面图标中的线运动为主,在设计整套图标时,运动轨迹需要保持统一(线的初始与结束的位置/方向等)。轨迹不一致,容易导致图标的一致性被破坏。

局部细节画线

选择图标的关键细节或图标的特征进行画线设计,增强图标的特征细节,提高图标的记忆点。

整体画线

与局部细节画线基本一致,差别的点在于表达了不同的视觉感受。整体画线从视觉感受上会相对更加饱满。但需要根据图标的复杂程度而定,图标过渡复杂,可能容易造成拖沓的动画效果。

7. 结合容器

结合不同的几何形作为选中图标的当前态的背景,在背景上设计出现的动画效果。既强化了选中当前态,整体的 tab 切换的一致性也较高。

8. 元素介质

设计上结合某种图形元素作为当前选中态,在切换时通过元素的位移、跳动等方式来达到 tab 切换的动画效果。

Tab图标动画的组合形

除了以上单种类型的动画方式外,还可以尝试多种方式结合。通过不同的方式结合可以产生出更多的可能性,让你的设计更加具有创意和打破常规。

1. 填充+画线

2. 填充+抖动

3. 弹性缩放+填充

4. 元素介质+抖动

5. 位移+透明度

更多案例(来自dribbble)

总结

tab bar 的图标动画最大的作用在于解决切换时的枯燥与单调,我们在设计时除了单纯追求动画的变化及多样性之外,更多需要思考的是什么样的动画更符合我们的设计。

本文的主旨是分享自己日常看到的一些动画效果,以及对收集的内容进行的分析。实际的动画样式或者效果肯定远远不只这些,我们可以通过基础的方法再结合自己的创意发挥出更多满足自我设计的表达方式。

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

|学会版式的N个Tips|—线要怎样用,才能让你的设计更加分

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

线往往会被设计师忽略,或许对线的理解有局限性,因而不常使用。那么线要怎样用才能让设计更加分呢?下面给大家分享关于线的文章

文章来源:站酷

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

顶部导航栏设计样式汇总

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助自己和小伙伴们更好地理解导航栏这个组件。

顶部导航栏作为我们使用APP时每天都要遇到的组件,出镜频率极高,看似简单,其实我们在绘制界面的时候还是有许多细节需要注意的。本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助大家更好地理解导航栏这个组件。


一、常规导航栏

所谓常规导航栏,主要是指固定在状态栏下,能清晰分辨出的一行导航栏,主要由操作图标、标题、搜索框、背景等组成,大致分成三种,分别是简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏。


1.简单标题导航栏

简单标题导航栏常见于二级详情界面或导航简单的一级界面,主要由操作图标与标题组成,如下图:

(以下涉及的尺寸大小都是二倍图下的设计大小)

该类型的导航标题的大小一般是36px,操作图标的设计大小一般是40px,切图大小一般是48px,背景色多采用白色或APP主题色。并且很多APP为了保证整体界面的简洁,还会去除导航栏底部分割线,仅采用白色作为背景。


2.搜索框导航栏

常规搜索框导航栏是在简单标题导航栏的基础上,增加了一个搜索框,一般去除了导航标题。如下图:

搜索框的宽度随导航栏中操作图标的多少决定,搜索框高度多采用56~60px,搜索框中的图标设计尺寸多采用32px(为了减少切图尺寸,也可采用48px的切图大小)。

 

在摆放图标时,采用左右间距等分,距离搜索框的间距与边距相等,看起来会更舒适。如下图所示:


3.Tab/分段控件导航栏

Tab左右切换顶部导航栏与分段控件顶部导航栏,都是顶部有多个标题切换的导航栏样式,分为选中标题与未选中标题,如下图:


分段控件顶部导航栏一般有2~5个可选项,且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项),并且可以左右滑动切换,选中样式也比较丰富,常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题),如下图:



二、通栏导航栏

通栏导航栏与常规导航栏的构成基本没有区别,最大的不同是,通栏导航栏的背景层一般与下方的模块打通了,在视觉上看起来更为统一,还能一定程度上节约界面空间。如下图:

通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中(多伴随着背景处理),有些也会放在顶部通栏Banner上,节省空间的同时减少割裂感。


通栏导航栏的背景处理方式一般有三种

1.特殊背景处理:与下方模块整体风格保持一致,多采用与下方一致的图片背景;

2.颜色、渐变背景:采用纯色或是渐变背景,常见于卡片风格的界面;

3.黑色透明渐变蒙层:采用一层渐变蒙层,常见于图片Banner上,保证导航栏文字的可识别性。




三、大标题导航栏

自ios11发布后,大标题风格的导航栏便开始流行起来,尤其是飞机稿总能看见大标题导航栏的影子。普通的导航栏在二倍图下高度只有88px,标题字号为36px,而大标题导航栏在二倍图下高度足足有192px,标题字号为68px。


但并不是所有APP都适合使用大标题导航栏,并且即便使用大标题导航栏,整个APP中也不会全部使用,使用中界面向上滑动也会切换成正常状态的导航栏或直接隐去导航栏,便于内容的查看。

 

有些APP也会折中使用,在常规88PX(二倍图)导航栏高度下,放大字号,隐去分割线,使标题看起来更大。



使用大标题导航栏,你需要考虑以下两点:

1.是否需要帮助用户快速确认所处位置(多为产品页面重复性多,或是功能单一的APP);

2.APP整体风格是否偏向简约大气。

大标题导航栏总给人一种高逼格的感觉,这也是为什么飞机稿喜欢使用大标题,但却没见国内的电商APP使用。



四、小程序导航栏

微信的小程序导航栏,在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,微信配置了一深一浅两种风格。

 

从APP转换到小程序时,要注意调整APP的顶部导航栏的位置以及搜索框的大小,避免被Titlebar遮挡,如下图:

上图中,豌豆公主的顶部导航栏整体下移,并且减小了搜索框的高度,提高屏幕的利用率。


五、划重点

·常规导航栏主要包括简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏通栏导航栏

 

·通栏导航栏要注意导航背景的处理,常用的有特殊背景处理、颜色渐变背景、黑色透明渐变蒙层

 

·大标题导航栏使界面整体更有逼格,但不是所有APP都适合的,要根据情况合理使用

 

·微信小程序导航栏在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,从APP换到小程序时要注意重新调整导航栏

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


日历

链接

个人资料

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

存档