让代购头像优雅点

2017年02月16日

设计

先上结果图，这样搜索结果好看点～

二月份的国内休假总是那么的快，而在回到加拿大的路上无聊地翻朋友圈、玩手机。 看到一个朋友代购的头像有点违和，就萌生了重新设计的想法。话不多说，直接正题：

这位代购朋友之前的头像呢，是这样的

实际上比用个人头像还是要好很多的，一定程度上达到了宣传效果，也避免过分隐私透露。但是在美观度上总觉得欠缺了些。。。那来重新设计个吧。首先确定下界面的硬性需求： 显然，文字部分 “Echo” 是代购店铺的名称，”欧洲代购馆” 表明了地区和代购的本质，”馆” 这个词也很好的将代购美化，文字描述挺好，无需改变。 因为代购的东西大多是女性用品， ❤️ 加上粉色会直接定性这是针对女性的，但显然这样一堆 ❤️ 并且全都指向下方显得略微单调。

世界上没有纯粹的设计，所有伟大的作品都是以前的作品的结合和再创造，我们学习别人的想法和设计语言。 — 摘自知乎

设计绝对不是凭空而来，得有灵感来源，最简单粗暴的就是搜索引擎。。。之前一直想用谷歌原物设计做个图片（Material Design），这次正好来试验一下。 下图是谷歌搜 Material Design 找到的，记不清当时用的色盘是怎么搜出来的了，不过大体需要的就是同组色不同阶层。（突然发现这张图纹理感很好看啊！）

——————华丽分割线——————

开工。首先是紫色的背景，没什么特别的思考，因为构想是有白色存在，所以深色背景会很搭。

接下来是摆放各种长方块，暂时还没有习惯使用黄金螺旋线，加上比较信任肉眼审查，所以就凭感觉摆放了。利用 Sketch 里旋转与翻转来调整具体位置。 这里有个比较好用的文档色彩库，比如我把紫色存下来，下次再用到紫色就不必再找地方复制粘贴它的 HEX 值了。

我感觉原物设计最精髓的莫过于对高度与阴影的规范。 参考 Dribbble 上分享的 Google Material Shadows, 直接加了第二层高度的阴影。

再来个小技巧，通过 Sketch 的样式复制与粘贴可以快速生成相同样式图层。图中青色使用的是第一层高度阴影

通过上面所选用的颜色可以感觉到大面积紫色偏冷，而交互的青色与粉色偏暖，这样也形成了平衡。接下来是一个大大的 ❤ 在中央，使用第三层高度阴影。️

灵感突显，想用两个长方块营造类似舞台幕布拉开后的情景，就像把 ❤️ 捧出来的感觉一样，同时不对称的摆放本身也很自然。

文字重新调整了下位置，英文部分使用 Circular 字体显得很饱满（灵感来自 Spotify），中文是苹方。到目前为止，样式上已经达到了我的理想效果， 但整体上并没有突出的亮点。

尝试把文字转换成了图形，同时使用差分的矢量工具把文字从 ❤️ 里抠掉，由于阴影扩散和部分与右边青色的重叠，效果非常理想！

这个朋友说主要做意大利、法国和德国，我就想着该怎么把这些国旗元素融入进去。放文字？No，No，No，那不符合简约的审美。原物设计更多讲究背景的方正， 所以想到了使用圆形的国旗图标，在 “O” 上摆放的灵感是随意尝试摆放，突然想到排成小帽子的样子。这里的小范围多彩和整体的简约组合起来非常和谐， 尤其有种精致感。毫无疑问，德国国旗 🇩🇪 应该在中间。搞定～