講到移動(dòng)設(shè)備的轉(zhuǎn)場(chǎng)設(shè)計(jì)，我們先來(lái)看看移動(dòng)設(shè)備。 移動(dòng)設(shè)備有三個(gè)主要的特點(diǎn)：

1. 屏幕小，相對(duì)于普通的PC來(lái)看移動(dòng)設(shè)備的屏幕相對(duì)要小很多。

2. 使用環(huán)境多變，由于移動(dòng)設(shè)備便攜的特點(diǎn)我們會(huì)在各種環(huán)境中使用。

3. 由于屏幕小一次展示的內(nèi)容少加上各種不穩(wěn)定操作環(huán)境，軟件上有簡(jiǎn)單易學(xué)易于操作的特性

回到正題來(lái)看轉(zhuǎn)場(chǎng) 說(shuō)到“轉(zhuǎn)場(chǎng)”一般都會(huì)想到電影和PPT里面的轉(zhuǎn)場(chǎng)，

下面來(lái)看轉(zhuǎn)場(chǎng)在這兩個(gè)領(lǐng)域的定位和作用

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

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

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

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

用戶(hù)時(shí)間有限加上互聯(lián)網(wǎng)信息量巨大，這兩項(xiàng)原因正是考驗(yàn)視覺(jué)設(shè)計(jì)師要建立良好的視覺(jué)層級(jí)呈現(xiàn)給用戶(hù)，幫助用戶(hù)快速找到目標(biāo)的功力。

總結(jié)一下，建立有效的視覺(jué)層級(jí)主要從以下四個(gè)方面著手：

1、簡(jiǎn)約： 有選擇的展現(xiàn)信息，讓用戶(hù)在有限的信息中發(fā)現(xiàn)重點(diǎn)

2、組織： 預(yù)先對(duì)信息進(jìn)行科學(xué)的分類(lèi)，整理好優(yōu)先級(jí)，可以得到更好的傳播效果

3、呈現(xiàn)： 多種表現(xiàn)方法結(jié)合，呈現(xiàn)最好的視覺(jué)層級(jí)效果，這個(gè)點(diǎn)細(xì)化后有很多可挖，這里總結(jié)了幾個(gè)點(diǎn)，歡迎繼續(xù)哈

4、引導(dǎo)： 遵循用戶(hù)習(xí)慣，同時(shí)給予適當(dāng)?shù)囊龑?dǎo)推薦

　怎樣的設(shè)計(jì)能給人留下深刻印象？

　　名人效應(yīng) （借助名人或明星效應(yīng)，產(chǎn)生不言而喻的說(shuō)服力）

　　每人內(nèi)心都有自己仰慕或效仿的對(duì)象，而且有一種想盡可能地向他靠近的心理欲求，從而獲得心理上的滿足。在選擇人物形象時(shí)必須要與產(chǎn)品的品格相吻合、使用戶(hù)快速理解產(chǎn)品傳遞的特點(diǎn)和價(jià)值，比如我們以往的設(shè)計(jì)作品中經(jīng)常會(huì)使用到馬云的形象，他在互聯(lián)網(wǎng)具有極高的話語(yǔ)權(quán)，選擇用他的形象來(lái)推廣產(chǎn)品能產(chǎn)生不可言喻的說(shuō)服力，當(dāng)然你不能濫用。

　　時(shí)勢(shì)結(jié)合 （緊隨潮流，激發(fā)思想和感情上的共鳴）

　　結(jié)合當(dāng)前社會(huì)事件如釣魚(yú)島、奧運(yùn)會(huì)、中秋節(jié)、中國(guó)好聲音等等，或當(dāng)下流行的語(yǔ)言詞匯如屌絲、高富帥、白富美等等，緊隨潮流的事物反應(yīng)當(dāng)下的社會(huì)形態(tài)，潛移默化的感染到用戶(hù)的思想或感情，產(chǎn)生震撼和共鳴。下面的例子就是結(jié)合現(xiàn)在最流行最熱門(mén)的節(jié)目“中國(guó)好聲音”。

［總結(jié)］：在用戶(hù)的視角來(lái)看，我們也希望他看到的都是最簡(jiǎn)單最愉悅的一面。作為客戶(hù)培訓(xùn)師，你不需要知道產(chǎn)品數(shù)據(jù)在我們后臺(tái)是存儲(chǔ)在什么服務(wù)器的。用戶(hù)搜索產(chǎn)品時(shí)，也更加不需要了解一個(gè)檢索詞是經(jīng)過(guò)了多少詞解析判斷計(jì)算，跑了幾臺(tái)服務(wù)器，最終把結(jié)果呈現(xiàn)給他的。但是作為工作人員，我們得了解需要怎么做，才能夠把最簡(jiǎn)單最愉悅的結(jié)果呈現(xiàn)出來(lái)。（Heidi注：如圖5所示）

圖5：簡(jiǎn)明網(wǎng)站產(chǎn)品建設(shè)流程圖

這個(gè)圖呈現(xiàn)的流程，依賴(lài)于多個(gè)部門(mén)的通力合作。從戰(zhàn)略層高瞻遠(yuǎn)矚的判斷、從產(chǎn)品經(jīng)理對(duì)于市場(chǎng)的分析以及功能、內(nèi)容的規(guī)劃、描述，到用戶(hù)體驗(yàn)團(tuán)隊(duì)，開(kāi)發(fā)和測(cè)試團(tuán)隊(duì)的全力配合，而網(wǎng)站產(chǎn)生后，還要依賴(lài)于SEO、市場(chǎng)營(yíng)銷(xiāo)、銷(xiāo)售和客服的工作。

成功的網(wǎng)站，一定是多個(gè)部門(mén)一起圍繞相同目標(biāo)運(yùn)作的結(jié)果，但是其中一個(gè)環(huán)節(jié)失敗，則可能會(huì)造成全盤(pán)皆輸。

本文雖然篇幅已經(jīng)很長(zhǎng)，但是涉及到具體的流程、方法，都只能簡(jiǎn)單帶過(guò)，希望大家要記住這是對(duì)話的場(chǎng)景，不要以偏概全哦。
你對(duì)他提出的問(wèn)題，想如何回答呢？如果你有問(wèn)題，質(zhì)疑，鼓勵(lì)……歡迎交流。

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

 

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

 

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

 

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

二. 為什么要寫(xiě)？

 

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

 

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

 

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

 

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

 

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

 

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

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

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

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

1.你不是你的用戶(hù)

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

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

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

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

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

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

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

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

Flickr為用戶(hù)準(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ā)用戶(hù)的情感響應(yīng)。如果運(yùn)用方式得當(dāng)，這些細(xì)節(jié)當(dāng)中的小魔鬼可以幫助我們打造出更具人格的產(chǎn)品，并使用戶(hù)在與之進(jìn)行互動(dòng)的過(guò)程中產(chǎn)生積極的情感響應(yīng)；而這種積極的態(tài)度會(huì)有效的促使用戶(hù)主動(dòng)傳播和擁護(hù)你的產(chǎn)品。這種在人格層面與用戶(hù)建立關(guān)聯(lián)的設(shè)計(jì)思路也被稱(chēng)作“情感化設(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ì)也可以被劃分為功能性、可依賴(lài)性、可用性和愉悅性這四個(gè)從低到高的層面，而情感化設(shè)計(jì)則處于其中最上層的“愉悅性”層面當(dāng)中。

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

1. 你創(chuàng)造出了獨(dú)特并且優(yōu)秀的風(fēng)格理念，令用戶(hù)產(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)品的“人格魅力”。