移动端原型图设计

一、移动端界面的6大模块

移动端界面的包含了6大模块：状态栏、导航栏、内容区域、标签栏、轻提示、弹出层。

状态栏显示设备的关键信息，设备模型、网络提供商、网络信号强度、电池使用量、时间等信息，高度45px。

导航栏在状态栏下方，内容区上方，提供导航作用，包括：返回按钮、标题，高度45px。

内容区域即页面的正文部分，常见的设计形式包括菜单列表、图标列表、卡片列表、图文组合等内容。（内容区域长大于一屏幕时，将内容区域动态面板的宽度稍微大于375，用于隐藏滚动条。）

标签栏app底部，在不同功能模块间快速切换，是app的一级分类，数量3-5个，常在右上角搭配设计徽标数，例如微信，提示有内容更新。

轻提示是一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。字数控制在14个字以内，常用的实现方案为吐司提示。例如提示“加载成功”、“加载失败”、“网络连接失败”、“正在加载”等内容。

弹出层适用于与用户的交互场景，包括模态框、动作面板、弹出面板。模态框用作显示系统的重要信息，并请求用户进行操作反馈，例如：删除某个重要内容时，弹出对话框进行二次确认。动作面板从顶部或者底部浮出的模态，提供和当前场景相关的 2 个以上操作或者更多描述内容，例如分享功能，不在页面中展示的但是又是可以让用户执行的其他操作。

动作面板

4大模块

二、移动端界面的设计规范

1.分辨率

移动端端页面分辨率设置为375px * 667px，状态栏、导航栏的高度为45px，标签栏高度为60px。

2.字体

在axure做设计时字体大小使用偶数。

标题 #666 14px、16px、18px，加粗

正文 #666 12px/行距20、14px/行距28

辅助文字 #999 12px

失效文字 #ccc 12px

链接文字 #1ABC9C 14px

3.辅助线

在axure做设计时要善于使用辅助线，特别是移动端的原型图设计，页面布局的要求相比于PC页面更加突出。

内容区域，左右两边留白10px或者20px，可以通过辅助线协助。另外屏幕尺寸的标记也可以使用辅助线设置。

两个常用的操作：右击辅助线可以将其锁定，以防止拖动元件时会将辅助线会跟着一起移动。可以通过按住Ctrl拖动创建全局辅助线，全局辅助线就是在所有页面中产生一条相同的辅助线。

4.其他

原型设计时元件的宽度建议统一保持为5和10的倍数，元件的间距建议为10px或20px；

使用键盘方向键移动选中的元件时每次移动距离为1px ，使用ctrl+键盘方向键每次移动距离为10px；

按住Ctrl+鼠标拖动可以快速的复制元件，按住Shift+鼠标拖动可以垂直或水平的移动元件；