看这本书的时候真的好恨没有CS7在手》《,不然我百度几张图来模拟下,体验下设计的快感。

人们总是很容易注意到在他们潜意识里存在的东西,比如说这个图:

   我们很容易联想到微信,但是3

  岁的小孩子就没这个概念,他们

  很容易忽略掉这个图标。所以设

  计的时候,要挑选容易被大众认

  知的元素。

优秀的设计就那么简单^ ^!


4大基本原则

一、亲密性

彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,他们就会成为一个视觉单元,而不是多个孤立的元素。另外,要利用好空白来划分空间,划分视觉单元。

亲密性的根本目的是实现组织性,使得信息更容易阅读,也更容易被记住。你要有意识地注意你是怎样阅读的,你的视线怎么移动,从哪里开始,沿着什么路径,到哪里结束。这是设计师必备的观察能力。

二、对齐性

任何的元素都不能在页面上随意摆放。每个元素应当与页面的另外一个元素存在某种视觉联系。对齐的目的是使页面统一而且有条理。其效果类似于把客厅里四处零落的洋娃娃捡起来,并把它们放在一个玩具箱中。要着力避免居中对齐,除非你有意识地想要创建一种比较正式、稳重的表示。

三、重复性

设计中视觉元素的重复可以将作品中的各部分连在一起,从而统一并增强整个作品。重复的目的在于统一,并增强视觉效果,例如多处重复使用粗体字要突出标题或概述性的内容。但是要避免太多地重复一个元素,重复太多会让人讨厌。

四、对比性

在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。要实现有效的对比,这两个元素必须截然不同。我们可以通过字体选择、线宽、颜色、形状、大小、空间等等来增加对比。


做设计不要畏畏缩缩

1、不要害怕在设计中留有空白,这能让你的眼睛稍作休息。

2、不要害怕设计是不对称的,使用非居中的格式,不居中往往能使效果更强烈。

3、不要害怕把单词设置得非常大或非常小,不要担心说话声太大或者太小。在合适的场合这都是可以的。

4、只要最后的结果能支持或强调你的设计或观点,不要害怕让图片太大或太小。

     让你的思维像骏马般奔腾吧~


 

颜色的应用

  1、色轮的基础是红、黄、蓝,如果有一盒水彩,你知道可以混合蓝色和黄色来得到绿色,但是你没有办法通过混合其他颜色来得到纯黄、纯红或纯蓝色。

   2、12色轮有三种阶级的颜色:

  三原色:                

       

    三间色:

         

     第三色:

     

    三间色由相邻的三原色组成,第三色由相邻的颜色组成。

   3、三色组:可以旋转黑色叉,很协调的颜色哦

    

  4、分裂互补三色组:可以旋转这个黑色的叉,还是很协调的颜色哦

       

   5、有时类似色用来做网页设计也不错~

发个链接:http://www.colorsontheweb.com/


 

网页设计切记

  1、空白也是设计元素,要像组织信息那样,有意识地组织空白。

  2、重复原则在网页设计中尤为重要,可以重复一种颜色方案,使用同样的字体或按钮,或者在每一页的同一个位置放置风格类似的图片元素。总之,你必须使游客知道他们仍然在同一个网站中。

  3、不要让访问者在页面上移动滚动条来查看导航链接,这样会让人唾弃你的网站。

  4、不要让文本紧挨着浏览器窗口的左边界,这样不美观。

  5、不要对文本或图片链接使用默认的蓝色,这是业余水平页面的标志

  6、正文不要采用粗体,也不要占据整个页面宽度。

  7、不要使用荧光背景色,特别是不要使用荧光文字。

  8、页面的最大宽度不要超过800px,表的宽度不要超过600px,否则访问者想打印页面时会很恼火。

  9、保证录入页面和主页在800px宽、600px高的范围内。

  10、不要在网页用宋体,这样显得很死板。


设计的过程:

  1、确立一个中心点(你希望用户首先看见什么)

  2、将信息按逻辑分组

  3、建立并维护明确的对齐

  4、创建重复,可以使用粗字体、线、装饰符号或者某种空间布局

  5、避免冲突(元素之间两两不完全相同),强调对比(元素之间两两完全不同)

  6、暖色是趋进的,冷色是后退的,不建议用大幅度的暖色作为背景

