UI
选课中心 APP下载
当前位置:首页 > 技能类 > UI > 组件化思维-提高设计效率等

组件化思维-提高设计效率等

更新时间:2020-08-04 19:59:16 来源: 阅读量:

【摘要】 组件化思维-提高设计效率等考必过小编为大家整理了关于组件化思维-提高设计效率等的信息,希望可以帮助到大家!

组件化思维-提高设计效率等

一 、组件化设计的案例展示 :

二 组件化设计系统的定义 :

原子设计理念(搭建设计系统)

原子设计理论帮助我们搭建设计系统,创建统一和富有层次的设计系统。

原子设计有国际设计师Brad将这个概念应用到界面设计中,界面是由元素组成,文字,颜色和图形等。

由原子、分子、组织、模版和页面共同协作,创造出统一和富有层次的设计系统。

我们以金融产品为例:对原子进行拆解:原子、分子、组件、模版和页面在界面设计中的如何定义的。

原子

用户界面的原子,就是构成界面的基本元素。可以是一个单独的元素,如标题、图标或输入框等以及原子之间组合形成的任何元素。

分子

分子是原子组合建立的元素,两个原子即可组成一个分子,以按钮为例:包含了文字、色块、图标、栅格。

组织

每个条目和表单的内容的设计形式尽量保持统一,因此负责不同内容模块的设计师只要选择同一个组件就能完成界面的设计,在短时间内完成项目,提升团队设计效率。模版模版的意义在于可以专注于页面的内容结构布局,模版内容随时可以调整,模版在设计系统中承载的作用是保证设计方案在原型阶段的多样性。界面通过图标和文字的组合清晰的展示用户需要的场景,加上内容,变成了界面设计。

小结:原子设计为界面元素提供了应用规则和组织整理,这套方法论可以建立设计系统、团队协作、产品迭代有很好的价值。

三、为什么建立组件化设计系统 ?

设计规范和UI kit 是我们管理一个或多个App统一性和设计效率的工具,也是探索如何更有效的提升设计效率和产品体验的效果。像滴滴等Ant Design 设计系统,他们的产品体验非常流畅,用户使用产品时能够有效的满足需求,在其良好的体验背后都有着一套好的设计系统运作。

四 如何建立组件化设计系统 ?

每个团队的体量和业务诉求不一样,个性化的组件化设计系统包含有设计原则、设计语言和组件库,这是一个争议的概念。

设计原则(设计理念、品牌指导)

设计的本质是解决问题,制定设计原则时要建立在这个设计中心思想上。

苹果的设计系统:

把审美作为第一要素存在于设计原则中。

1 创意审美的重要性。

2 隐喻。

3 用户可控制。

4 及时的反馈。

5 可直接清晰的操作。

安卓的设计系统: 

1 跨平台的设计适配原则。

2 材料是一种隐喻。

3 图形、强调、大胆的设计语言。

4 运动提供设计价值。

设计语言(色彩、字体、栅格、图标)

色彩的视觉语言规范,我们需要定义产品的基础色板和中性色板,基本色板包含了产品的主题色和辅助色,生成每个颜色的亮色和暗色的衍生色。中性色板包含黑白灰,这类颜色在界面设计中使用,能让页面内容具有良好的层次关系,提升阅读的效率和用户体验。

字体规范是界面设计中的构成之一,用户通过文字来理解和达成目标,完整的字体系统能有效的提高用户的体验和理解效率。字体的规范定义需要从三个方面出发:字重、灰度色、字阶。

界面设计的排版布局一般使用的 8 栅格法,它能适配不同尺寸的屏幕分辨率,界面元素大小和间距都是8 倍数为基准。

图标设计,隐喻,保持图标之间一致的设计风格和表现形式。系统图标为例子:以1@x图为例子,常见的尺寸有:12px、16px、24px、32px、48px.

五、组件化设计流程和Banner组件化设计、B端组件化设计的应用:

组件化设计的流程,具体可以拆分为3个方面:定义内容、场景走查和效果验证。

1 明确组件化设计的内容。

在开发新项目的时候,同样可以调用一套界面设计体系,不仅能保证产品上体验的统一,还能降低设计和开发的成本。

2 全面的场景走查。

在设计的时候要考虑每一个设计环节,比如:弹窗,元素的高度统一,这样的优势在于,只要改变组件的部分元素就能适配各种场景。修改内容,也能实现良好的扩展性。设计过程中,不断总结,不断的丰富组件库。

3 效果验证。

一是 组件是否满足各业务上的需求,是否覆盖更多的场景,通用性法则。二是 通过定性数据追踪组件是否促进业务的关键指标提升,转化率等,用户的反馈,帮助用户解决问题的体验设计。

组件化设计,能很好的解放团队设计师的生产力,更专注于设计创意,实现个性化的设计价值,更好服务于用户体验。

以上就是组件化思维-提高设计效率等的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

分享到: 编辑:liuying

UI关键词