懒猫 关于用户界面设计的十个小窍门
加入收藏 评论

关于用户界面设计的十个小窍门

2 年前 发布

我们大多数人都是从最小的知识点学习UI设计知识的,在工作中遇到的问题,我们可以通过书籍和文章来解决,并且了解配色、排版、布局等方面的工作原理。但今天我将分享一些从不同设计师那里学来的小技巧和自己一些小的心得体会。“不一样”的东西不一定就是错的,这是我们如何

我们大多数人都是从最小的知识点学习UI设计知识的,在工作中遇到的问题,我们可以通过书籍和文章来解决,并且了解配色、排版、布局等方面的工作原理。

但今天我将分享一些从不同设计师那里学来的小技巧和自己一些小的心得体会。

“不一样”的东西不一定就是错的,这是我们如何把设计方案从良好改进到更好的的基础。

1.“这段文案很重要,能不能再大一点?”

需要区别内容层级的情况下,单纯使文字更大以强调重要性通常不能解决问题,如下图:

字体层次结构不仅取决于字号的大小。而是大小、体量粗细、颜色三者适当的组合,从而产生更清晰的对比度:

那么如何创建更好的对比度?

  • 不要仅仅从字体大小一个维度来区别内容的类别;

  • 对重要内容实用更大更重的表现方式,次要内容用较小较轻的量级;

  • 创建多种不同的文字颜色,从深色(参见下面的示例)。通常使用最常用的颜色作为正       文文字颜色;

  • 尝试使用大的字间距(例如24像素标题,16像素正文,10像素等),更大的差距=更好       的对比度;

  • 使用在线工具Modularscale可以帮你创建更合适的字体层次结构;

  • 对比度是尺寸+量级+颜色的结合;

  • 确保对比度清晰,可以使用这个计算器来检查它的可读性。


从文字基调颜色来看,可以从较暗的标题移动到较亮的辅助内容。

2.区分内容层级,改透明度要比改色值更方便

不要在拾色器内修改色值以区分文字颜色,这样会叫你之后的修改比较麻烦。

