首页

设计基础(4):B端中后台管理系统色彩体系

seo达人


 一、色彩分类

不同于C端产品的运营、营销场景,要求设计的多样性,紧跟设计流行趋势。B端需要相对稳定的色彩体系,这样才能保证产品设计的高效可控。

色彩和布局、字体都是底层的全局样式,因此需要适配各种应用场景和组件设计。纵观各个大厂的设计系统,通常会将色彩划分为4种类型。

图片

1、主色

主色是产品最核心的颜色,使用频率最高,可以说是构成产品风格的关键要素。常用于突出信息、引导操作、功能状态表达等。

中后台管理系统的主色通常首选品牌色,可以更好地传递品牌价值,构建统一的界面风格。例如TDesign 以腾讯蓝(Tencent Blue)作为主色;公众号管理后台采用的是“微信绿”,飞书后台管理系统采用“蓝绿”品牌色。

图片

图片来自TDesign

当然并不是所有的品牌色都可以用作主色。在后台管理系统中,工具类产品的属性比较强,更强调产品的科技感、稳定性,需要帮助用户沉浸式地完成工作任务,因此以蓝色为代表的冷色系应用更多。

而过多的暖色调则会让人兴奋,应用相对较少。例如阿里云在框架层面、概览信息中采用了品牌橙色作为主色,功能页面还是以蓝色为主。华为云只是将品牌红色用在了主按钮上,其他内容配色仍然选用蓝色。

2、功能色

B端产品还需要借助色彩,向用户反馈操作结果、系统状态等信息。最典型的就是成功、失败、提示/警告、错误、链接等,这些都属于功能色。

功能色系需要符合用户的认知习惯,例如一般都是以绿色代表正常或者成功、橙色为警告、红色为错误、蓝色作为链接。用户不需要阅读文字信息,就能直观地了解信息背后的状态。

图片

图片来自TDesign

3、中性色

中性色主要是黑白灰三种颜色,由于没有冷暖,也没有色相,又称为无彩色系。常用于文字、背景、图标、边框和分割线等元素。

中性色非常重要,在页面中应用最多。由于是无彩色系,只要控制得当,可以大面积使用,不会增加界面的信息负担,反而有利于形成内容层次和区域划分,让界面更加有序,内容结构更加清晰,还不会影响界面风格。

图片

图片来自TDesign

当然中性色使用时,需要有比较明确的色彩对比关系,否则可能模糊一团,影响信息的可读性。

另外在某些场景下,中性色还可以加入一定的品牌色,让中性色带有品牌倾向。在TDesign中,将品牌色的混合比例定为 20%。

品牌中性色的计算公式如下:

Average(r,g,b) = 0.2*(r1,b1,g1) + 0.8*(r2,b2,g2)

4、扩展色

在B端产品中,还会有更多颜色需求的场景,例如数据可视化、插画等场景中。为了保证界面的协调,扩展色可以由主色或者功能色扩展而成,主要考虑页面整体风格的美感和用户体验。

 

 

二、构建色彩体系

在确定基础颜色后,需要通过灰度或者透明度,衍生形成色彩体系,满足各种场景的颜色需求。这就需要了解一些色彩的基本理论。

1、HSB色彩空间

我们最开始学习色彩的时候,必然会提到三原色的概念。

光学三原色(RGB):红、绿、蓝。三原色混合后,组成显示屏显示颜色,三原色同时相加为白色。RGB是从颜色发光的原理来设定的,当它们的光相互叠合的时候,色彩相混,而亮度却等于两者亮度之总和,越混合亮度越高,即加法混合。

当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。

在设计调色时,RGB模式并不好用,我们优先选择更容易理解的HSB模式,也就是色相(Hue)、饱和度(Saturation)、明度(Brightness),通过这三个维度更便于色彩调整。

1)色相(Hue)

色调就是颜色在色轮的位置,标准色轮是0-360°的圆环。在日常使用时,色相用颜色名称标识,比如红、绿或橙色等等,黑色和白色无色相。

2)饱和度(Saturation)

饱和度可以理解为颜色的强度或纯度,表示色相中灰色成分所占的比例。通常以“%” 来表示,范围是0%~100%。饱和度越高,颜色更加鲜艳;饱和度越低,颜色就会灰暗。

3)明度(Brightness)

明度是颜色的明暗程度,通常也是以0%(黑色)~100%(白色)来度量。

将这3个维度集合起来,可以搭建出HSB色彩空间。调整3个参数,就可以选择我们想要的颜色。

图片

不过在Figma、Sketch、Photoshop这些绘图软件中,色彩面板都是以平面的方式出现的,并且增加了透明度参数,形成更容易调节的HSVA色彩空间。

图片

2、搭建色板

确定好基础色后,可以通过HSVA模型生成一系列的色板。包括2种方法:

1)透明度调整法

可以设定一系列的透明度系数得到浅色梯度,或者叠加黑色透明度得到深色梯度,借助吸色工具就可以得到对应的色值,最后根据视觉效果微调即可。

图片

2)饱和度/明度参数调整

在保证色相数值不动的情况下,直接调整颜色的饱和度和明度。浅色系一般是要降低饱和度,提高明度。而深色系则需要降低明度,根据视觉效果调整饱和度。

图片

除了设计师自定义之外,有些设计系统还提供了算法工具,自动生成色彩梯度。

例如Ant Design、Acrodesign都提供了色板生成工具。并且Ant Design 还提供了主色参数建议:饱和度和明度不低于70。

Ant Design色板工具地址:

https://ant.design/docs/spec/colors-cn

Acrodesign色板工具地址:

https://arco.design/palette/list

 

 

三、色彩应用

一旦建立了色彩体系,正常情况下,选择规范颜色就可以了。不过由于设计规范中,我们定义的色值默认是应用在白色背景中的。

实际使用时,字体或者图标应用的背景色会比较复杂,例如背景色可能是不同色阶的主色、功能色,或者带有遮罩层的场景中。不同的背景色会对视觉显示产生影响。但是我们又无法穷尽定义所有可能性,这样既增加了设计师的工作量,也会增加开发的工作量。

为了满足这些场景的色彩需求,除了固定色值的方式,还可以增加透明度梯度。让内容可以与背景色融合,带给用户更好的阅读和视觉体验。

图片

图片来自Ant Design

 

写在最后

归根到底,色彩规范只是为了让设计更有章法和依据。B端产品界面设计,还是需要谨慎克制,要在规范内合理使用色彩,善于利用色彩清晰区分和传达信息,引导操作,不要让色彩成为了界面的干扰因素。

参考文献:

https://ant.design/index-cn

https://tdesign.tencent.com/

https://arco.design/

http://www.woshipm.com/pd/4928465.html

 

原文地址:子亩UXD(公众号)
作者:子牧先生
转载请注明:学UI网》设计基础(4):B端中后台管理系统色彩体系

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

截屏2021-05-13 上午11.41.03.png

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

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

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




表格体验优化指南【一】-B端设计

seo达人


 

 

本期内容概览

下图为内容目录,大家可以通过下面的目录针对感兴趣的内容进行选择性阅读。文章分为两小章节类,从最基础对表格的认识再到表格如何提升“易读性”进行分享。

 

 

什么是表格?

 

我先从表格的最基础的基本认知跟大家分享,帮助大家对表格有个初步的认知。那么什么是表格呢?用一句概括:“将复杂的内容进行「归纳整理」,将「信息展示」给用户,帮助用户高效率的进行「数据分析」。”

 

1. 表格的意义

1.1. 表格定义

表格是一种常见且最有效的信息组织整理手段。在B端产品应用中“表格用于组织并呈现结构化的数据及信息内容,通常会提供对数据对数据及信息的操作能力,进而方便用户阅读、分析、比较数据”。

单元格:通过纵向与横向的分割线组合而成的“单元格”构成了表格的基本单位。

纵列、横列:表格中纵列、横列是由多个单元格进行横向、纵向排布组合而成,他们相互独立又相互关联;

表体:是由多行和多列的单元格组合而成,用于显示数字和其他项以便快速引用、分析和操作。

1.2 表格应用

表格在B端产品中它是页面布局的重要组成部分,可用于展示结构化数据、静态信息以及处于变化中的数据。表格中行与列形成了单元格的宽高,不同的宽高有着疏密之别,使信息之间更易于对比,大大提升了用户对信息的接收效率和理解程度。

因为表格是常见的信息组织手段,所以数据经过归纳整理和合理布局后,更易于用户感知并分辨其中的差异、变化、关联,可以将数据进行对比分析。如下图所示:

 

2. “表格”的构成

常规情况下,可以把表格分为:a. 内部构成元素,它包含了表格头部、表格主体、表尾;b. 外部构成元素,它包含了表格筛选区、按钮操作区、底部区;

2.1 内部构成元素

如下图所示为表格的内部结构样式。

1)表格头部:表格每一列的标题作用包括属性分类或基本概括,还包括了对列进行排序、筛选、冻结等功能。但是,不建议在表头进行筛选等复杂操作。

2)表格主体:表格主体是由表格的多个基本单元格组成,它主要展示表格的主体信息内容。

3)表格尾部:一般承载统计信息,如总计、平均数等。

2.2 外部构成元素

如下图所示为表格的外部结构样式。

1)表格筛选区:它是针对表格主体内容进行筛选。

2)按钮操作区:它是针对表格内部元素做整体的操作,按钮区的操作可分为增、删、改操作和业务处理操作(比如常见业务中常用到的自定义列)。

3)表格底部区:底栏一般放统计信息、分页等内容。

2.3 常见的布局规则

一般来说,表格有水平型、垂直型两种布局。

垂直布局

是在行分割的基础上,通过强化列的视觉特征来突出行间信息的对比,如下图所示:

水平布局

弱化列的存在,强调信息的连贯性,保证用户阅读信息时视觉流是从左到右的,然后自上而下逐条扫描,适合大量信息的浏览。

 

3. 表格类型

类型一:基础表格

最基础的表格,由表头和单元格组成,无其他拓展操作,对信息进行最基础展示。

几种常见的风格样式:1)常规型,仅显示横向分割可减少整个网格的视觉干扰;2)斑马纹,隔行交替使用底色来区分数据横向对比;3)田字型,单元格有均匀而明显的分割线,边框单元格比较明显。

类型二:固定行表格

用于固定表格高度内容区不能完全展示内容的场景,出现滚动条可滑动预览,滚动仅发生在表格内部,表格内有一个独立的垂直滚动。如下图为腾讯投放广告表格,当表格纵向区域内容过长时可上下滑动页面预览:

类型三:固定列表格

用于固定重要信息列,在宽度有限的页面窗口中表格横向内容不能完全被展示的场景,可左右滑动查看其他更多的内容信息。如下图为腾讯投放广告表格,当表格横向区域内容过宽时可左右滑动页面预览:

类型四:单/多选表格

表格可进行单选/多选。如下图为腾讯投放广告表格,可以进行列的选择并将其进行编辑操作:

类型五:可展开表格

表格行可以展开/折叠信息,一些次要的或扩展内容会被折叠起来,有必要操作或查看时可进行展开。如下图为腾讯投放广告表格,他将一些延展的详情数据收起,用户可点击展开:

类型六:树表格

当数据信息有清晰的层级关系时,可以使用树表格。如下图Demo所示:

 

4. 本章总结

本章属于本篇分享的第一章节。主要将表格存在的意义进行了定义,把表格的主要使用场景和作用(价值)进行详细分析,目的是想让大家了解实际工作中应该在什么的场景下如何使用表格。同时也将表格的主要构成元素(内部、外部)进行了拆解,目的想让大家了解后能够正确设计表格。为了方便大家的理解,也通过图文结合的形式更具象、更清楚的提高阅读理解。

 

 

如何提高表格的“易读性”

表格内部构成元素分表由表格头部、表格主题、表格尾部组成,因此提升表格的易读性可以从表格内部着手优化;

 

1. 提升表格易用性因素

1.1 易读性(本期重点)

易读性是指通过使用表格高效的将数据进行展现、传递给用户。表格中的数据需要结构化、展现规则一致、视觉层级清晰,这样即可以将大量的数据进行有效的归纳与分类并陈列信息,又可以表达信息之间的关系;

1.2 易操作(下期重点)

将表格中大量的数据通过筛选、搜索、排序、分页这四个操作提供给用户,帮助用户快速查找、对比、分析的操作,进而达到易操作的目的;

2. 内部构成元素易读性设计

2.1 表头提升易读性的方法

方法一:冻结表头(也是表格的一种类型)

将表格头部固定,一般使用在电脑屏幕显示不全表格纵向内容高度时,为满足用户在向下滚动表体的场景下也能实时有效阅读表体数据与表头属性描述,从而有效提升表格使用易读性。如下图为腾讯投放广告表格,当表格纵向区域内容过长时可上下滑动页面预览:

方法二:多级表头

信息层级分类较多、结构较为复杂时,可使用多级表头来体现数据的层次关系。注意:表格头部的层级需要尽可能的简洁,避免过重的表头增加用户的阅读成本导致失去表格的意义。如下图Demo所示:

2.2表体提升易读性的方法

方法一:行高设置

表格主体是由表格的多个基本单元格组成,它主要展示表格的主体信息内容,所以我们控制好每个基本单元格的高度及可控制表格行高。我们可以使用《原子设计》理论将单元格再次拆分,我们可以把单元格看作是一个分子,那么组成单元格的原子是文字、分割线;

表格行高=单元格行高=文字大小+文字行高+上下边距(Padding)+分割线,如下图所示:

 

文字大小设置:一般出现在表格中的文字大小都在12-16px之间,通常12-14px最为常见,建议大家设计也在此范畴内。

文字行高设置:行高是指在多行里面一行文字与另一行文字之间的的间距,每行文字占用空间的高度。我们定义行距(行高) = 字号 + 行间距,而不是单指字体高度,所以文字的高度不等于字号的高度,如:字号12px,行高为22px,根据Web页面平均分配原则,行距就是从文字的顶端上移4px到文字底部下移4px的距离。如下图所示:

一般行高可设置为字号的1.2-1.8倍,具体情况可按实际的场景诉求制定规范,比如:可以制定几个梯度(紧密、正常、宽松)来配合场景的应用,当文本内容较多时为了不让文字密度那么高可以使用宽松梯度做应用,当空间较小但又想承载更多的内容可以使用紧密梯度做应用;

具体可以查看我之前分享的《文字规范系统》

上下边距(Padding):表格中的边距上下个方向。如下图所示:

分割线:垂直分割线可跟随列的数量(表格列的密集程度)判断是否需要,一般而言一屏列数较少时可不配置,可减少视觉干扰让表格更简洁,使用列与列之间的间距作区分(格式塔原理)。但是一屏需要展示较多列时建议加上垂直分割线。

但是水平分割线在表格中一般情况下会存在,它能显著减轻表格在垂直方向的视觉重量,提升用户进行大量数据对比时的速度。

那么问题来了,在设置单元格的时候分割线需要加进去吗?答案是需要,但是每个单元格只需要在下方加一个1px分割线即可。举个例:单元格行高为56px,那单元格容器高度=55px+分割=1px。如下图所示:

 

小结:单元格行高是由字体大小、字体行高、上下边距、分割线组成,表格行是由多个单元格组成,标体又是由多个表格行组成。所以,在实际应用场景中可设置字体大小、字体行高、上下边距控制单元格的高度,进而满足设置表格行高的诉求。如下图拆解:

注意:在制作规范时尽量避免出现超过3种以上类型表格行高(不然很难管理和规范使用),可以预设紧密、正常、宽松来配合满足不同业务场景的诉求。

方法二:行宽设置

表格行宽也就是单元格宽度是由内容容器、左右边距组成。如下图所示:

那么问题来了,当随着不同大小的屏幕如何做自适应规则呢。可看下图,将图中A1部分固定宽度,不随页面缩小/拉宽而变化,A2部分看作为自适应部分,它跟随页面缩小/拉宽而变化。如下图所示:

方法三:固定列 (也是表格的一种类型)

将表格中的最关键的内容与操作放在首尾列并固定,帮助用户便捷阅读、操作,未固定列可通过鼠标左右滑动方式查看。优势是在宽度有限的页面窗口中可以左右滑动查看其他更多的内容信息。如下图为腾讯投放广告表格,当表格横向区域内容过宽时可左右滑动页面预览:

注意:这里是指首尾列固定位置,而不是固定列的宽度。对于使用鼠标用户而言,水平滚动交互体验不佳。因此,尽可能通过调整列宽,避免出现水平滚动的情况。

适用场景:当表格的列数量过多导致宽度大于页面宽度时的场景。

方法四:可拖拽列

可伸缩列是指用户可手动拖拽表格某列的宽度,从而达到最佳可阅读状态。如下图为腾讯投放广告表格所示:

可拖拽表格注意事项:

1)需设置列最小宽度:可按属性(日期、ID、数字、图片等)进行定义最小宽度设定,比如正常文本类,如姓名、描述字段可设置最小宽度为3个中文字符、电话号码类固定为11个英文字符等、图片的最小列宽不影响图片的可阅读,超出部份换行显示;

2)某列的宽度被手动调节宽度后,其余列的宽度应当不受影响,如果调整后,如果所有列宽总和大于屏幕宽度时可采用横滑的形式展现;

可拖拽表格适用场景:

表格的数据内容可以很简单或非常复杂。但是预设的宽度并不能给用户最好的阅读体验。这种情况下,我们可以使用宽度可调整的表格,让用户在浏览时根据需要,自主控制表格列的宽度。

方法五:数据处理值

一般用在需要表格原始数据的基础上给出数据差值、数据升降变化、数据平均值、数据总计等处理结果为导向,目的是减少用户再次需要处理加工数据的过程,提升用户阅读信息的效率。

比如,用户想快速查看对比某两个时间段数据总计情况,那么可以在表格底部或表体第一列给个总计行,供用户进行快速查阅。如下图为总计案例Demo:

方法六:自定义列

提供自定义列设置可让用户根据自己的诉求来定义表格的列展示列及顺序,常常用在表格中列数特较多场景。用户可以根据自己的需要,自由的选择显示所需指标,隐藏不必要指标,减少干扰。

首先用户可以在操作中预设几个常用的自定义列展示,方便后续的延用。其次在对表格列的定义设置弹窗中可分成两个操作区:1、用户先在左侧选择希望在表格中展示的列;2、右侧可对表格列字段进行排序。如下图为腾讯投放广告表格所示:

注意:系统应记住用户上一次的自定义列设置,减少用户操作成本。

2.3 表尾提升易读性的方法

方法一:提供分页器

在数据量较大的表格中使用分页器有以下四大优势:

1)方便用户看到的内容尽可能聚焦,避免信息量过载。

2)分页可以缓解服务器的数据加载压力导致的加载时间过长。

3)分页可以跳跃查看数据,灵活性更高、步骤更短。

4)用户在表格浏览时可作为导航提示作用,告知用户浏览哪几条数据及数据总条数。

 

分页器“解刨”(延展部分)

既然说到分页器,那我们来细聊一下这个组件。首先,我们应该得知道分页器是一个独立的组件,而不是表格组件中的一部分,在本文中他与表格一起出现只是应用场景之一。

一般应用应用在展示大量内容或数据条目时,为了使用户看到的内容尽可能聚焦,避免信息过载,我们应使用分页器将内容分成多页展示。分页器分为常规、简洁两种类型;

常规分页器

1)翻页按钮:用于在前后页面之间翻页导航功能;(必要)

2)当前页码:高亮的当前所在页码,告知用户页面中数据处于当前位置;(必要)

3)普通页码:用户点击可快速切换至该页;(必要)

4)截断符号:当页面过多时用于省略中间页,同时作为快速导航及被省略页码的操作入口;(必要)

5)条目设置:用于设置每页显示条目数量;(可选)

6)总页数:通过使用总页数告诉用户知道大概会有多少数据;(可选)

7)页码跳转:帮助用户从当前页面跳转到其他某个页面;(可选)

简洁分页器

1)翻页按钮:用于在前后页面之间翻页导航功能;(必要)

2)页码提示:a、提示用户当前页/总页数;b、点击出现现下拉选择,用户可以直接跳转到某页面;(可选)

 

3. 数据如何展示

3.1 从属信息展示

通常为了提高用户的快速浏览效率,减少次要信息的漏出。表格不会默认展示所有的信息,一些次要的、不是必须要关注的数据内容将其折叠起来,用户有需要时可通过行展开的方式呈现。

方法一:使用嵌套子表格

将表格中父级行数据下的多条数据关联数据进行嵌套。它能够对主数据进行更加细致的解释,详细的了解主数据中数据的含义。如下图所示,就是在一个表格中还能嵌套另一个表格:

方法二:使用树形表格 (也是表格的一种类型)

树形表格是指表格的主要列的数据组织方式是一个树结构,他可以时是多级树结构的展现形式,对应的列数据(多级)与标题强相关。当数据信息有清晰的层级关系时,可以使用树表格。如下图Demo所示:

方法三:使用可展开 (也是表格的一种类型)

表格行可以展开/折叠信息,一些次要的或扩展内容会被折叠起来,有必要操作或查看时可进行展开,比如:可以是表单字段详情、可以是介绍说明等。如下图为腾讯投放广告表格,他将一些延展的详情数据收起,用户可点击展开:

 

3.2 单元格空数据展示

在表格字段展现中进场会有某个数据为空的情况,这时候建议大家不要用户“0”或“空白”展示。因为在无数据/空的情况下用“0”容易误导用户数据是“0”,一般用会用“-”来表示数据为空(用户惯性认知)。

3.3 默认排序

默认情况下常以创建时间进行排序,把最新创建的数据排在表格的最前面。因为用户路径是创建后对最新的操作评率较高,方便用户查找。我们可以假设如果创建一条数据后,把最新数据放在最后一列,那么用户在查找需要额外的搜索/筛选/使用分页,增加了用户的操作成本。如下图所示可以默认时间排序,也可以按升序排序:

3.4 数据的对齐方式

合适的对齐方式能够提升数据的浏览效率,比如:常见的文本左对齐,数据类右对齐。表格内信息的纵向列对齐符合格式塔中相近原则,它能够很好将表格每列的数据形成一个个组的视觉效果。通过正确的对齐,会让表格更加规范并易理解,从而快速提升数据的浏览、对比效率。

数据类型

数值类型右对齐:便于用户直观而又准确地读取数据,要做到一眼观定、简洁明了。在表格中数值分布排列时,通常采用“右对齐”方式,既方便用户快捷读取数据,还可以使用户进行纵向数据对比。比如常见的金额、人数、大小等,可以通过数据位数的长短直观对比,因为在表格中对比数字时,阅读顺序是看个位、十位、百位…等。注意:数据格式需要保持一致,避免出现格式不一致的情况,比如:100.89、100、100.1;应该:100.89、100.00、100.10格式。

 

布尔型左对齐:比如常见的男/女、是/否、真/假等。

文本类型

固定或不固定长度文本都是用右对齐,固定长度是指文本长度不会发生变化,比如:日期、手机号等;不固定长度是指正常的项目描述、解释说明、名称之类格式和长度都不固定。应为左对齐符合中/英文的阅读习惯,如下图所示:

3.5 数据格式

规范数据表达,保证直观准确一致的理解数据,比如:数值用来表示计量大小,它可单独出现或搭配数字符号进行使用等一些规范。

大额计量

如果一个金额很大,那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大,那么数值中的“万”“亿”单位可采用汉字。

 

数字脱敏

数据脱敏是指对某些敏感信息通过脱敏规则进行数据变形。下图为通用场景,遇到数据安全性较强的业务场景,可根据业务场景自行调整。下图为常见脱敏类型及通用使用方式:

时间日期格式

数值符合展现

在表格中数值用来表示计量大小,它也可单独出现或搭配数字符号进行使用。

计量单位

在表格中,计量单位默认放在表头,并默认右对齐。如下图所示:

 

本章总结

本章属于本篇分享的第二章节。我们首先分析了提升表格效率的的两大因素,分别是易读性和易操。其次我们通过分析“表格内部构成元素设计”和“数据如何展示”的设计手段来达到提高表格的易读性。

其中“表格内部构成元素设计”章节讲述了将表格内部元素表头、表体、表尾拆解并将设计技巧和设计手段进行分享,目的是想帮助大家在设计表格时能够通过这些技巧和手段提升表格的易读性。“数据如何展示”章节讲述了从各个维度思考如何正确将表格中的数据如何正确展示。

 

 

文章总结

根据上文我们可总结到表格是“将复杂的内容进行「归纳整理」,将「信息展示」给用户,帮助用户高效率的进行「数据分析」”。所以表格的作用是常见且最有效的信息组织整理手段,我们想要提升表格的体验就需要着手从“易读性”和“易操作”角度出发。本文侧重拆解了什么是表格以及分析了如何提高表格的“易读性”,下篇分享将以“易操作”角度继续分享如何提升表格的体验。

 

参考文献

http://www.woshipm.com/pd/1655376.html

http://www.woshipm.com/ucd/714641.html

http://www.woshipm.com/pd/661699.html

http://www.woshipm.com/pd/5323117.html

https://ant.design/components/table-cn/

 

原文地址:站酷

作者:熊细辉Neo

转载请注明:学UI网》表格体验优化指南【一】-B端设计

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

截屏2021-05-13 上午11.41.03.png

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

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

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



中后台加载-被忽略的体验细节

纯纯

大部分设计师应该都遇到过这种场景:在做设计前并没有考虑到加载,但在进行还原度走查或者验收的时候才发现,由于某些页面数据请求较慢,导致在页面中会出现空屏状态。这时才想起需要在这些页面添加动画来承载页面的过渡。

归根结底是因为设计师在设计过程中,更多关注页面本身,而很少去思考页面在呈现过程中何时会出现白屏状态,都是后知后觉去补充完善。加载作为必备的一环,却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划,导致系统的加载体验缺失或者不统一。

因此希望这篇文章能够讲清楚中后台加载出现的场景和规则,对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。


undefined

加载通俗来讲就是用户从触发页面操作,到页面最终呈现的一个等待过程。这个过程始终存在不可避免,只是时间有快有慢。快的加载只需要几百毫秒就结束,但慢的加载就可能会达到几秒甚至十几秒,让人产生焦虑。

而为什么会有如此大的差距,这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址,再到我们看到完整页面的这个过程,网页到底经过了哪些步骤呢。经过资料查询和与前端确认,整体过程可以阐述如下:

从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段:用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。

而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型:静态资源和动态资源。


静态资源:前端的固定页面,这里面包含HTML、CSS、JS、图片等等,不需要查数据库也不需要程序处理,直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快,比如我们看到的展示型官网一般都是前端写好的静态资源。


动态资源:而对于页面上的动态变化的,需要程序处理或者从数据库中读数据,能根据不同的条件在页面显示不同的数据,比如表格数据、统计数据等称为动态资源,这种都需要调用后台接口来进行返回,因此加载速度相比于静态资源就会更慢。

而它们的区分点用下图可以表示:

可以看到静态资源基本是直接返回,而动态资源还需要连接数据库调取资源,尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题,也基本上更多出现在动态资源的获取上。


undefined

当我们清楚加载形成的原因,接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式:「默认处理」和「使用进度指示器」


2.1程序默认处理方式:直接显示

当我们对加载过程不进行任何处理时,程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式:

但是这种做法就会导致我们在页面加载过程中会出现空屏状态,比如上图切换到概览时出现了空屏状态,尤其是当遇到了网络缓慢的情况,会造成在加载时页面停留在当前状态下不动,往往会让用户陷入到「系统故障」的错觉。


2.2通用处理方式:进度指示器

这个名词说起来可能比较陌生,它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障,而是正在读取数据。

通过添加进度指示器来对空屏状态进行承载,能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡

但是在体验过程中很容易发现一个问题,就是在产品的整体加载过程中,某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时,很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖:

想要更全面的把加载动画覆盖到所有页面,我们就需要弄清页面在哪些状态下会出现空屏状态,从而制定统一的加载动画规则。这个问题可以先思考一下,后面解答。


undefined

在制定统一加载规则之前,我们需要明确一个概念,就是加载的模态与非模态。


3.1模态加载

模态加载的含义就是当前加载会中断用户其余操作,用户在这个期间只能等待加载而不能进行其他操作(有的模态会提供取消按钮)。如果你的页面涉及到以下2种情况,可以考虑使用:

1.用户当前的操作本身不能与其他操作同时进行。比如系统更新,或者工具类的导入导出相关操作,我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载,比如protopie的导入操作;

2.当用户进入到一个全新的页面时,这个时候页面什么都没有,我们只能等待页面加载完成才能进行后续的操作,因此在这种情况下也可以采用模态加载,比如我们刚进入Asanan产品页面看到的首屏加载动画:

除了上述2种情况外,你也可以根据你的业务场景来进行模态加载的选择,但建议是尽量少用模态加载,其会对用户的打断和干扰性比较强。


3.2非模态加载

非模态加载的话,这种加载通常只会出现在需要加载的部分,不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。

非模态加载相比于模态加载会更轻量,因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载,比如飞书的左侧栏切换操作:


undefined

接下来我们进入正题,在这里我从加载的角度将网页整体加载过程分为呈现加载规则操作加载规则

我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后,我们就可以开始为我们的产品制定统一的加载规则,以保证后续页面加载的一致性。


4.1 页面的加载过程拆解

在拆解页面的加载过程前,我们进一步阐述之前提到的渲染原则,从前文中提到最后会经过「解码」和「渲染」2个步骤,这也是决定了我们看到的页面的最终呈现顺序:


1.页面渲染顺序

我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式,JavaScript则是负责页面中的交互(当然JS也可以控制样式,这里只描述主要功能)。

页面在「解码」阶段,拿到的HTML文档会被解码为DOM树,同时将CSS文件解析成CSSOM,这两者结合后一起渲染页面,JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染,最后渲染交互。视觉的角度来讲就是先看到元素样式,然后才能进行对应操作。


2.页面呈现的视觉顺序

由于浏览器渲染顺序一般会根据代码的顺序进行渲染,而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的,因此我们看到的页面的视觉呈现顺序也是遵循从上到下,从左到右。

所以几乎所有的产品都是先看到顶栏,然后左侧边栏,然后其他内容。因此我们可以通过这个原则来拆解对应的页面,我们按照页面常规结构可以将其分为三个加载部分:顶栏、左侧导航栏、内容区域。而其加载顺序如图所示:

当知道对应页面的渲染顺序后,我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序:

undefined

我们的加载动画需要承载的就是上述这些白屏的地方,从而将加载细化为三种场景的拆分:全局加载+局部加载+内部加载。如图所示:

undefined

通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。


4.2 全局加载

如上图所示,全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景:

1.通过网址进入到一个新的页面时;

2.通过鼠标右键或网页刷新按钮对该页面刷新时;

3.通过页面操作需要新开页面时。

该全局加载的动画构成为:

1:覆盖整个页面的加载,由纯白色+加载动画构成;

2:加载类型为模态加载,因为用户在这种页面状态下并不能进行其它操作。

undefined

但在这里我们需要注意全局加载的开始和结束时间:

