亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

在開始B端規(guī)范之前，不妨先來了解一些概念。

1.C端

C端產(chǎn)品簡稱To C (To Customer)，也叫做2C產(chǎn)品（2是諧音to而來）。

C是Customer（顧客的縮寫），顧名思義就是面向個人用戶提供服務(wù)的產(chǎn)品，是直接服務(wù)于用戶的。?C端產(chǎn)品大都免費(fèi)，他的商業(yè)模式是依靠流量獲取收益的，流量基數(shù)越大收益就越大，兩者呈指數(shù)關(guān)系。這類產(chǎn)品在我們的手機(jī)上滿屏都是，例如：購物的淘寶、看影評的豆芽、聽歌曲的網(wǎng)易云音樂等。

C端的用戶群體代表消費(fèi)者個人用戶，相對單一且固定，一般為個人的單一維度。不同用戶擁有著相對統(tǒng)一標(biāo)準(zhǔn)的用戶操作流程，用戶只需自己做決定即可。比如餓了要吃飯用外賣應(yīng)用下單，出門沒方向用地圖導(dǎo)航等等。在這些場景下，幾乎不涉及與他人協(xié)作的情況，用戶關(guān)心的是自己，解決的就是自己的生活需求。C端設(shè)計核心也是追求讓用戶用?最短時間、最短路徑、最低成本 達(dá)到滿足個人需求的目的。

2.B端

B端產(chǎn)品簡稱To B (To Business)，也叫做2B產(chǎn)品（2是諧音to而來）。

B是Business（商業(yè)的縮寫），顧名思義就是面向商家、企業(yè)級、業(yè)務(wù)部門提供的服務(wù)產(chǎn)品，是間接服務(wù)于用戶的。B端產(chǎn)品通過付費(fèi)定制的途徑獲取收益，產(chǎn)品不直接由使用者買單，而是企業(yè)掏腰包。這類產(chǎn)品PC端有很多，例如：螞蟻，百度云就是to B的產(chǎn)品設(shè)計，還有其他一些電子商務(wù)平臺的后臺產(chǎn)品，CRM 系統(tǒng)、 ERP 系統(tǒng)、OA系統(tǒng)、供應(yīng)鏈系統(tǒng)，也都屬于to B的產(chǎn)品設(shè)計。

B端的用戶群體代表企業(yè)用戶商家，面向多角色、多維度。企業(yè)做一個決策或者完成一項任務(wù)，往往不是一個人能快速決定的，一般有決策者、管理者和執(zhí)行者，需要多人分工協(xié)作。

決策者?即決定是否購買B端產(chǎn)品的人，他們更多的是關(guān)注產(chǎn)品傳遞出的利益性，比如企業(yè)整體的工作效率、成本管控、系統(tǒng)穩(wěn)定性和安全性等等。管理者?即權(quán)限管理人員，他們更多的是關(guān)注產(chǎn)品操作權(quán)限安排的問題，給不同的執(zhí)行者安排不同的使用方案。執(zhí)行者?即根據(jù)自身權(quán)限日常使用B端產(chǎn)品的人，他們在使用過程中更多的會考慮B端產(chǎn)品的易用性。

B端設(shè)計需要關(guān)注的重點是不同角色之間信息流的高效傳遞，一般會對界面進(jìn)行模塊化設(shè)計處理，有時還會提供自定義組合模塊的功能。

B端產(chǎn)品根據(jù)展示形式的不同，一般分為：展示類B端產(chǎn)品、邀請注冊類B端產(chǎn)品以及二者結(jié)合類B端產(chǎn)品。

1.展示類B端產(chǎn)品

展示類頁面（Display Page）一般是指當(dāng)用戶進(jìn)入某個網(wǎng)站時瀏覽到的第一個頁面，也可以當(dāng)作著陸頁（Landing Page）來吸引用戶的注意。分步展示產(chǎn)品的主要信息，通過精彩的視覺，動效，使用戶增加產(chǎn)品認(rèn)知，提升使用興趣，提供試用機(jī)制，進(jìn)而達(dá)到轉(zhuǎn)化目的 適用產(chǎn)品范圍較廣。

