本文是愛奇藝無線UED負責(zé)人@曉生 在項目工作中學(xué)習(xí)到的知識，針對兒童的習(xí)慣，從 配色、線條、布局、聲音等都作了圖文分析，如果有設(shè)計師剛好在開發(fā)兒童類產(chǎn)品，這篇小結(jié)會是不錯的學(xué)習(xí)經(jīng)驗唷。

@曉生 ：最近處于項目需要，開始研究兒童產(chǎn)品的界面設(shè)計。在此之前，對兒童如何使用移動產(chǎn)品和如何設(shè)計知之甚少。優(yōu)質(zhì)的移動應(yīng)用，為兒童帶來樂趣的同時可以幫助兒童認知事物。越來越多的兒童使用移動設(shè)備，接觸虛擬社區(qū)的時間甚至早于真實世界，如何設(shè)計兒童產(chǎn)品是一個非常值得深入研究的課題。

如果你鐘情純美的童真，那么這個教程可能非常適合你唷：
《PS教程：利用修飾技術(shù)將照片變?yōu)橛腥さ穆嫛?/span>

本文簡單地從視覺、界面層級關(guān)系和交互等方面分析兒童與成人界面之間的差異性。

顏色

細心的朋友會發(fā)現(xiàn)兒童家具明顯有別于其他家具，最明顯的特征就是顏色，這是因為兒童視力到8歲才能發(fā)育完全，對色彩的認知也是從簡單的三原色開始，兒童偏向于喜歡高純度和高明度的原色。

iPad版奇藝動畫片的啟動界面以品牌綠為主，配合多種紅藍黃等顏色，整體寫實藍天綠草地的真實意境，營造輕松有趣的氛圍。

線條

本文介紹的案例均使用了的HTML/CSS 以及 JS 技術(shù)，從視差滾動到響應(yīng)式設(shè)計，實現(xiàn)了良好的交互性，為用戶提供更好的瀏覽體驗。我們來快速閱覽一下吧。

推薦閱讀：
《網(wǎng)頁設(shè)計新趨勢！25例出眾的響應(yīng)式導(dǎo)航設(shè)計》
《讓網(wǎng)站更生動！那些在網(wǎng)頁中完美運用視頻元素的案例》
《不要落伍！來和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計》

Melbourne Remote Control Tourist

的遠程旅游體驗，這個概念不錯吧！

Melbourne Remote Control Tourist

花了大量時間在網(wǎng)上搜集行業(yè)里高質(zhì)量網(wǎng)頁設(shè)計的博客，不過話說回來，高質(zhì)量可信的資源確實挺稀缺的。

CSS-Tricks

CSS-Tricks是Chris Coyier公眾博客，專門講一些有關(guān)CSS的話題。不過近幾年來，CSS-Tricks有了下面一些擴展：

Chris和Dave Rupert一起創(chuàng)造了ShopTalk 播客，在里面可以討論所以有關(guān)網(wǎng)頁設(shè)計和開發(fā)的事情。
Chris 出過幾本書，做了一個 Lynda.com的Wordpress主題課程，并且他還創(chuàng)建了一個The Lodge的課程教人們學(xué)習(xí)如何制作一個頗具現(xiàn)代感的網(wǎng)站。
超多很酷的項目，像 CodePen，HTML-Ipsum， Quotes on Design 。Chris真是個超有想法的人。

CSS-Tricks 是 Chris Coyier 2007年建立的，總部在美國懷俄明州的密爾沃基，至今網(wǎng)站月頁面訪問量達270萬。

網(wǎng)站亮點（這個網(wǎng)站的獨特之處是什么？）：

名人效應(yīng)——Chris Coyier 是這么網(wǎng)站的精神領(lǐng)袖，他的個人風(fēng)格貫穿于項目始終，是眾多設(shè)計師的楷模。向他學(xué)習(xí)，同他一同去冒險吧！

現(xiàn)在扁平化風(fēng)格在網(wǎng)頁設(shè)計方面已經(jīng)有許多優(yōu)秀的范例了，比如這22個超贊的扁平化設(shè)計經(jīng)典案例就有很多我們可以借鑒學(xué)習(xí)的地方。但是移動端的界面設(shè)計扁平化風(fēng)格較少，所以今天從Behance和Dribbble收集的這一組移動端的扁平化設(shè)計就該好好看看咯，學(xué)習(xí)一下它們優(yōu)秀的細節(jié)和配色吧 : ）

如果你對扁平化風(fēng)格的網(wǎng)站更有興趣，那么推薦閱讀：
一組賦予你扁平化配色靈感的網(wǎng)頁設(shè)計
怒贊！2013扁平化設(shè)計終極指南
專屬扁平化設(shè)計的PS色板（配色庫）

uiGo Colors – iOS Flat UI Bundle

我們一起來看一下吧，本文收集了50款專屬設(shè)計師的精華資源包，分別有圖標、主題、UI套件、插件、網(wǎng)頁模版、字體等等，一網(wǎng)打盡、一應(yīng)俱全，萬里挑一！實屬優(yōu)設(shè)哥獻給您的千金難換的干貨喲！

