拿到 UI 時(shí)，前端人該如何思考？
經(jīng)常有人私信我，小智這個(gè)設(shè)計(jì)圖用 CSS 要怎么布局呀，這個(gè)按鈕要怎么畫的。所以今天，在這篇文章我們來介紹一些新的布局的方法，希望對智米們有些用處。
把設(shè)計(jì)細(xì)節(jié)放在一邊
我通常做的第一件事就是把設(shè)計(jì)細(xì)節(jié)放在一邊。我想先知道這次設(shè)計(jì)主要包括哪些部分，然后在關(guān)注每個(gè)部分的細(xì)節(jié)?？紤]以下UI：
在上面UI中，有以下特點(diǎn)：
- Header/Navigation
- 中間內(nèi)容 部分
- 底部的 How it works 部分
接著，我們先把這三個(gè)主要部分抽象出來：
抽象后，我們可以看到主要的部分，主宋就可以幫助我們考慮如何布局組件，而不用考慮每個(gè)組件的細(xì)節(jié)。
我是這樣想的：
- Full-width header：頭部的導(dǎo)航欄
- Centered Content：中間內(nèi)容水平居中，注意，這個(gè)一般需要設(shè)置最大寬度 max-width。
- How it works：這是一個(gè)4列的布局，整個(gè)部分都被限制在一個(gè)包裝器中。
接著，把上面三個(gè)部分用代碼表示出來：
- <header></header>
- <section class="hero">
- <!-- A div to constraint the content -->
- <div class="hero__content"></div>
- </section>
- <div class="wrapper">
- <!-- 4-columns layout -->
- <section class="grid-4"></section>
- </div>
因?yàn)槲覀冇幸粋€(gè)4列的部分，這里我使用 CSS網(wǎng)格：
- .wrapper {
- margin-left: auto;
- margin-right: auto;
- padding-left: 1rem;
- padding-right: 1rem;
- max-width: 1140px;
- }
- .hero__content {
- max-width: 700px;
- margin-left: auto;
- margin-right: auto;
- }
- .grid-4 {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- }
拿到 UI 時(shí)，我們不是馬上就開始行動，而是要觀察整體的構(gòu)成，先實(shí)現(xiàn)每塊的構(gòu)成，然后再去深入構(gòu)成的實(shí)現(xiàn)。
文章頁面
在本例中，我們有一個(gè)文章頁面布局。這是UI，它包含:
- 頭部
- 圖片
- 文章標(biāo)題
- 文章內(nèi)容
- 側(cè)邊欄(旁邊)
我們再一次把它抽象成主要的幾個(gè)部分：
抽象主要包括幾個(gè)部分：
- 網(wǎng)站的頭部寬度是 100%
- 標(biāo)題：包含文章標(biāo)題和說明，其內(nèi)容左對齊，要設(shè)置最大寬度
- 兩列布局，包含main和sidebar元素。
- 文章內(nèi)容，水平居中并有最大寬度。
文章-頁面標(biāo)題
這里不需要什么布局方法。一個(gè)簡單的max-width就可以了，當(dāng)然還需要加些 padding，增加一些舒適距離。
- .page-header {
- max-width: 50rem;
- padding: 2rem 1rem;
- }
文章- Main 和 Sidebar
main 元素是視口的整個(gè)寬度減去側(cè)邊欄的寬度。通常，側(cè)邊欄應(yīng)具有固定的寬度。為此，使用CSS網(wǎng)格是完美的。
- .page-wrapper {
- display: grid;
- grid-template-columns: 1fr;
- }
- @media (min-width: 800px) {
- grid-template-columns: 1fr 250px;
- }
對于文章的內(nèi)部內(nèi)容，應(yīng)該將其限制在一個(gè)包裝器中。
- .inner-content {
- max-width: 50rem;
- margin-left: auto;
- margin-right: auto;
- padding-left: 1rem;
- padding-right: 1rem;
- }
有些整體的布局后，我們來看具體的細(xì)節(jié)。
深入細(xì)節(jié)
How It Works 部分
在本文的第一個(gè)示例中，我們來看一下 How It Works 部分 的細(xì)節(jié)實(shí)現(xiàn)。
列
- 這里的步驟一，二，三，有沒有可能會增加或者減少的情況，如果有，我們應(yīng)該如何處理?
- 我們是否需要列的高度相等，特別是當(dāng)一個(gè)卡片有一個(gè)很長的文本?
標(biāo)題
我們是否需要該部分標(biāo)題留在一邊?還是在某些情況下應(yīng)采用全寬?
響應(yīng)式設(shè)計(jì)
當(dāng)網(wǎng)頁寬度縮小時(shí)，我們需要做響應(yīng)式嗎?如果有, 那觸發(fā)的條件是什么?
這些是我們開發(fā)可能會遇到的問題，你覺得怎么樣?作為一名前端開發(fā)人員，我們應(yīng)該考慮這樣的邊緣情況，而不僅僅按 UI 照貓畫虎這樣簡單。
由于本文著重于思考過程，所以無法詳細(xì)介紹一個(gè)個(gè)有可能出現(xiàn)的情況。
在上面的模型的第一個(gè)和第三個(gè)版本中，步驟數(shù)分別是3和2。我們可以使CSS動態(tài)化來處理嗎?可以。
HTML
- <div class="wrapper">
- <section class="steps">
- <div>
- <h2>How it works</h2>
- <p>Easy and simple steps</p>
- </div>
- <div class="layout">
- <div class="layout__item">
- <article class="card"></article>
- </div>
- <div class="layout__item">
- <article class="card"></article>
- </div>
- <div class="layout__item">
- <article class="card"></article>
- </div>
- </div>
- </section>
- </div>
CSS
- .steps {
- display: grid;
- grid-template-columns: 1fr;
- grid-gap: 1rem;
- }
- @media (min-width: 700px) {
- .steps {
- grid-template-columns: 250px 1fr;
- }
- }
- .layout {
- display: grid;
- grid-template-columns: 1fr;
- grid-gap: 1rem;
- }
- @media (min-width: 200px) {
- .layout {
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- }
- }
我使用了CSS grid minmax()和auto-fit關(guān)鍵字。這在卡片數(shù)量可以增加或減少的情況下很有用。
內(nèi)容部分
圖片
- 圖片應(yīng)如何呈現(xiàn)?它是每天變化的還是應(yīng)該從CMS更新?
- 是使用HTML
還是CSS background?
- 圖片的預(yù)期長寬比是多少?
- 我們是否需要根據(jù)視口大小使用多個(gè)圖像大小?
- 圖片的部分是否可能會換成視頻?
高度
內(nèi)容最小高度是多少?
內(nèi)容長度
我們需要設(shè)置標(biāo)題和描述的最大長度嗎?如果是，設(shè)計(jì)期望處理的最小值和最大值是多少?
元素之間的間距
如何處理垂直間距?
內(nèi)容中心
如何水平和垂直居中內(nèi)容?已知我們只知道寬度，而高度是未知的。
限制內(nèi)容
為了提高可讀性，最好限制內(nèi)容。理想的寬度是多少?
響應(yīng)式設(shè)計(jì)
我們需要根據(jù)視窗寬度改變字體大小嗎?如果是，我們應(yīng)該使用基于px的單位，視口單位，或CSS clamp()函數(shù)?
根據(jù)我們所做的項(xiàng)目的性質(zhì)，我們應(yīng)該找到這些問題的答案，這將幫助我們確定組件的構(gòu)建方式。
有時(shí)，很難回答每個(gè)問題，但是問得越多，獲得良好的無錯(cuò)誤結(jié)果的可能性就越大。
在本部分中，我將解決子元素之間的間距。我喜歡使用flow-space實(shí)用程序。我是從Andy Bell的Piccalil博客中學(xué)到的。目的是在直接同級元素之間提供間距。
html
css
- .flow > * + * {
- margin-top: var(--flow-space, 1em);
- }
最后的想法如前面所見，實(shí)現(xiàn)組件的過程不僅要使其與 UI 完全匹配，還要考慮邊緣情況。希望智米從本文中學(xué)到至少一件事。
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
