B端页面设计

视觉关联:

当人们全身心投入到某个活动中时,会对周边干扰视而不见,这种状态被称为“流”。宜家的动线设计很好的营造了这种状态,让消费者完全沉浸于商品浏览,并且尽量不去打断这种行为流。
任何一个界面呈现给用户的时候,用户都会下意识的去判断界面上什么信息是最重要的,接着会去关注这些信息都有什么关联;因此,除了按照逻辑去组织信息之外,还应该合理的去呈现信息的视觉层级关系。

视觉层级关系有几种常见的区分方式:

  • 强调:使用基本视觉元素(颜色、形状、大小等)区分层级。
  • 亲密性:位置接近的元素通常是有关系的,而且位置越近,关系越强。
  • 图胜于言:视觉符号和对象关联,例如:齿轮或扳手=设置,垃圾桶=删除。
  • 浏览顺序:根据浏览顺序,从左到右(部分地区)或从上到下信息重要程度依次减弱

页面信息的视觉关联性

如何验证界面元素的视觉关联性是否合理呢?

眯眼测试:

《About Face 4:交互设计精髓》 中提到了一个很有意思的测试,为了确保界面视觉信息有效的拉开层次关系,图形设计师经常会用到一个方法“眯眼测试”(squint test)——闭上一只眼睛,眯着另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成组,哪些元素看上去零散。从多个角度去观察,总能够发现之前没有注意到的布局和构成问题。

posted @ 2023-08-09 10:21  FromZeroToOne  阅读(20)  评论(0编辑  收藏  举报