首页

UI设计中亮色的优点和缺点

涛涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

这篇文章展示了丰富多彩的UI的优缺点,描述了明亮的颜色如何提高用户体验,以及在选择亮色时应该考虑有哪些缺陷。

声明:如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重原文作者及译者权益。


有效的颜色应用技巧是每个从事视觉合成相关工作的,包括插画家和UI设计师,都必须具备的。随着扁平化设计和material design的普及,具备色彩理论知识变得更加重要。

目前鲜艳的颜色和渐变出现在不同数字产品的用户界面上:从好玩和有趣的到商业应用和网站。然而,关于明亮的颜色对用户体验的影响还有很多讨论。本文对丰富多彩的用户界面设计的优缺点进行了深入的分析。


明亮的颜色如何提高UI效果?


增加可读性和易读性


我们之前的一篇文章中,介绍了影响配色方案选择的因素。可读性和易读性是设计师考虑色彩运用的基本因素。提醒一下,可读性是指人们阅读文本内容的容易程度,而易读性则定义了用户在特定字体中区分字母的速度。

鲜明的颜色足够的对比度有助于增加可读性和易读性。有对比的布局元素会变得可区分和引人注目。然而,高色彩对比可能并不总是有效。如果文本内容和背景颜色对比度太大,将很难阅读或扫描文本。这就是为什么推荐设计师创建一个温和的对比度,只用高对比度颜色突出元素的原因。


提亮导航,使交互更直观


对任何数字产品来说,视觉层次是打造清晰导航和直观交互的核心要素。UI组件就是这样被组织起来的,这样大脑就可以通过这种包括颜色在内的物理差异来区分物体。

颜色有自己的层次结构,这是受用户思维的影响所决定的。有大胆的颜色,如红色和橙色,以及弱的白色和奶油色。明亮的颜色很容易被注意到,所以设计师经常用它们来突出或设置对比度。此外,将一种颜色应用到几个元素上,表示它们在某种程度上是有相关性的。例如,您可以为购买按钮选择红色,以便人们在需要时直观地找到它们。


可识别性


大脑对大胆的颜色反应强烈,这就是为什么明亮的颜色组合很容易被注意和记住的原因。色彩丰富的用户界面设计,在众多颜色较轻的产品中容易脱颖而出。颜色的选择需要基于目标受众的喜好和市场调查。

此外,如果一个公司拥有明亮的企业颜色应用于商标和品牌项目,那使用同样颜色在其网站或移动应用上也是一个好方法。这种方式连接公司所有的沟通渠道,创造了一致性的视觉解决方案,并且提高了品牌知名度。


设定情绪和气氛


为了传达正确的语气、信息和号召用户做出预期的行动,设计师需要知道颜色会影响我们的情绪和行为。我们的大脑会对颜色做出反应,而我们通常不会注意这点。这项名为“颜色心理学”的研究表明,当我们的眼睛感知到一种颜色时,大脑就会向内分泌系统发出信号,释放负责情绪变化的荷尔蒙。

适当选择颜色有助于让用户处于一种促使他们采取行动的心理状态,并设置合适的氛围将正确的信息传递给用户。比如,如果设计师设计了一个与自然或园艺相关的产品的UI,很有可能会选择用绿色和蓝色。通过这种方式,设计将从一开始就与一种产品或服务类型相关联。您可以在我们的文章《颜色对用户行为的影响》中找到对颜色含义的具体描述。


时尚的外观和风格


明亮的颜色和渐变,是UI设计中的最流行的趋势。如今,可以在不同类型的数字产品中看到这种运用,而严格的商业风格的限制似乎被抛在了一边。

明亮的渐变色彩在用户界面上可以带来一种现代化感和新鲜的想法。结合趋势设计的APP或网站往往引人注目,尽管竞争激烈,仍能吸引用户的注意力。


明亮的颜色使用缺陷


很难搭配


那些认为颜色能靠直觉和审美随意混合的观念是错误的。如果你想要创造和谐的视觉构图,那么关于颜色如何起作用以及它们如何协作的基本知识是必不可少的。

在UI中应用的颜色越鲜艳,搭配就越困难。为了让用户感到愉悦和舒适,设计师努力将平衡和和谐融入到用户界面设计中。色彩协调是指在设计中以最吸引人、最有效的方式来安排色彩,以供用户感知。和谐的颜色组合有助于对网站或APP获得一个不错的第一印象。颜色理论定义了一些基本的颜色方案,下面这些配色方案被证明是有效的。

单色,色彩和谐是基于一种颜色和它的各种色调。

类似色,该方案适用于颜色轮上相邻的颜色。

互补色,它是在色轮上相互放置的颜色的混合,目的是产生高对比度。

多色互补,这个方案与前一个方案相似,但是它使用了更多的颜色。例如,如果你选择蓝色,你需要取另外两个相邻的颜色,表示黄色和红色。

三元色,它是基于三个独立的颜色,在色轮上是等距的。专业人士建议使用一种颜色作为主调,其他颜色作为主调。

四色,tetradic配色方案使用四个颜色从车轮是互补的。如果你把选中颜色上的点连起来,它们就形成了矩形。


失去节奏感


大胆的颜色可以作为在UI中进行重音的工具,但它也可能成为重音消失的原因。许多鲜明的颜色在一个单一的视觉组成会带来了失去突出元素的风险,因为他们成为一个色彩种制造混乱的一部分。

这就是为什么推荐设计师使用60%-30%-10%的比例。最重要的部分应该是主色调,三分之一的构图采用第二色,10%的部分应该选择有助于形成重音的颜色。这样的比例被认为是令人愉快的,因为它允许逐渐感知所有的视觉元素。


明亮的颜色并不适合所有用户群体


创造数字产品的核心阶段之一是用户研究。定义和分析目标受众,使设计师了解他们对网站或应用程序的期望。年龄、性别和文化会影响潜在用户的喜好。例如,孩子们很喜欢黄色,但当我们长大后,黄色通常看起来不那么有吸引力。男人和女人通常喜欢冷酷的颜色,如蓝色,绿色。不像女人,男人通常喜欢白色、黑色和灰色。

