B端交互|從組件、柵格和響應(yīng)式入手來制定全局框架
我們在制定全局框架時,對于組件和響應(yīng)式設(shè)計可能沒有那么熟練,不知道如何進行調(diào)整,作者總結(jié)了詳細的做法,希望對你有所幫助。
一、全局框架中的組件
1. 浮層組件
(1)全局提示
全局提示是指在全局場景中都會觸發(fā)的通知、警示、反饋的懸浮組件類型。通常,全局提示包含兩種類型的組件:
我們需要根據(jù)項目的實際情況,選擇需要使用的類型,再為它們分配嚴(yán)格的使用場景和觸發(fā)條件。比如:
- Meassage:斷網(wǎng)、上傳失敗、已登出、暫無權(quán)限…
- Notification:站內(nèi)信、用戶留言、進度通知…
當(dāng)然,也并不是每個項目都要使用到這兩個組件。有時候為了精簡懸浮內(nèi)容,可以只使用 Meassage 來覆蓋所有通知內(nèi)容,比如將 Notification 的大段文本內(nèi)容去掉,在提示中添加一個 ”查看按鈕“ 讓用戶進行跳轉(zhuǎn)做替代。
確定好使用的類型以后,才能制定它們的交互方式。分別顯示在頁面的哪個位置,對齊的模式,多通知堆疊的邏輯等等。
(2)對話框彈窗
對話框彈窗也可以叫模態(tài)(Modal)彈窗,只要用來指應(yīng)用了黑色透明遮罩的懸浮窗口。這類窗口通常是用來促使用戶必須關(guān)注彈窗內(nèi)容,并完成對應(yīng)操作后才能進行后續(xù)操作。
對話框彈窗是一個非常靈活的組件,可以作為多種內(nèi)容的載體形式,如:
- 重要提示:對刪除、修改、替換、登錄等場景進行二次確認(rèn)
- 信息公告:展示一些特定的信息,如站內(nèi)公告、注意事項、廣告信息等
- 表單操作:填寫一些基礎(chǔ)的表單,如數(shù)量設(shè)置、添加用戶、修改標(biāo)題等
- 彈窗頁面:基本可以理解成是將一個完整的頁面以彈窗的形式展示
對話彈窗因為它太靈活,所以很容易在項目中被濫用,導(dǎo)致整個項目各類對話框?qū)映霾桓F,缺乏統(tǒng)一的樣式和操作方法,尤其是作為頁面載體的彈窗。
所以,我們并不能把對話框彈窗只當(dāng)成一個組件,而是一個同類組件的合集。要針對每個分類制定對應(yīng)的應(yīng)用場景、內(nèi)容結(jié)構(gòu)、操作方式。
而表單、頁面型彈窗,還可以做進一步的分類(類似 PS 中不同類型的設(shè)置彈窗),比如表單包含基礎(chǔ)表單、穿梭表單、上傳表單等等。
(3)側(cè)邊抽屜
側(cè)邊抽屜是一個通常在右側(cè)打開的浮層,可以理解成是用來展示在右側(cè)的臨時頁面。
它的主要作用是讓用戶不用跳出當(dāng)前的頁面直接展開一些下級的頁面,如列表詳情、表單填寫、系統(tǒng)設(shè)置等等,提升用戶的頁面跳轉(zhuǎn)效率。
抽屜作為頁面的載體,如果要在項目中使用,就需要設(shè)計師在前期制定應(yīng)用的場景,或指定哪些頁面使用抽屜。要避免其應(yīng)用和獨立頁面、對話框產(chǎn)生沖突,這會非常影響使用體驗。
并且,還要決定打開抽屜是否要使用遮罩(模態(tài)),有的業(yè)務(wù)需求需要打開側(cè)邊欄后依舊保留左側(cè)區(qū)域的操作,盡量在項目中只使用一種形態(tài)。
(4)固釘元素
固釘元素我更喜歡叫固定元素,意思是固定在頁面某個位置的懸浮元素。
比如在 SAAS 系統(tǒng)右側(cè)的幫助、客服,或者設(shè)置、回到頂部、風(fēng)格切換等,都是可以長期在全局中存在的固定元素。
固釘元素沒有太復(fù)雜的設(shè)置,只要在前期確定有哪些按鈕、字段是需要做成固釘?shù)?,并確定它們所在的位置即可。
以上就是全局框架中包含的主要組件類型了,在項目設(shè)計過程中,就要根據(jù)需求提前設(shè)計它們的布局和交互方式,以此確定整個項目的基本操作路徑,為整個項目的交互方法奠基。
二、柵格和響應(yīng)式架構(gòu)
有了全局框架,就要考慮頁面的柵格和響應(yīng)式規(guī)則了。
因為主流電腦屏幕分辨率寬度從 1280-3440px 不等,在跨度這么大的顯示差異下,怎么保證產(chǎn)品的正常使用并平衡用戶體驗,就成為前期交互工作中的必要環(huán)節(jié)。
多數(shù)新手對柵格和響應(yīng)式的使用存在非常大的誤解,所以我會在下面對它們分別做出解釋。
1. B 端中的柵格制定
網(wǎng)頁中的柵格,是脫胎于平面網(wǎng)格系統(tǒng)的一種網(wǎng)頁格線系統(tǒng),讓設(shè)計師使用平面排版的技巧來完成網(wǎng)頁的排版,可以很高效的輸出富有設(shè)計感的頁面。
早期的網(wǎng)頁柵格僅僅是在設(shè)計過程中輔助設(shè)計師排版的工具,在開發(fā)代碼中并不會有相關(guān)的體現(xiàn)。但隨著 HTML5 的登場, Bootstrap 響應(yīng)式框架的問世和普及,柵格就不再只是設(shè)計的工具,也成為開發(fā)用來制定頁面顯示邏輯、響應(yīng)規(guī)則的重要依據(jù)。
所以在主流的前端開源框架中,都會包含柵格的應(yīng)用說明。
但是,這些說明并不是作為柵格的應(yīng)用教學(xué),而是 ——告訴你系統(tǒng)支持的柵格方式有哪些!
兩者之間是有天壤之別的,前者只是把規(guī)則做好,你去執(zhí)行就好。后者是提供了很多種方法和支持的方式,你得理解以后再自己制定。
所以,不管你有沒有用這些開源框架,都需要制定出一套符合項目需要的柵格規(guī)則,應(yīng)用在后續(xù)的界面設(shè)計和實際開發(fā)環(huán)節(jié)。
柵格系統(tǒng)的制定,就是在前期確定柵格的列數(shù)(Row)、列寬(Width)、外邊距( Margin )、列間隔(Gutter)。
其中,列數(shù)基本是以 24 列為主,除非有自己對項目應(yīng)用場景的想法,否則不會是用 12、16、20 列柵格。
而網(wǎng)頁中的列寬,則是一個變量數(shù)值,它是通過頁面寬度減去外邊距、列間距后除以列數(shù)得出的寬度。它的獲取公式:
列寬 = ( 頁面寬 – 列間隔總寬 – 外邊距總寬 ) / 24
這么做的目的是后面頁面寬度變更,列寬也會按比例縮放。所以列寬是一個非固定數(shù)值,不需要我們在這個階段制定。
而外邊距的制定則是重點,外邊距一般指柵格區(qū)域左右的留空區(qū)域,很多新手以為這個數(shù)值就像平面的出血線一樣,保證左右有一定留白就可以了。但實際上,這是用來告知瀏覽器哪些區(qū)域不參與響應(yīng)式的依據(jù)。
比如最常見的情況,就是移除左側(cè)導(dǎo)航欄的區(qū)域,不讓它們參與響應(yīng)式,因為大多數(shù)情況下,導(dǎo)航是一個定寬的組件,它沒有參與寬度變更的需要。
所以目前的軟件柵格設(shè)置中,都有單獨定義邊距的選項,符合真實項目的使用需要。
還有一些特殊的場景,比如頁面右側(cè)可以展開聊天、日志、任務(wù)等面板(非浮層),這些面板也是定寬的,但會擠壓內(nèi)容區(qū)域,于是我們就會額外進行說明,哪些場景外邊距數(shù)值會變更。
最后,就是列間隔數(shù)值的制定。列間隔一般以 4 的倍數(shù)為主,要用 5 的倍數(shù)也可以,這個數(shù)值決定了布局的寬松程度。設(shè)置柵格唯一的標(biāo)準(zhǔn),就是根據(jù)親密原則,不大于外邊距即可。
確定好參數(shù),就要通過交互文檔或者創(chuàng)建標(biāo)準(zhǔn)的柵格系統(tǒng)畫布進行說明。
柵格的數(shù)值定義一定是要滿足指導(dǎo)后續(xù)頁面設(shè)計和布局要求的,而線上很多作品集中的柵格系統(tǒng)標(biāo)注漏洞百出,證明他們本身并沒有理解柵格的制定要素。
2. 項目的響應(yīng)式規(guī)則
如果完全理解柵格和響應(yīng)式的關(guān)系,應(yīng)該知道柵格定好了,那么響應(yīng)式的依據(jù)似乎也就有了,還需要制定什么響應(yīng)式的規(guī)則呢?
包含下面幾個關(guān)鍵的要素:頁面寬度支持、非響應(yīng)式頁面、組件響應(yīng)邏輯。
首先,頁面寬度支持就是確定一個可以觸發(fā)響應(yīng)式的畫布區(qū)間,因為響應(yīng)式不可能無差別適配所有寬度,比如只有 100px 的瀏覽器畫布寬,怎么適配?或者類似 32:9 的超寬屏幕比例,適配它有什么必要?
所以,盡量要提前制定出項目支持的最小和最大尺寸。最小尺寸建議不小于 800px,因為沒有適配移動端的必要,而最大寬度支持到 2560px 即可,再寬的分辨率占比極低( 4K屏幕會應(yīng)用 HIDPI 合并成 2K 或 1080p 而不是 3840 px 寬)。
第二就是確定不應(yīng)用響應(yīng)式頁面的情況,響應(yīng)式雖然看起來很萬能,但并不是所有頁面都需要使用響應(yīng)式,強行使用只會收獲反面效果。
比如基本的表單頁面、文本頁面、效果頁面等,都是使用定寬設(shè)計的效果會遠遠優(yōu)于響應(yīng)式。所以,我們要確定非響應(yīng)式的頁面場景,以及對應(yīng)的頁面框架(下一章節(jié)會具體說)。
第三組件響應(yīng)邏輯,就是下級組件中對于響應(yīng)式的支持情況。
這里要做個區(qū)分,有些組件是游離與響應(yīng)規(guī)則之外的,比如前面提到的導(dǎo)航,還有彈窗、抽屜、固釘?shù)?,都是定寬即可的元素,沒必要參與響應(yīng)規(guī)則。
但是需要應(yīng)用到響應(yīng)的組件,就需要為它們分配基本的響應(yīng)邏輯。舉個例子,前面提到的內(nèi)容模塊組件,就可以制定固定內(nèi)間距、標(biāo)題左對齊、按鈕居中對齊的適配規(guī)則,來滿足頁面的響應(yīng)需要。
同理,一些非常復(fù)雜的大型組件,也需要在前期做好響應(yīng)適配的規(guī)則制定,如表格、層級穿梭框、列表等,就不在這里展開,我們會在之后的組件交互章節(jié)具體說明。
最后,還有一個在響應(yīng)式架構(gòu)中非常重要的參數(shù) —— 斷點 BreakPoint,我沒有提,就是因為它在 B 端項目中能夠發(fā)揮的作用并不是太大,引入斷點的概念會讓上方的組件響應(yīng)邏輯復(fù)雜幾個量級。
所以前面我強調(diào)了支持最小和最大的顯示區(qū)間,就是為了盡可能杜絕頁面過窄過寬從而必須應(yīng)用斷點適配的問題。
當(dāng)然上方的參數(shù)都是個人建議,如果你項目經(jīng)驗豐富,對于參數(shù)的應(yīng)用和響應(yīng)式規(guī)則了如執(zhí)掌,可以隨心所欲的駕馭數(shù)值,就不需要被我的建議還其它條條框框束縛,大膽發(fā)揮……
作者:酸梅干超人;公眾號:超人的電話亭(ID:Superman_Call)
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash ,基于 CC0 協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
- 目前還沒評論,等你發(fā)揮!