實戰案例！如何運用設計思維提升話語權？

一、導讀

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

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

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

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

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

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

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

二、結合業務場景解讀原型

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

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

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

業務目標：建立一份可以從業績范圍出發，去分析對比各片區經銷商團隊整體運營趨勢的數據報表

使用角色：集團 CEO、經銷商團隊老板等高層

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

帶著這些內容，我們再來拆解一下產品原型

①產品原型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、明確交互規則

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

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

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

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

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

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

第一種：N~M

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

第二種：M~無窮

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

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

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

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

思維擴展

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

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

總結

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

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

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