在内容大小方面是否有指导方针？

Question

我学习编码已经有一段时间了，而且我确实学到了很多东西，但是造型对我来说一直很痛苦（我知道这很尴尬）。我完全不知道导航栏应该有多少像素或任何组件应该有多宽。如果它对我来说太小/太大，我会调整它的大小。尺寸单位？不知道。不要误会我的意思。百分比、ems 和指标 - 我知道它的存在以及它们的作用，但我以像素为单位做所有事情。我并不是说我编写的代码看起来很可怕而且反应迟钝。一切都是尝试和错误，直到事情看起来美观为止，而且我花了很多时间让事情看起来很漂亮。

假设我需要在 CSS 中制作一些简单的东西，比如弹出模式。我可能将隐藏的内容包装在div 中，类为modal，其内容在div 中，类为modal__content，创建一个button 以关闭它并在其中包含一些文本。语义正确的 HTML 不是问题。动画和颜色？好吧，你明白了。我只是不知道如何设计它。那时我意识到我只是在理论上了解 CSS。我可以编码，但我只是不知道模态应该是桌面屏幕的 300x200 像素框还是使用百分比？

如果您有一些保存的文章或书籍可以推荐，我将非常感激。

我使用过 Bootstrap 和语义 UI。这些是非常酷且方便的工具，但我希望了解一些关于尺寸调整的深入指导，因为我真的不知道某些东西实际上应该是什么样子。大多数时候我只是关注所有的字体大小、填充和边距等。

Answer 1

我也不擅长平面设计。很少有人在图形设计和编程/脚本方面都表现出色。

SitePoint 有一些关于该主题的书籍值得一读，尤其是第一本（每本都有平装本和电子书）：

• The Principles of Beautiful Web Design, 3rd Edition
• Sexy Web Design

The Universal Principles of Design 可能会涵盖您所询问的主题，尽管我还没有阅读过。

平面设计在很大程度上依赖于惯例（这通常是一件好事）、时尚（不那么如此）以及设计师和客户的偏好。但是，有一些重要的指导方针需要了解。我会在这里提到一些。

更大或更粗的字体、动作（视频和其他动画）以及对比鲜明的边框和背景吸引眼球。注意不要同时对太多元素进行这种视觉强调。 （对于组织的主页来说，这是一个常见问题，许多派系争相突出对他们来说最重要的事情。）

邻接意味着关系。例如，通常最好给出标题，例如<h2>，上边距大于下边距。

元素之间往往需要一个舒适的空间，而不需要使用太多的屏幕空间。如果需要在内容部分之间留出较大的空间，通常最好将它们按比例缩小以用于移动设备。

动画有多种用途。有各种脉冲/“颤动”动画来指示正在加载内容或正在进行某种其他类型的处理。有些转换显示状态之间的非瞬时变化，例如菜单打开/关闭或更改是内容/图像滑块的视图。而其他主要是出于审美原因，以增加视觉趣味。

很高兴您提到了语义。您是否在适当的地方使用<label> 元素？

附：太多自称“网页设计师”的人不知道或拒绝承认网页图形设计和印刷品之间的区别。