首頁(yè)

26個(gè)清爽的藍(lán)色調(diào)網(wǎng)頁(yè)設(shè)計(jì)作品欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

作為最冷的色調(diào),藍(lán)色是設(shè)計(jì)師使用最多的顏色之一。藍(lán)色表現(xiàn)出一種沉穩(wěn)、冷靜、理智、安詳與廣闊,常用在強(qiáng)調(diào)科技,效率的商品或企業(yè)形象。今天這篇文章收集了26個(gè)清爽的藍(lán)色風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)作品分享給大家,一起欣賞。

IT Asia

 

Skyboat

使用紋理的20個(gè)華麗示例

藍(lán)藍(lán)設(shè)計(jì)的小編

紋理的使用非常廣泛:網(wǎng)站,橫幅,LOGO以及名片等很多場(chǎng)合都會(huì)使用。使用紋理的最大好處是能夠幫助設(shè)計(jì)師節(jié)省大量的時(shí)間,不需要自己去制作圖形。同時(shí),紋理能夠讓你的設(shè)計(jì)項(xiàng)目更有趣,更有個(gè)性。下面是20個(gè)使用紋理的華麗的網(wǎng)站實(shí)例。

 

These Are Things

50個(gè)小時(shí)的可用性測(cè)試帶給我的啟示

藍(lán)藍(lán)設(shè)計(jì)的小編

 

2012年里,我(英文原文作者)在TH_NK 里大約花費(fèi)了50個(gè)小時(shí)用于可用性測(cè)試,其余的時(shí)間則主要用來(lái)進(jìn)行實(shí)際的設(shè)計(jì)工作,或是與客戶、開發(fā)者、分析人員等進(jìn)行溝通。在這些可用性測(cè)試當(dāng)中,經(jīng)過對(duì)被測(cè)者行為的觀察以及與他們面對(duì)面的交流,我對(duì)一些一直以來(lái)雖有所了解、但在實(shí)際工作中卻時(shí)常會(huì)忽視掉的設(shè)計(jì)原則有了更加貼近實(shí)踐的認(rèn)知,另外也發(fā)現(xiàn)了一些從前沒有想到過的問題。時(shí)值歲末,我將這些經(jīng)過實(shí)踐驗(yàn)證的設(shè)計(jì)要點(diǎn)作以小結(jié)并分享給各位,希望能夠?yàn)榇蠡飦?lái)年的工作帶來(lái)一定參考和借鑒的價(jià)值。

1.你不是你的用戶

捫心自問,我們真的很容易忘記一件重要的事情:用戶并不會(huì)按照我們?cè)O(shè)想的方式去行事。作為產(chǎn)品和設(shè)計(jì)方面的從業(yè)者,我們對(duì)自己的產(chǎn)品和服務(wù)太了如指掌了,對(duì)產(chǎn)品的功能邏輯及設(shè)計(jì)方案太心知肚明了;即使是作為第三方咨詢顧問一類的角色,你也很容易把事情考慮的過于理所當(dāng)然,認(rèn)為“外界”的人能非常清楚的理解你所要表達(dá)的東西。

而事實(shí)上,多數(shù)用戶在實(shí)際上手使用之前,并沒有和產(chǎn)品產(chǎn)生長(zhǎng)久的關(guān)聯(lián);對(duì)于我們來(lái)說(shuō)很顯而易見的東西在用戶看來(lái)很可能需要一定的輔助才能理解并正確操作。交互模式是否符合直覺,是否能夠保持足夠的一致性以符合用戶逐漸建立起來(lái)的心智模型,用戶界面是否會(huì)在必要的環(huán)節(jié)提供足夠有效的輔助引導(dǎo),這些都是我們?cè)跒楹诵墓δ艽蛟煸O(shè)計(jì)方案的同時(shí)必須考慮到的問題。

 

2.導(dǎo)航至首頁(yè)

在很多場(chǎng)可用性測(cè)試當(dāng)中,我們都觀察到,其實(shí)會(huì)通過點(diǎn)擊頁(yè)頭logo回到首頁(yè)的被測(cè)者很少;多數(shù)人都試圖通過點(diǎn)擊瀏覽器上的后退按鈕來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)。雖然對(duì)于設(shè)計(jì)師來(lái)說(shuō),將logo鏈接至網(wǎng)站首頁(yè)的做法是一種早已被普遍接受的規(guī)范,但事實(shí)上普通用戶對(duì)這一點(diǎn)的認(rèn)知似乎并不是那么的根深蒂固。

