《写给大家看的设计书》《写给大家看的色彩书》《点石成金》《形式感》学习笔记

首发：个人博客，更新&纠错&回复

今天读了四本书《写给大家看的设计书》《写给大家看的色彩书》《点石成金》和《形式感》，学习学习设计。

笔记在这里，是运用学到的知识做的一个简单网页，欢迎提批评意见。

今天学到的最重要的东西，是《写给大家的设计书》指出的四大原则：

亲密、对齐、重复、对比！

 

下面是笔记的文本：

《写给大家看的设计书》笔记
四大原则：
    亲密性
      目的：组织性
      方法：分组，空白
      避免：页面总体别超过3至5个部分
      物理位置的接近就意味存在关联。
    对齐
      目的：统一性，有条理
      方法：注意元素放在哪
      避免：不要混用文本对齐方式，不要居中对齐
    重复——条理性、统一性
      目的：统一，增强视觉效果
      方法：将一致性向前推进一步
      避免：别过多地重复同一元素
    对比——既然不同，截然不同
      目的：增强页面效果，信息组织
      方法：字体、线宽、颜色、形状、大小、空间，重要的是对比一定要强烈
      避免：别畏缩，勇敢点，让对比截然不同
颜色：
    色轮：三原色*3，三间色*3，第三色*6
    色轮使用：互补色，三色组、分裂互补三色组、类似色
    亮暗：纯色即色调，加黑为暗色，加白为亮色
网页设计：
    重要因素：重复、清晰
设计思路：
    从中心点开始
    将信息分组，建立并维护明确的对齐，创建重复，强烈的对比

《写给大家看的色彩书》笔记
    基础：不要超过三种色彩
    两色：
      邻色
        一种颜色纯色，另一种颜色纯度低或明度低，则有主次
      同色
        色相相同，明度纯度修改
      对比色
        激烈又稳定
        面积要有区别
        调整明度、饱和度
      间隔两色
    三色：
      不超出三种色相即可
      颜色越少越好
      相邻三色
        一致性
      等距三色组
        对比强烈
      分裂对比三色组
        细腻互补
    主色、辅色、点缀色
      主色
        整个作品风格
      辅助色
        帮助主色建立更完整的形象
        选择辅助色：同类色，对比色，间隔色
      点缀色
        细节上使用
        出现次数多，颜色跳跃，引起阅读，与其他颜色反差大
    黑、白、灰做调和色
      面积调和
    色彩搭配
      寻找一致，考虑相似色
        高明度的各种搭配都和谐
        同一色调的不同明度搭配
        用黑白灰来调和
      寻找差异，考虑对比色
        兼顾统一性和对比性
        使用面积来对比
        饱和度高对比效果好
    色彩的情感
      红
        积极、活力、开放、激情、艺术、喜庆、力量、女性、生命
        成熟、危险、血腥、凝固、理智、革命、激烈、封建、死亡
        使用广泛
      橙
        阳光、欢快、家庭、温暖、记忆、放松、日常、活动、舒适
        神秘、幻想、优雅、时髦、理智、冷静、陈旧
      黄
        阳光、轻松、幽默、开朗、热闹、欢乐、幼儿、开朗、开放
        吵闹、廉价、不可靠、软弱、不结实、稚嫩
      绿
        大自然、生命、安全、新鲜、娇嫩、朴素、田园、春天、和平、野性
        土气、乡下、过轻、军队、高贵、不时尚
      蓝
        理智、清凉、知性、公正、精密、细致、海洋、严谨、商务、公式化
        寂寞、孤独、阴气、严格、无趣、悲伤、高科技、严酷
        冷色表示理智成熟
      紫
        特别的、优雅、高贵、昂贵、女性、庄重、神圣、成熟、高级、有深度
        无用的、不亲切、有距离感、装模作样、不轻松、神秘、奇幻、冰冷、过于时尚
        不现实
      粉
        柔软、女性、优雅、甜美、高档、春天、清爽、甜蜜、卡通
        柔弱、女性化、肤浅、浮躁、装模作样、无用的、幼稚、幼儿
        不成熟
      白
        和平、空、整洁、干净、知性、朴素、清淡、纯洁、开放、医疗
        虚无、贫乏、寥寥无几、扫兴、平淡、冷淡、空间、静止、无趣
        “空”
      灰
        高雅、艺术、低调、朴素、复古、传统、高级、正式、舒适
        保守、压抑、无聊、无趣、烦躁、尖锐
      黑
        神秘、妖冶、力量、重量、庄重、严肃、正式、豪华、高级
        压力、男性、暴力、孤独、沉默、没有亲和力、犯罪、恐怖、阴暗、沉重、不干净
      任何颜色，都可以加黄变暖，或者加蓝变冷
    基调（在纯色基础上，加白，或者加黑）
      纯色
        积极、有活力、开放、力量、直接、健康、儿童、热情、夏天、浓厚
        低档、粗俗、肤浅、花俏、炎热、激烈
        纯色主色（面积要大）+饱和度低辅助色
        多个纯色组合
      明色（纯色+白色）
        平和、明朗、清爽、轻松、年轻、朴素、舒适、阳光、纯真、清澈、干净、开放
        没有深度、浮躁、轻飘、软弱、没有立场、廉价、孩子气
        明色搭配有开放感
        与补色搭配还有明快华美
      淡色（明色+白，即纯色+白+白）
        纤细、女性、幼儿、天真浪漫、柔软、温柔、淡雅、轻的、童话般、梦幻
        柔弱、不可靠、没主见、没用的、消极、冷淡、冷酷
      浊色（纯色+灰）
        高级、成熟、稳重、意味深长、朴素、田园、有格调、沉着、贵重、现代感
        迟钝、年老、保守、消极、浑浊、没有用处、不实际
        成熟优雅
        开放度不够，考虑用补色救
      淡浊（淡色+黑，即纯色+白+白+黑）
        都市、女性、优雅、成熟、成年、雅致、有格调、高雅
        柔弱、消极、没活力、冷漠、孤独、不实用
        优雅缓慢，都市倦怠感
      暗色（纯色+黑）
        强力、实用、商务、认真、朴实、坚实、有格调、有深度、男性、传统
        过暗、阴气过重、上年纪、威压、严厉、脏
        商务格调
        类似色组合会内敛
    风格对比
      稳重（浊色）vs明快（暗色、明色）
      平实（白色、明色、淡浊色）vs华丽（纯色、浊色、暗色）
      激情（纯色）vs平淡（暗色、淡浊色）
      幼儿（淡色）vs暮年（浊色、暗色）
      男性（暗色）vs女性（明色、淡浊色）
      优雅（明色、浊色、淡浊色）vs活泼（纯色、明色）
      商务（暗色、浊色）vs休闲（明色、淡浊色）
      单纯（淡色）vs历练（浊色）
    

