B端設計交付指南!屏幕斷點的設定與標注
自從藍湖、Zeplin 這些設計軟件誕生以來,仿佛我們就和設計標注告別,大家對于項目的交付方式就變成了 「選擇畫板 - 上傳 - 分享鏈接 - 結束」;如果你不幸使用的是 figma,則更為簡單 「分享鏈接、結束」
"這也就導致了新生代設計師對設計標注非常的陌生"
回到 B 端設計當中,我們會發(fā)現(xiàn):尺寸變大,內(nèi)容變多。如果我們還是采取以往的方式,產(chǎn)出以"純頁面設計為主的方案",就會導致 前端不解、產(chǎn)品困惑、評審艱難、工作無法開展,最后被合理優(yōu)化,卒~
面對這樣的問題,我們想重新與大家分享一下,在實際工作當中,應該如何進行交付,由此誕生了「B 端交付指南」
專欄主題會以實際工作當中交付的內(nèi)容為主,為大家講清楚交付工作的各項產(chǎn)出內(nèi)容。
一、為什么需要了解屏幕斷點
我們大多數(shù) B 端產(chǎn)品都是 BS 架構,也就是所謂的在網(wǎng)頁端當中打開的應用程序。
網(wǎng)頁端的尺寸寬度可以隨意調節(jié),這也就造成了瀏覽器的不同分辨率,我們需要設計相應的尺寸來匹配屏幕分辨率。
在實際的工作當中,面對屏幕分辨率的變化,經(jīng)常會顯得不知所措。
前端會來問:"這兒尺寸多少?那個尺寸變大如何處理"
這就顯得你不夠專業(yè),非常業(yè)余。
同時在實際還原時,還會出現(xiàn) 稿件尺寸不匹配、設計還原度低、設計內(nèi)容難落地 等問題,這些問題并不代表著程序員出現(xiàn)問題,很多時候其實是設計師本身沒有將方案明確,而屏幕斷點就是最基礎的交付產(chǎn)出。
二、什么是屏幕斷點
屏幕斷點是網(wǎng)頁開發(fā)當中使用的一種技術。
其目的是為了在不同的屏幕尺寸下,能夠讓網(wǎng)頁的布局和樣式得到相應的優(yōu)化。斷點通常被設定在特定的尺寸范圍內(nèi),在這些范圍內(nèi),網(wǎng)頁的樣式排布會有所不同,讓網(wǎng)頁在不同的屏幕尺寸下,都能得到很好的展示。
在互聯(lián)網(wǎng)的早期,屏幕斷點是交給程序員自己設定。但隨著大家對于設計的重視,要求的還原度也在不斷提高,后續(xù)便要求設計師來去規(guī)定屏幕斷點。
關于屏幕斷點,我們可以通過網(wǎng)頁測試,來判斷這個網(wǎng)站是否使用了屏幕斷點。
1. 縮放窗口丨判斷是否有斷點
我們隨便進入到一個網(wǎng)頁當中,快速的縮放瀏覽器窗口,看看網(wǎng)頁內(nèi)部,在縮放的過程中,究竟有沒有發(fā)生變化。如果內(nèi)容發(fā)生明顯的位置變化,我們便可以知道,此網(wǎng)頁有設計屏幕斷點。
2. 檢查工具丨具體了解斷點數(shù)值
第二步則需要判斷斷點的具體數(shù)值。
在瀏覽器當中(Chrome Edge 瀏覽器比較好用)我們能夠通過檢查工具右上角的分辨率,測試得出具體的屏幕斷點。
3. 檢查屬性丨驗證屏幕斷點
點擊檢查左側的第二個圖標,隨后輸入剛才的屏幕斷點,進行尺寸上的調整來做相應的驗證。
舉一個例子,在飛書管理后臺當中,我們拖動瀏覽器會發(fā)現(xiàn),除了內(nèi)容采取流式變化以外,在一個特定的分辨率當中,飛書的左側導航欄進行收起,讓我們知道這個頁面肯定會存在屏幕斷點的設定。
其次我們通過檢查發(fā)現(xiàn)在 1280px 的時候,網(wǎng)頁出現(xiàn)了變動,因此可以大概推測 在飛書管理后臺的頁面當中,1280px 為網(wǎng)頁當中的一個斷點,并且判定它為展開導航或收起導航。
最后進入設置驗證,發(fā)現(xiàn)和我們推算的相同,因此可以備注相應的交互說明:"全局交互 - 當網(wǎng)頁尺寸 <1280px(不包含),則將導航菜單進入折疊狀態(tài),如圖 1;當網(wǎng)頁尺寸 ≥ 1280px(包含),則將導航菜單呈現(xiàn)展開狀態(tài)。"
三、屏幕斷點的存在方式
屏幕斷點本身非常簡單,但是我們在設計 B 端頁面時,會發(fā)現(xiàn)屏幕斷點與 B 端頁面存在密切聯(lián)系。
因為斷點設定的目的不同,我們大致將屏幕斷點分為兩種:屏幕斷點、內(nèi)容斷點。
1. 屏幕斷點
屏幕斷點的設定,主要因為市面上有著不同的屏幕尺寸大小,為了滿足這些屏幕的正常使用,因此需要去設定相應的屏幕斷點。
它的設定方式是 因為大家的屏幕尺寸不同,所以我需要設計大多數(shù)設備的尺寸來滿足頁面設計的需求。這時候不同設備屏幕尺寸是最為重要的。
比如我們在設計官網(wǎng)時,就會思考有哪些屏幕尺寸,好進行合理的適配。
當然為了做好它,我們需要了解市面上大多數(shù)設備的屏幕尺寸才行,這樣才能夠保證不同的設備都能夠看到較為完美的頁面。如何了解這些尺寸呢?我們通常會有三個途徑:
①網(wǎng)站的數(shù)據(jù)埋點(推薦):通過數(shù)據(jù)埋點,來統(tǒng)計進入你們網(wǎng)站的具體用戶,這樣得到的數(shù)據(jù)是你的用戶的具體設備情況,因此會比較準確。
②百度指數(shù)統(tǒng)計:百度指數(shù)的較為權威的數(shù)據(jù),里面記錄了桌面端大家使用的分辨率情況。
③Statcounter:這是國外最具權威的一個數(shù)據(jù)統(tǒng)計的網(wǎng)站,里面記錄了不同分辨率的的具體情況,其中還是以:1920x1080 和 1366x768 為大多數(shù)。
而在屏幕斷點當中,我們在設計時需要結合上方給到的三類數(shù)據(jù),了解到目前分辨率的一個具體情況,并且屏幕斷點主要是在:企業(yè)官網(wǎng)、產(chǎn)品設計 時使用,因此便可以以這些數(shù)據(jù)為基礎,進行快速設定。
比如:我們?nèi)ピO計一個企業(yè)官網(wǎng)。
為了將官網(wǎng)滿足大多數(shù)設備的正常訪問,因此我們將系統(tǒng)的屏幕斷點都進行了設定,屏幕斷點通常不用過多,一般 2-3 個即可,因此結合下方數(shù)據(jù),我們先有了初步尺寸規(guī)劃,優(yōu)先滿足 1920x1080、1440x900 的用戶。
同時設計出該尺寸的設計稿(在設計稿當中會存在尺寸大小等內(nèi)容元素上的變化),交付給到前端,配合相應的網(wǎng)站標注,讓他們進行還原。
2. 內(nèi)容斷點
內(nèi)容斷點會優(yōu)先思考設計頁面你的內(nèi)容尺寸上的變化,通過內(nèi)容的最小值,來去推導究竟應該在哪些時候設定斷點。
它的設定方式是因為一個頁面的內(nèi)容上,會存在著不同的差異,尺寸的變化會導致內(nèi)容適應發(fā)生變化,因此使用內(nèi)容斷點來去兼顧內(nèi)容。
聽上去有些復雜,我舉一個例子:你現(xiàn)在需要設計這個頁面,當前這個頁面為 4 個卡片,那請問在什么分辨率的尺寸下,為 5 個卡片?6 個卡片呢?
它的邏輯就是采取了柵格當中的流式布局,來去還原頁面,通過卡片當中最小尺寸來實現(xiàn)頁面的變化。而我們作為設計師,只需要去考慮不同的形式,流式布局應該如何開展。
在使用內(nèi)容斷點時,它會有幾個要求:
- 初稿設計已完成:首先設計出一個你滿意的完整頁面,并且這個頁面已經(jīng)完成評審,準備交付給前端,不然就會浪費過多精力。
- 內(nèi)容滿足要求:在這個頁面的當中,需要存在對不同分辨率變化的內(nèi)容。比如:卡片、文字、輸入框、圖片 等...
- 已設定屏幕斷點:我們已經(jīng)完成了屏幕斷點的設定,現(xiàn)在開始思考內(nèi)容尺寸不一時,應該如何處理。
比如以上圖的頁面為例,我們先不考慮屏幕斷點的問題,來對其頁面進行標注,思路應該為:
①確定卡片最低尺寸:通常在卡片里的設計當中,我們需要考慮橫向上的最小尺寸。
以上圖為例,假設發(fā)現(xiàn)卡片尺寸的最小值為 280px,如果尺寸低于 280px 則無法將其內(nèi)容完整的展現(xiàn)。
這時候便可設定為 最小尺寸為 280px
②拓展分辨率:確定完最低尺寸或,我們可以將分辨率拓展到其他頁面當中,具體公式為:頁面尺寸 +- n * (最小值+卡片間距) = 擴展分辨率尺寸
可以簡單理解為 多一個卡片、少一個卡片 時的屏幕分辨率情況。
比如上圖,拓展分辨率為 「1440px +- n * (280+24)」 具體值為:1136px、1744px、2036px
也就是說 上面提到的尺寸均為拓展分辨率尺寸,只要低于此尺寸,其內(nèi)容卡片就會相應減少。這部分和之前的柵格較為類似
③完善相應規(guī)則:我們剛才只是確定了屏幕斷點的尺寸,但是真正想要將這個方案落地,還需要搭配各種適配的布局規(guī)則。
我們適配的布局規(guī)則會分為 居左、居中、居右、平鋪、縮放 五種規(guī)則,這部分邏輯與 figma 當中的自動布局基本一致。
- 居左 是當寬度過大時,所有的內(nèi)容進行左對齊,右側進行留白處理
- 居中 是當寬度過大時,所有的內(nèi)容進行居中對齊,左側兩側進行留白處理(不常用)
- 居右 是當寬度過大時,所有的內(nèi)容進行右對齊,左側進行留白處理(不常用)
- 平鋪 是所有的內(nèi)容進行平鋪展示,卡片自動升縮,來實現(xiàn)平鋪的效果
- 縮放 是所有內(nèi)容 根據(jù)大小進行等比例縮放,來填充空白的區(qū)域
當然在設定內(nèi)容斷點時,我們還需要去考慮網(wǎng)頁當中的滾動條,因為出現(xiàn)滾動條,我們就需要預留滾動條的寬度,否則頁面的內(nèi)容分布,還會造成影響。
四、復雜案例拆解
剛才講到的只是一個最為基礎的情況,但是在真實的項目當中,我們需要設計的內(nèi)容會更加的復雜。這里以一個大廠的真實項目為例,下方為 某某系統(tǒng)的一個核心頁面,你需要將其內(nèi)容進行相應標注交互,你會如何做?
(由于數(shù)據(jù)保密,所有數(shù)據(jù)均已替換)
首先對于這個頁面,我們可以將它分為四部分來進行思考,頁面尺寸為 1440px。w
模塊一:
假設:通過后臺數(shù)據(jù)發(fā)現(xiàn),系統(tǒng)當中存在很多極低的尺寸。
通過數(shù)據(jù)對比,最后將尺寸設定在 1366px,也就是低于 1366px 就會自動收起 模塊一處導航,同理反之。
模塊二:
首先設定模塊二的最小尺寸為 280 px,并且頁面間距為 12 px,通過公式設定,我們可以將模塊二的內(nèi)容斷點為:「1440px +- n * (280+12)」
因此可以將內(nèi)容斷點設定為:1148px、1440px、1732px、2024px。
同時因為內(nèi)容的特性,將其設定為平鋪展示。
模塊三:
頭像這里也是一個內(nèi)容斷點,只是它較為特殊。因為這種內(nèi)容的特殊性,因此在尺寸變化時,我們會考慮布局的方式采取左側對齊,通過左側對齊,這樣也能夠讓用戶在變化尺寸時,選項的選擇也會更為便捷。
具體數(shù)值我就不啰嗦了,邏輯同理~
模塊四:
與模塊二類似,這時候就不必重復再寫。
具體的斷點,應該如何撰寫,我們會放在下篇文章來和大家細致講解。
這樣的整理我們就能將這個頁面當中存在的變化內(nèi)容,清晰的講給程序員。
總結
屏幕斷點能夠幫助我們,了解頁面究竟應該如何還原。在如今對頁面要求極高的年代,很多時候頁面還原不好并不一定是程序員的鍋,同樣也有可能是設計師沒有正確的進行設計交付,因此在屏幕斷點里面我們就需要注意這一問題。
這里總結一下兩個斷點方式的差異:
屏幕斷點主要用在網(wǎng)頁設計、管理后臺等關于顯示器分辨率的調整當中。因此這一類型多以企業(yè)官網(wǎng)為主。
內(nèi)容斷點則主要專注內(nèi)容的大小,因此更適合在復雜的頁面結構當中去呈現(xiàn)自己的思路。
設計思路是首先設定屏幕斷點,緊接著設置內(nèi)容斷點,如果對于前端了解的同學會發(fā)現(xiàn),其實根本不會存在什么內(nèi)容斷點,這個方式無外乎就是 內(nèi)容的布局以及最小的尺寸,但是只有通過這種方式才能夠讓設計師將屏幕變化過后,頁面如何切換標注清楚(有木有明白我的良苦用心~)。
最后,為咱們文章讀者留下一個小小的作業(yè),大家可以標注一下 B 站官網(wǎng)是如何標注的,把你的標注寫到評論區(qū),我們下篇文章公布答案。
至于 表單、表格、詳情頁等其他頁面 如何進行標注、屏幕斷點文檔如何撰寫 我們就下篇文章繼續(xù)分享~
作者:CE青年Youthce
想了解更多網(wǎng)站技術的內(nèi)容,請訪問:網(wǎng)站技術