網(wǎng)站設(shè)計

Website development

移動端網(wǎng)站設(shè)計和桌面版網(wǎng)站設(shè)計有什么區(qū)別？

發(fā)布時間：2017-10-20 10:11:02

到目前為止，我們大多數(shù)人都知道，在手機上瀏覽網(wǎng)站的經(jīng)驗與在桌面瀏覽網(wǎng)站上的體驗截然不同。屏幕方向不同，我們使用拇指而不是鼠標或觸控板，某些任務(wù)更加困難或繁瑣。這就是為什么網(wǎng)站設(shè)計體驗為了滿足移動用戶的需求是如此重要。以下是您的網(wǎng)站的三個關(guān)鍵組件，需要在移動版和桌面版上有所不同。

內(nèi)容組織

移動網(wǎng)站設(shè)計的時候復(fù)雜的元素之一是如何組織內(nèi)容，移動用戶的需求可能與桌面用戶的需求不同?；蛘咚麄兊男枨罂赡苁窍嗤模ɑ蝾愃频模?，但是他們的瀏覽行為將根據(jù)他們使用的設(shè)備而改變。

在設(shè)計手機網(wǎng)站頁面時，首要任務(wù)是組織網(wǎng)站內(nèi)容，以滿足移動用戶的需求。內(nèi)容應(yīng)垂直堆疊以適應(yīng)移動設(shè)備的窄寬。桌面設(shè)備具有縱向延伸擴展性，因此內(nèi)容可以在屏幕上得到大的延伸，并且一組消息或一組圖像可以在桌面設(shè)備空間中得到更好的展示。移動設(shè)備通常以縱向方向使用（較小的屏幕表示即使在橫向模式下，水平空間有限）。

眼鏡零售商Warby Parker在移動設(shè)備上觀看時將內(nèi)容從水平對齊重新排列為垂直。

需要考慮的另一件事是確定優(yōu)先級的內(nèi)容。移動用戶的需求是否不同？如果是這樣，值得考慮的是為移動網(wǎng)頁設(shè)計，以優(yōu)先考慮這些用戶的需求，而不是簡單地從桌面網(wǎng)站復(fù)制，這有可能繼承了桌面用戶設(shè)計思路。

早手機還不是那么復(fù)雜，而且我們不舒服地使用它們進行更復(fù)雜的活動時，通常會刪除網(wǎng)站內(nèi)容的大部分或大部分內(nèi)容。在2017年，這種做法已經(jīng)不能接受了。今天的移動用戶希望能夠在他們的臺式計算機上使用手機上的瀏覽體驗。此外，移動設(shè)備是許多人的唯一或主要設(shè)備，因此完全操作的移動網(wǎng)站設(shè)計可能是達到一部分用戶的唯一方式。

作為營銷人員，我們花費大量精力優(yōu)化我們的網(wǎng)絡(luò)表單以實現(xiàn)大化轉(zhuǎn)化。我們知道設(shè)計不好的形式保證會降低網(wǎng)站的轉(zhuǎn)化率。當然，在手機上也是如此。而且，表單需要專門設(shè)計，以便移動用戶輕松填寫。

猜猜什么？那整個垂直對齊的東西？它也適用于表格。原則是一樣的 - 移動用戶橫向滾動來完成表單是很困難和乏味的。為了使移動瀏覽器盡可能地簡化表單填寫過程，請確保表單字段垂直對齊。

通過為具有許多潛在響應(yīng)的字段提供預(yù)測選項，幫助您的用戶。提供預(yù)測允許用戶快速移動表單，并減少打字機會，這在小屏幕上使用拇指打字時更為常見。

Kayak.com提供用戶飛行搜索的起點和目的地的預(yù)測文字。

小化字段

由于在移動設(shè)備上填寫表單通常非常繁瑣，因此您希望通過減少字段數(shù)量使其盡可能簡單。要完成此操作，您只應(yīng)向用戶詢問完成交易絕對必要的信息。有關(guān)用戶的其他信息可能對您的公司很方便，但不應(yīng)該以犧牲轉(zhuǎn)化為代價。只要有可能，您應(yīng)該嘗試使用一個單一的入口。如果您可以將多個字段集中在一個字段中，這是一個好主意。

菜單

菜單格式絕對是桌面和手機之間的關(guān)鍵區(qū)域。在桌面上，通常有許多類別和子類別的大型菜單。這種類型的設(shè)置對于具有足夠大的屏幕的桌面用戶來說非常適用，他們可以在這些菜單中閱讀文本，并且可以輕松地點擊文本鏈接。移動菜單應(yīng)該考慮到這些事情的設(shè)計。這意味著具有大文本或按鈕的單級菜單，以及具有許多選項的菜單的垂直對齊。

J.Crew的桌面版網(wǎng)站有大量的大型菜單，有大量的類別。

JCREW移動

在移動設(shè)備上，菜單折疊，然后隨著用戶在類別上縮小而展開。

這絕對不是一個移動網(wǎng)站的所有功能的全面列表，需要與桌面版本不同，但我們認為這些功能是重要的三個功能之一。請記住要始終考慮移動用戶的需求以及瀏覽和使用信息的獨特方式。希望本文中提供的示例可以改善您在網(wǎng)站設(shè)計上移動設(shè)備的靈感。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7339,0.html

上一篇：網(wǎng)頁設(shè)計中按鈕焦點如何設(shè)計

下一篇：移動端網(wǎng)站設(shè)計開發(fā)中如何提高用戶轉(zhuǎn)化率？

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理