luxiaofang

原文地址:https://mp.weixin.qq.com/s/8gHWgyxRICk3tsUHkfMgtA

  • 窗体规范

    • 整体选择375*667的尺寸进行窗体设计

    • 状态栏高度为20px;

    • 导航栏为44px;

    • 主菜单高度为50px;

    • 内容区域高度为自适应。

      image-20191209152847101
  • 导航规范

    导航是移动产品的信息入口,让用户知道自己目前处于哪个位置,引导用户进行相关操作。

    常见的导航有:顶部导航、侧边抽屉导航、底部导航、分页器导航、面包屑导航、步骤条导航、Tab标签导航、宫格导航、分段控制器导航等。

    • 步骤条导航

    • 底部导航

    • 分段导航

    • 标签导航

    • 面包屑导航

      image-20191209152929028

img

  • 字体规范

    image-20191209153039675

  • 颜色规范

    颜色一般分为主题色和辅助色。主题色可以表现重要信息,突出视觉传达的效果,影响用户对整个产品的整体印象,一般应用在logo、导航栏、页签、标签、按钮、图标上。辅助色可以协助表达主色所传达的感受,帮助主色建立更完整的形象,减少用户对于主色的视觉疲劳,一般应用在文字、背景、表单、提示和分割线上。

image-20191209153348936

  • 手势规范

常见的手势有:左滑动、左右滑动、右滑动、上滑动、点击、下滑动。在手势设定过程中,对于用户的每一步操作、每一个页面切换之后,我们都要关注手势操作流与用户注意流,尽量减少给用户带来的不确定因素。

image-20191209153642879

  • 按钮规范

    按钮是原型设计中最常用的一个元件。按状态可将按钮分为成功按钮、警告按钮、错误按钮、默认按钮、禁用按钮。在设计按钮时,可以选择直角、小圆角、圆角三种样式,但按钮描述不建议超过6个文字。

image-20191209153733443

​ 按场景可将按钮分为悬浮按钮、填充按钮、线框按钮、图标按钮、文字按钮。我们可以通过尺寸、大小、填充、描边、圆角、扁平化、位置调整等方式让按钮更加醒目,并引导用户操作。

  • 输入规范

    • 输入规范主要从文案提示、页面交互和结果反馈三个方面,给用户在操作过程中更人性化的引导和友好提示。
    • 常见的输入类型有单行文本框、多行文本框、单选框、复选框、搜索框、下拉框、滑动开关、文件上传、图片上传、图片查看、日期选择器、城市选择器等。
    • 输入框分为可编辑输入框、不可编辑输入框、禁用输入框。以快捷登录为例,我们只有输入正确格式的手机号,才能点亮获取验证码按钮,并进行下一步输入验证码操作,验证码位数校验通过,才能点亮安全登录按钮。若直接不输入手机号,就操作输入验证码,是无法输入的,且页面会抛出异常提示。
  • 提示规范

    常见的提示有三种样式:Toast吐司提示、Snackbar底部弹框提示、Dialog对话框提示

    image-20191209154110250

  • 弹窗规范

    • 弹窗通过友好提示内容来激起用户进行下一步操作。即获得页面信息反馈后,用户行为发生变化。
    • 弹框分为模态弹框和非模态弹框两大类。模态弹框会打断用户的当前操作流程,只允许用户在当前弹窗上进行相关操作,且必须对该对话框进行响应,才能对对话框以外的内容进行下一步操作。非模态弹框则反之。
    • 弹窗需要定义蒙层的颜色、透明度、大小等样式,以及弹窗内的文字说明和按钮操作。模态弹窗包括:Dialog对话框、Actionbar操作菜单、Popover/Popup弹出框;非模态弹窗包括:Snackbar底部弹出框、Toast吐司、Tooltips气泡弹窗

image-20191209154319592

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-12-09
  • 2021-12-15
  • 2021-11-21
  • 2021-11-18
  • 2021-12-15
猜你喜欢
  • 2021-10-26
  • 2021-11-21
  • 2022-12-23
  • 2021-11-24
  • 2021-08-01
  • 2021-09-11
相关资源
相似解决方案