響應式設計中的常見危機以及如何解決它們

已發表: 2015-12-29

圖 1

沒有任何東西設置在堅實的基礎和像水一樣靈活的佈局元素，它甚至不是傳統意義上的“設計”。 響應式設計正在（並適應）市場上的設備流。 每個人都在嘗試，成為一名網頁設計師從未如此棒過。

響應式設計有很多實踐，很難看到一組並稱它們為最好的。 我們不能有一個“做什麼”清單。 然而，我們可以從彼此的錯誤中吸取教訓。

所以這就是我學到的響應式網絡設計：

為您的觀眾設計。 不是你自己。

圖 2
假設您正試圖通過一個超快速、設計精美的網站和為這些移動用戶提供的出色用戶體驗來吸引大部分印度觀眾。 那裡有12億人； 它應該是一個瞬間的，巨大的打擊。 數字本身對你有利。 或者如果你知道那裡只有 13% 的人擁有智能手機，他們就會是。 （來源：谷歌移動星球）。

這只是學習和理解您的受眾至關重要的原因之一。

文化多樣性、年齡、性別、職業、語言、流行設備等可能是影響您的品牌/網站成敗的非常重要的因素。
這比聽起來容易。

眾所周知，設計師會忘記他們為誰設計。

因此，如果您手頭沒有 UX 架構師，您最好自己研究一下。 它最終會反映在你的工作上，所以不要聳聳肩說這不是你的強項。

對於特定於移動設備的號碼，請使用 Google 的 Mobile Planet。 向您的客戶詢問他們的觀眾。

如果您能設身處地為觀眾著想，您將能夠創建直觀的用戶友好型設計。 這不是火箭科學，只是基本的人類心理。

“線框”需要一個故事

如果沒有交互，您的響應式設計項目將是不完整的。 這同樣適用於您的模型。

你的設計（很可能）不會是一頁紙的演出，內容出現而沒有其他任何事情發生。

沒有交互，沒有狀態，沒有動畫或效果：基本上所有可以使您的網站成功（或失敗，如果不加思索地使用）的東西都被剝離了。 雖然 Style Tiles 是經典之作（正如其創始人所說，“圍繞設計展開對話”），但在當今的設計術語中，它太簡單了，無法達到復雜的程度。

花一些時間來創建您的想法的交互式原型。 在開始前端開發之前，在這些方面進行廣泛的合作。

不要只是到處亂想。 你聽說過講故事嗎？

只用您的原型和直覺向您的客戶講述一個響應迅速的互動故事。

使用 Balsamiq、Axure、UXPin 等工具來創建這些“故事”的可視化版本。 用文字激發他們的想像力； 用精心製作的原型餵養牠。
它將有助於簡化您以後的設計和開發工作，並為您提供一些明確的軌道來堅持。 作為獎勵：第一印象仍然很重要。 一個好的原型表明你對這個項目充滿熱情。

內容：一是看得見、適應性強。 總是

您做出響應的原因是通過統一訪問和設備無關，您的消息具有更廣泛的影響力。

您必須隱藏您的內容，從而破壞了響應式設計的全部目的。

無論如何，您的移動受眾都會下載數據，那麼隱藏它有什麼意義呢？ 創建內容元素清單。 確定哪些元素出現在所有頁面上，哪些元素出現在特定頁面上。 例如，您的 CTA 按鈕可以在每個頁面上，也可以在特定頁面上（如登錄頁面、相關資源頁面等）。

您從首先放置內容元素開始，然後從那裡開始構建。 鐘聲和口哨聲在最後。

首先：了解用戶目標以及他們希望從網站獲得什麼，然後調整您的內容以便在他們的設備上輕鬆訪問。

與其僅僅擠壓一百萬字的文章以適應移動頁面，不如讓您的用戶有機會細讀信息，而無需無休止地滾動。 前端或服務器端腳本不是（實際）答案。

做到這一點的一個好方法是使用簡短而準確的摘要進行預覽。