开始时间:当进入页面时立即呈现加载动画;

结束时间:当页面加载出顶栏的时候,此时停止加载。


为何要这么处理结束时间,原因其实图中已经给出了。这里再解释一下原则:只要有页面资源返回,我们的全局加载动画就会结束,随后启用局部加载来承接后续的状态,避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的,所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏,可以以左侧栏来作为结束标准。


4.3 局部加载

局部加载是用在页面整体框架加载的过程中,承接在全局加载后。局部加载的使用场景可以概括如下:

1.顶栏加载结束后,用在剩余框架的加载效果(具体体现为左侧边栏和右侧内容区域);

2.对于涉及到局部页面的切换操作都会进行局部加载(比如左侧边栏的切换);

光看文字可能不是特别清晰,在这里可以举一个动态的例子来帮助理解:


上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的,可以通过程序控制让这种加载动画只在初次加载时出现。


第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间:

但第二次的时候由于有缓存(缓存会加载我们的静态资源,能够让我们的页面框架在第二次时更快显示),这样在读取框架时基本不需要加载,我们就可以通过程序来直接去掉其中的局部加载动画,直接显示框架来进行呈现。

undefined

目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的,而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态,又避免了局部加载动画的频繁出现。


4.4 内部加载

内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束,但某些数据由于接口比较慢,此时还没有返回,这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况:

在进行内部加载的时候,需要注意,内部加载的时候一般标题是存在的,因为标题基本都是固定的,所以能够很快被拉取。比如Zoho的内部加载,加载时标题已经出现了:

通过这三种类型的加载,能够覆盖从用户输入网址,到页面渲染完成这个页面呈现过程中的全部加载场景。


undefined

说完页面的呈现规则,再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态,而且需要考虑到控件影响的其他页面范围。


5.1需要考虑控件本身加载

控件的加载并不是随时都需要,我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下:

undefined

比如图中的按钮的加载状态是必备的,在很多场景下都会用到。但是下拉列表和级联列表,在一般的场景下都不太需要进行加载,当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。


5.2当控件操作会影响到页面其他元素

这种控件比如日期筛选、表格筛选或者保存等操作,当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法:

1.被影响元素不可被操作,且该区域有遮罩+加载动画来覆盖;

2.被影响元素可进行操作,无任何动画,但操作并不会影响之前提交的结果;


这两种方案一种是利用遮罩防止用户无效操作,另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1,我认为被影响的元素是需要有遮罩+动画的,来避免用户在加载期间对其进行无效操作,比如示例中方案2后面修改的名称是没有被系统保存的。

需要注意的是如果在产品中使用方案1,我们的遮罩区域只需要覆盖被影响的元素就可以了(保存这种可以将按钮一起覆盖),比如通过筛选导致图表数据发生变化,这时只需覆盖图表区域,而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时,用户可以通过切换筛选项来打断当前加载。

上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时,则整体遵照页面呈现的规则进行加载。


undefined

上面阐述的加载已经完全能够覆盖我们页面整体的加载,但是还是需要提及一下骨架屏和进度条这两种加载形式。

undefined

先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的(骨架屏的加入使用会让用户感觉网页出现的更快)。那么为什么在大部分的B端业务页面中没被用到呢,主要有2点原因:

1.每种骨架屏都需要进行对应的定制开发,需要与加载后的页面框架保持一致,这会增加了开发成本。

2.中后台的业务界面对来说固定结构的页面会较少,这对于骨架屏的使用机会就相对较少。

个人认为在前期可以以统一加载体验为主,在后期业务相对成熟后,可以针对固定结构,通过骨架屏的使用优化加载体验。


再说进度条。我理解的进度条的使用条件:对于加载时间较长的规定场景可以考虑用进度条来承载,比如我们常见的游戏加载中进度条就用得比较多,因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。

进度条在特定场景下能够缓解用户焦虑,让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度,这也会导致有时候我们看着加载到99%,那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因,很大程度是没有那种加载特别长的场景。


因此这两种加载场景的使用会更加定制化,如果需要使用请根据具体的业务场景来进行选择。


如果把加载动画等比作页面加载的外在,那么缓存和加载策略则是页面加载的内核,合理使用缓存和加载策略可以从根本上提升我们页面的加载速度,让用户更快速地看到页面。


7.1 关于页面的资源缓存

大家肯定听过缓存这个概念,前后端都可以使用缓存。缓存就是数据交换的缓冲区(称作Cache),是存贮数据(使用频繁的数据)的临时地方。在这里主要讲一下浏览器缓存:

undefined

从这张图可以看出,服务器在请求数据时,会进行缓存的判断,如果有缓存则首先读取缓存,如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度,缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存,这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。


但程序其实也可以对动态资源(也就是需要从数据库等拿到的资源)进行缓存的,并且可以设置缓存的过期时间(比如设置过期时间为1小时,那么1小时过后就会重新拉取新资源)。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略,从而提升整体的页面加载体验。


7.2 加载策略的正确使用

现阶段我们常用的主要有下列6种加载策略:

加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间,接下来我们详细看一下每种加载策略的具体使用策略:


7.2.1懒加载

懒加载是当内容落入视窗被用户看到时,才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计,能够让用户更快看到当前屏幕内的内容,减少等待时间。

比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载,这样能够保证用户在进入网页第一时间看到首屏内容,并且用户几乎感知不到这种加载延迟。


7.2.2预加载

预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中,等用户需要使用时,通过缓存直接调用呈现。比如用户在看A页面的时候,就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候,立刻就可以呈现。

比如某些页面在实际中加载比较慢,这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态(图中我将页面网络切换为断开状态),可以看到依旧可以点击全文进行查看和视频的部分预览。


7.2.3分步加载

当页面中有文字和图片时,优先加载占用网络资源小的,比如文字资源,然后再进行占用资源较大的加载,比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。


7.2.4分页加载

分页加载是我们目前很常见的方式,比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载,分页适用于数据量比较大的内容,比如表格数据或者大数据搜索场景可以使用。

分页加载可以理解为当前获取到100条数据,但是将100条数据分别拆成5页每页20条数据提供给用户,这样也可以让用户减少等待时间:

在目前还有一种滚动分页的加载,就是不提供视觉上的分页,而是当用户进行滚动时,自动加载一定数量的内容,这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略,有的也把这种滚动分页的方式称为自动加载。


7.2.5延迟加载

这里讲的延迟加载更多的是一种防护加载机制,一般延迟设置的时间为300ms。这里的延迟加载有2种使用,第一种多用于搜索,通过延迟加载能够让用户更好进行连续输入,避免搜索结果被高频率刷新,同时缓解服务器压力。如下图,可以看到我在输入1后会有个延迟才出现加载列表,并且我在连续输入12306的过程中是没有对结果进行更新的,当我输入完后才更新。

第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时,如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上,防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知:

延迟加载更多用于上述2种场景,对于其他情况的加载,直接加上就可以了,并不需要刻意设置延迟。


7.2.6后台加载

这里想要表达的含义是当用户在操作后,客户端立即反馈操作成功,然后把请求放到后台与服务器交互,这一过程用户不需要了解,不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作,即使你在断网的情况下都能够立刻发布,但实际上这个时候并没有发送成功,还需要上传到服务器后才你的朋友们才能看见。


这样的好处是用户使用起来非常流畅,但是坏处就是,当操作不成功时,用户并不能及时进行感知,仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作,毕竟很多发布的功能会同时影响很多业务线。


这里就拿微信的朋友圈发布来进行举例,下方手机状态都为断网状态,可以看到微信立即发布,而贴吧在这种状态下提示网络错误。

通过这些加载策略的选择性使用,能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识,这样我们不仅知道加载慢的原因,还可以利用加载策略去提升页面性能。



在整体的加载过程中,别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来,这时我们需要考虑对长时间的加载过程进行处理。

通常做法是我们要对加载状态有一个最长时间的限制,一般为加载不超过10s,超过最长时间后就进行异常状态显示(提示语+刷新按钮)。这样用户可以选择重新加载或者离开此页面,而不是一直等待。

在这里还想到一点,就是对于编辑页面,我们应当加入网络连接是否异常的判断,比如当进入到编辑页面后,如果遇到网络断开,需要在页面的顶部加上常驻提示条【当前网络连接断开】,这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。


加载在设计中是非常容易被忽略的模块,因为在大部分情况下网络速度都较快,人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点:

1.我们需要明白加载为什么会出现,这个过程是怎么样的;

2.加载的通用处理手段是怎么样的,非通用处理方式有哪些;

3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。


这样当我们在页面上遇到加载速度慢的问题时,在为其加上动画承载过渡的同时,还应该思考其加载缓慢背后的原因,是因为数据量太大还是加载策略的相关问题,是否可以将其进行懒加载或者分步加载,这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题,才是后续产品设计过程中的长久思路。



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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



色彩趋势浅显总结

纯纯

四个色彩趋势:霓虹渐变、轻量渐变、高饱和度色系、梦幻色/幻彩色系从现实图库入手,总结出该色彩趋势对应的关键词以及色彩特征。对部分案例进行了解析,更深入地了解其运用方向以及实现技巧。希望这些内容可以起到抛砖引玉的作用,欢迎大家探讨。(图片来源于网络,原作者可提供原图链接进行标注)



一、霓虹渐变


现实生活中,炫彩夺目的霓虹灯效果常被应用于广告牌、灯箱的展示中,在暗夜的烘托下,霓虹灯展现出光影陆离的光影效果,吸引着人们的眼球,留下强烈的视觉冲击。如图所示,暗夜中的霓虹灯效果,为霓虹渐变的现实灵感来源。

夜色下的霓虹灯


关键词

undefined


霓虹色特点总结

1、以紫色、蓝色、洋红为主的冷暖色搭配;

2、整体颜色对比度高;

3、以冷色调为主,局部暖色调,搭配霓虹光感对比色点缀;

4、背景用暗色调更能凸显霓虹效果;

5、根据霓虹灯的灵感,采用了霓虹灯发光的效果。



近年来,强视觉冲击的渐变色被广泛应用在各个领域,包括宣传海报、综艺节目、游戏等等,其中最为瞩目的是霓虹渐变,设计师通过将这种高饱和度的渐变色与暗色调背景结合,形成强烈的视觉冲击,突出主体,渲染氛围,使整个画面的色调更加活力化、年轻化。


01 娱乐案例

最近较火的综艺节目“这就是街舞”,其宣传海报通过高饱和度的霓虹色渐变,与人物及背景形成强明暗对比,结合对人物本身的光影细节刻画,突出人物主体,增强画面视觉冲击力


02 游戏案例

2020年7月,由Veewo Games发布的一款游戏「霓虹深渊」,画面以紫色、蓝色、洋红的冷暖色搭配为主基调,通过明暗色的对比,以及大面积的紫色光影渲染氛围,营造出极强的未来科技感,而霓虹光感的使用以及涂鸦风格的融入,使得游戏更加时尚、自由。



01 专题页

页面整体以紫色,蓝色,洋红为主,冷暖色搭配,营造出层次感,活泼生动且年轻化;偏暗色调的霓虹渐变色背景烘托出专题页的内容主体,使得页面运营氛围更好、更强;同时在一些重要的、需要用户操作点击的部分使用了暖色调的霓虹色渐变,使得内容主体在冷色调的环境下更为突出,提高了用户体验。


02 App

以暗色调背景作为烘托,搭配紫色、蓝色、洋红为主的冷暖色,是霓虹色渐变经典的应用方式。在暗色背景下运用霓虹色渐变,通过明暗的强对比突出页面关键元素,对用户进行视觉引导,同时丰富页面层次,增强页面的视觉冲击力及艺术感染力


03 Web

暗色的背景与撞色霓虹搭配的插画手法使得界面看起来更加的酷炫和高科技,整体页面在霓虹色渐变的使用下更富层次性。通过主体与环境色的呼应、冷暖明暗的对比,展现出主体光源对空间层级的变化效果。此组合用来作为web头部页面,冲击感十足,科技感也非常的棒。


04 Icon

通过高饱和度的霓虹渐变色彩,结合外发光、叠加、模糊等多种技法,塑造出更加丰富的光影效果,不仅增强图标视觉表现力及空间感,更凸显了图标的风格化与趣味性。暗色调背景的烘托,使霓虹色渐变图标更加有质感,更加突显。


05 插画

通过大面积的霓虹色渐变结合迷彩渐变的绘制手法,构建不同色彩鲜明的矩形图案,暗色调的背景烘托与颜色用冷色为主暖色为辅、点缀,画面感极强,极具视觉冲击力。



霓虹色渐变在暗色调的背景烘托下,撞色的冲击感使得画面更加具有科技感、潮流感;对于霓虹色渐变使用比较频繁的赛博朋克风、故障风,也是现下较为流行的风格,通过丰富鲜明的色彩与背景作强对比,营造出极具视觉冲击力的画面效果;同时霓虹渐变色也被广泛的使用于app、web、插画等领域,虽然它出现已久,但其大胆、强烈的配色风格给画面带来的冲击感以及潮流、自由感,使得它仍然成为当下一种比较流行的色彩趋势。



二、轻量渐变


通过对2021年色彩趋势分析发现,渐变色的运用仍然非常流行。相较之前运用较多的强视觉冲击类——对比色渐变,轻量渐变在色彩运用上变得更加理性与克制。主要特征为轻量、柔和、层次递进,营造一种舒缓、治愈的沉浸感。



色彩上的渐变是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色。根据强弱程度分类,渐变主要分为强渐变和弱渐变,轻量渐变属于弱渐变范畴。在过渡的过程中,轻量渐变特点为渐变色彩邻近,幅度轻柔,节奏缓慢,融合感和细腻感较强


关键词


轻量渐变特点总结

轻量渐变是一种简约且高度可用的元素,它可以创造出一些时尚的氛围,但是又不会有信息过载的担忧,这使得轻量渐变成为一种富有感染力又非常实用的设计解决方案。轻量渐变特点之一为明度高、饱和度低,色彩轻量而透气。在轻量渐变的使用过程中,同色系、邻近色系较多,其过渡自然柔和。



01 毛玻璃案例

透过今年各大设计网站上的作品不难发现,较多的视觉设计师将轻量渐变的色彩趋势与毛玻璃的质感趋势结合,运用在界面中。下图画面中,轻量渐变的柔和属性搭配上毛玻璃的朦胧感,营造一种视觉感官的舒适感与呼吸感,已成为2021年UI界面设计趋势之一。


02 3D案例

当轻量渐变与3D碰撞时,则会产生更加趣味的视觉化学反应。画面中使用的3D效果可以最大限度还原现实世界的材质与光效,呈现极具脑洞的“超现实”效果,为用户呈现不可思议的异度空间,吸引用户眼球。画面中的背景使用了轻量渐变来创建出多彩的模糊背景,为3D素材创造出另类维度的空间感,增加了画面深度,使设计更具真实感。



01 首页Icon

自如app最新的首页风格采用轻量渐变+毛玻璃效果,金刚区应用最为明显。图标的色彩选用低饱和邻近色,遵循3色系原则,使得整体色彩统一且不失丰富。从单个图标看,色块部分采用单色渐变,通过easing gradient插件工具调整渐变值,以达到最佳效果。毛玻璃特有的通透感,会将渐变色块透映出来,故制作毛玻璃效果时,需添加环境色使其融合。


02 启动页

两个启动页中均采用高明度、低饱和度外加一些毛玻璃微透质感的表现手法。第一个界面主要传达安全、简洁、可靠的情感,第二个界面则表现的是活动主题的梦幻感。这两个页面虽目的不同,但却均体现了柔和、细腻、轻量感的视觉感。设计师发现,使用者在经历过传统大色块、大面积、较强冲击力渐变的视觉后往往更加想追寻视觉上的宁静,所以视觉负担相对较小、相对轻量的微渐变色彩和可以利用微透质感减弱色彩冲击力的毛玻璃相结合的视觉效果越来越多地被运用。


