支付寶體驗設計精髓. 02 無規矩不成方圓

<b>02 無規矩不成方圓</b>

<b>—設計規範的建設</b>

文/ 周建波、朱蘭民

第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）删除&amp;隐藏

人在處理資訊、學習規程和記憶細節方面的能力是有限的。現實中，人可能還面臨各種中斷和打擾，這些都進一步限制了人的能力。界面中過多的小細節會增加使用者的認知負擔，就像路障會降低人們的行走速度一樣，過多的小細節會降低使用者的使用效率。

删除那些可有可無的功能、多餘的選項、備援的文字、花哨的修飾，可以減輕使用者的負擔，讓使用者專心做自己想做的事。界面清清爽爽、簡簡單單，不去分散使用者的注意力。

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）行高

可能很多設計師都遇到這樣的問題。在設計過程中，采用預設的字行高産出設計稿，但在視覺驗收階段，卻發現技術開發的頁面與設計稿不一緻。例如：文字與圖檔的間距、文字與文字間距、文字與邊框間距等都不同。

解決此類問題其實很簡單，文字行高采用與技術開發對等的參數産出設計稿即可，圖32列舉了一些常用的文字行高。

圖32　常用的文字行高

從圖32中可以總結出一個公式：

y＝2×ceil（x/10）＋x

式中：x為字号（sketch裡的字号）；y為行高；ceil()為向上取整數。

此公式友善我們在産出設計稿時，按照文字大小，對應地設定文字行高，便可以確定設計稿與技術開發的頁面中的文字行高一緻了。

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節　控件&amp;元件

一緻性的原則要求，系統中同樣功能的元素、控件、界面應該在樣式、互動行為上都保持一緻。前面我們建設了設計原則和基礎規範，從思維方式和基本元素的層面為一緻性打下了基礎。如果隻有這兩部分，對于産品整體的标準化來說還不完整。因為在同樣的設計原則和基礎規範下，設計出來的導航欄可能不一樣。是以，我們還要建立控件以及元件的标準，整個規範才能完整地發揮作用。

那麼問題來了，到底頁面中哪些控件應該是标準化的？哪些元件應該是統一調用的？哪些東西是固定不變的？哪些東西是可以變化的？如果什麼都固定死了，設計師還有發揮的空間嗎？

是以，定義好控件、元件的範圍，才能把握好标準化和創新之間的微妙平衡。

哪些元素可以定義為控件，哪些頁面可以統一成元件？如何界定标準化和設計創新的邊界？我們對支付寶内各種類型頁面進行了拆分，以是否需要一緻作為标準進行歸類和整理。圖48所示為典型的頁面拆分案例。

圖48　典型的頁面拆分案例

通過對支付寶數百個頁面的拆解和分析，我們根據頁面元素的穩定性，将所有的頁面元素歸納為不同的5個層級，并且分别定義每個層級的設計自由度。如圖49所示。

圖49　層級定義

1.系統層

系統層—完全調用系統原生的控件群組件，不做任何額外的定義和設計。所有産品和頁面都應該是一緻的，最大限度符合系統特性，随着系統更新變化而變化。系統層包括狀态欄、系統通知、控制控件、系統鍵盤、手勢，如圖50所示。

2.架構層

架構層—用于組織頁面資訊，并且起到導航作用的控件。這部分控件在符合系統體驗原則的基礎上，應該反映支付寶的品牌特點。是以架構層需要根據支付寶自身的特點定制和開發，但是它在支付寶内部應該是一緻的。這部分控件包括導航欄、tab欄、分段控件、工具欄，如圖51所示。

圖50　系統層定義示例

圖51　架構層定義示例

3.臨時層

臨時層—頁面中臨時出現的浮層和内容，在調整符合系統互動特性的基礎上，樣式根據支付寶特點定制和開發。支付寶内部需要保持體驗的一緻性。臨時層包括活動視圖、活動菜單、pop菜單、彈框、toast、選擇器、臨時公告等。如圖52所示。

圖52　臨時層定義示例

4.内容層

内容層—頁面中剩下的内容，跟頁面内容的特點相關，每個頁面可能都不同，是設計師發揮空間最大的部分。但是一些具有共性的控件，如清單項、按鈕、輸入框等可以抽離出來，做成标準化，如圖53所示。

圖53　内容層定義示例

第5節　輸

出 規 範

世上本沒有路，走的人多了，也便成了路。—魯迅

規範如果沒有人使用，那就是一堆文檔。當然，為了保障産品整體的體驗，我們可以采用行政手段，強制要求團隊成員閱讀并且遵守規範文檔。這全靠每個人的記憶力和自覺性，并不能很好地達到我們想要的效果。因為每個人對同一個東西的了解和執行度都是不一樣的。

強制的方法不好，我們就得換一個角度，從每個人的利益出發，讓大家都樂意使用規範。這個利益點就是“效率”，我們要讓規範幫助大家提升工作效率、溝通效率。

1.規範文檔&amp;uikit

怎樣的規範能提升設計師的工作效率，而不讓他們覺得這隻是一種限制呢？

考慮到設計師的工作特點，我們将設計規範分為規範文檔和uikit兩部分輸出。規範文檔是最全的文檔，裡面詳細闡述了設計原則、基礎規範，以及每個控件的樣式和使用規則。這部分文檔需要設計師閱讀并且了解裡面的規則。uikit則是控件樣式的集合，我們提供和維護最新的樣式源檔案。設計師在工作中隻需要複制和拖動，不必重複繪制和單獨設計，節省了大家的時間。

2.開發基礎控件庫

設計規範僅僅在設計師團隊中推廣是不夠的，因為設計最後的實施是在開發環節。我們以效率和成本作為突破口，在開發團隊中推廣和執行我們的标準化。開發人員每天加班寫代碼，是以他們是最喜歡标準化的了。是以，建立開發的基礎控件庫，讓各個産品的開發都可以直接調用和配置參數，這是規範和标準化執行的終極環節。

總結

規範是死的，設計是活的。設計文檔和标準控件是死的，設計思想是活的。标準化建設的過程中一定要把握好這個平衡，不能讓規範制約了創新。建立團隊統一的設計價值觀，界定一個好的設計架構，讓設計師在一緻的範圍裡創造是設計規範的價值所在。是以，設計原則、規範理論基礎等的提煉和建設在規範體系裡應該得到我們的重視。“戴着鐐铐跳舞”講的正是這個道理。