【期末作業：以使用者經驗改善一家企業的網站】

▲期末作業：以使用者經驗改善一家企業的網站

（修改前）家裡蹲科技股份有限公司
http://www.draw123.com.tw/
（修改後）家裡蹲科技股份有限公司
http://web2.ntit.edu.tw/~s24965002/homemaking/

Ｑ．選一家企業網站，改善之。改善之道如下：

（１）提出其可改善之處。
Ａ：︱網站架構修改︱
　　　由於此網站有些選項屬性相近且結構鬆散，故可合併變成子選
　　　項來製作，讓版面多份俐落感。
　　︱網站版面設計︱
　　　由於此網站版面設計上過於簡略，除了更正過的價目表或一些
　　　訊息，幾乎沒有設計可言，故欲使用些編排設計增加網站美感
　　　及實用度。

（２）提出同類型的優良企業網站，供改善參考。
Ａ：　卡之屋網路科技印刷有限公司
　　　甦活便利美工
　　　白紗科技印刷

（３）在部落格記錄每週改善記錄。
Ａ：　Ｗｅｅｋ１５一作業公佈，尋覓欲改善的對象。
　　　Ｗｅｅｋ１６一欲改善的對象決定，分析該網站優、缺點跟重點。
　　　Ｗｅｅｋ１７一網站結構構思及版面設計粗稿完成。
　　　Ｗｅｅｋ１８一實體網站修改製作完畢。

（４）在部落格做改善結果意見調查。
Ａ：　已發佈↗

【Ｄｒｅａｍｗｅａｖｅｒ學習心得（１）】

▲在學校空間設的個人網站，暫時性的版面設置：
【Ｍ】Ｒｅｖｏｌｕｔｉｏｎ
http://web2.ntit.edu.tw/~s24965002/

今天網路傳播開始上Ｄｒｅａｍｗｅａｖｅｒ
老實說很感動，因為一直想深入學習這套軟體，但動力卻不太足夠
可能就像之前提到的
一方面ＦｒｏｎｔＰａｇｅ用習慣了
另一方面我現在的筆電性能不太好
再多灌幾個軟體可能全部一起中風（冒汗）
現在ＰＳ開Ａ３檔跑得跟烏龜一樣慢…
所以自然就比較少去接觸Ｄｒｅａｍｗｅａｖｅｒ
但現在隨著課堂需要，動力有了，該是時候努力摸熟它！

今天Ｄｒｅａｍｗａｖｅｒ的學習進度是架Ｉｎｄｅｘ
在Ｄｒｅａｍｗａｖｅｒ設好遠端及本地資訊後
直接上傳至學校提供的Ｗｅｂ空間
Ｄｒｅａｍｗａｖｅｒ真貼心，可以直接上傳，不用再用ｆｔｐ軟體上傳
特別是可以同步更新這點太方便啦！

另外比較要注意的點就是在學校有設資料時
使用後要記得刪除，以免被不肖人士利用。

【使用者經驗元素；以各層觀點分析Ａｐｐｌｅ官網】

▲圖文無關；大一電繪的ＰＳ雙色調作業

今天網路傳播的學習目標是：

【介紹網站設計的使用者經驗元素，並觀看實例以理解其內涵。】

以下說明轉載自老師的網路傳播設計↓

依據Ｊｅｓｓｅ　Ｊａｍｅｓ　Ｇａｒｒｅｔｔ的看法
網站設計使用者經驗元素有五種，係由表層進入到最深層，依序有以下五層：

１．外觀（Ｓｕｒｆａｃｅ）　　層：圖、文元素的組合看起來是某一網站
　　　　　　　　　　　　　　　　　類型。
２．編排（Ｓｋｅｌｅｔｏｎ）　層：網頁元素的排列能讓使用者用起來最
　　　　　　　　　　　　　　　　　有效率。
３．結構（Ｓｔｒｕｃｔｕｒｅ）層：內容的分類讓讀者知道如何去某目的
　　　　　　　　　　　　　　　　　地。
４．眼界（Ｓｃｏｐｅ）　　　　層：使結構層得以完成的功能，例如，網
　　　　　　　　　　　　　　　　　路書店提供與甲書性質相近的書。
５．策略（Ｓｔｒａｔｅｇｙ）　層：網主及網友要能該網站取得什麼。

