视觉设计中的理论原则与应用-版式篇

界面设计中的版式设计是视觉设计的核心,也是视觉设计的基础。界面板式作为颜色的框架支撑,在设计中必然占据核心地位。

该部分学习笔记为第一大块内容,版式。笔记摘自《规律与逻辑》。

界面设计操作顺序:

内容呈现->应用场景与信息层次->版式设计->色彩与细节的处理

统一与变化

考虑到用户会长时间停留在某个界面,因此统一列表样式是有必要的。然而单一的列表也会让用户感到疲劳。可以通过版式设计让列表呈现不同的模块变化。

统一是主导,变化是从属。遵循统一规范的同时,再进行版式上的变化,会让界面看起来整体感更强,又不会让人产生烦闷的感觉。需要权衡视觉疲劳感和交互效率之间的平衡点,在设计时这个需要好好考虑。

界面图标的设计同样需要遵循这一设计原则,在设计成套的图标时,在统一配色、线条粗细和长短的前提下,外形上可以不受约束地进行美化。

对比与调和

对比是为了强调差异化,让界面信息更有主次之分。调和是为了寻找共同点,调节界面的舒适感。

针对大小对比,大的方面有板块之间的面积对比,小的方面有字体之间的字号对比。字号可以代表层级,如主题字信息层级最大,简介文字信息层级次之,话题名称以及评论点赞等信息层级最小。适当的对比调和可以让信息清晰可见,又避免了过多无意义的对比使得界面信息杂乱。

对称与平衡

界面设计中的版式对称与平衡是一个统一体,常表现为既对称又平衡。从视觉上讲叫做寻求人心理上的稳定感。

说实话,我读这一块的时候,感觉什么是对称什么是平衡在主观上讲可能会差异很大,没有办法想到一个简单的评判标准,只能说是结合自己的审美来考虑,简单来讲就是有点玄学。

节奏与韵律

最基本的要求:通过版式设计给予用户明确的阅读顺序引导,并且要做到有始有终。在这里,有始有终是一种态度,即使是单页面也要给用户明确的视觉起点和视觉终点,而针对长图或多版面的设计更应该如此。

用户的一般视觉浏览习惯为从左到右,从上到下,由题目到正文。无论是使用电脑端还是手机端,这个阅读顺序都不例外。在界面设计中,如果在标题、图片和栏目上都能有所变化,在视觉上就能形成跳跃式的点线面效果,这样用户在浏览的时候就会有一种节奏感。

对于以图片展示信息为主的页面,比如电商,用户一般通过标题判断不出是否需要此商品,更多的是基于对此商品图片的判断,所以根据视觉浏览习惯,建议将图片放在左侧,而描述信息放在右侧。目前的主流电商平台商品页都是这么做的。而对于新闻类页面,则不再是图片为主,而是标题为主,此时可以将图片放在右侧或者下方,将重点留给新闻的标题。

好的版式是界面的导游,优秀的设计不需要明显的一二三四来引导用户先看什么再看什么,其本身的设计效果就能决定用户的视觉走向。扩展一下上方的用户视觉浏览习惯,其实还有从有彩色到无彩色,从饱和度高到饱和度低,从大元素到小元素,从复杂元素到简单元素,从衬线字体到无衬线字体,从特殊字体到通常字体从留白较多到留白较少等等。同时,在白色背景下,颜色越深视觉层级越高,在黑色背景下,颜色越浅视觉层级越高。

亲密性原则

在同一个版面中,关联性较强的元素一定要相邻,关联性不是很强的元素一定要明显地隔开。一般情况下,相邻的两个事物大多存在着一定联系。在设计中,应该把有关联的内容放在一起,没有关联的信息明显隔开,界面中的信息就会让人感到清晰直观,并且识别度高。

比如图片和文字堆叠显示的列表,我们只需要将同一单元下的图片和文字设定小间距,不同单元之间设定大间距,这样不需要人为划分分割线,用户也能知道什么文字对应的什么图片。而如果文字和图片的间距完全一致,用户在向下滑动浏览时就会感到迷惑。

相似性原则

如果一个版面的某几个元素在外形上是相似的,那么用户会认为这几个元素是有关联的。所以在界面设计中,给不同布局的元素相似的视觉特征,会激发用户对界面分组和联结的本能。相似的视觉特征主要表现在颜色,形状,大小,方向等元素上。

比如在设计计算器页面时,不应该把数字键和符号键设置为同种颜色,这样用户在使用时会加大误触概率。正确的做法是将数字键设置为一种颜色,符号键设置为另一种颜色,用户就可以很好地进行区分。

卡片/分界线/无框

目前界面设计常用的版式设计风格主要分为三种:卡片、分界线和无框。这三种风格各有各的应用场景。

卡片风格就是把界面中各版块的信息用卡片的形式承载起来,让界面直观清晰。非常适合用在一些列表页里。同时手机端的卡片由于与现实卡片大小相似,也可以让用户联想到现实中的卡片,所以也可以承载一些现实生活中的信息。卡片风格最适合的场景:单个界面需要获取较多信息时

分界线风格是最传统的分割方式,一般出现在各信息段落或板块之间,分界线的使用可以让界面更有规律。使用分界线风格的最大好处在于,达到了信息区分的目的,又不损失界面的整体性

无框风格是近年来兴起的一种极简设计风格。但无框风格设计难度较大,如果使用不当反而会导致界面信息杂乱。在包含图片较多的界面中可以采用无框风格,其实也是一种伪分界线风格,因为图片本身就可以起到分割线的作用,所以就没有必要再添加框线元素了。

留白

留白在设计中是不可或缺的元素。留白的真正意义是留出空间,并不一定非得要留出白色,也可以是其他颜色。只要是没有进行过度装饰的区域都可以称作留白区域。

需要注意留白需规范合适。信息卡片的上下左右间距最好相等,卡片内信息之间的距离也避免过近,不同的模块之间需要留出足够的间距,可以让界面看起来更加整洁透气,空间感更强。

利用留白还可以强调重点,制造信息的差异化,这也是界面设计中常用的一种技巧。减少多余的元素和颜色,多一些留白,可以将用户的视线快速引领到需要重点表达的信息上,大面积的留白可以突出重点信息,或者突出层次感。信息周围留白越多,便意味着该信息越容易成为视觉焦点。

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信