讓用戶決定是否要滾動瀏覽您的其餘內容。 TL; DR 在每個人中都很常見（甚至是媒體組織，這就是為什麼我們在沒有實際事實檢查的情況下發布故事，並且僅基於炒作）。 因此，在您的內容末尾添加一個部分並使其更容易。

第二：務必向用戶提供完整的信息，而不是只提供零碎的信息。

使用響應式列和字體。 對流體數據表使用 Zurb 響應表。 壓縮媒體（使用 CDN 和緩存來提高性能）。
內容就是你的信息。 無論設備大小如何，都要確保它清晰可見。

獎勵：內容優先讓您牢記內容層次結構，這使得設計導航的過程更加順暢。

尊重設備限制和功能

圖 3
當我們談論“移動優先”或“漸進式增強”時，我們是否真正理解並適應最低限度的要求？ 以下是“最低限度”應該是什麼的概要：

  • 可用屏幕寬度：最小 120 像素。
  • 標記語言支持： XHTML Basic 1.1 交付內容類型為 application/xhtml + xml。
  • 字符編碼： UTF-8
  • 圖像格式支持： JPEG、GIF 89a。
  • 顏色：最少 256 種顏色。
  • 樣式表支持： CSS 級別 1、CSS 級別 2 @media 規則以及手持設備和所有媒體類型
  • HTTP： HTTP/1.0 或更新的 HTTP1.1
  • 腳本：不支持客戶端腳本。

基於這些規範，創建功能設計並不難。 問題是擴大規模。
考慮設備尺寸是件好事，但這只是開始，而不是全部。 縮小和規範化腳本（性能和體驗），設計乾淨的界面並註意足夠的空白（用於竊聽），尊重設備的連接性和負載限制（性能），並且始終嚴格測試在這裡很重要。

請減輕負擔

圖 4
我不想在這個問題上喋喋不休（我們對此主題有很多意見），但不可否認頁面速度對於更高排名和更好的用戶體驗的重要性。

簡單地說：如果您的頁面加載緩慢，沒有人會費心等待它趕上。

像移動優先這樣的方法實際上對此非常有效。 在漸進增強中，我們從最簡單的一切開始：UI 元素、功能以及我們正在為所有設備的最窄帶寬而設計的事實。 那些仍然譴責移動優先方法的優點的人會同意，這確實將性能和速度置於其他一切之上。

此外，無需提醒您，您必須檢查媒體的大小。

因此，請使用 CDN（適用於中高流量網站）和專門減輕頁面負載的後端開發技術。 使用緩存。 通過在保存 JPG 圖像以供 Web 之前選中相關框來提高感知性能（網站對用戶的“感覺”有多快）。

保持您的設計精益求精（最不重要的是您的所有客戶和用戶）。

TL; 博士

因此，這是我為一個響應式 Web 設計所學到的：

  • 為觀眾設計。 稍微研究一下並使用 Google Mobile Planet（和其他類似工具）來獲取數字。
  • 線框可以通過故事變得栩栩如生。 “原型”是指設備/系統的初步版本。 讓它成為真正有效的東西。 使用交互式原型製作工具。
  • 使內容可見並具有適應性。 無論如何都不要在手機上隱藏內容，因為它會被下載。 如果有一篇原創文章，請添加更適合在手機上閱讀的簡短相關摘要。
  • 尊重設備限制和功能。 除了鼠標/手指點擊辯論或尺寸之外，針對目標受眾使用的最低設備規格進行設計。
  • 注意性能。 不僅是為了更好的搜索排名，也是為了體驗。

作者簡介： Lucy Barret 與 HireWPGeeks Ltd 有關聯。她提供 HTML 到 WordPress 的轉換服務，並且她有一個專家開發團隊來幫助她。 她也是一位熱情的博主，喜歡與大型 WordPress 社區分享她的知識。 在 Facebook 和 Google+ 等社交媒體網絡上關注她的公司。