Web 設計之道

道之于90年代恰如禪之于70年代。事無巨細,皆可受之道,或推之道。Web 設計之事,雖小技,然而通覽道德經,我們仍然會發現其中包含深刻的道理。道是哲學,象佛,是一種生活與處世的方式,來自古老的《道德經》,這部擁有81個章節的晦澀經文涵蓋了人類的經驗,但它始終講述一個主題,和諧。

過去幾年,或好或壞,我的生活與 Style Sheet 有關,我為之編寫軟件,教程與指南;回答了數不清的問題,通過新聞組或電子郵件;通過 The Web Standards Project 推而廣之。慢慢的,我對 Web 設計有了完全不同的理解,并看到設計與道之間的關聯。

我所看見的是一種緊張關系,在現實的 Web 與理想的 Web 之間;在現有的媒體,印刷媒體與 Web 之間。而現在正是需要對二者進行一次梳理的時間,也是讓 Web 放手走自己的路的時間。

守舊的新媒體?

“上德不德, 是以有德。 下德不失德, 是以無德。”
《道德經》第38章

你是否見過早期的電視節目,它們是講解式的畫面,那時的電視被貼切地稱為“有畫面的廣播”。很多電視節目是借用熱門廣播節目的形式。而現在隨處可見的晚間訪談,或新聞,仍然帶著早期電視節目的舊媒體的影子。

早期的音樂電視也是這樣,樂隊僅僅是在鏡頭前模擬自己表演時的樣子。

但一個新媒體從舊媒體發展起來,它對舊媒體的某些借鑒可以理解,但不能全盤借鑒,否則對新媒體是一種限制,所謂“下德不失德”。時過境遷,新媒體將擁有自己的形式,而將那些不合理的東西丟棄。

如果你曾看過早期的的電視劇,它們也是這樣,廣播劇需要有人講解聽眾所看不到的畫面,早期的電視劇也經常有人講解,講解那些觀眾自己能看到的東西,這就是舊媒體演變成新媒體時容易出現的問題。

Web 是新媒體,盡管它來自印刷,印刷的技巧,設計及慣例對 Web 影響巨大。然而 Web 和印刷過于肖似,那些“殺手級網站”常常是那些對 Web 的野性加以馴服,讓頁面中規中矩就象它們也是紙張一樣的網站,也就是桌面印刷版的 Web。這種風尚很自然,“下德不失德”,但我們需要前進,讓 Web 成為它自己的媒體,我們需要拋棄印刷媒體的“德”,讓 Web 擁有自己的天性。

我們并不是說要拋棄幾百年來的印刷,與幾千年來的書寫的智慧。但我們需要明白這些東西哪些是對 Web 有利的,那些僅僅是束縛 Web 的 “德”。

不要主宰你的網頁

圣人“... 萬物作而不辭, 生而不有, 為而不恃”
《道德經》第2章

抽時間到那些 Web 設計新聞組或郵件列表看一下,你會發現被一遍一遍說了很多次的話,問了很多遍的問題,比如,“我該如何讓我的網頁在所有平臺都上去一致?”,“如何讓我的字體在 Mac 和 Windows 上一模一樣?”,或者“如何控制用戶的瀏覽器?”,控制一詞的出現頻率非常高。

所有這些的背后,是這樣一種信念,設計者是控制者(想想像素師(pixel mechanic)這個稱呼的意味)。設計者希望駕御用戶的意識,希望用他們的視覺經驗駕御用戶的選擇(比如使用固定的字號)。設計者不考慮因邏輯分辨率不同而導致的平臺差別(如 Mac 的 72dpi 與 Windows 的 96dpi),他們無所不知,他們不能容忍在不同瀏覽器上有哪怕一個像素的差別。

當然這有些夸張,但基本事實。一個最好的例子是,當 Web 開發者們明白 CSS 并非 Web 上的桌面印刷工具時所表現出的失望。如果你是 Mac 用戶,你會發現有很多非常大的網站為了防止頁面字體模糊而拒絕使用 CSS,他們很可能使用 px 作為字體尺寸,而這種選擇所隱含的思想就是“設計者也是主宰者”。

這種思想的根由在哪里?我覺得來自印刷。對印刷而言,設計者就是上帝,印刷是一個基于 WYSIWYG (所見即所得)的龐大行業,而眾多 Web 設計者也扎根于此并對這個行業的“德”深信不疑。作為 Web 設計者,我們需要對此重新思考,放棄控制欲,并尋求與網頁之間的全新關系。

為什么要這樣?

“人生之柔弱, 其死堅強。萬物草木生之柔脆,其死枯槁。故堅強者死之徒,柔弱者生之徒。”
《道德經》第76章

不能控制網頁看似一種局限,或缺陷,而來自 WYSIWYG 世界的我們初期都有這種想法,我承認最初我也這樣想。但如今我不再認為那是一種局限,而是新媒體的力量所在。

事實上,我們對紙張媒體的控制才是真正的局限。想想看,我們能固定文字的尺寸,或者說,文字大小不可改變,或者,你可以說,紙張的尺寸也在控制中。

然而這未必是好事,尤其對讀者。如果某個讀者視力不好,你的那些固定的小字體不借助放大鏡就很難看清;如果讀者身處一個局促的空間,比如火車或飛機,那些寬幅的報紙就太大了,而針對這些問題,用戶幾乎無能為力。

我們在印刷中獲得的控制力事實上是一種缺陷,不應再繼承到 Web 設計中。我們知道,Web 沒有這樣的局限,因此應基于彈性而設計,愛這之前我們需要“萬物作而不辭”。

可適應性就是可訪問性

“上善若水, 水善利萬物,又不爭。處眾人之所惡,故幾於道。”
《道德經》第8章

有人認為道是宿命,淺讀會覺得人應當無為,靜待事情的降臨而被動反應。我認為,我們不應為久遠的目標預設將來,相反,應該有適應力,而不是膠柱鼓瑟。

“見小曰明,守柔曰強。用其光,復歸其明,無遺身殃,是謂習常。”
《道德經》第52章

我迄今所談到的所謂彈性即“適應性”。前面所言總結起來就是:讓你的網頁具有適應性。讓你的網頁具有可訪問性,不拘何種瀏覽器,何種平臺亦或何種屏幕。這意味著在任何屏幕尺寸,任何屏幕顏色數下,網頁都合法可用(同時還要記住,人們可能會打印這些網頁,或者使用讀屏軟件以及盲文瀏覽器進行訪問)。這意味著網頁要適應它的訪問者,它的訪問者可能視力不佳,希望使用比較大的字體。

設計適應性網頁就是設計可訪問性網頁,而這是 Web 設計中遠未實現的目標,也是 W3C 的一個重要思想,對 Web 設計來說,這是一個迫切的使命,將來的網頁也許要求實現通用訪問。

這聽上去不太可能,通用訪問,在當今并不靈光的瀏覽器面前,在各種可以訪問 Web 的不成熟的移動設備面前,只是一種理想。但我們仍有很多東西可以努力,并為今后適應性網頁設計打好基礎。

解決之道

“名亦既有,天將知止。知止不殆。譬道在天下,猶川谷與江海。”
《道德經》第32章

如何實現自適應性設計并提高可訪問性?我們要從多個方面做通盤考慮,然后針對這些考量給出解決步驟。首先,想一下你的網頁是做何之用,而不是看上去如何。讓你的設計跟隨你所提供的服務,而不是外觀。讓形式跟從功能,而不是設計。

這種思想的基石是區隔內容與展示,這種說法你或許多次聽過,然而這可能是你所能走出的最重要的一步。舉個簡單的例子,某個網頁上有一段斜體字,為什么要斜體?可能為了強調,或是引述,或者是在英語中使用了一個外文詞,在傳統印刷中,形式跟從功能。而 Web 出版的優勢是我們可以將紙張上含糊的東西明確地表達出來,如果斜體的目的是強調,為什么要使用 <i> 實現而不是非 PC 平臺的瀏覽器也能認識的 <em>?

從大范圍來說,不用將 HTML 用作展示,不要使用 <font>,<b> 以及 <i>,使用那些恰當的 HTML 標簽,如果找不到恰當的標簽,使用 CSS 類。使用 CSS 進行展示,我們要向前看,而不是墨守陳規。

如果你合理地運用了 Style Sheet,并讓它引導,而不是控制你的網頁外觀,同時,你并沒有依賴 Style Sheet 表達信息,那么你的網頁就能在任何瀏覽器正常工作,不管是過去的,還是將來的。那些不支持 Style Sheet 的瀏覽器將輸出簡單的內容部分。事實上,我們最擔心的是那些對 Style Sheet 支持有 BUG 的瀏覽器,今天,這是一個問題,不久前還沒有這么嚴重。現在,你可以限制你的 CSS 只使用其中被各種瀏覽器都完美支持的部分,對于那些不能很好支持的部分,可以使用那些展示型的 HTML 標簽。作者曾為此寫過一些文章

在實踐中,當 CSS 設計可能影響網頁的可訪問性時,你應當有所為有所不為。不管怎樣,不要依賴任何 CSS,絕對單位,如 px 以及 pt 都應當避免,對色彩的使用也要謹慎,而且永遠不要依賴它們。

字體

一般來說,Windows, Mac 以及其它操作系統都只安裝了有限的字體,而它們之間共同的字體更少。目前的很多瀏覽器,以后會有更多,它們已經可以允許用戶自己選擇顯示字體。使用 CSS,你可以指定盡可能多的字體,同樣,不要依賴它們,不管這種字體是多么普遍。

更重要的仍然是字號,你需要知道,同樣的字體,同樣的字號,在 Mac 系統上看上去要比 Windows 系統小。因為 Mac 的邏輯分辨率是 72dpi 而 Windows 是 96dpi。這很重要,首先,讓文字在 Mac 上和 Windows 上顯示一模一樣是不可能的,不過,如果你遵從的是適應性設計,這將不會成為問題。

