永远不要从工具开始。学习布局、色彩理论、UX（用户体验）和 HCI（人机交互）的基础知识。当您了解如何操纵数据来控制体验时，您就可以创建杀手级界面。

然后找到适合您的工具。我在 Illustrator 中制作所有模型。在这一点上有很多分歧，但 Photoshop 确实是一个图像编辑器。Illustrator、Inkscape 或 Fireworks 都更适合布局。

更新 >我现在也在尝试使用Sketch。它比 Illustrator 更直观且便宜得多。没有那么成熟，但它正在到达那里。

更新到更新 >我完全支持 Sketch。对于纯粹的界面设计，这是目前最好的事情。它有它的局限性，但是有了 JSTalk 插件平台，我认为它会很快赶上来。在 3.2 版中，它已经大大改善了我的工作流程。由于 Illy 是我的主要 Adob​​e 工具，因此我也放弃了 Pshop，转而使用更简单的 Pixelmator。Sketch + Pixelmator 是一个强大的组合。

欢迎来到GD.SE！

老实说，我不认为你真的需要成为 Photoshop 大师来设计你的 UI。特别是如果你在做网络，无论如何你最终都会编码所有东西，你需要展示一些模型和线框图的技能应该不需要很长时间来学习。Photoshop 非常直观，但这当然并不意味着它没有一定的学习曲线。问题是，如果您正在为 Web 设计，您可能应该在浏览器中进行，并且只使用 Photoshop 制作一些图形并尝试布局中的内容。

您可以从一些基本教程开始，以了解程序的工作原理（图层、文本效果、形状等）。一旦你得到它，你可以按照指导你完成一个过程并帮助你实现结果的教程，因为它们通常涵盖了你稍后将使用的一些技术。像这样的一些tuts，专注于一个网络，可能非常有用。

现在关于这个概念，我总是用铅笔和纸做我的。Photoshop 适用于某些事情，但并非适用于所有事情。有更好的原型制作工具，例如Balsamiq（高级版）或Pencil（免费和开源）。它们更快、更容易使用。

正如便衣所提到的，学习设计的基础知识很重要。GraphicDesign 上列出了许多很好的资源，可以帮助您入门，您可以通过查看资源标记并按投票排序。如果您想成为任何事物的优秀设计师，您应该阅读提供的许多资源。

至于 UI 特定资源，我发现这门 UX 课程是一个好的开始。它详细介绍了 UI 设计的大多数方面，尽管您总能学到更多东西。重要的是要遵循经过验证的规则，Erik Kennedy提出了一些很好的基础知识（这里是第二部分），并创造了大量的工作。练习实施你学到的规则，以在你的脑海中强化它们，并亲眼看看哪些有效，哪些无效。在每次大迭代之后让其他人使用您的界面也非常有用，在产品“完成”之前获得反馈。

保持最新并牢记用户体验也很重要。UIGifs 每周发送一封电子邮件，其中包含一些可爱的 UI 设计，我强烈建议订阅。Muzli还发布了一个更长但不是 100% 处理 UI 的月度列表。UserFlowPaterns是一个很棒的网站，可以看到以简洁的方式将良好实践应用到应用程序中的令人愉快的示例。UserInterface.io也发布了一些很棒的 gif。还有很多其他的，但这些是我目前最喜欢的。

在现代，就像 Yisela 建议的那样，我们不必在 PS 中工作，而是可以直接在浏览器（或您正在使用的任何平台的编辑器）中开始设计。虽然总是这样做可能不是最好的，但有很多优点。本文更详细地介绍了何时以及如何执行此操作。

我创建了一个资源列表来帮助初学者开始 Web 开发，如果您最终使用代码进行工作，希望对您非常有用。在代码中进行设计（或其他类似WebFlow的方式）的优势在于您已经完成了下一个阶段的大部分工作，从而加快了整个过程。当然，这不是必需的，但它也有助于您在设计时实施它，从而帮助您思考什么是可能的和最佳实践。

假设您的设计是响应式的，这意味着无论在哪个屏幕上查看它都看起来不错，您应该以移动优先的方式进行设计。移动优先永远不应该被认为是移动最重要的，这意味着只要我们让它在手机和平​​板电脑上运行，我们就可以了。相反，按照时间顺序将其视为先小后大，或先小后大。从我们计划支持的最小屏幕尺寸开始，我们知道我们正在关注我们的网站或应用程序最重要的方面，其余的都是肉汁。如果您想了解更多关于如何以这种方式开发的信息，我在我的个人博客上写过。

要在 UI 设计方面做得更好，您可以做的最重要的事情是创建 UI 并让用户对它们提供反馈 - 并且经常这样做。

帮助用户是我们的全部目标，那就去做吧！在学习规则时应用它们非常棒，因为它有助于在你的脑海中强化它们，同时让你的设计更好。您的设计很可能会臭一段时间，但没关系！该视频很好地解释了原因 - 本质上是因为它发生在我们所有人身上，但如果你继续尝试，你会成功的:)

我在哪里可以学习和提高我的 Photoshop 技能，如何开始构思一个概念？

就像@plainclothes 所说，永远不要专注于工具。

精通 Photoshop 不会让你成为一名网页设计师。就像掌握如何使用烤箱不会让你成为厨师一样。

Photoshop、Illustrator、Sketch 等。这些工具可帮助您创建高保真原型。

具有高保真输出的应用程序一开始就为您提供了太多的选择。它们会稀释你的注意力并让你不知所措。

拥有比您需要的更多的工具只会减慢您对构成网站设计的思维过程的理解。

在这一点上沉迷于“像素完美”的定位、颜色或字体只会分散你对思考阶段的注意力。

这不是设计。

这就是“玩设计”，这款游戏除了是一种有趣的拖延方式外，每次玩它还会浪费你大量的时间。

当您刚刚开始时，您的重点应该是让您尽可能轻松地学习网站的基本构建块。然后开始使用它们。

这让我回答了你的另一个问题：

有时当我尝试做设计工作时，我的大脑会一片空白或混乱，因为我喜欢的参考资料太多了，我很难确定我更喜欢哪种设计。

如果我告诉您有一种快速简便的方法可以让您忘记所有这些参考资料，该怎么办？

这叫素描。

让我们一起尝试一下，好吗？

现在拿起一支笔和一张纸。

实际上，钢笔是给娘娘腔的。继续并选择一个标记。一个胖子。

现在快速绘制您想要探索的网站布局草图。

然后将其与您正在考虑的其他布局进行比较。

像这样：

这些是低保真原型。

在探索想法的阶段，这就足够了。

与用于创建高保真原型的应用程序（Photoshop 等）相反，低保真网站草图让您更难以沉迷于细节。目标是让您的想法脱离脑海，以便您可以考虑它们并比较不同的选择。纸张的持久性和记号笔缺乏固有的精度是限制您的因素。

您的工具将您装在. 这并不像你想象的那么糟糕。这种装箱限制了设计过程的复杂程度。

换句话说，标记草图让您更接近实际的“设计”并保留细节，否则您会坐立不安。目前。

希望我对你有所帮助。

上面的文字是我在这里发表的一篇文章的摘录。