讓我們來(lái)看看一些小而美的交互實(shí)例，看看這些巧妙的動(dòng)效是如何優(yōu)雅地改善了用戶(hù)體驗(yàn)。

服飾類(lèi)的網(wǎng)站設(shè)計(jì)會(huì)專(zhuān)注在服飾本身的華美時(shí)尚風(fēng)格之上，鞋類(lèi)的網(wǎng)站設(shè)計(jì)會(huì)專(zhuān)注于鞋型的潮流性與材質(zhì)的宣傳上，但是酒類(lèi)網(wǎng)站的界面設(shè)計(jì)因?yàn)橐曈X(jué)上無(wú)法直接傳達(dá)嗅覺(jué)與味覺(jué)，所以設(shè)計(jì)酒類(lèi)的網(wǎng)站設(shè)計(jì)時(shí)，會(huì)把專(zhuān)注點(diǎn)從酒本身往外擴(kuò)散到釀酒的原材料、環(huán)境的烘托、飲用的方法、圍繞的典故等，通過(guò)全面的介紹來(lái)彌補(bǔ)嗅覺(jué)與味覺(jué)上的缺失遺憾（這也正是許多酒類(lèi)廣告的宣傳方法）。

再通過(guò)搭配質(zhì)感的酒具，使用視覺(jué)滾動(dòng)差的表現(xiàn)手法來(lái)營(yíng)造一個(gè)酒的氛圍。

Big Bend Brewing Company

今天就來(lái)聊聊那些“鶴立雞群”、“卓爾不凡”的電商網(wǎng)站設(shè)計(jì)，我們來(lái)看一看，到底為什么這些網(wǎng)站界面設(shè)計(jì)能夠從眾多電商網(wǎng)站中”脫穎而出”，既能符合自身品牌形象，又能打動(dòng)消費(fèi)者的心。

藍(lán)藍(lán)設(shè)計(jì)下面收集了一些非常漂亮且實(shí)用的電商網(wǎng)站設(shè)計(jì)，均有著高超的ui設(shè)計(jì)?？磥?lái)這些公司都能明白：好的設(shè)計(jì)對(duì)于商業(yè)來(lái)說(shuō)是催化劑，是一大助力。

Saturdays Surf NYC

選擇圓形一個(gè)最普通的原因就是它模仿指尖的形狀的能力下意識(shí)也將圓形元素與按鈕聯(lián)系在一起。因此，作為一條規(guī)律，你很容易發(fā)現(xiàn)行為召喚的按鈕（call-to-action buttons）應(yīng)用在環(huán)形結(jié)構(gòu)后，有相當(dāng)一部分應(yīng)用程序大肆地在設(shè)計(jì)中使用這一形狀。例如，音樂(lè)導(dǎo)向的應(yīng)用，或者是可視化的鬧鐘以及時(shí)鐘都離不開(kāi)環(huán)形結(jié)構(gòu)。

藍(lán)藍(lán)設(shè)計(jì)本文的選例都是帶有明確的圓形風(fēng)格的移動(dòng)交互界面設(shè)計(jì)，這些界面自然地融入了UI設(shè)計(jì)流暢性，更多的可用性和吸引力。

Eli Williamson設(shè)計(jì)的Lock Screen Concept

使用絢麗的相片背景來(lái)吸引用戶(hù)的注意力。緊湊的排版，醒目的圓形圖案以及主體的白色給應(yīng)用增加了雅致與空間感。

大部分人不喜歡填表單，因?yàn)槿藗儊?lái)到網(wǎng)站，主要目的不是填表，而是瀏覽或者購(gòu)買(mǎi)。精心設(shè)計(jì)的表單界面設(shè)計(jì)，使輸入變得流暢讓人心情愉悅，而糟糕的ui設(shè)計(jì)讓人扶墻吐血。那怎樣才是優(yōu)秀的表單設(shè)計(jì)呢？頁(yè)面的布局、邏輯組織、視覺(jué)樣式等都是值得關(guān)注的細(xì)節(jié)，其中簡(jiǎn)化輸入是最近常被提及的，在這里藍(lán)藍(lán)設(shè)計(jì)分享下自己工作中的心得…

1、 更高大的輸入框

增加輸入框高度，加粗字體，可以讓網(wǎng)頁(yè)上的輸入框看起來(lái)更容易填寫(xiě)和閱讀。隨著電腦顯示器尺寸變大，這樣的輸入框也顯得更大氣。

2、 添加選取器

