#交互学堂#十年后的今天，随着58的业务越来越壮大以及一些创新产品的加入，单纯的形式越来越难以承载业务含义，统一的样式也越来越难很好地满足用户的需求。
为什么要改版
58同城自2005年创立以来在APP、M、PC主页的设计形式一直都是以文字链为主，这种经典的形式简单便捷，深受用户所喜爱。十年后的今天，随着58的业务越来越壮大以及一些创新产品的加入，单纯的形式越来越难以承载业务含义，统一的样式也越来越难很好地满足用户的需求。所以，我们决定让设计重新启程。
如何改版
这并不是一件容易的事情。
58这个神奇的网站已经有了很广泛的用户基础，并且作为分类信息及o2o行业的领军羊，58几乎是一个没有明确竞品的产品。如何在如此庞大的网站上进行创新改变，对我们提出了严峻的挑战。为此，我们精心制定了先确定设计原则，然后根据小流量数据快速迭代的改版计划。
设计原则
一、预测用户期望，引导用户行为
58用户大部分属于目标明确型，比如：找房子的用户主要看房产，找工作的用户主要看招聘。用户锁定目标后进入分类页进行检索行为，分类页的内容更丰富且具有专业引导性，更加符合用户的预期。事实上，经过改版，我们发现目前分类页的跳出率有明显的降低。
旧版首页以分类链接形式为主导，引导用户直接点击链接到列表页。用户行为集中表现在首页与列表页间进行“点击-返回”操作。
新版强化导航形式，引导用户进入各业务线的分类页。用户行为则表现在首页与分类页间进行“点击-返回”操作。
图1 58M端_导航-改版前后
图2 58PC_导航-改版前
图3 58PC_导航_改版后
二、集中改造关键功能，提升操作效率
运用80/20法则，提升操作效率。在所有大系统中，高达80%的效果由仅占20%的关键因素决定。用户在使用产品时，80%的时间集中在该产品20%的主要功能，我们应该集中在这些关键功能上，从而提升生产效率。如：搜索、业务入口、个人中心&发布、城市切换。
搜索：
1.放大搜索区域。
2.位置下移，缩短拇指操作距离，提升检索效率。
图4 58M端_搜索入口_改版前后
业务入口：
1.强化表现形式。由分段式导航改为图标式导航，提升网页架构拓展性，增加流量分发入口。
2.各业务线楼层中增加实物图片，突出业务线特点。利用图像特征，使跨业务间信息更容易被找到、辨识和记忆。
3.视觉优化分类icon样式，增强易读性。
图5 58M端_业务入口_改版前后
个人中心&发布：
统一各页面顶部导航操作，增加用户在各层级页面浏览间的操作便捷性。
图6 个人中心
三、增加情感要素，提升服务粘性
加高顶部城市图片运用情感化设计，增加趣味性。
服务具有关联性特征，增加个性化服务推送，增加浏览命中率。
增加趣味性提示，引导用户点击行为。
图7 场景化设计_城市
个性化推送
图8 个性化推荐
四、制定原则规范，保证多平台设计一致性
根据一致性法则，当系统相似的部分，用一致性的方法表现时，能更好地改善系统的使用性。一致性能让人有效率地把知识运用到新的情境，并能快速学会新事物，专注于与工作相关的事物。为提升产品整体气质，在APP、M、PC端在交互及视觉进行了设计统一。
使用美感一致性原则，建立易读性的独特品牌特质。全新探索设计风格表达，对字形、字号、颜色等设计元素进行统一规范。
使用功能一致性原则，简化使用并达到容易学习的目的。在同一系统中，保持内外部一致性。对导航栏、业务线分类热词、运营位、底部等进行了全站的规范化设计。
图9 色彩规范
图10 设计规范
五、探索全新品牌形象，增加年轻化风格
探索图形表达方式，运用双色设计，突出年轻化特征，提升品牌积极活泼的气质。
通过插画、将故事、季节及空间相互贯穿，增强运营活动氛围，突出活动中的品牌传染力。
图11 年轻化图标设计
图12 插画
小流量快速迭代
好的产品从来不是一蹴而就的，它需要产品设计不断的打磨。在一遍一遍的迭代的过程中，我们以数据为支撑，倾听用户的声音，保持反省的姿态，不断审视产品本身，发现问题，解决问题。只有当设计师把握住流程，用匠心态度对待每个环节的完成效果。只有全身心的投入其中，才能保证设计高质量的产出与落地。
图13 数据
本文出自58用户体验设计部（58UXD）
如何改版一个3亿用户的神奇网站
张莉
原创文章，作者：ioued，如若转载，请注明出处：https://www.iamue.com/18639/
