《寫給大家看的設計書》《寫給大家看的色彩書》《點石成金》《形式感》學習筆記
今天讀了四本書《寫給大家看的設計書》《寫給大家看的色彩書》《點石成金》和《形式感》,學習學習設計。
筆記在這裡,是運用學到的知識做的一個簡單網頁,歡迎提批評意見。
今天學到的最重要的東西,是《寫給大家的設計書》指出的四大原則:
親密、對齊、重複、對比!
下面是筆記的文字:
《寫給大家看的設計書》筆記
四大原則:
親密性
目的:組織性
方法:分組,空白
避免:頁面總體別超過3至5個部分
物理位置的接近就意味存在關聯。
對齊
目的:統一性,有條理
方法:注意元素放在哪
避免:不要混用文字對齊方式,不要居中對齊
重複——條理性、統一性
目的:統一,增強視覺效果
方法:將一致性向前推進一步
避免:別過多地重複同一元素
對比——既然不同,截然不同
目的:增強頁面效果,資訊組織
方法:字型、線寬、顏色、形狀、大小、空間,重要的是對比一定要強烈
避免:別畏縮,勇敢點,讓對比截然不同
顏色:
色輪:三原色*3,三間色*3,第三色*6
色輪使用:互補色,三色組、分裂互補三色組、類似色
亮暗:純色即色調,加黑為暗色,加白為亮色
網頁設計:
重要因素:重複、清晰
設計思路:
從中心點開始
將資訊分組,建立並維護明確的對齊,建立重複,強烈的對比
《寫給大家看的色彩書》筆記
基礎:不要超過三種色彩
兩色:
鄰色
一種顏色純色,另一種顏色純度低或明度低,則有主次
同色
色相相同,明度純度修改
對比色
激烈又穩定
面積要有區別
調整明度、飽和度
間隔兩色
三色:
不超出三種色相即可
顏色越少越好
相鄰三色
一致性
等距三色組
對比強烈
分裂對比三色組
細膩互補
主色、輔色、點綴色
主色
整個作品風格
輔助色
幫助主色建立更完整的形象
選擇輔助色:同類色,對比色,間隔色
點綴色
細節上使用
出現次數多,顏色跳躍,引起閱讀,與其他顏色反差大
黑、白、灰做調和色
面積調和
色彩搭配
尋找一致,考慮相似色
高明度的各種搭配都和諧
同一色調的不同明度搭配
用黑白灰來調和
尋找差異,考慮對比色
兼顧統一性和對比性
使用面積來對比
飽和度高對比效果好
色彩的情感
紅
積極、活力、開放、激情、藝術、喜慶、力量、女性、生命
成熟、危險、血腥、凝固、理智、革命、激烈、封建、死亡
使用廣泛
橙
陽光、歡快、家庭、溫暖、記憶、放鬆、日常、活動、舒適
神祕、幻想、優雅、時髦、理智、冷靜、陳舊
黃
陽光、輕鬆、幽默、開朗、熱鬧、歡樂、幼兒、開朗、開放
吵鬧、廉價、不可靠、軟弱、不結實、稚嫩
綠
大自然、生命、安全、新鮮、嬌嫩、樸素、田園、春天、和平、野性
土氣、鄉下、過輕、軍隊、高貴、不時尚
藍
理智、清涼、知性、公正、精密、細緻、海洋、嚴謹、商務、公式化
寂寞、孤獨、陰氣、嚴格、無趣、悲傷、高科技、嚴酷
冷色表示理智成熟
紫
特別的、優雅、高貴、昂貴、女性、莊重、神聖、成熟、高階、有深度
無用的、不親切、有距離感、裝模作樣、不輕鬆、神祕、奇幻、冰冷、過於時尚
不現實
粉
柔軟、女性、優雅、甜美、高檔、春天、清爽、甜蜜、卡通
柔弱、女性化、膚淺、浮躁、裝模作樣、無用的、幼稚、幼兒
不成熟
白
和平、空、整潔、乾淨、知性、樸素、清淡、純潔、開放、醫療
虛無、貧乏、寥寥無幾、掃興、平淡、冷淡、空間、靜止、無趣
“空”
灰
高雅、藝術、低調、樸素、復古、傳統、高階、正式、舒適
保守、壓抑、無聊、無趣、煩躁、尖銳
黑
神祕、妖冶、力量、重量、莊重、嚴肅、正式、豪華、高階
壓力、男性、暴力、孤獨、沉默、沒有親和力、犯罪、恐怖、陰暗、沉重、不乾淨
任何顏色,都可以加黃變暖,或者加藍變冷
基調(在純色基礎上,加白,或者加黑)
純色
積極、有活力、開放、力量、直接、健康、兒童、熱情、夏天、濃厚
低檔、粗俗、膚淺、花俏、炎熱、激烈
純色主色(面積要大)+飽和度低輔助色
多個純色組合
明色(純色+白色)
平和、明朗、清爽、輕鬆、年輕、樸素、舒適、陽光、純真、清澈、乾淨、開放
沒有深度、浮躁、輕飄、軟弱、沒有立場、廉價、孩子氣
明色搭配有開放感
與補色搭配還有明快華美
淡色(明色+白,即純色+白+白)
纖細、女性、幼兒、天真浪漫、柔軟、溫柔、淡雅、輕的、童話般、夢幻
柔弱、不可靠、沒主見、沒用的、消極、冷淡、冷酷
濁色(純色+灰)
高階、成熟、穩重、意味深長、樸素、田園、有格調、沉著、貴重、現代感
遲鈍、年老、保守、消極、渾濁、沒有用處、不實際
成熟優雅
開放度不夠,考慮用補色救
淡濁(淡色+黑,即純色+白+白+黑)
都市、女性、優雅、成熟、成年、雅緻、有格調、高雅
柔弱、消極、沒活力、冷漠、孤獨、不實用
優雅緩慢,都市倦怠感
暗色(純色+黑)
強力、實用、商務、認真、樸實、堅實、有格調、有深度、男性、傳統
過暗、陰氣過重、上年紀、威壓、嚴厲、髒
商務格調
類似色組合會內斂
風格對比
穩重(濁色)vs明快(暗色、明色)
平實(白色、明色、淡濁色)vs華麗(純色、濁色、暗色)
激情(純色)vs平淡(暗色、淡濁色)
幼兒(淡色)vs暮年(濁色、暗色)
男性(暗色)vs女性(明色、淡濁色)
優雅(明色、濁色、淡濁色)vs活潑(純色、明色)
商務(暗色、濁色)vs休閒(明色、淡濁色)
單純(淡色)vs歷練(濁色)
《點石成金》筆記
*別讓我思考*
目標:讓每個頁面都不言而喻
關於網路使用情況的事實
我們不是閱讀而是掃描
我們不做最佳選擇而是滿意即可
我們不是尋根究底而是勉強應付
為掃描設計
建立清楚的視覺層次
習慣用法是你的好幫手
把頁面劃分為明確定義的區域
明顯標識可以點選的地方
降低視覺噪聲
使用者喜歡不思考
省略不必要的文字
關鍵點
把導航做好
在除了主頁和表單頁之外每個頁都提供導航
有限次數導航到達目標
提供搜尋功能
主頁
需要提供:站點標識,站點層次,搜尋,導讀,內容更新
讓人理解:這是什麼網站?網站上有些什麼?我能做什麼?為什麼我該在這裡而不是別處?
提高訪客的好感
知道訪客想做什麼
告訴訪客他想要的資訊
減少步驟
花點心思
知道訪客可能有的疑問
為訪客提供協助
容易從錯誤中恢復
向訪客道歉
《形式感》筆記
抄現實中的物體來讓主題突出
減法:拆去原有的牆,來讓空間足夠,但注意別毀樑柱
分塊:在空間內進行重新劃分
加法:填充,裝飾圓、方、三角
三種不同形態的靈活組合 圓:弧線;可愛、靈動、親和力
方:直線;整潔、嚴肅,但呆板
三角:折線尖角;刺激、運動、時尚、尖銳斷臂之美
去掉區域性:排除干擾,突出主題
選取區域性:選擇特徵的集中表現部分,以小見大
替換區域性:使用主題來替換區域性,來突出主題欲擒故縱
突出也可以通過減弱來獲得
想做加法時,考慮減法;想要填滿時,考慮留空乾坤大挪移
旋轉——動感、時尚、親切
整體旋轉:背景內容都旋轉
背景旋轉:只背景旋轉
綜合旋轉:內容的一部分跟隨背景旋轉
平移——從不平衡中尋找新鮮
上下格局
左右格局
混合格局向雜誌版式學習
質感輕薄:以資訊,視覺輕盈、明快、響亮
版式強節奏:讓閱讀層次分明,增強視覺節奏感
圖片大視覺:用高精度大圖全屏大視野
大圖平鋪自適應
中心定位,兩側自適應
單側定位,中心延展
全屏響應文字衣櫥——讓文字樣式更好
大關係:理清段落之間的關係
分要點:每個段落內部的結構
小字眼:突出關鍵要點你看起來很好吃——對資訊深入理解
並列型:平等、均衡
對比型:進行視覺化的比對,是並列關係的升級
流程型:表示前後的任務關係,是並列關係的升級釘釘鉚鉚——網頁中的小裝飾
小圖示:快速瀏覽,簡化文字,增強節奏感和舒適度
小序號:引導閱讀,快速閱讀,增強節奏感,裝飾
小字:增強節奏感,增強視覺精度,空位補型,文意補充
小手繪:產生親切感