响应式网页页面的设计方案步骤

2021-03-31 02:12

第一步:明确必须适配的机器设备种类、显示屏规格

根据客户科学研究,掌握客户应用的机器设备遍布状况,明确必须适配的机器设备种类、显示屏规格。

机器设备种类:包含移动终端(手机上、平板电脑)和pc。针对移动终端,设计方案和完成的情况下留意提升手式的作用。

显示屏规格:包含各种各样手机上显示屏的规格(包含横着和纵向)、各种各样平板电脑的规格(包含横着和纵向)、一般电脑上显示屏和宽屏幕。

协同企邦响应式设计方案规格:1920-1280、1024、960、800、768、640、600、540、480、320

必须考虑到的难题:

某一网页页面开展响应式设计方案时其可用的规格范畴是什么?例如,1688检索結果网页页面,跨度能够从手机上到宽屏幕,而1688,因为构造过度繁杂,想立即转移拿到机上,不太实际,比不上立即设计方案一个手机上版的。 融合客户要求和完成成本费,对可用的规格开展选择。例如一些作用实际操作的网页页面,客户一般沒有在手机端开展实际操作的要求,沒有必需开展响应式设计方案。

第二步:制作线框原形

对于明确出来的好多个规格各自制作不一样的线框原形,必须考虑到清晰不一样规格下,网页页面的合理布局怎样转变,內容规格怎样放缩,作用、內容的删剪,乃至对于独特的自然环境作独特化的设计方案等。这一全过程必须设计方案师和前端开发开发设计工作人员维持紧密的沟通交流。

第三步:检测线框原形

将照片导进到相对的机器设备开展一些简易的检测,可协助大家尽快发觉可浏览性、易读性等层面存有的难题。

响应式线框原型图

第四步:视觉效果设计方案

留意,移动终端的显示屏清晰度相对密度与传统式电脑上显示屏不一样,在设计方案的情况下必须确保內容文本的易读性、控制可点一下地区的总面积等。

第五步:前端开发完成

与传统式的web开发设计对比,响应式设计方案的网页页面因为网页页面合理布局、內容规格产生了转变,因此最后的产出率更有将会与设计方案稿进出很大,必须前端开发开发设计工作人员和设计方案师多沟通交流。



扫描二维码分享到微信

在线咨询
联系电话

020-66889888