一、導讀

很久之前看到過京東設計師寫的一篇文章：

里面詳細講訴了不同級別設計師的工作狀態(tài)是怎樣的 ，讀完以后頗為受益。

我認為一個設計師從入門到“上道”，可以分為三個階段。

第一階段：只在視覺執(zhí)行層的設計師：工作中只會照搬產(chǎn)品的原型，對原型圖進行 UI 填充，不考慮業(yè)務與交互上的問題；

第二階段：開始在交互層進行思考的設計師：會對產(chǎn)品經(jīng)理的需求以及原型進行查缺補漏， 根據(jù)自己對交互的理解認知去補全完善邏輯。

第三階段：有全局思維的設計師：會在業(yè)務背景、產(chǎn)品目標、使用角色上綜合考慮，挖掘產(chǎn)品原始需求，尋求最優(yōu)解決方案。

隨著階段的提升，設計師在團隊的話語權變得越來越重要。接下來，我以一個小組件為例，深度分析一下 B 端設計師拿到需求原型后，如何結合自己思考和業(yè)務背景去做設計。

二、結合業(yè)務場景解讀原型

當我們拿到原型以后，不要著急的直接對原型去做調整和高保真輸出。首先我們先去了解下項目的業(yè)務背景是什么；使用角色有哪些；使用場景和業(yè)務目標又是什么。

下面呢，小編和大家一起帶著這些問題往下看

業(yè)務背景：該組件應用于一款營銷數(shù)據(jù)管理系統(tǒng)，該系統(tǒng)主要為化妝品電商企業(yè) CEO、代理區(qū)域經(jīng)銷商老板提供營銷數(shù)據(jù)管理、客戶數(shù)據(jù)管理、團隊業(yè)績預測等服務。此次需求主要是為了觀測及對比各團隊的業(yè)績數(shù)據(jù)；對不同業(yè)績區(qū)間進行分組，從團隊、業(yè)績、客戶、客單價、客戶消費等級等多個角度分析對比各團隊的運營情況（上圖為原型的一部分，可做簡單了解）。

業(yè)務目標：建立一份可以從業(yè)績范圍出發(fā)，去分析對比各片區(qū)經(jīng)銷商團隊整體運營趨勢的數(shù)據(jù)報表

使用角色：集團 CEO、經(jīng)銷商團隊老板等高層

使用場景：從季度、月份等時間維度，根據(jù)各團隊、下屬單位的總體業(yè)績趨勢，用來制定季度、月度銷售目標及經(jīng)營戰(zhàn)略方向等。

帶著這些內容，我們再來拆解一下產(chǎn)品原型

①產(chǎn)品原型

原型如圖，基本邏輯描述大致如下：

1. 分組支持自定義，分組名取用戶設置的區(qū)間值（上圖中 1 的位置）
2. 每個區(qū)間包含兩個區(qū)間值；設置最后一個區(qū)間值時，點擊數(shù)值框會下拉展示“全部”；
3. 選擇設置“全部”后將無法再添加新的區(qū)間；最多可添加 10 個區(qū)間（每一行是一個區(qū)間）

根據(jù)已知信息，我們先對原型進行簡單的分析，可以得到以下幾點：

1. 該組件的功能是設置某一業(yè)績區(qū)間的取值范圍，從而供高層領導進行查看；其取值范圍是由多個區(qū)間聚合而來（可以參考中學數(shù)學中并集的概念）
2. 每個區(qū)間都可刪除，且均可在下一行添加新的區(qū)間，但總數(shù)不能超過 10 個
3. 每個區(qū)間值后面都跟隨著單位（注：原型前半部分的的區(qū)間值單位應該是被產(chǎn)品遺忘了），單位包含千、萬、億三個值
4. 點擊最后一個區(qū)間數(shù)值輸入框， 出現(xiàn)下拉菜單展示"全部"（這里可以做一個簡單的思考：“全部”的含義是什么？）；點擊“全部”后不能再添加下一行區(qū)間，即最后一行添加按鈕需要置灰
5. 分組名取區(qū)間值（思考：多個區(qū)間值并集時應該如何取名呢？就像 100～1000+10 萬～100 萬）

然后我們帶著思考找到產(chǎn)品同學去了解具體的邏輯規(guī)則，這時我們最好做一些準備:先把問題用紙或者文檔的形式記錄下來

準備一個錄音筆，把交流過程進行錄音，記錄碰撞過程中閃光的思考點和有建設性的提議也可以準備一些小零食，用來增進同事之間的關系，保證溝通過程中的愉悅。

經(jīng)過和產(chǎn)品同學的討論、講解，我們可以對原型圖的邏輯進行補全，大致如下：

1. “全部”是最大數(shù)值的意思，可以理解為無窮大，或大于某一個值（這里引用了數(shù)學概念）
2. 自定義分組名取區(qū)間值的并集（這里可以參考高中數(shù)學中集合的概念）

思考亮點：集團每季度營業(yè)額為 9-10 位數(shù)左右，最小銷售團隊單月銷售業(yè)績?yōu)?5 位數(shù)；從最大值和最小值兩端考慮，千、億兩個單位在實際業(yè)務場景中使用頻率偏低；故和產(chǎn)品同學同步后確定去掉千、億兩個單位，默認單位取萬，考慮到數(shù)據(jù)的精確度，做保留小數(shù)點后兩位，盡可能使數(shù)據(jù)展示的清晰易懂，也可從一定程度上幫助開發(fā)同事減少數(shù)據(jù)單位換算的工作。

