Computer Vision Research Center

視覺:方。

  • 由方形的監視螢幕來監控
  • 由方塊構成的電腦分析
  • 以方格來辨識其中模糊的資訊
  • 將格子像素變小亦即代表解析度的提升。

色調:調整過的紅藍綠

  • 紅藍綠三原色乃光的三原色,無論是視覺或是螢幕顯示都可以由三原色來解析,是最符合電腦視覺的三個顏色,微調後使之成為網站設計時的基本顏色。
  • 暗藍色暗喻未知的背景,並利用輔色的紅色框框來顯示掃描、偵測的功能。
  • 亮藍色代表已知的事物,代表研發中心所發展的技術以及內容,都爐火純青且公開透明,歡迎各廠商來洽談。

整體網站編排

  • 將導覽列設計在下方,有如在操作 Windows 作業系統,左邊的直欄就是開始工作列。
  • 整個中心網站,就像是一部電腦。從研發中心開始,將為您帶來最先進的科技之意。
  • 另外,在版面安排的時候,會考量各區塊的重量配置,希望儘量達到視覺上的平衡,並且期望在各螢幕大小上都有最佳的瀏覽體驗。

安心政府 i-Gov

前言

很幸運的跟幾個朋友合作,參加了一秒搞懂政府網站創意競賽,並且在最後獲得了獎項。

簡介

安心政府 i-Gov 為一整合多方政府單位資訊的入口網站,網站內容以簡單的介面設計與直覺的圖示標明,讓民眾方便快速操作,滿足日常的使用需求。現今,網路空間已經成為生活資訊的取得來源,然而要從海量網頁與超連結中找到明確的資訊,其實非常困難。而民眾生活面臨的大小事,又與政府單位息息相關,所以政府單位更需要單一整合入口,便於民眾瀏覽與操作。

實作

本網站以使用者角度出發,思考、設計出符合使用趨勢與現代風格的入口網站。

JapanEx 制縣傳說

來由

始祖経県値用了Flash技術將日本依據個人的旅遊程度上色,不過輸入方式是最原始的HTML Input元素,不僅難以填寫並且缺乏直觀的地理位置概念,此外Flash早已被各大瀏覽器給放棄使用。我第一次知道這個遊戲是在IG貼文上看到,發現是這個Android App,但無奈我用的是iPhone不能玩,於是心血來潮用SVG自己做一個。

設計

先在Illustrator把日本的圖形畫好之後,每個形狀會帶入圖層名稱作為其ID的標籤,於是就可以在HTML裡被使用。多國語言有搭配Vue.js的Template做樣板,動態載入翻譯文字。

至於計分數的方法,考量到分享的用途,又不想大費周章使用資料庫,於是就索性全部塞在網址裡了XD 缺點就是網址變太長,有點醜就是了。

玩法

  1. 按一下曾到訪過的地區,選擇符合的選項,朝向把47個都道府縣都收集滿的等級235吧!
  2. 可以分享到Facebook上,或者自行保存下來,還可以增加客製化的簽名檔喔。

2018.09.18 更新:

  1. 新增英文版

2018.05.30 更新:

  1. 縣名更正
  2. 所屬地區修正

其他地區版本

感謝熱心的網友們,把日本以外的地區完成,讓我們一起來製作專屬於自己的地圖吧!

台灣:https://travel.tonypai.com.tw/
香港:http://www.thelittleprince.hk/hongkong/

Solar System

1969年阿姆斯壯搭乘美國阿波羅11號登陸月球,現在,你可以透過手機裡的瀏覽器,前往太陽系的每一個角落。針對地球,甚至看得到燈火通明的夜晚!我們不必成為太空人,就能上太空看地球。

設計

利用了開學前的寒假,全力投入的結晶,研究Three.js的物體包覆,以及Camera 的使用,搭配Raycaster已獲取滑鼠在3D視圖中的座標向量所指到的目標等。資料方面則收集了來自NASA官網的行星資訊,從Planet Pixel Emporium下載到大量高品質的地圖素材等,練習使用Require.js,另外由於圖檔較大,在預載之後用到了Microcache.js來做緩存,並且自行寫了函式僅在當下星球使用高畫質圖檔,以減緩瀏覽器渲染的負擔,使畫面更為流暢。

在固定行星上,會將其公轉軸拉至水平面,才不會有畫面歪斜的問題,可以確保最好的星球追蹤品質。

Play Ground

點擊星球,就能夠飛往該行星,以當地視角,一覽不同的宇宙風光,顛覆你對世界的想像。如果太遠或者太小,亦可以透過左側的導覽列,選擇想要前往的星球。


預計更新

  • 將陸續新增各個行星的資訊頁面,以提供更多精彩的行星故事。
  • 多國語言