网站导航

溶剂萃取仪

当前位置:主页 > 产品展示 > 溶剂萃取仪 >

《设计系统》 第二章,慢慢设计你的设计系统“万博手机版max网页版登录”

产品时间:2022-10-16 22:01

简要描述:

《设计系统》 第二章,慢慢设计你的设计系统 这是彩云的第136篇分享 这篇文章来自于invision出品的书籍,围绕规划、设计、构建和实现设计系统的实践履历来指导读者,个中包罗了经验富厚的专家的真知灼见和一手经验。我很喜欢,也分享给大家,推荐阅读。这将会会一个系列,一共有7章,感乐趣的话,连续存眷吧。 书籍的常识深度是设计漫笔无法比的,这篇文章比力长,但发起耐烦看完,假期也别健忘给本身充充电。...

详细介绍
本文摘要:《设计系统》 第二章,慢慢设计你的设计系统 这是彩云的第136篇分享 这篇文章来自于invision出品的书籍,围绕规划、设计、构建和实现设计系统的实践履历来指导读者,个中包罗了经验富厚的专家的真知灼见和一手经验。我很喜欢,也分享给大家,推荐阅读。这将会会一个系列,一共有7章,感乐趣的话,连续存眷吧。 书籍的常识深度是设计漫笔无法比的,这篇文章比力长,但发起耐烦看完,假期也别健忘给本身充充电。

万博手机版max网页版登录

《设计系统》 第二章,慢慢设计你的设计系统 这是彩云的第136篇分享 这篇文章来自于invision出品的书籍,围绕规划、设计、构建和实现设计系统的实践履历来指导读者,个中包罗了经验富厚的专家的真知灼见和一手经验。我很喜欢,也分享给大家,推荐阅读。这将会会一个系列,一共有7章,感乐趣的话,连续存眷吧。

书籍的常识深度是设计漫笔无法比的,这篇文章比力长,但发起耐烦看完,假期也别健忘给本身充充电。当别人都在刷剧游戏时,你在学常识,必定赚大了 ~ 译文: 去开始着手设计一个设计系统往往会让人感应害怕,有太多工作需要思量——设计气势派头,奈何模块化和可适配化地举行设计,它将如何被其他团队使用,以及如何向公司的决议者鞭策这个想法。到底要从哪一方面开始着手设计呢? 要解决大问题,可以将它剖析成若干小问题。在进入设计流程之前,首先需要思量好到场设计系统的成员以及团队的协作方式。

一旦找到合适的人组建团队,你就可以开始思考系统的设计语言了,包罗颜色排版,间距等等。视觉设计语言将会是UI样式库的基础——一系列能被快速组装并形成界面的组件。此刻我来分享下,如何开始一步一步设计你的设计系统吧。

一、谁应该介入 在你开始设计系统的事情之前,花点时间思量一下你需要的团队,谁需要介入。你需要的不仅仅是设计师。

以下是一份清单,枚举了创建一个高效的设计系统所需要的团队成员技术: · 界说设计系统视觉元素的设计师 · 创建模块化、高效代码的前端工程师 · 确保你的系统切合WCAG等尺度的可用性专家 · 可以或许帮忙团队确定系统声音和语调的内容计谋师 展开全文 · 帮忙你相识客户需求的用户研究员 · 可以确保系统在所有设备上能快速载入的机能专家 · 确保设计系统切合客户需求的产物司理 · 在整个公司内带领和调解方针的带领者 当你确保在设计系统团队中拥有上述技术的各种人才后,请确定每个范畴的卖力人。这些人应该可以或许确保决议得以鞭策。相识设计系统团队中支撑各自范畴的成员。

在强有力的带领下,拥有一支由专家构成的团队,你的下一个任务就是成立正确的团队模式来帮忙你实现方针。1)选择正确的团队模式 将人们堆积在一起互助的团队模型与创建设计系统团队一样重要,在“一个设计系统的团队模型”中,设计系统的资深人士Nathan Curtis归纳综合了3个被很多公司使用并风行的团队模型。独立式团队模型:“霸主”办理设计系统。图1:独立式设计系统团队模型—— 1人节制一切。

