首页

UI动效设计原则

seo达人

 01 前言

在产品设计中动效很常见,一个好的动效方案在提升用户视觉和心境体验的同时,还的的确确解决了很多其他设计问题。

好的动效设计总是在比拟现实,所以当我们思考为页面添加动效时,不应该感性的随心所欲的发挥自己的创意激情,而应该像科学一样,有一些基本的方法原则指导来我们,以此提升动效可用性。

今天主要分享一下在数字产品中动态设计的13个基本原则,希望对大家有所帮助。

 

02 原则大纲

 

  • 缓动
  • 延迟与偏移
  • 叠加
  • 蒙版
  • 弧线
  • 克隆
  • 父子绑定
  • 转换
  • 遮罩
  • 多维度
  • 数值变化
  • 视差
  • 缩放与推拉

 

▍缓动 ․

现实世界中绝大多数物体都不会突然运动,再保持匀速,最后突然停止(机械类运动除外)。而是缓慢加速或缓慢减速,这就是缓动。

缓动几乎适用于产品中任何元素的出现或离开、以及部分图数据加载等。

undefined

滑动内容

 

undefined

图表加载

 

undefined

▍延迟与偏移 ․

在加载信息时,我们可以对信息归类分组,并按顺序依次延迟内容出场时间。这就是延迟与偏移,可以清晰的表达内容之间的关系。

undefined

 

undefined

▍叠加 ․

在二维平面,如果信息很多,为了避免信息过载,我们可以将不重要的信息,或负面操作放置在前景内容后面,这就是叠加。用来模拟现实纸张叠放,创建出二维平面中的前后空间感。

undefined

 

undefined

▍蒙版 ․

当我们点击某个内容时,我们通过改变内容中某个主要元素(用于视觉引导的过渡元素)的轮廓并移动,这样可以将用户自然的带入下级页面,这就是蒙版。通过保留过渡元素的识别性,创建出无缝过渡,降低用户跳转页面时可能产生的迷失感。

undefined

 

undefined

▍弧形 ․

现实世界大多数物体运动轨迹都是弧线,所以当位于角落的元素移动时,我们调整运动轨迹呈弧线,可以让元素运动更加流畅自然,这就是弧型。

注意:下面案例中元素上移是从左下往右上的弧线,但回来不是原轨迹返回,而是将弧线对称反转(类似抛物线),从右上往左下。

 

undefined

 

undefined

▍克隆 ․

如果一个主要操作中包含其他操作,在用户与其互动时我们可以直接将元素分离出来,这就是克隆。再通过模拟现实世界中液体分离,可以清晰的表达出内容的包含关系。这类设计常见于底部的舵式导航按钮,点击后出现一系列功能图标。

undefined

 

undefined

▍父子绑定 ․

将两个元素的属性进行关联,通过影响其中一个元素的属性,去影响另一个元素,这就是父子级绑定。给两个元素创建了一个隐形的传动轴,呈现一种用户正与内容进行实时可控的互动方式。

下图是通过小圆圈的旋转属性影响中间数值。

undefined

 

undefined

▍转换 ․

当某个元素存在先后两种样式时,我们可以给元素路径设置动态,使其形状从起始状态逐渐变化到结束状态,这就是转换。从起点到终点的无缝过渡,清晰自然的表达出任务结束。

undefined

 

undefined

▍遮罩 ․

在一个二维空间中,一屏展示的内容有限,当触发另外一个二维空间时,为了减少页面跳转,我们借助中间层并降低不透明度,或把背景模糊,这样可以将它们同时放在一起展示,这就是遮罩。帮助我们理解当前空间与原本空间之间的关系。

undefined

 

undefined

▍多维度 ․

当看二维平面有些乏味的时,我们可以给页面赋予三维空间的深度,像真实世界的物体有厚度一样,用来表达该页面存在其他可以互动的侧面。这就是多维度,解决原本二维平面没有深度的问题,也带来更强的位置感。

线上产品中:

【哔哩哔哩】有做下图中类似的3D页面翻转效果(我一时忘记在哪个模块,有知道的同学可以留言告诉我,谢谢)。

【红板报】有做翻页效果,感兴趣的同学可以去看下。

undefined

 

undefined

▍数值变化 ․

金融和运动类产品中数字很常见,每次加载数字时,我们可以赋予数字动态变化,这就是数值变化。作用不仅仅是传达出数字的动态性质,更重要的是强化数字与用户的绑定关系(类似上秤后上涨的数字告诉你又“强壮”了。嗯?继续努力),让用户更加积极的维护数据变化

undefined

 

undefined

▍视差 ․

界面中元素的运动速度并不是始终一致,当有多个元素时,为了建立良好的层次结构,我们可以让重要的可交互的元素运动速度更快,非交互元素运动速度更慢。(也可以根据设计目标反过来处理)这就是视差,将用户视线引导到可交互元素上,同时让非交互元素保持动态一致性。

undefined

 

undefined

▍缩放与推拉 ․

页面中,我们始终在处理内容的展示与空间转换,为了能看到更多内容细节,我们让内容支持缩放来模拟相机变焦。为了能体现内容与内容在空间上的关系,我们模拟摄像机推进和拉远,这就是缩放与推拉,带来了更多的深度与空间体验以及无缝转换。

undefined

缩放

 

undefined

推拉

 

03 总结

原则用于参照,在理解原则的基础上去打破。这样,动态设计将给我们带来了更多可能性。

尽管一些效果在当下实现上任然有着较高的成本,但相信随着技术的发展,在将来的产品设计中会看到越来越多让我们惊艳的设计解决方案,只是在这个过程中还需要我们共同努力鸭!

参考文献:

https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

 

原文地址:站酷 

作者:幺零三

转载请注明:学UI网》UI动效设计原则

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

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

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

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

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



13种当下正火的设计风格,潮爆了!

seo达人


01.玻璃、琉璃质感

即把视觉主体做成玻璃质感或者是琉璃质感,并且在排版的时候,通常会把主体压在文字上,通过透明的材质使文字发生折射,创造出强烈的视觉反差。

图片

图片

图片

图片

图片

图片

 

02.酸性风

酸性设计是一种结合了金属质感、镭色渐变、达达主义、机能素材等特性的设计风格,在视觉上会有一种“酸”的感觉。

图片

图片

图片

图片

图片

 

03.不锈钢质感

有很多设计会把这种不锈钢质感的风格统统归结为酸性风,其实我觉得二者的差别还是挺大的,首先,这种不锈钢质感的颜色是黑白灰的,而不是彩色渐变;其次,整个海报的主色调通常也是黑白灰,视觉效果会低调、简约一些,并没有“酸”的感觉。

图片

图片

图片

图片

图片

图片

 

04.荧光风

因电影《蜘蛛侠之平行宇宙》的系列海报,荧光风也火了起来,画风类似街头涂鸦,并采用饱和度极高的对比色搭配,会有一种刺眼、眩晕的感觉,但视觉冲击力确实强,而且很酷、很潮。

图片

图片

图片

图片

图片

图片

 

05.弥散渐变插画

弥散渐变是一种通过模糊效果塑造的渐变效果,看上去像似水墨晕开的感觉,而且通常会加上一点杂色质感,使用这种渐变效果来绘制一些简单的插画,有一种清晰、时尚的感觉,常用于食品海报中。

图片

图片

图片

图片

图片

图片

图片

 

06.扁平几何插画

即通过简单的几何图形来绘制纯二维的插画,效果简单而抽象,这种风格一直都是设计师的宠儿,所以并不是最近才开始流行的,但是RGB色彩的使用可以让画面更加具有视觉冲击力,再配合灵活的描边和排版处理,这种风格也变得越来越现代、时尚。

图片

图片

图片

图片

图片

图片

图片

 

07.新丑风

这个备受争议的设计风格,喜欢使用很大胆、很刺眼的配色风格,比如玫红色配绿色,插画很随意,类似小孩的画作,在排版和构图上也很不严谨,完全不符合传统优秀设计的定义,故被称为新丑风,在商业设计中要慎用。

图片

图片

图片

图片

图片

图片

图片

 

08.三维文字

这类设计通常以文字为主,没有图片元素,把主要的文字通过3D贴图或者扭曲的方式,使其呈现出三维的视觉效果,这与文字通常呈现出来的状态完全不同,所以视觉冲击力也很强。

图片

图片

图片

图片

图片

 

09.3D插画

