产品经理从专能到全能——界面布局规范

界面布局及字体规范

界面布局规范

1.iOS篇

iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。

状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域；

导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮；

主菜单栏(submenu，tab)：类似于页面的主菜单，提供整个应用的分类内容的快速跳转；

内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁；

我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

在iOS7以后的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计界面的时候多多注意下。

2.Android篇

Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。

Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。

状态栏高度为：50px

导航栏高度为：96px

主菜单栏高度为：96px

内容区域高度为：1038px(1280-50-96-96=1038)

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96px。

Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。

3.iOS/Android篇

页面布局和交互规范上建议安卓、iOS尽量统一，这样可以避免安卓和iOS分别设计一套稿子。当然土豪公司可以忽略这个建议，安卓和iOS分别做专门的设计当然更好。在中小型项目来看，设计资源紧张的话可以考虑安卓和iOS用同一个稿子，分别做相应的微调后输出适用安卓和iOS不同的尺寸要求就可以。

以iOS平台的iPhone5s的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用iOS和安卓尺寸的稿子。这里可以首先统一设计稿输出规范：

安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件。

iOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件。

界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等

4.界面间距

APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计。

字体

1.iOS篇

iPhone上的字体英文为：HelveticaNeue 。至于中文Mac下用的是黑体，Win下则为华文黑体(最新字体称为黑体-简)。所有字体要用双数字号。

2.iOS/Android篇

1）标准字规范重要、一般、弱。

2）标准字重要：大字号普遍用于大标题、top导航，较小字号用在分割模块的标题上。

3）标准字一般：主要用在大多数文字，比如正文。

4）标准字弱：普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。

颜色弹层及loading设计

颜色规范

1.标准色规范

重要、一般、弱。

2.标准色重要

重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。

3.标准色一般

都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。

4.标准色较弱

普遍用于背景色和不需要显眼的边角信息。

标准色示例（2种重要颜色红色和黑色）

弹层规范

1.弹层规范要注意分别设计安卓和ios的弹层，比如ios大多操作弹层由底部弹出，而安卓直接显示操作在页面中央，这样的交互操作应该遵循各自平台的设计要求。

2.弹层需求根据不同的功用设计不同的样式。
比如操作性弹层-右上角更多按钮触发；
提示性弹层：弱提示性的应用系统的token飘字提示即可；
需要强提示可以使用取消、确定的模块弹层；
更强提示而且弹层需要承载一定操作的，使用强引导弹层，右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

Loading规范

页面loading动画是APP界面必不可少的元素，增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用其他方式，让APP更生动、活泼；或者使用logo口号加强APP的品牌形象。