[ 網頁設計教程 ] 網頁設計三要素：內容、功能、表現- 其他教程 - 骨子愛創意

教學主題: 網頁設計三要素：內容、功能、表現

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

今天的這個教學主題是: 網頁設計三要素：內容、功能、表現

這教學的重點為這幾點 [ 表現,功能,內容,要素,網頁設計,進行,頁面,圖片,高保真, ]

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

本文重點

網站的本質就是形式主義，內容、功能、表現這三個網站的要素，低保真原型解決了基礎內容層面的問題，而高保真線框圖規劃了網站的功能和表現;內容是網站最基本最重要的核心，因此高保真原型必須建立在低保真原型的基礎上，直接進行頁面的細節規劃是一種本末倒

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

區分“可交互”的部分

討論內容的形式主義，並非要簡單的區分哪些是圖片，哪些是文字，哪些是Flash動畫……而是要將那些用戶可交互的內容進行延展和變換;在這裡談及的交互就是人與機器的互動，對於萬維網而言，最常見的就是鼠標響應和鍵盤響應。

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

綠色代表超級鏈接

橙色代表表單項目

紫色代表Js效果

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

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

區分標題、有鏈接文本、文字段落

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

某房地產SNS網站線框圖中的Icon圖例

無處不在的柵格系統

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

在高保真線框圖中建立柵格系統

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

優勢一：通過柵格控制屏幕資源

內容形式主義的核心就是對屏幕資源進行規劃，建立柵格系統能夠對頁面的整體和局部尺寸進行有效的把握，提高原型的真實度和適應性。

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

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

優勢二：輕鬆實現整站圖片尺寸規劃

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

基於柵格系統的基準寬度，通常需要規劃2~3個常用的寬高比例，並且按照頁面的需要進行尺寸的規劃;這一系列的圖片尺寸應該在高保真線框圖開始之前，柵格系統確立之後，就準備妥當，用來做內容填充時使用。

包含兩個固定比例和一個可伸縮比例的整站圖片尺寸規劃[圖片點擊可看全圖]

優勢三：形成線框圖的塊級復用

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

按照柵格系統建立的可以靈活組合的“積木式”內容塊

圖還是文?

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

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

使用圖片的優劣勢分析

優勢：直觀，吸引關注

劣勢：增加文件量，需要特別的搜索優化，佔用屏幕資源比較大

使用文字的優劣勢分析

優勢：佔用屏幕資源少，導入速度快，可讀性強

劣勢：乏味，不易區分

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

靜態圖片(小)內容示意，通常搭配文本出現

靜態圖片(大)頁面主視覺、需要突出細節的視覺內容

動態圖片(多媒體)廣告、特別需要注意的環節，不宜過多

鏈接文字獨立成句的內容單元、關鍵詞

描述性文字在點擊之前，必須向用戶進行解釋的大段文字

標題重要關鍵字，重要主題

使用圖文搭配進行內容形式化，從某某意義上說決定了內容元素和分塊佔用的屏幕資源，從一個側面反映了它們之間的強弱關係;在完善且合理的頁面邏輯架構基礎上，根據頁面元素之間的權重進行高保真線框圖設計，是一件非常輕鬆的事情。

同一個頁面元素的6種形式

塊級內容變形記

塊級內容由元素級內容組成。

在解決了元素級的內容形式化之後，按照柵格系統對塊級內容進行多樣化的整合，就能夠使頁面線框圖像搭積木那樣簡單了;相同的塊級元素在不同的頁面當中往往佔有不同的權重，這就意味着佔有屏幕資源的變化(影響這種變化的因素主要是寬度)，因此在整合網站中需要給同一個塊級元素賦予不同的形式。

以最常見的“同主題鏈接列表”這個內容塊為例，解決在不同屏幕資源分配下的變形問題;所謂“同主題鏈接列表”可能是一系列的文章，也可能是圍繞某個主題的一系列關鍵字，總之是相互關聯的同級內容節點;這些兄弟節點從屬的某個主題，在頁面中以標題的形式體現。

簡單式

圖形列表

單列展開式

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

兩列混搭式

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

兩列文本式

最簡圖文式

上面的6種延展形式，僅僅是從一個內容塊出發進行的衍化;要形成高度的塊級復用，就必須對每一個內容區塊進行類似的延展;正如很多重複性勞動一樣，只要設計人員通過一個案例積累出常用的塊級內容形式，就不必為每一個項目都如此的操勞了。在高保真線框圖的設計層面，其實就是對這些形式進行合理的運用而已。

為了適應同一內容塊的不同形式，設計開發人員往往會在內容發布環節也進行了相應的改進，比如人工的或自動截取不同長度的標題和鏈接文字。

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

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

希望我們所介紹的 網頁設計三要素：內容、功能、表現 這教學會喜歡

文章標題: 骨子愛創意- 網頁設計三要素：內容、功能、表現–轉載請註明來源處

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

文章相關關鍵字為: 表現,功能,內容,要素,網頁設計,進行,頁面,圖片,高保真,

本文永久連結 :網頁設計三要素：內容、功能、表現

本文轉載自 :VIA