文档章节

前端设计基础(一)

A
 A21Suit
发布于 2017/09/08 11:35
字数 1047
阅读 98
收藏 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
贵阳
程序员
私信 提问
加载中

评论(0)

web前端开发程序员的收入未来会更高吗

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

web前端程序员
2017/12/07
0
0
【面试合辑】抓住金三银四涨薪好时机,这些进阶技术点必须掌握!

算法、Python、AI、测试、PHP篇传送门在此! 每年的三月和四月,企业释放招聘岗位、社会人员跳槽,汇集成年度人才招聘的一个高峰季节,行称“金三银四”! 脉脉数据显示,在全行业中,IT互联...

慕课网官方_运营中心
04/01
0
0
黑马程序员:前端学习路线图

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

传智播客
2017/03/08
1.5K
2
web前端自学之路:我的HTML、CSS学习计划

前端自学大概的路线图 因为刚开始学习,没有完整的前端知识体系,所以是大概的路线图,希望大家可以帮我一起修改完善。 大致的思路是:1.先打好基础,在学习框架。 基础方面主要涉及到的语言...

osc_40iweqjn
03/17
6
0
自学前端之前端学习路线图

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

爱龙猫
2017/02/24
3.1K
7

没有更多内容

加载失败,请刷新页面

加载更多

20171113曾英特《网络欺诈防范》实验报告

一、实验名称 网络欺诈防范 二、实验目的 理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法。 三、实验内容 1.简单应用SET工具建立冒名网站 2.Ettercap工具的dns_spoof 3...

osc_mzickfah
49分钟前
19
0
IdentityServer4(8)- 使用密码认证方式控制API访问(资源所有者密码授权模式)

一.前言 本文已经更新到 .NET Core 2.2 OAuth 2.0 资源所有者密码模式允许客户端向令牌服务发送用户名和密码,并获取代表该用户的访问令牌。 除了通过无法浏览器进行交互的应用程序之外,通常...

osc_p23q7y3z
50分钟前
19
0
Hail_Hydra2—Beta冲刺日志(5)

这个作业属于哪个课程 2020春-S班(福州大学) 这个作业的要求在那里 团队作业第六次——beta冲刺+事后诸葛亮 团队名称 Hail Hydra(九头蛇) 这个作业的目标 Beta冲刺5 作业正文 作业正文 其他参...

osc_y8c6tkvz
51分钟前
19
0
Tomcat9 Error: Could not find or load main class org.apache.catalina.startup.Bootstrap

今天因为同事要求,希望安装一个Tomcat9给他,结果发现一个问题: 首先我登录的是tomcat官网,选择source包下载,wget http://apache.fayea.com/tomcat/tomcat-9/v9.0.0.M26/src/apache-tomc...

osc_htns3spg
52分钟前
18
0
SpringSecurity使用json登陆

一、创建项目并导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>org.spr......

osc_oa9f94a9
54分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部