2.邀請注冊類

一屏之內(nèi)展示出產(chǎn)品賣點或價值主張，突出顯示 CTA（網(wǎng)頁中“點擊購買”“點我試試看”之類的點擊按鈕）。主要目的在于快速留住游客，是指直接轉(zhuǎn)化為使用者。

3.展示和邀請注冊結(jié)合類

在展示頁面添加邀請注冊入口（按鈕，文字，banner形式都可），用戶點擊跳轉(zhuǎn)至邀請注冊頁面，完成注冊或登錄進(jìn)入中后臺系統(tǒng)。

B端產(chǎn)品布局要基于『動態(tài)、體系化』的角度出發(fā)展開?！簞討B(tài)』即響應(yīng)式，保證信息在不同環(huán)境下表現(xiàn)一致，可交互可操作；『體系化』即模塊化，按照業(yè)務(wù)層次和邏輯關(guān)系設(shè)置不同的模塊層級，保證產(chǎn)品內(nèi)容脈絡(luò)清晰，層級分明。定義布局系統(tǒng)建議從 5個方面出發(fā)：

1.八倍數(shù)原則

開始頁面布局就要考慮尺寸劃分，劃分的越細(xì)致，涉及的尺寸就越多，而這些尺寸如果沒有一定的原則去約束，就會顯得毫無章法，難以實現(xiàn)視覺界面的一致性原則。想呈現(xiàn)出專業(yè)的設(shè)計品質(zhì)，就需要保證設(shè)計文件本身的一致性以及設(shè)計文件與前端開發(fā)后成品的一致性。

8倍數(shù)原則：建立一個以8pt為單位的網(wǎng)格系統(tǒng)，利用8的倍數(shù)來規(guī)定頁面中元素(按鈕、輸入框、圖片等)的尺寸及各自間距的大小。即任何需要自定義的長、寬，marging和padding都應(yīng)該是8的倍數(shù)。

很多人雖然理解要用原則約束尺寸，但還是會產(chǎn)生疑問，為什么是8pt，不是6pt、10pt或者其他數(shù)字？

據(jù)統(tǒng)計，使用中后臺系統(tǒng)的用戶的主流分辨率主要為 1920、1440 和 1366，個別系統(tǒng)還存在 1280 的顯示設(shè)備。主流的屏幕尺寸大部分都是8的整數(shù)倍數(shù)。即使某些屏幕邊長像素不是8的倍數(shù)，在設(shè)計中仍然可以盡量做到自定義元素的長、marging，以及padding都是8的倍數(shù)來維持設(shè)計的一致性。

2.關(guān)于柵格

在多數(shù)業(yè)務(wù)情況下，B端產(chǎn)品需要在設(shè)計區(qū)域內(nèi)利用?柵格系統(tǒng)?解決大量信息收納的問題，將整個設(shè)計區(qū)域按照等分的原則進(jìn)行劃分，基于行（Row）、列（Column）和區(qū)塊間隔（Gutter）來定義信息區(qū)塊的外部框架，以保證頁面的每個區(qū)域能夠穩(wěn)健地排布起來。

網(wǎng)格：柵格是由一系列規(guī)律的小網(wǎng)格組成的網(wǎng)格系統(tǒng)，網(wǎng)格構(gòu)成頁面的最小單位。通常，在網(wǎng)頁設(shè)計中經(jīng)常使用8作為柵格的最小步進(jìn)單位。

列：列是柵格的數(shù)量單位，通常設(shè)定柵格數(shù)量說的就是列的數(shù)量，比如12柵格就有12個列、24柵格就有24個列。通過設(shè)定列的內(nèi)邊距（padding）來定制槽（Gutter）的大小，剩余的部分稱為欄（Column）。這里需要注意的是：我們把柵格的列看做是欄+槽的寬度。

