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

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

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

优网知识库

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

这方案我喜欢,就是开发看了要翻白眼
发布日期:2025-04-29 08:58:05 浏览次数: 821 来源:体验进阶

老规矩,上干货!
一.按钮精度
当你的按钮做成这样被客户说“不行,这样也太普通,太随意了”,你是否没有头绪该如何优化??‍♂️
不慌!我们带着精度提升小技巧来了,先看看局部优化前后对比图吧??
步骤如下 ⬇️
① 造型调整-按钮:
首先针对客户说的普通,我们就可以尝试把常规的圆形改为圆角矩形,并适当调整icon在图形内的占比
② 造型调整-icon:
按钮造型OK后,再来看看里面的图标,不难发现暂停是2个竖线(线性图标),挂断则是一个电话(面性图标),它俩不统一;所以我们需要对其进行统一,以暂停按钮为主,我们来调整挂断按钮
③ 颜色调整:
原暂停图标的颜色是灰色,而挂断图标又是红色,视觉上就会造成暂停“弱于”挂断,我们需要调整其明度让2个图标整体更加和谐
接着,我们修改按钮的颜色,只需降低透明度即可
④ 加投影:
为了进一步增加按钮的质感,我们可以在它的下方加上合适的投影;并根据页面的整体色调,进一步调整图标的色相,使按钮更好的与页面保持和协统一
这样就调整好了,最后再来看看整体的对比效果吧:
二.卡片精度1
再来看另一个案例,图标用心画了很久,但还是草率加个矩形包起来就完事了,导致卡片整体就差点意思
怎么变精致呢?先来看看优化部分的对比图:
步骤如下 ⬇️
① 调整容器样式:
在整体的排版没有问题的情况下,我们可以先将纯色块的容器调整为渐变的形式,再加上描边(注意描边也是渐变哦)
② 添加倒影:
调整后好了很多,但还是略显单薄,我们可以给图标加上倒影,使画面的层次更加丰富
只需简单的2步,就能然原本普通的卡片变得有设计感,是不是很神奇。再看看对比效果吧:
卡片精度2
同样的技巧,我们也可以运用于另一个案例上
步骤如下 ⬇️
① 调整容器样式:
原容器是白色降低透明度+描边,整体氛围感不足;我们可以看到图标都是红色调的,所以大胆一点,我们的容器和描边也可以是红色调的
② 图标添加投影:
容器样式调整完后,因为图标是发光的,必然会存在投影,我们再加上投影即可;需要注意这里的投影添加方式(记笔记✍️
同样的方法去调整剩下的2个内容,整体就优化完成了,再来看看对比效果:
卡片精度3
这是你做的课程卡片,客户看了说“不够简洁,我想要高级一点的”
怎么改?先来看看优化前后的对比图:
步骤如下 ⬇️
① 容器调整:
原课程卡片使用白色矩形包裹课程图片的形式,我们可以尝试去掉外层的白色,将课程图片铺满整个卡片
② 优化文字信息:
去掉右上角的时间标签,与课程名称上下排列并注意层级关系,“去看看”按钮改为用箭头符号表达,避免全是文字导致视觉看起来很单一
③ 优化遮罩:
调整后整体效果比之前简洁很多,但是图片上的遮罩还是太黑,显得不够高级,我们可以改为毛玻璃的效果增强卡片的质感
④ 整体再调整:
到这一步基本就差不多了,再整体看一看,发现按钮有点粗糙是一个大白块儿,那么微微调整一下
最后再来看看优化前后的对比吧:
叮!知识已到账
本次关于“精度”优化的分享到这里就结束啦!? ,希望大家能从中获得一些启发和灵感,让自己的UI设计更加出色和有趣!加油哦!?


直播预告|邹咿ZoeYZ:

都说要设计以人为本,而用户分析就是设计师的“基本功”。 理想情况,通过问卷或者访谈等方式获取到用户信息再作分析是最好的,但大部分的需求都不会提供那么充分的准备时间。所以我们也需要具备在没有用研的情况下,把用户分析做好的能力。 这里面包括非用研的收集信息能力,但最核心的还是理解用户差异、行为模式、场景和痛点的这些系统性分析框架。

我是HCI 人交互科班出身,曾经很扎实地跟着《About Face》、《设计心理学》提供的方法来做用户分析,但发现真正运用到实际设计方案上时,很多东西不是那么容易落地的,为此我用很多年的时间总结出一套基于经典理论,但更接地气能在国内这个职场环境落地的用户分析与设计方法。

5月12日晚 20:30我会做一个视频直播,给大家分享一下我在这方面的心得。


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

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

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


我要投稿

姓名

文章链接

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

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

扫一扫马上咨询

和我们在线交谈!