最近有小伙伴在后台问我,日常设计中如何提高设计细节,苦恼第一稿出来的界面总是少点什么。今天就来分享UI设计细节的实用技巧,下面开始。
注意按钮的应用
在UI设计中,按钮随处可见,但是你真的用对了吗?
一个系统里面一般有,一级按钮、二级按钮和三级按钮等,设计时候需要注意合理选择运用,一般是一级按钮和二级按钮搭配或者一级和三级按钮搭配。
上图设计中,左侧均是填充按钮,但是无层级。右侧可以明显区分,这样用户可快速感知重要信息。
来源Dribbble的优秀案例
使用对比来创建层级
能产生对比的方法有很多,比如可以使用颜色、粗细、大小、间距等。但如果单纯使用一种,效果并非很好,可以将这些关键要素组合使用。
如上图,左侧设计图,列表第一行文字和第二行仅仅通过大小创建层级,颜色并不明显。右侧使用粗细大小权重和颜色创建层级的列表。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
备注:大家集合我刚刚说的关键点,看看优秀案例。
减少分割线
通常我们在遇到列表场景时,会经常下意识添加分割下来区分层级,其实我们可以根据产品整体设计语言来定义,可以减少分割线出现次数。
左边设计图中,分割线显得有点累赘,当我们可以清晰表达功能时,可以去掉分割线。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
来源Dribbble的优秀案例(列表无分割线,运用对比凸显层级)
给图标加个底
图标使用底色,保持画面平衡,有视觉焦点。使用圆底背景还可以确保图标整体性,避免了杂乱。
如上图,列表设计中,如果去掉底色,列表部分就会显得不平衡,缺少重点,违反了常用的 F 阅读模式。
来源Dribbble的优秀案例(延伸运用)
来源Dribbble的优秀案例
来源Dribbble的优秀案例
注意图标光学效果
绘制图标时候,特意容易忽略圆形和方形图标的尺寸,这样就会显得方向图标会比圆形大。
来源Google材料设计规范
根据光学原理,尝试如下两图标。
因此在绘制图标时候,一定要注意视觉感官上是大小一致的。
去掉卡片分割线
在设计布局中,卡片容器可谓是运用较多的一个复合组件。在设计时候可以去掉描边通过微投影拉开层级。
上图左侧设计中,在卡片边缘添加细微描边,这样设计反而增加累赘。可以采取右侧思路,通过投影和背景产生区分。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
写在最后
今天讲了6种实用技巧,在日常设计工作中,它们运用频率较高的,这里只是抛砖引玉,更多优秀的设计尝试探索,还需要大家在设计中灵活应对。
原文地址:功夫UX(公众号)
下一篇 LOGO设计图形如何延伸?
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题,火星帮你解答探讨并理解游戏开发中的UE5网络课程,提升游戏开发者的技能和专业知识,是教育游戏开发的重要途径。
此文章将详细介绍UE5智慧城市课程的内容,学习路径以及如何通过该课程提升个人技能。浓厚的实践性质让学生在学习中得到真实成果。
对于热衷游戏开发和设计的从业者和学习者,火星时代教育提供了高质量的UE5就业培训课程和教育资源,使学员能够在实际工作中更好地应......
探讨UE5模拟仿真如何在培训基地进行技术学习的实际应用,以及这如何改变教育培训的方式。
本文章详细探讨UE5设计师的学习费用,帮助读者理解在掌握UE5的设计和开发技能上需要的投资。
本篇文章将详细讲解UE5数字展厅培训班价格以及课程内容。其中还将包含具体的课程特色介绍,以及火星时代教育平台在相关培训方案的设......
1. 打开微信扫一扫,扫描左侧二维码
2. 添加老师微信,马上领取免费课程资源
同学您好!