[自译]我为 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容