響應(yīng)式網(wǎng)頁(yè)界面設(shè)計(jì)，是一種正在流行的網(wǎng)頁(yè)開(kāi)發(fā)思想，它是利用靈活可變的柵格系統(tǒng)，令網(wǎng)頁(yè)的顯示模式可以根據(jù)訪問(wèn)設(shè)備的屏幕尺寸規(guī)格而進(jìn)行自適應(yīng)。預(yù)計(jì)2015年的時(shí)候，移動(dòng)端的用戶數(shù)量將會(huì)從目前的8億，增長(zhǎng)到19億，而這也意味著目前我們?yōu)樽烂鏋g覽器而設(shè)計(jì)的網(wǎng)頁(yè)，將會(huì)在他們的手機(jī)和平板上呈現(xiàn)出非常糟糕的使用體驗(yàn)。

但是隨著實(shí)際應(yīng)用狀況的改變，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)還是會(huì)出現(xiàn)一系列復(fù)雜的并發(fā)癥。藍(lán)藍(lán)設(shè)計(jì)本文余下的部分，就是詳細(xì)闡述如何在響應(yīng)式網(wǎng)頁(yè)中安置和處理多媒體元素，諸如圖片和視頻，最終的目的是幫你做出一個(gè)靠譜的網(wǎng)站，能讓這些元素?zé)o縫地在各種手持設(shè)備上加載運(yùn)行，提升用戶體驗(yàn)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的圖片處理

先說(shuō)說(shuō)響應(yīng)式圖片的處理方法。在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，圖片處理的問(wèn)題或多或少地和傳統(tǒng)網(wǎng)頁(yè)中的導(dǎo)航欄設(shè)計(jì)有相似之處。隨著新的移動(dòng)設(shè)備的普及，更高像素密度的屏幕使得網(wǎng)頁(yè)的任何一個(gè)瑕疵都顯得無(wú)比明顯，因此，圖片處理的核心問(wèn)題在于如何確保網(wǎng)站（尤其是圖片）的各個(gè)方面都能盡可能靈活，并且確保每個(gè)像素不會(huì)在高分屏下模糊。

現(xiàn)在大模糊背景圖像的界面設(shè)計(jì)在網(wǎng)站設(shè)計(jì)中越來(lái)越受歡迎，高斯模糊的加入不僅創(chuàng)建了一個(gè)朦朧彌漫的效果，具備高端觀賞性的同時(shí)，它還可以強(qiáng)制性引導(dǎo)用戶關(guān)注主要信息內(nèi)容，大大提升了信息的易讀性。和藍(lán)藍(lán)設(shè)計(jì)一起來(lái)欣賞這些網(wǎng)站吧：）

更多模糊大背景網(wǎng)站設(shè)計(jì)欣賞http://m.sillybuy.com/

Color

這篇文章藍(lán)藍(lán)設(shè)計(jì)傾力推薦了許多多個(gè)美麗的黑色系網(wǎng)站設(shè)計(jì)，微妙的色調(diào)和戲劇性的黑白圖像一定會(huì)讓你陷入這一場(chǎng)低調(diào)奢華的視覺(jué)盛宴里，來(lái)嘗嘗吧：）

另外也希望大家?guī)е鴨?wèn)題去欣賞這些網(wǎng)站界面設(shè)計(jì)，這些UI設(shè)計(jì)師是如何把黑色設(shè)計(jì)的更有國(guó)際范？如果是你來(lái)，布局、素材、輔助色又會(huì)怎么選用呢？

更多黑色網(wǎng)站設(shè)計(jì)欣賞：http://m.sillybuy.com/

DASSEL UND WAGNER

藍(lán)藍(lán)設(shè)計(jì)灰常樂(lè)意每周在網(wǎng)頁(yè)設(shè)計(jì)佳作列表中展現(xiàn)界面設(shè)計(jì)精美的網(wǎng)站，不斷為你提供靈感。而今天藍(lán)藍(lán)設(shè)計(jì)打算另辟蹊徑，為網(wǎng)頁(yè)設(shè)計(jì)收集了既能提供UI設(shè)計(jì)靈感又實(shí)用的優(yōu)秀案例，與過(guò)往選擇單一”主題”的例子有所不同。我們將為你呈現(xiàn)不同的工具和技術(shù)分享網(wǎng)站，可讓你在得到靈感的同時(shí)還能發(fā)現(xiàn)不錯(cuò)的工具或服務(wù)。在這篇文章中你將看到美觀又實(shí)用的網(wǎng)站，全部都不容錯(cuò)過(guò)哦親！

unroll.me

免費(fèi)且簡(jiǎn)單地取消郵件訂閱，還能將剩下的訂閱匯總，并以有組織的概覽形式專門提供給你。

許多的慈善和非營(yíng)利組織嘗試籌集善款并設(shè)法讓大家知道他們的特殊存在。以前，他們沒(méi)有設(shè)計(jì)和開(kāi)發(fā)好網(wǎng)站的資源，不得不湊合著搭個(gè)樸素、單調(diào)、無(wú)聊的網(wǎng)站，這些網(wǎng)站自然沒(méi)法吸引新的訪問(wèn)者。

