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

一、什么是響應式？

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

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

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

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

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

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

四、為何要利用柵格系統(tǒng)來進行響應式設計

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

柵格系統(tǒng)頁面布局具有規(guī)律性、元素寬高可用百分比表示

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

1、確立設計稿基準尺寸

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

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

。

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

2、確定頁面布局結構

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

上下布局

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

左右布局

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

3、對內(nèi)容區(qū)域建立柵格系統(tǒng)

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

上下布局結構與其對應的柵格系統(tǒng)

左右布局結構與其對應的柵格系統(tǒng)

4、根據(jù)實際業(yè)務內(nèi)容確定盒子（Box）比例

上下布局結構的盒子

左右布局結構的盒子

5、確定響應策略

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

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

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

左右布局響應策略表

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

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

左右布局響應策略動態(tài)演示

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

左右布局響應策略標注

對于上下布局的后臺系統(tǒng)我們根據(jù)內(nèi)容區(qū)域（Container）寬度定義的不同方式，可以把它們分為兩類：

1、內(nèi)容區(qū)域定寬的后臺系統(tǒng)（ Fixed-width Container ）

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

 上下布局響應策略表（內(nèi)容區(qū)域定寬（ Fixed-width Container ））

2、內(nèi)容區(qū)域寬度流式 (fluid-width Container) 

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

Q&A

1、后臺系統(tǒng)必須做成響應式么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表單(Form)頁面示例

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

柵格系統(tǒng)的目的

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

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

建立柵格系統(tǒng)的方法與規(guī)則

1、第一步：確立柵格系統(tǒng)的原子單位（網(wǎng)格）

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

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

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

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

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

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

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

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

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

2、第二步：建立基于原子單位的柵格系統(tǒng)

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

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

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

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

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

柵格系統(tǒng)的應用

1、頁面布局與版式設計

（1）、了解承載業(yè)務內(nèi)容的盒子模型（Box Model）

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

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

（2）、根據(jù)業(yè)務內(nèi)容分配頁面比例，確定盒子寬度

以24柵格系統(tǒng)為例，一個24柵格系統(tǒng)可以根據(jù)業(yè)務需要被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等不對稱分割，具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務需求來定，我們此處所說的比例實際上就是盒子的寬度。

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

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

2、元素對齊與間距設定

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

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

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

注意事項

1、水槽寬度的設定

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

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

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

Ps柵格系統(tǒng)工具

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

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

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

2、利用Ps標注工具Assistor Ps 進行柵格系統(tǒng)的建立

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

Sketch柵格系統(tǒng)工具

1、Sketch自帶柵格系統(tǒng)設定：Layout Settings

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

2、Sketch柵格系統(tǒng)插件：BootstrapGrid-maste

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

柵格系統(tǒng)參數(shù)設計

單個形狀（畫板）建立柵格系統(tǒng)動圖演示

多個形狀（畫板）建立柵格系統(tǒng)動圖演示

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

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

QAQ(常見問題解答）

（1）當柵格系統(tǒng)中奇數(shù)不可避免的出現(xiàn)時，如何處理?

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

（2）柵格系統(tǒng)必須以8作為原子單位？使用其它數(shù)值是否可以

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

（3）柵格系統(tǒng)建立初期是否必須使欄目寬度與水槽寬相等，并等分內(nèi)容區(qū)域？

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

轉自UI中國-BYMD

<view class="gallery">

    <view class="item" wx:for="{{images}}" wx:key="">

        <image src="{{item}}" data-src="{{item}}" bindtap="previewImage" mode="aspectFill" />



        <!-- 刪除按鈕 -->

        <view class="delete" bindtap="delete" data-index="{{index}}">X</view>

    </view>

    <view class="item" bindtap="chooseImage">

        <view class='addIcon'>+</view>

    </view>

</view>

<button type="primary" bindtap="submit">提交</button>

————————————————

/* pages/index/index.wxss */
/*畫廊*/
.gallery {    
  width:630rpx;
  margin: 0 auto;
  display: flex;    
  justify-content: flex-start;    
  flex-wrap: wrap;
}
/*每張圖片所占容器*/
.item {    
  position: relative;    
  margin:10rpx 5rpx;
  width: 200rpx;
  height: 200rpx;
}
.item image{
  width: 100%;
  height: 100%;
}
/*add按鈕*/
.item .addIcon{
  position:relative;
  width:200rpx;
  height:200rpx;
  text-align:center;
  line-height:200rpx;
  font-size:80rpx;
  background: #f2f2f2;
  color: #555;
}
/*刪除按鈕*/
.delete {    
  position:absolute;
  right:0;
  top:0;
  /* background:#ccc; */
  opacity:1;
  height: 36rpx;
  font-size:22rpx;
  font-weight:700;
  padding:0 8rpx 0 10rpx;
}
————————————————


var that;
Page({
  data: {
    images: [],
    uploadedImages: [],
    //imageWidth: getApp().screenWidth / 4 - 10
  },
  onLoad: function (options) {
    that = this; var objectId = options.objectId; console.log(objectId);
  },
  chooseImage: function () {
    // 選擇圖片
    wx.chooseImage({
      count: 3, // 默認9
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        });
      }
    })
  },
  // 圖片預覽
  previewImage: function (e) {
    //console.log(this.data.images);
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.images
    })
  },
  // submit: function () {        
  //   // 提交圖片，事先遍歷圖集數(shù)組
  //   that.data.images.forEach(function (tempFilePath) {
  //     new AV.File('file-name', {
  //       blob: {
  //         uri: tempFilePath,
  //       },
  //     }).save().then(                
  //       // file => console.log(file.url())
  //     function (file) {                    
  //       // 先讀取
  //       var uploadedImages = that.data.uploadedImages;
  //       uploadedImages.push(file.url());                    
  //       // 再寫入
  //       that.setData({
  //         uploadedImages: uploadedImages
  //       }); console.log(uploadedImages);
  //     }
  //     ).catch(console.error);
  //   });
  //   wx.showToast({
  //     title: '評價成功', success: function () {
  //       wx.navigateBack();
  //     }
  //   });
  // }, 
  delete: function (e) {
    var index = e.currentTarget.dataset.index; var images = that.data.images;
    images.splice(index, 1);
    that.setData({
      images: images
    });
  }
})
————————————————

