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)并開(kāi)始懷念它們。

我(英文原文作者)會(huì)特別在意這些細(xì)節(jié)，因?yàn)樗鼈兛梢杂|發(fā)用戶的情感響應(yīng)。如果運(yùn)用方式得當(dāng)，這些細(xì)節(jié)當(dāng)中的小魔鬼可以幫助我們打造出更具人格的產(chǎn)品，并使用戶在與之進(jìn)行互動(dòng)的過(guò)程中產(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 一書(shū)中，作者Aarron Walter將情感化設(shè)計(jì)與馬斯洛的人類(lèi)需求層次理論聯(lián)系了起來(lái)。正如人類(lèi)的生理、安全、愛(ài)與歸屬、自尊和自我實(shí)現(xiàn)這五個(gè)層次的需求，產(chǎn)品特質(zhì)也可以被劃分為功能性、可依賴性、可用性和愉悅性這四個(gè)從低到高的層面，而情感化設(shè)計(jì)則處于其中最上層的“愉悅性”層面當(dāng)中。

一個(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ì)通過(guò)幾個(gè)案例分析來(lái)感受一下從整體角度持續(xù)使用情感化設(shè)計(jì)理念所帶給產(chǎn)品的“人格魅力”。

親密是愛(ài)情關(guān)系中的溫暖體驗(yàn)，是一種朋友般的親近。由于真正喜歡和對(duì)方在一起，渴望同對(duì)方一道建立更有凝聚力的和諧關(guān)系，希望把自己的生活以坦誠(chéng)、不設(shè)防的方式與對(duì)方分享。伴侶間會(huì)發(fā)展出屬于兩個(gè)人的溝通風(fēng)格，熟悉彼此不完美的個(gè)性。親密令戀人互相關(guān)心，善待對(duì)方，滿足彼此的需要和欲望。親密沒(méi)有激情強(qiáng) 烈，但能促進(jìn)戀人相互親近，讓人感受到人際溫暖。

根據(jù)DailyTech的統(tǒng)計(jì)，到2015年，移動(dòng)互聯(lián)網(wǎng)的用戶數(shù)量將會(huì)超過(guò)桌面用戶。除了智能手機(jī)之外，使用平板電腦甚至是電視機(jī)進(jìn)行上網(wǎng)的用戶也在持續(xù)增加。在這種形勢(shì)下，怎樣讓我們的網(wǎng)站盡量兼容各種類(lèi)型的設(shè)備，并確保優(yōu)良的用戶體驗(yàn)，這將是越來(lái)越重要的問(wèn)題。

通過(guò)響應(yīng)式的設(shè)計(jì)開(kāi)發(fā)方式，我們可以使網(wǎng)站頁(yè)面隨瀏覽設(shè)備的不同而自行響應(yīng)，動(dòng)態(tài)的調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設(shè)備的用戶。

如果你對(duì)響應(yīng)式Web設(shè)計(jì)還不大了解，可以先參考閱讀我們之前的關(guān)于響應(yīng)式設(shè)計(jì)的概念、組成要素及基本實(shí)現(xiàn)思路 方面的文章，全方位預(yù)熱一下。

什么情況下適宜采用響應(yīng)式Web設(shè)計(jì)的方式

當(dāng)客戶提出產(chǎn)品功能移動(dòng)化的需求時(shí)，有一些解決方案可供我們選擇，包括原生客戶端應(yīng)用、Web應(yīng)用等；究竟怎樣的方式更合適，還是取決于具體的需求情況。另外也要考慮網(wǎng)站本身是否需要實(shí)施移動(dòng)化。雖然響應(yīng)式站點(diǎn)并不能算是一種純粹的移動(dòng)化解決方案，但是，在某些情況下，這種方式是非常值得考慮的。

你心里沒(méi)譜

設(shè)計(jì)開(kāi)發(fā)一個(gè)全新的移動(dòng)版本站點(diǎn)或是客戶端應(yīng)用，整個(gè)過(guò)程是有很大挑戰(zhàn)性的。除非產(chǎn)品正式上線，否則你無(wú)法真正了解它是否會(huì)成功。與其單純的為了移動(dòng)化而花費(fèi)資源打造移動(dòng)版本站點(diǎn)或是開(kāi)發(fā)客戶端應(yīng)用，不如先花些心思將原本的網(wǎng)站打造的更具彈性，使其在各種主流移動(dòng)設(shè)備中都擁有盡量?jī)?yōu)秀的用戶體驗(yàn)。

你想節(jié)約成本

要打造響應(yīng)式站點(diǎn)，自然離不開(kāi)有經(jīng)驗(yàn)的交互、視覺(jué)設(shè)計(jì)及前端開(kāi)發(fā)人員。所需的資源，尤其是時(shí)間方面，比起普通網(wǎng)站來(lái)說(shuō)大約增加20%到30%的樣子；但比起單獨(dú)打造移動(dòng)版本的網(wǎng)站，或是設(shè)計(jì)開(kāi)發(fā)客戶端應(yīng)用的成本來(lái)說(shuō)，卻要低很多。從維護(hù)的角度來(lái)說(shuō)，也會(huì)輕松很多。

你希望網(wǎng)站可以兼容未來(lái)的新設(shè)備

