那么之前的文章都是對于B端這樣一個系統，進行概括性地講解，系統的講解。那么從今天開始，我將對B端系統對大家進行一個詳細的講解，包括每個控件的具體使用。這就是我們從大到小，再由小到大的這樣一個學習過程，那么目前我們要進行收縮范圍，要精確的明白某個控件應該如何使用。今天我所講解的是表格頁的具體使用方法，以及如何分析現有表格頁的問題。

       文章句句將會直擊重點，拒絕長篇大論。

       那么為了方便大家的理解和查看，我這里去列舉一張表格頁的圖片。以下的講解都會圍繞這個表格頁的圖片，進行詳細的剖析講解。那么，在看的過程中，我們要時刻的翻到上面這張圖片，對照著這張圖片來吸收消化今天的知識。

       大家可以看到這是一個關于資產清單的表格頁，那么它的構造也符合我們常規的表格頁。首先我們對這個表格也進行分析，我們可以看出表格頁是由這幾部分組成的，它們分別是數據過濾，數據操作和數據查看。

數據過濾部分指的就是我們頁面上方的這樣一個搜索框，包括。我們表格頁內容頂部的資產編碼，資產名稱，它們后邊都有這樣一個篩選器，我們可以按照順序或者是倒序進行篩選。這里我把數據過濾的部分用紅色框標注一下。

       那么這個表格頁我們可以看出，它的數據過濾其實是非常少的。更多的數據過濾有什么呢？按照資產的新舊程度，我們可以將它分為新的、舊的、淘汰的。那么這三個按鈕也可以作為數據過濾放在我們表格內容頁的頂端。

       當然，維度有很多個維度，我們不僅可以對資產的新舊程度進行分類，我們也可以對資產的購買時間進行分類，比如2018年、2019年、2020年至今，我們可以對這樣一個時間維度進行分類。同樣，操作按鈕也是放在表格也的頂部，也就是我們搜索框的后邊。這樣用戶在篩選起來會比較的方便，具體需要按照什么維度進行劃分，需要我們找到，我們的業務目標是什么？我們要找到我們的這個表格頁希望給用戶傳達出怎樣的信息？那么用戶最關心的點是什么？找到這些之后我們就可以對用戶最關心的點以維度進行劃分更多的篩選器，有助于用戶更好的去瀏覽內容。

       此頁面我們可以看出他的篩選器過于少。在這里我們并不評價，數據過濾少是好事還是壞事？但是我們要記著，我們時刻要具備分析某個功能模塊。究竟應該放在哪里？它應該怎樣去劃分？這是我們要牢記的點。

       那么剛才也說過，一個表格頁分為三部分，分別是數據過濾，數據操作和數據查看。現在我們來講第二部分，也就是數據操作。那么什么是數據操作？數據操作，顧名思義就是對頁面中的某些數據進行操作功能，可以是增，刪，改，查等等，它都是屬于數據操作。那么數據操作，它一定是一個可點擊的一個功能按鈕，在頁面中，我們如果仔細找一找很容易就會發現數據操作的模塊。在這里呢，我同樣用藍顏色的框給大家框起來。

       在這里，藍色框框起來的部分，就是我們這個表格頁中的數據操作部分，也就是第二個部分。

那么很多人可能會有疑問了，說為什么同樣都是數據操作，有的數據操作在上面是純色的一個按鈕顯示，那么有的數據操作又在表格內容頁里，這些究竟有什么區別？

       沒錯，數據操作。它擺放的位置是多種多樣的，但它遵循一個規律，什么規律呢？也就是說在我們執行數據操作的設計這樣一個功能模塊的時候，我們需要對其進行第1次的劃分。數據操作部分我們可以分為單行操作，批量操作和全局操作三個操作點，也就是說所有的操作功能無非就是在這三個類別中的某一個類別。好，下面我來給大家詳細講一下什么是單行操作，什么是批量操作和全局操作。

       我相信大家通過字面意思也能對這三種操作方式有一定的了解，單行操作指的是針對表格內容頁的一行數據進行操作，一般就是放在表格頁的這一行的尾部。那么批量操作針對的是對多個數據進行操作，他一般放在表格內容的頂部，那么什么是全局操作？全局操作是對整個表格頁的頁面進行操作，比如說我要導入新的表格，或者說我要替換這個表格，那么根據優先級順序來說，全局操作大于批量操作，又大于單行操作。這就是數據操作的三個不同點，那么很顯然在我們上張圖片中。只存在單行操作和批量操作，并沒有全局操作。

       接下來我對最后一個部分，也就是數據查看這個部分進行一個講解。數據查看也就是我們系統所反饋給用戶的一些數據，它包括具體的數字，也包括一些漢字，所有的信息都可以被列為數據查看。那么由于這個表格頁上的數據查看部分沒有去寫一些信息，將這些信息打碼隱藏了，但是我們不難想象它填入信息后的樣子，也就是整個表格的內容頁的核心部分就是我們的數據查看，無論是數據操作還是數據過濾，只是進行一些功能上的操作，那么用戶最終的視線還是要落在數據查看這個部分，同樣我用橙色的框給大家標注出來。

       如果說我們的數據查看部分，其中的數據是混亂不堪的，或者說它的列數是非常的繁瑣的，那么對用戶的體驗非常不好，也不能在第一時間抓住有效信息，所以我們在設計的過程中一定牢記7±2法則進行設計。

       那么有的人有疑問了，說如果我的列數非常多怎么辦？如果你的列數非常多，那么你只顯示其中的重要信息在表格頁這一塊，其他信息應該歸納到查看詳情，或者是二級頁面內，不能在一屏中展示過多的信息，即使你放了這么多信息，你要記著那也是無效的擺放，用戶在進來之后根本就不想看一眼，所以在這里我們要一定要記著7±2法則，或者說我們給自己定一個列數的系統規范也是可以的。

       以上，就是今天對表格頁的詳細講解，那么要學習更多知識也可以進我的公眾號學習。我們要知道再簡單、再復雜的表格頁也無非就是三塊，數據過濾、數據操作和數據查看，當然在頁面中也存在我們的導航系統，它們共同組成了一個完整的表格頁，表格頁所遵循的宗旨是簡單高效，信息直觀，操作方便快捷。

文章來源：站酷  作者：弧形線


分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

尤其是一些體驗細節，比我平時用的騰訊收集表做得更到位些。感覺 Google 的設計師，確實是沒少下功夫的。

什么是 Google Form

國內通常網盤和在線文檔是分開的兩款產品，例如騰訊的微云和騰訊文檔，就是不同的兩個產品。

Google Drive 這個東西，相當于把在線文檔和網盤整合到一起了，這就和國內的產品很不一樣了。

而 Google Form 就是 Google Drive 里面的問卷功能。

這次我拿騰訊收集表和 Google Form 這兩款產品對比，就是因為它們定位比較相似：

都不是專業的問卷工具，而是在線文檔工具中的問卷功能

相比之下，我覺得 Google Form 的體驗細節做得更加到位，很多地方值得學習，尤其是這五點：

選項粘貼

一般做問卷，我們都會先弄一個文檔，把內容確定了再往問卷工具里填。所以填寫問卷內容時，通常不是通過輸入，而是通過粘貼。往騰訊收集表里粘貼選擇題內容，必須一條一條來，有多少個選項就貼多少次，選項多了會感覺自己在工廠做流水線工作。

而 Google Form 可以把所有選項都一起粘貼，識別到換行就會自動貼到下一個選項中，方便多了。

我覺得還可以優化一下的點是，希望能夠讓我把問題和選項都一起貼，這個目前 Google Form 還做不到。

切換問題類型

Google Form 創建一個問題之后，可以很方便地切換問題類型。

這樣樣式挺好的，有時可以減少一些操作步驟。

快速創建問題

就是因為 Google Form 的問題類型可以快速切換，所以創建問題就很快速了。只有一個插入按鈕，點擊后立即插入一個跟上次所選類型相同的問題。如果想要換個問題類型，再點下拉框切換就行，交互很流暢。

一般創建問卷就是要盡量使用連續的同類問題，所以這種方式挺好的。

而騰訊收集表因為不能切換問題類型，所以創建起來就比較麻煩了，還分了兩個入口。

第一個是左側的工具欄，剛開始用還真不知道是用來創建問題的，可能因為標題上的「添加問題」太不起眼了吧。第二個入口是，當前編輯的問題下，會出現一個「插入問題」的按鈕。但是點擊之后需要在菜單選擇一下，這就沒那么方便了誒。

問題順序拖動

Google Form 和騰訊收集表在創建了問題之后，都能拖動順序，但是可拖區域不同。Google Form 的可拖區域在頂部一條，而騰訊收集表的可拖區域在側邊一條。

按下拖動時，為了避免太長不方便，都會收縮變短，于是問題就來了！

騰訊收集表因為可拖區域在左側，所以我點擊左側偏下的位置也能拖，但這次問題收縮，我點的地方就跑出問題區域了，于是拖動就出問題了。

Google Form 因為可拖區域在頂部，所以不會出現這個 bug。

但是，Google Form 往問題里插入圖片后，問題長度就收縮不起來了，上下拖動可不就不方便了？

好在，這個問題并沒有影響拖動。

Tab 鍵

對于很多 PC 老手來說，Tab 鍵是個很方便的工具。

有了它，填寫再多表單都不需要拿鼠標了，點一下就能自動把焦點從一個輸入框移動到下一個。

而 Google Form 把 Tab 鍵運用到位，基本上界面上的交互功能都能切換到。

騰訊收集表里也能用 Tab 鍵，不過覆蓋范圍就少了一些，不能刪除、添加選項或者添加“其它”。

總結

其實要比視覺風格，騰訊文檔可能更加符合國內審美。如果要比功能，Google Form……也還是比騰訊收集表強大，可以：生成圖表、給問題和選項插入配圖、插入視頻、區分問題模塊……

文章來源：優設   作者：ZoeYZ


分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

今天我們來聊聊，交互設計師在做這種轉化頁面出發點是什么？可以采取什么手段去承載流量，提高轉化。

