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