轉自：站酷-姚成浩

左右布局響應策略動態演示?？紤]到gif被壓縮后效果不理想，所以做了一小段視頻來幫助大家更好的理解響應策略。視頻如果看著不清晰，選擇清晰度為1080p藍光觀看即可

一、什么是響應式？

按照本人自己的理解，響應式就是通過合理的設計方案配合規范的技術實現策略，使同一個Web頁面在各個終端（設備）不同分辨率屏幕上都能有最佳的用戶體驗。

這里說是用戶體驗而不是視覺效果是因為用戶體驗包含了性能、交互、效率等多方面內容，也就是說，對于一個線上的響應式頁面，我們不僅要關注視覺上看到的，也要關注我們操作、使用時的感受，這些綜合因素最終影響著用戶使用后臺系統時的效率與體驗。而這里我提到的“合理的設計方案”就是本篇文章跟大家分享的重點：如何利用柵格系統完成后臺頁面的響應式設計。對于交互與性能方面內容，本篇文章不做介紹，因為兩者涉及到我不太了解的技術相關知識。我提出這個觀點主要希望大家在執行設計時，能有更全局的考慮，多跟交互與開發溝通，協力打造更好的用戶體驗

三、響應式的目的是什么?

后臺系統做響應式設計的目的：提高屏幕利用率，最大化操作效率

1、提高屏幕利用率最簡單的理解就是在大屏幕上顯示更多內容，在小屏幕上通過數據篩選展示關鍵信息。一直以來大家普遍認為移動端碎片化嚴重，但實際上桌面端設備的分辨率也是有著不太均勻的分布，而隨著新設備的更新，更多高分辨率屏幕不斷加入，這種碎片化的趨勢會更加明顯，因而要想利用好每一塊屏幕，讓不同分辨率的用戶都有好的體驗，顯然傳統固定的布局是做不到了。

2、后臺系統的應用特性，決定了響應式在后臺設計中具有很高的實用價值。后臺系統有兩大主要功能：查看與操作。查看主要是各種數據，是系統自動生成的內容；操作是需人工干預、人工決策的任務，查看的數據為操作提供了依據，而操作支撐了公司或部門業務的正常運行。所以后臺系統設計最基礎的目標之一是如何通過良好的數據展示幫助用戶提高操作、決策效率，而充足的展示空間顯然是實現這一目標的基礎，響應式設計通過為每個分辨率設定合理的版式布局，使數據在每塊屏幕上都盡可能展示的最佳。優化后的數據展示，幫助用戶更獲取信息，從而提高了用戶使用后臺系統的效率與體驗。

四、為何要利用柵格系統來進行響應式設計

響應式可以響應的前提有兩點：1、頁面布局具有規律性、2、元素寬高可用百分比代替固定數值，而這兩點正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式的設計是順理成章的，也比較快捷，所以響應式與柵格化天生一對好搭檔

柵格系統頁面布局具有規律性、元素寬高可用百分比表示

五、利用柵格系統完成后臺頁面響應式設計的步驟

1、確立設計稿基準尺寸

設計稿基準尺寸是指我們從哪一個分辨率開始設計，也就是我們新建畫板時畫板的尺寸應該是多大。而這個尺寸確定的主要依據是我們后臺系統所面向的主要用戶的屏幕分辨率；我們分兩大類情況來討論這個問題。

（1）、如果我們的系統是給公司內部員工使用，由于公司批量采購設備的原因，公司內部員工的屏幕分辨率往往會比較統一，這種情況下我們需要拿到這個數據，然后以它作為基準尺寸開始設計。因為雖然響應式設計的目標是讓頁面在每個分辨率下都有最佳的體驗，但實際開發中畢竟存在損壞，設計還原很難100%，因而大多數情況下還是基于基準尺寸的設計與開發，在用戶端顯示效果最佳、體驗最好

。

（2）、如果我們的系統是平臺級面向全網用戶，或者雖然是公司內部使用，但是并不能統計到內部員工屏幕分辨率情況，就可以以1440*900作為基準尺寸開始設計。從統計數據來看，目前國內PC端用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900；1440的尺寸實際上是處于中間位置，如果以它為基準設計，最終向上向下響應適配后，相對誤差最小，從而達成用戶體驗的最大公約數。

2、確定頁面布局結構

頁面的布局結構，是頁面基本框架，后續的設計都是在這個大的框架下完成的，所以確定頁面基準設計尺寸后，需要跟交互設計師或產品經理配合，根據實際業務情況討論確定頁面布局結構。一般來講，后臺系統有兩種最典型的頁面布局結構：左右布局與上下布局（這兩種布局是最典型也是最基礎的布局形式，其余布局，下期內容講）

