我为 Sketch 设计了单一描边的功能

hi，如你所见这又是一篇译文，我的第 8 篇，其实这只是一篇设计文章，插件根本没做出来，感觉被欺骗了…实际工作中我也很少用单描边，直接画根线了事，没想到还可以用内阴影这样的小技巧，233～

whatever，英文无障碍的同学建议直接阅读 原文 ，链接需要科学上网，have fun~

我在两年前开始使用 Sketch ，当时我们的一个教授在课上推荐了这款新软件给我们。从那时起，我每天花8个小时的时间和 Sketch 一起工作，所以我是一个实打实的核心用户。

Sketch 一代又一代地更新，使设计过程变得简单快捷。但是有一个功能我从开始到现在一直在寻找： 单一描边 。

译者：所谓单一描边，我瞎说的，就是给一边描边，例如矩形，你可以指定给四边中的任意一边描边的功能。

我在矩形的一边添加描边

就我这样吗？

当试图理解如何在形状的一边设置描边时我感到自己愚蠢，当我觉得愚蠢时我就会 Google。

所以我发现了两件事：不能添加单一的描边，和我不是一个人。

回到 2013 年 Diógenes Brito 在推特上问了 Sketch 这个问题：

没多久他们就回复了：

这个问题沉寂了两年之后， Daniel Schwartz 问了 Sketch 同样的问题：

…仍然没有，这两年啥也没变：

当 Ruben Nine 再问的时候：

Sketch 似乎含糊其辞地说要在未来添加这个功能：

Sketch ，你懂的，下面这是 2016 年问的，而且现在已经 2017 年了！

阴影和它们的深色边框

当然有一个弥补的方法可以解决这个问题： 内阴影 。

我做了一个 视频 来解释如何操作：

我发现很多设计师都使用这个技巧，这是弥补单一描边功能缺失的最快的方法。但是这个方法也是有很多容易忽略的问题的：

1. 从 Sketch 导出 CSS 代码到 Zeplin 上时，你需要手动改变代码来反映这个边框的存在：Zeplin 上的 CSS 代码

2. 当你在拐角处创建两个相邻描边时，其中一个会遮挡另外一个：

Sketch 中拐角处的内阴影

这种情况在 CSS 中是这么处理的：

CSS 中拐角处的描边

当我需要添加单一描边的时候，我使用这个技巧是因为它能让我完成工作，而且是迅速完成。但是如果有一个特定功能可以在形状中添加任意一边的描边的话，一定会更好。

我是如何在 Sketch 中分离描边的

我作为一名设计师的使命是让人们的生活更便捷，这也是为什么我为 Sketch 设计一个新的描边面板让用户以他们最喜欢的方式管理描边。

“标准”描边面板

以我的经验，同时控制标准和分离描边是很难的，所以在这个解决方案中你可以通过右上角的开关来切换两种状态。

默认状态下开关是选中“标准”模式，就是 Sketch 现在展现的功能。

“分离”描边面板

从“标准”切换到“分离”状态会展现四个图层，形状的每一边（上，右，下，左）。

看，每一边都是独立的。

拐角的处理和 CSS 类似，导出的代码也会反映这一设计。

使用这个功能，你还可以创建漂亮的伪 3D 形状。

总结

• Sketch 不支持形状添加单一描边；

• 人们早早就对这个功能有需求；

• 设计师们一般用内阴影来解决这个问题；

• 内阴影在 Sketch 中实现地很好，但是生成 CSS 时会有问题，而且解决拐角描边问题时一点也不优雅；

• 我为 Sketch 设计了一个新的功能，可为形状添加单一描边；

• Sketch，你怎么看？

你对这个项目怎么看？你还想在 Sketch 上看到那些别的功能？

你也可以在 Dribbble 上看到这个项目！

如果你喜欢这篇文章别忘了评论和分享哦！

Daje!

Davide Pisauri

来源：UI中国

关键字：产品经理, 设计

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！