一、導(dǎo)讀

很久之前看到過京東設(shè)計(jì)師寫的一篇文章：

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

我認(rèn)為一個設(shè)計(jì)師從入門到“上道”，可以分為三個階段。

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

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

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

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

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

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

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

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

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

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

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

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

①產(chǎn)品原型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

經(jīng)過和產(chǎn)品同學(xué)的溝通，最終確定了使用第二個方案（因?yàn)槭褂迷摴δ艿挠脩魯?shù)量較少，所以在功能發(fā)布時，對用戶進(jìn)行簡單的講解培訓(xùn)，即可解決方案二存在的問題）

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

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

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

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

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

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

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

第一種：N~M

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

第二種：M~無窮

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

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

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

用戶可以使用分組的實(shí)際目標(biāo)場景去定義分組名稱，這樣保證了用戶二次進(jìn)入時可以準(zhǔn)確快速的找到目標(biāo)。

思維擴(kuò)展

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

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

總結(jié)

最后，小編總結(jié)了帶著全局思維去做設(shè)計(jì)在各個層面的意義

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

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