首页

G端可视化中的适老化设计

分享达人

前言


调查显示,2020年我国老年人口达到约2.43亿,占比18%,50岁以上的网民群体占比22.8%,G端可视化面对的主要群体就是政府领导,而政府大领导普遍都是市级及其以上,年纪大多数为60岁往上,属于适老化的涵盖范围,因此探索适老化在G端大屏中的体现,也是很有必要的。

有人说:适老化是减少操作,注重呈现,是在设计方案中的体现。并且适老化设计,本身也是给老年人群体的一种特殊定制。

在我眼里看来:G端可视化大屏本身就是面向定制化,不存在特殊化或普遍化,因为他的群体本身就是老年客户,既然是这个群体,那么适老化就是我们设计师需要考虑的。



一、通用性和包容性设计


首先一般讲适老化无障碍设计,我们都要提到的就是通用性设计和包容性设计。


通用性设计


原则:强调设计所有的系统和产品,使每个人都能使用,无论他们的年龄或能力。

百度百科将通用设计定义为:“能被失能者所使用,就更能被所有的人使用。通用设计的核心思想是:把所有人都看成是程度不同的能力障碍者,即人的能力是有限的,人们具有的能力不同,在不同环境具有的能力也不同。”

通用设计中应当也包含对于特殊人群的基本考虑,要让目标人群觉得:鱼和熊掌都可兼得,既照顾了特殊人群的使用,又兼顾所有人。



包容性设计


则 :好的设计应该满足尽可能多得使用者的需求。

百度百科将包容性设计定义为:包容性设计着眼于清楚源于使用主体而造成的各种障碍,使每个个体都能平等、自信、独立的正常使用,为同一适用条件下的互动提供了新的视角,也为创造性和问题解决导向的设计提供了机会。


那么我们应该如何践行通用性和包容性设计在G端可视化中的理念呢?



二、客户的困境-现状分析


通过分析客户的困境,结合现状进行深入分析,发掘政府端客户的普遍性存在的问题。


年龄分布适老


大多数政府省市级领导人的年纪均在60左右,由于年龄普遍较大,对于设计的认知会有偏差,对于审美的把控以及设计本身的价值理解会偏弱。

从去年十月上旬开始,省级党委换届拉开大幕,在至今近8个月的时间里,全国31个省区市先后展开换届。经过此次换届,干部队伍的年龄结构得到进一步优化,初步形成“50后”为主导、“60后”渐成中坚的格局。

根据公开资料统计,31省区市书记平均年龄为58.1岁。其中,“40后”书记有6位,“50后”有22位,“60后”也有3位,某区党委书记胡XX和XX省委书记孙XX同为63年出生,是最年轻的书记。



生理机能下降


视力:老年人视力的下降,影响眼睛对空间、颜色、明暗等加工等;

听力:听力弱化造成的听不清楚,尤其是在嘈杂的环境中,老年人听起声音来会更吃力;

表达力:专业化的术语以及需求,会使表达和沟通不便;



认知能力不足


互联网和人工智能等技术发展变化太快导致认知力的不足。

绝大多数的老年人对现在数字化的产品很陌生,再加上复杂的界面操作,需要反复的学习使用才能熟悉掌握。



三、设计的探索-客户心理


ToG类型的项目,我们的客户群体是政府的某个部门(G端行业中,政府部门因为权限和管辖内容的不同,客户的诉求也会不一样,同时由于决策层是一级一级往上的,对于各个层级的领导都需要去进行满足,对于设计的要求也就更高了),因此我们需要对客户的心理进行重点挖掘。


1、政府部门客户的特点


  • 严谨务实原则

政府部门的领导或者员工大多数都是高知人群,对于工作的态度都是非常严谨,喜欢按规矩办事,分工明确,力求事情做到一丝不苟,有理有据,讲究严谨做人,务实做事。


  • 安全性原则

政府部门的保密工作需要做的非常到位,尤其是关于公安等民生问题时。另外政府类客户一般对于数据的保密做的非常好,基本都是内网开发,私有化部署,一切互联网的东西连接内网都会报警。如果是外网开发,则需要做好数据存储,一定要非常注重数据安全。


  • 实用性原则

政府类的软件或者产品,基本都有很强的实用性,实用好用才是客户最关心的问题,因此在系统架构上需要做到,简单高效,快速触达,减少客户的学习成本。


所以针对政府客户特点,我们需要做到严谨务实的态度,安全实用,简单高效。



2、政府部门客户的需求


  • 正文字要大

对于文字大小的需求比较强烈,提及最多的就是字体放大,加粗。


  • 屏幕要看清

对于画面能够看清,需要重点表现在前景和背景的色彩对比度。


  • 画面要酷炫

对于画面的表现,要更加的酷炫,在客户眼里,动态图形效果远远大于静态效果图。


  • 饱和度要高

随着年龄增长,人类的晶状体会变黄变浑浊,导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果,从而降低元素在界面中的对比度, 因此需要提高色彩的饱和度。


  • 逻辑要清晰

产品整体架构以及内容逻辑清晰,简单高效,上手简易。


所以针对政府客户的需求,我们需要做到画面清晰,视觉酷炫,色彩明亮,逻辑清晰。



四、策略的应对-解决方案


通过对政府类客户的分析,挖掘客户最深层的需求,针对于以上的关键点,提出适合的解决方案,大体在一下6个方面的全面解析。


1、解决方案:框架


对于系统框架以及布局进行一屏式展示,减少系统层级的递进。

对于展示形式上可以更清晰准确, 尽量模块化展示每个需求,做到聚焦用户视角,提升画面表现。

整体交互流程简化,复杂以及多层级弹框尽量少使用。



2、解决方案:字体


  • 中文字体

中文字体类型的使用,在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。


  • 英文字体

英文字体类型的使用,英文数字的字体选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN字体。


  • 字体大小

字体大小的定义。在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常1080P页面,最小字号不小于16px,具体字体大小还需要参考设备清晰度,环境灯光,视距等因素。




3、解决方案:颜色


  • 颜色对比

界面中的前景与背景的对比度,是否足以让政府类客户清楚识别;

颜色不应该用作传达信息的唯一视觉手段,需要用额外的文字提示;

通过 H(色相)S(饱和度)B(明度)的数值来划分色域,在保持H值不变的前提下,定义了10个色域。所以在前后景的颜色选择上,满足跨度至少为6,才能让目标人群准确识别文字信息。


  • 对比度检测

视觉呈现以及文案图像对比度至少要有7:1,大文本至少有4.5:1的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标,如Contrast Ratio 在线检测工具:

https://contrast-ratio.com/



  • 颜色多样

画面采用多种饱和度较高的颜色,而不是单色;

颜色的丰富程度决定了画面的视觉表达,色彩越丰富,画面表现越好;



4、解决方案:图形


增加图形的占比大小,提升视觉上的表现;

尽量采用识别度较强的图形和图标,尽可能贴近客户的认知范畴;

图标和图形尽量搭配文字描述,方便客户更清晰更快速理解。



5、解决方案:视距


观测距离的远近,也决定着画面的展示效果,尽可能的拉近观测距离;

正常视距观测下,以常规设计规范去制定即可,如若观测距离较近,则可适当缩小相应的视觉表现,反而观测距离较远,则放大视觉。



6、解决方案:设备


设备的尺寸、精度,分辨率大小都会影响目标人群的体验;

在设备精度较低,或者说点间距过大时,应当适当放大视觉表现,点间距小的则显示非常清晰,可适当缩小视觉表现。



五、规范的提炼-应用推广


为了保证适老化的推广,需要在适老化的基础上统一标准,在字体,颜色,框架,图形等内容上做出提炼,深入了解目标客户的需求以及客户心理。

本着严谨务实,安全性,实用性等原则,沉淀出一套符合目标人群的设计规范,应用并推广到不同设计团队以及推广到广大设计师中去。



六、未来的期许-设计使命


我们需要不断践行适老化设计原则,体现设计的通用性和包容性,应当在设计表现和产品功能上更加的包容这个群体。人工智能大数据时代,虽说政府类客户会比普通人更容易接受,但是受制于某些原因,推动解决老年人面对智能技术的问题解决才是重中之中。

设计师也需要运用自己的专业性,来帮助目标人群融入数字化的生活中去。

因为在不久的将来,我们也会变成这个群体,当我们面对这些束手无策时,那时的设计又会是如何适老的呢?适老化设计是适合所有人的设计,所有的设计师都应该密切关注。



七、全篇总结


1-不要依赖颜色来传达信息(客户更喜欢文本,有特殊含义除外:四色预警,国标色);

2-文字展示要清晰,字号大小要更加适合目标群体;

3-提高颜色对比度,丰富画面色彩,禁止使用单一色系;

4-界面中重要元素应尽量避免使用蓝色(特殊行业除外:公安等其他);

5-增加图形以及图标的视觉表现,尽可能做到一目了然,便于客户理解;

6-尽可能拉近观测距离,提升观测体验;

7-选用高性能,高清晰设备,提升观感,优化客户体验;

8-针对政府客户特点,做到态度严谨务实,安全实用,简单高效;

9-针对政府客户的需求,做到画面清晰,视觉酷炫,色彩丰富明亮,逻辑清晰;

10-盲目照搬照抄而不去具体问题具体分析,这些无障碍设计在某种程度上就会成为“障碍”设计。

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

文章来源:站酷。 作者:  AYONG_BOR
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

思考数据可视化应用设计规范

分享达人


一、图表的分类介绍以及应用范围


一提到图表,大家脑海里浮现的,通常是柱状图、饼图、趋势图等等。这是按照图形等维度对图表进行分类,经常会导致图表的误用。

