當(dāng)你瀏覽一款網(wǎng)站時(shí)，一般會(huì)迅速的對(duì)網(wǎng)站的外觀和使用感受做個(gè)評(píng)判，整體的設(shè)計(jì)風(fēng)格是第一印象，能否引導(dǎo)用戶繼續(xù)閱讀取決于此。

金玉其外敗絮其中必然無(wú)法長(zhǎng)久，功能性也是重要考量。推薦您也好好學(xué)習(xí)《網(wǎng)站用戶體驗(yàn)的76個(gè)要點(diǎn)》。
好的用戶體驗(yàn)不僅僅關(guān)乎到功能性和設(shè)計(jì)美學(xué)，還需要考慮很多因素，我們一起來(lái)看一下吧。

一致性

最重要的交互元素一定要友好，并且風(fēng)格一致。

盡管在設(shè)計(jì)一款網(wǎng)站時(shí)，我們可以融入很多創(chuàng)新點(diǎn)和美學(xué)風(fēng)格，但是一些經(jīng)常使用、且重要的元素，風(fēng)格一定要一致，比如按鈕、鏈接、導(dǎo)航欄、表單等等。我建議可以多瀏覽一些電商網(wǎng)站，他們?cè)谶@一點(diǎn)上做的就很棒，他們通常有很多的茶品頁(yè)面，但是整體體驗(yàn)卻相差不大，我們可以看看優(yōu)衣庫(kù)的網(wǎng)站。

• 像產(chǎn)品類別、當(dāng)前按鈕和重要的文本信息都通過(guò)紅色來(lái)高亮顯示
• 頁(yè)面不同，布局基本相同。

@Iamkikidong 如果在網(wǎng)頁(yè)上合理地使用大片的綠色，不僅能營(yíng)造出清爽，自然的界面，還能讓訪問(wèn)者感到輕松自在，增加網(wǎng)站的親切感。事實(shí)上綠色有很多的色調(diào)，這形成了一個(gè)非常靈活的色彩，它可以在色盤(pán)的黃綠色端顯得很“溫暖”，又可以在藍(lán)綠和碧綠方向顯得有些“冷”。一個(gè)檸檬綠可以讓一個(gè)設(shè)計(jì)很“潮”，橄欖綠則更顯平和，而淡綠色可以給人一種清爽的春天的感覺(jué)。

用藍(lán)色搭配綠色可以傳遞一種水的感覺(jué)。添加米色或者褐色則可以展現(xiàn)一種泥土的氣息。白色+綠色是新鮮和戶外的，而紫色和綠色是高對(duì)比的一對(duì)兒(需要小心對(duì)待)。

今天為您分享20個(gè)綠色系的網(wǎng)站，希望能為你的工作帶來(lái)靈感和啟發(fā)！

1. Garnier Body

假如你正好想為自己創(chuàng)建一個(gè)網(wǎng)站，那WordPress肯定是你的不二之選。插件眾多，安全性較高，主題模板豐富，便于維護(hù)跟管理都是它的優(yōu)點(diǎn)，今天向你推薦30款新穎的WordPress主題模板，每一款都各有千秋，設(shè)計(jì)師們趕緊來(lái)瞧瞧，總能淘到最心儀的那個(gè)。

對(duì)了，如果您還不知道什么是wordpress，可以去wordpress的中文網(wǎng)查看。http://cn.wordpress.org/

提醒：這里的模版絕大多數(shù)都是要收費(fèi)的，建議您預(yù)覽查看，學(xué)習(xí)借鑒別人的優(yōu)點(diǎn)就好。關(guān)于WP建站，這和免費(fèi)的PSD不一樣，大家不要總想著下載免費(fèi)的，免費(fèi)主題在功能上總會(huì)缺失一部分，而且極少有漂亮的主題，大部分都過(guò)時(shí)咯。

相關(guān)推薦：
《不用編碼！全球10大高端建站神器推薦》
《干貨！23套全新的免費(fèi)HTML5網(wǎng)頁(yè)模版》

Simplicity

