静电说:新手在学习UI设计过程中,通常会陷入到一个误区中,就是把UI设计当算术题来做。比如经常会有同学问:UI界面中的字号最小是多少?UI界面模块中的间距有没有什么规则可以遵循?是不是一定要4的倍数?UI界面左右留白多少才合适,有规范吗?按钮的圆角多少才合适?


先说结论:UI设计过程中或多或少会有一些经验数值,但经验数值仅仅是经验数值,并不是公式,不能生搬硬套。而大多数情况下,则没有“经验值”一说。设计不仅仅是理性的,也是感性的。我们要从两个方面入手来进行学习。下面来解答几个常见问题:


Q:字号一定要是2的倍数吗?

A:关于2的倍数这一问题,大部分情况下是一种约定俗成的结论。在使用PS做设计的时代,由于我们做的UI设计稿都是2倍图或者3倍图,所以使用2的倍数会更方便于开发工程师换算,比如你在2倍图下设定一个字体大小为24px,开发工程师在开发过程中要进行换算,除以2,得到的数值就是12pt。最终,这个12pt就写在了代码里。但是如果你设置为23pt,不好意思,除起来就有小数点了,最终为11.5pt。为了避免出现小数点,所以最终就约定了字号最好为2的倍数更方便一点。(大家想想,在三倍图下,2的倍数会怎样?)


但是随着sketch等矢量UI工具的普及,大家普遍开始使用1倍图来进行设计,那么此时,不管你设置多大的字号,开发工程师最终设置的代码也是一样的。字体为12px,那么开发就写12pt,整个换算是1:1进行的。所以此时你不管用任何数值来进行字号设置,都没有问题。(典型的例子为微信:微信朋友圈的删除按钮为13pt,并不是偶数。)


勿套“公式”!谈谈UI设计中的字号,间距,大小等规律-LMLPHP


其实我们仔细观察会发现,在UI设计过程中,用多少号字号的都有,不少应用从9pt,11pt,12pt,13pt一直往后都会用到。无非是看设计师有没有这个心理洁癖一定要用偶数了。


一方面是约定俗成,一方面是实际情况,大家要根据实际情况来使用字号,切不可生搬硬套公式。


Q:图形尺寸最好为偶数且为整数吗?

A:是的。这就涉及到一个问题,就是对齐了。 比如你设置一个直径为105的正圆形,然后在里边嵌套一个60的圆,此时你发现这两个圆无法居中对齐了(在像素进度为1的情况下)。如下图。

勿套“公式”!谈谈UI设计中的字号,间距,大小等规律-LMLPHP


此种情况下,建议大家用偶数尺寸,会更好的进行对齐操作。当然,如果你对小数点不敏感的话,也可以尝试有小数点的数值,最终也会对齐。但是,如果此时你要导出为位图的话,那么位图边缘可能就有点模糊,不太锐利了。所以,涉及到图标等内容的时候,偶数是一个不错的选择。


Q:UI中的字体要加字间距吗?

A:没有特别的情况下,强烈不建议在字体中加入字间距属性,一般情况下保持默认即可。特别是列表等等区域,加入过大的字间距会导致模块比较散,不太美观。如下图,右侧为加入字间距的模块,左侧为未加入行间距和字间距的模块。右侧明显过散。


勿套“公式”!谈谈UI设计中的字号,间距,大小等规律-LMLPHP


Q:成段文本要特别设置行间距吗?

A:无特殊情况下,不建议。一般保持系统默认即可。这里有个经验数值,行间距从1.2到2倍都是比较理想的。但是要根据设计风格具体处理。过高的行间距同样会让模块难以辨认。


Q:模块之间一般要用4的倍数吗?

A:嗯?并没有听说过这些规则。模块之间的间距要根据具体设计风格来定,当然,如果你用偶数的话,做算式题的时候会更好对齐一些。特别是横向排列的模块。但是纵向排列的模块则没有这个要求。如何解决?请参照本文下方的设计心理学知识。


Q:手机界面左右留白有规定值吗?

A:没有。这个只是大家的一个经验值,一般来说,页面左右留出一定间距会让页面有呼吸感,不至于太挤。这个经验值,我个人的经验值,最小留白为8-10,最大随意,跟随设计风格走。如下图所示,虾米音乐强调个性,留白偏大,达到了20pt,而淘宝内容更丰富,强调内容呈现,所以只有9pt。


勿套“公式”!谈谈UI设计中的字号,间距,大小等规律-LMLPHP


栅格化布局是万能药吗?


其实很多同学问到的问题都源于之前的一个理论,那就是栅格化布局。所谓栅格化布局,其实是一种设计方法,将页面等分为N个不同的横竖模块,每个模块占用N个单位,从而让设计更加规整。


勿套“公式”!谈谈UI设计中的字号,间距,大小等规律-LMLPHP

但是这种栅格化布局在比较窄的移动端上有点捉襟见肘(之前主要是为网页设计而准备的),很多时候严格按照栅格化布局做出来的设计也存在诸多的视觉问题。静电之前曾翻译过一篇在移动端UI上使用栅格化设计的文章,最终作者做出的设计已经无法自圆其说。所以,对于这种设计方式,我们可以选择在某些情况下使用即可,没有必要完全照搬。



感性VS理性,正确选择


那么,又回到了这个问题。对于初学者,真的没有规律可循了吗?真的没有所谓的“公式”,让我们去死记硬背吗?真的没。


请记住,设计是感性和理性相交融的产物,特别是对于UI设计而言。除了上文说的经验值,我们不妨多从设计心理学角度来去理解设计,多看多做。切勿完全照搬公式,这样才能更快的成长。我自己的做法,先感性再理性,设计前期和设计中期感性,整理设计规范的时候理性。注意让头脑在两种模式之间切换。如果前期过分理性,一切套公式,那么你的设计稿可能就没有视觉张力和创意。同理,如果全程感性,后期不进行理性整理,那么设计就缺少规范可言。随意,规范,样式,和元件等内容,我一般会放在交付设计稿之前进行。


转回文章开头有同学问到的问题,模块之间的间距有多少合适呢?我认为可以用设计心理学中的格式塔原理-邻近性原理来考量:接近的东西会被看成是一组,如下图:


勿套“公式”!谈谈UI设计中的字号,间距,大小等规律-LMLPHP



有想回看设计心理学读书会的同学

可以直接在公众号聊天窗口回复关键词

读书

查看上次的公开课视频内容


勿套“公式”!谈谈UI设计中的字号,间距,大小等规律-LMLPHP




本文分享自微信公众号 - 静Design(JingDesign91)。
如有侵权,请联系 [email protected] 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

03-31 22:33