图表的作用,是帮助我们更好地看懂数据。选择什么图表,需要回答的首要问题是『我有什么数据,需要用图表做什么』,而不是 『图表长成什么样』 。因此我们从数据出发,从功能角度对图表进行分类。






二、画面布局在实战中的应用


在画面中我们经常会遇到各式各样的屏幕分辨率,有大屏的LED屏,有平面显示屏,数字拼接屏等等。那么具体的项目中我们如何去定义这些不同尺寸的屏幕来进行画面布局呢?



如若有其他分辨率下的屏幕,按照这个规律的基本布局,尽量使组件呈现16:9比例排布是最好的;超长分辨率下的大屏设计或者拼接很多块显示器的大屏可以通过具体业务内容来展示,按模块去划分,功能点明确即可。

此处布局只是我个人觉得比较合适的展示方式,并不代表一定是需要这么排布,还可以有很多的形式去布局。也可能因为业务不同,版式也会有调整,不过万变不离其中,掌握基础要素,其他分辨率下照样可以有很多编排形式!





三、硬件常用尺寸以及设备


Led屏幕


1、点间距不同


p3点与点之间的距离是3毫米,p4点与点之间的距离是4毫米。


2、清晰度不同


P后面那个数字越小,代表两个灯珠之间的距离越小,清晰度越高,相对应,价格也会高,因为每平方的像素点P3比P4多很多,成像效果好。


3、最佳可视距离不同


点间距P3(3mm)的显示屏,它的最佳可视距离是3.5~10米,点间距P4(4mm)的显示屏,它的最佳可视距离是5~13.5米。可以根据自己的实际情况,选择最适合的型号。



拼接屏


拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px(在这里感谢我的数学老师)


现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵。


另外大屏设计还有一个比较重要的问题就是注意拼接屏之间的缝隙,设计时千万不能跨屏设计,不然很影响美观。





控制端


目前企业用的最多的控制端为ipad控制,需要在ipad上制作出控制端页面,一般尺寸为2048*1536,控制端大多数为按钮操作,页面尽量简单明了。





四、字体字号以及画面配色631


字体字号


在数据可视化设计中,一般选中的字体有如下几种:

  1. 中文字体:苹方,思源黑体

  2. 英文字体:DIN,DIN-PRO

  3. 数字字体:Exo

正常1080P情况下,由于甲方大多数为政府机构,文字要求会比一般的要求大一点,一般都是选择最小16px。字号不是固定的,人是活的,规范是由人制定的,切勿迷信规范。



配色法则以及颜色选用


运用配色631法则,将配色定义为主色60%,辅助色30%,对比色10%去贯穿整套界面文字的颜色通过重要、普通、次要去分配,是带有色彩倾向丰富页面视觉。

在数据可视化设计中,由于大屏是偏暗的,所以需要选择高饱和度的色彩,并且需要选择统一的颜色,保持画面协调。

有时候会遇到客户需要高饱和度的颜色并且多个颜色的时候,在选用时尽量选用饱和度不要太高的颜色,不然画面会很不协调,也就是所说的晃眼。



在设计过程中尽量选用深色背景作为画面主背景,这个可以解决大屏因为色差问题,对整体页面的影响,用户也比较容易忽略拼缝中的存在的跨屏感。同时深色背景时更容易突出主体,画面效果更好,更能体现流光、粒子、发光等酷炫效果。

同时,大屏由于有色差,尽量不要使用渐变色,如若需要使用需要到达现场,根据大屏反馈的色差,现场调整,但还是推荐尽量使用纯色。




五、画面饱满以及页面装饰点线面


画面如何饱满


方式一:字体的饱满

将字体处理后,空白面积减少,整体更饱满了些

方式二文字的饱满

正常情况下为使阅读更方便,标题间距给-10%~20%为佳。

通常数字会比汉字小,为使基线对齐,数字与汉字需分开设置字号。

主副标题字号比例过大过小会导致界面不平衡,建议主标题是副标题的1.5倍。



方式三关系的饱满

当A=B时,图标和文字的关系会混淆,这种情况下要满足B>A,用间距分层次


采用黄金分割0.618值。也就是横向21个小方块,竖向13个小方块。此时,最优雅的板式是A>B的间距,1>2>3的间距。



方式四:图标的饱满



页面如何装饰会更丰富(如何运用点线面三大构成)


我们在设计的过程中,经常会因为画面不够饱满页面太空,收到客户的吐槽,下面就讲讲如何通过点线面来丰富画面,使画面更丰富更有层次感。


1.原画面设计完成



2.添加装饰线(点线面构成)




3.调整位置,丰富画面



在画面添加装饰的情况下需要给画面留足位置,数据可视化大屏本身面积就比较大,合理运用画面以及拼接屏缝隙添加装饰线,可以更好的减轻拼缝所带来的影响。装饰线的添加还可以在后期丰富画面动效,科技感十足,在页面中添加装饰线在我看来,非常的有意义,既可以丰富画面,又可以完善动效,一举两得。


在装饰线添加这一块,推荐大家多去看看国外的可视化设计,哪些几乎将点线面构成发挥到了极致。




六、画面动效以及素材灵感收集


动效制作


C4D+AE

在很多设计项目中会用到很多酷炫的科技模型,比如汽车、人物、地球模型等等,我们可以运用C4D来进行主视觉建模,再通过AE进行动效输出。




有的人可能会问在导入数据之后可能由于数据量不大的原因,动态效果不是很明显,在这种情况下,咱们可以把不变的数据量,做成AE动效,可以把动效导成json文件直接发给前端,能很大程度上保障画面动态效果。



素材灵感收集


Behance

在behance上有很多国外的设计师,他们的数据可视化设计做的都非常漂亮,极具代表性风格,我们可以通过behance搜索HUD 即可搜出来一大堆精美的高清原尺寸设计图,同时可以把这些作品保存到自己情绪版中,非常的方便。


pinterest

从“书签”这个角度出发,我们可以发现其实Pinterest的本质就是一张张精美绝伦的图片书签。每一个在Pinterest上的图片其实都是一个个网页上所提取浓缩而成的书签。pinterest对图片的关注是最用心的,去除了其他的各种干扰,Pinterest只注重图片的呈现。

而且Pinterest有个非常独特的功能,就是他能够自动筛选同类型图片,并且精准度非常高。



Videohive

这是一个专注视频模板和素材的网站(收费),在此可以搜索出很多的HUD动效视频以及高清图片。


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

文章来源:站酷。 作者:  AYONG_BOR
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



关于让设计工作流程更加高效的思考!

雪涛

项目的运作是需要多人合作完成的,在这个过程中会遇到内部和外部的各种的问题,我们这里主要讨论的问题属于内部问题,分人和事。


一、沟通前,多站在对方角度思考


项目大小不同,投入资源会有所分别,但是项目成员专业构成上却都基本是一致的。大家的专业背景不同,相互并不了解各自的工作,思维方式也是不同的,大家在讨论工作的时候也是习惯用自己熟悉的方式进行沟通,相同的事物会存在认知的差异,在传递、执行的时候产生偏差,从而影响目标达成的效率。工作中各自的工作都有不同的专业目标和标准,大家讨论问题都是奔着解决自己的专业目标去的,目标不同,诉求肯定就不一样。


如下图,只有三方达成共识才能做出“好的产品体验”对用户有价值、高满意度的产品,缺少一方都无法完成这个目标。


举例:开发在实现一个页面的时候,他们首先要考虑的不是页面好不好看的问题,而是从实现角度考虑技术方案、难度、性能;设计则是考虑视觉上的美观性、易用性;产品需求方则是考虑是否能满足需求,达成目标数据;在这个项目执行过程中,如果大家都坚持自己目标不让步,这个项目就很难进行下去,然后就有了“妥协”,项目的执行其实就是成员之间相互妥协、博弈的过程。这个过程需要项目团队不断的“磨合”,然后形成共识、工作上的默契。


“妥协”这里不是退让和降低标准,而是需要站在对方的角度思考,他为什么会要这样做?他和自己的方案哪个更有利于项目,如果他的方案有利,自己需要做出那些改变和投入?(这里要考虑可行性);如果自己的方案更有利项目,那就需要阐述自己方案的优势,有理有据说服对方接纳;这个过程必然是顺畅的,提升在执行项目时候的效率。


二、项目过程中,及时同步信息并达成一致


项目常见问题:项目从开始到结束会有很多个项目节点,在过程中因成本和难度,不断修改设计导致的结果偏差;参与决策者较多,之间没有达成共识,在项目不同阶段完成决策,导致的结果偏差;因外部因数导致目标的变化等等问题…


每个项目的流程都有不同的差异,但是多多少少都有上面提到的沟通问题和信息传递的问题,工作中我一直在思考如何更加有效进行沟通和同步信息。这里和大家分享交流一些心得和看法。


1、优化流程中的沟通、信息同步

明确流程节点上需要参与的人员,确保信息的同步触达范围;明确流程节点上需要完成的任务,并且有统一的输出标准、评价标准,让每一个人都清楚自己在做什么、如何去做;明确每一个阶段所需要达成的目标,让项目成员在项目进行过程中也清晰自己的任务,同时让新加入、合作的同事快速了解项目,提升协作上的效率,完成一致的目标任务


2、根据项目大小对流程进行分类

项目流程模块化,针对不同内型项目,明确任务需求模板:小项目(A任务) 、中型项目(A+B任务)、大型项目(A+B+C任务),


3、加强目标在项目中的一致性,建立高效的决策机制

通过项目阶段任务评审,及时将信息同步给项目成员,建立由“项目核心成员”和“决策者”组成的“评审团”,有分歧和问题的时候快速决策,解决问题;避免只讨论不做决策的会议,因为永远都是没有结论的


项目经历和思考


