藍藍注：在我們做ui項目的時候，最終一般會給客戶一份整理好的ui設計規(guī)范或總結。

所以搜集這方面的資料，希望了解眾家之長，學習用在工作中，這篇覺得還不錯。

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

因為市場上不同品牌的同類產(chǎn)品在功能、質(zhì)量、價格等基本品質(zhì)方面已經(jīng)差別越來越小,尤其是消費類產(chǎn)品,比如手機家電之類的,產(chǎn)品的同質(zhì)化趨勢非常明顯,競爭日趨激烈。 消費者在購買產(chǎn)品時,情感因素的影響也日益加大,這意味著如果產(chǎn)品具有相同功能、質(zhì)量和價格,消費者會選擇更能觸動其情感的產(chǎn)品。

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

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

希望通過此文可以交流關于柵格化和盒子比例的設計方法。

柵格化

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

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

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

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

在Graphiq，事情甚至更加棘手，因為我們要通過上千種各不相同的數(shù)據(jù)集合來傳遞信息，它們有著各自迥異的視覺表現(xiàn)。

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

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

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

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

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

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

一、新石器時代——簡單而有限的結構

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

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

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

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

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

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

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

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

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

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