2015-7-14 博博
藍藍設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
著名的室內(nèi)設(shè)計大師Charles Eames曾說過,“細節(jié)并不只關(guān)乎它們本身,它們還構(gòu)成了設(shè)計?!钡拇_,每一個網(wǎng)頁都是由無數(shù)的細節(jié)構(gòu)成,而其中的內(nèi)容也是同樣由這些細節(jié)連接組織到一起。不論是提供信息服務(wù)的網(wǎng)站,還是APP的官方宣傳頁,任何一個優(yōu)秀的網(wǎng)站都能夠經(jīng)受得起挑剔眼光的洗禮,從圖片到布局,從字體到架構(gòu)。
網(wǎng)頁設(shè)計的細節(jié)至關(guān)重要,因為正是它們給用戶留下好印象,這些細節(jié)支撐起網(wǎng)站的良好體驗,提高易用性。正如同Eames所說,它們成就了設(shè)計,不注意細節(jié)會讓設(shè)計感流失。
優(yōu)秀的網(wǎng)站有著不一樣的亮點,但一樣地專注細節(jié):《這樣才過癮!2014年最佳網(wǎng)站評選結(jié)果出爐》
接下來,我們一同看看這11款設(shè)計驚艷的網(wǎng)站。它們的好設(shè)計源于細節(jié),有的界面雅致,有的交互出彩。深入揣摩這些案例,也許你的下一個網(wǎng)頁設(shè)計作品會非常強大。
Basecamp 是一個基于網(wǎng)頁的項目管理工具。正如同它的介紹,速度和效率是至關(guān)重要的。
這是網(wǎng)站的驗證界面,設(shè)計師巧妙的事先隱藏了確認的按鈕,只有當你輸入了正確的驗證碼之后,OK按鈕才會出現(xiàn)。這種措施不僅提高了網(wǎng)站的性能,還通過讓按鈕從無到有,將“驗證碼正確”的概念具現(xiàn)化,觸動用戶,增加成就感。
在歐洲,在書中使用Colophons(題跋)可以追溯到15世紀的時候(中國就早很多了),不過這個網(wǎng)站是為了將其運用到網(wǎng)站上去。這次,Neoteric Design分享了他們網(wǎng)站的制作筆記——各個部分的功能,從字體軟件到編程語言和內(nèi)容管理系統(tǒng)。如果訪客想知道一個網(wǎng)站是如何構(gòu)建起來的,那么這個帶題跋的筆記可以幫助用戶方便快捷得了解這個網(wǎng)站的構(gòu)建過程,滿足好奇心。
2014年5月去世的先鋒設(shè)計師Massimo Vignelli曾說過,排版的柵格是“書的內(nèi)衣”。其實由此推導(dǎo),柵格系統(tǒng)又何嘗不是“網(wǎng)頁的內(nèi)衣”呢?也正式它的存在,讓網(wǎng)站整飭而干凈。
在Berger & F?hr 為 Boulder當代藝術(shù)博物館的網(wǎng)站進行重新設(shè)計的時候,柵格系統(tǒng)的“內(nèi)衣”作用是如此的鮮明。當你瀏覽網(wǎng)頁的時候,圖片、文字段落、導(dǎo)航的邊緣都隱約看到柵格的痕跡,你會在這里體會到對齊的力量。更重要的是,即使網(wǎng)站隨著屏幕響應(yīng)的時候,柵格所施加的影響依然存在。
不論網(wǎng)頁的內(nèi)容的屬性是啥,使用柵格來嚴格組織內(nèi)容是首要的工作。
越來越多的歐美網(wǎng)站開始在團隊頁面中標注設(shè)計師的家鄉(xiāng),聲明這個站點的“故鄉(xiāng)”。在足球領(lǐng)域,球隊的球員介紹頁面上,大家都喜歡“自豪地介紹球員來自……”,也正是這種“基于位置”的信息強化了整個隊伍的歸屬感和凝聚力。同理,設(shè)計師們的“故鄉(xiāng)”信息也有著同樣的作用。
社交服務(wù)是如此之多,動不動倆服務(wù)還會在圖標上撞個衫啥的,直接導(dǎo)致用戶在分享的時候點錯地方,而在歐美國家,這種情況更加嚴重。好在有TWLOHA,用帶字體樣式的文字LOGO替換圖標,識別度提高了,美觀度也有所保證。
通常情況下,網(wǎng)站都會有個“Contact”頁面,國內(nèi)我們通常稱之為“聯(lián)系我們”。但是MINIMAL設(shè)計師工作室換了個思路,他們將這個常用的詞改成了“Connect”,仿佛在說“來聊聊吧”。這是截然不同的感覺,傳達出他們期待與用戶溝通的強烈欲望。情懷?人性化。文案很重要。
當我們討論登錄/注冊頁面的時候,可以輕松腦補出頁面的造型——其實絕大多少的頁面都差不多,本質(zhì)上也就是個表單。但是有人并不打算隨大流。曾經(jīng)開發(fā)出著名應(yīng)用Draft的Nathan Kontny,他在設(shè)計頁面的時候,將用戶的留言添加到表單右邊,將互動與溝通的氛圍呈現(xiàn)出來,吸引更多的潛在用戶來注冊。
從商業(yè)角度上來看,這個案例給了我們一個經(jīng)驗:不要羞于展示用戶對于產(chǎn)品的贊譽。
在這個名為CreativeMornings的網(wǎng)站中,每個章節(jié)都用不同的色彩標示出來,同作者頭像組合到一起。這種視覺元素貫穿于整個網(wǎng)站,這些色塊會有下拉菜單,并且有著各種不同的邊緣、形狀和好玩的樣式。加載內(nèi)容的時候,還有漂亮的加載動效。大膽的用色,精致的細節(jié),這個網(wǎng)站簡直是高大上的典范啊。
設(shè)計這個網(wǎng)站的團隊曾經(jīng)打造過著名的創(chuàng)意社區(qū)Big Cartel,而這個名為Pulley的網(wǎng)站本質(zhì)上是一個電商APP,所銷售的內(nèi)容是可下載的數(shù)字內(nèi)容。
要下載內(nèi)容,只需要密碼就可以了?;诰W(wǎng)頁、無需登錄、輸入即可下載,這些設(shè)定降低了成本,減少了摩擦和錯誤,也使得體驗更到位。
StudioCrush是一個用來展示各種項目故事的網(wǎng)站。網(wǎng)站將敘述方式簡化了下來,每個項目本質(zhì)上就是從開始(項目起源)到結(jié)束(項目交付)的過程,中間由關(guān)鍵的敘事線索(過程)橋接起來。
從諸多案例中挑選了這個例子,相比于“客觀”,作者更愿意用“野心”來描述他的起始狀態(tài);作為結(jié)論,沒有拖沓的視頻和描述,直接上圖讓大家一同來“欣賞”!就是這么直觀,就是這么任性!撇開干癟拖沓的內(nèi)容,加上標簽,寫點干貨,呈現(xiàn)內(nèi)容,讓故事可愛起來,這還不夠么?
這是一個關(guān)于公司目標和員工的頁面,其中寫了他們的使命、愿景和目標。但是,不同于其他的類似設(shè)計,Knoed Creative通過這個“朝九晚五之外”的內(nèi)容模塊展示了員工工作之余的生活和經(jīng)歷,將這個公司多樣化的一面生動地呈現(xiàn)了出來。
藍藍設(shè)計的小編 http://www.miumiuwan.com