[Web Design系列]行動裝置與桌上型電腦的上的網頁佈局

Sean Yeh
Web Design Zone
Published in
Apr 10, 2020

當前的網站必須設計成可以在各種設備上,包括PC電腦、平板、智慧型手機和智慧型手錶等等,都可以恰當的被使用者瀏覽的狀態。

因此,在設計時不能像以往一樣只是考慮一個完整的網頁佈局,而是要去考慮當這個網頁在不同的載具下被瀏覽時該如何的被呈現出來。

塊狀佈局是網頁佈局設計的基礎

網頁的佈局設計,取決於顯示螢幕和網頁瀏覽器的規格。由於網頁文章採用水平的顯示方式,觀看網頁的瀏覽者,視線的移動方式是從左到右以及從上到下。整個頁面基本上是採用垂直方向上下的滾動操作。因此我們依序從最上方開始按照「頁首」、「內容區域」、「頁尾」的順序,採用塊狀結構一塊塊的堆疊來設計。

多層級結構的網站,通常會為了操作上方便,將重要元素放在網頁的頭部。其中最普遍的佈局方式是將全網站所共有的導覽選單(global navigator)放在網頁的頭部(header)。若是擁有上百或上千個頁面的大型網站,除了共有的選單放在網頁的頭部外,還會將該單元的導覽選單固定在側面,以提高可用性。

網頁的塊狀結構,目前的網頁設計趨勢傾向於以單欄為主
為了讓使用者不會迷路,在多層結構的網站需要提供一個指示目前所在位置的UI,例如麵包屑。

不限特定載具的適應性佈局

在配備有Web瀏覽器的各種設備(例如PC,平板電腦,智能手機和智能手錶)上可以查看網站,並且需要靈活的設計。網站必須在瀏覽器上被正確的瀏覽。由於目前的裝置包括PC電腦、平板、智慧型手機和智慧型手錶等等,都可以安裝瀏覽器,這也使得網頁設計上必須更加的彈性,才能恰當的讓各種情境的使用者瀏覽。PC電腦屬於「大尺寸的橫向螢幕」,而智慧型手機則是「小而垂直的螢幕」,兩者在尺寸和比例上差異很大。值得注意的是,平板兼具PC電腦和平板兩個特性,尺寸位於PC電腦與智慧型手機中間,處在較模糊的地帶,無法明確的被分類。

Photo by Domenico Loia on Unsplash

網站如果是在寬螢幕的場合,畫面比較寬廣,適合採用一頁裡面含有二到三欄的多欄佈局。若網站含有大量訊息的話,還可以將導覽選單設置在網站的側面。不過,當網站要在智慧型手機上顯示時,則須改以單欄佈局重新排列。在這種狀況下,將網頁設計成一頁可以同時應付寬螢幕與窄螢幕兩種情境,顯然比單獨替這兩種不同情境分別設計適當的網頁來得有效率。

適應不同設備的彈性佈局

構成網頁的元素是BOX

網頁的佈局雖然可以分成有多種樣式,如單欄式、多欄式、瀑布式佈局(Masonry Layout)以及全螢幕佈局等。實際上這些佈局可以說都屬於格線佈局(Grid Layout)的範疇。雖然我們可透過CSS樣式的設定自由地決定網頁外觀,一般在設計上還是會建基在格線佈局的基礎之上。

網頁構成的元素是像盒子一樣的區塊,可稱作BOX。不論是固定大小的格線設計或者是變動的格線設計,都是在BOX的結構下進行設計。

儘管這個概念在傳統平面設計中不並存在,但對於可在多載具設備上瀏覽的網路媒體上來說,BOX是個重要的概念。

延伸閱讀1:網頁的佈局

延伸閱讀2:什麼是Layout?

延伸閱讀3:CSS框架的使用

延伸閱讀4:Layout佈局的對齊與重複

--

--

Sean Yeh
Web Design Zone

# Taipei, Internet Digital Advertising,透過寫作讓我們回想過去、理解現在並思考未來。並樂於分享,這才是最大贏家。