实例解析3种文档大屏适配方法

选择「超宽」模式后，文字部分的宽度应该放开么？

　　在我原本的设计中，即使「超宽」模式文字部分的宽度也是有限制，非文字部分宽度才可以自适应宽度。这个设计在评审时收到了两拨截然不同的反应。

　　△ 原始设计方案 : 「超宽」模式下，文字仍有固定宽度

　　工程师：为什么文字宽度要收到限制?收到限制了还能算什么超宽显示?我们想要 Wiki 那样的排版!

　　设计师：纳尼?!文字太宽阅读起来并不舒服，不仅可能要转脑袋，还容易读串行!有相关理论研究表明@……¥#*#@%&¥(@%……#)#*&#%#*#()……

　　工程师：并没有这种感觉……

　　设计师：……那可能是你们的职业习惯，但是考虑到大部分普通用户，我们还是要#……@&……¥(……@……#(#……¥&*92261038#&……

　　工程师：可是这样显示我可以获得高密度信息，加快阅读速度，更快寻找到重点内容。

　　……

　　在三个小时热火朝天的争论中，最后决定先放开对文字宽度的限制。

　　作为设计师我自己的思考是，的确看到其他同类产品有提供放开文字宽度的模式，比如 Confluence，Notion;又看了很多语雀文档，发现真正需要超宽显示的文档(比如包含一个超宽表格)的数量并不是很多。

　　所以我选择保留自己的意见，尊重团队的决定，也再听听更多用户的声音，看看之后是不是还需要再做迭代。

　　△ 讨论后的设计方案：「超宽」模式下，文字宽度自适应

　　所以经过上述思考，语雀文档的大屏适配方案基本敲定：对文档整体进行适配，提供「标准」和「超宽」两种模式，「标准」就是维持现状，「超宽」就是所有内容根据页面宽度自适应。虽然不是我心中最理想的方案，但是总算可以先解决一部分问题。

　　设计工作中，往往需要面临过往的历史债、资源有限下的取舍以及对不同意见的权衡，而这也是设计的魅力所在。

　　2. 功能入口设计

　　对于工具型产品，如何能够让用户及时发现新增加的好功能，永远是个值得探索的问题。

　　在编辑器中，设置类功能往往都藏在一个「…」按钮。因为全局类的设置并不是一个高频操作，不需要像工具类的按钮一样，明晃晃地在工具栏上占有一席之地。

　　可是问题来了，如果仅仅是在文档设置中默默地增加了这个设置，用户何时才能知道呢?

　　还有比藏在菜单中更好的解决方案吗?

　　「页宽设置」是对书写纸张宽度的控制，而语雀编辑页中正好有「纸张」这个概念，把这个控制放在靠近纸张的地方显然是最能让人发现。

　　不过，这个设置又并不是一个高频操作，如果过于明显，又会干扰用户。

　　所以，我们最后的设计方案就是当用户的焦点关注在标题区域就会看见这个设置，离开时设置就会自动隐藏。

　　新建文档时会默认激活标题区域，所以用户自然就能第一眼看到它。

　　同时通过简短的选项描述帮助用户明白功能含义，进而做出选择。

　　选择「标准页宽」，那么在编辑和阅读文档时都还将维持原有宽度，选择「超宽显示」，那么编辑和阅读区域都将根据屏幕宽度自适应。

　　3. 目录折叠

　　前面研究也提到，折叠目录和大纲是为文档提供更多区域的常见办法，尤其是在 1440px 屏下特别有用。

　　所以我们也优化了语雀文档阅读页面的目录，知识库 2.0 上线后，用户就可以折叠目录了。(不要问我为什么大纲不能折叠，设计做了，来不及开发了，先上线，要不然知识库 2.0 又要与大家延期见面了)

　　折叠作为一个非高频操作，按钮同样也是鼠标悬停到目录区域时才显示;折叠后，会保留一个窄窄的侧边栏，用户可以通过点击整个侧边栏重新唤出目录，相比于只保留左上角「展开」按钮更省力，因为操作路径更短，也无需精确的操作(放心大胆往左滑鼠标)。

　　原来也尝试过目录折叠的时候，鼠标滑到最左边，目录自动展开，移走鼠标，目录继续折叠，实际体验过后，发现体验过于灵活，尤其是自动展开后想固定展开，需要鼠标小心翼翼移动到「展开」按钮，这个时候往往很容易由于鼠标定位不准，目录又自动折叠了。

　　所以，反复衡量后去掉了目录自动展开，替代方案是通过快捷键完成操作，来满足临时查看目录的需求。

　　探索中的语雀设计价值观

　　从诞生到现在，语雀的初心一直未变——让人们可以在「语雀」中平等快乐地创作和交流知识。

　　与此同时，设计团队在逐步探索语雀的设计价值观。在一次次的思辨、实践和碰撞中，总结出了两个关键词：平静、友善。

　　平静：平静的状态，沉浸的体验都有利于用户进入「心流」状态，激发更多创作灵感。

　　友善：像贴心朋友一样为用户解决问题烦恼，为普通用户做设计，让更多人收益。

　　就像「知识库 2.0 」一样，我们期望每一次的新设计都可以像贴心的朋友一样帮助用户更好地创作和交流知识。