從上圖可以看出在未增加新功能、新頁面的情況下，設計師對頁面信息、結構進行了重整，你會發現更注重用戶價值的傳遞，整個頁面更加高效，用戶關注的信息點都很突出，并且有這么多優惠，讓用戶心理感覺更省錢了。以上這些都是為了去傳遞用戶價值，不斷的刺撓用戶心防，讓用戶破防！今天從交互設計師的角度闡述下如何去做轉化頁。

凸顯價值

在這個信息爆炸的時代，人都不愿意在無意義的事情上浪費一秒鐘，而面對產品界面也是一樣，看一眼沒有看到自己從中能得到什么可能就劃走了。所以在轉化頁這種承流量的頁面，凸顯用戶價值非常重要。

我們首先應該明確你目標用戶想要的到底是什么？是優惠？是承諾？還是被認可？如：購物類產品，用戶在平臺上可以獲得什么價值？除了可以不用去實體店在家就可以下單（滿足惰性）外，在使用 APP 過程中還能獲得什么價值？購物的爽感、有優惠便宜感覺自己賺到了？所以具體設計轉化頁的時候就是要抓住這些最關鍵點，然后進行放大，不斷刺撓用戶心防。

1. 讓用戶感覺省錢

其實絕大多數用戶都不是理性消費者，因為人性原因，我們的思考方式大多都是被系統 （無意識且快速，不費腦力）占據的，讓消費者失去了理性的誘因有很多，比如：占便宜、錯過、恐懼、好奇、虧欠、虛榮、逆反等等。其中便宜和錯過是最常用于設計中的。

直接 | 通過優惠標簽、對比、簡單粗暴告知省了多少錢

便宜并不是真的便宜，而是讓消費者感覺到占了小便宜。相比較拼團特惠標簽，直接將用戶可以省多少錢展示出來，對用戶的沖擊會更強。

間接 | 營造一種錯過就虧了、就沒有了的感覺

這在心理學叫：損失厭惡，它指的是人們對已經擁有的事物會習慣性地視若無睹，只有在失去或即將失去的時候才會產生加倍的珍惜感。對應到收益與損失上在人們心理敏感程度上來看，比起收益，人們對于損失更加敏感，這就是為什么在雙十一期間，各大商家都打著：“全年最低價，再不買就漲價、不買你就虧了、搶光了…”的標語，但是這種只是感覺上給人們造成好像真的“虧大了”，但是就算買到其實也未必賺到。所以，我們在具體界面上也可以適當采用這個原理技巧，增加緊迫感和稀缺性元素，營造一種錯過就虧了的感覺，讓用戶在猶豫時，能夠斬釘截鐵的按下 “轉化按鈕”！

上圖 VUE、脈脈都是采用“限時”的這個手法來因遭稀缺性與緊迫感，從而增加用戶購買欲望，而京東則采用“僅剩 1 件”“一年歷史最低價”的方式來營造緊迫感。

2. 強化產品賣點打消用戶疑慮

你可以看到現在各大電商上的物品的展示圖都從原來的靜態圖向動態圖及視頻化方向演變，這這種手段就是為了更加高效，直觀的展示產品本身的特質，讓用戶看了一目了然。在通過分析得出產品最終賣點后，在呈現形式上交互設計師也需要多多考慮。以下重點在展示產品賣點方式上進行闡述。

動態化展示

淘寶上的商品動圖，非常直觀的展示產品核心特性，幫助消除用戶疑慮。

對比型展示

通過列表直接展示普通用戶和會員用戶間的差異，這樣的方式直觀，代入感強，能夠很好體現產品本身的服務價值，更容易打消用戶購買疑慮。

平鋪直述

直接將用戶可以獲得特權展示，告知用戶可獲得哪些權益與服務，一般通過 icon+文案的方式直接呈現給用戶。

這樣的方式雖然沒什么大問題，但是在權限比較多的時候，細看其實會不知所云，不知道具體是干嘛用的，所以如果要采用這樣的方式建議搭配輔助說明。

亮數據（權威性）

將產品的數據直接展示出來，通過多維度數據權威展示產品亮點。

所以在凸顯價值感知上我們可以怎么做：

• 建立標簽體系，通過標簽優惠讓用戶感覺省錢
• 營造稀缺與緊迫感，讓用戶感覺再不行動就虧了
• 強調產品核心賣點且直觀展示
• 數據化闡述可信度更高，更有權威性

提供清晰交互動線

交互本身是一個動態的過程，轉化頁有時需要承載比較多的關鍵信息，而如何讓這些信息清晰，有序的展示在用戶面前并引發用戶互動是交互設計師需要思考的?？梢詮捻撁婵蚣?、操作引導上去思考與用戶的關系。

1. 頁面框架

轉化頁面上的信息需要非常高效的傳達給用戶，應采用最高效的方式展示給用戶。因為不同于購物類、視頻類 APP 用戶以“逛一逛、刷一刷”看看有啥好看的心態，漫無目的的瀏覽，而是會集中精力尋找價值從而說服自己去買，所以我們框架盡量線性，符合自上而下，自左往右的閱讀習慣，所以放到頁面上建議直接大模塊化從上至下排布，這樣能讓頁面更加規整，也符合與用戶的視線。

以上是我在各大應用會員轉化頁的框架，可以發現，拋開內容信息，整體框架前兩個會讓人感覺更舒服，這樣的搭配更加流暢性，比例更好，不會太分割，其實在設計模塊化卡片大小時也可以考慮下黃金比例。

2. 操作引導

說到引導我們可以來看一看下方案例，僅僅增加了很小的一個細節就達到質的效果。

所以在做轉化頁面時，對關鍵按鈕我們也需要采取一些方式讓用戶注意到，并吸引用戶點擊。主要可以從按鈕的位置、大小顏色，動效、文案 4 個方面來思考。

位置

由于轉化頁需要展示較多信息給到用戶充分思考，所以一般根據用戶的瀏覽習慣，按鈕一般放下右下角視覺落點處，這樣能比較好的組織頁面內容，突出又不搶頁面主要視線。

大小和顏色

重要的轉化按鈕大小絕對不能太小，但也不宜過大。記得 UI 中有關于按鈕大小的計算公式，可以在這個公式基礎上進行靈活調整。有些寬度很寬是為了加大用戶點擊熱區，讓用戶更容易點到。

顏色一般使用應用主題色，如果有多個按鈕，主按鈕顏色盡量有一定對比，這樣才能將我們想要讓用戶點擊的那個跳出來。

動效

動效一般在按鈕上增加一些掃光、光效、按鈕本身輕微動效即可，只要很微小的效果就可以，因為人眼在一堆靜態內容中很容易注意到動的東西，如果做的很強烈就本末倒置了。

文案

按鈕上的文案一定程度上也能夠促進轉化，所以在文案上表意的基礎上可結合我上面講述的第一部分進行文案的設定，加強用戶感知！

寫在最后

以上講述了交互設計師在面對重要的轉化頁時應該要著重將價值簡單高效的傳達給用戶，加強用戶的感知，可以通過貼標簽、緊迫感文案、動態化、對比化、平鋪直述、亮數據內容展示，更好的將產品價值傳達給到用戶，在具體內容布局上建議準尋線性的框架搭配顏色、動效、引導性文案的方式引導用戶操作。以上是我個人的思考與總結，有問題可以共同探討~ 感恩

文章來源：優設   作者：小發的設計筆記


分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

高情商溝通的重要性想必大家都清楚，而高情商溝通離不開重要的一點——說服。在職場中，有理有據地說服，能讓對方明白你的想法，達到你想要的目的。那么我們如何才能說服對方，最大程度減少溝通成本呢？作者從運營的角度分享了10個小技巧，感興趣的小伙伴們不妨來看看，說不定有幫助哦。

在這個消費主義的時代里，無論是工作中還是生活中，處處都存在著說服。

走在地鐵里，看到大片的廣告區印刷著“找工作，上boss直聘”。開車在高速，抬頭是一個大標語“司機一滴酒，親人兩行淚”。公司的文化墻永遠都不會空著，高懸flag“今天的最高標準就是明天的最低要求”。

發現沒？全世界都在通過說服拿到自己想要的結果。商家通過說服拿到訂單，高管通過說服拿到項目主導權，運營通過說服獲得用戶量等等。究竟什么是說服？說服又有哪些可以落地的技巧？

今天這篇就是以運營的角度來詳談說服用戶的10個技巧。

一、說服的本質

談技巧之前，我們要先來聊聊“說服”本身這件事。否則只盯著一些技巧就變得沒有意義，我有點貪心，形而上和形而下的東西，都想交付給你。

說服，通俗一點說，就是通過充分的理由，讓對方“聽我的”。這跟溝通就有了本質區別。溝通是一種信息互通，雙方是平等交流。而說服則更強調目的性，且往往是低區位的人來說服高區位的人。

如何辨別我們是處在哪個區位？關鍵要看決策權的歸屬在哪一方。誰具有最終決策權，誰就站在了高區位。

高區位向低區位做出影響，往往不需要說服，除特殊情況外，大多數會選擇使用權力進行直接要求，比如領導對你布置任務，或者父母限制孩子的游戲時間。

相反，如果低區位要對高區位做出影響，說服就是最重要的工具。因為低區位無法直接做出命令或要求，就需要準備充足的理由和事實，讓高區位的人做出有利于己方的決策。

這里要強調一點，無論我們通過什么手段說服，決策的最終執行者都是高區位者。這就意味著：無論你的理由多充足，都只是給高區位者提供更多參考而已。

想透了這一點就明白了說服的本質?！?span style="font-weight:700;">本質上，我們無法說服一個人，我們所謂的說服，其實就是通過有選擇的信息來讓高區位者重新完成一次邏輯自洽，從而做出更有利于高區位者的決策，而這個決策的附帶影響才是利于低區位者的。

所以我說，說服的前提一定是雙贏，否則就是欺騙。

二、說服的50%

聊完說服的本質，我們落到具體的說服流程上來。說服一個人，第一步應該從何開始？

• 準備自己的觀點和素材
• 挖掘對方的態度和邏輯

如此簡單的選擇題，我想大家應該都會選第二點，但是事實中，我們的選擇可能恰恰相反。

當我們說服老板給自己加薪時，大多數的時間都在陳述自己的不容易，自己的業績如何如何，自己覺得應該獲得更多的激勵等等。

