|
A List Apart 經典文章中譯：Web設計之道（下）
作者: its
|
發布: 2008/12/16 (上午 11:14)
|
閱讀: 38013
|
評論: 0
|
靜態地址
|
內容源碼
這是 A List Apart 經典技術隨筆 A Dao of Web Design 的第二部分，在第一部分的基礎上，在字體，字號，布局，配色幾個方面，講述了如何實現彈性的，可適應性的 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，這些努力從釋放我們的控制欲開始。
譯后記
A List Apart 是被所有 Web 設計者尊為圣典的一份雜志，John Allsopp 的 “A Dao of Web Design” 是被該雜志推薦閱讀的一篇 Web 設計隨筆，已被譯為多種文字發表，然而并未見中文版。既然《道德經》來自中國，就沒有理由讓國內的眾多 Web 設計者去啃并不怎么好懂的英文原文。當然，還是老話，這是技術隨筆，并不是可以傳世的人文作品，翻譯也就只求信，而惘顧雅與達了。這是本文的第二部分，請參閱第一部分。
關于作者
Web 設計之道各語言版本
中文
英文
俄文
法文
| 
團隊博客