三、提出思路方案，多角度思考

思路一（結合復雜篩選操作，突出數(shù)值的大小關系）

以組件所含元素“全部”為例，意思是大于前一個數(shù)值，所以小編的第一反應：

是否可以在填寫區(qū)間數(shù)值時，先選擇大于、等于、小于的關系類型，然后再填寫數(shù)值內容。聯(lián)想到之前做過的復雜篩選業(yè)務組件，里面似乎有類似之處（如圖）

將大小關系類型前置，通過選擇區(qū)間值的大小關系類型，去控制區(qū)間組件樣式的變化，即不同的大小關系對應不同的區(qū)間樣式（如圖）

思路二（用數(shù)值范圍替換大小關系）

忽略掉大于、小于、等于的關系， 使用數(shù)值范圍替換大小關系，然后將數(shù)值范圍分為 3 類：0-N，N-M，M-無窮（這里引用了數(shù)學有理數(shù)概念，用 N 和 M 指代某一數(shù)值），分別對應大小關系中的小于、等于、大于。

點擊添加按鈕，在彈出的下拉菜單選擇對應的數(shù)值范圍類型；默認狀態(tài)下只顯示添加按鈕，不顯示區(qū)間內容。

思考點：0 也屬于有理數(shù)，可以用 N 取代，即 N=0 時，N～M 數(shù)值范圍同樣適用，0～N 可以被 N～M 代替，展示如圖

通過上面的思考，小編對兩個方案的優(yōu)缺點進行了總結：

方案一 將所有內容平鋪展示，大小關系類型屬于低頻信息，低頻信息的展示會增加用戶的理解成本；

方案二 信息展示更加簡潔直觀，但 N 和 M 的概念會對某些用戶造成一定的困惑；

經(jīng)過和產(chǎn)品同學的溝通，最終確定了使用第二個方案（因為使用該功能的用戶數(shù)量較少，所以在功能發(fā)布時，對用戶進行簡單的講解培訓，即可解決方案二存在的問題）

四、明確交互規(guī)則

到這里我們雖然選擇了最終方案，但是我們還要把組件的交互邏輯以文檔或者設計補充的方式交付開發(fā)。

那么，我們又應該如何去撰寫這個交互文檔呢？

首先，我們可以從用戶的操作流程出發(fā)

搞清楚有哪些節(jié)點會影響組件的展示狀態(tài)，然后分別對組件的不同狀態(tài)進行描述。在這里，選擇數(shù)值范圍類型是影響組件狀態(tài)的節(jié)點，根據(jù)選擇不同類型會得到不同的組件狀態(tài)。

首先小編先帶大家來分析下組件的默認狀態(tài)，這里恪守一個原則:不要替用戶做選擇。由于不了解用戶初次添加時，會使用哪種數(shù)值范圍類型，所以在默認狀態(tài)下小編給了一個添加按鈕，讓用戶自行操作，并通過使用文字主按鈕進行引導，聚焦用戶的關注點。

然后，小編再對不同的數(shù)值范圍類型進行拆分，并對其交互規(guī)則進行總結。

第一種：N~M

思維延展：可能有同學會說，B 大于 A，直接取兩者的并集不是也沒有影響嗎，舉個例子，區(qū)間 1 取值是“10~36”，區(qū)間 2 取值是“26～48”，那他們的并集就是“10～48”。但這里我們要回歸業(yè)務本身，如果用戶需要“10～48”的數(shù)值范圍，是不會去填寫兩次的。

第二種：M~無窮

接下來呢，我們再來講講分組名稱，按照原型中的邏輯，我做了如下方案：

這里小編穿插到業(yè)務場景中進行了思考：首先該組件屬于低頻操作，用戶大概一個月也就用個幾次，那么當用戶建立了多個自定義分組后，是否會出現(xiàn)再次進入找不到目標分組的情況。

小編提出該想法，并做了對應的解決方案：自定義名稱。

用戶可以使用分組的實際目標場景去定義分組名稱，這樣保證了用戶二次進入時可以準確快速的找到目標。

思維擴展

根據(jù)以上思路，小編認為有些想法也可以作用到方案一中，所以對方案一進行了以下優(yōu)化：

當信息過多容易增加理解成本，我們可以通過增加預覽數(shù)值的功能實時查看我們的操作結果。

總結

最后，小編總結了帶著全局思維去做設計在各個層面的意義

1. 體驗層面：優(yōu)化后的組件更加直觀，清晰易懂 符合簡潔高效的產(chǎn)品定位
2. 開發(fā)層面：默認取萬為單位，減少了開發(fā)同事數(shù)據(jù)單位換算的工作（原定單位為“千、萬、億”）
3. 業(yè)務層面：組件通過業(yè)務背景等分析得出，更加符合實際業(yè)務使用場景當你的方案為用戶提高了效率，為同事減少了工作量，為產(chǎn)品增加了體驗，那么還用擔心沒有設計話語權嗎。

隨著 B 端商業(yè)化如今洪水猛獸般的發(fā)展，越來越多的設計師也都走上了 B 端這條路。要想在這內卷的江湖中嶄露頭腳，唯有不斷思考學習，才能擁有自己的兩寸工位啊，期待與大家一起努力，共同進步～