服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

有手就会的UI小技巧,学完轻松做出高质感界面

日期: 来源:TCC翻译情报局收集编辑:蓝建杭

点击 "TCC翻译情报局关注,回复 "社群" 加入我们

本文共 2300 字,预计阅读 6 分钟

TCC 情报局的 第 173 篇 干货分享

2023 年的 第 2 


TCC 推荐:大家好,这里是TCC翻译情报局,我是李泽慧。在做界面设计时,往往细节决定成败。好的细节往往可以起到“四两拨千斤”的作用,让你的设计档次大幅提升。今天我们就来看看 web 设计中有哪些好用的小技巧吧~


当你在为下个项目创建高效、美观的 UI 界面时,有时可能只需要一些最小的调整就可以快速改善设计。

只是一些简单的微调,就可以产出客户、用户甚至是自己都真实满意的设计。在这篇文章里,我将一些微小且容易付诸实践的简单的设计技巧放在一起,加上少许的努力,就可以改善你的 设计和用户体验。那就让我们开始吧。



1. 时不时使用纯装饰性元素

1. It’s perfectly OK to use purely decorative elements from time to time


是的,屏幕内大部分的文字内容应该遵守“最佳可用性实践”原则,这是毋庸置疑的。但是,有时候你也想加入一些文字纯粹用来作装饰,这也是可以的,我们也不希望自己所有的设计都陷入平淡无奇的境地。纯粹为了装饰的原因加入一些奇特的元素是完全可以的,不需要遵守无障碍原则...只要这些元素不会以任何方式影响用户体验。灵活一点!
           增加装饰性文字(见蓝色笑脸处)



2. 让UI界面中的元素更有区分度

2. Make elements in your UIs distinguishable from one another


“按钮”和“告示”,这两个通常在你的UI界面中是独立且重要的元素。如果可以的话, 尽量尝试并确保你的用户在浏览网站或 app 时可以快速容易地将它们区分出来


“按钮”在通常情况下是优先级高的,所以确保它们是屏幕内最突出的项目,可以容易地与其他元素(即通知)作区分。

           “按钮”与“告示”样式区分开,使“按钮”在屏幕内最突出



3. 只要微量的阴影就够了

3. Just subtle amounts of shadow are all you need


我们都喜欢一个好的阴影对吧?当它被适度使用时,可以成为设计中微妙但有力的视觉线索。但是,“细微”就是此处有意思的地方了。大多时候,阴影在现实世界中是几乎不被注意的,因此在你的UI界面中也应该效仿。去掉重而深的阴影调低不透明度以达到更微妙和逼真的效果
            去掉深而重的阴影,降低不透明度



4. 使用大写字母?选用合适的字体达到视觉清晰效果

4. Using All Caps? Choose a font suitable to achieve optical clarity


在你的设计中适当地使用大写字母是一件好事。在某些文本元素上使用大写字母,可以帮助你在设计中实现与其他文本元素差异化和对比的效果,并且提升想要呈现的整体视觉效果。如果要采用大写字母,请确保选择一个合适的字体,具有较高的 "x-height"[1]和较大的字重,可以使用户的视觉更加清晰。
( [1] x-height:是指给定字体中,任何给定尺寸下小写字母x的高度。它提供了一种描述任意字体一般比例的方法。)
            全部使用大写字母时要选择合适的字体



5. 让面包屑导航突出且易于用户理解

5. Make Breadcrumbs stand out and easy to interpret for the user


面包屑导航到处都是面包屑导航。在内容丰富的网站中,面包屑导航经常被使用,但可惜它们往往没有得到应有的关爱。只需要一些小小的调整,你就可以让用户轻松且精确地找到他们在网站的位置,以及可能要去的地方。这在他们通过“搜索”功能跳转到网站较深的页面时尤其有用

始终努力确保面包屑链路中的最后一项在视觉上看起来与其他的不同,而链接也应该做得更像链接。给面包屑一点爱吧。
           最后一项要与众不同,链接要做得像链接



6. 使用高饱和度的颜色?尝试“色调”和“阴影”调和一下

