從小地方看閱讀平台的設計
閱讀時間約 4 分鐘
或許這只是老出版人的私心偏好，不過我認為確實可以從這些介面元件的細節，看出不同線上寫作／閱讀平台的設計背景和理念。
我從1990年代初期至今，已經嘗試使用過無數的線上寫作平台、甚至自己也設計過。雖然現在已經沒時間自己架、自己設計，都得用現成的，但對於各個平台的設計還是會有些想法，可能的話也會提供意見，反映給經營者作為參考。
平台設計的面向很多、也很廣，包含技術的、功能的、視覺的、後台體驗的等等，但這篇我想提的是一個小地方。對於有出版品編輯和設計經驗的人而言，這其實是個能看出介面設計者是否懂（傳統）出版、是否具備整體的設計美感。
這是個雞毛蒜皮的小點，我相信無論怎麼做，技術上都不困難，只是花一點心思、多寫一兩行碼的差異而已。
那就是各平台文章中的「分隔線」設計。至於我為什麼會特別看這一點，等最後再來談。
首先是「Vocus／方格子」平台的版本：
就是一條橫貫整個文字段落寬度的細線，基本上就是一個「<hr>」標籤搞定。
接下來是我自己目前用來發電子報的「Substack」平台，是一條更細的長橫線；同樣也是「<hr style=」等級。
而最近開始試用的「Matters」平台則稍微不太一樣，是兩條平行的短線；也是「<hr>」的變形：
「Medium」平台上用的，則是我目前最喜歡的「三個點居中」，是用不太一樣、但複雜度也差不多的「<hr class=」手法做的（所以我說程式複雜度沒有差多少）：
為什麼說我自己最喜歡Medium的「三個點」版本呢？道理有兩個：
- 這個功能的目的到底是什麼：並不只是在於「視覺上的區隔」，而是同一個章節中的語氣和內容轉換。而因為是轉換，所以讓作者的語氣、以及讀者的閱讀「不中斷」是很重要的。所以就這一點來說，「一根橫線到底」的設計就是不及格的，而且這樣的設計也很沒有美感。
- 與書籍類似：「三個點」無論在中英文書籍上，都是很常見的設計；所以對於書籍讀者來說也比較熟悉，在閱讀較長的文章時，比較不容易有一直被打斷的感覺。
如果介面設計者熟悉傳統出版、或者重視閱讀體驗的細節，就比較會在這上面（以及其他許多介面元素上）下功夫，讓寫作者和讀者在這個空間中都願意停留比較久、並且獲得更好的閱讀觀感。
理論上當然編輯器提供的選項越多越好，像是本文提到的「分隔線」，如果有幾十種可以選不就更好？
那倒也不一定。因為提供的選項越多，就可能把排版功能介面弄得越複雜；而且如果是不擅長排版、但喜歡嘗鮮的人，就可能會因為「亂用」而搞出大雜燴。
雖然這或許也是一種「個人風格」，但如果整個平台上有很多作者因為排版太過不專業而搞得太花俏，對於平台想建立的形象也會多少有些影響。這也是作為這類平台始祖的Medium，在排版功能設計上（雖然有些人抱怨）還是「寧缺勿濫」的部分原因。
而正因為其實功能選項不多（特別是相對於「什麼都可以改」的自架WordPress平台之類），所以在這些功能的設計上，更應該花心思去研究使用者的行為，在「簡潔易用」、「排版變化」、以及「使用體驗」之間做出比最好的妥協。
至於我自己的偏好，除了前面提過在現成平台上我喜歡用Medium的「三個點」之外，當我還在用WordPress平台時，自訂的是模仿英文書古典排版的這個設計：
是不是（我自認為啦）既典雅、又明顯、而且不會打斷閱讀，比單單一條橫線好看得多？
再告訴大家一個秘密：現在在Medium以外的平台上，我都是用Medium的「三個點」抓圖，然後貼進編輯器來用。
說不定也會開始回頭用上面的那片葉子吧。
對了：
- 其實我在本文中刻意使用太多分隔線，來強調我的觀點、並且讓大家看看對排版效果的影響。
- 首圖中的那個「§」符號，在書上也是可以拿來當作分隔功能的，甚至可以說是更正統的符號，但我覺得沒有葉子好看。🙂
- 另外，是不是會覺得這篇文章的排版看起來有點亂？這是因為大多數的平台，都沒有提供圖片加框、或是加陰影的選項。在Medium上因為可以將圖放大、往左右凸出一點，所以還好，其他平台就沒辦法了。
為什麼會看到廣告
784會員
258內容數
生涯橫跨科技、出版、行銷顧問業；曾創立過多家數位媒體，並擔任雜誌總編輯與社長。專注商管、網路、科技、語言、軍事等領域；曾任教大學中文系，並擔任電動車系統公司行銷長。目前為企業與新創公司媒體策略、產品行銷、語言應用顧問，提供品牌再造與中英文文案教學等服務。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
關於「性能量」有兩個很重要的觀念，但你幾乎從未被教導過。為什麼我們一直被教導「性是邪惡」的觀念呢？明明幾乎每個人都非常喜愛「性」，但卻會說「性」那是檔骯髒事。
有鑒於年輕學子對於環保愛地球的意識缺乏，本住愛地球學院與線上美語學習平台 OiKID 合作，打造出全台第一個提倡「環境永續」的線上英文教學平台，課程預計於今年 7 月 7 日上線，讓孩子在學英文的同時也能愛地球。
環境永續教材缺乏，新生代對氣候變遷議題無感
綠色和平組織過去曾針對全台各縣市高中教師
擁有上千觀眾的實況主若是跳槽到其它平台，那麼這幾千人的觀眾便會注意到該平台的存在；儘管這些觀眾並不完全願意隨著實況主跳槽，但至少起到了聚焦的效果。對於新平台來說這是個好機會，如果能趁勢把握焦點，好好宣傳自家的優勢，那自然是有益。
然而說是這麼說，這樣的策略也早已有許多平台付諸實行了。但它們成功了嗎？
聽到酒店會想到啥？制服店、禮服店、便服店、宇宙大爆炸，還是一直都很擔心酒店能不能重新開張的柯文哲？韓國瑜要被罷免了，所以很低調，最近沒什麼金句。但柯文哲不一樣，很怕沒聲量、被邊緣化，現在一堆防疫議題，像是紓困可以打，反而柯文哲不打，專挑酒店議題來打。
從13篇關於公司治理的新聞事件，作者從中抽絲剝繭的說明治理一家公司的重要性；一般的私人企業小公司若只是基於自己的產品守成，並固守既有的領域，往金融市場募資並非必要，除非公司研發的產品需要更多的資金加入，才能吸引更多優秀的人才或購買更精良的儀器設備，充實公司內在的價值，以利更進一步邁向更大的市場。
公
<p>朱立倫提名王如玄為副手以來，國民黨在總統選戰的打法完全失焦，只能拼命防禦排山倒海的攻擊。王如玄在炒作軍宅上的道德爭議仍有待討論，不過因為她只是副總統，重要性較低，是以不妨來觀察朱立倫如何處理王如玄的炒房爭議。首先是「合法就是合於道德」，這種主張有問題。「法律是道德的最低標準」這觀念雖然不盡正確，但至少突顯我們的道德標準與法律標準存在落差。因此朱立倫一再強調王如玄行為合法，其實沒辦法解釋為什麼這種行為在道德上可以接受的，因為「合法」之事在道德上仍可能有錯。這就是你「怪怪感覺」的第一個來源。</p>
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
關於「性能量」有兩個很重要的觀念，但你幾乎從未被教導過。為什麼我們一直被教導「性是邪惡」的觀念呢？明明幾乎每個人都非常喜愛「性」，但卻會說「性」那是檔骯髒事。
有鑒於年輕學子對於環保愛地球的意識缺乏，本住愛地球學院與線上美語學習平台 OiKID 合作，打造出全台第一個提倡「環境永續」的線上英文教學平台，課程預計於今年 7 月 7 日上線，讓孩子在學英文的同時也能愛地球。
環境永續教材缺乏，新生代對氣候變遷議題無感
綠色和平組織過去曾針對全台各縣市高中教師
擁有上千觀眾的實況主若是跳槽到其它平台，那麼這幾千人的觀眾便會注意到該平台的存在；儘管這些觀眾並不完全願意隨著實況主跳槽，但至少起到了聚焦的效果。對於新平台來說這是個好機會，如果能趁勢把握焦點，好好宣傳自家的優勢，那自然是有益。
然而說是這麼說，這樣的策略也早已有許多平台付諸實行了。但它們成功了嗎？
聽到酒店會想到啥？制服店、禮服店、便服店、宇宙大爆炸，還是一直都很擔心酒店能不能重新開張的柯文哲？韓國瑜要被罷免了，所以很低調，最近沒什麼金句。但柯文哲不一樣，很怕沒聲量、被邊緣化，現在一堆防疫議題，像是紓困可以打，反而柯文哲不打，專挑酒店議題來打。
從13篇關於公司治理的新聞事件，作者從中抽絲剝繭的說明治理一家公司的重要性；一般的私人企業小公司若只是基於自己的產品守成，並固守既有的領域，往金融市場募資並非必要，除非公司研發的產品需要更多的資金加入，才能吸引更多優秀的人才或購買更精良的儀器設備，充實公司內在的價值，以利更進一步邁向更大的市場。
公
<p>朱立倫提名王如玄為副手以來，國民黨在總統選戰的打法完全失焦，只能拼命防禦排山倒海的攻擊。王如玄在炒作軍宅上的道德爭議仍有待討論，不過因為她只是副總統，重要性較低，是以不妨來觀察朱立倫如何處理王如玄的炒房爭議。首先是「合法就是合於道德」，這種主張有問題。「法律是道德的最低標準」這觀念雖然不盡正確，但至少突顯我們的道德標準與法律標準存在落差。因此朱立倫一再強調王如玄行為合法，其實沒辦法解釋為什麼這種行為在道德上可以接受的，因為「合法」之事在道德上仍可能有錯。這就是你「怪怪感覺」的第一個來源。</p>