左耳听风_090_89_程序员练级攻略UIUX设计

你好，我是沈浩网名，做耳朵house.前面的技术呢都讲完了。

那前端还有一个很重要的事儿呢就是设计。

作为前端人员呢，我们有必要了解现在的一些知名并且流行的设计语言，或者是一些设计规范和设计方法。

那学习他们的设计思想和方法，有助于我们拓展事业与时俱进。

我并不觉得这些内容是设计师要学习的那如果你要成为一个前端程序员呢？那么学习这些设计上的东西啊，可以让你有更好的成长空间。

对于学习设计的新手来说啊，我推荐看一看seven steps to become AUIUS designer.这是一篇很不错的让新手入门的文章啊非常具有指导性。

首先呢你得开始学习设计的一些原则和套路啊，比。如说配色，还有平衡、排版一致性等等。

另外呢还有用户体验的四d步骤，分别是discover define、 develop和delivery.然后呢开始到一些网站上找灵感。

呃，接下来呢就是到不同的网站上读各种文章和资源，开始学习使用设计工具。

呃，最后呢是找人拜师，此外呢这里还链接了其他的一些不错的文章、网站、博客还有工具。

我认为呢这篇文章是一篇很不错的设计师，从入门到精通的练习攻略。

呃，虽然有这么一个速成的教程，但我觉得还是应该系统的学习一下。

所以呢接下来啊我给你一些推荐，我先推荐几本书。

第一本呢叫做don't make me sink,这是我看的第一本和设计相关的书。

那这本书对我的影响也比较深远。

这本书践行了自己的理论，整本书呢短小精悍，语言轻松诙谐，书里穿插了大量色彩丰富的屏幕截图，还有趣味丛生的卡通插图，还包含大量信息的图表，使枯燥的设计原理变得平易近人。

第二本simple and usable map, mobile and interaction design中文版呢译名为简约至上。

这本书的作者贾尔斯啊，有二十多年交互式设计的探索与实践，他提出了合理删除、分层组织、适实隐藏和巧妙转移。

这四个达成简约至上的终极策略，讲述了为什么应该站在主流用户一边，还有如何从他们的真实需求和期望出发，简化设计，提升易用性。

第三本designing with a money in might simple guide to understanding user interface design rules.中文版译名呢叫做认知与设计，理解UI设计准则。

这本书呢语言清晰明了，它将设计准则与核心的认知学和感知科学高度的统一起来，使得设计准则呢更容易在具体的环境当中得到应用。

它涵盖了交互计算机系统设计的方方面面，为交互系统设计啊提供了知识工程方法。

不仅如此啊，这也是一本人类行为原理的入门书。

第四，本designing interfaces patterns for effective interaction design中文版译名呢叫做界面设计模式。

这本书开篇呢就总结了与人有关的各类问题，为读者提供了界面设计总体思路上的指引，帮助读者举一反三。

然后呢还收集并分析了很多常用的界面设计模式，帮助读者理解在实现级别的各种常用解决方案，将他们灵活的运用到自己的设计当中。

除了这几本书啊，还有几篇，其他的文章也是很不错的。

推荐一读，第一篇the psychology tranciples, every UIUX designer needs to know.这篇文章呢讲述了六大用户界面、用户体验设计的心理学原则。

第二篇eighteen designers create AUIUS transds for twenty eighteen.我倒不觉得这篇文章中所说的UIUX是在二零一八年的趋势，我反而觉得这十八条原则是指导性的思想。

第三篇，the evolution of UIUX designers into product designers.这篇文章呢是adobe公司的一篇博客，他回顾了整个产品设计的演化过程。

那其中呢有一些不错的思考和想法，并提供了一些方法论。

然后呢，我们来讲一讲原子设计在二零一三年，网页设计师布拉德，弗罗斯特从化学中受到了启发，原子结合在一起呢形成了分子。

那进一步呢形成生物体，那布拉德呢就把这个概念应用在界面设计当中。

那我们的界面啊就是由一些基本的元素组成的。

而乔西杜克的HTML元素周期表呢完美阐述了我们所有的网站app,还有企业内部网和baby boots等等，是如何由相同的HTML元素组成的。

通过在大的层面和小的层面同时思考界面。

那布拉德认为啊可以利用原子设计建立一个适应组件的动态系统。

那为什么要玩原子设计呢？我认为啊这对程序员来说是非常好理解的。

因为这就是代码模块化重用化的体现。

于是呢你就是要像搭积木一样开发和设计网页。

当你把它模块化组件化了也更容易规范整体的风格，而且呢还容易维护。

那这些呢都意味着你可以更容易的维护你的代码。

所以这个方法论呢导致了web组进化的玩法。

那这个呢是设计中非常重要的方法论。

那关于这个设计方法论呢，你可以阅读以下这两篇文章，第一篇atomic design原子设计，构建科学规范的设计系统。

第二篇呢是网页设计、atomic design简介及工作实例。

但是呢真正权威的地方还是布拉德弗罗斯特的电子书、博客和实验室，我们可以从中获取更多的信息。

那这些链接呢，我都在文稿中给你了。

然后呢，我还列出了两篇关于这个设计方法和reacjeze框架的文章啊，非常值得一读。

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

首先呢我们来说floen design system中文翻译为流畅，设计体系是vivo在二零一七年开发的设计，语言流畅设计呢是microsoft design language two的改版。

那其中呢包含了为所有面向windows十的设备和平台设计的软件，所用到的设计和交互的指导原则。

那这个体系呢基于五个关键元素，分别是光感深度、动效、材质，还有缩放。

那新的设计语言呢包括了更多对动效深度和半透明效果的使用。

过渡到流畅设计体系呢是一个长期的项目，没有具体的完成目标。

但是呢从创作者更新以来啊，新设计语言的元素已经融入到个别应用程序当中了，它将在未来的windows十秋季创作者更新当中更广泛的使用。

但是呢，微软也表示，这个设计体系不会在秋季创作者更新之内完成。

在二零一七年五月十一日的microsoft bill的二零一七开发者大会上，微软公开了这个设计体系。

在文章里呢还有两个链接供你查看。

另外呢还有bill的二零一八上的一些微软的youtube分享。

然后呢，我们再来说material sign,那它的中文翻译呢叫做质感设计，或者说是材质设计。

材料设计，这个呢是由google开发的设计语言。

Material design扩展于google note,卡片式设计是基于网格的布局，响应动画与过渡填充深度效果。

设计师马蒂亚斯杜阿尔特解释说，与真正的纸张不同，我们的数字材质呢可以智能的扩大和变形材质，具有实体的表面和边缘。

而接缝和阴影表明组件的含义。

那google指数他们的新设计语言就是基于纸张和油墨的material. Design在二零一四年的google IO大会上发布。

它可以借助v七app compact库用于安卓二点一及以上的版本，几乎支持所有二零零九年以后制造的安卓设备。

随后啊material design扩展到google的网络和移动产品阵列提功一日的跨平台和应用程序体验。

Google呢还给第三方开发人员发布了API,那开发人员啊可以将质感设计应用到他们的应用程序当中。

那除了到官网学习material design,你还可以访问material design的中文版来学习。

另外呢wikipedia上有一张materiity在实现的比较表供你参考。

然后呢，还有几个可供你使用的啊TOUI的工程实现。

第一个什么til design light,这是google官方的框架，简单易用。

第二个是materialized,它是一组类似于boostdrive的前端UI框架。

第三个呢是material UI,是基于google erial design react组件实现。

第四个呢是MUI,它是一个轻量级的CSS框架，遵循google的material design设计方针。

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

第一个是苹果公司的设计指南。

这个网站上呢有苹果的各种设备的设计规范和指导，一方面可以让你的app能和苹果的UI融合在一起。

另一方面啊你也可以从中看到苹果的审美和思维方式。

第二个呢是IBM公司的设计语言。

我们总觉得IBM公司是一家比较传统的，没有新意的公司。

但其实呢并不是这样的，IBM公司的这个设计语言啊的确比较出众。

所以呢我就在这里推荐一下。

第三个呢是sales force公司的lightning design system,是在sales force生态系统当中用于创建统一UI的设计模式组件和指南的集合，是一个企业级的产品。

最后呢第四个是facebook design. What's on our mind?来自facebook的设计师们收集了一系列的文章、视频和资源很不错哦。

此外呢，我认为你还需要了解一下动画效果的设计。

