[ 網頁設計教程 ] 頁面線框圖教學之畫地為牢的框架設計- 其他教程 - 骨子愛創意

教學主題: 頁面線框圖教程之畫地為牢的框架設計

大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

今天的這個教學主題是: 頁面線框圖教程之畫地為牢的框架設計

這教學的重點為這幾點 [ 設計,框架,教程,頁面,導航,內容,屏幕,一個,元素,可以, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

通過屏幕複雜度分析，區分了簡單頁面、組合式頁面、複雜頁面的種類;並且基於Web頁面的特點，提出了縱向延伸的靈活設計概念;以縱欄分隔頁面

無論是設計低保真草稿還是高保真的模擬原型，線框圖都是從基本的布局開始;良好的布局是順暢視覺流程的開始，同時也奠定了最終訪問效果的基調;布局是一個畫地為牢的過程，什麼東西放在哪裡一旦基本確，界面就大體確定了;設置條條框框並不是為了限制界面設計師的發揮，而是要達到頁面之間的協調和整個網站的統一;本文作為系列教程的第二篇文章，將講述如何進行基本布局和需要注意的問題。

進入論壇參與討論：http://www.missyuan.com/viewthread.php?tid=421096

分析屏幕的複雜度

依照頁面邏輯架構，頁面中有多少元素，每種元素要佔用多大的屏幕面積，這是一個非常複雜的問題。

引入一個“標準屏幕”的概念，即常用分辨率中最小寬度和高度尺寸的乘積。在這裡可能有若干種不同的聲音，在寬屏顯示器越來越流行的今天，網站依然要關注那些使用4:3比例顯示器的人群，因此，一個相對“保守”的設計是把“800pix×600pix”作為標準屏幕尺寸。當然還有一種相對“大膽”的設計是以“1024pix×768pix”作為標準屏幕尺寸。

常用分辨率的交集就是標準屏幕尺寸[圖片點擊可看全圖]

雖然在設計低保真時只需要進行粗略的計算，但是如果有時間，還是推薦各位線框圖設計人員將所有元素可能佔據的屏幕空間一一列出。最簡便的方法是，保存其他網站上類似元素的截圖，估算它們佔用的屏幕面積。

所有元素佔用屏幕面積的總和/標準屏幕面積= Screen值

公共元素佔用屏幕面積的總和/標準屏幕面積=Template Screen值

簡單的說：在排列的最擁擠的條件下(不考慮間距和留白)，Screen值代表了網頁佔用幾個屏幕的空間。

通過簡單的計算，可以得到整套線框圖中那些重點頁面(模板)的Screen值，並且可以輕鬆的計算出整個網站的Average Screen(平均值);將重點頁面中的重複出現的公共部分提出，形成一個元素集合，將它們的屏幕面積加法求和除以標準屏幕可以得到Template Screen值。

(Screen值01+ Screen值02+ Screen值03……+ Screen值n)/n=Average Screen(平均值)

Template Screen值/ Average Screen(平均值)×100%= Template Ratio 模板比例

簡單的說：在排列最擁擠單條件下(不考慮間距和留白)，Template Ratio 模板比例代表了整個網站的頁面中公共部分的百分比。

已經得到了兩個最重要的屏幕複雜度參數：Average Screen（平均值）與Template Ratio 模板比例。在整個布局頁面的過程中，將緊緊圍繞這兩個參數展開工作;而針對這兩個重要的指標，有如下的具體分析。

Average Screen(平均值)分析

 

Template Ratio 模板比例分析

在研究屏幕複雜度的過程中，要緊緊圍繞在前一章文章中《項目的頁面列表》，通過對重點頁面的屏幕分析，不斷地改善公共部分的元素數量，同時確定使用模板種類和類型。

對於那些計算，也完全不必十分精準，只需要簡略的進行估計就可以了，畢竟線框圖設計不是做精確的數學統計。

從縱欄入手進行內容分塊

“使用縱欄分隔內容能夠獲得更靈活的頁面設計”，看到這句話，那些頁面架構師和前端開發人員都心領神會。

眾所周知，Web頁面是一個在縱向無限伸展的巨大創作介質，這就是為什麼鼠標要設置中間的滾輪。要是非要抬杠，Web頁面也可以向橫向伸展的，這樣的網站的確有，但不符合用戶的瀏覽習慣，可以完全理解為行為藝術的範疇。

Web頁面存在一種縱向的空間延展

對於AS<=2的簡單頁面，完全可以不必分欄，元素內容就像編寫普通Word文檔一樣，逐行展開;上古時代的萬維網，頁面幾乎都是這樣組織內容的;即便現在的HTML語言也都是為了編寫這樣的“極簡梳形”頁面準備的。

對於AS>2的組合式頁，通常需要有一個橫欄放置Logo等內容，然後將頁面分隔成若干的縱欄，便於對信息進行分塊梳理;縱欄通常有兩欄式、三欄式、四欄式，在極其特殊的情況下可能用到五欄式，如果欄目再多，那樣每個縱欄分配的屏幕資源就極其有限了;最後還可以加上給版權等元素信息用的底欄。在進行分欄的過程中，一定要給每個欄命名，這個命名可以在心裡默念，而不必寫在線框圖上。

一種典型的兩欄布局，每個欄都有命名

內容分塊的意義是將同類內容集合在一起，在頁面中規劃對應區域的好處非常明顯：

對於設計者，能夠在增加元素的時，明確的按圖索驥

對於用戶，能夠形成一定的瀏覽習慣，知道去哪裡找到自己想要的東西(頁面功能)

對視覺設計，能夠體現“格式塔視覺原理”中的貼近關係

內容分塊通常包含這樣四個大分類：

頁面識別(Page_ID)：包含商標、標語、頁面標題、廣告詞、版權信息等

導航系統(Navi)：導航條、麵包屑

交互工具(Tools)：搜索、登錄、功能區、友情鏈接等

內容(Content)：內容的正文、列表、摘要

其中的內容(Content)可以根據實際的網站內容主題進行細分。

將不同的內容分塊以顏色進行區分，就可以得到一個大體的頁面安排，這些顏色分區可以在線框圖最終完稿之前刪除，但是在此之前，一定牢記這些區塊的劃分;由於整體設計是可以縱向延伸的，因此今後需要添加元素的時候，只要確定這些元素從屬的分類，進行填充和重新排列就可以了。

用顏色區分內容分塊的圖例

一種兩欄的組合式內容分塊的頁面實例

一種“極簡梳形”內容分塊的頁面實例

橫導航還是縱導航

在分欄和內容分塊的過程中，所有的設計人員都在面臨一個問題，頁面中的主導航條，應該採用橫排還是縱列結構;而實際上，基於兩種導航條模式甚至形成了兩大頁面設計流派;選擇橫縱兩種導航模式，不是設計人員去決定的，而是需要去用一些數值衡量。

相信在閱讀《網站導航設計雜談》一文之後，讀者能夠明確“導航是被逼無奈的產物”，那麼，在什麼時候選擇橫排導航?什麼時候選擇縱列導航呢?需要引入一個“導航最大寬度”的概念。

無論在信息架構中設置了多麼複雜的分類，無論你打算設計多少導航級別，將所有的導航項目無差別的橫向排列，類似研究屏幕複雜度問題時的方法，計算所有導航項目以橫排一列時(絕對扁平化)的最大寬度，就是Navi Max Width(導航最大寬度) 。

絕對扁平化之後的導航最大寬度[圖片點擊可看全圖]

Navi Max Width(導航最大寬度)/標準屏幕寬度=Navi值

導航最大寬度是一個像素值約數，除以標準屏幕的寬度，可以得到一個Navi值，這個值對頁面導航條設計具有非常重要的意義。

當Navi值大於4的時候，親愛的朋友，你的導航項目實在太多了，無論使用彈出效果還是其他的什麼方法去縮減一級導航的長度，都無法改變臃腫的現實，要麼應該選擇縱列導航，要麼你應該學習一下卓越網的作法，給導航一個全景的展示。

卓越網首頁彈出一個全景導航展示

正如所料，極力的推薦橫排導航條，而在Navi值很大，又無法縮減的情況下，使用縱列導航解決訪問分流問題。

在橫排導航條的設計中要注意如下的問題：

一級導航項目的數量盡量不要超過8個

如果一級導航項目超過8個，那麼請使用多行的橫排導航

多行橫排導航不要再使用彈出效果

彈出的導航項目條不要超過標準屏幕高度的2/3

盡量不要讓彈出的導航條遮擋主重要內容，比如Page_ID內容區塊

縱列導航是一種“權宜之計”，當然很多網站都在使用它們，比如w3c.org的首頁和Yahoo英文版;實際上縱列導航比橫排導航更具彈性和靈活，只是在中文萬維網當中，橫排導航實在是太主流了，用戶已經形成了某種習慣;如果頁面有比較大的空間，強烈建議在設置橫排導航的同時提供一個縱列導航的映射，二者並不矛盾，是可以相輔相成的。

左邊還是右邊

越來越的網頁使用兩欄或者兩欄半的縱欄布局，特別是那些博客系統和SNS社區。通常設計者會把一些輔助導航、交互工具規劃到一些“側欄”裡面，那麼就出現了一個問題：“側欄是應該設置在左邊還是右邊?”

哈，其實把側欄設置在那一邊只是一個瀏覽習慣的問題;設置在那一邊並不重要，重要的是整個網站的統一，讓用戶形成一種習慣。

需要注意，把Logo放在左上角已經成為所有網站的共識;另外還要明確最基本的視覺流程原理，用戶的視覺注意力總是“從左到右，從上到下”進行衰減。可以簡單的把左邊和右邊進行一下劃分，這種劃分不是絕對的，但是的確存在，即：“側欄左置的網站，更注重品牌和導航功能;側欄右置的網站，更注重內容”。於是，很容易去理解為什麼SNS網站要把它們的交互工具條設置在左邊，而搜索引擎的結果頁面要把輔助的搜索信息放在右邊。

側欄左置的網站，更注重品牌和導航功能

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

側欄右置的網站，更注重內容

這些左邊和右邊的區分，並不是什麼科學道理，也不是硬性規定，只是很多線框圖設計人員自發的遵守的某些慣例，用戶也逐漸的熟悉了這些區分，所以還是需要認真考慮的。

向內容分塊填充元素

在完成分欄和內容區塊劃分的基礎上，已經可以把頁面邏輯框架中的元素填充到線框圖當中去了。推薦先以一個項目中最複雜的頁面進行填充，這樣能夠對其他頁面中的分欄不合理進行及時的調整。

低保真模型是高保真模型的基礎，千萬不要一次把細節描繪完美，向內容分塊填充元素的過程就是低保真線框圖描繪的過程，具體操作如下：

把每一個元素建立一個單獨的組件，這個組件可以很簡單的用一個方塊表示

每個組件都要有一個獨立的名字，雖然在線框圖完成之後，這些個名字可以刪去，但是一定要進行命名

把元素按照分類先放置到內容區塊中

元素放置過程中以縱向 “自上而下、從左到右”的排列“從重要到普通”的權重

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

給頁面邏輯框架中的每個元素命名

將所有的元素放置到對應的區塊后，一個簡單的線框圖已經具有了雛形，當然，即便是生成低保真原型，這也僅僅是一個開始而已。

有些“醜陋”的線框圖雛形[圖片點擊可看全圖]

本章小結

通過屏幕複雜度分析，區分了簡單頁面、組合式頁面、複雜頁面的種類;並且基於Web頁面的特點，提出了縱向延伸的靈活設計概念;以縱欄分隔頁面，按內容分塊進行基本排列讓元素填充工作有的放矢;但是這些僅僅是一個開始，目前的線框圖還只搭建了基本框架，要領略線框圖設計的進階技巧

看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 頁面線框圖教程之畫地為牢的框架設計 這教學會喜歡

文章標題: 骨子愛創意- 頁面線框圖教程之畫地為牢的框架設計–轉載請註明來源處

本教學分類為網頁設計教程中的 其他教程相關教學

文章相關關鍵字為: 設計,框架,教程,頁面,導航,內容,屏幕,一個,元素,可以,

本文永久連結 :頁面線框圖教程之畫地為牢的框架設計

本文轉載自 :VIA