首页

19大常用调性,160种配色方案

博博

矩形色块为背景色,圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变,或者也可以把某些单色渐变转化为纯色。另外,在不包含黑白灰的色彩组合里,仍可以根据需要自行加入黑白灰,比如用于填充文字的颜色。


1. 高端


视觉调性高端的色彩,通常具有明度低、饱和度低、颜色数量少等特点,所以很多高端的设计都会以深色作为背景色,因为深色更显低调、更具神秘感,所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。


2.科技


想要表现科技感,色彩的整体调性通常会偏冷色系,明暗对比要强,且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色,然后用高饱和度、高亮度的青色和紫色作为辅助色,这时这些辅助色就会非常的跳跃,具有一种发光的效果。


3.时尚

其实所有调性的配色都应该要尽量时尚一点,即使是想表现复古,也不能太土,所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类,一类是以纯色作为背景,这种色彩比较适合于品牌设计、网页设计、画册设计等;一类是以渐变色作为背景,这种色彩比较适合于电商设计、广告设计等。


4.酷炫

酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配,比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格,其色彩就属于酷炫类的。该类设计通常也是以深色作为背景,图片元素会使用高饱和度且对比很强的渐变色,色彩相对较多。


5.好吃


即让人感觉很有食欲的色彩搭配,这种色彩通常以暖色为主,比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业;而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。


6.夏天


目前正值火热的夏季,所以葱爷专门整理了一些适合表现夏季的好看色彩,该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色,然后以黄色或红色、白色作为辅助色,这种色彩组合会给人清凉、快乐的感觉。


7.清新


小清新的视觉感受为轻松、柔和、淡雅,要达到这样的效果,颜色的明度通常是比较高的,饱和度偏低,常用的颜色有浅青色、浅绿色、浅黄色、粉红色等,在奶茶、女性护肤品的相关设计中比较常见。


8.快乐

快乐是张扬的、是活泼的,所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多,通常也是以暖色为主,但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性,所以想要表达快乐,黄色通常是少不了的。

9.可爱


跟儿童、年轻女性相关的设计,通常需要表现出可爱的调性,这类色彩通常是用冷色和暖色相互组合,颜色的明度同样不会太低,否则会有压抑的感觉,另外饱和度也不要过高,饱和度稍低一点效果会更柔和一些。


10.健康


想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶,还有黄色的小野花等等,所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩,红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉,所以整体的颜色明度不要太低。


11.运动


要想让色彩动起来,对比一定要强,可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色,所以常用于表现运动的设计里。

12.科幻


这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合,给人的视觉感受是稳重而大气,科技感和神秘感并存,所以背景色通常也比较暗,喜欢用青色和黄色这种比较亮的颜色作为点缀。

13.喜庆



在设计节日海报或促销海报时,通常需要表现出喜庆的调性,有些设计师会局限在大红色、黄色、和橙色里,这样搭配出来的色彩容易土,而想要解决这个问题,一方面可以加入冷色搭配使用,另一方面颜色的饱和度和亮度也不要过高。


14.复古


这类色彩的特点是颜色的饱和度会相对低一点,而且大多数情况下,整体的明度通常也不会太高,常用类比色搭配和对比色搭配。

15.中国风


具有中国风特色的颜色和色彩组合有很多,葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高,有点复古和充满文化气息的感觉。胭脂(暗红色)、缃色(中黄)、绀青(深蓝色)、黛(褐色)等是中国风常用的颜色。


16.梦幻


梦幻具有奇妙和神秘的感觉,好像在黑暗中找到了一点曙光,奇遇了惊喜一般,所以大多数情况下,背景色会使用从深色到亮色的渐变。颜色相对会比较丰富,而且以渐变色居多。


17.女性


女性是温柔的,是感性的,所以该类色彩组合通常为类比色,偶尔会用一点对比色作为点缀,以增加画面的活泼气息,颜色的明度和饱和度都不能太低,当然饱和度最好也不要过高,粉色、紫色是常用于表现女性的色彩。

18.优雅


优雅可以理解为低调、高级、温和、安静,所以这类色彩的对比通常不会太强,饱和度也会比较低,整体的色彩调性会偏中性,常用卡其色、麻色,还有单色组合及类比色组合。


19.经典色彩组合

除了以上十八大调性,葱爷还给大家推荐一些经典的配色,很难把它们具体归为哪一类,但是我们在做很多设计时,用上这种配色总能得到不错的效果,比如红黄黑、红白蓝、黄绿黑、等等,在很多平面海报设计中经常能看到。



作者:葱爷      来源:站酷

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

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

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

B端表格设计指南

博博

做b端产品的设计师都知道,为了提升开发效率,我们的前端在投入开发前,一般会选择一种第三方前端框架作为底层来进行组件封装。所以开始内容前,我想先聊一聊第三方的UI框架。



目前国内主流UI框架且个人工作过程中接触使用过的有:



其他不太常用的框架我自己了解不多,如果有了解的朋友,欢迎在留言区讨论。

我个人比较喜欢使用【Ant design】,一方面最先接触Ant design,另一方面资源很全,下载的源文件基本能满足大部分通用功能,很多控件(比如:各类选择器、穿梭框等)的视觉与交互体验也相对较好,可直接复制组件粘贴至设计稿中。

但前端同学更倾向于【Element】,我目前做的几个项目都是基于Element组件封装的,据前端同学说他的组件封装简单容易修改,对于没接触过框架的同学也方便上手无障碍。所以基于此,为了提升开发效率,兼顾全局,我们的项目都是采用的【Element】,我也是花了一些时间专门熟悉新的组件。


一、 主流框架内【Table】组件对比

1.1UI样式对比:

截取各官网中 Table 的基础界面样式,如下图:



两个产品示例出的默认组件样式有些许区别,【Element】直接列出了不同的样式类型, 而【Ant design】是结合功能综合展示的。样式皆可根据相对应的参数进行修改,前端同学在开发过程中可直接按照设计稿的标注进行修改样式即可。如果风格一致,直接使用组件默认样式也是可行的。



如果是数据信息平铺且单一的项目,直接使用第三方组件库表格的基础用法,视觉与交互也能够满足大众审美和习惯,普通后台简单数据表格是能够满足需求的。

像我现在负责的其中一个项目是供应商后台管理系统。就是直接用【Element】,作为数据统计信息展示完全足够,运营运维同事使用时也表示还算满意。

但有些复杂的B端后台界面除了承载信息,还有很多相关的操作与处理。产品供给B端客户使用,数据文档量大且类型繁杂,并且相互间有不同的关联关系。很多情况下需要重新根据需求设计,且为了兼顾开发工作量尽可能的在设计上找到折中方案。这就要求最好能够从框架组件中衍生出来,最少的修改满足更多的需求。

1.2 组件功能对比:

因我们已确定使用【Element】故而以下所有的对比,以此框架中的 Table 组件功能为基准,进行功能有无与相关差别性的比较。



由上对比看来【Element】与【Ant design】功能基本一致。

需要注意的是:上图没有的功能组件,并不代表是不能够实现,前端同学是可以基于组件重新写的。

2、如何使用第三方组件

可能很多人会问市面上已经有 Ant Design 如此成熟的 B端设计框架后,可以选择直接使用,为什么还要增加开发的负担。

开源确实是非常好的一件事,但是从另一方面考虑,市面上包含Ant Design和Element这一类平台,都有很多不同点,同时并不是所有的组件Ant Design 都会提供,企业级产品会有很多自身个性化的需求,我接触的项目一般是把 Ant Design 当作基础框架,或者底层参考,在此基础上去做设计框架。

当然在小项目或者初期产品的情况,为了提升效率降低成本会直接使用开源组件库,各有千秋,最终目的是为了更加有效、好用的完成项目。

那么设计需要如何做呢?

当使用组件时,并不需要设置间距等规范,可直接选择一种一般不会有太大问题。更多的是关注表格中承载的数据字段类型。比如:

文本字段:可点击的字段、普通文本类、数字字母等,此类长短参差不齐的,最好给出左对齐;

既定字段:日期、时间、部分枚举类等,字符数一致且较短的,可与表头标题居中对齐;

特殊字段:金额、状态标签、类型标识等业务性较强的,可根据相关特性与阅读习惯确定其对齐方式。

不论何种对齐方式,都需要考虑到该字段可能存在的极端情况。比如:普通文本若超长,可在鼠标hover状态时将该单元格展开列出全部字段信息。或以tips形式,跟随鼠标位置展示全部信息。



1.什么是表格?

表格(Table),又称为表,是用来收集、整理、组织、分析数据的二维矩阵。是B端产品中一种常见的信息展现形式,它是所有B端组件中信息展示密度最高,同时涵盖了B端的所有场景的一个重要的组件。

表格属于列表的一种。列表分为两种:

1.1 单维度数据整理 - 列表

列表拥有一对多的数据结构,能够让用户理清一条数据下的多个对应关系,并且多个对应关系是相互并列。列表能够将数据在一列中井然有序地展示,保持数据的有序与整洁。常见的使用场景比如邮件、待办事项等等。



1.2 多纬度数据整理、数据分析 - 表格

在多维度的数据分析中,最常见的就是表格,使用多维度数据进行统一的结构化展示,让用户清晰地看到在同一主题下的多条数据的对比,使数据能够进行多维度的展示,保证数据的完整性。



本篇文章想要说明的重点就是多维度表格样式。

2.表格的优势

表格常和排序、搜索、筛选、分页等其他界面元素一起协同出现。在企业级中后台中,具有以下优势:

  • 结构简单:可承载大量同类信息及数据,可保证信息可读性,是最为清晰、高效的形式,易于用户快速扫描浏览并获取所需;
  • 分隔明确:横向关联纵向对比的信息处理方式,更易于用户感知分辨其中的差异与变化、关联与区别,并进行对比分析;
  • 复用度高:对于大量数据信息,在保留现有视觉结构的条件下,可直接使用其他通用功能件,快速确定并执行多种复杂操作,比如搜索、筛选、增加、删除、编辑、批量操作等其他自定义选项操作;
  • 拓展性强:表格中各列内容相对独立,可根据业务需求或用户关注点的不同进行自定义调整。



3.表格设计的痛点

3.1 形式单一

列表属于形式十分单一的组件,对于没有经验的设计师来说,会认为能够调整的地方实在太少,往往在思考层面就会有所不足。对于一个B端表格来说,它需要具备数据浏览、数据新增、数据操作、数据统计,因此功能多而全,很难思考解决问题思路。

3.2 组件联动多

通常设计师设计单个组件,都会有较好的全局意识。而到了多组件的联动时,就会出现问题。比如在表格中,除了表格本身,还会有搜索、筛选、视图、分页等操作,如果不对多组件的交叉使用进行思考,也会缺少对于这些场景的设计。

3.3数据形式多

