文章彙整

時間軸在網站設計上的應用

By Steffi 6 months agoNo Comments
首頁  /  其他  /  專案管理  /  時間軸在網站設計上的應用

時間軸具有簡單明瞭、表達方式明瞭的優點而被廣泛應用在網站呈現上,今天,我們特別挑選了幾種實用的呈現方式供讀者進行參考:

標準時間軸 (歐斯瑞公司開發)

適用:區間長,同個里程碑中含少量主題

特色:顯示畫面乾淨明瞭,每個里程碑的事件一目了然,點擊里程Icon顯示該歷程的圖像

示意,點擊事件則閱讀事件詳文。

出處:https://www.mio.com/tw/milestone

 

全螢幕事紀時間軸

適用:事紀

特色: 透過全螢幕表達每個時間的紀事,可運用內容空間大,使用者可清楚讀取,同時可

以透過滑鼠滾輪以及右側快速點選其他頁面。

下方左圖為每個紀事呈現的畫面,下方右圖為使用滾輪切換時的畫面。

出處:http://www.akita.co.uk/computing-history/

 

全螢幕演化時間軸

適用:產品演進

特色: 此時間軸的每個階段使用不同的色塊做區分,每個區塊內容簡單陳述該時期產品名

稱與發行年代,區塊無法進行點選,單純滑鼠瀏覽產品的演進,僅在左側下方置入about

Icon,點入以讀取產品資訊,整體簡單清楚明瞭。

 

出處:http://www.aformulaonehistory.com/#header

 

拼貼時間軸

適用:擁有歷史軌跡

特色:圖文使用矩形不規則排列,凸顯層次感,也因為用小矩形顯示,可以放置的內容較

多。而右方sidebar可進行目錄般的點選,迅速從一堆資訊中找到您所需要的內容,適用時

間久遠內容多的範疇。

出處:https://www.orange.com/sirius/histoire/en/history/

 

動畫時間軸

適用:強調視覺效果的網站

特色:透過動畫讓時間的推演更生動,讓使用者瀏覽的同時有種互動的效果,但由於動畫

效果所占用的資料量大,缺點是於網站使用時Loading會需要較長的時間。

出處:https://www.canalplus.pl/sport/allstar/historia/

 

聚集時間軸

適用:區間長,多事件

特色:年份條列清晰,使用圓形將不同的事件聚集成圖表(有種串葡萄的概念),清楚明瞭

,透過點擊圓形標題進入內文進行閱。

下方左圖為進入網站所看到的畫面,右圖為選擇欲預覽的事件時反色顯示的畫面。

出處:http://v3.danielmall.com/work/

 

推演時間軸

適用:有一定的時間歷程與各里程碑可顯示不同的成果

特色:使用動畫視覺讓您感受時間的飛逝,繽紛的色彩增加您的觀感效果,透過點選里程

碑可以看到當時的事件或產品內容,進入內容視窗後可以直接透過左右點選看到上下個里

程碑的資訊。

 

出處:http://evolutionofweb.appspot.com/?hl=en

 

條柱時間軸

適用;區間較短,每個里程碑要陳述的內容較多

特色:排序清楚,陳述簡單明瞭,透過不同的色塊調整時間軸的視覺效果。

下方左圖為進入網頁所看到的畫面,下方右圖為選取後反色的效果。

出處:http://minimalmonkey.com/

以上,是我們本期為各位帶來的時間軸不同展現方式。

時間軸的運用很多很廣,可以很動畫也可以很靜態,端看對於網站的需求以及網站是否支援對時間軸做不同的運用,而本篇第一個時間軸,是由歐斯瑞於Magento環境中進行開發,歡迎有興趣了解的讀者可以留言,或是到我們的Facebook粉絲專頁與我們聯繫喔!

看更多網站設計與開發,別忘訂閱歐斯瑞電子報 ,每天為你補充電商知識!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  專案管理

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。