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

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

大部分的普遍

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

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

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

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

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

微信營銷在今年是非常火爆，各種利用微信營銷獲得贏利，互聯(lián)網(wǎng)上經(jīng)常可以看到牛人分享的微信營銷案例。微信營銷這么火爆，那么微信營銷有哪些實用的推廣方法呢？

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

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

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

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

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

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

Simple Grid

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

Susy

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

Tiny Fluid Grid

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

Variable Grid System

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

Responsive Web Design Sketch Sheets

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

Style Tiles

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

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

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

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

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

Ableton 

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

而且導(dǎo)航欄也是整體布局的重要組成。

總結(jié)一下，導(dǎo)航欄的重要性。

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

想讓導(dǎo)航欄更加優(yōu)雅、美麗、響應(yīng)式么？看看導(dǎo)航欄設(shè)計的三大要點吧！

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

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

Design Instruct

Sugar Rush

評論(0) 瀏覽(4248)

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

迪士尼

BURGER KING

可口可樂

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

然而，有一類網(wǎng)站讓這種傳統(tǒng)的導(dǎo)航樣式承擔有些吃力。這就是我要提的大型網(wǎng)站。

定義大型網(wǎng)站

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

這些網(wǎng)站：龐大，層級多而深，由多個小網(wǎng)站和頻道組成，迎合受眾眾多，許多入口，這種規(guī)模級的復(fù)雜網(wǎng)站導(dǎo)航頗具挑戰(zhàn)。

大型網(wǎng)站上的導(dǎo)航挑戰(zhàn)

在我們公司，我們花費了大量工作在這類大型網(wǎng)站上，尤其當我們想使用傳統(tǒng)的導(dǎo)航時特費勁兒。

傳統(tǒng)的導(dǎo)航無法負擔深層級

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

雖然傳統(tǒng)的導(dǎo)航處理結(jié)合了面包屑，能夠拓展適應(yīng)綜合型網(wǎng)站，但當在房產(chǎn)網(wǎng)站上如此做時，成本卻不斷升高。

傳統(tǒng)導(dǎo)航無法承載多入口

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

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

今天在網(wǎng)上看到一篇O2O的案例，類似主人公這樣的案例曾在網(wǎng)上出現(xiàn)過多次，如“煎餅大媽的QQ群”。今天看到的這篇文章也是講吃，創(chuàng)意來源于主人公的朋友從從臺灣帶回幾個堅果饅頭，又可以說“饅頭引起的一個020案例”。通過主人公研究、嘗試國內(nèi)常見的堅果，制作出來健康營養(yǎng)、有嚼頭的堅果饅頭。

產(chǎn)品做出來以后，主人公是利用一個社區(qū)QQ群，每天只限100個，一個6元。通過QQ群營銷，讓主人公擁有一大群忠實的回頭客。通過本案例，再結(jié)合“煎餅大媽的QQ群”案例，讓我們發(fā)現(xiàn)其實O2O的成功就在我們的身邊。

我們也可以想想為什么最容易、最有效的O2O案例不是精通網(wǎng)絡(luò)營銷的人員，不是某個大枷，而是我們普通的媽媽級人物呢？筆者認為，她們才是真正的營銷高手，正確的利用了網(wǎng)絡(luò)營銷方法—QQ群營銷。

筆者最近也發(fā)現(xiàn)利用微信、QQ空間做香港代購、產(chǎn)品代銷的朋友越來越多。他們通過微信、QQ空間發(fā)布產(chǎn)品信息，有意向的客戶通過加微信、加QQ私下交流，了解產(chǎn)品，并完成下單。這也是充分利用了移動設(shè)備工具來推銷產(chǎn)品，實現(xiàn)我們常說的020（線上線下）。

其實在我們身邊有很多可以項目可以做O2O營銷，但現(xiàn)在看到的主要是吃、喝、玩、樂幾個方面。因為這幾個方面的O2O能夠更好的實施，也更容易獲得成功。不是做了就可以成功，而是需要正確的運用微信、QQ這樣的社交媒體。

最后，筆者建議想做O2O營銷的朋友，盡可能的去發(fā)現(xiàn)身邊的事情，就從吃、喝、玩、樂開始。只要你敢想，敢去做就會發(fā)現(xiàn)商機。行動吧！朋友！

