讲图形设计的故事

让我们从草图UI组件中制作出引人注目的叙述。我们将剖析其元素（颜色，版式，尺寸），并将其转化为一个不同的观众的故事：视觉，听觉，触觉。目标？引人入胜的，容易理解和令人难忘的经历。清晰度和连贯性至关重要。

我的同事凯蒂（Katie）选择了一个UI组件。我会注释它（我们的主要工具是SCSS，树枝和手工艺品，但模板语言并不重要），她将提供反馈。理想情况下，我将正确获取大多数细节，并出现一些错误，以说明如何在交接过程中丢失信息。

在白标或框架前端开发中，优先级是灵活性和适应性。内容和样式在很大程度上保持不可知论（在产品边界内），因为代码的最终目的地和目的是未知的。但是，我最近向网页设计机构的过渡已经将重点转移了出来。在这里，重点是定制，高度量身定制的设计，与客户的特定需求及其目标受众深入融合。

与精心制作的Pixel-Perfect UI而不是线框或初始叙述的精心制作的图形设计师紧密合作是一条学习曲线。但是，我将有价值的技能带入餐桌：文档设计。

文档设计 - 基本上是具有核心访问性的语义网络，即将图形设计视为通信系统。我们将颜色，版式和布局的基本目的转化为可访问，线性和可导航的DOM。它是HTML，简单而简单。然而，令人惊讶的是，这个基本原则常常被忽略。

凯蒂（Katie）提供了一个充满艺术板和清晰设计规格的草图文件。我的分析显示，使用类似卡范式的六个或七个组件：

• 一张卡片在网站页面上呈现元数据。
• 它包含图像/媒体和元数据（媒体对象）。
• 它显示在一组类似对象中。
• 该组始终键入（没有搜索结果，新闻文章和课程的混合）。
• 每个对象都有一个页面链接，没有其他操作。
• 每个对象都包含一个呼吁行动（例如，“书”）。
• 可选元素：时间，类别，徽章。
• 所需元素：媒体，标题，链接。

该卡是主要导航元素。用户遍历指导路径，根据顶级页面从卡集中选择（“ what on oon”，“ class”）。它不是交互式的，而是指南，索引卡将目的地的用户带到了目的地，在这种情况下，购买了一张表演票。

考虑一下这个类比：通过电话描述一个节目传单。从无关紧要的细节开始，您不会逐字朗诵文本。您也不只是描述颜色和字体。您将传达基本信息：“这是最伟大的表演者，星期二晚上7:30，在电车附近的牛津街上的奥迪恩。”这是文档设计的本质。

计数，组和名称

让我们在列表项目中构建每张卡。我们需要一个可数的小组，我们将以标题介绍（<h3></h3> ）。这使屏幕读取器用户可以：

1. 标识标题概述中的列表。
2. 请参阅预先计数项目。
3. 导航到下一个列表项目/卡。
4. 跳过小组并继续下一页（分页是以下标记地标）。

---

======================================================================================================================= ========================================================================================================= ======================================================================================================================= ========================================================================================================= ======================================================================================================================= ========================================================================================================= ========================================================================================================= =========================================================================================================

锚

每张卡都将包裹在锚元件中（<a></a> ）。这优先考虑链接，允许用户在识别相关卡后立即单击。虽然可单击的大区域是有益的，但它不应成为可用性陷阱。该卡的大量排水沟提供了足够的间距，以最大程度地减少意外点击。

标题

演出标题将是标题（<h3></h3> ），反映其视觉突出。快速扫描标题的用户很容易找到此关键信息。图像将在标题之前；由于无法通过API提供图像描述，因此alt属性将留为空。

现在为元数据：

• 徽章
• 日期/时间
• 类别

徽章

徽章突出显示特定于场地的信息。尽管其用户利益并不明显，但其视觉强调需要包含。为了避免在非视觉浏览期间错过它，我将立即将其放在标题之后，无论是首先还是最后一次，以保持一致的可访问性。而不是<abbr></abbr>，我将使用纯文本，因为品牌颜色是场地所有权的明确指标。

<p> HAC亮点</p>

徽章是组织特定的，显然将内部事件与外部组织主持的事件区分开来。

日期/时间

日期至关重要，将放置在<h4></h4>元素，促进对特定日期或时间的快速扫描。这<time></time>元素确保通过辅助技术进行适当的日期/时间解释。

类别/标签

类别遵循徽章和日期，反映了它们的视觉去优先级。我们通过将特定信息放在更多一般信息之前避免重复。一个简单的标签先于类别列表以易于清晰。硬编码的间距也可以防止文本压缩。

<p>类别：{for类别中的类别。</p>

CSS中处理了主要类别的颜色编码，因为它是一种非语言提示，不需要口头描述。首先将主要类别放置，但没有明确标记，因为预先存在的类别过滤器提供了更有效的选择方法。

行动

呼吁采取行动（“书籍”，“了解更多”）被视为跨度，最后放置以发出信号的末端。这样可以确保没有数据遵循该动作。

结论

此标记优先考虑计数，分组和命名数据，从而实现线性和非线性相互作用。当依次或零件阅读时，该页面是可以理解的，从而促进有效的导航。

凯蒂的反馈

凯蒂·帕里（Katie Parry），设计师：出色的文章！这<time></time>元素处理特别聪明。但是，辅助技术用户以预定的顺序接收信息。在不进行过滤时，查找特定事件（例如，舞蹈事件）需要在标题，徽章，日期和类别中导航，这可能很麻烦。这不是编码错误，而是当前Web范式的限制。要考虑未来改进的事情。

我的设计过程通常始于事件卡，甚至在建立范围内的版式之前。从视觉上看，这些卡应：

• 类似于直观使用的列表。
• 提供足够的信息以供用户兴趣评估（图像，标题，日期，链接）。
• 包括一个明确的行动呼吁（链接）。
• 容易扫描。

视觉扫描性是通过一致的信息类型和清晰的视觉层次结构来实现的。字体和间距是关键。标题高度突出；日期始终如一，但与标题不同。类别具有不同的样式。代码样本中的间距需要调整以进行最佳扫描性。

用户扫描以获取不同的信息。一些通常浏览；其他人则搜索特定的事件或类别。卡需要适应这种多样化的行为。尽管存在惯例，但卡设计随着项目而异。

必须在熟悉的界面和特定于客户的独创性之间达到平衡。自定义字体和调色板有助于，但用户发现至关重要。我研究客户及其受众（评论网站，社交媒体），以发现影响设计的见解。开发人员参与在此发现阶段将是有益的。目前，我使用广泛的草图笔记，有时还使用电子表格来定义功能。数据民群体将是理想的！

以上是讲图形设计的故事的详细内容。更多信息请关注PHP中文网其他相关文章！