手機端網(wǎng)頁設(shè)計與PC電腦端的差別與設(shè)計要點

現(xiàn)在我們分享一個很常見卻很重要的問題：手機端網(wǎng)頁設(shè)計與PC電腦端的差別，尤其在螢?zāi)簧?，尺寸差了好幾倍，設(shè)計師都知道這一件事情，但常常沒有做好，以下就來分享造成這種現(xiàn)象的問題與解決之法。

差別一：視覺瀏覽比例不同

在設(shè)計工作進行時，PC電腦端頁面在PS中即時瀏覽的視覺效果，基本上就可以對應(yīng)其完成上線后的即時效果，

電腦上視覺瀏覽比例和上線比例近乎1 : 1

而手機端頁面在PS里實時看到的效果與真正在APP中展示的會有很大差距

電腦上視覺瀏覽比例和手機比例1 : ？

如圖所示，左邊是以電腦端方式顯示于手機上，文字幾乎無法閱讀，右邊則是正確的手機端顯示效果。

(圖片來源：Google Developer)

差別二：訊息的傳達(dá)更難掌握

正常人在操作手機的時候，眼睛與手機的距離大概會有20公分左右，再加上制作時的視覺感受與上線后，在視覺比例上也會有一些差距，所以這就導(dǎo)致手機端，如何將畫面中的訊息準(zhǔn)確、清晰的傳達(dá)給用戶，變得更加難掌握。

設(shè)計要點一：內(nèi)容識別性

將需要表達(dá)的訊息通過圖文并茂的方式，向用戶準(zhǔn)確無誤的傳達(dá)，向用戶傳遞信息才是核心。

這也是很多設(shè)計師在做手機端頁面的一個通病，仍然按照PC電腦端設(shè)計方式進行，忽略了在手機上實際的效果呈現(xiàn)，這樣的作品會讓設(shè)計工作大打折扣，事倍功半。

設(shè)計要點二：內(nèi)容流暢度

很多人在做頁面設(shè)計時，往往只關(guān)注局部而忽略整體，導(dǎo)致內(nèi)容流暢度缺點，無法激起用戶繼續(xù)閱讀的興趣。這也直接或間接的影響了用戶在頁面上的停留時間，對于內(nèi)容傳播也起到了很大的阻礙，商業(yè)價值也會隨之降低。

舉例來說，曾經(jīng)一度非常流行的滾動視差網(wǎng)頁設(shè)計，雖然在PC電腦端上的效果非常的亮眼，但是來到手機上就會變得非常的不順手，這不僅是滑鼠與觸控習(xí)慣的差異，也是電腦性能與手機的差異所造成的。

設(shè)計要點三：驗證設(shè)計

我們一直鼓勵網(wǎng)頁設(shè)計師，不要只使用電腦的模擬工具，模擬手機端的使用情形，而是實際拿出你身邊的手機，測試你所制作的網(wǎng)站與網(wǎng)頁。尤其是Apple手機與Android手機有時些微的差異，就會造成用戶瀏覽的問題。

一部分的問題出在于Html5的支援上，有時你預(yù)期圖片應(yīng)該會出現(xiàn)的漸層效果，電腦上有出現(xiàn)，在手機上卻無法出現(xiàn)，或是原本應(yīng)該隱藏的訊息，在手機端上無故跳出，這些錯誤臭蟲若沒有經(jīng)過實際驗證，光靠模擬工具是抓不到的。

當(dāng)前標(biāo)題：手機端網(wǎng)頁設(shè)計與PC電腦端的差別與設(shè)計要點
本文URL：http://www.muchs.cn/news12/190412.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站營銷、外貿(mào)建站、自適應(yīng)網(wǎng)站、微信公眾號、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)