上下布局

上下布局的結構在傳統網頁中非常常見，而在后臺系統中并不常用。這種布局的優點是符合用戶認知，遵循用戶從上而下瀏覽頁面獲取信息的習慣；貫穿全屏的導航欄設計也使頁面顯得正式穩重，除卻導航欄之后相對較大的空間也為內容展示提供了比較充足的空間。缺點是頂部一級導航受頁面寬度限制，數量會比較局限，同時導航層級較深時，交互效率也不夠理想。所以該布局適合那些導航層級較少，內容展示充分的后臺系統設計

左右布局

擁有側邊導航的左右布局頁面結構，是在后臺系統中更常見的頁面布局形式。側邊導航欄可以固定也可以收起，相對比較靈活，同時文字橫向排列的形式可以在豎向上展示更多內容，因此側邊導航比頂部導航能容納更多一級內容，而層疊式的內容展示也使得一、二、三級導航內容關聯更為順暢，可擴展性也得到加強；由于側邊欄可以常駐在頁面左側，所以對于右側內容的指示性也優于頂部導航，切換起來也更加方便。但同時，因為側邊欄的常駐，導致右側內容區域空間被擠掉部分，所以相對上下布局的結構，左右布局的結構，內容區域空間會比較小；一般為了與頁面其它區域做區分，導航部分會用更深的顏色、安排更多的圖標和文字，這也導致了在視覺上左右布局的頁面不夠平衡，會有左邊重右邊輕的感覺。

3、對內容區域建立柵格系統

根據不同的布局類型，對頁面內容區域建立柵格系統。對于一個利用柵格系統做響應式設計的頁面來講，主要有三大數值需要規范：Column、Gutter、Margin；對于Column、Gutter我們在上一期內容中已經有很詳細的介紹，不再贅述，而Margin是頁邊距，主要確定了內容區域距離頁面邊緣的距離，它分布在內容區域的兩側，主要作用是通過留白把內容區域與周圍環境隔離出來，從而突出內容區域的顯示，此外還可通過Margin值來調整內容區域顯示比例，使頁面在視覺上有更好的呈現效果。所以一個用于響應式的柵格系統事實上由Columns、Gutters、Margins三部分組成。

上下布局結構與其對應的柵格系統

左右布局結構與其對應的柵格系統

4、根據實際業務內容確定盒子（Box）比例

上下布局結構的盒子

左右布局結構的盒子

5、確定響應策略

響應策略就是當視窗（Viewport）發生變化時，內容區域的元素如何去響應，具體到我們當前的柵格系統，就是Columns、Gutters、Margins以及由Columns跟Gutter組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調整。

為了方便直觀的向開發工程師與團隊里的其它小伙伴溝通，我們可以把這個響應策略制作成如下的表格，并在頁面中標注說明相關元素的變化規律，供自己與開發參考。

由于帶左側導航的響應式規則相對復雜，所以我先以它為例跟大家交流下響應策略如何制定

左右布局響應策略表

如圖，響應式是以視窗的最小寬度作為基本依據來制定每種寬度下Columns、Gutters、與Margins的響應策略，也就是說Viewport Min-width是做出響應的觸發條件，視窗每達到一個最小寬度，就會觸發該寬度下預設的頁面布局方式，而每種布局都是在該寬度下的最佳布局，也是因此，響應式才會在各種復雜分辨率條件下都能給用戶比較好的體驗。

每個視窗寬度的最小值是觸發響應的關鍵值，因此我們給這些用于觸發的關鍵值起了個名字叫“Breakpoint”，每個Breakpoint觸發一種響應策略，而每個策略持續（保持）的寬度范圍就是圖中綠色矩形的范圍。以圖中第二行矩形為例，該矩形代表的響應策略是：欄目數是8、水槽寬度16（SM）、頁邊距32、側邊欄收起且僅展示圖標，當點擊側邊欄展開圖標時側邊欄以Push的方式展開,該策略觸發的Breakpoint是768，保持范圍是577~768。也就是當視窗寬度縮放至768時，欄目數量由上一級的12變為8，水槽寬度由24變為16，側邊導航由完全展開狀態自動收起文字部分，僅保留圖標，然后保持這些關鍵數值不變，直到視窗寬度達到另一個Breakpoint。需要特殊說明的是，第一行矩形中0~576（Min&Fixed）這個范圍的視窗寬度是固定的，也就是在該套響應策略中，頁面最小響應到576的頁面寬度，當視窗到達這個寬度時，瀏覽器會限制視窗進一步縮小，因為當頁面寬度比它還小時已經無法有效展示數據了，所以進一步的縮放是毫無意義的。

