Tim Pleiko-lzik作为AnchorFree的高级产品设计师，在与开发团队紧密合作过程中，积累了大量产品设计相关的成功经验。本文，Tim向设计新手提供了一些基本技巧，可将这些技巧应用到设计过程中，帮助开发人员能够顺利、高效地工作。

Tim Pleiko-lzik：

「聘请数字产品设计人员，不仅仅要有具备强大的视觉能力。如果你只是刚入行，请记住，完成UI/UX工作还意味着你将被期望与开发人员紧密有效地合作。毕竟，从技术上讲，开发人员是是你设计栩栩如生的人。

我看到的新设计师面临的主要问题之一是缺乏对工作技术要求的知识。如果你正在认真从事UI / UX的职业，则需要知道如何创建设计文档、交付，使开发人员更高效的工作。

为了帮助你在职业生涯中取得成功，我想分享与产品设计团队一起工作时，期望达到的最低标准。使用这些基本规则来指导你的设计流程，为你和开发人员节省很多不必要的时间和精力。」

一致性是关键

首先，第一件事情也是最重要的事情：一致性。对于你的每个项目，你都应该建立适用于所有设计工作的全局规则，从而简化开发过程。请记住，一致性是设计师和工程师成功合作的基础之一。

1.创建文本样式的层次结构

必须在项目中遵循文本样式中的顺序。为此，你需要创建将在整个项目中使用的样式层次结构。文字样式的顺序应从最大到最小。简单的文本样式层次结构可能如下所示：

H1-用于主要标题的最大文本

H2-次要标题（例如类别标题）

H3-最不重要的标题

P1-此样式可用于正文（用于页面主要文本的样式）

P2-页面上的小文字。可用于合法文本和任何其他小尺寸文本

L（链接） -所有链接文本都要用不同的文本样式突出显示，以使它们更容易被找到，用户一眼就能识别出来。链接文本通常为粗体，默认情况下是蓝色，但是链接可以设置为任何颜色。

开发人员将这种层次结构用作文本样式的名称，设计文档中最好先定义出文本样式的使用规范。

2.尽量减少字体

一个项目中使用尽量不超过两种字体。第一种字体可用于标题，第二种字体用于其他文本。

许多年轻的设计师刚开始在一个项目中就采用了不同字体的变化。尝试尽量减少字体的使用，保持一致性和简约性。这样既简化了用户对产品的理解，又简化了项目开发。

推荐一个在线字体搭配网站：

https : //fontpair.co/ 


3.使用网格系统

在我的工作中，我使用8pt网格系统。这种规则使界面能够保持视觉平衡。它适用于网格的宽度，间距等。有关网格系统的学习参考：

      Material Design layouts


      Blogpost by Elliot Dahl

4.了解你的平台详细信息：Android与iOS

将开发系统的设计规范应用在你的设计中。例如：

系统字体：

iOS： SF Pro Text，SF Pro Dispaly

Android： Roboto

按钮高度：

iOS： 44像素

Android： 48像素

图标的可点击区域：

iOS： 44x44像素

Android： 48x48像素

设计文档格式（发给开发人员）：设计规范需要针对不同系统制定样式规范，例如标题；开关、切换、按钮控件等等。

5.探索原生开发平台元素

在移动设计方面，我强烈建议你探索开发平台（iOS与Android）的原生元素。许多年轻的设计师倾向于创建非本地元素或过于复杂的元素。我相信，平台的原生元素足以提供你所需要的设计元素，这是值得探讨的要点之一。

但是，请记住，仅包含平台原生元素的应用程序可能非常单调乏味。在我的工作中，我总是尝试创建一些元素来增加产品的独特性。这里有一些很好的解决方案：从左到右：Jakub Antalik，Darin Senneff，Cuberto

6.检查图标和插图中的蒙版

始终注意在应用程序内使用的设计元素：检查图标和插图中的遮罩。你可能不会注意到设计阶段的差异，但是当元素看起来与计划的元素完全不同时，开发人员将会被要求处理。

7.保持图像一致

如果你在一个小型团队中工作，则可能会使用网络上的图标。与其他地方一样，元素的一致性至关重要。如果你使用的图标来自不同的集合，请对这些图标进行整体设计。注意细节差异，确保所有图标设计保持统一。所有图标的线条粗细应相同，如果不是，请自己进行统一设计！

8.无障碍设计

由于会有很多人使用我们设计的产品，因此考虑每个人如何无障碍使用它至关重要。设计界面时最常见的错误是文本和背景颜色之间缺乏对比度。

请记住，对比度和颜色使用是设计辅助功能时要考虑的关键因素。用户（包括有色觉缺陷的用户）必须能够轻松地在数字屏幕上查看内容。以下是一些工具，帮助你为项目选择可访问的配色方案：

      Color contrast checker


      Accessible color palettes

9.准备一个UI工具包

在任何项目的结尾，我都会为开发人员准备一个UI工具包，其中列出了所有文本样式，图标，插图，元素及其在不同情况下的状态。该文件对开发人员非常有用，因为它包含了开始进行项目所需的所有必要信息，并为他们节省了很多时间。

这是一个非常简单的例子，并没有展示一个真正的UI工具包应该是什么样的。

能够在设计时考虑到开发过程将会使你在设计师的职业生涯中走得更远。通过实现上述技术，不仅可以简化你自己的设计过程，还可以为开发人员队友节省大量不必要的时间和精力。非常感谢Alexa Pleiko-Izik用出色的插图支持我的博客文章！

Powered by Froala Editor