3D的世界是最接近真实的世界,所以3D是大的趋势,而如果把3D和富有想象力的插画结合起来,那么效果会更加的惊艳和震撼。

图片

图片

图片

图片

图片

图片

 

10.3D动效

在3D的基础上继续深化就是3D动效,被经常用在电商设计、线上海报设计和网页设计中。

图片

图片

 

图片

 

11.复古金属

画面中的图形也是简单的几何图形,但质感通常是用渐变工具做出的、比较粗暴的金属效果,再加上复古的配合和杂色质感,看上去很像上个世纪的海报。

图片

图片

图片

图片

图片

图片

 

12.复古故障

即把早期的电脑、电子设备出现故障所呈现出来的画面和效果,融入到设计当中,通常也会结合蒙太奇手法(拼贴风)使用,常用于艺术设计中。

图片

图片

图片

图片

图片

图片

图片

 

13.机能风

机能风也不是这两年才出现的,但最近也很火,画面的氛围比较科幻,通常以机器人或者被机械加工过的人物作为视觉主体,标题字体一般会用简洁、硬朗的无衬线体。另外,类似电路板造型的界面框也是机能风常用的设计元素。

图片

图片

图片

图片

图片

图片

– over –

 

 

转载请注明:学UI网》13种当下正火的设计风格,潮爆了!

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

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

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

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

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



了解这9种交互机制,不怕跟开发相爱相杀了~

seo达人



1.删除机制

删除逻辑是怎样的?

无法找回:是否需要二次确认设计、以及展示删除后结果)

可以找回:是否需要展示如何找回的说明?

删除对象:

是单个、批量还是全部?

删除方式:

手动删除:点击删除还是滑动删除?

自动删除:何时开始?是否展示剩余的时间

删除状态:

包删除成功提示、删除失败提示、删除过久的提示

图片

 

2.中断机制

数据的处理是怎样的?

信息/逻辑是否会发什么变化、是否自动保存进度/记录、是否影响后续链路里的逻辑处理

中断方式:有意、无意中断的处理都是怎样的?

中断程度:后台继续运行还是彻底退出后台?

软/硬件变化时的处理:

包括耳机的连接与切断、电话的来电与挂断、网络的中断与恢复

图片

 

3.显示机制

显示是否有边界值?

包括最小值、最大值、到达特定阈值

显示是否有时效性?

内容过期时怎么显示?到达某个阈值时怎么显示?内容不存在的显示?

其他考虑点:

· 显示格式:如日期时间的数据格式:2022.05.01  2022-05-01

· 显示分辨率:各种分辨率下如何显示,最大,最小考虑极致情况

· 显示样式:是否对齐组件?需要统一?是否有差异化设计

图片

 

4.加载机制

加载前中后该如何显示?

包括默认状态的显示、初始状态的显示、加载中的显示、加载过长的显示、加载成功的显示、加载失败的显示、加载为空的显示等等。

加载方式:

手动加载还是自动加载?优先加载哪些内容(文本或图片)?

加载范围:

展示数量是多少?一次性全量展示还是分页加载展示?

图片

 

5.推送(push)机制

push机制:

推送内容说明、全量用户还是局部用户、推送的时间/周期/次数等都是怎样的?

push交互:

跳转:原页面删除、无法进入、push过期时该如何处理?

返回:返回到哪里?

图片

 

6.退出机制

· 当期操作进度、记录是否保存

· 是否需要展示退出说明、原因

· 退出程度

是当前页面、某段流程、退出后台运行、杀死后台、还是手机关机?

图片

 

7.排序机制

· 默认排序是怎样的?正序还是倒序?哪个选项优先

· 排序维度是怎样的?按时间/销量/质量/数量/评分/信用等等排序

图片

 

8.刷新机制

· 是手动刷新:如下拉刷新、点击刷新

· 还是自动刷新:何时开始刷新?是否提前告知用户?是否提前自动保存操作记录

图片

 

9.缓存机制

· 缓存机制是怎样的?包括缓存对象、数量、范围

· 缓存位置是哪?手机本地、服务端

· 缓存的清理是怎样的?自动清除还是手动清除

图片

 

– END

好了,以上就是一些常见的交互机制,希望你在输出交互方案、产品为文档时有所帮助,避免漏掉一些内容,减少和开发的相爱相杀。

图片

 


 

原文地址:和出此严(公众号)

作者:和出此严

转载请注明:学UI网》了解这9种交互机制,不怕跟开发相爱相杀了~

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

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

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

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

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



国风音乐圈 UX 设计总结

seo达人

1. 背景

1.1音乐故事

我大概2011年左右了解到网络上有一种音乐概念叫“古风”,用到了很多民族、东方古典、戏曲元素,创作人员大部分都是业余音乐爱好者或者音乐专业学生,在acg论坛、贴吧、微博、分贝网、yyfc、5sing发布作品和交流。后来有一定影响力的创作团队开始举办线下演出,古风圈开始吸引更多年轻人 。2018年在北京召开中国国风音乐发展研讨会,包括古风圈的墨明棋妙等。国风音乐有更多的可能性,那么它是如何制作出来呢?

 

1.2音乐制作流程

音乐制作从盈利性上分为商业音乐制作和非商业音乐制作,区别在于商业音乐的制作目标之一为盈利;非商业音乐不用做商业用途,制作目标因人而异。

制作流程如下:

图片

1)策划和制作人有区别,制作人除了完成策划的内容,音乐素养更高,会在制作上提出更有建设性的修改意见。策划更多情况下只负责确定制作人员和项目进度跟进。

2)作曲、作词、编曲的先后顺序根据制作人员不同会改变,内部达成共识即可。

3)乐器实录指在录音室录制乐器音轨,非必须环节。如果不选择实录表现,则用音源代替。4)编曲给出的分轨文件就是由音源表现。

5)和声的编写有时是作曲、编曲负责,有时也由歌手发挥,顺序不一定排在主旋律录制后。

6)混音如果涉及同张专辑的多首歌曲,需要母带师介入完成整体调整。

 

1.3用户群体

独立音乐人:包括在校音乐专业学生或者已工作的业余音乐创作者。希望通过音乐表达自我,记录生活,结识朋友,提高演奏及创作能力,因此带有弱社交目的。

音乐团体:社团、乐队、团队、工作室、制作组。

音乐制作委托方:有制作适合自身音乐的需求,包括策划、导演、制片、制作人等。

图片

 

 

2. 痛点及情境

2.1痛点

从制作音乐的契机分为自发制作和委托制作,其中涉及到几个角色:自发制作者、委托方、受托方。

图片

自发制作者(音乐人):

1)音乐人之间缺少了解,难以构建信赖关系
2)很难找到相似风格的音乐人互相交流
3)想找能长久合作做音乐的朋友或团队

 

自发制作者(乐队/社团):

1)想找能长久做音乐的拍档

委托方(企划负责人/比赛举办方):

1)企划对音乐人的特化需求(对风格、完成度的需求)
2)比赛的题材限制,音乐人工种的筛选

受托方(音乐人/团队/工作室):

1)受托方对素材的特化需求(对风格、题材的需求)
2)受托方对企划的信任从何建立(对企划介绍、企划进度、作品数量、作品质量的需求)

 

 

2.2使用情境

一名在校大学生Y在为自己导演的短片寻找合适的配乐,因为周围没有音乐学院,班上同学也没有这类技能,她找到了国风音乐圈这个APP,通过搜索风格缩小范围,随手点进一个音乐人主页去翻阅他的作品和参与过的企划,通过企划推荐又找到了其他的音乐人及团队。Y创建了自己的企划,填写短片的介绍,上传样片。

图片

 

3.竞品分析

3.1竞品优缺点

分析5sing音乐人&腾讯音乐人&豆瓣音乐人&网易音乐人。

图片

 

优点:

1)经营时间久,积累了很多小众音乐人;
2)音乐更新频率高;
3)有比较多的消音伴奏;
4)有beat(一种音乐素材)交易、词曲交易。

缺点:

1)对某些工种分类缺失,导致相应工种曝光度很低,合作时不能第一时间建立信赖关系;
2)最近web端增加了音乐身份筛选,但依旧有些混乱,听众不适合放在音乐人中筛选,编曲和制作人有相似度,但职能完全不同;
3)在申请入驻时,无法选择多个流派。

图片

 

 

优点:

1)下属音乐平台多,可以搜索到很多作品;

2)有词曲出售。

 