槽（Gutter）：頁面內(nèi)容的間距，槽的數(shù)值越大，頁面留白越多，視覺效果越松散；反之，頁面越緊湊。槽通常設(shè)為定值，用來確定欄的大小。如果要支持響應(yīng)式， Gutter 數(shù)值要保證在8倍數(shù)，常用的有8px、16px、24px、32px、40px、48px。給頁面中柵格的 Gutter?設(shè)定了定值 ，即瀏覽器在一定范圍擴(kuò)大或縮小，柵格的 Column 寬度會隨之?dāng)U大或縮小，但 Gutter 的寬度值固定不變。這里需要注意的是：槽的區(qū)域不可以放置內(nèi)容。

柵格寬度（Container）：頁面柵格系統(tǒng)的總寬度，當(dāng)我們開始著手做一個項目時，首先應(yīng)考慮在多大的尺寸范圍內(nèi)做設(shè)計，也就是確定柵格區(qū)域的寬度范圍。

邊距（Margin）：柵格外邊距，與屏寬保持一定的安全距離。

計算公式：我們假設(shè)內(nèi)容區(qū)寬度為W（Weight），欄寬為C（Column），列數(shù)為n，槽為定寬G，由于槽不可以放置內(nèi)容，可以得出：W=C*n-G。

我們需要根據(jù)自己的項目確定柵格的劃分?jǐn)?shù)量，劃分的格子越多，承載的內(nèi)容越精細(xì)。通常，在信息繁雜的后臺系統(tǒng)常用24柵格，而一些商業(yè)網(wǎng)站、門戶網(wǎng)站通常劃分成12柵格。

柵格不是劃分的越細(xì)越好，24柵格精細(xì)，但也容易顯得瑣碎，內(nèi)容排布的規(guī)則太多，也就相當(dāng)于沒有規(guī)則。有的項目根據(jù)實際情況也會劃分成16柵格、20柵格，也是可以的。

以 1440 布局的結(jié)構(gòu)為例，對寬度W= 1168px 的主內(nèi)容區(qū)域進(jìn)行 24 柵格的劃分設(shè)置，槽為定值G= 8px；那么可以得出列寬49px，欄為41px。如下圖所示。

sketch用戶可在布局設(shè)置里設(shè)置參數(shù)使用，非sketch用戶可借助?GridGuide?布局。

對開發(fā)者而言柵格是實現(xiàn)動態(tài)布局的手段，而設(shè)計師對于柵格的理解源自平面設(shè)計中的柵格。在具體落地中，通過柵格設(shè)計師和前端開發(fā)站在相同的視角，統(tǒng)一設(shè)計到開發(fā)的布局語言，減少還原損耗，保障還原度，繼而減少溝通成本。

3.上下布局

一般主導(dǎo)航放置于頁面的頂端，從左自右依次為：logo、一級導(dǎo)航項、輔助菜單（用戶、設(shè)置、通知等）。通常將內(nèi)容放在固定尺寸（例如：1200px）內(nèi)，整個頁面排版穩(wěn)定，不受用戶終端顯示器影響；上下級的結(jié)構(gòu)符合用戶上下瀏覽的習(xí)慣，也是較為經(jīng)典的網(wǎng)站導(dǎo)航模式。頁面上下切分的方式提高了主工作區(qū)域的信息展示效率，但在縱向空間上會有一些犧牲。此外，由于導(dǎo)航欄水平空間的限制，不適合那些一級導(dǎo)航項很多的信息結(jié)構(gòu)。

上下布局的做法是對兩邊留白區(qū)域進(jìn)行最小值 M（Margin）?的定義，當(dāng)留白區(qū)域到達(dá)限定值之后再對中間的主內(nèi)容區(qū)域?W（Weight）進(jìn)行動態(tài)縮放。