當我們說服自己的用戶選擇某個產品或方案時，一開口就是我們的產品用了什么新技術，我們的方案做了幾天幾夜blabla一大堆。

大家發現沒有，我們總是習慣性地從自己角度來說服對方，甚至都聽不進對方的潛臺詞。

所以，真正的說服應該從用戶分層開始。這個跟運營本身是一樣的邏輯。

我們說服的對象從大的維度可以分為3類：抗拒用戶、無感用戶和支持用戶。根據用戶反饋的程度不同，還可以細拆一下：

1. 反對用戶
2. 懷疑用戶
3. 中立用戶
4. 好感用戶
5. 支持用戶

這5類用戶分別表現出不同的特征，有不同的潛臺詞，識別潛臺詞是分類準確的重要保障。我總結了一套順口溜，大家可以參考：

反對用戶情緒大，稍不留意就爆炸。疏導情緒最優先，態度緩和再深談。懷疑用戶愛皺眉，說得太多成炮灰。換位思考忙站隊，現場驗證是與非。

中立用戶想法少，稍不留神自己跑。堅決不能臉皮薄，半推半就可勁兒搞。

好感用戶問題多，東拉西扯聽你說。連捧帶夸不要停，當下決策不能拖。

支持用戶自來水，最恨殺熟大頭鬼。真誠服務期待高，千萬別被套路毀。

這套順口溜使用的都是通俗易懂的話，非常落地，也不會產生歧義，因此建議可以抄寫在便簽紙上，或打印下來貼在辦公桌上。不用刻意背，娛樂一樣多念幾遍就可以。

老話說得好，好的開始就是成功的一半。開始姿勢如果都不對了，后邊再多的技巧都是白費的。call back一下，識別用戶態度才是“說服”真正意義上的開始。

三、說服的10個技巧

大家期待的正戲開場了，前兩 part可以算是“道”和“法”兩個層面，那么這第三part就是最最受歡迎的“術”。10個說服術送給大家，但我還是要啰嗦一句“多看前兩part，最重要的真的不是技巧”。

1. 權威效應

如果說世界上最牛叉的說服術是什么，我一定會說“權威效應”?！叭宋⒀暂p，人貴言重”不是一句玩笑話，同樣一句話，馬云馬化騰等大佬說出來就會很快變成“至理名言”。所以，提升說服力最有效的方法是提升自己的權威。

當然權威會包含很多，比如專業權威、地位權威、財富權威、名人權威等等。這個技巧有一個變形叫做“轉嫁權威”。比如很多公司請代言人，再比如請第三方權威機構測評等等。

2. 事實證明

還記得羅永浩怒砸西門子事件么？老羅帶領一幫志愿者在西門子總部維權，投訴冰箱門關不嚴。鐵錘一響，黃金萬兩。只不過這一次的黃金萬兩是西門子喪失的品牌價值。

這是一次多么生動的說服課呀！讓我們真真切切地感受到了“事實勝于雄辯”。這哪里需要什么言語來說服，只要不是“裝睡”的人，在事實面前都會“醒”。

舉一反三，就跟我們寫議論文一樣，有事實論證，就有對比論證，就有比喻論證，你看一下子，我們就多了兩個新技巧。

3. 無風險承諾

無風險承諾是針對反對用戶、懷疑用戶和中立用戶的天然法寶。人性就是趨利避害的，尤其是當收益不明顯的時候，避害的心理會更加強烈。這時候我們要做的根本不是說服，而是嘗試讓用戶接觸、嘗試。

無風險試錯是一個很大的誘惑，能夠抵消很多負面的抗拒。退一萬步講，即便對方最后依然沒認可，但他也沒損失，在這個嘗試的過程中，我們又可以設計很多小抓手，建立后續聯系，放長線釣大魚。

4. 認知顛覆

認知顛覆在這些技巧當中效果絕對屬于TOP級，君不見市面上所有公開課的經典套路就是“你以前的學習方法是錯的”。君不見短視頻領域里迅速火爆傳播的多是“反傳統認知，反傳統邏輯”的內容?？梢娖渫Α?

當然，這一招也有變形。有的是真的認知顛覆，但是還有好多是借此創造需求。比如這兩年電動牙刷、空氣炸鍋等網紅產品的興起，都是從顛覆傳統認知中，找到用戶新需求，且不去論新認知的真假。

5. 利用認知

如果說技巧四是利用認知差來形成說服力，那么技巧五就是利用用戶原有認知形成心理暗示。什么意思，舉個例子你就明白了。

幾乎所有人心理上對于購物的認知是“好貨不便宜，便宜沒好貨”，即便現在各大商場打著“多、快、好、省、新”的招牌，用戶心智的調整非一夕之功，學會善用其暗示的力量，也是學問。

所以當你的競品打“又便宜，質量又好”的底牌時，你甚至不需要詆毀對方一句，只需重復問用戶一句話“又便宜又好，您真的信么”，就有可能達到很好的效果。

6. 角色轉換

角色轉換也是說服技巧中使用頻率很高的技巧之一。通過雙方，甚至是第三方的角色轉變，讓用戶看到更多視角的信息（當然，這個前提是轉換后的視角是利于決策的，否則就無意義），從而綜合考量，得到雙贏局面。

常用的招數有三種，我再分別附上3個案例，你一看就明白了：

1. 如果我是你：你去買東西是不是經常聽到售貨員說“我自己家就用的這款”、“我給我侄子就選的這個”，其實就是把自己售貨員的身份轉變為消費者的身份來影響你。
2. 如果你是我：當我們討價還價的時候，商家會說“大姐，別砍了，您也是做買賣的，您覺得這價能行么，換您，您也不干呀”，這一招本身就是喚起同理心。
3. 巧設第三方：你跟領導提辭職，領導好說歹說留不住，最后來了一句“小孫呀，其實咱們都是打工的，我也不是在這個公司干一輩子，這樣，咱們再拼一年，高低弄出個結果來，也不枉同事一場”。一下子你們變成了同一陣營，公司變成了共同的第三方，說服力無形中就增強了。

7. 成本計算

做決策就要考慮成本，成本越低，決策越快，成本越高，決策越慢。利用這個嘗試，我們在說服過程中就可以有兩個操作：

1. 抬高她選擇其他項的成本
2. 降低她選擇我們的成本

比如，家長已經決定給孩子報名競品的正價課了，你要做的不是直接勸他放棄，而是應該告訴他一旦選擇錯誤的成本是什么。不是損失3千塊錢的事情，更重要的是孩子的時間耽誤了。所以不妨多對比，聽一聽我們的公開課，沒有成本，最多占您一個晚上時間，再做決定。

8. 重要性排序

很多伙伴在說服別人的時候，習慣性地否定別人，企圖通過技巧四“認知顛覆”來征服對方。然而一來技巧四掌握起來并不容易，不一定就能形成顛覆，二來老是以“顛覆對方”的心態溝通，容易引起反感。

所以技巧八是另一個方向的技巧，叫做重要性排序。本質上就是讓用戶的注意力轉移到我們想讓他注意的地方上來。而這個地方就是我們的優勢所在。

比如用戶來買冰箱，討論了這家質量好，那家服務棒，另外還有一家空間大等等，最后你說了一句“姐，您剛剛考慮的這些因素都是正常的，但比這些更重要的是：耗電量。其實現在科技進步了，您提到的那些各個廠家大差不差，反而是耗電上相差很多，畢竟您買回去是一直插電使用的，這才是大賬”。

9. 戳破傷疤

很多人在談論說服時都會忘記了“同頻共鳴”這一點，其實說服不是你想要A，我提供的是B，于是我拼命地讓你放棄A選擇B。而是你通過我的信息，自己想通了，原來還是B最有利。這個想通的過程最重要的一點就是同頻共鳴。

而同頻共鳴是從戳破傷疤，點破問題開始的。只有我們精準判斷出對方的真實需求，對方的真實顧慮，才會出現“還是你懂我”的共鳴感嘆，才能很好地開始說服。說破有時候不僅無毒，反而有利！

10. 權利反轉

權利反轉我在之前的文章中提到過，本身指的是“無形中剝奪對方原有的權利，再以顯性的方式賦予對方”，以此達到一種持續溝通或快速決策的目的。

第十個技巧往往跟技巧三“無風險承諾”配合使用。我舉兩個例子，供參考：

1. 持續溝通：我們電話溝通過程中，原本掛掉電話是對方的權利，但是你有言在先說“如果我的方案不符合您的預期，您可以隨時掛斷我的電話”。這時對方反而不好意思掛斷，同時也會降低對方的防備心和溝通負擔。
2. 快速決策：很多產品本身就是自帶1年保修期的，但是很多商家就會換一種說法，叫做“買這款產品，贈1年保修期，而另一款就沒有”，配合對比技巧來促使你下單。

OK，這10個技巧我都打包交給你了，算上技巧二當中引申出來的比喻暗示和對比說服這兩個，一共是12個技巧，算是超額完成交付任務。

文章來源：人人都是產品經理   作者：運營插班生

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

編輯導語：B端和C端是產品經理經常接觸到的兩個話題，那么什么是B端C化呢？這篇文章從B端和C端的區別入手，詳細解答了什么是B端C化以及為什么要B端C化，一起來看看吧。

一、寫在前面

最近很流行一個詞——B端C化，解釋出來就是可以用C端的模式和思維來對B端產品進行設計，討論者大致分為兩種觀點：

1.C端產品市場已經趨于飽和，可拓展空間剩余不多了，B端產品市場還是一片藍海，于是產生了一些C端設計師轉型去做B端了，將一些C端的模式和思維帶到了B端設計中，導致越來越多的B端逐漸C化；

2.B端產品市場互相競爭，為了在同市場中打出差異化，于是一些B端市場開始招攬C端設計師培養轉型，并且嘗試融入C端產品的模式和思維在同市場內競爭，是產品設計的“內卷化”現象，導致市面上的C化的B端產品越來越多；

但上述無論哪一種觀點，都在闡述一種現象或者趨勢：不管是交互還是視覺還是UI，目前部分C端設計師正在往B端設計師轉型。這個現象的發生對整個設計行業來說無異于新增了很多新亮點——市場上越來越多的B端交互、數據可視化視覺等需求，進而導致對市場培訓行業開始產生B端培訓的訴求，同時也破空而出了很多優秀的B端設計師。那么B端C化到底是什么，和傳統B端C端有什么區別，有這方面想法訴求的同學怎么去實現轉型？

