B端后台小綜合

B端后台小綜合

B端后台小綜合,觀點,風格虐你,原創文章站酷網,中國設計師互動平台。

文章篇幅過長不喜歡勿噴

在後台頁面中,我們看到最多的就是一張張表單。有的設計師或者人對後台的第一印象就是:表格嘛,不就是excel嘛,有什麼可難的”。但是真正從需求出發到設計的時候,你就會發現後端產品中,統計報表是非常重要的,怎麼樣去根據需求,作出最方便快捷的表單。還有在設計前專業手法的應用和設計中有什麼小細節和注意事項呢?

本文大概就從這三方面入手來說,(不對的大佬請賜教呀)

  • 考慮使用場景了解用戶需求

  • 柵格系統的一些知識及應用軟件方法分享

  • 結合實際例子來說後台設計中最重要的三方面


一、考慮使用場景了解用戶需求

首先我們要了解一下這個系統在業務中的使用場景,仔細地去分析用戶的需求。

  1. Why——為什麼要設計這個後台? (目的的出發點是什麼)

  2. What——表單有哪些內容?(表格內容有什麼)

  3. Who——報表給誰看? (表單的目標用戶是誰)

  4. When——查看表單的條件篩選? (查看報表的條件篩選條件)

  5. Where——表單要注意哪兒? (表單要注意哪些方面)

  6. How——應該怎麼執行? (怎麼設計這張報表)

結合我們上面說的6條,整理需求之後就可以開始考慮怎麼實現。

但是在此之前我們還需要去了解一個名詞那就是———柵格系統

UI設計師應該也明白,如果可以很好的使用柵格系統會讓頁面更有規律也方便開發溝通,省時省力。

但實際應用中,由於對柵格系統理解的不充分,很多設計師在應用柵格系統的實踐中產生了各種問題,本來幫助設計的工具現在反而成了設計中需要解決的問題。最近結合我自己後台設計,也尋找了很多關於柵格化系統的資料和知識,發現了好的推文就從下面這幾個方面給大家分享吧。

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

  • 柵格系統的應用

  • 注意事項

  • 柵格化工具推薦(ps,skrtch,Sketch柵格系統插件)

二、柵格系統的一些知識及應用軟件方法分享

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

  1. 確立柵格系統的原子單位(網格)

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

後台系統設計中,由於後台頁面主要以Web 形式呈現,而對於web,用戶已習慣通過鼠標滾輪或滾動條(scrollbar)來縱向瀏覽頁面內容。因此,在不考慮內容優先級的情況下,Web 可以實現豎直方向的「無限」加載,即豎直方向可以無限延伸。

因此基於Web 的後台頁面,它的柵格系統在水平方向的柵格可以不體現出來,我們在執行設計時只要在豎直方向保持規律的變化就可以了。

標準的柵格系統簡化為適用於Web 後台的設計,如下圖所示:

如上圖,對於後台設計來講,柵格系統是由欄目(Column)跟水槽(Gutter)交替分佈形成的,欄目(Column)是接納網頁內容的容器,水槽(Gutter)用來調節相鄰兩個欄目間距,把控頁面留白。由於欄目跟水槽的寬度是以網格作為基本單位來增加或者減小,所以柵格化的第一步需要先定義好柵格的原子單位「網格」的大小。

根據本人的設計實踐以及其它已有規範經驗,目前後台柵格系統網格大小定義為8是最普適易用的。

具體原因有以下幾點:

(1)可以被8整除

目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被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)前端開源組件庫基於8的原子單位來設計

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

2. 建立基於原子單位的柵格系統

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

通常,在一套後台設計系統中,水槽寬度會是幾個比較固定的數值(因為後台系統的頁面相對於其它類型的Web頁面,表現的更加整齊、規律,所以留白的方式比較固定,加之後台往往有大量的數據、內容需要呈現,所以要盡可能提高頁面利用率,可以留白的空間也比較有限),而欄目寬度更加靈活,它可以根據頁面水平方向尺寸的改變而增大或減小以響應頁面的變化。

當我們做後台設計的時候首先需要確定在什麼樣的分辨率下做設計,也就是首先需要確定設計稿的尺寸,當設計稿尺寸確定後,便可建立基於該尺寸的柵格系統。假設頁面內容區域寬度為W,欄目個數為A,水槽個數為B,欄目(Column)寬度為C,水槽(Gutter)寬度為G,則W=A*C+B*G。

