支付宝体验设计精髓
支付寶體驗設(shè)計精髓
支付寶AUX團(tuán)隊 著
吳明 ?主編
圖書在版編目（CIP）數(shù)據(jù)
支付寶體驗設(shè)計精髓/支付寶AUX團(tuán)隊著. —北京：機(jī)械工業(yè)出版社，2016.9
ISBN 978-7-111-54888-1
I. 支… II. 支… III. 電子商務(wù)―支付方式―研究 IV. F713.361.3
中國版本圖書館CIP數(shù)據(jù)核字（2016）第226108號
支付寶體驗設(shè)計精髓
出版發(fā)行：機(jī)械工業(yè)出版社（北京市西城區(qū)百萬莊大街22號 郵政編碼：100037）
責(zé)任編輯：孫海亮 責(zé)任校對：董紀(jì)麗
印 刷：中國電影出版社印刷廠 版 次：2016年10月第1版第1次印刷
開 本：170mm×230mm 1/16 印 張：19
書 號：ISBN 978-7-111-54888-1 定 價：79.00元
凡購本書，如有缺頁、倒頁、脫頁，由本社發(fā)行部調(diào)換
客服熱線：（010）88379426 88361066 投稿熱線：（010）88379604
購書熱線：（010）68326294 88379649 68995259 讀者信箱：hzit@hzbook.com
版權(quán)所有侵權(quán)必究
封底無防偽標(biāo)均為盜版
本書法律顧問：北京大成律師事務(wù)所 韓光 / 鄒曉東
推薦序1
此書凝聚了支付寶從工具產(chǎn)品走向生活服務(wù)平臺的設(shè)計實戰(zhàn)精華，推薦閱讀！
——樊治銘 螞蟻金服支付事業(yè)群總裁
推薦序2
特別喜歡書中的一段話：“設(shè)計就是設(shè)計生活，設(shè)計人生，需要用感性的右腦加理性的左腦去分析問題、解決問題，讓設(shè)計、生活、人生變得更加美好。”
支付寶一直希望能通過這個平臺給人們的生活帶去美好而充滿微笑的改變。AUX團(tuán)隊在多年的專業(yè)積累和實踐沉淀的基礎(chǔ)上，帶著對用戶、對產(chǎn)品的熱愛與感情，全心投入在這個平臺的設(shè)計上。 團(tuán)隊有分工，設(shè)計無邊界，學(xué)習(xí)無止境。欣賞AUX團(tuán)隊在工作中不斷總結(jié)、思考和沉淀的習(xí)慣，也期待讀者朋友們從他們的實踐和思考中有所收獲。
——陶瑩 螞蟻金服集團(tuán)人力資源部資深總監(jiān)
推薦序3
小學(xué)時我有一個關(guān)系很好的同學(xué)，他的父親在民航局工作，家里有一些過期的航機(jī)雜志。我無意中在他家發(fā)現(xiàn)了這些雜志，便如獲至寶，因為這些雜志上有上世紀(jì)八十年代非常少見的很多國外品牌的廣告。那些經(jīng)過精心設(shè)計、印刷在銅版紙上的精美畫面到現(xiàn)在還深深印在我的腦海里，尤其是在那個電視里充斥著中華鱉精和燕舞收錄機(jī)的年代，YSL的鴉片香水、Marlboro的牛仔以及人頭馬的X.O廣告，讓我淳樸的心靈受到了巨大的沖擊—原來世界可以這樣美。
二十多年過去了，今天我穿著淘寶上一個叫“國棉壹廠”的店鋪出品的Vintage風(fēng)格的全棉T恤，上面印刷著上個世紀(jì)八十年代早期的畫面，穿在身上覺得舒服體貼。我在一個叫“南食召”的店鋪買土面，用牛皮紙包裹著送到家里，沸水煮開，加一點豬油和生抽，鮮美無比—原來我曾經(jīng)所摒棄的東西也這么美。
美，未必出塵不染，柴米油鹽也是美。今天我們面臨的產(chǎn)品設(shè)計領(lǐng)域，又何嘗不是如此？有人追求“逼格”，有人追求實用，但其實無論哪種，適合自己的才是最好的。
從來沒有一個產(chǎn)品如支付寶這樣廣受爭議。盡管三年的時間里，它從一個日活百萬級的產(chǎn)品成長為一個日活近億級的產(chǎn)品。
也從來沒有一個團(tuán)隊如支付寶的設(shè)計團(tuán)隊一樣承受著巨大的壓力。盡管他們沒有任何成熟的經(jīng)驗可以模仿和借鑒，只能獨(dú)自在這個星球上摸索前行。
但是，我相信，這個團(tuán)隊追求美的步伐從未停止，也不會停止。
從PC時代到移動互聯(lián)網(wǎng)時代，支付寶面對的挑戰(zhàn)、要甩掉的歷史包袱太多太多，更何況，伴隨著時代的變遷，原本的支付工具已經(jīng)逐漸成為一種生活方式，它需要承載的東西也越來越多。在幾億用戶面前做這些改變，無異于為一輛高速行駛的列車換車輪。
我們欣喜地看到，支付寶的設(shè)計團(tuán)隊完成了這一高難度動作，同時還總結(jié)出了積累的經(jīng)驗，并愿意與世界分享這些經(jīng)驗。也許這些經(jīng)驗并不那么完美，但貴在真實，而真實就是最美的東西。
吳明邀請我給這本書寫個序言，我覺得我作為一個文科生似乎沒有資格寫什么，但在抽了七根煙之后，還是決定試一試，就當(dāng)我為這個團(tuán)隊所做的一切道一聲感謝，謝謝你們讓支付寶成為我生活的一部分。
—陳亮
螞蟻金服集團(tuán)用戶體驗設(shè)計委員會主席
螞蟻金服集團(tuán)品牌和公眾溝通部總經(jīng)理
推薦序4
對于逐漸成熟的互聯(lián)網(wǎng)用戶體驗行業(yè)，很多曾經(jīng)摸著石頭過河的團(tuán)隊和設(shè)計師已經(jīng)身經(jīng)百戰(zhàn)、經(jīng)驗豐富。然而他們更熱衷于將自己的經(jīng)驗總結(jié)成可復(fù)制的專業(yè)方法，并毫無保留地分享出來，這就是互聯(lián)網(wǎng)精神之所在—開放與分享。
支付寶UED就是這樣的一個經(jīng)驗豐富、樂于分享的團(tuán)隊。這里的設(shè)計師有著敏銳的用戶洞察，同時也具備良好的產(chǎn)品意識。他們在互聯(lián)網(wǎng)金融用戶體驗領(lǐng)域積累了大量的經(jīng)驗，本書通過大量的實踐、不同設(shè)計師的視角、多維度地詮釋了支付寶產(chǎn)品的體驗設(shè)計思路與方法，實實在在的干貨，值得一讀。
—楊光
阿里巴巴集團(tuán)UED委員會委員長
阿里巴巴集團(tuán)消費(fèi)者事業(yè)群UED資深總監(jiān)
推薦序5
用戶體驗這一概念肇始于計算機(jī)領(lǐng)域，蘋果公司原副總裁唐·諾曼博士在上世紀(jì)九十年代中期就提出了“用戶體驗”（User Experience，簡稱UX）最早的定義。經(jīng)過業(yè)者不斷豐富其內(nèi)涵，延伸其外延，今天我們談?wù)摰摹坝脩趔w驗”實際上已經(jīng)成為了驅(qū)動產(chǎn)品與服務(wù)創(chuàng)新的重要抓手。用戶體驗從最初階段符合好用、易用、易學(xué)、防止出錯的基本可用性原則，到今天滿足包括美感、社會身份表達(dá)在內(nèi)的多維度多層次的“整體體驗”，完成了自身的階段性進(jìn)化。離開產(chǎn)品與服務(wù)及其應(yīng)用場景，空談“情懷”、妄談“體驗”必然會被市場淘汰，被用戶拋棄。大浪淘沙，不破不立，在行業(yè)跨越式發(fā)展的過程中，既涌現(xiàn)出了眾多可喜的創(chuàng)新閃光點，漸次豐富充實了用戶體驗的大概念；也無疑或多或少雜糅進(jìn)一些以偏概全的想法、曲解的理念，甚至是有違用戶友好基本原則的“暗黑實踐”。
同時，用戶體驗的具體工作，并非無源之水、無本之木。從理論到實踐，國內(nèi)外各行業(yè)都已經(jīng)有了非常完整的體系。可以說，中國企業(yè)的用戶體驗工作實踐，從誕生之日起就可與國際同行一爭高下。換言之，多數(shù)情況下，我們不必“重新發(fā)明輪子”，依照一定之規(guī)即可釋放出用戶體驗工作對產(chǎn)品與服務(wù)再造的巨大影響力。
但是，當(dāng)今市場對“用戶體驗”概念的理解還有很多不同的看法，甚至還存在部分“庸俗化”的理解。片面且簡單地將孤立的“主觀感受”理解成整體的“用戶體驗”，將提升用戶滿意度異化為就是提升“用戶體驗”。在行業(yè)內(nèi)談提升用戶體驗，已經(jīng)到了必須“書同文，車同軌”的階段。只有厘清概念，才能在正確的方向上探討如何提升用戶體驗，最終提升產(chǎn)品與服務(wù)的整體水平。
十余年來，作為行業(yè)的引領(lǐng)者，UXPA中國始終屹立于用戶體驗發(fā)展的潮頭。以促進(jìn)用戶體驗事業(yè)在中國乃至全球的發(fā)展為己任，不斷傳播正確的用戶體驗理念，探索有效的用戶體驗方法，推廣高效的用戶體驗實踐。在這個過程中，我們深刻體會到，要完善用戶體驗，單靠用戶體驗的從業(yè)者是遠(yuǎn)遠(yuǎn)不夠的。真正的用戶體驗之道在于融合，不斷與其他行業(yè)和領(lǐng)域碰撞、互動、包容，甚至浴火重生，才能使用戶體驗之樹長青。
阿里巴巴在歷史上就有高度重視用戶體驗設(shè)計的傳統(tǒng)，與馬云一起創(chuàng)業(yè)的十八羅漢中就有兩位是設(shè)計師—盛一飛（James）和麻長煒（二當(dāng)家）。在阿里工作期間，我和本書的主編吳明曾共事過。今天，支付寶AUX團(tuán)隊能毫無保留地將用戶體驗設(shè)計實踐與大家分享，真是善莫大焉。這里面，既有生動活潑的案例，又有對UX設(shè)計經(jīng)驗的總結(jié)和升華。用本書中提到的一句話來講，即“設(shè)計賦能商業(yè)”。相信這本書對行業(yè)同仁有一定的啟發(fā)和借鑒意義。
—陶嶸 博士
中國用戶體驗專業(yè)協(xié)會（UXPA）主席
浙商銀行總行個人銀行部總經(jīng)理
推薦序6
“打開錢包之后，除了安全，還必須有熟悉的、驚喜的體驗。”
支付寶的產(chǎn)品體驗挑戰(zhàn)與集團(tuán)內(nèi)部電商體系的產(chǎn)品鏈路構(gòu)建截然不同。
拜讀小伙伴的精華總結(jié)之后，收獲何其多。作為集團(tuán)UED大學(xué)的負(fù)責(zé)人，樂見這樣的總結(jié)分享，能夠拋磚引玉，拉動行業(yè)內(nèi)生活金融產(chǎn)品的體驗更上一層樓。用生活的經(jīng)驗來比喻和解釋支付寶的產(chǎn)品體系，每一個場景接入就如同用戶在一個地鐵系統(tǒng)內(nèi)行走，讓一個城市生活鏈路串接的信息框架整合在一個產(chǎn)品內(nèi)。在此系統(tǒng)內(nèi)的每一個入口/出口可以是餐廳、購物商城、政府機(jī)關(guān)、小區(qū)場景等。
小入口可以是電影，也可以是生活繳費(fèi)；大入口可以是個人金融、外賣、線下餐飲。而電影院、餐廳、商城等則是用戶路線下的場景實現(xiàn)點。而過程中的數(shù)據(jù)積累，最終由每個支付閉環(huán)的終端獲取整個路線上的最大化數(shù)據(jù)。最終形成由用戶實際生活路線構(gòu)建的用戶個人數(shù)據(jù)生態(tài)與習(xí)慣，也就是帶有安全感的產(chǎn)品使用慣性。
本書從以用戶為中心的視角，剖析了用戶的體驗旅程與產(chǎn)品鏈路不斷優(yōu)化的深度。在一個產(chǎn)品體驗框架下，讓使用者有共同的標(biāo)準(zhǔn)和依據(jù)來進(jìn)行探索，幫助用戶在版本變換的過程中，不同生活場景的變化中，以及碎片式?jīng)Q策的過程中，仍然能夠做出符合期望的決定。
從支付寶的產(chǎn)品體驗設(shè)計案例中，我個人也收獲了許多產(chǎn)品體驗的最佳實踐原則：
通過平衡、對稱和階層來形成信任和完整感，像是格線設(shè)計對應(yīng)主、輔助指標(biāo)圖標(biāo)的配置。
以通用度高的扁平視覺顯性指示，讓不同年齡層的用戶都可以理解，包括有部分前期障礙（跨文化理解、場域熟悉性）的使用者。通過系統(tǒng)實時反饋使用者的行為，為接續(xù)的互動做好準(zhǔn)備，預(yù)防并減少錯誤。
以直覺式的經(jīng)驗互動回饋，激發(fā)使用者的操作自信。并通過高相關(guān)度的任務(wù)銜接，任務(wù)相關(guān)性的就近原則，讓使用者在尋路過程中保持愉悅。
讓使用者連接他們過去熟悉的共同脈絡(luò)，從而在低學(xué)習(xí)成本的成就感中繼續(xù)探索。
——善牧/蕭健興 阿里巴巴集團(tuán)UED大學(xué)負(fù)責(zé)人
前言
在企業(yè)，設(shè)計為商業(yè)服務(wù)，因此設(shè)計和商業(yè)服務(wù)一樣，對象也是用戶。眾所周知，用戶體驗是一個系統(tǒng)性的問題，好的體驗不僅僅是一個界面好看不好看，也不僅僅是動效是否酷炫，而是用戶使用服務(wù)整個階段的感受。因此，設(shè)計時一定不能重形忘因。
一個產(chǎn)品和服務(wù)能獲得成功，是因為它真正幫人們解決了某些問題。這聽上去很簡單、很基礎(chǔ)，但是在產(chǎn)品和設(shè)計的過程中很容易被忽視。這里面有兩個關(guān)鍵要素，一是用戶，二是場景。
在進(jìn)行體驗設(shè)計以前，先想明白目標(biāo)用戶是誰？要在什么場景下解決這類用戶的什么問題？不要用自我喜好和偏見去替代真實用戶需求，認(rèn)為自己就是用戶，自己的習(xí)慣就是用戶的習(xí)慣。學(xué)會觀察和了解真實的用戶場景非常重要。
走出辦公室，到地鐵站、超市、餐飲店、商場等真實的用戶場景中去看看，去觀察真實的使用場景和習(xí)慣，看他們怎么使用我們的服務(wù)，如何完成產(chǎn)品的每個環(huán)節(jié)與步驟，然后繪制用戶體驗地圖。只有理解和感知真實的需求場景才能直達(dá)問題的根本，做出解決問題的設(shè)計方案。
學(xué)設(shè)計的意識：在驗證產(chǎn)品的時候要保持一顆普通用戶的心，同時，方法要專業(yè)。我們時常會被經(jīng)驗和物理邏輯所迷惑，忽略了常識和習(xí)慣。
好的東西都是簡單的，不僅符合專業(yè)，也符合直覺。簡單，就是可以用幾句話就能很快說清楚，并能讓目標(biāo)用戶產(chǎn)生共鳴，而且學(xué)習(xí)成本低。如果達(dá)不到這樣的效果，那么一定是設(shè)計方案出了問題。
做設(shè)計的方式：體驗設(shè)計是一個系統(tǒng)性工程，因此合作非常重要。不要只站在設(shè)計師的角度去思考，如果只是站在設(shè)計師的角度思考，將會束縛你的能力和想象力。
“工作中，你所面臨的所有人和事都是你工作的一部分。”細(xì)想在你所服務(wù)和工作的環(huán)境里，設(shè)計師可以扮演什么樣的角色？如何幫助把事情做得更好？為了幫助業(yè)務(wù)和團(tuán)隊成功，自己還可以做什么？這樣的合作意識有助于我們解決很多邊界問題，同時可以讓我們對解決體驗問題有更全局的把握。
而我們特別容易犯的錯誤就是：在討論或者爭論一個問題的時候，很容易從對哪種方式體驗更好一些的爭論，變成誰對誰錯的爭論，進(jìn)而使?fàn)幷撗葑兂珊葱l(wèi)自己的所謂尊嚴(yán)而貶低他人的人格。我們應(yīng)該從事情本身出發(fā)，從用戶角度出發(fā)，去考慮最好的用戶體驗，樂于接受他人的建議。討論本身并不是為了贏，而是獲得最佳結(jié)果。
看設(shè)計的演變：支付寶、余額寶的橫空出世，微信在移動IM領(lǐng)域快速發(fā)展，滴滴和快的、美團(tuán)和點評之間的O2O戰(zhàn)爭，這一切都說明，近幾年中國移動互聯(lián)網(wǎng)發(fā)展飛快。
3年前很幸運(yùn)能夠加入支付寶無線設(shè)計團(tuán)隊。這3年，也是支付寶飛速發(fā)展的3年，從一個移動支付工具成長到今天數(shù)億用戶的生活服務(wù)平臺，這是一個非常了不起的成績。3年里，支付寶無線設(shè)計團(tuán)隊也在不斷壯大，這期間，我們的產(chǎn)品、設(shè)計策略也發(fā)生了很多變化。團(tuán)隊的設(shè)計理念和方法越來越成熟，于是，我們想對這幾年來團(tuán)隊在專業(yè)上的一些收獲和成果做一次總結(jié)，將我們的一些經(jīng)驗分享給在無線體驗設(shè)計行業(yè)奮斗的年輕人，希望他們能通過我們的經(jīng)驗分享能夠在成長的道路上少走彎路。
玩設(shè)計之初心：我們一直堅持“設(shè)計賦能商業(yè)”的原則，從場景和產(chǎn)品的角度去整體思考設(shè)計，思考怎樣為業(yè)務(wù)帶來一脈相承的設(shè)計價值。設(shè)計師們在各自的專業(yè)特點和對不同問題解決思路的基礎(chǔ)上進(jìn)行經(jīng)驗與專業(yè)沉淀。
本書的編排就是圍繞“學(xué)設(shè)計、做設(shè)計、看設(shè)計、玩設(shè)計”的思路進(jìn)行串聯(lián)混排的。
成書的過程，特別感謝我的老板和伙伴們，有了你們的支持和鼓勵，團(tuán)隊才能在繁忙的工作中擠出時間，克難竟事。特別感謝團(tuán)隊中的蔣黛煒同學(xué)的無私盡責(zé)，還有出版社同人，有你們的幫助和指導(dǎo)，我們才能匯流成河。
需要說明的是，書中的很多觀點和產(chǎn)出都源于團(tuán)隊里每一個設(shè)計師在工作實踐中的所思所得，故難免會有局限性，希望各位讀者諒解。書中如有不當(dāng)之處還請各位同行、專家提出、斧正。
支付寶用戶體驗部（AUX）?
目錄
推薦序1
推薦序2
推薦序3
推薦序4
推薦序5
推薦序6
前言
學(xué) · 設(shè)計
01 行業(yè)設(shè)計“五步法” 王宇航 // 2
02 無規(guī)矩不成方圓—設(shè)計規(guī)范的建設(shè) 周建波、朱蘭民 // 21
03 設(shè)計走查表 王向紅 // ?70
04 圖標(biāo)設(shè)計與驗證 楊波、方芳 // 89
05 敏捷開發(fā)模式下的設(shè)計協(xié)作 馬穎男 // 100
做 · 設(shè)計
06 行業(yè)服務(wù)設(shè)計的思考與實踐 鄒燁 // 110
07 產(chǎn)品設(shè)計中的模塊化思維 顧文君 // 128
08 走進(jìn)服務(wù)設(shè)計：讓預(yù)約掛號變得精準(zhǔn)與簡單 徐良佺 // 139
09 信息可視化設(shè)計 王蓉琦 // 151
10線下物料設(shè)計 林猛 // 162
看 · 設(shè)計
11 業(yè)務(wù)探索期，設(shè)計可以做些什么 丁明宇 // 172
12 設(shè)計師如何從0到1快速了解一個行業(yè) 王昆鵬 // 180
13 敏捷設(shè)計研究 肖瑤 // 196
14 設(shè)計十則 李玲 // 205
15 像設(shè)計師一樣思考 湯靜靜、李慧 // 218
玩 · 設(shè)計
16 講故事的力量 李涵、周曉雙 // 226
17 移動搜索設(shè)計探索 李君、孟飛 // 234
18 在移動支付設(shè)計中構(gòu)建安全感 汪通 // 253
19 一切都是為了打動你—產(chǎn)品中的情感化設(shè)計
宋曉婷、王蓉琦、芮琳 // 266
后記 為事，以遣有涯之生 蔣黛煒 // 281
學(xué)·設(shè)計
01 行業(yè)設(shè)計“五步法”
文/王宇航
隨著“互聯(lián)網(wǎng)＋”的火熱，越來越多的線下服務(wù)“搬”到線上，支付寶也提出了“連接3600行”的口號。設(shè)計師要在業(yè)務(wù)的快速推動與迭代中，快速接手新的行業(yè)線設(shè)計，必須理解產(chǎn)品背后的邏輯，對其所處的行業(yè)背景、商業(yè)模式和發(fā)展方向的研究保持足夠的重視。但是往往一個項目設(shè)計的時間又是有限的，對于一個行業(yè)的理解也是需要時間沉淀與積累的，這就會產(chǎn)生一定的矛盾。所以動態(tài)并快速地使用一些設(shè)計策略是行之有效的。
我們將在工作中形成的設(shè)計思路與方法進(jìn)行歸納，總結(jié)出行業(yè)設(shè)計“五步法”，希望對一些新晉的設(shè)計師有所幫助，使他們能夠通過這些通用的、標(biāo)準(zhǔn)化的設(shè)計方法快速上手項目，快速跟著項目跑起來。“五步法”中的每一步都不是唯一的設(shè)計方法，只是我們在工作中常用的方法。為了能讓讀者有更強(qiáng)的代入感，我們將以移動醫(yī)療產(chǎn)品設(shè)計為例，進(jìn)行詳細(xì)說明。
第1節(jié) 充分的行業(yè)調(diào)研
為什么要做行業(yè)調(diào)研？行業(yè)調(diào)研的目的是什么？
做行業(yè)調(diào)研主要是為了了解行業(yè)的現(xiàn)狀與未來發(fā)展趨勢，對行業(yè)項目背景能有深刻的認(rèn)識，在過程中尋找產(chǎn)品目標(biāo)，挖掘用戶痛點。在行業(yè)調(diào)研初始階段，先擬定行業(yè)調(diào)研提綱，比如：
行業(yè)的發(fā)展歷史、現(xiàn)狀、前景和特點；
行業(yè)的價值鏈；
行業(yè)的競爭態(tài)勢；
產(chǎn)業(yè)政策，監(jiān)管體制；
市場容量、市場細(xì)分結(jié)構(gòu)以及未來增長趨勢；
行業(yè)供需結(jié)構(gòu)與盈利方式；
相關(guān)利益方分析；
行業(yè)痛點、關(guān)鍵成功要素和自身優(yōu)勢。
通過這些指導(dǎo)性的提綱進(jìn)行有針對性的深入調(diào)研，根據(jù)自己的時間與資源，選擇適合自己的方法，包括桌面研究、問卷調(diào)查、用戶訪談、田野調(diào)查、數(shù)據(jù)分析等來發(fā)現(xiàn)問題。我們主要采取的方法傾向于桌面研究與田野調(diào)查兩者相結(jié)合。這兩種方法是在有限時間里產(chǎn)出最大化的調(diào)研方法。
1.桌面研究
桌面研究指不進(jìn)行一手資料的實地調(diào)研和采集，而直接通過電腦、雜志、書籍、文檔、互聯(lián)網(wǎng)搜索等現(xiàn)有二手資料進(jìn)行分析和研究的方案，也稱為案面研究，也有業(yè)內(nèi)人士稱之為二手資料研究。研究內(nèi)容包括國家政策走向、行業(yè)限制、行業(yè)所處的發(fā)展階段、行業(yè)痛點、國內(nèi)外行業(yè)對比等。桌面研究能夠讓設(shè)計師對一個行業(yè)有一個粗淺、大致的認(rèn)識，基于這些認(rèn)識推動行業(yè)項目產(chǎn)生新的進(jìn)展。
首先，確立研究目標(biāo)，即宏觀地認(rèn)識醫(yī)療行業(yè)現(xiàn)狀，從中發(fā)現(xiàn)機(jī)會，為后期實地調(diào)研提供方向。其次，通過不同渠道收集資料，包括但不限于：
通過媒體等渠道收集國內(nèi)醫(yī)療體制體系，國家政策；
網(wǎng)絡(luò)調(diào)研醫(yī)療體系中可見問題；
查詢整理已有團(tuán)隊歷史研究資料；
歸類分析醫(yī)療體系中的不同場景，為之后調(diào)研明確方向及內(nèi)容。
在做了這些基本的桌面研究后，產(chǎn)出一份研究報告，包括研究內(nèi)容陳述、研究發(fā)現(xiàn)以及報告結(jié)論,然后將有價值的內(nèi)容進(jìn)行組內(nèi)分享，從設(shè)計角度表達(dá)對于行業(yè)思考的觀點。
2.田野調(diào)查
田野調(diào)查指深入線下并觀察用戶使用場景，繪制體驗地圖，繪制用戶體驗曲線。田野調(diào)查主要分為3個階段：準(zhǔn)備階段、調(diào)查階段、整理階段。
在準(zhǔn)備階段，要選定好被調(diào)查地點和被調(diào)查人群，進(jìn)行必要的物資準(zhǔn)備，包括錄音設(shè)備、照相設(shè)備、錄像設(shè)備、筆、筆記本等。在選擇被調(diào)查地點時要進(jìn)行甄選，全科、三甲、門診量較大的醫(yī)院是我們的首要考察方向，其能提供更完整的服務(wù)流程，覆蓋更全的患者群體，據(jù)此得到的解決方案具有普適性。
在調(diào)查階段，最好2～3人組成一個團(tuán)隊，針對不同的服務(wù)場景，如大廳、候診廳、繳費(fèi)窗口處等進(jìn)行布點，主要采用參與觀察和攔訪兩種形式。參與觀察除了要觀察深入、注意細(xì)節(jié)外，還要透過現(xiàn)象看本質(zhì)，透過用戶的現(xiàn)場行為去思考背后的真實需求。攔訪分為結(jié)構(gòu)性訪談和非結(jié)構(gòu)性訪談。結(jié)構(gòu)性訪談一般是事先準(zhǔn)備好訪談提綱或者問卷提綱，尋找目標(biāo)用戶進(jìn)行攔訪；非結(jié)構(gòu)性訪談主要是尋找目標(biāo)用戶就某些問題進(jìn)行自由交流，非結(jié)構(gòu)性訪談對訪談?wù)叩囊筝^高，需要把握訪談的尺度和技巧，并且要學(xué)會啟發(fā)用戶，多問幾個為什么，深挖背后用戶的需求。田野調(diào)查實景分析如圖1所示。
在整理階段，會發(fā)現(xiàn)在調(diào)研過程中回收了非常多的問題，這些問題雜且亂。因此，首先就要進(jìn)行問題的歸納和總結(jié)，梳理出在體驗節(jié)點中用戶遇到的主要問題，即嚴(yán)重阻礙用戶行為流程并且反饋數(shù)量較多的問題。其次，撰寫一份調(diào)研總結(jié)大綱，把主要問題列出并快速同步給團(tuán)隊和業(yè)務(wù)方。還有一點非常關(guān)鍵，就是需和產(chǎn)品經(jīng)理配合好，根據(jù)項目進(jìn)程和開發(fā)資源，梳理出真正能快速落地和執(zhí)行的主要問題，并且提出解決方案。
圖1 田野調(diào)查實景分析
圖1所示中我們選定當(dāng)?shù)啬持揍t(yī)院為調(diào)查地點，選定就醫(yī)患者為調(diào)查人群。從進(jìn)入醫(yī)院查看大廳的出診列表確定科室開始，到患者的初步就診中，拆分了5個關(guān)鍵就醫(yī)節(jié)點進(jìn)行觀察和分析，而每一個節(jié)點都存在一些線下體驗煩瑣或體驗不佳的情況。比如在觀察中我們發(fā)現(xiàn)患者從一進(jìn)入醫(yī)院就遇到麻煩，大多數(shù)初診患者無法自判科室，需到就診臺咨詢。即使有出診列表，患者篩選信息也比較困難，出診列表的展示設(shè)計有時還存在問題，部分患者在確定科室后還會反復(fù)猶豫。而這些細(xì)節(jié)就是我們的機(jī)會，但如果不到線下，很多設(shè)計師是無法想到這些細(xì)微場景的。只有不斷地改善這些細(xì)節(jié)性的痛點，才能讓用戶感到溫暖，才能讓產(chǎn)品溫度永存。
第2節(jié) 圈定目標(biāo)人群，明確用戶分類與行為特征
在基礎(chǔ)調(diào)研后會發(fā)現(xiàn)，在對就醫(yī)相關(guān)利益者（包括提供醫(yī)療服務(wù)者、就醫(yī)患者、醫(yī)療行政人員等）的考慮中，使用掛號服務(wù)的主要目標(biāo)人群還是就醫(yī)患者。針對就醫(yī)患者可以從以下幾個方面來解構(gòu)目標(biāo)用戶。
1.人口學(xué)特征
人口學(xué)特征包括空間、年齡、性別、文化、職業(yè)、收入、生育率等指標(biāo)，在項目設(shè)計前，必須明確核心用戶群體的人口學(xué)特征。比如醫(yī)療行業(yè)中就有明顯的人口學(xué)特征，18～34歲人群使用占比最高，在線掛號用戶群呈現(xiàn)年輕化趨勢，女性用戶占比遠(yuǎn)高于男性（基于公司的行業(yè)用研數(shù)據(jù)），如圖2所示。
圖2 在線掛號用戶屬性及行為屬性（數(shù)據(jù)來源于調(diào)研）
2.用戶分層
對用戶從不同緯度進(jìn)行拆解與分析會發(fā)現(xiàn)，不同的用戶群體產(chǎn)生的行為特征具有明顯的差異化。可以從用戶自然特征（性別、年齡、地域、學(xué)歷或教育水平等）進(jìn)行劃分，也可以從用戶社會特征（婚姻狀況、家庭情況、社交渠道、職業(yè)等）進(jìn)行劃分，又可以從用戶行為進(jìn)行劃分，根據(jù)不同的業(yè)務(wù)形態(tài)采取不一樣的用戶分層。在醫(yī)療場景中，比較突出的用戶分層是從用戶行為上進(jìn)行劃分，如名院型、名醫(yī)型、專病型、名醫(yī)名院型，見表1。不同的行為特征其后期產(chǎn)品方案中用戶路徑設(shè)計也會截然不同，這樣的分層有利于在產(chǎn)品設(shè)計中覆蓋大部分用戶的行為路徑。分層也是用于比較的，比較是為了反映不同用戶層的核心需求，進(jìn)而指導(dǎo)產(chǎn)品方向，所以分層最終還是為了指導(dǎo)產(chǎn)品決策，這才是進(jìn)行用戶分析的價值體現(xiàn)。
表1 用戶分層
用 戶 類 型 核 心 特 征
名醫(yī)型 注重醫(yī)生資質(zhì)，醫(yī)生職稱高或經(jīng)驗豐富即可
名院型 注重醫(yī)院資質(zhì)，只要是三甲醫(yī)院即可
專病型 針對專病門診，提供有針對性的治療和輔導(dǎo)
名院名醫(yī)型 既注重醫(yī)院，又注重醫(yī)生資質(zhì)
3.行為特征
進(jìn)行用戶分層后，找出核心用戶的行為特點，主要分析核心場景中用戶在處理核心任務(wù)的行為方式。這樣可以讓設(shè)計師更加詳細(xì)、清楚地了解用戶的行為習(xí)慣，從而找出存在的問題，有助于產(chǎn)品設(shè)計更加精準(zhǔn)、有效，提高產(chǎn)品業(yè)務(wù)轉(zhuǎn)化率。比如調(diào)研與觀察發(fā)現(xiàn)用戶對三甲醫(yī)院和專家門診需求度強(qiáng)，掛號行為頻率偏低，用戶行為呈現(xiàn)明顯低頻、剛需、優(yōu)資源導(dǎo)向等特點。這些都是圍繞用戶進(jìn)行就醫(yī)掛號場景的分析，跟目標(biāo)用戶群年齡特征和就醫(yī)習(xí)慣緊密相關(guān)。
第3節(jié) 仿真分析，搭建用戶場景
在進(jìn)行完整的行業(yè)調(diào)研與目標(biāo)用戶圈定分析后，需要針對調(diào)研結(jié)果進(jìn)行整理，將內(nèi)容結(jié)構(gòu)化。對用戶核心的線下場景、用戶行為軌跡、獲取目標(biāo)任務(wù)的渠道與核心路徑、在過程中用戶的痛點和障礙等進(jìn)行提煉，并針對目標(biāo)用戶建立有代表性的用戶畫像，待這些重點的“原材料”準(zhǔn)備完整后，就可以開始烹飪一道完美的“場景”大餐了。
1.場景是什么
場景原指電影拍攝的場地和布景。其實做產(chǎn)品就像拍電影，你要把自己當(dāng)導(dǎo)演：挑選場地和布景，考慮演員的狀態(tài)，如何走位，臺詞有哪些，對戲該如何進(jìn)行，電影的核心主題如何表達(dá)，等等。而用戶的核心痛點與產(chǎn)品的核心功能很有可能是由多個使用場景組成的。基于目標(biāo)與任務(wù)進(jìn)行構(gòu)建，讓設(shè)計師能深入“劇情”，在細(xì)節(jié)中推敲用戶的每一個想法和舉動，真正做到從用戶角度出發(fā)，將產(chǎn)品與用戶場景融合起來。
2.為什么要搭建場景
搭建場景與實現(xiàn)產(chǎn)品目標(biāo)是相輔相成、相互印證的。解決用戶痛點是場景構(gòu)建的主要目的之一，市場需求逐漸變得碎片化、長尾化、多元化和個性化，搭建場景能覆蓋用戶全量活動軌跡，讓需求分析更精準(zhǔn)，讓產(chǎn)品功能更全面，讓業(yè)務(wù)目標(biāo)定位更清晰，讓團(tuán)隊對產(chǎn)品的理解更一致。
3.場景該如何搭建
仿真分析即仿照真實線下流程構(gòu)建線上虛擬場景的方法。現(xiàn)實的情況是用戶因為線下業(yè)務(wù)流程的復(fù)雜性會呈現(xiàn)出各種各樣的狀態(tài)，仿真分析能從成本、時間、行為、路徑等多個角度驗證流程，評估流程的體驗優(yōu)劣，對流程的模擬執(zhí)行生成結(jié)構(gòu)化的結(jié)果，從而幫助用戶找到流程中的“瓶頸”并加以分析與優(yōu)化。針對流程的缺陷提出改進(jìn)方案，得出一個可期望和可實現(xiàn)的模型。
針對模型的展現(xiàn)，方式可以不同。如果是全量場景的結(jié)構(gòu)化展示建議用表格形式，內(nèi)容也要精練，這樣利于閱讀和團(tuán)隊內(nèi)溝通；如果是細(xì)分場景的用戶行為分析，可以用更敏捷的方式，以簡單文本描述故事即可。以掛號場景下的用戶全鏈路行為分析為例，可以大致分為掛號前、掛號中、掛號后3個主要階段，從場景描述與用戶行為出發(fā)，用戶行為則可以從渠道、路徑、痛點、用戶方案等方面進(jìn)行分析。從前期的調(diào)研中會發(fā)現(xiàn)就診患者在掛號前的第一場景一般是先對病情進(jìn)行預(yù)估：用戶根據(jù)病癥尋找病癥原因、治療方法等信息，從4個維度評估病情（what/why/how/where）。獲取病情信息的線上渠道有搜索引擎、醫(yī)療網(wǎng)站或論壇、電話等；線下渠道則向同／父輩或醫(yī)生咨詢。在這些行為分析中會發(fā)現(xiàn)用戶的一些使用痛點，包括：①疾病信息質(zhì)量差且規(guī)范不統(tǒng)一；②信息碎片化現(xiàn)象嚴(yán)重；③信息口碑缺失；④信息權(quán)威性缺失。這背后就會產(chǎn)生針對痛點的用戶需求，主要包括疾病信息（癥狀、原因、治療方法、推薦醫(yī)院、推薦醫(yī)生等）、就診決策、權(quán)威、口碑、癥狀評估等，見表2。
再如掛號后對用戶場景的分析，掛號后患者的場景一般就是去醫(yī)院候診，為就診做準(zhǔn)備，他可能使用的線上渠道包括掛號平臺、百度搜索、地圖等。 線下渠道就是到院內(nèi)取號，如圖3所示。
圖3 就醫(yī)流程路徑圖
表2 場景分析
掛號前 掛號中 掛號后
場景 病情預(yù)估：
用戶根據(jù)病癥尋找病癥、原因、治療方法等信息， 從4個維度評估病情（what/why/how/where) 醫(yī)院/科室/醫(yī)生評估：
用戶根據(jù)病癥嚴(yán)重程度，確定就診相關(guān)信息，以確定醫(yī)院和科室為主 醫(yī)院/醫(yī)生評估：
確定醫(yī)院/醫(yī)生 填寫預(yù)約單：
完成線上填寫預(yù)約單流程 預(yù)約等待：
用戶掛號后，去醫(yī)院就診前在家中，會面臨自身和醫(yī)院間信息溝通斷層 醫(yī)院候診：
用戶掛號后，前往醫(yī)院，進(jìn)行取號、候診等，為就診做準(zhǔn)備
用戶行為 渠道 線上渠道：大多采用搜索引擎渠道、醫(yī)療網(wǎng)站或論壇、電話等；線下渠道：向同/父輩或醫(yī)生咨詢 線上渠道：大多采用搜索引擎、醫(yī)療網(wǎng)站或論壇、電話等；線下渠道：向同/父輩或醫(yī)生咨詢 線上渠道：產(chǎn)品內(nèi)醫(yī)院和醫(yī)生號源 線上渠道：產(chǎn)品內(nèi)預(yù)約下單流程 線上渠道：掛號平臺、電話、短信 線上渠道：掛號平臺、百度搜索、地圖等
線下渠道：院內(nèi)取號
路徑 主路徑：搜索（檢索詞：是什么；怎么辦等）—瀏覽（跳躍式和專注式）—行為決策（去醫(yī)院、自行處理等） 主路徑：搜索（檢索詞：哪家好；有哪些等）—瀏覽—對比（專業(yè)性、從醫(yī)經(jīng)驗、社會口碑）—行為決策（哪家醫(yī)院） 主路徑：搜索（醫(yī)院名或別名）—瀏覽—對比（職稱、擅長、口碑） —行為決策（哪家醫(yī)院） 主路徑：選擇就診時間—填寫個人 信息（身份證號、病情描述等）—完成預(yù)約 1.掛號平臺：醫(yī)院導(dǎo)航—院內(nèi)導(dǎo)航—取號—候診—評價
2.掛號平臺：地圖導(dǎo)航—院內(nèi)取號—候診—線上評價
用戶
行為 痛點 1.疾病信息質(zhì)量差且規(guī)范不統(tǒng)一
2.信息碎片化現(xiàn)象嚴(yán)重
3.信息口碑缺失
4.信息權(quán)威性缺失 1.醫(yī)院/科室/醫(yī)生等信息質(zhì)量差且規(guī)范不統(tǒng)一
2.信息碎片化現(xiàn)象嚴(yán)重
3.信息口碑缺失
4.信息權(quán)威性缺失 1.醫(yī)院/醫(yī)生號源不足
2.醫(yī)院/醫(yī)生號源信息單一且規(guī)范不統(tǒng)一
3.醫(yī)院醫(yī)生號源可控性弱 1.預(yù)約流程冗余
2.輸入成本高 1.提醒不足：取號就診時間/流程/停診等提醒不足或不及時
2.操作不便：突發(fā)情況如取消操作不便 1.就診指導(dǎo)缺失
2.候診狀態(tài)缺失
3.流程煩瑣
4.過號
用戶
方案 1.交叉驗證：多個信息渠道
2.口碑路徑：線上或線下口碑 1.交叉驗證：多個信息渠道
2.口碑路徑：線上或線下口碑 1.多模式：排序、職稱、擅長、口碑
2.搶號模式：天使掛號
3.其他路徑：電話或線下
4.多次重復(fù)下單 1.忽視：只填關(guān)鍵信息或應(yīng)付填寫
2.演練：僅僅為熟悉界面而下訂單 被動等待 1.盡早到醫(yī)院準(zhǔn)備和候診
2.過號重新排隊或與醫(yī)護(hù)人員協(xié)商
用戶
需求 二級
需求 疾病信息（癥狀、原因、治療方法、推薦醫(yī)院、推薦醫(yī)生等）、就診決策、權(quán)威、口碑、癥狀評估等 醫(yī)院/科室/醫(yī)生信息（專業(yè)性、從業(yè)經(jīng)驗、社會口碑等）、權(quán)威、口碑等 號源、號源信息（醫(yī)院、醫(yī)生）、號源口碑、號源獲得性（預(yù)期、成本等）、匹配度 快速、簡單、易上手等 及時提醒、突發(fā)應(yīng)對等 就診指導(dǎo)-候診提醒-流程簡便
一級
需求 信息 資源 便捷
在圖3中發(fā)現(xiàn)的痛點包括就診指導(dǎo)的缺失、候診狀態(tài)的缺失、流程煩瑣、過號現(xiàn)象的存在等。而患者大多在線下采取的方案有兩種：一即盡早到醫(yī)院準(zhǔn)備和候診，二即過號后重新排隊或與醫(yī)院人員協(xié)商。所以在構(gòu)建場景的過程中，就可以不斷發(fā)現(xiàn)患者就醫(yī)過程中的障礙，發(fā)現(xiàn)問題后則將問題提煉轉(zhuǎn)移至線上產(chǎn)品的設(shè)計中，這就是所說的設(shè)計，其目的是解決問題。
場景構(gòu)建完畢后，并不是固定不變的。隨著業(yè)務(wù)場景的發(fā)展與設(shè)計師理解的加深，場景是有可能不斷變化與發(fā)展的，它是動態(tài)的。在過程中分析用戶行為的變化與發(fā)生，行為往往跟隨功能，產(chǎn)品的體驗觸點與用戶行為的發(fā)生高度重合。
第4節(jié) 篩選核心需求，建立需求管理
用戶需求是線性產(chǎn)生的，也是交叉產(chǎn)生的，其需要設(shè)計師敏銳的判斷能力與鑒別能力，什么是核心需求？什么是次級需求？什么是偽需求？這就需要結(jié)合商業(yè)模式、產(chǎn)品發(fā)展目標(biāo)、用戶場景與用戶行為來交叉判斷。而對于需求的理解，最后往往還需聚焦用戶。用戶需求在每一個發(fā)展階段是會產(chǎn)生變化的，所以需要不斷地驗證與完善，而敏捷設(shè)計、敏捷開發(fā)、不斷快速迭代就是對其的補(bǔ)充。
需求的定位也可能是動態(tài)的，方法有很多，而個人更傾向于通過場景的構(gòu)建來挖掘用戶的核心需求，例如，圖3中在對掛號后場景的構(gòu)建分析后發(fā)現(xiàn)用戶的二級需求就是就診指導(dǎo)、候診提醒、流程簡便等關(guān)鍵因素，針對這些需求點進(jìn)行產(chǎn)品功能的導(dǎo)出與設(shè)計，而其需求背后核心還是“便捷”，產(chǎn)品設(shè)計的落地必須真正實現(xiàn)掛號后就醫(yī)便捷這一目標(biāo)。
當(dāng)然，若時間允許也可以組建焦點小組進(jìn)行深度訪談，前提是項目留給你的時間很充裕。下面重點介紹對需求的管理，這是容易被忽視，卻是異常重要的。
1.評估需求
需求的評估最重要的不是知道要做什么，而是知道什么不要做。當(dāng)產(chǎn)品給出一份需求表單和功能列表的時候，一般已經(jīng)產(chǎn)品經(jīng)理篩選過了，但設(shè)計師要有自己的判斷，這也是主動參與到產(chǎn)品設(shè)計中的重要一環(huán)，在這里你可以與產(chǎn)品經(jīng)理一起探討需求對于用戶的重要程度，以及實現(xiàn)順序。
2.排序需求
需求的優(yōu)先級可能比需求本身更加重要。我們每次的產(chǎn)品迭代都會列出一連串的需求列表，每個功能都像是重點，每個功能似乎對于用戶都是不可或缺的。但在推進(jìn)時會發(fā)現(xiàn)開發(fā)的時間根本安排不過來，產(chǎn)品上線是有時間表的，交互要協(xié)助產(chǎn)品從用戶的體驗角度來進(jìn)行需求的裁減，只有進(jìn)行整體的平衡和優(yōu)先級的排布才能實現(xiàn)產(chǎn)品功能迭代價值的最大化。
3.需求變更管理
在敏捷的管理體系下，理性的需求變更是可以接受的，但是所有的需求變更都需要進(jìn)行很好的控制。對于簡單的需求變更，在對項目進(jìn)度沒有影響、對開發(fā)成本沒有造成負(fù)擔(dān)的情況下，是可以快速完成的。對于一些較為復(fù)雜的需求變更，如果會增加項目開發(fā)成本，影響項目上線時間，影響用戶操作體驗，設(shè)計師就一定要嚴(yán)格把控，該拒絕的當(dāng)機(jī)立斷地拒絕，并給出利弊的分析，或者進(jìn)行延后處理，可以在下一版本的迭代中再進(jìn)行設(shè)計。
第5節(jié) 建立交互框架，輸出交互方案
1.信息架構(gòu)設(shè)計
信息架構(gòu)是一個很大的范疇。但不論是特定的場景或者給定目標(biāo)的信息架構(gòu)項目，我們經(jīng)常考慮的是建立更有效的溝通結(jié)構(gòu)。—Jessie James Garrett
信息架構(gòu)的建立是交互設(shè)計師在項目推進(jìn)過程中非常核心的環(huán)節(jié)，這個階段的產(chǎn)出質(zhì)量直接影響到業(yè)務(wù)目標(biāo)、轉(zhuǎn)化率、用戶體驗。如果框架清晰，用戶就能快速完成任務(wù)目標(biāo)，提升效率，它是產(chǎn)品與用戶交互的隱性環(huán)節(jié)。信息架構(gòu)如圖4所示。
廣而淺的架構(gòu)用戶可以用較少的點擊完成相應(yīng)的目標(biāo)任務(wù)，但信息分類標(biāo)準(zhǔn)過多，會增加用戶層級分類尋找的成本。窄而深的架構(gòu)則使用戶增加了操作步驟，但減少了用戶操作選項。
圖4 信息架構(gòu)
2.流程圖
在使用產(chǎn)品中用戶所能操作的界面以及頁面上下游之間的跳轉(zhuǎn)關(guān)系和組織的表達(dá)，稱為流程圖。通過流程圖的繪制，可以清晰表達(dá)用戶在使用產(chǎn)品中的操作與交互關(guān)系，以及對于整體交互動作和流程的把控。流程設(shè)計中要遵循以下原則：①以用戶需求為主要導(dǎo)向；②兼顧用戶的使用習(xí)慣；③流程盡量短；④每個操作頁面僅有一個核心操作任務(wù)；⑤考慮交互實現(xiàn)的開發(fā)成本。設(shè)計師在設(shè)計頁面時，應(yīng)該在頁面上建立許多視覺層次，引導(dǎo)用戶的視覺焦點。先把用戶的注意力吸引到最重要的元素上，然后才把用戶視線引導(dǎo)到其他重要程度次要的信息上。這樣便于用戶快捷、迅速地找到自己所需，更好地完成閱讀、瀏覽任務(wù)。掛號平臺核心流程如圖5所示。
圖5 掛號平臺核心流程
3.頁面交互細(xì)節(jié)設(shè)計
對于制作交互說明，每個人習(xí)慣都有所不同，最好是有數(shù)字或者字母的清晰的對應(yīng)標(biāo)注，便于閱讀和理解。每一步的頁面跳轉(zhuǎn)說明，細(xì)節(jié)和動作需要描述清楚。還應(yīng)有極限狀態(tài)下的說明，比如一個列表的最長和最短的顯示，一行字段的長度限制，是否跳行，等等。最后就是異常／出錯情況的說明，如空頁面、系統(tǒng)錯誤、錯誤反饋等情況，這時比較適合增加一些情感化的設(shè)計，比如很多空頁面的俏皮風(fēng)、溫暖系等，盡量避免用戶對于異常／出錯情況產(chǎn)生低落情緒。交互說明如圖6所示。
圖6 交互說明
在產(chǎn)出正式線框圖之前，要鼓勵交互設(shè)計師拿起紙和筆通過草圖來交流與表達(dá)產(chǎn)品思路，草圖也是一種結(jié)論產(chǎn)出，是很好的溝通信息載體，并且成本很低，可通過快速產(chǎn)出、快速交流、快速更改，在不斷調(diào)研和迭代中驗證想法。
總結(jié)
設(shè)計師在做行業(yè)需求時需要不斷加強(qiáng)自身鏈路設(shè)計的能力，不是僅僅承接產(chǎn)品經(jīng)理或者老板的需求即可，交互設(shè)計更像是一個有產(chǎn)品思想的需求翻譯，在整個項目組中建立一座橋梁，在溝通與解決問題的過程中還要不斷預(yù)見問題、定義問題，進(jìn)行設(shè)計的前置，走到用戶面前，傾聽用戶，觀察用戶，幫助用戶，真正做到以“用戶為中心”進(jìn)行設(shè)計。
02 無規(guī)矩不成方圓
—設(shè)計規(guī)范的建設(shè)
文/ 周建波、朱蘭民
第1節(jié) 規(guī)矩成就方圓
孟子曰：離婁之明，公輸子之巧，不以規(guī)矩，不能成方圓。—《孟子》
設(shè)計規(guī)范是用戶體驗的最低標(biāo)準(zhǔn)！—吳明
支付寶作為一個大型的“生活服務(wù)類平臺”，既有官方自營應(yīng)用，也有第三方接入應(yīng)用，數(shù)十個應(yīng)用共計數(shù)百個頁面，并且還在不斷發(fā)展壯大。我們將支付寶定義為一個系統(tǒng)級的應(yīng)用一點兒都不夸張，其復(fù)雜度已經(jīng)逼近一個完整的“生態(tài)系統(tǒng)”。
在這樣一個系統(tǒng)級的應(yīng)用中，我們面臨的設(shè)計挑戰(zhàn)相當(dāng)復(fù)雜：如何降低用戶在復(fù)雜系統(tǒng)中的學(xué)習(xí)和認(rèn)知成本？如何讓用戶在所有頁面都有良好的體驗？如何讓用戶在所有頁面中獲得一致的品牌認(rèn)知？
為應(yīng)對系統(tǒng)級的設(shè)計挑戰(zhàn)，我們必須建立系統(tǒng)級的設(shè)計規(guī)范。你可能會問：什么叫“系統(tǒng)級的規(guī)范”？其實一開始我們也沒有“系統(tǒng)級的規(guī)范”這樣的概念。但經(jīng)過長時間的實踐，我們發(fā)現(xiàn)簡單的設(shè)計規(guī)范并不能很好地應(yīng)對支付寶這樣復(fù)雜的產(chǎn)品。于是，我們不斷對設(shè)計規(guī)范進(jìn)行補(bǔ)充和完善，最后自上而下地建立了一套設(shè)計規(guī)范系統(tǒng)。
1.規(guī)范1.0
我們最早的設(shè)計規(guī)范只是各種控件的視覺設(shè)計源文件。這樣的規(guī)范保證了頁面基礎(chǔ)元素以及框架的一致。但是，這些視覺源文件并沒有定義任何的交互規(guī)則，實際工作中還是會出現(xiàn)各種不一樣的產(chǎn)品體驗。例如，某些頁面的彈框出現(xiàn)方式不一樣；什么時候應(yīng)該用小氣泡，什么時候該用彈框。規(guī)范1.0—樣式庫如圖1所示。
圖1 規(guī)范1.0—樣式庫
2.規(guī)范2.0
我們的產(chǎn)品越來越復(fù)雜和龐大，用戶面臨的學(xué)習(xí)和認(rèn)知成本成倍上升。我們必須對頁面中通用交互規(guī)則進(jìn)行定義，打造一致的操作體驗，降低用戶的學(xué)習(xí)成本。為了最大限度地降低用戶學(xué)習(xí)成本，我們最大限度地復(fù)用系統(tǒng)原生的交互規(guī)則。這套規(guī)范進(jìn)一步保障了重要元素的交互行為和視覺樣式的一致性。但是，當(dāng)遇到一個規(guī)范里沒有的東西時要怎樣設(shè)計，設(shè)計師才能既可以發(fā)揮自己的創(chuàng)意，又不會和整體的體驗風(fēng)格相背離？交互規(guī)范文檔如圖2所示，視覺規(guī)范文檔如圖3所示。
圖2 交互規(guī)范文檔
3.規(guī)范3.0
交互規(guī)范和視覺規(guī)范都是死的，設(shè)計是活的。要想進(jìn)一步提升內(nèi)部的設(shè)計一致性和整體的設(shè)計質(zhì)量，團(tuán)隊要有一致的設(shè)計價值觀。大家都知道什么樣的設(shè)計是好的，什么樣的設(shè)計是不好的。一個代表團(tuán)隊設(shè)計價值觀的東西—設(shè)計原則應(yīng)運(yùn)而生。至此，我們自上而下建立了一套設(shè)計規(guī)范體系：設(shè)計原則、基礎(chǔ)規(guī)范、單元控件、標(biāo)準(zhǔn)組件，然后落地到開發(fā)控件庫，如圖4所示。從設(shè)計思維到最后實現(xiàn)的每個環(huán)節(jié)，對設(shè)計的一致性和可用性進(jìn)行整體把控。
圖4 規(guī)范3.0自上而下的設(shè)計規(guī)劃體系
第2節(jié) 設(shè) 計 原 則
設(shè)計原則是做設(shè)計時必須遵循的標(biāo)準(zhǔn)，可用于指導(dǎo)設(shè)計和衡量設(shè)計方案的優(yōu)劣。我們要什么樣的設(shè)計，我們不能接受什么樣的設(shè)計，設(shè)計原則讓團(tuán)隊成員形成一致的認(rèn)知。
大家可能都看過很多類似于“移動設(shè)計N原則”“可用性原則”之類的教程、文章，但是這些設(shè)計原則都是別人通過自己的經(jīng)驗總結(jié)出來的，是適合別人的原則。如果你直接照搬過來當(dāng)作真理，那就不合適了。所以，我們在建立自己的設(shè)計原則的時候，應(yīng)該結(jié)合自己產(chǎn)品的特點和實際的案例，制定適合自身的設(shè)計指導(dǎo)原則。
1.簡單的力量
2013年6月13日，支付寶正式推出“余額寶”。它憑借“傻瓜式”的理財方式，讓沒有任何理財專業(yè)知識和技能的人都能理財。以此在中國掀起了一股互聯(lián)網(wǎng)金融狂潮。余額寶宣傳廣告如圖5所示。
圖5 余額寶宣傳廣告
余額寶的成功讓我們看到簡單對于支付寶來說多么重要。簡單不僅能提升用戶體驗，還能實實在在地創(chuàng)造價值。因為簡單，更多的用戶接受你的產(chǎn)品，并且使用你的產(chǎn)品；因為簡單，你的轉(zhuǎn)化率也會更高，會產(chǎn)生更多的價值。
像余額寶、微信這些簡單的產(chǎn)品，對市場產(chǎn)生了深遠(yuǎn)的影響。它們簡單易用，所以被大眾接受；它們值得信賴，所以贏得用戶。現(xiàn)在智能設(shè)備普及率越來越廣，上自幾十歲的大爺大媽，下至幾歲的小孩，都已經(jīng)成為App的用戶群。所以，我們的簡單原則不僅能使界面看起來簡潔，還能使交互流程簡化，使整個產(chǎn)品輕量化。
為了讓產(chǎn)品能夠更簡單，我們在設(shè)計上制定了以下兩個原則：
一個頁面只做一件事情，突出兩個重點。
刪除不必要的內(nèi)容，隱藏次要的內(nèi)容。
（1）一個頁面一件事情
與PC相比，移動終端的屏幕小了很多。App的一個頁面能展示的信息本來就非常有限，不可能像PC一樣堆滿各種不同的信息。況且，App的使用環(huán)境還非常不穩(wěn)定，如走路、坐車、單手、雙手等，這些進(jìn)一步限制了一個App頁面只能做一件事情。
支付寶里很多產(chǎn)品都是以任務(wù)為導(dǎo)向的，幫助用戶實現(xiàn)某個確定的任務(wù)目標(biāo)，如轉(zhuǎn)賬、繳費(fèi)等，如圖6所示。在任務(wù)導(dǎo)向類的頁面中，這個原則顯得尤為重要，因為我們希望用戶可以專注且快速完成當(dāng)前任務(wù)。
圖6 一個頁面一件事情
（2）刪除&隱藏
人在處理信息、學(xué)習(xí)規(guī)程和記憶細(xì)節(jié)方面的能力是有限的。現(xiàn)實中，人可能還面臨各種中斷和打擾，這些都進(jìn)一步限制了人的能力。界面中過多的小細(xì)節(jié)會增加用戶的認(rèn)知負(fù)擔(dān)，就像路障會降低人們的行走速度一樣，過多的小細(xì)節(jié)會降低用戶的使用效率。
刪除那些可有可無的功能、多余的選項、冗余的文字、花哨的修飾，可以減輕用戶的負(fù)擔(dān)，讓用戶專心做自己想做的事。界面清清爽爽、簡簡單單，不去分散用戶的注意力。
1）刪除
我們帶著“刪除不必要功能”的目的，重新來審視支付寶的生活繳費(fèi)，看看哪些不必要的功能可以刪除。
確定主要任務(wù)和次要任務(wù)，并排定優(yōu)先次序。專注解決用戶優(yōu)先級最高的需求，然后再考慮滿足用戶其他目標(biāo)。
用戶使用生活繳費(fèi)，主要目的就是完成繳費(fèi)；然后是新增繳費(fèi)；最后是輔助功能—賬戶分組。
要知道能夠滿足主流用戶的“足夠好”的生活繳費(fèi)與“完美”生活繳費(fèi)有什么區(qū)別。如9.2版的支付寶生活繳費(fèi)（圖7中左圖），要求補(bǔ)全家庭地址、芝麻信用、家庭成員，這么多的附加元素，在絕大多數(shù)情況下，沒人使用。這些功能就是不必要的，可以刪除，如圖7中的右圖所示。
圖7 刪除不必要功能
2）隱藏
有些功能用戶很少使用，但又是必需的。例如，自定義、刪除、設(shè)置等，隱藏這些不常用但不能少的功能（因為可以少的功能我們已經(jīng)刪除了），可以為移動界面節(jié)約很多空間，讓界面簡單。用戶也不會因為它們而分散過多的注意力，更聚焦主要任務(wù)，如圖8所示。
隱藏的功能在用戶需要的時候會出現(xiàn)在合適的位置。例如支付寶轉(zhuǎn)賬到卡，默認(rèn)隱藏了到賬時間，以簡化頁面。當(dāng)用戶填好卡號等信息的時候會自動出現(xiàn)到賬時間，如圖9所示。
圖8 隱藏不常用功能
圖9 適時出現(xiàn)
2.高效的執(zhí)行
生活的節(jié)奏越來越快，高效是一款產(chǎn)品必備的素質(zhì)。減少等待、穩(wěn)定快捷，才能留住用戶。外面的世界很精彩，用戶不想等待，用戶不想填寫沒完沒了的表單，用戶不想總要跳轉(zhuǎn)才能看到想看的內(nèi)容，用戶不想不停地點擊……
關(guān)于高效的問題，我們應(yīng)該著眼全局，并且思考“怎么樣讓我們的應(yīng)用更快、更好用”。所以高效問題不僅僅是關(guān)于設(shè)計的問題。有跟技術(shù)和性能相關(guān)的時間問題，“1秒鐘等待”可以讓你的應(yīng)用迅捷如奔豹；有跟行為流程設(shè)計相關(guān)的點擊問題，“1次點擊”可以讓你的應(yīng)用飛起來；有跟移動設(shè)備輸入相關(guān)的人機(jī)工程問題，“1根手指”可以讓你的應(yīng)用連小孩都能使用；還有可能跟信息結(jié)構(gòu)相關(guān)的產(chǎn)品問題，“潘神的迷宮”帶你的用戶走出頁面的迷障。
（1）1秒鐘等待
不知道大家有沒有這樣的經(jīng)歷：風(fēng)和日麗的下午，慵懶的陽光灑在身上，你漫步在一條商業(yè)街上。閑逛中發(fā)現(xiàn)一個店鋪在搞活動，于是掏出手機(jī)掃描二維碼，無奈網(wǎng)速太慢，手機(jī)一直在安全掃描，你只好耐心地等。漫長的等待過后，終于打開一個頁面，但那是空白頁面！而且，這個頁面還沒有任何提示。為了5折的優(yōu)惠，你決定再等等。1秒、2秒、3秒，終于頁面再次跳轉(zhuǎn)，進(jìn)到一個全新的頁面，而且顯示了加載的進(jìn)度。5秒、6秒、7秒，頁面終于刷出了大部分內(nèi)容，無奈活動按鈕還是猶抱琵琶半遮面，不肯出現(xiàn)。于是你一遍一遍地刷新，loading，刷新，loading……
許多研究都表明，用戶能夠忍受的等待時間為6～8秒，如圖10所示。也就是說，8秒是一個臨界值，如果你的頁面打開速度過慢，等待8秒以上，大部分用戶會離你而去。
圖10 用戶等待時長
在0.1秒內(nèi)顯示反饋結(jié)果用戶是可以接受的。
1秒是用戶保持不間斷的思維流的限定時間，用戶會注意到這樣的延遲。
8秒是保持用戶關(guān)注當(dāng)前界面的極限時間，超出8秒用戶會憤然離場。
沒人愿意等待。“1秒鐘等待”是一種比喻，表示用戶對速度和高效的期盼與要求。其實，等待的時間主要取決于服務(wù)器、設(shè)備的性能以及網(wǎng)絡(luò)的速度。用戶是否需要等待主要取決于RPC的策略。
RPC（Remote Procedure Call Protocol）是指手機(jī)客戶端需要調(diào)用網(wǎng)絡(luò)服務(wù)端的資源時，進(jìn)行的遠(yuǎn)程數(shù)據(jù)調(diào)用過程。我們用“RPC”泛指客戶端需要和服務(wù)端發(fā)生數(shù)據(jù)交換的場景。
雖然設(shè)計師不能決定服務(wù)器和設(shè)備的性能，也不能提升網(wǎng)速，但是我們可以優(yōu)化RPC策略，減少等待的次數(shù)，也可以優(yōu)化加載效果，減少用戶的等待時間。雖然某種程度上這只是“障眼法”，但卻能夠獲得用戶的認(rèn)同，改善用戶的體驗。
除去服務(wù)器、設(shè)備性能、網(wǎng)速這些不可控因素，用戶的等待主要由一次次RPC請求造成。如果我們在做設(shè)計的時候考慮到RPC請求的邏輯和策略，并且適當(dāng)?shù)貎?yōu)化，做到用戶的一次操作只觸發(fā)一次RPC請求，盡量減少RPC次數(shù)，就可以減少用戶的等待次數(shù)。
一次用戶操作不允許有多次RPC（指和這條操作主流程相關(guān)）。
以用戶使用支付寶掃描二維碼的體驗為例，用戶要經(jīng)歷3次RPC請求才能正式進(jìn)入頁面加載，如圖11所示。
圖11 掃碼RPC策略及頁面流程
從圖11中我們可以看到一個簡簡單單的掃碼，用戶經(jīng)歷了3次等待、2次跳轉(zhuǎn)，真是千辛萬苦啊！我們可以優(yōu)化一下這個RPC請求的邏輯，合并識別二維碼和打開哪個頁面的RPC請求，如圖12所示。
圖12 優(yōu)化的RPC策略及頁面流程
在圖12中，我們看到這樣的RPC策略讓用戶少等待了一次，少了一次頁面的跳轉(zhuǎn)，給用戶的體驗就比之前要高效一些。
（2）轉(zhuǎn)移注意力
轉(zhuǎn)移注意力是減輕等待的負(fù)面影響的常用手段。其實，在現(xiàn)實生活中，我們常常使用轉(zhuǎn)移注意力這一方法。比如，一些服務(wù)較好的飯店，在客人排隊等待就餐的時候提供各種小吃和休閑游戲。客人有好吃的、好玩的就會忘記等待的煩惱。這種方式在應(yīng)用的設(shè)計中也同樣管用。
支付寶的明星產(chǎn)品“余額寶”，當(dāng)用戶進(jìn)入頁面的時候會從服務(wù)端獲取金額信息。在這一過程中伴隨著金額數(shù)字隨機(jī)變換以吸引用戶注意，使用戶不會有等待之苦。如圖13所示。
（3）一次點擊
懶，是人的天性。交互設(shè)計師的天職就是將用戶從繁重的交互操作中拯救出來，提升產(chǎn)品的可用性，讓用戶方便快捷地完成任務(wù)。在交互設(shè)計中，應(yīng)盡可能地減少額外的點擊，做到一鍵完成任務(wù)。一次點擊意在減少用戶操作次數(shù)，提高操作效率，成全人類“懶”的天性。
交互產(chǎn)品經(jīng)常包括一些不必要的額外點擊，對于用戶而言，這些不必要的操作都是附加工作。附加工作消耗用戶的精力，又不能直接實現(xiàn)用戶的目標(biāo)。消除附加工作，可以提升操作效率，改善產(chǎn)品的可用性。交互設(shè)計師只有對產(chǎn)品中附加工作高度敏感，才能把產(chǎn)品設(shè)計得更高效。
支付寶9.2版本以前的手機(jī)充值從選擇金額到付款需要4次點擊：①點擊金額喚起選擇picker；②滑動選擇金額；③點擊完成關(guān)閉picker；④點擊“立即充值”進(jìn)入付款頁面，如圖14所示。
9.2版本改版以后將充值金額平鋪展現(xiàn)在用戶面前，用戶只需要一次點擊選擇充值金額即可進(jìn)入付款頁面，如圖15所示。
圖15 手機(jī)充值交互優(yōu)化
（4）三級跳
在PC網(wǎng)絡(luò)時代，Web頁面間反復(fù)跳轉(zhuǎn)是再正常不過的了。從搜索頁面到目標(biāo)網(wǎng)站首頁，首頁再到詳情，詳情頁再到推薦頁面，推薦頁再回到首頁……但是，你敢在手機(jī)應(yīng)用上試一試嗎？這么混亂的跳轉(zhuǎn)關(guān)系，用戶可能真的就進(jìn)入了你為他設(shè)置的頁面迷宮，不知道自己在什么地方，不知道返回到哪個頁面，不知道怎么快速回到入口。
我們來看圖16所示的某熱門應(yīng)用的頁面跳轉(zhuǎn)案例：首頁→詳情頁→個人頁→詳情頁→個人頁……可以無限制地深入和循環(huán)。當(dāng)用戶回過頭來想要返回的時候就迷糊了。左上角的返回是到哪里的？如果是返回上一個頁面，那回到首頁要點擊多少下？
在PC網(wǎng)頁上因為有頂部全局導(dǎo)航和面包屑導(dǎo)航，這些跳轉(zhuǎn)可能都不是問題。但是在手機(jī)屏幕上是沒有這些導(dǎo)航的，只有左上角的返回，這就完全交代不清楚了。所以，在手機(jī)應(yīng)用頁面之間的跳轉(zhuǎn)不能太多。
圖16 某熱門應(yīng)用
標(biāo)簽欄、抽屜式、宮格式、列表式、輪播式、喚起式，移動設(shè)計里的導(dǎo)航模式就這幾種，都是比較簡單的結(jié)構(gòu)和模式。如果在移動設(shè)計里面設(shè)計了太深的信息架構(gòu)，一會讓用戶迷惑，二會大大降低操作效率。所以，移動設(shè)計中常用的內(nèi)容應(yīng)該在3個層級以內(nèi)看到。
手機(jī)上能不跳轉(zhuǎn)就不跳轉(zhuǎn)，下面的案例可以幫助我們減少頁面的跳轉(zhuǎn)，將用戶帶出“潘神的迷宮”。
模態(tài)窗口就是對當(dāng)前頁面的內(nèi)容進(jìn)行操作，用戶不用離開當(dāng)前頁面，從而減少了頁面的跳轉(zhuǎn)。我們常見的模態(tài)對話框，常用來報錯或者提醒用戶。如圖17所示。
3.人性的對話
用戶使用我們的應(yīng)用過程其實就是一個人機(jī)對話的過程。界面中展示的信息是系統(tǒng)向用戶傳遞信息，用戶的操作是在向系統(tǒng)傳遞信息，這一來一往就是對話。打造一個有人性的App，營造和諧的人機(jī)對話，是我們提出人性化原則的目的。我們希望用戶可以把我們當(dāng)成生活中一個可以對話的助手。
（1）適時反饋
人與人的交流中，我們無法忍受的一種情況是：對方對自己說的話沒有反應(yīng)，對自己的行動視而不見。這是一種極其不尊重人的行為，我們會在內(nèi)心鄙視這種人，甚至抓狂！及時恰當(dāng)?shù)姆答伳芨嬖V用戶下一步該做什么，幫助用戶做出判斷和決定，讓用戶知道系統(tǒng)運(yùn)行良好穩(wěn)定。所以要營造和諧的人機(jī)對話環(huán)境，我們必須做到適時地反饋。下面定義了幾個最基本的原則，來保障支付寶對用戶做到適時反饋：
為用戶的操作提供必要、積極、即時的反饋。
根據(jù)內(nèi)容的重要程度選擇合適的反饋形式。
避免過渡反饋，以免給用戶帶來不必要的打擾。
不要打斷用戶的意識流，避免遮擋用戶可能回去查看或操作的對象。
1）反饋方式
移動界面設(shè)計中反饋的方式大致有5種：對話框、小氣泡、多態(tài)按鈕、動畫、聲音或震動，如圖18所示。所有的提示都應(yīng)該在恰當(dāng)?shù)臅r候出現(xiàn)在恰當(dāng)?shù)奈恢?#xff0c;為用戶提供必要、積極、即時的反饋。
圖18 反饋方式
對話框：對話框帶有一兩句說明文字和兩個操作按鈕，用于確認(rèn)和取消重要操作（比如，是否刪除內(nèi)容），通常會用明顯的顏色，突出顯示可能造成損失的操作項（比如，“刪除”“不保存”）。對話框的出現(xiàn)，強(qiáng)迫用戶關(guān)注彈窗內(nèi)容和操作，并屏蔽背景的所有內(nèi)容不可操作，是對用戶打擾最大的反饋提示，也是最強(qiáng)的反饋方式。通常用戶都想趕快關(guān)掉對話框，以便接著完成被打斷的操作。所以，對話框中的文案要盡量言簡意賅，幫助用戶快速了解和做出決策，如圖19所示。
圖19 對話框
小氣泡：氣泡也可以叫“Toast”，這其實是一種弱化版的對話框。它就像氣泡一樣，在界面上展示短暫的時間（5秒以下），然后自動消失。它不強(qiáng)制用戶做任何操作和確認(rèn)，所以對用戶的打擾比對話框小很多。氣泡一般用來確認(rèn)用戶執(zhí)行的任務(wù)狀態(tài)或者操作結(jié)果,如圖20所示。
圖20 小氣泡
多態(tài)按鈕：按鈕是虛擬世界隱喻現(xiàn)實世界的產(chǎn)物，是對現(xiàn)實世界的按鈕和開關(guān)的模擬。而現(xiàn)實世界中的按鈕會對用戶的操作提供實實在在的物理反饋。所以，為了符合用戶的心智模式，界面中的按鈕也應(yīng)該為用戶的操作提供反饋，否則用戶不知道發(fā)生了什么。當(dāng)用戶在屏幕上按下一個按鈕或鏈接時，也需要有狀態(tài)的改變，讓用戶知道界面已經(jīng)接收到他的操作了，如圖21所示。
動畫：動畫能給用戶提供有意義的反饋，幫助用戶直觀了解操作的結(jié)果。并且不打擾用戶的操作，用戶體驗更流暢。而且精美有趣的動畫，能給用戶留下深刻印象，提升使用時的愉悅感。
圖21 多態(tài)按鈕
手機(jī)淘寶將商品收入購物車時的動畫，就是一種比較優(yōu)雅的反饋方式，如圖22所示。
圖22 動畫
聲音或震動：前面講到的反饋方式都是虛擬界面模擬出來的，而聲音或震動能帶給用戶更真實的物理反饋。聲音或震動的反饋給用戶的感覺也應(yīng)該是最真實和自然的。例如，手機(jī)虛擬鍵盤按下時的“啪啪”聲，短信、郵件發(fā)送成功后“嗖”的一聲，拍照時的“咔嚓”聲，都是我們設(shè)計中在聲音方面反饋比較好的。
恰當(dāng)?shù)穆曇舴答佊挟孆堻c睛的效果，但過多地使用可能會變成一種打擾。所以，我們不能將聲音作為主要反饋，并且要給用戶關(guān)閉提示音的權(quán)利（因為用戶所處的環(huán)境多樣，可能很吵而聽不見聲音，也可能不適合打開聲音）。
震動是一種更強(qiáng)烈的觸覺反饋，可以用來加強(qiáng)聲音的反饋。
2）過度反饋
對話框和小氣泡的視覺形式是懸浮在當(dāng)前界面之上的，用戶可以理解對話框與當(dāng)前界面之間的關(guān)系，完成對話框的操作之后可以繼續(xù)原有操作。它的本意是減少頁面的跳轉(zhuǎn)，盡量讓用戶沉浸體驗。但是有的設(shè)計師會濫用對話框，反而打擾了用戶的體驗流程，成為萬惡的對話框。試想一下，如果每想說一句話之前，你都要在腦子里面彈出一個對話框問自己“你是否真的要說這句話”，這是一種多么糟糕的體驗。下面給大家舉幾個反例。
支付寶9.2版本之前，用戶主動關(guān)閉收銀臺，會彈出對話框讓用戶確認(rèn)是否退出，其實顯得十分多余，如圖23所示。
圖23 過度反饋1
支付寶9.0版本以前的服務(wù)窗，在刪除服務(wù)窗的時候會展示刪除成功的小氣泡，如圖24所示。其實完全可以用現(xiàn)在的刪除動畫代替。
圖24 過度反饋2
（2）情感關(guān)懷
情感是人對客觀事物是否滿足自己的需要而產(chǎn)生的態(tài)度體驗。—《心理學(xué)大辭典》
人性和情感是緊密相連、不可分割的，我們在思考人性化的時候，一定不能忘了用戶的情感需求。用戶的需求和期望得到滿足時會產(chǎn)生愉快、喜愛的情感；反之，就會苦惱、厭惡。 所以，當(dāng)用戶在支付寶里受挫的時候，我們要及時地給予情感上的安撫和關(guān)懷；當(dāng)用戶在支付寶里完成任務(wù)的時候，我們要及時地給予情感上的肯定和強(qiáng)化。
1）安撫和關(guān)懷
等待、報錯、系統(tǒng)繁忙等場景都會使用戶產(chǎn)生挫敗感。長時間的等待會讓用戶感到煩躁；犯錯誤讓用戶感到苦惱；系統(tǒng)繁忙甚至讓用戶感到厭惡。如果我們能巧妙地處理好這些場景，降低用戶的挫敗感，就能體現(xiàn)設(shè)計在產(chǎn)品中的價值。
例如，支付寶在“雙11”大促以及發(fā)春節(jié)紅包的時候，用戶可能會遇到系統(tǒng)繁忙的情況。但是這個時候卻是用戶最著急付款的時候，因為大家都在搶貨啊！這個時候我們怎么能通過情感的安撫降低用戶的挫敗感呢？我們賦予系統(tǒng)人格特性，用通俗易懂的語言和虔誠的口吻，跟用戶展開“人與人”之間的對話，如圖25所示。
2）正向強(qiáng)化
在用戶完成某個任務(wù)或者其他正向場景的時候，我們要強(qiáng)化這種正向的情感，加深用戶的情感體驗，如圖26所示。
圖25 安撫和關(guān)懷
圖26 正向情感強(qiáng)化
圖26左圖為用戶進(jìn)入余額寶頁面時，我們通過金額數(shù)字的增長動畫，加強(qiáng)用戶在查看收益和本金時候的喜悅感，加深用戶對余額寶這個產(chǎn)品乃至支付寶的正向情感。
圖26右圖為用戶開啟支付寶會員的時候，我們通過一個完整的頁面和動畫告知用戶獲得的排名與會員等級，強(qiáng)化用戶獲得會員身份和等級時的自我認(rèn)同感。
（3）智能服務(wù)
智能手機(jī)要夠智能。充分利用設(shè)備的硬件特性、系統(tǒng)的數(shù)據(jù)，與設(shè)計進(jìn)行完美的融合，讓用戶感受到我們是懂他的，是聰明的。手機(jī)的傳感器賦予我們對外界的感知能力，海量的用戶特征數(shù)據(jù)賦予我們淵博的知識，強(qiáng)大的后臺計算服務(wù)器賦予我們超強(qiáng)的大腦，我們的App完全可以像人一樣去思考，思考如何為用戶提供更好的服務(wù)，如圖27所示。
圖27 智能服務(wù)
圖27左圖為支付寶登錄，用戶在應(yīng)用中填寫過的信息都可以記錄在系統(tǒng)中，免去用戶二次輸入的麻煩，提升用戶的操作效率。
圖27右圖為新卡號輸入，自動將卡號分隔為4個數(shù)字一段，方便用戶閱讀和核對，并且根據(jù)卡號自動識別所屬銀行，減少用戶的輸入操作。
第3節(jié) 基 礎(chǔ) 規(guī) 范
設(shè)計原則在思維層面指導(dǎo)我們做出符合整體體驗價值觀的設(shè)計決策。根據(jù)簡單、高效、人性化的設(shè)計原則，我們要對頁面的基本組成元素進(jìn)行一致性的定義和規(guī)范化的建設(shè)。文字、圖片、線條、顏色是構(gòu)成頁面的最基本元素，統(tǒng)一這些基本元素對于整個產(chǎn)品的視覺風(fēng)格和品牌傳達(dá)的一致性起著至關(guān)重要的作用。它們就像建筑的基本材料，決定建筑最終的風(fēng)格和特點，正如用木材建造中國及東方建筑，用石材建造西方建筑。
1.設(shè)計風(fēng)格
設(shè)計風(fēng)格是整合品牌傳播的一種表現(xiàn)，它能理性地反映品牌個性與共性，從而建立品牌知名度、美譽(yù)度、忠誠度及品牌聯(lián)想度。
支付寶給用戶傳達(dá)簡單、高效、人性化的理念。而極簡主義（Minimalism）指設(shè)計從功能出發(fā)，形式以滿足功能而存在，沒有功能性的修飾全部去掉。這種設(shè)計風(fēng)格，感官上簡約整潔，品位和思想上更為優(yōu)雅。
極簡主義設(shè)計時，只有圖片、顏色、字體及大小、線條、icon風(fēng)格、留白的處理等設(shè)計元素之間完美配合，才能達(dá)到理想的效果。
2.色彩
品牌色在界面設(shè)計中的使用應(yīng)同時具備品牌識別性以及界面設(shè)計功能性，色彩的運(yùn)用應(yīng)達(dá)到信息傳遞、動作指引、交互反饋，或是強(qiáng)化和凸顯某一個元素的目的。支付寶品牌色如圖28所示。
圖28 支付寶品牌色
人們的大腦記憶過程主要分為3個階段：識記、保存、重現(xiàn)。在實際設(shè)計中，我們可以利用這一特點，更好地傳達(dá)品牌的視覺感知。支付寶移動端通過視覺感官來增強(qiáng)品牌色的引用主要有3種途徑，如圖29所示。
當(dāng)前選中項（圖29中的左圖）；
主操作按鈕（圖29中的中圖）；
操作類文案信息（圖29中的右圖）。
圖29 品牌色引用
3.字體
很多設(shè)計師在產(chǎn)出App時，都會遇到字體選擇的問題，手機(jī)系統(tǒng)的不同，所使用的字體也是不同的。有些個性的App，若字體也做個性設(shè)計，會產(chǎn)生3個方面的影響：
增加了App的安裝包的大小。
用戶在使用該App時，增加額外的學(xué)習(xí)和適用成本。
個性字體與系統(tǒng)字體沒有統(tǒng)一性。
建議大家采用系統(tǒng)字體做設(shè)計方案的產(chǎn)出。下面介紹一下大家經(jīng)常接觸的兩大系統(tǒng)字體及屬性。
（1）字體集
1）iOS系統(tǒng)
在WWDC 2015大會上，蘋果公司專門在OS X El Capitan中為中國用戶打造了全新字體—蘋方字體，其字體具有現(xiàn)代感的外觀、清晰易讀的屏幕顯示效果，并同時支持簡體中文（PingFang SC）、繁體中文（PingFang TC）、香港中文（PingFang HK），看來蘋果公司還是很注重中國人的用戶體驗。iOS默認(rèn)字體如圖30所示。
圖30 iOS默認(rèn)字體
2）Android系統(tǒng)
谷歌公司就沒有這么人性化了，中文字體至今尚未更新，依然沿用Droid Sans Fallback字體，或許是字體庫對手機(jī)廠商開放，可以自行定義。
自從Ice Cream Sandwich 發(fā)布以來，Roboto就是Android系統(tǒng)的默認(rèn)英文及數(shù)字體。寬度和圓度都輕微提高，從而提升了清晰度，并且看起來讓人更加愉悅。Android默認(rèn)字體如圖31所示。
圖31 Android默認(rèn)字體
（2）行高
1）iOS系統(tǒng)
可能很多設(shè)計師都遇到這樣的問題。在設(shè)計過程中，采用默認(rèn)的字行高產(chǎn)出設(shè)計稿，但在視覺驗收階段，卻發(fā)現(xiàn)技術(shù)開發(fā)的頁面與設(shè)計稿不一致。例如：文字與圖片的間距、文字與文字間距、文字與邊框間距等都不同。
解決此類問題其實很簡單，文字行高采用與技術(shù)開發(fā)對等的參數(shù)產(chǎn)出設(shè)計稿即可，圖32列舉了一些常用的文字行高。
圖32 常用的文字行高
從圖32中可以總結(jié)出一個公式：
Y＝2×ceil（X/10）＋X
式中：X為字號（sketch里的字號）；Y為行高；ceil()為向上取整數(shù)。
此公式方便我們在產(chǎn)出設(shè)計稿時，按照文字大小，對應(yīng)地設(shè)置文字行高，便可以確保設(shè)計稿與技術(shù)開發(fā)的頁面中的文字行高一致了。
2）Android系統(tǒng)
Android由于各機(jī)型的字體不同，字體庫對手機(jī)廠商的開放，文字行高就很難找統(tǒng)一的規(guī)則。在實際產(chǎn)出設(shè)計稿時，采用字體Droid Sans Fallback、Roboto，文字行高為系統(tǒng)默認(rèn)，不做設(shè)置，如圖33所示。
圖33 中文、英文、數(shù)字行高
（3）標(biāo)點
中文字在國際GB 2312—1980（漢字國際碼）中采用全角字符，輸入中文時，所使用標(biāo)點同時應(yīng)采用全角字符。這樣就與中文字占的字節(jié)數(shù)保持一致 ，展示出來的中文字與標(biāo)點所占的間距保持統(tǒng)一。
同樣地，英文、數(shù)字、特殊字符采用半角輸入模式，其內(nèi)容所使用的標(biāo)點也采用半角標(biāo)點。
（4）空格
“空格”估計大家并不陌生，它是鍵盤里最大的一個按鍵。如何把“空格”應(yīng)用到實際的設(shè)計中，總結(jié)以下3點經(jīng)驗：
中英文混排時中文與英文之間加半角空格，方便用戶在閱讀時進(jìn)行區(qū)分。
數(shù)字與單位之間需要增加空格，方便用戶精確查閱數(shù)字（支付寶用戶對數(shù)字非常關(guān)注，數(shù)字等同于金額）。 但度、百分比與數(shù)字之間無須增加空格。
中文之間鏈接文字需增加空格。在技術(shù)上實現(xiàn)鏈接時，可增大可點區(qū)域，同時給用戶傳遞可點擊感。
（5）對齊
人們的閱讀習(xí)慣一般是從左到右，人的兩眼是橫著排列的，眼睛視線橫看比豎看要寬，橫看時眼和頭部轉(zhuǎn)動較小，自然省力，不易疲勞。
在實際的文字排版中，中文或英文均可以采用左對齊的方式，如圖34所示。
圖34 文字對齊
數(shù)字通常采用右對齊或小數(shù)點對齊，便于對個、十、百、千位上的數(shù)字進(jìn)行對比。3個數(shù)字以上，使用千分符作為分隔，便于用戶識別，如圖35所示。
圖35 數(shù)字/小數(shù)點對齊
4.圖標(biāo)
（1）圖標(biāo)網(wǎng)格
使用圖標(biāo)網(wǎng)格可確保圖標(biāo)設(shè)計的一致性，從而建立一套明確的圖形元素定位規(guī)則，如圖36所示。
圖36 圖標(biāo)網(wǎng)格
（2）關(guān)鍵線的形狀
關(guān)鍵線的形狀是網(wǎng)格的基礎(chǔ)。利用這些核心形狀作為向?qū)?#xff0c;即可使整個相關(guān)產(chǎn)品的圖標(biāo)保持一致的視覺比例，如圖37所示。
a）方形、圓形
b）豎直矩形、水平矩形
圖37 關(guān)鍵線的形狀
（3）產(chǎn)品圖標(biāo)
產(chǎn)品圖標(biāo)是傳達(dá)品牌內(nèi)涵的一個重要載體，是一個品牌下產(chǎn)品、服務(wù)和工具的一種視覺表現(xiàn)，通過對每個功能屬性的調(diào)用，確定用4種色彩區(qū)分各功能，能夠以簡潔的外形、鮮明的顏色友好地傳遞產(chǎn)品的核心理念與內(nèi)涵，如圖38所示。
圖38 產(chǎn)品圖標(biāo)
5.適配
（1）iOS適配
iOS機(jī)型總覽如圖39所示。
圖39 iOS機(jī)型總覽
（2）Android適配
Android主流機(jī)型概覽如圖40所示。
圖40 Android主流機(jī)型概覽
App設(shè)計開發(fā)必須考慮適配各種屏幕。如何做到交付一套設(shè)計稿就可解決適配大、中、小三屏的問題？設(shè)計和開發(fā)之間采用什么協(xié)作模式？一個基本思路如下：
選擇一種尺寸作為設(shè)計和開發(fā)基準(zhǔn)。
定義一套適配規(guī)則，自動適配剩下尺寸。
特殊適配效果給出設(shè)計效果。
第一步：視覺設(shè)計階段，設(shè)計師按寬度750px（iPhone 6）做設(shè)計稿，除圖片外所有設(shè)計元素用矢量路徑來做。設(shè)計定稿后在750px的設(shè)計稿上做標(biāo)注，輸出標(biāo)注圖。同時等比放大1.5倍生成寬度1125px的設(shè)計稿，在1125px的稿子里切圖。
第二步：輸出兩個交付物給開發(fā)工程師：一個是程序用到的@3X切圖資源，另一個是寬度750px的設(shè)計標(biāo)注圖。
第三步：開發(fā)工程師拿到750px標(biāo)注圖和@3X切圖資源，完成iPhone 6（375pt）的界面開發(fā)。此階段不能用固定寬度的方式開發(fā)界面，得用自動布局（auto layout），方便后續(xù)適配到其他尺寸。
第四步：適配調(diào)試階段，基于iPhone 6的界面效果，分別向上、向下調(diào)試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大、中、小三屏適配。
iOS設(shè)計適配流程如圖41所示。
第一步：視覺設(shè)計階段，設(shè)計師按寬度1080px做設(shè)計稿，除圖片外所有設(shè)計元素用矢量路徑來做。設(shè)計定稿后在1080px的設(shè)計稿上做標(biāo)注，輸出標(biāo)注圖。同時等比放大4/3倍生成寬度1440px的設(shè)計稿，在1440px的稿子里切圖。
第二步：輸出兩個交付物給開發(fā)工程師：一個是程序用到的@4X切圖資源，另一個是寬度1080px的設(shè)計標(biāo)注圖。
圖41 iOS設(shè)計適配流程
第三步：開發(fā)工程師拿到1080px標(biāo)注圖和@4X切圖資源，完成1080px的界面開發(fā)。此階段不能用固定寬度的方式開發(fā)界面，得用自動布局（auto layout），方便后續(xù)適配到其他寬度尺寸。
第四步：適配調(diào)試階段，基于1080px的界面效果，分別向上、向下調(diào)試1440px和720px及以下的界面效果。由此完成大、中、小三屏適配。
Android設(shè)計適配流程如圖42所示。
只交付一套設(shè)計稿，默認(rèn)用什么規(guī)則來適配？
前文提到適配策略是先選擇一種尺寸作為基準(zhǔn)設(shè)計尺寸，然后通過一套適配規(guī)則自動適配到其他尺寸。這套適配規(guī)則總結(jié)起來就是：文字流式，控件彈性，圖片等比縮放，適配系數(shù)。
圖42 Android設(shè)計適配流程
文字流式：在不同的設(shè)備上，文字大小不變，文字顯示的區(qū)域產(chǎn)生變化。通常iOS5的文字顯示區(qū)域更長，一行可以展示更多的文字，如圖43所示。
圖43 文字流式
控件彈性：navigation、cell、bar等適配過程中垂直方向上高度不變、水平方向?qū)挾茸兓瘯r，通過調(diào)整元素間距或元素右對齊的方式實現(xiàn)自適應(yīng)。這樣屏幕越大，在垂直方向上可以顯示越多的內(nèi)容，發(fā)揮大屏幕的優(yōu)勢，如圖44所示。
圖44 控件彈性
圖片等比縮放：當(dāng)涉及插圖、banner等位圖時，這些圖片在不同設(shè)備中根據(jù)屏幕大小等比縮放，保證不變形，如圖45所示。
圖45 圖片等比縮放
適配系數(shù)：同屏幕密度的適配，如6、5、4s，用到前面3個規(guī)則就可以了；跨屏幕密度的適配，如6+、6、3gs，需要用一個適配系數(shù)進(jìn)行換算以后再用前面3個規(guī)則，如圖46所示。
圖46 適配系數(shù)實例
特殊適配：有些界面通過以上規(guī)則進(jìn)行適配以后，可能并不能達(dá)到設(shè)計師理想的效果。這時候需要對這個頁面做各個屏幕的設(shè)計稿，進(jìn)行特殊適配。為了更好地展示效果，工作量無疑會成倍地增長。
以支付寶首頁為例，90×90dp(1080px設(shè)備上像素為270× 270px)的應(yīng)用宮格，在1080px設(shè)備上顯示一行4個，剛好充滿屏幕寬。同樣的宮格，放在480px設(shè)備上(480px設(shè)備上像素為135× 135px)，4個應(yīng)用占據(jù)屏幕寬度135×4=540px已經(jīng)超過屏幕尺寸，放在1440px屏幕上(1440px屏上像素為315×315px)，4個應(yīng)用占寬315×4=1260px，比1440px的屏幕寬度還小一些。
這種情況下就要單獨(dú)考慮屏幕適配方案了，例如：480px屏幕縮小應(yīng)用尺寸，改為80×80dp；或者單獨(dú)提供適合480px的切片；等等，如圖47所示。
第4節(jié) 控件&組件
一致性的原則要求，系統(tǒng)中同樣功能的元素、控件、界面應(yīng)該在樣式、交互行為上都保持一致。前面我們建設(shè)了設(shè)計原則和基礎(chǔ)規(guī)范，從思維方式和基本元素的層面為一致性打下了基礎(chǔ)。如果只有這兩部分，對于產(chǎn)品整體的標(biāo)準(zhǔn)化來說還不完整。因為在同樣的設(shè)計原則和基礎(chǔ)規(guī)范下，設(shè)計出來的導(dǎo)航欄可能不一樣。所以，我們還要建立控件以及組件的標(biāo)準(zhǔn)，整個規(guī)范才能完整地發(fā)揮作用。
那么問題來了，到底頁面中哪些控件應(yīng)該是標(biāo)準(zhǔn)化的？哪些組件應(yīng)該是統(tǒng)一調(diào)用的？哪些東西是固定不變的？哪些東西是可以變化的？如果什么都固定死了，設(shè)計師還有發(fā)揮的空間嗎？
所以，定義好控件、組件的范圍，才能把握好標(biāo)準(zhǔn)化和創(chuàng)新之間的微妙平衡。
哪些元素可以定義為控件，哪些頁面可以統(tǒng)一成組件？如何界定標(biāo)準(zhǔn)化和設(shè)計創(chuàng)新的邊界？我們對支付寶內(nèi)各種類型頁面進(jìn)行了拆分，以是否需要一致作為標(biāo)準(zhǔn)進(jìn)行歸類和整理。圖48所示為典型的頁面拆分案例。
圖48 典型的頁面拆分案例
通過對支付寶數(shù)百個頁面的拆解和分析，我們根據(jù)頁面元素的穩(wěn)定性，將所有的頁面元素歸納為不同的5個層級，并且分別定義每個層級的設(shè)計自由度。如圖49所示。
圖49 層級定義
1.系統(tǒng)層
系統(tǒng)層—完全調(diào)用系統(tǒng)原生的控件和組件，不做任何額外的定義和設(shè)計。所有產(chǎn)品和頁面都應(yīng)該是一致的，最大限度符合系統(tǒng)特性，隨著系統(tǒng)更新變化而變化。系統(tǒng)層包括狀態(tài)欄、系統(tǒng)通知、控制控件、系統(tǒng)鍵盤、手勢，如圖50所示。
2.框架層
框架層—用于組織頁面信息，并且起到導(dǎo)航作用的控件。這部分控件在符合系統(tǒng)體驗原則的基礎(chǔ)上，應(yīng)該反映支付寶的品牌特點。所以框架層需要根據(jù)支付寶自身的特點定制和開發(fā)，但是它在支付寶內(nèi)部應(yīng)該是一致的。這部分控件包括導(dǎo)航欄、Tab欄、分段控件、工具欄，如圖51所示。
圖50 系統(tǒng)層定義示例
圖51 框架層定義示例
3.臨時層
臨時層—頁面中臨時出現(xiàn)的浮層和內(nèi)容，在調(diào)整符合系統(tǒng)交互特性的基礎(chǔ)上，樣式根據(jù)支付寶特點定制和開發(fā)。支付寶內(nèi)部需要保持體驗的一致性。臨時層包括活動視圖、活動菜單、POP菜單、彈框、Toast、選擇器、臨時公告等。如圖52所示。
圖52 臨時層定義示例
4.內(nèi)容層
內(nèi)容層—頁面中剩下的內(nèi)容，跟頁面內(nèi)容的特點相關(guān)，每個頁面可能都不同，是設(shè)計師發(fā)揮空間最大的部分。但是一些具有共性的控件，如列表項、按鈕、輸入框等可以抽離出來，做成標(biāo)準(zhǔn)化，如圖53所示。
圖53 內(nèi)容層定義示例
第5節(jié) 輸 出 規(guī) 范
世上本沒有路，走的人多了，也便成了路。—魯迅
規(guī)范如果沒有人使用，那就是一堆文檔。當(dāng)然，為了保障產(chǎn)品整體的體驗，我們可以采用行政手段，強(qiáng)制要求團(tuán)隊成員閱讀并且遵守規(guī)范文檔。這全靠每個人的記憶力和自覺性，并不能很好地達(dá)到我們想要的效果。因為每個人對同一個東西的理解和執(zhí)行度都是不一樣的。
強(qiáng)制的方法不好，我們就得換一個角度，從每個人的利益出發(fā)，讓大家都樂意使用規(guī)范。這個利益點就是“效率”，我們要讓規(guī)范幫助大家提升工作效率、溝通效率。
1.規(guī)范文檔&UIKit
怎樣的規(guī)范能提升設(shè)計師的工作效率，而不讓他們覺得這只是一種約束呢？
考慮到設(shè)計師的工作特點，我們將設(shè)計規(guī)范分為規(guī)范文檔和UIKit兩部分輸出。規(guī)范文檔是最全的文檔，里面詳細(xì)闡述了設(shè)計原則、基礎(chǔ)規(guī)范，以及每個控件的樣式和使用規(guī)則。這部分文檔需要設(shè)計師閱讀并且理解里面的規(guī)則。UIKit則是控件樣式的集合，我們提供和維護(hù)最新的樣式源文件。設(shè)計師在工作中只需要復(fù)制和拖動，不必重復(fù)繪制和單獨(dú)設(shè)計，節(jié)省了大家的時間。
2.開發(fā)基礎(chǔ)控件庫
設(shè)計規(guī)范僅僅在設(shè)計師團(tuán)隊中推廣是不夠的，因為設(shè)計最后的實施是在開發(fā)環(huán)節(jié)。我們以效率和成本作為突破口，在開發(fā)團(tuán)隊中推廣和執(zhí)行我們的標(biāo)準(zhǔn)化。開發(fā)人員每天加班寫代碼，所以他們是最喜歡標(biāo)準(zhǔn)化的了。所以，建立開發(fā)的基礎(chǔ)控件庫，讓各個產(chǎn)品的開發(fā)都可以直接調(diào)用和配置參數(shù)，這是規(guī)范和標(biāo)準(zhǔn)化執(zhí)行的終極環(huán)節(jié)。
總結(jié)
規(guī)范是死的，設(shè)計是活的。設(shè)計文檔和標(biāo)準(zhǔn)控件是死的，設(shè)計思想是活的。標(biāo)準(zhǔn)化建設(shè)的過程中一定要把握好這個平衡，不能讓規(guī)范制約了創(chuàng)新。建立團(tuán)隊統(tǒng)一的設(shè)計價值觀，界定一個好的設(shè)計框架，讓設(shè)計師在一致的范圍里創(chuàng)造是設(shè)計規(guī)范的價值所在。所以，設(shè)計原則、規(guī)范理論基礎(chǔ)等的提煉和建設(shè)在規(guī)范體系里應(yīng)該得到我們的重視。“戴著鐐銬跳舞”講的正是這個道理。
03 設(shè)計走查表
文/王向紅
在新項目的設(shè)計過程中，交互往往是非常重要的一環(huán)，任何細(xì)節(jié)的偏差都有可能造成產(chǎn)品體驗的缺陷。為規(guī)避設(shè)計缺陷，設(shè)計師在項目過程中可以逐步建立設(shè)計走查表。
設(shè)計走查表應(yīng)該從什么維度開始建立？建立的具體內(nèi)容是什么？
一般我們描述一個產(chǎn)品時，一定是將其放在一個場景中去描述的，用戶在場景中和產(chǎn)品產(chǎn)生互動，互相影響。場景可能包含了移動App使用的軟件系統(tǒng)、硬件載體、移動環(huán)境下的網(wǎng)絡(luò)狀態(tài)以及App實現(xiàn)的技術(shù)框架、版本兼容、使用時間、地點等內(nèi)容。這些場景中遇到的問題是我們設(shè)計走查表里的核心骨架。如圖1所示，App在各種場景下都有交互行為發(fā)生，而我們則保證它能夠完善地運(yùn)行，使用戶產(chǎn)生信任和安全感。
下面我們將從用戶使用移動設(shè)備的硬件特性、軟件特性、網(wǎng)絡(luò)特性，以及具體的用戶界面內(nèi)頁面狀態(tài)、頁面流程完整性及消息通知，及涉及設(shè)計細(xì)節(jié)、與時間/數(shù)字相關(guān)性問題來闡述如何建立設(shè)計走查表。
圖1 設(shè)計走查表相關(guān)因素
第1節(jié) 硬 件 特 性
硬件特性從制定適配原則、賬戶在設(shè)備上的切換、橫豎屏顯示效果等方面來描述，看看在設(shè)計前期我們需要注意哪些問題。
1.制定適配原則
任何產(chǎn)品都會涉及適配問題。首先是制訂native適配方案，如顯示的文字或圖片的適配。
1）數(shù)量不變進(jìn)行同比放大適配，如圖2所示，支付寶首頁適配的時候就是進(jìn)行同比放大，一行數(shù)量不變。
2）同行數(shù)量增多，圖片字號大小不變。
3）避免不規(guī)則背景。在圖片的適配過程中，若圖片底部有不規(guī)則花紋，如圖3所示，因為要切一張大圖，則可能會使紅包增大，用戶打開加載時也會增加流量的耗費(fèi)。
4）不同設(shè)備適配時遮擋。通常，操作時的適配問題容易被忽略。頁面顯示的內(nèi)容在喚起鍵盤時是否有遮擋的問題，怎樣解決遮擋問題？如圖4所示，在iPhone4/4s上，無論怎樣進(jìn)行適配，由于頁面承載的信息過多，下面的支付渠道（用黃色框框住的地方）仍然顯示不全。但在iPhone5/5s、iphone6/6plus上則可以通過調(diào)整間距使內(nèi)容顯示完整。
2.賬戶在設(shè)備上的切換
（1）同一設(shè)備，不同賬戶切換
切換的新賬戶若曾經(jīng)在本設(shè)備上登錄過，則幫助用戶加載展示客戶端存儲的本地內(nèi)容，并且標(biāo)記用戶未處理的新信息。在加載的過程中給出明確的加載狀態(tài)、內(nèi)容展示。
（2）不同設(shè)備，同一賬戶iOS切換
同一個賬戶在不同設(shè)備上登錄時，先確定該賬戶是否支持多設(shè)備同時登錄（多點登錄）；如只支持單點登錄，則在登錄B設(shè)備時，A設(shè)備的賬戶自動被擠下線（單點登錄的安全限制），并提示用戶，設(shè)備是在何時何地登錄的，所以退出了當(dāng)前的登錄狀態(tài)，圖5所示為支付寶賬戶在其他設(shè)備上登錄時出現(xiàn)的提示。
若支持多點登錄，則注意內(nèi)容的同步，且內(nèi)容被操作后的狀態(tài)也需要同步到各個設(shè)備上。特別是同時登錄時push通知下發(fā)及同步，不能讓用戶操作重復(fù)閱讀的工作。
如果設(shè)計的產(chǎn)品與優(yōu)惠、紅包等相關(guān)，則要判斷設(shè)備ID，避免用戶刷優(yōu)惠或紅包，對產(chǎn)品或活動造成影響。
3.橫豎屏顯示效果
應(yīng)用是否支持橫豎屏顯示先確定，如果不支持則鎖定豎向或橫向的單一方向。如果支持則要在設(shè)計的過程中考慮豎屏和橫屏兩種模式下的顯示效果。圖6所示為下廚房的橫豎屏切換，做得比較出色。
圖6 下廚房的橫豎屏切換
第2節(jié) 軟 件 特 性
軟件系統(tǒng)本身是很復(fù)雜的，設(shè)計師需要掌握一些與設(shè)計相關(guān)的軟件特性來幫助設(shè)計，如操作系統(tǒng)特性、制定多平臺的設(shè)計規(guī)范、版本兼容。
1.操作系統(tǒng)特性
在進(jìn)行新產(chǎn)品規(guī)劃初期，需要確定新產(chǎn)品覆蓋的系統(tǒng)及系統(tǒng)版本號。如iOS系統(tǒng)支持很多手勢操作，故iPhone的用戶更容易接受手勢操作。而Android因為硬件設(shè)備的差異比較大，對手勢的支持也有較大的差異，因此較為隱藏的手勢操作不適合使用。
2.制定多平臺的設(shè)計規(guī)范
系統(tǒng)是不斷更新和進(jìn)步的，一個產(chǎn)品如果是多平臺設(shè)計，需要制定平臺規(guī)范。比如統(tǒng)一的表單操作、選項卡、浮層提示、加載、刷新等，這些組控件的統(tǒng)一，可以有效地提高產(chǎn)品優(yōu)化的效率，降低開發(fā)成本，同時能保證用戶體驗的一致性。圖7所示為支付寶制定的標(biāo)簽統(tǒng)一規(guī)范。
3.版本兼容
（1）版本覆蓋時間
新版本上線后要確認(rèn)一下版本在多久的時間范圍內(nèi)可以覆蓋80%以上的用戶。當(dāng)新版本的某些功能要配合H5活動時，這個時間顯得尤為重要。如果版本沒有發(fā)布，而活動的時間已經(jīng)迫在眉睫，那這個活動可能將會面臨失敗。在跨部門合作過程中，可能因為溝通不到位產(chǎn)生這樣的結(jié)果。因此當(dāng)有大型活動進(jìn)行時，需要全力去配合。
（2）更新提示強(qiáng)弱
一般來說，用戶可以選擇不去更新版本繼續(xù)使用，但是當(dāng)App產(chǎn)生較大BUG或存在安全隱患時，可通過不可取消更新進(jìn)行強(qiáng)制升級。
（3）兼容性展示
新版本的內(nèi)容是可以展示在舊版本上的。圖8所示的支付寶9.0版本，用戶不更新就不能使用支付寶2016年新春紅包功能，但是用戶在低版本客戶端的會話頁面仍然能收到會話消息提示，點擊此消息，可以有效地引導(dǎo)用戶更新App。更新后可查看來往的具體會話內(nèi)容。
圖8 內(nèi)容兼容展示
第3節(jié) 網(wǎng) 絡(luò) 特 性
網(wǎng)絡(luò)環(huán)境對移動應(yīng)用設(shè)計有較大的影響，如快速啟動、合理緩存、弱網(wǎng)環(huán)境、中斷/超時，都與網(wǎng)絡(luò)狀態(tài)密不可分。通過設(shè)計策略可以避免網(wǎng)絡(luò)環(huán)境的各種狀態(tài)對用戶體驗造成的影響。
1.快速啟動
應(yīng)用在啟動時需要一個加載時間，為避免用戶在等待時間感到枯燥、乏味，可采用以下3種方式。
（1）讓用戶感知到應(yīng)用的啟動速度比較快
使用一張與應(yīng)用相同的圖片，在用戶點擊應(yīng)用時，這張圖片就顯示出來，用戶會認(rèn)為這個時候應(yīng)用已啟動，雖然用戶會在啟動頁面停留幾秒，但是會覺得應(yīng)用加載速度比較快。
（2）作為一個產(chǎn)品品牌展示區(qū)
啟動頁面展示的是產(chǎn)品的廣告語，如支付寶的“我有我的方式”或者如犀牛的故事“犀牛故事，在故事里相遇”。
（3）作為一個廣告展示區(qū)
啟動頁面可以是產(chǎn)品代言人或者某個時間段的活動。如手機(jī)淘寶就經(jīng)常會有這樣的啟動頁面。
2.合理緩存
頁面合理緩存可以讓用戶感受到應(yīng)用的速度更快，不浪費(fèi)流量。但是緩存不能過量，不能任何頁面內(nèi)容都做緩存，那哪些頁面需要做緩存呢？一般應(yīng)用首頁有比較固定的內(nèi)容時需要做緩存或已有內(nèi)容的頁面不需要全頁面加載，可以先展示較舊的內(nèi)容然后加載出較新的內(nèi)容。相比每次進(jìn)入都重新加載，緩存會讓用戶有更好的體驗。
3.弱網(wǎng)環(huán)境
（1）弱網(wǎng)環(huán)境下加載失敗
網(wǎng)絡(luò)環(huán)境不穩(wěn)定容易導(dǎo)致加載失敗，加載時間控制在8秒內(nèi)（8秒是用戶最長的等待時間，用戶在等待8秒左右時開始感到不耐煩并且想離開當(dāng)前頁面），并且盡可能地采用有趣的加載來降低用戶的等待時間，加載失敗后，要給予用戶重試的機(jī)會，并且告知加載失敗的原因。
（2）弱網(wǎng)環(huán)境下內(nèi)容展示不全
弱網(wǎng)環(huán)境下可能只能顯示部分內(nèi)容，經(jīng)常遇到的情況是文字內(nèi)容顯示，而圖片無法加載出來，只出現(xiàn)占位圖或者是空白圖片，圖9所示為2016年新春紅包出現(xiàn)的占位圖。
（3）弱網(wǎng)無網(wǎng)狀態(tài)下數(shù)據(jù)傳輸／設(shè)置生效機(jī)制
如果網(wǎng)絡(luò)環(huán)境不穩(wěn)定或者斷網(wǎng)，但用戶需要將內(nèi)容發(fā)布出去，可以支持用戶本地發(fā)出去，本地可見。當(dāng)有網(wǎng)絡(luò)請求時，再將內(nèi)容上傳到服務(wù)端，并且讓其他用戶可見。這樣可以有效提升用戶體驗，讓用戶不受網(wǎng)絡(luò)環(huán)境的限制。如美拍可以在斷網(wǎng)的環(huán)境下緩存視頻，當(dāng)有網(wǎng)絡(luò)時可以手動將視頻上傳上去。圖10所示為Facebook自動檢測網(wǎng)絡(luò)，有網(wǎng)絡(luò)后立即上傳失敗內(nèi)容的設(shè)計。
圖10 Facebook上傳失敗內(nèi)容
4.中斷、超時
在網(wǎng)絡(luò)中斷時，幫助用戶保存當(dāng)前的輸入內(nèi)容或者瀏覽內(nèi)容，當(dāng)重新連接到網(wǎng)絡(luò)時用戶可以繼續(xù)當(dāng)前的任務(wù)。若超時則給用戶提示，讓用戶停止等待，重新請求網(wǎng)絡(luò)或退出。
第4節(jié) 頁 面 狀 態(tài)
可以用生命周期來描述一個頁面的狀態(tài)。用戶進(jìn)入這個頁面，首先會看到頁面的初始化；閱讀內(nèi)容的過程中會涉及頁面的刷新、加載；當(dāng)同時訪問頁面的用戶數(shù)量過多時，頁面內(nèi)容會被限流，用戶會在不同的時間進(jìn)入頁面查看內(nèi)容；當(dāng)前頁面內(nèi)容可能過了某個時間節(jié)點會失效，用戶不能再訪問；當(dāng)一個新用戶進(jìn)入這個頁面，可能當(dāng)前的頁面內(nèi)容為空。頁面的這些狀態(tài)需要設(shè)計師提前考慮并提出解決方案。
1.頁面初始化
啟動應(yīng)用進(jìn)入首頁時，可以在啟動過程中預(yù)加載首頁內(nèi)容，讓用戶快速進(jìn)入且有內(nèi)容可預(yù)覽。頁面初始化需要配合加載策略進(jìn)行。
2.頁面刷新
通過刷新可以更新當(dāng)前頁面的數(shù)據(jù)。一般情況下采用用戶手動下拉刷新，下拉刷新不需要對整體頁面進(jìn)行刷新，只需要拉取最新的狀態(tài)，顯示出來即可。但是如果當(dāng)前頁面涉及一些數(shù)字的提醒或通知，則不需要刷新也可以展示給用戶，當(dāng)用戶點擊查看時觸發(fā)刷新，則將頁面內(nèi)容更新到最新的狀態(tài)。
3.頁面加載
（1）分步加載
分步加載是全頁面加載的一種方式，為了盡快地顯示頁面內(nèi)容，可先加載文字內(nèi)容，再加載圖片等內(nèi)容。讓用戶在網(wǎng)速不夠快的情況下可以盡快預(yù)覽到內(nèi)容。這種加載方式通常應(yīng)用在用戶首次進(jìn)入頁面時。
（2）懶加載
懶加載也稱為延遲加載，即在需要的時候才加載，這種加載效率低，但占用內(nèi)存小。一般在頁面瀏覽過程中加載新內(nèi)容時采用這種方式進(jìn)行加載。
（3）智能加載
第一種策略是在產(chǎn)品中增加網(wǎng)絡(luò)判斷的機(jī)制，如果在弱網(wǎng)環(huán)境下，提前壓縮圖片并顯示小圖片，使其能盡量展示預(yù)覽出的內(nèi)容，點擊小圖，可查看大圖。最好是可以讓用戶點擊未加載的內(nèi)容后繼續(xù)加載，不需要重新刷新頁面（只針對客戶端頁面）。第二種策略是降低圖片視頻質(zhì)量，點擊后可以加載高清圖片或者點擊播放視頻選擇高清模式。而在網(wǎng)絡(luò)環(huán)境不佳的情況下，則默認(rèn)幫助用戶降低質(zhì)量，減少流量的耗損。
4.頁面內(nèi)容被限流
一般產(chǎn)品頁面是不會遇到限流的問題的，只有在活動頁面可能因為訪問量太大而遇到限流。如在支付寶的春晚發(fā)紅包過程中，預(yù)測到活動中人流量會比較大，我們提前設(shè)計了限流頁面，讓用戶有較好的體驗。
5.頁面內(nèi)容為空
一般與用戶相關(guān)的頁面可能為空，如我的動態(tài)、評論等。這些頁面為空時不能不顯示，但可以在顯示上用調(diào)皮一點的文案避免空頁面顯得過于枯燥。
6.頁面內(nèi)容失效
一般固定入口不會有頁面失效的狀態(tài)。非固定入口的頁面失效后，可以將入口下掉或者在用戶進(jìn)入后重新刷新出可用內(nèi)容。頁面內(nèi)也需要考慮信息的時效性、延時、過期等問題。
第5節(jié) 頁面流程完整性
除了用抽象的流程圖來確保流程的完整性，設(shè)計師還可以通過快速回到首頁/主要頁面、讓用戶始終知道自己在哪兒、返回到原來的瀏覽位置、任務(wù)完成后跳轉(zhuǎn)這幾項設(shè)計原則來確保完整性上的體驗。
（1）快速回到首頁/主要頁面
用戶不管在應(yīng)用的什么地方，都可以快速返回到首頁/主要頁面。這要求我們在搭建整體信息架構(gòu)的時候，結(jié)構(gòu)足夠扁平。并且所有的頁面流程都必須形成一個有效的閉環(huán)。
（2）讓用戶始終知道自己在哪兒
通過頁面標(biāo)題來讓用戶確認(rèn)當(dāng)前的位置。
通過頁面之間跳轉(zhuǎn)的轉(zhuǎn)場動效讓用戶確認(rèn)當(dāng)前的位置。
用戶可以沿原路返回。
（3）返回到原來的瀏覽位置
明確任何一個可點擊的去向，且去向是可返回的。返回問題連帶定位，從哪里去返回到哪里。特殊路徑需要定制，可能會出現(xiàn)連跳幾個頁面的情況，在驗收過程中需要重點注意。
（4）任務(wù)完成后跳轉(zhuǎn)
任務(wù)成功后，頁面跳轉(zhuǎn)后可返回到來源頁面。
任務(wù)失敗后，需提示當(dāng)前狀態(tài)，并引導(dǎo)用戶如何查看最新的狀態(tài)。在有新結(jié)果時，通知用戶。
第6節(jié) 消 息 通 知
根據(jù)消息的強(qiáng)弱進(jìn)行消息通知的設(shè)計。
強(qiáng)消息通知，可以使用客戶端推送，用戶可以在手機(jī)屏幕或者手機(jī)的通知欄預(yù)覽到內(nèi)容。用戶可以通過通知的新消息直達(dá)到詳情頁面或通知列表。用戶未讀的信息可以標(biāo)記出未讀數(shù)字，如圖11中的消息push通知。
弱消息通知，可以在用戶打開應(yīng)用后，在內(nèi)容層上統(tǒng)一提示，告訴共有××條新消息。點擊后可查看所有消息內(nèi)容，如圖12中的頁面消息通知。
第7節(jié) 細(xì) 節(jié)
設(shè)計細(xì)節(jié)有非常多的點，比較通用的細(xì)節(jié)有：點擊狀態(tài)、發(fā)送狀態(tài)、輸入、反饋、音效。設(shè)計師可以根據(jù)自己的需求來制定細(xì)節(jié)的走查。
1.點擊狀態(tài)
按鈕點擊狀態(tài)包括開始、結(jié)束、不可點、失效、已領(lǐng)完、已過期等。
2.發(fā)送狀態(tài)
發(fā)送狀態(tài)分兩種：一是發(fā)送后需要較長時間返回結(jié)果的，此時發(fā)送后直接到結(jié)果頁面，結(jié)果頁面上顯示當(dāng)前進(jìn)度和最終結(jié)果及其時間；二是發(fā)送后較短時間就返回結(jié)果的，此時發(fā)送后到過渡頁面，有幾秒的等待時間，然后跳轉(zhuǎn)到最終結(jié)果頁面。
3.輸入
（1）減少輸入
在移動端輸入的成本比較高，設(shè)計師可以通過表單、選項卡、默認(rèn)填入值來減少輸入。在社交會話中則可以通過更多的語音、圖片、視頻來減少輸入，讓用戶溝通得更輕松。
（2）輸入限制
在內(nèi)容不確定多寡的輸入框內(nèi)，可以采用暗文或數(shù)字的方式來幫助用戶確認(rèn)當(dāng)前的輸入內(nèi)容有沒有超過限制。輸入的內(nèi)容一定要做長度限制，因為不只是在輸入過程中會遇到顯示的問題，在發(fā)布后也會有顯示問題。
（3）中斷時保存內(nèi)容
移動環(huán)境不穩(wěn)定，經(jīng)常會出現(xiàn)中斷退出的情況。當(dāng)遇到異常情況時，可以保存用戶在中斷前輸入的內(nèi)容，待環(huán)境穩(wěn)定后用戶可以繼續(xù)操作。
4.反饋
（1）即時反饋
當(dāng)用戶操作后，若有需要反饋的信息，在操作后立刻給出，反饋的區(qū)域不能距用戶的操作區(qū)域太遠(yuǎn)，否則就會被忽略。如果是非阻塞式的反饋，那反饋的方式要輕，不要因反饋而干擾用戶當(dāng)前的任務(wù)，對用戶造成困擾。
（2）反饋效果
所有的點擊都要有明確的反饋狀態(tài)，點擊后會出現(xiàn)一系列的狀態(tài)變化。如有的按鈕只可以被點擊一次，用戶點擊后首先按鈕狀態(tài)會改變，其次會產(chǎn)生一個與點擊相關(guān)的操作結(jié)果反饋。
5.音效
應(yīng)用音效需要考慮其大小，配合操作使用時是否有延遲。特別需要考慮用戶當(dāng)前的使用場景出現(xiàn)聲音是否合適。
第8節(jié) 與時間、數(shù)字相關(guān)性問題
1.時間
（1）制定時間規(guī)范
根據(jù)產(chǎn)品設(shè)計需求，在前期根據(jù)場景規(guī)劃時間顯示規(guī)則，如格式是“2016-3-16”還是“2016/03/16”等。用在列表頁面、詳情頁面還是會話頁面都要提前規(guī)范好。
（2）不同場景下時間格式的選擇
用戶對于時間的感知根據(jù)場景的不同會有很大的差異。從我們的對話中就可以感受到，平時問“什么時候開周會”，會回答“周三”。但是如果問“什么時候提交報告”，會回答“3月20日”。從對話的場景中可以看出我們對時間維度的區(qū)分。因此在對時間進(jìn)行設(shè)計時，一定是根據(jù)使用場景來進(jìn)行時間的設(shè)計。圖13所示為時間規(guī)則。
圖13 時間規(guī)則
（3）有效／失效時間
消息、卡券、紅包等都會有時效性，有的時效對用戶來說是有生效期的，與生效期相對的是失效期。內(nèi)容失效后需要處理，可能由清除或者其他功能來支持。有的內(nèi)容是沒有生效期的，但是它會變成歷史內(nèi)容，歷史內(nèi)容與現(xiàn)有的內(nèi)容需要進(jìn)行一定的區(qū)分。
2.數(shù)量
規(guī)范數(shù)量規(guī)則時，需考慮以下問題：
是否為零，為零時應(yīng)該顯示還是隱藏？
刷新是否影響數(shù)字變化？
數(shù)字是否會減少，當(dāng)數(shù)字減少為零時是否有反饋或界面變化？
總結(jié)
本章總結(jié)的只是部分內(nèi)容，在設(shè)計過程中還有很多的細(xì)節(jié)需要設(shè)計師考慮，并納入設(shè)計走查表中。設(shè)計走查表不僅能幫助設(shè)計師本身，還可以幫助與設(shè)計師一起工作的項目伙伴，在項目進(jìn)行前期，交互設(shè)計師在參與需求策劃討論時就可以與項目組的同事一起閱讀設(shè)計走查表，并制定項目在執(zhí)行層面的規(guī)范，可以保證多項目并行時調(diào)用相同組件的一致性；在項目結(jié)束后，設(shè)計走查表可以有效地進(jìn)行設(shè)計驗收。
圖14～圖16是3個案例，表內(nèi)的內(nèi)容不僅可以幫助開發(fā)梳理各種狀態(tài)，還可以在后期給大家提供驗收的依據(jù)，不會遺漏任何細(xì)節(jié)和狀態(tài)。
圖14 框架案例
圖15 頁面狀態(tài)案例
圖16 消息通知案例
總結(jié)
- 上一篇： Unity之Image Raw Ima
- 下一篇： 用linux给诺基亚手机刷机,Nokia