[正版]Figma UI设计技法与思维全解析 静电 清华大学出版社 UI设计人机界面程序设计

推 荐 语

静电老师对新的设计工具总是能很快跟进并深入钻研，帮助一线设计师们尽快发挥出新工具的生产力。更难得的是，静电老师没有忘记加强对通用设计原理和理念的讲授，帮助读者做好适应设计行业变化的长远准备。

纪晓亮，站酷网总编

Figma这两年越来越火，能顶着 Photoshop 和 Sketch 的压力，跻身主流设计工具，足以见得其高效性和便携性，它强大的协作功能更是赢得设计师们的拍手叫好。如果你想尽快上手这个新兴的设计工具，这本书将成为你的钥匙。

程远，优设网内容总监

“降本增效”是产品经理的核心价值之一。这也是产品经理喜欢研究、体验各种工具，来提高项目协作中的沟通效率、协作效率的原因。Figma就是一款值得产品经理去研究的工具，静电老师在本书中详细讲解了这个工具的必备核心知识。

老曹，起点学院、人人都是产品经理社区创始人兼CEO

Figma不只是工具，更是思维方式；在线协作不只是将文件放在线上，更能极大地提升集体工作效率、释放创造力。

吴卓浩，Mr. HOW AI创造力学院创始人，

曾任Google、Airbnb中国、创新工场设计负责人

Figma是深受全球设计师喜欢的一款新的在线设计和协作工具，能提升产品设计的协作效率和流畅度，达到全链路的统一平台化，也是我们墨刀追寻的目标。静电老师作为墨刀官方认证的产品设计讲师，一直致力于设计知识和理念的传播，也推动了设计工具的进化和发展。这本书中包含了作者的大量干货知识，非常值得各位设计师和产品设计者阅读。

张元一，墨刀创始人兼CEO

随着时代的发展，设计师身边的新工具越来越多，如何在这些纷繁的工具中找到适合自己的，同时兼顾当今更新的技术、更快速的设计流程协作需求，是值得设计师考虑的一点。静电的这本书在讲解新工具Figma的同时，结合了自己的经历和对UI设计的观点，让我们学到工具之外的很多设计理念，非常值得设计师一读。

“乌鱼说”，知名设计自媒体

新的生产力工具意味着新的机会，静电老师总是能在第一时间竭尽全力地给设计行业带来新的分享——这不只是一个设计师的态度，更是一个教育工作者的态度。用“新”的思维追逐教育，把一线的经验分享给每一位求知者。从Sketch到Figma，好的内容值得拥有。

王晓苏，CCtalk 运营总监

设计在我看来是一份非常美的工作，能将人性、人心的真、善、美显现出来。静电把自己十多年的时间投入进来，不断思考和精进。这本书把关于设计认知的问题讲解得特别透彻，有非常多的实际案例，值得反复阅读。更重要的是，设计师需要将设计技能与产品真正结合起来，推动产品进步，并产生价值，这也是一个优秀设计师的真正魅力所在，而这种能力，也在静电的实际工作中得到了体现。

陈芳，中文在线·汤圆创作项目总监

新工具背后所折射出来的是整个互联网领域以及设计领域对于流畅协作的渴望，减少不同职位之间协作和沟通的成本，让工作和产品开发效率更高。设计是用来解决问题的，全新的设计工具让解决问题的效率更高，把更多思考的空间和时间留给设计师，让设计师真正专注于产品本身的价值。作为之前一起共事过的同事，静电老师真正把自己的设计能力融入了产品之中，让设计为产品和用户价值服务。这本书也是静电的倾心力作，非常值得广大设计师一读。

Rongrong，ThoughtWorks体验策略咨询

作者介绍

静电，SketchChina中国社区创始人，新锐UI设计工具Sketch在中国的首批推动者；静Design.FM主播，京东智能·东课堂嘉宾讲师，Sketch Meetup特邀嘉宾，著有热门图书《Sketch+Xcode双剑合璧》《不一样的UI设计师》。从2015年开始，静电在网络上发表UI设计及行业相关的教程及文章，言语诙谐，观点犀利。随着移动互联网热潮的到来，被越来越多的设计师熟识。2018与2019年，被墨刀授予产品原型设计专家称号。

