生命在于運(yùn)動(dòng)，體育運(yùn)動(dòng)是保持健康活力不可缺少的一個(gè)環(huán)節(jié)，與運(yùn)動(dòng)相關(guān)的網(wǎng)站設(shè)計(jì)自然也要充滿(mǎn)積極向上的風(fēng)格。運(yùn)動(dòng)服飾、運(yùn)動(dòng)員、運(yùn)動(dòng)方式，展示運(yùn)動(dòng)過(guò)程中的美。

特寫(xiě)的照片是除視頻外最能展示運(yùn)動(dòng)瞬間美的載體，所以一張激情十足的照片加上動(dòng)感的交互方式，是塑造運(yùn)動(dòng)網(wǎng)站界面設(shè)計(jì)之美的神兵利器。今天就和藍(lán)藍(lán)設(shè)計(jì)一起感受這些充滿(mǎn)活力的正能量網(wǎng)站吧!

更多與運(yùn)動(dòng)相關(guān)的網(wǎng)站設(shè)計(jì)欣賞：http://m.yvirxh.cn/

Solasie

網(wǎng)頁(yè)設(shè)計(jì)中，切圖輸出是指UI設(shè)計(jì)師將手邊繪制完成的原始圖稿轉(zhuǎn)換成網(wǎng)頁(yè)界面設(shè)計(jì)用的圖片格式、并交由下一位人員網(wǎng)頁(yè)排版的重要步驟。選擇適合的圖片格式不但可以將讓設(shè)計(jì)得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時(shí)間、有效的減少服務(wù)器的負(fù)擔(dān)。今天藍(lán)藍(lán)設(shè)計(jì)就和朋友們分享一下網(wǎng)頁(yè)設(shè)計(jì)中圖片格式的選擇技巧
以UI設(shè)計(jì)師最常用的 Photoshop 以及 Illustrator 為例，都提供了「儲(chǔ)存為網(wǎng)頁(yè)用…」的功能。與默認(rèn)的存盤(pán)模式不同，在這個(gè)模式中，軟件提供了仿真圖文件輸出的質(zhì)量調(diào)整、檔案大小控制等針對(duì)網(wǎng)頁(yè)圖文件需求的選項(xiàng)：

頁(yè)面的加載時(shí)間是每一個(gè)UI設(shè)計(jì)師都擔(dān)心的數(shù)據(jù)，或者至少是每個(gè)UI設(shè)計(jì)師都應(yīng)該擔(dān)心的問(wèn)題。圖片的大小肯定是一個(gè)需要留意的問(wèn)題。這就是為什么藍(lán)藍(lán)設(shè)計(jì)在這里寫(xiě)了幾個(gè)有助于優(yōu)化頁(yè)面中的圖片的小技巧，這些小技巧將有助于大家解決這個(gè)問(wèn)題，這些小技巧也可以在你需要優(yōu)化圖片的時(shí)候提供很多幫助。提高大家的網(wǎng)站界面設(shè)計(jì)能力！

TinyPNG
TinyPNG是使用智能有損壓縮技術(shù)，來(lái)減小png圖片的大小。

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

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

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

下面是一些非常值得參照的表單設(shè)計(jì)：

在網(wǎng)頁(yè)設(shè)計(jì)中自然圖案的展示是很常見(jiàn)的一個(gè)手法。ui設(shè)計(jì)師通常喜歡用各種景觀照片、風(fēng)景插圖或者鄉(xiāng)村風(fēng)格的視頻來(lái)增加網(wǎng)站界面設(shè)計(jì)自身的自然度?，F(xiàn)在我們把思緒聚焦在航海主題上。海洋并不缺乏強(qiáng)大的情緒，相反它能夠激發(fā)一系列積極的感受，在網(wǎng)站設(shè)計(jì)中見(jiàn)證這樣一個(gè)駭俗的場(chǎng)景足以讓我們感受到它戲劇性的效果，在心中刻下明顯的印記。

至于海景的功能使用，它們當(dāng)然可以各領(lǐng)風(fēng)騷。例如水下風(fēng)景可以客氣地吸引用戶(hù)通過(guò)線(xiàn)下滾動(dòng)的模式來(lái)探索網(wǎng)站，為他們提供視覺(jué)路徑；而普通的海洋照片可以作為非語(yǔ)言支持的信號(hào)，或者網(wǎng)站的標(biāo)志。一切都源于一些常用的概念。

So~來(lái)看看藍(lán)藍(lán)設(shè)計(jì)這里搜集的實(shí)例吧。

Luxaqua Design

第一個(gè)網(wǎng)站就非常給力了！這是一個(gè)基于垂直滾動(dòng)的網(wǎng)站，通過(guò)滾動(dòng)鼠標(biāo)滾輪引領(lǐng)我們潛入海洋深處。每個(gè)部分又有獨(dú)立的滾動(dòng)畫(huà)面，整個(gè)設(shè)計(jì)是由照片輔助實(shí)現(xiàn)的，非常磅礴。

