在谈到设计,我们需要考虑从设计师的角度来看文本。文本必须清晰易读,同时与该网站的风格很好地拟合。但它也必须与内容的层次结构。
建立层次结构是一个网站的组成的“大画面”。但是当你进入排版,还必须建立相关的页面上特定的文本层次。在这一块,我们将解释创建具有页眉和如何使用的空白,使冗长的段落视觉易消化的关系。厦门网站建设专家厦门创意互动网络科技有限公司
标题和间距
Web内容通常只围绕只是一对夫妇不同的文本元素。标题范围从H1-H6,但大多数网站只使用H1-H4最多。不管有多少标题样式的使用,这是你的工作,作为一个设计师手艺他们,这样的层级明确规定。
文字之间的空间是很重要的,因为它有助于定义页面内容本身。当用户发现一个新的标题,他们期望能够识别内容是否切换到一个全新的课题,或者如果它是一个现有的主题中。大小,颜色和标题文本的样式的正确组合有助于为用户创造正确的预期。
文字之间的负空间显示页面内容的方式有关。用大量的篇幅头被视为更占优势,而头部接近段被视为通过环境相关的。段后底部页边显示文本行以及它们在层次结构中属于之间的关系。这一切都涉及回各具特色的内容层次结构在页面上文字之间视觉上分辨。
标题关系
每个标题应该反映它自己独特的风格,这也补充了其他风格的页面上的文字。各具特色的灿烂与头的做法变得更容易,但空白值一般应具有相同的行为,无论标题样式的。
广场采用用大量的图像和文本块传统启动网页布局。标题是设计的一个特别有趣的部分,因为它们的范围从超大型到无穷小。然而,大小并不重要一样多的关系到页面上的其他文字。
以上是大标题使用上面和下面的文本多余行距截图注意。这些章节标题视觉传达的存在感“自己的”,但也自然组合在一起成更大的小标题和段落块。
每个内部功能块使用小得多副标题文本。这些内部接头差不多大小段落文本,但他们站出来大胆文字和较暗的颜色。视觉上,它是水晶般清晰的文本,这些粗线仍标题(只是视觉上的图腾柱下)。
的标题和段落之间的间距还定义了哪些段落属于哪个头。同样,您应该插入大量的小头和大标题之间的空间。再次,负空间定义无论是在视觉设计和排版层次。
由于在免费导游解释的Web UI设计最佳实践,各具特色页头时,请记住以下几点:
- 一个视觉层次应通过利用空间,大小,颜色,和/或文字样式是显而易见的。站在从监视器3-5英尺远的地方,即使这应该是可见的。您也可以使用5秒的高斯模糊测试来检查的层次结构。
- 保持每个副标题接近它的第一个孩子段落。
- 将精辟头靠近更加快速,清晰地传达思想。
冗长的段落
在语境空白的话题,其实存在着如何围绕常用的段落设计的问题。牢固,可靠,发现几乎无处不在,该段是每一个网站的内容战略的支柱。
但是,如何内容被写入变化的基础上的内容是如何风格。例如,一个在线新闻杂志将采用不同的段落样式比小园艺博客。造型段落时的内容量,内容长度和详细程度都开始发挥作用。
试着用足够大的文字设计,使这显然可读与屏幕相距3英尺远。文字大小是非常相似的白色空间中,它的通常最好设计小于大。然而,实行适度和克制。
如果文本尺寸过大,那么它会只是占用更多的屏幕空间,需要更多的滚动。但是,如果它太小也可能是不可读的,或游客将体验到难以垂直节奏,因为他们把他们的目光从线上到线。
要牢记两个重要的事情是段落边距和行高(每行之间的空间)。文本在段落的大小决定这两个值,因为白色的空间取决于大小。
媒介是一个在线的博客平台,做一段设计权。文字是清晰的,可读性,完全分开。作为其段设计所示,线高度值必须足够大,以连接到下一行而不感到过度。
由于在推荐网页设计趋势2016电子书,这里有拇指遵循一些好的规则:
- 避免使该行高度大于文本的典型行较大。
- 该EM字体单位非常适合在所有浏览器建立统一的大小。
- 行高度应经常是一点点比字体大小。
- 尝试用1EM 1.5em-1.75em的行高相结合的字体大小。
段落间距可能会非常棘手,但它是一个重要的课题,特别是对文字为主的网站。底部段落边距,应该比文本的典型行大得多。底部段边距应该足够大,就可以直观地确定当一个段已结束。
一旦你找出一个网站的文字大小,它变得更加容易与行高价值发挥,找出利润率间距。这里的目的是清楚和结构。每一个新的段落应该是显而易见的,没有任何疑问。关键是每个文本块之间的比例空间。
正如前面提到的,这是一般安全有“太多”的空白,而不是远远不够的。只是避免使用数量巨大的空间,或者你会很浅的内容密度结束。保持足够的内容在页面上是有趣的,但没有这么多,这是压倒性的。
要了解更多关于在网页界面设计的内容,看看这块就如何设计完美的段落。
带走
在排版负空间直接影响的同时整体组合物和较小的页面元素。当设计排版,内容为王。
在页面中的段落可能需要比在侧边栏中找到段落较大的边距。在标题链接可能看起来与微胖顺畅,但在页脚链接可能看起来整洁很少填充。没有坚实的规定,只有最佳实践记住。
还记得排版如下连同其自身的层次结构就像网页结构。实践中大量的将是提高你的眼睛很快认识到适合放在任何特定的web项目空间值的最佳方式。
当涉及到空间设计,请记住,空间美学质量屈居空间作为设计工具。空间创造的关系,定义了层次结构,并强调内容 – 在考虑如何降低视觉噪声时,务必注意以下几点。