美文网首页@IT·互联网设计
一个基于组件的 Sketch 工作流——设计的方式正在改变,工具

一个基于组件的 Sketch 工作流——设计的方式正在改变,工具

作者: 二口夭 | 来源:发表于2017-04-30 00:06 被阅读434次

    hi,如你所见这又是一篇译文,我的第 9 篇,英文无障碍的同学建议直接阅读原文,链接需要科学上网,have fun~

    这篇文章最早发表在 Abstract blog
    给人们一个工具,他们会找到不同的方法去使用它。没有哪两个设计师是用同一种方式工作的,但是我预测在未来几年里这一现象将会发生改变。现在的数码设计方式脱胎于使用传统的摄影修图工具设计界面的方式,不了解设计系统的内部运作原理并不会让你丢工作,同时无止尽地循环创建现有的界面会让我们迷失在计算机的编译中。

    在过去的十年中,设计师开始重估他们的设计方法并且面对一种基于组件的工作流。Photoshop 曾介绍一种“智能对象”(能把其他 Photoshop 文件“放置”在一个 PSD 中)。这种新的功能可以让设计师去共享一个组件的集中版本,不用再跨文件地拷贝一个组件。遗憾的是,这中方式从来没有真正用在设计团队的工作流中。

    当 Sketch 引进 symbols 的时候,组件的价值就更加清晰了。尽管被限制在同一个文件夹中,symbols 让组件极度地简单:创建一个组件,跨画板和页面无限次地复用它。最初是静态的,symbol 马上添加了两个更强悍的功能,恢复原尺寸和改变填充值。我确信 symbols 在未来将会拥有更多强大的定制化功能。

    真正的突破是 Sketch 支持嵌套的 symbols。即使作为一个单一的设计师,对 symbol 的定义、命名和结构化也有极大的价值。巧的是,这和开发者们结构化组件是一毛一样的:从微观层面定义事物开始例如一个按钮,一直到宏观层面例如整个屏幕都是一样的。

    Abstract 其中一个功能是为设计师提供版本管理。Abstract 轨道改变时会同时改变 Sketch 中的所有组件,让你和你的团队在组件的层面上去比较不同版本。这就意味着你在 Sketch 文件中创建更多的 symbols 你(或者是你的同事)就会避免更多的矛盾。使用 Abstract 时,你和另外一个人同时编辑一个存在于每个图层的 icon,不会引起任何冲突。假如冲突真的发生,Abstract 也会优雅地处理这种情况。


    举个例子,我在设计 Abstract 时是如何组织 Sketch 文件的。很多我喜欢的设计团队都使用相似的工作流,无论团队规模大小这种方法都能发挥作用。

    基元

    Colors颜色

    每一个项目都是从制定一个色板开始的。品牌色,文本色,UI色,各种状态的颜色...从这一刻起,使用色板之外的颜色通常都不是一个好主意,除非真的,真的有一个好的理由(也就是说理由好到无论如何也要把这个颜色加入色板)。

    文本样式&排版样式

    列表的第二项是字体。给项目需要的字体大小列一个表。列表越短,维护起来越容易。和颜色一样,通常没有必要偏离这个列表。

    在文字样式上添加一些修饰语能使这个列表更进一步(颜色,字重,文字变形...),但是添加所有不同的变换要么会使列表难以浏览,要么将会强制在列表上不断添加项目。(我感觉 Sketch 将会在这方面作出改善。简单的对齐不应该定义文本样式。)

    组件

    这是真正让人兴奋的事。在 symbols 里嵌入其他 symbols,这创建了层级,组件中层级更容易维护和更新。


    第一级:基础

    第一级的 symbol 不应该包含任何其他的 symbols。在我们的组件中他们的等级最低的。

    • 图标:icon 的亮、暗和其他着色,贴好切片,方便程序员打开 Sketch 时能容易地找到他们要的资源。
    • 头像:设置 8 个可能会在整个 app 上用到的头像。他们是不同人物的照片。

    第二级:低层模块.

    第二级 symbols 结合了基元和第一级的 symbols。

    • 表单元素:按钮,输入框,多选框,单选框...
    • 单元:人,评论,提交,文件,页面,画板...
    • 次级导航:包含选项或者 icon 的头部
    • Banner:综合文本,icons 和按钮

    第三级:中层模块

    第三级的 symbols 组合了第二级和第一级的 symbols。这是更高级的 symbols,他们通常被使用在实际的设计中。

    • 侧边栏:单元的列表,可以作为导航
    • 主内容区域:从项目网格到提交细节包含了动作,标题,描述,预览和评论
    • 添加头部:搜索导航能让用户知道自己在 app内的位置,混合了文本标签和 icons
    • 模态框:动作,动作确认,全部流程...

    我将会代表性地把第三级的 symbols 分组在一个页面上,这样我可以快速比较他们的一致性。


    第四级:合成

    虽然拥有如此全面的组件集合,但是在实际设计中一个画板不会包含很多的 symbols。我通常在 Sketch 的第一页放置 app 的所有主要页面,其他页面包含多有边缘情况。


    所以设计方式将会如何改变呢?

    设计和开发的工作流正缓慢地靠近彼此。像 Sketch 这样的绘图工具会每次更新都会出现更强大的功能,当结合 Abstract 时就会形成一个坚实的,可预测和可靠的工作流。在开发者那边,有新方式在各种平台上建立更好的组件。两边都在建立辨准化的相似的流程,这使我振奋。

    标准化,结合大量的新工具,共享词汇,提升设计过程的水平,我们的工程师已经如此工作了数十年。把 Abstract 的价值最大化,团队里的每个人都可以快速地接受到大量的历史记录,以便于了解现在的设计是如何一步步走过来的,以及更好地作出设计决策。

    打造高品质的产品是一个团队努力的目标,我们 Abstract 所有人都为在进化过程中扮演重要角色而感到兴奋。


    Abstract 目前属于内测版本。我们将努力在第二季度末的时候退出公测版本。以往测试人员的反馈对我们都很有帮助,我们一直致力于改善流程和提升体验。而且我们相信现在是设计师有充足的基础建设来突出设计价值了。我们每周都会放出新的邀请码。感谢你们的支持和鼓励。我们期待一起做惊人的事情。

    如果你还没有注册我们的内测版,你可以点这里。如果你对我们改进设计流程的事情感兴趣并且想帮助我们,我们正在找有经验,有想法和技能满满的小伙伴。立即申请吧!

    相关文章

      网友评论

        本文标题:一个基于组件的 Sketch 工作流——设计的方式正在改变,工具

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