想看更多优质文章，请戳GitHub博客，一年百篇优质文章等你来！这是我在极客上给陈昊老师订阅的专栏《左耳听风》。整理出来是为了自己方便，分享给大家一起学习。当然，如果你有兴趣，你可以订阅。为了避免打广告的嫌疑，我这里就不多说了！以下第一人称陈浩先生。前端还有一个很重要的地方就是设计。作为前端人员，我们需要了解一些知名流行的设计语言或者一些设计规范或者设计方法。学习他们的设计思想和方法，有助于我们开阔眼界，与时俱进。我认为这些内容不是设计师需要学习的。如果你想成为一名前端程序员，那么学习这些设计的东西可以给你更好的成长空间。对于学习设计的新手，我推荐阅读7stepstobecomeaUI/UXdesigner。这是一篇非常适合初学者入门的文章，很有借鉴意义。首先，你要开始学习设计的一些原则和套路，比如配色、平衡、排版、一致性等等。还有用户体验的4D步骤——Discover、Define、Develop和Delivery。然后，开始在一些网站上寻找灵感。接下来，阅读不同网站上的各种文章和资源，开始学习如何使用设计工具，最后找到可以学习的人。此外，还有指向其他优秀文章、网站、博客和工具的链接。这篇文章在我看来是非常不错的设计师从入门到精通的练级攻略。虽然有这样的速成班，但我觉得还是应该系统地学习一下，所以有以下建议。书籍和文章推荐先推荐几本书。Don'tMakeMeThink，这是我读的第一本与设计相关的书。这本书也对我产生了深远的影响。本书实践自己的理论，全书短小精悍，语言轻松幽默，书中穿插了大量色彩缤纷的屏幕截图，有趣的卡通插图和包含大量信息的图表，让枯燥的设计变得原则平易近人。SimpleandUsableWeb,Mobile,andInteractionDesign，中文版译为《简约至上》。本书作者贾尔斯在交互设计方面有着20多年的探索与实践。提出了实现简洁至上、合理删减、分层组织、适时隐藏、巧妙转移的四大终极策略，讲述了为什么要站在主流用户一边，如何简化设计，提高易用性。DesigningwiththeMindinMind:SimpleGuidetoUnderstandingUserInterfaceDesignRules，中文版译为《认知与设计：理解 UI 设计准则》。本书语言清晰明了，将设计原则与其核心的认知和感知科学高度统一，使设计原则更易于在特定环境中应用。涵盖交互式计算机系统设计的各个方面，为交互式系统设计提供支持工程方法。不仅如此，它还是人类行为原则的入门读物。DesigningInterfaces:PatternsforEffectiveInteractionDesign，中文版译为《界面设计模式》。本书开篇总结了各类“与人有关”的问题，为读者提供界面设计的整体思路指导，帮助读者举一反三。然后，收集并分析了很多常用的界面设计模式，以帮助读者理解各种常见的实现层面的解决方案，并灵活运用到自己的设计中。除了上面的书，下面的文章也很不错，推荐阅读。ThePsychologyPrinciplesEveryUI/UXDesignerNeedstoKnow，本文描述了用户界面用户体验设计的6条心理学原则。18位设计师预测2018年UI/UX趋势TheEvolutionofUI/UXDesignersIntoProductDesigners，这篇文章是Adobe的一篇博客，在回顾整个产品设计的演变过程中，有一些不错的想法和想法，并提供了一些方法论。原子设计（AtomicDesign）2013年，网页设计师布拉德·弗罗斯特（BradFrost）受到化学启发：原子（Atoms）结合形成分子（Molecules），分子进一步结合形成有机体（Organisms）。Brad将这个概念应用到界面设计中，我们的界面是由一些基本元素组成的。JoshDuck的“HTML元素周期表”完美地说明了我们所有的网站、应用程序、内部网、hoobadyboops等都是如何由相同的HTML元素组成的。通过同时考虑大级别（页面）和小级别（原子）的接口，Brad认为原子设计可用于构建适应组件的动态系统。为什么玩原子设计，我觉得程序员很容易理解，因为这是代码模块化和复用的体现。因此，你必须像搭积木一样开发和设计网页。当你把它模块化、组件化的时候，整体风格更容易标准化，也更容易维护……这些都意味着你可以更轻松地维护你的代码。因此，这种方法论就引出了Web组件化的玩法。这是设计中非常重要的方法论。关于这种设计方法，您可以阅读以下文章。原子设计┃构建科学规范的设计系统Web设计：原子设计简介和工作示例但真正的权威是BradFrost的电子书、博客和实验室，以获取更多信息。电子书：BradFrost的AtomicDesign是BradFrost撰写的一本书。 博客：AtomicDesign是BradFrost的博客。Lab：Patternlab是BradFrost根据这个设计体系打造的一套工具。你可以去PatternLab的GitHub试试Atomicdesign。接下来是关于这种设计方法和React.js框架的几篇文章。AtomicDesignwithReactAtomicComponents:ManagingDynamicReactComponentsusingAtomicDesign设计语言和设计系统让我们介绍一下设计语言和设计系统。FluentDesignSystemFluentDesignSystem，中文翻译为FluentDesignSystem，是微软于2017年开发的一种设计语言。FluentDesign是MicrosoftDesignLanguage2的改造版，包含了针对所有Windows设计的软件设计和交互的指导原则10个设备和平台。该系统基于五个关键要素：光照、深度、运动、材料和比例。新的设计语言更多地使用了运动、深度和半透明度。过渡到FluidDesignSystem是一个长期项目，没有具体的完成目标，但自创意者更新以来，新设计语言的元素已经融入到各个应用程序中。它将在未来的Windows10FallCreatorsUpdate中得到更广泛的应用，但微软也表示设计系统不会在FallCreatorsUpdate内完成。微软于2017年5月11日在其MicrosoftBuild2017开发者大会上公布了该设计系统。WindowsUI的新功能和即将推出的功能：XAML和组合从概念上介绍了FluentDesignSystem的各个部分。IntroducingFluentDesign，其中介绍了FluentDesignSystem的各个部分。以及微软YouTube上一些来自Build2018的分享FluentDesign:EvolvingourDesignSystem:Build2018MicrosoftBuild2018-FluentDesignSystemDemoMicrosoftBuild2018-FluentDesignSystemEvolutionFluentDesignSysteminsideofMicrosoft:Office:Build2018MaterialDesignMaterialDesign中文翻译是质感设计，或材料设计，材料设计。这是谷歌开发的一种设计语言。扩展GoogleNow的“卡片”设计、MaterialDesign基于网格的布局、响应式动画和过渡、填充、光影等深度效果。设计师MatíasDuarte解释说：“与真正的纸张不同，我们的数字材料可以智能地膨胀和变形。这些材料具有实体表面和边缘。接缝和阴影表明了意义。”谷歌指出，他们的新设计语言是基于纸和墨水的。MaterialDesign是在GoogleI/O2014上宣布的（请参阅GoogleI/O2014-Materialwitness：HowAndroidmaterialapplicationswork）。它在v7appcompat库的帮助下可用于Android2.1及更高版本，并支持2009年之后制造的几乎所有Android设备。随后，MaterialDesign扩展到谷歌的一系列网络和移动产品，提供一致的跨平台和应用程序体验。谷歌还为第三方开发人员发布了API，以便在他们的应用程序中实施纹理设计。除了在官网学习MaterialDesign，还可以访问MaterialDesign中文版进行学习。另外，维基百科有一个MaterialDesign实现的对照表，供大家参考。以下是您可以使用的一些MaterialUI实现。MaterialDesignLite是Google的官方框架，易于使用。Materialise，一套类似Bootstrap的前端UI框架。Material-UI是基于GoogleMaterialDesign的React组件实现。MUI是一个遵循Google的MaterialDesign指南的轻量级CSS框架。其他公司接下来会推荐其他几家公司的设计语言。苹果的设计指南，在这个网站上，有苹果各种设备的设计规范和指南。一方面，它允许您的App与Apple的UI集成。另一方面，你也可以从中看出苹果的审美。和思维方式。IBM的设计语言，我们总觉得IBM是一个比较传统的公司，没什么新意，其实不然。IBM的设计语言确实出类拔萃。所以，在这里推荐一下。Salesforce的闪电设计系统是Salesforce生态系统中用于创建统一UI的设计模式、组件和指南的集合。它是企业级产品。Facebook设计-我们在想什么？，Facebook设计师的一系列文章、视频和资源。好的。动画设计在我看来，了解Web动画设计第一步的最佳地点是CodePen。这个站点不仅仅是供人们共享HTML、CSS和JavaScript代码的站点。还有很多与动画效果相关的分享示例。本站可以给大家一些动画效果的感性认识，当然也有代码供大家参考。接下来，我们需要了解动画效果设计的一些方法。基本上，动画设计受到“动画的12条基本法则”的影响，该方法源自迪士尼动画师OllieJohnston和FrankThomas1981年的《The Illusion of Life: Disney Animation》一书。这些法律已被普遍采用，并且至今仍与制作3D动画的原则相关联。还有一篇文章《理解动画的12条原理》就是对这个规则的解释和理解。此外，还有多篇动画设计指南和相关文章供大家参考和学习。6用户体验设计动画指南。这是一份来自Prototypr公司的指南，主要指出动画效果不是为了炫耀，而是让你的UI/UX活灵活现，自然，不费时，生动的故事式动画效果。里面还推荐了下面几篇很不错的文章。TransitionalInterfacesUIAnimationandUX:ANot-So-SecretFriendshipInvisibleanimationCreatingUsabilitywithMotion:TheUXinMotionManifestoDesigningInterfaceAnimation，这篇文章还表明任何小动画都必须讲述一个微故事，这些微故事将与你的品牌和产品理念。动画给人留下更深刻的印象，让人们更容易记住你。本文主要介绍品牌动画。动画设计中的动画原理，这篇文章有点像设计模式，给出动画效果的一些套路和演示。CreatingUsabilitywithMotion:TheUXinMotionManifestoIntegratingAnimationintoaDesignSystemGreatUI/UXAnimations是设计师Daniel的一些伟大动画的集合，可以给你一些灵感。GreatUI/UXAnimations第一组GreatUI/UXAnimations第二组相关资源下面分享一下UI/UX设计的相关资源。文章资源主要包括以下内容。文章资源WebDesignerNews，一个文章聚合网站。除此之外，您还可以订阅两个文章聚合器。一个是DesignerNews，另一个是RedditWebDesign。MarvelBlog，漫威团队的博客。TheNextWeb，主要涵盖国际科技新闻、商业和文化。Medium-Design，Medium现在已经成为好文章的集散地，这个地方一定要去。SmashingMagazine，这个地方是为专业的网页设计师和程序员准备的。不仅是设计，还有HTML、CSS和JavaScript等各种资源。Sitepoint，这个网站也有很多适合Web前端程序员和设计师的好文章（当然对程序员来说有点简单，我觉得更像是一个设计师学习写程序的网站）。设计宝典接下来推荐一些优秀设计的聚集地。Awwwards，一个对一些设计良好的网站进行评分的网站，你可以在这里看到很多设计良好的网站。OnePageLove是一页网页设计的集合。灵感UI，移动应用程序设计模式。Behance，这个方言有很好的创意作品。Dribbble，这应该是设计师们都知道并且喜欢去的网站。除了可以看到一些非常好的作品，在这里还可以看到很多优秀的设计师。UIMovement也是一个设计集合网站，上面有很多非常好的UI设计和很多动画。虽然会像抖音一样，不知不觉可以看几个小时，但比抖音给你的回报要多得多。Summary总结一下今天的内容。我不认为UI/UX设计是设计师只需要学习的东西。如果你想成为一名前端程序员，那么学习这些设计的东西可以给你更好的成长空间。首先推荐一些书籍和文章，让大家更好地理解经典的设计原则和指导思想。然后介绍原子设计，以及书籍、文章和其他相关资源，以深入研究和理解这种设计方法。最后分享了目前主流和知名公司使用的设计语言和设计体系，并给出了很多学习资源，推荐了一些优秀的设计聚集地。相信通过学习这些内容，你不仅可以在UI/UX设计中获得方法，还能得到很多启发。你的点赞是我继续分享好东西的动力，欢迎点赞！欢迎加入前端大家庭，前端大家庭会经常分享一些技术资源。
