优设周报丨苹果放出iOS 10源文件、火狐开发社区LOGO改版

编者按：本周主要有2个大事件：苹果官方更新了iOS 10 的UI KIT（PSD+Sketch.），火狐开发社区Mozilla 那个做了半年多的LOGO 终于发布。文末有优设网上周人气最高的3条微博+3篇文章，敬请享用。

优设周报丨带你一次看完本周的设计大事和高人气教程！

1. 苹果官方设计资源更新（iOS 10 UI KIT）

此次更新不仅有PSD，还有Sketch 版本，这一信号无疑表示Sketch 作为UI 设计软件已经得到了官方的权威认证，还没学Sketch 的同学该抓紧了。

官方下载地址：https://developer.apple.com，速度略慢，请自带梯子。PSD 版本有100多M，Sketch 虽然小（7.1M），但是有设计师反馈控件不全，特别是没有iPad 版的。

2. 知名开源社区 Mozilla 新版LOGO 发布

Mozilla 是一个非营利性的自由软件社区，最出名的开源产品有FireFox（火狐）浏览器、Rust 语言等。今年六月份，Leader Tim Murray 在官网发布了一则改版通告，同时广发英雄帖，邀请全球设计师投稿。

上图是给设计师们的信息，主要阐述了Mozilla 的特点，包括：

1. 完全开源给互联网，而不是某一部分
2. 代表集体利益，而非企业利益
3. 为了安全，为了自由，就是不为了利益

等等。

图里附上了不少相关的图形元素，供设计师们参考。结果短短两个月时间，就收到了成千上万份投稿。8月17号，官方公布了7个入选的设计稿：

1. 《The Eye》

一眼激起千层浪，评论纷纷发来“贺电”：

• 这像是怪兽的眼睛，太惊悚了
• 好像在告诉用户：我们盯着你呢
• 眼睛给人一种“老大哥”看着你的感觉，和社区注重的“隐私”完全是矛盾的。

......

注：“老大哥”出自《1984》这部小说，里面的老大哥监视着人民的一切行动。

2. 《The Connector》

虽然作者可能想表达「Mozilla 连接一切」，可能这次评论有很多不同的争论：

• 我非常喜欢它给人活力四射的感觉，但这个LOGO 的可识别性太差，色彩太多，眼睛都不知道往哪看
• 这是我最喜欢的设计，它体现了多样性。这个LOGO 即使在小尺寸的物品上也能一目了然，而且它的色彩根据不同的国家进行变化，线条不变，从而保持其识别性。事实上，线条隐藏了“Mozilla”的字眼，像复活节彩蛋。
• 实名反对楼上，好的LOGO 不需要被解密，只要具备可识别性，能给人留下深刻印象就够了。

......

3. 《The Open Button》

作者的阐述是：只要按下Mozilla 这个按钮，就可以进入开放的互联网世界。

然而...

• 完全看不出和Mozilla 有什么联系
• 图形还可以，但是配色太糟糕了
• 像一个音乐播放器（hhhh）

......

4. 《Protocol》

设计师把Mozilla 的 “ill” 修改成HTTP 协议中的“/”（作为请求URI时都必须加上的符号）。这款LOGO 大受欢迎，评论区一片叫好：

• 颜色好评！协议的创意好评！识别性好评！
• 简单但传达了很多
• 在这个LOGO 中可以清晰地看到“Mozilla、Web、协议”，而且一眼就记住了

......

5. 《The Impossible M》

设计师将Mozilla 的“M”提炼出来，做成了这款复古风的LOGO，「评论区的意见大致统一：

• 圆点和颜色给我一种90年代的感觉，现在看起来已经过时了，我在想10年后该如何面对这样的LOGO
• 赞成，排除圆点和颜色，这个形状我非常喜欢，换个颜色，它会是个好设计
• 这是一个伟大的设计，但它嬉皮复古的色彩更适合视觉/网页设计公司，而不是Mozilla

......

6. 《Flik Flak》

LOGO 是最后一个图形，上图展现了成品的搭建过程。为什么不直接放LOGO？因为我和网友一样，刚开始完全看不懂...

• 难以辨认，完全不知道想表达什么
• 这个太复杂了，看起来更像是艺术作品，而不是LOGO
• 颜色是7个里面最棒的，但是小尺寸上显示会丢掉很多细节

.....

