关于UI界面每个界面尺寸适配的问题

界面名字

每个界面需定出一个前缀。比如主页，前缀是 home，设置前缀为 settings，课程表是 lesson。

定好前缀之后。设计师就可以建立文件夹：

主页(home)
设置(settings)
课程表(lesson)
课程概述(overview)
共用(shared)

之后将素材放到对应的文件夹下，这样就容易找了。假如很多界面都用到的素材，比如一些按钮之类，就放到shared目录下。

设计师的英文似乎不是很好，他们的喜欢用中文命名，但是程序需要使用英文。假如一开始不约定好，程序员需要使用素材的时候，就很难跟设计师取的名字对应起来，往往会不知道素材放到什么地方。

素材名字

最终的素材名字，只使用小写字母和数字，单词的分隔用中划线 - 分隔起来，不同界面的素材前面加上对应界面的前缀。比如

home-background.png
settings-icon-email.png
settings-icon-help.png
shared-button-0.png

名字使用对应的界面前缀，是为了知道素材原始出处。这样有问题了，可以找到原始文件重新导出。也避免了名字冲突。

只使用字母和数字，中划线，是为避免出现中文、空格、标点、斜杠等特殊字符。在不同的系统上，字符编码会有所不同，而一些特殊字符会有特别的含义。中文或者特殊字符容易出些古怪问题。比如程序员写个脚本去统一拷贝、处理素材，中文或特殊字符就特别容易出问题。

只使用小写字母，是为避免写错大小写。比如 Mac 系统，默认情况下对于大小写是不区别的，假如图片

home-background.png

错写成

home-Background.png

在模拟器中显示是没有问题的。而真机中名字是区分大小写的，这样模拟器跟真机的行为就不对应了。全部使用小写字母就直接杜绝了这问题。

使用中划线 - 而不使用下划线 _ 分隔。是为了将来更好地搜索查找。工程中的程序变量的名字，不会出现中划线，只会使用下划线。当素材名字使用中划线，就可以跟程序变量名字区别开来，以后在工程中就容易搜索。

这些名字规范，看起来简单，但可以杜绝很多问题。项目中，素材名字应该是设计师导出的时候就取好了，这样一旦需要修改，直接复制过来就行了。但现实中，我发觉设计师往往不会注意这些，经常需要程序员重新命名。这样修改起来就多了一个步骤。

尺寸单位

设计师往往使用像素作为设计单位，但是对于 iOS 来说。使用像素来思考是不好的，应该使用点(point)来思考。点和像素的区别，参考我的旧文。

比如

• iPhone 6，尺寸为 375 x 667 个点，2x 模式。
• iPhone 6 Plus，尺寸为 414 × 736，3x 模式。
• iPad，尺寸为 1024 × 768，有 1x 和 2x 模式。

使用点为单位，容易跟程序对应起来。并且每个 iOS 设备，相同的点数，物理上的长度是差不多的。44个点，就是手机上导航栏，工具栏的高度，这样的思考方式可以大致估计到真实的物理长度。而用像素，容易使得做出的图片过大或者过小。

当使用非矢量图片时，将点数乘以对应的 x 模式，就等于需要做的像素大小。

当矢量工具来做素材的时候，应该直接做点那个尺寸。比如44 x 66 个点的按钮。就建立一个44 x 66的场景。之后再导出成 2 倍图，3 倍图，或者直接导出成 svg 的矢量图片。

最终标注设计稿的时候，也使用点作为单位来标注。其实标注的时候，只要导出一个 1x 的预览图，就可以用工具来标注了。当 1x 的时候，点和像素就是直接对应的。

设计尺寸

手机 App 只需要一个设计稿，不需要设计多个。假如平板上的布局跟手机是不一样的，需要再出一个设计稿。假如是基本一样的，连平板的设计稿也不需要。比如微信的的 iPhone 版和 iPad 版，流程布局是一致的，其实只需要出一个 iPhone 的设计稿。

设计的时候，选取一个现在最主流，你最容易获取的设备的尺寸来设计。比如现在 iPhone 最主流是 6 的尺寸，就选择

375 x 667 点，2x 模式

作为设计尺寸。之后整个设计稿就使用这个尺寸来设计，不要一时一个样。假如你是个人开发者，身边只有 5s，就使用 5s 的尺寸来设计。

这样就可以将设计稿截图，放到手机中看效果。适配不能直接按比例放大或者缩小，假如你将 iPhone 6s 的设计稿，放到 5s 中看，图片按比例缩小了，但你看到的并非最终效果。

标注

设计师来标注？

其实我自己觉得让美术标注，是浪费人力的。只要出个 1x 的预览图，再让程序员装个马克鳗、或Pixel Winch、或 PS，就可以让程序员来测量尺寸了。

但很多程序员都会推卸责任，说标注是美术的事情。

还是需要讨论一下如何标注。标注有主要有 3 种，颜色、字体、尺寸。

颜色标注

颜色应该先定义一个色板。比如按照下面方式

1. [颜色色块] #bcbcbc。用于文字。
2. [颜色色块] #ff8c0f。主色调，橙色。
3. [颜色色块] #dddddd。主要用于列表项的分隔线颜色。

其中[颜色色块]，就是一个小色块，用来看颜色的预览。

之后在设计稿的预览图中，就可以使用颜色编号来标注。这样标注比较清晰，一个项目中出现的颜色不会出现太多中，基本不会超过 10 种颜色。这样也容易跟程序对应起来，程序写这些界面，也需要定义一个色盘。这种方式也容易切换主题。比如白天模式和夜间模式。

字体标注

字体也应先定义出一个字体的字体盘，比如：