<button data-name="shareBtn" open-type="share" plain="true">轉發(fā)</button>

添加plain=”true”后button的邊框樣式可自定義 ↓ ↓

button[plain]{ border:0 } 

 //轉發(fā)
  onShareAppMessage: function (options) {
    　　var that = this;
    　　// 設置菜單中的轉發(fā)按鈕觸發(fā)轉發(fā)事件時的轉發(fā)內(nèi)容
    　　var shareObj = {
      　　　　title: "這是一個標題！",        // 默認是小程序的名稱(可以寫slogan等)
      　　　　//path: '/page/index/index/user?id=123',        // 默認是當前頁面，必須是以‘/’開頭的完整路徑
          imageUrl: '../../img/xiaochengxu-share.jpg',     //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認截圖。顯示圖片長寬比是 5:4
      　　　　success: function (res) {
        　　　　　　// 轉發(fā)成功之后的回調
        　　　　　　if (res.errMsg == 'shareAppMessage:ok') {
        　　　　　　}
      　　　　},
      　　　　fail: function (res) {
        　　　　　　// 轉發(fā)失敗之后的回調
        　　　　　　if (res.errMsg == 'shareAppMessage:fail cancel') {
          　　　　　　　　// 用戶取消轉發(fā)
                       console.log("用戶取消轉發(fā)");
        　　　　　　} else if (res.errMsg == 'shareAppMessage:fail') {
          　　　　　　　　// 轉發(fā)失敗，其中 detail message 為詳細失敗信息
        　　　　　　}
      　　　　},
            complete: function(){
        　　　　　　// 轉發(fā)結束之后的回調（轉發(fā)成不成功都會執(zhí)行）
      　　　　},
  　　};
  　　// 來自頁面內(nèi)的按鈕的轉發(fā)
  　　if(options.from == 'button') {
    　　　　var eData = options.target.dataset;
    　　　　console.log(eData.name);     // shareBtn
    　　　　// 此處可以修改 shareObj 中的內(nèi)容
    　　　　//shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name;
  　　}
// 返回shareObj
return shareObj;
————————————————

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">

  <block wx:for="{{imgUrls}}" wx:key="unique">

    <swiper-item>

      <image src="{{item}}" class="img" bindtap="swipclick" />

    </swiper-item>

  </block>

</swiper>

————————————————

/* swiper {
    height: 421.5rpx;
} */
swiper-item image {
    width: 100%;
    height: 100%;
}
.swiper-container{
  width: 100%;
  position: relative;
}
.swiper-container .swiper{
  height: 300rpx;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
————————————————


const app = getApp()
Page({
  data: {
    swiperCurrent: 0,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,//自動切換時間間隔
    duration: 800,//滑動動畫時長
    circular: true,//是否采用銜接滑動
    imgUrls: [
      '../../img/index/1.jpeg',
      '../../img/index/2.jpeg',
      '../../img/index/3.jpeg'
    ]
  },
  //輪播圖的切換事件
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
    //console.log(e.detail.current);
  },
  //點擊指示點切換
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },
  //點擊圖片觸發(fā)事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent);
    wx.switchTab({
      url: this.data.links[this.data.swiperCurrent]
    })
  },
})
————————————————

