美文网首页principle@IT·互联网设计
我为 Sketch 设计了单一描边的功能

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

作者: 二口夭 | 来源:发表于2017-04-16 15:15 被阅读182次

    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

    相关文章

      网友评论

      • Stan:inner shadows 可以实现

      本文标题:我为 Sketch 设计了单一描边的功能

      本文链接:https://www.haomeiwen.com/subject/exuaattx.html