今天完成的事情：      

ppt

明天计划的事情：

ppt

遇到的问题： 

2018年的移动UI设计规范

Part 1    设计前的准备工作

①合适的设计工具

Sketch  

精不精通Sketch，就看插件用的溜不溜，推荐个网站：Sketch.cm

无论是学习Sketch，还是搜插件、找素材，都是Sketch使用者的优选项。

Sketch是OS X平台独占，需要下载Sketch可以到这个网站去下载。

这里推荐个Mac平台应用的下载网站，使用Mac的小伙伴可以去这里下：Xclient

我个人是很推荐使用Sketch做UI设计的，软件本身已经提供了大量的IOS和Android系统设计资源，配合各类插件，几乎无所不能。

Photoshop

相比于Sketch来说，体型胖了点，在UI设计上略逊一筹。不过因为Sketch是OS X独占，所以因为平台限制的原因，用PS设计也没有问题。

我很久没用它做UI设计了，也没啥可推荐的了。

②做好版本管理、文件归档的工作

专业水平不仅体现在设计能力之上，优秀的管理能力也是重要的职业素养。

合理规划好设计版本，进行明确的文件归档工作，有助于提高设计师的工作效率。

这里不赘述了，每个人有自己的版本管理方式，不过目标只有一个：清晰高效。

Part 2   关于手机的基础概念

这里的概念性内容不要强行记忆，理解即可，它是做移动UI设计的理论常识。

①基础常识：手机分辨率、屏幕尺寸、屏幕密度

手机分辨率：

手机屏幕的像素点数。比如750*1334、720*1280等等，细分还有物理分辨率和逻辑分辨率，这里不扩展讲解了，想了解自行百度吧。

手机分辨率牵扯到的就是工作时设计稿的尺寸，只要记住设计尺寸就可以了。

屏幕尺寸：

手机对角线的物理尺寸，单位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

屏幕尺寸和设计其实关系不大，主要是用来计算屏幕密度的。

屏幕密度(DPI或PPI)：

每英寸的像素点数。简单理解就是屏幕密度越大，画面越逼真细腻。

下面是屏幕密度的计算方法，范例是5英寸，分辨率为1920*1080的手机：

屏幕密度牵扯最多的是安卓系统，安卓手机屏幕本身的密度种类非常多，这也是导致了安卓系统需要提供多套切图的原因。(使用SVG格式图片可以解决多套切图和适配的问题，这个我们下面会提到)

Part 3  基础设计规范——IOS系统

这是苹果的开发者官网：传送门

这里有持续更新的最新设计规范和资源模板，虽然是全英文的，但并不影响阅读。

设计师应该学会从官方获得设计资料，这比其他途径获得的资料更加全面和权威。

• 最新系统版本：IOS 11.4.1
• 中文字体：苹方黑体
• 英文字体：San Francisco
• 官方系统设计模板下载：Apple Design Resources
• 官方系统设计字体下载：点我下载
  

下图是截止到目前，可能还需要支持的机型和对应的设计尺寸：

① 设计稿尺寸

只推荐750*1334的尺寸来做设计稿，这是向上向下都最容易适配的尺寸，包括用这个尺寸去适配Android版。

除了IPhone X的比例特殊外，其他的IPhone比例几乎差不多的，比较容易适配。

使用Sketch设计：

使用375 * 667尺寸即可，开发在Xcode里也是使用这个尺寸。

导出的@2x图适配IPhone 5/5S/5C/SE   6/6S/7/7S/8

导出的@3x图适配Iphone 6/6S/7/7S/8 Plus    IPhone X

使用Photoshop设计：

画布就建成750 * 1334尺寸的即可，在这个前提之下，

导出原尺寸图片加后缀@2x，适配IPhone 5/5S/5C/SE   6/6S/7/7S/8

导出1.5倍图片加后缀@3x，适配IPhone 6/6S/7/7S/8 Plus    IPhone X

②常用数据

下面的内容苹果官方提供的模板文档其实都有对应的数据，可以去官网下载。

字号使用建议(这个不是硬性规定，根据视觉效果酌情使用)

导航文字          34-38px

标题文字          28-34px

正文文字          26-30px

辅助文字          20-24px

Tab bar文字     20px

图标尺寸建议

APP应用图标，建议使用1024*1024尺寸去做，逐级缩小去应用到各种场景中。

SKetch已经提供了IOS和Android系统的APP尺寸图标模板，直接使用就可以了。

③ 界面适配

程序内部的功能界面：这种界面通过写成自适应的界面可以很好的适配各种机型；如果有特殊的布局要求，也可以让开发根据特定机型去调整，不需要单独为各类机型再做设计稿。

覆盖全屏类的界面：比如闪屏、启动页、引导界面、插画页面等等，这类覆盖全屏的界面必须要单独为IPhone X的比例重新绘制或者调整设计稿。

其他的IPhone机型，遇到这种界面，整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图就可以了。

IPhone X的安全区域：IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后，中间的内容显示区域。如果你不得不使用IPhoneX的尺寸做设计稿，请一定设置好参考线，不要把内容做进这两块区域内部

④ 界面标注切图

标注切图纯粹是重复性劳动，但还要花费大量时间。不过现在配合SKetch插件，基本上实现了标注切图的自动化，所以效率已经提升了非常多了。

这里就不用实例说明了，有需要可以查看之前的文章。

————————      简单理解标注切图的原理     ———————

1. 简单理解APP构成：

下图是IOS开发工具Xcode里的一个空白页面，图片的文字标注请仔细阅读。

本质上，开发写APP界面和设计做设计稿是一样的，只不过两者实现方法不同。

APP的构成远远要比上图写的复杂的多，我们这里使用最简单的理解方式。

2. 设计稿的标注

根据上图我们可以理解设计稿和程序之间的关系：

设计稿里的按钮、文字、图标、列表、背景色、线条等等所有的设计元素，

在Xcode里都有对应的控件，设计元素必须使用对应控件，才能在APP的界面里显示出来。

设计稿的标注，实质上是标注的各类控件的属性以及相对于其他控件的关系：

设计稿中：

• 文字的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；
• 图片的自身属性：宽高、间距、距离、透明度。
  

程序的对应控件：

• Label的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；
• Image View的自身属性：宽高、间距、距离、透明度。
  

实际上各类控件的属性也要比这个复杂的多，这里是最简单理解的举例说明。

如今使用本地化插件Sketch Measure，几乎不用手工标注，标注导出HTML后，扔给开发，他们想看什么属性自己点击查看就是了，所以我们这里了解下标注原理就行。

而一些线上工具的插件，比如蓝湖、墨刀、Mockplus等等，功能更加丰富，各位根据自身情况灵活运用吧。

Sketch Measure去Sketch.im下载