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

Advanced

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

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

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

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



Edited 2 time(s). Last edit at 01/12/2013 08:09PM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - an.ai (3.15 MB)
1.分析範例網站網址:http://www.kimberleyfanclub.com/bbs/index.php
2.網站名稱及主題:【陳芳語♥KIMBERLEY】國際後援會 - Kimberley International Fan Club
         這裡是一個支持Kimberley陳芳語的官方後援會,
         以粉紅色來代表Kimberley甜美可愛的感覺,
         是一個讓人看得很舒服的後援會論壇。
3.主要消費族群:支持Kimberley陳芳語的Fans。
4.設計風格:整體以白、粉紅色為主要色調;
      讓人感覺溫馨與甜美,
      像在吃糖果般甜蜜的滋味。      
5.色彩分析:http://i.imgur.com/57S8U.jpg
6.版面分析:(1) 網站 width:1583px、height:6259px、margin:5、padding:10
      http://i.imgur.com/t1XmJ.jpg   
      (2) 網站雙欄語法:
      主版面分析-http://i.imgur.com/GLkje.png 
http://i.imgur.com/CqeJ0.png
7.跨瀏覽器問題與分析
使用IE7 IE8 IE9 FireFox Google Chrome 都沒有問題 :)

MEPOERs said:
JinJin: 不錯喔!鄧作很快,不過論壇通常是使用套件製作,但分析並了解其語法也是不錯的
1.分析範例網站網址:http://www.lavendercottage.com.tw/lavender_login.php
2.網站名稱及主題: 歡迎來到薰衣草森林
3.主要消費族群:喜歡薰衣草的人 喜歡親近大自然的人 喜愛夢幻或手做的人
4.設計風格 甜美可愛 具設計感
5.色彩分析 粉紅 淡黃 紫
6.版面分析
首頁分析
http://i.imgur.com/t0lwq.jpg
分頁1
http://i.imgur.com/qukNK.jpg
分頁2
http://i.imgur.com/4gJaZ.jpg
6.版面分析
(1).網站1349px X 620px
(2)網站雙欄語法
http://i.imgur.com/6GvHI.jpg

7.跨瀏覽器問題與分析
都可以



Edited 1 time(s). Last edit at 01/06/2013 09:31PM by 1015445206.
(編輯記錄)

1.分析範例網站:http://www.nybagelscafe.com/#
2.網站名稱及主題:貝果(http://www.nybagelscafe.com/#)
3.設計風格:美國普普藝術的剪貼風格
4.色彩分析:橘,咖啡
5.版面分析:還蠻讚的!有三行可以選擇!海有中間可以移動!另外部會太擠!!!
6.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形,可以加註)

班級:視一C
學號: 1015445225

1.分析範例網站網址:http://forum.him.com.tw/forum_artist.asp?sid=2
2.網站名稱及主題: HIM華研國際音樂-S.H.E
華研音樂培養出好的音樂人,創造出更多好聽的音樂,也讓我們這些粉絲知道更多,自己喜歡的藝人一些行程及活動
3.主要消費族群:男女老少支持自己喜歡的藝人的粉絲
4.設計風格:整體以白、銀色為主要色調
      讓人感覺有走自潮流尖端的時尚感
            
5.色彩分析:

http://i.imgur.com/Ygoq2.jpg?1

6.版面分析:(1) 網站 width:1349px、height:1336px、margin:0、padding:1

http://i.imgur.com/z3ZBu.jpg

(2)http://i.imgur.com/zeW33.png?1
7.跨瀏覽器問題與分析
使用IE7 IE8 IE9 FireFox Google Chrome 都可以



Edited 1 time(s). Last edit at 12/17/2012 04:28PM by JinJin.
(編輯記錄)

1.分析範例網站網址:http://www.avrillavigne.com/us/home
2.網站名稱及主題:搖滾教主-艾薇兒
3.主要消費族群:喜歡搖滾音樂
4.設計風格 春春 搖滾 黑暗
5.色彩分析
http://lf830206.imgur.com/all/
6.版面分析
http://imgur.com/ZHpNm
(1).網站width0px、height0px margin0px、padding0
pxposition: absolute; top: -10000px;
(2)網站雙欄語法
http://imgur.com/xfYRm
7.跨瀏覽器問題與分析
用瀏覽器IE6,IE7,IE8,firefox,googlechrom都可瀏覽

1.分析範例網站網址:http://www.amo.com.tw/tw/default
2.網站名稱及主題:Amo阿默典藏蛋糕
「把簡單做到最好」是他們的企業哲學,產品雖然沒有令人驚艷的外表,但是卻有真切實在的用心,這就是阿默蛋糕。
3.主要消費族群:喜好蛋糕點的客人
4.設計風格:以簡單得設計手法來製作他們的網頁 。
5.色彩分析 http://imgur.com/ncPMP.jpg
6.版面分析
(1).網站width1903px、height 539px、margin 0、padding 0
(2)網站雙欄語法:
http://imgur.com/euivM.jpg
右上主導列與法
http://imgur.com/ICvfV.jpg
雙欄左側垂直導覽列的語法
http://imgur.com/JWOvj.jpg

*不同形式的雙欄設計
http://imgur.com/gHahn.jpg
語法
http://imgur.com/DQULx.jpg
7.跨瀏覽器問題與分析