在列表中,会承载多种多样的字段类型,而每一个字段类型都会有相应的差异。形式的不同落到列表上就会有不同的呈现形式,在关键数值的处理上,也会差强人意。因此看上去简单的一个列表,其实会有很多需要设计的点。

设计过程中如何在满足业务需求的基础上平衡用户的浏览目的和设计者的传达目的,如何让表格在表现层更合理、在操作层更易用,是很考验产品设计师的数据整合能力。 






1、表格的场景

对于多数B端管理系统而言,数据的查询和管理都是非常重要且高频使用的功能,所以常规项目中会包含大量的表格页面。甚至,有的中小型项目的90%的导航一级页面都是使用表格,而不存在其它页面形式。所以,表格的优劣对用户工作效率和平台体验可以产生决定性的影响。

而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版,不同项目、页面、模块对表格的可视需求天差地别,需要根据具体情况具体分析。

表格的使用场景主要分为四类:数据浏览、数据新增、数据操作与数据统计。



1.1 数据浏览

表格的数据浏览从本质上就是对大量数据进行寻找与操作,在此场景下用户需要进行高效准确的数据查找。当用户需要对信息进行排序、搜索、筛选、以及相关业务处理等复杂操作时,表格结构能够很好地保持页面效果的稳定性与一致性,提升用户的操作和阅读效率。

1.2 数据新增

表格的数据新增场景从本质上是将复杂的数据结构,通过系统字段类型的相应规则,录入保存到系统中。这也就我们常说的增删改查的“增”,通常是一个比较常规且高频的操作。

1.3 数据操作

分为对单个数据的操作、单行数据的操作、多行数据的操作三种情况。

单个数据的操作:就是常见的快捷编辑,可以点击快捷编辑按钮,在原位对单个数据进行操作。入口一般在数据行内。

单行数据的操作:主要通常会采取两种路径进行操作:一种是进入用户详情页界面,对一整列数据进行编辑,这种情况通常都需要多个数据进行处理,因此进入编辑页面更容易寻找。另一种是进入弹窗进行操作,这一方案路径更加清晰便捷,同时和新增可以共用一套控件。

多行数据的操作:主要采取多选过后的操作方式:当用户想要对多条数据进行操作时,就需要对多个数据进行checkbox 的勾选,从而满足多行操作的需求。入口一般在筛选操作栏。

1.4 数据统计

表格适合信息的归纳与分类,数据经过归纳整理和合理布局后,更易于用户在信息之间进行对比,快速定位、查询其中的差异与变化、关联和区别。

主要针对用户需要审查分析。目的是在通过大量的数据分析去得出某一些结论,由于关注的数据会有主次之分,数据与数据之间也会有内在联系,用户会更加跳跃地扫视页面,而且会更加反复地审查数据。

2. 表格的设计目标

表格的基本设计原则是“全面整合并呈现业务数据,提供顺畅阅读体验,便于用户发掘重要信息,进行便捷操作”,满足业务需求+符合用户心智模型。简而言之设计易读,易扫视,易比较,易操作的表格结构是表格设计的首要目标。 



2.1 易查找

表格层级分明、一目了然,让用户更多地感受表格承载的内容信息而不是表格的形式。

对于提高表格查找效率,这里给出一些我个人的建议:

  • 保持一致,保持表格外观、布局一致,外观相同的表格用户会更快地接受,用户一次学习就可通用查看,凭肌肉记忆快速查找关键信息;
  • 呼吸适中,表格内容区采用合适的行高和列宽,可以帮助更快地获取信息;
  • 视觉降噪,通过字体、字号、颜色等多维度进行视觉降噪处理。

2.2 易读

列表以易于浏览的逻辑排序,提供合适的搜寻组件帮助用户快速查找信息。

2.3 易操作

表格应该是可交互的,对于查找好的数据能让用户迅速找到对应操作进行决策,如导出、编辑等的快捷操作处理。

处理交互提效建议:

  • 亲密性,数据选择与数据操作保持亲密性(满足菲茨定律即可);
  • 操作露出与操作隐藏,不同业务操作选择不同的操作形式,比用户多想一步。






1.表格的类型

B端产品大多数业务场景都是使用基础表格,但在B端产品的业务多样性使得很多特殊的表格有它独特发挥的空间。除了了解基础表格样式以外,了解更多的表格类型也能帮助设计师在做复杂项目时更加得心应手。 

1.1 基础表格

基础表格样式,是由行与列的单元格组成,能满足用户多维度查看数据的需求。通常用于横向表格的纵列数据较少时,使页面不需要滑动条也可以展示完全。操作项一般置于页面最右侧,便于用户浏览完成后进行操作。 



1.2 树形表格

表格中的数据为包含与被包含的结构时,可采取树形表格。

每一个条目可展开或折叠包含的更详细的信息,也包含嵌套子表格。通过逐级大纲的形式来展现数据间的层级关系,让整个信息结构变得一目了然。非常适合大型数据表或者项目管理工具中。 



1.3 子表格 

一条主数据下有多条数据结构不同的关联数据进行嵌套时,这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释,详细地了解主数据中数据的含义。结合层级表的使用场景,多以查看为主,编辑需求较少。

设计中需要考虑:表格中当父数据删除时,子数据如何处理?设计上对父子之间的关联有着何种限制?



当一条主数据下有多条数据结构不同的关联数据进行嵌套时,这时候就可以用子表格进行创建。

它能够对主数据进行更加细致的解释,详细地了解主数据中数据的含义。从表象上看,就是在一个表格中还能嵌套另一个表格或其他信息。


1.4 交叉表格/表头分组

当一个表格里面有多条数据在同一个小范围的维度进行展示时,或者说表头有很多分组进行区分,它就是交叉表格。

它能够通过硬拆分将数据进行切割,能够满足具体业务上的需求。



1.5 图表表格

当一个表格里面有多种图表数据进行展示时,他就是图表表格。用户点击某一数据后,直接跳出数据的统计图,方便用户进行对比。同时这一功能也可以通过仪表盘这样的功能去解决,是目前很多产品最爱做的数据可视化。

除了在单元格中引用图表之外,很多时候都会提供图表/表格视图切换,便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式,这时候,表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。



1.6 卡片表格

可以用卡片的形式来展示信息,将信息以组的概念呈现,单张卡片内的信息按优先级进行排列。此外,卡片彼此之间又形成一个整体。 



卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。

注意:在有限的表格空间内需注意卡片信息之间的间距,若卡片信息过长可做截断处理。

在实际工作中,上述表格类型还有可能互相结合,以更好地达到相应的分析目的。比如垂直–层级,矩阵–数据立体表等。


2.按照表格设计样式分类

信息内容的有效传达是表格设计的本质,就表格本身而言应该是隐型的,应该让用户注意力聚焦在核心内容上。所以,边框的颜色应非常淡,不能妨碍快速浏览。



2.1网格型

表格有均匀而明显的分割线,边框单元格比较明显。

适合:对于数据之间的关系紧密(列信息较多而没有足够空间用留白来分割信息)且有对比关系的。

2.2 水平线型

仅显示水平线可减少整个网格的视觉噪声。

适合:它能显著减轻表格在垂直方向的视觉重量,提升用户进行大量数据对比时的速度;因此对于所有数据集大小,此样式都是最常见的。

2.3 斑马条纹型

隔行交替使用不同底色来区分数据。

适合:每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法;对于较大的数据集,建议使用此样式,在较大的数据集中,交替模式将很清晰,并且不会引起特定行突出显示的混乱。

2.4 自由形式

移除所有分割线,通过尽可能减少视觉噪声来创建极简外观。

适合:对于小型数据集,如果用户在阅读时不需要帮助就可以保持位置,则建议使用此样式。

3.表格的布局

前面我们聊了表格的行元素和列元素相交就会形成一个简单的二维表,行,列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局,分别强调行、列、单元格。



水平型会弱化列的存在,强调行信息的连贯性,适用于用户阅读信息时是从左到右,然后自上而下逐条扫描,适合大量信息的浏览,是b端产品用的比较多的一种布局。

垂直型是在行分割的基础上,通过强化列的视觉特征来突出不同列信息的对比。

矩阵型的表格有均匀统一的分割线,边框单元格比较明显,适用于列信息较多而没有足够空间用留白来分割信息的表格,同时我认为单元格合并的情况也属于矩阵型。

设计建议:

表格中所承载的数据信息才是主体,在进行表格设计时,尤其要注意去除所有非必要的视觉元素,让用户将注意力集中在数据信息上,而不是无关的边框、底色等。




表格由内(展示项)、外(操作项)两部分组成,其中内部构成元素包括标题、表头、表体等;外部元素包括筛选区、按钮区、底栏等,如图:



除了表头和列表内容外,其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架,即包含的模块和对应分布位置,再展开后续的细节设计。

1. 标题

标题是整个表格内容概述的名称,一般会放在表格的左上角,符合用户的阅读习惯,同时也能突出标题的重要性。但在有些情况严格意义上的标题则不存在,会被页面标题、面包屑或其他内容代替,主要看其能否表达对表格的概括。

标题尽量简洁明了,不要太长。如果标题名称难以理解的话,可以加二级提示,有两种常用样式:tooltips(常用)、二级提示语。

2. 筛选操作区

筛选操作区方便用户快速定位查询数据与操作数据,是承载表格核心功能“增删改查”的重要桥梁。筛选操作区的排序方式对整个表格“好查找”起到了至关重要的作用,所以表格设计筛选操作区的设计至关重要。

3. 表头

表头信息是对数据属性的分类或基本概括,可以理解为表格总结,表头也可以指行列标签,是对所属行或列的描述。表头也可以承担一些简单的筛选、冻结与排序,方便用户对具体的行列进行筛选操作。

表头是用户快速浏览表格布局的关键信息,表头字段应当符合人们的思维惯性,保证大部分用户能理解数据。

4. 表体

是表格的主体区,承载用户的每一条数据,也是整个表格的核心。是由一个个的单元格组成,单元格的排列组成行或列,行/列中的数据可以是文本、计数、百分比、状态、操作等任何形式,在表尾还可以进行数据统计,例如合计、平均值等。

单元格的大小行高都会直接影响用户使用表格的体验。单元格的设计上也会有很多设计思路,在后半部分也给他家提供了我自己的看法。



5. 底栏

底栏位于表格最下方,一般展示正文的数据概要信息,有时也做数据的分类统计,或者配合筛选操作区放置批量处理操作、备注说明等内容。

分页是不属于表格当中,但当数据超过用户所设定的阈值时,就需要使用分页拆解数据,所以分页和表格是经常联系在一起的。分页一共有:基础型、迷你型、完整型三种类型。而如何进行跨页的操作,一直都是分页在B端中的难点,需要有好的思路与逻辑,在分页模块中与大家聊聊。



作者:789研习社      来源:站酷



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

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



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



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

B端表格设计技巧大全

博博

表格系列第一篇我们聊了表格的基础内容和表格的组成要素,包含表格由内(展示项)、外(操作项)两部分组成,如图:



表格作为展现结构化数据最为清晰、高效的形式,常和按钮、搜索、筛选、分页等其他元素一起协同,构成表格页。通常表格页面包含三个部分:数据过滤、数据操作、数据查看。




数据过滤是对数据进行筛选的部分,由搜索、筛选、标签这三个部分组成。产品设计上提供多维的筛选和排序,将操作者所关注的数据展示到前面,便于快速查看、对比、分析信息,是一种增加用户效率的有效方式。



一般搜索和筛选会同时出现,但是两者一般很少同时使用来对数据进行定位;

一、搜索

搜索的交互触发方式有“实时筛选”和“点击按钮触发筛选”。实时筛选只适合数据量较小、数据严谨的表格页面,建议谨慎使用。“点击按钮触发筛选”适合大部分表格场景。

因用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。

1.1 模糊搜索

用户搜索意图不明确时,将用户的查询与待检索的内容进行模糊匹配,使用模糊搜索时一定要结合自己的实际场景,慎重使用。

优点:只要有相关的内容都会被检索出来,减少了精准搜索带来的记忆负担;

缺点:容易把相关的信息也带出来,例如检索地址广州,把广州的相关编码也匹配出来。


1.2 精确搜索

用户在搜索时,针对某一数据字段搜索,来查找所需要的数据。

优点:搜索匹配精准度高。

缺点:每次只能对单一条件进行搜索。

搜索根据表现形式,可以分为以下四种类型:

单属性精确搜索:通过某个特定属性就可以快速定位到目标数据,具有唯一识别性的、高使用频率的、对用户决策有意义的。

切换属性搜索:可以设置几个常用的类别来快速切换搜索的维度,方便用户使用。

多标签模糊搜索:表格多个数据都具有特征,往往业务要求对数据的精确度较高。

多属性组合搜索:可以输入多个字段进行组合搜索(取并集),对空间的利用率高,适合更加复杂的列表内容。

这几种类型之间没有优劣之分,根据业务场景使用对应的类型即可。

二、筛选

筛选是将用户所需数据选出展示,其余数据暂时隐藏,通过筛选器的选择可以快速定位所需的数据,取消用户输入的过程,提升查找效率。一般筛选有三种形式:

2.1 平铺筛选

平铺筛选就是将筛选项的内容,直接展示于页面之上,用于筛选条件很多,单独筛选条件对应数据无交叉,常见于信息密集型产品。

优点:可以承载多维的数据信息,选中项的可见性高,用户理解成本与操作成本低,且提高了用户筛选的效率。

缺点:占用太多页面空间,影响首屏的展示效率,增加用户的决策时间。一般配合“勾选即执行”使用,因此在执行筛选的过程(动画或加载时长)可能分散用户精力。


通常电商类产品在筛选区往往采用平铺布局。


2.2 条件筛选

条件筛选是最常用的筛选交互,便于从多个维度筛选,应对各种复杂的筛选情况。条件选择完后,选择触发筛选(若筛选条件不交叉可以选择实时筛选)。 

优点:空间利用率高,起到了很好的收纳作用,整体页面更加美观。

缺点:当筛选过多时,信息量过于冗杂繁多。 



2.3 表头筛选

优点:筛选当前列,更直观,一般情况下表单左侧数据筛选频次越高。

缺点:筛选的内容仅限于特定、单次列的筛选,对于首次使用者来说陌生,交互形式需要学习



2.4 如何合理的使用筛选项

信息排序:基于用户使用场景,以目标导向为依据,将高频的筛选项排列到前面,低频的筛选项置于后面。

默认折叠低频筛选项:当筛选条件有高低频之分,且对页面空间要求较高时,通过展示高频筛选项、隐藏低频筛选项,更好的提升用户体验。

所有筛选项都很低频:以点击高级筛选按钮的形式触发,将全部筛选项置于气泡或者弹窗之中。

在企业级中后台中,用户查看的数据往往属性较多且不唯一,通过简单的检索方式很难精确定位到目标数据,所以,在实际使用时,常会将大量非交叉关系的属性进行罗列,搜索、筛选、标签切换组合出现,形成多属性组合检索。



三、tab标签

标签切换一般用于和时间、状态的流转有关,且没有交集的数据内容。数据类型在5个以下的建议采用tab页切换的方式进行交互,展示清晰,用户操作效率高;超过5个可以考虑下拉选择或模糊搜索。

优点:根据标签,可以很清楚知道划分,筛选的准确性高,切换tab就可以筛选内容。

缺点:分类需覆盖选项,并且保证每一项没有交集,分类不能过多,超过7±2个选项可选择下拉筛选。



四、数据过滤设计注意点

在使用中,索引本身应该是0思考成本的,否则就失去了索引的核心价值。围绕这一点,有两个设计原则:

1)宁少勿多和高频前置:即不要揣测用户需要,最常使用的展示位置尽量靠前。

2)当搜索项不可避免的比较多时,可以进行分类展示,降低寻找成本。



数据操作是表格的操作部分,根据操作对象的不同,可以分为:

一、单行操作(表格内)

单行操作也称行内操作,常见的显性与隐性两种方式。

1.1 显性操作:

操作项显示在行内,直观;文字按钮操作项一般不多于三个,图标按钮不多于四个时,操作项跟在行条目后面;当超过时,建议将相对低频操作选项折叠收起,点击"更多"或“...”下拉显示。操作按钮致灰时,鼠标选中可显示原因。



1.2 隐性操作:

如果单行操作不那么重要,或者说行操作过多影响用户阅读时,可将所有的操作进行隐藏;

当用户鼠标悬停时进行展开所有操作,界面简洁,留更多的空间给需要查看的数据内容,减轻空间压力,减少干扰。这种方式能最大程度上满足用户快速查看与编辑的需求,但是在实际使用中,用户的初次使用门槛较高,需要有一定的学习成本。


1.3 行内操作2种展示对齐方式

a、对齐式

将所有操作进行整齐排列,一般是一个操作对应一列,当有操作缺失时,展示为空,这种方式能够让用户直接了解到操作的缺失,但反复的出现会造成表格视觉上的冗余,适合列数较少的表格使用。

b、平铺式

将所有操作按照一定的预设排列顺序进行平铺,这种方式能够适应B端的大多数场景,将操作都简单平铺出来虽然看上去简单粗暴,但是在实际工作中,也是一种不错的处理方式



设计点:操作按按钮是全局操作还是单行操作其实是可以根据具体业务场景来决定的,判断用户批量操作是不是高频功能,如果是,就采用全局操作,如果操作是低频操作,那么完全可以只提供单个操作功能。

二、批量操作(表格外)

批量操作适用于数据量较大的表格,通常把操作放在表外部上方,这样操作更便捷。批量操作允许用户对一行或多行对象执行操作,通常与复选框操作配合使用,并在选中复选框后激活表上方操作按钮,如删除、批准、拒绝、复制之类的操作,这将节省用户时间,避免重复对多行进行相同操作,分显隐性操作:

2.1显性批量操作:

较为常用,外漏操作简单易懂。如有赞的批量操作,表格左上角和左下角都有,这样不管用户从上往下选还是从下往上选的场景都能覆盖;飞书的批量操作外漏在表格表格的右上角,虽然按钮放在右侧符合用户右手操作鼠标的习惯,而且考虑到适配问题,但是批量操作的路径不符合用户的操作动线,路径变长,大家可自行抉择


2.2隐性批量操作:

容易造成记忆负担,增加学习成本,适合批量操作较低频的操作,产品没有那么复杂的产品。如飞书文档


三、全局操作

统揽全局,无需选择数据内容即可进行的操作,常见的【新增】、【导入】操作。



数据查看是表格的主体部分,是信息的主要承载区域。在开始之前,我们先来看看该区的结构:主要由表头、行、列、单元格四个部分组成。 

一、表头栏

每个表头代表一个对象的属性,决定了下方每行对象要显示的数据类型。

表头在展示信息的时候尽量概括、准确、简化,达到节省表格头部空间,引导用户的注意力聚焦于表格中的数据本身。表头并不是表格的必要元素,当数据本身能自我表意的时候(例如邮箱),表头是可以删减掉的。

通常,表头的设计会和下方列表设计有一定的区分,标头文字有一定的标题属性,所以会通过背景色、分割线、文字加粗等方式来做区分。

1、表头的类型

根据表头的构成,可以分为以下三类:



2、表头交互

2.1表头筛选

除了容纳行标签之外,表头也可以添加排序、搜索、筛选等功能,通过对表头标签的筛选可快速完成筛选条件。这些功能受列的影响,一般只能做单次筛选。虽然表头筛选能在一定程度上节约空间,但对于复杂业务的产品来说,数据信息列多,高频筛选功能可能会被遮盖,表头复杂影响用户表格阅读,不推荐使用。

2.2 可配置列(自定义表头)

可配置列与配置筛选条件的功能类似,同样是考虑到不同角色的用户,查看数据的视角不一样,对应的关心的字段也会不一样。

2.3 固定表头

有些表格由于数据量较大,需要对页面的上下滚动完成对数据的查阅,对表头进行固定,可以帮助用户更快地找到单元格的属性和含义,尤其是单元格属性信息数据没有特征时(比如都是数字、百分比、姓名等)固定表头可以大大提高使用效率。 

当然还有固定列,当表格需要展示不同类别的数据较多一屏展示不下,可以对首尾字段进行固定,让用户通过左右滑动来实现对数据的快速翻阅,满足用户对数据的认知以及对数据操作的需求。

注意尽量避免横向滚动:正常鼠标横向滚动是需要用户按住 「Shift + 滚动」 才会使表格进行滚动,对于所有的鼠标用户而言,横向滚动都是极为痛苦的。

3、表格设计的注意点:

3.1精简表头

表头在能够概括的情况下,尽量简炼、准确,一般可根据上下文关系来进行减短简化,以达到节省表格头部空间和减轻视觉压力的作用。当数据结构比较复杂的时候,使用多级表头来体现表头与数据的层次关系。

3.2 定义专有名词

对于比较复杂的表头,可以定义一个专有名词,如果有需要解释,则在字段名称旁边加说明小图标(小问号)。鼠标hover上去对专业术语或用户不常见的名词给予该字段的详细解释,同时满足新手、普通、专家用户的需求。 



3.3 情况允许时,去掉表头

如果表格数据可以自我解释,表头就不是必须的。例如电子邮箱的收件表格,每列数据区别度高不会混淆,去掉表头也能轻易阅读。


表体部分所需要注意的设计点比较多,内容包括了数据的对齐方式、字体、分割线、行高、数据显示、单元格、行与列等,下面我们来依次聊聊。

二、对齐方式

表格内数据按照格式塔原理进行对齐,能让表格更加规范易理解,营造出良好的视觉引导线,视线流动更顺畅,提升数据的浏览效率,让用户快速的捕捉到所需内容。其对齐规则如下:

文本型数据左对齐

符合正常的心智模型,便于用户扫描过程中快速定位到下一行文本,左对齐的文本在展示的时候起到了纵向分割线的作用。多情况下,居中和顶部对齐都是可以的。

数据型数据右对齐

包含金额、长宽高等需要关联比较的数字字段,这是因为我们在对比数字时,首先看个位,然后十位、百位等。

固定字段居中对齐

比如日期(2020-11-11),状态文字(未审核、已收款等)或者存在布尔关系的文本(是/否、男/女等),字段固定不变,居中对齐能更好地信息呈现。这里根据业务也可以按照文本型左对齐处理,让用户查看表格不会感觉混乱。

表头与其数据对齐方式相同

对齐方式保持相同可以使表格更好阅读,上下文保持一致,能保持表格竖直方向整洁,营造一致性和上下文环境。多级表头:多行或多列合并居中对齐,最底层表头可以按其数据对齐方式对齐。

最后一列操作列右对齐

使表格更加规则,视觉统一提高操作效率。



三、 字符规范

表格数据一般包含文本和数字,良好的字体能提高表格本身的阅读性。设计上需要注意以下几点:

1、数字单位的选择与使用

表格中的数据要根据数量级确定展示形式,不需要精确的数学呈现,可以让用户更快地查找信息,下面是展示形式的建议。数据的度量单位无需重复标注,只需要在表头标识清楚即可,注意同一列单位保持一致。

2、减少用户计算

深入了解用户需求,根据需求为用户提供差值、升降变化、合计值、平均值等直接展示形式。

3、字体使用

表格中字体保持一致,文字信息字体统一、数字信息字体统一即可。数字信息字体选择——建议等宽等高字体,等宽的数字在同一竖线时更容易对比。推荐以下几款数字字体在表格中有更好的呈现效果,分别为:微软雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。 



设计表格时,尽量避免任何装饰性字体,简约至上才是关键

不要出现衬线字体:因为个性会产生阅读噪音,不利于用户对数据的理解和思考。

不要出现全大写字体:因为它很难读,需要转化思维。

不要出现使用斜体:易引起视线疲劳,影响阅读。不要出现多种字体:保持风格统一。

三、分割线

在表格设计当中,每一条线都有着它存在的意义,比如:

当表格中展示横线,隐藏纵线:用户的横向阅读体验更佳,强调一条数据的完整性,能够让用户进行快速地对应。

当表格中展示纵线,隐藏横线:用户的纵向阅读体验更佳,强调数据上下间的对比,能够让用户找到同一纬度数据下的对比。

在表格设计中,合理地使用分割线可以实现对表格行与列的强调。按照分割线的分布情况,可以分为4种类型:网格型、水平线型、斑马条纹型、极简留白型。这个部分在上一篇已详细说明。



设计tips:表格具有的颜色尽可能少,颜色和可读性是密切相关的,要合理的使用颜色,普通表尽量使用简单的背景色和点缀色。