左右布局響應策略動態演示

考慮到gif被壓縮后顯示效果不理想，所以我做了一小段視頻來幫助大家更好的理解上述響應策略在實際頁面中如何發揮作用。視頻如果看著不清晰，選擇清晰度為1080p藍光觀看即可

左右布局響應策略標注

對于上下布局的后臺系統我們根據內容區域（Container）寬度定義的不同方式，可以把它們分為兩類：

1、內容區域定寬的后臺系統（ Fixed-width Container ）

內容區域定寬是指內容區域在每一組視窗寬度區間內，都會設定一個最大值（Max-with），當內容區域寬度小于最大值時，區域內元素會響應視窗的變化；達到最大值后，內容區域不再響應視窗的變化，而是寬度保持該最大寬度值不變，此時我們通過增加頁面兩側的margin值來響應視窗的變化。Flex Margin就是應對此情況的動態頁邊距。

 上下布局響應策略表（內容區域定寬（ Fixed-width Container ））

2、內容區域寬度流式 (fluid-width Container) 

內容區域寬度流式 (fluid-width Container) 的后臺系統，它的內容區域 (Container) 距離頁面兩側的頁邊距Margin是定值，因此視窗有多大內容區域就展示多大。

Q&A

1、后臺系統必須做成響應式么？

并不是必須的，是否要做響應式主要是根據后臺產品面向的用戶來定的。如果是公司內部使用的系統，且員工配備的桌面設備都是有統一的分辨率，就可以不做響應式；如果是面向全網用戶的后臺產品（比如淘寶商家的后臺管理系統，阿里云的控制臺）或公司（部門）內部的桌面設備并沒有統一的分辨率規格，那么就需要做成響應式。當然了，更實際的環境中是否做響應式還有技術實現、時間、人員成本等各方面因素的考慮，有時為了盡快的讓業務運營起來，后臺系統會做的比較“簡陋”

2、為什么柵格系統沒有適配到移動端的分享？

因為后臺管理系統的使用場景主要是工作時間在桌面設備上使用，由于龐雜的數據內容在移動設備上展示困難、操作不便，因而很少有公司會把后臺系統響應到移動端使用，所以我們今天說的后臺響應式僅針對桌面設備屏幕。

3、對于iMac4k、5K這類超高分辨率的屏幕如何做響應式設計？

對于左右布局的后臺系統，實際上它是全屏展示的，也就是屏幕有多大就展示多大，因而iMac的響應策略也是按照左右布局響應策略表里的策略來響應對于上下布局，內容區域定寬的后臺系統，iMac的響應策略使用上下布局響應策略表里的策略來響應即可；

對于內容區域寬度流式的后臺系統，iMac的響應策略可以參考左右布局的響應策略表來處理欄目、水槽的變化，頁邊距保持定值即可。

4、在以8為原子單位的柵格中，Margin需要按8n的規律變化么？

能以8n的規律變化是最好的，如果無法做到也可以使用其它數值。Margin是頁邊距，主要作用是通過留白的方式將頁面內容區域與周圍環境隔離區分出來，從而突出內容；一般我們會優先考慮內容區域匹配8n的變化規律，安排完內容區域后剩余的空間自然成為頁邊距（margin）

5、響應策略制定的時機是什么？如何去制定？文中示例的策略表我可以借鑒套用么？

響應策略表一般是在主要頁面設計完成，要交付開發實現的時候來跟開發一起商定。這塊需要注意兩點：

1、如果開始設計時就已確定頁面是要具備響應式的能力，那么最好開始設計時就去跟開發溝通，看他們現有技術是如何來做響應式的，因為他們很有可能是在用Bootstrap、Foundation這類組件庫來做開發，而這些組件庫一般都有自己現成的響應規則，這種情況下我們需要了解開發他們的規則，讓自己的設計匹配已有的策略。當然了，如果他們的規則并不能很好滿足我們的業務需要，一般也是可以在這些組件的基礎上讓開發去修改調整的。

2、響應策略表只是對響應方式的結果的呈現，而這個策略的制定事實上是從設計開始執行時就要去考慮的，從我個人經驗來講，我一般會挑兩類頁面來做響應策略的研究與適配，一個是控制臺（Dashboard）頁面，另一個是表單（Form）頁面。優先規劃這兩個頁面的設計，考慮他們在各個Viewport下如何布局如何展示如何縮放變化，并且跟開發溝通想法，聽取意見，制定初步的響應計劃，當這兩個頁面設計完成，就可以更大范圍的執行設計。

