如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
作为视觉设计师你是否会遇到这样的问题，当需要做一个 loading 或者其他动效的时候，总会或多或少的出现一些问题，如何使用更轻量的 Sketch 直接将矢量图形转到 AE 制作动效，如何不再受 GIF 导出的失真问题困扰，如何让开发完美还原我们的动效设计稿等，如果你也存在这些疑问，那以下介绍的2款插件就可以完美的解决这些问题。AEUX 是由 Google 团队推出的，运用在 Sketch 和 AE 的一组插件，能将 Sketch 里的图层以及整个画板一键导入到 AE 里，同时能在 AE 里解决图形分组和分层的问题，减少导出图片或者转入 Illustrator 处理带来的不必要的重复动作。
以下是我做的一个简单小案例，通过此次案例将介绍怎么更好的使用这个插件：
首先在 Sketch 内将图层进行分组，在多图层的情况下，需要在前期进行动效构思，根据构思在 Sketch 里对图层进行分组，所做的分组将会是你在 AE 里的合成分组。
方法一：直接复制选中图层
安装好插件后，打开 AEUX，选择你将导入到 AE 里的图层，点击 Send selection to Ae，同时在AE里打开安装的 AEUX插件，在 BUILD COMP 区域出现了从 Sketch 导入的图层数量，勾选 Precomp groups，点击将自动加载入 AE 合成里。
方法二：导出json文件
从 Sketch 的 AEUX 面板里点击 Export AEUX.json 导出 json 文件，打开 AE 的 AEUX 面板勾选中 Precomp groups，将导出的 json 拖入到 BUILD COMP 区域，或者点击「曲别针」icon打开 json 文件。
这样导入到 AE 里的图层是以合成的形式展示 Sketch 里的分组。
如果在 sketch 内，分组图层不在同一组内，导入 AE 后会出现变形和位移的情况。
如果 sketch 内形状图层有投影/渐变/point type 的编辑形状时，导入 AE 后将出现投影消失，渐变消失，形状变形的情况，在遇到这种情况时，会通过导出图片的方式处理。
导入 AE 的 AEUX 面板时如果没有勾选 Precomp groups，多图层导入的情况下，组内的图层都会生成在 AE 中的同一个合成中。
1. Detach symbols
这是一个解除 symbol 的功能，在 sketch 内如果没有解除 symbol，导入到 AE 里将出现图形位移和变形的情况。
2. Flatten shapes
AEUX 支持布尔运算，但是在一个组中混合不同的运算符（如添加然后减去）对于Ae来说比较困难。点击 Flatten shapes 可以合并布尔运算图形。
3. Images to symbols
Sketch 只能导出它在画板上看到的内容。如果在 sketch 内图像的一部分超出画板边界，复制到 AE 内部的图像将出现位移的情况。导出前点击 Images to symbols 不会发生被裁剪和位移的情况。
1. Come size multiplier：切换倍数
可以设置 sketch 画板的倍数合成。
2. Auto build artboards：自动构建合成
导入前勾选此功能，在 sketch 的 AEUX面板中复制图层后，在 AE 里不需要任何操作，它会自动复制图层导入到创建合成中。
3. Convert to precomp：创建合成
同时选中单一图层，可以将他们建立一个新的合成。
4. Un-Precomp group：解除合成分组
点击可以解除合成的分组，变成单一的一个一个的图层
5. Toggle Visibility：可以一键隐藏和显示所有的父级图层
6. Delete group layers：删除父级图层
虽然现在 AEUX 有些上面所讲的功能不能支持，但是在一步步完善，希望可以帮助一些习惯用 sketch 画插图的设计师提高动效制作效率，减少不必要的操作步骤。
在动效制作好后，通常我们会导出 mov 然后导入 PS 里生成 gif 格式，但是 gif 会出现质量过低的情况，比如渐变分层，边缘有毛边等情况，所以由2017年 Airbnb 团队开发的 lottie 动效可以完美的解决这些问题，而实现 lottie 动画需要在 AE 中安装一款名为 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生动画的形式在移动设备上渲染播放，在制作动效时导出 json 文件直接给到开发，可以帮助提高实现动效效率，同时提高动效质量。
1. 它还有很多的优点
2. 在使用中有几点注意
3. 所需软件
ZXP installer
下面是一组之前做的页面加载loading效果，开发小哥哥反馈：实现挺。
4. 步骤
下载ZXP installer：https://aescripts.com/learn/zxp-installer/
下载bodymovin：https://github.com/airbnb/lottie-web
下载之后，点开刚下载的 ZXP，点开顶部 file-open，打开 bodymovin插件。
当出现以下界面时代表已经安装成功。
意外情况：在用 ZXP 安装 bodymovin插件的时候出现以下提示。
原因是没有通过 Adobe Creative Cloud 下载 AE，需要重新通过 Adobe Creative Cloud 下载。
打开AE，After Effect CC – 首选项 – 常规，勾选允许脚本写入文件和访问网络。
打开窗口 – 扩展查看是否添加成功。
调出 Bodymovin 面板，选择需要导出的合成。
点击你要保存的 json文件地址，点击 Render。
点击 Brown 载入刚导出的 json文件，检查动效是否有误。
这时候就可以把 json 文件给到开发，如果 AE 合成中有图片，需要把图片放在文件夹内一起提供给开发，同时也会给到一个 gif文件，如果实现有不一样的地方，开发可以询问设计师。
如果想在移动端上浏览可以打开网址：https://www.lottiefiles.com/，下载安装移动端客户端（ios/Android）
注册登录成功后打开 Lottie Preview 添加 AE 里用 bodymovin 导出的 json文件。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们在设计诸如CRM（客户关系管理）、OA（办公自动化）等面向B端用户的后台界面时，往往会被各种各样错综繁杂的组件弄得晕头转向，不知该如何选择。有时好不容易选完之后，又会发现有更合适的组件，导致反复修改设计稿，降低了工作效率。那么在对比了几个常用的组件库（Ant Design / Element / iView）并结合自身的工作经验之后，我选择了一些常用的组件，来和大家简单总结下它们的使用场景以及可能出现的误区。
在Ant Design 的组件库中，分为了通用、布局、导航、数据录入、数据展示、反馈、其他这七大类组件。今天先来看看数据录入中的相关组件，我将其又分为了手动输入以及点击选择两大类。（评分、上传等特征明显的组件就不在此赘述了。）
1. 输入框Input
输入框是数据录入中最常见也是最基础的组件，在需要用户输入内容的时候即可选用。
除了常规的输入框，带前/后缀、带图标、带按钮的输入框也是较常用到的。
在输入内容中头/尾是相对固定的时候，我们就可以采用带前/后缀的输入框来减少用户手动输入，比如网址输入框就可以加上后缀。
有时候为了帮助用户了解输入内容的类型，可以在输入框中加上图标，比如输入用户名或密码的时候。
带按钮的输入框最常使用的场景就是搜索框了。
2. 自动完成AutoComplete
自动完成其实是输入框Input 的一项功能，但是 Ant Design 和 iView 中将其单独拎出来了，为了避免大家搞混，我们这儿也单独讲。（Element中在输入框 – 带输入建议）
顾名思义，自动完成就是辅助用户输入。在输入一部分内容后，提供相关的备选项，不仅可以减少手动输入，还能更精准的输入。常见的使用场景就是搜索框了。
3. 数字输入框InputNumber
数字输入框特用于需要输入范围数值的场景（电话QQ等号码不宜使用）。右侧的步进器则可以帮助用户精准控制数值的增减。
当然作为输入框的一种，也可以加上前/后缀来减少固定内容的输入，比如%或者货币单位（¥、$、元、円）。
1. 单选框Radio
单选框顾名思义就是在一组选项中仅可选择一个时使用。
由于单选框的选项都是平铺展示的，所以选项不宜过多，当选项较多时建议采用选择器Select（后文会提到）。
按钮形式的单选框也可以被当作标签页Tabs 来使用（标签页Tabs的本质其实就是单选框）。
2. 多选框Checkbox
多选框则是在一组选项中需要选择多个时使用。
同样，由于是平铺展示，选项不宜过多。
多选框不同于单选框Radio 的是，它可以单独使用，来表示两种状态之间的切换，类似于开关Switch。区别在于开关Switch 会直接触发改变状态，多选框则一般用于状态标记，需要配合提交操作使用。
3. 选择器Select
选择器也是数据录入中很常见的组件，它以下拉菜单的形式来呈现选项（选项较少时建议采用单选框Radio 或多选框Checkbox 平铺展示）。
除了单选，还有多选的形式。
上文输入组件中提到的自动完成AutoComplete，其实也是选择器的一种衍生方式──带输入的选择器。
4. 级联选择Cascader
级联选择是指，在选择器Select 选项数量较大时，采用多级分类的方式将选项进行分隔，便于用户选择。比如地址选择，就可以按省市区一层层分类。
5. 穿梭框Transfer
当多选框Checkbox 选项过多时，除了选择器Select 的多选形式，还可以用穿梭框的形式来呈现。相比于选择器Select，穿梭框占据更大的空间，当然也可以展示选项的更多信息。
6. 日期选择器DatePicker
当需要录入日期的时候，可以选用日期选择器。用户从弹出的日历面板中直接选取即可。
当然，需要录入一段时间的时候，也可以同时选择开始日期和结束日期。
7. 时间选择器TimePicker
时间选择器与日期选择器DatePicker 几乎一样，从弹出面板中选择时间即可。
时间选择器和日期选择器DatePicker 还可以组合使用。
8. 滑块Slider
滑块的使用场景类似于数字输入框InputNumber，需要在某个范围内录入数值。不同的是，它可以直接选取而不用手动输入。
当然，也可以和数字输入框InputNumber 配合使用。
还可以选择某个区间，比如价格区间。
当数据选项较少或者离散（不连续）时，还可以采用分段的形式。
今天主要讲了数据录入的相关组件，共11个：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Shards 采用了 Bootstrap 4 前端框架制作的，外观简约而时尚，风格与现代流行的扁平化相当合衬！此外不仅仅拥有 HTML/CSS/SASS 格式模板，还有 Sketch 设计源文件，可见分享者的贴心。
目前从官方介绍来看，UI组件还相当齐全，可用它来快速搭建漂亮、时尚的网页和UI设计作品，下面一起来看看介绍。
关于 Shards 这个主题虽然免费，但并不代表它只有「表面」，制作者还为性能性能考虑，压缩版仅12KB大小，实在太好了，以这样的大小，制作出来的网页直接能秒开。
它并不是直接使用 Bootstrap 的设计样式，所有的组件都是重新设计，以便得到统一的风格！
这是非常不错的UI KIT素材 ，它还包含了10个额外的自定义组件，可以让使用者快事制作着陆页。
演示地址：https://designrevision.com/demo/shards/extra/app-promo.html
演示地址：https://designrevision.com/demo/shards/extra/agency-landing.html
Shards 含有丰富的 UI 组件，网页端常用的元素几乎包含了，大方便用户自由定制。
颜色：
字体
图标支持900+ Material icons 和 Font awesome 两大图标库！
表单上的细节，也不容忽视：
还有日期组件的设计：
卡片
按钮
导航菜单
我想这些漂亮的元素，已经足够你设计一般的网页，即使不够，也完全可以自己利用 Sketch 源文件或 HTML 模板再创作。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
看了很多版式技巧仍排不好版？懂得很多套路仍做不好设计？其实也正常，因为大部分技巧都比较笼统，每个人用起来的会有不同的效果，所以葱爷特地总结了7个比较具体的小技巧，算是属于一学就会且很容易出效果的排版小妙招，希望能帮你能解决一些比较具体的问题。
该技巧操作起来很简单，就是在标题或内文下面，增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意：1.颜色要比上面的文字淡，以免影响其识别性；2.字体要用粗体，且字号要比上面的文字大；3.要与上面的文字错位排版。之所以这么处理是为了增加版面的层次、对比、以及元素的丰富性。
这是增强标题设计感的另一种处理方式，单纯的文字标题难免显得单调，我们可以通过增加辅助元素使它变得更丰富一点，比如在文字的基础上加小色块。
色块的高度最好大于笔画厚度，小于文字的高度，加上去的方式可以是叠加于文字之上，或是置于文字底部，创造出文字的一部分在色块内一部分在色块外的对比效果。还有，色块的颜色最好来源于版面中的其他元素。
在做设计的时候常常会遇到这两情况，一是版面中会多出一些影响版面平衡的空白，但已经没有合适的内容可以填充，如果硬塞一些装饰文字或者图案，很可能会弄巧成拙；二是有的区域小元素小信息比较多、比较散；怎么办呢？这两种情况都可以通过该方法解决。
1.把斜线或点重复排列成一个矩形，然后把它填充在空白处就可以平衡版面，且不会造成突兀的感觉，如下图案例：
提示：线条不宜太粗，点也不宜太大，而且此方法只适合填补小空白，不适合填补大面积的空白。
2.在比较散的元素下方排一组斜线，可以把各个分散的元素联系起来，使其成为一个整体，如下图：
背景能很大程度影响版面的设计感，这一点你们应该都有体会，常规的处理方式是把背景作为一整个色块，而如果把背景分割成两个几何色块时，设计感立马就会增加不少。
分割的方式好比用一把刀在背景的黄金分割处，划一条倾斜的直线贯穿版面，使整个背景一分为二，而这两个色块的颜色对比要比较强烈。另外，在横版中用左右分割、竖版中用上下分割效果会比较好。
增加对比关系是加强设计感的最有效技巧，我们也可以用此方式来优化图片，如果版面中的配图是没有背景的产品或人物，那么在这些图片上加一个圆形的色块，创造出虚与实的对比，通常也能得到不错的效果。
提示：
1.色块可以置于图片底部，也可以采用正片叠底压在图片上方；
2.圆形色块的边长至少要超出图片宽或高；
3.图片与色块要错位排列。
该手法在画册和海报设计中比较多见，跟直接在一段文字下方加一个大色块不同，而是要根据每行文字不同长度，单独加一个相应长短的色块，所以这些文字每一行的长短最好是不一样的。
这种处理方式可以使整段文字看起来更整体，增加文字视觉冲击力，而且还能使文字与背景区隔开，加强文字的识别性。
提示：
1.段落文字行数太多或太少效果都不会太好，3-10行左右为最佳。
2.各个小色块可以相互连起来，也可以相互隔开，以实际效果为准。
如果你看过的食品包装够多，你应该能发现，很多包装上的产品名称、广告语、或者卖点等信息，都会摆放在一条飘带上，这么处理的效果通常不错，因为飘带具有礼品、赠送的寓意，用在哪里都不会太唐突，而且飘带的形式简单、有细节、变化丰富，很适合用作装饰元素。
还有一点也很重要，飘带的形式一般都是柔软的曲线，这与版面中其他直线元素可以形成鲜明的对比，加强版面的灵活性。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
即使现在很多 WordPress 网站模板、H5 在线编辑器等等，但网页设计需求依然非常多，线上编辑器尽管如何智能，但终究也是「模板式」，想完全符合用户需求的产品还是靠有经验的设计师来完成。即使是有经验的设计师，依然是需要不停的找新的设计灵感。
事隔一个月，@dailywebdesign已更新了30+精品网页截图，小编今天再次为大家整理出来，方便大家欣赏，同时也推荐大家看上一期的《26张很棒网页首屏设计作品欣赏》。
PS：这些网页设计案例均来自 Ins 的用户，并非 Dribbble 网站，所以没有对应的作品集页面链接。
Design by: @vladimirbiondic
Design by: @capouska
Design by: @gtamarashvili
Design by: @abaygulov
Design by: Samuel Scalzo
Design by: @ui_ux_joy
Design by: Rono
Design by @rathniley
Design by: @brkrobert
Design by: @kreativa.studio
Design by: @fireart_studio
Design by: Oliwia Przybyla
Design by: @outcrowdstudio
Design by: @tintinsupp
Design by: @ihrvoje
Design by: Catalin Blanaru
Design by: Craig Gittins
Design by: @dannpetty
Design by: @halolabteam
Design by: Chalar Tintin S
Design by: Samuel Scalzo
Design by: @dogstudio_be
Design by: @divan_raj
Design by: @divan_raj
Design by: @outcrowdstudio
Design by: @jan.teschner
Design by: Abhishek Biswas
Design by: Michael Brewer
Design by: Cosmin Capitanu
Design by: @janravendeklerk
Design by: @arendstom
Design by: @capouska
Design by: M S Brar
Design by: @divan_raj
Design by: @syedraju01724
Design by: Yu Long
Design by: @marcocoppeto
Design by: @bestservedbold
Design by: @akasharun4161
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Adrian Frutiger 是从过去和未来汲取的灵感而设计的 Avenir®（avenir在法语里意为「未来」）。Frutiger 在他的设计中加入了一种有机的人文主义元素，将 Avenir 从早期字体僵硬的几何风格中解放出来。
2004年，Frutiger 与 Linotype公司字体设计师小林章先生（Akira Kobayashi）一起复刻了 Avenir字体家族，解决了其屏幕显示的问题。它就是 Avenir Next。几何元素与人文元素的结合使得 Avenir Next字体的易读性极高，这使其成为汽车HMI仪表盘和显示器等快速扫视环境下最理想的选择。
Burlingame®字体是一种相对较新的字体，它设计坚实，外形开放、清晰，易读性非常高。这款字体体现了人文主义及手工质感，它是根据 Monotype 委托开展的汽车用户界面易读性研究所得到的结果而进行的修改，使 Burlingame 成为任何车辆数字仪表盘的不二选择。
Burlingame 字体为了满足汽车显示器的需求融合了多种特性：平整的切口，锐利的拐角，超椭圆的（super-elliptical）字碗以及宽松的字间距。其简单的形状和深三角形切口还有助于确保小尺寸字体的清晰度和易读性，尤其是在低分辨率屏幕上。
AdrianFrutiger 是世界知名的字体设计师。他的同名字体设计独具特色，而且用途广泛。Frutiger®字体最初用于机场导视牌，在远距离及多种角度下阅读都非常清晰。作为一种经典字体，Frutiger 是人文主义无衬线字体的易读性与具有优美几何线条的早期无衬线字体（Grotesque Sans）的结合。
Frutiger 因其现代、温暖的外观被许多公司和政府采用。这种字体的开放性使其非常醒目，其独特的字形避免了与其他字体相互混淆。
Tipperary™是一种单线的人文主义无衬线体，具有清晰、开放的字形。其简洁的字符十分易于阅读，也非常适合数字UI 显示。为了制作这款字体，许多经典字体设计被重新诠释、组合。于是就有了一款在现代显示屏技术受限的范围内仍然表现出色的字体，保留了原有设计的比例和形式，使其成为印刷业的字体。
Tipperary 字形的拐角近似几何形状的方形，是快速扫视环境下（如汽车仪表，显示器和界面）的最佳字体之一。
Daytona™是由 Monotype公司的 Jim Wasco 遵循易读性原则而设计的一款字体。其方正坚实的字符特征遵循的是人文主义的形状和比例。Daytona 的字形偏窄，可以最大限度地利用空间而且还可以提高阅读舒适性。圆润的拐角、开放的字怀以及简单的字符形状使 Daytona 成为 Monotype字体库中最易读的字体之一。
Daytona 字体几乎在所有的屏幕环境（包括汽车用户界面、数字仪表盘以及GPS设备）中都能表现得非常出色。
Akko™及 AkkoRounded 字体通常会用两个不太可能放到一起的词来描述——「工业的」和「精致的」，这其实得益于设计师小林章先生（Akira Kobayashi）对最初严谨的工业概念的弱化。Akko 这个名字来源于著名设计者名字和姓氏的前两个字母。
Akko 设计友好且非常现代化，清晰易读而且又非常时尚。Akko 字形的「裸骨」骨架降低了其他设计风格中出现的视觉拥挤现象。
Mayberry 最初是为了模仿 Tiresias™字体家族的技术而设计的，以便用于机顶盒电视设备和用户界面。比起Tiresias，Mayberry 在美学和功能方面都有显著的改进。
Mayberry 包含真正的意大利斜体以及多种字重，可以在低分辨率设备上提供高质量的阅读和最好的可读性，同时它还具有一系列能够吸引专业人士的 OpenType 功能。Mayberry 是一款字宽被轻微压缩了的人文主义无衬线字体，这样可以在较窄的文本栏显示更多的可读文本。开放的字怀与垂直的应力都有助于在低分辨率的情况下保持Mayberry设计的可读性。
TradeGothic 字体家族是美国平面设计作品的主打产品，自1948年由 Jackson Burke 发布以来一直不断地被使用。这一设计在国际上也很受欢迎，而且曾一度被视为 Helvetica ®家族的竞争对手。
2008年的版本名为 TradeGothic Next，这款字体改进并扩展经典系列，还将它引入到一个流行的新时代。这种不和谐却为 Trade Gothic 设计增添了一点质朴的自然主义色彩，这也是许多设计师回归的原因之一。
TradeGothic Next 是最清晰的早期无衬线字体类型。该设计具有开放的字形及宽松的字间距，让人感觉容易接近，这些都使其在需要扫视的阅读环境下表现良好。
Slate 字体家族将出色的功能及视觉的优雅融合成一种卓越的交流工具。很少有字体具有这种设计的美感和力量。
Slate 是 RodMcDonald 的作品，Rod McDonald 是一位屡获殊荣的字体设计师和刻字艺术家。在四十年的职业生涯中，McDonald 参与了加拿大国家盲人研究所（CNIB）开展的字体易读性和可读性研究项目。在那里，McDonald 了解到哪些设计特征更适合最大限度地提高字符易读性及文本可读性。
Slate 是一款风格化的人文主义字体，提供了一种温暖的视觉体验。即使在具有挑战性的技术环境中，Slate也能为用户提供舒适的阅读环境。
HendrikWeber 的 Unitext字体设计清晰、简洁，是一款适应性强、识别效率高的无衬线字体，风格介于怪诞与人文主义之间。
Unitext 深入研究了设计机构对于品牌字体的需求，以及设计师Hendrik Weber 本人为公司定制字体的经验。由于了解用于品牌推广的无衬线字体的流行度，还有它们的缺点，Weber 开始着手创作一些可以适应不同环境但又不放弃友好性的字体。可读性也是一个重要的考虑因素。
Unitext 是一种新型混合风格的字体，它具有现代感及前瞻性的外观，可读性高，并且极具未来主义的优雅。
完美的易读性。无与伦比的设计。
Monotype 的字体创意总监 Steve Matteson 将这些字体组织到一起来展示一系列可以轻松阅读，并可以帮助驾驶员在行驶过程中保持注意力的字体样本。通过为仪表板或HMI 选择合适的字体，您将能够确保您的汽车显示屏清晰易读，并且拥有观众喜爱的无与伦比的设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
如果您不熟悉iPhone设计规范，请一口吃下本篇文章。伴随笔记吃下效果更佳：）
iPhone的历史
每次苹果发布会UI设计师可能是最睡不着觉的人啦。每次发布会苹果推出全新iPhone时，我们在iPhone平台上的APP应用程序必须跟随iPhone的尺寸、规范等特性调整设计稿。也就是说，几乎每次苹果发布会都是UI设计师加班的通知书！这不，2018年9月13日凌晨，苹果在Apple Park总部里的乔布斯剧院举行了2018苹果秋季新品发布会。这次苹果发布了全新的iPhone Xs、iPhone Xs Max，iPhone Xr三款手机。噢，不要忘记我们也不能怠慢还在服役的iPhone X、iPhone Plus、iPhone6/7/8、iPhone SE等苹果手机。作为一个移动端UI设计师，您必须对苹果所有生产过和现役的iPhone有所了解。
起源
谈到iPhone我们必须谈谈史蒂夫·乔布斯（Steve Jobs）。尽管乔布斯去世多年，但是他的理念仍然是现代智能手机设计的原则。乔布斯不仅重新定义了智能手机，也定义了移动端应用程序。这位被领养的犹太男孩在很早就对个人电脑产生了兴趣。在游历了印度和日本之后，他进入了大学校园。在校园里除了无线电和嬉皮士文化，他认为大学课程多半是无聊的。但他曾跑去特意选修了一门课程：字体设计。他所在大学的字体设计课是全美最著名的，在那个课堂上乔布斯学习到了网格设计、衬线体与无衬线体、字体的气质等设计知识。当然在前面讲过的具有摇滚精神的字体Helvetica也深深吸引了乔布斯。后来乔布斯选择大学肄业并在自家车库创立了苹果公司，自此“车库”也成了创业者最喜爱的地标。苹果公司的第一代个人电脑内置了非常出色的用户图形界面系统（即GUI），并且内置了Helvetica等漂亮的字体。但是这并不是乔布斯事业的终点，在经历了苹果公司的权利斗争后，成熟的乔布斯再次登上发布会的舞台，推出了真正能改变世界的产品 - iPhone。一般产品名都会用名字加上产品的类型命名，比如百事可乐、英雄钢笔等。而iPhone似乎本身就是一个类别。在那次发布会上，乔布斯指责当时的功能手机太“愚蠢”：当时的功能手机性能很差，并且屏幕很小，实体键盘占用了很大的空间。之后，他拿出了一部像外星科技的产品：iPhone。自此，苹果重新发明了手机。乔布斯如此强调用户界面和交互设计的重要性，这种理念改变了当时和现在的设计思维。乔布斯身后，移动端的格局在改变，接任乔布斯指挥棒的蒂姆·库克和首席设计官乔纳森·伊夫（Sir Jonathan Paul Ive）也陆续更新着苹果手机的产品线，延续着这些伟大的产品。
年轻的乔布斯
初代iPhone
相关产品：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代）。
iPhone初代产品在2007年1月9日由史蒂夫·乔布斯在苹果发布会上正式发布。初代的iPhone产品的共同特点是：玻璃屏、屏幕清晰度普通、3.5英寸屏（注意：我们所说的手机尺寸都是测量屏幕的对角线得出的）。iPhone没有实体键而整体是屏幕的设计，在当时仿佛是外星科技降临一般令人惊艳。为了让大众习惯直接在手机上点图标（在此之前人机互动都是间接输入的：比如实体键盘、鼠标、触控笔等），乔布斯发布了革命性的操作系统iOS，手机的所有图标都是圆角：这样可以避免用户认为会刺到手指。所有图标和界面全部是拟物设计，这样可以更好地让用户理解哪些是可以点击操作的。按钮在手机上呈现的大小都是7mm左右，这是因为人类手指点击区域大概是7mm - 9mm。系统充分地应用了多点触控的功能，你不仅仅可以点手机里的按钮，还可以进行长按、滑动、捏等手势操作。这些用户体验和人性化的设计在当时具有划时代的意义。随后，第二代产品iPhone 3G、第三代产品iPhone3GS先后由乔布斯发布。这种能听歌、能打电话、能上网的手机真是太炸了！而且你可以在应用商店Appstore中下载第三方的应用程序，海量的第三方程序可谓是大千世界了。这块3.5英寸屏的手机截图出来后的实际分辨率是480x320px，所以如果你在当时做UI设计的话，那么做APP界面建图的尺寸就应该是480x320px。
苹果初代产品 (2007)
iPhone 4
相关产品：iPhone 4（四代）、iPhone 4s（五代）。
iPhone 4于2010年6月8日发布。iPhone 4延续了iPhone一代的多点触摸（Multi-touch）屏界面，并首次加入视网膜屏幕、前置摄像头、陀螺仪、后置闪光灯，相机像素提高至500万。对我们设计师最重要的就是加上了视网膜屏Retina。Retina是苹果提出的标准，它的含义就是在应用场景的视距内让人无法看清单个像素。我们都知道如果你贴的够近，一般的屏幕上都会出现一格一格的像素矩阵。屏幕是由这些矩阵组成的。这种屏幕的问题就是稍微近一些我们就能看到那些网格和矩阵。如果我们希望用户得到最好的体验，自然是让用户看不到格子，那怎么办？答案就是：加大屏幕的密度。如果屏幕的密度到达一个指定的水平（当然也要取决于用户的视距，即用户与屏幕通常离多远），那么用户的眼睛就无法分辨出细小的像素颗粒了。这种屏幕就被称为Retina屏，也叫视网膜屏。这是用户体验的巨大进步，但是也是UI设计师的噩梦。原先的设计稿统统需要放大才可以在iPhone4里显示得完美：比如原来我们一个界面的尺寸是480x320px，现在因为屏幕密度增加了一倍，我们就需要设计640x960px才够用。在电脑上看这个尺寸要比手机大两倍！（当然啦，那时的电脑屏幕通常不是Retina屏）。而且3GS并没有完全被淘汰，那么如何让一个APP适配两个不同尺寸的手机呢？于是每个APP内预装了两套切图，一套480x320px尺寸，也就是一倍图（@1x）；一套960x640px尺寸，也就是二倍图（@2x）。这两套图像资源的命名完全一样，只是二倍图结尾需要加上@2x标记它是高清尺寸，比如home_icon@2x.png。
iPhone 4代产品 （2010）
逻辑像素和物理像素
逻辑像素（logic point）：逻辑像素的单位是PT，它是按照内容的尺寸计算的单位。比如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即1pt=2px，那么其实iPhone 4的物理像素是960x640px。iOS开发工程师和使用Sketch和AdobeXD软件设计界面的设计师使用的单位都是PT。
物理像素的单位就是我们常说的pixel，简写成PX。它是我们在Photoshop和切图中使用的单位，屏幕设计中最小的单位就是1px不可再分割。使用Photoshop设计移动端界面和网站的设计师使用的单位是PX。在以下的文章中，如果您使用Photoshop设计界面，那么只需要记住所有px单位的数值和支持Photoshop的工具，如果使用Sketch或Adobe XD设计界面，那么只需要记住所有pt单位的数值和对应的工具即可。
逻辑像素和实际像素计算方式不同
PPI
PPI(pixels per inch)指的是屏幕分辨率的单位，表示的是每英寸显示的像素密度。屏幕的PPI值越高，那么这个屏幕每英寸能容纳的像素颗粒也就越多，那这个产品的画面的细节度也就越丰富。PPI值大于300一般我们就无法用肉眼察觉出屏幕上的“马赛克”格子了。但是如果屏幕很大，那么需要呈现视网膜屏的PPI值也需要更大，所以iPhone Plus系列的PPI值比iPhone6/7/8要大。PPI在我们设计的工作中其实关系不大，但理解它对于帮助我们理解为什么iPhone4比iPhone3GS实际像素大一倍有帮助。
PPI的计算公式
iPhone 5
相关产品：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代）
iPhone 5于2012年9月13日正式发布。iPhone5在设计上带来了很多争议，因为iPhone5没有采用乔布斯认为人类最合适的手机尺寸3.5英寸屏，而是用了4英寸的屏幕。宽度没变而高度加长了。这样做的原因是市场上越大的手机越受欢迎。当时设计师也几近崩溃，因为又要搞适配了。原来960x640px的尺寸变为了1136x640px，但是这个变化其实不大，就是高了点儿。于是@2x高清图的设计稿就变成了640x1136px。因为iPhone4的手机看着也就是长了点儿，滑动不就完了嘛。除了闪屏这样的界面需要单独做iPhone4、iPhone5、3GS尺寸之外，其他界面仍然维持两套设计稿即可。
iPhone 5 （2012）
iPhone 6/7/8 和iPhone Plus
相关产品：iPhone6和iPhone6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）、iPhone7和iPhone7 Plus（十代）、iPhone8和iPhone8 Plus（十一代）。
这个产品迭代周期值得大家留意，从iPhone6到iPhone8这段时间苹果新手机的物理像素都是750x1334px。而所有Plus手机的物理像素都是1242x2208px。如果按照逻辑像素来计算，那么iPhone6/7/8的逻辑像素就是375 x 667 pt（就是750x1334除以2）；而iPhone Plus的逻辑像素就是414 x 736 pt（就是1242x2208除以3，因为这个屏幕太大了视距不同所以屏幕密度更高）。历史到这个时候，原来的手机全部被淘汰了。也就是说iPhone6/7/8成为了我们的设计标准，它的切图就是@2x，iPhone Plus（1242x2208）使用@3x。从此没有@1x倍图了，只存在一个假想的概念。
iPhone 6/7/8 (自2014)
iPhone Plus (自2014)
iPhone X
相关产品：iPhone X（十一代）。
这四款手机全部是苹果的全面屏手机。全面屏并不是新概念了，因为从iPhone初代产品开始，手机业内就在构思如何把手机做成全部都是屏幕区域的技术了。但是这个技术有很多难题，比如前置摄像头和听筒怎么处理。那么苹果采用的方案是“齐刘海”，把四周处理成圆角的方式。IPhone X和后续三款全面屏我们设计师需要注意的就是齐刘海。因为需要规避摄像头和麦克风听筒，所以导航栏比其他iPhone系列产品要高；而底部Tab栏因为最下方有圆角同样比其他iPhone系列要高。而且这两个边界是不应该放置任何操作功能的。也就是说只有看的份儿。
iPhone X的物理像素是1125 x 2436 px，而逻辑像素是375 x 812 pt。也就是说如果你使用Sketch或者Adobe XD等工具设计界面的话，iPhone X的宽度和iPhone 6/7/8是相同的；只是高了一些。那么如果需要出一套iPhone X效果图只需要把头和尾巴替换成新版即可。而如果你用Photoshop设计界面的话，宽度变化还是比较大的。需要做放大处理然后单独调整那些乱了的尺寸。
iPhone X(2017)
iPhone XS Max
相关产品：iPhone XS、iPhone XS Max、iPhone XR（十二代）。
这三款产品的像素分辨率听上去会比较眼晕：
iPhone XS Max：1242 x 2688 px
iPhone XS：1125 x 2436 px
iPhone XR：828 x 1792 px
但是如果我们用点的单位看就会得到：
iPhone XS Max：414 x 896 pt （iPhone Plus分辨率宽度）
iPhone XS：375x812 pt （iPhone 6/7/8分辨率宽度）
iPhone XR：414 x 896 pt （iPhone Plus分辨率宽度）
所以其实今年发布的iPhone都是比较友好的，如果使用矢量界面工具那么只需要调整设计稿头和尾巴即可，如果使用Photoshop的设计师需要放大缩小设计稿然后调整头和尾巴可以得到新版设计稿。而切图其实和之前没有变化，不管用什么工具设计还是得出两套切图：@2x（750x1334px）、@3x（1242x2208px）即可。
iPhone XS Max (2018)
以iPhone6/7/8为基准设计
在开始比赛之前，由于iPhone 6、iPhone 6S、iPhone7、iPhone7S、iPhone8屏幕和分辨率都是一致的750X1334px，所以我们可以称它们为iPhone6/7/8。而iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的1242x2208，所以我们可以称它们为iPhone Plus。而iPhone XS、iPhone X屏幕和分辨率都是一致的1125x2436，所以我们可以称它们为iPhoneX。那这场比赛的赢家毫无疑问是价格美丽的iPhone6/7/8获胜啦。那么我们做界面设计时需要按照iPhone6/7/8为基准设计。如果使用Photoshop就建750x1334px尺寸的画布，如果是使用Sketch或Adobe XD等工具就建立375x667pt。当然如果要设计首页之类的界面，它的界面很长你可以设计一个长的设计稿，比如750x8000px。
手机型号与像素对应图
HIG设计指南
上文说我们建立界面可以根据750x1334px或375x667pt来建立画布，但是具体状态栏的高度、导航栏的高度、tab栏的高度是多少？那些UIKit组件里的东西去哪里找呢？苹果已经为我们准备好了多个格式的规范了：
资源下载地址：https://developer.apple.com/design/resources/
设计方式
在iPhone6/7/8存量仍然很大的情况下，我们做设计稿仍然需要以iPhone6/7/8为尺寸来建图。从苹果官网下载好UIKit，上面有我们需要的一切元素。这些元素有PSD、Sketch以及XD版本，不管用什么设计软件均可找到对应版本。打开之后你会发现苹果已经将我们所需要的规范元素准备好了。如果你需要一些弹窗或者控件，那么就在UI Elements里找。如果需要界面的尺寸模板，就在Design Templates找。所有文件都有两份，结尾带有-iPhoneX的是为iPhone X系列设计的模板。没有标识的是为iPhone6/7/8设计的模板。
UI Elements 文件夹中的源文件
Design Templates中的源文件
状态栏和导航栏
状态栏（Status Bars）就是iPhone最上方用来显示时间、运营商信息、电池电量的那个很窄的区域。导航栏（Navigation Bars）就是状态栏之下的区域，一般来说导航栏中间是页面标题，左右是放置功能图标的区域。
在iPhone6/7/8设计中，状态栏的高度为20pt（40px）。导航栏的高度是44pt（88px）。这两个区域在iOS7代之后就进行了一体化设计。所以它们加起来的高度是64pt（128px）。
在iPhoneX设计中，状态栏的高度为40pt（132px）。导航栏的高度也是44pt（132px）。这两个区域同样要进行一体化设计。所以它们加起来的高度是84pt（264px）。这里注意一下，因为iPhone X的PPI值为458，所以并不是如iPhone6/7/8一样1pt=2px换算。
iPhone6/7/8和iPhone X导航区域的差别
部分优秀APP的导航区域设计
大标题导航栏
在的苹果设计中导航出现了一种新形式：大标题。出现这种形式就是为了减少视觉噪音，让内容更加突出。很明显大标题的设计很像报纸的版式设计，在第一眼我们就会明白页面的主题。大标题导航栏的高度一般为116pt（232px）：这包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。但是注意一下，大标题并不应该像传统导航一样常驻在页面之上，因为它太占空间了。所以在滑动页面时大标题会变成正常导航栏的64pt（128px）的高度。当然如果设计稿为iPhone X那么数值需要另外换算。
大标题的尺寸
导航栏图标
图标作为文字的补充，在移动端中应用非常广泛。在导航栏区域上的功能诸如搜索、添加、更多、返回等均需要用图标来表达。说明：@2x和@3x在逻辑像素单位是一样的，如果您使用如Sketch、Adobe XD等矢量工具设计，可以参照逻辑像素数值设计即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸进行设计，就需按照@2x下的px单位数值设计。
导航栏图标尺寸规范
标签栏 （Tab Bars）
Tab就是点击的意思，Tab栏（也叫标签栏）指的是APP底部的区域，如微信底部常驻有聊天、通讯录、发现、我的四个图标。iOS规范中Tab栏一般有五个、四个、三个图标的形式。也就是把宽度平分为五、四、三份。iPhone6/7/8设计中，标签栏的高度为49pt（98px）。Tab栏的操作是最常用的，因为手指最方便点击而且这个栏是常驻在页面之上的。所以Tab栏的图标至关重要，因为很多用户可能因为看不懂图标而找不到重要功能的入口，通常我们会在Tab栏图标之下加上11pt（22px）的注释文字，这个注释文字一般来说都是非常浅的浅灰色。
标签栏的尺寸
标签栏图标
我们在标签栏上的图标一般来说30pt（60px）大小左右，苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时考虑。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。标签栏图标的选中态应该是一个彩色，来区别于非选中状态。
真实设计中的标签栏
标签栏图标设计规范
标签栏图标应该尽量使用清晰地填充风格
工具栏 （ToolBars）
我们在苹果自带浏览器底部就能看到工具栏。工具栏提供了和当前任务相关的操作和按钮，在滑动时可以收起。工具栏同Tab栏一样都是位于底部，但是高度略窄，它的高度是44pt（88px）。
闪屏资源
由于闪屏是一张完整的静态满屏图片，而不是诸如其他页面一样是由切图和文本拼成的，所以闪屏的适配更简单粗暴：我们需要提供不同尺寸的闪屏效果。闪屏资源就是满尺寸的一张png，上端不需要状态栏里的信息，程序会在开发完毕时自动在闪屏中补上状态栏里的信息。我们需要提供的闪屏尺寸有：
我们需要提供的闪屏尺寸 一共6张
安全距离
作为iPhone全面屏系列手机，齐刘海无疑是一个特征。但是全面屏给我们带来了使用上的问题：上下左右是圆角、顶部齐刘海使屏幕凹下一块。所以在带有圆角和齐刘海的红色标注区域不应该放置任何功能，仅可在上端放置状态栏，底部圆角区域留白。我们界面竖屏使用时左右临近手机边缘的区域不建议放任何操作，应留出一定的边距（Margin）。这个边距是多少呢？没有明确严格的规定，但是一般的APP会留出16pt-24pt不等的边距防止用户在屏幕边缘不好点击。不过内容展现却可以呈现在边距里。如果我们横屏使用手机时，左右同样不好点对吧？横屏同时还有令人闹心的“齐刘海”，所以同样左右需留出一定的边距来。所以我们就得到一个安全距离的矩形，内容可以完整地呈现在这个安全距离内。
iPhone X系列由于全面屏上下出现不可操作区域
色彩
其实在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以。只要符合产品气质并且在色彩心理学理论上思考，用什么颜色是设计师的自由。官方建议的系统色彩如下：
iPhone的系统色
字体
iOS中英文使用的是San Francisco (SF)字体。（下载地址：https://developer.apple.com/fonts
），中文使用的是苹方黑体。安装好以后你会发现中文苹方的字族有不少可供选择的粗细，那么我们设计界面时需要根据信息的逻辑权重分配粗细：标题应该较粗，而说明字体应该较细并且可以设计成灰色。其实字体的设计最重要的考量就是信息层级。苹果认为APP的字体信息层级有：大标题（Large Title）、标题一（Title 1）、标题二（Title 2）、标题三（Title 3）、头条（Headline）、正文（Body）、标注（Callout）、副标题（Subhead）、注解（Footnote）、注释一（Caption 1）、注释二（Caption 2）这几种。
HIG对APP的字体建议（基于@2x）
注意一下，以上HIG的建议全部是针对英文SF字体而言的，中文字体需要我们灵活运用，以最终呈现效果为基准调整。在设计具体界面时我们一定要以用户的使用情景来考虑，把设计稿导入手机去思考行高与字体大小是否是可读的。10pt（20px）是手机上显示的最小字体，最大的应该是目前的大标题字体了，达到了34pt（68px）。
启动图标
在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，好在现在我们只需要专注在启动图标设计本身上了。在苹果给我们的这套资源中，有Template-AppIcons-iOS这个文件。打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏，切出这些图标即可。图标设计建议使用AI等矢量软件，然后使用规范切出图像资源。
Template-AppIcons-iOS
控件
控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。这里格外说明一下，为了让设计更符合整体产品品牌调性，这些控件都可以做成自定义的设计样式。但是会增加工作量和切图资源，所以一般我们在诸如设置界面这些无需太体现设计感的页面中都使用系统默认控件，而在一些品牌感需要强调的页面或产品（诸如白噪音产品、游戏等）则会使用自定义的样式。如果我们想自己设计控件，那么注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。
默认控件
自定控件和默认控件
控件中无处不在的44pt（88px）
之前我们介绍过，人手指点击区域为7mm - 9mm，在@2x中就是44pt（88px）。苹果的导航条、列表、工具栏都充满了44pt（88px）这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。
无处不见的44pt（88px）
键盘
在设计模板中您也可以找到键盘的设计。这里需要提醒的是，很多朋友做界面设计时不考虑输入时键盘会遮挡到的空间，如果考虑到键盘弹起遮挡住的内容，那么我们的一些界面中的输入框和信息可能都需要上移了。当然也不是说可能被键盘遮挡的地方不可以防止任何内容，也有一种方式就是当输入一个表单时，页面会垂直定位到当前输入的位置。
键盘高度
iTunes 上传截图
在程序上传APPSTORE时我们需要提供多张APP截图，供用户了解APP的功能。很多设计师朋友不太清楚这个尺寸，这里我们需要提供1242 x 2688px和1125 x 2436px两套截图。有时我们也会在这个尺寸上做一些设计，让用户在APPSTORE打开APP介绍时获得最好的体验。
ITunes上传用截图
工作流程
前期调研阶段
在我们设计界面之前，我们必须做用户研究来了解产品的调性，比如用户研究手段中的用户画像、用户调研、用户使用场景分析、设计竞品分析等方法。不管工作再忙也建议大家做这些工作，他们对我们深入了解产品大有裨益。
原型图阶段
APP产品设计首先需要构建出原型图，之后再开始视觉设计。这个工作有些公司是由产品经理负责的，也有交互设计师负责的，还有的公司因为人手较少，也会出现由UI设计师来负责的情况。就算有产品经理或其他职能人员来完成原型图，那设计师也需要和产品经理等人员沟通需求和探讨原型图，并不是产品经理向设计师下发需求。设计师要站在视觉和交互的角度提出自己建设性的意见，而不是简单等原型图完成后照着上色而已。关于原型图的工具，我们不仅仅可以用Axure RP设计原型图，也可以使用像墨刀、Adobe XD等新工具来完成原型图。
构建APP原型图（工具：Adobe XD ）
视觉稿阶段
视觉稿阶段要根据原型图确定的内容和大体版式完成APP的界面设计。但是这里请大家注意一下：目前业界主要是以Sketch、Adobe XD、Photoshop这三个软件来完成APP的界面设计的。Sketch和Adobe XD都是以逻辑像素的单位（PT）来设计，然后导出图像的时候再进行放大两倍三倍来切图。这样做的好处是不用在设计的时候小心翼翼地使用偶数了。而Photoshop由于主要是处理图像而非矢量图形的软件，所以在设计移动端界面时如果做成一倍的话切图会变得很虚，所以要基于2倍图来进行界面设计。比如如果我们以iPhone6/7/8的界面来进行设计，那么在Sketch和Adobe XD中我们建立的画布就是375x667pt在Photoshop中则是750x1334px。
视觉稿设计阶段（工具：Adobe XD）
视觉稿设计阶段（工具：Adobe Photoshop）
iPhone6/7/8尺寸
在iPhone6/7/8尺寸下，状态栏高度20pt(40px)、导航栏44pt(88px)、Tab栏49pt(98px)、导航标题字号建议17pt(34px)、导航栏图标建议22pt(44px)、Tab栏图标建议30pt(60px)、Tab栏图标注释文字11pt(22px)、左右安全距离建议12pt(24px)。字号从10pt（20px）到34pt（68px）均可，要视具体情况决定。
在iPhone6/7/8尺寸下的设计尺寸
实时预览你的设计稿
我们在Sketch、Adobe XD、Photoshop等软件中设计界面时有一个问题：电脑上的效果总和手机上呈现的效果不同。这是由于尺寸和观察方式决定的，所以最好的方式是我们实时地查看设计稿在手机上的呈现效果。以下APP通过数据线或wifi链接电脑后，即可及时在手机中看到还没有保存的设计稿呈现在手机中的样子。
Design Mirror：可实时预览Photoshop、XD等设计稿
Adobe XD：可实时预览你的XD画板
Sketch Mirror：可实时预览你的Sketch画板
iPhoneX设计效果图
虽然程序员对于iPhoneX等全面屏手机的适配只需要设计师提供切图即可，但很多设计师比较青睐iPhone X和XR和XSM等的设计效果，也比较愿意把设计稿改成iPhoneX的设计图放到作品集或者在汇报时展示。那么我们应该怎么做呢？如果设计稿需要调整为iPhone X的显示效果，可以下载iOS 12设计源文件，把界面头和尾替换成iPhoneX专用头尾——专用头尾在刘海和圆角处做了留白。Sketch和XD都是用一倍图设计所以不涉及修改尺寸，改头尾即可。而PS比较复杂一点：需要先等比例变大整个设计稿，再把宽度改为1125宽度自适应即可。PS变大会虚还得一个一个调一下，然后再改头尾。
替换导航区域和Tab栏区域，即可得到iPhoneX设计效果
视觉规范
如果我们设计完了五六个主要界面，那么现在做什么呢？APP设计一套视觉规范是非常有必要的，有了视觉规范我们就可以把控整体的设计和语言。一般来说，一套APP应该有3-5种主题色和辅助色；5-10种不同变化的字体样式。这些如果没有落实到一套规范中，那么很容易跑偏。一套移动端应用的视觉规范应该包括:
主色/辅色/色彩规范: 规定APP所能使用的色彩种类；
文字颜色/大小规范: 规定APP主要使用文字的大小、颜色、应用场景等；
ICON规范: 规定APP的icon设计规范;
应用图标规范: 规定APP的应用图标使用规范；
按钮和交互态规范: 规定APP内所有按钮和交互态的样式；
间距规范: 规定APP内所有间距的尺寸。
设计规范的重要性
设计规范中的色彩规范
设计规范的类型可以是png或者多个页面组成的pdf文件。其他设计师打开我们制定的设计规范，可以清晰地找到当前项目适合使用的元素和字体大小、间距等。这样尽管是多人协同工作也可以保证项目设计风格的一致性。
切图
有了大小各异的iPhone尺寸，如果程序只有一套切图，那么一定会造成有的手机显示很差。所以我们要在程序里放置多套切图，然后让程序判断“主人”的手机是什么型号，显示不同的切图。这样才能够完美地呈现给用户最好的体验。切图的方法有很多种。Sketch和Adobe XD可以直接导出。Phtoshop不具备这个功能，但是我们可以使用cutterman、蓝湖等插件导出切图。不管是自带功能还是插件，导出切图都可以导出@2x和@3x图，而设计稿只需要iPhone6/7/8一套即可。
某项目中的切图文件
Adobe XD切图功能
在Adobe XD中将需要切出的元素在图层面板（Ctrl + Y）点击添加批量导出标记记录；然后点击 菜单 > 导出 > 所选画板 > 用于iOS > 导出所有画板 即可。
Adobe XD自带切图功能
使用Cutterman协助Photoshop切图
在Cutterman官网下载PS插件后，点击窗口 > 扩展功能 > Cutterman 调出面板；然后选择iOS 并高亮选中@3X和@2X；在图层面板里选中需要切图的元素，点击“导出选中图层”即可。
Photoshop中的Cutterman 插件
使用蓝湖切图
在蓝湖平台可以下载Sketch、Adobe XD或Photoshop对应的插件。然后在不同设计软件插件中将设计稿上传到蓝湖（PS需要用插件标记需要切出的元素），然后在蓝湖网页版点击切图按钮，选择视网膜@2x和高清视网膜@3x，再点击“下载该页全部切图”即可。
在蓝湖平台导出切图
切图命名规范
切图最后需要命名成规范的格式，这样方便程序员查找。切图命名的格式建议全英文，如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后，需要整理切图命名，或在切图之前对图层命名亦可。以下是切图元素的中英文对照：
切图命名对照表
然后我们要按照 功能_类型_名称_状态@倍数 来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是：
navi_icon_search_default@2x.png
(导航_图标_搜索_正常@2x.png)
iOS开发语言
作为iOS开发工程师，最重要的三个工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言；而Swift开发非常。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架，这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中，有许多控件和苹果自带程序是一致的，这就是UIKit的功劳。
开发视角 By @alvaroreyes
了解开发工程师的语言和工具对我们做设计也格外有帮助，我们会知道哪些效果能做，哪些效果不能做，哪些效果能做不好做等等。我找了大家关注的九个问题请教了iOS资深开发工程师程威：
和iOS工程师沟通
沟通完是不是学到了不少？我们明白了iOS工程师工作的机制后再设计界面时就可以做到心中有数了。在平时工作中我们也应该多和开发小哥哥聊聊，学习一下他们实现的方式，以便我们的设计能够更好地落地。
标注
切图后程序员得到了什么？一大堆碎片。把这些碎片重新用OC或者Swift构建回我们设计的界面并没有想的那么简单。所以开发工程师可能会总是在思考构架层面的问题，而忽视了视觉还原。并且由于iOS的开发人员不会使用设计软件，所以很容易出现比如14pt或者28px的文字，实现后是16pt或者32px。那就乱了套了不是，那怎么办呢？我们可以通过一些标注软件把图标之间的位置、字体的高度、字体的大小和色彩进行标注，让程序员轻松省力地还原我们的设计稿。
蓝湖平台自动标注功能
将Sketch和Adobe XD、Photoshop的设计稿上传至蓝湖后，在蓝湖平台每个页面左侧有一个类似分享的图标，点击会获取一个网址，这个网址就是系统生成的自动标注。它会自动识别设计稿中字体大小和间距等，甚至有代码参考。
蓝湖自动标注工具
使用Px像素大厨标注
像素大厨同样提供了自动标注、手动标注两种标注方法。自动标注需要上传设计稿，手动标注需要设计师使用“尺子”来测量距离、“吸管”来吸取色号。在界面上部有单位选择，如果我们给iOS开发做标注，那么单位最好选择PT，与开发环境一致。
像素大厨标注工具
“标你妹啊”进行自动标注
国产标注在线神器。只需要登录网站后，上传设计稿可直接生成标注网址，发给程序员就可以啦。同样提供代码参考和自动标注间距尺寸等功能。
在线标注工具 - 标你妹啊
Markman 手动标注
Markman同样是国产标注神器。而且是我使用的第一个标注工具，选用底部工具可以进行手动标注，标注后导出png标注图即可。
Markman标注工具
动效
据资深iOS开发程威介绍，目前的iOS主流的动效实现方式有以下四种：第一种，设计师给到开发动效视频或gif，开发人员照着效果编写代码调用静态切图重新做一遍，这样的还原度可能会有问题，需要开发和设计师多沟通。第二种，可以使用序列帧的方式实现动画，原理是给到开发按顺序命名的png，比如1.png、2.png等，然后用代码将它们快速替换实现动画。第三种，我们也可以给到程序员avi等视频文件直接插入视频。第四种，使用Airbnb开源的Lottie（https://airbnb.design/lottie/）。具体来说是通过after effects来完成动效，然后通过BodyMovin插件导出json文件，里面记录的就是动画的细节，然后在安卓，iOS，React Native上都有一套对应的SDK，来解析这个json文件来还原成动画。这个方式的还原度很高，除了部分AE不支持外堪称完美。其实还有QuartzCode、CoreAnimator等工具，有兴趣的大家可以去尝试一下。但我认为不管使用什么方式，最优秀的动效还是要靠设计师和开发人员“真诚地交流”。
项目走查
当我们最终完成了界面设计，需要和我们的设计稿进行对照还原。除了用肉眼辨别之外，我们也可以把还原后的程序截图下来放到PS中对照，寻找问题。那么我们给程序员的反馈就是一个有截图对照和标注的文档，这个文档可以成为Buglist。
截图后可在软件中对比寻找问题
项目走查除了判断视觉还原程度，也要兼顾动效、点击状态等动态效果是否符合设计预期。如果有问题需要及时和技术反馈，反馈的方式建议是文档类型，保证有据可查。
总结
我们一起来小结一下：当我们设计iOS平台的APP时，我们可以选择使用Sketch、Adobe XD、Photoshop等工具。为了切图和适配方便，设计时我们以iPhone6/7/8尺寸（750x1334px或375x667pt）为基准设计。设计过程中我们需要通过诸如Adobe XD或Mirror等工具随时在手机上预览设计效果。之后我们需要把图像资源输出成@2x视网膜屏幕和@3x高清视网膜屏幕两套图像资源，这时可以使用Cutterman或Sketch和XD自带的切图功能切图。为了保证开发工程师能够完美地还原我们的设计稿，我们需要提供标注。通过蓝湖或像素大厨、Markman、标你妹啊等工具我们可以把设计稿完美标注给到程序员，这时程序员就清晰地明白每个元素的大小和间距了。最后，我们要对完成的程序进行验收。本篇文章写于二零一八年，按照惯例，每年苹果都会举办两场发布会发布新产品。如果后面发布了新的手机，也希望大家能够理清脉络，透过现象看到本质，找出合适的设计适配方法。
参考资料
苹果开发者中心网址：
苹果人机交互规范：
https://developer.apple.com/design/human-interface-guidelines/
iOS设计资源下载：
https://developer.apple.com/design/resources/
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
可视化不是单纯的数据展示，其真正价值是设计出可以被读者轻松理解的数据展示。设计过程中的每一个选择，最终
都应落脚于读者的体验，而非设计者个人。
蓝蓝设计的小编 http://www.lanlanwork.com