明亮的颜色也是如此。即使您是设计一个有趣的APP,也需要考虑目标受众的具体情况。中年人通常更喜欢轻松的用户界面,他们可能不喜欢屏幕上很重的颜色去分散注意力。


在移动屏幕上,鲜艳的颜色看起来反差太大


正如我们上面所说,明亮的颜色可以产生大量的对比度,帮助突出重要的UI元素,并提供良好的易读性和可读性。然而,过多的对比度可能会起到不好的效果,尤其是在移动界面上,因为它们的空间有限,可以在不同的环境下使用。

小屏幕、环境光和明亮的字体使对比度高的图像在用户眼中显得很难看。这就是为什么在移动UI设计中使用明亮的颜色需要注意颜色之间的对比度,这样人们在阅读文字时会感到舒服。

颜色是大师手中的一件伟大的工具,和其他任何工具一样,它也有它的优点和缺点。为了有效地使用它,需要考虑它的所有方面,以便能够找到适合设计任务和目标的解决方案。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务




用户界面设计中的「版式设计」全方位指南

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一篇较为系统与全面的版式讲解,从规范化的布局形式到平面构成在用户界面设计中的应用与体现。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

终极指南!超全面的UI动效基本规则总结

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更加清晰。动效对于产品和用户而言,都是一个不可多得的重要组成部分。但是当我浏览相关的文章的时候,发现绝大多数的动效有关的文章,都仅仅只是针对特定的动效设计案例来进行分析和描述,少有文章真正系统地阐述动效应该遵循怎样的规则,符合什么样的特征。这篇文章当中,我不会讲述什么新颖的技巧或者前沿的趋势,但是我会将动效设计的主要原则和标准都汇集到一起,总结出来。

有了这篇文章,你就不用在其他地方学习基本的动效设计规则了。

动效的持续时长和速度

当元素的位置和状态发生改变的时候,动效的速度应该足够慢,维持足够长的时间,让用户能够注意到变化,但是同时,又不能慢到需要用户去等待。

大量的研究表明,动效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言,几乎都是瞬间,很难被识别出来。而超过1秒的动效会让人有迟滞感。

△ 界面中动效持续时长

在手机这样的移动端设备上,按照 Material Design 的建议,动效时长应该控制在200~300毫秒之间,在平板电脑上,这个时长应该延长大概30%,也就是说,时长应该在400~450毫秒之间。原因很简单,屏幕尺寸越大,元素在发生位移的时候,跨越的距离越长,速度一定的情况下,时长自然越长。相应的,在可穿戴设备的小屏幕上,这个时长应该缩短30%,在150~200毫秒之间。

△ 移动端设备的屏幕尺寸影响动画的持续时长

网页动效的处理方式也不一样。由于我们习惯在浏览器中直接打开网页,考虑到浏览器性能和大家的使用习惯,用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度,网页中的速度会快上一倍,换句话说,就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长,用户会忍不住觉得网页卡住了。

不过,如果你的网页中所用的动效并非功能性的,而是装饰用的,或者用来吸引用户的注意力,那么请忘记这个规则,在这种情况下,动效可以更长。

更大的屏幕=更慢的动效?绝不是如此!

请务必记住,无论是在什么平台上,动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离,还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化,相应的动效应该更快一点。因此,大而复杂的元素动效持续时间更长,看起来也更舒服一点。

大小相同的元素,在移动的时候,移动距离最短的元素,是停止下来的。

与较大的元素相比,较小的元素运动速度应该更慢,因为相同的移动距离,对于小元素而言,位移距离和自身大小比例倍数更大,相对偏移更远。

△ 动效的持续时长还和元素大小、运动距离有关

动效的运动规律要符合物理规律,当元素运动到边界,发生碰撞的时候,碰撞的「能量」最终是要均匀分摊下来的,而弹跳的在多数情况下是不适合的,仅在特殊情况下适合使用。

△ 避免使用弹跳,它会分散用户的注意力

元素的运动过程应该是清晰的,尽量不要在运动中使用模糊的效果(是的,说的就是 AE 的模糊动效爱好者们),模糊的动效不适合在 UI界面中使用。

△ 不要在动效中使用模糊效果

列表项(新闻列表、邮件列表等)所使用的动效,在实际运动的过程中,项和项之间应该有轻微的延迟,元素之间的延迟应该控制在20~25毫秒之间,如果持续时间再长,可能会给人一种迟滞的观感。

△ 列表项之间的延迟应该在20~25毫秒

缓动

缓动指的是物体在物理规则下,渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然,这是运动的基本原则之一。对于缓动,迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。

为了不让动效看起来机械或者人工痕迹太明显,元素的运动应该有渐进加速和渐进减速的特征,就像物理世界当中其他的物体这样。

匀速直线运动

不受任何物理力量的影响,匀速直线运动看起来是非常不自然的,尤其是对于人眼而言。

所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征,我将尝试阐述它们的含义,以及如何使用。坐标轴的 X轴是实现,而 Y轴则表示的唯一,换句话来说,如同我们在初中物理中所学到的,坐标轴上的线条描述的是速度和加速度的特征。下面所示的直线,表示速度是均匀的,也就是匀速直线运动,物体在相同时间内运动的距离是不变的。

△ 匀速直线运动的座标图

均匀的变化通常只会用在色彩的改变或者透明的改变上,一般来说,我们也可以让背景元素均匀运动,而前景元素保持不变,来呈现它的状态,就像上图一样。

缓动加速曲线

通过曲线我们可以看到,物体开始时候的初速度比较低,运动缓慢,随后速度逐渐增加,这意味着物体在加速运动。

△ 加速曲线

当物体加速飞出屏幕的时候,可以使用这种加速曲线,比如界面中被用户使用滑动手势甩出去的卡片。但是请记住,只有当运动对象需要完全离开界面的时候才会这么使用,如果它还需要再回来的话,则不行。

△ 以加速运动将卡片扔出屏幕

动画曲线有助于正确传达讯息,甚至表达情绪和感觉。在下面的案例当中,我们可以看每个元素的运动位移是完全一样的,所消耗的总时长也是一样的,但是运动的速率变化是不同的,这一点也体现在曲线上,所表现出来的情绪也不同。当然,通过调整曲线,你能够让物体的运动轨迹尽可能接近现实世界。

