浅析知乎设计模式

fruit

　　知乎是一款非常经典的网络问答应用，从Web端初创，并成功拓展到移动平台。
　　正因为其以内容生产和阅读为主的定位，整体交互设计上更加看重信息的发布和呈现环节，以及如何让用户尽可能多的浏览。
　　本文将分别分析安卓、ios 和 web 三个平台上知乎应用的设计模式，来看一款应用是如何做到平台设计规范与产品自身特点的平衡。
　　iOS
　　知乎的 iOS 端与安卓端略有不同，遵循 iOS 设计规范进行设计。
　　主要页面布局可分为三个部分：
　　1. 顶部导航及工具栏：显示标题，搜索及其它操作控件，以及标签式二级导航　　2. 中间内容部分：以垂直列表为主的内容显示　　3. 底部标签栏：一共 5 个一级导航入口通过点击不同的标签进行快速切换
　　|

　　设计模式-导航
　　采用的是底部标签栏一级导航与顶部标签式二级导航结合使用的方式。　　设计模式-列表
　　知乎本身的定位使得其基本采用的都是垂直列表，方便信息的浏览。但是知乎的垂直列表中每一条信息的格式并不单一。首先，每一个条目都包含问题、答题人及部分答案内容，可以让用户快速判断是否需要点进去阅读全文。其次，如果回答中有图片，就会将缩略图显示在条目的右侧，如果有视频，则会将视频显示在每一条的上方。
　　优缺点分析
　　优点：增加阅读效率，消除用户的阅读疲劳，用图片和视频去吸引用户的注意力，给出阅读奖励，使得用户会不断地往下读取新的条目。
　　缺点：单屏可呈现条目变少；页面布局显得凌乱 。
　　| 想法
　　
　　设计模式-导航
　　想法页的顶部是标题+操作控件的样式，一级导航依然以底部标签式导航为主。　　设计模式-列表
　　想法页使用了比较更多的列表类型，在顶部导航栏下方是一个小图罗列式的轮播面板，下方是两个横向列表，点击会各跳向一个全新的页面，然后下方是垂直列表。
　　优缺点分析
　　优点：页面内样式丰富，可以放入更多类型内容。
　　缺点：发现页我之前基本没用过，主要原因就是理解不了这块的内容是什么逻辑，感觉几种内容堆砌在一起，也不知道垂直列表内的内容是哪里产生的。我觉得这与它的二级导航结构不清晰是有关系的。
　　| 大学

　　设计模式-导航
　　大学页的功能类型于电商，是为了销售课程，所以这一页的布局第一感觉跟我们经常逛的淘宝，京东非常类似，而与风格相差甚远。从导航角度讲，顶部依然是标题+操作控件的样式，并使用了标签式二级导航。之后使用网格列表作为三级导航，对各个专题进行划分，再往下进入内容列表部分。
　　设计模式-列表
　　在三级导航之后，均使用垂直列表来展现课程摘要。
　　优缺点分析
　　优点：符合电商类页面的使用习惯，网络列表式导航能充分利用界面，使得在有限的空间里可以放下尽可能多的分类。
　　缺点：与之前几个页面的风格不是很统一。
　　| 消息

　　设计模式-导航
　　顶部为标题和操作控件，其下是一个列表式二级导航，但是只有一个入口。　　设计模式-列表
　　使用垂直列表来呈现通知列表。
　　优缺点分析
　　优点：整个页面列表格式统一，看上去很整齐。
　　缺点：私信部分做了一个单独的列表导航，其在结构上与下方其它消息为并列关系，猜测用意是强调用户间的互动，如果用分段式二级导航或者标签式二级导航加以区分，结构会更清晰。另外，此处标题居中，想法页的标题左对齐，在一个 app 中出现两种标题对齐方式也是不恰当的。
　　| 我的

　　设计模式-导航
　　此页面大量使用了网格列表二级导航。
　　设计模式-列表
　　除了网格列表二级导航，在下方卡片部分，基本使用了小图罗列式的轮播面板。
　　优缺点分析
　　优点：网络列表式导航能充分利用界面，使得在有限的空间里可以放下尽可能多的功能，同时轮播面板也有利于多个同类型内容的呈现。
　　缺点：暂时没有想到。
　　Android
　　改版后的知乎，大多数页面 iOS 端和安卓端已经几乎完全一样，所以这一部分仅对不同的部分做一些分析。

　　前三个二级导航标签的内容完全一样，只是视频标签仅出现在 iOS 端，没有查到确切说明，猜测此举是开放给部分用户的灰度测试。

　　上面两个页面除了标题字体和字号的差别，基本是一样的。

　　这是两个一模一样的页面。

　　这里非常奇怪，安卓的一级导航名称为“通知”，但是页面的标题仍然是消息。安卓在这里把标题左对齐，与想法页取得了一致，是做的好的方面，但是一级导航名称与页面标题不一致，未免让人迷惑。其它元素，两个页面一摸一样。

　　这个页面除了图标样式不一样，其它部分基本一样。安卓 7.1 之后引入了圆形图标，相信安卓端的这个设计是出于对安卓设计规范的尊重。
　　综上，我们可以看到知乎大多数页面的布局和控件，安卓和 iOS 是基本一样的。我想这 与近年来移动开发技术上的变化是有关联的。现在越来越多的应用使用的是hybrid的模式， 一部分使用原生，一部分使用 RN 或者 H5 来生成，前者要求尽可能使用原生控件，而后者则可以一套样式同时应用于两个平台，节省设计和开发时间，相信会有越来越多的 app 通 过这样的方法达到安卓和 iOS平台使用体验的一致性。
　　Web　　
　　知乎一开始是从 Web 端开始的，它的 Web 端样式是非常典型的问答类和内容发布类站点的样式。

　　导航栏：包含 logo，一级导航和操作控件
　　工具栏：可以快速进行常用操作
　　内容列表：采用垂直列表的方式罗列内容
　　其它常用功能
　　个人中心相关功能
　　网站信息
　　整体页面排布比较整齐朴素，可以很好满足信息浏览的诉求。
　　但是当我点入‘发现’页面时，发现页面风格变化非常大，顶部导航的数量也从三个变成了四个，同时标题字体和颜色与也完全不同。这会使用户感觉不是在一个网站中浏览，影响整体用户体验。

　　结语
　　每一个App的设计模式都是为其产品定位服务的。从产品体验来看，知乎的iOS　　端和安卓端体验上基本是一致的，但各自遵循了不同平台的设计规范，各有优缺点。
　　通过设计模式的分析，可以更好的理解不同平台的设计规范，同时也更加深刻的理解交互如何为出色的产品体验加持。如果选取三个平台的典型应用进行对比分析，还可以结合产品定位、场景、需求和功能等层面，深入分析和了解选择不同页面结构和设计模式的原因。