静电对互联网设计产品思维的结合有着深刻的理解，倡导感性设计与理性思维的融会贯通。曾在eNet硅谷动力、中文在线、LavaRadio、365日历等多家知名互联网企业担任首席设计师及管理职位，2016年年底创办北京境地创想教育科技有限公司，致力于互联网UI设计行业在线教育与内容传播。

设计行业的小伙伴常说，设计师吃的就是“青春饭”。但静电却凭借着十几年的一线互联网设计行业经验，一直保持着高质量的教程产出。现在静电转型到设计类教育行业，各位设计师小伙伴评价其课程为“三观正”“干货满满”“启发性学习”的典范。其线上课程《静电的UI设计教室》目前已经开设二十多期，并一直坚持超小班一对一辅导的教学模式，深受学员的好评。

也许你是静电的老读者了，或者刚刚开始接触UI设计这个行业。这都没关系！希望这本书能给现阶段的你更多的帮助，在你羽翼日渐丰满的过程中，助你飞得更高更远。

移动互联网设计领域的“战国时代”

到这两年为止，移动互联网已经不再是一个新鲜的词汇了。从2006年开始正式进入互联网设计领域以来，我的身份从“美工”“网页设计师”“UED设计师”“广告设计师”，一直进化到现在的“UI设计师”“全栈设计师”。这些名词也代表着互联网设计领域的一步步进化和成熟。

可能很多小伙伴还不知道，在2012年或2013年之前（可能更晚），“UI设计师”这个词是多么让人新鲜感十足。当时跟互联网沾边的设计师，大部分还在做着传统的网页设计及客户端设计。虽然中国的3G网络在2008年已经开始商用，苹果的iPhone 3GS已经在2009年发布，但那时候，基于移动互联网形态的产品还以手机上简陋的WAP网页为主。

所以，你可以把这些都理解为暴风雨前的平静。而在这之后，仿佛一切都走上了快车道，你会发现所有的公司都开始做一种叫作App的东西，你手中的手机也从N年前的诺基亚换成了iPhone或Android手机，你开始借助3G网络，在一个个的手机应用中流连忘返。当万事俱备的时候，互联网的从业者发现，手机已经代替传统的PC，成为人们的必需品。

于是，之前的“网页设计师”，纷纷开始尝试在手机上展示他们的设计。但在那时，我们还在用着Adobe公司的“网页设计三剑客”，用且仅用着Photoshop来实现这一切。可是，随着移动互联网让所有人的节奏越来越快，传统的Photoshop已经不再能满足设计师快速开发和迭代移动端应用的需求了，而Photoshop单画布的设计模式也显得越来越落伍。

设计师们需要在一个界面上放置所有的手机界面，观察它们的统一性、内部的逻辑，更快地输出开发所用的素材。所以，打破Photoshop一统天下的契机就这么来了。现在广为人知Figma UI设计技法与思维全解析 二校 文前.indd 5的Sketch也就是顺着这种爆发性的趋势成为“网红软件”的，它快速、轻便、易于上手，被越来越多的UI设计师接纳，发展到现在，已经成为UI设计行业里大家必会的工具之一。从2015年、2016年开始直到现在，可以说是各种第三方UI设计工具百花齐放的时代。Adobe公司为了应对这种趋势，推出了Adobe XD，基于画板模式的简单设计工具。而第三方工具则数不胜数，除Sketch之外，Affinity Designer及各种基于云的设计工具开始随着这种趋势井喷式出现。

一时间，各种“究竟应该使用哪种工具来做UI设计”的讨论层出不穷，有人说Photoshop要“死”了，未来是Sketch的天下。大部分却说这绝对不可能！“保守派”与“改革派”设计师之间的矛盾也越来越尖锐。可见，很多人的思维中都是有“保守”倾向的，人们不愿意去改变已经熟悉的东西。

