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

Website development

桌面和移動(dòng)：三重點(diǎn)網(wǎng)站設(shè)計(jì)的差異

發(fā)布時(shí)間：2017-02-16 10:44:40

現(xiàn)在我們大多數(shù)人都知道，在手機(jī)上瀏覽一個(gè)網(wǎng)站的體驗(yàn)是從桌面上瀏覽網(wǎng)站的體驗(yàn)非常不同。屏幕方向是不同的，我們用手指代替鼠標(biāo)或觸控板，和一定的任務(wù)更加困難或麻煩的。這就是為什么網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，滿足移動(dòng)用戶的需求是很重要的。這是您的網(wǎng)站需要在移動(dòng)與桌面不同的三個(gè)關(guān)鍵組件。

1.內(nèi)容組織

一個(gè)設(shè)計(jì)移動(dòng)復(fù)雜的部分是如何的內(nèi)容應(yīng)該是有組織的。你的移動(dòng)用戶的需求可能不同于你的桌面用戶?；蛘咚麄兊男枨罂赡苁窍嗤模ɑ蝾愃频模┑撬麄兊臑g覽行為會(huì)改變?nèi)Q于他們所使用的設(shè)備。

手機(jī)游戲設(shè)計(jì)時(shí)，首先應(yīng)組織網(wǎng)站內(nèi)容，滿足移動(dòng)用戶的需求。內(nèi)容應(yīng)豎放，以適應(yīng)移動(dòng)設(shè)備的窄寬度。桌面設(shè)備的縱向方向，內(nèi)容橫跨屏幕，往往多消息或圖像可以舒適地生活在這樣一個(gè)廣闊的空間。移動(dòng)設(shè)備通常用于在縱向方向（和較小的屏幕意味著即使在景觀模式，橫向空間有限）。

warby-parker

warby-parker-mobile

眼鏡零售商，Warby Parker，將從平面垂直時(shí)，在移動(dòng)設(shè)備上瀏覽的內(nèi)容。

另一件事是優(yōu)先考慮的內(nèi)容。是你的移動(dòng)用戶不同的需求？如果是這樣，這是一種優(yōu)先考慮那些用戶的需求移動(dòng)設(shè)計(jì)價(jià)值，而不是簡(jiǎn)單地復(fù)制從您的桌面網(wǎng)站，這是有可能考慮桌面用戶。

在移動(dòng)網(wǎng)站設(shè)計(jì)之初，當(dāng)我們的手機(jī)那么復(fù)雜，我們不舒適的使用它們來進(jìn)行更復(fù)雜的活動(dòng)，它是常見的帶出一個(gè)網(wǎng)站的內(nèi)容或與什么似乎像一個(gè)移動(dòng)用戶的準(zhǔn)系統(tǒng)推出一個(gè)移動(dòng)網(wǎng)站想知道。2017這種做法是不可接受的。今天的移動(dòng)用戶希望能夠訪問相同的瀏覽體驗(yàn)他們的手機(jī)作為他們的桌面電腦。此外，手機(jī)是唯一的或主要的裝置，對(duì)很多人來說，一個(gè)全面運(yùn)作的手機(jī)網(wǎng)站可以達(dá)到用戶的一部分的唯一途徑。

soul-cycle

soul-cycle-mobile

邪教自行車工作室鏈，靈魂周期，允許用戶在桌面或移動(dòng)一類的書。內(nèi)容布局是移動(dòng)版的垂直對(duì)齊。

2.填表格

作為營(yíng)銷人員，我們花了很多精力優(yōu)化Web窗體的大轉(zhuǎn)換。我們知道，設(shè)計(jì)一個(gè)合理的形式是可以轉(zhuǎn)換的殺手。同樣是真實(shí)的，當(dāng)然，在移動(dòng)。和形式需要專門設(shè)計(jì)，便于移動(dòng)用戶填寫。

垂直對(duì)齊

你猜怎么著？整個(gè)垂直對(duì)齊的事嗎？它適用于形式。原理是一樣的，它是困難和乏味的移動(dòng)用戶來回滾動(dòng)水平才能完成的形式。為了使表格填寫的過程盡可能輕松的移動(dòng)瀏覽器，確保表單字段垂直對(duì)齊。

equinox

equinox-mobile

春分將輕松完成表單字段移動(dòng)。

預(yù)測(cè)文本

幫助你的用戶提供許多潛在的反應(yīng)領(lǐng)域的預(yù)測(cè)方案。提供預(yù)測(cè)允許用戶快速通過運(yùn)動(dòng)和減少的機(jī)會(huì)，這是比較常見的錯(cuò)別字，打字的時(shí)候在一個(gè)小屏幕的拇指。

kayak

Kayak提供的起源和用戶的搜索目的地的航班預(yù)測(cè)文本。

小的領(lǐng)域

因?yàn)樘顚懕砀竦囊苿?dòng)通常是相當(dāng)繁重的，要盡可能減少字段的數(shù)量。要做到這一點(diǎn)你應(yīng)該只問用戶，完成交易是絕對(duì)必要的信息。有關(guān)于用戶的附加信息可以方便的為你的公司，但它不應(yīng)該在一個(gè)轉(zhuǎn)換代價(jià)。

只要有可能，你應(yīng)該嘗試使用入門單場(chǎng)。再次，其理由是，移動(dòng)用戶可以跳過大量的領(lǐng)域很煩人。如果你能凝聚成一個(gè)多領(lǐng)域，這樣做是個(gè)好主意。

3.菜單

菜單格式絕對(duì)是桌面和移動(dòng)之間的差異的一個(gè)關(guān)鍵領(lǐng)域。在許多類別和子類別有巨型菜單的桌面上很常見。這種類型的設(shè)置非常適合桌面用戶的屏幕足夠大，就可以在這些菜單讀課文，可以點(diǎn)擊文本鏈接。

當(dāng)然，這是在移動(dòng)，一個(gè)不同的故事，因?yàn)槠聊恍∧粗复螅ㄏ鄬?duì)）。手機(jī)菜單的設(shè)計(jì)應(yīng)考慮這些事情。這意味著在大的文本或按鈕的單級(jí)菜單，和許多選項(xiàng)菜單的垂直對(duì)齊。

J. Crew的桌面網(wǎng)站與噸類特大菜單。

jcrew

jcrew-mobile

在移動(dòng)、菜單的崩潰，作為一個(gè)用戶縮小在一個(gè)范疇擴(kuò)大。

這是不是一個(gè)全面的列表所有的特點(diǎn)移動(dòng)網(wǎng)站需要不同的桌面版本，但我們認(rèn)為這些特征是三種重要的人。記住要考慮移動(dòng)用戶的需求以及獨(dú)特的方式在他們的瀏覽和消費(fèi)信息。希望在這篇文章中提供的例子作為改善你網(wǎng)站上的移動(dòng)的啟示。

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

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

上一篇：如何給你的分職位或網(wǎng)頁生成器添加更多的列

下一篇：網(wǎng)站營(yíng)銷實(shí)踐

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

建站流程

Website development

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

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

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

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

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

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理