04 扫一扫图标设计
随着网络和软件技术的不断发展,二维码的出现极大地方便了人们的日常生活,扫一扫这个功能也应运而生。二维码的本质是用图形代表网络信息的编码方式。扫一扫功能是调取摄像头,扫描图片上的二维码,读取数据,调出相应的网页或软件功能。
视频演示
◎ 元素提炼
扫一扫图标的形态来自超市收银一定会用的扫码机。将扫码机对准商品的条形码,条形码上会出现一条由扫码机射出的红色光线或绿色光线进行扫码,之后扫码机发出“嘀”的一声,扫描完成。大部分的扫一扫图标的设计元素都包含一个矩形外框(用来表示扫描的范围)和一条线(用来表示扫描的过程)。当然,目前也有一部分软件用简化的二维码图标(设计形式主要表现为将一些大小不同的正方形进行组合)表示扫一扫这个功能。
◎ 设计思路
为了让图标迎合整体的圆润风格,将矩形的4个尖角转变为圆角。将矩形的四条边进行简化,以突出其内部的横线,方便用户识别,也可以和其他的方形图标区分开来。矩形框内部直线的右边采用风格化虚线,使其细节更加丰富。
◎ 绘制过程
01 画出图标水平方向的中轴线,再定出圆角的位置。每个圆角的长和宽都是1.5个像素格,且每个圆角的圆弧半径是0.5个像素格,四个角的形态保持一致,同时圆角边的位置两两对齐。
02 画出4个圆角,圆角的大小要保持一致。
03 将图形内部的线补齐,注意右半部分为风格化虚线,绘制完成。
提示
在画圆角时,一般方法是先确定圆角的两条直线边,然后用3条或4条短线画出圆角的大致轮廓,再补齐弧线。
经验分享:寻找素材时可采用的一些方法
图标的设计创意与语义表达应该来源于生活。例如,二维码的前身实际上是条形码。以往,超市一般会用不同的条形码来区分货品,承载货品信息。当你不知道如何用图标表现功能信息时,可以回到这个功能的最初,回忆整个功能实现的过程,或许会有更多的灵感。
这里,笔者总结了一些图标设计之前寻找素材时可采用的一些方法。(1)明确功能本身的名称和需要表达的语义,如“云存储”图标的图形元素是一朵云。(2)明确功能的来源和形成过程,如首页图标的图形元素是一栋房子。(3)明确功能实现必须经过的整个操作流程,如“扫一扫”图标的呈现为“上下扫动”的形态。(4)明确功能实现之后产生的结果和意义。例如,按钮图标的按下效果是图标本身变暗。(5)明确图标可提炼的关键词及其独特功能,如个人中心图标的图形元素是一个人像。(6)明确图标的特别之处,如“淘宝”App应用图标是一个“淘”字。(7)明确功能本身所要表达的图形,如时间图标是一个带有指针的圆盘,图书图标是一本打开的书。