Icon / Redesign
Timehut icon redesign
时光小屋 App Icon 重设计
Client
Timehut
Platform
Mobile App & Print
Deliverable
Icon, Graphic
Background
这个是我前公司主打的一个App，用于记录孩子成长的亲子时刻，管理照片，云端相册的工具。当时我在负责另一个社交项目，对这个项目的设计没有多少发言权。离职后当我再审视 App 的界面时，还是发现有许多需要改进的地方，所以打算从 Icon 切入，从这个比较基础且包含大量细节的图形元素来重新思考设计。
Overview
Icon 通常是设计系统的一部分，除了需要清晰地表达出所需传达的意思外还需保持统一，最好是能通过一些细节（软或硬，粗或细，曲或直，简或奢等等）来体现独一无二的品牌性，传递品牌的情感以及价值。
整理发现问题
搜集整理 App 中图标里出现的问题。
制定统一Grid
统一性是图标设计的重中之重。
提炼元素风格
使图标具有品牌标志性和识别性
绘制图标系统
前期准备都做好后，开始设计图标
Problem
使用前公司的 App 的时候，发现整体的 icon 设计不够统一，有的圆角有的直角，有的有缺口有的没有，粗细也不一致，一个页面里，有的圆角有的直角，甚至有的是 Stroke 有的又是 Fill。我呆过的很多项目也存在过这个问题，可能因为人员流动，就算有了设计规范有些人也不太遵守，可能是年久沉积，界面或图标呈现出比较分裂的状态。
以上是 App 内 icon 部分截图，icon 的粗细，形状，曲直，圆角都不成体系
我呆过的很多项目也存在过这个问题，可能因为人员流动，就算有了设计规范有些人也不太遵守，可能是年久沉积，界面或图标呈现出比较分裂的状态。
制定统一 Grid
统一性是 icon 设计的重中之重，我选择的是 24 dp大小，Padding 区为 2 dp，icon 的展示区域为 20 dp，粗细为 1 dp，圆角为 3 dp。
线性 icon 给人轻盈，不厚重的感觉，选择适中的圆角，给人以亲和力，圆润但不过分讨好。
Material Design 的规范中要求不同形状的图标需保持在 grid 中的长宽形状里，例如，圆形要比正方形的大一点点，以保证他们在视觉上看起来大小一致。
https://www.material.io/design/iconography/system-icons.html#grid-keyline-shapes
Badge Icon
App 里面会涉及到很多人物关系，比如，添加家庭成员，邀请成员，移除成员，最近来访成员，成员数据恢复，成员列表，账户移交等等，这时需要设计一系列的角标图标，保证清晰表意的同时满足统一性。
提炼元素风格
产品 Logo 里房屋的中心是一个圆点，作为一个婴幼儿成长记录的 App，这个点可以理解为新生家庭的中心“孩子”，或者在 App 里储存的“美好记忆”。我认为这个点是可以做提炼出视觉元素并且贯彻统一起来的地方，来体现品牌标志性。
绘制更多图标
场景化 Icon
App 里面会用到很多的场景来描绘各种状态，比如和宝宝的去公园，去游泳，洗澡等等，这些稍复杂的场景化 icon 可以始终贯穿风格。
Icon 应用
在设计 icon 的时候，我不止是想到它在电子屏幕上的呈现，还想到一些实体化的呈现方式。目的就是与用户的实际生活紧密连接起来，时时刻刻能想到这个 App。
相册
把照片打印出来，整理成相册合集，寄送给用户，因为实物会比电子照片更加感动人心，这里我重新设计一下。
车贴纸
用产品logo 和 icon 合起来的做成车贴送给用户：
1. 让用户感受到体贴，被关怀；
2. 可以帮用户填写收货地址，为其他商业化做铺垫；
3. 路上可以起到宣传产品的作用，一举多得。
为什么用黄色呢，当然是各种天气条件下穿透力更强，很多交通标识都是黄黑搭配，非常醒目，这个东西的首要目的就是达到清晰传达，方便后车看得见。
The End
© 2020 Octone. All rights reserved.