曾經(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)畫(huà)以及其它基于滾屏動(dòng)作的酷炫效果融入其中，把滾屏當(dāng)作一個(gè)吸引訪(fǎng)客的絕佳靚點(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ì)變得妙趣橫生。但是很多專(zhuān)家還會(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)品的用戶(hù)體驗(yàn)。那么，在面對(duì)企業(yè)產(chǎn)品的界面設(shè)計(jì)上，有什么方法可以提升用戶(hù)體驗(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è)有顏色的按鈕就很容易吸引用戶(hù)的視覺(jué)焦點(diǎn)。

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

網(wǎng)上擠滿(mǎn)了各種各樣的UI設(shè)計(jì)方案，事實(shí)上我們已經(jīng)有一套套的方案可遵循。但！界面設(shè)計(jì)永無(wú)止境！哪怕是一個(gè)注冊(cè)表單，也值得再細(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ù)流失。

關(guān)注人類(lèi)心理學(xué)的一些研究是非常有意義的。通過(guò)對(duì)人類(lèi)心理的推敲，我們討論人社會(huì)心理，這能夠幫助創(chuàng)業(yè)公司開(kāi)拓市場(chǎng)，因 為受歡迎的內(nèi)容和大眾心理有著最直接的關(guān)系。問(wèn)題的關(guān)鍵是，很多心理學(xué)對(duì)于網(wǎng)站設(shè)計(jì)者有著很強(qiáng)的啟發(fā)性。心理學(xué)幫助網(wǎng)站開(kāi)發(fā)者看清人們的思維如何運(yùn)作。今天，藍(lán)藍(lán)設(shè)計(jì)和大家分享幾條對(duì)網(wǎng)站設(shè)計(jì)師非常有益的建議。

1.太多的選擇等于沒(méi)有選擇。

根據(jù)Sheeya Iyengar教授的心理學(xué)研究，我們能夠洞察人們處理多重選擇時(shí)的心理變化。“選擇就是放棄”，Iyengar教授，《選擇的藝術(shù)》的作者這樣總結(jié)說(shuō)。 社會(huì)心理學(xué)發(fā)現(xiàn)，當(dāng)人們面多過(guò)多選擇的時(shí)候，他們的表現(xiàn)非常相似：他們不會(huì)做任何選擇。這就是所謂的“安全選擇”。

結(jié)合到網(wǎng)站設(shè)計(jì)中：

太多需要用戶(hù)去點(diǎn)擊的東西，會(huì)讓人覺(jué)得混亂。就拿我自己的網(wǎng)站來(lái)說(shuō)，當(dāng)我把兩側(cè)的工具欄撤掉一半之后，注冊(cè)的用戶(hù)大大增加。思考你的網(wǎng)站最終、最核心的目的，關(guān)注集中一點(diǎn)，刪掉無(wú)關(guān)緊要的點(diǎn)綴和內(nèi)容，直到你的內(nèi)容只剩下最本質(zhì)最重要的內(nèi)容，這樣你的用戶(hù)才愿意呆在這里。

藍(lán)藍(lán)設(shè)計(jì)精選一些與食物相關(guān)的網(wǎng)站設(shè)計(jì)，這些網(wǎng)站的界面設(shè)計(jì)主體突出，大部分以暖色調(diào)為主，比如披薩、曲奇餅之類(lèi)的；當(dāng)然也有一些是走清涼風(fēng)的，比如冰淇淋之類(lèi)；還有與愛(ài)情相關(guān)的象征著甜蜜的粉色系糖果類(lèi)，更有單頁(yè)面食物制作流程的酷酷黑色系。

這些網(wǎng)站的主體內(nèi)容有主食類(lèi)的，有餅干零食類(lèi)，有咖啡飲料類(lèi)，也有甜點(diǎn)類(lèi)，更有公益性質(zhì)的。網(wǎng)站的背后有餐廳、有小賣(mài)部、有流動(dòng)外賣(mài)、更有食品商。每個(gè)網(wǎng)站的所營(yíng)造的氣場(chǎng)需要您點(diǎn)擊進(jìn)去細(xì)細(xì)品喲：）

更多食物類(lèi)網(wǎng)站設(shè)計(jì)欣賞http://www.0391cbd.com/

Forno Bonomi

很遺憾，2013年版式設(shè)計(jì)的潮流首先展現(xiàn)在有趣的T—shirt上；很幸運(yùn)，有一些更潮流的UI設(shè)計(jì)師已經(jīng)開(kāi)始追趕時(shí)尚的節(jié)奏，并將他們賦予在網(wǎng)站設(shè)計(jì)的界面設(shè)計(jì)上—字體混搭的藝術(shù)。這種站在潮流前線(xiàn)的版式設(shè)計(jì)風(fēng)格，藍(lán)藍(lán)設(shè)計(jì)尚不多言，以下為15組范例，欣賞為先，點(diǎn)贊為后~

Forefathers Group

隨著開(kāi)放平臺(tái)日益增多，衍生出來(lái)的各類(lèi)應(yīng)用服務(wù)也就呈不斷增長(zhǎng)的趨勢(shì)。這些應(yīng)用服務(wù)的站點(diǎn)UI設(shè)計(jì)也可謂是五彩斑斕，燦若繁星。和藍(lán)藍(lán)設(shè)計(jì)一起來(lái)找找這些網(wǎng)站設(shè)計(jì)的界面設(shè)計(jì)是否有規(guī)律可循。

可以從幾個(gè)方面來(lái)分析:

色彩

Amoderneden

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

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

Glocal Ventures

有同學(xué)喜歡玩黑白配，但是卻一直不得要領(lǐng)，總設(shè)計(jì)不出讓人眼前一亮的佳作出來(lái)？今天就讓大家和藍(lán)藍(lán)設(shè)計(jì)來(lái)這些優(yōu)秀界面設(shè)計(jì)案例里找原因。

深色的背景看起來(lái)具有神秘感，能提供前景元素、背景元素的高度對(duì)比。有了黑色的鋪墊渲染，任何一個(gè)色彩都可以輕易在它之上煥發(fā)光彩。
那么怎么才能更好的在網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用深色背景呢？想要成為一名”高級(jí)黑”UI設(shè)計(jì)師嗎？先來(lái)欣賞本文的絕贊范例吧。

The Blue Cube

外觀整潔干練，對(duì)照鮮明。黑色背景凸顯了白色文本。