别小看简单的UI界面，排版细节决定UI的质感！

2025-03-03 点击量：

本篇将介绍UI界面的设计细节，从UI的头像、按钮、卡片排版、文字排版4个方面，带来26个实实在在好用的设计技巧，相信看完后，大家都能快速上手应用到实际工作中。

建议收藏起来，方便随时查看～

  用户头像篇

关于用户头像这个板块的信息，如果采用昵称向上对齐，ID向下对齐的方式，两块内容就会很分散，不够聚焦。

如果头像和背景的颜色有一部分接近或者颜色一样，看起来会感觉头像好像少了一块，例如左图。为头像框添加描边，让头像更有整体性，还可以让文案对比更明显，页面看起来也会更精致。

当用户使用手机注册登录后，新用户没有头像的情况下，就要给一个默认头像，或者使用品牌IP形象，增加用户的品牌记忆。

  按钮篇

当一个页面有两个操作按钮时，可以区分出来一个最重要的按钮，引导用户更容易去进行选择。

当弹窗背景是白色的时候，会有点空荡的感觉，显得细节不够，可以为背景丰富细节，增加耐看程度。

当使用亮色按钮时，如果文字也比较亮，识别度就会很差。识别度对比一定要明显，亮底暗字，暗底亮字，画面一定不能出现识别模糊的情况。

登录板块，在用户未输入的状态下，登录/注册按钮呈现置灰状态，给人不可点击的感觉。输入信息后，激活登录按钮高亮状态，这样可以更清晰地引导用户操作下一步。

在这样的登录状态中，输入后与未输入的文字颜色需要给予一定的区分，这样便于用户区分哪些是填写和未填写的。在输入框可以增加对应的icon ，让整体感觉更丰富。

  卡片排版篇

关于投影的使用技巧，尽量选择颜色微浅或者和卡片颜色相近的投影。左图的投影使用比较深的颜色，会让画面太过沉重。