語雀是阿里巴巴人手必備的辦公軟件，阿里同學(xué)日常的周報(bào)日?qǐng)?bào)、產(chǎn)品文檔、開發(fā)文檔等等都依賴語雀完成。

隨著正式發(fā)布對(duì)外后，用戶規(guī)模逐漸壯大，我們?cè)谟懻搮^(qū)（語雀一對(duì)一與大家溝通需求的用戶反饋專區(qū)）陸續(xù)收到很多對(duì)寬屏適配的需求：

都9012年了，大屏適配該動(dòng)起來了 #7219 @楽楽

頁(yè)面太窄了，可不可以改成自適應(yīng)的？#4285 @張曉航

現(xiàn)在都是寬屏來看網(wǎng)頁(yè)，語雀上面基本都是1/3屏幕寬度，浪費(fèi)很多空間，尤其是在加入表格的時(shí)候，根本看不到寬的表格，每次都很麻煩

編輯頁(yè)面有效區(qū)域太窄了 #3578 @chaos

為什么頁(yè)面可編輯區(qū)域這么窄，兩邊有很多空白為什么不用

作為一款知識(shí)沉淀型產(chǎn)品，大家打開語雀后都會(huì)進(jìn)入長(zhǎng)時(shí)間的編寫或閱讀。如果顯示器適配不佳，就會(huì)大大降低用戶體驗(yàn)。

本文將和大家分享語雀此次大屏適配設(shè)計(jì)改版背后的一些思考。

關(guān)于適配：

當(dāng)前體驗(yàn)問題

1. 大屏適配不佳

改版前，語雀以對(duì)常規(guī)筆記本顯示屏（1440x900）適配為主，而在另一種常見的屏幕尺寸（1920x1080）下，以兩側(cè)留白的方式適配，導(dǎo)致屏幕空間未能有效被利用。

所以，我們需要設(shè)計(jì)一個(gè)方案能夠同時(shí)滿足這兩種常見屏幕下的閱讀編輯體驗(yàn)。

△ 知識(shí)庫(kù) 2.0 之前的閱讀頁(yè)

2. 超寬卡片讀寫不便

語雀文檔給用戶提供了豐富的卡片插入能力，包括：表格、代碼塊、思維導(dǎo)圖、流程圖、本地文件等等。

在工作場(chǎng)景下，大家常常用表格記錄項(xiàng)目進(jìn)度，用思維導(dǎo)圖拆解運(yùn)營(yíng)策略，用流程圖表達(dá)產(chǎn)品邏輯……所以，文檔中插入的這些卡片的橫向?qū)挾瓤赡芎艽蟆?/p>

而此時(shí)由于語雀的文檔區(qū)域?qū)挾裙潭?，用戶讀寫時(shí)常常需要橫向滾動(dòng)，非常不便。

那有沒有辦法能讓超寬卡片更好地展開呢？

帶著這兩個(gè)問題，我們開始了在「知識(shí)庫(kù) 2.0」項(xiàng)目中關(guān)于大屏適配的設(shè)計(jì)思考。

前期調(diào)研

我們研究了市面上常見的幾家文檔工具對(duì)于大屏幕的適配方式，大致可以分為以下幾種解決方案：

1. 全文適配

有些產(chǎn)品能夠?qū)φ臋n的顯示寬度設(shè)置，提供「標(biāo)準(zhǔn)」「超寬」等模式。

在「標(biāo)準(zhǔn)」模式下，文字等主體內(nèi)容寬度固定（部分產(chǎn)品允許表格單獨(dú)超出文字寬度）；在「超寬」模式下，所有元素寬度跟隨瀏覽器寬度進(jìn)行自適應(yīng)。

這種方案的優(yōu)點(diǎn)是設(shè)置簡(jiǎn)單，缺點(diǎn)可能就是因?yàn)橐坏肚锌刂贫斐沙瑢捘Ｊ较挛淖峙虐孢^寬，用戶逐句閱讀時(shí)比較累。

3. 按內(nèi)容單獨(dú)適配

而另一些產(chǎn)品的設(shè)置思路是，可以對(duì)文檔中的部分元素各自設(shè)置寬度。

比如文字部分始終固定寬度，表格、圖片可以單獨(dú)「超寬」。

值得關(guān)注的是，「超寬」的表格有兩種處理方式：

Plan A：表格總寬度固定

「標(biāo)準(zhǔn)」模式下，表格寬度始終和文檔一樣寬；「超寬」模式下，表格寬度始終等于頁(yè)面寬度。

這種方案的優(yōu)點(diǎn)是可以比較精準(zhǔn)地控制每一個(gè)元素的寬度。而缺點(diǎn)就是由于表格總寬度固定，新增列時(shí)會(huì)影響已有列寬，可能會(huì)導(dǎo)致用戶反復(fù)調(diào)整。

Plan B：表格總寬度隨新增列數(shù)而變化

每增加一列，已有列寬不變，表格總寬度增加。當(dāng)因列數(shù)逐漸增加而超過文檔寬度時(shí)，無需特意設(shè)置即可突破文檔區(qū)域的限制。

不過這種方式需要注意的就是，表格超出標(biāo)準(zhǔn)寬度后，與文檔大綱相遇時(shí)需要怎么處理。

下圖就是一種不錯(cuò)的處理方式：當(dāng)兩者沒有相交時(shí)，并不會(huì)干擾，當(dāng)兩者相交時(shí)，大綱默認(rèn)折疊，如果鼠標(biāo)懸停到折疊的大綱上可以臨時(shí)展開大綱。

4. 折疊目錄和大綱

不少文檔在顯示時(shí)兩側(cè)可能自帶目錄或者大綱。所以在屏幕本身不夠大時(shí)，還可以通過折疊目錄和大綱為文檔區(qū)域提供更大空間。

設(shè)計(jì)方案

綜合前期調(diào)研，結(jié)合語雀的現(xiàn)狀，我們開始嘗試語雀上的設(shè)計(jì)方案，有些特殊的因素會(huì)影響設(shè)計(jì)方案的選擇。

1. 適配方案選型

每個(gè)產(chǎn)品都有自己的「歷史包袱」，在已經(jīng)被用戶熟悉的產(chǎn)品上「動(dòng)刀子」不是一件易事。

首先，語雀文檔的編輯頁(yè)采用了模擬紙張的設(shè)計(jì)形式，所以如果想要對(duì)各個(gè)內(nèi)容寬度單獨(dú)進(jìn)行適配，而不動(dòng)文字寬度，有兩種可能的方案：

Plan A：讓「紙張」變寬

就像下圖所示，由于右側(cè)大綱等內(nèi)容的存在，為了視覺對(duì)稱，紙張左側(cè)需要白白留出一些空間，看上去不太舒服。

Plan B：去掉「紙張」

去掉「紙張」后，編輯區(qū)變成一整片白色，大綱則緊貼最右側(cè)顯示。

這種設(shè)計(jì)在市面上也挺常見，不過，實(shí)際上在幾年前我們有一個(gè)版本是去掉了紙張?jiān)O(shè)計(jì)，后來實(shí)在禁不起老用戶們請(qǐng)求回滾的呼聲（罵聲），又重新上線了紙張風(fēng)格的編輯器。所以本次改版也不打算對(duì)這個(gè)大家十分喜愛的設(shè)計(jì)「動(dòng)刀子」。

總結(jié)來看，上述單獨(dú)設(shè)置各個(gè)內(nèi)容寬度的方案并不太適合語雀。

那么，再來考慮全文適配，也就是給用戶提供「標(biāo)準(zhǔn)」和「超寬」兩種可選項(xiàng)。

這個(gè)方案有需要解決一下 3 個(gè)問題：

文檔的大屏適配在編輯頁(yè)只能由作者設(shè)置，還是在閱讀頁(yè)由讀者為自己設(shè)置？

團(tuán)隊(duì)討論時(shí)，有人期望有讀者選擇使用哪種模式，萬一有篇文檔明明需要「超寬」，但是作者沒有設(shè)置成「超寬」，豈不是很難受？但是考慮一個(gè)文檔到底適合怎么顯示其實(shí)是由內(nèi)容決定的（比如原始需求基本都是因?yàn)椴迦氤瑢挶砀穸穑?，且作者也是讀者，作者為了自己能夠更好地編輯一般都會(huì)設(shè)置成合適的模式，把設(shè)置交給作者會(huì)更簡(jiǎn)單。假如交給讀者的話，那么除了頁(yè)寬，還有正文字號(hào)、間距這些排版設(shè)置是不是也要開放給讀者呢？

