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