主內(nèi)容區(qū) W?尺寸常用的有1200px、1190px、1168px、1152px、1000px、960px。兩邊留白區(qū)域最小值?M?常用尺寸有24px、16px、0px。這里說的只是一般常用的動態(tài)布局參數(shù)，實際設(shè)計中一套完美的方案需要設(shè)計師具備前端視角、平面構(gòu)圖視角以及交互視角，并且依據(jù)所在團(tuán)隊產(chǎn)品規(guī)范來綜合決定。

以 W = 1152px?，?M = 24px為例，為在響應(yīng)式方面保證更好的預(yù)覽效果，我們在主內(nèi)容區(qū)外面增加了 24px 的邊距, 避免屏幕尺寸在低于 1152px 的時候內(nèi)容貼邊, 于是需要將主內(nèi)容區(qū)域最大寬度改為 1200px，再增加 24px 的內(nèi)邊距 。

注：部分B端產(chǎn)品不考慮瀏覽器范圍縮小低于 1000px 時的動態(tài)布局情況；部分B端產(chǎn)品考慮瀏覽器范圍縮小低于 1000px 時移動設(shè)備上的動態(tài)布局情況。

?頂部頁頭導(dǎo)航：承載的是品牌信息與整個網(wǎng)站的結(jié)構(gòu)信息，明確的告知我們網(wǎng)站里最主要的幾塊內(nèi)容。

? 頂部導(dǎo)航（大部分系統(tǒng)）：一級導(dǎo)航高度?64px，二級導(dǎo)航?48px。

? 頂部導(dǎo)航（展示類頁面）：一級導(dǎo)航高度?80px，二級導(dǎo)航?56px。

? 頂部導(dǎo)航高度H（header）的范圍計算公式為：48+8n（n是自然數(shù)）。

頁腳：Footer（頁腳）作為展示頁中也非常重要的一部分，在頁面的最底部，包含的信息內(nèi)容為：實用導(dǎo)航，語言選擇，社交鏈接，幫助和支持，版權(quán)和隱私聲明等。

?

Banner 首屏：整個展示頁面最重要的組成部分之一，一般介紹產(chǎn)品的名稱和簡介，并且體現(xiàn)整體產(chǎn)品的風(fēng)格走向。

banner設(shè)計寬度建議分兩類：

? 文字+視覺元素+純色背景（漸變背景），視覺元素可輸出3倍尺寸或者用3倍尺寸設(shè)計，多屏幕適配時縮放使用，背景區(qū)域前端用代碼實現(xiàn)。

? 文字+視覺元素+復(fù)雜背景：如果元素與背景分離，視覺元素仍舊可以輸出3倍尺寸，但是背景就不能用代碼去實現(xiàn)了，而是要用大尺寸設(shè)計輸出保障多屏幕的適配效果，常用的設(shè)計寬度有1920、3840、5120。建議采用3840，1920適配高分辨率屏幕會出現(xiàn)些許模糊失真。

banner內(nèi)容排版建議分兩類：

? 上下排版：1）全屏背景圖；2）標(biāo)題、文案和按鈕與頁面居中對齊

? 左右排版：1）主圖在頁面右側(cè)（或左側(cè)），標(biāo)題、文案和按鈕在頁面左側(cè)（或右側(cè)）；2）建議文案和button部分左對齊；

4.左右布局

常見的做法是將左邊的導(dǎo)航欄固定，對右邊的工作區(qū)域進(jìn)行動態(tài)縮放。

? 頂部導(dǎo)航（大部分系統(tǒng)）：一級導(dǎo)航高度?64px，二級導(dǎo)航?48px。

? 頂部導(dǎo)航（展示類頁面）：一級導(dǎo)航高度?80px，二級導(dǎo)航?56px。

? 頂部導(dǎo)航高度H（header）的范圍計算公式為：48+8n（n是自然數(shù)）。

? 側(cè)邊導(dǎo)航寬度S（sidebar）的范圍計算公式：200+8n（n是自然數(shù)）。

左右布局分兩類：

