选了一张小狐狸的照片作为封面。今天开会的时候听到了一款叫“蓝湖”的产品，可以把设计师稿件非常快捷地转化为前端页面，这样“神奇”的产品却是我在做网站后台设计时没有了解到的竞品，可见当时的前期调研有很大的不足，所以就放了一只蓝狐（谐音梗，赔钱）的照片提醒自己。另外狐狸高雅、贵气的形象，也与官网的定位有相似之处。笔者参与过三个官网的设计（均为Web端），一是某B端产品公司的品牌官网，二是某部门的内部官网，三是用于活动运营的官网。就参与过的调研及设计，分享一些官网设计的心得与经验（均脱敏），和大家一起探讨。关于官网设计，有很多设计思路的文章都讲的很好，也放在了文末，本文更倾向于通过产品小白的视角，从细节入手讲述一些心路历程。品牌官网
需求背景
最开始拿到这个需求时，我陷入了到一个初级错误中：被旧版的方案限制住了思路。受到各种因素限制，需要从头搭建一个新的官网，从产品侧提供可复用的解决方法。但当需求方同学拿着他精心总结的旧版官网调研方案来交流时，我被局限在了旧版的设计模式中，为解决旧版本的问题而开始设计，这种方式有可能会导致与最终的目标方向出现偏离。当然，由于品牌官网是一个企业高度凝练高度抽象的PRD，要展示架构和理念，基于其面向对象的复杂性，需求方同学基于其运营经验给到的框架是很有参考意义的。
品牌官网的目标：
产品定位
在最开始设计方案的时候，想出了很多天马行空的点子。前端更注重视觉设计，就在后台下足了功夫。从用户的角度出发，提出极力着重于提升用户体验的想法是可以理解的，但回到产品本身，这样的设计就会面临无法落地的问题。但就这个需求本身而言，后台的重新搭建相较于前端设计更像是锦上添花：1.能够提升人效比，但其效果反馈会滞后于前端 2.市面上已经有较为成熟的商业产品，其前端设计与后台数据监控都比较完善，当然处于数据安全等角度，不采纳竞品。当拿着这样一套方案去找开发同学沟通时，很难不遭到反对。从资源的角度来考虑：1.内部现有的产品中有几个可以提供相似的服务，只是难以完全达到我们的需求。如果可以在已有产品基础上进行调整，其可以提升ROI 2，开发团队的资源排期本身就较紧，是很难从资源上获得对这种“从0到100”的开发需求的支持的。需求做到哪一个程度，是一场资源的博弈。从上述维度考虑后，就将需求的重点拉回到前端的视觉设计和基于现有后台产品基础的定制化改动上来了。需求优化
当产品需求总体确定后，在投入开发前，在产品中加入数据埋点，提供一些产品迭代指导，检测异常状况。常见的如用户来源分析、页面数据漏斗、后台报错率、用户使用行为等。拿捏不准的设计点，可以通过数据分析的结果了解用户的使用路径，对设计优化提供导向。最后是产品的迭代框架。前面提到，后台的重新构建受到资源的限制，如果能让后台辐射更多的非技术使用者，就可以相应提升该需求的重要性，促使管理者愿意向其中倾斜资源了。部门官网
前期规划
最开始拿到需求后做了简单的调研和设计，其实是对一些市面上现有产品的方案进行了拼凑。但不断的借鉴模糊了产品定位。我借鉴了一些行业内的头部竞品的官网，筛去了大部分营销内容后，还是不免保留了一些商业化的表述和展示，忽视了我们的官网主要的面向对象是内部团队这一事实；在借鉴某公司的官网时，则比较粗暴地借鉴了其时间轴等展示方案，却忽视了部门的历史无法与一家公司的历史相对比该，采用相同的方案无法达到相同的效果。在设计时一定要回到官网的定位本身，明确其对内对外要展示的具体含义。产品构建
内部网站的功能性能大于展示性能，涉及到的内容量非常大，可以从产品框架的拆解入手，提高设计效率。将产品内容拆解为三部分：前端视觉设计、后台内容管理、数据迁移。前端视觉设计又拆分为首页视觉设计、功能页面清晰展示；
后台内容管理则可以分为如下几个大类：权限管理、数据管理、页面调整、算法逻辑；数据迁移在用户侧体验其实并不明显，但却是整个产品设计中最具有挑战性的部分。- 数据迁移涉及到十多个平台，迁移不是数据的简单复制粘贴，而是现有逻辑的整合优化，需要在熟悉所有平台数据内容的业务逻辑后，提出相应的优化方案，并将零散的功能集合在官网这个平台中。
- 数据迁移时需要考虑最大化降低用户的迁移成本。进行功能的优化设计时不去过分挑战用户的使用习惯，以及优化某些数据结构时，不要让原有平台的管理者和使用者付出过高的数据更新成本，这都需要对于数据本身含义有较深的理解。
排期规划
在产品开发时可以遵循50%-70%-100%的方法，通过完成MVP版本，提高产品上线速度，同时更早地获取用户和数据反馈以调整需求。对需求进行排期，拆分成多个版本进行开发，让初始版本最快地投入到使用中。
活动运营官网
需求特点
活动运营官网不同于前面两者，是一个完全toC的产品，在设计时需要考虑到用户完整的操作流程。活动运营网站除展示属性外，又具有强烈的功能属性，需要与其活动内容进行高度紧密的结合，涉及到的功能点也会很多，其后台配合度要求更高。另外，其投放形式会更多样，除了PC端，还会涉及到app、小程序、H5等多种形式的展示，在设计的时候会更多地考虑到不同端口的协调性。设计流程
该产品的设计有明确的服务对象，与活动业务高度绑定，因此功能设计需要紧贴业务内容与业务规划。- 前期需要与业务方进行深入的沟通，了解其涉及的业务形式，以及不同形式活动可能涉及到的具体内容
- 对业务的内容进行归纳，区分为可规范化的模板部分与高度定制化部分
- 归纳出业务中复现率高的功能模块，作为后台活动管理的组成部分，在此基础上要提供一定的灵活性，尽可能适配较多的通用业务场景
- 将高度定制化部分进行拆分，将其中的通用内容与后台进行结合，尽可能保证数据留存传输的一致性，将定制化部分规划清晰后交给设计同学
- 细化需求：产品在不同端的适配及跳转、数据的整合及管理、信息通知的具体方案、权限的分割与切换等
经验总结
明确产品定位
产品的设计往往有很多方案，在无法定夺一些设计是否合理、合适时，应当回归产品定位。我的这个产品是给谁设计的，想要为他们解决什么问题，想要达到什么样的效果。从顶层设计，再往下执行。拿这条准则去对标产品，就能判断出什么样的需求在这样的【人+产品+场景】下是最合适的。
框架思维
当产品设计无处入手时，从产品框架入手，搭建脚手架，建立对产品的总体认知，再对细节进行取舍，对框架分割为几个模块，能更快地入手。从用户使用路径思考问题
跳出产品设计者的角度，了解当用户亲历这个产品时的感受。当用户使用这类产品时，会经历什么样的步骤，这些步骤优化的点在哪里？当用户使用你的产品时，会经历什么样的步骤，用户能否理解或是否愿意接受这些设计的意图？最大程度提升ROI
产品设计的最终目的是商业化，产品理念是价值，ROI同样是价值考量的因素。
重视数据
一是产品的本身数据处理，数据构成其内容，数据的传递、分割、留存、转化，与业务紧密结合，要报以足够的重视；而是产品获得的数据反馈，它能较为精准地反映用户的体验，帮助完成产品的迭代和考核。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
