12个基本的网页设计面试问题 *

在平面设计中，留白是指有意留白的任何区域. 它不一定是白色的. 在网页设计和其他媒体中，留白都可以有效地用来在视觉上分离或分组元素, 把注意力吸引到一个特定的元素上, 加强内容布局或网格. 有时，留白也被纯粹地用于创造视觉上有趣的构图.

格式塔原理是视觉感知理论的一部分. 它们与大脑“看到”不明显可见的事物的能力有关, 通过潜意识地组合形状, 找到相似之处, 完成物理上不相连的元素的组合. 设计中常用的一些原则是:

• 相似 -人类的大脑感知具有相似特征的元素(无论是颜色, 形状, 大小或三者的组合), 有意义的连接或组合在一起的. 这在导航系统设计和应用程序工具栏中特别有用;

• 接近 -类似于相似原理, 相互靠近的元素被认为是分组的, 相关的, 或者说是整体的一部分. 这是建筑布局设计的一个原则. 在设计包含大量不同内容的页面(如新闻网站或应用程序的主页)时，这一点尤为重要。

• 关闭 -当面对一个熟悉的物体时，它的视觉是不完整的(图像的一部分缺失)，大脑会自动“完成图像”或填补空白，并有效地看到图像，好像它是完全显示的. 这是一个经常用于标志设计的原则. 使用闭包原则可以使一个元素看起来更有趣(因为用户的大脑“工作”来完成元素)，这使得设计更令人难忘;

• 图形-背景关系 在心理上将“物体”与“背景”分开的倾向是基于颜色的组合吗, 形状和过去的经历. 当在平面设计中使用得当时, 这个原则将用户的注意力引导到构图的重要元素上;

• 共同的命运 -在串联中同步移动的元素通常被视为分组或作为单个对象的一部分. 共同命运在交互设计中很有用;

• 连续性 ——大脑看到联系的能力，并根据相似性沿着一条或另一条路径走下去，沿着经过终点的线走下去. 这个原则可以用在标志设计中，以产生兴趣. 它也可以用于构建布局或组合，使它们看起来像一个整洁的对象, 而不是一堆杂乱的元素.

有些字体可以很好地协同工作，在同一页面上看起来很好. 为了正确地组合两种字体，我们需要寻找它们之间的异同(衬线), 历史背景, x坐标, 厚度, 孔径, 中风对比).

这是一条很好的经验法则, 如果两种字体除了一件重要的事情(类似的字体)之外都很相似，那么它们可以很好地协同工作。, 或者如果它们非常不同，但有一个共同点将它们连接起来(互补字体). 两种字体具有相同的x坐标(相同字体大小的小写“x”相对于大写“x”的高度)总是好的.

应该避免组合看起来太相似的字体(就像组合一样) 海维提卡 与 最亮的星格兰德 or 天线 与 Verdana).

创建良好组合的一些规则:

• 将衬线字体与无衬线字体组合, 它们都有非常相似的x高, 笔画对比(人物线条最细和最粗的部分之间的差异)和光圈(人物的开放或封闭程度);
• Use contrasting 厚度 options of a single font; a light/thin version of a font is very different than its bold/black versions 和 two versions work very nicely in combination;
• 一些字体被设计成家庭，彼此配合得很好. 例如Adobe的 无数 和 奴才 两人或 博物馆 与 博物馆没有 和 Adelle 与 Adelle无.
• 在选择字体时，重要的是要记住每个字体将被使用的上下文. 标题或显示字体可以更华丽, 精致细致, 而主副本应该是一种更简单的字体，以便在较小的尺寸下可读.
• 对于大多数设计, 一个或两个字体系列就足够了，第三个可能用于非常特定的目的.

有些颜色组合在视觉上比其他颜色更吸引人, 这是有原因的:人类的大脑寻求和谐, 秩序与制度, 坚持这种系统的配色方案看起来更“讨人喜欢”。. 有几种方法可以有效地组合颜色.

这里有一些:

• 单色 -使用相同色调的几种不同色调, 比如浅绿色与深绿色的结合, 深绿色和使用亮绿色的口音. 它对前景色和背景色的组合很好.

• 类似的 -使用在色轮上彼此接近的颜色(和彩虹), 比如橙色和黄色, 蓝色和绿色, 或者红色和紫色. 通常, 它适用于相邻放置的元素, 但效果不如前景和背景的组合.