所謂的移動(dòng)版本站點(diǎn)，通常是針對(duì)某類(lèi)具體規(guī)格的設(shè)備進(jìn)行單獨(dú)打造的，彈性比較差。新的移動(dòng)設(shè)備層出不窮，傳統(tǒng)的移動(dòng)版本站點(diǎn)需要不斷的進(jìn)行更新維護(hù)，才能盡量保證在新設(shè)備中工作良好。響應(yīng)式設(shè)計(jì)可以根據(jù)設(shè)備瀏覽環(huán)境的具體規(guī)格進(jìn)行判斷，使用不同的呈現(xiàn)方式來(lái)展示內(nèi)容，無(wú)需針對(duì)某種特定的規(guī)格進(jìn)行維護(hù)，適應(yīng)性更好。

無(wú)論是用于注冊(cè)、支付還是聯(lián)絡(luò)，我們總是需要通過(guò)表單來(lái)獲取用戶的信息。不幸的是，在現(xiàn)實(shí)當(dāng)中，總會(huì)有很多訪問(wèn)者一見(jiàn)到表單就會(huì)立刻點(diǎn)擊瀏覽器上的后退按鈕。這里面原因有很多，例如表單篇幅太長(zhǎng)、不大友好、不那么值得信任，或是用戶還沒(méi)真正準(zhǔn)備好進(jìn)行交易等等。

這種情況每發(fā)生一次，我們就失掉了一個(gè)潛在用戶。怎樣將表單設(shè)計(jì)的讓盡量多的訪問(wèn)者更愿意完成填寫(xiě)，這是設(shè)計(jì)師們必須面對(duì)的挑戰(zhàn)。站在用戶的角度，我們可以將問(wèn)題分為四個(gè)方面。

我能得到什么？

一提到“轉(zhuǎn)化”，設(shè)計(jì)師們首先想到的往往是一些相關(guān)操作的細(xì)節(jié)問(wèn)題，包括按鈕的顏色、標(biāo)題的字號(hào)、對(duì)比度、對(duì)其方式等等。當(dāng)然，這些是必須考慮的，但最最首要的問(wèn)題是：作為網(wǎng)站的訪問(wèn)者，我為什么要填寫(xiě)表單？我能得到什么？

訪問(wèn)者不會(huì)簡(jiǎn)單的因?yàn)槟闾岢隽讼嚓P(guān)要求而把自己的個(gè)人信息透露給你；你要讓他們看到這樣做的好處在哪里。不妨把這件事看作一種交易，你的訪問(wèn)者提供他們的名字與郵箱地址，從而換取到一些他們需要的東西，例如享受服務(wù)、免費(fèi)試用軟件、下載PDF文檔等等。

除了讓瀏覽者知道他們能得到什么東西以外，你最好還能告訴他們這東西為什么是他們所需要的。要聚焦在產(chǎn)品的價(jià)值上，如果你能用最簡(jiǎn)單的介紹文字描述出你的產(chǎn)品能幫用戶解決怎樣的問(wèn)題，喚起他們的共鳴，那么即使表單本身稍微復(fù)雜些，他們也會(huì)愿意完成填寫(xiě)；否則，字段最少的表單也不會(huì)引起他們的興趣。

為什么要改版？

隨著科技的發(fā)展，時(shí)代的進(jìn)步，微博用戶的上網(wǎng)設(shè)備也在快速更新。研究一下微博用戶的屏幕分辨率使用數(shù)據(jù)我發(fā)現(xiàn)，屏幕分辨率越來(lái)越高的同時(shí)，伴隨的一個(gè)數(shù)值，也就是顯示器顯示網(wǎng)頁(yè)外的空白面積也越來(lái)越大，如何利用好這部分空間是一個(gè)值得研究的課題。

前期看了一些同類(lèi)產(chǎn)品

Clear的出現(xiàn)引起了大家對(duì)手勢(shì)操作的熱忱, Google新專利采用“連續(xù)手勢(shì)”也讓我們看到了個(gè)性化手勢(shì)的前景。確實(shí)，手勢(shì)操作能夠減少界面元素，提升效率；但其不可見(jiàn)性，抽象性，需記憶性等特點(diǎn)也決定了它的弊端。如何揚(yáng)長(zhǎng)避短，根據(jù)現(xiàn)有手勢(shì)的特點(diǎn)在合適的情境中使用，同時(shí)根據(jù)文化約定、實(shí)物隱喻、表音、表意等發(fā)想創(chuàng)新手勢(shì)，而非一味地追逐跟風(fēng)，值得我們思考。本文結(jié)合了珊璞之前對(duì)客戶端手勢(shì)應(yīng)用的分享以及網(wǎng)上的相關(guān)資料，從手勢(shì)的空間感帶來(lái)的心理感受，手勢(shì)賦予的功能，引導(dǎo)方式，與動(dòng)畫(huà)的配合，創(chuàng)新幾個(gè)角度進(jìn)行了總結(jié)。許多是大家已知的想法，在這里僅做簡(jiǎn)單的梳理；而引導(dǎo)方式、與動(dòng)畫(huà)的配合等，希望大家能有更多的思考，因?yàn)橥ㄟ^(guò)動(dòng)畫(huà)、轉(zhuǎn)場(chǎng)、擬物等方式，可以使注意力與流程更加流暢，同時(shí)貼合現(xiàn)實(shí)世界，從而有助于手勢(shì)的抽象性、需記憶性的克服。閱讀全文

一、空間感帶來(lái)的心理感受