進入Web2.0時代以來，使用者體驗（User Experience）逐漸在網際網路站實踐中被髮掘、提煉和延展，它貫穿產品的整個環節，於細微處體現著價值，助推著商機，在企業快速成長的征途中將成為核心競爭力之一。伴隨這一趨勢，可用性、易用性、轉化率、使用者研究、互動設計、視覺設計、前端開發……新概念不斷進入我們的視野。本文將從概念、衡量標準、流程把控出發，並結合具體應用實踐，分享攜程在使用者體驗領域中的探索。

什麼是好的使用者體驗？

把出品iPhone的蘋果和海底撈之間連根線，你會想到什麼？

蘋果推崇簡單易用，產品設計時就專注於顧客的想法和需求，使用者往往只需按一個鍵，就可以完成想要實現的功能。原本並非手機巨頭的蘋果，將這一理念帶入手機設計，從iPod、iPhone到iPad，一鍵通行，即使兒童操作起來都毫無障礙。出眾的使用者體驗獲得消費者追捧，迅速贏得市場優勢。而海底撈則踐行“以提升使用者體驗開啟市場”的理念，令員工以全心全意的極致服務來征服顧客的心。

一個久負盛名的高科技企業，一個服務見長的餐飲新貴，看似互不相干，卻有著同樣的核心競爭力——使用者體驗（User Experience）。

在強調以人為本、以使用者為中心的今天，使用者體驗被稱做創新2.0模式的精髓。它直接決定了使用者對企業的整體印象，界定了企業和競爭對手的差異。在同等條件下，好的使用者體驗會使產品贏得競爭優勢。尤其當市場趨於“同質化”，同類型產品競爭日益激烈，使用者體驗顯得愈發重要。

ISO標準將使用者體驗定義為“人們對於使用或期望使用的產品、系統及服務的認知印象和迴應”。通俗講，就是產品好不好用，用起來方不方便，下次還願不願意再來（12306也許是個反面典型）。

什麼是好的使用者體驗？想象你逛進一家超市，印刷精美的促銷目錄即時派送給你，清晰明確的導航指示讓你很快找到商品區域，排列有層次的商品不致讓你陷入太多選擇的糾結，商品說明、點評、標價、折扣資訊簡約全面，重點突出還能排序對比，你不費太多力氣就找到心儀的物品放進購物車。此時，相關商品的推薦適時出現，而且正合你的需求，購物清單很快勾滿。你推著購物車來到結賬處，沒有排隊還支援各種支付，這樣的購物體驗，值得點贊吧。

同樣的經驗，我們也希望出現在攜程的網站。並且，訪客自登入進入網站起，便彷彿有高階客服相伴，他會收到根據個人資訊為他定製的產品資訊；簡約大氣的頁面伴隨條理明晰的目錄分類，使用者搜尋瀏覽一路快捷暢通；填寫訂單時存於網站的個人資料自動填入而無須再費周折。快速的響應、精準的推薦、靠譜的承諾、搜尋無結果時貼心周到地給出備選方案……在精心設計規劃的虛擬超市裡，使用者所做的，只是舒適地瀏覽—選擇—下單，省心省力。線上預訂過程不再是帶著壓力的任務，而成為一種享受，一種愉悅的經驗。

所有這一切，都源於以使用者為中心的使用者體驗設計 （User Experience Design）。設計的全過程中，產品經理會專注於戰略層次（Strategy）明確使用者需求和產品目標，在範圍層次（Scope）確立網站功能，把握方向。而UED設計中心則會用巧思創意和縝密邏輯，在結構層（Structure）展示網站的具體架構，在框架層（Skeleton）優化頁面的設計佈局，最終在表現層 （Surface）呈現出面對使用者的網頁圖文，和給使用者帶來直觀體驗的互動效果——通俗來講，產品經理界定“有什麼”，互動設計確定“怎麼使用”，而視覺設計決定“看起來如何”。

