首頁 部落格 手機端網頁設計與PC電腦端的差別與設計要點
Jericho
Mar 23, 2021
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

手機端網頁設計與PC電腦端的差別與設計要點

今天我們分享一個很常見卻很重要的問題:手機版網頁設計與PC電腦端的差別,尤其在螢幕上,尺寸差了好幾倍,設計師都知道這一件事情,但常常沒有做好,以下就來分享造成這種現象的問題與解決之法。

 

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

在設計工作進行時,PC電腦端頁面在PS中即時瀏覽的視覺效果,基本上就可以對應其完成上線後的即時效果,

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

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

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

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


(圖片來源:Google Developer)

 
差別二:訊息的傳達更難掌握

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

 

設計要點一:內容識別性

將需要表達的訊息通過圖文並茂的方式,向用戶准確無誤的傳達,向用戶傳遞信息才是核心。 

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

設計要點二:內容流暢度:

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

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

設計要點三:驗證設計

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

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

文章標籤
RWD 響應式網頁設計
手機網站設計應該注意什麽問題
手機網站設計應該注意什麽問題
Jericho
Jericho
Mar 15, 2021
【街頭攝影】如何拍出有故事性的「劇照」?
【街頭攝影】如何拍出有故事性的「劇照」?
Ringo
Ringo
Nov 02, 2017
網頁APP化:開發APP有什麽好處及弊端
網頁APP化:開發APP有什麽好處及弊端
Jericho
Jericho
Mar 17, 2021