适老化|如何做好B端产品的适老化设计？来看猫眼演出的实战案例( 三 )

内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定，在复杂的现场环境中，信息内容要清晰易读。

文章插图
（2）色彩对比度符合WCAG标准
参照WCAG有AA和AAA的对比度标准，界面中的信息与其背景间的关系对比度至少在4.5:1之上，保证信息易读性。
WCAG全称是Web Content Accessibility Guidlines(网页内容无障碍指南)。
这是一套由无障碍功能专家编辑的指南，有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]

文章插图
一些设计插件可以帮助我们检验色彩对比度是否符合WCAG标准，给大家推荐2款：

Sketch插件：Cluse
Figma插件：A11y-Color Contast Checker

文章插图
（3）设计有意义的动画
通过动效来表达静态视觉效果无法准确传达的信息，如反馈、引导下一步、状态表达等。
好的动效与视觉设计是互补而成系统的。
比如用动画来展示商品被加进购物车的状态，引导下一步操作。

文章插图
（4）加大点击热区
提高使用者点击操作的准确率和速度。

文章插图
（5）一屏策略
在这次的项目中存在一个场景，除了销售端服务员看到的屏幕，顾客也会有一个客显屏，即服务人员看到的界面，顾客也会看到。
对于页面信息框架以及布局尽量“一屏”展示，确保双方的视线和注意力一致，便于沟通交流。但这时会有挑战：字放大、按钮放大，信息和功能在一屏上怎么放得下？
解决思路：

进行功能筛选，满足场景中高优先级核心诉求，提取核心功能展示。
模块化展示每个信息，根据格式塔的视觉感知理论，做到聚焦用户视角。

文章插图

文章插图
可能存在的障碍：在顾客的“催促”下，使用者也会着急，对事物表现出茫然的情绪，定位当前位置困难。
设计目标：追求信息的有效表达和操作的直觉性与效率。
设计思路：
（1）避免使用不易识别的图标
B端系统中会有些功能很难用一个图标去表达其含义，此时文字+图标按钮优于纯图标按钮，能帮助POS使用者更好地理解语意并做出操作。

文章插图
（2）信息的呈现符合用户眼动规律，操作轨迹越短越好
可运用古腾堡图表法Diagonal Balance，它由14世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律，左上角是视觉第一落点区，右下角是视觉最终落点区，右上角和左下角都是一个视觉落盲点，大多数情况容易被忽略。[9]
四、用超多案例，帮你掌握交互设计心理学的古腾堡原则在平时的设计过程当中，你是否有这样的疑惑？
在进行信息排布时，可根据用户习惯性的眼动规律，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。

文章插图

文章插图
可能存在的障碍：百忙之中，应变能力下降，容易发生误操作的情况。