标签一开始待在占位符的位置,聚焦或输入后缩着升到边框上,一个元素干两个活。
表单与输入
Form & Input
输入框内嵌前置图标和后缀提示(如域名、单位、显隐密码的眼睛)。
输入框自己在边框上报告状态:绿框对勾是合法,红框加一行小字说明错在哪。
几位数字各占一格,输入完自动跳下一格,粘贴时自动分拆——安全感的具象化。
长表单拆成几步,顶部步骤条显示进度,每步只问 3-5 个问题。
一颗滑块在轨道里左右滑动,开是绿色关是灰色——比复选框更"物理"的布尔选择。
重绘的勾选框:选中时品牌色填充 + 白色对勾弹出,单选用内圆表示。
拖动滑块选一个数值,上方浮着当前值气泡,已滑过部分填充品牌色。
一圈虚线框住的上传区,拖文件悬停时整块变色——"放这儿就行"的直觉设计。
输入时下方浮出匹配项列表,选中项回填输入框——输入和选择二合一。
搜索框下方实时给出结果,命中的关键词在结果里高亮加粗。
五颗星从灰变琥珀,悬停时预览、点击后定格,星星还会微微弹一下。