網(wǎng)頁設(shè)計的風(fēng)格多種多樣，但插圖風(fēng)永遠(yuǎn)不過時。插圖可以讓ui設(shè)計師盡情地表現(xiàn)他們自己豐富的創(chuàng)造力和想象力，將插圖運(yùn)用于設(shè)計之中也會使網(wǎng)頁變得更具有趣味性。今天藍(lán)藍(lán)設(shè)計搜集了15例運(yùn)用插圖的網(wǎng)頁界面設(shè)計案例，一起來感受一下這些設(shè)計師們的創(chuàng)意吧！

Abby Putinski

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

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

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

1. 巧用動畫

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

這些新趨勢讓設(shè)計變得妙趣橫生。但是很多專家還會倡導(dǎo)那些并非最時髦、最震撼世界的ui設(shè)計。當(dāng)然，響應(yīng)式設(shè)計不僅去年是熱點(diǎn)，今年依然還會被人們重視。同樣，柵格化設(shè)計作為最基本的設(shè)計，也會被繼續(xù)延續(xù)下去。

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

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

藍(lán)藍(lán)設(shè)計是從職場方面分享一些展示設(shè)計方案的經(jīng)驗(yàn)，如何使甲方看懂你的界面設(shè)計也是門學(xué)問，如果你是ui設(shè)計新手，也可以在《PS新手教程：變換角度！讓你的設(shè)計稿更上檔次》學(xué)到好東西。

像一個常勝將軍一樣信心十足的展示你的線框圖

在我兼職制作 UXPin（用戶體驗(yàn)設(shè)計平臺）之前我一直都是全職做著 UX Designer和UX Manager。興奮的創(chuàng)作過程和臭名昭著的壓力交錯在我的生活里，而且讓人感覺最殘酷的事情就是被拒絕的感覺。

產(chǎn)品設(shè)計的原則有點(diǎn)太泛哈，藍(lán)藍(lán)設(shè)計這里想結(jié)合自己的工作心得來小結(jié)一下手機(jī)無線設(shè)計8原則：

原則1：用戶界面應(yīng)該是基于用戶的心里模型，而不是基于工程實(shí)現(xiàn)模型

就是把后臺本來很復(fù)雜的事情通過設(shè)計符合用戶日常生活中常用的瀏覽方式或操作方式。其實(shí)這一點(diǎn)是設(shè)計師把生活中的細(xì)節(jié)和數(shù)據(jù)結(jié)合的凝聚點(diǎn)，用戶的心理模型抓的越準(zhǔn)，界面就會越優(yōu)秀。

#左邊界面#：大眾點(diǎn)評新版的價格的搜索就比之前改得更符合用戶心里模型；

排版的基本功大家掌握多少呢，那么今天藍(lán)藍(lán)設(shè)計就和朋友們分享一下收集到的排版的10個基本功，希望對朋友們的ui設(shè)計有所幫助！

1、多花些時間

挑選合適的字體需要花費(fèi)大量時間。但是不要一遍又一遍地讓自己陷入對同一類型的字體挑選中。因?yàn)槿藗兺?xí)慣于從自己熟悉的字體或者偏愛的字體開始。多花些時間去發(fā)現(xiàn)探索新的類型，這樣你才能慢慢地發(fā)現(xiàn)自己對一種字體的細(xì)微差別的敏銳度，真正地讓字體自己告訴你合適不合適。

2、不要使用過多的字體

如果你的一個頁面里有十種不同的字體，那么你的排版一定會很難看。控制自己使用越少的字體，將會讓你的頁面脫穎而出。同時你也可以在字體的大小、重量和其它方面創(chuàng)造更多的對比變化。

3、不要盲目趕潮流

一、門票：大門票產(chǎn)生大印象

讀者特利發(fā)給我們一張他設(shè)計的洗車券，這張洗車券是他希望為他兒子的游泳隊籌集在游泳池訓(xùn)練的各種費(fèi)用而舉行的一次洗車籌款，而它的有趣之處就在于其尺寸相當(dāng)搶眼：

沒有人會對它視而不見：這張洗車券是一般門票尺寸的兩倍之大，界面設(shè)計起來也很容易，從視覺上也非常能吸引有興趣的消費(fèi)者。大圖片及大標(biāo)題使這張洗車券產(chǎn)生一張海報的視覺效果，效果當(dāng)然不錯。

PS是ui設(shè)計領(lǐng)域最著名的軟件之一，是修圖、美顏的神器不二神器。作為一個網(wǎng)頁設(shè)計師，我早在學(xué)校里就學(xué)過PS，制作過許多網(wǎng)站設(shè)計、界面設(shè)計案例，不過我已經(jīng)畢業(yè)兩年了…歲月如刀，刀刀催人老啊…現(xiàn)今的PS不斷進(jìn)化，衍生出了很多新的功能，而我呢，也跟著PS一同成長，學(xué)到了不少新知識~ 那么朋友們和藍(lán)藍(lán)設(shè)計一起學(xué)習(xí)這8個不簡單的PS小技巧吧！

最近幾次的ui設(shè)計都因?yàn)榕渖患驯煌聡姷貌恍小Ｄ愕?strong>網(wǎng)站設(shè)計給人的第一感覺怎樣，色彩可以說起著決定性作用，今天藍(lán)藍(lán)設(shè)計在這里推薦一些單色背景的網(wǎng)頁的界面設(shè)計，看它們是怎樣讓我們眼前一亮的。

如果您有更贊的單色網(wǎng)頁推薦，歡迎分享。感謝！

Bond Cars

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

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

RWD JP