这一次，我们做了一次官网改版

时间：2023-04-26 00:42:02 | 来源：网站运营

时间：2023-04-26 00:42:02 来源：网站运营

这一次，我们做了一次官网改版：

科技性冷淡风。这应该是我们这次改版的风格总结了。
没有很浓郁的色彩，没有恣意的渐变，没有神秘的黑暗亮蓝与荧光绿，也没有各种punk的流行元素，我们呈现出来的就是一个可靠、学术、娓娓道来的界面风格。
我们不需要很酷炫的东西，我们要的是peace and love。

项目背景

刚来到公司就觉得当时官网有很多设计上的错误，包括间距不统一、图片拉伸、icon样式不一致等明眼能看出来的视觉错误，然后一直被其他项目拖着，没有时间去做官网的样式修正问题。

直到有一天伟哥ceo半开玩笑的说，『你脸洗了么？』我愣了神，后来伟哥才表明，官网是公司的脸面，是该洗洗了。随后呢，这个项目也就提上了日程。

本项目的设计由我和雪馨共同完成。我主要负责官网需求定义、风格定义、页面设计，她负责风格探索、插画设计、页面设计与标注。

明确问题

• 之前官网由外包团队开发，维护和管理不方便
• 视觉上比较粗糙（有一些错误），视觉形象不高端
• 官网内容较为单薄，缺少案例支撑，缺少可信度

改版需要达成的目标

• 视觉上进行提升，提高公司品牌的视觉层次，让来访者感觉很公司很正规、很可信
• 增加落地项目的宣传，让来访者知道公司确实有很多实战经验，从而信服我们的能力
• 将官网的功能架构进行梳理，方便以后功能模块的拓展
• 方便市场人员运维

1. 确定需要呈现的内容

嗯，我们在接手这个项目的时候，手里没有一点内容，我们需要去寻找一些素材，让官网变的丰满一点。

这个部分可以分成两块任务，一个是收集我们自己有哪些现有的东西，一个是确定来访者需要获取什么东西。

在走访各个部门，与各部门负责人亲密交谈后，获取了以下素材：

1. 公司、团队介绍.doc
2. 老板出去宣讲时候.ppt
3. 产品白皮书.pdf
4. 公司新闻.doc
5. 各项目组正在进行或已完成的项目.zip

在收集过后，发现了我们还是有很多可以呈现的内容，当时的官网并没有把这些展现出来，少了很多向外界展示趣链的机会。

2. 下一步就是确定来访者的用户画像，以及他们的用户诉求。

当然，我们没有做用户调研。

在我和雪馨两个人角色扮演的过程中，我们初步臆想出会访问我们网站的四类人群。

• 潜在客户。关注区块链，有自己的行业需求，希望与一家区块链技术公司合作来实现自己的想法。
• 投资者。对趣链有投资想法，希望根据官网提供的一些信息初步、较全面的了解公司当前的发展状况。
• 普通群众。在行业活动或新闻报道中听到、看到趣链的品牌，希望对这家公司有更深入的了解。
• 区块链爱好者。对区块链开发有兴趣，希望了解趣链的开发水平，并寻找一些对自己开发有帮助的内容。

1、潜在客户的诉求：

传递给用户的印象：趣链的区块链技术很厉害，而且实战经验丰富，能够与之进行合作。

2、区块链技术爱好者的诉求：

传递给用户的印象：了解趣链的技术水平，可以寻找到一些对自己的开发能力有所帮助的东西。

3、普通群众的诉求：

传递给用户的印象：趣链是一家做区块链的公司，在区块链领域有很多客户，技术上很厉害。

4、投资者的诉求：

传递给用户的印象：初步了解公司全貌，行业的布局，以及未来发展的的可能性。

在没有接触到任何真实的网站访客后（除本公司员工外），我们很形象的把用户诉求以及如何满足这些诉求给描绘出来了。滑稽。

虽然感觉这些诉求可能与真实的情况并不匹配，但是我们义无反顾的继续下去了。

现在，我们脑海中就时时刻刻浮现出这四个虚拟的人物了。

证实我们的思考是正确的

我和雪馨YY了一下午，终于把我们要展示的内容梳理出来了。但是我们还没有把这些内容按照某些模块进行分类。下面我觉得可以做一些竞品分析了，来参考、验证一下官网的内容是否充分。毕竟都说自己造轮子不好，我们要学会从同类产品中去学习。

刚好手里有一份朋友圈都在转发的区块链专利列表，就按照顺序挨个去他们的网页浏览了一遍。确认了两个可以参考的竞品：布比和金丘科技。选择依据：内容的丰富度、产品定位。

