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

本篇接續上篇：[經驗]RWD常見設計模式 – 換個角度看RWD(上)。

說了這麼多，我們回到今天我最想講的重點，也就是建模這個動作，在任何網站製作的時候就應該確定這個網站是for什麼人，也就是說目標使用者族群應該早早就確認出來了，所以在這個網站上線後就必須追蹤這個網站的各種資料，然後來做資料分析，以確保你所做出來的網站是正確適合目標使用者族群的，而在網站沒有上線前，一定會遇到的問題就是可以分析的資料太少了，既然分析的資料少，那就必須創造資料，所以可能會找內部同事封測，或是找親朋好友試用，然後再從中收集資料做資料分析，所以說網站資料分析真的非常重要！再來是你在建模的時候就必須清楚瞭解你的目標使用者使用的平台或載具有哪些，這些載具的操作模式又是什麼，而且通常使用者都會開外掛！比方說用筆電的就可能因為觸控板不好用而多出了一隻滑鼠來，又或者是桌機本身就是觸控式螢幕，所以不需要滑鼠，各式各樣的使用者就會開出各式各樣的外掛，但是請注意，這些開外掛的使用者族群數量絕對不會超過一般使用者，除非你的網站是開發給XBOX本身就是用遙感或Kinect體感之類的那當然另當別論，否則一般的桌機使用者就該配備有鍵盤滑鼠、手機跟平板就會是大拇指或食指，因為操作方法不同，當然所需的設計模式或是界面就會跟著不同，而這些設計上最常見的問題處就是有連結或按鈕的地方。

按鈕到底要多大？說到這個問題就不得不提一下人機互動領域第一條定律：費茲定律(fitts’ law)，公式呢就是如同投影片所寫的那樣這樣（默），基本概念呢也如同我投影片寫的那樣這樣（默），我相信很多人跟我一樣看到這樣的數學公式就會開始神遊各地了，所以我舉一個簡單的例子，假設你的滑鼠從A點要移動到B的距離如果增加了1000倍，那所需要的時間會是多長？我們可以看到投影片裡我很貼心地幫你算好了，只需要大概10倍的時間，而不是跟距離一樣的1000倍，說了這麼多這到底跟按鈕大小有什麼關係？

讓我用Firefox的上一頁跟下一頁按鈕做範例，各位可以看到我這裡有放使用前與使用後，你會發現使用前是沒有下一頁的，而且當下一頁按鈕出現後，你可以發現上一頁的按鈕很明顯的比較大，為什麼？因為通常你滑鼠的位置都離右邊的捲軸比較近，所以當你發現你到錯地方的時候，你的滑鼠移動到上一頁按鈕的距離是比較遙遠的，所以上一頁的按鈕設計的比較大是為了增加你按這顆按鈕的效率，當效率提升你自然會覺得好用，那為什麼下一頁的按鈕要藏起來？而且還比上一頁小顆？原因很簡單，原因在於當你要按下一頁的動機是來自於你按完上一頁之後，發現自己回錯地方了，所以你就會回到下一頁，而這時的你滑鼠就會是從上一頁的按鈕移到下一頁，所以你會發現距離變短之下，按鈕設計就會相對比較小一點，所以從這邊我們可以獲得一個簡單的結論就是，當距離較遠按鈕就該設計比較大，而距離較近時，按鈕就會設計比較小，如果說到這裡還是覺得很複雜，沒關係！我在提供另外一個思考方法給大家！

另外一個思考就是就是使用率，大家的印象當中按上一頁的次數是不是會比按下一頁的次數多？因為我們常常搜尋以為那是我們要的結果，進去之後又發現不是，所以我們就按了上一頁回到搜尋頁面，這樣的經驗想必大家每天都在發生，所以上一頁的使用率就會高於下一頁，自然上一頁這個按鈕的比重就會比下一頁高，而這樣的思考方法不光是適用於按鈕或連結，也適用於文字或區塊的排版上，更重要的是這樣的規則是桌機、平板、手機都適用的！

最後我們來到今天最後一個議題，也就是國外的一些設計案例上，這邊我開頭有說我不會琢磨太多，只會提一些比較我覺得比較特殊的地方，那如果說對這部分的分析很有興趣的朋友，可以翻閱一下我之前寫的網站設計評論專欄，在開始講之前我還是要大概提一下一個網站基礎上會有哪些東西，首先他會有一個head版頭跟footer版尾，再來會有主選單以及內容，右側的子選單可有可不有，這樣就構成了一個很基礎的網站，幾乎所有的網站都免不了會有這些部分，即便視覺設計上非常新穎，你還可以在一個網站上找到這些區塊，ok！現在對一個網站有基本的認知之後，我就要開始來講解今天我挑的三個案例，這三個案例的排序呢我是從最複雜的排到最簡單的，因為我怕我剛剛中間講太多後面沒時間，所以我案例的順序就做了一些調整，就讓我從最複雜的開始講起。（後記：我真的現場這樣講，這是真的，不是做效果！）

第一個案例，我們來看看RWD可以做多細，有些人在做RWD會有一些迷失，比方說一定都要是對稱的區塊才可以做RWD，而且區塊跟區塊的比例跟間距都要有一定百分比才可以做RWD，真的是這樣嗎？還我有今天一直強調建模、強調操作模式，國外的設計師在做RWD設計時真的有考慮到操作模式的不同嗎？

