恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
我为 Sketch 设计了单一描边的功能
0.0°
2017-04-16 自译外文 经验/观点 原作者: UXchange 举报 6286 3 14 5

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 代码Zeplin 上的 CSS 代码


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

Sketch 中拐角处的内阴影

Sketch 中拐角处的内阴影


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

CSS 中拐角处的描边

CSS 中拐角处的描边


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

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


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

“标准”描边面板

“标准”描边面板


以我的经验,同时控制标准和分离描边是很难的,所以在这个解决方案中你可以通过右上角的开关来切换两种状态。
默认状态下开关是选中“标准”模式,就是 Sketch 现在展现的功能。

“分离”描边面板

“分离”描边面板


从“标准”切换到“分离”状态会展现四个图层,形状的每一边(上,右,下,左)。
看,每一边都是独立的。

拐角的处理和 CSS 类似,导出的代码也会反映这一设计。
使用这个功能,你还可以创建漂亮的伪 3D 形状。


总结

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

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

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

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

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

  • Sketch,你怎么看?


你对这个项目怎么看?你还想在 Sketch 上看到那些别的功能?
你也可以在 Dribbble 上看到这个项目!
如果你喜欢这篇文章别忘了评论和分享哦!
Daje!
Davide Pisauri

更新:2017-04-16

收藏

3人已收藏

一口大双

理论都是灰色的,唯生命之树长青

  • 34

    作品

  • 45

    粉丝

  • 53

    关注

  • 再谈创作练习与积累
  • 萌新使用sublime时踩过的坑(看心情更新)
  • 常见的几种适配方式
  • Dribbble首秀~

    猜你喜欢

      2017-04-16 自译外文 经验/观点 原作者: UXchange 举报 6286 3 14 5

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

      0.0°

      你确定要举报我为 Sketch 设计了单一描边的功能

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      14
      3
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录