流水不争先,争的是滔滔不绝

IM在PC端和移动端设计上的差异

IM安全 macgrady 141℃

IM越来越多的应用于人们的日常生活中,多种多样的IM也给我们带来了空间和场景的便利,让我们的生活更加丰富多彩。本团队专注IM即时通讯软件开发,致力于企业内部通讯,团队具有多年研发经验,IM领域6年深入研究,现将IM软件打包销售,详情咨询QQ:340554038,非诚勿扰。

IM为了方便使用,通常在设计时就会需求不同的物理设备进行安装操作,那么IM在PC和移动端设计上又有哪些不同呢?下面从几个比较核心的角度,阐述下PC端网页和移动端网页产品设计时的区别和注意点。

一、设备不同

PC端网页运行在电脑端浏览器,而移动端网页运行在手机端浏览器。

(1)屏幕大小不同

PC端的屏幕大,视觉范围比较大,可用来设计和使用的地方很多,容错性比较强,小的瑕疵都不容易被发现。

移动端的屏幕比较小,操作局限性大,空间宝贵,容错性低,只要界面有一个个的瑕疵,很容易被发现,所以要求更高。

pc端一般会采用固定布局,因为它的屏幕大内容多,一般会设计一个最小宽度,如果屏幕过小,会出现滚动条设计。

移动端一般会采用响应式布局,随着屏幕大小的变化,界面的字体大小、图片大小、元素的布局都会发生相应的改变。

(2)兼容性不同

PC端和移动端的操作系统不一样,浏览器内核也有一定的区别。

不同的浏览器,对一些样式的支持不同,比如同一个样式属性,在A浏览器支持,在B浏览器不支持。所以兼容性是需要面临的问题。

PC端的兼容性只受windows和mac操作系统和固定的几个浏览器影响,

但是移动端还会被不同的手机厂商所影响,因为不同的手机厂商,手机内嵌的浏览器不一样,所以移动端需要解决的兼容性问题更多。

产品在提需求时,可以关注下这个产品的目标用户是哪些,目标用户使用的主流浏览器(pc端)或者主流机型(移动端)有哪些,

在写需求时建议写明需要兼容哪些机型(移动端),哪些浏览器(pc端),在需求验收时做好兼容性的功能验收。

(3)性能要求不同

我们知道,相对来说,电脑内存比手机内存要大很多,cpu的性能也比移动端好。所以移动端对网页的性能要求更高。

你每访问一个网页,这个网页都会从服务端请求下载到你的设备上渲染出来,

因为手机内存有限,如果网页运行时需要下载大量图片,并且需要执行一些耗时算法、动画,可能会比较占用内存和cpu,会导致动画卡顿、交互卡顿。

所以一般移动端网页需要做的性能优化更多,比如减小资源体积、擅用缓存。

二、网络环境不同。

移动端弱网适配PC端连接的网络更加稳定,移动端由于受不同区域信号影响,可能会出现弱网或者断网的情况。

为了能实现更好的用户体验,在产品功能设计时,需要注意弱网和断网的场景。

(1)移动端断网适配

我们知道,图片是网页资源里面比较大的,加载是比较慢的。 因为移动端网络不稳定,对于加载资源比较大的场景,建议给用户一个进度条的提示,给用户一个反馈。

(2)移动端断网适配

html5有一项技术叫离线存储。如果网页启用了离线存储,当用户访问网页时,浏览器会把下载的资源和数据进行离线存储,当网络中断时,浏览器会把离线存储的资源渲染出原来的网页。如果你的目标用户处于弱网或者容易断网的场景比较多,比如东南亚地区的用户,建议使用这种断网的适配。

三、交互事件不同

pc端一般是使用鼠标或者触摸键盘来和界面交互,移动端一般通过手指按压屏幕来操作。

(1)点击事件

两者都有点击事件。但是移动端的点击事件实际是延迟了300ms的,细心的同学可能会遇到移动端页面点击一个按钮有些延迟才触发。所以移动端一般会采用触摸结束事件来触发点击(touchend),这样就不会有延迟。

(2)鼠标相关事件

pc端网页才有鼠标相关事件,所以悬浮事件、右键菜单事件、双击事件、拖拽事件、移动端则没有类似的操作。

(3)触摸相关事件

因为移动端是用手指来跟界面交互的,所以跟触摸相关的事件,移动端才有。包括手指触摸事件、手指抬起事件、放大缩小事件等。

四、移动端的场景更多

(1)横屏竖屏

移动端有旋转事件,当手机是横屏或者竖屏都能监测得到。

因为横屏和竖屏的手机宽度高度正好反过来,差距比较大。

如果只按照竖屏设计,当用户旋转到横屏时,可能会使得布局混乱。

一般采用2种方法适配:

一是禁用旋转。h5可以禁止用户把手机旋转时,屏幕也跟着旋转。

二是适配2种模式。横屏和竖屏采用2种不同的布局模式。

(2)字体缩放

因为移动端的用户经常会在手机设置字体大小,比如老年用户,他会把字体调的特别大,导致布局发生了错乱,一种常用的解决方法是,h5设置禁止字体缩放。

(3)暗黑模式适配

背景:

1)ios13 版本在2019年3月加入了暗黑模式

2)android 10及更高版本中提供了深色主题背景

3)mac os10.14 加入了暗黑模式

4)window10 也加入了暗黑模式

可见越来越多的新版本设备加入了暗黑模式。

优点:

1)可减少设备耗电量。

2)在夜间使用暗黑模式,减弱光对眼睛的射入,保护眼睛。

在暗黑模式下,系统对所有的窗口、菜单、控件都使用了较暗的色调,我们的h5主色调,应该随着设备模式的切换而自适应色调,呈现出一个比较协调的视觉效果。

原文链接:https://developer.51cto.com/art/202107/670316.htm

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。
点击这里给我发消息