Portfolio

Wavenet Technology 潮網科技

潮網科技為網路行銷策略公司,其網站是由 Visual Composer theme 製作而成。

2018年的年底,WordPress 有個重大的更新,就是把預設的傳統編輯器改為 Gutenberg 編輯器,造成了不少 WordPress 視覺排版的外掛,在更新之後產生一些相容性的問題,不難免看到一些使用視覺排版外掛的網站,更新之後造成了頁面排版的錯位,進而無法順利更新版本。

此次客戶的委託,是考量到之後網站的維護便利性,希望能夠維持原先的版型以及模組,但未來在頁面調整上仍然保有彈性的空間,畢竟客戶本身就是做網路行銷,對於內容的排版呈現有所要求,考慮到網站存取速度的問題,我們將 Visual Composer 移除,並做好頁面及模組的規劃,讓整體網站頁面呈現是有一致性的,簡易了客戶在頁面排版的操作,減少了操作步驟,縮短了新頁面產生的時間,但呈現的效果是一樣的。

形象網站

wavenet-mockup-device
wavenet-mockup-device
wavenet-mockup-device
wavenet-mockup-device

使用模組示意範例 - icon 清單模組

上圖為前台顯示狀態

我們可以參考後台欄位示意圖,了解我們在後台提供給客戶數種不同的 icon 選擇,並透過新增 item的方式,讓客戶依照要欲呈現的資訊,來調整需要顯示幾個項目。

使用模組示意範例 - 流程處理 slider 模組

上圖為前台顯示狀態

我們可以參考後台欄位示意圖,由示意圖看到,每一個流程的項目,我們提供了相關的文字欄位、圖片欄位、連結欄位,讓客戶依照既有的資訊來做填寫,而在一些重要欄位上,我們也會標註「*」字提醒客戶此為必填欄位,若是必填欄位未填寫資料,系統會在客戶按下送出更新的按鈕時,提醒該欄位尚未填寫。

使用模組示意範例 - icon 文字模組

wav-module-4

上圖為前台顯示狀態

icon文字模組在 wavenet 頁面中還蠻被使用到的。我們可以參考後台欄位示意圖,我們規劃了 icon 與標題文字不同的排列方式,雖然在網站中,已有提供數種不同的icon給客戶做選擇,但考量到給客戶更彈性的使用icon,因此我們規劃了客製化 icon 的欄位,提供客戶字型上傳客製的 icon 圖片。

wav-module-4-1

其他作品