從小地方看閱讀平台的設計

我從1990年代初期至今，已經嘗試使用過無數的線上寫作平台、甚至自己也設計過。雖然現在已經沒時間自己架、自己設計，都得用現成的，但對於各個平台的設計還是會有些想法，可能的話也會提供意見，反映給經營者作為參考。

平台設計的面向很多、也很廣，包含技術的、功能的、視覺的、後台體驗的等等，但這篇我想提的是一個小地方。對於有出版品編輯和設計經驗的人而言，這其實是個能看出介面設計者是否懂（傳統）出版、是否具備整體的設計美感。

這是個雞毛蒜皮的小點，我相信無論怎麼做，技術上都不困難，只是花一點心思、多寫一兩行碼的差異而已。

那就是各平台文章中的「分隔線」設計。至於我為什麼會特別看這一點，等最後再來談。

首先是「Vocus／方格子」平台的版本：

就是一條橫貫整個文字段落寬度的細線，基本上就是一個「<hr>」標籤搞定。

接下來是我自己目前用來發電子報的「Substack」平台，是一條更細的長橫線；同樣也是「<hr style=」等級。

而最近開始試用的「Matters」平台則稍微不太一樣，是兩條平行的短線；也是「<hr>」的變形：

「Medium」平台上用的，則是我目前最喜歡的「三個點居中」，是用不太一樣、但複雜度也差不多的「<hr class=」手法做的（所以我說程式複雜度沒有差多少）：

為什麼說我自己最喜歡Medium的「三個點」版本呢？道理有兩個：

1. 這個功能的目的到底是什麼：並不只是在於「視覺上的區隔」，而是同一個章節中的語氣和內容轉換。而因為是轉換，所以讓作者的語氣、以及讀者的閱讀「不中斷」是很重要的。所以就這一點來說，「一根橫線到底」的設計就是不及格的，而且這樣的設計也很沒有美感。
2. 與書籍類似：「三個點」無論在中英文書籍上，都是很常見的設計；所以對於書籍讀者來說也比較熟悉，在閱讀較長的文章時，比較不容易有一直被打斷的感覺。

如果介面設計者熟悉傳統出版、或者重視閱讀體驗的細節，就比較會在這上面（以及其他許多介面元素上）下功夫，讓寫作者和讀者在這個空間中都願意停留比較久、並且獲得更好的閱讀觀感。

理論上當然編輯器提供的選項越多越好，像是本文提到的「分隔線」，如果有幾十種可以選不就更好？

那倒也不一定。因為提供的選項越多，就可能把排版功能介面弄得越複雜；而且如果是不擅長排版、但喜歡嘗鮮的人，就可能會因為「亂用」而搞出大雜燴。

雖然這或許也是一種「個人風格」，但如果整個平台上有很多作者因為排版太過不專業而搞得太花俏，對於平台想建立的形象也會多少有些影響。這也是作為這類平台始祖的Medium，在排版功能設計上（雖然有些人抱怨）還是「寧缺勿濫」的部分原因。

而正因為其實功能選項不多（特別是相對於「什麼都可以改」的自架WordPress平台之類），所以在這些功能的設計上，更應該花心思去研究使用者的行為，在「簡潔易用」、「排版變化」、以及「使用體驗」之間做出比最好的妥協。

至於我自己的偏好，除了前面提過在現成平台上我喜歡用Medium的「三個點」之外，當我還在用WordPress平台時，自訂的是模仿英文書古典排版的這個設計：

是不是（我自認為啦）既典雅、又明顯、而且不會打斷閱讀，比單單一條橫線好看得多？

再告訴大家一個秘密：現在在Medium以外的平台上，我都是用Medium的「三個點」抓圖，然後貼進編輯器來用。

說不定也會開始回頭用上面的那片葉子吧。

對了：

1. 其實我在本文中刻意使用太多分隔線，來強調我的觀點、並且讓大家看看對排版效果的影響。
2. 首圖中的那個「§」符號，在書上也是可以拿來當作分隔功能的，甚至可以說是更正統的符號，但我覺得沒有葉子好看。🙂
3. 另外，是不是會覺得這篇文章的排版看起來有點亂？這是因為大多數的平台，都沒有提供圖片加框、或是加陰影的選項。在Medium上因為可以將圖放大、往左右凸出一點，所以還好，其他平台就沒辦法了。