隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面和用戶(hù)體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我們更快更好地實(shí)現(xiàn)一些現(xiàn)代化的界面，包括一些移動(dòng)設(shè)備的網(wǎng)頁(yè)界面風(fēng)格設(shè)計(jì)。本文分享了10個(gè)的CSS UI開(kāi)源框架，有幾個(gè)確實(shí)不錯(cuò)，一起來(lái)看看。

1、Bootstrap – 最流行的Web前端UI框架

Bootstrap是由twitter推出的Web前端UI框架，它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開(kāi)發(fā),是一個(gè)CSS/HTML框架。它使用了的瀏覽器技術(shù)，Bootstrap提供了時(shí)尚的排版樣式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。

官方網(wǎng)站：http://getbootstrap.com/

2、jQuery UI - 基于jQuery的開(kāi)源Javascript框架

jQuery UI是一款基于jQuery的開(kāi)源Javascript框架，jQuery UI框架主要提供了用戶(hù)交互、動(dòng)畫(huà)、和可更換主題的可視控件，讓開(kāi)發(fā)者可以更方便地實(shí)現(xiàn)網(wǎng)頁(yè)交互界面，jQuery UI的整個(gè)框架比較龐大，但你也可以根據(jù)自己需要使用的功能生成適合自己的框架底層。jQuery UI界面設(shè)計(jì)非常漂亮，值得一試。

藝術(shù)家 Austin Kleon 的著書(shū)《像藝術(shù)家一樣去偷：10條沒(méi)人告訴過(guò)你的創(chuàng)意要訣》篇幅不長(zhǎng)，卻給初出茅廬的藝術(shù)家們（有創(chuàng)意的那類(lèi)）提供了許多有益的指導(dǎo)。

不論是在手機(jī)屏幕上，瀏覽器上，還是智能手表的屏幕上，設(shè)計(jì)都是促使產(chǎn)品和用戶(hù)互動(dòng)的最重要的驅(qū)動(dòng)力之一。從扁平化設(shè)計(jì)到 Material Design ，從小屏幕到大屏幕，我分析了一下設(shè)計(jì)的趨勢(shì)演變規(guī)律，并同你分享一下我的一些拙見(jiàn)。到底有哪些趨勢(shì)？這些趨勢(shì)的存在，對(duì)于用戶(hù)有何裨益？它們將會(huì)創(chuàng)建怎樣的未來(lái)？這就是今天的文章所要探討的內(nèi)容。

作為近年設(shè)計(jì)領(lǐng)域中最具有代表性的設(shè)計(jì)風(fēng)格，我們不妨從扁平風(fēng)和 Material Design 入手，聊聊它們是怎樣出現(xiàn)、如何成為現(xiàn)如今的設(shè)計(jì)趨勢(shì)。

截至2010年，25%的電視已經(jīng)連接到網(wǎng)絡(luò)上，而現(xiàn)在這個(gè)數(shù)量已經(jīng)翻倍了。電視現(xiàn)在已經(jīng)成為互聯(lián)網(wǎng)內(nèi)容和社交媒體分發(fā)的重要組成部分，我們需要對(duì)電視端進(jìn)行重新審視和設(shè)計(jì)了。但是，就目前而言，構(gòu)建和設(shè)計(jì)智能電視端的Web內(nèi)容還存在許多設(shè)計(jì)上的障礙、衍生問(wèn)題，硬件碎片化的狀況則讓設(shè)計(jì)上的工作量增加了不少。

但是面對(duì)這個(gè)10英尺外的巨大屏幕，最主要的問(wèn)題還是易用性和輕量級(jí)的交互。

隨著移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展，使得移動(dòng)產(chǎn)品設(shè)計(jì)人員急缺。由于高薪酬，很多其他行業(yè)設(shè)計(jì)師轉(zhuǎn)行做UI設(shè)計(jì)。

那么到底什么是UI設(shè)計(jì)？

做UI設(shè)計(jì)需要掌握哪些知識(shí)體系？

如何去學(xué)習(xí)？

今后如何做職業(yè)規(guī)劃？

是很多新人常會(huì)遇到的問(wèn)題！

針對(duì)這些問(wèn)題，給大家一個(gè)比較全面的解釋?zhuān)Ｍ軒偷叫氯胄幸苿?dòng)設(shè)計(jì)的人！

 故事也許是人類(lèi)最早的敘事方法。大多數(shù)人在童年時(shí)，故事用來(lái)引導(dǎo)他們的行為，了解歷史文化和培養(yǎng)社會(huì)認(rèn)同感。”－Form Wikipedia

1.什么是故事（WHAT）

