设计语言 - 选择器

版权申明：本文出自“罗耀_UI”原创，感谢“罗耀_UI”的原创文章分享！

今天想以一种新的讲课方式来讲这些知识，并去除了专业化来降低理解力，所有的知识全部解析到最小化，所有信息也会进行标注说明，尽量用图解的形式去表达含义来降低理解力。只要大家能认真学，保证每一个人都能掌握这些知识，比较难理解的知识我以后会以视频的形式来为大家进行讲解。

还是要强调一下这两点："尺寸不是绝对的，还是要根据设计师的经验与审美来决定"；"固定数值是引导新人去理解规则，之后要根据自身的理解去找到属于自己的规则"。这两点须知还需要大家去理解一下的。另外大家如果看不清图片细节，可以按住"ctrl"键加"鼠标滚轮"，把视图放大到175%，就能看到未压缩的原图了。

开篇结尾我想借用《降临》这部电影来引发一种思考，到底是"思维决定语言"还是"语言决定思维"。这个理论美国语言学家萨丕尔及其弟子沃尔夫提出。称为"萨丕尔·沃尔夫假说（Sapir-Whorf Hypothesis）。好的我们带着这个问题往下看，文章末尾有我对这个假说延伸出的问题与思考，也欢迎大家能一起探讨。

目录

1.1 选择器 - 样式

1.2 拆分要素 - 选择框

1.3 拆分要素 - 选择菜单

1.1选择器 - 样式

先来了解一下选择器的样式，选择器也是分为黑白两种颜色和三种尺寸，三种尺寸分别是小尺寸（32px）、中尺寸（40px）、大尺寸（48px）。大家也可以根据自己的理解和实际项目需求自行搭配，例如小尺寸（32px）、中尺寸（36px）、大尺寸（40px）等等... 下图展示了选择器的两种颜色。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

图中所示的组件是根据小尺寸（32px）的高度来进行绘制的，下面会讲解如何绘制小尺寸（32px）、中尺寸（40px）、大尺寸（48px）这三个尺寸。

1.2拆分要素 - 选择框

我们先把选择器这个组件中的所有要素全部进行拆解，这样就清楚这个组件都由什么构成的了。选择器组件分为上下两部分，上部分我称为"选择框"，下部分我称为"选择菜单"。那先拆分上部分 - 选择框，解析它的构成。如下图所示，选择框的上部分由矩形框、矩形框的曲率、已选项、已选项矩形框、已选项矩形框曲率、文字和图标构成的，接下来逐一进行讲解。

我们先来绘制一个矩形框，矩形框的宽度大家自己定义就行了，而高度有小中大三种尺寸选择，大家要根据自己的实际项目来进行相对的选择，也可以根据自身理解进行设计，只要矩形框的宽度和高度满足网格基数就可以了。我这里设置的网格基数是4px，高度32px里有8个网格单位，一个网格单位是4px，即32÷4=8，能理解吧。

矩形框的曲率可以设置为统一的曲率，也可以根据不同高度的变化来进行相对的微调整。例如不同高度都可以统一设置为4px的曲率，即4px、4px、4px（一致），也可以根据增数1或2来进行调整，4px、6px、8px（增数为2），或4px、5px、6px（增数1）。但一定要注意的是，不同高度的曲率的增数不能过大，像4px、8px、16px（增数为2倍）这种设置方法就是错误的。

已选项矩形框包含在大的矩形框里。它的宽度是相对的，里面的字数增多宽度也就相对的变宽了，而它的高度要比大矩形框小。这里最难处理的就是已选项矩形框与大矩形框之间的距离，强行按照网格基数来做的话，就会造成已选项矩形框看上去过大或过小的感觉，按照给出的数值自己试一下就明白了。

已选项矩形框的曲率我设置的是外面的矩形框是里面的2倍，例如外面的大矩形框的曲率（4px）是里面已选项矩形框的曲率（2px）的2倍。不设置统一的曲率的原因是因为，大矩形框的曲率如果是8px的话，里面已选项矩形框也设置为8px就会变形，试一下就明白了。