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

在平面设计中，留白是指有意留白的任何区域. 它不一定是白色的. Both in 网页设计 和 other media white space can be efficiently used to visually separate or group elements, 把注意力吸引到一个特定的元素上, 加强内容布局或网格. 有时，留白也被纯粹地用于创造视觉上有趣的构图.

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

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

• 接近 -类似于相似原理, 相互靠近的元素被认为是分组的, 相关的, 或者说是整体的一部分. 这是建筑布局设计的一个原则. It’s especially important when designing pages 与 large amounts of varied content (like the home page of a news website or application)

• 关闭 - when faced 与 a familiar looking object which is incomplete in its visualisation (parts of the image are missing) the mind automatically “completes the picture” or fills in the blanks 和 effectively sees the image as if it was fully displayed. 这是一个经常用于标志设计的原则. Using the closure principle can make an element more interesting to look at (as the user’s mind “works” to complete the element) which makes the design more memorable;

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

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

• 连续性 - the mind’s ability to see connections 和 follow one path or another based on similarities 和 to follow lines past their end points. 这个原则可以用在标志设计中，以产生兴趣. 它也可以用于构建布局或组合，使它们看起来像一个整洁的对象, 而不是一堆杂乱的元素.

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

这是一条很好的经验法则, 如果两种字体除了一件重要的事情(类似的字体)之外都很相似，那么它们可以很好地协同工作。, 或者如果它们非常不同，但有一个共同点将它们连接起来(互补字体). It thing that is always good for the two fonts to have equal x坐标s (the height of a lowercase “x” compared to the uppercase “X” of the same font-size) in common.

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

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

• 将衬线字体与无衬线字体组合, 它们都有非常相似的x高, stroke contrast (the difference between the thinnest 和 thickest parts of a character’s lines) 和 孔径 (how open or closed the characters are);
• 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无.
• 在选择字体时，重要的是要记住每个字体将被使用的上下文. 标题或显示字体可以更华丽, 精致细致, 而主副本应该是一种更简单的字体，以便在较小的尺寸下可读.
• 对于大多数设计, 一个或两个字体系列就足够了，第三个可能用于非常特定的目的.

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

这里有一些:

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

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

• 互补 -使用位于色轮两端的颜色，如橙色和紫色, 蓝色和黄色, 或者绿色和红色. 这些颜色通常有很好的对比，如果它们也有不同的明度, 它们可以作为前景和背景颜色的成对使用. The designer should remember that certain complementary combinations don’t look good (red on green 和 vice versa are irritating to look at 和 are rarely used in combination) while others have stunning contrast.

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

• JPEG compression reduces the image size by finding areas of a similar color; the higher the compression level, the more aggressively it looks for such areas leading to a loss of visual information 和 generation of artefacts at the edges of the compressed areas. 这种压缩对照片很有效, 图纸, 梯度, 大多数插图和其他彩色, 丰富的图片. JPEG不能很好地处理截图, 简单UI元素, 平的图标, 图表, 这对文字来说尤其糟糕.

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

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

• 中使用图像时 HTML 作为一个 IMG 标记，可以使用诸如pictufill之类的技术，直到新的 PICTURE 标签被流行的浏览器广泛采用. 这种方式, 根据用户的设备大小和像素密度，可以提供不同版本和大小的图像.
• 当用作CSS中的背景图像时, media queries can be used to target different devices so the most suitable size of an image is served to each user.
• 在为智能手机或高像素密度设备创建或切片Photoshop(或其他)模型时, 重要的是要记住，模型是它在设备上的两倍大. 设备1200像素的屏幕宽度通常被视为600像素宽. 这意味着在编写CSS文件时，模型中32像素高的文本应该编码为16像素高, 300像素宽的图像在网页上的宽度为150像素(设备屏幕). Effectively one should treat every two-by-two pixel square of the Photoshop mockup as a single pixel on the device.

当你在使用HTML5视频元素的网站上使用视频时(而不是从 YouTube, Vimeo or other video-hosting services) it’s the website’s responsibility to serve each browser that video in a format that the browser can play.

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