缺点:

1)没有促成音乐制作工种间合作的功能(不清楚入驻后是否有该功能)。

图片

 

优点:

1)音乐风格分类很广泛;
2)根据听众关注列表来推荐,能帮助相近喜好的听众找到感兴趣的音乐人。

缺点:

1)部分音乐人自定义的页面布局板块混乱;
2)没有音乐人间交流合作的功能。

图片

优点:

1)网易会推出一些音乐策划项目,促成创作者间合作;
2)网易云音乐个性化推荐增加音乐人曝光度;
3)有创作者社区;
4)有beat、词曲交易。

缺点:

1)对身份的分类太少,只有制作人、作词、作曲、编曲、演唱。

 

 

3.2总结

几个平台对音乐人来说,都没能给出一条流畅的制作链,音乐人签署授权协议后,和平台的联系变强,但和合作者的联系几乎就和听众与之的距离差不多。音乐人有向部分人展示demo或beat的需求,还无法满足。有平台促成社区,效果待观察。

 

 

4.流程及功能

4.1流程

根据第2部分的情境分析出流程如下:

图片

 

选择合作者流程

 

 

4.2功能结构

图片

寻找合作者功能结构

 

 

5.页面展示

故事的开篇:开始寻找合作者

 

 

5.1招募

图片

若已有合作者,可在创建企划/团体时添加成员。发起人有修改企划信息的权限,可以转让企划或退出企划,若发起人未转让直接退出,则企划结束,所有成员都会看到该结束状态。流派风格可以多选,在主页最多展示5项。

 

招募有时限,可以避免太多废弃招募占据招募首页。创建完成后,可以添加已有的合作者为企划成员。发起人可以选择企划来发布招募。

图片

 

动效说明:这里展示的是策划(制作人)点击+号进入创建企划页面的过程。文字出现时配合图标的弹性变化,微微下沉再恢复。切换页面时速度曲线为渐缓。

图片

动效说明:这里展示的是添加已有成员进企划名单。选择工种。选项框展开有弹性变化。选项拉到底时,会有位置偏移再回弹。选好以后的工种滚动入场。

 

 

5.2搜索

图片

音乐人搜索的需求包括按个人、按团体、按作品、按企划。根据音乐制作的流程,得到对个人的筛选条件最主要为工种。按作品筛选的下级筛选条件是流派风格。按企划筛选的下级筛选条件是题材。按团体筛选的下级筛选条件是流派风格、题材。

 

 

5.3标签和身份

标签在搜索、主页展示、作品展示都有着视觉分流的作用。该应用中涉及到的标签包括:流派风格、工种 、题材。

图片

 

 

流派风格标签

图片

 

用户身份按结构分为个人和团体,按需求分为委托方和受托方。

按结构分,个人:策划/制作人/监制、作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师;团体:乐队、工作室/团队、比赛举办方。个人身份间可以多选组合。团体身份不可和个人身份多选组合。

按需求分,委托方:策划/制作人/监制、比赛举办方;受托方:作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师、乐队、工作室/团队。

结合两个维度,得到4种身份类型:个人委托方、团体委托方、个人受托方、团体受托方。

图片

以下是关于身份的几点考虑:

 

画师/视觉设计/PV师

狭义的音乐制作本身不包括宣传(如封面设计、海报设计、PV/MV制作),所以画师、视觉设计、PV师等工种视具体情况会删减。

 

乐队

考虑到组建乐队主要为乐器演奏者和歌手兼任作词、作曲、编曲,所以在团体中把乐队单独列出来的,权限和工作室、团队一样。

 

音乐听众

一开始整理用户身份的时候,对音乐听众这个身份的取舍思考过。保留的原因是这个应用主要面向音乐制作人员,但音乐制作也是一个交流的过程,不单与音乐专业人士,与听众的交流也是必不可少的。去掉的原因是听众这个身份的门槛较低,如果在用户中占比过多,就失去了做音乐制作交流平台的意义。

图片

 

工种标签

身份与工种的关系:身份有时对应一个工种,有时对应多个工种形成的集合。如身份A->策划,身份B->作曲/编曲/混音。

图片

题材标签

 

 

5.4主页

图片

除了用户主页,企划也有主页。在企划主页的简介中,会展示企划的父子级关系图,帮助音乐人了解该企划的发展。企划关系由发起人编辑。音乐人也可通过查看推荐的相似企划寻找感兴趣的项目。在个人主页还会推荐相似的音乐人、相关企划,团体主页推荐相关音乐人(团体成员)、相似团体团体和相关企划。

图片

 

 

动效说明:以选择的企划的头像和名称作为转场衔接。招募列表数据项快速退场。企划主页作品列表快速入场。加关注按钮在卡片信息完整出现后再入场,提示用户可以关注该企划。

图片

 

 

6.总结

作为系列的第一篇,介绍了国风音乐圈的项目背景、用户群体,针对用户分析其痛点并描述出寻找合作者的使用情境。以音乐人制作交流圈为切入点,分析相关竞品。有了参考后给出流程和功能结构图。从寻找合作者开始讲起,展示招募模块及涉及的设计点。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》国风音乐圈 UX 设计总结

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

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

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

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

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


如何做B端体验标准化:以数据可视化场景为例

seo达人

图片

业务背景

以我们 CCO 体验设计团队为例,主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加,设计面临严峻挑战。

1、业务多:30多个产品应用

2、角色多:覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户  6大类用户群体。

3、体验复杂:设计师需兼顾用户和客户两个视角。

图片

从组织上,85% 设计师纵向支撑业务,15% 设计师横向做标准化,反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。

图片

 

图片

标准化怎么做

核心通过页面梳理、抽象、分发、衡量,保障基础体验一致性。

图片

 

图片

案例实战

以数据可视化场景为例,讲述如何做标准化。

1、业务现状

共有11个应用,涉及89个页面。

图片

2、问题

体验不一致:各个工作台页面架构、组件、样式野蛮生长,缺少规范导致体验不统一。

低效:部分场景缺失,组件重复建设,大量定制;沟通协同内耗大,成本高。

图片

3、策略

体验统一:框架、组件、样式。

提效:代码化、工具、交付机制。

4、体验统一

包括框架、组件、样式。

图片

框架

(1) 现有页面收集

图片

(2) 用户场景分析

图片

(3) 页面归类

结合用户看数内容(例:概览、分析、详情)和交互形态(例:平铺、下钻),对页面进行归类。

图片

(4) 确定典型布局

通过统计高频复用形态,确定典型布局。

图片

组件

(1) 页面结构分析

组件的收敛,需要先对页面分析,确定模块层内容。例:模块包含页头、筛选、图表、表格。

图片

(2) 模块层分类

横向收集全部业务,将模块层分类。细分模块扩展形态,放到对应的篓子里。

图片

(3) 模块专项治理

接下来,需要对每一个模块进行专项治理。比如图表模块,再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体(也就是扩展形态)分类。

图片

图片

样式

(1) 确定优化内容

围绕视觉凌乱,要做的便是完善设计语言。设计师需要结合自身技术底层,补充缺失规范。例如布局、色板、字体、动效。

图片

(2) 确定组件范围

通过统计高频复用组件,确定需要梳理的组件范围。

图片

(3) 布局

图例位置:线上有9种,通过从业务场景按阅读顺序划分,最终收敛成2种。

图片

组件高度:真实线上情况,只能看2个指标,高度规范缺失。

图片

需要根据用户分辨率调研,提炼典型分辨率。比如用户是win系统,包含菜单栏、任务栏等默认高度,再减去本身页面页头等默认高度,得到 3 档。确定组件建议默认行高 240px。

图片

轴标签旋转角度:现状有顺/逆时针两种,通过分析标签类型,结合阅读顺序、轴与标签亲密度,确定默认角度为顺时针。

图片

(4) 色板

通过场景梳理,确定不同组件使用的色板类型及缺失色板。

图片

补充语义色板:从业务里抽象2类场景,指标和柱/饼/环场景,定义颜色。例如带正面语义,用绿色,比如升、已到岗、正常。带负面语义,用红色,比如降、旷工、失败。

图片

(5) 字体

结合自身业务场景问题,从场景、版权、风格、识别、极值共5个维度选择字体。

图片

举例场景一,纵向数据场景里,将市面上数据竞品用到的字体都横向铺开尝试,做排除法。比如din没版权,苹方非等宽字体,普惠102识别性弱。