图片由Nathan Curtis提供。集中式团队模型:单个团队将设计系统作为全职事情来维护。图2:集中式设计系统团队模型——一个团队办理系统。图片由Nathan Curtis提供。

结合式模型:来自整个公司的团队成员堆积在一起开辟系统。图3:结合式设计系统团队模型——来自差别团队的人员堆积在一起办理设计系统。图片由Nathan Curtis提供。

上述的团队模型都有相应的优势和劣势。独立式模型当然高效且响应迅速,但一小我私家办理的工作太多,主卖力人会成为完成诸多任务的瓶颈。

另一边,集中式模型可以很好的维护系统,可是这个团队与客户需求的相同可能不如他们对用户研究的介入那么精密。最后,结合式团队模型对来自用户需求和产物特性的需求有很好的洞察力,但这个小组可能会忙于除了构建设计系统以外的事情。

很多团队正在从独立式的模型转向集中式或结合式的模型。正如Curtis在他的文章所提及的那样,单人办理的模式是难以扩展的,集中式或结合式团队模型凡是更合用于扩展设计系统。为了回应柯蒂斯的文章,我写了关于Salesforce团队模型的文章。

当我在Salesforce的Lightning设计系统团队任职期间,我们联合使用了集中式模型和结合式模型。在很多和Salesforce一样大的企业组织中,仅凭一个集中式的设计系统团队是不敷的。由于我们涉及到很是多的关键介入者,并且还跨越了产物和平台的规模,所以需要一种越发可连续的方法。图4:我们在Salesforce中使用的一个混淆式的设计系统团队模型——由一个焦点团队和来自其他团队的成员一起来办理和维护设计系统。

只管Lightning设计系统有一个焦点团队,但Salesfore生态系统中的很多产物和功效范畴也有一些焦点孝敬者,他们来自各个业务部分并构成事情小组,提出新的想法,并要求设计系统不停成长。用户研究员、可用性专家、产物设计师和用户体验工程师与焦点设计系统团队互助,配合使用并帮忙成立模块、组件和整体设计系统。工程师完善所有的代码,以确保系统的机能和包管上线质量。只管由于主卖力人可能会成为团队的瓶颈,在大大都团队中独立式模型不那么受接待,但在某些环境下它可以很好地发挥感化。

米娜·马卡姆(Mina Markham)在为希拉里·克林顿(Hillary Clinton)开辟新的宣传网站时,险些没有时间去争取任何支援。她创建了一个名为Pantsuit的设计系统,帮忙许多处所的团队加速设计和出产物料,同时保持整个竞选运动品牌的一致性。独立式模型让Markham首先存眷的是速度,第二是周期,这可能与典型企业接纳的做法纷歧样。

图5:Pantsuit——米娜·马卡姆(Mina Markham)创建的一个给希拉里·克林顿(Hillary Clinton)竞选运动的设计系统 当你需要决定接纳什么团队模型时,请思量你的方针。假如你想团队可以或许快速响应需求,那么最好使用独立式团队模型,只管以后可能需要做一些事情,以便在其他团队之间完全接纳它。假如你但愿团队不仅可以或许快速响应,而且一开始就勉励大家都介入进来,可以思量集中式团队模型。

而为了得到最大的介入感和共享权,结合式模型是个不错的选择。在任何环境下请记住,设计系统是一个产物,所以要把它当做一个产物,而不是一个项目来做;你需要的是致力于维护和成长它的人。跟着团队和协作模型的成立,此刻是时候开始你的设计系统了。

就像任何新产物一样,开启事情的第一步是与客户举行相同。2)客户调研 与任何产物设计的历程一样,做研究是很重要的。