• 互补 -使用位于色轮两端的颜色，如橙色和紫色, 蓝色和黄色, 或者绿色和红色. 这些颜色通常有很好的对比，如果它们也有不同的明度, 它们可以作为前景和背景颜色的成对使用. 设计师应该记住，某些互补的组合并不好看(红配绿，反之亦然，看起来很不舒服，很少在组合中使用)，而另一些则有惊人的对比.

不同的图像压缩格式使用不同的压缩方法有不同的目的.

• JPEG compression reduces the image size by finding areas of a similar color; the higher the compression level, 它越是积极地寻找这样的区域，就会导致视觉信息的丢失，并在压缩区域的边缘产生伪影. 这种压缩对照片很有效, 图纸, 梯度, 大多数插图和其他彩色, 丰富的图片. JPEG不能很好地处理截图, 简单UI元素, 平的图标, 图表, 这对文字来说尤其糟糕.

• PNG 压缩的工作原理是减少使用颜色的数量. 根据压缩程度的不同，这可能会导致颜色阴影的轻微损失. PNG是伟大的标志, 图标, 迹象, 包含文字的图片, 对于简单的插图, UI元素和截图. 与JPEG不同的是，它还允许图像具有透明区域. PNG文件通常比jpeg文件大，不能很好地压缩照片和复杂文件, 彩色图像和渐变.

随着大量设备配备高像素密度显示器, 在网站上提供一些高分辨率的图像是很重要的, 对于那些形状简单、线条细腻的人来说尤其重要, 比如商标, 数据, 原理图和产品照片.

• 中使用图像时 HTML 作为一个 IMG 标记，可以使用诸如pictufill之类的技术，直到新的 PICTURE 标签被流行的浏览器广泛采用. 这种方式, 根据用户的设备大小和像素密度，可以提供不同版本和大小的图像.
• 当用作CSS中的背景图像时, 媒体查询可用于针对不同的设备，以便为每个用户提供最合适的图像大小.
• 在为智能手机或高像素密度设备创建或切片Photoshop(或其他)模型时, 重要的是要记住，模型是它在设备上的两倍大. 设备1200像素的屏幕宽度通常被视为600像素宽. 这意味着在编写CSS文件时，模型中32像素高的文本应该编码为16像素高, 300像素宽的图像在网页上的宽度为150像素(设备屏幕). 实际上，我们应该将Photoshop模型中的每个2乘2像素的正方形视为设备上的单个像素.

当你在使用HTML5视频元素的网站上使用视频时(而不是从 YouTube, Vimeo 或其他视频托管服务)，网站有责任以浏览器可以播放的格式向每个浏览器提供视频.

到目前为止，主要的浏览器、操作系统和设备都支持MP4视频格式(使用MPEG4或h.264压缩). 以确保兼容Firefox客户端和某些不能播放MP4视频的Android设备, 最好有OGV和网络M格式的视频副本. 当有多个副本可用时，应将所有文件列为目录的源元素 VIDEO 标签.

有很多方法可以提高网站的性能，开发人员可能对每个项目的性质有特定的想法. 一些更常见和更容易实现的优化是:

• 尽量减少CSS和JS代码，以节省几百kb的每个页面加载.
• 将所有资产压缩为最合适的格式和最佳设置(重要的是在质量损失和速度增益之间取得良好平衡)。.
• 启用服务器端缓存机制(Memcached, Redis, gzip压缩，APC等).).
• 根据设备屏幕大小和像素密度提供响应式图像，只加载适合用户情况的图像.
• 编写干净简洁的HTML, 不要包含编译框架, 停止加载未使用的脚本或CSS模块.

页面应该只有一个H1元素，除非有 ARTICLE or SECTION 元素，在这种情况下，每个元素都可以有一个自己的H1.

H1标签对于搜索引擎和其他读取网页代码并解释其内容的机器非常重要. 文档、文章或章节的H1被认为是其主要标题或标题. 不恰当地使用H1元素会影响网站的SEO效果.

虽然这些标签创造了特定的视觉效果(STRONG 将文本加粗， EM 斜体和 SMALL 使它更小), 这不是它们的目的，它们不应该被简单地用于以特定的方式为一段内容设置样式.

这三种符号都有语义目的，只能按以下方式标记文本:

• EM - 强调的文本. 这是应该强调的文本，从而改变其上下文的含义.
• STRONG - 强大的重要性. 可以用在标题中吗, 标题或段落强调在句子中最重要的单词或短语. 它也可以用来强调一个单词或短语的重要性或严肃性.
• SMALL - 小字. 用于对已标记文本的免责声明、澄清和一般去强调.