在討論如何打造故事感體驗(yàn)之前，我們先聊聊什么是故事。

故事（Storytelling）是通過(guò)文字，聲音或圖像來(lái)傳播的事件。它在各種文化扮演著娛樂(lè)，教育，傳播文化和價(jià)值觀的作用。講故事或許是人類(lèi)最早的敘事方法。大多數(shù)人在童年時(shí)，成人都會(huì)用故事來(lái)引導(dǎo)他們的行為，傳授歷史文化和培養(yǎng)社會(huì)認(rèn)同感。注1

講故事是一種解釋和分享的方法。這在我們生活中非常普遍。它們可以彌合文化，語(yǔ)言和年齡之間的分歧。例如在教育中，可以通過(guò)故事讓人更加容易理解。又如遠(yuǎn)古社會(huì)，人類(lèi)使用紀(jì)錄和傳播故事，這些壁畫(huà)即使過(guò)了上千年，依舊能理解其中部分含義。

古埃及金字塔中的。圖片來(lái)自 forum.china.com.cn

甚至在工作中，通過(guò)講故事的形式，也可以讓信息在人與人之間更加的傳輸。比如說(shuō)在討論用戶(hù)需求的會(huì)議上，通過(guò)講故事的手法，產(chǎn)品設(shè)計(jì)可以將用戶(hù)需求轉(zhuǎn)化為一個(gè)個(gè)場(chǎng)景故事，便可以準(zhǔn)確的讓別人理解。 人類(lèi)從古至今一直深受故事影響。從圣經(jīng)到現(xiàn)代小說(shuō)無(wú)不是故事。因此當(dāng)人的大腦在聽(tīng)到故事時(shí)，會(huì)產(chǎn)生特別的反應(yīng)。

在論文《A Theory of Narrative Empathy》中描述到，當(dāng)人類(lèi)聽(tīng)到故事時(shí)，大腦中的”鏡像神經(jīng)細(xì)胞“（一種神經(jīng)細(xì)胞，使人們學(xué)會(huì)從簡(jiǎn)單模仿到復(fù)雜模仿 －Wikipedia）會(huì)異常活躍，促進(jìn)人類(lèi)引發(fā)共鳴并理解別人的行為，所以故事很容易讓人類(lèi)沉浸其中。注2

到底問(wèn)題出現(xiàn)在哪呢？這其實(shí)是由于我們設(shè)計(jì)師對(duì)App技術(shù)框架的知識(shí)匱乏所導(dǎo)致的，雖然我們不必做到會(huì)寫(xiě)代碼，但掌握必要的App技術(shù)框架原理，能更有效地幫助我們預(yù)判哪些方案可行和實(shí)現(xiàn)效果較好，來(lái)讓設(shè)計(jì)方案更接地氣，讓我們一起來(lái)了解一下App技術(shù)框架都有哪些。

一、App技術(shù)框架的類(lèi)型

僅靠敲代碼就搞定背景的網(wǎng)站！得益于CSS技術(shù)的進(jìn)步，現(xiàn)在我們可以敲代碼就實(shí)現(xiàn)超贊的漸變背景，效果絲毫不輸Photoshop，且不受屏幕大小限制，絕對(duì)是未來(lái)的熱門(mén)趨勢(shì)之一，搶先學(xué)起來(lái) >>>

漸變的配色怎么辦？給你一個(gè)在線(xiàn)工具！《新年配色禮包！五款幫你在線(xiàn)搞定配色的WEB APP》

新年剛過(guò)，給自己許個(gè)愿吧：《新年專(zhuān)屬教程！手把手教你繪制簡(jiǎn)單好學(xué)的新年簽》

Love Message

Niek Dekker

根據(jù)客戶(hù)的需求完成一個(gè)高質(zhì)量的設(shè)計(jì)工作是不容易的，而且大多數(shù)設(shè)計(jì)師知道構(gòu)建你的有效的時(shí)間管理結(jié)構(gòu)是非常重要的。

你有很多方法可以構(gòu)建這個(gè)過(guò)程，但幾個(gè)關(guān)鍵階段，如調(diào)查研究或修訂，應(yīng)始終是你的時(shí)間表的一部分。

這里有7個(gè)步驟，大多數(shù)設(shè)計(jì)項(xiàng)目必須經(jīng)過(guò)從最初的客戶(hù)簡(jiǎn)報(bào)中得到一個(gè)成功的設(shè)計(jì)。

整體的統(tǒng)一感知：大腦會(huì)將復(fù)雜的視覺(jué)內(nèi)容簡(jiǎn)化為容易理解的整體，如圖所示；