谁会使用你的设计系统,怎么用?假如你的设计系统是为了共同其他团队的事情流程而创建的,那么它将会被频繁地使用。通过访谈用户,你可以提前锁定问题,界说有助于他人正确使用系统的原则,并将精神集中在最重要的工作上面。个中一个比力少见的调研群体是你产物开源社区的成员。

这类群体会呈现在为客户和互助同伴社区提供开辟者东西的组织里。假如你打算将你的设计系统开源(成为一个潜在的大项目),那么你需要与潜在的孝敬者和消费者交流,以发明你的设计系统需要满意哪些需求和用例。再有就是高管、带领和办理层。

相识他们的想法也很重要。你需要获得他们的支持和资助。倾听他们的要求,并将其作为可执行的方针和指标来实现。

这些要求可能是更快、更好的机能,以及提高UI质量等等。提示:通过实践研究,赋能构建设计规范 Isaak Hayes和Donna Chan在Clarity大会上颁发了题为 "用实践研究来赋能构建气势派头指南 "的出色演讲。个中提出了一系列有用的技巧,可以帮忙你有效地对设计系统举行研究。

通过用户访谈,他们操纵数据创建设计原则、怀抱尺度和用户故事。提示:通过实践研究,赋能构建设计规范 Isaak Hayes和Donna Chan在Clarity大会上颁发了题为 "用实践研究来赋能构建气势派头指南 "的出色演讲。个中提出了一系列有用的技巧,可以帮忙你有效地对设计系统举行研究。

通过用户访谈,他们操纵数据创建设计原则、怀抱尺度和用户故事。有了从客户访谈中获得的资料,我们可以开始举行整理。有两种类型的界面内容清单需要举行整理和规范。· 视觉语言(如间距、颜色和排版)的整理,这将有助于创建一个统一的视觉语言。

· 每个UI元素(如按钮、卡片和排版)的清单,这将有助于创建一个UI组件库。首先我们先来存眷全局视觉元素的整理。二、创建视觉元素清单 固然,假如你正在为一个还不存在的产物启动设计系统,你可以跳过这一步,直接跳到为新产物创建视觉语言那一章。

1)整理视觉元素 当我们开始整理的时候,最好检察一下CSS,对应上述视觉清单内里所有元素举行整理。使用雷同CSS Stats这样的东西来看看你的产物样式表有几多法则和属性。更重要的是,它还会显示你有几多种奇特的元素、字体和字号。

它另有统计图,可以看到间距和巨细值的数量。这是一个很好的方法,可以让你很利便地对样式举行精简。译者注:CSS Stats东西的地址https://cssstats.com/ 译者注:CSS Stats东西的地址https://cssstats.com/ 图6:使用CSS Stats发明Facebook有38种奇特的文本颜色 假如你在Sketch中整理样式规范,可以使用sketchup - style - inventory插件来整合所有颜色、文本样式和符号。

它还提供了归并相似样式的能力。(彩云注:inventory这个插件本来挺好用,但作者太忙,好长时间没更新了,貌似最高只能支持到sketch49) 2)创建视觉设计语言 必需认可,作为一个艺术院校结业的学生,设计系统中的视觉设计语言是我最喜欢的部门。我喜欢思考色彩理论、排版和结构,这些都是任何设计系统的焦点。假如将设计系统的每个组件拆开,我们会发明这些根基元素组成了它的视觉设计语言: · 颜色 · 排版(巨细、字间距、字体等) · 间距(边距,填充,定位坐标,边框间距) · 图像(图标、插图) 按照需求,你还可以插手以下内容,进一步规范用户体验: · 视觉形式(深度、层级、阴影、圆角、纹理) · 动画 · 声音 以按钮这个简朴的组件为例,阐发这些设计元素在个中饰演的脚色。

一个按钮凡是会包罗配景颜色,文字的样式,以及间距。在文字旁边可能会有一个图标用于创建视觉提示。在边沿上的描边可以作为简朴的装饰,甚至可以在边角处做圆角。