缓动减速曲线

当元素从屏幕外运动到屏幕内的时候,动效应该遵循这类曲线的运动特征。从全速进入屏幕开始,速度降低,直到完全停止。

△ 减速曲线

减速曲线可以适用于多种不同的 UI控件和元素,包括从屏幕外进入屏幕内的的卡片、条目等。

△ 减速曲线案例

缓动标准曲线

在这种曲线之下,物体从静止开始加速,到达速度最高点之后开始减速直到静止。这种类型的元素在 UI界面中最为常见,每当你不知道要在动效中使用哪种运动方式的时候,可以试试标准曲线。

△ 标准曲线

根据 Material Design 的规范,最好使用不那么对称的增速和减速的过程,让动效看起来更加真实。同时大家会更加在意运动的结果,曲线的末端,也就是运动结束的过程最好进行适当的强调,换句话说就是减速过程持续的时长最好超过开始加速的时长,用户将会更加清楚地观察到运动的最终结果,从而更好地明白运动的终止状态。

△ 对称和非对称运动的差异

当元素从屏幕的一个位置移动到另外一个位置的时候,最好使用这种标准的缓动曲线,这个过程中,尽量不要让动画效果引人注意,不要使用戏剧化的效果。

△ 卡片元素从屏幕上运动的时候,不对称的缓动曲线

当元素从屏幕上消失的时候,采用了相同的不对称缓动曲线,用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。

△ 抽屉式导航随着缓动曲线从屏幕上隐藏

从这些案例当中,可以看出许多动效的初学者对于运动规则的了解还不足。比如下面的这个动效,元素随着减速曲线出现,然后使用标准缓动曲线消失。根据 Material Design 的标准,新出现的元素持续的时间应该更长,因为需要吸引更多的注意力。

△ 导航菜单的出现和消失

贝赛尔曲线函数 cubic-bezier()是用来描述曲线的,它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点(0,0)和终点(1,1)在坐标轴上的位置是已经事先确定的。

为了简化你对于贝赛尔曲线的理解,我们推荐两个网站,分别是 easings.net 和 cubic-bezier.com ,前者包含了最常见的曲线的列表,你可以将他们复制到你的原型工具中,第二个网站为你提供了不同曲线的参数,你可以直接在其中查看各种对象的移动方式。

△ 不同类型的 cubic-bezier()的曲线和参数

界面动效的编排

就像芭蕾舞的舞蹈编排一样,动画效果也是需要编排的,它的主要目的是让元素从一个状态切换到下一个状态,自然过渡,让用户的注意力自然地被引导过去。

编排有两种不同的方式,一种是均等交互,另一种是从属交互。

均等交互

均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。

在这个实例当中,所有的卡片都遵循着一个方向来引导用户的注意力,自上到下地次第加载。相反,没有按照这样清晰的规则来加载,用户的注意力会被分散,元素的外观排布也会显得比较糟糕。

△ 用户的注意力应该沿着一个流向来引导

至于表格式的布局,它相对就复杂一点。在这里,用户的视线流向应该是清晰的对角线方向,因此,逐个区块次第出现是一个糟糕的设计。这样的逐个显示,一方面耗时太长,另一方面会让用户觉得元素的加载方式是锯齿状的,这种方式并不合理。

△ 沿着对角线加载

从属交互

从属交互指的是使用一个中心对象作为主体,来吸引用户的注意力,而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感,让主要的内容更容易引起用户的注意。

在其他的设计当中,用户很难搞清楚哪个才是主要的,因为注意力被分散了。因此,如果要设置多个动画元素,应该定义清楚谁为主,谁是中心,并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象,那么其他的对象的运动方式都要受它制约,否则用户分不清楚主次。

根据 Material Design 的规定,当元素不成比例地变幻尺寸的时候,它应该沿着弧线运动,而不是直线运动,这样有助于让它看起来更加自然。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的,换句话来说,变化的速度也不一样。(比如,方形变成矩形)

△ 不成比例地改变对象外观的时候,运动轨迹应该是弧线的

相反,如果元素是按照比例改变大小的时候,应该沿着直线移动,这样不仅操作更加方便,而且更符合均匀变化的特征。看一下真实的案例,你会发现直线的运动轨迹会更加合理。

△ 成比例变化大小的时候,应该沿着直线运动

当元素不成比例放大的时候,运动轨迹是弧线,而这种弧线运动轨迹有两种不同的呈现一种,一种轨迹是初始方向为垂直方向而运动结束时瞬间运动方向是水平的(Horizontal out),另外一种初始方向是水平方向而运动结束时瞬间运动方向是垂直的(Vertical out)。

那么怎么选取这个方向呢?很简单,元素运动曲线的方向,应该是要向界面的主要运动方向的主轴靠拢重合。举个例子,在下面的动效当中,整个界面的滚动方向是上下滚动,主轴是纵向的,因此,当卡片点击之后被展开的时候,会先向右水平移动,并最终以垂直运动结束,运动的最终方向,切线是垂直的,也就和垂直方向的主轴重合了。

△ 元素按照弧线展开的时候,最终方向应该和主轴重合

如果几个不同的元素的运动轨迹相交,那么他们不能彼此穿越。如果每个元素都必须通过某个交点,抵达另外一个位置,那么应该次第减速,依次通过这个点,给彼此留出足够的空间。另外一种选择,是元素不相交,而是像实体一样在靠近的时候,彼此推开。为什么?因为我们通常假定界面中所有的元素都位于同一个平面当中。

在运动过程中,元素不应彼此穿越,而应该互相留出空间。

但是这一点也不是一成不变的。在比较拥挤的界面当中,某个元素可以「越过」其他的元素,它同样没有穿过其他的元素消失,而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律,只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。

△ 元素可以越过其他的元素运动

结语

我们总结了这么多动效运动的规则和原则,从某种意义上还是延续自我们对于物理世界的认知,摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知,允许我们更轻松的了解和访问界面的内容。

如果动效按照正确的方式来设计,它应该是不显著,且不会分散用户注意力的。如果不是这样,那么你需要让动效更微妙一点,实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍,或者转移注意力的存在。

