做一個完整B端系統(tǒng)項目前，從交互設(shè)計的七大定律，B端產(chǎn)品業(yè)務(wù)調(diào)研，用戶訪談研究方法，精準(zhǔn)推導(dǎo)B端用戶畫像，到B端產(chǎn)品主風(fēng)格的設(shè)計定調(diào)，深度理解B端主流組件庫的視覺規(guī)范，進(jìn)而為B端產(chǎn)品設(shè)計做充分的準(zhǔn)備工作，以下內(nèi)容較多，大家可以根據(jù)上述目錄來進(jìn)行選擇性閱讀。
概念：組件庫的底層邏輯就是原子理論，類似于我們在拼樂高積木的時候，根據(jù)說明書一個模塊一個模塊來拼湊，先找零件，再拼成部件，然后是成品，這個過程和UI中的組件化是一模一樣的，組件化就是原子理論集中得表現(xiàn)，原子（圖標(biāo)、按鈕、字體樣式等）——分子（標(biāo)簽欄、導(dǎo)航欄、搜索框等）——有機(jī)體（圖文列表、內(nèi)容卡片、布局模塊、瀑布流圖等）——模板（原子、分子組合排列組成了模板，也就是原型圖）——界面（最后根據(jù)原型圖形成視覺設(shè)計稿）
作用：一致性：比如在不同得界面中，如果用樣的按鈕，他的按鈕的展現(xiàn)形式，要保持一致性。
高效性：比如所有的按鈕不用單獨去設(shè)計了，從組件庫里調(diào)用就可以，這樣對于設(shè)計師來說就是高效的。對用戶來說，也會讓用戶的使用效率提升，比如當(dāng)用戶看到藍(lán)色的按鈕就是可以提交的按鈕，看到白色得按鈕就是次要得按鈕，看到不帶邊框的按鈕就是一個危險按鈕等等。
組合性：通過調(diào)用不同的組件來進(jìn)行組合可以形成不同的頁面。
一些主流的組件庫，比如AntDesign、Element Design、ZanDesign組件庫等，這些框架機(jī)構(gòu)本質(zhì)都差不太多， 但他們有自己的特點，具體用哪個組件庫，通常由公司的架構(gòu)師來進(jìn)行架構(gòu)選型，比如VUE（Element Design）和REACT（Ant Design），這是兩種不同的技術(shù)選型，（VUE和REACT是一種前端框架的技術(shù)架構(gòu)版本，可幫助前端工程師快速進(jìn)行開發(fā)的前端框架）。從技術(shù)角度講，大部分公司會首選AntDesign（React），因為有很多案例提供，VUE和有贊也可以但用的少。從設(shè)計角度，Ant Design得設(shè)計組件形式案例很完善。Element Design做起來視覺單一得樣式白白得感覺，沒有設(shè)計層次化，Ant Design更好看一點。所以先選擇底層的前端框架，再根據(jù)這個選擇前端的機(jī)構(gòu)布局。
設(shè)計師和前端最終目標(biāo)是一樣的，都是快完成保證設(shè)計質(zhì)量的，原生組件不能達(dá)到要求的時候，設(shè)計師可以根據(jù)原生組件庫修改樣式來表達(dá)到自己的想法。但對前端來說最好什么都別改，就用原生組件庫前端工程師直接復(fù)制就行，這也是因為我們設(shè)計師的要求和前端的要求是不一樣的。但修改后樣式的組件，底層邏輯還是原來的組件。從Antdesign等組件庫里復(fù)制出來，經(jīng)過figma里的各種功能操作后，比如分離組件、改變組件得形狀、替換內(nèi)容等，但這個組件仍然是Antdesign里的組件，組件是否改變?nèi)Q于，這個圖形，這個組件是不是已經(jīng)代碼化，我們設(shè)計師設(shè)計的組件，只是樣式，需要經(jīng)過前端來形成代碼，只有代碼化的組件，才是組件，如果沒有代碼化，那只是一個樣式而已。所以，我們用Antdesign里是已經(jīng)實現(xiàn)代碼化了得組件，組件庫里有的組件前端一定是可以代碼實現(xiàn)的。
項目初期：在一個B端項目得初期，大家都會有疑問，B端組件庫應(yīng)該什么時候開始建立？是不是先建組件庫再開始設(shè)計？答案是，如果不是從0開始的項目，組件庫在設(shè)計之初就應(yīng)該建立起來，如果項目是從0開始，由于沒有業(yè)務(wù)的案例，組件庫組件庫也無法建立，但可以建立一些最小元素：原子。比如字體（應(yīng)該用什么樣的字體，在正標(biāo)題，副標(biāo)題，大標(biāo)題，正常情況下應(yīng)該怎么樣使用字體的得明度）、色彩（色彩規(guī)范是什么，比如醫(yī)療行業(yè)，航空行業(yè)，交通行業(yè)應(yīng)該用什么色彩，決定主色不是好不好看，而是由企業(yè)來決定得，首先了解企業(yè)的VI色，通過結(jié)合VI色和產(chǎn)品分析出的用戶畫像特征，來確定主色，輔主色，確定主色后，相應(yīng)的背景色、深色背景、淺色背景、灰度背景、卡片背景等，也就都可以做出來了）、按鈕（通常狀態(tài)，點擊狀態(tài)，當(dāng)前焦點狀態(tài)，不可點狀態(tài)）、基本控件、布局柵格、圖表（圖標(biāo)icon、文本標(biāo)簽、按鈕、圖表）、圖標(biāo)；通過建立原子組件，完成一些基本典型的頁面設(shè)計。
項目中期：繼續(xù)完善基本組件庫，應(yīng)用案例的完善，迭代組件庫、樣例庫、最佳實踐案例。然后再次迭代進(jìn)入基本組件庫。
項目后期：形成最終組件庫與設(shè)計系統(tǒng)的規(guī)范建立，根據(jù)項目不一樣詳細(xì)程度也可以不一樣。
延展期：為項目2.0升級準(zhǔn)備根據(jù)使用反饋、迭代之前得組件庫與規(guī)范，預(yù)計未來版本中出現(xiàn)的典型案例，并針對性的設(shè)計應(yīng)用組件。通常很少有公司進(jìn)行到這一步。
B端組件庫的存在是不是意味著不需要設(shè)計師了？其實并不是，組件庫可以幫助設(shè)計師增進(jìn)設(shè)計效率和溝通效率，和前端溝通告知按照對應(yīng)的選型組件庫規(guī)范使用就可以了，同時組件庫得一致性、準(zhǔn)確性、協(xié)同性它的質(zhì)量有保證。但設(shè)計師做完組件庫后，繼續(xù)需要關(guān)注的點是：
01、根據(jù)業(yè)務(wù)場景來優(yōu)化設(shè)計組件庫：因為組件庫是一定會去更新的，如有必要再去更新，那一定會是很復(fù)雜得業(yè)務(wù)場景下去做更新的，這個業(yè)務(wù)場景是程序員或者以前的組件不能實現(xiàn)的，需要很強(qiáng)的設(shè)計技能去做迭代，所以需要設(shè)計師繼續(xù)去做一些結(jié)合業(yè)務(wù)場景的組件來放到組件庫里。
02、需要設(shè)計師把更多時間精力投入更多設(shè)計體驗中，而非搬磚：組件庫的建立同時解放了設(shè)計師的精力，設(shè)計師可以把時間投入到設(shè)計體驗中去，而不是做一些搬磚得工作，比如按鈕怎么畫，用圓角還是用什么顏色，這些沒有技術(shù)含量的工作，這樣一來，可以投入更多時間來賦能業(yè)務(wù)更好體驗設(shè)計工作。
戰(zhàn)略層（屬于產(chǎn)品愿景，滿足用戶的需求，產(chǎn)品的愿景和目標(biāo)）
由于用戶有不同的需求進(jìn)而產(chǎn)生了不同的產(chǎn)品，戰(zhàn)略層決定了用戶用干什么樣的產(chǎn)品，比如，用戶需有很多銷售客戶的線索需要進(jìn)行管理，用戶需要管理客戶，那就做一個CRM系統(tǒng)。比如，用戶想寫日報，想要一個打卡的OA系統(tǒng)，那么產(chǎn)品目標(biāo)就是要做一個OA系統(tǒng)。比如，電商里面很多商品，牽扯到很多進(jìn)銷存，那就做一個ERP系統(tǒng)。這部分跟設(shè)計師相關(guān)度沒有那么高。
范圍層（指功能規(guī)劃，功能的規(guī)格、包括內(nèi)容的需求）
功能規(guī)劃：比如要做一個OA系統(tǒng)，其中就包含了打卡、日報、項目管理、報銷、人事流轉(zhuǎn)等等都是跟辦公相關(guān)聯(lián)的，需要把規(guī)格和功能畫出來，畫成簡單的表格并且將它們分類，這里所有的功能都不是詳細(xì)的，就是簡單的分類，將功能簡單描述一下，同時做一個簡單的用戶畫像。這部分設(shè)計師只需要閱讀產(chǎn)品經(jīng)理給到得PRD需求文檔即可，整體看還是偏愿景，沒有形成具體的產(chǎn)出。比如OA系統(tǒng)中就總結(jié)出重點做一個審批得功能，并不知道什么樣的界面，只知道一個大概的范圍。
結(jié)構(gòu)層（指原型設(shè)計）
這部分，設(shè)計師通常就需要參與進(jìn)來，如果設(shè)計師只按產(chǎn)品給的設(shè)計好的原型來設(shè)計，就顯得很被動，這樣只能叫做視覺美化，被稱之為美工，設(shè)計師應(yīng)該從沒有形成原型的時候，可能只是一個簡單的PRD需求文檔或者草圖，設(shè)計師就應(yīng)該參與進(jìn)去。
設(shè)計師對原型進(jìn)行優(yōu)化設(shè)計，優(yōu)化的不是業(yè)務(wù)，因為很多業(yè)務(wù)內(nèi)容肯定沒有產(chǎn)品經(jīng)理了解得深刻入，這時，設(shè)計師需要優(yōu)化的其實是它的交互邏輯、交互內(nèi)容，一旦原型里里產(chǎn)生點擊，一旦產(chǎn)生多種狀態(tài)，那就要去了解它，每種狀態(tài)產(chǎn)生不一樣的界面結(jié)果，其實對標(biāo)的就是設(shè)計師設(shè)計的界面將產(chǎn)生什么樣的變化，換句話說，如果有界面的變化，內(nèi)容得變化，設(shè)計師就需要參與到其中。目前來看，很少公司有專門的交互設(shè)計師，要么這部分工作由UI設(shè)計師來完成，要么由產(chǎn)品經(jīng)理來完成，很多企業(yè)已經(jīng)把設(shè)計進(jìn)行前置化，由UI設(shè)計師來完成交互的工作。
其中交互設(shè)計+信息架構(gòu)設(shè)計是設(shè)計原型圖的關(guān)鍵，這兩個是密不可分的，如何制作原型圖，如何在原型圖里設(shè)置一些交互事件，給大家推薦《信息架構(gòu)設(shè)計》這本書里有專門講到。再了解原型設(shè)計之前，不得不提到一個通用知識點，交互設(shè)計的七大定律。（后文有介紹）
框架層（指界面設(shè)計、組件設(shè)計）
框架層這部分有一些爭議，有的設(shè)計師認(rèn)為就直接做界面設(shè)計了，其實框架層還不能把它理解成是界面設(shè)計，它僅僅是做了一些業(yè)務(wù)的模塊兒的框架而已，更多的其實是將它組件化: 將原型組件化、模塊兒化，類似我們直接從Antdesign組件庫復(fù)制來內(nèi)容簡單改改之類得操作，完成的是組件和界面的設(shè)計，這些界面并不是最終完整的交付樣式。
表現(xiàn)層（可視化呈現(xiàn)，UI視覺呈現(xiàn)）
這部分和設(shè)計師關(guān)聯(lián)度最大的一部分，就是界面中的配色、配色、圖標(biāo)、樣式、結(jié)構(gòu)、布局、排版等設(shè)計，但是我們設(shè)計師需要從范圍層了解業(yè)務(wù)熟悉最初PRD產(chǎn)品需求文檔去一點點做起，其中設(shè)計師在戰(zhàn)略層參與度可能只有2%左右，范圍層參與度5%左右，從結(jié)構(gòu)層開始逐步往上參與度越來越高，至少結(jié)構(gòu)層，框架層和表現(xiàn)層的參與度是很深得。
所以，通過梳理用戶體驗五要素，不難看出B端UI設(shè)計師的工作流程就是，01. 接到項目后，設(shè)計師主要閱讀產(chǎn)品經(jīng)理給到的PRD需求文檔，同時去參與原型設(shè)計，根據(jù)最初版PRD輸出一份低保真原型圖，和其他部門進(jìn)行初次評審；02. 經(jīng)過初次評審討論過后，完善后的功能和頁面文案，產(chǎn)品經(jīng)理補(bǔ)全和輸出完善后的產(chǎn)品PRD需求文檔，由設(shè)計師根據(jù)完善后得PRD需求文檔經(jīng)過規(guī)范設(shè)計輸出高保真原型圖 ，與其他部門帶著初次評審討論后的問題，進(jìn)行二次評審。03. 最終再由設(shè)計師經(jīng)過組件化形成視覺圖。04. 同時設(shè)計師提供切圖，與前端緊密溝通，上線前制作設(shè)計走查表，進(jìn)行設(shè)計走查。05、最后上線后根據(jù)數(shù)據(jù)、用戶反饋等提出交互和視覺可優(yōu)化得方案建議，進(jìn)行版本迭代。
01. 菲茨定律：當(dāng)設(shè)計師需要讓用戶重點去看到頁面中某一個突出點，點擊到一個區(qū)域時，設(shè)計師就需要做到適合的大小，適合的區(qū)域，適合的位置，適合的形狀，適合的顏色。也就是你想讓用戶點擊的時候就突出重點想顯示的，不想讓用戶點擊退出的，就把它設(shè)計的的足夠小。比如按鈕得退出和付款，實心付款按鈕為主要按鈕，虛線置灰退出按鈕為次要按鈕，比如常說的海報中字要大，logo要大，這些都屬于菲茨定律。
02. 席克定律：用戶面對的刺激（或選擇）越多，他們做出決定的時間就越長，由于用戶的時間很寶貴 ，用戶沒有義務(wù)花更多留在我們的網(wǎng)站上，所以我們需要有選擇的地方對選擇進(jìn)行分類。
03. 7土2法則（米勒定律）：比如圓周率3.1415926，一般都能記住，而如果再往后加幾個數(shù)字，大家往往很難記住，原因就是經(jīng)過大量測試，人腦容易記憶7位數(shù)字前后得數(shù)字，比如設(shè)計銀行輸入密碼的時候就用到了7土2 法則，設(shè)置密碼過多人腦不易記憶。
04. 接近法則：格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。
05. 防錯原則：當(dāng)用戶在使用產(chǎn)品中，預(yù)判用戶本身或產(chǎn)品一定會出錯時候，可以告訴用戶怎么可以不犯錯，或者將風(fēng)險降低。比如電腦的關(guān)閉電源鍵，就允許電腦司機(jī)時允許系統(tǒng)犯錯，讓用戶使用關(guān)閉電腦電源鍵進(jìn)行重啟。比如銀行取出錢后，銀行卡有忘拔現(xiàn)象，銀行完全可以做到像光大銀行那樣去再取錢流程中改成先拔卡再出鈔得交互流程，就可以避免忘記拔卡，但其他銀行都沒有這么改進(jìn)，仍然是先出鈔后拔卡得原因是允許用戶犯錯。
06. 奧卡姆剃刀原理：化繁為簡，如無必要，勿增實體。比如小米電視遙控器的設(shè)計，由原來傳統(tǒng)的很多遙控器按鍵只優(yōu)化成了保留上下左右為數(shù)不多的幾個重要按鍵，原來的遙控器數(shù)字按鈕如果真正要輸入數(shù)字的時候通過功能性，調(diào)出數(shù)字來，這樣在遙控器得設(shè)計中基本只保留20%主要功能按鍵。這就是交互上的優(yōu)化。比如在UI界面中，也會用到這個問題，簡化文字，把文字用圖標(biāo)替換，還有各種流程得優(yōu)化等等。
07. 雅克布定律：以用戶習(xí)慣的使用模式去設(shè)計產(chǎn)品，降低用戶學(xué)習(xí)成本，遵從用戶使用習(xí)慣。 利用現(xiàn)有的思維模型，用戶習(xí)慣，我們可以創(chuàng)建出色的用戶體驗，使用戶可以專注于自己的任務(wù)而不是學(xué)習(xí)新的模型習(xí)慣。
用戶畫像又稱用戶角色，作為一種勾畫目標(biāo)用戶、聯(lián)系用戶訴求與設(shè)計方向的有效工具，用戶畫像在各領(lǐng)域得到了廣泛應(yīng)用。用戶畫像分為兩種，不論C端和B端都會做這樣的用戶畫像?？偣部煞譃閮刹糠郑拘畔?shù)據(jù)和行為數(shù)據(jù)。
基本信息數(shù)據(jù)：當(dāng)我們?nèi)チ私庥脩舻幕拘畔⒌囊恍?shù)據(jù)時，職業(yè)，收入，年齡等等，這些和功能有很多的關(guān)聯(lián)度，比如唯品會用戶畫像關(guān)鍵詞是：女性、折扣、白領(lǐng) ，唯品會產(chǎn)品定位聚焦女性，這些基礎(chǔ)信息數(shù)據(jù)，就能給產(chǎn)品帶來很好的結(jié)果，當(dāng)我們要做一個女性的購物平臺的時候，可以先把男性用戶拋除掉去考慮設(shè)計方向，再比如收入就知道了，大概產(chǎn)品面向的收入群體將是什么收入群體的人，那么我賣貨的價格區(qū)間、包括設(shè)計的風(fēng)格就是一個什么樣群體的設(shè)計風(fēng)格。那些賣奢侈品的不是黑色就是灰色，要不就是棕色，但未必是適合唯品會產(chǎn)品的風(fēng)格，需要找出這些基本信息去和產(chǎn)品進(jìn)行關(guān)聯(lián)度，把基本信息放到設(shè)計結(jié)果中去考慮。
行為數(shù)據(jù)：指用戶的愛好，這部分群體有哪些愛好，是喜歡購物，還是喜歡運(yùn)動，他/她的消費(fèi)情況是什么，喜歡旅游還是美食，他/她經(jīng)常用哪些APP，他常用的設(shè)備，是蘋果手機(jī)呢還是安卓，小米還是華為，等等得到這些數(shù)據(jù)，也能得到一些用戶喜歡什么樣的競品，這些數(shù)據(jù)就能側(cè)面的在我們的產(chǎn)品中得到反饋，得到功能和設(shè)計上的指導(dǎo)和其他產(chǎn)品的區(qū)別。這些行為數(shù)據(jù)，不管我們做C端還是B端，都要獲取到，但C端和B端獲取到這些行為數(shù)據(jù)的結(jié)論是不一樣的。因為C端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個人，給他帶來的很多屬性，這些等等都會成為他的用戶畫像。
進(jìn)而找到這個人，將他的社會屬性，從抽象的角度慢慢變得具象，C端是他/她的社會屬性，把他做成一個普通的人，這個人有他的社會屬性，有他的社會價值，有他的社會行為。比如一個女性，一定喜歡美食，一定會買化妝品。
比如做一個和電影相關(guān)的管理系統(tǒng)，電影行業(yè)包括很多人員管理，設(shè)備管理等，這里不能把用戶畫像抽象成一個男性或者女性了，而應(yīng)該把它抽象成一個職業(yè)，比如抽象成一個導(dǎo)演，導(dǎo)演需要去管理什么東西，它需要哪些資源去整合。導(dǎo)演就又叫做行業(yè)屬性坐標(biāo)。B端不以社會屬性去做用戶畫像，一定以行業(yè)坐標(biāo)去做用戶畫像，我們在整理作品集的時候需注意不要與C端畫像整理混淆。
我們要做一個行業(yè)可以不用管他/她是誰，也可以不用管他/她有什么樣的社會屬性，比如做CRM最重要的在里面起到作用的是，客戶關(guān)系管理和銷售等; 比如做OA系統(tǒng)，就是一般的員工，等級，職能等等，可以看出行業(yè)屬性(職業(yè)屬性)決定了他的用戶畫像的精準(zhǔn)度，一定把這個人拉到行業(yè)里去研究，研究社會屬性沒有價值。這是C端和B端做用戶研究最大的區(qū)別。
01. 了解產(chǎn)品業(yè)務(wù)需求定位：可以幫助了解目標(biāo)用戶的信息，從用戶的角度：未來使用你產(chǎn)品的用戶，他理不理解你的產(chǎn)品想要表達(dá)什么，你的產(chǎn)品講了哪些功能。因為很多好的產(chǎn)品我們打開它第一眼就知道要干什么，是給我們做什么的。同時站在設(shè)計者的角度：怎么可以把這個產(chǎn)品設(shè)計清楚，比如做一個CRM客戶關(guān)系管理系統(tǒng)，具體管理什么我們是不清晰的，想要清晰就需要通過用戶調(diào)研這個過程給它展開。
02.解決功能信息架構(gòu)問題：可以幫助設(shè)計師更明確需求功能得合理性和優(yōu)先級，比如頁面標(biāo)題的使用、標(biāo)題的層級、需要在信息層級清晰得情況下體現(xiàn)出來，而明確信息層級同樣需要通過用戶研究體現(xiàn)出來。
03.讓可用性測試更加準(zhǔn)確：可以幫助鎖定合適的測試用戶，來測試我們的產(chǎn)品使用程度，使用體驗是不是好，這時需要要找目標(biāo)用戶去測試，比如小米有品針對群體是米粉，唯品會針對的群體是職場女性，而不像C端找所有的人去測試。
04.解決團(tuán)隊協(xié)作溝通問題：確定用研目標(biāo)可以有理有據(jù)的把設(shè)計目標(biāo)和產(chǎn)品經(jīng)理的意見達(dá)成共識，因為未來一定會多次和產(chǎn)品進(jìn)行PK，像諸如設(shè)計師組件化沒用好這些理由也不會是pk點，確定用研護(hù)鏢可以更好的深度去理解原型圖，可以把團(tuán)隊協(xié)作溝通的問題解決好。
01. 確定研究對象：首先拿到一個產(chǎn)品，拿到一個需求的時候，這個需求通常很模糊，比如只告訴做一款CRM客戶關(guān)系管理系統(tǒng)，但汽車行業(yè)，服裝電商行業(yè)，保險行業(yè)，銀行金融等等，都有CRM客戶管理系統(tǒng)，不同行業(yè)的CRM肯定是不一樣的，這時候，比如要做金融的CRM，那研究方向就已經(jīng)確定了，金融CRM就可以確定去研究金融行業(yè)的業(yè)務(wù)鏈，業(yè)務(wù)流程，具體找哪些用戶群體，可以根據(jù)以往的驚經(jīng)驗和產(chǎn)品的目標(biāo)去確認(rèn)。
02. 找研究方法 : 研究方法分主動和被動，我們通常用的方法是被動方法，比如自我報告法：當(dāng)這個產(chǎn)品產(chǎn)生了一些數(shù)據(jù)，我們從后臺可以拉取這些數(shù)據(jù)的時候，通過這些數(shù)據(jù)去分析，這是被動的方法，這個被動的方法所有項目都可以用。而主動的方法，就是觀察和采訪，主動去找用戶去找關(guān)聯(lián)度。
03. 獲取到數(shù)據(jù) : B端和C端區(qū)別之一是提高效率，它要產(chǎn)生的結(jié)果只有一個結(jié)果，就是減少成本，任何B端的系統(tǒng)都是為了實現(xiàn)這個目標(biāo)，提高效率和減少成本。所以獲取數(shù)據(jù)，研究數(shù)據(jù)的方向不能偏離搞錯，用戶研究的方向不要搞錯。比如我們以用戶為中心來設(shè)計，就會認(rèn)為用戶的操作體驗感是第一位的，其實不對，放在第一位去考慮的應(yīng)該是以系統(tǒng)的最優(yōu)化，提升效率為第一位，而用戶也可以為這件事情做一些改變而找到平衡點，數(shù)據(jù)導(dǎo)向得提高效率，減少成本有時會大于用戶的操作體驗。
04. 用研行為: 剛才前面提到的這些注意事項，到底應(yīng)該找什么方法去得到這些數(shù)據(jù)呢？第一我們可以通過后臺數(shù)據(jù)比如通過百度統(tǒng)計等系統(tǒng)來獲得；第二通過問卷法發(fā)出一些問卷，用戶可能散落在全國不同位置；第三可以通過用戶定性訪談來獲得；第四可以通過用戶旅程圖來決定用研行為。
05. 分析調(diào)研結(jié)果: 研究結(jié)果不是為了放到我們的B端作品集里的，而研究結(jié)果一定是為了去定性、定量、讓數(shù)據(jù)回歸到產(chǎn)品功能本身。同時經(jīng)常問自己這些問題，去根據(jù)研究結(jié)果和問題進(jìn)行匹配思考，比如研究了那么多，用到了用戶畫像得出的結(jié)論了么，用到了哪里？在項目中能舉個例子嗎？采用什么樣的視覺去實現(xiàn)了用戶體驗要素？
01.確定訪談目標(biāo)：了解目標(biāo)用戶群體，通過訪談信息來進(jìn)一步構(gòu)建所需要的用戶畫像，從而確定設(shè)計方案與功能優(yōu)先級。02. 定性/定量訪談目標(biāo)：將這些目標(biāo)定量、定性，選擇不同的訪問對象，構(gòu)建不同的角色畫像。比如問銷售的用戶畫像，要找不同的訪問對象，銷售總監(jiān)，普通實習(xí)生等等，三到四個角色，樣本越多，用戶畫像越準(zhǔn)確。03. 訪談過程：提前把問題寫出來，拿著問題去聊，用錄音設(shè)備，記錄表格，一個提問，一個記錄，分開后記錄比較準(zhǔn)確。04.訪談結(jié)束：要做信息匯總，要做分析建模。分析建模就是將信息最終變得有意義。
B端用戶訪談模板有30個問題，這30個問題決定了我們的用戶畫像的精準(zhǔn)度和產(chǎn)品的用戶畫像的價值。用戶訪談會問些什么問題呢？當(dāng)我們調(diào)研的時候把問題寫出來的時候，就已經(jīng)解決了一半的問題了。
01、基礎(chǔ)特征
崗位：你是從事什么崗位的？是總監(jiān)還是普通職員？目的是為了知道不同的權(quán)限的使用者，進(jìn)而就可以在系統(tǒng)中設(shè)置這些權(quán)限。
職責(zé)：需要獲取到用戶不同的需求，因為每一個崗位有不同的職責(zé)，他們的需求點也是不一樣的。根據(jù)這些不同的需求，我們在界面中得動態(tài)儀表盤部分，就可以根據(jù)不同職責(zé)來顯示不同的內(nèi)容。
姓名：可以讓訪談記錄得到更加真實的體現(xiàn)，目的是可以獲得產(chǎn)品的一些真實的基礎(chǔ)字段。
年齡：是用戶認(rèn)知和經(jīng)驗度的體現(xiàn)，用戶的年齡可以代表他們對行業(yè)的認(rèn)知，和整個企業(yè)流程的認(rèn)知程度，一般性理解，用戶的年齡越大，那么他的經(jīng)驗越豐富。
教育：指用戶是什么學(xué)歷，目的是為了了解用戶的經(jīng)歷與熟練程度，通常認(rèn)為，用戶的教育越高的人，他們往往使用軟件操作的熟練度會越好。
位置：指用戶在什么地方來使用，目的是知道了場景與優(yōu)先級，用戶是在寫字樓里還是精英場所來使用我們的產(chǎn)品。因此得出基礎(chǔ)特征是要得出這些結(jié)論，得出這些結(jié)論進(jìn)而反饋到產(chǎn)品中去。
02、行為接觸點
使用頻次：不同的崗位用戶使用功能的優(yōu)先級是不一樣的，用戶使用頻次越高的功能，這個功能的優(yōu)先級就越高。了解之后，那在下次迭代的時候就需要把重要級別的功能放在易操作的區(qū)域去體現(xiàn)。比如這個重要功能就是一個icon，那么把它放一個快捷入口。
使用時長：也能代表功能的優(yōu)先級，用戶使用時間最長的功能，代表可這個功能優(yōu)先級很高。
時間段：用戶在什么時間段使用的是最多的，我們就知道了這個功能的活躍度，這個數(shù)據(jù)指標(biāo)，主要和技術(shù)有關(guān)，我們可以從后臺數(shù)據(jù)去獲得。
使用設(shè)備：用戶使用設(shè)備兼容的優(yōu)先級，平時用戶用什么設(shè)備，再訪談過程中，需要問具體使用電腦的分辨率，屏幕的尺寸，屏幕的比例，都可以去實際的調(diào)研一下。在我們做B端界面選擇屏幕尺寸的時候，可以采用結(jié)合實際情況用戶使用的屏幕分辨率尺寸來設(shè)計界面。
相關(guān)軟件：用戶平時的操作習(xí)慣和流程是什么，還會使用其他軟件嗎？比如他們還用什么其他的競品，可以繼續(xù)問用戶其他的競品哪里比較好，哪里是亮點，那最終得到的目標(biāo)就是用戶的操作習(xí)慣和流程，這些也可都可以反饋在我們產(chǎn)品中。
03. 使用環(huán)境
碎片化時間：主要解決用戶場景的問題，比如汽車4S店銷售，當(dāng)你去買車時，銷售人員會問，你會買什么樣的車，會記錄你的年齡，用車習(xí)慣，用車時間，姓名，預(yù)算，都會記錄，銷售通常會用一些碎片化的時間去記錄。此時就可以得出兩個結(jié)論：1.我們在設(shè)計的時候是否可以考慮讓銷售充分利用碎片化來進(jìn)行這些信息的錄入，而且方便他的錄入，比如他本來只有電腦端，電腦端是一個完整版的功能，我們能不能給他設(shè)計出一個移動端來，讓銷售不用回到電腦屏幕中就可以去記錄這些內(nèi)容。2. 記錄時也有兩種記錄方式，是客戶講話的時候銷售去記錄還是這些事情做完之后銷售再去記錄。通過這樣的行為會得到這樣不同的設(shè)計結(jié)果，比如有人問你們公司為什么要做B端的移動端設(shè)計？以上就可以有理有據(jù)去解決銷售的場景問題。
用戶的操作環(huán)境是什么：主要解決視覺體驗問題，用戶是白天操作還是晚上操作，是在強(qiáng)光環(huán)境操作還是弱光環(huán)境操作。這些都應(yīng)該是考的點。比如B端使用的ATM機(jī)，應(yīng)該設(shè)計成白色還是深色模式，我們知道一般都是深色模式，是因為通常是室內(nèi)，它和光線有關(guān)系，如果是室外的取款機(jī)，四周又沒有遮擋，如果還設(shè)計成深色，肯定是看不清楚的。比如HMI車載系統(tǒng)，白天模式開了深色，一定會看不清楚。所以要提前判斷使用深色模式還是淺色模式，也需要考慮在設(shè)計的時候使用什么樣的色彩和色調(diào)，在室外使用還是室內(nèi)使用，如果對色彩不怎么挑，那也可以使用VI色，這樣一來視覺的保障色就確定了。還可以確定在使用周期時間，要多長時間完成一個操作，應(yīng)該使用什么樣的方法可以盡快完成一個操作。通過用戶的操作環(huán)境可以得到以上信息。
是否有平行事件：用戶在做這件事情的同時，他是不是需要做其他的事情，要得出至少兩種平行事件，得到的結(jié)論是，我們的界面是不是需要把某些功能整合在一起，因為用戶經(jīng)常是需要同時做這兩種事情，同時去打開這兩個功能，通過這樣的反饋可以把同時使用的這兩個功能結(jié)合到一起，通過訪談可以得到這樣的依據(jù)，來進(jìn)行功能的整合。
04. 主動詢問用戶觀點
用戶的驅(qū)動力: 去了解激勵因素，就知道了什么功能應(yīng)該做完善，什么功能并沒有那么重要。比如汽車銷售為什么要錄入信息，因為可以增加汽車的銷量，錄入越準(zhǔn)確的用戶信息，他的銷售量越高。也就是用戶做這件事情，他的原因是什么。
用戶遇到最難事件: 在工作中或者用戶使用過程中遇見了什么樣難的事情，這件難的事情，就是產(chǎn)品的痛點，就明白了當(dāng)前產(chǎn)品迫切需要什么樣的功能去幫我們設(shè)計師來解決當(dāng)前產(chǎn)品痛點的問題。
用戶遇到最颯事件:他在使用過程中最滿意的是什么事情，就是爽點是什么事情，那些產(chǎn)品中解決了用戶很好的問題的部分，去把產(chǎn)品更好的放大，讓用戶繼續(xù)使用。也就是通過訪談我們知道了產(chǎn)品的爽點是什么。
用戶擔(dān)心事件:在他們使用過程中擔(dān)心的是什么，我們也要要了解這些隱藏的問題.
用戶期望事件: 用戶希望得到什么樣的改善，最終的目標(biāo)是想解決什么樣的問題，到這一步其實所有問題目前都沒有答案，我們可以繼續(xù)訪問，先做記錄，不做最終的答案.
問用戶目前狀態(tài): 我們可以了解待解決的問題，通過產(chǎn)品想解決什么問題，進(jìn)行收集需求；用戶對于產(chǎn)品升級有什么小期待，進(jìn)行收集需求；通過用戶的反饋目前產(chǎn)品的哪些問題，收集到目前反饋的問題；以往問題是否有效解決；進(jìn)行收集反饋。覺得不錯的同類型產(chǎn)品有哪些，通過了解競品情報，我們可以競量多問一些 覺得不錯的競品有哪些；目前產(chǎn)品有哪些地方很好，很好的地方要保持，有的產(chǎn)品升級后，以前特別好的功能突然消失了，改了沒必要，好的功能保持就可以；前產(chǎn)品有哪些地方不好，我們?nèi)?yōu)化不好的地方；以往問題是否有效解決，當(dāng)有問題需要解決的時候，用戶的問題是否是通暢的。通過看用戶如何反饋，我們可以了解功能傾向，了解整個流程是否通暢
05. 聊生活
發(fā)覺人性閃光點，提升產(chǎn)品差異競爭力，1、問目前的生活狀態(tài)，婚姻狀態(tài)，有沒有孩子，接送孩子的時間，平時有什么愛好？什么愛好不錯？發(fā)覺人人性的閃光點，好的不好的產(chǎn)品都有共性，B端產(chǎn)品中視覺的傾向是什么？比如有插畫，溫馨的語言提示，通過什么樣的情感設(shè)計可以照顧到每個人的生活。
如何判斷功能在用戶那里好還是不好？前面所有的都只是在記錄，現(xiàn)在才是在做判斷，判斷的第一件事，是做定量的整理，所有的問題都收集到了，也記錄到了，至少需要有兩個樣本，去做定量整理。
第一步是行為的總結(jié)，量級的總結(jié)，把記錄的問題點、功能點和關(guān)鍵詞放到表格里面，經(jīng)常出現(xiàn)，迫切需要解決的是什么問題，較少的問題是什么，偶爾的行為問題是什么，因此偶爾的優(yōu)先級就不高了，主要關(guān)注經(jīng)常遇到的問題點、功能點和關(guān)鍵詞。
把每個角色按照以下表格里的的特征進(jìn)行定量的描述，這時候仍然不能找出它的共性點，但已經(jīng)把用戶的特征進(jìn)行分類整理了，定量之后再去定性。
這個角色名稱是一個具體的名字，比如王某某。以下這張表：可以看到在我們的系統(tǒng)中有哪些的權(quán)限，有哪些的角色，他們的需求是怎么樣的，這是一個完整的用戶畫像。用戶畫像是一個結(jié)果，是通過用戶訪談的形式完成了用戶畫像，并不是被動的接受數(shù)據(jù)信息得出的，所以通過用戶訪談的形式進(jìn)行定量定性分析得到的結(jié)果是最準(zhǔn)確的。
本質(zhì)是將情緒視覺化，情緒版并不是玄學(xué)的東西，它確實可以通過圖片找到對應(yīng)的圖形元素，因為圖形（照片）是可以表達(dá)情緒的，比如看到一張照片會感受什么什么情緒：熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關(guān)的關(guān)鍵詞。
情緒版是一個特別快速能和產(chǎn)品，我們的團(tuán)隊包括設(shè)計團(tuán)隊進(jìn)行溝通的一種方式，比如要設(shè)計一個界面，需要幾天才能設(shè)計出來，但我想提前知道一下未來界面設(shè)計成什么樣子，那就先做一個情緒版，讓大家知道，找的方向是什么，這樣適合與大家及時的溝通，大家也會明白產(chǎn)品將會做成什么樣子，達(dá)成產(chǎn)品的最終設(shè)計定調(diào)。
01. 提煉關(guān)鍵詞：獲取本次產(chǎn)品設(shè)計中所要實現(xiàn)的產(chǎn)品3-5個必要的關(guān)鍵字詞組，其中包括交互或視覺目標(biāo)，通常由一些比較抽象的形容詞組成。比如：在做的產(chǎn)品是醫(yī)療行業(yè)，那么醫(yī)療相關(guān)關(guān)鍵字詞組是：生命/健康/安全等。
02.關(guān)鍵詞發(fā)散：通過獲取到的關(guān)鍵詞的基礎(chǔ)上，發(fā)散出來一些新的詞語，這種發(fā)散詞匯，不是簡單頭腦風(fēng)暴產(chǎn)生的，而是要有目的性的進(jìn)行提取，要更加的具體。比如剛才舉例醫(yī)療行業(yè)，生命可以繼續(xù)發(fā)散出血液、器官等衍生關(guān)鍵詞。
03. 搜索圖形: 對之前總結(jié)出的幾個關(guān)鍵詞在圖庫中進(jìn)行查找，也可以在直接在behance里找別人收藏好的情緒版圖片直接用，效率可能更高一點。
04. 制作情緒版: 搜索大量圖片后，挑出我們需要的進(jìn)行整理，采用一種拼貼方式進(jìn)行設(shè)計排版，拼貼出來需要得到需要得到的色彩，構(gòu)圖，質(zhì)感和字體。
05. 得出結(jié)論: 在圖形、色彩、字體、質(zhì)感、構(gòu)圖，以上五點，得到合適的設(shè)計方案，快速與團(tuán)隊進(jìn)行溝通，直觀表達(dá)產(chǎn)品清徐，達(dá)成產(chǎn)品的設(shè)計定調(diào)。產(chǎn)品調(diào)性（企業(yè)調(diào)性）其實就是用企業(yè)的方式把故事講述出來，是一種通過情緒版方法來講故事的方式。
品牌三元法是通過品牌三板斧模型得出的一個確定設(shè)計主風(fēng)格的一種新得方法，品牌三板斧模型可以總概為用戶調(diào)研關(guān)鍵的三個維度，一目標(biāo)用戶是誰？二產(chǎn)品服務(wù)是什么？三對于目標(biāo)用戶來說，你的產(chǎn)品服務(wù)有什么核心價值。當(dāng)在回答完這三個問題以后，我們其實就已經(jīng)清楚我們的品牌定位是什么了，因為它的核心優(yōu)勢是比較明顯的，這樣我們就知道我們將來會面對什么樣的人群，去怎樣去宣傳它的賣點，同時做出產(chǎn)品的差異化。
通過這幾年得工作案例設(shè)計實踐，在確定設(shè)計主風(fēng)格時，情緒版方法逐漸有被品牌三元法替代得趨勢，因為情緒版這種把抽象的詞不太好表現(xiàn)的詞，翻譯成圖片的方式，比如剛才提到醫(yī)療行業(yè)的關(guān)鍵詞是生命，健康，安全的，設(shè)計師找到很多這種相關(guān)的圖片，挑出來后從這些圖片里面找到一個共同的規(guī)律，最后去設(shè)計。這里面就有兩個問題，一個原因是關(guān)鍵詞非常的平，生面，安全，健康，很難更準(zhǔn)確的表達(dá)衍生關(guān)鍵詞。另外一個問題是它非常局限設(shè)計師的創(chuàng)意，因為它是從一些現(xiàn)有的圖片里面然后去挑，所以很多設(shè)計師就反饋現(xiàn)有的方法不是很好用，比如當(dāng)我們想到安全這個詞，可能所有人想到都是特別綠的感覺，或者干凈這個詞，就會統(tǒng)一聯(lián)想到白色這個畫面，大家從一開始想法就差不多，所以它很難體現(xiàn)出創(chuàng)意。所以由于情緒版嚴(yán)重限制了自己的想象力，沒辦法把產(chǎn)品核心的氣質(zhì)表現(xiàn)出來，雖然情緒版正確但是是一個平庸的結(jié)果，大家沒辦法記住的結(jié)果。
01. 理性層面（業(yè)務(wù)層面），傳遞產(chǎn)品理念：獲取本次產(chǎn)品設(shè)計中體現(xiàn)業(yè)務(wù)層面，可以傳達(dá)產(chǎn)品理念得5-10個關(guān)鍵詞，對應(yīng)的放在左邊。
02. 感性層面（人文層面），營造產(chǎn)品氛圍：主要體現(xiàn)這個產(chǎn)品給用戶帶來什么好處，宣傳的角度是什么。獲取本次產(chǎn)品設(shè)計中體現(xiàn)人文層面，可以傳達(dá)產(chǎn)品氛圍的5-10個關(guān)鍵詞，對應(yīng)的放在右邊。
03. 個性層面（氣質(zhì)靈魂），創(chuàng)造獨特風(fēng)格：結(jié)合理性的業(yè)務(wù)層面和感性的人文層面，來創(chuàng)作出什么樣的畫面，和獨特風(fēng)格的感覺。同樣總結(jié)出5個左右的關(guān)鍵詞，放在下邊。
04. 結(jié)合以上三個維度，提煉主視覺畫面：當(dāng)出現(xiàn)這三部分詞的時候，經(jīng)過思考或者大家一起頭腦風(fēng)暴，可能一開始想到的比較淺，但最終一定能想到一個最終關(guān)鍵詞或者特別符合我們這個產(chǎn)品氣質(zhì)的畫面，因為以上三部分得出關(guān)鍵詞也都是經(jīng)過品牌三板斧模型推演出有關(guān)聯(lián)的關(guān)鍵詞，想到一個符合產(chǎn)品氣質(zhì)的畫面并不難，再得出這個主視覺畫面后，這就是最終產(chǎn)品調(diào)性的主視覺，既符合產(chǎn)品定位，又具有獨特的差異性。
05. 傳達(dá)產(chǎn)品，用視覺語言講故事：接下來，當(dāng)這個主題、主視覺確定了以后，在看怎么樣用具體的視覺設(shè)計技能，去傳達(dá)我們的產(chǎn)品，也就是用視覺語言來講故事，具體注意三個方面，一是表像，元素要符合這個視覺主題，二是關(guān)聯(lián)，元素之間要具有關(guān)聯(lián)。三是隱喻，用視覺的手段含蓄的表達(dá)產(chǎn)品的一些特性。比如云計算的一些產(chǎn)品，做得比較復(fù)雜每一個圖標(biāo)上都有一些曲線切割的畫面，這樣做的原因其實不是為了炫技，它是為了表達(dá)云計算彈性可擴(kuò)展的特性，好比拍電影，中國人講究隱晦。
在系統(tǒng)色彩中，以Antdedign為例，系統(tǒng)色彩里包含了很多不同的色調(diào)，但不可能用到這么多顏色，這時要應(yīng)用選擇幾個顏色，選幾個我們應(yīng)用的顏色。第一步要做的就是選色，選出應(yīng)用色彩，這個應(yīng)用色彩也就是我們建立得視覺規(guī)范中的基礎(chǔ)色板，在選色時候需注意，要有有明確的心理預(yù)期，比如醫(yī)療行業(yè)中常用藍(lán)色和綠色，就是符合預(yù)期的顏色。在基礎(chǔ)色板里選擇調(diào)色，應(yīng)選擇兩個相同級別的藍(lán)色和綠色；基礎(chǔ)色板里選不同顏色時不要超過三個級別的跳躍；當(dāng)選擇一個確定的顏色時，可以選擇草綠或者青綠色來作為輔助色；在基礎(chǔ)色板里，最頂部的顏色最適合做背景色，中間的顏色適合做按鈕色，底部的顏色適合做狀態(tài)色，或者小面積文字的填充色，其余就是搭配過度的作用。再比如零售、比如金融行業(yè)的產(chǎn)品，會選擇不同的顏色，那這些顏色代表了什么，是不是會和企業(yè)的VI色是有相符之處，這些都是我們?nèi)ヒ紤]的。
01. 注意品牌性：體現(xiàn)特性和傳播理念、價值觀：比如宜家，我們立刻會想到的是黃色和藍(lán)色。比如京東，我們會想到紅色。如果是餓了么，我們會想到藍(lán)色。這些都是標(biāo)識性的色彩，體現(xiàn)和傳遞的就是品牌理念和價值觀。這些顏色一定不是隨便選的，比如，宜家的黃色和藍(lán)色，其實是瑞典的國旗的顏色，代表著宜家的來源地來源于瑞典，因為瑞典是一個很強(qiáng)調(diào)簡約設(shè)計的國家，貫穿始終是在強(qiáng)調(diào)它的的價值觀。一些關(guān)鍵行動點：比如選中的狀態(tài)，按鈕的顏色，在很重要的地方用主色表達(dá)，這就是在體現(xiàn)B端的產(chǎn)品的色彩價值觀和企業(yè)價值觀的地方
02. 注意色彩的功能性：色彩需要體現(xiàn)功能有明確的信息以及狀態(tài)含義，色彩代表它獨特的含義，比如成功色，通常會選擇綠色，再系統(tǒng)色板里，青綠草綠都可以選。比如出錯/刪除/失敗用紅色，表示警告警示。比如鏈接要用藍(lán)色。
畫圖標(biāo)要注意圖標(biāo)的識別性、統(tǒng)一性和獨特性。圖標(biāo)首先要一眼看出來表達(dá)的含義，其次是圖標(biāo)設(shè)計圖標(biāo)的大小，線寬粗細(xì)，圓角大小，圖標(biāo)風(fēng)格等這些都需要統(tǒng)一，最后最好可以體現(xiàn)出圖標(biāo)的獨特性，獨特性就是差異化，這也是品牌三遠(yuǎn)法得核心，塑造產(chǎn)品的差異化，具體分析方法也可應(yīng)用在圖表設(shè)計當(dāng)中，比如根據(jù)品牌基因進(jìn)行延展，也可根據(jù)主風(fēng)格主視覺設(shè)計定調(diào)，設(shè)計出獨特風(fēng)格且符合產(chǎn)品定位得圖標(biāo)應(yīng)用在產(chǎn)品當(dāng)中。
在B端頁面中字體的顯示順序，有固定的一套代碼模式，可以理解為，比如有的用戶電腦沒有平方字體，所以會顯示出冬青黑體，來替代平方字體的設(shè)計稿，如果沒有冬青黑體，就用微軟雅黑替代顯示，字體家族中，從左到右代表了字體顯示的有限順序，平方、冬青黑體、微軟雅黑、黑體、宋體，中英文都是。
在系統(tǒng)中有中文常用PingFangSC、微軟雅黑、思源黑體；英文常用San FranciscoUI（SF字體）、Helvetica Neue、Arial
方法一：在Antdesign中規(guī)定的，比如字體大小是14px，行高就是22px。規(guī)范里最小字體是14px，但可能有注釋字體，字號最小是12px。表格里的內(nèi)容是按照表格里的行高來約定的，與字體行高無關(guān)，這個前提是，不在表格里內(nèi)。當(dāng)沒有出現(xiàn)文本字體，表格里的字體的時候就需要去設(shè)置字體的行高，F(xiàn)igma里默認(rèn)行高是140%，比如14px字體，行高就設(shè)置成22。這是Antdesign里的規(guī)范，但不是唯一的規(guī)范。需要注意的是，如果使用一個標(biāo)準(zhǔn)就全部使用一個標(biāo)準(zhǔn)，這個需要把選中文字段落進(jìn)行調(diào)整行高。
方法二：是當(dāng)按倍率去算的行高規(guī)范，方法步驟是先調(diào)整好行高，去改變字體大小，比如無行高時，1/100%/1倍行高，注意加上%號；緊湊行高，1.3行高/130%；常規(guī)行高1.5行高/150%；寬松行高，1.7行高/170%。
輔助文字12px、正文（?。?3px、正文（常規(guī)）14px、小標(biāo)題（16px，小標(biāo)題是相對于14號字出現(xiàn)的）、標(biāo)題18px、主標(biāo)題20px
比如常用的蘋方有6個字重，但在平時的設(shè)計中根本用不上。中文環(huán)境6個字重在實際顯示并沒那么好，常用兩個字體，萍方常規(guī)體400（常規(guī)），蘋方中黑體500（粗體）。而英文可以用粗體600。
在深色背景下、和淺色背景下不同內(nèi)容的色彩透明度不同，具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下，字體應(yīng)該使用白色還是黑色，應(yīng)該按著規(guī)范嚴(yán)格使用，難點在顏色相近的時候選擇白色還是黑色，也需按照規(guī)范執(zhí)行。
文案類對齊：頁面的字段、段落較短標(biāo)題、需正文左對齊
表單類對齊：保證整齊適合閱讀，冒號對齊法找到中間的冒號，（左右對齊），如果全部使用左對齊或者右對齊會更亂。左邊一般最長字段六個字。前提是中文環(huán)境，不是國際化。冒號左右要留多少像素：8px的倍數(shù)相關(guān)值，4（窄點）、8（正常）、12、16（寬一點）都可以。
數(shù)字類對齊：日期，居中對齊；年齡，居中對齊/左對齊；非固定的數(shù)字：價格，采用右對齊，因為右對齊很容易看到價格的多少，哪個超出的更多，就越貴的，更容易區(qū)分?jǐn)?shù)字的多少。
層級規(guī)范得核心是對信息的間隔和區(qū)分，信息的區(qū)分間隔要用偶數(shù)8的倍數(shù)。具體可分為同層級的區(qū)分，用色塊（比如氣泡）、邊框（欄目之間抖索狂等）、線段來進(jìn)行區(qū)分。錯層區(qū)分，用彈窗（背景變暗）、邊框陰影（陰影的出現(xiàn)是擬物化的出現(xiàn)，當(dāng)物體離它的光源越近，比如高度越高，它的陰影就越大越寬。離它的底部越近，陰影就越小，比如下拉框、搜索框、日歷控件、彈出窗口來區(qū)分）。
這里需注意，關(guān)于投影，再前端角度考慮盡量不要用太多的特效濾鏡來設(shè)計，因為在B端網(wǎng)頁中，瀏覽器的兼容性不好，比如用ie瀏覽器就根本看不到這樣的效果，如果用谷歌瀏覽器能看到，用safri瀏覽器能看到，但在火狐下等又會看不到，想要都看到就需要兼容很多代碼，需要前端加很多代碼實現(xiàn)兼容性的效果，很增加前端的工作量，所以在B端很少用非標(biāo)準(zhǔn)型的濾鏡代碼使用，雖然可以實現(xiàn)，但一般不太用，一般就是變灰、變深、變透明度最簡單的方法實現(xiàn)。不同于移動端，因為IOS用的是原生的開發(fā)，所以不存在這個問題。
文章來源：站酷 作者：morning_c
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
相較于C端產(chǎn)品，B端產(chǎn)品的系統(tǒng)更復(fù)雜，用戶角色也更多樣，故而更強(qiáng)調(diào)針對角色的個性化服務(wù)。這篇文章分析了B端產(chǎn)品的用戶構(gòu)成，提出通過他們關(guān)心的內(nèi)容來對癥下藥的方法，詳述了接觸用戶合適的時機(jī)、渠道以及跟進(jìn)和維護(hù)用戶的方法。一起來看看吧！
面對B端產(chǎn)品，設(shè)計師該如何認(rèn)知用戶以及做出相應(yīng)策略？作者通過對自身一些做B端產(chǎn)品設(shè)計經(jīng)驗、踩過的坑進(jìn)行總結(jié)，期望能夠給感興趣的讀者帶來一些啟發(fā)。
不同于C端消費(fèi)產(chǎn)品的用戶比較唯一，B端產(chǎn)品系統(tǒng)更為復(fù)雜所以用戶角色也更多。本篇將從商業(yè)銷售的角度來研究B端用戶。
B端產(chǎn)品的售賣大多針對一個組織/一家企業(yè)，往往存在著產(chǎn)品價格高、產(chǎn)品體量大、適用范圍廣的情況，所以商家決定購買的決策成本更高，按照組織層級從上向下、可以歸納出「決策者」、「運(yùn)維者」、「使用者」三個層級的角色。
1）使用者
一般是企業(yè)內(nèi)的內(nèi)部員工，在日常工作時需要一些支持性軟件來更好地辦公。比如公司內(nèi)的員工進(jìn)行上下班打卡，這時他們對于考勤系統(tǒng)就是使用者。
2）運(yùn)維者
一般是企業(yè)管理內(nèi)部的部門負(fù)責(zé)人或管理員，他們?yōu)槠髽I(yè)提供支持性的服務(wù)，也是產(chǎn)品工具輔助完成工作的管理者。
3）決策者
一般是一個企業(yè)的CEO/負(fù)責(zé)人，他們來決定是否需要支付一筆不小的費(fèi)用購入一款軟件，來更好地管理企業(yè)。比如某公司的CEO最終決定買企業(yè)微信還是釘釘，讓員工進(jìn)行內(nèi)部溝通。
B端用戶的三個角色，通過相互影響形成了產(chǎn)品購買的「決策鏈」。
這個“決策鏈”的作用產(chǎn)生在「是否購買」、以及「是否續(xù)費(fèi)」兩個核心問題上，通常我們簡稱為「新購」與「續(xù)購」。
在這里我還是重審下背景：出現(xiàn)的新購與續(xù)購概念，好像看起來已經(jīng)脫離了本篇文章的主題，但這確實非常重要。對于B端產(chǎn)品，產(chǎn)研開發(fā)的核心目的還是將產(chǎn)品賣出，設(shè)計師作為產(chǎn)研的一員也需要背負(fù)這樣的任務(wù)。所以我們需要研究用戶，并且從商業(yè)的角度出發(fā)給出建議。
基于此，新購與續(xù)購的商業(yè)概念可以幫助大家更好地聚焦用戶場景與設(shè)計策略。
新購即指從未買過產(chǎn)品的商家、初次購買的過程。
1）對于新購，有的商家是自上而下決策
決策者主動有意愿有想法，從而購買產(chǎn)品。
這樣的方式在購買后對產(chǎn)品的推廣和使用更為容易，下面人員的配合度更高，產(chǎn)品取得的效果也就更好，更容易成為優(yōu)秀的標(biāo)桿案例。
2）有的商家是自下而上決策
從運(yùn)維者主動有意愿有想法，并通過游說決策者、讓其理解當(dāng)前企業(yè)存在的問題、通過什么樣的產(chǎn)品去解決，從而購買產(chǎn)品。
這樣的方式取決于決策者獲取到產(chǎn)品價值從而支持購入，如果沒獲取或不認(rèn)同，則會導(dǎo)致產(chǎn)品售賣失敗。
沒獲取，卻因為其它因素（比如競品企業(yè)都在用了），也可能會進(jìn)行購買。但這樣的方式因為不能獲得決策者最大限度的支持，在推行起來會存在一些障礙和困難，因為B端產(chǎn)品往往牽扯組織內(nèi)多個部門或人員，所以往往啟動較慢，產(chǎn)品效果也不能保證。
所以在這個階段決策者的態(tài)度與意見是非常重要的，運(yùn)維者提供一定的建議，使用者通常沒有話語權(quán)。
續(xù)購即指已經(jīng)購買過的商家，續(xù)約產(chǎn)品的過程。
決定續(xù)購的核心標(biāo)準(zhǔn)：產(chǎn)品是否有效果，翻譯到產(chǎn)研側(cè)就是產(chǎn)品是否被用起來了。
在這個問題上，因為決策者幾乎不會參與過程，所以更考驗運(yùn)維者本身的使用策略，同時也非?？粗厥褂谜叩膶嶋H使用體驗。
在決策鏈上，核心角色的建議權(quán)，往往比決策權(quán)還重，是否被用起來以及用起來的效果是一個從下向上檢驗的結(jié)果。所以在這個階段，運(yùn)維者和使用者的體驗非常重要。
在了解基礎(chǔ)的概念后，還要知道他們關(guān)心什么才能將設(shè)計對癥下藥。
對于決策者來說，擁有最終購買決定權(quán)，但因其并不是實際業(yè)務(wù)執(zhí)行人，所以會考慮其他角色的建議與意見。他們關(guān)注營收增長、效率提高、減少成本等方面的問題。一般都是階段性的查看成果，權(quán)衡產(chǎn)品價值。
對于運(yùn)維者來說，是提供重要意見的核心建議者，也是實際業(yè)務(wù)的執(zhí)行人，會對產(chǎn)品有更多的要求和考慮。他們同樣關(guān)注營收增長、效率提高、減少成本等方面的問題，但更多地是實際執(zhí)行時的種種細(xì)節(jié)問題，具體些就是管理方面的功能完不完備（比如社區(qū)中是否能精選評論、是否能自定給精選評論發(fā)獎勵）、數(shù)據(jù)能力完不完善等等。
對于使用者來說，前期幾乎只能被動接受，但承載著后期衡量產(chǎn)品實際使用效果的作用。他們關(guān)注產(chǎn)品便捷性、是否為自己解決問題。幫他們解決問題，他們才愿意用，產(chǎn)品才能用的起來、用的好。
對B端用戶有一個大概了解后，我們再來了解下設(shè)計師如何介入用戶，了解用戶與用戶相處，讓我們的設(shè)計更打動人心。
不同于C端可以較為自由的選取用戶，B端產(chǎn)品對于用戶的選取與接觸較為受限。
產(chǎn)品供應(yīng)企業(yè)針對所服務(wù)的商家會提供一套售前+售后的服務(wù)體系，并配備了不同的人員分管各個階段，例如有客戶銷售、客戶成功、專屬運(yùn)營等。設(shè)立的目的是針對性的個性化服務(wù)，面對不同商家情況，所轉(zhuǎn)述的產(chǎn)品價值甚至價格都會有所區(qū)別，當(dāng)然這些信息也都非常敏感和隱私。
所以當(dāng)你想尋找用戶做調(diào)研時，一般要找到對應(yīng)的商家運(yùn)營，告知目的后幫你推薦合適的用戶與聯(lián)系方式。除此之外，在話術(shù)方面例如什么可以溝通、什么不可以溝通，如何回答敏感問題等更為嚴(yán)格（這個我們后文會再詳細(xì)描述）。
在認(rèn)知用戶基礎(chǔ)信息所處身份后，還需了解如何與用戶接觸，本文將從接觸時機(jī)與接觸渠道兩個方面闡述，內(nèi)容來自實際經(jīng)驗總結(jié)以供參考。
1）功能類變動
2）視覺類變動
在重要的視覺表現(xiàn)設(shè)計上（比如證書樣式、皮膚設(shè)置等），需要調(diào)研是否符合其審美。
除了尋求運(yùn)營幫助推薦單個用戶，還有一些渠道方式可以幫助你接觸用戶。
1）日常溝通商家群
一般一個商家會建立一個包含該商家的運(yùn)維者、B端的產(chǎn)品經(jīng)理以及運(yùn)營的群，用來解決對接問題以及日常咨詢，所以設(shè)計師可以通過加入這個群，了解商家如何使用產(chǎn)品，都在反饋些什么問題。一般商家反饋的最多的，是某某功能如何使用和bug類。
2）產(chǎn)研反饋優(yōu)化群
不同于商家群的人少而精的特點，問題反饋群更多匯集了各類技術(shù)與全部運(yùn)營銷售人員，用以處理運(yùn)營在平時遇到的商家的各種問題，還有商家從故障平臺等多個方面回收的使用反饋。
這個群不僅可以幫你了解商家更關(guān)注哪些功能、還能通過技術(shù)對于問題的解答更加了解產(chǎn)品邏輯。
一般B端產(chǎn)品的用戶數(shù)量有限，使用深度也更高，除了非常少頻的調(diào)研問卷，更多采用訪談的形式來進(jìn)行問題的挖掘與調(diào)研。這些跟進(jìn)方式其實在各個領(lǐng)域已經(jīng)非常成熟，作者通過自己的實際經(jīng)驗羅列了一些方法和區(qū)別以供參考。
通過實地走訪，真實地走入用戶的實際使用場地，近距離、近環(huán)境的接觸用戶。
操作指南：
1）一般運(yùn)營通過聯(lián)系商家用戶確定上門的時間以及目的，來發(fā)起一次拜訪。
2）拜訪是在設(shè)計師提前準(zhǔn)備好問題的情況下，過程中因為B端商家的使用場景往往不能預(yù)想，且面對面聊天會更加激發(fā)用戶的表達(dá)欲。所以在深度追問的過程中，用戶的回答可能不會按照預(yù)想的方向進(jìn)行，會經(jīng)常跑偏，此時需要根據(jù)你的目的，視情況引導(dǎo)談話方向。
3）溝通時，用戶除了回答產(chǎn)研預(yù)設(shè)的問題、還會提一堆優(yōu)化需求或是功能需求，此時要注意避坑，除了自己能力范圍外的，不能擅自答應(yīng)，但同時也需要給出比較委婉的解決方案安撫用戶。
4）對用戶所有提出的問題給出明確的后續(xù)反饋時間，并同步組內(nèi)其它產(chǎn)研同學(xué)，及時跟進(jìn)和反饋結(jié)果。不然商家會覺得一直在提重復(fù)的問題給不同的人，但沒什么反饋，造成不良印象。
實地拜訪好處是面對面增強(qiáng)真實感，更準(zhǔn)確地解讀用戶需求，也能一次性了解商家?guī)缀跞康挠脩纛愋?，有更為全面的用戶源可了解，同時更容易跟用戶熟悉起來，建立長期的關(guān)系。壞處是成本高、費(fèi)時間。
一般遇到?jīng)]辦法花時間實地拜訪的情況，線上聯(lián)系也是一種好方法。此時需要聯(lián)系好運(yùn)營確認(rèn)好溝通訴求后，自行線上聯(lián)系用戶進(jìn)行調(diào)研。
操作指南：
1）聯(lián)系前要說明來意、并預(yù)約時間（區(qū)別于C端直接打電話開始訪問），一般商家都會很高興（可能因為畢竟花了錢）。
2）需要提前準(zhǔn)備好問題，一般會按照問題逐個回答，很少跑偏。
線上調(diào)研的好處是便捷快速地聚焦問題，壞處是對問題的理解還有回答的準(zhǔn)確度判斷可能沒那么高。
不同于C端場景，B端產(chǎn)品因為用戶體量上的原因，較少用到問卷。但依然有一些必要場景會用到，比如針對某一功能的認(rèn)知、產(chǎn)品的滿意度等。
操作指南：
1）B端問卷的一個難點在于“如何發(fā)放”。C端一般在產(chǎn)品內(nèi)留有問卷入口，因為用戶量大、總會收集部分反饋.但B端用戶較少，若要確保收集到一定量的問卷，就得主動出擊提高觸達(dá)率。
目前作者所在團(tuán)隊每周會針對運(yùn)維者進(jìn)行答疑直播活動，相當(dāng)于每次直播都自動匯集一群目標(biāo)用戶，在直播過程中可以穿插問卷及入口，能夠極大概率地收到反饋（當(dāng)然填寫?yīng)剟畋夭豢缮伲梢詼?zhǔn)備一些公司周邊小禮品抽獎）。
2）問卷如何設(shè)計按照普遍方式進(jìn)行即可，在此不詳述。
通過以上方法我們已經(jīng)開始并可以與各類用戶認(rèn)識、并進(jìn)行調(diào)研了。
做完調(diào)研后，我建議可以針對一些愿意發(fā)聲的用戶建立更深一層的關(guān)系，比如直接幫助他們解決設(shè)計問題、解答功能疑惑等。用戶其實是樂于接受更多交流的，這樣可以構(gòu)建個人用戶庫，它可以幫助你避免重復(fù)地走預(yù)約流程，更加便捷地獲取用戶信息，讓你對用戶也能夠更加了解。
在B端產(chǎn)品迭代中，我們經(jīng)常聽到這樣的話“我們要打造一個標(biāo)桿”，“目前這個功能還沒形成標(biāo)桿”等。這里涉及到一個詞“標(biāo)桿客戶”。其實除了企業(yè)內(nèi)部角色的劃分，針對企業(yè)本身，也有不同維度的劃分，「標(biāo)桿」相當(dāng)于企業(yè)的一種分層維度。
標(biāo)桿客戶指該B端產(chǎn)品在商家內(nèi)部推行后、使用的效果超過預(yù)期，對商家某問題起到了極大的正面作用。
1）驗證產(chǎn)品可行性
只有通過標(biāo)桿的建立，才可以一定程度證明產(chǎn)品能力是符合市場需求的。如果遲遲沒有標(biāo)桿產(chǎn)生、可能產(chǎn)品本身就得重新考慮定位與方向了。
2）為產(chǎn)品站臺增強(qiáng)說服力
在很多銷售售賣產(chǎn)品時，如果只是單薄的產(chǎn)品邏輯講解，往往商家沒那么容易理解獲取產(chǎn)品價值，但如果有標(biāo)桿案例，銷售將標(biāo)桿商家是如何運(yùn)營、如何取得成果的流程闡述出來，基本上同行商家能夠立馬理解產(chǎn)品價值。
所以商家對標(biāo)桿是很看重的，且要求會越來越高，不僅是同行標(biāo)桿、有的還會要求有細(xì)分行業(yè)的案例給到（比如除了同樣是家居行業(yè)、更希望有硬裝行業(yè)、甚至家居-硬裝-瓷磚行業(yè)的案例）
關(guān)于「如何為B端用戶做設(shè)計」又是一個宏大的主題，在此先不做系統(tǒng)性的分析和展開，僅提供一些經(jīng)歷實戰(zhàn)后的小技巧以供讀者參考。
1）產(chǎn)品模塊對B端商家的作用不同、需求不同、要保證適配各類商家的靈活性
2）B端產(chǎn)品往往復(fù)雜，更注重頁面引導(dǎo)、新功能的解釋，所以每做一個新功能對于“能不能理解”的新人引導(dǎo)設(shè)計非常必要（且是人性化的）
3）避免個人經(jīng)驗主義，B端場景往往不能共情，不能依靠個人生活經(jīng)驗去做設(shè)計判斷
4）決策者和使用者有時會在功能模塊上有利益沖突，需要根據(jù)該功能對產(chǎn)品購買的影響程度，來權(quán)衡利弊（參考決策鏈）
5）B端產(chǎn)品是用戶花錢買的，與C端的免費(fèi)使用是一個本質(zhì)區(qū)別，“買的東西去享受”和“免費(fèi)的東西去享受”，感受與包容度完全不一樣。
買，代表有所需，使用時，會有準(zhǔn)確的預(yù)期，在產(chǎn)品設(shè)計時需要考慮該功能商家是否買單，是不是當(dāng)初買這份產(chǎn)品所預(yù)期的，如果不是，謹(jǐn)慎添加，且要保證不增加任何認(rèn)知/操作成本。
6）商家更注重儀式感，對于某些一次性場景不可因頻率不高而忽視視覺表現(xiàn)，比如產(chǎn)品初始化設(shè)置。
B端用戶既是普通消費(fèi)者也是企業(yè)打工人，在使用B端產(chǎn)品時天然擁有兩重身份，會有職業(yè)屬性的因素存在，所以拆解好這兩種角色并對癥下藥，就可以了解他們，深入他們設(shè)計出極致的產(chǎn)品。
文章來源：人人都是產(chǎn)品經(jīng)理 作者：酷家樂用戶體驗設(shè)計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
那么之前的文章都是對于B端這樣一個系統(tǒng)，進(jìn)行概括性地講解，系統(tǒng)的講解。那么從今天開始，我將對B端系統(tǒng)對大家進(jìn)行一個詳細(xì)的講解，包括每個控件的具體使用。這就是我們從大到小，再由小到大的這樣一個學(xué)習(xí)過程，那么目前我們要進(jìn)行收縮范圍，要精確的明白某個控件應(yīng)該如何使用。今天我所講解的是表格頁的具體使用方法，以及如何分析現(xiàn)有表格頁的問題。
文章句句將會直擊重點，拒絕長篇大論。
那么為了方便大家的理解和查看，我這里去列舉一張表格頁的圖片。以下的講解都會圍繞這個表格頁的圖片，進(jìn)行詳細(xì)的剖析講解。那么，在看的過程中，我們要時刻的翻到上面這張圖片，對照著這張圖片來吸收消化今天的知識。
大家可以看到這是一個關(guān)于資產(chǎn)清單的表格頁，那么它的構(gòu)造也符合我們常規(guī)的表格頁。首先我們對這個表格也進(jìn)行分析，我們可以看出表格頁是由這幾部分組成的，它們分別是數(shù)據(jù)過濾，數(shù)據(jù)操作和數(shù)據(jù)查看。
數(shù)據(jù)過濾部分指的就是我們頁面上方的這樣一個搜索框，包括。我們表格頁內(nèi)容頂部的資產(chǎn)編碼，資產(chǎn)名稱，它們后邊都有這樣一個篩選器，我們可以按照順序或者是倒序進(jìn)行篩選。這里我把數(shù)據(jù)過濾的部分用紅色框標(biāo)注一下。
那么這個表格頁我們可以看出，它的數(shù)據(jù)過濾其實是非常少的。更多的數(shù)據(jù)過濾有什么呢？按照資產(chǎn)的新舊程度，我們可以將它分為新的、舊的、淘汰的。那么這三個按鈕也可以作為數(shù)據(jù)過濾放在我們表格內(nèi)容頁的頂端。
當(dāng)然，維度有很多個維度，我們不僅可以對資產(chǎn)的新舊程度進(jìn)行分類，我們也可以對資產(chǎn)的購買時間進(jìn)行分類，比如2018年、2019年、2020年至今，我們可以對這樣一個時間維度進(jìn)行分類。同樣，操作按鈕也是放在表格也的頂部，也就是我們搜索框的后邊。這樣用戶在篩選起來會比較的方便，具體需要按照什么維度進(jìn)行劃分，需要我們找到，我們的業(yè)務(wù)目標(biāo)是什么？我們要找到我們的這個表格頁希望給用戶傳達(dá)出怎樣的信息？那么用戶最關(guān)心的點是什么？找到這些之后我們就可以對用戶最關(guān)心的點以維度進(jìn)行劃分更多的篩選器，有助于用戶更好的去瀏覽內(nèi)容。
此頁面我們可以看出他的篩選器過于少。在這里我們并不評價，數(shù)據(jù)過濾少是好事還是壞事？但是我們要記著，我們時刻要具備分析某個功能模塊。究竟應(yīng)該放在哪里？它應(yīng)該怎樣去劃分？這是我們要牢記的點。
那么剛才也說過，一個表格頁分為三部分，分別是數(shù)據(jù)過濾，數(shù)據(jù)操作和數(shù)據(jù)查看?，F(xiàn)在我們來講第二部分，也就是數(shù)據(jù)操作。那么什么是數(shù)據(jù)操作？數(shù)據(jù)操作，顧名思義就是對頁面中的某些數(shù)據(jù)進(jìn)行操作功能，可以是增，刪，改，查等等，它都是屬于數(shù)據(jù)操作。那么數(shù)據(jù)操作，它一定是一個可點擊的一個功能按鈕，在頁面中，我們?nèi)绻屑?xì)找一找很容易就會發(fā)現(xiàn)數(shù)據(jù)操作的模塊。在這里呢，我同樣用藍(lán)顏色的框給大家框起來。
在這里，藍(lán)色框框起來的部分，就是我們這個表格頁中的數(shù)據(jù)操作部分，也就是第二個部分。
那么很多人可能會有疑問了，說為什么同樣都是數(shù)據(jù)操作，有的數(shù)據(jù)操作在上面是純色的一個按鈕顯示，那么有的數(shù)據(jù)操作又在表格內(nèi)容頁里，這些究竟有什么區(qū)別？
沒錯，數(shù)據(jù)操作。它擺放的位置是多種多樣的，但它遵循一個規(guī)律，什么規(guī)律呢？也就是說在我們執(zhí)行數(shù)據(jù)操作的設(shè)計這樣一個功能模塊的時候，我們需要對其進(jìn)行第1次的劃分。數(shù)據(jù)操作部分我們可以分為單行操作，批量操作和全局操作三個操作點，也就是說所有的操作功能無非就是在這三個類別中的某一個類別。好，下面我來給大家詳細(xì)講一下什么是單行操作，什么是批量操作和全局操作。
我相信大家通過字面意思也能對這三種操作方式有一定的了解，單行操作指的是針對表格內(nèi)容頁的一行數(shù)據(jù)進(jìn)行操作，一般就是放在表格頁的這一行的尾部。那么批量操作針對的是對多個數(shù)據(jù)進(jìn)行操作，他一般放在表格內(nèi)容的頂部，那么什么是全局操作？全局操作是對整個表格頁的頁面進(jìn)行操作，比如說我要導(dǎo)入新的表格，或者說我要替換這個表格，那么根據(jù)優(yōu)先級順序來說，全局操作大于批量操作，又大于單行操作。這就是數(shù)據(jù)操作的三個不同點，那么很顯然在我們上張圖片中。只存在單行操作和批量操作，并沒有全局操作。
接下來我對最后一個部分，也就是數(shù)據(jù)查看這個部分進(jìn)行一個講解。數(shù)據(jù)查看也就是我們系統(tǒng)所反饋給用戶的一些數(shù)據(jù)，它包括具體的數(shù)字，也包括一些漢字，所有的信息都可以被列為數(shù)據(jù)查看。那么由于這個表格頁上的數(shù)據(jù)查看部分沒有去寫一些信息，將這些信息打碼隱藏了，但是我們不難想象它填入信息后的樣子，也就是整個表格的內(nèi)容頁的核心部分就是我們的數(shù)據(jù)查看，無論是數(shù)據(jù)操作還是數(shù)據(jù)過濾，只是進(jìn)行一些功能上的操作，那么用戶最終的視線還是要落在數(shù)據(jù)查看這個部分，同樣我用橙色的框給大家標(biāo)注出來。
如果說我們的數(shù)據(jù)查看部分，其中的數(shù)據(jù)是混亂不堪的，或者說它的列數(shù)是非常的繁瑣的，那么對用戶的體驗非常不好，也不能在第一時間抓住有效信息，所以我們在設(shè)計的過程中一定牢記7±2法則進(jìn)行設(shè)計。
那么有的人有疑問了，說如果我的列數(shù)非常多怎么辦？如果你的列數(shù)非常多，那么你只顯示其中的重要信息在表格頁這一塊，其他信息應(yīng)該歸納到查看詳情，或者是二級頁面內(nèi)，不能在一屏中展示過多的信息，即使你放了這么多信息，你要記著那也是無效的擺放，用戶在進(jìn)來之后根本就不想看一眼，所以在這里我們要一定要記著7±2法則，或者說我們給自己定一個列數(shù)的系統(tǒng)規(guī)范也是可以的。
以上，就是今天對表格頁的詳細(xì)講解，那么要學(xué)習(xí)更多知識也可以進(jìn)我的公眾號學(xué)習(xí)。我們要知道再簡單、再復(fù)雜的表格頁也無非就是三塊，數(shù)據(jù)過濾、數(shù)據(jù)操作和數(shù)據(jù)查看，當(dāng)然在頁面中也存在我們的導(dǎo)航系統(tǒng)，它們共同組成了一個完整的表格頁，表格頁所遵循的宗旨是簡單高效，信息直觀，操作方便快捷。
文章來源：站酷 作者：弧形線
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
編輯導(dǎo)語：B端和C端是產(chǎn)品經(jīng)理經(jīng)常接觸到的兩個話題，那么什么是B端C化呢？這篇文章從B端和C端的區(qū)別入手，詳細(xì)解答了什么是B端C化以及為什么要B端C化，一起來看看吧。
最近很流行一個詞——B端C化，解釋出來就是可以用C端的模式和思維來對B端產(chǎn)品進(jìn)行設(shè)計，討論者大致分為兩種觀點：
1.C端產(chǎn)品市場已經(jīng)趨于飽和，可拓展空間剩余不多了，B端產(chǎn)品市場還是一片藍(lán)海，于是產(chǎn)生了一些C端設(shè)計師轉(zhuǎn)型去做B端了，將一些C端的模式和思維帶到了B端設(shè)計中，導(dǎo)致越來越多的B端逐漸C化；
2.B端產(chǎn)品市場互相競爭，為了在同市場中打出差異化，于是一些B端市場開始招攬C端設(shè)計師培養(yǎng)轉(zhuǎn)型，并且嘗試融入C端產(chǎn)品的模式和思維在同市場內(nèi)競爭，是產(chǎn)品設(shè)計的“內(nèi)卷化”現(xiàn)象，導(dǎo)致市面上的C化的B端產(chǎn)品越來越多；
但上述無論哪一種觀點，都在闡述一種現(xiàn)象或者趨勢：不管是交互還是視覺還是UI，目前部分C端設(shè)計師正在往B端設(shè)計師轉(zhuǎn)型。這個現(xiàn)象的發(fā)生對整個設(shè)計行業(yè)來說無異于新增了很多新亮點——市場上越來越多的B端交互、數(shù)據(jù)可視化視覺等需求，進(jìn)而導(dǎo)致對市場培訓(xùn)行業(yè)開始產(chǎn)生B端培訓(xùn)的訴求，同時也破空而出了很多優(yōu)秀的B端設(shè)計師。那么B端C化到底是什么，和傳統(tǒng)B端C端有什么區(qū)別，有這方面想法訴求的同學(xué)怎么去實現(xiàn)轉(zhuǎn)型？
由于我本人之前是做C端UI設(shè)計師，到后來轉(zhuǎn)型成為B端交互設(shè)計師，而接觸的業(yè)務(wù)恰好涉及B端和C端的聯(lián)動以及多角色之間的協(xié)作，所以這篇文章借助結(jié)合我個人的經(jīng)驗和看法，談一談自己對B端C化的理解。
在談B端C化之前，需要先了解B端和C端的區(qū)別是什么。B端C端的區(qū)別網(wǎng)上有很多文章和概述了，大致歸納下來主要以四個維度去區(qū)分：受眾主體、上線周期、業(yè)務(wù)類型和產(chǎn)品側(cè)重點這四個維度，其余的維度也會有區(qū)分，但是影響較小，主要還是圍繞以上四個維度進(jìn)行B端和C端區(qū)分。
受眾主體也就是相對應(yīng)產(chǎn)品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場景和路徑較為單一的，比如C端產(chǎn)品就以年齡層、城市、性別等來劃分用戶，每個階段的用戶都有不同的訴求、認(rèn)知和習(xí)慣等等；在做任何決策方面都屬于偏感性（Heart）的個人決策（Personal）；用戶穩(wěn)定性則比較差，要是對產(chǎn)品不滿意，可以立馬換另一款產(chǎn)品，轉(zhuǎn)換門檻低，有多個競爭對手產(chǎn)品可供選擇；
而B端產(chǎn)品的受眾主體則是為組織群體，特征為多場景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權(quán)限等劃分用戶群，但是之間的關(guān)系更加復(fù)雜，比如設(shè)計一個銀行內(nèi)部管理系統(tǒng)，用戶群就很明確清晰——銀行各級職員角色，根據(jù)職級關(guān)系設(shè)計不同的功能以及權(quán)限；在做任何決策方面都屬于偏理性（Head）的團(tuán)隊性決策（Team）；用戶穩(wěn)定性較強(qiáng)，要是對產(chǎn)品不滿意，也只能被迫適應(yīng)和忍受，轉(zhuǎn)換成本較高，幾乎沒有其他產(chǎn)品可供選擇
上線周期就是指產(chǎn)品從需求階段到設(shè)計階段到開發(fā)階段直至最后產(chǎn)品上線所需要的周期。
C端產(chǎn)品上線周期模式有個很明確的特點：快速迭代、敏捷，很多C端產(chǎn)品功能更新迭代的速度很快，上線周期非常短，往往半個月甚至一周就完成開發(fā)上線，加上用戶群的多樣性和跨度大，所以在上線的時候往往會需要AB實驗去驗證方案可行性；
B端產(chǎn)品上線周期則是和C端一個對立面——長，少則雙月/季度多則半年/一年等，因為B端產(chǎn)品流程上都屬于重型流程，角色之間關(guān)系復(fù)雜，交互系統(tǒng)較為繁瑣，需求的改動和迭代并沒有那么頻繁，也不需要像C端產(chǎn)品那樣快速上線搶占市場，所以B端上線周期會很慢，也導(dǎo)致在工作強(qiáng)度上相比C端較為輕松一些，但是缺點就是結(jié)果沒有C端來的那么快和明顯。
C端產(chǎn)品的核心競爭力就是產(chǎn)品本身，關(guān)鍵總結(jié)就是讓用戶爽就完事了，所以C端產(chǎn)品的需求類型往往圍繞用戶群的痛點產(chǎn)生；因為C端用戶跨度大，不同的用戶群體有不同的痛點，所以導(dǎo)致C端的需求類型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯中逐漸得出正確的結(jié)論；
B端產(chǎn)品的核心競爭力除了產(chǎn)品本身，還依賴復(fù)雜的關(guān)系、渠道、技術(shù)和資源，你的關(guān)系夠硬、渠道夠廣、技術(shù)夠領(lǐng)先、資源夠豐富，哪怕你的產(chǎn)品很一般，一樣能領(lǐng)先其他同行業(yè)的競爭對手，關(guān)鍵總結(jié)下來就是讓用戶贏就夠了；B端產(chǎn)品的需求類型雖然也是圍繞著用戶群的痛點產(chǎn)生，但需求的目標(biāo)是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產(chǎn)品來說，B端產(chǎn)品是需求更加明確且容易達(dá)成目標(biāo)。
產(chǎn)品側(cè)重點無異于區(qū)分C端和B端最明顯的門檻了，C端產(chǎn)品的側(cè)重點主要在于體驗，而B端產(chǎn)品的側(cè)重點主要在于效益。
前面提到過C端產(chǎn)品核心讓用戶爽就完事了，加上基于用戶更換產(chǎn)品的成本很低：你這款產(chǎn)品我用不爽就換掉了，所以C端產(chǎn)品的側(cè)重點永遠(yuǎn)以用戶體驗為主，前面說的需求業(yè)務(wù)類型也幾乎是圍繞用戶體驗產(chǎn)生的；大家對比市場上同類型的C端產(chǎn)品，界面、交互、功能都不會差很多，是因為經(jīng)過長時間的更新迭代，已經(jīng)沉淀下來目前最好的用戶體驗類型了，隨著產(chǎn)品量級越大，改變用戶體驗類型就越謹(jǐn)慎；
C端產(chǎn)品就是為了尋找并解決用戶痛點、癢點和爽點，加上品牌性、用戶隱私等因素考量，產(chǎn)品側(cè)重點聚焦于用戶體驗。
B端產(chǎn)品側(cè)重點則是圍繞效益了，因為作為一個團(tuán)隊使用的產(chǎn)品，不管是從易用性、功能性還是安全性，為這個團(tuán)隊解決問題為首要基礎(chǔ)，那么使用者的體驗、產(chǎn)品的美觀度等等相較于優(yōu)先級就沒有那么高了，所以導(dǎo)致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認(rèn)知上；
B端產(chǎn)品就是為了使用產(chǎn)品的團(tuán)隊解決效率、成本、營收的問題，加上產(chǎn)品的穩(wěn)定性、安全性等因素的考量，產(chǎn)品側(cè)重點自然更聚焦在效益上。
前面了解了B端和C端產(chǎn)品的區(qū)別，接下來聊一聊什么是B端C化；簡單來說從字面意思理解就是B端的設(shè)計層面逐漸靠近C端，網(wǎng)上也有很多B端可視化、趨勢潮流的設(shè)計和文章，但是B端C化不僅僅是從視覺設(shè)計上的改良，下面我逐漸從大到小聊一下我對B端C化的理解。
在做過很多B端產(chǎn)品之后發(fā)現(xiàn)，往往很多產(chǎn)品經(jīng)理是對整個產(chǎn)品架構(gòu)、功能形態(tài)一切都清晰地了如指掌，但是有時候在搭建產(chǎn)品架構(gòu)的時候，功能形態(tài)單一粗糙，步驟復(fù)雜且笨拙；站在業(yè)務(wù)產(chǎn)品的視角來看，架構(gòu)邏輯上都是沒有問題的，但是站在用戶視角來看，整體框架是混亂破碎的，步驟繁瑣且復(fù)雜，導(dǎo)致用戶對產(chǎn)品的認(rèn)知變差，但是又不得不去用這個產(chǎn)品，只能被迫去學(xué)習(xí)使用。
比如一個產(chǎn)品案例，就是一個產(chǎn)品的底層邏輯是前端輸入素材id，后端返還一個素材后就可以使用了，站在產(chǎn)品業(yè)務(wù)視角來看，這樣設(shè)計沒有什么問題，符合產(chǎn)品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來給用戶選不好嘛？
行為習(xí)慣自然是指用戶群在該行業(yè)下的行為習(xí)慣，電商行業(yè)、社交行業(yè)等等不同行業(yè)的習(xí)慣、專業(yè)術(shù)語等都不相同，這個在C端產(chǎn)品中都很能得到體驗，比如電商行業(yè)的大紅大紫，社交行業(yè)的左右滑動等等，這類有著很明顯的行業(yè)屬性和大眾認(rèn)知，一樣是B端設(shè)計中應(yīng)該注意的點。
最經(jīng)典的案例就是紅色綠色的定義區(qū)分，在數(shù)據(jù)產(chǎn)品認(rèn)知中，綠色代表數(shù)據(jù)漲了，紅色代表數(shù)據(jù)跌了，比如GMV數(shù)據(jù)，DAU數(shù)據(jù)等，紅色為重點關(guān)注的數(shù)據(jù)；而在金融行業(yè)中，基金股票紅色代表漲了，綠色則代表跌了，所以設(shè)計的原則一定得是基于不同行業(yè)的用戶行為習(xí)慣。
B端產(chǎn)品的信息量一般是很龐大的，尤其是數(shù)據(jù)、表單、審批等B端產(chǎn)品，涉及到不同角色不同權(quán)限的開放等，所以用戶能否能一眼看清關(guān)鍵信息，能否幫助用戶快速達(dá)成目標(biāo)，是交互層面針對信息層級的設(shè)計處理一個重要的環(huán)節(jié)。
之前很常見B端產(chǎn)品中信息處理的方法就是堆積處理，直接將信息、數(shù)據(jù)等平鋪展示，比如很久之前的某牛商家端后臺等老舊系統(tǒng)；現(xiàn)在很多新的B端產(chǎn)品都是以模塊化處理方法將信息層級區(qū)分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設(shè)計。
設(shè)計語言自然是B端設(shè)計中標(biāo)題、字號、顏色等規(guī)范標(biāo)準(zhǔn)，早些年把B端產(chǎn)品組件化后且開源的自然是阿里老大哥了，當(dāng)時最早的AntDesign、以及后來的ElementDesign組件庫，到現(xiàn)在都被很多中小企業(yè)甚至大廠某些產(chǎn)品一直使用中，但隨著B端產(chǎn)品的普及和發(fā)展，越來越多的企業(yè)開始將自己產(chǎn)品沉淀出完善成套的設(shè)計語言，并搭建出自己的組件庫投入使用了。
如何去衡量用戶體驗是否是好的，最客觀來講當(dāng)然是通過數(shù)據(jù)去衡量，而數(shù)據(jù)往往在C端產(chǎn)品中很常見，不管是體驗數(shù)據(jù)還是表現(xiàn)數(shù)據(jù)，都是C端產(chǎn)品中最為關(guān)注的；然而在B端產(chǎn)品中，更多收集的一般都是業(yè)務(wù)表現(xiàn)數(shù)據(jù)，幾乎沒有衡量用戶使用平臺的相關(guān)數(shù)據(jù)，大多衡量體驗的方法都是依靠問卷反饋的形式；但在B端C化的過程中，用戶體驗的數(shù)據(jù)也逐漸被加入到B端產(chǎn)品當(dāng)中來，成為體驗標(biāo)準(zhǔn)的考核之一：比如某個任務(wù)完成的時長，報錯出現(xiàn)的頻次、某某工具的使用率等
最后就是B端C化表現(xiàn)層的設(shè)計，包括目前主流的設(shè)計趨勢如大數(shù)據(jù)可視化、3D建模、材質(zhì)質(zhì)感、Dark模式等都逐漸融入到B端產(chǎn)品中，使得B端產(chǎn)品不再追求簡單的“功能優(yōu)先”和“能用就行”，而是像C端那樣追求更美觀的視覺，更極致的體驗
總結(jié)下來“B端C化”就是B端產(chǎn)品無論是從功能架構(gòu)還是視覺體驗，越來越趨于人性考慮設(shè)計，越來越關(guān)注使用者的感受和反饋，因為說白了不管B端產(chǎn)品代替成本高不高，用戶是一群專業(yè)人士還是普通職員，使用者歸根到底還是“人”在使用產(chǎn)品，那么必然會帶來體驗相關(guān)的問題；
所以B端C化會逐漸形成一種趨勢，在企業(yè)平臺資源支持的情況下，會將B端產(chǎn)品的功能放大，追趕市場競爭，逐利行業(yè)內(nèi)卷，在體驗和視覺感官上也會更加的人性化，結(jié)果自然是產(chǎn)品設(shè)計者們更加的卷了（手動狗頭）。
無論是現(xiàn)在的B端C化還是將來其他多元的設(shè)計趨勢，隨著市場的競爭和行業(yè)內(nèi)卷，已經(jīng)反推著設(shè)計師們不單單局限于照顧自己的“三分田地”了，無論是之前視覺設(shè)計師開始學(xué)習(xí)3D建模，還是UI設(shè)計師嘗試接觸代碼設(shè)計，設(shè)計師最大的品質(zhì)就是應(yīng)該緊跟時代的趨勢變化，及時調(diào)整補(bǔ)充自己的能力，提升自我的競爭力，才是在當(dāng)今環(huán)境下立足的根本。
文章來源：人人都是產(chǎn)品經(jīng)理 作者：雨灰
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
編輯導(dǎo)語：有效地利用 B 端設(shè)計系統(tǒng)，產(chǎn)品設(shè)計師將可以更高效地做出更好的交互設(shè)計。那么前段時間發(fā)布的 Arco Design 設(shè)計系統(tǒng)，和已有的阿里 Ant Design 系統(tǒng)，二者有什么區(qū)別呢？本文作者對兩大設(shè)計系統(tǒng)典型頁面發(fā)表了他的看法，一起來看一下。
前兩周字節(jié)發(fā)布了自己的中后臺設(shè)計系統(tǒng) Arco Design，在仔細(xì)閱讀官網(wǎng)文檔了過后，想和大家聊聊我自己對于 Arco Design 設(shè)計系統(tǒng)的與阿里的 Ant design 的一些對比和差異分析。
ArcoDesign 是一套設(shè)計系統(tǒng)的簡稱，是基于字節(jié)跳動所有的中后臺產(chǎn)品。ArcoDesign 主要服務(wù)于字節(jié)跳動旗下中后臺產(chǎn)品的體驗設(shè)計和技術(shù)實現(xiàn)，主要由 UED 設(shè)計和開發(fā)同學(xué)共同構(gòu)建及維護(hù)。
Ant Design 是阿里打磨出的一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系， 通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗。
Ant 和 Arco 兩者的前端框架都是基于 React 和 Vue，設(shè)計價值觀和設(shè)計原則也有所不同。Arco Design 基于「清晰」、「一致」、「韻律」和「開放」的設(shè)計價值觀，試圖建立務(wù)實而浪漫的工作方式。在「設(shè)計價值觀」的堅持上，Ant Design 有四點與眾不同：「自然」、「確定性」、「意義感」、「生長性」。
我的個人理解 Arco Design 是站在設(shè)計規(guī)范的基礎(chǔ)出發(fā)點考慮，希望給用戶傳遞出來的價值出發(fā)，讓用戶深刻感受到系統(tǒng)是「清晰」、「一致」、「韻律」和「開放」的，而 Ant Design 所傳遞出來的價值觀似乎更加玄學(xué)或者說格局更高，上升到更高的思維境界，即大自然思想和社會責(zé)任。
當(dāng)然這部分的內(nèi)容相對比較虛，每個人側(cè)重點想法都不同，大家可以自己去理解一下這部分內(nèi)容。
接下來會從工作臺、表格、表單幾個典型高頻的 B 端界面進(jìn)行分析，看看兩者的差別。
1）布局
Arco 的卡片列布局靈活，基于 24 柵格進(jìn)行布局，將整個柵格區(qū)域 2:2:1 的比例進(jìn)行分割，信息卡片的寬度根據(jù)柵格寬度進(jìn)行自適應(yīng)，這樣的工作臺頁面既靈活也能夠滿足業(yè)務(wù)需求。
Ant 的卡片列布局采用 3:2 比例進(jìn)行布局，同樣是基于 24 柵格。目前主流的 B 端頁面都是以 24 柵格為基礎(chǔ)進(jìn)行設(shè)計。3:2 還是 2:2:1 這兩種卡片布局方式?jīng)]有絕對的優(yōu)劣，主要是根據(jù)我們頁面的信息量以及行業(yè)屬性去確定。如果工作臺所展示的單個信息量較多可采用少列大寬度進(jìn)行布局，滿足信息展示的最優(yōu)布局。
作為 B 端的工作臺頁面，核心訴求是能夠清晰找到用戶想要的信息，想要做的內(nèi)容，所以我們設(shè)計師要優(yōu)先保證用戶能夠快速定位到核心的信息，快速到達(dá)要到達(dá)的功能。
2）信息展示
Arco 針對同系列的模塊設(shè)計了兩種尺寸的間距，例如歡迎問候信息與下方的數(shù)據(jù)信息之間是大間距，數(shù)據(jù)信息與下方的團(tuán)隊動態(tài)最近項目之間是小間距。
格式塔心理學(xué)的接近原則指出：接近的事物會被認(rèn)為是同一個整體，擁有相似的功能或特征。所以在這里設(shè)計師通過兩種間距的留白對我們視覺進(jìn)行暗示，強(qiáng)調(diào)信息之間的關(guān)聯(lián)程度，便于區(qū)分信息層級。
Ant 在卡片方面沒有為卡片間距設(shè)置兩種尺寸，從上下到左右都是一種尺寸，這樣做的好處可以讓視覺更加對齊，顯得頁面更加規(guī)整，不好的一點就是內(nèi)容區(qū)域外間距與卡片之間的間距一樣寬視覺上并沒有聚焦，顯得內(nèi)容區(qū)域很散。標(biāo)題方面沒有進(jìn)行加粗重色強(qiáng)調(diào)，將內(nèi)容進(jìn)行突出，使用戶更加聚焦于內(nèi)容。
3）導(dǎo)航方式
兩個系統(tǒng)默認(rèn)都采用側(cè)邊欄導(dǎo)航方式，側(cè)邊導(dǎo)航在國內(nèi)的 B 端產(chǎn)品當(dāng)中最為常見的。將菜單欄放置在左側(cè)，頁面布局上基本為左右結(jié)構(gòu)，將導(dǎo)航菜單放置左側(cè)固定。側(cè)邊欄導(dǎo)航擴(kuò)展性強(qiáng)、展示靈活、能夠快速定位，缺點是不易閱讀、閱讀沉浸感低。
Arco 導(dǎo)航區(qū)域與內(nèi)容區(qū)域都使用同類淺色，采用線的方式進(jìn)行分割，整體視覺比較清爽。Ant 導(dǎo)航區(qū)域使用了傳統(tǒng)的重色與內(nèi)容區(qū)進(jìn)行區(qū)分。
目前的設(shè)計趨勢流行淺色導(dǎo)航，有幾個產(chǎn)品的 WEB 端進(jìn)行了一系列的大改，YouTube、Twitch、Twitter 都進(jìn)行了重新設(shè)計，他們不約而同地將塊面去除，去掉多余的的灰色，通過留白和空間將頁面拉開。這否是下一個 WEB 端所要追尋的趨勢，我還不得而知，但是對于導(dǎo)航層級多的側(cè)邊欄導(dǎo)航，我仍然建議使用深色背景區(qū)分導(dǎo)航欄。
有一個細(xì)節(jié)，在頁面背景有一個以登錄的用戶名形成的一個背景水印，在 B 端的頁面中，對信息的保密程度要求很高，這里是為了防止公司核心數(shù)據(jù)資料泄露，在截圖的時候會有水印的存在，增強(qiáng)了信息的保密級別，這是一個很好的設(shè)計洞察點。
1）表格樣式
表格作為組織整理數(shù)據(jù)的手段，可以有效地向用戶展示數(shù)據(jù)信息，是 B 端產(chǎn)品中出現(xiàn)最高頻的模塊之一。
用戶主要通過表格瀏覽獲取信息、對數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等更多復(fù)雜操作、對比數(shù)據(jù)的差異與變化（關(guān)聯(lián)和區(qū)別）。好的表格信息展示設(shè)計，應(yīng)當(dāng)是能夠輔助用戶高效便捷地實現(xiàn)以上場景中的訴求。
Arco 和 Ant 的表格設(shè)計樣式與市面上多數(shù)產(chǎn)品都類似，采用表格列無分割線條、表頭與內(nèi)容左對齊、數(shù)字右對齊的方式。
合格的表格設(shè)計要定義合理的表格行高，在具體設(shè)定表格行高時，由于表格中以文字信息為主，我認(rèn)為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。
文字行高可以設(shè)定為字號的 1.2~1.8 倍，文字與分割線間距離可以設(shè)定為字號的 1~1.5 倍。
2）信息展示
表格行高決定屏幕內(nèi)能呈現(xiàn)的行數(shù)，即用戶在一屏內(nèi)能獲取信息的數(shù)量，主要影響用戶縱向?qū)Ρ葦?shù)據(jù)的效率。
在 B 端用戶使用場景中，數(shù)據(jù)量極大的表格的展示問題是體驗優(yōu)劣的關(guān)鍵因素。對于 1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數(shù)的感知不強(qiáng)，但對于 1366×768、1280*720 等這類小屏，顯示行數(shù)有限，用戶進(jìn)行縱向數(shù)據(jù)對比的效率就會有所降低。在設(shè)計前，應(yīng)當(dāng)充分了解目標(biāo)用戶的行為訴求，了解目標(biāo)用戶設(shè)備屏幕分辨率的占比分布情況，有針對性的設(shè)置行高。
B 端產(chǎn)品的特點之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現(xiàn)密度的訴求經(jīng)常是有所差異的。產(chǎn)品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設(shè)置開放給用戶，建議不是完全開放給用戶去調(diào)整尺寸，而是給出一定階梯度的快速選項，例如舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足用戶需求。
Ant 的表格功能很齊全，很多功能都是 B 端產(chǎn)品的痛點，例如表格可以通過調(diào)整單元格行高來調(diào)整密度，緊湊模式下可以顯示更多的數(shù)據(jù)。
3）操作路徑
作為一個查詢表格，我不是很理解為什么 Arco 將查詢條件放置在表格右上角這么隱秘的位置，而將明顯的左上角放一個添加按鈕，如果存在多個查詢條件是不是要從右往左放置呢？這里我不是很理解，大家也可以說一下自己的想法，相互探討一下。
Ant 的表格使用路徑符合 F 型視覺動線布局，在 B 端的市場中這種表格的設(shè)計方式已經(jīng)符合用戶的操作習(xí)慣了。
在 2006 年時候，尼爾森諾曼發(fā)表了一篇人們?nèi)绾螔呙韬烷喿x網(wǎng)站習(xí)慣的分享，他們通過研究發(fā)現(xiàn)，用戶傾向于一種 F 模式去查看網(wǎng)站。F 模式，能很好地幫我們創(chuàng)建好的視覺層次結(jié)構(gòu)設(shè)計，因為這是人們可以輕松掃描設(shè)計一種布局，它能讓大多數(shù)用戶感到舒適，因為我們用戶一直從上到下，從左到右閱讀。
在設(shè)計之前，我們先要去確定哪些內(nèi)容最重要，明確信息的優(yōu)先級，只有清楚知道你希望用戶看到什么，才能將它們放在用戶視線熱點中。
個人認(rèn)為在表格設(shè)計的完整度和設(shè)計的合理性方面來看，阿里的 Ant 系統(tǒng)做得比字節(jié)的 Arco 更好。
表單在界面中主要負(fù)責(zé)數(shù)據(jù)采集的功能，任何一個表單都可以被拆解成三個最基本要素：
標(biāo)簽（標(biāo)題）、輸入框和按鈕。
1）表單布局
Arco 的表單屬于復(fù)雜表單，當(dāng)表單條目數(shù)在 7 個以上，可歸類到復(fù)雜表單，這時候就需要根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷，選擇合適的分組方式，進(jìn)行歸納簡化，降低表單填寫負(fù)荷。采用 3 列布局，便簽與文本框上下左對齊，這樣的對齊方式有利于用戶瀏覽的效率、對齊的美觀以及國際化拓展頁面的對齊問題。
Ant 的表單也是較為常規(guī)的布局方式，有一點差異就是文本框并沒有右對齊，這里阿里自己也做出了解釋：文本框是根據(jù)需要填寫的字段進(jìn)行長度展示的，需要填寫內(nèi)容比較長的文本框就會比較長。實際業(yè)務(wù)中，大部分 input 所需填寫內(nèi)容都存在理想長度，input 的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負(fù)擔(dān)。
2）標(biāo)簽對齊方式
Arco 和 Ant 都使用了頂標(biāo)簽的形式對齊。
標(biāo)簽分為左標(biāo)簽、右標(biāo)簽、頂標(biāo)簽三種，不同的對齊方式，使用場景不同。
該如何選擇呢？我們需要從 3 個方面進(jìn)行考慮：操作效率、標(biāo)簽長度、屏效、視覺對齊。
① 操作效率
根據(jù) Matteo Penzo 的研究總結(jié)得到的瀏覽時間表發(fā)現(xiàn)，標(biāo)簽移動到輸入框的時間，頂部對齊最快只要 50ms，其次是右對齊 240ms，左對齊耗費(fèi)時間最長 500ms。
因此當(dāng)以操作效率為主時，推薦使用頂對齊的方式。
② 標(biāo)簽長度
當(dāng)標(biāo)簽長度超過 8 個字，或者需要考慮中英文雙版本時，推薦使用頂對齊的方式，其容納的標(biāo)簽文字更多，拓展性更好，比如 Ones 的建任務(wù)的標(biāo)簽，就采用標(biāo)簽頂對齊的方式：
③ 屏效
如果只考慮屏效，那么標(biāo)簽左對齊右對齊均可，但是如果還考慮表單錄入效率，那么推薦使用標(biāo)簽右對齊的方式，比如蜂鳥匯報：
Arco 的顏色主題配置可以說是讓人眼前一亮了，可調(diào)整的范圍非常廣非常牛逼?？梢跃庉嫷木S度從基礎(chǔ)的顏色、字體、陰影、 到組件的按鈕、導(dǎo)航、分類、表格 一共有接近 40 款組件的樣式，并且都是可以進(jìn)行可視化編輯與實時預(yù)覽的。
如果你用了 Arco 過后，或許不用苦苦地站在前端后面，讓他幫忙調(diào)整頁面，作為設(shè)計師自己就能夠搞定，并且每一個組件可以調(diào)整的粒度是非常之細(xì)，包含各種寬度、圖標(biāo)大小、顏色、投影，等等…在這里可以編輯自己的主題，也可以在商城社區(qū)查看到別人發(fā)布的主題，真的是很方便啊。
真的有些 amazing！假如你需要去設(shè)計一套官方的設(shè)計系統(tǒng)，完全可以通過 Arco 進(jìn)行設(shè)計和預(yù)覽、落地。
Ant 并沒有做這方面的功能，顏色主題配置這一塊確實是 Arco 很大的亮點。
無論是 Arco Design 還是 Ant Design 設(shè)計系統(tǒng)，都代表了字節(jié)跳動和阿里兩家互聯(lián)網(wǎng)巨頭公司在 B 端領(lǐng)域的沉淀和競爭。對于 B 端交互設(shè)計師來說，兩個設(shè)計系統(tǒng)都值得我們?nèi)パ芯亢蛯W(xué)習(xí)，建議大家都去看看設(shè)計規(guī)范里面的內(nèi)容，對于我們認(rèn)識和熟悉控件以及和開發(fā)對接都很有幫助。
文章來源：優(yōu)設(shè) 作者：哄哄
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
對于大多數(shù)網(wǎng)頁設(shè)計師來說，你的成品需要在各種類型和尺寸的設(shè)備上進(jìn)行外觀和工作，這是顯而易見的。創(chuàng)建多個設(shè)計來實現(xiàn)同一目標(biāo)的日子已經(jīng)一去不復(fù)返了。
這一切都?xì)w結(jié)為選擇響應(yīng)式或自適應(yīng)設(shè)計模型，以實現(xiàn)任何規(guī)模的一致網(wǎng)站設(shè)計。
但是響應(yīng)式和自適應(yīng)之間有什么區(qū)別？它們真的只是一回事嗎？讓我們來看看并解釋你需要知道的一切。喜歡記得關(guān)注UI范，每天更新，打造你的知識武器庫！
1.與設(shè)備無關(guān)的設(shè)計的兩種方法
2.響應(yīng)式設(shè)計
現(xiàn)在比以往任何時候都更重要的是，我們正在設(shè)計旨在沿著不同體驗的梯度觀看的作品。響應(yīng)式網(wǎng)頁設(shè)計為我們提供了一條前進(jìn)的道路，最終讓我們能夠“為事物的潮起潮落而設(shè)計”。
而這正是我們目前關(guān)于響應(yīng)式網(wǎng)站的思想學(xué)派的起點。
無論設(shè)備或瀏覽器如何，該設(shè)計都適用于任何視口尺寸。
響應(yīng)式設(shè)計對搜索引擎友好（谷歌甚至推薦它）。
允許設(shè)計中的很多精確度，以便設(shè)計師可以調(diào)整任何或每一個細(xì)節(jié)。
高度移動友好的設(shè)計選項。
與你可能用于網(wǎng)站項目的大量主題、網(wǎng)站構(gòu)建器和工具兼容的常見設(shè)計實踐。
該設(shè)計將具有統(tǒng)一和無縫的外觀，這將提升整體用戶體驗。
320 像素
480 像素
760 像素
960 像素
1,200 像素
1,600 像素
自適應(yīng)設(shè)計最常見的用途是將舊設(shè)計轉(zhuǎn)換為更適合移動設(shè)備的設(shè)計。這并不是說它不會發(fā)生在新的開發(fā)中。
5.自適應(yīng)設(shè)計的優(yōu)點
由于配置錯誤，您在設(shè)計時可能會遇到一些不太常見的設(shè)備（例如平板電腦）的問題。
自適應(yīng)設(shè)計可能是勞動密集型的，需要更多的開發(fā)時間和成本。
由于內(nèi)容重復(fù)，搜索引擎在使用自適應(yīng)網(wǎng)站時會遇到更多困難。
有一個偷偷摸摸的現(xiàn)實，你設(shè)計同一個網(wǎng)站六次。
文章來源：站酷 作者：UI范
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
大多數(shù)網(wǎng)頁設(shè)計是以目標(biāo)為導(dǎo)向，也就是網(wǎng)頁做出來能為用戶提供什么、能解決用戶的哪些問題。例如電商網(wǎng)站的終極目標(biāo)是賣出更多的商品，資訊類網(wǎng)站的目標(biāo)是讓用戶能更多地閱讀最新訊息，目標(biāo)不同，兩類網(wǎng)站在設(shè)計上也會有截然不同的差異。
在設(shè)計上，電商網(wǎng)站會更注重頁面氛圍的營造，把紅紅火火的促銷氛圍搞起來，用戶看到會更興奮。
在電商網(wǎng)站中，設(shè)計重點放在幫助用戶瀏覽店鋪并輕松找到特定商品上，放在詳情頁上用盡可能好的方式展示商品；付款流程也經(jīng)過簡化和仔細(xì)計算(例如某寶最近更新的訂單頁把價格聚集在一起)，因此用戶不需要經(jīng)過太多思考就能快速下單購買。
網(wǎng)頁中炫酷的視覺效果能讓用戶印象深刻，但效果實現(xiàn)需要付出更成本。能明確知道什么時候更簡潔的視覺效果能讓整個設(shè)計變得更好，能讓用戶專注于正確的事情，這一點很重要。
有時候在網(wǎng)頁中添加過多元素，會分散有價值的信息，用戶也難以識別他們想看的內(nèi)容。
對齊和對稱是頁面保持平衡的重要因素。對齊既保證了布局統(tǒng)一，又將有聯(lián)系的元素緊密連接起來；對稱營造一種平衡的感覺，元素整齊有序。
網(wǎng)站的登錄注冊頁往往都設(shè)計得很簡潔，有大面積的留白處理，只保留關(guān)鍵的信息輸入框，這樣用戶能更專注于輸入內(nèi)容。
在宜家網(wǎng)頁中，清晰的視覺層級結(jié)構(gòu)以及留白的運(yùn)用讓整個頁面看起來非常整潔有序。好的結(jié)構(gòu)能讓用戶知道他們在看什么，留白提供了視覺上的緩解作用，有助于引導(dǎo)用戶的注意力。
格式塔原理基本上定義了我們感知事物的六種不同的認(rèn)知規(guī)則。在網(wǎng)頁設(shè)計中，這意味著需要以一種合理的方式來安排元素，幫助用戶從整體上理解設(shè)計。
設(shè)計中需要考慮不同元素的對齊關(guān)系、相似元素或按鈕的排放位置、一組信息要如何展示、列表類信息該如何展示…
另一個重要的原則是?？硕?/span>，也就是向用戶展示的選項越多，做出決定需要的時間就越長。因為我們的大腦需要考慮和分析所有選擇，然后再選出最好的選擇，當(dāng)選擇太多時，這就會成為一個問題。
這就像我們在餐廳里點菜一樣，如果拿來一個 20 頁的菜單，我們可能會從頭到尾把這 20 頁全看了，仍然不知道該點哪個，然后又把這個 20 頁的菜單重新翻一遍。去餐廳吃飯是件放松高興的事，我們肯定不想在點餐上給自己帶來壓力，這樣吃飯的樂趣也會大打折扣。
如果需要填寫很長的表單，考慮將長表單拆分成幾個短的問題，讓用戶按步驟依次作答，避免一下看到過多問題給用戶帶來負(fù)擔(dān)。
網(wǎng)頁設(shè)計需要知道面對的用戶是誰、他們想獲取什么、想處理什么問題以及他們是想法是什么等等。
對最終用戶的印象越清晰，越有可能創(chuàng)造出成功的設(shè)計，就像設(shè)計一個面向兒童的網(wǎng)站與設(shè)計一個供老年人使用的網(wǎng)頁會完全不同。所以在一開始，要先學(xué)會把自己的觀點先放在一邊，傾聽目標(biāo)用戶的意見，然后再慢慢驗證自己的想法。
抖音千人千面的推薦機(jī)制，能為用戶精準(zhǔn)推送他們感興趣的內(nèi)容，把握住了用戶的興趣，產(chǎn)品才能越來越受歡迎。
排版需要長期的積累和沉淀，如何合理地安排頁面中的品牌標(biāo)識、圖片、文字等元素，是始終需要考慮的事。比如不管網(wǎng)頁設(shè)計的目標(biāo)是什么，或者選擇什么樣的視覺效果，在選擇字體時我們總要考慮字體的粗細(xì)、大小或?qū)Ρ榷鹊纫蛩亍?/span>
根據(jù)設(shè)備不同，最佳字體的選擇可能會發(fā)生變化。在移動端設(shè)計中，文字可讀性是首要的，屏幕越小越要保證信息的可讀性。
網(wǎng)頁的導(dǎo)航設(shè)計和信息架構(gòu)共同構(gòu)成了產(chǎn)品的主干，讓用戶能夠了解產(chǎn)品和功能并找到需要的信息。
無論信息的長短如何，合理的層級結(jié)構(gòu)有助于在產(chǎn)品中創(chuàng)建邏輯結(jié)構(gòu)，以便用戶可以查找信息。導(dǎo)航能反映出產(chǎn)品架構(gòu)，這樣用戶無需花費(fèi)大量精力，就能輕松找到主要信息和功能。
點擊按鈕之后會切換到哪一頁、怎么返回到當(dāng)前頁、點擊哪些按鈕頁面不跳轉(zhuǎn)。架構(gòu)流程不僅自己要明確，更需要用戶看得懂。
咱們前面提到，如果面臨的選擇太多，就需要經(jīng)過大量思考，這樣用戶很可能會變得有壓力甚至困惑。其實這里面還包含著另一層意思，過多的選擇會增加用戶的認(rèn)知成本。
只有降低認(rèn)知成本，才不會給用戶帶來過多壓力，才能快速做出判斷。在網(wǎng)頁大框架已經(jīng)設(shè)計好的基礎(chǔ)上，降低認(rèn)知成本的地方往往更在于細(xì)節(jié)。
準(zhǔn)確拿捏細(xì)節(jié)。在面包屑導(dǎo)航中，鼠標(biāo)懸浮上去是一種狀態(tài)，點擊后又是一種狀態(tài)；選中的標(biāo)簽與未選中的標(biāo)簽在顏色上做出區(qū)分；當(dāng)前頁碼重點突出的同時，告知用戶前后頁碼還支持左右切換。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
1.準(zhǔn)備工作
設(shè)計工具
Sketch
精不精通Sketch，就看插件用的溜不溜，推薦個網(wǎng)站：http://sketch.cm/
無論是學(xué)習(xí)Sketch，還是搜插件、找素材，都是Sketch使用者的優(yōu)選項。
Sketch是OS X平臺獨占，需要下載Sketch可以到這個網(wǎng)站去下載。
這里推薦個Mac平臺應(yīng)用的下載網(wǎng)站，使用Mac的小伙伴可以去這里下：http://xclient.info/
我個人是很推薦使用Sketch做UI設(shè)計的，軟件本身已經(jīng)提供了大量的IOS和Android系統(tǒng)設(shè)計資源，配合各類插件，幾乎無所不能。
Photoshop
相比于Sketch來說，體型胖了點，在UI設(shè)計上略遜一籌。不過因為Sketch是OS X獨占，所以因為平臺限制的原因，用PS設(shè)計也沒有問題。
我很久沒用它做UI設(shè)計了，也沒啥可推薦的了。
Adobe XD
全稱為Adobe Experience Design；這是一款集原型、設(shè)計和交互于一體的小清新時代風(fēng)格的設(shè)計軟件。雖然有人說，Adobe XD將會是Skech的勁敵。然而在windows系統(tǒng)當(dāng)中，Adobe XD的確是產(chǎn)品原型設(shè)計領(lǐng)域最順手的設(shè)計軟件。它使用簡單，界面整潔，雖然之前一直使用的是Axure 8.0，但看來，Adobe XD在界面、素材以及設(shè)計操作上的確甩了Axure好幾條街，至少它成功的吸引到了我。
做好版本管理、文件歸檔的工作
專業(yè)水平不僅體現(xiàn)在設(shè)計能力之上，優(yōu)秀的管理能力也是重要的職業(yè)素養(yǎng)。
合理規(guī)劃好設(shè)計版本，進(jìn)行明確的文件歸檔工作，有助于提高設(shè)計師的工作效率。
這里不贅述了，每個人有自己的版本管理方式，不過目標(biāo)只有一個：清晰高效。
2.關(guān)于手機(jī)的基礎(chǔ)概念
這里的概念性內(nèi)容不要強(qiáng)行記憶，理解即可，它是做移動UI設(shè)計的理論常識。
手機(jī)分辨率
手機(jī)屏幕的像素點數(shù)。比如750*1334、720*1280等等，細(xì)分還有物理分辨率和邏輯分辨率，這里不擴(kuò)展講解了，想了解自行百度吧。
手機(jī)分辨率牽扯到的就是工作時設(shè)計稿的尺寸，只要記住設(shè)計尺寸就可以了。
屏幕尺寸
手機(jī)對角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
屏幕尺寸和設(shè)計其實關(guān)系不大，主要是用來計算屏幕密度的。
屏幕密度(DPI或PPI)
每英寸的像素點數(shù)。簡單理解就是屏幕密度越大，畫面越逼真細(xì)膩。
下面是屏幕密度的計算方法，范例是5英寸，分辨率為1920*1080的手機(jī)：
屏幕密度牽扯最多的是安卓系統(tǒng)，安卓手機(jī)屏幕本身的密度種類非常多，這也是導(dǎo)致了安卓系統(tǒng)需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題，這個我們下面會提到)
3.基礎(chǔ)設(shè)計規(guī)范——IOS系統(tǒng)
這是蘋果的開發(fā)者官網(wǎng)：https://developer.apple.com/
這里有持續(xù)更新的最新設(shè)計規(guī)范和資源模板，雖然是全英文的，但并不影響閱讀。
設(shè)計師應(yīng)該學(xué)會從官方獲得設(shè)計資料，這比其他途徑獲得的資料更加全面和權(quán)威。
最新系統(tǒng)版本：IOS 11.4.1
中文字體：蘋方黑體
英文字體：San Francisco
官方系統(tǒng)設(shè)計模板下載：
https://developer.apple.com/design/resources/
官方系統(tǒng)設(shè)計字體下載：
https://developer.apple.com/fonts/
下圖是截止到目前，可能還需要支持的機(jī)型和對應(yīng)的設(shè)計尺寸：
設(shè)計稿尺寸
只推薦750*1334的尺寸來做設(shè)計稿，這是向上向下都最容易適配的尺寸，包括用這個尺寸去適配Android版。
除了IPhone X的比例特殊外，其他的IPhone比例幾乎差不多的，比較容易適配。
Sketch設(shè)計
使用375 * 667尺寸即可，開發(fā)在Xcode里也是使用這個尺寸。
導(dǎo)出的@2x圖適配IPhone 5/5S/5C/SE 6/6S/7/8
導(dǎo)出的@3x圖適配Iphone 6/6S/7/8 Plus IPhone X
Photoshop設(shè)計
畫布就建成750 * 1334尺寸的即可，在這個前提之下，
導(dǎo)出原尺寸圖片加后綴@2x，適配IPhone 5/5S/5C/SE 6/6S/7/8
導(dǎo)出1.5倍圖片加后綴@3x，適配IPhone 6/6S/7/8 Plus IPhone X
常用數(shù)據(jù)
下面的內(nèi)容蘋果官方提供的模板文檔其實都有對應(yīng)的數(shù)據(jù)，可以去官網(wǎng)下載。
字號使用建議(這個不是硬性規(guī)定，根據(jù)視覺效果酌情使用)
導(dǎo)航文字 34-38px
標(biāo)題文字 28-34px
正文文字 26-30px
輔助文字 20-24px
Tab bar文字 20px
圖標(biāo)尺寸建議
APP應(yīng)用圖標(biāo)，建議使用1024*1024尺寸去做，逐級縮小去應(yīng)用到各種場景中。
SKetch已經(jīng)提供了IOS和Android系統(tǒng)的APP尺寸圖標(biāo)模板，直接使用就可以了。
界面適配
程序內(nèi)部的功能界面：這種界面通過寫成自適應(yīng)的界面可以很好的適配各種機(jī)型；如果有特殊的布局要求，也可以讓開發(fā)根據(jù)特定機(jī)型去調(diào)整，不需要單獨為各類機(jī)型再做設(shè)計稿。
覆蓋全屏類的界面：比如閃屏、啟動頁、引導(dǎo)界面、插畫頁面等等，這類覆蓋全屏的界面必須要單獨為IPhone X的比例重新繪制或者調(diào)整設(shè)計稿。
其他的IPhone機(jī)型，遇到這種界面，整體放大縮小、微調(diào)之后按照各機(jī)型的設(shè)計尺寸輸出對應(yīng)的切圖就可以了。
IPhone X的安全區(qū)域：IPhone X的安全區(qū)域就是扣除頂部劉海狀態(tài)欄和底部虛擬home鍵之后，中間的內(nèi)容顯示區(qū)域。如果你不得不使用IPhoneX的尺寸做設(shè)計稿，請一定設(shè)置好參考線，不要把內(nèi)容做進(jìn)這兩塊區(qū)域內(nèi)部。
IPhone X規(guī)范：iPhone X 人機(jī)交互指南及其設(shè)計細(xì)節(jié)
簡單理解APP構(gòu)成
下圖是IOS開發(fā)工具Xcode里的一個空白頁面，圖片的文字標(biāo)注請仔細(xì)閱讀。
本質(zhì)上，開發(fā)寫APP界面和設(shè)計做設(shè)計稿是一樣的，只不過兩者實現(xiàn)方法不同。
APP的構(gòu)成遠(yuǎn)遠(yuǎn)要比上圖寫的復(fù)雜的多，我們這里使用最簡單的理解方式。
設(shè)計稿的標(biāo)注
根據(jù)上圖我們可以理解設(shè)計稿和程序之間的關(guān)系：
設(shè)計稿里的按鈕、文字、圖標(biāo)、列表、背景色、線條等等所有的設(shè)計元素，
在Xcode里都有對應(yīng)的控件，設(shè)計元素必須使用對應(yīng)控件，才能在APP的界面里顯示出來。
設(shè)計稿的標(biāo)注，實質(zhì)上是標(biāo)注的各類控件的屬性以及相對于其他控件的關(guān)系：
設(shè)計稿中：
文字的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；
圖片的自身屬性：寬高、間距、距離、透明度。
至于標(biāo)注在上篇文章有詳解：一款A(yù)PP從設(shè)計到切圖標(biāo)注適配全記錄，這里就不累贅了！
程序的對應(yīng)控件
Label的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；
Image View的自身屬性：寬高、間距、距離、透明度。
實際上各類控件的屬性也要比這個復(fù)雜的多，這里是最簡單理解的舉例說明。
如今使用本地化插件Sketch Measure，幾乎不用手工標(biāo)注，標(biāo)注導(dǎo)出HTML后，扔給開發(fā)，他們想看什么屬性自己點擊查看就是了，所以我們這里了解下標(biāo)注原理就行。
而一些線上工具的插件，比如藍(lán)湖、墨刀、Mockplus等等，功能更加豐富，各位根據(jù)自身情況靈活運(yùn)用吧。
Sketch Measure去http://Sketch.im下載
設(shè)計稿的切圖
IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴，是為了在Xcode導(dǎo)入圖片資源時，識別對應(yīng)機(jī)型所用的圖片。
Xcode里提供了相應(yīng)的位置，相同命名圖片會根據(jù)后綴填入到對應(yīng)的位置。
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是對于UI設(shè)計來說，常用的圖片格式就以下幾種：
PNG 常用圖片格式，沒什么解釋的，目前大部分產(chǎn)品還在使用此格式；
WebP 安卓的圖片格式，同等質(zhì)量圖片下體積非常小，非常推薦給安卓使用；
SVG 矢量格式，完美解決適配問題，但也有部分缺點。
想具體了解WebP和SVG，可以查看之前的文章。
切圖輸出規(guī)范
前提：同一類型、位置的切圖，請保證切圖尺寸、規(guī)格一致，圖片尺寸為偶數(shù)大小。
1.有操作功能、可點擊的功能性切圖：最小點擊區(qū)域問題
蘋果官方提供的能準(zhǔn)確點擊的最小點擊區(qū)域：88 * 88px;
小于這個范圍也可以點擊，但是點擊不靈敏，體驗較差。
對于比這個范圍小的可點擊按鈕，周圍需要用透明區(qū)域填充后再輸出切圖。
解釋下為什么用透明區(qū)域填充來擴(kuò)大點擊區(qū)域范圍：
圖標(biāo)這東西，對設(shè)計師來說沒區(qū)別，都是圖片。
但對開發(fā)來說，可操作和不可操作的圖標(biāo)是兩種類型的控件，圖標(biāo)的樣式不過是傳給該控件的顯示圖片罷了。
可操作的功能圖標(biāo)在Xcode對應(yīng)控件是UIButton。
對控件來說，如果不在代碼里明確固定控件的大小、點擊區(qū)域等等各類屬性，設(shè)計師傳給我多大的圖，這個控件就會被這張圖撐到多大。
你給我一張40*40的按鈕切圖，如果開發(fā)什么都不做，那這個UIButton在手機(jī)界面里就被撐到40*40的大小。
我也可以在Xcode里寫幾行代碼，固定圖片的大小就是40*40，擴(kuò)大UIButton這個控件的大小變成88*88，這樣這個控件的點擊區(qū)域也擴(kuò)大了。
但是一張規(guī)范的切圖就能解決的事情，為什么還要在代碼里再手動加幾行呢？
一個可點擊按鈕需要加一行代碼，整個APP就可能多加上百行上千行的代碼。
規(guī)范的切圖也是可以提升產(chǎn)品開發(fā)效率的。
2.非功能性切圖，比如列表圖標(biāo)、說明圖標(biāo)等，按統(tǒng)一規(guī)格的最小尺寸切。
這么切還可以減少一些程序因圖片資源大小導(dǎo)致的體積大小問題。
這類切圖，對應(yīng)的是UIImageView控件，就是一張圖片，無操作，只是占位和顯示。
所以你按照相同規(guī)格，最小尺寸切就可以了。
有朋友問：一定要切正方形的嗎？如果圖標(biāo)都是30*20的，那我統(tǒng)一切30*20的行不行
答案是：可以，這個沒有完全的硬性規(guī)定。雖然我是設(shè)計師，但也會去寫一些IOS程序。正方形規(guī)格切圖就是為了方便開發(fā)，當(dāng)然還是推薦你使用正方形規(guī)格來切圖。
但實際開發(fā)過程中，只要保證同一位置，切圖規(guī)格統(tǒng)一就可以。
切圖輸出狀態(tài)：
同一按鈕、元素的不同狀態(tài)，要明確命名對應(yīng)狀態(tài)之后，分別輸出對應(yīng)圖片。
下圖示例按鈕的選中狀態(tài)多出現(xiàn)在游戲APP中，這里僅表示說明。
命名規(guī)范
不要使用中文、特殊字符，請使用英文、下劃線、數(shù)字對切圖命名，數(shù)字不要打頭。
命名方式盡量清晰，推薦采用：種類_位置_功能_狀態(tài)
示例說明：
btn_homepage_seach_normal@2x.png
開發(fā)看到就會明白：這是位于首頁，處于正常狀態(tài)的搜索按鈕2倍切圖。
4.基礎(chǔ)設(shè)計規(guī)范——Android系統(tǒng)
這是Android Material Design中文版的地址
Android的英文版地址
最新系統(tǒng)版本：Android 9.0
中文字體：思源黑體
英文字體：Robot
Android不整理各類機(jī)型的尺寸規(guī)范了，數(shù)據(jù)零散，難以整理。所以我們從屏幕密度這里理解設(shè)計規(guī)范就可以了。
Android手機(jī)屏幕密度
上文我們提過屏幕密度的計算方式，安卓手機(jī)因為各種屏幕尺寸和分辨率，導(dǎo)致如果單純按照數(shù)值計算，可能屏幕密度種類會多到讓設(shè)計師崩潰。
所以為了解決這個問題，安卓手機(jī)出廠時，屏幕有自己初始的固定密度，系統(tǒng)會根據(jù)這些屏幕密度自行適配，下圖是對應(yīng)的屏幕密度表：
Android的開發(fā)單位以及設(shè)計尺寸
正因為Android手機(jī)分辨率多樣，為了保證同一設(shè)計在不同屏幕密度的手機(jī)上顯示效果一致，Android系統(tǒng)使用了下面兩個單位：
dp：android開發(fā)單位，相當(dāng)于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果；
sp：android開發(fā)文字單位，和dp類似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。
當(dāng)屏幕密度為MDPI（160DPI）時，1dp=1px
當(dāng)屏幕密度為MDPI（160DPI）時，1sp=1px
按照上面兩個公式的換算，同樣dp大小的圖片在不同屏幕密度的手機(jī)上如下圖所示，
基本可以保證圖片顯示效果在各類手機(jī)上相同。
設(shè)計稿尺寸
通過上面的分析，在xHDPI這個密度等級下，倍數(shù)關(guān)系為2，推薦使用720*1280尺寸做設(shè)計稿，換算方便，適配容易。
不過目前的現(xiàn)狀是，如果公司的產(chǎn)品有IOS和Android兩個版本，基本上設(shè)計師只會做IOS的版本，然后套用給Android，這樣做也是可以的。兩者的切圖，在這個設(shè)計尺寸之下是可以通用的。
設(shè)計稿的標(biāo)注
推薦使用dp和sp進(jìn)行標(biāo)注。但是呢，如果你用720*1280做設(shè)計，使用像素單位標(biāo)注，現(xiàn)在也不會影響什么。
因為前面已經(jīng)提到過IOS的標(biāo)注了，這里也就不再贅述了。
設(shè)計稿的切圖
理論上，對于Android系統(tǒng)來說，如果你想完美適配各種機(jī)型，應(yīng)該為不同的屏幕密度提供不同尺寸大小的切圖，而Android的開發(fā)工具也為不同的屏幕密度提供了對應(yīng)的資源文件夾。
但實際上，并不需要提供上面密度表那么多套的切圖，程序安裝包的大小基本就是由于圖片占用了太多的位置。
所以需要提供多少套圖片，請和公司的開發(fā)溝通，確定你們的產(chǎn)品實際支持哪些屏幕密度。
圖片格式
WebP和SVG
我個人是推薦現(xiàn)在為Android系統(tǒng)使用WebP格式，體積小，顯示效果好；
而SVG這種矢量圖片格式完美解決了Android多套切圖的問題，一套切圖，完美適配各種屏幕密度。
最小可點擊區(qū)域
48dp：這和IOS的最小點擊區(qū)域性質(zhì)是一樣的，都是考慮到手指點擊的靈敏性的問題，設(shè)計可點擊控件的時候要考慮到這一點。
更多的注意事項和IOS切圖是相同的，這里不再贅述了。
5.UI設(shè)計師的職業(yè)道路
如今的移動UI設(shè)計行業(yè)已經(jīng)很成熟了，針對移動UI設(shè)計的便捷工具層出不窮；移動UI設(shè)計的理論體系知識也已經(jīng)漸漸完善。但這些都是外部因素，社會發(fā)展了，我們跟著一起向前適應(yīng)就好了；
但對于設(shè)計師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業(yè)規(guī)劃！
很多設(shè)計師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒有職業(yè)目標(biāo)。
目前我工作5年，就從我自身的體會來分享我自己的方式，當(dāng)然資深的、精英設(shè)計就別跟我較真了，我代表的是那90%還在向上努力爬的普通設(shè)計師~
工作能力，不僅僅指的是自身的專業(yè)技術(shù)水平，還包含了各種綜合性能力，請務(wù)必對自己有明確的職業(yè)規(guī)劃和能力發(fā)展軌跡。
工作0~2年
這個階段對于新人來說，是一個設(shè)計能力和工作經(jīng)驗的快速積累過程，不夸張的說，這兩年內(nèi)的經(jīng)驗可以決定你之后的職業(yè)發(fā)展道路是否順利。
此階段目的：提升設(shè)計專業(yè)能力、完善理論知識、積累實際項目經(jīng)驗
這個階段就別想著一專多能了，先把那個“一?！备愫镁涂梢粤?，當(dāng)然不是不讓你學(xué)習(xí)別的知識，而是說重心應(yīng)該發(fā)在提升目前的專業(yè)能力上。
提升設(shè)計能力：
一方面，通過公司的實際商業(yè)項目提升能力，這個沒什么可說的；
另一方面，業(yè)余時間務(wù)必進(jìn)行大量的作品練習(xí)，無論是臨摹、還是重設(shè)計都可以，目的就是一個：量大 從優(yōu)！
臨摹請用高質(zhì)量作品，臨摹一堆垃圾還不如不做，臨摹請務(wù)必做到99%以上的相似度，不然那不叫臨摹，臨摹的過程是考驗軟件功力、設(shè)計技法能否完美復(fù)制的過程。
重設(shè)計請使用成熟知名產(chǎn)品，不要重設(shè)計一堆垃圾應(yīng)用，成熟產(chǎn)品每個界面的布局、樣式、功能、邏輯都是經(jīng)過深思熟慮后呈現(xiàn)給你的。
重設(shè)計的目的是要體會產(chǎn)品背后反映的設(shè)計意圖，不是為了重設(shè)計而重設(shè)計。
所以重設(shè)計之前請自己思考原產(chǎn)品這么做的目的再動手。
完善理論知識：
沒有理論體系方法的支持，在設(shè)計道路上是走不遠(yuǎn)的。
現(xiàn)在關(guān)于UI設(shè)計的知識網(wǎng)站已經(jīng)很多了，當(dāng)然不局限在這類專業(yè)性網(wǎng)站上。
人人都是PM、UI中國、25學(xué)堂等等很多這類網(wǎng)站都是學(xué)習(xí)理論知識的好地方。
當(dāng)然，你也可以關(guān)注我嘛~（給自己打個廣告，吼吼~）
工作2~3年
3年對于互聯(lián)網(wǎng)從業(yè)者是一個坎兒，其實這是相對于職業(yè)規(guī)劃來說的。
通過前兩年的積累，對于UI設(shè)計本職工作已經(jīng)可以勝任了，接下來的要考慮的是個人的職業(yè)發(fā)展規(guī)劃了。
此階段目的：拓展技能、明確職業(yè)目標(biāo)、為進(jìn)大廠做準(zhǔn)備
拓展技能：
這個階段可以考慮“一專多能”的多能了，作為UI設(shè)計師，可以學(xué)習(xí)的東西實在太多了，交互、動效、產(chǎn)品設(shè)計、開發(fā)等等。
不要求你達(dá)到那些專業(yè)從業(yè)者的地步，你要學(xué)到專業(yè)程度，還干什么UI設(shè)計啊。
目的是為了拓展自己的技能樹，為自己提供更多的競爭力，這個習(xí)慣要一直保持伴隨之后的工作……
明確職業(yè)目標(biāo)：
設(shè)計師最怕的就是迷茫，如果說前兩年因為剛?cè)胄?，對行業(yè)，對自身都不完全了解，那情有可原。但工作兩年后，對自身的情況再不清醒那就說不過去了。
可以從以下方面考慮：
是始終堅持在一線崗位的設(shè)計技術(shù)大牛，還是想做設(shè)計管理者，亦或者想從UI設(shè)計師轉(zhuǎn)職成交互設(shè)計、產(chǎn)品設(shè)計等等。
工作兩年已經(jīng)對自身，對行業(yè)有理解了，自己的能力是否適合設(shè)計崗位，對設(shè)計的熱愛是否能經(jīng)久不變都可以作為參考調(diào)節(jié)了。
為進(jìn)入大廠做準(zhǔn)備：
剛工作，可能限制于能力實力問題，委身于小公司。
但是！雖然我們身在小公司，但心要在BAT CAO TMD，
Apple、Google也不是不可以！
Skr！Skr！
這階段可以為大廠準(zhǔn)備一下，當(dāng)然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當(dāng)我放屁吧~
意思是，可以以進(jìn)入大廠為目標(biāo)，綜合性的考慮自身的缺陷并盡量彌補(bǔ)。
千萬別以為就在小公司將就著干吧，反正拿的錢也差不多，大公司的滋味你是體會不到的。
拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對個人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。
工作3~5年
對互聯(lián)網(wǎng)人來說，3年一個坎，5年一個坎，都是職業(yè)規(guī)劃的節(jié)點時間。
3到5年的設(shè)計師，如果你真的用心工作了，一個人可以實實在在的頂起來一個項目。
我們上面說，為進(jìn)入大廠做準(zhǔn)備。在這個階段，可以考慮進(jìn)入一些中大型企業(yè)，提升個人的綜合能力、拓展人脈。
部分企業(yè)也比較喜歡要這個階段的設(shè)計師，有工作能力，職業(yè)道路又剛開始，搞不好可以在公司培養(yǎng)起來。
此階段的目的：提升綜合能力、拓展人脈圈子
這時的個人專業(yè)水平其實已經(jīng)不是問題，繼續(xù)在工作中磨練積累就可以了；
這里需要的是打開個人在職場上的道路。
說實話，即使是互聯(lián)網(wǎng)行業(yè)，搞技術(shù)除了要保證自身技術(shù)過硬之外，會不會發(fā)展人脈，能不能提升綜合能力才是最后職業(yè)道路能不能走遠(yuǎn)走高的決定因素。
提升綜合能力：
與各部門的溝通能力、對設(shè)計資源的協(xié)調(diào)能力、在公司業(yè)務(wù)上的話語能力、對項目的把控能力等等，都算綜合能力，這是對內(nèi)部的能力。
不要以為對設(shè)計師來說，我悶著頭接需求，做設(shè)計就可以了。
這樣的設(shè)計師，也許你可以踏踏實實當(dāng)個接需求的小設(shè)計，但你永遠(yuǎn)也只是一個這類的設(shè)計，對于有更高更強(qiáng)的職業(yè)追求的人來說，沒有幫助。
所以，張開嘴、邁開腿，一步一步嘗試去推動自身進(jìn)步吧，這個沒什么技術(shù)性方法，必須要自己親自去做。
拓展人脈圈子：
人脈對個人職業(yè)道路的幫助，遠(yuǎn)遠(yuǎn)要比專業(yè)能力的幫助要大的多，這是對外的能力。
設(shè)計師的圈子，說實話不算大。搞技術(shù)的，本身就坐辦公室，而做設(shè)計的人本身性格也有一部分原因，但還是請你努力拓展自己的人脈。
對于自身的專業(yè)圈子，努力分享自己的設(shè)計經(jīng)驗、工作心得，總結(jié)自己的體會，發(fā)布到各類設(shè)計專業(yè)論壇上，積極的幫助別人，這都算一種拓展方式。
時間久了，就會結(jié)識非常多的設(shè)計界朋友，設(shè)計大牛也會逐漸注意到你，這些都是你職業(yè)道路上的寶貴資源。
還可以認(rèn)識幾個不錯的獵頭朋友，有好的職位，他們都會優(yōu)先想到你的。
作者自述
這也是我寫的最后一篇關(guān)于基礎(chǔ)規(guī)范類文章，也算是整理一下工作到現(xiàn)在的基礎(chǔ)常識類內(nèi)容，以后不再寫這類基礎(chǔ)文章了。
人總要進(jìn)步的，設(shè)計師還是要靠干貨作品來撐腰的，對吧。
以后發(fā)的內(nèi)容都是我做過的實際商業(yè)項目，我會把設(shè)計經(jīng)驗和工作方法融入到這些作品實例里來寫，這總比我單純講理論知識要強(qiáng)。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
寫在前面
近幾年云計算和大數(shù)據(jù)的興起，以及政府?dāng)?shù)據(jù)化戰(zhàn)略的升級，G端逐漸出現(xiàn)在大眾視野里，受到各大互聯(lián)網(wǎng)公司、IT廠商的青睞，BAT也在2018年宣布進(jìn)軍G端市場，給信息化市場帶來了新的氣息。
由于工作需要，經(jīng)常會和客戶溝通，總結(jié)出來G端客戶有一個特性是，他們大部分為高知人群，從學(xué)歷、社會地位、經(jīng)濟(jì)收入、家庭背景等都占有相當(dāng)?shù)膬?yōu)勢，長期在政府部門工作，他們習(xí)慣于政令形式、層級森嚴(yán)的環(huán)境，會有工作任務(wù)固定、重復(fù)率高、失誤率低的需求。
與toB相比，toG產(chǎn)品項目的特點是——
1/ 客戶業(yè)務(wù)主導(dǎo)性強(qiáng)
調(diào)研對象政府相關(guān)部門的領(lǐng)導(dǎo)和科員，對業(yè)務(wù)主導(dǎo)性強(qiáng)
2/ 改變用戶行為難
原系統(tǒng)運(yùn)行時間較長，形成了用戶習(xí)慣，接受新系統(tǒng)難度較大
3/ 項目工期短
部分toG項目要求工期緊，系統(tǒng)需求調(diào)研、開發(fā)時間較短
4/ 系統(tǒng)應(yīng)用阻力大
涉及原系統(tǒng)、單位內(nèi)部環(huán)境等問題，系統(tǒng)使用過程需要長期博弈
工作以來做了不少toB和toG的項目，這兩者相似卻又不同。
【相同點】
都是服務(wù)于用戶，需要站在用戶的角度分析用戶需求，為用戶解決問題
都是要把產(chǎn)品和項目做好，兼顧功能的同時，使用戶體驗更好，才能實現(xiàn)盈利
都是重功能、輕視覺，要符合產(chǎn)品的實際需求，并有效提升業(yè)務(wù)運(yùn)營的效率
...
【不同點】
1/ 面對的客戶群體——
toB是面向企業(yè)客戶的，一般為企業(yè)內(nèi)部人員使用，不向大眾公開。
toG是從toB衍生出來的一種特殊劃分，面向的企業(yè)是政府相關(guān)單位。
2/ 資金來源——
toB通常由企業(yè)撥出資金
toG通常由國家財政撥出預(yù)算，并非完全基于自身的組織或企業(yè)的資金。
3/ 決策機(jī)制——
toB一般為客戶、公司管理層
toG的話，不同層級的決策者有不同的考量，比如高層領(lǐng)導(dǎo)希望打造影響力來獲得政績，中層領(lǐng)導(dǎo)希望體現(xiàn)布局和價值，小領(lǐng)導(dǎo)希望解決自身申請項目和提升職稱等的需求，最終用戶能否用起來，反而不是很重要。所以解決方案要滿足不同層級和角色的需求。
4/ 產(chǎn)品需求——
toB滿足剛性需求并滿足一線使用者需求為主
toG非常多的產(chǎn)品功能非剛性，通常會讓研發(fā)人員難辦，因為比較難證明產(chǎn)品或研發(fā)價值，但在售前和控標(biāo)階段，大而全的功能又會成為各產(chǎn)品之間的軍備競賽，最后將產(chǎn)品功能補(bǔ)齊，開啟同質(zhì)化競爭。所以更多的是滿足非剛性、但有利于搞定決策人的、有價值的功能需求。
5/ 產(chǎn)品標(biāo)準(zhǔn)化——
toB面對中小型客戶，需求淺、沒有足夠的談判籌碼，不需要定制化；大客戶的話，需求更深入，定制化不可避免。
toG比較難實現(xiàn)標(biāo)準(zhǔn)化，因為toG本質(zhì)上是重政績輕實用，這就導(dǎo)致相關(guān)決策人總希望做出不一樣的東西，不僅別人有的我要有，我的還要有特色。所以可以從兩方面入手，一是只做通用層能力，定制化找合作伙伴來做，保證渠道和底層能力的核心競爭力；一是自建定制化團(tuán)隊，專做定制化需求，避免拖累正常的產(chǎn)品迭代。
6/ 視覺設(shè)計——
toB一般冷色系居多，整體簡潔
toG要根據(jù)客戶喜好來設(shè)計，最好能體現(xiàn)單位或地方特色；視覺方面，界面不能過于簡單，互聯(lián)網(wǎng)扁平化并不適用，要盡可能充實界面，但要把握「度」，不能太花哨，一般配色以紅&藍(lán)為主，莊重、大氣；內(nèi)容方面，要遵循國家相關(guān)要求和當(dāng)下政策環(huán)境，不可隨意亂造，最好是當(dāng)前業(yè)務(wù)測試內(nèi)容；交互方面，不可有過多的交互層級和特效，操作路徑要盡可能短一些，一般是一到兩個交互動作就可以完成任務(wù)，要考慮40-50歲人群的體驗習(xí)慣。
（這里可參考之前寫的一篇文章，詳細(xì)介紹了簡化操作路徑的案例，一站式解決問題，有需要的同學(xué)可以看看，鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html）
7/ 產(chǎn)品迭代——
toB一般有一定的周期
toG產(chǎn)品項目，一般第一次上線之后，客戶會提出一系列問題，返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產(chǎn)品)，因為政務(wù)用戶不同層級的需求和對需求的認(rèn)知不同，造成了對統(tǒng)一功能不同用戶的意見有很大的不同，其實第一次上線運(yùn)行就相當(dāng)于一次內(nèi)部測試，返工的時候不必太挫敗，只要做到核心業(yè)務(wù)流程和業(yè)務(wù)模塊完整即可。接下來再通過幾次的測試、收集意見反饋，討論決定最后的需求，這就是很多toG項目需要去客戶現(xiàn)場駐場的一個原因，采用小版本、多迭代、多溝通，及時解決問題。
PS: 關(guān)于去客戶現(xiàn)場，這里想多說幾句。
通常情況下，是產(chǎn)品經(jīng)理和開發(fā)團(tuán)隊駐場居多，但有時候設(shè)計方面常會遇到一種情況是，客戶需求不明確。通過產(chǎn)品經(jīng)理在客戶和設(shè)計師之間來回轉(zhuǎn)達(dá)消息，效果也并不是很好，這個時候就需要設(shè)計師主動爭取機(jī)會去客戶現(xiàn)場。有一個典型的案例是，去年做GAB的項目，需要設(shè)計一個登錄界面。設(shè)計稿做了很多，客戶一直不滿意，于是我申請到客戶現(xiàn)場進(jìn)行面對面溝通，去的時候會帶幾個有代表性的風(fēng)格給客戶看，先把不想要的風(fēng)格排除掉，然后把握大的設(shè)計方向。具體設(shè)計的時候同步表達(dá)自己的設(shè)計理念，一步步引導(dǎo)客戶，客戶中途一步步給意見建議，參與其中，這樣更容易明確需求，客戶也會覺得這是自己與設(shè)計師共同的成果，會更容易接受，做出雙方都滿意的設(shè)計，促進(jìn)驗收，最后雙贏。
這就是那個「看起來平平無奇 · 但解決了實際問題 · 客戶很滿意」的登陸界面，如下圖：
8/ ...
很多toG的產(chǎn)品項目上線后造成的客戶影響不好，這個時候要調(diào)整好心態(tài)，只要你設(shè)身處地站在用戶的角度思考，分析場景和需求，用我們的專業(yè)技能來解決問題，當(dāng)你經(jīng)歷各種否定和困難最終得到客戶的認(rèn)可，這種打磨過后的成就感真的難以言喻。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
導(dǎo)語：提起中后臺，除了高效、靈活和強(qiáng)大之外，不可忽視的還有它的海量數(shù)據(jù)。海量數(shù)據(jù)的篩選與呈現(xiàn)，直接決定決策人員的效率高低。本文作者主要是結(jié)合自己在實際工作中遇到的表格設(shè)計問題，針對Web端數(shù)據(jù)呈現(xiàn)方式之一，表格的設(shè)計進(jìn)行探討。
表格，是一種常見的信息組織整理手段。常用來展示、保存、對比分析、排序、篩選 、歸納等，是最清晰、高效的數(shù)據(jù)展現(xiàn)形式之一，由內(nèi)、外兩部分組成。
說完表格的組成，接下來將會從易讀性和易操作性兩個方面來分析下表格設(shè)計。
表格的組成，也可以看作行與列的自由組合，這種組合賦予了表格多樣性的特點。行與列構(gòu)成了單元格的長與高，不同的長高會有疏密之分，充實與透氣之感。
B端中后臺通常會對應(yīng)不同的角色及場景需求，根據(jù)目的及信息主體的不同，讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序，也可以通過行與列的顯隱變化，來更好的滿足信息的傳達(dá)。
但需要注意的是系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶重復(fù)操作。對于列的選擇，應(yīng)盡量減少列的數(shù)量，既要展示用戶必要信息，又要避免出現(xiàn)用戶無關(guān)數(shù)據(jù)，以免信息冗余，影響信息閱讀效率性。對于用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決。
默認(rèn)排序，應(yīng)從用戶目的出發(fā)，遵循用戶查看數(shù)據(jù)的習(xí)慣，尊重數(shù)據(jù)之間的關(guān)聯(lián)性，設(shè)計用戶查看、操作數(shù)據(jù)的路徑，而非隨機(jī)排列。
B端中后臺中的表格展示的數(shù)據(jù)多且雜，這就要為用戶先一步對數(shù)據(jù)進(jìn)行梳理歸納，提高用戶獲取信息速度。
為便于對數(shù)據(jù)進(jìn)行對比分析，一般需要在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計等數(shù)據(jù)處理結(jié)果，減少用戶二次加工數(shù)據(jù)的過程，提升用戶閱讀信息的效率。
數(shù)據(jù)匯總展示
在表頭或者表尾分別提供了總計的數(shù)據(jù)，方便用戶進(jìn)行快速查閱。
數(shù)據(jù)對齊展示
常用對齊方式有數(shù)字右對齊，文字左對齊，混合型文本左對齊，列標(biāo)簽的對齊方式與數(shù)據(jù)的對齊方式保持一致。這樣能形成的視覺邊界線，便于視線的流動，從而快速提升數(shù)據(jù)的瀏覽、對比效率。
空數(shù)據(jù)展示
B端中后臺數(shù)據(jù)類型較多，對于空數(shù)據(jù)，切忌不要與數(shù)據(jù)為“０”進(jìn)行混淆，對于空數(shù)據(jù)通用做法是用“－”表示，而不是什么都不顯示，會讓用戶誤以為是沒有數(shù)據(jù)還是“0”數(shù)據(jù)。
最好做法就是為空數(shù)據(jù)做出釋義，可以加在“列標(biāo)簽”的名詞解釋文案中。
數(shù)據(jù)的關(guān)鍵屬性標(biāo)識展示
對于用戶重點關(guān)注的數(shù)據(jù)狀態(tài)、上升和下降等，可以用符號進(jìn)行標(biāo)識，幫助用戶快速定位到目標(biāo)信息。
在有限屏幕內(nèi)，有限的內(nèi)容展示區(qū)域內(nèi)，閱讀豐富且繁多的表格時，用戶不得不拖動橫向或縱向滾動條來閱讀信息。
固定表頭、固定列和固定分頁，能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。
固定表頭
在固定的小區(qū)域內(nèi)滾動會非常局促，而且區(qū)域滾動和全屏滾動同時存在時體驗也很不好。固定表頭可幫助用戶識別信息，在全屏滾動上去后固定表頭，有利于用戶向下翻屏?xí)r能夠便利的閱讀數(shù)據(jù)。
固定列
固定列的內(nèi)容可視業(yè)務(wù)及目標(biāo)用戶的訴求而定，一般采用方法是固定比較重要信息，方便用戶進(jìn)行數(shù)據(jù)定位與對比，最好可以讓用戶自定義，滿足不同用戶訴求。
固定分頁
分頁處理目前有放在上部、下部或上下部均有，需要根據(jù)場景來選擇。分頁固定目的是為了省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。
特別是可以自定義每頁的數(shù)量和需要橫向拖動數(shù)據(jù)查看，這就需要把分頁固定在底部，方便用戶橫向拖動滑條查看信息和進(jìn)行翻頁操作。
在Web端中的表格，涉及到跨頁的數(shù)據(jù)操作時，分頁會帶來不便。
但往往受限于數(shù)據(jù)加載的壓力，這種情況在大廠中尤其突出，加載數(shù)據(jù)都是億量級別的，在Web端和手機(jī)端都需要實時下載數(shù)據(jù)的終端，我們通常做法就是提供分頁展示數(shù)據(jù)來緩解服務(wù)器的壓力。
表格中的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時需要提供翻頁功能，而這個“數(shù)量”是由表頭的數(shù)據(jù)的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來決定。
原則上整張表不要超過一屏，考慮到每個用戶的使用習(xí)慣，我們一般提供可以讓用戶自定義每頁的顯示的數(shù)量，相比于跨屏翻頁而言，向下滾屏?xí)憷?，也更符合瀏覽信息路徑。
表格全屏展示是非常有必要的：
在大量的表格信息中，如果沒有篩選查找信息簡直猶如大海撈針，而表格跟篩選是不分家的。
說到表格一定會說到篩選，篩選也就是數(shù)據(jù)過濾，常在數(shù)據(jù)量較大的場景中使用，其目的是通過關(guān)鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內(nèi)容。
對于表格外部篩選，如果有時間會單獨出一篇詳情介紹。這里不展開詳細(xì)說。
篩選根據(jù)篩選功能的位置不同，可分為表外篩選和表內(nèi)篩選。
在信息列數(shù)較多的情況下，數(shù)據(jù)的選擇就尤為重要。當(dāng)鼠標(biāo)指針懸停在表格列或行時，給予視覺狀態(tài)的變化提示，可以讓用戶捕捉到所在的位置，而不至于視覺上的錯行，能夠降低人的心理壓力和增加掌控感。根據(jù)數(shù)據(jù)選擇功能分為單個選擇和批量選擇。
單個選擇
鼠標(biāo)指針懸停在整行時應(yīng)與默認(rèn)態(tài)有所區(qū)分。當(dāng)標(biāo)識選中行或選中行的數(shù)量，選中行可操作的命令狀態(tài)須同步，明示當(dāng)前行可操作的命令或反饋當(dāng)前已選行的數(shù)量。
批量選擇
提供選擇當(dāng)前頁部分行、選擇全部行、取消選擇全部行三種功能；狀態(tài)反饋分為半選態(tài) 、未選態(tài)、全選態(tài)共三種。
對于數(shù)據(jù)的操作，主要針對表格內(nèi)部來說。表格操作大體可分為顯性操作和隱形操作。
顯性操作
指操作選項顯示在行內(nèi)，優(yōu)點是明顯直觀，可以根據(jù)列表上的信息做出快速的判斷并且高頻發(fā)生的操作。
適用列數(shù)較少的列表。但弊端是信息過載，尤其是列數(shù)較多，可展示列數(shù)會隨操作數(shù)增加而減少，同時誤操作率較高。對于危險系數(shù)比較高的操作，也不建議采用這種設(shè)計。
隱性操作
當(dāng)鼠標(biāo)懸停或點擊時才顯示其他低頻、高危的操作選項，優(yōu)點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，可減輕空間壓力，減少干擾。
弊端是增加用戶的點擊次數(shù)和提高了操作門檻。列數(shù)較少的表格不適用隱性操作。
為方便用戶對數(shù)據(jù)進(jìn)行再次整合分析、統(tǒng)計分析等，可提供數(shù)據(jù)下載功能及多種下載格式。
對于B端中后臺來說，表格顯示最多就是兩種情況：一種就是表格有數(shù)據(jù)，這種最容易解決，有數(shù)據(jù)就顯示相應(yīng)數(shù)據(jù)；還有一種表格是沒有數(shù)據(jù)，也就是空表狀態(tài)，這也是讓很多設(shè)計師容易忽略掉的頁面。
空表分兩種：可創(chuàng)建和純展示
可創(chuàng)建
是用戶有創(chuàng)建訴求，數(shù)據(jù)是由用戶或系統(tǒng)產(chǎn)生的，可創(chuàng)建分兩種：
純展示
沒有創(chuàng)建訴求的，數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)。
看上去平淡無奇的數(shù)據(jù)表格，其實是非常重要的，通過合理的組織架構(gòu)和呈現(xiàn)方式，使原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力，這是一件很神奇的事。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.yvirxh.cn