There are many ways to improve the performance of a website 和 developers may have ideas specific to the nature of each project. 一些更常见和更容易实现的优化是:

• 尽量减少CSS和JS代码，以节省几百kb的每个页面加载.
• Have all assets compressed in the most appropriate format 和 at optimal settings (a good balance between quality loss 和 speed gain in important).
• 启用服务器端缓存机制(Memcached, Redis, gzip压缩，APC等).).
• Serve responsive images according to device screen size 和 pixel density 和 only load the appropriate ones for the user’s case.
• 编写干净简洁的HTML, 不要包含编译框架, 停止加载未使用的脚本或CSS模块.

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

The H1 标签 is important for search engines 和 other machines that read the web page’s code 和 interpret its content. 文档、文章或章节的H1被认为是其主要标题或标题. 不恰当地使用H1元素会影响网站的SEO效果.

虽然这些标签创造了特定的视觉效果(STRONG 将文本加粗， EM 斜体和 SMALL 使它更小), this is not their purpose 和y should not be used simply to style a piece of content in a specific way.

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

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

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

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

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

• 优点: 框架允许快速创建布局原型, 元素和页面, 并促进整个项目中一致元素的可重用性. This often eliminates the need of dead end deliverables such as Photoshop mockups or other high-fidelity static sketches. 与此形成鲜明对比的是, the HTML prototypes powered by a framework later evolve into the actual production templates code used by the new site. Another advan标签e is the myriad of development tools that come 与 the better frameworks: LESS/SASS preprocessors, 设计中键值的变量, Grunt/Gulp等构建器工具, 准备好使用JS脚本进行常用的交互(情态), 旋转木马和折叠的盒子, 等). 最后, 框架带有良好的实践和常用的标准化部分, 文档完备的内置代码, 当问题出现时，有一个大的社区可以求助.

• 缺点: 尽管框架提供了大量的内置特性，并且消除了编写重复代码的需要, 他们还倾向于概括共同的元素，并经常导致相同的设计. Another caveat is that when using a framework for a complex or unconventional design or a layout 与 a more complex grid, 与简单地从头开始编写代码相比，“对抗”框架需要付出更多的努力. 有时, 框架附带了太多从未使用过的东西, 或者多余的样式，如果没有正确使用就会被覆盖, 与从头编写干净的代码相比，导致加载时间变慢.

正确使用CSS框架, 开发人员不应该包括框架的编译CSS，然后编写自己的覆盖. 充分利用框架, 应该使用内置开发工具:要设置的变量, LESS/SASS混合使用, 未使用的部件要排除在外. 另一个常见的错误是在布局和样式方面严重依赖框架标记, which makes the separation of content 和 style harder 和 leads to design changes requiring editing HTML instead of CSS.

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

• 优势 - Easiest to optimise load times on smaller devices as no extra assets 和 styles apply (the assets linked in the following media queries don’t get loaded). 对于简单的设计非常有效，其中大屏幕样式是小屏幕的升级版本, 例如, 当在大屏幕上添加装饰或新元素以获得更丰富的体验时.

• 缺点 - This technique is not as effective if the mobile 和 desktop versions of the layout have significant differences, 或者对于复杂的布局和大多数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, 对于每个比初始屏幕小的屏幕, 从最大的到最小的开始添加新的媒体查询. 对于每个后续的媒体查询，元素被隐藏、重新排列或重新设计样式.

• 优势 -而不是 手机第一 的方法, 桌面第一 擅长不同屏幕尺寸的设计, 例如，当屏幕变小时，元素被删除. This is also the only way to add responsive capabilities to an existing older website 与out rewriting its code.

• 缺点 —如果没有正确实现, it could lead to unused or overridden code 和 assets being loaded on smaller devices thus making the website heavier on smartphones. 这将导致不必要的样式重写和为更简单的设计编写额外的代码 手机第一 能更容易实施吗.

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