網(wǎng)頁(yè)設(shè)計(jì)三要素：內(nèi)容、功能、表現(xiàn)

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

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

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

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

使用顏色對(duì)不同的頁(yè)面元素類型進(jìn)行標(biāo)注是十分有效的方法，比如：

綠色代表超級(jí)鏈接

橙色代表表單項(xiàng)目

紫色代表Js效果

使用顏色對(duì)頁(yè)面“可交互”部分進(jìn)行區(qū)分

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

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

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

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

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

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

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

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

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

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

例如，在以60像素為基準(zhǔn)的柵格系統(tǒng)中，可以實(shí)現(xiàn)適應(yīng)標(biāo)準(zhǔn)屏幕尺寸(800px×600px)的兼容，整個(gè)網(wǎng)站的頁(yè)面風(fēng)格提供強(qiáng)大的伸縮。

能夠適應(yīng)800*600標(biāo)準(zhǔn)屏幕分辨率的線框圖柵格

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

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

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

包含兩個(gè)固定比例和一個(gè)可伸縮比例的整站圖片尺寸規(guī)劃[圖片點(diǎn)擊可看全圖]

優(yōu)勢(shì)三：形成線框圖的塊級(jí)復(fù)用

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

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

圖還是文?

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

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

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

優(yōu)勢(shì)：直觀，吸引關(guān)注

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

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

優(yōu)勢(shì)：占用屏幕資源少，導(dǎo)入速度快，可讀性強(qiáng)

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

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

靜態(tài)圖片(小)內(nèi)容示意，通常搭配文本出現(xiàn)

靜態(tài)圖片(大)頁(yè)面主視覺(jué)、需要突出細(xì)節(jié)的視覺(jué)內(nèi)容

動(dòng)態(tài)圖片(多媒體)廣告、特別需要注意的環(huán)節(jié)，不宜過(guò)多

鏈接文字獨(dú)立成句的內(nèi)容單元、關(guān)鍵詞

描述性文字在點(diǎn)擊之前，必須向用戶進(jìn)行解釋的大段文字

標(biāo)題重要關(guān)鍵字，重要主題

使用圖文搭配進(jìn)行內(nèi)容形式化，從某某意義上說(shuō)決定了內(nèi)容元素和分塊占用的屏幕資源，從一個(gè)側(cè)面反映了它們之間的強(qiáng)弱關(guān)系;在完善且合理的頁(yè)面邏輯架構(gòu)基礎(chǔ)上，根據(jù)頁(yè)面元素之間的權(quán)重進(jìn)行高保真線框圖設(shè)計(jì)，是一件非常輕松的事情。

同一個(gè)頁(yè)面元素的6種形式

塊級(jí)內(nèi)容變形記

塊級(jí)內(nèi)容由元素級(jí)內(nèi)容組成。

在解決了元素級(jí)的內(nèi)容形式化之后，按照柵格系統(tǒng)對(duì)塊級(jí)內(nèi)容進(jìn)行多樣化的整合，就能夠使頁(yè)面線框圖像搭積木那樣簡(jiǎn)單了;相同的塊級(jí)元素在不同的頁(yè)面當(dāng)中往往占有不同的權(quán)重，這就意味著占有屏幕資源的變化(影響這種變化的因素主要是寬度)，因此在整合網(wǎng)站中需要給同一個(gè)塊級(jí)元素賦予不同的形式。

以最常見(jiàn)的“同主題鏈接列表”這個(gè)內(nèi)容塊為例，解決在不同屏幕資源分配下的變形問(wèn)題;所謂“同主題鏈接列表”可能是一系列的文章，也可能是圍繞某個(gè)主題的一系列關(guān)鍵字，總之是相互關(guān)聯(lián)的同級(jí)內(nèi)容節(jié)點(diǎn);這些兄弟節(jié)點(diǎn)從屬的某個(gè)主題，在頁(yè)面中以標(biāo)題的形式體現(xiàn)。

簡(jiǎn)單式

圖形列表

單列展開(kāi)式

兩列混搭式

兩列文本式

最簡(jiǎn)圖文式

上面的6種延展形式，僅僅是從一個(gè)內(nèi)容塊出發(fā)進(jìn)行的衍化;要形成高度的塊級(jí)復(fù)用，就必須對(duì)每一個(gè)內(nèi)容區(qū)塊進(jìn)行類似的延展;正如很多重復(fù)性勞動(dòng)一樣，只要設(shè)計(jì)人員通過(guò)一個(gè)案例積累出常用的塊級(jí)內(nèi)容形式，就不必為每一個(gè)項(xiàng)目都如此的操勞了。在高保真線框圖的設(shè)計(jì)層面，其實(shí)就是對(duì)這些形式進(jìn)行合理的運(yùn)用而已。

為了適應(yīng)同一內(nèi)容塊的不同形式，設(shè)計(jì)開(kāi)發(fā)人員往往會(huì)在內(nèi)容發(fā)布環(huán)節(jié)也進(jìn)行了相應(yīng)的改進(jìn)，比如人工的或自動(dòng)截取不同長(zhǎng)度的標(biāo)題和鏈接文字。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站欄目：網(wǎng)頁(yè)設(shè)計(jì)三要素：內(nèi)容、功能、表現(xiàn)
鏈接分享：http://www.muchs.cn/news32/322732.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站改版、網(wǎng)站建設(shè)、虛擬主機(jī)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)