据统计,90%的网站访问者会因为UI界面设计不佳而放弃浏览一个网站,所以UI界面设计是每一个网站开发者不得不去思考的问题。UI设计有很多组件从自定义Web开发可用性到移动响应能力,都对人们是否留在页面上起着巨大的作用。要知道在设计的过程中,所有UX和UI设计师必须考虑的问题是流畅的跨设备用户体验,所以Pixso通过下文,让大家可以了解到网站应该选择移动优先设计还是响应式设计。首先,我们需要了解目前最常见的各类设备屏幕分辨率。

1. 常见的桌面屏幕分辨率

根据数据,从2019年3月至2022年3月,最常用的桌面屏幕分辨率是:

  • 1366x768 (22.98%)

  • 1920x1080 (20.7%)

  • 1536x864 (7.92%)

  • 1440x900 (7.23%)

  • 1280x720 (4.46%)

在线UI界面设计工具Pixso,预设了手机、平板、电脑、网页、幻灯片、智能手表、印刷品及其他尺寸,点击工作台顶部“画板”工具,即可快速开启响应式UI界面设计,点击马上免费试试

ui界面设计尺寸

2. 常见的移动屏幕分辨率

在2019年3月至2022年3月期间,当涉及到智能手机最常见的屏幕分辨率时,全球设计师更喜欢使用以下尺寸:

  • 360x640 (18.7%)

  • 375x667 (7.34%)

  • 414x896 (6.76%)

  • 360x780 (5.31%)

  • 375x812 (5.01%)

Pixso资源社区内置了海量移动APP UI设计模板资源,主题丰富,包括社交APP、外卖APP、语音聊天、旅游、金融等,所有组件均可在线编辑下载,让设计无需从0开始,帮助设计师快速开启移动界面设计项目,点击前往Pixso资源社区,免费领取移动APP界面设计模板

ui界面设计尺寸

3.常见的平板电脑屏幕分辨率

在2019年3月至2022年3月之间,全球最常见的平板电脑屏幕分辨率是:

  • 768x1024 (51.43%)

  • 1280x800 (7.28%)

  • 800x1280 (5.26%)

  • 601x962 (4.32%)

  • 962x601 (2.99%)

设计师在进行作品展示或者制作作品集时,往往通过使用样机素材,提高设计作品的质感以及真实性,Pixso资源社区内置大量样机素材,包含笔记本、台式电脑、iwatch、手机等不同设备,支持在线一键套用,瞬间提高界面设计感,点击免费领取样机素材

ui界面设计尺寸

4. 为什么移动端网站尺寸在UI设计中很重要

根据数据,20222月的流量份额是通过以下方式产生的:

  • 手机版 (50.34%)

  • 桌面版 (46.67%)

  • 平板电脑 (2.99%)

网络交互的环境是多种多样的,但是从上面的流量份额中可以看到手机移动端占据最大流量份额,为了确保在所有设备上提供出色的用户体验,企业必须投资于移动响应式设计。大多数设计人员使用一个标准桌面和一个标准移动分辨率来扩展设计并确保跨设备的流畅用户体验。线框图是Web 设计人员制作桌面和移动体验的阶段,为这两个视图分发元素的过程,而Pixso资源社区的海量案例可以为设计人员提供素材和资源,点击一键调用Pixso社区资源

线框图

想要真正尖端的网站和用户体验的品牌,在整个线框图阶段就需要考虑更多方面,包括:

  • 台式机、平板电脑、移动设备视图

  • 纵向和横向视图

  • 浏览器

5. 如何决定使用哪些网站尺寸

找出目标市场拥有的移动屏幕尺寸。在这个过程中,我们需要通过网站后台的来访用户数据分析,勾勒出我们的用户画像,找出我们的潜在客户使用哪些设备来访问网站。Pixso建议你考虑以下有关用户画像的内容:

  • 年龄:研究访客的年龄组比例,再找出年龄组中最受欢迎的设备品牌/型号。

  • 性别:在性别中筛选最受欢迎的设备,按年龄组和目标性别交叉匹配设备。

  • 位置:进入更细粒度、更深入了解,找出本地使用的网站尺寸的趋势

  • 收入:如果网站的目标受众是高收入受众,那么网站必须对准最新最尖端的设备并支持流畅运行。

6. 响应式和移动优先

如今智能手机在全球范围内产生了50.44%的网页浏览量,这样的流量趋势,带动了企业向智能手机的网站开发领域涌去。但是,应该投资响应式网页设计还是移动优先的网页设计,仍然是问题

一般而言,设计人员可以采取两种方式,一是创建响应式网页设计,这样的设计适合PC端需要最大分辨率,然后再针对较小的屏幕进行调整。

二是首先针对用于智能手机屏幕的网站进行草图绘制和制作原型,然后将其扩展到更大的台式机和笔记本电脑屏幕。在这种情况下,整体设计非常适合移动设备,并且可以填充桌面视图。

总而言之,没有一种尺寸适合所有网站,所以网站设计师不应该专注于最佳网页尺寸并为各种设备创建网页,而是应该首先为受众进行设计,UI设计师们可以在Pixso的资源社区中通过参考学习大厂的优质案例,从而寻找到最适合自己的网站的尺寸,点击免费注册使用Pixso

ui界面设计尺寸