作為一名設計師，每年都會沉浸在一些新的設計趨勢中興奮不已。接下來，我們將探尋2013年的設計趨勢，這絕對是意義非凡的事情。Web設計師必須洞悉所有相關領域的新趨勢，緊跟時尚潮流。

這些新趨勢讓設計變得妙趣橫生。但是很多專家還會倡導那些并非最時髦、最震撼世界的設計。當然，響應式設計不僅去年是熱點，今年依然還會被人們重視。同樣，柵格化設計作為最基本的設計，也會被繼續延續下去。

這次，我想探索一下那些逐漸發展起來的設計潮流。也許過去我們只是偶爾嘗試一下這些設計風格，但是今年我們會真正關注它們。

優設哥很遺憾的告訴大家：“文章的這些優秀案例，大部分要翻墻。。。”

更多留白/負空間

手機已經成了我們生活中不可分割的一部分，手機應用也在扮演著越來越重要的角色。它們或者幫我們打發無聊時間，或者幫助我們緊密聯系遠方的朋友，抑或對學習知識、獲取資訊有所裨益。

手機應用有不少有趣的交互方式值得深思和學習。讓我們來看看它們中有哪些好玩的交互，我們又是如何通過它們來進行操作的。

搖一搖：搖擺的節奏

自從微信引入了搖一搖的交互方式后，立即四處風靡，各種應用紛紛推出各種基于搖一搖的功能：搖一搖更換皮膚、搖一搖推薦餐館、搖一搖換歌等。有些應用結合的比較自然，還有一些則有些牽強附會。當然，在此之前 iPhone 就已經加入了打字時晃動撤銷的交互，雖然很新潮，但隱藏較深，不少用戶不了解也沒有形成習慣。

吹一吹：吹出的精彩

iOS 上有一款仿陶笛的應用 Ocarina。只要對著界面上方正中央箭頭（話筒）的位置吹，就可以看到往外圍泛出聲波的效果，界面中央四個藍點分別代表笛孔，在吹的時候按住不同的笛孔會發出不同的音調，而且界面會提示每次按壓住哪幾個孔，這樣即使像我這種完全沒有音樂細胞的人也可以吹奏出美妙的音樂。最關鍵的是，你還能聽到來自全世界其他地方分享的聲音。

如果你要在網絡上開展自己的事業，那么擁有優秀的網頁是成功的關鍵因素。其優點在于，不僅能提高網絡營銷的可見度，也能維護起持續增長的客戶群。但是呢，羅馬非一天建成，在我們要創建一個優秀網站之前，前期的構思是必不可少的。

創建一個成功的網站究竟該做些什么

近年來，網站搖身一變成為了更好的交流場所和絕佳的信息來源地。Boss們不僅想讓網站品牌化，同時也希望游客能在瀏覽時找到有價值的信息。SO，如果一個網站不能提供精準且廣泛的信息給目標顧客，顧客們就會轉而去其他的網站。
網站的另一個目的在于讓生活更便利，讓工作更快捷。它通過放大雙向溝通的方式，讓游客對此留下深刻印象，從而產生依賴心理，并愿意長久的通過網站的查詢方式來聯系業務和訂票等。這樣一來，方便顧客這一目標就達到了。除此之外，網站還可以有效的節省你的時間，幫助你迅速增加用戶基礎以及讓一些進程自動化。
前面提到的網站優點都只是抱磚引玉，網站真正的目的在于——最終能給顧客帶去價值。這些價值除了鼓勵顧客通過網站相互交流，并參與到商務處理流程中，還應該提供更好評定信息、規避長久的等待陣列、授與顧客權利去挖掘更廣泛的產品和服務信息等。
本文主要是向你闡述，創建一個成功的網站究竟該做些什么。

Step.1 寫一份網站說明書

寫一份切實可行的網站說明書是創建一個專業網站所不可缺少的，它是最關鍵的文件之一，能助企業挖掘出優先考慮事項、明晰企業責任和樹立企業品牌形象。必要的計劃和精準的信息對一份網站說明書來講是最重要的。但是當下，成功的尋找到有力的營銷方法和持久最佳努力的前提是 —— 你有策劃一個縝密計劃的能力嗎？
一份優秀的網站說明書要涵蓋： 企業的預算、因不能及時交付產品而延誤的時間、可交付產品、知識產權、網站的目的、網站的體系結構、域名、網站使用的編程語言。除此之外，以下幾點是絕對不可缺少的：

