[譯] 你的站點如你所想的移動友好嗎？

原文地址：Is your site as mobile friendly as you think?

原文作者：Paul Boag

譯文出自：掘金翻譯計劃

本文永久鏈接：github.com/xitu/gold-m…

譯者：Lai

校對者：Tobias Lee starlee

你的站點如你所想的移動友好嗎？

我們通常認為響應式的網站會讓我們的站點移動友好，但是情況並非如此。仍然有很多方式會搞砸用戶體驗，並降低我們在搜索結果中的排名。

你想得到更多的工作機會嗎？更多重複的業務？更多來自客戶的尊重？更多的收入？加入我們即將到來的研討會吧。

audio.simplecast.com/77569.mp3

收聽這篇文章，並在 iTunes、谷歌音樂 App、RSS 上訂閱關注我們 | 下載音頻

這篇文章由 交互設計基礎 贊助。

我們都知道一個網站 移動 友好的重要性，我們中的大多數人採用 響應式設計 作為解決方案。毫無疑問，響應式 設計 已經改變了移動網路。一般來說，它提高了 用戶體驗、使網站更易管理、並避免維護多個版本的需要。

最近當我瀏覽 交互設計基礎 的課程時，我思考了一些東西。我看到一個 關於移動用戶體驗設計的課程，我意識到，儘管響應式網站很好，但它絕不是一顆銀彈。

參見：你從未聽說過的最重要的 UX 教育來源

通常，響應式設計可能被實現地很糟糕。不幸的是，這也會讓我們陷入一種虛假的安全感中。僅僅因為我們採用了響應式設計，我們就認為我們已經「解決了移動性問題」。但事實並非如此。

讓我給你舉一些例子，說明哪裡可能出問題。從最大的問題開始，那就是半吊子的響應式網站。

你的全部站點具有響應性嗎？

當你從零開始重新設計網站時，以一種響應式的方式來構建是完全有意義的。但是用這種方式對現有網站（特別是大型網站）進行響應式改造時，可能會是一場噩夢。

響應式網站設計會讓我們陷入一種虛假的安全感。我們認為我們已經解決了移動問題。

戳這裡推特一下

這是我很多客戶所面臨的問題。大多數他們的網站都至少有上萬頁，用幾年時間構建而成。使其移動友好是極具挑戰性的。

為了減少所涉及的工作，他們做了一個決定。他們決定專註於使核心頁面移動友好且具有響應性，而忽略其他頁面。

儘管我能夠理解他們的決定，但從用戶體驗的角度而言這是很糟糕的。沒什麼比錯誤地以為自己正在瀏覽一個移動友好的網站，但發現自己只是陷於一個不能閱讀和瀏覽的桌面優化網頁更令人沮喪的了。

這些組織應該仔細考慮他們是否需要這樣大型的網站。就我個人經驗而言，他們很少這樣做，只是盲目地將內容從一個版本遷移到下一個版本。

另請參見：為什麼對瘋狂地內容遷移說不

你是否砍掉了功能？

當遇到一些棘手的功能時，設計師面臨著類似的問題。為了做到移動友好，有些東西太複雜了。我們沒有加倍努力、找到一個創造性的解決方案，而是選擇了一條阻力最小的道路。我們說服自己，移動用戶不需要這些功能，只需從網站上去掉這些即可。

當然，這無疑是天真的。移動用戶並沒有什麼神奇的差異。他們也是那些在桌面上使用你站點的用戶，只是剛剛換了設備。見鬼，我甚至看見他們坐在離筆記本電腦觸手可及的地方使用手機！我們不能僅僅基於設備就對他們的需求做出假設。

你是否支持觸摸手勢？

但是移動友好的錯誤並不全在於去掉功能。無法添加一些功能可能同樣危險。比如，對觸摸手勢的支持。用戶在移動網站無法滑動和縮放時，難怪他們往往會更喜歡移動應用。

這麼多的手勢，我們都不支持。

作為網站設計師，我們真的應該允許用戶滑動輪播圖和縮放圖片。這種功能需求通常會被忽視，因為我們是如此專註於為不同的斷點調整設計。

你的內容適用於你的設計嗎？

要做到移動友好並不僅僅是改變設計，也需要改變內容本身。以表單為例，我們在擁有更大屏幕的設備（桌面）上用表單來呈現數據，並不意味著我們也要在移動設備上這樣做。我們可能會得出這樣的結論：顯示一個互動式圖表或某種形式的計算器更具有移動友好性。

我們需要調整內容而不僅僅是設計，將表單和圖表變成更具移動友好的形式。

下面說說信息圖表。他們在大屏幕看起來很棒，但是在移動設備上變得難以辨認。當然我們也可以讓用戶自己去縮放查看，並號稱我們該做的都做完了，或者我們可以重新進行設計。也許我們應該將信息圖表分解成一個情節串聯板（storyboard）或者用視頻來代替。

你的移動站點是否具有可讀性？

可讀性的問題並不僅僅局限於圖像和表格，文本內容也有同樣的問題。僅僅增加一個斷點來重新定位元素並不能創造移動友好性並提高可讀性體驗。它經常大大縮短本文行的長度導致閱讀變得痛苦。

設計師們在這方面做了一些努力，包括使字體大小相較於斷點自動進行縮小。但是我在移動設備上訪問過的很多站點的字體仍然會變的很小，以致難以辨識。

最後，還有顏色的問題。設計師通常未能考慮到移動用戶總是與屏幕眩光作鬥爭，所以會設計微妙的顏色色調。毫不誇張地說，這會導致很差的移動閱讀體驗。