3.通過下拉列表選擇國(guó)家

我們?cè)?jīng)對(duì)一個(gè)面向全球的在線零售網(wǎng)站的支付環(huán)節(jié)進(jìn)行過可用性測(cè)試,從中我們發(fā)現(xiàn),在選擇國(guó)家的時(shí)候,很少有用戶懂得通過首字母快捷鍵來(lái)快速定位國(guó)家選項(xiàng)在下拉列表當(dāng)中的位置,然后通過上下箭頭按鍵進(jìn)行調(diào)整并敲擊回車或空格鍵來(lái)完成選擇。絕大多數(shù)的用戶仍然是使用鼠標(biāo)將列表點(diǎn)開,上下尋找并點(diǎn)擊選取。

其實(shí)下拉列表易用性的問題(特別是那些所包含的選項(xiàng)超過了7個(gè)的列表)早就引發(fā)過廣泛的爭(zhēng)論,使用快捷鍵進(jìn)行操作的方案也是為了解決這方面的問題而孕育而生的,但在現(xiàn)實(shí)當(dāng)中我們?nèi)匀话l(fā)現(xiàn)有那么多的用戶實(shí)際上并不了解這種重要的導(dǎo)航操作。

點(diǎn)擊查看原圖

Christian Holst在重新設(shè)計(jì)國(guó)家列表 一文中介紹過一種蠻有意思的解決方案,雖然我們還沒有對(duì)這種方案進(jìn)行過量化的測(cè)試,不過至少它看上去確實(shí)比傳統(tǒng)的下拉列表方式要好用。

視覺設(shè)計(jì)是為了表達(dá)信息

藍(lán)藍(lán)設(shè)計(jì)的小編

在日常工作中,我們經(jīng)常會(huì)遇到一些設(shè)計(jì)的很”漂亮”的圖片不被用戶認(rèn)可,點(diǎn)擊率很低,這時(shí)候我們會(huì)暗地里抱怨,可卻沒明白問題究竟出在哪?

網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)究竟有啥區(qū)別,我們主觀的為頁(yè)面添加元素的時(shí)候是否有章可循,博主以前曾是一名視覺設(shè)計(jì)菜鳥,以自己的切身體會(huì)談?wù)勗赪eb頁(yè)面設(shè)計(jì)中的一些體會(huì)。

下面我們先看一個(gè)專題的banner:

第一眼看上去,畫面感好像還行,但細(xì)看后會(huì)發(fā)現(xiàn)整個(gè)畫面沒有一個(gè)視覺中心,這張圖片究竟想表達(dá)什么也沒有說(shuō)清楚,看看上面的元素:女人,模特架,燈光,展廳,衣服。好像表達(dá)了很多,其實(shí)除了設(shè)計(jì)師本人知道這是衣服與配件專題的banner,其他人都一頭霧水。

建立良好的視覺層級(jí)

藍(lán)藍(lán)設(shè)計(jì)的小編

 

隨著互聯(lián)網(wǎng)信息爆炸式增長(zhǎng),用戶瀏覽單個(gè)網(wǎng)頁(yè)時(shí),并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看,為什么?

一、 視覺層級(jí)為什么重要

點(diǎn)擊查看原圖

左側(cè)是設(shè)計(jì)師期望用戶的瀏覽方式,右側(cè)為用戶實(shí)際的瀏覽方式—摘自《Don’t make me think》

用戶來(lái)到一個(gè)網(wǎng)站有他自己特定的目標(biāo),如閱讀新聞、購(gòu)物、查看新消息,然而信息量太大,逐一查看需要大量時(shí)間,這就要求網(wǎng)站能抓住主流用戶特征,將重點(diǎn)推送給他,用戶找到自己的目標(biāo)或感興趣的點(diǎn),才有可能繼續(xù)瀏覽或產(chǎn)生下一步動(dòng)作,否則就會(huì)離開。

平常的力量

藍(lán)藍(lán)設(shè)計(jì)的小編

一本好書,跟一款好的產(chǎn)品類似,要有一種“代入”的力量。能夠讓用戶跟著你設(shè)定的邏輯一路走下去,一種心無(wú)旁騖的沉靜。每個(gè)章節(jié),每個(gè)功能模塊,都如同空氣,似有如無(wú),但是又讓人欲罷不能。平淡無(wú)奇的呈現(xiàn)反而最有殺傷力,柴姑娘的《看見》就是這樣,真實(shí),自有萬(wàn)鈞之力。