1.創建這份文件的意圖
2.項目介紹

@米田的天空最近比較忙，整理作品的速度明顯放緩了許多。今天總結些前段時間做的微信第三方網站。要清楚，它是網站不是單獨的一個網頁。需要考慮更多是整體性的問題。

在拿到項目時，首先需要冷靜下來。而不是急著去動手，大部分同學肯定都理解了解其緣由。這邊要說的更多是前期先看看相似對手的情況。因為視覺設計相對于產品功能，是最容易拉開差異感的部分。或許一套不同的視覺策略就能讓產品迅速脫離大部分同類作品走出來。

大部分的普遍

大部分的微信第三方，和似乎都不太注重展示部分。即視覺部分，隱隱有些暴發戶的感覺。而且現在做這塊的公司似乎已經有當年做團購的景象。多，十分多，最后迷失在一片片營銷的海洋里。

做為設計師，先跳出來觀察下。其實我們會驚訝的發現，這些站的普遍性都是為你做個微信mini站，就是所謂的新時代營銷。最核心的功能基本也是一致，如下：

• 智能導航（調用地理位置地圖接口）
• 在線支付
• 全景看圖（自由圖片組合）
• 抽獎營銷活動

隨便打開搜索”微信 營銷 專家”，一堆類似微信第三方網站。現在很多的創業者也在做類似的項目，總之，就是很多很多公司做著類似的嘗試。當然，國內任何的領域基本都是同時存在上百個同類的項目，能真正運營下去到最后也只有3-4家而已。

自己隨便打開其中一個站點，發現其推廣的核心點，也是如上述說的一樣，功能部分的幾乎所有的微信第三方都做著差不多的事情。如果你隨便打開這個網頁，你覺得你會主動去聯系他們么？在很多相似產品存在的情況下。

隨著便攜設備用戶的指數級增長，網頁設計師采用響應式設計作為多平臺布局解決方案，不但節省了設計師的時間，而且從長遠角度來講，響應式設計能夠為用戶提供更舒適的操作環境。
如果你毫無經驗，不知從何開始，那么這份工具列表將大大的幫助你，能夠讓你的布局更有“彈性”。

Simple Grid

Simple Grid是難以置信的CSS框架，無所限制的柵格布局，支持不同大小的屏幕。

Susy

Susy “語義變焦”的柵格系統，無需額外標記和特殊的類，很方便使用Sass的人。

Tiny Fluid Grid

Tiny Fluid Grid 很棒的網頁應用，能幫你選擇柵格系統。一旦完成后，提供CSS文件下載。

Variable Grid System

Variable Grid System依據960柵格系統，能夠自動產生布局，在調整后，提供CSS文件下載。

Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheet 標記很方便，可以方便的選擇不同方案中元素的放置位置。

Style Tiles

可以通過該網站制定完美的響應式設計流程。

響應式設計是當前網頁設計的趨勢，針對不同的設備，提供布局解決方案。
而且很多技術狂人正在不斷的進行各種實驗，爭取讓響應式設計越來越好。

響應式設計的難點是導航菜單。可不能像縮放頁面那樣縮放導航菜單。在設計之前，要謀劃好導航菜單在手機、平板、桌面上的布局。

更多超炫的網站：
《想讓網站動感十足？試試網頁設計中的韻律線條》
《想設計自己的網站？先來看這15個優秀設計師的酷站》

本文收集了25例出眾的響應式設計，大家可以使用響應式在線測試工具Responsinator來看看，他們的導航菜單，是怎樣設計的。

Ableton 

導航菜單可能是網頁設計中最重要的部分了。每個用戶瀏覽網站時一定有所需，因此導航菜單能夠幫助用戶尋找信息。好的導航菜單像是導游，告訴用戶網站是干什么的，內容分類有哪些，在哪里可以找到什么信息。

而且導航欄也是整體布局的重要組成。

總結一下，導航欄的重要性。

