火星网校
设计细节如何提高?
发布时间：2024-04-03 15:05:19 浏览量：115次
最近有小伙伴问我，日常设计中如何提高设计细节，苦恼第一稿出来的界面总是少点什么。之前写过一篇高级细节，可以去看看。
今天分享第二部分实用细节技巧，下面开始。
注意按钮的应用
在UI设计中，按钮随处可见，但是你真的用对了吗？
一个系统里面一般有，一级按钮、二级按钮和三级按钮等，设计时候需要注意合理选择运用，一般是一级按钮和二级按钮搭配或者一级和三级按钮搭配。
上图设计中，左侧均是填充按钮，但是无层级。右侧可以明显区分，这样用户可快速感知重要信息。
来源Dribbble的优秀案例
使用对比来创建层级
能产生对比的方法有很多，比如可以使用颜色、粗细、大小、间距等。但如果单纯使用一种，效果并非很好，可以将这些关键要素组合使用。
如上图，左侧设计图，列表第一行文字和第二行仅仅通过大小创建层级，颜色并不明显。右侧使用粗细大小权重和颜色创建层级的列表。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
备注：大家集合我刚刚说的关键点，看看优秀案例。
减少分割线
通常我们在遇到列表场景时，会经常下意识添加分割下来区分层级，其实我们可以根据产品整体设计语言来定义，可以减少分割线出现次数。
左边设计图中，分割线显得有点累赘，当我们可以清晰表达功能时，可以去掉分割线。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
来源Dribbble的优秀案例（列表无分割线，运用对比凸显层级）
给图标加个底
图标使用底色，保持画面平衡，有视觉焦点。使用圆底背景还可以确保图标整体性，避免了杂乱。
如上图，列表设计中，如果去掉底色，列表部分就会显得不平衡，缺少重点，违反了常用的 F 阅读模式。
来源Dribbble的优秀案例（延伸运用）
来源Dribbble的优秀案例
来源Dribbble的优秀案例
注意图标光学效果
绘制图标时候，特别容易忽略圆形和方形图标的尺寸，这样就会显得方向图标会比圆形大。
来源Google材料设计规范
根据光学原理，尝试如下两图标。
因此在绘制图标时候，一定要注意视觉感官上是大小一致的。
去掉卡片分割线
在设计布局中，卡片容器可谓是运用较多的一个复合组件。在设计时候可以去掉描边通过微投影拉开层级。
上图左侧设计中，在卡片边缘添加细微描边，这样设计反而增加累赘。可以采取右侧思路，通过投影和背景产生区分。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
写在最后
今天讲了6种实用技巧，在日常设计工作中，它们运用频率较高的，这里只是抛砖引玉，更多优秀的设计尝试探索，还需要大家在设计中灵活应对。
想要学习或者提升设计可以来aaa教育进行了解。
相关推荐：
上一篇 北师大未来设计学院在第六届中国教博会发布五项PBL大挑战项目
下一篇 B 端设计
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
4. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