图片

举例场景二,在核心数据呈现中,helvetica 品牌风格弱,普惠在1亿以上极值过宽。

图片

最终我们根据自身业务场景特征,用普惠和普惠102,运用在对应场景里。并同前端提炼规则。

图片

(6) 动效

首先,需要确定动效价值,明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。

图片

通过动效场景链路分析,确定优化范围。

图片

加载动效:围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路,输出方案。比如这里共梳理17种组件类型,抽象成9类,包括点、线、面、饼、环、柱、文本、图标、词云,再进行组合产出方案。

图片

出场动效:通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景,有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。

图片

图片

浏览动效:通过提炼场景,来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下,围绕点击感知弱、重点不突出、缺少悬停态来优化效果。

图片

沉淀速度参数:将优化动效场景的速度参数,同前端约定规则沉淀组件库。

图片

5、提效

包含代码化提效、工具提效、机制提效。

图片

整体思路

从设计组内到技术产研的提效过程。

提效面向用户依次是:组件设计师、业务设计师、前端、产品。

搭建目前还在进行中,这里主要从交付-工具-代码化来分析。

图片

交付内容

1、业务设计师:sketch/figma物料 (样式、组件、区块、模板、规则 )

2、业务设计师:kitchen工具(样式、组件、区块、模板)

3、组件工程师:组件规范/组件官网

图片

交付机制

新需求:通过评估复用性、抽象、内审、沉淀物料。

现有业务:通过页面梳理归类、抽象、内审、沉淀物料。

图片

6、衡量

从物理到行为层,包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。

图片

 

图片

总结

回归课程,在B类业务里,服务多个产品、多用户角色、体验复杂的场景下,在定制化+标准化团队阵型里,标准化实质解决的问题是保障60分基础体验一致性。

图片

总结:B端体验标准化包括物料的产出、交付以及衡量标准。

产出:包括框架、组件、样式的收敛来梳理、抽象页面。

交付:面向2类用户群体,业务设计,需交付物料和工具。组件工程师,代码化需提供组件规范,组件线上化需助力组件官网的建设。

衡量:一致性评分包括样式、组件、框架及组件交互。

图片

 

原文地址:AlibabaDesign(公众号)

作者:CCO 设计

转载请注明:学UI网》如何做B端体验标准化:以数据可视化场景为例

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

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

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

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

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



国外大佬总结的这20条B端图表设计原则,太实用了!

鹤鹤

最近几年以来,大家能看到B端设计趋势已经越来越火热,在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计,让设计出来的图表高大上,符合业务需求,让业务方和总监对你赞不绝口,本文就必须看完和收藏了,因为实在是太实用!


应用设计越来越依赖数据驱动,对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表,但我们其实可以通过遵循一些简单的规则来改变这个情况。



1. 选择一个正确的图表可视化类型


选择错误的图表类型,或默认为最常见的数据可视化类型,可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容,可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。 

undefined



2. 根据正负值使用正确的绘图方向


当使用水平条时,在基线的左侧绘制负值,在右侧绘制正值。不要在基线的同一侧绘制负值和正值。 

undefined



3. 条形图总是以0基线开始


删数据起点会导致曲解。在下面的例子中,看左边的图表可以很快的得出结论,值B比D大3倍多,而实际上,两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。

undefined


4. 折线图应该要清晰体现y轴上的趋势变化


对于折线图,总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势,因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。 

undefined


5. 使用折线图时要考虑时间连贯性


折线图是由线连接的“标记”组成,通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的,并且对于较短的时间间隔非常有效,但当数据更新不频繁时,这可能会导致混淆。 

undefined

例如: 使用折线图来代表年度收入,如果数据是每月更新的,则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值,而在特定时间实际的收入数字是未知的,所以可能会产生误会。在这种情况下,使用垂直条形图可能是一个更好的选择。 


6. 不把折线图强行”平滑“


平滑的折线图可能在视觉上很好看,但它们错误地反映了背后的实际数据,而且过粗的线会模糊真正的“标记”位置。 

undefined


7. 避免使用比例不同的双轴折线图


通常,为了节省可视化空间,当有两个具有相同度量但大小不同的数据系列时,可能倾向于使用双轴图。但这些图表不仅难以阅读,而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例,只是浏览图表,然后就得出了错误的结论。 

undefined


8. 限制饼图中显示的切片数量


饼状图是最流行的也是经常被误用的图表之一。在大多数情况下,条形图是更好的选择。但如果你决定做一个饼状图,有2个比较好的建议:

1)不要超过5-7片,保持简单

2)可以将额外的最小段分组到“其他”切片 

undefined


9. 在图表上直接标注


如果没有适当的标签,无论你的图表有多好,它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。 

undefined


10. 不要在切片上贴数据


将数据放在切片上可能会导致多个问题,在可读性问题上和窄切片上都会有挑战。相反,添加黑色标签能清晰的链接到每个部分。 

undefined


11. 保持饼图切片秩序以提升阅读效率


在确定饼片秩序时,有几种常用的方法:

1)将最大的切片放在12点的位置,然后将下一片切片顺时针降序排列

2)把最大的切片放在12点的位置,第二大的放在顺时针相邻位置,第三大的放在11点的位置,其余的切片按顺时针降序排列 

undefined


12. 避免随机排列


同样的建议也适用于其他许多图表。不要默认采用字母排序,将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图),以确保最重要的数值占据最突出的空间,减少眼球运动和阅读图表所需的时间。 

undefined


13. 窄的饼图是难阅读的


饼图通常不是最容易阅读的图,因为比较相似的值非常困难。当我们把中间部分去掉,创建一个圆圈图表时,我们腾出了空间来显示额外的信息,但这样牺牲了清晰度,极端情况下,图表就会变得毫无用处。 

undefined


14. 视觉效果不要抢了数据风头


不必要的造型不仅会分散注意力,还可能导致对数据的误解和用户的错误印象。你应该避免:

1)3D元素,明暗面

2)阴影、渐变和其他扭曲的多彩色

3)斑马图案,过多的网格线

4)过度装饰,斜体,粗体或衬线字体 

undefined


15. 选择与数据性质相匹配的调色板


颜色是有效的数据可视化的组成部分,在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性,所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合,可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合,中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。 

undefined

看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以帮助你生成各种调色板。 


16. 设计的可访问性


根据美国国家眼科研究所(National Eye Institute)的数据,大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1)在调色板中使用不同的饱和度和亮度

2)把现有配色去色然后检查对比度和可读性。 

undefined


17. 关注易读性


确保排版能够准确传达信息,帮助用户专注于数据,而不是分散用户的注意力。

1)选择易读的字体,避免衬线和装饰过度的字体

2)避免使用斜体、粗体和全部大写

3)确保与背景有高对比度

4)不要旋转文字

undefined

 

18. 使用水平条形图代替旋转标签


这个简单的技巧将确保用户能够更有效地阅读图表,而不会扭伤他们的脖子。 

undefined


19. 事先选择合适的图表库


如果你的任务是在web和移动项目中添加交互式图表,你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现,并能提供大量交互想法。 

undefined


20. 做成动态图表


帮助用户通过改变参数,可视化数据进行探索。然后得出结论,最大化价值和洞察力。在下面的示例中,你可以看到IOS Health应用使用了各种数据表示的组合。 

undefined

原文地址:站酷
作者:彩云Sky

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

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

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

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

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

国外专业机构发布,2022年你最需要抓住的UI/UX设计趋势

鹤鹤

当设计师被迫待在家里时,终于能有时间去反思现有的设计并重新创造。无聊是艺术家最大的敌人,他们会尽可能地打破困局。


对我们来说,2021年相当困难。世界上最长寿的猫庆祝了它的34岁生日,这可能是发生的唯一一件好事,顺便说一下,你会在文末看到这只可爱的小猫照片。


那么,2022年的UI/UX设计趋势是什么呢?看看现在的情况,我们已经可以预测未来的设计趋势,就像我们对2021年所做的预测一样(回头看非常准确)。


在本文中,我们将发现:

  • 3D视觉设计师的内卷将会越来越严重

  • 数据可视化的工作将变得越来越重要

  • 服务的移动化还需要做出更多努力

  • scrollytelling 技术会越来越流行



1、滚动已死,滚动叙事兴起 


旧的滚动是无聊的。如果你想吸引注意力,你就需要实现滚动叙事(scrollytelling)。(彩云注:这个技术的核心在于边滚动页面边讲故事) 

