Currently the visual design expert of the Tencent Reading Group YUX experience design team, mainly responsible for the design of the starting point reading products under the group, leading a number of design optimization projects; the visual workflow optimization plan proposed by the team and a number of design perspectives and precipitations It has been widely promoted and used within the group, and many public account articles have been widely disseminated. As a lecturer within the group, many internal sharing has been organized, and many inter-company exchange meetings have been held and shared.
In the past, he has served as the domestic technical support team of the World Skills Competition (WSC) and the experience design instructor of the "Website and Development" project. He mainly counsels parameter contestants under the age of 18 in China and provides them with design-related teaching; Master Software, as a visual designer, responsible for the experience design of Casino (confidential project) projects. Obtained excellent reading (5 stars) staff in 2017; has a patent for yuewen-font font; a patent for designing the seal of the starting point for reading. He graduated from the Industrial Design Department of Jilin Animation Institute.
Design tools affect design efficiency, and design methods change the design process; increasing design value means constantly optimizing efficiency and methods to create more possibilities.
本次工作坊内容将要:
1、组件化设计思维导向设计
采用 Sketch、Figma 等支持组件库构建的工具进行设计工作,已然事半功倍。
通过构建了云端合作的工作机制解决了项目周期冗长的问题,设计稿全部通过组件库构建,并将设计稿、组件库全部上传云端,解决了效率低、合作难的困境,通过云端协作设计内部效率倍增。
2、组件库的构建要素
2.1 完整的组件设计方案:组件库的构建框架思路
「起点读书」组件库框架下拥有的三个主类,组件库 UIComponents、资源库 Assets、样式库 DesignToken。
2.1.1 组件库 UIComponents:组件库为所有组件的集合,是整个组件系统的核心部分。大致细分下拥有 General、Navigation、DataEntry、Data Display、Feedback、等类型组件。
2.1.2 资源库 Assets:资源库为可复用设计资源的集合,包含图标、插画、字体等资源。
2.1.3 样式库 DesignToken:样式库为描述视觉的属性与值的集合,包含颜色、字体、阴影、栅格、间距等变量实体。
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、-
2、-
3、-
1、-
2、-
3、-