B端設(shè)計師必讀:B端產(chǎn)品響應(yīng)式設(shè)計

3 評論 7305 瀏覽 64 收藏 24 分鐘

導(dǎo)讀:B端設(shè)計可能是下一個風(fēng)口,目前內(nèi)卷也很嚴(yán)重,由于B端設(shè)計師中很多都不太了解前端的技術(shù),這次給大家分享一下最近學(xué)習(xí)和整理的網(wǎng)頁布局相關(guān)的知識,本文會從B端設(shè)計師的視角帶大家了解各種布局的知識點,讓我們設(shè)計小伙伴在和開發(fā)的溝通中有一定話語權(quán)。

一文了解布局的相關(guān)知識,在與前端開發(fā)對接時掌握設(shè)計話語權(quán);深度解析B端產(chǎn)品響應(yīng)式設(shè)計的知識點。

一、開發(fā)崗位種類和入門知識

開發(fā)崗位分成前端工程師和后端工程師。

后端開發(fā)工程師主要職責(zé)是平臺設(shè)計、接口設(shè)計和功能實現(xiàn),在日常工作中與我們設(shè)計師的交流不太多。

作為UI設(shè)計師的我們,在工作中最常打交道的就是前端工程師。前端開發(fā)主要工作是將UI設(shè)計師的高保真設(shè)計稿通過代碼轉(zhuǎn)化成可用的前端頁面。前端開發(fā)又可細(xì)分為web前端開發(fā)、原生iOS開發(fā)和原生安卓開發(fā)。前端開發(fā)主要是用JS+CSS完成頁面的構(gòu)建。

這里簡單介紹一下JS、CSS和HTML。

1. HTML

HTML(HyperText Markup Language)是超文本標(biāo)記語言。超文本就是超越文本的意思,表示它不僅僅是簡單的文本,它比普通的 .txt 文件要高級。這些記號超越了普通文本的標(biāo)記,它們對普通文本的修飾,構(gòu)成了一套規(guī)則,這套規(guī)則就是 HTML。

以蓋房子類比,必須定義這個房子有多長、多寬,每一塊面積如何規(guī)劃,例如哪里是衛(wèi)生間、哪里是飯廳、哪里是臥室。將這些定義好,網(wǎng)頁也就有了最基本的樣子。

2. CSS

CSS(Cascading Style Sheets)是級聯(lián)樣式表。CSS 中的“樣式”就是指外觀。還以蓋房為例,定義好了各個空間,房子也蓋起來了,但還要裝修,例如給客廳貼壁紙、給臥室鋪地板。CSS 就是起裝修作用的,要和 HTML —起配合使用。

3. JavaScript

JavaScript是一種腳本語言,主要用于前端頁面的 DOM 處理。房子已經(jīng)裝修好,貼上了墻紙,鋪上了地板,桌子、板凳、沙發(fā)都已經(jīng)擺好,一切都很完美。可是,一個有生活情趣的住戶時常要買些新家具,或者把茶幾換個位置,這時,移動、添加、減少物件就只能靠 JavaScript 實現(xiàn)。

4. 前端開發(fā)CSS單位

前端開發(fā)人員所使用的CSS單位包含很多種,我們設(shè)計師只需要了解所有單位分成兩類,絕對單位和相對單位。網(wǎng)頁設(shè)計中最常使用的單位px像素,就是一種絕對單位。

絕對單位

絕對長度單位是固定的,用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸。設(shè)置寬度為2px,不管屏幕變大還是變小都始終顯示2px。

相對單位

相對長度單位規(guī)定相對于另一個長度屬性的長度。相對長度單位在不同渲染介質(zhì)之間縮放表現(xiàn)得更好。

二、布局種類介紹

1. 固定&靜態(tài)布局

概念

頁面保持固定的寬度,不會根據(jù)瀏覽器或顯示器的寬度大小而變化。開發(fā)使用像素這種絕對單位作為單位,頁面按照精確像素展示。

固定布局屬于前20年的技術(shù)產(chǎn)物,由于當(dāng)時的科技水平有限,使用的純平顯示器尺寸類型都較固定,所以當(dāng)時很多網(wǎng)頁都使用的是固定布局。

