这次的首页优化,老板给加了个鸡腿!

用户头像
深圳/学生/1年前/3452浏览
这次的首页优化,老板给加了个鸡腿!
如何打造更优质的首页?今天看下ui课学员作业优化的过程
先来看看优化前后的效果对比:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwMjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
1.Banner优化
因为是一款旅游产品的首页设计,我们可以增强一些旅行的氛围感,把Banner图放大,再换一张比较有度假氛围的图片,让用户进来更加沉浸:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwMjQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
顶部区域只有一个图片,层次还是不够,我们可以在图片底部加个渐变线条装饰,丰富层次,让整体更有快乐旅行的换欢乐感:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwMjg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
2.图标优化
原设计中的找搭子图标比较普通,怎么给图标添加创意点呢?
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwMzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
先来理解下它的含义,找搭子应该是两个陌生人之间的交流,一般开启陌生人的交流会从一个「嗨~」的表情包开始:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
有了一个方向之后,我们可以多去找找不同类型的表情包参考,大致可以分为三类:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
文字类方向不适合延展,我们可以按前两种类型延展ICON:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
对比两种类型的图标,第1个方向的手的造型更加饱满,也更有记忆点,找搭子图标优化就完成啦:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
3.瓷片区优化
原页面中的三个卡片只有文字,设计也比较平:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
先增加图片让卡片信息更饱满:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
再增加一个按钮,吸引用户点击:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNjQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
卡片内容丰富后,我们先给卡片做出异形,增加卡片的亮点:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNjg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
再尝试让图片破出背景,增加设计感:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
这样尝试之后发现图片下方背景很空,我们可以把文案挪到左边,图片放到右侧,减少负空间:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwNzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
再给图片加一点倾斜:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwODA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
排版做好后再来丰富卡片的层次,把单色改成渐变,加入白色,让卡片更透气:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwODQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
再把按钮也改成渐变色:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwODg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
最后再加重主标题文案,让主、次文案的字重对比更明显:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwOTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
一起看下优化前后的对比:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMwOTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
4.Tab栏优化
原页面中Tab栏图标旅行元素比较少:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMjg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
我们可以结合「出行」、「度假」关键词重新画一下:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
再来优化下「发布」,「发布」作为比较重要的功能,现在的加号设计太常见了:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
我们可以把「发布」特殊设计下,想起之前网上看到的一张照片:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
用手比做取景框代替常见的加号,一个比较有特色的「发布」ICON就做好了:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
「我的」既要有人的元素还要能体现度假、旅行的感觉,让我想起出去玩推开酒店窗户看到美景时开心的心情,可以把窗户和欢呼小人结合起来作为「我的」ICON:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
整体优化完成后,一起来看看优化前后的效果吧:
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMjQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
5.总结
让我们回顾下本次都做了哪些优化吧:
1.ICON的灵感来源多种多样,表情包、照片都可以成为ICON设计的灵感
2.常规卡片变成异形,然后让内容破出卡片都是可以增加设计感的方式
3.图标最好和产品属性结合起来设计,常见形状+一点旅行元素就可以出很好的效果
这次的首页优化,老板给加了个鸡腿!(图ZMTUwNTMxMzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
116
举报
|
91
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】钱包icon
UI 登录界面设计模板包
【新年UI图标】礼物/活动icon
我的钱包-UI界面设计-app
3D渐变流体抽象矢量UI背景图
3D卡通UI界面图标可爱插画免扣素
APP/小程序商业项目UI模板|99个高保真UI+79个原型
Security Camera UI kit
【新年UI图标】旅行icon
盲盒APP UI设计
高级表盘系列UI源文件
新能源APP应用UIKit
拟物风质感写实UI卡片合集源文件
【新年UI图标】体育icon
【新年UI图标】秒杀icon
智能家居中心 简约 UI设计组件库
钱包ui模板
【新年UI图标】会员icon
新拟态风格 UI设计组件库
科技医疗透明柜UI界面设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
你可能喜欢
相关收藏夹
UI
UI
UI
UI
大家都在看
登录注册