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

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

2017/01/24 8105评论区

uisdc-weekly-ios10-firefox-logo-1

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

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

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

uisdc-news-201601235

此次更新不仅有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 在官网发布了一则改版通告,同时广发英雄帖,邀请全球设计师投稿。

uisdc-mm20170123

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

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

等等。

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

1. 《The Eye》

jb_Mozilla_design_pres_edit_3.key

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

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

……

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

2. 《The Connector》

jb_Mozilla_design_pres_edit_3.key

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

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

……

3. 《The Open Button》

jb_Mozilla_design_pres_edit_3.key

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

然而…

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

……

4. 《Protocol》

jb_Mozilla_design_pres_edit_3.key

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

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

……

5. 《The Impossible M》

jb_Mozilla_design_pres_edit_3.key

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

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

……

6. 《Flik Flak》

jb_Mozilla_design_pres_edit_3.key

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

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

…..

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

7. 《Wireframe World》

jb_Mozilla_design_pres_edit_3.key

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

jb_Mozilla_design_pres_edit_3.key

当然,网友对此有别的看法:

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

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

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

mj_tm_Moz_Nashville_edits for new pics.key

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

news_Mozilla-sept_final_four_all-up

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

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

Screen-Shot-2016-10-19-at-9.56.54-PM

很明显《Protocol》(协议)胜出。

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

1-news-Screen-Shot-2016-10-19-at-9.56.54-PM

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

news-Burst_rotating

《Burst》

该如何取舍?

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

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

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

uisdc-news-201701244_

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

uisdc-news-201701241

不同颜色下的品牌:

uisdc-news-201701242_

品牌周边应用:

uisdc-news-201701243

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

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

gaga20170116

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

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

uisdc-movie-20170116-1

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

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

uisdc-course-20170117-1

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

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

 1. 学好手绘的重要性

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

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

zb-20170124

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

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

zb-20170123-2

3. 高端大气的网页设计

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

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

zb-20170123-3

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/uisdc-weekly-ios10-firefox-logo

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 优设专访 交互设计师 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里