前提：真機和PC端在同一個局域網(wǎng)內(nèi)。

1、安裝nodejs環(huán)境 （node -v 查看版本號）



2、在所在的項目下輸入命令：npm install anywhere -g



3、直接輸入命令：anywhere，這里瀏覽器自動打開所有項目的根目錄，點擊就可以看到，同一網(wǎng)段下，然后手機直接預覽這個地址就可以

————————————————

<view class="gallery">

  <view class='tipTitle'>

    快去上傳自己的照片吧

  </view>

  <view class='item-ot'>

    <view class="item">

      <!-- 添加按鈕 -->

      <view class="addIcon" bindtap="chooseImage" wx:if="{{imgBoolean}}">

          <view class=''>+</view>

      </view>

      <!-- 上傳的圖 -->

      <view class='itemImg' >

        <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"  mode="aspectFill" />

        <!-- 刪除按鈕 -->

        <view class="delete" bindtap="deleteImg" data-index="{{index}}">X</view>

      </view>

      <view class='boxStyle'></view>

    </view>

    <view class='itemTxt'>正面照</view>

  </view>

  <view class='uploadFinish'>

    <a class="uploadFinishBtn" href="javasctipt:;"  bindtap="submit">提  交</a>

  </view> 

</view>

/*畫廊*/
.gallery {    
  width:100%;
  margin: 0 auto;
  display: flex;    
  justify-content: flex-start;    
  flex-wrap: wrap;
  background: #fffaf0;
}
/*每張圖片所占容器*/
.item-ot{
  margin:0 auto;
  width: 100%;
  height: 100%;
}
.item {    
  position:relative;
  margin:0 auto;
  width:370rpx;
  height:490rpx;
  background:#eee;
  border:2rpx solid #f9c4c2;
  /* overflow:hidden; */
}
.itemImg{
  position: absolute;
  left: 0;
  top:0; 
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index:1;
}
.itemImg image{
  width: 100%;
  height: 100%;
}
/*add按鈕*/
 .addIcon{
   position:absolute;
  left: 0;
  top: 0; 
  width: 100%;
  height: 100%;
  text-align:center;
  line-height:490rpx;
  font-size:80rpx;
  background: #fff;
  color: #999;
  z-index:2;
}
/*刪除按鈕*/
.delete {    
  position:absolute;
  right:0;
  top:0;
  /* background:#ccc; */
  opacity:1;
  height: 36rpx;
  font-size:22rpx;
  font-weight:700;
  padding:0 8rpx 0 10rpx;
  color: #999;
}
.itemTxt{
  text-align: center;
  font-size: 30rpx;
  color: #999;
  margin-top: 50rpx;
  margin-bottom:  70rpx;
  font-weight: 700;
}
.uploadFinish{
  width: 100%;
  height: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.uploadFinishBtn{
  background: #ff6666;
  color: #fff;
  display: block;
  width: 100%;
  padding: 26rpx 0;
  text-align: center;
  font-size: 36rpx;
  border-radius: 10rpx;
  margin-bottom: 40rpx;
}
.tipTitle{
  text-align: center;
  font-size: 30rpx;
  color: #f6a29d;
  font-weight: 700;
  width: 100%;
  margin: 50rpx 0;
}
.boxStyle{
  width:300rpx;
  height:100rpx;
  position:absolute;
  bottom:-1rpx;
  border-radius:50%;
  box-shadow:0rpx 10rpx 100rpx #fddbd9;
  margin-left:35rpx;
}

Page({
  data: {
    uploadedImages: [],
    imgBoolean: true,
  },
  onLoad: function (options) {
    var that = this;
  },
  chooseImage: function () {
    var that = this;
    // 選擇圖片
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          item: tempFilePaths[0],
          imgBoolean: false
        });
      }
    })
  },
  // 圖片預覽
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: [current]
    })
    console.log("這是1" + current);
  },
  //刪除圖片
  deleteImg: function (e) {
    var that = this;
    var images = that.data.uploadedImages;
    that.setData({
      uploadedImages: images,
      imgBoolean: true
    });
  },
  // submit: function () {        

  // }, 
})

當我們回顧近20年的手機發(fā)展歷程，可以發(fā)現(xiàn)2007年iPhone的橫空出世真正改變了手機這個行業(yè)。喬布斯在發(fā)布會上展示初代iPhone給行業(yè)帶來的沖擊力是前所未有的，對人機交互領域也帶來了了深遠的影響。

信息限制

操作與反饋

總結

任何一個新事物的出現(xiàn)，人們總是傾向于從現(xiàn)有的知識體系中尋找類似的事物進行描述與概括，以尋求情感上的歸屬和理性上的辨識。但是過于超前的創(chuàng)新，往往是現(xiàn)有的知識體系無法解釋的。無法解釋，自然無法接受。

文章來源：站酷