[經驗]RWD常見設計模式 – 換個角度看RWD(上)

何謂RWD? 所謂的RWD就是指Responsive Web Design，中文翻譯大概就是所謂的響應式設計，意思就是網站會隨著載具的不同而產生不同的畫面，而什麼是不同的載具？就是指桌機、平板、手機等等不同的上網平台，也就是說你只需要做一種設計，就可以符合全部不同的載具，聽起來很神奇對吧？但是這是需要一定的經驗與實作練習才可以做到恰到好處的，所以聽起來很簡單，但做起來是需要一定的技術門檻的。本篇的內容主要是針對投影片以及3月31日在高雄軟體園區所做的分享內容為主，所以如果當天沒有到現場，那你也可以透過這篇文章有一個詳細的認知，阿如果當天已經到過現場，請放心，這篇文章不但可以幫你復習，還會多增加一點點新的元素，更重要的是，這篇文章只是3月31日最末場分享，所以大部份的機密還是要到現場才會了解的！因為這本來就是一場50分鐘的分享，所以可想而知，這篇文章會非常非常長，我個人預期會分成兩篇文章來做詳細的描述！開場就到這邊，讓我們進入正題！

今天我要分享的主題是RWD常見設計模式，下面有個藍色的副標提“讓我們換個角度來看RWD”，那為什麼會有這個副標題呢？那就從我本人的經歷開始說起，我本人的經歷其實有點犯規，怎麼說呢？因為你會看到我在投影片裡面寫到了，我的經歷涵蓋“使用者研究員、網路行銷企劃、網頁設計師、PHP程式設計師、社群營運專案經理”等等，所以你會發現我接觸到的網路範圍非常的廣，不管是實作還是跟客戶接洽亦或是網站的營運，最重要的是，我有一項特殊經歷是很多設計師都不曾遇過的，那就是我當過使用者研究員，這對我的影響最大的部分就是，我在做任何的視覺設計或是UI設計上，我的出發點都是從使用者開始，可以看到我服務過的客戶涵蓋了八大領域，範圍非常廣泛，阿說了這麼多，第二張投影片只有一個用意，那就是告訴大家只要遇到黃色的字，就代表那是重點！所以歡迎大家來跟我合作（笑）。

我今天要講的大綱有三個部分，第一個是從大到小還是小到大？第二個是設計模式，各種載具使用行為都不一樣，以及第三個國外案例解析，我今天重點比較會是在設計模式這麼部分，國外的案例會提到幾個我覺得比較特別的，但是不會提到太多（後記：實情是我知道中間我會講很久，所以後面的案例自然就會不多）。

在開始之前，我有一件事要先跟各位說，在投影片第四頁你會看到三本書，分別是由三個知名網站、雜誌或出版社所出版與RWD有關的書籍，各位可以看到這三本書分別是2011年即2012年出版，所以如果你現在才開始研究RWD，那不好意思，你已經落後國外兩年的時間了，麻煩請儘快趕上！如果你對RWD的實作方式不解，也歡迎參考這三本書（後記：如果你有參加3月31日全天的演講，我相信你已經具備RWD相關實作技巧了，所以書籍翻不翻、看不看，個人是覺得不會有太大的差異）。

第一個議題，從大到小還是從小到大？有沒有人看到這個問題覺得好像在問廢話的？來實際說這個議題前，我們先來瞭解一下網頁設計的流程，一般的設計流程是從客戶接觸、需求分析、網站規劃、視覺設計、程式開發到最後測試上線，我在規劃跟設計的地方標上了黃色，主要的原因是這兩個階段是RWD的重要階段，在需求分析之後確定客戶要做RWD，那勢必在企劃過程中就要做好RWD的網站內容規劃，接下來才能設計出符合RWD的網站，才能交由後端做程式上的應用，有了這樣的流程基礎後呢，我們再回來看我們的議題，到底是要從小到大，還是從大到小？