再过往的项目经历中,不同公司在不同文化背景下对于项目的流程管控和要求有着比较大的区别。


  • 互联网公司文化是比较看中体验的,这种思想是从上至下的,所以再遇到有分歧问题的时候大家有一个共同的判断标准“这样做是否会伤害用户体验?”,在此基础上再去讨论我们应该这么做,相对比较容易达成共识;

  • 在手机厂商做项目时,对用新增用户的压力没有互联网公司那么大,用户量的增加主要看手机卖的好不好,怎么盘活现有用户,提升活跃增加转化才是目标。所以更加看中的是用户运营,在挖掘用户需求的同时,更多的是考虑如何吸引用户;

  • 放在制造企业里软件项目只是整个产品项目流程中的一部分,项目按时上市是优先级最高的目标,其他节点在此时间倒推,硬件的时间往往是很难压缩的,不然卖出的产品质量无法保证就是很大的问题,所以往往可能被压缩的就是软件和产品开发的时间了(硬件产品项目相比互联网产品其实已经提前很长时间规划了,但是市场的变化太快)这样的事情时常发生,也无法避免,所以只能尽早做好规划、储备才能从根本上解决硬件产品在软件流程上遇到的尴尬问题。


最后谈点个人的观点,现在科技发展迅速的大环境下,用户被培育的忠诚度不高且善变。从鹅厂开始新起“微创新快速迭代”并不适合制造行业,也可能不在适合现在互联网,因为现在的“爆点”事件都是发生在创新的产品上,微信不是QQ迭代出来的,大疆也是通过自己的不断创新赢得了市场。想要做出领跑市场的创新产品,就需要挖掘更深层的用户需求实现“创新产品的规划和储备”,想的更远才能更有效率的创造对用户有价值的产品。





文章来源:站酷 作者:Midea_IoT_UED
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何在企业官网刻入品牌DNA?

雪涛

我们可以从哪些维度强化品牌特质?我们在保留天虹品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。

如果聊起中国的零售巨头,我们一定不会忽略天虹商场(现“天虹数科商业股份有限公司”)最初所占据的一席之地。天虹是国有控股的上市公司,自1984年天虹注册成立后一年,第一家天虹商场——天虹深南店开业,正式开启零售业的征程,成为全国零售业的先行者之一。


天虹成立的30余年来,历经了经济发展的巨大变化所带来的市场繁荣,这也使消费需求多元化成为不可逆的潮流,越来越多中国零售企业采取了多业态发展战略,零售市场从过去的百货商店、副食店一统天下的局面迅速发展成为多业态并存的市场格局。


目录


01  项目展示

02  天虹品牌分析

03  天虹品牌DNA及核心竞争力

04  天虹新业态的呈现升级

05  从多维度强化品牌特质



天虹品牌分析 


过去几年,天虹不断在全渠道方向转型,突破传统购物模式,践行数字化、体验式、供应链三大业务战略,大力发展线上线下一体化的智慧零售商业模式。如今,它更把自己定位为一家提供生活解决方案的服务商。


天虹零售行业数字化转型正在如火如荼的进行,产品线的扩张让目标客户发生了变化,反观消费人群对天虹的印象,仍然停留在天虹仅是一家老牌的实力零售国企的形象,天虹这次找到我们进行官网改版,目的就在于此——在保留品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。



天虹品牌DNA及核心竞争力 


天虹自2008年确定新的品牌战略以来,始终将“亲和、信赖、享受生活”的品牌核心价值贯彻到底,天虹从事零售行业,贴近生活的脉搏,与生活息息相关,更是以“分享生活之美”作为企业使命。


品牌DNA不可复制,我们率先从品牌的视觉资产切入,计划在天虹新官网具体的视觉设计元素上,例如图标、颜色、配图等,结合品牌强化天虹DNA记忆符号,让记忆符号给访客在视觉、“触觉”等感官上加深印象。


一进入天虹的新官网,首屏上,一句“天虹,分享生活之美”的slogan配合自动播放的短视频,点明了天虹十余年以来一直坚持的品牌使命,天虹对自己品牌核心价值的阐述,也穿插在新官网的各个版块中。



天虹的品牌Logo是一抹橙色极简的彩虹形状,同时也是一丝纽带,意在构建一座通往利益相关者之间的桥梁,营造和客户之间平等、亲和、互相信赖的客群关系。


在首屏接着往下,一句精简的文案充分阐述了“天虹,分享生活之美”的品牌使命,同时应用了天虹logo一抹橙色极简的“彩虹”元素,把品牌基因融进网站交互与视觉设计,能让用户自然地产生与品牌间的联想,加深品牌印象。



这样给访客加深品牌印象的设计不在少数,例如从“了解更多”进入到天虹企业简介的Banner以及每个页面的底部导航,都有从天虹Logo特征延展出来的图形设计。



色彩是一个非常重要的品牌基因。从品牌色延展的色彩方案贯穿应用到网站中,是最为常用的建立品牌印象的方法。


用品牌色作为组件和高亮色自然是不用多说的:



但是,色彩并非越丰富越好,过于丰富反而会干扰访客对网站内容的吸收,我们根据品牌调性控制好品牌色的应用数量,有时候单色或者双色的配色方案更能形成突出的风格和印象。



大面积的色彩虽然能刺激用户的视觉感知,但是也可能分散用户注意力,因此,如果网站有更多资讯阅读类的内容就不适合用过多的色彩,否则会破坏用户的沉浸体验。


“分享生活之美”的主旨在网站中更多的表现在配图上,除了刚刚展示的首页视频,我们还在各个版块穿插了不同生活场景中有温度的图片素材,这些图片素材流露出专注、有朝气和亲和力的氛围,一定会让访客对天虹的好感油然而生。



在各行各业竞争日益激烈的当下,企业历经单一的价格竞争、广告竞争和产品竞争等方面的竞争之后,企业的品牌具有区别和领先于其他竞争对手的独特能力,能在市场竞争中展示品牌的内在品质、技术、性能和完善服务,引起消费者的品牌联想,促进其购买行为,因此,品牌竞争力会逐渐成为企业的核心竞争力。


在现如今的新零售时代,顾客体验感的提升、用户和线上+线下移动端多渠道的互动影响,让企业核心竞争力不再是孤立的某一个因素。而天虹30余年以来,能够保持自身的核心竞争力——品质与服务,这是天虹站在顾客的立场角度,去思考自身企业真正能够带来的价值,我们专门为此设计了一个【品质与服务】页面。


在品质上,除了阐述天虹一直贯彻并强调的经营理念,以及一直以来的践行,我们通过呈现权威的认证证书、六项质量大数据以及天虹的质量管理规范,更强有力的证明天虹品质。



同时,加入时间轴的交互设计,更清晰明了地向访客展示天虹从1987年至今,为顾客保证商品品质所付诸的行动,以及所获得的品质认证奖项。



在服务上,我们分为顾客选择天虹的服务之前、天虹服务顾客时、完成服务之后这三个步骤,明确说明天虹可以向顾客保证的服务品质。


在顾客选择天虹之前,我们运用七种颜色的交互动效,展示天虹可以给顾客的七重品质保证,每项保证都有针对性的服务承诺。


这里还有一个在背后小小的设计想法,七种颜色正好对应彩虹的颜色,也正好和天虹的“虹”相呼应。



为顾客提供服务过程中,直接列出了天虹五项顾客服务的基本准则,体现了天虹为实现品质服务的切实行动。



天虹完成服务之后,分别展示四个场景、渠道保证顾客无忧售后。



天虹新业态的呈现升级 


天虹不同以往的是新业态的改变,要呈现具备科技力的天虹,我们在策划品牌网站时要确定这两大要素:


  • Who—天虹的目标访客群体?

  • What—天虹正在做什么?



Who 天虹的目标访客群体?


一个网站的诞生,是为了服务特定的用户,在网站设计阶段,产品经理通常需要把网站设计构想和思路提交给产品研发团队、视觉和交互设计团队进行网站的设计开发,我们的设计开发团队如何才能清晰理解访客的真实需求?


那么,除了网站需求文档、原型图为主,还要把用户画像作为辅助说明,让我们设计团队成员在设计网站的过程中,对网站目标访客群体有一个更形象化的认识。我们在这不做对访客基本人物属性的分析,而是主要分析访客的使用场景以及访客故事,从而对网站版块、访客体验、访客通过网站完成任务时的浏览路径进行设计。



经过一系列的访客画像分析,我们可以肯定的是,扩张了产品线之后的天虹,新官网的目标访客也会面向更多群体,因此我们将会从这四个应用场景来决定建站方向:



只有让这四个目标访客群体浏览了天虹的新官网,才能真正实现向市场展示出一个崭新的天虹。


What 天虹正在做什么?


我国社会数字化转型进程的不断加快,数字化转型是包括零售企业在内的所有企业,都绕不开的一个重大课题,它能够为企业带来新的发展机遇。


对于天虹这样的零售企业来说,便是借助数字化技术提升企业的运营效能、降低企业运营成本,构建新的数字化环境下新的商业模式是最终目的。在【智慧零售】版块,正式介绍天虹数字化转型发展的新业态。


在为顾客服务上,天虹零售形式的变革是以交付为主要方向的变革,重塑全渠道零售形式之后,【天虹APP】与【超市数字化】把到店与到家等零售形式相融合,实现了顾客“所想即所得”的交付需求,助力了消费升级。


我们在对应的展示版块,附上相对应的使用场景图片,以及天虹APP、天虹小程序的二维码,更有利于访客即刻体验由单一的到店交付,到到家等多场景的便捷交付。



天虹在进行数字化转型中,还瞄准了一个重点是以数据驱动购物百货运营模式的重塑,能够实现原先由人决策、执行、协同,转变为由数据决策、数据执行与数据协同。