10月收尾，11月馬上來臨，到了該總結(jié)經(jīng)驗整理思路的時候了。各位設(shè)計師對本月工作滿意嗎？嗯，沒關(guān)系，不管好還是壞，11月份，我們重整旗鼓，繼續(xù)前進。

大家都知道，如果有素材和工具的支持，工作起來得心應(yīng)手，趕緊來挑選適合你的神兵利器吧：）

Flatic

大型UI套件，涵蓋百余種UI元素。

Gamecenter Pack

互聯(lián)網(wǎng)最偉大的精神在于分享，我們喜歡探索、喜歡發(fā)現(xiàn)，務(wù)求將最好的資源呈遞給所有設(shè)計愛好者。
相信這里面你大多數(shù)都還沒見過呢！
50個免費資源：包括了圖標、字體、PSD、矢量圖、圖案、UI套件、調(diào)試工具等等。
琳瑯滿目！亂花漸欲迷人眼，請您精挑細選，選擇最合適自己的素材，讓你的設(shè)計項目變得更漂亮、更專業(yè)。

OOcharts

設(shè)計師們還沒更新模板嗎？這是優(yōu)設(shè)10月份搜尋的UI模板，總共有27款，大多數(shù)為扁平化設(shè)計，都是免費且的，希望這些收集能給你正在進行的項目一點幫助 : ）

同樣精心收集，希望對你有幫助 : ）
52款新鮮免費的優(yōu)質(zhì)界面PSD下載
50個超贊的免費設(shè)計師工具資源下載

Apple Product Line Wire Frame PSD by Rubayath

Chrome UI Kit v.2 by Todd Hamilton

我們在設(shè)計的時候，往往會微調(diào)一下顏色的明暗度，又或者去一些在線配色工具網(wǎng)站上準確調(diào)節(jié)明亮度，但這樣是比較麻煩的，這里設(shè)計達人網(wǎng)找到一個非常好用的Photoshop亮度調(diào)節(jié)腳本，使用的時候只需要按下Photoshop快捷鍵就能調(diào)整顏色的明與暗，節(jié)省了很多設(shè)計時間。

如何使用亮度調(diào)節(jié)腳本

首先在Photoshop工具欄的前景色面板上選擇需要的顏色，然后運行對應(yīng)腳本來實現(xiàn)顏色的明暗變化。

曾經(jīng)，CSS 畫廊非常流行，網(wǎng)頁設(shè)計師們會定期訪問這些網(wǎng)站獲取靈感。現(xiàn)在仍然可以方便迅速找到令人興奮的東西（例如 Dribbble 和 Behance 對設(shè)計有很大的幫助）。

對于移動應(yīng)用程序設(shè)計，存在類似的畫廊，我相信他們會更加有用。這是因為如果不安裝移動應(yīng)用程序，靈感更難獲得，也更需要時間和努力。這12個畫廊有很多漂亮的應(yīng)用程序用戶界面，并進行了很好的分類。趕緊收藏吧！

優(yōu)設(shè)好文：
強烈推薦！你應(yīng)該到這里尋找網(wǎng)頁設(shè)計靈感

Creattica – Mobile Interface

Creattica 是一個靈感畫廊，展示最好的網(wǎng)站設(shè)計，標志設(shè)計，平面設(shè)計，攝影，作品。

Lovely UI

收集各種移動界面元素，啟動畫面，按鈕，導(dǎo)航，通知等等各種組件的設(shè)計。

@ 十萬個為什麼 ：蘋果的新iOS我們已經(jīng)上手好幾周了，準備好為它而設(shè)計嗎？

如果你已經(jīng)有一個運行于此平臺的App，你可能打算為新iOS而設(shè)計，或者在舊版上做一些必要調(diào)整，不論哪種，你都希望為新界面而設(shè)計，確保你的App與用戶在蘋果設(shè)備上的體驗相吻合。
那么如何做到這點？

扁平，更加扁平

蘋果的iOS7秉承著扁平的設(shè)計理念，盡管它不是完全的扁平化，那么就秉著”較扁平”來規(guī)劃設(shè)計你APP或移動站點。

所有的那些曾經(jīng)輝煌的擬物化風(fēng)格圖標與效果，一去不復(fù)返了。如今的潮流是單色塊、多色文字和大量留白，

蘋果為iOS7制訂的設(shè)計準則鼓勵簡潔設(shè)計與易用性。但是設(shè)計準則并沒有著重介紹我們即將討論的關(guān)于扁平化設(shè)計的規(guī)范。我們能在這些新設(shè)計的APP（包括蘋果自身樣式）中看出一些與扁平設(shè)計特征相違背的東西，

比如說顏色，iOS7包含了相當(dāng)一部分柔和色調(diào)和半透明效果。扁平設(shè)計通常使用明亮、高對比度的顏色。
你所見到的按鍵和按鈕也沒有設(shè)計成扁平樣式。例如鍵盤，每個字母都包含在一個帶陰影效果的按鈕中。這些微妙的效果是新界面的顯著特征。

重視字體