APP推广合作
联系“鸟哥笔记小乔”
如何成为一名合格的 UI 设计师?你需要先了解这些图形设计知识
2021-03-04 09:00:00
点击 "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 设计情报局欢迎小伙伴加入,一起交流设计知识,了解全球设计资讯,锻炼英文能力,发掘更多可能性~
添加小助手微信,备注「社群」,即可加入读者群。
TCC翻译情报局
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
TCC翻译情报局
TCC翻译情报局
发表文章83
连接知识,了解全球精选设计干货
确认要消耗 羽毛购买
如何成为一名合格的 UI 设计师?你需要先了解这些图形设计知识吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接