區塊

我們在開天闢地的時候,網頁就是從區塊開始。

<header>
  <!-- 開天 -->
</header>
<main>
  <!-- 講幹話 -->
</main>
<footer>
  <!-- 闢地 -->
</footer>

這三個屬於比較基本的切分方式,接著比較複雜的東西由 <main> 來呈現。通常在 <main> 裡面,比較時髦一點的網頁我們稱之為 SPA(Single-page application),裡面就會有更多的區塊,包含內容、內容、內容、內容還是內容。

通常,一開始會有一個主視覺,可能會像是這個樣子,

<main>
    <section class="hero">
        <h1 class="slogan">Hello World</h1>
        <h4 class="description"></h4>
        <picture>
            <source srcset="/static/hero.avif,
                /static/[email protected] 2x,
                /static/[email protected] 3x">
            <source srcset="/static/hero.webp,
                /static/[email protected] 2x,
                /static/[email protected] 3x">
            <img srcset="/static/hero.jpg,
                /static/[email protected] 2x,
                /static/[email protected] 3x"
                src="/static/[email protected]"
                alt="Hello World">
        </picture>
    </section>
</main>

然後他就會乖乖的排排站好。

開天闢地講幹話

可是不對啊,我想要的是文字在左邊,然後圖片在右邊的這種感覺。所以,這裡所謂的區塊就會分成左邊跟右邊,是一個相對單純的顯示方式。對於這樣的標籤結構來說,並沒有不妥,只需要從樣式表做些調整就可以了。

例如說飄向 左方

然後就會發現了一些狀況,例如說 <h1>, <h4><picture> 在同一層,都是 float 的話會遇到大家都排在一起的問題。但是,我想要文字的 <h1><h4> 在同一個區塊,然後 <picture> 自己在右邊。

如果熟悉一點格線系統的話,使可以用 order 來解決這方面的問題。

其他的部分套路都差不多,你就是必須使用一些工具來解決區塊跟文字排版的問題,樣式表會是你的好幫手。至於是不是要用格線系統,以目前的普及程度來說,可能還要稍等一下。不過,隔壁棚的 Bootstrap 5 好像已經有在用了,或許能廣泛運用的時間也應該近了。

我也寫過一點 Grid,不嫌棄可以參考看看:

[CSS] 關於 Grid Layout 的使用姿勢


上面我們遇到的問題是,在標籤結構面上,我們盡量不去做額外的更動或繁雜的巢狀結構。那麼你就會遇到區塊流向的問題,如上面的狀況一樣,如果我使用了 float 的飄移效果來調整,我勢必需要對原有的結構做調整。不行嗎?可以,但是文件流向未必會符合我們所期待的樣子。

例如我想要有一點圖繞文的效果。

在網頁設計時,一般普通的情況下,我們是由大尺寸開始製作,例如說 4K 的寬度,然後一路做到所謂的「手機版」。然後如果你遇到的設計師沒有那麼天才的話,應該不至於拿到寬度是 2160px 的設計稿才對。

接著,你需要思考的事情是,

  1. 最大滿版是 3840px
  2. 最小的尺寸是 iPhoneX 的 375points,如果 @1x 就是 375px
  3. 然後中間應該要經過幾個尺寸?
  4. 你可以參考 這個網站 的統計數據。
  5. 最後思考一下是不是要放棄。

如果設計師沒有考慮那麼多尺寸的話,建議前端工程師還是回頭找他討論會比較好。這不僅僅是圖片被放大或縮小的問題。文字本身也屬於設計的一環,文字的流向、斷點、行距、留白等等等,如果靠腦補能解決的話,那就真的阿彌陀佛了。


我想要定位點

其實有做過、玩過、用過所謂的所見即所得編輯器,就會發現,大家都把這個東西想像成 Microsoft Word,或是 Google Docs,總覺得應該是萬能的,排出來就應該要一樣,不然怎麼叫「所見即所得」。

那個有序列表我要中文的一二三,後面要頓號,下面的字要跟著頓號。
你看我 Word 就這樣啊。
怎麼?你排不出來嗎?
這編輯器怎麼那麼難用!

事實上,我們無法讓客戶或使用者理解到「網頁」的事情跟「文字編輯器」是兩件事,他只會跟你說,

啊你看 Google Docs 可以耶~
為什麼貼過去會歪掉
這編輯器怎麼那麼難用!

所以回到「流」的面向,文字與區塊在設計呈現時,必須避開一些可能會讓人有無限遐想的地方,舉例來說,

  • 內容文字區塊,避免無端刻意斷行。
  • 這個年代沒人在跟你文繞圖。
  • 這邊要放X康少女體。
  • 這圖片跟這圖片再分開一點,大概 0.5px
  • 這邊要小字 12px 不夠小。

上面吐嘈的點太多我就不贅述了。


所以說那個手機版

一樣還是從「流」出發,請從手機版開始「往上」設計。當然這個作法因人而異,不過,請諸位前端工程師,從最小尺寸的行動裝置尺寸開始「往上」思考。

沒有為什麼,因為現在手機使用量是大宗!

雖然 Mobile-First, Content-First 的說法已經不是新的東西,但,大多數接觸到的、聽到的或是看到的,大多都還是以所謂的「桌機版」為主軸。我換個方式說,

只要客戶主管的電腦沒跑版,手機沒跑版,就是最好的 Final 版!

至於 Media Query/Content-First 的事情,可以看看我 7 年前的廢話,

[CSS] 彈性化的 Media Query