Google在品牌塑造上，Google 已被證明做得極為成功，而且在視覺表現層面，Google 系產品具備著“一致性”和“連貫性”，這讓 Google 獲得了品牌識別上的利益。

2012年，Google 開始在實驗室內部推行一個“Google”式的視覺設計指引，幫助 Google 的設計師和合作伙伴們更好的學習和理解 Google的風格語言，Google的創意總監Chris Wiggins率領團隊完成了這樣一份指引，這里摘錄部分精華內容，用來學習和分享。

2012年，Google 開始在實驗室內部推行一個“Google”式的視覺設計指引，幫助 Google 的設計師和合作伙伴們更好的學習和理解 Google的風格語言，Google的創意總監Chris Wiggins率領團隊完成了這樣一份指引，這里摘錄部分精華內容，用來學習和分享。

今時今日，網站的創建正變得越來越復雜，而且一般都不是一個人就能干的了的。在創建網站過程中，我們需要保證設計前后一致，并符合業務目標，同時還要盡全力為用戶打造有趣的使用體驗。

為了確保整個團隊在設計網站各個組成部分或在改善開發人員設計成果時彼此之間能夠充分協調一致，你需要編寫一份設計文檔或web設計風格指南作為指導。

風格指南能夠保證不同的頁面共同擁有一套核心的體驗效果。另外，其還有助于保證未來的開發或第三方創作工作不偏離最初的品牌路線，能夠與整體品牌保持一致。

Luke Clum曾在去年簡略地介紹過如何編寫風格指南并將其作為web設計的第一步驟，那么現在我想更加深入地探討一下如何針對你的項目編寫一份有效的web設計風格指南。

設計界存在一個問題。這不是薪酬水平的不平等，或者崗位的差距，也不是童工問題，但它確實是個問題。

設計師當中有一種自命不凡的流行病。有些人只沾染了一點點，體現為一種諷刺的憤世嫉俗。還有些完全是太把自己當回事了，并且對此毫不自知。

不論哪種，是時候結束這樣的局面了。沒錯，我在呼吁這些設計師別再自命不凡

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

來源：http://www.uehtml.com/post/15085/

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

首先不談設計我想談下剪頭發，我們每個人都要修剪頭發，特別是男人，以前我的頭發是媽媽剪的，那時的她是以節約為目的的，她覺得她剪的很好，我也這么認為，所以我一直覺得我不適合短發，不是她剪的不好，而是我不適合，直到過了二十多年，我在深圳發現大家都是短發很潮，于是決心在試次，結果是令我自己滿意的，那個師傅慢慢修，慢慢剪，理發師自己本身就穿著整齊頭發干凈很精致，干了10年了，很多年輕人理發2側是用推子直接鏟的，但是他是慢慢用剪子和梳子修的，剪好，人整個精致了很多，更有氣質了，突然發現很多事情都是想通的！

作為設計師，聽到最多的無非就是我們要高大上，大氣，有品質，什么是高大上，是有品質的設計，其實很多人對高大上的理解并不是來源于網上的設計，你去看一個世界杯宣傳短片，去看一個演唱會，你會有比較，感覺這個演唱會很有品質，看一部電影知道這是個大作，并不是因為一張海報，一個韓國的MV你會覺得畫面很美，這里面有很多元素，文化上的美，他們有一個共同點，都是很用心，很細心，很專心去完成他們的藝術作品。 

很多人印象中，香港人很精致，我們買衣服的時候也會想挑一些香港品牌，每周深圳有好多人排隊去香港淘衣服及很多好東西，在香港街上我發現他們穿衣服很精致，扣子很多是扣到最上面，頭發梳理的很整齊，皮鞋擦的很亮，很多香港老人也會穿戴整齊，我們會覺得他們活的很精致，香港早年淪為殖民地，英國的文化對他們影響很深，這就是為什么我們記住了英國紳士，他們的談吐等，其實說這么多，就表達品質感來源與對生活美的追求，來源于精益求精的每一個細節的追求與把握！

1  文字的細節

上圖打叉的是我們經常忽略的小細節，用系統默認的字的大小打完專題專題，你會發現其實字體對中文和英文大小是不一樣的，上圖明顯數字“8”相比較“月”和“日”略小，這樣，標題會有種上下起伏的感覺，不穩當，第二個是字的間距，默認打完嘆號離文字過遠，直接斷開了2句話，有必要去調整下字的間距，調整后字號也變得更大空間得到合理運用！

(實際運用案例)

錯誤的示意里我們選用了一款常用的書法字體，當然結果是不理想的，也許項目會反饋你不夠大氣，無論在筆觸上，字形上都不是一個很好的選擇，但是現有的字體無法滿足你的要求，怎么辦，你可以利用一些在線書法生成一些毛筆字，但是要注意的是生成的很多字在筆觸粗細上都不一樣，很容易讓你幾個字放在一起看著很別捏，如果你沒有很好的書法，你需要多下載一些書法筆觸，找出一些字特點并移植到你選中的另外幾個字上，在適當的地方加粗筆觸，這也是一個慢慢磨的過程，但是能提高不少作品的品質感！

