響應(yīng)式設(shè)計(jì)失敗了移動(dòng)用戶體驗(yàn)

僅確保您的網(wǎng)絡(luò)內(nèi)容適合放在小屏幕上已經(jīng)遠(yuǎn)遠(yuǎn)不夠。Google通過更新算法來強(qiáng)調(diào)這一先例，以強(qiáng)調(diào)在手機(jī)上精心計(jì)劃和執(zhí)行良好的響應(yīng)式設(shè)計(jì)的重要性。

這是有道理的：您的查看器不需要移動(dòng)設(shè)備上臺(tái)式機(jī)的所有功能。實(shí)際上，他們可能希望在較小的屏幕上刪除一些內(nèi)容和功能。畢竟，沒有人愿意為了找到您公司的電話號(hào)碼而對(duì)內(nèi)容頁(yè)面進(jìn)行排序。這是許多公司的Web設(shè)計(jì)基礎(chǔ)所缺少的構(gòu)建塊：真正的適應(yīng)性。

僅僅將您的網(wǎng)站添加到適合移動(dòng)設(shè)備的版本中是不夠的。您需要仔細(xì)查看完整的用戶體驗(yàn)，以及如何更改它以適應(yīng)正在查看它的不同環(huán)境。

響應(yīng)式設(shè)計(jì)的問題

57％的移動(dòng)設(shè)備用戶不會(huì)推薦移動(dòng)網(wǎng)站設(shè)計(jì)不佳的企業(yè)，而 48％的用戶則認(rèn)為移動(dòng)網(wǎng)站無法正常運(yùn)行的企業(yè)看上去不太在意。

大多數(shù)公司在其響應(yīng)式網(wǎng)站中遇到幾個(gè)問題領(lǐng)域：

圖片放置

過去的設(shè)計(jì)過程已經(jīng)規(guī)定，客戶端在開發(fā)階段之前會(huì)批準(zhǔn)靜態(tài)圖像和屏幕截圖。如今，設(shè)計(jì)更多地專注于針對(duì)不同設(shè)備尺寸的元素重新排列，而不再關(guān)注靜態(tài)圖像的放置。

屏幕擠壓

在小屏幕上顯示數(shù)據(jù)通常會(huì)使查看或閱讀內(nèi)容（尤其是信息表）變得困難。實(shí)際上，W3C鼓勵(lì)品牌商選擇除表格和標(biāo)簽之外的其他方法來展示數(shù)據(jù)；復(fù)雜的用戶界面僅包含太多信息，移動(dòng)設(shè)備無法處理。

視角轉(zhuǎn)變

最重要的是，響應(yīng)式設(shè)計(jì)的問題只是客戶觀點(diǎn)與公司觀點(diǎn)的問題。不幸的是，大多數(shù)企業(yè)傾向于問自己要告訴客戶什么，而不是問客戶如何查看該信息并與之交互。

例如，雖然注冊(cè)工作流通常是Web設(shè)計(jì)中最重要的方面，但它們通常優(yōu)先級(jí)較低。這是因?yàn)槠髽I(yè)要比客戶想要的邏輯入口點(diǎn)和主要工作流程更多地考慮希望客戶看到的功能。

簡(jiǎn)而言之，響應(yīng)式設(shè)計(jì)并不是向用戶提供網(wǎng)站所需內(nèi)容的最終解決方案。它仍然有很多不足之處。

更新響應(yīng)式還是升級(jí)為自適應(yīng)式？

在網(wǎng)頁(yè)設(shè)計(jì)方面，關(guān)鍵的對(duì)話品牌需要?dú)w結(jié)為響應(yīng)式網(wǎng)站與自適應(yīng)網(wǎng)站的概念。

自適應(yīng)方法采用當(dāng)前站點(diǎn)并將其適應(yīng)不同的屏幕尺寸，而自適應(yīng)方法實(shí)際上根據(jù)屏幕尺寸更改內(nèi)容及其功能。