我认为呢要了解web动画效果设计的第一步啊，最好的地方呢就是code pen这个网站啊，不只是让人分享HTMLCSS和javascript代码的网站。

那其中呢也有很多的分享样例啊，都和动画效果有关。

那这个网站呢可以让你对动画效果有一些感性的认识，当然还有代码供你参考。

那接下来呢我们要了解动画效果设计的一些方法。

那基本上来说啊动画设计都会受动画的十二项基本法则的影响。

那这个方法论呢源自于迪士尼的动画师，奥利普、埃斯顿和弗兰克托马斯在一九八一年所出的the illution of life迪士尼animation.这本书这些法则现在已经被普遍采用，至今呢仍然与制作三d动画法则有关联。

还有一篇文章叫做understand twelve principles of animation,是对这个法则的解读和理解。

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

第一个six animation deadlines for UX design.那这个呢是prototype公公司的一个指南。

其其中呢主要指出动画效果不是为了炫酷，而是能让你的UI和UX能活起来，自然不消耗时间，并且呢是生动故事型的动画效果。

那其中呢还推荐了文中这几篇很不错的文章。

第二是designing interface animation.这篇文章呢同样说明任何一个小动画都是要讲一个微故事的，而且这些微故事啊会和你的品牌和产品理念相融合。

动画呢会给人更深的印象，让人们更容易记住你那这篇文章主要是讲品牌动画。

第三个animation principles, emotion design.那这篇文章呢有点像设计模式啊，给了一些动画效果的套路和演示。

第四个，creating usibility with motion the UX emotion manifesto,第五个integrating animation into the design system.另外呢great UIUS animations是设计师丹尼尔设计的一些很不错的动画啊，可以给你一些灵感。

下面呢我分享一下UIUX设计的相关资源。

那文章资源呢主要有以下这些。

第一个是web designer news,一个文章聚合的网站。

除此之外呢还有两个文章聚合的网站。

你也可以订阅，一个是designer news,另一个呢是reddy web design.第二个marvel block是marvel团队的博客。

第三个呢是the next web.内容呢主要涵盖国际技术、新闻、商业和文化等多个方面。

第四个是medium, design medium现在呢已经成为一个好文章的集散地了，那这个地方一定要去看一看。

第五个smash magazinine这个地方呢是给专业的web设计师和程序员的，不单有设计，还有HTMLCSS和javascript等等各种资源。

第六个呢是site point,那这个网站上呢也有很多不错的给web前端程序员和设计师看的文章。

当然给程序员看的有点简单了啊，我觉得这个更像是让设计师来学写程序的网站。

那接下来呢我再推荐一些优秀设计的具体题。

第一个是amwards,这个网站呢给一些设计的不错的网站做了评分。

在这里呢你可以看到很多设计不错的网站。

第二个呢是one page love,就是一个单页的网页设计的收集。

第三个是inspired, UI是移动app的设计模式。

第四个是behind这个地方有很不错的很有创意的作品。

第五个叫做捧，那这个呢应该是设计师都知道，也都爱去的网站。

那除了你可以看到一些很不错的作品之外呢，你还可以在这里看到很多不错的设计师。

最后第六个呢是UI, mveent啊，也是一个设计的收集网站。

上面呢有很多很不错的UI设计啊，还有大量的动画。

虽然说会像抖音一样，让你不知不觉啊就看了好几个小时，但是它比抖音让你的收获大多了。

好了，我总结一下今天的内容，我并不认为UI和UX设计这些内容只是设计师要学习的那如果你要成为一个前端程序员呢，那么学习这些设计上的东西可以让你有更好的成长空间。

首先呢我推荐了一些图书和文章啊，让你更好的了解经典的设计原则和指导思想。

然后呢，我介绍了原子设计，还有深入学习和理解这一设计方法论的图书文章和其他的相关资源。

最后呢我分享了当下主流和知名公司中在用的设计语言和设计系统，并给出了大量的学习资源。

同时呢也推荐了一些优秀设计的聚集地理。

相信啊通过学习这些内容，你在UIUS设计方面不仅能收获方法，还能获得非常多的灵感。

下节课呢是程序员练级攻略高手成长篇的最后一篇。

我将推荐大量有价值的技术资源。

嗯，这些内容啊将会为你的后续学习和成长提供很大的助力，敬请期待。