天虹购物百货的运营模式在进行数字化重塑之前,仅是依靠商户品牌形象+店内交易才得以完成交易,在【购百数字化】的说明中,我们展示了天虹“Before+After" 的数字化运营模式,向访客充分说明天虹从智能方面寻求新的突破,通过智能设备与数据智能,从而提高了入驻天虹商户的运营效率、降低运营成本的重要措施。



我们明白,信息架构作为网站交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。在商户服务上,天虹还做到服务产品化,我们分别从这两类业务入手为访客做好阐述:


  • 平台业务:天虹在自己构建的平台上为商户提供各种经营工具及服务管理方案;

  • 数据业务:天虹会提供海量数据集成展示的看板给商户。


天虹具体赋能商户的四项支持,我们遵循整站的简约风格来做展示:



【天虹科技子公司】则直接跳转到灵智数科的官网,这是由天虹数字化经营中心孵化的数字化零售SaaS产品,为零售企业提供数字化转型方案,这更能表明天虹未来在实体数字化深耕的决心。



天虹在购物中心&百货、超市、便利店的运营模式中迅速铺开数据化、信息化、智能化的建设道路。其中,我们将天虹超市数字化运营细分为四个方面,真正做到可触达、可交互、可洞察、可追溯。



天虹微喔便利店同样运用线上+线上双模式,从四个方面共同打造天虹微喔的品牌力。



在天虹新业态的展示中没有做花哨的视觉和交互设计,因为当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出正确的设计,一家老牌的实力零售国企的数字化转型,我们更倾向通过展示一些应用场景,将具象化的价值传递给访客,能简则简。



从多维度强化品牌特质


消费升级时代的到来,数字化技术已经与传统的产品和服务产生了紧密相连的联系,正因有天虹这样的企业率先进行改变,我们早已能在日常生活中切实感受到服务的优化和改变。


我们团队通过品牌梳理进行本次天虹官网的改版,从天虹的品牌DNA、核心竞争力以及升级新业态的呈现等多个维度来强化品牌特质和传递品牌价值。我们在新官网做到对三个方面的升级,真正做到向市场展示一个亲和力与科技力并存的新天虹:


a.更温暖

天虹从事零售行业,以“亲和、信赖、享受生活”作为品牌核心价值,更是以“分享生活之美”作为企业使命,与我们的生活息息相关。在天虹新官网里,我们呈现了更多有温度的生活化应用场景,让天虹的形象更贴近用户,更贴近生活的脉搏。


b.更清晰

天虹的数字化新业态转型、品牌符号和视觉形象在新官网更清晰有力的传达给各个访客群体。天虹作为一家成立至今已有30余年的老牌零售国企,我们更倾向于谦虚地阐述天虹的营销理念,保持良好的信息层级可以让整体的浏览体验感更好,而不是对品牌展示的过度包装。


c.更立体

网站设计的过程是先发散后收敛,我们在动手画原型、写文档之前,需要进行大量的思考和调研访客实际的浏览逻辑究竟是怎样的,也就是回归应用场景。在天虹新官网的建设中,我们确定四个目标访客群体来指导网站布局设计的方向,其中【洽谈合作】、【投资者关系】与【人才发展】版块的设计,让天虹诚信、分享、创新和开放的形象更加立体,访客或许会因此对天虹多一份信赖。


文章来源:站酷 作者:增长超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


听说这是最难的配色方法——互补色篇

lanlanwork


01 互补色的定义

互补色分为“光学互补色”和“印刷(色料)互补色”两种。

光学互补色:两种色光以适当的比例混合,能产生白光时,则这两种颜色就称为“互为补色”。

本文主要探讨的是印刷(色料)方面的互补色:在色相环上相对180°角的两种颜色,这两个颜色混合会得到灰色。

图片

互补色由于在色环上相距最远,色彩差异最大,色彩对比很强烈,合理的搭配往往会产生强烈的视觉冲击力。

虽然从色环上来看,互补色可以有很多组,但最常用的互补色有3组,分别是红和绿、蓝和橙、紫和黄。

 

图片

由于红色和绿色在色相上缺乏共性,放在一起会造成极强的视觉反差,搭在一起容易有格格不入、扎眼的感觉,容易出现散乱、土气的感觉。

要取得好的视觉效果,则需要使用一些调和手段,可以在明度、饱和度上中和两种色彩的突兀,使其形成和谐统一的对比。

图片

图片

 

图片

蓝橙是一组经典的冷暖互补色,温暖的橙色在与偏冷的蓝色搭配时,更加醒目,活泼的橙色可以很好的缓解深蓝色的沉闷,增加画面的愉悦气氛,可以很好的营造出画面的层次感。

图片

图片

 

图片

紫色和黄色不论是色相还是明度差异都非常大,因此黄色与紫色的搭配容易产生相当高的视觉强度。

图片

 

02 互补色配色的方法

互补色对比性强烈,因此在视觉上会产生极大的隔离作用。由于色相对比过大,配色难度也最大,如何化解互补色之间的冲突感,是用好互补色的关键。

 

1.通过面积比来达到平衡

如果使用面积相近的互补色的搭配,具有强烈的冲突感,产生的视觉效果强烈而鲜明,情感浓烈,令人记忆深刻。非常适合夸张的、张扬的情感表达。

图片

大多数情况下,我们会选择一种颜色作为主色调,大面积的色相占据主导位置,再用小面积的互补色去点缀画面。这样才能表现出主次关系和丰富的色调效果,色彩对比强烈却又不违和。

图片

 

2、调整明度与饱和度来减弱色彩冲突

高明度与高饱和的互补色搭配,对比强烈,在视觉上会产生极大的隔离作用,它们组合在起,会产生相互衬托、相互抗衡、相互排斥的感觉,并使各自的色相更显突出,更为艳丽,具有强烈的视觉冲击力。

图片

可以考虑降低互补色的明度与饱和度,来减弱冲突,既保留了对比色搭配的特点,同时降低了过强的视觉刺激。

图片

 

3、加入中性色缓冲其强烈的对抗性

互补色鲜艳热烈,而中性色(黑白灰)则刚好相反,它们毫无情绪感,中庸冷静。在对比色中加入中性色可以很好的调和画面的平衡感。通过中性色的调和,既保持了互补色所带来的丰富的层次感,也避免了互补色之间强烈的冲突。

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》听说这是最难的配色方法——互补色篇

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

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

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

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


毛玻璃图标的设计教程

lanlanwork


1. 一定要注意识别度

其实我一直不敢使用毛玻璃效果的原因,就是害怕有识别度问题,其实网上现在有很多毛玻璃图标:

图片

做概念稿练习练习还好,如果真的落地肯定不行,太影响识别了。

为了不影响识别,我们可以有两个做法。

其一:就是毛玻璃的透明度别太低,像腾讯视频这种:

图片

这样不影响我们识别图形的轮廓。

其二,我们可以把图标主图形用颜色填充,毛玻璃的面积只是很小一部分,起到辅助作用即可,比如像喜马拉雅这种:

图片

这样整体的识别度也不会太受影响。

以上就是关于不影响识别的小方法。

 

2. 技法

毛玻璃图标大部分一共分三层,填充层、玻璃层,模糊层(模糊层是嵌入到玻璃层的)。

其中最重要的一个关键点就是,玻璃层其实是假的,并不是透明的,而是100%的填充色。

举个最简单的例子,我们先画一个深蓝色的填充层:

图片

然后加一个玻璃层,这个玻璃层不是透明的,而是100%填充色:

图片

那有同学就会问了,毛玻璃效果怎么产生呢?其实就是把下面的深蓝色圆复制一个进入到前面的玻璃层:

图片

有人又会问,这也没效果啊,对,因为复制进入玻璃层的圆形和后面的原型位置一摸一样,如果不做改变,就看不出变化,所以我们先来模糊下:

图片

区分的还是不够开,我们再降低透明度:

图片

这效果就立马出来了。

所以从技法层面来说,并不是很难,主要是要注意识别度和整体的设计感。(当然,这只是我个人制作的方法,可能别人也有其他的方式)。

 

3. 底色

前几天在群里看到一位星友问,说为什么他做的效果是第二个,而不是第一个那种透透的毛玻璃感觉:

图片

其实我在最开始做毛玻璃效果的时候和她遇到了一样的问题,这个问题产生的原因就是因为底色,现在的底色是黑色,一个玻璃放在黑色上面,透出来的颜色肯定是深灰色,而不是浅白色(除非你这块毛玻璃本来就是白色的)。

我在之前的一次练习时,做一个黑金配的的毛玻璃效果,最开始就做成了这个样子:

图片

总感觉有点奇怪,其实就是因为在黑色背景上,玻璃层的颜色用了白色,感觉没透过去,就感觉怪怪的,后来我把玻璃层的颜色变成深灰色:

图片

这样看起来就好多了。

制作的原理和刚才说的是一样的,先把大形画完:

图片

然后前面整一个玻璃层,选一个深灰色:

图片

然后把下面的形状复制一个剪切到玻璃层中:

图片

现在看不出效果是因为玻璃层里面的图形和后面的图形位置是一摸一样的,这时候我们把玻璃层的图形模糊:

图片

现在已经差不多区分出来了,如果想要更明显的区分,可以把透明度再降低一点:

图片

也还ok,当然,我觉得加不加透明度,还是看具体效果调整就可以了!

再强调下,大家在做毛玻璃的时候一定要注意背景色哦,不然可能就会看起来很奇怪。

 

总结

好了,以上就是我个人对于毛玻璃效果的一点总结,我个人还是比较喜欢一组毛玻璃图标是多色的,如果是一个颜色,比如这种:

图片

相对来说没那么耐看,如果是多色的:

图片

就会耐看很多,希望给大家一点启发,下期见,默默扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》好惨,我竟然被批评了,问我为什么不安排教程?我怕了

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

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

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

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

