广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

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

UI 设计破局:从用户体验出发,让旅游首页 “活” 起来
发布日期:2025-03-27 10:18:47 浏览次数: 844 来源:IXDC

如何打造更优质的首页?今天看下ui课学员作业优化的过程!

先来看看优化前后的效果对比:

图片

1.Banner优化

因为是一款旅游产品的首页设计,我们可以增强一些旅行的氛围感,把Banner图放大,再换一张比较有度假氛围的图片:

图片

顶部区域只有一个图片,层次还是不够,我们可以在图片底部加个渐变线条装饰,丰富层次:

图片

2.图标优化

原设计中的找搭子图标比较普通,怎么给图标添加创意点呢?

图片

先来理解下它的含义,找搭子应该是两个陌生人之间的交流,一般开启陌生人的交流会从一个「嗨~」的表情包开始:

图片

有了一个方向之后,我们可以多去找找不同类型的表情包参考,大致可以分为三类:

图片

文字类方向不适合延展,我们可以按前两种类型延展ICON:

图片

对比两种类型的图标,第1个方向的手的造型更加饱满,也更有记忆点,找搭子图标优化就完成啦:

图片

3.瓷片区优化

原页面中的三个卡片只有文字,设计也比较平:

图片

先增加图片让卡片信息更饱满:

图片

再增加一个按钮,吸引用户点击:

图片

再尝试让图片破出背景,增加设计感:

图片

卡片内容丰富后,我们先给卡片做出异形,增加卡片的亮点:

图片

这样尝试之后发现图片下方背景很空,我们可以把文案挪到左边,图片放到右侧,减少负空间:

图片

再给图片加一点倾斜:

图片

排版做好后再来丰富卡片的层次,把单色改成渐变,加入白色,让卡片更透气:

图片

再把按钮也改成渐变色:

图片

最后再加重主标题文案,让主、次文案的字重对比更明显:

图片

一起看下优化前后的对比:

图片

4.Tab栏优化

原页面中Tab栏图标旅行元素比较少:

图片

我们可以结合「出行」、「度假」关键词重新画一下:

图片

再来优化下「发布」,「发布」作为比较重要的功能,现在的加号设计太常见了:

图片

我们可以把「发布」特殊设计下,想起之前网上看到的一张照片:

图片

用手比做取景框代替常见的加号,一个比较有特色的「发布」ICON就做好了:

图片

「我的」既要有人的元素还要能体现度假、旅行的感觉,让我想起出去玩推开酒店窗户看到美景时开心的心情,可以把窗户和欢呼小人结合起来作为「我的」ICON:

图片

整体优化完成后,一起来看看优化前后的效果吧:

图片

5.总结

让我们回顾下本次都做了哪些优化吧:

1.ICON的灵感来源多种多样,表情包、照片都可以成为ICON设计的灵感

2.常规卡片变成异形,然后让内容破出卡片都是可以增加设计感的方式

3.图标最好和产品属性结合起来设计,常见形状+一点旅行元素就可以出很好的效果

最后再来看下优化前后的效果吧:

图片


-END-


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

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

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


我要投稿

姓名

文章链接

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

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

扫一扫马上咨询

和我们在线交谈!