細(xì)節(jié)里的力量!11個(gè)極度專(zhuān)注細(xì)節(jié)的優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)

2015-7-14    博博

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:優(yōu)設(shè)網(wǎng)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


11-websites-focusing-on-details-1

著名的室內(nèi)設(shè)計(jì)大師Charles Eames曾說(shuō)過(guò),“細(xì)節(jié)并不只關(guān)乎它們本身,它們還構(gòu)成了設(shè)計(jì)?!钡拇_,每一個(gè)網(wǎng)頁(yè)都是由無(wú)數(shù)的細(xì)節(jié)構(gòu)成,而其中的內(nèi)容也是同樣由這些細(xì)節(jié)連接組織到一起。不論是提供信息服務(wù)的網(wǎng)站,還是APP的官方宣傳頁(yè),任何一個(gè)優(yōu)秀的網(wǎng)站都能夠經(jīng)受得起挑剔眼光的洗禮,從圖片到布局,從字體到架構(gòu)。

網(wǎng)頁(yè)設(shè)計(jì)的細(xì)節(jié)至關(guān)重要,因?yàn)檎撬鼈兘o用戶留下好印象,這些細(xì)節(jié)支撐起網(wǎng)站的良好體驗(yàn),提高易用性。正如同Eames所說(shuō),它們成就了設(shè)計(jì),不注意細(xì)節(jié)會(huì)讓設(shè)計(jì)感流失。

優(yōu)秀的網(wǎng)站有著不一樣的亮點(diǎn),但一樣地專(zhuān)注細(xì)節(jié):《這樣才過(guò)癮!2014年最佳網(wǎng)站評(píng)選結(jié)果出爐》

接下來(lái),我們一同看看這11款設(shè)計(jì)驚艷的網(wǎng)站。它們的好設(shè)計(jì)源于細(xì)節(jié),有的界面雅致,有的交互出彩。深入揣摩這些案例,也許你的下一個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品會(huì)非常強(qiáng)大。

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

Basecamp 是一個(gè)基于網(wǎng)頁(yè)的項(xiàng)目管理工具。正如同它的介紹,速度和效率是至關(guān)重要的。

這是網(wǎng)站的驗(yàn)證界面,設(shè)計(jì)師巧妙的事先隱藏了確認(rèn)的按鈕,只有當(dāng)你輸入了正確的驗(yàn)證碼之后,OK按鈕才會(huì)出現(xiàn)。這種措施不僅提高了網(wǎng)站的性能,還通過(guò)讓按鈕從無(wú)到有,將“驗(yàn)證碼正確”的概念具現(xiàn)化,觸動(dòng)用戶,增加成就感。

COLOPHON PRACTICED BY NEOTERIC DESIGN

在歐洲,在書(shū)中使用Colophons(題跋)可以追溯到15世紀(jì)的時(shí)候(中國(guó)就早很多了),不過(guò)這個(gè)網(wǎng)站是為了將其運(yùn)用到網(wǎng)站上去。這次,Neoteric Design分享了他們網(wǎng)站的制作筆記——各個(gè)部分的功能,從字體軟件到編程語(yǔ)言和內(nèi)容管理系統(tǒng)。如果訪客想知道一個(gè)網(wǎng)站是如何構(gòu)建起來(lái)的,那么這個(gè)帶題跋的筆記可以幫助用戶方便快捷得了解這個(gè)網(wǎng)站的構(gòu)建過(guò)程,滿足好奇心。

VERSATILE TYPOGRAPHIC GRID BY BERGER & F?HR

2014年5月去世的先鋒設(shè)計(jì)師Massimo Vignelli曾說(shuō)過(guò),排版的柵格是“書(shū)的內(nèi)衣”。其實(shí)由此推導(dǎo),柵格系統(tǒng)又何嘗不是“網(wǎng)頁(yè)的內(nèi)衣”呢?也正式它的存在,讓網(wǎng)站整飭而干凈。

在Berger & F?hr 為 Boulder當(dāng)代藝術(shù)博物館的網(wǎng)站進(jìn)行重新設(shè)計(jì)的時(shí)候,柵格系統(tǒng)的“內(nèi)衣”作用是如此的鮮明。當(dāng)你瀏覽網(wǎng)頁(yè)的時(shí)候,圖片、文字段落、導(dǎo)航的邊緣都隱約看到柵格的痕跡,你會(huì)在這里體會(huì)到對(duì)齊的力量。更重要的是,即使網(wǎng)站隨著屏幕響應(yīng)的時(shí)候,柵格所施加的影響依然存在。

不論網(wǎng)頁(yè)的內(nèi)容的屬性是啥,使用柵格來(lái)嚴(yán)格組織內(nèi)容是首要的工作。

PRIDE IN PLACE CELEBRATED BY MAKER’S ROW

越來(lái)越多的歐美網(wǎng)站開(kāi)始在團(tuán)隊(duì)頁(yè)面中標(biāo)注設(shè)計(jì)師的家鄉(xiāng),聲明這個(gè)站點(diǎn)的“故鄉(xiāng)”。在足球領(lǐng)域,球隊(duì)的球員介紹頁(yè)面上,大家都喜歡“自豪地介紹球員來(lái)自……”,也正是這種“基于位置”的信息強(qiáng)化了整個(gè)隊(duì)伍的歸屬感和凝聚力。同理,設(shè)計(jì)師們的“故鄉(xiāng)”信息也有著同樣的作用。

