赞助商
立即赞助

界面不精致,往往是你忽略了这些设计细节

UI设计3年前 (2021)更新 流光
2.3K 0 0

为什么个简单界,你做出来后觉不够精致,很可能是为你遗漏了些容易忽略设计细节。文者通一个案例,细致微的教你何改良你的设计,一学习来吧!

我自己读完此文有个很大感触:做好设计不能全靠数学精准实施,很多时候是要相信自己眼睛,以心理感知作为判断标准来辅助优化设计,最后结用户来说或许才是最优。

每当你看到一个界面时,你的大脑实都在欺骗你。无论你如何努使事物看起来一致——旁观者的眼睛往往会同意,因为我们在现实生中是通过大脑来感知物体的。,作为设计师,我们唯一的择只是反向「欺骗」户的大脑(译者注:在视觉上)。在本中,我将向你展示一个设计组件需要从哪些地方做改善,一起来看看这个弹例子。

界面不精致,往往是你忽略了这些设计细节

△ 7处已经做了调整

界面不精致,往往是你忽略了这些设计细节

△ 没有做调整

着去比较调整前后的视觉觉。直对比的话可能难出别,所以做了一个 GIF 帮助大家进行对比。

界面不精致,往往是你忽略了这些设计细节

一、调整重心

现实世界中的任何物体都会受到重的影响。意思是,一旦没有支撑就会掉来。我们的大脑将现实世界的期望自应到界面的元素上,并假设屏幕上的任何物体都在「尝试」掉来。即使当物体全静止时,我们的大脑仍然认为它会向移(物体上方的空间会增,面的空间会减)并对进行视觉调整。一个美垂直中的对象,在实际中看到的时候会偏低。为了使物体在视觉上保持一致,我们必须反补偿重的「预期」,把物体略微上移。如图:

界面不精致,往往是你忽略了这些设计细节

物体越大,它就越「重」,从而「降」得更快。我们需要为更大的物体补偿更多,而更小的物体补偿更。 粉色显示容纳「更小」按钮的容器:

界面不精致,往往是你忽略了这些设计细节

二、调整圆角按钮的边距

将圆形按钮稍稍移动到其也是个不主意。

界面不精致,往往是你忽略了这些设计细节

否则,按钮会被认为略微不齐,视觉上「内凹进去了」。时,如按钮圆比较小,则在边缘看起来是条线,这时候不需要进视觉补偿了。

界面不精致,往往是你忽略了这些设计细节

三、调整标题边距

同样的原则也适用标题,特别是大的标题。 随着字大小的增大,每个字母的周围空白变得更加大,并打破左边界的视感。 为改变一点,我做一个小的负左边距:

界面不精致,往往是你忽略了这些设计细节

当,将它应用设计中的每一个标题是很费精力的一件,因为需要一个手动整程,但是对更突出的标题(例,在一个登录页面上)是值得的。

四、调整文本块的右边框

使用左对齐文时,文块的右边缘变得「不整齐」,并且文内容看来偏移。 类似圆形按钮的情况,我将把整个文块稍微往右边移动,使其视居中:

界面不精致,往往是你忽略了这些设计细节

样,右边缘就更靠近右边隐含的垂直对齐规则。果我们不么整,则有明显的感差异:

界面不精致,往往是你忽略了这些设计细节

五、调整颜色

根据填充区域的不同,颜色的感知不同的。 应用于白色背景的文本颜色,将比同样块的相同颜色的文字显得加亮一些。 相反,如果我们深色背景置彩色文本,颜色看起会变得暗。 背景会「吸收」文字颜色,总让视觉转向背景颜色。 了应这一事实,当我浅色背景使用文字时,我把颜色当调暗一点,深色的背景把颜色当调亮。

界面不精致,往往是你忽略了这些设计细节

字体尺寸重越小,就越需补偿:

界面不精致,往往是你忽略了这些设计细节

六、调整灰度

这是颜色调整的一个例。尝选用100%黑色并修改其不透度来建立灰色文字,而不是直置颜色值:

界面不精致,往往是你忽略了这些设计细节

这,当你变暗背景,你的灰色不会被「不清」:

界面不精致,往往是你忽略了这些设计细节

半透黑色有助于实现可读的结果,而无需创建许多不同的式。 对于较深的背景,半透色也是一种选择:

界面不精致,往往是你忽略了这些设计细节

七、调整投影浓度

我使同的阴影浓取决于产生阴影物体的颜色。对于较暗的物体,应使阴影更强烈,而对于较亮的物体,应使阴影更轻薄:

界面不精致,往往是你忽略了这些设计细节

如果没有这个技巧,假设两个阴影都具有相同的透明,那么较亮物体的阴影会在较暗物体的阴影旁边看起来更暗:

界面不精致,往往是你忽略了这些设计细节

总结

然,并个项目都需要花费额视觉调时,如您正在开发界需要特视并需要脱颖而出,使用上述所有技巧将会带来更加和谐结。

原链接:《Optical adjustments in components》 Anton Lovchikov

欢迎关注译者的公众号:「 彩云译计」

界面不精致,往往是你忽略了这些设计细节

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

想必你还在对HJUX视觉伙伴们给出的《2018年值得设计师学习的六大视觉设计趋势》连连称赞,那么赞别停!今天团队的交互伙伴们...
2018设计趋势
Elaine Zhu :最近已经是个抖友了!每天抖音中毒停不下来。 因为微视是腾讯力推的产品,出于好奇也下载了。作为交互设计师,...
App分析
来自 Prototypr 的干货合集会更加具有针对性一些──一共26款工具,并且被精心的分类了。从原型插件到用户测试工具,从字体到求...
干货
在设计的过程中,占位符是一个很重要的存在。尤其是在网页设计项目当中,需要图片素材填充特定的位置来呈现当前设计的效果,...
占位符
腾讯文档是一款可多人协作的在线文档。支持 Word 和 Excel 类型,打开网页就能查看和编辑,云端实时保存;可多人实时编辑文档...
ISUX
在业务迭代周期内,产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中,有时会出现一些拿捏不定的设...
可用性测试
平时的工作中,经常会遇到一些不舒服但是又说不上理由的交互问题。本文作者从争论的点出发,有理有据的说明这些问题,并给出...
App设计
通过对支付宝的研究与观察后,笔者看到了支付宝推出的一个「笔笔攒」功能,并对其中的用户体验细节进行了研究与分析。 支付...
产品细节