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