ui边框设计图_UI设计形状和对象基础知识:填充和边框

ui边框设计图

第2部分 (Part 2)

Welcome to the second part of the UI Design shapes basics. This time we’ll cover two of the most essential properties of a shape — fills and borders. This is also a part of the free chapters from Designing User Interfaces.

欢迎使用UI设计形状基础的第二部分。 这次,我们将介绍形状的两个最重要的属性-填充和边框。 这也是《 设计用户界面 》中免费章节的一部分。

填充 (Fills)

As we have stated in part 1 of this series, most of UI design is about moving rectangles around. So let’s start with a humble rectangle. In most design tools you can draw it by pressing the R key.

正如我们在本系列的第1部分中所述,大多数UI设计都是围绕移动矩形 。 因此,让我们从一个不起眼的矩形开始。 在大多数设计工具中,您可以通过按R键来绘制它。

When you create a new rectangle, it usually already has a fill attached to it. In most cases it’s simply grey, so you will remember to change the color yourself. Sometimes it has a border too.

创建新矩形时,通常通常已经附加了填充。 在大多数情况下,它只是灰色,因此您会记得自己更改颜色。 有时它也有边框。

Back in the very early Sketch days it only had an outline, and you could selectively switch off parts of it. But luckily this is now a thing of the past.

在Sketch的早期,它只有一个轮廓,您可以有选择地关闭它的一部分。 但是幸运的是,这已经成为过去。

I made a video a while ago, trying to make a design in a nearly 10 year old version of Sketch and trust me, now is a lot better of a time to start :)
我前段时间制作了一个视频,试图用将近10年的Sketch版本进行设计并相信我,现在开始的时间要好很多了:)

The reason for this predefined color is because grey is neutral enough so adding a new shape won’t ruin your already beautifully crafted interface, but yet you’ll still be able to see that new object.

使用这种预定义颜色的原因是,灰色足够中性,因此添加新形状不会破坏您本来就精美的界面,但是您仍然可以看到该新对象。

default design tool grey rectangle

To make it simple fill is another name for the object’s background. It can be a color, a gradient, or a photo. Each of these can also have a different level of opacity (transparency) ranging from 0 (fully transparent — invisible) to 100 (fully opaque, with no transparency).

为了简单起见,填充是对象背景的另一个名称。 它可以是颜色,渐变或照片。 这些中的每一个还可以具有不同的不透明度(透明度)级别,范围从0(完全透明-不可见)到100(完全不透明,没有透明度)。

different levels of opacity.
The image above shows three rectangles. The one on the left is completely invisible because it has opacity 0, then a translucent one with opacity 50%, and then a fully visible one on the right.
上图显示了三个矩形。 左边的一个是完全不可见的,因为它的不透明度为0,然后是不透明度为50%的半透明的,而右边是完全可见的。

Pro tip:

专家提示:

Most of the modern design tools allow you to set opacity with the number keys on your keyboard. Just select an object and press 1 (for 10%), 2 (for 20%) and so on. Pushing 0 will switch between 0% and 100% opacity (so you sometimes need to press it twice).

大多数现代设计工具都允许您使用键盘上的数字键设置不透明度。 只需选择一个对象,然后按1(代表10%),2(代表20%),依此类推。 按下0将在0%和100%不透明度之间切换(因此有时您需要按两次)。

If an object doesn’t have a fill, is also lacking a border or an effect, it won’t be visible in the interface as it requires some defining characteristics to be visible. You’ll still be able to select it, however, move it around, and modify it. It will also still exist in the layers list.

如果对象没有填充,也没有边框或效果,则它在界面中将不可见,因为它需要一些定义的特征才能可见。 您仍然可以选择它,但是可以四处移动并修改它。 它也将仍然存在于图层列表中。

main types of fill: no fill, color, gradient and image

填充类型 (The types of fill)

There are three main possibilities of a fill and an absence of one. So you can either have NO FILL, or have a single color, gradient or image backgrounds.

填充和不存在三种主要可能性。 因此,您可以没有填充,也可以只有一种颜色,渐变或图像背景。

A while ago patterns were considered another kind of a fill, but in reality they’re just images with a potential to tile them, so they fall into the image category.

前一段时间,图案被认为是另一种填充,但实际上它们只是具有平铺潜力的图像,因此它们属于图像类别。

堆积填充 (Stacking fills)

Stacking types of fills on top of each other

You can also add more than one type of fill to the image. Obviously for this to work the fill layers need to be at least partially transparent, or you’ll only going to see the top one. In this example from Sketch you see an image fill as the base, and a semi-transparent gradient fill on top of it.

您还可以为图像添加多种类型的填充。 显然,要使填充层起作用,填充层至少必须部分透明,否则您只会看到最上面的一层。 在Sketch的此示例中,您将看到图像填充为基础,并且在其顶部为半透明渐变填充。