良好的使用者體驗是各團隊共同努力的結果，上線的頁面往往都經過反覆推敲和優化，集納了社會學、人類學、心理學、設計學、美學、IT各種知識並平衡於商業考量。頁面的改進並不限於外觀，統計資料會說話，從不斷提升的訪問量、訂單轉化率和使用者忠誠度上，使用者體驗的價值終會讓你看到。

如何讓使用者對產品“一見鍾情”？

在攜程，客戶服務是核心優勢。從登上攜程頁面，到下達訂單，再到走完行程感受攜程的服務，使用者體驗隨時相伴。單說線上，如何通過文字、圖片和潛藏其下的各種邏輯、各種互動行為的運用，讓萬千訪客對攜程產品“一見鍾情”，UED使用者體驗設計就承載了這樣的任務。

產品的IDEA來源於產品經理，他們會根據使用者需求和市場研究，定義出產品的目標、功能和範圍，並付諸於具體的產品需求文件。

進入設計階段，設計師們首先要理解、分析使用者的需求，以他們的眼光重新審視，比如將人物角色（Persona）提取到情景（Scenario）中，通過想象使用者會有何種購買經歷來描述使用者需求的完成過程。

現有產品分析也是這一階段的任務。用研團隊通過眼動測試、使用者可用性測試和滿意度問卷調查這些科學客觀的方法，評估設計原型（即設計稿）和需要驗證的設計原則，令設計更有的放矢，也能在原型完成後組織使用者測試，驗證設計使之更臻完善。競品分析，則是實踐“知己知彼”的古訓，緊跟市場需求，關注對手動向，科學分析而非盲目跟風。

理清需求後，互動設計師開始進入概念設計，他們將依序規劃出產品的工作流程（Workflow）、資訊架構和網頁佈局。在獲得需求方認可後的詳細設計階段，UI設計師要為網頁上各個元素做出介面和互動設計。具體到一個“提交訂單”功能，是否用按鈕來完成、按鈕何處擺放、按鈕的大小層級、滑鼠移上去及按下後的變化效果、按下按鈕後的成功失敗反饋、使用者後續操作的提示資訊……所有這些使用者下單時可能發生的行為，以及系統如何配合響應，事無鉅細，互動設計師都要考慮周到。

互動設計完成的將是著重資訊元素組織及概念模型搭建的低保真原型，視覺設計師將用他們的創意將之轉換成高保真原型（顧名思義，高保真在觀感上已十分接近最終的網頁）。視覺設計同樣歷經研究分析、設計草案、視覺提案與定稿完善等階段，設計師們通過構思創意、多方案對比、配色表現和細節深入，將內容、功能和美學彙集在一起，以專業而有魅力的視覺展示為網頁贏得注目。

網頁空間寸土寸金，文字內容需符合網際網路的掃視習慣，能引領視線，突出符合使用者期望且有價值的資訊，促進購買。同時需符合語言使用規範，符合法律法規，避免風險。

文案團隊會在此時登場，對原型中的文字推敲斟酌，做出優化修改。文案質量關乎公司形象和專業水準，更重要的是能確保使用者無障礙、準確、快速地接受產品需要傳達的資訊，甚至在字裡行間感受到攜程對使用者的尊重與熱情。比如，使用者選擇和預訂時，行文給予正面鼓勵，完成訂單時加以祝賀；而因攜程原因遇到客房已訂完等狀況，則需在結果頁使用抱歉提示，並提供其他解決方案。

如果將互動設計比作建築領域的方案設計、技術設計和施工圖繪製，那視覺設計更像經修飾、渲染後模擬出效果圖。而樣板房的構建，就有賴於前端開發的工程師了。

他們根據設計稿，用HTML完成靜態頁面製作並用CSS提煉出統一規格的樣式表，實現互動效果為動態JS做好鋪墊。在此基礎上，維護完成頁面並對網站前端效能不斷優化。在他們手中，高保真原型真正轉化成了網頁，可交付後續的開發環節。