6. Using highly saturated colours? Try and tone things down with a Tint or Shade


高饱和度的颜色(亮蓝色、红色、绿色等)在网站上看起来很棒,但是过度使用会造成用户的视觉疲劳特别是在使用大量文本内容的时候

如果可以尽量使用得克制一些,可以尝试与饱和颜色的柔和形态(色调与阴影不同的变体)结合使用,以避免可怕的视觉疲劳。

使用这个方法还可以将注意力引向饱和色,使最重要的内容前置和居中。而比较柔和的颜色则不那么突出,可以让用户的眼睛得到休息。照顾一下用户的眼睛吧。
           适当使用低饱和度的颜色(如右侧图例)

希望这些好用的 UI & UX 小技巧合集,可以帮助你收获更多如何在设计中通过一些小调整,产出对你和用户都更好的结果。

原文:UI & UX Micro-Tips: Volume One (marcandrew.me)
作者:Marc Andrew
译者: 蓝建航
审核:徐曼鹭
编辑:孙淑雅
本文翻译已获得作者的正式授权(授权截图如下) 


往期精选文章:

十个技巧帮助你设计一款在线学习 APP

这些色彩心理学知识教你如何传递信息

案例研究|康奈尔大学副业社区网站设计

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

网页设计师能从日式美学中学到什么?

案例研究|一款为你带来难忘体验的美食 APP

如何制作打动面试官的作品集,这里有一份完整的指导手册

如何做好用户体验项目?从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求:回归本质,打磨信息架构

TCC 视野|2021 年用户体验设计趋势分析



- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入,一起交流设计知识,了解全球设计资讯,锻炼英文能力,发掘更多可能性~
添加小助手微信,备注「社群」,即可加入读者群。

相关阅读

  • 用户研究 |你的可用性测试到底需要多少人

  • ▲点击 "TCC翻译情报局" 关注,回复 "社群" 加入我们本文共 2481 字,预计阅读 7 分钟TCC 情报局的 第 176 篇 干货分享2023 年的 第 5 篇TCC 推荐:大家好,这里是 TCC 翻译情报局,
  • 未来趋势 | 数据驱动的设计体验

  • ▲点击 "TCC翻译情报局" 关注,回复 "社群" 加入我们本文共 2951 字,预计阅读 8 分钟TCC 情报局的 第 177 篇 干货分享2023 年的 第 6 篇TCC 推荐:大家好,这里是TCC翻译情报局,我
  • “笛友会”讲座预告|2023年流量的版本答案

  • 生意的核心就是流量。有流量就有钱赚,没流量就没钱赚。只要有流量,哪怕转化和交付差一点,问题都不大。怎么引流,从哪里引流,怎么把流量变成钱,其实目前来看答案是比较固定的。我所
  • “笛友会”讲座预告|2023求职指南

  • 做求职指导是我们笛友会每年的传统,考虑到年后有很多笛友有求职跳槽的需求,我们一般会在这个时候做一些指导。从职业规划、简历、面试技巧一直讲到入职注意事项。特别是在现有

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 用户研究 |你的可用性测试到底需要多少人

  • ▲点击 "TCC翻译情报局" 关注,回复 "社群" 加入我们本文共 2481 字,预计阅读 7 分钟TCC 情报局的 第 176 篇 干货分享2023 年的 第 5 篇TCC 推荐:大家好,这里是 TCC 翻译情报局,
  • 未来趋势 | 数据驱动的设计体验

  • ▲点击 "TCC翻译情报局" 关注,回复 "社群" 加入我们本文共 2951 字,预计阅读 8 分钟TCC 情报局的 第 177 篇 干货分享2023 年的 第 6 篇TCC 推荐:大家好,这里是TCC翻译情报局,我
  • 白嫖资源丨C4D三维可视化地图,速领!

  • 大家好,我是小六。今天给大家分享一组Behance上国外大佬的C4D三维地图作品,文末附上源文件下载链接,非常不错的参考。喜欢的小伙伴,动动小手一键三连!!!原文链接:https://www.behanc