工作小结 for week2

第二周的工作还是围绕着产品首页的优化，并对现有产品进行了更进一步的认识，此周所获总结如下：

1.响应式和自适应

2.404、502等错误页面设计要则

响应式和自适应

        很早之前就接触到了响应式和自适应的定义，但是也只是限于理论的认识，真正在设计实践中却从未考虑到，也不知该如何应用，这次在进行官网用户反馈页面设计稿交接的过程中便遇到了这个问题，即设计稿的标注如何考虑到终端的不同尺寸，从而进行最优的显示。

官网原图：反馈显示需要点击箭头控件才能翻页显示更多，现在问题即为信息传达不直观。修改后直接以card形式进行表现。但card的长宽则需要考虑到不同的设计尺寸作出比例的调整。

首先来直观感受一波国内外响应式网站和自适应网站的区别：响应式网站（https://thenextweb.com/  https://www.apple.com/cn/watch/）&自适应网站（https://www.tmall.com）。

从定义上来看，响应式设计是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。       

        自适应设计实现原理其实就是为不同类别的设备建立不同的网页，检测到设备的分辨率后调用对应的网页，而响应式则可以实现支持当下不同终端主流视口的信息适配展示，但是为了开发成本也会规定最大值视口和最小值视口。两者的特点可总结如下：

        响应式网站标志：

        1.同时适配web+手机

        2.标签导航在视口接近最大手持终端设备视口时改变为经典的抽屉式导航

        3.网站框架布局会根据视口来调整位置

        优点：

        面对不同分辨率设备灵活性强

        能够快捷解决多设备显示适应问题

        缺点：

        仅适用布局、信息、框架并不复杂的部门类型网站

        兼容各种设备工作量大，效率低下

        代码累赘，会出现隐藏无用的元素，加载时间加长

        其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

        一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

        自适应网站标志

        1.大多只是适配单个终端的主流N个主流视口（2-3个）

        2.当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现横向滑动指示器

        3.总体框架不变，横线布局的板块大多会有所减少

        优点：

        对网站的复杂程度兼容性更大

        实施起来代价更低，

        代码更高效

        测试更容易，运营相对更精准（图片可控性更高）

        缺点：

        在移动端设计大行其道之下，同一个网站，往往需要为不同的设备开发不同的页面，增加开发成本

        其实这是复杂类型网站设计的一种最优方案，虽然增加了开发运营成本，但是换回了更精准的运营、框架扩展度更高，用户加载更迅速，是极其划算的一件事情，这也是自适应设计成为当下主流网站采用的布局方式的重要原因之一。

        那么这样看来，我们公司现有的产品是自适应设计，但是还没有协调的很好，在最小值视口的显示上信息出现了错位，混乱，后期应该会进行调整。

404 502页面设计要则

        这一周还接触到了一些报错页面的设计，404页面为“无法找到页面”，它的出现意味着该网站是可以打开的，只是页面已经不存在，那么人来都来了，总不能让人家就这样走吧，所以该页面需要提供适当的导航让用户去探索我们的产品，而不是以为进了死胡同。502页面的为“网管错误”，解决方法就是刷新，但不是简单的F5刷新，因为这种基本刷新不会触发到服务器，所以无效，而正确的方法是清空浏览器缓存，Ctrl+F5。

所以该类页面的设计，首先是需要搞清楚错误类型，找到解决方法，其次才是设计方法的指导，而关于设计方法，网上资源很多，但初衷其实都是为了排除用户的消极感，并以适当幽默的方式来为用户提供建议，或者为我们自己的后续产品改进收集错误信息。具体方法不加赘述，附此次错误页面设计稿。