设计沉思录丨最美乡音,58同镇主 icon 的设计故事

壹 | 序

前段时间因为岗位调动的原因,我开始负责58同镇相关的设计工作。乡镇市场广袤,同镇是58今年重点发力的业务之一。刚来就赶上了同镇App的启动,由于工期比较紧,页面结构与M端没有较大的变化,本期的主要工作是设计一套可以引领7亿农民审美的icon。要求“很简单”:1.符合乡镇人民喜好;2.比58同城好看。

58同镇是“乡村版”的58同城。截止2018年4月底,58同镇项目总共已完成超过1万名乡镇合伙人招募,数千个58同镇生活信息服务平台已开始在各地乡镇运营,覆盖全国31个省,日访问人数数百万人(部分敏感数据以概数表述)。2018年,58同镇计划覆盖全国2-3万个乡镇生活服务,连接全国农村市场。

贰 | 大师之心

接手同镇之前,之前的设计师已对icon风格做过很多优秀的尝试,线性,面性等等各种变化,似乎尝试了市面上可以见到的各种设计方法,以下列举部分过往icon方案:

评判标准很简单,就是上面说的要求:1.是否符合乡镇人民喜好;2.是否比58同城好看。好看不好看这个事仁者见仁,“符合乡镇人民喜好”这件事上肯定还是要打个问号的。

那么,重点来了,怎么才能创造出一套拥有乡镇氛围,又极具美感的icon呢?

这让我突然想到了原大师在《白》这本书里讲到的这么一段话:

一个好的设计师或建筑师,他总是一些会问好的问题的人,而这些好问题永远都是一些最根本的问题,比如说我以前在这个节目讲过,一个好的设计师要设计一个杯子的时候,他不会去想怎么让这个杯子更实用更漂亮,他首先该想的是什么叫做杯子,重新定义杯子或者从杯子的定义下手来做一个杯子出来。

同镇当前的线上版本有如下图13个大类,我想应该至少问自己13个类似”乡镇的顺风车是什么样子的?“这种问题,然后再开始动笔,这样才能画出不流于形式感的”走心大作“。于是拉上了负责同镇业务的资深产品,开始了长达数小时的刨根问底。内容涉及同镇概况、竞品情况/我们的优势、用研报告、各业务的具体数据情况、当前问题以及未来要做的事情等等。

什么是乡镇的顺风车?

乡镇的顺风车指的是乡镇间、乡镇与城市之间的顺路拼车需求。能够简单准确表达搭乘顺风车,我第一反应想到的其实是用国际通用的顺风车手势:

相比这个我们更理解为“赞”的手势,国人搭车的手势其实更接近于下面的情景:

挥一挥手不带走一片云,如果这个图标你能看出是顺风车,我请你撸串。

还是得用最直白的方式去理解顺风车,什么叫顺?怎么表达风?想顺什么样的车?我能给到的具有乡镇气味又不失优雅的答案如下:

于是,我将之前类似套娃的顺风车icon做了如下变换:

什么是乡镇的求职招聘?

我们先来感受一下乡镇线下招聘的场面:

之前招聘求职的icon是一个满是文件的公文包,对于我们这种一线城市的白领阶层来说,这个物象贴切达意,几乎是最优的选择,但在三四线城市以及乡镇,这里招聘的对象主要是工人、店员(服务员)、大车司机这种岗位,比较出突人力。公文包最终还是被我OUT,而选择一个穿着得体的人的形象去诠释乡镇的招聘。

什么是乡镇的生意转让?

同镇的生意转让主要是门店的转让,转让一家麻辣烫店,转让一间干洗店,转让学校门口一家小饭店保险柜桌椅齐全等等,我们再来回看之前的工具箱icon,是否相差甚远呢?

还有比如打折优惠,一个本该充满诱惑与惊喜的图标不应该是绿色。还有比如同镇的二手,同镇的二手和城市里的不一样,不是频繁更换的手机的地铁一族,也不是耳机发烧友聚集地,更多的是生活的实用内容和生产工具的转让,床,桌椅,电梯,机器,动物,麻将桌,冰柜,二手三轮摩托车…我们需要寻找一个实用的、笨重的、更偏向生产工具的、大家所熟知的一个物象。而不是一个很潮的购物袋。篇幅有限,不为每个icon做赘述。

叁 | 乡镇味道

icon的内容的阐述上,“乡味”更浓了,但样式上依然还是58风格的复制,一方面做不到视觉上所谓的“比58好看”的超越,另一方面,我在之前的基础上尝试做一些简单的视觉变种,却依然嗅不到直击心灵的“乡味”。

我决定远离城市的喧嚣,去村里静一静。团队本季度的团建恰好选在了远离市中心的乡镇,吃吃农家饭,坐坐农家院,爬爬山,放下手机做些互动的小游戏。

乡镇的生活节奏慢,当地人热情真诚,再加上天气不错,感觉身心清爽放松,灵感翻滚。

什么是乡镇的味道呢?真实热情,简单直白。回到公司便废弃了之前的扁平画风稿件,采用一种新的形式去描绘乡镇味道:写实图片与平面元素拼合的形式。

真实照片的形式得到了大家的赞同,但icon毕竟是icon,不是运营位,并且需要色彩形式更可控,所以我用一种4年前被遗弃的画法(iOS的超写实画风)重新描绘了13个类目,不断完善细节,调整体量,并配以乡镇更容易接受的喜庆配色,最终形成了如下的icon主体。在满足乡镇喜好的同时,这种画法无意间完成了另一个要求“比58同城好看”,我为什么这么说呢,不玩设计的普通人在看画的时候往往会觉得画的越逼真越厉害越好,审美这事因人而异,但更精致更用心的绘制本身会让绝大多数目标人群感觉它比58同城的好看。

## 肆 | 品牌融合

写实的画风配合喜庆的配色已经谱出了同镇的乡音,但也面临两个问题,一个是写实的画风相对比较复杂,难以延展到其他元素上,另一个是缺少与58品牌的关联。

58的主品牌logo有两个很明显的特征,一个是彩色,一个是叠加。“58同城”的主视觉用到了这两个特征,双色的设计加上面与面的叠加,完美延伸了58这个品牌。(当然更新更棒的设计也正在酝酿中,敬请期待)

同镇既是同城的下沉分支,也需要有自己的特征。沿着叠加的思路,我为同镇的视觉语言起了一个名字——韵点。相比同城的面与面的叠加,同镇更像是把全国的乡镇一点一线地联通起来,也像是书法中的笔法,一顿一提凝成一股中国自有的韵味。用圆点作为线条的伊始和交叠,既为平实的线条增加了识别性,也形成了一种拓展性极强的视觉元素,灰色、彩色、带底色、与大类icon的写实图标结合等等,可以形成各种层级的icon并依然具有很强的辨识性。

结语

做视觉,但不止步于视觉;知潮流,但不沉溺于潮流;定规范,但勇于打破规范。玩的了花样,但也收得回来。好啦,今天这篇故事形式的icon设计就聊到这里,欢迎各界朋友拍砖交流。

© 著作权归作者所有
这个作品真棒,我要支持一下!
58 UXD,全称 58 集团用户体验设计中心
0条评论
top Created with Sketch.