不管是电脑端的客户端、WEB端,手机端的iOS端、Android端,还是iPad端、iWatch端,又或是其他HMI系统(比如:车载系统、智能电视等),人与系统的交互设计模式主要设计的内容包括:

  • 界面元素
  • 闪屏/启动页
  • 布局
  • 引导
  • 导航
  • 搜索栏
  • 按钮
  • 弹窗
  • 表单
  • 微交互
  • 微文案
  • 缺省

包括但不限于以上元素将直接影响人与系统交互的使用感知,本次学习细化主要针对移动端,次要针对网页端的交互设计模式进行学习积累总结

备注:

iOS端系统界面基本元素

Bars栏

  • 状态栏、导航栏、搜索栏、选项栏、工具栏、范围栏、通告栏

    Views视图操作列表

  • 卡片视图、列表视图、文本视图、活动视图、图像视图、地图视图、集合视图等

    Controls控件

  • 按钮、弹窗、页面指示器、进度指示器、加载、刷新、选择框、标签、红点、文本输入框、分段控件、操作编辑菜单、操作列表、步进器、系统推送、开关、滚动条、回到顶部、toast提示、筛选框、选择器、键盘、滑块、分割线、字母索引导航等

    Android系统界面Material规范基本元素

    布局

  • 状态栏、应用栏/主工具栏、左侧导航、右侧导航、底栏

    组件

  • 卡片视图、列表视图、文本视图、活动视图、图像视图、地图视图、集合视图等

  • 底部导航、按钮(常规按钮、悬浮按钮、文字按钮)、弹窗、页面指示器、进度指示器、加载、刷新、选择框、标签、红点、文本输入框、分段控件、操作编辑菜单、操作列表、步进器、系统推送、开关、滚动条、回到顶部、toast提示、筛选框、选择器、键盘、滑块、分割线、字母索引导航等