使用牛客的思考：不是说你不美，是你这样更迷人

1. 写在前头

大家好，我是方圆，这篇帖子是关于我在使用牛客写作和阅读过程中认为需要优化的点，我觉得作为以文字为输出形式的平台，编辑器和阅读体验非常重要。当然以下的观点仅是我的建议，而不是从一个产品的专业角度来衡量，所以难免有失偏颇，如果暴露问题产生不好的影响，麻烦牛牛私信我，我删了咱私下里说悄悄话也行

2. 不是说你不美，是你这样更迷人

2.1 我是Markdown编辑器的忠实粉丝

• 以下内容以我的这篇帖子为例：面试题：Mybatis中数据库列和Java字段是怎么映射的？

2.1.1 一级、二级标题分割线建议删除

• 在pc端讨论帖一级、二级标题是有分割线的，如下
  

• 但是在App端，一级、二级标题没有分割线
  

• 但是在牛客博客里分割线也是没有的
  

• 为什么建议删除？
  首先我觉得一二级标题有分隔线的目的是为了让内容分隔开，使得内容整洁、排版清晰，也省了自己打分割线，但是我觉得这个初衷已经背离了。因为PC端和APP端风格不统一，我想在APP端分隔两部分内容，就需要手动打一条分割线，那么在APP端是整洁的，但是在PC端就会多出一条分割线，导致看着很乱，如下
  
  所以，重点是统一风格，要么都有分割线，要么都没有分割线，但是我觉得分割线这个真的要去掉，按需自己打，因为分割线又不是很麻烦的操作，想打在哪打在哪，自由一些更好，适应性更强

2.1.2 手动分割线显示太硬核，不优雅

• 上边的那条分割线是手动打的，太粗太深太硬核了，而标题下的分隔线我觉得就很不错，这个修改一下css源码样式就行，可以参考这个

hr {
    margin: 24px 0;
    border: none;
    border-bottom: 1px solid #ddd;
}

2.1.3 建议给代码块功能键添加快捷键

• 这个是在写作体验上来说，想写一段代码，还要用手去点一下按钮，帮我生成出代码框，如果是能快捷键生成的话，写起来更流畅。当然这一点无可厚非，优化了之后体验更好

2.1.4 优化行内代码显示

• 这一点是我最想说的，也是我使用牛客MarkDown最痛点的一个，这一点改了之后，将极大的提高写作效率和文章的清晰程度，而且参照其他各大博客论坛，都有很好的支持这一点（行内代码语法是两个`）

• 牛客平台的行内代码显示是这样的：我爱牛客网,高亮不够

• 我建议改成这样儿 ，为什么说这样能极大的提高写作效率，因为两个`符合很好打，我为了高亮某段内容很快就能实现，相比于加粗的四个星号要方便很多，而且高亮效果更好，如果加粗太多显得文章很脏很乱。下面是我写的一段css样式代码，可以供参考，背景色是各大博客论坛都使用的粉色，我觉得没什么可以挑剔的，而字体红色我是提取的我们平台红名大佬等级的色号，也有我们自己的特点

code {
  color: #f34c54;
  white-space: pre-wrap;
  border: 1px solid #EAEAEA;
  background-color: #f9f2f4;
  border-radius: 2px;
  display: inline; 
}

• 当然之前我也尝试过使用HTML样式红色高亮，发现，太麻烦，太慢了，它的显示是这样我爱牛客网,代码是这样<font face="黑体" color=red size=3>我爱牛客网</fon t>，也就是我要不断的复制这个代码来修改内容，高亮内容多的话，非常耗时，这个我只在这篇帖子 用过

2.1.5 引用框格式

我爱牛客网

• 引用框是我最不喜欢用的样式，在其他平台也是，上面是讨论区引用框的样式，因为它这个灰色看着就很不整洁，我觉得优化一下会好很多，下面是我写的css样式，当然用牛客博客中的引用框样式也很好
  

左边的绿色是我们平台青出于蓝等级的色号，背景色是我自己找个一个淡绿色和它搭配，我觉得这样就好看的多，而且也和牛客网绿色的主题色和代码框很和谐，下面是css源码

blockquote, q {
  border-left: 4px solid #42c1a2;
  padding: 0 1em;
  color: #777;
  quotes: none;
  background-color: #F2F7F2;
}

2.1.6 App端代码显示问题，完全看不懂

