網(wǎng)站的本質(zhì)就是形式主義，內(nèi)容、功能、表現(xiàn)這三個網(wǎng)站的要素，低保真原型解決了基礎內(nèi)容層面的問題，而高保真線框圖規(guī)劃了網(wǎng)站的功能和表現(xiàn)；內(nèi)容是網(wǎng)站最基本最重要的核心，因此高保真原型必須建立在低保真原型的基礎上，直接進行頁面的細節(jié)規(guī)劃是一種本末倒置的錯誤行為。

區(qū)分“可交互”的部分

討論內(nèi)容的形式主義，并非要簡單的區(qū)分哪些是圖片，哪些是文字，哪些是Flash動畫……而是要將那些用戶可交互的內(nèi)容進行延展和變換；在這里談及的交互就是人與機器的互動，對于萬維網(wǎng)而言，最常見的就是鼠標響應和鍵盤響應。

使用顏色對不同的頁面元素類型進行標注是十分有效的方法，比如：

• 綠色代表超級鏈接
  
• 橙色代表表單項目
  
• 紫色代表Js效果
  

使用顏色對頁面“可交互”部分進行區(qū)分

區(qū)分有鏈接的文本和無鏈接文本是非常重要的工作，在低保真原型中你可能完全可以不理會它們，然而對于高保真線框圖則必須區(qū)分哪些文本是可以點擊的，哪些純?yōu)g覽文本；對于標題級的文本，應該使用較大字體，同時賦予一個淺色的背景進行標識；那些沒有鏈接的文字段落，可以使用首行縮進的多條灰色背景代表它們（真正的頁面中可以沒有縮進）；如果時間充裕，更推薦以真實的文字去填充頁面中的段落部分。

區(qū)分標題、有鏈接文本、文字段落

對交互形式進行區(qū)分，可以看作對線框圖圖例的一種補充；這種增補可能根據(jù)不同網(wǎng)站的需要有所社區(qū)，甚至提供一些非常獨特的圖例，比如在規(guī)劃一個房地產(chǎn)SNS社區(qū)的過程中，甚至可以增加Icon圖例，這樣做的好處不僅僅是給其他設計實現(xiàn)人員以提示和方便，并且使得高保真原型具有“可讀性”，更趨近于最后的頁面結果。

某房地產(chǎn)SNS網(wǎng)站線框圖中的Icon圖例

無處不在的柵格系統(tǒng)

柵格系統(tǒng)已經(jīng)在網(wǎng)頁設計中被普遍的采納，網(wǎng)絡中已經(jīng)有諸多的介紹性文章，更可以參考960.gs的相關代碼進行具體的應用；不要以為柵格系統(tǒng)只對視覺設計師有幫助，在高保真線框圖的設計中同樣可以獲得非常大的幫助；類似Visio和Axure這樣的原型設計軟件都提供了強大的輔助線和網(wǎng)格對齊支持，能夠讓你輕松的實現(xiàn)線框圖中的柵格。

在高保真線框圖中建立柵格系統(tǒng)

帶有柵格系統(tǒng)的高保真原型是最接近真實頁面的設計（甚至可以認為選擇合理的柵格系統(tǒng)是建立高保真線框圖的第一步驟）， 具有以下三個優(yōu)勢：

優(yōu)勢一：通過柵格控制屏幕資源

內(nèi)容形式主義的核心就是對屏幕資源進行規(guī)劃，建立柵格系統(tǒng)能夠?qū)撁娴恼w和局部尺寸進行有效的把握，提高原型的真實度和適應性。

例如，在以60像素為基準的柵格系統(tǒng)中，可以實現(xiàn)適應標準屏幕尺寸（800px×600px）的兼容，整個網(wǎng)站的頁面風格提供強大的伸縮。

能夠適應800*600標準屏幕分辨率的線框圖柵格

優(yōu)勢二：輕松實現(xiàn)整站圖片尺寸規(guī)劃

將那些具有內(nèi)容意義的圖片（非裝飾圖）放手給沒有經(jīng)驗的視覺設計師，往往會帶來災難性的后果，這也是很多看起來很美的設計與實際效果相差懸殊的主要原因；既然已經(jīng)決定進行高保真原型設計，就肯定要對視覺設計層面的工作進行干預；內(nèi)容圖片是伴隨內(nèi)容經(jīng)常更換的，本身更貼近交互設計的范疇，在某些時候，視覺設計應該合理讓路。

基于柵格系統(tǒng)的基準寬度，通常需要規(guī)劃2~3個常用的寬高比例，并且按照頁面的需要進行尺寸的規(guī)劃；這一系列的圖片尺寸應該在高保真線框圖開始之前，柵格系統(tǒng)確立之后，就準備妥當，用來做內(nèi)容填充時使用。

包含兩個固定比例和一個可伸縮比例的整站圖片尺寸規(guī)劃

優(yōu)勢三：形成線框圖的塊級復用

網(wǎng)頁設計的靈活源自規(guī)劃中的塊級復用。通常可以把某幾個相關的內(nèi)容元素形成一個 “內(nèi)容塊”，在頁面的制作過程中，這些塊可能是一個div、ol、ul、dl級的標記語言；由于Web頁面是一種縱向的延展，因此在線框圖的高保真設計中主要是依據(jù)柵格系統(tǒng)對塊級內(nèi)容的寬度進行規(guī)劃；在常用寬度確定之后，就可以輕松的實現(xiàn)“乾坤大挪移”，縮減設計工作量，提高團隊的設計執(zhí)行效率（視覺設計師們也很歡迎這種規(guī)劃）。

按照柵格系統(tǒng)建立的可以靈活組合的“積木式”內(nèi)容塊

圖還是文？

使用圖片還是文字作為內(nèi)容形式，就應該引用一個時下流行的詞匯——糾結

曾經(jīng)有人斷言萬維網(wǎng)進入了讀圖時代，在“眼球經(jīng)濟”的影響下，網(wǎng)站渴望每個內(nèi)容元素都得到用戶的充分關注，越來越多的Web界面使用圖片作為內(nèi)容傳達形式，這也帶來了訪問速度緩慢和搜索引擎優(yōu)化的難度；什么時候使用圖片，如何進行圖文搭配，是高保真線框圖的一個重要環(huán)節(jié)。

使用圖片的優(yōu)劣勢分析

優(yōu)勢：直觀，吸引關注

劣勢：增加文件量，需要特別的搜索優(yōu)化，占用屏幕資源比較大

使用文字的優(yōu)劣勢分析

優(yōu)勢：占用屏幕資源少，導入速度快，可讀性強

劣勢：乏味，不易區(qū)分

合理的內(nèi)容形式設計，根據(jù)不同的需要和屏幕資源，靈活的使用圖文搭配進行信息有效傳達。