首頁

使用紋理的20個華麗示例

藍藍設計的小編

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

 

These Are Things

50個小時的可用性測試帶給我的啟示

藍藍設計的小編

 

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

1.你不是你的用戶

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

而事實上,多數(shù)用戶在實際上手使用之前,并沒有和產(chǎn)品產(chǎn)生長久的關聯(lián);對于我們來說很顯而易見的東西在用戶看來很可能需要一定的輔助才能理解并正確操作。交互模式是否符合直覺,是否能夠保持足夠的一致性以符合用戶逐漸建立起來的心智模型,用戶界面是否會在必要的環(huán)節(jié)提供足夠有效的輔助引導,這些都是我們在為核心功能打造設計方案的同時必須考慮到的問題。

 

2.導航至首頁

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

3.通過下拉列表選擇國家

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

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

點擊查看原圖

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

視覺設計是為了表達信息

藍藍設計的小編

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

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

下面我們先看一個專題的banner:

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

建立良好的視覺層級

藍藍設計的小編

 

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

一、 視覺層級為什么重要

點擊查看原圖

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

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

平常的力量

藍藍設計的小編

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

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

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

藍藍設計的小編

 

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

點擊查看原圖

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

一點小理論

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

點擊查看原圖

一個有效的情感化設計策略通常包括兩個方面:

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

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

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

藍藍設計的小編

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

 

 

Tapmates

 

Caava Design

 

關于扁平化界面風格的設計美學討論

藍藍設計的小編

 

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

有人說了你怎么這么沒節(jié)操呢,你到底覺得哪種好呢?我要說的是叭,在我看來這個事情里的的確確不應該存在哪個強于哪個的爭議,因為它根本就不是個非黑即白非美即丑涇渭分明的問題;脫離了實際產(chǎn)品的上下文環(huán)境,脫離了產(chǎn)品功能與目標用戶群類型之間的關聯(lián),所謂好與不好的命題壓根就不成立。

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

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

點擊查看原圖

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

藍藍設計的小編

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

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

點擊查看原圖

移動應用的十項設計原則及小提示

藍藍設計的小編

 

移動設備與傳統(tǒng)桌面設備雖然都被成為“計算設備”,但它們之間的差異是顯而易見的:移動設備的屏幕要小很多,無線網(wǎng)絡鏈接方面會有不穩(wěn)定,電池續(xù)航能力較弱,等等。這份“弱點”清單可以列的很長,但如果你因此認為移動設備就是降級版的計算機,那同樣是錯誤的看法。

實際上,從其他一些角度來觀察,移動設備又是比桌面設備更加強大的。智能手機和平板電腦都是更加個人化的設備,它們會一直陪伴在你身邊,讓你隨時隨地都可以接入互聯(lián)網(wǎng)獲取所需的信息;它們身上還有傳統(tǒng)設備所不具備的很酷的功能,包括GPS、數(shù)位羅盤、加速計等等。

所有這些差異都使得移動設備當中的應用程序在界面設計方面存在很多獨到之處。我(英文原文作者)基于在自己的workshop中的工作經(jīng)驗,總結(jié)出了移動應用界面設計的十條原則及小提示,在這里與大家分享,希望能夠幫助那些還不是非常熟悉這個領域的設計師們建立起一套有實踐價值的設計思維框架。

1.設計觀念

從傳統(tǒng)設備轉(zhuǎn)向移動領域,設計師們首先要做的是調(diào)整思維模式和設計觀念。

  • 專注 :移動應用的本質(zhì)目標是幫助人們以最高的效率完成特定的任務。少即是多,你要砍掉的產(chǎn)品功能通常會比你想象的多很多。
  • 獨特:從一開始就要理解你的應用與同類產(chǎn)品相比具有哪些獨到之處,將其體現(xiàn)到產(chǎn)品的整體用戶體驗策略當中,并在交互及視覺設計流程當中著重突出這些賣點。
  • 迷人 :移動設備是相當個人化的工具,人們會在長久的使用過程中逐漸將感情融入到軟硬件當中;應用程序同樣要與用戶在情感層面產(chǎn)生互動,通過各種友好的、有趣的、可信賴的設計與功能讓用戶覺得愛不釋手。
  • 體貼 :不要將注意力過多集中在“開發(fā)”本身上,不要將自己的心智模型以及產(chǎn)品的業(yè)務邏輯作為設計的準繩。如果你確實希望自己的產(chǎn)品能夠被更多用戶所接受,那么必須學會站在他們的角度觀察問題、制定設計決策。

點擊查看原圖

不要用“多多益善”的觀念打造移動應用

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