[建议收藏]组件化设计思维 提升设计团队的生产力
作者:亚博网站登陆 发布时间:2021-03-15 15:55
本文摘要:组件化设计思维,能够提升设计团队的生产力,让设计师专注于设计上的创意,同时让设计师完成更多产物需求和提升团队的相同效率写在前面 组件化设计的流程,经由实际事情的磨炼和思考,详细可以拆分为 3 个方面:1. 明确组件化设计的内容。2. 场景设计走查。 3. 组件化设计验证效果。一. 组件化设计的案例(界面展示篇) 小结:组件化设计,需要设计师要有一个整体性的设计思维,要有很强的设计能力和良好的相同协作能力,同时设计师要深入明白业务,这样组件化设计才气很好的在团队内落地推行。

亚博网站登陆

组件化设计思维,能够提升设计团队的生产力,让设计师专注于设计上的创意,同时让设计师完成更多产物需求和提升团队的相同效率写在前面 组件化设计的流程,经由实际事情的磨炼和思考,详细可以拆分为 3 个方面:1. 明确组件化设计的内容。2. 场景设计走查。

3. 组件化设计验证效果。一. 组件化设计的案例(界面展示篇) 小结:组件化设计,需要设计师要有一个整体性的设计思维,要有很强的设计能力和良好的相同协作能力,同时设计师要深入明白业务,这样组件化设计才气很好的在团队内落地推行。组件化设计的优点有许多,能够提升设计师的输出效率,让设计师更专注于设计上的创意思考,提升相同效率。

二. 原子设计方法论原子设计方法论是由外洋设计师 Brad Frost 提出的,他从化学元素周期表中获得启发,发现原子联合在一起,可以形身分子,然后形成组织。Brad 把原子设计的方法论应用到界面设计中,用心视察会发现,界面是由一些基本的元素组成,颜色、文字、图标等都是一个个原子。原子设计方法论,是由原子、分子、组织、模版和页面配合协作,可以资助我们缔造出一套切合公司产物的设计系统。

原子设计方法论是为了资助我们去建设设计系统,现在逐渐被海内外的一些大公司,应用于建立统一的公司产物设计系统。接下来,我们以金融产物为例 ,对原子设计方法论举行拆解,深入思考原子、分子、组件、模块和页面在界面设计中的界说是什么,以及对应的元素是什么,元素之间又是如何组合的。原子用户界面设计中的原子,是组成界面的基本元素。

是一个单独的元素,如图标、标题、色彩等以及原子之间组合形成的新的元素组合。我们开展一个项目时,为了保证各个页面保持统一的设计气势派头,我们会制定一套视觉规范,界说的内容包罗:字体、颜色、栅格和图标,这些就是界面中最基础的原子。

在关键的设计元素上,保证各个设计师告竣一致,这样就能很大水平的保证差别页面的设计气势派头统一,并在这个基础上去探索更有价值和创意的设计方案。分子两个原子即可组成一个分子,以按钮为例:包罗了文字、色块、栅格。文字转达寄义,颜色界说了按钮的特性,栅格为按钮界说了一个尺寸和规范。

把单独的元素做一个简朴的组合,是我们做界面设计的一种方法,组合的方式简朴且可复用性很好,作为开发者可以凭据规则举行编写代码,提升产物的迭代效率和产物的一致性。界面设计中的表单为例,表单是一个很是常见的设计元素,一个表单分子由支解线、文案、Icon和支解线等原子组成。

原子组合之后,可以获得是一个可以应用在功效模块的组合。组织我们把分子和原子做组合,就可以建立庞大的、可扩展性的模块,然后酿成一个组织。组件在提升设计师设计效率方面有着很重要的意义,设计师可以把界面中常用的组件模块举行分类整理,好比:图片、卡片、输入框等,可以解决设计师日常的设计需求。

以金融产物为例,基天职为 3 类 :内容、表单、卡片化的设计。每个卡片化的内容设计只管保持统一性,这样利便卖力差别模块内容的设计师复用同一个组件,就可以完成差别页面的设计,提升项目的设计效率。模板模版一般应用在设计系统的交互阶段,保证原型阶段的多方案的展示;模版内容,后面可以优化,这样可以降低设计的成本。

模版的价值可以让设计师,更专注于页面的结构化设计排版和对页面结构的思考。那模版的原理是什么呢?就是产物的原型图,就是组织和分子的组合,会先形成一个完整的页面框架,作为一个开端的设计方案,作为团队项目的前期相同所用。以教育和金融界面为例,如下图:界面界面设计是把占位符内容替换成产物设计需要的文案,在模板的组合上举行完善,会形成界面的设计方案。界面设计是模板的详细的展示设计,是真实内容的设计方案。

通过图标和文字的组合,清晰的展示用户所需要的场景,加上内容,就会酿成一套完整的界面设计方案。如下图所示:以金融产物的场景设计为例,有了实际的内容后,我们可以发现通过组合组件,就能很好的出现界面内容。

如下图所示:小结:原子设计方法论为界面元素提供了应用规则和组织整理,原子设计方法论在建设设计系统、团队协作、产物迭代优化等方面,都有很好的价值和意义。三. 组件化设计的流程 ?设计规范和 Ui kit 是我们治理一个或多个App统一性和设计效率的工具,同时探索如何更有效的提升设计效率。像 滴滴等Ant Design 设计系统,他们的产物体验很是好,用户使用产物时能够有效的满足其需求,良好的用户体验背后都有着一套好的产物设计系统在运作。

如下图,外洋的金融产物运用组件规范化后的界面设计展示 :系统性的组件化设计思维的利益是 :1. 产物设计迭代优化时,版本和版本之间的差异性就可以获得很好的解决。2. 界面设计之间的设计气势派头和设计样式就会统一。3. 界面设计的效率和质量会稳定输出。在我们所经常使用的 App 产物中,如 苹果、Airbnb、自如、Ant Design 等,用户体验都很是好,用户使用产物时能够快速的解决需求,优质的用户体验背后都有着一套强大的专业设计系统所资助。

思考:我们为什么需要组件化设计 ?一. 统一产物设计体验1. 以京东金融为例,在京东金融最近更新的版本中,我们看到财富界面和生活界面,同样的模块可以复用,对于复用性高的内容,应该提炼为通用组件,提高设计效率。2. 如上图所示,对于会员专区或者热门运动是金融类产物中最为常见的产物形式,在京东金融的首页泛起,结构往往是左右结构,或者上下结构;因为这类产物具有较强的引导属性,所以会把右侧的运营的插画设计相对突出。


本文关键词:建议,收藏,网页版登陆界面,组件,化,设计,思维,提升,团队,的

本文来源:亚博网站登陆-www.tenpieces.net

电话
0634-89213850