生活黑客|一人公司|數位遊牧

我是侯智薰,右手寫作、左手 Podcast,實踐一人公司和數位遊牧的生活模式;分享高品質的數位生活方法,升級你的工作效率,提升生活品質。

Notion 同步區塊的設計故事(Designing Synced Blocks)

Notion-Synced-block 同步區塊 教學 應用 設計故事

2021.06 Notion 更新 2.11 版本時,推出了一項重要的功能 Synced Blocks(暫譯:同步區塊)。這功能簡單說就是讓一個區塊能夠多處同步,只要 A 區塊李的內容變動,B 區塊就同步變更。也就是說,過去要多次複製貼上的場景,現在一次就能搞定,直接拿張官方的圖來展示:

Notion Synced Block 同步區塊教學說明
Notion Synced Block 應用展示說明

我也馬上在我的 Notion(數字小島)中把能用上的地方(例如:公告、導航列、頁首和頁尾)替換成同步區塊,也拍攝了教學影片上傳到我們的 Notion 教學課程。

不過這一篇文章,我是想來分享我在 Notion 官方網站上看到的《Designing Synced Blocks》這一篇文章(作者是 Notion 的產品設計師 Ryo Lu),文章中記錄了 Synced Blocks 這功能的產品功能設計背景和過程,我覺得很有意思,剛好能延續我之前寫過的《三個影響 Notion 產品設計的先行者》,所以我就來簡單翻譯(機器翻譯 + 簡易人工修改),希望對想瞭解 Notion 的朋友,或者數位工具研究者有所幫助和啟發。


正文開始:Designing Synced Blocks

在創造了超文本(hypertext)和超連結(hyperlinks)等術語之後,電腦先驅 Ted Nelson 的想法幫助定義了我們今天所知道的網絡。他的信念核心是希望計算機能夠超越紙張。在他看來,電腦應該擴展我們的能力(extend our capabilities)。

但 Ted 的許多想法從未實現。其中之一是嵌入包含(transclusion),這應該是 Xanadu(上都)項目 [1] 的一部分,他的超文本模型成立於 1960 年。當我們為我們的先鋒系列採訪 Nelson 時,他這樣描述這個概念:

“Transclusion means that part of one thing is included in another and brought from the original. In the Xanadu method, the transcluded portion has a path back to the original that you can follow.”

「transclusion 是指一個物件的一部分被包含在另一個物件中,並且可以從原來的地方直接帶來。在上都計劃中,被 transclusion 的物件有一條返回原地的路徑,你可以沿著這條路跟隨。」

你可以在下面看到原始的模擬圖,還有他提出的原型

Proto
Theodor H. Nelson, “As We Will Think.” Proceedings of Online 72 Conference, Bruanel University, Uxbridge, England, 1972

這啟發了我們今天要推出的東西:Synced Blocks(同步區塊)。

雖然這個功能是新的,但這個想法並不新鮮。我們開始思考,如果完全相同的資訊,可以在多個地方生存和呼吸呢?例如,如果你的公司申請休假的機制發生變化,你可能需要找到所有提到該政策的頁面,並手動更新每一個頁面。

但 Synced Blocks(同步區塊)改變了這一點。與其在每一個被提及的頁面中去更新請假的流程,不如把它變成一個同步區塊,讓你只需更新一次,這些變化就會反映在所有地方。儘管這是一個簡單的想法,但它為資訊的結構化和共享提供了許多可能性:

長期以來,我們的一個夢想就是把它帶給用戶。作為一個設計師,我的夢想是以一種直觀和自然的方式把它帶給你,讓任何人都能從 Notion 中獲得最大的能量。


從跨文化中汲取靈感(Drawing inspiration from transclusion)

為了實現 Nelson 對 transclusion 的全部設想,我們意識到我們基本上需要改變互聯網——讓每一塊內容都有交叉引用可追溯性。在我們的採訪中,Nelson 表示他不喜歡網路:「我今天不想談論網絡,我討厭它。」

相反,我們決定採取另一種方法。你可以在公共頁面和工作空間之間同步區塊,就像我們自己的 Nelson 的超文本網絡的小版本。我們希望他能喜歡這一點,這一點正在捲土重來。

那麼,Transclusions 和 Notion 的 Synced Blocks 之間有什麼相似之處?

我們試圖在句子或段落層面——在我們的例子中是塊狀層面,保持這種雙向的概念。

我們還顯示了通往其他使用該內容的地方的路徑(正如 Nelson 可能建議的那樣),但不是以一種陌生或複雜的視覺方式,只是以一個簡單的列表將你帶到正確的地方。

Untitled 4
A comparison browser based on transpointing windows. Image from xanadu.net.
Screen Shot 2021 06 25 at 9.54.49 AM
How Synced Blocks shows the path back to the original block.

Synced Blocks 之所以能夠實現,首先是 Notion 基於區塊的資料結構,其中區塊是最小的單元,可以移動、轉換或連結到其他內容,讓你靈活組織你的內容。事實上,Notion 一直支持顯示單個塊的「同步連結」的能力(我們的一些用戶想出了一個解決方法,你可以看這裡)。

在同步區塊出來之前,你可以通過「側邊欄」和「導覽路徑」(麵包屑)在 Notion 頁面之間跳轉。你也可以使用 copy link 和 backlinks,無論是對頁面還是對特定的塊。但這些連結只是作為一種工具,用於在區塊之間進行導航。現在,你可以在任何地方包括一個或多個同步區塊。

為了把 transclusion 的概念帶給大眾讀者(並使它對每個人都真正有用),我們知道我們的解決方案必須既直觀又簡單。

我們的設計方法(Our design approach)