在「標(biāo)準(zhǔn)」模式下，表格是否可以比文字寬？

這個(gè)問題也要同時(shí)考慮閱讀和編輯頁(yè)面，我期望是表格可以超出，這樣模式使用起來更加靈活，但是編輯頁(yè)有個(gè)「紙張」形式的限制，閱讀頁(yè)倒是可以放開限制，但是和大綱重疊的處理方案會(huì)增加技術(shù)成本和工期。所以最后設(shè)計(jì)評(píng)審時(shí)沒有討價(jià)還價(jià)成功，這個(gè)需求砍掉了。

△ 飛機(jī)稿：表格突破文字寬度

△ 飛機(jī)稿：表格與大綱相遇時(shí)，大綱自動(dòng)折疊

選擇「超寬」模式后，文字部分的寬度應(yīng)該放開么？

在我原本的設(shè)計(jì)中，即使「超寬」模式文字部分的寬度也是有限制，非文字部分寬度才可以自適應(yīng)寬度。這個(gè)設(shè)計(jì)在評(píng)審時(shí)收到了兩撥截然不同的反應(yīng)。

△ 原始設(shè)計(jì)方案 : 「超寬」模式下，文字仍有固定寬度

工程師：為什么文字寬度要收到限制？收到限制了還能算什么超寬顯示？我們想要 Wiki 那樣的排版！

設(shè)計(jì)師：納尼？！文字太寬閱讀起來并不舒服，不僅可能要轉(zhuǎn)腦袋，還容易讀串行！有相關(guān)理論研究表明@……￥#*#@%&￥（@%……#）#*&#%#*#（）……

工程師：并沒有這種感覺……

設(shè)計(jì)師：……那可能是你們的職業(yè)習(xí)慣，但是考慮到大部分普通用戶，我們還是要#……@&……￥（……@……#（#……￥&*92261038#&……

工程師：可是這樣顯示我可以獲得高密度信息，加快閱讀速度，更快尋找到重點(diǎn)內(nèi)容。
……

在三個(gè)小時(shí)熱火朝天的爭(zhēng)論中，最后決定先放開對(duì)文字寬度的限制。

作為設(shè)計(jì)師我自己的思考是，的確看到其他同類產(chǎn)品有提供放開文字寬度的模式，比如 Confluence，Notion；又看了很多語雀文檔，發(fā)現(xiàn)真正需要超寬顯示的文檔（比如包含一個(gè)超寬表格）的數(shù)量并不是很多。

所以我選擇保留自己的意見，尊重團(tuán)隊(duì)的決定，也再聽聽更多用戶的聲音，看看之后是不是還需要再做迭代。

△ 討論后的設(shè)計(jì)方案：「超寬」模式下，文字寬度自適應(yīng)

所以經(jīng)過上述思考，語雀文檔的大屏適配方案基本敲定：對(duì)文檔整體進(jìn)行適配，提供「標(biāo)準(zhǔn)」和「超寬」兩種模式，「標(biāo)準(zhǔn)」就是維持現(xiàn)狀，「超寬」就是所有內(nèi)容根據(jù)頁(yè)面寬度自適應(yīng)。雖然不是我心中最理想的方案，但是總算可以先解決一部分問題。

設(shè)計(jì)工作中，往往需要面臨過往的歷史債、資源有限下的取舍以及對(duì)不同意見的權(quán)衡，而這也是設(shè)計(jì)的魅力所在。

2. 功能入口設(shè)計(jì)

對(duì)于工具型產(chǎn)品，如何能夠讓用戶及時(shí)發(fā)現(xiàn)新增加的好功能，永遠(yuǎn)是個(gè)值得探索的問題。

在編輯器中，設(shè)置類功能往往都藏在一個(gè)「…」按鈕。因?yàn)槿诸惖脑O(shè)置并不是一個(gè)高頻操作，不需要像工具類的按鈕一樣，明晃晃地在工具欄上占有一席之地。

可是問題來了，如果僅僅是在文檔設(shè)置中默默地增加了這個(gè)設(shè)置，用戶何時(shí)才能知道呢？

還有比藏在菜單中更好的解決方案嗎？