頂部-側(cè)邊布局-通欄：同樣擁有頂部導(dǎo)航及側(cè)邊欄，和上下布局的區(qū)別是兩邊未留邊距，多用于應(yīng)用型的網(wǎng)站。

側(cè)邊布局：側(cè)邊兩列式布局。頁面橫向空間有限時，側(cè)邊導(dǎo)航可收起。

側(cè)邊導(dǎo)航在頁面布局上采用的是左右的結(jié)構(gòu)，一般主導(dǎo)航放置于頁面的左側(cè)固定位置，輔助菜單放置于工作區(qū)頂部。內(nèi)容根據(jù)瀏覽器終端進(jìn)行自適應(yīng)，能提高橫向空間的使用率，但是整個頁面排版不穩(wěn)定。側(cè)邊導(dǎo)航的模式層級擴(kuò)展性強(qiáng)，一、二、三級導(dǎo)航項目可以更為順暢且具關(guān)聯(lián)性的被展示，同時側(cè)邊導(dǎo)航可以固定，使得用戶在操作和瀏覽中可以快速的定位和切換當(dāng)前位置，有很高的操作效率。但這類導(dǎo)航橫向頁面內(nèi)容的空間會被犧牲一部份。

5.常用布局?jǐn)?shù)組

螞蟻金服團(tuán)隊提取了一組可以用于UI布局空間決策的數(shù)組，他們都保持了 8 倍數(shù)的原則、具備動態(tài)的韻律感。經(jīng)過驗證，可以在一定程度上幫助我們更快更好的實現(xiàn)布局空間上的設(shè)計決策。

1.通用

? 按鈕：

按鈕按使用功能分為：主按鈕、次按鈕、虛線按鈕、危險按鈕。

按鈕按表現(xiàn)形式分為：描邊按鈕、填充按鈕、圖標(biāo)按鈕、幽靈按鈕等。

按鈕按組合形式分為：單一按鈕、組合按鈕。

主按鈕在同一個操作區(qū)域最多出現(xiàn) 1 次。次按鈕是最常用的按鈕形式。

按鈕尺寸有大、中、小三種。若不設(shè)置按鈕尺寸，則默認(rèn)尺寸為中。

按鈕狀態(tài)分為默認(rèn)、懸停、點擊、置灰。

一般情況下，當(dāng)鼠標(biāo) hover 某個按鈕，就視為浮起，對應(yīng)顏色就相應(yīng)增加白色疊加，相反 click 的行為可以理解為按下去，在顏色上就相應(yīng)的增加黑色疊加。建議在顏色上添加黑色或者白色按照 （n+5）% 的規(guī)律遞增的方式來實現(xiàn)。特殊情況下，按鈕懸停、點擊效果可根據(jù)視覺需要來特別設(shè)定。

? 圖標(biāo)：

在B端產(chǎn)品設(shè)計范圍中，圖標(biāo)在界面設(shè)計的諸多元素中往往只占了很小的比重，在調(diào)用時也會被縮到比設(shè)計稿小很多倍的尺寸，加上圖形素材極度豐富并且便于獲取，很多B端開發(fā)團(tuán)隊往往會忽視建立一套美觀、一致、易用、便于延展的圖標(biāo)體系的必要性。

圖標(biāo)設(shè)計是B端產(chǎn)品設(shè)計中非常容易被忽略的環(huán)節(jié)，建立優(yōu)秀的圖形體系也不是一、二個設(shè)計人員的事，需要整個團(tuán)隊在設(shè)計前、設(shè)計中以及設(shè)計后都能夠達(dá)成共識并且通力合作去完成共建。

至于圖標(biāo)設(shè)計方法，很多設(shè)計類網(wǎng)站都已提供了詳盡的學(xué)習(xí)教程，這里就不一一贅述了，對設(shè)計師有幾點建議如下：

? 干掉多余的節(jié)點，保持圖形的整潔。

? 合并圖形，便于輸出。?

? 對小數(shù)點以及奇數(shù)進(jìn)行最后一遍的走查與修正。

? 整潔的圖層管理。?