1. 系统字体，14号。主要用于文字的内容。
2. 系统字体，18号。用于文字的标题。
3. 等宽字体，14号。用于显示时间。

之后在设计稿的预览图中，就可以使用字体编号来标注。一个项目的字体也不会出现太多，大概也就 5、6种。这样也容易跟程序对应起来。

尺寸标注

只需要标注一些不会变化的地方尺寸。比如按钮大小，边距、图标大小等，无论屏幕多大，都是固定不变的。而一些随着会拉伸的地方，就直接注明会拉伸。间距之类就注明，哪几个间距是一样的就行。

有些需要等比例放大或者缩小的，就注明一个比例。

标注就如同程序中的注释，并非越多越好。假如是可以看预览图就明白的，其实是没有必要做标注的。

最后

设计图只是参考，最终以跑到机子上的效果为准。设定规则的时候，需要大家一起参与制定，共同遵守，并解释好为什么需要这样做。

其实我清楚，现实中的项目，是不会这样理想的。往往会相互扯皮，推卸责任。一个项目，需要一个了解设计和程序两方面的强有力的人来协调，并在有纠纷的时候可一锤定音。这个人就是所谓的产品经理。

但现实中的产品经理往往是不了解设计，也不了解程序，并没有决策权，这种所谓的产品经理光有个名字，其实是没有什么用处的。而有了决策权之后，也需要承担义务，当决策错了的时候，最大的责任就在产品经理。而错的次数多了，这个产品经理就不能让人信服，也基本无什么用处了。

一、UI的控件概述：

1、框架UI的元素分为4类：

A：栏：状态栏目和导航栏的结合体；

B：内容视图：应用显示的内容信息，包括相关的交互行为，例如滚屏、插入、删除等操作进行排序；

C：控制元素：产品行为或显示的信息；

D：临时视图：临时向用户提供重要的信息，或提供额外的功能和选项。

2、框架UI的尺寸：

3、图标icon的尺寸：

 

二、UI的布局概述：

1、可点击对象的区域：尺寸不要小于44*44px;

2、将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从 左到右的用户来说，更贴近屏幕左侧位置容易引起关注的；

3、利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来 说，更能吸引目光，看上去更加重要；

三、UI的模态情景概述：

1、模态：一种用来承载特定内容、功能或体验的模式，有其自身的优缺点。它可以帮助用户完 成某些任务，或在不受干扰的情况下获取信息，但会暂时性的强迫用户停止与应用其他部分 的互动；

2、保持模态任务的简单、简短、易聚焦：不要将模态视图打造的好像是嵌在应用当中的迷你应用；

3、始终提供一种明显而安全的退出方式：要确保用户在退出模态视图时，能够对接下来要发生的 事情有明确的认知；

4、使用警告框来传递那些必不可少的重要信息，通常还要提供可执行的功能选项。

 

四、UI的手势交互概述：

A：通过点击(tap)：按压或选择一个对象；

B：通过拖拽：滚屏或移动对象（将从界面的一边移动到另一边）；

C：通过滑动(flick)：快速滚屏或移动对象；

D：通过一个手指轻扫(swipe)：可展现更多内容，例如：列表的删除按钮，从界面顶端展开通知中心；

E：通过双击(double tap)：可将内容放大置于屏幕中间，主要是放大和缩小的转换；

F：通过双指涨开(pinch open)或闭合(pinch close)：对内容进行放大或缩小；

G：通过长按(touch and hold)：在可编辑或可选择的文字上显示放大镜，用来定位光标；

H：通过摇晃(shake)机身可执行撤销或重做的操作。

 五、UI的动画概述：

1、漂亮而精致的动画效果遍布于ios各处，它们使应用体验更具动态性，更加吸引人，精细而恰 当的动画效果可以：

A：传达状态

B：增强用户对于直接操作的感知

C：通过视觉化的 方式向用户呈现操作结果

2、尽可能与ios内置的应用的动画模式保持一致：人们已经习惯内置应用当中各种精妙的动 画效果，实际上，用户往往会将内置应用当中的动效看作一种体验的标准，例如切换视图时的 平滑过渡效果，切换横竖屏时的流畅反馈，或是能表现出各种物理效果的滚屏动画等等，这些 都逐渐成为了人们预期当中的一部分。

 

六、UI的字体概述：

1、字体是ios7设计的关键，大多数操作都是点击文字或点击图标，按钮也会有，但是占的比重很小；

2、苹果的默认字体是Helvetica Nenu，一种纤细简单的文字，但那不是你唯一的选择；

3、Ios7的字号稍微加大了，主要由于它的用途，而且文字之间的层级关系至关重要，利用颜色 和不同的粗细，来保持文字的布局和UI元素的清晰易懂。

4、苹果字体规格说明：

A：导航栏标题：medium 34px；

B：按钮和表头：light 34px

C：表格标签：Regular 28px；

D：Tab页图标标签：Regular 20px
 

关于IOS适配的问题，我的做法是：
1.确定2X的效果（就是题主说的750x1334）
2.确定字号
3.根据开发结果看需不需要在其他尺寸上适当调整
（有时为了保证不同分辨率、点距和屏幕尺寸下所有元素看起来都差不多大，要给不同版本做下调整，这个只要跟开发那边沟通好就行）→看到楼上这里加一句哈，适配后还是可能出现视觉上的字小啊，元素显得小之类的问题，作为UI我们要保证设计在各种尺寸下视觉上最舒适的比例。

IOS挪到安卓上的话，我的做法是：
从750等比调整到720（这个过程里也可以保持元素原来的尺寸），然后重新调下排版
说白了还是得重新排一下，不过变化不会太大，为了效果嘛