離開交互圈已經(jīng)有段時(shí)間了。但由于博客還在，還是能夠偶爾收到一些郵件，上周有位同學(xué)問我：我在求職，我看到很多招聘說明上需要交互設(shè)計(jì)師編寫界面交互設(shè)計(jì)文檔 ，請問界面交互設(shè)計(jì)文檔是什么文檔？怎么編寫呢

 

所謂DRD即是用來承載交互說明，并交付給前端、測試以及開發(fā)工程師參考的文檔。

 

在項(xiàng)目中，交互設(shè)計(jì)師的主要產(chǎn)出物可能依次是：site map，page flow，wireframes。有的大型項(xiàng)目前期，交互設(shè)計(jì)師有可能還會(huì)產(chǎn)出用戶需求分析文檔（與PD產(chǎn)出的市場需求文檔不一樣的是，URD更多側(cè)重于對目標(biāo)用戶的需求分析）。

 

DRD則很少有人專門撰寫。如果需要對交互設(shè)計(jì)進(jìn)行說明，聰明的交互設(shè)計(jì)師往往會(huì)直接標(biāo)注在線框圖里，或者在項(xiàng)目中不斷和前端工程師和開發(fā)工程師口口相傳，反復(fù)驗(yàn)收，不斷迭代修改來確保所有的交互設(shè)計(jì)意圖最終得以呈現(xiàn)。

二. 為什么要寫？

 

DRD非項(xiàng)目必需環(huán)節(jié)，一般情況下也不會(huì)為交互設(shè)計(jì)師專門留出相應(yīng)的時(shí)間預(yù)估。沒有這份文檔，項(xiàng)目也會(huì)繼續(xù)，但是可能項(xiàng)目會(huì)為此承擔(dān)不必要的溝通成本和時(shí)間成本。嚴(yán)重的話，項(xiàng)目的質(zhì)量也會(huì)受到影響。所以寫與不寫，交互設(shè)計(jì)師需要做把握，時(shí)間被統(tǒng)一包含在“線框圖”環(huán)節(jié)內(nèi)——如果你要寫，請?jiān)谠u估時(shí)預(yù)留1-2天的時(shí)間。

 

那么，結(jié)合我過去的經(jīng)歷，談一下此文檔的必要性。

 

下圖是一個(gè)產(chǎn)品開發(fā)項(xiàng)目基本的流程。

 

敏捷開發(fā)意味著很多不同角色的流程需要并行操作。如果等到產(chǎn)品經(jīng)理的FRD已經(jīng)全部敲定，交互設(shè)計(jì)師再開始去畫線框圖，固然會(huì)減少溝通成本和返工風(fēng)險(xiǎn)，但是同時(shí)意味著交互設(shè)計(jì)師的很多想法不被采納。如果產(chǎn)品經(jīng)理再強(qiáng)一些，他甚至?xí)贔RD里連原始的DEMO也一并繪制出來了，功能性的需求和界面交互的需求有時(shí)無法區(qū)分太清楚——比如他會(huì)在FRD里直接要求每頁條目40條，超過40條即分頁。而交互設(shè)計(jì)師可能會(huì)認(rèn)為像蘑菇街那樣不斷裝載出足夠長的頁面會(huì)更親和……所以，我們希望是和產(chǎn)品經(jīng)理同時(shí)開始工作，在術(shù)業(yè)有專攻的時(shí)候相互補(bǔ)充。

 

同樣，開發(fā)工程師也希望及早介入需求，在FRD并未確認(rèn)的時(shí)候就了解需求，進(jìn)而將商業(yè)需求和功能需求轉(zhuǎn)化為開發(fā)工程師看得明白的開發(fā)需求清單（這個(gè)清單，大部分叫做UC，即USE CASE）,當(dāng)這份清單由工程師需求分析師——在過去，這個(gè)角色被叫簡稱為RA，但是目前已經(jīng)取消此專門的職位，而是由開發(fā)工程師代表擔(dān)綱此環(huán)節(jié)工作，為了便于描述，在此文里，我仍然將做這件事情的人稱為RA——交付給具體的執(zhí)行工程師后，執(zhí)行工程師基本上可以當(dāng)作一條條的checklist開始工作，而不必再思考商業(yè)邏輯和需求。同樣，測試工程師也需要編寫具體的文檔去指導(dǎo)很多測試人員在開發(fā)后測試，這也是基于UC和FRD去撰寫的。

 

“這個(gè)不符合用戶的心理”，“這個(gè)功能打破了我們產(chǎn)品整體的平衡性，放在這里在我看來是不太合理的”…

作為互聯(lián)網(wǎng)行業(yè)里萬千鼠標(biāo)民工中的一員，諸如以上的對話，每天都在我們的生活中不斷演繹著。合理性慢慢的成為了檢驗(yàn)我們專業(yè)技能以及設(shè)計(jì)水平最重要的一種指標(biāo)；誠然，足夠的合理性能夠?yàn)槲覀兯O(shè)計(jì)的產(chǎn)品保駕護(hù)航，能夠給其帶來可預(yù)見性的回報(bào)和收獲，但長此以往，卻很難再出現(xiàn)令我們叫“WOW！！”的產(chǎn)品了。讓我們來看顆栗子~ 

iPhone5自9月13日發(fā)布以來，就受到了前所未有的神吐槽，在這一次，大家都能很明顯的感受到?jīng)]有了喬幫主以后，蘋果不再是創(chuàng)新界的翹楚了。

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

1.你不是你的用戶

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

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

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

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

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

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

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

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

Flickr為用戶準(zhǔn)備了很多有意思的登錄歡迎語，這其實(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)并開始懷念它們。

我(英文原文作者)會(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)系了起來。正如人類的生理、安全、愛與歸屬、自尊和自我實(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ì)方案。

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

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

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

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

如果你對響應(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)化解決方案，但是，在某些情況下，這種方式是非常值得考慮的。

你心里沒譜

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

你想節(jié)約成本

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

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

所謂的移動(dòng)版本站點(diǎn)，通常是針對某類具體規(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)方式來展示內(nèi)容，無需針對某種特定的規(guī)格進(jìn)行維護(hù)，適應(yīng)性更好。

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

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

我能得到什么？

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

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

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

為什么要改版？

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

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