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

02 首页图标设计

首页图标是几乎每个App都会有的功能图标,通常放在底边工具栏左边的第一个占位符中,也有一些App会根据需求将首页图标放在中间。大部分App会将软件的Logo或名字经过重新设计来作为首页图标。例如,淘宝的首页图标主要是由Logo中的“淘”字制作而成,大众点评的首页图标主要是由Logo中的“大”字制作而成。

54601-00-15-1

视频演示

◎ 元素提炼

一般情况下,首页里几乎展示了商家希望用户最先知道的所有的重要信息,内容冗长而杂乱。在首页设计中,设计师需根据用户不同的需求、不同的使用习惯将这些功能和内容信息进行合理的规划、排列和整体性设计。随着App界面图标设计的不断发展与演变,房子造型逐渐成了首页图标设计的首选形态,并以此来表达“这里面包含着大家想要获取的所有信息”的意思,并且用户也逐渐接受了这种设计方式,并形成了一定的视觉认知习惯。

经过对前人设计结果的分析,笔者发现房子造型必不可少的形态是屋顶和墙面部分。烟囱、窗和门是可以根据设计需要进行取舍的,而绝大部分设计去掉了烟囱,保留了门或窗。

54601-00-15-2

◎ 结构分析

在本次图标设计过程中,三角形屋顶和方形墙体相结合,直接构成了人们对于房子形态的整体认知。同时,增加一些门或者窗的细节,可以使图标看起来细节更丰富。

◎ 设计思路

首页图标通常出现在底边工具栏中。这个位置的图标需要做到形态尽量简单且容易识别。所以,在设计过程中保留了门,并且把门的形态拉长,使其突出,并在此基础上省掉了窗的图形,使图标看起来更简洁。此外,在图标右下方采用的是一段风格化虚线。

提示

这里所说的风格化虚线设计效果将贯穿于本书中前两章的所有图标的制作与讲解,以确立一个较统一的设计风格和效果。

◎ 绘制过程

01 标出图标的重要定位点。

54601-00-15-3

02 遵循从上到下、从外向内及从大到小的顺序绘制图标的大致轮廓。圆角所在圆的半径长半个格。右下方采用的是一段风格化虚线。风格化虚线可以通过先画直线,然后用高光橡皮擦掉部分直线来获得。

54601-00-15-4

03 将图标中的门补齐。画门时先画两条直线,然后画连接两条直线的顶端的半圆。

54601-00-15-5