強韌網頁設計—第六章:步驟

「設計一件東西時,要常常設想這東西會身處的下一個大情景」芬蘭築建師伊利爾·沙里寧(Eliel Saarinen)說,「一張椅子身處房間中,一個房間身處房子中,一個房子身處環境中,一個環境身處城市規劃中」。

一眼望去,網頁設計好像是一種平面設計,使用平設計工具如 Photoshop 去設計網站加深了這看法。但若要達到網站的核心目的,我們要考慮比這介面的更大情景:人們想要完成甚麼?

為網頁做設計,容易以互動元素作思考:滑動、指點、點擊、滾動、拖放,但鮮有人一早起來就期望一整天的滾動與指點,他們期望的比較可能是閱讀、寫作、分享、買賣。網頁設計師必需看穿表層的動作,尋找底下更有意義的動詞。

在 Filament Group 的著作《Designing With Progressive Enhancement》(以漸進增強作設計),他們形容一個叫「X光視點」(x-ray perspective)的技巧:

使用X光視點就是看穿複設計的雜部件與視覺風格,辨認出組成網頁的核心內容與功能部份,找出其相對應的簡單 HTML,讓每個都能普遍運作

若不習慣此設計方式,會需要一點時間適應,但習慣後就很難不以此方式檢驗介面,就好像看不過不當字距、難以忽略 FedEx 標誌中簡的空白組成的箭頭、或忘記所有的鴨都帶了狗面具。

這鴨的嘴看似一隻狗的面
這鴨的嘴看似一隻狗的面
Asmaa Dee 攝,創用 CC 姓名標示-非商業-禁止改作 2.0 授權。

這是我所設計網頁的三個步驟:

  1. 認出核心功能
  2. 使用最簡單的可能技術實現這功能
  3. 增強之!

認出核心功能看似蠻直接,而經過一些練習後的確如此,但一開始時要分別出真正需要與錦上添花的元素可以很棘手。

資訊

就說你是新聞提供者,核心功能很直接-提供新聞,你也可以提供很多其他服務諸如互動拼圖、實時通知等等,這些服務有其價值,但大概不比確保人們看到新聞重要。

一些新聞出口網站
一些新聞出口網站

認出核心功能後,來到第二步:如何以最簡單的科技實現?

理論上,一個純文字檔就是提供新聞最簡單的方法,但由於我們在談網頁,讓我們再重申這點:如何以最簡單的網頁技術實現此功能?在一個 URL 提供一個 HTML 檔。

開始時很易令事情過度複,HTML 可能會無需要地臃腫,URL 可能會無必要地纍贅,使之難以被分享或記起。

使用適當的 HTML 元素-文章、標題、段落、清單、圖片-標示好那新聞後,是時候到第三步:增強!

在預設環境下,這篇新聞會以瀏覽器內建的樣式表去表達,這會夠清晰,但未必好看。使用你自己寫的 CSS 可將內容塑造得更令人喜愛。你可使用工具如空白、行高、用色、對比等等,甚至可以用自訂字型─這項增強多年來在網頁一直還不可能。

這並不保證所有瀏覽器都有能力執行你所下的 CSS 宣告,而這也沒有問題,瀏覽器會跳過不明白的地方。重要的地方是所有人仍然可以看到新聞,不論其瀏覽器的 CSS 能力。

對於一些螢幕較大的裝置,你可以引入排版。將排版看成一種增強看似怪怪的,但這是流動優先的響應式設計的重要一課。先考慮內容,然後以明智的源碼次序標示,才再在媒介查詢內使用排版宣告。

感謝 CSS 的不停進化,我們有很多排版的方法,就如安德魯·斯圖爾特·塔能鮑姆(Andy Tannenbaum)所說:

標準的好處在於你有太多選擇了

溝通

在新聞網站實現三步曲相對直接,看新聞是比較被動的。要真的測試這三步流程,需要應用在更互動的東西上。

當我們要建立一個社交網站,讓各地的人不論何處皆能溝通,其核心功能就是送出與接收訊息。

一些使網絡更美的社交網站
一些使網絡更美的社交網站

在網絡瀏覽器上顯示訊息不難,當中伺服器端或許有很多複雜的東西:資料庫、同步、排隊、負載平衡,但顯示逆時序的清單所需的 HTML,並不會比新聞網頁有太大分別。

