本文仅用户个人学习记录使用,意在提高自己的交互设计,仅此而已,欢迎指正.
Dropdown 下拉菜单 最直接的作用就是弹出需要操作的列表,当页面的操作命令过多,为了将相同属性的操作放到一起,方便用户查找功能区,也为了让页面信息有分类,让页面保持简洁
Dropdown 和 Select 的区别: Select 用于选择,而 Dropdown 是分类的集合。
设计参考
优点:
- 将信息进行分组,使信息分类展示,保持页面整洁
- 方便用户查找,更细致化的分类让用户可以根据大类找到适合自己的操作而又能查看大类下还有哪些操作
- 这里的 dropdown 的内容有阴影是为了保证和其他模块进行区别,这样让页面看起来有模块化
- 当鼠标 hover 到 dropdown 的 sidebar 的时候,dropdown 的 content 内容直接根据 鼠标 hover 的位置渲染对应的方案类别内容,省去了用户点击的操作,这是站在了用户便捷性的角度去设计的
个人感悟
当分类里的信息太多的时候 dropdown 宽度直接和页面保持同一宽度,保证 dropdown 能够渲染更细致的内容,从展示信息角度来说,当用户 hover 就展示相应的信息会比用户触发点击才渲染更有人性化的设置(这样的设计方便用户快速预览相应的内容信息)