CRAP在界面设计中的应用.docVIP

CRAP在界面设计中的应用 感谢与运营部门合作的同事Nancy Guan给我们提供一些关于设计的建议，我在这基础上做了一些相关的修改，更多的从整体网站上做了一些界面设计的理解。 设计原则 Contrast 对比 Repetition 重复 Alignment 对齐 Proximity 紧凑 设计界比较通用且利于操作的原则CRAP，基于格式塔（Gesault 心理学流派。 Gestalt是德国著名的心理学家，格式塔心理学是西方现代心理学的主要流派之一。格式塔心理学有一条基本原则是组织，组织原则首先是图形和背 景。在一个视野内，有些形象比较突出鲜明，构成了图形；有些形象对图形起了烘托作用，构成了背景，例如烘云托月或万绿丛中一点红。 1、Contrast 对比 原则：让该大的更大，该小的更小。 确定该“大”的区域：也就是你希望浏览者重点关注的元素。 确保各元素之间的对比足够强烈。 右图可以改进的地方： 标题行和描述行的字体的字体太接近，没有行成对比。 背景颜色与文字颜色太接近，没有行成对比。 2、Repetition 重复 原则：重复是为了风格统一。在整体站设计有前要建立起风格统一的设计原则。 1、在同一个网站或是图片中重复重复使用同一个设计元素，??包括： ?字体／字体大小 颜色（同一个网站或是图片中里建议不要超过三种颜色） 空格的个数 2、同一块区域出现太多不同的设计风格，会分散浏览者的注意力，淹没你真正想表达的内容。 比如下图，太多的字体，显得界面凌乱，没有重点。 比如此页slide使用的字体和格式与上页相同。· 3、Alignment 对齐 原则：在界面设计中的元素设计一个隐藏的对齐线，浏览者才会有视觉上的连续性。 不同的图片需对齐。调整同一个广告的所有图片为一个尺寸，这样上传到多媒体广告制作工具时，就可以保证对齐。 ?避免将水平的长方形图片和竖直的长方形图片放在同一个模版里，这两种图片很难对齐。（如右图） 有些模版如“通用模版6”，图片围绕一个中心旋转，虽然不要求图片对齐， 但请避免在这样的模版里使用太小的图片。 水平长方形（左）和竖直长方形（右）很难对齐！ 4、Proximity 紧凑 原则：将关联性强的元素尽量紧凑的放在一起，避免等距离分布。 1、模版关联性强的元素包括： 标题行和描述行 图像和图像的名称 2、 对关联性强的元素应用统一的设计风格，也能让相关元素更紧凑 请复习我们的“重复”原则 . 图片的标题违反了“紧凑”原则！