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

09 点赞图标设计

当用户觉得浏览的内容有用时,可以点击点赞图标,对该内容表示赞赏,同时该内容将保存在用户的浏览记录里,方便用户二次查阅。

54601-00-28-1

视频演示

◎ 元素提炼

人类的语言有时会简单到一个手势就可以表达所有的含义。在很多场合,如楼盘开业、商界合影及电影首映现场,大家在拍照留念时都会通过“向上伸出大拇指”这个手势表示“点赞”或“认可”的意思。基于此,用向上伸出大拇指的手势制作点赞图标就再合适不过了。

54601-00-28-2

◎ 结构分析

这个点赞图标结构较简单,整体由手和衣袖这两个部分组成。其中,大拇指的表现非常突出,其他部分则做了简化设计。

◎ 设计思路

在设计中,大拇指的表现一定要突出。在设计时,留下手腕处的衣袖更能体现设计的美感。这里的衣袖只需要用矩形表现即可,并将4个尖角转变为圆角。其他部分也概括绘制,最后用一段风格化虚线表现出立体感。

◎ 绘制过程

01 将这个图标分成左右两部分,左边是衣袖,右边是手。画出辅助线,定出左右两部分的位置和大小。

54601-00-29-1

02 按照从左往右的顺序绘制出图标的具体形态。先画出左边衣袖的4条边,然后补齐圆角,使其形成完整的衣袖。

54601-00-29-2

03 画出右边的手。先规范出拇指和拳头上下两部分的位置和大小,然后进行细节上的绘制,使其组成一个完整的手势。

54601-00-29-3

04 连接大拇指和拳头。沿着拳头的轮廓形态在右下角添加一段风格化虚线,结束绘制。

54601-00-29-4

思维拓展:如何分析结构复杂的事物并将其绘制成图标

就人体绘制而言,头和手是较难表现的。因此,在正式成为UI设计师之前,很多人都会通过大量的人体练习来理解人的肌肉和骨骼结构,提高手绘的熟练程度和表达能力,并锻炼观察并捕捉细节的能力。在此基础上,我们还需要对人体的部分形态进行取舍和归纳,进而绘制出我们想要的图标。

在绘制较复杂的图形前,我们可以将物体分解成若干个小块,再将其组合在一起。如此一来,再复杂的物体都可以被轻松设计出来了。

一般来说,物体分解的方式有7种。(1)按照大结构拆分,如把物体按照上中下、左中右或里中外等大块进行拆分。(2)按照小结构拆分,如把大块物体按照上中下、左中右或里中外等小块进行拆分。(3)按照组合结构拆分,即明确小块和大块之间的穿插关系是怎样的。(4)按照转折结构拆分,即明确物体的块面是如何转折的。(5)按照透视关系拆分。物体都有其透视关系,在设计图标时可按照透视关系将物体平面化。(6)按照光影结构拆分。有光源物体就有阴影,高光随着结构线走,阴影则随着外轮廓走,且阴影的方向和光源方向是相反的。(7)按照表面质感拆分,如粗糙、细腻、反光强烈及凹凸肌理等。