产品设计中怎样考虑H5适配?

发布者: 乾学优行者 发布时间: 2021-1-21 浏览 164

产品设计中怎样考虑H5适配?移动端浏览器内核大多数是webkit内核,但是也有部分浏览器是其他类型内核,不同的浏览器内核对css样式的支持程度不一样,同一个css属性在不同浏览器的表现可能不同。今天小编就给你讲一下零基础学ui设计在h5适配的内容。


产品设计中怎样考虑H5适配?


手机屏幕尺寸不同,分辨率不同,可能会导致布局错乱或字体、图片没有自适应。一般设计给予的设计稿只有一份,比如H5设计稿是以iphone7的尺寸(宽度375px)交付的,我们需要在不同屏幕尺寸下让整体布局保持一致。横竖屏适配问题,因为横屏宽度比较大,可以显示的内容更多;竖屏宽度比较小,显示的内容有限,它们的显示内容和样式按道理是需要做适配的。


一、不同机型下css属性兼容问题

这是页面H5设计适配要解决的最基本问题。因为不同机型,自带的浏览器内核可能不一样,对css属性的支持程度不同,可能同一个css属性,在iphone上面表现正常,在安卓机型上就没有正常展示,为了保证同一份ui在不同的机型表现一致,开发可通过换一种等价属性,或者采取优雅降级的方案去做兼容。如何知道要适配哪些机型?需要根据产品的目标用户使用的主流机型来定。主要考虑国家、年龄、性别。举个例子,如果你的目标用户主要是东南亚用户,需要适配的机型要考虑oppo、vivo、一加等。


二、页面元素自适应

页面元素自适应也可以叫响应式布局。响应式布局指的是页面元素的大小,包括字体大小、元素大小随着屏幕尺寸的变化而变化。
比如设计给的设计稿是宽度375px(高度一般不考虑),在这个宽度上面图片的大小是宽12px/高12px,但是在宽度是780px的屏幕下,图片的宽度就按比例放大到宽24px/高24px。


三、iphonex刘海屏幕适配问题

众所周知,iphonex取消了物理按键,改成底部小黑条和顶部的齐刘海。这个改动会导致网页有屏幕适配问题。如果h5页面使用了吸底导航、返回顶部等固定定位的元素,就需要关注iphonex的适配问题了。推荐阅读>>>有哪些常见的版式设计排版?


产品设计中怎样考虑H5适配?以上提出的三种适配问题,css兼容适配和元素自适应是比较基础的适配,符合大多数的h5页面,H5设计只要根据目标用户,把需要兼容的机型给到开发就可以。横竖屏适配和暗黑模式适配要根据产品的具体定位和目标用户来定,横竖屏适配大多数适用于游戏、视频、多图片类的h5,暗黑模式适配大多数适用于阅读类的h5。


本页网址:https://www.u-walker.com/h5/3484.html

上一篇: 用户体验设计要素与产品价值

下一篇: 如何提升图形创意的新鲜感?

相关推荐

预约报名

免费试学 先学后付 预约试听 证书认证 就业薪资






400-073-5855
返回顶部