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

或許這只是老出版人的私心偏好,不過我認為確實可以從這些介面元件的細節,看出不同線上寫作/閱讀平台的設計背景和理念。

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

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

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

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


首先是「Vocus/方格子」平台的版本:

Vocus/方格子

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

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

Substack

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

Matters

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

Medium

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

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

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

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

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

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

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


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

是不是(我自認為啦)既典雅、又明顯、而且不會打斷閱讀,比單單一條橫線好看得多?

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

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


對了:

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

Facebook回應