這次案例是一個我最近在預(yù)定的船票預(yù)定服務(wù)，由一家叫名門大洋的渡輪服務(wù)公司提供。下面是對它預(yù)定的簡單介紹：
步驟1：打開官網(wǎng)，到 [船上生活] 模塊查看有哪些船（只有兩艘）和房型，以及船上有哪些服務(wù)設(shè)施等。
步驟2：進(jìn)入 [運費和費用] 模塊，先看他們的預(yù)約規(guī)則，然后打開他們提供的PDF查看預(yù)定的日期和價格，來確定自己想要選的房間。這里房型價格和熱門時間有關(guān)，官方分了A、B、C三個價格檔來對應(yīng)熱門冷門時間。
步驟3：進(jìn)入 [預(yù)定] 模塊，填寫個人信息和想預(yù)約的房型，房型選擇有3個，如果前面的選擇滿房就向后遞補，填寫完成后，就可以點擊發(fā)送預(yù)定信息。
步驟4：隔日等待反饋郵件，到郵箱中查看。還能預(yù)定的話就會有一個鏈接，進(jìn)入鏈接中進(jìn)行支付。之后就可以獲得登船的憑證。
后續(xù)的細(xì)節(jié)就忽略，一個簡單的買票緩解，操作起來這么麻煩，是不是感覺非常陌生，這是因為國外有很多服務(wù)的預(yù)定都需要到官網(wǎng)預(yù)定，和國內(nèi)出行完全依賴綜合旅游軟件如飛豬、攜程、去哪兒等不同。
而這個訂票的流程，到審核（人工的）回復(fù)的整個過程，就叫 —— 業(yè)務(wù)流程，是一個被設(shè)計好并標(biāo)準(zhǔn)化的商業(yè)實踐過程。
每家公司的經(jīng)營都會包含大量的業(yè)務(wù)，房間預(yù)定只是它的其中一個業(yè)務(wù)，還包括登船、房間清理、物資采購等。而每個常規(guī)的業(yè)務(wù)的執(zhí)行如果全憑員工自己的想法、感覺，那么企業(yè)的運轉(zhuǎn)一定會一團亂麻。所以經(jīng)營者就要針對這些常見的業(yè)務(wù)，設(shè)計出相應(yīng)的流程出來進(jìn)行標(biāo)準(zhǔn)化，讓員工和顧客遵循這套流程來完成商業(yè)活動。
而業(yè)務(wù)只有流程框架還不夠，必須包含大量的細(xì)節(jié)，比如前面提到的不同定價時段，滿房的遞補，退票的方式等等，這些都是業(yè)務(wù)流程中的細(xì)節(jié)規(guī)則，我們可以統(tǒng)稱它們?yōu)?“業(yè)務(wù)邏輯”。
簡單來說，企業(yè)經(jīng)營要先確定業(yè)務(wù)，然后設(shè)計流程，再制定具體的業(yè)務(wù)邏輯，形成完整的商業(yè)閉環(huán)。但這和設(shè)計師有什么關(guān)系呢？
因為業(yè)務(wù)是產(chǎn)品的出發(fā)點，常規(guī)項目只有業(yè)務(wù)形式確定下來，才會進(jìn)入產(chǎn)品的設(shè)計階段，而不是先設(shè)計產(chǎn)品功能再讓業(yè)務(wù)去適配它的特性。而產(chǎn)品后續(xù)一系列的復(fù)雜、抽象、晦澀的決策也全都和業(yè)務(wù)有非常大的聯(lián)系，
如果設(shè)計師不先理解業(yè)務(wù)，就可能無法理解產(chǎn)品的需求和決策，導(dǎo)致最終的設(shè)計結(jié)果和目標(biāo)想去甚遠(yuǎn)。
這個預(yù)定過程對于熟悉國內(nèi)互聯(lián)網(wǎng)的我們來說肯定是太復(fù)雜了，用個線性流程表示的話，對比如下：
國內(nèi)軟件預(yù)定：打開軟件 - 搜索船票 - 選擇日期 - 選擇房型 - 完成支付
官方網(wǎng)站預(yù)定：搜索官網(wǎng) - 打開官網(wǎng) - 查看房型 - 查看價格 - 填寫信息 - 等待回復(fù) - 查看郵件 - 完整支付
從字面上感覺可能不明顯，但實際上操作時長、點擊次數(shù)以及總消耗時間，它的做法遠(yuǎn)比國內(nèi)的服務(wù)慢，加上細(xì)節(jié)里有很多會延長完成時間的邏輯，比如沒有想要的房型就要重新去選一遍，而這在國內(nèi)軟件里一開始就能知道直接規(guī)避掉。
這個業(yè)務(wù)過程非常的原始，后臺可能有一個簡單的收件系統(tǒng)，由人工來逐一審核提交的郵件，創(chuàng)建訂單，然后再提交回復(fù)。
如果我們要提高這個業(yè)務(wù)的效率，就必須要改進(jìn)這套系統(tǒng)，將人工的機制進(jìn)行簡化，即客戶可以直接在前端完成篩選、預(yù)定、支付的操作。相信大家都很熟悉這種操作過程，而這種改進(jìn)就叫 ——
企業(yè)數(shù)字化升級
。就是本來使用人工或者很原始的方式執(zhí)行的業(yè)務(wù)流程，引入數(shù)字化的系統(tǒng)、產(chǎn)品，來提升它的運行效率。
而產(chǎn)品經(jīng)理要在這個過程做業(yè)務(wù)的分析，具體分析什么呢，可以簡單總結(jié)成：
-
-
當(dāng)前業(yè)務(wù)存在的具體缺陷
-
構(gòu)思產(chǎn)品的整體框架形態(tài)
-
前兩點前面已經(jīng)解釋過了，當(dāng)前業(yè)務(wù)是存在缺陷的，而產(chǎn)品經(jīng)理必須先理解完業(yè)務(wù)和找出問題，才能進(jìn)行后續(xù)工作，而不是直接忽視背景打開 Axure開始畫圖。
有了問題，下一步就是建立產(chǎn)品的框架，比如這個業(yè)務(wù)會涉及到多個端，產(chǎn)品就要先創(chuàng)建多個端的功能框架出來，包含的端可以簡化成下面三個：
用戶端就是普通的網(wǎng)頁預(yù)定模式（這里不討論APP和小程序等），讓用戶直接選擇日期、船型、房型后支付獲取憑證，非常容易理解，不用多做介紹，我們重點放在管理端和后臺服務(wù)的解釋上。
TIPS：這里有個可以思考的小點，沒做用戶系統(tǒng)你們可以分析下為什么。
在管理端上，管理員已經(jīng)不需要手動審核預(yù)約了，所以只需要對訂單和賬單（這是兩件事）有查看和管理的操作即可，來完成一些特殊業(yè)務(wù)事件的處理。
而在后臺服務(wù)上，就要確定有哪些數(shù)據(jù)信息，以及處理它們的方式。比如訂單的支付、退款，會涉及到非常復(fù)雜的后臺處理過程，包括不同支付方式接入、對不同貨幣的支持、資金的轉(zhuǎn)出等等。其它功能還包括房型數(shù)據(jù)更新、價格數(shù)據(jù)更新。這些都是用戶端和管理端無法直接看見，但又在真實運行的功能。
根據(jù)上面對不同端的分析和構(gòu)想，就可以創(chuàng)建產(chǎn)品的 —— 功能架構(gòu)圖，比如下面這個極簡的版本：
對于一個成熟的產(chǎn)品經(jīng)理來說，進(jìn)一步制定產(chǎn)品的需求肯定不是直接打開Axure畫原型，而是先圍繞業(yè)務(wù)的需求制定 —— 數(shù)據(jù)字段。
數(shù)據(jù)字段即前、后端服務(wù)中要存儲、計算、展示的具體對象。比如一個房間，前端頁面會展示房間名、價格、人數(shù)、面積、類型、評價等各種數(shù)據(jù)。但這些數(shù)據(jù)不是憑空出現(xiàn)的，而是要先計劃和開發(fā)才能實現(xiàn)的內(nèi)容，且不同字段背后可能還包含復(fù)雜的設(shè)置或計算規(guī)則。
所以產(chǎn)品要花很多時間分析應(yīng)該記錄哪些數(shù)據(jù)字段，這些數(shù)據(jù)怎么產(chǎn)生，背后有什么邏輯，在前端顯示的標(biāo)準(zhǔn)是什么。
用個更具體的案例來解釋，比如要創(chuàng)建房間價格這個字段，這個字段的值就具體價格值。但是房間的具體價格不是固定的，包含三個檔位，根據(jù)日期決定的檔位進(jìn)行靈活的變動。所以要實現(xiàn)正確的價格顯示，光有一個房間價格字段是不夠的，我們需要建立更多字段來滿足它的使用，包含：
-
房間基礎(chǔ)定價：房間的基底價格，用于做計算的基數(shù)
-
房價當(dāng)前系數(shù)：根據(jù)忙時和閑時變更定價的系數(shù)，比如忙時是原來的1.5倍，閑時是原來的0.8倍
-
房間當(dāng)前價格：根據(jù)定價基數(shù)x 系數(shù)得到的當(dāng)前價格，是前端展示和付款的具體金額
這是個非常簡化的版本，除了使用基數(shù)x系數(shù)的邏輯外，也可能直接給房間制定A、B、C三個價格的字段直接填價格不做系數(shù)計算。在真實項目中，該功能會創(chuàng)建得字段數(shù)遠(yuǎn)不止這些，產(chǎn)品還需要去明白數(shù)據(jù)的來源、計算邏輯、應(yīng)用規(guī)則。
對于成熟的項目來說，項目的數(shù)據(jù)字段就是業(yè)務(wù)需求的延展，是整個業(yè)務(wù)正常運行的基石和原材料，產(chǎn)品制定的需求就包括它們的內(nèi)容和規(guī)則，再讓后端工程師去實現(xiàn)出來（而不是后端自己憑感覺想）。
有了上面這些準(zhǔn)備，那么產(chǎn)品應(yīng)該做成什么樣就清晰很多了。下一步，產(chǎn)品經(jīng)理就可以先用思維導(dǎo)圖去規(guī)劃管理端的頁面結(jié)構(gòu)與內(nèi)容，而這種思維導(dǎo)圖通常被稱為 ——
產(chǎn)品地圖
。
規(guī)劃完產(chǎn)品地圖后，下一步才進(jìn)入正式的產(chǎn)品原型設(shè)計過程，將我們對產(chǎn)品應(yīng)該做成什么樣通過原型線框圖表現(xiàn)出來，只要能讓其他人理解我們的意圖即可。
當(dāng)然只看圖是不夠的，很多細(xì)節(jié)的決策和邏輯就需要添加文字的說明，這種結(jié)合原型+文字的需求就交 PRD需求文檔。它的作用是讓設(shè)計師、程序員、測試工程師可以看懂并把它們做出來的 “施工方案”。
而作為B端UI設(shè)計師就要在了解業(yè)務(wù)和獲得這些需求后，才能明白我們后面應(yīng)該完成哪些工作，輸出什么樣的界面內(nèi)容。
在項目中B端設(shè)計師的工作可以分成三個步驟，即：
前期準(zhǔn)備要做的事情很多，包括參與立項的各種會議，接收各種信息和要求。但占據(jù)我們最多精力的工作，就是展開對項目設(shè)計的 —— 前期分析，這也是很多同學(xué)在作品集包裝中看到的大段分析文本的來源。
每個項目前期的分析內(nèi)容都有差異，但我們大體可以總結(jié)成以下幾個模塊：
-
-
-
-
-
項目分析就是了解整個項目背景的過程，比如這個企業(yè)的背景、提供的服務(wù)、業(yè)務(wù)的內(nèi)容等等，最重要的目標(biāo)就是 ——
明確項目目標(biāo)
，即項目要實現(xiàn)什么成果的預(yù)期。在這個渡輪項目中，項目的目標(biāo)可以總結(jié)成提高顧客預(yù)定的效率和體驗，同時降低人工審核處理的工作量。
了解這些信息是最起碼的要求，假設(shè)你不了解這些項目的信息，直接開始跟著產(chǎn)品原型畫圖肯定是非常迷茫的。就像一個士兵被分了把槍到前線接收指令，你并不知道自己為何而站，為什么要占領(lǐng)前面那些陌生的高地。
業(yè)務(wù)分析則是了解項目具體面向業(yè)務(wù)的具體流程、規(guī)則、邏輯。渡輪的預(yù)定業(yè)務(wù)邏輯我們上篇已經(jīng)探討過了，很容易理解。但我們的項目是對原先業(yè)務(wù)流程的優(yōu)化，這就意味著業(yè)務(wù)端必然會發(fā)生一定的改變，我們就要清楚這個改變的原因，舊業(yè)務(wù)的模式和缺陷，以及新業(yè)務(wù)的形態(tài)和優(yōu)勢。
這些信息主要從產(chǎn)品經(jīng)理那里了解，或者他在特定的會議中會提供，就看你有沒有認(rèn)真聽了。即使沒說也可以主動提問，這個問題并不復(fù)雜。
再接著就是產(chǎn)品分析，這個分析是理解產(chǎn)品經(jīng)理規(guī)劃的產(chǎn)品是什么樣的，即通過查看原型和文檔來理解他的意圖。雖然只是看，但理解起來并不會太輕松，越復(fù)雜的項目理解起來成本越高，所以我們也稱這個過程是一個分析過程。
如果不能理解這個邏輯，就可以找一本相機說明指南仔細(xì)閱讀，即使這本指南寫的事無巨細(xì)，你要徹底搞懂它有哪些產(chǎn)品功能和對應(yīng)操作邏輯，也要花費大量的精力和時間。
再下一步，就是體驗分析部分，而這里要我們發(fā)揮主觀能動性的部分就多了。通常，體驗分析的目標(biāo)，就是在產(chǎn)品需求確定后去找到有哪些可以提升體驗的地方，確保最終設(shè)計的成果能讓用戶感覺體驗更好。
要實現(xiàn)這個目標(biāo)就要盡可能了解用戶，即 ——
用戶調(diào)研
。因為體驗是基于用戶產(chǎn)生的，只有足夠了解用戶你才知道怎么面向他們做什么。雖然用戶調(diào)研的方式多種多樣，但在B端領(lǐng)域中用研卻很簡單，因為我們更容易直接和系統(tǒng)的操作員（不是用戶端消費者）溝通，了解他們的訴求。
然后根據(jù)他們的訴求，來推導(dǎo)產(chǎn)品應(yīng)該怎么設(shè)計、怎么優(yōu)化更能滿足他們的訴求，技術(shù)處體驗方案。這個過程可以講的內(nèi)容有很多，篇幅關(guān)系不在這里展開，了解體驗分析對B端項目來說是非必須的，大致理解概念即可。
最后就是設(shè)計分析，即根據(jù)前面的獲取的信息，思考接下來的設(shè)計應(yīng)該完成哪些工作，以及交付什么樣的結(jié)果。用更直白的話說，就是足夠了解自己的工作目標(biāo)和任務(wù)。
因為產(chǎn)品需求不會清晰的寫著設(shè)計師要完成多少個頁面，畫多少個圖標(biāo)，制作多少動效，如何和程序員協(xié)作等，所以我們要自己對 “確定要做” 的和 “可能會做” 的事情進(jìn)行分析，才能確定工作量。
以上就是前期準(zhǔn)備中要分析的內(nèi)容，根據(jù)項目的大小會花費不同的精力和時間，但不會太多。它們遠(yuǎn)沒有大家想象中復(fù)雜，準(zhǔn)備做的越多，后續(xù)設(shè)計的效率也就越高，過稿率也會更高。
前面完成分析工作以后，下一步就可以展開設(shè)計相關(guān)的工作了。而正常設(shè)計流程絕不是打開Figma 創(chuàng)建第一個畫布開始一次性畫完所有內(nèi)容就結(jié)束了，而是要分為不同階段，逐步完成不同內(nèi)容的設(shè)計。
首先是交互設(shè)計，交互是B端最重要的設(shè)計對象，決定產(chǎn)品界面的布局和操作方式。很多新人以為交互是產(chǎn)品經(jīng)理完成的，但實際上他們制作的產(chǎn)品原型只包含了少量的交互信息或是完全沒有。
所以設(shè)計師需要去填補交互信息，即產(chǎn)品怎么使用的規(guī)則。如果項目簡單，比如我們這次設(shè)計的預(yù)定系統(tǒng)，因為操作和交互很少，是可以先把設(shè)計做完以后再考慮交互的問題。但如果項目很復(fù)雜，就肯定要提前通過原型的方式把交互先確定下來，再完成后續(xù)的界面視覺設(shè)計。
為什么要做交互設(shè)計，我們假設(shè)房間的退款流程非常復(fù)雜，要經(jīng)過人工操作和審批還有檢查等十幾個流程才能完成退款，中間有非常多的操作。如果我們不先做交互直接做頁面，很可能會因為各種錯誤、意見要重做，這會造成巨大的時間浪費。在項目中先完成交互的最大貢獻(xiàn)就在提高效率，而不是增加額外的工作量。
確定了功能、布局、交互以后，完成界面就變得輕松了也容易理解，而主要的難點就是你想做出什么風(fēng)格的界面，就是設(shè)計師自己發(fā)揮和探索的部分了。
對于小型項目來說，完成界面的設(shè)計基本就可以進(jìn)入后續(xù)的交付工作了。但如果是規(guī)模較大的項目，就需要再設(shè)計過程中制定 ——
項目設(shè)計規(guī)范
，來確保多人協(xié)作或未來迭代時設(shè)計的一致性和效率。
而B端項目設(shè)計規(guī)范主要包含三個部分內(nèi)容，即 ——
布局規(guī)范、樣式規(guī)范、組件庫
。
布局規(guī)范是B端界面框架、全局組件、響應(yīng)式規(guī)則、柵格參數(shù)的標(biāo)準(zhǔn)，這些內(nèi)容決定了項目的整體布局和框架的一致性。
樣式規(guī)范則是UI元素上使用的樣式參數(shù)標(biāo)準(zhǔn)，比如色彩、字體、字號、圓角、投影等。在Figma中提供的Style樣式功能，就是解決樣式規(guī)范應(yīng)用的重要工具之一。
組件庫是將設(shè)計好的UI元素進(jìn)行統(tǒng)一整理的地方，因為B端不同B端界面中有大量重復(fù)應(yīng)用的設(shè)計元素，所以我們會這些元素進(jìn)行匯總，存放到固定的位置方便后面復(fù)用，而不用每次都重新設(shè)計一遍。
Figma提供的Component，就是幫助我們將組件進(jìn)行存儲并復(fù)用的功能，通過它可以很快的完成對同一個組件的匯總、編輯、復(fù)用。
設(shè)計的最后一個部分，就是動效設(shè)計了。但在B端中，這部分的設(shè)計需求其實非常少，比如我們本次項目的界面就很簡單，完全不需要畫蛇添足去添加動效。只有在完成界面設(shè)計后確實需要制作動效演示的地方，設(shè)計師才會去制作相關(guān)的動效演示。
所有設(shè)計完成且通過團隊的評審以后，那最后的工作，就是協(xié)助程序員交付你的設(shè)計了。而交付部分包含 ——
標(biāo)注切圖和設(shè)計走查
兩個步驟。
標(biāo)注切圖就是提供項目的標(biāo)注文件，讓程序員可以看到設(shè)計的具體參數(shù)和說明，比如字號大小、間距、色號等等，他們需要根據(jù)這些信息完成對頁面開發(fā)的參數(shù)設(shè)置。切圖則是提供圖標(biāo)、圖片、LOGO等無法用代碼實現(xiàn)出來的視覺元素，它們需要將這些圖形置入到前端項目文件內(nèi)，才能在頁面中正常顯示。
標(biāo)注和切圖的實現(xiàn)方式有很多種，今天最主流的方法有兩種，一種是直接使用 Figma的團隊協(xié)作完成，另一種是上傳藍(lán)湖這類專屬的標(biāo)注、切圖工具。
最后的設(shè)計走查，是前端工程師在完成前端頁面開發(fā)以后，設(shè)計師去檢查軟件界面的 “還原度”。前端界面開發(fā)類似室內(nèi)裝修的施工，即使有詳細(xì)的圖紙最后的施工結(jié)果也可能想去甚遠(yuǎn)。
所以作為最熟悉設(shè)計稿的角色，設(shè)計師就需要去檢查開發(fā)出來的結(jié)果存在哪些問題，并通過特定工具來提交這些錯誤并監(jiān)督程序員完成對它們的修復(fù)，讓前端實現(xiàn)的界面和設(shè)計稿盡可能一致。
在B端項目中，往往留給設(shè)計走查的時間很少，所以最終上線效果大多和設(shè)計稿的差距極大。而專業(yè)B端設(shè)計師就要依靠自己的經(jīng)驗，盡可能在整個項目的開展過程中避免兩者的差距過大，這就是另一個話題了。
完成以上這些步驟以后，我們在本次項目的設(shè)計工作就基本結(jié)束，最終就是等待項目被開發(fā)完成并最終上線了。
作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTY4MDUwMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.tuquanmo.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
