移動優(yōu)先

很多時(shí)候容易優(yōu)先規(guī)劃重要的界面元素，讓它們?nèi)空故驹谝粋€(gè)移動布局里，如果它們不適合全部展示，則可以去掉一些。同時(shí)也要考慮遇到更大的窗口怎么辦。

你將在一個(gè)界面里容納一個(gè)側(cè)邊欄、也可能是2個(gè)，同時(shí)包括很多其他的頁面元素。如果只是簡單的將桌面端的網(wǎng)頁設(shè)計(jì)策略移植到移動設(shè)備上往往是行不通的。相反，你需要考慮移動設(shè)備的獨(dú)特優(yōu)勢以及如何與用戶需求結(jié)合起來。

派點(diǎn)互動|網(wǎng)頁設(shè)計(jì)|網(wǎng)站建設(shè)|品牌網(wǎng)站設(shè)計(jì)

A List Apart發(fā)布過《 Mobile First》一書，筆者 Luke Wroblewski 提出了很多這方面的觀點(diǎn)。

他提倡產(chǎn)品研發(fā)團(tuán)隊(duì)首先需要針對移動設(shè)備設(shè)計(jì)，這不僅是因?yàn)橐苿釉O(shè)備現(xiàn)在數(shù)量龐大而且在飛速增長，而且因?yàn)橐苿釉O(shè)備的限制能迫使我們改變舊習(xí)慣，我們不得不更多的去關(guān)注最本質(zhì)、最重要的產(chǎn)品，是同時(shí)也要更多地注意性能和使用場景，以此獲取更出色的用戶體驗(yàn)。

無限滾動（瀑布流）

很多社交網(wǎng)站已經(jīng)開始使用瀑布流功能在信息面板、時(shí)間軸、用戶訂閱等內(nèi)容里。 Twitter 和Tumblr采用這個(gè)布局樣式引領(lǐng)和普及瀑布流功能。最新更新的 Pinterest在其主頁上采用了瀑布流的加載技術(shù)并且運(yùn)行的很完美。

也許很多設(shè)計(jì)師會問為什么一開始瀑布流就會受到如此追捧。那是因?yàn)樗転榫W(wǎng)頁提供無限加載的頁面功能?？蓡栴}是這個(gè)無限加載的瀑布流形式，它很難生成固定的鏈接，所以并不是所有的網(wǎng)頁都需要無限加載的方式?？梢姡俨剂鬟@個(gè)趨勢適合的范圍是，您只需要加載不需要具體分頁的網(wǎng)頁來使用。

例如，當(dāng)用戶想直接查閱博客的第15頁或第25頁資源時(shí)，一直加載的頁面顯然是非常糟糕的。但是對于Tumblr 和Pinterest來說，瀑布流是一個(gè)很好的選擇，因?yàn)轫撁嫠休d的是動態(tài)信息。隨著時(shí)間的推移Twitter第一頁或第二頁的信息內(nèi)容將會更新，而這個(gè)過程中使用 Ajax 方式加載數(shù)據(jù)進(jìn)來會讓用戶覺得更加舒服。

空白&極簡主義

空白&極簡主義是受推崇的設(shè)計(jì)風(fēng)格。這個(gè)趨勢在這些年一直是web設(shè)計(jì)的一部分，當(dāng)然也屬于應(yīng)時(shí)而生的設(shè)計(jì)風(fēng)格。很多網(wǎng)站使用空白空間（websites using whitespace）來集中表現(xiàn)用戶要討論的主要內(nèi)容，有些信息資源密集的網(wǎng)站也需要有較小的空白區(qū)域來緩解布局中的信息傳達(dá)。

需要強(qiáng)調(diào)的是，請不要誤解，空白設(shè)計(jì)不是指白色的設(shè)計(jì)。事實(shí)上黑色風(fēng)格的布局也是有空白的，因此這個(gè)“空白”的意思其實(shí)應(yīng)理解為“空的區(qū)域”（large oversized typography）， 也就是在頁面中留下一些空間，讓用戶的視覺能夠很好的分離內(nèi)容，便于讀者理解消化網(wǎng)站所傳遞的信息，不會為滿滿的信息量嚇跑。

自然設(shè)計(jì)元素