• 我觉得这个问题起码得有一个程序员祭天吧（开玩笑），实在太硬伤了，在App端的讨论帖代码完全没法看，我选一段文中的代码，如下
  

• 我靠，这什么排版？到了App端看起来简直是乱码好吧，自动换行，没有那种看代码的滑动框，这个必须得改，真的没得商量。但是这个在App端博客就有很好的支持，如下
  

• 风格统一，风格统一，风格统一

2.1.7 MarkDown同步滚动功能优化

• 直接上图
  

• 我左侧编辑区一直在文末的位置，而右侧浏览区域显示不正常，它还在上边儿图片的位置，这就导致我需要频繁的去右边拖动浏览区查看我最新写的东西的效果，如果优化就太好了

2.1.8 牛客博客文字显示太灰了

• 我觉得它太灰了，文字还是黑色更好一些，难道这是牛客博客特有的文字显示样式，为了和讨论区帖子区分吗？还是黑色更清楚一些

• 而且牛客博客引用框很漂亮，值得肯定
  

2.1.8 总结

• 以上是我使用牛客MarkDown编辑器的痛点，实在觉得写作不方便，而且最近我写文章都是在别的编辑器上先写好，然后复制到牛客的编辑器里发表... 其实像CSDN的编辑器是真的好用，不是说别人家东西好来拉踩，它有我们可以学习的地方，我们进步之后给大家写作带来便捷，优化阅读体验才是最终的结果

2.2 其他的一些小问题

2.2.1 pc端接口防刷提示太硬核

• 有时候点快了，就这样，然后我想看的页面还需要点一下回退才能回去
  

2.2.2 讨论区帖子的封面，如果能手动指定就更好了

• 如题，现在默认它选取的时候第一张图，如果能手动指定封面就好了

2.2.3 app端点赞重复提示

• 这个可能是牛牛怕我耳朵不好听不清吧，一个人的点赞消息会重复推送，像这样儿
  

• 这难道是一个人频繁点赞，取消，点赞，取消吗？哈哈哈，但是赞只加了一次...

2.3 关于App端热门标签

• 发现App端“热门”标签下的帖子内容与PC端“最热”标签下的一致了
  
  

• 之前我在很早之前使用牛客的时候，PC端最热标签下显示的是最新发的一些热帖
  

• 当然在PC端无可厚非了，这些帖子在一个界面上都能看见，但是在App端我一下找不到近期热帖的位置，终于发现在搜索框里边发现了它
  

• 在体验上的一些反馈，首先点进来搜索框，键盘是自动弹出来的，看全部的内容我需要把键盘点一下隐藏，然后第一个标签是“热搜榜”，这个完全能理解，因为点击搜索框要看的东西是热搜，放在第一个标签非常合适，但是我觉得从我的使用习惯来看，点开搜索框搜索东西，我不太会去点击其他的标签，也不太习惯看热帖时先要点开搜索框然后点开第二个标签，来看近两天的热门帖子。最近一段时间工作上不是很忙，我经常刷牛客的热帖，就是打开APP，进入热门标签下一直刷刷刷，像看某乎的热榜一样，我想这更像是使用APP的良好体验。我不太清楚现在热门标签下的推荐机制，它好像什么时候的帖子都有，变化不是很大，这就导致我刷了一会儿就不想刷了，看不到什么新的帖子...

• 建议还是把APP的热门标签恢复到之前展示近期热帖的样子，当然如果说从后台数据上看，在搜索框下展示热帖让更多的用户体验更好，点击更多了，就当成是众口难调吧，我一人的体验要求可能不符合大部分用户的标准，但是在搜索框下看那20条热帖完全没了刷刷刷的那种感觉，总要给大家留刷新热帖的地方吧（哭腔）

3. 在迭代中不断成长

还是要保持无限进步的习惯吧，希望牛客越来越好，以上的一些建议我是真的想让能解决问题的人看见，同时还要感谢@人品酱（上一篇帖子刚感谢过，又来... 哈哈哈） ，之前和酱酱反馈过App端红色高亮不正常显示的问题，很快就帮忙跟进把问题解决了，这一点儿我觉得非常好了。另外牛客的运营和大家的距离真的很近，真的有感觉到运营帮助大家和牛客一起成长，也是让我觉得在牛客写东西真的有人看，让我感觉到我这种普通写手的存在，这是其他平台完全比不了的。

“是不是有些刻薄了”