最近因为UI/UE资源迟迟不到位，所以笔者在产品设计的时候，对UI及交互设计上更加用心。利用这篇文章将以往所掌握的交互设计相关知识重新梳理一下。
视觉设计的“CRAP”原则
CPAP原则分为Contrast（对比）、Repetition（重复)、Alignment（对齐）和Proximity（亲密性）。它是有美国著名的视觉设计师 Robin Williams在其著作《写给大家看的设计书》中提出。
Proximity（亲密性）
将相关信息组织在一起，让它们形成一个视觉单元。
可以对比以下图片，如果读者要从第图1里获取CRAP原则的信息，需要眼睛需要上下左右的去移动。让人感觉到非常的凌乱，没有重点。我们通过Proximity（亲密性）原则的调整，将四个原则信息聚合在一起，减少了我们眼睛寻找信息移动的次数，让图片信息结构更加的清晰，阅读起来更加的轻松。
图1
小结：
彼此相关的信息项互相靠近。如果一个页面信息项超过3-5个就要归组合并成信息集。各个信息项直接不要孵出同样大小的空白，除非这个信息项属于一个信息集（例如图2）。
Alignment（对齐）
任何元素不应该随意安放，每个页面上的元素应该与页面上的其他元素建立某种视觉联系，让设计更加有序，也方便用户的浏览，提高用户的阅读体验。
我们看下边两个图，布局位置基本都是一致的。读者可以仔细观察，在图1中四个原则是没有对齐，阅读起来有很大突兀感。图2中四个原则进行了左对齐的，让四个原则建立了视觉联系，形成一体，使得整个画面非常和谐。
图1
图2
小结：
对齐可以使页面统一且条理，不论创建精美的、正式的、有趣的还是严肃的外观，通常都可以利用一种明确的对齐来达到目的。要特别注意元素放在哪里，应当总能在页面上找出与之对齐的元素。尽量少使用集中对齐形式。
Contrast（对比）
在页面上增加对比能吸引人的眼球。
可以比较下面两个图，图2中将“视觉设计的CRAP”原则进行加粗，增加重点范围，让大家先知道在视觉设计上有“CRAP”原则，其次原则的内容是什么，更加一目了然。
图1
图2
小结：
对比的关键思维是避免页面上所有的内容太多相似了，页面中显示的信息项也有重要程度，通过不同的字体，线条哦可以进行有效的视觉对比。有时候正是因为有了对比，读者才会重视。如果想对比意愿更强，建议使用更大的对比效果。
Repetition（重复)
设计的某些方面需要在整个作品中重复。重复元素可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等。读者能看到的任何方面都可以作为重复元素。
下图中我们可以比较一下。对比图1和图2，在图2中我们将“视觉设计的“CRAP”原则”和“Repetition”字体进行了加粗重复，对“Contrast（对比）、Alignment（对齐）Proximity（亲密性）”颜色进行浅化重复。让读者对重复性信息项进行快速分组。同时结合对比原则，突出了图2是解释了在视觉设计的“CRAP”原则里Repetition（重复）原则。
图1
图2
小结：
Repetition(重复)原则是为了增强页面的统一性，其中信息项的颜色，样式，字体，大小，图片等元素都可以进行重复，重复既强调了统一性又标注了重点项、条理性。避免大量重复一个信息项，多注意对比价值。
网友评论