组件化思维——有效推行方案落地的设计提升
主讲人
  • 杨雪松 杨雪松 阅文集团 视觉设计专家

    现任腾讯阅文集团YUX体验设计团队视觉设计专家,主要负责集团旗下起点读书产品的设计相关内容,主导过多项设计优化工程;在团队中提出的视觉工作流优化方案以及多项设计观点、沉淀在集团内部得到广泛推广和使用,作为集团内部讲师组织过多次内部分享,参加多次企业间交流会并进行过分享。曾任职上海群硕软件担任视觉设计师,负责Casino(保密项目)项目体验设计相关内容。拥有 Yuewen-Font 字体专利,起点读书印章 Logo 设计专利。

    设计工具影响设计效率,设计方法改变设计流程;提升设计价值就是不断优化效率、方法以创造更多可能性。


组件化思维——有效推行方案落地的设计提升

4008人点赞
场次 E4
会议室 302B
时间 待定
内容形式 工作坊
语言 中文
类别 设计思维
主讲内容
内容介绍

互联网寒冬下,居安思危可能是近年互联网人的普遍行业状态,每一个风吹草动都绷紧着我们的神经。在此环境下,作为设计师的我们都在寻求量化设计,寻求突破职能边界的方法。那么在当前企业环境下,设计师如何提升自身价值,如何扩大自身对业务产品的影响力?

通过对阅文各项目组(起点读书、QQ阅读、作家助手等)迭代流程的分析,我们定位了项目迭代时间冗长、效率低下、合作艰难等核心问题。在此过程中,我们经历了设计师推动设计环节内流程变革,通过组件化设计思维对组内设计工具、协作方式等进行优化。最终解决核心问题,并以点破面推动项目团队变革,提升设计价值。

本次工作坊的组件化思维分为组件库构建方式、展示程序的构建与实际效用两个部分。组件库构建方式旨在为设计师提供参考,提升搭建效率与通用性。主讲人会以「起点读书」的组件库为实际案例,从设计工具、框架思路等来介绍组件库,之后延伸到组件的分类方式、命名、排版等为大家介绍如何构建高效通用的组件库。展示程序的构建与实际效用将为参会者介绍可交互的「起点读书组件展示程序」的构建指南与功能效用。

本次工作坊内容将要:
1、组件化设计思维导向设计的介绍

2、组件库的构建要素
2.1 完整的组件库构建框架思路:
2.1.1 组件库:组件库为所有组件的集合,是整个组件系统的核心部分。
2.1.2 资源库:资源库为可复用设计资源的集合,包含图标、插画、字体等资源。
2.1.3 样式库:样式库为描述视觉的属性与值的集合,包含颜色、字体、阴影、栅格、间距等变量实体。

2.2 组件化思维
2.2.1 构成组件的判断标准:万物皆可组件化,但不必万物皆组件,简单来说,当一个 Style 被重复使用后,这个 Style 才拥有被设计为组件的意义。
2.2.2 组件的分类:功能、位置、属性、大小、形状等皆可能是组件的分类。
2.2.3 业务组件的判断与构建方式:当某个组件与产品业务相关,且仅在当前产品中拥有一定复用性,即可归为业务组件。
2.2.4 功能套件的归档与组合:当某个组件通常以业务能力来使用,且可在多项目中出现时,即可称之为功能套件。

2.3 样式库的构建思路
2.3.1 颜色、字体、阴影 样式库构建:使用标签分类法。
2.3.2 栅格的实际运用法:项目内拥有至少一套栅格标准,所有的组件需按照栅格标准构建,且栅格拥有一定可调性。
2.3.2 间距的统一化管理:间距的数值可采用嵌套型命名法进行统一管理。

3、组件化思维的业务转变:展示程序
3.1 展示程序的构建思路:组件库是展示程序的前提条件,是组件库在项目中的效果体现,组件库的框架结构影响展示程序的构建。
3.2 展示程序的功能:可交互的组件在线构建、测试、调用平台。
3.3 展示程序的能力拓展:展示程序作为独立程序,可单独测试未上线方案的可行性和视觉效果;可作为视觉中台化工具快速构建新的独立App并快速上线。

4、项目总结
4.1 组件化思维导向设计:
通过工具以及组件化思维提升设计团队人效。
4.2 组件化的构建要素:
以实际项目为基础,构建高效、通用的组件库。
4.3 组件化思维的业务转变:
以组件化思维为基础,以业务产品为载体,提升设计价值的设计案例。

环节安排

1、工作坊主题导入:运作流程以及规划流程
2、破冰游戏
3、内容讲授:发现矛盾点-解决方案-方案成果-突破边界
4、案例分析与实践:分组实践,带领大家一同进行方法实践、归纳与组件库输出
5、项目点评&评选方案

目标听众

1、交互设计师(适合3年以上从业经验)
2、视觉设计师(适合2年以上从业经验)
3、Web/Android/iOS前端工程师(适合3年以上从业经验)

参会获益

1、了解组件化思维对项目流程的影响,了解《组件展示程序》App 对产品设计的价值;
2、学习如何能在项目中更有效的推行设计方案;
3、理解设计边界,如何做到设计增值和商业变现;

作品案例
  • 展示程序产品图
  • 起点读书产品图
  • 项目流程
  • 设计研发协作方式
猜你喜欢
  • 展示程序产品图 14
  • 起点读书产品图 24
  • 项目流程 34
  • 设计研发协作方式 44
联系客服
官方公众号×
添加IXDC官方微信,可以直接在线沟通 公众号ID:ixdcorg

长按识别二维码添加微信公众号

复制公众号ID长按二维码保存图片