配色黄金比例

60%+30%+10%的原则是色彩平衡的最佳比例，60%使用主色调，30%使用辅助色，10%使用点缀色…

阴影不是纯黑色

在设计中常犯的错误是认为需要一个不透明黑色来制作阴影，阴影是根据背景色及产品色调来调整

仅显示重要信息

在显示对用户重要的信息时避免多个步骤，它不仅看起来干净，而且还可以节省时间并改善用户体验

使用卡片获得创意

使用具有更多空白空间的可选卡片来帮助用户做出明智的决定，在设计定价计划时效果最佳

层级关系

按项目的重要性或权重的顺序，排列元素之间建立视觉关系，然后为每个元素添加不同的视觉权重

图片元素重叠

在涉及个人资料卡片时，可添加重叠元素，以增加设计的深度，并赋予其更清晰的含义

空状态

界面会出现（无网络空状态），简短一句话文字表达不够情感化，绘制对应状态插画提升用户共鸣

图标一致性

设计图标时，16－24 px绘制的图标大小不一致，缺乏细节，不成比例的“矮胖”添加底部圆即可

使用单选按钮

当选项少于5个时，优先使用单选按钮，当大于7个时，下拉菜单是首选，大部分情况下无需全部展开

毛玻璃卡片

界面上方有卡片时，纯色卡片会遮挡产品信息，为了避免这种情况可给卡片添加毛玻璃效果

善用图表

产品信息为数字或者百分比时，多尝试使用图表展示给用户更直观的体验，可视化效果更棒

添加背景元素

背景为纯色比较单调时乏味时，可加入渐变色或者几何形状或者线条，增加高级感，使背景更饱和

区别按钮层级

产品出现多个按钮时使用不同按钮颜色或样式，以强调按钮优先级来创建层次结构

颜色选择

后台系统图标类颜色选择尽可能明快轻盈，避免选择饱和度，亮度，明度较低的颜色，看起来暗淡无光

优先级按钮

突出购买按钮优先级被用户大力吐槽，从商家及运营角度来说，想让用户点击预订，大大提高转化率

文字识别度

图片较为复杂时，文案信息可读性较弱，可尝试给文案添加底色是个很好的选择

卡片间距留白

文案较多时尽可能的留白分组给卡片保留喘息空间，主次分明、更具易读性、辨识度

视觉对齐

根据米勒-莱尔错觉原理，应视觉对齐来测定设计图，当碰到字母ACOQSTCW时，更应该注意对齐

优先使用按钮

不要总是只依赖图标，可以使用文本标签应放在页面比较显眼的位置

选择合适字体

设计中处理文本时，选择正确的字体将影响你的文本所有的调性，柔和，友好或正式严肃或有趣

椭圆矩形/超椭圆

APP金刚区作为主要功能入口，椭圆矩形效果更好，比圆角矩形更圆润，又没有圆形那么圆，可多尝试

减少线的使用

瀑布流信息尽可能的减少线的使用，增大间距，保持留白，也可通过面来优化线段，达到更好的视觉效果

英文数字别用中文字体

中英文不混用一种字体，中文即中文字体，思源黑体、苹方等，英文即英文字体Roboto SF-UI Arial等

表单分隔线/面

进行表单设计时表单分隔线框调整为面时，页面会更简洁舒适，版面更干净，用户体验更佳

层级清晰

文案信息较多时，层级不清楚，可通过调整字号、加粗颜色等来优化页面，使整体版面信息分层更明了

渐变背景/元素

给背景添加渐变效果可提升设计图质感，适当增加不规则形状渐变细节更高级，不会像左边纯色那么单调

卡片排版

在设计单选按钮时，使用具有更多空白空间的可选卡片来帮助用户做决定，在设计定价计划时效果更佳

文本对齐

拿小红书举例，评论区用户头像位于左侧，用户名称及内容位于右侧的这种对齐方式提升了可读性

文本行高

使用排版时适当使用留白，文本越小，行高越大，文本越大，行高越小，提升用户易读性

渐变蒙版

文本信息与背景相融合时，为图像添加一个简单的渐变叠加，使文本更易于阅读，可读性较高

双倍间距

对末元素使用双倍间距，UI看起来会更加平衡，对头像使用了24px的填充，并将图标的间距加倍

双边框圆角半径

使在较大的形状上使用两倍大的圆角半径，头像使用了18 px的圆角，卡片使用了36 px的圆角

给头像添加描边

在复杂背景上使用时，头像往往会融入背景，为避免混合不易识别，为头像添加白色描边，更易区分

字体识别度

许多字体容易混淆字母形式，特别是与“i”和“L”，左边为Arial字体，右边为Verdana字体，可提升字体识别度

善用图标

使用图标有助于更轻松的连接内容，它使界面看起来理性而丰富，吸引用户目光，可读性更高