背景色方面,除了行/列交替颜色(可以区隔内容,引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法,还可以对表头表尾进行视觉区分,但不能增加过多颜色以引起混乱。

分割线颜色尽量不要与背景色相差太大。当字体选择深灰色,背景为浅白色时,边框选择浅灰色,这样可以减少我们视觉疲劳,不会使表格看起来令人生畏。

分割线和斑马纹的应用色彩都不应该太深,如果你项目中对表格有比较多的选中需求,那么就不太建议使用斑马纹的格式,因为选中背景需要被高亮,那么一个列表就会出现 3 种颜色,是要尽力避免发生的。

四、行高与单元格

开发同学工作的时候,使用的是盒子模型,设计师在出设计图的时候也要遵循开发逻辑。


为了让表格中的文字高度看起来舒适,有着视觉的呼吸感。我们首先得了解影响行高是由文字的高度以及上下间距组成。因此我们得出:

单元格高度=内容高度+上间距+下间距                

单元格的尺寸包含:文字行高建议设为字号的1.5倍,上下间距设为字号的1.2倍。



4.1 行高规则

对于单行显示数据内容的表格,建议行高约为内容高度的2.5-3倍;对于多行显示数据的表格,建议行中内容的最高点与最低点到行框的上下边距略小于文字高度。

① 固定表格行高

当数据有单行信息展示有多行信息展示时(或长度不固定),要定义内容的行数(根据业务),根据行数确定行高多出的内容做省略处理。

固定行高时可以规范几种不同的表格行高,例如在我日常工作中规定了3种行高56px80px110px,行高较高时,我们数据内容都进行居中对齐就会有一些问题。有些单元格只有一行信息,有些有多行信息,会使页面看起来更混乱,信息查找速度降低。

② 自适应表格行高

表格行高跟随行内占用最多行数的单元格变化,设置固定的上下边距,表格行高随着数据信息的换行而变化如下图。

4.2 单元格

1、单元格关键数据

单元格数据一般有文字、图标、头像、进度等,在具体业务中,如果你找对了用户想看的关键数据,将会大大提升用户体验,反之则干扰用户查找信息,对于较为重要的数据可以进行关键数据的标识设计。

标签:关键数据较多,颜色与视觉重量要做区分。

图标:名称与文件类型图标区分。     

 

人员信息:展示在表格中也十分常见,通常会用头像+名称的方式,例如下图temabition和飞书中对人员信息的展示。

度量单位的使用:其中的关键区别在于数字的大小。数据的度量单位无需重复,一般在表头标识清楚即可。

进度条:进度条或简单的数据图,它更能直观地展示数据的进度状态,方便用户对数据信息做判断如下图。

关键属性标识:比如用户重点关注数据状态、某些数据的上升和下降等,可用符号进行标识,帮助用户快速定位到目标信息。

空表格:表格数据为空时要给予一定的提示信息或快捷操作,让用户更快地进行对数据的操作。

空单元格:当表格单元格中没有相应数据时,要避免直接留出空白单元格。空白格容易造成用户的困惑甚至误解,用户会搞不清楚到底是没有数据,还是根本没有值?

正确做法是,数据不存在(数据库中没有该字段)用“-”,没有数量(数据库中有该字段)用“0”,且小数点后位数、单位,都要与上下单元格保持一致

2、单元格交互

2.1 单元格编辑

是对单条数据的修改,直接在单元格编辑信息的形式有很多,针对不同的数据提供对应的编辑方案。

包含:原位编辑,悬停气泡编辑,下拉状态编辑,点击弹窗编辑拖曳排序等等。针对不同的业务性质对单元格采用不同的交互形式。

拖拽排序为用户的自定义排序,在用户拖拽时页面布局保持不变,适用于数据量较小有自定义排序的情况下。

2.2 视图切换

可以通过视图切换查看更多细节,例如在teambition中支持对任务的表格/列表/看板三种视图的查看,每种视图的侧重点不同,可以 适应不同角色用户的不同专注点。

2.3 信息完整度

工作中常常会遇到单元格数据过多的情况,常见的方法有两种:

1、定义一个单元格长度或字数限制,超过该范围以"..."显示,鼠标悬停时出现气泡显示完整内容。

2、折行显示,这种方法让平铺直叙,用户可以直接了当的看到所有信息,建议不要超过三行,超出可“...”显示。

3、允许用户拖边框设置列宽,并记录设置。这种方案弊端是会占用横向的空间。

五、 表格的列

1、列的宽度

列宽的设置对于用户的高效阅读还是很有作用的,在设计时要根据具体的业务信息进行分析,列宽严谨的处理方式有三种:

第一,通过栅格,由列的数量决定列宽,主流框架组件一般是这种;

第二,可以固定部分列的宽度,其余列则按百分比处理;

第三,在固定宽度的基础上,允许用户自由拖动调整列宽的大小。(当然我觉得不要太拘泥这个,合适就好)

2、列的间距

为了让不同数据在表格中相互独立,不混淆。我们需要保证首尾列的内容与表格两边的间距N1保持固定,不同列之间的间距N2在最小宽度的基础上,随着表格的尺寸不同而做自适应的变化。

在设计表格的初期,就需要做好设计规范,表格的边距要统一制定。

3、列的数量

列的数量建议最多展示9条,因为人们的记忆在7±2之间,数据太多用户会找不到重点。但也不是必须,根据业务需求,如果需要大量数据展示时也要展示,因为视觉永远低于业务(好用比好看更重要)。

列信息从左往右视觉权重程度逐渐降低,最后一列权重高(以眼动实验或点击数据为依据得出权重高低)。所以尽量减少列的数量,关注用户需要的必要信息。当数据列过多时,要分清主次列,非重点、辅助性信息可以通过次级入口来解决,如固定重要列(主体名称/操作列),次级列在表格中间区域左右拖动。

4、列的强调

为便于用户对数据进行对比分析,可以在原始数据的基础上给出差值、升降变化等数据处理结果,减少用户数据加工的过程,直达用户获取信息的目标(需要明确用户目标),提高用户的阅读速度。

5、列的交互

① 列宽自定义

在一些用户高度自定义表格中,数据的列宽不好确定的情况下,可以允许用户对列宽进行调节。通过光标的变化提示列宽自定义操作,拖动可完成列宽设置。

② 列内容自定义

列数据还可以根据用户需求进行自定义设置,可以选择要展示的列,在默认情况下仅展示最常用、最重要的几个指标(如下图),也可以对列进行排序。在表格右上方的设置按钮对表格进行设置,清晰高效。用户可以根据自己的需要,自由的选择显示所需指标,隐藏不必要指标,减少干扰。但需注意系统应记住用户上一次的自定义列设置,减少用户重复操作。

六、底栏

底栏在表格最下方,一般是统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。

底栏最常见的元素就是分页,分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。

优点:

1. 良好转换:用户在结果列表中查找特定信息而不仅仅浏览信息流。

2. 掌控感:分页可以让用户知道表格的总量以及当前页面在总量中的位置,知道浏览完页面需要多长时间。

3. 数据加载快:通过对加载内容的限制,可以极大的减少数据加载的时间。

缺点:

额外的动作:用户要到达下一页表内容,就必须点击分页控件上的按钮跳转,等待表格新内容的加载。

1、分页的分类

简洁型:当分页数量较少时,通常在7页以内,就只有最基础的展示。

迷你型:当页面空间不足或者降低分页的视觉影响时,可以采用迷你型。

多功能型:当表格数据较多,为了满足更多的用户需求,可以根据需求选择分页类型。完整型的虽然满足各种功能需求,但是所占空间较大,所以我们要根据自己的需求合理拆分使用。

分页的选择需要根据不同的场景选择最优的设计方案。

2、无限滚动

表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容,虽然十分方便与诱人,但不是什么场景都适用。一般来说,无限滚动适用于在数据有限且信息重复的表格,有利于内容探索。分页则适用用户在寻找特定信息及浏览记录,易快速访问。

优点:

1.高效浏览:一个高效的方法让用户浏览表格数据信息。

2.体验更好:用户使用滚动能获得比点击分页有更好的体验。

缺点:

1.受限性能:缓慢的加载速度会造成用户的不耐烦与离开。当数据量过大时,结果就是页面性能越来越低。

2.位置丢失:没法标记当前位置且不能再随意回到之前位置。一旦离开,就会丢失当前的浏览记录,要回到上次的位置,必须得重新滚动去寻找。

3.信息缺失:滚动条并没有反映出实际数据量。

3、加载更多        

除了分页的使用还可以进行无限滚动的交互,鼠标点击“加载更多”按钮以查看更多数据。这个功能不太适合数据量较大的表格,在具体业务中一定要慎用。



作者:789研习社      来源:站酷

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

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

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

海报排版设计没有想法,这招真的很有用!!

seo达人



一部97年的科幻类型电影,我们来一起看看它的海报设计有什么值得我们学习的地方。

图片

当我们手里有几张照片时,上面这张海报的设计方式就特别适合我们借鉴,三张照片依次等距裁切下来,标题放在视觉中心处,文本的编排可以贴着图片的边界放,效果就出来了。

图片

这张和上面那张方式类似,主体是两张照片裁切,信息全部居中对齐,色调进行了统一。

图片

这张我们可以学习的是什么呢,首先是人物的双重曝光手法,是人物主体经常用到的方式,再就是背景的重要性,后面用了渐变的圆形来增强视觉效果,所以有时候背景不需要太复杂,重复的元素就可以表现的很有感觉。

图片

插画形式往往更注重创意和视觉性,这里用了对称构图,也传达出电影核心要素是基因。

图片

这张与上面的类似,变成了对角构图,同时元素的处理是写实的,感觉上会有所不同。

图片

这张主要的是创意的表达,将火箭的尾气变成了基因。

注:以上图片来源网络,版权归设计者所有。

学会了吗?


作者:设猎派

转载请注明:学UI网》海报排版设计没有想法,这招真的很有用!!

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


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


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



转化利器-用户行为模型

seo达人



图片

试想一下我们只知道通过奖励去激励用户行为的话,不仅会花费比较大的运营成本,有时候,还不一定见效。而对于我们自身的成长来说,如果一直都用这种套路,很容易形成“路径依赖”,限制思维。所以我们需要把视野再拓宽一些,通过用户行为的三大要素动机、能力、触发挖掘更多的用户动机,帮助我们做转化。

 

图片

“设计是人为的,为人的行为”,行为设计学是一门为改变用户行为而设计的新兴科学,它起源于1930年哈佛大学的心理学家B.F.Skinner的一个实验,结果表明:只要设计好激励措施和机制,人就会按照设定的目标推进。

试想一下我们在为用户设计的过程中,在需求正确的情况下,目标用户依然觉得我们的产品不好用,多半是用户完成某任务时行为路径遇到问题。这些问题可能不符合用户心理模型、行为路径过长且未解决用户核心问题等等。

那么,究竟是什么因素能够激励用户行为的发生或改变呢?

福格行为模型BJ Fogg’s behavior model

这个模型是以斯坦福大学教师 Fogg2009 年发表的一篇论文为中心,总结了如何从设计上提高转化率,其关键是Motivation-Ability-Trigger(动机-能力-触发),三要素缺一不可;

图片

● 任何一个行为的发生,都需要满足以上三个要素——人们需要有产生行为的动机、要有发生行为的能力,以及正好有一个合适的触发点

● 也就是说你如果想要用户发生某种行为,你必须给到用户足够的动机,并且让用户有能力去做到,而且有一种能触发用户行动的触发器

 

 

图片

那么什么是动机?

我们常说洞察用户需求,挖掘用户痛点,其实就是在寻找用户动机!

动机又分为内在动机和外在动机两种:

图片

我们都在说折扣或奖励,那属于什么动机呢?在动机的范畴里属于“外在动机”,如果说的形象点,它就像一个诱饵,吸引用户去做某个行为,它给用户产生的是一种“拉”力。

比如产品设计:获得折扣,优惠券,绑定会员(降低目标会员的感知价格),对某类商品的折扣与其月销量挂钩,提高收益评估的感觉等。

如果说外在动机是一种“拉”力,那么在用户的行为路径里是否可以让这个“拉”力变得更长。一步步牵引用户完成订单呢?

以到家精选为例:试想一下如果用户从活动页进来后一步一步的路径进行下钻,当用户从热闹的活动页中一步一步到越来越冷静的页面会是怎样的感受?是不是会怀疑我到底是否享受到活动给我带来的利益。通过活动延伸到用户可触达的每个路径中,使其成功的形成一种牵引用户的拉力。

图片

除了有“拉”力外,还有没有一种方式,能让用户自己产生动机,去做这件事,形成一种内在的“推”力呢?其实是有的,这种动力,在动机理论里,就叫做“内在动机”。

在用户体验中,我们所说的内在动机是指用户使用产品是因为产品本身激发了他们的兴趣和欲望,当用户真正被内在动机驱动的时候,使用这款产品本身就是最大的享受。所以内在动机是可以被设计被引导的。

 

1、给予用户足够动机

当用户没有足够的动机时,行为就无法发生。常见消费者购买行为动机有以下几种:可以根据用户场景及产品特性去使用。

图片

 求廉动机:

以到家精选为例:结合用研报告,通过热力图可以看到用户在行为路径中的价格模块停留较久,说明用户在这个模块遇到了阻力,用户在拆价格,算性价比。所以我们运用“求廉”动机的设计方法帮助用户消除对于价格的阻力。

业务之前展示价格为2小时起,我们利用“黄金分割法”对价格进行分割,拆成单价以每小时起来唤醒用户“求廉”的动机。

图片

那么除了以上使用“价格分割法”以外,还有什么样的表现形式让用户能感受到优惠去引导用户进行下一步操作?

其实用户在价格方面只需感知3类信息,商品多少钱,优惠了多少钱,原来多少钱。在价格表达方面我们可以使用价格锚定效应等让用户感受到便宜。

那么在设计层面其实也可以把价格进行视觉化处理来体现便宜,如下图中价格曲线的表达很好的诠释了用户对价格“降价”的心理走势去设计的价格表达。

图片

 求速(快)动机:

以到家精选为例:之前调研发现我们的用户选择当天的服务的比较多,所以在用户的行为路径中我们需要将当天能服务的能力传递给用户,大家都知道服务是无形的,如何在线上界面中呈现给用户服务感知。基于用户LBS把服务人员的地理位置进行展示,传递给用户服务“0距离”的感受。

一大波暖心服务就在你家附近,最快2小时就可以上门。这就是将服务要素进行数字化展示的意义-为用户带来确定性。

图片

 

2、帮助用户获得能力

只有激励手段是无法有效促成行为发生的,如果用户没有足够的能力,我们需要想办法帮助用户“获得能力”。福格博士提出了一条“能力链”,其中包含5个影响能力的因素:时间、资金、体力、脑力、日程。

图片

以到家精选为例:我们在做老用户下单路径的时候,在老用户这个场景中如何帮助老用户快速完成下单是一直思考的,所以为了减少老用户在下单过程中的损耗,直接把详情页去掉,减少用户操作,老用户直接从入口就可以到达订单页面从而快速完成下单。所以最好的方法,就是持续地用“能力链”来分析,找到问题所在,再针对问题重新设计。

图片

 

3、触发

有动机并且有能力,触发才能有价值,用户的行为=动机+能力+触发;根据不同动机和不同能力来说用户的触发点也会不一样。

● 人们的行为并不完全是自己主动选择的,而是在社会情境和个人因素的双重作用下产生的。

● 不同动机不同能力的用户需要不一样的刺激

 a.场景刺激:适合高动机的人:

高动机高能力的人只需一个触发点即可。低门槛吸引力高的活动,我们只需要将参与的按钮做的醒目再醒目。例如很多活动会把按钮做的很有点击的欲望,在产品界面设计中也可以在用户触发的过程中。

图片

 b.利益刺激:适合低动机、高能力的人 

这种用户需要更多的事件来激发他们做某件事的动机;例如朋友在玩拼多多的时候让我们帮忙助力,你是不是也曾经被可以得到现金红包去邀请更多的好友助力,其实你本来没有想玩助力的,只是朋友分享了一个助力链接给我,上边的现金红包激励以及轻易完成任务使你动心,心想这么容易领到,结果要经过九九八十一难现金红包才能到手。在这里“现金红包助力”链接就是触发器。

 c.场景+利益刺激:适合低动机、高能力的人 

对于利益刺激没那么直接没那么诱惑的时候,可以场景和利益一起更强烈的刺激,例如到家精选储值卡充值促销活动给人的感官意识是:储值送会员可以加送其他福利给你,超级划算超级便宜快来买!

图片

其实在我们日常工中除了以上用户行为模型之外,还有很多模型在设计中可以帮助我们解决问题,比如kano 模型、马斯洛的层次需要理论等都可以辅助我们挖掘用户需求,提升业务指标。

 

 

图片

以上是通过用户行为的三大要素动机、能力、触发结合工作中的实践案例来讲的,试想一下我们只知道通过奖励去激励用户行为的话,不仅会花费比较大的运营成本,有时候,还不一定见效。而对于我们自身的成长来说,如果一直都用这种套路,很容易形成“路径依赖”,限制思维。所以我们需要把视野再拓宽一些,能通过用户行为模型挖掘更多的用户动机,帮助我们做转化。


作者:环铁艺术家

转载请注明:学UI网》转化利器-用户行为模型

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


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


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



面对繁冗,拒绝“摆烂”|工具型产品如何简化设计

seo达人


提纲:

1、为什么用户感觉复杂

2、如何简化概念,降低认知成本

3、如何让流程简短高效

4、如何简化页面信息布局

5、如何让操作更轻松

6、结语

 

一、为什么用户感到复杂

你是否曾收到过类似的反馈:

“这文案是什么意思?”、“这能干什么?我需要干什么”、“那个功能在哪里?我找不到”、“要设置这么多项,好麻烦啊”、“这不能拖动吗?”…

这些都是用户感到复杂的反馈。从用户的感知层面分析,让用户感到复杂的原因可以划分为四大方面:概念、流程、界面、操作,以下将详细阐述原因。

图片

1、概念复杂

导致用户感觉产品复杂的其中一个主要原因是:用户难以理解产品的概念模型。概念模型指事物的基础定义及行为模式。(例如:汽车,一种在陆地上行驶的交通工具。通常需要司机驾驶,需要消耗汽油… )用户根据概念模型对事物的行为进行预测,构建出自身的心理模型。

因此,当产品没有清晰、准确地传达出概念模型,将导致用户产生错误的心理模型。用户需要在大量探索过程中,逐步纠正自己的想法,最终才能了解产品实际的概念模型。

图片

另外,根据「雅各布定律」和「设计心理学2:与复杂共存」,用户基于以往积累经验去理解新事物,即在使用产品前已构建心理模型。而当产品的概念模型与用户的心理模型不匹配时,用户在使用产品的过程中将持续产生认知冲突,也将给用户带来巨大的认知成本。尤其对于传统工具型产品,颠覆型的概念模型,反而提高用户的认知成本,让用户感到复杂难懂。

2、流程复杂

工具型产品的流程主要分为两方面:单功能使用流程、多功能组合使用流程。

在单功能使用流程方面,难免会遇到一些功能在生效前,需要经过多个设置步骤的情况。虽然环环相扣的流程能够降低产品的出错概率,但却会给用户带来更多的成本。对于每个步骤,用户都需要经历「理解」-「操作」-「反馈」的环节。在一些情况下用户甚至不堪忍受,直接放弃使用功能。例如,在Airtable中创建甘特视图,需要经历3步才能完成配置,查看到效果。对于一些抱着尝试心态的新手用户来说,这是难以接受的体验:在还没理解功能的作用效果前,就要经历如此复杂的流程。

图片

而多功能组合使用流程方面,工具型产品在产品功能设计层面,往往将功能的颗粒度设计得相当精细,以灵活满足各种场景需要。就Excel中的单元格而言,可设置单元格字体、单元格背景、单元格边框。但如此精细的功能设计将导致,若用户需要简单实现整体的目标效果时,其操作流程就变得十分的冗长。甚至在一些需要重复设置的场景下,工作量将几何级数地增长,让用户的工作流程将变得极其复杂。

3、界面复杂

大多数工具型产品都希望能在一个界面让用户完成所有任务,却忽略了用户在现实场景下的使用流程。通常一个任务完成的前提是,需要按照一定的步骤完成若干个细项任务。若无法聚焦于每一个个细项任务,而需要耗费大量的时间精力来排除其他信息的干扰,则会产生“注意力被分散”、“太复杂”等体验感受,导致最终任务完成难度增加。

图片

对用户来说,界面内的信息越多负担就越大。工具型产品通常伴随数量众多的功能和选项,一味的平铺功能,只为了展示自身的功能多样性,缺乏合理的组织布局,导致用户需要在几十甚至上百个选项中进行选择,则会大大降低用户使用效率。

4、操作复杂

设计者在不考虑具体操作场景的前提下,不同功能均使用同一种交互方式,名义上为了让用户降低学习成本,但实际上却是不负责任地将复杂的理解过程转移给了用户。对于用户而言,复杂的操作可以分为两种:一种是「步骤复杂」,例如需要多次点击、页面跳转、设备切换等;另外一种则是「认知复杂」,例如交互方式与心理预期不匹配,需用户自行转换。无论是哪种,对于工具型产品而言都是灾难的。

除此之外,缺乏及时的反馈也会给用户带来不必要的麻烦。用户需要反复操作比操作中的冗余更可怕,就像高速公路的减速带,不断降低用户的效率。

图片

 

二、如何简化概念,降低认知成本

1、隐喻、类比已有事物

当产品的概念模型越趋近于用户的心理模型时,用户就越感觉产品容易理解和使用,所要求的使用能力和学习成本就越低。而用户心理模型是根据用户的目标,以及其过往的经验构成的。因此在设计产品的概念模型时,应尽量使用隐喻、类比的方式,让产品的文案概念及交互行为模式)与用户所熟知事物相近。从而让用户建立联想,激活行为记忆,降低认知探索成本。

