PP鸭改版总结

这是一次关于改版的总结，文中提及的所有观点仅代表项目组，和设计师本人态度。这也是本人第一次写项目总结，如有不妥欢迎留言。

为什么改版

与此之前，我们有一个当初看上去还是不错的版本。当我们发布以后，可能因为软件小众，可能因为收费问题，可能因为各种其他原因，在难得卖出去的几份中，收到的反馈并不是非常好。我们当时可以继续坚持一段时间不改版，但是我记得有一个用户说“就这么点功能撑个这么大界面，没什么必要啊！”对设计师来说这就是改版的动力。当然我们的开发那时候也想尝试React 等新技术，前后夹攻下，促成了我们这次改版。

先来体验下“没有必要”的大界面：

以上就是我们1.0 的界面的效果图，最终也是完美还原设计实现的。

这个界面最大的问题在于，超前规划了需求，以“未来的需求”造成了“傻大空的现状”。我们的确是有说将来会这个那个，也有提到需要“扩展性”。但是作为设计师，如何设计“具有可扩展性”的界面，和直接设计一个“已经扩展完”的界面，是不同概念。结果在做完之后，发现诸多界面空空荡荡，就像没有盖好的烂尾楼。

开始改版

这次的改版我们需要一次彻底的大换血。原则上，我们的气质希望是“专业的工具”，设计希望是“合理耐看”，易用性上希望是“可以有学习成本，但决不能高”，以上是和设计师有关的几点。公司给到设计师的权利比较多，这也为日后的顺利改版打下最扎实基础。

关于“专业的工具”，我觉得上一个版本的配色过于明亮跳跃，多少有点儿童玩具的感觉。布局上也过分参考文件夹界面，以至于出现了“傻大空”的感觉。

关于“合理耐看”，“合理”的一般都比较“耐看”，这里我个人觉得主要是考虑“布局合理性”，然后对配色方案要有约束。

关于“易用性”，暂时我们还是沿用旧版方案，而且易用性的东西需要反复测试。暂时能做的就是配合视觉，让用户找得到，无疑惑。

首先是客户端界面

受够了“傻大空”以后，我们开始瘦身。

结构优化：

工具条 包括压缩，恢复，删除，状态，

主体 包括当前状态，缩略图，文件名，体积信息，文件操作，

状态条 包括购买入口，登录入口。

交互设计中：

坚持“一步到位”原则。首先梳理信息，去掉次要信息包括图片尺寸，所在目录，创建日期等。接着筛选重点，留下的信息中，明确“压缩状态”和“压缩比”是用户最关心的事情。

视觉优化：

弱化一切“不重要信息”，规格化一切可对齐元素。缩小软件占地面积。

接着我们再来一组改版前后对比（注：正式发布前仍有小幅改动）。

耗时N天以后，新版的界面全部出炉。在第一批设计稿出来后，我们仍就一些“小事”修改过几次。但是基本都维持了设计师的原作。

关于sketch如何设计这是另一个关于技巧的话题，如果有需要可以另外开帖子。这里有一些我在制作中得体验：

1.  边做边沟通边确认。设计师完成一个阶段设计后，应和PM尽早沟通反复调整方向，频繁的沟通有利于设计师明确产品核心功能，减少设计浪费。

2. 视觉和交互联动。视觉和交互是一起的，“好看”不是设计的全部，如果做的过程中有好的idea，也应该尽快分享。根本就没有什么事是敲定不能改的。

3. 一个流程里的稿子要一起做。PM没有给太多书面文档的时候，设计师为了做全稿子，可以考虑按照操作流来做稿。

4. 凑个数字。收官阶段的切图，尤其要注意尺寸的凑双，凑零。要考虑产品投放的终端，retina屏2x和iPhone6的3x图问题，在收官时候还是要微调到位。

接着是官网

完成界面改版以后，就着手开始了官网重设计。原先我们也有个官网，是设计师按照现有流行的框架做的，一大块介绍一个功能。最终我们发现这个模式针对对我们来说有几个弊端：

