网页设计的间距 第1篇
字体设计师，为了能满足文字行间距的合理展示，通常会给字体设定一定的行高。
行高就是在设计软件中选中文字后，上下外边框高度，字体的行高没有标准，不同的字体一般默认行高也不一样。
也就是因为字体的行高，让UI设计师对文字与其他元素的间距设定，有不同的见解。
上图都是30px的间距，但因为字体行高不同，A、B两个方案的实际视觉间距不同。
认同A方案合理的设计师，理由是文字最好设置一定的行高，不然折行时视觉上没有行间距，很拥挤，不得不再设置行高，最终30px的间距还是有间隙。
认同B方案的设计师，理由是UI设计本身对几个像素的差距就很敏感，视觉上做不到统一，就是不合理。
两者的表述都对，但也确实都有一定的弊端，下面给大家介绍两个解决方案。
可以确定的是，为了满足文字折行后的阅读性体验，最好带有一定的行高，这样也会利于与开发对接。
网页设计的间距 第2篇
在有段落的文案中，很多设计师为了方便，直接给一个回车键的段落间距，这样是万万不可取的。
一个回车键的间距，就是一行字的行高，通常这个间距都比较大，就算设计风格需要这么大的间距，那一定也要手动去设置段落。
段落数值的设定，一般情况要大于文字行高的一半，比如文字行高为42，那段落最好大于21，这样段落间距加上文字行高，整体就是≥倍。
为什么是≥倍？原因是文字的行间距，一般大于倍视觉上是比较舒适，例如字号是30，那行高设置为45，形成倍的间距。
网页设计的间距 第3篇
第二种方式就是精益求精，不考虑间距的栅格系统原则，算出字号与行高的间隙，间距上准确减去，保证没有一丁点的误差。
我找了一下这样的产品，发现iOS端的滴滴APP中，有个模块是这样的设计理念。
上图案例中，字号36px，行高44px，文字上下的间隙就是4px。
所以设置距离26px，加上行高间隙正好是30px，得到统一的间距效果。
这种方式有一个小小的弊端，就是开发感受不到间距的规则，最终设计验收时可能会耗费更多的时间。
网页设计的间距 第4篇
最后做个总结：
1.关于文字的间距，要考虑文字的行高，尽可能保持视觉统一性；
设计稿，设计软件中默认的文字行高，与开发软件中的默认行高不一致，最好修复行高，与开发保持一致；
3.文字段落不要用回车键去定义，要用段落参数，段落间距通常要大于文字行高倍；
4.多行文字出现这种参差不齐的情况，不要设置为左右水平对齐；
5.一般字号越大，字与其他元素间距也需要越大；
设计要结合产品定位等，制定最小栅格基数，然后任何间距要以最小栅格基数的倍数呈现；
7.一个产品中，通常设置6个左右的间距数值，能满足大多数设计的场景；
8.善于使用亲密关系、留白理念、统一性等设计原则，设计前理解需求目标。
网页设计的间距 第5篇
字体行高的间隙有了解决方法，接下来是与开发的对接，这也是最关键的一个环节，设计的再好，最终不能很好的落地，也是白搭。
UI设计师在设计验收iOS端时，可能会遇到这样的问题，设计与开发都用了同样的间距参数，但最终呈现的间距还是不一样。
原因就是，同样的苹方字体，iOS端开发的默认字体行高，与设计软件中的字体默认行高不一样。
比如在Sketch软件中42号字的苹方字体默认行高是59，但是iOS开发软件中默认是52。
如果开发不手动调整字的行高，就会出现与设计的偏差。
根据我的调研，iOS开发工程师，若不是特殊情况，基本不会去改默认行高参数。
下面我们列举一下，设计常用苹方字号的默认行高，与iOS开发默认行高的数值对比，从中找一下规律。
上图中可以得出，字号越大，设计默认行高与iOS开发默认行高差距越大。
所以设计上最好把默认行高改成与开发一样的默认行高，这样才能保障，开发不手动调整行高下，是一致的。
iOS开发字号默认行高有一定的规律，随着字号的增加，行高会在字号基础上+4、+6、+8、+10以偶数递增。
虽有规律但也不容易形成记忆，推荐一个公式。
用字号除10后乘以2，再加上字号，就是iOS开发的默认行高，公式如下：
有公式可能还不够便捷，再给大家推荐一款Sketch行高修复插件，Auto Fix iOS Text Line Height for Mac 。
这款插件是专门针对iOS字体行高修复，使其与开发默认行高保持一致。（公众号后台回复666可获取）
网页设计的间距 第6篇
间距是UI设计中建立信息层级、提升阅读体验、表达元素之间的关系、表现重要信息的重要方式。
定义合理的间距其实非常有学问，打开京东、淘宝你会发现元素之间的间距非常紧凑，打开爱彼迎、蔚来又会发现元素之间较为宽松，这是为什么？
其实就是他们的设计语言不同，致使展示出的形态也就各异，而间距就是表现设计语言的其中一种方式。
在UI设计中，间距的设定一般会选择一个最小栅格基数，如4、5、6、8等数值，之后页面中，所有的间距都要以，最小栅格基数的倍数呈现。
谷歌推出的设计语言 Material Design 推荐栅格系统的最小基数是8dp，一切间距、尺寸都应该是8dp的倍数。
淘宝的设计，据我所知用的是5的基数，爱彼迎用的是8的基数，从这点来看，基本可以得出一个结论，使用越小的数值基数，设计呈现通常就会越紧凑。
一个最小栅格基数的倍数值有很多，但其实通常有6个左右常用间距，就能满足绝大多数的场景。
我目前负责的产品最小栅格基数是6，设计上常用间距大概有6个，完全能够满足大多数设计场景所需。
这些间距其实并不用刻意去选择，当你使用最小栅格倍数值时间长了，就能自然得出几个常用的间距，字号的选择使用基本也适用这个逻辑。
另外，一个产品中模块众多，难免会出现一些特殊情况，所以肯定不能限定死只可以用那几个间距。
除了上图中列举的常用间距之外，12、36、90、120等一些间距数值也会用到，只是用的频率不会很高。
网页设计的间距 第7篇
首先说一下UI设计中，间距设定的一个理念，间距设定一般要设定一个最小栅格基数，如4、5、6、8为间距设定的起始数值。
然后页面中，接下来所有的间距设定，都得是这个数值的倍数。（这点后面会详细讲解）
在一个带有文字的设计组件中，若设计思路上要呈现视觉统一的间距，那可以算出字号与行高的间隙，然后减去相对应的栅格数值，使其视觉上接近统一的间距。
下图所示，设计思路上想呈现一个30px的统一间距，那就可以减去一个最小栅格数值。
若最小栅格数值是6px，最终给出的间距就是24px，视觉距离呈现的就是接近30px的距离。
这种方式也是我一直以来用的方法，好处就是没有打破间距设定的原则。
设计的间距与开发看到的间距，都是有规律的栅格系统间距。
唯一有点不完美的地方就是，实际距离有时还会有一点小误差，但其实在视觉上也完全可以忽略掉了。
网页设计的间距 第8篇
垂直高度是指元素在垂直方向上所占的空间大小，包括元素本身的高度和元素与相邻元素的间距。
在设置垂直高度时，应注意以下几点：
1. 遵循页面整体风格和设计需求，确保布局合理、美观。
2. 根据元素内容和用途，选择合适的高度和间距。
3. 使用CSS样式表来设置高度和间距，避免出现样式冲突或错误。
4. 在不同设备上进行测试，确保页面在各种分辨率和屏幕尺寸下均能正常显示和排版。
总之，在网页设计中，间距和高度的设置是一个重要的环节，它能够直接影响页面的质量和用户体验。需要设计师在设计时仔细考虑和把握，选择合适的间距和高度，才能让页面既美观又易读。
网页设计的间距 第9篇
在网页设计中，间距是非常重要的一部分，可以对页面的美观度和可读性产生很大的影响。常见的间距有以下几种：
1. 外边距（margin）：指元素与相邻元素间的距离，常用于控制元素与页面边缘的距离。
2. 内边距（padding）：指元素内部内容与元素边界之间的距离，常用于控制元素内部布局和样式。
3. 行间距（line-height）：指行间的垂直距离，常用于控制文本的行高和垂直对齐。
4. 字间距（letter-spacing）：指字母与字母之间的距离，常用于控制文本的紧凑度和美观度。
不同的间距应用场景不同，具体应根据设计需求和风格来选择合适的间距。
网页设计的间距 第10篇
手动设置即字号是多少、就将行高设置为多少，确保文字边缘紧贴定界框，在设计过程中调整间距时，无需计算，根据设计工具的智能提示调整即可。
5. 间距值数量设定
在同一APP应用中，根据最小基数定义的间隔值数量不易过多，一般在6个左右就能满足绝大多数的设计场景。例如以8px的基数为8、16、24、32、48、64等，以5px的基数为5、10、15、25、40、60等。
数量过多会导致界面不同元素、模块的间距差异化不够明显，数量太少无法满足多元素、模块使用场景，也会导致间距跨度较大。
6. 明显相邻间距值
设定间距值需遵循一个原则“数值越大、递增的倍数就越大”。当相邻间距值的差异化较小时，用户很难感知到界面中信息之间的逻辑关系，我们需要根据栅格系统中间距值的增大、设置更大的区间值，让相邻间距值之间的视觉差异更加明显。
7. 跳出间距的束缚
当界面中的信息较为密集、间距不足以满足信息的突出程度时，需跳出纯粹的间距规范束缚，换种方式或许更好。例如：给元素添加背景让其聚焦、使用分隔线/色块间隔、调整元素大小等，需知「此消彼长」的道理。
六、结语
如果在处理界面信息层级时，改来改去还是觉得很乱，不防从间距角度出发，或许会有不一样的收获。
虽然在刚开始的时候，规范间距带来的效果甚微，但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现，所有内容统一间距规范，不管是构建一致性界面视觉效果、还是对开发和设计师来说，既能提升用户体验、还能提高团队的工作效率。
间距是否规范使用，决定着界面是否规整、信息传达是否清晰，即便如此，间距也只是解决信息层级方式的其中之一，切不可让其限制设计师的发挥和思考空间。制定设计规范有助于项目的高效运转，间距也好、色彩也罢，设计师依然需要从实际用户场景出发，通过不断的思考和经验总结，打磨出更合理、更符合项目需求的设计规范。
专栏作家
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
网页设计的间距 第11篇
默认行高值会随着字号的变化基于一定的倍数自动增减，需要将此规律或倍数告知开发，开发将此规则植入代码方能最大化还原设计效果。
另外在设计界面时，尤其是多组文字元素的上下间距，需要通过计算（文字边缘到定界框的间距+文字元素间距=实际间距）或手动测量才能达到精准状态，下图为例：