「Sketch」在Sketch中创建设计系统 | 第一章

原文作者:Marc Andrew原文来自:Medium阅读全文大概需要10分钟相信大家都做过自己的设计规范,无论在个人项目还是团队项目中,设计规范的重要性不言自明,但很多人(不仅是初级UI设计师,也包括很多工作多年的UI设计师们)都有很多困惑,比如,做好的设计规范如何维护?设计规范到底能给项目带来哪些更具体的帮助?在很多人看来似乎设计规范成为了一个“无用的”标配,很多设计规范慢慢被封尘在项目文档中的某个角落里,从此不见天日。实际上我们整...

「Sketch」在Sketch中创建设计系统 | 第一章

原文作者:Marc Andrew

原文来自:Medium

阅读全文大概需要10分钟

相信大家都做过自己的设计规范,无论在个人项目还是团队项目中,设计规范的重要性不言自明,但很多人(不仅是初级UI设计师,也包括很多工作多年的UI设计师们)都有很多困惑,比如,做好的设计规范如何维护?设计规范到底能给项目带来哪些更具体的帮助?在很多人看来似乎设计规范成为了一个“无用的”标配,很多设计规范慢慢被封尘在项目文档中的某个角落里,从此不见天日。

实际上我们整理设计规范并不是目的,如何在实战中进行运用以达到设计的统一性和易维护性才是最终目的,有鉴于此,我们把设计规范用另一个概念进行阐述,我们把它称为“设计系统”,作为系统,你必须有良好的解决实际需求的能力,同时具备良好的可维护性。

今天给大家带来的这个教程就是告诉大家如何构建设计系统,并运用其进行实战的教程,当然更主要的是这背后的设计思路,吸收其理念并合理运用才是这套课程最核心的价值所在

以下为译文部分


我看过很多向你展示如何构建设计系统所需元素的教程,然而这些教程都非常初级,就如你练习时创建的一样。

这就是我想用这个教程所要做的事,这个教程不仅仅会向你展示创建设计系统所需的元素,还要教你如何用我们构建的设计系统去设计多屏iOS应用,并告诉你我是如何构建自己的设计系统以及这背后我的思考过程和决策方法

让我们开始吧,“累地死俺的乡亲们”。


「Sketch」在Sketch中创建设计系统 | 第一章

让我们来看看设计系统

Let's take a look at the design system

在我们开始完完整整的设计一款类Medium(一款类博客应用)风格的iOS app之前,让我首先给大家介绍一下设计系统的sketch文件,这是我们后面几章的教程需要用到的

在格式(初始)文档中我们可以看到这样三个页面

  • Design System (Setup)

  • Symbols

  • Format

让我们从头开始讨论


设计系统

Design System(Step)

「Sketch」在Sketch中创建设计系统 | 第一章

这就是我们的起点,一个魔法发生的地方,在你项目中使用的90%以上的样式都可以在这里进行控制。

你可以在此调整元素样式,例如,基本颜色或版式,这些更改将影响到你的整个设计中。

这些样式更改将会影响到的Symbols页面(稍后我们会谈到),当然它也会影响到你当前正在进行设计的画板(Artboards)中。

在这个页面里,有两个画板

  • Colors(颜色) + Overlays(叠加) + Duotone(双色调)

  • Typography (我们会在第二章提到这个画板)

颜色 + 叠加 + 双色调

Colors + Overlays + Duotone

「Sketch」在Sketch中创建设计系统 | 第一章

在此画板中,你能够看到我已将所有与颜色相关的资源组织在一起,例如基色,叠加和图像效果(在本例中为双色调效果,如果你的设计中运用的是其他的图像效果,你同样可以举一反三地进行添加)。

