隨著便攜設(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)記和特殊的類(lèi)，很方便使用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 

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

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

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

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

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

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

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

Design Instruct

Sugar Rush

評(píng)論(0) 瀏覽(4248)

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

迪士尼

BURGER KING

可口可樂(lè)

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

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

定義大型網(wǎng)站

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

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

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

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

傳統(tǒng)的導(dǎo)航無(wú)法負(fù)擔(dān)深層級(jí)

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

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

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

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

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

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

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

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

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

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

最后，筆者建議想做O2O營(yíng)銷(xiāo)的朋友，盡可能的去發(fā)現(xiàn)身邊的事情，就從吃、喝、玩、樂(lè)開(kāi)始。只要你敢想，敢去做就會(huì)發(fā)現(xiàn)商機(jī)。行動(dòng)吧！朋友！

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

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

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

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

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

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

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

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

什么是”點(diǎn)擊愉悅感”（tappiness）？

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

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

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

推薦一 ：（5星）

Smashing Magazine

網(wǎng)站的精選文章比較綜合，包括Design, Coding, Mobile, Word Press等，整體質(zhì)量很高，非常適合用戶體驗(yàn)從業(yè)人員持續(xù)關(guān)注。

推薦理由：

1. 對(duì)于設(shè)計(jì)師而言，DESIGN, MOBILE, UX DESIGN這三個(gè)tag的內(nèi)容都很棒；
2. 文章總體質(zhì)量非常高，篇幅雖長(zhǎng)，但很成體系；
3. 訂閱者超過(guò)1,100,000，用戶活躍度高，每篇文章的回復(fù)都很專(zhuān)業(yè)；
4. 超過(guò)1,700篇原創(chuàng)文章，890位作者，他們均有多年從業(yè)經(jīng)驗(yàn)；
5. eBooks中很多優(yōu)秀書(shū)籍免費(fèi)。

隨著CSS的廣泛應(yīng)用，透明元素在網(wǎng)頁(yè)設(shè)計(jì)中大量采用。

通過(guò)添加透明效果，可以增添頁(yè)面的對(duì)照感和可讀性，同時(shí)對(duì)整體的效果妨礙又不大，可謂一舉兩得。

一般來(lái)說(shuō)，采用透明效果顯示區(qū)塊、展現(xiàn)數(shù)據(jù)，透明效果出現(xiàn)在很多輔佐元素當(dāng)中，這樣前景元素就顯得非常突出。
讓我們來(lái)看看透明效果，這種優(yōu)雅而又華麗的效果。

Wavefront

整體構(gòu)成比較不拘一格，音樂(lè)節(jié)一般的氛圍。霓虹色彩，半透明區(qū)塊，讓色彩更加動(dòng)感，很好的支持了主題。

Advies

頁(yè)面中含有很多透明條紋，中間的大區(qū)塊既不影響背景圖像的效果，也能很好的展現(xiàn)信息。