同时又考虑到趣链是一家技术公司，也选择了腾讯云、网易云、七牛这三家较成熟的技术公司来做参考。

将各家网站的信息内容按照模块罗列出来。

对比发现，网页架构竟然惊人的相似，而且都是按照『首页-产品-解决方案-关于我们』这几个模块进行划分。看来，我们这么做肯定也错不了。随后我们之前自己分析的内容与竞品的内容确定出了趣链官网的内容模块。

终于，把这些内容确认完毕。有了内容就可以进行风格的定义了，yeah！

---

品牌风格定义

通过我和雪馨两人在公司半年的切身感受，公司是做新技术的，但又是做金融领域的较多，更多的是和银行政府打交道，所以还是要务实一些，不能太炫酷。并询问了周边的几个小伙伴，我们私拟了公司的品牌定位：

随后开始了维持数小时的苦思冥想，终于把一个白板画满了。

我们从探索、学术、有用这几个词，联想到了冉冉上升的行业新星、志在改变金融行业。当然，我们也想学习天猫他们设计师高大上的品牌形象，Insight/洞察、inspire/参与、involve/启发、injoy/愉悦。可是我们想不出来。

我们把白板上的词整理的干净了一些，并打印出来贴在电脑上，时刻提示我们去从这些线索中去创造。

既然有一些正面词语，当然我们也要避免给用户传递一些负面的情绪。

定义完公司的品牌形象。我们要开始从这些关键词出发去定义设计的元素了。

• 颜色
• 基本形
• 组合形
• 设计风格

颜色定义

颜色上感觉挺不讲究的，我觉得公司的定位就是年轻版的微软（谷歌的风格太飘），所以直接取的微软色板里面的颜色做了一些微调，调的更活泼了一点。

基本形（原图形）

这个就更玄学了，我们在头脑风暴的时候，想到了一些名词，例如可靠，我们会想到大楼、钢筋、树墩，这些抽象一下，就形成了一个个最简单的图形。

组合形

我们根据区块链的定义与设计师脑海中的区块链定义了区块链的形态。

区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一种链式数据结构， 并以密码学方式保证的不可篡改和不可伪造的分布式账本。

关键词：区块、连接、顺序、分布。

有了这些组合形，我们就可以发挥各种各样的icon和视觉元素啦。

视觉风格

视觉风格的确定，我和雪馨商量，我们要可靠、创造、学术，不要虚无、神秘，略带一些打破常规的东西，同时要散发出青春的活力。

画了一个星期，出了四个方案。四种实现方式。

方案一：科技幻想。手法：线条。

评价：风格过于未来，有些飘渺，会让访问者感觉到不切实际。

方案二：未来城市。手法：建模。

评价：由放大的电路板代表城市很有想法，这个样式如果作为一个主视觉，工作量较大而且容易偏科幻。

方案三：有机连接。手法：程序编写。

评价：看起来很新颖，但很难去表现，个人能力有限。

方案四：人机融合。手法：暴力拼图。

评价：能够表达出区块链的某种意义，而且放入了人的元素，并不显得很神秘、虚无。

方案四是我偷懒，去各大网站上搜罗的一些关于区块链、科技的风格插画，然后直接套在官网里面，能很直观的看出是否达到那种感觉。个人觉得这种暴力拼图法省时省力，推荐使用。

基于方案四，我们做了细化，绘制了自己的插画。

设计风格评审

这一part很有趣，当我们将设计提案已经做成了一份4-50页的ppt很忐忑地准备向老板汇报的时候，老板匆匆看了几眼，说『你们的设计风格定位是什么』？我说『年轻的微软吧』。老板表示还挺赞同，然后他就开会去了，他说等他晚上再来找他，然后我没等到。就忘记了。。

我觉得还是要和老板确定好风格后再做，最后做完所有页面的时候再去给他评审的时候，总是害怕他说这个页面太丑了，回去重新再改。

视觉输出

icon

由于区块链中有很多神奇的术语程序员都不知道怎么形象的描述它们，所以我们很难用图形来准确的告诉客户这是什么，icon更多起到了一个导视的作用。风格使用了较为新奇的线面结合的样式，黑色的线稳重、严谨，小色块也带来一些活力与创造。

插画风格

插画使用的是当前还流行的 Isometric （正等轴测）风格，也加入了一些人物的插画，让画面有趣一些。画面元素没有很繁复，因为整体视觉风格还是偏简洁、规整，如果在插画里面做过度的细节，反而会让整体画面显得不够协调。

动效设计

当然，我们做完后觉得静态图有点死板，为什么不动起来呢，就做了一些动画。因为是放在banner里面，banner本身还会附加切换的动效，怕两个效果有过多干涉，所以内部的插画动效就做得细微了一些。Gif的文件格式比较大（3-4M，当然您现在正在看的就耗费了这么多流量），被前端强烈的谴责了，后来发现可以使用Animate CC里面有HTML5 Canvas导出的选项，开心死了，导出只有几百k～

