網頁設計需知

IDOS線上測驗 #官網設計範例

IDOS線上測驗結合數十萬筆適性測驗分析資料庫，為保險從業人員創造便利的開發人才工具，幫助企業找到合適的人才。
https://www.idostech.com/result
 
【以理性可靠的藍色系定調網站視覺，塑造品牌專業性】

根據企業Logo的藍色延伸各種不同深淺的藍色搭配，並適當地留白打造冷靜專業的品牌形象網站，因應企業Logo魚型的設計，整體網站設計也加入許多魚的圖案在背景、icon來凸顯品牌特色，並搭配多種縮放、浮現、流動線條、英文字母描繪等的網頁動畫設計讓整個網站既專業又不顯得死板無趣。
 
✓ rwd響應式網頁設計，視覺最佳化
✓ 多種小動畫設計增加網站趣味性與互動性
✓ 客製化網站，量身打造專屬形象網站



【網站設計架構功能介紹】

1.網頁設計版面規劃：首頁輪播Banner

網站首頁的Banner版位可以自由設定品牌形象圖或是為近期主打活動進行行銷傳播，讓進入網站的受訪者一眼就能知曉品牌風格與活動，幫助品牌吸引受訪者目光，讓受訪者想更進一步了解品牌。




 

2.網頁設計版面規劃：首頁重要資訊

在網站設計的規劃中，首頁不只要有美觀的設計，呈現的內容更是要傳達給受訪者的重點精華，幫助受訪者快速了解網站可以提供什麼，所以在Banner版位下的資訊便是IDOS測驗的3大好處，告訴受訪者IDOS的測驗勝於傳統紙本測驗的優勢，吸引受訪者選擇此測驗來增進徵才效益。







3.網頁設計版面規劃：關於我們

在關於我們的網頁設計中，選用商業大樓的形象圖與幾何圖形來做排版設計，凸顯品牌專業的形象並強化網站的質感，為增加畫面的豐富度，貝爾網站設計公司在此網頁中增加了英文字母自動描繪呈現的動畫設計，讓網站帶有活潑性而不死板。




 

4.網頁設計版面規劃：隨身人才庫介紹

在隨身人才庫介紹的網頁中，分成五個重要版位：三大軟體優勢、線上IDOS測驗與傳統測驗差異、使用測驗選才的三大好處、I-DOS操作實務、IDOS適性介紹5大分類讓受訪者可以一一點入連結查看更多相關的網頁資訊。


 

5.網頁設計版面規劃：資費方案介紹

在資費方案的專頁中，貝爾網站採用簡單大方的排版設計，讓消費者可以對品牌方案一目了然，並在每個方案版位上增添流光動畫設計，當消費者的鼠標移至專案上會有白色線型流光掃過，增加與消費者的互動感。




 

6.網頁設計版面規劃：測驗結果分類

IDOS測驗結果可分為10種型態模式：懷才不遇型、錯位糾結型、薪情不滿型、疲於奔命型、迷茫探索型、組織發展型、自主創業型、小富即安型、自我價值型、經濟壓力型，在此網頁可以先初步認識10種類型人才的簡單介紹，引起消費者對測驗內容產生興趣，產生消費意願。




 

7.網頁設計版面規劃：測驗個案分析

建立測驗個案網頁，讓消費者可透過簡單的個案介紹選擇有興趣的個案點入連結查看詳情，依據實際案例讓消費者對測驗內容產生興趣與信心，增進品牌業績。




 

8.網頁設計版面規劃：賣場

架設獨立賣場網頁，讓消費者知曉品牌在主要業務之外也有其他商品販售可以選購，並可點選商品查看詳細的商品介紹與商說圖內容，幫助消費者更了解商品。