同步系统ui设计规范课件

同步内网系统UI设计规范TB同步内网系统UI设计规范TB1问题Issues同步内网系统UI设计缺乏统一的UI风格，最终实现的效果对原设计稿的还原度偏低，导致内网系统界面设计风格混乱，视觉效果差1.UI风格交互体验没有统一，存在着不同应用交互不一致的问题2.交互体验现有的UI组件功能不完整，易用性欠缺，甚至有时使用的组件风格与原系统不一致3.UI组件项目开发时相同组件复用性低，甚至将时间浪费在改组件、控件样式上4.影响开发效率问题Issues同步内网系统UI设计缺乏统一的UI风格，最终2解决方案HOW同步内网系统UI设计制定设计规范整理设计规范，形成设计规则，确定界面UI风格，统一交互方式使用统一的前端开发框架选择一个满足需求的前端开发框架从产品设计到开发，形成统一的UI风格以及交互方式统一常用交互组件从开发框架所提供的UI组件中，选择需要常用的组件作为产品交互元件来设计产品原型好处：1.快速形成统一的产品交互原型2.功能完整的UI组件库，一致的UI风格和交互体验3.提升沟通效率，减少无用的重复工作解决方案HOW同步内网系统UI设计制定设计规范整理设计规范，3目的Purpose同步内网系统UI设计专注产品本身产品统一交互形式，简化交互方式，提升用户体验交互统一界面风格，提升界面美观度，规范界面设计，降低重复性工作UI提升开发效率，组件化开发，提升界面还原度，提高组件复用性开发目的Purpose同步内网系统UI设计专注产品本身产品统一交4同步内网系统UI设计风格指南同步内网系统是一个复杂的企业级产品，功能复杂。这类产品中存在许多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的目的，本风格指南基于MaterialDesign和AntDesign的设计语言，通过模块化的解决方案，解决重复的生产成本，让设计师和开发者能专注于“更好的用户体验”，并逐步形成统一的同步内网系统风格。同步内网系统UI设计风格指南同步内网系统是一个复杂的企业级产5原则Principles同步内网系统UI设计同步内网系统的产品期望给用户传达的是快速、高效的意向，因此在设计时，应该突出直观、高效、简洁、数据驱动的特点。因此这里提出UI设计四大基本原则和交互四原则。彼此相关的项应当靠近，归组一起。如果多个项之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为用户提供清晰的结构。亲密性任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。对齐

