第三篇设计规范—iOS篇（页面元素）

在B612上发芽

Beijing/UX designer/6 years ago /2033浏览

版权

第三篇设计规范—iOS篇（页面元素）

在B612上发芽

目前iOS端字体、元素间距的相关总结

一、关于文字

文字是我们界面中信息呈现的重要元素，对用户的信息识别、阅读体验起着至关重要的作用，所以我们单独把字体提出来研究一下，在设计时我们会碰到诸如正文字体是多大呀？在PS/Sketch上设计时字体挺大的，怎么在手机上这么小？某系统官网规范字体感觉太小，可以用自己设计的字体规范吗等等问题, 抛开文案内容不讲，其实，界面中字体的展示，官网规范是给我们设计一条参照线，是成熟的、经过考验的可用方案，但有些规范是多年未更新的、不符合你的设计需求的，在这种情况下如果我们有更好的方案，自然可以用自己的方案，在不重新创造轮子的同时不断突破创新。

设计趋势是动态变化的、是有规律可循的，学习的过程是模仿-提取-归纳-总结-转化为自己的东西的一个过程，当然你学习的对象需是一个成熟的、被认可的、值得耗费时间的对象，现在我们通过微信、支付宝、钉钉、微博、网易云等软件入手开始总结啦！

首先我们来了解一下字体的一些属性，字体、字号不需要解释了，我们来看下面几个概念

了解了上面概念，我们进入今天的主题

1、iOS常用字体

苹果产品的字体也是跟着趋势不断的改进、更换，如果想更精确的掌握更换的信息，要留意系统发布说明

2、常用的字号、字重、字间距研究

下面我们通过对比一些用户量比较多、设计者比较成熟的APP，来总结字号、字重、字间距的规律（使用对比字体为苹方）

总结的过程繁杂且漫长，每个应用所用的字体属性都有其特点，但是，规律能看出来吧，每个模块字号、间距、粗细等都在一定的范围内波动，下面我们总结一下设计界面时那些通用模块儿中的字体规律，设计时就有个底了。

在总结过程中如果你觉得某个应用的文字格外合心意，直接参照就行了，下面是完整的总结规范，你也可以在这些个范围内不断测试、反复斟酌，写出出适合你的字体规范

3、行高

行高是在折行文字或段落中遇到属性项，行高是由文字大小来决定的，行高过高过低都会造成内容阅读的困扰和界面美观性的损失，怎么设置合适的行高那？我们可以通过经验直观判断行高，如标题文字大，行高就不可以太高，太稀松文字的强调行就不强了，正文文字小，这时行高要适当大一点才能增加可读性等等，当然，行高也有理性化的规定，字号x倍数=行高，这个倍数一般采用1.5倍，但是你一股脑的采用这个值，效果不一定好，所以我们来总结一下常用应用中行高的范围，以作参考

二、间距

APP设计中，元素为肉、布局为骨，骨相皮相俱佳则为上，间距作为支撑布局的一大项，控制的好能打造层次、阐述元素之间的联系、让页面看着舒服，控制不好，内容可读性变差、整体用户体验变差，造成一种“虽说不出有什么问题，但就是觉得怪怪的”的视觉反应。

1、边距

边距即第一篇提过的距屏幕边距，页面左右两边留这个间距一是为了视觉引导，二是为了避开遮光条，远离边缘防止用户出现操作无效等事故，在第一篇中我们有写在二倍图中边距为32px，现在我们来看一下除了这个推荐值，常用应用采用了哪些数值

我们发现频繁出现的还是32px这个值，也有16px、26px、30px这些自由的取值，取值需为偶数，这样转化为不同倍率的时候就不会出现小数。

图片与屏幕之间保留一定的边距能更好的引导用户向下阅读，用户关注的方向是整个页面的流向走势，边距越大，这种引导越明显，如下面站酷截图，更大的边距突出中间的多个图文项，留白突出图文内容的同时更多的向用户强调“向下滑动，还有更多”。

但是当图片与屏幕边距为0的时候，用户的注意力更多的集中在图片上，如腾讯视频截图所示，图片将页面进行横向的分割，大面积的图文块儿占据视觉中心，引导用户更多的关注单个图文项。

页面中的边距不一定是绝对统一，有时候页面与页面之间、模块与模块之间也会有所不同，不同的改变带着不同的目的性，爱彼迎中的“推荐搜索”模块通过右边不留边距的手法告知用户这一栏目是可以滑动的，右边有更多内容。支付宝页面边距被中间活动宣传banner截断，突然的无边距设计则会将用户注意力更多的吸引到活动上面。

在设计过程中，制定统一视觉效果后，我们就需要考虑每个元素、每个模块的目标是什么？想要达到什么样的目的？深入思考，灵活的做相应的改变。

2、元素间距

我们将元素间距分为块儿与块儿之间、块内间距来探索

2.1、块与块之间的间距

块与块之间的间距通常用于分割平级元素，如内容区块、列表栏目中常用间距和分割线来分割元素，增加元素的疏离感，平级元素间间距相等，父子级之间间距略小，间距值常以16px、20px为主。

2.2、块内间距

块内间距即元素与元素之间的间距，图与文、图与图、主标题与副标题等通过间距来打造层次，展示元素之间的亲密性，将相关元素减少间距，归组在一起。如果多个元素相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为用户提供清晰的结构。

icon与文字间距

icon与文字结合的方式是界面功能入口的主要展示方式，通常icon需要底部文字解释，二者的间距不会很大，保持到16px~22px这个范围内即可。

左图右文型/左文右图型

图文结合是最常用的一种信息展示方式，左图右文型/左文右图型通常是图与多行多层次文字的结合，文字信息的比重比较大，此时的间距不止是调节层次与亲疏，还要通过合适的留白处理信息混乱的问题。文字区域与图片保持水平居中对齐，大量文字的区域则可与图片等高布局，图片与文字区域的间距保持在16px~24px，文字之间则根据亲密性原则设置间距，常用的有10px、12px、14px、16px、24px。