1. 瀏覽完Logo后，導航欄是用戶第一個看到的組件。
2. 導航欄的作用是引導用戶。
3. 導航欄的作用也類似于索引，快速幫助用戶找到所需信息。

想讓導航欄更加優雅、美麗、響應式么？看看導航欄設計的三大要點吧！

1) 別再讓導航胖下去了，給導航減個肥

導航菜單重要性不言而喻。一些設計師往往使用一些繁雜的裝飾來做突出。其實大可不必，通過字體、懸停效果、留白可以設計出簡約、優雅的極簡主義風格導航欄，看看下面的案例。

Design Instruct

Sugar Rush

評論(0) 瀏覽(4331)

從Google、可口可樂到聯邦快遞、肯德基，讓我們一起來看這些最經典的LOGO設計如何返璞歸真，相信我，你會返回來重新看一遍的！

迪士尼

BURGER KING

可口可樂

對于大部分網站，導航并不算是個挑戰。一條主導航加條二級導航支撐，通常就足夠了。典型的做法是，二級導航顯示出父、兄及當前子菜單。常顯的主導航條顯示最頂層的菜單，允許用戶在菜單間切換。

然而，有一類網站讓這種傳統的導航樣式承擔有些吃力。這就是我要提的大型網站。

定義大型網站

一個大型網站由結合了綜合服務和產品的典型大型組織所有。這個組織通常也服務各色用戶。擁有大型網站的組織，包括BBC這類機構型的，類似微軟這種項目多樣化的公司型的，政府部門，高等教育類的以及運作多種活動的慈善組織類的，比如世界自然基金會。

這些網站：龐大，層級多而深，由多個小網站和頻道組成，迎合受眾眾多，許多入口，這種規模級的復雜網站導航頗具挑戰。

大型網站上的導航挑戰

在我們公司，我們花費了大量工作在這類大型網站上，尤其當我們想使用傳統的導航時特費勁兒。

傳統的導航無法負擔深層級

傳統的導航隨著網站層級越深變得越難用。傳統導航很容易應付三層；超過的話，問題就會暴露。即便拓展到頁面眾多的房產類網站導航，他們會更致力于導航多過內容（大型網站里頁面太多讓問題變得更糟），或更頂層的頁面不再出現在導航中。在后者中，如果用戶處于網站的深層級頁面，他們將搞不清上上下級關系，因為無法看見當前頁面在整個網站中的所處位置。

雖然傳統的導航處理結合了面包屑，能夠拓展適應綜合型網站，但當在房產網站上如此做時，成本卻不斷升高。

傳統導航無法承載多入口

如果用戶經由小網站或網站某菜單頁的進入，傳統方式的導航將讓用戶感到困惑。以一個在考慮參加大學研究課題的學生舉例。這個人可能對院系詳情更感興趣相比整個學校。因而很容易進入網站的院系層頁面，而不是學校的主頁。
另一個例子就是單身媽媽想了解寶寶福利。她們更像是要直達福利的次級頻道而不是政府主頁。在這種情況下，用戶的關注是在當前內容。（如：課題頁或兒童福利頁）。他們不是立即對這整一個網站感興趣。
不幸的是，不論用戶是否愿意，傳統的一級、二級導航都試圖讓用戶去了解整個網站環境。

在這個大學頁面上，這個“研究菜單是指整個大學的研究呢還是僅是這個學院的研究。當兩個同樣的菜單出現，并指向不同的地方會怎么樣？

隨著CSS的廣泛應用，透明元素在網頁設計中大量采用。

通過添加透明效果，可以增添頁面的對照感和可讀性，同時對整體的效果妨礙又不大，可謂一舉兩得。

一般來說，采用透明效果顯示區塊、展現數據，透明效果出現在很多輔佐元素當中，這樣前景元素就顯得非常突出。
讓我們來看看透明效果，這種優雅而又華麗的效果。

Wavefront

整體構成比較不拘一格，音樂節一般的氛圍。霓虹色彩，半透明區塊，讓色彩更加動感，很好的支持了主題。

Advies

頁面中含有很多透明條紋，中間的大區塊既不影響背景圖像的效果，也能很好的展現信息。