我通常會(huì)提倡更多的自適應(yīng)Web設(shè)計(jì)方法，而不是簡(jiǎn)單地堆疊內(nèi)容，這是一個(gè)重要原因：響應(yīng)式Web設(shè)計(jì)假定您的內(nèi)容和功能在所有設(shè)備上都應(yīng)該相同-但這不一定是正確的。關(guān)鍵是使內(nèi)容的性質(zhì)與用例和用戶查看您的網(wǎng)站的上下文相匹配。

例如，假設(shè)您正在為包裝消費(fèi)品或消費(fèi)禮品行業(yè)中的品牌設(shè)計(jì)一個(gè)響應(yīng)網(wǎng)站。這些類型的網(wǎng)站的促銷和優(yōu)惠頁(yè)面通常會(huì)獲得最多的在線訪問量。人們很少關(guān)注產(chǎn)品的詳細(xì)信息，但是當(dāng)他們這樣做時(shí)，突出顯示這些詳細(xì)信息的一種好方法是展示它們與其他產(chǎn)品的比較方式。考慮到這一點(diǎn)，您應(yīng)該在產(chǎn)品頁(yè)面上放置產(chǎn)品可視化和教育內(nèi)容，以便可以幫助消費(fèi)者了解如何使用和使用您的產(chǎn)品。

對(duì)于包裝消費(fèi)品行業(yè)，您想了解您的客戶并確定他們是在售前，售中還是售后。您需要根據(jù)客戶在購(gòu)買路徑上的位置來創(chuàng)建不同的體驗(yàn)。

以下是各條路徑的簡(jiǎn)要說明：

1. 售前商店：售前商店的人可能會(huì)通過社交媒體或廣告進(jìn)入該網(wǎng)站，他們可能會(huì)在尋找優(yōu)惠券，要約或食譜（就食品而言）。
2. 店內(nèi)：一旦進(jìn)入店內(nèi)，他們可能正在尋找優(yōu)惠券，評(píng)論或與其他賣家的價(jià)格比較。
3. 店后：當(dāng)他們?cè)诘旰髸r(shí)，他們可能正在尋找品牌內(nèi)容。

了解客戶在購(gòu)買途徑中的位置，可以使您以滿足這些需求以及更多需求的方式來設(shè)計(jì)站點(diǎn)。

首先，您必須將自己放在客戶的鞋子上。例如，我每周在Trader Joe's購(gòu)物。如果我可以提前通過筆記本電腦計(jì)劃用餐并將該計(jì)劃與我的購(gòu)物體驗(yàn)相關(guān)聯(lián)，那將是很好的。換句話說，我可以告訴網(wǎng)站我想要做早餐，午餐或晚餐。然后，該網(wǎng)站會(huì)告訴我所有這些餐點(diǎn)所需的產(chǎn)品，并為我創(chuàng)建一個(gè)映射列表，以便我知道到達(dá)商店時(shí)遇到的過道。我所要做的就是拿出手機(jī)。

自適應(yīng)設(shè)計(jì)使客戶能夠根據(jù)其使用的設(shè)備獲得定制的體驗(yàn)，例如這種體驗(yàn)。

通過針對(duì)設(shè)備量身定制設(shè)計(jì)和信息來優(yōu)化客戶體驗(yàn)。例如，如果您的客戶正在使用智能手機(jī)查找您，請(qǐng)使您的電話號(hào)碼醒目且具有交互性，以便他或她可以輕松地?fù)艽螂娫挕?/span>消費(fèi)者在使用筆記本電腦嗎？提前顯示產(chǎn)品信息也許更重要。根據(jù)所使用的設(shè)備確定客戶的需求，并提供相應(yīng)的體驗(yàn)。

服裝網(wǎng)站設(shè)計(jì)戶使用哪種設(shè)備，都需要從用戶的角度來看站點(diǎn)。如果您的客戶拿出手機(jī)來查詢您的業(yè)務(wù)，則最好準(zhǔn)備好以最佳的設(shè)計(jì)和功能幫助他們找到所需的東西。如果您沒有做到簡(jiǎn)單無縫，他們會(huì)把他們的業(yè)務(wù)轉(zhuǎn)移到其他地方。

特色圖片，通過Shutterstock 移動(dòng)UX圖片。