隨著用戶對界面設(shè)計(jì)要求的提高，暗色模式以其減少視覺疲勞和增強(qiáng)內(nèi)容可讀性的優(yōu)勢，在UI設(shè)計(jì)中越來越受歡迎。它不僅為用戶帶來了全新的視覺體驗(yàn)，也為設(shè)計(jì)師提供了創(chuàng)新的空間。
? ? 未來，暗色模式有望成為更多應(yīng)用和系統(tǒng)的標(biāo)準(zhǔn)配置，設(shè)計(jì)師們將更加重視其創(chuàng)新和優(yōu)化，以提供更優(yōu)質(zhì)的用戶體驗(yàn)。我們應(yīng)緊跟這一趨勢，探索新的色彩搭配和布局，滿足用戶的需求和偏好。
? ? 總之，暗色模式在UI設(shè)計(jì)中的應(yīng)用和優(yōu)勢已經(jīng)得到了廣泛的認(rèn)可。作為設(shè)計(jì)師，我們應(yīng)該把握這一趨勢，不斷提升自己的設(shè)計(jì)能力，為用戶創(chuàng)造更加美好的數(shù)字生活。
將現(xiàn)實(shí)中習(xí)以為常的物品轉(zhuǎn)化為卡片，通過不斷的優(yōu)化和改進(jìn)，保持良好的顯示效果和可用性，能更好地和用戶產(chǎn)生共情。
在快速發(fā)展的數(shù)字醫(yī)療時(shí)代，UI設(shè)計(jì)不僅是提升用戶體驗(yàn)的關(guān)鍵，更是確保醫(yī)療服務(wù)高效、安全、人性化的重要因素。醫(yī)療行業(yè)軟件的UI設(shè)計(jì)，作為醫(yī)患交互的橋梁，其設(shè)計(jì)內(nèi)容涵蓋了多個(gè)方面，旨在為用戶提供直觀、便捷、可靠的操作環(huán)境。以下將詳細(xì)探討醫(yī)療行業(yè)軟件UI設(shè)計(jì)的主要內(nèi)容。
在數(shù)字化產(chǎn)品的海洋中，優(yōu)秀的用戶體驗(yàn)是產(chǎn)品脫穎而出的關(guān)鍵。而UI設(shè)計(jì)作為用戶體驗(yàn)的直接體現(xiàn)，其設(shè)計(jì)技巧對于提升整體體驗(yàn)至關(guān)重要。以下將探討幾種有效提升用戶體驗(yàn)的UI設(shè)計(jì)技巧。
在數(shù)字化時(shí)代，UI設(shè)計(jì)作為連接用戶與產(chǎn)品的橋梁，其效果的好壞直接影響著用戶的體驗(yàn)與產(chǎn)品的成功與否。提高UI設(shè)計(jì)效果，不僅是美學(xué)上的追求，更是功能性與用戶體驗(yàn)的深度融合。以下將從幾個(gè)關(guān)鍵方面探討如何有效提升UI設(shè)計(jì)效果。
UI設(shè)計(jì)，即用戶界面設(shè)計(jì)，是現(xiàn)代數(shù)字化時(shí)代不可或缺的一部分。它廣泛應(yīng)用于各個(gè)行業(yè)和領(lǐng)域，旨在提升用戶體驗(yàn)，使產(chǎn)品更加直觀、易用且吸引人。以下將詳細(xì)探討UI設(shè)計(jì)在不同領(lǐng)域的應(yīng)用。
在數(shù)字化時(shí)代，UI設(shè)計(jì)與Web前端是構(gòu)建互聯(lián)網(wǎng)產(chǎn)品不可或缺的兩個(gè)關(guān)鍵環(huán)節(jié)。它們之間既相互獨(dú)立，又緊密相連，共同為用戶提供卓越的數(shù)字體驗(yàn)。本文將從多個(gè)維度探討UI設(shè)計(jì)與Web前端之間的關(guān)系。
在數(shù)字時(shí)代，設(shè)計(jì)領(lǐng)域日新月異，UI設(shè)計(jì)和平面設(shè)計(jì)作為其中的兩大分支，各自扮演著舉足輕重的角色。盡管它們都屬于設(shè)計(jì)的范疇，但兩者在理念、應(yīng)用、技能需求及工作環(huán)境等方面存在著顯著的差異。本文將從多個(gè)維度深入探討UI設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別。
一、設(shè)計(jì)理念與應(yīng)用領(lǐng)域的不同
平面設(shè)計(jì)，也被稱為視覺傳達(dá)設(shè)計(jì)，其核心在于通過視覺元素（如符號、圖片、文字等）的組合與呈現(xiàn)，傳達(dá)特定的信息或情感。它廣泛應(yīng)用于廣告、出版、包裝、品牌標(biāo)識等領(lǐng)域，強(qiáng)調(diào)的是視覺上的美感和信息的有效傳達(dá)。平面設(shè)計(jì)作品如海報(bào)、名片、雜志封面等，多以紙張或其他實(shí)體媒介為載體。
而UI設(shè)計(jì)，即用戶界面設(shè)計(jì)，則專注于軟件或應(yīng)用的人機(jī)交互設(shè)計(jì)。它不僅關(guān)注界面的美觀性，更強(qiáng)調(diào)用戶在使用過程中的操作邏輯、易用性和舒適度。UI設(shè)計(jì)涵蓋了界面布局、圖標(biāo)設(shè)計(jì)、色彩搭配、交互反饋等多個(gè)方面，目的是提升用戶的使用體驗(yàn)。其設(shè)計(jì)成果主要體現(xiàn)在手機(jī)APP、網(wǎng)頁、軟件界面等虛擬環(huán)境中。
二、技能需求與工作流程的差異
平面設(shè)計(jì)主要依賴于設(shè)計(jì)師的美術(shù)功底和視覺創(chuàng)意能力。設(shè)計(jì)師需要熟練掌握Photoshop、Illustrator等設(shè)計(jì)軟件，通過手繪、排版、色彩搭配等技巧，將創(chuàng)意轉(zhuǎn)化為視覺作品。平面設(shè)計(jì)的工作流程相對獨(dú)立，一個(gè)設(shè)計(jì)師往往可以獨(dú)立完成從創(chuàng)意構(gòu)思到成品輸出的全過程。
相比之下，UI設(shè)計(jì)則更加復(fù)雜和多元化。它不僅要求設(shè)計(jì)師具備扎實(shí)的美術(shù)基礎(chǔ)，還需要深入理解人機(jī)交互原理、用戶體驗(yàn)設(shè)計(jì)原則等。UI設(shè)計(jì)往往需要團(tuán)隊(duì)成員的緊密合作，包括產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師和程序員等。在設(shè)計(jì)過程中，UI設(shè)計(jì)師需要與各方緊密溝通，確保設(shè)計(jì)方案的可行性和用戶體驗(yàn)的最優(yōu)化。
三、設(shè)計(jì)重點(diǎn)與評估標(biāo)準(zhǔn)的區(qū)別
平面設(shè)計(jì)側(cè)重于視覺表現(xiàn)力和信息的有效傳達(dá)。設(shè)計(jì)師需要通過巧妙的構(gòu)圖、色彩搭配和字體選擇，吸引觀眾的注意力并傳達(dá)出設(shè)計(jì)背后的意圖。平面設(shè)計(jì)的評估標(biāo)準(zhǔn)往往包括視覺美感、信息傳達(dá)的準(zhǔn)確性和創(chuàng)意性等。
UI設(shè)計(jì)則更加注重用戶的使用體驗(yàn)和操作邏輯。設(shè)計(jì)師需要確保界面布局合理、操作流暢、反饋及時(shí)，以提升用戶的滿意度和忠誠度。UI設(shè)計(jì)的評估標(biāo)準(zhǔn)不僅包括界面的美觀性，更強(qiáng)調(diào)用戶體驗(yàn)的舒適度、易用性和滿意度。
四、工作環(huán)境與發(fā)展趨勢的不同
平面設(shè)計(jì)師的工作多在傳統(tǒng)企業(yè)或廣告公司進(jìn)行，他們面對的主要是實(shí)體媒介的設(shè)計(jì)需求。隨著數(shù)字媒體的興起，平面設(shè)計(jì)也在逐漸融入數(shù)字化趨勢，但傳統(tǒng)的設(shè)計(jì)理念和技能仍然占據(jù)重要地位。
而UI設(shè)計(jì)師則更多地活躍在互聯(lián)網(wǎng)企業(yè)，他們的工作與軟件、應(yīng)用等數(shù)字化產(chǎn)品緊密相連。隨著移動互聯(lián)網(wǎng)和人工智能技術(shù)的快速發(fā)展，UI設(shè)計(jì)的需求不斷增長，對設(shè)計(jì)師的技能要求也越來越高。未來，UI設(shè)計(jì)將更加注重跨平臺設(shè)計(jì)、智能化交互和個(gè)性化定制等方面的創(chuàng)新。
綜上所述，UI設(shè)計(jì)與平面設(shè)計(jì)在設(shè)計(jì)理念、應(yīng)用領(lǐng)域、技能需求、工作流程、設(shè)計(jì)重點(diǎn)和評估標(biāo)準(zhǔn)等方面存在顯著的差異。了解這些差異有助于我們更好地理解兩種設(shè)計(jì)的本質(zhì)和特點(diǎn)，為未來的設(shè)計(jì)實(shí)踐提供有益的參考。
- 00.基礎(chǔ)原則
- 01.控件尺寸
一、官方規(guī)范
對于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們元素的大小和怎么設(shè)置，只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個(gè)問題，因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜，比如我們之前翻譯過的 iOS 規(guī)范。
超人的電話亭獨(dú)家譯制 iOS 系統(tǒng)規(guī)范
規(guī)范鏈接：https://pan.baidu.com/share/init?surl=j0dtln14kKdUEfp19jewKQ
密碼：vpkj
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方并不會提供一個(gè)列表，逐一羅列每個(gè)元素的長寬和其它參數(shù)，所以想要弄明白參數(shù)的問題，要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側(cè)這個(gè)按鈕，我們就能看見它的各項(xiàng)屬性：寬 359pt、高 57pt、圓角 14pt；右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因?yàn)?iOS 組件庫下載下來的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設(shè)計(jì)出符合官方規(guī)范的界面，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件所包含的元素及字體已經(jīng)非常多了，在實(shí)際設(shè)計(jì)過程中，還是會出現(xiàn)它們無法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應(yīng)用，官方源文件使用的語言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場景下，我們是不可能照搬這種規(guī)范的！
所以每一個(gè)學(xué)習(xí)UI設(shè)計(jì)的新手，都必須要明白，官方的規(guī)范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無法設(shè)計(jì)出有趣個(gè)性化的界面的，比如下面這幾款已經(jīng)看不到 “ iOS 設(shè)計(jì) ”的應(yīng)用。
官方的參數(shù)決定我們設(shè)計(jì)的下限，當(dāng)你不知道該怎么做，或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺為準(zhǔn)，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設(shè)置原則
UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報(bào)或畫冊，使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個(gè)元素的長寬高的數(shù)值。而 UI 的設(shè)計(jì)中，無論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長寬高，如下圖設(shè)計(jì)一個(gè)按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設(shè)置的對話框中去輸入精確到1pt的數(shù)值。
這么做是因?yàn)樵陔娮悠聊恢?，圖像的呈現(xiàn)是由屏幕中的像素點(diǎn)來完成的，像素點(diǎn)是最小的顯示單位，一個(gè)像素只能顯示一個(gè)顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個(gè)元素的邊緣就會虛化。所以為了避免這種情況的出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識，我會在另外的文章里分享。
需要注意的是，文章中出現(xiàn)的所有尺寸數(shù)值的單位，默認(rèn)以 iOS 官方規(guī)定的邏輯像素單位「pt」為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫布的單位，若在 PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以 2。
只有分隔線，是唯一可以不使用整數(shù)的特例。因?yàn)?1pt 的分隔線看起來會非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(gè)列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。
無論是在 iOS 還是在 Android 的規(guī)范中，都提到過使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會反復(fù)強(qiáng)調(diào)對元素的尺寸使用 8 的倍數(shù)。
iOS: 使用 8px 網(wǎng)格系統(tǒng)：網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對齊到網(wǎng)格上，減少按比例縮小圖像時(shí)出現(xiàn)的半像素和內(nèi)容模糊的情況。
Android：所有組件都與間隔為 8dp 的基準(zhǔn)網(wǎng)格對齊。排版/文字與間隔為 4dp 的基準(zhǔn)網(wǎng)格對齊。在工具中的圖標(biāo)同樣與間隔為 4dp 的基準(zhǔn)網(wǎng)格對齊。
實(shí)際上，我們在真實(shí)的設(shè)計(jì)環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好處我會在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
使用整數(shù)，只有分隔線可以使用 0.5 的小數(shù)
使用 4 的倍數(shù)，根據(jù)實(shí)際情況可以切換成一般偶數(shù)。
有了這樣的原則，并養(yǎng)成習(xí)慣，我們就能在每次設(shè)計(jì)前對元素尺寸有個(gè)大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設(shè)計(jì)注冊登錄頁面的輸入框作為案例。
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點(diǎn)僵硬，太正式了！這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4x2)=52pt 。這時(shí)候又覺得太高了，實(shí)際輸入內(nèi)容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結(jié)果。
所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標(biāo)拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁控件等，更復(fù)雜的如動態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會根據(jù)前面定義的基礎(chǔ)原則，分別講解控件應(yīng)該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。
在進(jìn)入具體參數(shù)的講解前，要先理解一點(diǎn)，按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)。并不是因?yàn)樵谠O(shè)計(jì)樣式上復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖里，可以點(diǎn)擊的東西不少，我們只說外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個(gè)。而這里面，權(quán)重最高的必然是 “加入購物車”。權(quán)重最低的，則是前往新品頁。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個(gè)應(yīng)用中的權(quán)重。尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。
按鈕高度
當(dāng)我們設(shè)計(jì)按鈕時(shí)，優(yōu)先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：
- 高權(quán)重：40-56pt
- 中權(quán)重：24-40pt
- 底權(quán)重：12-24pt
高權(quán)重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它們的最小高度應(yīng)該從 40pt 開始遞增。低于這個(gè)數(shù)值，那么按鈕就很難在頁面中起到視覺支撐的作用，因?yàn)闀杏X到它太細(xì)了。
中權(quán)重的按鈕，類似個(gè)人主頁的關(guān)注、點(diǎn)贊、評論按鈕等。這個(gè)層級的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會對當(dāng)前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的長度。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內(nèi)容的距離過大，就會讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長度來設(shè)置按鈕的寬。左右間距的大小，應(yīng)該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個(gè)屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設(shè)置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳鋒利，這種圓角的數(shù)值要給得更加謹(jǐn)慎，只要超出了一定的范疇，就會對視覺的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。
所以，我們在設(shè)計(jì)圓角的過程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，小于等于高度的 1/4。例如，一個(gè) 24pt 的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt。
以上就是按鈕相關(guān)尺寸定義的說明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的高度，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來會非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。
三、步進(jìn)器 ( Steppers )
常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28pt 以后，就會發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。
步進(jìn)器中常見的錯(cuò)誤，是在我們在繪制左右兩個(gè)按鈕，設(shè)置外框的圓角時(shí)，并沒有合理的去掉內(nèi)側(cè)的圓角，這是絕對不應(yīng)該忽略的細(xì)節(jié)。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態(tài)，默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開后，下方多出來的選項(xiàng)菜單，就值得注意了。
菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)的高度，不大于默認(rèn)的選項(xiàng)框。但也不能過小，新手很容易在彈出菜單中設(shè)定過小的高度，使個(gè)控件看起來會非常的別扭。
五、開關(guān) ( Switches )
開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細(xì)節(jié)填入。
六、滑塊 ( Sliders )
滑塊形式接近開關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來表示區(qū)間的線條。實(shí)際上我們該做的就是分別決定它們的尺寸。
節(jié)點(diǎn)如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下方的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
七、頁面指示器 ( Page Controls )
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小?？梢灾粡暮竺嫣峁┑某叽缰羞x擇，就能保證指示器的尺寸不會出錯(cuò)。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點(diǎn) ( Badges )
提示紅點(diǎn)也是大多數(shù)應(yīng)用會使用的一個(gè)控件，它的大小應(yīng)該在 24-32 pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來表現(xiàn)，即畫一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。
因?yàn)橄嗤痔栂?，不同英文、?shù)字的寬度都是不一樣的，所以我們要根據(jù)實(shí)際輸入的字段長度去決定圓角矩形的寬度。
九、分頁控件 ( Tabs )
后一個(gè)控件，就是分頁控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響。較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權(quán)重：40-48pt
- 低權(quán)重：28-36pt
分頁控件主要應(yīng)用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時(shí)候分頁器沒有背景色，但是背景的矩形框是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個(gè)完整的分頁控件，里面會包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt以上，才不會顯得過度擁擠。
分頁控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個(gè)元素如果定義得不好，會讓整個(gè)控件看起來非常粗糙，它需要在樣式中能起到畫龍點(diǎn)睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都不應(yīng)該大于 2pt。寬度的話，前者和每個(gè)選項(xiàng)背景區(qū)域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計(jì)效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實(shí)應(yīng)用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計(jì)稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會被設(shè)計(jì)得很奇怪。當(dāng)設(shè)計(jì)師沒有對于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí)，就先學(xué)會正確的使用上面的這些參數(shù)吧。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
近年來，互聯(lián)網(wǎng)進(jìn)入下半場，C 端流量紅利逐漸消退，很多企業(yè)轉(zhuǎn)向了 B 端服務(wù)，隨之而來的是產(chǎn)品設(shè)計(jì)者的轉(zhuǎn)型，現(xiàn)在越來越多的 C 端產(chǎn)品設(shè)計(jì)師開始涉足到 B 端產(chǎn)品的設(shè)計(jì)，這是一個(gè)知識遷移的過程，需要認(rèn)識到這 2 類產(chǎn)品的特點(diǎn)和區(qū)別，你才能夠快速適應(yīng)這個(gè)遷移的過程。
在互聯(lián)網(wǎng)和信息化高度發(fā)達(dá)的今天，我們都是 B 端和 C 端產(chǎn)品的用戶，能切身體會到產(chǎn)品的好壞，那么兩個(gè)完全不同類別的產(chǎn)品放在一起時(shí)，會有什么新發(fā)現(xiàn)呢？今天想通過自己的設(shè)計(jì)歷程，來梳理這 2 種產(chǎn)品的區(qū)別和價(jià)值。
C 全稱是 Customer，即消費(fèi)者（泛指用戶）的產(chǎn)品，個(gè)人用戶或終端用戶，使用的是客戶端。例如：微信、網(wǎng)易新聞、網(wǎng)易云音樂、有道翻譯官、網(wǎng)易考拉等等。
B 全稱是 Business，即商家（泛指企業(yè)）的產(chǎn)品，通常是企業(yè)或商家，為工作或商業(yè)目的而使用的系統(tǒng)型軟件、工具或平臺。例如：京東云、阿里云、網(wǎng)易云、網(wǎng)易有數(shù)或企業(yè)內(nèi)部的 ERP 系統(tǒng)等等。
1. 都要給人使用
小到打車、外賣和購物軟件，大到邏輯復(fù)雜連產(chǎn)品經(jīng)理有時(shí)候都犯糊涂的企業(yè)級業(yè)務(wù)系統(tǒng)，無論個(gè)人用戶，還是企業(yè)用戶，本質(zhì)都是由人來使用，只不過產(chǎn)品類型不同。
2. 都要兼顧用戶體驗(yàn)和業(yè)務(wù)之間的平衡
既然是給人來使用的產(chǎn)品，就要兼顧用戶體驗(yàn)和業(yè)務(wù)之間的平衡。無論是 C 端或 B 端，誰都不愿意使用一個(gè)不好用且耽誤效率的產(chǎn)品，當(dāng)然還是會有一些用戶體驗(yàn)較差，用戶又不得不使用的產(chǎn)品存在，因?yàn)樗赡芫哂幸欢ǖ膲艛嘈再|(zhì)，或者在某些場景下被強(qiáng)迫使用，用戶本身是別無選擇的。但不能說用戶體驗(yàn)就不重要，只能說對于業(yè)務(wù)更復(fù)雜、為工作而生的 B 端產(chǎn)品來說，想要做好這一點(diǎn)會比 C 端更困難。
3. 都要堅(jiān)守做產(chǎn)品設(shè)計(jì)的核心思想
對于每一個(gè)產(chǎn)品設(shè)計(jì)者來說，「在什么場景下為怎樣的用戶（客戶）采取什么方法解決哪些問題」，這句話是再熟悉不過了，也是經(jīng)常討論或掛在嘴邊的話?？墒敲鎸ぷ髦蟹鋼矶?、突如其來的事情時(shí)，卻又常常容易忽略掉。就像是一個(gè)人如果太餓了，只顧著吃飯?zhí)铒柖亲?，卻忘記了吃了什么。
首先，我們明確一下 C 端產(chǎn)品和 B 端產(chǎn)品的用戶是誰，產(chǎn)品給哪些人用？
C端
產(chǎn)品是面向個(gè)人用戶，服務(wù)于每個(gè)脫離「企業(yè)」場景之外的人，也就是生活場景。他需要做更細(xì)致的用戶畫像，比如：用戶的年齡、職業(yè)、文化程度、收入水平、工作單位、個(gè)人喜好等都會影響到功能設(shè)計(jì)，每個(gè)人都可以對產(chǎn)品提出優(yōu)化意見，這個(gè)意見只代表個(gè)人，而不是任何社會群體，但這些意見只要被產(chǎn)品經(jīng)理驗(yàn)證是可以提升產(chǎn)品價(jià)值的，就可能會排進(jìn)迭代周期內(nèi)。
相對來說，C 端產(chǎn)品不管從服務(wù)范圍、滲透力、密度都遠(yuǎn)遠(yuǎn)超過 B 端，原因是因?yàn)樗嫦虻挠脩羧后w更廣泛，用一個(gè)核心功能解決大多數(shù)人的一個(gè)主要訴求，我們每個(gè)人隨時(shí)隨地都可以成為 C 端用戶，可選用的產(chǎn)品也非常多，產(chǎn)品團(tuán)隊(duì)更多的思考是讓我們更長時(shí)間的停留在產(chǎn)品上面，讓用戶有更高的粘性和活躍度，需要利用產(chǎn)品的特色功能和優(yōu)質(zhì)體驗(yàn)來吸引我們，并解決我們在生活便利和情緒方面的問題，讓我們享受這些服務(wù)并為此買單。
B端
產(chǎn)品則是服務(wù)于企業(yè)用戶，這個(gè)「企業(yè)」可以是一個(gè)組織、商家、團(tuán)隊(duì)，是某種經(jīng)營的主體，當(dāng)然使用者也是個(gè)人，不過這個(gè)「個(gè)人」是代表了組織中的某個(gè)角色而已。這類人無論性別、年齡、地區(qū)有何差異，他們都是一類角色，比如企業(yè)中的項(xiàng)目總監(jiān)、項(xiàng)目經(jīng)理、項(xiàng)目顧問，我們的產(chǎn)品要提供給這類角色使用，而不是某個(gè)人使用。假設(shè)我們做一個(gè)項(xiàng)目管理系統(tǒng)，主要提供給項(xiàng)目經(jīng)理使用，張三和李四都是產(chǎn)品的用戶，也許張三在工作之外是個(gè)活潑少女，喜歡刷短視頻、購物、旅游，被簡約的界面風(fēng)格所折服；李四卻是個(gè)內(nèi)向宅男，喜歡宅在家里打游戲、看書，喜歡炫酷的界面風(fēng)格，但他們的個(gè)人喜好都無法影響系統(tǒng)功能的設(shè)計(jì)。這里說的功能設(shè)計(jì)的主要依據(jù)就是企業(yè)對項(xiàng)目經(jīng)理這個(gè)角色的業(yè)務(wù)定位和考核目標(biāo)，他們共同的角色都是項(xiàng)目經(jīng)理，所以系統(tǒng)只需要提供項(xiàng)目經(jīng)理相應(yīng)的功能和體驗(yàn)即可。
所以功能設(shè)計(jì)需要是多個(gè)業(yè)務(wù)功能滿足特定人群的多個(gè)需求、多個(gè)場景，他所面對的用戶具有特定的職業(yè)屬性，也就是說他的用戶只會在「工作」的場景下使用他，有些還是強(qiáng)制使用，個(gè)人沒有選擇余地，因?yàn)楦顿M(fèi)者是企業(yè)領(lǐng)導(dǎo)，而不是基層員工，而使用最多的反而是基層員工，所以 B 端產(chǎn)品的用戶關(guān)系會比 C 端更集中、更垂直，做功能設(shè)計(jì)時(shí)，要權(quán)衡付費(fèi)者和使用者之間的利弊，他們要求產(chǎn)品的時(shí)效性，注重如何滿足企業(yè)用戶的既定目標(biāo)。
C端
它會存在于生活中的各種場景下，而且自由度非常高，當(dāng)然也包含工作場景，比如我在坐地鐵時(shí)刷一下朋友圈、在睡前打開網(wǎng)易云聽歌、在工作間隙上點(diǎn)了一份外賣、周末變身肥宅吃了一天雞等等，所以 C 端產(chǎn)品的使用場景是碎片化的，用戶并不會連續(xù)幾個(gè)小時(shí)一直盯著同一個(gè) APP，而是在多個(gè)應(yīng)用之間隨意切換。比如落地成盒了會打開微信回復(fù)消息，歌聽乏了去看看電子書等等，所以我們看到一些比較優(yōu)秀的產(chǎn)品，他們都在內(nèi)容和用戶體驗(yàn)上下足了功夫，目的就是為了留存用戶，減少跳出率。因此 C 端產(chǎn)品更講究操作直接，信息簡潔，有娛樂性、社交性、可傾訴性，是為了解決生活上的問題而生，寄生于我們的情緒之中，被產(chǎn)品的情感化設(shè)計(jì)所折服。
B端
與 C 端正好相反，他們是為了工作而使用這個(gè)產(chǎn)品，因此他們必然要長時(shí)間使用產(chǎn)品，而且是沉浸式使用，同時(shí)使用頻率是可預(yù)測的，他們并不能帶著個(gè)人喜好去使用，不能說這個(gè)產(chǎn)品太難用了，我就可以不用了。比如上下班打卡，公司要求用 A 產(chǎn)品，你覺得不好用，就推薦大家使用 B 產(chǎn)品，對不起，雖然你是產(chǎn)品真正的使用者，但決策權(quán)和付費(fèi)者是高層領(lǐng)導(dǎo)。個(gè)人的情緒左右不了使用場景。所以 B 端產(chǎn)品更講究嚴(yán)謹(jǐn)?shù)牧鞒淘O(shè)計(jì)、貼近現(xiàn)實(shí)的場景面積、低風(fēng)險(xiǎn)、高效率、數(shù)據(jù)精準(zhǔn)。它是為了解決工作上的問題而生，寄生于企業(yè)制度之中，被產(chǎn)品的用戶體驗(yàn)影響著工作效率。
C端
滿足自我情緒。
比如社交類產(chǎn)品就是構(gòu)建「聊天」方式，這個(gè)聊天可以是語音、文字、圖片、分享等形式，解決個(gè)人在情感、空間、工作、虛榮、欲望等情緒問題。在核心功能之外還可以附加一些「增值功能」，比如設(shè)置好友查看權(quán)限、購買 VIP 等，這都是為了提高產(chǎn)品的使用價(jià)值和盈利口徑。
因此 C 端產(chǎn)品通常只有一個(gè)核心功能（比如音樂類 app 的核心功能就是聽音樂，閱讀類 app 的核心功能就是閱讀，游戲類 app 的核心功能就是游戲），多個(gè)輔助功能，核心功能影響著產(chǎn)品的特色、定位、調(diào)性，而合理的輔助功能則會讓產(chǎn)品保值增值、增強(qiáng)產(chǎn)品與產(chǎn)品之間的差異化，如果去除這些附加功能，產(chǎn)品的體驗(yàn)會受到一定影響，但實(shí)際上并不會阻礙用戶使用核心功能。例如：去除了評論功能，但用戶依舊可以聽音樂；去除了打賞功能，同樣也不影響用戶閱讀文章和作者寫文章；去除了分享，用戶還是可以愉快地吃雞。
所以 C 端產(chǎn)品的特性可以歸納為「分享」，前面所提到的「評論」、「打賞」其實(shí)都基于「分享」的場景下，即：讓他人聽見「我」的聲音、看見「我」的想法、贊同「我」的觀點(diǎn)，滿足雙方的情緒設(shè)定。
盈利方式：內(nèi)容付費(fèi)、廣告付費(fèi)、平臺抽成、增值服務(wù)（VIP、卡券、權(quán)限等）。
B端
共同完成一個(gè)目標(biāo)。
日常使用產(chǎn)品工作的人，自己是無法獨(dú)立完成一個(gè)任務(wù)的，他需要和周圍的人協(xié)同完成一個(gè)任務(wù)流程的閉環(huán)，比如我發(fā)起一個(gè)請假申請，以「完成」和「打回」作為流程結(jié)點(diǎn)，根據(jù)企業(yè)制度設(shè)定，這個(gè)流程中會涉及到 3 種角色：發(fā)起人（我）、審核人（上級）、歸檔人（人事或行政）。
B 端產(chǎn)品的業(yè)務(wù)邏輯是復(fù)雜和多變的，尤其是權(quán)限系統(tǒng)，往往每個(gè)人都是流程中一個(gè)非常小的部分，就如上段所說，需要進(jìn)行協(xié)作使用，這里不能窮舉出每個(gè)業(yè)務(wù)，因?yàn)椴煌墓緲I(yè)務(wù)則完全不一樣，公司可以對該產(chǎn)品當(dāng)中的功能選擇性購買或租賃。而對實(shí)際用戶來說，這個(gè)產(chǎn)品沒有功能的層級，自己負(fù)責(zé)哪一塊，哪一塊就是他的主要任務(wù)、經(jīng)常使用的功能。也就是說，從功能架構(gòu)上看，這些核心功能都是扁平的，他們分配到各種使用角色的手中，沒有先后排名。
而 B 端產(chǎn)品的本質(zhì)則是滿足用戶的工作需要，但這從來不是單一的功能就可以滿足的，這里一定包括了多項(xiàng)功能的組合及嵌套應(yīng)用支持。當(dāng)用戶需要繪制多種不同類型的圖表時(shí)，產(chǎn)品就絕不能只提供單項(xiàng)類型的圖表功能。比如：甲公司的產(chǎn)品只能畫柱狀圖，而乙公司的產(chǎn)品卻能畫 10 種甚至更多不同類型的圖表，以適應(yīng)不同需求場景，若你是客戶，你會選擇購買哪個(gè)產(chǎn)品呢？
盈利方式：按功能模塊付費(fèi)、按使用人數(shù)付費(fèi)、需求付費(fèi)、后期維護(hù)費(fèi)用。
C端
更多滿足使用者的日常生活需求，所以需求來源會多樣化一些，因?yàn)槟康亩际抢?、促活、留存、轉(zhuǎn)化、裂變。像競品分析、數(shù)據(jù)分析、用戶行為分析都可能幫助挖掘出有價(jià)值的需求。我們也有很多時(shí)候因?yàn)榕笥言谟眠@個(gè)產(chǎn)品，或者看到產(chǎn)品的廣告才下載這個(gè)應(yīng)用，但下載以后用來干什么，那只有等我們有訴求的時(shí)候才會再次打開應(yīng)用，這個(gè)訴求可能是空虛、無聊、想購物了等等。所以很多普通用戶根本不知道自己的真實(shí)需求是什么，甚至有時(shí)陰差陽錯(cuò)打開某應(yīng)用，然后被里面的買家秀、活動促銷等運(yùn)營模塊所吸引，最后產(chǎn)生購買欲望。
因此，C 端產(chǎn)品就是站在上帝的視角，需求直接來源于用戶的行為和反饋，從用戶這里獲取最真實(shí)的訴求。產(chǎn)品設(shè)計(jì)者則需要關(guān)注市場流行趨勢，關(guān)注用戶偏好及意見，將有效的分析結(jié)果轉(zhuǎn)化為產(chǎn)品需求，再輸出功能，引導(dǎo)用戶產(chǎn)生共鳴，并通過一些運(yùn)營手段，增加轉(zhuǎn)化（變現(xiàn)）概率和裂變的輻射面積。
B端
B 端產(chǎn)品更多是基于已有的「業(yè)務(wù)」形態(tài)，把傳統(tǒng)線下工作，通過程序化、系統(tǒng)化、信息化轉(zhuǎn)換為線上行為，使業(yè)務(wù)的流轉(zhuǎn)效率更高，辦公成本更低。所以更要求產(chǎn)品設(shè)計(jì)者能熟練掌握相應(yīng)的行業(yè)知識、捋清業(yè)務(wù)邏輯。
需求一般來源于產(chǎn)品戰(zhàn)略定位、各部門對接、租戶（客戶、外部付費(fèi)者）的個(gè)性需求，有些靠銷售企業(yè)軟件盈利的公司為了把職責(zé)再細(xì)分，通常會配置指定的一線顧問來對接租戶的需求及跟進(jìn)服務(wù)，然后再將需求反饋到負(fù)責(zé)這個(gè)產(chǎn)品的產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理在這里就是負(fù)責(zé)收集需求、分析、規(guī)劃、設(shè)定開發(fā)優(yōu)先級，然后交由開發(fā)團(tuán)隊(duì)進(jìn)行接下來的產(chǎn)品設(shè)計(jì)等工作。
B 端產(chǎn)品的客戶可能不在網(wǎng)上，而是在全國各地的企業(yè)里，往往需要通過老板和銷售才能接觸到客戶，這會造成不能獲取真實(shí)的客戶需求，我把這種現(xiàn)象叫做「需求斷層」。所以最好的調(diào)研方式就是做一個(gè)「面對面」的用戶訪談，可以真實(shí)的面對面、也可以是視頻或者電話溝通，這能容易把復(fù)制的需求溝通清楚，而不是通過郵件和文字。因?yàn)槟繕?biāo)用戶有固定的職業(yè)領(lǐng)域，有時(shí)候你所設(shè)計(jì)的流程你認(rèn)為最合理，但和他們實(shí)際使用起來卻有很大的差異，所以和真實(shí)用戶面對面聊聊他們的工作習(xí)慣和業(yè)務(wù)規(guī)則，這一定能夠幫助到你設(shè)計(jì)產(chǎn)品。
很多時(shí)候，做的產(chǎn)品只是為了滿足付費(fèi)者（即高層領(lǐng)導(dǎo)）的需求，而不是實(shí)際用戶（即基層工作者），導(dǎo)致實(shí)際用戶吐槽產(chǎn)品易用性差，其實(shí)是改變了他們的工作習(xí)慣而引發(fā)的抱怨，然而領(lǐng)導(dǎo)卻達(dá)到了監(jiān)控和實(shí)時(shí)獲取數(shù)據(jù)的目的。因此在收集這些需求時(shí)，會受到來自付費(fèi)者和真實(shí)用戶 2 種角色聲音的影響，這就需要產(chǎn)品設(shè)計(jì)者具有更理性的思考方式和處理手段。
C端-流量思維
做 C 端產(chǎn)品設(shè)計(jì)，我們一切行為的出發(fā)點(diǎn)，都是流量，流量直接影響著變現(xiàn)，無論是外部的流量引入、各環(huán)節(jié)的轉(zhuǎn)化、留存策略，還是產(chǎn)品體驗(yàn)的提升、流程的優(yōu)化、資源的投入，我們都是在為提升流量、轉(zhuǎn)化流量服務(wù)。我們經(jīng)常做的各種活動專題、分析各類數(shù)據(jù)，去追求所謂的情懷、情感化設(shè)計(jì)，其根本還是為了引流，想方設(shè)法從全網(wǎng)獲取流量，從而來提升產(chǎn)品的轉(zhuǎn)化率，這是一切 C 端產(chǎn)品的宗旨，沒有流量的產(chǎn)品只是一個(gè)花瓶。
B端-效率思維
對于 B 端產(chǎn)品，我們更多關(guān)注的是效率，不管是面向外部客戶，還是服務(wù)于公司內(nèi)部各業(yè)務(wù)角色/部門，B 端產(chǎn)品要解決的始終都是如何提升企業(yè)的運(yùn)營效率（即工作效率），解決的是「開源節(jié)流」中的節(jié)流部分。所以我們會通過流程優(yōu)化、工具打磨、策略調(diào)整，去提升各個(gè)環(huán)節(jié)的人效，降低各方面成本，從根本上提升企業(yè)效率，這點(diǎn)從我們做流程設(shè)計(jì)的時(shí)候能清晰的反應(yīng)出來，設(shè)計(jì)目標(biāo)都是在合理且效率的基礎(chǔ)上，讓用戶舒適的完成這個(gè)流程，并不是說企業(yè)投入資金購買了一款數(shù)據(jù)統(tǒng)計(jì)軟件，結(jié)果數(shù)據(jù)統(tǒng)計(jì)還沒有人工來的精準(zhǔn)、方便。
C端
在 C 端產(chǎn)品設(shè)計(jì)的過程中，我們首先要明確核心功能是給哪些目標(biāo)用戶使用的，也就是我們最初的設(shè)計(jì)目標(biāo)是什么，需要保持產(chǎn)品的場景多樣化，突出核心功能，因?yàn)?C 端產(chǎn)品的同質(zhì)化現(xiàn)象非常嚴(yán)重，因此我們要好好思考，如何將我們的產(chǎn)品在眾多產(chǎn)品中脫穎而出，如何讓產(chǎn)品的品牌設(shè)計(jì)輻射到更多的地方，如何在功能和體驗(yàn)上尋找新的亮點(diǎn)。
再者就是要保持良好運(yùn)營手段，因?yàn)?C 端的用戶是自由的（忠誠度低，隨時(shí)可以換產(chǎn)品使用），所以需要通過一些運(yùn)營手段來綁定用戶的留存。C 端產(chǎn)品的本質(zhì)都是一個(gè)核心功能，所以設(shè)計(jì)師在產(chǎn)品初期時(shí)就需要全盤考慮，哪個(gè)功能是產(chǎn)品最核心、最不可丟棄的，哪個(gè)功能是錦上添花，為了提升產(chǎn)品的附加價(jià)值的。因此，我們拋開這些基本原則，還需要對用戶行為進(jìn)行塑造，塑造用戶行為就是「綁架」用戶。
把握關(guān)鍵時(shí)機(jī)：把握用戶在使用 C 端產(chǎn)品過程中注意力的關(guān)鍵時(shí)機(jī)，用戶在使用產(chǎn)品的過程中，注意力的分配是不均等的，比如同類產(chǎn)品太多，先下載 2、3 個(gè)試用，進(jìn)到產(chǎn)品里不知道干什么，隨便逛逛，逛著逛著就刪除 APP 了，這就是典型的沒有把握用戶關(guān)鍵時(shí)機(jī)，沒有提供給用戶有用的東西，敗在了產(chǎn)品策略和本能層次。沒有在第一時(shí)間讓用戶知道產(chǎn)品是干什么的？能從中得到什么？亮點(diǎn)內(nèi)容在哪里？是如何引導(dǎo)我使用的？那么作為產(chǎn)品的界面設(shè)計(jì)師就需要知道在哪些關(guān)鍵節(jié)點(diǎn)上，用戶的注意力是集中的，哪些節(jié)點(diǎn)是分散的，如何引導(dǎo)用戶關(guān)注這個(gè)點(diǎn)。
所以通過研究這些用戶在使用過程中的關(guān)鍵節(jié)點(diǎn)，可以抓住關(guān)鍵時(shí)機(jī)，來達(dá)到塑造用戶行為的目的。那么，這些所謂的「關(guān)鍵」時(shí)機(jī)反映在注意力理論下，對應(yīng)的就是注意的「中心點(diǎn)」，反之為「分散點(diǎn)」。用戶在使用產(chǎn)品的時(shí)候，注意力總是從中心和邊緣來回切換。
舉個(gè)例子：讓交互設(shè)計(jì)師在信息流頁面做一個(gè)閱讀提示，用于用戶在更新消息流之后的場景，目的是能讓用戶發(fā)現(xiàn)更新之前的閱讀位置，并在此處刷新，不讓重復(fù)信息出現(xiàn)，不影響用戶體驗(yàn)。那么下圖中哪個(gè)方案更合適？
中心點(diǎn)：「上次看到這里，點(diǎn)擊刷新」的提示消息出現(xiàn)在此位置和時(shí)機(jī)是有講究的，由于它們出現(xiàn)在舊消息之前，新刷新的消息之后，用戶的閱讀注意力正在從新的信息流轉(zhuǎn)到舊的信息流，中間會出現(xiàn)注意力斷層的中心點(diǎn)。所以在此出現(xiàn)的提示更容易被用戶察覺，提示內(nèi)容才能發(fā)揮更大的價(jià)值，因此 A 方案最合適。
分散點(diǎn)：B方案中消息提示在用戶刷新之后出現(xiàn)在底部，雖然該方式在 toast 的層級里，干擾性是最低的，因?yàn)樗奈恢迷诘撞?，會適當(dāng)減少用戶瀏覽內(nèi)容時(shí)所產(chǎn)生的干擾，但是從用戶行為路徑上看，顯然不合適，用戶的行為是要翻閱信息流，而它的出現(xiàn)方式與「翻閱」的行為是相違背的，反觀還是會阻礙用戶的瀏覽，雖然它的感知程度很強(qiáng)，能讓用戶第一眼發(fā)現(xiàn)這個(gè)貼心的功能，但是出現(xiàn)的時(shí)機(jī)不對，這就影響了用戶體驗(yàn)。
增加趣味性：所謂趣味性，是指能引發(fā)用戶的正面情緒，比如使人感到愉悅、有意思，能感染人、打動人、教育人，這是能夠引起用戶注意力的重要因素。
增加產(chǎn)品趣味性的途徑有很多種，就拿微信 H5 為例：
隨著 H5 頁面技術(shù)上的突破和微信推廣程序井噴式的發(fā)展，微信 H5 推廣領(lǐng)域已經(jīng)成為各大 C 端產(chǎn)品的必爭之地。推廣的形式可以基于 H5 的框架進(jìn)行多種形式的拓展，比如：小游戲、邀請好友贏紅包、小程序等等。微信端 H5 推廣的優(yōu)點(diǎn)就是將推廣的趣味性融入產(chǎn)品當(dāng)中，將營銷手段運(yùn)用在用戶使用過程中。這樣做的好處顯而易見，通過趣味的游戲程序打開市場的缺口，用戶基于推廣程序的趣味性，有很強(qiáng)的分享動機(jī)。
說到分享動機(jī)，就不得不說最近刷爆朋友圈的《能進(jìn)***的個(gè)個(gè)都是人才》，這個(gè)長圖就很有意思，每段內(nèi)容都能讓用戶產(chǎn)生共鳴，根本想不到這是篇廣告推文，直到最后一小段內(nèi)容才曝光了品牌和產(chǎn)品，但效果顯而易見（短短幾天閱讀量10萬+），所以這種趣味性的運(yùn)營方式很容易帶動用戶去分享，分享即裂變式傳播，而 C 端產(chǎn)品的運(yùn)營目的就是引流、裂變。
增加創(chuàng)意性：王者榮耀無疑是近年來受眾最廣、用戶最多、盈利最大的線上手游。我們通過分析這樣一個(gè)標(biāo)桿級的產(chǎn)品，可以得出創(chuàng)意對一個(gè)產(chǎn)品的成功與否到底起了什么作用？這款游戲火到咖啡廳一群人坐在那里玩一中午的原因在哪里？我想用我設(shè)計(jì)的眼光去審視一下王者榮耀，它到底為廣大玩家提供了一種怎樣的體驗(yàn)？
「容易上手」幾乎是王者榮耀玩家的共同感覺，而這種直觀感覺決定了一款手游能在多大程度上流行。一方面，王者榮耀采用了雙輪盤（左右兩邊一個(gè)操控區(qū)域）的操控方式，玩家通過左右兩邊的虛擬按鈕進(jìn)行控制，同時(shí)可以控制自動攻擊。新手玩家默認(rèn)自動攻擊，從可玩性角度很大程度上減少了用戶的學(xué)習(xí)成本。
雙輪盤的操作方式并不是王者榮耀首創(chuàng)，但是他卻成就了這種經(jīng)典的交互方式，為后來產(chǎn)品樹立了一個(gè)成功的典范。操作方式的創(chuàng)新點(diǎn)還在于取消技能施法的方式。區(qū)別于 PC 端游戲，移動終端沒有鼠標(biāo)來控制技能釋放與否，王者榮耀采用技能滑至右上取消的方式，創(chuàng)新性地解決了小屏幕交互上存在的問題。
除了以上幾個(gè)設(shè)計(jì)點(diǎn)外，C 端產(chǎn)品的設(shè)計(jì)手段還有很多，主要包括：推送提醒、各種紅點(diǎn)提示、彈窗提示、嵌入廣告、分享刺激、打賞刺激等。無論采用任何設(shè)計(jì)方法，其核心的目標(biāo)始終是落在用戶的注意力上，通過吸引用戶注意的方式，達(dá)到塑造用戶行為的目的。
B端
產(chǎn)品設(shè)計(jì)者對于用戶的需求在一定程度上是可知的，所以 B 端產(chǎn)品是輔助用戶行為，比如我們要做一個(gè)企業(yè)報(bào)銷系統(tǒng)，這些流程和工作行為已經(jīng)有一套標(biāo)準(zhǔn)的流程了，我們只需要將這些場景轉(zhuǎn)化為流程設(shè)計(jì)。那這個(gè)系統(tǒng)會存在哪些場景，只需要找到相應(yīng)的使用角色一聊就能挖掘出來，而且場景相對較固定，不用考慮用戶是不是喜歡這個(gè)功能，因?yàn)檫@是公司制度要求，不喜歡也得用。因此在設(shè)計(jì)初期，我們要做的就是充分挖掘相應(yīng)的功能需求，盡量把流程做到完善，而在設(shè)計(jì)上要有：合理的功能與模塊劃分、嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)流程設(shè)計(jì)、一致性的操作體驗(yàn)、干凈簡潔的界面設(shè)計(jì)。
合理的功能與模塊劃分：即在做產(chǎn)品信息架構(gòu)時(shí)，就需要仔細(xì)考慮功能、模塊的劃分，客戶常用功能模塊有哪些，模塊與模塊之間的關(guān)系是怎樣的，當(dāng)然有些產(chǎn)品版本是通過客戶需求進(jìn)行個(gè)性化設(shè)計(jì)的，比如有的客戶要求為他們企業(yè)單獨(dú)設(shè)計(jì)一套工作流程，那么怎樣組合該客戶的功能模塊呢，這也是做 B 端產(chǎn)品經(jīng)常遇到的需求。而對于不同崗位的人員，他們的權(quán)限劃分也是不同的，比如在不同權(quán)限人員登錄時(shí)顯示的頁面有哪些不同？能查看到的模塊有哪些，里面的界面狀態(tài)是怎樣的？如果某崗位人員擁有不同的權(quán)限范圍，怎么設(shè)置他的功能可見性？不同權(quán)限的人員怎么協(xié)同工作？需要多人協(xié)作辦公時(shí)，如何進(jìn)行業(yè)務(wù)上的移交、提醒、工作流的顯示？這些都是設(shè)計(jì)師需要仔細(xì)考慮的點(diǎn)。
都說 B 端產(chǎn)品業(yè)務(wù)復(fù)雜，細(xì)分下來，權(quán)限設(shè)計(jì)就是最要花心思的，因?yàn)樗婕暗讲煌挠脩艚巧?、崗位、場景，不能?C 端那樣常規(guī)化。
嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)流程設(shè)計(jì)：B 端產(chǎn)品不用揣測客戶打開產(chǎn)品會干什么、引導(dǎo)他干什么，因?yàn)樗枪ぷ鬈浖?，在使用時(shí)，客戶必然有明確的目的，需要什么他自己會打開，因?yàn)槎际撬麄冏约鹤钍煜さ臉I(yè)務(wù)范圍?？偛豢赡芾盟槠臅r(shí)間在工作軟件上休閑一下吧，這個(gè)場景明顯不成立。同時(shí)，設(shè)計(jì)師需要對產(chǎn)品的行業(yè)和業(yè)務(wù)具有一定的了解，如果產(chǎn)品只針對單一行業(yè)，設(shè)計(jì)師只需要了解對應(yīng)行業(yè)的特性和需求即可，若是平臺類產(chǎn)品，需要面向多元行業(yè)，那設(shè)計(jì)師就需要了解所有的目標(biāo)行業(yè)特性，找到他們的異同點(diǎn)，針對不同使用場景，分析客戶的具體需求，最后產(chǎn)出合理且專業(yè)的流程方案。如果你不了解客戶的工作業(yè)務(wù)，你就不能有質(zhì)量的產(chǎn)出他們滿意的流程方案，所以做 B 端產(chǎn)品不光要學(xué)習(xí)本職崗位的技能，還要了解目標(biāo)客戶他們的工作流程、業(yè)務(wù)知識。
一致性的用戶體驗(yàn)：無論是 B 端還是 C 端產(chǎn)品都應(yīng)該遵循這一點(diǎn)，這是互聯(lián)網(wǎng)產(chǎn)品最基本的素養(yǎng)。保持交互和視覺的一致性，讓用戶在使用時(shí)，能感到熟悉、親切，能直觀地了解到操作會帶來怎樣的結(jié)果。在用戶疑惑時(shí)，及時(shí)給予反饋，在遇到困難時(shí)，給予幫助。在用戶迷茫時(shí)，有效引導(dǎo)用戶，這就是一款聰明的產(chǎn)品，它能夠提前預(yù)知到用戶的所想所需。同時(shí)，B 端產(chǎn)品的界面元素復(fù)用面積會比 C 端廣而大，因此 B 端產(chǎn)品更應(yīng)該注重交互的一致性。做過后臺的都應(yīng)該知道，一個(gè)提醒方式、一個(gè)表單控件，它們能覆蓋到 80% 的頁面。
干凈簡潔的界面設(shè)計(jì)：B 端產(chǎn)品是為了工作而生，界面里往往都是「內(nèi)容為王」，不宜使用過于強(qiáng)烈的色彩對比，也不需要過于浮夸的設(shè)計(jì)，整體產(chǎn)品調(diào)性都應(yīng)該盡量簡潔，不要讓視覺效果喧賓奪主，而應(yīng)該減少干擾用戶的「多余設(shè)計(jì)」。這里不是說炫酷的設(shè)計(jì)不實(shí)用，而是 B 端產(chǎn)品的目標(biāo)用戶不同于 C 端用戶，B 端用戶主要是通過產(chǎn)品來完成枯燥的工作，即便視覺效果做的再吸引用戶，他們也不會給你的產(chǎn)品帶來流量和黏度，因?yàn)橘I單者是高層，使用時(shí)間也相對固定。所以還不如把開發(fā)、設(shè)計(jì)的成本放在提升產(chǎn)品性能和流程體驗(yàn)上。
雖然我一名設(shè)計(jì)師，但毫無疑問，做 B 端產(chǎn)品必須要維持：功能為主的設(shè)計(jì)原則、視覺服務(wù)于功能的產(chǎn)品素養(yǎng)。這也是為什么很多 B 端產(chǎn)品喜歡用藍(lán)色系的原因，因?yàn)榕c藍(lán)色相關(guān)的負(fù)面信息很少，同時(shí)色彩上也不會過于強(qiáng)烈、刺激，一般人都不會排斥它，并且色彩含義也為理性、商務(wù)、科技，這就更適合 B 端產(chǎn)品的特性。
產(chǎn)品強(qiáng)調(diào)：剛需、痛點(diǎn)、高頻、體驗(yàn)。
剛需
在 B 端產(chǎn)品設(shè)計(jì)中，我們往往面對的是剛需。用戶會非常明確的告訴你，幾乎無需挖掘，「我想要什么功能，我線下是怎么完成這個(gè)任務(wù)流程的，有這個(gè)功能我就付費(fèi)，沒有這個(gè)功能我就不買單」。當(dāng)然，用戶所講并非用戶所需，需求仍需要梳理和驗(yàn)證。
而為什么 C 端產(chǎn)品卻要刻意強(qiáng)調(diào)「剛需」？因?yàn)?C 端產(chǎn)品的需求不同于 B 端產(chǎn)品，C 端產(chǎn)品的用戶量大、散、廣，缺乏組織性，需求具有模糊性，所以需要刻意去挖掘。經(jīng)?？吹揭恍┊a(chǎn)品 YY 出一些客戶需求（「我」認(rèn)為的設(shè)計(jì)），其實(shí)這些需求用戶根本不需要。
痛點(diǎn)
在 B 端產(chǎn)品中，用戶選擇產(chǎn)品的決策過程中，有足夠的說服時(shí)間和機(jī)會，另外價(jià)格也會是一個(gè)非常重要的參考因素。
而在 C 端產(chǎn)品中，用戶喜歡更換成本較低（QQ和微信等社交類C端產(chǎn)品的更換成本很高，不在此列）、決策時(shí)間短，所以能否在極端的時(shí)間內(nèi)，抓住用戶痛點(diǎn)，就非常關(guān)鍵，比如通過運(yùn)營活動和情感化的視覺設(shè)計(jì)，在短時(shí)間內(nèi)引起用戶的共鳴，形成熱點(diǎn)式引流。如果不能抓住用戶痛點(diǎn)，產(chǎn)品很可能不會被下載，即使被下載，使用頻率也會非常低，漸漸的就藏在手機(jī)某個(gè)角落幾個(gè)月不更新，從隱藏逐漸走向了刪除，這樣的產(chǎn)品就會喪失競爭力。所以很多 C 端產(chǎn)品經(jīng)常推送一些運(yùn)營消息，文案還特別吸引人，目的都是為了讓用戶回歸，告訴你它還很想你。
高頻
在 B 端產(chǎn)品中，用戶使用頻率是由業(yè)務(wù)和工作量決定的，所以提高 B 端產(chǎn)品用戶使用頻率的機(jī)會并不多，總不能節(jié)假日的時(shí)候推送一條消息「少年，快回來工作吧，加薪升職就是現(xiàn)在」，這樣做毫無意義，也違背了它本身的商業(yè)價(jià)值。
而在 C 端產(chǎn)品中，用戶粘性、付費(fèi)率、轉(zhuǎn)化率、活躍度等往往跟用戶使用的頻率緊密相連。C 端產(chǎn)品很多都是免費(fèi)使用，通過增值服務(wù)收費(fèi)，比如充值 VIP 享受更多特權(quán)等，只有通過免費(fèi)的方式，讓用戶先使用，從而培養(yǎng)了使用頻率，這才是增值服務(wù)收費(fèi)的基礎(chǔ)。所以高頻和流量就成為了能否實(shí)現(xiàn)增值收費(fèi)的關(guān)鍵點(diǎn)。
體驗(yàn)
C 端產(chǎn)品由于用戶缺乏組織的壓力，并且更換產(chǎn)品的成本低到?jīng)]有，刪除你就是幾個(gè)交互手勢而已，所以 C 端產(chǎn)品必須極其重視用戶體驗(yàn)，想盡一切辦法留住用戶、鎖住用戶、讓用戶把產(chǎn)品當(dāng)成生活中不可分割的一部分。
用戶體驗(yàn)對 B 端產(chǎn)品也非常重要，但通常客戶更重視功能、流程和效率，而用戶體驗(yàn)則更多的體現(xiàn)在產(chǎn)品性能方面，試想你使用一款軟件工作，由于產(chǎn)品性能響應(yīng)非常遲鈍，而且數(shù)據(jù)不精準(zhǔn)，你一定會很抓狂，很有可能一天的工作計(jì)劃被這款「該死」的產(chǎn)品所耽誤，所以在用戶體驗(yàn)上，性能要比界面更重要。
產(chǎn)品核心訴求：功能、流程、效率。
功能
不同于 C 端產(chǎn)品需要深入挖掘用戶的需求，B 端產(chǎn)品的需求往往是非常明確的，在功能的場景覆蓋面積上，和 C 端產(chǎn)品恰恰相反，功能多、大而全，這代表了一個(gè) B 端產(chǎn)品的完整性。但這里所謂的「功能多」，并不是一些雜七雜八的錦上添花的功能，而是為了覆蓋到更多業(yè)務(wù)場景的主要功能，這樣才能拿去賣錢，才能給客戶選擇性使用，才有了更多的商業(yè)競爭機(jī)會。
至于功能過多而產(chǎn)生的學(xué)習(xí)成本過高現(xiàn)象，在 B 端領(lǐng)域也不是一個(gè)大問題，因?yàn)?B 端領(lǐng)域的客戶往往需要專業(yè)的學(xué)習(xí)，客戶也通常不會認(rèn)為是負(fù)擔(dān)，反而因?yàn)檎莆樟诉@些技能而實(shí)現(xiàn)了自身價(jià)值的增值，因?yàn)?B 端產(chǎn)品是公司主動要求員工使用的。其次我們作為 B 端產(chǎn)品的開發(fā)者，很多公司也會提供相應(yīng)的業(yè)務(wù)培訓(xùn)和售后服務(wù)。
當(dāng)然，SAAS 類產(chǎn)品（B端產(chǎn)品之一）由于免實(shí)施的特點(diǎn)，決定了功能要全面、又要容易上手的特點(diǎn)，所以 SAAS 產(chǎn)品是 B 端產(chǎn)品中最難設(shè)計(jì)的一種，需要在商業(yè)和體驗(yàn)之間權(quán)衡。
流程
既然 B 端產(chǎn)品要滿足業(yè)務(wù)信息化的需求，那就必然涉及到流程設(shè)計(jì)。B 端系統(tǒng)必須要能貼合企業(yè)用戶的業(yè)務(wù)流程才能正常運(yùn)行，而不同企業(yè)的流程是不一樣的，所以 B 端產(chǎn)品的流程設(shè)計(jì)是一個(gè)非常大的挑戰(zhàn)。
因?yàn)楹芏鄷r(shí)候 B 端產(chǎn)品是將線下的流程轉(zhuǎn)移到線上，實(shí)現(xiàn)無紙化辦公、敏捷辦公，所以功能流程已經(jīng)在線下有一套完善的流程了，只需要在現(xiàn)有的流程上做簡化和整合即可，甚至一些線下的紙質(zhì)文件在線上變成電子檔時(shí)，客戶都要求貼近原始文件，只有這樣才能順從之前的使用場景，降低學(xué)習(xí)成本，所以前面為什么說做 B 端產(chǎn)品設(shè)計(jì)要懂業(yè)務(wù)，就是因?yàn)楫a(chǎn)品里的功能流程是線下轉(zhuǎn)移到線上，了解線下業(yè)務(wù)能幫助你更嚴(yán)謹(jǐn)?shù)卦O(shè)計(jì)線上流程。
效率
B 端的產(chǎn)品的業(yè)務(wù)經(jīng)常涉及到海量的數(shù)據(jù)，所以在 B 端產(chǎn)品中，效率遠(yuǎn)遠(yuǎn)比用戶體驗(yàn)更重要，客戶不是在休閑時(shí)刻把玩你的產(chǎn)品，而是通過你的產(chǎn)品完成工作任務(wù)。比如要上傳 1000 條數(shù)據(jù)，那么批量上傳等高效率的功能設(shè)計(jì)和性能保障，就比優(yōu)化上傳界面的用戶體驗(yàn)要重要得多。
至今我們?nèi)匀豢梢钥吹接行┥坛€在用一些 DOS 平臺上開發(fā)的收銀系統(tǒng)，雖然這些系統(tǒng)已經(jīng)非常陳舊、用戶體驗(yàn)已經(jīng)很差了。但是由于使用時(shí)間很長，而且效率非常高，所以依然保持著旺盛的生命力。
客戶
使用 B 端產(chǎn)品的人或組織。說白了就是給錢的合作方，它們通常是一個(gè)企業(yè)，以企業(yè)或部門的名義，購買或租賃了你們公司所開發(fā)的產(chǎn)品。
用戶
使用 C 端產(chǎn)品的人。而個(gè)人使用者則是不受工作場景限制的每個(gè)人，拿起一個(gè)產(chǎn)品就可以注冊登錄，并直接上手把玩。
客戶是理性的，用戶是感性的?？蛻絷P(guān)心 ROI（投入產(chǎn)出比），用戶關(guān)心過程（滿足人性的某個(gè)弱點(diǎn)）。
舉個(gè)例子：雙十一基本上成為一個(gè)全民狂歡節(jié)，很多人吃土也要剁手，為什么？因?yàn)楸阋?，很多人趁著氛圍一沖動就各種買買買了。
但我們很少聽說有 B 端產(chǎn)品在搞促銷，一是因?yàn)槠髽I(yè)的采購?fù)ǔＳ杏?jì)劃安排，可能還需要財(cái)務(wù)的各種審批，不太可能剛好就在你促銷的時(shí)候企業(yè)就需要采購；二是企業(yè)的采購要考慮投入產(chǎn)出比，而不會因?yàn)槟愦騻€(gè)折扣就決定買你家的商品，這關(guān)乎到企業(yè)利益和你自己的利益。
但個(gè)人用戶不一樣，購物車存了好長時(shí)間的商品，總是嫌貴舍不得買，可是看到雙十一突然打5折，這下便有了沖動的借口，畢竟錯(cuò)過再等一年。
客戶有級別之分，用戶則基本一樣
企業(yè)有大小之分，10 個(gè)人的微企業(yè)和 100 個(gè)人的小型企業(yè)是不一樣的，同樣 1000 個(gè)人的中型企業(yè)和 10000 個(gè)人的大型企業(yè)也不一樣。更準(zhǔn)確地說，對于同類產(chǎn)品不同大小的企業(yè)它們的需求是不一樣的，可能因?yàn)槠髽I(yè)的管理方式不一樣，有些企業(yè)會提出一些個(gè)性化的需求。
比如同樣需要內(nèi)部溝通產(chǎn)品，10 個(gè)人的企業(yè)大家都坐在一個(gè)辦公室里，需要找誰討論問題，吼一嗓子隔壁公司都能聽見，隨時(shí)隨意可以開會，需要的只是傳播聲音的載體──空氣。
但如果是 100 個(gè)人的小型企業(yè)，可能吼一嗓子就沒那么好用了，因?yàn)椴皇敲總€(gè)人都熟悉，并且座位可能會離的很遠(yuǎn)，這時(shí)候就需要一個(gè)微信群方便大家溝通，這時(shí)的傳播載體是──微信群。
如果是 1000 人的中型企業(yè)，跨部門協(xié)作的場景就非常多，很多時(shí)候要找的人是不認(rèn)識的，還有可能對方故意潛水半天不回信息，這個(gè)時(shí)候提高溝通效率就顯得特別重要，所以「釘釘」和「企業(yè)微信」的「已讀、未讀」功能就很受這種場景的歡迎，對方是否在故意潛水，就看是不是已讀，如果長時(shí)間未讀那就可以通過語音或電話找，所以中型企業(yè)就很適合用這類產(chǎn)品。
那 10000 人以上的企業(yè)，可能「釘釘」和「企業(yè)微信」他們的原生功能也不一定能滿足復(fù)雜的協(xié)同需求，需要更多人性化的功能，這種情況一般是自己開發(fā)相應(yīng)功能，或外包給第三方開發(fā)，然后接入「釘釘」或「企業(yè)微信」。
上面說的是 B 端產(chǎn)品面向的客戶有大小之分，下面我們來看看 C 端產(chǎn)品面向的用戶是怎么基本一樣的。
再拿微信舉個(gè)例子，從身份地位、收入上看微信的用戶也是千差萬別，但是從微信滿足的人性弱點(diǎn)角度來看（懶惰、窺竊、色欲、存在感、虛榮、貪婪、沖動、從眾、分享、嫉妒等），用戶與用戶之間并沒有什么區(qū)別。一位成功人士和一位無業(yè)游民都有懶惰、虛榮等缺點(diǎn)。只是嚴(yán)重程度可能有所差別，他們都有通過朋友圈各種「炫耀」的需求，只是炫耀的內(nèi)容可能不一樣而已。所以作為 C 端產(chǎn)品，理論上是能滿足所有用戶的需求的，當(dāng)然有極少部分是不看不發(fā)朋友圈的，這種小概率群體可以不計(jì)算在內(nèi)。所以 C 端產(chǎn)品留下來的用戶，他們的需求都是被該產(chǎn)品所解決過的，因?yàn)檫@些用戶都有相同的需求，雖然他們的身份都不一樣。
工具的目標(biāo)是性價(jià)比，玩具目標(biāo)是休閑
性價(jià)比包含了兩個(gè)指標(biāo)，性能（效率）和價(jià)格。不難理解的是，企業(yè)之間的競爭本質(zhì)上就是生產(chǎn)效率的競爭。所以企業(yè)采購的工具（B端產(chǎn)品）肯定是為了提高生產(chǎn)效率，比如各種管理系統(tǒng)是為了提高客戶管理的效率，數(shù)據(jù)庫系統(tǒng)是為了提高記錄和運(yùn)算的效率，在此基礎(chǔ)上再橫向?qū)Ρ葍r(jià)格，性價(jià)比最高的當(dāng)然最適合。要吸引企業(yè)來購買產(chǎn)品，B 端產(chǎn)品不得不考慮產(chǎn)品效率和價(jià)格。
「玩具」的主要目標(biāo)是好玩、休閑，這里指的都是用戶體驗(yàn)，可以理解為用戶通過碎片化的時(shí)間去享受產(chǎn)品給他帶來的愉悅感、歸屬感、放松感，而用戶體驗(yàn)則是吸引用戶的重點(diǎn)。而滿足人性弱點(diǎn)的體驗(yàn)就是好的體驗(yàn)，好的體驗(yàn)都出現(xiàn)在「聰明」的產(chǎn)品上，即「眼色活」、幫助用戶思考、做到用戶行為的前面去，講的就是要滿足用戶「懶得思考」的弱點(diǎn)。比如我們都知道國民產(chǎn)品微信的用戶體驗(yàn)做得很棒，其中有一點(diǎn)就是易用性，老年人都可以用的產(chǎn)品，滿足了「懶」這一人性弱點(diǎn)，再加上其它的一些功能滿足「虛榮（炫耀）」、「偷窺（看過去的朋友圈）」等弱點(diǎn)，就能讓產(chǎn)品變得好玩，只有好玩才能引流，這正是 C 端產(chǎn)品追逐的目標(biāo)，因?yàn)楹芏?C 端產(chǎn)品的商業(yè)模式都是建立在巨大的用戶群體之上，有了流量，金錢也正在路上。
工具的生命周期比「玩具」的生命周期更長久
相對于 C 端產(chǎn)品，B 端產(chǎn)品的生命周期更長，一是因?yàn)?B 端產(chǎn)品作為業(yè)務(wù)工具，本身就比較復(fù)雜，開發(fā)這樣的產(chǎn)品是需要大量的行業(yè)經(jīng)驗(yàn)積累和技術(shù)積累，因此一款 B 端產(chǎn)品一旦贏得市場認(rèn)可，就能建立經(jīng)驗(yàn)和技術(shù)壁壘。二是 B 端產(chǎn)品基本都是要花錢購買的，一旦企業(yè)采購了該產(chǎn)品，員工也熟悉了如何使用，再換新的產(chǎn)品成本就比較大，所以更換的意愿會比較低。
C 端產(chǎn)品為好玩而存在，當(dāng)新推出的產(chǎn)品更好玩的時(shí)候，那老產(chǎn)品的生命周期和地位可能要面臨著挑戰(zhàn)。比如 QQ 和微信推出后，短信就被替代了，同樣是通訊類產(chǎn)品，微信和 QQ 就好玩很多?？赡苡腥藭f因?yàn)槎绦攀召M(fèi)，這并不是最重要的原因，即便短信現(xiàn)在完全免費(fèi)，估計(jì)也沒幾個(gè)人用了，因?yàn)槲⑿挪恢鼓馨l(fā)消息，還能發(fā)各種表情、圖片、語音、視頻、支付等，自然前者就被后者所替代了。同理，當(dāng)微信被玩膩，人們發(fā)現(xiàn)下一個(gè)產(chǎn)品更好玩時(shí)，微信也同樣會受到挑戰(zhàn)，可以對比下三年前和現(xiàn)在的朋友圈、訂閱號原創(chuàng)文章的質(zhì)量就明白了。對了，還有「曇花一現(xiàn)的子彈短信」。所有說產(chǎn)品都是有周期性的，只不過 C 端產(chǎn)品要比 B 端產(chǎn)品的生命周期更短。
工具復(fù)雜難用，玩具簡單易用
B 端產(chǎn)品復(fù)雜難用這是眾所周知的，而 C 端產(chǎn)品老人都可以用得很溜。為什么？一方面，B 端產(chǎn)品是工具類，用于生產(chǎn)，而不是我們的日常生活，使用工具很多時(shí)候不是人的本能行為，而是為了達(dá)到某一目的而學(xué)會的技能，因此一般是要經(jīng)過培訓(xùn)學(xué)習(xí)才會使用，所以很多 B 端產(chǎn)品有售前/售后方案、使用手冊、業(yè)務(wù)培訓(xùn)等等。
另一方面，這和 B 端產(chǎn)品的目標(biāo)有關(guān)（效率、準(zhǔn)確、安全），當(dāng)開發(fā)資源都用在打造產(chǎn)品性能的時(shí)候，用在用戶體驗(yàn)方面的開發(fā)資源難免會不足，所謂「功能先行」，就是這個(gè)道理。
而 C 端產(chǎn)品的目標(biāo)就是易用性、易通性，只有用戶體驗(yàn)做的比競品好，才能贏得用戶和流量。假如 C 端產(chǎn)品需要拿著產(chǎn)品說明書才能玩下去，那這種產(chǎn)品一定會被淘汰。
B端產(chǎn)品「賣軟件」
之所以說 B 端產(chǎn)品的商業(yè)模式是「賣軟件」，是因?yàn)?B 端產(chǎn)品實(shí)實(shí)在在的一手交錢一手交貨，也就是說 B 端產(chǎn)品開發(fā)出來是要直接賣錢的。即 B 端產(chǎn)品從誕生第一天起就要考慮如何銷售，甚至有些開發(fā)團(tuán)隊(duì)直接用原型 demo 去談客戶，最后還成交了。
通常來說一款 B 端產(chǎn)品如果能有幾十萬客戶已經(jīng)是用戶量特別大的產(chǎn)品了，不像 C 端產(chǎn)品動不動就是上千萬、上億，甚至上十億用戶量。因此通過流量變現(xiàn)的方法是行不通的?？梢韵胂笕绻粋€(gè)企業(yè)工具里面插入各種雜七雜八的廣告，這得受到多少企業(yè)用戶的吐槽，關(guān)鍵是這些廣告還不能直接變現(xiàn)，這里最基本的口碑就沒了。另一方面，對于性價(jià)比高的 B 端產(chǎn)品，企業(yè)是愿意自主付費(fèi)的。自然而然就形成了垂直變現(xiàn)的商業(yè)模式。
C端產(chǎn)品「秀軟件」
C 端產(chǎn)品的商業(yè)模式通常是間接變現(xiàn)。通過開發(fā)出用戶需要的產(chǎn)品，把產(chǎn)品的體驗(yàn)做好，內(nèi)容形式有針對性，從而吸引更多的用戶來使用。產(chǎn)品本身是免費(fèi)的，比如百度，支付寶，微信等產(chǎn)品。在用戶量足夠大的前提下，通過廣告、推廣等方式變現(xiàn)，本質(zhì)上就是流量間接變現(xiàn)的商業(yè)模式。之所以 C 端產(chǎn)品這么做，是因?yàn)橛脩羧后w足夠龐大，當(dāng)用戶量足夠大的時(shí)候，廣告產(chǎn)生的收入就很可觀，同時(shí)還能實(shí)現(xiàn)同類產(chǎn)品引流，把用戶引導(dǎo)到各種「同父異母」的應(yīng)用上，創(chuàng)造二次流量。比如「手機(jī)百度」看短視頻必須要打開「全民小視頻」和「好看視頻」。
不少設(shè)計(jì)師在做過一段時(shí)間 B 端產(chǎn)品設(shè)計(jì)后會感覺缺乏激情和多樣性，因?yàn)樽隹犰诺囊曈X效果和時(shí)尚的微交互的機(jī)會并非常有。時(shí)間一長就會發(fā)現(xiàn)它既無聊又單調(diào)，整天面對一些表單、可視化數(shù)據(jù)，何時(shí)才能出頭？時(shí)間一長會懷疑人生。
正因如此，設(shè)計(jì)師們感受不到設(shè)計(jì)帶來的成就感，如果不重新認(rèn)清自我、調(diào)整好心態(tài)、設(shè)立工作計(jì)劃，很容易原地踏步。這里不是說設(shè)計(jì)師不利于做 B 端產(chǎn)品，而是要結(jié)合自己的職業(yè)規(guī)劃做選擇。
我從 C 端轉(zhuǎn)戰(zhàn) B 端之后，發(fā)現(xiàn) B 端產(chǎn)品吸引我的有以下幾點(diǎn)。
1. 更有挑戰(zhàn)性
B 端產(chǎn)品相對而言，場景、功能、業(yè)務(wù)流程、信息架構(gòu)要比 C 端更復(fù)雜，面對的異常情況也比較多，一些專業(yè)性強(qiáng)的行業(yè)，甚至還需要一定的背景門檻，比如一些互金公司會幫助 PM 和設(shè)計(jì)師考取金融行業(yè)相關(guān)資格證。正因難度更大，設(shè)計(jì) B 端產(chǎn)品才更具挑戰(zhàn)性。
而C端產(chǎn)品目前各行業(yè)基本成熟，產(chǎn)品同質(zhì)化相當(dāng)嚴(yán)重，競品中有大部分都差不多，設(shè)計(jì)師很多時(shí)候的工作就是在做領(lǐng)導(dǎo)和產(chǎn)品經(jīng)理的需求，「借鑒、學(xué)習(xí)」成熟競品的設(shè)計(jì)。而 B 端市場還處在發(fā)展中狀態(tài)，現(xiàn)在正是市場紅利的時(shí)候，競品雖少，但商業(yè)競爭殘酷，即便下載了競品，你沒有體驗(yàn)賬號還是進(jìn)不去的，所以從一定意義上講，做 B 端產(chǎn)品的設(shè)計(jì)，很多時(shí)候都需要自己去調(diào)研用戶需求，去摸索設(shè)計(jì)方法，并做出方案去驗(yàn)證它。對 UI 和交互設(shè)計(jì)師來說，復(fù)雜的業(yè)務(wù)場景和產(chǎn)品邏輯能讓你養(yǎng)成嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)習(xí)慣（思維），以后 UI 轉(zhuǎn)交互，或轉(zhuǎn)產(chǎn)品經(jīng)理，B 端的設(shè)計(jì)經(jīng)驗(yàn)都是一個(gè)非常牢固的基礎(chǔ)。
2. 更能體現(xiàn)設(shè)計(jì)師的價(jià)值
上面也說了，C 端的成熟產(chǎn)品很多，產(chǎn)品也經(jīng)過市場檢驗(yàn)了，優(yōu)秀的產(chǎn)品站在更高的角度，去除設(shè)計(jì)師自己的情懷來看，在一段時(shí)間內(nèi)很難再有突破性的創(chuàng)新，只能在細(xì)節(jié)和體驗(yàn)上微創(chuàng)新，主要還是靠產(chǎn)品經(jīng)理發(fā)現(xiàn)功能痛點(diǎn)或運(yùn)營的手段，設(shè)計(jì)師在這種情況下發(fā)揮的價(jià)值有限，往往地位也很低下。一般的互聯(lián)網(wǎng)公司，很多設(shè)計(jì)師都是執(zhí)行者，很難參與到產(chǎn)品層面的工作，在開發(fā)眼里覺得設(shè)計(jì)師就是畫圖的。
3. 更能進(jìn)行行業(yè)深耕
B 端設(shè)計(jì)師對行業(yè)、業(yè)務(wù)的了解遠(yuǎn)遠(yuǎn)深得多，他們做的不止是框架層和表現(xiàn)層的東西，每設(shè)計(jì)一個(gè)功能，必須要了解該功能在整個(gè)產(chǎn)業(yè)鏈的位置、功能目的，對其他業(yè)務(wù)環(huán)節(jié)有什么影響等等，只有對行業(yè)了解得更深入，才有更多的機(jī)會享受行業(yè)帶來的紅利。
以上是我的個(gè)人看法，當(dāng)然設(shè)計(jì)師如何選擇 C 端和 B 端，這和自己的興趣、職業(yè)方向有非常大的關(guān)聯(lián)。偏視覺的設(shè)計(jì)師做B端產(chǎn)品時(shí)肯定會有一些局限性，偏交互的設(shè)計(jì)師在你經(jīng)歷完 B 端的產(chǎn)品設(shè)計(jì)之后，你會發(fā)現(xiàn) C 端的邏輯真的很簡單。所以無論怎么選，請先考慮好自己的個(gè)人因素，并不能因?yàn)楝F(xiàn)在 B 端火，你就跟風(fēng)，喜不喜歡、適不適合、能不能在 B 端領(lǐng)域生存下去，還是要看你自己。
轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章：
Cs界面設(shè)計(jì)之二：如何區(qū)別B端與C端的產(chǎn)品設(shè)計(jì)差異？我總結(jié)了26條對比！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com
