• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

IT兄弟连 HTML5教程 响应式网站的设计流程

当前位置：网站建设 > 优化推广

　　当客户使用者提出商品产品功能移动化的需求时，虽然自适应响应式网站站点并不能算是一种纯粹的移动化解决方案，但是，在某些情况下，这种方式是非常值得考虑的。需要先花些心思将原本的网站站点打造得更具弹性，使其在各种主流手机端移动设备中都拥有尽量优秀的用户体验用户评价。自适应或响应式网站设计规划需要考虑以下流程。

　　第一步：确定需要兼容的设备分类类型、屏幕尺寸。

　　通过用户使用者研究，了解用户使用者使用的设备分布情况，确定需要兼容的设备分类类型、屏幕尺寸。设备分类类型包括包含手机端移动设备（移动端手机、平板）和PC。对于手机端移动设备，设计规划和实现的时候要注意提升增加手势的功能。屏幕尺寸包括包含各种移动端手机屏幕的尺寸（包括包含横向和竖向）、各种平板电脑的尺寸（包括包含横向和竖向）、普通计算机屏幕和宽屏。需要考虑的问题是：某个网站页面进行自适应响应式设计规划时其适用的尺寸范围有哪些？例如，某检索搜索网站站点的搜索内容结果网站页面，跨度可以从移动端手机到宽屏，而该首页由于模版结构过于复杂，想直接迁移到移动端手机上不太现实，不如直接设计规划一个移动端手机版的首页。结合用户诉求需求和实现成本，对适用的尺寸进行取舍。例如一些功能操作的网站页面，用户使用者一般没有在手机移动端进行操作的需求，没有必要进行自适应响应式设计规划。

　　第二步：设计制作线框原型。

　　针对确定下来的几个尺寸分别设计制作不同的线框原型，需要考虑清楚在不同尺寸下，网站页面的部署布局如何变化，信息内容尺寸如何缩放，功能、信息内容的删减，甚至针对特殊的环境作特殊化的设计规划等。这个过程需要设计规划师和前端建设开发人员保持密切的沟通。

　　第三步：测试线框原型。

　　将image图片导入相应的设备进行一些简单的测试，可帮助我们尽早发现可浏览访问性、可读性等方面存在的问题。

　　第四步：视觉设计规划。

　　注意，手机端移动设备的屏幕像素密度与传统计算机屏幕不一样，在设计规划的时候需要保证信息内容纯文本文字的可读性、控件可单击区域的面积等。

　　第五步：前端实现。

　　与传统的Web建设开发相比，自适应响应式设计规划的网站页面由于网站页面部署布局、信息内容尺寸发生了变化，所以最终的产出更有可能与设计规划稿出入较大，需要前端建设开发人员和设计规划师多进行沟通。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。