程序员练级攻略（2018）：前端 UI/UX设计

时间  2019-11-09
标签 程序员 攻略 前端 设计 栏目 快乐工作 繁體版
原文   原文链接

图片描述

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！css

这个是我订阅 陈皓老师在极客上的专栏《左耳听风》,我整理出来是为了本身方便学习，同时也分享给大家一块儿学习，固然若是有兴趣，能够去订阅，为了不广告嫌疑，我这就很少说了！如下第一人称是指陈皓老师。前端

前端还有一个很重要的事就是设计。做为前端人员，咱们有必要了解如今的一些知名且流行的设计语言或是一些设计规范或是设计方法，学习它们的设计思想和方法，有助于咱们拓宽眼界、与时俱进。我并不以为这些内容是设计师要学习的，若是你要成为一个前端程序员，那么学习这些设计上的东西可让你有更好的成长空间。react

对于学习设计的新手来讲，推荐看看 7 steps to become a UI/UX designer ，这是一篇很不错的让新手入门的文章，很是具备指导性。首先，你得开始学习设计的一些原则和套路，如配色、平衡、排版、一致性等。还有用户体验的 4D 步骤——Discover、Define、Develop 和 Delivery。而后，开始到一些网站上找灵感。接下来，是到不一样的网站上读各类文章和资源，开始学习使用设计工具，最后是找人拜师。此外，其中还连接了其它一些不错的文章、网站、博客和工具。我认为，这篇文章是一篇很不错的设计师从入门到精通的练级攻略。git

虽然有这么一个速成的教程，但我以为仍是应该系统地学习一下，因此有了下面这些推荐。程序员

图书和文章推荐

先推荐几本书。github

  • Don’t Make Me Think ，这是我看的第一本和设计相关的书。这本书对个人影响也比较深远。这本书践行了本身的理论，整本书短小精悍，语言轻松诙谐，书中穿插大量色彩丰富的屏幕截图、趣味丛生的卡通插图以及包含大量信息的图表，使枯燥的设计原理变得平易近人。
  • Simple and Usable Web,Mobile,and Interaction Design ，中文版译名为《简约至上》。本书做者贾尔斯（Giles）有 20 多年交互式设计的探索与实践。提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约至上的终极策略，讲述了为何应该站在主流用户一边，以及如何从他们的真实需求和指望出发，简化设计，提高易用性。
  • Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules ，中文版译名为《认知与设计：理解 UI 设计准则》。这本书语言清晰明了，将设计准则与其核心的认知学和感知科学高度统一块儿来，使得设计准则更容易在具体环境中获得应用。涵盖了交互计算机系统设计的方方面面，为交互系统设计提供了支持工程方法。不只如此，这也是一本人类行为原理的入门书。
  • Designing Interfaces: Patterns for Effective Interaction Design ，中文版译名为《界面设计模式》。这本书开篇即总结了"与人有关"的各种问题，为读者提供了界面设计整体思路上的指引，帮助读者触类旁通。而后，收集并分析了不少经常使用的界面设计模式，帮助读者理解在实现级别的各类经常使用解决方案，将它们灵活地运用到本身的设计中。

除了上面的这几本书，还有下面的这几篇文章也是很不错的，推荐一读。web

原子设计（Atomic Design）

在 2013 年网页设计师布拉德·弗罗斯特（Brad Frost）从化学中受到启发：原子（Atoms）结合在一块儿，造成分子（Molecules），进一步结合造成生物体（Organisms）。布拉德将这个概念应用在界面设计中，咱们的界面就是由一些基本的元素组成的。sql

乔希·杜克（Josh Duck）的"HTML 元素周期表"完美阐述了咱们全部的网站、App、企业内部网、hoobadyboops 等是如何由相同的 HTML 元素组成的。经过在大层面（页）和小层面（原子）同时思考界面，布拉德认为，能够利用原子设计创建一个适应组件的动态系统。segmentfault

为何要玩原子设计，我认为，这对程序员来讲是很是好理解的，由于这就是代码模块化重用化的体现。因而，你就是要像搭积木同样开发和设计网页，当你把其模块化组件化了，也更容易规范总体的风格，并且容易维护……这些都意味着你能够更容易地维护你的代码。因此，这个方法论致使了 Web 组件化的玩法。这是设计中很是重要的方法论。设计模式

关于这个设计方法论，你能够阅读一下下面这几篇文章。

可是，真正权威的地方仍是布拉德·弗罗斯特的电子书、博客和实验室，能够从中获取更多的信息。

接下来是关于这个设计方法和 React.js 框架的几篇文章。

设计语言和设计系统

下面来介绍一下设计语言和设计系统。

Fluent Design System

Fluent Design System 中文翻译为流畅设计体系，是微软于 2017 年开发的设计语言。流畅设计是 Microsoft Design Language 2 的改版，其中包含为全部面向 Windows 10 设备和平台设计的软件中的设计和交互的指导原则。

该体系基于五个关键元素：光感、深度、动效、材质和缩放。新的设计语言包括更多对动效、深度及半透明效果的使用。过渡到流畅设计体系是一个长期项目，没有具体的完成目标，可是从创做者更新以来，新设计语言的元素已被融入到个别应用程序中。它将在将来的 Windows 10 秋季创做者更新中更普遍地使用，但微软也表示，该设计体系不会在秋季创做者更新内完成。

微软于 2017 年 5 月 11 日的 Microsoft Build 2017 开发者大会上公开了该设计体系。

还有 Build 2018 上的一些微软的 YouTube 分享。

Material Design

