UI图标手绘88例
上QQ阅读APP看书,第一时间看更新

07 搜索图标设计

当用户需要搜索某些信息时,会在搜索框中输入信息里包含的关键词,然后点击搜索图标进行搜索。

54601-00-24-1

视频演示

◎ 元素提炼

搜索的含义就是在数据的海洋里找到含有关键词的信息。在看报纸时,面对大量的排列在一起的细小文字信息,我们通常会使用放大镜帮助阅读。因此,用放大镜表示搜索功能就再合理不过了。随着图标的不断演变,带有“搜索”语义的图标目前多采用放大镜图形,这个图形由圆形的镜框、中间的玻璃和把手组成。在具体的图标设计中,许多设计师也习惯在镜框的厚度、玻璃的透明度、把手的粗细和材质上进行再设计。

54601-00-24-2

◎ 结构分析

搜索图标表现为一个放大镜图形,分为镜框和把手这两部分。其中,镜框是圆形的,把手是一个被遮挡的圆角矩形,且其一端被代表镜框的圆形压在下方,整个图标需要尽量简化处理。

◎ 设计思路

设计时把表示镜框的圆放大,缩短并加粗了放大镜的把手。为了不让镜框看起来太单调,同时能够很好地表达镜片的质感和厚度,笔者在镜框中添加了一段风格化虚线。将放大镜的把手设定在右下角,符合大部分人的视觉习惯。

◎ 绘制过程

01 定出圆的位置和大小,然后将把手设定为以45°角倾斜展示在右下角的样式,并尽量规范图形。

54601-00-25-1

02 根据辅助线和切点,画出镜框和把手的具体形态。

54601-00-25-2

03 在圆的内部的右下角画一个与圆同圆心、半径稍短、长度为1/4内部圆的圆弧,然后用高光橡皮擦出风格化虚线,将图形补齐。

54601-00-25-3

提示

在这里,把手的形状和首页图标中门的形状是一样的,只是方向不同。由此我们可以感受到,在图标设计中,图形的语义表达其实是很微妙的。当我们将一样形状的图形放在不一样的环境中时,图形会产生不一样的语义。图形的语义是通过将图形放在环境中,与其他元素相互影响、相互辅助及相互对比而产生的。

思维拓展:MBE风格在图标设计中如何运用

MBE风格是由线框型Q版卡演变出来的一种风格,并由法国设计师MBE于2015年年底在Dribbble网站上发布。针对MBE风格在图标中的运用,需要注意以下3点。

(1)注意线条的处理。MBE风格常运用于线描图标中,主要表现为线条会加粗,且线条上有断点,也就是前边我们所说的风格化虚线。断点的位置根据图标的线条位置来定,多见于边线和结构线上。线条多以流畅、圆滑的直线和曲线为主。

(2)注意色块(在图标中主要说的是阴影部分)的处理。MBE风格的图标的色块或阴影的位置与光源的方向相反。例如,如果图标的光源设定在左上角,则溢出图标线条的色块会出现在右下角。阴影多见于简单图形的表现中,较复杂的图形需要根据实际情况使用阴影。

(3)注意图形的处理。针对这一点,一开始是对图形进行简化处理,逐渐发展成更多元化的设计表达方式。