为企业提供全套定制解决方案,
涵盖网站建设/SEO优化/营销推广/技术开发
湖北设计网页公司:网站设计师必看 移动网站设计页面适配攻略,网站建设方案中重要的一方面还是网站后台管理系统的设计。后台主要是为客户搭建一个便捷的管理平台,可以进行相关信息的增加、删除、修改等功能。网站的后台设计也决定了网站功能模块的实现,建设方案中网站功能是需要明确规定的。接下来一起与小编看看“网站设计师必看 移动网站设计页面适配攻略”的文章!
优口碑、重质量、高交付,多年技术沉淀行业领先者
-
网站优化
分析网站重点词库,提供定制解决方案,全站提升排名。
-
网站设计
更容易收录,搜索引擎喜好,页面静态化,网址自定义。
-
全网营销
超低价格帮助企业实现网络营销,低成本、高水准,快速实现营销。
-
软件定制
拥有成熟的项目管理流程与完善的质量监控体系,保证了客户的操作流程性和用户体验。
移动设备尺寸
网上专门讲解移动设备尺寸的文章很多,事实上,移动设备种类之多简直是噩梦一般。所以,实际在设计或者开发过程中,往往只是选择几种设备作为基准来进行设计和开发,而对于其他情况,则采用一些适配策略覆盖。
目前主流的,是以4的640960或者6的12422208为基准设计,其他设备均采取适配策略。我们先假定设计稿是按640960的规范输出,先来看看前端的常用适配方案。
前端适配方案
前端的适配方案大致分为四种:
1、根据按比例缩放
这种方案的实现更偏技术,大致原理是根据设备的分辨率及像素比等信息,计算出页面的缩放()数值,来进行等比缩放。终的效果就是基于640960的设计稿再进行等比缩放,这种实现比较适合某些图片较多的活动页面开发,可以使用设计稿上的绝对像素值进行开发,即设计稿上是200则代码中的数值也是200。
当然,这种方案也有致命的缺点,即脚本计算的结果很难覆盖全部设备,对于一些计算不准确,或者分辨率像素比未知的设备,很容易整个页面异常放大或缩小,直接暴露严重。综上,这种缩放方案可以总结出以下基本特征:
效果:按设计稿等比缩放。
场景:图片较多的活动页面开发。
优点:可以直接按照设计稿像素值开发。
缺点:许多设备无法覆盖,不断填坑。
2、根据页面宽度百分比适应
曾经很长的一段时间,我们都采用百分比适配方案。例如微信购物入口中的京东购物,目前仍然采用这种方案。
这种方案的主要表现就是,在比基准设备(如640960)宽的设备上,页面元素的横向宽度是按百分比自适应的,但是高度不会变化。所以,无论遇到什么设备,只需要在宽度上进行兼容即可满足,而文本图片等内容,也可以按照宽度自适应,尽可能充分利用屏幕空间。
而开发时,由于以及许多机都具有高分辨率屏幕,比如4的屏幕实际像素点是物理像素的两倍。所以,我们开发时要在640960的设计稿尺寸的基础上除以2,比如设计稿上的高度是200,则中就是:100;
关于屏幕的基本知识,建议大家自己查找资料,我只挑重点。
效果:按设计稿尺寸除以2,元素宽度使用百分比实现。
场景:平台型页面,页面布局不是很复杂。
优点:可以适应几乎所有设备。
缺点:横向拉宽会使布局比例失调,且复杂结构百分比实现有难度。
3、基于媒体查询的响应式方案
响应式设计,曾经乃至现在都是非常时髦的概念,不过在实际应用中,响应式设计还是有其相对狭隘的应用场景。一般除了一些创新的小公司,或者某些专题网站之外,很少会用一套代码来适配所有终端。比如,,甚至等,全都用一套代码来适配显然是不科学的。
目前普遍的观点是,响应式设计更适合专题页面,或者没有资源来针对各个终端进行单独开发的团队来使用。
响应式设计主要遵循,要针对不同设备给出不同设计方案,并设置合适的断点,结合百分比方案,来在不同的设备显示不同的布局。
效果:不同设备表现可能截然不同。
场景:专题网站,小团队低成本开发。
优点:不通设备可以发挥更多的想象力。
缺点:要出多套设计,且内容可能需要取舍。
4、缩放方案
方案的原理跟方案非常相似,只不过是更加粗暴地根据设备的宽度来调整缩放。与方案不同的是,方案并不是缩放整个页面,而是页面上所有的尺寸都是与根元素()的字体大小相关的,我们只是根据不同设备来调整根元素字体大小,则所有尺寸随之变化。
效果:按照设计稿等比缩放。
场景:活动页面及部分平台页面。
优点:开发方便,适应性好。
缺点:等比缩放超大会显得不精致,脚本计算晚页面可能跳动。
设计师与前端如何对接
了解了上面的一些适配方案之后,作为设计师就要先确定,我的设计稿在不同的设备上到底需要怎样的表现?假设遇到了更宽的设备,是横向拉宽?还是等比缩放?还是再设计一个截然不同的布局?
这些前提基本确定了该设计稿会如何实现,当然你所设计的页面可能是平台的一部分,那么就要遵循平台既有的缩放规则,否则可能会有一些不匹配的问题。比如不同的两个页面来回切换会产生瞬间放大的等。
确定好大致的适配方向,你还要选择是基于640还是基于1242的尺寸进行开发,有人提到6的750,这里我们可以按照640拉宽的情况统一对待。
不过要注意的是,中默认750的画布,可不是按照640拉宽来构思的,所以如果要在中基于默认画布开发,要考虑到放在640的机型上会稍大的情况。
如果按照640宽度进行设计,实际上我们潜在约定了这是个类似4/4的2倍像素比的设计稿。那么,无论采用何种适配方案,我们输出的等都是相当于两倍尺寸的。而在前端开发过程中,如果采用方案,则中使用实际尺寸。
而如果是百分比方案等,则在样式中设置设计稿1/2的尺寸(对应设备的物理像素),但图片本身还是设计稿的尺寸,只是在屏幕上需要更多的像素,所以用代码将其展示时在设备上的物理尺寸压缩到了1/2。
关于物理像素,像素,像素密度等内容,足够再写上10086个字了。作为设计师,只需要知道大概的计算方式,以及基本的适配方案就可以了。
后,也是重要的,一个开发团队一定要有设计规范,并且有与之对应的开发规范,这样才能真正的实现无缝对接。
湖北设计网页公司:网站设计师必看 移动网站设计页面适配攻略
以上是“网站设计师必看 移动网站设计页面适配攻略”的文章!,当然在建站过程中,沟通一些细节也是很重要的,比如说网站的功能以及网站的模板。这些都是需要确定的,一般情况下,在确定的时候,可以根据用户的运营思维去决定。当然将一些细节方面的问题和网站的开发人员去沟通,确保开发人员能够了解用户的需求以后,就可以直接进行建站了,这种建站方式也是比较简单的,一般情况下,网站建设,用户可以根据自己的需求去建站就可以。想要了解更多“网站设计师必看 移动网站设计页面适配攻略”的信息,可以拨打右下角电话咨询我们!咨询电话:400-960-5068!
上一篇:湖北设计网页公司:常用的网页布局
下一篇:下一篇详细