由于我本人之前是做C端UI設計師，到后來轉型成為B端交互設計師，而接觸的業務恰好涉及B端和C端的聯動以及多角色之間的協作，所以這篇文章借助結合我個人的經驗和看法，談一談自己對B端C化的理解。

二、B端C端的區別

在談B端C化之前，需要先了解B端和C端的區別是什么。B端C端的區別網上有很多文章和概述了，大致歸納下來主要以四個維度去區分：受眾主體、上線周期、業務類型和產品側重點這四個維度，其余的維度也會有區分，但是影響較小，主要還是圍繞以上四個維度進行B端和C端區分。

1. 受眾主體

受眾主體也就是相對應產品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場景和路徑較為單一的，比如C端產品就以年齡層、城市、性別等來劃分用戶，每個階段的用戶都有不同的訴求、認知和習慣等等；在做任何決策方面都屬于偏感性（Heart）的個人決策（Personal）；用戶穩定性則比較差，要是對產品不滿意，可以立馬換另一款產品，轉換門檻低，有多個競爭對手產品可供選擇；

而B端產品的受眾主體則是為組織群體，特征為多場景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權限等劃分用戶群，但是之間的關系更加復雜，比如設計一個銀行內部管理系統，用戶群就很明確清晰——銀行各級職員角色，根據職級關系設計不同的功能以及權限；在做任何決策方面都屬于偏理性（Head）的團隊性決策（Team）；用戶穩定性較強，要是對產品不滿意，也只能被迫適應和忍受，轉換成本較高，幾乎沒有其他產品可供選擇

2. 上線周期

上線周期就是指產品從需求階段到設計階段到開發階段直至最后產品上線所需要的周期。

C端產品上線周期模式有個很明確的特點：快速迭代、敏捷，很多C端產品功能更新迭代的速度很快，上線周期非常短，往往半個月甚至一周就完成開發上線，加上用戶群的多樣性和跨度大，所以在上線的時候往往會需要AB實驗去驗證方案可行性；

B端產品上線周期則是和C端一個對立面——長，少則雙月/季度多則半年/一年等，因為B端產品流程上都屬于重型流程，角色之間關系復雜，交互系統較為繁瑣，需求的改動和迭代并沒有那么頻繁，也不需要像C端產品那樣快速上線搶占市場，所以B端上線周期會很慢，也導致在工作強度上相比C端較為輕松一些，但是缺點就是結果沒有C端來的那么快和明顯。

3. 業務類型

C端產品的核心競爭力就是產品本身，關鍵總結就是讓用戶爽就完事了，所以C端產品的需求類型往往圍繞用戶群的痛點產生；因為C端用戶跨度大，不同的用戶群體有不同的痛點，所以導致C端的需求類型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯中逐漸得出正確的結論；

B端產品的核心競爭力除了產品本身，還依賴復雜的關系、渠道、技術和資源，你的關系夠硬、渠道夠廣、技術夠領先、資源夠豐富，哪怕你的產品很一般，一樣能領先其他同行業的競爭對手，關鍵總結下來就是讓用戶贏就夠了；B端產品的需求類型雖然也是圍繞著用戶群的痛點產生，但需求的目標是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產品來說，B端產品是需求更加明確且容易達成目標。

4. 產品側重點

產品側重點無異于區分C端和B端最明顯的門檻了，C端產品的側重點主要在于體驗，而B端產品的側重點主要在于效益。

前面提到過C端產品核心讓用戶爽就完事了，加上基于用戶更換產品的成本很低：你這款產品我用不爽就換掉了，所以C端產品的側重點永遠以用戶體驗為主，前面說的需求業務類型也幾乎是圍繞用戶體驗產生的；大家對比市場上同類型的C端產品，界面、交互、功能都不會差很多，是因為經過長時間的更新迭代，已經沉淀下來目前最好的用戶體驗類型了，隨著產品量級越大，改變用戶體驗類型就越謹慎；

C端產品就是為了尋找并解決用戶痛點、癢點和爽點，加上品牌性、用戶隱私等因素考量，產品側重點聚焦于用戶體驗。

B端產品側重點則是圍繞效益了，因為作為一個團隊使用的產品，不管是從易用性、功能性還是安全性，為這個團隊解決問題為首要基礎，那么使用者的體驗、產品的美觀度等等相較于優先級就沒有那么高了，所以導致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認知上；

B端產品就是為了使用產品的團隊解決效率、成本、營收的問題，加上產品的穩定性、安全性等因素的考量，產品側重點自然更聚焦在效益上。

二、什么是B端C化

前面了解了B端和C端產品的區別，接下來聊一聊什么是B端C化；簡單來說從字面意思理解就是B端的設計層面逐漸靠近C端，網上也有很多B端可視化、趨勢潮流的設計和文章，但是B端C化不僅僅是從視覺設計上的改良，下面我逐漸從大到小聊一下我對B端C化的理解。

1. 功能架構

在做過很多B端產品之后發現，往往很多產品經理是對整個產品架構、功能形態一切都清晰地了如指掌，但是有時候在搭建產品架構的時候，功能形態單一粗糙，步驟復雜且笨拙；站在業務產品的視角來看，架構邏輯上都是沒有問題的，但是站在用戶視角來看，整體框架是混亂破碎的，步驟繁瑣且復雜，導致用戶對產品的認知變差，但是又不得不去用這個產品，只能被迫去學習使用。

比如一個產品案例，就是一個產品的底層邏輯是前端輸入素材id，后端返還一個素材后就可以使用了，站在產品業務視角來看，這樣設計沒有什么問題，符合產品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來給用戶選不好嘛？

2. 行為習慣

行為習慣自然是指用戶群在該行業下的行為習慣，電商行業、社交行業等等不同行業的習慣、專業術語等都不相同，這個在C端產品中都很能得到體驗，比如電商行業的大紅大紫，社交行業的左右滑動等等，這類有著很明顯的行業屬性和大眾認知，一樣是B端設計中應該注意的點。

最經典的案例就是紅色綠色的定義區分，在數據產品認知中，綠色代表數據漲了，紅色代表數據跌了，比如GMV數據，DAU數據等，紅色為重點關注的數據；而在金融行業中，基金股票紅色代表漲了，綠色則代表跌了，所以設計的原則一定得是基于不同行業的用戶行為習慣。

3. 信息層級

B端產品的信息量一般是很龐大的，尤其是數據、表單、審批等B端產品，涉及到不同角色不同權限的開放等，所以用戶能否能一眼看清關鍵信息，能否幫助用戶快速達成目標，是交互層面針對信息層級的設計處理一個重要的環節。

之前很常見B端產品中信息處理的方法就是堆積處理，直接將信息、數據等平鋪展示，比如很久之前的某牛商家端后臺等老舊系統；現在很多新的B端產品都是以模塊化處理方法將信息層級區分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設計。

4. 設計語言

設計語言自然是B端設計中標題、字號、顏色等規范標準，早些年把B端產品組件化后且開源的自然是阿里老大哥了，當時最早的AntDesign、以及后來的ElementDesign組件庫，到現在都被很多中小企業甚至大廠某些產品一直使用中，但隨著B端產品的普及和發展，越來越多的企業開始將自己產品沉淀出完善成套的設計語言，并搭建出自己的組件庫投入使用了。

5. 用戶體驗

如何去衡量用戶體驗是否是好的，最客觀來講當然是通過數據去衡量，而數據往往在C端產品中很常見，不管是體驗數據還是表現數據，都是C端產品中最為關注的；然而在B端產品中，更多收集的一般都是業務表現數據，幾乎沒有衡量用戶使用平臺的相關數據，大多衡量體驗的方法都是依靠問卷反饋的形式；但在B端C化的過程中，用戶體驗的數據也逐漸被加入到B端產品當中來，成為體驗標準的考核之一：比如某個任務完成的時長，報錯出現的頻次、某某工具的使用率等

6. 視覺設計

最后就是B端C化表現層的設計，包括目前主流的設計趨勢如大數據可視化、3D建模、材質質感、Dark模式等都逐漸融入到B端產品中，使得B端產品不再追求簡單的“功能優先”和“能用就行”，而是像C端那樣追求更美觀的視覺，更極致的體驗

三、為什么要B端C化

總結下來“B端C化”就是B端產品無論是從功能架構還是視覺體驗，越來越趨于人性考慮設計，越來越關注使用者的感受和反饋，因為說白了不管B端產品代替成本高不高，用戶是一群專業人士還是普通職員，使用者歸根到底還是“人”在使用產品，那么必然會帶來體驗相關的問題；

所以B端C化會逐漸形成一種趨勢，在企業平臺資源支持的情況下，會將B端產品的功能放大，追趕市場競爭，逐利行業內卷，在體驗和視覺感官上也會更加的人性化，結果自然是產品設計者們更加的卷了（手動狗頭）。

無論是現在的B端C化還是將來其他多元的設計趨勢，隨著市場的競爭和行業內卷，已經反推著設計師們不單單局限于照顧自己的“三分田地”了，無論是之前視覺設計師開始學習3D建模，還是UI設計師嘗試接觸代碼設計，設計師最大的品質就是應該緊跟時代的趨勢變化，及時調整補充自己的能力，提升自我的競爭力，才是在當今環境下立足的根本。

文章來源：人人都是產品經理   作者：雨灰


分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

在《騰訊文檔-構建科學有效的色彩系統》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知，以及如何構建一個科學有效的調色板。

在設計系統的實際運行中，我們也需要著眼于如何應用調色板，建設協同工作流，并給各個角色提供有關色彩的擴展指導，以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。

在建設騰訊文檔色彩系統的工作中，我們首先構建了一個包含品牌色、灰色、輔助色的調色板，但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中，“這里我用哪個藍色？”“這里我用哪個灰色？”“開發同學能否快速的變更某些元素的顏色？”等等問題層出不窮，建設系統的協同工作流迫在眉睫。

Chapter 1

——————————

如何建設？

HIG強調不要在APP中使用“硬代碼”，即十六進制色值進行編碼，但前期我們構建的調色板僅有色值，這種硬代碼應用到app中導致項目效率低下，維護也會成本激增。

