雖然智慧手機及平板出現的時間還不到10年，卻只用了很短的時間就趕上了桌機瀏覽量。並且，根據Google 發佈的訊息，已經有超過10個國家在移動裝置的搜尋量超過電腦(包含美國、日本)。
從去年至今，可以觀察到Google越來越頻繁的發佈調整搜尋演算法及搜尋排名(Rank)計算方式的相關訊息，讓搜尋引擎偏好於有針對Mobile Friendly進行設計的網站，也因為這樣大幅度的調整，讓很多名列前茅的網站名次瞬間滑落，而這種Google懲處仍頑固不化的作法，通常都被稱為"Mobilegaddon"。
因此，如果你是Designer或RD，都應該將這些因素納入考量，也就是說，網站除了要做得好看之外，同時也要考慮為客戶未來的發展及便利性，讓Mobile Friendly成為設計或開發的基本作法。
(圖片來源 Google)
在這裡提出12項原則，來幫助你檢視網站是否符合Mobile Friendly:
1. 網站在不同設備中，是否都能具備良好體驗
移動設備包含的尺寸範圍相當廣，從智慧手機、平板到桌機，這些不同螢幕的檢視方式，可以直接使用瀏覽器的開發者工具模擬螢幕及裝置，或者也可以考慮透過這幾個工具進行測試: DesignModo、ZooExtension、StudioPress。
2. 用戶是否能輕鬆的完成常見任務
移動裝置和桌上型電腦最直接的差異點就在於: 移動裝置的螢幕較小。
因此，在設計網站內容時，如果模擬鍵盤、按鈕或文字框太小，就會讓操作者感覺很難用。
所以，為了提升使用者體驗，你必須考慮在移動裝置上的互動性，在字體、尺寸、位置的安排都要能達到清晰可辨識，讓使用者能用最少的點擊，就能完成工作任務。
3. 行動裝置是否突顯出 Call to Action
通常，經營網站最主要的目的就是提高使用者及增加收入，因此就必須要清楚的呈現出網站上的 Call to Action (CTAs)。設計CTAs功能時，假設一般電腦都會放在右上角，在移動裝置就可能要考慮重新排放在更好的位置。
原則同樣是，仔細再仔細的檢查CTA在移動裝置上的位置，佈局及外觀。
4.導航選單，是否存在複雜交錯的層級
一直到最近，仍可以發現許多網站的導航選單有三到四層級，當然，在電腦上或許是正常不過的事，但是在移動裝置上若延用這種會突然引發熱膨脹效果，一次突然爆出大量項目的作法，將會是一場災難。
簡單來說，千萬不要去考驗用戶的耐心。
把你的導航選單整理乾淨，不但會獲得用戶喜好，更可以增加簡潔及優雅感官，讓平台更加親切。
5.能否輕鬆的回到首頁
當使用者經由水平深入到不同頁面層次，並且達到最底層的文章或產品頁面後，就要去思考怎麼才能讓他很直覺得回到首頁。
舉例來說，在Google研究使用者體驗報告中，參予者如果點擊網站的標誌卻無任何反應時，就會讓他們體驗度下降，進而降低網站評價及喜好程度。
當然，身為設計者你可以對返回首頁的流程提出看法，認為同樣的功能分別放在兩個地方是多餘的。必須簡化，只要用戶點開網站目錄選單就能找到回首頁按鈕。
但是，在這裡仍然建議，多一個按鈕，如果能減少更多操作及困擾，那何樂而不為呢?
6.網站是否擁有良好的搜尋功能
移動使用者很常透過智慧搜尋功能尋找他們要的東西，因此在規劃網站時，搜尋功能自動校正及自動完成的功能、過濾功能、快速分類選單，都是能幫助使用者更容易找到相關產品，這些功能對於電子商務網站而言，就必須更加關注。
7.表單是否有搭配適合的虛擬輸入功能
你可以適當的在表單上設計一些自動完成或者適合的輸入功能，讓你的表單能以最簡單的方式完成，並且能保留重要的資料內容。
例如，在日期欄位可以彈出日曆選單、而不是讓他們點選框格輸入 DD/ MM / YYYY格式。
8. 除了產品圖片、讓其他圖片無縮放功能
在之前某一段時間，很流行圖片縮放功能。但是對今天的移動用戶而言，一般圖片縮放功能反而會是一種困擾，例如在瀏覽一篇文章或一則訊息時，使用者應該不會特別去縮放網站的內容。
但是在產品單元，就必須要考慮使用者可能會想看產品的放大圖，因此就要考慮在這些地方放置縮放圖片功能，並且要記得使用足夠畫素的圖片。
9. 是否能讓Google蜘蛛輕鬆抓取資料
Google已經證實了，他們在移動裝置上有三種不同的配置:
- 響應式設計適應不同螢幕寬度
- 使用動態內容，跟據UerAgentString來辨識設備，跟據類型來發送不同內容
- 對不同的裝置類型配置不同的URL
你可以藉由這些方法來提升跨裝置體驗，但是，如果Googlebot無法抓取你的網站，再多的策略都會失效。因此，千萬一定要確保Google蜘蛛能順利的進入到你的網站，讓它能正確收入你的內容，包含CSS、javascript及圖片。
- 響應式設計適應不同螢幕寬度
- 使用動態內容，跟據UerAgentString來辨識設備，跟據類型來發送不同內容
- 對不同的裝置類型配置不同的URL
你可以藉由這些方法來提升跨裝置體驗，但是，如果Googlebot無法抓取你的網站，再多的策略都會失效。因此，千萬一定要確保Google蜘蛛能順利的進入到你的網站，讓它能正確收入你的內容，包含CSS、javascript及圖片。
10. 所有內容是否都能在移動裝置呈現
某些內容可能再移動裝置上無法出現，由其是視頻，可能在移動裝置上會無法撥放。 例如，現在仍有採用flash技術的影片播放器或者遊戲，甚至是整個網站。要避免這種情況出現，必須確實在移動裝置上測試你的內容，並且堅持使用HTML5技術。
11.跨裝置檢查連結及重新導向
假設你的移動裝置與桌機擁有各自的URL，如果使用者透過一個電腦版的連結訪問網站時，網站重新導向必須要能引導到手機板對應的頁面，而不是讓他回到首頁。並且要確保這些連結不會失誤。
假設如果有偶發可能會引導到不存在的頁面或修復中的情況，則要準備完整的404或整修中頁面，避免使用者無法適應突然的意外狀況。
12 如何處理敏感的隱私內容及流程
很多手機用戶並不熟悉完整的正確流程，因此，如果再移動裝置上要使用到隱私或敏感的資料，例如信用卡或個資，為了減少使用者疑慮，你可以考慮提供"點擊通話"服務，讓用戶能容易完成交易。或者可以交互到不同設備上。例如，用互瀏覽求職網站過程中，可以用email寄送推薦的職務列表，讓使用者可以在有彈性的時間或裝置上進行選擇。
參考: Richa Jain How Mobile Friendly Is Your Design? 12 Tips to Follow
出處:http://adon988.logdown.com/posts/278552-mobile-friendly-design-in-your-design-12-tips
張貼留言