在不同瀏覽器觀察都無差異噢!


學號:1015445218

1.分析範例網站網址: http://www.pooh-country.co.uk/

2.網站名稱及主題:Pooh Comer

介紹小熊維尼在英國的店家、旅館、咖啡館、和各個故事場地的介紹,還有很多當地的相關旅遊資訊
及商品的價位的告知和訂購

3.主要消費族群: 喜愛小熊維尼的紛絲們

4.設計風格: 趣味點帶有點古典感覺的普通網頁

5.色彩分析

http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc7/430927_142063712613352_1604480027_n.jpg

6.版面分析

http://sphotos-h.ak.fbcdn.net/hphotos-ak-ash3/557527_142063822613341_811621425_n.jpg

(1).網站分析 : width:300 px、height:230 px、margin:auto、padding:o px

(2)網站雙欄語法: 首頁的部分

7.跨瀏覽器問題與分析

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

IE6,IE7,IE8都正常 firefox 和 googlechrome 跑圖比較慢一點,其餘正常


學號:1015445245

1.分析範例網站網址: http://www.leofoo.com.tw/village/Info.aspx
2.網站名稱及主題: 六福村

3.主要消費族群:喜歡玩遊樂設施或水的人
4.設計風格 以白色和真實玩樂時的照片為主,字體用咖啡色,而加上後面淺色的背景插畫,帶來輕鬆自在的感覺
5.色彩分析 http://i.imgur.com/KvUxz.jpg

6.版面分析 http://i.imgur.com/wmkSQ.jpg
http://i.imgur.com/uOx8Q.jpg


(1).網站width(寬):1024、height(高):750、margin:0、padding:0
(2)網站雙欄語法(於google離覽器中,按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題):
http://i.imgur.com/url1Q.jpg

7.跨瀏覽器問題與分析
使用IE6,IE7,IE8和googlechrome都沒有問題

學號:1015445232

1.分析範例網站網址:http://www.tkec.com.tw/
2.網站名稱及主題:燦坤
3.主要消費族群:要買電器產品的人
4.設計風格:有3C資訊的風格
5.色彩分析
http://i.imgur.com/QPu7K.jpg?1
白色為主色,藍色和黃色為輔助色
6.版面分析
(1)width(寬):1349px height(高):3300px margin:0 padding:0
(2)網站雙欄語法
http://i.imgur.com/bkXir.jpg?1
7.跨瀏覽器問題與分析
IE6,IE7,IE8,firefox,googlechrome都可以

1015445240



Edited 1 time(s). Last edit at 12/29/2012 01:15AM by 1015445240.
(編輯記錄)

1.分析範例網站網址;http://www.starbucks.com.tw/home/index.jspx
2.網站名稱及主題;starbucks
3.主要消費族群;不分族群
4.設計風格;背景以白底黑字為主,放置多量產品之圖片,看來簡潔大方容易瀏覽觀看
5.色彩分析
http://imgur.com/LIfYZ
6.版面分析
http://imgur.com/s4LAI
http://imgur.com/zgnmU
(1).網站width(寬);100%、height(高):auto、margin;auto、padding;0px
7.跨瀏覽器問題與分析;並無差異


學號:1015445269



Edited 3 time(s). Last edit at 01/01/2013 10:47PM by 1015445269.
(編輯記錄)

1.分析範例網站:http://japan.videoland.com.tw/channel/natume/natume.html

2.網站名稱及主題:夏目友人帳

3.設計風格:黑色微美

4.色彩分析:黑色 、藍色

5.版面分析:簡單、讓人一目了然

6.跨瀏覽器問題與分析:使用IE FireFox Google 都可以使用

1.分析範例網站網址:http://www.lacuz.com/
2.網站名稱及主題:Lacuz泰式料理
3.主要消費族群:喜歡或想嘗試泰式料理的人
4.設計風格:以黑、深紅、土黃搭配出唯美的古典味
5.色彩分析:
http://i.imgur.com/K69tj.jpg


6.版面分析:
http://i.imgur.com/3FwsV.jpg


(1).網站width:1663px、height:781px、margin:0、padding:0

7.跨瀏覽器問題與分析:沒有問題

學號: 1015445270

1.分析範例網站網址: http://www.starbucks.com/

2.網站名稱及主題: 擁有超過30種綜合與單品的咖啡豆、手工製作的濃縮混合飲品、TAZO茶、一系列的罐裝星冰樂飲品、一系列專屬的星巴克咖啡機器設備、咖啡豆沖泡機與磨豆機、新鮮烘烤的糕點、一系列的冰淇淋、一系列的巧克力、三明治、沙拉、咖啡馬克杯與用品、音樂唱片和各類型禮品。

3.主要消費族群:注重生活品味的白領階級。

4.設計風格:舒適典雅。

5.色彩分析 :
http://i.imgur.com/iaZSt.jpg
6.版面分析 :
網站width(寬)961、height(高)949
http://i.imgur.com/IOCnU.jpg
http://i.imgur.com/fZgL2.jpg
7.跨瀏覽器問題與分析 :
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
於不同瀏覽器觀察無差異。


學號: 1015445201



Edited 2 time(s). Last edit at 01/07/2013 04:55PM by 1015445201.
(編輯記錄)