Category Archives: Write

红点的功能设计思考

近期的项目需要加红点提示,所以对红点这个功能总结了一下自己的想法 我觉得一个功能的上线一定是要有它的价值意义,而不是随便就草率的因为其他家产品有,所以我们就要这样做,要结合自身产品的特性来去考虑这个功能的加入。现在红点设计已经非常的普遍,每天接触最多的就是微信里面的红点了,无时无刻不在打扰着我,所以这个功能的设计策略上也要考虑用户的使用体验及场景       &nbs…

第十三章 九宫格

在做图的时候,有的时候需要把画面划分几个部分,分别进行设计。因为随着作图能力的提高,规范性和严谨性就需要提高。尤其是网页设计,一个好的网页设计不是杂乱无序的。 所以我们可以用Sketch里的九宫格,但前提是必须是位图,虽然不知道为什么一定要用位图才可以用九宫格的功能,但一定有它的道理,而且你在对位图进行缩放的时候,是对称的从中心向四周延展开来,但也许有的时候,你是想随着画布的大小而变大,不需要中心…

第十二章 布尔运算

在Sketch里面,如果你发现一些基本的图形都不适合你,你想组合或者用更多的图形时,这时候就离不开布尔运算。当然,如果钢笔工具用的熟练的话,用钢笔工具也可以画出自己想要的复杂图形,但有些时候我们其实可以通过拆分合并等方式也可以创造出你想要的更多图形。 在Sketch里面,有四种布尔运算,分别是合并形状(Union),减去顶层形状 (Subtract),与形状区域相交 (Intersect),排除重…

第十一章 蒙版的使用

蒙版,顾名思义就是蒙上一层东西,只显示你想显示的部分,类似PS里面的遮罩。在Sketch里面,你可以有选择去显示想要显示的内容,比如你可以打开一张正方形的图片,然后想做一个圆形的头像,那么就需要在这个正方形的图片上做一个圆形蒙版。 只要是图形的话都能做蒙版的,你先选中圆形,然后Sketch里Layer(图层)— Use as Mask(使用图形蒙版),一个圆形的头像就成功了,很简单吧,如下图: 在…

第十章 节点的模式运用