多梯度 (The multi-gradient)

multi-gradient fill

You can use this principle to achieve some pretty interesting, organic effects of multiple overlapping gradients like in the example above. To do this, simply create four radial gradients that start at each corner of your shape, and fade out towards the center. Experiment with their size and position until you like the result.

您可以使用此原理来实现多个重叠渐变的一些非常有趣的有机效果,如上例所示。 为此,只需创建四个径向渐变,这些渐变从形状的每个角开始并向中心逐渐淡出。 试验它们的大小和位置,直到您满意为止。

how to create a combined gradient fill

The most common fills you’re probably going to use however, are color and gradient.

但是,您可能要使用的最常见的填充是颜色和渐变。

边框 (Borders)

Borders are after the fill, the second styling an object can have.

填充之后是边框,对象可以具有第二种样式。

border types in UI

The border is a line that goes around our object. It can go inside (inner border), outside (outer border), or between them (center). Remember that only the inner border doesn’t visually make the object larger.

边框是围绕我们对象的一条线。 它可以进入内部(内部边界),外部(外部边界)或它们之间(中间)。 请记住,只有内部边框不会在视觉上使对象变大。

inner, center and outer border example

In the example above, the box is 60 x 60 points. The border is 10 points thick. In the middle image, that makes our box larger by 5 points on each side. In the third example, the border is completely outside, making the box larger by 10points in every direction.

在上面的示例中,该框为60 x 60点。 边框是10点粗。 在中间的图像中,这使我们的盒子每边大5个点。 在第三个示例中,边框完全在外部,使框在每个方向上都扩大了10个点。

边框样式 (Border styles)

The border can have different weights (width) in points and can be a dashed or dotted line. We can also fill it with both a color and a gradient.

边框的磅数可以有不同的权重(宽度),可以是虚线或虚线。 我们也可以用颜色和渐变填充它。

various border styles examples

Most of the design tools allow you also to modify the endings and joints of your lines (also known as paths).

大多数设计工具还允许您修改线条(也称为路径)的末端和接缝。

The ends can be open, flat, or rounded while the joints can be sharp, rounded, or angled.

末端可以是开放的,平坦的或圆形的,而接头可以是锐利的,圆形的或成角度的。

Types of stroke joining and edges.

The roundness of joints and endings can work well if your interface is generally rounded. If not, then just keep it at the default setting.

如果您的界面通常是圆形的,则关节和末端的圆度可以很好地工作。 如果不是,则将其保留为默认设置。

Fills and borders shapes

Thanks for getting this far. I believe it’s worth to sometimes revisit the very basics of a craft and that’s what this series is all about. Borders and fills are an essential part of UI, so it’s good to be able to bend them to your needs every time. In the next installment, we’ll cover all types of Shadows in UI design.

感谢您的帮助。 我认为有时值得回顾一下手Craft.io品的基本知识,这就是本系列的全部内容。 边框和填充是UI的重要组成部分,因此每次都可以根据需要弯曲边框和填充是很好的。 在下一部分中,我们将介绍UI设计中的所有类型的Shadows。

If you want to read more about the shapes and UI design in general, check out our 📘 book at www.designingui.com — there are free chapters there as well.

如果您想全面了解形状和UI设计的更多信息,请访问我们的design书,网址为www.designingui.com -那里也有免费的章节。

Image for post
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/ui-design-shapes-objects-basics-fills-and-borders-ed294a17bcbb

ui边框设计图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275576.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何移除项目中无用的 console.log 代码

大家好,我是若川。早些天时,我看到一个后端公众号发《辞退了一个前端》,当时还想着现在后端公众号都开始吊打前端了嘛。其中有个理由就是线上还一堆console.log...我猜很多人都会移除项目中无用的console.log。可以复习一下。前言说起console…

远程连接 错误 内部错误_关于错误的性质和原因。 了解错误因素

远程连接 错误 内部错误Back in 2012, I was a young[er] product designer working in a small tech agency in Valencia, Spain. In parallel, I worked as a freelancer on several side projects for different clients. One day I was contacted by a new health services…

得到鹅厂最新前端开发手册一份

又逢金九银十,拿到大厂offer一直是程序员朋友的目标,但是去大厂就得拿出实力来。除了需要积累技术,了解并掌握面试的技巧,熟悉大厂面试流程,也必不可少。这里分享一份最新入职腾讯的前端社招面经,来看看鹅厂…

性能测试分析之带宽瓶颈的疑惑

第一部分, 测试执行 先看一图,再看下文 这个当然就是压力过程中带宽的使用率了,我们的带宽是1Gbps的,合计传输速率为128MB/s,也正因为这个就让我越来越疑惑了,不过通过压力过程中的各项数据我又不得不相信。…

