2022-08-16 分類: 網(wǎng)站建設(shè)
現(xiàn)在我們分享一個(gè)很常見卻很重要的問題:手機(jī)端網(wǎng)頁(yè)設(shè)計(jì)與PC電腦端的差別,尤其在螢?zāi)簧?,尺寸差了好幾倍,設(shè)計(jì)師都知道這一件事情,但常常沒有做好,以下就來分享造成這種現(xiàn)象的問題與解決之法。
差別一:視覺瀏覽比例不同
在設(shè)計(jì)工作進(jìn)行時(shí),PC電腦端頁(yè)面在PS中即時(shí)瀏覽的視覺效果,基本上就可以對(duì)應(yīng)其完成上線后的即時(shí)效果,
電腦上視覺瀏覽比例和上線比例近乎1 : 1
而手機(jī)端頁(yè)面在PS里實(shí)時(shí)看到的效果與真正在APP中展示的會(huì)有很大差距
電腦上視覺瀏覽比例和手機(jī)比例1 : ?
如圖所示,左邊是以電腦端方式顯示于手機(jī)上,文字幾乎無法閱讀,右邊則是正確的手機(jī)端顯示效果。
(圖片來源:Google Developer)
差別二:訊息的傳達(dá)更難掌握
正常人在操作手機(jī)的時(shí)候,眼睛與手機(jī)的距離大概會(huì)有20公分左右,再加上制作時(shí)的視覺感受與上線后,在視覺比例上也會(huì)有一些差距,所以這就導(dǎo)致手機(jī)端,如何將畫面中的訊息準(zhǔn)確、清晰的傳達(dá)給用戶,變得更加難掌握。
設(shè)計(jì)要點(diǎn)一:內(nèi)容識(shí)別性
將需要表達(dá)的訊息通過圖文并茂的方式,向用戶準(zhǔn)確無誤的傳達(dá),向用戶傳遞信息才是核心。
這也是很多設(shè)計(jì)師在做手機(jī)端頁(yè)面的一個(gè)通病,仍然按照PC電腦端設(shè)計(jì)方式進(jìn)行,忽略了在手機(jī)上實(shí)際的效果呈現(xiàn),這樣的作品會(huì)讓設(shè)計(jì)工作大打折扣,事倍功半。
設(shè)計(jì)要點(diǎn)二:內(nèi)容流暢度
很多人在做頁(yè)面設(shè)計(jì)時(shí),往往只關(guān)注局部而忽略整體,導(dǎo)致內(nèi)容流暢度缺點(diǎn),無法激起用戶繼續(xù)閱讀的興趣。這也直接或間接的影響了用戶在頁(yè)面上的停留時(shí)間,對(duì)于內(nèi)容傳播也起到了很大的阻礙,商業(yè)價(jià)值也會(huì)隨之降低。
舉例來說,曾經(jīng)一度非常流行的滾動(dòng)視差網(wǎng)頁(yè)設(shè)計(jì),雖然在PC電腦端上的效果非常的亮眼,但是來到手機(jī)上就會(huì)變得非常的不順手,這不僅是滑鼠與觸控習(xí)慣的差異,也是電腦性能與手機(jī)的差異所造成的。
設(shè)計(jì)要點(diǎn)三:驗(yàn)證設(shè)計(jì)
我們一直鼓勵(lì)網(wǎng)頁(yè)設(shè)計(jì)師,不要只使用電腦的模擬工具,模擬手機(jī)端的使用情形,而是實(shí)際拿出你身邊的手機(jī),測(cè)試你所制作的網(wǎng)站與網(wǎng)頁(yè)。尤其是Apple手機(jī)與Android手機(jī)有時(shí)些微的差異,就會(huì)造成用戶瀏覽的問題。
一部分的問題出在于Html5的支援上,有時(shí)你預(yù)期圖片應(yīng)該會(huì)出現(xiàn)的漸層效果,電腦上有出現(xiàn),在手機(jī)上卻無法出現(xiàn),或是原本應(yīng)該隱藏的訊息,在手機(jī)端上無故跳出,這些錯(cuò)誤臭蟲若沒有經(jīng)過實(shí)際驗(yàn)證,光靠模擬工具是抓不到的。
當(dāng)前標(biāo)題:手機(jī)端網(wǎng)頁(yè)設(shè)計(jì)與PC電腦端的差別與設(shè)計(jì)要點(diǎn)
本文URL:http://jinyejixie.com/news12/190412.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站營(yíng)銷、外貿(mào)建站、自適應(yīng)網(wǎng)站、微信公眾號(hào)、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容