東莞高恩

東莞高恩 - 網站製作案例

東莞高恩 - 網站架構介紹

網頁連結定位、產品型號分類

東莞高恩 是以紡織相關機械為主要經營項目,在網站架構計畫時決定將企業形象、產品介紹、線上詢價等三大面向作為架設主軸,在網站需加入的內容較為多樣性的情況下,每一頁面均建立網頁區域定位連結,當瀏覽網站時可以透過主標題下方的快速連結按鈕,直接到達對應資訊區塊,提高使用者觀看網站時的流暢度。

在最重要的產品展示頁面中,與一般網站將產品分類連結直接建立在主選單中不同,而是將分類連結設計為縮圖與文字按鈕,以分層頁面的呈顯方式逐步引導使用者到達想要觀看的機械項目中,不需要透過較為密集的選單連結文字逐一找尋。在瀏覽器視窗中操作上下頁按鈕,就能以簡單的方式找到所需內容。

網頁元素設計理念

網頁載入動畫、圖片透明視差、品牌漸層主色

企業建立形象網站在視覺上必須具有特點,才能引起瀏覽者繼續觀看的興致,尤其是以傳統產業轉型數位行銷為目標的公司,更要利用較為活潑的呈現方式來打破既定印象,因此特別以 CSS 動畫為網站元素設計載入動畫,而固定資訊像是新聞中心的網格列表,也以游標懸浮方式顯示連結,為企業網站品牌建立生動鮮明的視覺效果。

根據網頁瀏覽統計,網頁標題區塊的設計好壞,將影響使用者繼續觀看網頁的意願,在本次案例中將漸層圖形與產品圖片結合,豐富的色彩效果搭配機械圖片懸浮,讓整體網站看起來更具專業度。

網站架設特色功能

Lightbox 懸浮圖片輪播、線上產品詢價 、客製化 Google 地圖

除了介紹機械詳細資訊,企業主也提供產品製作流程希望加入到網站中,根據資料素材特性,決定以 Lightbox 燈箱效果展示製造流程圖,以全螢幕輪播圖片的樣式可以讓使用者不需調整瀏覽器百分比,就能看到清晰的圖片內容,在使用者網站體驗上有相當加分的效果。

如果網站具有購物功能,整體而言會變得相當複雜,而且也容易使用過多主機資源導致網站載入速度變慢,而折衷的辦法就是採用詢價車,對於大型產品或提供批量訂購的企業而言,詢價車同時具有讓使用者對感興趣的產品馬上聯絡的呼叫行動(call to action)特色與簡化操作聯絡表單流程的功能,讓使用者在商品頁時能立即向企業聯絡,提高諮詢意願。

客製化 Google 地圖加入動畫效果可以讓企業標示更加顯眼,減少使用者捲動底圖找尋標記的同時,也避免掉捲動畫面時地圖受影響方位錯亂的情形。

關閉