網頁的基本結構可大致分為三類，一是跳到各小項目首頁的全區導覽列(global navigation)，二是在各個小項目中移動的區域導覽列(local navigation)，三是各個小項目中的文字、圖案等內容。這些全部清楚區分後，再依各個區塊設計不同的樣式，就完成了最基本的架構。
介紹完基本畫面結構之後，就要設計網頁的內部組成要素，我們稱之為「標誌系統設計」。將網頁中各種按鈕、清單、標籤的樣式，以及字體與擺放的位置，做統一的設計，是掌握網站設計的基礎，如此才能讓整個網站的設計愈有整體感。
在設計網頁時，從整體版面的結構規劃，到細部組成的製作與排列，都有許多重要的技巧。只要牢記這些原則，並時時注意細節與整體的一致性，就能設計出好的網頁版面。
導覽的部分位於畫面上方以及左方，將資訊有效地索引化的這種形式，是最多人採用的設計基本型。由於這種方式可以容納很多連結按鈕，因此很適合用於設計滑鼠按鈕次數少的網站，只要將設計性的重點運用在網站LOGO、全區導覽、或是左邊的導覽部分，就可以拉大和其他網站的差距。此外，這種設計的L字型大小設定，也會影響到網站的樣式。
標準倒L字型：倒L字型的畫面結構是將網站整體共用的全區導覽放在上方，從全區導覽選擇之各選單的子導覽放在畫面的左邊，子導覽和內容會隨網頁更動。這種類型適合提供分類項目多、內容豐富的網站。
分類項目少、實體內容較少的網站適合的類型：從首頁點選全區導覽時會出現各個小項目的這種選單類型，就很適合分類項目少或實體內容較少的網站。左邊這欄出現的是展開資訊各層內容的導覽。
另外，在同一個階層內的導覽則安排放在實體內容的上方。如果要提供的資訊內容較少，也可以將網站整個資訊用此結構來呈現於畫面上。
更簡單的倒L字型：直向導覽的結構，一次所能列出的選單比橫向導覽的更多。例如流行服飾用品等網站，提供的就是一個商品項目的網站。而整體選項較少的網站，就可以將選項統一在畫面左右兩邊，這種導覽方式使用起來會比較方便。
小心!!不要塞太多資訊
像入口網站等專門提供資訊的網站，就要儘量減少使用者一層層找到資料的點擊次數。減少點擊次數一般認為是可以透過導覽或網站設計來解決的。
此外，一般企業的網站則會希望一次提供的資訊少一點，改成讓瀏覽者一層一層地找到自己所需的資訊。因此，設計的主流也從「資訊量大型」慢慢變成「資訊量少型」。在思考設計架構時，希望可以先考慮到如上的現狀，再決定是否要採用倒L字型這種可以加入很多介紹內容的樣式。
Design Sample
http://www.fmworld.net/fmv/
富士通FMWORLD.NET
全區導覽和分類導覽的關係一目了然的樣式。
http://cweb.canon.jp/co-profile/company/index.html
Canon網站
網站LOGO和分類瀏覽列都有的標準型。
上方選單型適合可將資訊單純地依項目分類的網站。所有的網頁共同使用的選單稱為全區導覽(Global Navigation)。首頁只有全區導覽，可以將操作性能最簡化，而各網頁的首頁則是安排用以連結到各小項目的子選單(區域導覽：Local Navigation)。這種方式充分考量到顯示器可顯示的範圍。全區導覽顯示出提供哪些資訊，並利用關鍵影像(key visual)打造企業的形象，這樣的網站設計方式可加深瀏覽者對企業的印象。
Above-the-fold(可顯示範圍)
指網站的目標顯示器(target monitor)一次可顯示的最大範圍。這本來是報紙或標題呈現方式的用詞。報紙在送到家家戶戶時一般都是折成四分之一大小，重要的頭版消息的排版，都要安排得讓讀者很快就能看到標題或掌握其中內容。而這個折成四折的一面就是above-the-fold。不管是報紙或網站，版面編排或設計都要注意，讓閱覽者在閱覽的瞬間，就能掌握到最重要的資訊。
Design Sample
http://nagafuji.jp/
長藤寬和設計室
讓版面呈現「破格」的效果，故意要讓讀者大吃一驚。
「格線系統」(grid system)是用來調整本文區和圖片位置的基本排版技巧。除了處理文字外，也可以運用於安排圖像素材的平面結構，可說是設計技巧的「王道」。基本的做法是在整個畫面上拉出導引線，沿著線安排各個素材，但格線的基準值會影響到畫面整體的平衡感，因此開始設計前必須要先訂出這個基準，而如果設計的是網站，基準則是網站LOGO的大小。
拿掉格線吧!
格線系統可以讓網頁設計的各個要項正確對齊，整體印象讓人感覺次序井然，然而這樣也可能會陷入單調、無趣的窼臼。所以會用格線法進行設計後，也要學習不拘泥於格線，以做出更具豐富變化的設計。
Design Sample
http://www.folietto.at/
folietto
一看即知是直向拉出格線的設計法，整個格線架構相當嚴謹。
http://www.cci.co.jp/
Cyber Communication
這種做法是將格線直接運用在網頁當中。
http://www.aiga.org/
AIGA Design Forum
這種格線架構讓網站LOGO的設計更為醒目。
「黃金分割」是指建築物、繪畫等，在造型上進行空間分配時，常常用來做為基準的矩形比例，在我們日常生活中常用運用到黃金分割比的矩形做設計，如撲克牌、名片等。這個比例聽說是人類視覺認知覺得最美的形狀。做網頁設計時如果您用格線系統來進行畫面分割，就可以使用此比例來設定基準網格的大小，以便讓畫面看起來更具整體感。就算只是畫面中的某個部分採用這個比率，也能夠讓您的設計呈現出極佳的均衡感，可說是極佳的矩形比例。
1:1.618
憑直覺做設計就不用網格嗎?
街頭的海報等的廣告媒體中，有些看來好像只是將這些插圖隨意安排而已。這種憑直覺的設計樣式，是不是和使用網格的設計手法不同？其實不然。這些乍看之下毫無章法的設計，有不少都還是有其格線架構的。並不是使用網格，成品看起來就一定會很網格風。網格並非完成一板一眼、方方正正的設計的方程式，而是讓人有所依據的工具。
Design Sample
http://www.wedgwood.jp/
Wedgwood官方網站
以直向長方形為基準，用網格架構出整個畫面的實例。
http://www.design-museum.de/vitra/
Vitra Design Museum
畫面中有些部分分為矩形、有些非矩形，視覺上看起來比較開闊。
http://www.pdk.pl/index_f.html
Powszechny Dom Dredytowy we Wroc_awiu S.A.
中間的主要畫面雖然是相同比例的矩形，可是卻故意放斜的，感覺趣味橫生。
「碎形(fractal)」是指局部的結構與整體的結構很相似的意思。網頁設計方法中也有一種方式是讓區塊的形狀與整體相同，或是同時使用幾個相似的形狀，以讓畫面呈現規則性。例如，全區導覽等五個主要的功能構成的畫面中，全區導覽的選擇有五個，分類導覽的選擇也有五個。這樣的做法主要的訴求是畫面簡單，易懂。採用這種法則，可以做出相當簡單的網頁設計。
讓瀏覽者印象深刻
網站很重視好用、易懂等功能性，但企業的網站還得同時顧及企業的品牌訴求、發揮廣告媒體的功能。電視廣告等媒體都是以讓觀眾記得廣告內容為第一目的，所以網站也是一樣，採取的樣式也要讓人印象深刻。又要顧及搜尋的便利性、Web標準，又要顧及可用性，真的很辛苦的工作，但希望大家身為設計者，還是能找到網路設計表現的新出口。
Design Sample
http://hochouki.com/
日本助聽器工業會
用了很多矩形讓整體感覺很方正。
http://www.dankimo.com/
男用和服協會
中間Flash部分的功能有三個，選單群也只有三個，感覺很有律動感。
當文字、圖像，以及導覽等內容資訊集中在一個畫面時，要將各個內容材料一體化，就必須要用位置關係或顏色來做連結，利用位置關係將素材予於群組化，就要善用邊界的效果，而邊界寬窄的安排所造成的客觀視覺感受，正是設計師要培養的能力。在設定邊界有困難、或在有限的範圍內，必須區分操作性等功能時，則可用配色來進行相關連結設定。
安排的位置不同，相關的程度也不同
安排的位置與關聯性的印象有關。如果每個地方的邊界都一樣，就會給人「統一」的印象，有的地方邊界較寬，那會像是分成兩組或三組；如果邊界很大，佔各項要素的二分之一左右，就會給人「擴散」的印象。而「擴散」會給人各內容並無相關的印象。
安排的位置和顏色在關聯性尚有何不同
安排的位置再加上顏色後，變化就更多了。「統一」中再用顏色加以區分的話，就可以給人「條件相同，但內容有所不同」的印象。分成兩組或三組的話，顏色則有表現優先順序的意思，在「擴散」當中，則讓人感覺在眾多不同的項目當中仍具有相關性。
您真的知道嗎?
位置相近的圖，比位置較遠的圖看起來更有相關性。您一定會覺得這種事是基本常識，不用說也知道。可是世界上卻有很多設計根本就沒有想到這些基本的事情。實際上越是覺得理所當然的事情，就越難以有形或無形的方式表現出來。認知科學當中，把腦中所想的事情以有形的方式表現出來，或是告訴他人，就稱為「外化」。任何感覺如果不能外化，就無以判斷真假。整天都埋頭苦幹的設計師們，更要特別注意這點。
Design Sample
http://www.epicurious.com/
epicurious
右邊的設計看起來像全區導覽的延長，可以看出操作上的相關性。
http://www.misawa.co.jp/
MISAWA
這個網站不是用位置來呈現相關性，而是用其他方法來表現不同的屬性。
http://tec.taiko.co.jp/
大興物產WEB目錄
只以配色來區分內容屬性，以畫面的整體感為重。
「魔術數字7加減2(MAGICAL NUMBER OF SEVEN PLUS MINUS 2)」是1956年George A.Miller發表的心理學法則，點明人一次能處理的資訊數上限。「人一次能掌握的事情約為7個」。這個法則應用在日常生活上很多地方，例如，報紙一個版面除了廣告的地方外，會登的報導大約是7個，而電氣化產品的操作性能大約是7項。而這點也可以運用在網站上。
內容架構上要去蕪存菁
如果網站內容分區多於7個時，就算整個畫面可以容納得下，還是會有缺點，就是很難一眼就找到要找的主題內容。不只如此，也無法讓閱覽者很快看出這個網站的主題為何。尤其像是要建立公司品牌這種目標越是明確的網站，內容結構就要越單純。
培養「比」的感覺
所有設計中，構成設計本身的各項主題要素之間要安排在什麼位置、要設定多大多小等，都要與周圍主題要素相比較來決定。簡單來說，在一個小的圖的旁邊放個更小的圖，原本的那個圖就變成比較大的圖了。在設計的世界裡並沒有絕對的單位，總是會隨與周圍事物的關係而產生新的狀態。掌握住「大的東西」為什麼看起來比較大、「小的東西」為什麼看起來比較小的這種「比」的概念，在設計上是非常重要的。
Design Sample
http://gap.co.jp/
GAP Japan
善用LOGO標誌的知名度，將架構盡可能地簡化
在公共設施或醫院這樣的建築物中，都有讓人潮往來更順暢的「標誌系統設計」，這些設計除了要統一樣式外，就連放置的高度或大小等也都會予於統一。具有一定操作性的網站設計也一樣，確定好設計要素的配置可以降低操作的困難。設計的秩序不只會影響使用性，也會影響美觀。定出組成要素的位置關係，在網站設計而言可說是相當基本的一個概念。
閱讀引導標誌的統一
閱讀引導標誌的設計室最容易統一的。要統一時，不只要注意形狀要統一，還有閱讀引導標誌和文字之間邊界的比例也要遵守法則，這樣才會協調。
按鈕樣式
在「執行」或「送出」這些操作按鈕的樣式已經統一的網站，表示「上一頁」、「下一頁」等表示移動的操作按鈕上用像圖一樣的小標誌或小圖樣(icon)，就可以讓整個設計看起來層次提升很多。按鈕的顏色要和連結文字(link text)的顏色統一，讓顏色也有表現相關性的功能。
緊急出口的設計
緊急出口的標誌是一個人急著跑向一個出口。其實這個標誌是世界統一的，設計者是日本設計師太田幸夫。聽說綠色和白色的配色，是因為人在吸入煙時，會將這樣的顏色看成黃色，所以設計者才做這樣的顏色安排。
Design Sample
http://www.dsp.co.jp/
Digital Scape
整個網站都用統一的箭號標誌
http://www.k10k.net/
Kaliber10000
按鈕和小圖示的樣式都有固定規格，設計水準相當高。
http://download.com/
Download.com
可以點選的文字字型都予以統一
要讓設計樣式不會鬆散，可以從文字、圖片到細節部份，都運用網格法來配置。雖然實際在進行時，主要只是在畫面上設定導引線而已，不過，該對齊的地方是否好好對齊，卻是這種設計能否成功的關鍵。因此在進行設計時，最重要的就是兼顧細部的調整和畫面整體的協調性。所以在設計時要時而近看、時而遠看自己設計的感覺。
無表格設計(No table design)
要在網路上顯示複雜的表格時常會用「設計表格」(Layout table)的手法，可是這個方法卻有讓HTML程式碼(source)複雜化的缺點。於是，後來的人就用CSS來控制各組成要素的位置，而這種流派就稱為「無表格設計」(No table design)。採用這個方法，強調的就是能夠因應Web標準技術。
Design Sample
http://8011web.com/
8011web.com
此網頁中以左邊長條狀為基準來切割畫面空間。
http://www.alistapart.com/
A List Apart
網站LOGO影響整個畫面的空間劃分。
所謂留白，是為了讓想要強調的影像等要素有更佳的呈現效果，而在其周圍留下空白空間。有人會認為網站的目的是提供資訊，留白等於就是「浪費空間」；可是這樣的設計效果具有相當清楚分明的感覺，所以在此還是想將這種手法當成一種設計技巧來介紹。像LOGO或商品影像這樣，想與其他部分或樣式做區別時，這種方法就相當好用，而且就像使用大量展示面積的家具用品展示店給人的高級感一樣，留白的空間也會給人一種很有型的感覺。(留白不一定是白色的，而是指一塊空白的區域。)
畫面上方留多點空間的重點
瀏覽器的發展日新月異，近年來更是很多人關注的焦點。分頁式瀏覽器(Tab Browser)讓使用者不用新開瀏覽器，在同一個瀏覽器中就可以開很多個不同的頁次來瀏覽網頁，很方便。各個網站可用自己設計的按鈕來操作，可是有時候碰到上方選單型設計時，常常就會不小心按到瀏覽器的按鈕，尤其是網站的按鈕和瀏覽器的按鈕接近時更是如此。所以希望讀者們在設計時，可以留個10像素左右的距離為宜。
Design Sample
http://amana.jp/
Amana
大小設定較小的網站LOGO也可透過留白的效果而看起來醒目。
http://swanq.co.jp/
swanq
此為影像直向貫穿畫面的結構，資訊內容變化的地方，也因為有留白而讓畫面轉換感覺起來更自然。
http://www.ckr.se/
CLAESSON KOIVISTO RUNE
這個設計實例特別強調網站LOGO，樣式簡單且高雅的LOGO可強調出高級感。
入門網站等資訊量多的網站，就要運用左右寬度可調整的液態設計(liquid design)。用這種手法完成的網站效果有兩種，一種是顯示畫面大小變更時，整個設計整體畫面給人的印象不變；另一種則是縮小時覺得很擠，放大時又變得畫面很閒散。產生這種區別的重點就在於標題所設的邊界大小。要讓顯示範圍變更時設計也不會亂掉的祕訣，就在於這個部分的處理。
Point1：顯示畫面大小變更，但設計感仍舊不變的網站大多是因為在網站LOGO下方設定了距離較大的邊界。只要執行這樣的設定，就能免於在顯示畫面縮小時，整個設計得擠成一團的窘況了。
Point2：各區塊不用方框框住。各區塊標題用顏色長條(在此為灰色)，區塊間就自然可以區隔開來。也因此，各個區塊項目沒有必要畫框線。看得到框線反而會讓人覺得整個畫面都是線，而給人複雜、俗套的印象。
Point3：搜尋的部分有支撐標題部份的功能。這個地方與畫面中央的內容部分不同，要用線框住以強調與左側設計之間的左右對稱性，這樣看起來結構就會很緊湊。
液態設計的基本重點
畫面左右安排寬度大小固定的導覽要素、字體設定成與中間本文部分相對應的大小，這也是很多人愛用的手法，優點是，在設定顯示完整畫面時一次可顯示的資訊量增加，可以慢慢閱覽。一般而言較少使用在首頁的設計，而會常用在一次要提供完整資訊的情況(如新聞)上。
瀏覽器也有工具列
Web網頁設計的最大寬度，一般是由顯示器的大小來決定的，不過也不要忘了瀏覽器也有工具列。工具列是畫面左邊出現的書籤(bookmark)或顯示已瀏覽網頁的功能，現在還有即時通訊的RSS顯示功能，所以有不少人會將工具列開著不關掉。在這種情況下，解析度為1280像素的17吋標準顯示器，可設計的最大寬幅也會只剩970像素而已。
Design Sample
http://www.gettyimages.com/creativeimages?country=usa
getty image
將網站LOGO儘量設小一點，以和其他部分產生足夠的間距。
http://www.goo.ne.jp/
goo新聞
長條廣告外的空間，讓瀏覽者面對那麼多資訊可以喘口氣。
如果設計的網頁是要以視覺方式來傳達某機關單位或品牌的印象，就要夠靈活、夠有創意才能勝任。如果能夠掌握這種網站的設計類型，就能確實降低設計上的困難。在設計時首先要先決定，是要讓影像充滿整個畫面，還是要讓色塊包圍住影像，還好之後再來決定整體的結構。如果想要展現影像的精美，可以採前者；如果想要展現影像處理的效果，則可採後者。
塞尚的畫面結構哲學
南法艾克斯安普羅旺斯的畫家，保羅塞尚(Paul Czanne)對二十世紀的美術影響甚鉅，他認為三維的大自然界的物體都可以利用球體、圓柱、圓錐的三種方式入畫。想必是他不斷想要設計難以在平面上展現的光與影而得到的結論吧。將事情過度簡單化的確很危險，但對於畫面結構有自己的一套想法，對版面設計而言卻是相當重要。
Design Sample
http://asia.swarovski.com/taiwan/
Swarovski Crystal
商品的硬度和設計樣式的發想有著共通點。
http://www.stylewars.com/
Style Wars
本例以繪畫的手法，充分揮灑影像設計的能力，水準相當高。
平面印刷品中，分段式版面編排方式，可以避免換行時未出現過多空白的情形。在網頁上，這種方式可以盡量減少視線大幅移動，有助充分運用空間。網頁和雜誌等不同，畫面出現的文字量較難控制，所以可以先做一個基本段落區塊，確定好瀏覽者視線集中的重點，再加入其他內容，這樣就會具有平衡感。
網頁分成兩欄
將網頁畫面分成兩欄，左邊的導覽部分全部設為靠右對齊，讓畫面看起來像是文字都向中間的分隔線對齊。用這種「左邊區塊向右對齊」的方法，文字內容很多的網站看起來也會很穩。
由上而下分割網頁空間
網頁的分段式設計基本上都是由左往右排，不過也可以由上而下排。這個結構是將網頁空間分成主題、圖片式全區導覽和文字三大部分，每一部分的內容都少少的，看起來不會塞在一起。
網頁設計的重心
報紙的重心在於發行報社名稱以及各版的重要標題，而網頁也是一樣，網站LOGO和周圍是網頁看起來穩不穩、是否有頭重腳輕、腳重頭輕問題的關鍵。所以網頁設計時就要在網頁上方的頁緣和網站LOGO設定足夠的間距，在瀏覽器的介面和網站LOGO間留白，以集中瀏覽者的視線。
現在所謂的網頁設計標準，是指套用CSS樣式的XHTML語法而言。XHTML是從包含樣式與資訊定義的HTML語法中抽出樣式設定的部份，因此光靠XHTML是無法完成網頁設計的。分離樣式與結構，是為了便於設計與維護網頁，因此學會實用性的Web標準網頁設計技巧，實為當務之急。
內容架構的基本
在XHTML語法中，一頁裏可設定的最上層標題h1只有一個。h1主要是用於網頁ID的標籤，而下層資訊則是每一則都用h2來設定。
混用
在Web標準普及之前，網站設計主要都是用table標籤來做表格設計。然而這個手法不只會讓標籤流於繁雜，而且不易標明優先順序等內容結構。雖然如此，要讓能將XHTML和CSS分別解譯處理的瀏覽器正常顯示出網頁內容，還是有很多地方要用到table(表格)，所以就有人採取大致分割網頁設計空間時就用table，要做細部設計時就用CSS來控制的這種方法。這種方法就稱為「混用」以與其他方式區別。
Design Sample
http://9rules.com/
9rules Network
各個區塊的資訊整理情形會反映在樣式上。
http://mightygoods.com/
mightygoods
內容結構包括導覽的部分都很層次井然。
如果網站設計是要傳達品牌印象的話，就要讓網站整體有一致性。像企業品牌這樣大的主題，就要讓瀏覽者從一點點小印象中慢慢堆疊出一個完整的印象，所以不管是影像或顏色都要沿著相同的主題來選擇。就網站而言，呈現效果的一致性也會連帶影響操作使用上的一致性。尤其是包含操作性在內的設計，其整體感在介面設計的領域中更被稱為「look and feel」而備受設計者重視。
不一定從首頁瀏覽起
網站要看起來很有主題首尾一致的效果，就必須要使用者是從首頁連結進來才行。使用者能按照網站設計者、資訊提供者所想，使用網站所設的導覽來逛逛這個網站的話，才會起「Look and Feel」之效果。可是，由於近年來搜尋系統的功能提升，使用者很多都不是從首頁點進網站，對這樣的使用者而言，網站的整體感或氣氛就很難感受得到。網站設計的效果有時也得要看使用者使用方式而定，希望設計者們都能先有這個概念。
Design Sample
http://www.h-kotobuki.co.jp/about/
壽屋商務飯店
導覽設計與使用的影像統一，呈現出高雅的感覺。
http://dma.ucla.edu/info/index.php
UCLA Design Media Arts
矩形擷取部分關鍵影像，與首頁風格一脈相承。
http://www.g-gravity.com/
G-gravity
用有光澤的背景呈現出令人驚艷質感，而此質感也是整個網站的共同特色。
design note
依重力概念而行
設計領域中，稱設計物的上方與下方為「天地」。做平面設計的人一般也都是說「天地」而不說「上下」。多數的設計者都能顧名思義，注意到上面代表的是「天」，下面代表的是「地」。尤其是在固定的顯示範圍內，天地的感覺就顯得相當重要。要把紙面想成是個自然環境，設計時要依重力法則來構思。
舉例來說，好看、好懂的這種設計樣式，我們會說「設計流暢」。這個「流暢」就是指畫面上風順暢地吹拂而去的感覺。一般而言，風都是和地面平行的，所以要有天和地，也才能達到「流暢」的效果。畫面上方比較空，畫面下方則要多些份量，所要呈現的東西就安排在下方，各項主體之間要有適當的距離讓空氣流通。每個設計者所說、所想的某個顏色或某個形狀可能都不一樣，但是「天地」之間的重力法則形成畫面骨架這點卻是不變。
除了上、下、左、右這樣的位置法則之外，大小、重量也會自然地呈現輕重的效果。所以大的東西放在畫面下方比較自然，而畫面上方如果是一些小東西的集合，看起來會很有整體感。在有個大圖形的畫面結構中，如果可以在附近放幾個小一點的圖形以讓大圖形與小圖形平衡，整個畫面看起來就會很穩。這種設計技巧其實正反映了自然環境的重力法則。
重量和大小會隨配色而改變，且條件越多，就越難讓樣式統一。不過不管是怎麼樣的設計，「天地」的概念一定都會是設計者的重要依據。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
介紹完基本畫面結構之後，就要設計網頁的內部組成要素，我們稱之為「標誌系統設計」。將網頁中各種按鈕、清單、標籤的樣式，以及字體與擺放的位置，做統一的設計，是掌握網站設計的基礎，如此才能讓整個網站的設計愈有整體感。
在設計網頁時，從整體版面的結構規劃，到細部組成的製作與排列，都有許多重要的技巧。只要牢記這些原則，並時時注意細節與整體的一致性，就能設計出好的網頁版面。
倒L字型的版面設計類型
所有網站都適用的設計基本型導覽的部分位於畫面上方以及左方，將資訊有效地索引化的這種形式，是最多人採用的設計基本型。由於這種方式可以容納很多連結按鈕，因此很適合用於設計滑鼠按鈕次數少的網站，只要將設計性的重點運用在網站LOGO、全區導覽、或是左邊的導覽部分，就可以拉大和其他網站的差距。此外，這種設計的L字型大小設定，也會影響到網站的樣式。
標準倒L字型：倒L字型的畫面結構是將網站整體共用的全區導覽放在上方，從全區導覽選擇之各選單的子導覽放在畫面的左邊，子導覽和內容會隨網頁更動。這種類型適合提供分類項目多、內容豐富的網站。
分類項目少、實體內容較少的網站適合的類型：從首頁點選全區導覽時會出現各個小項目的這種選單類型，就很適合分類項目少或實體內容較少的網站。左邊這欄出現的是展開資訊各層內容的導覽。
另外，在同一個階層內的導覽則安排放在實體內容的上方。如果要提供的資訊內容較少，也可以將網站整個資訊用此結構來呈現於畫面上。
更簡單的倒L字型：直向導覽的結構，一次所能列出的選單比橫向導覽的更多。例如流行服飾用品等網站，提供的就是一個商品項目的網站。而整體選項較少的網站，就可以將選項統一在畫面左右兩邊，這種導覽方式使用起來會比較方便。
小心!!不要塞太多資訊
像入口網站等專門提供資訊的網站，就要儘量減少使用者一層層找到資料的點擊次數。減少點擊次數一般認為是可以透過導覽或網站設計來解決的。
此外，一般企業的網站則會希望一次提供的資訊少一點，改成讓瀏覽者一層一層地找到自己所需的資訊。因此，設計的主流也從「資訊量大型」慢慢變成「資訊量少型」。在思考設計架構時，希望可以先考慮到如上的現狀，再決定是否要採用倒L字型這種可以加入很多介紹內容的樣式。
Design Sample
http://www.fmworld.net/fmv/
富士通FMWORLD.NET
全區導覽和分類導覽的關係一目了然的樣式。
http://cweb.canon.jp/co-profile/company/index.html
Canon網站
網站LOGO和分類瀏覽列都有的標準型。
上方選單型的版面設計類型
公司網站最常見的瀏覽架構上方選單型適合可將資訊單純地依項目分類的網站。所有的網頁共同使用的選單稱為全區導覽(Global Navigation)。首頁只有全區導覽，可以將操作性能最簡化，而各網頁的首頁則是安排用以連結到各小項目的子選單(區域導覽：Local Navigation)。這種方式充分考量到顯示器可顯示的範圍。全區導覽顯示出提供哪些資訊，並利用關鍵影像(key visual)打造企業的形象，這樣的網站設計方式可加深瀏覽者對企業的印象。
Above-the-fold(可顯示範圍)
指網站的目標顯示器(target monitor)一次可顯示的最大範圍。這本來是報紙或標題呈現方式的用詞。報紙在送到家家戶戶時一般都是折成四分之一大小，重要的頭版消息的排版，都要安排得讓讀者很快就能看到標題或掌握其中內容。而這個折成四折的一面就是above-the-fold。不管是報紙或網站，版面編排或設計都要注意，讓閱覽者在閱覽的瞬間，就能掌握到最重要的資訊。
Design Sample
http://nagafuji.jp/
長藤寬和設計室
讓版面呈現「破格」的效果，故意要讓讀者大吃一驚。
善用格線系統
所有版面設計都可運用的基本技巧「格線系統」(grid system)是用來調整本文區和圖片位置的基本排版技巧。除了處理文字外，也可以運用於安排圖像素材的平面結構，可說是設計技巧的「王道」。基本的做法是在整個畫面上拉出導引線，沿著線安排各個素材，但格線的基準值會影響到畫面整體的平衡感，因此開始設計前必須要先訂出這個基準，而如果設計的是網站，基準則是網站LOGO的大小。
拿掉格線吧!
格線系統可以讓網頁設計的各個要項正確對齊，整體印象讓人感覺次序井然，然而這樣也可能會陷入單調、無趣的窼臼。所以會用格線法進行設計後，也要學習不拘泥於格線，以做出更具豐富變化的設計。
Design Sample
http://www.folietto.at/
folietto
一看即知是直向拉出格線的設計法，整個格線架構相當嚴謹。
http://www.cci.co.jp/
Cyber Communication
這種做法是將格線直接運用在網頁當中。
http://www.aiga.org/
AIGA Design Forum
這種格線架構讓網站LOGO的設計更為醒目。
快速分割版面設計空間
以黃金分割為基準，漂亮地進行空間分配「黃金分割」是指建築物、繪畫等，在造型上進行空間分配時，常常用來做為基準的矩形比例，在我們日常生活中常用運用到黃金分割比的矩形做設計，如撲克牌、名片等。這個比例聽說是人類視覺認知覺得最美的形狀。做網頁設計時如果您用格線系統來進行畫面分割，就可以使用此比例來設定基準網格的大小，以便讓畫面看起來更具整體感。就算只是畫面中的某個部分採用這個比率，也能夠讓您的設計呈現出極佳的均衡感，可說是極佳的矩形比例。
1:1.618
憑直覺做設計就不用網格嗎?
街頭的海報等的廣告媒體中，有些看來好像只是將這些插圖隨意安排而已。這種憑直覺的設計樣式，是不是和使用網格的設計手法不同？其實不然。這些乍看之下毫無章法的設計，有不少都還是有其格線架構的。並不是使用網格，成品看起來就一定會很網格風。網格並非完成一板一眼、方方正正的設計的方程式，而是讓人有所依據的工具。
Design Sample
http://www.wedgwood.jp/
Wedgwood官方網站
以直向長方形為基準，用網格架構出整個畫面的實例。
http://www.design-museum.de/vitra/
Vitra Design Museum
畫面中有些部分分為矩形、有些非矩形，視覺上看起來比較開闊。
http://www.pdk.pl/index_f.html
Powszechny Dom Dredytowy we Wroc_awiu S.A.
中間的主要畫面雖然是相同比例的矩形，可是卻故意放斜的，感覺趣味橫生。
碎形(fractal)網頁設計
避免畫面雜亂的設計原則「碎形(fractal)」是指局部的結構與整體的結構很相似的意思。網頁設計方法中也有一種方式是讓區塊的形狀與整體相同，或是同時使用幾個相似的形狀，以讓畫面呈現規則性。例如，全區導覽等五個主要的功能構成的畫面中，全區導覽的選擇有五個，分類導覽的選擇也有五個。這樣的做法主要的訴求是畫面簡單，易懂。採用這種法則，可以做出相當簡單的網頁設計。
讓瀏覽者印象深刻
網站很重視好用、易懂等功能性，但企業的網站還得同時顧及企業的品牌訴求、發揮廣告媒體的功能。電視廣告等媒體都是以讓觀眾記得廣告內容為第一目的，所以網站也是一樣，採取的樣式也要讓人印象深刻。又要顧及搜尋的便利性、Web標準，又要顧及可用性，真的很辛苦的工作，但希望大家身為設計者，還是能找到網路設計表現的新出口。
Design Sample
http://hochouki.com/
日本助聽器工業會
用了很多矩形讓整體感覺很方正。
http://www.dankimo.com/
男用和服協會
中間Flash部分的功能有三個，選單群也只有三個，感覺很有律動感。
將整理好的資料反映在版面設計上
將資料群組化再運用版面設計進行連結當文字、圖像，以及導覽等內容資訊集中在一個畫面時，要將各個內容材料一體化，就必須要用位置關係或顏色來做連結，利用位置關係將素材予於群組化，就要善用邊界的效果，而邊界寬窄的安排所造成的客觀視覺感受，正是設計師要培養的能力。在設定邊界有困難、或在有限的範圍內，必須區分操作性等功能時，則可用配色來進行相關連結設定。
安排的位置不同，相關的程度也不同
安排的位置與關聯性的印象有關。如果每個地方的邊界都一樣，就會給人「統一」的印象，有的地方邊界較寬，那會像是分成兩組或三組；如果邊界很大，佔各項要素的二分之一左右，就會給人「擴散」的印象。而「擴散」會給人各內容並無相關的印象。
安排的位置和顏色在關聯性尚有何不同
安排的位置再加上顏色後，變化就更多了。「統一」中再用顏色加以區分的話，就可以給人「條件相同，但內容有所不同」的印象。分成兩組或三組的話，顏色則有表現優先順序的意思，在「擴散」當中，則讓人感覺在眾多不同的項目當中仍具有相關性。
您真的知道嗎?
位置相近的圖，比位置較遠的圖看起來更有相關性。您一定會覺得這種事是基本常識，不用說也知道。可是世界上卻有很多設計根本就沒有想到這些基本的事情。實際上越是覺得理所當然的事情，就越難以有形或無形的方式表現出來。認知科學當中，把腦中所想的事情以有形的方式表現出來，或是告訴他人，就稱為「外化」。任何感覺如果不能外化，就無以判斷真假。整天都埋頭苦幹的設計師們，更要特別注意這點。
Design Sample
http://www.epicurious.com/
epicurious
右邊的設計看起來像全區導覽的延長，可以看出操作上的相關性。
http://www.misawa.co.jp/
MISAWA
這個網站不是用位置來呈現相關性，而是用其他方法來表現不同的屬性。
http://tec.taiko.co.jp/
大興物產WEB目錄
只以配色來區分內容屬性，以畫面的整體感為重。
容易一眼找出所需資訊的設計
魔術數字7與設計「魔術數字7加減2(MAGICAL NUMBER OF SEVEN PLUS MINUS 2)」是1956年George A.Miller發表的心理學法則，點明人一次能處理的資訊數上限。「人一次能掌握的事情約為7個」。這個法則應用在日常生活上很多地方，例如，報紙一個版面除了廣告的地方外，會登的報導大約是7個，而電氣化產品的操作性能大約是7項。而這點也可以運用在網站上。
內容架構上要去蕪存菁
如果網站內容分區多於7個時，就算整個畫面可以容納得下，還是會有缺點，就是很難一眼就找到要找的主題內容。不只如此，也無法讓閱覽者很快看出這個網站的主題為何。尤其像是要建立公司品牌這種目標越是明確的網站，內容結構就要越單純。
培養「比」的感覺
所有設計中，構成設計本身的各項主題要素之間要安排在什麼位置、要設定多大多小等，都要與周圍主題要素相比較來決定。簡單來說，在一個小的圖的旁邊放個更小的圖，原本的那個圖就變成比較大的圖了。在設計的世界裡並沒有絕對的單位，總是會隨與周圍事物的關係而產生新的狀態。掌握住「大的東西」為什麼看起來比較大、「小的東西」為什麼看起來比較小的這種「比」的概念，在設計上是非常重要的。
Design Sample
http://gap.co.jp/
GAP Japan
善用LOGO標誌的知名度，將架構盡可能地簡化
畫面有秩序，瀏覽更容易
各組成要素位置關係的統一及其效果在公共設施或醫院這樣的建築物中，都有讓人潮往來更順暢的「標誌系統設計」，這些設計除了要統一樣式外，就連放置的高度或大小等也都會予於統一。具有一定操作性的網站設計也一樣，確定好設計要素的配置可以降低操作的困難。設計的秩序不只會影響使用性，也會影響美觀。定出組成要素的位置關係，在網站設計而言可說是相當基本的一個概念。
閱讀引導標誌的統一
閱讀引導標誌的設計室最容易統一的。要統一時，不只要注意形狀要統一，還有閱讀引導標誌和文字之間邊界的比例也要遵守法則，這樣才會協調。
按鈕樣式
在「執行」或「送出」這些操作按鈕的樣式已經統一的網站，表示「上一頁」、「下一頁」等表示移動的操作按鈕上用像圖一樣的小標誌或小圖樣(icon)，就可以讓整個設計看起來層次提升很多。按鈕的顏色要和連結文字(link text)的顏色統一，讓顏色也有表現相關性的功能。
緊急出口的設計
緊急出口的標誌是一個人急著跑向一個出口。其實這個標誌是世界統一的，設計者是日本設計師太田幸夫。聽說綠色和白色的配色，是因為人在吸入煙時，會將這樣的顏色看成黃色，所以設計者才做這樣的顏色安排。
Design Sample
http://www.dsp.co.jp/
Digital Scape
整個網站都用統一的箭號標誌
http://www.k10k.net/
Kaliber10000
按鈕和小圖示的樣式都有固定規格，設計水準相當高。
http://download.com/
Download.com
可以點選的文字字型都予以統一
有效配置方塊或文字
運用網格設計完成畫面結構要讓設計樣式不會鬆散，可以從文字、圖片到細節部份，都運用網格法來配置。雖然實際在進行時，主要只是在畫面上設定導引線而已，不過，該對齊的地方是否好好對齊，卻是這種設計能否成功的關鍵。因此在進行設計時，最重要的就是兼顧細部的調整和畫面整體的協調性。所以在設計時要時而近看、時而遠看自己設計的感覺。
無表格設計(No table design)
要在網路上顯示複雜的表格時常會用「設計表格」(Layout table)的手法，可是這個方法卻有讓HTML程式碼(source)複雜化的缺點。於是，後來的人就用CSS來控制各組成要素的位置，而這種流派就稱為「無表格設計」(No table design)。採用這個方法，強調的就是能夠因應Web標準技術。
Design Sample
http://8011web.com/
8011web.com
此網頁中以左邊長條狀為基準來切割畫面空間。
http://www.alistapart.com/
A List Apart
網站LOGO影響整個畫面的空間劃分。
運用留白技巧的設計法
如何運用留白所謂留白，是為了讓想要強調的影像等要素有更佳的呈現效果，而在其周圍留下空白空間。有人會認為網站的目的是提供資訊，留白等於就是「浪費空間」；可是這樣的設計效果具有相當清楚分明的感覺，所以在此還是想將這種手法當成一種設計技巧來介紹。像LOGO或商品影像這樣，想與其他部分或樣式做區別時，這種方法就相當好用，而且就像使用大量展示面積的家具用品展示店給人的高級感一樣，留白的空間也會給人一種很有型的感覺。(留白不一定是白色的，而是指一塊空白的區域。)
畫面上方留多點空間的重點
瀏覽器的發展日新月異，近年來更是很多人關注的焦點。分頁式瀏覽器(Tab Browser)讓使用者不用新開瀏覽器，在同一個瀏覽器中就可以開很多個不同的頁次來瀏覽網頁，很方便。各個網站可用自己設計的按鈕來操作，可是有時候碰到上方選單型設計時，常常就會不小心按到瀏覽器的按鈕，尤其是網站的按鈕和瀏覽器的按鈕接近時更是如此。所以希望讀者們在設計時，可以留個10像素左右的距離為宜。
Design Sample
http://amana.jp/
Amana
大小設定較小的網站LOGO也可透過留白的效果而看起來醒目。
http://swanq.co.jp/
swanq
此為影像直向貫穿畫面的結構，資訊內容變化的地方，也因為有留白而讓畫面轉換感覺起來更自然。
http://www.ckr.se/
CLAESSON KOIVISTO RUNE
這個設計實例特別強調網站LOGO，樣式簡單且高雅的LOGO可強調出高級感。
內容豐富的網站設計重視緊湊感
善用液態設計(liquid design)的網站設計法入門網站等資訊量多的網站，就要運用左右寬度可調整的液態設計(liquid design)。用這種手法完成的網站效果有兩種，一種是顯示畫面大小變更時，整個設計整體畫面給人的印象不變；另一種則是縮小時覺得很擠，放大時又變得畫面很閒散。產生這種區別的重點就在於標題所設的邊界大小。要讓顯示範圍變更時設計也不會亂掉的祕訣，就在於這個部分的處理。
Point1：顯示畫面大小變更，但設計感仍舊不變的網站大多是因為在網站LOGO下方設定了距離較大的邊界。只要執行這樣的設定，就能免於在顯示畫面縮小時，整個設計得擠成一團的窘況了。
Point2：各區塊不用方框框住。各區塊標題用顏色長條(在此為灰色)，區塊間就自然可以區隔開來。也因此，各個區塊項目沒有必要畫框線。看得到框線反而會讓人覺得整個畫面都是線，而給人複雜、俗套的印象。
Point3：搜尋的部分有支撐標題部份的功能。這個地方與畫面中央的內容部分不同，要用線框住以強調與左側設計之間的左右對稱性，這樣看起來結構就會很緊湊。
液態設計的基本重點
畫面左右安排寬度大小固定的導覽要素、字體設定成與中間本文部分相對應的大小，這也是很多人愛用的手法，優點是，在設定顯示完整畫面時一次可顯示的資訊量增加，可以慢慢閱覽。一般而言較少使用在首頁的設計，而會常用在一次要提供完整資訊的情況(如新聞)上。
Web網頁設計的最大寬度，一般是由顯示器的大小來決定的，不過也不要忘了瀏覽器也有工具列。工具列是畫面左邊出現的書籤(bookmark)或顯示已瀏覽網頁的功能，現在還有即時通訊的RSS顯示功能，所以有不少人會將工具列開著不關掉。在這種情況下，解析度為1280像素的17吋標準顯示器，可設計的最大寬幅也會只剩970像素而已。
Design Sample
http://www.gettyimages.com/creativeimages?country=usa
getty image
將網站LOGO儘量設小一點，以和其他部分產生足夠的間距。
http://www.goo.ne.jp/
goo新聞
長條廣告外的空間，讓瀏覽者面對那麼多資訊可以喘口氣。
以影像為中心之設計架構
中心構成如果設計的網頁是要以視覺方式來傳達某機關單位或品牌的印象，就要夠靈活、夠有創意才能勝任。如果能夠掌握這種網站的設計類型，就能確實降低設計上的困難。在設計時首先要先決定，是要讓影像充滿整個畫面，還是要讓色塊包圍住影像，還好之後再來決定整體的結構。如果想要展現影像的精美，可以採前者；如果想要展現影像處理的效果，則可採後者。
塞尚的畫面結構哲學
南法艾克斯安普羅旺斯的畫家，保羅塞尚(Paul Czanne)對二十世紀的美術影響甚鉅，他認為三維的大自然界的物體都可以利用球體、圓柱、圓錐的三種方式入畫。想必是他不斷想要設計難以在平面上展現的光與影而得到的結論吧。將事情過度簡單化的確很危險，但對於畫面結構有自己的一套想法，對版面設計而言卻是相當重要。
Design Sample
http://asia.swarovski.com/taiwan/
Swarovski Crystal
商品的硬度和設計樣式的發想有著共通點。
http://www.stylewars.com/
Style Wars
本例以繪畫的手法，充分揮灑影像設計的能力，水準相當高。
分段式的設計類型
用區塊標出網頁重點平面印刷品中，分段式版面編排方式，可以避免換行時未出現過多空白的情形。在網頁上，這種方式可以盡量減少視線大幅移動，有助充分運用空間。網頁和雜誌等不同，畫面出現的文字量較難控制，所以可以先做一個基本段落區塊，確定好瀏覽者視線集中的重點，再加入其他內容，這樣就會具有平衡感。
網頁分成兩欄
將網頁畫面分成兩欄，左邊的導覽部分全部設為靠右對齊，讓畫面看起來像是文字都向中間的分隔線對齊。用這種「左邊區塊向右對齊」的方法，文字內容很多的網站看起來也會很穩。
由上而下分割網頁空間
網頁的分段式設計基本上都是由左往右排，不過也可以由上而下排。這個結構是將網頁空間分成主題、圖片式全區導覽和文字三大部分，每一部分的內容都少少的，看起來不會塞在一起。
網頁設計的重心
報紙的重心在於發行報社名稱以及各版的重要標題，而網頁也是一樣，網站LOGO和周圍是網頁看起來穩不穩、是否有頭重腳輕、腳重頭輕問題的關鍵。所以網頁設計時就要在網頁上方的頁緣和網站LOGO設定足夠的間距，在瀏覽器的介面和網站LOGO間留白，以集中瀏覽者的視線。
考慮到Web標準相容性的設計方式
考慮網頁資訊結構的畫面架構現在所謂的網頁設計標準，是指套用CSS樣式的XHTML語法而言。XHTML是從包含樣式與資訊定義的HTML語法中抽出樣式設定的部份，因此光靠XHTML是無法完成網頁設計的。分離樣式與結構，是為了便於設計與維護網頁，因此學會實用性的Web標準網頁設計技巧，實為當務之急。
內容架構的基本
在XHTML語法中，一頁裏可設定的最上層標題h1只有一個。h1主要是用於網頁ID的標籤，而下層資訊則是每一則都用h2來設定。
混用
在Web標準普及之前，網站設計主要都是用table標籤來做表格設計。然而這個手法不只會讓標籤流於繁雜，而且不易標明優先順序等內容結構。雖然如此，要讓能將XHTML和CSS分別解譯處理的瀏覽器正常顯示出網頁內容，還是有很多地方要用到table(表格)，所以就有人採取大致分割網頁設計空間時就用table，要做細部設計時就用CSS來控制的這種方法。這種方法就稱為「混用」以與其他方式區別。
Design Sample
http://9rules.com/
9rules Network
各個區塊的資訊整理情形會反映在樣式上。
http://mightygoods.com/
mightygoods
內容結構包括導覽的部分都很層次井然。
沿用首頁的風格
導覽設計(navigation design)也要沿用首頁的特色如果網站設計是要傳達品牌印象的話，就要讓網站整體有一致性。像企業品牌這樣大的主題，就要讓瀏覽者從一點點小印象中慢慢堆疊出一個完整的印象，所以不管是影像或顏色都要沿著相同的主題來選擇。就網站而言，呈現效果的一致性也會連帶影響操作使用上的一致性。尤其是包含操作性在內的設計，其整體感在介面設計的領域中更被稱為「look and feel」而備受設計者重視。
不一定從首頁瀏覽起
網站要看起來很有主題首尾一致的效果，就必須要使用者是從首頁連結進來才行。使用者能按照網站設計者、資訊提供者所想，使用網站所設的導覽來逛逛這個網站的話，才會起「Look and Feel」之效果。可是，由於近年來搜尋系統的功能提升，使用者很多都不是從首頁點進網站，對這樣的使用者而言，網站的整體感或氣氛就很難感受得到。網站設計的效果有時也得要看使用者使用方式而定，希望設計者們都能先有這個概念。
Design Sample
http://www.h-kotobuki.co.jp/about/
壽屋商務飯店
導覽設計與使用的影像統一，呈現出高雅的感覺。
http://dma.ucla.edu/info/index.php
UCLA Design Media Arts
矩形擷取部分關鍵影像，與首頁風格一脈相承。
http://www.g-gravity.com/
G-gravity
用有光澤的背景呈現出令人驚艷質感，而此質感也是整個網站的共同特色。
design note
依重力概念而行
設計領域中，稱設計物的上方與下方為「天地」。做平面設計的人一般也都是說「天地」而不說「上下」。多數的設計者都能顧名思義，注意到上面代表的是「天」，下面代表的是「地」。尤其是在固定的顯示範圍內，天地的感覺就顯得相當重要。要把紙面想成是個自然環境，設計時要依重力法則來構思。
舉例來說，好看、好懂的這種設計樣式，我們會說「設計流暢」。這個「流暢」就是指畫面上風順暢地吹拂而去的感覺。一般而言，風都是和地面平行的，所以要有天和地，也才能達到「流暢」的效果。畫面上方比較空，畫面下方則要多些份量，所要呈現的東西就安排在下方，各項主體之間要有適當的距離讓空氣流通。每個設計者所說、所想的某個顏色或某個形狀可能都不一樣，但是「天地」之間的重力法則形成畫面骨架這點卻是不變。
除了上、下、左、右這樣的位置法則之外，大小、重量也會自然地呈現輕重的效果。所以大的東西放在畫面下方比較自然，而畫面上方如果是一些小東西的集合，看起來會很有整體感。在有個大圖形的畫面結構中，如果可以在附近放幾個小一點的圖形以讓大圖形與小圖形平衡，整個畫面看起來就會很穩。這種設計技巧其實正反映了自然環境的重力法則。
重量和大小會隨配色而改變，且條件越多，就越難讓樣式統一。不過不管是怎麼樣的設計，「天地」的概念一定都會是設計者的重要依據。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