undefined

《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。


它是一种叙事形式,可以在网页和APP上呈现。想象一下,在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地,你会想看到这个故事的结局。它就像一个游戏,带你穿越迷宫。虽然你不能影响它的进程,但却让你感觉自己能参与其中。


2022年,Scrollytelling将会出现在你看到的每一个流行网站上。


另一方面,scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣,比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:

undefined

Scrollytelling在用户向下滚动时被激活,因此得名。没有点击,没有选择的麻烦,没有弹出窗口。你似乎停留在一个地方,但通过滚动,把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果,还需要认真思考一个你想要讲述的故事情节。


所以,最好的网站不可能在2天内建成,需要更多的时间去打磨。

undefined

IAmBinadam令人惊艳的叙述设计


滚动叙事的项目通常需要大量的时间和精力。不过,这样做的结果是值得的。页面变成“活的”,每一秒都有新的事情发生,所以在阅读时很难感到无聊。


那么移动端APP呢? Pure是一款约会应用(彩云注,这个应用在app store可以搜到,推荐大家安装一个体验一下,非广告),它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时,它就会被激活):


undefined


Scrollytelling是为用户而创建的,用户很喜欢它,不需要到其他页面去阅读整个故事。相反,网页设计的整个故事都是事先考虑好的,并尽可能以最有趣的方式设计出来。 


2、用户喜欢看数据,数据可视化越来越被重视 


如何在2022年做出一个还不错的企业网站?你不会想告诉用户你是“XX领域公认的领导者,该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。


最好不要用形容词,而是用事实来说明:你有多少分支机构,在哪些城市,谁是你的客户,以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据,你需要让它不仅简单,而且有趣。 

undefined

数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事(Scrollytelling)紧密结合。以下是IAmBinadam展示数据的方式:


undefined

 通过去除数据集的复杂性,使信息更容易让读者感知。

undefined

不同级别的数据具有不同的大小,这样用户知道应该先从哪里查看


读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大,那些干净整洁的数字带来的正面影响更大。 


undefined

有些图表乍一看甚至不像图表,这使得它们更加能被注意到


还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据,2018年,压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来,得分已升至4.0/10,很少低于这一水平。同样因为大流行,在过去两年里工作量增加了4个小时。


人们压力太大,卷的太辛苦,以至于不愿去看复杂的数据。


设计师做好数据可视化,以保持人们的注意力。记住,复杂的信息通常被忽略,因为读者试图节省他们的时间,更有可能使用滚动按钮。
undefined

Illustration by Mona Chalabi


以下是我们推荐的一些表示数据的方式

  • 1)图表和曲线图

  • 2)插图

  • 3)静态信息图

  • 4)互动信息图


undefined

Illustration by Ink Factory


如何让信息图表看起来更好?

一个好的图表,或者任何其他形式的数据可视化,都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中,Tufte通过图表解释了好图表的3个原则:


1)展示数据的图形元素与数值总数的比值应趋向于1。简单地说,应该删除一切不必要的元素,保持整洁。 


undefined


2)充分利用好画面空间。也就是说,需要将数据编排的更紧密


undefined

Graph by Hootsuite


3)客观地描述数据。不要使用夸张的图表,可视化数据可以看起来很酷,但真实永远是更重要的。


3、2022年还有必要做APP吗?


根据We Are Social的数据,2021年有52.2亿人使用手机,约占世界人口的66%。自2020年1月以来,手机用户数量增长了1.8%(9300万),而手机联网总数量增长了7200万(0.9%),到2021年初达到80.2亿。


过去一年,社交媒体用户的数量增长了13%以上。到2021年初,社交网络上已有近5亿新用户注册。根据App Annie的数据,Android用户每天花在手机上的时间超过4小时。2020年,安卓用户上网时长超过3.5万亿小时。


令人印象深刻的数字,是吗?似乎到2022年,为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用?有以下几点可供评估:

 

1)用户主要通过移动设备访问你的网站这是你应该了解的重要数据。

客户和你在一起的时间越长,你就有越多的机会去吸引他们,了解他们的习惯,并给他们想要的东西。(彩云注:这就是为什么各大厂之间都在拼命抢占用户的在线时长。)

2)帮助内部业务流程更加有效。

如果你想要提高员工的工作效率、改进工作流程或增加利润,那么就制作一个可以帮助管理业务流程的移动应用。

如今,像这样的手机应用使企业能够执行越来越复杂和多样化的任务,加快日常重复操作和文档管理。


3)实现一些网站上没有的新功能。

如果你认为APP能为用户打开新的触点,并让用户体验更加友好,那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会?例如,随着疫情的蔓延,许多人开始用上健身APP在家里锻炼。


4)竞争对手做的情况。

要了解竞争对手在做什么,他们是否有APP,能做什么,以及他们是否真的对用户有用。


查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要,那么你就容易被甩在后面。


5)复购率。

一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了,给他们发送一个通知就能完成,成本更低。


在正确的时间提供的报价越有吸引力,人们购买的可能性就越大。

undefined

6)促销工具。


有了应用,你就不需要花钱设计和制作实体卡,客户也不需要随身带卡。将促销计划整合到APP,并分享有用的促销信息。


做原生APP还是移动端网站?

开发手机网站比开发手机应用需要更少的工作量,这反过来可以降低整体推广成本。


这部分是由于响应式设计的出现,它允许你根据打开网站的设备屏幕来调整网站。至于APP,它们必须为许多移动平台单独编写:Android、IOS、Windows等。


一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会,我非常同意!(彩云注:在国内,现在开发小程序的肯定越来越多了。) 


4、3D设计具备更强竞争力 


我们一开始并没有将其放在首位,因为这并不是一个新的趋势,在很久以前设计师们就已经设计了很多3D图像和动画了。 

undefined

Cardi B rhymes with 3D

3D技术已经在过去流行了很多年,但它不会很快消失。此外,我们预测3D图形将变得更加多样化和包容。


在过去的几年里,3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。


3D当然应该成为2022年最热门的趋势和预测之一,因为与经典动画相比,逼真的3D形状结合动画总是引人注目的。


undefined


从技术上讲,通过3D更容易传达更多内容,因为它比平面图片更接近我们的感知。3D插图更有深度,信息量更大,也更具互动性。"


许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合,也作为一个优秀的工作方法蕴藏着巨大的潜力。


undefined

乌克兰政府网站用3D手模拟了黑客帝国


注意一点:在整合3D图形等重量级内容之前,确保你的应用性能是OK的,能够快速加载所有元素。 


5、元宇宙风潮  


Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。 

 undefined

undefined

Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


(彩云注:这个概念在去年简直不要太火,未来几年肯定还会是一个大的趋势,设计师也需要保持关注。跟着趋势走,易于放大自身价值。)


6、混合动画  


越来越多的公司在网站和移动应用中使用动画,以提高用户的沉浸感和体验,使内容更有趣。 

undefined


动画是2022年重要的网页设计趋势。2022年,如果没有它,你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合,2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案,以及提高最终产品的质量。


2022年,动画设计将是品牌市场定位的重要组成部分,想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长,实现新想法的机会也在增加。


2022年如何使用网页动画?

1)讲故事动画。

可以通过在界面和用户之间建立情感联系来传达信息。 

undefined

加载动画Yoichi Kobayashi


2)更有趣的加载。


用户不愿意等待,除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力,还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。

undefined


3)光标效果。

用户可以精确地观察光标所在的位置。通过添加智能互动动画,对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知,流行趋势往往每20年就会重演一次


undefined 


4)动态排版

你有没有想过让字母跳舞? 

undefined



添加角色的动画插图

据Statista统计,2020年全球动画市场达到了2700亿美元。趋势是视频,而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问,动画插图的优势是它们非常灵活和多样化。 

undefined

宝马历史动画


这样的作品通常用于两种情况:

1)用于解释视频

2)电商广告

undefined

动画解说的趋势出现在几年前,解说视频清楚地显示点击的位置或公司的项目是关于什么的。


在招聘或商业视频中,用户更喜欢看画出来的人物,而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣,就像活着的人一样。


7、微交互,大影响  


微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么,将导致什么操作,下一步需要做什么。 

undefined

图片来源awwards


动画交互将为你的设计注入活力,并有助于保持用户粘性。关注每一个细节是设计师工作的关键,因为设计中的所有元素都可以带来积极的用户体验。


