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

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

在這歲末年終的寒冬中,總是方格子內部 OKR 大亂鬥的日子;在這驚濤駭浪的新浪潮運動中,工程獅先生心中只想到葛飾北齋的浮世繪《神奈川沖浪裏》那般的浪潮洶湧,張牙舞爪的畫!見浪就如同聽到加勒比海的暴風雪(現在到底是在日本還是加勒比海...)

指尖與鍵盤按鍵的觸及率更是與需求一樣持續漲停板~( ´▽` )ノ

沒錯,在近幾波的新浪潮改版運動中,相信眼尖與眼不尖的格友們都已經有留意到我們的重大功能更新,也就是「新版編輯器與發布工具」

各方回饋們,我們都看在眼裡,烙在心裡。

從新版編輯器上線後到此時此刻,我們看到了作者群、讀者群都有很多熱烈的討論,也收到許多正反兩面的使用回饋,有操作問題回報、邏輯問題、小蟲問題,也有看到許多創作者對新功能感到驚喜萬分。

這些聲音,方格子都聽到了!也很高興大家可以一同參與、分享編輯器寶寶出生的喜悅(父母笑淚中)。這些都將是方格子新編輯器持續優化與成長的養分,大家提到的問題,我們也都正在處理中,請大家不用擔心。

那麼話不多說、事不宜遲、姐就想聽、哥就想看!讓我們來帶領各位走進編輯器的精神時光屋,看看這一切的一切,是如何種下種子與開花結果......

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

設計面

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

開發面

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

使用者思維考量

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

新編輯器介紹文傳送門

相信有在 follow 方格子官方帳號的各位格友們,應該有發現我們針對新編輯器,撰寫了一系列的介紹文,工程獅獅直接在此 BJ4 隆齁哩:

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

同時,我們也訪問了設計獅們的心聲,並且歸納了以下幾個核心概念來跟大家分享。

關於新介面設計

設計動機

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

多介面操作情境

章節目錄
其實這也是過去許多作者一直敲碗的功能,在章節目錄裡,我們也承襲了方格子編輯器「所見即所得」的概念,編輯到哪,目錄就跟著長到哪!設計上也把簡約的風格融入介面設計中。

工具列
由於行動裝置小螢幕的特性,在創作環境的版面上,我們需要從網頁版的眾多功能中做出取捨,挑選創作者們編輯時最常用的幾個功能,讓文思泉湧的你,不用等到回到電腦桌前,也可以立刻拿起手機記錄生活!(歡迎大家右轉前往參戰迷因大賽主題徵文

方格子過去一直是以網頁為主的編輯器,針對手機版本的推出,設計獅獅們參考了多種 APP 版本的文字編輯器,並且去蕪存菁,以符合現今大多數人在手機編輯的習慣與操作模式,讓使用上可以更貼近原生 APP 的操作體驗。(APP的敲碗我們也有聽到!)

閱讀體驗優化

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

功能回顧與概覽

上述我們提及了方格子編輯器與發布工具重構的來由與脈絡後,你是否已開始有所心動,想要趕快手刀寫一篇方格子的好文了呢?

別急別急,在你開始按下頁面右上方的「開始寫作」按鈕之前,讓工程獅獅我來為你做最後的整理,概覽一下新編輯器與發布工具的新玩意兒~如果想跟親朋好友介紹我們的編輯器,可以直接把這一段當作 cheat sheet 分享出去:

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

最後的最後,一定要分享:

新的編輯器只會持續強大,在還掉了技術債後,我們更是會快速迭代,持續擴增、實做出大家敲碗許願的各項功能!ᕙ༼ຈل͜ຈ༽ᕗ

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

本次編輯器&發佈工具改版,工程獅、設計獅、PM、格編們、老闆大衛,大家歷經了線稿、流程圖、程式碼、腦力激盪、測試除錯的腥風血雨,沒日沒夜、沒聚餐沒朋友地討論、測試、修正、討論、測試、修正、討論、測試、修正......

雖然說是改版,但實際上我們等於重鑄了一套編輯器&發佈工具,而現在作業系統、瀏覽器與裝置螢幕大小琳瑯滿目,確實沒辦法全部購入來測試。而有時同一組合機型也會有些微的差異,所以我們會盡全力修正,希望在一月上旬能提供一個更穩定的版本,讓更多人用得更順手。

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

技術端的難度當然不在話下,而更重要的是希望平台的資料架構、邏輯的導正、技術的推進,能讓方格子立下更好的平台基礎,才能迎接更多挑戰,也希望用更清新、成熟的平台形象與技術質感,來讓格友們與方格子共創內容有價的夢與真諦。

說到這,我可要來煮一杯熱熱的、雜了些「汗水」、「苦水」、「心血」的三合一味噌湯!方格精神怎來的我就問? (撇頭望了一眼電腦右下角的小時鐘,覺得還是不要問了......)

在最後,容我放一首三毛與李泰祥詞曲共舞的「一條日光大道」!放下去 Chill 一波!

在此也祝大家聖誕快樂!

你以為我是排程發佈,但其實是一寫好就立刻發佈的
工程獅先生一鞠躬!

留言
avatar-img
留言分享你的想法!
可藍-avatar-img
2021/12/30
辛苦標準碼農的耕耘者啦! 話說我想知道如何用手機版插入YouTube的影片(舉手)
莊凱仲 Ivan-avatar-img
2021/12/25
謝謝工程獅先生還有方格子團隊!辛苦了
工程獅先生-avatar-img
發文者
2021/12/26
♧♧
王小花-avatar-img
2021/12/25
太讚了! 聖誕快樂!
工程獅先生-avatar-img
發文者
2021/12/25
Merry Christmas ✻❄
終於有手機版!好正啊!但是手機寫文章有時候會跳來跳去,明明我在打第10行的文字,但cursor 會跳到第2行,這是為什麼呢?
工程獅先生-avatar-img
發文者
2021/12/25
有收到類似問題反饋,我們也會盡力改善,可以的話,請你寫信到幫助中心,幫忙提供你的手機作業系統&瀏覽器,這樣會更有幫助~(獅獅謝謝你) 幫助中心:writer_support@vocus.cc
靜的星空-avatar-img
2021/12/24
呃...有沒有加班費阿...太血汗了吧....台中一中街,有一家姜蘇涼麵有賣一種湯:真的是「三合一味噌貢丸蛋花湯」。就是貢丸湯+味噌湯+蛋花湯。超級好喝,澎湃,整顆蛋打下去的蛋花附蛋黃。有空來台中吃吃,超推薦!涼麵醬汁超入味麵條。(歹勢一整個歪樓,美食留言😝)嗯文章介紹超詳細,要親自體驗方能了解。感謝排版豐富的介紹文,那個顏文字表情符號很強!!!!!我第一次看到!!!^_______^ 我只會這類 自創的 π_π ,¶_¶ 😆
工程獅先生-avatar-img
發文者
2021/12/25
讚!
avatar-img
方格子 vocus 官方沙龍
350.9K會員
3.2K內容數
哈囉,歡迎來到方格子 vocus 的官方沙龍! 在這裡你可以參與方格子 vocus 的發展旅程,接受到所有關於 vocus 的最新動態,包含平台重大功能更新、活動消息、各房間發佈的最新內容,甚至是徵才資訊等等,現在就按下「加入」,與 vocus 一起展開精彩的創作冒險吧!
2023/03/02
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
2023/03/02
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
2022/09/14
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
2022/09/14
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
2022/06/10
向大家分享新功能,它叫做 —— 漸進式網頁應用程式(PWA, Progressive Web Application)!從今以後,你可以將方格子首頁加入你的手機桌面捷徑,就可以用更乾淨簡潔的畫面瀏覽方格子!
Thumbnail
2022/06/10
向大家分享新功能,它叫做 —— 漸進式網頁應用程式(PWA, Progressive Web Application)!從今以後,你可以將方格子首頁加入你的手機桌面捷徑,就可以用更乾淨簡潔的畫面瀏覽方格子!
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
寫好文章有百利無一害,機會是留給有準備的人。
Thumbnail
寫好文章有百利無一害,機會是留給有準備的人。
Thumbnail
(底下圖片由方格子的「迷因懶人包」提供) 方格子編輯器簡潔俐落,我很喜歡。而在之前,我知道了方格編輯器更新的時候,我的心情是: 作者:默默無名 (此文章參加迷因大賽)
Thumbnail
(底下圖片由方格子的「迷因懶人包」提供) 方格子編輯器簡潔俐落,我很喜歡。而在之前,我知道了方格編輯器更新的時候,我的心情是: 作者:默默無名 (此文章參加迷因大賽)
Thumbnail
從新版編輯器上線後到此時此刻,我們看到了作者群、讀者群都有很多熱烈的討論,也收到許多正反兩面的使用回饋,有操作問題回報、邏輯問題、小蟲問題,也有看到許多創作者對新功能感到驚喜萬分。 這些聲音,方格子都聽到了!
Thumbnail
從新版編輯器上線後到此時此刻,我們看到了作者群、讀者群都有很多熱烈的討論,也收到許多正反兩面的使用回饋,有操作問題回報、邏輯問題、小蟲問題,也有看到許多創作者對新功能感到驚喜萬分。 這些聲音,方格子都聽到了!
Thumbnail
從前幾天看到方格子推出新版編輯器,原本還覺得有點興奮地躍躍欲試,但那晚發文花了我超級多時間,而且越試心情越差,當然只要是新的事物就會需要時間去習慣,一開始也覺得應該是自己不夠熟悉的關係,但後來很確定是這新版編輯器很-------難-------用--------- 經常轉圈圈轉不停:
Thumbnail
從前幾天看到方格子推出新版編輯器,原本還覺得有點興奮地躍躍欲試,但那晚發文花了我超級多時間,而且越試心情越差,當然只要是新的事物就會需要時間去習慣,一開始也覺得應該是自己不夠熟悉的關係,但後來很確定是這新版編輯器很-------難-------用--------- 經常轉圈圈轉不停:
Thumbnail
趁著新版的編輯器啟用,藉著發這篇文,再體驗一下有哪些使用體驗不良的地方。接著要說點站方或作者可能不是很愛聽的。
Thumbnail
趁著新版的編輯器啟用,藉著發這篇文,再體驗一下有哪些使用體驗不良的地方。接著要說點站方或作者可能不是很愛聽的。
Thumbnail
2021年,在疫情時代影響下,是世界急速變革的一年。方格子的會員總人數也突破26萬大關,數位趨勢更複雜變動的大環境下,我們選擇再次回歸初心思考,創作者和讀者們想獲得怎樣的創作和使用體驗?「更加便捷」、「更加舒適」、「更加隨心所欲」?
Thumbnail
2021年,在疫情時代影響下,是世界急速變革的一年。方格子的會員總人數也突破26萬大關,數位趨勢更複雜變動的大環境下,我們選擇再次回歸初心思考,創作者和讀者們想獲得怎樣的創作和使用體驗?「更加便捷」、「更加舒適」、「更加隨心所欲」?
Thumbnail
日前平台推出許多新內容,包括首頁分類的調整、三個垂直類別的社群、以及同步進行更多徵文題目,還有每週至少一篇的專題導讀。不論是編輯,或作者多少都在流量的無奈下,嘗試找到分眾的讀者群們,在這之中作為書寫者,土炮但真誠地產出內容,大概也是在各種分眾的閱讀市場裡,必需要有的堅持。一起來讀讀八月的趨勢報告~
Thumbnail
日前平台推出許多新內容,包括首頁分類的調整、三個垂直類別的社群、以及同步進行更多徵文題目,還有每週至少一篇的專題導讀。不論是編輯,或作者多少都在流量的無奈下,嘗試找到分眾的讀者群們,在這之中作為書寫者,土炮但真誠地產出內容,大概也是在各種分眾的閱讀市場裡,必需要有的堅持。一起來讀讀八月的趨勢報告~
Thumbnail
跟傳統媒體不同,面對數千位寫作者的方格子編輯,無法像傳統編輯那樣,逐篇校對文章,與寫作者溝通討論。即使如此,我們仍每天盡力瀏覽文章,觀察總體趨勢。方格子團隊計劃推出每月兩次的「方格子聊聊」,提供最近的平台文章觀察與常見的寫作建議,以及最新的網站開發進展。雖然無法當每個人的專屬編輯(除非使出多重影分
Thumbnail
跟傳統媒體不同,面對數千位寫作者的方格子編輯,無法像傳統編輯那樣,逐篇校對文章,與寫作者溝通討論。即使如此,我們仍每天盡力瀏覽文章,觀察總體趨勢。方格子團隊計劃推出每月兩次的「方格子聊聊」,提供最近的平台文章觀察與常見的寫作建議,以及最新的網站開發進展。雖然無法當每個人的專屬編輯(除非使出多重影分
Thumbnail
方格子編輯室來報告!本週台灣的肺炎疫情急轉直下、股票瘋狂起落,但我們寫作不能斷,跟大家繼續聊聊最近的第一手觀察,還有編輯私心推薦的專題,以及「LikeCoin讚賞鍵」正式上線囉!想閒聊,趕快請進。
Thumbnail
方格子編輯室來報告!本週台灣的肺炎疫情急轉直下、股票瘋狂起落,但我們寫作不能斷,跟大家繼續聊聊最近的第一手觀察,還有編輯私心推薦的專題,以及「LikeCoin讚賞鍵」正式上線囉!想閒聊,趕快請進。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News