ui设计要学些什么

很多人问，做UI设计到底要学什么。网上课程和文章一大堆，列出来的软件和理论能吓跑一半的人。其实没那么复杂，咱们把这事儿掰开揉碎了讲，你就知道从哪儿下手了。

首先，你要把工具学会。这是基本功，就像厨师得会用刀。UI设计现在最主流的工具是Figma。别去纠结学Sketch还是Adobe XD了，现在大部分公司，特别是互联网公司，都在用Figma。为什么？因为它在浏览器里就能用，团队协作太方便了。设计师做完图，直接把链接丢给产品经理和开发，大家就能在上面评论、看标注，效率很高。

学Figma，不是说把每个按钮的功能都背下来。你要学的是它背后那套工作方法。比如Auto Layout（自动布局），这个东西一定要吃透。它能让你做的界面像搭积木一样，改一个地方，其他地方能自动适应。举个例子，你设计一个按钮，里面有图标和文字。如果文字从“登录”变成“使用微信登录”，按钮长度需要变化。用Auto Layout，你改了文字，按钮的宽度就自动被撑开，你不用手动去拖。一开始可能觉得麻烦，但当你做一个复杂的界面，里面有几十个这种组件时，你改一个地方，整个页面都整整齐齐，那个时候你就知道它的好了。

另一个是Component（组件）。你要把界面里重复出现的东西，比如按钮、输入框、导航栏，都做成组件。这样做的好处是，假如你要改所有按钮的颜色，你只需要改一个主组件，整个文件里几百个按钮就都跟着变了。这才是专业的工作流，不是一个一个手动改。这就是区分新手和有经验设计师的地方。

除了Figma，你还需要会一点Photoshop（PS）和Illustrator（AI）。注意，是“会一点”。千万别搞错了，现在没人用PS来画整个界面了，那都是十年前的搞法。PS主要用来处理图片，比如抠图、调色、做一些合成效果。AI主要是用来画图标或者插画。因为AI是矢量软件，画出来的东西可以无限放大而不失真，做图标最合适。你的工作流程通常是：在AI里画好图标，在PS里处理好图片，然后把这些素材导入到Figma里，开始做界面布局和设计。

工具说完了，接下来是更重要的东西：设计理论。工具只是你的手，理论才是你的脑子。没有理论支撑，你做出来的东西就是瞎画，不好看，也不好用。

第一，版式布局。说白了，就是把一堆东西在屏幕上放得整齐、舒服。这里面最实用的一个原则，是栅格系统。你可以简单理解为在画面上打上看不见的格子，然后把所有元素都对齐到这些格子里。这样做出来的界面，天生就有一种秩序感，不会乱。现在最常用的是8点栅格，意思是你的设计里，所有元素的尺寸、间距，都应该是8的倍数，比如16px、24px、32px。你打开手机里的任何一个成熟App，去量一下它们的间距，基本都是遵循这个规则的。这能保证视觉上的一致性和专业性。

第二，字体排印。这绝对不是选个好看的字体就完事了。字体是信息传达的骨架。你要考虑几个点：可读性、层级关系。可读性是底线，用户看你的字得不费劲。所以那些花里胡哨的字体，大部分情况都不能用在正文里。层级关系指的是，你要用字号大小、粗细、颜色，明确告诉用户，什么是标题，什么是小标题，什么是正文，什么是辅助信息。用户一眼扫过去，就能知道重点在哪，阅读逻辑是清晰的。一个App的质感好不好，字体排印占了至少一半的原因。

第三，色彩搭配。新手最容易在颜色上翻车，用得太花，或者太脏。别凭感觉去选颜色。先学点基础的色彩理论，比如色轮、对比色、邻近色。一个界面里，主色不要超过两种，再加上一个强调色（比如用于按钮、提醒），以及黑白灰作为中性色，基本就够了。另外，颜色有一个极其重要的作用，就是功能性。比如，红色通常代表错误或警告，绿色代表成功，灰色代表不可点击。这些都是用户已经习惯的心理认知，你不能乱用。还有一个很重要的点是颜色的对比度，特别是文字颜色和背景色。对比度不够，视力不好的人就看不清了。这叫“无障碍设计”，是专业设计师必须考虑的。

把上面这些硬技能掌握了，你就算入门了。但想成为一个好的UI设计师，光会画图还不够，你还得学着去思考。

你需要懂一点用户体验（UX）的知识。UI（用户界面）是UX（用户体验）的一部分。UI负责产品长得好不好看，UX负责产品用起来爽不爽。你不能脱离UX去谈UI。比如，你在设计一个注册流程，你得去想，这个流程是不是足够简单？用户会不会在这里遇到困难？是先让用户输入手机号，还是先让他设置密码？这些问题会直接影响你的界面设计。所以，你需要学习怎么画用户流程图，怎么分析用户需求。你设计的每一个按钮，每一个界面，都不是为了好看，而是为了帮助用户解决一个问题。

然后是工作流程。一个项目不是上来就画高保真效果图的。专业流程一般是这样的：先是画线框图（Wireframe），就是用最简单的黑白灰方块和线条，把界面的结构和信息布局定下来。这个阶段我们完全不考虑颜色、字体这些细节，只关注功能和流程对不对。因为线框图修改成本最低，用笔和纸都能画。等线框图确定了，再开始做视觉设计，也就是我们前面说的那些上色、加图标、排版的工作。最后，很多时候还需要做一个可交互的原型（Prototype），就是把一张张静态的图连起来，模拟真实App的点击跳转效果，这样可以更直观地感受流程，也能用来给用户做测试。

最后，怎么去练习和提升？

第一，临摹。但不是像素级地抄袭。找一些你觉得设计得很好的App，比如Airbnb、Spotify，试着把它一模一样地画出来。这个过程能让你强制去思考，它的间距为什么是这样？它为什么用这个字号？它的颜色是怎么搭配的？临摹是学习高手设计规范最快的方法。

第二，重新设计。找一些你觉得不好用的App，或者老旧的网站，尝试用你学到的知识去给它做个“整容”。但关键不是把它改得更酷炫，而是你要能说出你为什么要这么改。比如，“我把原来的小图标和文字按钮，改成了更大的纯文字按钮，因为这个App的目标用户是老年人，他们对图标不敏感，而且视力不好，大一点的字更容易点击。”这种带有思考过程的练习，是你作品集里最有价值的东西。

第三，建立自己的作品集。作品集不是你画的漂亮图标的集合，而是你解决问题能力的证明。一个好的作品集项目，应该包含：项目背景（这是个什么产品，要解决什么问题）、你的设计过程（线框图、不同的视觉方案）、最终设计稿，以及最重要的，你的设计思考（你为什么这么设计）。能把这个逻辑讲清楚，比你放十张漂亮的飞机稿（没有真实需求的设计练习）要有用得多。

学UI设计是一个持续的过程，工具和潮流一直在变，但底层的设计原则、对用户的理解、解决问题的逻辑，这些是不变的。把基础打扎实，然后不断地看，不断地想，不断地画，就行了。