CN108563424A - 一种与开发者协作的模块化和敏捷式界面设计方法 - Google Patents

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

Info

Publication number
CN108563424A
CN108563424A CN201810331546.3A CN201810331546A CN108563424A CN 108563424 A CN108563424 A CN 108563424A CN 201810331546 A CN201810331546 A CN 201810331546A CN 108563424 A CN108563424 A CN 108563424A
Authority
CN
China
Prior art keywords
website
design
interface
teacher
page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201810331546.3A
Other languages
English (en)
Inventor
吴晔
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Bao Zun Agel Ecommerce Ltd
Original Assignee
Shanghai Bao Zun Agel Ecommerce Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Bao Zun Agel Ecommerce Ltd filed Critical Shanghai Bao Zun Agel Ecommerce Ltd
Priority to CN201810331546.3A priority Critical patent/CN108563424A/zh
Publication of CN108563424A publication Critical patent/CN108563424A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/10—Requirements analysis; Specification techniques
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

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

Claims (5)

1.一种与开发者协作的模块化和敏捷式界面设计方法，其特征在于，所述方法如下：
用户体验设计师产出用研报告：使用各种用研方法，针对网站的目标产出可用的用研报告，提供给交互设计师、界面设计师、开发工程师、产品经理以及客户作为参考；
界面设计师设计组件模板：包括各种组件、按钮、下拉常用元素；
交互设计师设计网站原型：根据功能需求和交互效果、用户体验完成网站原型的设计；
界面设计师构建网站页面：结合网站模型，用研报告，使用预先设计好的模块组件构建网站所有页面的界面，如有未预设计的组件则予以补充；
前端工程师构建静态页面：利用SPICE框架组件，将界面设计师完成的网站页面构建HTML静态页面；
开发工程师搭建网站：根据静态页面和网站原型，进行数据构建，完成网站搭建。
2.根据权利要求1所述的与开发者协作的模块化和敏捷式界面设计方法，其特征在于，界面设计师根据以往网站的实践操作经验，对重要的关键页面进行分解，以组件模块为单位进行设计，每个功能模块设计1至3种不同设计风格，以供组合选择。
3.根据权利要求1所述的与开发者协作的模块化和敏捷式界面设计方法，其特征在于，用户体验设计师通过各种途径进行前期的用户研究和竞品分析调查，结合过往的网站设计实践经验，产出设计网站前的用户体验方案。
4.根据权利要求1所述的与开发者协作的模块化和敏捷式界面设计方法，其特征在于，交互设计师根据网站所属方的实际需求、愿景，结合用户体验方案，设计制作网站的交互原型。
5.根据权利要求1所述的与开发者协作的模块化和敏捷式界面设计方法，其特征在于，搭建网站时，首先需要根据网站架构的常用功能需求，参考过往的用户体验实践方案，由界面设计师使用sketch软件制作网站常用模块的组件，每个组件本身具备三至五种不同的设计风格，常用组件模块通过简单的拼接组合成完整的单个页面，并进行细节的少量调试；多个单页面根据网站架构进行组合，从而构建成最终的网站界面，并由前端工程师构建全网站静态页面；之后交付给开发工程师进行数据配置开发，并配合前端工程师组的效果调整，快速生成实际可使用的网站。
CN201810331546.3A 2018-04-13 2018-04-13 一种与开发者协作的模块化和敏捷式界面设计方法 Pending CN108563424A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810331546.3A CN108563424A (zh) 2018-04-13 2018-04-13 一种与开发者协作的模块化和敏捷式界面设计方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810331546.3A CN108563424A (zh) 2018-04-13 2018-04-13 一种与开发者协作的模块化和敏捷式界面设计方法

Publications (1)

Publication Number Publication Date
CN108563424A true CN108563424A (zh) 2018-09-21

Family

ID=63534923

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810331546.3A Pending CN108563424A (zh) 2018-04-13 2018-04-13 一种与开发者协作的模块化和敏捷式界面设计方法

Country Status (1)