由瀏覽器發送訊息到網頁伺服器則需要具有互動性的 HTML,這可用到表單。在這情況,一個表單內的一文字輸入和發送按鈕應該就足夠提供基本功能了。

人們現在可以用我們的社交網來收發訊息了,不論他們使用任何裝置或瀏覽器。現在棘手的是如何在不破壞現有活動的情況下改善體驗。

若我們僅由網站在只得 HTML 的狀態,不能令我們在短時間內慶祝公司上市。要將我們的服務與對手分別開來,我們需要第三步:增強!

至少,我們可以使用在新聞網站的相同邏輯來設計我們的服務,使用 CSS 來提供顏色、材質、對比、網絡字型、更大的螢幕設計、排版。但別止步於外觀,讓我們也改善互動。

現時這個社交網站跟新聞網站一樣是以頁為基礎的互動,每次要給伺服器發送一個訊息,伺服器就得送回整個新的網頁,我們可以做得更好,是時候加點 Ajax

我們可以攔截表單的提交,轉而使用 Ajax 來送資料到伺服器─我愛使用 Hijax (1) 來形容此種 Ajax 攔截,如果伺服器有回應,我們也可以只更新部份頁面,而不用刷新整頁,這也是加入一些適當動畫的好時機。

我們還可更進一步,支持 WebSockets 的瀏覽器可以接收來自伺服器的訊息,使用這些瀏覽器的人可以在送出之時就得到更新,我們甚至可以使用點對點連接來讓瀏覽器使用者作直接溝通。

不是每個瀏覽器都有這些高級功能,但這不成問題,最基本的功能-發送與接收訊息-仍然是人人可用。

創造

如果我們的社交網站是更專門的?讓我們建立一個相片分享服務,這提升了門檻,不僅要收發訊息,核心功能現在需要能夠收發圖片。

相片分享網站
相片分享網站

介面上我們需要顯示一列逆時序的相片,HTML 可以處理得到,再一次,我們需要使用表單來送資料到伺服器,這一次需要一個檔案上載欄,而不是文字欄。

在這些更動後,核心功能已備,是時候增強了。

在現有的增強功能之上─CSS、網絡字型、Ajax、WebSockets─我們可以使用 HTML5 引入的檔案 API,讓我們可以直接在瀏覽器上操作圖片,可以在發送圖片前加入特效,使用 CSS 濾鏡,我們可提供一系列的圖像增強,由復古褐色到暈影效果。若瀏覽器不支持檔案 APICSS 濾鏡,人們仍然可以上載他們的鴨嘴臉自拍照。

合作

曾經,使用軟件等於要在電腦上安裝很多不同的程式,今天只需要安裝了瀏覽器就可以了。寫電郵、找聯絡資料、日曆上記下約會、簿記和其他財務工作,現在都可以在沒有安裝特定應用程式下完成,訪問一條 URL 就可在你需要時召集齊你所要的工具。

使用網絡來傳遞軟件不單取代桌面為主的工作方式,互聯網的連接打開各種合作的可能。例如我們以前稱為「文字處理」的應用,程式給綁定在某機器上,想要共同合作編輯同一文件就注定是件棘手工作,需要大量的協調,將檔案寄來寄去。使用網頁,分享單一 URL 就可以讓多人同時在同一份文件上工作。

網頁上的協作寫作工具
網頁上的協作寫作工具

讓我們在一個網頁為基礎的文字處理器,施展三步流程:

辨認核心功能

廢話答案是「文字處理」,沒有多大用處。人們使用這軟件時真正在做甚麼?他們寫作、分享、修改。

使用最簡單的可能技術來現實此功能

看看我們的三個動詞-寫作、分享和修改-我們可以只使用 URL 就可以達成分享,其他兩項寫作和修改,需要使用表單。一個基本的 TEXTAREA 元素可以用來裝載文字、句字、段落,組成任何由技術報告到偉大的美國小說,將內容送到網絡伺服器儲存這些文字得以日後再用。

技術上來說,這就成了一個網頁為基礎的文字處理器了,任何有網絡瀏覽器和互聯網連接的人皆可存取,只是其使用體驗會又笨又遲鈍,使用當今瀏覽器提供的更聰明選項絕不為過。

