天矽科技 line

國都汽車

案件屬於網站改版,將資訊呈現與視覺表現以主流趨勢來做設計和規劃,並將使用者是否容易閱讀也考慮進去,包括了四個方向的版面拉大、資訊以區塊的方式表示,以及切換與輪播效果的布局,都有相當大的改變。

 

【國都汽車】TOYOTA與LEXUS維修銷售

 

 這個案件屬於網站改版,將資訊呈現與視覺表現以主流趨勢來做設計和規劃,並將使用者是否容易閱讀也考慮進去,包括了四個方向的版面拉大、資訊以區塊的方式表示,以及切換與輪播效果的布局,都有相當大的改變。

 在程式語言方面也做了相當大的改動,像是用最新的技術編寫語法,如HTML5、CSS3與PHP…等,這些語法的更替讓各大瀏覽器都能支援瀏覽;我們也將網站加入RWD響應式設計,讓使用者無論是透過什麼樣的裝置大小,平板、電腦或是手機,都能輕鬆瀏覽。

 

※ 舊版網頁語法採用 ASP 技術撰寫,但因語法老舊、效能不佳、多元件無法支援且無法持續更新,因此我們改以 PHP 技術翻新處理,此技術為網站開發架構,版本能持續更新。

 

 在國都的入口頁面,由於該企業有銷售兩家品牌的車款,因此我們以左右分流的方式,讓使用者知道「國都有銷售兩種車款、我該往哪邊去」,這樣的方式也能使資訊更加準確、有區隔性;設計部份則以汽車形象作為背景,
提升網站視覺豐富度。

 

 

【國都TOYOTA】
 此頁面為左轉後的TOYOTA頁面,整體設計以黑灰白為主,這樣的色調規劃不僅能凸顯各車款的車身顏色,在活動、車廠與產品的資訊上也能使得畫面較為平衡、不雜亂,以黑白為主色調更能傳達企業的專業、穩定與一致性。

 

國都汽車驗收合照

▲國都汽車官網驗收

 

 

【國都LEXUS】
 首頁分流頁右轉可進入LEXUS的首頁,整體設計也同樣以黑白灰為主要色調,但在排版方面與TOYOTA仍有不同。LEXUS的排版方式較為簡潔,資訊呈現與色彩使用也沒有TOYOTA這麼豐富,雖然都是以黑白灰為主要色調,但也從排版的方式拉出了品牌差異化

 

 

【車款展示】
 在車款展示頁面的設計上,採用較為規矩的排版方式呈現,畫面一致、整齊好看,也不會因為車身顏色的不同而顯得雜亂無章。 

 

 

【營業所】
 在營業場所這個頁面,同樣以整齊且嚴謹的方式排列,讓使用者可以透過頁面清楚的看到哪個維修廠離自己家比較近?我們也可以透過營業場所名稱旁的「詳細地圖」查看詳細資訊。

 地圖是彈跳視窗的方式顯示,結合Google Map API的串接,讓使用者不僅可以看到正確的地圖,還能在這裡看到營業所的星星數量與評價,非常方便(如下圖)。

Google Map API

 

 

回上一頁
信箱
客服
Line@