Material Design 中文翻译为质感设计，或是材质设计、材料设计。这是由 Google 开发的设计语言。扩展于 Google Now 的"卡片"设计，Material Design 基于网格的布局、响应动画与过渡、填充、深度效果（如光线和阴影）。设计师马蒂亚斯·杜阿尔特（Matías Duarte）解释说："与真正的纸张不一样，咱们的数字材质能够智能地扩大和变形。材质具备实体的表面和边缘。接缝和阴影代表组件的含义。"Google 指出他们的新设计语言基于纸张和油墨。

Material Design 于 2014 年的 Google I/O 大会上发布（参看 Google I/O 2014 - Material witness: How Android material applications work）。其可借助 v7 appcompat 库用于 Android 2.1 及以上版本，几乎支持全部 2009 年之后制造的 Android 设备。随后，Material Design 扩展到 Google 的网络和移动产品阵列，提供一致的跨平台和应用程序体验。Google 还为第三方开发人员发布了 API，开发人员可将质感设计应用到他们的应用程序中。

除了到 官网 学习 Material Design，你还能够访问 Material Design 中文版 来学习。

另外，Wikipedia 上有一张 Material Design 实现的比较表，供你参考。

下面是几个可供你使用的 Material UI 的工程实现。

  • Material Design Lite ，这是 Google 官方的框架，简单易用。
  • Materialize ，一组相似于 Bootstrap 的前端 UI 框架。
  • Material-UI 是基于 Google Material Design 的 React 组件实现。
  • MUI 是一个轻量级的 CSS 框架，遵循 Google 的 Material Design 设计方针。

其它公司

接下来再来推荐其它几家公司的设计语言。

  • 苹果公司的设计指南，在这个网站有苹果的各类设备的设计规范和指导，一方面可让你的 App 能和苹果的 UI 融合在一块儿，另外一方面，你也能够从中看到苹果的审美和思惟方式。
  • IBM 公司的设计语言 ，咱们总以为 IBM 公司是一家比较传统的没有新意的公司，可是并非这样的。IBM 公司的这个设计语言的确比较出众。因此，在这里推荐一下。
  • Salesforce 公司的 Lightning Design System ，是在 Salesforce 生态系统中用于建立统一 UI 的设计模式、组件和指南的集合，是一个企业级的产品。
  • Facebook Design - What’s on our mind? ，Facebook 的设计师们收集的一系列的文章、视频和资源。很不错哦。

动画效果设计

我认为，要了解 Web 动画效果设计的第一步，最好的地方是 CodePen。这个网站不仅是让人分享 HTML、CSS 和 JavaScript 代码的网站。其中也有不少分享样例都和动画效果有关。这个网站可让你对动画效果有一些感性认识，固然还有代码供你参考。

接下来，咱们要了解动画效果设计的一些方法。基本上来讲，动画设计都会受 "动画的 12 项基本法则 " 的影响，这个方法论源自于迪士尼动画师奥利·约翰斯顿（Ollie Johnston）和弗兰克·托马斯（Frank Thomas）在 1981 年所出的《The Illusion of Life: Disney Animation》一书。这些法则已被广泛采用，至今仍与制做 3D 动画法则有关联。这里还有一篇文章 “Understand the 12 principles of animation” 是对这个法则的解读和理解。

除此以外，还有几个动画设计指南和相关文章供你参考和学习。

相关资源

下面分享一下 UI/UX 设计的相关资源。文章资源主要有如下这些。

文章资源

  • Web Designer News ，一个文章聚合的网站。除此以外，还有两个文章聚合网站，你也能够订阅。一个是Designer News ，另外一个是 Reddit Web Design。
  • Marvel Blog ，Marvel 团队的博客。
  • The Next Web ，内容主要涵盖国际技术新闻、商业和文化等多个方面。
  • Medium - Design ，Medium 如今已经成为一个好文章的集散地了，这个地方必去。
  • Smashing Magazine ，这个地方是给专业的 Web 设计师和程序员的。不但有设计还有 HTML、CSS 和 JavaScript 等各类资源。
  • Sitepoint ，这个网站上也有不少不错的给 Web 前端程序员和设计师看的文章（固然，给程序员看的有点简单了，我以为更像是让设计师来学写程序的网站）。

设计收集

接下来推荐一些优秀设计的汇集地。

  • Awwwards ，这个网站给一些设计得不错网站的评分，在这里你能够看到不少设计不错的网站。
  • One Page Love ，就是一个单页的网页设计的收集。
  • Inspired UI ，移动 App 的设计模式。
  • Behance，这个地言有很不错的颇有创意的做品。
  • Dribbble ，这应该是设计师都知道也都爱去的网站。除了你能够看到一些很不错的做品外，你还能够在这里看到不少不错的设计师。
  • UI Movement ，也是个设计的收集网站，上面有不少很不错的 UI 设计，大量的动画。虽然说会像抖音同样，让你不知不觉就看了好几小时，可是它比抖音让你的收获大多了。

小结

总结一下今天的内容。我并不认为 UI/UX 设计这些内容只是设计师要学习的，若是你要成为一个前端程序员，那么学习这些设计上的东西可让你有更好的成长空间。首先，我推荐了一些图书和文章，让你更好地了解经典的设计原则和指导思想。

而后介绍了原子设计，以及深刻学习和理解这一设计方法论的图书、文章和其余相关资源。最后分享了当下主流和知名公司中在用的设计语言和设计系统，并给出了大量的学习资源，推荐了一些优秀设计的汇集地。相信经过学习这些内容，你在 UI/UX 设计方面不只能收获方法，还能得到很是多的灵感。

你的点赞是我持续分享好东西的动力，欢迎点赞！

欢迎加入前端你们庭，里面会常常分享一些技术资源。

clipboard.png

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程