赤兔云为您分析响应式网站页面设计的过程。

首先:确定要兼容的设备类型和屏幕大小

通过用户调查,我们可以了解用户使用的设备的分布情况,并确定需要兼容的设备类型和屏幕大小。

设备类型:包括移动设备(手机、平板电脑)和PC,对于移动设备,在设计和实现时要注意手势的功能。

屏幕尺寸:包括各种手机屏幕尺寸(包括水平和垂直)、各种平板电脑尺寸(包括水平和垂直)、普通电脑屏幕和宽屏。

设计尺寸:1920-1280、1024、960、800、768、640、600、540、480、320

需要考虑的问题:

响应式设计页面的适用尺寸范围是多少?比如1688搜索结果页面可以从手机延伸到宽屏,而1688主页由于结构复杂,想直接移动到手机上,这是不现实的。所以可以直接设计一个移动版的主页。根据用户需求和实施成本,选择合适的尺寸。比如一些功能性的操作页面,用户一般不需要在移动终端上操作,也不需要进行响应式设计。

第二步:制作线框原型

为了根据确定的尺寸制作不同的线框原型,需要考虑页面布局的变化、内容大小的缩放、功能和内容的删除,甚至针对特定的环境进行特殊的设计。这个过程需要设计师和前端开发人员之间的密切沟通。

第三步:测试线框原型

将图像导入到相应的设备中进行一些简单的测试,可以帮助我们尽快发现可访问性和可读性方面的问题。

第四步:视觉设计

请注意,移动设备的屏幕像素密度不同于传统的计算机屏幕,因此需要确保内容和文本的可读性、控件的可单击区域的面积等。

第五步:前端实施

与传统的web开发相比,响应式设计的页面布局和内容大小都发生了变化,因此最终输出的结果更可能与设计初稿不同,这就需要前端开发人员和设计师之间进行更多的沟通。