優(yōu)點

設(shè)計簡單,不需要考慮屏幕尺寸的限制,使用一種固定的尺寸進(jìn)行設(shè)計即可。

開發(fā)簡單,不需要考慮屏幕尺寸的適應(yīng)問題。

缺點

小屏幕時需要左右滾動才能看到全部內(nèi)容,大屏幕時兩側(cè)留白較多,空間浪費。

代表案例

目前部分網(wǎng)頁依然會使用固定布局設(shè)計開發(fā),常見于一些新聞門戶類網(wǎng)站,這一類網(wǎng)頁以大量的圖片和文字資訊為主,如:新浪網(wǎng)、中華網(wǎng)

設(shè)計建議

固定布局形式適合一些新聞門戶類等文字內(nèi)容很多的網(wǎng)站,設(shè)計師在設(shè)計過程中可以定義一種適合瀏覽的頁面內(nèi)容區(qū)寬度,通常設(shè)置為1200px,內(nèi)容區(qū)域居中兩側(cè)空間留白。

2. 流式布局

概念

流式布局(Liquid)的特點(也叫”Fluid”) 是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整,但整體布局不變。網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)。

頁面中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)(搭配min-*、max-*屬性使用),例如,設(shè)置頁面主體的寬度為80%,min-width為960px。圖片也作類似處理(width:100%, max-width一般設(shè)定為圖片本身的尺寸,防止被拉伸而失真)。

優(yōu)點

布局保持不變,內(nèi)容跟隨頁面寬度變化去做變化,內(nèi)容會在大屏和小屏幕之間的寬度變化而變化,能夠適應(yīng)大屏和小屏之間的顯示。

缺點

內(nèi)部字體無法跟隨變化大小

如果屏幕尺度跨度太大,那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示。

代表案例

阿里云網(wǎng)頁版在低于750px分辨率時采用流式布局方式。

設(shè)計建議

流式布局在設(shè)計中使用頻率較少,在設(shè)計中需要注意寬度變化后導(dǎo)致的內(nèi)容高度變化,設(shè)計時可以考慮做一種最大寬度的效果和最小寬度的效果。

3. 自適應(yīng)布局

概念

自適應(yīng)布局是分別為不同的屏幕分辨率定義布局,即創(chuàng)建多個靜態(tài)布局,每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部(頁面元素位置發(fā)生改變),但在每個靜態(tài)布局中,頁面元素不隨窗口大小的調(diào)整發(fā)生變化??梢园炎赃m應(yīng)布局看作是靜態(tài)布局的一個系列。

優(yōu)點

在多個不同尺寸設(shè)備終端下查看網(wǎng)頁內(nèi)容,并且在小屏幕下也能保證相對好的閱讀體驗,對于不同的分辨率能夠靈活的進(jìn)行操作應(yīng)用

通過單一的URL地址收集所有的社交分享鏈接。你可以為創(chuàng)建更好、更友好的網(wǎng)站而做出積極貢獻(xiàn)。

缺點

設(shè)計工作量大,需要根據(jù)不用的頁面設(shè)計不同寬度的設(shè)計稿

頁面存在多個版本,每個版本都必須單獨更新。通常,設(shè)計師需要針對6種最常見的屏幕寬度進(jìn)行設(shè)計。320、480、760、960、1200和1600dp。而且,這個數(shù)字還在不斷增長,這使得設(shè)計師在現(xiàn)場維護(hù)方面的工作變得更加艱辛和耗時。

代表案例

Amazon在自己的頁面中使用了部分寬度自適應(yīng)的方法,與使用自適應(yīng)網(wǎng)頁設(shè)計的其他網(wǎng)站類似,亞馬遜更加鼓勵用戶下載其官方APP。據(jù)報道,通過采用自適應(yīng)設(shè)計,亞馬遜移動端的訪問速度比以往的響應(yīng)式網(wǎng)頁設(shè)計提高了40%。

設(shè)計建議

對于UI設(shè)計師而言,一旦團(tuán)隊確定使用自適應(yīng)布局開發(fā)產(chǎn)品,就需要做多套設(shè)計稿尺寸。對于自適應(yīng)布局而言,就是根據(jù)不同的頁面寬度加載不同的頁面。

常用的設(shè)計尺寸使用600, 840, 960, 1280, 1440, 和1600dp作為斷點,這里的斷點個數(shù)和尺寸可以根據(jù)實際情況靈活去變化,主要是根據(jù)目前終端所在的寬度進(jìn)行選擇,例如產(chǎn)品目標(biāo)用戶使用筆記本的數(shù)量多,可以將1366作為斷點。

4. 響應(yīng)式布局

概念

隨著CSS3出現(xiàn)了媒體查詢技術(shù),又出現(xiàn)了響應(yīng)式設(shè)計的概念。響應(yīng)式設(shè)計的目標(biāo)是確保一個頁面在所有終端上(各種尺寸的PC、手機(jī)、手表、冰箱的Web瀏覽器等等)都能顯示出令人滿意的效果。

對CSS編寫者而言,在實現(xiàn)上不拘泥于具體手法,但通常是糅合了流式布局+彈性布局,再搭配媒體查詢技術(shù)使用?!謩e為不同的屏幕分辨率定義布局,同時,在每個布局中,應(yīng)用流式布局的理念,即頁面元素寬度隨著窗口調(diào)整而自動適配。即:創(chuàng)建多個流體式布局,分別對應(yīng)一個屏幕分辨率范圍??梢园秧憫?yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計理念的融合。

優(yōu)點

響應(yīng)式布局設(shè)計產(chǎn)品能夠給用戶帶來無縫的體驗感,無論使用哪種設(shè)備(臺式機(jī),移動設(shè)備等),訪客都將獲得相同的無縫體驗。即使當(dāng)它們從一種設(shè)備過渡到另一種設(shè)備時,也會給人一種熟悉和信任的感覺。

對于B端產(chǎn)品來說,跨終端辦公是今后的趨勢。那么響應(yīng)式設(shè)計對于B端產(chǎn)品來說尤為重要,實現(xiàn)同一個頁面在pc和pad上都能夠流暢查看且操作。

缺點

響應(yīng)式網(wǎng)頁設(shè)計最大的擔(dān)憂之一是加載時間。響應(yīng)性網(wǎng)站會為所有設(shè)備加載信息,而不僅僅是訪問者正在查看您網(wǎng)站的設(shè)備信息。

要匹配足夠多的屏幕大小,工作量很大,設(shè)計也需要多個版本。

代表案例

蘋果官網(wǎng)

設(shè)計建議

與自適應(yīng)一樣,對于UI設(shè)計師而言,一旦團(tuán)隊確定使用響應(yīng)式布局開發(fā)產(chǎn)品,就需要做多套設(shè)計稿尺寸。每套設(shè)計稿在不同尺寸下設(shè)計元素以及導(dǎo)航要發(fā)生相應(yīng)變化,比如在寬度縮小到750,考慮設(shè)備為移動端,內(nèi)容在設(shè)計側(cè)考慮移動端規(guī)范,需要遵循移動端的導(dǎo)航與用戶習(xí)慣。

在實操過程中,我們需要更多分析競品以及采用響應(yīng)式布局的其他產(chǎn)品頁面,并且能夠熟悉掌握各個終端的設(shè)計規(guī)范。

三、網(wǎng)頁響應(yīng)式設(shè)計策略

不同斷點間屏幕上的界面相互切換適應(yīng)的策略有:展現(xiàn)、轉(zhuǎn)變、分割、重排、擴(kuò)展和移位。

1、展現(xiàn),小屏幕上隱藏的UI信息在屏幕增大時可以展現(xiàn)出來,如下圖所示本來隱藏在手機(jī)側(cè)邊導(dǎo)航中的菜單項在平板的左側(cè)直接顯示出來了。這一點也和以600為分界的策略相呼應(yīng),在更大的屏幕上直接顯示出兩級信息:

