2015-7-14 博博
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專(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)設(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)大。
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)用戶，增加成就感。
在歐洲，在書(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ò)程，滿足好奇心。
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)容是首要的工作。
越來(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)”信息也有著同樣的作用。
社交服務(wù)是如此之多，動(dòng)不動(dòng)倆服務(wù)還會(huì)在圖標(biāo)上撞個(gè)衫啥的，直接導(dǎo)致用戶在分享的時(shí)候點(diǎn)錯(cuò)地方，而在歐美國(guó)家，這種情況更加嚴(yán)重。好在有TWLOHA，用帶字體樣式的文字LOGO替換圖標(biāo)，識(shí)別度提高了，美觀度也有所保證。
通常情況下，網(wǎng)站都會(huì)有個(gè)“Contact”頁(yè)面，國(guó)內(nèi)我們通常稱之為“聯(lián)系我們”。但是MINIMAL設(shè)計(jì)師工作室換了個(gè)思路，他們將這個(gè)常用的詞改成了“Connect”，仿佛在說(shuō)“來(lái)聊聊吧”。這是截然不同的感覺(jué)，傳達(dá)出他們期待與用戶溝通的強(qiáng)烈欲望。情懷？人性化。文案很重要。
當(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ù)。
在這個(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)直是高大上的典范啊。
設(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(wǎng)頁(yè)、無(wú)需登錄、輸入即可下載，這些設(shè)定降低了成本，減少了摩擦和錯(cuò)誤，也使得體驗(yàn)更到位。
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)，這還不夠么？
這是一個(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)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net