HyperCard,苹果的早期时间的一款脚本系统。它以「Card」对产品进行命名,同时在产品交互形态上以一叠卡片的形态呈现。这让用户很容易就联想到现实生活中的卡片小册子,进而快速地了解到产品的大致行为模式。

图片

需要注意的是,传统工具型产品的用户往往已被已有产品教育,积累了一定的使用经验、习惯。对于此类产品的概念模型简化应慎重考虑,因为用户所建立的心理模型是较难改变的,颠覆性的变化会让用户之前付出的学习成本付诸东流。此时可尝试用户的其他感知层面切入(流程、原型、操作),以探索简化的可能。

2、巧用大白话

在实际业务场景中,难免会遇到概念新颖、逻辑复杂的产品功能。由于用户从未曾接触过类似的事物,未建立起相应的心理模型。在设计产品概念时也就难以使用隐喻、类比的方式来降低产品的复杂度。此时可采用「目标导向」的设计方法,帮助用户快速理解产品功能。因为用户除了基于过往经验建立心理模型,还可根据目标而对产品的行为模式做预测。

与其生搬硬套地创造概念,不如在合适的使用场景下,使用目标导向的大白话,清晰的传达出功能的目标效果。让用户快速了解产品功能的目标效果,减少全新概念的理解成本。

例如,在交互原型设计中,按钮往往存在多个状态(默认态、悬停态、点击态、禁用态)。Figma对其赋予概念“变体(Variants)”,用户难以对此概念产生目标效果的联想,无法建立起对应的心理模型。而在MasterGo中,亦存在相同的功能,但使用的是更加符合目标效果的大白话“组件状态”。

图片

 

三、如何让流程简短高效

1、快速、直观呈现效果

对于工具型产品来说,效果直观是非常必要的。一来能让用户的探索快速获得反馈,降低用户的理解成本。二来能带来更加轻量的操作体验,鼓励用户探索,给予用户充分的掌控感。工具型产品的设计者应以此作为设计理念之一。但难免会遇到产品功能的逻辑流程较为复杂,需要经历多个环环相扣步骤的情况。而研发者往往更关注与代码的逻辑及可维护性,更加推荐逻辑严谨但流程冗长的设计。这时设计者应坚守设计理念,不断在用户体验与功能逻辑中寻找平衡,贯彻落实设计理念。

对于冗长的流程,设计者可通过以下方式解决:

1.根据场景自动化配置

良好的产品应该是聪明、高情商的,能够根据用户的实际情况进行自动化的配置,以减少用户操作。在进行自动化配置时,应谨慎梳理清楚用户的所有场景,以及每种场景意图,避免过度聪明,导致画蛇添足。

例如,在Notion中可一键创建Timeline视图,无需用户进行任何配置。因为其做了场景自动化配置处理:自动配置所需要的字段。

图片

2.清晰的修改配置入口

在进行自动化配置后,不可避免可能存在场景理解错误的情况,导致自动配置的结果不符合用户实际情况。此时应提供清晰的修改配置入口,例如在用户可发现错误的地方中提供入口,允许用户在发现错误后即可发起修改。

3.异常后置处理,先让用户用起来

不应要求用户在功能生效前处理完所有异常。因为对于每一个步骤,用户都要付出理解及操作成本。尤其在处理异常情况时,用户需要耗费巨大的成本,极有可能因阻碍过大,从而放弃使用功能。设计者应将异常后置,确保用户能都快速查看功能效果并使用起来。对于异常的问题,应允许用户后续持续处理,不阻断功能的使用。

例如,在Figma中导入sketch文件会遇到,多种格式适配问题。但不影响导入流程以及FIigma的正常使用,用户可以在倒入后在对异常进行处理。

2、基于目标组合功能,一键快速设置

一般来说,工具型产品服务的用户群体较广,需要满足丰富的个性化需求。在产品功能设计上,功能的颗粒度较小,能支持精细化的配置。这样导致用户需要实现组合的目标效果时,需要执行多个功能配置,整体的配置流程较为冗长、复杂。设计者在设计工具型产品时,除了要考虑单个功能的使用体验,也要从用户目标出发,全局考虑用户使用产品的整体流程体验。

如何既能保持产品的「灵活度」以满足丰富的场景,又能减少整体操作流程,提升用户效率。「一键操作」及「自定义脚本」是较为有效的方法。

1.一键操作

基于用户的目标,可以对一些列相关的功能进行组合,允许用户一键设置,快速达到目标效果。同时应存在更多配置的入口,允许进阶用户进行更加详细的配置。例如,Keynote中可对文本框进行快速样式设置,设置内容包含字体颜色、文本框背景颜色。当用户需求较为简单时,只需设置一次即可达到目标效果,而无需设置多次。

图片

2.自定义脚本

自定义脚本,指允许用户将一系列操作/设置组合为一个操作组的能力。在一些进阶场景,用户往往存在个性化的需求,对产品功能有着相对固定的使用习惯。自定义脚本,能够极大帮助用户减少重复性的操作,提高整体效率。

在Figma中,充满了类似概念的设计,如:组件、样式(文字、颜色、效果)。用户可自定义保存相关的配置参数,以方便多次复用或一键修改。

图片

 

四、如何简化页面信息布局

1、围绕行为组织功能,走一步看一步

在设计界面原型时,需要先了解用户的任务目标,用户想做什么,先做什么后做什么。充分掌握用户心理模型的行为路径,基于用户的行为路径进行组织功能,以确保用户在每个环节中所看到的信息都是必要且准确的。工具型产品通常拥有多个可选设置项,拆分任务步骤可减少用户被非必选项的干扰。

图片

除此之外,不同的用户角色的行为路径也会有所不同,例如:创建者,协作者,以及是否有编辑权限等等。不同的用户场景对于功能的诉求也是不一样的,而这就需要设计师从产品的定位,主流用户以及使用习惯综合考量。在优先满足主流用户场景的基础功能上,再进行其他场景的功能增减。

2、功能层级分区,巧妙地藏起来

1.功能分区

George A. Miller在《神奇的数字7加减2:我们加工信息能力的某些限制》中表明,人的大脑最多同时处理7±2个信息块(即5-9个),若超过则出错的概率将会大大提高。对于无法避免复杂信息的情况下,可以将烦琐的信息分块,组织成清晰的层级结构,例如:微软Office 中顶部工具栏包含上百个功能选项,为了便于用户能快速找到想要的功能,他们将所有功能进行分块,包括:字体、对齐方式等模块。每个模块下再细分具体设置项,具体设置项又包含了其它功能。基于清晰的层级结构,用户可快速通过「字体模块」-「字体设置项」- 「微软雅黑」三个层级中快速找到想要的选项。

图片

值得注意的是在信息分块时,需制定出清晰的划分界限,可通过询问不同的用户来判断界限是否清晰。

与此同时,布局效果是否清晰,对于简化界面设计而言同样重要。合理运用「格式塔原理」中的「接近性原则」,将同类元素放在一起让用户在视觉上感觉是一组,再根据同组元素中的重要性不同,大小上也应有所差异。做到让用户只看一眼便可快速找到想要的功能。

2.隐藏高级功能

「帕累托法则(二八法则)」同样适用于工具型产品设计,即20%的功能影响80%的用户体验结果。换句话说,大部分普通用户经常使用的基础功能仅占20%,但影响程度却远超于剩下的80%。所以需将功能划分为基础功能和高级功能,在优先展示基础功能的前提下,再考虑高级功能或自定义功能的展示,必要时可将高级功能或自定义功能进行隐藏,但前提需是可见的。例如:更多设置,更多选项等,即对专家用户始终保持可见,但又不打扰普通用户。

