編者按：本周主要有2個(gè)大事件：蘋果官方更新了iOS 10 的UI KIT（PSD+Sketch.），火狐開發(fā)社區(qū)Mozilla 那個(gè)做了半年多的LOGO 終于發(fā)布。文末有優(yōu)設(shè)網(wǎng)上周人氣最高的3條微博+3篇文章，敬請(qǐng)享用。

優(yōu)設(shè)周報(bào)丨帶你一次看完本周的設(shè)計(jì)大事和高人氣教程！

1. 蘋果官方設(shè)計(jì)資源更新（iOS 10 UI KIT）

此次更新不僅有PSD，還有Sketch 版本，這一信號(hào)無疑表示Sketch 作為UI 設(shè)計(jì)軟件已經(jīng)得到了官方的權(quán)威認(rèn)證，還沒學(xué)Sketch 的同學(xué)該抓緊了。

官方下載地址：https://developer.apple.com，速度略慢，請(qǐng)自帶梯子。PSD 版本有100多M，Sketch 雖然?。?.1M），但是有設(shè)計(jì)師反饋控件不全，特別是沒有iPad 版的。

2. 知名開源社區(qū) Mozilla 新版LOGO 發(fā)布

Mozilla 是一個(gè)非營利性的自由軟件社區(qū)，最出名的開源產(chǎn)品有FireFox（火狐）瀏覽器、Rust 語言等。今年六月份，Leader?Tim Murray 在官網(wǎng)發(fā)布了一則改版通告，同時(shí)廣發(fā)英雄帖，邀請(qǐng)全球設(shè)計(jì)師投稿。

上圖是給設(shè)計(jì)師們的信息，主要闡述了Mozilla 的特點(diǎn)，包括：

1. 完全開源給互聯(lián)網(wǎng)，而不是某一部分
2. 代表集體利益，而非企業(yè)利益
3. 為了安全，為了自由，就是不為了利益

等等。

圖里附上了不少相關(guān)的圖形元素，供設(shè)計(jì)師們參考。結(jié)果短短兩個(gè)月時(shí)間，就收到了成千上萬份投稿。8月17號(hào)，官方公布了7個(gè)入選的設(shè)計(jì)稿：

1.?《The Eye》

一眼激起千層浪，評(píng)論紛紛發(fā)來“賀電”：

• 這像是怪獸的眼睛，太驚悚了
• 好像在告訴用戶：我們盯著你呢
• 眼睛給人一種“老大哥”看著你的感覺，和社區(qū)注重的“隱私”完全是矛盾的。

......

注：“老大哥”出自《1984》這部小說，里面的老大哥監(jiān)視著人民的一切行動(dòng)。

2. 《The Connector》

雖然作者可能想表達(dá)「Mozilla 連接一切」，可能這次評(píng)論有很多不同的爭論：

• 我非常喜歡它給人活力四射的感覺，但這個(gè)LOGO 的可識(shí)別性太差，色彩太多，眼睛都不知道往哪看
• 這是我最喜歡的設(shè)計(jì)，它體現(xiàn)了多樣性。這個(gè)LOGO 即使在小尺寸的物品上也能一目了然，而且它的色彩根據(jù)不同的國家進(jìn)行變化，線條不變，從而保持其識(shí)別性。事實(shí)上，線條隱藏了“Mozilla”的字眼，像復(fù)活節(jié)彩蛋。
• 實(shí)名反對(duì)樓上，好的LOGO 不需要被解密，只要具備可識(shí)別性，能給人留下深刻印象就夠了。

......

3. 《The Open Button》

作者的闡述是：只要按下Mozilla 這個(gè)按鈕，就可以進(jìn)入開放的互聯(lián)網(wǎng)世界。

然而...

• 完全看不出和Mozilla 有什么聯(lián)系
• 圖形還可以，但是配色太糟糕了
• 像一個(gè)音樂播放器（hhhh）

......

