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

更新於 發佈於 閱讀時間約 5 分鐘

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

raw-image

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

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

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

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

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

Vocus/方格子

Vocus/方格子

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

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

Substack

Substack

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

Matters

Matters

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

Medium

Medium

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

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

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

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

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

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

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

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

raw-image

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

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

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


對了:

  1. 其實我在本文中刻意使用太多分隔線,來強調我的觀點、並且讓大家看看對排版效果的影響。
  2. 首圖中的那個「§」符號,在書上也是可以拿來當作分隔功能的,甚至可以說是更正統的符號,但我覺得沒有葉子好看。🙂
  3. 另外,是不是會覺得這篇文章的排版看起來有點亂?這是因為大多數的平台,都沒有提供圖片加框、或是加陰影的選項。在Medium上因為可以將圖放大、往左右凸出一點,所以還好,其他平台就沒辦法了。
留言
avatar-img
留言分享你的想法!
Michelle Lù-avatar-img
2021/06/24
我個人是比較喜歡Matters的分隔線,特別是分隔線距離上段落還有下段落的間隔距離,我認為Matters的分隔線,比較符合我的期待。
avatar-img
傅瑞德的沙龍
785會員
258內容數
生涯橫跨科技、出版、行銷顧問業;曾創立過多家數位媒體,並擔任雜誌總編輯與社長。專注商管、網路、科技、語言、軍事等領域;曾任教大學中文系,並擔任電動車系統公司行銷長。目前為企業與新創公司媒體策略、產品行銷、語言應用顧問,提供品牌再造與中英文文案教學等服務。
傅瑞德的沙龍的其他內容
2021/11/23
為簡化個人作品發表平台管理的作業,之後《F大叔的硬派行銷塾》的方格子分站(也就是這裡)將暫停更新,新文章會發表在主站 http://hardcopy.cafe 上。 如果您是這邊尚未期滿的付費讀者,請寫信到 ask@tuna.to 跟我聯繫,我會同樣提供付費會員資格給您。如果您想透過email收到最
2021/11/23
為簡化個人作品發表平台管理的作業,之後《F大叔的硬派行銷塾》的方格子分站(也就是這裡)將暫停更新,新文章會發表在主站 http://hardcopy.cafe 上。 如果您是這邊尚未期滿的付費讀者,請寫信到 ask@tuna.to 跟我聯繫,我會同樣提供付費會員資格給您。如果您想透過email收到最
2021/10/21
不能說完全沒有,但背後的運作和理由跟你想像的可能不一樣。
Thumbnail
2021/10/21
不能說完全沒有,但背後的運作和理由跟你想像的可能不一樣。
Thumbnail
2021/10/21
延續了先前幾篇相關文章的討論,我仍然認為Intel這個系列的廣告如果不是對Apple意氣用事,就只是在跟現有的幾家大客戶搏感情。如果從產品行銷的角度來看,應該還是有更好的方法。
Thumbnail
2021/10/21
延續了先前幾篇相關文章的討論,我仍然認為Intel這個系列的廣告如果不是對Apple意氣用事,就只是在跟現有的幾家大客戶搏感情。如果從產品行銷的角度來看,應該還是有更好的方法。
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
創富是一種思維,可以享受上班,下班後繼續創造。👉點此訂閱電子報👈 每週跟您分享一件事情,用新的角度重新看待自己的人生,拿回屬於自己的選擇權。有個問題一直卡住我好久,就是在數位內容創作,尤其是寫中文的時候,標點符號的設計。
Thumbnail
創富是一種思維,可以享受上班,下班後繼續創造。👉點此訂閱電子報👈 每週跟您分享一件事情,用新的角度重新看待自己的人生,拿回屬於自己的選擇權。有個問題一直卡住我好久,就是在數位內容創作,尤其是寫中文的時候,標點符號的設計。
Thumbnail
本文章想分享給你,我在閱讀數位寫作的22條法則後,產生的3個理解與思考。 這個月的一個聚焦目標,是仔細研究數位寫作的各種技術。 數位寫作有別於一般寫作,講究以讀者的反應為優先。 你的寫作是為了自己,為了一個具體讀者,還是為了一群想像的讀者呢?
Thumbnail
本文章想分享給你,我在閱讀數位寫作的22條法則後,產生的3個理解與思考。 這個月的一個聚焦目標,是仔細研究數位寫作的各種技術。 數位寫作有別於一般寫作,講究以讀者的反應為優先。 你的寫作是為了自己,為了一個具體讀者,還是為了一群想像的讀者呢?
Thumbnail
將文字敘述成章,是為了在未來的某一刻,讓文章發揮影響力的「因」。 關於寫作的局與寫作「之外」的局,透過點線面體的方式,提前去思考未來可行的路:是要把局作大?還是要把局作高(體變成點或面)?或是雙軌並行?不論是把局作大或作高,在開始寫作之外的局之前,現階段仍要先專注在寫作的局上(把局作大)。
Thumbnail
將文字敘述成章,是為了在未來的某一刻,讓文章發揮影響力的「因」。 關於寫作的局與寫作「之外」的局,透過點線面體的方式,提前去思考未來可行的路:是要把局作大?還是要把局作高(體變成點或面)?或是雙軌並行?不論是把局作大或作高,在開始寫作之外的局之前,現階段仍要先專注在寫作的局上(把局作大)。
Thumbnail
◆ 今天的主題 ◆ Medium的編輯器 Medium: 優點/優勢 Medium: 希望可以改善的地方/可以做的更好的地方 Matters 的編輯器 Matters: 優點/優勢 Matters: 希望可以改善的地方/可以做的更好的地方 方格子 的編輯器 方格子: 優點/優勢
Thumbnail
◆ 今天的主題 ◆ Medium的編輯器 Medium: 優點/優勢 Medium: 希望可以改善的地方/可以做的更好的地方 Matters 的編輯器 Matters: 優點/優勢 Matters: 希望可以改善的地方/可以做的更好的地方 方格子 的編輯器 方格子: 優點/優勢
Thumbnail
一個寫作平台的閱讀環境再怎麼糟糕,但是互動性良好、你能接受,那就是你的選擇;如果讀者累積慢、文章導流效果中下,但是平台本身的發展性你很看好、想留下來,那也是你的選擇。 留下是選擇,離開也是選擇。你能接受,都是你的選擇,端看你期望在這些平台裡獲得什麼。
Thumbnail
一個寫作平台的閱讀環境再怎麼糟糕,但是互動性良好、你能接受,那就是你的選擇;如果讀者累積慢、文章導流效果中下,但是平台本身的發展性你很看好、想留下來,那也是你的選擇。 留下是選擇,離開也是選擇。你能接受,都是你的選擇,端看你期望在這些平台裡獲得什麼。
Thumbnail
或許這只是老出版人的私心偏好,不過我認為確實可以從這些介面元件的細節,看出不同線上寫作/閱讀平台的設計背景和理念。
Thumbnail
或許這只是老出版人的私心偏好,不過我認為確實可以從這些介面元件的細節,看出不同線上寫作/閱讀平台的設計背景和理念。
Thumbnail
這裡只針對我自己用到上手的平台來比較,否則不公允。 提出各平台最主要的優缺點,和不同寫作規劃的推薦平台。
Thumbnail
這裡只針對我自己用到上手的平台來比較,否則不公允。 提出各平台最主要的優缺點,和不同寫作規劃的推薦平台。
Thumbnail
日前平台推出許多新內容,包括首頁分類的調整、三個垂直類別的社群、以及同步進行更多徵文題目,還有每週至少一篇的專題導讀。不論是編輯,或作者多少都在流量的無奈下,嘗試找到分眾的讀者群們,在這之中作為書寫者,土炮但真誠地產出內容,大概也是在各種分眾的閱讀市場裡,必需要有的堅持。一起來讀讀八月的趨勢報告~
Thumbnail
日前平台推出許多新內容,包括首頁分類的調整、三個垂直類別的社群、以及同步進行更多徵文題目,還有每週至少一篇的專題導讀。不論是編輯,或作者多少都在流量的無奈下,嘗試找到分眾的讀者群們,在這之中作為書寫者,土炮但真誠地產出內容,大概也是在各種分眾的閱讀市場裡,必需要有的堅持。一起來讀讀八月的趨勢報告~
Thumbnail
《寫作平台大比較》─ 獻給想要寫作的你! 對寫作文字平台很感興趣嗎? 正準備要在網路上發布自己的創作? 不知道該怎麼選擇寫作平台? 那就一定要看這篇寫作平台大比較, 讓你一比就知道!
Thumbnail
《寫作平台大比較》─ 獻給想要寫作的你! 對寫作文字平台很感興趣嗎? 正準備要在網路上發布自己的創作? 不知道該怎麼選擇寫作平台? 那就一定要看這篇寫作平台大比較, 讓你一比就知道!
Thumbnail
關於兩個平台的比較性文章,目前不算多,但相信想要深入瞭解的人有很多,所以我花了一個下午的時間把這篇文章寫出來,算是一點小小的玩耍心得文及貢獻文,有興趣的人都可以進來看一看。
Thumbnail
關於兩個平台的比較性文章,目前不算多,但相信想要深入瞭解的人有很多,所以我花了一個下午的時間把這篇文章寫出來,算是一點小小的玩耍心得文及貢獻文,有興趣的人都可以進來看一看。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News