進行設計時，要由下往上建起。

要瀏覽及描述以上觀點的網站，是讓我悔恨不已的Ａｐｐｌｅ
至今還有些後悔為什麼６年前買的筆電不選ｉＢｏｏｋ…
在叔叔跟朋友等Ａｐｐｌｅ迷的鼓吹跟催眠下
明年的願望就是希望能順利帶回一台ｉＭａｃ

是說Ｍａｃ的外觀跟性能也越來越棒了
高三時我們大部份的ｉＭａｃ還是Ｇ３，只有少數幾台Ｇ４
那時大家都搶著用Ｇ４
想不到現在都已經進展到像ＭａｃＢｏｏｋＡｉｒ那樣的筆電了…

講回使用者經驗元素
網站應由以上五層由下往上建起，故為↓

策略（Ｓｔｒａｔｅｇｙ）層
▼
眼界（Ｓｃｏｐｅ）層
▼
結構（Ｓｔｒｕｃｔｕｒｅ）層
▼
編排（Ｓｋｅｌｅｔｏｎ）層
▼
外觀（Ｓｕｒｆａｃｅ）層

前往＞＞Ａｐｐｌｅ官網

．Ａｐｐｌｅ網站的策略（Ｓｔｒａｔｅｇｙ）層：
Ａｐｐｌｅ開設這個網站的主要目的
是要介紹該品牌產品的販售資訊和資源服務
好讓瀏覽者了解及購買該品牌的產品。

．Ａｐｐｌｅ網站的眼界（Ｓｃｏｐｅ）層：
Ａｐｐｌｅ的網站在這點做得滿完善
例如點選ＭａｃＢｏｏｋ時
左下角會有一個選項是問你適合哪一種ＭａｃＢｏｏｋ
點進去會有不同尺寸的ＭａｃＢｏｏｋ和ＭａｃＢｏｏｋＡｉｒ的選項
而某些作業系統軟體亦有類似功能
算是清楚明瞭。

．Ａｐｐｌｅ網站的結構（Ｓｔｒｕｃｔｕｒｅ）層：
這部份Ａｐｐｌｅ做得很好
Ｌｏｇｏ圖的選項一點進去既是首頁
其他的選項沒有過多或繁雜的描述
Ｓｔｏｒｅ就是販售該品牌的產品
賣電腦、隨身聽和手機也是直接的打出該產品系列名稱
白話的選項，就算是英文白癡也能快速直接的找到想找的資訊
因為是聞名世界的品牌，網站當然也有很多語言版本
其中也包含繁體中文的版本，相當便利。

．Ａｐｐｌｅ網站的編排（Ｓｋｅｌｅｔｏｎ）層：
光這點就讓人對Ａｐｐｌｅ著迷
網站的版面編排上Ａｐｐｌｅ設計得乾淨俐落又不失功能性
最上排的選項及搜尋功能
可以讓使用者不用花多餘時間，直接找到重點
而圖上文下的資訊很清楚
能直接了解到該產品資訊的重點
不會看得眼花撩亂
圖跟文字的比例上也拿捏得很穩
因為圖太多會讓人弄不清重點
文字太多又會使人在閱讀上產生疲憊感甚至一眼就感到排斥
所以在Ａｐｐｌｅ的網站可以學習到圖文比例的拿捏。

．Ａｐｐｌｅ網站的外觀（Ｓｕｒｆａｃｅ）層：
光從配色及圖片設計的質感上
不用仔細看內容，只要稍微了解Ａｐｐｌｅ的特色
就幾乎可以斷定此網站跟Ａｐｐｌｅ脫不了關係
即使不了解或不知道Ａｐｐｌｅ
從網站的設計配置上也可看出是３Ｃ科技類的資訊網站
在首頁時即可看到Ａｐｐｌｅ主打的產品
整體來講，這個網站非常有他們自己品牌的特色及風格
算是我看過在同類型網站中相當突出的。