柵格系統建立初期,由於我們並不確定之後會有什麼樣的內容呈現我們的頁面上,所以為了讓柵格更加靈活、普適,我們先假定單個欄目與水槽的寬度是相同的,即C =8n(n=1、2、3、4…)=G,然後以此將頁面內容區域等分,形成初步的柵格,之後再按實際內容需要,按比例調整兩者寬度或者按比例對兩者進行組合,形成承載業務內容的盒子。

目前有兩種比較主流的等分方式:12等分與24等分。

(1)12等分

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

(2)24等分

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的情況,原因是實際工作中,我們面臨的情況是複雜的,這樣處理可以讓間距的設定適應一些特殊的場景,從而使其更靈活普適。

注意事項


水槽寬度的設定

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

水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設計決策成本,我們會事先設定好一系列水槽寬度,並定義好每個寬度對應的使用場景,然後根據每個場景使用對應數值就可以了。

我定義了一組水槽的值是8、16、 24、32 、40,為了區分它們的使用場景我們依次為其命名為XS、SM、MD、LG、XL。根據實踐經驗,正常情況下,兩個盒子間距(水槽)的值為24(MD)時,視覺上是最為舒適。

柵格化工具推薦


  1. Ps柵格系統工具

(1)PS自帶柵格系統設定:新建參考線版面(重點推薦)

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

如果預設的柵格系統無法滿足我們工作需要,我們也可以自定義柵格系統,並能將柵格參數保存為預設,這樣就可以重複利用自定義的柵格系統了。柵格系統還可以選擇將其應用在當前畫板或者所有畫板,十分方便易用。由於是

Ps 自帶的參考線,所以它可以通過快捷鍵靈活的控制顯示或隱藏。

(2)利用Ps標註工具Assistor Ps進行柵格系統的建立

Assistor Ps 在之前主要是一款頁面標註工具,但是隨著藍湖等自動標註工具的流行,這個小軟件基本沒人用了。但我發現它設置參考線的功能還是很強大的,可以媲美大名鼎鼎的guideguid,所以就介紹給大家。 (安裝包在文末下載,Win&Mac,解壓後跟常規裝軟件一樣,正常安裝就行)

但是這個插件由於很多數值都要自己算,實際上沒有Ps 自帶的新建參考線面板的功能好用,算是一個工具的補充吧。

2. 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

柵格系統參數設計

單個形狀(畫板)建立柵格系統動圖演示:

多個形狀(畫板)建立柵格系統動圖演示:

(3)跨平台的web端柵格工具

GridGuide 最大優點是可以針對一種柵格系統生成4組不同水槽寬度的柵格化方案,能比較直觀的比較不同水槽寬度下各個柵格系統的視覺感受。

使用方法:在右上角設置好頁面寬度以及欄目數量,頁面內就會自動生成可以下載為png 圖片的柵格。

還有一些大家常見的問題解答可查看http://www.woshipm.com/pd/1523754.html具體了解

三、結合實際例子來說後台設計中最重要的三方面

在後台系統中,最常見的數據展示方式就是列表,那如何設計一個後台系統的列表呢?

列表頁通常是由「搜索」、「表格」和「操作項」三大基本塊組成。

下面也會主要從這三方面來探討啦~一起學習

  1. 搜索

搜索框一般是輸入具體字段,點擊搜索或回車後,直接定位到某個/某類數據。

搜索的規則有兩種:精準搜索和模糊搜索

  1. 精準搜索是根據輸入的條件,精準地搜索到某條完全匹配的數據;

  2. 模糊搜索則是指查詢到所有包含輸入條件的數據。

如電商後台系統中的搜索框、輸入商品編號、查到某件商品;老師後台系統中的搜索框、輸入學員姓名、查到某位學員等。

如下圖是微信公眾號的後台系統——用戶管理模塊,搜索框支持搜索用戶暱稱,以快速定位到某位用戶。

試想沒有定向搜索的功能的話,要找到一條數據,只能通過對每一條進行翻找,如果列表中有50條數據,一條條數據進行查看的話,要找到某條數據可能要花30秒的時間;而通過定向搜索只需要3秒時間。

