十個Tips設計出合乎人性的手機版網頁(上)

香港網站建設 閱讀:685 2019-02-17 02:53:11 評論:0

近日全球知名數據分析公司 Newzoo 發布了2019年的全球移動市場行業預測報告。

報告指出2018年全球智能手機用戶超過33億人,隨著移動終端硬件的不斷發展,智能手機功能變得更強大,人們在移動端可以得到的體驗會更好,也更方便。Newzoo 預計到2021年,用戶數量將達到38億,其中亞太地區占了這個數字的一半以上。

面對這樣的發展形勢,沒有人甘願放棄擁有這麽龐大客戶群體的渠道。所以一個優秀的網頁設計,必須具有移動兼容性。

中國互聯網協會數據統計:用戶如果在訪問移動端網站時體驗不好,3秒內跳出的網站比例大概在61%,5秒內跳出網站的比例大概在85%,而這些跳出的用戶中有40%會訪問競爭對手的網站,這不僅是公司的損失也是間接的在幫助自己的競爭對手,所以有必要進行良好的網站設計。

如何提高移動端網頁設計用戶體驗(上)

今天,我們就邀請了我們的網頁工程師Leo給大家介紹一下小技巧。

Leo: 首先大家要認識一下,瀏覽器對網頁的預設設定,因為如果要設計一個好網頁,首先一定要知道預設設設定,因為手機瀏覽器跟電腦瀏覽器的預設設定是完全不一致

如果大家在沒有使用framework的底下,請馬上拿下紙筆抄下來吧!!

1) IOS預設,使用了980PX大小寬度的viewport

2) 可以縮放的瀏覽器

首先要講解一下, 設計移動web,為什麽不使用默認的980px的布局viewport?

不同手機, 有不同的DPI, 不同的解析度, 那麼,如果iphonex iphone xr iphone7同時要顯示一個1000px的網頁, 瀏覽器要怎麼處理?

開發智能手機, 從來最大的問題就是沒有標準, 跟電腦不同, 電腦的屏一直都只有幾個常用的尺寸,很少有例外。

手機會先模擬一個980的頁面,再將你的網頁縮放至合適比例大小

3) 為什麽要有viewport?

一個300多像素的屏幕,放一個1000多像素的頁面,會混亂,所以要先虛擬一個980像素的頁面,然後進行縮放。

度量|視口 visual viewport ==== 窗口縮放scale

布局 layout viewport

4) 設計移動web,為什麽不使用默認的980px的布局viewport?

① 寬度不可控制,不同系統的設備默認值都可能不同

② 頁面縮小版顯示,交互不友好

③ 鏈接不可點

④ 有縮放,縮放後又有滾動

font-size為40px等於pc上12px同等物理大小,不規範

由於篇幅限制,今天先給大家介紹到這裏,下期我們將繼續為您介紹相關的後續內容,敬請關註香港mw網頁設計公司官網。

聲明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

發表評論
搜索