2013-4-12 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源:http://beforweb.com/node/179
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
又是一周過(guò)去,宅的日子越過(guò)越精煉,連續(xù)多日每天讀一本書,到了晚上就覺(jué)得大腦好像變成了一個(gè)卡通形象,就是那種仰面朝天躺在地上四肢無(wú)力動(dòng)彈不得只剩下喘氣的小人兒的樣子。剩下未讀的書不多了,又該補(bǔ)貨了誒。來(lái)看本周的譯文唄,有點(diǎn)長(zhǎng),主要是圖多。
這里進(jìn)入譯文。我(英文原文作者)時(shí)常和其他設(shè)計(jì)師討論到產(chǎn)品愉悅性的話題。在最近的一次聊天中,有人提到這樣一個(gè)有意思的問(wèn)題:
我們可以首先專注于提升產(chǎn)品的愉悅性,然后再考慮可用性等其他方面的問(wèn)題嗎?
這個(gè)問(wèn)題立刻讓我聯(lián)想到“形式追隨功能”這句話,所以我還是傾向于功能與可用性優(yōu)先的方式。
不過(guò)必須承認(rèn),這種通過(guò)理性分析入手的“傳統(tǒng)”設(shè)計(jì)思路或多或少會(huì)讓我們失去一些在創(chuàng)意上實(shí)現(xiàn)突破的機(jī)會(huì)。也許我們可以從“有趣”這個(gè)角度展開(kāi)設(shè)計(jì)工作,首先聚焦于體驗(yàn)的愉悅性,然后再將整個(gè)方案“拉”回到一個(gè)約束框架中,使它最終成為一個(gè)切實(shí)可用的產(chǎn)品?
無(wú)論我們的實(shí)踐方式從哪個(gè)角度出發(fā),有一點(diǎn)是無(wú)疑的:任何一個(gè)成功的設(shè)計(jì)方案都必須以產(chǎn)品功能的可行、可用、可靠為基礎(chǔ)。假設(shè)你已經(jīng)有了一款可用的產(chǎn)品,并且希望為其注入更多能夠讓用戶在情感上為之吸引的元素,那么你應(yīng)該做些什么呢?應(yīng)該從何處入手?下面是我的十個(gè)建議,希望能夠幫你有效的提升網(wǎng)站或應(yīng)用產(chǎn)品的體驗(yàn)愉悅性。
我們都知道第一印象的重要性。精心雕琢的界面可以在最短時(shí)間內(nèi)給用戶帶來(lái)視覺(jué)上的“優(yōu)雅”沖擊。下面這些產(chǎn)品就是通過(guò)出色的視覺(jué)設(shè)計(jì)以及對(duì)細(xì)節(jié)的把握給用戶留下了可持續(xù)的良好印象,從而為長(zhǎng)期的愉悅體驗(yàn)奠定了基礎(chǔ)。
Your Karma是一款移動(dòng)wi-fi設(shè)備,我最近很鐘情于他家的網(wǎng)站。字體的協(xié)調(diào)搭配,柔和的配色,聰明的圖像運(yùn)用,精巧的細(xì)節(jié)動(dòng)效,所有這些要素結(jié)合在一起構(gòu)成了非常優(yōu)雅的用戶界面。
Path的UI在文字、配色、圖形元素等方面幾乎都體現(xiàn)出了像素級(jí)的精準(zhǔn)把握,不僅為用戶呈現(xiàn)了極佳的細(xì)節(jié)表現(xiàn),而且?guī)?lái)了很多具有典范性的使用體驗(yàn)。
Rdio和新版MySpace都采用了扁平化的風(fēng)格,整體形象明亮清晰,配色、字體和圖形元素都非常簡(jiǎn)約精煉。
相關(guān)閱讀:移動(dòng)應(yīng)用的視覺(jué)美學(xué) - 談三款擁有高收入的應(yīng)用產(chǎn)品
例如表單和鏈接附近的小注釋、按鈕標(biāo)題、404頁(yè)面注解等等,通常都是在開(kāi)發(fā)流程后期匆匆完成的。實(shí)際上,這類文本還是蠻重要的,它們可以在交互流程的細(xì)節(jié)當(dāng)中輔助用戶更好的完成任務(wù),而且,如果你足夠用心,也可以在這些細(xì)微之處融入一些個(gè)性化的能夠提升交互愉悅性的元素。
很多網(wǎng)站都會(huì)在文本信息的個(gè)人化方面下功夫,F(xiàn)lickr在這方面做的很有示范性,非常經(jīng)典的例如用戶每次訪問(wèn)都會(huì)看到不同語(yǔ)言的歡迎辭,讓人感覺(jué)很詼諧甚至是調(diào)皮。
Clearleft將其404頁(yè)面看做展示網(wǎng)站人格的機(jī)會(huì),通過(guò)繞口令一樣幽默略顯惡搞的文案讓用戶感覺(jué)到網(wǎng)站背后真實(shí)人類的存在,在出現(xiàn)問(wèn)題的狀況下盡可能降低用戶的負(fù)面感受。
Funny or Die在郵件分享表單的錯(cuò)誤提示中同樣使用了好玩、自嘲風(fēng)格的文案,和整個(gè)網(wǎng)站的主題個(gè)性保持一致。
在現(xiàn)實(shí)生活中,我們或多或少都體會(huì)過(guò)人與無(wú)生命物體之間的情感關(guān)聯(lián),譬如你可能會(huì)給自己的車起個(gè)昵稱,或是喜歡把前照燈和保險(xiǎn)杠看做是一張笑臉。這類事情想起來(lái)是蠻怪的,不過(guò)人類就是這樣一種樂(lè)于建立“關(guān)系”的情感化的生物。
在產(chǎn)品中融入個(gè)性化的元素,可以有效的填補(bǔ)人與機(jī)器之間的溝壑,使用戶在更多時(shí)候處于一種積極和正面的情感狀態(tài)下,提升產(chǎn)品體驗(yàn)的愉悅性。
提到MailChimp,我們幾乎都會(huì)想到他們的吉祥物Freddie猴子。正是這個(gè)吉祥物和相關(guān)的元素為MailChimp帶來(lái)了一種讓人覺(jué)得輕松愉悅的個(gè)性。
矢量插畫風(fēng)格的卡通人物、明亮活潑的配色、童稚風(fēng)格的字體,這些遍布全站的個(gè)性化元素幫助Gugafit塑造出一種溫暖、健康、充滿童趣的產(chǎn)品個(gè)性。
推薦閱讀:為產(chǎn)品賦予人格 - 情感化設(shè)計(jì)的組成要素及實(shí)踐案例
我們?cè)诂F(xiàn)實(shí)生活中按動(dòng)燈的開(kāi)關(guān)時(shí),可以感受到真實(shí)的、能讓人產(chǎn)生滿足感的觸感,這種觸感會(huì)為我們這些“用戶”提供反饋,讓我們知道交互行為已經(jīng)完成。
當(dāng)我們與數(shù)碼世界及軟件界面進(jìn)行交互時(shí),這種能夠讓人了解到交互成功完成的反饋則變得尤為重要。由于這些設(shè)備通常無(wú)法提供真實(shí)的觸感反饋,所以我們?cè)诟鄷r(shí)候所能依賴的就是清晰明確的視覺(jué)反饋形式。
下面這些例子中所展示的動(dòng)畫效果在提供視覺(jué)反饋和增強(qiáng)體驗(yàn)愉悅性這兩方面的表現(xiàn)都很不錯(cuò)。
我個(gè)人最喜歡的動(dòng)效來(lái)自于iPhone郵件應(yīng)用中的下拉刷新,首先,它是具有明確的功能性的,用戶可以接收到“刷新正在進(jìn)行當(dāng)中”的反饋信息;同時(shí),它也很有意思,對(duì)真實(shí)世界當(dāng)中的拉伸效果模擬的很到位,我總是喜歡翻來(lái)覆去的拉著玩兒。
如果不進(jìn)行任何處理,網(wǎng)頁(yè)中錨點(diǎn)之間的跳轉(zhuǎn)都是在一瞬間很突兀的完成的,瀏覽者會(huì)感到很突然,視覺(jué)焦點(diǎn)難以很快的適應(yīng)新內(nèi)容。借助一些簡(jiǎn)單的JavaScritp,我們可以使這類跳轉(zhuǎn)變的更平滑順暢,避免用戶失去方向感。下面的截圖來(lái)自我的個(gè)人站點(diǎn)。
例如Nike和Burton網(wǎng)站當(dāng)中的下拉菜單可以通過(guò)動(dòng)畫效果真正實(shí)現(xiàn)“下拉“,而非突然呈現(xiàn);即確保功能的實(shí)現(xiàn),也提升了界面交互操作過(guò)程中的順暢體驗(yàn)。
我們通常所說(shuō)的“人機(jī)交互”一般會(huì)涉及到鍵盤、鼠標(biāo)或觸屏設(shè)備。特別是受到如今多點(diǎn)觸屏設(shè)備手勢(shì)操作的啟發(fā),在傳統(tǒng)桌面端環(huán)境中,圍繞著鼠標(biāo)、鍵盤的操作特性,打造獨(dú)特、有趣的交互效果——如果運(yùn)用得當(dāng),這也是提升產(chǎn)品體驗(yàn)愉悅性的良好方式。
打開(kāi)todaythe12.com,你會(huì)發(fā)現(xiàn)使用鼠標(biāo)與網(wǎng)頁(yè)交互也是一件很有意思的事情。他們確實(shí)將很多很棒的創(chuàng)意融入到了頁(yè)面的交互體驗(yàn)中,特別是在Projects部分,鼠標(biāo)懸停在某張圖片上所觸發(fā)的動(dòng)效非常真實(shí)自然,而且充滿觸感。
Ben The Bodyguard將引人入勝的故事情節(jié)與簡(jiǎn)單卻精彩的滾屏交互方式良好的整合在一起,帶領(lǐng)用戶跟隨保鏢Ben在夜色中穿行在街道上,通過(guò)這種互動(dòng)電影般的方式牢牢的抓住用戶的注意力,有效的傳遞了產(chǎn)品信息。
“視差”效果結(jié)合了頁(yè)面自然滾動(dòng)與JavaScript定位技術(shù),是目前比較流行的一種設(shè)計(jì)趨勢(shì)。越來(lái)越多的網(wǎng)站,特別是單頁(yè)站點(diǎn)開(kāi)始使用這種技術(shù),因?yàn)樗_實(shí)是一種在視覺(jué)上很逼真且具有強(qiáng)烈吸引力的方式。Adidas滑雪板的官方頁(yè)面就是這方面的一個(gè)絕佳案例。
設(shè)計(jì)中的幽默元素是一種淡化人機(jī)界限、引發(fā)正面響應(yīng)的有效方式。幽默,不僅能在人與人的實(shí)際交流過(guò)程中起到融化堅(jiān)冰的作用,它同樣可以使軟件界面更加親切友好。
每次你登錄MailChimp的時(shí)候,右上角的吉祥物Freddie都會(huì)隨機(jī)的叨咕一些東西,例如笑話、歌詞或是指向某段視頻的鏈接。
Envy實(shí)驗(yàn)室的“關(guān)于我們”頁(yè)面使用帶有搞笑注釋的照片對(duì)他們的設(shè)計(jì)師與開(kāi)發(fā)人員進(jìn)行了自嘲般的調(diào)侃。這種幽默可以有效的拉近瀏覽者與網(wǎng)站背后那些真實(shí)的人之間的距離。
在表單驗(yàn)證失敗這樣的環(huán)節(jié)中,幽默元素同樣可以發(fā)揮它的正面作用。當(dāng)你在Yahoo注冊(cè)時(shí),如果為生日選擇了未來(lái)的某個(gè)年份,那么系統(tǒng)真的會(huì)在驗(yàn)證信息中問(wèn)你是否來(lái)自未來(lái)。(之前還在微博上吐過(guò)Yahoo注冊(cè)的槽,因?yàn)槊鼙?wèn)題要求我童年最好的朋友的姓氏必須是兩個(gè)字...譯者C7210注)
又稱“擬物化”,在二維的UI環(huán)境中使用現(xiàn)實(shí)世界當(dāng)中的物體作為隱喻,使信息與功能更易識(shí)別易理解。這種做法在觸屏移動(dòng)平臺(tái)當(dāng)中較為盛行,用戶可以通過(guò)各種手勢(shì)與目標(biāo)對(duì)象直接交互。
雖然目前市面上對(duì)今蘋果在擬物化方面的做法有不少負(fù)面的聲音,不過(guò)不可否認(rèn)的是,對(duì)于某些類型的產(chǎn)品,恰當(dāng)?shù)臄M物化設(shè)計(jì)風(fēng)格確實(shí)可以造就更易懂易用、更生動(dòng)愉悅的體驗(yàn)。
在閱讀類的應(yīng)用中,翻頁(yè)動(dòng)效變的越來(lái)越常見(jiàn)。其實(shí),在軟件界面中,設(shè)計(jì)師確實(shí)可以使用箭頭或按鈕一類更“數(shù)碼化”的方式來(lái)實(shí)現(xiàn)瀏覽,不過(guò)卷邊的書頁(yè)以及左右滑動(dòng)的手勢(shì)更能讓用戶聯(lián)想到現(xiàn)實(shí)當(dāng)中翻書的感覺(jué),使交互操作更加有趣和吸引人。
很多人指責(zé)蘋果在其應(yīng)用當(dāng)中使用了太多沒(méi)有必要的擬物化設(shè)計(jì),這確實(shí)是個(gè)有爭(zhēng)議的話題,不過(guò)版的播客應(yīng)用同樣屬于此類,例如模擬的膠片盤這樣的界面元素從功能角度講沒(méi)什么實(shí)際意義,但它確實(shí)給整個(gè)產(chǎn)品體驗(yàn)增加了一層與現(xiàn)實(shí)世界的情感關(guān)聯(lián),讓用戶覺(jué)得這不只是一款冷冰冰的數(shù)字程序。
相關(guān)閱讀:關(guān)于扁平化界面風(fēng)格的設(shè)計(jì)美學(xué)討論
誰(shuí)不喜歡驚喜呢?禮物和彩蛋一類的概念未必只有對(duì)兒童或線下情境適用。有些網(wǎng)站在界面中的一些小角落隱藏著小驚喜,雖然在功能方面沒(méi)有什么實(shí)際作用,卻能有效的增添一份樂(lè)趣和愉悅,甚至引發(fā)用戶的好奇心,增強(qiáng)他們的探索欲望。
谷歌月球剛剛發(fā)布時(shí)曾經(jīng)有一個(gè)彩蛋,當(dāng)你持續(xù)放大直到相當(dāng)接近月球表面時(shí),你會(huì)看到地圖被渲染成了奶酪的外觀。
在Supereight工作室的“關(guān)于我們”頁(yè)面中有一個(gè)藏的很深的彩蛋,即使你知道它在哪里也未必能看清——在點(diǎn)擊Matt Hamm的照片的一瞬間,照片會(huì)切換為星戰(zhàn)當(dāng)中的機(jī)器人R2D2,只是一眨眼的功夫(鼠標(biāo)右鍵單擊會(huì)使其持續(xù)顯示)。完全沒(méi)有任何功能性的一件事,不過(guò)一旦你發(fā)現(xiàn)了這個(gè)小彩蛋,就會(huì)覺(jué)得在這個(gè)平白無(wú)奇的介紹頁(yè)面背后有真實(shí)的人類在用心,哪怕只是和你開(kāi)一個(gè)無(wú)害的小玩笑。
在iBooks的書庫(kù)界面中,持續(xù)下拉整個(gè)書架,就會(huì)看到搜索欄之上還隱藏著一個(gè)蘋果的logo。翻翻這個(gè)帖子,你會(huì)看到當(dāng)人們剛剛發(fā)現(xiàn)這個(gè)小細(xì)節(jié)的時(shí)候是怎樣開(kāi)心的一起討論的;雖然在功能上沒(méi)有實(shí)際意義,但這種細(xì)節(jié)當(dāng)中的用心顯然可以為產(chǎn)品帶來(lái)另外一個(gè)層面的收獲。
隱形不只是超級(jí)英雄才有的能力。俗話說(shuō),好的設(shè)計(jì)應(yīng)該像空氣一樣;只有不好的設(shè)計(jì)才會(huì)被注意到。這句話不僅針對(duì)界面設(shè)計(jì),整個(gè)產(chǎn)品的交互體驗(yàn)也是如此。
與其他流行的文字處理軟件不同,IA Writer的界面極其簡(jiǎn)單整潔,讓用戶可以全身心的進(jìn)入工作狀態(tài),將注意力聚焦在文字處理本身,不被任何不必要的功能和界面元素所干擾。
近年來(lái),移動(dòng)設(shè)備的爆發(fā)式增長(zhǎng)使得設(shè)計(jì)師必須越來(lái)越多的考慮到用戶使用產(chǎn)品時(shí)的設(shè)備環(huán)境。多設(shè)備生態(tài)圈的局面是挑戰(zhàn),同時(shí)也是我們打造跨平臺(tái)愉悅體驗(yàn)的機(jī)遇。
Facebook的Web端頁(yè)面和移動(dòng)應(yīng)用配合的非常默契,使用戶可以隨時(shí)隨地通過(guò)不同的設(shè)備保持信息同步。我個(gè)人覺(jué)得,他們的移動(dòng)應(yīng)用比起Web頁(yè)面來(lái)說(shuō),可以帶給用戶更聚焦化的產(chǎn)品體驗(yàn)。
Rdio的桌面端與移動(dòng)端體驗(yàn)?zāi)J奖容^相似,但在功能和UI設(shè)計(jì)方面針對(duì)不同平臺(tái)環(huán)境進(jìn)行了非常細(xì)心的處理,用戶在不同設(shè)備和不同使用情境中都可以得到最優(yōu)體驗(yàn)。
值得一提的是,當(dāng)移動(dòng)端應(yīng)用處于無(wú)網(wǎng)絡(luò)鏈接的狀態(tài)時(shí),唯一的警示方式就是將原本是藍(lán)色的導(dǎo)航欄變?yōu)榛疑?,?jiǎn)單易懂,沒(méi)有任何模態(tài)化的突兀元素。
時(shí)代雜志在線版是響應(yīng)式設(shè)計(jì)的優(yōu)秀范例之一。通過(guò)這種技術(shù),他們的網(wǎng)站在導(dǎo)航、內(nèi)容布局等方面可以針對(duì)不同尺寸的設(shè)備進(jìn)行相應(yīng)的調(diào)整,使單一的網(wǎng)站可以在不同平臺(tái)上實(shí)現(xiàn)最優(yōu)的體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com