文档章节

前端设计基础(一)

A
 A21Suit
发布于 2017/09/08 11:35
字数 1047
阅读 26
收藏 0
点赞 2
评论 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

黑马程序员:前端学习路线图

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

传智播客 ⋅ 2017/03/08 ⋅ 2

自学前端之前端学习路线图

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

爱龙猫 ⋅ 2017/02/24 ⋅ 7

【开源访谈】大漠穷秋:由 Angular 说起,看看前端的发展

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

局长 ⋅ 2017/05/22 ⋅ 13

jQuery

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

掘金官方 ⋅ 01/08 ⋅ 0

今晚九点|Flask 基础与 Web 开发实战

废话不多说,我们直接来介绍这次公开课的内容。 主要内容: 一、Web 开发基础 二、在 Flask 中的 “Hello World” 三、Flask 的模版 四、Flask 的消息提示与异常处理 一、Web 开发基础 本章节...

xjtuhit ⋅ 2017/11/09 ⋅ 0

思考阿里巴巴系的前端解决方案

题记:你有解决问题的能力,却没有解决问题的方法 前端是用户体验的基础,是用户最先体验的服务。由于最近在开发购物分享网站食美特,经历了很多前端的麻烦。学习和参考了很多前端解决方案,...

smeite ⋅ 2013/03/17 ⋅ 0

初识IT行业之前端

先来张搞笑的图.....哈哈!轻松轻松!(第一次写博客,不知道怎么写,比较紧张~(≧▽≦)/~啦啦啦。。。) 哈哈。。看到这张图是不是戳中了很多工科男脆弱的内心,命运使然,作为一名悲催的工...

FT_Christ ⋅ 2014/03/23 ⋅ 0

零基础如何系统地学习前端开发?

原文出处:@张帅在地上 网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习:...

@张帅在地上 ⋅ 2015/11/27 ⋅ 0

一个大二女生的Web开发成长之路:从软妹子到女汉子的进阶过程

原文出处:floraLam 的博客 学习和实践前端一年时间,几乎天天在工作室和一群屌丝男程序员一起学习、开发。这种潜移默化的环境下,编码提高了,节操也细碎了。 一年前,娇滴滴的还是工作室里...

floraLam 的博客 ⋅ 2014/08/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 22分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 24分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 28分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 32分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 33分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 33分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 34分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 40分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 43分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 48分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部