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