823 Designing Glyphs

这一 session 讲符号设计的。首先区分一下 Glyph 和 Icon 的区别,Glyph 更接近概念本质,去掉了光线、阴影、颜色等。

823 Designing Glyphs_第1张图片
Glyphs

那么如何高效的设计 Glyphs 呢?有以下三点准则:

1. 形状简单明了

2. 表达概念上普适

3. 功能和目的是清晰明了的

演讲者首先举了一个例子,很多人在异国他乡的有过的经历。虽然看不懂文字和不懂当地语言,但是当你看到下面的路牌,你能知道怎么走去机场。因为有个飞机✈️的小图标符号。所以说 Glyphs 是个高效的沟通工具。


Glyphs

第二个例子讲如何用符号表示美味可口这个概念。奶酪汉堡包,披萨,冰激凌这些都容易引起一些人的反对。虽然有些人认为能够表达意思,单并不具备普适性。所以要回到这个概念的本质上去,用一个添嘴角的笑脸表示,争议性就会小很多。但是,在某些文化、某些群体里(wtf),露出脸、嘴巴、部分身体是不合适的,也要注意。如果为了照顾这些文化,可以用一个爱心❤️来表示美味可口。(笔者个人感觉并不合适)

Glyphs 会用在什么地方?

在 Mac 上,Glyphs 被广泛应用在菜单栏、工具栏、测边栏还有 touch bar 上。在 iOS 上,被应用在 tab bars, sidebars, 和 quick action menus 上。一个重要的特点是,这些 Glyphs 都是成组出现的,所以设计的时候要考虑他们并不是孤立存在的,要放到它实际出现的环境中考虑。

设计的时候要考虑以下内容:

1. 视觉平衡

2. 线条一致

3. 位置

下面一图中,气泡图标、电话图标和右边的摄像机图标、信封图标高度是一致的。但看上去左边两个会小一点。这是因为他们的实体部分小,在视觉上形成了错觉,这就需要适当的放大它们,达到视觉上的平衡。注意一下信封和摄像机图标中空隙的部分,他们的宽度也是一致的。


823 Designing Glyphs_第2张图片
调整前


823 Designing Glyphs_第3张图片
调整后

下面这一组图标,他们虽然在视觉上看起来已经一样大了。但是由于线条粗细不一,导致垃圾桶和放大镜图标看起来怪怪的。经过调整,看起来就像是一个系列的图标了。


823 Designing Glyphs_第4张图片
线条

在看一下播放图标,当给它加了一个圆圈的轮廓之后,三角标志虽然在圆圈中居住,但视觉上非常不舒服,把它向右推一推就好多了。分享图标同理,向上移动一下,看起来才是对的。


823 Designing Glyphs_第5张图片
调整前


823 Designing Glyphs_第6张图片
调整前

综上所属,设计 Glyphs 是应该遵循一下规则

1. 把图标作为一组来创建

2. 在实际使用环境中测试

3. 在真实设备上预览

最后还以 Airbnb 为例,展示了好的设计是怎么样的。他的文字和图标看起来也是和谐的,在 Homescreen Quick Action Menu 里的图标的线条也明显加粗了。同时苹果也提供了自己的一系列图标下载,供大家学习。

你可能感兴趣的:(823 Designing Glyphs)