加入收藏 | 设为首页 | 会员中心 | 我要投稿 温州站长网 (https://www.0577zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 策划 > 正文

PaintCode 用户操作指南(库篇)

发布时间:2016-09-29 03:14:40 所属栏目:策划 来源:人人都是产品经理
导读:副标题#e# 2.1 核心概念(Core Concepts) 库是设计师创建和管理颜色、渐变、图形、图像以及变量的地方。库项目中的行为能够用户界面设计的需要。 例如,设计师能够在不同的图形中使用相同的颜色。然后,如果设计师调整颜色,所有使用该种颜色的图形将会自

第三种方式,通过从颜色弹出按钮中选择颜色使用。

011

012

所有的方式,设置的颜色是相同的,设计师应该选择设计师觉得最方便的一种。

添加一个新颜色(Adding a new color)

有几种方式添加一个新颜色:

在库中的颜色列表的顶部,点击“+”按钮。 在颜色弹出菜单中,点击“添加新颜色(Adding new color…)”菜单选项。在弹出按钮中,用这种方式也能够创建新颜色。 在检查器的显示器中通过“Command + Click”的方式也能够添加新颜色。通过这种方式,一个颜色的副本将被添加到库中。

当设计师在库中添加颜色之后,颜色编辑菜单就会显示。(注意,设计师也可以从另一个文档中,通过复制和粘贴带颜色图形的方式添加颜色,也可以双击一个渐变控制。)

编辑颜色(Editing a color)

设计师可以在库中双击来编辑颜色,也可以点击检查器的显示器,弹出编辑颜色窗口。

013

文本域中显示了颜色的名字。PaintCode 为设计师生成了这些名字,但设计师也可以给这些颜色重命名。

这里有“基础”以及“衍生”两种颜色类型。

基础颜色的设置为“无”。对于基础颜色,设计师只需要使用颜色选择器选择一个特定的颜色。设计师可以在不同的格式中中设置精确值,调整旋钮,或者在右下角弹出框中使用放大镜从屏幕上选择任何颜色。

当设计师选定了基础颜色,设计师也就得到了“衍生”颜色。对于衍生颜色,设计师必须制定所需的操作和数值。例如,设计师可以设置一个颜色和库中已有的其他颜色相同,但透明度为50%。这是一个非常有用的功能。

014

当父级颜色变化的时候,衍生颜色也会随之变化。

删除颜色(Deleting a color)

当设计师想删除在设计中使用的颜色时,删除列表就出现了。删除列表包含设计师所有的图形以及其他库项目,当设计师删除颜色的时候,它们都将受到影响。

015

当删除掉颜色后,所有相对应的图形、渐变、阴影以及变量都将会被替换为默认颜色(红色)。所有的删除后的颜色都将直接变为基础颜色,但在视觉上会保持一致。

使色彩表现变成生成代码和符号中的参数(Making color behave as a parameter in generated code and in symbol)

要了解更多如何设置颜色和其他库项目为参数,请阅读库项目行为(Library Item Behavior)章节。

2.3 渐变(Gradients)

渐变可用于填充矩形、椭圆、贝塞尔曲线、星星以及多边形。PaintCode 支持多步渐变。设计师也可以选择线性渐变(定义一个角度两个点)或者环形渐变。渐变取决于使用的颜色,当颜色有调整的时候,渐变也会随之更新。

使用渐变(Using a gradient)

使用渐变,单击并拖动渐变的连接点到一个画布的图形上:

016

或者,设计师可以简单的在检查器的显示器中点击一个空的瞄边或者填充, 从上下文菜单中选择一个渐变:

017

还可以通过,从填充弹出菜单来选择渐变:

018

019

这个菜单会在库的颜色以及渐变中自动弹出。

添加渐变(Adding a new gradient)

有两种方式添加渐变:

点击库中渐变列表的顶部中的“+”按钮 在填充弹出菜单中点击“添加渐变(Add new gradient…)”按钮

(注意,设计师也可以通过复制、粘贴其他文档中已经使用渐变的图形,来添加渐变。)

编辑渐变(Editing a gradient)

设计师可以在库中双击列表项来编辑渐变。

020

(编辑:温州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读