仔细看的话，能发现这个其实花了很多心思。搭建出来的作品并非无中生有，而是Mozilla 的字母，色彩选得也非常漂亮，有类似微软的现代风格。但作为一款LOGO ，识别性大打折扣是不行的。如果后期能进行简化，或者效果会很不错。

7. 《Wireframe World》

作品名字是《线框世界》，侧面是“M”的形象，这个LOGO  非常灵活，表现多样：

当然，网友对此有别的看法：

• 离开线框的定义，这是一个很棒的象征互联网无限性的视觉比喻案例
• 我喜欢这样的视觉比喻，但感觉和Mozilla 无关？
• 我喜欢这个框架的灵活性，可以表达不同的主题，适应更多的国家
• 看起来像个空盒子，似乎与Medium 的LOGO 很接近？

注：Medium 是全球的知名博客，LOGO 改版不久：《LOGO改版实战！聊聊MEDIUM 2.0新LOGO背后的设计故事》

众说纷纭之时，Mozilla 也邀请了不少品牌设计专家筛选，九月份官方更新了制作进展：

排除四个，留下的三个，《The Eye》进行改版，《Protocol》的字体从Lubalin 改成开源字体Arvo Bold，另外诞生了两个全新的LOGO。

△ 从左往右分别是《The Eye》、《Burst》、《Flame》、《Protocol》

确定这四个方案后，官方在全球进行了一次大范围的调查。首先是他们的主要用户群：700多名开发者和450名Mozilla 人。结果如下图：

很明显《Protocol》（协议）胜出。

但消费者的想法不同。官方在美国，英国，德国，法国，印度，巴西和墨西哥等地做调研时，消费者更喜欢 《Burst》。

为什么消费者更喜欢第二个？官方猜测一是《Protocol》（即协议）是二维的，比较乏味。从设计角度看，它可以扩展的视觉系统有限。相比之下，《Burst》感觉更加现代、色彩更丰富，在3D 形式上也有更多的发挥空间。

《Burst》

该如何取舍？

几经商讨之后，官方最后选择了《Protocol》，原因有三：

1. 《Burst》如果去掉了Mozilla 的字样，是否还有人知道这是什么LOGO？
2. 对于熟悉协议的人（即主力用户），他们可以通过品牌看到我们的开放互联网的决心，对于不熟悉的受众，也能引起他们的好奇心，从而建立关系
3. 我们会探索更多的形式来扩展这个LOGO 的表现，不过暂时保密

至此新LOGO 的创意大致落地，接下来的几个月时间，官方进行了不断的细化和视觉扩展，前两天发布了“最后一稿”：

这次的字体是由Mozilla 的历史合作伙伴Typotheque 创造的免费开源字体Zilla：

不同颜色下的品牌：

品牌周边应用：

 「上周人气最高的3篇文章」

1. 《看着高大上的2.5D插画，轻松5步就可以做出来！》

这类效果今年很受欢迎，刚好年底，很多公司也喜欢用这个形式做盘点。不过本文教的是绘制这类插画的方法，而不是手把手的PS 操作，所以很多同学说“不简单”。编辑特意去问了作者，能否出一个视频教程。然而3000多个图层你懂的... 作者表示确实很简单，大家不妨动手试一下。

2. 《你看过的所有电影海报设计，都在这18个种类里了》

本文总结了几乎一切电影海报的设计套路，这么用心的文章，人气不破万都说不过去。

3. 《做一个实战教程，让你学会图层样式9大技能》

教程本身不难，不过对图层样式的运用相当多，适合新手学习图层样式时练习。

 「上周人气最高的3条微博」

 1. 学好手绘的重要性

许多顶尖设计师都在推崇手绘是不可或缺的职业技能，除了可以快速的传达不同想法和创意以外，同时可以让设计师和客户之间达成更好的沟通效果，以此来推进项目发展，下面就让我们一起来欣赏设计师 Andrew Kirp 的超酷创作过程。 ​​​​

完整版地址：http://www.weibo.com/1773655610/Eri3U4qf7

2. 如何从零创作精美的插画作品

视频地址：http://www.weibo.com/1773655610/ErOZ3iPFh

3. 高端大气的网页设计

乌克兰设计工作室Tubik的着陆页设计作品，这些视觉效果出色的页面一定能起到很好的引导用户的作用，同时提高用户体验，增强互动性。 ​​​​

完整版地址：http://www.weibo.com/1773655610/ErriaFA9I

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com