Skip to content

Latest commit

 

History

History
102 lines (63 loc) · 7.87 KB

#13.md

File metadata and controls

102 lines (63 loc) · 7.87 KB

issue: 13 minutes: 7

  • JJ: 我有一个好消息和一个坏消息
  • Leon: 出现在这里估计都不是啥好事情,你随便说吧……
  • JJ: 那先说坏消息吧……不少听众说上期节目你在阿森纳输球之后的声音让人听得都抑郁了
  • Leon: 请转告大家,经过一周的修整,我已经恢复了!好消息是啥?
  • JJ: 好消息是本周我们预订录节目的时段正巧又赶上了阿森纳的球赛……
  • Leon: 果然是好消息,这次一定会赢!
  • JJ: 希望吧……再输下去我要考虑换搭档了
  • Leon: ……

Sketch2AE

大厂 Google 出品,Sketch 直接导 AE,一键就好,谁用谁知道。说来也搞笑,「前」猎豹移动的动效设计师西西也有写过一个同名的插件,用途自然也是一样的,这次被 Google 给「抄袭」名字了,哈哈哈哈,他发文吐槽了一下,不知道最后怎么样了。

https://google.github.io/sketch2ae/


History of Icons

想不到今天要翻老东西了……虽然旧了一些,但是网站很棒,挖坟了 80 年代以来众多电脑界面中的图标设计,从先施的老古董到 2010 年代的手机,收录了很多历史性的设计。当然,网站本身是为了推广 Futuramo 出品的一套高可定制化的图标库

https://historyoficons.com/


YouTube 换标了

可能为了突显三角形播放 icon,YouTube 的新版 logo 把图像和 wordmark 完全区别开,颜色也换了更 general 的 #F00,也就是全红,总体来说朝着「大气」的方向又迈进了一步,不过看了一下他们新版的 VI 站,最「大气」的一点在于居然翻译了 50 多种语言!连大陆这种无法访问地区都有,真是……厉害啊……

https://www.youtube.com/intl/zh-CN/yt/about/brand-resources/#logos-icons-colors


可视化的《权力的游戏》人物关系图谱

毕竟是个大 IP,《权力的游戏》相关的可视化设计见过很多,今天推荐的这个是用可视化的形式来表现不同人物之间的联系,可交互。不过打开之后请注意风扇噪音哈哈哈哈,反正我的 MacBook Pro 是转个不停

https://news.northeastern.edu/2017/08/the-game-of-thrones-social-network/


Elk 的新玩法

之前推荐过一个货币转换 App 叫 Elk,如今他们又有了一个新玩法,把信息整合进 Live Photo 里让后以动态壁纸的形式放到锁屏界面,我觉得这个想法非常帅也很有启发意义,哈哈哈哈

https://sspai.com/post/40762


随便看看


关于《图标漫步》

从上一期安妮薇邮报开始,JJ 写起了连载文章,你可以把《图标漫步》看做是一场关于图标设计的游记,每一期的内容都围绕着 JJ 在十多个国家所见到的各种跟「图标」相关的照片。这里没有太多的「方法论」,没有刻意的「教学」,只是一场轻松的视觉旅行,希望文笔又差人又懒的 JJ 能和大家一起展开一次「懒洋洋」的漫步。

图标漫步(二):元素的叠加

上一期留了个悬念,问大家下面这个在大英博物馆展品标识牌上的图标是什么意思:

很多朋友来信给出了自己的推测,我觉得非常有意思,大家的脑洞真是很大!不敢自己一个人偷乐,分享一下收到的答案:

  • 非礼勿视
  • 请眯着眼睛看
  • 半眼旁观,勿动
  • 不要盯太久否则灵魂会被吸走
  • 肉眼看到的(由于氧化损坏等原因)并非该物体原貌
  • 它是一个俯视的视角,像一个在划的小船,左边是小船被淹没一半的意思,右边没有,所以是不要入水太深,小心翻船,深陷其中不可自拔

这个图标其实我自己在大英博物馆逛的时候也没完全理解,导览手册没仔细研究我就迫不及待地问了工作人员,他给我的答案是:视力有障碍的人士可以用手触摸这件展品

一开始,我个人觉得这并不是一个非常好的处理,虽然在可识别性以及图形的美观度上做得不错,或者说针对残障人士的同行人员,一旦了解了图标的含义,还是能很方便地顺着这个图标找到可供视力障碍者「把玩」的展品,但对于其他人员来讲,很难一下子理解这个图标的意图。

不过当我尝试顺着这个「需求」去虚拟地在脑中想要设计一个「更好的」图标的时候我似乎理解到了设计者的用意。从语义上来讲,此处最需要突出的有两个:「视力残障」和「可以触摸」,如果从引导的动作完成结果来看「可以触摸」甚至应该占更大的比重,但假设我在这个图标上更多地体现「可以触摸」这层意思,那在整个场馆里频繁地出现这个图标(事实上标着这个图标的展品在大英博物馆里不在少数),似乎是在鼓励所有人「快来摸我们的展品吧~」,这显然是博物馆并不希望看到的。也许就是因为这样,设计者在「普通人可能会看不懂这个图标」和「很多人开始乱摸展品」这两害里取其轻了。

同样的问题我们再来看几个例子,下面这个图来自意大利某机场的厕所里,三个图标分别指示着三个位置的不同功能:烘干、冲水和洗手液,并且用英文和意大利文在下方标识。

如果从精简的处理手法来看,这部分其实也可以省掉「手」的元素,毕竟放三个在这边略显重复,大家也不可能会错误理解成冲脚之类的含义,但是当本「灵魂画师」粗暴地去掉上图里的三个手之后大家请欣赏:

当然你大可以说如果一开始就单纯用一个元素重新设计的话效果肯定比这个好,但相信大家也脑补的出来,再怎么处理,这个图标可理解的程度都是难以比得过直接加上「三只手」的。而且相对来讲,手和「空气」、「水」、「肥皂泡」三个元素的视觉关系比较好处理,放到一起显得也够饱满和稳固,在此处呈现多个元素完全合理。

可世间图标千千万,使用场景和意图各不相同,往往现实就是骨感的,有太多的东西我们难以用真实的比例和物理空间上的关系来直接作为图标的描画对象,看看下面这个来自英国湖区某艘游览船上的图标:

这里面的救生衣我勉强看得出来,虽然因为缺少其他的视觉线索,这个负空间的利用稍有些奇怪,但至少我能看懂这个意思,而右边这个「小朋友」元素单独拿出来我也能看懂,很活泼够形象,但是请问以这个比例放到一起是什么鬼!只看右侧的话还以为是个小朋友站在一颗小树旁边!

但是吐槽归吐槽,我也理解这位设计师的难处,毕竟「小孩」在真实比例里要比救生衣尺寸大不少,但图标本身还是要突出「救生衣」为主。所以如果让我来做设计评审,这个图标我可以说他不好看,说他处理太粗暴、不动脑子,但是从目的出发,这枚图标还是能够满足需求的。

照例,我们在文末再留个悬念吧,这个是啥图标呢?