CSS3 改變了網(wǎng)頁設(shè)計(jì)。通過 @font-face 可以載入更多字體以及關(guān)鍵幀動畫創(chuàng)建都展示出 CSS 更先進(jìn)的功能。即使是最基本的CSS3屬性也影響了頁面對自然設(shè)計(jì)布局的使用。

這些元素包括具有圓角，陰影以及背景漸變等等，在5-10年前這些效果都是需要圖片來實(shí)現(xiàn)的，現(xiàn)在你完全可以只使用 CSS3 代碼生成這些效果。2013年，將有更多使用圖片的網(wǎng)頁布局被 CSS 屬性取代。

筆者一直喜歡 Dabblet 網(wǎng)站上漸變的背景效果，這個(gè) WEB 應(yīng)用程序可以和 GitHub Gist 框架結(jié)合使用，允許開發(fā)人員實(shí)現(xiàn)構(gòu)建 HTML/CSS 原型。整個(gè)界面是基于 CSS3 實(shí)現(xiàn)，你可能會注意到過去短短幾年的時(shí)間，Web 領(lǐng)域已經(jīng)發(fā)生了很大的變化。

大圖片背景

以前也有人在談?wù)摯髨D片背景（big photo backgrounds）的網(wǎng)站風(fēng)格，至此這個(gè)風(fēng)格一直呈上升趨勢。事實(shí)上，筆者也看過很多這種風(fēng)格的網(wǎng)站設(shè)計(jì)，網(wǎng)站布局可以配合具體的情感來選擇顏色和背景圖片，大圖片帶給用戶一種特殊情感體驗(yàn)的方式。它可以為網(wǎng)站設(shè)計(jì)添加更多的生命力，是一種很好的設(shè)計(jì)表現(xiàn)手法。

然而，筆者認(rèn)為這種趨勢并不適合所有的網(wǎng)站設(shè)計(jì)。恰當(dāng)?shù)姆绞绞?，你的網(wǎng)頁上有足夠的空間去利用大圖片背景給訪客美觀的視覺享受。最大的問題是要讓布局適合內(nèi)容，內(nèi)容要清晰可讀。這就是為什么大圖片背景的最佳應(yīng)用場景通常是在目標(biāo)頁（著陸頁）或一些公司和機(jī)構(gòu)的網(wǎng)站。

這種獨(dú)特的風(fēng)格能完美的為設(shè)計(jì)作品或個(gè)人網(wǎng)站提供與您的訪客進(jìn)行深度的溝通。來訪網(wǎng)站的訪客會好奇你是誰，你做了什么。提供一張照片，展示了一個(gè)簡短的自我介紹，讓訪客知道你是誰，豈不是很好的選擇。大圖片也可用于顯示您的創(chuàng)造性工作，比如插畫，矢量圖片，甚至是你自己的照片。

簡潔的源代碼

優(yōu)秀的CSS框架會大大縮短Web開發(fā)人員的編碼時(shí)間。選擇恰當(dāng)?shù)目蚣軐⒁馕吨诙潭痰膸追昼妰?nèi)你就可以建立一個(gè)完整的兩列或三列的網(wǎng)頁界面。同時(shí)意味著使用較少的HTML標(biāo)簽就可以實(shí)現(xiàn)相同的效果。

創(chuàng)建簡潔的源代碼意味著網(wǎng)站的精簡。這是比較聰明的選擇，因?yàn)楦〉奈募馕吨?wù)器的加載速度更快，在編輯布局的時(shí)候也會迅速而簡潔。通過閱讀網(wǎng)上的文章和學(xué)習(xí)優(yōu)秀開發(fā)人員的經(jīng)驗(yàn)，能夠幫助你去編寫可讀性更高的 HTML & CSS 代碼。

推薦的兩個(gè)最重要的資源是 Github 和Stack Overflow。站內(nèi)收錄了很多免費(fèi)開源的源代碼，你可以下載并把它們應(yīng)用到網(wǎng)站項(xiàng)目中。后者推薦一個(gè)非常有用的Q＆A社區(qū)，開發(fā)者在社區(qū)可以互相幫助。這些網(wǎng)站都提供了很好的資源，幫助您在創(chuàng)建網(wǎng)站時(shí)編寫干凈、可讀的代碼。