知乎这款问答应用一直以来受到了很多人的青睐，人们可以在这里学习知识、分享知识、交朋友。以下是我对这款软件的一些界面还有交互逻辑上的一些想法，不足之处望大家积极指出。
对于图中出现的人和回答，本人无意冒犯，如果侵犯到了您的隐私，请私信我，我会第一时间删除，谢谢。 本人很喜欢知乎这款应用，无论从设计还是内容上都是一款十分优秀的APP。文章中涉及到的观点，并无恶意，只是一些个人的小想法，还望理解谢谢。
另：截图来源
原图：尺寸1080x1920 改版：尺寸720x1280
知乎版本：4.9.1（439）
设备：Mi-4c
安卓版本：5.11
MIUI版本：7.0.11.0
一、目标
本次重设计，在不改变整个交互结构的基础上，着重解决的问题有以下3点：
1.减轻长时间阅读造成的视觉疲劳，使界面更通透，更轻；
2.对一些个人感觉交互不合理的地方进行修改；
3.在原有图标的基础上进行微调，使之更统一；
二、知乎信息结构图
大致梳理了一下知乎的结构，重复比较多的模块单独列出，如回答模块和文章模块。
这只是单向的，各个分支末端的联系并未标明。
三、具体页面重设计及想法
1.首页
1.图标：原版的底部标签栏“主页”和“发现”是正负形的样式，中间的“通知”有间隔也算是正负形吧，后面的两个不是正负形的样式，所以我在不改变原有含义的基础上对“消息”和“更多”进行了调整。
“消息”的中间加了两个气泡（我知道你萌想说微信 = =）
“更多”换成了四个圆角矩形的形式
“发现”中间的指针加上了圆角
并且对这五个图标的激活和未激活状态增加了小彩蛋（个人兴趣）如图3-1所示。主页对比如图3-2所示。
另外原版的“搜索”图标用的是谷歌爸爸的默认MD图标，为了统一样式，重绘成了带有圆角的样式，还有知乎Live的闪电，也做了同样的改动。
2.文字
原版每个模块的问题采用的是粗体，内容和提示文字采用的是正常体，除此之外还有大小和颜色上的不同。这样做的目的是为了更好的区分这些元素，而且更好地突出标题。
但是，我个人认为，这样做会显得界面很笨重，而且在有的iOS手机上会显得字特别大，影响阅读体验。因此，我舍弃了通过粗细区分字体的做法。所有的字体都采用正常粗细，通过颜色的深浅和大小区分各个元素。
这个样做的结果可以使用户快速浏览标题找到自己感兴趣的内容，并且减轻阅读负担。
3.布局
每个模块的赞同、评论和关注问题放在了屏幕的右侧，这样做的目的是为了更好的从上至下浏览题目，减少快速浏览时造成的中断，而且符合人们左右阅读的习惯，即看完标题，大致浏览内容后再看到赞同评论的信息，然后视线再回到左侧浏览下一条问题。
而且点击“关注问题”变成“已关注”的状态，由于是文字右对齐，位置会有个向右的动作，而且文字会变色，可以给用户更好的提示，增加人机交互。如图3-3所示。
对于知乎的新功能知乎Live,原版是可左右滑动浏览推送的Live信息，仔细观察可以发现“查看全部Live”的方块没有显示完全，这样做的目的是为了提示用户右侧还有相应的信息。但是在我使用的过程中最多推荐过两条有关Live的信息，加上“显示全部Live”一共三块。而且，右上角的“X”号我个人感觉没有存在的必要，因为如果用户感兴趣，他就会点进去查看内容。如果对这场Live不感兴趣，他会做如下选择：①右滑查看其它live ②点击查看全部Live进入下个界面。如果对这块内容不感兴趣，就会直接下滑浏览其他内容。
但是，知乎这样做有他本身的原因，即提高新功能的曝光率和点击率，为用户提供更多的选择性。
从界面的整体性考虑，我舍弃了左右滑动的这种方式，规规矩矩的用一个推荐Live和一个查看全部Live的模块，然后和左右基线对齐，同时把“X”号去掉。同时新增一个进入知乎Live的入口，即点击“知乎Live”也可进入Live界面，因为原版点击这里没有任何反应。这样进入知乎Live就有四个入口：①屏幕右上角图标 ②知乎Live ③推荐模块 ④查看全部Live
搜索框大小做了适当调整，左边和基线对齐，右边和Live图标距离保证不变，整个框依然作为可点击区域不变。Live图标左移，和右基线对齐。
4.FAB按钮
FAB按钮的颜色，我认为和整体不太搭，而且这个黄色只用在了各个界面的FAB按钮处，其他界面再也没有看到这个颜色。所以我尝试了更跳跃的红色作为FAB的颜色，和蓝色为对比色，更加突出按钮。如图3-4所示。
不知道是不是有bug，激活FAB时经常出现“X”号消失的情况。
首先，我对将遮罩的颜色从白色换成了黑色，使画面更柔和。
接下来，我对弹出的三个按钮图标进行了一些调整，全采用了正负形的形式，并且使圆角更明显，同时对提示文字作了修改（强迫症）。
5.其他
每个模块的更多里除了“屏蔽问题”和分享外增加了“屏蔽话题”选项。如图3-5所示。
有这个想法的原因是有天我发现，我很久以前关注的某个话题推送的内容我都不太喜欢，但是我想取消关注，我需要做如下步骤：底部标签栏更多→我关注的→话题→找到对应话题取消关注。增加这个选项之后，我只需要做：更多→屏蔽话题。然后就可以取消对应话题的推送了。
整个界面的背景采用灰色微带蓝色，同时把每个模块的阴影去掉，只保留导航栏、标签栏、FAB以及弹出模块的阴影，既有层级，界面本身显得干净。
2.发现
1.推荐
顶部banner在原版是可以滚动的，但是没有任何元素可以提示banner的个数。左右滑动可以切换，与导航栏的滑动切换有冲突，但是并没有特别大的影响。
所以我修改了顶部banner和导航栏之间的距离，增加了banner和问题模块的距离以区分两者。同时在 banner上增加了提示banner个数的小圆点，告诉用户一共有多少个，虽然用户不一定会全部看完，但这样做可以减少用户对于未知的不适感。
顶部导航栏的切换下划线，我改成了圆角矩形，与底部标签栏的圆润图标统一。切换方式依然是点击或者左右划屏幕，功能上不做改变。
FAB按钮做颜色上的改变，不改变其随机跳转问题的功能。
2.圆桌
舍弃4:3的图片比例，使用16:9比例，与原版保持一致，使一屏内显示更多内容，同时是画面更精美，不做改动。
3.热门
除了之前提到顶部导航栏之外，其他不做改动。
4.收藏
收藏界面我做了一些调整，将头像用户名字和关注人数对调了地方。因为我觉得，用户浏览这个地方的主要目的有：①看收藏夹的名字是不是自己喜欢的（如果有简介，会先看简介）；②再看这个收藏夹是不是受欢迎来决定是不是点击进去浏览。这样可以使用户快速上下浏览。
2.通知
1.通知
首先，原版中未读消息的字体会比已读消息的字体颜色要深，这样可以提醒用户哪些是未读的，哪些是已读的，这样的做法既简单右易懂，我保留了这种形式。在此基础上，我把左上角的未读提示，即“2条未读”也设计成了这样的形式，当有未读消息的时候，文字是较深一级的颜色，当没有未读消息的时候，文字用较浅一级的颜色，以此来区分。尤其是通过右侧的图标将所有通知消息变为已读时，除了问题字体会变色，未读提示也会变色，这种统一感会用户更强烈的感觉。
然后仔细观察原版中的底部标签栏，我明明有未读消息，但是通知图标下方的小圆点不见了，有种小圆点君翘班的既视感（= =）。至少在我看来，即使跳转到通知页面，在用户没有读完所有内容或者手动清除未读消息之前，小圆点君不应该凭空消失。
这里想说点题外话，有些APP的未读提示你点开之后要不就是提醒你VIP充值，要不就是广告，不只是这样，有时候他的路径藏得特别深，总是就是很麻烦，在中立的立场上我很理解这种做法，但是站在用户的角度或者一个纯粹的设计师的角度来讲，这样的做法实在是有点不妥。但是还是要平衡用户体验和商业价值方面的平衡，也是你萌设计师要做的事情不是吗？
最后我把手动标为已读的图标加上了圆角，是整体图标统一。
至于最下面的一个“回答了问题”为什么是右对齐基线。因为有的用户的名字实在是太长了。这段有点枯燥，不想看的可以略过……知乎的机制应该是这样的：①1人或者2人回答问题，这些用户的用户名都会显示出来②当有3人及以上会显示2个人的名字，之后用等n人代替。总结来说就是，最多显示2个人的用户名。然后我们分析，没有出现等n人，说明是2人或者1人，然后有点点点，说明不是一个人，所以应该是2个人。结果就是2个人，我还没碰到过一个人的用户名超过一行的情况。
还有最重要的一个地方，我为什么要把原版里一整块切割成了一小块一小块的，这点单独讲比较困难，所以我放在最最后面。
2.赞与感谢
不做改动
3.粉丝
不做改动
3.私信
稍微修改了几点：
①原版中点击FAB跳出来的是回信的界面，因此我觉得既然发现界面里的FAB按钮可以改成“随机”的图标，那么我认为这里应该也可以。我用铅笔代替了加号，这样可以使用户更直观的理解FAB按钮“回信”的功能。
②原版中“私信”应该是和16dp的基线对齐的，但知乎的头像没有和16dp对齐，整个界面看起来不太规整。所以我把导航栏的“私信”两个字对齐基线72dp，统一标题左侧基线，为之后的图标预留位置（我想这样会减少一些开发大哥的工作量吧= =）。同时知乎的头像放大，对齐16dp的基线。
如果是纯粹的MD风格，大部分导航栏文字左侧都会有图标。这里的话看个人选择吧，我选择的是这样，当然原版中的也很好。
5.更多和个人中心
把这两个内容放到一起更容易整理思路。
首先，在原版的“更多”界面里，有“我的关注”、“我的收藏”、“我的草稿”、“最近浏览”、“我的书架”、“我的Live”、“我的值乎”这几个部分作为一块，然后下面的是“夜间模式”和“设置”。
单看这个界面，从图标统一的角度来看，“我的书架”是立体的，而其他都是二维的，用在这里不太贴切，所以我把这个图标做了以下修改，换成了几本书垂直放置的形式。“最近浏览”加粗了中间的指针，“我的值乎”加上了轮廓圆。
我觉得这里比较贴心的一点是，切换夜间模式的按钮很好找，而且用了切换开关摆在了很醒目的位置，是作为一款阅读类App必不可少的一项功能。
然后对比我的个人中心页面，我发现这里面稍微有一些问题。
①图标不统一
两个“我的收藏”一个是五角星，一个是数钱==书签，我本来以为这两个里面的内容会有所不同，可是点进去之后发现内容是一样的。所以我想统一成一个图标。对比其他图标可以发现，有圆有矩形，为了统一，我选择书签和五角星的结合作为“我的收藏”的图标。
②内容重复
“我的Live”、“我的收藏”出现了两次。“我的收藏”的重复，是因为他是很常用的一个模块，在“更多”里出现，会使用户第一时间找到，不用再点进主页寻找。“我的Live”，个人理解为要增加曝光率吧。
接下来，我对比了其他人的个人中心，发现他人的个人中心和我的个人中心有些区别。增加了他的值乎模块。因此，我将这两大部分重新整理了一下，按照和“我”的相关度分为了3类
①专属于我的，别人看不到也不可以用的内容：“我的草稿”、“浏览历史”、“最近浏览”、“我的书架”
②专属于我的，但是别人也可以用的功能：“夜间模式”、“设置”
③双方可以共享的内容：“我的关注”（包括人、收藏、话题、问题、专栏）、“我的收藏”、“我的回 答”、“我的提问”、“我的文章”和“我的Live”,另外开通值乎功能后还有“我的值乎”
其中①②放到更多里，③放到个人中心。同时还要考虑到用户常用的几个功能：“我的关注”、“我的收藏”也放入更多里，于是就有了下面的分类图3-15。排序方式的依据为用户最想的功能和整齐度两方面。
可以看到，“更多”界面的内容可以在一屏内显示完，用户不用再犹豫是下滑找他想要的内容，还是进个人中心找他想要的内容，节省了用户的时间成本。
最后，把图标的中心和头像的中心对齐，后面的文字也对齐，至此“更多”界面完成。
下面是“个人中心”界面
原版里分为了“个人主页”和“详细信息”两大部分，对比这两个部分会发现“点赞”和“感谢”两个图标重复。所以我把详细信息里的四个图标放到了个人主页中，并加上了圆角。
这里我做了一个较大的改动，我把详细信息里的其他内容去掉，用一个新的页面展示，这个页面需要点击头像进入。而原版中点击头像之后弹出的是修改或下载头像按钮。
这样个人中心就只有一个页面，关注的话题等移动到了之前标签的位置，然后对齐。
在第一个模块增加了个人资料的小字提示，右边的关注按钮仅作他人观看时的示意。
第二个模块去掉了“我关注的专栏”一项，整合到“我的关注”里，不论想查看自己或是别人关注的任何东西，都可以在这里找到，理顺一下逻辑。
其他方面，数字右对齐，最近动态模块采用首页中的模板。
至此五大块内容已经重设计结束。
6.搜索
搜索主界面（图3-17），改变了搜索框的高度，使其和主页中的搜索框高度一致，长度增加，使返回图标左右留白相同。改变导航栏下划线样式，最近浏览图标“更多”里使用同一图标。
搜索内容界面（图3-18），原版中输入搜索信息后，“最近浏览”模块会消失。这种情况下，如果用户想再次进入“最近浏览”界面，有三种选择：①清空搜索框内容；②退出搜索界面，回到主页再次点击搜索；③退回主页，切换到“更多”页面，点击最近浏览。我的想法是，在搜索出相关内容后，依然保留“最近浏览”模块，这样用户就会多一种进入“最近浏览”的入口。但是我不知道这样实际开发的时候是否可以实现，希望有了解的朋友给予解答。之后的问题模块依然是把赞同和评论右对齐，使用户可以快速浏览感兴趣的问题，较少赞同和评论造成的阅读中断。
搜索人界面（图3-19），保留了“最近浏览”模块。
7.问题界面和我的收藏
1.问题页面
从上往下看，首先是问题标签，我觉得没有必要把该问题所属的话题全部放在上面，向左向右的小箭头虽然可以滑动标签，但是对于我来说，我几乎没有滑动过。所以我只列出其中四个，并且可以在屏幕中显示完全，去掉了小箭头。
“关注”人数图标与“更多”里的保持一致，“评论”为了和“私信”区分，使用圆角矩形，并与回答详情页中保持一致。右侧的蓝色关注按钮保持整个APP使用这一种。
邀请回答和写回答图标加入圆角。
回答模块的文字使用深一级，因为在这个页面，用户的主要目的是为了阅读回答，找到自己感兴趣的点进去浏览详情。赞同评论时间三项右对齐，使用户快速浏览回答。
2.回答页面
原版中使用了“X”号作为返回的图标，我统一规范为箭头作为返回符号。
回答者模块，保持和搜索人的页面中的模块一致。
底部功能图标，“收藏”换为书签形式，“评论”与上图“评论”保持一致。这里我去掉了没有帮助的按钮，收进了屏幕右上方的更多里。
3.评论页面
4.收藏页面
图标方面，“关注”和“评论”图标与问题页面的保持统一。
“共406个回答”移动到下层。
每个模块没有像前面那样分割开来，而是用1像素的线分割，这里我想说一下自己的想法。
在整个知乎的界面里，模块按照操作可分为3类：
①只能点击，跳转另一个页面；
②只能点击，同时当前页面跳出进一步操作页面，如主页每个模块的“…”
③除了点击之外可进行其他手势操作，如长按、滑动等。
大部分的模块都是属于类别①，如图3-24所示。这些所有界面里的模块，只能进行点击，然后跳转。
属于②的只有主页的每个模块，点击“…”更多，可以屏蔽问题或分享。
属于③的有两个页面，一是评论页面，二是我的收藏页面。
评论页面，单击和长按可弹出“回复”、“举报”等功能。
收藏页面，左滑可已删除该收藏。但我对原版中的左滑不太喜欢。我第一次不小心左滑，发现他突然就消失了，吓一跳，然后下面弹出如果误删可撤销操作，但是停留时间很短，还没等我点击提示就消失了。从此之后下滑都小心翼翼的（= =）。所以我换为左滑会弹出垃圾箱图标，再次点击可删除，防止用户误操作。但我这样做，用户想大面积删除的时候会影响流畅度。只能说两种方法各有利弊吧。
所以我把①和②归为一类，这类只能进行点击操作，这类模块用留白分割开来。按照Material Design的规范，相似内容且操作不超过三种的模块应使用瓷砖，也就是用1px线分割，这样可使用户更流畅的浏览。但是，我为了符合我规定的分类，用了自己的方法，即留白。
③归为另一类，这类可进行其他手势操作，如长按，滑动等，这类模块用1px线分割，表明可进行其他操作。
所以我重设计的界面里使用留白分割的原因就是这样，另一方面也是为了使页面显得更加干净。
四、总结
这次重设计的页面是知乎常用的几个界面，当然还有其他页面，比如登录注册，Live详情页面，值乎详情页面没有进行重设计。
通过这次的一番思考，更加深刻地认识了如何从整体上把握界面的统一性，以及交互逻辑在界面设计中的重要性。还有一款产品从“0”做到“1”是需要付出很多努力的，远比我这样的对“1”加工要辛苦得多，请善待你萌身边的每一个设计师。
