Web Programming 網際網路程式設計 Darby Chang 張天豪 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 Color 配色 Web Programming 網際網路程式設計

顏色是很主觀的，不過是有趨勢的 你很難配出每個人最愛的，但你要一定要配出沒有人討厭的 http://blog.kissmetrics.com/gender-and-color/ Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 一些觀察 男生 女生 藍色超多人喜歡(男57%/女35%) 容易跟海洋、天空、平靜、乾淨、舒適、權威等等聯結，讓它長期佔據各種年齡及姓別的最愛 偏愛亮色(明確) 偏愛柔色(模糊) 比較能接受無色(簡單) 一定要彩色(花俏) 只把顏色分為幾大類(粗心) 會關心顏色細微的差異(細心) Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 顏色模型 RGB (red/紅, green/綠, blue/藍) 照片、影片 光的三原色 (色光)加色法 CMY (cyan/青, magenta/洋紅, and yellow/黃) or CMYK (key/黑) 印刷 繪畫三原色 (色料)減色法 http://en.wikipedia.org/wiki/RGB_color_model http://en.wikipedia.org/wiki/CMYK_color_model Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 Color harmonies/色彩調和 Primary color/原色, secondary color/第二次色, tertiary color/第三次色 Monochromatic, complementary, split-complementary, analogous, accented analogic, triad, tetrad (double complementary), square Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 其他名詞 HSB (HSV) Hue/色相 Saturation/飽和度 Brightness (value)/明度 Tint vs. shade 加白(淡) vs. 加黑(深) Warm vs. cool 暖色系 vs. 冷色系 參考資料 Simple, Practical Color Theory Understanding and the Meaning of Color Within Design Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 就算我會了這些理論，然後呢 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 其實還是要靠工具 配色 ColorBlender # 懶人 Color Scheme Designer HSL Color Schemer 社群 COLOURlovers kuler 其他小工具 0to255 Color Fields Colr Pickr # 有趣的小工具 Color Palette Generator 還有很多，歡迎各位同學分享使用心得 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 網頁配色 什麼色相、飽和度都不如掌握 “顏色之間的互動” 來得重要 要知道顏色的意義(在不同文化)，例如紅色表示熱情，深紅色的網站會讓人有高貴的感覺，而在淺色系的網站紅色會有警告的意思 請把對比(contrast)放在第一位，因為其對易用性(usability)的影響 Effective Color Contrast Luminance to Choose A Palette 三篇必讀的教學 Color Theory for Designers, Part 1: The Meaning of Color Color Theory For Designers, Part 2: Understanding Concepts And Terminology Color Theory for Designer, Part 3: Creating Your Own Color Palettes Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 即使如此，我還是不知道要怎麼配色 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 老師的個人經驗/做法 參考別人(靈感) 10 Most Commonly Used Colors In Web Design And Their Examples Color Scheme Inspiration – Spring Color Inspiration: Go Green with Envy Vector Art, Utilizing the Colors of the Seasons Best Of Color Inspiration: 130+ Green Color Palettes Color Inspiration from the Masters of Painting # 超棒的蒙娜麗莎配色 Some Summer Color Lovin’ Inspiration # 課程網頁的配色 Web 2.0 Colour Palette # 這份投影片的配色 如果你看到這些資料，你會選這幾個配色嗎？ 多逛網頁，尋找符合自己理想的網站，模仿(致敬)其感覺 然後利用理論搭配工具微調，甚至創造新的顏色 Web Programming 網際網路程式設計

配色是很主觀沒錯，但不要太相信自己一個人 理論只是工具，而不是絕對 多看，多欣賞藝術，培養自己的審美觀 提醒 配色是很主觀沒錯，但不要太相信自己一個人 理論只是工具，而不是絕對 多看，多欣賞藝術，培養自己的審美觀 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計

Today’s assignment 今天的任務 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 重新配色 單純重新配色，從這次任務開始各組要附上網站的快照(snapshot)，這樣就可以比較前後的差異 快照為 16:10 PNG 格式，至少 1024x640，但請測試在 600x375 甚至 400x250 下看起來的感覺 至少一張，至多三張(排出你們希望的順序)，每張附上不超過 10 個中文字的標題及不超過 30 個中文字的說明 參考資料 網頁配色裡的三篇必讀教學 老師個人經驗/做法裡的八個連結 不需要美感的配色講座-顏色是可以用理論說明的- 學學台灣文化色彩 老師會在 10/30星期日 23:59 之後到各組的首頁去看，可以寄個報告(例如工作分配或是設計重點等等)給老師，以防老師眼殘沒注意到你們的特色 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 Appendix 附錄 Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 同學提問 Drag & drop (拖放) jquery draggable - Google 搜尋 # 釣魚 http://docs.jquery.com/UI/Draggable # 魚 jQuery Drag and Drop Demo # 魚 自動發噗 噗浪首頁 自動發噗 - Google 搜尋 自製 Plurk Bot 定時自動發噗 Plurk 自動發噗保卡馬 (Windows) plurk perl - Google 搜尋 Plurk - API，Robot，兼談 Karma WWW-Plurk use WWW::Plurk; my $plurk = WWW::Plurk->new; $plurk->login( ‘id’, ‘pw’ ); $plurk->add_plurk( content => ‘Hello, World’ ); Web Programming 網際網路程式設計

Web Programming 網際網路程式設計 課程/任務提醒 資料庫並不在這次的課程規畫之內 相信我，上課內容已經爆炸了 真的有心要學的，絕對歡迎 另一個辦法是由我們實驗室提供技術支援，但前提是請以長期經營為目標，如果沒學到技術，那就變成單純增加助教們的工作了 截至目前為止 如果學到一些想用但以前不會的網頁特效，算是有一點幫助了 更重要的是不再害怕那些技術，以後看到新的特效，應該會覺得也沒什麼難度，自己如果怎麼樣也能做出來類似的效果，那就是這門課最大(或是說也只能提供到這樣)的幫助了 最後，也是我最害怕的，各位的網站開始有許多功能，但就外觀上來說，請憑良心講，你會想用自己的網站嗎？ 還有別的方法讓你們的團隊(不單是網站)更專業… Web Programming 網際網路程式設計