美文网首页
B4.6-Surface 表现层

B4.6-Surface 表现层

作者: 罗尹伊 | 来源:发表于2016-09-08 16:46 被阅读8次

恰当的视觉设计,用户眼动轨迹应该【遵循一条流畅的路径】、【不过度干扰的前提下为用户提供有效的引导】

想要精细的视线路径用眼动仪 Eyetracking 如果只需要粗略的结果可以直接问用户,或者自己走到远处看界面,模糊细节 

对比 Contrast

把用户的注意力吸引到界面中的关键部分

帮助用户理解页面导航元素之间的关系

传达信息设计概念组群的主要手段

【引导用户在页面上的视线】/【将注意力吸引到几个关键元素上】

完全没有对比,导致没有一个元素突出,会很单调。

但是过度地对比(突出元素太多)会导致视觉上的混乱。

大概突出3/10以内的内容是恰当的。

一致性 Uniformity

一致性让你能更有效地传达信息,而不会导致用户迷惑或焦虑。

将视觉元素的大小保持一致的尺寸,可以使你在需要的时候把它们更容易地重新组合成一个新的设计。

Grid-based layout 通过母版确保一致性,每一个元素在母版网格上的位置应该是一致的

内部一致性:同一款产品内部的设计风格和规范应当尽量保持一致。

即使大多数的设计元素被相对独立地设计出来,它们最终还是要放到一起的。

外部一致性:同一企业的不同产品之间设计风格与规范应当尽量一致、有连续性。

统一的品牌识别系统Visual Identity

配色方案 Color Palette

色彩能够最有效地向外界传递品牌识别。

核心的品牌色彩通常是一个更广泛的配色方案 

通常,更亮或更醒目的色彩可以用于设计你的前景色,用于你希望得到更多注意的元素中。

更暗淡的色彩用于哪些不需要跳出页面的背景元素中。

非常相近的颜色会增加用户的认知负载。


排版 Typography

恰当使用字体和字型对品牌识别有裨益。

苹果电脑和大众汽车发明了特殊字型专供自己使用。

但面对华丽字体组成的大段文本,我们的眼睛很快就会疲倦。

对于标题或标签使用稍具个性的字体是恰当的。

但需要控制字体、字型的数量,避免造成混乱。

最后,不要使用非常相似又不完全一样的风格,风格之间要有足够的对比。

视觉模型 Visual Mock-up /Design Comp

从已选定的组件中建立起来的、一个最终的可视化产品。

设计模型应该能够显示出线框图的核心概念(信息设计),即使它没有精确地按照线框图实现。


Style Guide  视觉设计指南

全局标准通常放在第一部分(架构母版 配色方案 字体标准 Logo应用等)

确定了视觉的每一个方面,所有元素。

包括某一个模块/功能的具体标准

作用:提供决策信息+确保设计一致性

相关文章

  • B4.6-Surface 表现层

    恰当的视觉设计,用户眼动轨迹应该【遵循一条流畅的路径】、【不过度干扰的前提下为用户提供有效的引导】 想要精细的视线...

  • 表现层定义

    使用多种感知方式,包括听觉、视觉,保证对比和一致性,比如视觉元素的大小和颜色,做好配色和排版。

  • 11.更新和删除购物车

    表现层 表现层的实现 观察结果

  • SpringMVC

    SpringMVC是一个基于三层处理架构的表现层处理框架。三层架构是指:表现层、业务层、数据访问层。表现层对应于业...

  • 03登录

    将Token写入Cookie服务层做不到,只能由表现层来做. 服务层 表现层

  • JAVA企业级开发技术

    传统框架 SpringMVC(表现层) Struts2(表现层) Mybatis(数据层) Hibernate(数...

  • Java后台-Spring 概述-2020-12-08

    三层架构 A 表现层 web层 MVC是表现层的一个设计模型 B 业务层 service层 C 持久层...

  • 表现层——感知设计

    在表现层我们要解决和弥补“框架层的逻辑排布”的感知呈现问题。 合理设计感知 用户每次与产品的亲密接触,并且对产品留...

  • Android MVP 实战经验

    一、表现层模式架构的演变 三层架构通常是指表现层(Presentation Layer)、业务逻辑层(Busine...

  • Binder 的一些小 Tips

    Java 层的 IBinder 在 native 层的表现:Binder 表现为 JavaBBinder,Bind...

网友评论

      本文标题:B4.6-Surface 表现层

      本文链接:https://www.haomeiwen.com/subject/tyirettx.html