Reading——The Non-Designer's Design Book的更多相关文章

  1. Altium Designer 15 --- Design PCB Frame by Rhinoceros

    step 1: Draw a PCB shape and the main component placed in the PCB. The drawing sheet should be in th ...

  2. java 并发官方教程

    http://docs.oracle.com/javase/tutorial/essential/concurrency/index.html Concurrency Computer users t ...

  3. Devexpress VCL Build v2013 vol 14.1.3 发布

    我修,我修,修修修. New Major Features in 14.1 What's New in VCL Products 14.1 Breaking Changes To learn abou ...

  4. 行为驱动开发iOS <收藏>

    前段时间在design+code购买了一个学习iOS设计和编码在线课程,使用Sketch设计App,然后使用Swift语言实现Designer News客户端.作者Meng To已经开源到Github ...

  5. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. Indy FTP 警告:Only one TIdAntiFreeze can be active in an application

    > Should I use a AntiFreeze component on every form I have a TIdTCPClient > component?  Or is ...

  7. 【翻译二十三】java-并发程序之随机数和参考资料与问题(本系列完)

    Concurrent Random Numbers In JDK 7, java.util.concurrent includes a convenience class, ThreadLocalRa ...

  8. Code Simplicity–The Science of Software Development 书摘

    Chapter1 Introduction That is the art and talent involved in programming—reducing complexity to simp ...

  9. Java 设计模式学习总结(上)

    在编写和维护公司的现有代码的时候,我经常思考的问题是:怎样的系统算一个好的系统?如何设计具有扩展.可维护.复用的系统,它能最大限度的应对产品经理不断变化的需求.答案似乎是:设计模式. Remember ...

  10. Cortex-M3 Context Switching

    http://www.embedded.com/design/embedded/4231326/Taking-advantage-of-the-Cortex-M3-s-pre-emptive-cont ...

随机推荐

  1. 内联元素inline-block空隙问题

    1.产生的原因 当我们使用"display:inline-block"把块集元素转换为内联元素时,每两个内联元素之间有一定的空隙,既不是margin也不是padding,最终发现是 ...

  2. C语言词法分析:C#源码

    今天继续研究代码解析的算法 这个是算法流程图 有图解可能更直观一点: 以下是c#源码:   1using System;   2using System.IO;   3using System.Tex ...

  3. Swift-自定制带有特殊按钮TabBar

    ---恢复内容开始--- 封装了一个带有中间凸起的自定制Tabbar,包含4个普通按钮和中间的一个凸起按钮- 首先封装了一个UIButton,重新设置了UIButton的图片位置和label位置 使用 ...

  4. 洛谷2943 [USACO09MAR]清理Cleaning Up——转变枚举内容的dp

    题目:https://www.luogu.org/problemnew/show/P2943 一下想到n^2.然后不会了. 看过TJ之后似乎有了新的认识. n^2的冗余部分在于当后面那部分的种类数一样 ...

  5. Unidac手工安装

      Universal Data Access Components Source Code Copyright 1997-2010, Devart. All Rights ReservedThere ...

  6. 如何查看自己的laravel版本

    方法1: 使用php artisan --version ,只要能看懂这个命令的人一定已经具有初步的Laravel知识.再介绍一种不需要命令,直接去文件中去查看的方法. 方法2: 在项目文件中找ven ...

  7. DNS 解析流程

    DNS( Domain Name System)是“域名系统”的英文缩写,是一种组织成域层次结构的计算机和网络服务命名系统,它用于TCP/IP网络,它所提供的服务是用来将主机名和域名转换为IP地址的工 ...

  8. 子域名扫描器 - aquatone

    项目地址:https://github.com/michenriksen/aquatone git clone,然后打开 ┌─[root@sch01ar]─[/sch01ar] └──╼ #git c ...

  9. ulimit open files linux打开文件数设置验证

    #include <stdio.h> #include <sys/types.h> #include <fcntl.h> #include <stdlib.h ...

  10. Elasticsearch之head插件安装之后的浏览详解

    前提, Elasticsearch之插件介绍及安装 https://i.cnblogs.com/posts?categoryid=950999&page=2  (强烈建议,从头开始看) 比如, ...