(實際運用案例)

上圖本身運用問題也不大，但是因為我們搭配的素材是一個Q版人物，所以為了增加設計的快樂感在里面，依然重新手寫了胖乎乎的字體設計達到我們想你要的感覺！

上圖對文字的排版無疑很有問題，我們正常閱讀順序是白吃今天你了么，這樣的設計實在無法讓人產生好感！品質感就大打折扣

2  圖形

我們經常做按鈕或導航或者排版的時候總會ctrl+t改變圖形的大小，單即使你用的是矩形工具拉的一個矢量圖形，在你反復改變大小的時候會出現虛邊，有時候你不仔細看看不出，但是當你對圖形進行描邊等效果問題就會暴露，整個頁面充滿了這種虛邊的時候，你會感到網頁很模糊，就像胡子沒刮干凈的感覺，不舒服！

3  底紋

編者按：坊間傳聞，有本CSS的高手煉成秘籍在江湖失傳已久，書中所載，多為的驚人技術與實例示范，是為集大成者，一旦學成，代碼效率猛增，功力提升數倍，今日偶獲，不敢怠慢，趕緊發到優設，望人人受益。說人話：好東西呀快來看呀！

在本列表中，。我們從多位藝術家那里搜集了驚人的例子，足以證明使用CSS，一切皆有可能。我們還收集了一些關于CSS 3的不可思議新功能的文章，以及一些有用的CSS庫。接下來的內容會讓你目不轉睛，所以讓我們開始吧！

不可思議的CSS 3新功能：Tutorialzine.com

為了充分感受這些例子你需要的瀏覽器，比如Chrome。

編者按：距離上次分享GUI模板有很長時間了，這段時間里設計趨勢不斷變化，谷歌推出了的Android L以及全新的界面設計，UI設計師又有得忙了，今天收集了一組實用的GUI模板和線框圖，包含的Android4.4，Material Design，Android 可穿戴設備等等，控件全面，拿來即用，建議收藏待用呦。

當你第一次打開一款應用的時候常常會看到精美的引導頁設計，它們在你未使用產品之前提前告知你產品的主要功能與特點，第一次印象的好壞會極大地影響到后續的產品使用體驗。因此各個公司都在努力將這幾個頁面設計好，從一開始就引人入勝。那接下來我跟大家一起來探討關于引導頁的設計。

一、 目的區分

根據引導頁的目的、出發點不同，可以將其分為功能介紹類、使用說明類、推廣類、問題解決類，一般引導頁不會超過5頁。

1.功能介紹類

功能介紹類引導頁主要是對產品的主要功能進行展示，讓用戶對產品主功能有一個大致的了解。采用的形式大多以文字配合界面、插圖的方式來展現。

以易信為例，采用文字與水彩插圖結合的方式，文字分為2個層次，大標題與小標題，大標題是對主功能的概括，小文字是對其功能模塊的詳細描述或進一步補充說明。

什么是細節設計？在討論這個問題前先來看個案例。如果你手里恰巧有 iPhone 4s / 5 / 5s，請隨便打開一個可以調出虛擬鍵盤的應用「比如短信」。注意觀察鍵盤的最后一行，相信看這篇文章的人都是中文用戶，所以在你的 Space 鍵「空格鍵」左邊一定有 Globe 鍵「用于切換輸入法的那個小地球按鍵」和 Dictation 鍵「畫著麥克風的語音輸入鍵」。然后去到 Settings「設置」- General「通用」- Keyboard「鍵盤」- Keyboards「鍵盤」，將除 English「英文」之外的輸入法全部移除后再回到之前的虛擬鍵盤，你就會得到下面的兩幅圖。

編者按：動效現在是扁平化身邊的大紅人，哪里都有它的身影，動效能否為扁平化增光？設計師有什么利器可以繪制動效？昨天發現一篇好文，關于這兩方面都有實在的干貨分享，建議同學們當機立斷，先轉后贊，特別要記得看。

作為一個網頁設計師，我們需要努力讓我們的技術與技巧與時俱進。我們不用追隨每一個時代潮流（比如長投影），但是我們的確需要隨著網絡的發展與成熟，不斷學習并提高我們的技巧。

網頁設計產業最近開始火熱的新發展之一便是動效，越來越多的公司在他們的應用和網站中放入動效以取悅用戶，從競爭對手中脫穎而出以及提升產品的可用性。

動效需求如此之高的另一個原因在于網頁扁平化的潮流。扁平化設計整體來說是挺不錯的，而且使得人們尋求新的方式來改善它為數不多的問題。