最后,悬停在按钮上或点击按钮可以触发动画或声音作为反馈给用户。虽然一个按钮看似简朴,但也需要通过一系列的设计决议才能让它活泼地揭示出来。图7:Buzzfeed Solid设计系统中的各类按钮。

按钮组件应用于点击事件或链接,有以下几种种别:主要、次要、透明、反色、白色、禁用、带图标、社交分享按钮、小型按钮、带图标的小型按钮,以及可以按照本身的需要着色的自界说按钮。3)设计标签 在深入探讨视觉设计尺度之前,我想先接头一下设计标签。设计标签是设计系统实现原子化的基础。

简朴来说,设计标签是一系列样式参数被梳理和归纳后的语义化定名,用于抽象出你要办理的设计属性。由于所有设计标签都存储在同一个处所,可以更轻松地实现一致性,同时减轻办理设计系统的承担。

如:SPACING_MEDIUM: 1rem 在设计标签中,你可以存储颜色、间距、尺寸、动画时长等数据,并将其分发到各个平台。图8:Lightning设计系统中关于圆角设计标签的例子 4)颜色 你为设计系统选择的颜色不仅仅是品牌的延伸,UI使用的颜色更多是用来转达以下信息: · 反馈——错误和乐成的状态 · 信息——图表和导航元素 · 条理——通过色彩和排版显示布局和主次 别的你还需要中性色用于UI配景和边框,凡是是灰色。最后,你要有一系列如错误、警告和乐成等状态的颜色。

将这些颜色组合起来,看看它们在一起显示的效果如何,然后按照需要举行完善。图9:Carbon设计系统中的色板和对应的标签 较大的设计系统有时会给对象和产物添加颜色。比方,在Salesforce,我们春联系人、销售生意业务或组织等模块都有设计对应颜色。

我们也有针对产物的颜色,如销售云、营销云、阐发云等。对于你的用户,颜色能成为一个很好的导航东西。图10:Salesforce中模块使用的颜色 为了包管产物可用性,使用颜色举行区分也会有局限性,因为色盲的人可能无法分辨某些差异。提示:查抄颜色对比度 这里有一个查抄各类颜色对比度的东西供你使用,以确保所有在你产物上使用的颜色具备可用性,必然要查抄配景和文字颜色搭配的对比度。

http://www.webaxe.org/color-contrast-tools/ 提示:查抄颜色对比度 这里有一个查抄各类颜色对比度的东西供你使用,以确保所有在你产物上使用的颜色具备可用性,必然要查抄配景和文字颜色搭配的对比度。http://www.webaxe.org/color-contrast-tools/ 按照于你对色板精细度的要求,你可能会但愿包罗一系列的色阶,需要与白色混淆的辅助颜色以及与玄色混淆的阴影颜色。

有时你可能会用其他颜色取代白色或玄色,以制止颜色变灰,好比用橙色来使黄色变暗,这样就不会呈现棕色。这些颜色的变化让设计师有了选择。

但要注意的是,太多的选择会导致与主设计纷歧致的环境呈现。保持色调、阴影和中性调色板的精简,以防止被滥用,同时又能保持机动性。当你发明需要的时候,你可以随时在色板规模内增加更多的颜色。

图11:Pivota的UI设计规范选择用他们的设计标签给出遍及的颜色色和谐阴影。虽然我小我私家更倾向于给出一组精简的色值规模就足够了(如在Sass设计规范中看到的),但有些设计系统喜欢提供更多的选择。

仔细思量哪种方法更合适自身,因为你需要均衡创意自由和规范一致性等问题。5)字体字体和字重 你所选择的字体会深深影响你的品牌和用户体验,所以需要选择一个易读性的系统字体。一般常见的系统字体,如Helvetica、Times New Roman或Verdana是一个很好的选择,因为用户对它们很是熟悉。一些公司更喜欢定制的网页字体去表现他们的品牌,可是用的时候需要出格注意机能问题。

