一种与开发者协作的模块化和敏捷式界面设计方法技术

本发明专利技术涉及一种与开发者协作的模块化和敏捷式界面设计方法，所述方法如下：用户体验设计师产出用研报告：界面设计师设计组件模板：交互设计师设计网站原型：界面设计师构建网站页面：前端工程师构建静态页面：开发工程师搭建网站。其优点表现在：能最大程度地利用过往的用户体验最佳实践方案，减少大量的重复界面设计工作，用最少的人力资源完整多个页面的界面设计组合，迅速地产出网站页面交付到下一阶段进行开发集成。同时还能有效减少测试相关工作人员检测前端静态页面及设计稿图样之间不一致的时间。模块化的组件使用方便，风格可通过多种模板定制，具有定制化的自由度。可为网站搭建和开发减少人力资源成本、提高人效、缩短网站搭建周期。

A modular and agile interface design method for developers

The present invention relates to a modular and agile interface design method in collaboration with developers. The method is as follows: User Experience Designer Output Research Report: Interface Designer Design Component Template: Interactive Designer Design Website Prototype: Interface Designer Builds Website Page: Front End Engineer Builds Static Page: Development Engineers build websites. Its advantages are: to maximize the use of past user experience best practices, reduce a large number of repetitive interface design work, with the least human resources to complete the interface design of multiple pages portfolio, quickly output web pages to the next stage of development and integration. At the same time, it can effectively reduce the time for testing related staff to detect inconsistencies between static front-end pages and design drawings. Modular components are easy to use, and styles can be customized through various templates, with customized degrees of freedom. The website can be built and developed to reduce the cost of human resources, improve human effectiveness and shorten the period of website building.

【技术实现步骤摘要】
一种与开发者协作的模块化和敏捷式界面设计方法
本专利技术涉及界面设计
，具体地说，是一种与开发者协作的模块化和敏捷式界面设计方法。
技术介绍
基于在构建电子商务网站时，相同的业务逻辑会产生相对较为相似的功能模块，具备类似的功能。过往的方法是macOS系统下使用矢量图形设计软件sketch，以及SPICE前端组件框架，这需要界面计师重复设计大量网站的界面，然后通过前端技术构建页面，并交付至开发进行网站的构建。例，在网站的商品详情页面不同的商品具备数量选择的功能，在不同的网站上需要重复设计并制作数量选择插件，不利于快速构建页面，容易产生大量的重复设计、前端构建工作。另一个问题在于类似功能模块在大量实践中获得的良好用户体验流程，难以在其他网站内被复用。中国专利文献CN201410046760.6，专利名称为：图控界面设计系统及其图控界面设计操作方法，揭露一种图控界面设计系统及其图控界面设计操作方法，其为具可跨系统移植特性，可用来设计图形化即时监控系统的系统及方法。本专利技术的命令转译模块，其负责转译图控界面设计方法与整合的异质系统间命令内容，以符合本专利技术定义的命令交换传递规范，达到可跨系统移植整合的特性。上述专利文献的编辑器，以自行开发的元件进行监控系统画面编辑设计，提供系统管理者可即时修改系统画面与元件参数界面，与可快速建立元件与受控单元的对应关系的机制，达到提升监控系统开发效率。该专利技术的检视器，向受控单元取得即时监测数据，并更新元件状态后呈现整体的运转画面，再由自行开发的控制界面，对受控单元进行控制命令执行。但是，关于一种解决项目开发过程中，界面设计环节与实施易脱节的问题。使界面设计能更加快速有效地为开发实施提供稳定的支持的技术方案则无相应的公开。综上所述，需要一种解决项目开发过程中，界面设计环节与实施易脱节的问题。使界面设计能更加快速有效地为开发实施提供稳定的支持的与开发者协作的模块化和敏捷式界面设计方法。而关于这种界面设计方法目前还未见报道。
技术实现思路
本专利技术的目的是针对现有技术中的不足，提供一种解决项目开发过程中，界面设计环节与实施易脱节的问题。使界面设计能更加快速有效地为开发实施提供稳定的支持的与开发者协作的模块化和敏捷式界面设计方法。为实现上述目的，本专利技术采取的技术方案是：一种与开发者协作的模块化和敏捷式界面设计方法，所述方法如下：用户体验设计师产出用研报告：使用各种用研方法，针对网站的目标产出可用的用研报告，提供给交互设计师、界面设计师、开发工程师、产品经理以及客户作为参考；界面设计师设计组件模板：包括各种组件、按钮、下拉常用元素；交互设计师设计网站原型：根据功能需求和交互效果、用户体验完成网站原型的设计；界面设计师构建网站页面：结合网站模型，用研报告，使用预先设计好的模块组件构建网站所有页面的界面，如有未预设计的组件则予以补充；前端工程师构建静态页面：利用SPICE框架组件，将界面设计师完成的网站页面构建HTML静态页面；开发工程师搭建网站：根据静态页面和网站原型，进行数据构建，完成网站搭建。作为一种优选的技术方案，界面设计师根据以往网站的实践操作经验，对重要的关键页面进行分解，以组件模块为单位进行设计，每个功能模块设计1至3种不同设计风格，以供组合选择。作为一种优选的技术方案，用户体验设计师通过各种途径进行前期的用户研究和竞品分析调查，结合过往的网站设计实践经验，产出设计网站前的用户体验方案。作为一种优选的技术方案，交互设计师根据网站所属方的实际需求、愿景，结合用户体验方案，设计制作网站的交互原型。作为一种优选的技术方案，搭建网站时，首先需要根据网站架构的常用功能需求，参考过往的用户体验实践方案，由界面设计师使用sketch软件制作网站常用模块的组件，每个组件本身具备三至五种不同的设计风格，常用组件模块通过简单的拼接组合成完整的单个页面，并进行细节的少量调试；多个单页面根据网站架构进行组合，从而构建成最终的网站界面，并由前端工程师构建全网站静态页面；之后交付给开发工程师进行数据配置开发，并配合前端工程师组的效果调整，快速生成实际可使用的网站。本专利技术优点在于：1、本专利技术通过矢量设计软件，结合前端组件框架，对界面设计进行模块化结构结构设计的方法。通过模块化和敏捷式的界面设计方法，快速且简便地构成网页端页面，与开发者进行可视化协作，迅速构建网站。一旦投入应用，可以实现以下技术效果：使用此模块化界面设计方法，能最大程度地利用过往的用户体验最佳实践方案，减少大量的重复界面设计工作，避免设计过程中产生的不统一和疏漏风险，用最少的人力资源完整多个页面的界面设计组合，迅速地产出网站页面交付到下一阶段进行开发集成。同时还能有效减少测试相关工作人员检测前端静态页面及设计稿图样之间不一致的时间。模块化的组件使用方便，风格可通过多种模板定制，具有定制化的自由度。可为网站搭建和开发减少人力资源成本、提高人效、缩短网站搭建周期。2、使用本专利技术的模块化界面设计方式，可以通过少量的模板样式，减少重复进行界面设计的时间和工作量，将最优的用户体验方案复用在类似的功能模块上，提升界面设计的工作效率。同时，此模块化界面设计方式，可将输出物-即页面的界面设计稿-便利地交付于前端工程师，前端工程师可利用SPICE前端组件框架，快速产出静态页面并传递至开发进行最终开发工作，减少界面设计与开发之间的沟通时间。同时，也有利于快速生成网站设计初步方案，便于多人协作的审查和修改。附图说明附图1是本专利技术的模块化界面设计构建网站流程图。附图2是界面设计师设计组件模板的操作界面示意图。附图3是用户体验设计师的操作界面示意图。附图4是界面设计师根据用户体验设计师的网站交互原型的页面进行整配的操作界面示意图。具体实施方式下面结合附图对本专利技术提供的具体实施方式作详细说明。请参照图1，图1是本专利技术的模块化界面设计构建网站流程图。一种与开发者协作的模块化和敏捷式界面设计方法，所述方法如下：用户体验设计师产出用研报告：使用各种用研方法，针对网站的目标产出可用的用研报告，提供给交互设计师、界面设计师、开发工程师、产品经理以及客户作为参考；界面设计师设计组件模板：包括各种组件、按钮、下拉常用元素；交互设计师设计网站原型：根据功能需求和交互效果、用户体验完成网站原型的设计；界面设计师构建网站页面：结合网站模型，用研报告，使用预先设计好的模块组件构建网站所有页面的界面，如有未预设计的组件则予以补充；前端工程师构建静态页面：利用SPICE框架组件，将界面设计师完成的网站页面构建HTML静态页面；开发工程师搭建网站：根据静态页面和网站原型，进行数据构建，完成网站搭建。其中，网站界面设计师根据以往网站的实践操作经验，对重要的关键页面进行分解，以组件模块为单位进行设计，每个功能模块设计1至3种不同设计风格，以供组合选择。这些常用功能模块包含网站最常见的各种组件、按钮、元素等，以功能常用性、利用频率及复用度的由高到低排列，便于交付设计稿后推进至前端、开发工程师使用。【附图2】同时，用户体验设计师通过各种途径进行前期的用户研究和竞品分析调查，结合过往的网站设计实践经验，产出设计网站前的用户体验方案。交互设计师根据网站所属方(品牌方)的实际需求、愿景，结合用户体验方案本文档来自技高网...

