現代人因科技快速進步,

生活中的大小事情基本已脫離不了電子產品,

尤其科技日新月異,手機拿起來直接搜尋,

往往都能找到想要了解的資訊,打個比方,

和朋友約見面聚餐,

餐廳的地點、評價、營業時間...等,

所有想瞭解的事情就都盡握手中,光明分子亦然。

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

從早期的紙本廣告,

到撰寫網誌、設立網站、臉書...等,

所有的變化,

都是為了讓大家能夠更快速的找到我們,

並獲取需要的知識與資訊。

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

Google Blogger 版本

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

自架官網版

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

無名相簿

 

 

然而隨著時間的流逝,

漸漸舊版官網無法跟上科技的進步,

除了連線速度越來越慢以外,

不夠方便、好用也是常常聽到的回饋。

也因此,即便工程浩大,

官網改版也是勢在必行。

 


 

耗費了許久的工時,

光明分子新官網正式登場!

這次的改版,

為了讓新舊官網的銜接感落差不致過大,

並考慮到 UX(User Experience,使用者經驗)

以及過往所得到的回饋,

我們將舊官網的文章、資訊,

全數搬遷到新官網,

並加入全新功能。

新官網改版的浩大工程、以及龐大的資料庫(真的很龐大...)

讓資訊部門的同事前陣子夜不成眠、半夜都會被程式碼嚇醒...

但這樣的辛苦是有代價的,

經過一陣子的內部測試,

得到的回饋是正向的,

也讓我們終於在今天能夠正式運作新官網。

 

 

 

而新版的官網除了外觀不一樣以外,

到底還有啥不同呢?

這邊就來介紹一下吧!

 


 

剛剛有提到,

在這次的改版,

專業的工程師替我們考慮到了UX

同樣的,

UI(User Interface,使用者介面上)

我們也同樣做了大幅度的變更與進化。

 

首先,

一進到新版本的官網,

可分為幾個區塊:

一、正中間主畫面

二、下方的導覽列

三、左上的跳出式漢堡選單、以及光明分子 Logo

四、右上方的預約點擊鈕

 

先來介紹下方的導覽列跟中央主畫面,

分別是「產品」、「首頁」、「新知」,

每一個選項的下方、都還有箭頭的指標能夠繼續延伸。

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

「產品」:

點下之後,中央主畫面呈現的【新品入荷】,就是為大家準備的第一個變化!

最新款的眼鏡 *照片*將會搶先曝光在這個位置。

以往如果想要知道最新上市的眼鏡品牌,都須要找好幾個分頁,也因為網頁編排的關係、不知道哪一款是最新款。

下圖看到的新版【新品入荷】、點入後所呈現的內容就如同字面上的意思,簡單好懂。

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

而往下之後,【推薦品牌】頁面則是以鏡框品牌做分類,

如果有想要找特定品牌的眼鏡時,就可以直接點選這個欄位。

例如:點下 Mr.Gentleman,就能看到這個品牌從過去、到現在的所有系列產品的照片。

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

第三個【鏡片品牌】頁面,因為鏡片的選項過於龐雜,詳細情況還是得由門市人員作分析,

因此,在這個頁面中、目前只有規劃簡短的鏡片介紹,讓大家了解品牌故事、以及我們有和哪些品牌合作。

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

「新知」:

而對於過去習慣觀看我們的部落格,想透過文字了解更深入的相關知識的朋友們,可以點選右側的「新知」,就會有詳細的文章介紹囉。

舉例來說,有人好奇光明分子究竟運用到了哪些專業儀器,就可以點選【驗光與設備】,了解各種儀器的作用、目的為何。

 

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

 

而往下方繼續點選的【眼鏡知識家】,則是所有關於和眼鏡有關聯的知識文章(偶爾會出現一些比較趣味性質的文章就是了) 

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

此外,【配鏡指南】也是過往的使用回饋之中,常常提到想要有、但卻沒有的功能,我們也趁這次的機會將這個功能規劃進來。 

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

「首頁」:

顧名思義就是會回到網站的初始頁面,當然,眼尖的朋友會發現,正中間的首頁欄位,也可以往下做選單滑動。

往下滑動之後,能看到【預約】項目、以及【門市資訊】。

【門市資訊】包含了目前光明分子六間分店的地理位置、電話、地圖、以及路線指南,讓有需要的朋友都可以快速的知道門市的位置資訊喔!

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

再來、要特別說明一下【預約】了。

以往如果想要預約配鏡的話,除了直接撥電話到門市預約以外,就是從 Facebook 粉絲團操作了。

但畢竟現在社群軟體蓬勃發展,除了 Facebook 以外,更有 Instagram、抖音、Snapchat...等,

有鑒於分別在不同軟體之間建立預約機制過於複雜、冗長,不如回歸最傳統的官方系統,

也因此,這次新網站的重點項目之一,就是線上預約系統。 

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

透過幾個簡單的問題,全部填寫完畢之後送出,就能夠預約完成啦,是不是非常的方便啊~

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

除此之外,預約完成之後的注意事項,也貼心的在預約完成之後會顯示出相關訊息,讓大家開心赴約之餘、也能做好充足的準備喔~

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

當然,除了透過正中央的預約按鈕以外,右上方的預約按鈕,會常駐在公司頁面最右上方,有需要都可直接點選喔~ 

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

介紹完正中央主畫面以及下方導覽列的功能之後,左側還有一個彈出式的【漢堡選單】,

其實,漢堡選單的功能和正中央主畫面是一樣的,那,為什麼我們還是規劃了這個功能呢?

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

 

根據統計,隨著網路速度與手機技術日新月異,使用手機、平板的機率,已經比起使用電腦來得多,

傳統的網頁、漸漸的不符合現在的使用習慣,也因此,這次在設計網站時,考慮到類似的狀況,

在側邊增加一個漢堡選單,讓在行動裝置的人們,也能夠在網站改版的時候、能夠順利、直覺的使用喔!

 

光明分子官網全新改版新風貌【使用全指南】-光明分子.眼鏡

小技巧:除了透過點選以外,還可直接透過筆電觸控板滑動,就能夠移動到想要看的區塊喔!

 

新網站除了上述功能,

其實還有很多的小細節,

暫時,

就留待大家自行探索囉。

 

當然,新版本上線難免會有遺漏、疏失,

也請大家不要吝於給我們指導,

有意見提供給我們,

我們都非常感激、歡迎喔~


 

網站的改版,真的是一個很浩大的工程,

(資訊部的同仁都快瘋了...)

雖然這不是一件容易的事情,但因為早在我們預定調整的行程表之中,

所以還是得做。

況且,為了我們心目中的理想,這樣的改版是必須的。

畢竟,改變有時候不是一件太容易的事情,

但為了要邁向更好的未來,

再辛苦、再麻煩,都是值得的。

也希望透過這次線上的網站改版,

搭配線下儀器的汰舊換新、門市同仁的高品質服務,

能夠持續的,提供最高品質的配鏡體驗給大家。