ui设计移动端字体适配_超全⾯的UI设计规范整理汇总（包含
iPhoneX适配）
写在前⾯
很多新⼈在开始做移动端UI设计的时候，往往对界⾯的⼀些尺⼨规范不是⼗分清楚，很多时候都是凭借⾃⼰的感觉和经验去绘制界⾯，⼼⾥并没有⼀个清晰的概念，导致做出来的页⾯总是不那么尽如⼈意。本⽂整理汇总了⼀些界⾯设计(iOS系统)中常⽤的⼀些尺⼨规范和⽅法，如控件间距、适配、标注、切图等，设计师在设计时并不⼀定要严格遵守，但对这些规范应有所了解，并融会贯通。
⽬录
01.界⾯设计尺⼨及栏⾼度
02.边距和间距
03.内容布局
04.界⾯图⽚设计⽐例
05.建⽴统⼀风格的图标
06.APP版式设计规范
07.界⾯⽂字设计规范
08.设计适配
09.切图规范
10.设计稿标注
正⽂
01.界⾯设计尺⼨及栏⾼度
⽬前主流的iOS设备主要有iPhone SE(4英⼨)、iPhone 6s/7/8(4.7英⼨)、iPhone 6s/7/8 Plus(5.5英⼨)、iPhone X(5.8英⼨)，它们都采⽤了Retina视⽹膜屏幕，其中iPhone 6s/7/8 Plus和iPhone X采⽤的是3倍率的分辨率，其他都是采⽤的2倍率的分辨率，⽆论是栏⾼度还是应⽤图标，设计师提供给开发⼈员的切⽚⼤⼩，前者始终是后者的1.5倍，并分别以@3x和@2x在⽂件名结尾命名，程序再根据不同分辨率⾃动加载@3x或者@2x的切⽚。
通过上⾯的讲解和图⽰我们了解了iPhone不同设备的物理尺⼨，那么他们的像素分辨率⼜是多少呢？也就是说我们⽤Photoshop做设计新建画布应该设置多⼤呢？另外，iOS应⽤中的栏，包括状态栏、导航栏、标签栏、⼯具栏等，它们的⾼度⼜分别是多少呢？(注意：iOS严格规定了各个栏的⾼度，这个是必须遵守的)通过下⾯的表格和图⽰来为你解答上⾯的问题。
注意：在进⾏iphone x设计的时候我们依然可以采⽤熟悉的iphone 7的设计尺⼨作为模板，只是⾼度增加了290px，设计尺⼨为
750*1624(@2x)。注意状态栏的⾼度由原来的40px变成了88px，另外底部要预留68px的主页指⽰器的位置。
02.边距和间距
在移动端页⾯的设计中，页⾯中元素的边距和间距的设计规范是⾮常重要的，⼀个页⾯是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进⾏了解。
全局边距
全局边距是指页⾯内容到屏幕边缘的距离，整个应⽤的界⾯都应该以此来进⾏规范，以达到页⾯整体视觉效果的统⼀。全局边距的设置可以更好的引导⽤户竖向向下阅读。
在实际应⽤中应该根据不同的产品⽓质采⽤不同的边距，让边距成为界⾯的⼀种设计语⾔，常⽤的全局边距有32px、30px、24px、20px 等等，当然除了这些还有更⼤或者更⼩的边距，但上⾯说到的这些是最常⽤的，⽽且有⼀个特点就是数值全是偶数。
以iOS原⽣态页⾯为例，“设置”页⾯和“通⽤”页⾯都是使⽤的30px的边距。
再以和⽀付宝为例，他们的边距分别是20px和24px。
通常左右边距最⼩为20px，这样的距离可以展⽰更多的内容，不建议⽐20还⼩，否则就会使界⾯内容过于拥挤，给⽤户的浏览带来视觉负担。30px是⾮常舒服的距离，是绝⼤多数应⽤的⾸选边距。
还有⼀种是不留边距，通常被应⽤在卡⽚式布局中图⽚通栏显⽰，⽐如站酷APP(当然站酷APP也进⾏了改版，⾸页已经采⽤了不通栏的卡⽚式设计)。这种图⽚通栏显⽰的设置⽅式，更容易让⽤户将注意⼒集中到每个图⽂的内容本⾝，其视觉流在向下浏览时因为没有留⽩的引导被图⽚直接割裂，造成在图⽚上停留更长时间。
卡⽚间距
在移动端页⾯设计中卡⽚式布局是⾮常常见的布局⽅式，⾄于卡⽚和卡⽚之间的距离的设置需要根据界⾯的风格以及卡⽚承载信息的多少来界定，通常最⼩不低于16px，过⼩的间距会造成⽤户的紧张情
绪，使⽤最多的间距是20px、24px、30px、40px，当然间距也不宜过⼤，过⼤的间距会使界⾯变得松散，间距的颜⾊设置可以与分割线⼀致，也可以更浅⼀些。
以iOS(750*1334px)为例，设置页⾯不需要承载太多的信息，因此采⽤了较⼤的70px作为卡⽚间距，有利于减轻⽤户的阅读负担，⽽通知中⼼承载了⼤量的信息，过⼤的间距会让浏览变得不连贯和界⾯视觉松散，因此采⽤了较⼩的16px作为卡⽚的间距。
下⾯来看⼀下的卡⽚间距设置的是多少，以及颜⾊值。
注：卡⽚间距和颜⾊值是直接截图测量和吸取的，可能不⼗分准确
页面设计是什么继续举例，下⾯的两张截图分别是巨划算(卡⽚间距20px)和拼多多(卡⽚间距16px)的⾸页截图，这种电商类的APP因为需要承载⼤量的信息，所以⼀般间距设置的都⽐较⼩。
总结：卡⽚间距的设置是灵活多变的，⼀定要根据产品的⽓质和实际需求去设置，平时也可以多截图测量⼀下各类APP的卡⽚间距都是怎么设置的，看的多了并融会贯通，卡⽚间距设置⾃然会更加合理，更加得⼼应⼿。
内容间距
⼀款APP除了各种栏(状态栏、导航栏、标签栏、⼯具栏)和控件icon就是内容了，内容的布局形式多种多样，这⾥不去探讨内容具体应该如何去布局，我们来说⼀说内容的间距设置问题。
先来介绍⼀下格式塔原则中的⼀个重要的原则就是邻近性，格式塔邻近性原则认为：单个元素之间的相对距离会影响我们感知它是否以及如何组织在⼀起，，互相靠近的元素看起来属于⼀组，⽽那些距离较远的则⾃动划分组外，距离近的关系紧密。来看下图，左图中的圆在⽔平⽅向⽐垂直距离近，那么，我们看到了4排圆点，⽽右图则看成4列。
在UI设计中内容布局时，⼀定要重视邻近性原则的运⽤，⽐如在下⾯这款轻芒阅读APP的主界⾯中，每⼀个应⽤名称都远离其他图标，与对应的图标距离较近，保持亲密的关系，也让⽤户的浏览变得更直观，如果应⽤名称与上下图标距离相同，就分不出它是属于上⾯还是下⾯，从⽽让⽤户产⽣错乱的感觉。
再来看⼀个案例，⽇⽇煮APP，上⾯图⽚与⽂字较近，下⾯图⽚与⽂字较远，所以我们清晰的知道⽂字是属于上⾯的图⽚的。
03.内容布局
在APP的设计中内容的布局形式多种多样，这⾥介绍最常⽤的两种布局形式，列表式布局和卡⽚式布局。
列表式布局
列表式布局⽅式⾮常普遍，随便打开⼀个APP，基本都存在这种布局⽅式，其布局形式的特点在于能够在较⼩的屏幕中显⽰多条信息，⽤户通过上下滑动的⼿势能获得⼤量的信息反馈。⽽列表也是⼀种⾮常容易理解的展⽰形式。
以我们最常⽤的和QQ为例，其“信息”页⾯都是采⽤的列表式布局，在采⽤这种布局形式的时候要注意列表舒适体验的最⼩⾼度是
80px，最⼤的⾼度要视内容的多少⽽定。
继续举例，⾃如(列表⾼度110px)和唯品会(列表⾼度106px)的列表式布局。
卡⽚式布局
形式⾮常灵活。其特点在于，每张卡⽚的内容和形式都可以相互独⽴，互不⼲扰，所以可以在同⼀个页⾯中出现不同的卡⽚承载不同的内容。⽽由于每张卡⽚都是独⽴存在的，其信息量可以相对列表更加丰富。
在使⽤卡⽚式布局的时候要注意卡⽚本⾝⼀般是⽩⾊的，⽽卡⽚之间的间距颜⾊⼀般是浅灰⾊，当然不同产品风格颜⾊可能不⼀样，有些是浅灰⾊偏蓝等。
双栏卡⽚的布局形式，⽐较常见于以图⽚信息为主导的App。例如⼀些商城的商品陈列页⾯。这种形式与卡⽚式类似，但它能在⼀屏⾥显⽰更多的内容，⾄少4张卡⽚。同时，由于分开左右两栏的显⽰，⽤户可以更加⽅便地对⽐左右两栏卡⽚的内容。
04.界⾯图⽚设计⽐例
在UI设计中，对于图⽚的尺⼨和⽐例没有严格的规范，设计师往往凭借经验和感觉设置⼀个看起来不错的尺⼨，但事实上我们是有章可循的。运⽤科学的⼿段设置图⽚的尺⼨，可以获得最优的⽅案，常见的图⽚尺⼨有16:9、4:3、3:2、1:1和1:0.618(黄⾦⽐例)等。
这些⽐例不⽆根据，它们都和图⽚尺⼨有关。16:9 是根据⼈体⼯程学的研究，发现⼈的两只眼睛的视野范围是⼀个长宽⽐例为16:9的长⽅形，4:3 是勾三股四弦五，在摄影中⾮常常见……。
05.建⽴统⼀风格的图标
在应⽤界⾯的设计中，功能图标不是单独的个体，通常是由许多不同的图标构成整个系列，它们贯穿于整个产品应⽤的所有页⾯并向⽤户传递信息。
⼀套APP图标应该具有相同的风格，包括造型规则、圆⾓⼤⼩，线框粗细，图形样式和个性细节等元素都应该具有统⼀的规范。
通过分析以上三组图标可以得出：他们具有统⼀的⾊彩，统⼀的圆⾓⼤⼩，统⼀的线框粗细，那综合起来也就是具有统⼀的风格，给⽤户⾼度统⼀的视觉体验。
06.APP版式设计规范
版式设计⼜叫做版⾯编辑，即在有限的版⾯空间⾥，将版⾯的构成要素如⽂字、图⽚、控件等根据特定的内容进⾏组合排列。⼀个优秀的排版要考虑到⽤户的阅读习惯和设计美感，在UI设计中版⾯设计的原则有哪些呢？
对齐
对齐是贯穿版式设计的最基础，最重要的原则之⼀，它能建⽴起⼀种整齐划⼀的外观，带给⽤户有序⼀致的浏览体验。
对称
对称是宇宙间的设计哲学，是对⽴统⼀规律的本质属性，呈现出⼀种和谐⾃然的美，在应⽤界⾯的设计中，引导页设计、注册登录输⼊框和按钮等⽆⼀不是对称的设计。
分组
物以类聚，⼈以分。分组是将同类别的信息组合在⼀起，直观的呈现在⽤户的⾯前，这样的设计能够减少⽤户的认知负担，在移动端界⾯的设计中最常见的分组⽅式就是卡⽚，为⽤户选择提供专注⽽⼜明确的浏览体验。
07.界⾯⽂字设计规范
⽂字是APP中最核⼼的元素，是产品传达给⽤户的主要内容，所以说⽂字在APP的设计中是⾮常重要的，那么，⽂字的字体如何选择，字号如何设定，是否加粗，颜⾊如何设置？
在⼀款APP中字号范围⼀般在20-36之间(@2x)，当然iOS 11中出现了⼤标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的⼀点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。
关于字体：在iOS 9推出之前设计师普遍采⽤华⽂⿊体、⾕歌思源、冬青等字体进⾏设计，iOS 9推出了苹果⾃⼰的字体——苹⽅！⾃此之后苹⽅字体被⼴泛应⽤于移动端设计中。
关于字体颜⾊和是否加粗：字体的颜⾊设置我们⼀般很少⽤纯⿊⾊，⼀般⽤深灰⾊和浅灰⾊、细体和粗体(注意要⽤字体本⾝的字重，不能⽤PS的加粗功能)来区分重要信息和次要信息，进⾏信息层级的划分。
08.设计适配
iOS主流设备的分辨率分别是640x1136px(@2x)(iPhone SE)、750 x1334px(@2x)(iPhone 6s/7/8)、1242x2208px(@3x) (iPhone 6s/7/8 Plus)、1125x2436px(@3x)／750x1624px(@2x)(iPhone X)。
在设计设计中设计师需要设计⼀套基准设计图来达到适配多个分辨率的⽬的，我们可以选择中间尺⼨750 x1334px作为基准，向下适配640x1136px，向上适配1242x2208px和750x1624px／1125x2436px。
750x1334向下适配640x1136
由于750x1334px和640x1136px两个尺⼨的界⾯都是2倍的像素倍率，因此它们的切⽚⼤⼩是相同的，即系统图标、⽂字和⾼度都⽆需适配，需要适配的是宽度。
为了让⼤家了解适配的原则，我们以⽂字描述和图⽰的⽅式进⾏750x1334px到640x1136px的界⾯推导。
绘制⼀个750x1334px的设计图，这是最常见的⾸页设计图，从上⾄下分别是状态栏、导航栏、⾸焦图、主要⼊⼝、分割、列表。
下⾯开始进⾏适配，上⾯提到了由于750x1334px到640x1136px都是2倍的像素倍率，界⾯的图标、⽂字⼤⼩等都是相同的，所以我们不需要改变图像⼤⼩，只需将画布⼤⼩改成 640x1136px即可，然后再改变横向元素的间距以达到适配的⽬的。
⾸先打开750x1334px的设计稿，执⾏Command+Alt+C(改变画布⼤⼩的快捷键)，⿏标左键单击“定位”的左上⾓的格⼦，设置宽⾼为640和1136，点击“确定”。
改变画布⼤⼩之后，设计稿的右边和下边都被裁切(上⾯左图中半透明蒙版覆盖区域)，画布缩⼩成640x1136px。
上⾯左图裁切到右图适配完成，做了如下调整。
1)导航栏右边的图标向左移动保持和原来的右边距⼀致，标题居中。
2)⾸焦图⾼度除以1.17(750／640=1.17得到)后居中，宽度640px。
3)主要⼊⼝右边的图标向左移动保持和原来的右边距⼀致，各图标的间距等宽。
750x1334向上适配1242x2208
由于750x1334px界⾯是2倍的像素倍率，⽽1242x2208px是3倍的像素倍率，也就是说1242x2208px界⾯上所有的元素的尺⼨都是750x1334px界⾯上元素的1.5倍，所以我们在进⾏适配的时候直接将界⾯的图像⼤⼩变为原来的1.5倍，然后调整画布⼤⼩为
1242x2208px，最后调整界⾯图标和元素的横向间距的⼤⼩完成适配。
上⾯说了整体思路，下⾯我们来说说具体怎么适配。
⾸先对750x1334px的画布执⾏Command+Alt+I命令(调整图像⼤⼩)，单位设置为百分⽐，宽⾼设置为150%，点击“确定”，调整之后的画布⼤⼩为1125x2001px。
紧接着对1.5倍之后的1125x2001px界⾯执⾏Command+Alt+C(调整画布⼤⼩)，⿏标单击“定位”左上⾓的格⼦，调整宽⾼为1242和2208px，点击“确定”。
上⾯左图拓展画布到右图完成适配做了如下调整。
1)导航栏右边的图标向右移动保持和原来的右边距⼀致，标题居中。
2)⾸焦图的⾼度乘以1.65(1242/750=1.65得到)后居中，宽度1242px。
3)主要⼊⼝右边的图标向右移动和原来的右边距⼀致，各图标的间距等宽。
注：分割线仍是1px。
750x1334向上适配1125x2436px(@3x)
与苹果之前发布的iOS设备相⽐，iPhone X的像素分辨率发⽣了变化，为1125x2436px(@3x)，在实际⼯作中为了⽅便向上和向下的适配，我们仍然可以选择熟悉的iPhone 7(750x1334px)的尺⼨作为模版进⾏设计，只是⾼度增加了290px；设计尺⼨为：
750x1624px(@2x)。设计完成之后将设计稿的图像⼤⼩拓展1.5倍即可得到1125x2436px(@3x)尺⼨的设计稿。
在适配的时候需要注意，状态栏由之前的40px增加到88px，标签底部预留68px⽤于放置主页指⽰器，如下图所⽰。
关于主页指⽰器的适配涉及到两种情况：底部出现标签栏、⼯具栏等操作设计时，需要将底⾊下延68px并填充原有颜⾊，这样的处理可以让底部设计更佳简洁舒适，没有功能操作时，页⾯底部不需要填充颜⾊，只需盖住主页指⽰器即可。
对于⼤多数采⽤瀑布流的页⾯来说，仅仅是屏幕⾼度上的变化，可以⽆视。但对于如：新⼿引导页、⾳乐播放器等需要单屏显⽰的界⾯就需要重新布局。
09.切图规范
当界⾯设计定稿之后，设计师需要对图标进⾏切⽚提供给开发⼯程师，通常我们只需要对icon进⾏切图即可，⽂字、线条和⼀些标准的⼏何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺⼨、圆⾓⼤⼩、背景⾊值、不透明度即可，开发⼯程师可以⽤代码实现这种效果。
输出切⽚
先将设计稿中的图标重新排列在⼀张新的画布中，保证同样尺⼨的图标间距相同，这样做的好处是为图标建⽴⼀个控件库，有利于图标的整理。
给每⼀个图标建⽴好参考线之后，⽤PS⾃带的切⽚功能，沿着建⽴好的每个图标的参考线画框即可，注意最后要输出PNG格式的切⽚(PNG 格式拥有更多的颜⾊和细节并且⽀持透明)。
在具体操作时⾸先要将画布背景⾊去掉，让画布变成透明，做好切⽚后执⾏“⽂件-存储为Web所⽤格式，在对话框中选择PNG格式，点
击“存储”即可。
注：图中标签栏图标的底⾊块是为了保证统⼀的切⽚尺⼨，可以根据⾊块建⽴参考线，具体切图时要将⾊块去掉。
切⽚命名
切⽚命名的通⽤规范是，界⾯_功能_状态.png。名称应使⽤英⽂命名，不要使⽤数字或者符号作为开头，使⽤下划线进⾏连接，例如⼀个⾸页处于正常状态下的按钮命名是 home_btn_nor@2x.png。其中界⾯⾸页是home、空间按钮是btn、状态正常是normal。为了命名的正确性，设计师需要先和合作的开发⼯程师进⾏沟通确认。
10.设计稿标注
当界⾯设计定稿之后，设计师需要对界⾯进⾏标注给开发⼯程师在还原界⾯时进⾏参考。借助⼀些专业的标注⼯具有利于我们提⾼⼯作效率，常⽤的标注⼯具有Mark Man或PX Cook。
在⼀份设计稿中需要标注的内容是⽂字的字号⼤⼩、粗细、颜⾊、不透明度；界⾯的背景颜⾊、不透明度；各个图标、列表、⽂字之间的间距。
界⾯标注的作⽤是给开发⼯程师提供参考，因此在标注之前需要和开发⼯程师进⾏沟通，了解他们的⼯作⽅式，标注完成之后宣讲你的注意事项，以更快捷⾼效的完成⼯作，并且最⼤限度的完成视觉⾼的还原。
总结

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。