首页

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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


如何成为一个让人幸福的设计师?

资深UI设计者

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

提起小山薰堂,大家可能都会感到陌生,但是如果说到熊本熊,大家脑海里肯定会浮现出一只活灵活现、机灵可爱的熊本熊形象,今天我们分享的就是熊本熊之父—— 小山薰堂先生的《幸福策划术》。

小山薰堂现在的职业是京都造形艺术大学副校长、艺术学部教授,而且写的第一个电影剧本还获得奥斯卡奖,除此之外,他还当过电台 DJ、企业顾问、作家、作词家、美食家、大学教授、综艺编剧等其他职业。

MOI J’ATTENDS

小山薰堂分享的主题是《幸福的策划术》,在一开始,他先是给我们分享了一本来自法国作家大卫·卡利(Davide Cali)的绘本《MOI J’ATTENDS》(中文译名《我等待》),这本插画书中,Davide Cali用一根红线,串联起一个男孩子一生每个重要时刻的等待的场景,从垂髫,到耄耋,从初生牛犊,到两鬓如霜。

△ 法国作家大卫·卡利(Davide Cali) – 「MOI J’ATTENDS」封面

这是一本让人很感动的绘本,从这本书中小山薰堂先生反思道,现在这个时代,我们仿佛都厌倦了等待,人越来越没有耐心,很多人认为等待是没有价值的,所以很多人会把「方便」和「幸福」划上等号,但是小山薰堂先生对这个观点是持怀疑态度的,他觉得幸福是需要被创造出来的。

△ 《MOI J’ATTENDS》书籍内页

BIRTHDAY PRESENT

小山薰堂先生说到,在他们公司,要求所有的员工都必须有策划和执行「birthday present」的能力,对于这个能力,小山薰堂先生觉得作为创意工作者,需要和偷偷去买个蛋糕制造惊喜这种桥段有所区别,小山薰堂对「birthday present」定下的 kpi 是「越夸张越惊喜越好」。在他看来,制定这个「birthday present」,可以提高员工对同仁的观察能力,并且可以得到这个惊喜之外的收获。

今年六月是小山薰堂的生日,他的同事给他送了一个在他看来很普通的杯子,但是得知了这个杯子的来历后,小山薰堂却很感动,原来,这个杯子是他们公司45名员工,从奈良到东京,每人跑十公里,通过接力,从奈良知名陶艺家辻村史朗一路传到他的手里的,接力的过程中全程都有视频的记录,并且在接力到每个车站站牌的时候都会有与站牌的合照,这些也是作为生日礼物的一部分,所以,小山薰堂觉得这是一个很满意很感动很不普通的生日礼物。在这次的生日中他不仅仅得到了一个酒杯,一段记录视频和站牌的合照,还因为全程的策划需要其他三个合作公司的通力合作,过程中消除了很多的问题,所以这对他来说也是一个很有意义的生日礼物的一部分。

△ 员工为小山薰堂生日特意设计的标志 | ©️小山薰堂

「Chalie Vice」

他还分享到,在日本有一个位于东京新宿伊势丹百货八楼的选物品牌──Chalie Vice。这个品牌也来源一个于「birthday present」。

△ ©️小山薰堂

原来小山薰堂公司有一个叫轻部政治的人,是他们公司的副社长,轻部政治特别喜好时尚,每天都会穿着自己觉得很满意的服饰来上班,不过在小山薰堂看来,轻部政治的着装略显浮夸和不稳重,所以在他生日来临之前,瞒着轻部政治策划了一场名为「Chalie Vice」的「birthday present」。

流程是这样的,在轻部政治生日前三个月,小山薰堂告诉他有一个时尚品牌「Chalie Vice」即将在东京设立分店,小山薰堂的公司负责这个品牌的落地和推广。前面说到,轻部政治对时尚很热衷,所以这个项目也就自然而然地交给轻部政治负责。

△ 员工为「chalie vice」特地设计的初始标志 | ©️小山薰堂

这样,「Chalie Vice」这个伪时尚品牌就在他们公司传开了,大家都开始讨论这个品牌,但也仅限在公司内部,因为外界根本不知道这个品牌。

因为「Chalie Vice」是海外的品牌,所以这个时候,需要一位关键的角色,就是「Chalie Vice」的投资人,为此小山薰堂还找了经纪外国人的日本公司进行面试,选了一位面相特别像阿拉伯人的外国男子,对其角色设定为「投资 Chalie Vice 的阿拉伯王子」,然后小山薰堂就把轻部政治带到一个时尚酒会上,假装和阿拉伯王子聊天,然后假装阿拉伯王子的人就转头对旁边的助理说了一些话,助理(当然也是找的演员)就对轻部政治说:「王子觉得你很帅,希望你可以作为品牌的代言人」。轻部政治肯定很乐意,就这样,轻部政治就顺理成章地成为「Chalie Vice」的日本地区代言人。

