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

19 生鲜图标设计

随着互联网运营技术的快速发展,现在很多人都选择在网上购买生鲜。其送货时间短,在同城基本可满足当天送达的需求,甚至一小时内送达。这也促进了生鲜网店的发展。

54601-00-48-1

视频演示

◎ 元素提炼

生鲜产品的种类有很多,如水果蔬菜、肉类、奶制品及海鲜等。生鲜的基本定义一是未经过加工,二是新鲜的。在以上所述的这些食品分类中进行挑选,海鲜无疑是最贴合这个定义的。而在海鲜产品中,鱼类最常见,因此本案例以鱼作为基础图形进行设计。

54601-00-48-2

◎ 结构分析

鱼由头、身、尾及鱼鳍构成,不体现鱼鳞。根据生鲜的语义,在图标表现上设计了一条跃起的鱼。

◎ 设计思路

这个图标的整体形态为一条跃起的鱼,鱼身扭曲成半圆形态;鱼头向前,可以先确定鱼嘴和眼睛的位置;鱼鳍的形态有所省略,伴随鱼身体在空中摇摆的姿态,鱼鳍用曲线表示,并呈现出自由甩动的形态;鱼尾摆起,整体形成跃起的姿态。鱼尾采用了一段风格化虚线,使图标整体看起来细节感更强,但又不至于显得太复杂。

◎ 绘制过程

01 定出鱼头、鱼身和鱼尾的位置,然后表现出整条鱼的外轮廓。

54601-00-48-3

02 将鱼的外轮廓画完整,画出左侧的鱼鳍。

54601-00-49-1

03 画出鱼鳃和鱼眼,使其形态和结构更加完整。

54601-00-49-2

04 画出右侧较小的鱼鳍,并用高光橡皮擦除被遮挡的部分,并擦出鱼尾上的风格化虚线。在整条鱼的形态都确定之后,才能确定右侧鱼鳍的位置和形态。

54601-00-49-3

提示

由于右侧鱼鳍所处的位置比较特殊,靠近鱼尾,且要遮挡一部分鱼身,因此最后进行表现。

思维拓展:App图标的风格分类有哪些

截止到目前,App图标的风格主要有6种。(1)纯拟物风格。图标结构复杂,表面肌理真实,整体感觉和生活中的实物基本一致。绘制时间长,且时间成本较高。但图标的整体表现较美观,效果也较真实。(2)像素风格。对早期像素格显示器下的图标进行还原和再设计。(3)2.5D风格。用扁平图标的设计语言制作立体效果的图标。(4)轻拟物风格。介于纯拟物和纯扁平之间的设计风格,带有微渐变、半透明的效果,且有一些质感表现。整体表达方式较轻松、简洁,但与纯扁平风格的图标相比有更多的细节。(5)纯扁平风格。图形高度简化和概括。注重图形语义和功能的表达,以传递信息为主要目的,设计感的表现次之。(6)线描风格。用以线条为主的设计语言表现整个图标,常常会运用到风格化虚线、直线、曲线等。其中,较出名的是曾经被设计师争相模仿的MBE风格。

54601-00-49-4