ui设计之线框图的组件分类

线框图：图标和组件

组件设计理论

• 组件性质
  • 输入元素
    • 行为输入，具有随机性：手贱，有个按钮就想点一点；
    • 意图输入，具有明确性：面向查询，有过滤信息的意图，为了固定查询条件；
  • 输出元素
    • 数据管理：导航、标签、分割线、分页符
    • 数据表现：表格、列表、图表、卡片、多媒体（图片视频）：含图量、含表量衡量数据表现水平；
    • 数据交互：弹窗、提示

元素	输入	输出	输出：数据管理	输出：数据表现	输出：数据交互
按钮	行为输入
滑块	行为输入
输入框	行为输入
日期选择器	意图输入
下拉框	意图输入
选择器	意图输入
标签		输出	数据管理
导航栏		输出	数据管理
分割线		输出	数据管理
分页符		输出	数据管理
表格		输出		数据表现
列表项		输出		数据表现
图表		输出		数据表现
卡片		输出		数据表现
多媒体		输出		数据表现
进度条		输出		数据表现
头像		输出		数据表现
弹窗		输出			数据交互
临时提示		输出			数据交互

输入元素：行为输入

1、按钮

1、标准按钮

2、图标按钮

3、分栏页签

2、滑块

1、程度滑块

2、范围滑块

3、输入框

输入元素：意图输入

1、日期选择器

2、下拉框

3、选择器

单选

多选

开关

评分

输出：数据管理

标签

导航栏

常规屏-顶部导航

顶部导航单元

底部导航

底部导航单元

宽屏-顶部导航

窄屏-顶部导航

分割线

分页符

点状分页符

数字分页符

输出：数据表现

表格

• 表头
• 表头单元格
• 单元格
• 其他表格内容
• 纵列

列表项

图表

卡片

多媒体

进度条

进度条

头像

头像；

输出：数据交互

弹窗

临时提示

临时提示toast、临时提示桌面

元素		输入	输出	输出：数据管理	输出：数据表现	输出：数据交互
按钮	标准按钮 图标按钮 分栏页签	行为输入
滑块	程度滑块 范围滑块	行为输入
输入框	input text	行为输入
日期选择器		意图输入
下拉框	select/option	意图输入
选择器	单选 input radio 多选 input checkbox 开关 评分	意图输入
标签			输出	数据管理
导航栏	常规屏 宽屏 窄屏 底部导航		输出	数据管理
分割线			输出	数据管理
分页符			输出	数据管理
表格			输出		数据表现
列表项			输出		数据表现
图表			输出		数据表现
卡片			输出		数据表现
多媒体			输出		数据表现
进度条			输出		数据表现
头像			输出		数据表现
弹窗			输出			数据交互
临时提示			输出			数据交互