于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務（role）、主題（theme），為UI中的任務指定十六進制代碼的色值（hex value），以弭平設計師之間、開發與設計師之間的溝壑，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。

所謂顏色變量，通俗的意思就是可以將一個顏色按任務用途去抽象，抽象成一個有命名的顏色樣式，這個顏色樣式就是顏色變量。

在設計或者代碼中，可以通過修改這個顏色變量的值來進行全局顏色的更新。例如，我們現在需要給button一個顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實現全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現，顏色變量Fill-01可以在不同主題下，映射不同的十六進制色值。這就是我們建設協同工作流的的基礎邏輯。

Chapter 2

——————————

為調色板的基礎色值命名

調色板的各個色值（hex value）是最底層的基礎樣式，我們將色板上的顏色進行規則化命名，以方便后期將其引用到顏色變量中。

騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。

*騰訊文檔調色板命名圖表

Chapter 3

——————————

定義顏色使用規則

1、 從調色板中選擇合適的顏色并測試

從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試，做具體任務中顏色選擇的最優解。

例如，我們需要選擇一個藍色作為鏈接色，作為文本，對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。

騰訊文檔的界面中，灰色系列占主導地位，起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。在調色板中，我們選擇了兩種灰色：中性灰色和藍灰色，來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。

同時我們也使用了其他顏色以滿足一些沖突性任務（警示等）的顏色使用，這些顏色需要謹慎、有目的地使用。

2 、根據任務定義顏色的使用規則

經常會有設計師問，“這里我能用這個灰色嗎？”出現這種問題，根本上還是顏色使用規則定義的不夠清晰，含混的口口相傳的規則會導致更多的混亂。于是，需要我們根據任務和使用場景把顏色的使用規則清晰的定義。

首先定義在界面中占主導地位的灰色、藍色的使用規則。

藍灰色_Grayblue：

在騰訊文檔中，藍灰色與品牌藍共同建立品牌印象，由此，藍灰色主要應用于與風格相關的場景。包括：圖標色、填充底色及大面積的背景色等。

中性灰色_Gray：

中性灰色主要應用于一些全局系統行為。如：文本、分割線及交互反饋hover、press等場景。

品牌藍色_Primayblue：

品牌藍色主要應用于系統中的各種行為，如藍色圖標、button、文本鏈接等。

其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。

紅色_Red：

紅色主要應用于系統中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。

其他顏色：

在騰訊文檔中，會針對不同的任務應用不同的顏色，如左滑操作、成功提示、高亮顯示等。

品類圖標基準色：

在騰訊文檔中，不同的品類有不同的基準色。

Chapter 4

——————————

顏色變量的語義化命名

定義了顏色在系統設計中的使用規則后，我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性，如果只是將調色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設計團隊需要調整品牌風格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對于開發來說也是巨大的災難。

根據 HIG 的建議，語義化命名不應該描述外觀或者色值，而是指明這個顏色的任務用途——標簽 Labels，分割線 Sepatators 或者填充 Fill。

在思考如何賦予顏色語義化的命名時，設計師也需要用更概括和結構化的視角來看待界面設計，同時也需與開發同學達成一致，使用同樣的命名，滿足以更好地維護一套收斂和統一的設計語言。

在騰訊文檔中，顏色的任務用途定義為為以下幾種：背景色 Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認交互反饋 Feedback、語義 Intent。統一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中，直接描述其用途，例如：hover，pressed、disabled等。

Chapter 5

——————————

建設團隊協同工作流

以上種種，最終目的在于建設團隊的協同工作流，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于設計利用變量及組件、開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。

1、 設計內協同：在Figma中生成顏色變量

在設計系統中，顏色變量屬于底層的設計原子，需要將其生成為顏色變量并嵌入到設計組件中，便于設計內部使用。我們將已根據任務用途命名的色值，生成figma中的顏色樣式（color style），后續無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。

2、 設計組件與開發代碼聯動：利用顏色變量表進行信息同步

我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協作實時溝通～）

最終形成了設計組件庫與開發組件庫的聯動，構建了一個協同工作流，橫向提升工作效率。

結束語

上篇的調色板設計后，一直在醞釀這篇調色板的實際應用。在設計一個較為復雜、龐大的產品時，提效是永恒的課題。痛過、踩過坑的設計師應該深有感觸，溝通的無力、推動的困難都推動著我們發動自己的能量去想辦法提效。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

案例1.用戶操作時的困惑

相信大家在做設計的時候都遇到過這種情況，一個產品內有多個入口指向同一個界面，這是產品的投機取巧還是另有深意，很多人都對這樣的設計有不同的看法。

這樣的設計就好像是狡兔三窟，在產品中流量可以從不同的入口進來，到多個不同的出口，也可以從不同的入口進入同一個地方。

有人會覺得如果一個界面中有多個入口指向同一個界面會出現問題：

1.違反了效率、用戶預期的原則，會認為頁面空間有限，在同一個界面中有多個入口指向一個界面效率變低，而且用戶知道后往往就會只從一個入口進入。

2.多個選擇會讓用戶拉高轉化的成本，用戶在選擇的時候會花更多的時間思考有什么區別。

我們來看一個例子，下面德邦app之前的一個版本，目前已經優化了。從截圖中我們發現頁面上方的查詢和寄件都和底部標簽單獨出來的界面功能重復了，并且我的快件也直接可以展示在首頁的下方，我的快件目前可以從首頁頂部、首頁下方和個人中心3個入口進入查看。

通過這個案例我們發現確實這些板塊和功能重復度太高，并且沒有區分出場景，這樣的設計證實了以上的兩個說法，降低用戶使用效率和提高選擇成本。而且從業務角度看也并沒有目標的差別。

但是我們分析問題也要多角度去觀察，多個入口進入同一個界面只有缺點沒有優點嗎？

顯然不是，我們再來看幾個案例

下方是一個商品評價的卡片，經過我小手的實際測試，發現無論點擊這個卡片任何有內容的區域，都會跳轉到全部評價的界面，那這樣的設計邏輯是否會造成和上面的案例一樣的問題呢？答案是，不會。

這里的設計邏輯并不是和沙面那里的場景那么單一，而是用戶在面臨不同需求場景的時候可以有選擇。

不知道大家有沒有發現一個問題，在上面德邦案例的時候，你會對兩個入口有疑問，但是在評價卡片的時候并沒有，這個卡片包含了4種不同的場景：

1.我想看看有哪些好評、哪些差評 

2.幾個不同標簽的用戶都是怎么說 

3.下面用戶的實拍到底是不是真實的 

4.還有沒有更多類似真實用戶的使用評價。

所以即便最終到了一個界面，對于用戶來說也是從獨立的出發點開始的，而再回過頭看上面案例，你會發現，我就是要寄東西，這里有兩個入口，怎么選。

而且，考拉這里其實還做了從不同內容點進去的一個區分。

再來看個案例，貝殼的地圖找房，在首頁中有兩個入口，導航欄一個，分類中一個，這里出現重復會造成一開始說的問題嗎？首先我們看到貝殼的業務很多，以至于在這個分類中居然還需要通過滾動指示器來展示剩余內容，大家也可以思考一下，在這個界面中，會不會出現兩個地圖找房不同的場景出發點呢？我個人覺得其實是可以商榷的，首先地圖找房在房產app中是很核心高頻的一個功能，他的屬性是“工具”。

所以我覺得他之所以在卡片中再放一個地圖找房是3個原因

第一個是導航欄的找房肯定不能動，他是一個全局的入口，即使頁面滾動也可以隨時點擊到，即便要撤一個，也肯定要撤下方卡片分類中的。

第二個是卡片分類中的圖標入口是都具備工具屬性的，那首頁上面部分就分為了：搜索、業務分類、工具這三塊。所以用戶看到這些工具屬性也會聯想到通過地圖去找房。而且這些多色彩的圖標對于新進入的用戶是比較吸引注意力的，所以很有可能用戶看不到右上角的地圖找房（可以參考古騰堡圖表的原則）。

第三點是可能右上角的地圖不太能清晰表達這個圖標的具體功能，所以將“地圖找房”四個字顯示全。

但這些都有一些主觀因素在里面，如果真的去掉卡片中的，我覺得可能影響也并不是很大。有小伙伴可能想說是為了分流，但是分流的目前主要是讓流量流到他應該去的地方產生實際價值，除了以上的3個原因，好像確實有點重復了。

再來看一個例子，小鹿茶app。

首頁的現在下單和底部菜單標簽都是到同一個界面，那為什么要重復呢？這里其實考慮更多的他并不想讓用戶進來就直接去購買，為什么不直接購買呢？應該是想要建立自己的品牌人設、滿足更多的消費場景和增值業務，比如給別人點奶茶、周邊的杯子跟合作商品推銷、最新的奶茶的推薦。

如果只有菜單，產品也會顯得更工具化，很難突出自己的品牌，對業務增長沒有太大的幫助。有同學要說，那這個界面只是產品的“一廂情愿”，我就只要點奶茶就可以了，多個入口只會給我帶來困擾。所以他這里的設計邏輯是在用戶打開app的時候首先定位的是菜單，而不是首頁。

所以，到底多個入入口進入同一目標我們還是要看不同的場景和目標的。如果既沒有業務目標做支撐，又沒有用戶場景的變化，那么這個重復的入口就是雞肋的。

最后留一個小思考題：網易云音樂的“歌單”在首頁上也重復了，大家知道這里為什么他要做成重復入口嗎？ 

案例2.用戶使用中的不滿

一個優秀的產品或者說一個合格的產品，能給用戶帶來愉悅的體驗。何為體驗，用大白話來說就是用的舒服、自然、高效率。

再有一個底線就是不要讓用戶產生由產品帶來的負面情緒，例如產品出錯了卻不告知用戶解決方法、用戶出錯了沒有辦法及時幫助糾正、高危操作沒有二次確認等等，根據負面情緒的嚴重程度幾乎就可以直接讓部分用戶流失。

很不幸的是我就遇到了這樣的體驗，當時正在給同學們布置一些作業練習，體驗一些產品的優缺點并給出解決方法。我也下載了這款文玩類的App，體驗了極速撿漏這個功能模塊。

