今天讀了四本書《寫給大家看的設計書》《寫給大家看的色彩書》《點石成金》和《形式感》，學習學習設計。

筆記在這裡，是運用學到的知識做的一個簡單網頁，歡迎提批評意見。

今天學到的最重要的東西，是《寫給大家的設計書》指出的四大原則：

親密、對齊、重複、對比！

下面是筆記的文字：

《寫給大家看的設計書》筆記
四大原則：
    親密性
      目的：組織性
      方法：分組，空白
      避免：頁面總體別超過3至5個部分
      物理位置的接近就意味存在關聯。
    對齊
      目的：統一性，有條理
      方法：注意元素放在哪
      避免：不要混用文字對齊方式，不要居中對齊
    重複

——條理性、統一性
      目的：統一，增強視覺效果
      方法：將一致性向前推進一步
      避免：別過多地重複同一元素
    對比——既然不同，截然不同
      目的：增強頁面效果，資訊組織
      方法：字型、線寬、顏色、形狀、大小、空間，重要的是對比一定要強烈
      避免：別畏縮，勇敢點，讓對比截然不同
顏色：
    色輪：三原色*3，三間色*3，第三色*6
    色輪使用：互補色，三色組、分裂互補三色組、類似色
    亮暗：純色即色調，加黑為暗色，加白為亮色
網頁設計：
    重要因素：重複、清晰
設計思路：
    從中心點開始
    將資訊分組，建立並維護明確的對齊，建立重複，強烈的對比

《寫給大家看的色彩書》筆記
    基礎：不要超過三種色彩
    兩色：
      鄰色
        一種顏色純色，另一種顏色純度低或明度低，則有主次
      同色
        色相相同，明度純度修改
      對比色
        激烈又穩定
        面積要有區別
        調整明度、飽和度
      間隔兩色
    三色：
      不超出三種色相即可
      顏色越少越好
      相鄰三色
        一致性
      等距三色組
        對比強烈
      分裂對比三色組
        細膩互補
    主色、輔色、點綴色
      主色
        整個作品風格
      輔助色
        幫助主色建立更完整的形象
        選擇輔助色：同類色，對比色，間隔色
      點綴色
        細節上使用
        出現次數多，顏色跳躍，引起閱讀，與其他顏色反差大
    黑、白、灰做調和色

      面積調和
    色彩搭配
      尋找一致，考慮相似色
        高明度的各種搭配都和諧
        同一色調的不同明度搭配
        用黑白灰來調和
      尋找差異，考慮對比色
        兼顧統一性和對比性
        使用面積來對比
        飽和度高對比效果好
    色彩的情感
      紅
        積極、活力、開放、激情、藝術、喜慶、力量、女性、生命
        成熟、危險、血腥、凝固、理智、革命、激烈、封建、死亡
        使用廣泛
      橙
        陽光、歡快、家庭、溫暖、記憶、放鬆、日常、活動、舒適
        神祕、幻想、優雅、時髦、理智、冷靜、陳舊
      黃
        陽光、輕鬆、幽默、開朗、熱鬧、歡樂、幼兒、開朗、開放
        吵鬧、廉價、不可靠、軟弱、不結實、稚嫩
      綠
        大自然、生命、安全、新鮮、嬌嫩、樸素、田園、春天、和平、野性
        土氣、鄉下、過輕、軍隊、高貴、不時尚
      藍
        理智、清涼、知性、公正、精密、細緻、海洋、嚴謹、商務、公式化
        寂寞、孤獨、陰氣、嚴格、無趣、悲傷、高科技、嚴酷
        冷色表示理智成熟
      紫
        特別的、優雅、高貴、昂貴、女性、莊重、神聖、成熟、高階、有深度
        無用的、不親切、有距離感、裝模作樣、不輕鬆、神祕、奇幻、冰冷、過於時尚
        不現實
      粉
        柔軟、女性、優雅、甜美、高檔、春天、清爽、甜蜜、卡通
        柔弱、女性化、膚淺、浮躁、裝模作樣、無用的、幼稚、幼兒
        不成熟
      白
        和平、空、整潔、乾淨、知性、樸素、清淡、純潔、開放、醫療
        虛無、貧乏、寥寥無幾、掃興、平淡、冷淡、空間、靜止、無趣
        “空”
      灰
        高雅、藝術、低調、樸素、復古、傳統、高階、正式、舒適
        保守、壓抑、無聊、無趣、煩躁、尖銳
      黑
        神祕、妖冶、力量、重量、莊重、嚴肅、正式、豪華、高階
        壓力、男性、暴力、孤獨、沉默、沒有親和力、犯罪、恐怖、陰暗、沉重、不乾淨
      任何顏色，都可以加黃變暖，或者加藍變冷
    基調（在純色基礎上，加白，或者加黑）
      純色
        積極、有活力、開放、力量、直接、健康、兒童、熱情、夏天、濃厚
        低檔、粗俗、膚淺、花俏、炎熱、激烈
        純色主色（面積要大）+飽和度低輔助色
        多個純色組合
      明色（純色+白色）
        平和、明朗、清爽、輕鬆、年輕、樸素、舒適、陽光、純真、清澈、乾淨、開放
        沒有深度、浮躁、輕飄、軟弱、沒有立場、廉價、孩子氣
        明色搭配有開放感
        與補色搭配還有明快華美
      淡色（明色+白，即純色+白+白）
        纖細、女性、幼兒、天真浪漫、柔軟、溫柔、淡雅、輕的、童話般、夢幻
        柔弱、不可靠、沒主見、沒用的、消極、冷淡、冷酷
      濁色（純色+灰）
        高階、成熟、穩重、意味深長、樸素、田園、有格調、沉著、貴重、現代感
        遲鈍、年老、保守、消極、渾濁、沒有用處、不實際
        成熟優雅
        開放度不夠，考慮用補色救
      淡濁（淡色+黑，即純色+白+白+黑）
        都市、女性、優雅、成熟、成年、雅緻、有格調、高雅
        柔弱、消極、沒活力、冷漠、孤獨、不實用
        優雅緩慢，都市倦怠感
      暗色（純色+黑）
        強力、實用、商務、認真、樸實、堅實、有格調、有深度、男性、傳統
        過暗、陰氣過重、上年紀、威壓、嚴厲、髒
        商務格調
        類似色組合會內斂
    風格對比
      穩重（濁色）vs明快（暗色、明色）
      平實（白色、明色、淡濁色）vs華麗（純色、濁色、暗色）
      激情（純色）vs平淡（暗色、淡濁色）
      幼兒（淡色）vs暮年（濁色、暗色）
      男性（暗色）vs女性（明色、淡濁色）
      優雅（明色、濁色、淡濁色）vs活潑（純色、明色）
      商務（暗色、濁色）vs休閒（明色、淡濁色）
      單純（淡色）vs歷練（濁色）
    

