《情感化設(shè)計(jì)心理學(xué)中》作者唐納德·諾曼將情感化設(shè)計(jì)與馬斯洛的人類需求層次理論聯(lián)系了起來。 產(chǎn)品特質(zhì)也可以被劃分為功能性、可依賴性、可用性和愉悅性這四個(gè)從低到高的層面，而情感化設(shè)計(jì)則處于其中最上層的“愉悅性”層面當(dāng)中。

因?yàn)槭袌錾喜煌放频耐惍a(chǎn)品在功能、質(zhì)量、價(jià)格等基本品質(zhì)方面已經(jīng)差別越來越小,尤其是消費(fèi)類產(chǎn)品,比如手機(jī)家電之類的,產(chǎn)品的同質(zhì)化趨勢非常明顯,競爭日趨激烈。 消費(fèi)者在購買產(chǎn)品時(shí),情感因素的影響也日益加大,這意味著如果產(chǎn)品具有相同功能、質(zhì)量和價(jià)格,消費(fèi)者會選擇更能觸動(dòng)其情感的產(chǎn)品。

有一種“奇怪的”現(xiàn)象會經(jīng)常的看到“很多設(shè)計(jì)師沒有辦法清楚的跟其他人解釋他們是如何設(shè)計(jì)的，越細(xì)致的地方可能越是如此。比如，這個(gè)菜單的寬度為什么是200px？250px或者190px是否可以？圖片的尺寸為什么是278px*196px？如何確定網(wǎng)頁的寬度？“

軟件界面的設(shè)計(jì)師除了視覺本身以外，對于設(shè)計(jì)是否可以實(shí)現(xiàn)、大概以何種方式實(shí)現(xiàn)、規(guī)范可否被理解并且復(fù)制執(zhí)行、設(shè)計(jì)實(shí)現(xiàn)的性價(jià)比與時(shí)間比等緯度都應(yīng)有相當(dāng)高度的認(rèn)識。就像建筑設(shè)計(jì)師一樣，他們一定很了解建筑材料以及如何建筑，雖然他們不會去親自砌墻。:)

希望通過此文可以交流關(guān)于柵格化和盒子比例的設(shè)計(jì)方法。

柵格化

對于網(wǎng)頁的寬度，設(shè)計(jì)師之間基本上比較容易達(dá)成共識，比如：950px、960px、1000px、1190px、1200px。但是如果接下來讓 每一個(gè)設(shè)計(jì)師設(shè)計(jì)一個(gè)左右布局的版式，左邊是一個(gè)樹形菜單，右邊是主要內(nèi)容區(qū)域。那么可能會有很多結(jié)果。但是這些結(jié)果基本上是比較接近的。如果這些設(shè)計(jì)師 都服務(wù)于一個(gè)品牌下的話，這種情況并不是一個(gè)好的事情。會給人以沒有一致性的感覺。

圖1：一個(gè)產(chǎn)品站點(diǎn)，同樣是980px的頁面寬度，但是菜單寬度分別為：200px和245px

為了不落后他人，于是我也開始學(xué)習(xí)Scrum，今天主要是對我最近閱讀的相關(guān)資料，根據(jù)自己的理解，用自己的話來講述Scrum中的各個(gè)環(huán)節(jié)，主要目的有兩個(gè)，一個(gè)是進(jìn)行知識的總結(jié)，另外一個(gè)是覺得網(wǎng)上很多學(xué)習(xí)資料的講述方式讓初學(xué)者不太容易理解；所以我決定寫一篇掃盲性的博文，同時(shí)試著也與園內(nèi)的朋友一起分享交流一下，希望對初學(xué)者有幫助。

然如今好的配色方案已經(jīng)唾手可得，但為數(shù)據(jù)可視化找到合適的配色方案，卻仍是一項(xiàng)巨大挑戰(zhàn)。

在Graphiq，事情甚至更加棘手，因?yàn)槲覀円ㄟ^上千種各不相同的數(shù)據(jù)集合來傳遞信息，它們有著各自迥異的視覺表現(xiàn)。