这些手势交互你关注到了吗?

lanlanwork


01. 评论区双指上滑送出“抱抱”

在听一首喜欢的音乐时,参与评论可以表达自己对音乐带来的共鸣感,也可以看其它听友的评论寻找知音。在网易云音乐的评论区隐藏着一个手势交互,对某一条评论双指上滑就会针对其给出拥抱,两个小人微笑拥抱的动画显示在该条评论右下角,进而用户头像下方会显示“收到了抱抱”的标签提示。

在不新增功能入口的同时,借助双指手势交互来满足需求,既能不破坏原生的结构,又能带给用户不一样的操作体验。这个隐藏的彩蛋你是否注意到?以后在体验产品的时候除了发现视觉表层的可见内容以外,也要加强手势交互的操作来发现更多隐藏的功能。

图片

 

02. 长按激活单击退出

iOS 的设计在手势交互的探索上比较多,全屏的模式将手势发挥到了极致,也带给我们对于手势交互的更多理解。在苹果手机桌面,我们可以通过长按激活应用管理,单击则会退出管理模式,操作非常便利。

无需在当前的设计上面新增更多繁琐的控件,手势的借助可以使得我们的设计更加极简,减少过多的内容对用户的干扰。

图片

 

03. 长按与时间跨度的结合

长按激活功能比较常见,但是结合时间长短的变化相对较少。苹果手机桌面的应用管理,在长按应用图标时会弹窗展示功能列表,继续维持长按则会进入应用管理,随着长按的时间跨度不一样激活不同功能需求。

在手势交互设计过程中,除了通过动作的不同激活功能操作之外,也可以结合时间跨度、力度、位置等进行组合交互,来满足多重功能操作的需求。

图片

 

04. 可以移动的红包

通过红包吸引用户进而转化是很多电商产品的玩法,在必要 APP 中红包通过倒计时的形式营造出紧迫感,促使用户立即使用,进而提高红包的使用率。红包悬浮在左侧会挡住分类的展示,为了解决这个问题红包借助滑动手势可以移动,用户可以在左侧导航栏到底部标签栏之间任意滑动,方便预览分类。

单指滑动是常用的手势交互,精准定位元素之后可以拖动使其改变位置,不仅方便内容的展示也不会造成底层内容的阅读干扰。

图片

 

05. 同一个功能不同的手势交互

我们在观看视频的时候,短视频是单击控制播放/暂停,而视频播放软件则是通过双击控制。由于长视频用户需要观看很久,容易触屏造成误操作,双击是为了形成二次确认,降低误操作的概率。

短视频播放由于内容比较简短,可以通过单击控制播放/暂停,双击则是更多功能的辅助,同一个功能在不同的场景需要配合不同的手势。我们在进行产品设计的时候,可以根据业务类型和用户场景的差异借助手势来满足更多功能的操作,用户习惯培养之后将会提高其操作体验度。

图片

 

06. 通过左滑程度控制删除

左滑动是产品设计中非常普遍的手势交互,通过左滑展开列表隐藏功能,比如编辑、置顶、删除等。

在脉脉 APP 的消息模块,消息列表左滑可以进行置顶和删除,如果继续往左侧滑动则会实现自动删除,以此来替代点击删除图标完成删除操作的步骤。通过左滑配合点击删除操作路径多一步,而左滑程度控制删除效率更高,针对一些消息较多的产品,可以方便用户快速清理未读消息。

图片

 

07. 双击头像“拍一拍”

在微信群聊或者与好友聊天的时候,为了重点提示好友,可以通过双击好友头像进行“拍一拍”,晃动的头像和震动的提示加强好友对信息的关注度。

结合双击的手势交互,在不改变当前布局的情况下加强社交属性,增强好友间的互动提示,通过手势丰富了社交体验。

图片

 

08. 单击进入全屏模式

虽然手机逐步进入大屏时代,但是用户还是希望获得更少的干扰,全屏模式的操作可以让干扰降到最低。

百度地图在操作后会有弹窗式的内容呈现,用户可以通过单击屏幕退出弹窗,再次单击则会进一步隐藏基础控件,进入全屏模式。通过单击的手势交互来简化内容结构,降低干扰带给用户更集中的操作体验。

图片

 

09. 长按快速预览精彩片段

通过爱奇艺 APP 刷剧的时候,在搜寻影视作品的过程中,可以通过长按作品封面进行快速预览,播放精彩片段来判断是否值得追剧。

通过长按激活弹窗,可以在不改变当前布局结构的前提下,进行更多功能操作。适合针对隐藏式功能,也能避免误操作。

图片

 

10. 长按结合位置区域变化

很多影视类产品在全屏播放视频时,除了通过拖动进度条进行快进/倒退之外,也能通过长按屏幕进行快进。

而腾讯视频与之不同的是结合了屏幕区域,在全屏状态下,左侧区域长按快退,右侧区域长按快进。长按结合位置区域变化功能状态,深入了手势交互的操作,也能带来不一样的操作体验。

图片

 

11. 三击激活“辅助触控”

单击和双击的手势交互较为常见,而三击手势应用较少,有待深入探索。目前来说,带有 Home 键的苹果系列手机,可以通过三击 Home 键激活“辅助触控”快捷键,再次三击隐藏快捷键。

通过三击可以快速激活功能快捷键,减少了多个步骤路径,也不会导致用户误操作。

图片

 

12. 下拉程度影响功能变化

手势下滑形成下拉刷新已经成为产品设计中的基础操作,为了进一步延展功能,很多产品在下拉过程中根据下拉的程度判断是刷新还是进入二层楼(活动或者功能模块)。

通常是通过控制下拉的距离来做判断,会提示“松开刷新”的字样,如果继续下拉则会激活功能变化。进入二级功能界面或者二层楼活动界面,深度的功能开发带给用户更多的选择性。

图片

 

13. 缩放预览相册大小

苹果手机自带的相册(照片)APP,可以通过双指缩放来改变照片预览的大小,方便用户在众多照片中通过缩小快速查看,再通过放大做进一步的选择。借助缩放的手势交互,方便用户自由缩放预览并作出快捷的操作,提高了用户的操作体验感。

双指缩放对于屏幕的缩放预览十分便利,在很多应用场景都有涉足,比如相册、地图、绘图工具等。

 

14. 双击最大化图片预览

在图片预览的时候,可以通过双击最大化图片,方便对细节的观察。通过双击的手势交互来快速放大图片,在很多相册应用、电商产品、微信等社交产品中都有涉足,只要是全屏模式下预览图片,都可以通过该手势交互完成缩放。

双指缩放属于慢动作,而双击最大化属于快速一步到位,适合查看图片细节等操作。通常是双击最大化,再次双击恢复正常。

 

15. 手势交互控制地图预览

手势交互在地图软件中的运用表现得淋漓尽致,对于用户来说操作变得更加便利和快捷。

以高德地图举例:单击手势可以隐藏操作栏进入全屏模式;长按固定区域会激活当前位置定位,方便随时查看和开始导航;双击手势可以对地图进行固定倍数放大;双指缩放可以对地图进行任意缩放,便于精准查看位置区域等。手势交互控制地图预览提升了操作便捷度,借助手势提升了地图类产品的体验感。

图片

 

16. 拖动完成自定义设置

随着用户对个性化的需求升级,很多产品都开放了部分常用功能模块的自定义设置。比如网易云音乐的底部导航栏在设置环节中,便可通过拖动完成自定义设置。

利用压力结合滑动可以实现拖动手势交互,对于一些需要用户谨慎操作的功能比较适合,也能有效防止误操作。

图片

 

17. 拖动叠加实现应用建组

当用户下载的应用很多的时候,通常都会通过建组管理手机桌面上的各类应用软件。可以通过拖动应用叠加到其他应用软件上实现自动建组,建组、进组、移出等操作均可通过拖动手势完成,操作非常便利。

拖动手势交互针对一些防止误操作的功能比较适合,相当于二次确认的过程。

图片

 

18. 长按滑动实现多选

在百度网盘中可以通过单击选择控件对文件进行选择操作,也可以通过长按整个区域实现选中,长按过程中可以结合滑动实现多选。

长按滑动进行多选针对文件较多的场景非常便利,也不用担心误操作。在一些相册应用中点击选择按钮之后也可以通过滑动实现多选,操作路径多一步。无论是通过激活选择按钮,还是长按都是起到二次确认的作用,长按滑动操作相对更简单。

图片

 

小结

随着手机触屏灵敏度的提升,手势交互在产品设计中的应用会越来越普及,特别是针对大屏手机。本期整理的关于手势交互操作的案例仅作为抛砖引玉,还有很多的优秀案例有待大家去发现和总结,不足之处留言补全。

 

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

作者:黑马青年

转载请注明:学UI网》这些手势交互你关注到了吗?

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

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

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

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




HMI设计需要遵循什么设计原则?

lanlanwork

如果想做HMI体验设计了解开发流程后,首先开始设计前最需要知道的是以什么为基准去设计,以及设计的限制,也就是设计原则。尤其HMI体验设计是整车体验的一部分,也变得越来越重要。

刚开始进入车载行业的同学都会存在一个误区,会拿互联网那一套设计规范套路汽车HMI设计,但其实汽车HMI有自己的设计原则和设计规范以及美学理念。

汽车行业本身是一个有着强烈美学理念和设计规范的行业,其实准确的说应该是汽车HMI中控设计是基于自身传统规范,结合互联网移动端和Web端的基础上,慢慢形成了一种新的设计规范。加上庞大的行业从业者的外溢,互联网的美学理念和设计规范,已经在入侵进来形成HMI设计新兴的细分领域。

那很多同学问了我们想去做HMI设计应该从哪里下手啊,在这里我建议大家无论做任何的设计都应该从用户场景、用户痛点下手。

 

