这一期分享一个小程序首页的UI改版思路,我将用旧版和新版的界面对比,从产品的角度去说明设计的意图;1、改版不仅仅是升级界面,也是优化交互体验
2、出彩的设计是基于对业务的理解
我们按模块来拆解,希望给大家一些思考,并且在实际项目中运用起来。“ 顶部栏 ”
- 强化LOGO,弱化搜索栏 -

上图为顶部栏,左图为新版,强化了LOGO,弱化了搜索栏;从产品角度,我们监测运营数据发现,搜索频率不高,那就减少空间占位;新增LOGO和宣传语,进一步占领用户心智;从设计角度,搜索栏模拟小程序胶囊的样式,协调、统一、对称,并且升级为全局综合搜索的功能。

“ 轮播图 ”
- 背景虚化,不单调不死板 -

轮播图尺寸我们不做变化,在背景增加虚化的效果,根据每张图切换而变化,让主视觉不那么单调和死板。
- 对业务的理解有助于提升创新的有效性 -

我们在常规双行多列的基础上,做了一些演变;过程中我们发现,每个分类其实是游戏列表的入口,那就可以运用封面来做视觉差异,因此我们尝试把打折的内容列出来:1、从布局和交互来看是合理的
2、对用户粘性和活跃度带来帮助

这种设计比较考验设计师对业务的理解,能够合理运用模块的特性,通过设计去表达创意;当你想要创新,需要先获取已知条件,然后重新排列组合;

比如订阅,就是不同游戏厂商的会员,我会从游戏公司LOGO和代表作去寻找灵感;再比如最新上架,上架时间和价格是用户比较关注的点,我会以日历和时间轴的关键词来设计;总结:对业务的理解有助于提升创新的有效性。
“ 标签页 ”
- 通过归类简化了内容,减少界面层级关系 -
最后是标签页,我们通过归类,简化了内容,前面3个模块移至阅读板块,合集和组队合并到标签页,排行与专题结合,目的是减少界面层级关系;
动态页,是展示用户对游戏的讨论,新增了游戏截图,一方面给用户展示更多信息,知道玩家在讨论什么,从而加入讨论;另一方面,截图还起到装饰作用,让整个界面更加平衡;
另外还新增了玩家评价,是平台内的数据,优先展示,没有数据时则显示商店评分;动态除了对游戏的讨论,还有对帖子的讨论,展示位置并未改动,但样式上按板块划分,优势就是帮用户分类,精准查找;劣势就是查看更多内容需要往右翻,无形中对隐藏的板块带来阅读影响。
“ 写在结尾 ”
- 后续继续分享剩下的标签页内容 -
这一期就到这里,后面我们继续分享剩下的标签页内容。

优网科技,优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。