國際用戶體驗設(shè)計（阿里國際站用戶體驗設(shè)計案例）

國際用戶體驗設(shè)計阿里國際站用戶體驗設(shè)計案例目錄\h上篇專業(yè)設(shè)計師之路\h做好基礎(chǔ)\h設(shè)計，你也可以\h互聯(lián)網(wǎng)產(chǎn)品的骨骼與皮膚——產(chǎn)品+運(yùn)營\h用體驗解決商業(yè)問題，P4P后臺改造\h設(shè)計需求分析及模板\h如何做好交互設(shè)計的專家評審\h理論到實(shí)踐\h讓你的界面有視覺層次\h用戶難觸及？數(shù)據(jù)幫你大膽假設(shè)，小心求證\h設(shè)計影響行為，行為決定結(jié)果\h像心理學(xué)家思考，提升設(shè)計效益\h精通細(xì)節(jié)\h跨屏體驗設(shè)計\h如何設(shè)計一套優(yōu)秀的響應(yīng)式頁面——A的響應(yīng)式設(shè)計經(jīng)驗\h操作平臺設(shè)計\h無線表單設(shè)計\h表單設(shè)計：簡單設(shè)計背后的動機(jī)思考\h下篇國際化設(shè)計，專業(yè)與團(tuán)隊協(xié)作\h跨文化設(shè)計\h禪意設(shè)計——5分鐘貫通國際化簡潔設(shè)計——互聯(lián)網(wǎng)簡潔設(shè)計與文化審美之間的關(guān)系及視覺設(shè)計方法\h從數(shù)據(jù)到設(shè)計——多語言改版探索\h廣告中的文字設(shè)計\h西文字體的差異化應(yīng)用\h如何打造一款跨境電商B2BApp\hBC差異化研究——運(yùn)營活動設(shè)計\h系統(tǒng)化協(xié)作\h給馬云的一幅畫\h敏捷設(shè)計\h從現(xiàn)在開始關(guān)心設(shè)計模式吧\h外包項目那些事兒\h14年的管理歷程\h附錄A：多語言國家研究成果上篇專業(yè)設(shè)計師之路做好基礎(chǔ)設(shè)計，你也可以文/鄭安嬰阿里巴巴國際站（A）對一個普通人而言也許有點(diǎn)陌生，我們的理想是讓天下沒有難做的生意，讓世界各地的生意人在這里相遇、發(fā)現(xiàn)商機(jī)、溝通、促成生意，建立起長久的合作關(guān)系。大型機(jī)械、電子產(chǎn)品、服裝、醫(yī)療產(chǎn)品……你能想到的各個行業(yè)的生意人都在這兒有自己的線上店鋪，來自世界各地的買家在這里大批量采購他們的商品。這里是一個商機(jī)四起的虛擬世界，促成的卻是真金白銀的真實(shí)交易。在未來，貿(mào)易將越來越脫離地域的局限和語言的障礙。甚至，不同地域就是商機(jī)本身所在?？缇迟Q(mào)易將成為貿(mào)易的趨勢，生意人憑借聰明智慧玩轉(zhuǎn)沒有國界的生意場，讓世界各地神奇的產(chǎn)品運(yùn)轉(zhuǎn)流通。為了讓這個偉大的理想變成現(xiàn)實(shí)，我和一群充滿熱情和智慧的伙伴在一起奮斗。我們每天做的工作，就是發(fā)現(xiàn)這些神秘的生意人到底會遇到哪些困擾并幫助他們解決困擾，幫助他們成功，幫助他們成為更出色的生意人。美國、印度、澳大利亞、葡萄牙……他們來自世界各地，使用不同的語言，有著不同的文化，他們的習(xí)慣和思維方式和普通人一樣嗎？日理萬機(jī)，使用互聯(lián)網(wǎng)打開線上渠道的生意人都無比睿智，他們關(guān)注的事物和普通人關(guān)注的一樣嗎？他們做事的方式和普通人又相似嗎？他們充滿了神秘，這些撲朔迷離的問題也恰恰是我們感興趣的。阿里巴巴有一條深入公司每位員工內(nèi)心的原則——擁抱變化。因為我們都相信，機(jī)會隱藏在混亂中，成功萌芽于適應(yīng)變化中。然而，熱情只能成為源動力，只有科學(xué)的方法才能解決實(shí)際問題。我們的公司由各種職能的智囊團(tuán)組成，市場部、產(chǎn)品部、運(yùn)營部、銷售部、法務(wù)部、設(shè)計部、測試部、技術(shù)開發(fā)部……如此豐富的職能造就了復(fù)雜的集體知識體系。在共同協(xié)作中，我們共同探索著最有效率的解決方法。這本書講述的是作為一名優(yōu)秀的設(shè)計師，怎樣在復(fù)雜的業(yè)務(wù)環(huán)境下拆解問題、總結(jié)經(jīng)驗，為我們的用戶創(chuàng)造最流暢的體驗。設(shè)計部在阿里巴巴叫做用戶體驗部（UserExperienceDesign），也是與阿里巴巴“客戶第一”原則關(guān)聯(lián)最緊密的部門。如果對藝術(shù)設(shè)計稍有理解，你一定會好奇，作為通常是藝術(shù)創(chuàng)意背景出身的設(shè)計工作者，要如何在充滿著“交易”、“合同”、“通關(guān)”、“退稅”此類關(guān)鍵詞的環(huán)境下發(fā)揮設(shè)計創(chuàng)意，從而巧妙地解決問題呢？事實(shí)上，所有設(shè)計師的靈魂就是稱為“設(shè)計思維”的思維方式，一個設(shè)計師之所以可以勝任這個工作，也是因為他具備解決這些問題的能力。因此，我們不介意面對復(fù)雜的信息和環(huán)境，因為我們生來就是處理它們的。每個人面對問題的處理方法都不同，效率也不同。下文我會簡單介紹一些我常用的思維模式，也許可以為你提供一些參考。我有信心向你承諾，只要形成自己解決問題的方法——設(shè)計，你也可以。一、發(fā)現(xiàn)問題一個好問題才會有一個好答案，想找到一個為你賺錢的好答案，你要先知道如何發(fā)現(xiàn)一個好問題。在阿里巴巴國際站，如何讓帶著大筆訂單、猶猶豫豫的買家，和有著豐富產(chǎn)品、帶著懷疑、同時時間極少的賣家，以最快的速度順利溝通起來，進(jìn)一步形成信任，最后達(dá)成越來越多的交易。這件事是我們產(chǎn)品團(tuán)隊最大的問題。甚至為了快速得到答案，比起普通人來說，我們的產(chǎn)品團(tuán)隊不惜進(jìn)行多次嘗試，直到獲得正確答案。當(dāng)我們遇到像上述這樣無法簡單解答的大問題時，第一個方法就是拆解、細(xì)分問題。最基本的方法就是按照以下維度拆分。1.發(fā)生問題的用戶是誰？2.發(fā)生問題的時間和場景是怎樣的？3.用戶來到這個具體的場景要做什么？4.他在操作和遇到問題時的流程順序是怎樣的？這類似于6W1H原則，也是你認(rèn)識一個具體問題的真正含義的最佳思考途徑。這些問題只是一個良好的開始，你可以順著這個拆解的思路層層深究，直到你清晰地了解了你的用戶真正面臨的事件的來龍去脈。舉個例子，比如第一個問題：發(fā)生問題的用戶是誰？這個相對寬泛的問題就可以被繼續(xù)降解為更細(xì)的維度。（1）用戶的國家、性別、年齡等基本背景是怎樣的？（2）用戶所在的公司和職位是怎樣的？（3）用戶從事這個職位的年限是怎樣的？諸如此類。當(dāng)你感到問題被降解到一個非常具體的程度時，恭喜你，你離提出一個真正的好問題也就不遠(yuǎn)了。一般而言，在阿里巴巴這樣的大型互聯(lián)網(wǎng)公司，或者任何一個重視大數(shù)據(jù)的公司，都會在產(chǎn)品不斷上線迭代的過程中積累用戶的行為數(shù)據(jù)。比如，一個頁面一天有多少用戶來訪，有多少用戶停留超過10分鐘，有多少用戶不足30秒就離開了，這些具體信息都可以通過數(shù)據(jù)部門獲得。產(chǎn)品經(jīng)理通常也就是通過挖掘這些數(shù)據(jù)來發(fā)現(xiàn)上述細(xì)分問題的初步答案，這些答案不一定就是絕對正確的，但是它們所提供的參考一定會提高產(chǎn)品的精確性。與此同時，你還可以從其他渠道獲得問題的答案，比如服務(wù)部，他們每天都在面對用戶的投訴和意見，這是最好的信息獲得渠道。與服務(wù)部溝通，也可以為你提供一些答案。當(dāng)你降解細(xì)分的問題收獲到足夠多的答案以后，你就可以重新回到你最初遇到的大問題上。這時候，原先的那個大問題就會因為細(xì)分問題的解答而產(chǎn)生很多邊界，從而變得容易回答。舉個例子，你想知道：蘋果樹為什么不結(jié)果子？這是一個非常寬泛而難以回答的問題，但是當(dāng)你通過與各種各樣的人溝通，了解了各種信息，這個問題就變成了：種在中國杭州阿里巴巴公司停車庫旁邊、曬不到太陽、熱帶品種、樹齡3年的蘋果樹為什么不結(jié)果子？這時，你腦海中認(rèn)為可能正確的答案是否一下就清晰起來了呢？所以，問題解決不了，是因為我們不了解這個問題的方方面面、來龍去脈。一個好問題才會獲得一個好答案，而互聯(lián)網(wǎng)人的基本技能就是發(fā)現(xiàn)問題。想要做一個好的設(shè)計師，先從你面臨的問題開始。在阿里巴巴，我們通常把和產(chǎn)品經(jīng)理一起討論解決問題的過程叫作“聊產(chǎn)品需求”，產(chǎn)品需求通常已經(jīng)落實(shí)到了一個產(chǎn)品經(jīng)理推理出來的解決方案，但是我們會通過閱讀他的解決方案，來進(jìn)一步探討他真正想解決的問題。這個過程，也就是我們通過設(shè)計思維來配合產(chǎn)品經(jīng)理梳理思路的過程。二、做出假設(shè)種在中國杭州阿里巴巴公司停車庫旁邊、曬不到太陽、熱帶品種、樹齡3年的蘋果樹為什么不結(jié)果子？對于這個問題的正確答案，你有什么猜測？可能是由于蘋果樹曬不到太陽，可能是由于停車庫旁邊廢氣太重，可能是由于蘋果樹本身還沒成熟……這些猜測就可以成為你的假設(shè)，一個假設(shè)的提出形式通常是“假如我們這樣做……，就可以……。”例如：假如我把這棵蘋果樹搬到太陽底下，它就會結(jié)果子了。所以你看，當(dāng)你有了一個好問題，要做一個假設(shè)其實(shí)是很容易的。但是要做好這個假設(shè)并不容易，就以上的例子，很顯然，就算把蘋果樹搬到太陽光下照射它也不會瞬間結(jié)出果子。有經(jīng)驗的人就會做更細(xì)致的假設(shè)，為這個假設(shè)設(shè)置更多細(xì)分條件。這個做法就和我們剛才降解問題的方法一樣。什么時間、什么地點(diǎn)、什么具體情況下，假設(shè)我這樣做，會獲得結(jié)果A。另一種條件下，假設(shè)我這樣做，會獲得結(jié)果B。這些細(xì)致的、分類討論的假設(shè)，最終能很好地回答一個很嚴(yán)謹(jǐn)?shù)膯栴}。面對一個嚴(yán)謹(jǐn)?shù)膯栴}，你要做同樣嚴(yán)謹(jǐn)?shù)募僭O(shè)。但其實(shí)做出嚴(yán)謹(jǐn)?shù)募僭O(shè)只是最基本的能力，好的設(shè)計師需要做出極富創(chuàng)意的假設(shè)。比起蘋果怎么結(jié)果子，我們平時的假設(shè)常常是假設(shè)某個圖片、某個功能區(qū)塊放在什么位置，使用什么顏色，就可以為用戶帶來怎樣的體驗?；蛘呤羌僭O(shè)我們?yōu)橛脩舭才乓幌盗械牟僮髁鞒蹋涂梢詾橛脩艚鉀Q某種具體的問題。這種假設(shè)比較復(fù)雜，通常會牽扯到各種事件間的相互關(guān)聯(lián)與作用。這種情況下要想做出極富創(chuàng)意的假設(shè)，你就需要一個智囊團(tuán)。他們可以是你的同事、朋友或者家人，挑選一些性格和你非常相似，以及截然相反的人，你能獲得更豐富的建議。這些建議會引發(fā)你的思考，從而做出一個全面、嚴(yán)謹(jǐn)，同時又充滿創(chuàng)意的假設(shè)。始終記住，寫下假設(shè)的人是你，可以聽取建議，但是不要隨意被影響。尤其重要的是，當(dāng)你強(qiáng)烈地感到一個假設(shè)非常具有可行性，但是遭遇了比較嚴(yán)重的打擊時，保護(hù)好你的創(chuàng)意，不要輕易放棄它。后面我們會談到如何科學(xué)地證明你的假設(shè)是否正確。在阿里巴巴國際站UED，我們很幸運(yùn)有一支由50多人組成的專業(yè)且龐大的團(tuán)隊。通常，當(dāng)我們了解一個產(chǎn)品經(jīng)理希望和我們一起解決的問題時，我們會迅速拉上幾個同事，然后一起頭腦風(fēng)暴，畫一些概念稿。這些概念稿可以很大膽，充滿想象，不受拘束，這也是設(shè)計師最喜愛的環(huán)節(jié)。有時候正確答案往往藏在你覺得最不可思議的方案中。三、大膽試錯你有了一個嚴(yán)謹(jǐn)?shù)膯栴}，有了一個嚴(yán)謹(jǐn)?shù)募僭O(shè)，但也不能保證你現(xiàn)在做的這個假設(shè)就是正確答案。在你的假設(shè)變成一個真正的解決方案，被驗證成功或是失敗之前，你可以先用你的假設(shè)去大膽試錯，因為這時你犯錯的成本是最小的。比起項目上線收益慘淡，現(xiàn)在聽聽別人對你方案的負(fù)面抨擊，簡直輕如鴻毛?？捎眯詼y試是我們喜愛用的一個方式，把你的設(shè)計稿做成一個仿真原型，交給你招募來的目標(biāo)用戶，聽聽他們的反饋。你會發(fā)現(xiàn)他們使用一個產(chǎn)品的方式和你設(shè)計它的思路完全不一樣，你的用戶會讓你驚訝，給你靈感，他們的反饋是你最好的參考資料。在阿里巴巴，我們有專門的用研團(tuán)隊，他們經(jīng)常提供給設(shè)計師一些訪談技巧的培訓(xùn)，也有很多招募用戶的渠道、方法。用戶體驗設(shè)計師的職能也不僅僅局限于美學(xué)、藝術(shù)、排版、布局，我們更接近用戶，我們需要對用戶進(jìn)行了解研究，我們設(shè)計的不是產(chǎn)品而是體驗。我最近親自組織了一次海外用戶的訪談與測試，用戶來自印度、新加坡、英國等地，親自與使用著英語母語或非英語母語的真正國際用戶交談。他們彬彬有禮，他們吼叫發(fā)泄；他們條理清晰，他們喋喋不休；他們友好，他們不耐煩……他們甚至比你有更好的互聯(lián)網(wǎng)產(chǎn)品思維。走進(jìn)你的用戶，你會發(fā)現(xiàn)這些用戶帶給你的不僅僅是對產(chǎn)品的重新思考，更重要的是為你帶來了同理心。真正意識到你設(shè)計出來的作品是會被用戶認(rèn)真使用，這件事本身，比其他任何東西都更能促成你做出一個好的設(shè)計。當(dāng)然，有時候我們也會遇到困難，比如：沒有資源讓我們把產(chǎn)品原型給用戶來試錯，找不到愿意來測試的國際用戶，沒有時間，沒有人配合。各種各樣的問題限制著我們嚴(yán)謹(jǐn)?shù)赝瓿梢粋€項目的步伐。產(chǎn)品經(jīng)理的催促永遠(yuǎn)像個定時鬧鐘一樣環(huán)繞在耳邊。你也一定會遇到一樣的問題，想出了也許可以解決問題的辦法，但來不及試錯，立馬就要拿出來用。這種時候我比較鼓勵的是，在你的能力范圍內(nèi)盡可能地嘗試試錯，即使只是很小的嘗試。你可以采取的最簡單的辦法，就是請和你一樣了解問題的人就你的假設(shè)方案進(jìn)行討論。一個被討論過5分鐘的假設(shè)，也要勝過一個匆匆拿去實(shí)踐的假設(shè)。我們做的所有努力，都是為了降低假設(shè)的出錯率，哪怕只降低了0.01%也是成功的一步。四、實(shí)現(xiàn)構(gòu)想說到這里你會發(fā)現(xiàn)我沒有提過任何一句有關(guān)圖形、美學(xué)、軟件應(yīng)用等方面的技能。當(dāng)我們談?wù)摰秸嬲涯愕臉?gòu)想落地為產(chǎn)出的時候，我們就要聊一聊這個話題了。其實(shí)實(shí)現(xiàn)手段只是一個設(shè)計師的多種能力之一，并不是掌握了圖形處理就意味著你成為了一個設(shè)計師。技能只是幫助你把構(gòu)想實(shí)現(xiàn)為現(xiàn)實(shí)的工具。假設(shè)你有很好的構(gòu)想，又找得到可以為你實(shí)現(xiàn)的合作伙伴，你同樣可以成功創(chuàng)作出漂亮的設(shè)計作品。當(dāng)然，如果你想做一個具備獨(dú)立創(chuàng)作能力的設(shè)計師，那么你就必須要去學(xué)習(xí)相關(guān)領(lǐng)域的專業(yè)知識。比如網(wǎng)頁設(shè)計，你至少需要學(xué)習(xí)平面設(shè)計、界面設(shè)計等知識，掌握任何一項頁面及設(shè)計軟件工具作為起步。工具和專業(yè)知識是幫助你做得更好的最好戰(zhàn)友，當(dāng)你左手擁有縝密的設(shè)計思維，右手擁有熟練的技能時，你才可以有信心地說，你可以獨(dú)當(dāng)一面，為復(fù)雜的問題提供完整的解決方案。在阿里巴巴國際站UED，我們設(shè)計師的職能分為交互和視覺兩種，這兩種都只是職位名稱，如果你愿意嘗試學(xué)習(xí)更多的技能，通過同事之間互相交流學(xué)習(xí)、利用項目機(jī)會磨練技能，你就可以快速掌握。視覺可以學(xué)習(xí)交互技能，交互也可以學(xué)習(xí)視覺技能，甚至還可以向用研團(tuán)隊學(xué)習(xí)如何和你的用戶訪談。在Facebook，設(shè)計師的職位名稱叫作產(chǎn)品設(shè)計師，通常同時擔(dān)任交互和視覺兩種職能。所以，職位只是公司用來管理員工的類目，你并不需要因為職位為自己設(shè)定太多局限，最重要的是做你想做的事。說完這些，假設(shè)你已經(jīng)具備了獨(dú)立設(shè)計的能力，或者你已經(jīng)找到了可以幫助你把構(gòu)想實(shí)現(xiàn)的助手。在具體設(shè)計的時候，下面幾個要素值得你在執(zhí)行中特別注意。1.是否符合各項邏輯就像句子有語法，畫作有構(gòu)圖與結(jié)構(gòu)。你在完成一個設(shè)計的時候，也要從多種角度思考自己的產(chǎn)出物是否經(jīng)得起推敲。我列舉幾個維度的邏輯作為參考。推導(dǎo)邏輯：設(shè)計產(chǎn)物的推導(dǎo)邏輯，其實(shí)就是我們整篇文章前半段一直討論的——從發(fā)現(xiàn)問題、做出假設(shè)到大膽試錯，這整個過程中你不斷修正自己對問題的解決方案，獲得了一系列對調(diào)整方案有價值的信息，判斷篩選這些信息，從而完成對方案的修改，就已經(jīng)具備了基本邏輯嚴(yán)謹(jǐn)?shù)臈l件。在這個基礎(chǔ)上，再審視每個細(xì)節(jié)決定，諸如每個頁面之間的關(guān)系，每一段文字、圖片、控件擺放的位置，每個動畫效果出現(xiàn)的速度和時機(jī)，等等。大到網(wǎng)站架構(gòu)，小到一個文字的色值，你安排他們的方式是否有切實(shí)可靠的原因。物理邏輯：你的設(shè)計產(chǎn)物會根據(jù)觸發(fā)條件的不同，發(fā)生不同的改變，從而和用戶產(chǎn)生交互。在互聯(lián)網(wǎng)產(chǎn)品出現(xiàn)之前，人們每天打交道的都是自然世界中的實(shí)物。所謂物理邏輯，其實(shí)就是結(jié)構(gòu)、色彩、材料、運(yùn)動軌跡等這些你日常接觸的物體的屬性與規(guī)律。經(jīng)?？剂磕愕脑O(shè)計是否巧妙利用了一些物理隱喻，或者是否違背了一些基本物理邏輯，對你的設(shè)計會有很大的提升。舉個例子，蘋果產(chǎn)品中，iPhone電量不足時金屬絲斷裂的音效，MacBook刪除文件時捏紙團(tuán)的音效，就很好地模仿了自然環(huán)境中相應(yīng)的聲音，從而令用戶毫不費(fèi)力地理解自己當(dāng)前的操作。行為邏輯：行為邏輯是最重要也是和用戶最為相關(guān)的邏輯。在設(shè)計之前的具體推導(dǎo)過程中，我們就已經(jīng)了解了用戶的行為。這時有兩種做法：第一種，在設(shè)計前就把所有類型用戶的行為流程進(jìn)行整理，根據(jù)他們行為的發(fā)生順序和互相之間的聯(lián)動來決定你之后的設(shè)計產(chǎn)出；第二種，在產(chǎn)出設(shè)計后，整理用戶行為的流程，驗證你的設(shè)計是否可靠，從而進(jìn)行修改。2.是否符合人機(jī)交互原則由于我們是作為用戶體驗設(shè)計師在履行我們的職責(zé)，所以一定要時刻記得先考慮可用性和易用性，其次再考慮美學(xué)層面的視覺和諧。這里的可用性和易用性，都要從用戶使用的終端出發(fā)。你的設(shè)計在手機(jī)、電腦或是手表等不同界面上展示，都將影響你最終產(chǎn)物的組合形式。因為用戶和不同終端產(chǎn)生交互時遇到的情況是不同的。一個小竅門：雖然你是從可用性和易用性出發(fā)，但當(dāng)你推敲獲得的最終產(chǎn)物看上去不太美觀的時候，通常是它本身有一定的不合理性。這個竅門并不總是正確，但是可以給你提供一些幫助。3.是否具有可拓展性這里我們只討論界面設(shè)計，但其實(shí)可拓展性適用于一切產(chǎn)品。一般來說，軟件或者互聯(lián)網(wǎng)產(chǎn)品都會經(jīng)過好幾個版本的迭代，有些是徹底地改版，有些是做細(xì)微的調(diào)整。這時候控制好你設(shè)計的第一個版本是否具有可拓展性就十分重要。它意味著你之后做設(shè)計調(diào)整時會不會花費(fèi)很多重復(fù)勞動，以及負(fù)責(zé)實(shí)現(xiàn)設(shè)計的前端工程師會不會付出更多修改成本。在阿里巴巴國際站UED，當(dāng)我們正式進(jìn)入開始實(shí)現(xiàn)構(gòu)想的環(huán)節(jié)時，一般來說都有比較標(biāo)準(zhǔn)的執(zhí)行流程來保障上述的要點(diǎn)。首先，我們把前期發(fā)現(xiàn)問題、做出假設(shè)以及大膽試錯的內(nèi)容都用規(guī)范格式記錄下來，保證我們在向別人講解設(shè)計時有足夠充分的佐證。然后，我們開始整理用戶的任務(wù)流程（TaskFlow）。例如，用戶：小學(xué)生，任務(wù)：上學(xué)，任務(wù)流程：起床—整理書包—坐720路巴士—到達(dá)學(xué)校。通過這個任務(wù)流程的關(guān)鍵節(jié)點(diǎn)，又能推導(dǎo)出通過什么樣的設(shè)計形式承載，比如“坐720路巴士”的行為需要“一輛巴士”承載，而一個“提交申請”的行為則需要“一個含有申請表單和提交按鈕的頁面”承載。這樣一來，整個項目需要涉及多少個頁面就一目了然了。進(jìn)入頁面內(nèi)，就需要安排這個頁面的信息層級，哪些是需要用戶在第一時間了解的內(nèi)容，哪些屬于輔助類型的非重要信息。確定了信息層級后，再通過布局來根據(jù)優(yōu)先級安排哪些信息放置在哪些位置。這樣依次完成每個頁面的布局，完成視覺層面潤色的細(xì)節(jié)調(diào)整，再對各個頁面上會發(fā)生的交互變化、視覺上的間距等細(xì)節(jié)做出標(biāo)注，一份完整的設(shè)計文檔就完成了。前端工程師根據(jù)這份文檔，將我們的設(shè)計變成用戶真正可以使用的網(wǎng)頁。當(dāng)然，這個過程因人而異，最后搭建出一個漂亮好用的網(wǎng)站，可以通過許多不同的方式來達(dá)成。你在構(gòu)想一個設(shè)計時經(jīng)過了最初設(shè)計，在實(shí)現(xiàn)的過程中又完成了第二次設(shè)計。堅持把你的構(gòu)想做出來，這樣才能發(fā)現(xiàn)它真正可能遇到的問題。五、事實(shí)驗證這部分我不再贅述，因為牽涉到大數(shù)據(jù)、用戶研究等專業(yè)領(lǐng)域。但是需要強(qiáng)調(diào)的是，你必須認(rèn)識到，設(shè)計投入使用之后其實(shí)才是漫長的設(shè)計迭代過程的開始。你的用戶真正和你的產(chǎn)品發(fā)生了交流，有了真正的看法，給你真實(shí)的反饋，你才會知道下一步設(shè)計怎么進(jìn)行調(diào)整。在阿里巴巴，我們有數(shù)據(jù)團(tuán)隊和用戶研究團(tuán)隊。在產(chǎn)品上線后，他們通過讀取用戶在網(wǎng)頁上行動所產(chǎn)生的數(shù)據(jù)，或者回收用戶反饋的問卷，或者主動訪談用戶，獲悉他們對上線產(chǎn)品的反饋，從而了解用戶對我們的設(shè)計真正的看法。因此，要在用戶體驗這個領(lǐng)域成為一個出色的設(shè)計師，你還必須了解很多橫向知識。包括如何從各種數(shù)據(jù)中提取出最能指導(dǎo)驗證設(shè)計的指標(biāo)，如何從訪談中了解用戶對一個設(shè)計形式的真正看法。事實(shí)證明，你的設(shè)計可能不那么成功，看上去似乎之前的一切努力都白費(fèi)了，但其實(shí)這才是最好的結(jié)果。我們知道了一種錯誤的可能，就獲得了一條更清晰的界限。紙上談兵不如立刻嘗試，設(shè)計師的工作并不是那么不切實(shí)際的天馬行空，而恰恰是實(shí)實(shí)在在地解決問題。即使你沒有從事過任何設(shè)計相關(guān)的職業(yè)，但只要懷著一份把身邊事物變得更好的熱情，使用正確的方法和工具，最后為更多的人帶來便利，你就是一個出色的設(shè)計師。我在從事設(shè)計工作的過程中獲得了很多人生、自我上的啟發(fā)，這份職業(yè)也帶給我出人意料的驚喜和快樂。在之后的更多篇章里，你會看到我的那些充滿智慧的同事們?nèi)绾谓鉀Q形形色色的復(fù)雜問題?？缇迟Q(mào)易或許是你的興趣所在，又或許不是。但是無論如何，我們在阿里巴巴國際站這個產(chǎn)品生態(tài)中面臨的復(fù)雜問題，就和我們面臨的所有復(fù)雜問題一樣，最終都有切入點(diǎn)，使我們可以迎難而上，讓問題迎刃而解。最后贈送一句我最喜歡的美劇《Suits》中的臺詞：做律師就像做醫(yī)生，在病人身上一直試探性地按壓，直到病人喊痛（Youkeeppressinguntilithurts.Thenyouknowwheretolook）。做設(shè)計也是一樣，掌握方法，你也可以。作者郵箱：amber.zheng@互聯(lián)網(wǎng)產(chǎn)品的骨骼與皮膚——產(chǎn)品+運(yùn)營文/駱蕓眾所周知，學(xué)有所長，在做過很多類型的設(shè)計工作后應(yīng)該會有自己最擅長的東西。自己做設(shè)計也有7年了，從動漫設(shè)計、游戲設(shè)計、平面設(shè)計、運(yùn)營設(shè)計，最終轉(zhuǎn)為產(chǎn)品設(shè)計，其實(shí)筆者也有不少心得，希望通過此篇文章與大家分享。我身邊有不少朋友都是設(shè)計師，但設(shè)計種類各有不同。那些沒有接觸過產(chǎn)品設(shè)計的朋友，還是會對產(chǎn)品設(shè)計這個名詞感到一頭霧水。普通的產(chǎn)品與互聯(lián)網(wǎng)產(chǎn)品有什么區(qū)別？其實(shí)互聯(lián)網(wǎng)產(chǎn)品的概念是從傳統(tǒng)意義上的“產(chǎn)品”概念延伸而來的，是在互聯(lián)網(wǎng)領(lǐng)域產(chǎn)生用于經(jīng)營的商品，例如：阿里的“支付寶”、騰訊的“微信”。由于智能手機(jī)的普及，越來越多的互聯(lián)網(wǎng)產(chǎn)品被人們熟知。從類型上來講，互聯(lián)網(wǎng)產(chǎn)品也分為PC端、無線端等。產(chǎn)品設(shè)計就好比一個人的骨架，好的產(chǎn)品架構(gòu)能夠給一個產(chǎn)品帶來堅實(shí)的基礎(chǔ)。一般產(chǎn)品設(shè)計主要有三個階段——策劃、開發(fā)、運(yùn)營。細(xì)分來講，先是有商業(yè)需求，然后做市場分析和用戶調(diào)研，接下來出產(chǎn)品策劃方案，正式投入產(chǎn)品設(shè)計和產(chǎn)品開發(fā)，最后進(jìn)行產(chǎn)品的推廣營銷。我們以正式投入產(chǎn)品設(shè)計為切入點(diǎn)。1.設(shè)計準(zhǔn)備由于筆者做的是視覺設(shè)計的工作，因此在接到設(shè)計需求時，通常已經(jīng)接到了一份比較完整的交互設(shè)計稿。在了解產(chǎn)品的大致需求后，需要時間消化，并且對比市面上的同類產(chǎn)品。然而更多的靈感來源于平時的積累，可以是對各大設(shè)計網(wǎng)站及書籍的瀏覽，因為前人的經(jīng)驗是寶貴的財富，可以幫你解決很多問題。當(dāng)然，靈感也來源于平日里對生活的捕捉和對美感的提煉。你也可以隨手準(zhǔn)備一個小本子，把平日里的小靈感全都記錄進(jìn)去，不局限于寫寫畫畫。另外，收集好圖也是一個很好的習(xí)慣，各種素材都可以在接到新的需求時去查看，會給到自己帶來新的靈感。然而B2B的產(chǎn)品大多使用場景都沒有出現(xiàn)在我們的日常生活當(dāng)中，因此了解更多專業(yè)類的知識對一個設(shè)計B2B產(chǎn)品的設(shè)計師來說顯得尤為重要。2.開始動手設(shè)計在一個完整的產(chǎn)品設(shè)計過程中，交互框架與風(fēng)格確定之后，就要開始著重于組件的統(tǒng)一以及視覺規(guī)范的遵守。這些都影響到這個產(chǎn)品最終的用戶體驗。在我們B2BUED有設(shè)計師們自己搭建的DPL平臺（統(tǒng)一的控件與組件庫），里面包含細(xì)化到每一個button的應(yīng)用，大大地節(jié)省了設(shè)計頁面的時間，提高了設(shè)計效率，并且也更方便前端與后端對產(chǎn)品進(jìn)行開發(fā)。我們還有一個元素設(shè)計小組，不斷產(chǎn)出統(tǒng)一的設(shè)計元素，可以簡單方便地應(yīng)用到頁面設(shè)計中。認(rèn)識到元素與視覺規(guī)范的重要性，提高自有產(chǎn)品的品牌感與統(tǒng)一性，設(shè)計師再發(fā)揮一些自己的創(chuàng)意，就能很好地搭配出風(fēng)格相對一致的網(wǎng)頁產(chǎn)品或移動端產(chǎn)品了。3.設(shè)計評審聽取專業(yè)意見在設(shè)計完成后，我們會把自己的作品抄送到自己所在的專業(yè)組，聽取小組內(nèi)各位專業(yè)人士提出的意見，以便對自身設(shè)計的產(chǎn)品做出更完善的改動。要學(xué)會多聆聽別人的意見，從不同的角度看待問題。4.最終輸出稿整理規(guī)范的圖層組。在我們把PSD提交給前端之前，記得養(yǎng)成整理一下自己的圖層以及圖層組的好習(xí)慣，那樣會讓下一個接手這個項目的人感到方便、快捷，也可以大大節(jié)約需求完成的時間。搭好了骨架之后我們該干什么呢？接下來就讓我們來聊聊什么是運(yùn)營設(shè)計吧。運(yùn)營好比一個人的皮膚，沒有好的運(yùn)營，可能準(zhǔn)備得很完善的產(chǎn)品也不一定會有很多用戶。所以在產(chǎn)品發(fā)布新版本及重大的活動、節(jié)日時都需要優(yōu)秀的運(yùn)營設(shè)計，例如產(chǎn)品網(wǎng)站的Banner、活動專題頁面、線下宣傳海報等。有了好的產(chǎn)品設(shè)計加上好的運(yùn)營設(shè)計，一個人的“骨骼”和“皮膚”才算完整！1.有故事內(nèi)容的設(shè)計創(chuàng)意是關(guān)鍵。如果你僅僅只是在做一個Banner，圖中沒有內(nèi)容，沒有故事，可想而知，你打動不了你的用戶。簡單地來說，如果運(yùn)營策劃給的是一個方案，那么就要由設(shè)計師去完成那畫龍點(diǎn)睛的一筆。2.提取核心關(guān)鍵詞，找到合適的風(fēng)格自己做的產(chǎn)品架構(gòu)，肯定最清楚產(chǎn)品風(fēng)格是怎樣的。那么在做產(chǎn)品的運(yùn)營設(shè)計時就要統(tǒng)一風(fēng)格，盡可能讓別人一眼就可以認(rèn)出，類似于蘋果、KFC。這里就要講到品牌化，B2BUED也一直在努力實(shí)現(xiàn)品牌化。3.運(yùn)營視覺規(guī)范運(yùn)營設(shè)計也有相對的設(shè)計規(guī)范。當(dāng)我們面對大批量的運(yùn)營需求時，規(guī)范可以很好地節(jié)省時間，并且可以使雜亂無章的各類Banner、EDM、運(yùn)營活動等都有很好的統(tǒng)一性。無論是小型項目還是大型項目，產(chǎn)品還是運(yùn)營，視覺規(guī)范都有其存在的必要性。無論是對自己，還是對同事，都能起到很好的規(guī)范作用，避免不一致的設(shè)計。4.效果跟蹤一次運(yùn)營的結(jié)束并不是產(chǎn)品宣傳的終止，要想下次還能獲得好的宣傳效果就必須總結(jié)經(jīng)驗。效果跟蹤：觀察用戶的反饋，記錄相關(guān)點(diǎn)擊量，從中獲知你的設(shè)計存在的問題。也許你原以為很滿意的設(shè)計，實(shí)際獲得的轉(zhuǎn)化率卻比其他時候少很多，那就要仔細(xì)分析原因了。效果跟蹤可以作為自己階段性工作的一種沉淀。規(guī)范沉淀：總結(jié)制定設(shè)計規(guī)范，這樣下次運(yùn)營設(shè)計的時候，就有很多元素可以復(fù)用，圖片的尺寸也有統(tǒng)一的標(biāo)準(zhǔn)，可以大大提高效率，也能方便其他人使用。做好產(chǎn)品設(shè)計與運(yùn)營，骨骼和皮膚都搭建好，那么這個產(chǎn)品離成功也不會太遠(yuǎn)了！作者郵箱：34334991@用體驗解決商業(yè)問題，P4P后臺改造文/向許源設(shè)計師能夠給業(yè)務(wù)帶來的，絕不僅僅只有界面層的優(yōu)化。在一些以業(yè)務(wù)為導(dǎo)向的，或者以技術(shù)為導(dǎo)向的公司，用戶體驗或許很難從一開始就占據(jù)最高的優(yōu)先級。作為阿里巴巴的設(shè)計師，我們不否認(rèn)這種情況，畢竟，從短期來看，可以轉(zhuǎn)化為利潤的商業(yè)數(shù)據(jù)和可以明確計算的技術(shù)成本，更能左右項目的方向。一個很平常的場景：產(chǎn)品經(jīng)理拿著一張草圖，把商業(yè)目標(biāo)和想要實(shí)現(xiàn)的功能告訴設(shè)計師，設(shè)計師進(jìn)行思考后提出用戶體驗最好的方案。產(chǎn)品經(jīng)理面露難色：“這個方案是很好，但是我們必須要讓這個按鈕出現(xiàn)在更醒目的位置?！币驗榭赡苓@個按鈕的背后，是某條業(yè)務(wù)線重要的商業(yè)利益。這種情況下，如果不是有嚴(yán)重的體驗問題，設(shè)計師可能就要開始考慮拿出兼顧商業(yè)目標(biāo)和用戶體驗的方案了。通常，這種方案的用戶體驗不會是最好的。這樣的場景在項目過程中，時有發(fā)生，設(shè)計師會陷入用戶體驗和業(yè)務(wù)目標(biāo)的抉擇中，并且把產(chǎn)品經(jīng)理、開發(fā)工程師當(dāng)做對立方——為了達(dá)到最好的用戶體驗，需要說服他們。設(shè)計師很容易產(chǎn)生“為什么他們不懂用戶體驗”的感慨。但是，實(shí)際情況是，產(chǎn)品經(jīng)理當(dāng)然了解用戶體驗，甚至他們也知道，自己所需要的方案不能給用戶帶來最好的體驗。而設(shè)計師看到的功能文檔，很有可能是產(chǎn)品經(jīng)理在權(quán)衡了商業(yè)利益、數(shù)據(jù)指標(biāo)、技術(shù)難度之后，給出的他認(rèn)為最平衡的方案。我們不能苛求他們把用戶體驗放在第一位，那應(yīng)該是我們的工作。但是，理解不代表認(rèn)同，用戶體驗除了為商業(yè)目標(biāo)讓步之外，還有另一條路可以嘗試，那就是比現(xiàn)在更好地達(dá)到商業(yè)目標(biāo)。國際UED中認(rèn)為，設(shè)計師有能力提出讓產(chǎn)品經(jīng)理“無法拒絕”的方案。當(dāng)然這需要一定的條件。設(shè)計師需要對業(yè)務(wù)非常熟悉，并且了解技術(shù)實(shí)現(xiàn)的相關(guān)知識，從而擴(kuò)大自己的覆蓋面，以更全局的方式參與項目——從項目流程上而不單純是界面上，用體驗解決商業(yè)問題。在阿里巴巴，一個普遍的流程是這樣的：產(chǎn)品經(jīng)理通過對效果數(shù)據(jù)、用戶研究的分析，得出商業(yè)假設(shè)，根據(jù)商業(yè)假設(shè)提出功能需求；設(shè)計師根據(jù)需求設(shè)計出交互方案，制作成設(shè)計稿（包括交互設(shè)計稿和視覺設(shè)計稿）；前端工程師和后端工程師根據(jù)功能邏輯和界面邏輯，實(shí)現(xiàn)功能。如果設(shè)計師安于這樣的流程，等待產(chǎn)品經(jīng)理的功能需求文檔，那么他很容易陷入之前所說的兩難局面。但如果設(shè)計師嘗試在流程上向前或者向后覆蓋，那么可能會產(chǎn)生超出期望的效果。在國際UED中流傳的兩句話，可以代表我們的態(tài)度：“對于好的設(shè)計師，用戶體驗僅僅是下限”、“交互設(shè)計師是半個產(chǎn)品經(jīng)理”。我們鼓勵設(shè)計師多了解業(yè)務(wù)背景，補(bǔ)充商業(yè)方面的知識，參與到產(chǎn)品功能的決策中去?；蛟S設(shè)計師不能像產(chǎn)品經(jīng)理一樣，隨時保持著敏銳的商業(yè)嗅覺或者熟悉各種算法，但是設(shè)計師獨(dú)特的體驗視角，以及跳出單個業(yè)務(wù)看待產(chǎn)品的思考方式，有時候會令項目中的難點(diǎn)迎刃而解。我們曾完成過的一個項目體現(xiàn)了這一點(diǎn)。在阿里巴巴國際站中，P4P（PayForPerformance）是廣告產(chǎn)品的重要形式。賣家通過競價排名，購買產(chǎn)品在搜索List、行業(yè)專區(qū)中的展示位，而網(wǎng)站則根據(jù)廣告的效果向用戶收取費(fèi)用（按照點(diǎn)擊來收費(fèi)）。賣家需要把自己的產(chǎn)品導(dǎo)入如圖1所示的P4P后臺，并給產(chǎn)品關(guān)聯(lián)上買家在阿里巴巴上可能會搜索的關(guān)鍵詞，不同的關(guān)鍵詞的價格不同，賣家需要對這些關(guān)鍵詞設(shè)置自己的出價（愿意為一次點(diǎn)擊付出的價格）。在P4P業(yè)務(wù)中，用戶后臺的設(shè)計一直是難點(diǎn)。面對后臺各式各樣的操作，用戶不知道哪些操作能夠提升自己的排名，同時用戶無法直觀地感受到后臺操作和前臺效果之間的關(guān)系。這樣，兩方面問題互相影響、惡性循環(huán)，不利于建立P4P平臺的權(quán)威性和培養(yǎng)用戶操作的積極性。在P4P業(yè)務(wù)里，一個重要的商業(yè)目標(biāo)就是要提升用戶的操作數(shù)量。如果按照普遍的流程，設(shè)計師要做的應(yīng)該是等待產(chǎn)品經(jīng)理提出相關(guān)的需求，然后再開始行動，那么最終的產(chǎn)出，可能是一到兩個更漂亮的運(yùn)營活動頁面（之前P4P后臺一直以運(yùn)營活動來提升用戶操作，當(dāng)然，這也是一個有效的辦法）。而如果設(shè)計師想發(fā)揮更大的作用，用體驗解決商業(yè)問題，應(yīng)該怎么辦呢？1.更了解業(yè)務(wù)、技術(shù)，在有限制的條件下設(shè)計用體驗解決商業(yè)問題，首先就不能只從體驗出發(fā)。設(shè)計師提出的方案，不能超越了商業(yè)和技術(shù)的承受范圍。試想設(shè)計師在感慨產(chǎn)品經(jīng)理“不懂用戶體驗”的時候，說不定產(chǎn)品經(jīng)理也在抱怨設(shè)計師“不懂技術(shù)”。設(shè)計師常在提出一個美妙的方案后得到“這個沒法做”的技術(shù)反饋，這時候設(shè)計師需要根據(jù)遇到的技術(shù)難題來修改設(shè)計方案。對于P4P，設(shè)計師尤其需要做出全面的考慮。首先，在P4P后臺中，技術(shù)占到一個比較重要的位置，例如需要程序員開發(fā)計算眾多關(guān)鍵詞排名的算法。當(dāng)一個用戶調(diào)整對關(guān)鍵詞的出價時，他是否能排上前5名或者前10名？或者當(dāng)一個用戶調(diào)整自己每日平均花費(fèi)上線時，他的賬戶整體預(yù)期效果會不會提升？這些技術(shù)可能會影響到后臺性能——如果用戶每次都需要等待幾秒鐘才能得到效果數(shù)據(jù)，整體的用戶體驗就會大打折扣。因此，需要增加Loading狀態(tài)以及相應(yīng)的文案，讓用戶意識到系統(tǒng)正在處理他們的請求，并且禁用其他操作，預(yù)防多個操作同時出現(xiàn)，如圖2所示（見下面）。在這種狀況下，設(shè)計師要習(xí)慣由于技術(shù)和業(yè)務(wù)限制而“帶著腳鐐跳舞”，設(shè)計師不是藝術(shù)家，本來就應(yīng)該在資源有限的情況下盡量滿足各方的需求。2.以體驗的方式實(shí)現(xiàn)商業(yè)目標(biāo)前文已經(jīng)提到，用戶體驗也許可以幫助實(shí)現(xiàn)商業(yè)目標(biāo)。在這里需要引入的一個觀點(diǎn)是，商業(yè)目標(biāo)和用戶體驗其實(shí)本就是為了實(shí)現(xiàn)同一個目的：滿足用戶需求。無論是商業(yè)目標(biāo)還是用戶體驗的目標(biāo)，都必須盡量去滿足用戶需求。設(shè)計師要證明設(shè)計方案有價值，就不能單單告訴產(chǎn)品經(jīng)理“用戶體驗更好”，而是進(jìn)一步做到“設(shè)計更好地滿足了用戶需求，從而促進(jìn)了商業(yè)目標(biāo)”。在P4P產(chǎn)品中，我們給用戶提供了產(chǎn)品選擇、關(guān)鍵詞選擇、關(guān)鍵詞調(diào)價、產(chǎn)品質(zhì)量優(yōu)化等各種功能，但是根據(jù)線上數(shù)據(jù)和實(shí)地調(diào)研結(jié)果顯示，用戶并沒有按照我們所期望的頻率去使用這些工具（涉及商業(yè)原因，數(shù)據(jù)未予展示）。如圖3所示，有些用戶對質(zhì)量優(yōu)化工具的作用有疑問。是因為這些工具不能幫助用戶達(dá)到目標(biāo)嗎？顯然不是。P4P產(chǎn)品中的各種優(yōu)化工具，如果使用得當(dāng)?shù)脑?，能夠幫助用戶用最少的錢帶來最好的廣告效果。那是什么原因造成了這種現(xiàn)象呢？在網(wǎng)頁調(diào)查的過程中，設(shè)計師發(fā)現(xiàn)，這些功能的使用方法、使用后的效果，并沒有很好地傳達(dá)給用戶。在一次實(shí)地調(diào)研時，用戶就因為無法理解產(chǎn)品質(zhì)量在排名中的意義，在我們面前錯誤地使用了我們提供的一個工具。一方面，用戶沒有從頁面上很好地了解工具的使用方法，我們也沒有對功能和流程進(jìn)行足夠的優(yōu)化讓一切變得簡便；另一方面，用戶沒有得到足夠的數(shù)據(jù)效果反饋，無法對功能產(chǎn)生認(rèn)同感，很難形成操作習(xí)慣。根據(jù)“新手用戶、中間用戶、專家用戶”的理論，我們沒能很好地引導(dǎo)用戶從新手用戶轉(zhuǎn)變?yōu)橹虚g用戶。找到了問題所在，我們開始討論解決方案。之前，P4P后臺一直使用彈窗和Banner的形式來刺激用戶使用功能，這兩種方式也在數(shù)據(jù)上取得了比較好的效果。的確，剛進(jìn)入網(wǎng)頁就有一個彈窗提醒你使用功能，一旦不采納，下次進(jìn)入網(wǎng)頁還會彈出來，這種情況下有一部分用戶會選擇點(diǎn)擊那個醒目的橙色“確認(rèn)”按鈕。不過，采用這種方式，用戶即使點(diǎn)擊了確認(rèn)，使用了功能，其實(shí)還是沒有弄清楚到底P4P產(chǎn)品的各項功能分別是什么。這一點(diǎn)上，P4P后臺沒有做到“授人以漁”。我們發(fā)現(xiàn)，這似乎是一個可以用優(yōu)化用戶體驗的方式解決的問題。如果我們能夠讓用戶更了解P4P產(chǎn)品，那么用戶的活躍度就會提升。基于這樣一個假設(shè)，設(shè)計師提出了“游戲化”的用戶培育模式。游戲化，簡單來說是指用游戲機(jī)制來解決非游戲場景中的問題，讓用戶在交互中找到樂趣，包括的要素有：成就機(jī)制、獎勵機(jī)制、任務(wù)機(jī)制等。例如百度貼吧的連續(xù)簽到、支付寶的搶紅包等，都是典型的游戲化設(shè)計。對于P4P后臺，我們不能設(shè)計得過于“可愛”，但是這不妨礙我們用游戲化的方式調(diào)動用戶的積極性。例如，用更夸張的成功反饋，提升用戶完成任務(wù)時的愉悅度，這完全是可以做到的。我們的設(shè)計主要圍繞“任務(wù)機(jī)制”和“獎勵機(jī)制”，根據(jù)用戶的不同級別，設(shè)計了不同的任務(wù)讓用戶去完成，并給予不同的任務(wù)獎勵。如圖4所示，用戶在完成任務(wù)的過程中既熟悉了后臺的各種操作，也獲得了獎勵。為了保證用戶真正了解P4P產(chǎn)品，我們引用了引導(dǎo)游戲新手的做法——邊學(xué)邊做。在這里，新手引導(dǎo)不再是一段需要閱讀的文字或者單純地點(diǎn)擊“下一步”就能略過的Tips。用戶需要以完成任務(wù)為目的去主動學(xué)習(xí)P4P產(chǎn)品的使用方式，這樣結(jié)合學(xué)與做，用戶記憶和理解的效果會遠(yuǎn)勝于單純的閱讀說明（想想有多少用戶在點(diǎn)擊“我知道了”來關(guān)閉窗口時，是真正“知道”了呢？），如圖5所示。關(guān)于用戶等級和獎勵的劃分，產(chǎn)品經(jīng)理比設(shè)計師更專業(yè)，因為他們對于產(chǎn)品的整體把控要強(qiáng)于設(shè)計師。眾所周知，游戲的難度設(shè)計是一個重點(diǎn)，對于P4P產(chǎn)品而言更是如此，畢竟用戶的心理預(yù)期是面對一款嚴(yán)肅的商業(yè)產(chǎn)品，一些調(diào)動積極性的互動會很有意思，但是如果任由游戲搶走了用戶真實(shí)任務(wù)的地位，那么游戲化就會變成累贅，做得越好，越累贅。同樣，盡管要推行游戲化的設(shè)計思路，但是由于用戶都是比較務(wù)實(shí)的商務(wù)人員，我們也不能奢望一些榮譽(yù)成就，比如“冠軍用戶”或者“P4P專家”這樣的頭銜，能夠打動用戶，雖然這些在社交類產(chǎn)品中通常能夠吸引到大批用戶。我們應(yīng)從始至終地貫徹“現(xiàn)金紅包”的實(shí)惠獎勵。確定好了方向，一些細(xì)節(jié)上的設(shè)計，可以讓這個游戲更“耐玩”一些。因此，我們在設(shè)計時遵守了幾條準(zhǔn)則：確保任務(wù)線路要短，減少用戶中途中斷的可能性；在用戶主動觸發(fā)任務(wù)時才展示，而不是強(qiáng)制讓用戶參與；保證游戲化與P4P產(chǎn)品主要功能的獨(dú)立性，即使用戶不參與任務(wù)，也能完整地使用P4P產(chǎn)品。目前，游戲化的P4P培育模式已經(jīng)上線，并取得了很好的效果。數(shù)據(jù)顯示有效操作的用戶人數(shù)提升了很多，客戶服務(wù)端也表示用戶反饋較好。運(yùn)用設(shè)計思維解決商業(yè)問題，我們不敢斷言一定會取得成功，但是這讓我們看到了設(shè)計與業(yè)務(wù)合作的更多可能，正如文章開頭所說，絕不僅僅只有界面層的優(yōu)化。希望對您有所啟發(fā)。作者郵箱：xuyuan.xiangxy@設(shè)計需求分析及模板文/姜俊科學(xué)的設(shè)計過程可以體現(xiàn)設(shè)計價值。在設(shè)計中，需求分析是重要且必需的，是對用戶和商業(yè)深入理解的過程，只有弄清楚商業(yè)目標(biāo)和用戶訴求，才能形成正確的設(shè)計假設(shè)，定義用戶需要的體驗感受，就如KellyHoppen（凱麗赫本）所說：“我很擅長于想像人們可能希望在這個空間中感受什么，設(shè)計不只是放一個床墊或者放一把椅子那么簡單，需要考慮整個空間會是怎樣的，并且還要想象人們在那個空間中會有怎樣的感覺，我認(rèn)為這就是你確保設(shè)計成功的辦法?！痹O(shè)計是理性的思考、感性的表達(dá)，設(shè)計的最終目的是解決問題，設(shè)計需要“超以象外，得其圓中”的思考。在商業(yè)設(shè)計活動中，設(shè)計要驅(qū)動業(yè)務(wù)增長，只有設(shè)計才能讓100萬增值到1000萬。讓設(shè)計產(chǎn)生溢價是設(shè)計的目標(biāo)之一。好的設(shè)計要從科學(xué)的需求分析開始。本文向大家介紹一套設(shè)計模板，包括需求分析思路、模板結(jié)構(gòu)等內(nèi)容。我們從設(shè)計流程開始了解，它包括：Idea、ConceptualDesign、Kickoff、DetailedDesign、Development、Test、Release，如圖1所示。圖作者：王哲歆本文所講的需求分析思路是在Idea和ConceptualDesign（Checkpoint1）階段，設(shè)計文檔模板應(yīng)用在DetailedDesign階段，其他節(jié)點(diǎn)內(nèi)容不是本文重點(diǎn)。了解設(shè)計需求分析在設(shè)計流程中所處的位置，我們再看設(shè)計需求分析本身的思維框架。1.商業(yè)方面明確商業(yè)目標(biāo)。明確商業(yè)目標(biāo)要理解：需求來源（背景）、現(xiàn)狀（定性定量）。2.用戶方面明確用戶目標(biāo)（訴求）。用戶目標(biāo)得出過程是：找出目標(biāo)用戶，形成用戶訴求。3.設(shè)計方面（1）形成設(shè)計假設(shè)。形成設(shè)計假設(shè)要理解：原始商業(yè)目標(biāo)、原始商業(yè)假設(shè)、用戶訴求。補(bǔ)充一下，為什么說是假設(shè)呢？因為在未被證明正確有效之前，我們都認(rèn)為這是假設(shè)。（2）明確設(shè)計關(guān)鍵點(diǎn)。設(shè)計關(guān)鍵點(diǎn)得出過程：設(shè)計假設(shè)、所有使用場景、形成典型場景、分解用戶任務(wù)、推導(dǎo)設(shè)計關(guān)鍵點(diǎn)。需要注意的是，設(shè)計關(guān)鍵點(diǎn)是優(yōu)先考慮用戶主任務(wù)，這也影響了視覺設(shè)計的層次表達(dá)。（3）明確產(chǎn)生的現(xiàn)象和指標(biāo)。指標(biāo)不僅是商業(yè)指標(biāo)，還包括用戶行為和態(tài)度指標(biāo)，指標(biāo)是量化可衡量的，它可設(shè)定為“目標(biāo)類型+產(chǎn)生的現(xiàn)象+具體指標(biāo)”，例如，易用性，提升發(fā)布表單填寫完整率至90%；效率，提升用戶填寫表單用時從3分鐘縮短至2分鐘。以上就是設(shè)計需求分析思路，概括起來如圖2所示。另外，評估指標(biāo)方面，因不是本文的重點(diǎn)，只做簡單描述，其評估的維度包括以下方面，如圖3所示?！袢蝿?wù)完成維度（Tasksuccess）●接受維度（Adoption）●留存維度（Retention）●情感愉悅維度（Happiness）●產(chǎn)品（品牌）認(rèn)知維度（Identification）設(shè)計需求分析思路對應(yīng)到設(shè)計文檔結(jié)構(gòu)，如圖4所示?；谝陨系姆治鏊悸泛驮O(shè)計文檔結(jié)構(gòu)，現(xiàn)通過一個應(yīng)用實(shí)例幫助大家更好地理解，不用太關(guān)注應(yīng)用案例的細(xì)節(jié)，因為需要結(jié)合業(yè)務(wù)背景才能理解，如圖5至圖9所示。以上案例文檔結(jié)構(gòu)比較完整，比較適合一個大型的或新的業(yè)務(wù)項目，我們在日常工作中多數(shù)為快速迭代的中小型項目，為提高設(shè)計效率，我們通常會簡明扼要地呈現(xiàn)設(shè)計分析過程，如圖10所示。從簡版設(shè)計文檔中可以發(fā)現(xiàn)，只是呈現(xiàn)的簡化，設(shè)計分析其實(shí)是完整的，其中包括：背景、目標(biāo)、用戶路徑、設(shè)計關(guān)鍵點(diǎn)、頁面框架、衡量指標(biāo)、可能的風(fēng)險。層層分解，層層關(guān)聯(lián)，一頁就能看明白分析的邏輯。需要說明一下，其中的“頁面框架”和“可能的風(fēng)險”，這兩塊其實(shí)不在設(shè)計需求分析環(huán)節(jié)內(nèi)，它是具體設(shè)計階段的工作，有些側(cè)重呈現(xiàn)整體方案的要點(diǎn)。我們?nèi)粘９ぷ髦薪?jīng)常遇到的是頁面、頻道改版類項目，側(cè)重用戶認(rèn)知和行動轉(zhuǎn)化率。這里也給大家展示一個頁面瀏覽型案例的設(shè)計分析過程作為參考，新奇頻道首頁設(shè)計案例，如圖11至圖14所示。競品分析。通過商業(yè)假設(shè)關(guān)鍵點(diǎn)和競品分析，設(shè)計思考如圖14所示。頁面中這些模塊是常見的，看似普通的背后卻有著深入的思考和定義。這些設(shè)計分析思路需要多多實(shí)踐，萬變不離其宗。請記住，度的把握是不同設(shè)計師之間的變量。設(shè)計分析過程是方案的一部分，設(shè)計方案需要有文檔格式，作為UED團(tuán)隊也有必要統(tǒng)一輸出格式，我們制定了設(shè)計文檔模板和標(biāo)注規(guī)范，如圖15至圖21所示。最后，需求分析是設(shè)計思維的體現(xiàn)，我們需要有意識地練習(xí)并提升這種從具象到抽象的歸納能力，再從抽象到具象的應(yīng)用能力，把握本質(zhì)舉一反三。我們在提升設(shè)計效率方面建立了DPL庫，把基礎(chǔ)通用和業(yè)務(wù)組件封裝固化，這樣就可以把具體“做”的時間減到最少，把更多精力放在設(shè)計分析和研究中，一起努力吧！特別感謝：謝孟庭、楊文波、曹逸、王哲歆、毛并楠，沒有他們的案例和幫助本次分享不能形成，謝謝！作者郵箱：6116306@如何做好交互設(shè)計的專家評審文/曹逸無論身處哪一個UED團(tuán)隊之中，交互設(shè)計師在完成交互稿后都會面臨各種各樣的設(shè)計評審，有UED成員參與的內(nèi)部評審，也有整個項目成員參與的外部評審等。一般來說，內(nèi)部評審作為把控交互產(chǎn)出的第一道關(guān)卡，必須要能夠高效、精準(zhǔn)地給出評審意見。這樣一方面可以提高交互稿的產(chǎn)出質(zhì)量，增加外部評審的一次通過率；另一方面也可以幫助設(shè)計師們在評審中提高自身的專業(yè)水平。在阿里巴巴國際站UED的日常工作流程中，根據(jù)使用場景的不同，交互設(shè)計的組內(nèi)評審會有不同方式：站內(nèi)評審、郵件評審、專家評審……在本章節(jié)中，我們會著重介紹專家評審這種方式。作為組內(nèi)評審的一種方式，專家評審擁有評審結(jié)果客觀、精準(zhǔn)等諸多優(yōu)點(diǎn)。那么，該如何做好一場專家評審呢？一、什么是專家評審在進(jìn)入專家評審的流程之前，首先要了解什么是專家評審。專家評審由“協(xié)作式啟發(fā)性評估（CollaborativeHeuristicEvaluation）”的方法演變而來，它的核心目的是通過檢查現(xiàn)有產(chǎn)品（或原型），找出用戶在與之交互的過程中可能遇到的所有可用性問題。一般而言，該方法適用于所有中、大型項目，如果時間充裕，小型項目也可以采用。二、評審前的準(zhǔn)備階段在進(jìn)行專家評審之前，被評審人需要提前準(zhǔn)備好以下事項。1.采集并明確目標(biāo)用戶的相關(guān)信息。2.梳理出目標(biāo)用戶需要通過該產(chǎn)品（或原型）完成的相關(guān)任務(wù)。對于第一條而言，我們往往采用用戶素描（Persona）的方式來對采集好的用戶信息進(jìn)行展示，在此就不做過多的展開；對于第二條，有多種方法可以選擇，包括故事板（StoryBoard）、用例（UseCase）、情景板（ScenarioBoard）等。一般來說，如果用戶通過產(chǎn)品（或原型）需要完成的任務(wù)不止一個，則按照任務(wù)的優(yōu)先級來進(jìn)行排序——優(yōu)先考慮主要場景下的主要任務(wù)。三、評審中的進(jìn)行階段第一步，被評審人召集3～5個UED的小伙伴（包括被評審人自己）充當(dāng)專家評審員，大家尋覓一個不受干擾的場所（如會議室等私密空間）進(jìn)行接下來的評審工作。第二步，被評審人將準(zhǔn)備階段中準(zhǔn)備好的目標(biāo)用戶信息及需要完成的相關(guān)任務(wù)告知每一位專家評審員，即“什么樣的人”通過待評審的原型要完成“什么樣的任務(wù)”。第三步，從除了被評審人以外的專業(yè)評審員中選出一位充當(dāng)“駕駛員（Driver）”，負(fù)責(zé)將之前定義好的相關(guān)任務(wù)作為目標(biāo)，來使用被評估的產(chǎn)品（或原型）。在執(zhí)行所有任務(wù)的整個過程中，被評審人不能提示駕駛員如何完成任務(wù)或達(dá)成目標(biāo)，但其他專家評審員可以要求駕駛員執(zhí)行一些和達(dá)成任務(wù)相關(guān)的交互動作，比如“我覺得點(diǎn)擊那個按鈕可以進(jìn)入下一步操作，請點(diǎn)一下試試”，如圖1所示。第四步，在駕駛員使用產(chǎn)品的過程中，任何一位專家評審員都可以在任意時刻打斷并提出一個他所發(fā)現(xiàn)的可用性問題，如：“我覺得這個按鈕太不明顯了，用戶根本發(fā)覺不了”。問題提出以后評審員們需要商量一下應(yīng)該如何恰當(dāng)?shù)孛枋鲈搯栴}，然后由被評審人將這個問題記錄下來。比如之前的例子，最終可能會以“詳情頁面上的主行動點(diǎn)太弱，用戶無法感知”的形式被記錄下來。第五步，記錄完成后被評審人可以將所有問題按順序標(biāo)上序號，寫成小卡片并粘在墻上，方便所有的評審員查看，如圖2所示。在這之后即進(jìn)入到打分環(huán)節(jié)，由每一位專家評審員結(jié)合目標(biāo)用戶的相關(guān)信息和需要完成的任務(wù)，對所有貼在墻上的可用性問題的嚴(yán)重性進(jìn)行打分。這里需要注意的是，打分環(huán)節(jié)中每位專家評審員不要交頭接耳，而是應(yīng)該獨(dú)立客觀的對每一個問題的嚴(yán)重性進(jìn)行打分，打分標(biāo)準(zhǔn)如下。0分：該問題無任何嚴(yán)重性，在打分者看來完全不存在可用性問題。1分：該問題有輕微的嚴(yán)重性，雖不影響用戶完成預(yù)定任務(wù)，但無法實(shí)現(xiàn)效率最大化。2分：該問題有一定的嚴(yán)重性，雖不影響用戶完成預(yù)定任務(wù)，但效率（或準(zhǔn)確率）低下，用戶體驗不夠良好。3分：該問題較嚴(yán)重，用戶在某些情況或場景下無法順利完成預(yù)定任務(wù)。4分：該問題非常嚴(yán)重，直接導(dǎo)致用戶有極大的可能性無法順利完成預(yù)定任務(wù)。打分完成后，由被評審人負(fù)責(zé)整理和記錄所有問題的分?jǐn)?shù)，如圖3所示。如果有專家評審員打出了較高的分?jǐn)?shù)（大于或等于2分），可以順便寫下針對該問題的解決方案（如果當(dāng)時想到了的話）。四、評審后的統(tǒng)計和分析階段當(dāng)整個評審環(huán)節(jié)完成后，被評審人需要對專家評審員提出的所有的問題及嚴(yán)重性打分進(jìn)行整理和分析，往往采用如下表所示的形式進(jìn)行統(tǒng)計。其中的“序號”是所有記錄下來的問題序號。“問題描述”就是被評審者對該問題的解釋說明，通常將專家評審員較口語化的語言轉(zhuǎn)換為更為書面的文字?！八陧撁妗敝傅氖窃搯栴}在產(chǎn)品（或原型）中所處的位置，可以用諸如“首頁”、“列表頁”、“詳情頁”等進(jìn)行說明?！蔼?dú)立打分”一般根據(jù)專家評審員的數(shù)量被縱向分割為若干列，如果一共有3位評審員，則分為3列，以此類推。每一列中的數(shù)字代表了每一位評審員的獨(dú)立打分?！捌骄帧笔菍⑺性u審員的獨(dú)立打分取均值。需要注意的是，如果使用Excel等工具來記錄問題和分?jǐn)?shù)，可以在“平均分”這一列加入計算公式，這樣可以更高效地完成統(tǒng)計和分析工作?！胺讲睢奔赐ㄟ^計算，求得某一行所有獨(dú)立打分的方差數(shù)值。和“平均分”類似，被評審員也可以通過在列表中加入公式的方法來高效完成計算工作。列表的最后一列是“建議的解決方案”，這一列并不是必填項，只有當(dāng)提出問題的專家評審員恰好想到了解決問題的方案時，才會由被評審員記錄下來，作為未來優(yōu)化產(chǎn)品（或原型）的參考。完成了所有的統(tǒng)計工作后，開始進(jìn)入列表的分析階段。重點(diǎn)需要分析的數(shù)值有兩個——“平均分”和“方差”。首先，所有平均分大于或等于2分的問題（高嚴(yán)重性問題），都需要被評審人特別關(guān)注，因為這類問題往往具有比較嚴(yán)重的可用性問題，需要進(jìn)行優(yōu)化或修改。其次，方差大于或等于2的問題需要由被評審人考慮是否需要進(jìn)行重新評審，因為各評審員對該問題的嚴(yán)重性打分有著較大的分歧。重新評審時既可以由被評審人根據(jù)自己的經(jīng)驗并結(jié)合產(chǎn)品的實(shí)際情況來給該問題最終定性（低嚴(yán)重性或高嚴(yán)重性），也可以由被評審人和專家評審們再次溝通（通常由專家評審們闡述自己打分的原因及依據(jù)），重新確定這類問題的最終打分。五、優(yōu)化設(shè)計根據(jù)上一環(huán)節(jié)中統(tǒng)計和分析的最終結(jié)果，被評審者制訂出優(yōu)化產(chǎn)品（或原型）的設(shè)計方案。該設(shè)計方案應(yīng)該能夠很好地解決所有高嚴(yán)重性的可用性問題，并應(yīng)以郵件或其他形式通知到之前參加評審的其他專家評審員，確保該方案的合理性得到他們的認(rèn)可。作者郵箱：caoyi.cy@理論到實(shí)踐讓你的界面有視覺層次文/陳雪梅人眼在觀察外界事物時，并不是一次性完成的。比如圖1中的兩張圖，（a）為相機(jī)拍攝的效果，（b）為人眼不移動時看到的效果?？梢园l(fā)現(xiàn)，人眼不能同時產(chǎn)生多個焦點(diǎn)，把視線停留在多個地方，所以設(shè)計師需要考慮的是讓用戶通過眼球移動，按照一定的順序獲取信息，幫助用戶高效自然地獲取和理解信息。要想讓我們設(shè)計的界面能抓住用戶眼球，讓用戶有興趣了解更詳細(xì)的內(nèi)容，一步步遞進(jìn)，那么，界面本身需要有清晰的視覺層次，而不能憑感覺以漂亮為目的來進(jìn)行設(shè)計。本文會分成兩部分，一是做到界面有視覺層次不可缺少的前期分析環(huán)節(jié)，二是通過一個具體的項目來看看實(shí)踐的過程。一、前期了解和分析在開始設(shè)計前，除了對項目本身的背景目標(biāo)有所了解外，視覺設(shè)計師也需要了解一些具體的頁面內(nèi)容以把握后面設(shè)計的指導(dǎo)方向，包括頁面定位、氛圍營造、信息優(yōu)先級和用戶核心行為。1.頁面定位頁面定位是幫助分析頁面信息優(yōu)先級、核心行為的前提，通常包括以下幾方面。●用戶是誰？●用戶來自哪里，即從什么渠道來到該頁面？●頁面內(nèi)容定位，提供什么、不提供什么？●頁面作用。舉個例子：我們在設(shè)計網(wǎng)站一個服務(wù)的新首頁時，雖然頁面是給新老買家共用的，但我們通過分析當(dāng)時平臺用戶對服務(wù)的熟知度，發(fā)現(xiàn)大部分新用戶對服務(wù)本身還不太了解，而有一定熟知度的老用戶一般會通過其他入口參與行為，所以確定了首頁最核心的目標(biāo)用戶是新買家。明確了目標(biāo)用戶，就知道該提供什么內(nèi)容給他們。對于新用戶來說，讓其了解服務(wù)的利益點(diǎn)，介紹并做出第一次行動來感知服務(wù)帶來的效果，是核心的目標(biāo)。這部分分析會有PD、更多的交互參與并給出分析的結(jié)論，但視覺也需要了解，并知道分析的過程。2.了解頁面需要營造的氛圍它能幫助我們判斷哪些元素能達(dá)到目標(biāo)。氛圍可以通過內(nèi)容本身來營造，也可以通過視覺元素設(shè)計來營造，但必須注意營造的氛圍不應(yīng)強(qiáng)過用戶關(guān)注的內(nèi)容本身。氛圍可能有：●新年主題大促●低折扣●信息鮮活●用戶活躍等圖2是我們團(tuán)隊大促活動的正式頁面，圖2-a延續(xù)了預(yù)熱期嘉年華的氛圍，但到活動開始階段氛圍已經(jīng)不是重點(diǎn)，用戶更關(guān)心商品及折扣本身，圖2-b為調(diào)整后將氛圍的營造和類目圖片相結(jié)合的效果，很好地解決了氛圍和內(nèi)容的關(guān)系問題。3.分析信息優(yōu)先級（1）一級信息吸引用戶。假設(shè)用戶只會在這個頁面停留3～5秒，最能夠吸引用戶繼續(xù)瀏覽的是頁面的核心賣點(diǎn)，是一級信息，它必須少而精，在設(shè)計上要重點(diǎn)展示。（2）二級信息幫助理解。有了一級信息的吸引，用戶進(jìn)一步了解內(nèi)容可能會停留3～5分鐘，這時展示二級信息，即提煉的精華內(nèi)容，幫助用戶在盡量短的時間內(nèi)理解信息。（3）三級信息詳細(xì)了解。前兩類信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續(xù)停留更長的時間去詳細(xì)了解，這類信息會更多，在設(shè)計上視覺層級會靠后，或通過交互方式展示、提供入口跳轉(zhuǎn)。信息分級如圖3所示。4.分析用戶核心行為不同類型用戶會在不同階段產(chǎn)生行為，需要在適當(dāng)?shù)碾A段出現(xiàn)合適的內(nèi)容，最終導(dǎo)向的都應(yīng)該是核心行為，如圖4所示。（1）第一類用戶已經(jīng)非常了解產(chǎn)品，來到頁面后不需要查看主體內(nèi)容也會產(chǎn)生行為，這個行為可以稱為該頁面的核心行為，針對它設(shè)計的入口必須能被快速找到，如商品詳細(xì)頁面的購買按鈕。（2）第二類用戶屬于有一定意愿的，他會先看一些提煉的信息，然后產(chǎn)生核心行為。（3）第三類用戶會對詳細(xì)的信息進(jìn)行全面了解后再決定是否行動，如用戶在決定購買商品前會查看評價、查看歷史交易等行為，但這些行為最終是為了導(dǎo)向“購買”這個核心行為。有了這些分析，視覺設(shè)計前我們會先確定大模塊的信息優(yōu)先級和用戶行為優(yōu)先級，如圖5所示。在進(jìn)行細(xì)節(jié)設(shè)計前，視覺還需要對每個模塊內(nèi)的具體內(nèi)容進(jìn)行優(yōu)先級的分析，產(chǎn)出如圖6所示的示意圖并和交互設(shè)計師及業(yè)務(wù)方確認(rèn)，這些都是幫助視覺設(shè)計過程不偏離方向的重要產(chǎn)出物。二、MyAlibaba后臺導(dǎo)航改版實(shí)例2012年第三季度時，我們有個項目是對海外賣家版MyAlibaba（以下簡稱MA）首頁進(jìn)行改版，當(dāng)時MA后臺的視覺已有規(guī)范，但很陳舊，如圖7所示。如果按照原來的規(guī)范進(jìn)行設(shè)計，也能順利地完成需求，但我們的前臺頁面經(jīng)過2012年轟轟烈烈地改版已經(jīng)有了全新的面貌，風(fēng)格也趨向于平面、寬松、簡約，后臺還是多年未變的樣式，體驗相對陳舊而且不統(tǒng)一，同時集團(tuán)提出workinAlibaba的概念，也是時候?qū)笈_進(jìn)行一些改版優(yōu)化了。當(dāng)然統(tǒng)一視覺風(fēng)格不是發(fā)起一個改版項目的唯一目的，最根本的目的是要分析目前界面存在的問題，通過解決問題對界面進(jìn)行優(yōu)化。我把當(dāng)前的MA后臺的大多數(shù)頁面分為兩個模塊：一級二級導(dǎo)航區(qū)、內(nèi)容操作區(qū)。從縮略圖可以看出，目前的設(shè)計導(dǎo)航區(qū)的視覺層級高于內(nèi)容操作區(qū)，如圖8所示。為了重新確定界面視覺層級，先問自己三個問題并回答：從以上問題的解答可初步得出結(jié)論：MA后臺的導(dǎo)航并不是用戶來到后臺首要關(guān)注的元素，它是可以弱化的，但要固定導(dǎo)航的位置，同時清晰表達(dá)當(dāng)前的位置。為了驗證這個分析思路的合理性，我們還需要看看其他網(wǎng)站的做法。1.支付寶首頁的改版。如圖9所示，老版的支付寶首頁視覺層級最高的是導(dǎo)航及推廣的活動。但是，來到支付寶首頁最常用的功能是什么？作為老用戶，我們主要是進(jìn)行登錄操作。新版首頁針對新用戶強(qiáng)調(diào)了支付寶的核心價值，針對老用戶強(qiáng)調(diào)登錄操作，而原先視覺層級很高的導(dǎo)航被弱化，但仍然不失導(dǎo)航的作用。2.Google+界面。Google+界面是典型的以內(nèi)容為中心，導(dǎo)航在左側(cè)被弱化，但用戶需要切換時也能快速找到，同時也清晰地表明了當(dāng)前的位置，如圖10所示。經(jīng)過前面的界面分析及競品分析，后面就可以根據(jù)得出的結(jié)論進(jìn)行設(shè)計了。在設(shè)計過程中，視覺需要解決的主要問題是：導(dǎo)航被弱化后，如何才能做到內(nèi)容和導(dǎo)航的分離，使用戶來到MA后臺后，能快速定位到自己關(guān)注的內(nèi)容模塊。我們也前后嘗試了好幾種方案來達(dá)到這個目的。版本1：將一級導(dǎo)航和頁頭統(tǒng)一用灰色底，形成一個整體，和內(nèi)容分離，如圖11所示。版本2：將導(dǎo)航弱化成灰色，100%通欄設(shè)計，如圖12所示。最后，我們考慮到MA首頁及子頁面的適用性，得出設(shè)計終稿，如圖13所示。在項目推進(jìn)過程中，因為后臺涉及多個業(yè)務(wù)方，而且導(dǎo)航的視覺層級從原來最高降到較低，變化很大，大家雖然覺得前面的分析很有道理，但還是不免擔(dān)心因為視覺層級降低，用戶找不到導(dǎo)航?；跇I(yè)務(wù)方及用戶的接受度，我們借助用研團(tuán)隊的在線調(diào)研工具來驗證哪個設(shè)計更優(yōu)。用研同事選取了上千名海外用戶，將新老版本圖片平均分別發(fā)給用戶，并設(shè)置了兩項任務(wù)：1.首先看到的是MA首頁，需要對自己的產(chǎn)品進(jìn)行管理，讓用戶點(diǎn)擊圖片上的區(qū)域（驗證一級導(dǎo)航）。2.進(jìn)入產(chǎn)品管理頁面，用戶需要發(fā)布新產(chǎn)品，再次點(diǎn)擊（驗證二級導(dǎo)航）。從調(diào)研結(jié)果看：在內(nèi)容定位上，新版本導(dǎo)航用戶點(diǎn)擊率高于老版本，如圖14所示。用戶尋找導(dǎo)航的速度，新版本也大大快于老版本，如圖15所示。用研的數(shù)據(jù)，驗證了新設(shè)計的體驗更優(yōu)于老版本，對之后我們推進(jìn)這個設(shè)計方案落地執(zhí)行并上線，給予了很大的幫助。這個項目整個過程比較完整，我同時扮演了一次項目經(jīng)理的角色，從項目發(fā)起到最終上線全程牽頭，受益很多，讓我看到如何從視覺專業(yè)角度想辦法促進(jìn)產(chǎn)品體驗。我們的設(shè)計是可被衡量的，我們也可以主導(dǎo)發(fā)起需求，來提升用戶體驗甚至促進(jìn)業(yè)務(wù)目標(biāo)達(dá)成。同時，視覺設(shè)計師的價值不僅僅是把界面做得漂亮，更重要的是通過視覺設(shè)計引導(dǎo)用戶的瀏覽路徑，提高用戶獲取和理解信息的效率，這樣才能對用戶、對業(yè)務(wù)有可衡量的作用。作者郵箱：42261647@用戶難觸及？數(shù)據(jù)幫你大膽假設(shè)，小心求證文/王中在時間人力成本都有限的前提下，如何快速抓準(zhǔn)海外用戶的真實(shí)訴求？在前期無法充分驗證設(shè)計提案的情況下，如何保證設(shè)計的有效性？在每日上百萬訪問量的壓力下，如何降低設(shè)計改版帶來的體驗過渡風(fēng)險？希望通過A網(wǎng)站的產(chǎn)品詳情頁面的一次改版設(shè)計，來解答上述問題，總結(jié)“有效的數(shù)據(jù)分析”，給設(shè)計師寶貴的指引。一、為何改版——數(shù)據(jù)大膽假設(shè)用戶痛點(diǎn)在做任何一次產(chǎn)品改版之前，業(yè)務(wù)方和設(shè)計方需要共同明確改版的目標(biāo)和方式。我們往往會碰到一些改版動機(jī)不清晰的情況，甚至還會有為了改版而改版的極端案例。因此，在投入具體改版設(shè)計之前，我們需要有理有據(jù)地分析確定改版需要解決哪些問題。而互聯(lián)網(wǎng)產(chǎn)品快速迭代的特性，往往容不得我們在前期投入大量時間、人力成本，來針對市場和用戶進(jìn)行的大量的調(diào)研和分析驗證，特別是針對海外用戶的產(chǎn)品，直接接觸用戶的成本更高，如何在最短的時間抓準(zhǔn)用戶的訴求和痛點(diǎn)是設(shè)計師在真正設(shè)計前要思考的重中之重。好在對于單頁面的設(shè)計，數(shù)據(jù)往往是我們的利器。單頁面的數(shù)據(jù)獲取成本低，且能反映的用戶行為情況較為全面，能快速幫助我們識別用戶在使用產(chǎn)品時碰到的痛點(diǎn)。在這個階段，設(shè)計師需要基于用戶在該頁面的訴求目標(biāo)（快速找到自己中意的產(chǎn)品）梳理出用戶核心的行為路徑，再對應(yīng)找出能反映這些行為路徑使用情況的數(shù)據(jù)指標(biāo)。例如在產(chǎn)品詳情頁面改版前期，我們會和業(yè)務(wù)方一起將頁面沉淀的所有數(shù)據(jù)梳理出來，如圖1所示。從目標(biāo)用戶出發(fā)，將用戶初步劃分為兩種，一種是在網(wǎng)站其他場景，如產(chǎn)品列表頁，初步篩選了一輪產(chǎn)品的用戶，另一種是未初步篩選產(chǎn)品的用戶，如SEO直接Landing到產(chǎn)品詳情頁的用戶。兩種用戶到達(dá)該頁面的動機(jī)和行動都不相同，我們將不同的行為總結(jié)成用例（UserCase），并將能反映用例情況的頁面內(nèi)容和功能的點(diǎn)擊率、轉(zhuǎn)化率以及上下游頁面等各方面的數(shù)據(jù)列舉出來，推斷出現(xiàn)在頁面的主要問題以及可能的原因，比如從數(shù)據(jù)上發(fā)現(xiàn)，頁面底部的推薦模塊點(diǎn)擊率很高，如圖2所示，而SEO渠道的用戶首屏蹦失率偏高，因此可以做出假設(shè)——首次Landing用戶（特別是SEO渠道用戶），對當(dāng)前產(chǎn)品不滿意的情況很多并無法快速找到其他產(chǎn)品?；谶@些分析假設(shè)，我們接下來就可以和業(yè)務(wù)方一起討論如何解決這些痛點(diǎn)。二、如何改版——數(shù)據(jù)小心求證，修正設(shè)計明確了改版的目標(biāo)和基本解決方案，落到具體設(shè)計層面，設(shè)計師的個人經(jīng)驗為我們提供了有效預(yù)測的能力，但我們也要時常保持懷疑態(tài)度，特別是面對百萬訪問量的產(chǎn)品，一個設(shè)計判斷失誤對用戶體驗的負(fù)面影響不可估量。因此我們需要借助小量數(shù)據(jù)迭代驗證的方法來保證設(shè)計的最終質(zhì)量。我們在這次改版的設(shè)計初期，由于忽略了用戶習(xí)慣的力量，就遇到了類似的經(jīng)驗判斷不準(zhǔn)的情況。為了讓用戶更清晰地獲取供貨信息，也為了日后的拓展性，我們嘗試打破現(xiàn)在的頁面框架，采用類似Amazon的框架結(jié)構(gòu)，將信息和行動區(qū)左右分隔，如圖3所示。但因為這種設(shè)計的變動很大，作為設(shè)計師必須提高警惕，避免判斷錯誤，因此我們沒有全量上線而是選取了很小部分的流量來進(jìn)行A/B測試，監(jiān)控用戶在頁面中核心行為的數(shù)據(jù)變化。數(shù)據(jù)的真實(shí)情況出乎我們的意料。新的結(jié)構(gòu)讓老用戶和新用戶的正向行動率都有所下降。而當(dāng)我們恢復(fù)回原來的頁面結(jié)構(gòu)時，行動率也隨之上升?；剡^頭來反思，這大概就是用戶習(xí)慣的威力。我們對海外主要電商網(wǎng)站的頁面結(jié)構(gòu)進(jìn)行了競爭分析，如圖4所示。兩種頁面結(jié)構(gòu)都存在，但還是前一種結(jié)構(gòu)占主流。這也許就是為什么我們結(jié)構(gòu)的調(diào)整會讓用戶難以接受，甚至新用戶的接受度更低。除了大框架設(shè)計的數(shù)據(jù)驗證，設(shè)計細(xì)節(jié)的數(shù)據(jù)驗證也是必不可少的，往往能幫助設(shè)計，起到四兩撥千斤的作用。通過一輪A/B測試，我們能清晰地對比不同設(shè)計細(xì)節(jié)在數(shù)據(jù)表現(xiàn)上的差異，特別是頁面上可交互的元素，其點(diǎn)擊或hover率的變化能指導(dǎo)我們調(diào)整對應(yīng)的設(shè)計細(xì)節(jié)。例如，在圖5左圖中，我們發(fā)現(xiàn)整個區(qū)域的點(diǎn)擊率下降，且StartOrder等灰色鏈接的點(diǎn)擊率下降比較明顯，因此我們初步判斷，視覺上的弱化影響到了用戶，部分用戶可能未發(fā)現(xiàn)這些鏈接。因此我們立即響應(yīng)，做了一輪快速調(diào)整，即將字體顏色從灰色變?yōu)榱怂{(lán)色，如圖5右圖，點(diǎn)擊率立刻回升。這種多次A/B測試識別設(shè)計問題并迭代驗證的數(shù)據(jù)驗證方法能指導(dǎo)設(shè)計師快速修正設(shè)計方案細(xì)節(jié)，使產(chǎn)品有好的體驗和商業(yè)效果。基于不同產(chǎn)品，數(shù)據(jù)驗證的策略會有所不同，但基本原則是一致的，即排除可能的干擾因素，建立具有可比性的產(chǎn)品驗證環(huán)境，迭代調(diào)整設(shè)計變量來達(dá)到滿意的設(shè)計效果。但值得注意的是，我們在針對設(shè)計細(xì)節(jié)進(jìn)行數(shù)據(jù)分析假設(shè)時，不能一葉蔽目，需要從整理數(shù)據(jù)變化出發(fā)，判斷細(xì)節(jié)數(shù)據(jù)的變化是否合理，并不是某個鏈接的點(diǎn)擊率下降就一定是壞事，而要分析這個鏈接的點(diǎn)擊下降是否牽動了其他更重要的行動?？偠灾?，用戶好才是真的好，如果點(diǎn)擊率的下降能讓用戶更好地通過產(chǎn)品滿足其訴求，我們無須一味追求點(diǎn)擊率的提升。三、改版之外——設(shè)計師的科學(xué)精神互聯(lián)網(wǎng)信息時代作為雙刃劍，一方面讓人與人之間的面對面交流變少，另一方面卻又沉淀收獲了海量用戶的全方位數(shù)據(jù)信息。設(shè)計師應(yīng)該抓住這個契機(jī)，利用數(shù)據(jù)觸及數(shù)據(jù)背后代表的一個個真實(shí)的用戶，用科學(xué)的精神，大膽假設(shè)、小心求證用戶的每一個潛在訴求。同樣，數(shù)據(jù)也是雙刃劍，不同的解讀可能南轅北轍，作為集感性和理性于一身的設(shè)計師，不能讓數(shù)據(jù)來決定設(shè)計，而應(yīng)不忘初心回歸用戶，通過科學(xué)地解讀數(shù)據(jù)來指導(dǎo)佐證設(shè)計，讓數(shù)據(jù)真正成為設(shè)計師的利器。作者郵箱：chuan33@設(shè)計影響行為，行為決定結(jié)果文/董志舟做交互已有幾年了，在做互聯(lián)網(wǎng)交互設(shè)計之前，在華為做了一段時間的工業(yè)設(shè)計，雖說領(lǐng)域不同，但設(shè)計理念都一樣——以人文本、解決問題、以用戶為中心。無論是工業(yè)設(shè)計還是交互設(shè)計，在工作中都會看到設(shè)計師與業(yè)務(wù)方之間的的各種抱怨、交鋒。設(shè)計師認(rèn)為業(yè)務(wù)方不從用戶角度考慮，肆意踐踏用戶體驗，業(yè)務(wù)方覺得設(shè)計師沒有商業(yè)sense，觀點(diǎn)過于偏執(zhí)，總是用一個空洞的“體驗”來說事，是不懂商業(yè)和需求的小朋友。兩撥人暗自爭得面紅耳赤誰也說服不了誰，當(dāng)然之前這種事情在我自己身上也發(fā)生過。后來工作久了，有了更為深刻的認(rèn)識，所以想對設(shè)計師和業(yè)務(wù)方說一句：“本是同根生，相煎何太急”?！案笔鞘裁矗亢芏嗤瑢W(xué)會說“用戶需求”。其實(shí)我認(rèn)為還應(yīng)該有更深層次的理解——商業(yè)成功。說出這四個字的時候，我心里其實(shí)已經(jīng)準(zhǔn)備好接受大家的質(zhì)疑了。不過，先聽我給你講述一個幾個月前我經(jīng)歷的項目。在這個項目中我和業(yè)務(wù)方合作得非常愉快，既提升了體驗又拿到了業(yè)務(wù)結(jié)果，皆大歡喜。項目做完之后，自我總結(jié)了一下，有一些關(guān)于設(shè)計和商業(yè)之間的思考，說出來給大家聽聽。這個項目是對某個產(chǎn)品的搜索結(jié)果列表頁（簡稱List）進(jìn)行改版。對于電商網(wǎng)站，首頁、列表頁、詳情頁、購物車、訂單、支付、物流、評價，這些就是基本流程。列表頁在這條鏈路中負(fù)責(zé)的就是幫助用戶高效查找、對比產(chǎn)品，最終體現(xiàn)在衡量標(biāo)準(zhǔn)上，業(yè)務(wù)上的核心指標(biāo)就是L-D（List-Detail，列表頁到詳情頁）的轉(zhuǎn)化率，實(shí)際的意義就是讓更多的用戶去看某一個的產(chǎn)品的詳細(xì)情況，從而決定購買或其他交易行為。我是怎么做的呢？之前的一些需求和背景分析、數(shù)據(jù)分析、設(shè)計目標(biāo)在這里就不多說了，最終設(shè)計方案如下。一、優(yōu)化關(guān)鍵詞輸入，提高關(guān)鍵詞輸入效率。解決方案是關(guān)鍵詞自動填充、智能聯(lián)想、相關(guān)搜索等。改進(jìn)前：沒有優(yōu)化關(guān)鍵詞輸入，如圖1所示。改進(jìn)后：優(yōu)化關(guān)鍵詞輸入，如圖2所示。二、提高篩選項的使用率。解決方案是將下拉式調(diào)整為平鋪式，排序規(guī)則選項更為顯性化。改進(jìn)前：下拉式篩選項，如圖3所示。改進(jìn)后：平鋪式篩選項，如圖4所示。三、調(diào)整Item信息的內(nèi)容及展現(xiàn)方式，突出核心信息展示。解決方案是增加對買家有吸引的內(nèi)容及視覺要素，并且將默認(rèn)的大圖模式（Gallery）改為列表模式（List），便于用戶對比產(chǎn)品，聽起來是不是很有邏輯？先記住它，這是個伏筆。以一個產(chǎn)品為例。改進(jìn)前：默認(rèn)大圖模式（Gallery），如圖5所示。改進(jìn)后：列表模式（List），如圖6所示。在這里還通過視覺樣式去引導(dǎo)用戶點(diǎn)擊關(guān)鍵行動點(diǎn)，比如整個Item添加鼠標(biāo)hover時的陰影、鼠標(biāo)hover在標(biāo)題上會出現(xiàn)下畫線、產(chǎn)品圖片尺寸加大，等等。四、類目及屬性篩選優(yōu)化，因為這是用戶最常用的。解決方案是將類目篩選與屬性篩選做明顯的視覺區(qū)分，讓用戶更容易注意并使用類目篩選。改進(jìn)前：類目及屬性篩選不明顯，如圖7所示。改進(jìn)后：把用戶使用頻率最高的類目區(qū)域強(qiáng)化，如圖8所示。五、改進(jìn)推薦產(chǎn)品規(guī)則，加強(qiáng)推薦的精準(zhǔn)性（這個是業(yè)務(wù)范疇，在此不做詳細(xì)闡述）。六、其他一些改進(jìn)。產(chǎn)品功能做了這么多改進(jìn)，每個都能對用戶體驗有所提升。那么理論上L-D（列表頁到詳情頁）的轉(zhuǎn)化率一定會大幅上升。但是上線后，轉(zhuǎn)化率居然并沒有明顯提升！這是為什么呢？我和業(yè)務(wù)方的產(chǎn)品經(jīng)理都感到很詫異，找來上線后幾天的數(shù)據(jù)仔細(xì)分析，發(fā)現(xiàn)了以下幾個現(xiàn)象。1.篩選、排序等功能的使用率提升了5～6倍。2.改版前后第一頁的產(chǎn)品數(shù)量沒有變化，但是從前到后（從第1個到第30個）產(chǎn)品點(diǎn)擊率的衰減趨勢有很大不同。如圖9所示，具體數(shù)據(jù)不方便在此披露，僅僅用示意圖來展示一下趨勢。通過圖9可以看出，相比大圖模式來講，列表模式下流量會更多地集中在前邊幾個產(chǎn)品上?？傮w來講，用戶看的產(chǎn)品少了，看到感興趣的產(chǎn)品的幾率變小了，轉(zhuǎn)化率自然就降低了。但是為什么列表模式下用戶看的產(chǎn)品更少？我們仔細(xì)對比了兩種不同排版的頁面，如圖10所示。稍微觀察一下不難發(fā)現(xiàn)，在相同的屏幕尺寸下，大圖模式比列表模式展示的產(chǎn)品更多，難道是因為這個原因嗎？有問題不可怕，可怕的是不知道問題是什么。有了假設(shè)，我們就來驗證一下。為了謹(jǐn)慎，我們選擇了3C類目做了測試，恢復(fù)為默認(rèn)大圖模式，別的功能都沒更改。幾天后，3C類的轉(zhuǎn)化率果然上升了，比原來的老版本還高了不少。問題找到了，原來雖然別的改進(jìn)點(diǎn)都促進(jìn)了轉(zhuǎn)化率，但是列表模式拉低了轉(zhuǎn)化率，導(dǎo)致整體轉(zhuǎn)化率變低。原來用戶連滾動鼠標(biāo)滾輪這點(diǎn)成本都不愿意付出。這時候又出現(xiàn)一個疑問，如果是這樣，那其他網(wǎng)站（淘寶、天貓、亞馬遜）為什么默認(rèn)為列表模式呢？因為是別人的產(chǎn)品，所以沒法用數(shù)據(jù)來驗證。但是我猜想，原因可能有兩個。一、產(chǎn)品搜索結(jié)果相關(guān)性是影響轉(zhuǎn)化率的因素里最重要的一個，而我們這個探索型業(yè)務(wù)中相關(guān)性還做得不夠，在這個條件下，其他的因素就可能比較重要了。這個猜想，需要改進(jìn)搜索算法提升相關(guān)性后才能驗證。二、這塊業(yè)務(wù)新用戶比較多，用戶本身的留存也不高。這個看一下不同訪客類型的點(diǎn)擊數(shù)據(jù)可以驗證，尤其是新老用戶的對比。出于資源和時間考慮，后續(xù)沒有針對猜想做驗證。但是把每頁產(chǎn)品數(shù)量增加到45個之后，轉(zhuǎn)化率又上升了一些，更佐證了前邊的結(jié)論——“滾動鼠標(biāo)滾輪也是成本”。好了，案例看完了，回到剛開始我的觀點(diǎn)，設(shè)計師和業(yè)務(wù)方那個共同的“根”其實(shí)應(yīng)該是“商業(yè)目標(biāo)”?；仡欉@個項目，你看出來交互和產(chǎn)品經(jīng)理存在明顯的職責(zé)劃分了嗎？是不是很多都融合到一起了？我和產(chǎn)品經(jīng)理的關(guān)注點(diǎn)都是一致的，提升轉(zhuǎn)化率。只不過我側(cè)重用優(yōu)化體驗的方式，比如篩選的可用性、信息的層級突顯、不同的信息框架。產(chǎn)品經(jīng)理側(cè)重于功能，比如搜索相關(guān)性的提高。作為交互設(shè)計師，我沒有糾結(jié)于篩選項用下拉列表是否更簡潔，也沒有糾結(jié)于產(chǎn)品信息用列表從邏輯上是否更符合用戶的對比需求。因為這都是邏輯推斷，可能用戶并不在意，所以我從結(jié)果數(shù)據(jù)去分析用戶的行為，然后通過設(shè)計的手段去改進(jìn)，這種方法有理有據(jù)，不管是內(nèi)部設(shè)計師、產(chǎn)品還是運(yùn)營，大家都能明白是怎么一回事。在和產(chǎn)品經(jīng)理的合作過程中沒有常見的“爭論”，有的只是對同一個目標(biāo)的追求，遇到問題互相討論解決，合作得很愉快，并且最終商業(yè)目標(biāo)也達(dá)成了，用戶的體驗也得到了改善?？此茮]什么，其實(shí)我是有自己的一套理念的，大概的表述如圖11所示。用一句話解讀這個圖：功能、設(shè)計、性能這些都有會影響產(chǎn)品的具體形態(tài)，產(chǎn)品的具體形態(tài)進(jìn)一步影響了用戶怎么去使用產(chǎn)品，用戶的行為決定了產(chǎn)品的成敗，最終，影響到公司愿景的實(shí)現(xiàn)。看懂了這張圖，你就知道了設(shè)計師的價值在哪兒，也可以解決很多工作中的疑問。下面再來深度解讀一下這張圖。首先，體驗和商業(yè)根本不沖突。一家成功的公司，一款成功的產(chǎn)品，用戶的需求和公司的需求從來就不曾有過矛盾，公司都是通過滿足用戶的需求來實(shí)現(xiàn)自己的目標(biāo)的。產(chǎn)品能提供用戶所需之物，這本身就是一種良好的用戶體驗，即使產(chǎn)品本身界面不是很好用也不夠漂亮，比如早期的快的打車和滴滴打車，只顧當(dāng)前數(shù)據(jù)漂亮而誘導(dǎo)用戶去使用，也是只完成了自己的KPI，跟公司要滿足的需求還相去甚遠(yuǎn)。優(yōu)秀的體驗也可以讓更多用戶使用產(chǎn)品并