虽然交互设计不是B端产品设计的重点,但产品经理依然有必要学习相关知识,并且训练自己具备基本的审美,俗话说,技多不压身,比如今天聊的视觉设计的CRAP原则,不仅适用于交互设计,更适用于编写汇报用的ppt,学习后可谓一石二鸟,完美!
视觉设计在交互设计中非常重要,简单的排版技巧、配色技巧的合理运用,会让系统呈现出不同的效果,甚至会影响用户的操作行为。学习并训练视觉设计能力,可以让产品设计工作更加专业。同样,很多时候产品经理在没有设计师支持的情况下,需要亲自完成一些基本的视觉设计工作。
请注意,掌握视觉设计的基本能力,具备基本的“美感”对于产品经理非常重要,通常情况下,研发工程师是不会太在意排版布局等问题,如果产品经理对此又没有基本的审美判断,在没有设计师协助的情况下(实际上对于B端产品大多数情况下都没有设计师资源支持),做出的线框图以及最终的前端界面效果,将会是一场“灾难”!
最著名的视觉设计原则是美国设计大师Robin Williams在《写给大家看的设计书》(The NonDesigner’s Design Book)一书中提出的CRAP原则,即Contrast(对比)、Repetition(重复)、Alignment(对齐)和Proximity(亲密性)。CRAP原则非常有趣、简单并且实用,下面通过名片排版的案例来帮助大家理解CRAP原则。
亲密性(Proximity)
亲密性是指将相同类别的元素放在一起,这样容易让人扫一眼就能对信息进行分组。
如下图所示,左边的名片,元素散落在四角,阅读者需要用眼睛来回扫描浏览,非常不方便,并且信息的呈现非常散乱,让人抓不住重点。右边的名片对信息做了分类呈现,将姓名和职位聚拢在一起,将联系方式聚合在一起,简单位置调整,让整个结构看起来更加清晰,阅读起来让人感到更加轻松。
“亲密性”的示例
对齐(Alignment)
对齐是指将视觉元素整齐排列,这样会让元素呈现出某种视觉联系,让人阅读起来感觉更加顺畅。
如下图所示,左边的名片采用了亲密性原则,元素整体位于名片右侧,但是元素采用了居中对齐的方式,这让画面有种不和谐感。我们将元素全部右对齐,而且所有元素都位于名片右侧,看起来井井有条。虽然画面感觉有点重心不稳,但颇有俏皮之感。
“对齐”的示例
重复(Repetition)
重复是指让某些视觉要素在作品中重复出现,要素可以是颜色、形状、字体等,通过重复的形式,可以让阅读者根据重复的特点将信息快速分组,或理解不同信息在某些方面的同质性。重复可以增强一致性,让作品在视觉上更加统一、完备。
如下图所示,左侧名片,当阅读者从上往下扫视完名片内容后,很可能继续漫无目的的随意扫视内容。如果我们将地址的最后一行字体加粗,字号加大,从视觉上会和上方的姓名形成遥相呼应的感觉,目光向下扫视到最后一行后会不经意的跳回格式相似的姓名部分,名片作为一个整体,让阅读者感受到了作品的统一。
“重复”的示例
对比(Contrast)
对齐是指要避免页面的元素过于相似,要善于调整元素的大小、颜色、形状、位置等,让页面看起来截然不同,让重点突出且引人注目。
如下图,左侧的名片字号相同,没有重点,看起来索然无味,无法调动阅读者的积极性。我们将名片最重要的元素——姓名,字号加大字体加粗,这个简单的调整,让这张名片第一眼看上去更有趣,更生动,更吸引人,重点突出明确,这就是对比带来的效果。
“对比”的示例
以上只是通过名片设计非常浅显的介绍了CRAP原则,可以发现,仅仅最初级、最简单的采用这些原则,就会让设计看上去大不相同。对于界面设计来讲,这些原则可以直接有效的改善视觉效果,不论是按钮位置的编排,还是控件、文字大小的设计,如果将CRAP原则运用得当,肯定会得到满意的设计效果。
虽然产品经理有设计师可以协助修正、美化界面设计,但所有人都应该具备最基本的审美意识和素养,CRAP原则不仅在交互设计时可以用到,做报告、做海报时都可以用到;不仅在工作中需要用到,生活中也会经常用到。
学习CRAP原则,会让你受用终生。
加入社群和上千名B端小伙伴交流
我创建了B端产品经理交流的若干群,包括地区群(北上广深、各个省份)、专业群(CRM、ERP、电商、支付清结算、产业互联网等)。
联系客服