【萤客·案例】海天广场：推翻自己的设计稿两次，只为了一个完美的产品

萤客出品，必属精品，无论付出多少代价，都必须为客户负责，这是萤客的精神。此次海天项目开发过程中，萤客两次推翻自己的设计稿以及程序部分。历时3个月，萤客在打一场硬仗。萤客设计师们完成设计稿后，程序完成页面代码以及后台搭建。这个过程，重复了3次...

萤客INCube：

全心全意提供最专业的服务！萤客INCube平台是一个在线企业服务网站，旨在为广大中小型企业提供“一站式高速快车”的企业服务，其中包括品牌策划、VI应用、文案撰写、互联网平台搭建、网络运营推广、公司注册、会计代理、创业法务等等。

是传统企业升级转型互联网+的第一选择。

我们的优势：国际风格的设计理念、中英文结合的双语服务。

[/b]萤客为海天策划一系列的传统企业转型互联网+升级策划。

其中包括：

① 海天作为行业内的龙头企业，如何率先转型升级领先于其他传统企业，吸引更多商家进驻；

② 搭建公众号平台，其中最主要的部分是微官网，也是这次项目的重点。

建立微信平台，方便消费者与商户和设计师沟通无障碍。

开通入口，利用二维码扫描达成线下与线上信息转化，使商户得到互联网渠道的扩展，为商户引流粉丝。

微官网平台推广海天广场针对商家的网络营销服务，领先于其他传统企业，吸引更多商家进驻，做行业领头羊。第一次设计稿符合厦门本土审美，但是样式老旧，排版简单，在架构以及用户体验上欠缺考虑。

第一次推翻，团队里的成员，都不愿意。但是，静下心来，仔细审视自己的作品，正视自己的问题，大家下定决心，重新做一遍。

第二次，设计师们参考国内主流网站，重新布局排版，思考框架， 增加功能，美化页面。

第二次版本的海天微官网，已经符合国内审美。

但是萤客不仅仅是本土企业，萤客想面对世界，接轨国际。

于是第三次，萤客邀请北京嘉则上品公司进行全面的设计指导，并负责主页面的设计，指导交互效果，完善框架。

第一版本

符合厦门本土审美，但是样式老旧，排版简单，在架构以及用户体验上欠缺考虑。



第二版本

重新规划思路后，在排版和功能上有所提升，页面效果也较为美观，精致，符合当前国内审美。

缺点：不够成熟，不够精益求精。



第三版本

在视觉上有重大突破，思路清晰，架构完整，用户体验好。



细节对比





实际上，第一版本和第二版本，客户都已经通过。

但是，萤客对自己要求严格，萤客必须对得起海天集团的托付。

可以看到，萤客每一次的变化和进步。

·对于海天集团，这是一个转型升级的机会和改变，通过互联网+实现利润增长。

·对于萤客，这是一个挑战，一个机遇，也是技术的打磨和磨练。





这个项目洽谈过程耗时整整半年。海天集团是厦门的地标型的大企业，而萤客刚刚起步。萤客对比海天集团，是完全不值得一提的存在。

打动海天集团的，是萤客的韧性和专业。这一次海天项目是萤客一个巨大的转折点，萤客为倾尽所有将为海天打造一个架构清晰，功能齐全，视觉美观的网站。萤客出品，必属精品，这是萤客对客户的负责以及专注。

萤客很重视海天项目，为此成立了专案小组，进行了严格的制度流程规划以及进度管理模式。

萤客要将海天打造为国际品牌，所以在视觉上，不能以国内当下流行界面为参考，必须与国际接轨，形成自己独特的高档页面。为此，不惜一切代价，推翻自己，重头来过，一切只为完美的产品。萤客在推翻自己的过程，很痛苦，但是也是一种磨砺。

萤客成员能发现自己的不足，也不断学习，不断成长。

对于设计部，是视觉的提升，对于程序部，是技术的磨练以及架构的完整。

每个成员都像蝴蝶破茧而出，骄傲而又美丽。

我相信，风雨过后才会有彩虹，浴火后的凤凰才有资格接受百鸟朝圣。萤客将统一提升视觉，对接国际潮流。

萤客成员能独立完成策划、组员协调分配，项目规划等等的业务，萤客也将更有能力承接大项目，为更多企业服务。



海天是一个大企业，建站架构相对复杂，功能需求也比较齐全。

