weblayoutdesign-最优的版面风格设计.ppt

啟動美美的視覺網頁 帶您賞析藝術、設計、質感大觀園! 參考書目 設計的文法-忍不住想動手的平面設計書。柳曉陽譯。2007。 Web Layout Design - 最優的版面風格設計。崔美善著。2007。 Web Layout 設計的美學 。王煦淳譯。2006。 教學重點 版面設計概念 文字設計概念 配色概念 網頁的基本結構 全區導覽列 區域導覽列 圖+文 網站設計兩大類 倒L型 將網頁分成上下兩區，並在做又其中一邊加上導覽列 上方選單型 畫面上方為導覽區；畫面下方為內容呈現 倒L 字型的版面設計類型 所有網站都適用的設計基本型 上方選單型的版面設計類型 公司網站常見的瀏覽架構 上方選單+左右兩側區域導覽 多用於資訊量大的入口網站 以影像為中心之設計架構 以影像為中心之設計架構 影像充滿整個畫面 讓色塊包住影像 魔術數字7與設計 容易一眼找出所需資訊的設計 魔術數字7加減2 心理學法則：人一次能處理的資訊數上限。 這個法則可以應用在日常生活很多地方 Ex：報紙一版面除了廣告的地方外，會登的報導大約是7個 電氣化產品操作性大約是7項 培養比的感覺 在設計的世界裡沒有絕對的單位，總是會隨與周圍事物的關係而產生新的狀態。 畫面有秩序，瀏覽更容易 各組成要素位置關係的統一及其效果 操作性網站設計 各元素的配置與設計，就如同公共設施存在的標誌 提高使用者便利性 運用留白技巧設計法 如何運用留白 如何運用留白 所謂留白，是為了讓想要強調的影像等要素有更佳的呈現效果，而在周圍留下空白空間。 留白不一定是白色的，而是指一塊空白的區域 文字設計 文字資訊樣式所需的三個概念 不一樣的地方可用不同字型 字型、行距、字距等文字樣式要調整的恰到好處 要顧及文字特有的配色特性 一目暸然的開頭 網頁標題適用的文字樣式 網頁標題適用的文字樣式 標題如同招牌 字體通常比較大 選擇予人工整、穩重感的字型為宜 標題與內文的配置 掌握躍動率，就掌握了設計質感 何謂躍動率？ 指內文字體大小、標題字體大小或字體高度不同。 面積大的印刷品比較適合較高的律動率 內容文字直書 中文和英文直書的呈現法 直書使用時機？ 表現中國情懷 英文直書多為點綴用 圖像與說明文字 有助理解圖片的設計要素 對文字資訊而言，灰色比黑色更具功能性 灰階70%是最易閱讀的文字顏色 較不易引起讀者眼睛的疲勞 次標題(黑色)+內文(灰階70%) 不可不知的色彩選色 螢幕顯色為RGB模式 網頁安全色 Web Safe Color是指相異瀏覽器均可呈現的216個顏色 考量到讓使用者在不同操作環境下得到一樣的資訊 Ex：#FFCC66(16進位碼) 影像種類不同，可呈現顏色數也不同 Gif(256色) 卡通圖案、較銳利的鏤空圖形 Jpg(約1677色) 漸層或照片 Flash與顏色 有獨家的技術，所以不論用哪種瀏覽器都是一樣的品質 想有好的色彩表現可以選擇使用flash 配色時要考慮顏色性質 冷色系與暖色系 暖色的圖形看起來比冷色的還要近 紅色與橘色適合用於平面表現 藍色或綠色等冷色系可以用來呈現畫面深度 配色以三色為限 http://2008./ http://www.sgr.jp/ http://www.evian.de/ / http://www.digitalhands.jp/ 週週工作坊 週週工作坊 * 內容架構上要去蕪存菁 MAGICAL NUMBER OF SEVEN PLUS MINUS 2(George A.Miller 1956)