网页设计应该注意哪些设计问题

没有什么能像毁掉排版不适合的设计。无论是过大(或过小),不正确类型的缩放是一个重大问题。

它是比你想象的更多的设计有问题。太一般你访问一个网站,类型呈现精美的桌面浏览器,只能从手机后再次访问,并发现它难以阅读。它发生的时间。

的问题是,该类型不是真正缩放为每个设备。当你考虑项目排版比例这是一个完全可以避免的问题。

什么是排版比例?

视觉排版比例相对封装到另一项目中的尺寸,空间和类型元素的比例。这包括从主体文本样式到标题,副标题,标题和其他任何文本元素。

type-scale

网站建设

规模有助于确定在关系的文本元素的大小和位置到彼此。用于网络设计,特别是视觉型比例通常对应在CSS标记(例如H1,H2,H3,p和等等)。

A型规模可以帮助您在设计创造和谐和节奏。它也让你出风格麻烦,因为文本元素与CSS元素,这样设计的每个部分使用相同的元素和一致性对应。

规模应根据正文的大小。(始终设置为第一一个字体和大小)。然后围绕这个主要的印刷规模。不知道从哪里开始呢?谷歌有一个坚实的建议:

  1. 使用CSS 16像素的基本字体大小。调整的基础上的字体的属性大小被使用。
  2. 使用尺寸相对于底座的大小来定义排版规模。
  3. 文本需要字符之间的垂直空间; 一般的建议是使用1.2 Em的浏览器默认的行高。
  4. 限制使用的字体的数量和排版比例。

创建和谐和节奏

A型规模不仅仅能帮助用户通过移动副本,它为文本流创建和谐和节奏。此是任何设备上很重要的。

所以你从哪里开始?

trolley

 

UX事项有一些最好的研究上最小可用通过设备文本大小。请注意,这些都是最小尺寸和正文尺寸的不断增大(一样行距),你应该认真考虑较大的磅。史蒂芬Hoober建议开始低于建议最小值大至少40%。此外,增强的内容样式可以上升到80%以上的最低,但你应该有特别大的类型谨慎为好。

设备类型 最小尺寸 40%的建议(调整易用) 最大80%(扣除易用)
小手机 4 5.6 (6) 7.2 (7.5)
大型电话 6 8.4 (8.5) 10.8 (11)
平板手机 7 9.8 (10) 12.6 (13)
片剂 8 11.2 (11.5) 14.4 (14.5)
笔记本电脑/台式机 10 14 (14) 18 (18)

一旦身体文本大小设置,你可以决定如何支持大小的文本元素。有一个美术到与眼睛测试往往是一个良好的开端。

有几乎一样的标题是太大了这样的事情。说你需要说什么和大小的空间尺度的话。一个两行标题会觉得即使文本是完全相同的大小大于一行。

最简单的方法去思考扩大的头条新闻和其他大型测试元素基础上,正文以百分比工作。虽然每个设计师都有不同的起点,比正文大250%是一个很好的球场为标题; 150%的氢气,为H3 75%,其中的元件如块引号50%。(这不是一个规则,只是一个起点。)

这也是为什么百分比,而不是集大小,很重要:一旦您设置了身型的百分比调整尺寸的大小,因此无论屏幕大小。每一种类型的元件是相对于主体的类型。

字符和空格指南

有设计师看,以及当它涉及到输入屏幕上的其他一些指引。当谈到间距,拇指规则之一是看每行的字符,以确保可读性。

  • 台式机和大型设备:每行60至75个字符
  • 手机和小型设备:每行35至40个字符

注意在较小的屏幕,可读性是基于具有更少的字符(大文本)。

by-association

同样的概念适用于间距为好。您需要文本行之间更多的空间时,屏幕大小限制,使用户更容易阅读和扫描的内容。考虑比桌面排版更小的设备添加更多的25%的行间距。

额外的大小和间距有助于缓解,紧缩或嘎吱嘎吱的感觉,尝试读取更小的设备时,用户可以感受到。因为帆布小,读者流量和易读性是至关重要的,以保持用户滚动。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259029.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论