等等

小编:设计师们时常都会犯这样或那样的错误。而这些错误会增加用户使用界面时的阅读和理解时间,也同时降低了各个页面可读性。这篇文章,通过案例,详细地阐述7个实用的技巧,例如:创造出页面元素的层次关系,让各个元素间又互相搭配,提升细节度 等… 设计师们可以从这些技巧中学习到一些常见的文字信息的处理方法。

01. 使用颜色和粗细来创建层次结构

我们在进行文字排版时,时常会犯一个常见的错误,那就是过于依赖通过字体的大小来控制层次结构。比如常见的区分文字信息的处理方法是:重要突出的内容就用特别大的字号;次要文本就用特别小的字号。但我建议不要把所有设计的目标的都放在字体大小上,可以试着使用颜色或字体的重量来达到同样的目的。

如果需要突出某个内容,可以使用加粗的字重;次要文本可以用明度低一点的颜色。

同时,你需要把数目限制在两种到三种颜色:主要内容使用深灰色,例如文章标题,但尽量不要使用纯黑色;二级内容使用灰色,例如文章发表的日期;辅助内容可以使用浅灰色,例如页脚中的版权声明。

同样,两种字重也能够满足日常的文字排版工作:大多数文本的使用常规字体粗细,需要强调的文本使用较重的字体粗细。

在界面设计中,尽量避免使用细体 ; 细体可以用于大标题,但是在屏幕分辨率较小的尺寸下难以阅读。如果你想使用较轻的重量来减弱某些文本,可以使用较浅的颜色或较小的字体大小。

 

02. 不要在彩色背景上使用灰色文字 

在白色背景上,使文本变成浅灰色是进行强调的好方法,但应用在在彩色背景上就并没那么好了。这是因为我们看到的灰色与白色之间的对比减少了。

可以这样理解:我们的目的是创建层次结构,方法是使文本更接近背景颜色,而使其变为浅灰色是其中一种情况。

 

在使用彩色背景时,有两种方法可以使文本更接近背景颜色:

 1) 降低白色文本的不透明度
使用白色文本并降低不透明度,这样可以让背景颜色稍微渗透,这样一来就可以不用和背景发生冲突的方式去强调文本。

 2) 使用同类色进行搭配
使用背景色的同类色,这比在背景是图像或图案的时候减少不透明效果更好,有时候减少不透明会让文本感觉太单调或被冲淡。选择与背景颜色相同的颜色,调整饱和度和亮度,直到它看起来和页面融为一体为止。

 

03.使用自然的阴影

尽量不要使用大的模糊和扩展值来加重阴影,而是添加一个垂直的偏移量。这样的投影看起来更自然,这是因为模拟了一个从上面照射下来的光源,就像我们以前在现实世界中看到的一样。

上述建议也适用于内阴影,比如下图的输入框:

更多的阴影使用技巧,可以参考谷歌的Material Design。

 

04. 减少边框的使用

如果需要在两个元素之间创建分隔时,应该尽量避免使用分割线和描边。虽然分割线和描边都是区分两个元素的好方法,但它们不是唯一的方法,使用太多边框可能会让你的设计感到混乱。

 

 1) 使用阴影边框
框阴影可以很好地勾勒出元素的轮廓,就像边框一样,但也可以更巧妙地实现相同的目标,而不会让人分心。

 

 2) 使用两种不同的背景颜色
如果要对界面中的两个模块内容进行区分,赋予稍微不同的背景颜色即可。如果已经在边框之外使用了不同的背景色,试着删除边框,即使去掉应该也是可以满足需求。

 

3) 增加间距
还有什么比简单地增加元素之间的间距更好的方法呢?将元素之间的间距调大是一种非常好的方法,可以在不引入任何新

 

UI的情况下,很直观的对这两组元素进行区分。

 

05. 如何设计页面中的小图标

如果设计中的页面会用到一些大图标的时候,比如登录页面的功能介绍,大部分人会直接去下载网上的免费图标,通过放大缩小尺寸来满足需求。
矢量图标如果被放大,质量是不会受到影响的。虽然放大尺寸不会影响质量,但是如果你把本来是16px的大小放大到48px尺寸,然后直接应用的话,这样会显示缺乏细节和不专业。

小图标可以通过其他方式进行变换,可以尝试将它们包含在另一个形状中,比如为其提供一个背景颜色。这样可以使用实际图标更接近其预期大小,同时仍然可以填充更大的空间。

 

06 使用粗线条为平淡的设计增色

这是一个很简单的技巧:在界面的某些部分添加色彩相对鲜艳的边框,进行一些亮点突出,可以避免设计的单调。

 

例如,在警告消息的旁边添加一个粗线条:

 

在分段控件中,选中状态可以添加一个强调的选中态:

甚至在整个布局的顶部:

这些调整都不需要任何具有图形设计经验的来专门设计,但却可以大大的提升设计感。如果不擅长挑选颜色,可以尝试从Dribbble搜索调色板进行选择,以避免被传统颜色选择器的无限可能性所淹没。

 

07. 并非每个按钮都需要背景颜色

当用户可以在一个页面上执行多个操作时,很容易陷入完全基于语义设计按钮操作的陷阱。语义是按钮设计的一个重要部分,但是它还有一个更常见的重要维度:层次结构。

页面上的每个操作都位于金字塔的某个位置。大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及一些很少使用的三级操作。在设计这些操作按钮时,通过层次结构传达它们的位置非常重要。主要行动操作应该是显而易见的,高对比度的背景色在这里很有用;次要行动应该清楚但不突出。轮廓样式或者较低对比度的背景颜色是很好的选择;三级行动应该可被发现但不引人注目,像链接一样设置这些操作通常是最好的方法。

 

 

“警示性的行动操作是怎么样的,不应该是红色吗?”其实这是不必要的!如果破坏性操作不是页面上的主要操作,则最好给它进行二级或三级按钮处理。

 

如果确认的动作实际上是界面中的主要动作时,可以使用强调、红色和粗体的样式,比如在确认对话框中:

 

 

原文地址:Medium

译文地址:51UXC(公众号)

译者:51UXC 翻译社

 

转载请注明:学UI网 » 多图案例:7种提升设计的实用技巧

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
老板说你的设计没有视觉冲击力?你肯定没用这2个技巧老板说你的设计没有视觉冲击力?你肯定没用这2个技巧
被忽略的榜单设计被忽略的榜单设计
iPhone 2018 全面屏适配详解·含 XS、Max、MRiPhone 2018 全面屏适配详解·含 XS、Max、MR
顶部导航交互方式的灵活应用(以iOS系统为例)顶部导航交互方式的灵活应用(以iOS系统为例)
六种常见隐藏菜单六种常见隐藏菜单
产品设计中的游戏化设计策略产品设计中的游戏化设计策略
目前市面上最完整的GIF导出方案目前市面上最完整的GIF导出方案
界面中被忽略的模块加载界面中被忽略的模块加载
搜索框设计样式与分析搜索框设计样式与分析
58APP租房门面改造计划58APP租房门面改造计划