Photoshop越來越強(qiáng)大了！試圖掌控它的全部特性是不現(xiàn)實(shí)的（更何況有那么多隱藏的功能！），那么我們不妨收藏一下大神們總結(jié)的這120個(gè)PS技巧，偶爾翻看一下，讓自己的設(shè)計(jì)更強(qiáng)大更！

這120款技巧覆蓋了PS絕大多數(shù)的主要功能，這些功能你很熟悉，但是明白它們的細(xì)節(jié)，掌控發(fā)招的捷徑，修圖作畫的時(shí)候說不定能收獲奇效呢！

在此之前，我們不妨先快速溫故一下PS的基本功能：《PS速成秘籍！如何在兩小時(shí)內(nèi)搞懂PHOTOSHOP基礎(chǔ)工具？》

不得不說，歷史總是驚人的相似！西方建筑和網(wǎng)頁設(shè)計(jì)同為工程與藝術(shù)的綜合體，兩者的發(fā)展歷程如此之相似，和以下四個(gè)因素有著不可分割的關(guān)系：

• 都為用戶提供了一個(gè)場所?
• 都借助工程學(xué)構(gòu)來構(gòu)建他們?
• 科技的進(jìn)步是他們的發(fā)展瓶頸??
• 盡管如此，它們?nèi)匀皇撬囆g(shù)的一種展現(xiàn)形式?

在這些設(shè)定之下，你可以清晰地看到建筑和網(wǎng)頁設(shè)計(jì)的發(fā)展路徑是極為相似的。所以，如果你想了解網(wǎng)頁設(shè)計(jì)會向何處發(fā)展，看看過去的那些建筑就知道了。

一、新石器時(shí)代——簡單而有限的結(jié)構(gòu)

在這個(gè)階段，能把東西構(gòu)建出來就已經(jīng)是壯舉了，除了尺寸和位置這樣的變量，并沒有什么花活。

說道對比，你會想到什么？也許是黑白對比，大小對比，但是對比所存在的形式還有很多，遠(yuǎn)不止于此。

事實(shí)上，對比度是最重要的設(shè)計(jì)原則之一，它也是每個(gè)設(shè)計(jì)項(xiàng)目中必不可少的設(shè)計(jì)要求。為什么這么說呢？控制對比度有助于設(shè)計(jì)項(xiàng)目的組織結(jié)構(gòu)化，建立信息和視覺的層次，讓你最重要的部分成為視覺的重心，讓關(guān)鍵信息突出展示。善于使用有對比度的設(shè)計(jì)，能增加視覺的觀賞性和趣味性。在相同的布局、相同的視覺元素中，形態(tài)和色彩的變化有時(shí)候非常單調(diào)，但是對比能讓變化顯得不同凡響。

當(dāng)用戶訪問電商網(wǎng)站的時(shí)候，第一屏的信息展示是非常重要的，很大程度上影響了用戶是否決定停留，然而光靠文字大面積的堆積，很難直觀而迅速的告訴用戶來到這里會得到什么有用的信息，因此網(wǎng)頁Banner設(shè)計(jì)在這里起到了至關(guān)重要的展示作用，特別是對于首頁Banner，有效的信息傳達(dá)可以快速提高頁面轉(zhuǎn)化率。那么竹子來教你如何設(shè)計(jì)一個(gè)好的電商Banner。

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

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

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

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

2、jQuery UI - 基于jQuery的開源Javascript框架

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

編者按：想知道Behance上有哪些設(shè)計(jì)師值得關(guān)注，看這個(gè)列表就對了！作為全球最大的藝術(shù)展示社區(qū)，優(yōu)秀的設(shè)計(jì)師每天都會抽時(shí)間到Behance上學(xué)習(xí)，作汲取靈感之用。如果你不知道有哪些人值得Follow，這篇?jiǎng)偤脤ξ叮?