-
窗体规范
-
整体选择375*667的尺寸进行窗体设计
-
状态栏高度为20px;
-
导航栏为44px;
-
主菜单高度为50px;
-
内容区域高度为自适应。
-
-
导航规范
导航是移动产品的信息入口,让用户知道自己目前处于哪个位置,引导用户进行相关操作。
常见的导航有:顶部导航、侧边抽屉导航、底部导航、分页器导航、面包屑导航、步骤条导航、Tab标签导航、宫格导航、分段控制器导航等。
-
步骤条导航
-
底部导航
-
分段导航
-
标签导航
-
面包屑导航
-
-
字体规范
-
颜色规范
颜色一般分为主题色和辅助色。主题色可以表现重要信息,突出视觉传达的效果,影响用户对整个产品的整体印象,一般应用在logo、导航栏、页签、标签、按钮、图标上。辅助色可以协助表达主色所传达的感受,帮助主色建立更完整的形象,减少用户对于主色的视觉疲劳,一般应用在文字、背景、表单、提示和分割线上。
-
手势规范
常见的手势有:左滑动、左右滑动、右滑动、上滑动、点击、下滑动。在手势设定过程中,对于用户的每一步操作、每一个页面切换之后,我们都要关注手势操作流与用户注意流,尽量减少给用户带来的不确定因素。
-
按钮规范
按钮是原型设计中最常用的一个元件。按状态可将按钮分为成功按钮、警告按钮、错误按钮、默认按钮、禁用按钮。在设计按钮时,可以选择直角、小圆角、圆角三种样式,但按钮描述不建议超过6个文字。
按场景可将按钮分为悬浮按钮、填充按钮、线框按钮、图标按钮、文字按钮。我们可以通过尺寸、大小、填充、描边、圆角、扁平化、位置调整等方式让按钮更加醒目,并引导用户操作。
-
输入规范
- 输入规范主要从文案提示、页面交互和结果反馈三个方面,给用户在操作过程中更人性化的引导和友好提示。
- 常见的输入类型有单行文本框、多行文本框、单选框、复选框、搜索框、下拉框、滑动开关、文件上传、图片上传、图片查看、日期选择器、城市选择器等。
- 输入框分为可编辑输入框、不可编辑输入框、禁用输入框。以快捷登录为例,我们只有输入正确格式的手机号,才能点亮获取验证码按钮,并进行下一步输入验证码操作,验证码位数校验通过,才能点亮安全登录按钮。若直接不输入手机号,就操作输入验证码,是无法输入的,且页面会抛出异常提示。
-
提示规范
常见的提示有三种样式:Toast吐司提示、Snackbar底部弹框提示、Dialog对话框提示。
-
弹窗规范
- 弹窗通过友好提示内容来激起用户进行下一步操作。即获得页面信息反馈后,用户行为发生变化。
- 弹框分为模态弹框和非模态弹框两大类。模态弹框会打断用户的当前操作流程,只允许用户在当前弹窗上进行相关操作,且必须对该对话框进行响应,才能对对话框以外的内容进行下一步操作。非模态弹框则反之。
- 弹窗需要定义蒙层的颜色、透明度、大小等样式,以及弹窗内的文字说明和按钮操作。模态弹窗包括:Dialog对话框、Actionbar操作菜单、Popover/Popup弹出框;非模态弹窗包括:Snackbar底部弹出框、Toast吐司、Tooltips气泡弹窗。