图片

 

五、如何让操作更轻松

1、减少不必要的操作,使用更自然的交互

简化操作的过程中,针对不同的操作赋予最自然的交互形式能减少用户操作过程中的精力消耗。自然的交互应该是用户无意识的操作,是基于过往生活经验,阅历,学识等的一种本能,几乎不需要过多的学习成本即可完成。例如:用户旋转一张图片。相对于在输入框中输入旋转角度参数而言,将光标直接操控在图片上旋转显得更自然。输入需要至少三步(点击文本框-敲击键盘数字-点击确认),而直接旋转只需要两步(点击-旋转)。因为对于用户而言,点击图片进行旋转更接近现实生活中的操作,不管是交互步骤还是心理认知上,都会降低用户的操作难度,让用户觉得产品更简单更自然。

图片

2、提供及时的反馈与帮助,避免重复操作

在操作过程中得不到反馈,出错后再重新填写,同样会增加操作的复杂性。在尼尔森十大可用性原则中,第一原则就是系统状态的可见性。系统需要让用户知道自己在做什么,需要让用户知道系统做了什么。例如:在表单填写时及时反馈是否出错,在格式设置时及时反馈是否生效,可以让用户少走弯路。必要时给用户提供帮助也能简化用户操作的复杂性,提高操作的成功率。

图片

 

六、结语

引用《简约至上》中的所说:创造简单用户体验的秘诀就在于把复杂性转移到正确的地方。任何产品都具有一定的复杂性,设计的目的不是为了消除所有复杂性,而是将它们放到最合适的位置。简化产品的复杂性替用户排除不必要的干扰,通过设计师的努力给每一个用户带来简单、愉悦的使用体验,让复杂的工作更简单。

 

参考文献:

[1]Bill Moggridge.Designing Interactions[M].MIT Press,2006

[2][美]Alan Cooper,Robert Reimann,David Cronin,Christopher Noessel,Jason Csizamdi,Doug LeMoine.About Face 4 交互设计精髓[M].倪卫国,刘松涛,薛菲,杭敏译.北京:电子工业出版社,2015

[3][英]科尔伯恩(Colborne.G).简约至上:交互式设计四策[M].李松峰,秦绪文译.北京:人民邮电出版社,2011

[4]刘津,李月.破茧成蝶:用户体验设计师的成长之路[M].北京:人民邮电出版社,2014

[5][美]唐纳德•A•诺曼.设计心理学2:与复杂共处[M].张磊译.北京:中信出版社,2015


作者:ISUX设计

转载请注明:学UI网》面对繁冗,拒绝“摆烂”|工具型产品如何简化设计

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


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

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


这个效果原来是这样做出来的

seo达人


图片

 

正文

经常使用爱奇艺刷剧的同学,有没有发现爱奇艺的应用图标又变了。前段时间爱奇艺针对品牌设计进行了较大的调整,最近又悄悄地将应用图标的背景色换成了这种多彩色混合渐变的形式。

图片

针对这个视觉效果估计大家各有看法,我们就不讨论这个话题了,今天黑马哥是来出教程的~O(∩_∩)O~。

这个类似于极光/弥散渐变的风格最近也比较流行,在 UI 场景中的运用也是比较普及的,被运用到应用图标的案例中相对较少。大概的回忆了一下,也有一些产品会使用,特别是比较知名的 Instagram 很早之前就使用了,也成为了流行趋势中的优秀案例之一。

图片

通过极光/弥散渐变(混合渐变)的形式强化应用图标外轮廓背景,不仅可以提高视觉感,也是体现年轻化趋势的一种色彩表现形式。不过渐变中的色彩本身也是关键性的因素,如果色彩不够年轻活泼,带来的效果也是千差万别的。

图片

 

一、渐变的表现形式

渐变色在我们的设计中是非常普及的,渐变色分为线性渐变、径向渐变、角度渐变、混合渐变、流体渐变等形式。不同的渐变形式可以营造不一样的视觉体验,可以丰富色彩环境、强化光影质感、增强层次感和空间感等。

1、线性渐变

这是最常见的一种渐变方式,具备明确的方向性,由两种或者多种颜色组合形成。相较于单色来说,线性渐变可以使得画面更加丰富,色彩营造出的层次感更强。

图片

2、径向渐变

径向渐变是以中心向外扩散而形成的圆形渐变,可以作为立体感的表现,也可以营造向中心聚拢的光影效果。

图片

3、角度渐变

角度渐变形成类似于雷达扫描的效果,属于运用相对较少的渐变形式。在一些应用图标的外轮廓背景中会被使用,也可以作为营造产品的光影变化。

图片

4、混合渐变

混合渐变就是多种颜色随机混合,色彩形成不均匀的自然弥散开,也可以成为弥散渐变或者极光渐变。是最近比较流行的视觉风格,可以呈现出丰富的色彩变化和随性自然的年轻化趋势,被广泛应用到平面设计、UI 设计、电商设计等众多视觉设计领域。

图片

5、流体渐变

流体渐变就是多种颜色渐变组合,形成带有流动感的视觉效果,通常作为背景来丰富设计的视觉感。也有动态形式的流体渐变,在 APP 和一些屏幕壁纸中出现,带来的感官体验也是非常不错的。

图片

随着视觉感官体验的不断追求,设计师已经不满足于趋于平面化的渐变形式,探索出造型多变、色彩丰富、刺激感官的视觉体验,以更加丰富的表现形式来探索渐变方式。

 

二、渐变小教程

线性渐变、径向渐变和角度渐变实现起来比较简单,软件自带的渐变属性即可满足。下面重点给大家分享如何实现混合渐变的效果,以后再单独给大家分享关于流体渐变的技巧。

混合渐变顾名思义就是将多种颜色进行混合,形成色彩丰富的过度效果,需要把控的是颜色之间的自然过渡。

方法一:

通过绘制几个不同颜色的形状图形,然后执行高斯模糊形成混合渐变,模糊的参数值要适当大一些,一直到颜色自然过渡为止。

图片

方法二:

如果想要随机性大一些,可以通过画笔工具随意涂抹颜色,这样形成的效果更加随机性。然后再执行高斯模糊将颜色融合,带来自然随性的视觉体验。

图片

 

三、分享几个案例

不能只是纸上谈兵,只有反复磨练和尝试才会熟能生巧。根据以上的方式黑马哥完成了以下的作品案例,大家也一起来动动手吧!

1、邻近色系易把控

混合渐变技法层面来说并不难,配色是相对具备难度的,很多同学都会因为配色不到位而做不出优秀的作品。针对应用图标设计中的配色来说,邻近色系的搭配是最容易把控的。选择色相范围在 60° 以内的色值,混合出来的色彩排斥感都是比较低的,融合度比较高,能够呈现出比较舒适自然的视觉感官体验。

如果选择了色相角度大于 60° 的色值,只要数值的增减关系控制在 30° 以内都属于可控范围,这时候如果出现较大的色彩排斥感,可以通过降低不透明度来进行视觉平衡。

图片

2、强视觉感还得对比色

虽然邻近色的处理比较容易把控,但是带来的视觉感也是与颜色对比关系成正比的,想要达到强视觉感还得选对比色。色相选择范围在 120°~180° 之间的色值,容易形成较强的视觉张力,通过增加高斯模糊的值才能稍微过度相互之间的色彩排斥感。

图片

3、学会举一反三

今天分享的经验不局限于应用图标的设计范畴,我们要学会将这个技法举一反三,运用到更多的设计场景中。比如在下面作品中的一组信息卡片的设计中,通过混合渐变形成的卡片背景提高了局部的视觉感,配合磨砂玻璃质感的运用,提高了该部分的视觉感官体验。

图片

4、其他作品欣赏

为了辅助大家理解和开拓思维,为大家选择了几个类似的案例作品,希望可以带给大家更多设计灵感。(以下作品版权归属原作者,仅作为学习交流)

 

 

四、布置一个小作业

通过对混合渐变实现技巧的学习和案例欣赏,相信大家对于混合渐变有了比较全面的认知。学以致用的目的,下面为大家准备了一个小作业,希望以此来强化大家的理解。

图片

根据以上示意图提供的高保真原型图,以混合渐变的形式增强其作品的视觉感。

以下方案为黑马哥完成的一个示意,大家可以转换思维和调整新的配色方案,输出不一样的全新作品。

图片

 


作者:黑马青年

转载请注明:学UI网》这个效果原来是这样做出来的

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


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


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



给设计公司的UI设计需求文档怎么写?请看一下这段录的视频讲解吧!

蓝蓝

偶尔有来咨询的客户会询问:设计需求文档怎么写?给我一个模板吧。

加起来,这样问的客户也不少,所以蓝蓝设计录了一个视频讲解:给设计公司的UI设计需求文档怎么写?请看一下这段录的视频讲解吧!

设计基础(9):拆解B端产品,总结界面框架设计的3原则

seo达人




一、
上下结构

图片

这种页面结构将页面划分为「顶部导航」和「内容区」上下两层。常见于一些企业官网、信息资讯网站中,更偏向于信息展示。例如阿里云官网、新浪、知乎等信息网站。

图片

一般包含系统logo、功能菜单、辅助功能、个人中心等。功能菜单通常按照业务板块进行设置,并且会限制菜单数量,一般为4-6个左右。

根据业务需要,功能菜单也可以进行级联扩展,允许出现2级甚至3级菜单。方便用户更深层地了解系统功能,同时提高用户的操作效率,实现深层页面的快速直达。

图片

我个人认为,顶部导航的优势并不是不占用页面横向空间。因为信息展示类的网站对横向空间要求并不高,有些网站为了避免用户视觉横向跨度过大,采用的是版心定宽设计。企业官网产品则采用响应式布局,让界面可以适应不同的屏幕宽度。

顶部导航的优势在于面积小,对页面的分割比较弱,不会对内容产生太大的影响。另外横向排布更符合用户的视觉习惯。

在展示形式上,顶部导航更加灵活,可以将菜单形成独立的信息空间。例如百度官网的顶部导航,与Banner形成强烈对比,内容清晰可见。

图片

顶部导航也可以与页面内容融为一体,减少对内容的干扰。例如巨量引擎的官网中,将顶部导航与Banner信息混合,更加强调内容信息的传递。

图片

在交互操作方面,页面向下滚动时,顶部导航可以自动隐藏,从而为内容提供更大的可视面积;页面向上滚动时自动展示,方便用户的快速切换到其他菜单。

 

二、左右结构

对于简单或者复杂的业务系统,顶部导航数量会面临过少或者过多的问题,于是就出现了左右结构布局。

图片

面对简单的业务系统,左侧导航的形式不会产生大量的页面空白。例如百度网盘网页版,Teambition都是采用的这种界面框架,将一级菜单简化,与二级菜单并列展示,视觉关联性也更加紧密。