本文總結(jié)了最近網(wǎng)頁設(shè)計領(lǐng)域比較熱門的幾種技術(shù)，代表了一定的趨勢，設(shè)計師們要跟市場接軌，緊跟潮流的腳步，可以閱讀這篇總結(jié)，肯定大有裨益。

騰訊cdc：技術(shù)的革新帶動了設(shè)計行業(yè)的的迅猛發(fā)展，這使得設(shè)計師和開發(fā)者有了更廣闊的的探索天地。而網(wǎng)頁設(shè)計也越發(fā)不再那么循規(guī)蹈矩，許多團隊和公司都做了很多思考和創(chuàng)意。所以在我們適應(yīng)著現(xiàn)代設(shè)計潮流的同時，不妨也來看看現(xiàn)階段網(wǎng)頁設(shè)計大致的趨勢和風(fēng)格吧。

我不敢大言不慚的說這就是網(wǎng)頁設(shè)計的必然趨勢，這只是本人對當下網(wǎng)頁設(shè)計做出的一些小總結(jié)。希望這樣的歸類總結(jié)能給你帶來更多的思路和想法。

01. 響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）

現(xiàn)在越來越多用戶都擁有多種終端：臺式機，筆記本，平板電腦，手機，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在的潮流，甚至是未來很長一段時間的設(shè)計趨勢。那么響應(yīng)式網(wǎng)頁設(shè)計就是來解決這個問題的。這種特別的開發(fā)方式能保證網(wǎng)頁適應(yīng)不同的分辨率，讓網(wǎng)頁要素重組，使其無論在垂直的平板電腦還是智能手機上，都能達到最好的視覺效果。

除了多終端的多樣化，我們還可以看到我們的電腦屏幕，手機屏幕都在不斷變大，而在對未來生活的預(yù)測、概念設(shè)計里，”屏幕”%

Queen譯者注：隨著平板電腦市場的迅猛增長，你可曾考慮到網(wǎng)站在平板上的用戶體驗？本文給出了6個提升網(wǎng)站平板體驗的簡易技巧，讓你花小氣力，出大成果，可謂事半功倍。要不你試試看。
原文鏈接：the-pursuit-of-tappiness

在這篇文章發(fā)布時，僅在美國就有近7000萬的平板電腦用戶，這比前一年的數(shù)據(jù)增加了一倍。這意味著，美國近30％的互聯(lián)網(wǎng)用戶使用平板設(shè)備上網(wǎng)瀏覽。2011年到2012年間，電子商務(wù)網(wǎng)站在平板電腦上的交易量增長了348％，第一次超越智能手機的交易量。由于平板市場很年輕，其未來的發(fā)展空間必定很大。
這一趨勢傳遞了一個強烈的信號：如果你的網(wǎng)站還沒有針對平板電腦進行設(shè)計的話，現(xiàn)在是時候優(yōu)先考慮其在平板電腦上的可用性了。否則，忽略這一點可能會對網(wǎng)站的整體轉(zhuǎn)化率，回訪量，銷售量等帶來負面影響。

什么是”點擊愉悅感”（tappiness）？

當一個網(wǎng)站具有”點擊愉悅感”時，用戶在手機或平板設(shè)備進行訪問的操作將變得容易而愉快。點擊愉悅感包括巧妙使用的空間，易于閱讀的文本，符合邏輯的交互線索，和大尺寸的點擊目標，這些讓訪問者瀏覽網(wǎng)站時充滿信心。

本設(shè)計中，大字體和大點擊目標的體驗很好，即使在平板電腦上縮小后，體驗依然不錯。
而在另一些設(shè)計中，文字太小無法閱讀，鏈接太接近容易誤操作，無形中增加了操作時間、復(fù)雜度以及體驗上的挫敗感。糟糕的體驗下，用戶將快速流失。

本設(shè)計中的小字體和小觸摸目標被證明在平板電腦上難以閱讀和使用。
一種理想選擇可能是：重新設(shè)計你的網(wǎng)站，讓它能針對各種不同設(shè)備進行自適應(yīng)布局，但時間和成本可能會使你無法完成這樣的全面翻新。然而你還有其他選擇。本文給出一些技巧和方法，能快速幫助你提升網(wǎng)站的平板用戶體驗，只需幾個簡單的變化，你今天就可以做到！