重要的是要达到元素的和谐,而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色,它们为界面元素增强价值。


undefined


微交互有助于页面导航,解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能,以实现特定的行为。 


8、动态logo,加深品牌印记  


2022年,在线品牌面临着新的挑战,需寻求新的解决方案,其中之一就是动画logo设计。 

undefined

图片来源Toridori


动画logo主要有以下几点营销优势:

1)吸引注意力。这意味着它们有助于提高品牌知名度。

2)有助于提高SEO。谷歌更倾向于动态内容,带有动态图形的页面更容易吸引用户。

3)在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。

4)最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点,在几秒钟内,你可以展示品牌的使命,甚至它的价值!


undefined

一家洗衣机[公司]的标志(https://www.schulthess.ch/)

现在有很多设计模板,可以很容易地用字体制作一个动画logo:


undefined



undefined

图片来源Shabello, Bobby Voeten


最后的话  


记住,设计趋势总是在变化的,但是设计的意义不会变。如果你不能深刻理解这一点,那么任何设计趋势的文章不能帮你做好设计。


这是前面提到过的世界上最老的猫。她今年34岁(相当于人的160岁) 

undefined


原文地址:站酷
作者:彩云Sky

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

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

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

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

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


5个超酷的标题设计技巧,So easy!

seo达人

01.加椭圆曲线

图片

这个技巧最近可以在很多设计中看到,效果很时尚、很现代,过稿率超高,并且操作起来也非常简单。 
❶ 在AI中输入标题,选择一比较简单、现代的字体,当然,自己设计的也行。

图片

 

 

❷ 用椭圆工具画一个椭圆线框,线的描边不要太粗,然后使其与标题斜交叉。

图片

 

 

❸ 把椭圆与文字重叠部分的线删除。

图片

也可以把椭圆复制一层,描边颜色填充成白色,然后把描边模式改成“使描边内侧对齐”,做出椭圆把文字进行裁剪的效果,当然,也可以真的做裁剪。

图片

图片

 

 

❹ 画一个四角星放在椭圆的路径上,并使其左右两边与椭圆路径隔开一点距离。
图片

图片

❺ 颜色可以根据自己的需求进行更改,做完了。

图片

 

 

02.曲线叠加

图片

这也是很简单的一个技巧,适合用在电商详情页、微信长图、折页等设计中。 
❶ 在AI中输入标题,最好再配一个英文标题作为装饰。

图片

 

 

❷ 选择画笔工具在标题上“随意”画一条曲线,要注意整体的美观性与平衡性,线条描边不要太粗,以免对标题形成过大干扰。

图片

 

 

❸ 给线条填充一个比较鲜艳的颜色就完成了。

图片

 

另外,还可以通过描边面板中的选取效果功能,给该描边路径添加一些艺术效果,就能得到不同质感的曲线。

图片

 

 

03.波纹效果

图片

 

❶ 在Ai中输入一个标题,然后按快捷键:Ctrl+shift+O将其转曲。

图片

 

 

❷ 用椭圆工具在标题正中央画一个小圆,然后复制一个圆,等比拉大到类似下图的位置。

图片

❸ 同时选中两个圆框,并用混合工具依次点击这两个圆的描边位置,再双击混合工具,把指定步数改成5,得到如下效果。

图片

图片

 

 

❹ 将圆形组扩展描边,使描边变成形状,然后一起选中圆圈和文字,打开路径查找器,选择修边效果。

图片

 

 

❺ 取消群组,单独把圆圈部分群组,并把透明度降低。

图片

 

 

❻ 根据圆圈波纹的路径,用钢笔工具给文字往外增加类似下图的小色块,上、下、中间都要有。

图片

图片

 

❼ 删除掉圆圈路径,保留最中间的小圆圈,因为此处的小圆圈没有与文字重叠,最后,再变换一下颜色就完成了。

图片

图片

 

 

04.扭曲效果

图片

这种扭曲效果有点像可口可乐的飘带图案,用作海报标题还不错,做法同样很简单。 
 
❶在Ai中输入标题(字数在4-8之间效果比较好),然后将标题转曲,并把文字分为最右两组。

图片

❷ 选中第一组文字,在顶部菜单栏中选择对象-封套扭曲-用网格建立,然后在弹出的参数面板中把网格行数和列数全部设置为1。

图片

图片

 

 

❸ 拖动网格框的四个角上的锚点和手柄,将文字扭曲成下图效果。

图片

 

 

❹ 采用同样的方式将第二组文字扭曲成如下效果。

图片

 

 

❺ 将文字复制到Ps中,并填充成白色,背景色设置成黑色。

图片

 

 

❻ 用画笔工具在文字“转”和“星”的转角处涂一点灰色,再添加一点杂色,做完了。

图片

 

 

05.火焰文字

图片

火焰文字不是啥新鲜的效果,不过搭配上对比很强的渐变色,效果也是很酷的。 
 
❶ 在PS中新建一个画板,将背景色填充成黑色,然后输入一个标题,任意填充一个颜色,然后删格化文字,并通过变换扭曲工具将标题扭曲成如下效果。

图片

 

❷ 按快捷键Ctrl+J将文字复制一层,并将上面的这一层锁定,选中下面这一层,然后选择涂抹工具,把强度值设置为70左右,沿着文字的上沿用涂抹工具向上呈曲线涂抹。(为了涂抹时每个文字不相互影响,可以以每个文字单独建立一个图层。)

图片

 

❸ 通过调整涂抹工具的画笔大小重复涂抹,火苗的长度大概是文字高度的两倍左右,尽量保证火焰的底端与文字的顶端是对齐的。

图片

 

另外,整体火焰的形状要尽量自然、饱满,相连文字之间的火焰轮廓要形成互补关系,有瑕疵的地方可以用画笔辅助涂抹一下,得到如下效果。

图片

 

 

❹ 将文字层和涂抹层分别填充上渐变色,注意文字的顶端与火焰的底端颜色要是相同的,使其有融为一体的感觉。

图片

 

 

❺ 将文字和涂抹图层组合起来,并复制一层进行合并处理,执行高斯模糊效果,选择一个合适的模糊数值,颜色填充为高饱和度的深蓝色,塑造出发光效果,如果觉得不明显是可以复制一层。

图片

 

❻ 文字下沿的发光可以适当减弱一点,由于火焰图层的颜色受蓝色发光影响比较大,可以把火焰图层再复制一层,到这里火焰标题就做完了。

图片

 

注:这个效果跟参考中的效果不大一样,因为我觉得ps中的涂抹工具做出的效果更像火焰,如果想要参考中的效果可以用液化滤镜中的向前变形工具或AI中的变形工具进行涂抹,也可以直接用钢笔工具勾轮廓。

图片

任何技巧都不是万能的,用在合适的地方可以锦上添花,用在错误的地方就是灾难,所以大家对自己的设计需求要有正确的评估,一切以得到好的效果为最终目的。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》5个超酷的标题设计技巧,So easy!

B端设计指南 - 审批

鹤鹤

业务究竟是什么?


很多时候既让初入B端行业的设计师感到一丝丝迷茫,因为不同的B端系统也就意味着,它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理,OA的办公自动化,特定的行业往往都会蕴含着不同的业务类型


而作为设计师,如果只了解设计模式、设计组件,不去分析设计最后的业务诉求,其实是没有任何意义。因此想要通过B端设计指南,和大家一起聊聊B端业务,以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的 审批


开始之前,还得再多说两句,因为一个系统当中,业务本身就不是独立存在的。因此在去讲述审批的过程,一定会涉及到 流程、权限、表单配置 等一些基础内容,建议可以先做初步了解,再结合文章进行阅读



审批的起源

虽然在说起源,其实我更想给大家讲清楚 审批在B端系统 当中的重要性

审批字面意思是审查并加以批示,通常指对 下级呈报上级的公文进行审查批示,报请上级审批

现如今,任何事情一定都会有分工协作,而使用审批的好处是可以

  • 规范员工行为

  • 提高企业运转效率

  • 系统存档便于溯源

  • 保护环境(毕竟减少了纸张浪费)

当然在不同的阶段的公司,对于审批的诉求是不太一样

小公司:因为审批的决策路径短、流程上都非常简单,但因此就会缺乏规范保障。比如在外出办公时,看似只需要与老板当面进行口头上的沟通即可,但是在外出出现意外时,由于缺乏外出办公的相关证据,员工的权益则很难得到保障

大公司:因为审批的决策路径长,流程上都极其复杂,因此会在多人协作下完成整个流程审批。比如想要申请购买办公用品时,会由 行政、Leader、财务 层层审批,从提交审批到最终落实可能需要十天半个月,但是这样的流程,能够确保企业在清查财务状况时,更加有理有据

审批的演变,就是从最开始的规章制度而来。比如在早期去政务机构办理各种业务时,会让你去填写各种纸质表单。在审核过程中,则需要有各个机关的盖章及批准,而这种形式正是政府对于普通市民的自上而下的管理方式


审批其实是整个B端系统的灵魂,因为在B端系统当中,企业想要使用系统的一大痛点便是 核心的管控 

因此你会发现,只要一个独立的系统,一定会存在独立的审批模块。因为B端管理系统当中企业的最终目的,是管理手中的人,而审批便是最为常见的一种手段

审批在如今的B端系统当中,可以理解为它是一组消息,在这一组消息当中会有:“具体的文本、对应的附件、以及照片视频”这些内容都是辅佐 申请人 去讲诉你需要申请的内容

比如我们在申请病假时,往往需要出示 三甲医院所开设的证明,对于这个证明,如何在表单当中出现,你会发现最为常见的便是拍摄证明图片,然后上传到表单当中(这个与字段属性紧密相连,我就不做不过介绍)


审批的这组消息还会有些特殊,因为它非常重要,你可以理解为它是一则“加急消息”会提醒审批人快速的进行处理,同时会告知相关的参与人(处理人、抄送人)审批的进度、并且无论成功与否,都会在系统当中留下 足迹,因此它起到了 “追踪、通知、留存” 三个非常重要的作用,我们首先对于审批进行一个基础的拆解

审批的拆解

如果把审批单独拿出来,你会发现审批会牵涉到 发起人、处理人、抄送人

发起人:

审批的发起人,也是整个审批流程的归属人,他最关心整个审批进展

因为在发起人的角度,创建完审批事项后,可能还需要进入审批页面,完善 后续附加信息、及时了解审批状态、催促审批人的审核、处理驳回意见 等等,因此站在发起人的角度,审批需要尽可能详细的展示 当前审批的状态、完整的审批流程、驳回信息的快速操作、成功信息的必要通知

处理人

审批的处理人主要在审批过程做出决策,因此他更在乎的是审批申请内容的信息。比如 审批的信息内容、直接的审批操作、多条审批的管理

当然,在一些大型的集团企业当中,会将审批分为审批「直接处理人」「间接处理人」(后文以 直处人、间处人 简称)

「直处人」作为审批的第一处理人,也就意味着他的意见至关重要,如果「直处人」通过过后,相对而言整条审批的通过几率会大大增加。通常「直处人」是作为申请人的直系领导居多,因此多数情况下可以理解为直属领导进行 “把关”

「间处人」作为审批的后续处理人,同样在流程当中也十分重要。但在有些情况下,比如一些偏平化管理的企业,「间处人」更多像是“权利”的象征,因为权利已经下放给「直处人」,而「间处人」起到知晓审批以及企业的规章制度要求

抄送人

审批抄送人主要起到通知对应角色的作用,因为一条审批的出现,会造成诸多影响,假设今天你需要申请事假,如何通知同部门的其他成员呢?

发送即时消息,显得过于简单;每个打电话,又有些麻烦;发送企业邮件,又怕他们没有看到

这时候抄送人会显得尤为关键

通常抄送会有企业流程上管理员配置的固定抄送人,以及发起人选择的自行抄送人 两种类型

固定抄送人 角色通常与管理员配置整个流程有关,他是角色当中 管理员 所配置的重要通知人,比如今天你的请假信息,肯定会告知行政,像这类默认的通知流程,则可以将其设为固定抄送人

自行选择抄送人 则是提供给发起人自行选择,该条审批可能会影响到的相关人群。比如就是发送给同事,让他们知晓今天你不在岗位上,因此自行选择可以增加审批抄送的灵活性

这里肯定会有很多读者会问,我选择抄送人与我发消息给同事,有什么区别么?

看似完全相同,实则有明确的区分

通过消息,将审批内容传达,本质上是你自行将内容发送给对方,对方会对于你这个消息的真实性会产生疑问?你是否通知了

而选择抄送,更为权威,更能体现你这条消息的真实性,并且整个流程都已经由领导进行批准,因此不会存在太大问题

其实审批的本质就是一组消息,而这一组消息当中,申请人 通过 表单配置 去获取需要补充的消息内容,而流程会根据企业所配置的流程方式将这一组消息进行合并转发给对应人,而审批人则需要对这一组消息进行回复“通过、驳回” 来让整个流程继续延续

审批流程

审批当中,最主要的便是流程。因为你可以通过查看流程图,去了解整个企业的组织架构、规章制度、员工管理方式

1.串行审批/依次审批

串行审批主要是指当一个审核节点通过后,才能进入下一个审核节点。如果节点驳回,则可以根据业务实际需要,配置驳回的返回路径,会有:拨回到发起人、驳回到上一个节点、或驳回之前任意一个节点 重新审批


2.并行审批

并行审批是指一个审批节点存在多个角色同时审批,这里会存在两种情况

  1. 任何一个人审批通过,则可以进入下个节点,这也就是系统当中常说的 「或签」

  2. 所有审批人员通过,才能进入下个节点,这也是系统当中常说的 「会签」


3. 条件审批

条件审批就是将企业当中的规章制度映射到实际的项目当中,通常就是某个审批内容会根据 金额多少、实际数量 等 进而选择哪个角色进行审批

比如销售人员在申请一个合同审批时,会根据合同金额的不同,审批人也会有所差异

  • 当金额小于8000时,合同直接由财务专员进行审批,进而让流程进行快速审批

  • 当金额大于8000时,合同会由销售主管进行审批,让销售主管能够掌握企业的重要合同


4.自主审批

通过发起人选定一个审批事项后,将自主选择后续的审批内容,进而实现审批的后续选择。这是一种较为灵活的审批流程,当企业尚未形成标准化流程时,自主的核心就是当发起人发起一个审批,提交时需要自行选择下一个环节的审批人。而下一个环节的审批人审批通过后,可以选择继续流转到再下一个人去审批,或者结束这个流程

审批页面梳理

审批的背后,它映射的其实是企业的一条条管理制度,而它的设计一定是要满足企业的实际需求。因为你负责的产品不是为某一家企业提供的服务(定制化产品),并且企业管理制度的变动其实是家常便饭,你需要去考虑一个通用的解决方案,这个解决方案拆解下来会分为三个内容,分别是:申请表单、流程配置、更多配置 进行讲解

1.审批表单

审批表单是最为一个“简单”的用户可配置化表单,因为现如今大多数B端产品都是以 SaaS 作为基础(如果是定制化产品 它的审批内容、流程也不会是固定不变的)也就意味着审批表单需要为企业提供“DIY”的方式,通过表单提供不同的字段类型,去构建审批的实际要求


比如在一个选择请假时,年假、事假、病假、婚假 等的要求都会有所不同

如何知道他们的差别,其实可以根据《劳动法》的相关规定 以及 各个其实的实际公司制度,进行个性化的处理

在申请婚假时,需要上传你的结婚证,以证明其真实性;在病假时,需要有3甲医院的病情证明;在年假时,则需要有你的剩余年假天数。而这些特殊诉求,其实都需要在表单当中进行各种定制化表单

当然这只是极为常见的 请假 场景,而在实际业务当中的复杂场景(更多需要将 审批与其他系统关联)一个简单的表单是没有办法进行满足

这也是很多企业会发现,无论是飞书、钉钉、企业微信,都没有办法满足其实际流程需求。又没有办法改变自身流程,只能够自研、定制化 产品,这也是为什么即便各行各业都有了初具规模的 SaaS 产品,但是还是会有很多企业愿意自行研发软件


2.流程配置

企业可以根据自身的系统流程,在流程配置当中去定制特定的流程。在这个页面的设计上,需要注意不同参与人的状态,以及复杂流程时如何才能够进行清晰的阅读,因此增加了 颜色区分(发起人、审批人、抄送人)+ 视图缩放 功能

颜色自然不必多说,整个系统需要统一,因此不能够只考虑在管理后台的颜色,是一定要在详情页当中也能过保证颜色的一致。这样才能够满足实际业务所需

视图缩放只是小小提一下,常见的视图缩放会放在左侧,至于为什么,自己稍稍揣摩揣摩

由于流程配置的属性页面会涉及很多表单的复杂逻辑,这个只能够留在我的 训练营的课程 当中进行拆解,这里就不过多赘述


3.更多配置

更多配置项则是审批在实际情况下的特殊处理,比如:申请人修改审批的具体时间、能够将审批转发给其他人、出现多次相同的审批人是否去重 等等...  其实就是将审批的设计方案进行“赋能”,去满足更多企业在实际场景当中的需求,感兴趣的同学可以去 钉钉、飞书 了解详情


结语

审批,核心还是提高企业运转效率,如果在审批之间,还需要不同角色私下反复沟通,本质上就失去了审批的意义。而审批本身,就是一个典型的B端产品 从场景到需求,进而研发功能,最后又回归场景,你设计的好与坏,落地到真实的场景当中,试试便知

原文地址:站酷
作者:CE青年

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

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

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

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

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


用户体验设计定义&详细案例

鹤鹤

一、什么是用户体验?


用户体验(User Experience,简称UE/UX)这个词是在上世纪90年代中期,由用户体验设计师 唐纳德·诺曼(Donald Norman)所提出和推广。

定义:用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受,包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。




二、可用性原则


可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何,主观感受怎样,实际上是从用户角度所看到的产品质量,是产品用户体验的核心,不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。




01 易学性


指的是用户学习如何与产品进行交互,以实现目标所花费的时间和精力,即用户能否在初次使用产品时完成简单的任务或实现用户目标。




02 效率


用户在使用产品一段时间后,能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例,用户能否快速的下载想要的东西,在同一系列中,可以快速下载更多的相关内容。




03 可记忆性


我们常说互联网是有记忆的,好的产品体验是帮助用户去记忆。用户在体验中,要对一些有意识、无意识的行为进行记忆是一个比较大的负担,如果在一些环节通过系统能帮用户记录,会降低用户的负担。比如在搜索、历史记录、浏览记录等。




04 容错性


用户在使用产品时,发生错误后,能否快速帮助用户识别和纠正错误,帮助用户从错误中恢复的能力。如常见的注册登录,当用户属于邮箱格式不对的时候,给出提示,并且告知错在哪里。如果提示语只是:"请输入正确的邮箱" 用户可能会疑惑,错在哪里。




05 满意度


满意度指的是用户与设计互动产生的愉悦程度,可以是用户使用产品时流畅的交互和优秀的视觉设计,也可以是用户在产品中得到的满足感。比如sir语音交互,王者荣耀等级(满足感)





06 实用性


产品能否提供用户在完成任务时所需要用到的基本功能,例如P图类软件,用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。




07 个性化


在满足实用性的基础上 针对用户提供不同场景下的功能定制,如美图秀秀,在提供图片美化的同时,针对用户不同的使用场景还提供视频剪辑、视频美容等功能。




08 可预测性


用户能够预测到下一步操作或者整个流程的交互,将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。




三、可见性原则


可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。



01 物理功能可见性


物理功能可见性是基于对象的物理外观。在视觉上,这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件,最常使用的就是播放/暂停,上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中,这就是功能可见性。




02 状态可见性


当信息或者列表过多时区分状态的展示,将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来,会极大地破坏易用性,因为人们将不得不进入一个个邮件详情页当中进行确认,才能获取到原本由徽标提供的状态信息,这样的互动非常低效且乏味。




03 步骤可见性


当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤,后面还有多少步骤,完整清晰的流程展示。如果将这些信息隐藏起来,用户会困惑当前进行到哪一步,接下来还有多少步骤。




四、可供性原则


强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素(如滚动条、命令按钮和图标等)的设计必须能够为用户提供足够清楚的建议,让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么,以及如何与它们进行交互行为(点击、长按、滑动 等)




五、反馈


给用户及时、恰当的反馈,是体验设计中非常重要的一项原则;对每个用户的操作都应该有恰当的系统反馈(包含视觉、听觉、触觉)。



01 告知性


明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。




02 动作连接性


当用户产生某个动作时,给予相对应的连接反馈。如大概用户点击某个按钮时,按钮默认的外观与点击后的外观发生变化,结合现实世界的开关去思考(按下 开灯)动作与反馈是连接的,即时的。




六、希克定律


希克定律,是1951年由威廉·埃德蒙·希克首先提出的,认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加。




如京东筛选,在搜索结果页会将筛选条件收起,因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单,并且做好归类,用户能够更迅速的作出决定。




七、费茨定律


费茨定律,是1954 年 由保罗.菲茨首次提出,在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。


T:代表完成移动所需的平均时间

A:代表光标开始/停止时间

B:代表光标移动速度

D:代表从起点到目标中心的距离

W:代表目标的尺寸


简单来说就是指:随着目标的距离增加,移动到目标的时间更长,并且随着目标的尺寸减小,选择目标的时间也会增加。


所以在界面设计当中会遵循越重要的功能,占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。




屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中,所以我们在进行产品设计的过程中,会将常用/重要的操作放置在屏幕边缘处,便于用户操作。



八、神奇数字 7 ± 2


神奇数字7±2法则是1956年由 乔治·米勒 所提出的,根据乔治·米勒的研究,人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。




由于人类的大脑处理信息的能力有限,大脑会将复杂信息划分成 块 和小的单元。如:京东和每日优鲜的分类处理。




人类短期的记忆一般一次只能记住5-9个,所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。




九、复杂守恒定律


复杂守恒定律是1984年由 拉里·泰斯勒 所提出的,也称作泰斯勒定律。认为每一个产品设计的过程中,都有其固有的复杂性,存在着一个临界点,超过了这个点产品设计的过程就不能再简化了,你只能将固有的复杂性从一个地方转移到另外一个地方。


在产品设计中,会尽量的简化界面。当功能过多时进行一个整合的处理,跳转或者滑动操作。如查看更多或者常见的汉堡导航。




十、新乡重夫:防错原则


新乡重夫认为遗忘有两种:一种是疏漏,另一种是忘却。他建议采用一些措施来预防产品的缺陷。


防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;比如常见的信息输入状态,未输入置灰不可点,输入变为可点击状态。




微信拍一拍:微信在出了拍一拍功能之后,很多时候点击头像的时候会不小心拍到别人,现在的拍一拍是可以撤销的,在客户端鼠标悬浮上就可以进行撤回,移动端长按出现撤回弹窗,两分钟内有效。




微信朋友圈动态:点击返回图标会出现的弹窗,避免误操作。利用防错原则,可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。




十一、奥卡姆剃刀原理


奥卡姆剃刀 定律 :它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 (William of Occam,约1285年至1349年)提出。 这个 原理 称为“如无必要,勿增实体 ”,即“ 简单有效原理 ”




01、只放置必要的元素


不必要的元素会降低设计的效率,不管是实体、视觉或者认知上,多余的设计元素,有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息,可以用「更多信息」来实现。如夸克浏览器,首页只放置重要功能 搜索 和几个整合内容的图标入口。




02、减少点击次数


让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件,在播放音乐之后进入其他的tab,在上面都会悬浮播放/暂停的区域。都能够随时操作。




03、“老人”规则


就是产品的易用性,如果年纪大点的人,也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验,简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内,并且抖音会根据用户的停留时长等推送用户感兴趣的内容。




04、减少“段落”个数


页面的使用率,当你想要在一屏新增很多内容时,页面的布局就会变得拥挤和区域变小,容易过于干扰用户做出选择,重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口;uc浏览器首页内容过多,当用户想要使用搜索功能时很容易被其他内容干扰。




05、给予更少的选项


前面说到的希克定律说到,当选择的数量越多,用户做决定的时间就更长。做过多的决定也是一种压力,在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示,马蜂窝根据产品属性放置了6个重要的功能入口,便于用户更快的去选择所想要的功能。




十二、设计和艺术的区别是什么?


最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是:艺术抛出问题,而设计解决问题。


我们设想一个场景,当你在艺术展厅站在一副名画面前,你所思考的是什么?是惊叹画家的画技还是整个画面给你的感觉是一种故事,你会不会思考艺术家在作画时的心情,处境,为什么要这么去画?想表达怎么样的情感?



然后我们再设想一个场景,同样在艺术展厅,你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧?因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。


原文地址:站酷
作者:左言右设

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

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

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

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

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


日历

链接

个人资料

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

存档