Doctors Without Borders 只是許多難以做到可讀性的移動站點之一。時常存在單行長度過短、顏色對比糟糕和文本過小的問題。

你是否過於關注最新最好的智能手機？

當然，即使我們在移動設備上，這些可讀性問題還是看不出來。這是因為我們擁有最新最強大的智能手機。它有一個 retina 屏幕，亮度的耀眼程度連太陽也無法與之匹敵！但是不是每個人都有這樣的設備。即使你忽略功能型手機，體驗也會有巨大的差異。

我們需要停止使用腦海中的具體設備進行設計。

推特一下這個

當然，肯定會有斷點的存在。我仍然看到設計師們根據設備設置斷點，而不是根據內容的適當位置。他們設計了適配 iPad 的尺寸、適配 iPhone 的尺寸等等。但是實際上，設備尺寸是非常多的，我們應該停止考慮特定的設備。

你的性能移動友好嗎？

我們應該考慮性能問題。事實上，這可能是響應式設計讓我們失望的唯一的、最大的領域。可千萬別誤會，我並不是說響應式設計讓我們的站點變慢了。只是因為我們並沒有做些什麼來改善它，而這正是移動設備所需要的。

圖像大小無疑是罪魁禍首。使用媒體查詢可能會在視覺上縮小圖片的比例，但是對減少圖片大小和載入時間是沒有幫助的。在使用蜂窩網路時，這是很不好的。添加字體、庫、框架以及所有的其他元素，都會使今天的網站膨脹，導致載入時間過長。

在移動設備上測試站點的性能會令人沮喪！

但是這不僅僅是下載大小和蜂窩網路速度的問題。性能也是影響設備的一個問題。很多移動設備缺乏像筆記本電腦、台式電腦或平板電腦一樣的處理能力。結果是，它們很難處理一些建立在許多現代網站的更密集的 Javascript。

填寫數據會移動友好嗎？

接下來，我們來看看在移動設備上輸入數據時，我遇到的一個特殊的 bug。也許是因為我老了，不能以每小時一百萬英里的速度在這些小型虛擬鍵盤上打字，但是在移動設備上輸入數據體驗確實很糟糕。

作為網頁設計師，我們似乎讓網站的問題惡化了一百倍。當輸入數值數據時，無法顯示數值鍵盤。當輸入密碼時，我們會隱藏用戶正在輸入的內容，儘管事實上在移動設備上輸入錯誤是常有的事兒。其實，我們就根本不應該指望移動用戶填寫密碼。還有其他方法，比如文本通知、電子郵件鏈接或者 Touch ID。

Slack 在避免用戶輸入密碼方面做得很好。

有很多種情況下可以避免或簡化數據輸入。在會話之間記住用戶的登錄用戶名是一個好的開始。但是我們應該改進表單的設計，避免繁瑣的表單元素，比如日期選擇或冗長的下拉菜單。

鏈接之間是否太過緊密？

談到複雜的交互，我驚訝地發現設計師似乎很少考慮使用觸摸屏所帶來的挑戰。我發現很多網站聲稱移動友好，但是與之交互時卻發現並非如此。為最大化屏幕使用率，鏈接和按鈕往往排列的非常緊密，以至於變得不能被點擊。

再者，僅僅重新定位內容是不夠的。我們需要確保元素周圍的空間擴大，以避免由於使用手指而導致的精確度不足。誠然，空間是非常寶貴的，但是如果我們明智地利用空間，鏈接就沒有理由不易被選擇。只要看看大多數的移動應用程序就懂了。

另見：移動 UX 設計

用戶必須忍受位置固定的內容嗎？

談到空間的缺乏的問題，為什麼儘管所有的設計師都希望創建一個移動友好的站點，但是我們認為在頁面上添加固定位置的內容是可接受的。這顯著減少了其他內容元素的可用空間。

將位置固定的導航轉移到你站點的移動視圖之前，請仔細考慮。同樣，消除那些覆蓋頁面和對話窗口，以及那些固定位置的社交媒體圖標時也需仔細考慮。它們在移動站點上沒有位置。

由於固定位置的元素數量，Mashable 上的內容幾乎不能在移動設備上閱讀。

我是一個可怕的偽君子

如果你在移動設備上瀏覽這個網站，你可能會想我現在是多麼虛偽。我使用位置固定的導航、在某些地方鏈接過於緊密並且陷入我之前概述的其他錯誤中。

我的理由與你一樣，缺乏時間和金錢。對我來說讓網站響應並認為它移動友好是更容易的。但是自從我設計了這個站點，隨著手機變得越來越重要，世界發生了變化。

Google 和其他搜索引擎都開始懲罰在搜索結果中未能提供良好移動友好體驗的網站。在移動設備上瀏覽站點的用戶數量正在猛漲。一個簡單的響應式網站將不再夠用。如果我們想要提供一個良好的體驗或者在搜索引擎中有一個較好的排名，就更加遠遠不夠了。

我們將不得不調整我們的優先順序，以便創造一個移動友好的體驗。這與一個偉大的桌面體驗同樣重要（甚至更加重要）。

註冊移動用戶體驗設計課程

移動使用量早在 2014 年就超過了台式機。從那時起，設備間的差距就只增不減，隨著手機使用量的增加，台式機的用戶流失增加了一倍。移動流量的這種增長，使移動用戶體驗成為一個產品或者網站成功的最重要的原因之一。這意味著，如果想跟上時代，設計師、營銷人員和開發人員所涉及的技能絕對是非常重要的。這個課程將教會你如何做 — 設計優秀的移動用戶界面，著眼於移動可用性最佳實踐。

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

推薦閱讀：