在投影片第十九張你會看到第一個網站截圖，由左至右分別是桌機、平板、手機，你可以很明顯地看到這個網站完全不是對稱的區塊，他甚至有錯位的排版，而這個網站他是有稍微用CSS做一些3D視覺效果出來的，當然現在這個畫面非常的小，所以讓我放大一下這些比較特別的區塊。

你會發現這三個版本除了3D角度不同以外，logo處的設計，以及選單高低，還有區塊的深度距離都不太一樣，這樣的視角其實是設計師根據載具的不同所想像出來的視角，桌機的螢幕通常會跟眼睛呈現水平距離，平板則會像書一樣，你會從上往下看，手機的部分也是差不多的，只是畫面比較小當然這些3D細節也會跟著比較小，說到這邊你也許會想這個設計師真的有用心在設計每個平台上的畫面，也許真的是如此，但是我們來看看手機版的選單，如果各位真的嘗試要去點選單的連結，你會不會按錯？雖然說設計師已經把間距拉開，但是由於上下兩行的距離很靠近，而我本人大拇指真的很粗，所以我試按過，我要非常小心才不會按錯，所以設計師真的有根據不同的平台上的操作模式做設計嗎？以我個人的實驗結果是沒有的，還記得一開始我有說過做RWD網站很容易掉了一顆螺絲就整組壞光光的事情嗎？以這個網站來說就會覺得頓時間失去了光彩，它就只差這麼一點點就很完美了，不由得替它覺得可惜起來了，再來我們看看另外一個地方，就是這個網站的主視覺。

你會發現三個版本的主視覺，上面的橘色箭頭位置都不一樣，再來黑色標題高度、寬度也都不一樣造成視覺上的不對稱設計，白色區塊在平板上也有網內縮的情況，在這邊有個問題要問大家，你們覺得橘色箭頭為什麼要這樣設計？他這樣設計好按嗎？為什麼他又要這樣擺呢？這裡我就把這個問題留給各位去思考，想一下，為什麼會是這樣！（後記：我是有答案的，只是我希望各位可以提供一些看法，討論交流一下，肯定會蹦出很多很棒的想法。）

再來是案例二，減法設計模式，這種設計排版模式很常在RWD網站看到，就如果我之前說的化繁為簡通常是會比化簡為繁還要簡單多一些，再來是RWD網站只要做三個版本for桌機、平板、手機就好了嗎？

這個案例網站就做了四個版本，一開始的兩個都是給桌機使用的，因為我們現在的桌機螢幕越來越大了，所以光做給1024已經不夠了，所以在這部分光桌機就有兩個版本，再來是平板跟手機的部分，所以一共是四個，然後你會發現這四個版本主要的差別在於選單上的設計不同，從一開始在左邊，後來變到上方，接著icon消失，到手機版一整個就是縮成一條線，為什麼？主選單難道不重要嗎？主選單當然非常重要！但是當你的載具變成手機時，主選單就不見得重要了喔！因為這個網站主要是分享跟食物有關的文章，所以當你用手機上這個網站的時候，其實你的重點就會再看文章上，而不是這個網站的選單上囉！所以這樣的設計有沒有錯？是沒有錯的噢！而且站在這個網站的立場上非常是非常適合的喔！

好啦！說了這麼多，如果你還是不知道要做RWD要從哪邊開始著手，我這邊提供最後一個例子！他真的非常的簡單！我前面有說到我這次的案例是從複雜說到簡單，所以這個案例真的非常簡單！

是的！最後這個案例他只有兩個版本，也就是說他的桌機跟平板共用一個版本，所以桌機跟平板是不是可以共用一個版本？當然可以！右邊我有列出這個網站兩個版本上比較特殊的一個地方，那就是他的選單文字從橫書變成直的，但是各位不要忘記，用手機瀏覽我會用大拇指去按選單，這樣的設計真的好按嗎？這就見仁見智了，更何況這個網站本身就是一個類似profile的東西，所以他從頭到尾只有一頁，這樣的網站在手機上瀏覽就非常的適合，因為它就是一直滑來滑去滑來滑去，所以選單好不好用就會變成一個其次的問題了。

以上就是今天要講的三個案例，再來這一頁是案例的網址，各位可以不用抄，真的不需要抄，因為這份投影片我今天回家就會放在本人的部落格提供各位下載，所以各位只要記住最後一張！請上本人的部落格－草監網路，就可以取得這份投影片資料了！以上就是今天的分享。

（後記：其實當天現場臨時舉出來的例子還蠻多的，所以即使我在腦袋裡沙盤推演無數次還是有很多東西在現場才蹦出來，個人覺得現場演講比較精彩，至少會比在這邊看我寫的一堆字還要好玩一點，當然我知道寫這麼多字有很多人都沒耐心看，所以之後我會再找時間錄一個Youtube版，屆時當然還會在加上一點點新東西進去，畢竟我沒辦法好好記住稿子裡面的內容，所以我想，到時候再錄影應該還是會蹦出一些新例子吧！以上就是本次的演講內容，希望大家會喜歡，以下開放留言發問:p）

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