一、了解与用户沟通的设计语言

在设计HMI的过程当中,都是基于用户在智能车的场景里。就像设计APP会基于用户痛点和用户场景来的一样。在智能车的体验里,首先是驾驶员、其次是车、以及系统三个要元素组成了车内场景。

在结合了现有的互联网车机设计原则,主要考虑的还是简单易用高效专注。

简单易用

在设计上应该为驾驶员提供更完善的包容机制,操作和信息的统一性和延续性,帮助用户降低操作成本,提升用户体验。

高效专注

考虑驾驶员的实际场景的多样性,注意力容易分散或暂时中断。所以在设计的时候 要考虑除非重要的警报,尽量用听觉给到用户的提示。操作上可以满足单手操作,并为用户的每一步操作提供及时的反馈。

 

二、三秒原则

之前看过一个“三秒原则”的理论,开车时在高速上要保持和前面通过一个参照物三秒的距离,才是安全的,说明人在高速行驶的反应时间是三秒。

用户的注意力管理对减少由注意力分散导致的交通事故十分必要,开车过程中,必要操作需要遵循3秒原则,用户必须在第1秒内找到应用场景的重点信息与功能入口,然后第2秒进行交互动作,最后第3秒得到想要的信息结果。准确把握每个过程中的时间,排除多余元素干扰,避免分散注意力。

相关链接:车载系统中,交互设计的「三秒原则」

在三秒原则里,一秒视觉、两秒交互。排除车的硬件体验,那HMI设计师在系统里要给到用户一个什么样的视觉原则和交互原则是我们今天要研究的问题。

 

三、HMI视觉设计原则

1.颜色

车载的美学他们大多是深色的,金属质感,边框和阴影。早期的车载用户界面都是硬性的感觉。但是现在行业已经成熟到一个包罗万象的男女皆宜的当代审美。所以现在的视觉可以在以往的传统上,是汽车界面更新潮更科技。

1.1 关于色彩

主流的背景以深色为主,那是因为深色的背景更不容易分散司机注意力,减少了眩光的问题。现在一些新能源车可以切换白天黑夜模式,也会出现浅色的背景,浅色模式的整体色调不好把控,处理不好会使屏幕一直处于高亮状态,会让驾驶员产生一定视觉疲劳。

色彩规则以 中华人民共和国国家标准 关于驾驶安全的基础标准为大前提,设定符合车载场景的取色类型。

 

色彩对比度

由于驾驶环境的复杂光线条件,需要满足在不同照明条件(日间/夜间/暗光/眩光)下的可读性,对比度需满足以下条件:

  • 文本与底图对比度建议大于7:1(至少4.5:1)。背景推荐使用深色,避免大面积使用纯白色,过度吸引用户注意。
  • 过高的对比度导致视觉疲劳和阅读效率的降低。深色模式下背景与文本或图形的对比度建议不大于18:1。

* 注:下图来自 https://color.review/可在此链接查阅色彩对比度关系。

 

饱和度与明度的合理搭配

长时间驾驶本身精神与视觉会更加需要集中注意力在前方,此时车内环境中,不宜有过于强烈明显的色彩干扰视线,可试想你在电影院中看电影时,身边的人的手机亮度最高,此时会严重影响视觉的余光,难以聚焦在前方画面上。

因此视觉设计的整体色彩体系应当适当的降低饱和度,同样的,车载系统视觉的设计也应避免使用同一色系的方案,这样无法在1秒的安全时间以内让用户有效果的判断识别信息

根据 Munsell Color 原理得出,饱和度和明度的两个数值越大,颜色越鲜艳。在车机配色选择上请遵循以下规则:

  • 越靠右上角的色值越鲜艳,所以不建议选取。
  • 取色时,同时考虑饱和度和明度,这两个因素的值之和尽量小于180(即:S + B ≤ 180)。

 

不建议选择单色,建议增加辅助色

更好的可以帮助我们分组,提高信息的获取能力。

结合 ISO 15008 (道路车辆.运输信息和控制系统的人类工效学方面.车辆目视显示用规范和试验程序)

车载界面色彩倾向度定义了适合作为品牌主要控件的色调的功能色,强调品牌视觉形象。并结合 GB 4094 相关信号颜色规定同样定义不适合的色彩阙值。

按照功能色分类可以根据常规场景将功能定位一级色、二级色、三级色。

 

状态颜色

反馈成功及警戒提醒在驾驶场景中至关重要,结合 GB4094相关信号颜色规定,状态定义需要与相关法规及驾驶者习惯思维的明确色相相结合。

状态用色分类:此处颜色以 HSV 颜色模型参数为标准。

 

百度主题案例:

 

阿里颜色规范:

 

华为颜色设计规范:

 

设计走查自测表阿里车载-设计走查自测表

为方便车载小程序设计,提供轻量化的小程序设计走查表以供参考; 可用于项目前期设计自测、项目中研发自测检查、项目上线后设计/产品协同开发同学完成自测问题,查缺补漏规避风险点;

 

2. 字体

中控与驾驶员的距离处在70cm-85cm之间,设计稿一定要在实车上感受,是否足够清晰,是否能快速识别,中控屏搭载的更多是各种应用,显示的文字相对会多一点,除了文字需要保证在可视区间里,文字内容应当通过字号字重来区分主次关系,用户在扫一眼的过程中即可准确的看到重点信息。保证易读性。

字体的颜色尽量选择对比度高的,参考WCAG标准。方便用户能快速扫视。

字体的大小,层级,对比度等都是影响视觉可读性和阅读效率的重要因素,为保障文本的易读性,界面文字需满足以下要求:

  • 最小可识别文字尺寸:5.4mm。
  • 字体层级:区分文本主副层级,字号差距需保持4-6sp。
  • 需要用户阅读和处理的重要段落文字不超过20个字(700字/分钟,2秒内读完)。
  • 对于需要用户关注的文本信息可通过增加字重的方式突出内容。

推荐阅读:适合车载显示的10款字体

百度字体设计规范:

 

阿里字体设计规范:

图片

 

3. ICON

ICON的设计形式,可更多结合应用的内容,应注意在内容与形式结合时,视线上要保持一致性,可有助于在一秒的安全时间内让用户快速浏览并判断信息

点击是交互行为中最为常用的动作,为确保用户点击操作的易用性和成功率,操作按钮及热区需满足以下规则:

  • 图标:最小的图标尺寸为6.9mm,推荐图标大小为9.2mm。
  • 热区:最小10.7mm,推荐热区15.3mm以上,热区间隔3mm以上。

 

4. 内容排版

车载以驾驶员的操作为主,功能布局尽量设计在离手最近的位置,缩短操作距离,尽可能将热区放大,展示信息放在右侧。

 

4.1 层次和数量

所有的信息按照使用场景、功能。分组展示,确保信息按照的优先级进行交付。在任何场景下展示尽可能少的信息。避免过多信息的干扰,必须做到界面显示轻量化。数量尽量不超过3-4个。

 

4.2 阅读排版

可以根据阅读浏览模型Z字型和F字型。混排的时候建议使用一种字体。

 

4.3 预留安全热区

避免元素热区过近或重叠,需要使可触摸目标之间预留足够的安全距离,至少保持 3.5mm 的热区间隔。

 

5、品牌IP

用户对传统汽车的品牌感认知,还是停留在车标、车造型等硬件外观,而智能汽车,搭载了一个智能系统,除了驾驶需求,人和车的交互更多的会停留在HMI,所以,对于HMI融入品牌元素也相当重要,品牌化是智能座舱视觉设计重要的发展趋势之一。

现在主要品牌的体现形式是车载的IP管家,他有具体的名字,可以用语音唤醒。

 

四、HMI的设计六大交互原则

说到HMI设计,虽然所有人都很容易理解,HMI设计要考虑注重安全,需要在设计上适应车载的使用场景。但是UI设计原则和UX设计原则很少有人系统性的回答过。对比原有的交互六大原则,适配到车载的场景下,提炼出六大交互设计原则。

 

1、基本原则

1.1、安全性原则  ⭐️ ⭐️ ⭐️ ⭐️ ⭐️

HMI涉及到的载体都是汽车零部件中的安全件,HMI设计首先考虑的必须是以安全为第一导向, 所有显示信息都应该按照人机工程学进行合理排布,按照驾驶者的行为习惯进行设计。

与移动端的视觉显示不同,HMI设计师需要注意除了基础的视觉显示规范外,还需格外注意与安全相关信息的展示、视觉警告、文字易读性和显示眩光等显示问题。

 

1.2、及时反馈原则

人的大脑每天通过五种感官接受外部信息的比例分别为:味觉1%;触觉1.5%;嗅觉3.5%;听觉11%;视觉83%。

时刻保障关键信息是最高优先级的,保证在各种环境场景下具有良好的可见性和易读性,无需驾驶员费力寻找和识别。

随着大屏、多屏化的发展趋势,除了依赖视觉反馈,以及减少或避免触摸屏的误触功能,听觉和触觉也可以辅助视觉反馈。

 

1.2.1 不同场景下的提示

除以上正常驾驶场景外,还有部分对特殊场景的提示,如油耗、故障、雨雪天、超速、疲劳等

车载系统需要有能力面对复杂的应用场景,处理需要更加智能,(比如复杂路况+不良天气的提示),以及车内的环境控制(如声音、气温)需要更加敏感。

车载系统的设计相比于移动端有着更明显的约束,不论是从空间(使用环境)、时间(三秒原则)、行为(交互方式)、心智(心理诉求),都有着明显独特的场景和特点,要做好车载系统设计,我们需要有丰富的同理心以及亲身体验并反复验证设计。

图片来源:https://dribbble.com/czx

 