撿漏：在文玩圈的一句行話，意思就是用很便宜的價格買到很值錢的古玩，而賣家卻不知情，是一種可遇不可求的行為，所以寓意就是比較難得、走好運了。

進入直播間，商家在賣力吆喝，頁面底部有加一手的按鈕，就是類似于拍賣，價高者得。于是我就抱著試一試的心態點了加一手按鈕，因為我預期是產品會再次向我確認是否要加價，結果是居然加價成功了，發生了什么？最后競拍結束也沒有人繼續加價了。

實際場景中用戶可能誤操作不小心點了按鈕，這樣的場景和情況是非常多的，即便不是誤操作，給一個二次確認的對話框也可以避免這樣的尷尬狀況，因為用戶就喜歡在產品中點來點去，然而你在這里就像埋了一顆地雷。

如果到這里就結束了，那其實我也感覺沒必要去吐槽，問題在于當我拍下還沒付款，直播間的商家就開始喊我的名字：xx大哥恭喜你拍到了我們的產品，可以去付款了。連續播報了幾十遍，我尷尬的直接退出了后臺，這種感覺就像是一群觀眾看著一個被騙的小白一樣，當我過10分鐘后打開系統提示商品流拍了，并且累積了違約積分。

？？？

到這里，可能會有人說，你自己拍了的又不付款，當然要懲罰你了。

于是我還是認真的去研究了一下，發現極速撿漏和競拍并不是同樣的規則。該產品和競品其實都有競拍板塊，在競拍板塊都會有需要用戶確認的操作，并在操作下方給出拍賣規則，顯示出價即表示同意拍賣規則。

但是該產品極速撿漏的板塊并沒有這樣的說明，既然沒有提前展示這樣的說明和約定，用戶就不知道有這樣的規則，我拿了競品一對比，其實在直播帶貨的場景下，這個出價流程還是不同的，雙方其實都沒有給規則說明，但競品還是給了一個出價選擇后再出價的步驟。

最后我甚至被商家拉黑了，不過還給我一個投訴商家的入口

我當時的想法：

1.如果因為誤操作讓用戶付出這么大代價的話成本就太高了。讓用戶點擊是否就等于用戶同意？

2.請先告知我約定與協議的內容，單方面在我不知情的情況下對產品進行操作后，通知扣我違約積分，這樣就有點“霸道”了。

3.平臺對商家和消費者的權益是如何平衡的，文玩行業和互聯網結合的難點在哪里。

3.線下文玩圈的一些不成文行規，導致新人入圈后產生的沖突。

于是我就想對此說說我的看法

1.交易是產品平臺其中的一個功能屬性

交易是產品平臺其中的一個功能屬性，需要優先滿足產品對用戶價值，其次再談交易的合理性。在這個流程中，面對用戶很有可能遇到的誤操作行為以及需要讓用戶去下單支付成本，我們必須提前告知用戶。在尼爾森可用性原則中我們也發現了，如果用戶不小心操作失誤，那么我們盡可能減少這些因為用戶犯錯帶來的成本，同時在用戶犯錯之前就要明顯告知用戶，將風險控制、前置。

所以，你在注冊的時候、登錄的時候，產品一定會讓你同意一份用戶協議，告知你我們要保存你的數據和一些跟你相關的信息，如果你不同意，那就無法繼續體驗產品。

這是一種契約。

同理，如果你想讓用戶在這個產品中去參與拍賣，在進入這個板塊之前或者用戶點擊按鈕之后，也需要讓用戶明確這個操作帶來的風險是什么，取得用戶的同意。而不是直接讓用戶加價成功，導致用戶不明所以的被扣違約積分、被商家拉黑，這就和你去泰國，在街頭你朋友拍了一張你和一個抱著蜥蜴的人的照片，結果別人來問你收錢是一個道理。

對于正常線下拍賣的流程，舉辦方也會對參與拍賣的人員進行相關規則、流程的告知，并且將風險、問題都提前讓客戶進行協議確認。

所以，在產品中的交易，必須先滿足用戶與產品信息之間的對稱關系，保持信息的透明和契約公正，規則、約束、條件是用戶使用你產品的前提和體驗反饋的衡量標準之一。

2.對于商家和產品的價值

商家希望有更多的流量來曝光商品，撿漏商品的低價可以快速吸引一大批用戶，比如8塊錢的一個木頭核桃的雕刻掛件等，產品通過營造搶購、限時的氛圍，吸引用戶下單，并且降低用戶參與的門檻。

那么，直接加價成功是一個好的降低門檻的策略嗎？我覺得并不是，降低門檻并不意味著就是直接拍到，而是需要提高用戶對產品的信任度，這個極速撿漏的模塊的目標用戶幾乎都是小白用戶，因為資深的玩家看不上、更不會買，有一定經驗的玩家也看的出好壞，明白它的價值。所以面對這些沒有了解過文玩產品的小白玩家來說，內心是謹慎的。

可能有人會想，這幾塊錢、十幾塊錢的東西還需要考慮嗎？當然在這個場景中，從眾心理是很明顯的，大家都覺得很便宜，但就是沒人拍。這都幾塊錢撿漏了怎么都沒人要，大部分人都覺得這么便宜東西肯定不咋樣，運費是不是貴的離譜、有沒有托在背后跟你抬價呢？大家都不拍我也觀望。越多人圍觀，越難促成交易。

還有一種可能就是我賣不賣的出去東西，并不重要，重要的是有人來看了，這些邊角料都是用來回饋直播間粉絲的，就是一個窗口，真正有利潤的東西在櫥窗里。所以這里的撿漏只是一個引流的噱頭。

人總是對太輕易得到的東西不珍惜，更何況是幾塊錢的小玩意兒。所以針對直接拍下這個交互，個人認為是不妥的，無論是上面任何一種情況，都沒有辦法讓降低門檻，甚至通過這種“小聰明”反而會讓用戶更加不信任產品和用戶。

不信任產品是大。尤其是作為一家平臺來說，虛假交易、以次充好、濫竽充數等等行為是致命的。

3.文玩的價值

我其實有玩過一段時間文玩，受我老丈人的影響，有一段時間喜歡玩手串、玉什么的。經常也會在某音去刷一些鑒寶類的視頻，很有意思。

文玩它的價值在于品相、稀有度、盤玩程度、大眾接受度、歷史背景還有工藝等等。所以它并不是一個在每個人心中同等效用的商品，同樣一塊玉，他的種水一般，但是花紋很獨特，買賣雙方其實心理的價值預期會相差非常多，它就不像買電子產品一樣價格那么透明容易計算。

有的人玩這些就是覺得命里該有它，它能給我帶來財、運，幫我辟邪，看的是眼緣。而不是路邊上一塊無用的石頭，可以隨意拾取丟棄。那么換句話說，如果在用戶下單的時候，我們利用一些情感化的文案，讓用戶喜歡上這款文玩，是不是也可以大概率的促進交易呢？

4.文玩圈的行規

我相信很多玩文玩的小伙伴都知道，在文玩圈有一些不成文的行規。也或許就是因為這些行規出現到了線上產品中。

1.還價意味著出價，出價意味著買下

在文玩圈，你不想買就不要還價。如果賣家同意了你的還價，那你就必須買。這代表著你個人的信譽和道德品質。

所以文玩圈和互聯網的用戶之前有許多的鴻溝需要一步一步建設橋梁，不能單純的以線下圈子內的行規來要求剛接觸這個圈子的互聯網用戶，這需要大家一起努力和營造起一個良好的文玩圈的文化和規則，而不是直接生搬硬套，提高這個門檻。

2.不要打聽別人的成本

文玩沒有實際的成本，可能別人花10塊錢淘到的價值1萬塊的東西，也可能別人花了巨資看走了眼。所以你知道了成本對誰都沒好處，別人也不會告訴你。

3.別人在交易的時候保持沉默

文玩在每個人心中的價值不同，所以貨幣價值也不同，當別人在詢價還價的時候，不管怎樣我們都不要去表明自己的看法和想法。

當然還有其他的規則就不一一敘述了，針對這3條，其實在互聯網的產品中是會有沖突存在的。例如你買了某個文玩，你一拍下，別人就說這個根本不值這個價錢。還有你出價了但是又不想買了，這些原本在文玩圈子中不允許的規則，在互聯網上去要求用戶著實有點困難，因為互聯網上的交易并不一定所見即所得，可能展示的是這樣，收到貨又是另一個東西。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

致數據可視化設計師-設備篇詳解

各位數據可視化設計師們大家好，鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方，阿勇決定花一些時間去詳細剖析一下關于這方面的知識，全部都是多年工作經驗所得，絕對有料。

整個合輯一共有10篇文章，分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章，具體的詳細的展開來講一講可視化大屏設計的知識點。（我命名為可視化設計十要素）

同時也會包含一些工作中的同學們問我的一些問題以及我搜集的一些問題，將會以問答的形式去給大家講一講，如有不對的地方，還請大家指出，我們一起探討進步！

文章較長，請廣大讀者仔細閱讀，基本涵蓋：設備信息，分辨率尺寸，大屏適配，投屏事項，掌握本文可應對日?？梢暬O計設備方面的知識。

LED屏幕

政府大屏主要以點間距去區分屏幕的精細度，點間距越小，造價約昂貴；面積越大越整體，造價越高。離屏幕越近顆粒感越強，設計效果也就越不清晰，LED顯示屏表面不平整是導致LED顯示屏圖像失真的主要原因。LED顯示屏表面粗糙度的好壞主要取決于生產工藝。

屏幕介紹：按照不同點間距進行分類，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（間距越小，圖像越清晰，價格也越高，一般政府led屏基本都在P1.25-P6之間)。

最佳視距=像素間距/（0.3~0.8），這是一個近似范圍。如LED顯示屏P16mm，最佳視距為20~54米。

液晶拼接屏

拼接屏相比于點間距比較小的LED屏，價格方面會更便宜一點，拼接屏設計時最主要就是拼縫的處理，注意拼縫，設計時非必要情況下，都要跳過拼縫，尤其是“圓”這個造型。

拼接屏：46寸，55寸  物理分辨率：1920*N 1080*N（n代表屏幕數量），1.7mm、3.5mm 、0.88mm、0.44mm、無縫隙；企業常用（1.7mm 和3.5mm）

