火星网校
UI设计细节实用技巧
最近有小伙伴在后台问我，日常设计中如何提高设计细节，苦恼第一稿出来的界面总是少点什么。今天就来分享UI设计细节的实用技巧，下面开始。
注意按钮的应用
在UI设计中，按钮随处可见，但是你真的用对了吗？
一个系统里面一般有，一级按钮、二级按钮和三级按钮等，设计时候需要注意合理选择运用，一般是一级按钮和二级按钮搭配或者一级和三级按钮搭配。
上图设计中，左侧均是填充按钮，但是无层级。右侧可以明显区分，这样用户可快速感知重要信息。
来源Dribbble的优秀案例
使用对比来创建层级
能产生对比的方法有很多，比如可以使用颜色、粗细、大小、间距等。但如果单纯使用一种，效果并非很好，可以将这些关键要素组合使用。
如上图，左侧设计图，列表第一行文字和第二行仅仅通过大小创建层级，颜色并不明显。右侧使用粗细大小权重和颜色创建层级的列表。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
备注：大家集合我刚刚说的关键点，看看优秀案例。
减少分割线
通常我们在遇到列表场景时，会经常下意识添加分割下来区分层级，其实我们可以根据产品整体设计语言来定义，可以减少分割线出现次数。
左边设计图中，分割线显得有点累赘，当我们可以清晰表达功能时，可以去掉分割线。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
来源Dribbble的优秀案例（列表无分割线，运用对比凸显层级）
给图标加个底
图标使用底色，保持画面平衡，有视觉焦点。使用圆底背景还可以确保图标整体性，避免了杂乱。
如上图，列表设计中，如果去掉底色，列表部分就会显得不平衡，缺少重点，违反了常用的 F 阅读模式。
来源Dribbble的优秀案例（延伸运用）
来源Dribbble的优秀案例
来源Dribbble的优秀案例
注意图标光学效果
绘制图标时候，特意容易忽略圆形和方形图标的尺寸，这样就会显得方向图标会比圆形大。
来源Google材料设计规范
根据光学原理，尝试如下两图标。
因此在绘制图标时候，一定要注意视觉感官上是大小一致的。
去掉卡片分割线
在设计布局中，卡片容器可谓是运用较多的一个复合组件。在设计时候可以去掉描边通过微投影拉开层级。
上图左侧设计中，在卡片边缘添加细微描边，这样设计反而增加累赘。可以采取右侧思路，通过投影和背景产生区分。
来源Dribbble的优秀案例
来源Dribbble的优秀案例
写在最后
今天讲了6种实用技巧，在日常设计工作中，它们运用频率较高的，这里只是抛砖引玉，更多优秀的设计尝试探索，还需要大家在设计中灵活应对。
原文地址：功夫UX（公众号）
下一篇 LOGO设计图形如何延伸？
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
为给新片造势，迪士尼这次豁出去了，拿出压箱底的一众经典IP，开启了梦幻联动朱迪和尼克奉命潜入偏远地带卧底调查 截至11月24日......
-
此前Q2问答环节，邹涛曾将《解限机》首发失利归结于“商业化保守”和“灰产猖獗”，导致预想设计与实际游玩效果偏差大，且表示该游戏......
-
2025 Google Play年度游戏颁奖：洞察移动游戏新趋势
玩家无需四处收集实体卡，轻点屏幕就能开启惊喜开包之旅，享受收集与对战乐趣库洛游戏的《鸣潮》斩获“最佳持续运营游戏”大奖，这不仅......
-
说明：文中所有的配图均来源于网络 在人们的常规认知里，游戏引擎领域的两大巨头似乎更倾向于在各自赛道上激烈竞争，然而，只要时间足......
-
在行政服务优化层面，办法提出压缩国产网络游戏审核周期，在朝阳、海淀等重点区将审批纳入综合窗口；完善版权服务机制，将游戏素材著作......
-
未毕业先就业、组团入职、扎堆拿offer...这种好事，再多来一打！
众所周知，火星有完善的就业推荐服务图为火星校园招聘会现场对火星同学们来说，金三银四、金九银十并不是找工作的唯一良机火星时代教育......