figma下载_素描vs Figma困境

figma下载I distinctly remember how much hatred I had in my heart when I lived through my first UI update. The year was 2009; I had just gotten my braces off and I was ready to smash that ‘Like’ button on my high school crush’s status when I logged into …

祝大家七夕快乐,邀你源码共读,顺带发点红包

大家好,我是若川。这是一个普通的周六。只不过又叫七夕节,祝大家七夕节快乐~所以就不更新技术文了。估计还是有很多读者不知道我。若川名字由来是取自:上善若水,海纳百川。顺便放两篇文章。我读源码的经历,跟各位读者朋…

硬币 假硬币 天平_小东西叫硬币

硬币 假硬币 天平During the last 1,5 years, I’ve been traveling a lot. Apart from my must-have things like laptop, sketchbook, and power bank, there constantly appears a new one, in a familiar shape but a new look. That’s 在过去的1.5年中,我经常…

尤雨溪发布的Vue 3.2 有哪些新变化?

大家好,我是若川。今天分享一篇 Vue 3.2 版本的文章。查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列1前言8.10号凌晨,尤雨溪在微博平台官宣 Vue 3.2 版本正式发布:此版本包含一系列重要的新功能与性能改进,但并…

https://zeplin.io/ 设计图标注及切图

2019独角兽企业重金招聘Python工程师标准>>> https://zeplin.io/ 转载于:https://my.oschina.net/soho00147/blog/3025646

更好的设计接口_设计可以而且必须做得更好

更好的设计接口We live in a world that becomes more dependent on technology every day. Tech gives us new ways to communicate, learn, work, and play, and recently it enabled us to reveal the appalling police brutality towards black people in the US by sharin…

linux隐写文件剥离,杂项的基本解题思路(1)——文件操作隐写、图片隐写

文件操作隐写图片隐写压缩文件处理流量取证技术文章本来是分成4部分的,但是前两部分何在一起写了也就没有分开,所以干脆就只分了两部分文件基本类型的识别一、kail 下file 文件名原理就是识别文件文件头比如这个软件:二、WinHex通过winhex分析…

账务管理系统

2011-04-11 21:55最近写了一个账务管理系统(个人版)使用C#语言编写,编译器VS2010,数据库Access2010,系统采用三层架构,界面可以换肤, 窗体按钮可以移动,可以自定义皮肤,保…

初学者也能看懂的 Vue3 源码中那些实用的基础工具函数

1. 前言大家好,我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习。写相对很难的源码,耗费了自己的时间和精力,也没收…

细说 Vue.js 3.2 关于响应式部分的优化

大家好,我是若川。上一篇写的是:初学者也能看懂的 Vue3 源码中那些实用的基础工具函数。今天再分享一篇 Vue 3.2 的文章。学习源码整体架构系列、年度总结、JS基础系列背景Vue 3 正式发布距今已经快一年了,相信很多小伙伴已经在生产环境用上了…

linux 运行apj,pxe+ris-linux实现在DELL R710上网络安装windows2003

一、前言网络远程安装windows2003,目前有两种方法:一就是通过windows自带的远程安装服务(RIS,Remote Installation Service),但这种方法需要用windows做为源服务器,需要安装域控制器,dhcp,tftp等…

写给初中级前端的高级进阶指南

大家好,我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习。前言我曾经一度很迷茫,在学了 Vue、React 的实战开发和应用以后&…

linux系统远程教程,Linux下实现远程协助

一、检查系统是否安装有tcl和expect这2个软件包[rootlocalhost:~]$ rpm -qa | grep tcltcl-8.4.7-2tclx-8.3.5-4[rootlocalhost:~]$ rpm -qa | grep expectexpect-5.42.1-1二、检查是否有kibitz命令[rootlocalhost:~]$ whereis kibitzkibitz: /usr/bin/kibitz /usr/share/man/m…

图片相似度对比原理_设计原理:对比和相似性的应用

图片相似度对比原理You know why you are able to read this article right now apart from the availability of your eyes, internet, device, etc.? What is the font color of this text you’re reading? — Black. What is the background color of this page you’re …

学习尤雨溪写的 Vue3 源码中的简单工具函数

大家好,我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习。初学者也能看懂的 Vue3 源码中那些实用的基础工具函数本文是纪年小姐姐源码共读第…

Linux manjaro系统安装后无法连接wifi,解决方案

2019独角兽企业重金招聘Python工程师标准>>> 笔记本为联想 thinkpad E480 首先通过命令lspci -k看一下原因是否为缺少wifi驱动,如下,如果没有Kernel driver in use,说明缺少驱动。05:00.0 Network controller: Realtek Semiconduc…