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

点赞
收藏

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
相关推荐
评论 收藏