在进行对图形的具体编辑的时候,会经常用到节点,或者叫点也可以。当你用钢笔画出一个图形的时候,然后回车一下,你就会发现有好多个节点组成了一条线,这个时候我们要对具体某个图形编辑的时候,就可以调节这些点,来做出更加优质的图形。 在Sketch的右侧检查器里,就有四种节点模式,分别是: 直线角 (Straight);镜像 (Mirrored);不对称 (Asymmetric);断开连接 (Disconn…

第九章 Mirror镜像的运用

Mirror镜像这个只针对于设计手机界面的同学来说,比较有用。因为这是一个可以电脑做图和手机显示同步的一个功能。在Sketch的工具栏,你会发现这个Mirror,如下图: 看见了么?怎么样能实现和手机同步呢?首先你要在手机上下一个Mirror,这个是个APP,在Appstore上一搜就出现了,然后下载到手机里边。如下图: 看见左下方的有个小钻石的线描的图标了么?叫Sketch Mirror,之前就…

第八章 字体的转曲

字体在设计中是不可缺少的元素,无论你是设计海报,广告牌,网站,还是手机界面,都离不开字体。字体的运用也是设计中重要的组成部分。尤其是在做手机端界面设计的时候,一个像素都不能差。所以这就涉及到每个元素之间,要对齐要统一,不能有偏差。 在Sketch里会出现一种情况,就是打字的时候,字体的边框有的会直接和文字自适应,有的字体边框会高出很多,这样就会造成当你想知道第一行字和第二行字的间距是多少时,就会容…

第七章 网络和辅助线的使用

设计师一般在作图的时候都离不开网格和辅助线,以前在PS或AI里的时候辅助线你必须手动去调整辅助线的位置,有的时候也难免会有误差或者半像素的偏离。但在Sketch 3里面,辅助线极大的避免了失误,并且提高了效率。 Sketch 3里面辅助线是自动的,你只需把鼠标移到标尺那里,辅助线就自动出来,你想确认要这条辅助线只需单击一下即可,如果不想确认,只是想简单看下距离位置,那么可以不用单击,鼠标移到哪里,…

第六章 怎样做一个有投影的图标(包括内外阴影的运用)

这一节里面教大家怎么运用投影,先从画一个简单小图形开始。首先新建一个画布,画一个圆,如下图: 然后在右侧检查器区域里,找到Shadows,即投影的意思 在Shadows下面的小方块单击,Color是投影的颜色,然后依次是投影的远近大小,模糊程度,分离即投影离本体的远近,如下图: Inner Shadows即内阴影,参数值和投影的一样,如下图: 如果想做凹陷的感觉一般就少不了内阴影,想做突起的按钮或…

第五章 小剪刀工具的神奇运用

在讲小剪刀的具体运用前,先要告诉大家一个不容易被发现的工具栏总库,里面集合了Sketch里所有的小工具,都在里面。如下图: 看弹出的列表里面倒数第二个叫Customize Toolbar,点开就弹出一个工具栏的库 有没有很激动?哈哈,你可以任意把里面的小工具拖到上面的工具栏里,或者你比较常用的,之前被隐藏在菜单栏里的,都可以直接拖出来放到工具栏里。也比较提高工作效率。发现我们要讲的小剪刀没?我再发…

第四章 创建元素符号

在对产品的界面设计中,我们经常会用到一样的元素不断的重复使用,因为我们要保持统一的设计形式。或者相同的阴影处理效果,描边样式等都离不开元素符号的使用。 创建符号的时候,一定要创建组的,你想要创建的元素一定要编好组,而且创建成功的元素符号是紫色显示,如下图: 要想创建新的符号,只需选中一个组,或者几个图层,然后单击工具栏中的 “转化为符号(Convert to Symbol)按钮”。或者进入菜单的 …

第三章 熟悉一下钢笔及各种基本图形的练习

上一章节因为涉及到了画圆及各种图形,怕有的小伙伴还是不知道,就在这一章节里仔细的讲一遍,大家也可以更熟悉一下Insert有哪些更多工具有助于设计 第一个是钢笔工具,快捷键是V,可以画出你想要的任意形状。顺便强调一下,在Sketch里所有的图形都是矢量图形,像AI一样。第二个是铅笔工具,也是用来画图形的,但相对自由度比较大,不像钢笔是一个节点一个节点的画,铅笔是你可以先任意画,像真的用铅笔在纸上绘图…

第二章 怎样切图及导出图片尺寸

在讲这一章之前,先把上一章提到的布尔运算给大家讲一下(如下图)             这是顶部工具栏区域的一小部分。布尔运算有四种形式,你可以根据你的需求来选择不同的方式。 合并形状 (Union):合并的结果是会得到两个矢量区域的总和。 减去顶层形状 (Subtract):这一项的结果是顶层矢量的区域会从下一层的图形上移去。 与形状区域相交 (Intersect):与形状区域相交的结果是会保留…

第一章 初识Sketch

1.Sketch 是什么? Sketch 是一款非常适合移动端的设计师们使用的矢量绘图软件。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要选择Sketch 对于经常要做移动端界面设计和需要配合工程师切图的设计们来说,Sketch简直就是为他们量身定做的。Sketch的一键导出,强大的画布,可以扩展到无限大,都非常的提高效率。一旦用…

第一章 初识Sketch

1.Sketch 是什么? Sketch 是一款非常适合移动端的设计师们使用的矢量绘图软件。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要选择Sketch 对于经常要做移动端界面设计和需要配合工程师切图的设计们来说,Sketch简直就是为他们量身定做的。Sketch的一键导出,强大的画布,可以扩展到无限大,都非常的提高效率。一旦用…