與其讓人輸入不如提供選擇，選取內(nèi)容只要點(diǎn)幾下，就自動(dòng)填充進(jìn)輸入框，不但可以減少輸入障礙，還能預(yù)防出錯(cuò)?？梢园讶魏蜗Ｍ臄?shù)據(jù)做成選取器，比如日期、顏色、地址或者歷史記錄等等。

舉個(gè)例子：前面的“對(duì)方開(kāi)戶(hù)姓名”輸入框，需要填寫(xiě)對(duì)方的姓名，如果對(duì)方名字里有漢字不認(rèn)識(shí)該怎么辦呢？于是我們可以加上一個(gè)生僻字的選取器，如圖：

機(jī)會(huì)往往就在一瞬間，作為設(shè)計(jì)師，你必須給自己打造一款創(chuàng)意十足的名片設(shè)計(jì)，這意味著互遞名片時(shí)，可能你就獲得了一個(gè)未來(lái)的美好機(jī)會(huì)（可以是一個(gè)大客戶(hù)，或是一份羨慕已久的工作），當(dāng)然，機(jī)會(huì)屬于有準(zhǔn)備的人，那么今天藍(lán)藍(lán)設(shè)計(jì)的這25款創(chuàng)意十足的名片界面設(shè)計(jì)，相信驚嘆之余你會(huì)得到紛呈的靈感，提供ui設(shè)計(jì)能力，奮起吧少年們！

Jake Bradford

太忙了沒(méi)時(shí)間學(xué)習(xí)？這就是你為自己不想學(xué)習(xí)找的借口。
抓緊時(shí)間，利用上網(wǎng)的時(shí)間來(lái)為自己也充電一下吧！互聯(lián)網(wǎng)上除了娛樂(lè)，其實(shí)也有很多比藍(lán)藍(lán)設(shè)計(jì)更值得每日關(guān)注學(xué)習(xí)的網(wǎng)站。今天我們一起推薦給您網(wǎng)頁(yè)設(shè)計(jì)師和前端工程師服務(wù)的14個(gè)教學(xué)網(wǎng)站：）絕對(duì)不要錯(cuò)過(guò)喲。相信一定會(huì)提高朋友的網(wǎng)頁(yè)設(shè)計(jì)、ui設(shè)計(jì)、軟件界面設(shè)計(jì)、iPad界面設(shè)計(jì)能力的！

音樂(lè)是人類(lèi)的靈魂，相信大部分的設(shè)計(jì)師在做ui設(shè)計(jì)時(shí)，都會(huì)開(kāi)著音樂(lè)激發(fā)靈感，陶冶情操。那些歌兒或激烈、或?qū)庫(kù)o……

音樂(lè)的本質(zhì)是耳朵的享受，但是在藍(lán)藍(lán)設(shè)計(jì)，我們肯定不能讓眼球落寞，那么今天就來(lái)一起看看25個(gè)與音樂(lè)相關(guān)的網(wǎng)站的界面設(shè)計(jì)吧。推薦收藏起來(lái)，以后肯定會(huì)用到的喲，一定可以幫住大家提高ui設(shè)計(jì)服務(wù)能力的，讓您在ui設(shè)計(jì)公司立穩(wěn)腳步，處于不敗之地。

：）

更多音樂(lè)相關(guān)網(wǎng)站設(shè)計(jì)欣賞：http://m.sillybuy.com/

Twitter music

扁平化ui設(shè)計(jì)是指舍棄漸變、陰影、高光等擬物化的視覺(jué)效果，從而打造出一種看上去更加平面的界面設(shè)計(jì)風(fēng)格。扁平化的網(wǎng)頁(yè)設(shè)計(jì)更適合用于需要同時(shí)支持多種屏幕尺寸的響應(yīng)式設(shè)計(jì)技術(shù)中。今天，藍(lán)藍(lán)設(shè)計(jì)給大家?guī)?lái)35套用于扁平化設(shè)計(jì)的圖標(biāo)設(shè)計(jì)、界面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)元素，記得分享和推薦啊！

Flat Free UI Kit

不可否認(rèn)，紙媒日漸衰微，力圖轉(zhuǎn)型為網(wǎng)絡(luò)媒體。
而網(wǎng)絡(luò)媒體，則”反其道而行之”，采用紙媒的布局網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格。

如何在呈遞大量信息的基礎(chǔ)上做到布局有序？如何利用紙媒的傳統(tǒng)大標(biāo)題更好的吸引用戶(hù)注意？如何把縮略圖排布的跟雜志中的圖片一樣？請(qǐng)看藍(lán)藍(lán)設(shè)計(jì)推薦的25個(gè)范例網(wǎng)站界面設(shè)計(jì)素材。

This is Fake DIY