今天读了四本书《写给大家看的设计书》《写给大家看的色彩书》《点石成金》和《形式感》,学习学习设计。
笔记在这里,是运用学到的知识做的一个简单网页,欢迎提批评意见。
今天学到的最重要的东西,是《写给大家的设计书》指出的四大原则:
亲密、对齐、重复、对比!
下面是笔记的文本:
《写给大家看的设计书》笔记
四大原则:
亲密性
目的:组织性
方法:分组,空白
避免:页面总体别超过3至5个部分
物理位置的接近就意味存在关联。
对齐
目的:统一性,有条理
方法:注意元素放在哪
避免:不要混用文本对齐方式,不要居中对齐
重复——条理性、统一性
目的:统一,增强视觉效果
方法:将一致性向前推进一步
避免:别过多地重复同一元素
对比——既然不同,截然不同
目的:增强页面效果,信息组织
方法:字体、线宽、颜色、形状、大小、空间,重要的是对比一定要强烈
避免:别畏缩,勇敢点,让对比截然不同
颜色:
色轮:三原色*3,三间色*3,第三色*6
色轮使用:互补色,三色组、分裂互补三色组、类似色
亮暗:纯色即色调,加黑为暗色,加白为亮色
网页设计:
重要因素:重复、清晰
设计思路:
从中心点开始
将信息分组,建立并维护明确的对齐,创建重复,强烈的对比
《写给大家看的色彩书》笔记
基础:不要超过三种色彩
两色:
邻色
一种颜色纯色,另一种颜色纯度低或明度低,则有主次
同色
色相相同,明度纯度修改
对比色
激烈又稳定
面积要有区别
调整明度、饱和度
间隔两色
三色:
不超出三种色相即可
颜色越少越好
相邻三色
一致性
等距三色组
对比强烈
分裂对比三色组
细腻互补
主色、辅色、点缀色
主色
整个作品风格
辅助色
帮助主色建立更完整的形象
选择辅助色:同类色,对比色,间隔色
点缀色
细节上使用
出现次数多,颜色跳跃,引起阅读,与其他颜色反差大
黑、白、灰做调和色
面积调和
色彩搭配
寻找一致,考虑相似色
高明度的各种搭配都和谐
同一色调的不同明度搭配
用黑白灰来调和
寻找差异,考虑对比色
兼顾统一性和对比性
使用面积来对比
饱和度高对比效果好
色彩的情感
红
积极、活力、开放、激情、艺术、喜庆、力量、女性、生命
成熟、危险、血腥、凝固、理智、革命、激烈、封建、死亡
使用广泛
橙
阳光、欢快、家庭、温暖、记忆、放松、日常、活动、舒适
神秘、幻想、优雅、时髦、理智、冷静、陈旧
黄
阳光、轻松、幽默、开朗、热闹、欢乐、幼儿、开朗、开放
吵闹、廉价、不可靠、软弱、不结实、稚嫩
绿
大自然、生命、安全、新鲜、娇嫩、朴素、田园、春天、和平、野性
土气、乡下、过轻、军队、高贵、不时尚
蓝
理智、清凉、知性、公正、精密、细致、海洋、严谨、商务、公式化
寂寞、孤独、阴气、严格、无趣、悲伤、高科技、严酷
冷色表示理智成熟
紫
特别的、优雅、高贵、昂贵、女性、庄重、神圣、成熟、高级、有深度
无用的、不亲切、有距离感、装模作样、不轻松、神秘、奇幻、冰冷、过于时尚
不现实
粉
柔软、女性、优雅、甜美、高档、春天、清爽、甜蜜、卡通
柔弱、女性化、肤浅、浮躁、装模作样、无用的、幼稚、幼儿
不成熟
白
和平、空、整洁、干净、知性、朴素、清淡、纯洁、开放、医疗
虚无、贫乏、寥寥无几、扫兴、平淡、冷淡、空间、静止、无趣
“空”
灰
高雅、艺术、低调、朴素、复古、传统、高级、正式、舒适
保守、压抑、无聊、无趣、烦躁、尖锐
黑
神秘、妖冶、力量、重量、庄重、严肃、正式、豪华、高级
压力、男性、暴力、孤独、沉默、没有亲和力、犯罪、恐怖、阴暗、沉重、不干净
任何颜色,都可以加黄变暖,或者加蓝变冷
基调(在纯色基础上,加白,或者加黑)
纯色
积极、有活力、开放、力量、直接、健康、儿童、热情、夏天、浓厚
低档、粗俗、肤浅、花俏、炎热、激烈
纯色主色(面积要大)+饱和度低辅助色
多个纯色组合
明色(纯色+白色)
平和、明朗、清爽、轻松、年轻、朴素、舒适、阳光、纯真、清澈、干净、开放
没有深度、浮躁、轻飘、软弱、没有立场、廉价、孩子气
明色搭配有开放感
与补色搭配还有明快华美
淡色(明色+白,即纯色+白+白)
纤细、女性、幼儿、天真浪漫、柔软、温柔、淡雅、轻的、童话般、梦幻
柔弱、不可靠、没主见、没用的、消极、冷淡、冷酷
浊色(纯色+灰)
高级、成熟、稳重、意味深长、朴素、田园、有格调、沉着、贵重、现代感
迟钝、年老、保守、消极、浑浊、没有用处、不实际
成熟优雅
开放度不够,考虑用补色救
淡浊(淡色+黑,即纯色+白+白+黑)
都市、女性、优雅、成熟、成年、雅致、有格调、高雅
柔弱、消极、没活力、冷漠、孤独、不实用
优雅缓慢,都市倦怠感
暗色(纯色+黑)
强力、实用、商务、认真、朴实、坚实、有格调、有深度、男性、传统
过暗、阴气过重、上年纪、威压、严厉、脏
商务格调
类似色组合会内敛
风格对比
稳重(浊色)vs明快(暗色、明色)
平实(白色、明色、淡浊色)vs华丽(纯色、浊色、暗色)
激情(纯色)vs平淡(暗色、淡浊色)
幼儿(淡色)vs暮年(浊色、暗色)
男性(暗色)vs女性(明色、淡浊色)
优雅(明色、浊色、淡浊色)vs活泼(纯色、明色)
商务(暗色、浊色)vs休闲(明色、淡浊色)
单纯(淡色)vs历练(浊色)
《点石成金》笔记
*别让我思考*
目标:让每个页面都不言而喻
关于网络使用情况的事实
我们不是阅读而是扫描
我们不做最佳选择而是满意即可
我们不是寻根究底而是勉强应付
为扫描设计
建立清楚的视觉层次
习惯用法是你的好帮手
把页面划分为明确定义的区域
明显标识可以点击的地方
降低视觉噪声
用户喜欢不思考
省略不必要的文字
关键点
把导航做好
在除了主页和表单页之外每个页都提供导航
有限次数导航到达目标
提供搜索功能
主页
需要提供:站点标识,站点层次,搜索,导读,内容更新
让人理解:这是什么网站?网站上有些什么?我能做什么?为什么我该在这里而不是别处?
提高访客的好感
知道访客想做什么
告诉访客他想要的信息
减少步骤
花点心思
知道访客可能有的疑问
为访客提供协助
容易从错误中恢复
向访客道歉
《形式感》笔记
抄现实中的物体来让主题突出
减法:拆去原有的墙,来让空间足够,但注意别毁梁柱
分块:在空间内进行重新划分
加法:填充,装饰圆、方、三角
三种不同形态的灵活组合 圆:弧线;可爱、灵动、亲和力
方:直线;整洁、严肃,但呆板
三角:折线尖角;刺激、运动、时尚、尖锐断臂之美
去掉局部:排除干扰,突出主题
选取局部:选择特征的集中表现部分,以小见大
替换局部:使用主题来替换局部,来突出主题欲擒故纵
突出也可以通过减弱来获得
想做加法时,考虑减法;想要填满时,考虑留空乾坤大挪移
旋转——动感、时尚、亲切
整体旋转:背景内容都旋转
背景旋转:只背景旋转
综合旋转:内容的一部分跟随背景旋转
平移——从不平衡中寻找新鲜
上下格局
左右格局
混合格局向杂志版式学习
质感轻薄:以信息,视觉轻盈、明快、响亮
版式强节奏:让阅读层次分明,增强视觉节奏感
图片大视觉:用高精度大图全屏大视野
大图平铺自适应
中心定位,两侧自适应
单侧定位,中心延展
全屏响应文字衣橱——让文字样式更好
大关系:理清段落之间的关系
分要点:每个段落内部的结构
小字眼:突出关键要点你看起来很好吃——对信息深入理解
并列型:平等、均衡
对比型:进行可视化的比对,是并列关系的升级
流程型:表示前后的任务关系,是并列关系的升级钉钉铆铆——网页中的小装饰
小图标:快速浏览,简化文字,增强节奏感和舒适度
小序号:引导阅读,快速阅读,增强节奏感,装饰
小字:增强节奏感,增强视觉精度,空位补型,文意补充
小手绘:产生亲切感
长期欢迎项目合作机会介绍,项目收入10%用于酬谢介绍人。新浪微博:@冷镜,QQ:908789432。