2.導(dǎo)航

在廣義上，任何告知用戶他在哪里，他能去什么地方以及如何到達(dá)那里的方式，都可以稱之為導(dǎo)航。

?頂部導(dǎo)航菜單：

頂部導(dǎo)航菜單的形式就是把超鏈接連成一行，信息內(nèi)容層級比較簡單明了，適用在瀏覽性強(qiáng)的門戶性質(zhì)以及比較前臺化的應(yīng)用。一級類目建議在 2-7 個以內(nèi)。標(biāo)題長度 4-15 個字符長度為好，中文字長 2-6 個。

?側(cè)邊導(dǎo)航菜單：

垂直導(dǎo)航較橫向的導(dǎo)航更靈活，易于向下擴(kuò)展， 且允許的標(biāo)簽長度較長。類目數(shù)量不限，可配合滾動條使用，適合信息層級多、操作切換頻率高的管理性質(zhì)的應(yīng)用。

?面包屑：

面包屑導(dǎo)航的作用是告訴用戶當(dāng)前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置以及父子級頁面間的關(guān)系。

注意事項：

1. 層級過深時，建議做隱藏處理，頁面顯示保持在三級以內(nèi)，最多不宜超過五級；

2. 盡可能不使用面包屑，尤其是當(dāng)前頁面的導(dǎo)航能清晰的告訴用戶他在哪里時。

?標(biāo)簽頁：

標(biāo)簽頁把大量信息進(jìn)行分類展示，用戶可以方便地切換標(biāo)簽，而不必跳轉(zhuǎn)頁面進(jìn)行比較瀏覽，可以在有限的顯示區(qū)域內(nèi)展示更多信息。分類可根據(jù)業(yè)務(wù)類別、業(yè)務(wù)狀態(tài)或者操作類型等并列關(guān)系來分，分類標(biāo)題長度為 2-6 個中文字。

?步驟條：

步驟條是引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條，可以幫助用戶對操作流程長度和步驟有個預(yù)期，并且知道自己當(dāng)前在哪個步驟，同時也可以對用戶的任務(wù)完成度有明確的度量。當(dāng)任務(wù)復(fù)雜或者存在先后關(guān)系時，將其分解成一系列步驟。

?分頁器：

當(dāng)有大量內(nèi)容需要展現(xiàn)時進(jìn)行分頁加載處理，分頁器可以讓用戶清楚的知道自己所要瀏覽的內(nèi)容有多少、已經(jīng)瀏覽了多少、還剩余多少。

3.數(shù)據(jù)錄入

? 文本錄入：

輸入框為用戶提供了編輯文本的控件，是錄入數(shù)據(jù)最基礎(chǔ)和常見的方式。

? 選擇錄入：

讓用戶在一個預(yù)定的范圍中進(jìn)行選擇。

?文件上傳：

上傳是將本地的相應(yīng)信息(包含本地和云儲存)通過網(wǎng)頁或者上傳工具發(fā)布到遠(yuǎn)程服務(wù)器上的過程。

4.數(shù)據(jù)展示

?表格：

表格被公認(rèn)為是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一。它常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同，適用于信息的收集和展示、數(shù)據(jù)的分析和歸納整理、以及操作結(jié)構(gòu)化數(shù)據(jù)。

?折疊面板：

折疊面板通過對信息的分組和收納，指引用戶遞進(jìn)式的獲取信息，使界面保持整潔的同時增加空間的有效利用率。

?卡片：

卡片是一種承載信息的容器，對可承載的內(nèi)容類型無過多限制，它讓一類信息集中化，增強(qiáng)區(qū)塊感的同時更易于操作；卡片通常以網(wǎng)格或矩陣的方式排列，傳達(dá)相互之間的層級關(guān)系。適合較為輕量級和個性化較強(qiáng)的信息區(qū)塊展示。

?走馬燈：