我事情过的大大都设计系统只包括两种字体:标题和正文都用一种字体,代码用monospace字体。有时标题还会分外多加一种字体,与正文字体相得益彰。

大大都设计系统没有须要再多,除非你的系统支持多个品牌。保持数量精简的字体,不仅是排版设计的最佳实践,还可以防止过分使用网页字体带来的机能问题。图12:谷歌Roboto字体,显示着差别的字重 此刻风行使用很是细的字体,可是要注意可读性的问题。

假如你想使用轻或细的字重样式,尽量在较大的字号环境下使用。字体比例 在选择字体的巨细时,需要思量可读性。

在大大都环境下,16px的字体巨细相当好用。这是大大都欣赏器的默认字体巨细,对大大都人来说,它相当容易阅读。我喜欢使用16px,因为它切合苹果和谷歌使用的基于4为单元的指标(已经逐渐成为尺度方法)。

我发起将此作为你的基准,只管我会在基于CSS的系统中使用它的相对格局,如1rem。你可以使用比例标尺为标题或其他元素提供更大或更小的字体巨细。比例标尺是一组数字,个中你有一个基数,使用一个比率来生成下一个数字。

你不停地将比率应用到新的数字上,从而获得下一个数字。图13:比例标尺东西能帮忙你找到合适本身的基准。它甚至提供了的Sass需要的功效,为你添加成套的设计标签。当你设计字体规模时,必然要思量到它如何应对各类屏幕尺寸以保持可读性。

你不会但愿你的标题在移动设备上被放得很大。而对于其他大得多的显示器,你有足够的空间来晋升尺寸。常见的方法是在大屏幕上放大标题。

你也可以使用视窗单元,按照屏幕巨细的百分比来缩放字体。专业提示:响应式排版 人们使用许多方法来创建响应式排版。最近比力值得一查的是带有CSS Poly Sizing的Fluid方法。

Zell Liew的《响应式网页排版法则》涵盖了需要相识的根基道理和系统。专业提示:响应式排版 人们使用许多方法来创建响应式排版。最近比力值得一查的是带有CSS Poly Sizing的Fluid方法。

Zell Liew的《响应式网页排版法则》涵盖了需要相识的根基道理和系统。CSS中的行距或行高可以晋升排版的可读性和美感。虽然最佳的行高会按照字体和行长的差别而有所变化,但一般的经验规则是领先于字体巨细的1.4–1.5倍。W3C Web Accessibility Initiative发起使用1.5。

段落中的行距至少为半个空格,而且段落间距至少为行距的1.5倍。——Web内容无障碍指南2.0 段落中的行距至少为半个空格,而且段落间距至少为行距的1.5倍。——Web内容无障碍指南2.0 这也使你行高的数值变得更有纪律,但你不需要去计较它。

纵然在没有怀抱单元的环境下界说行高,欣赏器也会帮你完成这些庞大的计较。对于标题的行高,按照字体将其规范化。

万博手机版max网页版登录

在大大都环境下,我发明1.25或1.125的数值很是好。图15: Tachyons(译者注:一款 css 框架)也用1.5作为正文,1.25作为标题。6)间距和尺寸 使用合理的间距和尺寸有利于设计系统看起来更有节拍感。这意味着你需要选择基于规范和比例的单元。

通过计较比率的方式得出的间距和尺寸,使设计系统更容易维护,结构也更合理。当我设计一个Android应用的时候,我研究了谷歌的设计规范。我注意到一个规范,即元素之间使用8dp,外槽使用16dp。

这让我打破了之前使用10作为基准单元的习惯,因为我发明4作为基准单元的效果更好。基于4的单元规范作为推荐单元越来越受接待,原因有许多。首先iOS和Android都使用和推荐被4整除或倍数的单元。尺度的图标巨细格局(大大都操作系统都在使用)往往是基于4的(16、24、32等)单元,这样它们更容易缩放。

