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

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

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

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

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

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

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

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

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

關(guān)于適配：

關(guān)于適配這個(gè)知識(shí)點(diǎn)，這篇文章幫你徹底掌握它!

橙子的橙子：記得剛做 UI 那會(huì)，根本不知道做完界面還需要適配，就以為把設(shè)計(jì)圖做好就行了，其他的事情跟自己沒(méi)有半點(diǎn)關(guān)系。慢慢的踩了坑之后，才知道還有適配這一說(shuō)。所以說(shuō)有些事情...閱讀文章 >>當(dāng)前體驗(yàn)問(wèn)題

1. 大屏適配不佳

改版前，語(yǔ)雀以對(duì)常規(guī)筆記本顯示屏(1440×900)適配為主，而在另一種常見(jiàn)的屏幕尺寸(1920×1080)下，以?xún)蓚?cè)留白的方式適配，導(dǎo)致屏幕空間未能有效被利用。

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

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

2. 超寬卡片讀寫(xiě)不便

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

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

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

那有沒(méi)有辦法能讓超寬卡片更好地展開(kāi)呢?

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

前期調(diào)研

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

1. 全文適配

有些產(chǎn)品能夠?qū)φ�篇文檔的顯示寬度設(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)橐坏肚锌刂贫�造成超寬模式下文字排版過(guò)寬，用戶(hù)逐句閱讀時(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)致用戶(hù)反復(fù)調(diào)整。

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

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

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

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

4. 折疊目錄和大綱

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

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

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

1. 適配方案選型

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

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

Plan A：讓「紙張」變寬

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

Plan B：去掉「紙張」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

工程師：并沒(méi)有這種感覺(jué)……

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

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

……

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 目錄折疊

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

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

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

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

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

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

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

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

平靜：平靜的狀態(tài)，沉浸的體驗(yàn)都有利于用戶(hù)進(jìn)入「心流」?fàn)顟B(tài)，激發(fā)更多創(chuàng)作靈感。

友善：像貼心朋友一樣為用戶(hù)解決問(wèn)題煩惱，為普通用戶(hù)做設(shè)計(jì)，讓更多人收益。

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