广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

小程序首页改版的UI设计思路分享

发布日期:2025-08-21 07:51:57 浏览次数: 806 来源:阿成在路上
推荐语
小程序首页改版不只是视觉升级,更是交互与业务理解的深度结合,让设计真正服务于用户体验。

核心内容:
1. 顶部栏与轮播图的设计优化思路
2. 分类导航创新背后的业务逻辑
3. 标签页简化与动态页增强的实用技巧
小优 网站建设顾问
专业来源于二十年的积累,用心让我们做到更好!


类别 / 设计思维   作者 / 阿 成

这是 阿成在路上公众号 的第 19 篇原创文章



这一期分享一个小程序首页的UI改版思路,我将用旧版和新版的界面对比,从产品的角度去说明设计的意图;
总结两点:

1、改版不仅仅是升级界面,也是优化交互体验

2、出彩的设计是基于对业务的理解

我们按模块来拆解,希望给大家一些思考,并且在实际项目中运用起来。

“ 顶部栏 

-  强化LOGO,弱化搜索栏  -



上图为顶部栏,左图为新版,强化了LOGO,弱化了搜索栏;从产品角度,我们监测运营数据发现,搜索频率不高,那就减少空间占位;新增LOGO和宣传语,进一步占领用户心智;

从设计角度,搜索栏模拟小程序胶囊的样式,协调、统一、对称,并且升级为全局综合搜索的功能。



“ 轮播图 

-  背景虚化,不单调不死板  -



轮播图尺寸我们不做变化,在背景增加虚化的效果,根据每张图切换而变化,让主视觉不那么单调和死板。


分类导航 

-  对业务的理解有助于提升创新的有效性  -


我们在常规双行多列的基础上,做了一些演变;过程中我们发现,每个分类其实是游戏列表的入口,那就可以运用封面来做视觉差异,因此我们尝试把打折的内容列出来:

1、从布局和交互来看是合理的

2、对用户粘性和活跃度带来帮助

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


比如订阅,就是不同游戏厂商的会员,我会从游戏公司LOGO和代表作去寻找灵感;再比如最新上架,上架时间和价格是用户比较关注的点,我会以日历和时间轴的关键词来设计;

总结:对业务的理解有助于提升创新的有效性。


“ 标签页 

-  通过归类简化了内容,减少界面层级关系  -


最后是标签页,我们通过归类,简化了内容,前面3个模块移至阅读板块,合集和组队合并到标签页,排行与专题结合,目的是减少界面层级关系;

动态页,是展示用户对游戏的讨论,新增了游戏截图,一方面给用户展示更多信息,知道玩家在讨论什么,从而加入讨论;另一方面,截图还起到装饰作用,让整个界面更加平衡;

另外还新增了玩家评价,是平台内的数据,优先展示,没有数据时则显示商店评分;
动态除了对游戏的讨论,还有对帖子的讨论,展示位置并未改动,但样式上按板块划分,优势就是帮用户分类,精准查找;劣势就是查看更多内容需要往右翻,无形中对隐藏的板块带来阅读影响。


“ 写在结尾 

后续继续分享剩下的标签页内容  -


这一期就到这里,后面我们继续分享剩下的标签页内容。

我是阿成,一位热衷产品设计的实干家,感谢阅读!觉得有收获就点点【在看】吧~

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询