方格子開發誌#8｜新編輯器與發佈工具 ft. 三合一味噌湯

過往編輯器的問題與改動緣由

設計面

• 其實舊編輯器也是經過時間的歷練（諸多調整後）的成果，除了色調活潑了點、不符合未來方格子品牌的設計方向外，基本上已讓人習慣操作。當然過去存在的「效能問題」需要優化這一點，是難以簡單切分為設計或技術面問題的。

開發面

• 網頁前端技術演進快速，舊編輯器在功能維運上，卻未跟上技術腳步。
• 過去使用舊編輯器時，存在一些功能瑕疵，在經過工程獅獅努力補丁的過程中，也已發現許多開發上可以再優化、更好的方向，甚至能因此提升效能表現。
• 隨著產品的規模成長，也發現新舊商業邏輯已交織在程式碼中，對於未來想要實踐多情境編輯或更多應用的前提下，這已是硬傷且無法實現！
• 資料層級從屬錯亂，且產生矛盾，這在現在或可知的未來，將會造成更多衝突、同時無法預知影響範圍。

使用者思維考量

• 從讀者行為切入 標示著付費文章卻不需要付費、專題付費開關打開卻未有方案、免費專題裡面混雜了需要付費的 Premium 文章，常讓許多讀者產生黑人問號，而令我們覺得可惜的是，這也錯失了一次次幫創作者爭取到付費讀者的機會......
• 從作者行為切入 許多功能的原始立意，並非實際被應用的方式，但透過各式各樣活躍的應用，也更讓我們明白創作者背後需要的是甚麼。而此時此刻，隨著創作者增多，我們在新編輯器與發佈工具推出的進程中，也嘗試在資料層級與作者們的應用方式建立出更完善的架構，希望讓方格子的內容生態更能穩健成長。

💡 基於以上種種原因，讓我們萌生了踏上重構編輯器與發佈工具的日光大道之不歸路上！是的，我們「重鑄」了一套新版編輯器與發佈工具！（Rock）

新編輯器介紹文傳送門

1. 方格子聊聊#20｜編輯器2.0 精彩推出！盡情創作，一「手」掌握
2. 編輯器教學
3. 編輯器教學（手機版）
4. 準備發佈內容的細節設定

關於新介面設計

設計動機

在過去快速迭代、開發的背景下，設計元件也累積不少設計債，透過這次改版，一併整併編輯器的 Icon 與品牌色應用，讓整體呈現更具有品牌的一致性。

多介面操作情境

章節目錄 其實這也是過去許多作者一直敲碗的功能，在章節目錄裡，我們也承襲了方格子編輯器「所見即所得」的概念，編輯到哪，目錄就跟著長到哪！設計上也把簡約的風格融入介面設計中。 工具列 由於行動裝置小螢幕的特性，在創作環境的版面上，我們需要從網頁版的眾多功能中做出取捨，挑選創作者們編輯時最常用的幾個功能，讓文思泉湧的你，不用等到回到電腦桌前，也可以立刻拿起手機記錄生活！（歡迎大家右轉前往參戰迷因大賽主題徵文） 方格子過去一直是以網頁為主的編輯器，針對手機版本的推出，設計獅獅們參考了多種 APP 版本的文字編輯器，並且去蕪存菁，以符合現今大多數人在手機編輯的習慣與操作模式，讓使用上可以更貼近原生 APP 的操作體驗。（APP的敲碗我們也有聽到！）

閱讀體驗優化

在這次編輯器的視覺改動上，設計端做了引言樣式調整、段落間距優化、行距字級大小的重新定義，讓整體編輯器與文章閱讀頁面的閱讀體驗，都能夠在這次改版中有所提升，同時也讓文章在作者與讀者之間帶出沉浸式創作體驗，減少了編輯與閱讀上的干擾，同時也讓視覺上更統一、更成熟而乾淨。

功能回顧與概覽

• 編輯器的介面設計簡化色調，帶出由創作者主導的寫作專注感。
• 我思故我在！編輯器支援手機、桌機瀏覽器，讓你躺著、坐著、站著都能創作！
• 所見即所得！編輯到哪存到哪！就連發布工具的選擇也不例外！
• 設定上能透過每一個步驟選擇，由系統自動幫你過濾、梳理文章發布流程的眉眉角角。
• 新增章節目錄導覽，讓你在編輯當下快速來回文章段落，精準掌握內容大綱。
• 工程師們有福了，新編輯器新增了分享程式大小事的好幫手： code block、markdown 功能。

結語：我們已正在規劃更加完善的版本

持續收到的意見、回饋、抱怨、鼓勵，開發獅獅團隊都有聽到！有聽到！！有聽到！！！（眼神確認）(◕‿◕ ❀