很多UI設(shè)計師都有一個插畫家的夢想，都想擁有自己的數(shù)位板。那么作為會融會貫通的網(wǎng)頁設(shè)計師是肯定也會在自己的網(wǎng)頁界面設(shè)計項目中露一手啦，

好比接下來藍藍設(shè)計為您推薦的漂亮的插畫風(fēng)格網(wǎng)站設(shè)計，他們除了擁有強悍的交互，更是有著吸引眼球的視覺，我們知道插畫在網(wǎng)站中的使用比比皆是，但要保持它和其他網(wǎng)站信息的風(fēng)格一致，是需要設(shè)計師的不懈努力和推敲琢磨的,所以讓我們一起來欣賞這里的網(wǎng)頁吧！希望可以給您的工作帶來靈感。

在進行UI設(shè)計時，往往我們需要依賴理念和創(chuàng)意。所有你看到的東西，環(huán)繞在你周圍的事物均可成為你的創(chuàng)意來源。

我們今天的話題是自然風(fēng)味濃郁的網(wǎng)頁設(shè)計。當設(shè)計缺乏靈感時，不妨出去走走，感受一下自然。溫暖、放松、如家、友好、美麗的自然風(fēng)情畫緩緩的展現(xiàn)在你的眼前，同時也帶有一點點的神秘與新鮮感。

如何在網(wǎng)頁設(shè)計中加入自然風(fēng)情呢？請看藍藍設(shè)計下面這22個網(wǎng)站。

Gyga Voyages

旅游公司的網(wǎng)站界面設(shè)計，背景圖像很有創(chuàng)意。

網(wǎng)頁設(shè)計時總是有許多考慮，而不得不為圖片元素加上框線處理，例如考量使用者互動與圖片互動時：像是滑鼠滑上、滑鼠按下時的效果；或是網(wǎng)頁版面界面設(shè)計時，或許是為了保留必須與文字一起排版的彈性、或許是考慮到無法掌握圖片內(nèi)容、可能會出現(xiàn)網(wǎng)頁相同色彩的圖片，像是商業(yè)攝影圖片等，諸如以上種種狀況，都可能考慮到為圖片加上外框UI設(shè)計：

商業(yè)攝影的圖片常常會有全白的背景出現(xiàn)：

或是像這種大面積留白的插畫圖片，若是沒有框線，實在很難看到圖片的邊界在哪里，在網(wǎng)頁上與文字一起編排的時候容易造成困擾：

今天藍藍設(shè)計推薦一些簡約時尚的網(wǎng)站設(shè)計，最大的特點是都采用了極少的顏色搭配和比較簡單的元素，但都創(chuàng)造了或遼遠無邊、或?qū)庫o寂寥的的視覺效果，每個網(wǎng)站界面設(shè)計的配色都很贊，同學(xué)們可以學(xué)習(xí)一下 : ）

Ten & Bourne

很多iPhone應(yīng)用網(wǎng)站的UI設(shè)計都頗為精美，朋友們們不會有什么意見的?？磥砟切?/span>UI設(shè)計師們都敞開胸懷迎接“蘋果style”，創(chuàng)造出干凈簡約又優(yōu)雅的網(wǎng)站設(shè)計?？刹宦?，作為一枚合格的設(shè)計師，他們才不會隨隨便便弄個網(wǎng)站界面設(shè)計展示他們的app呢，都卯足了勁設(shè)計出新穎的版式，配上美美的圖片、大量留白和恰當?shù)淖煮w。今天呢！藍藍設(shè)計將要帶給你的這份靈感清單就是一些絕贊的iPhone應(yīng)用網(wǎng)站設(shè)計！

dcovery

這可是規(guī)劃旅游方案的一枚利器，等你到了目的地還能靠它探索更多樂趣。

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

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

更多與運動相關(guān)的網(wǎng)站設(shè)計欣賞：http://www.bouu.cn/

Solasie

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

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

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

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

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

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

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

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

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

So~來看看藍藍設(shè)計這里搜集的實例吧。

Luxaqua Design

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