大屏拼接縫隙：設計時應盡量不要跨屏去設計，會使畫面交叉，不重疊，尤其是圓形。

大屏拼接處理器

大屏拼接處理器主要功能是將一個完整的圖像信號劃分成N塊后分配給N個視頻顯示單元，完成用多個普通視頻單元組成一個超大屏幕動態圖像顯示屏。大屏拼接處理器輸入信號數量和類型取決于用戶需要，輸出信號數量等于顯示單元數量。

視頻矩陣處理器

矩陣是將多路輸入信號切換輸出到多個顯示設備，一般來說輸入信號數量要大于輸出信號數量。（我們想在9塊顯示器上同時監控100個攝像頭傳來的信號，就用矩陣來實現即可）

視頻矩陣是指通過陣列切換的方法將m路視頻信號任意輸出至n路監控設備上的電子裝置，一般情況下矩陣的輸入大于輸出即m>n。有一些視頻矩陣也帶有音頻切換功能，能將視頻和音頻信號進行同步切換，這種矩陣也叫做視音頻矩陣。

模擬視頻矩陣的輸入設備：監控攝像機、高速球、畫面處理器等很多個設備，顯示終端一般監視器，電視墻，拼接屏等（通常視頻矩陣輸入很多，一般幾十路到幾千路視頻，輸出比較少一般2-128個顯示器；例如64進8出，128進16出，512進32出，1024進48出等）。

總結：矩陣只能負責信號的切換，不能處理，不能做效果。大屏拼接處理器功能十分強大，具備矩陣功能的同時，還可以實現任意開窗、漫游、疊加、場景保存與輪換。

液晶拼接屏的優勢 - 拼接處理器預設場景

4*2大屏展示端，我們通過控制端，借由拼接處理器可以對大屏進行隨意開窗，漫游，疊加，畫中畫等效果。在控制端拖動布局，大屏會隨之改變布局，非常方便。下面我就借由我以前做過的一個項目幫助大家理解一下拼接處理器的優勢以及如何設定不同場景。

如果你們企業還在因為屏幕適配以及尺寸問題而糾結，或者想展示：開窗，漫游，疊加，畫中畫等效果，毫無疑問你們應該選擇拼接處理器，這比傳統投屏方式更合適，更沒有比例不對的困擾。

預設場景一

把控制端的分屏進行編號，接下來移動控制端對應的編號區塊，就可以對大屏進行重新布局，圖中展示的正是我們的預設正常場景。場景為居中布局，左右兩側為圖表展示。

預設場景二：任意窗口布局

對控制端進行隨機布局，將主視覺模塊移動到左側四塊屏幕，圖表都集中在右側，由此我們就由預設場景的居中布局變成了左右布局，左側為主視覺。

預設場景三：任意窗口漫游

可以隨意的關閉大屏某個模塊的漫游，通過控制端進行屏幕的顯示以及不顯示。

預設場景四：任意窗口平移

畫面的任何一個模塊都是可以進行平移操作的，我們將模塊一和模塊五可以平移拖拽到任何一個位置。

預設場景五：任意窗口疊加

畫面的任何一個模塊都是可以進行疊加到屏幕任何一處，還可以控制模塊置頂和置底，非常靈活。

WEB端大屏

基于web網頁端的展示方式，通過在web開發，有需要時會投屏到大屏上去展示。設備比例一定不能差距過大，比如16:9的投屏到32:9的大屏就不是合適，解決方案可以是外接一塊1920的顯示器即可。

此處要注意web端演示時，記得全屏顯示，瀏覽器邊框滑動條等可以不考慮，前端會做相應的瀏覽器細節考慮，設計按正常分辨率走即可。

觸摸屏

觸摸屏（Touch Panel）又稱為“觸控屏”、“觸控面板”、“觸控臺“，是一種可接收觸頭等輸入訊號的感應式液晶顯示裝置。

當接觸了屏幕上的圖形按鈕時，屏幕上的觸覺反饋系統可根據預先編程的程式驅動各種連結裝置可用作控制端操作大屏，原理等同于ipad控制，只是載體不同。

設計規范以及按鍵反饋等交互體驗與ipad類似。

滑軌屏

滑軌互動屏系統——又稱為滑軌電視、滑軌播放等，通過特殊設計的機械滑軌控制裝置，結合高清液晶拼接幕墻，實現對屏幕內容的互動控制。滑動到不同位置屏幕展示相關信息，包括圖片、文字、視頻等，是一種全新的互動展示形式，可與觸摸同時使用。

虛擬沙盤

虛擬沙盤/數字沙盤就是用計算機通過投影儀或者LED大屏顯示屏動態/靜態三維顯示：智慧交通、智慧市政、智慧農業、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運等模型，這是一種高科技的模型操作員通過程序，可以隨意調整沙盤的尺寸、規劃區域、區域布置，快速展示多種全新的創意。

具有三維顯示效果，并可以從不同角度觀察創意模型，篩選創意方案。注意虛擬沙盤和實體沙盤的聯動效果，實體沙盤為底，虛擬沙盤做效果疊加。

分辨率：物理實際分辨率

Q：原本設計尺寸是1920*1080，使用場景是PC端，同時在大屏中展示，尺寸為3840*1080，該如何適配？

A：首先我們需要了解適配最主要的痛點就是：靈活，復用性高，可延展。

圍繞這幾個點我們可以通過模塊化開發去做，將每個模塊單獨開發。我們設計師做這種需求之前，就需要提前去構思，在設計各模塊時，盡量使用可擴展和可自適應的圖形，這樣面對適配的時候我們可以通過移動，縮放這些模塊，來完成適配。盡量避免二次設計以及開發，提升時間成本。

圖形放大適配

圖形位移適配

Q：如果是16:9適配非32:9是否也是這么去適配的？如果是特殊的形狀或比例該怎么適配？

A：我們適配一定要記住靈活，減少工作量這些原則，如果不遵循這些原則，那么我們做適配的初衷就錯誤了。這樣我們還不如直接就重新開發一套了。就好比我們通過控制端去控制大屏，如何用開發一套的時間去適配兩個甚至是多個終端，這是我們需要注意的。當然考慮到一些實際情況，會有一定程度上的修改，但是一定是要從節省工作量去出發的。

場景一：拼接屏分辨率計算，已知某項目設備分辨率為寬高4*2拼接屏，設計稿我們該如何去定義分辨率？分辨率又是多大？

從命題我們可以看到4*2的拼接屏，我們可以通過一塊屏幕為1920*1080去計算，那么通過計算分辨率應該是1920*4 &1080*2，也就是7680*2160，這樣就計算出我們的分辨率了。

場景二：LED屏分辨率計算，已知某項目LED屏幕物理尺寸為寬15米，高4米，設備分辨率未知（可以支持4K或者2K輸出），那么如何去制定分辨率？

工作中相信不少同學都遇到過這種只知物理尺寸而不知道分辨率的項目，那么我們只能通過計算大概的設計分辨率來出初期的設計稿件。

可能一：屏幕支持4K輸出，既然支持4K輸出，保證畫面輸出的清晰我們可以將設備的高度設定為2160

此場景下公式為：15/4=X/2160     X=8100    那么可以大概得出寬度大概為8100像素（只是我們通過計算大概得出來的）

可能二：屏幕支持2K輸出

此場景下公式為：15/4=X/1080     X=4050  

重點來了，不要以為這樣就結束了，我一直強調的可視化設計師為什么一定要在現場，為的就是方便各種測試。剛才我們只是通過計算得出的大概數值，此時我們可以在紙上畫一個正方形，并投到設備上，如圖。

• 結果一：如果正方形比例不變，設計尺寸無限接近于大屏實際比例；

• 結果二：如果正方形比例被拉伸，設計尺寸小于大屏實際尺寸；

• 結果三：如果正方形比例被壓縮，設計尺寸大于大屏實際尺寸。

此處圖片上主要是為了測試計算出來的分辨率究竟是拉伸還是被壓縮了，通過這樣的方式去測試設備大概的分辨率的大小比例，在我們產出效果圖之后，也可以投射設計圖的方式看看屏幕是否是完美適配，這種方法可以在未開發之前，盡可能確定屏幕對設計圖的影響，從而避免對開發造成大規模修改。

注意：這樣做也只是在不知道設備分辨率的情況下，去大概計算設備分辨率，僅供參考！

電腦直接投屏

使用場景：會議室，展廳等

等比例投屏，投屏電腦投到2*2大屏（4K）

投屏電腦支持輸出4K分辨率，投屏電腦分辨率以3840*2160作為設計，投到4K拼接屏上，大屏會完美展示，并且畫面非常清晰。

投屏電腦支持輸出2K分辨率，投屏電腦分辨率以1920*1080作為設計，投到4K拼接屏上，只會以1920*1080進行輸出，因為輸出像素只能支持2K，也只是1920*1080的放大。

此處需要了解兩個概念：輸出像素和顯示像素，輸出像素指的的是投屏電腦的最大支持分辨率，顯示像素就是我們大屏的支持的最大分辨率。

我們實際項目中最好以顯示像素的尺寸進行設計（就是以大屏尺寸為主），但是也要看輸出設備的像素大小。

硬件投屏本地運行

使用場景：科技展廳，以及一些帶主機的設備。

此種情況，一般我們的大屏會自帶主機，大屏本身就可以看成一個顯示器非常大的電腦。我們如果需要進行可視化演示，那么我們直接就可以通過顯示器的尺寸去做設計，這樣就是大屏的設計尺寸。

一般這種靠硬件的投射，都是在拼接處理器的處理下，將多個屏幕拼合成一個大的顯示器，再通過拼控系統（硬件投屏）進行輸出。

一般我們可以將我們大屏的（UE4或者U3D開發）應用程序打包，打包成一個后綴為.exe的應用程序，在大屏電腦上直接點擊，程序就可以在大屏上完美的跑起來，也不需要去進行電腦投射大屏。

控制端操控大屏

如果通過控制端去控制大屏，那么投射設備就可以通過多種方式去展示了，可以是手機，平板，觸摸屏，手勢控制，體感控制等等。

這種情況下投射設備的尺寸就按照本身設備的規范去設計就可以了（比如750*1334，2048*1536），設計尺寸就是我們大屏本身的分辨率就可以了。