但是移动互联网的潮流是如此汹涌澎湃，让设计师不得不开始在思维上去接纳这种“新鲜的事物”，不管是主动的，还是被动的。新软件层出不穷，我们之前的认知开始出现混乱。究竟哪一种才是我们的心头好呢？ 没人能说清楚—直到现在，甚至未来很长一段时间里。

我们不妨接纳这种“战国时代”的混乱局面，顺便把自己的思维调整一下，朝着更高的目标进发，比如如何借助这些百花齐放的工具，最终达到我们的设计目标。所谓“条条大道通罗马”，也许做出令人心仪的设计稿比讨论该用哪款工具更值得被称赞。你喜欢哪款设计软件，用就好了，Photoshop这么多年依旧活得好好的，Sketch也是，而新工具依然层出不穷，比如这本书中要讲的新UI工具Figma。

Figma是典型的“云应用”的代表。在这本书中，我们重点来讲解Figma及与之相关的UI设计技能。

云应用：趋势？机遇？还是昙花一现？

打开网页就能用的应用现在已经越来越多，当然这也不是什么新鲜事儿了。早在2010年，Google就推出了自家的Chrome OS，这是一款完全基于网络的操作系统，如下图所示。用户打开网页就可以进行工作，无须安装烦琐的操作系统与各种客户端应用。虽然在2010年，这个概念还有点过于超前，但是这种理念带来的效率软件革新却没有停止。比如笔者当前正在某在线文档网站来撰写书稿，一切基于云来保存，而不是像之前一样，用Page或者Word建个文档，把自己的书稿放在计算机的本地硬盘里。

而设计软件这几年也顺应这个趋势，开始齐刷刷地上“云”。我们来聊聊这两年UI设计工具的进化吧！Sketch不顾一切地在开发和推广自己的Sketch Cloud产品，广受Windows用户欢迎。号称Sketch狙击者的Adobe XD则在最近的一次更新中设置未付费的用户只能将设计稿保存在云中，无法在本地进行保存。而现在要给大家介绍的这款UI设计工具Figma，则将Sketch的设计功能完全搬到了浏览器中，用户打开浏览器就可以体验和Sketch几乎一模一样的操作模式，包括各种菜单、各种图形的渲染，在Figma里都表现得近乎完美，如下图所示。

与此同时，国内的墨刀、在线设计海报的创客贴，还有一系列同类型的工具则一直是这种“云”模式的践行者。完全贴合人们对本地化软件的操作习惯，便于分享和多人协作，无须下载客户端，这些都成为“云”工具的王牌撒手锏。设计师在Figma、墨刀等工具中做完设计稿，直接将链接复制，就可以发送给客户和需求者查看，需求者可以直接在设计稿上标注并反馈意见，甚至可以邀请多位项目成员一同完成项目。这无疑让设计和开发的效率获得大幅度提升，吸引力着实不小。

可以说，一些较轻量级的应用已经或多或少地完成了用户习惯的培养。而在设计这种较重的应用中，用户使用习惯扭转的速度则会相对慢一些。很多设计师担心，公司有保密措施，将设计稿传到云上会被泄露。还有人则担心万一断网了，自己就无法工作了。确实，这些担心都有各自的道理，也很容易理解。而Figma则为了让用户担心少一点，提供了可以将Figma 网络上完成的设计稿保存到本地的功能，另外一些工具也或多或少在这个方面做出了妥协。

笔者还是比较乐观的，工作习惯的改变总是要花不少时间的，特别是用户自身认知的改变，并不是一件容易的事情。但是不可否认，“云应用”必然会成为未来的趋势，不管你是否喜欢，它现在已经到来，而且会持续发展下去。在效率和协作高于一切的时代，谁能抗拒这种吸引力呢？

作为设计师来说，纵使你现在可能因为工作流程等客观原因无法马上在云端工作，但是不妨先了解一下这种先进的工作模式，为今后的趋势做好准备。而新的UI设计工具Figma则是一个不错的选择。