3、文中示例的策略表是基于我自己項目經驗總結而來，具有實際應用價值，可以借鑒。但我更想做的是通過那個表希望跟大家分享一種與開發交流、溝通的方法和技巧。實際工作中我們并非一定要做出那么一個經過精心設計細致考慮的表，我們可能會找張紙畫一畫給開發看就可以了，這塊的重點是如何把我們設計師的想法更可視化更直觀準確的傳達給開發工程師。所以那張表是啟發而非標準。

控制臺（Dashboard）頁面示例（素材圖片作者：Coderthemes）

表單(Form)頁面示例

關于柵格系統文章不少，但鮮有專門針對柵格系統在后臺設計中相關應用的介紹。本文拋磚引玉，希望引起更多同行的交流與討論

柵格系統的目的

柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；柵格化提高了頁面布局的一致性跟復用性；避免了設計師與開發者在細節上的反復溝通確認，從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。

但實際應用中，由于對柵格系統理解的不充分，很多設計師在應用柵格系統的實踐中產生了各種問題，本來幫助設計的工具現在反而成了設計中需要解決的問題。結合我自己后臺設計的經驗，本篇文章跟大家聊聊柵格系統在后臺設計中如何應用。

建立柵格系統的方法與規則

1、第一步：確立柵格系統的原子單位（網格）

如圖，一個比較完整的柵格系統是由許多規格一致的小網格組成，這些網格輔助我們更規范的排版、布局。

后臺系統設計中，由于后臺頁面主要以Web形式呈現，而對于web，用戶已習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此，在不考慮內容優先級的情況下，Web可以實現豎直方向的“無限”加載，即豎直方向可以無限延伸，因此基于Web的后臺頁面，它的柵格系統在水平方向的柵格可以不體現出來，我們在執行設計時只要在豎直方向保持規律的變化就可以了。標準的柵格系統簡化為適用于Web后臺的設計如下圖所示

如上圖，對于后臺設計來講，柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，欄目（Column）是接納網頁內容的容器，水槽（Gutter）用來調節相鄰兩個欄目間距，把控頁面留白；由于欄目跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的第一步需要先定義好柵格的原子單位“網格”的大小。根據本人的設計實踐以及其它已有規范經驗，目前后臺柵格系統網格大小定義為8是最普適易用的。具體原因有以下幾點：

（1）目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被8整除，使用8作為最小原子足夠普適.

我們選取4、6、8、10、12為柵格的候選原子單位，然后用目前主流屏幕分辨率與其相除，判斷各個分辨率在豎直（Y）與水平 (X)方向能否被候選原子整除，統計結果如圖。

顯然，對于目前市場桌面設備屏幕而言，4是整除率最高的一個原子，接下來依次是8、10、6、12。但4作為基本原子實在過于小了，太小的步進單位將導致我們決策成本的增加，因為我們將元素間間距增加4px或者減小4px視覺感受到的差異并不明顯，這種情況下我們為了找到那個“合適、滿意”的間距，就需要反復調試，這就造成了時間上的浪費，尤其對于沒有經驗的新人，這點會更為突出。但這種調整并不合適，原因是后臺管理系統設計重點在于面向用戶使用的效率與邏輯，其次才是視覺呈現，使用柵格系統的目的之一也是想減少設計師在“細節”上的糾結，希望設計師站在更全局的角度看待設計，合理安排時間，因此我們舍棄4。在剩下的6、8、10、12四個單位中，8的整除率最高（80%），以8像素作為一個步進單位的變化，我們視覺上也是能感受到較為明顯的差異，因此選取整除率最高的8做為柵格系統的原子單位。

（2）以8為單位符合“偶數原則”。偶數原則可以在頁面縮放中的避免類似于0.5、0.75、1.25等次像素的出現，從而使頁面各類元素在大多數場景下都能有比較精致的細節表現

雖然對于后臺設計而言，通常設計師是直接在目標尺寸下進行設計，并在此基礎上標注、切圖給開發實現，并不存在像移動端那樣需要對各種尺寸、各種像素密度的設備進行適配的情況，但對于Web頁面來講，仍存在向上向下適配的可能，因而從頁面的兼容性、可擴展性及可維護性層面來講，我們設計師還是有必要考慮的更加長遠，遵循“偶數原則”可以上避免各種潛在的問題。

