刷面试题
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。
3.1 拓展阅读 什么是UI/UE设计？
3.1.1 什么是 UE 设计？
UE设计一般指游戏设计或游戏相关设计，还有网站的ue设计，其实就是UserExperience的缩写。是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用，他们能够忍受的问题，疑惑和BUG的程度。
UE是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。
而UE设计就是指设计人和产品或服务互动的一种机制,以用户体验为基础进行的人机交互设计时要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此，人的因素应作为设计的核心被体现出来。
3.1.2 UI 设计是什么？
ui的全称是：UserInterface即用户界面，是指对软件的人机交互、操作逻辑、界面美观的整体设计。很多同学不知道ui是什么，以为画个ICON图标就是做ui了，导致很多人都忙着画各种各样的图标，这样很容易让那些新人们走错路。
软件设计可分为两个部分：编码设计与UI设计。编码设计大家都很熟悉，但是UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。
界面设计。在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。
3.1.3 UE 与 UI 的区别
简单的说UE多一个动效，UI就是图标。UE和UI在一定程度上是有所不同的，UI重视的是为用户提供良好的感官，而UE重视的是对用户行为的引导。两者应该是互相包含，互相影响。
UI是使用界面，UE是使用感受，就拿京东和中国亚马逊来说，UI设计各有千秋，但是按照中国人的使用习惯京东的UE感觉更好，或许外国人的使用感受亚马逊更好，UI是客观的UE较为主观。在产品开发中，尤其是手机或者网站的开发过程中，最关键的是UI和UE。UE是用户体验设计师，UI是视觉设计师。通俗点讲，用户体验设计师就是管产品好不好用，是不是人性化。视觉设计师就是产品的美观。
在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。
四、UI一致性协作闭环流程
- 设计师逐步将
设计语言沉淀为设计规范（包括组件、颜色、字体、图片等）上传至仓库供整个设计团队查阅，同时将其量化并内置于积木Sketch插件中；开发工程师负责将其代码化，针对ElementUI、iVIew、And-design-vue等主流UI框架进行组件库开发。- 设计师使用
积木Sketch插件绘制设计稿，可以保证设计元素均从既定的设计标准中获取，产出符合业务设计规范的设计稿，而代码组件库中也有对应的实现。- 绘制完成的设计稿上传至协作平台，交付开发工程师进行设计稿还原。
- 开发工程师拿到设计稿后，就可以知道本次需求哪些组件已内置于代码组件库中，并可以点击设计稿中的链接，直接查看组件的使用说明。
虽然UI一致性落地会增加开发工程师一定的工作量，推进一致性建设也是一个艰难的工作，且由于成本较高，无法量化评估收益，但一旦有效运作起来后，团队将获得丰厚的回报。UI一致性的建设需要设计者对现有状态有足够的认识，对业务有充分理解，以及优秀的设计能力，同时还要不断地进行实践和优化。为了保证一致性项目的成功落地，避免“半途而废”，可通过制定一系列的推进措施来提高执行力与产出质量：
- 项目小组不能脱离日常需求开发工作。这样可以保证设计师所沉淀的设计元素始终来自于最新的业务场景，同时项目产出可以快速应用到最新的版本中得以验证。
- 优先选择受视觉因素影响较大、投入产出比高的模块场景进行改造，化繁为简，确定最小验证闭环 （
MVP，Minimum Viable Product），在实践中不断优化，进而跑通整个流程。- 项目推进由
UI同学按版本提出需求，业务端排期并落地实施，由UI统一验收。- 建立阶段性目标，并完成指定的具体工作规划，定期复盘完成情况，保证项目的持续推进。
细化来看，UI一致性整体方案主要分为两个部分，一个是设计体系建设，另一个则是工具链建设。设计体系建设是基础，主要是设计师沉淀设计风格，建立统一的UI设计标准，而工具链建设则是支撑，是开发人员通过开发一系列的工具将开发过程闭环，实现设计体系落地。
在长期的版本迭代中，随着功能的不断增加以及UI的持续改版，新旧样式混杂，维护极为困难。设计师通过将页面走查结果归纳梳理，制定设计规范，从而选取复用性高的组件进行组件库搭建。
通过搭建组件库可以进行规范控制，避免控件的随意组合，减少页面之间的差异；
组件库中组件既能满足业务特色，同时也可以应对不断变化的业务环境，具有云端动态调整能力，可以在规范更新时进行统一调整。
在不影响需求实现以及设计效果的前提下，只有在方案设计中尽可能使用组件，提升组件覆盖度，才可能真正通过组件库来提效。而除了在新的需求中使用组件，还需要将已有页面内容尽量替换成组件，才能避免页面升级时的重复修改问题，真正提高产研效率。在进行组件库建设时要注意以下几点。
- 选择合适粒度
组件的粒度曾是困扰设计师与开发工程师很久的一个问题，虽然有构建设计系统的核心理论——原子设计理论为指导，即按照“原子、分子、组织、模板、页面”五个层面进行页面设计。这一理论对于从零开发新应用没有任何问题，但进行一致性改造的
Web App，往往会暴露出很多设计问题，对于已经存在数百个成熟的线上页面，改造存在非常大的困难，必须根据具体业务选择合适粒度。在进行组件制作前，项目开发工程师需要对已有页面进行梳理，对使用到的组件进行分类，并根据组件的使用频率进行排序，制定逐步替换计划。从而避免组件库虽然做的很全、花费了大量人力，但实际很多组件都用不上，或者开发的组件过少，覆盖场景不足等问题。通过将走查结果与设计师反复交流，会发现复用性较高的组件大体可以分为两类：第一类“基础控件”，也就是类似于标签、按钮、开关、弹窗等具备基础功能的元素，对应原子理论中的原子；第二类“业务组件”，类似于商品卡片等，是由“基础控件”组成（比如商品卡片由“标签控件”与“图片控件”组成），同时“业务组件”还能相互组合，成为更高阶的“复杂组件”，类似于原子理论中的分子。“业务组件”的组合又是千变万化，不同样式的业务组件可以组成类似“商家列表”、“菜品列表”等“模板”，而“模板”与“基本控件”组合在一起，就成为了“页面”。
- 具备拓展性
组件必须具备一定的可配置属性才能提升适用场景覆盖度。可配置属性体现在三个方面：组件支持局部元素展示隐藏，例如商品卡片的标题、说明、价格可根据接口数据控制展示逻辑；组件支持多种样式，例如商品卡片的左图右文排列、上图下文排列；组件支持业务方配置主题，如调整高亮色、调整对齐方式等。
- 支持统一管理
组件管理功能对
UI一致性起着至关重要的作用，这主要体现在两方面：首先是设计风格沉淀，通过形成自己的独特风格，设计团队根据设计规范，对符合UI一致性业务场景的组件不断进行抽象及建设，沉淀出越来越多的通用业务组件，这些组件需要及时扩充到Library中，供团队成员使用；另外一个作用则是保持团队使用的组件均为最新组件。由于各种原因，组件的设计元素（色彩、字体、圆角等属性）可能会发生变更，需要及时提醒团队成员更新组件，从而保持所有页面的一致性。
UI设计语言与自身业务关联性很强，很多业务模块都有一套自己的设计系统。“通用”通常意味着无法满足具有业务特色的需求，不同业务的组件、色彩系统、动效、字体样式等千差万别，其中任意一环的缺失都会导致UI一致性被破坏。
设计语言并不是一个抽象的概念，例如，大家提到美团就想起美团黄，提到阿里就想起阿里橙、提到京东就想起京东红等，通过设计语言可以传达品牌主张和设计理念。同一板块产品必须形成一套属于自己的独特风格，对于一致性元素处理有一套自己的标准，对于产品的设计者而言，必须将这种风格化延续，才能使我们整个项目具备高度的一致性，才能保持“产品特色“，保证吸引力。
以插图为例，插图作为一种视觉语言，是品牌识别度的关键核心元素，与单纯的文案信息不同，图形化在直观描述固有信息的同时，也在塑造情感背景，使用户更具沉浸感和共情性。插画在提升产品用户体验的同时完成商业目标，在表达效果及生产效率上有独特的优势，在追求效率的互联网产品中被大量地运用。
由于之前产品中的插图未经系统整合，而插画师的个人风格明显，不同的设计师在图形化的工作协同中，风格很难复现，而单纯由一名设计师去完成整体业务的插画建设工作也存在一定风险。不同设计师之前画过的元素无法互通，造成很多元素重复设计、风格不统一，缺乏系统性地创作和整理，无法最大化地提升生产效率，并且影响产品的品质感。所以插图体系在保持品牌一致性、提升工作效率以及规避风险上尤为重要。
Iconfont可译为图标字体，顾名思义就是用字体文件取代图片文件来展示图标、特殊字体等元素的一种方法，不仅具有矢量性、可自由变化大小的特点，而且支持任意改变颜色。。简单来说，Iconfont就是把多个图标文件打包为ttf字体文件，注册到系统中，Web App可以像使用字体一样使用图标。其原理可以简单理解为通过ttf字体文件维护一个Unicode码与图形的映射关系。当使用Iconfont为项目助力的时候，配置多个图标不再需要去下载数个PNG文件，仅需要维护一套ttf字体文件即可。
当Web App发展到一定阶段，必然面临着包体积会越来越大，无用图片与相似图片也会越来越多的问题。同时，由于开拓新业务而不断涌现的新场景，又不可避免地新增大量的图片。总结来看，图片文件在一致性项目中需要解决两个问题，即存量图片的处理以及新增图片的管理。
对于存量图片，必须判断其合理性，项目中存在大量相似图片，这些图片可能仅是padding不同，或者颜色尺寸存在微小差异，可以通过脚本扫描相似图片，根据图片的特征Hash判断图片的相似度，相似度高的图片根据UI建议，保留一张即可。那如何防止新增图片“重蹈覆辙”呢？通过建立图片管理后台，将图片按场景分类，标准图片需从组件代码库中选取，新增图片执行PR策略，需相关负责人审核，可有效防止相似图片的堆积问题。
动效是指那些能够为产品赋予生机的动态界面元素及视觉效果，这些交互效果通常与特定的响应行为相关，甚至包括那些与交互行为没有直接关联的临时状态。
精细而恰当的动画效果可以传达状态，增强用户对于直接操纵的感知，通过视觉化的方式向用户呈现操作结果。
随着业务需求的不断增加，动效的使用比重在不断增加，重要性日渐凸显，也是增强用户体验与竞品拉开差距的重要因素，因此，统一规范的使用动效尤为重要。通过动效库建设，UI层面可以承载品牌、传递情感，加深用户对Web App的印象，让用户放松、愉悦；RD层面同一组件可在多场景直接复用，还降低了研发成本。
颜色可以起到传递品牌信息、区分信息的所属关系、标明控件的选中状态以及对内容的信息进行分层级展示等功能。重要的信息需要在页面中被突出展示。系统级色彩体系主要定义了应用的主要颜色、文字颜色、辅助颜色以及标准渐变色，颜色在一定时期内建议不再支持新增。通过将标准色板内置于插件中，限制UI绘制设计稿时的使用范围，而RD工程师仅可通过代码组件库中选取颜色，保证色值的准确性，也便于进行主题定制。
字体是体系化界面设计中最基本的构成之一。用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。设计师在字体设计过程中需要关注非常多的方面，比如字体family、字距、行高、段落等等。如何让文字看起来更自然，是设计师团队一直探寻的答案，UI工程师根据文字的层级关系，指定了Headline、Subtitle、Body、Button以及Caption的文字使用规范，根据设计稿中文字的位置，就可确定文字的具体样式。
在组件代码库时，应具有以下功能：
- 提高项目可维护性
由于组件库中的组件职责单一，降低了系统的耦合度，开发人员可以很容易地了解该组件提供的能力。组件可以自由替换、组合为高阶组件，在进行组件更新时仅需修改一处。每个项目成员维护一定数量的组件，让团队中每个人都能发挥所长，可以最大化团队的开发效率。
- 实现文档化
组件接口有统一的规范，降低新人的上手难度，新成员只需要理解接口和职责即可开发组件代码，由于代码的影响范围仅限于组件内部，对项目的风险控制也非常有帮助。通过对组件统一管理，实现代码的积累沉淀与有效复用，全面提升了新业务的需求开发效率。
- 便于单元测试
由于组件职责单一而清晰，对外仅暴露接口，概念上可以把组件当成一个函数，输入对应着输出，这让自动化测试变得更加简单。
- 实现无障碍等定制化功能
无障碍功能可以改善残障人士的用户体验，组件库中的组件资源高内聚，完全由自身控制加载，不与全局或其他组件产生影响。组件的加载、渲染路径清晰可控，对于组件功能定制，实现类似于无障碍等功能较为方便。
目前，市面上耳熟能详的组件库包括阿里的Antd Desigin、Fusion Design以及美团的Roo Design等，基本都是服务于Web开发的组件库，通过这些组件库可以快速搭建一些中后台系统。
为什么没有知名的Native开源组件库呢？因为每个应用的主题、风格以及交互体验都是不同的，而这些不同恰恰是传达品牌主张和设计理念的灵魂，因此必须结合业务，针对ElementUI、iView、Ant-design-vue等主流UI样式库进行组件库开发。通过搭建全平台代码组件库，可以保证同一个UI组件在各端表现一致，进行UI升级时降低改错或遗漏的风险，除此之外，还能降低测试压力，提高需求的吞吐率。
官网相当于项目的门面，一个好的门面才能吸引更多的用户，才能更好地对项目进行推广。官网作为设计师与开发工程师沟通的媒介，需要两者共同维护。通过官网可以帮助团队内设计师沉淀设计风格，建立统一的UI设计规范，帮助RD工程师进行组件文档管理与查阅。
4.1 手册功能
当前的官网应主要包括设计语言、组件库、插画库以及资源下载，分别服务于UI和RD工程师。
4.1.1 设计语言
UI一致性项目采取“原子理论”的构成原理，即从最小的元素开始定义，进而将这些元素按照规则进行组装，拼接成组件，最后通过这些组件拼接成最终的页面，这是一个由点到面的过程。设计语言章节主要服务于UI/UE工程师，该章节通过视觉、设计模式、动效等三个子章节使得读者能够快速了解项目的设计规范，从而快速上手。
最后更多分享：前端字节跳动真题解析
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
到面的过程。设计语言章节主要服务于UI/UE工程师，该章节通过视觉、设计模式、动效等三个子章节使得读者能够快速了解项目的设计规范，从而快速上手。
最后更多分享：前端字节跳动真题解析
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- [外链图片转存中…(img-bQYnKeG1-1715670711917)]
1513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
