一个APP ICON设计的过程记录

最近在开发自己的一款标注图片的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"的缩写。

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


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容