國都汽車

國都汽車

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

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

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

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

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

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

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

     

  • 【國都TOYOTA】

    【國都TOYOTA】

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

    ▲國都汽車官網驗收

     

  • 【國都LEXUS】

    【國都LEXUS】

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

     

  • 【車款展示】

    【車款展示】

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

     

  • 【營業所】

    【營業所】

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

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

     

ID:@323foylw