既然是当了代言人,那么就需要拍摄形象照,所以,在轻部政治生日的当天,小山薰堂让轻部政治穿上他花了一万多日元买的贴着「Chalie Vice」假吊牌的西装,进到黑色背景的摄影棚拍照,在轻部政治双手交叉在胸前摆好 pose 的时候,黑布后面站满了小山薰堂整个公司的同事在摄影师按下快门的瞬间拉下幕布,热烈庆祝轻部政治生日快乐。

△ 「整蛊」成功 | ©️小山薰堂

一个完美的好玩的生日策划就这样结束了,但是小山薰堂整个公司的人都有点不舍,虽然这是一个假的虚构的品牌,但是大家三个月来的一切策划和设计却都是实打实进行的,把它当成一个真正的品牌在策划,所以有一个同事就说,我们何不真的做这个品牌?刚好小山薰堂和伊势丹百货的社长共同参加一个晚宴。吃饭的时候,问他「你知道 Chalie Vice 吗?」社长说他没听过,小山薰堂就把这三个月来的「birthday present」策划活动告诉了他。第二天,小山薰堂的公司就接到了伊势丹百货高层采购的电话,表示对「Chalie Vice」感兴趣,希望可以在伊势丹百货八楼开店。

就这样,一个源于「birthday present」的惊喜,逐步演变成一个真正的品牌。而在开业前,小山薰堂还动用他在日本的影响力,请来了很多日本各行各业的人士,拍摄了一个《about ‘CHALIE VICE’》的视频,视频中,各行各业的人士纷纷一本正经地聊起了这个关于「Chalie Vice」的品牌,但其实这也都是小山薰堂的一个创意,因为他们聊的,关于这个品牌的历史文化等等其实都是虚构出来的。

△ 各行业的大咖介绍「chalie vice」品牌「历史」短片《who is 「chalie vice」》| ©️小山薰堂

△ 伊势百货商场「chalie vice」实体店 | ©️小山薰堂

幸福策划术

策划是什么,小山薰堂认为凡是帮助我们度过人生各种困难的方法,都可以称之为策划。策划现在还有没有人做,他觉得对于策划,需要衡量两个问题:

  • 作为一个策划师,你感到快乐吗?
  • 可以使谁感到幸福?

解决了这两个问题,就可以成为一名合格的设计师。

小山薰堂是一个擅长制造惊喜的策划师,也有剧作家,电台主持人,企业顾问等多重身份。他不拘泥于某一领域,并且在每一领域中都可以做得很好。最近几年他就把很大的精力投入到「汤道」中去,热衷于泡汤的他觉得泡汤文化不仅仅可以在日本流行,他也可以让全世界都喜欢上泡汤。

他有着无限的活力和对生活的细心观察。也有着日本人对于每一件事追求的态度,从举世闻名的熊本熊,由生日惊喜而诞生的新品牌「Chalie Vice」,到近几年一直推广汤道文化,他总是从让人感到惊喜、幸福的角度去考虑一个策划案,并且结果也常常让人感到幸福,正如他最后总结的,「作为一个设计师,作品能让人感到幸福,那就是最大的幸福」。

△ 小山薰堂的汤道品牌「汤道百选」 | ©️小山薰堂

「MODESTY」谦逊

李虎的分享主题是《建筑何为》,他觉得,现在是全球连接的时代,前所未有的联系却又离合,是一个创造力与破坏力同时存在的时代,虽然信息交流方便了,但是这个时代有一堵「新的墙」正在垒砌,贫富差距,欲望扩张,图像时代,环境破坏,正逐渐把这个时代的人隔开了,这也是一个极度消费的时代,所以他觉得,作为一个建筑设计师,对于这个时代,必须懂得「modesty谦逊」。

△ 美国《国家地理》杂志六月刊封面

「谦逊」意味着节制,有意识的建造,建造得恰到好处,不多不少。

「谦逊」意味着包容,意味着通过建造来打破屏障,连接人与人,消除差距、重构社会。

「谦逊」意味着保护,通过建筑来创造一个人与自然的庇护所。

「谦逊」意味着尊重,带着对当地环境的尊重去建造,无论是场地周围自然环境、它的历史,或是当地居住的人群。

「谦逊」意味着谦卑,以一种真实反映我们在世界中所处位置的方式去建造。我们不过是庞大网络中的其中一部分。

「谦逊」意味着远离虚荣的自由,建筑不仅是流于表面的美学,而是去追求深度的意义。只有做到这一点我们才能真正重新拥有勇气,去想象、去探险,并且回归诗意。

但他也强调,「谦逊」并不意味着建筑是无力的。