增強!

使用 JavaScript,謙遜的 TEXTAREA 由更豐富的編輯介面所取代,偵測每一個按鍵,即時顯示樣式。使用網絡字型可使寫作體驗更好。Ajax 可將工作幾乎定時儲存,而不需提交表單。WebSockets 可讓許多人同時在同一份文件上工作。

Ajax 和 WebSockets 需要互聯網連接,但穩定連接並無保證,尤其當你在火車或酒店工作時,當今瀏覽器提供功能,在首次載入後,以網絡做為一種增強。

如果瀏覽器支持本地儲存,就可將資料存在本地資料庫,使重要文件的儲存,不被薄弱的網絡連接或意外的停電所影響。使用 Service Workers,網頁開發者可以提供指令給瀏覽器,在瀏覽器(或伺服器)離線時該怎麼做。

這些都是我們可利用的當今瀏覽器功能... 當我們確保每個人都有了基本體驗之後。

規模

沃德·坎寧安(Ward Cunningham),wiki 的創造者,提出了「技術負債」一詞來形容軟件業的一個共同問題,專案初期的倉促決定令接下來的問題一個疊一個地積累。我愛將三步曲的層次方法想成「技術信用」,花時間在開始時提供核心功能,讓你在之後有隨便探索實驗的自由。

有些人誤解漸進增強就是放棄使用最新最好的技術,正正相反。使用有層次的方式去建立網頁,給你使用最前沿 JavaScript APIs 的許可證,而不用理會瀏覽器現實了多少。

我們看過一些應用三步曲的產品和服務-新聞、社交網、相片分享、文字處理。你可將之應用在更多的服務之上:建立更新待辦清單、管理約會日曆、查詢方向、預留附近餐廳位置,每一個都使用同樣的建設流程:

  1. 認出核心功能
  2. 使用最簡單的可能技術實現這功能
  3. 增強之!

這方法在不同規模之下同樣可行,不只是最高層次的服務而已,也可以應用到個別 URLs 的層次。

問問「URL 的核心功能是甚麼?」,然後使用最簡單的可能技術實現,再增強。這可理清甚麼內容是最重要的,尤其在流動裝置優先的響應式工作流程中更為重要。一旦確立,就可以先將內容以 HTML (最簡單的可能科技) 由伺服器送出。然後,使用條件式載入,你可以決定在有足夠的螢幕空間時以 Ajax 要求輔助內容。若是新聞故事的個別 URL,故事本身應包含在原始回應裏,其他的相關故事或流言應該按需要才由伺服器推送(不過你仍可為相關故事和留言給所有人提供連接)。

更進一步,在頁內的某單一元件的尺度下,也可以施以三步曲。「這元件的核心功能是甚麼?如何以最簡單的可能技術實現?如何增強?」

例如一個載歌載舞式的互動地圖元件,使用X光鏡探之,發現其核心功能其實很簡單:顯示位置。使用最簡單的可行技術:以文字顯示這個地址。現在再增強。

記住這些增強是可以以一個流動的規模提供,第一個增強可能是提供文字地址的靜態圖片,下一級就可以是將靜態圖片換成 Ajax 加強的互動地圖,如果瀏覽器支持地理位置 API,你可以顯示此間的距離,疊上一些動畫與過渡可以幫助傳達道路方向。

網站導覽是另一個分開的元件,可好好應用流動增強規模。基本功能是提供連接到資源,其最簡單-和仍然是最好-的可行技術是謙遜的超連接,一個清單的連接就可以了。在此上,你可以將此增強到一些引人注目的東西,畫外導覽、漸進式展現、溜動、滑動、漸消失、擴張...只有天空才是極限。

因為這些增強可以跟據瀏覽器的個別能力而分層,顯然不只兩個版本而已(基本版和增強版),你所設計的服務、URLs、與元件可以有很多不同的體驗方式,而這是沒有問題的。

因為網站不用在每個瀏覽器上都一模一樣。

註:

  1. 騎劫 (hijack) 的諧音

參考資料


本文是《Resilient Web Design》繁體中文翻譯的其中一部份,以該書的相同的姓名標示-相同方式分享 CC 4.0 國際授權

回應

*