2.4.7 Design System - Dropdown

那些曾经很红 现在也不曾被遗忘的 Bands
从小就蛮讨厌补习的 不懂为什麽学校教的东西 下课还要来荼毒我
还好在一个比较自由的家庭教育下 我妈也只是鼓励去听一堂英文课看看
去了之後很意外老师教的都是课外的有趣故事 每次下课前大家都会一起唱一些英文歌
也因此有机会在国中接触到 Beatles, Oasis, Coldplay 的音乐
後来出国才知道 原来他们这麽红 也变成了我在陌生国度交朋友的工具
那些生活中不在课堂的东西 很有可能都是未来的养分

今天研究 Dropdown
最常用到的就是筛选器 Filter 会用到
下拉选单有很多可能,可能是选择日期、文字项目的清单或是多项产品类别的筛选

它跟按钮一样会有不同状态,Hover, Focus, Disable, Error, Selected 等等
Dropdown 在开启下拉视窗与关闭下拉视窗的 Focus 项目也会有不同
https://ithelp.ithome.com.tw/upload/images/20211001/20142064JMkU33Wp6p.png
来源:Carbon Design System

选择日期展开 Date Picker,也有分选择单一日期、周、月、年、起迄日的不同
可以看看 Figma 有人将各种形式日期选择做出来 前往看看

下拉选单所展开的视窗有些在清单项目太多时,视窗有限制高度,那就要注意让用户知道下方视窗是 Scrollable 可滚动的、项目排序规范是什麽?依照字母 A-Z 还是字元数长度?
https://ithelp.ithome.com.tw/upload/images/20211001/201420646LPsLSccdH.png
来源:Carbon Design System

若是展开为多项产品的分类筛选,要注意项目的排序规则,选项也要避免文字太长
像 Airbnb 这样的住宿配备筛选,有时候在一些网站会用 Dropdown
要怎麽布局分类跟分类项?用户选择後,筛选项目数量的呈现、关闭下拉选单的方式都得考虑进去
https://ithelp.ithome.com.tw/upload/images/20211001/20142064qqxRwyEGKO.png


实务经验上的小故事

不管你是什麽职位,在参与对外会议时,代表的都是公司和团队,必须要舍弃个人主观的意识
有些技术上的问题内部知道即可、面对不能承诺客户的也不用在第一时间拒绝,因为通常没有人在当下听得进去
可以说「我们会再评估看看」、「我们有发现这件事,团队正在处理中」等等
这些都是在撞墙几次後才领悟到的事,希望大家都不用撞墙

Day 16 End 周末愉快~


<<:  [Day 16] - 初探永丰银行线上收款API - 丰收款 - Sign值计算(1)

>>:  Day 30 - Module

我遇到的RWD网页难题

上次文章终於迎来续集 我的第一个RWD网页 这次的网页练习跟上次的网页是同系列的,不过这次可是有记起...

非线性回归-多项式回归 (polynomial regression in r)

废话不多说,直接附上code 影片含有程序码详细解说,若有误再烦请告知,谢谢 data(iris) ...

Redux流程 + 如何调用 redux 的 state

这篇会介绍的几种调用 redux state 的方式,都是工作上遇到的,算是长了知识,网路上也许会有...

Day-29 请说明 RDBMS 和 NOSQL 是什麽?

传说中的资料库来了,我也不太熟,所以大家快来认识一下吧! 据说面试中有提到资料库就会考这题 RDB...

React Hooks - useState

前一篇有提到在 function component 没有 this,不能使用 this.state...