語雀是阿里巴巴人手必備的辦公軟件，阿里同學日常的周報日報、產品文檔、開發文檔等等都依賴語雀完成。

隨着正式發布對外后，用戶規模逐漸壯大，我們在討論區（語雀一對一與大家溝通需求的用戶反饋專區）陸續收到很多對寬屏適配的需求：

都9012年了，大屏適配該動起來了 #7219 @楽楽

頁面太窄了，可不可以改成自適應的？#4285 @張曉航

現在都是寬屏來看網頁，語雀上面基本都是1/3屏幕寬度，浪費很多空間，尤其是在加入表格的時候，根本看不到寬的表格，每次都很麻煩

編輯頁面有效區域太窄了 #3578 @chaos

為什麼頁面可編輯區域這麼窄，兩邊有很多空白為什麼不用

作為一款知識沉澱型產品，大家打開語雀后都會進入長時間的編寫或閱讀。如果显示器適配不佳，就會大大降低用戶體驗。

本文將和大家分享語雀此次大屏適配設計改版背後的一些思考。

關於適配：

閱讀文章 >>

當前體驗問題

1. 大屏適配不佳

改版前，語雀以對常規筆記本显示屏（1440×900）適配為主，而在另一種常見的屏幕尺寸（1920×1080）下，以兩側留白的方式適配，導致屏幕空間未能有效被利用。

所以，我們需要設計一個方案能夠同時滿足這兩種常見屏幕下的閱讀編輯體驗。

△ 知識庫 2.0 之前的閱讀頁

2. 超寬卡片讀寫不便

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

在工作場景下，大家常常用表格記錄項目進度，用思維導圖拆解運營策略，用流程圖表達產品邏輯……所以，文檔中插入的這些卡片的橫向寬度可能很大。

而此時由於語雀的文檔區域寬度固定，用戶讀寫時常常需要橫向滾動，非常不便。

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

帶着這兩個問題，我們開始了在「知識庫 2.0」項目中關於大屏適配的設計思考。

前期調研

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

1. 全文適配

有些產品能夠對整篇文檔的显示寬度設置，提供「標準」「超寬」等模式。

在「標準」模式下，文字等主體內容寬度固定（部分產品允許表格單獨超出文字寬度）；在「超寬」模式下，所有元素寬度跟隨瀏覽器寬度進行自適應。

這種方案的優點是設置簡單，缺點可能就是因為一刀切控制而造成超寬模式下文字排版過寬，用戶逐句閱讀時比較累。

3. 按內容單獨適配

而另一些產品的設置思路是，可以對文檔中的部分元素各自設置寬度。

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

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

Plan A：表格總寬度固定

「標準」模式下，表格寬度始終和文檔一樣寬；「超寬」模式下，表格寬度始終等於頁面寬度。

這種方案的優點是可以比較精準地控制每一個元素的寬度。而缺點就是由於表格總寬度固定，新增列時會影響已有列寬，可能會導致用戶反覆調整。

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

每增加一列，已有列寬不變，表格總寬度增加。當因列數逐漸增加而超過文檔寬度時，無需特意設置即可突破文檔區域的限制。

不過這種方式需要注意的就是，表格超出標準寬度后，與文檔大綱相遇時需要怎麼處理。

下圖就是一種不錯的處理方式：當兩者沒有相交時，並不會幹擾，當兩者相交時，大綱默認摺疊，如果鼠標懸停到摺疊的大綱上可以臨時展開大綱。

4. 摺疊目錄和大綱

不少文檔在显示時兩側可能自帶目錄或者大綱。所以在屏幕本身不夠大時，還可以通過摺疊目錄和大綱為文檔區域提供更大空間。

設計方案

綜合前期調研，結合語雀的現狀，我們開始嘗試語雀上的設計方案，有些特殊的因素會影響設計方案的選擇。

1. 適配方案選型

每個產品都有自己的「歷史包袱」，在已經被用戶熟悉的產品上「動刀子」不是一件易事。

首先，語雀文檔的編輯頁採用了模擬紙張的設計形式，所以如果想要對各個內容寬度單獨進行適配，而不動文字寬度，有兩種可能的方案：

Plan A：讓「紙張」變寬

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

Plan B：去掉「紙張」

去掉「紙張」后，編輯區變成一整片白色，大綱則緊貼最右側显示。

這種設計在市面上也挺常見，不過，實際上在幾年前我們有一個版本是去掉了紙張設計，後來實在禁不起老用戶們請求回滾的呼聲（罵聲），又重新上線了紙張風格的編輯器。所以本次改版也不打算對這個大家十分喜愛的設計「動刀子」。

總結來看，上述單獨設置各個內容寬度的方案並不太適合語雀。

那麼，再來考慮全文適配，也就是給用戶提供「標準」和「超寬」兩種可選項。

這個方案有需要解決一下 3 個問題：

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

