《写给大家看的设计书》《写给大家看的色彩书》《点石成金》《形式感》学习笔记
《写给大家看的设计书》《写给大家看的色彩书》《点石成金》《形式感》学习笔记
祁达方 发表于2年前
《写给大家看的设计书》《写给大家看的色彩书》《点石成金》《形式感》学习笔记
  • 发表于 2年前
  • 阅读 64
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 今天学到的最重要的东西,是《写给大家的设计书》指出的四大原则:亲密、对齐、重复、对比!

首发:个人博客,更新&纠错&回复

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

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

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

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

 

下面是笔记的文本:

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

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


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

 

《形式感》笔记

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

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

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

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

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

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

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

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

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

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

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


共有 人打赏支持
粉丝 10
博文 41
码字总数 51226
×
祁达方
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: