[Web Design系列]網頁的佈局

Sean Yeh
Web Design Zone
Published in
Apr 8, 2020
Photo by cetteup on Unsplash

雖然網頁的Layout佈局和平面印刷出版物的佈局在某種程度上具有相似之處,您仍應將其二者視為不同。就像在設計平面物的時候,設計師會時時注意佈局是否能讓人「易於閱讀」一樣,在設計網站Layout時,設計師會則需要時時注意網頁是否能夠讓人「易於使用」。

與平面設計的差異

設計網頁Layout的設計師除了需要如同平面設計師一般,具備圖像視覺設計和編輯排版的技能外,還需要具備產品設計開發的能力。

網頁設計師在設計網站時,必須注意按鈕、捲軸、表單以及選項紐等等網站的使用者介面(UI)。讓這些UI可以讓人在使用上便利、操作上輕鬆的設計方式,是網頁設計師不得不關注的重點。這也是網頁設計與平面設計主要的不同點。

此外您還需要意識到,這是一個具備科技含量的領域。如果將現在的網頁設計與十多年前的進行比較,您會發現到目前工作流程的巨大變化。不只是CSS、javaScript、HTML5等技術和現代網頁瀏覽器(Modern Browser)的日新月異,在硬體設備上的進步,例如智慧型手機、平板等載具的流行,也大大地影響到網站的設計。

可彈性調整寬度的網頁

顧名思義,網頁上的訊息是透過網頁瀏覽器在瀏覽的。你可以把瀏覽器的「視窗」(可視區域)比做平面印刷物的「紙張」。但是,瀏覽器的視窗在電腦螢幕上,卻可以隨著使用者本人的喜好而任意改變可視區域的大小。這種特性,就讓網頁與不會隨意改變尺寸的印刷物在製作方法上產生很大的差異了。

由於網頁瀏覽器可以隨意更變視窗大小的特性,以往在製作固定寬度的頁面時,需要在網頁的左右兩邊留下一些邊距,否則可能會讓網頁的某些內容被隱藏了起來。

以往很流行仿造印刷品設計成固定寬度的網頁,當視窗小於設計的寬度時,某些內容被隱藏起來。
變動寬度網頁

在行動裝置方面,雖然它一般都具備固定寬度的視窗,但是行動裝置的顯示螢幕大小和比例會因產品款式而異(據說Android手機就有3、400種),不同的螢幕尺寸。在這樣的特性下,要設計一個網頁,很難像單純處理一張平面印刷品一樣,設計一個版面就好了。

響應式網頁設計

目前的主流網頁佈局是採用響應式網頁設計。網頁的中的內容被設計為具有可以彈性調整寬度的特性,在縮放視窗的過程中,內容可以即時自動伸縮調整或重新定位、配置來配合瀏覽器視窗當時的寬度。

頁面設計隨網站大小而變化

單頁式網站的架構

我們可以依照網站規模的大小以及結構方式來進行區分。大部分的網站都具有層級結構,從首頁開始依照類別分為這個頁面。對這類網站來說網頁導覽區塊(Navigation)的設計是不可少的元素。在網際網路上存在的網站有各式各樣,從不到10頁的輕量級小網站到數百頁、數千頁的大型網站都有。只有一頁、可以長長的滾動瀏覽的網站叫做單頁式(Single Page Web)網站。這種類型的設計方式,常常被用在製作到產品促銷網站的到達頁面(Landing page)。

#單頁式網站,你可以看這個例子

通常來說,網站為多個網頁的集合,然而單頁式網站可以在裡面設定超連結,並且提供與多頁面網站一樣的使用者體驗。

僅示意圖,實務上的網站架構有可能比這個規模大得更多

製作多層結構的網站和單頁式網站所需的工作規模有很大不同,因此需要去暸解適用於各種網站所需要的技術。

--

--

Sean Yeh
Web Design Zone

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