复盘｜响应式设计心得

前言

响应式的复盘

自适应中的导航栏

    pc和na（wise）端的框架逻辑不同，pc是一种树状的线性结构的导航，有明确的层级概念，而na端通常将导航平铺打散，弱化层级概念。比如面包屑的概念就是pc的典型产物，但是在na端没有面包屑这种概念。
    一般的产品介绍性官网的做法都是做响应式设计来适配pc&ipad&wise等，一些网站选择单独开发pc、ipad、na端，各端内容侧重不同。本次主要讨论第一种响应式设计的情况，如何设计在不同端的导航栏。
    像Paddle和NLP官网这类产品官网，一般都会有介绍文档页，典型的比如tensoflow，pytorch等，这种页面就会出现比较复杂的顶导航+左右栏的情况，一般在响应式设计的时候，导航的切换是交互设计的难点，在切换的时候还需要考虑面包屑的处理。

竞品导航自适应的处理方式
google
    google一般分为3种临界点进行响应式，在na端也显示面包屑。

△宽屏(左) / 中屏(中) / 小屏na端(右)

对于导航的处理方式：
    google将主导航放在收起导航的第一级，左侧导航放在收起导航的第二级，这样做可以节省空间，但是会让na端导航过重，首次使用的用户可能并不能第一时间了解导航结构的关系。

△na的顶导航-一级(左) / na的左侧导航-二级 (右)

pytorch
    同样类型的页面，pytorch只分了2个临界点，选择在na端去掉右侧导航（定位目录）和面包屑。

△宽屏(左) / 中屏(右)

对于导航的处理方式：
    将顶部主导航收起作为btn固定显示在页面右上角，点击后全屏显示，而左侧的导航则默认做为收起的bar，点击后展开浮层（类似下拉菜单），同时在na去掉了右侧导航和面包屑。
    也有不少竞品选择同样的响应式方式，但是将右侧导航融入左侧导航之中座位下拉菜单的浮层展示，这种情况适合左右侧导航的类目不多的情况。

△na的顶导航(左) / na展开后的左侧导航(右)

PC端的常见导航样式

    典型的界面官网首页，一般都由顶部导航和内容组成，复杂的网站可能除了顶部导航条，还有左右两侧的导航栏，比如下图:

    一般网站只有顶部导航，通过面包屑来告知用户所在位置，但是移动端一般习惯将主导航放置于底部，比如常见的微信、淘宝底部的导航。

NA端

PC&NA&Wise的导航

一级导航
    Na端最常见的导航为底部导航，一般底部导航是全局式的，相当于常见PC官网的顶部导航条，NA端导航置于底部有屏幕尺寸、浏览习惯和手握手机姿势的原因，而且近期导航和内容愈发有于下沉趋势，比如snapchat。而一级主导航在Wise端，一般都用抽屉侧拉式，因为Wise端一般由于浏览器条件限制，不会做太多下沉的菜单。 在NA端，也有选用抽屉导航作为一级主导航的app，国内比如QQ，抽屉导航的好处是节省空间，适合瀑布流&对话流式的app。


二级导航
    NA端的二级导航一般为顶导航或者平铺导航，一般新闻类（瀑布流式app）app比较常选用丁导航比如微博app，而且很多情况顶导航恒置顶方便筛选内容，平铺导航作为二级导航比较少见，一般出现在内容介绍页、设置页，比如微信的发现和我。相应PC端的二级导航一般为左侧导航，有些操作类平台还会将左侧导航默认收起。
    Wise端基本同NA端，根据页面内容选择顶导航还是平铺导航，比如说明科普类的页面比较倾使用平铺导航让用户首先了解目录，而内容类页面选择顶导航能够让用户先在网站『逛』（浏览）起来。除此之外，将二级导航作为次级融入一级导航的抽屉导航也比较常见。

当PC页面的结构是顶部主导航，侧边二级导航，而在页面中还有banner的情况下，自适应Wise端的时候，一般页面很难选择顶导航，一种情况会将二级页面融入一级作为抽屉导航展现；另一种情况会选择平铺的层级或展开导航。


三级导航
    NA端的三级导航一般很少出现，卡片式和瀑布流式比较合适；
    PC端的三级导航在说明页、编辑器页比较常见，但是编辑器很少会做自适应，所以说明页的三级导航一般情况下为内容的概览；
    在做自适应Wise的时候，一种情况会使用侧边抽屉导航，作为一二级导航的下一页；另一种处理方式，可以将三级导航作为二级tab、层级这类导航的次级出现。

关于面包屑

    PC和NA在处理界面结构的方式不同，比如面包屑就是典型PC的产物，而在NA端，一般没有面包屑，转而使用下一页、返回这样平铺的逻辑代替。所以当PC的面包屑做响应式的时候，在NA端，通常会去掉面包屑，用平铺的方式展现层级。比如我在做PaddlePaddle官网的时候也是这样处理的。

小结