DIRECT ACCESS BY TWLOHA TO SOCIAL MEDIA

社交服務(wù)是如此之多,動(dòng)不動(dòng)倆服務(wù)還會(huì)在圖標(biāo)上撞個(gè)衫啥的,直接導(dǎo)致用戶在分享的時(shí)候點(diǎn)錯(cuò)地方,而在歐美國(guó)家,這種情況更加嚴(yán)重。好在有TWLOHA,用帶字體樣式的文字LOGO替換圖標(biāo),識(shí)別度提高了,美觀度也有所保證。

DESIRE BY MINIMAL TO CONNECT

 

通常情況下,網(wǎng)站都會(huì)有個(gè)“Contact”頁(yè)面,國(guó)內(nèi)我們通常稱(chēng)之為“聯(lián)系我們”。但是MINIMAL設(shè)計(jì)師工作室換了個(gè)思路,他們將這個(gè)常用的詞改成了“Connect”,仿佛在說(shuō)“來(lái)聊聊吧”。這是截然不同的感覺(jué),傳達(dá)出他們期待與用戶溝通的強(qiáng)烈欲望。情懷?人性化。文案很重要。
 

NUDGES TO ACCESS DRAFT

當(dāng)我們討論登錄/注冊(cè)頁(yè)面的時(shí)候,可以輕松腦補(bǔ)出頁(yè)面的造型——其實(shí)絕大多少的頁(yè)面都差不多,本質(zhì)上也就是個(gè)表單。但是有人并不打算隨大流。曾經(jīng)開(kāi)發(fā)出著名應(yīng)用Draft的Nathan Kontny,他在設(shè)計(jì)頁(yè)面的時(shí)候,將用戶的留言添加到表單右邊,將互動(dòng)與溝通的氛圍呈現(xiàn)出來(lái),吸引更多的潛在用戶來(lái)注冊(cè)。

從商業(yè)角度上來(lái)看,這個(gè)案例給了我們一個(gè)經(jīng)驗(yàn):不要羞于展示用戶對(duì)于產(chǎn)品的贊譽(yù)。

COLORS OF CREATIVEMORNINGS

在這個(gè)名為CreativeMornings的網(wǎng)站中,每個(gè)章節(jié)都用不同的色彩標(biāo)示出來(lái),同作者頭像組合到一起。這種視覺(jué)元素貫穿于整個(gè)網(wǎng)站,這些色塊會(huì)有下拉菜單,并且有著各種不同的邊緣、形狀和好玩的樣式。加載內(nèi)容的時(shí)候,還有漂亮的加載動(dòng)效。大膽的用色,精致的細(xì)節(jié),這個(gè)網(wǎng)站簡(jiǎn)直是高大上的典范啊。

ULTRA-LEAN SIGN-IN OF PULLEY

設(shè)計(jì)這個(gè)網(wǎng)站的團(tuán)隊(duì)曾經(jīng)打造過(guò)著名的創(chuàng)意社區(qū)Big Cartel,而這個(gè)名為Pulley的網(wǎng)站本質(zhì)上是一個(gè)電商APP,所銷(xiāo)售的內(nèi)容是可下載的數(shù)字內(nèi)容。

要下載內(nèi)容,只需要密碼就可以了。基于網(wǎng)頁(yè)、無(wú)需登錄、輸入即可下載,這些設(shè)定降低了成本,減少了摩擦和錯(cuò)誤,也使得體驗(yàn)更到位。
 

PROJECT STORIES OF CRUSH LOVELY

StudioCrush是一個(gè)用來(lái)展示各種項(xiàng)目故事的網(wǎng)站。網(wǎng)站將敘述方式簡(jiǎn)化了下來(lái),每個(gè)項(xiàng)目本質(zhì)上就是從開(kāi)始(項(xiàng)目起源)到結(jié)束(項(xiàng)目交付)的過(guò)程,中間由關(guān)鍵的敘事線索(過(guò)程)橋接起來(lái)。

從諸多案例中挑選了這個(gè)例子,相比于“客觀”,作者更愿意用“野心”來(lái)描述他的起始狀態(tài);作為結(jié)論,沒(méi)有拖沓的視頻和描述,直接上圖讓大家一同來(lái)“欣賞”!就是這么直觀,就是這么任性!撇開(kāi)干癟拖沓的內(nèi)容,加上標(biāo)簽,寫(xiě)點(diǎn)干貨,呈現(xiàn)內(nèi)容,讓故事可愛(ài)起來(lái),這還不夠么?
 

SIDE PROJECTS OF KNOED CREATIVE

這是一個(gè)關(guān)于公司目標(biāo)和員工的頁(yè)面,其中寫(xiě)了他們的使命、愿景和目標(biāo)。但是,不同于其他的類(lèi)似設(shè)計(jì),Knoed Creative通過(guò)這個(gè)“朝九晚五之外”的內(nèi)容模塊展示了員工工作之余的生活和經(jīng)歷,將這個(gè)公司多樣化的一面生動(dòng)地呈現(xiàn)了出來(lái)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