整個網站仔細看過一輪後
我想到他們連店面的設計也很有自己的品牌風格
之前繞到台北信義的紐約紐約時，就會繞到他們店面去看看
有時候很怕進去之後，就會抱著一台電腦走出來…
所以至今只敢進去逛一次
在看過身邊中Ａｐｐｌｅ毒的人後，我對Ａｐｐｌｅ真的越來越感興趣。

另外是之前朋友推薦的Ｍａｃ的ＣＦ
這個廣告創意非常棒，看了會讓人噴笑
乍看下手法誇張，但我覺得笑點非常真實（笑）

ＰＳ：不過ＰＣ擁護者可能會覺得有點不舒服，總之看看就好別放心上唷！

英文版↓


日文版↓

【比較部落格與一般網站的差異】

▲圖文無關；大一電繪的ＰＳ　Ｐｏｐ　Ａｒｔ作業（錯版）

今天網路傳播的學習目標是

【比較部落格與一般網站的差異】
半學期來製作個人部落格及分組部落格的收穫與待改進之處，參考以下同學的個人與分組部落格。

（１）
．自己的部落格
我覺得自己更新得還是不夠勤勞…ＯＴＺ｜｜｜
希望自己能再多更新一些學習紀錄和心得
考慮改天申請一個相簿來放作品當紀錄
啊啊那我就不多說了＠口＠（掩面）
歡迎老師跟同學給意見：）

．白意婷同學的部落格
這位同學的部落格學習內容
跟她的部落格標題非常相互呼應
很詳細的記錄了課堂上的學習精要
版頭的設計也相當有特色

也多虧了她的學習筆記
讓我可以了解到之後可能修到的課程內容
我本身很期待之後的繪本製作課程ＸＤ

．蔡妙音同學的部落格
版頭的圖片設計得很有質感
旁邊的部落格小工具也選用得很棒
我很喜歡那個音樂播放工具
我們兩的部落格學習紀錄比較類似
是用自己的心得去描敘學習紀錄
格外地有親切感ＸＤ

分組部落格部份

．虛實之間
主題是動漫畫，所以相當感興趣
改天會找圖書館戰爭這部作品來看＝Ｕ＝＋

．阿土伯的有機肥料
這組很認真的蒐集跟撰寫文章
版頭也設計得很可愛，呼應標題的插畫
一眼就看出部落格的重點

．雪兒好死
我們自己的組
因為主題有問題，所以之後會改主題再重新營運
希望老師再給點時間…ＯＴＺ

．小心眼
圖文創作形式的部落格
一張照片搭配一篇有趣的故事或心得
要有想法才可以製作的類型，這個我就做不太到（冒汗）

（２）
．阿默的生活
部落格整體設計頗有韻味
簡單的設計配上色彩絢麗的圖片感覺很協調
他的欄位編排方式很特別
特別是文章分類標籤在上方這點
乍看之下有些不像部落格反較像一個網站
很有特色且屬於他的生活部落格

．中國攝影
資料庫網站的感覺
基本上我認為
因為是集結四面八方的影像資料，所以網站本身風格不做得太過突出是好的
簡單扼要又完整應是首要考量
我覺得這網站大致上都有做到
要觀看或搜尋資料都很ＯＫ
不過我用Ｆｉｒｅｆｏｘ觀看的時候
旁邊欄位的ｔｉｔｌｅ有點跑掉，沒有剛好對到設計的欄位中
導致ｔｉｔｌｅ看不太清楚
以後我們要設計網站時可能要多用一些瀏覽器觀察一下
因為每個瀏覽器觀看到網頁樣貌有時會不太一樣
要是當初的設計因為這樣走樣就真的太可惜了