（3）開發工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基于8的原子單位來設計，因此如果設計師也使用以8為基本單位的柵格系統，開發與設計師相互對接就會更加方便，開發實現頁面時也能更高品質的去還原我們設計師的稿件

2、第二步：建立基于原子單位的柵格系統

經過第一步討論，我們現已確定后臺設計的原子單位為8，而我們也知道柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度。

通常，在一套后臺設計系統中，水槽寬度會是幾個比較固定的數值（因為后臺系統的頁面相對于其它類型的Web頁面，表現的更加整齊、規律，所以留白的方式比較固定，加之后臺往往有大量的數據、內容需要呈現，所以要盡可能提高頁面利用率，可以留白的空間也比較有限）；而欄目寬度更加靈活，它可以根據頁面水平方向尺寸的改變而增大或減小以響應頁面的變化（遵循8n的變化規律，此處變化規律在下期文章《柵格化與響應式》里會詳細介紹）。

當我們做后臺設計的時候首先需要確定在什么樣的分辨率下做設計，也就是首先需要確定設計稿的尺寸，當設計稿尺寸確定后，便可建立基于該尺寸的柵格系統。假設頁面內容區域寬度為W，欄目個數為A，水槽個數為B，欄目（Column）寬度為C，水槽（Gutter）寬度為G，則W=A*C+B*G。柵格系統建立初期，由于我們并不確定之后會有什么樣的內容呈現我們的頁面上，所以為了讓柵格更加靈活、普適，我們先假定單個欄目與水槽的寬度是相同的，即C=8n（n=1、2、3、4...）=G，然后以此將頁面內容區域等分，形成初步的柵格，之后再按實際內容需要，按比例調整兩者寬度或者按比例對兩者進行組合，形成承載業務內容的盒子。目前有兩種比較主流的等分方式：12等分與24等分。

12等分的柵格系統在流行的前端開發開源工具庫Bootstrap與Foundation中廣泛使用，適用于業務信息分組較少，單個盒子內信息體積較大的中后臺頁面設計；

24等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對12柵格系統，24柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。

柵格系統的應用

1、頁面布局與版式設計

（1）、了解承載業務內容的盒子模型（Box Model）

建立好柵格系統后，就可以根據自己的實際業務，在柵格系統上安排內容了。頁面上最終承載內容的其實是一個個“盒子（Box）”,這個盒子的高度由盒子要容納的內容與頁面版式設計決定，按8n規律變化；寬度則由欄目與水槽按比例組合得到。

在柵格系統上容納業務內容的容器我們把它稱之為盒子（Box），柵格系統上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。如圖所示，當我們瀏覽任何一個網頁時，右鍵>檢查元素（審查元素），然后在style菜單下就可以看到這個盒子結構了。其中Padding就是主體內容（Element）距離盒子外側的距離，我把它稱之為內邊距，（Element可以是一個按鈕，一段文本、一張圖片或者一個表格等；）而Margin就是相鄰兩個盒子間的距離，對應在后臺柵格系統中其實就是水槽的大小。了解完柵格系統的盒子模型之后，下一步我們需要根據具體業務內容來確定盒子的寬度，也就是如何利用柵格系統做實際內容的布局與版式設計

（2）、根據業務內容分配頁面比例，確定盒子寬度

以24柵格系統為例，一個24柵格系統可以根據業務需要被2等分、3等分、4等分、6等分、8等分、12等分，還可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不對稱分割，具體采用哪種比例的組合需要我們根據自己業務需求來定，我們此處所說的比例實際上就是盒子的寬度。

上圖展示了盒子在24柵格系統上的分布情況，圖中只列舉了部分比例，實際業務中，同一個頁面上使用一到兩組比例值的組合來布局是比較合適的（如下圖），組合形式過多頁面就會顯得瑣碎、雜亂，不利于閱讀和使用。因為盒子的高度根據內容來定，故下圖中沒有體現高度這一維度的變化規律。

當我們完成上圖規劃后，需要做的便是根據實際內容往每個盒子里安排內容，做視覺與交互的落地了。

2、元素對齊與間距設定

柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局，而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與布局，然后再填充內容、調整細節。

柵格系統輔助對齊的作用類似于各種設計軟件中的參考線，它能讓我們更直觀的安排、調整內容的位置及對齊方式，可以使內容變得規律、有序，方便用戶瀏覽閱讀，幫助用戶提高獲取信息的效率。