<p style="white-space:normal;text-transform:none;word-spacing:0px;color:#525252;font:1.2em/1.8 Tahoma, Verdana, 宋體;margin:20px 0px;orphans:2;widows:2;letter-spacing:normal;background-color:#ffffff;text-indent:0px;-webkit-text-size-ad

作為一名設(shè)計(jì)師，每年都會(huì)沉浸在一些新的設(shè)計(jì)趨勢(shì)中興奮不已。接下來(lái)，我們將探尋2013年的設(shè)計(jì)趨勢(shì)，這絕對(duì)是意義非凡的事情。Web設(shè)計(jì)師必須洞悉所有相關(guān)領(lǐng)域的新趨勢(shì)，緊跟時(shí)尚潮流。

這些新趨勢(shì)讓設(shè)計(jì)變得妙趣橫生。但是很多專家還會(huì)倡導(dǎo)那些并非最時(shí)髦、最震撼世界的設(shè)計(jì)。當(dāng)然，響應(yīng)式設(shè)計(jì)不僅去年是熱點(diǎn)，今年依然還會(huì)被人們重視。同樣，柵格化設(shè)計(jì)作為最基本的設(shè)計(jì)，也會(huì)被繼續(xù)延續(xù)下去。

這次，我想探索一下那些逐漸發(fā)展起來(lái)的設(shè)計(jì)潮流。也許過(guò)去我們只是偶爾嘗試一下這些設(shè)計(jì)風(fēng)格，但是今年我們會(huì)真正關(guān)注它們。

優(yōu)設(shè)哥很遺憾的告訴大家：“文章的這些優(yōu)秀案例，大部分要翻墻。。?！?/p>

更多留白/負(fù)空間

手機(jī)已經(jīng)成了我們生活中不可分割的一部分，手機(jī)應(yīng)用也在扮演著越來(lái)越重要的角色。它們或者幫我們打發(fā)無(wú)聊時(shí)間，或者幫助我們緊密聯(lián)系遠(yuǎn)方的朋友，抑或?qū)W(xué)習(xí)知識(shí)、獲取資訊有所裨益。

手機(jī)應(yīng)用有不少有趣的交互方式值得深思和學(xué)習(xí)。讓我們來(lái)看看它們中有哪些好玩的交互，我們又是如何通過(guò)它們來(lái)進(jìn)行操作的。

搖一搖：搖擺的節(jié)奏

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

吹一吹：吹出的精彩

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

如果你要在網(wǎng)絡(luò)上開(kāi)展自己的事業(yè)，那么擁有優(yōu)秀的網(wǎng)頁(yè)是成功的關(guān)鍵因素。其優(yōu)點(diǎn)在于，不僅能提高網(wǎng)絡(luò)營(yíng)銷的可見(jiàn)度，也能維護(hù)起持續(xù)增長(zhǎng)的客戶群。但是呢，羅馬非一天建成，在我們要?jiǎng)?chuàng)建一個(gè)優(yōu)秀網(wǎng)站之前，前期的構(gòu)思是必不可少的。

創(chuàng)建一個(gè)成功的網(wǎng)站究竟該做些什么

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

Step.1 寫(xiě)一份網(wǎng)站說(shuō)明書(shū)

寫(xiě)一份切實(shí)可行的網(wǎng)站說(shuō)明書(shū)是創(chuàng)建一個(gè)專業(yè)網(wǎng)站所不可缺少的，它是最關(guān)鍵的文件之一，能助企業(yè)挖掘出優(yōu)先考慮事項(xiàng)、明晰企業(yè)責(zé)任和樹(shù)立企業(yè)品牌形象。必要的計(jì)劃和精準(zhǔn)的信息對(duì)一份網(wǎng)站說(shuō)明書(shū)來(lái)講是最重要的。但是當(dāng)下，成功的尋找到有力的營(yíng)銷方法和持久最佳努力的前提是 —— 你有策劃一個(gè)縝密計(jì)劃的能力嗎？
一份優(yōu)秀的網(wǎng)站說(shuō)明書(shū)要涵蓋： 企業(yè)的預(yù)算、因不能及時(shí)交付產(chǎn)品而延誤的時(shí)間、可交付產(chǎn)品、知識(shí)產(chǎn)權(quán)、網(wǎng)站的目的、網(wǎng)站的體系結(jié)構(gòu)、域名、網(wǎng)站使用的編程語(yǔ)言。除此之外，以下幾點(diǎn)是絕對(duì)不可缺少的：