欣赏器的默认字体巨细凡是是16。当所有的系统元素都使用了这个尺度的时候,能让你的产物看起来更整齐和规范,响应式的适配效果也会更好。

图16.谷歌的Android设计规范,进修这些规范让我成为了一个更好的移动设备设计师。对于程度间距,以8为基准的单元相当好用。你可以使margin和padding与字体巨细相等或成比例。但对于垂直间距,我倾向于使用基于12的单元尺寸。

由之前所说的1.5行高(默认字体巨细为16px)计较后,得出了24这个数字。偶然你可能不得不打破这个法则。

假如你在某些元素上加了1px的描边,这个描边就会粉碎原本的规范方式,所以你可能需要使用padding或margin去减去这个数量。因此请按照实际环境去打破这个法则。有时你但愿某个元素跟着页面空间放大或缩小,那么除非须要,应该尽量不配置它的宽度和高度。

让元素的尺寸跟着页面空间的变化举行适配,以轻松地实现响应式设计。7)图片文件格局 对于图标和插画,我发明使用矢量格局(SVG)更切合可扩展式和响应式设计的效果。

偶然你需要使用到摄影作品,那么就要用雷同JPG或PNG这样的栅格化图像格局。对于大大都照片、插图和图表,你可以让图像100%显示在容器内。

基于页面主动适配高度,而不需要限定它,这最适合响应式结构。假如你不但愿图片宽度到达全宽(比方半宽、三分之一或四分之一),你也可觉得图片设定一些预设宽度并固定好尺寸,这样图像就可以缩放到更小的屏幕。图标设计 在绘制你的图标之前,先围绕它们提出你的设计法则。

它们是填充还是描边?线条粗细是几多?它们会使用1种以上的颜色吗?它们会是什么尺寸?是否有外部包裹元素? 图17: Oracle Alta 描述的图标样式规范,如透视、间距和颜色。你可觉得差别的图标类型设计差别的样式。

比方通用和操作类的图标(如通知或配置图标)可能是单色的,而导航图标可能是多色、更有创意的。明确的准则将使你的图标保持统一和规范。

图18. 苹果展示了其生态系统中的差别图标类型:应用图标、东西图标以及它使用颜色时的规范。插图 插图是为你的产物增添品牌特色的好方法。

你可以将其用于空状态、加载屏幕、弹窗和其他吸引用户视觉乐趣的组件。Shopify花了很鼎力大举气为其平台的所有空状态页面设计奇特的插图,从而转达强烈的品牌形象。图19:Shopify的缺省页面插画设计 和图标一样,插画的设计规范同样十分重要。

图20:Al Power的插图设计规范。8)视觉形象 视觉形象,又或者叫UI材质,与配景图像、渐变和纹理、阴影和层级、圆角和边框有关。

这些视觉特质有助于强和谐装饰元素,以增加视觉条理和美感。无论如何,所有的这些视觉元素都需要尺度化的指导。Google精彩地展示了纵深和高程如何与组件分层一起事情(图21) 图21.通过z-indexes和阴影实现的Google材质设计中的纵深示例。

9)动画和声音 当你界说视觉规范的时候,第一时间可能不会想到动画和声音。但动画和声音会对产物的使用体验发生很大影响。你会但愿把这些也系统化,以包管一致性。我小我私家对这项范畴并不精通,可是有一些很好的例子。

图22. IBM的动画准则鉴戒了他们富厚的产物和技能汗青。图23.虽然在视觉上没有出格惊艳,但Microsoft将声音API也插手到了他们开辟指南内里。10)创建用户界面库 在我们整理视觉语言之前,我们会检察元素的视觉质量,好比颜色、间距和排版。

此刻我们需要对UI界面的实质部门举行整理,比方按钮,卡片,列表、表单等部门。视觉语言库存眷的是视觉方法和元素在整体视觉条理下的效果,而用户界面库存眷的是UI界面的实际组件。纵观所有设计元素以及它们在设计系统中所饰演的脚色。