当然,即使是遵循这么多规律,动效的设计依然是一门艺术,而非单纯的科学,多做测试多摸索总是有必要的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

10分钟教你如何选择筛选组件

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

生活需要筛选,App页面也一样。本文通过案例分析,从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。


筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时,通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏,本文暂不分析。


组件包括筛选按钮与筛选器,筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。



01


位于 Tab 栏的筛选组件


组件样式

筛选按钮位置:一般位于Tab栏最右侧视觉薄弱区域。


筛选器形式:点击按钮,筛选器以抽屉形式从Tab栏底部向下展开筛选条件,或以浮层形式从屏幕最右侧向左滑出筛选条件。


样式分析

当界面使用Tab栏时,已为内容做了第一层筛选,多数情况下已满足用户对内容的筛选需求。


当筛选类别较多且复杂时,就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低,屏幕右侧为视觉薄弱区域,这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。



案例一

Image title

案例来源于美团App


此页是对美食品类的选择,这里的筛选组件在Tab中是最常见的样式。对于用户而言,选择商家店铺优先考虑地域、美食类别、价格及综合评价,而用餐人数与餐厅服务等只是辅助选择条件。


筛选器使用了抽屉形式,如要选择此样式,建议在筛选条件不多且不超过一屏的场景使用。



案例二

Image title

案例来源于淘宝App


当用户从首页全局搜索后,出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后,由于筛选条件较多,很难一页展示完,用户往往需要上下滑动屏幕查看全部,因此使用右侧浮层展开的形式较适合。



案例三

Image title

案例来源于哔哩哔哩App


全局搜索后,Tab栏默认展开综合tab内容,用户对排序、时长、分区的筛选需求较高,因此直接把筛选类别放在了二级Tab栏,相比通过点击筛选按钮再展开类别的交互方式更简单直白。


点击筛选类别后,筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少(不超过4项),筛选项数量不多的场景。



02


底部按钮型筛选组件


组件样式

筛选按钮位置:以按钮或浮层形式固定在界面底部,便于用户操作。


筛选器形式:点击按钮,筛选器以抽屉形式从按钮底部向上展开筛选条件,或以界面浮层形式从底部向上展开筛选条件。


样式分析

使用底部筛选按钮的界面,内容区类别相对单一,通过筛选组件就能满足筛选需求,并对筛选的需求较大。而底部按钮作为常见的按钮形式,用户点击更方便,因此承载筛选组件较合适。


若使用此样式,点击筛选按钮后,筛选器的出现优先考虑从底部向上出现的抽屉式浮层。



案例一

Image title

案例来源于旅游类App Expedia


输入旅游目的地后进入此列表页,用户目的性明确,就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果,方便用户触达。并且筛选条件较多,无法一页展示完,使用了界面浮层的形式。


这里还有2个细节:


1、由于筛选类别较多,手动清除单个筛选条件太过繁琐,于是筛选器底部增加了清除按钮,操作更简便。但底部按钮一般为“确定”操作,“清除”放在底部样式上没有做误操作提示,可能会增加误操作机率。


2、筛选后,筛选按钮处会显示已选择的筛选类别数量,给用户带来良好的使用反馈。



案例二

Image title

案例来源于dribbble


当前页为地点搜索。需要先进行筛选操作,内容区再出现结果。筛选按钮位于底部浮层,筛选类别代替筛选按钮平铺展现,筛选器使用抽屉式从浮层底部向上展开。


此样式一般适合筛选类别较少,并且每个类别的筛选项不多的场景。优点是减少操作步骤,提高用户操作效率。并且可以学习一些体验细节:在筛选器中选择一个选项后,在其筛选类别处同步修改为该选项;筛选项与筛选类别选中状态一致,增加关联度。



03


浮层按钮型筛选组件


组件样式

筛选按钮位置:以浮层按钮的形式位于界面右下方,占用空间较少。

筛选器形式:点击按钮,筛选器以浮层形式为主,或在筛选按钮下方展开筛选条件。


样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间,比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时,它的位置也便于用户点击。

设计时按钮用色需要区别于内容区,内容形式尽量精简直观。若使用案例3中的扇形筛选器,则要求筛选类别为1-2类,筛选项数量少切文案精简。



案例一

Image title

案例来源于dribbble


筛选按钮位于界面右下方紧贴于右侧屏边,浮于被筛选内容上层,滑动屏幕时消失。点击筛选按钮后,从屏幕右侧展开筛选浮层,原筛选按钮变为确认按钮。


此按钮形式最大限度的让出空间留给内容区,且右下角为用户关注薄弱区,这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过,适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高,相对符合用户认知。体验细节上可学习的点还有按钮功能的改变,使得体验更便捷。



案例二

Image title案例来源于dribbble


筛选按钮位于界面右下方但没有贴屏边,筛选器以底部分层形式从底部向上展开。这里的筛选条件不多,因此使用了底部分层形式。



案例三

Image title

案例来源于dribbble


筛选按钮形式与上一案例相似,不同的是筛选按钮处直接显示筛选条件,可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。


点击按钮后,从按钮下层展开扇形筛选器,滑动选择筛选条件。此种筛选器样式使用场景较局限,多为选择时长或数量,并且单选居多。因此筛选器不需要“确定按钮”,只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。



04


举一反三


接下来我们拿个案例练练手。


下图界面中内容区为概览与各监控数据图表,需要设计一个筛选组件对内容区进行不同时段的筛选。


Image title


在设计之前需要确定几个需求:筛选组件的使用频次、筛选类别的数量、筛选项的数量,单复选关系、筛选条件之间的优先级。


进一步明确需求

筛选类别只有时间段1项,筛选数量不固定,为多项,单选关系。当用户进入此页,根据用户使用需求判断“1小时”基本满足用户查看数据的需求,默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求,可判断用户使用筛选组件的频次不高。


Image title


方案解析

方案一,Tab栏形式

Tab是对整页的筛选,多为不同维度,而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近,但用户对筛选组件的需求并不高,放在此位置占用了概览区空间。


方案二,底部按钮形式

底部按钮位于用户的习惯操作区,放这里使用层级略高,并且会使内容区的整体高度减少。


方案三,浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域,可以使用户浏览时不受按钮影响;但按钮拥有强对比色,在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现,可满足筛选项数量较多的场景。