作為一組平級內(nèi)容的并列展示模式，常用于圖片或卡片輪播，可由用戶主動觸發(fā)或者系統(tǒng)自動輪播。適合用于官網(wǎng)首頁、產(chǎn)品介紹頁等展示型區(qū)塊。

?樹形控件：

『樹形控件』通過逐級大綱的形式來展現(xiàn)信息的層級關(guān)系，高效且具有極佳的視覺可視性，使得整體信息框架一目了然。

?時間軸：

垂直展示的時間流信息，一般按照時間倒敘記錄事件，追蹤用戶當(dāng)下以及過去做了什么。

5.反饋

?提示信息：

任何一個產(chǎn)品，即使用戶界面做的再好，也離不開用戶引導(dǎo)和信息提示。提示信息是用來告訴用戶需要知道什么、采取什么樣行動的內(nèi)容。

?過程反饋：

操作過程中盡可能將狀態(tài)的反饋給用戶，即時的響應(yīng)會給用戶增加信賴感。

?結(jié)果反饋：

操作過程中盡可能將狀態(tài)的反饋給用戶，即時的響應(yīng)會給用戶增加信賴感。

無規(guī)矩不成方圓，好設(shè)計往往都是在嚴(yán)謹(jǐn)?shù)?設(shè)計原則?約束下顯得很自然，幫助用戶輕松的完成目標(biāo)，以至于用戶根本意識不到好設(shè)計的存在。

1.親密性

?縱向間距關(guān)系：

通過『小號間距』、『中號間距』、『大號間距』這三種規(guī)格來劃分信息層次?？v向間距y=8+8*n。（n是自然數(shù)），8 是『基礎(chǔ)間距』。

?橫向間距關(guān)系：

為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。需要注意的是，在一個組件內(nèi)部，元素的橫向間距也應(yīng)該有所不同。

2.親密性

?文案類對齊：

如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點。

?表單類對齊：

冒號對齊（右對齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。

?數(shù)字類對齊：

為了快速對比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對齊。

3.對比

?主次關(guān)系對比：

為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷， 來突出其中一項相對更重要或者更高頻的操作。

?總分關(guān)系對比：

通過調(diào)整排版、字體、大小等方式來突出層次感，區(qū)分總分關(guān)系，使得頁面更具張力和節(jié)奏感。

?狀態(tài)關(guān)系對比：

通過改變顏色、增加輔助形狀等方法來實現(xiàn)狀態(tài)關(guān)系的對比，以便用戶更好的區(qū)分信息。常見類型有『靜態(tài)對比』、『動態(tài)對比』。

4.重復(fù)

重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計要素、設(shè)計風(fēng)格，某種格式、空間關(guān)系等。

5.直截了當(dāng)

正如 Alan Cooper 所言：『需要在哪里輸出，就要允許在哪里輸入』。這就是直接操作的原理。eg：不要為了編輯內(nèi)容而打開另一個頁面，應(yīng)該直接在上下文中實現(xiàn)編輯。

?頁內(nèi)編輯：

單字段行內(nèi)編輯。

?利用拖放：

只能限制在一個維度（上/下或者左/右）進(jìn)行拖放。

6.足不出戶

能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉(zhuǎn)都會引起變化盲視（Change Blindness），導(dǎo)致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉(zhuǎn)，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。

?覆蓋層：

二次確認(rèn)覆蓋層：避免濫用 Modal 進(jìn)行二次確認(rèn)，應(yīng)該勇敢的讓用戶去嘗試，給用戶機(jī)會『撤消』即可。

?嵌入層：

在列表中，顯示某條列表項的詳情信息，保持上下文不中斷。

?流程處理：

長期以來，Web 實現(xiàn)流程的方式就是把每個步驟放在一個單獨(dú)的頁面上。雖然這種做法是分解問題最簡單的方式，但并不是最佳解決方案。對于某些『流程處理』而言，讓用戶始終待在同一個頁面上則更有必要。

7.簡化交互

根據(jù)費(fèi)茨法則（Fitts's Law）所描述的，如果用戶鼠標(biāo)移動距離越少、對象相對目標(biāo)越大，那么用戶越容易操作。通過運(yùn)用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡化交互。