打動使用者，攜程是如何做到的？

上文主要介紹了使用者體驗應遵循的基本流程及設計原則，接下來將結合旅行日程移動應用的設計過程，重點談談攜程是如何抓住使用者核心需求，突破原有侷限，為使用者提供旅遊一站式服務的。

旅行日程通過整合使用者訂單中的行程資訊，可為使用者提供統一的行程管理。使用者在完成預訂後，可在應用上查看出行的整個活動，如飛機出發時間、是否延誤、到達目的地要不要接機、怎樣去酒店等相關問題。這改變了傳統旅遊訂單管理僅為完成資訊確認而簡單羅列訂單資訊的單一功能，延長了與使用者互動時間，覆蓋了整個出行行程，服務更完善、更貼心。

圖1 旅行日程展示方便使用者隨時獲取行程資訊

該應用的設計初期，面臨的挑戰是如何抽取和呈現一張旅遊訂單所包含的關鍵出行資訊，同時需要能符合手機這一移動裝置場景的使用習慣，方便使用者能最有效地獲取當前所需行程資訊。經過團隊成員之間的研究，最後選擇了動態卡片這一形式，其優點在於對資訊的收斂性，能讓使用者感知到一張行程卡片就是在說一件事情，也正是這種特性，促使設計能夠真正從出行的使用場景出發，對展示資訊作出正確的取捨。

舉例來說，旅行日程的機票卡片，在乘機前幾天著重展示時間和航站樓資訊，而臨近起飛，則著重展示航班動態、值機和登機口資訊。若它們變更了，會及時通知使用者。而到飛機到達時，又會著重展示行李資訊。這種動態的卡片設計，保證了在方寸之地，使用者看到的都是和當前場景相符的重要資訊。

圖2  根據當前場景推送使用者所需服務

2014年年中，在旅行日程上線半年後，旅行日程的產品方向要往一站式服務更進一步，然而原有的設計框架已經無法承載。比如使用者想從一個景點，遊玩其他通勤方便的景點，再比如到了三亞酒店，使用者想在那裡租車自由行，甚至發現因為是通過攜程預訂的酒店，租車能更便宜。這時的設計挑戰是既要保證原有輕而美的體驗，又能開闢出一塊麵向用戶行程中服務的設計。

我們嘗試了延展設計。

圖3  延展設計讓卡片承載更多服務內容

當然，延展必定意味著更多頁面。但我們不想打斷使用者操作，要讓使用者感到雖然它功能全新了，但頁面間，邏輯、操作，以及資訊的前後承接比過去更加流暢。我們通過減少卡片的非必要操作，暗示使用者可以觸控卡片獲得更多與其相關的資訊，同時，配合動效，使使用者感知如何方便地回到主頁面。

新的延展性設計正式亮相後，得到了很多正面反饋。通過前後的動效以及資訊的延展讓使用者意識到整個卡片的延展，同時通過非常自然的手勢快速回到主頁面。以機票場景為例，當我已經知曉了起飛時間以及值機完成後，想了解機場的具體位置，會自然而然地去觸控卡片本身瞭解是否有更多有價值資訊，接下來出現的更多補充資訊會讓人意識到這就是延展以及更多幫助資訊。這時我們還可以推送有效的機場中或者周邊服務，幫助使用者的同時也能提高自身的轉化。

憑藉獨特的設計理念和卡片展現形式，旅行日程已成為整個攜程App的大入口，活躍使用者獲得了數十倍的增長，也吸引了其他OTA的跟進效訪。在未來的時間裡，旅行日程仍會堅持向一站式服務更進一步。

結語

將使用者置於核心，用愛和專業悉心澆注產品，是企業產品設計整個流程的指向標。同時遵循基本設計流程，一環一環緊密配合、快速迭代，使用者體驗設計才能運轉若行雲流水。