2、轉(zhuǎn)變,界面元素從一個組件變?yōu)榱硪粋€組件,這一點也說明組件的使用并不是一成不變的,可以根據(jù)屏幕的大小選擇合適的組件。如下圖所示,側(cè)邊導(dǎo)航的菜單項可能在大屏上顯示為標(biāo)簽;小屏幕上的文字列表項可以在大屏上顯示為圖片網(wǎng)格列表:

3、分割,分層的信息在一個大的空間里鋪開:

4、重排,界面元素可以重新排布以填滿新的空間:

5、拓展,界面元素在大屏幕上展開為更大的尺寸:

6、移位,界面元素調(diào)整到更合適的位置:

四、B端產(chǎn)品的響應(yīng)式介紹

1. 布局

目前有很多大廠商都出了自己的B端系統(tǒng),如Arco、element。解讀響應(yīng)式設(shè)計,我在這里選擇了 AntDesign 的布局相關(guān)規(guī)范。

Ant design中,主要應(yīng)用了兩種典型的適配布局形式,左右布局和上下布局,響應(yīng)式規(guī)則主要作用在工作區(qū)中的內(nèi)容區(qū)域中。

在這個區(qū)域中,Ant 采用了 24 列柵格(Coloum)、23 列水槽(Gutter)的柵格系統(tǒng)。其中水槽數(shù)值是固定的,內(nèi)容區(qū)域減去 23 列間隔后,剩下的部分等分成 24 個格線。

2. 柵格系統(tǒng)

柵格系統(tǒng)可以讓你依靠秩序與邏輯去完成設(shè)計。

柵格系統(tǒng)優(yōu)勢:

減少決策成本提高設(shè)計理解力:

柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考,它讓頁面設(shè)計變得有規(guī)律,從而減少了設(shè)計決策成本;例如發(fā)送消息,預(yù)訂酒店房間或乘車。用戶能夠連貫的理解并找到找到下一條信息或下一步要采取的步驟。

響應(yīng)化:

使用產(chǎn)品時,人們通常會在多個設(shè)備之間切換,以完成該產(chǎn)品的單個任務(wù)。所以響應(yīng)式設(shè)計不應(yīng)該是一種奢侈品,而是一種必需品。這意味著設(shè)計師不能再為單個設(shè)備的屏幕構(gòu)建。多設(shè)備環(huán)境迫使設(shè)計人員根據(jù)動態(tài)網(wǎng)格系統(tǒng)進(jìn)行思考,而不是固定寬度。使用網(wǎng)格可以跨不同屏幕尺寸的多個設(shè)備創(chuàng)建連貫的體驗。

加速團(tuán)隊協(xié)作設(shè)計:

當(dāng)多位設(shè)計師共同設(shè)計產(chǎn)品時,一個統(tǒng)一標(biāo)準(zhǔn)就變得尤為重要。網(wǎng)格系統(tǒng)有助于將界面設(shè)計工作分開,因為多位設(shè)計師可以在統(tǒng)一的布局下進(jìn)行不同部分工作,并且無縫集成并保持連貫。

加速開發(fā)并保證視覺還原:

大多數(shù)設(shè)計項目的落地,涉及到設(shè)計者和開發(fā)者之間的溝通協(xié)作。柵格化提高了頁面布局的一致性;從而提升了整個設(shè)計開發(fā)流程的效率、并能幫助開發(fā)者實現(xiàn)較為理想的設(shè)計還原。2.柵格系統(tǒng)應(yīng)用

列和槽(Columns and Gutters)

柵格系統(tǒng)的基礎(chǔ)應(yīng)用,就是對內(nèi)容模塊分配指定數(shù)值的 “列”,比如一個組件的寬包含 3 列、4列、或者 12列。在同一行中,總共包含 24 列,橫向的元素按照設(shè)計師設(shè)計的大小比例平分這24列。

列的數(shù)量越多,頁面就會被分割的越“碎”,在頁面設(shè)計時就會越難把控,適用于業(yè)務(wù)信息量大、信息分組較多、單個盒子內(nèi)信息體積較小的頁面設(shè)計。

頁面邊距(Side Margins)