柵格系統對于元素間間距設定的幫助是直觀的，當我們定義了柵格原子單位為8時，這意味頁面上各元素間距的變化也應遵循8n的規律，一致的變化規律讓頁面富有節奏感跟韻律感，在提高頁面一致性的同時也減少了設計決策成本。我們知道，柵格系統中水槽與欄目的變化也遵循8n的變化規律，此處n為大于0的正整數，即n=1、2、3...；但是用于規范元素間距的8n，n可以是0.5、1.5這類包含二分之一8的情況，原因是實際工作中，我們面臨的情況是復雜的，這樣處理可以讓間距的設定適應一些特殊的場景，從而使其更靈活普適。

注意事項

1、水槽寬度的設定

確定好內容模塊比例后，我們會發現由于之前等分的緣故，此時水槽較寬，我們需要調整水槽寬度到一個合適的值。

水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設計決策成本，我們會事先設定好一系列水槽寬度，并定義好每個寬度對應的使用場景，然后設計中根據每個場景使用對應數值就可以了。我定義了一組水槽的值是8、16、 24、32 、40，為了區分它們的使用場景我們依次為其命名為XS、SM、MD、LG、XL。根據實踐經驗，正常情況下，兩個盒子間距（水槽）的值為24（MD）時，視覺上是最為舒適。

柵格化工具推薦（插件請在附件中下載）

Ps柵格系統工具

1、PS自帶柵格系統設定：新建參考線版面（重點推薦）

Ps有個功能叫做“新建參考線版面”，打開這個面板后，在預設這里可以看到Ps已經預設了8列、12列、16列、24列的柵格系統，選擇對應列數就可以看到頁面上參考線的變化。預設中“裝訂線”的寬度即柵格系統中水槽的寬度。默認均為20px,我們可以根據之前討論的8的倍數原則，將其手動更改為24；

如果預設的柵格系統無法滿足我們工作需要，我們也可以自定義柵格系統，并能將柵格參數保存為預設，這樣就可以重復利用自定義的柵格系統了；柵格系統還可以選擇將其應用在當前畫板或者所有畫板，十分方便易用。由于是Ps自帶的參考線，所以它可以通過快捷鍵靈活的控制顯示或隱藏

2、利用Ps標注工具Assistor Ps 進行柵格系統的建立

Assistor Ps在之前主要是一款頁面標注工具，但是隨著藍湖等自動標注工具的流行，這個小軟件基本沒人用了，但我發現它設置參考線的功能還是很強大的，可以媲美大名鼎鼎的guideguid（這款插件目前對Ps cc 2017及以上版本貌似已經不支持，軟件本身安裝也挺麻煩），所以就介紹給大家。（安裝包在文末下載，Win&Mac，解壓后跟常規裝軟件一樣，正常安裝就行）。但是這個插件由于很多數值都要自己算，實際上沒有Ps自帶的新建參考線面板的功能好用。算是一個工具的補充吧

Sketch柵格系統工具

1、Sketch自帶柵格系統設定：Layout Settings

Sketch端利用sketch自帶的柵格工具Layout Settings即可完成柵格系統的設置，由于sketch的柵格工具是自帶的，與Ps類似，它也可以通過快捷鍵快速顯示或隱藏，點擊左下角“Make Default”還可以將自定義的柵格系統設置為默認的柵格系統，方便以后重復調用，但sketch貌似只能儲存一組柵格系統的數值，而Ps可以儲存多組。

2、Sketch柵格系統插件：BootstrapGrid-maste

BootstrapGrid是一個專門用于建立柵格系統的插件（插件在文末附件中下載），插件可以對柵格系統的基本數據做個性化的設定，可以對多個形狀同時建立柵格系統，還可以通過快捷鍵快速調用。具體用法：先選中要建立柵格的畫板或者畫板里的形狀（可以多選），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）

柵格系統參數設計

單個形狀（畫板）建立柵格系統動圖演示

多個形狀（畫板）建立柵格系統動圖演示

跨平臺的web端柵格工具 http://grid.guide/

GridGuide 最大優點是可以針對一種柵格系統生成4組不同水槽寬度的柵格化方案，能比較直觀的比較不同水槽寬度下各個柵格系統的視覺感受。使用方法：在右上角設置好頁面寬度以及欄目數量，頁面內就會自動生成可以下載為png圖片的柵格。

