Jhane
Jhane

UI / UX 設計師&自由接案設計師&雜食設計師 不定期分享設計領域的相關經驗 〘 完整內容請展開介紹〙 | 所有文章:https://reurl.cc/N6Q2Kp 設計作品:https://deerlight.design/ 原創主題:https://reurl.cc/g84djN

🌰 Medium Tips|內文導引

Design by Jhane Chou
為 Medium 文章製作目錄,提升長篇文章的閱讀體驗!點擊目錄中的章節項目,可直接到達文章的指定章節。
目錄及返回目錄示意圖/Design by Jhane Chou

舉個栗子 🌰 系列文章

讀者建議將 Medium 教學系列分段,比較好吸收與入口 🥣 以下心得以我的帳號示範,若有誤的地方觀迎提醒。

如想看完整的內文導引(目錄)請見本篇的 Medium 原文。

觀念說明

在製作目錄前,需要先了解基本的連結觀念。

錨點(anchor)

錨點是超連結的一種,為特殊的超連結。

Design by Jhane Chou
  • 超連結|跳轉至不同頁面:A頁面→B頁面
  • 錨點|同頁面的不同位置間跳轉:A頁面任何段落→A頁面任何段落

兩者皆使用填入連結的作法,超連結填入頁面的連結網址即可,不過錨點要如何找到它的連結呢?(文章內會說明如何找尋)

目錄的優點
  • 減少使用者負擔:隨心所欲地到達特定章節,不須過度滑動頁面
  • 引導使用者:指引使用者此段落的補充位於何處
  • 文章架構:能讓使用者在閱讀正文前,知道此文章的架構

第一步:製作目錄

🎃 重點提醒 🎃

製作目錄通常為「文章內文完成後」進行!也就是內容皆就定位之後才製作目錄。

正式名稱為「程式碼區塊」由淺灰底及較小的字體組成,詳細可見〈🌰 Medium Tips|句中代碼&程式碼區塊輸入方法〉內有詳細說明。

1. 將文字排列好,並反白文字
將文字排列好,並反白文字/Design by Jhane Chou
2. 使用快捷鍵
使用快捷鍵/Design by Jhane Chou
  • Mac:⌘ + option + 6
  • Win:Ctrl + alt + 6
  • 取消:反白文字,再使用快捷鍵,即可回復

第二步:製作返回目錄

製作「返回目錄」區塊,可讓使用者瀏覽文章時,隨時返回目錄,再從目錄進到想去的章節中!若少了這區塊,使用者必須要上滑至頁面的最上方才會看到目錄,還不如自己滾動頁面尋找想看的章節…?

合適的目錄導引,在不影響閱讀體驗的前提下,須讓使用者能輕鬆找到。

通常我的返回目錄區塊,習慣有兩個部份:

  • 繼續閱讀:告訴使用者,想繼續閱讀的話可不理會此區塊
  • 返回目錄:點我可以返回目錄

製作方式與上一步相同,並放置在每一個章節結束的最後一行;可從以下的示意動圖看他們兩個發揮無間的模樣。

目錄及返回目錄示意圖/Design by Jhane Chou

第三步:找尋段落標籤

1. 開啟頁面檢查

在編輯文章頁面中:

  • 使用 Chrome 瀏覽器,將段落標題文字反白
  • 右鍵點選檢查
Design by Jhane Chou
2. 找到文字段落的標籤

在畫面中找到一段由英文、數字組合而成的編號,通常它的前面會是 name="編號",請將這段編號記下來!

紀錄好之後,關掉檢查視窗,重複「1. 開啟頁面檢查」到這步的步驟。

有幾個導引的段落位置,就會有幾個編號需要紀錄,例如:
一個目錄、四個章節,總共有五組編號需紀錄。
Design by Jhane Chou

第四步:填入段落標籤連結

1. 在「目錄」填入標籤連結
  • 將目錄對應的文字反白,點擊加入連結
  • 填入「#編號」記得編號前要加上#字號,完畢後即可在發布文章後見效
不限於目錄,一般的內文也能做內部連結/Design by Jhane Chou
2. 在「返回目錄」填入標籤連結

別忘了「返回目錄」也必須填入標籤連結,它所對應的標籤為目錄,方法與「目錄」的填入方式相同。

發布文章後,可目錄連結是否都正確無誤 🎉🎉🎉🎉

目錄及返回目錄示意圖/Design by Jhane Chou

文章首次發布於 Medium,目前閱讀的版本為修剪版。


感謝你的閱讀及支持,任何問題都歡迎來信交流|[email protected]

MediumInstagramFacebookDeerlight

讚賞公民 2.0

→ 讚賞公民 2.0 訂閱連結

CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…
加载中…

发布评论