1.創(chuàng)建這份文件的意圖
2.項(xiàng)目介紹

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

在拿到項(xiàng)目時(shí)，首先需要冷靜下來(lái)。而不是急著去動(dòng)手，大部分同學(xué)肯定都理解了解其緣由。這邊要說(shuō)的更多是前期先看看相似對(duì)手的情況。因?yàn)?a href="/" target="_blank">視覺(jué)設(shè)計(jì)相對(duì)于產(chǎn)品功能，是最容易拉開(kāi)差異感的部分?；蛟S一套不同的視覺(jué)策略就能讓產(chǎn)品迅速脫離大部分同類作品走出來(lái)。

大部分的普遍

大部分的微信第三方，和似乎都不太注重展示部分。即視覺(jué)部分，隱隱有些暴發(fā)戶的感覺(jué)。而且現(xiàn)在做這塊的公司似乎已經(jīng)有當(dāng)年做團(tuán)購(gòu)的景象。多，十分多，最后迷失在一片片營(yíng)銷的海洋里。

做為設(shè)計(jì)師，先跳出來(lái)觀察下。其實(shí)我們會(huì)驚訝的發(fā)現(xiàn)，這些站的普遍性都是為你做個(gè)微信mini站，就是所謂的新時(shí)代營(yíng)銷。最核心的功能基本也是一致，如下：

• 智能導(dǎo)航（調(diào)用地理位置地圖接口）
• 在線支付
• 全景看圖（自由圖片組合）
• 抽獎(jiǎng)營(yíng)銷活動(dòng)

隨便打開(kāi)搜索”微信 營(yíng)銷 專家”，一堆類似微信第三方網(wǎng)站。現(xiàn)在很多的創(chuàng)業(yè)者也在做類似的項(xiàng)目，總之，就是很多很多公司做著類似的嘗試。當(dāng)然，國(guó)內(nèi)任何的領(lǐng)域基本都是同時(shí)存在上百個(gè)同類的項(xiàng)目，能真正運(yùn)營(yíng)下去到最后也只有3-4家而已。

自己隨便打開(kāi)其中一個(gè)站點(diǎn)，發(fā)現(xiàn)其推廣的核心點(diǎn)，也是如上述說(shuō)的一樣，功能部分的幾乎所有的微信第三方都做著差不多的事情。如果你隨便打開(kāi)這個(gè)網(wǎng)頁(yè)，你覺(jué)得你會(huì)主動(dòng)去聯(lián)系他們么？在很多相似產(chǎn)品存在的情況下。

微信營(yíng)銷在今年是非常火爆，各種利用微信營(yíng)銷獲得贏利，互聯(lián)網(wǎng)上經(jīng)?？梢钥吹脚Ｈ朔窒淼奈⑿艩I(yíng)銷案例。微信營(yíng)銷這么火爆，那么微信營(yíng)銷有哪些實(shí)用的推廣方法呢？

1、合作互推
微博上的玩法，據(jù)說(shuō)這種效果不錯(cuò)，也是最好最快的方法。微信互推的效果遠(yuǎn)比微博互推的效果好。例如有1000個(gè)粉絲的賬號(hào)找其他人合作互推，每次可以獲得上百個(gè)粉絲，微信合作做好，是非常不錯(cuò)的。合作互推最佳的策略是一個(gè)合作伙伴合作1-3次，次數(shù)多了，結(jié)果你懂得。

2、微博大號(hào)推廣
在騰訊、新浪微博上有很多的草根微博大號(hào)靠這種方式非常快的獲得了很多的粉絲，同樣自己也可以利用現(xiàn)有的資源與別人互換，或者花錢給微博大號(hào)進(jìn)行推廣。

3、其他社交平臺(tái)推廣
在人人、豆瓣、貼吧、空間等社交平臺(tái)進(jìn)行推廣，做推廣時(shí)需要注冊(cè)各個(gè)平臺(tái)的發(fā)布信息的規(guī)則，否則推廣信息就會(huì)被刪除。如百度帖吧，可以將二維碼做成簽名圖片，這樣在各帖吧活動(dòng)時(shí)，每次評(píng)論都可以做一次推廣，還不容易被刪除。

4、小號(hào)帶大號(hào)
執(zhí)行力很強(qiáng)的朋友可以使用這招，搞幾十上百的小號(hào)，瘋狂的利用接下來(lái)分享的方法加微信好友，使用什么策略根據(jù)你自己的想法，是利用美圖，還是什么，你自己想吧！

5、基于LBS推廣
這個(gè)方法比較簡(jiǎn)單，就是在個(gè)性簽名處設(shè)置一個(gè)誘導(dǎo)的個(gè)性簽名。在附近1公里以內(nèi)有人使用查找附近的人，就有機(jī)會(huì)被別人看到，個(gè)性簽名有吸引力就可以有機(jī)會(huì)獲得關(guān)注。有人試過(guò)此方法，1個(gè)小時(shí)內(nèi)吸引120人關(guān)注其微信，而做的事情就是設(shè)置個(gè)性簽名。這個(gè)方法受附近的人限制，不能長(zhǎng)期使用此方法。

隨著便攜設(shè)備用戶的指數(shù)級(jí)增長(zhǎng)，網(wǎng)頁(yè)設(shè)計(jì)師采用響應(yīng)式設(shè)計(jì)作為多平臺(tái)布局解決方案，不但節(jié)省了設(shè)計(jì)師的時(shí)間，而且從長(zhǎng)遠(yuǎn)角度來(lái)講，響應(yīng)式設(shè)計(jì)能夠?yàn)橛脩籼峁└孢m的操作環(huán)境。
如果你毫無(wú)經(jīng)驗(yàn)，不知從何開(kāi)始，那么這份工具列表將大大的幫助你，能夠讓你的布局更有“彈性”。

Simple Grid

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

Susy

Susy “語(yǔ)義變焦”的柵格系統(tǒng)，無(wú)需額外標(biāo)記和特殊的類，很方便使用Sass的人。

Tiny Fluid Grid

Tiny Fluid Grid 很棒的網(wǎng)頁(yè)應(yīng)用，能幫你選擇柵格系統(tǒng)。一旦完成后，提供CSS文件下載。

Variable Grid System

Variable Grid System依據(jù)960柵格系統(tǒng)，能夠自動(dòng)產(chǎn)生布局，在調(diào)整后，提供CSS文件下載。

Responsive Web Design Sketch Sheets

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

Style Tiles

可以通過(guò)該網(wǎng)站制定完美的響應(yīng)式設(shè)計(jì)流程。

響應(yīng)式設(shè)計(jì)是當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)，針對(duì)不同的設(shè)備，提供布局解決方案。
而且很多技術(shù)狂人正在不斷的進(jìn)行各種實(shí)驗(yàn)，爭(zhēng)取讓響應(yīng)式設(shè)計(jì)越來(lái)越好。

響應(yīng)式設(shè)計(jì)的難點(diǎn)是導(dǎo)航菜單。可不能像縮放頁(yè)面那樣縮放導(dǎo)航菜單。在設(shè)計(jì)之前，要謀劃好導(dǎo)航菜單在手機(jī)、平板、桌面上的布局。

更多超炫的網(wǎng)站：
《想讓網(wǎng)站動(dòng)感十足？試試網(wǎng)頁(yè)設(shè)計(jì)中的韻律線條》
《想設(shè)計(jì)自己的網(wǎng)站？先來(lái)看這15個(gè)優(yōu)秀設(shè)計(jì)師的酷站》

本文收集了25例出眾的響應(yīng)式設(shè)計(jì)，大家可以使用響應(yīng)式在線測(cè)試工具Responsinator來(lái)看看，他們的導(dǎo)航菜單，是怎樣設(shè)計(jì)的。

Ableton