多主機多信號投屏

此種情況主要使用場景：屏幕寬度非常高，并且內容可以分很多模塊展示，模塊彼此之間不受影響獨立展示，這種情況下我們就可以通過此種方式去投屏。

通過多個主機分別去投射大屏的同等大小區域，比如圖中的場景模塊被我分成了四等份，我們就可以通過四臺主機去分別投射四個模塊，形成一個完整的大屏。

此種大屏設計尺寸我們以輸出設備的尺寸為主要參考，四臺主機那么整體寬度就是1920*4=7680，高度就是1080（如果設備支持4k輸出，那么提升相應的設備尺寸*2就可以了）。

不同比例投屏及解決方案

Q：如果遇到一個設備是16:9，投屏到一個20:3比例的大屏幕， 那我設計尺寸以16:9，還是20:3？

A：我們要記住，如果面對的是正常比例投屏到非等比的大屏，我們需要遵守的規范一定是：一切以大屏展示為主。所以我們設計尺寸一定是按照20:3來設計的，大屏展示正常才是我們的唯一標準，投屏電腦可能會出現的問題，我們只能妥協（投屏電腦可能只能展示很小的一部分，但也是沒有辦法的）

那么我們遇到這種是否就沒有辦法了呢？在這阿勇給大家提供了三種解決辦法，在實際工作中，我也遇到過這種問題，所以在這給大家分享一下。

方案一：外接顯示器（外接多個顯示器，一般主機可以另外外接四個顯示器，這樣就可以解決投屏電腦顯示不全的問題了）

方案二：采用拼控系統，而不是用純粹的設備投屏（拼控系統完美解決了尺寸不一致的難點）

方案三：設計兩稿，16:9，20:3我們都去做設計（做兩套系統，相當于做的適配）

Q：請教大家一個問題，電腦的分辨率是3840*2160，單個大屏的分辨率是1920*1080，拼9*6的大屏，設計尺寸該設置多少?。窟@樣設計尺寸會不會太大了，如何優化這個設計稿尺寸？

A：前面的文章我們已經介紹過拼接屏的尺寸的問題，這個問題的解答：1920*9/1080*6 ，這個就是設計分辨率，通過計算得出，最終設計稿尺寸為17280*6480?？梢钥闯鲈O計分辨率確實太大了，設計的時候如何去優化設計尺寸呢？

通過命題我們可以看出電腦分辨率是支持4K的，就是說輸出分辨率和顯示分辨率我們都是可以上4K的，而4K的分辨率一般會做3840*2160，再結合設計稿尺寸17280*6480，可以將整個效果圖尺寸縮小三倍，也就5760*2160。設計可以按照這個分辨率去出圖，最終交付給開發的就是切三倍圖，并提示開發是縮小三倍做的。

總結：不管在面對什么尺寸的設計，都要記住，萬變不離其中，一切以大屏完美展示為準則，所有的一切都是要在大屏上觀看，為了完美展示，投屏電腦，設備控制等頁面可以適當的讓步。

全篇知識點

通過以上的知識點總結，不知道大家對于數據可視化大屏設計是否有了新的認識，數據可視化對于設備的尺寸，設備的信息，以及投屏注意事項，都要有更多的了解才可以。下圖就是總結本篇文章的知識點。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

念起

作為一名UI設計師，不免每天都會和色彩打交道，但有時總會苦惱于色感把握不準，讓我們配的色彩，總是“不對味兒”。我結合在近期的一些項目中對于HSB色彩模式的應用，與大家分享一些結合HSB（HSV）色彩模式幫助我們進行配色的理論和技巧。也歡迎大家一起討論，共同進步。

色彩模式有哪些？

我們生活中借助觀看而感覺到的“色彩”，可分為光加上顏色之后所透出的“透出色”，以及光照射到物體上反射出的“反射色”。

透過色是以“加色混合”的方式，由紅、綠、藍，共三色混合，表現出各種的顏色，我們的計算機屏幕就使用這種方式表現顏色。這種色彩表現方式，稱為RGB色彩。

▲圖1 《設計入門教室-色彩設計的原理》

物體色彩的反射色，是用畫具或染料、油墨等“色材”來表現顏色，印刷品基本是由青、洋紅、黃、黑四種油墨相互組合而成，所有的顏色皆以“減色混合”的方式表現，這種方式稱為CMYK色彩。

RGB和CMYK兩大色彩模式是最重要和最基礎的。RGB更是與我們的工作密不可分。可是，在實際工作中我們往往很少直接通過RGB模式進行調色。

簡單聊聊HSB色彩模式

1.HSB是什么？

「這是什么顏色？鮮不鮮艷？很亮還是很暗？」當我們看到一個顏色時，往往心中都會閃現這三個問題。

事實上，人類對于色彩的第一個感知往往是從色相（Hue）開始，即紅色橙黃色綠色青色藍色紫中的一個，然后是它的深淺度。

HSB模式對應的媒介是人眼，在選擇色彩這件事上，HSB使用了更貼近人類感官直覺的方式來描述色彩，它把顏色分為色相、飽和度、明度三個因素（將我們人腦的“深淺”概念擴展為飽和度和明度）。

H—色相/色調：顏色的相貌，顏色的調性，在標準色輪上，色相是按位置度量的，取值在0—360度之間（黑色與白色無色相）。

▲圖2 網絡圖片-圓形色相環

S—表示飽和度/純度：顏色的純度，取值在0—100之間，飽和度高色彩較艷麗。飽和度低色彩就接近灰色。

B—表示明度/亮度：顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。

工作中，我們常用的設計軟件ps、 Sketch都是通過拾色器幫助我們選擇需要的顏色。

▲圖3 軟件拾色器截圖

HSB模式，可以完美固定HSB中的某一個參數，只對其他兩個參數做改變或者只改動其中的一個參數，這一點，完全符合人的色彩直覺，也只有HSB能做到，而RGB、CMYK都是牽一發動全身的節奏。

通過HSB模式，我們可以在已有顏色的基礎上，進行飽和度、明度的微調。以及選定主體色之后，根據需要，通過數值的加減改變色相，選取合適的顏色（互補色為180°、對比色為120°到150°、類似色為90°、鄰近色為60°、同位色為15°。）

2.在設計中如何運用HSB色彩模式

通過上述對HSB的原理、特點簡單介紹后，相信大家對其都有了基本的了解。以下我結合在工作中的幾個案例來說明HSB在設計中是如何實際應用。

舉個例子：如果我們在設計一個頁面時，除主色之外我們需要一個近似色，就可以運用HSB色彩模式。

通過圖片我們可以看出右側的顏色整體視覺效果感覺更加和諧、舒適。在界面設計中我們常會遇到以顏色對同一種類型的不同狀態進行區分，比如背景，按鈕等。

結合上述的例子，以及飽和度與明度的變化規律：

（在不改變色相的情況下）

HSB色彩模式在項目中的實際應用

1.爆款、預約詳情頁色卡庫

在去年的vivo游戲中心爆款、預約詳情頁的改版優化中，都運用了HSB色彩模式。使不同游戲可以根據頭部氛圍圖配置出3個相同色相值的近似色并運用到頁面中。保證色彩搭配有規律可行，并且展示效果在基準線之上。

系統統一從頭部氛圍圖吸取、確定顏色后，通過調整飽和度和明度值（色值不變），即可得到一套色卡。

▲圖4 vivo游戲中心預約詳情頁設計規范

2.聯運深色模式中的應用

在雙系統的深色模式適配要點中有提到“高飽和的顏色在深色的背景下容易產生視覺抖動，從而導致人眼疲勞”，在深色模式下我們應當選擇更淺的顏色以達到更好的可讀性。

我通過結合Material Design以及Developer深色模式適配規范中的色彩示例來簡單說明，怎樣借助HSB，來達到深色模式色彩科學合理的適配。

▲圖5 Material Design深色模式適配規范

▲圖6 Developer深色模式適配規范

通過對兩種規范的學習以及對比，可以看出Material Design的規范相對而言更加直觀和系統（手把手教你），Developer的適配則比較微妙（只可意會），沒有明確的說明方法或者規律。但Developer示例中的適配則更加注重視覺表達以及色彩的一致性，帶給人的視覺感受更加的舒適和諧。       

重點分析Developer深色適配中的配色示例中，通過將Developer給出的深色模式適配示例的色值轉換為HSB之后，發現其HSB的數值變化是有一定規律的，規律基本符合：

BUT：

在根據Developer的深色模式顏色適配的示例總結其規律的過程中，對于數值的變化，產生了一些疑惑：

直到了解到：「每個顏色都有其專屬的“感知明度”，也就是亮度」

將色相環“去色”后，可以明顯看出：

每一種顏色（色相），都有著獨特的“感知明度”，在S、B相同的情況下，黃，青，洋紅的顏色會讓人感覺比較亮，結合這點再結合Developer深色模式的適配示例以及得到的基礎規律后。可以得出：

將上述我們所得的“HSB配色一般規律”運用在vivo游戲中心聯運深色模式主色的推導，以及vivo游戲中心爆款詳情頁自動吸色系統優化中，使得頁面的閱讀體驗更加良好，整體配色和諧舒適。

▲圖7 vivo游戲中心、聯運游戲爆款詳情頁

寫在最后的話

HSB在設計工作中的應用當然不止上面講的這些，比如我們經常碰到的頁面中為了區分不同層級的文字，會給予文字不同灰度的顏色（最常見的#000000、#333333、#666666、#999999）也是應用了HSB模式，當我們所要區分的層級多于四種時，就不需要在色板里糾結了，只要按照上述的規律，以不同明度的變化就可以了。

在我尋找資料的過程中，也看到很多通過色相，飽和度，明度的一致或者對比等方式得到協調優秀配色的方法。這些都可以通過方法和HSB模式的結合，快速方便準確幫我們找到合適的顏色。

▲圖8 網絡圖片-色相環配色圖

在日常設計中，可以通過個人對色彩的感知與把握選取一個顏色，再通過HSB快速的選擇相應的色板，運用在頁面配色中。到這里關于HSB色彩模式在設計中的應用就全部介紹完成了，如果你閱讀完也有所收獲，不要忘了點贊喲~

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務