如何重新設計網站以在移動設備上看起來令人難以置信
已發表: 2016-01-24[ Proto .io 是一種移動應用程序原型製作工具，企業家和初創公司使用它來創建外觀和感覺都像真實應用程序的完全交互的逼真原型。]
15 年前，重新設計網站是一項更為直接的工作——您只需決定桌面體驗的外觀，相應地組織內容並構建網站。 令人難以置信的是，一些網站仍然缺乏真正的移動體驗，無論是完全重新設計單獨的網站還是精心策劃的響應式設計。
設計有時感覺像是一場無休止的追趕遊戲，但這些移動應用專家可以幫助指導您重新設計您的網絡體驗，使其在任何設備、桌面或移動設備上看起來都很棒。
如何重新設計網站以獲得漂亮的移動體驗
Handsome (@HandsomeMade) 是一家設計和技術公司，其核心價值觀包括“在各個層面以人為本的思維”和“有目的的漂亮和令人愉悅的軟件”。 創意總監 Brandon Termini 和技術總監 Alex Zub 解釋了他們如何將這些原則應用於移動網站重新設計：
Termini 說，Handsome 網站重新設計的關鍵是採用“移動優先設計方法”，使用戶體驗盡可能優雅和易於使用。 “我們應用移動優先設計的一種方法是從較小的屏幕尺寸開始，這迫使我們盡可能簡化界面，只將真正最重要的內容放在屏幕上。”
Zub 補充說：“利用技術和最佳實踐——例如響應式設計和自適應設計，以及它們兼容的技術實施——是關鍵。 對於許多產品來說，堅持使用響應式網格系統是有意義的，這可以簡化構建它所需的工作，同時在各種屏幕上保持出色的外觀。”
如何重新設計網站以在移動設備上看起來很漂亮
我們請 Termini 分享他的一些視覺設計最佳實踐。 “這些年來，我們編制了數百個注意事項，”他說。 以下是他在英俊實施的三大最佳實踐：
- 仔細考慮您的佈局層次結構。 “成功的佈局意味著用戶應該能夠按照您想要的順序引導您完成他們看到/閱讀的內容。 善用留白、色彩理論、排版等都在其中發揮著關鍵作用。”
- 適當地使用顏色。 “選擇適合您品牌的顏色，並確保它們協調一致。 使用與重要的 UI 元素（例如號召性用語按鈕）相關聯的英雄顏色。 確保你在正確的地方謹慎地使用顏色，讓你的用戶通過界面而不被卡住。”
- 排版應該在眼睛上很容易。 “確保你的字體適合品牌並且在你設計的設備上清晰易讀，並謹慎使用裝飾性字體。”
測試您的移動網站重新設計
當然，一旦您構建了移動網站，您就必須通過它的步伐來確保出色的用戶體驗。 Termini 說，“經常測試和調整是至關重要的。 向潛在用戶展示第一張手繪草圖後立即開始測試，並在整個過程中持續進行測試，直至完全構建設計的系統。 能夠聽到、綜合和迭代反饋對於任何產品的成功都非常重要。”
為你推薦：
反暴利條款對印度初創企業意味著什麼？
教育科技初創公司如何幫助印度的勞動力提高技能並為未來做好準備……
本週新時代科技股：Zomato 的麻煩仍在繼續，EaseMyTrip 發布強...
印度初創公司走捷徑尋求資金
數字營銷平台 Logicserve 獲得 80 盧比的資金，更名為 LS Dig...
報告警告對 Lendingtech Space 重新進行監管審查
Zub 補充說：“質量保證是構建用於不同類型設備的產品的重要組成部分。 由於幾乎不可能在辦公室擁有所有可能的設備，因此我們利用在線服務提供對雲中數十個“虛擬”設備的訪問，並儘可能實現自動化。 通過適當的自動化投資，可以輕鬆快速地執行跨設備測試。”
我們想了解更多關於如何測試和 QA 移動網站重新設計的信息。 為此，我們聽取了眾包測試 (@crowdsourcingqa) 首席執行官 Simon Papineau 的意見。 Papineau 創建眾包測試是為了解決他在測試大量移動應用程序、網站、遊戲等時遇到的一些痛點。
在桌面上工作的東西並不總是在移動設備上工作——反之亦然
Papineau 說：“開發人員往往會忘記的一件事是，您不需要在移動網站上顯示與桌面網站上相同的深度或相同的內容。 移動用戶的意圖、心態和目標是完全不同的。 訪客不會花 20 分鐘在手機上閱讀貴公司的歷史和精美印刷品。
相反，盡可能直接、盡快地給他們想要的東西。 如果是您的聯繫信息，請直接放在主頁上，不要有任何多餘的內容。”
Papineau 說，挑戰之一是確保您的移動網站重新設計看起來不錯，並且在多種設備上運行良好：“測試網站是否響應可能非常耗時且成本高昂。 公司可以做的最好的事情是關注代表其大部分訪問的前 15-20 台設備。 總會有一個網站看起來不完美的移動設備。 但如果該設備代表 0.05% 的訪問者，則可能不值得額外的開發工作。”
如何使用響應式設計重新設計網站
Bob Bentz 是 ATS Mobile (@atsMobile) 的總裁，該公司是一家提供全方位服務的移動營銷機構，負責為多個行業的客戶監督網站重新設計。 Bentz 熱衷於確保網站體驗在移動設備上的外觀和感覺與在高分辨率桌面顯示器上一樣好，而 ATS Mobile 為其客戶實現這一目標的主要方式之一是使用響應式設計。
為什麼選擇響應式設計？ 底漆
“響應式網頁設計 (RWD)，最常使用 HTML5 設計，將成為幾乎所有新的移動網頁構建的可能選擇，”本茨說。 “它也可以使用 CSS3 和 Javascript 進行設計。 響應式設計具有高度靈活的顯著優勢，因為它可以流暢地更改以適應任何設備。 RWD 的工作原理是發送相同的代碼，無論設備如何，然後在客戶端重新排列它，從而允許在任何設備上顯示相同的網頁。”
要查看響應式設計的實際效果，請在桌面屏幕上拉出這篇博文，如果您還沒有這樣做（我們會等著看！）。 您會注意到，用戶界面有多種窗口大小會“中斷”並自行重新排列，因此頁面看起來會根據您使用的設備（以及該設備內的窗口大小）而有所不同。
那麼，響應式設計究竟是如何工作的——為什麼你應該將它用於你的網站重新設計？ “重新設計的響應式網站在相同的 URL 上提供相同的 HTML 代碼，無論用戶的設備是台式機、平板電腦、平板手機、智能手機、功能手機還是可穿戴設備（例如 Apple Watch），”Bentz 說。 “它還可以根據網站的屏幕大小做出不同的響應。 開發人員可以決定哪些圖形和內容將用於移動和平板電腦用戶。 文本和圖像可以根據任何瀏覽器或屏幕尺寸進行調整。”
通過響應式設計，您可以確保每次移動設備現狀發生變化時都不會進行新的更新。 “當新設備上市並訪問您的網站時，如果該網站是建立在響應式設計之上的，則不需要額外的編程，”Bentz 說。 “然而，最重要的是，響應式設計是 Google 推薦的最佳設計實踐。 對於許多網站來說，RWD 在移動友好性和易於實施之間取得了合理的平衡。”
響應式視覺設計最佳實踐
根據 Bentz 的說法，考慮到以下最佳實踐將有助於使您的響應式網站重新設計看起來並以最佳狀態運行：
- 一個簡單而引人注目的標題。 “標題和標頭應該簡單，以免偏離關鍵賣點。 標誌是關鍵的品牌形象； 一個過度水平的標誌在較小的垂直屏幕上可能看起來不太好。”
- 易於使用的導航。 “在小屏幕上導航要復雜得多。 通常，設計師會使用由三條水平線顯示的導航按鈕，通常位於網站的右上角。 這被稱為“漢堡菜單”，因為它看起來像一個被麵包包圍的漢堡。 一些網站使用左側導航，可以向外擴展以覆蓋大部分屏幕。”
- 大量的圖像。 “在移動屏幕上很難包含太多圖像，但文字會很快淹沒 UI。 因此，設計師經常使用圖像輪播，讓用戶可以滑動瀏覽多個產品圖像，而不是用文案來擠滿屏幕。”
- 智能使用頁腳。 “消費者習慣使用頁腳作為導航工具，它不會像折疊頁眉那樣佔用如此寶貴的空間。 它還應該包括非常重要的“聯繫我們”鏈接。”
華麗的網站重新設計始於華麗的原型
學習如何為移動設備重新設計網站絕非易事，但擁有強大的快速原型製作工具來幫助您測試體驗會帶來最大的不同。 在修剪副本、減少元素並確定導航方案之後，您可以快速從用戶那裡獲得關於您的移動網站重新設計是否仍然可用和直觀的反饋。 然後，正如 Termini 建議的那樣，不斷迭代，直到您擁有真正引以為豪的原型。