《点石成金》笔记
    *别让我思考*
      目标：让每个页面都不言而喻
      关于网络使用情况的事实
        我们不是阅读而是扫描
        我们不做最佳选择而是满意即可
        我们不是寻根究底而是勉强应付
    为扫描设计
      建立清楚的视觉层次
      习惯用法是你的好帮手
      把页面划分为明确定义的区域
      明显标识可以点击的地方
      降低视觉噪声
    用户喜欢不思考
    省略不必要的文字
    关键点
      把导航做好
        在除了主页和表单页之外每个页都提供导航
        有限次数导航到达目标
        提供搜索功能
    主页
      需要提供：站点标识，站点层次，搜索，导读，内容更新
      让人理解：这是什么网站？网站上有些什么？我能做什么？为什么我该在这里而不是别处？
    提高访客的好感
      知道访客想做什么
      告诉访客他想要的信息
      减少步骤
      花点心思
      知道访客可能有的疑问
      为访客提供协助
      容易从错误中恢复
      向访客道歉

 

《形式感》笔记

    抄现实中的物体来让主题突出
      减法：拆去原有的墙，来让空间足够，但注意别毁梁柱
      分块：在空间内进行重新划分
      加法：填充，装饰

    圆、方、三角
      三种不同形态的灵活组合 圆：弧线；可爱、灵动、亲和力
      方：直线；整洁、严肃，但呆板
      三角：折线尖角；刺激、运动、时尚、尖锐

    断臂之美
      去掉局部：排除干扰，突出主题
      选取局部：选择特征的集中表现部分，以小见大
      替换局部：使用主题来替换局部，来突出主题

    欲擒故纵
      突出也可以通过减弱来获得
      想做加法时，考虑减法；想要填满时，考虑留空

    乾坤大挪移
      旋转——动感、时尚、亲切
        整体旋转：背景内容都旋转
        背景旋转：只背景旋转
        综合旋转：内容的一部分跟随背景旋转
      平移——从不平衡中寻找新鲜
        上下格局
        左右格局
        混合格局

    向杂志版式学习
      质感轻薄：以信息，视觉轻盈、明快、响亮
      版式强节奏：让阅读层次分明，增强视觉节奏感
      图片大视觉：用高精度大图

    全屏大视野
      大图平铺自适应
      中心定位，两侧自适应
      单侧定位，中心延展
      全屏响应

    文字衣橱——让文字样式更好
      大关系：理清段落之间的关系
      分要点：每个段落内部的结构
      小字眼：突出关键要点

    你看起来很好吃——对信息深入理解
      并列型：平等、均衡
      对比型：进行可视化的比对，是并列关系的升级
      流程型：表示前后的任务关系，是并列关系的升级

    钉钉铆铆——网页中的小装饰
      小图标：快速浏览，简化文字，增强节奏感和舒适度
      小序号：引导阅读，快速阅读，增强节奏感，装饰
      小字：增强节奏感，增强视觉精度，空位补型，文意补充
      小手绘：产生亲切感

长期欢迎项目合作机会介绍，项目收入10%用于酬谢介绍人。新浪微博： @冷镜，QQ： 908789432。