（３）
．Ｍａｃａｎｎａｓｈｏｅ
看英文的時候我還反應不過來（英文還很菜的我）
後來發現指的是『麥坎納』這品牌
這個牌子有聽愛鞋的朋友提過
推薦理由是穿起來很舒適
且鞋面設計特別，有別於大部份市面上鞋款略相似的品牌
不過由於我自己本身對鞋子或衣物本身沒有特別的執著
抱持著能看、耐穿且得體，達到以上標準基本上就合格的心態
所以不太了解關於這方面的事
要說的話就是我滿喜歡Ｃｏｎｖｅｒｓｅ的帆布鞋（自己有買兩雙）
不過也不會特別像監獄兔的老大一樣去蒐集…ＸＤ
嗯？我離題了…

講回Ｍａｃａｎｎａｓｈｏｅ的網站設計
要我用自己的眼光去說這做得非常好是騙人的…
但風格確實十分突出，我很喜歡首頁的那張作品
有點怪誕風味，很對自己的胃口：Ｐ
一點進去主頁，整體都還算整齊
但分類的字體我想可以再選用更適合的，有的字體還不太一樣，可能是商家自行更改過
資訊的呈現也算豐富且明瞭
跟大部份的品牌網站不太一樣的
這網站用了很多圖片形式去設計
而比較少用到框架的編排跟語法功能
雖然這對網速比較慢的閱覽者來說，在瀏覽時會比較吃力一點
但風格確相較突出很多，也能令人留下深刻的印象
這網站的風格能不能被接受或許因人而異
但加強品牌印象這點
我相信他們做到了，而且很成功！

調查
完成網路傳播設計部落格右上兩項調查。

調查已經做好
基本上兩者都是會的
不過不敢說很深，我該學習的還太多
因為用習慣了，自己做網頁還是偏向使用Ｏｆｆｉｃｅ的Ｆｒｏｎｔｐａｇｅ
上次有跟老師討論到
其實我大概懂老師的擔憂
因為Ｆｒｏｎｔｐａｇｅ有太多內建功能只能在ＩＥ閱覽到
但碰到Ｆｉｒｅｆｏｘ或Ｓａｆａｒｉ就一片空白（冒汗）
所以我在製作網頁時都會避免使用內建功能
而是以框架及圖片的本身設計為主，再搭配一些ｈｔｍｌ語法
至於ｊａｖａ如果非需要也是不會去用，因為用多了會變得很花俏
我想網頁還是要達到讓內容完整地被呈現和瀏覽是最重要的
好的網頁設計是相輔相成的，但過多的贅飾也是沒必要的
關於Ｄｒｅａｍｗｅａｖｅｒ
因為慣用Ｆｒｏｎｔｐａｇｅ的關係，已不常接觸
所以有點淡忘了，這陣子會試著摸摸看，努力熟練回來…ＸＤ

參賽消息
研究參加下列比賽的可能性

．第六屆育秀杯
本身很激賞主辦單位舉辦此比賽的用意
多舉辦類似競賽能培育出許多傑出的網頁設計人才
不過能不能參加，卻還未能下確切判斷
因為看了一下截止時間，感覺時間有點緊湊
除了網站外還得擬一份完整的企劃書
這挑戰度有點高
但只要下定決心拼一拼還是有機會的
很多事真的要做了才知道
光用講的也是於事無補，所以我會再多加衡量：）

【萬聖南瓜夜之視傳、網路傳播上課紀錄＋心得】

▲圖文無關；大一電繪的ＰＳ　Ｐｏｐ　Ａｒｔ作業（高反差）

今天的網路傳播是分組Ｂｌｏｇ發表的日子
而我們這組『雪兒好死—Ｓｈａｒｅ　Ｈｏｕｓｅ』是今天第一組發表的
在這之前
下午接到朋友的通知，得知視覺傳達臨時要改到美術館上課
所以把視傳的作業印出來好就衝到了美術館
接著才知道今天是『第六屆２００８台灣國際記錄片雙年展』的開幕典禮
我到的時候胡市長正好致詞完
接著又是一連串的樂團表演和致詞…
直到７：３０才開始撥放開幕片『大台中紀事２』
但因為要趕在８：２０前回學校上課
所以只看完了其中兩單元（以下有大略介紹，資料轉載於官網）