當然在一些搜索條件多的頁面中如果全部條件堆疊在屏幕上,會嚴重擠占列表的展示空間,使得首屏留給列表的空間所剩無幾;用戶在尋找具體搜索條件時,彷彿大海撈針,耗時費力。

那就可以去考慮滿足以下條件來達到頁面的一個可實用性

  • 用戶可以快速找到搜索條件——控制條件的數量;

  • 能滿足搜索細緻程度上的要求——搜索條件要充足;

  • 將展示區域更多留給表格——避免搜索區域佔用太多屏幕空間。

那我們可以讓用戶來設置展示哪些選項,且通過賬號記錄設置結果這種方法來解決條件太多的問題。

每個用戶都可以根據自己的需求和習慣決定展示哪些選項,但這個需要後端開發的支持啦~

順帶一提:如果後台系統的數據加載時間比較久(不管是數據量大還是開發方式導致),盡量避免採用輸入/選擇後即執行搜索的交互樣式;這可能導致每次輸入/選擇後用戶都需要被迫等待;如果選擇N個搜索條件,等待時間要乘以N。

2.表格

(1)表格字段

表格是統計報表的核心模塊,在選擇字段的時候,應該充分考慮業務,理解查看報表的人的需求。

如果是信息記錄的表格,例如:租客的信息列表。

  • 首先需要考慮租客的信息,例如:租客姓名、聯繫方式、身份證件號碼;

  • 其次要考慮該租客的居住信息,例如:房源地址、管理中心、所屬管家、入住時間、辦理時間、居住狀況。

這些字段就基本上涵蓋了管家想了解一個租客的所有信息。

如果系統本身有實名認證的流程,那租客姓名後還需要增加實名認證的標誌,以此來對租客進行區分。

如果是數據統計表格,例如:電量統計表,則需要確定在實際業務中電錶的安裝和計量。

電量統計表包括兩部分:電錶和讀數。

和電錶有關的字段有房間區域、電錶名稱,和讀數有關的字段則稍微複雜一些。如果該報表是直接計算費用,則一個總電量就夠了;如果該報表是需要記錄不同時段的用電量,則需要有“尖”、“峰”、“平”、“谷”這幾個字段。

當然這需要根據城市具體情況來選擇,有的城市沒有“尖”這個時段,例如廈門就只有“峰”、“平”、“谷”。

還有一個需要注意的點是數據的讀取,需要確定好規則。像租客信息的字段大家都默認好了,前後台的名稱定義是一致的,姓名就是姓名,不會說前端展示是姓名,後台錄入數據的時候,姓名實際上是年齡。

但是電錶相關的字段就可能會出現這樣的問題,由於各地業務不一樣,區域、位置、名稱這幾個名詞的差異性、獨特性不夠,有的時候用戶默認的規則不一樣,導致讀取數據後,展示數據時,容易誤導用戶。所以在PRD中,需要定義好名詞的規則。

例如下圖:就需要對應好前端展示和後台的名詞。

(2)篩選項

篩選項分為單級篩選、級聯篩選、日期/時間選擇器等。

  • 單級篩選:即只有一層篩選項,如篩選學科,篩選項包括:語文、數學、英語,均為同一層級的篩選項;

  • 級聯篩選:篩選項層級較多時使用,如篩選學科的知識點,那麼篩選項就有兩層:第一層級為學科,第二層級為學科對應的知識點;

  • 日期/時間選擇器:即篩選一段日期/時間,解決用戶查找一段日期/時間內數據的需求;

如下圖,分別是三種篩選類型的示例:

了解了三種類型的篩選形式之後,我們還需要知道,每個篩選項的篩選方式又會分為:單選、多選。

單選:給定固定幾個篩選條件,用戶一次只能選擇一個篩選條件;單選條件下,篩選結果符合該篩選條件,即可被篩選出來。

多選:用戶可以選中多個篩選條件,用戶選中多個篩選項後的篩選邏輯也需要根據實際場景進行設計,如:用戶選中多個篩選項後,篩選結果是包含所選選項,還是說必須命中所選全部選項才可被篩選出來,需要提前進行設計和思考。

綜合來講,通過定向搜索,以及篩選項,來滿足用戶快速且定向地查詢某個/某類數據的需求。

