下载掌阅APP，畅读海量书库
立即打开
如果上一节讲到的核心竞争力可以被理解为UI设计师的“软实力”，那么设计技能和设计方法层面的“硬实力”也至关重要。在一个UI设计师刚入行的1～3年中，设计技能层面无疑占据最大的比重。可以这么说，UI设计师的“入门”门槛并不高，但是要精进却比较难。很多设计师在工作1～2年后会觉得提升“乏力”，其根本原因就是基础不牢，学习的内容只浮于表面。下面我们来一起看看，想成为一个更具有竞争力的设计师，需要掌握哪些必备技能。
要知道，不少设计师是半路出家的，所以在这方面，就比那些在大学四年中稳扎稳打的学习了这些基础知识的同学欠缺不少。要知道四年的学习是不可能通过一两个月、半年的“填鸭式”的学习补足的。因此不少科班出身的设计师会比半路出家的设计师更有后劲，基础更牢固，对美和设计的理解程度更到位。
那么，是否就意味着这些半路出家的设计师没有翻身的可能性呢？并不是！我们可以通过多种方式去补足这些知识，“三大构成”就是开始系统认知设计或者UI设计的第一步。“三大构成”包含《平面构成》（ The Plane Constitution ）、《色彩构成》（ The Color Constitution ）和《立体构成》（ Three-Dimensional Constitutes ），通过这三本书，我们可以在更高的理论层面来对设计有个系统的认知。
这三本书的核心就是“设计从构成开始”，而所谓的构成，就是点线面、色彩、立体结构、光、质感、图、文之间的排列、组合和衍生。这也是学好设计必读的理论性图书。而现在我们接触的UI设计，也是设计的一个分支。UI设计从平面设计衍生而来，注重版式、图文的组合排列、对比。所以，有平面设计基础的设计师会很容易转型到UI设计领域。
“三大构成”是所有设计师必须掌握的基础中的基础，也是核心中的核心内容。如果你觉得上升乏力，不妨读一读这三本书。如果还有时间，伊顿的《设计与形态》《康定斯基论点线面》，福兰可·惠特福特的《包豪斯》也是非常适合设计师夯实基础的著作，值得大家阅读。
图形绘制能力是几乎所有设计师都必须具备的一项能力，如果说版式设计能力决定了UI设计师60%的能力要素，那么图形绘制能力则让你的技能分从60分精进到80分甚至更高。在设计过程中，我们不可避免地会绘制各种图标、人物等素材来丰富自己作品的视觉表现力。所以图形绘制能力的高低决定了职业发展过程中后期的表现。科班出身的设计师通常会在学校学习过程中有针对性地学习绘画技能，如何将这些绘画技能转移到电子屏幕上，成为更生动和具有潮流感的素材作品，是每个人都需要去考虑的问题，毕竟传统的绘画和移动互联网领域的绘画作品有不少区别。
而非科班出身的设计师则面临更大的挑战，诚然，现在扁平化设计大行其道，通过适当的训练都可以很好地绘制完成各种极简插画。但如何能在这些插画中融入自己的个性特征，绘制出有灵性、有特点的作品，是很多设计师欠缺的技能点。下页图所示的手绘风格插画是设计师视觉练习的重点，不妨花一些时间去夯实自己这方面的能力，这对成为一个有竞争力的UI设计师至关重要。不必过分担忧，这些插画大部分都是极简风，在熟练掌握钢笔工具的基础上，通过一段时间的临摹，每位设计师都能在这个方面做到足够出色。
在教学实践中，我们常常会发现一个问题，大部分UI初学者的问题都会出在版式设计上。所谓版式设计，几乎不涉及稍微复杂的图形层面，但是为什么很多设计师都会在这个环节出现问题呢？其原因就是对文本和图片（内容）的重要程度缺乏敏感度。一般来说，重要的内容更大、更粗，颜色更深，而次要的内容则更小，更细，颜色更浅。如果我们把UI上的所有内容比作出演电视剧的演员，那么，你是否可以辨别哪些是主角？哪些是配角？哪些是群众演员？哪些只是演员周边的衬托物呢？用这种比喻，我们便会对内容有足够的敏感度。也就是说，我们在做版式设计的时候（当然也包括UI设计），必须对要设计的内容有更深刻的认知，而不是为了好看而排版。这就是以“内容为中心”的设计理念。
要对用多大、多粗的文字或者图形，形成怎样的对比关系。一方面我们要认清“内容块”的概念，另一方面，初学者可以通过大量的临摹来增强对内容的敏感度。分享一个小诀窍，要测试作品中的内容块划分是否足够明确，我们可以在Photoshop中将自己的设计稿打上马赛克。如果能区分出内容块，则表示你的设计基本合格，如右图所示。
仔细观察下图所示的界面，先从分区入手，这些界面分为几个区域呢？区域之间是如何通过设计来让用户更容易辨别的呢？揭晓答案：大的留白、清晰的主次文字区分、卡片设计。这些都可以让你的版式更易于用户阅读，不致陷在文字海洋中迷失自我。
为什么我们将工具应用能力放在比较靠后的位置探讨？因为设计工具的使用是设计师最基本的技能，工欲善其事，必先利其器。工具可以说是每个设计师都要掌握的，这也是我们必须面对的门槛。一个连设计工具都不会使用的设计师是无法想象的，但是反过来，设计师最重要的工作，却不是设计工具。你可以把工具的掌握理解为帮你进入设计世界的大门，对，仅仅是大门。至于进去之后你要去向何方，则要看每个人对于设计本身的理解程度了。
随着移动端UI设计的兴起，设计工具和设计模式也在发生着巨变。在这个追求高效率和高质量的时代里，各种设计工具不断出现，不少设计师陷入“软件至上论”的怪圈，认为尽可能多地学习各种各样的新软件，才能让自己的设计技能突飞猛进。于是，追求各种神器、各种插件，希望所有操作能一键完成，计算机自动帮你设计好并导出来。但到头来才发现，你花了不少时间学习的工具不过是别人用来达成设计目标的一个过程而已。你辛苦寻找的各种神器，只会让自己的手和大脑都变得更懒。
因此，在工作中我们强调目标至上的观点。设计是一项讲求结果大于过程的工作，不管怎样的工具，最终顺利将设计稿输出展现在用户面前，才是至关重要的。你的受众不会因为你用了某“神器”而对你的作品刮目相看，设计质量的好坏很大程度上取决于你的“非软件技能”。
但是对于刚入行的设计师来说，对软件的熟练必须摆上议事日程。不少学习者对界面复杂的工具有天然的抵触感，那么我们不妨从简单的UI设计工具入手，即可以迅速摆脱生疏感，也可以在更短的时间内熟悉UI设计的流程，同时用简单的方式绘制出优良的界面，提升成就感，使后续的学习更有动力。
UI设计师学习的工具有以下几类，首先是图形绘制工具，如Sketch（Windows下有Adobe XD）、Figma、Photoshop，这也是当今设计师用得比较多的主流工具，从难易程度上来说，Sketch（XD）和Figma上手难度最低，操作最简单，Photoshop则属于万金油、巨无霸一类的工具，你不但可以用它们做UI，更可以处理更复杂的图形，我们可以在学习简单工具上手后尽快开始熟悉Photoshop，因为不管你对Sketch和Figma的操作有多熟练，Photoshop都是设计师不可或缺的存在，如下图所示。
另一类是交互工具，在UI设计稿完成前，这类工具可以帮我们绘制低保真的线框图；而设计稿完成后，我们需要用这类工具将其处理成高保真演示原型。最常见的交互工具，可以统称为“连连看工具”，只需按照页面的顺序，将点击区域及目标区域进行连接即可。目前大部分的设计工具都提供了此类连线功能，如Sketch、XD、Figma等。当然，也有更复杂的工具，如Flinto、Principle及一些在线设计工具（如墨刀），都可以完成从设计稿导入到连线导出，最终形成可以在手机上真实点击的效果，这类工具的特色是做出更接近手机真实动作效果的演示，比如论坛图、下拉刷新、页面滚动等。我最常用的是Flinto，各位读者可以试试看。
第三类需要掌握的工具是进阶类的图形绘制工具，以Photoshop或者Adobe illustrator为代表。通常，我们希望使用这类工具完成界面中的一些图形化设计工作，如插画、字体、Logo设计，这些工作Sketch、Figma等工具就无法胜任了。而这类工具对设计师的绘图水平有更高的要求，所以不要单纯为了学习工具而学习工具，先要有设计需求，然后再用软件满足需求，才是正确的学习方式。
第四类为设计师的加分项，如动效（微交互）效果的设计、3D视觉等。这类工具有Adobe的After Effect和Cinema 4D，通常学习成本较高，需要花费更多精力才能有所收获。在学习重点上，如果你只是初阶设计师，或者刚刚入门，在基本的静态页面处理上都很难做好的话，舍本逐末地去追求这些只会让你成为“半瓶水”。不妨拿出大量时间将静态页面及视觉表现做到极致，再去学习这些也不迟。
不管如何，设计工具是为设计内容服务的，千万不要舍本逐末，关注设计质量本身才是设计师的提升之道。
现在市面上各种教程与课程多如牛毛，我们可以很轻松地搜索到各类内容的教学课程，但是，对于学习者来说，刚开始学习就想到去依赖别人现成做好的内容，无异于让自己的主观能动性变得越来越差。
而自我学习能力则是考量个人在对于新事物认知上是否灵活和迅速的很重要能力。下面有几道选择题，回答一下，看看你的日常表现属于哪种？
Q01：你已经熟练掌握Sketch的使用，现在有一款新工具Figma，你很想去学习一下，这个时候你会怎么做？
□ 百度一下Figma，先看看它是什么，在官网上了解一下。
□ 百度“Figma教程”，找现成的视频教程开始看。
□ 打开软件操作界面，尝试去了解各个菜单与工具。
□ 阅读软件官方文档并自己亲自去操作试试看。
□ 发现界面和功能与Sketch有点像，试着用Sketch的思路去操作试试看。
Q02：你是一个UI设计师，之前只做过手机端App界面，突然有一天公司给了你一个任务，让你来负责产品的官方网站Web页面，但是你之前从来没做过网页……
□ 打开潜水好久的QQ/微信设计群，发言问大家：“网页设计要用多大的画布，用什么字体，多少号字体啊？”
□ 搜索“网页设计教程”，找现成的教程学习。
□ 先试着去分析哪一类的显示器屏幕的分辨率是用户使用最多的，通过观察和大数据的搜索，总结出一个合适的设计尺寸宽度，并建立画布，开始尝试性设计。
□ 通过观察，自己找到PC端网页设计与移动端界面设计的异同点，根据这些规律总结出自己的方法。
选的对钩越靠后，表示你有更多的自我探索能力和自我学习能力；而越靠前，表明你在自我学习上没有太多的积极性，你可能只是想找现成的、别人准备好的知识来利用。
虽然这些行为都代表你有欲望想去学习，但是在学习效率和学习质量上，它们相差太多。自我探索能力和自我学习能力更强的设计师学习质量更高、学习效率更快，特别是碰到一些之前从没有见过的未知事物的时候，能更快地适应它们并为自己所用。而自我学习能力较差的同学则相反，会比前者慢半拍，甚至更多。所以在竞争力上就显得优势不足。未来不确定的事情越来越多，新鲜的、未知的事物随时会出现，不可能每个都有现成的知识文档，所以试着做自我驱动型设计师吧！说白了就是“会学”，而不是“学会”。
静电说： 大部分的设计师小伙伴都是勤奋好学的模范，但是想在激烈的竞争中脱颖而出。片面的被动学习是没有太大效果的，不妨来一个从“学会”到“会学”的思维转变。