05


小结


以上内容是我对常见筛选组件的思考,每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息,决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。



本文作者:TXD技术体验团队-喻杰(阿里巴巴视觉设计师)

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


在iPhone的UI设计背后,是一场关于注意力的战争 2018/09/06in 设计文章 & 教程评论区

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

iPhone 诞生之后,世界发生的变化是翻天覆地的。以电容触摸屏为交互中心的智能手机以难以想象的速度,成为了人类生活中不可分割的部分,人与人之间的连接因此而更加紧密,同时也更加疏远。从某种意义上来说,iPhone 的创造是开创性的,也是不可替代的。而我们也不约而同地发现,以iPhone 为标竿而创造的智能手机和数字化的交互界面,让我们处于一个时刻都会被分心的境地。

令人上瘾的数字内容,让我们一刻都离不开智能手机,从某种意义上,它彻底改变了我们的生活,工作,甚至思考的方式。现如今,越来越多的人开始尝试戒除令人上瘾的智能手机,寻找更加健康自由的人机关系。根据今天的调研,过度使用智能手机,确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初,直到10年后的现在,在数字产品上瘾和用户注意力的控制这件事情上,开发团队本身就没有放松过。这次,Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司,并且很快就出任了公司的人机交互界面组的设计总监,在2006年前后,他也是作为 iPhone 项目核心的6人团的一员,加入到项目当中来。

待在苹果的20多年时间里,他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计,直到他开始追求创造属于自己的公司和事业,才正式从苹果离职。也正是因为这样的契机,才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去,以及他留给苹果的那些遗产。

和许多设计师一样,他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息,他现在依然还不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型设计阶段,他就已经意识到了,这款产品最大的缺陷之一,就是它注定会分散甚至垄断用户的注意力。而与此同时,苹果也有意识的没有给予用户,对于iPhone 完全的控制权。下面,是访谈中能够对外公布的几个重要的内容摘录:

设计「请勿打扰」的功能

「我认为,从某种意义上来说,真正洞悉设计的设计师,大都能够预见到手机对于注意力的影响。在使用手机的时候,我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候,当我刚刚开始制作 iPhone 的原型之时,管束还不是那么多,我们当中有几个人还有幸把原型机带回家,这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系,iPhone 几乎隔一会儿就会亮一下,显示有新消息,叮叮咚咚响个不停,于是我意识到,和我们朝夕相处的手机需要一个管控功能。所以,在很早的阶段,我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事,苹果的内部产生了分歧

「其实,在苹果公司内部,想要大家都理解分心是一个影响用户生活的问题,还挺难的。乔布斯倒是很能理解的,但是公司内其他的同事,对于用户对于手机的控制权多少,其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权,不过这个事情对产品的营销和市场运作是有影响的。所以,当时内部也有声音说,如果真的给用户太多的控制权,那么这款手机就不酷了。」

「其实直到今天,iPhone 当中绝大多数的功能都是可控的,但是其中很多功能隐藏的比较深,彻底的掌控它们是比较困难的,如果你真得想让那些整天都在轰炸你的信息彻底远离,你需要花费很长的时间来摸索,用独特的方式逐个调整或者关闭才行。因此,对于那些熟练使用iPhone 的重度用户而言,确实是可以如臂使指地掌控这台设备,但是对于更换壁纸都不太会的用户,想要搞清楚iPhone ,让它如意随心,真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用,然后你不停地会收到提醒和通知,是否要授权使用相机,是否要授权获取你的位置,是否允许它给你发送通知,每个都要做决定。稍后,你可能会发现,Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了,总会有信息大半夜地推送到你的眼前,让你无法安生地休息。实际上,借助请勿打扰的功能,你可以一早上再查看它们。这套系统足够智能,能够判断出哪些应用之前就已经获得了许可,哪些仍然在后台获取数据,哪些通知实际上你并不关心。所以,这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系,手机会询问用户,你真的需要这些通知吗?或者是,你真的需要Facebook 使用你的电话簿的信息吗(因为你已经很久没有登录了)?等等。正确地设计了这套系统之后,提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情?

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量,它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨,而媒体和用户都发文吐槽,在呼声和压力之下,它们最终在iOS 12 中呈现了出来。这个局面之下,苹果没有选择的余地,必须对于舆论有回应。这对于每个人都是好事,因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品?当然算不上,因为现在的iOS系统是为了应对舆论和负面新闻而设计的,设计的意图并不对。如果是苹果主动作出这样的决策,才算得上是好产品。」

「对于苹果这种体量的大公司而言,产品设计其实复杂性非常的高。真的是这样。作为设计师,你需要服务于你的用户,你还得和公司的利益保持一致,同时,还需要对得起自己的底线和道德。服务于一个大型的企业,确实非常的难做抉择。对于用户而言,可以很轻松的直接怼苹果,说它没有做对的事情。但是身为其中的设计师,要平衡各方面的需求也压力,经常会进退维谷。有些用户因为iPhone 的一些功能,受到了负面的影响,有些人受到的影响比另一部分人更多。但是身为设计师,一个受到各方面制衡的设计师,即使是作出了改变,在很多时候也远远不够。至少在我看来,现在的改变还不够大。」

管理数字化的生活,就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起,我就用着黑色的壁纸。我不会将一大堆的东西塞进手机,减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要,或者说我推荐这么做,对于人和手机之间的关系,每个人都不一样,处理方式也都很个人。对于如何处理自己和手机之间的关系,有人让我提一些建议,我觉得没有必要,因为我的办法并不适合所有人。一天喝多少咖啡,抽几包烟,每个人的情况都不一样,没法一概而论。不过,心理健康是一件大事,你和你的智能设备之间,应该保持着平等的关系。这至少是一个大的设计趋势,是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样,你无法忽视认知压力的存在,认知设计也势在必行。」

界面设计的未来,以及不可避免的问题

「我观察到,界面设计在很自然地进化和发展着,从按钮到旋钮,从点击到手势操作,从语音交互到情感化设计,均是如此。无论是考虑到用户的情感诉求,还是进入语音交互的领域,都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题,点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互,都一定都会遭遇不自然的状况和问题,就这么简单。身为设计师,需要足够的预见性,才能真正领先于用户,预测到可能会遭遇的问题。」

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