然而今時(shí)不同往日，UI設(shè)計(jì)者和開(kāi)發(fā)者會(huì)幫助某些組織搭建網(wǎng)站，這些組織或慈善目的能引起他們的興趣，或讓他們聯(lián)想到自身經(jīng)驗(yàn)，或他們的家人和朋友有參與的。最終就有了專門為這些慈善和非營(yíng)利組織搭建的漂亮網(wǎng)站設(shè)計(jì)，且非常值得一看。跟著藍(lán)藍(lán)設(shè)計(jì)一起來(lái)欣賞下吧！

Glocal Ventures

響應(yīng)式設(shè)計(jì)是當(dāng)前網(wǎng)站設(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)航菜單?？刹荒芟窨s放頁(yè)面那樣縮放導(dǎo)航菜單。在UI設(shè)計(jì)之前，要謀劃好導(dǎo)航菜單在手機(jī)、平板、桌面上的布局。藍(lán)藍(lán)設(shè)計(jì)收集了許多例出眾的響應(yīng)式設(shè)計(jì)，大家可以使用響應(yīng)式在線測(cè)試工具Responsinator來(lái)看看，他們的導(dǎo)航菜單，是怎樣界面設(shè)計(jì)的。

Gold Interactive

曾經(jīng)有一段時(shí)間，大伙兒都在努力把網(wǎng)頁(yè)界面設(shè)計(jì)內(nèi)容全部塞進(jìn)首屏。今時(shí)不同往日，網(wǎng)站UI設(shè)計(jì)師和開(kāi)發(fā)者們不再害怕滾屏，而是將背景漸進(jìn)展示、頁(yè)面元素動(dòng)畫以及其它基于滾屏動(dòng)作的酷炫效果融入其中，把滾屏當(dāng)作一個(gè)吸引訪客的絕佳靚點(diǎn)來(lái)好好展現(xiàn)。

為了給親們帶來(lái)新的靈感，藍(lán)藍(lán)設(shè)計(jì)特意收集了一系列把滾屏玩出新花樣的網(wǎng)站設(shè)計(jì)，跟我來(lái)感受一下吧！

ISL

作為一名UI設(shè)計(jì)師，每年都會(huì)沉浸在一些新的界面設(shè)計(jì)趨勢(shì)中興奮不已。接下來(lái)，我們將探尋2014年的設(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ù)下去。

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

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

一般人對(duì)於企業(yè)產(chǎn)品的預(yù)期，可能僅停留在功能要強(qiáng)大，信息要安全，能夠幫助企業(yè)提高工作效率。但今時(shí)已不同往日，除此以外，人們開(kāi)始更注重產(chǎn)品的用戶體驗(yàn)。那么，在面對(duì)企業(yè)產(chǎn)品的界面設(shè)計(jì)上，有什么方法可以提升用戶體驗(yàn)呢？接下來(lái)，藍(lán)藍(lán)設(shè)計(jì)為大家?guī)?lái)一些國(guó)內(nèi)外的優(yōu)秀案例以及一些設(shè)計(jì)Web App時(shí)的思考方向。

Web App 設(shè)計(jì)要點(diǎn)

1. 配色

顏色作為UI設(shè)計(jì)師傳達(dá)情感的主要元素之一。一個(gè)明確的品牌顏色，對(duì)信任度，認(rèn)知度都會(huì)有大大的提升。顏色除了能為界面提升美感，也能作為功能上的輔助。在普遍頁(yè)面信息量大的企業(yè)產(chǎn)品中，往往一個(gè)有顏色的按鈕就很容易吸引用戶的視覺(jué)焦點(diǎn)。

Lovely是Dribbble大神Kerem Suer設(shè)計(jì)的Web App。橙色主，藍(lán)色輔助，淡灰色為底色。這個(gè)配色既色彩鮮明，淡淡的感覺(jué)更讓人長(zhǎng)時(shí)間使用也不覺(jué)累。整體感覺(jué)和諧舒服，簡(jiǎn)潔耐看。

網(wǎng)上擠滿了各種各樣的UI設(shè)計(jì)方案，事實(shí)上我們已經(jīng)有一套套的方案可遵循。但！界面設(shè)計(jì)永無(wú)止境！哪怕是一個(gè)注冊(cè)表單，也值得再細(xì)心研究。下面藍(lán)藍(lán)設(shè)計(jì)給出注冊(cè)表單設(shè)計(jì)5個(gè)小技巧：

1、別讓用戶重復(fù)填寫相同的內(nèi)容

幾乎每個(gè)人都經(jīng)歷過(guò)這樣一個(gè)事實(shí)：注冊(cè)時(shí)被要求填寫郵箱地址兩次或重復(fù)輸入密碼。但是這其實(shí)是沒(méi)有必要的。僅填寫一次，因?yàn)橛脩粢话愣加浀米约撼Ｓ玫泥]箱地址和密碼。假設(shè)哪天用戶忘記密碼了可以通過(guò)郵箱找回，再多此一舉填寫兩次反而更加容易導(dǎo)致用戶流失。