在響應(yīng)式設(shè)計中,你選擇了一個頁面邊距之后,縮小頁面寬度時頁面還是會有你設(shè)置的最小頁面邊距,直到到達(dá)下一個響應(yīng)點(breakpoint)。當(dāng)你增大頁面寬度時,頁面就有更多的頁面邊距,直到頁面寬度到達(dá)下一個響應(yīng)點(breakpoint)。

模塊

模塊就是頁面中的設(shè)計區(qū)域,可以是一段文字,一張圖片,或是其他更加豐富的元素。背景元素并不能算作是設(shè)計模塊,所以并不需要遵循柵格系統(tǒng)。模塊的定義是很靈活的,它可以是個小的單位或是元素,也可以是一個元素豐富的區(qū)塊。

創(chuàng)建好畫布以后,在需要響應(yīng)式的區(qū)域創(chuàng)建出對應(yīng)尺寸的24柵格系統(tǒng),一個24柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被2等分、3等分、4等分、6等分、12等分,然后在該柵格體系內(nèi)定義寬高、間距即可,Ant 的框架會自動幫助我們完成響應(yīng)的功能,具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來定。

3. 響應(yīng)式設(shè)計方法

第1步:確定列的數(shù)量

根據(jù)頁面內(nèi)容復(fù)雜程度確定列的數(shù)量。

根據(jù)前端框架確定列的數(shù)量,例如ant使用24列柵格。

第2步:定義水槽和邊距

確定頁面邊距,通過邊距算出水槽的寬度。

第3步:設(shè)計工具布局設(shè)置

figma或者sketch都有設(shè)置布局的功能,這里以sketch為例展開:

利用 sketch 的布局設(shè)置功能,即可快速搭建出網(wǎng)格系統(tǒng)的參考布局,在平時做設(shè)計的過程中,可以經(jīng)常使用 Ctrl+L 快捷鍵切換布局的顯示,提高設(shè)計效率。

Total Width:

就是內(nèi)容區(qū)域(Container)的值

Offset:

表示柵格的偏移量,我們只要設(shè)定完成以后按Center按鈕即可,會自動居中;

Number of Columns:

就是柵格數(shù)

Gutter on outside:

是非常重要的設(shè)置,勾選以后才能跟前端的柵格算法匹配。

Gutter Width:

就是柵格之間的間距

Columns Width:

就是柵格的寬度

第4步:設(shè)置斷點

斷點是自定義屏幕的寬度范圍,在不同范圍下確定不同的布局規(guī)則,這是為了適應(yīng)不同的設(shè)備和屏幕尺寸。

先從 Break Point斷點的個數(shù)來看,Sales Force 的斷點個數(shù)最少,只有3個。個人認(rèn)為的原因是 Sales Force 的用戶群體使用的都是PC端,因為大多為后臺操作,所以 Break Point 較少,而且從開發(fā)成本來看,斷點越多,規(guī)則越復(fù)雜,意味著研發(fā)成本越高。而其他三家都有自己的硬件設(shè)備,為了設(shè)計能更好的服務(wù)于全端的設(shè)備,所以斷點個數(shù)較多。

根據(jù)設(shè)計稿常見尺寸,我們可以得出下面結(jié)論:

  • 0-599px 大致為手機(jī)適配
  • 600-1023 大致為平板適配
  • 1024-1439 大致為筆記本電腦
  • 適配1440+ 大尺寸適配

經(jīng)過多年實踐,以這幾種尺寸作為斷點,是不會有錯的。

 

本文由 @晨屹 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 會一點前端基礎(chǔ)代碼,感覺挺簡單的。因為前端大部分是UI人員在設(shè)計,程序員只需要用代碼實現(xiàn)即可。

    來自四川 回復(fù)
  2. 大學(xué)選修有選到網(wǎng)頁設(shè)計課,當(dāng)時老師有講到前端和響應(yīng)式布局,個人感覺它還是很重要的,尤其是B端,因為它極其影響使用體驗。

    來自四川 回復(fù)
    1. 是的,B端產(chǎn)品很多都是基于web端進(jìn)行展示的。

      來自廣東 回復(fù)