Country Link
CN (1) CN108563424A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109343828A (zh) * 2018-09-26 2019-02-15 武汉空心科技有限公司 快速交付的软件用户界面设计方法及系统
CN109857375A (zh) * 2018-12-25 2019-06-07 上海尼好系统集成有限公司 一种匹配后端开发测试的前端开发系统
CN110083336A (zh) * 2019-03-08 2019-08-02 江苏博敏网络科技有限公司 一种高效率创建定制化网站的方法
CN110895461A (zh) * 2019-11-21 2020-03-20 望海康信(北京)科技股份公司 软件研发管理方法、装置、电子设备及存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106775769A (zh) * 2017-01-16 2017-05-31 北京恒华伟业科技股份有限公司 一种界面设计沟通系统及浏览器
WO2017197178A1 (en) * 2016-05-11 2017-11-16 OgStar Reading, LLC Interactive multisensory learning process and tutorial device
CN107894887A (zh) * 2017-06-25 2018-04-10 平安科技（深圳）有限公司 页面组件化方法、装置及计算机可读存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2017197178A1 (en) * 2016-05-11 2017-11-16 OgStar Reading, LLC Interactive multisensory learning process and tutorial device
CN106775769A (zh) * 2017-01-16 2017-05-31 北京恒华伟业科技股份有限公司 一种界面设计沟通系统及浏览器
CN107894887A (zh) * 2017-06-25 2018-04-10 平安科技（深圳）有限公司 页面组件化方法、装置及计算机可读存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
绿LVGREEN: "《新手科普！前端开发、交互、视觉是怎么分工合作的？》", 《HTTPS://WWW.UISDC.COM/DEVELOPMENT-INTERACTIVE-VISUAL-DIVISION-OF-LABOR-COOPERATION》 *
聆小一: "《界面组件化设计》", 《HTTPS://ZHUANLAN.ZHIHU.COM/P/25210402》 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109343828A (zh) * 2018-09-26 2019-02-15 武汉空心科技有限公司 快速交付的软件用户界面设计方法及系统
CN109857375A (zh) * 2018-12-25 2019-06-07 上海尼好系统集成有限公司 一种匹配后端开发测试的前端开发系统
CN110083336A (zh) * 2019-03-08 2019-08-02 江苏博敏网络科技有限公司 一种高效率创建定制化网站的方法
CN110895461A (zh) * 2019-11-21 2020-03-20 望海康信(北京)科技股份公司 软件研发管理方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN108563424A (zh) 一种与开发者协作的模块化和敏捷式界面设计方法
CN107870600B (zh) 一种智能车间透明监控方法及系统
CN103425778B (zh) 一种数据库应用系统的智能化开发平台
CN109492875A (zh) 基于bim的施工现场角色管控方法
CN106557860A (zh) 一种流程处理方法及装置
CN106874570B (zh) 虚拟现实座舱工程模拟器
CN108536491A (zh) 一种车载设备反向控制安卓移动终端的处理方法及系统
CN104407576A (zh) 一种通用型的生产制造单元的实现方法及控制系统
CN108960963A (zh) 一种建筑设计管理系统及方法
CN110058756A (zh) 一种图像样本的标注方法及装置
CN104391703B (zh) 快速完成页面布局的装置和方法
CN104199971A (zh) 基于标准知识框架的可视化情报分析方法及系统
CN105701593A (zh) 集产品批次运行、监控、维护于一体的配方功能模块
CN111914325B (zh) 一种基于bim技术的高炉炉体框架结构模型信息交互的方法
Adam et al. Building crop models within different crop modelling frameworks
CN104537168A (zh) 面向设备功能的综合监控仿真培训系统模型数据管理方法
CN103699016A (zh) 全范围模拟数字化控制系统初始工况的生成方法
CN106372359B (zh) 一种设备虚拟样机系统
Winter et al. Implementation strategy for the ITER plasma control system
CN101110022A (zh) 一种工作流模型的软件实现方法
CN109360612A (zh) 流行病学调查信息管理系统
CN110287243A (zh) 分布式数据实时采集与展示系统及方法
CN108874980A (zh) 基于搜料网平台的搜料价格的实时分析方法及装置
CN107872352A (zh) 一种网管系统的性能测试方法、装置及系统
CN108615500B (zh) Led跨平台显示的控制方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20180921

RJ01 Rejection of invention patent application after publication