最近在做一个云存储网页响应式布局设计项目。梳理一下最近一些感悟，也是一次对此次项目的回溯。
首先响应式布局是什么？通俗的理解大家都认为是通过不同尺寸的屏幕，查看网页，能够达到最佳的用户体验效果。那其实呢，Responsive layout简而言之，就是一个网站能够兼容多个终端响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
项目前期，也参考了主流的设计规范资料Google的Material Design System和IBM的Carbon Design。站在巨人的肩膀上，看到的视野也就更宽更远。但真要落实到实际项目中，其实还是难免会有差距，会遇到各种阻碍和困难。我们的网站又该如何去设计呢？
第一，要明确设计思路。我们是基于哪一个网站去做响应式，现状是什么？要达到什么样的体验效果，也就是设计预期或者叫设计目的。比如。我目前是做云空间的一个网站，现状是已经有一个桌面web端的网站。需求是想要改善在不同设备体验体验最佳效果效果，但是不用开发多套代码去适配不同的设备。那么我们就要分析怎么样才能做到不同设备端都能体验效果好，就是需要用到响应式布局设计的思路。
第二竞品分析。通过筛选竞品发现跟云服务相关产品的有icloud、小米云服务，谷歌云盘就是Google drive，one drive微软的， Drop box,...
分析了一圈发现icloud苹果做的适配和one drive是比较理想的比较做的比较全面。
那我们怎么分析呢？我一开始也在思考这个问题不知道怎么着手开展方案或者是分析报告。我们还是从用户的角度去思考这个问题，想象一下你要喝你的爸妈想要说明白什么是响应式布局这个事情？那就相当于向用户讲一个故事。
所以我在方案汇报里面：先弄清楚什么是响应式布局它到底是长什么样子的？然后分析总结一下竞品的一些特点还有哪些竞品的一些优点。最好要分析出来可以参考的点。附上图
其实响应式设计布局先要弄清楚整个框架是什么样的一个布局。设计参考点一：大部分的精品都是大概有2~3个尺寸的一个布局变化也就是说存在一个到两个的断点。什么是断点？就是你网页的尺寸到达某一个值它就会改变这个整个页面的布局。就是我们要先弄清楚我们需要几个断电我们需要几个尺寸的布局。那这个断点又是在哪里开始呢？这个需要2个依据：主流设备屏幕尺寸，页面内容组件元素的布局。依据现有的一些主流的一些设备屏幕尺寸比如说最小的拍的可能是768pix，那么你如果预想是配最小iPad的这个尺寸断点就不能小于这个值；设计参考点二：这就是一些随着尺寸变化组件上的一些特点。组件长宽可变化组件位置可移动换行组件大小可变组件的间距可变组件可以取优先级隐藏或显示可依据设备特点或者是交互行为适当调整交互方式这个是一句观察和分析竞品得出的一些结论。
第三，框架布局设计方案分析通过框架的一个布局变化，可以记住数字标注确定优先级，就是依据优先级和屏幕的尺寸变化来决定显示哪一个模块。
第四，具体的UI方案分析依据现有的页面的基本功能特点，页面分模块区调整布局。可以记住透明的色块来表示页面组件的一些变化过程，比如导航是一块，操作栏是一块，目录是一块...非常清晰明了形象具体的描述了设计方案的一个调整方向相关业务人员也可以根据业务，通过模块化的组件去调整自己想要达到的效果，沟通上效率比较高。可以先解决主页面，通过多个方案去评审，后续再补充二级页面或是其他页面的状态。这样可以提高评审和工作的效率。
第五，定义合适的栅格系统。依据业务需求和主流设备规格，定义出适用的栅格系统。主要是定义出页边距，栏数目，栏间距。
注意事项：需要注意的是页面定义随着页面宽度变化，组件如何变化才是最合适的。还有一些特殊的业务要求，比如，在手机端网页尺寸需要隐藏某个功能入口，或者涉及功能架构逻辑的调整等。这些变化大部分单纯地按照响应式布局开发是无法做到的，那这些就需要针对设备做处理。不建议有太多的针对设备处理的问题，这样会增加开发实现的复杂性以及工作量，也违背了响应式设计的初衷：就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
只是一些个人经验的总结和分享，期待与大家互相学习交流。
具体的栅格基础布局和元素详细可以参考Google’s Material Design System。
资料参考：推荐一本相关参考书籍《Grid Systems》
IBM’s Carbon Design System
https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals
Google’s Material Design System
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins
网友评论