你可能在 Notion 內和 Notion 外都使用過連結。連結通常是單向的,指向一個目的地並把你帶到那裡。正如 Ted Nelson 在談到互聯網時所說的那樣,這造成了:

“A tangle of ever-breaking one-way links, breaking whenever documents are moved or modified.”(一個斷裂的單向連結,每當文件被移動或修改時就會中斷連結。)

對我來說,連結只是對象之間的一種關係。一鍵式單向超連結是最明顯和最流行的,所以它們無處不在。

簡化複雜的東西(Simplifying the complex)

最簡單的解決方案需要最多時間來創建。當第一部 iPhone 推出時,複製和貼上這功能是不存在的,直到兩年後蘋果公司把交互的感覺搞好了。他們必須確保這個功能適合這個媒介,這樣人們就可以不用思考或學習太多東西就可以使用它。

對於 Synced Blocks,最大的設計挑戰是要確保任何人,無論其技術水準如何,都能在使用 Notion 時自然地發現這個概念並立即理解它。

運用 Synced Blocks 主要是從一個頁面複製區塊並貼上到另一個頁面,這個概念是由 Xerox Parc 的 Larry Tesler 創造的。當涉及到文本編輯時,我們大多數人都離不開複製和貼上。因為這動作簡單又直觀,可以追溯到人們過去在物理空間中做事的方式——這個切入點永遠改變了人們在虛擬空間中與文本互動的方式。

Ted Nelson 可能不同意,因為他認為電腦世界是「建立在粗糙的傳統模式上」,包括「紙張隱喻」。但問題是,不是每個人都會立即理解一種新的做事方式。這讓我想起了《模式語言》,為了使一個複雜的概念易於理解,我們需要建立在更簡單、更知名的想法和模式之上。

因此,我們借用了現有的複製和貼上的想法,作為一種通用的機制,使同步區塊在第一次被人發現時就能直觀地理解。

我還知道 Synced Blocks 的包裝需要吸引人發現。

讓簡單的東西變得有吸引力(Making the simple attractive)

在開始製作 Synced Blocks 的時候,我想到了製作一個錘子——它曾經是一個新的工具,現在已經無處不在,在你的手中感覺完美,而且有很多用途。

對於「同步區塊」來說,人機工程學上的問題是讓它在瀏覽時感覺是頁面的一部分,同時也讓編輯清楚地知道變化會影響其他地方。另外,一個同步區塊實際上只是一個區塊的容器,增加了顯示、結構和區塊交互的複雜性。

為了使它在手中感覺舒適,我們不斷地進行迭代。第一個版本感覺與頁面上的其他塊過於分離,這導致了一些佈局上的困難(容器周圍的額外間距,覆蓋的定位等):

container
Our original design for Synced Blocks.(我們對同步區塊的原始設計)

為了消除佈局問題,我們建立了一個同步容器的原型,在編輯時在同步區塊內加入了填充物和控制。這導致了窄列的問題,而且在進出編輯模式時,文本的重新定位也感覺有點笨拙:

in line
An early prototype we built and tested internally.(我們在內部測試的一個早期原型)

最終,我們選擇了一個更輕的東西——在同步區塊周圍的「紅色光環」,當你接近它時就會被喚醒,當編輯影響到其他頁面時就會變亮。新用戶應該會注意到這些同步區塊在他們的工作空間裡出現時有些不同。

我想了很多,如何讓人們在移動游標瀏覽內容時自然地發現這一點,找到一個同步區塊,嘗試一下,並瞭解它是什麼。這也是為什麼菜單如此精簡,只顯示觀眾和編輯需要的內容:

現在和未來連接信息的新方法(New ways to connect information now, and moving forward)

這個版本的 Synced Blocks 還不是它的最終形式,它可以成為什麼,它將成為什麼。我們希望為我們的用戶開發更多的功能,在不同的密度下轉換資訊。

但是現在,團隊和個人可以使用 Synced Blocks 在他們的頁面之間建立聯繫,或者建立由 Synced Blocks 組成的整個頁面。想象一下,你的項目更新是一個同步區塊——當你更新它時,它就會在每個引用它的文件和目標中更新。或者是一個複雜的公司內部網站,它的導航和公告在各頁之間共享。當一件事情發生變化時,「同步區塊」會更新其所有的副本。

我們相信,如果每個企業和個人都能為他們的問題定制軟體應用,世界將更好地解決它的問題。我們的使命是使這成為一個普遍的現實。像這樣的功能給了你更多定制信息的權力,採取步驟實現早期先驅者認為計算可以做到的事情——突破物理工具的模式,更好地增強人類的智慧。

這一步不大,但至少我們在路上了。


  1. 「Xanadu」是中國的地名,指「元上都」,是當時忽必烈即位的地方,後來成為了忽必烈的避暑行宮。這個地方被西方人廣為人知的原因是 13 世紀馬可波羅在此地獲得忽必烈的覲見,在他的《遊記》中記載該都市生活奢華的生活和環境,後來西方人用 Xanadu 比喻「世外桃源」。 Ted Nelson 將其項目起名叫做 Xanadu 似乎也有在電腦世界中開啟世外桃源的意味。(回到段落
這篇文對你有幫助嗎?歡迎分享
侯智薰 雷蒙 大頭照 800 podcast

侯智薰(雷蒙)

💻 生活黑客・一人公司實踐者
分享高效數位工作術、品質生活方法,幫助個體加速發展,讓每個人從工具中獲得力量,提升生活掌握感。
30 歲前的目標:和老婆全世界數位遊牧、打造智能科技宅。

文章分類

追蹤侯智薰的消息

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments