我要投稿

这次的首页优化，老板给加了个鸡腿！

发布日期：2025-04-11 09:03:44 浏览次数： 968 来源：菜心设计铺

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

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

1.Banner优化

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

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

2.图标优化

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

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

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

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

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

3.瓷片区优化

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

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

再增加一个按钮，吸引用户点击：

再尝试让图片破出背景，增加设计感：

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

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

再给图片加一点倾斜：

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

再把按钮也改成渐变色：

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

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

4.Tab栏优化

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

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

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

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

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

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

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

5.总结

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

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

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

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

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

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

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

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

相关资讯

2025-07-30

网站建设服务全解：靠谱服务商怎么选？避坑指南来了！

2025-07-30

外贸官网建设和定时周期更新有没有用？

2025-07-30

深圳企业必看！9 年口碑深圳网站制作公司，专治流量低、转化差！

2025-07-30

中景新程物流集团官方网站焕新上线

2025-07-30

通过案例层层剖析一个好官网的鉴定标准

2025-07-30

安全：生产环境不要在 JS 中暴露后端接口地址，麻烦给写一个 vite 插件处理下

2025-07-30

学校官网怎么做呢？看这里！

2025-07-30

政策资讯 | “易南沙”微信小程序上线，指尖办事再提速！

查看优网建站案例

查看优网建站案例

了解海外独立站

了解海外独立站

获取您的信创方案

获取您的信创方案

热点资讯

跨境独立站-建站前准备（实操篇）

2025-07-30

网站建设服务全解：靠谱服务商怎么选？避坑指南来了！

2025-07-30

网站建设案例大揭秘：普通企业如何用一个网站逆袭？

2025-07-30

网站建设流程全揭秘：从零到上线，普通企业如何玩转建

2025-07-30

商家啥要做小程序开发？这几个理由太实在！

2025-07-30

抖音、小红书刷不停，企业官网依然必须要有？它藏着你不知道的 5个秘密

2025-07-30

想要做网站的公司必看，能让网站建设少走弯路、更贴合业务需求。

2025-07-30

大家都在看

重要通知！视频号小店和微信小商店均升级为微信小店：开启微信电商生态新篇章，更广阔的营销渠道和流量入口

2024-11-12

分享|20个极简主义的国外简洁网站设计

2024-10-23

大师们的杰作！简约网页设计必备的案例合集

2024-10-23

挖掘全球9个顶尖创意网站

2024-10-19

人工智能官网设计|引领未来Artificial intelligence official website design

2024-11-13

小程序商城开发，让您的品牌走在移动电商前沿！

2024-11-16

大厂出品！中西方电商网站设计差异之谜！

2024-10-25

查看优网建站案例

查看优网建站案例

了解海外独立站

了解海外独立站

获取您的信创方案

获取您的信创方案

联系我们

020-8556 4311

广州总公司

地址：广州市华景路37号暨南大学科技大厦6楼（整层）

18026208884

深圳分公司

地址：深圳市福田区车公庙泰然九路盛唐大厦西座1402

关于优网

优网科技成立于2005年，专注高端网站建设、企业微信开发、微信小程序开发、微信公众号开发、APP开发等业务。我们致力于提供打通企业的品牌形象、营销拓客、客户成交、产业服务的链路解决方案，希望成为优秀企业优选的互联网应用服务商。

网站地图常见问题联系我们

KEYWORD：

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设

公安局备案号： 44010602000978号
备案号：粤ICP备09025660号广州优网计算机科技有限公司
Copyright©2025 All Rights Reserved

关注优网科技

关注优网科技

我要投稿

专属顾问

扫码咨询您的优网专属顾问！

专属顾问

扫一扫马上咨询

扫一扫马上咨询

扫一扫马上咨询