网站内容管理系统后台 设计(统一现有三个系统的视觉+交互规范设计？小二)

　　网站内容管理系统后台 设计(统一现有三个系统的视觉+交互规范设计？小二)

　　后端系统采用一套完整的UI，有利于用户习惯的培养和延续，降低学习成本，提高使用效率，有效提高开发效率，便于功能的优化和扩展。

　　用户是谁？有什么要求？一个项目的交互设计师最基本的理解源于这两个问题。

　　你知道，或者不知道；常态就在那里；不悲伤也不快乐

　　用户是谁？我们的系统是为谁服务的？

　　在初始阶段，它将给我们的第二个孩子。后期会开放系统，外部商家或委托方也会使用我们的系统。所以我们第一次做系统标准化，因为商家或者委托方的信息不可用，所以可以主要针对我们的小辈。

　　我们的小二有什么特点？他们目前输入信息的方法是什么？

　　我们这部分P2的作用可以细分为：认证P2、物流P2、行业运营P2（行业运营P2又分为：采购员、采购员助理、门店运营P2、网站运营P2...）角色来到这个系统是出于不同的目的。行业操作P2主要是输入信息和跟踪订单。物流P2主要用于审批行业P2的申请，跟踪订单，查看报表。认证P2主要用于审核行业P2或商家的申请，跟踪认证状态，分析数据。

　　有什么要求？

　　由于系统发展不平衡，交互资源不足，前端控件没有实现，给用户使用带来了极大的困难。在系统开放过程中，交互、视觉、前端的频繁更换，导致了单个系统交互的差异。当多个系统呈现给同一个用户时，虽然基本框架很好，但运行过程效率低下。

　　解决方案：用户迫切需要一个易于使用的后端系统来提高他们的效率。

　　我们这次规范的目的是统一现有三个系统的视觉+交互规范，然后将前端交付给前端来指定它们的代码规范。让我们迈出第一步，提高我们前两个的效率。

　　你读或不读；常态就在那里；它不会来也不会去。

　　从哪个纬度开始规范设计？

　　1. 控制

　　在计算机编程中，控件（或组件、小部件或控件）是图形用户界面元素。它是一个基本的可视化构件，收录在应用程序中，控制着程序处理的所有数据以及对这些数据的交互操作。

　　基于PARC研究中心对施乐Alto计算机（Xerox Alto）用户界面的研究，逐渐产生了一套收录常规信息的可重复使用的控件。常规控件的不同组合通常封装在一个组件工具箱中，程序员可以构建图形用户界面 (GUI)。大多数操作系统都收录一组用于编程的控件，程序员只需将它们添加到应用程序中并指定其行为即可。

　　组合控制

　　描述：在产品中独立实现特定功能的模块。它的特点是功能比较单一。在结构层和行为层应该有很强的复用性，在表现层应该保持一致性，便于用户识别。. 单个控件可以衍生出多种组合控件，以适应不同的功能操作，如：上传组合控件、列表组合控件。

　　定义维度：控制描述、控制原理图及尺寸、是否用户反馈、设计理念、控制应用。

　　你爱，或者不爱；常态就在那里；它有增无减。

　　2. 框架规范

　　完成第一步控件的基础知识后，第二步的问题是如何使用控件？让控件在场景中发挥作用，冲出整个操作过程。为此，我们要做的就是制定结构和规则，就像使用这些控件来制作建筑物一样。这就是框架规范的作用。

　　在设置框架时，我们必须考虑以下问题：

　　2.1不同的流程和场景

　　由于不同的业务场景和不同的流程，如何定义页面和页面的基本内容块？

　　这里不妨假设流程中遇到的4个基本场景——“创建、查询、编辑、详情、反馈

　　这四种类型的页面使用不同类型的基本控件。通过这四种类型，我们可以连接基本的业务流程。

　　一个。创建和编辑

　　创建和编辑是基础数据的输入和修改。最常用的接口是输入、表单和链接。从屏幕上分成三列。收录大量操作验证和操作提示块。

　　湾 询问

　　查询页面主要使用条件输入操作和查看表单的功能。要求界面操作区和反馈区清晰明了。所以，镜架上有两大区域来保证他稳定使用的习惯。还要考虑各种导出和查看链接。

　　C。弹出页面

　　弹出页面的大小只占整个页面大小的三分之一，所以信息流不会太大，结构也不复杂。

　　d. 信息反馈

　　完成页面操作后，及时反馈操作结果。这里的主要元素是：操作结果+音调粒子+建议的动作。以及相关链接。因此，文本结构和显示是有限制的，和某个信息匹配的图标。

　　2.2 操作

　　与大框架不同的是，这个弹窗的作用是维护当前页面信息对比下的弹窗操作。因此，操作会简单直接，操作次数会保持在3到4次操作之间。然后返回首页继续操作其他的。

　　一个。详情页面

　　详细信息页面是所有操作条件的列表。是过程的结果，所以它的模块分类会更清晰，主要由文本和数字组成，信息层级基本在2-3级。分类也控制在4-5类。如果信息太多，就会有回缩和展开的功能，控制因信息太多而导致无法到达和查找的麻烦。

　　湾 不同的显示器分辨率

　　考虑最常用的1028，和最基本的1024。最常用的数量归结为一个屏幕上的三个控件加上判断和验证和控件的组合，并考虑特殊应用。场景中最有可能的数据和控件会出现在用户在操作页面时最关心的数据时，所以要考虑如何理顺它们在界面中的层次。如何规范当前页面反馈信息所占据的位置和变化。例如，查找并携带搜索到的数据展示，以及上传，在当前页面展示数据展示分类。这些排版规则必须考虑到信息传递的清晰度和信息量。

　　2.3 对整个系统进行数字化和光栅化，方便落地

　　光栅化系统之所以在web端如此适用，是因为当信息和版块过多时，前端链接很容易分块，以保持页面的舒适和整洁。以5个或10个为单位，基本上适合任何排列和切割。无论场景、控制或数据元素多么复杂，都可以以一定的单位计算并平滑排列比例。形成一定的稳定结构。

　　你跟随，或者不跟随；规范掌握在你手中；永不放弃。

　　3. 视觉标准

　　图标：它是具有引导和标记属性的图形。它具有高度集中、快速传达和易于记忆的特点。一个好的图标可以提升视觉，提升体验，更好地与用户交流。必要时，可以给用户明确的提示，引导用户顺利完成操作。

　　设计时要注意：

　　1.保证图形映射的唯一性和可识别性；

　　2. 设计要尽量简单易懂，避免出现多余的元素；

　　3.风格趋于统一；

　　4.尊重习惯，多使用常用图形，以免误导；

　　应注意美观：

　　1.形状由一到三个图形组成，最多不超过3个；

　　2.质地细腻丰富；

　　使用规范：优先使用现有图标；如果现有图标不能满足要求，请严格按照提交流程的要求申请新图标

　　4.前端开发介入

　　前端开发是我们亲密的合作伙伴，所以我们可以尽快招募他们。一方面，他们依靠他们的技术支持和开发建议；另一方面，他们也是受益者。一整套控件库的开发也方便他们调用和管理。

　　5.标准化输出

　　齐心协力，标准化输出，有赖于所有交互设计师的工作和齐心协力，反复沟通讨论，融合统一。

　　V1.0只是一个开始，我们会不断完善和调整这套规范，不断打磨，使其更加完美。

　　来到我的怀抱；或者; 让规范活在你的心中；默默地爱着对方；保持沉默和快乐。

　　以上内容由UPD互动组共同撰写-耿力、吕军、马以新、张克金景