《學習響應式設計》作者Clarissa Peterson：響應式設計並不是萬能的（圖靈訪談）

Clarissa Peterson是一位使用者體驗設計師、Web開發者。她是蒙特利爾的一家響應式網站設計諮詢公司Peterson/Kandy的聯合創始人。她曾在美國公共交通聯合會任Web經理，在此期間她對該組織的網站進行了大規模的改革，在此之前，她曾分別在公益組織AARP以及國會圖書館擔任編輯和開發者。Clarissa是一位很受歡迎的演講者，她經常在北美和歐洲舉辦的開發者會議及研討會上發表關於響應式設計、移動策略和使用者體驗方面的演講，在過去的3年中，她一共做過40場演講。Clarissa Peterson著有《學習響應式設計》一書，該書全面介紹了響應式Web設計策略與技術，引領讀者掌握從專案立項到網站上線的響應式設計工作流程。

問：總體上說，響應式設計的設計過程和一般Web設計的過程有什麼不同？

在傳統Web設計中，設計師用Photoshop創造一張網站的“圖片”，而開發者用HTML和CSS再現這個設計。但是在設計響應式網站的時候，你無法預測你的設計在每種螢幕尺寸以及每個螢幕上會是什麼樣子。所以設計師和開發者需要在整個過程中通力合作，確保設計在每種尺寸的螢幕上看起來都會不錯。

問：現在的螢幕尺寸越來越多，在響應式設計中如何確定在哪裡新增斷點？

你需要在你的設計中新增合理的斷點，而不是按照特定的裝置尺寸安排斷點。這樣你的網站才能在所有裝置上看起來都好，而不是僅僅在幾種裝置上看起來不錯。

問：為什麼“移動優先”非常重要？

移動優先（mobile first）優先考慮的是使用移動裝置的使用者以及這些使用者如何與網站進行互動。

當你建立一個裝置無關的設計時，這是最好的開始方法，不是因為移動裝置上的使用者體驗比桌面電腦或其他裝置的使用者體驗更重要，而是因為移動裝置有更多的限制因素，在螢幕空間有限以及對使用者互動方式（觸控）還不太熟悉的情況下更難以創造好的使用者體驗。

觸控是最大的複雜因素。一個可以很容易使用滑鼠導航的佈局可能在你用你的大手指在一小塊玻璃上戳來戳去時會變得很難用。

問：因為IE6的廣泛普及以及令人不甚滿意的網速，一種“不完整”的響應式網站廣泛存在著（至少在中國），這種網站由不同的PC端頁面和移動端頁面組成。你認為這種網頁可以被稱為真正的響應式設計嗎？你認為在特定背景下這種解決方案值得鼓勵嗎？

如果為不同的裝置創造獨立頁面的話，那就不是響應式設計。如果你沒有足夠的技能在IE6上創造響應式設計，那麼這種方法可能就是最佳解決方案了。但是，響應式設計提供了很多靈活性，我們可以創造出能在IE6上順利顯示的響應式設計，同時也能保證在連線速度慢的情況下網頁負載很小。

問：如何確定響應式設計的網站要支援哪些裝置？

響應式設計的棘手之處在於不只是為不同螢幕尺寸進行設計。畢竟，你可以通過改變瀏覽器視窗的大小來輕鬆地設計和測試媒體查詢。困難的部分在於如何確保網站能夠在儘可能廣的各色裝置上工作。僅僅是在調整瀏覽器視窗大小時看到網站顯示得還不錯並不意味著問題不會突然出現在某些裝置上。事實上各瀏覽器所支援的功能並不完全相同，每個裝置和瀏覽器都可能有小怪癖。

當你開始一個專案時，你需要決定站點設計將支援哪些裝置，這並不是說網站只有在這些裝置上才能工作，只是意味著你僅允諾在這些裝置上進行測試來確保網站正常工作。

而響應式網站是被設計成可在任何尺寸或型別的裝置上工作的，在這些裝置上偶爾發生的怪異情況可能會導致某種錯誤的發生，而你又不可能去實地測試每一個裝置。所以，你需要選擇一系列的裝置和瀏覽器（通常能夠代表常見裝置、作業系統、瀏覽器、視口大小）在它們上面進行測試。

選擇的具體裝置將取決於專案的需要。例如，你的這些裝置可能不包括黑莓或 Windows Phone 裝置。現有網站的統計資料可能會告訴你，只有極少的訪客使用黑莓手機，所以你可能覺得不值得花時間提供對這些裝置的支援。但請記住，如果現有網站不能在某些移動裝置上很好地工作，統計資料可能無法表明有多少擁有那些裝置的使用者因無法使用而離開了你的網站，如果網站能在他們的裝置上正確工作，他們是有可能變成正式使用者的。

你還應該找出所有利益相關人所使用的裝置，並確保在這些裝置上進行了測試，即使它們不太常見。不管清單上列出了什麼裝置，你的利益相關人都會希望網站能在他們自己的手機上正常工作。

問：響應式設計會跟隨作業系統的風格改變而改變嗎？

響應式設計並不依賴於作業系統。響應式設計可能會跟隨當今的設計潮流，比如現在流行的扁平化設計，但是也不是非此不可。

問：設計層面上，你如何評價本地應用設計和響應式Web應用設計？它們各自的優勢在哪裡？

應該根據你設計的內容而選擇設計方式。並沒有放之四海而皆準的解決方案。

響應式設計的優勢包括：

1. 用HTML/CSS/JavaScript就可以創造響應式Web應用，而原生應用針對不同的作業系統需要使用幾種不同的程式語言。
2. 你創造一個Web應用就可以在任何裝置上開啟，對於原生應用的話，你就需要針對iOS, Android，黑莓, Windows等作業系統創造不同的應用。
3. 你可以在任何時候升級你的響應式設計Web應用，改變馬上就會推送到使用者那裡，而升級原生應用則需要等待App Store批准新版本，然後還要等待使用者更新應用。

原生應用也有一些優勢：

1. 如果你創造的東西更加複雜，把它建成一個App的話，你就能在構建的過程中獲得更多控制權。原生應用和作業系統直接通訊，而Web應用則要通過瀏覽器和作業系統通訊。
2. 原生應用允許你使用裝置的功能，而現在的瀏覽器還達不到這一點，比如攝像頭，或者推送通知。原生應用還能讓你更輕鬆地收錢，無論是在App Store中賣應用，還是賣App內購買專案。

問：根據不同公司各自的技術框架，他們是否需要設計自己獨有的響應式設計實現？

任何時候一家公司設計一個網站，都需要根據自身的技術框架量身定做，無論網站是不是響應式的。

問：有哪些設計得不錯的響應式網站值得推薦？這些網站在設計上成功的關鍵是什麼？

很多網站都已經切換到了響應式設計，有成千上萬個設計得很好的響應式網站。你可以在在Twitter上關注http://www.twitter.com/rwdwhere，這裡會持續釋出最新上線、設計優良的響應式網站。

問：你如何評價WIX, Squarespace以及Wordpress？這些系統之間孰優孰劣？

我從來沒用過WIX或者Squarespace。WordPress對於響應式設計來說很不錯，因為他們提供了很多響應式主題（甚至預設主題都是響應式的），而且在此之上你還可以做特殊定製，讓你網站的響應性變得更強。

---

更多精彩，加入圖靈訪談微信！