Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Re: [作業] 優良設計網站蒐集與分析

[作業] 優良設計網站蒐集與分析

1. 優良網站分析


請每位同學於12/17前,至少選擇一個優良網站分析(越多越好)
以作為期末作業的參考

可下載附加檔案
並請參考以下的範例製作,回覆於此篇文章,註明:

1.分析範例網站網址:
2.網站名稱及主題:
3.主要消費族群:
4.設計風格
5.色彩分析
6.版面分析
(1).網站width(寬)、height(高)、margin、padding分析
(2)網站雙欄語法(於google離覽器中,按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題):


7.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形,可以加註)

學號:





2. 範例分析



1. 範例網站:

http://www.j-period.com/jp/

2. 網站名稱及主題:J-period


從日本全國嚴選的日式餐具到精美擺飾
融合日本古典美與現代時尚美,提倡全新和風的品牌。不受時代潮流左右的日本之美與精神性,帶領現代生活進入嶄新的舒適生活樣式。

3. 主要消費族群


1.注重生活品味的白領階級
2.喜愛日式及東方品味的族群

4. 設計風格:


簡約的日式風格,以黑灰白為主色調,漢字以細黑體字應為以羅馬字為主,重點輔以粗體,優雅的簡潔的編排,襯托出古典時尚感。

5. 色彩分析





6. 版面分析



富有層次的導覽設計,值得學習,於右上有主要的導覽列,做為整個網站的主要內容架構。

首頁以圖片輪替的FLASH動畫呈現,讓瀏覽者欣賞最新的產品。

進入內容後,則於主導覽列下方出現麵包屑導航,使瀏覽者輕易的了解所處的網頁層級與所在。

離開首頁,進入其他頁面後,左方則彈性的出現垂直導覽列,顯示並連結更細部的訊息或產品介紹頁面,使網站的內容更加豐富與深入。

某些內容較單純的頁面(如:Concept)則無導覽列,僅出現標題及右側主內容。

(1).主頁尺寸與margin設定

#container { width: 860px; position: relative; margin: 0px auto; }








(2).網站雙欄語法
(按F12或於要檢查的部分右鍵檢查元素觀察):

右上方主導覽列的語法

http://i556.photobucket.com/albums/ss1/whc915/webna-1.jpg

雙欄左側垂直導覽列的語法


<dl>
<dt></dt>
<dd>

<ul>
<li></li>
</ul>

</dd>
</dl>

清單項目製作

http://i556.photobucket.com/albums/ss1/whc915/webna-2.jpg


附註:
麵包屑導航(BreadcrumbNavigation) 的概念來源於童話故事,它的作用是告訴訪問者他們目前在網站中的位置以及如何返回,麵包屑導航的意義在於明確告知用戶目前處於網站的何種位置,方便用戶通過該導航快速達到上級頁面。從用戶體驗角度講,這種導航的設計是建議在當前視窗打開的。

麵包屑導航一般都在導航的下面,形式一般為 首頁 > 一級目錄名稱 > 二級目錄名稱 > 目前位置,儘量要把麵包屑導航的層次控制在四層以內,這樣也有利與搜尋引擎蜘蛛一層層往下爬。http://www.seohouse.org/seo-concepts-site-breadcrumbs.html






7. 跨瀏覽器問題與分析


(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)

於不同瀏覽器觀察無差異。

========================================================================================
※並可參考[WEB] 優良設計網站蒐集與分析:
1.http://mepopedia.com/forum/read.php?804,18412
2.http://mepopedia.com/forum/read.php?804,15323
3.http://mepopedia.com/forum/read.php?1173,27997

========================================================================================


上傳圖片可使用
http://imgur.com/

若寬度太寬,請使用以下語法,將圖片網址帶入:
<img width="100%" src="圖片網址" border="0">

Attachments:
開啟 | 下載 - an.ai (2.39 MB)
1025445043

一. 範例網站:
http://www.camacafe.com/

二. 網站名稱及主題:cama現烘咖啡專門店

專業、親切,享受。顧客的肯定帶領著我們向前進。精心挑選高品質咖啡豆,每日現烘,
以平易的價格,提供顧客最新鮮香醇的好味道。
cama代表的不僅是理念,也是我們一向以來的堅持與準則 ~

三. 主要消費族群

1.注重生活品味的白領階級
2.高中生及大學生等的學生族群

四. 設計風格:

簡約可愛的風格,以淡橘黑灰白為主色調,漢字以圓黑體字為主,重點輔以黑體,簡潔的編排加上吉祥物cama插圖,襯托出溫暖純香的咖啡。

五.色彩分析:



六.版面分析:



一. 範例網站:http://www.muji.com/tw/
二. 網站名稱及主題:MUJI 無印良品


自然,是無印良品創立以來一直努力追求的方向,保留天然素材的原始顏色、使用未經加工的紙和布,不斷地發掘材質本身原有的魅力,無印良品由此而生。


三. 主要消費族群
1.喜愛簡單生活的白領階級
2.高中生及大學生等的學生族群
四. 設計風格:
簡約風格,首頁以黑白色系來設計,進入商品頁面以暗紅色、米白色與白色來設計,十分充足的表達它的品牌形象
五.色彩分析:
 photo 672A547D540D-1_zps038fcb2e.jpg
六.版面分析:
 photo 672A547D540D-2_zps21b62af1.jpg

1.網址:http://www.funtape.com.tw/index.html

2.網站名稱及主題:Funtape。介紹知音文創所出版的紙膠帶與相關商品。

3.主要消費族群:喜愛紙膠帶的族群。

4.設計風格:簡約的白色風格,以繽紛多彩的紙膠帶為色彩。

5.色彩分析:


6.版面分析:
簡單明瞭的版面設計。
導覽列於左邊。
移動頁面至下方右邊會出現"TOP"字樣,可點擊直接回到最上面。
點擊進入不同的頁面會於導覽列下方彈性出現雙欄式。
Facebook連結點設在頁面右上方,圖樣大小適中。

(1)主頁尺寸與margin設定
#wrapper{
 width:960px;
 margin:0px auto;
 }


(2)導覽列語法

*主導覽列語法
http://i1280.photobucket.com/albums/a500/HSIUSINYI/13_zpseb84cd9d.jpg

*雙欄分頁垂直導覽列語法
http://i1280.photobucket.com/albums/a500/HSIUSINYI/14_zpsfe0e1d2b.jpg



(3)





1005445193/徐芯儀

1025445091

一. 範例網站:
http://www.masking-tape.jp/mtcasa/product.html#product_seal

二. 網站名稱及主題:PRODUCT- mt CASA紹介

例如,像一個很好的那一天內的心情穿好衣服,
TPO,並安排隨意符合目的的,
我希望享受不同尋常的空間。
期待已久的由MT塑造這樣一個願望
內部的寬膠帶“MT CASA”誕生了。

三. 主要消費族群

1.注重生活品味的白領階級
2.高中生及大學生等的學生族群

四. 設計風格:

簡約的風格設計,簡潔的編排,襯托可愛典雅感覺。

五.色彩分析




Edited 4 time(s). Last edit at 12/21/2014 11:18AM by 小碧.
(編輯記錄)

1.分析範例網站網址: http://www.duirwaigh.com/
2.網站名稱及主題: Duirwaigh 工作室
3.主要消費族群: 對於視覺敏銳之人 可以在此創建自己風格的主視覺 可以用在一些周邊商品上
4.設計風格 屬於插畫風格 以泰國混和西方美術風格
5.色彩分析 以鮮豔的色系 大膽呈現勇別人不同的網站
6.版面分析 其實是以一般的網頁所設計 沒有太多變化

一. 範例網站:http://jojo-animation.com/
二. 網站名稱及主題:JOJO動畫官網
JOJO動畫粉絲向官網

三. 主要消費族群
各年齡階段的JOJO粉絲

四. 設計風格:
添加了許多原作中的元素,首頁循環播放人物立繪,標準的粉絲向網站。
五.色彩分析:
http://i.imgur.com/J6kfUgz.jpg
六.版面分析:
http://i.imgur.com/Pezf8Dd.jpg
http://i.imgur.com/XFGZeN3.jpg
http://i.imgur.com/oJcv3yM.jpg

1.分析範例網站網址:http://shop.fandora.tw/

2.網站名稱及主題:Fandora shop你的藝術生活提案 smiling smiley

在 Fandora 上面你不只可以買到喜歡的圖,更可以進一步的和創作者們接觸,
Follow 他們的粉絲頁,看到他們最新的創作和動態,想要找到最新最特別的圖像設計商品,就到 Fandora Shop 開始彩繪你的藝術生活吧!

3.主要消費族群:喜歡各式風格創作商品的族群。

4.設計風格:以親和力較強的暖色系為主色調,字體以黑體為主,簡單介面使消費者能輕鬆找到想要的商品。

5.色彩分析:

6.版面分析:



7.跨瀏覽器問題與分析
IE11、googlechrome跨瀏覽器無問題。

1025445001




Edited 2 time(s). Last edit at 01/03/2015 03:28AM by royu.
(編輯記錄)