團隊討論時，有人期望有讀者選擇使用哪種模式，萬一有篇文檔明明需要「超寬」，但是作者沒有設置成「超寬」，豈不是很難受？但是考慮一個文檔到底適合怎麼显示其實是由內容決定的（比如原始需求基本都是因為插入超寬表格而引起），且作者也是讀者，作者為了自己能夠更好地編輯一般都會設置成合適的模式，把設置交給作者會更簡單。假如交給讀者的話，那麼除了頁寬，還有正文字號、間距這些排版設置是不是也要開放給讀者呢？

在「標準」模式下，表格是否可以比文字寬？

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

△ 飛機稿：表格突破文字寬度

△ 飛機稿：表格與大綱相遇時，大綱自動摺疊

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

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

△ 原始設計方案 : 「超寬」模式下，文字仍有固定寬度

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

設計師：納尼？！文字太寬閱讀起來並不舒服，不僅可能要轉腦袋，還容易讀串行！有相關理論研究表明@……¥#*#@%&¥（@%……#）#*&#%#*#（）……

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

設計師：……那可能是你們的職業習慣，但是考慮到大部分普通用戶，我們還是要#……@&……¥（……@……#（#……¥&*92261038#&……

工程師：可是這樣显示我可以獲得高密度信息，加快閱讀速度，更快尋找到重點內容。
……

在三個小時熱火朝天的爭論中，最後決定先放開對文字寬度的限制。

作為設計師我自己的思考是，的確看到其他同類產品有提供放開文字寬度的模式，比如 Confluence，Notion；又看了很多語雀文檔，發現真正需要超寬显示的文檔（比如包含一個超寬表格）的數量並不是很多。

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

△ 討論后的設計方案：「超寬」模式下，文字寬度自適應

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

設計工作中，往往需要面臨過往的歷史債、資源有限下的取捨以及對不同意見的權衡，而這也是設計的魅力所在。

2. 功能入口設計

對於工具型產品，如何能夠讓用戶及時發現新增加的好功能，永遠是個值得探索的問題。

在編輯器中，設置類功能往往都藏在一個「…」按鈕。因為全局類的設置並不是一個高頻操作，不需要像工具類的按鈕一樣，明晃晃地在工具欄上佔有一席之地。

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

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

「頁寬設置」是對書寫紙張寬度的控制，而語雀編輯頁中正好有「紙張」這個概念，把這個控制放在靠近紙張的地方顯然是最能讓人發現。

不過，這個設置又並不是一個高頻操作，如果過於明顯，又會幹擾用戶。

所以，我們最後的設計方案就是當用戶的焦點關注在標題區域就會看見這個設置，離開時設置就會自動隱藏。

新建文檔時會默認激活標題區域，所以用戶自然就能第一眼看到它。

同時通過簡短的選項描述幫助用戶明白功能含義，進而做出選擇。

選擇「標準頁寬」，那麼在編輯和閱讀文檔時都還將維持原有寬度，選擇「超寬显示」，那麼編輯和閱讀區域都將根據屏幕寬度自適應。

3. 目錄摺疊

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

所以我們也優化了語雀文檔閱讀頁面的目錄，知識庫 2.0 上線后，用戶就可以摺疊目錄了。（不要問我為什麼大綱不能摺疊，設計做了，來不及開發了，先上線，要不然知識庫 2.0 又要與大家延期見面了）

摺疊作為一個非高頻操作，按鈕同樣也是鼠標懸停到目錄區域時才显示；摺疊后，會保留一個窄窄的側邊欄，用戶可以通過點擊整個側邊欄重新喚出目錄，相比於只保留左上角「展開」按鈕更省力，因為操作路徑更短，也無需精確的操作（放心大膽往左滑鼠標）。

原來也嘗試過目錄摺疊的時候，鼠標滑到最左邊，目錄自動展開，移走鼠標，目錄繼續摺疊，實際體驗過後，發現體驗過於靈活，尤其是自動展開后想固定展開，需要鼠標小心翼翼移動到「展開」按鈕，這個時候往往很容易由於鼠標定位不準，目錄又自動摺疊了。

所以，反覆衡量後去掉了目錄自動展開，替代方案是通過快捷鍵完成操作，來滿足臨時查看目錄的需求。

探索中的語雀設計價值觀

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

與此同時，設計團隊在逐步探索語雀的設計價值觀。在一次次的思辨、實踐和碰撞中，總結出了兩個關鍵詞：平靜、友善。

• 平靜：平靜的狀態，沉浸的體驗都有利於用戶進入「心流」狀態，激發更多創作靈感。
• 友善：像貼心朋友一樣為用戶解決問題煩惱，為普通用戶做設計，讓更多人收益。

就像「知識庫 2.0 」一樣，我們期望每一次的新設計都可以像貼心的朋友一樣幫助用戶更好地創作和交流知識。

拓展閱讀：

閱讀文章 >>

歡迎關注作者微信公眾號：「語雀是什麼」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊平台官網_用阿里語雀改版實戰，幫你掌握3種文檔大屏適配方法