火星网校
UI界面优化35个小妙招
发布时间：2024-02-28 20:52:09 浏览量：425次
配色黄金比例
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字体，可提升字体识别度
善用图标
使用图标有助于更轻松的连接内容，它使界面看起来理性而丰富，吸引用户目光，可读性更高
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
