昨天,大神 Dan Abramov(React、Redux、Create React App 主要开发者) 在 Twitter 发了一条状态,大意是:
哎呦喂,我亲爱的朋友们啊,能不能把搜索功能做的好一点啊!!!我要找的是 “react” 啊,不是什么 “reaction pic” 啊!来来来,我给你们讲一讲下拉搜索框设计的第一原则吧:
不要违背用户的搜索意愿!!!
不要违背用户的搜索意愿!!!
不要违背用户的搜索意愿!!!
什么?剩下的原则?Occhino 先生,你来给他们讲一讲吧~~
无图无真相,附图一张:
吐槽完了之后,Dan 大神还不尽兴,又开始补刀:
您们非要把 “reaction pic” 显示给我也行啊,别我 TMD 点击的是 A,您在最后0.1s 给我换成 B 啊!!!
Occhino 啊!你要赶快把你的博客:Correction:never ever reorder results without a keystroke 给 po 出来了。
。。。
大神这一番吐槽,想必 Twitter 前端工程师的面子也丢了不少。作为在普通公司工作的小编,吃完瓜看完戏,没等到 Occhino 先生的 dropdown box 设计原则迟来,只能先 google 一下搜索框设计原则了,感兴趣的小伙伴们也来看一看吧~
Dropdown Design 设计准则:
TL;DR
避免菜单之间相互重叠;
灰化不必要的选项;
减少使用选项很长的的下拉框;
手动输入更快的时候抛弃下拉框,让用户手动输入;
保持菜单名可见。
最后,希望 Occhino 先生的博客早日出来!
领取专属 10元无门槛券
私享最新 技术干货