彈窗作為應用的輔助窗口之一，在B端產品中占據重要作用，很多產品甚至大部分功能都需要在彈窗中完成。有些彈窗會被用來承擔復雜的設置、有些彈窗會被頻繁調用、有些彈窗需要提供更詳細和更結構化的信息，如何處理好彈窗在整個任務流中的交互對UI來說非常重要，因此本文主要探討B端產品中的彈窗設計和規范。文末會提供可供調研學習的B端網站。
如果你想了解B端系統圖標的設計方法，可以瀏覽上一篇《小白適用：如何快速掌握系統圖標的設計方法》，歡迎討論指正。
不知道你們有沒有思考過“對話框”和“彈窗”的區別，我們平常所稱呼的“彈窗”主要著眼于動作，意思就是彈出來的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來的對象都可以稱之為“彈窗”。
在常用的兩個前端網頁開發組件Ant Design和ElementUI中，沒有單獨命名為“彈窗”的組件，都是細分在各個功能分類中。比如Ant Design中相關的細分就有警告提示、全局提示、對話框、通知提醒框、氣泡確認框等，而ElementUI中則又是不一樣的細分法，除了分類方法和命名不一樣，歸根結底達到的目的是一樣的，以上我們都可稱之為“彈窗”，當然在工作中用細分的稱呼會更專業更明確。
這里的“窗口”對標“對話框”和“彈窗”的概念，窗口是承載應用程序的區域，應用程序的窗口被打開，則表示該應用程序正在運行中。窗口可以移動、可以放大縮小，主要有二種姿態，一種是“獨占式”，一種是“暫時式”。顧名思義，“獨占式”就是需要占據大部分屏幕的應用，ps、ai的窗口就是“獨占式”窗口，而“暫時式”則大部分時間在后臺運行，比如音樂播放器、殺毒軟件等，只需在必要時打開即可。
一個應用通常由一個主窗口和若干輔助窗口構成，彈窗就是典型的輔助窗口之一。
對話框強調了用戶與計算機進行對話的過程，是疊加在應用主窗口上的彈出框，一般在對話中它會給出消息或要求輸入。當對話完成后，即可關閉對話框。說人話就是，對話框一般需要用戶進行操作，當用戶輸入或者點擊“確認”、“取消”等按鈕時，計算機會根據指令進行工作，這是一個人機“對話”的過程，因此稱之為“對話框”。
無論在現實中還是界面交互中，我們都不希望對話被打斷，所以對話框通常是模態的（下文會解釋模態和非模態的定義）。
梳理完三個容易混淆的概念之后，接下來主要從彈窗的二個角度展開討論：彈窗的分類和應用場景；彈窗的設計細節和技巧。
彈窗可分為兩大類型：“模態彈窗”和“非模態彈窗”。
模態彈窗：用戶必須給予彈窗反饋，除非點擊關閉或者操作完成，否則彈窗會一直在。形式上來說就是給當前頁面添加蒙層，使用戶將注意力集中在彈窗上。上文提到，無論在現實中還是界面交互中，我們都不希望對話被打斷，模態彈窗不會輕易被打斷，所以對話框通常也都是模態彈窗。
模態彈窗的常見場景：你打開了一個應用的模態彈窗后沒有管它，然后切換到其他應用程序中去，等你忙完回到原來的應用時，那個當初的模態彈窗仍舊在那兒等你。這就是模態彈窗，雖然看起來僵硬死板，但是它的目的和使用范圍通常是非常清晰的。
非模態彈窗：不需要給出反饋，不影響用戶的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。
下圖紅框中就是典型的非模態彈窗，它們可以同時開啟且互不影響，不會影響主程序的進程。
非模態彈窗的另一個特點就是：實時生效。點開非模態彈窗的同時仍然可以看見主界面，主界面會根據你的操作實時變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態彈窗則無法在你點擊其中一個表單的當下立即做出改變。
下圖例子就是非模態的屬性配置彈窗。
出于營銷目的，這類彈窗都會第一時間出現在你面前，直到手動關閉，它的特點就是不用登錄也會出現，提高曝光率，便于拉新和轉化。
主要是為了將一些重要信息通知給用戶，這些信息要么來自一些被觸發的事件，要么來自應用開發者的信息，一般在用戶登錄后第一時間彈出，確保用戶不會錯過。需要注意的是，在應用的通知中心一般也需要保留這類重要或者高級別的通知，以便用戶可以隨時查看回顧。
提示類彈窗是由應用程序主動彈出的消息，主要有三種狀態：錯誤、警告、確認。通常是用戶進行某項操作后給出的反饋信息，會中斷當前工作流，屬于阻塞型提示。
以上都屬于通知公告類的“模態彈窗”，特點就是一般不需要用戶具體操作，用戶將其關閉或者點擊“確認”等按鈕即代表用戶已經接收到該消息，彈窗就完成了它的任務。
“簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創建項目、分享鏈接、更改名稱等操作。
有些應用的功能配置中有很多復雜的屬性，簡單平鋪的彈窗無法滿足需求，需要分層分類歸納，于是從20世紀90年代開始出現了選項卡/標簽頁彈窗。它的優點是合理利用了空間，也能讓用戶更好的理解信息層級。
mac os 8.5系統的彈窗（發布于1998年10月）
monday.com的配置彈窗（簡潔的標簽頁）
標簽頁彈窗的設計必須合理且適度，找到信息之間的因果關系，仔細斟酌并加以連接整理。同時，單個彈窗中的標簽頁不宜過多，一般不超過五個（動態可增減的標簽頁除外）。
如果你的標簽頁過度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標簽頁的深度，將能夠歸納在一起的內容盡量整合，放置在單個標簽頁中；另一種辦法是拆分信息，分成多個簡單的彈窗。
下圖中的例子就是第一種辦法，整個彈窗有三個標簽頁，但是單個標簽頁中又劃分了更詳細的結構化信息，是一個典型的標簽頁少但信息量大的彈窗。
流程步驟彈窗與標簽頁彈窗接近，區別就是步驟彈窗需按順序進行，一般上一步未完成之前無法進入下一步，用戶注冊常用這種方式。
屬性配置彈窗主要為了讓用戶改變某一對象的屬性，可以是局部屬性也可以是全局屬性。
屬性配置也可以用模態彈窗，如何選擇用“模態”還是“非模態”？當你需要讓用戶實時看到界面的變化或者表單項簡單的時候可以選擇“非模態”，如果操作復雜或者信息加載比較耗時，則采用“模態”更合理。
下圖為實時生效的日期選擇彈窗
下拉菜單幾乎都是非模態，它的優勢明顯，沒有復雜操作和各種表單，只需要鼠標劃過點擊即可，快速。
上文中應用級的消息提示通常是模態彈窗，而非模態的消息提示彈窗則通常從頁面的頂部或者右側彈出，這類彈窗可以長時間駐留在屏幕邊緣，也可以一段時間后自動消失。
點擊按鈕時，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對元素進行簡單的操作，尺寸也會根據內容大小不一。
Tooltips跟上圖的氣泡框很類似，區別在于Tooltips更輕量，屬于頁面中最小的彈窗類型，用于功能的提示說明，通常都是文字，背景用深色來與主界面拉開層次。
一般來說，如果是明確的屬性配置彈窗都應該有一個標題來說明用途或功能，以及關聯的動詞來方便理解。比如“創建列表”、“刪除列表”、“修改配置”、“配置參數”等，不同標題對應不同的功能場景，前提是方便理解。另外，動詞在名詞前面或者后面都可以，注意統一規范即可，不要一會兒在前一會兒在后。
標題字號一般比默認文本字號大2px或4px，也有應用為了突出標題，選擇使用更大的字號，但大的字號也應該符合文字規范，而不是隨意使用。
模態彈窗應至少包含一個以上的關閉方式，常見的彈窗關閉方式有4種：（1）、右上角的關閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區域；（4）、一段時間后自動消失。
“關閉”按鈕在彈窗外：常見于營銷彈窗，一方面按鈕遠離彈窗，比較隱蔽，拖延用戶關閉彈窗的時間，提高信息的曝光率。
“關閉”按鈕在彈窗上：版式設計中有一個“破型”的概念，是一種打破規矩的設計技巧，能讓畫面快速吸引眼球，所以營銷類彈窗經常采用這種設計方法。這種概念可以理解為，我們希望用戶關注于被強調的部分，常見的場景就是ios系統批量刪除App的時候，應用圖標左上角會出現“移除”按鈕。這種方式強調了“關閉”按鈕，視覺上增加層次外，用戶的關閉體驗也更佳，減輕干擾性彈窗對用戶的負面情緒。
“關閉”按鈕在彈窗內：這是應用最廣泛最不容易出錯的方式，對用戶來說，固定在彈窗右上角的“關閉”按鈕代表了安全感，在誤操作或者想中斷操作時我們會自然而然地去右上角點擊“關閉”。
彈窗底部的按鈕一般有2種功能:（1）、取消或者確認；（2）、進入下一步流程。基于大多數用戶右手掌握鼠標的習慣，一般按鈕居右下角的設計方式更廣泛。這些按鈕上的文字大不相同，代表了對計算機的不同指令，但相同的結果都是關閉了當前彈窗。
有些應用也會采取按鈕居左的設計，這種方式有一個優點就是減少誤操作，讓按鈕遠離鼠標點擊熱區。
這種方式一般用于模態彈窗，除了彈窗中的關閉按鈕外，點擊彈窗外的任意區域關閉體驗更佳。操作配置類彈窗不建議采用這種方式，容易誤操作導致正在配置中的彈窗被關閉。
B端彈窗的標題字號通常比內容文本大2px或4px，常用字號為12px、14px、16px，14px為默認文本字號，12px為輔助說明字號，也有緊湊型頁面將12px作為常規字號。無論選用何種字號，都應跟主界面的字體規范保持一致。
左對齊：彈窗中應用最多的對齊方式，適合表單較多的配置類彈窗。
居中對齊：常見于消息提示類彈窗，適合圖文結合或者信息較少時的排版方式。
兩邊對齊：兩邊對齊的方式讓彈窗看起來更規整，適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對齊的方式，一方面左對齊比兩邊對齊看起來更有層次，另一方面多表單時兩邊對齊會使彈窗看起來冗長。
除了對齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內容了，在一些復雜的操作彈窗中，常常包含各種類型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項，很容易讓表單看起來凌亂，也影響了交互操作。
單行一個表單項：常見的表單排列，適用于表單較少的排版方式。
單行多表單并排：在復雜場景中，單行只排列一個表單項會讓彈窗超長，因此會采用多個表單并列分布的方式。這種方式存在2個問題：（1）、如果表單的標題長短不一，看起來參差不齊，下圖中的表單標題一樣長是最理想的場景；（2）、橫向距離長，導致彈窗過大。
標題與表單分行排列：越來越多的應用采用這種表單排版方法，這種方法可以兼顧更多場景，可拓展性也更高。這種方法會增加縱向空間的占用，不過眼睛焦點的縱向瀏覽比橫向瀏覽獲取信息效率更高，所以在表單復雜的情況下，相比于上一種方法也是一種更優解。
表單的排版不只局限于一種，我們需要根據表單內容來設計。但是需要注意3點：
(1)、當表單標題長短不一，上下無法等距排列時，我們要盡量將標題和表單分行排列；
(2)、一行不要出現太多的表單項，一般來說彈窗中最多一行排列三個；
(3)、表單的靈活性很強，哪些需要寬度固定，哪些需要根據內容可擴展可換行，我們都要在設計中加以規范說明，多考慮可能會出現的樣式問題，提前規避。
彈窗是一個容器，容器的大小取決于放置其中的內容物。這里主要討論場景復雜的對話框的尺寸規范，其他例如Tooltips之類可作為單獨的組件在需要的場景直接調用即可。
對話框的大小主要根據內容而定，B端應用中，一個尺寸無法滿足所有類型的彈窗需求，所以我們要設定幾種常規尺寸，一般可設定為4種：S（通知提示類）、M（配置簡單）、L（配置復雜或者擴展詳情）、特殊（根據實際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以內（除去導航欄、工具欄高度），寬度控制在1000px以內，如果你所設計的B端產品在某個固定的場景中使用，也可以根據使用場景而定，原則就是要讓彈窗能夠一屏展示完全。
這里主要分享一個小技巧，對于彈窗來說很實用。sketch右側屬性面板有一個“調整尺寸“功能，非常適合各種組件化的應用。不同場景下我們會需要不同尺寸的彈窗，有了這個功能，我們不需要每個彈窗都畫一遍，只需要創建一組基本的彈窗規范，其他尺寸可以根據所需場景調整。
未調整過的組件不能隨意更改尺寸，否則將變形不可用。
創建彈窗組件時，把彈窗里需要固定不便的尺寸參數設置好。（設置方法：靠左的左邊固定，靠右的右邊固定，對角的靠兩個邊固定，分割線高度固定，文字圖標寬高都固定）。
設置好后的彈窗組件即可在設計稿中隨意調整大小，固定參數不會發生變化，因此我們在設計規范中只需要做一種或二三種常見的彈窗樣式即可，不需要把設計稿中的每種尺寸都放到設計規范中。
表單同理，在組件中設置好參數后，調用時可以根據情況替換圖標、文字和寬高，非常方便。
在B端設計中，隨著數據量的增加和業務線的擴大，設計師在設計時，常常需要考慮到交互的可擴展性，我們設計的交互至少要滿足未來半年到一年的產品應用。因此作為使用頻率很高的彈窗，我們在設計時尤其需要考慮全面，不只為了滿足當前的場景，也要考慮未來可能應用的場景。
最后碎碎念一下，這是一篇從2020年跨越到2021年的文章，加上拖延癥，寫了很久...原本只打算簡單的分享和總結，結果越寫越多，越寫越擴展。其中很多內容是自己在實際工作中遇到的坑中摸索出來的，做個總結也便于自己的成長，歡迎各位大佬們批評指正。
文章來源：站酷 作者：time不休
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天想要和大家分享的是一個 Ant Design 的設計資產「列表」。它是企業級產品頁面中重要的組成部分，幾乎所有的產品都會用到它。
隨著企業級產品復雜業務場景的增量，Ant Design 的列表覆蓋度也受到了很大的挑戰，很多設計師說現有的組件和交互模式無法滿足他們的業務場景，導致他們需要重新設計列表，帶來了額外的設計和開發成本，同時對于全域產品的體驗一致性也帶來了挑戰。因此，我們決定一探究竟，去看看列表的底層基因到底是什么樣子，我們應該如何提高通用性和覆蓋度。
表格、列表、卡片列表的區別
在研究列表之前，我們首先將表格、列表、卡片列表這三個資產，從用戶的交互行為、使用場景、資產結構三個維度進行了分析，并嘗試做了明確的定義和區分，避免后期在使用過程中的概念混淆。
（1）表格的定義
表格通常是以矩陣式布局呈現，強調信息的瀏覽性，趨向于展示多而復雜的數據。數據按照矩陣布局對齊，方便橫縱瀏覽以及研究數據之間的關系。
（2）列表的定義
列表通常以線性結構呈現，能交互式地展示眾多數據結構相同的條目，且擴展性強。通過列表，用戶更容易縱向掃讀來獲取宏觀信息，橫向瀏覽來了解單個條目的細節信息并進行相關操作。
（3）卡片式列表的定義
卡片列表通常以網格布局呈現，用于承載數據間相互獨立的信息，擴展性大且個性化強。通過卡片列表，用戶會更聚焦于單個卡片的概覽內容，且很少會進行卡片間的數據對比，而是對單個卡片的數據信息進行查閱，并決定是否進行操作。
列表的構成
在清楚的定義了什么是列表之后，我們開始去思考一個列表的底層結構到底會是什么樣？經過幾輪的討論和試錯，我們得到了如上圖所示三層結構，它們分別是容器層、容器功能層、內容層。
容器層：容器層像一個盒子，它的大小、形狀決定了這個容器承載內容的體量，因此我們將列表的容器層默認值定義為一個寬1184px，高為44px的矩形。用戶可以根據業務需求調整其高度和寬度。
容器功能層：容器功能層象一個盒子的手提帶，用戶只要提起這個帶子，整個盒子就會被拎起來。也就是說，這個容器功能層是整個列表的全局操作。
內容層：內容層像放入盒子里的各種物件，用戶可以根據自己的需求在這個盒子里填滿各種東西，并在盒子外面貼上一些標簽，來告知盒子里都有些什么，當用戶需要查看具體的東西時，就可以打開這個盒子。
通過三個層次的劃分，我們可以清晰的定義每個層次的內容及具體的職能是什么，這有利于我們后期面對復雜業務場景和海量信息內容時，可以更好的去歸納和組織信息的呈現，于此同時高度結構化的組織形式也是保持資產內在一致性的關鍵要素。
模式化設計方法 — 元素窮舉
在列表的構成中，我們清晰的定義了列表的底層結構以及其對應的職能，到目前為止，你可以把它想象成是一個空盒子。當然，僅有這樣一個空盒子是遠遠不夠的，接下來，我們要在這個有邊界的空盒子里合理的規劃物件的收納，以及思考對這個盒子，用戶會有哪些操作訴求。因此，我們有了許多新的疑問，例如：
企業級產品通常都會在這個列表中放些什么內容呢？
這些內容是否可以能被抽離出一些共同的特征和展示形式呢？
我們應該如何更好的組織這些內容，提升用戶的閱讀和操作體驗的同時更好的解決通用性和覆蓋率的問題呢？
為了解決這些疑惑，我們嘗試了很多種方法，最終總結了一個新方法：Ant Design 模式化設計 — 元素窮舉。（關于 Ant Design 模式化設計方法詳情，請查看此處。）
如上圖所示，在元素窮舉之前，首先我們嘗試思考了一個問題：當用戶看到一個列表時，它的瀏覽順序和閱讀習慣會時什么樣子的。通過分析發現，在信息瀏覽的場景中，通常人們會以從左到右，從上至下的順序進行信息的瀏覽。于此同時，人們在獲取信息時，更習慣于先了解信息概要，再查看細節，最后作出判斷或決策。那么，基于以上兩個維度的分析，我們嘗試將單個列表條目的內容層進行區塊的劃分，得到了如下圖所示的三個區域：主題區、關鍵信息區、操作區。
主題區：主要呈現的是一些信息概覽，包括標題、時間、備注等信息，用戶看到這里就可以快速的對當前列表產生信息的認知。
關鍵信息區：該區是對列表中詳情數據的高度提煉，主要呈現一些關鍵信息，幫助用戶對列表內容進行知悉，輔助其更好的進行下一步的決策與操作。
操作區：基于業務的需求，放置相關的操作按鈕，從而達到產品的運作和流轉。
在完成區塊的劃分和具體的職能之后，我們開始思考，每個區域應該要有什么樣的元素才能夠更好更直接的展示列表信息，在此期間，我們例遍了上百個列表頁面，并開展了一次腦爆會，對每個區域的內容進行了元素的窮舉。
如上圖所示，我們在上百個頁面中梳理并抽取了每個區域可能出現的元素，并整理出一些通用性強，覆蓋率高的元素進行組件化。保證后期設計師在結合不同場景使用時的拼裝和靈活替換。此外，三個區的元素都有各自明顯的特征性，例如在主題區中的元素更加簡練、概括和基礎。而在關鍵信息區，展示的元素相對更加豐富，如我們會通過 Mini Chart 來向用戶展示一些數據信息，通過進度條來向用戶展示數據處理進度，通過標簽來向用戶呈現數據的分類或重要程度等。在操作區，我們也設定了一些展示規則，例如純字段的展示、圖標的展示以及弱化操作的展示方式等等。
梳理完內容層的信息之后，我們也對容器功能層結合業務場景，進行了窮舉，賦予了四個常用功能，分別是：排序、勾選、展開和置頂。如上圖所示，我們將對條目容器全局性的操作放在了條目的最前面，這有利于對多個條目進行批量操作，于此同時也和尾部的業務操作做一個顯著的區分。
基于元素窮舉的方法，我們系統全面的梳理了列表在內容層和容器功能層的底層元素，通過這些元素的自由搭配組合，就可以生長出基于業務場景下的不同列表。他們有著相同的底層邏輯和規則，卻有著不同的外在視覺和功能。
列表的布局及交互規則
（1）內容層的布局規則
通過元素窮舉的方法，我們更清晰的梳理了不同區塊可能出現的視覺元素和信息內容，更合理的排布了整體的信息展示順序。到此為止，我們可以很好的解決內容層的覆蓋度問題。但是，我們發現，除了內容層的樣式以外，還有很多細節問題有待解決。例如：并不是所有的業務都需要將單個條目分為3個區域?；谶@個問題，我們制定了一系列的排布規則，詳細的說明內容層三個區域搭配的具體規則，如下圖所示。
動態演繹
（2）容器功能層的布局規則
為了保證這四個功能的擺放不影響主題區的信息展示，我們制定了一系列的間距規則，保證在四個功能都存在的場景下，有一個較優的展示方案。具體內容如下動態演示圖。
列表的視覺案例
根據以上的交互規則和相關的組件元素，設計師可以根據自己的業務需求進行拼裝優化。如下圖所示，動態演繹中展示了單行條目的一些規則變化。你可以添加圖標、添加Tag；在關鍵信息區你可以增加進度條等。
當你需要展示的信息較多時，可以對容器層的高度進行擴展，變成雙行甚至是多行。如下圖所示，動態演繹圖中展示了兩行的列表是如何展示數據的。
單行列表的展示樣式，如下圖所示。
總結
以上就是本次分享的全部內容，相信大家看完之后可以理解“表里不一”的概念了。所謂的“表”是指在UI層面的視覺元素表現，我們通過元素窮舉的方式，來抽離通用性強、覆蓋率高的元素，將這些元素設計成一個個的UI組件，設計師可以根據自己的業務場景自由拼裝組合，得到一個幻化萬千的的外表。
所謂的“里”指的是資產的內在結構和交互規則，我們可以將其定義為是一個設計公式，其包括了對列表的區塊劃分、間距規則、響應式規則等。大家可以通過這個公式來制定自己的資產規則，從而保證產品的內在體驗一致性，交互一致性，減少用戶的學習成本和試錯成本。目前整套規則和資產已經在螞蟻內部的企業級產品開始推行使用了半年，整理來看，設計師通過以上的規則以及相關組件的自由搭配組合，業務場景的覆蓋率能夠達到80%以上，大大提升了設計的效率，于此同時，結構化的交互邏輯和標準化的組件與開發形成了精準的同步，提升了研發效能，從而促進整個產品研發效率的提升。
最后，感謝你的花費寶貴的時間閱讀這篇文章，希望可以給你帶來一些啟發。我們非常期待設計師體驗和使用Ant Design 4.0 的設計資產，同時也能全面了解這些資產背后我們的思考和一些小經驗。當你發現我們的設計資產無法滿足你的業務場景時，也可以通過這些方法和步驟，創造屬于你們團隊自己的設計資產。
文章來源：站酷 作者：Ant_Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
模態和非模態對話框是一種非常常用的用戶界面元素，將用戶的注意力轉移到子任務上。那么何時使用，二者又有哪些區別呢？
模態對話框會打斷用戶并要求采取措施。當需要將用戶的注意力轉移到重要信息上時，它們很合適。
為了更好地理解模態對話框和非模態對話框之間的區別，讓我們看看術語“對話”和“模態”的含義。
一個對話框（或對話）是指兩個人之間的對話。在用戶界面中，對話框是系統與用戶之間的“對話”，通常會向用戶請求信息或采取措施。
用戶界面模式是特殊狀態，其中同一系統具有一些不同的用戶界面。每種模式可能帶有不同的命令，或者相同的命令（或操作）可能會產生不同的結果，具體取決于系統的模式。換句話說，在不同的模式下，相同的輸入將具有不同的結果。例如，打開Caps Lock的計算機處于特殊模式：所有鍵入的字母都將顯示為大寫字母。打開或關閉大寫鎖定時，鍵入字母會有不同的效果?；蛘撸贛icrosoft Word的“跟蹤更改”模式下，所有以前進行的編輯和注釋都是可見的（而在正常的默認模式下，不會對其進行跟蹤或顯示）。
通過對“模式”和“對話框”的了解，我們可以輕松定義模式對話框。
定義：一個模式對話框是一個對話框，在主要內容和移動系統到需要用戶互動的一種特殊模式的頂部顯示。在用戶與模態對話框明確交互之前，此對話框將禁用主要內容。
相反，非模式（或無模式）對話框和窗口不會禁用主要內容：顯示對話框不會更改用戶界面的功能。對話框打開時，用戶可以繼續與主要內容進行交互（甚至移動窗口，最小化窗口等）。
模態對話框最初旨在警告用戶錯誤或需要立即采取措施的其他系統狀態。在這些情況下，必須先中斷用戶才能解決錯誤。因此，將對話框放置在屏幕中間作為界面的焦點，使其非常有效。這種模式對話框的最大優點是它們引起了用戶的注意，并允許他們認識到問題并迅速進行了糾正。
但是，這種原始用法已經發展起來，現在出于合法或不太合法的原因，有說服力地使用了模態對話框和窗口來吸引用戶的注意。
這是模式對話框引起的一些常見問題：
他們需要立即關注。本質上，模態窗口是強制性的，需要用戶立即采取行動。由于對話框將系統置于不同的模式，因此用戶只有在確認對話框后才能繼續進行操作。
它們中斷了用戶的工作流程。模態對話框迫使用戶擺脫他們最初正在處理的任務。每次中斷都會浪費時間和精力，這不僅是因為用戶必須對對話框進行尋址，而且還因為一旦他們恢復了原始任務，人們將不得不花費一些時間來恢復上下文。
它們使用戶忘記他們在做什么。一旦上下文切換到其他任務，由于模態對話框帶來的額外認知負擔，人們可能會忘記與原始任務相關的一些細節。在這種情況下，恢復原始任務的上下文可能會更加困難。
它們使用戶創建并解決了一個額外的目標-關閉對話框。出現對話框時，將向用戶的工作流程添加額外的步驟：讀取和理解對話框，然后對該對話框做出決定。除非對話理由充分并且確實包含重要信息，否則交互成本的這種增加可能會使用戶推遲。稍后我們將詳細說明這一點。
它們在后臺阻止內容。當對話框出現在當前窗口的頂部時，它可以覆蓋重要內容并刪除上下文。結果，當對話框詢問與剛剛被遮蓋的信息有關的問題時，對對話框的響應可能會變得更加困難。
由于這些缺點，模態對話框在用于非關鍵性活動時會出現問題。
什么時候使用模式對話框合適？以下是一些指南，可幫助您確定是否確實需要模式對話框。
1.使用模式對話框顯示重要警告，以防止或糾正嚴重錯誤。
只要有可能丟失用戶的工作或某個動作可能造成破壞性且不可逆轉的后果，請中斷用戶以避免災難。
要確定什么錯誤嚴重到足以引起模式對話框，請考慮以下事項：
如果將用戶的注意力從任務上移開，這個問題會更容易或更難解決嗎？如果可能的話，最好避免人為錯誤。但是，一旦發生錯誤，如果錯誤消息顯示在主要內容中而不是模式對話框中，則可能更容易修復錯誤。例如，表單中的錯誤應在發生錯誤的頁面上報告，以便用戶在解決問題時可以參考錯誤消息。但是可以在模式對話框中顯示通知用戶她的計算機將在10秒后重新啟動，以確保用戶注意到該消息。
錯誤是不可逆的嗎？不可逆的錯誤通常會導致信息丟失，這對于復雜且耗時的任務尤其有害。例如，對于電子商務企業而言，未能將項目添加到購物車可能是一個不幸的錯誤，但如果用戶沒有注意到微妙的通知，則它不是不可逆的（如果他們確實想要該項目，他們可以重做其操作）。另一方面，覆蓋文件或無法保存對數百張幻燈片的更改都是不可逆的操作，因此非常需要中斷，并且經常受到干擾。
Microsoft Powerpoint使用模式對話框來防止不可逆的錯誤或意外的用戶操作，例如在不保存工作的情況下退出應用程序。
Google Mail桌面應用程序：當用戶在郵件中包含“我已附加”或“請參閱附件”等關鍵短語后忘記附加文件時，將出現此模式對話框。此對話框可防止用戶錯誤（以及笨拙的后續電子郵件）。
當缺少信息會阻止系統繼續用戶啟動的過程時，模式對話框可以提示用戶輸入該信息。
如下所示，Etsy使用模態窗口中斷用戶的登錄信息（當該用戶試圖將某項保存到收藏夾列表中時）。
每當用戶嘗試執行需要進一步步驟才能執行的任務時，Etsy都會使用模式對話框。例如，當用戶嘗試將某個項目標記為“收藏夾”而用戶未登錄時，將出現一個對話框，以獲取執行所需操作所需的信息。
對于工作流，更快并不總是更好。對于耗時且涉及精神（和情感）的任務，一次要索要大量信息可能是不堪重負的。在這些情況下，模態對話框可用于將復雜的信息分解為更簡單，更易消化的塊。向導是使用模態對話框的常見實例。
但是，必須注意的是，具有多個步驟的模式只會延長花費在主要任務上的時間，從而使用戶更有可能一開始就忘記自己在做什么。因此，如果您必須執行多步驟模態，請讓用戶了解他們的進度，這樣他們就不會立即放棄。就是說，如果開始需要多個步驟，則可能有理由為其分配整頁。
當所請求或提供的信息相關時，模態可以有效地工作，或者可以簡化當前任務的完成。
就房地產網站Zillow.com而言，用戶無需帳戶或房地產經紀人即可瀏覽物業列表。但是，當他們嘗試與代理商聯系以獲取列表時，站點將顯示一個模式對話框，詢問他們是否已經有代理商。該信息對于立即進行下一步（聯系上市代理）并不重要，但在簡化未來的交互過程中仍然很有價值。該對話框使用漸進分析，并一次提出一個易于回答的問題。這些問題的承諾度很低，只關注相關細節。
Zillow.com在用戶提交有關特定列表的查詢后，要求用戶提供更多信息。詢問用戶此時是否有房地產經紀人是有意義的點， 因為它減少了將來與其他代理進行冗余對話的機會。
漸進分析的關鍵在于它們遵循用戶對工作流程的期望-中斷僅在它們與當前任務相關或有幫助時才有幫助。
如上所述，模態對話框對用戶具有許多缺點和成本。為了使這些費用合理，與任務和重要性的相關性應該很高。與用戶目標沒有直接關系的模態對話框被認為是令人討厭的，并且會減少對公司的信任。
此外，當非優先信息以高優先級格式（如模式對話框）顯示時，用戶將拒絕關注此格式的其他實例。這就像伊索寓言中的“哭狼的男孩”一樣-反復誤導他人將使他們在真正需要時不會給予您信任。
與普遍看法相反，郵件列表注冊雖然對于產生業務線索至關重要，但對用戶而言并不重要。在最近的一項網絡可用性研究中，我們聽到了與電子郵件通訊注冊有關的模態對話框的內在鄙視。
GoodHousekeeping.com通過模式化的郵件列表對話框發揮了更大的作用-不僅停用了背景，而且還用全屏照片完全替換了背景，從而刪除了用戶在網站上的所有上下文。它也出現在用戶首次登陸網站首頁后的前3秒鐘內，使用戶沒有時間從該頁面上收集任何值。該對話框要求的信息對于用戶或其工作流程而言并非必不可少，并且幾乎不提供上下文或感知的價值。
Wayfair使用模式對話框來請求用戶指定應將該項目固定在哪個板上。另一個UI元素（例如主要內容中的一個選項）將更適合于輸入此信息。底部：選定木板后，Wayfair使用模式對話框來要求用戶邀請朋友加入他們的木板-這對用戶來說不是必不可少的操作，并且會增加固定項目的交互成本。
結帳對用戶和企業都是高風險的過程：用戶希望確保該過程是安全和無錯誤的，而企業希望確保用戶遵循其購買決定。模態對話框（如果不需要的話）充其量會分散用戶的注意力，最壞的情況是削弱用戶的信心。
較早的Walmart.com版本使用模式對話框提示用戶在結帳期間登錄。最好的情況是，這種模式可能會分散用戶的注意力，并引導他們進行全面的搜索以查找Walmart.com密碼，而不僅僅是以訪客身份完成結帳。在最壞的情況下，用戶可能會感到他們被迫開設一個帳戶，而這又會影響購買決定。此后，沃爾瑪重新設計了其網站以刪除該模式對話框（但重新設計也完全刪除了訪客結帳，現在要求用戶擁有一個結帳帳戶-坦白地說，這令人反感）。
模態對話框應用于與用戶的簡短直接對話。如果模態要求用戶進行復雜的研究或咨詢其他信息源（可能被模態阻止），則該交互不是正確的UI元素。
邊境航空公司使用模式對話框促進基本航班的加價銷售。該對話框要求用戶決定花更多的錢，但是不允許他們訪問做出該決定所需的其他信息（例如，是否還有剩余的體面座位）。
在任務不是很關鍵的情況下，非模式對話框可能是合適的。非模式對話框的攻擊性不如模式對話框，因為它們允許用戶繼續其活動并在不相關時忽略它們。但是，它們仍然可能是破壞性的，特別是如果它們使屏幕上的重要信息模糊不清或需要太復雜的交互。
此外，某些非模式對話框不能在設備和瀏覽器之間很好地轉換-例如，臺式機上的Chrome中的非模式窗口可能會在iPhone上的Safari中變為模式窗口，例如下面的Meowbox.com。
在Meowbox.com桌面網站（左）上，主頁右下角顯示了用于時事通訊注冊的定時非模式對話框。但是，在網站的移動渲染（右）上，非模式窗口變為全屏模式窗口，迫使用戶在向前移動之前提供輸入。桌面版本允許輕松消除提示，而移動版本則不允許。
當用戶需要在模式之間快速切換以訪問某些信息時，非模式窗口非常有用。例如，Google Mail使用非模式窗口作為編寫新電子郵件的默認方法。用戶可以繼續打開此窗口，在不丟失電子郵件的情況下最小化編寫的電子郵件（或選擇將其最大化到模式窗口）。該單獨的視圖使用戶可以查找較舊的電子郵件或其他信息，這些信息可能有助于撰寫當前電子郵件。
Google Mail的非模式窗口使您可以輕松地在寫入和讀取信息之間進行切換。
涉及模式對話框時，請考慮以下問題：沒有人喜歡被打擾，但如果必須的話，請確保值得這樣做。
在使用對話框時，還有哪些需要注意的點呢？
謹慎使用對話框，因為它們會打斷他們。它們的突然出現迫使用戶停止其當前任務，并專注于對話框內容。對于模式對話框，用戶必須先進行對話操作，然后才能繼續訪問下面的頁面。有時這是一件好事，例如，當用戶必須確認一項重要操作時（例如“您要刪除您的帳戶嗎？”），但是對于許多任務而言，這是不必要的，而且通常很煩人。
在需要用戶在繼續操作之前進行交互的情況下，或者當錯誤的代價可能很高時，使用對話框是最有意義的。
在用戶未做任何事情的情況下突然打開對話框是一個非常糟糕的主意。不幸的是，許多網站都用下面的示例用訂閱框轟炸了訪客。
用戶在頁面上執行某項操作時，應該始終打開一個對話框。那可能是單擊按鈕，跟隨鏈接或選擇一個選項。
并非一切都值得中斷。
對話框的替代方法是內聯擴展，可以幫助維護當前上下文。
不要只是彈出對話框。
對話框應該說出用戶的語言（使用用戶熟悉的單詞，短語和概念），而不是特殊的系統術語。
您應該使用清晰的語言寫問題。例如，當您要求用戶刪除她的文件時，而不是說“釋放存儲空間？” 問“您要刪除文件嗎？” 通常，您應該避免道歉，模棱兩可或諸如“警告！”之類的問題?；颉澳_定嗎？” 因為它們會帶來額外的視覺混亂。
避免為用戶提供含糊不清或不清楚的選項。您應該只使用清除選項。在大多數情況下，用戶應該能夠僅根據標題和按鈕文本來理解選擇。
錯誤的示例：在此示例中，輕蔑的操作文本“否”回答了問題，但沒有建議之后會發生什么。
很好的例子：平等權利行動文本“放棄”清楚地表明了決定的結果。
對話框不要遮蓋可能對用戶有用的信息，這一點很重要。例如，一個對話框，要求用戶確認某些項目的刪除，應列出要刪除的項目。
處理完成后，請記住顯示通知消息（或視覺反饋）。讓用戶知道她已經完成了所有需要的工作。
在對話框中使用明確的問題和選項。
設計對話框以產生閉合。
操作后通知用戶。
您不應該試圖過多地塞入對話框。保持其干凈簡潔（遵循KISS原則）。但是極簡主義并不意味著有限。所有信息都應該是有價值的和相關的。
對話框永遠不應部分出現在屏幕上。您不應該使用包含滾動內容的對話框。
錯誤的例子： 巴克萊銀行的付款處理對話框中有很多選項和元素，其中的一部分選項僅可通過滾動來使用（尤其是對于通常具有相對較小的屏幕區域的移動設備）。
很好的例子： Stripe使用簡單而智能的對話框，僅包含基本信息，這些信息在臺式機和移動屏幕上都看起來不錯。
對話框不應包含兩個以上的動作。第三項操作（例如“了解更多信息”）通常用于使用戶離開對話框，這增加了未完成任務的風險。
將復雜的任務劃分為多個步驟是一個好主意，但這通常也表明某些事情太復雜而無法要求用戶在對話框中完成。
如果交互足夠復雜，需要多個步驟（如下面的示例所示），那么它就足夠復雜，可以保證擁有自己的頁面。
通過刪除不需要的元素或不支持用戶任務的內容來簡化對話框。
嘗試避免對話框包含多個步驟。
正如上面所介紹的，對話框有兩種主要類型。第一類是尋求注意力的模態對話框，它迫使用戶在繼續之前與他們進行交互。模態對話框通常用于離散的阻塞過程，需要顯式的“接受”或“取消”操作才能將其關閉。單擊其外部區域時，它不會關閉。第二種類型是非模式對話框，允許用戶在其外部單擊或點擊以將其關閉。
您僅應將模式對話框（第一種類型）用于非常重要的交互（例如，刪除帳戶，同意條款和條件）。
系統對話框也是模態對話框，通常具有以下基本元素-內容，操作和標題。
打開對話框時，重要的一點是要使后面的頁面稍微變暗。這有兩個工作。首先，它通過對話框吸引人們關注疊加層；其次，它使用戶知道該頁面當前未處于活動狀態。
但是要注意著色。如果您將其設置得太暗，則用戶將無法再在后臺看到頁面。如果將其設置得太淺，則用戶可能會認為該頁面仍處于活動狀態，甚至可能根本沒有注意到對話框。
右上角的對話框應該有關閉選項。許多對話框在窗口的一角都有一個“ x”按鈕，用戶可用來退出該窗口。但是，對于普通用戶而言，此“ x”按鈕并不是一個容易的逃生路線。單擊“ x”通常會花費更多的時間和精力，因為它的尺寸較小，用戶必須發現并單擊（點擊）它。
允許用戶單擊非模式窗口時，可以退出非模式窗口，這是一個好主意。
對話框應避免啟動其他對話框，因為它們增加了視覺上的復雜性。
大多數情況下，允許用戶單擊（或點擊）以關閉對話框（模態對話框除外）。
對話框應避免啟動其他簡單對話框。
模態和非模態對話框都非常有用，可以請求或鼓勵用戶參與。在決定這兩種類型的對話框時，請考慮用戶上下文和工作流程。避免不必要地打擾用戶并中斷他們的工作流程。使用戶更容易解決問題并實現目標。如果公司希望朝著業務目標持續發展，則在這些設計決策中必須優先考慮用戶目標。
涉及模式對話框時，請考慮以下問題：沒有人喜歡被打擾，但如果必須的話，請值得確保這樣做。
在我開始所有話題之前，我有問題想問大家，大家工作快樂嗎？
我聽到了特別積極的反應，說非常的快樂。希望大家說快樂，不是因為今天是周五。
但是呢，其實，工作并沒有我們想象中那么快樂，是所有的活動當中快樂指數的，跟躺著帶來的快樂差不多的，有些人躺著什么也不干，也比工作快樂。
什么原因導致了工作的不快樂？
第一類，關乎目標。大部分人認為工作是為老板服務，所以很難受。另一類，是因為反饋，很多工作的結果依靠于外界，依靠于老板，所以你跟直屬上司的關系，決定了工作的體驗。第三類，是我們認為挑戰和技能的不匹配，導致了我們工作的不快樂。當挑戰大于技能的時候，你就會焦慮，當技能大于挑戰的時候，你就會覺得無聊，你的工作就會在焦慮和無聊之間來回地徘徊，這是我們理解的世界。
這個問題，在數字世界中會變得更加的明顯。70 年前，第一臺計算機出來之后能解決的問題非常的簡單，但是 70 幾年過去了，數字世界得到了非常大的發展，我身邊任何一個小設備都遠遠大于 70 年的。而現在的我們和 70 年前的前輩們沒有本質的區別，我們有 7+2 的記憶法則，最多只能記住 9 個數字，這就導致了在數字世界當中，我們所面臨的挑戰遠遠大于人類所掌握的技能。
數字世界往往給我們帶來了挑戰大于技能，所以你的體驗是負能的。如果你的工作更加有趣，挑戰能夠匹配技能的時候，工作就會變得很好玩。工作就像打游戲一樣，你通過了一關，技能得到了提升，工作就會變得持續好玩，所以我們在無聊和焦慮中間尋找平衡，這個平衡就是快樂的通道。
說起工作，大家多多少少會有快樂的體驗，但是和躺在沙灘上睡覺的體驗完全不一樣。某一個下午或者晚上，需要處理一件稍微有難度的事情時，你需要集中所有的注意力，專注于你和你的事情，一抬頭兩個小時過去了，這是一種極度飽滿、極度被滿足之后的快樂，它是一種成長的快樂，也是一種挑戰和技能匹配的快樂，也是全情投入的快樂，所以我們所說的快樂工作指的是全情投入的工作。
基于這樣的思考，我們將每個人都追求快樂工作，作為Ant Design 的基本假定。
第一個原因是，我們認為人或多或少都有這樣的快樂體驗；第二個很重要的原因在于，對于大多數人而言，我們醒著的絕大部分時間都要工作，如果你無法在工作中體驗到快樂，人生將會在焦慮和無聊中度過。
基于這樣的思考，我們找到了 Ant Design 的基本假定。就像光速不變基于相對論一樣，我們想基于這樣的假定，表達 Ant Design 的體系。
這就是 Ant Design 的基本假定，每個人都追求快樂工作，Ant Design 中每個人是誰？我們分成兩種不同類型的用戶：第一類是用戶，第二類叫做設計者。所謂的設計者是創造這些應用性能的人，也就是在座的大多數。
我們將快樂拆成兩部分，一部分是快感，一部分是樂趣，基于此，我們衍生出了 Ant Design 四個價值觀，設計首先是自然的，其次是確定的，第三，設計是要有意義的，第四，設計是能讓用戶和產品不斷成長的，它是具有生長性的。
所以接下來的分享當中，因為時間的關系，我會重點分享其中的兩塊。
第一塊叫做確定性。分享一個小案例，我剛入行的時候，就碰到了社會的毒打，我想找到我的合作伙伴進行驗收發布的環節，因為設計師對細節有非常強的管控情系，我用略微虔誠的態度說：“親，能稍微調整一下列寬嗎？”，他可能沒理解我的意思，說“我覺得挺好”，我說“都換行了，哪里好？”，我以為會引起他的注意，結果他回了我一句：“這不重要，你行你上。”
我一開始并不明白，為什么這個世界是這樣的？我認為我們都應該有同樣的認知，直到有一天我看到他的競爭升級 PPT 的時候，我就明白了，原來他不是針對我，他不換行不僅在產品上，PPT 里也不換行。不同的人有不同的想法，不同的工種也有不同的想法，而我們的工作是需要這樣一群人一起合作，就會導致一個問題，當不同的人有不同的、不確定性的想法，會導致研發過程的不確定性。
我們總說，一個人可以走得很快，一群人才能走得很遠。我們要想辦法怎么讓這群人可以步調一致地走得快，又走得遠，我們把這套體系、方法論叫做 ETCG 2.0。
這是原有 ETCG 的基礎上，進行升級的過程。我們希望面對同樣的問題，各個角色都能推理出同樣的方案。就像你在春天種下一顆蘋果樹的種子，你一定在秋天可以得到一顆蘋果樹，而不是一顆梨樹。
ETCG 2.0幾個字母分別代表不同的意義，第一個是功能范例，第二個是模板，模板是我們基于業務的抽象，目的是幫助新手或者幫助不同設計師保持設計的一致性，指引頁面如何設計，比如這是典型的列表頁，由高級搜索和表格組成。今年在模板的基礎之上又做了一層更大的精進，我們做了抽象和規范衍生出了模板組件。一行模板組件，當無法滿足你的需求時，只要一行代碼，就可以得到一個完整的序列。
除了列表頁，還有表格頁，還有圖表、表單，以及布局，構成了我們對系統的抽象，叫做「四表一局」，它大概覆蓋了中后臺系統、或者企業級產品 80% 以上的業務訴求，同時本著非常開源、開放和普惠的心理，整個「四表一局」正式對外開放，大家可以訪問 Ant Design 的倉庫下載和使用。
ETCG 中的 C 是組件，是 Ant Design 最早和大家見面的內容，五年的時間里面，我們有了很多數量上和質量上的精進，同時創造了非常多的社會價值。這五年前，非常令我們自豪的是，有接近 1000 名貢獻者參與到 Ant Design 的建設中，同時 TOP 50 當中，60% 來源于社區，他們為 2 萬家企業提升了 3-5 倍的研發效能，同時我們正式于去年年底成為全球開源第一的組件庫。五年前，螞蟻集團發起了 Ant Design 這個項目，但是它今天所取得的成就是來源于社區和我們的共同努力，這里的榮譽和掌聲應該獻給所有為Ant Design 貢獻過代碼的同學，謝謝你們的支持。
ETCG 的 G 有兩個。第一個 G，是對組件樣式的抽象，我們用了變量化的方式進行了約束和管控，它可以做什么？特別簡單，你的老板今天不喜歡藍色，想要橙色，你只要一行編碼，就讓組件庫發生了煥然一新的變化。
ETCG 的第二個 G，是我們今年重點建設的部分，也是全新的一部分，叫做 Guides，指的是人和機如何進行互動交互的過程。
比如說這里是應該放一個數值輸入框，還是放一個輸入框？以及如何進行放置？我們將瑣碎的交互規則進行抽象和封裝，讓機器學習這些規則，讓機器幫助我們進行這些規則。你只要導入原數據，幾乎不用做任何的配置和更改，可以得到可進入生產環境、可研發的表單頁面，設計得可能比初級的設計師產生的效果更好，你想要的一切都應該放在合適的地方。
這就是我們對 Ant Design 確定性的理解，不需要設計師參與的設計產品，提升了設計和研發的體驗，當然商業化還需要很長的時間。當下如何解決現在碰到的問題？仰望星空，也要腳踏實地。作為設計師，我在想怎么解決五年前的問題，我很想說我行我上。
我們怎么使用？使用 Kitchen 進行編輯化的能力，把 13% 甩給我的合作伙伴。如果你覺得還不夠，想做更多的管理和管控，甚至可以用「四表一局」的能力進行服務的搭建，搭建可進入生產環境的服務產品，讓設計師變成設計工程師的角色。
在今天分享的最后一趴，我和大家聊聊這個場次經常聽到的詞，那就是“自然”，學術界和產業界對自然有非常多的理解。我們把它定義成了形容詞，我們認為這個行為很自然，大家經常在各個場合聽到的一句話，設計是關乎如何運作的問題，Ant Design 在這個基礎上，要聊的是 how it worksnaturally。
同樣分享一個小案例，在我們有一天的用戶群里，我們的用戶反饋了一個非常有意思的問題。他說語雀可以插入圖片嗎？語雀的負責人當時在現場，就回到：“當然可以，最基本的能力”。我們的用戶問出第二個特別具有代表性的問題：“可是我們找不到在哪里”。語雀是阿里內外都很喜歡的一款文檔類文件。編輯頁的第一頁，我們的工程師特意做成了綠色的，你點進第一個的第一行就是圖片上傳的功能。但是大家有沒有想過？我們僅僅隱藏了一級，就讓用戶記不起來有這個功能，我們僅僅隱藏了一級，就讓用戶找不到這個功能。這不是語雀產品特有的特征和問題，而是這個時代大部分問題具有的特征和問題，因為大部分的產品處于 1973 年的基礎上。
WIMP 是什么？Window、lcon、Menu、PointDevice，當我們的功能只有 20 幾個的時候，這是非常好的設計，總比代碼行好太多，今天我們說了數字世界當中，我們的設備、計算機、網絡成千上億倍的發展，用戶怎么記得住 8000 個功能？用戶怎么定位到 8000 個功能在哪里？所以 WIMP 界面碰到了人機交互的瓶頸階段。
為什么碰到瓶頸會越來越不自然？第一個角度從人機互動的環節，當用戶記不住的時候，就沒辦法從哪個入口出發。所以 WIMP 界面第一個不自然的原因在于，所有動作的發起都依托于用戶。用戶一旦記不住，一旦找不到，人機交互就沒辦法走通，這是 WIMP 界面的第一個問題。
第二個問題，要回到人身上。人的行為分為有意識、無意識的兩層，能量消耗比較大的就是有意識層面。WIMP 在于所有的行為依托于用戶有意識地觸發，這本身就是一個非常消耗腦力的一件事情。在我們面對這么多功能的環境下，這兩個問題導致了我們在數字世界當中碰到的巨大問題。因為我們知道系統的功能每天在增加，數字世界不需要遵循物理制造的極限，它可以進入無限備功能的疊加，所以在這個世界當中碰到的挑戰遠遠大于我們所掌握的技能，所以 WIMP 界面碰到了誕生以來最大的問題。
我們如何解決這個問題呢？首先一定要清晰地認識到，人是有意識和無意識兩種思維的結構和意識形態的。同時系統也可以分為兩部分，一部分是主動功能，第二部分是被動功能，我們要嘗試的守正出奇。守正延續了 WIMP 界面常規的功能，讓人有意識尋找功能，觸發系統的能力。但是出奇要多做一步，除了讓用戶找功能之外，我們要增加很多的主動式的交互，讓功能找到用戶。
接下來分享幾個案例，在我們的常規設備當中，都已經有這樣一些主動式的服務來尋找到你。
第一類是相逢不相識，名字很好聽，解釋也特別好玩。在語雀當中有一個小功能是我特別喜歡的功能，當我編輯一篇文檔，編輯了大于 30%、50% 的文本量，這個鉤會自然地幫我鉤上，因為它有一個基礎的設定：如果這篇文章發生了比較大規模的修改，你的訂閱者很自然的想知道你這篇文章做了什么。
第二個相逢不相識的地方，大家可以聚焦一下支付寶。有興趣可以打開支付寶首頁，在你的收款碼應用里，解決什么樣的問題？解決面對面交易的問題，所以當你輸入一個金額完成以后，自然旋轉屏幕的時候，這個屏幕會進行自然的翻轉，這樣對面掃你錢的人，可以看到信息的正面，這非常自然。
第二個主動式交互的類型，叫做可用不可見。和相逢不相識的區別在哪里？就是默默地為你提供了服務，但你可能永遠不會知道它的存在。在蘋果第一代出來的時候，做了一個非常牛逼的設計，因為大家都知道虛擬鍵盤，沒有物理觸感，所以誤觸率很高。虛擬鍵盤怎么解決？蘋果基于非常有趣的思考，在蘋果的全鍵盤里面，只要輸入了 Desig 的時候，通過語義詞的分析，N 點擊的范圍遠遠大于旁邊的 B 或者 M，以及上面的 G 部分，這是幫助你做主動選擇的服務，只是我們從來不知道有這樣一件事情。所以我們將這些自然的人機互動方式進行整理，包括融入到更多的案例以后，發現人機主動式交互有九種不同類型的分類，除了輸入法，更多是通過用戶使用情景的上下文進行優化的過程。
我們有了這張人機自然的交互，怎么解決語雀的問題？我和在座的語雀設計師有過這樣的討論，用戶說圖片上傳找不到，我們大部分人的第一反映是把圖片上傳顯示單獨放出來。這可能會解決剛才的問題，但是如果明天財務說表格找不到了，我是不是還要把表格拿出來？有人說附件找不到了，還要把附件拿出來嗎？我們需要從主動式交互的角度暢想怎么優化人機互動的過程。
回到這張自然交互的工具，提供了一種簡易的思維框架。
我們去判斷哪些是可以去做的，第一件事特別簡單，我們判斷用戶使用的上下文是什么，我們發現很多產品的通用習慣，直接把圖片拖進去，做成小的服務，用戶根本不需要知道功能的存在就可以使用。
第二個從原數據角度來理解，圖片是一種特殊結構的數據，它是 jpg、png。用戶在外部復制了之后，進入編輯頁可以主動推送他一個服務，詢問他是否要粘貼，本質上并不復雜，但是它確實在 WIMP 界面傳統意義的基礎上，又提供了初級的部分，又額外做了一部分。
我們所定義的自然里面，是需要我們做更多的主動式的服務，讓我們這個海量的功能能夠在合適的場景下，去找到用戶，從而節約人的腦力和體力。因為對于人來說，我們和 70 年前的爺爺輩們沒有本質的區別，我們需要被善待。有感興趣的同學可以看支付寶的訪問碼，也期待和大家做更多的互動。
分享的最后一趴，我簡單總結一下今天做了哪些事情和分享了哪些內容。第一趴，我們提出了 Ant Design 的基本假定，我們認為每個人都缺少快樂工作，這種快樂工作是和我們平時閑散完全不同的問題。同時大多數人都不可避免的來工作，我們怎么扭轉工作對我們的體驗，這是人生中非常大的問題。第二趴，我們衍生出新的價值觀，這四個價值觀中，因為時間篇幅的原因，重點和大家講了確定性和自然的價值觀，這是歷史最悠久，也是最有代表性的兩塊?；谶@兩個價值觀，我們衍生出了不同的組建庫也好、可視化資產也好，相關的設計資產以及設計策略，以及配套的設計工具，當然藍色部分是我們今天介紹的重點。最后這張圖特別適合拍照，這是我們系統提供給大家的主動式服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
表單日常設計規范大致思路，增加對表單的認識~
全篇閱讀大概需要15min，對表單設計不熟悉的同學看完后肯定會有不少的收獲~~~
說到表單其實在生活中可以接觸到各種各樣的表單，主要目的就是讓用戶填寫來「收集用戶信息」。
初看這些表單，你可能覺得很簡單，就是一些標簽、非?；A的小組件，但是在實際業務中，想要將這些小組件組合拼裝成合適的表單卻需要推敲非常多的細節，常常會讓設計師陷入無限的糾結中，比如：
所以針對這些問題，我從「框架」>「細節」的邏輯與大家一起探討「如何設計一份體驗好的表單」。
在UX Collective，作者Taras Bakusevych 進行了詳細的闡述，對表單的組成部分進行了詳細的拆解與說明 ↓ ↓ ↓
1. 標簽：
標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。
2. 占位提示：
直接展示在輸入項中，采用弱提示文本對所需信息描述、示意，當用戶輸入信息時即消失。
3. 校驗：
對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內容錯誤等
△ 常見的校驗類型
4. 基礎組件：
可交互輸入的區域，是構成表單的核心內容，主要有：輸入框、單（復）選框、上傳、時間選擇器、開關……
5. 提示：
描述該輸入項需要的輸入類型，如：上傳的文件類型
6. 按鈕：
用戶完成輸入后，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，則按鈕懸浮固定在底部；按鈕“確定”放左、右統一即可，沒必要過分糾結。
看了很多文章，對表單類型的劃分主要是：基礎表單、分步表單、高級表單（分組表單）[1]
基礎表單：常見于輸入項較少的表單場景，如：登錄、注冊。
分步表單：常用于輸入項較多，業務本身具有流程化特性（如：轉賬）
為了提高用戶填寫效率，減少用戶心理負擔，將一個冗長或用戶不熟悉的表單任務拆分成多個步驟，一步步指導用戶完成。
分步表單可以緩解用戶需要填寫較多內容時候的抵觸情緒，并且通過拆分步驟，聚焦于每次填寫的內容，提升用戶在不同模塊間的瀏覽效率。
△ 來源：Ant Design Pro
高級表單（分組表單）：主要用于需要一次性輸入、提交大批量數據的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內容進行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內容都是基于前一步來填寫、是前一步反饋。
△ 站酷上傳作品
但是以上說的基礎表單、分步表單、高級表單都是基于業務需要而進行選擇，但是實際在設計時，往往還需要考慮的是：這些表單應該是以什么承載結構展示？
這些都是設計師需要進行全盤考慮的問題，所以在設計表單的時候需要先確定這些框架，由外>內，層層深入，再對細節進行處理。所以接下來我會針對如何由外>內設計表單進行詳細的陳述。
在詳細闡述如何設計表單頁前，先明確下我對于表單頁的劃分 ↓ ↓ ↓
我將表單頁大體劃分成「頁面框架」和「表單內容區」
這樣劃分是出于我對 AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗要素》的書，提出了從5個要素自下而上的建設用戶體驗，即：戰略層、范圍層、結構層、框架層、表現層，這種逐層的思考邏輯對于設計表單是十分必要的，因為在設計表單的時候，常常需要考慮這個表單頁所需承載的業務訴求（戰略上）基礎上去做后面的優化體驗，所以在設計表單的時候應：明確該表單的業務類型，因為不同的業務訴求的表單在設計中的展現形式會有不同，即“頁面框架”會有不同（這也是我上面為何將表單頁分成頁面框架和表單內容區的原因）
在確定頁面框架后，就要對表單需展示的內容進行明確的劃分，如：表單的內容是否要展示流程進度？表單內容是否有不同層級的導航？確定了這些后，我們表單內容的大致布局框架就可以確定下來，我們才能進入下一步（內容區具體的陳列方式）的設計；
表單內容區主要是對輸入項的陳列方式，對齊方式，進行體驗優化；
最后對所有輸入項進行統一整理，檢查是否與用戶預期一致？與其他輸入項的關系是否清晰等。
整體而言可以分為以下四步：
STEP1：確定「頁面框架」
這里的頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。[2]
整頁式：最常用方式，適用于絕大部分的表單，可以支持構建復雜的表單。
彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。
側邊欄式：與彈窗式相似，通過小面積的側邊欄進行編輯；可承載比彈窗更復雜一些的表單內容，可以有滾動條。
以上這些就是常見的表單頁面框架，我們在考慮采用何種樣式時需要綜合以下幾個因素考慮：
內容多少 —— 內容較多不適合使用彈窗式
與原頁面關系強度 —— 需與原頁面保留強關聯建議使用彈窗式、側邊欄式
表單內容區復雜程度 —— 一般高級表單、分組表單、分步驟表單、有表格聚合的表單、聯動表單等都建議采用整頁式的框架來展現。
STEP2：確定「表單內容區布局」
如上圖所示，一個正常的表單內容區主要有：標題區、二級導航區、主內容區
其中標題區是必須要有的，標題區可以讓用戶快速明白該表單是需要收集什么內容
二級導航可以根據業務需要進行配置
主內容區則是表單填寫的主區域，通常我們直接將這個區域稱之為“表單內容區”，該區域布局樣式可以分為三種：
以上三種樣式就是常見的表單內容區的布局，采用哪種布局，可以綜合以下幾個因素考慮：
內容多少——如果內容很多導致頁面很長，則可以考慮將內容分類，作為左側導航欄，采用左右式布局。
內容類型——導航作用內容必須放置左側（有些分步驟的表單也會將步驟條放置左側），而輔助信息的內容建議放在右側（因為人眼瀏覽習慣都是從 左 > 右，所以信息重要度建議按照該視線路徑放置）
STEP3：確定「表單內容排列方式」
在該步驟中，主要確定表單內容區控件顆粒的排列方式，單列布局 or 多列布局。
在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上>下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。
多列布局的表單會導致用戶的視覺路徑變長，用戶需以 Z 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。
但是有時部分業務訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件顆粒來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。
so 根據單列布局、多列布局的優劣勢，結合實際業務需要來選擇：
單列布局
多列布局
在這個環節中，除了需要考慮單列式布局還是多列式布局，還有一個也是需要全盤考慮的——標簽的對齊方式
在設計時，到底是采用左對齊、右對齊還是頂部對齊呢？
這篇文章有對標簽不同的方式優劣勢進行了說明。[3][4]
后續在這塊糾結的時候，則可以對照上面表格進行評估了，其中詳細原理你也可以點擊下方鏈接進行查看：UX Collective
STEP4：確定「表單內容顆?！?/strong>
最后一步只需要按照收集信息類型的需要，選擇正確的控件顆粒，如：如果是要收集用戶購買數量，則可以直接使用“數字步進器”、“輸入框”。
在選用控件顆粒時，需要注意的是：
重要信息的輸入項應該有錯誤提示校驗，這種一般用于錯誤率較高的情況，避免用戶反復填寫。如：在登錄注冊時，我們填寫手機號如果不滿11位數，就會報錯。
特定的輸入型顆?？丶?，需要根據輸入信息的特殊性給與格式的提示與限制，如：郵箱 @http://qq.com，這樣有助于幫助用戶提前感知，減少表單填寫錯誤。
表單顆粒的寬度應該暗示填寫內容的長度，與輸入預期成正比，在Ant Design 4.0 系列分享的文章[5]分析結論是：
錯落有致的排版比整齊劃一更舒適，因為在視覺上我們更容易將下方有圖的空間和內容視為一個和諧的整體，但左圖過度的對齊導致暗示隱性的截斷，我們會感覺表單列右側空間缺了一大塊。
本篇文章從表單所在的頁面形式 > 表單框架 > 表單內容區逐層對表單進行剝離拆解，幫助大家更加全面的認知表單，并總結了日常工作中設計師常常會遇到的表單類型和布局，設計師可結合文章中給出的建議參考并靈活應用。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在B端的設計中，用戶畫像的建立一直困擾著廣大設計師朋友們，由于對于業務的不熟悉、對建立目的的不明確，經常會采用無腦硬套C端用戶畫像、刻意為建立畫像而畫像、過于追求畫像廣度而不注重深度這樣的方式來進行用戶畫像的勾勒。導致的結果就是建立的用戶畫像與業務場景的關聯甚微無法對垂直業務進行有效賦能、目標客戶鎖定出現偏差導致無法創造真正的用戶價值，間接的導致產品無法創造商業價值等一系列問題
今天我們就來討論如何更為精準地建立B端用戶畫像，從而能更好的為你的設計進行決策，為產品打下優良的準備基礎
B端用戶畫像在大體的定義上其實和C端沒有太大的差別，都可以簡而言之地定義為是一種勾畫目標用戶/客戶、洞察用戶特征、聯系用戶訴求與設計目標有效工具。都采用貼標簽的方式對用戶進行分析和描述，解決的問題也都是更為明確的告訴設計師：“我們服務的是一群什么樣的人？”
之所以最后的落腳點還是人是因為無論是To C還是To B我們所服務的目標用戶始終都是人這樣一個載體，都是在為人做設計（明確這點很重要）。所以這就要求我們無論是C還是B始終都需要站在人的角度來進行情感體驗帶入、痛點需求分析、決策因素推導，和C端一樣B端同樣需要想方設法的通過設計與用戶達到情感共振
只是對比C端而言B端所聚焦的方向有所不同，較為籠統說就是To C的用戶畫像是對個人個性、特征的放大、篩選、整合，To B的用戶畫像是對于具體行業職能、職位和權重需求的發現、剖析和理解。而這具體的異同點我會在后面的篇章中詳細的講解
從基礎特征來說，B端和C端的共通特征其實并沒有太大的出入，都具有：標簽性、真實性、實用性。
鮮明而獨特的標簽使是我們連接目標用戶的依據，告訴我們為什么選擇這類用戶而不是那一類用戶，同時可以讓設計團隊進一步驗證產品定位。在標簽不斷被豐富的過程中，用戶的形象也在不斷變得立體，產品與設計的思考決策隨之會更全面
可信的真實度可以讓設計師、產品經理較為有依據地對客戶的訴求進行把握不至于被錯誤的信息影響設計目標的確立，同時這也是在項目推進的過程中與各部門溝通強有力的憑借和背書，能有效地搶奪設計過程中的話語權，所以一定要盡量去對你的目標客戶進行的真實還原
實用的意義主要存在于項目工作效率中，在B端的設計和產品中會比C端更加強調效率，項目的進程總是一環扣一環，前一個環節的錯誤都必然會影響到后面的環節，從而影響整體的進度，好的用戶畫像是一定能為你的設計開個好頭，準確切中正確用戶的正確需求，以其實用性大大提升整個團隊的生產效率
除了上述的基礎特征之外，B端用戶畫像還有著其獨特的特點，而這也往往是困擾設計師們在建立有關用戶畫像的時候的難點，具體體現在：
在這點上我把他們大概總結為四種主要原因：用戶樣本少、數據獲取難、業務理解需求高、測試難進行
第一，說到B端用戶畫像感受最為直接的就是：“關于B端的用戶反饋是真的少”這主要是因為B端的用戶的總量從體量上來說就比C端少了很多。要成為一個B端的用戶首先得是一個有B端系統賦能之下的工作的從業人員，這就一下子刷掉了許多人可以成為目標的客戶，不像是C端基本上沒有什么太大的限制
然后再加上B端行業的領域性較強，經過具體垂直行業的細分后，能夠成為你所研究的某一具體行業的目標客戶者更是少之又少，這就導致了可調研的樣本不足（因為可以被接收到的反饋的聲音就少了）很難去做定量研究
第二，對于行業內部用戶的有關數據的獲取來說同樣不是一個容易的過程，畢竟多數都是很難通過互聯網的查閱就直接進行獲取的，通常需要通過詢問目標客戶組織內的關鍵人物如：CEO、業務負責人、商務BD、行業顧問專家才能相對準確的獲得相關數據，而這些數據的保密程度都較高，像企業目前的經營概況、主要合作方信息、公司內部架構……這類信息本身都有較高的獲取成本，更何況對方也不一定愿意透露
哪怕是通過外部數據公司進行購買，也需要你的公司或者團隊有能力、有意愿去承擔在這方面所付出的成本，還需要你本人有能夠甄別數據是否可用的本事，如此，就在你構建用戶畫像的調研階段形成了一道天然的行業壁壘
第三，對于業務的理解需求在B端行業尤其重要，特別是對于UX來說。對業務較為深入的理解可以快速有效的幫我們熟悉在具體工作中角色與角色之間形成的業務泳道，進而準確抓取畫像中的關鍵角色
比如我們需要為餐飲行業從業人員提供一套線上B端解決方案以提高他們的運營效率，在描繪這個用戶畫像的時候我們可以先通過對業務的理解梳理出從點餐到買單的整條業務的泳道圖，在圖中我們得出了一系列的角色，從中分析出這條業務鏈中的關鍵角色（或者說是關鍵決策人）：前臺、服務員，將其定為目標用戶，然后針對關鍵角色開始通過業務分析痛點需求，為其建立用戶畫像
這說起來容易但是實踐卻很難，前文就講過行業之間千差萬別，很多時候真的就是隔行如隔山，不同行業的業務泳道完全不是我們能夠通過固有的經驗能推測的出來的，需要實實在在反復做用研才有可能完全將其還原，雖然不是說要多年深耕其中，但是起碼要對業務有一個較為立體的認知，后文會具體講到
而這對于我們傳統的設計師尤其是新手設計師來說并不屬于我們的“天賦技能”，畢竟傳統意義上對于業務的深入理解完全不在我們的工作需求范圍，還是習慣于做一個產品經理提需求然后卑微照做的“擼圖小美工”，就算有心也很少有機會能夠參與到用戶調研中去了解業務。對于是設計自家企業內研系統的同學來說可能還好一點，可以通過很多公司內部的人員與數據去了解，甚至還能比較容易地實地考察，但是對于外包、SaaS類型的設計同學來說自身用研經驗不足、缺少方法論無法真正理解業務是阻礙精準建立用戶畫像的又一道壁壘
第四，由于B端的產品和公司的業務息息相關會直接影響到公司的日常運營，所以很難像C端那樣悄無聲息地或者是有選擇性的將用戶放置在真實場景中進行灰度測試、A/B Test等，很容易造成新的功能與交互與用戶原習慣不相符的情況從而耽誤日常工作，這是絕對不被允許的，就算是招募了用戶進行專門的測試，也很容易因為提前告知這是測試的刻意性使用戶造成心理偏差從而導致測試結果的會有偏頗。
這就直接導致了用戶畫像中推測的痛點需求很難被及時有效驗證
首先，角色與角色之間的差異較大也是B端用戶群體較為顯著的一個特點，這主要是因為職位的不同導致的，不同的職位除了會形成表面上的上下級關系外本質上來看應該是形成了不同的職能、產生了不同的權重，對于用戶而言這就導致了不同角色之間關心的價值不同（可以說是用戶目標不同）、決策權大小不同、使用人數不同……
舉個最簡單的例子就是，一家店老板是一個角色、店長又是一個角色、前臺又是一個角色，這三者之間關心的與自身價值相關的事兒肯定是不一樣的，比如老板的目的是如何通過降本增效達到店鋪的利潤最大化，店長的目標是如何提升團隊管理效率提升自我業績，前臺的目標是如何優化日常交互提升自己的工作體驗與效率
個人認為可以將角色的差異聚焦到以下四個維度作為參考比較：用戶目標、使用人數、使用頻次和決策權重，那么套用到以上的例子中就可以呈現為下圖
通過此圖我們可以較為直觀的感覺到角色差異所帶來的特征，同樣的通過對這些差異的比較也有助于我們找到關鍵角色、關鍵決策人（權重較高的人）
其次，除了用戶目標這些差異外，對于設計師來說很重要的一點就是明確不同用戶的具體使用場景，因為事實上就算是同一家門店、同一家公司的各個角色他們的使用場景都有可能千差萬別
舉個例子同樣是老板和前臺的兩個崗位會因為崗位職責要求與個人使用偏好習慣這個兩個主要因素導致他們選擇使用產品的場景、平臺有所區別
前臺因為是執行層員工所以有必須天天到崗的要求，所以她的使用場景大部分情況下都會是在門店內，更準確的說是門店的前臺位，而從工作內容上來說主要是高頻地處理每天店內的各種訂單業務、進行登記、結賬、數據錄入等所以在端口的選擇上可能會更多的選擇固定端口、Web端，這就構成了屬于前臺的基本使用場景
而立足于老板而言，他沒有每天都需要到崗的需求，主要需求是通過系統查看門店的營業數據，快速進行一些較為大型的申請的審批等，而且使用頻次不高，所以老板的使用場景除了門店外可能更多的是要考慮到在店外、在家的場景，而使用端口上則應該更加偏好移動端APP來進行操作（當然這個還是要放到具體的項目中具體分析）
本質上來說和用戶目標等因素一樣，使用場景主要也是由行業中的具體崗位職責所決定的
最后，角色與角色之間的差異還體現在置于產品不同階段的決策鏈路中同一個角色的參考權重會不一樣。聽著是不是很抽象，沒關系舉個例子你就迅速能明白
在產品的銷售階段，也就是目標客戶的初次購買階段，此時決策鏈路的關鍵是老板是否出資購買產品？很明顯的是員工在這個階段是沒有出資決策權的，而且員工的態度對促成這個鏈路影響甚微，那么我們的主要精力就是應該放在打動老板這個角色的目標上，此時老板的意見、需求……會成為我們用戶畫像中參考權重較為重大的部分甚至是全部
而在產品的續費階段,此時決策鏈路的關鍵變成了老板是否會進行續費？雖然表面上看似乎和初次購買區別不大，但是實際上此時員工的態度的參考權重已相對提升。這是因為老板會通過員工在使用系統時的反饋和通過引進系統所帶來的效果作為是否續費考量，此時執行層的體驗需求是設計師需要去重點關注的，他們的意見在畫像中的參考權重會提升，這就是為什么角色的參考權重會隨著產品階段的改變而改變
總結一下，角色與角色之間的差異體現在不同角色的用戶目標不同、使用場景不同、使用頻次不同、使用人數不同、決策權重不同和不同階段意見參考權重不同
經過以上的特征分析用戶畫像的構成在我們的腦中已經初具雛形了，那么具體來說用戶畫像的構成應該如何較為系統的拆解呢？個人認為較為合理的方式應該是先思考用戶畫像的功能或者說用戶畫像需要反饋什么信息
這個問題的答案其實從之前的特征中我們可以較為明確的找到即反映企業的信息和反映企業中角色的信息，這兩部分的信息我比較喜歡將其稱之為客戶畫像和角色畫像
客戶畫像簡而言之就是指你目前的設計所服務的組織、公司的畫像，它涵蓋了該組織所在行業的特征、現狀（包括行業類別、產業鏈細分等）和自身企業特征（規模、發展階段、市場、業務情況等）。這有助于我們快速地驗證我們對產品的定位準確性并且迅速地找準大致方向以便于隨時補充所在該垂直領域相關信息以更加了解客戶。當然從團隊協作的角度來說，這些信息還可以幫助銷售團隊更為方便的找到目標客戶進行簽約
客戶畫像以一種較為精煉的方式進行拆解可以分為基本信息、業務信息、組織架構和關鍵角色，其中具體來說
基本信息：行業屬性、地理位置、企業規模
業務信息：業務概覽、經營模式、付費能力、使用目標
組織架構：組織自上而下有哪些機構，彼此之間有何聯系
關鍵角色：組織中所包含的各個崗位
如果我們以一家連鎖餐飲門店為案例那么可以具體這樣進行進行描繪
而角色畫像就是指你目前的設計所服務的組織、公司中的使用人員包括了公司的高、中、底層即決策層、中間管理層、執行層，它包括了你所研究的角色的個人特質或者說崗位特征（包括了崗位特征、職能、職場處境、決策鏈路位置、希望解決問題的目標等）
角色畫像以一種較為精煉的方式進行拆解可以分為角色名稱、基本信息、工作目標、和使用場景，其中具體來說
角色名稱：具體職位的具體職位名稱或是工種
基本信息：文化水平、辦公場地、平臺偏好、使用頻次
工作目標：崗位職能、崗位責任和使用期望
使用場景：以較為干練的故事敘事的方式對日常工作的各個場景進行描述
如果我們以一家連鎖餐飲門店的店長為案例那么可以具體這樣進行進行描繪
而在細化到每一個角色崗位的情況下，在使用場景上甚至可以進行武裝到牙齒般的場景再細分，比如廚師長在一天后廚管理中最高頻的需求是什么？對后廚訂單的顯示有什么樣的自己的想法需求？這都是我們可以在畫像部分進行不斷深入思考的，當然不斷細化勢必會自然而然涉及交互的具體設計，由于篇幅原因之后會單獨寫一篇文章來進行敘述，這里就不做過多的探討
大家一定需要記住的就是構成用戶畫像的基本組成部分包括了客戶畫像、角色畫像兩大部分，而每個大部分中又分成了屬于各自的小部分，具體的細分和調整還是要落實到具體的業務、具體的行業中去進行構建
之前就提到過B端的用戶畫像與C端用戶畫像的特征上有比較大的區別，而且對用戶的描繪側重不同，這也是為什么很多從C端的設計師同學在轉B端設計的時候發現在用戶畫像的勾勒上一些形式無法直接復用的原因，具體來說分為以下這些區別：
C端用戶選擇產品的感性（主觀）因素相對較多，而B端則更趨于理性。什么意思呢？影響C端用戶的購買因素一般包括品牌偏好、商品顏值、社交信息影響等因素，這類因素都較為主觀化、情緒化。這是因為C端的產品對于用戶而言更多的時候是通過購買達到一種自我滿足、自我彰顯，用戶目標的個性化較強，簡單的來說就是我買來是讓我爽的，所以C端購買商品的時候會趨于感性與主觀
而反觀B端來說影響到用戶的購買因素就理性的多，也更加的謹慎與全面，比如：易用性、投入產出比、能為業務賦能的程度、員工學習成本等，這是因為B端的產品與用戶的盈利、運作都息息相關，會直接影響到用戶日常的工作，用戶的目標主要是通過購買產品達到對自己工作、業務的賦能，提升效率和盈利，不會有誰說我用美團的系統就比你用微盟的系統更高一層，說白了誰能讓我的工作更加的、誰能讓我的公司賺更多的錢誰就會成為我的選擇，所以這也是B端的用戶購買決策都比較理性的原因
C端的用戶購買決策權一般不受社會關系的影響而B端的購買決策比較受其影響。這里的社會關系主要是指職業、崗位，這點其實比較好理解。很簡單C端的產品大部分面向用戶的細分不會像B端那么局促很多時候C端的商品只要用戶的經濟實力足夠其實是可以隨時隨地隨性進行購買，如果用戶愿意哪怕是光頭猛男也可以購買小裙子，別人是管不著的（當然也不一定?。?
但是B用戶的購買決策權其實在前文就很明顯的看出是非常受社會關系的影響的，比如一個執行層的小員工因為公司系統太垃圾突然想一拍腦袋給公司換個系統，然后第二天公司就自上而下換了一套新系統這種事兒想想都不太可能（當然一般也沒有人腦子抽了想這么干）
這是因為無論如何在這條決策鏈中執行層小員工始終都是處在一個使用者的身份上，縱然你再有錢也不可能成為一個出資方的身份（當然除了那種你把公司買了自己當老板的）你最多只有建議權，并沒有購買權，只有決策層的領導（很多時候都是最大的老板）是具備出資的權利的（注意我說的是權利不是能力），所以這樣的結構特征在基因上就決定了B端和C端用戶在購買決策權上有本質的區別
C端用戶相對來說購買傾向上受年齡、性別、職業、受教育水平這些因素的影響而B端相對較小。很簡單C產品的購買理由雖然相對自由，但是對于產的定位還是會以一定的年齡層次、不同的性別等因素進行劃分從而達到精準營銷，畢竟不是那么多產品都是男女老少皆宜的，舉個例子，美柚APP在大部分情況下用戶都是女性而且是青年中年女性，服務于女性通過其監控自己的生理健康，一般情況很少有男性用戶（例外除外?。俦热缃洺蠥PP給年輕人打造自己的潮流社群這樣的定位，說明這個產品的用戶主打年輕人這個群體
而放在B端這些因素其實參考價值并不大，這是因為首先一個組織、一個公司、一個門店的員工組成是復雜的，自上而下很可能覆蓋了老中青三個年齡層次，性別男女都有，不會因為你的這些屬性就影響了了產品的購買決策，全公司除了老板之外基本都是無理由被動接受產品并使用的客觀狀態，所以在這種狀態下年齡、性別等問題的參考價值就基本不大了
以上的區別造成了B端和C端的用戶畫像在基因上就有“種族區別”，所以在對B端用戶進行標簽設計的時候再次提醒千萬不能生搬硬套照搬C端，還是要深入了解業務、職能之后才能做出較為落地的符合屬于你的用戶的畫像
其實在用戶畫像的價值上B端和C端沒有太大的區別，主要都是為了進行精準營銷和個性化服務
精準營銷的的價值主要是針對市場和銷售團隊而言的，我們所收集到的關于客戶的每一點信息都可以稱之為是一組數據，在大數據營銷已經逐漸成熟的當下一個成功的用戶畫像是可以助力銷售團隊更快速的找到正確的業務方向，篩選出真正的目標用戶，提升轉化率，大大降低了浪費在與非目標用戶的交流上，也是銷售團隊不斷進行調整自我調整的指南
對于市場來說，通過對于用戶畫像的具體分析可以更為準確的調整營銷內容和營銷策略，從而更好的對渠道選擇進行更合理的配置，在有效的用戶畫像基礎之上思考創造出更多的有效客戶。是一個非常有效的降本增效的輔助
而個性化服務的價值則是對于產品、產研團隊而言的。當今的B端產品大致可以分為三種大的類目：企業自研、外包和SaaS，在面對自己的客戶進行產品設計與服務的時候都多多少少會對每個用戶不同的需求進行具體問題具體分析，從而進行一定的個性化定制服務
所以當用戶畫像足夠的時候產研團隊可以的對用戶的一些差異化需求進行精準把控并制定出最適合的解決方案，而在產品迭代的階段也能更加具有針對性的對產品的功能、交互進行完善
用戶畫像的意義其實是貫穿了從產品研發到產品是投入服務的每一個階段的
在研發初期，用戶畫像的明確可以幫我們迅速清晰產品定位模糊這個問題，因為很多產品在研發初期其實是搞不清楚自己的產品定位的，這會導致后面一系列的開發問題造成連鎖反應，而用戶畫像是為了在項目一開始就幫助我們地知道我們在為一群什么樣的人服務，這樣就把準了產品的相對較為準確的定位，規避了后面出現偏差的風險
在畫像確立后的設計階段我們需要對產品進行架構設計，用戶畫像是防止我們的架構設計混亂，梳理層級輕重、功能優先級的指南利器。我們經常會一下子同時接到各種各樣的需求，很多人選擇無論吞棗的一股腦把需求中的功能全部堆砌上去，這樣直接導致的就是產品層級混亂，功能無歸類，交互毫無邏輯，開發效率低下，就算最后做出來了用戶也很難上手，甚至無法通過產品順利走完一套業務閉環
明確的用戶畫像可以在一開始就為你產品的功能排布、架構設計賦予邏輯，因為用戶畫像可以明確的知道用戶的具體目標，從而將需求可以進行輕重緩急的分類，此時每一個功能都可以歸類到相應的模塊，功能所處的位置可以按照需求的重要程度進行優先級的位置放置，同時交互更加符合實際使用場景，確保產品在產品再投入使用后能快速上手，快速解決用戶的問題
在設計進行的階段團隊內部會議時，不同崗位之間經常會出現對功能設計、視覺設計、交互設計不同的意見，甚至會產生很大的爭議，在面對這樣的爭議很多時候其實設計師在產品經理、運營的面前是沒有什么話語權的，這主要是因為大部分設計師其實對業務的熟悉和用戶思維背書較弱，而別的崗位也會經常把設計當作擼圖工具人使用，所以導致了現在很多設計師尷尬的現狀：經常會被面臨提出設想后被斃稿的情形
而一個具有說服力的用戶畫像其實在很大程度上能夠對這個弱項進行彌補，用戶畫像代表了我們所服務的目標用戶，那么我們需要解決的一切問題都是要圍繞他來展開的，通過對于用戶畫像的核心需求的利用作為你的方案最好的佐證材料，不僅能夠在設計目標上與同事達成共識，解決溝通過程中的各種爭議問題，還能讓你的設計真正做到言之有物，經得起推敲從而大大提升你的話語權
到了產品的測試階段，用戶畫像同樣發揮著其重要的作用，雖然B端的產品相對來說測試較為難以進行，但是找到最為符合目標的用戶對其進行產品可用性測試記錄其實還是具有非常重要的意義的。精準的用戶畫像可以較為快速幫我們鎖定我們需要進行招募的用戶
當產品上線后用戶畫像的作用也還并沒有結束，任何產品都希望自己的產品生命周期能更為長久，這就需要通過對自己的目標用戶進行不斷的深入需求挖掘，在不斷的迭代中成為最適合你所服務的用戶的定制化產品
而一個完善的用戶畫像是具有不斷的需求挖掘潛力的，產研團隊可以通過對于畫像的深入研究進行用戶的深入需求挖掘，從而指導產品功能的良性生長。
建立用戶畫像的第一個前提是要知道用戶畫像被一般會被需要的時機，這點來說其實比較好理解，那就是當業務需求出現或是改變，產品出現了一些有待解決的問題時候，這也是設計、改版被需要的時候。舉個例子當我們發現我們的產品上線后效益一直處于并不樂觀的情況，這時候很可能是我們對于用戶的需求分析出現了偏差，導致供應無法對應需求
那么我們就應該重新設計我們的用戶畫像，再次深入挖掘正確的需求，以適應我們的目標用戶
還有一個前提就是你需要大致明確你所服務的用戶，也就是開篇說的“我們服務的是一群什么樣的人”在這一步你對這個概念不一定需要有一個十分的把控，但是至少需要大方向上的正確，因為這是為你后面的信息數據收集工作進行導航，確定查找范圍，以防方向上的失誤
當確立了具體的大致方向后，我們就要開始初步的信息收集與準備工作，也就是具體了解你所服務用戶的業務，這是你能做好的B端用戶畫像的前提
首先，這是因為如果不了解你的業務很容易造成你無法從一個全局視角對你的設計業務進行理解，當你不知道你的用戶所處在業務中的位置，會很容易造成對真正的關鍵人的定位失誤，造成用戶同理心的缺失，那么也就無法真正分析出最為貼合用戶的需求，對業務足夠理解你就不會對關鍵人的尋找定位失誤，也能上站在用戶的角度來思考問題
其次，對業務較為理解的通透，是有利于你在信息求證階段（用戶訪談階段）與用戶進行較為順暢的溝通的。你對業務的理解足夠深入能夠在被訪談的用戶面前樹立出一種專業的感覺，這可以讓用戶較為放心地和你進行交流，你與用戶之間也才會存在共鳴，同時用戶會因為你的專業感產生與你繼續交談的興趣，你才有可能獲取到更多的信息，畢竟大家都喜歡跟懂行的人聊天
相反當你不理解業務時與用戶進行交流本身就會存在一種不自信感，而你所設計的問題會表現的十分生澀，造成用戶覺得與你交流是在浪費時間的感覺。要知道用戶其實是很不喜歡和你解釋一些行業內所謂的“懂得都懂”的術語、表面問題的，而且很多概念可能就是用戶實際工作中不存的顯得很荒誕。如果你要問我怎么知道的，不怕大家笑話我的第一次用戶訪談基本上全程踩雷
由于對業務的不熟悉就冒然進行用戶訪談，會導致最后用戶在問我：“你到底要問什么呢？”“你是不是要問這個？”“你說的我不是很理解，我們好像從沒聽過這個名詞”這樣的情況真的十分尷尬
最后，深入了解業務不僅能通過激發被訪談用戶興趣的方式啟發你們對與更深層次需求的交流，這些深層次的需求捕捉是可以作為你后面在建立用戶畫像標簽、推進項目的時候很有利的背書，作為你的設計的有利支撐依據
在初步的信息獲取階段，其實我們是可以有較多的手段來進行的，我將其分為外部資源、內部資源兩大部分
內部資源包括：
像產品經理索要業務方面的相關文檔，這些文檔具體來說可以是在做業務的過程形成的資料入：提案或者結案時候的PPT、Keynote文檔，通過成功的或已經在進行的案例快速了解業務信息和行業概況，還有就是可以通過進入一些客戶反饋群來收集整理客戶實時反饋的需求信息
2.公司后臺數據，公司后臺數據是你的獨特優勢，因為一般公司的后臺數據都比較少進行公開屬于內部資料，但普遍具有較強的真實性，你可以通過內部的資源搜索找到你需要的數據
3.通過與銷售團隊和客戶成功團隊（CSM）的訪談交流得知行業和用戶的信息，尤其是CSM團隊他們和客戶的接觸周期最長，最快也最全地能拿到關于客戶的一手數據，是很好的可以去獲取數據的途徑
4.公司高層訪談，公司高層決策層面對客戶考慮問題相對而言會更加全面，通過與高層的交流可以拓展你的思維廣度
外部資源包括：
同行交流，在行業中尋找業務能力較為強的同行朋友，虛心向對方進行請教受益良多（這也是我最經常用的方式）
2.付費數據，在市場上存在著比較多的進行數據付費的機構，比如企查查、客戶堂、用友等，當然這個需要考慮支付成本，承受能力
3.公司官網、行業資訊門戶網站，通過對目標客戶的公司官網進行一定的研究可以較為直觀的對客戶的特征進行了解，而想要獲取行業特征與資訊可以養成經常上行業資訊門戶網站的習慣，進行對行業需求風向的實時把控，如：艾瑞網
4.相關的文章資料，可以通過類似于人人都是產品經理或者是收藏一些比較有權威性的語雀知識庫，同樣是一個比較好的渠道
通過豐富的渠道你可以對你需要的數據進行大量的搜集，但其中一定需要搜集到的信息包括如下：
客戶公司基本信息，這其中包括：公司或組織相關的關鍵人（決策者）信息、組織的人員架構（尤其是對每個決策連路上關鍵人的位置把握），如果業務涉及CRM的模塊還需要去了解公司的管理制度、賞罰機制、晉升制度
2.客戶主營業務信息，這其中包括了：客戶基本業務、核心業務、業務整體架構、核心業務使用場景、達成業務目標的資源需求和能力配置
3.客戶公司產業鏈信息，這點的搜集雖然比較繁瑣涉及面廣，但是如果時間允許還是建議去搜集，當知道了客戶業務處于其產業鏈的哪一個位置，其中有那些頭部公司，就可以更加理解客戶的各種決策背后的因素
4.一些專業術語的掌握，專業術語的掌握可以為后續你在求證假設的訪談階段起到重要作用，不僅能給對方創造你很專業的感覺，還能減少對方不必要的專業名詞解釋工作，節省用研時間成本
當我們從各種渠道搜集完信息之后，信息是較為駁雜的，我們需要進行的是對于信息的第一遍過濾處理，將問題按照關聯度的輕重進行篩選（不然很容易出現面對很多問題時我們無法抓住最為顯著的主要問題），然后就是對于你想要了解但是還沒有通過資料找到的部分以自己的經驗進行假設并記錄，通過后面對信息的求證部分完成對于你的假設部分的驗證
將這些信息收集是有明確的目的性存在的，主要分為三點：
第一，初步找到客戶信息中的共性要素，在尋找各路數據的過程中，是經常會多次被反饋到相同的信息的，當你被反饋相同的信息頻次比較高的時候，你就要特別注意這些信息，因為這很可能是你的目標客戶群具有的共性，可以初步寫入你的畫像草案中
第二，圈定設計目標與范圍，當了解了客戶的大致基本信息時，我們就應該對我們的設計目標有了一個大致的判斷，同時知道客戶對于不同的需求優先級，通過對于優先級的梳理，我們可以在畫像信息中將這些需求進行有秩序的排布，有利于項目推進中大家集中資源優先解決重要問題，范圍的劃定也有效放置了我們在調研過程中的方向偏離
第三，將你的調研目標具體化，為下一步信息求證做準備，當我們經過了初步的信息收集與檢索后我們就對我們的用戶有了一個更加清晰的認知，此時我們即將進行對這些數據的再一次求證，當求證之前我們需要圈定我們的調研具體目標，而這一步的意義就是為用戶訪談做準備
信息求證的階段其實是與目標用戶的接觸，也就是我們經常聽說的用戶調研，如果說在之前的階段我們都是通過間接的方式了解用戶，那么到了這個階段就是與用戶進行直接的溝通，概括的來說就是通過設計好的問題詢問到我們需要的數據
涉及到的方法其實有很多比如：用戶訪談、問卷調查、實地調研、詢問專家用戶……由于篇幅的限制我就淺談一下用戶訪談這一求證方式，日后也可以出一篇單獨講用戶訪談篇目的
首先要知道的是無論進行什么方式的驗證其本質目的都是為了豐富和校正我們的用戶畫像，是帶有一定認知基礎進行的，所以我們的核心目的一定是：盡量深入的挖掘用戶需求和驗證自己的假設以對畫像進行補充，在這個思路基礎之上來進行
這個階段很難說做到定量訪談，所以需要提前明確的是我們進行的一定是有計劃的定性訪談，我們首先需要經過精挑細選通過自己的判斷篩選出5-7個我們認為值得去調研的對象并提前與之取得聯系
然后就是設計準備好問題提綱，錄音設備和文字記錄設備（可以是筆記本也可以是電腦）這里需要注意的是問題的設計的問題要有針對性，比如你想確切的了解具體在實際場景中員工是如何操作執行的；還有就是問題的設計盡量以解決你初步整理資料后留下的疑問為目標，這樣會比較有效率；詢問的問題在文案上盡量口語化，不然很容易讓被訪問者有一種“被審問的反感”
當一切準備就緒后我們就開始了與用戶的交流，在訪談開始時不要表現的目的性那么強，很容易讓客戶產生疏離感，我們可以先與客戶進行簡單的寒暄當作熱場，讓對方的話匣能盡量打開，卸下對方下意識的防備，在訪問中除了注意及時記錄還需要注意的是：
注意問題的開放性，不要將問題限制的過于小，比如，只是問：“你們現在有外賣業務嗎？”那么你得到的回答對你的指導意義并不大，比如你在后面可以加上“您認為在這塊兒的業務有哪些可以更加改進的地方？有什么自己的看法？”把問題變成開放式問題，讓客戶有自己發揮的空間，這樣做有利于你從客戶口中能了解到更多存在于“專家盲點區”的深層需求
2.要以一種學徒的心態來進行交流，千萬不要用戶半句話還沒說完你就突然又蹦出一個問題，用戶訪談對于執行者來說是一個極其克制的過程，很多時候寧愿等對方說完，冷場個兩三秒，也不要急于主動發言，這會大大降低每一次問題所能帶給你信息反饋量，很多時候執行者要做的就是傾聽
實話實說我的第一次用戶訪談用戶體驗非常差就是因為自己性子急躁，突然想到問題就立馬問，這是一定要避免的
3.當對于一個問題存疑的時候，可以先進行記錄，在用戶敘述完后針對這個問題以不斷問為什么的方式進行提問，直到用戶無法繼續回答，這是一種典型對問題深入挖掘的方式，在實際訪談中很受用
4.對隱私問題謹慎提問，沒有人不對隱私被問起不反感，如：店鋪這個月的營收狀況。當需要問起隱私問題的時候需要斟酌再三，能不問就不問，如果真的需要問可以在訪談結束后，以一種非正式的方式進行提問，會比較妥當
采訪后整理資料并不是是說所有采訪結束后再整理，而是在每一次采訪結束后就習慣性進行一次整理。這是因為這有助于我們二次加深每次訪談中的重點問題，而且在冷靜的狀態下通過回顧的方式可以更有效地過濾出每位用戶的需求重點
除了及時進行歸檔備份外在十分確認的關鍵點上及時將其補充至畫像標簽庫中；在仍有存疑的問題上進行記錄保留想辦法在下一次訪談中得到答案；思考在訪談中自身的不足之處，進行改正，避免在下一次訪談中再犯
在這樣的良性循環中，能確保你的訪談能達到最高的效率
當所有的調研工作結束之后，你已經對客戶有了一個較為立體的認知，下面就需要對你收集到的所有數據進行一個篩選整合
這一步做目的就是找到相同角色的共性特征，并提取一些必要的差異化需求，對角色進行較為真實的還原
比如我們可以從樣本中提取所有門店同一個角色：店長，針對店長這個角色對其進行在行為變量和痛點上的分析建模，所謂的行為變量比如就是角色日常在使用場景中的活動、自身對系統的學習能力等等，他能直接幫助我們推測出用戶對產品的接受程度、使用成本等問題
當我們把行為變量和痛點需求羅列成坐標后，把符合的角色帶入模型中進行一一映射，就可以快速的知道哪些是共性特征，哪些是值得研究的獨有特征，哪些痛點是普遍痛點，哪些是差異性特點，詳情見下圖
至此，我們的信息篩選與整合部分就算是完成了，那么畫像的產出也顯得水到渠成、順理成章
如果上面的工作做的較為順利，畫像的呈現將會較為順理，通過提煉的共同點將其對應的點反應在畫像上的各個部分，由于在2.3.2部分中已經敘述過用戶畫像基本的組成部分，這里就不再過多的贅述，主要是以展示信息是如何有理有據地產生的這個過程為主
還是以2.3.2中角色畫像的形式呈現來進行案例演示，通過對于我們收集到的數據來進行具體文字敘述的對應轉化，逐漸構建出我們所看到的用戶畫像
當然痛點、共性和需求肯定遠遠不止上述所示，用戶畫像的信息還可以被更為細化的進行擴充，根據自身產品的特點、業務、定位進行更為貼合信息補充
至此，用戶畫像的建立就完成了，感謝你看到這里，在最后一部分我想和大家再討論討論用戶畫像中比較常見的錯誤，有我自己的教訓也有前輩告知的經驗
這應該是不管是B端還是C端的用戶畫像經常會出現的一個問題了，具體表現為：一味地追求形式的炫酷，在絲毫不考慮為什么要添加這些標簽的情況下，直接在一些渠道上照著別人的用戶畫像就是一頓猛抄，盲目更風生搬硬套，給人一種為了畫像而去畫像的感覺（由于怕被打我就不放圖了），很多時候就是當你問他為什么要添加這個標簽的時候，他的回答就是：“我看別人畫像上也有這個，我也這么用”（不要笑這樣的情況還真不少）
這樣導致的結果就是用戶畫像與我們目標用戶的業務、使用場景關聯度并不高，設計無法真實還原用戶的使用情況，設計流于表面，銷售也很難通過用戶畫像找到真正的KA客戶，這樣的用戶畫像可以說是基本處于一種不可用的狀態。
其實甄別可用還是不可用最為直接的辦法就是找到一個很確定的目標客戶，將以上痛點和使用場景通過對其訪談詢問，帶入真實工作場景就可以進行最直接的驗證
所以我們在這點上還是要以實用性大于形式感的思路、高場景關聯度的方式，去踏實地進行繪制才有可能繪制出可信度高，可用性高的用戶畫像
許多比較有實力的公司對于用戶畫像十分重視，希望通過大量的成本投入來盡可能的全面展示其用戶的特征，這本是好事兒，但是很多時候會出現“用力過猛”的情況，具體表現為：通過大量的對用戶的每個細節進行標簽建立并記錄并存檔，導致用戶本身關鍵性特征不明確。有一句話叫：“一個人如果都是特點，那么他也就沒有特點了”這是對這種情況最中肯的評價
導致的后果就是，你會發現的你的標簽庫中存在著大量的標簽，但是會完全抓不準用戶的主要矛盾進行發力。當好不容易從幾百個標簽中抓住了核心發力點，發現其實至少一半以上的標簽都是出于閑置狀態，也沒有對業務的拓展起到更多的作用，非常浪費設計資源、設計成本
所以我們還是要從一開始就抓住用戶最核心的訴求，在以核心訴求為中心，進行需求的發散，不同的痛點羅列出不同的優先級，集中資源優先解決最重要的問題，面對標簽的態度應該是在精而不在多
我把這種情況稱之為“形而上學”的的用戶畫像，具體情況表現為：當產品第一次成功上線后，所建立的用戶畫想就一勞永逸基本不去進行信息更新了。誠然由于很多產品產品周期的長久，面對的用戶使用周期較長，很多時候用戶標簽的迭代看上去是一件沒有必要的事兒，但是想要產品長期高度貼合用戶的需求，保持優良的體驗感，就一定要重視對于用戶畫像標簽的維護和迭代升級
因為用戶的需求和業務都是動態變化的，那么對于我們服務供應側來說對于用戶的認知也一定要隨時處于一個動態的狀態，但凡產品突然滿足不料用戶的需求了，那么客戶隨時可能找一個更為合適的替代品，用戶的忠誠度就和渣男渣女心一樣，都經不起考驗，不要抱有任何的幻想，隨時對用戶保持清醒的認知，對他們的特征進行記錄，才能長久的做出貼合其需求的產品，所以用戶畫像的更新迭代，任重而道遠
關于B端用戶畫像其實還遠不止以上的內容，僅希望通過以上的心得體會能幫助到正在為之犯難的你，與大家相互交流，如果能碰巧助你一臂之力那么真的不甚榮幸，祝正在努力的我們都能變得更強
文章來源：站酷 作者：核糖bro
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
頁面布局是頁面設計的一部分，我們不僅要處理頁面上視覺元素的布局與排列，還要考慮這些元素在不同大小的屏幕上的適配問題。
頁面布局不僅僅是前端同學要考慮的問題，也是設計同學要重點關注的；怎樣的布局能更好的展示頁面內容同時兼容不同屏幕的大小呢？不同的布局形式下，設計師要著重考慮哪些點呢？今天就來探討下這個問題。
固定布局（Fixed Layout）：網頁上所有的元素寬度以像素（px）為單位。例如，直接設定網頁的主體部分寬度為960px/1200px，某個搜索框寬度為60px等等。這種布局具有很強的穩定性與可控性，缺點也顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。當前，大部分門戶網站、新聞資訊類網站、企業的PC宣傳站點都采用了這種布局方式。
PC：大多采用居中布局，所有樣式使用絕對寬度/高度(px)，設計一稿合適的尺寸就可以，在屏幕寬高縮小時，使用橫向和豎向的滾動條來查閱被遮掩部分；如果大于這個寬度則內容居中，填加背景寬度。頁面的模塊、彈窗、間距等都是固定尺寸，需要設計補充的頁面規約比較少。
優勢：這種布局方式對設計師來說是最簡單的，跟動態布局相比，能夠更好地控制頁面的美觀度，排版穩定，在窗口拉伸過程中規避了內容重疊或者不規則的情況，仍保持原始比例，靜態位置和內容樣式。
劣勢：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現，對于超大屏和超小屏用戶不友好。
知乎網頁端：
微博網頁端：
流式布局（Liquid）的特點是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。
流式布局也叫也叫百分比布局，是移動端開發中經常使用的布局方式之一。元素的寬度按照屏幕分辨率自動進行適配調整，保證當前屏幕分辨率發生改變的時候，頁面中的元素大小也可以跟著改變。
流布局與固定寬度布局基本不同點 就在于對網站尺寸的側量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。把元素的寬,高,邊距,間距不再用固定數值,改用百分比,這樣元素的高,間距會根據頁面的尺寸隨時調整，以達到適應當前頁面的目的。屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。
* 百分比是基于元素父級的大小計算得來的；* 元素的水平或者豎直間距都是相對于父級的寬度計算的.* 邊框不能用百分比設置
網頁中主要的劃分區域的尺寸使用百分數（搭配寬度最大值、最小值屬性使用），例如，設置網頁主體的寬度為80%，最小寬為960px，（最小寬也就是保證頁面內容不會錯亂的情況下的寬度，到達最小寬度后，不再適應，出滾動條）圖片也作類似處理（寬度:100%, 最大寬一般設定為圖片本身的尺寸，防止被拉伸而失真）。
注意：
寬度自適應，但是里面的圖標、字體等也是固定大小的，并不是所有的東西都是自適應的。一些大的圖片，設置寬度為百分比自適應即可，隨著屏幕大小進行變化,對于小圖標或者文本等, 一般都是固定寬高大小。
同時考慮到頁面具體模塊、彈窗、字段等在最小寬度下的顯示，比如給出字段最小寬度，在最小寬度顯示不下時如何處理。可以參考阿Zi之前的文章：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
在網頁布局中，我們通過設置元素的寬高定義元素的顯示大小，但是，在不同窗口大小，不同分辨率下，寬高相同的元素顯示狀況是不同的。所以，我們往往需要元素的大小能夠根據窗口或子元素自動調整以達到自適應。沒錯，在頁面設計中，自適應的規則往往是需要設計補充的最多的。
因為阿Zi所在公司的管理系統是采用左側導航欄固定，右側內容區自適應的流式布局，所以舉幾個實際工作中的應用的規約例子：
a.彈窗自適應
b.模塊、卡片自適應
一種是當頁面橫向拉伸時，卡片里內容個數不變，布局不變?？梢园褜挾染殖蓭讐K，然后內容在模塊內居中，給出最小寬度；如下，設定單個最小寬100px，如到達最小寬度后顯示不全，出現橫向滾動條；更靈活的情況就是收縮時內容/區塊布局變動的。同樣要設置區塊最小寬；向右自適應—橫向排序，右側不夠則折行；最小寬度平均分成均等份，剩余寬度均分到其他列。
據統計，PC端用戶的主流分辨率主要為 1920、1440 和 1366，個別系統還存在 1280 的顯示設備。有些情況下不太好控制內容自適應，那么就需要出2，3套尺寸的設計稿來適配?？梢愿鶕唧w情況判斷系統是否需要進行適配，以及哪些區塊需要考慮動態布局，哪些時候出多套尺寸。
優勢：流式布局一般用于解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)
劣勢：因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，顯示不協調。
兩欄
常見的做法是將左邊的導航欄固定，對右邊的工作區域進行動態縮放。
兩欄的左側固定寬欄框大多在40到300范圍（適用于左側導航、篩選的情況）。
舉例：
Ant Design
三欄
在特殊場景下，左側會有雙重左欄的情況，適用與一級導航簡單，二級導航復雜的頁面。
舉例：Teambition
還有兩側固定，中間自適應的布局，有圣杯布局和雙飛翼布局。圣杯布局來源于文章In Search of the Holy Grail，而雙飛翼布局來源于淘寶UED。雖然兩者的實現方法略有差異，但是視覺上都差不多，就是三欄，然后左右兩邊寬度固定，中間寬度自適應。
還有瀑布流布局也是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。
優點
1.有效的降低了界面復雜度，節省了空間；
2.對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣，而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕。
3.更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當中。
缺點
1.有限的應用場景：無限滾動的方式只適用于某些特定類型產品當中一部分特定類型的內容。
例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。
2.關于頁面數量的印象：其實站在用戶的角度來看，這一點并非負面;不過，如果對于你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適用。
3.關于精準定位：無限滾動加載讓用戶很難精準定位到某一模塊。
舉例：pinterest
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。響應式布局能使網站在手機和平板電腦上有更好的瀏覽體驗，也就就是說一個網站能后兼容多個終端，而不是為了每一個終端做一個特定的版本。
響應式布局意味著，無論用戶是在iPhone還是筆記本電腦上查看網站，都應該能夠訪問所需的內容，擁有一致的用戶體驗，這就要求UX/UI設計人員考慮的問題更多，同時考慮到網站和移動設備的場景，忽略這些肯定會阻礙網站或移動應用程序的用戶體驗。
接下來從響應式設計的特點著手，展開下設計師需要了解和注意的點。
CSS斷點是響應式網站的經典特征。他們的工作是根據屏幕大小將設計“分解”為較小的網站版本。斷點通常具有最小和最大寬度，這些寬度決定了用戶可以看到哪個版本的設計。
但是，一個網站需要多少個斷點才能真正響應？如果設備不適合最小或最大寬度，則網站設計仍然看起來很奇怪，這違背了創建響應式設計的全部目的。
尼克·巴比奇（Nick Babich）指出，大多數響應式網站都需要至少三個或四個斷點才能正常工作。根據縮放的大小，內容將相應地進行調整。斷點通常針對移動設備，平板電腦和臺式機視圖進行細分，盡管您可以擁有更多的斷點，以便涵蓋所有基礎，以提高設備的靈活性。許多設計師還包括“較小”的斷點，這些內容在內容中會自行調整以保持設計的視覺平衡，但不會發生大的變化。這包括更改字體大小之類的內容，但不包括一般結構。
圖像在任何網站中都非常重要，無論是高分辨率照片還是自定義插圖。那里的一些設計師相信裁剪圖像，以便用戶只能在較小的屏幕上看到圖像的一部分，因此視覺效果保持不變。對于我們而言，最好的方法是使用矢量圖像。
對于許多設計團隊而言，最好首先關注最小的屏幕來開始設計。這主要是因為通過將移動設計放在首位，團隊可以對內容的去向有一個很好的了解。
響應式設計圍繞內容，假設你采用建議的“移動設備優先”方法，則意味著您應該為移動設備分配重要內容的優先級，并隨著屏幕尺寸的增加添加更多內容。
當涉及到響應式設計時，與常規設計相對應的只是關注內容。因此，通過首先創建移動版本，我們可以縮小從一開始就需要顯示的關鍵內容（用戶絕對需要的部分）的范圍。從那里，我們可以在進入更大的屏幕時添加更多的細節和更多的內容，或者找到更好的方式來顯示關鍵內容。
1）注意視覺層次，從最小寬度的斷點開始
這建議從最小的屏幕分辨率開始的原因有關。這不僅是要了解內容的哪些部分絕對重要，還在于了解呈現這些內容的最佳方法。
當網站在不同的斷點切換時，網站的視覺層次結構可能必須適應，從某種意義上說，它需要適應屏幕尺寸的變化，為了保持產品的可用性，組件也必須適應。
如上所述，在響應式網頁設計中使用的每個斷點都將有一個最小寬度和一個最大寬度。當使用移動優先的方法設計，一個好的經驗法則就是可以從你的三個斷點的每個最小寬度開始設計。這樣，您將為較小的設備設計屏幕，并在屏幕變大時添加更多內容和UI元素。請記?。合蛏贤卣苟皇窍蛳驴s放，向上拓展總是容易的。
對于基于Web的產品，按鈕可能非常簡單。畢竟，光標是幾乎任何人都可以使用的準確工具，但我們的手指說的不一樣。所討論的手指的大小可能因用戶而異，并且設計人員需要考慮移動屏幕上的可用空間很小。
根據Apple的《人機界面指南》，平均手指輕觸為44×44像素。為了提高可用性，請確保針對此平均值對按鈕和可點擊區域進行適當調整。
如果您依賴導航欄作為查找信息的主要方式，則需要在移動設計中仔細確定導航欄的優先級。該產品的各個方面（例如導航設計）絕對至關重要，需要在響應迅速的網站中進行仔細計劃。隨著設備屏幕的變小，該導航欄的空間將越來越小。
那么像這些問題就需要我們重點考慮：什么時候隱藏導航選項？全部隱藏嗎？首先隱藏哪些？
常用的做法是，將導航、頭部搜索、用戶信息等內容隱藏在按鈕后面，例如我們在手機上經常能看到的漢堡菜單。的確，漢堡菜單并不是唯一的選擇，但不可否認的是，整個導航菜單都需要隱藏在智能手機中。
這就是要嘗試確定整個產品中最重要的頁面，并確保無論使用哪種設備，用戶都可以找到它們。在設計過程中盡早完成此優先級設置總是最好的，因此，如果我們從移動設計入手，我們將已經需要包含一些重要的內容。
優勢：
a.用戶體驗友好
隨著電腦尺寸多元化，智能設備（pad/智能手機）普及化，在當下追求用戶體驗至上的時代，網站普遍使用固定的寬度逐漸滿足不了現在不同設備與不同分辨率需求。在高分辨率電腦寬屏顯示器上，兩邊留白過多。在手機上顯示，內容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。
b.提高轉換率和銷量
響應式網站意味著您無需在網站設置跳轉，從而極大完善了用戶體驗，這也是響應式網站的最大優勢所在。另外，使用集成式設計和CSS表單一類的功能使網站無論在何種設備上都能營造出風格一致的感覺和外觀。若熟悉這種布局，用戶可以在任何設備上輕松瀏覽您的網站，進而提高轉換率。
c.節省開發投入
摒棄傳統網站，選擇響應式網頁，單從開發階段就節省大量時間和金錢。為不同的設備同時開發多個網站，意味著后期也需要更多的開發支持費用和維護成本。
d.三站合一，維護簡單
電腦、手機、微信三個網站使用的是同一個網址，同一個后臺管理，數據同步更新，所有圖片和內容只需要上傳更新一次即可，維護簡單輕松。
劣勢：
a.設計與風格有局限性
雖然響應式布局擁有如此顯著的優點，但它也并不是十全十美的，在很多方面，它也有它自身的局限性：
自由度太低，局限性較大，這種情況就是必須兼顧移動端以及PC端的表現，比如最常見的移動端并沒有懸停效果，PC端就要酌情考慮了。需要考慮在手機，pad，PC上三種屏幕下的頁面內元素的呈現，會導致有著非常大的局限。
b.對IE老板兼容性不友好
對于老版本IE（IE6、IE7、IE8）支持不好，這是一個致命的問題，如果你的網站用戶大多還采用老版本IE的話，建議不做響應式網頁設計。
c.靈活性有所欠缺
基于不同終端的設備屬性不同，對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計，如：電商類型網站，寬屏的pc端內容如果全部要在手機端進行展示，勢必導致手機端的界面非常長，需要根據手機端屬性進行重新信息框架設計，這樣對響應網站要求非常高，實現難度與成本非常高。但是大型網站為了提高用戶體驗，通常做法，把高分辨率寬屏網站最小的響應尺寸響應到1024px，不再適配手機端，手機端重新設計開發一套手機網站，簡單理解為2.5響應，如：電商網站亞馬遜、Calvin Klein、Nike、視頻網站Youtube，等。
d.速度可能會變慢
由于響應式頁面是同時下載多套CSS樣式代碼，可能在手機上就下載PC、Pad的冗余代碼，導致文件變大，影響加載速度。
根據響應式網站的優缺點，我們不難看出：企業官網、單頁宣傳網站非常適合做響應式網站設計，由于它們的界面內容比較少，結構比較簡單，所以在不同終端、不同尺寸設備上進行網站信息框架調整、內容加減、圖片、文字、柵格響應比較容易。內容比較多帶有功能性的網站不適合做響應式網站設計。
示例1----Dribbble
在1960-2048的屏幕下，顯示5列內容
在950-1330-1960屏幕下顯示3到4列
在500-620-950尺寸下顯示1-2列布局，并且把頭部主導航、搜索框、用戶設置等內容收起到到左上角菜單：
示例2----Event Apart
互動設計會議Event Apart創造了從其主要網站到其移動網站的無縫過渡。
他們選擇在大多數平臺上保持大多數相同的布局，平板電腦版本與臺式機相同，并且可以使用。這是因為他們為清晰起見選擇在白色背景上以粗體顯示內容，并且在調整大小時，可以輕松滾動信息。
唯一真正的變化是，對于移動版本，頂部的面包屑折疊成一個漢堡菜單，并用“菜單”一詞明確指示。
示例3----Popular Science
無論使用哪種設備，Popular Science都能為您帶來出色的用戶體驗。
正如您所期望的那樣，內容處于中心位置，并且具有響應式圖像和簡潔的版式，Popular Science成功地創建了易于閱讀和使用的響應式網站。本網站上的信息以一種可以在各種設備上輕松按比例縮小其所有內容的方式顯示。
最后
雖然目前響應式設計的模式的普及還是有很多難題需要突破：比如響應式的圖片、跨端交互、更高的性能、全新的合作流程等等。但是隨著科技不斷發展，響應技術逐漸完善，給響應式設計提供強有力的技術支持；響應式設計可以在不同終端提供完美展示效果與友好的用戶體驗，吻合用戶體驗至上的趨勢。所以說，響應式設計必定是未來發展趨勢。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
| 圖片源自Dribble @Bhavna Kashyap
短時記憶又稱感覺記憶，保存時間短暫，如果信息得不到及時復述，大概只能保持15-20秒鐘，對用戶而言反復復述數據是很痛苦的一件事，所以對比表單和折線圖，用戶從折線圖中記住起起落落比記住確切的數字要容易的多。
儀表盤提供了關鍵數據的概覽信息，這樣可以直觀展示數據，減少信息短時記憶的負載。如果用戶需要有關特定數據集的詳細信息，可以選擇向下鉆取，得到更多的關聯信息。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
