隨著各種屏幕尺寸設備的興起以及互動方式的多樣性，之前採用的網站設計方法已不再適用。我們需要更新設計方法，更新設計觀念，更新設計工具。本文出處 – Smashing Magazine – How Much Has The Web Really Changed? 這篇文章從分析 Web 發生了哪些變化開始，最後引導建議網頁設計師們該採用怎樣的新設計理念。
不久以前，網頁設計師執行的網頁設計都是針對預設或是主流的屏幕大小以及個人電腦 (Desktop)。但隨著各種屏幕尺寸設備的興起 (iPhone/ iPad/ Android….)，以及人機介面的互動方式變得更多樣化，這些預設值已不再適用。現在我們進行網站設計所用到的所有預設值均需要更新
近年 Web 所發生的變化
人們一直在談論Web發生了改變，讓我們首先看看Web究竟發生了哪些變化。
屏幕尺寸
90年代，Web頁為640像素寬，21世紀初，其寬增長到800像素。幾年以前，我們將它調整為1024像素。但就在5年前，“奇怪的事”突然發生了。小屏幕設備進入市場。一時間，我們對Web設定的寬就不再適合了。不久，平板電腦進入市場。現在屏幕視窗的高超過了寬。
屏幕尺寸已沒有固定的值（圖片來自：Aram Bartholl）
現在我們無法了解用戶所使用視窗的大小。我們只能假設其寬是一個令用戶舒服的隨機數字。這些數字是任意的，總會有一些用戶會看到不完整的Web頁面。在這裡，我們可以先忽略這些用戶。
“每個人都有一個鼠標”
我們總是預設每個用戶都有一個鼠標。雖然我們知道，這並不總是事實。大部分設計師會忽略為不使用鼠標的用戶設計互動方式。不管什麼原因，那些不得不使用鍵盤的用戶往往很難與我們的網站進行互動。
但由於大部分用戶確實使用鼠標，當時很多設計者認為設計只要滿足大部分人就可以了，所以我們設計出的網站還是有很多人是無法使用的。事實證明，這個數據一直在增加。很多依靠鼠標進行的互動，在觸碰設備上是完全不起作用的。因為用戶喜歡這些設備，甚至管理者和設計師都在用它們，所以它們是很難被忽略掉。
“每個人都有寬頻網路”
我們另一個預設情況就是每個人都有速度超快的網際網路連線速度，至少和我們的一樣快。如果他們現在沒有它，不久也會有的。這似乎又是事實。網速確實越來越快。但是，今天越來越多的人在使用差勁的、不可靠的3G網絡。如果你曾在火車上使用3G網絡，你就會明白我所說的。如果你曾在酒店使用其提供的免費Wi-Fi，你就會明白我們假設互聯網越來越快是不成立的。這是我們思維中的一大變化，我們確實應該為這些用戶考慮。這將對我們的設計外觀產生較大影響。
“大家的電腦一年比一年快”
電腦越來越快，過去是這樣的。如果在買電腦之前再等半年，同樣的價格你就可以買一台快兩倍的電腦。而這邏輯只適用於桌機，但對於移動裝置，還有比處理器速度更重要的事。例如，對於手機，最重要的是電池待機時間：你不想每次打完電話後都必須充電吧。
還有另一個趨勢：現在的制造商開始銷售價格更低廉的設備，而非速度更快的設備。相比處理器速度，很多用戶更關注價格和電池待機時間。你的老式電腦怎麼樣了？你可能賣了，也可能扔了。但用戶仍保留並使用著。並不是每個人都擁有與我們設計師同樣的硬體設備。
“所有的顯示器都已經被調校過”
我們很清楚這一條是不對的。只有那些可視化專業人士的顯示器才進行過校准。其他人的顯示器大部分都無法正確顯示色彩，很多顯示器還是十分差勁的。我所測試過的大部分移動手機有著相當棒的顯示屏。可當在陽光下使用時，如果你幸運，或許還可以看得見內容，但卻無法看到低對比度設計下細微顏色的微妙漸變。
人們總會使用那些低劣的顯示器，而且訪問你網站的人往往視力不好。越來越多的人正在看不合格的調色板。與其購買一款專業的顯示器，不如購買一款廉價的顯示器和幾台低端設備來測試你的作品，這往往對網頁設計師而言是更好的選擇。
Web在最近5年裡發生了變化，設計網站的老方式已不再適用。我們需要新的方法論。
This Is Responsive，該網站為響應式網頁設計提供了很好的資源。
過去幾年裡，我們一直在積極地研究新方法，以解決 Web 在不同尺寸屏幕上的顯示問題。除了響應式設計，在日益增長的攜帶裝置上存在越來越多的挑戰。我們必須尋找新的互動設計模式：我們需要可以工作於任何設備上的界面。設計過程中，一些新的約定俗成正在產生，即新的預設。下文將列出一些新的預設情況。
新的預設：激活方式
本想用“觸控”一詞，但考慮到大家對該詞的理解不同，所以改為了“激活”。對於所有設備，無論他們需要怎樣的輸入方式，都需要用戶以某種方法來激活某件事。
對於鼠標，就是點擊；對於觸控設備，就是滑動；對於鍵盤，就是敲擊。還有聲音、在空中揮動手臂等激活方法。很多設備往往提供多種互動方式。對於各種設備，其共同點就是必須通過激活動作來完成某件事。
最近，我們開始思考用戶輸入的其他方法。我們曾經假設人們都使用鼠標。當鼠標移至上面時顯示內容，移開後則隱藏內容。在觸控設備進入市場之前，該方法一直為大部分人所采用。當內容只有通過鼠標操作才能顯示的話，那對於沒有鼠標的觸控設備該怎麼辦呢？不同設備要有不同的解決方案。下面看看這個下拉菜單。
當鼠標停在主菜單項上，子菜單便出現。此外，你還可以點擊它打開該鏈接。現在，你在觸摸設備上敲擊該菜單項，會發生什麼？子菜單出現了嗎？連結激活了嗎？兩者都發生了？還是發生了其他事情呢？在iOS上，其他事情發生了。你第一次敲擊該鏈接時，子菜單出現了，即引發了鼠標停在主菜單項上的事件。但你需要再敲擊一下這個鏈接，才能打開它。
我們可以針對不同的輸入設備定義不同的互動方式。但我認為更好的辦法是確保預設的互動方式適用於所有用戶。如果你確實要這麼做，你可以針對特定的用戶來增強這種預設體驗。
例如，你確定有人正在使用鼠標，那你要保證靠鼠標進行的互動方式可用；如果你確定某人的手指較粗，那你要把小按鈕做得再大些。只要大家對此無疑問，只要這種改善有利於互動，就可以這樣做，但預設的互動方式除外。在這些假設中，有一些，比如鼠標的使用，是很難去除的–尤其在可以提供多種互動方式的設備上，如可安裝鼠標、帶有觸摸鍵盤、相機、麥克風、鍵盤和觸摸屏的筆記本。對此要認真思考一下。你確實需要針對鼠標進行優化嗎？
新的預設：小屏幕
正如把一輛小汽車進行壓縮，雖說更美觀了，但卻沒有以前實用了。在網站上也同樣，桌面上的網站進行壓縮後用到小屏幕設備上，並不一定能帶來同樣的用戶體驗。
構建適用於所有屏幕上的響應式網站，首先針對小屏幕進行設計是最容易的。它會迫使你專注於真正重要的事情上：不適於小屏幕的，很可能就是不重要。它會迫使你更好地思考布局，思考頁面中內容的展現順序。 (請參考 inside.com.tw – 頂尖公司都在喊：手機優先（Mobile First！），您呢？)
上文提到的互動設計方法同樣適用於圖形設計–首先設計激活事件，之後再改善它。我們首先設計每個人都能看見的東西，即內容。無論屏幕大小，無論瀏覽器功能多少，其均能顯示字符。這是我們唯一確定的事情，所以從文本開始設計是原則（大部分Kindles不支持色彩，老版本的瀏覽器無法支持新版CSS中的很多特性，布局在小屏幕設備上處於次要位置。）
我們可以從設計不同大小字體間的布局著手。無論每個人有怎樣的設備，他們都可以看到該布局 (Layout)。該布局設計好後，你就可以針對更大屏幕設計布局。你可以把它看成針對使用更大屏幕用戶的一次改善。之後，當不同的布局完成之後，你就可以為該網站增加其他“修飾” 了，如顏色、漸變、邊框等。
不能同時考慮其他方面。我也正嘗試尋找所有不同設備（具有不同的屏幕大小，不同的特性）之間的共同點。首先針對這些共同點進行設計是合理的。而奇特的是，該點往往被忽視：Web 專業人員傾向於在高配置的設備（運行著最新版本的瀏覽器）上審視他們的作品。他們僅看到了最新的瀏覽器配置，卻忽略了提供基本使用者體驗的這些共同點。
新的預設：內容
直到最近，我們都是這樣設計網站的：在頂部放上帶有 Logo 的 Banner圖和選單，將子選單放在左邊，右邊放一些小部件，頁腳放在底部。當所有這些完成後，我們再把內容塞在中部的小小空間中。這就好像我們對我們的內容很不自信，嘗試提供一些用戶可能會喜歡的其他東西。
我們應該專注於中間的部分，保證它正常工作，看起來美觀、具有可讀性。確保所有人理解它，發現它有用。
一旦你完成了內容部分，你可以自問一下，該內容確實需要一個Banner？Logo？子選單？它必須要有一個選單嗎？它確實需要那些裝飾的小圖示 (icon) 嗎？顯然最後一個問題的答案是“不”。我不理解這些小 icon 有什麼用。在我看來，沒有任何 icon 保留空白區域更美觀。
從內容開始著手，可以幫助我們找出很多有趣的解決方案。例如，Logo確實需要放在每頁的頂部嗎？在很多網頁中，放在頁腳部分效果可能更好，如在數字類型的選單中，或在注冊頁面中。子選單中的很多鏈接放在主要內容區域的相關部分效果可能更好。
當觀看頁面布局時，主選單比主要內容更重要嗎？大部分情況下，並不是。我通常認為選單屬於頁腳內容。在頁面頂部放一個“跳轉”鏈接可以把訪問者引導至選單處，也可獲得選單，並將其顯示在頂部。
在響應式Web設計時代，我們需要很多新的、聰明的解決方案。
設計過程的改進
看完上面內容後，你可能明白這只是過程改進。從文本開始，對文本進行設計，根據不同的屏幕大小和設備對它進行優化，之後再針對特殊屬性進一步優化，如鼠標的使用，針對胖手指的設計。大部分的 Web 開發人員 (主要是指 Front End Programmer) 都基於該原則構建網站。他們把設計師設計出來漂亮的 Photoshop/ AI 檔案透過 HTML5 + CSS3 製作成一頁又一頁的網頁。
如果前端開發者 (Front End) 有很好的設計感且關注細節，這可以產生很好的效果。但往往他們並非如此（註: 在轉轉這點除外 – 我們總是讓前端開發者有著良好的設計感及美感的訓練 lol)，便很容易設計出可用性不好、簡陋的產品。我並不是說不讓設計師使用 Photoshop。如果那是你的工具，繼續使用它。但要記住，你正在設計 Web 的不同層，不是 Photoshop 中的層。一個網頁要比單張漂亮圖片包含更多內容。人們會以各種方式看我們的設計，我們在為所有這些人進行設計。請記住，我們不僅僅為使用筆記本的 CEO 設計，還為在火車上或使用免費 Wi-Fi 的人設計。
工具軟體
上面提到了，在設計網頁過程中，Photoshop一直被濫用。好設計工具的缺失是造成過程改進難以進行的原因之一。我們所使用的工具大部分是幫助我們為網站增加“修飾”，而不是設計其核心。很幸運，針對特定功能的小型設計工具越來越多。如 Gridset 幫助我們針對不同的屏幕尺寸設計網格。好的設計工具可以幫助我們定義排版。把這些設計工具融入到我們的設計過程中，我們可以設計出更好的作品。
(註: 在轉轉, 我們設計師都是使用格線為中心 Grid Base 的工具去設計網頁, 如 inDesign, illustrator。We don’t use photoshop to design website here.)
結論
現在的網站設計與以前已大不同。固定、單一的互動方式已不再適用。我們的設計過程需要新的起點。除了上文提到的，還有很多。就拿我們常用的表單設計來說吧，它足可以用一系列文章來講述。希望大家在設計過程中，可以創新出更多好方法。
原文出處 – Smashing Magazine – How Much Has The Web Really Changed?