在他的案例分享中提到上海油管艺术中心的项目,这是一批位于上海徐汇滨江原龙华机场旧址的废弃储油罐,以及一些消防水池和配套设施。是一段历史的记忆。他希望能保留下这一批历史的见证建筑,所以在建筑设计上完全保留着这五个超大的储油罐外观,并对内部功能进行合理的划分,具体划分为一个油管保留原始风貌,几乎不对其进行任何的加工和改造,保留其原始质感和构造,可作为大型艺术作品的展示。一个在内部进行改造,增设平面展示墙,使其适用于精致艺术品的展示。剩下的三个被改造为多功能的展厅和活动休闲空间。

△ 五个油管的功能划分 | ©️OPEN ARCHITECTURE

李虎在改造中,加入了一个「超级表面」的概念,通过营造一片「都市森林」,将油管链接起来,使其融入到整片森林中去,这也给上海繁忙的都市中增加一片适合公众亲近自然并且可以感受当代艺术,提升城市生活品质的绿地。「超级表面」重新建立公众和城市艺术自然的关联。

△ 「超级表面」 | ©️OPEN ARCHITECTURE

李虎在城市建筑改造中,时常会考虑到公众和自然、建筑的关系,他在深圳坪山新区剧院的项目中,为了有别与其他城市的千篇一律,远离公众的剧院,提出了「演艺建筑的一种新的可能」概念,通过「空间叙事」的方式,区分建筑功能「正式与非正式」,也是使得公众可以融入到剧院建筑中,并且根据深圳的气候设计了剧院的绿化工程,使得剧院与公众与自然都可以得到一个很好的共处。

△ 深圳坪山演艺中心 | ©️OPEN ARCHITECTURE

「UCCA Dune Art Museum」沙丘美术馆

在最后,李虎还分享到在中国北部渤海湾昌黎县一段被称作黄金海岸的沙滩上,OPEN 设计了一座埋在沙子底下的美术馆──UCCA Dune Art Museum(沙丘美术馆)。他提到,随着社会的发展,人类生存空间不断的蚕食地皮,沙丘作为一种地理自然地貌,已经越来越少能看见了。但是接到的这个项目就是需要在沙丘上建造一座美术馆,这肯定会对沙丘有很大的破坏,他希望可以在这矛盾的两者中找到一种平衡,最后,他在海边玩泥沙的小朋友身上得到启发,何不让美术馆以「洞穴」的形态埋在沙丘之下,这是对自然的一种尊重,也是对沙丘的一种保护,因为沙丘美术馆的存在,这片沙丘将永远不会人为「被推平」。

李虎还从当地造船木工身上得到启发,因为美术馆的造型特别的复杂,所以用到造船的技术,通过用木模板等小尺度线性材料手工编织出的模板定型,再用混凝土浇灌成型,并且还在建筑内部保留了混凝土因为木板浇灌留下的不规则的肌理。希望让木工建造的痕迹可以被每一个进入美术馆的人感知和触摸。

△ 将造船术应用在建筑中 | ©️OPEN ARCHITECTURE

△ 建筑躯壳 | ©️OPEN ARCHITECTURE

△ 建筑覆盖上土后 | ©️OPEN ARCHITECTURE

△ 内部大量保存原始手工痕迹 | ©️OPEN ARCHITECTURE

因为是在海边,在美术馆的造型上,会留出很多的大小不一的洞口,每一个洞口望出去,都是大海不一样的风景,让人在美术馆中可以感受到不同画面切割的海景,并且因为建筑被埋在沙子中,冬夏的温度得到很好的调节,使得建筑非常节能,保证了建筑的可持续性,而巧妙的天窗开口,更是为美术馆提供全天候的自然采光。

△ 内部开口设计,保证了采光和观赏性 | ©️OPEN ARCHITECTURE

李虎是一位「诗意」的设计师,在他的作品中,可以处处体现人、自然与建筑之间的和睦相处,建筑不再是冰冷的存在,他可以被感知被「融入」,这是他对自然的敬畏,也是对「谦卑」最好的诠释。

不论是小山薰堂对于使人感到幸福惊喜的策划术,还是李虎对于现代建筑的思考和态度,他们都考虑到人和社会、自然的关系,正如小山薰堂在最后分享的一张他在纽约街头拍到的一个流浪汉在地上贴的「I LIKE SURPRISES」。人们都喜欢惊喜和快乐,这是能让人感到幸福的东西,他们让策划不再是按部就班的一套流程,建筑也不再是一栋冰冷的建筑,他们有温度、有情感,都可以使得所接触到的人感到幸福和快乐,引发人们对于人与社会、自然的思考。他们应该是这个时代,一个合格设计师的标准和榜样。

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

日历

链接

个人资料

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

存档