(3)篩選條件

篩選條件是用戶能夠精準查找自己想要的信息的重要手段,篩選條件一般是跟著表格字段來確定的。換句話說,篩選條件的維度是表格里的某些重要字段,但並不意味著將表格所有的字段,都做成篩選條件就是最全面的篩選。

在這個過程中,需要仔細思考那些篩選條件對用戶是有用的,哪些篩選條件並沒有多大意義。

舉個例子:租客信息的表格,則常用的篩選條件就會有小區地址、姓名、電話、入住日期、居住狀況,這大致就是管家們能夠鎖定自己想要找的租客的指標了。

這些指標有一些共性:通用、好記、獨特。

通用的意思就是大部分篩選都這麼篩,找租客就得有姓名和住址;好記就是這些維度都不難記,小區名詞、租客姓名,這些都能短期記住。像身份證號碼這種就不適合作為篩選條件,除非是數據量非常大、重名率非常高的情況下,只有身份證號才能實現精準搜索,但這種可能就是國家或地區層面的搜索。

而數據統計的報表的篩選條件,毫無疑問,時間段的選擇是最重要的。普遍的做法就是讓自己自定義選擇,但也有些產品做得很好,將用戶常用的指標提煉出來,例如:“今天”、“昨天”、“最近3天”、“最近7天”、“本月”、“本季度”等用戶常關注的指標作為選項。這樣的話,省去了用戶對照日曆選時間的麻煩,能夠快速地進行操作。

當然除了時間選擇,還會有一些其他得篩選條件。例如:電量統計表,則還需要要小區、房間、電錶名詞等篩選條件。

3.操作

操作我們大致分成兩類來分析:

  • 批量操作,例如添加/導入、設置/分配、刪除、導出等。

  • 針對單條內容的操作,例如編輯、刪除、查看等。

(1)批量操作

批量操作相對複雜度高,出錯的概率也更大,以下幾條內容是我們設計摸索過程中總結出來的防錯策略:

  • 不建議支持跨頁選擇跨頁選擇首先會增加開發難度及測試複雜度,用戶操作也容易出錯;比如,在選擇過程中,已選擇數據的狀態可能在外部發生了變化,不再符合批量操作的條件,從而導致任務處理失敗。

  • 設置處理數目上限如果數據量太大,系統負擔過重,也會增加超時等任務失敗的頻率。

  • 協助計算在用戶選擇過程中動態計算合計值並實時反饋,防止用戶提交後才發現無法通過系統的校驗條件;例如用戶在批量還清多筆賬單時,可以在選擇頁面就提醒用戶所選金額超出賬戶餘額限制,而不是在提交後才給用戶報錯。

  • 異步反饋有些操作數據量大,處理耗時較長,例如導出全量內容等,可採用異步的反饋方式,以避免耽誤用戶處理其他任務;依據場景,異步反饋還可採用多種通道保證信息傳達給客戶,例如係統內提示+短信+郵箱提示等。

(2)單條操作

列表的信息展示,我們會嘗試取捨和隱藏;但關於操作,在很多場景下,盡量全部展示,避免用戶需額外點擊才能將操作項喚出。

原因有二:

(1)降低學習成本、提升操作效率。

(2)在展示上,可以使用圖標按鈕代替文字按鈕,但要注意語義一定要準確,不要過於追求創新導致語義和用戶心理模型產生偏差。圖標除了具有按鈕功能,還能提示信息狀態,一舉兩得。

(3)在交互上,如果操作可以在彈窗內解決,盡量不要新開頁面。尤其是連續逐條處理的任務,如果頻繁切換頁面,用戶還要耗費時間重新定位任務條目。

四、總結

本文就後台設計總結了前期的準備,設計中用到的柵格系統和該注意的一些問題,希望

對b端的伙伴有所幫助吧,希望每一位設計師都具有敏捷的邏輯思維和產品思想,一起努力鍾情理想。 (為了不成為一個做圖機器而努力哈哈哈)

部分來源鏈接

http://www.woshipm.com/pd/4237068.html

http://www.woshipm.com/pd/4177359.html

http://www.woshipm.com/pd/4177368.html

http://www.woshipm.com/pd/1523754.html

http://www.woshipm.com/pd/1302457.html

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。