10 Essential UI/UX/FE Interview Questions *

渐进式进步(也被称为“移动优先”)是一种设计响应式软件的方法，它优先考虑较小的设备——这些设备在本质上更具限制性——从而产生更直接的设计. Then, as we design up the chain to larger devices, 我们可以开始利用更多的空间和交互选项，比如悬停时的工具提示.

这种方法背后的想法是，我们可以首先以最容易理解的方式确定我们的关键功能, 其次是屏幕更大的手机.

On the other hand, 优雅的降级是一种确保网站的关键功能在更小、更老的设备上继续工作的方法，它最初不是为这些设备设计的.

SOLID是五个面向对象编程(OOP)原则的缩写. Primarily developed by Robert C. Martin and Barbara Liskov, 这些原则旨在使代码更易于维护, reusable, flexible, and easy to understand. These well-known principals are as follows:

1. S单一职责原则:一个类应该只有一个职责.
2. O笔封闭原则:一个软件实体应该对扩展开放，但对修改关闭.
3. Liskov替换原则:对象可以被子类的实例替换，而不会破坏应用程序.
4. I接口隔离原则:许多特定于客户端的接口比一个通用接口要好.
5. D依赖倒置原则:依赖抽象，而不是具体.

并不是每个商店都使用oop——有些会使用函数式编程(FP)或其他范式. 但是对于面向oop的项目，许多人认为上述原则是很好的实践. 所以不管候选人是否能回答这个问题, 您应该花时间检查候选人(特定于oop)的工作，看看它是否体现了这些原则.

如果由于浏览器刷屏太频繁而导致网页滚动不流畅, we can try the following:

1. 封装并解析JavaScript动画和输入处理程序 requestAnimationFrame(). 这告诉浏览器我们希望执行一个动画，并请求浏览器调用一个函数在下次重绘之前更新动画. 另一个额外的好处是，非活动浏览器选项卡中的动画将暂停, freeing up needed resources.
2. Use less expensive CSS styles. Styles such as box-shadow and border-radius are costly to calculate. 通过减少它们的使用，我们可以改善网站的滚动性能.
3. Reduce the complexity of our CSS selectors. 超过一半用于计算计算样式的时间用于选择器匹配. 通过简化CSS选择器的特异性，我们可以获得性能提升.
4. Reduce or improve element layout changes. 当浏览器需要更改元素的宽度或高度时, 它需要计算是否有其他实体受到影响. 这有可能造成代价高昂的级联效应.

两者之间的差异较小，而重叠较多. Like UX design, IxD is heavily user-oriented.

但是IxD特别关注数字产品如何在可能存在的(许多)不同类型的交互过程中与用户进行通信.

Whenever the user interacts with the product, we can use movement, color, sound, imagery, 和触觉反馈来传达背景和引发情感. 这可以改善用户使用我们产品的体验.

因为这个学派非常关注人类的感知, 成功的IxD应该总是让产品感觉直观和自然.

Sometimes referred to as split testing, A/B测试是指你向用户提供多种软件变体，并跟踪一种设计或功能比另一种设计或功能的成功程度. Through the process of elimination, 公司可以选择(或继续进行a /B测试的子变体)性能最高的设计.

这降低了推出新界面或新功能的风险, 同时确保最高的用户采用率.

A FOUC happens when the HTML for a site has loaded, but the styles have not, 导致短时间内没有风格的混乱.

一些开发人员可能会尝试隐藏页面，直到网站完全加载. But such techniques usually rely on JavaScript, which means that if the user has JavaScript disabled, they will never see the page.

最简单的方法就是将网站的样式直接包含在 部分，而不是链接到它们. 代价是整个HTML加载时间会增加.

或者，如果您想要更有创意，您可以在 这将隐藏页面，并在页面底部重写内联样式. This would remove the need for JavaScript, 同时消除了FOUC并将上面的加载时间保持在最低限度.

It’s easy to list a bunch of different products and services that UX designers might use; it’s much harder to explain why they chose to adopt such a tool. 我们想从候选人那里听到的是对可用工具的理解和选择它们的明确理由. 或者换句话说，知道不是理解.

即使您对UX工具领域没有最重要的理解, 应聘者的回答可以让我们了解他们目前的技能水平.

Here are examples of things we want to hear:

1. 我们在我以前的工作地点使用X，由于它的实施，我们成功地实现了季度关键绩效指标(KPI)目标.
2. I’ve tried both X and Y, 我发现X在可视化数据方面更强大，也允许团队成员之间更容易地协作.
3. 我是在购买在线用户体验设计课程时发现X的.

Here are examples of things we do not 想要听到的，可能是求职者没有花时间去探索现有工作的线索:

1. I like X because it’s what I’m used to.
2. 我使用X是因为它是大多数其他UX设计师使用的.

自从我们的在线体验开始转向更小的设备, our font libraries have been slowly changing. 传统的易读无衬线字体，如Helvetica和Arial，在较小的尺寸下可读性较差, 因此，对专门为小屏幕设计的新字体的需求出现了. 为此，谷歌开发了“Roboto”，苹果开发了“San Francisco”，微软开发了“Segoe UI”.

通过在我们的网站和应用程序中使用这些系统提供的字体:

1. 我们为用户节省了从CDN下载外部字体的时间, 导致加载时间略快，字体更改时不会闪烁.
2. 因为使用的字体将是操作系统的默认字体, 我们的应用程序或网站看起来更像一个本地应用程序.
3. 如果我们的设计需要它，我们可以在不失去可读性的情况下呈现小文本.

Before HTML5, the img tag only allowed us to specify a single source image.

随之而来的问题是小型设备的引入和响应式网页设计的采用. As a general rule, 我们希望减少加载时间，只在需要的时候才向用户提供内容:在小型手持设备上加载桌面大小的标题图像是不必要的，而且成本很高.

The srcset and sizes 属性解决了这个问题，它允许我们设置一个图像数组，这些图像将根据我们在属性中设置的媒体查询动态加载 sizes attribute.

块元素修改(BEM)的常用方法旨在将样式抽象为组件级样式的可重用类名. Unlike BEM, 实用优先CSS是一种构建接口的方法，其中CSS类通常包含单一样式, are named based on that style, and little abstraction takes place.

Some advantages include:

1. 由于更少的抽象，样式表更容易阅读和维护.
2. Because classes are unassuming, we are not locked into predefined styles, 允许我们构建更多独特的接口，而无需添加额外的类声明.
3. 低调的类名还有助于简化新员工的入职流程，或改善当前开发人员和非技术人员之间的工作流程.
4. In the event that you need to create an abstraction, thanks to the low-level nature of the classes, 更改样式会破坏网站其他部分的可能性较小.