有的時(shí)候,我常常無(wú)法進(jìn)入狀態(tài),這個(gè)時(shí)候我會(huì)選擇看書。一本好書有一種力量,一種代入感的力量,會(huì)讓你隨著做著的邏輯一路陷入進(jìn)去,慢慢的將內(nèi)心的浮躁都洗去,讓你沉靜下來(lái),然后整個(gè)人也跟著沉了下來(lái)。

為產(chǎn)品賦予人格 - 情感化設(shè)計(jì)的組成要素及實(shí)踐案例

藍(lán)藍(lán)設(shè)計(jì)的小編

 

Flickr為用戶準(zhǔn)備了很多有意思的登錄歡迎語(yǔ),這其實(shí)是一個(gè)容易被忽略的細(xì)節(jié),但Flickr的整體設(shè)計(jì)風(fēng)格與產(chǎn)品氣質(zhì)也正是由許許多多這樣的細(xì)節(jié)構(gòu)成的。也許,只有當(dāng)這些細(xì)節(jié)從產(chǎn)品中消失的時(shí)候,我們才會(huì)發(fā)現(xiàn)并開始懷念它們。

點(diǎn)擊查看原圖

我(英文原文作者)會(huì)特別在意這些細(xì)節(jié),因?yàn)樗鼈兛梢杂|發(fā)用戶的情感響應(yīng)。如果運(yùn)用方式得當(dāng),這些細(xì)節(jié)當(dāng)中的小魔鬼可以幫助我們打造出更具人格的產(chǎn)品,并使用戶在與之進(jìn)行互動(dòng)的過程中產(chǎn)生積極的情感響應(yīng);而這種積極的態(tài)度會(huì)有效的促使用戶主動(dòng)傳播和擁護(hù)你的產(chǎn)品。這種在人格層面與用戶建立關(guān)聯(lián)的設(shè)計(jì)思路也被稱作“情感化設(shè)計(jì)”。

一點(diǎn)小理論

“情感化設(shè)計(jì)(Emotional Design)”一詞由Donald Norman在其同名著作 當(dāng)中提出。而在Designing for Emotion 一書中,作者Aarron Walter將情感化設(shè)計(jì)與馬斯洛的人類需求層次理論聯(lián)系了起來(lái)。正如人類的生理、安全、愛與歸屬、自尊和自我實(shí)現(xiàn)這五個(gè)層次的需求,產(chǎn)品特質(zhì)也可以被劃分為功能性、可依賴性、可用性和愉悅性這四個(gè)從低到高的層面,而情感化設(shè)計(jì)則處于其中最上層的“愉悅性”層面當(dāng)中。

點(diǎn)擊查看原圖

一個(gè)有效的情感化設(shè)計(jì)策略通常包括兩個(gè)方面:

  1. 你創(chuàng)造出了獨(dú)特并且優(yōu)秀的風(fēng)格理念,令用戶產(chǎn)生了積極響應(yīng)。
  2. 你持續(xù)的使用該理念打造出一整套具有人格層面的設(shè)計(jì)方案。

接下來(lái),我們將一起了解一下情感化設(shè)計(jì)的組成要素及相關(guān)策略,看一看有哪些產(chǎn)品在這些方面做的比較有代表性;另外,我們還會(huì)通過幾個(gè)案例分析來(lái)感受一下從整體角度持續(xù)使用情感化設(shè)計(jì)理念所帶給產(chǎn)品的“人格魅力”。

簡(jiǎn)單之美:極簡(jiǎn)主義風(fēng)格的網(wǎng)站作品

藍(lán)藍(lán)設(shè)計(jì)的小編

在決定網(wǎng)站的布局之前,有很多重要的事情需要考慮。顏色、風(fēng)格和可用性是網(wǎng)站布局的核心因素,是網(wǎng)站是否成功的關(guān)鍵。多年以來(lái),我們看到很多內(nèi)容充實(shí),色彩豐富的網(wǎng)站作品,但最近幾年極簡(jiǎn)主義風(fēng)格(一種設(shè)計(jì)風(fēng)格,感官上簡(jiǎn)約整潔,品味和思想上更為優(yōu)雅)的設(shè)計(jì)越來(lái)越流行,人們認(rèn)識(shí)到簡(jiǎn)潔干凈的網(wǎng)站布局能夠更加有效的突出網(wǎng)站的主題內(nèi)容。

 

 

