什么是设计系统?

时间:2021-09-20 00:39 作者:LOL下注平台
本文摘要:经心设计的系统可使设计师的产物(从按钮到单页应用法式)保持一致,从而加速UX / UI设计历程,并改善团队协作。​今天想要与大家分享什么是设计系统,它的主要组成部门以及团队如何从设计系统开发中受益。什么是设计系统?设计系统是设计和代码中的规则,尺度和限制的荟萃。 可以将其视为可轻松更改和更新的设计知识的泉源。在深入探讨设计系统开发的主要步骤之前,先回首一下设计系统和样式指南之间的区别。首先,设计系统不是样式指南。样式指南形貌了产物的视觉样式(其颜色,字体,徽标等)。

LOL竞猜

经心设计的系统可使设计师的产物(从按钮到单页应用法式)保持一致,从而加速UX / UI设计历程,并改善团队协作。​今天想要与大家分享什么是设计系统,它的主要组成部门以及团队如何从设计系统开发中受益。什么是设计系统?设计系统是设计和代码中的规则,尺度和限制的荟萃。

可以将其视为可轻松更改和更新的设计知识的泉源。在深入探讨设计系统开发的主要步骤之前,先回首一下设计系统和样式指南之间的区别。首先,设计系统不是样式指南。样式指南形貌了产物的视觉样式(其颜色,字体,徽标等)。

与样式指南相反,设计系统不仅涵盖视觉出现,还涵盖更多内容。它通过形貌,文档,用例和协作工具来解决样式,基和谐品牌。每个设计系统组件有所差别,详细取决于其用途。

通常,设计系统开发可以分为以下步骤:视觉审核,建立设计语言,建立模式库以及连续的支持。1、外观审核在跳入构建设计系统之前,请先退后一步看一下总体情况。只管不要思量你的设计系统应包罗的内容,而要分析其主要目的和任务,并从团队已经拥有的内容着手。它可能包罗界面元素,样式,CSS属性,文档等。

如果需要为现有产物构建系统,请首先收集所有设计元素并将其分组(凭据它们的类型,功效和用途)。这将为您提供更改,删除或添加内容的完整视图。通过这样做,可以检查自己的位置,拥有的资源以及需要做些什么来改善事情流程。

2、视觉设计语言系统设计语言系统形貌了产物的整体视觉设计。它由颜色,版式,边框和图形等元素组成。颜色形貌用于产物的调色板(例如,其主要和辅助颜色)。

在这里,不仅应该形貌颜色的寄义,还应详细先容该颜色或该颜色的用例(例如,在插图,图形和其他界面元素中)。还应注意颜色对比,因为它会影响用户体验并有助于区分产物元素。

(这里可以借助对比度检查器检查颜色对比度。)https://webaim.org/resources/contrastchecker/调色板也是品牌形象的重要组成部门。在产物中使用的阴影有助于使界面的界说元素变得可识别。用户将相识哪些颜色表现可单击元素,哪些颜色突出显示重要信息。

产物增长的越多,就会在主要设计中添加更多的功效和元素。这就是为什么界说明确的颜色,图形和文本系统将有助于产物维护其标识并简化UX / UI设计服务流程的原因。版式排版是任何设计系统的焦点要素。

字体系统形貌每种字体的主要参数:名称,巨细,高度,颜色,粗细,间距等。不要忘记指出如何在整个产物中使用字体并形貌每种字体的用途。选择字体样式时,主要任务是转达内容条理结构,引导用户会见重要和有用的信息以及使产物易于识别。尺寸和间距巨细和间距部门形貌了网格参数,元素之间的间距,组件放置等。

它使网站设计系统更易于使用,并确保在所有页面上都保留相同的样式。图形在产物中使用图形:形貌设计中图像的巨细和比例,使用图形的注意事项以及产物中该图形或该图形的用例以及它们转达的信息。3、整理至库将所有建立的元素收集到一个库中,并删除不须要的元素和形貌。详细技巧:通知开发人员有关库的任何更改作为团队的整体信息泉源。

所有团队成员都应密切注意界面元素及其形貌的最新版本。允许会见团队中的每小我私家所有团队成员都应该能够随时打开库以查找所需的信息。将元素转换为代码这将加速产物开发和进一步的增长。

支持设计系统提供设计系统及其元素的详细说明,以便每小我私家都可以随时相识任何更改。此形貌还将有助于新团队成员的入职。4、设计系统开发中的主要错误为了使设计系统乐成并改善设计与开发之间的过渡,适用于团队中的每小我私家。这是设计系统开发中应制止的最大错误:对设计系统组件接纳过于庞大的元素使用设计系统的每个组件来构建更庞大的模块应该很容易。

LOL下注平台

这将使系统具有可伸缩性。设计系统不仅涉及图像和代码。它还促进了设计人员,开发人员和产物司理之间的相同。忽略其他团队成员的反馈在将时间和精神花费在设计系统上之前,请与团队中的每个成员攀谈并讨论他们的需求和期望。

这将有助于制止事情流程中的障碍,并为设计系统的每个用户建立一致的体验。为了使设计系统满足多个产物团队的需求,需要概述主要的设计原则。召开一次简短集会,写下所有这些原则,并使其成为你的设计系统观点的基础。

不兼容的尺度设计人员或开发人员经常使用自己的微型组件。只管它可以在短期内带来价值,可是随着产物的增长,它将导致纷歧致和效率低下。5、产物设计系统的主要优点产物扩展和战略制定凭借设计系统,产物团队可以从构想到公布都可以建立一致的产物。可重用的结构还可以在扩展产物规模和革新计谋时提供资助。

节约时间和成本设计系统加速了设计到开发的周期,并有助于节约资源。设计人员不必重新开始,而可以使用预先准备的组件。他们还可以节约建立组件的时间,专注于更庞大的任务。

产物设计一致性设计系统使产物外观一致,提高品牌知名度,简化产物支持和测试并增强用户体验。设计版本中的实时更改设计元素只有一个泉源,可简化开发人员,设计师和其他团队成员的事情,因为任何更改都可以实时看到。设计文档还简化了新成员的入职历程,并使每小我私家都在同一页面上。

前端开发人员可以轻松使用和复制组件样式。因此,每个设计系统都市建立一组限制,因为在建立新元素时不能偏离它们。这就是为什么强大的设计系统应该可扩展并与产物一起增长的原因。设计系统不仅仅是一组元素。

每个页面,屏幕,组件和元素都应具有奇特的目的和目的。整个系统形貌了支持整个产物使命的主要原理和设计方法。牢记这一点,将开发一个适用于团队和产物的设计系统。

本文由WELLDESIGN独家原创,未经授权请勿转载。


本文关键词:LOL下注平台,什么,是,设计,系统,经心,设计,的,系统,可使

本文来源:LOL竞猜-www.jinweibra.com