4. 《Protocol》

設(shè)計(jì)師把Mozilla 的 “ill” 修改成HTTP 協(xié)議中的“/”（作為請(qǐng)求URI時(shí)都必須加上的符號(hào)）。這款LOGO 大受歡迎，評(píng)論區(qū)一片叫好：

• 顏色好評(píng)！協(xié)議的創(chuàng)意好評(píng)！識(shí)別性好評(píng)！
• 簡單但傳達(dá)了很多
• 在這個(gè)LOGO 中可以清晰地看到“Mozilla、Web、協(xié)議”，而且一眼就記住了

......

5. 《The Impossible M》

設(shè)計(jì)師將Mozilla 的“M”提煉出來，做成了這款復(fù)古風(fēng)的LOGO，「評(píng)論區(qū)的意見大致統(tǒng)一：

• 圓點(diǎn)和顏色給我一種90年代的感覺，現(xiàn)在看起來已經(jīng)過時(shí)了，我在想10年后該如何面對(duì)這樣的LOGO
• 贊成，排除圓點(diǎn)和顏色，這個(gè)形狀我非常喜歡，換個(gè)顏色，它會(huì)是個(gè)好設(shè)計(jì)
• 這是一個(gè)偉大的設(shè)計(jì)，但它嬉皮復(fù)古的色彩更適合視覺/網(wǎng)頁設(shè)計(jì)公司，而不是Mozilla

......

6. 《Flik Flak》

LOGO 是最后一個(gè)圖形，上圖展現(xiàn)了成品的搭建過程。為什么不直接放LOGO？因?yàn)槲液途W(wǎng)友一樣，剛開始完全看不懂...

• 難以辨認(rèn)，完全不知道想表達(dá)什么
• 這個(gè)太復(fù)雜了，看起來更像是藝術(shù)作品，而不是LOGO
• 顏色是7個(gè)里面最棒的，但是小尺寸上顯示會(huì)丟掉很多細(xì)節(jié)

.....

仔細(xì)看的話，能發(fā)現(xiàn)這個(gè)其實(shí)花了很多心思。搭建出來的作品并非無中生有，而是Mozilla 的字母，色彩選得也非常漂亮，有類似微軟的現(xiàn)代風(fēng)格。但作為一款LOGO ，識(shí)別性大打折扣是不行的。如果后期能進(jìn)行簡化，或者效果會(huì)很不錯(cuò)。

7. 《Wireframe World》

作品名字是《線框世界》，側(cè)面是“M”的形象，這個(gè)LOGO ?非常靈活，表現(xiàn)多樣：

當(dāng)然，網(wǎng)友對(duì)此有別的看法：

• 離開線框的定義，這是一個(gè)很棒的象征互聯(lián)網(wǎng)無限性的視覺比喻案例
• 我喜歡這樣的視覺比喻，但感覺和Mozilla 無關(guān)？
• 我喜歡這個(gè)框架的靈活性，可以表達(dá)不同的主題，適應(yīng)更多的國家
• 看起來像個(gè)空盒子，似乎與Medium 的LOGO 很接近？

注：Medium 是全球的知名博客，LOGO 改版不久：《LOGO改版實(shí)戰(zhàn)！聊聊MEDIUM 2.0新LOGO背后的設(shè)計(jì)故事》

眾說紛紜之時(shí)，Mozilla 也邀請(qǐng)了不少品牌設(shè)計(jì)專家篩選，九月份官方更新了制作進(jìn)展：

排除四個(gè)，留下的三個(gè)，《The Eye》進(jìn)行改版，《Protocol》的字體從Lubalin 改成開源字體Arvo Bold，另外誕生了兩個(gè)全新的LOGO。

△ 從左往右分別是《The Eye》、《Burst》、《Flame》、《Protocol》

確定這四個(gè)方案后，官方在全球進(jìn)行了一次大范圍的調(diào)查。首先是他們的主要用戶群：700多名開發(fā)者和450名Mozilla 人。結(jié)果如下圖：