相对于普通的企业网站来说，能有机会接触这样的大案子，对于我来说意义重大，这是对自己的一次挑战，对技术的检验与完善，感谢公司给我这个机会与公司一起成长的过程。首先是公司第一次接触大企业项目，以前也没有准备过相应级别的技术框架和协作规范。所有战友们一起摸索、实践、搭建框架，切磋磨合共同制定一套互相协作的规范；

第二是人手不足，程序部只有两名战士，新人经验不足，但是在巨大的压力下，新人不但承受住压力，而且成长很快，已经能独立完成项目；

第三是工期减少，但是并不影响我们完成高质量的站点建设，越有挑战就越有动力。整体过程虽然很辛苦，但是努力拼搏过后，尝到胜利的果实的滋味是无比的喜悦。

这次学习到了团队配合、团队管理，如何带领新人熟悉整个流程，以及对项目的整体把控。

积累了核心代码和技术框架，便于后续有大的项目能够快速的延用，实现项目的可复制性。

团队协作方面也通过此次项目进行磨合，往后的项目配合起来会更加默契。压力是前进的动力，感谢这次的压力，我也变得更优秀，在压力之下，人的潜能才会爆发。与设计部配合融洽，解决设计部代码盲点以及误区，使他们的排版更有功能性且简单实用。

我对我的组员要求十分严格，严格即大爱，为了让他成为一名优秀的程序员，对所有代码融会贯通。

而他也没有让我失望，经过这次海天项目的修行，他已经可以独挡一面了。首先对于项目进度需要一个合理的安排。

作为程序部组长，我需要对项目整体时间进行一个估算，再进行具体安排，才能保证在规定时间内完成项目。

分析落后的原因和落后的部分，对于前段框架不适应和开发不便捷问题，在此次项目制作过程中，哪怕是已经做了很多了，也果断的推翻掉前面的劳动成果，更新更好用的技术框架，便于团队间配合协作以及提高开发效率。

所谓磨刀不误砍柴工，这一举措后续也确实是带来了可观的项目开发进度。因为海天项目改版3次，每一版的布局都不尽相同，程序前端实现上需要重新罗列框架。我的解决办法是：尽量寻找可复制的部分，减少冗余代码，根据多年经验，迅速找到切入点。

也因为改版了几次，负责前端开发的战友也在变革中也不断的精进代码质量。



海天是我职业生涯中一个具有标志性的项目，它的规模是我第一次接触到并且参与的，它也使我第一次接触到本土行业龙头型企业，海天项目对我来说是一次挑战，更是一次个人专业领域大跨步的跳板。在工作中我遇到最大的问题便是如何才能够体现出行业龙头的标准，如何可以将同类产品的平均水平线甩在身后，以及自身技术上的弱点该如何去突破。

如何解决的？需要经历大量的知识扩展，学习并吸取更多优秀的设计，在该向人请教的时候毫不犹豫，一个人的能力如果还不够那就吸取多个人乃至多个团队的智慧，这是为了使项目更加圆满也是为了让自己成为更好的人。海天项目让我扩展了视野，并且懂得了团队合作的重要性，也从中吸取了很多教训，这些教训最终为我带来更多的项目经验，从宏观的视野看待整个项目，从微观的角度去把控细节，最重要的是我明白了学无止境，如果不想后退，那就义无反顾一往无前吧。首先我得感谢公司给了我这个机会，让我能够挑战这样一个项目。

海天项目最大的难处就在于如何突破限制，突破本土环境的限制，突破国内审美的限制，怎样将一个版面的美观提升到国际化的程度，并让它的使用在正确的逻辑框架里更加轻松舒适，这就是为什么我们不断的推翻设计风格，直到第三次才找到我们想要的。

而作为项目负责人的我还承受了团队制作后是否带来足够产值的压力，因此我在项目进行时我也在和更完美的团队学习如何把控项目流程和细化管理，也多亏项目组中可爱的小伙伴们对我的支持和鼓励才可以将工作更加顺畅的进行，总的来说我得到了团队很大的帮助。与客户的对接需要先对客户整个行业进行考察，搜集尽可能多的资料，结合客户的需求点并且发现市场痛点，与客户交流的时候进行引导，让客户明白我们共同努力创造的是什么，能对客户有多少的产值，归根结底就是怎样能够更好的理解客户，并让客户知道我们能给其想要的。规划方案需要将客户的需求理解透，站在客户的角度上位客户考虑，当然还需要结合市场的需求，以及能得出的结果，从结果进行反推，让整个方案具有可实施性。分配工作就是对组内小伙伴的能力进行评估，将正确的棋落在正确的位置上才可以发挥出最大的功效，并且还需要分析组员的工作量和项目进度的关系是否合理。我对组员们从来没有上下级的观念，大家都是朋友，更多的是以朋友的方式进行交流，我们的组员也都是怀揣梦想并且努力上进的人。大家同心协力维持了良好的团队氛围。项目期间必然不是那么一帆风顺，在UI的整体框架上就经历了几次修改，在自己的能力还不足够的时候只有加速学习，在这一点上感谢比我优秀的人们给与了我很多指导。



