文档章节

前端设计基础(一)

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
浅谈在过去的一年中,我所认识的前端开发---------

  不知不觉,时间敲敲的从指间溜走,它就像一个爱捣蛋熊孩子,每一刻都不曾停止对我发起新的挑战。翻阅过去一年我所积累的程序代码、设计文稿,回过头来看自己走过的弯路,再一次重新审视自...

grootzhang
2016/03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

崩溃bug日志总结1

目录介绍 1.1 java.lang.UnsatisfiedLinkError找不到so库异常 1.2 java.lang.IllegalStateException非法状态异常 1.3 android.content.res.Resources$NotFoundException 1.4 java.lang.Ille......

潇湘剑雨
54分钟前
0
0
学习大数据为什么要先学Java?

计算机编程语言有很多,目前用的多一点的就是Java,C++,Python等等。目前大多数学习大数据的人都是选择学习Java,那Java到底好在哪呢?为什么学大数据之前要先学Java呢?我们今天就来分析一...

董黎明
今天
1
0
php删除服务器所有session

php删除服务器所有session踢掉所有在线用户linux 注意:如果要删除服务器上所有session,重启php服务是解决不了问题的,php的session是持久化的。 有效解决办法: 删除 /tmp 下的所有文件(默...

妖尾巴
今天
0
0
Ubuntu18.04 安装最新版WPS

1.手动卸载libreoffice:sudo apt-get remove --purge libreoffice* 2.官网下载WPS和字体: WPS:http://wps-community.org/download.html 字体:http://wps-community.org/download.html?vl......

AI_SKI
今天
4
0
数据结构(算法)-图(深度优先搜索 DFS)

#include <iostream>using namespace std;#define MaxVex 30typedef char VertexType;typedef struct vexNode adjList[MaxVex];struct edgeNode{int adjvex;//邻接点......

ashuo
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部