将文本样式设置为粗体, 斜体或较小字体, 可以使用通用标签和CSS代码应用的样式，而不是滥用语义HTML5元素.

HTML5提供了许多新的元素类型，因此可以对更复杂的内容进行适当的标记. 这有助于机器(如搜索引擎、解析器、屏幕阅读器等).)阅读网页并了解其内容结构.

• ARTICLE 定义一个带有自己标题的自包含内容, 哪些可以存在于其网页的上下文之外. 对新闻、文章、产品都很有用.
• FIGURE 将图像指定为与原理图、蓝图或图表等内容相关的图形. 与 FIGCAPTION，也可以添加图像的视觉描述.
• ASIDE 表示与页面主要内容相关的信息，但不是实际内容的一部分. 一个示例用法是与主要文章相同主题的相关文章列表.

• 优点: 框架允许快速创建布局原型, 元素和页面, 并促进整个项目中一致元素的可重用性. 这通常消除了对死胡同交付的需求，如Photoshop模型或其他高保真静态草图. 与此形成鲜明对比的是, 由框架支持的HTML原型后来演变成新站点使用的实际生产模板代码. 另一个优势是与更好的框架一起提供的无数开发工具:LESS/SASS预处理器, 设计中键值的变量, Grunt/Gulp等构建器工具, 准备好使用JS脚本进行常用的交互(情态), 旋转木马和折叠的盒子, 等). 最后, 框架带有良好的实践和常用的标准化部分, 文档完备的内置代码, 当问题出现时，有一个大的社区可以求助.

• 缺点: 尽管框架提供了大量的内置特性，并且消除了编写重复代码的需要, 他们还倾向于概括共同的元素，并经常导致相同的设计. 另一个警告是，当使用框架进行复杂或非常规的设计时，或者使用更复杂的网格布局时, 与简单地从头开始编写代码相比，“对抗”框架需要付出更多的努力. 有时, 框架附带了太多从未使用过的东西, 或者多余的样式，如果没有正确使用就会被覆盖, 与从头编写干净的代码相比，导致加载时间变慢.

正确使用CSS框架, 开发人员不应该包括框架的编译CSS，然后编写自己的覆盖. 充分利用框架, 应该使用内置开发工具:要设置的变量, LESS/SASS混合使用, 未使用的部件要排除在外. 另一个常见的错误是在布局和样式方面严重依赖框架标记, 这使得内容和样式的分离变得更加困难，并导致需要编辑HTML而不是CSS的设计更改.

手机第一 是一种创建响应式CSS代码的方法，其中首先编写移动设备的样式, 没有媒体询问, 对于每个屏幕尺寸的步骤, 添加了一个新的媒体查询扩展, 修改和覆盖前一步(较小)的现有样式.

• 优势 -最容易在小型设备上优化加载时间，因为没有额外的资产和样式应用(以下媒体查询中链接的资产不会被加载). 对于简单的设计非常有效，其中大屏幕样式是小屏幕的升级版本, 例如, 当在大屏幕上添加装饰或新元素以获得更丰富的体验时.

• 缺点 -如果移动版本和桌面版本的布局有显著差异，这种技术就不那么有效了, 或者对于复杂的布局和大多数web应用程序. 在这种情况下， 手机第一 过多的重写会使代码变得比必要的更复杂.

桌面第一 is the classic way of writing CSS; the desktop version of the styles is either not in media queries or starts 与 a minimum width requirement, 对于每个比初始屏幕小的屏幕, 从最大的到最小的开始添加新的媒体查询. 对于每个后续的媒体查询，元素被隐藏、重新排列或重新设计样式.

• 优势 -而不是 手机第一 的方法, 桌面第一 擅长不同屏幕尺寸的设计, 例如，当屏幕变小时，元素被删除. 这也是在不重写代码的情况下为现有的旧网站添加响应功能的唯一方法.

• 缺点 —如果没有正确实现, 这可能导致未使用或覆盖的代码和资产被加载到较小的设备上，从而使网站在智能手机上变得更重. 这将导致不必要的样式重写和为更简单的设计编写额外的代码 手机第一 能更容易实施吗.

对于移动版和桌面版略有不同的网站, 通常，更好的做法是根据屏幕大小提供单独的样式表, 或者在不重叠的媒体查询中隔离两种布局, 每个都强烈特定于其目标设备.