1、Badge /小红点/徽标
- 注意文字超长的处理
- 不一定真的是小红点哟
主要的集中表现
2、A-Z index/字母索引导航
因为易用性 引入这个控件, 不要因为这个控件造成不便(尤其是移动端 界面遮挡, 不易点选)
锤子科技Smartisan OS
12306快速输入
字母分区
3、Segment Controls按钮
通过点击切换下面展示列表
对比Tabs 主要的区别就是TabsSegment Controls 展示数量有限, 本质是筛选不是展示分类
左为Tabs，右为Segment Controls
4、Page Controls/页面指示器/页面控制器
有的可以点 有的不可以点 电脑一般又搭配左右箭头 移动端可以滑动 页面层级属于顶层层级段
轮播图
5、Stepper/步进器
一般用于整数输入 可以设置上下限
增加 减少
还可以直接输入
6、Switch/切换开关
分为三个阶段 开 关 和过渡过程 如果单独触发这个控件 最好在前端处理上一步到位 不要等服务器端的响应 如果不成功 再回退回来
对于只用两种切互斥的状态都是这样的一个设计 比如 like/dislike 关注/取消关注; 电脑端最好搭配文字说明
主要表现形式
7、Toast/Message
用于快速说明简单的操作结果 旨在说明结果切不影响用户操作和视图
注意不要阻挡 相互重叠 如果返回结果很重要 请更换其他提示组件
Toast
message
对于实时的结果 也可以用 页面内提示 和 动态按钮
8、Picker/拾取器
常用的比如
datapickertimepickerareapicker(三级地区选择)等等
选择日期
地址选择
9、Soft Keyboard/软键盘
10、Action Sheet/动作菜单
11、Popover/气泡 Tooltip
快捷导航、提示引导、说明解释等
Popover作为快捷导航
Popover作为情境下的相关选项
Popover作为提示引导、展示附属信息
tooltips
12、Text fields/输入框
输入框由 Label input组件 提示填充组成
placeholder 很重要 尤其是移动端
易用性: 初始默认值 比如淘宝搜索框 自动获取焦点
约束性: 行高 字数限制 如果多输入表单的话 可以参考
顶端对齐-最高效填写
右对齐-效率较高单不太美观
左对齐-美观 会比一般填写效率慢些 更仔细
13、Skeleton Screen/加载占位图
适用于布局排版固定的内容区域,最好配合其他加载技术一起使用 参考
展示效果
14、Notification/通知提醒框
Notification
Notification