QAQ(常見問題解答）

（1）當柵格系統中奇數不可避免的出現時，如何處理?

理想狀態下，我們應該調整內容區域的大小，使其盡可能成為可以被8整除的尺寸，但實際應用中，有時會出現無法整除的情況?；趯凶幽Ｐ偷睦斫猓藭r我們保持padding、margin的值不變，改變盒子的大小去適應奇數的頁面（元素）即可,因為一致性跟效率才是柵格化要達成的首要目的，偶爾有一些不“完美”的尺寸是完全允許的，因為用戶在實際使用頁面時，并不能看到我們使用的柵格系統，也很難注意到那幾像素的變化，他們能感受到的是頁面整體呈現出來的節奏與韻律感，以及持續、一致的視覺語言帶給他們的嚴謹、可靠的心里感受。

（2）柵格系統必須以8作為原子單位？使用其它數值是否可以

首先需要指出的是使用其它數值當然也可以，柵格系統只是手段，提升設計效率、減少溝通成本、提高頁面一致性才是最終目的，所以如果你所在團隊有其它柵格化習慣，且一直以來效果良好，那么繼續使用它也是沒問題的。但是對于設計新人來講，如果能理解前人的經驗，并能較好的運用，對于他們來講，是會少一些彎路，更好的完成設計工作。

（3）柵格系統建立初期是否必須使欄目寬度與水槽寬相等，并等分內容區域？

建立柵格系統時并不是必須使欄目寬度與水槽寬相等，并等分內容區域。本篇文章介紹柵格系統時采用這種處理方式是為了讓大家更好的理解柵格系統建立的原理與過程，事實上，欄目的寬度在實際應用中往往大于水槽寬度，我們通常會先計劃好水槽的寬度、內容區域總寬度與欄目的數量，這時候欄目的寬度通過計算可得到，對于響應式頁面，欄目的寬度可以是百分比而不是具體的數值（關于響應式的內容下期文章跟大家分享）。

轉自UI中國-BYMD

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

心理學在我們生活中涉及的面很廣，是每個行業都要了解的，對于設計師來說，更要了解用戶的心理，因為我們的設計是面向用戶的 

作為UI設計師，我相信大家都是專注于界面設計的好不好看，至于界面與界面之間如何交互，點擊之后如何反饋，是一個比較容易被忽略的重要環節。

那么我們怎么處理好界面交互中的加載設計，減少用戶因等待產生的焦慮情緒，保證整個體驗無縫銜接，今天這篇文章就來總結下APP中數據加載模式設計。

一、為什么要加載？

1、用戶在進行某些操作時，都要從后臺請求數據，這個過程都需要時間，系統應該始終在合理的時間內做出適當的反饋，讓用戶了解正在發生的事情，讓用戶知道此時的操作是有反應，減緩用戶因等待而產生的焦慮感。同時加載方式也可以做的有趣，吸引用戶注意力，增加沉浸式體驗，讓用戶輕松自在的享受等待；

2、體驗無縫銜接，減少用戶跳失，正常的等待加載時間是0.3秒以內，同時不同場景對應有不同的加載方式。

二、常見的加載場景及方式

a.加載場景：

不同場景有不同的加載方式，常見的加載場景一般有以下幾種：下拉刷新、上拉加載、切換新頁面的數據加載、頁面局部模塊的加載、啟動頁加載、操作按鈕加載。實際工作中，要根據不同的場景搭配不同的加載樣式，才能更好的做到緩解用戶等待焦慮，降低用戶的跳失率。

b.加載方式：

1、全屏加載

主要出現在手機H5頁面，例如微信的文章詳情頁。一般會有進度條或有趣的動畫設計，減輕用戶等待時的焦慮感。加載失敗后，頁面通常為空白頁，且有重新刷新操作按鈕。

優點：將整個頁面的內容都加載出來才展現給用戶，能保證內容的整體性，全部加載完才能夠系統化的閱讀。

缺點：一般等待的時間較長，容易產生焦躁情緒，尤其是遇到網絡不好的情況

2、下拉刷新加載

主要出現在頁面內容為推薦類、或者信息更新頻次高的產品，通過刷新加載新數據，加載的loading樣式可以結合產品logo或IP形象進行設計，增加趣味性，吸引用戶注意力。

3.占位圖加載

如果頁面布局樣式比較固定，可以采用占位圖加載機制，先加載頁面布局和占位圖，先給用戶展示頁面框架，后加載頁面圖片細節部分，這種加載方式相對于直接展示白屏來說，呈現給用戶無縫銜接的感覺，體驗更加流暢。

4.分布加載

當頁面中有文字和圖片時，優先加載占網絡資源較小的元素，如先加載文字，后加載圖片，圖片加載完成前使用占位符顯示，保證用戶可以順暢閱讀，縮短用戶的等待時間，提高產品體驗。

優點：可以幫助用戶快速閱讀內容，了解信息。

這種加載形式更加適用于內容閱讀型的APP或圖片、視頻類資源比較多的頁面。

5.自動加載（懶加載）

當瀏覽信息時，不停的向上滑動，新的內容會不停的從底部出現，這種方式稱為自動加載。對于自動加載，要注意每次加載多少條內容，或者多少屏的內容。一般會在距下面內容一定距離時開始加載，當網速非?？斓臅r候，用戶并不能感知懶加載的動作，這樣可以營造一種無極限瀏覽的錯覺，很容易的把用戶吸引住。

優點：無需用戶操作，自動加載后續內容，營造沉浸式體驗。

應用：適合feed流、瀑布流、算法推薦類的內容。

6.預加載

提前加載好頁面信息內容，這樣當網絡不好的時候，可直接從本地緩存中渲染，就不用再加載了。

比如用戶在看A頁面的時候，App在后臺加載完B頁，等用戶打開B頁的時候就不需要等待加載了，因為App已經幫用戶提前加載好了，給用戶提供無縫鏈接的感覺，弊端就是服務器壓力很大，就是要預測用戶行為，加載其他數據，這樣會消耗不少流量，所以建議在WiFi網絡環境下采取這種預加載機制，而在蜂窩網絡狀態下則不采用預加載機制。

7.漸進式加載

一般出現在圖片類產品，比如pinterest、unsplash等，當瀏覽圖片的時候，經常是先看到一張模糊圖或與圖片較為相似的色彩值圖片，然后再漸漸的變得清晰，這種效果就叫做漸進式加載。漸進式加載能夠大大的提升體驗感。

8.后臺加載(異步處理)

用戶在前端執行操作后，客戶端立即給予操作成功反饋提示，然后把請求放到后臺與服務器交互，這一過程用戶是看不到的，也不需要等待，體驗是非常棒的。

例如在用微信發朋友圈時，會覺得特別流暢，即使在網絡不好的情況下，會看到你的動態立即展示在朋友圈列表，并不會提示你網絡不好，操作失敗，全部以操作成功來顯示，其實它只是將你發布的操作記錄了下來，等網絡一好就將動態上傳到服務器，從而完成發布行為，微信的點贊也是同樣的操作，你給好友點了贊，并不會提示你網絡不好，操作失敗，而是提示你點贊成功了，其實它只是將你點贊的操作記錄了下來，等網絡一好就將點贊的行為上傳到服務器，從而完成點贊行為會，給用戶帶來體驗流暢的感覺。

所以這種加載方式是需要根據具體使用場景來權衡使用的，對于一些重要的操作，建議還是使用模態的方式加載，對于一些小操作，如點贊、訂閱、關注，可采用后臺加載的方式。

9.模態加載

以上幾種方式都是采用非模態加載，不會對用戶造成干擾，用戶可以做別的事情，不需要等待加載完成，大大降低了等待的焦躁感。

模態加載對用戶干擾比較大，需要中斷用戶的其他操作，用戶只能等待加載結束，因為如果用戶執行了其他操作就會打斷正在進行的加載過程，實現不了用戶的目標。

應用：用戶執行的操作本身不能和其他操作同時進行，例如登錄，退出，應用啟動，手機支付等場景。

三、具體實施方法小結

1、能用非模態加載的盡量不要去用模態加載，如果非得用模態加載，也盡量給一個能取消的按鈕，方便用戶在不愿意等待的情況下取消操作。

2、如果加載的時間比較長，最好能告知用戶加載進度，讓用戶心理有個預期，這樣用戶更愿意等待，不會因為等待產生焦慮感，分分鐘卸載你的產品?？茖W的實驗證實，先慢后快的進度條是讓用戶心理感受上最快的設計，這是因為用戶最容易記住最后一瞬間的感覺，如果最后一瞬間，感知到了快，就覺得很順暢了。

3、數據加載本身就是很考驗用戶心態感受，所以盡量通過一些有趣的動畫來轉移用戶的注意力，營造沉浸式體驗，同時增加了趣味性，給予了產品人性化的設計。

總結

作為產品設計人員，盡量給用戶好的體驗，我們應該讓產品自己去解決問題，而不是把問題拋給用戶。在考慮人與客戶端交互的同時也要把客戶端和服務端之間的數據傳輸考慮進來，站在用戶、客戶端和服務器閉環的角度去思考產品，才能設計出體驗更好的數據加載方案。

轉自-站酷

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。