如果你還操心你的網頁最終看上去是否正好如何,說明你仍沒以適應性設計思想思考問題。一個最主要的可訪問性問題是字號,我們這些視力正常的人可能不相信世界上有很大比例的人無法在印刷媒體上閱讀 14pt 以下的字體,更不要說顯示器,顯示器的分辨率更低。

這是否意味著 14pt 是最小的字號?非也,有的人的視力還要差,那到底用哪個字號?答案是,不要使用 pt,讓用戶自己選擇閱讀字體大小,px 也一樣,因為邏輯分辨率的差別,一個平臺上的 px 和另一個平臺的 px 是不一樣大的。

對于標題等位置,你仍可以使用大一些的字體。CSS 提供了多種方式設置字體尺寸,你可以按某個對象的父對象的百分比設置字體尺寸,比如,標題位于網頁的 BODY 內,如果你沒有設置 BODY 的字體尺寸,系統會取用戶自己指定的字體尺寸,有時候,我們有所不為也可以幫助提升可訪問性。

你可能會說,文字看上去太大,但你可以在瀏覽器中把它縮小,而你的用戶可以選擇放大或者縮小,依據他們的口味或需求。我們可以對標題進行強調,比如,將一級標題的字號加大30%,二級標題加大25%,這樣,不管你的頁面 BODY 部分選用了什么字號,標題都按比例改變,同樣,字號也可以縮小,但需要小心,有時候,字號可能小到無法閱讀。

以上我們所做的僅僅是避免使用絕對尺寸字體已經為可訪問性帶來很多幫助。

布局

邊界,頁寬,縮進都是一些可以提升可訪問性的設計因素。瀏覽器窗口可以改變尺寸,并導致頁面尺寸的改變,不同的 Web 設備(Web TV, 高分辨率顯示器,PDA)擁有不同的最小與最大窗口尺寸,和固定字體尺寸一樣,頁面布局也會帶來可訪問性問題。

和字體一樣,布局也可以使用百分比實現適應性設計,邊界可以使用其容器尺寸的某個百分比。在 CSS 中使用百分比寬度布局會自動實現適應性設計,隨著瀏覽器窗口的拉寬與收窄,頁面的各個部分自動適應以維持相同的比例,從而整體頁面也自動適應,用戶可以自己選擇一個他們認為合適的窗口尺寸。

邊界,文字縮進以及其它布局方因素也可以基于它們所包含的文字的尺寸,可以使用 em 單位,比如:

p {margin – left: 1.5em}

這意味著段落的邊界寬度將是它里面的文字的高度的1.5倍。因此,當我們調整文字的尺寸,邊界也會隨著改變。

顏色

Web 是一個比印刷要色彩豐富得多的媒體,色彩對 Web 來說非常便宜。色彩具有裝飾性,可以建立視覺表征,可以帶來現實意義(比如吸引注意力),然而色彩也會為可訪問性帶來問題。

你是否知道在很多國家(或許全部),紅綠色盲的人不可以申請飛行執照?因為警告信息通常都是按紅色危險綠色安全的形式表現的。很遺憾,警告信息沒有使用可適應性色彩搭配。

你的網頁是否同樣將一些用戶擋在外面?這可不怎么樣,因為不遠的將來,多數瀏覽器將允許用戶使用自定義 Style Sheet 調整頁面的配色,,這些自定義 CSS 將覆蓋你設計的 CSS。如何避免這些問題?不要使用 HTML 標簽,使用 CSS,同時不要依賴同一種配色含義。

改變之途

“合抱之木,生於毫末;九層之臺,起於累土;千里之行,始於足下。”
《道德經》第64章(上)

思想與行為的改變并不容易,“下德不失德”。但我漸漸明白很多我認為理所當然的東西都需要重新考慮,過去我所讀,所見,所聞,所談皆需反思。Web 作為一個新媒體已經到了突破印刷媒體的時候,并非放棄那些智慧與經驗,而是找到自己的使命。

Web 最強大的力量,一直以來被視為局限與缺點,然而 Web 的天性是彈性,我們作為開發者與設計者,需要擁抱這種彈性,實現一個自適的,容易訪問的 Web,這些努力從釋放我們的控制欲開始。

其它語言版本 

Russian (Webmascon.com)
French (Pompage.net)

Tao Te Ching quotes from the GNL’s not Lao Tao Te Ching Copyright © 1992, 1993, 1994, 1995 Peter A. Merel.

延伸閱讀

Related Topics: Accessibility, CSS, Layout, Typography

關于作者

 John Allsopp John Allsopp 是 CSS Editor Style Master 的主要開發人員,Web Essentials conference series 的合伙創始人。他是 WaSP CSS 的捍衛者,也是老學院派式的守舊者,從某種意義上講。

本文國際來源:http://www.alistapart.com/articles/dao
中文翻譯來源:COMSHARP CMS (翻譯:35公里)





評論
...
發表評論


用戶


評論(不超過1000字)


 2 + 5 = ? 請將左邊的算術題的結果填寫到左邊的輸入框  


  發送給朋友| 打印友好
7 x 12 小時服務熱線
0532 - 83669660
微信: comsharp
QQ: 13885509
QQ: 592748664
Skype: comsharp