全面易懂!写给新手的信息架构设计指南

涛涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

很多产品设计师,在画原型或者设计 UI 的时候痴迷于工具的使用,拿到需求文档之后急于动手画图,忽略了信息架构设计对于产品的作用。


信息架构作为一个产品的骨架,是产品非常重要的一部分,它决定了一个产品

的布局和未来的发展方向以及用户对一个产品的最初印象和整体体验。毫不夸张的说,好的产品信息架构是产品成功的一半。

那么到底什么是产品的信息架构呢?该如何设计产品的信息架构?如何评判一个产品信息架构的好坏?我们接着往下看:

一、信息架构的概念

让我们来看一个例子:

一个饭店需要有哪些设施,如果你是饭店的老板如何合理的排布这些设施,可以让客户感觉很舒服的用餐,这个过程就是一个信息架构的过程。他可以让客户对你的饭店产生好感,从而下次用餐的时候还会想到来你这里吃饭。

在排布饭店设施的过程中我们要遵循一些规范,比如用户的习惯或者施工规范等,正是因为需要遵循这些规范,所以我们需要一个信息架构来体现这些。

比较官方的信息架构解释是这样的:信息架构设计是对信息进行结构、组织以及归类的设计,好让使用者与用户容易使用与理解的一项艺术与科学。

简单来说,信息架构设计就是让用户可以 容易地理解你的产品是怎样的。让他们在使用你产品的时候可以更顺利更自然。就像一进入饭店就会有一种感觉,门口是等餐的地方,进去就应该吃饭,如果找洗手间一定不会往门口走,而会往深处走。这就是信息架构的好处:他让用户使用同类产品时更容易上手和理解,让产品更容易被接受。

二、为何需要信息架构设计

那对于线上产品来说为什么需要合理的信息架构呢?大家来看下边3组 app 的 tab栏截图。你能仅仅从 tab栏就看出这款 app 是什么类型的 app,如何使用吗?

很明显的,第一个是一款购物类 app,第二个是一款图片社交类的 app,第三个是微信的 tab,虽然首页名称是微信,但是我相信如果把名称换成「聊天」,你还是能认出这是微信的 tab栏。

从底部标签栏就可以大致看出产品是用来干嘛的,这就是信息架构的作用。一个合理的信息架构可以让产品非常容易被用户理解,可以让用户第一眼对产品有一个简单的认知,指导自己可以用产品做什么事,指导产品提供什么服务。

再看一组反例:

这三组 tab栏就让人很困惑了,看了半天你也许根本不知道这几款 app 是做什么用的,以及如何使用。如果你让用户很困惑,他会分分钟抛弃你的 app。

所以信息架构的核心目标是为用户提供更好的体验,获得更高的留存率。

一款信息架构良好的产品必然遵循以下两个标准:

  • 让用户打开 app 的第一秒就知道这是一款什么 app,怎么用;
  • 用户想要使用某一功能时,能够第一时间找到。

我们通过这两个标准来印证下上边3个正面案例的信息架构:

相信你能很快速的识别出这款软件的用途和用法,这就给提升留存提供了基础。

那么如果信息架构像架构一个饭店一样简单,那么信息架构为何需要设计?

因为你的实际产品功能可能有这么多:

毕竟我们不是支付宝,没办法把功能像豆腐块一样堆叠起来,我们需要一些科学的设计方法。

三、如何设计信息架构

合理的信息架构设计需要考虑5个步骤:

下面我来分步讲解一下。

1. 了解用户,场景,习惯

首先你的产品是给到用户用,你当然要最大限度的了解你的用户,我们先来看下一个概念:「心智模型」。

心智模型是经由经验及学习,脑海中对某些事物发展的过程,所写下的剧本。人类在经历或学习某些事件之后,会对事物的发展及变化,归纳出一些结论,然后像是写剧本一样,把这些经验浓缩成一本一本的剧本,等到重复或类似的事情再度发生,我们便不自觉的应用这些先前写好的剧本,来预测事物的发展变化。心智模型是你对事物运行发展的预测。再说得清楚一点,你「希望」事物将如何发展,并不是心智模型,但你「认为」事物将如何发展,就是你的心智模型了。

假设你从没见过 iPad,而我刚递给你一台并告诉你可以用它来看书。在你打开 iPad 使用它之前,你头脑里会有一个在 iPad 上如何阅读的模型。你会假想书在 iPad 屏幕上是怎样的,你可以做什么事情,比如翻页或使用书签,以及这些事情的大致做法。即使你以前从没有使用过 iPad,你也有一个用 iPad 看书的「心智模型」。你头脑里的心智模型的样式和运作方式取决于很多因素。

用户往往带着以往使用 APP 的一些习惯来使用产品;线下做同一件事的习惯、生活习惯、心智模型等。要考虑哪些是可以创新的,哪些是用户习惯,要在不妨碍用户习惯的情况下作出更能让用户接受的创新。

你要考虑清楚4个问题:

用户通常用你的产品做什么?

用户用你的产品来做什么?用来看新闻还是用来聊天?一定要考虑清楚用户的核心流程。从核心流程中提取信息架构的基础形式。

用户用这类产品最关心什么?

用新闻app 时咨询的真实性实效性,购物类app 精准搜索和售后功能,就是你的用户关注点在哪里,这是一个很好的突破口。

用户有哪些思维定式?

和用户年龄身份相关的属性,产品体验符合相应用户的思维模式,心智模型,用户就会比较容易接受。

用户用什么类似的产品?

类似的产品也会带来一些用户习惯,迎合这些习惯也会让用户快速上手接受产品。

了解了你的用户场景和使用习惯之后你会知道如何做出符合用户心智的,容易被接受的产品,你不需要担心做的产品没有差异性或者没有竞争力,我们可以在核心流程之外做出创新点,让用户觉得你的产品又好用又有些不一样。

2. 了解业务

这里的业务包括与产品接触的内部及外部的人提出的需求,比如公司的运营,市场,销售,BD,公司的外部合作伙伴等。

