▲点击 \”TCC翻译情报局\” 关注，回复 \”社群\” 加入我们

本文共 2726 字，预计阅读 7 分钟
TCC 情报局的 第 24 篇 干货分享
2021 年的 第 12 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是徐曼鹭。我们常常提到形色字构质，形状是界面设计的基础元素之一，因此，合理运用形状元素进行信息层级排布是一名合格 UI 设计师的基本功。本文作者总结了图形设计的关键技能点，将其简化为易于理解的内容输出，帮助设计师在日常应用中回忆要点并反复理解。

你是否在考虑成为一名 UX / UI 设计师，却又害怕不知从何开始？不用担心，成为 UX / UI 设计师比你想象得要容易，只要你有扎实的基本功和无穷的奉献精神。后者我无法帮你建立，因此此次我们将聚焦讨论如何培养前者。
以下内容来自《UI设计》中的一个免费章节，并为我未来系列专栏的一部分。我将尽可能将其划分为一个个易于消化的模块，请大家尽情享用。


图形是如何被创造的？

How are the images created？
无论是制作低保真原型，还是最终精致的 UI 稿，都需要在选定的设计工具里进行形状与对象的设计。你甚至可以使用 Keynote 或 Powerpoint 先熟悉设计对象的形状及其之间的关系，然后再导入到 Sketch、Figma、Adobe XD 或其他工具里设计。
目前市面上所有的 UI 设计工具，都是在进行 操作矢量形状的工作。这代表着所有视觉看到的呈现物，都是由定义它的参数组成的。这也意味着对象可以在不损害精度的同时被拉伸和放大 —— 操作只会让参数的数值增加并重新计算后再生成对象的形状。
如果你打算设计界面，请做好准备，因为这个工作的大多数时间都在移动各种矩形物体。在所有操作界面中，矩形是最流行的造型形状（椭圆形紧随其后）。
而 UI 设计的常规思路，是 以正确的方式去移动排布这些矩形。

UI 设计的本质是 排布各类矩形物体。而技法就是去 掌握如何布局对象、确认对象出现的位置，以及最重要的 —— 知道背后的理由。



盒模型

Box Model

不管是从设计还是代码实现角度，盒模型[1]是用来定义数字产品界面的最基本方法。我们所做的大多数设计都是根据盒模型进行的，因此必须充分了解它。
（[1]盒模型（Box Model）：盒模型描述在文档树中的每个元素所生成的一个矩形框包围盒，而程序会依据定义好的布局规则去将这些 “盒”（Box）进行布局然后呈现内容供用户查看。）
盒模型包含四个基础元素：
  • 填充（Fill）
  • 边框（Border）
  • 外边距（Outer Margin）
  • 内边距（Inner Margin）
填充 — 顾名思义指的是元素的背景。它可以是纯色、渐变、图像，或者是以上的混合形态。
边框 — 是围绕物体的轮廓线。在本系列的下篇文章里，我们将深入探讨所有不同类型的边框。
外边距 — 是对象外部的区域，通常简称为边距（margin）。它使我们能够在放置对象时使它与周边对象之间保持一个足够的安全区域。即上图所示的矩形外部蓝**域。
内边距 — 也称为 “Padding” —— 这个别称在与开发人员交谈时可能会派上用场。内边距的范围越广，物体内部的安全区域就越大。在上图示例中，彩色矩形内较暗的区域为内边距。

定义属性

Defining properties

尺寸

宽度和高度（以点为单位）定义了对象的大小。在大多数情况下，我们简称宽度与高度为 W 和 H。由于是二维空间，因此宽度是水平 X 轴上的刻度，高度是垂直 Y 轴上的刻度。

简而言之，点（points）与像素点（pixels）不同。分辨率和像素密度是另一篇文章的主题，因此此处我尽量简短描述：点是像素的矢量表现，而 分辨率决定了像素与点数。现在的显示器为像素密集型，1 个点可以是 4 个像素或更多。将点与像素点进行换算的原因是，既要保证元素足够大，还要保证元素具有足够的清晰度和精确度。

宽度和高度应该始终为包裹对象的最小矩形框，即使被包围对象本身是不规则图形。

坐标方位

对象的坐标，由所在画板的 X 轴、Y 轴上的一系列数字定义。X 是水平轴上的位置，而 Y 是垂直轴上的位置。
对正方形来说，定义方位不算困难。但如果是圆形呢？或者一些随意的斑点？其实不规则对象的位置，就是 实际形状包裹边框的位置。

角度

角度定义了对象顺时针旋转的角度 —— 起始角度默认为 0°。旋转角度也可以是负数。需要记住旋转 -15° 等于旋转了 360°-15°，即旋转了 345°。

为了保持界面的一致性，最好通过键盘输入角度值旋转，而不是手动操作旋转对象。因为与手动逐点旋转对象相比，通过输入角度值旋转的方法得到的结果更加精确。
如果我们将多个对象合并到同一图层（一般都有 “执行此操作” 的对应按钮），该行为会将新图形的角度重置为 0，但图形仍会保持原有旋转样式 —— 只有新的透视操作才成为进一步旋转的基础。
一般旋转圆形不会产生肉眼可见的变化，除非该圆形是渐变或图片填充的圆形。

圆角半径

许多研究表明，圆润造型比尖锐形状让人感觉更友好。我们使用一个称为圆角半径（有时为边框半径）的属性来设置造型圆角的程度。

圆角半径是一个数值项。就像宽度和高度一样，它也以点为单位。该数字越大，形状拐角的圆润程度越大。圆角半径的数值可以一次性作用于所有边角，也可以分别设置。
通常，即使是（ 2-6 点之间）细微圆角也被认为比（ 0 点）的尖角更友好。但是，最好保持所有对象的圆角半径一致。我们选择的网格单元应定义圆角半径，但也应该与周围的造型匹配。

同一对象上使用不同的圆角半径，如果符合品牌准则（即 logo 也具有类似图形样式），也支持用来制作精美的按钮。

如果决定以这种方式制作按钮，请记住在所有界面上，这类按钮的造型都需要保持一致。
原文：https://uxdesign.cc/all-you-need-to-know-about-ui-design-shapes-and-objects-619c13a8523c
作者：Michal Malewicz
译者：徐曼鹭
播客：徐曼鹭
剪辑：韩紫珊
编辑：王娅
本文翻译已获得作者的正式授权（授权截图如下）
往期精选文章：

如何制作打动面试官的作品集，这里有一份完整的指导手册

如何做好用户体验项目？从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求：回归本质，打磨信息架构

关于协作，国外设计大神是这么的思考的

这份医疗保健类 APP 设计的 12 个要点，我先收藏了

TCC 视野｜2021 年用户体验设计趋势分析

设计新趋势「玻璃拟态」到底是什么？如何制作实现该效果？

Figma vs. Adobe XD：下一代设计工具，何必是Sketch

– 设计师自习社区 –
TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～
添加小助手微信，备注「社群」，即可加入读者群。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。