本文授权转自:菜心设计铺(ID:caixinshejipu)
如何打造更优质的首页?今天看下ui课学员作业优化的过程!
先来看看优化前后的效果对比:
1.Banner优化
因为是一款旅游产品的首页设计,我们可以增强一些旅行的氛围感,把Banner图放大,再换一张比较有度假氛围的图片:
顶部区域只有一个图片,层次还是不够,我们可以在图片底部加个渐变线条装饰,丰富层次:
2.图标优化
原设计中的找搭子图标比较普通,怎么给图标添加创意点呢?
先来理解下它的含义,找搭子应该是两个陌生人之间的交流,一般开启陌生人的交流会从一个「嗨~」的表情包开始:
有了一个方向之后,我们可以多去找找不同类型的表情包参考,大致可以分为三类:
文字类方向不适合延展,我们可以按前两种类型延展ICON:
对比两种类型的图标,第1个方向的手的造型更加饱满,也更有记忆点,找搭子图标优化就完成啦:
3.瓷片区优化
原页面中的三个卡片只有文字,设计也比较平:
先增加图片让卡片信息更饱满:
再增加一个按钮,吸引用户点击:
再尝试让图片破出背景,增加设计感:
卡片内容丰富后,我们先给卡片做出异形,增加卡片的亮点:
这样尝试之后发现图片下方背景很空,我们可以把文案挪到左边,图片放到右侧,减少负空间:
再给图片加一点倾斜:
排版做好后再来丰富卡片的层次,把单色改成渐变,加入白色,让卡片更透气:
再把按钮也改成渐变色:
最后再加重主标题文案,让主、次文案的字重对比更明显:
一起看下优化前后的对比:
4.Tab栏优化
原页面中Tab栏图标旅行元素比较少:
我们可以结合「出行」、「度假」关键词重新画一下:
再来优化下「发布」,「发布」作为比较重要的功能,现在的加号设计太常见了:
我们可以把「发布」特殊设计下,想起之前网上看到的一张照片:
用手比做取景框代替常见的加号,一个比较有特色的「发布」ICON就做好了:
「我的」既要有人的元素还要能体现度假、旅行的感觉,让我想起出去玩推开酒店窗户看到美景时开心的心情,可以把窗户和欢呼小人结合起来作为「我的」ICON:
整体优化完成后,一起来看看优化前后的效果吧:
5.总结
让我们回顾下本次都做了哪些优化吧:
1.ICON的灵感来源多种多样,表情包、照片都可以成为ICON设计的灵感
2.常规卡片变成异形,然后让内容破出卡片都是可以增加设计感的方式
3.图标最好和产品属性结合起来设计,常见形状+一点旅行元素就可以出很好的效果
最后再来看下优化前后的效果吧:
文章转载:菜心设计铺,版权归原作者所有
原文链接:https://mp.weixin.qq.com/s/BBMu8tjOZ6QVndx7GagpKA
版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。
联系微信:18802086168
联系电话:18802086168
编排 | 黄春燕
终审 | 苏 菁
点这里,学习更多设计知识!
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.