《點石成金》筆記
    *別讓我思考*
      目標：讓每個頁面都不言而喻
      關於網路使用情況的事實
        我們不是閱讀而是掃描
        我們不做最佳選擇而是滿意即可
        我們不是尋根究底而是勉強應付
    為掃描設計
      建立清楚的視覺層次
      習慣用法是你的好幫手
      把頁面劃分為明確定義的區域
      明顯標識可以點選的地方
      降低視覺噪聲
    使用者喜歡不思考
    省略不必要的文字
    關鍵點
      把導航做好
        在除了主頁和表單頁之外每個頁都提供導航
        有限次數導航到達目標
        提供搜尋功能
    主頁
      需要提供：站點標識，站點層次，搜尋，導讀，內容更新
      讓人理解：這是什麼網站？網站上有些什麼？我能做什麼？為什麼我該在這裡而不是別處？
    提高訪客的好感
      知道訪客想做什麼
      告訴訪客他想要的資訊
      減少步驟
      花點心思
      知道訪客可能有的疑問
      為訪客提供協助
      容易從錯誤中恢復
      向訪客道歉

《形式感》筆記

    抄現實中的物體來讓主題突出
      減法：拆去原有的牆，來讓空間足夠，但注意別毀樑柱
      分塊：在空間內進行重新劃分
      加法：填充，裝飾

    圓、方、三角
      三種不同形態的靈活組合 圓：弧線；可愛、靈動、親和力
      方：直線；整潔、嚴肅，但呆板
      三角：折線尖角；刺激、運動、時尚、尖銳

    斷臂之美
      去掉區域性：排除干擾，突出主題
      選取區域性：選擇特徵的集中表現部分，以小見大
      替換區域性：使用主題來替換區域性，來突出主題

    欲擒故縱
      突出也可以通過減弱來獲得
      想做加法時，考慮減法；想要填滿時，考慮留空

    乾坤大挪移
      旋轉——動感、時尚、親切
        整體旋轉：背景內容都旋轉
        背景旋轉：只背景旋轉
        綜合旋轉：內容的一部分跟隨背景旋轉
      平移——從不平衡中尋找新鮮
        上下格局
        左右格局
        混合格局

    向雜誌版式學習
      質感輕薄：以資訊，視覺輕盈、明快、響亮
      版式強節奏：讓閱讀層次分明，增強視覺節奏感
      圖片大視覺：用高精度大圖

    全屏大視野
      大圖平鋪自適應
      中心定位，兩側自適應
      單側定位，中心延展
      全屏響應

    文字衣櫥——讓文字樣式更好
      大關係：理清段落之間的關係
      分要點：每個段落內部的結構
      小字眼：突出關鍵要點

    你看起來很好吃——對資訊深入理解
      並列型：平等、均衡
      對比型：進行視覺化的比對，是並列關係的升級
      流程型：表示前後的任務關係，是並列關係的升級

    釘釘鉚鉚——網頁中的小裝飾
      小圖示：快速瀏覽，簡化文字，增強節奏感和舒適度
      小序號：引導閱讀，快速閱讀，增強節奏感，裝飾
      小字：增強節奏感，增強視覺精度，空位補型，文意補充
      小手繪：產生親切感