在我的Cabana设计系统(注:“Cabana”是本文作者自己做的一套设计系统,该设计系统是收费使用的,个人版是48美刀,团队版是63美刀,项目地址是“https://cabanadesignsystem.com/”。选择鱼还是渔,你可以自己权衡,毕竟每个人手里的银子还是有差别的。)中,我做了更多的分离,其中颜色画板只包含基色和颜色叠加层,诸如双色调之类的元素则被分到另一个标签名为Various的画板(Artboard)中,该画板还包括渐变、阴影等设计元素。但为了完成本教程的核心目的,我把它们组织得更紧凑了一些。大家可以理解吧?


基色

Base Colors

「Sketch」在Sketch中创建设计系统 | 第一章

在本教程中,你将看到只有四个基色被用于我们的iOS app设计中。当然,如果你正在构建你自己的系统,并且是在一个大型项目,那么相信你会很明智的去创建你要的基色来覆盖这些基础色(下面是一些建议)。

Primary

Secondary

Tertiary

Black

Grey

Light Grey

Success

Warning

Error

你可以根据你自己的需要调整上述列表,例如去掉“Tertiary”,或增加另外一种灰色,或是一些你觉得能让你的设计系统支撑更多项目的颜色。

好,回到对基色的讨论中,让我告诉你一些关于如何在自己的系统中使用图层样式来设置基色的技巧。

第一步

首先让我们来着重看看主色(Primary Color),尤其是边框样式,我创建了一个200×200的矩形(Rectangle-R),移除掉填充,用十六进制色值给它一个1px的边框,另外再加一个4px的圆角

「Sketch」在Sketch中创建设计系统 | 第一章


第二步

然后我简单的创建了一个图层样式


「Sketch」在Sketch中创建设计系统 | 第一章

将其命名为“Border / Primary”


「Sketch」在Sketch中创建设计系统 | 第一章

第三步

为了制作主色填充,我再次创建了一个200×200的矩形(Rectangle-R),应用刚刚使用的十六进制色值为其进行填充,并给它一个4px的圆角


「Sketch」在Sketch中创建设计系统 | 第一章

第四步

然后创建一个新的图层样式,命名为“Fill/Primary”


「Sketch」在Sketch中创建设计系统 | 第一章

第五步

接下来我把刚刚画的两个矩形对齐(上下左右对齐,也就是重叠起来)。你可能会问为什么要这么做?

这样做让我们在使用这套设计系统时,可以轻松、干净的修改边框和填充色的图层样式。(边框和填充分离开,可以方便对其进行单独修改,这样可以让你更方便的使用图层样式,每个图层样式就做一件事)

它占用更少的屏幕空间,并允许你做更多的事,以便你更快的作出修改,这比把这些元素东放一个西放一个的乱放要强得多。

之后,当我把所有的基色及其关联的图层样式都调整到位后,我会锁定标题(例如:Primary、Black、Grey等等)。


「Sketch」在Sketch中创建设计系统 | 第一章

这样我就有了一个准确的标题可以让我参考,例如,我要对主色做相关修改,那么我只需要看到标题为Primary的颜色,拖动鼠标选中它,按要求作出相应修改即可,这个过程没有任何痛苦,更没有那种“不不不,我要选择的不是那个元素”的情况发生。它们都在它们该在的地方。

然后我重复上述过程,将之前提到过的其他基色的边框和填充创建出来,并将“Border/Primary”和”Fill/Primary”锁定到位。


颜色叠加

Color Overlays

「Sketch」在Sketch中创建设计系统 | 第一章

颜色叠加的运用是本教程的另一个内容,我创建了一个纯黑色的叠加层。

它可以轻松的叠加在任何图像上来帮助形成对比,它的十六进制色值取自“Black”基色(就是之前创建的基色)以保持一致性。

就像我在基色那节提到的一样,不要让让你的设计系统五颜六色,你应该尽可能的让你的叠加层匹配几个主要的基色(即之前创建的基色),比如下方这几个基色。

Primary

Secondary

Black (现在我们的教程中就在使用这个例子)

让我来说一说我是如何再一次利用图层样式在我的设计系统中进行颜色叠加层的设置的。

我将主要以之后的教程中需要用到的黑色颜色叠加层为例讲解。

第一步

我简单创建了一个432×248的矩形(这是我随机选择的尺寸,你可以设置任意你向要的尺寸),加一个4px的圆角(这个值也是个人喜好,我只是认为它在美观度上会更好些),把之前“Black”基色的十六进制色值复制过来,并把不透明度调整为60%。

「Sketch」在Sketch中创建设计系统 | 第一章

第二步

然后我创建一个新的图层样式,并命名为“Overlay/Black”


「Sketch」在Sketch中创建设计系统 | 第一章

现在我把它放置在那了。因为叠加层在99%的时间都是叠加在图片上的,所以在叠加图层样式边上加上一个预览样例应该会是更聪明的做法。这样我可以更好的衡量叠加层在实际使用时的状况,就像我提到的,叠加层是在图片上的,我们可以调整不透明度知道我们满意为止。

让我告诉你我是如何实现这一点的。

首先我创建了一个和之前颜色叠加图层一样尺寸的矩形,并给它做图片填充(image fill)。


「Sketch」在Sketch中创建设计系统 | 第一章

创建一个新的矩形图层,尺寸与图片的矩形图层一致,并为其应用“Overlay/Black”图层样式,然后把这个叠加层放在图片上。


「Sketch」在Sketch中创建设计系统 | 第一章

就像上面提到的一样,我现在就已经拥有了一个参考样例,也就是图片在使用叠加层时的效果的参考样例,我可以调整这个图片上的叠加层的不透明度,直到我满意为止。


双色调

Duotone

最后,关于双色调图像,我在Cabana设计系统中共创建了9个风格变体,但在本教程中我们只关注其中一种双色调风格

是的,像双色调和渐变等都是为视觉表现添彩的,它们不像基色和阴影一样是设计系统的必要元素,但我仍然把它们放了进去,为什么不呢?你永远都不会知道你的哪个项目会用得上它们。(这里需要说明一下,你需要先对你项目的整体视觉风格做一个定义,然后再决定添加哪些视觉层的东西,比如国内很多项目实际上并未使用视觉表现层的元素,永远记住设计系统应该首先考虑的是它如何为你的项目服务,而非其本身的视觉丰富度。)

好,在我们这一章教程的最后,让我来向你展示一下我是如何在我的设计系统和Sketch格式(初始化)文件快速创建一个双色调图片的,我们把这个叫做奖励环节。

第一步

就像我之前在制作叠加图层的参考样例时所作的一样,创建一个矩形,并为它进行图片填充。


「Sketch」在Sketch中创建设计系统 | 第一章

第二步

然后增加几个额外的颜色填充(如下图所示),并调整混合模式,直到达到“双色调”的效果为止。在格式(初始化)文件的例子中包含了一些这样的样例。

#041674 & Lighten(减淡模式)

#1EDE81 & Multiply(增强模式)


「Sketch」在Sketch中创建设计系统 | 第一章

「Sketch」在Sketch中创建设计系统 | 第一章


第三步

接下来我简单的调整了“填充检查器”的列表顺序(如下图所示),得到了如下效果。


「Sketch」在Sketch中创建设计系统 | 第一章

作为参考我们要给它起一个响亮的名字(比如:绿色地精),是的,我的机智是无限的。


好的,本章教程到此就结束了,第二章教程我会为大家讲解文本排版元素,以及我们如何将这些文本排版元素组合在一起并加以运用的。请大家关注第二章教程。



「Sketch」在Sketch中创建设计系统 | 第一章





原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36549/

(0)
交互精选交互精选
上一篇 2018-04-19
下一篇 2018-04-19

相关推荐

  • 多功能福彩APP用户体验调查问卷

    近日,湖南省福彩中心在全省7100多个彩站安装使用“智慧福彩APP”。该APP具有申领热敏纸、报修设备故障、发布活动公告、发布开奖公告、发布消息通知等功能,并服务于彩站具有各站点详情、销售目标、巡检劝人、评价管理员、问卷调查、意见反馈的功能,从而实现“福彩中心”、“市场管理员”、“彩站站主”、“彩民”、“社会公众”五者间的互通互联。彩站或彩民们有任何意见建议或技术方面的问题,均可通过该APP上报省中心,为中心机构与站主、彩民之间搭建了桥...

    2018-04-24
  • 【曝光台】用户体验不佳 “海带宝”屡遭投诉

    导读凭借业内领先的电子物流平台和遍布全球的优质物流资源,海带宝为全球跨境电商、代购平台提供一站式综合进口物流解决方案。然而,据“电子商务消费纠纷调解平台”(微信ID:DSWQ315)接到的用户投诉维权案例统计,“海带宝”存在提现等待队伍长、转运速度慢、用户体验不佳等问题。电子商务研究中心(100EC.CN)了解到,深圳海带宝网络科技股份有限公司成立于2013年8月,是一家基于互联网智能化物流解决方案的高新技术企业,国内现有员工300余名...

    2018-04-26
  • UED 招聘,多个职位给你更多选择!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-03-05
  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • UED新刊 | 马岩松:梦露十年

    UED105期《MAD国际实践专辑》现已开始预售更有30本马岩松亲笔签名版,只限预售!具体购买详见文末互动福利PART 1新刊导读尽管频频有人发问,中国建筑为何迟迟未能冲出亚洲、走向世界,然而这是个太过深广的课题,涉及文化、经济、 政治、意识形态等等诸多方面,并不是三言两语甚至是一期杂志就能说清楚的。在这样的大背景下,马岩松和他的MAD 建筑事务所在国际上的实践探索,便分外独树一帜、另人瞩目。2004年,马岩松在纽约创办MAD建筑事务所...

    2018-02-07
  • 简约至上--交互设计四策略

    无所不在的产品简单设计人们喜欢简单、值得信赖、适应性强的产品。复杂的产品很难吸引人。所有不必要的功能都是要付钱的。简单并不意味着欠缺或低劣,也不意味着不注重装饰或者完全赤裸裸。而是说装饰应该紧密贴近设计本身,任何无关的要素都应该予以剔除。四个策略以DVD遥控器设计方案为例.删除:去掉所有不必要的按钮,直至减到不能再减。组织:按照有意义的标准将按钮划分成组。隐藏:把那些不是最重要的按钮安排在活动仓盖之下,避免分散用户注意力。转移:只在遥控...

    2018-02-09
  • 新零售下的智能终端设备全链路用户体验设计分析

    作者:阿里UED/丹妮2017年被称作是新零售的元年,阿里巴巴集团CEO张勇提出的“新零售”概念,提出通过大数据、互联网重新构造“人、货、场”场景,数字化技术已被逐渐应用在传统实体零售的每一个环节。在小店业态中,智能终端设备成为收集大数据的唯一通道,被互联网行业视为重中之重,而在纷杂的POS市场中,绝大部分都是沉重的桌面式收银POS机器,这时智能移动POS机作为收银POS机器的补充设备应运而生,智能移动POS机以移动便捷、功能齐全等优势...

    2018-01-31
  • 产品经理如何有效学习产品课程?

    很多想要成为或者刚刚成为互联网产品经理的人会自己学习一些大牛分享的课程,阅读一些推荐书籍,但是学完之后经常会有好像很有收获但是却又不知道收获了什么的感觉,产品经理如何有效学习产品课程呢?以下是我自己在进行产品学习时的一些经验。1、多体验产品一个好的产品经理首先自己一定是一个好的用户,只有多体验产品,多思考产品背后的设计理念和价值,自己才能设计出优秀的产品。我们公司有个资深产品经理,他设计的产品日活已经上亿,公司当时还奖励公司员工每日一盒...

    微信热点 2018-03-06
  • 交互设计师必须知道的五大交互设计流程

    交互设计又称互动设计,从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点。同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充,交互设计还涉及到多个学科,以及和多领域多背景人员的沟通。其实,交互设计需要做的事情也不是一成不变的,它会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别。下面我就在马海祥博客上...

    微信热点 2018-03-16
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08