这些人的需求我们也要收集,比如运营人员想更方便的管理注册用户,销售想更多的添加广告位,市场推广人员要求能统计不同渠道带来产品的下载量,注册数,活跃数,合作伙伴需要进行账号,内容互通等,总之只要与业务有关的人的意见,尽可能的在产品设计前多收集,即使做不了,也告诉他们原因,要不然产品上线后就等着被他们吐槽吧。

3. 调研竞品的信息架构

在做一款 app 时,我们面临了和无数竞品争抢用户的局面,这时候分析竞品就非常必要,我们需要在知己知彼的前提下,做好核心流程功能,再思考如何在差异功能上做好突破。

首先我们需要把竞品功能梳理成思维导图:

其实思维导图就是信息架构比较基础的形式了,但是光有思维导图没用,我们需要对思维导图进行分析。

我以前做过的一款人脉 app 为例,当初对比了领英、赤兔和脉脉,分析了这4款 app 的思维导图后得出的共性和差异点:

共性就是要符合用户使用习惯的地方,如果你调研的3-5个产品都这么做了,很可能这里是产生用户习惯的地方,是我们需要去遵循的,这是获得用户好感度的基础。

分析产品时你一定也会得出一些产品差异的地方,而这些差异就是你的产品竞争点,也是别人用你的 app 不用其他 app 的理由。比如人脉软件都会有社交相关的功能,但是脉脉会比较注重职场招聘、直播等互联网职场人比较关心的点,这样对应的用户群体就比较会吃你这套,会提升用户的粘性。

相信你在梳理了竞品的信息架构,总结了共性和差异点之后对产品的信息架构已经有一个比较清晰的认知了,在做自己产品信息架构的时候也会更胸有成竹。但是最后还有一件事我们可以做,就是对我们的要做的产品功能做卡片分类。

4. 卡片分类

卡片分类法是我们工作中常用到的一种方法,它可以在用户侧再一次印证和检测我们的产品信息架构。

卡片分类法就是让用户对功能卡片进行分类,组织,并给相关功能的集合重新定义名称的一种自下而上的整理方法。

说直白点就是准备一堆卡片,在这些卡片上写上你所需要包含的功能名称,然后给到用户侧,让用户进行分类,让用户进行组织,来了解用户到底觉得这些功能应该怎么合并怎么归类的一种方法。它可以帮助你站在用户角度去了解用户是怎么认定这些功能的,也可以在卡片分类法的过程中更加了解用户是怎么想的。

卡片分类法大概的步骤和注意点是这样的:

卡片分类法最终会产出这样的一个树形图:

5. 产出信息架构

其实到这一步信息架构大概的雏形已经有了,你可以用 axure 或者类似 mindnode 的软件把信息架构梳理出来。

接下来你要对信息架构进行重要性分级,这样在产品开发的前期可以帮助梳理产品研发的优先级,集中精力解决用户的最大痛点。在产出页面时也可以更好的把控页面元素的大小层级,位置关系等。

最后你需要注意层和度的平衡:层一般不超过5层,超过操作困难。度过多会让用户认知成本增加,容易找不到想找的内容。这里的度指的是同一页面展示的信息量。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


如何用最简单的点线面,解决没灵感?

鹤鹤

点、线、面和构成手法,就像是大厦的基石一样,看起来毫不起眼,但力量却无比强大。

UI设计中的7个小技巧

博博

UI设计中的7个小技巧

 贺红阳


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

原文链接:https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

原作者:Adam Wathan & Steve Schoger 

译:贺红阳


用设计战术代替天赋,提高我们的设计能力。


在我们设计开发过程中都不可避免的遇到需要做出视觉决策的情况,除了

专业资深高级设计师外,其他非专业设计师外不管喜欢与否,又或者我们的

公司没有全职设计师,需要我们自己为新的产品实现UI。


有时候我们正在攻克一个新项目,并希望它看上去比之前的另一个网站更好。对于我们(技术人员或者非专业设计师来说)难为的说“我永远也无法让这幅画好看,因为我不是艺术家。”但事实证明,有很多技巧可以提高我们的工作水平,而不需要有平面设计背景。


这里有7个简单的方法,大家可以使用来改进我们的设计工作。


1使用字体颜色(color)和字体重量(weight)来代替字体大小(size)创建视觉结构层次



当我们设计UI,样式文本化的时候,常见的错误是过于以来字体的大小,也就是字体的字号来控制层次结构。

“这文字重要吗?那我们就让它大点儿。”

“这是次层级文字吗?那我们就让它小点儿。”

不要把所有的重担都放在字体的大小上,试着使用字体颜色和重量来完成同样的工作要求。

“这文字重要吗?那就选用一个字重大些的字体,让它变得粗些。”

“这是次层级文字吗?那我们就用一个明度高些的字体颜色。”

试着并坚持使用2-3种颜色:

用深色而不是黑做主要内容,就像一篇文章的标题。

灰色用做次层级文字内容,像一篇文章的出版日期信息。

更浅的灰用作辅助次次要内容,也许是页脚的版权声明信息。


同样的道理,对于UI工作来说两种字重通常就足够了:

就英文字体来说,对于大部分的文本,普通字重(400—500),如果想要强调的文本可以是(600—700);就中文来讲,主要内容字体一般在常规30-34,标题和想要强调的文本中黑36-42


在ui工作中,英文字体远离字重在400以下的字体,中文字体远离16像素以下的字体。如果你考虑使用更轻的字体重量来淡化一些文字,那就使用一个更浅的颜色或者更小的字体大小代替。


关于字体重量(font weight)字体粗细的值:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值

font-weight的属性值有3种指定方法:第1种是关键字法,关键字包括“normal”和“bold”两个;也是我们常见的;第2种是相对粗细值法,相对粗细也是由关键字定义,但是它的粗细是相对于上级元素的继承值而言的,包括“bolder”和“lighter”两个;第3种为数字法,包括从“100”到“900”的9个数字序列(注意,只能是100、200之类的整百数)。这些数字序列代表从最细(100)到最粗(900)的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。

字体的粗和细这种描述方法本身就是一种相对描述,所谓粗和细也必须要有一个参照体。例如,在上面介绍的3类属性值之间需要有一个相互对照匹配的过程,这是一个很难界定的过程。关键字“normal”相当于“400”,“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解,无法直接和数值相匹配,此时字体的粗细程度通常取决于字体本身的设置。

