《寫給你們看的設計書》《寫給你們看的色彩書》《點石成金》《形式感》學習筆記

首發：我的博客，更新&糾錯&回覆

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

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

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

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

 

下面是筆記的文本：

《寫給你們看的設計書》筆記
四大原則：
    親密性
      目的：組織性
      方法：分組，空白
      避免：頁面整體別超過3至5個部分
      物理位置的接近就意味存在關聯。
    對齊
      目的：統一性，有條理
      方法：注意元素放在哪
      避免：不要混用文本對齊方式，不要居中對齊
    重複——條理性、統一性
      目的：統一，加強視覺效果
      方法：將一致性向前推動一步
      避免：別過多地重複同一元素
    對比——既然不一樣，大相徑庭
      目的：加強頁面效果，信息組織
      方法：字體、線寬、顏色、形狀、大小、空間，重要的是對比必定要強烈
      避免：別畏縮，勇敢點，讓對比大相徑庭
顏色：
    色輪：三原色*3，三間色*3，第三色*6
    色輪使用：互補色，三色組、分裂互補三色組、相似色
    亮暗：純色即色調，加黑爲暗色，加白爲亮色
網頁設計：
    重要因素：重複、清晰
設計思路：
    從中心點開始
    將信息分組，創建並維護明確的對齊，建立重複，強烈的對比

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

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

 

《形式感》筆記

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

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

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

    欲擒故縱
      突出也能夠經過減弱來得到
      想作加法時，考慮減法；想要填滿時，考慮留空

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

    向雜誌版式學習
      質感輕薄：以信息，視覺輕盈、明快、響亮
      版式強節奏：讓閱讀井井有條，加強視覺節奏感
      圖片大視覺：用高精度大圖

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

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

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

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

長期歡迎項目合做機會介紹，項目收入10%用於酬謝介紹人。新浪微博：@冷鏡，QQ：908789432。