以下是緊接著上文?SKYUI設(shè)計(jì)觀點(diǎn)-網(wǎng)頁設(shè)計(jì)的“道”(上）

來繼續(xù)闡述我們的觀點(diǎn)

放棄控制，變得靈活吧 ? ??--SKYUI設(shè)計(jì)師

五、“道”

“通過運(yùn)用而形成了道、之后便丟失了“形”、不必在乎形體上的觀念、而是讓感知滲入這個(gè)世界、就像溪流奔涌至海洋一樣“

(始制有名，名亦既有，夫亦將知止，知止可以不殆。譬道之在天下，猶川谷之于江海)

道德經(jīng)；第32章 形體

那怎么才能設(shè)計(jì)出具備通用性的頁面呢？首先有幾種思考的方式對解決問題很有幫助。然后我會(huì)講點(diǎn)具有實(shí)用性的建議來幫助你避免這些問題。

第一，想想，你的頁面的目的是什么，而不要想頁面的視覺效果。讓你的設(shè)計(jì)溯源一下，回到為用戶提供服務(wù)上，而不是首先考慮頁面的視覺效果。功能至上，而不是先制作特殊的外觀再讓添加頁面功能。這個(gè)想法的基礎(chǔ)在于把內(nèi)容與外觀分離。你可能已經(jīng)聽過不下一百遍了，但或許如果你這么做將是你邁出最重要的一步。讓我們看一個(gè)簡單的例子。頁面上有些文本是斜體的。為什么采用斜體呢？可能是用來做強(qiáng)調(diào)?？赡苁且谩Ｒ部赡苁怯糜⒄Z表達(dá)的外國詞語。在傳統(tǒng)出版業(yè)中，形式來自于功能。網(wǎng)絡(luò)出版業(yè)的優(yōu)點(diǎn)就在于我們可以在頁面外觀上突出那些我們想要突出的。如果斜體的功能是用來做強(qiáng)調(diào)，那么請用<em>標(biāo)簽，而不是<i>標(biāo)簽，這樣除了PC的之外的網(wǎng)頁瀏覽器也能恰當(dāng)?shù)奶幚?。從更高的層次來說，別用HTML做外觀。別用那些<font> <b> <i>這種標(biāo)簽。當(dāng)HTML能按需提供合適的元素時(shí)候再去用。如果不能，用類別。當(dāng)然，記得要用樣式表來傳達(dá)信息。要往前看，而不是回首。

如果你能恰當(dāng)?shù)膽?yīng)用樣式表，那么我還建議不要去改變頁面的外觀，不要依賴樣式表去轉(zhuǎn)換信息，那么你的頁面將會(huì)良好的運(yùn)作在任何瀏覽器上。不支持樣式表的瀏覽器也就是看起來平淡一點(diǎn)而已。我們最大的關(guān)注點(diǎn)在于那些有漏洞樣式表所支持的瀏覽器。今天這是一個(gè)問題，但是不久的將來，這會(huì)被解決。現(xiàn)在，你可以把自己局限在有良好支持的CSS的子集中，而且比之HTML能夠提供更好的視覺效果。這部分寫的夠多了，不再重復(fù)。(HTML做結(jié)構(gòu)，CSS做樣式）在實(shí)際應(yīng)用中，當(dāng)設(shè)計(jì)樣式表會(huì)影響到頁面的適用性的時(shí)候，有些要做到，有些則要避免。除此之外，不要依賴樣式表來實(shí)現(xiàn)頁面的通用性。過于絕對的單位，像像素和磅數(shù)要避免（下面我會(huì)講）色彩要謹(jǐn)慎使用，不要依賴色彩。

字體

一般Windows，Mac或其他系統(tǒng)上僅僅安裝了幾種字體。這些系統(tǒng)上的默認(rèn)字體都各不相同。已經(jīng)有很多瀏覽器，讀者可以自行決定頁面所呈現(xiàn)的字體。引入CSS，可提供多種字體選擇，覆蓋多種接口。但是不要指望一種字體一直都起作用，不管該字體多么常見。更重要的還是字體的大小，你可能察覺到同樣的字體，同樣的字重，在Mac中看起來比Windoes小一點(diǎn)。這是因?yàn)镸ac的自行分辨率是72dpi,Windows的自行分辨率是96dpi。導(dǎo)致的差別很顯著。想要在Mac上和Windows上形成同樣的文本效果幾乎是不可能的。但如果你堅(jiān)信適用性這一信條，那么便沒關(guān)系？什么？如果你關(guān)注的是網(wǎng)頁頁面如果精確的顯示，這就說明了你

還沒有想考慮到頁面的適用性。字體大小是通用性最顯著地問題。小號字體難以閱讀。對于實(shí)力不錯(cuò)的人來說，當(dāng)他們得知有數(shù)目龐大的人群難以閱讀紙張上14磅以下的字體時(shí)，他們會(huì)很震驚。屏幕的閱讀性比紙張要差，因?yàn)楦偷姆直媛省?

這是否就一位置我們所能使用的最小磅數(shù)就是14 pts?這并不會(huì)幫助那些視力不好的人。那我們最小的字體該用多少？什么都不

用，別用磅數(shù)。這樣就能讓讀者選擇適合他們的字體大小。對于像素來說也是同理。因?yàn)榉直媛实牟町?，這個(gè)平臺上的像素會(huì)不同于其他平臺上的。CSS提供了幾種方式來改變文本尺寸，以促進(jìn)適用性。我們來看這