一般來說是取決於網站內容而定，所以沒有一定的規則，但是以通常的情況下來看，先做複雜的版本，在抽掉不需要的部分，這樣的做法應該是比較簡單的，也就是說化繁為簡在制作上是會比較容易，當然在內容的刪減幅度多寡就會影響設計的過程，所以在做RWD的網站時，很容易掉了一顆螺絲就導致整組壞光光，那網站做出來就很無彩了。

再來第二個議題，設計模式－各種載具的使用行為都不一樣，我們先來看看桌機、平板、手機的差異，桌機可能會有滑鼠跟觸控板，平板是觸控板跟電容筆，手機是觸控板跟電容筆，再來是鍵盤的部分，你會發現不同的平台都有鍵盤跟迷你鍵盤這兩種選擇，為什麼我要提這個呢？我先來大概描述一下使用者研究的過程，首先我們會有一個目的，針對這個目的我們會去做市場調查、分析或是需求訪談等等，接下來我們就會做建模這個動作，所謂的建模是指我們會去想像我們的目標使用者是什麼樣子、個性如何、平常會做哪些事情，有點類似角色扮演的感覺，我們會假想目標使用者的一切，這樣的過程會協助我們在研究的過程中有一個目標族群可以沙盤推演，所以這個階段非常的重要，如果你建錯模，也就是說你的目標族群設定錯誤，那你覺得你做完一系列的研究之後，你的結果會是對的嗎？當然就很容易導出錯誤的結果，所以在建模的這個過程非常的重要，你要有正確的使用族群，在針對使用族群去做需求分析，再透過需求去做研究、訪談，最後修正目的的導向或需求的內容之後，在最測試，測試過後結果如果不對，就會回到修正再測試～修正再測試，所以真正的結果可能是修正過許多次後才得到的正確結果，通常這個過程時間長短不一定，有可能幾個禮拜、幾個月，也有可能長到一年。很多網站在設計的過程中並沒有經過這樣的使用者測試，我們很容易陷入一種迷失之中，以為這樣設計就是對的，但是我們忘記了自己就是設計的人，或者我們就是重度的網路使用者，所以我們在學習上本來就會比不是重度使用者的人還要快上許多倍，所以一般我在作使用者研究的過程中是不會找網路相關人員的，當然如果今天不是一個正式的研究，也許你會找公司內部的人或是朋友，並沒有說這樣的測試是不行的，只是這些人的建議參考值可能要打點折扣，絕對不能全盤相信，否則很容易會有錯誤的結果。（後記：這裡我採用建模這個名詞是比較淺顯易懂，應該是只有3D人員比較會用這個詞，在這邊真正的專有名詞叫做Persona，中文翻譯為人物誌。）

我們看歐美的網站其實好像大部份都是方塊矩形拼一拼湊一湊，有些台灣的網站反而還比較有設計感，但是為什麼台灣的網站就是沒辦法向歐美網站這麼紅或這麼夯，我覺得很大一部分的原因就在於台灣人做網站很少會去做使用者研究，相較歐美比起來，歐美在網站制作過程中其實會比較專注在使用者這一塊上，像是Facebook、Pinterest亦或是Google甚至台灣的雅虎等等都有這方面的專業人士存在，舉個簡單的例子，有些人開Google或Facebook就發現版面變了，可是別人用的卻不是這樣，這是為什麼？這不是你的界面壞掉了，這是Google或Facebook在做所謂的A/B testing，為什麼要做A/B testing？通常我會做A/B testing常見的問題就是在某個議題下，結果有兩個版本，有可能樣本數不夠或是其他的原因導致沒辦法在兩個版本中選出一個版本來，這時最簡單的解決方式就是把這兩個版本釋放出去，透過A/B testing我們會有一些指標性的數據，可以幫助我們選擇一個最正確的版本，讓網友或使用者透過行為來決定到底要用哪個版本，這就是為什麼你有時候會看到不同的界面的原因，而這樣的步驟與行為，我個人認為就是台灣與國外在設計實務上落差最大的部分。

(待續…..下篇)

需要相關的RWD設計相關服務？請參考此處。