我认为此次海天的项目是我们公司的一个转折点，对于公司的发展起了关键性的作用，这将为萤客未来更快速的发展起了一个决定性的开头。

因此海天的项目对于我们来说至关重要。因此我们应该在海天的案子上多做功夫，将海天做到专业化精细化。做出一个很好的案例典范。

因为海天在厦门来说是数一数二的龙头公司，因此将他们的案子拿下将使我们公司的实力更加有说服力。也可以因此博得后期争取的客户的信任。

所以在我看来，海天的案子只许成功不许失败。工作中最大的问题是因为此项目的参与者都未曾有过任何经验，所以在很多细节的方面上配合的时候会有些混乱。比较没有很精细的标准化。

但是在制作的过程中大家都在认真的在慢慢磨合。不懂得地方大家都互相探讨互相帮助，最后意见达成一致然后进行细节规范的标准规定。

还有就是因为我自身对于客户的体验没有想的面面俱到，因此也经过多次的修改，在与程序部的探讨配合下 最终也得出了最佳方案。

所以在我看来，此次很重要的一点是团队的一个团结。我认为一个团队团结了，那么就没有做不到的事情。给我最大的收获是懂得去思考用户的体验，也知道一个项目的框架要如何去做。也因为是第一次接触，所以也让自己长了见识，积累了经验。为后续的工作有了一个大致的思路。逻辑上自己也得到了很多的锻炼，因为有很多需要跳转的地方，所以需要逻辑思维上的不断思考，因此自己也更懂得一些细节的注意度很重要。然后逻辑上也更加清晰了。



海天项目是一个大型的建站项目，对于公司来说，是一个契机，一个突破的机会。

对于个人来说，是一次很好的项目经验，以及整体能力的提升。

这样一个项目的准备工作是复杂并且细致的，从客户需求的交流到网站框架的搭建，再细化到具体的页面，每一个步骤，都需要精雕细琢，反复思考。首先是团队缺少大型的项目经验，导致框架搭建不到位的时候就进行细节页面处理，导致大量返工。解决办法是：搭建框架、结构。

正所谓万丈高楼平地起，框架基础不仅仅能很好解决用户需求对接问题，也能降低与程序部门的沟通成本。

其次是经验不足导致视觉局限性，达不到国际化的标准。解决办法：对症下药，寻找优秀视觉，并收集整理归类，同时结合到项目当中。

最后是LOGO方面问题：在项目中，结合海天LOGO采取了纯白处理，客户认为他们的LOGO是有他们的规范的，但是我们通过专业的讲述，说服客户，提升视觉，改造LOGO，真正向国际化发展。1. 搭建框架：从整体出发，站在一定的高度思考整个项目；

2. 思考用户体验：设计是为了解决实际问题，而每一个交互效果、每一个元素视觉效果、摆放位置，都是为了引导用户。一切只从用户角度出发，为用户带来一款美观实用的产品；

3. 团队配合：此次团队一共有6个人，每个人有每个人的分工，各司其职，有条不紊。



很荣幸能接触到海天这样的项目，这是一个很大的挑战，同时也是一个很大的机遇，与普通企业网站相比复杂繁细，能从中学习到的东西也不少。由于是从设计转到前端，第一次接触经验不足，遇到了不少问题，也因为工期紧，学会了如何分配时间，使效率提到最好。技术上问题主要依靠组长刘家轩解决，很感谢他的耐心指导。这个项目是一个巨大的挑战，过程中遇到了不少技术难题，但是都一一解决了。总体来说，受益匪浅。海天是应用框架来构造前端的，见识到了大神在前端框架构造方面的深度与广度，了解到学习的道路还很长远。对我来说，对网站整体框架把握更加到位，对细节处理更加精准，整体技术水平有不小的提升。

→【萤客·自修】规范项目流程，形成统一生产线（内有福利）

→【萤客·自修】学点说话技巧，让人生更加精彩

    关注 萤客跨境企业服务