原则Principles同步内网系统UI设计同步内网系统的产6同步内网系统UI设计对比的基本思想是，要避免页面上的元素太过相似。对比是增加视觉效果最有效的方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户能快速识别关键信息。对比相同的元素在整个界面中不断重复，不仅可以有效的降低用户的学习成本，也能增加条理性，加强统一性。重复同步内网系统UI设计对比的基本思想是，要避免页面上的元素太过7同步内网系统UI设计简化不意味着最少化，而是减少冗余步骤和干扰项，简化操作方式，优化操作过程。简化交互在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增加用户和界面的沟通。巧用过渡同步内网系统UI设计简化不意味着最少化，而是减少冗余步骤和干8同步内网系统UI设计用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈的量级越大、重要性越高。即时反应每一个优秀的设计中都应用了这些设计原则，它们之间是相互关联的，只应用一个原则的情况很少。一点说明能在这个界面解决的问题，就不要去其他页面解决，因为任何页面刷新和跳转，就像在看戏时，演员说一句台词就安排一次谢幕一样。足不出户同步内网系统UI设计用户进行了操作或者内部数据发生了变化，系9同步内网系统UI设计亲密性纵向间距示例组合排布示例复选框内示例同步内网系统UI设计亲密性纵向间距示例组合排布示例复选框内示10同步内网系统UI设计对齐文案类对齐表单类对齐数字类对齐同步内网系统UI设计对齐文案类对齐表单类对齐数字类对齐11同步内网系统UI设计对比静态对比用不同的颜色来表明不同的状态动态对比鼠标悬停时，该项和其他项呈现出明显不同的视觉效果同步内网系统UI设计对比静态对比动态对比12同步内网系统UI设计重复线框重复示例设计要素重复同步内网系统UI设计重复线框重复示例设计要素重复13同步内网系统UI设计简化交互实时可见工具示例开关显示工具示例同步内网系统UI设计简化交互实时可见工具示例开关显示工具示例14同步内网系统UI设计巧用过渡对象更改示例对象删除示例对象增加示例同步内网系统UI设计巧用过渡对象更改示例对象删除示例对象增加15同步内网系统UI设计即时反应实时搜索实时预览按钮加载列表加载同步内网系统UI设计即时反应实时搜索实时预览按钮加载列表加载16同步内网系统UI设计足不出户非重要的删除提示重要的删除确认提示列表内文本修改同步内网系统UI设计足不出户非重要的删除提示重要的删除确认提17样式Style同步内网系统UI设计动态体系化适配主流分辨率可切换式导航栏统一空间布局布局中性色强调色主色颜色字体大小行高字重字体颜色统一字体字体图标字体系统图标图标样式Style同步内网系统UI设计动态体系化适配主流分辨率可18模式Patterns同步内网系统UI设计信息框架完整的设计模式将会包含功能示例、模板、组件三大实体部分功能范例：由多个模板构成模板：页面级示例，启发用户如何通过组件搭建出系统中的页面组件：包括基础组件和业务组件模式Patterns同步内网系统UI设计信息框架19文案Copywriting同步内网系统UI设计使用简单、直接、易于理解的词汇，让内容和指示更加容易被用户接受和理解。04使用熟悉的语言使用阿拉伯数字代替文字，有一个例外是混合使用数字的时候，例如“两个3s”01使用“1，2，3”让用户第一眼看到最重要的内容，不用到段落中寻找。05重要的信息放在显著的位置避免使用“绝不”和其他绝对性的词语02不要说“绝不”直接使用【你】、【我】来和用户说话，避免使用【您】06拉近彼此的距离省略无用词汇，不重复用户已知事实03精简语言文案Copywriting同步内网系统UI设计使用简单、直接20反馈Feedback同步内网系统UI设计警告提示通知提示气泡卡片文字提示反馈Feedback同步内网系统UI设计警告提示通知提示气泡21反馈Feedback同步内网系统UI设计加载状态反馈录入反馈气泡确认反馈Feedback同步内网系统UI设计加载状态反馈录入反馈22反馈Feedback同步内网系统UI设计顶部全局提示反馈对话框反馈反馈Feedback同步内网系统UI设计顶部全局提示反馈对话23AntDesign一个服务于企业级产品的设计体系。基于【确定】和【自然】的设计价值观，通过模块化的解决方案，让设计者专注于更好的用户体验。查看AntDesign一个服务于企业级产品的设计体系。基于【确24谢谢End谢谢End25同步内网系统UI设计规范TB同步内网系统UI设计规范TB26问题Issues同步内网系统UI设计缺乏统一的UI风格，最终实现的效果对原设计稿的还原度偏低，导致内网系统界面设计风格混乱，视觉效果差1.UI风格交互体验没有统一，存在着不同应用交互不一致的问题2.交互体验现有的UI组件功能不完整，易用性欠缺，甚至有时使用的组件风格与原系统不一致3.UI组件项目开发时相同组件复用性低，甚至将时间浪费在改组件、控件样式上4.影响开发效率问题Issues同步内网系统UI设计缺乏统一的UI风格，最终27解决方案HOW同步内网系统UI设计制定设计规范整理设计规范，形成设计规则，确定界面UI风格，统一交互方式使用统一的前端开发框架选择一个满足需求的前端开发框架从产品设计到开发，形成统一的UI风格以及交互方式统一常用交互组件从开发框架所提供的UI组件中，选择需要常用的组件作为产品交互元件来设计产品原型好处：1.快速形成统一的产品交互原型2.功能完整的UI组件库，一致的UI风格和交互体验3.提升沟通效率，减少无用的重复工作解决方案HOW同步内网系统UI设计制定设计规范整理设计规范，28目的Purpose同步内网系统UI设计专注产品本身产品统一交互形式，简化交互方式，提升用户体验交互统一界面风格，提升界面美观度，规范界面设计，降低重复性工作UI提升开发效率，组件化开发，提升界面还原度，提高组件复用性开发目的Purpose同步内网系统UI设计专注产品本身产品统一交29同步内网系统UI设计风格指南同步内网系统是一个复杂的企业级产品，功能复杂。这类产品中存在许多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的目的，本风格指南基于MaterialDesign和AntDesign的设计语言，通过模块化的解决方案，解决重复的生产成本，让设计师和开发者能专注于“更好的用户体验”，并逐步形成统一的同步内网系统风格。同步内网系统UI设计风格指南同步内网系统是一个复杂的企业级产30原则Principles同步内网系统UI设计同步内网系统的产品期望给用户传达的是快速、高效的意向，因此在设计时，应该突出直观、高效、简洁、数据驱动的特点。因此这里提出UI设计四大基本原则和交互四原则。彼此相关的项应当靠近，归组一起。如果多个项之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为用户提供清晰的结构。亲密性任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。对齐