對(duì)預(yù)算低的企業(yè)或者剛開(kāi)始有意建網(wǎng)站的同學(xué)，使用一個(gè)高質(zhì)量的網(wǎng)站設(shè)計(jì)模板能大大減少時(shí)間，讓珍貴的時(shí)間磨在刀刃上。今天藍(lán)藍(lán)設(shè)計(jì)一些專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)里收集了20款由專(zhuān)業(yè)ui設(shè)計(jì)師打造的高質(zhì)量網(wǎng)站界面設(shè)計(jì)模板，如果你正好需要，點(diǎn)進(jìn)那個(gè)優(yōu)雅的鏈接

Modus Versus

我們都想擁有很棒的網(wǎng)站的界面設(shè)計(jì)，想讓其他人在看到我們的網(wǎng)站時(shí)眼前一亮。 如果他們喜歡的話(huà)，還會(huì)再次點(diǎn)擊瀏覽或者分享給他的朋友們。這就是好網(wǎng)站的魅力所在！

我們不但要會(huì)運(yùn)用HTML5，CSS3和其他復(fù)雜的語(yǔ)言，也應(yīng)該會(huì)利用基礎(chǔ)技巧打造自己的網(wǎng)站。我敢說(shuō)很多網(wǎng)頁(yè)設(shè)計(jì)者或開(kāi)發(fā)者都難以解決CSS3語(yǔ)言無(wú)法在IE瀏覽器中像在其他瀏覽器一樣正常顯示的問(wèn)題。
這是個(gè)嚴(yán)肅的問(wèn)題。如果網(wǎng)頁(yè)無(wú)法顯示，那還有什么意義呢？誰(shuí)想要一直花時(shí)間解決錯(cuò)誤漏洞呢？如果你的客戶(hù)沒(méi)有一筆很大的預(yù)算，但你還是想做出很棒的網(wǎng)頁(yè)來(lái)，該怎么辦？

你要學(xué)會(huì)打造一個(gè)簡(jiǎn)單的網(wǎng)站，同時(shí)又能保證瀏覽量。這有很多可以實(shí)現(xiàn)的方法。藍(lán)藍(lán)設(shè)計(jì)以下的幾點(diǎn)都可以為建成基礎(chǔ)又美觀的網(wǎng)站助你一臂之力。

1. 巧用動(dòng)畫(huà)

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

這些新趨勢(shì)讓設(shè)計(jì)變得妙趣橫生。但是很多專(zhuān)家還會(huì)倡導(dǎo)那些并非最時(shí)髦、最震撼世界的ui設(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)注它們。

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

不是經(jīng)常有同學(xué)問(wèn)去哪里尋找網(wǎng)頁(yè)界面設(shè)計(jì)的靈感么？告訴你吧，就是在這些網(wǎng)頁(yè)靈感畫(huà)廊里喲！用靈動(dòng)的CSS打造的靈感畫(huà)廊遍及網(wǎng)絡(luò)，已有十多年的歷史，在浩瀚如海的網(wǎng)頁(yè)圖集中，總有某些站點(diǎn)觸動(dòng)著網(wǎng)頁(yè)設(shè)計(jì)師的深處，激發(fā)著他們的靈感。本文試圖對(duì)這些充滿(mǎn)靈感的畫(huà)廊網(wǎng)站進(jìn)行匯總。這些采用CSS3+HTML5制作的一流網(wǎng)站，通常都有專(zhuān)門(mén)的主題或者特定的內(nèi)容形式，均遵循了響應(yīng)式設(shè)計(jì)和移動(dòng)至上的理念。

藍(lán)藍(lán)設(shè)計(jì)這里收集了許多例風(fēng)格精美、內(nèi)容豐富的CSS靈感畫(huà)廊，每一個(gè)網(wǎng)站都很專(zhuān)業(yè)，收集了各式各樣的優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)。
ui設(shè)計(jì)師經(jīng)常需要尋找資源，圖像、素材、靈感都是不可或缺的。不妨閑暇時(shí)間看看這些畫(huà)廊，相信一定能夠啟發(fā)靈感應(yīng)用到到你的界面設(shè)計(jì)中。

RWD JP

在我們的生活中，橙色常給予我們幸福和快樂(lè)，它被稱(chēng)為愛(ài)和仁慈的火焰，甚至還可以代表溫暖的太陽(yáng)、啟蒙的力量、以及幸福健康。
那么在本次系列中，藍(lán)藍(lán)設(shè)計(jì)為您收集了一組現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)里運(yùn)用了橙色的作品，來(lái)瞧瞧注入橙色的網(wǎng)頁(yè)的界面設(shè)計(jì)會(huì)對(duì)你產(chǎn)生怎樣的魔力吧！

These Are Things