?實時可見工具：

如果某個操作非常重要，就應(yīng)該把它放在界面中，并實時可見。

?懸停即現(xiàn)工具：

如果某個操作非常重要，就應(yīng)該把它放在界面中，并實時可見。

?開關(guān)顯示工具：

如果某些操作只需要在特定模式時顯示，可以通過開關(guān)來實現(xiàn)。

?其他顯示工具：

如果操作不重要或者可以通過其他途徑完成時，可以將工具放置在用戶的操作流程中，減少界面元素，降低認(rèn)知負(fù)擔(dān)，給用戶小驚喜。

8.提供邀請

邀請就是引導(dǎo)用戶進(jìn)入下一個交互層次的提醒和暗示，通常包括意符（eg：實時的提示信息）和可供性，以表明在下一個界面可以做什么。

?靜態(tài)邀請：

指通過可視化技術(shù)在頁面上提供引導(dǎo)交互的邀請。

?動態(tài)邀請：

指以響應(yīng)用戶在特定位置執(zhí)行特定操作的方式，提供特定的邀請。

9.巧用過渡

在界面中，適當(dāng)?shù)募尤胍恍┻^渡效果，能讓界面保持生動，同時也能增強(qiáng)用戶和界面的溝通。

10.即時反應(yīng)

用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個對應(yīng)的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。雖然反饋太多（準(zhǔn)確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統(tǒng)，則讓人感覺遲鈍和笨拙，用戶體驗更差。

?查詢模式：

用戶輸入時，下拉列表會隨著輸入的關(guān)鍵詞顯示匹配項。 根據(jù)查詢結(jié)果分類的多少，可以分為『確定類目』、『不確定類目』兩種類型。

?反饋模式：

在用戶提交輸入之前，讓他先行了解系統(tǒng)將如何處理他的輸入。

在B端產(chǎn)品設(shè)計過程中，形成屬于一套科學(xué)規(guī)范的設(shè)計模式很重要，能大幅度提升研發(fā)團(tuán)隊的確定性，節(jié)約無謂的設(shè)計且保持系統(tǒng)一致性，讓『設(shè)計者』把創(chuàng)造力專注在最需要的地方。

?設(shè)計方面：

完整的設(shè)計模式將會包含示例、模板、組件（ETC）三大實體部分，以及通用概念這樣的黏合劑：

功能范例：?由多張模板構(gòu)成，啟發(fā)用戶如何使用和搭建出一個常見功能。

模板：?頁面級示例，啟發(fā)用戶如何通過組件搭建出系統(tǒng)中的典型頁面，如：詳情頁。

組件。

基礎(chǔ)組件：構(gòu)成系統(tǒng)最基礎(chǔ)的元素，如按鈕、分頁器。

業(yè)務(wù)組件/模塊：區(qū)塊級示例，一般由多個組件構(gòu)成，如 PageHeader 通用頁頭。

通用概念：?一些保證 ETC 體系化的約定，如：布局、色彩、字體、文案。

?開發(fā)方面：

完整的設(shè)計模式還可以幫助開發(fā)者快速實現(xiàn)布局空間的設(shè)計決策，保障視覺稿的上線效果，同時也能簡化設(shè)計到開發(fā)的溝通損耗（沒有規(guī)范的溝通體驗過的都知道）。

本文整理匯總了包括基礎(chǔ)概念，產(chǎn)品類型，頁面布局，組件介紹，設(shè)計法則，等等一些列的B端產(chǎn)品設(shè)計規(guī)范，在此期間查閱了很多相關(guān)的資料，希望為從事B端設(shè)計的設(shè)計師們提供及時的幫助～相對于C端行業(yè)的趨近飽和，B端行業(yè)正處于快速發(fā)展的階段，放眼未來，投身B端設(shè)計未嘗不是一個明智的選擇，感興趣的小伙伴可以多多交流～