登入

網頁文章


水晶質感(crystal)系列-多色系版型

 
設計概念
 

導覽列用類似玻璃水晶質感的標籤按鈕形式呈現,網頁區塊portlet模組邊框採圓角設計,也是反光質感。部分版型佐以小圖示於網站頂邊或模組邊框的左上角,更添網頁風格。全版面用相似色設計,共有綠、藍、黃、紅、橘、灰、咖啡色系來維持版型一致感,若是搭配透明banner (gif或png) 圖檔將可使網頁設計更渾然一體。

(註:png透明圖檔瀏覽器IE6不支援)

 
展示網址
 
http://www.iportfolio.cc/web/crystal
 
版型特色
 
  • 玻璃水晶立體質感的導覽列,並用倒影增加立體感。
  • 玻璃水晶立體質感的portlet襯底。
  • 部分版型portlet左上方有裝飾小圖案。
  • 整體色彩以「相近色」來設計,使視覺上舒適協調。
  • 上方Logo如上傳透明背景的PNG圖檔時,可與網頁整體風格更協調。
  • 為多色系版型,選取主要版型後,可利用色彩設計,選擇其他相同結構不同配色的版型。
 

水晶質感-網頁縮圖(共有七種色系)

 



 

細節瀏覽-上方立體質感導覽列

 

 
用標籤按鈕的形式呈現,並且每一個標籤都像是像玻璃水晶的反光質感一樣,它的倒影映照在大地上。
 
 

細節瀏覽-以四邊圓角反光質感圖作為portlet襯底,左上角輔以小裝飾圖案。

 
portlet的外觀和導覽列相似,以有微小反光質感的圓角矩形呈現,並部分版型在左上角配置裝飾圖案,以增添網頁質感與趣味。
 
 
細節瀏覽-Logo或bnaaer上傳
 
上方Logo或banner上傳透明背景的PNG/Gif圖檔時,可與網頁整體風格更協調一體。
 
 

細節瀏覽-多色系版型變換

 
為多色系版型,選取主要版型後,可利用色彩設計,選擇其他相同結構不同配色的版型。