文档章节

前端设计基础(一)

A
 A21Suit
发布于 2017/09/08 11:35
字数 1047
阅读 26
收藏 0

    在前端设计上,或者在平时写文档、ppt、记笔记等,都是需要用到文字的排版的。现在就来说文字排版的几个基本原则,这些基本原则是平时非常好做到的,其中对齐和亲密性是比较容易做到的,也是比较容易忽视的。做到对齐和亲密性我们的样式就会好很多。

 

 

   1.对比(Contrast)
   对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目。

    我们来看一下对比效果好的网站(由于这里不利于排版,所以没对博客太多排版。)

a.苹果官网

(在这里我们看到苹果的官网的字体总共就4种字体,当你阅读其中一种的时候完全不会被其他的所干扰,能够读取到最主要的内容。总共将元素归为四类,1.banner的主题 2.导航 3.活动题目 4.活动简介 在其中我们还注意到右下角的图片上文字也是区别于其他三张图片上的文字的,这样将信息重要等级提示了)

b.Extreme Sports Magazine Concept

(这个网站的设计很酷 设计元素简单 但是效果很好  可以看的出来利用了对比 对齐的设计原则)

 


    2.重复(Repetition)
    让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。

c.HHonors Hilton

    

  (上面的网站利用了重复原则 使得 相同类别的内容有了很多相同的属性。能做到很好的分类,眼睛也不会太累。比如下面的一排图标,用了相同的颜色、大小、间距。当然在利用这些原则时,都要注意留白,这个是设计师最喜欢干的事。)

 


    3.对齐(Alignment)
    任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个    元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

    居中对齐是很多前端最喜欢的做法,可能是在适配上最保险,但是这样的对齐方式处理不好就会变得比较俗。我们来看上面的(b图)采取了左对齐和右对齐。看起来极具设计感,所以在这种文字不多的地方也鼓励右对齐,有图片背景时根据背景的焦点来处理对齐和文字放置的位置。

d.intercores

(文字居中左对齐,看上去也会很不错)

 


    4.亲密性(Proximity)
    彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的    亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

    这个原则在写文档时非常受用,文字的排版中这个原则很重要。

    1.在文档中我们可以将相同的小项加序号、或者前面加个小图形,标识他们的相关性。

    2.要将相同的项放到一起,通常会采用相同的样式。

    3.在空间上相关性较大的项会聚集,之间的间距会小一些,且各个聚集区之间距离会相对较大。

    4.在文章中,某几段如果相关性较大,可能还会起小标题,也是将元素归组的方法之一

e.secret energy

    

(上面这个例子将文章归置的很容易了解文章结构,也更容易去阅读。利用亲密性原则将文本分为三个部分,1.标题 2.文章内容 3.文章相关信息 看上去也清晰了很多)

© 著作权归作者所有

共有 人打赏支持
A
粉丝 1
博文 5
码字总数 2601
作品 0
贵阳
程序员
web前端开发程序员的收入未来会更高吗

Web前端我们通过其字面意思大概可以了解到,web前端的设计师的工作内容就是直面用户的,当然,在这一过程中还会应用到一些包括用户交互,页面布局设计等,也许有人会问,ps和美工能够做web前...

web前端程序员
2017/12/07
0
0
黑马程序员:前端学习路线图

前端很火,想自学前端的人也多。作为过来人,知道自学的辛苦。特来给大家分享这份学习路线图,让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦!无论...

传智播客
2017/03/08
683
2
自学前端之前端学习路线图

前端很火,想自学前端的人也多。作为过来人,知道自学的辛苦。特来给大家分享这份学习路线图,让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦!无论...

爱龙猫
2017/02/24
1K
7
【开源访谈】大漠穷秋:由 Angular 说起,看看前端的发展

前端开发框架 Angular 目前在前端圈子的火热程度是有目共睹的,本期开源访谈围绕着 Angular 这个主题,我们邀请到了大漠穷秋老师,谈论了 Angular 目前乃至未来的发展、前端领域的发展、以及...

局长
2017/05/22
4.9K
13
jQuery

前端基础进阶:全方位详细图解面向对象、构造函数、原型与原型链 这是一篇非常适合新手理解关于面向对象一切的文章,解答了为什么我们会使用构造函数与原型,构造函数与原型的本质以及 new ...

掘金官方
01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高三暑假我是怎么想开去学linux系统的

高三的时候,我有一句口头禅:“老了老了,现在做题越来越迟钝了”。当时整天日夜苦读,体重日益增加,脸色越来越黯淡,我在终于熬过了高考的时候,简直心里面乐得开了花。我终于可以去做自己...

linuxprobe16
19分钟前
0
0
Python 获得命令行参数的方法

需要模块:sys 参数个数:len(sys.argv) 脚本名: sys.argv[0] 参数1: sys.argv[1] 参数2: sys.argv[2]

编程老陆
26分钟前
0
0
链队

队列用链表来表示时,需要用两个变量来记录队列两端的变化:theFront,theBack. 根据链接方向的不同,链队有两种链接方式(其实就是链表的头插入节点和尾插入节点,头删除节点和尾删除节点)。...

Frost729
30分钟前
0
0
IDEA toString() json模板

public java.lang.String toString() {java.lang.StringBuilder builder = new java.lang.StringBuilder();#set ($i = 0)#foreach ($member in $members)#if ($i == 0)builder.appen......

Mtok
40分钟前
0
0
Dubbo内核实现之SPI简单介绍

Dubbo采用微内核+插件体系,使得设计优雅,扩展性强。那所谓的微内核+插件体系是如何实现的呢!即我们定义了服务接口标准,让厂商去实现(如果不了解spi的请谷歌百度下), jdk通过ServiceLo...

明理萝
45分钟前
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部