03 界面背景

在界面背景中,使用少量的邻近色渐变来做通栏背景,使整体氛围更加柔和、富于层次感,同时起到强调头部的作用。卡片处采用透明毛玻璃效果,利用毛玻璃特有的通透感,透映出底部渐变,使卡片兼具质感与美感。


04 彩色化卡片

卡片中采用同色系的轻量渐变效果,营造融合、舒适的视觉观感。卡片的颜色根据色彩情绪进行选取,增加辨识度,进而增加点击率。



渐变之所以每隔几年就会成为设计流行趋势,很大程度上得益于它自然的特征和普遍的吸引力。今年盛行的轻量渐变,更多从用户的角度出发:减轻界面给用户带来的视觉负担,为其提供更轻盈的视觉体验。在应用的过程中,轻量渐变与毛玻璃、3D等流行表现形式相结合,可创造出全新的、有趣的视觉体验,不仅在外观上起到美化的作用,在功能上也达到了强调、醒目的作用。



三、高饱和度色系



在过去的两年中,高饱和度色系的应用已经是重要的趋势之一。年轻人作为移动互联网的主力军,他们青春,活力,有朝气,因此,代表年轻活力群体的鲜艳,高饱和度色彩成为视觉主流趋势之一。偏高饱和度色彩更易吸引注意力,烘托主体,影响用户情绪,提高品牌的识别性,增强品牌影响力。


关键词


高饱和度色系特点总结

1、颜色饱和度高,艳丽;

2、色彩丰富多样;

3、视觉冲击力强;

虽然高饱和色彩视觉冲击力强、更容易传递情绪,但在使用时仍需克制使用。原因在于:1.过高的饱和度,容易产生视觉疲劳;2.高饱和度的颜色并不适合所有的用户群体。

这里说的高饱和度的颜色,并不是一味追求高饱和刺激性颜色,我们在使用时候,仍需对颜色的明度,饱和度进行合理设置,这样才能保证我们视觉上的舒适性。



综艺海报案例

在综艺海报中,高饱和度的半插画+实物的表现形式,让画面极具趣味性和视觉吸引力,获取了大批流量。



01 产品品牌色

偏高饱和度的色彩,在UI设计应用中,往往更容易脱颖而出。而一些品牌的品牌色往往就是偏高饱和度的颜色,比如UI设计中品牌色的运用,在一定程度上可以将品牌影响力扩大化,品牌影响力,也会让用户增加信任感。

例如,微信的绿色,饿了么的蓝色,美团的黄色,淘宝的橙色......等等这些品牌色,都深入人心。

高饱和度品牌色


02  运营色

活动营销类弹窗,以及运营类的H5,运营专题,促销类的BANNER中经常运用高饱和色的视觉刺激以达到强调、引流的作用。



高饱和度色系以其绚丽、强视觉冲击力等特点,在UI设计中一直被广泛的应用。它可以更好的营造氛围、传递情绪、增强视觉层次结构、提高品牌的可识别性。撞色、插画+半实物、手绘等各种新式流行的表现手法使得高饱和色的运用上更加丰富多样。



四、梦幻色/幻彩色


 

广义上,我们将富于想象力的色彩,或者说体现人生丰富多姿的色彩称之为“梦幻色彩”,像泡沫、像天使、 像梦境、像糖果...


关键词


梦幻色/幻彩色特点总结

梦幻色在颜色面板中处于中间偏上部分,即特点为中纯度、高明度。

配色方面和谐,视觉效果相对温暖柔和。常以简单、干净的背景为衬托,烘托主体物以及主色调。色彩场景偏向幻想、天马行空的自由世界,给人以浪漫的色彩感受,容易令人沉浸在画面的温暖氛围中。



现今,色彩作为重要的视觉语言而被越来越多的设计师所关注,而在实际设计作品输出当中,颜色也扮演着将产品理念传递给用户的媒介⻆色。可见,完整的设计作品是离不开色彩的表现的,那么了解色彩趋势就会显得尤为重要。而在众多颜色中的梦幻色,更是极具前沿性和突出感的色彩。


糖果色插画案例

色彩倾向明快轻量,采用颜色烘托主题的表达方式,较能抓住用户眼球。塑造了色彩多变的视觉风格,适用于多种品牌调性,给用户温暖、轻松且焕然一新的感觉。


绚丽配色案例

在下图插画案例2-绚丽配色中,能发现绚丽配色类插画通过光的运用,让画面呈现出细节更丰富的视觉效果。 一些光晕的重叠使用,使得画面变得朦胧,更显梦幻特点。另外,梦幻色还可以营造神秘的氛围,在网站首页使用的梦幻色彩,搭配引人入胜的画面,神秘感的体现更加突出。吸引用户的点击,从⽽提升⽹站的浏览量,实现流量变现。


材质案例

在材质-塑料质感中,大面积的梦幻色彩渐变,形成很强的视觉冲击。塑料的质感配合灯光与彩色渐变,显得非常梦幻;透明的气泡材质,整体质感给⼈轻盈、透亮。这种流动的色彩呈现出了源源不断、生命不息的美好愿景,带给观者美好的想象。



01 3D物体

梦幻色应用于3D物体中,整个画面更加丰富多彩,温暖、轻松氛围下的物体仿佛将从屏幕的束缚中挣脱出来,拉近了画面与观者之间的距离。


02 手绘插画

这是一组描绘田野间的手绘插画,为观者提供感观上的愉悦。一切事物在自然中的蓬勃生长以及梦幻色下烘托出的神秘感,使得整体画面有种超脱现实、游离人生的美感。形成了以自然景观为主导的唯美风格。


03 App




虽然梦幻色没有特别靓丽夺目的色彩特点,但在梦幻色的使用中所烘托出的特定氛围,不但突出了不同产品的特点,也更加满足了用户的情感需求。色彩趋势必然与时代潮流以及用户喜好紧密结合,作为设计师的我们需要了解,并能与我们的设计产出进行结合。



结语


日新月异的生活是色彩趋势的灵感来源,这使得色彩的流行趋势不断更新变化着。作为设计师的我们,要保持一颗敏锐的心,不断从现实生活中捕捉灵感,将自然赋予我们的宝贵灵感运用于作品中,从而增强设计的原创性,给设计行业注入新鲜血液。其次,趋势是方向,不能盲目追随,需要不断思考总结沉淀升华,并将其合理运用至自己的作品或项目中。设计就是在实践中不断探索与总结!这是我们写这篇文章的初衷,最后也欢迎大家积极探讨。


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计思维中的共通性和差异性

纯纯

“ 设计思维是一种以人为本的创新方法,它借鉴了设计师的工具包,整合了人们的需求,技术的可能性以及商业成功的要求。” 


设计思维

关于设计思维的文章我们也看过不少,也听过大佬们讲什么是设计思维,可都停滞于带我们了解初识阶段,并没有教到我们怎么去践行设计思维。设计思维 (Design Thinking) 是一种设计方法,提供基于解决方案的方法来解决问题。解决方案是什么?究竟要解决什么问题?如何去解决?在参考了大量的文献后,更多的是在阐述设计思维是什么,具体的分类和步骤,更偏向于介绍和展示相关的知识。比如 Google 的 Design Sprint 方法论,比如 IDEO 首席执行官 Tim Brown 提出的可行性三原则,比如斯坦福大学哈斯普拉特纳设计学院(d.school)提出的五阶段设计思维模型,而根据 d.school 提出的五阶段设计思维模型,大部分公司都基于这个模型进行变量修改后作为自己的设计思维模式,这五阶段设计思维模型为:同理心 (Empathise) - 定义 (Define) - 假设 (Ideate) - 原型(Prototype) -测试 (Test) ,几乎大部分的设计思维都基于这五阶段模型做的改变。



用同理心代入 (Derivation) 定义,用同理心建立 (Build) 原型,通过原型反推 (Reverse) 原型的成立,最后用测试结果证实 (Validate) 定义的正确性。

现在对设计思维有了大致的认识,这里也不花太多篇幅去描述,但是全部看下来感觉自己脑袋晕乎乎的,那究竟我们在具体的工作学习中,要如何尝试性代入且应用设计思维来做设计呢?通过一些项目的经验我总结出关于如何运用设计思维做设计的方法,就是通过寻找产品之间的共通性和异样性,深挖出关键性的问题所在,最后去解决这个关键性问题。



共通性与共同性

共通性和共同性在意义上有根本的区别,共通性是指相通或者适用于各方面的东西,比如共通的道理,共通的方法;共同性则是指彼此都具有相同的性质,比如大家共同的目标,共同的性格;产品与产品之间也是有共通性和共同性的,只有找准产品的共通性,才能深度挖掘到核心问题的所在,从而通过设计手段解决核心问题。

与同类竞品分析不同的是,竞品分析需要通过大量且快速的对比找到各类产品之间的共同处和差异处,而寻找产品的共通性,则需要对逐个产品进行深度剖析,挖掘共通的点 (Point),然后把这个点透过三原则:可行性(Feasibility),可取性 (Preferability) 和创新性 (Innovativeness)分析来设计产品解决问题。一款产品或者某个功能模块,只有在可行性和可取性中产生交集时,才可以在此之上进行创新设计,可行性可以理解为开发可实现,或者和业务需求没有冲突的模块,可取性是指性质上可以取用。



举一个简单的例子,某个模块希望通过弹窗的形式提升某二级页面的跳转率,那么提炼出业务诉求关键点:

  1. 1.提升二级页面的跳转率;

  2. 2.通过弹窗的形式展现;

那么可取性就是【弹窗】这个 Piont,而可行性同样为弹窗形式,那么他们共同的交集之处就是弹窗顶部的氛围层和行动点,设计师就可以在这两个交集处做自己的创意发散,比如在弹窗头部氛围做的很强烈吸引用户,或者把行动点设计成带有动效的按钮以此来吸引用户点击等等。产品设计中通过共通性挖掘问题,而承诺和顾客的体验达成共同相通,这是为了赢得用户信任和尊重的需要。


产品的共通性

做产品第一步就是找出同类竞品之间共同之处,把他们共同的地方记录下来并做出统计。比如我需要做一个关于 UGC(用户原创内容)的内容社区,那么我前期得搜集同类竞品,比如 MONO、新草、Lofter等等,找出他们共同的地方。首先来解释为什么要寻找共同的地方,根据模块出现的频率排列出模块的优先级,这是一款产品从零到一必须要经历的阶段,但往往很多产品到这一步就停止了,然后像堆砖砌瓦一样,它有的我 Duang 地加上去,另一个它有的我也要 Duang 地加上去,我全都要!最后导致产品做出来架构不清晰,目标不明确。这就是为什么老有设计师疑惑:为啥总是左改一版右改一版业务方/老板就是不满意,这在战略层就出现了的问题,跳到执行层上改来改去,肯定怎么改都不会有一个满意的结果。这时候就需要将搜集到共同的地方做分析,找出它们各自存在的性质,然后挖掘产品的共通性。



通过各类竞品搜集下来可以看出关于社区模块的内容大致分列为:话题标题占比18%,统计信息占比18%,话题说明占比16%,心智氛围占比8%,内容分级占比4%以及其他内容填充占比36%,具体归类成A.标题&统计、B.话题说明、C.心智氛围、D.分级信息和 E.其他信息,然后排列优先级顺序为:A>B>C>D>E,最后一步就是分析各自独有的性质:


A.标题&统计信息:话题标题和统计信息属于必要模块,标题显示话题主题,统计信息展示话题关注度等信息,增强话题氛围;


B.话题说明:是对话题进行的补充说明,也可增设相关活动等文案;


C.心智氛围:心智氛围的增设用于对话题主题的传达以及突出用户的参与感;


D.分级信息:分级信息对用户的筛选起到至关重要的作用;


E.其他信息:其他信息皆为用户提供UGC或者平台提供PGC。


而这类性质可以统称为社区类模块产品的共通性,提炼出产品的共通性有什么用呢?如果一个社区类产品上线后发现用户参与感热度不是很强,那么就可以从心智氛围模块去分析是否问题出在这里,是否应该加强话题的心智氛围,或者是否可以通过投资邀请专业的人士通过生产 PGC 来带动社区的热度等等,只有先去了解产品之间的共通性,然后找出关键点提炼出关键问题,在战略上提出解决方案,才能从根本上解决产品问题。



就好比一个人捂着肚子冲进诊所,医生首先了解捂着肚子的性质,是阑尾炎?是胃痛?还是其他的疾病,只有先熟悉各类疾病的性质原因后,通过排查筛选找出根本的原因,才能提出是做手术还是药物治疗的解决方案;同理,回到之前的那个问题:为啥总是左改一版右改一版业务方/老板就是不满意,都没查出究竟是什么原因导致肚子痛,就开始开刀手术或者胡乱吃药,运气好了胡乱吃药吃对了解决了,运气不好被折腾凉了,最后的结果就是产品模块下架撤离,所以无论是从零到一的产品还是业务改版,都需要找到产品之间的共通性,才能找出具体的解决方案。


设计细节的共通性

我们不难发现市场上很多出自于同一业务下的产品都有着自己的设计细节,而在这些母舰上都有着各个模块的附属模块,比如在QQ产品里的兴趣部落、NOW直播、微视等模块,比如在淘宝产品里的天猫、聚划算、飞猪等模块,那么在这些母舰下的附属模块,在设计细节上自然而然要和母舰保持一致性。举个很明显的例子:手淘设计语言中卡片的圆角为24px,手猫设计语言中卡片的圆角为10px(基于750px尺寸下),那么手猫其中的模块自然是要遵循手猫的设计语言——圆角的尺寸为10px,但是如果这个模块获取到手淘透出的资源,那么在设计上,就要遵守手淘的设计语言——圆角尺寸为24px。



那么你会问了,这样最多只是相同啊,有什么性质意义呢?这和共通性又有什么关系?不同的产品所面向的用户群体是不一样的,所以主打心智也不一样,设计上的细节传达给用户的心智一样的不同。众所周知,淘宝主要面向的用户群体是大众的,天猫主要面向的用户群体是追求更高质量或者品牌的,那么在细节上,24px的圆角卡片带给用户的心智是友好亲切的,10px的圆角卡片带给用户的心智是偏向更精致更高质感的;其次,如果用户通过手淘的场景进入天猫的模块,一会儿24px的圆角一会儿10px的圆角,长时间下去用户自然会分不清当前场景是天猫还是淘宝,这是在产品一致性上做的共通性协调工作。所以如果是同类系的产品或者是模块,在设计细节上一定要注意,保持模块与模块之间的共通性。(有的人可能不会注意到这些设计细节,设计细节既然是细节,个体本身影响力不是很大,很容易造成忽视,但是如果个体增多形成量级的话,造成的视觉影响是很直观的



差异性

差异化策略是从改变产品的“绝对差异化”到改变认知的“相对差异化”,越来越着眼于“人”的视角。在如今发展迅猛的网络营销时代,“人”的因素更是被置于产品运营和品牌营销的核心位置,不过,这并非表明“定位”理论变得越来越重要了。这点做品牌的朋友相信有更多的感触,但是无论你是做产品的,还是做品牌的,要想脱颖而出,首要的策略就是“差异化”。大家都知道平台产品的最终目的是实现商业价值,可是如何实现商业价值,就是要通过产品之间的差异化来寻求突破点。



产品的差异性

依旧拿上面那个社区产品当例子,同类对比我们发现,大多数的社区产品更多的是流量引进来营造平台氛围,无论是通过 PGC 的形式还是对内容的打造,但是在商业价值化层面上则很少有渠道介入。那要如何通过设计表达出差异化并且实现商业价值,就需要对实现商业价值有一定的了解。当社区把流量引进时,实现商业价值常见的几种方式有:

  1. 1.广告宣传的推广;

  2. 2.电商平台的转化;

  3. 3.流量引导产品模块的介入等等。

以电商产品举例,我这个社区模块将流量引进后,需要致使用户通过 UGC 或者 PGC 种草的内容去购买所对应的种草商品,知名的社区电商产品的确也是这样做的,比如小红书、Lips等等,但是不难发现此类产品都有一个共同的弊端:用户需要先记住种草商品的内容后,自行去购买采购商品,这样可能就去了淘宝、京东等等更加知名的电商平台,最后为他人做了嫁衣,那么这一块就是关键突破点。



通过寻找差异性找出关键突破点问题所在,并推导出相关的设计策略:平台可以通过招商的形式发布社区话题,并且可以通过“参与话题送 xx 额度的优惠券”、“参与话题并分享给好友获取 xx 限量商品”等形式刺激用户参与话题,并且也给用户很方便的渠道入口直接进行商品购买,防止流量丢失为他人做嫁衣;商家通过入驻平台提供话题,平台流量导入参与话题,商家通过参与话题给予优惠等活动引导用户购物,用户通过平台参与话题了解品牌获取参与感;类似线下商场搞一些活动,品牌店给一些优惠券之类的当作参与活动的奖励,然后客人可以去到品牌店消费,最终实现三方获利的商业闭环!

不难发现,通过寻找产品之间的差异性来挖掘出关键点问题,然后在此基础上解决问题做出创新。追求差异化,是产品基于竞争角度永恒的主题。这种差异化甚至贯穿了产品生命不断迭代的全程,也贯穿在与品牌相关的一切要素中——产品、包装、广告、价格、渠道、视觉、代言人等等,每种要读的动态演变,都是一种创新,具体需要那种要素在哪些时刻做出何种改变,既要考虑到竞争,也要敏锐觉察用户的需求、态度和行为的变化趋向。


设计细节的差异性

设计细节用共通性同样也有差异性,而细节的差异性有时候往往能起到产品的关键性作用。这里使用之前做的一个实际项目做例子:淘抢购模块 v4.0.1的改版。(保密性原则不透露任何数据)因为淘抢购 v3.9样式太过老旧,根据手淘语言更新的淘抢购 v4.0在投放过程中发现,成交量和成交率比 v3.9降低了很多,所以在 v4.0.1的改版中最主要的是解决这个问题。



根据用户采样调研数据分析我们筛查和对比发现,成交量和成交率下降的根本原因是用户在页面丢失,而用户丢失的原因则是因为淘抢购 v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一个,对的你没看错,就是因为这么一个商品坑位的细节原因,导致 v4.0的成交量和成交率比 v3.9降低了很多,以至于引起重视从而需要解决问题。



找出关键问题后就要去解决问题,那么如何解决问题是关键。此处需要保证在不改变新版设计语言的基础上对首屏 Sublist 的坑位透出做调整,那么只需要坑位透出3.5~4个坑位就能到达预期的效果,如何在有限的空间里解决这个问题,做了很多版本的尝试。



通过各类尝试得出ABCDEF六种方案后,这时候需要从设计细节的差异性逐一分析然后进行取舍:


A.此方案为目前 v4.0实行方案,可以明显看出单屏的效率只能展示3个商品坑位,因此是造成用户在浏览的过程中会流失的根本原因;


B.此方案计与 v3.9通栏无太大差异,所以问题就是:1.版式陈旧老化;2.信息过多整体会导致页面看起来杂乱无章;


C.此方案除了版式陈旧信息过多问题外,图片变小导致用户对信息细节辨识度不高,直接pass,所以通栏的方案在当前场景中完全不可行。



D.此方案基于 v4.0上,缩进了卡片内信息的距离,更加突出“抢购”的紧凑感氛围,同时单屏能显示3.5个商品坑位,解决了屏效的主要问题,同时数据显示比通栏式设计曝光点击率有所提升,也符合淘宝的设计风格规范,但是单卡片样式商品与商品之间分割感太强烈;


E.此方案将所有商品坑位包含在一个大卡片内,解决了商品与商品之间的分割感,商品信息细节也比小卡片展示得更完全,但存在问题就是:每个商品之间的间隔存在的分割线导致间距过大,屏效又回到旧版只能展示3个的问题,不能解决主要问题,所以pass;


F.此方案在大卡片设计上进行了优化,取消了分割线的设计,缩进了商品与商品之间的间距,解决了小卡片式商品与商品之间分割感强烈的问题,图片的大小信息细节也能给用户良好的体验,最主要单屏显示3.5个商品坑位,解决了最主要的问题,也符合最新的淘宝设计规范和风格,此方案为最佳方案。



最后采用了F方案,也就是目前我们线上看到的效果,在灰度上线和 A/B test 后数据反馈,淘抢购 v4.0.1的成交量&成交率相比 v4.0有很明显的上升甚至超出了 v3.9的数据,这是通过寻找设计细节上的差异性来解决问题最好的案例。再次证明:设计思维不应被视为一种具体而不灵活的设计方法,细节的差异性有时候往往能起到产品的关键性作用,所以设计师从设计层面上去解决问题的时候,要不断通过寻找产品之间的差异性,培养自己设计思维中的差异性。


动效差异性的运用

产品设计中,动效作为一种辅助手段,帮助设计师传达具象的意愿,帮助开发理解交互手段,是一种锦上添花的表达;前面的内容更偏向于战略层,而动效则偏向于表现层,同一种想表达的心智不同的样式表达的效果完全不同。如何做好动效在产品中的表现,我们就需要了解不同的动效所带来的性质传达。



举个例子,某个弹窗需要对行动点通过动效的展示进行强化,但是同样是强化行动点,如果产品是需要体现出质感、高端等心智时,那么在动效上的处理上就应该体现出高品质高质感的动效,如果产品主要用户为女性或者年龄偏小的用户,则需要体现出可爱、亲切感的心智。那么在动效的选择上,就需要通过平时对动效的收集积累,然后熟悉不同的动效所表达的性质,才能从中选择最优的方案。比如 Q弹缩放的动效看起来亲切感更强,闪光的按钮看起来质感更加强烈一些。

动效向来是产品的辅助,动效应该是克制的,只有了解动效的性质,通过动效的差异性,完美地契合产品,才能发挥出动效的最大作用。



总结

在如今网络时代和社会化媒体的大潮下,产品设计差异化的力量不仅仅基于竞争,更要基于消费者需求的敏锐察觉和捕捉;设计思维的共通性和差异性,在今天也比以往任何时代都显得重要。识别和竞争的需要决定了产品一定要差异化,而诚信和责任要求产品必须做到共通,差异性是产品价值的基础,而共通性则是产品价值的保障。设计思维不应被视为一种具体而不灵活的设计方法,而是需要设计师们通过自己的经验积累,刻意地培养设计与产品之间差异性和共通性的意识,总结归纳出一套适用自己的设计思维。




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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


PC端设计改版及国际化流行趋势

纯纯

为什么觉得英文比中文字体排版好看?

1
.结构

中文由汉字组成,汉字由不同多样的笔划组成,多直线、直角、锐角。英文以26个字母组成,字母以直线和圆弧组成,小写的字母大多可以用一条连笔线条完成,大写也不过4笔;汉字在结构上更加复杂多样,英文结构则更加简单和谐。



2.包含的信息量

汉字是以象形为原始基础,也就是每个字都具有特别的意义,一个简单的字可能在远古时代就代表了一个复杂的生活场景,是世界上最形象的文字,传递的信息量也比英文字母更多。

视觉上和心理上都会让人觉得汉字更复杂,英文更简单。



3. 规律性

英文中,26个字母的反复组合出现,使整个句子有一致和谐的感觉(相反,不一样和突出的东西都会迎来视觉冲击,同时也增加用户的视觉负担),中文字体虽然也有规律(例如:相同的边旁结构等),但是由于中文单个字体结构过于复杂,规律性的东西并不显见。

英文的组成的句子比中文的句子看似更有规律和组织性,视觉上更加轻松舒适。



4. 节奏感/呼吸感

本身单个汉字就比单词更加饱满,每个汉字像是被笔划填充饱满的方块;

单词是由横向的一组字母组成,单词里辅音多为竖长,元母多为短圆,结合起来大多都高低起伏,不会看似一个填满的明显长方块,更像是律动的线条,整个单词之间仿佛流通着空气感。



5.句子组织方式

中文由汉字组成句子,字与字之间一般不留太大空隙,影响阅读的连贯性。

英文以单词组成句子,单词与单词之间需要一定的小空隙,不然会影响单词的理解。

对比之下,英文句子比中文句子,视觉上会带来更好的节奏感和呼吸感。



6.认知/文字的识别度

首先,我们看到图形和文字的时候,会有不同的心里反映,看到图形会想着这个图形好不好看,什么含义,看到文字的第一反映就是它的含义。虽然中文是象形文字,但我们是中文母语者,看中文的时候,第一反应不是将他图形化,而是直接快速看到文字传递的含义,不会对它的结构和形状进行任何思考,跳过了图形(包括图形好不好看的想法)直接到字面意思。而看到英文的第一反应会更倾向于将其图形化和符号化,会看到字体的形状线条,会觉得它好看或者不好看,会把它当作视觉元素与整个画面结合在一起。

另外,我们能发现,无论国内和国外的大品牌,他们都使用了自己的语言文字来做logo,但是他们都将字体进行了设计,让人无法第一时间解读出来,否则会让人感觉更廉价。



举个例子:左边的英文给人感觉会联想到苹果公司的系列高端产品,简洁大气。右边同样的版式换成中文字就会在心理上给人一种廉价感。很像华强北某小商店打出来的广告,让人觉得不够高级。

因此,英语更容易让我们感觉到好看。一般的,在人们的认知中:图形的美观程度>字符的美观程度。



其实博大精深的中文并不比英文逊色,只是在使用的场景不同下各有优劣势,然而我们对中文的排版设计还知之甚少,更无法将中文的字体设计表达的淋漓尽致,所以会导致一个错觉:英文排版(字体)比中文排版(字体)好看,下面欣赏几张设计不错的国内电影海报,看看他们是怎么做中文字体排版的吧~




1.极简化设计

这是一种以信息内容为优先的去风格化设计。

在这信息爆炸的时代,让用户聚焦信息的难度越来越高。如何减少干扰,让信息有效传达给用户正是极简化设计所推崇的。加大字号,拉大层级对比,增加留白,减少颜色以及不必要的装饰等手段越来越多地在设计中体现。
极简化设计的核心是围绕信息内容本身而呈现的,因此这种方式首先在产品UI设计层面开始流行起来。 尽管极简的设计风格导致很多应用的风格越来越趋同。但它是真正以用户为核心的设计发展趋势。设计不再作为独立于内容之外的元素存在,而将着眼于内容本身,为用户打造直观的视觉体验。



2.大投影

大投影,或是微投影,是指轻微的、若有似无的投影,它不易被立刻察觉到,因为不会给人厚重的写实感,反而增加了设计元素的深度,更好地表现了扁平化操作层级。从iOS 11的App Store开始就使用了大投影的卡片式设计,它令设计元素更加独立醒目,极好地抓住用户的注意力。



3.粗标题

在扁平化设计中,文字排版影响着信息层级展示的清晰与否,通过文字的字号、字重、颜色等的对比去建立清晰的信息层级,而不用太多的装饰元素。



4.留白

设计元素和元素之间保持足够的间距,可以减少用来区分层级关系的不必要装饰元素,例如分割线、边框等,利用元素的排版、文本的对比和色彩的搭配建立一种更加简单的设计风格。大间距的设计能让界面具有呼吸感,大量的留白可以增加或减少元素的易见性,元素周围的间距越大,元素和元素之间的独立性就越强,每一个元素就越显得醒目突出,有助于用户把视觉聚焦在内容本身。

Airbnb是极佳的范例,它采用了一种既不是列表设计也不是卡片设计的极简设计,大标题文本包含一组带有图片和描述的元素,组元素和组元素之间保持较大的间距,既保证了它们互不干扰,又不会令界面看上去显得松散,因而带给用户非常轻松的浏览体验。



5.生动明亮的色彩渐变

关于渐变色这一块其实早在去年的时候设计圈中就有很多采用渐变色的设计手法,渐变色设计的优势在于可以让页面层次感更丰富,突出页面更加重要的元素,以及可以使内容相对复杂的一些图片和元素更加统一,而且与此同时也增加了视觉上的感官,更加能起到吸引用户的作用。

 

 

 


1. 优化视觉图片

在上一版的设计中大面积采用科技蓝作为设计的主色调,看久了之后会给人一种稍显压抑的情绪。最新版在整体上做了一次大面积的改变,将原先的白色导航栏优化为深空蓝,并加上微投影的效果。给人更专业和可靠的视觉感受。整体图片抛弃了大面积蓝色调,而是采用暖色调的图片来给人更和谐温暖的感受。在banner的文字排版和按钮上都进行了优化升级,让页面更有呼吸感。整体界面给人更专业、严谨、温暖的气氛。



2.可视化图表优化

在上一版页面较为零散排布的基础上进行了规整设计,让页面变成更易于阅读的卡片式设计。在各个卡片的内部做了新的排版及布局优化。让页面给人更清爽简约的感受。便于用户更好的理解与获取可视化图表传达的核心理念。



3.页面表现形式优化

以调查问卷页面为例,这个页面将原先的设计做了一个打破的处理。为了重新寻找更优化的设计方式。这里采用的设计方式是将问卷连成一串,每个问题都可以进行点击展开式的收缩设计,并且当用户每答完一题,下一题会自动展开。旨在为页面节省更多的空间,这样就可以有效减少用户的困惑感,使问卷的形式更轻松的进行。同时让原本需要两个页面显示的问卷内容可以在同一个页面更好的呈现。



4.流行趋势的运用

这里以市场动态页为例,整个PC端的设计都采用了卡片式及弱阴影的效果。在色彩上也是运用了较为舒适的明暗度的对比方式,在整体图片的选择上采用冷暖交替的对比手法,让页面更和谐、大气又不失乏味。版式上针对上一版做了进一步的优化,让文字的排版更透气,图文的结合给用户更有点击欲的感受。





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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


黄金分割在界面设计中的应用

纯纯

黄金分割在界面设计中的应用


黄金分割大家应该早有耳闻,作为一名设计师,怎么来利用黄金分割线使其构图更加完美呢?

说实话,构图时是否使用黄金分割线构图并不是绝对的,它只是方法之一。但是黄金分割比例在全世界乃至全宇宙确实都是至高无上的。



01

至高无上的黄金分割比例


这种东西是很神奇的事情,你了解的越多越会觉的这是一个不可思议的事情。甚至有人称之为上帝的密码。

那黄金分割线到底是个什么东西呢。它在什么位置?它在画面中的哪个地方呢?

“有一条线条,如果我们从中切一段,如果左边是0.618这么一个比列,右边则是1这么一个比例。”如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。

我们大体概括一下:

黄金分割线是指将整体一分为二

较大部分与整体部分的比值

等于较小部分与较大部分的比值

其比值约为0.618

这个比例被公认为是最能引起美感的比例

总结一句话就是

0.618的比值最美



0.618的比例怎么来的?

有人做了一个实验,他们拿着一些长方形去问全世界的人,说哪个长方形最好看?结果所以的人都不约而同的选择了这种长方形。西方的,东方的,土著的都选择了如下图的这种长方形。

科学家们就很奇怪它到底奥秘在哪?要分析分析它。这个长方形如果从中间画一条线,把它分割成俩个形状的话,右边可以是一个正方形,左边小的长方形的比例和原来的长方形的比例是一摸一样的。

小的长方形也可以切割出一个正方形和一个等比例的更小的长方形。这种长方形只有黄金风格的长方形才能做到。




02

运用黄金分割线构图


画面长宽比不同,黄金分割线位置也不同。这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1。



在移动端主流尺寸中,iOS尺寸使用750*1334,安卓尺寸使用1080*1920。这俩个尺寸正好等同于一倍图375*667的比例。



不同长宽比的画面我们按照0.618:1的比例,一个画面可以切割出4条黄金分割线,上分割线/下分割线/左分割线/右分割线。我们在实际构图怎么利用黄金分割线快速排版?


2.1、基本的运用方法


2.1.1、把主体放线上,当然线状的主体才能放线上。

在构图中我们经常遇到正方形/长方形等规则的形状,前期我们把规则的形状中心放在黄金分割线上,等所有内容添加完成后再分析画面的重量,微调来平衡画面。

不是所有的物体都是刚刚好放在黄金分割线上。轮廓化的形状应该根据什么来跟黄金分割线重合呢?应该是形状的重心,而不是中心。

(如上图)长方形的图片是有规律的形状,我们把它的中心暂时先放在右黄金分割线上,从平衡角度来看还是右边重,因为我们还没有把页面所以元素放进去,到时候可以根据画面的平衡感来微调。



2.1.2、多条黄金风格线构图

一个画面中,可以切割成上下左右四个黄金分割线,前期练习时可以尽可能把黄金分割线利用好。

(如上图)我们把图片放在右黄金分割线上,正文大标题放在上黄金分割线上。这样就搭上俩条黄金分割线了,再加上logo/分类/导航等信息整个界面就更完整了。(如下图)



2.2、具体选择哪一条?

初期进行练习的时候,黄金分割线能搭上几条就搭上几条。这么多黄金分割线,如果我用1条到2条,到底选择哪一条?


2.2.1、根据元素选择

界面设计时要根据元素多少进行选取更合适的黄金分割线。

(如上图)最终所有元素都确定后,我们把图片放右黄金分割线上,正文大标题放在上黄金分割线上,正文跟按钮的中心放在下黄金分割线上,图片轮播按钮的中心放在左黄金分割线上。这样四条黄金分割线搭上都利用起来。在这基础之上再去微调相信画面会更出彩的。


2.2.2、根据哪边更精彩选择画面

把上下或左右两条黄金分割线对比一下就能确定参考哪一条黄金分割线了。

(如上图)我们开始把图片放在下黄金分割线上,上面留了太多空间,图片的内容展示的也很少,画面感不够丰富。



(如上图)根据画面的丰富程度,我们把图片放在靠近上黄金分割线的位置,把图片中主体的放在靠近右黄金分割线附近。然后再添加内容丰富画面,我们为画面添加logo/数据/导航/分类/按钮,让画面更丰满。(如下图)



2.2.3、视线的影响

人和动物的视线朝向会影响到它的摆放位置。

(如上图)小狗狗的视觉朝向是左边,所以我们肯定得把小狗狗放右边。因为它是一个不规则造型,当遇到不规则造型时我们应该尝试找到它的重心,正好它整个形态成一条直线,它的重心应该是沿鼻子的往右的一条隐形的线。主体确认好后,我们在加上logo/标题/正文/导航进行排版,保证画面平衡进行微调。(如下图)




简化的黄金分割线

三分线


我们还有个困难,那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说,我们有一种简化黄金分割线的做法?就是三分线。

什么意思呢?左边是黄金分割线,右边是三分线。三分线就是均匀的把长方形的长和宽切三段,均匀的砍三段,每个方格都是一样大小。


三分线的位置跟黄金风格线的位置差不了多少,但是黄金分割线比起三分线更靠近中央的位置,是这么一个概念。




(如上图)绿色的虚线是右黄金分割线的位置,黄色的虚线是右三分线的位置,我们没有直接把主体的重心直接放在黄金分割线上,在这个画面中,因为左右的信息量很大,给人很重的压迫感,所以主体如果太靠近左边就会让画面失去平衡,这时候我们就把主体放在了三分线上。


不要说很严谨的把它重心摆在三分线上,一来黄金分割线真实所在的位置是三分线往里靠一点的位置,二来我们说黄金分割线构图/三分线构图不是说让你一定要完全重叠,大差不差就行,具体情况还是要具体分析。


黄金分割还不止这么多的表现形式。它还有一种更复杂的表现形式叫黄金螺旋线。而从黄金螺旋线里可以推倒出一个黄金兴趣点。

于是我们就把最佳兴趣点和黄金螺旋线都统称为黄金分割的衍生品。在设计中应该是算比较高级的一种构图技法了。





 03

最佳兴趣点


来看看黄金螺旋线衍生的最佳兴趣点在什么位置?(如下图)



在设计中实际应用的时候,想找出这个点来绝对不是很容易的事情。所以怎么办呢?有简单找到最佳兴趣点的方法吗?长方形的一条斜线链接起来,另一个顶点画一条垂直于这条斜线的点基本就是最佳兴趣点的位置。(如下图)



画面中不止一个最佳兴趣点,一个画面中会有四个兴趣点。会更好的方便我们利用。(如下图)

 


画面长宽比不同,最佳兴趣点的位置也不同。这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1。(如下图)

 


在移动端主流尺寸中,iOS尺寸使用750*1334,安卓尺寸使用1080*1920。这俩个尺寸正好等同于一倍图375*667的比例。




案例分析



(如上图)图片案例来自摄影师7kidz的摄影作品,图片质量很高,整体风格很符合现在主流的抖音风,那就顺便做个直播类的ui界面设计来诠释最佳兴趣点的魅力。


案例一同样大小的图片我们按照两种方式进行摆放,左边的图片我们参考黄金分割线,把人物的眼睛靠近上黄金分割线的位置;右边的图片我们把人物的右眼放在了右上的最佳兴趣点的位置。然后我们去掉辅助线再对比下(如下图)



虽然我们参考了两种方式进行排版,图片本身就很精美,很多人就感觉随便放放就好了,左边的黄金分割线构图单看也是很棒的,所谓没有对比就没有伤害,当黄金分割线遇上最佳兴趣点,哪个好效果是显而易见的。从画面的饱和度跟视觉引导显然右边的整体感觉更饱满一些。加上直播平台元素整个界面(如下图)



案例二画面中人物前方的效果很出彩,想办法尽可能保留,所以把人物右眼放在右上最佳兴趣点的位置,正好左前方灯管不规则的物体的重心也恰巧在左上最佳兴趣点的位置,这样就有运用了两个最佳兴趣点,画面更加丰富起来,加上直播平台元素整个界面(如下图)



案例三画面中人物的睫毛放在右上最佳兴趣点的位置,刚看到画面的时候我们第一眼会被美美的胸部所吸引,但是我们眼神会顺势往右上看到美女的睫毛。是的因为我们把它放在了最佳兴趣点的位置,不会因为它占的面积很小而被忽略。这个案例其实最具代表性。加上直播平台元素整个界面(如下图)




“最佳兴趣点是不是和黄金分割线是重叠的?”

最佳兴趣点和黄金分割线交点不重合的,黄金分割线的交叉点比最佳兴趣点更靠近画面中心。



“那是不是就是三分线的横竖线相交处啊?”

最佳兴趣点和三分线交点也不重合?最佳兴趣点比三分线还要更外一点。




最佳兴趣点可以和黄金分割线或三分线一起使用吗?

答案是肯定的,一起使用会增加我们布局的多样性,内容可以排的更加丰富。

(如上图)画面中最突出的是人物的头发,我们把头发的形成的点放在了左上最佳兴趣点的位置,微调人物,在画面中的人物重心差不多在三分线所在的这条直线上。标题正好做为一个整体的中心放在下黄金分割线的位置上。再加上音乐封面/歌曲名/播放按钮,微调画面使画面达到视觉平衡。



(如上图)音乐专辑封面为正方形,最佳兴趣点就是正方形的中心点,封面人物重心放在正方形的中心,封面放在靠近上黄金分割线的位置;大标题差不多在左上最佳兴趣点的位置,整个画面重心在左黄金分割线的位置,为了达到视觉平衡,右上角加了一个头像形成大小对比,让画面更稳定,不至于左边太重而失去平衡。加上播放按钮/推荐的封面后再调整。(如下图)




04

黄金螺旋线


斐波那契螺旋线也称“黄金螺旋”,是根据斐波那契数列画出来的螺旋曲线,自然界中存在许多斐波那契螺旋线的图案。是自然界最完美的经典黄金比例。

斐波那契螺旋线,以斐波那契数为边的正方形拼成的长方形,然后在正方形里面画一个90度的扇形,连起来的弧线就是斐波那契螺旋线。


斐波那契数列(FibonacciSequence)数列是这样一个数列:

1123581321345589…



在数学上,斐波那契数列是以递归的方法来定义:

F0=1

F1=1

Fn=F(n-1)+F(n-2)

(n>=2nN*)




斐波那契数列比在字号大小、界面布局、Logo设计上具体有哪些用法?


字号大小


4.1.1 大字体与小字体比例系统

我们在选择一个字号大小做为参考时,我们正常会选择最大字号或最小字号做为参考。按照黄金比1:1.618可以得到比它大的字体,按照黄金比1:0.618可以得到比它小的字体。

为了方便排版,我们除了可以使用黄金分割比外,还可以使用斐波那契数列比。可以有更多灵活的排版方式,通过对比可以选择最适合的。

斐波那契数列比1:1/1:2/1:3/2:3/1:5/2:5/3:5 ...


如上图我们可以根据字体的高度比来排版,这里我们大字高度:间距:小字高度比为8:5:5,可以灵活使用斐波那契数列比,多排几个版式找到最适合的一个。



4.1.2 文字的长度比例

在设计字体大小的时候,可以根据字体的长度来做为参考,黄金螺旋线整体长度为140px,下面的字体比较长我们就乘以1.618来得到比较大的比例226.52,取整数为226,我们对应长度字号取整数即可。




界面布局

上图案例由UISTAR提供,整个界面的布局很舒服,字间距也恰到好处。在做后台界面,客户端界面时候很多时候会出现界面分段布局,很多时候认为后台不是特别重要而忽略了它的美观性。看下图我们应该怎么通过斐波那契数列比来切割画面


我们通过斐波那契数列比8:5:3:2:1绘制了正方形,在后台复杂的界面中我们肯定要参考画面中重要的最小宽度来确定这个比例大小,红框就是我们确定的最小宽度,确定宽度后8:5:3:2:1得到大小不一的方格,剩下来就是根据内容自由组合合适的方格。


很神奇的事情发生了,好的作品大体都符合这个规律,几像素的偏差已经不重要的,所以前期我们可以参考方法论,当你的能力上来之后就可以放弃它慢慢凭自己的感觉来判断作品的好坏。



LOGO设计


黄金斐波那契螺旋法是国际上通用的LOGO设计手法,也是最工整最严谨的设计手法。


BIGD牛大大已经出了类似教程,具体请查看。《Ai中用黄金比例法快速作图》

这边引用BIGD视频教程是想让知识更系统,也省点精力撸其他的干货。


我写了一篇《如何学习Yoga Style?》,里面有圆切法的基础教程。



这里说一下为什么要用黄金螺旋线去重新定义标识呢?

打个比方很多时候我们会找一张动物图片用圆切法去绘制它,但是我们绘制时候因为不知道怎么去做减法,会让这个形态变的复杂,绘制结果更多像是图案或者图形,而不是标识。我们使用黄金螺旋比例去切形态的时候要抓住动物的主体形态和特征,尽可能的抽象化简单化。


黄金螺旋线在logo中的应用

黄金螺旋比例用圆去切割很多人已经会了,但是最最最高级的就利用好黄金螺旋线。最近站酷很火的一个设计师DAINOGO,它的作品中就用到了黄金螺旋线,能用一个圆解决的绝对不用俩个圆。我们在设计中如果有运用到弧线的地方可以考虑使用黄金螺旋线做为参考。



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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




重复与突变在产品设计中的应用

纯纯

设计中的重复是什么?


在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐、统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感。


排版的四大原则:对比、对齐、亲密性、重复,重复在排版中也占据了一席之地,可见它在设计中分量是不可小觑的。



格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动,格式塔原理中的对称性就是重复的一种表现方式;格式塔原理中的相似性算是重复中自带的一种突变。



01、重复

重复是设计中最基本的形式。在同一设计中,相同的形象出现过两次或两次以上就形成了重复。


在产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值;在交互层面重复的元素有位移(方向)、旋转、缩放、不透明度、相同属性交互要一致。


在产品设计的前期设计师需要输出界面设计,为了方便下游前端工程师更好的规范和适配,也要保重产品后期上线产品视觉稿的高度还原,这就要求设计师输出一整套产品的视觉和交互规范。


重复配色

在app store 的页面中使用了相同的颜色进行提醒,方便用户快速查找和点击,整体的蓝色又给人理性的感觉,看到付费app的好评数可以看出是因为产品好才推荐你进行理性消费。


重复大小

INS主页第一排头像相同大小进行重复排列,与内容的人物头像有大小对比之分;INS搜索页采用了九宫格布局,为了重复中有变化它把右边的四个方格合并成一个内容展示区域,推荐好的热门视频。


重复间距

Airbnb界面中的间距非常规范,首页大体采用了谷歌里面的8px原则,每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。


重复组件

(如图标注)INS界面中用了统一组件,相同的圆角和高度规范又给画面增加了统一性和连贯性。



02、突变

在相同的形象重复出现时,尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。

格式塔原理中的相似性也是重复中突变的一种形式。


在产品设计中我们运用的突变的目的很简单就是为了让其更加突出,多用于区分当前状态、选中状态和默认状态。


banner轮播

banner轮播图上面的提示状态会根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。


导航栏分类

导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。


按钮

在登录注册页面中,我们会通过大的色块凸显登录按钮,引导用户快速登录进入到app里面。也减少了用户的思考过程,符合大脑的惰性。

但是在很多windows系统中,卸载软件时会跟你玩文字游戏,会用非、否、不是等诱导你作出错误的判断。


feed流

feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。

站酷首页feed流里面会把内容分为作品和文章,之前版本中的作品和文章的样式是一样的,新版本中重点是推作品,当文章出现时通过改变文章的排版进行区分,重复里面又带有变化。



03、节奏感

多少元素排列可以形成节奏感,一般来说是3个或3个以上,两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。


左右滑动

(如图来自uistar)界面中三个书籍整齐的排列在一起,可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时,应考虑元素的数量,尽量不要超过10个以上。


列表页

(如图来自uistar)列表页面整齐的排列在一起有一定的节奏感,通过改变icon的配色来丰富画面。



04、韵律

元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。


最美有物

最美有物app中的画报界面中,通过改变每个界面的大小比例有序的排列在一起,通过上下滑动可以快速浏览标题,进行查找翻阅,整个过程很流畅,整个界面有流动性和韵律感。


图表

图表在设计的时候通过不同颜色来区分不同的时间段,线条错落有致的排列增加了界面的韵律感。


配色

(如图来自Prakhar Neel Sharma和crisssamson)这俩个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中,增加了画面的丰富感和韵律感。


重复在动效中如何运用才会有韵律感?

界面动效中主要分成当前状态动效变化和转场动效变化,界面中的元素a1对b1、a2对b2、a3对b3信息对等,能帮助界面做出很有韵律感的动效。



总结:

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。


重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的,几种不同的美感可以同时存在的,只不过它适应不同人群的审美能力,审美能力高一点的更喜欢一些变化,审美能力相对基础更喜欢简单的重复。


所以画面中不断出现同样的元素这叫重复,而在很多重复里面突然出现一个变化这叫突变,相同元素整齐的排列在一起这叫节奏感,而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


UI新视角-界面三重构

纯纯

当不确定成为常态,公司的组织架构频繁变动,产品不断迭代,设计师需要跟随用户需求、业务、产品进行技能迭代,UI设计师学习数据分析、运营、交互等技能提升自己。这些技能都需要产品界面设计为载体,那么界面设计中有哪些确定不变的方法和技巧呢?那就需要对界面有更深入的理解。

01 如何理解界面设计?

互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等,每个职能岗位对界面设计的理解深度也各不相同。

1.1 交互视角

交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

1.2 组件化视角

产品经理、交互设计师、UI设计师、前端工程师共同搭建设计系统语言时,他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件,比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。

1.3 视觉视角

UI设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。

1.4 前端视角

前端工程师会从代码视角理解界面结构,相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。

1.5 界面三重构构思

基于以上视角,现在我会以一种新的视角带你去理解和学习界面设计,它就是界面三重构。简单说就是分别从X轴、Y轴、Z轴三个维度去理解和解读界面设计。但是在模型抽象时遇到了困难,如图模型一是从界面、交互、前端的X轴、Y轴、Z轴去解读,模型二是从X轴、Y轴、Z轴的界面、交互、前端的去解读。

模型的抽象不够简洁,有很多重复的点。这种结构很像组件化中的类别和状态。我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ,因为交互和前端都是建立在界面之上的,所以就有了界面+交互—X、界面+前端—X。当写到界面X轴相关知识时,如果有交互、前端的知识点,可以在此基础上接着写。

根据平面逻辑图我抽象出一个更简单的模型。可以从界面的X、Y、Z、XY、XZ、YZ去输出相关知识点,交互、前端在界面三重构的基础上阐述。

02 X轴设计

X轴设计中有位置的结构关系,位置的排序,段落文本行长的易读性,交互和前端中的应用。

2.1 位置

X轴从位置上可以简化为左右、左中右的结构关系。 

2.1.1 左右结构

在左右的结构关系中,自古就有左为上,人的视线浏览顺序是从左到右,从上往下。所以重要的信息内容可以优先放在左边。在舞台剧表演中,重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边,右边放箭头指向。

2.1.2 左中右结构

左中右的结构布局让层级更加丰富,从而增加层次感。左中右的位置顺序是可以被定义的,常见的有左中右对应一二三的位置关系,也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。

2.1.3 左右并列秩序

我们来看看App界面的底部Tab栏的结构,当我们随意打开一个App时,你还记得底部Tab从左到右的栏目分别是什么呢?可能经常使用的App我们很熟悉,对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律,就是第一个栏目往往是首页,最后一个是我的个人中心,其他的相对比较模糊。

由此我们推断出从左往右的顺序并不是一二三四依次递减,而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计,同样也适用于B端的界面设计。B端产品界面的导航结构第一个是首页(工作台)或最重要的内容分类,最后一个是更多或设置。同样遵循以上规则。

右侧位置重要最典型就是模态设计,在对话框设计中,确定和取消按钮往往把最重要的放置在界面的右侧,这时位置的排序确定为一,取消为二。

2.2 易读性

文字段落编排时更多的需要考虑段落文本的易读性,当你设计C端产品时,因为屏幕尺寸的原因会忽略段落文本的行长,但在Web、B端设计中,行长的定义可以影响到读者的阅读效率和体验。

美国芝加哥有学者做过一个试验,人的眼睛是在不停地跳动,在跳动的时候是看不见字的,停下来的时候才能看见字,而且每次停下来只能看六个字。所以一段文字不要排得太长,过长眼睛在阅读时会很疲劳,在阅读时我们更适合阅读较短的文字。 

网页新闻详情页面的行长,我研究了纽约时报为640px、华盛顿邮报680px、Medium680px,所以我们设计师可以控制行长最大在640—680px。但是西文和汉字还是有区别的,站在前人的规则上去学习定义规则更加重要。

2.3 交互改变位置秩序

位置的重要秩序其实是很容易打破的,在界面固定不变时结构中相对稳定,当交互大兄弟来了,说我想尝试改变改变,如图把手机的网易云音乐和QQ音乐进行组合成组,原来的一二三四的结构就被打破了,变成了一三二的视觉结构关系。点开组合后,这时候用户大兄弟来了,网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异,所以大家一定要带着客观的心态去学习,不同视角和不同思考维度都会有异样的结果。

2.4 响应式与断点

X轴设计从前端的角度就是响应式和断点,因为载体的容器大小不同,前端代码主要用Media来打断点,不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。

03 Y轴设计

3.1 视觉中心

物理几何中心是居中的,但是人的视觉中心是偏上的,有时候眼见为实是假的,视错觉中有大量的案例,在色彩和图形设计中需要视错觉的矫正。


如下图APP的闪屏页的Logo居中布局,考虑到有向下的重力和视觉中心偏上的理论,往往把Logo居于物理中心上方。


3.2 倒金字塔信息层级

倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构,重要的信息放上面,越往下信息层级越低。网页设计中还会有折线之上的运用,以前人们看报纸是折叠的,但是为了告知读书报纸展示也是有内容的,所以折叠设计时看到一些图片引导读者打开。


Apple官网的信息层级也遵循倒金字塔信息层级,上方Logo加导航,中间为最新发布的产品,下方为历史发布产品。信息重要层级依次递减。Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。

3.3 纵向模式

纵向模式是用户习惯自上而下滚动来浏览更多信息,当用户还未确定目标信息时,纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。如图微信APP的发现界面,用户会选择一列一列快速浏览直到找到某一目标信息后,再横向浏览细节。那么问题来了,上文中提到倒金字塔信息层级,重要的信息应该放置上方,为什么APP的Tab栏很重要却放置在界面底部,下文隐喻设计中“驾驶舱隐喻”会讲到。



04 XY轴设计

X轴与Y轴组合后就形成了一个平面,所以平面设计的理论知识在此次也适用。 

4.1 盒子原理

当我们做界面设计时,为了让界面的元素统一为一个整体时,给他们整体来个框框就形成了一个一个盒子的样式,这样更有利于组合信息。典型的设计有卡片、列表、模块化等。

4.2 四角压边

在Dribbble的作品展示中,由于作品图片展示比例为4:3,为了平衡界面中的元素,常常在四个角放一些小的相关元素来平衡画面。我们来看一下R神的插画作品中大量使用了四角压边的设计技巧。

运用到界面设计中最典型的就是卡片设计,比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计,四角放置信息,整体给人简洁大气的感觉。

四角压边在设计中是可以灵活运用的,可以把四角压边变成三角压边,两角压边。如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时,四角压边就变成了两角压边,多用于列表页。

4.3 跷跷板原理

四角压边的本质是跷跷板原理,通过调整元素让界面达到平衡。跷跷板原理本质是平衡,需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大,右边的重量小,但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。

4.4 8点网格(4点网格)

8点网格理论来源于谷歌Material Design的设计语言,4点网格理论来源于苹果iOS的设计语言。个人还是更加喜欢iOS的4点网格,因为原子单位越小,可呈现的方式越多,可解决的问题方案也越多。8点网格可以理解为最小单位,其他使用的单位都为8的倍数。8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。

苹果和谷歌都是在定义产品系统中的度量单位,西方人一直想定义度量这个问题,其中最有名的就是勒·柯布西耶的《模度》,他的理论是以西方人的的比例结构来定义规范,并不能适用于全世界更多的人种比如东方人、非洲人。但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的,最小为44pt。iOS定义了人类使用触控屏的基本度量,44pt也是4的倍率,这才是我喜欢iOS的4点网格的真正原因。 

4.5 视觉流引导

读者在看界面的时候,眼睛的视线受到画面内容的吸引,就会产生一个视觉先后的次序,将这些视觉集中点的先后依次连起来,就形成了视觉流导向。 设计师经常会考虑版面或界面上的文字是否会被阅读,实际上很多文字都不会被阅读,但是可能会被浏览。视觉眼动仪可以检测到人们如何浏览一个页面的,从找到切入点,到了解界面中信息关注的先后次序,从而调整界面元素,来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。

4.5.1 F模式

尼尔森F型视觉模型由Jakob Nielsen于2006年提出,他指出用户在浏览界面时,视线动线会呈现宛如英文字母F的形状,这种视觉浏览模式主要包括以下三个方面: 

  • 读者的眼睛会先从顶部开始,从左到右水平移动,浏览的上半部分会形成一条横向的运动轨迹,这就是F形状的第一条横线。 
  • 读者的目光会向下移动,并再开始从左到右观察,但浏览的视觉动线长度会相对短些,这就是形成了F形状的第二条横线。 
  • 读者从界面左边的部分进行垂直扫描,以较短的长度向下扫描,此时读者的阅读速度较慢,而且更有条理性和系统性,这样就形成了F形状的一条竖线。

根据尼尔森F模型,我们可以得出几个心理暗示:

  • 读者在浏览界面时是快速扫视,不会仔细阅读每一个界面内容。
  • 界面的头两段文字无比重要,多用小标题、短句引起阅读者注意。
  • 将重要的内容放在最上边,将重要的信息显示在标题和段落的前部显示给读者。 

4.5.2 Z模式

Z模式是基于用户从左到右自上而下的阅读习惯,用户首先关注的上半部页面的内容,依照从头部的左边到右边,再沿着对角线浏览下一部分的中部左到中部右,循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。

4.5.3 古腾堡图表法

古登堡图表法(Gutenberg Diagram)又称对角线平衡法则(Diagonal Balance),由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限:

  • 第一视觉区(Primary Optical Area):左上方,读者首先注意到的地方。
  • 最终视觉区(Final Optical Area):右下方,视觉流程的终点。
  • 强休息区(Strong Follow Area):右上方,较少被注意到。
  • 弱休息区(Weak Follow Area):左下方,最少被注意到。

如图小程序的授权页从Logo到允许高亮按钮就是对角线平衡构图。

05 Z轴设计

Z轴设计可分为视觉度层级(单界面)、结构层级(单界面)、产品用户流程(多界面)。

5.1 视觉度层级(单界面)

视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。

5.1.1 主体与背景

界面中使用背景色是让元素向前进,背景色多为灰色且有颜色倾向,偏冷色或暖色。微信界面使用了偏冷色背景,Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

5.1.2 投影

界面中使用投影可以增加内容的视觉层级,之前追波流行的弥散投影也是为了增加界面视觉层级。谷歌Material Design就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。

5.1.3 色彩大于字重大于字号

色彩最典型的就是App的消息红色圆点,红色的波长最长,所以用最突出的红色来提醒用户有新动态。字重是从面积的大小衡量的,标题文字常常加字重来提升视觉。在定义组件时,鼠标悬浮、Hover的各种状态就是用颜色来区分,目的是让用户操作后有反馈的感知。

5.2 结构层级(单界面)

界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载;导航层是位于内容之上,位置相对静止;遮罩层配合弹出层一起使用,又叫模态层;弹出层属于轻量化设计,比如消息通知、下拉菜单和加载、报错等状态提醒。 

5.2.1 模态对话框

如图模态对话框是用户在完成任务时,不希望跳转页面而打断工作流程,而是用Modal对话框在一个界面上承载相应的操作。对于信息量不大,容器可展示的操作可用模态对话框。

5.3 产品用户流程(多界面)

产品的界面设计需要从概念到信息分类到信息架构,目的是方便用户快速的搜索、筛选、辨别出有用的信息。交互设计需要学习辛向阳教授的交互设计五要素:用户、行为、目标、场景、媒介。 

产品的Z轴设计其实是从平面(界面)、空间(层级)、架构(关系)梳理出结构关系,但站在产品层面最重要的是信息与用户的交互设计,关注用户旅程地图中用户流程。用户流程需要多界面之间跳转,这就形成了产品的Z轴界面设计。 

5.3.1 什么是用户流程

用户流程是用户从打开APP到完成任务关闭APP的使用全过程,包括了用户看到什么信息,做了什么事。 疫情期间每天都需要使用随申办小程序,用户流程是打开微信,进入到微信首页,下拉查看常用小程序,点击随申办,查看随申办,退出小程序。

根据用户流程优化体验,用户流程越短越好,操作流程尽量不超过5步。用户流程要顾及头尾,即用户进入到一个新界面会看到什么信息,用户成功完成任务后会跳转到哪里,或显示哪些反馈信息。这些都是最容易被遗忘的接触点。

5.3.2 如何确定用户流程?

基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例,需要思考用户有哪些场景,如果知道谁发的,就会先通过找到人,然后进入其朋友圈找到信息。如果忘记谁发的呢,那只能凭记忆里在朋友圈慢慢滑动,直到找到该信息。



以上从交互设计五要素行为和场景对用户流程进行分析,还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。

06 XZ轴设计

上文已经讲了Z轴相关设计,为什么还要写XZ轴、YZ轴的设计呢,从X、Y、Z、XY、XZ、YZ更有逻辑性和完整性,也确定存在一小部分的案例可以解析。 

6.1 Banner轮播图

Banner轮播图除了横向的X轴出场次序,还有Z轴点点一对一的当前状态。移动端受容器大小限制多为Z轴设计,Web端容器变大可以变成左右的交互设计形式。

6.2 导航栏

导航栏是Z轴的视觉与交互结合,当前状态需要重点突出,视觉向前进,点击导航栏后底部的横线会有动效移动,可以侧滑导航栏选择类别,这样效率会更高;也可以侧滑下方内容切换选择。

6.3 列表侧滑删除

列表侧滑是使用内嵌的布局方式,界面设计中用户习惯是先查看再操作,当容器大小放置不下可先隐藏操作按钮。QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

07 YZ轴设计

YZ轴多结合界面交互一起设计,通过用户操作形成Z轴信息架构的变化。YZ轴设计多用于信息流、键盘输入等

7.1 页面滑动

信息流的设计多为Y轴设计,Y轴急促、紧张的情绪会让用户不停的刷信息。信息流设计中采用相似的界面结构保持统一,比如固定的头像位置,固定的操作按钮位置,标题文本形式等。微信朋友圈信息流一整块一整块的加载提高阅读效率;而抖音的视频流是一个一个加载,更注重精准推送和沉浸式的观看体验。

7.2 键盘输入

键盘输入也是采用YZ轴设计方式,不同场景下的键盘输入交互也有差别,微信聊天界面的键盘输入框放置在底部,每次调用键盘组件时界面会从下往上移动;而朋友圈评论时,键盘组件除了从下往上移动,还要对齐到对应评论的内容上。前端的定位技术会有所不同。

08 模型升级

界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等,当然也可以替换成桌面端、Web、小程序、APP、B端设计等。这样就可以把中间的要素抽象成N,界面三重构模型升级为N——X轴、Y轴、Z轴,N可以为单一的内容比如界面,也可以是N=N+N比如界面加交互一起思考。简化的模型更适合微观层面的细节设计,并不适合于宏观视角的分析设计。

8.1 如何使用该模型?

我们来举一个组件的例子,比如导航设计共分为二级导航,我们常规会显示出一级导航。一级导航可以从X轴、Y轴两个维度去思考,X轴的多为横向全局导航,Y轴多为侧边导航栏。当交互大兄弟来显示二级导航时可以平铺(XY)、上浮(Z)、内嵌(Z),二级导航展示方式还需要考虑容器大兄弟的意见,容器够大就可以选择平铺,容器小就展开收起的交互模式,展开就会有上浮和内嵌的两种形式。


模型抽象的N是随时发生变化,对应的界面设计形态也会发生变化,但是X轴、Y轴、Z轴的方法和设计技巧是相对不变的。只是你知道或不知道,会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。 

8.2 等价设计

等价设计是帮助用户完成任务的结果是一致的,但过程可能不同,又或者是产品的逻辑结构是一致的,但设计的外在形式有差别。 


如图京东购物车的数量添加减少功能是展示出来的,直接可以添加可减少商品数量;但是淘宝购物车的数量是展示结果,修改商品数量需要点击后出现步进器组件。这两个设计形式就是等价设计,等价设计的好坏需要考虑很多因素,用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理,合适最重要。

8.3 同形异构

同形异构是指不同的信息、数据类型设计出相同的外在形式。微信消息列表也中有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等,这些消息的数据类型、对象各不相同,可是外在的结构形式是一样的,这样做的目的是简化、统一,通过图标和头像来区分人、应用、工具的消息差异。

以上总结的界面三重构相关知识、理论、技巧都有其使用范围,那么有没有一种设计方法可以凌驾于界面三重构模型之上呢,答案是肯定的,那就是隐喻设计。


09 隐喻设计

什么是隐喻设计?我们应该怎么去理解它呢?隐喻可以理解为隐含的相似性,它用想象的方式将某一物体与另一物体相联系,并把二者的特征、情感等相互结合转移。如果对隐喻设计感兴趣可以搜索我之前写过的文章《揭开隐喻设计的面纱-你不知道的隐喻设计》

隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本,为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的ios操作系统和谷歌的Material design。 

9.1 iOS六大设计原则之一

iOS六大设计原则:AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。 

Metaphors(隐喻设计)当一个app的虚拟对象和动作都是对熟悉事物的隐喻时(不管基于现实世界还是数字世界),用户学习的更快;隐喻设计在iOS系统中很好的得到体现,因为用户是直接与屏幕产生物理交互的。

用户移动视图来查看更多的内容;拖拽内容;切换开关、移动滑块并且直接滚动来选取值;甚至可以像翻书或杂志一样轻快翻页。

关于隐喻设计还可以用另一个概念来表达,那就是心智模型。因为人类几千年的发展,虽然科技进步很快,外部环境也发生剧烈变化,但是人类的心智进步其实是很慢很慢的。 


9.2 心智模型

心智模型最早是由苏格兰心理学家苏珊·凯里在1943年提出的,是指在人们心中根深蒂固存在的, 影响人们认识世界、解释世界、面对世界, 以及如何采取行动的陈见、假设和印象。心智模型是一种内部表征, 但这种表征并不是对外部世界的完全模拟, 具备不正确性和不科学性等。因为用户心智模型存在这些不足, 所以需要了解其偏差与错误的来源, 以便今后采取适当的措施提高用户与系统的交互效率。 

在产品设计的系统领域,心智模型是指人们对于产品系统的理解,用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。每个用户将具有不同的思维模式,他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。 

心智模型其实是通过学习、感悟不断提升自我认知的过程,还记得我刚开始学习软件时候,如合成软件Photoshop、三维软件C4d。当我第一次接触这类软件时,感觉整个人摸不着头脑,太多的概念都不清楚,比如通道、图层样式、曲面建模、打灯光、动态图形等。踏踏实实的去学习这款软件是最有效的方式,通过不断的试错和总结,慢慢的得心应手,这样我们对于软件的心智模型就会逐渐形成。 

但是有些心智是和我们生活方式、习惯、文化息息相关的。日本设计师深泽直人就提出了一种叫做无意识设计的设计理念,又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。所以设计师需要有好奇心、有共情、有洞见,才能很好理解设计来源于生活这句话。 


9.3 XY情绪

X轴与Y轴的情绪可以从日常生活中找到答案,星巴克、瑞幸的店铺使用了X轴的横向排列,而在肯德基、麦当劳的店面排队使用了Y轴竖向排列的方式。我们尝试用抽象思维把它们进行图形化,可以表达的更加直观。

星巴克、瑞幸的店铺使用了X轴的横向排列,用户可以看到工作人员不停工作,哪怕需要等待一会也不会很压抑,整个体验过程会给人一种舒适、安逸、闲散。而肯德基、麦当劳的店面排队使用了Y轴竖向排列,会营造一种热闹的感觉,因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉,买完就走的即视感。

通过对日常生活和物理世界的映射,设计师在产品设计时可以考虑使用X轴和Y轴的情绪设计,比如文本采用横向排列会给用户带来一种平静、舒适的体验。APP底部的Tab栏横向排列希望用户花更多的时间浏览每个栏目的内容,这时候内容的好坏、吸引度也是重要的衡量指标。

在信息流的设计中大量采用Y轴,因为Y轴紧张、急促的感觉会让用户下意识的快速下滑,比如微信的朋友圈;抖音上滑来切换视频;直播互动通过大量评论来营销热闹氛围。

9.4 隐喻设计

9.4.1 驾驶舱隐喻—APP Tab栏

在前文中提到人阅读浏览的顺序是从左往右,从上往下的。那么应该把重要的东西放置在左边或者上边。Tab栏作为APP应用的主导航为什么却放置在界面的底部,这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学,哲学的尽头是佛学一样。

日常生活中开车、骑车,手永远是在控制方向和操作,而视线前方就是驾驶员需要浏览阅读的内容,比如行人、马路、车流等。把驾驶舱隐喻映射到产品界面中,底部Tab栏是引导用户去往哪里,上方动态变化来满足不同用户对不同内容的需求。


9.4.2 问答隐喻—知乎问答

在线下学校的教室里,老师提出问题学生们举手回答的场景,抽象一层其实是一个提问者、多个回答者的逻辑,是一对多的关系。知乎问答界面就采用了教室的问答隐喻设计,一个问题多个回答。

9.4.3 观看隐喻—B站直播

在电影院看电影时,屏幕在正前方,很多人共同观看一个屏幕。其实也是一对多的关系。B站的直播界面平台,也是数以万计的人共同观看一个直播,下面的评论弹幕映射电影院的欢声笑语。

9.4.4 会议隐喻—Zoom视频会议

协同办公领域,在会议室开会是再寻常不过了,会议室开会时能同时看到同事的面部表情,每个同事都可以投屏进行共享会议内容。Zoom的视频会议软件采用了线下会议隐喻设计,Zoom视频会议支持多人视频讨论,每个人都可以共享屏幕进行实时分享内容。

互联网行业才短短十几年,但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。当设计产品时遇到问题没有方向时,不妨停下脚步看看人们在日常生活中是如何运作?能不能从生活中吸取灵感。

总结

界面三重构给设计师提供一个崭新视角,相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。从用户体验五要素的视角去看,界面三重构算是从结构和表现层进行挖掘设计的可能性,偏微观层面的设计。在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

2022追波设计流行趋势

纯纯


随着C端市场饱和与数字化的浪潮下,实体经济、ToB 、ToG的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计,相信今年视频动效作品占比还会再次提升。



追波年度最佳作品

追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪,作者来自越南西贡,最佳作品截止目前355K浏览量,2933个赞


为什么看似平平无奇的作品却能获得追波年度最佳作品呢?既不是C端也不是纯B端的作品,更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮,你可以理解它就是一个平面作品,一个字体加几何形体构建的作品,为了丰富画面的层次,让画面更加的活泼采用了多彩加几何色块,让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出,这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。


MetroUI是Windows8的界面设计语言,在2010年至2013年间曾经风靡一时,那也是移动互联网的发展元年,现在国家推行实体经济、数字化带动To B 、To G 的发展元年,通过几何色块(MetroUI)实现B端产品与C端设计风格的传承与衔接,你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风,毛玻璃的多彩高斯模糊渐变风,年度作品当之无愧。


最后来看下按钮的设计,正常的按钮要么文字加色块,要么左图标加右文字,它设计成左文本加右图标,更加注重信息的可读性和易读性,也体现B端设计重功能和交互体验,视觉点到为止的设计理念。


下面我们来欣赏年度最佳作品里面的流行趋势吧。


易读性(停顿感)

字体三原则:可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章,肯定设计文章的内容可读性更好。易识性是用在字体设计上,不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关,因为我们都需要编排文本。当我们小时候写作文时,不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感,更加适合用户阅读。


通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容,丰富文本内涵。比如情侣间表达爱意时会输入文本,“我爱你”、“我Love你”、“我ai你”、“我❤️你”,哪个更加会有情感共鸣呢?不言而喻,相信你心中已经有答案了。



曲线

在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一,第一个设计目的就是突显文字,其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中,签字的文本都是手写体的感觉,手写体对比电脑的机械字体会带有一种人文气息,也会让两者之间产生一种对比、矛盾


除了突显文本外,曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试,通过真实用户眼睛浏览界面显示对应的热点图。



多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的,多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程,多彩渐变多为冷暖对比来制造画面的冲突,需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。


多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新,给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上,为了更好的传达信息需要去设计与内容相匹配的视觉风格。




B端界面设计


侧边栏Sidebar

B端设计的火爆带动了B端相关模块设计,更多的人也愿意尝试B端相关模块设计,侧边栏作为产品架构中重要的导航系统,好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果,也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计,而是一套实用美观可落地的设计。



仪表盘设计

仪表盘设计是一个很好的隐喻,想象一下开摩托车或汽车主驾驶前面的屏幕,汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态,大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据,团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同,自定义的仪表盘也各有差异。重要的是突显数据和业务状态,需要分层级系统性去思考和设计。



流程设计

复杂的事情简单化,简单的事情标准化,标准的事情流程化,流程的事情自动化。流程设计是每一个企业核心功能和业务,可自定义的管理流程系统搭建也是B端产品设计的难点,需要对业务高度抽象,让每一个业务人员可自定义的流程才是好的流程设计。



B端C化

B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐,国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外,由于业务的发展,B端产品也开始移动化、智能化,国内主流还是通过小程序、H5来现实B端产品C端化



轻代码化

轻代码化是一种低代码赋能无代码的方式,弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时,又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统,轻松实现多元业务场景的数字化管理


轻代码化将功能进行打包,升级成全局可以用的配置,技术人员配置好后,业务人员在应用编辑时直接选择使用模版,绑定对应的变量即可使用。




界面设计技巧


人文气息

为什么人加色块的组合方式能流行起来?还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外,还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起,这种人文气息和价值观已经就不言而喻了。


当然企业也需要进行营销,抓人眼球。几千年来的遗传证明了,人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。


这种风格更适合大公司,国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合,而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。



毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”,完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权,具体安装购买方法可以上“某宝”就可以轻松搞定,真香。




轻拟物

轻拟物这几年一直流行,在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物,其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光(环境光)五个部分的处理。写实三维的图标等设计更适用于简洁的画面中,扁平等设计更适用于复杂一点的界面中,比如B端产品界面中的功能图标。轻拟物可使用的范围更广,效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。




简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则,在B端产品界面中更加需要简洁设计,我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加,产品界面的编排如何取舍,如何保证界面的简洁是设计师需要深度思考的问题?如何与上级沟通?该功能是否可做可不做?是否需要埋点用数据说话?如果只是一味竞品有我们就需要有,功能不断累加只会让界面越来越重。



几何图形

几何图形和几何插画有异曲同工之妙,几何图形多为产品界面和宣传内容的抽象,产品界面的几何图形多为占位符形式,加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中,几何图形、几何色彩不失为最好的突破口,相信今年追波B端产品的视觉设计一定会更上一个台阶。



几何图形另一个场景化的地方就是品牌,作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程,品牌设计的技巧基本还是以几何图形为主,至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。



暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大,如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳,提高在夜间使用的可读性


在设计暗黑主题时,不能为了突显视觉上的逼格,而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则,即正文和背景之间的对比度应至少为15.8:1。按照此标准设计,可读性都还不错。这里介绍一个插件“Stark”(Figma、Sketch、XD、Chrome插件)用来测试界面的对比度。



模块化(组件化)

为什么叫模块化,而不叫组件化,组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面,但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提,是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一,它能提高设计师的系统化思维、逻辑思维和抽象思维能力


产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的连接接口和一致的输入、输出接口的单元,相同种类的模块在产品族中可以重用和互换,相关模块的排列组合就可以形成最终的产品。通过模块的组合配置,就可以创建不同需求的产品,满足客户的定制需求 。




插画

插画作为设计的一大品类,不同的插画师都有自己擅长的风格,本质是都有自己的个性,但是在产品设计中更多是需要共情、共性来讲故事,表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合,插画不会过时,而是需要结合当下和产品找到最匹配的设计风格。



几何插画

几何插画算是插画简化的一种表现形式,人和物的形态不再写实,而是抽象成几何图形拼凑的感觉,同时保留人物形态的神韵。加上几何色块与人物交互形态的表现,传达出简洁、科技的现代感。难点还是在人物形态的表现上,平时多练习练习速写还是很有必要的。



线面插画

线面插画最近一两年非常流行,准确的说是非常适合。首先线面插画主要是由线条和块面组合而成,用块面表现人物形态时某些结构会表现不出来,这时候用线条简单勾勒后,结构就会清晰明了。其次当线面插画运用在界面上时,可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时,还能保持界面的干净整洁。




动效


微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计,微交互和动效设计是绕不开的,UI界面设计通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪,取悦用户。C端产品微交互和动效已经很成熟了,一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品,还需要给前端工程师灌输微交互和动效的设计价值,共同打造产品体验细节。



Mg动画

Mg动画需要很好的节奏感、韵律,每一个场景动画都需要其中的元素进行连接变化,让转场动画更加自然,MG人物动画通过点线面的动效变化让画面更加有趣、自然,通过粒子效果让特定场景无限循环会让人更加印象深刻。




三维


三维图标

MacOS Big Sur系统图标的更新带动了三维图标的流行,三维图标的应该场景还是需要有较大留白空间的界面,因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上?设计师应该保持开放多元的视角。设计本身也在不断的演化融合,存在即合理。合适最重要,它们都会有适合自己的场景和设计价值。



轻三维

为什么轻三维在界面设计中占有一席之位?一个是设计师不断追求差异化的产物。另一个是更好的表现内容,并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素,比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等,这些都是用户日常使用系统软件常见的元素,通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角,结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加,特别是当下流行的毛玻璃效果,玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光,局部的渐变色或环境光更佳出彩



P4D(PS+C4D)

P4D是PS加C4D的设计表现技法,也是视觉设计的最后一个环节,通过PS对C4D的渲染图片进行调色,利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵,还可以利用PS强大的合成功能,将渲染图片与图片素材进行合成,来表现画面的视觉度,当然三维软件比较难实现的水、粒子、烟花等效果,也可以通过PS的后期合成来实现,这也是P4D的强大之处。



卡通IP

卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟,卡通IP也从传统的纯PS手绘技法,转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS(静态)/AE(动态)调色


卡通IP火的本质更适合做营销,相比于品牌或Slogan,卡通IP具有亲和力和画面感。随着各种手办行业大热,受互联网大厂影响下,卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人,也可以通过绘制好二维,一套三维可以选择外包完成。


对于UI设计师来说学习是有成本的,暂时并不是必备技能,如果喜欢完全可以学习,从设计差异化的角度来看三维视觉确实有一定的竞争力



三维动画

C4D三维场景动画通过构建实物和场景模拟生活中的现实场景,会让用户体验真实感,三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感,未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势




存在即合理,趋势流行稍纵即逝,注定是不长久的,只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注,因为哪有什么所谓的创新,只不过是旧元素的重新组合,并符合当下这个时代人的审美需求。香奈儿的“时尚易逝,风格永存”大概就是这个意思吧。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档