【技术保护点】
1.一种与开发者协作的模块化和敏捷式界面设计方法，其特征在于，所述方法如下：用户体验设计师产出用研报告：使用各种用研方法，针对网站的目标产出可用的用研报告，提供给交互设计师、界面设计师、开发工程师、产品经理以及客户作为参考；界面设计师设计组件模板：包括各种组件、按钮、下拉常用元素；交互设计师设计网站原型：根据功能需求和交互效果、用户体验完成网站原型的设计；界面设计师构建网站页面：结合网站模型，用研报告，使用预先设计好的模块组件构建网站所有页面的界面，如有未预设计的组件则予以补充；前端工程师构建静态页面：利用SPICE框架组件，将界面设计师完成的网站页面构建HTML静态页面；开发工程师搭建网站：根据静态页面和网站原型，进行数据构建，完成网站搭建。

【技术特征摘要】
1.一种与开发者协作的模块化和敏捷式界面设计方法，其特征在于，所述方法如下：用户体验设计师产出用研报告：使用各种用研方法，针对网站的目标产出可用的用研报告，提供给交互设计师、界面设计师、开发工程师、产品经理以及客户作为参考；界面设计师设计组件模板：包括各种组件、按钮、下拉常用元素；交互设计师设计网站原型：根据功能需求和交互效果、用户体验完成网站原型的设计；界面设计师构建网站页面：结合网站模型，用研报告，使用预先设计好的模块组件构建网站所有页面的界面，如有未预设计的组件则予以补充；前端工程师构建静态页面：利用SPICE框架组件，将界面设计师完成的网站页面构建HTML静态页面；开发工程师搭建网站：根据静态页面和网站原型，进行数据构建，完成网站搭建。2.根据权利要求1所述的与开发者协作的模块化和敏捷式界面设计方法，其特征在于，界面设计师根据以往网站的实践操作经验，对重要的关键页面进行分解，以组件模块为单位进行设计，每个功能模块设计1至3种不同设计风格，以供组合选...

【专利技术属性】
技术研发人员：吴晔，
申请(专利权)人：上海宝尊电子商务有限公司，
类型：发明
国别省市：上海,31