名稱 設計說明 PC Version Mobile Version
首頁 - 整體設計為展現大型企業給人感覺穩健專業、科技感,整體畫面皆不會有太多過於零碎雜亂的樣式,並保留適當的留白空間,讓使用者在瀏覽時有呼吸感而不至太過壅擠。

- 最上方的導覽列除了企業logo、選單之外,在最右側有對於使用者來說可能較常使用的登入區,因此以反白色塊顯示,對使用者而言能很快就找到該按鈕。

- 主視覺KV採用滿版設計,以展現大企業的大器感覺,可輪播。CTA設定為可隱藏或顯示,未來若有大型活動或宣傳事項,也可以讓使用者直接連結到說明頁面。

- 第二屏為公司動態,讓使用者可以看到公司的最新訊息、活動、新聞等內容。由於對一般使用者而言並不需要看到太久之前的資訊,在這裡設計為預設一次可以顯示三則動態,也可以避免畫面內容的呈現太過雜亂而造成使用者有不好的用戶體驗。若想查看更早之前的公司動態可以點選左右箭頭切換,或按下方的「更多動態」按鈕連結到完整的動態列表頁面。

- 再到下方則是解決方案的五大項目,當滑鼠移動到某個項目(Hover)時顯示了解更多的點擊,Hover 到不同的項目則會顯示該項目內容相對應的圖片,藉此讓整體感覺較為制式的頁面設計能稍微有點互動性而不會過於呆板。

- Footer除了公司的聯絡地址電話等資訊外,也包含了提供國語系的選擇,顯示企業正與國際接軌。

白色Logo版本

  Demo  

原本Logo版本

  Demo  

白色Logo版本

  Demo  

原本Logo版本

  Demo  

子頁
(解決方案)
- 標題Banner的設計承襲整個網站的大器感、專業感,一致採用滿版照片壓字的設計方式。(未來在設計其他相同階層的頁面時,此區塊建議選用較為乾淨的照片來進行設計。)

- 五大解決方案為重點,使用了icon讓使用者能夠加深印象。

- 內文採用左、右圖文搭配的方式讓畫面清楚、簡單明瞭,並保留適當留白空間使畫面較有空間感,在閱讀大量文字內容時也不會因為文字寬度過寬而造成閱讀疲勞。

白色Logo版本

  Demo  

原本Logo版本

  Demo  

白色Logo版本

  Demo  

原本Logo版本

  Demo  

Update: 2019/02/25