设计语言 - 选择器

这里有感而发多附张图。外矩形框的曲率应该是里面矩形框的曲率的2倍，我个人是这么设置的，不知道大家怎么看，是站着看，蹲着看，还是躺着看。

按照上述步骤操作后呢，大体的框架就做好了，现在就差填文字和图标上去了。每种不同高度的矩形框要配置不同的文字的字号。这里我给出我觉得较为标准的字号，大家也可以根据自己的理解和审美自行搭配。我这里做的字号选择是32px的高度对应12px的字号、40px的高度对应13px的字号、48px的高度对应14px的字号。大家也可以32对13、40对14、48对15、怎么搭配看实际项目需求和个人经验了。

文字填好了来看图标，图标这块比较复杂，图标画法从标准化角度来讲分为两种：一种是采用IOS的标准，一种是采用谷歌的标准，一般做B端或网页类产品是以谷歌的标准来画的图标。那如何绘制一个图标这里也比较复杂，谷歌把图标分为"系统图标"和"项目图标"，非常的精细，这篇文章里就不解释了，马上我就会写几篇关于图标的文章，重点讲一下这块的知识，大家也可以去谷歌MD下个图标填进去试一试。

附加一些知识，讲一下图标的微交互与微体验。在讲解之前我还是想引发大家的思考。如下图所示有两种已选项的样式，以下两种方式都属于Hover状态，就选择器这个功能而言，用户会频繁的使用"选择"和"去除"这个功能，大家觉得以下哪种样式的体验更出色一些呢？

我认为答案是样式1。从功能角度而言，用户在使用选择器这个功能时会输入自己要聚合的内容，或在选择菜单中找到想要聚合的内容，选择器的内容是已知的，因此选择器中的具体内容将会被弱化，而"去除"这个功能按钮将会被强化。当用户选择完具体内容时会不断出现反悔、选错和对比的情景，这时应该强化"去除"功能好让用户进行相对的选择。那从体验和触点上来考虑呢，如下图所示做成样式2这样就会降低用户的体验，（下图绿色代表触点区域，红色代表无法点击区域）。