设计产品运营商业模式手机移动程序开发程序员

一个APP ICON设计的过程记录

2017-01-21  本文已影响0人  xu54

最近在开发自己的一款标注图片的app <A0>, 取名A0的含义是:0号图纸是最大尺寸的图纸,一半大小是A1,再对折一半是A2,然后是A3,A4。A0往往是工程里的总装配图,意味着功能全面。

icon的设计方向上,首先避免复杂的拟物的,因为最小尺寸只有29pt, 复杂的图案这么小的情况下会糊成一团。然后最投机取巧的当然是用app的名称缩写,这样立意上不需要再去花时间去思考。

所以第一步确定下来:图案构成就是字母A, 0 

然后进行形状元素的考虑,因为这款app有一个非常重要也是最能给用户留下深刻印象的功能,就是尺寸线,所以希望把“尺寸线”的元素加进去,然后整体的氛围走“工科,机械制图”风格。于是,决定把字母A和0设计成机械制图中常用元素的形状( 导角,键槽,圆孔), 然后对字母标注尺寸线,配色上采取白底炭黑描线(或者晒蓝描线)

这个设计很惊悚,其实任何设计,刚开始总是很惊悚的,粗糙幼稚鄙陋,但这个阶段,主要是确定方向以及主要的设计元素。

A和0设计成机械零部件的样式

看上去比较繁琐,没有视觉冲击,不能在短时间内有很好的记忆。并且太小的时候,尺寸线根本无法看清。所以决定舍弃。

这个设计显然是幼稚,不专业的。失败的原因是1:)太具象。 2:)繁琐。

具象的东西很容易有不专业感,而繁琐的东西能处处暴露短板。为什么简洁的设计大行其道,并不是繁琐的设计一定不好,而是繁琐的设计对设计师的要求非常高,简洁的设计能减少错误的曝光率。

所以还是跟随主流,以简洁的线条设计为方向。不仅可以减少工作量,也能减少暴露自己短板的机会,正所谓做的多错的多。由于尺寸线元素是这个icon的灵魂,但如果很直白的直接在设计中使用尺寸线,显得太直白(这样就会感觉很不成熟),所以决定提炼出尺寸线经典元素:箭头,并且夸张的放大。

猛一看,粗的线条感觉明显不如细细的线条那么时尚。但这几年流行悄悄发生转变,因为细细的线条被太多化妆品品牌使用,感觉有一种“发廊风”,而粗壮的线条有成熟稳重风格,虽然第一印象很难有细线条那样好,但是更耐看。

并且这个箭头的元素恰好构成字母A, 还是互联网时代常用表情符号< , 这个符号也决定了icon的整体配色思路,决定配色的风格是“波普文化”, 就是低饱和度,色调偏冷的色彩。这样的色彩感觉酷酷的,有一种淡淡的嬉皮风格。同时考虑背景为干净的白色,所以明度也不能高,最终选取一种比较少用的松绿和紫色,但饱和度都不高,所以紫色不会显得非常危险和性情趣感觉。

字母“0”就采取一个最简单的圆圈,为了视觉风格的统一,粗细和A保持一致。位置放在对角线上,可以显得更加活泼,但圆圈的圆心必须对其到字母“A”的延长线上,让布局活泼但是规范。

同时考虑到单色应用场景,需要构成另外的一种形状,一种科幻感觉的文字符号,增强了趣味性,也添加小幽默元素。

对圆圈做变形, 变成一个倾斜放置的数字0, 像是散乱在桌面的两个互联网符号,调整0的大小比例,粗细,和倾斜角度。

进一步调整线条的粗细和形状

我知道,这个logo完全不符合现在的流行趋势,但优点有

1:)精心设计了图形和空白处的比例,非常显眼,即使缩到极小,仍然能保持锐利的外观

2:)很耐看,活泼又具有互联网时代的潮感

3:)不落俗套,在众多的app中可以一眼就识别出来

总体来说,这一稿直到现在我都认为是最好的(但最终没有被自己采纳),因为它不符合现在的第一眼潮流.

我对这款app抱有极高的期望,是准备出现在app store的官方编辑推荐中的,所以,仔细分析了以往被官方编辑推荐的各种app, 自己设想一下上面的logo如果出现在官方推荐名单中,的确会格格不入。那就调整思路,顺着编辑喜好的风格来吧。

上面的方案不符合苹果官方审美的两方面是 1:)图案的构图并不是传统的对齐方式 2:)配色不是现在流行的。所以决定还是采取传统的元素对齐,颜色干脆采取黑白色最安全(其他那些用到烂的渐变和糖果色,我不想做芸芸众生)。

这个识别度也很高,寓意是字母A,同时也是笔尖的形状,尺寸线尖头,上面是经典的贝塞尔曲线。形体的氛围有一种数学符号的感觉,有可贵的“理工”感。

同时,以这个思路设计了第二方案和第三方案,都是为了迎合苹果编辑的口味

方案二:

仍然是箭头的变形,通过中间的切除,构成一个三角形和两个四边形,简洁有新意。缺点是在缩到极小的时候变成三个黑点,同时图形占整个画面的比例过少,不够显眼。

方案三:

采用这两年流行的半透明重叠元素,用0和1组成小写字母'a'

同时也是相机的抽象,表示这是一款图片相机类的 app

感觉虽然都是苹果编辑的口味,但等级还是差了那么一点点

并且考虑到有一个竞品的名字也是'A'字头,它的app的图标也是'a'为主体, 而我的app的革新之处是在手机上使用虚拟鼠标,相当于手指延伸出一个虚拟的指针线,突然想到可以突出“第6根手指” 这一说法,干脆把app的名字改为“6F”, 也就是 “6 Fingers"的缩写。

干脆用五根直线表示一个手掌,同时在食指上延伸出一根小的线条形象的表示“虚拟鼠标”。

在构图上,整体保持黑色区域为一个窄长的条状。线条的粗细与间隔紧凑而有节奏。

上一篇下一篇

猜你喜欢

热点阅读