当客户提出产品功能移动性的需求时,虽然响应站点并不是一个纯粹的移动解决方案,但在某些情况下,这种方式是非常值得考虑的。我们需要使原有的网站更加灵活,使其在各种主流移动设备中的用户体验。响应式网站设计需要考虑过程。
步骤1:确定要兼容的设备类型和屏幕大小
通过用户调研,了解用户使用的设备分布情况,确定需要兼容的设备类型和屏幕大小。设备类型:包括移动设备(手机、平板电脑)和个人电脑。对于移动设备,在设计和实现时应注意手势的功能。屏幕尺寸:包括各种移动屏幕尺寸(包括水平和垂直)、各种平板电脑尺寸(包括水平和垂直)、普通电脑屏幕和宽屏。需要考虑的问题:当一个页面以被动方式设计时,它的适用大小范围是什么?例如,搜索网站的搜索结果页面可以从手机扩展到宽屏,而主页由于结构复杂,直接迁移到手机上不太现实,所以直接设计手机主页。根据用户需求和实现成本,选择合适的尺寸。例如,对于一些功能操作页面,用户一般不需要在移动端进行操作,因此不需要进行响应性设计。
步骤2:制作线框原型
为了为确定的大小制作不同的线框原型,需要考虑页面布局如何变化,内容大小如何缩放,功能和内容如何删除,甚至需要为特殊环境进行特殊设计。这个过程需要设计师和前端开发人员之间的密切沟通。
步骤3:测试线框原型
将图片导入到相应的设备中进行一些简单的测试,可以帮助我们尽早发现易访问性、可读性等方面的问题。
步骤4:视觉设计
注意,移动设备的屏幕像素密度不同于传统的计算机屏幕。在设计时,要保证内容文本的可读性、控件的可点击区域等。
步骤5:前端实现
与传统的web开发相比,响应式设计的页面布局和内容大小都发生了变化,最终的输出更容易进出设计稿,这就需要前端开发人员和设计人员进行更多的沟通。