盘货产物的所有界面元素,看看你到底需要解决几多设计债务,以及哪些元素是最常用的。温馨提示,这个步骤可能会令人抓狂,因为大大都公司的UI界面里都存在着大量纷歧致的元素。创建盘货清单,只需打开企业的所有产物,截取所有按钮,表格,各类字体,图像的图片,然后将其收集在PPT或整个团队可以看到的大黑板上。

你可以通过打印输出或截图来实现。堆积你的团队成员(第二章所述)。

让他们通过共享演示或动手和你一起整理这个清单。这样做的目的是收集正在使用的所有差别的组件,并对它们举行分类和归并。提示:设计债务 假如你有高管或工程师对设计系统的须要性持怀疑立场,向他们展示你整理的清单,会成为有力的相同东西。提示:设计债务 假如你有高管或工程师对设计系统的须要性持怀疑立场,向他们展示你整理的清单,会成为有力的相同东西。

有些人喜欢将清单的内容划分为元素,组件,模块,实用东西等。原子设计理论作为这种思路的例子,是一个很好的观点模型。可是归根结底,所有的内容根基上都不会超出这个领域,所以你可以按上述的划分贴上标签。

总的来说,我看到的大大都设计系统一般这样划分: · 元素(又称根基元素,或原子)--这些都是小的、独立的组件,如按钮和图标。· 组件(又称分子,或模块)--这些凡是是由小组件组装成一个较大的组件,如搜索表单(包括一个表单输入,一个按钮,甚至另有搜索图标)。· 模块(又称组织)--这些是用户界面的一个区域,就像侧板导航。· 结构--内容在页面上的结构方式(好比头部区域,然后是侧边栏和主要内容区域,然后是页脚) 图24:在《In From Pages to Patterns : An Exercise for Everyone》一书中,Charlotte Jackson先容了举行UI盘货的方法。

在完成清单之后,你可以归并和删除不需要的部门(可以在电子表格内里,假如你想更直接点,甚至可以直接在代码层面举行重构)。同时记载下组件是什么,什么时候使用它。

这将成为你的UI库(又叫样式库、组件库,取决于你的团队喜欢怎么称号它)。图25:美国当局机构18F有一个我最喜欢的UI库:美国网页设计尺度。

大部门设计系统文档包罗组件的名称、描述、实例和代码。除此之外可能还会展示代码、公布汗青、示例等,最重要的是可以或许展示你的团队完成事情所需要的内容。图26:来自Lonely Planet的Rizao组件库 三、总结 打造一个设计系统不仅仅能帮忙你团队的产物更紧跟用户体验,并且还成立了一条相同设计和开辟的桥梁。通过创建一个由设计标签界说的通用视觉语言,以及一系列在组件库中的组件和样式分类,都极大地改善设计师和开辟人员之间的相同,之后你对UI的编辑和更新都将更可控、机动和全面。

原文: https://www.designbetter.co/design-systems-handbook/introducing-design-systems 作者: Marco Suarez 译者: 断浪 译者简介:断浪,互联网冲浪金牌选手 ,热衷外洋设计常识。文章由彩云协助优化及版式编辑。— — —返回,检察更多。


本文关键词:《,设计系统,》,第二章,慢慢,设计,你的,系统,万博手机版max网页版登录

本文来源:万博手机版max网页版登录-www.bbhgjkj.com

 


产品咨询

留言框

  • 产品:

  • 留言内容:

  • 您的单位:

  • 您的姓名:

  • 联系电话:

  • 常用邮箱:

  • 详细地址:

推荐产品

如果您有任何问题,请跟我们联系!

联系我们

Copyright © 2009-2022 www.bbhgjkj.com. 万博手机版max网页版登录科技 版权所有 备案号:ICP备84940589号-9

地址:湖北省宜昌市金门县事平大楼33号

在线客服 联系方式 二维码

服务热线

061-878692011

扫一扫,关注我们