另外,有的字体看上去比较粗,但是它们的字体描述却是“Regular、Roman、Book(常规)”、“Medium、Semi-(半)”或者“DemiBold、Bold、Black(黑体)”等字样,这主要取决于该字体本身“normal”表示的粗细程度。


2不要在彩色背景板上使用灰色文字


在白色背景下将文本设置成浅灰色是淡化内容重要性的一个好方法。但是在彩色背景此效果就不那么好了。这是因为我们在白色上看灰色是弱化了对比关系。让文本颜色更接近背景颜色,实际上创建了信息层次结构,而不是使用更亮的灰。

在彩色背景下有两种方法降低对比度:

1减少白色文本的透明度

使用白色白色文本,降低不透明度。让背景颜色稍微渗透些,以与背景不冲突的方式淡化文本

2.基于背景,选一个颜色

当你的背景是图片或是图案;或者当降低文字的透明度太枯燥或是文字降低透明度被冲淡时,这种方法都优于降低透明度的方法。

选择一个和背景相似的颜色,调整它的饱和度和亮度直到你觉得合适为止。


3.偏移卡片的投影

不要使用大的模糊和扩展值,这样会使得卡片的阴影更明显,所以添加一个垂直偏移量。它会看上去更自然,因为它模拟了一个从上往下发光的光源,就像我们真实世界中经常看到的那样。


这种内嵌式阴影可以很好的用在输入表单上

如果你有兴趣学习更多关于阴影设计的知识, Material Design是很好的设计指南(https://material.io/design/environment/elevation.html)


4尽可能少使用分割线和描边

当你需要在两个元素之间创建分割时,试着不使用分割线。

虽然分割线是区分两个元素的好方法,但它并不是唯一的方法,使用太多分割线会让你的设计感觉很杂乱。

下次当你发现自己想要使用分割线的时候,试试下面的方法:

1使用卡片投影

卡片投影是一个非常好的区分元素的轮廓方式,就像边框分割线一样,完成同样的目标但它更巧妙而不分散注意力

2使用两种不同背景颜色

为相邻的元素添加稍微不同的背景颜色通常是在他们之间创建区别的好方法。如果你已经使用了不同的背景颜色,又使用了边框,那请试着把边框删掉,你可能不需要它。

3添加额外的空间,也就是留白。

除了简单地增加距离之外,还有什么更好的方法在元素之间创建分离呢?在空间上加大更多的距离(更多的留白)是一种好的方法,在不引入任何新的UI组件元素时来区分元素

5.不要放大本来应该很小的图标

如果你正在设计一个可以使用一些大图标的页面,像一些登录页面的“特色”部分,你可能本能的使用免费图标库里的图标,然后放大它们的尺寸直到符合你的需要。

两个超棒的免费图标库分享给大家:

1FONT AWESOME (https://fontawesome.com/icons?d=gallery)

2 Zondicons(http://www.zondicons.com/)


“它们毕竟是矢量图,所以如果你放大尺寸质量是不会受到影响的对吧?”

虽然我们增大矢量图片的尺寸它们的质量是不会下降的,但是当我们把它们放大到3倍或者4倍的时候,那些原来用16-24px绘制的图标永远不会看起来非常的专业。因为它们缺少细节,并且总是感觉不成比例的矮胖矮胖的。

如果你只有小图标,试着把它放在另一个图形里,并且给这个图形一个背景色:

这可以让你的图标尺寸更接近原始图标尺寸,同时仍就充满大的空间。如果你有足够的预算,你也可以使用高级优质图标集做设计,在大的尺寸上使用大的图标,付费图标库如Heroicons和Iconic。

1  Heroicons  (http://www.heroicons.com/)

2   Iconic(https://useiconic.com/)


6.在平淡的设计中使用超重的彩色的边框

如果你不是一名平面设计师,相比其他作品里的漂亮摄影照片或者颜色丰富的插图作品,你如何在你的uI设计中添加少许的视觉天赋。


有一个简单的技巧可以让你的界面有一点不同,那就是添加超重的彩色边框在你的部分界面里,它会使得你的界面不同于其他平淡的设计。

例如,沿着警告信息的侧边加一个超重的彩色边框:

又或者是高亮显示激活的导航栏项目

甚至是在横穿整个布局的顶部:


它不需要任何的设计天赋增加一个彩色的矩形在你的UI作品里,并且它可以让你的网站像你期望的那样更具设计感。


选颜色很困难?试着从有限的颜色板中选取颜色,例如dribbble的颜色搜索,以避免被传统颜色选择器带来的无尽的可能性。


7不是每一个button按钮都需要一个背景颜色


当用户在一个页面上有多个可操作路径时,很容易陷入基于纯语义设计行为陷阱。

如Bootstrap这样的框架式网站鼓励你这样做,当你添加一个新按钮时,它会给你一个语义样式菜单供你选择。

“这是一个正面的行为吗?是,那就使用绿色。”

“这是删除数据的操作吗?如果是,那就使用红色按钮。”


语义是按钮设计的重要部分,但还有一个常常被忘记的重要的维度,那就是等级/层次结构(hierarchy)


页面上的每个按钮放在哪都基于重要性金字塔的某个位置。大部分页面仅有一个主操作按钮(primary action),几个不重要的次级操作(secondary actions),和几个很少使用的三级操作(tertiary actions)


当设计这些操作按钮时,最重要的是考虑它们在层次结构中的位置。

主要操作按钮应该是显而易见的,实心纯色的,与背景颜色是高亮度对比。

次要操作按钮应该是明确清晰但不突出。轮廓风格或者是与背景颜色低对比是很好的选择。

三级操作路径应该是可发现但不显眼。将这些操作路径设置成链接样式通常是最好的方法。


“那破坏性的行为呢,难道不应该是红色的吗?”

不一定!如果破坏性操作不是页面上的主要操作路径,那么最好对其样式按照二级或者三级按钮的形式处理。


保存大的,红色的并且加粗的设计样式,以便于当界面的主要操作路径是负面的操作路径时使用,比如在确认的对话框中:






蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档