1. 由于产品功能比较单一，卖点不够多，有时候文案再怎么修饰，都撑不满一个漂亮的长度。

2. 效率不够高，为了好看，大面积使用背景图，没有做特别优化的前提下 ，打开比较慢。等待时间过长流失了一部分用户。

3. 节奏混乱。这是个很潜意识的东西，其实用户每看一个网站都有个潜意识的期望，先了解品牌，接着是什么功能，接着什么用，我能不能用，多少钱... 旧版做的确实很不好

4. 和客户端风格迥异。看了网站下载软件，打开软件还以为下错了。风格不够统一，有时候两个漂亮的东西放一起，不见得就合适。

基于以上问题，我们花了一些时间来梳理和修正问题：

1. 既然有了界面，风格或元素就可以沿袭界面的来。（视觉）

2. 为了效率，尽量不用平铺大图。（可用性）

3. 控制阅读节奏感，信息结构梳理出：产品介绍，价格，核心功能，使用场景，用户证言，媒体报道。以此来增加说服力，和看上去“像官网”。

最后我们耗时N天，发布了目前的线上版本，再做个对比：

网站的改版，和界面设计略有不同。视觉设计同时尤其要考虑实现成本。在网站设计中，更考验设计师对产品核心功能的理解，反复客观的思考，用户会不会看了不舒服，会不会不知道在表达什么，他在犹豫的时候给他什么信息会促使他购买。所以，以下也是我在改版网站时候的一些经验：

1.  不要认为所有人都会买，网站面向谁？这些用户什么特点？只要这些人有购买的意向，就可以了。不要指望80岁老头会买平衡车一个道理。

2. 一眼知道第一屏应该点哪里。按钮要像按钮，这很重要。

3. 没有绝对的好方案，不要期望改版后就销量大增，如果改版后更多用户去了购买页，已经是一种对改版的肯定。

4. 别放过页脚的表现机会，很多人真的是看到最后才决定了什么事情的。

最后是LOGO

这没什么好说的，大部分时候就是纯粹为了好看，如果你能说出个三长五短来，再好不过。但是长得丑到不能忍，说再多也没用。pp鸭的logo，一开始只是我抄袭小黄鸭的结果，他是圆脸，被压了以后就成方脸了。体现了一下“压”这个概念。其实就是扯淡，因为不好看。所以看不下去我就参考各种鸭，最后为了萌，造型和配色根据各种参考又做了一些修改，成了如今的样子。

写在最后

pp鸭的设计已经阶段性完成，后续我还做了一些周边，比如手机壁纸和微博宣传图等。

一次完整的改版流程对于大部分团队来说基本是差不多的。之前我有看到很多BAT等大公司和专业团队同学的设计总结，往往有一整套完整规范的设计指导，数据驱动。但对于我们这样的小团队，或者新产品，数据几乎是驱不动的，基本就是经验驱动，设计潮流驱动。设计师在团队里的角色，往往还受制于权限。

我们内部有一套对设计评估的标准，算是潜规则吧，拿来和大家分享：

1. 互联网产品的设计没有一步到位的事情，阶段性的满足需求，并能容纳可能出现的扩展，就是一个合格的设计。

2. 在满足合格设计为前提下，易用性是最应该被考量的，关键字段是否出现在关键位置，标准控件是否给人歧义，行为动作能否闭环等，都应该反复讨论。

3. 视觉设计要“有源”，或源自行业标准，或源自行业标杆。满足基本要素后，再做突破。但永远不要拒绝创新。

4. 多环节联动。产品，交互，视觉，开发，测试，都是环环相扣的，发现问题应该及时讨论，而不要等设计定稿才大面积暴露问题，造成设计浪费。

PP鸭经历了一次大改版后，我们看到了从首页到付费页转换率有了明显提高，虽然付费率仍然呵呵。所以我们仍然需要继续努力。