只有氧氣能超越氧氣 超可愛4.0全新介面

氧氣編輯器Oxygen一直是Andy的最愛,也是三原為客戶挑選過最靈活自由的工具。曾經我也想過,是不是應該迎合大眾的需求,同時提供Elementor等其他工具呢?

經過思考過後,還是決定以減法的思考為初衷,穩定的持續使用氧氣這套工具,沒有為什麼,因為「回不去了」,當越是熟用氧氣,就越會對限制很多的編輯工具感到綁手綁腳。

開始使用氧氣是從3.7開始,直後一路用到了現在的3.9,有發現氧氣團隊持續的默默的進步,很多人總會說,為什麼不出多一點元件啊,為什麼不改善xxx呢?為什麼不新增XXX功能呢?但其實,真的有使用氧氣的人都知道,其實氧氣團隊花了很多心思,優化各種細節。

最近讓氧氣用戶期待的4.0終於來到測試階段了,身為氧氣愛好者,甚至是氧氣狂熱分子,當然要好好的來用看看,果然!3.9到4.0的確是一個全新的革命,就來看看更新了什麼吧!

更簡潔的介面

新的氧氣把介面全部改版了,簡化了很多流程細節,簡單來說,扁平化了整個設定的面板,並將RWD的設定直接拉出來到整個面板上,讓我們更輕易的能夠控制RWD的設計。

而icon的部分,也從比較粗糙的設計轉化成比較細緻的線稿設計,更加貼近全新的UI設計理念概念。而工具的排列也從過去圖示為主兩欄,改成了條列的方式,圖示放大也更加清晰,讓我們更快速的可以知道元件的用途。

右側的部分,捨棄了看起來比較醜的介面,全部扁平化設計,將面板切換的功能全部扁平化設計,整體更加簡約高大尚,也更符合了減法思維的設計。

編輯載入快速又可愛

讓氧氣用戶一直詬病的編輯器載入速度,在4.0版本大幅度的改版,快速到,Andy要截一張圖都要好幾次呢,不然就咻一下就消失了。

轉圈圈的齒輪,變成了有圖示動畫的進度條,讓等待進入的時間更加充滿趣味性,但不管以前的慢速載入還是新版的快速載入,都比某工具常常無法載入還要好。

結構面板 拖曳順暢又可愛

真是不好意思,又用了可愛這個詞,但是真的很可愛啊!又剛好迎合了紫色控的我,不得不說,氧氣真的越來越懂得,那些熱愛用氧氣的怪咖們的心。

4.0版本的結構面板,多了一些小圓角,拖曳更加的順暢,不會出現拖不到指定位置的尷尬,而且點選到物件,會快速的滑動到物件,在頁面內點選物件,也會以醒目的顏色提示目前點選的物件,在設計流程上更加得心應手。

樣式控制來源提示

使用氧氣的都知道,氧氣的根本是CSS Class,但是有時候我們在設計過程中,會不知道一個元件的樣式設定,是透過Class控制還是透過ID控制,常常需要透過記憶或是透過尋找,才能確認。

在新版的氧氣介面中,新增了提示小細節,如果看到的是藍色,那麼代表控制樣式是來自於id,如果看到是綠色的線段,那麼表示控制樣式的是來自於class,不過是哪一個Class那就沒說明了。忘記藍綠的差異也沒關係,滑鼠移到線段上,就可以看到提示了。

圖片的插入來源對調

在4.0版本以前,插入圖片預設是來自於網址,「URL」的按鈕是放在前面的,而新版的氧氣,則是放到了後面,以圖庫插入的方式為預設值。

這個的差異在於,由於預設是用URL插入,而且預設都還是絕對網址,所以在搬家或是網域有更換的時候,就會發現圖片會失效,那麼改成圖庫id插入的狀況,對於新手比較友善,也比較可以避免搬家後圖片丟失的狀況。

圖片控制更多元

加上Lazy Load:載入效能增加。
加上Object Fit:動態裁切圖片不需要寫CSS或是放背景,更利於RWD、SEO跟CDN。

JSON格式的內容

過去都是靠shortcode來傳遞、複製網頁的設計內容,現在新增了JSON格式,要分享、複製內容就更加方便快速了。

而Shortcode功能也從過去很容易誤觸造成錯誤的模式改成了READ ONLY模式,這樣在複製的時候,就不會不小心修改到短碼內容。

其他修改

顏色小方塊改成了方形:過去圓形比較可愛,但是面積太小有時候辨識比較困難,但是改版過後變成正方形,搭配一點點圓角,可以最大面積查看顏色,也不會失去可愛程度。

內外距的控制排版省空間:從過去圖像化的上下左右,改成了同一列的上下左右,節省了螢幕空間,但是比較沒有過去那樣直覺。

Andy Yuan

知識管理系統顧問,天馬行空想法爆棚的男子,擁抱科技也反科技,熱愛跨領域學習與心流古典黑白攝影。文章散見於官網與方格子,分享主題: (1) 學習與知識管理 (2) 網路架站市場觀察 (3) 內容SEO 等。
Acorn三原減法架站

訂閱知識萃取週報

每週一篇專屬內容!主題:雜誌、書籍閱讀心得
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x