◎筆歌墨舞（Ｉｎｋ　Ｄａｎｃｅ）
台灣（Ｔａｉｗａｎ）／２００８／Ｖｉｄｅｏ／Ｃｏｌｏｒ／１５’
井迎兆（ＪＩＩＮＨ　Ｙｎｇ—Ｊａｗ）
年屆８０，獨居在台中的畫家井松嶺，畢生投身於國畫的創作藝術中。其子
拿起攝影機，記錄並思考父親作畫的精神和生活處境，並藉以修補自己與父
親多年的疏離關係。本片除展現井松嶺獨創的潑墨山水畫境外，也試圖描繪
一段父子之情。

◎城市靈光（Ｌｏｖｅ　ａｎｄ　Ｈｏｐｅ　ｉｎ　ｔｈｅ　Ｃｉｔｙ）
台灣（Ｔａｉｗａｎ）／２００８／Ｖｉｄｅｏ／Ｃｏｌｏｒ／１５’
蕭美玲（ＨＳＩＡＯ　 Ｍｅｉ—Ｌｉｎｇ）
殘缺的生命如同拼圖中誨澀黯淡的色塊，遺漏任何一塊，就不是完滿的拼圖
。４０年來，台中的郭瑞琳醫師創辦靈光醫院和莊宏達醫師開闢瑪利亞身障
者的園地，接力呵護著受傷的孩童。因為他們，城市的灰暗映襯出炫麗，殘
缺啟發了慈愛。

『筆歌墨舞』中，我見識到了片中畫家對創作的「堅持」跟「熱情」
「堅持」跟「熱情」也是我相當需要的
唯有讓自己保持著這些條件，才能磨練自己並更加成長
另外我也相當喜歡片中畫家所自傲的那張作品，作品名：《氣死張大千》ＸＤ
噴墨的手法相當新奇有趣
改天我也要拿彩色墨水實驗一下

『城市靈光』，看完後感嘆略深
雖然很多人都會說這種事沒什麼好比的，每個人的命不同
但是看到天使們努力的模樣
擁有完整身驅的自己怎麼可以讓自己鬆懈？
也希望這短片可以啟發更多人去體恤和關懷這些社會的弱勢族群

看完這兩單元後也該是回校的時間了
肚子餓翻的我，因為手滑關係，竟然蠢到把便當的白飯灑出去…｜｜｜
頓時有種欲哭無淚的感覺…
還好配菜的份量還是足夠吃飽

爾後，網路傳播上課了
很害羞的講完自己的部落格和分組部落格
發表時壓力挺大的
滿怕同學會覺得無聊，所以不敢扯太多
因此有點快的帶過我的部分
也希望有同學對模型這方面會有點興趣…：Ｐ
不過老師說我們的主題太四散了
因此下課後我們跑去擬新方向
希望之後可以營運地更上手

另外一組發表的Ｏｕｒ　ｌｉｆｅ，Ｏｕｒ　ｓｔｏｒｙ
我覺得她們部落格的照片拍得很有水準
裡面有幾張照片的氣氛我也很喜歡
簡單明瞭的介紹和版面也令人在觀看上覺得舒適
感覺得出她們很用心在做

今天可能因為兩組都是四個人能分享的東西較多
所以只有兩組發表
希望下一周的組別也有特別的介紹
我對很多事都充滿了好奇心ＸＤ（雖然有時也會好奇些不該好奇的…）

這一天雖然因家裡有些問題，讓我心情上有些煩躁和低落
不過課後參與了朋友的課題討論後心情有好一點

很多已發生的事
想了也於事無補
還是把那心力拿去做一些更有意義的事吧！把自己標上一個「∞ｘ加油！」

然後就是
『Ｈａｐｐｙ　Ｈａｌｌｏｗｅｅｎ！萬聖節快樂！』

獻上賀圖…ＸＤ

【2008華文部落格決選名單－觀摩感想】

▲圖文無關；大一電繪的ＰＳ木刻版畫效果作業

本周網路傳播設計的目標為▼
觀摩２００８華文部落格的決選名單
將有關寫部落格的啟示有條理地寫入學習部落格內

