“你是怎样进行交互设计的？”
“你是如何开始学习UI/用户体验设计的？”
“成为 UI/用户体验设计师需要具备哪些技能？”
“你使用什么设计工具？”
这篇文章的脉络围绕这四个问题进行～
01
掌握视觉和网页设计的基础知识
在开始UI/UX设计之前，你需要掌握 Web 和视觉设计的基础知识，因为所有的这些原则和技能都将在UI 设计中运用（设计按钮、排版、留白、阴影、调色板、渐变、不同类型的网格、布局等）。在视觉和网页设计方面有良好的理解和坚实的基础是成为一名熟练的UI/UX设计师的必要条件。下面我将着重介绍一些基本的和关键的设计原则：
1. 颜色
关于颜色理论的三部分大系列——色彩词汇、基本原理和色彩心理学。
设计师的色彩理论：
2. 网格系统
它们是什么？如何将它们应用到你的设计中？
利用布局网格构建更好的UI设计：_查看链接 ↗
3. 构图与平衡
学习如何平衡构图
设计原则：构图、对称和不对称平衡：_查看链接 ↗
4. 排版
betterwebtype为网页设计师和网页开发人员提供易懂的网页排版电子邮件课程
，它由Matej Latin创建。 betterwebtype：https://betterwebtype.com/
5. 对比
利用对比来组织信息、构建层次结构和强调内容。
设计原则：对比：查看链接 ↗
02
理解用户体验设计流程
要成为一名UI/UX 设计师，另一个非常重要的方面是理解用户体验设计过程中使用的过程、方法和理念。一般来说，用户体验设计过程非常灵活，它没有严格的规则或顺序可循，各个公司、团队可能有不同的方法来实现自己的设计流程。接下来我将给你介绍一个通用的用户体验设计过程，称为设计思维。
什么是设计思维？
设计思维是从用户的角度来理解和设计产品的过程，而不是要求用户自己学习如何使用你设计的东西。我们的目的是根据用户的需求来开发有价值的产品，而不是反过来。设计思维可以分为以下五个阶段：
设计思维是灵活当然迭代过程
1.共情
设计思维的第一阶段是了解用户、他们的需求和目的。这包括与人接触、观察、发现他们的体验和动机，让自己沉浸在真实使用环境中，这样你就可以对所涉及的问题有更深入的个人理解。在这个阶段收集到的所有洞察都将在下一个阶段用到。
2. 定义
设计思维过程的第二阶段就是基于在共情阶段收集的信息来定义问题。在定义阶段，应该分析观察到的结果并用来定义你和你的团队迄今已发现的关键问题。创建问题陈述后，你就可以开始进入设计思维的第三阶段。
3. 创意
前几个阶段的所有洞察都为理解用户这方面打下了非常坚实的基础，这时候就可以为定义的问题想潜在的解决方案了。有许多不同类型的创意技巧帮助你想出潜在的解决方案和想法，如头脑风暴、思维导图等。这一阶段的主要目标是在进入原型设计阶段前产生尽可能多的潜在解决方案。
4. 原型
设计思维过程的第四阶段是尝试将创意转化为有形产品。原型基本上是产品的缩小版，它包含了在前一阶段确定的潜在解决方案。这个步骤是用来测试每个解决方案并找出任何约束和有漏洞的地方。在整个原型阶段，所提出的的解决方案可能会被接受、改进、重新设计或拒绝，这取决于它们以原型形式呈现的表现。
5. 测试
测试阶段是在最终开发产品之前验证产品。这是五个阶段中的最后阶段，但是测试的结果通常会让你返回到前一个阶段，反馈出改进当前产品的意见并再次测试。
设计思维是灵活的迭代过程，这意味着过程不必按顺序顺序遵循步骤，这五个阶段应被理解为参与项目的不同模式。我非常简要地描述了这些步骤，所以如果你需要了解更多，你可以访问www.interaction-design.org。
03
学习如何设计用户界面，提升视觉设计技能
强大的视觉/UI设计能力是非常有价值的资产，也是成为UI/UX设计师的关键，但也可能也是最难完善的技能，它需要数月甚至数年的实践积累。你需要将视觉/UI设计能力作为设计技能的一个重要组成部分，你必须学习如何为不同类型的设备设计用户界面，包括台式机、平板电脑、移动设备等。你每天都需要工作，完善和提高你的设计技能。如何能做到这一点呢？我下面提出了一些你可能会用到的想法和方法。
熟悉 UI/UX 设计模式
你需要熟悉 UI/UX 设计模式以及它们所能解决的特定问题。
pttrns.com：移动端设计模式的一大集合
一般来说，UI/UX设计模式是经常使用的解决方案，可以解决UI/UX设计师每天可能遇到的常见的设计问题。设计模式也被称为标准参考点、指南、模板，设计师在设计网站或移动应用程序时可能会使用它们来解决特定问题，所以你不必每次都重复试图解决特定的设计问题。
下面，我整理了一些寻找设计模式的资源网站：
- pttrns.com：这里集合了许多移动设计模式
- www.uisources.com：移动设计模式与交互
- UI.patterns：用户界面设计模式是解决常见设计问题的可重复解决方案
- uimovement.com：每天都有很棒的UI设计灵感
模仿顶级设计师
没有比向更优秀、更有经验的设计师学习更好的事情了。不是每个人都有导师或其他人帮助学习UI/UX设计的，所以我想与大家分享非常有效的方法，帮助你提高自己的视觉技能。如何开始呢？你需要去Dribble、Behance、Pinterest（或任何其他可能会发现好的设计的网站），并临摹顶级设计师的设计。当然不是盲目复制这些设计，你需要仔细研究这些设计并关注以下几点：
- 布局（用户界面的排布、间距、填充、网格等）
- 导航（位置、大小）
- 排版（字体大小、线高、衬线或无衬线）
- 图标（使用哪种类型？如何以及何时使用）
- 背景（梯度，使用的照片？）
你需要研究这些设计的布局、导航、排版、图标、背景、内容等，并尝试理解所有这些小细节是如何结合在一起的。复制和重新创建这些优秀的设计会很好地提升你的审美，所以你会更好地了解和理解好的设计是怎样的。这就是我变得更优秀的方式，但是记住，你这是在练习，而不是在照搬这些东西。
“学习设计的最佳和最快的方法是观察和模仿更优秀和更有经验的设计师"
活动应用程序 | by Jakub Antalík
“细节真的很重要"
进行UI/UX设计时注重细节是至关重要的，有时即使是非常微小的变化也可能带来巨大的影响，所以你需要开始关注设计中的每一个细节。我个人认为，关注细节是一种非常有价值的技能，能让设计师站在一个更高的层次。
“细节决定成败"
如果要能够区分好的设计与坏的设计，你还需要每天训练自己的眼光。去看看Dribbble、Behance，仔细地研究顶级设计师是如何留白、排版、调整间距、使用调色板的，最终熟能生巧。
下面是我最喜欢的寻找灵感的网站：
- behance.net：发现来自各行业创意人士的优秀在线作品集和最新作品。
- dribbble.com：一个设计师社区，用来分享他们的作品。
- Uplabs curates：策划了最好的设计和开发灵感。
- awwwards.com：一个奖励设计人才的网站。
- uimovement.com：每天都有最好的UI设计灵感。
04
做一些概念项目
为了提高视觉/UI设计技能，你也可以开始进行虚拟/概念项目。这是一个很好的练习方法，这将有助于丰富你的作品集，然后获得新的客户或找到全职工作。除此之外，做概念项目也是很有乐趣的，因为你可以完全自由发挥不同的设计理念、布局、颜色、排版等，所以享受学习过程，玩的开心！好的视觉UI设计能吸引人们的注意力。
Roxanefashion store
05
学习UI/UX相关工具
几年前，当我开始接触UI/UX设计时，还没有多少设计工具可以使用，那时候的设计师们别无选择，开始使用Adobe Photoshop作为他们主要的UI/UX设计工具，但是Adobe Photoshop并不专门适用于设计网站和应用。到了现在，已经有很多很棒的、更高效的UI/UX设计工具。好消息是，你不必学习所有的工具，你只需要选择其中的几个尝试，然后坚持学下去，并熟练掌握它们。
Sketch：最多人使用的UI/UX设计工具之一（for Mac）
我使用Sketch已经有一段时间了，如果你是Mac用户，我强烈推荐它。如果你使用的是Windows，你可以试试Adobe XD。下面还有一些你可以尝试的软件：
- Sketch：优秀的UI/UX设计工具（适用于Mac用户）
- Adobe XD ：界面设计和原型设计工具
- Framer：交互设计和原型设计工具
- Figma：可以团队协作进行界面设计的界面、原型设计工具
- UXPin：用于设计、原型设计、团队协作（在线设计工具）
- Invision：用于原型和团队协作
在网上有大量优质和免费的软件学习资源可用。正如上文所说，没有比向更有经验的设计师学习更好的事情了。这里有一些资源能让你在学习软件方面有一个好的开头：
（此处为视频，请在原文中观看）
Sketch together：学习Sketch的最佳的YouTube频道之一
（此处为视频，请在原文中观看）
Daniel Hooper的Mac教程原则
（此处为视频，请在原文中观看）
UXPin教程
06
为知识投资
你需要花时间去获取知识，然后利用你所获得的知识，开始阅读文章、书籍、听播客和观看设计相关的视频，网络上有大量的文章和视频教程可供你了解新的设计趋势、实用案例和教程。这些都是很好的资源，你可以用来建立你的知识体系和专业技能库，为成为UI/UX设计师做铺垫。
以下是一些我喜欢的与设计相关网站和博客：
- smashingmagazine.com
- designmodo.com
- speckyboy.com
- medium.com/design
- webdesignernews.com
- sitepoint.com/design-ux
⭐ 对于UI/UX 设计师来说最佳的YouTube频道
The Futur
The Futur是一个YouTube频道，关注设计业务和商业设计。它由屡获殊荣的设计师 Chris Do主持，涵盖的内容从设计完美的登录页面，到弄清楚如何向客户收费和评估作品集。这些视频含金量很高，而且还邀请了来自不同专业的嘉宾。
（此处为视频，请在原文中观看）
The Futur
NNgroup
Nielsen Norman为客户提供用户体验研究、培训和咨询服务。公司由Jakob Nielsen 和 Don Norman创立。
（此处为视频，请在原文中观看）
Nielsen Norman Group
⭐ 必读书籍
《Don’t Make Me Think》
如果你曾经尝试过搜索某样东西，但搜索结果出来确实完全不同的东西，你就知道这是多么令人沮丧的事。这本书帮助企业和营销人员站在消费者的角度思考，它可以帮助您专注于客户。当你越从消费者的角度思考，消费者就越有可能找到你。这本书的建议是使用消费者用语，而不是技术上专业词汇。当你搭建或更新你的网站时，这一切都需要谨记在脑海中。
《Don’t Make Me Think》— By Steve Krug
《Better Web Typography for a Better Web》
这是一本基于在线课程的书，它向网页设计师和网页开发人员解释了排版。作者Matej Latin用易于理解的方式解释了复杂的概念，如垂直节奏、模块化比例和页面构图。这本书的内容附有实时代码示例，读者在浏览这本书时会经历一个设计和构建示例网站的过程。
《Better Web Typographyfor a Better Web》— by Matej Latin
《像艺术家一样偷窃》：没有人告诉你关于创造性的 10 件事
你不需要成为天才，你只需要做你自己。这句话来自Austin Kleon，他是一位年轻的作家和艺术家，他知道创造力无处不在，每个人都有创造力。作为数字时代的宣言，这本书是一个指南，里面的信息、练习和案例让阅读者直接接触到他们的艺术的一面。
《像艺术家一样偷窃》：没有人告诉你关于创造性的 10 件事 — By AustinKleon
07
从动画设计和原型设计开始
UI/UX 设计师师的另一个重要的和基本的技能是能够创建交互原型，然后在团队以及用户中进行测试，并根据他们的反馈进行迭代和对改进现有的设计。现在有许多不同的原型设计工具，其中大多数都很容易学习。说到工具，我使用InVision已经好几年了，这是我首推的工具。最近，我也开始尝试使用InVisionstudio和Adobe XD，所以你可以尝试比较哪个工具更好用，哪个最符合你的需求。
学习动画和交互设计的基础知识
界面中的动画可以产生巨大的影响，并极大地该改善数字产品的整体用户体验。作为 UI/UX 设计师，你需要熟悉动画和交互设计的基础。从学习动画的基本原理开始——动画的功能是什么？我应该什么时候使用它呢？它是如何工作的？什么是关键帧？了解过渡、持续时间、速度、缓动等。下面我强烈推荐一些工具：
- Principle For Mac：用于创建动画和交互的优秀软件（与Sketch兼容）
- Adobe XD：用于创建动画和交互的优秀软件
- Framer：交互设计和原型设计工具
- Invision studio：用于创建动画和交互的优秀软件
（此处为视频，请在原文中观看）
Roxane fashion store的交互概念
08
创建你的在线作品集
当你要寻找新的工作或作为一个自由职业者寻找新客户时，这一步至关重要。作品集是你的敲门砖，招聘人员看了它就会决定要邀请你面试还是选择其他候选人。作品集并不拘泥于固定的形式，你可以很容易地注册新帐户，然后将你的设计作品上传到以下任何一个在线平台：
- Behance：知名在线作品集平台
- Dribbble：另一个优秀的作品集平台（需要邀请）
- UPlabs：集合了免费设计资源的作品集平台
- Instagram：著名的照片和视频共享社交平台
我在dribble上的作品集
在网络平台上展示设计作品也非常有益，因为你可能会从其他人那里获得有价值的反馈和意见，比如更有经验的设计师。有了这些反馈，你可以提高你的视觉/设计能力。
如果你对编程足够熟悉，你也可以考虑从零开始搭建自己的个人网站，这可能是非常有益的，可以让招聘人员更多地了解到你的背景。
09
总结
要成为UI/UX设计师需要许多技能，这没有任何捷径、神奇的方法，这都是需要投入精力、努力工作、耐心和实践的，你需要每天不断学习和努力，因为那是你唯一进步的方法。正如我所提到的，每个人都是不同的，要成为一个UI/UX设计师也会走上不同的路途。我希望你从这篇文章中能学到一些东西，也能够用上。祝你在新的职业生涯中一切顺利！
ABOUT US
参考文章：查看链接 ↗ Tomczyk译者：嗜酸菌原文请戳【阅读原文】为尊重版权和译者转载请联系我们