官网其他部分的动效就直接使用Axure进行了模拟，个人觉得Axure已经可以很好的做出一些细节的动画了。前端开发根据Axure的动画导出竟然很好的还原了我们的设计，并没有像想象中需要调什么曲线之类的东西，或许是我接触不够深。。

https://www.zhihu.com/video/1010608458818781184

页面标注

由于协作的小姑娘使用的是XD，页面的标注、元素的规范化都是她在XD上一点点堆砌出来，后来我们才发现XD有个标注神器——PxCook，当然蓝湖现在也支持了。但它们都在2018年7月之后才上线支持对XD的支持。所以在XD上标注花费了较多的时间。虽然有很多自动的标注工具，但设计还是需要标注才能进一步验证自己所有的元素是否规范，而且有些关键尺寸需要标在图上，开发才能够很清楚的认识到。

当然在标注的时候，需要考虑到响应式设计，考虑在页面变窄的时候，哪些元素需要变化，哪些需要是保持宽度不变的。这些都需要和前端沟通清楚。

PxCook - 最高效易用的自动标注工具，设计研发协作利器

响应式设计

移动端页面的设计和pc端的区别主要在于屏幕尺寸窄，所以更多元素需要隐藏或滚动显示。我们的解决办法：

1. 横向排列的内容如果放不下，使用纵向排列
2. 鼠标hover的手势转变为触屏点击
3. 如果很细节的内容，在移动端可以省略

变化1：横向变纵向

变化2：hover变点击

变化3:内容省略

后台运维系统

后台运维系统是为了方便市场、人事、行政等人员对官网页面进行动态调整。当然我们也对上传的内容进行规范。这样才能保证视觉的统一和协调。

文案的风格与审核

在页面设计的时候，自己私拟了一些文案，文案的语气平缓、不露锋芒，让人感觉踏实、可靠又包含梦想。

区块链行业的筑路者
——潜心研究区块链底层技术，用技术创造价值

你可能从来没有见过这么一只年轻的队伍，他们充满活力与激情，不畏技术难点，勇往直前，在区块链的赛道上一马当先。趣链在这些“小朋友”、“小年轻”的全力拼搏下茁壮成长，即将成为区块链的“独角兽”。这些小伙伴们也相亲相爱，互帮互助，共同营造着趣链公司和谐、愉快的气氛。

当然，有些内容是我可以写的，但有些技术性的问题就需要各个部门负责人去填写上去。我们列出了一个文案填写表。

后来还列出了一个中英文的对应表。

至此，官网设计的内容就结束了。下面就是配合前端去确定一些他们很难实现或我们设计有误的部分。

再然后是设计走查。

最终

最终，我们郑重地给趣链的小伙伴发了一封邮件，告诉他们新官网的上线。此时心情还是很不安的，不知道是否会被大家接受。当大家在朋友圈发趣链新官网上线的状态后，还有老板认可的邮件，心情大好～

一个星期过去了，看看看看过去7天的数据。新访客数据。

跳出率减少了30%，说明新访客在来到趣链官网后会更细致的浏览页面的内容，能够找到他们想要的东西。

访问时长从2分35增加到4分56，提升了90%多，说明有部分新访客是抱着仔细了解趣链的态度来官网的，他们想了解更多的内容，而现在确实官网的内容变得充实了，所以停留的时间变得更长。

至于关键指标，这个我们很难去采集某个决定性的指标，应该记录是客户打给市场的电话数量？还是关注微信公众号的新用户数？

官网的最终目标肯定是为了将来访用户转化为我们的客户，但目前的官网没有相应可以采集的点，所以，到此为止吧。

---

终于，这篇水文要写完了。这次官网改版算是自己视觉方面最优秀、最完整的一个产品吧。虽然文中有很多自嘲、自黑的点，但这些也都是无奈的表现，我们想表现地更好，但有点力不从心，肯定没有大厂那些规范的流程和洋洋洒洒的设计总结，我们只是努力地做完每一步事情，让它显得还挺正规，像那么回事情，至少官网每个地方我们都思考过了。

可能很多还不入流或有改进的地方，我和雪馨会继续向前行进，我们尽力了。

创业公司是可以给你很多发挥的空间，但你能发挥多少，这就是你自己的本事了。




最后，放上官网的链接：

https://www.hyperchain.cn/




同时也感谢参与这次官网改版的前端，团子同学，他给我们指出了很多设计上的问题。

也感谢参与到项目中的后端、测试和材料提供者们。