很明顯《Protocol》（協(xié)議）勝出。

但消費(fèi)者的想法不同。官方在美國，英國，德國，法國，印度，巴西和墨西哥等地做調(diào)研時(shí)，消費(fèi)者更喜歡 《Burst》。

為什么消費(fèi)者更喜歡第二個(gè)？官方猜測一是《Protocol》（即協(xié)議）是二維的，比較乏味。從設(shè)計(jì)角度看，它可以擴(kuò)展的視覺系統(tǒng)有限。相比之下，《Burst》感覺更加現(xiàn)代、色彩更豐富，在3D 形式上也有更多的發(fā)揮空間。

《Burst》

該如何取舍？

幾經(jīng)商討之后，官方最后選擇了《Protocol》，原因有三：

1. 《Burst》如果去掉了Mozilla 的字樣，是否還有人知道這是什么LOGO？
2. 對(duì)于熟悉協(xié)議的人（即主力用戶），他們可以通過品牌看到我們的開放互聯(lián)網(wǎng)的決心，對(duì)于不熟悉的受眾，也能引起他們的好奇心，從而建立關(guān)系
3. 我們會(huì)探索更多的形式來擴(kuò)展這個(gè)LOGO 的表現(xiàn)，不過暫時(shí)保密

至此新LOGO 的創(chuàng)意大致落地，接下來的幾個(gè)月時(shí)間，官方進(jìn)行了不斷的細(xì)化和視覺擴(kuò)展，前兩天發(fā)布了“最后一稿”：

這次的字體是由Mozilla 的歷史合作伙伴Typotheque 創(chuàng)造的免費(fèi)開源字體Zilla：

不同顏色下的品牌：

品牌周邊應(yīng)用：

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

1. 《看著高大上的2.5D插畫，輕松5步就可以做出來！》

這類效果今年很受歡迎，剛好年底，很多公司也喜歡用這個(gè)形式做盤點(diǎn)。不過本文教的是繪制這類插畫的方法，而不是手把手的PS 操作，所以很多同學(xué)說“不簡單”。編輯特意去問了作者，能否出一個(gè)視頻教程。然而3000多個(gè)圖層你懂的... 作者表示確實(shí)很簡單，大家不妨動(dòng)手試一下。

2. 《你看過的所有電影海報(bào)設(shè)計(jì)，都在這18個(gè)種類里了》

本文總結(jié)了幾乎一切電影海報(bào)的設(shè)計(jì)套路，這么用心的文章，人氣不破萬都說不過去。

3. 《做一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)圖層樣式9大技能》

教程本身不難，不過對(duì)圖層樣式的運(yùn)用相當(dāng)多，適合新手學(xué)習(xí)圖層樣式時(shí)練習(xí)。

?「上周人氣最高的3條微博」

?1. 學(xué)好手繪的重要性

許多頂尖設(shè)計(jì)師都在推崇手繪是不可或缺的職業(yè)技能，除了可以快速的傳達(dá)不同想法和創(chuàng)意以外，同時(shí)可以讓設(shè)計(jì)師和客戶之間達(dá)成更好的溝通效果，以此來推進(jìn)項(xiàng)目發(fā)展，下面就讓我們一起來欣賞設(shè)計(jì)師 Andrew Kirp 的超酷創(chuàng)作過程。 ????

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

2.?如何從零創(chuàng)作精美的插畫作品

視頻地址：http://www.weibo.com/1773655610/ErOZ3iPFh

3.?高端大氣的網(wǎng)頁設(shè)計(jì)

烏克蘭設(shè)計(jì)工作室Tubik的著陸頁設(shè)計(jì)作品，這些視覺效果出色的頁面一定能起到很好的引導(dǎo)用戶的作用，同時(shí)提高用戶體驗(yàn)，增強(qiáng)互動(dòng)性。 ????

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com