雜誌網站介紹 根據行政院新聞局網站公佈之雜誌出版金鼎獎 將國內現行的雜誌分為以下八大類 一 人文類(包括文化 歷史 哲學及宗教等) 二 文學及藝術類(包括文學 美術 音樂及電影等 三 財經時事類(包括財經 時事 行銷管理等) 四 兒童及少年類(包括兒童及青少年讀物類等) 五 科學及技術類(包括科學 建築工程及環保等) 六 資訊應用類(包括電腦科技 資訊等) 七 家庭及生活類(包括居家生活 時尚流行 旅遊休閒 育兒 健康等) 八 語言學習類(包括各類語言學習)

國內目前十大雜誌集團大約是PC Home集團 財訊集團 商周集團 天下集團 時報周刊集團 空中英語教室集團 尖端集團 經典傳訊集團 美人誌集團 一手車訊集團 在IT領域最常看到品牌經營策略:如IBM Apple Micsoft等 國內財訊集團 由(財訊月刊)到(財訊快訊) 天下集團由(天下雜誌)到(e天下) (康健雜誌) (Cheers)等等 PC Home集團則有PC Home PC Offic PC Gramer PC Shopper及PC User

國內得雜誌網站 至2004年5月為止 國內熱門入口網站Yahoo奇摩中 雜誌類的網站有297個 而網路家庭(pchome)中 扣除掉13個線上雜誌類 共登記有417個實體雜誌網站 蕃薯藤入口網站扣除掉9個線上雜誌網站 亦有331個雜誌網站 也就是市面上約有六成以上的雜誌 都已有其專屬的網站了 人文雜誌類(56)文學雜誌(12)生活雜誌(42)休閒雜誌(14)政治雜誌(3)科學雜誌(42)娛樂雜誌(20)商業雜誌(34)通訊雜誌(2)新聞雜誌(10)電腦雜誌(28)學刊通訊(1)藝術雜誌(11)外語雜誌(8)其他類雜誌(14)共有297個實體雜誌網站

PCHOME網路家庭中雜誌網站分類及數量統計 人文藝術(14)文學雜誌(34)生活雜誌(15)時尚雜誌(33)汽機車雜誌(28)房地產雜誌(2)宗教雜誌(66)政治雜誌(12)科學雜誌(41)美食雜誌(18)廣告雜誌(2)旅遊雜誌(6)

娛樂雜誌(18)財經雜誌(21)健康雜誌(29)教育雜誌(21)視聽雜誌(3)新聞雜誌(6)運動雜誌(29)電腦雜誌(34)廣電雜誌(1)線上雜誌(13)共有417個實體雜誌網站 兩大入口網站乃皆以生活休閒類(諸如時尚雜誌 美食雜誌 汽機車雜誌 旅遊雜誌 娛樂雜誌等) 財經時事類(商業財經雜誌 新聞雜誌 時事雜誌等) 及科學資訊類的雜誌網站為大宗 學生族群經常購買語言學習類雜誌

雜誌網站 http://sa.ylib.com/ http://www.commonhealth.com.tw/ http://www.gvm.com.tw/Main/index.aspx http://www.cw.com.tw/ http://money.chinatimes.com/newmoney/magazine/index.aspx http://www.myhousing.com.tw/BuildQuery/MapSearch.aspx http://www.humanity.com.tw/ http://www.rhythmsmonthly.com/ http://www.worldscreen.com.tw/ http://forum.30.com.tw/Main/index.aspx http://www.ecf.com.tw/ http://monthly.wealth.com.tw/

電子報網站 台北愛樂電子報： http://www.e-classical.com.tw/epaper.cfm?id=153 作家沙龙： http://www.salon.com/src/pass/sitepass/spon/sitepass_website_refresh.html Ojr網站： http://www.ojr.org/ojr/blog/ 學術性雜誌…………… 哥倫比亞新聞網站︰ http://www.cjr.org/ Editorandpublisher網站︰ http://www.editorandpublisher.com/eandp/index.jsp 中國時報系全球資訊網︰ http://www.time.com/time/magazine/article/0,9171,501051010-1112920,00.html Pchome新聞台︰ http://mypaper.pchome.com.tw/

網頁介面設計 重要性 內容 視覺化 網頁介面要引起使用者之瀏覽興趣 人性化 指標圖像介面要能夠吸引人 易於操作及親和性 圖像化 將現今數位博物館之網頁介面予以圖像化 情境化 讓所有可能的使用者達到 一看到圖像就能得知其功能意義而容易操作 找到所要的資訊 What You See Is What You Get 國際化 不必礙於有語言的操作障礙

可從幾個方向探討網站的發展特性 一 圖像介面設計與視覺認知性 二 圖像介面設計與使用性評選與圖像評估 三 網站的意義與發展特性 同質性文獻彙整等

指標圖像設計 分析瀏覽器指標圖像與網頁介面的關連性 整合應用瀏覽器指標圖像於網站網頁介面時的要因 並利用圖像介面設計原則與網站網頁介面設計上的互動設計最一結合

網頁瀏覽指標圖像分析 ↓ 問題陳述 ↓ 圖象介面設計與視覺認知性 圖像介面設計與使用性 評選與評估 □□□□的意義與發展 ↓ 指標圖像介面開發評選模式 ↓ 評選調查結果與分析 ↓ 圖像設計發展 ↓ ↓ ↓ 圖像設計 網頁介面設計 ↓ 圖像評估 ↓ 系統整合建構

相 關 資 料 蒐 集 一 圖像介面設計與視覺認知性 (一)視覺認知心理/人類訊息處理 (二)圖像設計與視覺認知歷程 二 圖像介面設計與使用性 (一)圖像使用者介面/圖像設計原則 三 評估與評鑑之重要 (一)使用性工程評估(實驗前評估) (二)使用性介面評鑑(實驗後評鑑) 四 □□□□□□的意義與發展特性

樣 本 蒐 集 一 數位雜誌網站 二 電子報網站 一 網站特性認知 二 圖像構成認知

圖像介面設計與視覺認知 圖像的傳達主要是透過視覺形象的一種認知之過程 Kroehl認為 這種視覺形象的標準是建立在知覺要素 圖形 被表示的對象 意象等方面 且是經過設計者設計 再透過光波 以視覺的方式傳送給使用者 而應用視覺認知心理來進行圖像設計是屬於視覺傳達領域中的一項 也是一種(圖畫語言) 主要因為它是不使用文字也能讓人了解其內容意義的圖像設計

視覺認知心理學 應用認知心理進行圖像設計 我們必須體認的是圖像設計的過程是從(物理過程)進入(生理過程) 在達到(心理過程) 資訊處理心理學 由於它本身之主要架構是建立在(訊息處理模式上) 分析人類的訊息處理過程 也就是人類如何藉著知覺接受訊息 儲存訊息以及從記憶中提取 形成概念 判斷產生語言 所以一般認知心理學也常被稱作(資訊處理心理學)

訊息處理模式 Haber將許多專家提出的訊息處理模式共分成三種類型 分別是知覺 記憶以及問題解決等三方面模式 至於如何使圖像深刻記憶於被傳達者的印象中的記憶問題 首先 減少使人分心的視覺刺激 並使視覺訊息的目的單純化 達到所謂的感官記憶 其次 在短暫時間內 對所知覺的視覺訊息加以特別思考確認 或是將視覺訊息一再反覆的出現 使人可以多次練習 得到系統性的印象 才能達成長期記憶

圖像設計與視覺認知歷程 在視覺認知歷程中 (感覺收錄)(注意力)與(形狀的辨認)較值得重視

影響視覺訊息內容的要素 1.可視性 視覺訊息可被很容易偵測與區分 此取決於景與物之對比與明視度的差異 2.顯著性 和其他訊息同時出現時可以突顯出來 此取決於空間 造型與色彩的不同安排方式 3.可讀性 在有文字訊息顯現時能提供適當之文字或句子來傳達訊息 此取決於所使用文字之文法結構與語法之正確性 4.理解性 訊息被了解程度 此牽涉到使用者如何賦予各種訊息的內在與外在意義 而訊息本身的相似性 適切性與使用性等等必須有周詳之考慮 5.簡潔性 ◎在心理上為了使圖像設計的意義明朗化而將部分與以省略

簡言之 圖像設計在形式與內容上必須顯而易見 易辨 易讀 易懂與易記 也是一個好的圖像所必須考慮的重要條件

GUI必須先提供”LooK”(10%) 才能讓使用者”Feel”(30%) 這對於視障者而言 無法Look 也就不能Feel了

圖形使用者介面(GUI)之定義 1.WIMP---(window) (icon) (menu)和(pointer) ◎WIMP即是GUI四個構成元件的英文縮寫 2.直接操弄 ◎從操作的方式來看 GUI遵循(直接操弄)的模式 即是點或按住一個物件 然後操弄該物件 3.輸入和輸出共享圖像的物件 ◎使用者的輸入(input)和電腦系統回應給使用者的輸出(output)都是以圖像化的方式表示 也就是說 電腦系統中的資料 程式以及人機之間的互動關係均以圖像的表象呈現出來

圖像使用者介面的四個主要構成元件WIMP ---視窗(window) 圖像(icon) 選單(menu)和點選(pointer) 在圖像(icon)部分被認為是象徵的 比喻的 或獨特的影像

是視覺化的影像 用來代表物件(如文件) 行動(如剪下/貼上的動作) 以及想法(如警告的系統訊息)等 圖像之定義 是視覺化的影像 用來代表物件(如文件) 行動(如剪下/貼上的動作) 以及想法(如警告的系統訊息)等 凡是在電腦介面中需要使用文字註明的地方 都能用圖像 圖像適用之理由 節省空間 加快尋找指令或資料 呈現較視覺化和空間性的觀念 有助於記憶 讓使用者不需要閱讀介面 圖相基本要素 實體結構 即是圖像的外觀 且具備四個基本部分 1.邊界 2.背景 3.圖像 回主畫面

圖像用來表示甚麼意義 它可能代表---- 物體本身:圖像越像真實的物品 越能直接 明顯地表達含意(如: 指令或動作:由於在小小一各圖示上表達一個代表指令的動作並不容易 因此都會使用完成該動作的工具或被操弄的對象來表示(如: 結果:最常見的格式化工具便是直接顯示結果(如: 代表彼此之間的關係:較複雜 有些由二個圖案所組成 以顯示發生前後的關係 (如: 抽象的觀念:(如:使用@代表音樂 放大圖案) 通用的符號:(如:ˇ →) 情緒的表達:(如: 笑臉符號)

福田繁雄

同學看網站或刊物時 應該自問為何編輯選擇讓這個媒體展現這種風貌 為何編輯把文章放在某各地方 使用特別的字體或以特定的方式連結元素 網站文字與圖像的運用 同學看網站或刊物時 應該自問為何編輯選擇讓這個媒體展現這種風貌 為何編輯把文章放在某各地方 使用特別的字體或以特定的方式連結元素

視覺邏輯 從大到小 從上到下 從左到右 從深到淺 網站欣賞: http://www.usatoday.com/sports/default.htm

深到淺 藝術 藝術 新聞 社會 社會 生活型態 生活型態 生活型態 體育 新聞 新聞 藝術 體育 體育 社會

平衡一 錯誤示範 平衡 這個概念是指將所有要素放在一起 使其有機會讓觀眾看到任何要素都該隱而不彰 大的要素不該壓制小的要素 深色要素不該遮掩淺色要素 許多網站設計人員喜歡以黑或暗色為底 顯示他們對平衡概念不夠敏感 因為暗色底壓制字體 使字體難以看清

平衡二 範例

範例

範例

範例

範例 從深到淺 灰階分布圖

What is different?

What is different?

色相與明度

對比與焦點

範例

重複和變化 不是太明顯 有達到重複效果

回 到 網 站 設 計 中華傳播學會 http://ccs.nccu.edu.tw/ 回 到 網 站 設 計 http://www.chicagotribune.com/ 中華傳播學會 http://ccs.nccu.edu.tw/

影像裁剪 裁剪區域

範例 裁剪區域