1.2.2 信息获取效率

同样,现在的智能汽车,信息呈现的方式,主要也还是视觉为主,听觉为辅。在还没有完全实现自动驾驶前,信息呈现层级保持不变。

在汽车行驶的过程中当中最高优先级是视觉,时刻要观察道路,查看导航。听觉辅助也是很有必要考虑的场景,通过语音反馈司机需要获取的信息,能让司机尽量保持视觉焦点在路况上。多场景的融合考虑信息获取的效率,能减少在开车过程中的安全隐患。

 

1.3、完整性原则

将页面信息根据某些关联性,分区块进行显示,这将有助于用户更容易的建立信息位置记忆,用极少量的时间查看车辆状态,减少搜索信息带来的注意力分散,保障驾驶安全。

 

1.4、简单学习原则

面对C端用户,设计师要考虑尽最大可能使用符合用户习惯交互方式,减少学习和适应。让驾驶员更有安全感和便捷的操作。如果交互界面改变了,用户极有可能必须从头开始学习一些基本操做。在市场竞争压力这么大的情况下,用户很容易就转向自己接受程度高的产品。随着屏幕越做越大,需要驾驶员操做的功能也越来越多,所以驾驶员会因为复杂操做,面临交通路况拥挤的情况下的额外压力。

 

1.5、信息可视化原则

尽可能的采用图像化/拟物化风格,避免或减少使用复杂的、过于专业的、技术性的图标和术语。

 

1.6、情感化原则

马斯洛需求指出,人们需要动力实现某些需求,有些需求优先于其他需求。我们当下在满足基础需求后需要的更高阶的需求。情感化设计是用户体验和需求金字塔的最高层级,情感化需求也是必然的需求。在移动端,情感化的体现主要还是视觉层面,比如加载过程中的动效、缺省页的插画、异常状态的提示等,还有就是和品牌的结合,增加用户对品牌的认知。

而对于汽车而言,它是一个空间,就靠屏幕里的视觉元素是远远不够的,应该从整车的角度去分析,通过五感(视、听、触、嗅、知)创造更丰富的全局体验,比如可以根据自己的驾驶需求和个人行为习惯,自定义氛围灯,香氛、语音等。

 

汽车IP

汽车IP用虚拟的人物语音来扮演管家的角色,功能包括了记录车主的驾驶习惯,不断优化程序来契合车主习惯,让车主有更好的驾驶体验。

比如蔚来的nomi,既可以陪玩陪聊,还有表情互动,若是加上管家功能,汽车岂不立马变身驾驶员最好的伙伴?看这小表情,是不是还挺可爱、暖心的哇?

 

2、分场景

在讨论如何对超宽一体屏进行体验设计前,我们需要对人在不同场景下的多样化需求有大致的了解。为此,我们将人与车空间关系的场景划分为四大方向依次是:生活、娱乐、办公和共享。

如生活场景下,全家出游,疲惫的人可以直接在车上睡觉休息,无聊的人可以玩游戏,车内空间采用多音道技术,不同的音道技术可以避免彼此干扰。除此之外,还可以起到保护隐私的作用,满足每个人对个人空间的需求。

在娱乐场景下,人可以进行多项休闲娱乐,比如:看电影或者读书看报,其中使用超宽一体屏观看电影时,大屏会给人以良好的观感体验。

在办公场景下,人可以在驾舱内进行各项办公活动,诸如:视频会议、电脑办公、商务信息处理等。

在共享场景下,车不仅可以是运输人的移动工具,还能成为运输货物的移动工具、移动商城、移动酒店等等。

 

3、交互方式

3.1触控:

这里分两种,一种是通过按键控制;一种是通过触屏控制。都是通过不断的触控功能按钮行程锻炼肌肉记忆,现在的趋势越来越趋向重触屏,轻按钮,这样不仅系统迭代成本小,功能可以动态分布。但是对于一些精准调节的功能还是按键控制好一些。

微软 的Surface Dial可以给我们很好的启发,智能旋钮可以解决大部分屏幕调节的不精准的痛点,而效率又高。

 

3.2语音:

在汽车人机交互中,语音交互被认为是车内场景下最自然的交互方式,而语音交互需要一个载体来传达多样化的情感。

语音控制的前景主要在于两个因素,一个是可以把除了界面以外的利用起来,一个可以与HMI自由交谈,二是最小化HMI手动操作产生的干扰,增加安全性。

 

3.3手势:

手势交互是对语音交互、触控交互的很好补充,能够让车主通过简单的手势和语音就能完成车内的交互任务,也是能够增加交互趣味性、表达情感、传达情绪的另一个自然交互方式。

常用的手势:单指滑动(上下左右)、双指滑动(左右)、五指抓取等。

HMI的交互手势不同于手机和IPAD,手机和IPAD握在手里,左右手都可以操作,多指组合的可能性也多,而HMI的手势定义,更多的是需要满足驾驶员的使用场景,屏幕是固定在车上的,要规避掉一些不方便的手势。比如双指往上滑动就很不方便,向上推不灵活,也有阻力。

 

五、六大车载系统开源网站

大家要是想了解的更深入,或者想针对于某个平台去做设计可以参考一下开源网站。

1. 阿里 Alios 开放平台

https://miniapp.alios.cn/index#/document

 

2. 百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

 

3. 腾讯-车载小场景 (私我领取PDF)

 

4. 谷歌驾驶

https://developers.google.com/cars/design/design-foundations

 

5. 苹果 Apple Car Play

iOS – CarPlay 车载

 

6. 华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902

 

六、设计开眼

如果同学们还是对中控设计的设计标准没有一个概念的话,建议多去看些现有设计,去展厅试驾试乘实车,感受下交互,或者在网站上看看视觉不错的界面设计都是可以的。

部分图片来源于https://dribbble.com/czx

图片来源于网络,侵删

今天的分享就到这里!接下来我会分模块去跟大家讲解欢迎持续关注

欢迎大家补充交流!

 

原文地址:站酷

作者:郝小七

 转载请注明:学UI网》HMI设计需要遵循什么设计原则?


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

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

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

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



版式教程 | 海报修改,构图版式的变化

lanlanwork

咕噜噜

图片

 

 

 

图片

 

 

 

 

 

 

 

这是今天一个学员发来要修改的海报,不管是重新还是修改设计,最重要的是能从图中分析问题并进行改正。

图片

 

 

1、主体不够明显

文字在整个版面中的占比过大后,挤压了主体视觉的产品展现,弱化了视觉信息。

图片

 

2、信息缺少层次

当文字越多时,就越要将内容的主次进行有效的区分,让用户在阅读画面时,清晰直观的体现出文字信息,而如果所有的文字都一样的大小并且每段文字之间都没有很好的间隔和空间的留出,这就容易造成阅读的障碍。

图片

 

 

3、背景不匹配

高饱和度的色彩虽然看起来鲜艳,但不代表就一定适用于所有的物体和设计中,比如画面中的质感和主体的关联,就很难体现出来。

图片

 

4、字体不统一

字体是要与主题、风格的调性形成一致性,当一个画面中使用了非常多的字体在进行展现时,不仅无法展示出设计的美观,也降低了整体的和谐感。

图片

 

 

图片

当分析完这张图后,我们用两种构图技巧可以在最短的时间内快速改正以上的问题,这里我做了2个修改示例供大家参考。

 

示例一

 

图片

 

1、首先我们运用三等分的构图方法,也就是将画布分成三个同样等分大小的区域。

图片

 

2、将重要的文字、图形或者物体分别置入进这三个区域中。

图片

 

3、这时会触发新的问题,左右以及部分过多的留白应该怎么处理,可以将一些次要的文字或点缀装饰性的图形搭配在上面,以补足留白过多的问题。

图片

 

4、之前我们分析修改前的海报中提到,主体被压缩后不够明显,在这里面我们需要一个能明显被注视的主体。

图片

 

一个牛丸很孤独,很孤独。

它需要人陪。

于是,用手给它搓一下。

一只手,肯定不行,得两只手,但干搓也太难受了。

还得加点水,让画面多点有趣的联系。

 

图片

 

就这样,海报原本的问题就这么以合理的排版方式解决了。

[优化输出图像]

 

 

 

示例二

图片

 

利用的是对焦线构图的方式,这次我们以主体放置为先,看看后面不同的版式变化。

图片

 

还是一个牛丸,很孤独,很孤独。

它需要人陪。

于是,我找到了它的同伴陪它一起。

同伴说咱俩有点无趣,要不再叫点人一起玩。

于是大伙纷纷跟上,并给它们加了点动力。

 

图片

 

对角线的引导会帮助我们加深被引导的内容记忆,所以我们放置了LOGO,并且四周分布了信息内容。

 

图片

 

随之而来的就是新的问题出现了,

下面很空,看起来它也很孤独。

于是我携带着它们,穿越季节,掠过高架,铺在留白的框架之间。

图片

 

而信息主次的变化就在文字的大小、粗细、比例布局之间形成。

图片

 

我们最后再看下两个示例中,不同的构图带来的变化。

[优化输出图像]

 

这就是今天带来排版那点事!

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》版式教程 | 海报修改,构图版式的变化

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

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

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

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


引起舒适!什么是好用的界面

lanlanwork


1. 怎么算好用

用户觉得软件不好用通常是由于操作界面不符合常识,交互逻辑出人意料导致的。这里我们要引入三个模型的概念:实现模型,心理模型和呈现模型。实现模型是软件的内部运行原理,用户无需关心。心理模型是用户期望中完成任务的方式,呈现模型则是软件被设计来完成任务的方式。呈现模型越是接近用户的心理预期,用户的学习成本越低,也就会觉得这款软件很好用。

 

2. 理解业务诉求

