用Sketch设计前,你一定要做这5件事

原作者:Jon Moore  翻译者:Puddinnng

本教程为翻译教程,原文地址为:

https://medium.com/@jon.moore/5-things-to-do-before-you-start-your-next-design-file-in-sketch-or-preparing-your-design-mise-en-ff7ea9fe3722#.x8mswze61


就像厨师大展厨艺之前要备菜一样,产品设计师在做设计之前也应该把需要的材料都准备好。

在你开始设计一系列画面之前,进入可持续的设计状态是很重要的。下面是5个让你进入设计状态的技巧:

1.设定字体格式

这件事虽然枯燥,但也得做好不是吗?因为文字,是用户了解你产品最直接的途径,所以将这一步做好很关键。

我喜欢在大范围内挑选字体的尺寸和风格,所以我的字体格式页看起来是这样的(我一般还会创建一个暗色主题的):

这样做的话,将来改变字体会很快捷:1)全选,2)更改字体,3)同步风格。搞定!

每个主题下包含四种字体格式:

默认格式(通常设定80-100%透明度)

次级格式(50-70%透明度)

不可用格式(20-40%透明度)

强调格式(常常使用品牌色)

为什么我不是改变颜色值而是设定透明度呢?

这个小技巧能让你的文字在任何背景颜色上看起来都舒服。下图中,设定了透明度的那行字(第二行)看起来比单纯的灰色自然多了,这是因为它融合了背景颜色。第二行文字的颜色并无不同,只是透明度让它们看起来像不同的颜色。多方便呀~

最后,别忘了将你设定好的字体格式在Sketch中创建为Text Style。如果你日后想要将"不可用格式"的透明度从25%改到30%,你只要改变字体格式中的样式,这样文件中运用相同样式的文字就都改变了。

高级技巧:在字体格式的名字中使用斜杠(看上图),将会在Insert-Styled Text菜单下创建次级菜单:

2.设定颜色以及对象风格

决定其他东西之前,你要选定5种基准色:

基准色

品牌色:很明显,这是品牌的颜色。

黑色:选定一种你将在设计中使用的基准黑色。我会避免纯黑,取而代之的是加入了少量品牌色的黑色(或者加入互补色)。看下图:

在你的品牌色上覆盖上80-90%透明度的黑色。选取这个颜色作为你的基准黑。这是个小细节,却会产生奇妙的效果。

状态颜色

错误状态:红色的变种。这个颜色提示用户有东西出岔子了。纯红色有点过了,加上少许黄色或蓝色让这个红色看起来更舒服。

警告状态:黄色的变种。这个颜色会让用户警惕错误的发生。别选择太浓烈的黄,我一般选择带点橙色的黄,这样在白色背景上也能很好的看清。

成功状态:绿色的变种。这个颜色提示用户事情进展顺利。我喜欢app中的颜色偏冷,所以我会在绿中加一点蓝色。

从左到右:品牌色,黑色,错误状态,警告状态,成功状态

怎么只有五种颜色呢?因为产品中颜色的选用要十分谨慎,不要没理由地使用某种颜色。在我的设计中,除非我想让用户注意什么东西,否则我会使用大量的黑色和白色。

额外的颜色适合于表格或图片,但请选用你基准颜色之外的颜色。

对象风格

设定这个同样也是为了节省时间。对象,包括了你app中的任何东西,从卡片背景到列表条目背景。下图是我的一些对象风格:

每当我设计对象时我就会调用这些。如果我想更新基准样式,我只需回到这个页面中就能同步我页面中所有的样式了。这真的很节省时间!

3.创建页面和画板

这个很简单,但却能让你理清思路。再开始设计前,先决定如何组织你的设计:

按照功能:在食物app中,你也许需要一整页来存放“食谱”的画板,另一页来存放“个人信息”的画板。

按照用户角色:在阅读app中,你也许需要一页来存放“读者”的画板,而另一个页来存放“投稿者”画板。

按照工作流:在Uber的app中,你也许用一页来存放“订车”这个工作流程,而另一个页来存放“添加信用卡”的工作流程。

这上面提到的都可以,但要尽早决定,并坚持使用一种。

4.建立你的网格系统和布局

网格系统真的很重要。

这些技巧都是为了让你做事更简单,并减少你设计时做决定的次数。

设定好网格系统会让布局和摆放元素变得简单;你甚至不用考虑元素间的摆放距离,因为网格系统都设定好了。

12列的网格仍是使用最多的一种,因为它可以被最多数整除:1,2,3,4,6和12.

下图是一个以8px为基准的网格系统设置的例子:

这是个有着悬浮内容区域的全宽度的app。当浏览器的宽度增加时,这12列网格依然会待在内容区域的中间。

设置网格系统时需要考虑你app的布局(是平铺的还是悬浮的),你可能需要为不同布局的页面分别设定网格系统。

这是个固定宽度(悬浮)的布局结构,有着全宽度的标题栏。

小提示:一般来说,我不设定网格结构中的行,因为每页的行都在变换。但你可以自由选择。

5.导入品牌相关要素

就快完成了!深呼吸一下。

最后要做的,是导入所有的品牌相关要素。也许是一个Logo,也许是一系列的品牌标志。重要的是,你要将它们都转换为Symbol。

想要简单,让它们都变成symbol吧!

为什么?

想象一下,你已经设计了75个带有你的Logo和标语的屏幕。Boss却决定弃用这句标语,那你该怎么办??

好吧,Danny他没有将Logo转换为Symbol,所以Danny不得不分别更新这75个页面。

别学他。

Sandy就聪明多了,她在设计初期就讲这些品牌要素转换成了Symbol。于是分分钟就能全部换掉这些不用的标语。

学着点呀~

至此,所有的准备工作就完成啦,开始你的设计吧!

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

推荐阅读更多精彩内容