下方是名單
■２００８第四屆全球華文部落格大獎－決選入圍名單

．最佳生活情報－Ｔｈｏｍａｓ　Ｗｉｎｅ葡萄酒美食漫談
．最佳生活情報－努爾古麗
．最佳興趣嗜好－立體書專門店
．最佳藝術文化－良牙的純樸記事
．最佳藝術文化－海洋之心
．最佳藝術文化－Ａｎｎｉｅ’ｓ攝影筆記本
．最佳藝術文化－古蹟與狗

我在以上部落格中分析了幾個共同點
１．圖文並茂，增加部落格豐富性
２．圖片畫質清楚，主題明瞭
３．文章內容言簡意賅，敘述白話，適合各年齡層的閱讀
４．版面有設計，增添個人風格；如無設計也會使用與主題契合的樣版
５．更新勤快，且定時更新
６．版主會回覆訪問者的留言或問題
７．見解獨特，會以不同的角度去看待及描述一件事
８．內容富實用資訊、或能引起他人興趣

另外不難發現，以上入圍名單以旅遊為題材的部落格佔居多
我想主因應是現代人無足夠的時間及金錢去旅行
就算時間和金錢都沒問題
但在安排行程、景點等事前的準備如果不夠完備
那旅行時想必會浪費時間、金錢和發生不少問題
這是大部份的人去旅行時最不想遇到的
所以旅遊類部落格替我們解決了以上很多問題
遇到親切的版主還可以請求他們的協助
這是我自己的一些想法

諸如以上
如果能做到前面所分析的幾個點
聚集人氣、認識新朋友、幫助他人甚至遇到貴人都不無可能
部落格就是這種新時代的大發明
相信它改變了不少人的人生。

【近期作業紀錄–構成ＶＳ視覺傳達設計】

▲以構圖作業去發展的設計，頗花俏…

嗯…
因為是以學習為主題的走向…
所以將最近構成跟視覺傳達設計的作業放上
做個自我學習紀錄
這樣萬一以後電腦或手邊的檔案
因意外而不幸灰飛煙滅時，我還可以留個紀錄

–––––––––––––––––––––––––––––我是分隔線

■構成
作業目標Ａ↓
找出多個台灣原生種
先以手繪繪製出十個單位圖形，再以ｉｌｌｕｓｔｒａｔｏｒ描繪出來

作品：（點圖可看大圖）

心得：
拉貝茲拉得我生不如死…爆眼爆手該爆的都爆了…
最後老師竟然說交點陣圖格式也可以
也就是說一開始用黑筆描好掃上就可以交啦！！囧（噴淚）
只好安慰自己這是種自我挑戰
所幸來出來成品不錯，似乎頗受好評ＸＤ
以後可以拿來當素材用…：Ｐ

作業目標Ｂ↓
以作業Ａ繪製的十個單位圖形
重新組合成十種圖形

作品：
．組合圖１～３（點我看）
．組合圖４～６（點我看）
．組合圖７～９（點我看）
．組合圖１０～１２（點我看）

心得：
單位圖形畫好後組合就很快了
但想到後來已經想不到什麼好的排列方式
自暴自棄的狂用鏡射和對稱
有好幾個必須再修正

–––––––––––––––––––––––––––––我是分隔線

■視覺傳達設計
作業目標↓
數位典藏ＬＯＧＯ設計比賽
目前已定案的ＬＯＧＯ
已修正穩定性及意像表現等局部問題
現在還得修正顏色及小老鼠頭人的位置
是項令人絞盡腦汁的作業

作品：

．完整格式（含創作理念、色彩標示跟縮小黑稿）

廢稿↓（老師意見加自己反思後的感想）

上面的太像蔬果標章（以後要設計相關的ＬＯＧＯ再拿概念來用好了）
下面的較好一點，但數位典藏的意像不夠，無法讓人聯想到主題
自己猛一看覺得有女性用品ＬＯＧＯ的感覺…
嗯…還是已定案的那個支持率最高…所以它凍蒜啦！！

兩項都在修改過後暫告一段落
要往新進度邁進了…