蜘蛛表格2.0改版设计，产品升级迭代遇到的问题和思考

　　蜘蛛表格2.0改版设计，产品升级迭代遇到的问题和思考

　　在小公司，经常遇到的情况是：人力资源短缺、用户数据不足、时间紧迫。在这个现实中，很多方法论的设计者都来不及一一实施，但我们还是要解决问题，面对产品的改版和升级。我们应该做什么？这个文章 将从设计师的角度来谈谈。我们在小公司的时候，如何做产品升级迭代，以及其中遇到的问题和思路，希望对大家有用。

　　项目背景

　　项目名称：Spider form2.0 改版设计

　　项目背景：Gartner在2018年最新报告中提出了hpaPaaS（High Productivity Application Platform）概念。 hpaPaaS 的核心功能是为快速构建适应变化的各类信息化开发提供平台。使用hpaPaaS开发，业务人员可以通过调用平台已有的功能来创建应用的主体部分，达到快速开发的目的。

　　Spider Form，hpaPaas 软件，一站式企业应用构建和协同办公平台。通过可视化建模、可视化UI、可视化权限管理、可视化工作流和业务自动化管理，业务人员可以在云端构建企业所需的定制化业务管理信息系统，无需部署、即时构建、即时上线、即时更新、即时使用、即时为企业创造价值，持续为企业赋能。

　　产品初期，主要围绕用户核心痛点。功能可以从“可用”更改为“有用”。通过前期调研，我们发现用户在使用该产品的过程中发现了很多问题。很多用户认为老版本的蜘蛛桌App在使用体验上有点生硬、陈旧、复杂。

　　所以，对于Spider Form App的设计升级，我们的目标是“让用户更容易使用”。我们需要不断提升每个用户接触点的产品体验，帮助用户更轻松、更高效地完成工作。

　　发现问题，分析问题1.产品难看，为什么难看？

　　2. 用户体验不好，怎么了？ 3.用户上手难，为什么上手那么难？解决问题的现实中人力资源紧张。整个产品团队只有8人，人力资源紧张。紧的。我想在3个月内完成整个修订并上线。没有数据支持。用户数量不足，没有庞大的用户数据支撑。面对紧张的实际情况，我们应该如何安排？一个人承担多个角色。省略原型图的过程。对于小功能点，可以跳过原型图的步骤，直接输出高保真视觉草图，对功能点进行优先排序，确认本次迭代中要实现的功能按照模块任务排列，之后一个模块的设计稿确定，开发跟进，开始开发。有效保证整个团队不会无事可做。在会议中及时反馈问题。时间紧，任务重，所以有出错的可能。可以及时开会，交流大家遇到的问题，集思广益解决。分析竞品，提炼精华。如何修改？

　　1.分析竞品，取本质，确定产品功能逻辑2.根据流行趋势和产品定位重新定义产品风格，输出视觉规格

　　(1）作风决心：年轻朴素

　　因为产品定位的用户群体的年龄段是中年和中年。所以希望整个产品呈现年轻化的感觉，结合当下流行趋势加入插画元素，提升产品的青春感。

　　插图主要用于页面为空状态、网络异常、未打开链接、无法查看等。我们希望情感化的插图设计不仅有助于引导用户更轻松地使用产品，还可以缓解负面影响特殊情况下的用户方面。心情。

　　B端产品多为内容较多、功能较复杂的产品。因此，为了提升产品功能的操作体验，我们希望以更简单、更直接的方式面对用户，让用户专注于产品功能本身，解决用户需求。

　　(2）颜色规范

　　颜色不仅是品牌的第一个外化特征，而且还承担了用户界面中信息的部分功能属性。因此，本次改版的主色调依旧采用了产品本身的品牌色。

　　辅助色根据主色进行调整。建立产品色库，标注使用地点。辅助色可以切换到HSB模式来调整H值，S和B可以根据实际效果微调。

　　灰色。主要是文字颜色。

　　(3）文本规范

　　(4）Layout

　　在布局框架的选择上，功能内容决定了形式。我们采用卡片式，分区清晰，可灵活定制。专注于内容体验。

　　(5）加载效果

　　根据功能和场景设计体验友好的加载样式。例如，您可以在新创建的应用推荐应用处选择一个占位符加载，这样不影响页面的整体效果。

　　3.基于原型图的设计稿

　　（1）用户在进入产品第一屏时会看到首页，所以可以先走出首页和一些重要的功能页面，与老板确认整个产品的风格。

　　(2）根据原型图绘制设计稿时，首先要明确整个功能点的交互逻辑，然后再考虑用户的实际操作路径是否合适，是否有任何遗漏。

　　比如老板经常需要查看销售报表，实际操作路径需要经过4个步骤，而这些步骤每次查看都需要重复一遍。改版后可将报表视图置于首页，具有【自定义首页】功能，打开工作表可随时查看销售报表。

　　（3）页面要突出内容重点，明确区分内容层次

　　例如，应用表视图。修订前内容层次不明确。改版后隐藏了一些不常用的功能，调整了页面设计，清晰可见视觉优先级：数据表-工作表列表-添加数据按钮-其他

　　(4）考虑一个空的状态页面

　　状态页为空时的情感设计。

　　4. 创建图标库

　　5. 创建组件库

　　组件不仅可以让界面更加统一，还可以让我们在设计的时候跳出当前页面查看全局，思考每个组件在后续的界面中是否还能继续使用。

　　比如仪表盘的【查看组件】，产品的自定义首页和仪表盘功能类似，但是没有添加文字和图片的功能。仪表板可用。第一次不考虑全局，只是简单的将两个组件统一起来，结果就会出现，view组件不能完美适配文字和图片，会出现在文字和图片上面的function图标显示不清晰等。后来做了一些调整，对仪表盘中的文字和图片做了新的组件。

　　在方案的设计阶段，需要权衡的因素有很多，如准确性、效率、可用性、美观性、一致性等，需要考虑是否会出现问题多种极端场景下的展示效果，并制定相应的处理规则等。面对不同的场景，我们要有全局观，综合考虑，灵活定制不同的解决方案。

　　6.和产品开发确认设计稿7.交付设计稿、备注信息

　　将设计稿上传至Zeplin，并备注详细信息：包括页面上的一些悬停效果、长度限制、如何显示不同分辨率等规则。

　　8.查看设计稿的还原度

　　设计演练非常重要。作为设计师，我们对产品和使用我们产品的用户负责。测试版实施后，设计师必须实际体验产品，检查产品修复问题，及时开发。测试沟通。

　　终于

　　本次改版即将结束，产品即将上线。然而，产品设计升级并不止于此。我们始终坚持以创造最佳用户体验为目标，关注用户反馈，解决和发现用户需求，专注于行业内的精细化设计。

　　本文由@小阳光不爱吃椒原创发表，人人网是产品经理。未经许可禁止转载。

　　标题图片来自Unsplash，基于CC0协议

　　给作者一个奖励，鼓励他努力创作！

　　欣赏