2008年11月21日 星期五

【Dreamweaver學習心得(1)】

http://www.makotog.url.tw/blog_n/top_20081128.jpg
▲在學校空間設的個人網站,暫時性的版面設置:
【M】Revolution
http://web2.ntit.edu.tw/~s24965002/

今天網路傳播開始上Dreamweaver
老實說很感動,因為一直想深入學習這套軟體,但動力卻不太足夠
可能就像之前提到的
一方面FrontPage用習慣了
另一方面我現在的筆電性能不太好
再多灌幾個軟體可能全部一起中風(冒汗)
現在PS開A3檔跑得跟烏龜一樣慢…
所以自然就比較少去接觸Dreamweaver
但現在隨著課堂需要,動力有了,該是時候努力摸熟它!

今天Dreamwaver的學習進度是架Index
在Dreamwaver設好遠端及本地資訊後
直接上傳至學校提供的Web空間
Dreamwaver真貼心,可以直接上傳,不用再用ftp軟體上傳
特別是可以同步更新這點太方便啦!

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

2008年11月14日 星期五

【使用者經驗元素;以各層觀點分析Apple官網】

http://www.makotog.url.tw/blog_n/nb_top_20081128.jpg
▲圖文無關;大一電繪的PS雙色調作業

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

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

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

依據Jesse James Garrett的看法
網站設計使用者經驗元素有五種,係由表層進入到最深層,依序有以下五層:

1.外觀(Surface)  層:圖、文元素的組合看起來是某一網站
                 類型。
2.編排(Skeleton) 層:網頁元素的排列能讓使用者用起來最
                 有效率。
3.結構(Structure)層:內容的分類讓讀者知道如何去某目的
                 地。
4.眼界(Scope)    層:使結構層得以完成的功能,例如,網
                 路書店提供與甲書性質相近的書。
5.策略(Strategy) 層:網主及網友要能該網站取得什麼。

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


要瀏覽及描述以上觀點的網站,是讓我悔恨不已的Apple
至今還有些後悔為什麼6年前買的筆電不選iBook…
在叔叔跟朋友等Apple迷的鼓吹跟催眠下
明年的願望就是希望能順利帶回一台iMac

是說Mac的外觀跟性能也越來越棒了
高三時我們大部份的iMac還是G3,只有少數幾台G4
那時大家都搶著用G4
想不到現在都已經進展到像MacBookAir那樣的筆電了…

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

策略(Strategy)層

眼界(Scope)層

結構(Structure)層

編排(Skeleton)層

外觀(Surface)層

前往>>Apple官網

.Apple網站的策略(Strategy)層:
Apple開設這個網站的主要目的
是要介紹該品牌產品的販售資訊和資源服務
好讓瀏覽者了解及購買該品牌的產品。

.Apple網站的眼界(Scope)層:
Apple的網站在這點做得滿完善
例如點選MacBook時
左下角會有一個選項是問你適合哪一種MacBook
點進去會有不同尺寸的MacBook和MacBookAir的選項
而某些作業系統軟體亦有類似功能
算是清楚明瞭。

.Apple網站的結構(Structure)層:
這部份Apple做得很好
Logo圖的選項一點進去既是首頁
其他的選項沒有過多或繁雜的描述
Store就是販售該品牌的產品
賣電腦、隨身聽和手機也是直接的打出該產品系列名稱
白話的選項,就算是英文白癡也能快速直接的找到想找的資訊
因為是聞名世界的品牌,網站當然也有很多語言版本
其中也包含繁體中文的版本,相當便利。

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

.Apple網站的外觀(Surface)層:
光從配色及圖片設計的質感上
不用仔細看內容,只要稍微了解Apple的特色
就幾乎可以斷定此網站跟Apple脫不了關係
即使不了解或不知道Apple
從網站的設計配置上也可看出是3C科技類的資訊網站
在首頁時即可看到Apple主打的產品
整體來講,這個網站非常有他們自己品牌的特色及風格
算是我看過在同類型網站中相當突出的。

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

另外是之前朋友推薦的Mac的CF
這個廣告創意非常棒,看了會讓人噴笑
乍看下手法誇張,但我覺得笑點非常真實(笑)

PS:不過PC擁護者可能會覺得有點不舒服,總之看看就好別放心上唷!

英文版↓


日文版↓

2008年11月11日 星期二

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

http://www.makotog.url.tw/blog_n/top_20081111.jpg
▲圖文無關;大一電繪的PS Pop Art作業(錯版)

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

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

半學期來製作個人部落格及分組部落格的收穫與待改進之處,參考以下同學的個人與分組部落格。

(1)
自己的部落格
我覺得自己更新得還是不夠勤勞…OTZ|||
希望自己能再多更新一些學習紀錄和心得
考慮改天申請一個相簿來放作品當紀錄
啊啊那我就不多說了@口@(掩面)
歡迎老師跟同學給意見:)

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

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

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

分組部落格部份

虛實之間
主題是動漫畫,所以相當感興趣
改天會找圖書館戰爭這部作品來看=U=+

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

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

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

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

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

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

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

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

調查已經做好
基本上兩者都是會的
不過不敢說很深,我該學習的還太多
因為用習慣了,自己做網頁還是偏向使用Office的Frontpage
上次有跟老師討論到
其實我大概懂老師的擔憂
因為Frontpage有太多內建功能只能在IE閱覽到
但碰到Firefox或Safari就一片空白(冒汗)
所以我在製作網頁時都會避免使用內建功能
而是以框架及圖片的本身設計為主,再搭配一些html語法
至於java如果非需要也是不會去用,因為用多了會變得很花俏
我想網頁還是要達到讓內容完整地被呈現和瀏覽是最重要的
好的網頁設計是相輔相成的,但過多的贅飾也是沒必要的
關於Dreamweaver
因為慣用Frontpage的關係,已不常接觸
所以有點淡忘了,這陣子會試著摸摸看,努力熟練回來…XD

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

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