Tapmates

 

Caava Design

 

關(guān)于扁平化界面風(fēng)格的設(shè)計(jì)美學(xué)討論

藍(lán)藍(lán)設(shè)計(jì)的小編

 

我個(gè)人對(duì)這方面的話題是蠻關(guān)注的,偶爾在微博 上弱弱的念叨兩句,也會(huì)有不少朋友來(lái)發(fā)表各自的看法,確實(shí)是大家都蠻關(guān)心的設(shè)計(jì)問題。另外最近看到不少文章觀點(diǎn)也都是圍繞這些展開的,其中有些比較公允務(wù)實(shí),有些則比較偏頗;所謂偏頗,也就是片面表達(dá)某種風(fēng)格一定比某種風(fēng)格更好,以及好在哪里。說(shuō)真的,都有一定的道理,都能看出發(fā)表論調(diào)的設(shè)計(jì)師的思考和激情。

有人說(shuō)了你怎么這么沒節(jié)操呢,你到底覺得哪種好呢?我要說(shuō)的是叭,在我看來(lái)這個(gè)事情里的的確確不應(yīng)該存在哪個(gè)強(qiáng)于哪個(gè)的爭(zhēng)議,因?yàn)樗揪筒皇莻€(gè)非黑即白非美即丑涇渭分明的問題;脫離了實(shí)際產(chǎn)品的上下文環(huán)境,脫離了產(chǎn)品功能與目標(biāo)用戶群類型之間的關(guān)聯(lián),所謂好與不好的命題壓根就不成立。

說(shuō)的具體些,遠(yuǎn)的不講,單說(shuō)Beforweb 這邊的視覺風(fēng)格,除了每篇文章的圖標(biāo)以外,可以說(shuō)是徹徹底底的扁平化了(當(dāng)然,細(xì)心的朋友可以在側(cè)邊欄標(biāo)題背景底部發(fā)現(xiàn)類似陰影效果的1像素邊框,這個(gè)不算數(shù)...),但如果有人說(shuō)我是扁平風(fēng)格的衛(wèi)道者的話,我會(huì)很不開心,因?yàn)槲抑皇窃谧约河X得合適的地方使用這種風(fēng)格而已。我喜歡iOS里很多擬物擬真風(fēng)格的界面,最典型的包括語(yǔ)音備忘錄、iBooks、iPad里的日歷等等,它們的界面讓我覺得親切自然,讓我可以在冰冷的電子設(shè)備當(dāng)中找到現(xiàn)實(shí)生活的真實(shí)感,就這么簡(jiǎn)單。

下面這些截圖來(lái)自我平常自?shī)首詷窌r(shí)會(huì)用到的一些音樂方面的iOS或OS X應(yīng)用。它們的功能的確非常棒,我著實(shí)在這些東西上花掉不少錢,但如果它們的界面沒有采用如此逼真的擬物化設(shè)計(jì),如果他們只是干巴巴的功能和數(shù)據(jù)陳列或是Metro風(fēng),我是絕不會(huì)在它們身上花半毛錢的。

點(diǎn)擊查看原圖

怎樣為網(wǎng)站創(chuàng)建風(fēng)格指南(style guide)

藍(lán)藍(lán)設(shè)計(jì)的小編

什么是風(fēng)格指南?簡(jiǎn)單的說(shuō),就是一份告訴你如何講故事的文檔。它確立了一些標(biāo)準(zhǔn),例如怎樣撰寫文案、怎樣排版、怎樣打造視覺元素和交互方式等等。風(fēng)格指南源自于印刷領(lǐng)域,例如報(bào)刊(看看衛(wèi)報(bào)的風(fēng)格指南 );在Web領(lǐng)域,它同樣體現(xiàn)出了巨大的價(jià)值。

無(wú)論是傳統(tǒng)印刷,還是互聯(lián)網(wǎng),最關(guān)鍵的都是“內(nèi)容”。風(fēng)格指南的最終目標(biāo)就是讓內(nèi)容以清晰并且一致的視覺風(fēng)格呈現(xiàn)出來(lái)。BBC的全球體驗(yàn)語(yǔ)言 (Global Experience Language,GEL)就是網(wǎng)站風(fēng)格指南的絕佳范例。不妨通過頁(yè)面右側(cè)的“Download GEL Web Styleguide”下載一份PDF文檔來(lái)稍作了解先。

點(diǎn)擊查看原圖

日歷

鏈接

個(gè)人資料

存檔