歡迎訪(fǎng)問(wèn)世紀網(wǎng)絡(luò )官網(wǎng),寶雞網(wǎng)站建設SEO優(yōu)化已累計服務(wù)超過(guò)900家企業(yè)!     咨詢(xún)熱線(xiàn):13619273150

15年網(wǎng)站建設優(yōu)化經(jīng)驗,900家客戶(hù)的選擇,值得信賴(lài)!


手機網(wǎng)站界面與傳統網(wǎng)站界面設計的差異性

作者:本站      發(fā)布時(shí)間:2018-01-16      瀏覽:1287

62.9K


(一)不同屏幕尺寸帶來(lái)的信息結構差異性

當分別用手機和桌面電腦瀏覽同一網(wǎng)站時(shí),顯示效果不太相同的最主要原因就是硬件設備不同帶來(lái)的差異。手機設備的屏幕尺寸遠遠小于桌面電腦。從京東、蘇寧等各個(gè)網(wǎng)上商城手機的銷(xiāo)售情況可以看出,現在市場(chǎng)上主流的手機,像蘋(píng)果、三星、聯(lián)想、htc、oppo等手機大部分的屏幕尺寸在3至5英寸之間,個(gè)別的像三星的note2屏幕為5.5英寸,note3為5.7英寸都是屏幕比較大的手機。但是我們看一下比較小的筆記本電腦的尺寸,屏幕大小大部分在13至17英寸之間,像微軟超極本類(lèi)型的筆記本屏幕尺寸在10英寸左右,這是非常小筆記本尺寸,但是仍然和手機屏幕的尺寸有將近一倍的差距。這種屏幕尺寸上的差距帶來(lái)的不同顯示效果就是,當用戶(hù)用手機瀏覽一個(gè)沒(méi)有專(zhuān)門(mén)針對手機優(yōu)化過(guò)的網(wǎng)頁(yè)的時(shí)候,會(huì )出現兩種情況:一種是該網(wǎng)站在手機上橫向內容顯示不完整,另一種是網(wǎng)站內容在手機上顯示完整,但是顯示內容太小,無(wú)法正常瀏覽。

手機網(wǎng)站界面設計的時(shí)候比較常見(jiàn)的方法是,把原本并列的信息進(jìn)行縱向排列,通過(guò)手機瀏覽時(shí)逐層展開(kāi);有些設計根據需要,甚至會(huì )舍棄次要的內容。手機網(wǎng)站的界面信息展示方式不是讓用戶(hù)橫向掃描式瀏覽,而是漸進(jìn)式體驗。所以屏幕尺寸的變化對于網(wǎng)站組織信息和版式設計的影響比較大。例如手機版本的百度搜索結果每行能顯示20個(gè)漢字左右,而用電腦版本,漢字有40個(gè)字左右。

網(wǎng)站整體的設計流程相同,視覺(jué)因素不會(huì )有較大變化,但圖片根據需要適當調整顯示比例。適用技術(shù)區別不大,但為了適應不同設備,現在提出網(wǎng)站設計的自適應性,它的意思就是網(wǎng)站能夠運用一些技術(shù)判斷用戶(hù)是用什么設備瀏覽該頁(yè)面,然后網(wǎng)站自動(dòng)調用適合該用戶(hù)的顯示界面,這樣就能保證用戶(hù)通過(guò)不同途徑瀏覽時(shí)有相同的體驗。

(二)使用習慣帶來(lái)的界面設計差異性

首先,手機操作的特性之一是適用環(huán)境復雜化。人們會(huì )在旅行的過(guò)程中查看信息,可能會(huì )在洗手間瀏覽,可能會(huì )躺在舒適的床上翻看需要的內容。移動(dòng)設備帶給我們的使用環(huán)境的多樣性和便捷性導致越來(lái)越多的人使用手機上網(wǎng)。桌面電腦甚至筆記本電腦從這一點(diǎn)來(lái)講不如手機。試想一下,通過(guò)這么小的瀏覽窗口,使用環(huán)境多樣的情況下,需要快速瀏覽所需要的信息的時(shí)候,仍然像傳統網(wǎng)站一樣恨不得在一個(gè)頁(yè)面上放上所有的內容,植入大量的廣告,用戶(hù)還能瀏覽到什么實(shí)質(zhì)的內容?對比一下淘寶網(wǎng)站首頁(yè)的傳統版本和手機版本,可以看出,手機版本進(jìn)行了高度的簡(jiǎn)化,只突出了搜索和主要的導航,界面更加單純,使用起來(lái)更加便捷。簡(jiǎn)潔的、內容清晰的網(wǎng)站更便于手機瀏覽。

其次,人們常常用單手拿著(zhù)手機,并且用拇指進(jìn)行操作,這種習慣導致手機網(wǎng)站界面設計主菜單的位置擺放正好與傳統網(wǎng)站設計相反。傳統網(wǎng)站常常把導航放到頂端,而手機網(wǎng)站由于這種習慣帶來(lái)的影響,常常把主菜單放到底部。

現在大部分是大屏幕的觸屏手機,而且拇指操作為主,所以在界面文字鏈接設計的時(shí)候需要考慮字體大小、字體行距等視覺(jué)元素是否易于拇指操作。過(guò)小的文字或者行距會(huì )增加點(diǎn)擊的出錯率,這也是影響用戶(hù)體驗的重要因素。

再次,人們已經(jīng)習慣了豎屏使用手機,這就確定了手機網(wǎng)站界面設計基調是豎幅排版,跟傳統電腦顯示屏幕橫向顯示有很大區別。兩者界面設計時(shí)候都是同樣以寬度為主,自適應高度。在傳統網(wǎng)站常見(jiàn)的兩欄、三欄等排版方式,在手機界面中幾乎看不到,都是以單欄縱向結構為主展示信息。手機界面設計如果進(jìn)行多欄展示文字內容的話(huà),并不利于閱讀體驗。因此現在主流的做法是單欄,自適應高度,或“瀑布流”展示信息。




0