大家都知道纯黑色(#000),的阅读体验很差,所以大多数情况下我们选择比较深的灰色作为正文颜色,在背景是白色的时候,我们提倡用几种不同的透明度而不是靠改变色值来区别字体颜色,这样在修改的时候比较简单,交付开发的时候也会叫对方感到便捷:


在上面的示例中,我使用黑色作为我的主要颜色(#000),并根据其应用的位置(即主要内容,辅助内容等)降低其不透明度。

3.配色也是要“计算”出来的啊

我们在看到一些赏心悦目的插画作品的时候,总会惊叹:“他好会配色,是怎么做到的?”


taken from momoandspirits

直到我发现理解色彩不一定都要靠天分,在色相,饱和度,亮度(HSB)上的简单加法和减法都会有不一样的效果(我们这里研究HSB公式而不是RGB)。靠这些技巧你可以轻易的摆脱枯燥的配色,如下图:

那么如何做好HSB的加减法呢?


上面是两种理解色彩的方式

这里提到两种方式,正如上图两种方案都具有相同的基色#B9F4BC(圆圈背景),但文件夹和条纹颜色上有所不同。开始分析之前,请记住下图中第一个数字对应色相,其次是饱和度,最后是亮度。

Option A


Option A

方案A中我们可以看到,全部图形(圆形,文件夹,条纹)的色相都是123,只是在饱和度和亮度上做了改变。

圆形背景的底色饱和度为24,亮度为96,当我们把文件夹改成较深的绿色时,这两个值都发生了改变——从24的饱和度变为40(增量+16),从96的亮度变为82(减少-14),这表示饱和度的值增加时,亮度会对应减小,饱和度降低时,亮度随之相应增加。条纹区域同理,使用文件夹的饱和度和亮度作为基础值,从40增加到44(增量+04),并从8275(减去-07)。因此,我们得出公式:

更深的颜色=饱和度增加亮度降低

更浅的颜色=饱和度降低亮度增加

每当想知道我的设计应该使用什么颜色时,这个公式叫我了解到,最好的方式是找好一个基本颜色,并从这个颜色为准保持色相不变,做饱和度和亮度的调整。

Option B


ption B

方案B中,同样的原理仍然适用,但色相会改变。我们之前使用的术语RGB和CMY现在对我们来说可以发挥作用的。

RGB代表红色,绿色和蓝色,而CMY是青色,品红色和黄色。起初这些术语对我来说无关紧要,直到我发现可以使用RGB和CMY来配色。

在方案B中,如果想要使底色变暗,将拾色器向RGB位置方向移动,反之想要使底色变浅,将其移动到CMY的方向:

由于我们想要文件夹图标比基本颜色#B9F4BC(圆形背景)要暗,我们需要将拾色器移动到最接近的RGB所在方向(本例子中为蓝色)。如果我们想要文件夹颜色变浅,将选择器移动到CMY(本例中为黄色)左侧。

多数情况下,RGB会导致颜色变暗,CMY会导致颜色变浅

将拾色器调整到我们想要的颜色时,应用方案A中的公式,我们得到:

红色,绿色,蓝色(RGB)+方案A公式=更深的颜色

青色,品红色,黄色(CMY)+方案A公式=更浅的颜色

4.合理运用间距来分组


需要留白的时候,请大方一点

除了在两组之间添加一条线以显示分隔之外,在两个组之间使用宽松的空间是更好更简单的解决方案。

正如接近法则(Law of Proximity)所述:

在时间上或空间上彼此十分接近的刺激物,比相隔较远的刺激物更容易被视为是一组。

从上面的例子来看,我的目的是通过使用24px大的间距,更清楚明了的分隔开标题和作者。

5.区分每行内容,颜色可能比分割线更好


颜色作为分隔符

做上图类似的表格时很简单,往往只需要复制n次组件。但在站在用户的角度,如果上下几行之间没有很大的区别,阅读可能会很困难。因此,除了使用分割线之外,在行中添加颜色背景对可读性可能会有很大帮助,也会提升我们设计的美观度。

6.改变底图的叠加方式好过给标题添加投影


见的界面头图设计

如果图像背景是动态的(或者可以随时更改),那对于文本或者标题组件来说是件很麻烦的事情。

通常,带有动态图像背景的文本的常见解决方案是添加投影,但那样往往在字母和单词周围增加了更多的视觉混乱,填满了它们之间的空间,更加干扰阅读。

很多设计师选用了亮色或暗色但遮罩来解决这个问题,效果还是比较不错。而我发现用渐变填充并且采用Multiply的图层混合效果,也很不错。

这样不用根据图片的不同去修改遮罩的透明度,而且最大程度的保留了背景图原来的色彩,文本背景处的颜色更深,也保证了可读性。

7.一段文字内容需要一个合理的长度

很多设计师为了适配页面的大小把每行文字做的很长。但这样做会给用户造成视觉疲劳,通常每行45-65个英文字符是理想的。

如果你因缩短文本长度导致在右侧产生像下面这样的大面积的空白区域:

这时候可以使正文内容采用中心对齐的方式:


内容中心对齐

8.不要创建过多的组件样式

造成设计不一致的原因很多时候是因为组件样式不统一。尤其是当你发现你已经创建了5种卡片,10个按钮,5个标题样式的时候。

开始为某个新增内容绘制界面之前,最好查阅以前设计好的模块,尽量复用之前的组件。

上面的例子中,我们完全可以把文章卡片的形式复用到小组卡片中,而不是重新再为小组内容再创建一种新的形式,这样既节省了时间又遵循了设计的一致性。

9.用品牌色/产品色做点睛之笔

很多人会认为品牌色/产品色必须在界面中占的面积越大越好。当我们在为向客户展示本公司千挑万选出来的明黄、基佬紫、娘炮粉甚至“色彩斑斓的黑”头疼无比的时候,把它们作为我们干净简约界面中的点睛之色,可能会是最好的选择。

10.把复选框这样的组件“丢”到一边吧

如果你要创建如上图所示的列表,请把复选框、单选框之类抓人眼球的组件从文字内容中挪出来。使文字内容对齐可以使用户阅读时不会被打断,并使视觉体验更加清晰明了。

0
 懒猫
关于用户界面设计的十个小窍门
您还没有登录,登录后发表评论!还没有账号?立即注册

Copyright © 2011 - 2020 UIYuan设计师交流平台, All Rights Reserved. 皖ICP备18024424号-2

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:service@uiyuan.com

UI园会员交流QQ群: 233748945 / 73425514