個(gè)例子。通過CSS你可以用百分比改變字體的大小。比如，標(biāo)題在頁面的主題中。如果你不設(shè)置主題的問題本大小，那么主題的文本便根據(jù)讀者默認(rèn)的大小來進(jìn)行選擇。僅僅就這樣就促進(jìn)了頁面的通用性，什么都不用去做。你可能會(huì)說，如果我放任管“文本就看起來太大了”，那么調(diào)小點(diǎn)。但是那是在“你的瀏覽器”里面。你的閱讀者將會(huì)有在他們的瀏覽器中選項(xiàng)選擇更大還是更小，完全取決于個(gè)人愛好。通過將一級標(biāo)題的大小設(shè)置為比文本字體大小大30%，我們可以讓標(biāo)題和其他元素突出。二級標(biāo)題可以大25%。不管用戶主要文本上選擇什么樣的字體大小。標(biāo)題應(yīng)該顯眼，應(yīng)該按比例的比主要文本字體大。相近的主體的文本可以縮小一些，但是這可能會(huì)導(dǎo)致文本難以閱讀，所以要謹(jǐn)慎。我們做的還很少，僅僅是避免了使用固定大小的字體，使用了合適大小的標(biāo)題，我們還需要做很多保持頁面的適用性。

布局：

邊距、頁面寬度、縮進(jìn)距離是促進(jìn)可讀性的幾個(gè)方面。瀏覽器的窗口會(huì)改變大小，今兒改變了頁面的大小。不同的網(wǎng)絡(luò)設(shè)備（網(wǎng)絡(luò)電視，高分辨率屏幕，掌上電腦）有不同的窗口尺寸。就像修改字體大小一樣，修改頁面布局可能會(huì)導(dǎo)致頁面的通用性問題。布局也同樣可以被設(shè)計(jì)為按百分比來布置具有通用性的頁面。邊距可以按照屏幕的百分比設(shè)置。用CSS可以自動(dòng)的通過百分比來設(shè)置頁面布局來創(chuàng)建具有適用性的頁面。當(dāng)瀏覽器的窗口變寬或是變窄，布局的各個(gè)元素適應(yīng)性的進(jìn)行變化，所以整個(gè)頁面的布局也具有適應(yīng)性。瀏覽者可以選擇合適的窗口大小。邊距，文本鎖緊，和其他的布局方面也可以被設(shè)置為與文本字體

關(guān)聯(lián)，使用<em>單位來設(shè)置。如果你設(shè)置：

p??{margin – left: 1.5em}

這就是說段落的左邊距為段落字體高度的1.5倍。當(dāng)用戶調(diào)整了字體大小來讓頁面看起來更舒服的時(shí)候，邊距也同樣適當(dāng)?shù)脑黾樱绻麄冋{(diào)小，那么邊距相應(yīng)改變。

顏色：

網(wǎng)絡(luò)比紙張更加多彩的媒介。顏色的運(yùn)用在網(wǎng)絡(luò)上無成本。裝飾性的顏色能幫助構(gòu)造視覺個(gè)性，也具有實(shí)際上的價(jià)值。但也導(dǎo)致了通用性的問題。你知道嗎？很多國家里，無論能力有多么高，有紅綠色盲的人是不能獲取飛行員執(zhí)照的。因?yàn)榫嫘畔⒖偸且怀刹蛔兊囊约t色代表危險(xiǎn)，綠色代表安全。非常遺憾，警示信號方面并不具備顏色適用性、替代性。你的網(wǎng)頁是否以同樣的方式驅(qū)除了個(gè)別用戶？那很令人遺憾，不久的將來大多數(shù)的網(wǎng)頁瀏覽器會(huì)給瀏覽者提供簡便的方式調(diào)整頁面的色彩，憑借的是用戶樣式表，一種優(yōu)先于你的樣式表的存在怎么避免這種問題？用樣式表，而不是用 HTML的<em>元素。避免僅僅依賴色彩的組合去傳遞信息。路途人難以合抱的樹木開始于小小的樹根；能夠阻止河流溢出的大壩開始于一小塊的泥土；一千里的路程開始于一個(gè)人的一小步。（合抱之木，生于毫末；九層之臺，起于累土；千里之行，始于足下。）

道德經(jīng)；第64章.留意開始

——《道德經(jīng)》第六十四章

改變我們思考和行為的方式并不容易?！熬o密抓住的信仰不會(huì)容易的放下”但我已經(jīng)慢慢的意識到很多事情，我以為是理所當(dāng)然

的事情需要重新去評估。通過這幾年我所讀、我所見、我所談的，我發(fā)現(xiàn)很多人依然在固守成規(guī)，他們需要重新去思考。現(xiàn)在正是網(wǎng)絡(luò)媒體從紙質(zhì)中脫離的時(shí)代。不用放棄過去的經(jīng)驗(yàn)與智慧，但要發(fā)展自己的路。網(wǎng)絡(luò)最強(qiáng)大的地方也是它自身的限制所在。網(wǎng)絡(luò)的本性便是靈活，我們設(shè)計(jì)師和開發(fā)者應(yīng)該去堅(jiān)信這種靈活性，以此來構(gòu)建有靈活性的頁面，從而具有通用性。