图片

面对复杂的业务系统,左侧导航可以承载较多的菜单量,并且树形结构配合展开收起面板功能,具有很好的延展性。例如有赞个人店铺左侧导航承载了10+个的业务功能。

图片

不过左侧导航的缺陷也比较明显,主要有以下几个方面:

  • 尺寸空间大
为了尽可能地减少挤占内容区信息空间,通常会增加「收起」功能;
  • 限制多

为了控制导航宽度,菜单名称的长度需要做出限制,避免出现无法完全展示的情况;对系统logo和名称也会有要求,不太适用于名称较长的系统;

  • 操作效率不高

默认收起的菜单项中,需要展开才能操作;如果信息层级较深,逐级渐进展开的方式也不方便用户操作,因此对信息层级也需要做出限制;另外用户无法直观地全览所有业务功能,尤其是对于新人用户不友好,需要逐个点击才能了解系统功能;

所以在设计时,需要针对以上问题进行优化设计。以下是部分产品提供的解决方案:

1)单层信息+级联信息

有赞产品左侧导航,沿用了顶部导航的交互方式。没有采用收起展开的方式,而是采用级联菜单形式,悬停即可显示,从而方便用户快速切换。

图片

2)默认全展开

菜单功能默认全展开,减少用户的操作。在微信公众号、阿里云、知乎创作中心等平台中,左侧导航都是默认展开的,用户不需要逐级展开,便于用户快速切换菜单。在后续的使用过程中,用户根据的自己的需要,手动收起不常用的功能就可以了。

图片

3)双列布局

对于功能繁杂的系统,默认全展开的方式,会导致导航区过长,用户查看起来不方便。因此需要增加菜单的信息密度,减少导航的整体长度。例如拼多多商家后台采用双列布局的形式,当然这种场景下,会增加左侧导航宽度,挤占内容区的空间。

图片

4)查看全部

在门户网站中,信息分类非常多,普通用户通常只会用到高频信息。为了让用户能够全览网站所有的信息门类,网站还提供了「网站导航」功能。

图片

在B端产品中,也需要考虑如何让用户了解平台的全部功能清单。例如钉钉管理后台在左侧导航底部增加了「查看全部」功能,展开后用户就可以看到全部的功能菜单。

图片

在形式感上,左右结构的布局会对系统logo 和名称进行压缩,我个人认为整体风格不如上下结构正式,对品牌形象表现力不足。因此该结构主要用于一些工具产品或者轻量型的系统,在大型的业务平台或者G端的项目应用较少。

通过上面的案例,我们可以看到B端产品基本上是以「混合布局」的模式构建界面框架。

 

三、混合布局

在B端产品中,混合布局既有贯穿的顶部区域,可以承载导航菜单和产品框架信息,又在内容区增加左侧导航,提升导航信息承载量,更好地满足业务功能需要。

图片

例如巨量纵横产品中,采用了顶部导航和左侧导航相结合的方式,将产品划分为几个独立的业务单元,用户可以根据自己的工作目标去选择对应的功能。同时也减少了左侧导航的信息承载量和层级,方便用户操作。

图片如果系统功能极其复杂,传统的「顶部导航+左侧导航」的模式已经无法满足产品需求。例如云类产品都是大型的业务平台,包含几十项业务功能,于是构建了「产品与服务」的中心模式,集中全量展示所有业务功能,方便用户浏览查看。在一定程度上也增加了用户探索更多功能的欲望。

图片

在这种模式下,每个独立的产品或服务则形成了子系统空间,采用统一的混合布局方式,让原本复杂的业务系统变得简单。

图片

另外还有一个小细节。

左侧导航菜单带给用户的心理暗示是「切换」,用来控制右侧内容区信息。当我们在左侧导航中嵌入其他系统功能时,如果是「跳转」的操作方式,需要增加指示图标,如下图所示。

图片

 

总结

以上就是关于B端产品界面框架的内容,我们可以得到3个设计原则:

1、符合产品的定位和业务需要

产品界面框架要能够承载产品的整个业务体系,并且具备足够的延展性,需要考虑到产品未来升级和发展。

2、保证用户的操作效率

导航的形式会影响到用户的操作效率,因此在层级设定上需要谨慎,避免层级太深影响用户的操作效率,目前主流的左侧导航以2层为主。

3、全局视角

导航是用户了解产品功能的第一渠道,在设计时既要考虑到用户用起来的感受,也要能够让用户更直观的了解系统全局。


作者:子牧先生

转载请注明:学UI网》设计基础(9):拆解B端产品,总结界面框架设计的3原则

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


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

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




设计基础(7): 简约设计4原则在表单设计中的应用

seo达人


图片

 

一、删除,实现表单轻量化

前几年,我们在银行或者移动营业厅开通一些新业务时,都会填写表单,通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2~3项,业务人员会特意勾选出来给客户,其余的都是非必填项,或者是业务人员填写的。

线上表单设计时,没有专门的业务人员指导,用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量,降低用户的认知负荷。

最近在做一个表单的优化,业务方要求增加“入参”、“出参”两个表格项,说是用户会看。与用户沟通后,反馈也说“会看一下”。但是在深度挖掘用户场景后,发现用户确实会查看这个信息,只不过不是在当前环节查看,而是在结果项中查看。

所以我们最终去掉了这两个信息量较大的表格内容,从而让整个表单的信息量得到了明显的下降。

因此面对复杂长表单,我们需要从需求入手,判断是否有必要让用户提供如此多的复杂信息。

 

二、组织,让表单更加有层次

当我们不得不面对复杂表单时,如果采用简单内容平铺,用户看到的是满屏的散点信息,造成信息识别困难,用户一时间难以找到填写思路,反而增加用户的心理负担。因此信息的层次性,对于复杂表单至关重要。

首先要从内容和视觉层面让复杂信息变得清晰、规整,更加符合用户的认知习惯。例如,可以利用分组标题、分割线、卡片,按照不同信息的类别、属性和相关性进行区块划分。

根据不同的布局和交互,主要有以下4种表单设计模式。

图片

 

1、顺序表单

表单分组后,可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单,这种布局方式下,用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。

1)平铺表单

图片

2)卡片表单

图片

因此顺序表单更多地用在业务信息比较简单的场景中。

 

2、锚点表单

为了解决长表单的定位效率问题,可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。

根据锚点的布局,可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说,锚点表单是顺序表单的优化版本。

图片

图片

 

3、标签表单

如果长表单内容没有依赖关系,还可以将表单拆分为几个相互独立的标签内容,这就是标签表单。

图片

不过标签表单更强调内容的并列关系,常用于配置表单中,例如 MAC 或者 Windows 系统的配置弹窗。

图片

标签表单在全新表单中应用较少。因为标签表单容易造成内容遗漏,并且无法告知用户哪些标签已经填写,哪些标签未填写,或者无法清晰地展示校验信息。来回切换标签查看信息,也会影响效率,因此主要用于用户有目的的配置行为中。

 

4、步骤表单

步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来,形成一个完整的业务闭环。例如阿里云的云服务器订单流程,或者一些开户流程等。

图片

 

步骤表单有几个特点:

1)过程串联

理论上来说,步骤表单有明显的操作顺序,用户需要按照节点完成内容填写,因此不会产生信息遗漏。当然也可以根据实际的业务场景,设置选填节点。但是总得来说,步骤表单更强调的是顺序操作。

2)业务引导性

对于复杂业务,步骤表单可以将分散在不同页面中的独立业务串联起来,在一定程度上具备新人教学功能,帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转,从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。

3)逆向操作

由于步骤表单存在正向和逆向操作,因此设计时还需要考虑清楚逆向操作的设计逻辑。例如:

  • 当用户想要修改前面步骤信息时,除了逐步返回,是否可以步骤条直接跨节点修改?
  • 用户中途退出表单后,重启时是从第一步开始,还是直接从未填写的步骤开始呢?
  • 用户如果完成了步骤条表单填写,想要二次修改时,是用普通表单,还是仍然使用步骤表单形式呢?

4)节点的平衡性

步骤表单可以分拆信息,化整为零。但是信息节点也不能过多,否则同样会影响用户的操作效率。所以要减少不必要的流程节点。

最近在做设计时,发现步骤表单最后一步是内容预览。通过用户调研发现,部分用户会谨慎地预览前面4步填写的内容。而另一部分用户则认为,刚填写了内容不需要预览,强制预览的设计并不友好。该如何平衡设计呢?

最终我们选择了将预览节点取消,将预览功能调整到第4步,采用「预览」按钮的形式。既满足了部分用户预览的需要,另一部分用户也可以不做预览,直接提交申请。

所以步骤表单过程中的节点具有一定的强制性,需要谨慎对待,保证节点的合理有效。

 

三、隐藏,让表单更加灵活

1、模块隐藏

表单实际上是任务信息的集合,为了具有更高的适配性,内容通常是多种场景的集合。而场景有高频、低频区分,对于高频信息需要优先展示,便于提高用户的填写效率;对于低频场景,可以隐藏弱化展示,从而降低整个表单的复杂度。

例如我们常见的「高级配置」,通常在表单的底部默认收起展示。

图片

 

2、信息隐藏

复杂表单中信息会出现多级信息共存的场景。这种场景下,复杂表单默认展示当前选项对应的子内容,隐藏其他选项的内容,从而提高信息的指向性。

图片

 

3、合理的组件形式

比较典型的就是单选和下拉选择器如何选择。有人为了强调效率,一味地追求单选按钮平铺展示,认为单选更加直观,用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择,反而增加了整个页面的信息量。

所以单选框更多用在备选项较少的场景,如果备选项较多,建议优先采用下拉选择器,隐藏备选项。

 

四、转移,扩展表单的异步空间

1、信息转移

在表单设计时,可以将部分二级信息转移到弹窗、抽屉中,利用浮层空间拓展业务内容,根据用户操作逐级加载出来。从而减少表单的信息量。

例如下图中,没有将「所有配送区域及运费」直接展示出来供用户选择,而是放在了弹窗中,表单中只呈现最后的选择结果。既简化了表单的内容,又让选择结果更加突出,方便用户的查看和校验。

图片

 

2、记忆转移

现在很多浏览器都增加了密码存储功能,减少用户记忆成本。

而在电商购物网站可以设定默认的收货地址。系统自动读取调用,从而减少用户的输入操作。

 

3、行为转移

现在越来越多的网站支持「手机短信验证码」免密注册登录方式,或者第三方登录方式,或者手机端扫码登录。将原有的表单填写转变为系统行为,从而降低用户的行为成本。

图片

好了,以上就是我总结的表单设计的内容~

 

重复一遍:

  • 删除,实现表单轻量化
  • 组织,让表单更加有层次
  • 隐藏,让表单更加灵活
  • 转移,扩展表单的异步空间


作者:子牧先生

转载请注明:学UI网》设计基础(7): 简约设计4原则在表单设计中的应用

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


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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档