58便利体验升级项目由PM发起，针对上一版M端页面遗留的问题进行了设计优化。并在迭代中进行深度挖掘，不断优化产品体验。在页面设计的过程中，总结了一些经验和方法，今天和大家分享一下。
项目简介
“58便当”是58同城旗下的便民服务平台。早期版本主要基于许可证发放策略，功能和结构单一。此次改版引入丰富的信息内容(创业服务、优学培训、生活小贴士、汽车保养、用车)满足日常认证业务需求，并结合58服务承担起信息输出的角色。
设计背景
用户分析
基于过去数据的用户画像模拟:
根据不同用户的浏览需求，可以分为两类:
1.针对性:如果有办证需求的用户，希望快速找到办证指南；
2.无目标:对信息等内容感兴趣的用户，可以找到符合自己需求的信息；
首先，对于需要申请认证的用户的行为:
快速、方便、全面的信息是用户选择网上搜索的主要原因；
利用搜索引擎或官网查询方式，获取信息真实可靠、方便快捷的信息资源；
设备的使用，电脑占64%，移动终端占29%，终端占7%。
用户痛点:
改善用户体验
目的:缩短用户的访问路径，提高产品的搜索效率；
无目标:提供精准的信息推送，提高榜单的可读性；
行动计划
优化首页快速进入图标，优化图标在设计上的引导功能，方便用户从首页直接跳转到详情；
增强搜索过程中的体验；
增加个性化推荐，丰富视觉语言；
采用统一的视觉元素，改善页面效果；
模式分类
对不同种类的页面进行分类，规划不同细节、渠道等页面的设计风格。，以便更好地统一设计和执行。
修订版
真实可信的色彩
基于产品特性，不延续主站的橘色，主色调为蓝色，会给人带来知识感和信任感，使页面更淡。在最终确定主色调的过程中，进行了一些微调，最终确定了目前的色值。
清新风格
从Banner开始，融入明亮的色彩渐变和光影效果，紧跟当下潮流。同时，使用该效果后，更方便Banner的标准输出。只要修改渐变，就可以轻松输出更醒目的Banner，降低了后期运营和设计的成本。
并且优化视觉风格过时的UI，增加页面之间的边距，去掉不必要的细线。
图标优化
根据页面功能的变化，第一版中的彩色图标逐渐改为简单的线性，使图标在页面中看起来更合适，引导更直观。
主页
优化整体页面布局，添加横幅/图标和其他元素。细节融入光影，提升页面整体视觉效果，弱化深度入口层次，添加推荐信息，优化首页使用效率。
信息列表扩展
在设计列表的过程中，考虑到页面信息内容较多，尽可能展示内容，采用了三种展示形式，有效地达到了预览和醒目的效果，并兼顾了避免浏览重复样式的疲劳和提高页面的可读性。
同类信息横向滑动
在水平滑动 *** 作模式中添加类似的证书。方便用户浏览列表，更方便的浏览当前屏幕中的内容。
字体优化
加大大主区域的字体大小，缩小标签和次要内容的字体大小，提升列表、详情等页面的阅读体验。并突出超文本链接，让页面更好的区分主次功能，调整页面整体字体颜色，将纯黑优化为深灰色，减少阅读过程中高对比度带来的眼睛疲劳。
增加带入感
添加上下文背景图片，使详情页有代入感，提高用户浏览文档时的视觉感，起到内容关联的作用。同时，渐变效果让文字信息和照片看起来更柔和，不会太生硬。
获得更有效的推送
因为用户入口等因素，当考虑到部分用户会先进入详情页，而不是首页或列表页时，用户有必要进行自循环浏览。
为了避免用户跳出，我们在页面中央的Tab切换效果也起到了对当前页面的精准信息推送。
结论
根据前面的研究分析，定义了新的视觉语言，建立了便捷的规范，保证了品牌的一致性，也方便了后期的版本迭代。采用极简排版，让用户可以不受干扰的沉浸在阅读中，提升了用户的阅读体验。设计是一个不断打磨的过程，需要在产品上精耕细作，不断挖掘产品的可优化点，提升产品体验。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）