《这个控件叫什么》阅读笔记

推荐阅读

1、Badge /小红点/徽标

• 注意文字超长的处理
• 不一定真的是小红点哟

主要的集中表现

2、A-Z index/字母索引导航

因为易用性 引入这个控件, 不要因为这个控件造成不便(尤其是移动端 界面遮挡, 不易点选)

锤子科技Smartisan OS
12306快速输入
字母分区

3、Segment Controls按钮

通过点击切换下面展示列表
对比Tabs 主要的区别就是 Tabs Segment Controls 展示数量有限, 本质是筛选不是展示分类

左为Tabs，右为Segment Controls

4、Page Controls/页面指示器/页面控制器

有的可以点 有的不可以点 电脑一般又搭配左右箭头 移动端可以滑动 页面层级属于顶层层级段

轮播图

5、Stepper/步进器

一般用于整数输入 可以设置上下限

增加 减少
还可以直接输入

6、Switch/切换开关

分为三个阶段 开 关 和过渡过程 如果单独触发这个控件 最好在前端处理上一步到位 不要等服务器端的响应 如果不成功 再回退回来
对于只用两种切互斥的状态都是这样的一个设计 比如 like/dislike 关注/取消关注; 电脑端最好搭配文字说明

主要表现形式

7、Toast/Message

用于快速说明简单的操作结果 旨在说明结果切不影响用户操作和视图
注意不要阻挡 相互重叠 如果返回结果很重要 请更换其他提示组件

Toast

message
对于实时的结果 也可以用 页面内提示 和 动态按钮

8、Picker/拾取器

常用的比如 datapicker timepicker areapicker(三级地区选择)等等

选择日期
地址选择

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

15、Progress/进度条 Drawer/抽屉