有个很恰当的比喻:用户不是需要一把电钻,而是墙上要有个洞。后来的研究理论更进一步:还得搞明白为什么用户需要在墙上打洞,他要连接什么东西?能不能做成无线的?等等。

图片

接到需求后产品经理一般会在 PRD 评审时向设计侧讲解需求背景和功能逻辑,在这个阶段我们可以了解到产品经理规划中的用户流程和使用方式。产品原型呈现的只是无数解决方案中的一种,了解了业务诉求再回顾原型方案,经常可以带来全新的视野,并由此推导设计方案。下面我们就看下如何从组件,结构,功能,状态几个层面解决设计问题。

 

一. 明确功能用途

1.1 信达雅的文案

文案是界面的重要构成,却是界面设计中最不被重视的一部分。很多软件之所以用起来有一层朦胧的隔阂感,罪魁祸首就是晦涩的文案。简单的纠正文案可能会带来焕然一新的使用感受。

  • 信:语义准确,明确事件的主体客体。
  • 达:避免无效或重复文案,减少被动语态,简洁通顺地进行描述。
  • 雅:优雅且有涵养地与用户沟通。
  • 配图:有些流程或者用词比较特殊,单用语言难以描述,配上图一目了然。

 

1.2 视觉线索(功能可见性)

图形用户界面诞生之初,界面元素对物理世界的模拟是为了便于用户将现实中的常识套用到虚拟界面上;拟物化通过质感暗示用户界面的交互方式;在扁平化时代,提供视觉线索仍然是必要的原则。拿拖拽操作来说,首先可以拖动的组件上要有把手,暗示可以被捡起。组件被拿起来时要明显扩大的投影样式描绘高度,并在列表中显示一条瞄准线便于用户精确定位。

图片

再比如卡片式设计,和现实中的卡片相同,它可以明确地划分出功能和信息的关系。要注意的是,视觉分区越多,页面复杂度越高,设计时需要控制平衡。

图片

 

1.3 熟悉的组件

用户点击下拉选择器的时候,自然会期望在周围弹开一个选项浮层,因为他们用过的所有软件交互都是这样。这个就是习惯用法范式的应用[注],尽可能套用常规的交互方式让软件的操作容易预测,用户理解成本低。

图片

 

然而在常规组件无法承载实际需求时,有必要跳出惯用范式,通过差异的视觉样式给用户思想准备。例如一些原型图中的选择器使用了下拉的样式,触发的却是选择抽屉或者弹窗。这种意外的发生或多或少会降低用户使用时的信心,因为他们再也不确定点击下拉后会发生什么。通过特殊与常规的区分,其实也维护了惯用范式的一致性。

 

二. 导航结构分配

你一定遇到过这种棘手的原型:页面导航又多又深,林林总总地铺洒在导航区和功能区,信息密度堪比柯林斯英汉辞典。页面导航是界面的基本框架,处理系统的导航方式是页面设计早期就需要完成的工作。

 

2.1 几种反例

图片

  • 主导航级数过多:视觉样式复杂,操作时需要频繁卷展。
  • 内容区头部导航堆积:用户先看到的不是内容而是导航,浏览效率较低。
  • 横纵导航分配不合理:不合理的结构会影响视线扫描和点选,且空间利用率低。以图中的结构为例,一级导航下不一定都会有二级或三级导航,就会导致页面版式差异过大。

 

2.2 控制一级导航深度

一级导航过深时,有必要进行降级。顶栏导航可以向边栏导航卸载。边栏导航是一级时,可将最低级的导航放到内容区吸顶;若层级仍然不够用或导航条目较多,可以再增加一个纵向导航。

图片

 

2.3 平衡内容区导航

吸顶导航会占用内容区的纵向空间,但可以随时跳转。内容区内的导航性质更类似于筛选,能够随内容滚动,不便于随时切换。页签类型区别大或是需要切换对比时,可以将导航吸顶;页签下内容形式近似或需要更多浏览空间时,可以将导航放在内容区。

图片

 

2.4 减少空间浪费

很多原型会习惯性地在页面顶部配置一个顶栏。实际上里面的商标,账户信息,设置等功能可以整合到边栏中,这样内容区上方会多一些纵向空间。

图片

 

三. 合理布置功能

3.1 分级展示功能

比如一些的图表类页面主要用于浏览而不是编辑,这种情况下将操作隐藏到省略号或者汉堡菜单中,不仅可以减少信息干扰,还能避免误操作。

图片

高级功能的隐藏很好理解,比如 macOS 的网络配置只显示基础的连接功能,DNS 配置等高级操作被整理到了一个按钮中。你可以想象如果所有的配置项都展示一个页面,对于用户日常联网操作会有多么不友好。

图片

 

3.2 拆分功能

除了分级,当页面或区域内的功能过于集中时,可以进行拆分以降低信息压力。

分离检索与查看:列表同时兼具浏览与管理的功能,但在字段众多,空间有限的情况下,可以选择其中有代表性的字段在单元行中显示,便于快速扫描和管理,完整的单元行信息放到下一个层级显示。

图片

分离表单区块:当表单存在区块表单时,可以只在表单中显示区块的预览,将区块的新增和配置放到抽屉中进行,由此减少功能堆积。

图片

 

3.3 数据的编辑

涉及数据编辑的页面存在四种设计方式,需要综合考虑表单的数量,用户的操作频次和使用方式来判断采用哪种。对于此类问题的推敲,也可以在 StackExchange 的用户体验社区参考更多案例:

例1:https://ux.stackexchange.com/questions/28210/inline-editing-vs-edit-view?rq=1

例2:https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode

查看模式:带查看模式的页面视觉效果整齐,信息干扰最小,且不会误操作。但需要进入编辑模式修改页面内容。

图片

直接编辑模式:用户到达页面时,数据就可以被修改生效。常见于设置类页面。该模式使用效率最高。但由于容易误操作且视觉信息冗杂,不太适合大型表单。

图片

行内编辑模式:页面样式类似查看模式,当鼠标悬停在数据上,界面会提示用户此处可以编辑,用户点击后可以快速针对局部数据做修改。该模式只适用表单项少的情况。

图片

实时保存:页面长期处于编辑模式,系统会自动保存用户的操作。常见于线上文档工具。该模式误操作风险最高,需要提供版本控制和操作撤回功能。

图片

 

3.4 减轻视觉压力

业务层面上无法避免单页出现大量表单时,可以在视觉上分节。注意!和真正的分步不同,这里的只是从视觉层面对页面信息进行处理,没有流程先后的概念,所以尽可能不要拆分页面。以下图为例,通过视觉上的划分,即使在同一个页面显示同样数量的表单,版面空间的呼吸给予了用户喘歇的余地。锚点导航是个锦上添花的控件,空间允许时可以加上。

图片

 

3.5 定制化交互

3DS Max 的四元菜单是一个很有代表性的设计,在视口右键时会围绕光标弹出4个内容敏感菜单而不是一个,这四个菜单显示的工具甚至可以自定义。普通系统在处理此类问题时,要么采用需要滚动的长菜单,要么用联级选择器分类。而这个设计的优越性在于,通过分类并同时显示四个面板,用户点击次数少,光标的移动距离短,大大提高了工作效率。

图片

再比如 Spotify 底栏的探索页签,点击会进入音乐探索页面(顶部有搜索框),双击会直接进入搜索框,长按则会激活语音助手。这些定制化交互的特点在于,它们巧妙地简化了操作流程,但是用户不知道也丝毫不影响使用。

 

四. 补救意外情况

4.1 空状态引导

一个列表出现空状态的可能性有:

图片

  • 确实没有条目:如果能添加的话,可以提示用户如何添加。
  • 应用了过多筛选器:提示用户尝试其他筛选方式或重置筛选器。
  • 加载异常:提示用户刷新页面。

虽然后果一样,但问题本质不同,解决方式自然也不同,此时需要分别给出对应的引导。

 

4.2 异常引导

再没有什么比一行“操作失败”的提示更让人绝望,用户不知道哪出了问题,也不清楚如何解决。异常流程时有发生,此时系统的引导会起到至关重要的作用,它能够带用户走回正轨,减少无助感。

图片

 

4.3 标明功能不可用的原因

该问题的重灾区是工具类软件,用着用着一些功能突然就灰掉了,只能慢慢摸索是哪里的问题。功能之所以不可用肯定有个原因,不论是直接显示还是鼠标悬停时显示,有必要要让用户明白原由或者如何解决,避免把用户困在死胡同。

图片

 

4.4 提供帮助

新手教程特别考验用户的记忆力,尤其是在新接触软件的学习爬坡阶段,而且很难保证在一段时间不用后,用户还能记得如何操作。当系统引入了晦涩概念或复杂交互时,最好在该功能周围提供说明,或悬停时展示 tooltip. 使用户无需长期记忆,在用到该功能时又可以快速上手。

图片

我曾经写过一篇介绍 Protopie 的文章,惭愧的说,由于日常项目中的交互大多比较基础,其实用到 Protopie 的并不是很多,重新打开难免手生。但这款软件界面上可以见到很多问号图标,点击即可跳转到详细的功能讲解文档,不论是对于新人上手还是发掘软件功能都很有帮助。

 

结语

图形界面的本质是人与机器交流的语言。与现实生活一样,我们倾向与礼貌体贴的对象沟通。所以下手设计时要尽最大可能从人类的本性出发,才能在业务和产品逻辑的限制下,为用户塑造更具亲和力的界面模型。

 

注:文章中均为设计时遇到的真实案例,为脱敏隐去了细节。三种模型和界面范式的内容整理自 About Face,分别在14页和240页, 有兴趣可以详细阅读了解。

 

原文地址:京东设计中心JDC(公众号)

作者:邢禹

转载请注明:学UI网》引起舒适!什么是好用的界面

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

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

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

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




日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档