「頁(yè)寬設(shè)置」是對(duì)書寫紙張寬度的控制，而語雀編輯頁(yè)中正好有「紙張」這個(gè)概念，把這個(gè)控制放在靠近紙張的地方顯然是最能讓人發(fā)現(xiàn)。

不過，這個(gè)設(shè)置又并不是一個(gè)高頻操作，如果過于明顯，又會(huì)干擾用戶。

所以，我們最后的設(shè)計(jì)方案就是當(dāng)用戶的焦點(diǎn)關(guān)注在標(biāo)題區(qū)域就會(huì)看見這個(gè)設(shè)置，離開時(shí)設(shè)置就會(huì)自動(dòng)隱藏。

新建文檔時(shí)會(huì)默認(rèn)激活標(biāo)題區(qū)域，所以用戶自然就能第一眼看到它。

同時(shí)通過簡(jiǎn)短的選項(xiàng)描述幫助用戶明白功能含義，進(jìn)而做出選擇。

選擇「標(biāo)準(zhǔn)頁(yè)寬」，那么在編輯和閱讀文檔時(shí)都還將維持原有寬度，選擇「超寬顯示」，那么編輯和閱讀區(qū)域都將根據(jù)屏幕寬度自適應(yīng)。

3. 目錄折疊

前面研究也提到，折疊目錄和大綱是為文檔提供更多區(qū)域的常見辦法，尤其是在 1440px 屏下特別有用。

所以我們也優(yōu)化了語雀文檔閱讀頁(yè)面的目錄，知識(shí)庫(kù) 2.0 上線后，用戶就可以折疊目錄了。（不要問我為什么大綱不能折疊，設(shè)計(jì)做了，來不及開發(fā)了，先上線，要不然知識(shí)庫(kù) 2.0 又要與大家延期見面了）

折疊作為一個(gè)非高頻操作，按鈕同樣也是鼠標(biāo)懸停到目錄區(qū)域時(shí)才顯示；折疊后，會(huì)保留一個(gè)窄窄的側(cè)邊欄，用戶可以通過點(diǎn)擊整個(gè)側(cè)邊欄重新喚出目錄，相比于只保留左上角「展開」按鈕更省力，因?yàn)椴僮髀窂礁蹋矡o需精確的操作（放心大膽往左滑鼠標(biāo)）。

原來也嘗試過目錄折疊的時(shí)候，鼠標(biāo)滑到最左邊，目錄自動(dòng)展開，移走鼠標(biāo)，目錄繼續(xù)折疊，實(shí)際體驗(yàn)過后，發(fā)現(xiàn)體驗(yàn)過于靈活，尤其是自動(dòng)展開后想固定展開，需要鼠標(biāo)小心翼翼移動(dòng)到「展開」按鈕，這個(gè)時(shí)候往往很容易由于鼠標(biāo)定位不準(zhǔn)，目錄又自動(dòng)折疊了。

所以，反復(fù)衡量后去掉了目錄自動(dòng)展開，替代方案是通過快捷鍵完成操作，來滿足臨時(shí)查看目錄的需求。

探索中的語雀設(shè)計(jì)價(jià)值觀

從誕生到現(xiàn)在，語雀的初心一直未變——讓人們可以在「語雀」中平等快樂地創(chuàng)作和交流知識(shí)。

與此同時(shí)，設(shè)計(jì)團(tuán)隊(duì)在逐步探索語雀的設(shè)計(jì)價(jià)值觀。在一次次的思辨、實(shí)踐和碰撞中，總結(jié)出了兩個(gè)關(guān)鍵詞：平靜、友善。

• 平靜：平靜的狀態(tài)，沉浸的體驗(yàn)都有利于用戶進(jìn)入「心流」?fàn)顟B(tài)，激發(fā)更多創(chuàng)作靈感。
• 友善：像貼心朋友一樣為用戶解決問題煩惱，為普通用戶做設(shè)計(jì)，讓更多人收益。

就像「知識(shí)庫(kù) 2.0 」一樣，我們期望每一次的新設(shè)計(jì)都可以像貼心的朋友一樣幫助用戶更好地創(chuàng)作和交流知識(shí)。

拓展閱讀：

歡迎關(guān)注作者微信公眾號(hào)：「語雀是什么」