原则Principles同步内网系统UI设计同步内网系统的产31同步内网系统UI设计对比的基本思想是，要避免页面上的元素太过相似。对比是增加视觉效果最有效的方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户能快速识别关键信息。对比相同的元素在整个界面中不断重复，不仅可以有效的降低用户的学习成本，也能增加条理性，加强统一性。重复同步内网系统UI设计对比的基本思想是，要避免页面上的元素太过32同步内网系统UI设计简化不意味着最少化，而是减少冗余步骤和干扰项，简化操作方式，优化操作过程。简化交互在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增加用户和界面的沟通。巧用过渡同步内网系统UI设计简化不意味着最少化，而是减少冗余步骤和干33同步内网系统UI设计用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈的量级越大、重要性越高。即时反应每一个优秀的设计中都应用了这些设计原则，它们之间是相互关联的，只应用一个原则的情况很少。一点说明能在这个界面解决的问题，就不要去其他页面解决，因为任何页面刷新和跳转，就像在看戏时，演员说一句台词就安排一次谢幕一样。足不出户同步内网系统UI设计用户进行了操作或者内部数据发生了变化，系34同步内网系统UI设计亲密性纵向间距示例组合排布示例复选框内示例同步内网系统UI设计亲密性纵向间距示例组合排布示例复选框内示35同步内网系统UI设计对齐文案类对齐表单类对齐数字类对齐同步内网系统UI设计对齐文案类对齐表单类对齐数字类对齐36同步内网系统UI设计对比静态对比用不同的颜色来表明不同的状态动态对比鼠标悬停时，该项和其他项呈现出明显不同的视觉效果同步内网系统UI设计对比静态对比动态对比37同步内网系统UI设计重复线框重复示例设计要素重复同步内网系统UI设计重复线框重复示例设计要素重复38同步内网系统UI设计简化交互实时可见工具示例开关显示工具示例同步内网系统UI设计简化交互实时可见工具示例开关显示工具示例39同步内网系统UI设计巧用过渡对象更改示例对象删除示例对象增加示例同步内网系统UI设计巧用过渡对象更改示例对象删除示例对象增加40同步内网系统UI设计即时反应实时搜索实时预览按钮加载列表加载同步内网系统UI设计即时反应实时搜索实时预览按钮加载列表加载41同步内网系统UI设计足不出户非重要的删除提示重要的删除确认提示列表内文本修改同步内网系统UI设计足不出户非重要的删除提示重要的删除确认提42样式Style同步内网系统UI设计动态体系化适配主流分辨率可切换式导航栏统一空间布局布局中性色强调色主色颜色字体大小行高字重字体颜色统一字体字体图标字体系统图标图标样式Style同步内网系统UI设计动态体系化适配主流分辨率可43模式Patterns同步内网系统UI设计信息框架完整的设计模式将会包含功能示例、模板、组件三大实体部分功能范例：由多个模板构成模板：页面级示例，启发用户如何通过组件搭建出系统中的页面组件：包括基础组件和业务组件模式Patterns同步内网系