對于剛開始思考 UI 元素尺寸的新人，通常第一反應都是去看官方規范，新人都以為官方設計規范的作用就是告訴你們元素的大小和怎么設置，只要看完了就能懂得如何設計 iOS 或 Android 應用。而實際上，這些規范并不能幫助你們解決這個問題，因為設計規范涵蓋的內容遠遠比這些復雜。
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方不會提供一個列表，逐一羅列每個元素的長寬和其它參數，所以想弄明白，要自己在這兩套素材庫中選中元素查看。如下圖這個按鈕，我們就能看見它的參數值。
免費獲取 → iOS 11設計規范發布了，來下載官方源文件！
在初期，我們想要設計出嚴格符合官方規范的設計，就可以嚴格照搬官方的元素設置。但是，即使官方的源文件包含的元素字體已經非常多了，在實際設計過程中，還是會出現它們無法覆蓋的設計類型，需要依靠我們自己設置。
還有如字體的應用，官方源文件使用的語言是英文，光是官方應用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應用面板中密密麻麻的字體類型。在真實的中文設計場景下，我們是不可能照搬這種規范的。
新人要明白，官方的規范，只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內容，我們是無法設計出有趣個性化的設計的，比如下面這幾款已經看不到 「 iOS 設計 」的應用。
官方的參數決定我們設計的下限，當你不知道該怎么做，或者設計的目標就是以系統原生的體驗和視覺為準，那么照搬就行了。后面的文章要說的，就是脫離開這些束縛，正確自定義 UI 元素的尺寸。
UI 和平面不一樣的地方，就是極其關注元素屬性的具體數值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優秀的作品，無需緊盯著其中出現的每個元素的長寬高數值。而 UI 的設計中，無論字體、圖標還是按鈕，都需要我們嚴謹地定義它們的長寬高，如下圖設計一個按鈕的操作。
這么做的原因是因為在電子屏幕中，圖像的呈現是由屏幕中的像素點來完成的，像素點是最小的顯示單位，一個點只能顯示一個顏色，所以如果設置了帶有小數點的數值，那么這個元素的邊緣就會虛化。所以為了避免這種事情出現，我們就得用整數來定義元素的長和寬。
這當中還涉及到不少比較復雜的屏幕顯示原理問題，尤其是和像素倍率相關的基礎知識，我會在另外的文章里分享，后面文章所有的長度單位默認以 PT 為準，即 XD 和 Sketch 默認畫布的單位，PS 中設計需要在這個基礎上乘以2。
只有分隔線，是唯一可以不使用整數的例外，因為 1pt 的分隔線看起來會非常粗，一點也不精致，感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔，再導出到手機里觀看效果。即使是官方應用，也主要使用 0.5pt 的線條做分隔。
無論在 iOS 或 Android 的規范中，也都提到過使用 8 x 8 的網格做輔助，這導致網上有很多片面的文章會反復強調對元素的尺寸使用 8 的倍數。
實際上，我們在真實的設計環境中，建議大家使用 4 的倍數作為一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好處我會在后面的文章中做說明。如果發現 4 的倍數無法滿足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數如18、22、26等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
有了這樣的原則，并養成習慣，我們就能在每次設計前對元素尺寸有個大致判斷，然后再根據需要按 4 的倍數調整，如下面設計注冊登錄頁面的輸入框作為案例。
開始我使用 280 寬，44 高的尺寸，但是覺得有點僵硬，太正式了。這時候反思認為應該是輸入框太矮導致的，所以高度上改成 44+(4×2)=52 。這時候又覺得太高了，實際輸入內容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結果。
所以，因為這樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數值。UI 的設計過程就是一個不停鍵入參數和調整參數的過程。
以上就是對與 UI 元素尺寸定義的第一部分，因為要講清楚需要花的篇幅太長，所以我會將后面具體的案例講解拆成 4 部分，分別由控件、文字、圖標、組件部分組成。
這里要聲明，在我的語系中，控件指的是在界面中最基本的交互單位，如按鈕、滑塊、開關、分頁器等，更復雜的如動態卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，會根據前面定義的規范，分別講解控件應該使用的尺寸范圍：
按鈕是界面交互操作中使用最頻繁的元素了，當然按鈕呈現的形式也多種多樣，比如可以是文字、圖片、圖標、卡通形象等等。在這里，我們只聚焦于矩形的基礎按鈕。
在進入具體參數的講解前，要先理解按鈕實際上是所有控件中最復雜的一個，并不是因為在設計樣式上的復雜，而是因為按鈕承載了最多的產品訴求，權重差異極大，例如看下面的案例。
在上圖中，可以點擊的東西不少，我們就說外觀是標準樣式的按鈕，就有 9 個。而這里面，權重最高的必然是 「加入購物車」。權重最低的，應該是前往新品頁。
定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個應用中的權重，尺寸和權重是成正比關系的。當然，顏色也是對重要性表現的關鍵因素，不過不在這里展開。
按鈕高度
當我們設計按鈕時，優先要從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權重，分成高、中、低三類：
高權重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它的最小高度應該從 40pt 開始遞增，低于這個大小，那么這個按鈕就很難在這個頁面起到視覺支撐，因為感覺太細了。
中權重的按鈕，類似個人主頁的關注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高頻的交互次數，我們必須得保證它易于點擊。24pt 是在我經驗中便于點擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級最高的按鈕常常是處于一個孤立的空間，所以高度如果超出 40pt，就會對當前模塊產生直觀的破壞。
低權重的按鈕，就類似查看更多、標簽、詳情等類型，相對于按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內部文字或圖形元素即可。
使用上面這種方法，在頁面中根據權重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小于 4 ，否則差異太小不僅拉不開層次，還容易使視覺感受變差。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形也有，但是不能變成縱向的矩形。
按鈕的寬度主要和內容掛鉤，內容數量越多，按鈕自然也就越寬。唯一的例外，只有高權重的按鈕，可以無視內容的數量。因為它們需要更多的區域，往往都是撐滿屏幕內容區域或全屏的，可以特殊處理。
普通按鈕，左右間距距離內容過多，就會讓按鈕看起來非常的不協調。所以我們要根據內容來設置按鈕左右的寬，最大寬度應該小于內容距離上下的 2 倍。
按鈕圓角
按鈕尺寸還有最后一個屬性，就是按鈕的圓角設置了。矩形的邊角有三種類型，即直角矩形、圓角矩形、半圓矩形。
為矩形設置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳，這種圓角的數值賦予要適當，只要超出了一定的范疇，就會對視覺的和諧產生影響，我習慣稱呼為——半圓不圓，如下圖右側的錯誤案例。
所以，我們在設計圓角的過程中，一定要仔細感受圓角在畫面中的和諧性。而圓角的設置范圍，不大于高度的 1/4。例如，一個24pt的圓角矩形，圓角的尺寸就應該不大于 6pt，如上圖的效果。
以上就是按鈕相關尺寸定義的說明，當然，在真實的設計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
輸入框也是我們比較常用的元素之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的使用高度尺寸，常規在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠，比如我用下面學生的案例做個演示。
常見的步進器，就是輸入框和按鈕的結合。左右有兩個用來增加數量的按鈕，中間是允許我們直接鍵入數字的輸入框。在尺寸上，它也介于兩者之間，高度在 28 – 40 之間。下面我再用學員的作業做次演示，當低于 28 以后，就會發現在屏幕中的占比實在太小了。
步進器中常見的錯誤，是在我們設置圓角外框時，繪制左右兩個按鈕，并沒有合理的減去內側的圓角，這是絕對不應該忽略的細節。
下拉菜單要注意包含多種狀態，默認、展開和選中。默認狀態與輸入框類似，主流的高度也使用 36-56pt。但是，當菜單展開后，下方多出來的選項菜單，就值得注意了。
菜單的寬度正常情況下與默認狀態相同，而高度根據里面包含的選項數量決定。單行選項，高度是不大于默認的選項框的。新手很容易在彈出菜單中設定過小的高度，使整個控件看起來會非常的別扭。
開關也是按鈕的一種形式，通常出現在設置頁的列表中，上方就是它主流的幾種樣式。在設計開關的時候，要先確定一個矩形區域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt。之后再將細節填入。
滑塊形式接近開關，通常在中間有一個操作節點，下面有一個用來表示區間的線條。實際上我們該做的就是分別決定它們的尺寸。
節點如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應該在 16-28pt 之間。而下面的橫線，寬度由所在內容區域的寬決定，高度一般在1-4pt 之間。
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進去，就要讓它看起來和諧。大多數人在定義指示器時，不是太大，就是太小，可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會出錯。
指示器主要是圓形和矩形兩種形式：
提示紅點也是大多數應用會使用的一個控件，它的大小應該在 24-32pt 之間。作為一個圓形，這個控件設計起來很容易，但設計師往往忽略一件事，那就是如果中間的數值超過 10 變成 2 位以后，要怎么處理。
在設計這樣的元素時，我們要用一個矩形元素來表現，即畫一個正方形，然后將圓角設成最大，那它看上去就是一個圓形。那么每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。
因為相同字號下，不同英文、數字的寬度都是不一樣的，我們要根據實際輸入的內容所增加的寬度，去增加圓點的寬度。
最后一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設計時也受到排版空間的影響，較為寬松的排版風格，高度就比較大，若擁擠則反之。
下面是高度：
分頁控件主要應用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時候分頁器是沒有背景色的，但是背景矩形是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個完整的分頁控件，里面會包含兩個或以上的選項，所以定義每個選項的寬也是必要的。通常，我們有兩種定義方法，一種是選項少時，直接進行均分顯示，另一種是選項較多，采取定寬模式，寬度最小建議在 64pt 以上，才不會顯得過度擁擠。
分頁控件選項處于選中狀態時，有的設計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應該使用的高度都應該不大于 2pt。寬度的定義，第一種和每個選項背景區域相等，第二種則可以在 8-16pt 間（小于文字總寬）。下面是正確設計效果：
前面說到了不少元素的尺寸，那么真實應用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設計稿了。
這些參數雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會被設計得很奇怪。當你們沒有對于特殊化風格設計的控制能力時，就先學會正確的使用上面的這些參數吧。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
1. 理論表述
任意一點移動到目標中心位置所需要的時間，與目標距離正相關，與目標大小負相關。
2. 研究背景
1954 年，Paul Morris Fitts 根據信息類比提出一個假設，該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數，卻給了后來的交互研究人員極大的啟發。
我們現在經?？吹降?Shannon 公式（即上面那個公式）是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」，該變體被廣泛地應用于需要指針操作的人機交互系統當中。作為交互設計和 UI 設計的理論基礎，它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數關系：因為以 2 為底的指數函數是遞增函數，所以，T 與 D 正相關（D 越大 T 越大），而與 W 負相關（W 越大 T 越?。?。
人們做出一個移動指針的操作通常需要兩步：
菲茨定律所包含的兩點內容：
綜合兩者來看，菲茨定律中的 D 在第一步中起更為明顯的作用，而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示，主要也是從這兩方面入手。
案例1：系統右鍵菜單，微信彈出菜單
最典型的例子就是菜單，無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶，點擊這類按鈕之后一定會有后續的任務和操作，所以這些任務都被安排在了距離所點擊區域更近的菜單中。
案例2：夸克和 Safari 的 url 輸入框位置比較
另外一個例子是瀏覽器的搜索欄輸入框，現在已經有一些瀏覽器（比如簡單搜索、夸克）會將輸入框以及一些其他更常用操作置于底部，這是因為我們正常握持手機時，大拇指離底部更近，所以需要進行點擊操作的話底部的輸入框操作起來更方便，也更快。
這一點在現今的 APP 中做得已經非常到位了。
案例3：哈羅出行
作為哈羅單車租用操作的入口，頁面中的「開鎖」按鈕做得足夠大，用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄（也就是開始）按鈕也是一樣的道理。
還有一個比較特殊的就是對于邊角的利用，無論是在 Windows 還是在 MacOS 中，邊角總是有一些比較重要的操作，比如 Windows 的「開始菜單」（在左下角），MacOS 的 Dock 欄（在底部）以及頂部狀態欄，包括 Mac 特有的觸發角。
案例4：MacOS 觸發角設置
為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢？在硬件設備中邊角是一個極其特殊的存在，由于指針再怎么移動都不可能超越屏幕邊界，只能停留在邊界上，所以邊界對于用戶的操作來說是「無限可觸發」的，這有什么意義呢？這意味著對于隱性存在的目標來說，W 趨于無限大。
既然 W 趨于無限大，根據公式時間 T 就趨于常量 a。
結論就是無論指針距離目標物多遠，所需要花費的時間都已經達到了理論的最小值，輕松且高效。而在移動 APP 中同樣有邊角的應用，比如最近拿了 Google Play 設計大獎的 Drops。
案例5：Drops
創新的交互將屏幕底邊充分的利用了起來，只要將單詞移到底部，就代表用戶已經記住這個單詞了。注意整個底部都是可以觸發的，而不僅僅是腦袋那個圓形區域。本來「移動」這個操作對于「按鈕」來說更加繁瑣，但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩，滑起來相當帶勁。
菲茨定律給我們的啟示通常都是正向的，都是以縮短用戶的操作時間為主要目標，但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時，可以逆向運用菲茨定律，增加操作的復雜度。
案例6：iPhone 關機和微信刪除聊天窗
iPhone 的滑動關機延長了用戶關機操作的時間，以提醒用戶此操作為不可逆，需要謹慎操作。微信也是同理，甚至還縮小了刪除按鈕的大小，以達到警示的目的。
另一個典型就是彈出窗口的關閉按鈕。
案例7：Luckin Coffee 的彈出窗
彈出窗口里一般都包含了開發商的推廣、廣告、運營活動等等，所以開發商會希望用戶花盡量多的時間去注意到它們的內容，這時候雞賊的開發商會把關閉按鈕做得又小又遠（遠離視覺中心），讓用戶花更多的時間去尋找和點擊它們，效果拔群。
注意點1：D 不能過分短
過分短的間距不僅無法提升操作效率，反而會造成視覺壓力從而降低用戶體驗。
反面案例1：唯物魔改版
按照菲茨定律魔改的唯物登錄頁面，理應操作得更迅捷方便，然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外，我嘗試著點了一下覺得十分逼仄擠手，所以過度縮減按鈕間的間距并不合理。
注意點2：W 不能過分大
大尺寸的點擊目標確實能夠有效地降低用戶操作成本，但是過分大的目標也會很直接地破壞畫面的平衡，浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系，當按鈕已經足夠大時，再增大就沒有什么體驗上的提升了，如下圖所示。
反面案例2：KEEP 魔改版
與唯物類似，當按鈕大到一定程度之后，會對畫面造成恐怖的破壞效果。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
現在大多數的 PM /交互/ UI 設計師，在設計產品的時候都是以 iOS 為基準 思考產品上的各種功能邏輯、交互狀態，而很容易忽略了某些功能在 Android 里并不能「一稿適應兩端」，部分產品差異在安卓上是不一樣的。
所以本文就講下 Android 和 iOS 9大產品/交互差異，希望你在日后的產品設計時，可以考慮到更多層面的知識點。
對在于一些虛擬商品的支付上，如 vip 會員、xx幣，xx豆。iOS 和 Android 就存在不同的支付規則：Android 基本無限制，無抽成。而 iOS 限制比較多，而且要抽成大約 30% 的手續費。
舉個例子：同樣充值 30 元，Android 端會得到 300 金幣，而在 iOS 中，只有 210 金幣。正因這個抽成規則的不同（沒辦法，這是蘋果硬性規定的），才會出現各種平臺的虛擬貨幣，在 Android 和 iOS 中的充值比例是不一樣的，如快手：
所以對于虛擬商品在 iOS 端的抽成規則，在產品設計時一定得考慮清楚，因為這關系產品的商業和盈利模式。通常有 2 種解決思路：
A. 讓用戶承擔 30% 的抽成：
同樣的價格，iOS 用戶得到的商品少些
如同樣充值 30 元，Android 端會得到 300 金幣，而在 iOS 中，只有 210 金幣。像快抖音、陌陌等各種貨幣充值。
同樣的商品，iOS 用戶支付更高的費用
如 3 個月的 vip 會員，Android 端定價是 58 元，iOS 端則可以設為 68 元。如優酷、騰訊視頻的 vip 會員價格。
B. 公司自己承擔 30% 的抽成：
如 iOS 端充值 30 元，公司實收 21 元，但 iOS 用戶能得到和 Android 一樣的 300 個金幣。（理論上是有這個解決思路，但現實中很少有公司去實現，畢竟抽成成本就擺在那里）
另外還需要注意的是：因為抽成規則的不同，對于同一個 ID 的賬戶余額，在 Android 和 iOS 端中是不能通用的。因此在產品設計時需要將這點告知用戶，預防用戶犯錯、以及惡意刷幣。
Android 由于開源的特性，因此對接的都是第三方支付平臺，如微信支付、支付寶、銀聯卡等。 而 iOS 出于系統的封閉性和安全性考慮，只能調用蘋果自己的支付系統：登錄 Apple ID ，然后用授權的支付方式（支付寶、銀聯卡）進行付款。
「狀態欄」也就是我們手機界面最頂部的電池欄，它除了可以在不同背景里切換顏色外，在交互的觸發上，Android 和 iOS 中也各不相同。
iOS ：用戶在 Y 軸滾動了很長內容時，點擊狀態欄可以快速回到初始位置。
Android ：無論用戶滾動了多長內容，都是點擊無任何效果。
雖然這一交互差異是 iOS 專有的，但它卻啟發我們一個新的設計思路：在必要的時候，狀態欄可以為產品承載新的交互狀態。如網易的 LOFTER（ iOS 端），用戶離開音樂播放界面時，狀態欄就用于顯示音樂信息和操作入口，方便用戶在瀏覽其他內容時可以快速關閉音樂，極大提升了用戶的操作效率。
這種大多應用于運營的「拉新」場景，為了能讓新用戶得到好處（紅包、優惠券、更好看的內容等）。通常會讓新用戶下載產品 APP 領取。而由于 Android 與 iOS 的下載方式不同，會帶來不同的交互狀態和產品邏輯。
Android ：可以在當前頁面（后臺）下載，也可以在應用商店下載；過程中可以顯示進度，且允許用戶暫停下載；下載完成后調起安裝頁面，用戶可以取消安裝，也可以自動安裝……正因為 Android 下載軟件的各種便捷性，所以才會帶來各種交互狀態：未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設計師需要特別注意的，每個不同的狀態背后都會不同的產品邏輯。
iOS ：只能跳轉到 App Store 里下載，所有下載流程和狀態都是在那完成的，可以脫離開活動頁面，相比于 Android 的下載方式就簡單很多。跳轉的方式可以是全屏幕，也可以是半屏。
Android ：由于安卓的開源特性，當有新版本時都會提示用戶更新，且每個產品內部都帶有「版本更新」入口。而更新的方式可分 2 種：
iOS ：而 iOS 端出于對用戶體驗的考慮，是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的 iOS 產品，都是沒有「版本更新」入口的原因（像 QQ 、支付寶、百度網盤等大廠產品）。
即使有，點擊了也直接跳轉到 App Store 查看版本情況。且下載渠道都固定在 App Store 里。理所應當的，軟件的更新方式也只能在 App Store 里進行，無法做到與 Android 一樣后臺下載、后臺更新。
在手機鍵盤里輸入文字時，iOS 由于系統的限制，對文字的發送指令只能在鍵盤上來完成，因此 iOS 用戶的交互操作都全部集中在鍵盤右下角。
而 Android 端就靈活很多，不僅可以在鍵盤上執行發送指令，也可以在輸入欄/搜索欄周邊新增操作入口。
長按一張圖片后，都會彈出一個列表浮層，因為 iOS 手機只有一個「Home 鍵」 而已，為方便用戶退出浮層才增加了「取消」入口。
而 Android 手機本來就有「返回」虛擬鍵，安卓用戶的退出/返回行為都習慣于通過虛擬鍵觸發，所以多做一個「取消」的意義性不大。
iOS 端一直教育著用戶使用「左滑」刪除列表信息，所有的刪除功能都是支持「左滑」來實現的。
而 Android 系統大部分只能通過「長按」來觸發編輯狀態，其中就包括了刪除功能。
不過現在也有極少數的產品，正在逐漸打破這兩端間的「刪減」界限，比如網易郵箱（Android）就做到了左滑刪除信息。
當我們第一次打開產品、允許了獲取消息通知的權限后，所有的信息傳輸都會基于服務器進行推送。而兩端在這塊的推送機制又有所不同：
iOS ：所有新信息都會實時推送到你的手機里，即使你關閉了軟件，還是一樣會收到提示。就算是你處于斷網狀態，信息也會先儲存于蘋果服務器，等你聯網時再一次性把收到的信息推送給你。既釋放手機內存，又不會讓用戶遺漏有新消息。
Android ：而安卓則不同，你若退出了產品，數據的推送只有等你再次打開產品時，才會通知你有多少新信息。雖然減少了對用戶的干擾性，但也增加了服務器數據儲存的壓力，還容易耽誤用戶接收新消息。
也就是我們手機的搜狗輸入法鍵盤，在微信聊天內、手機短信里復制了一段內容后，由于 Android 與 iOS 的平臺特性差異，會給兩端用戶帶來不同的交互差異。
iOS ：復制完文字后，打開輸入法鍵盤會顯示來自剪切板的文字內容。用戶只需點擊，即可將文字復制在搜索欄、輸入欄等需要文字填寫的操作區域里，無需觸發「粘貼」操作。
Android ：而有些安卓機（如小米/錘子/樂視等)，無論你復制了什么信息（文字、數字、網址等），都很難實現輸入法里的「剪切板」功能。用戶需要觸發「粘貼」功能，才能輸入剛剛的復制內容。
而對于特定的信息類型：如網址。用戶復制網址往往都帶有極強的目標性、搜索性，一些瀏覽器產品會預判用戶這一操作行為，將復制的網址前置展示出來，以抵消 Android 端對于復制文字帶來的系統限制。如 QQ 瀏覽器（安卓端）就有 2 種解法方法：
方法1：利用安卓系統的消息權限，在手機界面的頂部彈出網址欄提示，無論是在微信還是短信中，復制網址后都能快速地觸達目標。
方法2：復制網址后打開搜索功能，會將網址自動定位并粘貼到搜索欄中，便于用戶查詢。
而 UC 和百度也有類似的解決辦法：將復制后的廣泛信息（文字/數字/網址/郵箱地址等等）嵌入在搜索框下方，用戶點擊就能搜索。
這也是一種妥當的解決方法，因為用戶可復制的信息類型特別廣泛、目標不是很清晰。無法準確判斷出用戶一定會有搜索訴求。所以才將復制后的信息放在搜索框下面，而不是自動粘貼到搜索框中，既考慮了用戶目標，又兼顧了操作效率。
以上就是 Android 與 iOS 的差異總結，若有描述得不當請多指教！下面是總結文件。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
@布萊恩臣 ：iPhone X 在 2017 年上市以來，全面屏手機就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現，物理 Home 鍵都被舍棄改成虛擬按鍵，甚至是沒有虛擬按鍵的手勢滑動操作。
而這些手機都有一個共同的特點，就是屏幕尺寸越來越大。屏幕尺寸變大后，手握手機的方式和界面交互操作方式也隨之改變，那對于設計而言，是否也應該隨之進行改變呢？
想單手點擊屏幕的操作，需要手足夠靈活進行一輪操作才能夠到屏幕上方，過程中稍有不慎，手機隨時會砸地上。作者的手機屏幕已經修了幾次，差不多趕上一臺二手機的價格了。
在 2013 年，國外設計師 Steven Hoober 發表了一篇《手機界面設計》的研究報告中，對一千三百名手機使用者進行量化研究數據：
據當時研究的數據可以看出，有近半的用戶是單手使用手機（現在肯定不止）。當用戶單手操作的時候，實際拇指可以觸摸到的區域是如下圖這樣的。綠色區域是拇指的正常操作區域，黃色區域是拇指能觸碰到的最大限度范圍，紅色區域是觸摸比較困難的區域。
然而這份研究報告的數據是在 2013 年發布，當時還沒有全面屏的出現，如果把上面研究結論的區域，套用到如今的手機屏幕尺寸上，頂部的紅色區域會占更大比例。以 iPhone 11 尺寸比例作為參考，如下圖：
拇指可操作范圍大約在 3 分之 2 的區域，可見想要觸碰到紅色區域是有一定難度的。也正是因為這份報告只適合當時的手機市場情況，在當今已經不適用了，因此需要重新去考慮如何為大屏幕手機進行界面設計。
根據 2020 年手機UX設計趨勢，大屏幕設計將會成為熱點。根據數據報告中有說明，2018 年 10 月使用大屏手機的用戶比例是16.3%，到 2019 年 12 月，該數據已經上升到 41%，并且會在未來更多新機型的出現中持續上漲。
那隨著大屏幕手機的普及，就意味著設計師在設計界面的時候，要為大屏幕手機的使用場景進行界面調整，避免用戶難以使用的體驗問題。以下是我整理的一些設計建議方案：
1. 頭部區域設計更高
通過將標題欄的信息區域放大，盡量把主要操作內容向拇指區域靠近。
2. 常用導航與操作居于底部
比起導航欄放在頂部，更適合大屏幕手機的方式是將導航和重要操作盡量往屏幕底部放置。
3. 手勢操作頁面切換與返回
抖音和 Instagram story 等短視頻應用界面都是通過手勢滑動屏幕的方式，對頁面進行切換，操作的學習成本很低，而且主要操作也在屏幕底部。這種操作方式也會在今年越來越多地被使用。
4. 提示彈窗從底部升起
常用的彈窗，很多是設計在屏幕中間彈出，為了適配大屏幕，不妨嘗試從底部彈出，關鍵選項都能輕松選擇，提高轉化率。
5. 使用大卡片
屏幕尺寸變大以后，使用整張大卡片可以讓用戶瀏覽內容更專注，大面積的配圖和留白，也能提高用戶的點擊欲望。
除此以外，作為手機廠商，在發布大屏幕手機的時候，就有對界面操作做了一些對應系統級的設計調整，比如界面下拉懸停，鍵盤單手模式，屏幕邊緣滑動返回等等。
大屏幕尺寸已經是趨勢，屏幕大意味著內容可以更大限度地得到展示，有利于產品提供更多的服務，不再糾結首屏無法展示完主要內容。在這個信息爆炸的時代，用戶也不再滿足于小屏幕的瀏覽方式?？梢哉f，大屏幕已經是無法改變的趨勢。與其擔心問題到來，設計師更應該思考如何去適應產品的快速迭代，不斷更新自己的設計思維模型，更全面思考問題，產出更合理、體驗更好的設計方案。
希望本文內容可以對你有所啟發。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
近年來，互聯網進入下半場，C 端流量紅利逐漸消退，很多企業轉向了 B 端服務，隨之而來的是產品設計者的轉型，現在越來越多的 C 端產品設計師開始涉足到 B 端產品的設計，這是一個知識遷移的過程，需要認識到這 2 類產品的特點和區別，你才能夠快速適應這個遷移的過程。
在互聯網和信息化高度發達的今天，我們都是 B 端和 C 端產品的用戶，能切身體會到產品的好壞，那么兩個完全不同類別的產品放在一起時，會有什么新發現呢？今天想通過自己的設計歷程，來梳理這 2 種產品的區別和價值。
C 全稱是 Customer，即消費者（泛指用戶）的產品，個人用戶或終端用戶，使用的是客戶端。例如：微信、網易新聞、網易云音樂、有道翻譯官、網易考拉等等。
B 全稱是 Business，即商家（泛指企業）的產品，通常是企業或商家，為工作或商業目的而使用的系統型軟件、工具或平臺。例如：京東云、阿里云、網易云、網易有數或企業內部的 ERP 系統等等。
1. 都要給人使用
小到打車、外賣和購物軟件，大到邏輯復雜連產品經理有時候都犯糊涂的企業級業務系統，無論個人用戶，還是企業用戶，本質都是由人來使用，只不過產品類型不同。
2. 都要兼顧用戶體驗和業務之間的平衡
既然是給人來使用的產品，就要兼顧用戶體驗和業務之間的平衡。無論是 C 端或 B 端，誰都不愿意使用一個不好用且耽誤效率的產品，當然還是會有一些用戶體驗較差，用戶又不得不使用的產品存在，因為它可能具有一定的壟斷性質，或者在某些場景下被強迫使用，用戶本身是別無選擇的。但不能說用戶體驗就不重要，只能說對于業務更復雜、為工作而生的 B 端產品來說，想要做好這一點會比 C 端更困難。
3. 都要堅守做產品設計的核心思想
對于每一個產品設計者來說，「在什么場景下為怎樣的用戶（客戶）采取什么方法解決哪些問題」，這句話是再熟悉不過了，也是經常討論或掛在嘴邊的話。可是面對工作中蜂擁而至、突如其來的事情時，卻又常常容易忽略掉。就像是一個人如果太餓了，只顧著吃飯填飽肚子，卻忘記了吃了什么。
首先，我們明確一下 C 端產品和 B 端產品的用戶是誰，產品給哪些人用？
C端
產品是面向個人用戶，服務于每個脫離「企業」場景之外的人，也就是生活場景。他需要做更細致的用戶畫像，比如：用戶的年齡、職業、文化程度、收入水平、工作單位、個人喜好等都會影響到功能設計，每個人都可以對產品提出優化意見，這個意見只代表個人，而不是任何社會群體，但這些意見只要被產品經理驗證是可以提升產品價值的，就可能會排進迭代周期內。
相對來說，C 端產品不管從服務范圍、滲透力、密度都遠遠超過 B 端，原因是因為它面向的用戶群體更廣泛，用一個核心功能解決大多數人的一個主要訴求，我們每個人隨時隨地都可以成為 C 端用戶，可選用的產品也非常多，產品團隊更多的思考是讓我們更長時間的停留在產品上面，讓用戶有更高的粘性和活躍度，需要利用產品的特色功能和優質體驗來吸引我們，并解決我們在生活便利和情緒方面的問題，讓我們享受這些服務并為此買單。
B端
產品則是服務于企業用戶，這個「企業」可以是一個組織、商家、團隊，是某種經營的主體，當然使用者也是個人，不過這個「個人」是代表了組織中的某個角色而已。這類人無論性別、年齡、地區有何差異，他們都是一類角色，比如企業中的項目總監、項目經理、項目顧問，我們的產品要提供給這類角色使用，而不是某個人使用。假設我們做一個項目管理系統，主要提供給項目經理使用，張三和李四都是產品的用戶，也許張三在工作之外是個活潑少女，喜歡刷短視頻、購物、旅游，被簡約的界面風格所折服；李四卻是個內向宅男，喜歡宅在家里打游戲、看書，喜歡炫酷的界面風格，但他們的個人喜好都無法影響系統功能的設計。這里說的功能設計的主要依據就是企業對項目經理這個角色的業務定位和考核目標，他們共同的角色都是項目經理，所以系統只需要提供項目經理相應的功能和體驗即可。
所以功能設計需要是多個業務功能滿足特定人群的多個需求、多個場景，他所面對的用戶具有特定的職業屬性，也就是說他的用戶只會在「工作」的場景下使用他，有些還是強制使用，個人沒有選擇余地，因為付費者是企業領導，而不是基層員工，而使用最多的反而是基層員工，所以 B 端產品的用戶關系會比 C 端更集中、更垂直，做功能設計時，要權衡付費者和使用者之間的利弊，他們要求產品的時效性，注重如何滿足企業用戶的既定目標。
C端
它會存在于生活中的各種場景下，而且自由度非常高，當然也包含工作場景，比如我在坐地鐵時刷一下朋友圈、在睡前打開網易云聽歌、在工作間隙上點了一份外賣、周末變身肥宅吃了一天雞等等，所以 C 端產品的使用場景是碎片化的，用戶并不會連續幾個小時一直盯著同一個 APP，而是在多個應用之間隨意切換。比如落地成盒了會打開微信回復消息，歌聽乏了去看看電子書等等，所以我們看到一些比較優秀的產品，他們都在內容和用戶體驗上下足了功夫，目的就是為了留存用戶，減少跳出率。因此 C 端產品更講究操作直接，信息簡潔，有娛樂性、社交性、可傾訴性，是為了解決生活上的問題而生，寄生于我們的情緒之中，被產品的情感化設計所折服。
B端
與 C 端正好相反，他們是為了工作而使用這個產品，因此他們必然要長時間使用產品，而且是沉浸式使用，同時使用頻率是可預測的，他們并不能帶著個人喜好去使用，不能說這個產品太難用了，我就可以不用了。比如上下班打卡，公司要求用 A 產品，你覺得不好用，就推薦大家使用 B 產品，對不起，雖然你是產品真正的使用者，但決策權和付費者是高層領導。個人的情緒左右不了使用場景。所以 B 端產品更講究嚴謹的流程設計、貼近現實的場景面積、低風險、高效率、數據精準。它是為了解決工作上的問題而生，寄生于企業制度之中，被產品的用戶體驗影響著工作效率。
C端
滿足自我情緒。
比如社交類產品就是構建「聊天」方式，這個聊天可以是語音、文字、圖片、分享等形式，解決個人在情感、空間、工作、虛榮、欲望等情緒問題。在核心功能之外還可以附加一些「增值功能」，比如設置好友查看權限、購買 VIP 等，這都是為了提高產品的使用價值和盈利口徑。
因此 C 端產品通常只有一個核心功能（比如音樂類 app 的核心功能就是聽音樂，閱讀類 app 的核心功能就是閱讀，游戲類 app 的核心功能就是游戲），多個輔助功能，核心功能影響著產品的特色、定位、調性，而合理的輔助功能則會讓產品保值增值、增強產品與產品之間的差異化，如果去除這些附加功能，產品的體驗會受到一定影響，但實際上并不會阻礙用戶使用核心功能。例如：去除了評論功能，但用戶依舊可以聽音樂；去除了打賞功能，同樣也不影響用戶閱讀文章和作者寫文章；去除了分享，用戶還是可以愉快地吃雞。
所以 C 端產品的特性可以歸納為「分享」，前面所提到的「評論」、「打賞」其實都基于「分享」的場景下，即：讓他人聽見「我」的聲音、看見「我」的想法、贊同「我」的觀點，滿足雙方的情緒設定。
盈利方式：內容付費、廣告付費、平臺抽成、增值服務（VIP、卡券、權限等）。
B端
共同完成一個目標。
日常使用產品工作的人，自己是無法獨立完成一個任務的，他需要和周圍的人協同完成一個任務流程的閉環，比如我發起一個請假申請，以「完成」和「打回」作為流程結點，根據企業制度設定，這個流程中會涉及到 3 種角色：發起人（我）、審核人（上級）、歸檔人（人事或行政）。
B 端產品的業務邏輯是復雜和多變的，尤其是權限系統，往往每個人都是流程中一個非常小的部分，就如上段所說，需要進行協作使用，這里不能窮舉出每個業務，因為不同的公司業務則完全不一樣，公司可以對該產品當中的功能選擇性購買或租賃。而對實際用戶來說，這個產品沒有功能的層級，自己負責哪一塊，哪一塊就是他的主要任務、經常使用的功能。也就是說，從功能架構上看，這些核心功能都是扁平的，他們分配到各種使用角色的手中，沒有先后排名。
而 B 端產品的本質則是滿足用戶的工作需要，但這從來不是單一的功能就可以滿足的，這里一定包括了多項功能的組合及嵌套應用支持。當用戶需要繪制多種不同類型的圖表時，產品就絕不能只提供單項類型的圖表功能。比如：甲公司的產品只能畫柱狀圖，而乙公司的產品卻能畫 10 種甚至更多不同類型的圖表，以適應不同需求場景，若你是客戶，你會選擇購買哪個產品呢？
盈利方式：按功能模塊付費、按使用人數付費、需求付費、后期維護費用。
C端
更多滿足使用者的日常生活需求，所以需求來源會多樣化一些，因為目的都是拉新、促活、留存、轉化、裂變。像競品分析、數據分析、用戶行為分析都可能幫助挖掘出有價值的需求。我們也有很多時候因為朋友在用這個產品，或者看到產品的廣告才下載這個應用，但下載以后用來干什么，那只有等我們有訴求的時候才會再次打開應用，這個訴求可能是空虛、無聊、想購物了等等。所以很多普通用戶根本不知道自己的真實需求是什么，甚至有時陰差陽錯打開某應用，然后被里面的買家秀、活動促銷等運營模塊所吸引，最后產生購買欲望。
因此，C 端產品就是站在上帝的視角，需求直接來源于用戶的行為和反饋，從用戶這里獲取最真實的訴求。產品設計者則需要關注市場流行趨勢，關注用戶偏好及意見，將有效的分析結果轉化為產品需求，再輸出功能，引導用戶產生共鳴，并通過一些運營手段，增加轉化（變現）概率和裂變的輻射面積。
B端
B 端產品更多是基于已有的「業務」形態，把傳統線下工作，通過程序化、系統化、信息化轉換為線上行為，使業務的流轉效率更高，辦公成本更低。所以更要求產品設計者能熟練掌握相應的行業知識、捋清業務邏輯。
需求一般來源于產品戰略定位、各部門對接、租戶（客戶、外部付費者）的個性需求，有些靠銷售企業軟件盈利的公司為了把職責再細分，通常會配置指定的一線顧問來對接租戶的需求及跟進服務，然后再將需求反饋到負責這個產品的產品經理，產品經理在這里就是負責收集需求、分析、規劃、設定開發優先級，然后交由開發團隊進行接下來的產品設計等工作。
B 端產品的客戶可能不在網上，而是在全國各地的企業里，往往需要通過老板和銷售才能接觸到客戶，這會造成不能獲取真實的客戶需求，我把這種現象叫做「需求斷層」。所以最好的調研方式就是做一個「面對面」的用戶訪談，可以真實的面對面、也可以是視頻或者電話溝通，這能容易把復制的需求溝通清楚，而不是通過郵件和文字。因為目標用戶有固定的職業領域，有時候你所設計的流程你認為最合理，但和他們實際使用起來卻有很大的差異，所以和真實用戶面對面聊聊他們的工作習慣和業務規則，這一定能夠幫助到你設計產品。
很多時候，做的產品只是為了滿足付費者（即高層領導）的需求，而不是實際用戶（即基層工作者），導致實際用戶吐槽產品易用性差，其實是改變了他們的工作習慣而引發的抱怨，然而領導卻達到了監控和實時獲取數據的目的。因此在收集這些需求時，會受到來自付費者和真實用戶 2 種角色聲音的影響，這就需要產品設計者具有更理性的思考方式和處理手段。
C端-流量思維
做 C 端產品設計，我們一切行為的出發點，都是流量，流量直接影響著變現，無論是外部的流量引入、各環節的轉化、留存策略，還是產品體驗的提升、流程的優化、資源的投入，我們都是在為提升流量、轉化流量服務。我們經常做的各種活動專題、分析各類數據，去追求所謂的情懷、情感化設計，其根本還是為了引流，想方設法從全網獲取流量，從而來提升產品的轉化率，這是一切 C 端產品的宗旨，沒有流量的產品只是一個花瓶。
B端-效率思維
對于 B 端產品，我們更多關注的是效率，不管是面向外部客戶，還是服務于公司內部各業務角色/部門，B 端產品要解決的始終都是如何提升企業的運營效率（即工作效率），解決的是「開源節流」中的節流部分。所以我們會通過流程優化、工具打磨、策略調整，去提升各個環節的人效，降低各方面成本，從根本上提升企業效率，這點從我們做流程設計的時候能清晰的反應出來，設計目標都是在合理且效率的基礎上，讓用戶舒適的完成這個流程，并不是說企業投入資金購買了一款數據統計軟件，結果數據統計還沒有人工來的精準、方便。
C端
在 C 端產品設計的過程中，我們首先要明確核心功能是給哪些目標用戶使用的，也就是我們最初的設計目標是什么，需要保持產品的場景多樣化，突出核心功能，因為 C 端產品的同質化現象非常嚴重，因此我們要好好思考，如何將我們的產品在眾多產品中脫穎而出，如何讓產品的品牌設計輻射到更多的地方，如何在功能和體驗上尋找新的亮點。
再者就是要保持良好運營手段，因為 C 端的用戶是自由的（忠誠度低，隨時可以換產品使用），所以需要通過一些運營手段來綁定用戶的留存。C 端產品的本質都是一個核心功能，所以設計師在產品初期時就需要全盤考慮，哪個功能是產品最核心、最不可丟棄的，哪個功能是錦上添花，為了提升產品的附加價值的。因此，我們拋開這些基本原則，還需要對用戶行為進行塑造，塑造用戶行為就是「綁架」用戶。
把握關鍵時機：把握用戶在使用 C 端產品過程中注意力的關鍵時機，用戶在使用產品的過程中，注意力的分配是不均等的，比如同類產品太多，先下載 2、3 個試用，進到產品里不知道干什么，隨便逛逛，逛著逛著就刪除 APP 了，這就是典型的沒有把握用戶關鍵時機，沒有提供給用戶有用的東西，敗在了產品策略和本能層次。沒有在第一時間讓用戶知道產品是干什么的？能從中得到什么？亮點內容在哪里？是如何引導我使用的？那么作為產品的界面設計師就需要知道在哪些關鍵節點上，用戶的注意力是集中的，哪些節點是分散的，如何引導用戶關注這個點。
所以通過研究這些用戶在使用過程中的關鍵節點，可以抓住關鍵時機，來達到塑造用戶行為的目的。那么，這些所謂的「關鍵」時機反映在注意力理論下，對應的就是注意的「中心點」，反之為「分散點」。用戶在使用產品的時候，注意力總是從中心和邊緣來回切換。
舉個例子：讓交互設計師在信息流頁面做一個閱讀提示，用于用戶在更新消息流之后的場景，目的是能讓用戶發現更新之前的閱讀位置，并在此處刷新，不讓重復信息出現，不影響用戶體驗。那么下圖中哪個方案更合適？
中心點：「上次看到這里，點擊刷新」的提示消息出現在此位置和時機是有講究的，由于它們出現在舊消息之前，新刷新的消息之后，用戶的閱讀注意力正在從新的信息流轉到舊的信息流，中間會出現注意力斷層的中心點。所以在此出現的提示更容易被用戶察覺，提示內容才能發揮更大的價值，因此 A 方案最合適。
分散點：B方案中消息提示在用戶刷新之后出現在底部，雖然該方式在 toast 的層級里，干擾性是最低的，因為它的位置在底部，會適當減少用戶瀏覽內容時所產生的干擾，但是從用戶行為路徑上看，顯然不合適，用戶的行為是要翻閱信息流，而它的出現方式與「翻閱」的行為是相違背的，反觀還是會阻礙用戶的瀏覽，雖然它的感知程度很強，能讓用戶第一眼發現這個貼心的功能，但是出現的時機不對，這就影響了用戶體驗。
增加趣味性：所謂趣味性，是指能引發用戶的正面情緒，比如使人感到愉悅、有意思，能感染人、打動人、教育人，這是能夠引起用戶注意力的重要因素。
增加產品趣味性的途徑有很多種，就拿微信 H5 為例：
隨著 H5 頁面技術上的突破和微信推廣程序井噴式的發展，微信 H5 推廣領域已經成為各大 C 端產品的必爭之地。推廣的形式可以基于 H5 的框架進行多種形式的拓展，比如：小游戲、邀請好友贏紅包、小程序等等。微信端 H5 推廣的優點就是將推廣的趣味性融入產品當中，將營銷手段運用在用戶使用過程中。這樣做的好處顯而易見，通過趣味的游戲程序打開市場的缺口，用戶基于推廣程序的趣味性，有很強的分享動機。
說到分享動機，就不得不說最近刷爆朋友圈的《能進***的個個都是人才》，這個長圖就很有意思，每段內容都能讓用戶產生共鳴，根本想不到這是篇廣告推文，直到最后一小段內容才曝光了品牌和產品，但效果顯而易見（短短幾天閱讀量10萬+），所以這種趣味性的運營方式很容易帶動用戶去分享，分享即裂變式傳播，而 C 端產品的運營目的就是引流、裂變。
增加創意性：王者榮耀無疑是近年來受眾最廣、用戶最多、盈利最大的線上手游。我們通過分析這樣一個標桿級的產品，可以得出創意對一個產品的成功與否到底起了什么作用？這款游戲火到咖啡廳一群人坐在那里玩一中午的原因在哪里？我想用我設計的眼光去審視一下王者榮耀，它到底為廣大玩家提供了一種怎樣的體驗？
「容易上手」幾乎是王者榮耀玩家的共同感覺，而這種直觀感覺決定了一款手游能在多大程度上流行。一方面，王者榮耀采用了雙輪盤（左右兩邊一個操控區域）的操控方式，玩家通過左右兩邊的虛擬按鈕進行控制，同時可以控制自動攻擊。新手玩家默認自動攻擊，從可玩性角度很大程度上減少了用戶的學習成本。
雙輪盤的操作方式并不是王者榮耀首創，但是他卻成就了這種經典的交互方式，為后來產品樹立了一個成功的典范。操作方式的創新點還在于取消技能施法的方式。區別于 PC 端游戲，移動終端沒有鼠標來控制技能釋放與否，王者榮耀采用技能滑至右上取消的方式，創新性地解決了小屏幕交互上存在的問題。
除了以上幾個設計點外，C 端產品的設計手段還有很多，主要包括：推送提醒、各種紅點提示、彈窗提示、嵌入廣告、分享刺激、打賞刺激等。無論采用任何設計方法，其核心的目標始終是落在用戶的注意力上，通過吸引用戶注意的方式，達到塑造用戶行為的目的。
B端
產品設計者對于用戶的需求在一定程度上是可知的，所以 B 端產品是輔助用戶行為，比如我們要做一個企業報銷系統，這些流程和工作行為已經有一套標準的流程了，我們只需要將這些場景轉化為流程設計。那這個系統會存在哪些場景，只需要找到相應的使用角色一聊就能挖掘出來，而且場景相對較固定，不用考慮用戶是不是喜歡這個功能，因為這是公司制度要求，不喜歡也得用。因此在設計初期，我們要做的就是充分挖掘相應的功能需求，盡量把流程做到完善，而在設計上要有：合理的功能與模塊劃分、嚴謹的業務流程設計、一致性的操作體驗、干凈簡潔的界面設計。
合理的功能與模塊劃分：即在做產品信息架構時，就需要仔細考慮功能、模塊的劃分，客戶常用功能模塊有哪些，模塊與模塊之間的關系是怎樣的，當然有些產品版本是通過客戶需求進行個性化設計的，比如有的客戶要求為他們企業單獨設計一套工作流程，那么怎樣組合該客戶的功能模塊呢，這也是做 B 端產品經常遇到的需求。而對于不同崗位的人員，他們的權限劃分也是不同的，比如在不同權限人員登錄時顯示的頁面有哪些不同？能查看到的模塊有哪些，里面的界面狀態是怎樣的？如果某崗位人員擁有不同的權限范圍，怎么設置他的功能可見性？不同權限的人員怎么協同工作？需要多人協作辦公時，如何進行業務上的移交、提醒、工作流的顯示？這些都是設計師需要仔細考慮的點。
都說 B 端產品業務復雜，細分下來，權限設計就是最要花心思的，因為它涉及到不同的用戶角色、崗位、場景，不能像 C 端那樣常規化。
嚴謹的業務流程設計：B 端產品不用揣測客戶打開產品會干什么、引導他干什么，因為他是工作軟件，在使用時，客戶必然有明確的目的，需要什么他自己會打開，因為都是他們自己最熟悉的業務范圍?？偛豢赡芾盟槠臅r間在工作軟件上休閑一下吧，這個場景明顯不成立。同時，設計師需要對產品的行業和業務具有一定的了解，如果產品只針對單一行業，設計師只需要了解對應行業的特性和需求即可，若是平臺類產品，需要面向多元行業，那設計師就需要了解所有的目標行業特性，找到他們的異同點，針對不同使用場景，分析客戶的具體需求，最后產出合理且專業的流程方案。如果你不了解客戶的工作業務，你就不能有質量的產出他們滿意的流程方案，所以做 B 端產品不光要學習本職崗位的技能，還要了解目標客戶他們的工作流程、業務知識。
一致性的用戶體驗：無論是 B 端還是 C 端產品都應該遵循這一點，這是互聯網產品最基本的素養。保持交互和視覺的一致性，讓用戶在使用時，能感到熟悉、親切，能直觀地了解到操作會帶來怎樣的結果。在用戶疑惑時，及時給予反饋，在遇到困難時，給予幫助。在用戶迷茫時，有效引導用戶，這就是一款聰明的產品，它能夠提前預知到用戶的所想所需。同時，B 端產品的界面元素復用面積會比 C 端廣而大，因此 B 端產品更應該注重交互的一致性。做過后臺的都應該知道，一個提醒方式、一個表單控件，它們能覆蓋到 80% 的頁面。
干凈簡潔的界面設計：B 端產品是為了工作而生，界面里往往都是「內容為王」，不宜使用過于強烈的色彩對比，也不需要過于浮夸的設計，整體產品調性都應該盡量簡潔，不要讓視覺效果喧賓奪主，而應該減少干擾用戶的「多余設計」。這里不是說炫酷的設計不實用，而是 B 端產品的目標用戶不同于 C 端用戶，B 端用戶主要是通過產品來完成枯燥的工作，即便視覺效果做的再吸引用戶，他們也不會給你的產品帶來流量和黏度，因為買單者是高層，使用時間也相對固定。所以還不如把開發、設計的成本放在提升產品性能和流程體驗上。
雖然我一名設計師，但毫無疑問，做 B 端產品必須要維持：功能為主的設計原則、視覺服務于功能的產品素養。這也是為什么很多 B 端產品喜歡用藍色系的原因，因為與藍色相關的負面信息很少，同時色彩上也不會過于強烈、刺激，一般人都不會排斥它，并且色彩含義也為理性、商務、科技，這就更適合 B 端產品的特性。
產品強調：剛需、痛點、高頻、體驗。
剛需
在 B 端產品設計中，我們往往面對的是剛需。用戶會非常明確的告訴你，幾乎無需挖掘，「我想要什么功能，我線下是怎么完成這個任務流程的，有這個功能我就付費，沒有這個功能我就不買單」。當然，用戶所講并非用戶所需，需求仍需要梳理和驗證。
而為什么 C 端產品卻要刻意強調「剛需」？因為 C 端產品的需求不同于 B 端產品，C 端產品的用戶量大、散、廣，缺乏組織性，需求具有模糊性，所以需要刻意去挖掘。經?？吹揭恍┊a品 YY 出一些客戶需求（「我」認為的設計），其實這些需求用戶根本不需要。
痛點
在 B 端產品中，用戶選擇產品的決策過程中，有足夠的說服時間和機會，另外價格也會是一個非常重要的參考因素。
而在 C 端產品中，用戶喜歡更換成本較低（QQ和微信等社交類C端產品的更換成本很高，不在此列）、決策時間短，所以能否在極端的時間內，抓住用戶痛點，就非常關鍵，比如通過運營活動和情感化的視覺設計，在短時間內引起用戶的共鳴，形成熱點式引流。如果不能抓住用戶痛點，產品很可能不會被下載，即使被下載，使用頻率也會非常低，漸漸的就藏在手機某個角落幾個月不更新，從隱藏逐漸走向了刪除，這樣的產品就會喪失競爭力。所以很多 C 端產品經常推送一些運營消息，文案還特別吸引人，目的都是為了讓用戶回歸，告訴你它還很想你。
高頻
在 B 端產品中，用戶使用頻率是由業務和工作量決定的，所以提高 B 端產品用戶使用頻率的機會并不多，總不能節假日的時候推送一條消息「少年，快回來工作吧，加薪升職就是現在」，這樣做毫無意義，也違背了它本身的商業價值。
而在 C 端產品中，用戶粘性、付費率、轉化率、活躍度等往往跟用戶使用的頻率緊密相連。C 端產品很多都是免費使用，通過增值服務收費，比如充值 VIP 享受更多特權等，只有通過免費的方式，讓用戶先使用，從而培養了使用頻率，這才是增值服務收費的基礎。所以高頻和流量就成為了能否實現增值收費的關鍵點。
體驗
C 端產品由于用戶缺乏組織的壓力，并且更換產品的成本低到沒有，刪除你就是幾個交互手勢而已，所以 C 端產品必須極其重視用戶體驗，想盡一切辦法留住用戶、鎖住用戶、讓用戶把產品當成生活中不可分割的一部分。
用戶體驗對 B 端產品也非常重要，但通?？蛻舾匾暪δ?、流程和效率，而用戶體驗則更多的體現在產品性能方面，試想你使用一款軟件工作，由于產品性能響應非常遲鈍，而且數據不精準，你一定會很抓狂，很有可能一天的工作計劃被這款「該死」的產品所耽誤，所以在用戶體驗上，性能要比界面更重要。
產品核心訴求：功能、流程、效率。
功能
不同于 C 端產品需要深入挖掘用戶的需求，B 端產品的需求往往是非常明確的，在功能的場景覆蓋面積上，和 C 端產品恰恰相反，功能多、大而全，這代表了一個 B 端產品的完整性。但這里所謂的「功能多」，并不是一些雜七雜八的錦上添花的功能，而是為了覆蓋到更多業務場景的主要功能，這樣才能拿去賣錢，才能給客戶選擇性使用，才有了更多的商業競爭機會。
至于功能過多而產生的學習成本過高現象，在 B 端領域也不是一個大問題，因為 B 端領域的客戶往往需要專業的學習，客戶也通常不會認為是負擔，反而因為掌握了這些技能而實現了自身價值的增值，因為 B 端產品是公司主動要求員工使用的。其次我們作為 B 端產品的開發者，很多公司也會提供相應的業務培訓和售后服務。
當然，SAAS 類產品（B端產品之一）由于免實施的特點，決定了功能要全面、又要容易上手的特點，所以 SAAS 產品是 B 端產品中最難設計的一種，需要在商業和體驗之間權衡。
流程
既然 B 端產品要滿足業務信息化的需求，那就必然涉及到流程設計。B 端系統必須要能貼合企業用戶的業務流程才能正常運行，而不同企業的流程是不一樣的，所以 B 端產品的流程設計是一個非常大的挑戰。
因為很多時候 B 端產品是將線下的流程轉移到線上，實現無紙化辦公、敏捷辦公，所以功能流程已經在線下有一套完善的流程了，只需要在現有的流程上做簡化和整合即可，甚至一些線下的紙質文件在線上變成電子檔時，客戶都要求貼近原始文件，只有這樣才能順從之前的使用場景，降低學習成本，所以前面為什么說做 B 端產品設計要懂業務，就是因為產品里的功能流程是線下轉移到線上，了解線下業務能幫助你更嚴謹地設計線上流程。
效率
B 端的產品的業務經常涉及到海量的數據，所以在 B 端產品中，效率遠遠比用戶體驗更重要，客戶不是在休閑時刻把玩你的產品，而是通過你的產品完成工作任務。比如要上傳 1000 條數據，那么批量上傳等高效率的功能設計和性能保障，就比優化上傳界面的用戶體驗要重要得多。
至今我們仍然可以看到有些商超還在用一些 DOS 平臺上開發的收銀系統，雖然這些系統已經非常陳舊、用戶體驗已經很差了。但是由于使用時間很長，而且效率非常高，所以依然保持著旺盛的生命力。
客戶
使用 B 端產品的人或組織。說白了就是給錢的合作方，它們通常是一個企業，以企業或部門的名義，購買或租賃了你們公司所開發的產品。
用戶
使用 C 端產品的人。而個人使用者則是不受工作場景限制的每個人，拿起一個產品就可以注冊登錄，并直接上手把玩。
客戶是理性的，用戶是感性的?？蛻絷P心 ROI（投入產出比），用戶關心過程（滿足人性的某個弱點）。
舉個例子：雙十一基本上成為一個全民狂歡節，很多人吃土也要剁手，為什么？因為便宜，很多人趁著氛圍一沖動就各種買買買了。
但我們很少聽說有 B 端產品在搞促銷，一是因為企業的采購通常有計劃安排，可能還需要財務的各種審批，不太可能剛好就在你促銷的時候企業就需要采購；二是企業的采購要考慮投入產出比，而不會因為你打個折扣就決定買你家的商品，這關乎到企業利益和你自己的利益。
但個人用戶不一樣，購物車存了好長時間的商品，總是嫌貴舍不得買，可是看到雙十一突然打5折，這下便有了沖動的借口，畢竟錯過再等一年。
客戶有級別之分，用戶則基本一樣
企業有大小之分，10 個人的微企業和 100 個人的小型企業是不一樣的，同樣 1000 個人的中型企業和 10000 個人的大型企業也不一樣。更準確地說，對于同類產品不同大小的企業它們的需求是不一樣的，可能因為企業的管理方式不一樣，有些企業會提出一些個性化的需求。
比如同樣需要內部溝通產品，10 個人的企業大家都坐在一個辦公室里，需要找誰討論問題，吼一嗓子隔壁公司都能聽見，隨時隨意可以開會，需要的只是傳播聲音的載體──空氣。
但如果是 100 個人的小型企業，可能吼一嗓子就沒那么好用了，因為不是每個人都熟悉，并且座位可能會離的很遠，這時候就需要一個微信群方便大家溝通，這時的傳播載體是──微信群。
如果是 1000 人的中型企業，跨部門協作的場景就非常多，很多時候要找的人是不認識的，還有可能對方故意潛水半天不回信息，這個時候提高溝通效率就顯得特別重要，所以「釘釘」和「企業微信」的「已讀、未讀」功能就很受這種場景的歡迎，對方是否在故意潛水，就看是不是已讀，如果長時間未讀那就可以通過語音或電話找，所以中型企業就很適合用這類產品。
那 10000 人以上的企業，可能「釘釘」和「企業微信」他們的原生功能也不一定能滿足復雜的協同需求，需要更多人性化的功能，這種情況一般是自己開發相應功能，或外包給第三方開發，然后接入「釘釘」或「企業微信」。
上面說的是 B 端產品面向的客戶有大小之分，下面我們來看看 C 端產品面向的用戶是怎么基本一樣的。
再拿微信舉個例子，從身份地位、收入上看微信的用戶也是千差萬別，但是從微信滿足的人性弱點角度來看（懶惰、窺竊、色欲、存在感、虛榮、貪婪、沖動、從眾、分享、嫉妒等），用戶與用戶之間并沒有什么區別。一位成功人士和一位無業游民都有懶惰、虛榮等缺點。只是嚴重程度可能有所差別，他們都有通過朋友圈各種「炫耀」的需求，只是炫耀的內容可能不一樣而已。所以作為 C 端產品，理論上是能滿足所有用戶的需求的，當然有極少部分是不看不發朋友圈的，這種小概率群體可以不計算在內。所以 C 端產品留下來的用戶，他們的需求都是被該產品所解決過的，因為這些用戶都有相同的需求，雖然他們的身份都不一樣。
工具的目標是性價比，玩具目標是休閑
性價比包含了兩個指標，性能（效率）和價格。不難理解的是，企業之間的競爭本質上就是生產效率的競爭。所以企業采購的工具（B端產品）肯定是為了提高生產效率，比如各種管理系統是為了提高客戶管理的效率，數據庫系統是為了提高記錄和運算的效率，在此基礎上再橫向對比價格，性價比最高的當然最適合。要吸引企業來購買產品，B 端產品不得不考慮產品效率和價格。
「玩具」的主要目標是好玩、休閑，這里指的都是用戶體驗，可以理解為用戶通過碎片化的時間去享受產品給他帶來的愉悅感、歸屬感、放松感，而用戶體驗則是吸引用戶的重點。而滿足人性弱點的體驗就是好的體驗，好的體驗都出現在「聰明」的產品上，即「眼色活」、幫助用戶思考、做到用戶行為的前面去，講的就是要滿足用戶「懶得思考」的弱點。比如我們都知道國民產品微信的用戶體驗做得很棒，其中有一點就是易用性，老年人都可以用的產品，滿足了「懶」這一人性弱點，再加上其它的一些功能滿足「虛榮（炫耀）」、「偷窺（看過去的朋友圈）」等弱點，就能讓產品變得好玩，只有好玩才能引流，這正是 C 端產品追逐的目標，因為很多 C 端產品的商業模式都是建立在巨大的用戶群體之上，有了流量，金錢也正在路上。
工具的生命周期比「玩具」的生命周期更長久
相對于 C 端產品，B 端產品的生命周期更長，一是因為 B 端產品作為業務工具，本身就比較復雜，開發這樣的產品是需要大量的行業經驗積累和技術積累，因此一款 B 端產品一旦贏得市場認可，就能建立經驗和技術壁壘。二是 B 端產品基本都是要花錢購買的，一旦企業采購了該產品，員工也熟悉了如何使用，再換新的產品成本就比較大，所以更換的意愿會比較低。
C 端產品為好玩而存在，當新推出的產品更好玩的時候，那老產品的生命周期和地位可能要面臨著挑戰。比如 QQ 和微信推出后，短信就被替代了，同樣是通訊類產品，微信和 QQ 就好玩很多。可能有人會說因為短信收費，這并不是最重要的原因，即便短信現在完全免費，估計也沒幾個人用了，因為微信不止能發消息，還能發各種表情、圖片、語音、視頻、支付等，自然前者就被后者所替代了。同理，當微信被玩膩，人們發現下一個產品更好玩時，微信也同樣會受到挑戰，可以對比下三年前和現在的朋友圈、訂閱號原創文章的質量就明白了。對了，還有「曇花一現的子彈短信」。所有說產品都是有周期性的，只不過 C 端產品要比 B 端產品的生命周期更短。
工具復雜難用，玩具簡單易用
B 端產品復雜難用這是眾所周知的，而 C 端產品老人都可以用得很溜。為什么？一方面，B 端產品是工具類，用于生產，而不是我們的日常生活，使用工具很多時候不是人的本能行為，而是為了達到某一目的而學會的技能，因此一般是要經過培訓學習才會使用，所以很多 B 端產品有售前/售后方案、使用手冊、業務培訓等等。
另一方面，這和 B 端產品的目標有關（效率、準確、安全），當開發資源都用在打造產品性能的時候，用在用戶體驗方面的開發資源難免會不足，所謂「功能先行」，就是這個道理。
而 C 端產品的目標就是易用性、易通性，只有用戶體驗做的比競品好，才能贏得用戶和流量。假如 C 端產品需要拿著產品說明書才能玩下去，那這種產品一定會被淘汰。
B端產品「賣軟件」
之所以說 B 端產品的商業模式是「賣軟件」，是因為 B 端產品實實在在的一手交錢一手交貨，也就是說 B 端產品開發出來是要直接賣錢的。即 B 端產品從誕生第一天起就要考慮如何銷售，甚至有些開發團隊直接用原型 demo 去談客戶，最后還成交了。
通常來說一款 B 端產品如果能有幾十萬客戶已經是用戶量特別大的產品了，不像 C 端產品動不動就是上千萬、上億，甚至上十億用戶量。因此通過流量變現的方法是行不通的。可以想象如果一個企業工具里面插入各種雜七雜八的廣告，這得受到多少企業用戶的吐槽，關鍵是這些廣告還不能直接變現，這里最基本的口碑就沒了。另一方面，對于性價比高的 B 端產品，企業是愿意自主付費的。自然而然就形成了垂直變現的商業模式。
C端產品「秀軟件」
C 端產品的商業模式通常是間接變現。通過開發出用戶需要的產品，把產品的體驗做好，內容形式有針對性，從而吸引更多的用戶來使用。產品本身是免費的，比如百度，支付寶，微信等產品。在用戶量足夠大的前提下，通過廣告、推廣等方式變現，本質上就是流量間接變現的商業模式。之所以 C 端產品這么做，是因為用戶群體足夠龐大，當用戶量足夠大的時候，廣告產生的收入就很可觀，同時還能實現同類產品引流，把用戶引導到各種「同父異母」的應用上，創造二次流量。比如「手機百度」看短視頻必須要打開「全民小視頻」和「好看視頻」。
不少設計師在做過一段時間 B 端產品設計后會感覺缺乏激情和多樣性，因為做酷炫的視覺效果和時尚的微交互的機會并非常有。時間一長就會發現它既無聊又單調，整天面對一些表單、可視化數據，何時才能出頭？時間一長會懷疑人生。
正因如此，設計師們感受不到設計帶來的成就感，如果不重新認清自我、調整好心態、設立工作計劃，很容易原地踏步。這里不是說設計師不利于做 B 端產品，而是要結合自己的職業規劃做選擇。
我從 C 端轉戰 B 端之后，發現 B 端產品吸引我的有以下幾點。
1. 更有挑戰性
B 端產品相對而言，場景、功能、業務流程、信息架構要比 C 端更復雜，面對的異常情況也比較多，一些專業性強的行業，甚至還需要一定的背景門檻，比如一些互金公司會幫助 PM 和設計師考取金融行業相關資格證。正因難度更大，設計 B 端產品才更具挑戰性。
而C端產品目前各行業基本成熟，產品同質化相當嚴重，競品中有大部分都差不多，設計師很多時候的工作就是在做領導和產品經理的需求，「借鑒、學習」成熟競品的設計。而 B 端市場還處在發展中狀態，現在正是市場紅利的時候，競品雖少，但商業競爭殘酷，即便下載了競品，你沒有體驗賬號還是進不去的，所以從一定意義上講，做 B 端產品的設計，很多時候都需要自己去調研用戶需求，去摸索設計方法，并做出方案去驗證它。對 UI 和交互設計師來說，復雜的業務場景和產品邏輯能讓你養成嚴謹的設計習慣（思維），以后 UI 轉交互，或轉產品經理，B 端的設計經驗都是一個非常牢固的基礎。
2. 更能體現設計師的價值
上面也說了，C 端的成熟產品很多，產品也經過市場檢驗了，優秀的產品站在更高的角度，去除設計師自己的情懷來看，在一段時間內很難再有突破性的創新，只能在細節和體驗上微創新，主要還是靠產品經理發現功能痛點或運營的手段，設計師在這種情況下發揮的價值有限，往往地位也很低下。一般的互聯網公司，很多設計師都是執行者，很難參與到產品層面的工作，在開發眼里覺得設計師就是畫圖的。
3. 更能進行行業深耕
B 端設計師對行業、業務的了解遠遠深得多，他們做的不止是框架層和表現層的東西，每設計一個功能，必須要了解該功能在整個產業鏈的位置、功能目的，對其他業務環節有什么影響等等，只有對行業了解得更深入，才有更多的機會享受行業帶來的紅利。
以上是我的個人看法，當然設計師如何選擇 C 端和 B 端，這和自己的興趣、職業方向有非常大的關聯。偏視覺的設計師做B端產品時肯定會有一些局限性，偏交互的設計師在你經歷完 B 端的產品設計之后，你會發現 C 端的邏輯真的很簡單。所以無論怎么選，請先考慮好自己的個人因素，并不能因為現在 B 端火，你就跟風，喜不喜歡、適不適合、能不能在 B 端領域生存下去，還是要看你自己。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區別B端與C端的產品設計差異？我總結了26條對比！
中國互聯網公司的迅速發展正在推動著整個軟件行業的審美革命，在 C 端產品市場逐漸飽和的情況下，互聯網大廠正在將資本逐步轉移到 B 端市場的廣闊藍海中。“B 端 C 端化”的設計理念也應運而生，認為可以用 C 端的模式和思維來進行 B 端產品的設計。
除了剛剛有說到的資本慢慢向 B 端市場的藍海轉移，還有一點就是中國互聯網環境的迅速發展，智能手機的大范圍普及，工作人群的年輕化，使得人們已經熟練的掌握了各種軟件的使用，并且在快速迭代的產品中慢慢變得挑剔、謹慎。
并且不斷優化迭代的互聯網軟件產品也在無形中為用戶完成了底層認知的搭建，一些功能、操作、交互邏輯已經深入人心，用戶也已經被教育成了”高玩”。
所以如今一些新型 B 端產品的設計理所應當的在用戶體驗五要素中最貼近用戶的結構層、框架層和表現層中與一些 C 端產品在一定程度保持了一致，這種設計理念其實也很好的解決了傳統軟件的復雜、門檻高、難用等痛點，很大程度降低了用戶的認知成本和學習成本，把高效、簡單、易用的工具帶到大家的日常工作中。
對這個概念的理解我認為是：”B 端產品在使用體驗和視覺感受這兩個方面和 C 端產品接近”。這是我們設計師需要特別關注的，傳統的思維中，大多數設計師會認為 B 端是給公司內部人員或者商家使用的，只是一個管理系統，并不需要太過于精細，至于體驗也是停留在“能用就行”的程度。但是在我看來不管是 C 端還是 B 端，其實它的使用對象都是“人”，應該要遵循人們對于事物的認知和一系列復雜的人體工程學操作習慣。兩者都需要關注用戶在使用時的體驗感受，順暢的使用流程、清晰的信息展示和高效的行為效率，以及有效的引導都能夠快速的幫助用戶完成目標任務。無論是 C 端設計還是 B 端設計，滿足這些條件無疑可以給用戶帶來更好的體驗。
但是也不能以偏概全的認為 C 端的設計思維可以完全復用過來。B 端產品的場景其實比 C 端產品還是要復雜的多，應該說是各有各的側重點，思維和設計模式上不能完全照搬，下面我就先說說它們各自的不同處，再舉例帶你看看 B 端產品在哪些方面可以向 C 端產品借鑒學習。
1. 使用者不同
B 端使用者多是同一個組織集體，以群體為單位進行協同。比如：老板、部門主管、員工或商戶。而 C 端使用者相對比較單一，目標用戶群體即是主要使用人群，使用目標、偏好、個性比較明確。
2. 業務不同：
B 端業務大多數會存在多重維度、場景，使用場景跟業務緊密相關，同一個系統不同角色使用時的業務處理和所關注的數據信息，側重點會有很大的不同，需要全局考慮。不同角色使用產品的流程差異大，需要不同業務上更專業的解決方案。而 C 端業務一般維度比較單一，業務邏輯相對固定，任務路徑和展示內容比較單一。
3. 價值主張不同：
B 端注重效率、成本、管控、數據分析等。追求產品的穩定性、業務的增長性，保證產品性能和技術上的安全性。而 C 端注重用戶的體驗、使用簡單、有樂趣。
4. 產品思維不同：
B 端產品多數基于服務思維，工具化思維，更加理性；更多的是幫助 B 端用戶提高效率，完成業務目標。而 C 端多數為產品化思維，游戲化思維，更感性，更多的是娛樂和情感的滿足。
5. 產品形態不同：
B 端產品注重業務的梳理，多數會用到圖表、表格、模型，多數產品形態偏向更垂直行業或更專業的面板形態。而 C 端更注重用戶的感受，會用到很多夸張的動效，炫彩的顏色。
1. 結構層
結構層確定各個將要呈現給用戶的選項的模式和順序。結構層是用來設計用戶如何到達某個頁面，并且要考慮他們完成事情之后能夠去哪里。
具體在 B 端產品的表單交付場景下可以體現出，以前的 B 端表單往往過于冗長，借鑒 C 端一些注冊場景的設計，把表單拆分成 3 步內的行為步驟，減少用戶的疲憊感提升體驗。
2. 框架層
產品的框架層包括：按鈕、控件、照片、文本區域的位置?？蚣軐邮怯糜趦灮撁嬖O計布局的。
具體在 B 端產品的列表頁可以體現出，列表頁中整體的按鈕、文本區域的位置、搜索和篩選的布局設計其實與 C 端產品中的商品詳情頁是類似的，遵循用戶的閱讀順序和視覺焦點來進行設計。
3. 表現層
視覺、聽覺、（觸覺）的體驗設計。多體現在一些情感化的設計也被運用在了 B 端產品中。
反觀現在 C 端產品的一些設計風格和流行趨勢，有哪些可以運用在 B 端產品的設計中呢？
1. 3D 化
B 端因為對數據的展示有較強的需求，用戶在使用過程中提高效率的判斷緯度也包括信息數據的獲取效率，而 3D 的視覺在數據可視化層面有著天然的優勢，可以幫助用戶更快速的理解數據維度所表達的核心價值。近年來網速等硬件設施的升級也為 3D 化視覺帶來可落地的基礎，設計師也嘗試在產品設計中融入更多的 3D 化元素。
2. 情感化
人們對傳統 B 端產品的印象往往是覺得它們比較枯燥、呆板的，如今一些新型的 B 端產品的設計理念也試圖在拋開用戶對于產品的這種既定印象，所以很多產品在往一些娛樂化、IP 化的方向嘗試，并且都達到了一些比較好的效果，未來在這方面的思考和嘗試只會越來越多。
3. 個性化
B 端產品的同質化嚴重，所以 B 端產品也需要從一些產品定位去定制更加富有個性的品牌基因，可以讓用戶產生對產品的感情，達到從同類產品中能夠脫穎而出的目標。
不管是 B 端還是 C 端，目的都是為了解決業務場景中遇到的問題，使用對象都是人，都應該站在“人性”的角度考慮問題，有人說 B 端產品一般都不注重設計，C 端產品的設計更能滿足設計師對美的追求，我只能說它們的側重點不同，C 端更注重視覺感受，要做到在視覺表現的感性層面吸引用戶，而 B 端其實更為復雜，需要做到底層的強大數據處理能力，產品的專業性包括交互、視覺的吸引力，這樣才能從眾多產品中得到用戶的認可并脫穎而出。設計師還需要不斷打磨細節和優化體驗來吸引和留住用戶。
所以說“B 端 C 端化”也只是在某些方面通用，但核心側重點不同，不能以偏概全、一概而論，但可以借鑒與參考，B 端產品也可以做的很精彩。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區別B端與C端的產品設計差異？我總結了26條對比！
我發現很多新人設計師和我當年一樣，有一個誤區，認為做C端就是比做B端更好。尤其如果能做知名C端產品，想想都開心。
△ by Chris Ota @ Dribbble
我作為一個兩者都做過的大廠設計師，想要總結一下自己多年的經驗和觀察。如果你還在猶豫選擇做C端還是做B端，或者擔心做B端不好，無論你是UX還是UI甚至是PM，都一定要用心看看：
P.S. 本文不能代表所有情況，只能代表很大一部分典型狀態。
領導和客戶，哪個更難搞定？
我覺得領導更難搞定。
很簡單，如果作為一個基層設計師，你不知道自己有多少層領導，例如設計層、項目層、產品層、公司層甚至集團層…
而且，每一層可能還有不止一位領導。
更可怕的是，他們之間的意見可能統統不一樣…
這還不包括一些與你意見相左的平級隊友…
而方案評審有時還逐層遞進，每一層改一次。好像升級打怪一樣，你還統統無法拒絕。
經常是A、B、C、D方案隨機組合各遍，最后發現又回到了原點…很多情況下，C端大公司里做設計，時間就是這么被消耗掉的。
那B端就好些嗎？
不但要應付本公司的領導，而且還要應付對方的領導，層級還豈不是更多了？
并不是這樣。
雖然領導數量變多了，然而金主經常只有一個——甲方公司內，即能夠審批是否為該項目付費的領導。
對于B端公司來說，做項目的目標特別明確，那就是——能不能讓甲方爽快給錢。
只要錢給夠了其它都好說，不像C端公司那樣，考慮的東西特別多：口碑、留存率、轉化率、活躍度…
也就是說，即便本公司領導不喜歡你的方案，但只要金主爸爸喜歡了，一般就不會有什么問題，畢竟誰也不會和錢過不去。
當然，甲方內部自己意見不統一的情況也是有的，但一般外包項目都會有比較明確的負責人，所以很多時候也不會太復雜。
很多C端公司不重視匯報，很難開一次正兒八經的進度報告會。因為就那么幾個人，反正辦公室里抬頭不見低頭見，何必整那些“形式主義”。
甚至設計規范什么的，意思意思就好了，反正大家翻來覆去也就那么點頁面，文檔做精致了給誰看？
B端就不一樣了。
一整個項目下來，真正和甲方面對面的機會不多，所以每次都一定要特別隆重：
明明只需要一個步驟，恨不得拆分成兩個，一定要讓金主爸爸感覺服務到位、物超所值，最好是能夠多給點錢。
在C端公司工作，你會發現你學的那些設計流程根本用不上幾個，因為絕大多數需求都小得跟擰螺絲釘差不多了。
當然，你申請C端工作的時候，作品集里的項目流程一環不能少，得整得跟造火箭一樣。
C端公司通常不求數量，更求質量。自家產品的流量來之不易，必須長期迭代維護，才能不被競爭對手超越了。
結果需求越來越細，設計方案可以為要不要圓角、標題字體要不要大1號、留白要不要多2個像素之類的小問題爭論半天…
B端就不一樣了，就跟做飯店一樣，講的是翻臺率。項目能夠1個月搞定，就絕對不要拖到1個半月。
最好是永遠不要迭代，一次過審，盡快拿錢收工走人。
至于細節問題，只要剛好夠忽悠甲方那就夠了，多一點都是浪費。
C端產品有點像快銷時尚，隔一段時間就得改個版。也不是因為之前有什么問題，就是給用戶換換口味，刺激一下他們的“消費欲”。
而且每推出一個新功能時，界面上最好是設計得有點個性，生怕用戶感覺不夠新奇，沒有點擊欲。
B端就不一樣了，經常是項目一次性交付，只要不出問題就幾乎不迭代。
甲方已經把價格壓得這么低了，還追求什么個性風格？還不如全部組件化，一套規范搞定N個界面。不容易出錯，還能把成本降到最低。
這句話不難理解，可以從前面的內容就可以推理而來。
C端追求個性，需要不斷推陳出新，從感官上刺激用戶，那么視覺設計的工作就不會少。
而由于C端產品的需求大多以局部迭代為主，少有大改或者從零到一的機會，所以交互上可以發揮的余地多少有些限制。
△ by Anton Mikhaltsov @ Dribbble
B端常用組件化設計，需要個性化的地方不多，很多后臺頁面甚至完全不需要視覺設計。
而且很多B端公司會將同一套視覺風格用到不同的項目中，頂多換個色調、改個首頁風格。
而拼湊組件的工作，通常交互設計師就可以解決。
△ by Tom Koszyk for EL Passion @ Dribbble
最后說一點，我認為C端與B端沒有高下之分，就看個人取舍。
但要注意的是，一旦你選擇了其中一個，以后再換方向可能就沒那么容易了，所以做選擇是要謹慎。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區別B端與C端的產品設計差異？我總結了26條對比！
經常在網上看到「B 端產品 C 端化」的討論。
一開始我以為這個概念是說 B 端產品以前做得太差了，但隨著競爭越來越激烈，以后也要像 C 端產品那樣注重用戶體驗，更加輕量化、趣味性和人文關懷才行。
當時我還挺不以為然，感覺像是噱頭或者自嗨。
把用戶體驗做好雖然重要，但是這對 B 端公司的實際業務（錢）未必有什么直接影響。
因為對于絕大部分客戶來說，功能、效率和價格才是真正的硬指標，而且光是能找到能同時滿足這三點的產品就很不容易了！
然而，我最近剛開始參與一個 B 端項目，為了做競品調研，我試用了國內外十多款產品（國外為主）。
做完之后，我深刻反思了自己過去對「B 端產品 C 端化」的理解還是太膚淺。
其實 B 端產品 C 端化，并不是因為傳統的 B 端產品沒 C 端好用（不是這么比的）。
其實關鍵還是獲客模式的轉變。
傳統的 B 端產品是銷售驅動，銷售人員通過電話、上門拜訪等形式促使客戶下單。
一旦成功賣出，只要后續的服務不太差，客戶就沒必要更換遷移。
現在 B 端市場越來越大、行業信息越來越透明、客戶的判斷能力越來越強，傳統銷售模式開始變為互聯網營銷。
B 端產品在網上發布信息并投放廣告，吸引客戶自己前來試用并購買，只需提供少量客服人員即可。
這與以往的 B 端業務模式有很大不同，所以就需要變革。
所謂「B 端產品 C 端化」，表面上是學習 C 端的用戶體驗，背后的真正意圖是要學習人家 C 端的互聯網獲客能力。
我發現 B 端產品的 C 端化程度，和他們的互聯網廣告投放力度成正相關。
例如我在油管上經常受到 Monday、GoDaddy 這兩款 B 端產品的輪番轟炸。
先不說好不好用（畢竟我也不是目標客戶），我發現他們用起來真的很有「C 端感」，和傳統的 B 端產品果真不一樣。
倒不是什么“輕量化、趣味性和人文關懷”，而是因為他們在我打開網站的那一刻，就開始不斷吸引我探索使用。
我拿 GitLab 和 Monday 的官網首頁對比一下，也許你就能感受到了：
前者像是一板一眼的「老實人」，后者則像是對你笑瞇瞇的「綠茶妹」，高下立判。
“輕量化、趣味性和人文關懷”這些東西，并不足以打動用戶試用和購買，頂多只能算是「低段位」手段。
只有「高段位」手段，才能讓用戶不自主地地被吸引，心甘情愿地掏錢。
可是要做到「高段位」真的很不容易，我今天就總結幾個技巧吧～
1. 直接坦誠
遇到兩個陌生人：一個打官腔又遮遮掩掩的；另一個說話友善接地氣又誠實，你會更喜歡哪個？
可能大多數人跟我一樣會喜歡第二個。
C 端化做得好的 B 端產品，會把自己的產品預覽圖直接放到首頁供人觀看，而不是搞一張概念圖外加一堆高大上的廣告詞。
前面放過的那張案例，這里也可能拿來用：
GitLab 的官網畫了一些很抽象的概念圖，寫了一些很抽象的描述，給人感覺很模糊。
Monday 的官網明確把自己的業務類型列了出來供用戶選擇，還把每種業務對應的圖標和展示方式畫了出來，感覺很明確清晰。
2. 有效互動
遇到兩個健身房銷售：一個上來就說一個勁地介紹服務；另一個則先確認你平時的健身習慣，再根據你的情況介紹服務，你會更愿意聽誰說話？
我肯定更喜歡第二個。
C 端化做得好的 B 端產品，不是簡單地展示信息，而是先了解用戶，再根據用戶的需求提供不同的信息甚至服務。
Zendesk 的網站，會把自己的功能列出來給用戶，給的圖像和描述又很抽象，毫無互動感。
而 Asana 會讓用戶選擇自己需要的功能，并直接給出具體案例的界面展示圖。
3. 降低門檻
遇到商場逛街時遇到兩個陌生餐館，一家在二樓；另一家在一樓，你會愿意嘗試哪家？
肯定是第二個。
很多 C 端化做的好的 B 端產品，會把表單用彈窗的樣式放在產品上面，讓用戶感覺只要填寫完就能立即使用了。
比起 Trello，Smartsheet 只是在表單展示了一下產品內部，就讓用戶感覺門檻低了好多。
即便 Smartsheet 的新用戶后面發現背后那張圖真的這是一張圖而已，要填的一點不少，但這時都已經快填完了……
4. 循序漸進
兩家陌生的兩家餐廳都把菜單擺出來了，一家的菜單寫得密密麻麻；另一家的菜單雖然菜品不多，但是推薦菜品和菜式分類很清晰，你會更愿意嘗試哪家？
我相信很多人都會更愿意嘗試后者。
C 端化做得好的 B 端產品，不會太在意自己的產品是不是看起來功能齊全，而是更在意用戶是否能夠很好的理解產品，不要造成心理負擔。
上圖來源：Figma 這些交互細節，B 端設計也值得借鑒
Sketch 和 Figma 的屬性面板在功能上其實沒有很大的差異，但是后者看起來卻清晰簡潔許多，對新用戶更加友好。
B 端產品 C 端化這個理念其實很好，但如果被誤以為只是向 C 端學習用戶體驗那就可惜了。
用戶體驗只是手段，關鍵目的是在沒有銷售人員參與的情況下，如何從互聯網獲客。
這次的經驗的提醒我，以后如果再看到一些很火概念，不要簡單的從表面理解，而是要站在決策者的角度，多思考背后的真實意圖。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區別B端與C端的產品設計差異？我總結了26條對比！
“組件”是平臺級產品非常重要的組成部分，設計組件不僅可以節約設計和開發成本，更是設計理念的約束性體現。但是，隨著平臺級產品業務場景的復雜度不斷增加，過往沉淀的設計組件的交互模式和視覺形式，卻跟不上業務發展的訴求。因此，我們思考：如何建立和迭代一個優秀的組件庫——不僅能保持良好的普適性，解決全平臺產品的體驗一致性的問題；并且能夠保持各個業務線的特色和定制化需求，即所謂平臺級組件的“和而不同”。
隨著近兩年業務的發展，早期沉淀的組件漸漸無法滿足業務訴求，一部分組件的使用率和覆蓋率很低。
因此我們決定對貝殼平臺組件進行一次全新的升級。我們的目標不僅是針對“基礎組件”進行優化，保持其良好的通用性，達到“和”的目的；更希望能夠承載業務線（二手房、新房和租房）更多體驗場景的需要，做到服務于業務的“不同”。
為了更好的實現升級目標，我們思考了以下幾個問題：
1. 設計組件庫的使用人員有哪些不同的角色？他們的訴求是否有區別？
在我們眼里，設計組件是對設計工作的一種管理，而設計工作從產出到落地的完整鏈條上，主要有三種角色的人群：
貝殼平臺設計師和各個業務線設計師：平臺設計師窮舉組件使用場景的同時，提煉業務訴求，幫助業務線設計師通過組件更省時省力的高效完成設計工作。
開發團隊：通過設計師的輸出，明確組件開發的具體框架和自由度（例如按鈕顏色是否支持不同業務自定義等）
產品團隊：通過設計組件文檔明確設計的標準，在各角色有共同標準的認知下，需求中可使用組件搭建的部分無需重復提需求，節約各方成本。
因此，設計師需要產出的并不是一份簡單的組件庫源文件，而是一份以不同角色合作伙伴的視角，都能看得懂的設計組件表達文檔。
△ 圖 1 給設計、產品和開發不同的文件樣式
2. 組件真的是越多越好嗎？
我們給出的結論是：面面俱到反而無從下手。在做設計組件時，大多數同學都會有患得患失的心理，認為組件足夠多，就可以應對更多的使用場景，規范也足夠細致和統一。
但是這是一個比較理想的狀態，過于低微的顆粒度下，設計反而會失衡。這里的失衡是指，創新和規范之間的平衡被打破，顯然不是我們想要的。并且平臺級組件庫是具備再生和持續發展的生長能力的，因此不必一味追求數量。
3. 采用什么方法可以合理的控制組件的質量和數量，挑選出通用度高的組件呢？
我們優先梳理了貝殼平臺流量 TOP30 的核心關鍵頁面，依據數據圈定范圍，然后進行組件的整理。如下圖，我們發現使用率最高的前十名組件，按照降序排列依次為：tabs 選擇>Navbar>房源卡片（業務通用組件）>經紀人展位（業務通用組件）>按鈕>通知與提示>彈層>搜索框>操作菜單>標準懸浮球。
△ 圖 2 貝殼平臺流量 TOP30 頁面組件應用情況
這樣，我們就可以按照以上優先級，優先設計和代碼化使用頻次較高的組件。
我們將貝殼原有組件庫的全部組件打散，重新定義后分成三大類別：
平臺基礎組件：指不具有業務屬性的元件及基礎組件，例如：按鈕/表單/列表/搜索欄/系統反饋彈層/操作欄/Navbar 等。
業務通用組件：指橫跨多業務，但在不同的業務場景中略有變化，有公共元件可提煉，例如：經紀人展位/房源卡片。
業務特性組件：指只屬于某一業務應用范疇的組件，無公共元件可提煉，但是在單一業務線復用率較高。
組件的明確分類，可以幫助我們在日后每當有新增組件時，以統一的標準和原則進行歸納和整理。
除了優化平臺基礎類型的組件外，我們還對其中使用頻率很高的業務通用組件——房源列表進行了優化。
房源列表是在貝殼平臺通常以線性結構呈現的。用戶通過縱向掃讀來獲取房源宏觀信息，橫線瀏覽來了解單個房源條目的細節信息并進行相關操作。它在二手房、新房、租賃、海外等等業務線，都會經常被使用到。貝殼平臺原房源列表樣式，由于業務的發展，需要展示的信息逐步增多，依次羅列在列表中，導致展示效率變低，無吸引用戶的亮點，最終導致用戶對房源列表的“決策效率降低”。
而想要提升決策效率，并且優化后的列表能夠在各個業務線使用，我們先要了解，在不同業務場景中，房源卡片都要展示哪些內容？這里我們應用到了先前研究得出的結論——用戶瀏覽房源列表的心智模型。
△ 圖 3 用戶瀏覽房源的心智模型
在心智模型的指導下，我們進行了“元素窮舉”。
△ 圖 4 元素窮舉
得到了具體展示哪些元素后，我們開始思考，一個包容性強的列表底層結構應該是什么樣子？經過幾次的反復推敲和嘗試，我們得出如圖所示的三層結構：容器背板層、可交互操作層、內容展示層。
△ 圖 5 房源列表的三層結構
容器背板層：它是承載列表內部所有內容的盒子，我們在這一層，定義了容器的形狀，圓角等屬性，使它成為一個統一的底層模版。
可交互操作層：這一層放置的是用戶關于列表可進行的全部操作，例如關注，查看 VR 圖片等。并且，我們針對具體每一種操作行為，定義了統一的交互方式。
內容展示層：這一層涵蓋所有用戶可以查看的具體信息，包含房源標題、樓盤名稱、房源詳細信息和價格的動態浮動變化信息。
通過三個層次的劃分，我們可以清晰的定義每個層次的具體的職責是什么，這有利于我們后期面對復雜業務場景和海量信息內容時，可以更好的去歸納和組織信息的呈現。
在完成了元素窮舉和結構分層之后，我們繪制了一個基礎框架模版，如下圖：
△ 圖 6 房源列表基礎框架
然后我們將不同業務線的具體細節信息，嵌入模版中，設計成各個針對不同業務和不同場景使用的房源列表。帶著這樣的設計結果，我們與業務線的產品經理和設計師同學進行了一次深入的探討，并且確定可推行迭代的節奏。
綜合 14 天數據，二手房改版后，CTR 由原來的 44.65%提升到 51.35%。這對于房源列表來說，是非常難得的。
△ 圖 7 改版后的數據結果
以上就是本文的全部內容，相信大家已經掌握了 C 端組件庫建立的基本方法，這里我們總結一下組件庫的創建流程：
△ 圖 8 C 端組件庫的創建流程
組件庫是每一位用戶體驗設計師，在日常工作中積累的設計資產。組件要做到“和而不同”，“和”是指用規范化的底層容器，將抽離出復用率高的元素包裹起來，形成體驗一致，交互一致的封裝模塊?！安煌笔侵福織l業務線可以根據自身具體的使用場景，去定義各自在內容展示層要展示的元素，保證了一定的自由度和各自生長的能力。
房源列表在貝殼平臺首頁已經上線有半年左右的時間了，通過改版，用戶使用房源列表時的決策效率有一定程度的提升，業務覆蓋也逐步擴大。在研發老師的協同下，實現了 Native 和 Flutter 組件的封裝，大大縮短了開發時長，從而提升了產品整體的研發效率。
希望能給同樣正在建立組件庫的設計師同學們帶來一些啟發，貝殼用戶體驗團隊也會繼續致力于更多業務特性組件的深挖，期待你的關注。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區別B端與C端的產品設計差異？我總結了26條對比！
說到網格的應用，我們可以追溯到很遠。古埃及人在他們的雕刻和繪畫中描繪的人物遵循了一個規則，將比例標準定為人的拳頭，一個站立的人物從地面到頭頂測量為 18 個拳頭。
公元 1040 年，首次在中國出現活字印刷，主要采用的是泥活字。在西方，金屬活字印刷術在 1450 年左右出現，而古騰堡圣經在 1455 年左右的發行將是出版界的第一個重大里程碑。金屬類型的文字更加充分利用了網格。
到了 1917 年，網格在荷蘭風格派運動中最為明顯，由藝術家 Theo van Doesburg 和 Piet Mondrian 領導。他們將畫布限制在相交的垂直和水平線條和原色上。
1919 年，德國的包豪斯學校成立，他們主張的簡潔實用的設計理念同樣用到了網格的概念。像著名的包豪斯國際象棋，它的棋子都是正方形和長方形等簡單的幾何形體，可以緊密地組合在一起，以便緊湊地存放。
1950 年代，一種嶄新的平面設計風格終于在瑞士形成。這種風格的設計，力圖通過簡單的網絡結構和近乎標準化的排版方式，達到設計上的統一性。這種風格一直到現在影響了很多網頁和平面設計師。
隨著第二次世界大戰的結束，一種新的消費主義出現了。經濟快速發展，廣告業的繁榮逐漸興起。保羅·蘭德作為美國第一個應用瑞士平面設計風格商業藝術家，他以企業品牌標志設計及商業廣告設計而聞名，網格在這種新的廣告形式中發揮了重要作用。
今天我們要聊的是關于網頁設計的網格系統。說起來很簡單，但其實里面包含了很多復雜的概念。網頁設計的第一步就是如何進行布局。標題、導航、按鈕放在哪？每個元素之間的間距是多少？這些都離不開頁面布局。作為網頁設計的基礎，頁面布局可以極大地影響用戶閱讀的流暢度和直觀度。在聊頁面布局前，我們需要先普及一些概念。
頁面布局是網頁上所有視覺元素的排列。通過頁面元素的有序排列，可以建立元素間的關系，從而更好地引導用戶體驗。作為網頁設計的關鍵組成部分，布局決定了頁面哪些元素最受關注，以及頁面的視覺整體平衡?？傊?，一個好的頁面布局可以將用戶的注意力引向正確的方向。先將他們吸引到最重要的元素上，然后按照重要性順序閱讀余下部分。
要實現良好的頁面布局，最好的辦法就是應用網格系統。網格是設計的骨架，可以幫助我們對齊，有序組織頁面內容。通過正確使用網格，我們不會隨意地把元素放到頁面里，而是明確地知道將這些元素放到哪些合理的位置上，有助于提高設計效率和設計質量。無論是 PC 端還是移動端設計，通過網格都將對我們做出有指導性的設計決策并為用戶創造更好的體驗。
網格由幾個部分組成，分別是 Column (列)、Gutter (槽)和 Margin (邊距)。它們在一起構成了屏幕的水平寬度。
接下來通過幾個圖例來詳細解釋下。
列(Column)是跨越內容區域的垂直部分。在網頁設計中列越多，網格就越靈活。列的寬度由設計師自己來決定，傳統做法是在 PC 端網頁上使用 12 個，Pad 端使用 8 個，移動端使用 4 個。列寬一般定義為 60~80px。列寬是影響實際內容寬度的關鍵因素。
槽(Gutter)是列與列之間的間隙。槽的作用是將每個模塊的內容進行縱向分割。較寬的槽更適合較大的屏幕設備，可以通過更寬的槽去拉開頁面的間距，使頁面信息展示的更加舒展。
邊距(Margin)是內容與屏幕左右邊緣之間的空間。更寬的邊距更適合更大的屏幕，因為它們會在內容的周邊創建更多的空白。
介紹了以上 3 個概念，我們可以利用 8pt 網格系統來對頁面進行分割。8pt 網格系統，使用 8 的增量來調整頁面元素的大小和間距。也就是說，頁面中的高度或寬度、邊距或填充都是 8 的倍數。
有沒有想過我們在做移動端界面設計的時候為什么選用特別小的畫板，但我們的顯示設備卻非常大？
比如，我們用 375×812 的尺寸來進行設計 iphone X，但其實 iphone X 的實際尺寸是 1125×2436，是我們設計尺寸的 3 倍。
因為設計尺寸會以 2 倍或 3 倍的像素進行渲染，比如 iphoneX 就是以 3 倍尺寸進行渲染，iphone8 或 iphoneXR 會以兩倍尺寸進行渲染。所以我們在進行設計的時候可以采用 1 倍最小尺寸進行設計，以適配到不同設備的不同尺寸。因此，1pt 可以分別轉換為 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。
所以我們設計一個 16pt 的圖標，導出@2x 或者@3x 的尺寸應該是 32px、48px
使用偶數來調整元素大小或元素間的間距可以很好的適配到各種尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇數來定義元素尺寸或間距，就很容易出現半個像素的情況。5px 在 1 倍尺寸中導出為 1.5 倍尺寸就容易出現半格像素的情況。之所以選擇 8，也是因為大部分的屏幕尺寸是可以被 8 整除的，這樣就很容易適配。此外在 PC 端沒有使用 2 或 4，是因為其顆粒度太小，不便于設計師進行操作；用 8 的倍數來設計還有一個好處就是避免我們在設計中過于糾結。
基于 8pt 網格的排版系統。字體的大小可以設計成不同的尺寸，但它們的行高要盡量是 8 的倍數。
在網頁端設計時，很少會遇到幾倍尺寸的輸出，所以通常情況下都以像素為單位，這樣的話就是 8px 的倍增。我們就可以把間距或者元素定義成以 8 的倍增不同尺寸。
例如：
small = 8px
medium = 16px
large = 24px
x-large = 32px
……
普及了上述概念后，我們一起進一步了解下頁面的布局，頁面布局大體分為幾類：固定布局、流動布局、自適應布局、響應式布局。
固定布局，顧名思義就是頁面的整體寬度是固定的，不會隨著瀏覽器的拉伸變化而變化。這種頁面相對死板單一，但對于設計師來講相對容易設計，也易于開發。
流動布局，它會隨著瀏覽器窗口的大小而變化，但是它變化的邏輯是以模塊的百分比來定義的。無論瀏覽器的寬度是多少，流動布局都會填滿頁面的寬度。其次流動布局不需要像響應式布局那么多樣性的變化。它在極大或極小的頁面寬度上會存在一些缺點。比如頁面很寬，內容可能會被拉伸得太長，單個文字段落可能會在單行上貫穿頁面。相反，小屏幕上的多列布局也可能對內容來說過于擁擠。
自適應布局可以理解為是固定布局的一個升級版，舉個例子，當頁面內容為 960px，此時頁面無論再往多寬拉伸，頁面內容始終顯示 960 寬度。如果縮小寬度到一個臨界值時，比如 960px 以內，頁面就會縮小到它的第二個寬度，假設是 640，以此類推。這個臨界值我們稱之為斷點。
響應式布局結合了流動布局和自適應布局。隨著瀏覽器寬度的增加或減少，響應式布局將像流動布局一樣進行變化。同時，如果瀏覽器寬度超出了某個臨界點，也就是斷點，那么頁面布局也會發生改變。通常，響應式布局是為了能夠兼容網頁端、平板端和移動端等不同設備進行設計的，這樣會給用戶帶來更好的瀏覽體驗。
最后用圖例展示下如何利用網格系統在網頁設計上進行頁面布局。
在 figma 上的設置如圖：
我們可以設置好列數，定義好列寬和槽寬來決定頁面的實際寬度。
在網頁設計上使用網格系統淺層價值是為了讓頁面布局有章可循，使頁面看起來更加統一，深層價值其實是為了做自適應布局，讓頁面在不同寬度下適配到不同的設備上。
這里我也創建了 4 種不同尺寸的網頁端網格系統，供大家參考，大家也可以根據自己的實際情況去建立自己的網格。
https://www.figma.com/community/file/1076073453929437640/8pt-web-grid
最后推薦一款 sketch 智能布局網格的插件，喜歡的同學附件進行下載。
切記，在實際項目中，盡可能靈活的使用網格，不必拘泥于 8pt 的單位，但盡量保持在偶數范圍。
參考文獻：
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
藍藍設計的小編 http://www.syprn.cn
