首页

用一篇干货,让设计师了解今年很火的「用户下沉」

涛涛


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

身为设计师,我们习惯性的埋头专攻自己的专业,思考着像素级的细节,拿捏着细微的交互体验,讨论着新的动效方式,却常常忽略着我们所处的大环境,产品所面临的新困境。


就像,目前流量红利逐渐消失的互联网行业,各大产品想要获取新用户的成本越来越高,而且很多产品在获取一二线城市用户时,遇到了天花板。

然而,对于商业公司来说,如果用户停止增长,就很容易面临产品一路下滑的小下坡儿。因此,各大公司也都呈现出焦虑到头秃的状态。

这就是为什么今年我们经常会看到跟「用户增长」相关的一些资讯或分享。同时,「用户下沉带来高速增长」这件事儿,也随着拼多多和趣头条等产品通过「下沉」尝到甜头后,被大家激烈讨论。

今天,我也来跟大家分享一下,自己的一些相关思考。

一、什么是用户下沉?

用户下沉指的是,企业为了给产品带来更多的新增用户、扩大自己的规模,产品功能或者运营方式从满足一二线城市用户需求,到拓展或者专注于三四线城市、乃至农村用户的需求。

用「说人话」的方式解释就是:从以前的高格调,到慢慢的接地气儿。

二、为什么需要下沉?

一直以来,互联网的主流人群都是集中在一线城市,他们最早接触互联网,有着互联网的话语权,他们精致、高知,是主流产品的目标群体,也是大多数互联网产品的第一波目标用户。

但不可否认,目前这波用户的渗透率,到达了天花板。

然而,还有另外一群人往往被互联网所忽视,他们生活在非一二线城市,受教育程度低,收入低。这个群体,还是一片蓝海,有很大的撬动(下沉)空间。

有的同学会好奇,那些非一二线城市的人,生活中需要这些互联网产品么,下沉后他们会买账么?

下面我们就从2个维度来分析,现阶段「下沉」的可行性:需求、潜力。

1. 需求

从今年年初,宣布 GMV 突破千亿的拼多多、到短短18个月内,从0成长为一家估值18亿美元的趣头条,再到注册用户7亿,闷声发大财的快手,就可以明显的反映出,非一二线城市人群,对互联网产品所呈现出的强烈需求。

难道用户的需求是随着这些互联网产品才开始有的么?

并不是。比如:在没有拼多多之前,城镇的人们就有购买低价商品的需求,他们会一般通过集市购买、2元超市等等的渠道。

而在拼多多上,很容易看到3元的抹胸、8块的加绒打底裤、49元的冬季羽绒服……

可能你会认为,这种价格的我才不会买,质量肯定不好。

但是,我们不得不承认,不同层次的人有不一样的需求,并不是大家在谈论消费升级了,便宜商品就没人要了。

同时,对他们来说能通过互联网获得更多品类的选择,通过更低价格买到跟之前使用的产品质量基本相同,甚至稍稍优于以前的产品,本来就是一种消费升级。

再比如:没有糖豆广场舞APP 以前,大家只能跟着领舞大姐学,现在有了这个 APP,大妈们可以自己在家好好练,不蒸馒头争口气,努力成为广场上的C位女王,人群中独领风骚。

年轻时可以学习不好,工作时可以不如别人,成为大妈后在舞场上还不勇得第一,就得好好反思反思了。

总的来说,非一二线城市用户对互联网产品有较大的需求量,所谓的「下沉」并不是创造出新的需求形式,而是对既有需求在既有方式上某种程度的替代,或提供更优解决方案。

2. 潜力

除了满足需求以外,企业还需要关注下沉市场未来的前景如何,潜力怎么样,这个盘子能不能越做越大。

通过分析发现,目前「下沉用户」正处在中国整体经济增长、城市化以及消费升级的大进程中,未来会成为这个国家最为庞大的基石人群,也就是说,现在的「下沉用户」会成为未来「中坚用户」。

今天美国的农业人口只占整体人口的2%,日本农业人口也只有9.7%,中国很显然在短期内还很难达到这样的水平,但历史的趋势和方向不会变化。

因此,可以看出,不管是从需求方面,还是未来的潜力方面,互联网产品中「用户下沉」这件事儿上,在现阶段都是一个可行的方案。

三、如何下沉?

当我们确定了自己产品有下沉的需求和潜力时,接下来就要开干了。那么「下沉」时哪些事情,需要针对三四五线城市进行差异化处理呢?

我觉得可以分为3个维度:运营层面、产品层面、设计层面。

1. 运营层面

运营的目的,一般是为了给产品拉新和促活。那么想要扎了四五六线城市的父老乡亲们的心,我们的运营活动需要注意:要有利可图、要通俗易懂。

要有利可图

下沉用户有个明显特征就是时间充足、价格敏感。如果有一些小便宜可以占,哪怕多浪费一些时间,他们还是愿意接受的。因此针对「下沉用户」的运营活动,要格外放大利益点。

比如:受五六线用户喜爱的拼多多,打开APP,满屏的「1元秒杀」,「6.6元秒杀」,「只抢1天」,「新人1元购」……这种紧迫的氛围,让人感觉不买就亏了。

映射到线下场景,就是「最后1天大甩卖」的商店,每天都是「最后一天」,一甩就是十年(微笑脸)。

再比如:趣头条,当你刚打开 APP 时,直接弹出一个红包(很懂用户占便宜的小心思)。不像有些产品的活动写的是「优惠券」或「代金券」,写多少元这种很人民币的感觉对他们来说,才是最大的诱惑。

有同学会说,上来就给18块钱,公司不亏死嘛!所以亲爱的朋友们,你们睁大眼睛看一下「18元」右面的小字「最多」,套路深啊。

然后,通过用红包的方式,吸引用户提现,但是这个时候会弹出来手机号登录页面。(用红包吊着用户去登录。)

对于一二线用户,或许对这种运营方式比较反感,感觉在耍人,浪费时间,觉得这就是套路我嘛。

但是针对五六线的用户,他们对互联网的东西存在距离感,敬畏心,会下意识的认为存在即合理。同时他们很闲,感觉点一点也并没有什么,而且占了些小便宜。这就是他们跟一二线城市用户差异的地方。

同时,趣头条通过邀好友、收徒弟、徒收徒的裂变方式获得金币/现金的运营手段,不断的吸引用户的好奇心和金钱的诱惑,以及阅读就能赚钱的卖点,给产品带来了迅猛的新增。

总的来说,下沉用户,对有利可图的运营活动,是愿意花大量的时间成本,从而间接的为产品做贡献的。

要通俗易懂

不像一二线城市用户,觉得产品的运营文案写的高级、有格调、很杜蕾斯、挺网易云音乐的,觉得符合自己独特的气质,恨不得立马翻它的牌子。

三四五六线城市的用户,受教育程度有限,对一件事情的分析耐心有限,文案上要尽可能通俗易懂、直白,才能使他们短时间get到你的点。

比如:趣头条,被邀请的朋友看到的页面。

没有拐弯抹角的诗和远方,直接就是「教你轻松赚现金」,而且底下有一排小字「不会的可以来问我,大家一起赚」。

多么直接、易懂、质朴的语言,但这些就够了,因为只有让对方明白了这是干嘛的,且有吸引力,参与度(转化率)才比较高。

再比如,针对下沉城镇的一些线下刷墙的运营宣传。

知道用户关注什么、在意什么,并以合理的表达出来,让他们看懂才是最重要的,整些虚的都没用。

以上可以看出,针对非一二线城市用户的运营,要放大占小便宜的利益点,同时还要更通俗易懂,才能让用户更快理解、吸引从而参与。

2. 产品层面

如果把运营活动,理解为塞门缝里的「包小姐」小卡片(运营banner),进行拉新(拉客),那么产品层面就是要看「包小姐本人」的服务了,影响着用户的体验,关乎着用户的留存。

那么,针对三四五六线城市的用户,产品层面应该做到哪些呢?我觉得最重要的一点就是:简单易用,避免懵逼。

比如:前段时间在朋友圈刷屏的「她face+」,只有简单的几个功能,而且很土嗨,就能在小程序排行榜上名列前茅。

打开应用你只需要做两个选择:要么拍照,要么从相册中选择照片。

我抱着试一试的心态,去体验了一波产品,然后我被变成这样了。

嗯,看到这样的自己,说实话还是有点小兴奋的。然后,我膨胀了,我开始想探索更多可能性了……

这个时候,我只需要点右下角的「我变」,就可以换不同的风格。

可以看出,这款产品戳中用户痛点的同时,将功能操作做的如此简单易用,因此,在「下沉市场」中非常火爆(当然运营做的也不错)。

再比如:悟空问答,可以称它为「下沉」版的知乎,这款产品是今日头条做的针对四五六线用户的问答社区。

从产品的功能层面来看,针对下沉用户的「悟空问答」,明显的更加简单易操作,没有像知乎一样的「想法」,「大学」等功能,上来看到的就是「推荐」的 feed。

同时在产品内容层面,也针对下沉用户做了跟知乎差异化推荐。

因为针对四五六线用户,「有用」只是他网络生活中一部分,更大的部分是「有趣」,也就是「杀时间」的产品。因此,产品推荐的问题大多是「你见过最美的女人是什么样?」,「如何不被传销组织骗?」之类更符合他们认知层面的内容。

不过,知乎目前也从早起努力经营,且引以为傲的精英氛围,明显意识到这一策略在用户增长方面的短板,所以能从近期产品推荐给用户的更接地气的内容来看,他们也在做「用户下沉」的事情。

以上可以看出,针对非一二线用户产品方面,功能要尽可能的简单易用,避免懵逼;内容层面,也要更符合下沉用户的认知,更有趣,帮助他们消磨时间。

3. 设计层面

在这个时候,设计师们会说,难道我们的设计也要做成土嗨+乡村迪斯科风,来迎合五六线城市用户的审美嘛?

不可否认,下沉用户的审美还停留在,「多就是好,颜色丰富就是好」的阶段。因此,他们往往会被「拼多多」所代表的那种复杂,信息高度密集的设计风格所吸引。

你可能会说:这不符合设计师们所推崇的「极简,留白」的高格调设计追求。但是,这正是身为设计师的我们,需要平衡的客观存在的问题。

比如:下面的案例,就可以看出信息密集,颜色丰富,但是,也可以做出高品质的设计。

再比如:抖音目前已经下沉到农村用户,但是 UI设计上也不是非要土嗨风,依然不输给一二线主流产品,然而五六线用户也没有因此而无法接受。

所以,我们不能因为个别针对五六线产品的设计做的 LOW,而故意做出葬爱家族般的设计。

我们应该平衡他们审美的同时,兼顾着设计美学,从而肩负着提升国民审美水平的使命。

因为,人人都有享受高品质设计的权利,这需要一代又一代设计师去努力的。这一点,我们需要像日本设计学习。

总结

总的来说,生活在一二线城市、过着快节奏的生活、用着新颖的产品、从事着互联网的我们,时常觉得自己的感受就能代表所有人,感觉我们都将进入并将长期处于人工智能时代了,怎么还有人不懂互联网呢。这就如黄峥(拼多多创始人)所说「五环内的人」无法理解「五环外」的世界。

通过最近思考发现,不管从「用户需求」还是「增长潜力」方面,「用户下沉」都是互联网产品可行的事儿,但是,我们需要针对「下沉用户」在运营、产品、设计层面做差异化处理,使它更容易被非一二线用户接受并使用。

同时,深处互联网行业的我们,应该在低头琢磨小功能的时候,抬头看一下大环境,多研究下用户真实处境及场景,避免沉浸在自嗨的方案中。

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


上亿人使用的腾讯微视,是如何做品牌体验设计的?

涛涛

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

编者按:微视作为今年腾讯对抗抖音的核心产品,其重要性不言而喻。在短视频App 百花齐放的今天,腾讯微视该如何做品牌设计才能避免同质化,给产品带来价值呢?本文来自腾讯设计师的复盘回顾,你可以看到大厂的完整设计流程是怎样的。

一、项目背景

2017年是整个短视频大爆发的时期,内容产业逐渐成为移动互联网新的生力军。短视频产品同质化,用户体验趋同,团队希望运用品牌体验的全局设计思维,从视觉识别,用户体验,线上线下推广及产品礼品等多个维度来凸显产品核心价值,搭建一套完整统一的产品设计语言。

二、目标

微视目标很清晰,需要在短时间内快速进入短视频第一集团,切入短视频社交领域,挖掘更多机会点,也希望借这个机会能成为像微信这样的腾讯战略级产品。

三、设计挑战

设计的挑战点,短视频无论是产品形态还是设计体验都已成熟,如何避免同质化,在设计上寻求自己的核心竞争力;另外短视频产品强调内容运营,设计如何能够给产品带来价值,也是微视设计在这次的最大挑战。

微视在刚起步阶段,品牌团队曾经给微视做过1.0版本的设计,当时微视的设计思路没有太清晰,最终设计偏向于简洁专注的方向;但随着短视频逐步上升为腾讯的战略方向,微视单一的设计风格已经不能满足本身需求了,微视需要一个更丰富的设计语言,这给微视的新设计重新提供了一次机会。

我们梳理了微视的设计流程,整个微视品牌设计分为三大块内容,策略,设计和体验;设计前期需要明确微视的整体品牌定位以及挖掘产品的核心价值,推导出一套符合产品气质的设计原则,品牌设计上,应该是整个产品的设计语言素材库,其中包括了标志的设计,字体库的建立,色彩系统的搭建,图形延展设计,插画风格的提炼,动效概念等核心设计元素;在最后一环的品牌体验,代表了微视所有的场景媒介,都需要从设计语言素材库内提取设计元素并适配对应的设计,保证所有媒介场景的高度统一。

「做年轻人的潮流分享社区」是整个微视的品牌定位,让年轻人感知玩微视是一种潮流,在微视里能够挖掘更多很酷的事情和有趣内容,成为年轻人分享潮流和趣味的平台;微视的 slogan 是「发现更有趣」,发现更多有趣的人,和事,或者说是一种生活态度;基于整个品牌定位,我们挖掘微视的三大核心价值:保持好奇,寻找生活趣事;微视展现与众不同的自我;打造微视达人的潮流文化。三个核心价值,我们构建出微视的基础设计原则:微视是具备丰富内容和玩法多变的产品;它应该有个性化的标签来彰显自己的态度;微视是一个自带潮流属性的平台,在潮流圈中有很好的认可度,通过它来传播自己的态度和生活方式。

四、微视slogan:发现更有趣

通过整体的品牌策略与其它短视频拉开差异化,当下主要竞品的品牌定位都是强调记录生活,记录美好时刻;微视则强调用户自己,主动去挖掘更多有趣的人,有趣的玩法,生活趣事,探索世界,发现更多精彩。

我们在设计的第一阶段,logo设计,就是围绕「有趣」来展开发散设计。设计方案是否有趣,是我们的第一标准;它可能是一个实际存在的事物,它也有可能是一个抽象的造型,但它必须是有趣值得玩味的,也可能是别的概念会引起你的兴趣点。最终我们决定使用一个特别的播放键来代表微视,播放键的造型能让用户感受它是拥有多个维度的,2D,3D甚至是异度空间等,寓意着用户可以从多个维度来看世界,寻找有趣的内容。

我们针对这个大方向再进行了几轮细化,右边是最终的设计方案,这个 logo 希望它在多数的 app 当中表现的足够抢眼,所以色彩纯度足够高,渐变四色的搭配能让它从众多 app 中跳跃出来。

logo设计确定后,接下来补充 logo 在各使用场景中的基础设计规范,另外会增加一个不带 app底的场景,微视不只是单纯的应用在 app 上,它还需要有很好的扩展性。

四色渐变是微视的品牌色,确定了微视红是它的主品牌色,紫色,蓝色和桃红则是它的子品牌色。

另外在品牌字体的选择上,我们选择了三款原生字体作为微视的标准品牌字体。Fugaz-One 是一款能够广泛用于各种书刊画册的艺术字体,它的大写字体具有强烈的视觉冲击力,选择它作为微视标准英文字体;汉仪雅酷黑也是一款用于艺术设计方面的简体中文字体,字体线条粗壮,字形端正大方,并且字库相对其它艺术字体更完整;汉仪旗黑系列则作为微视信息类字体的补充,汉仪旗黑是汉仪字库推出的一款非常庞大而完整的家族字体,字体的各类粗细度都很齐全,并且能完美的实现各类终端环境的呈现。

微视的 pattern 是从 logo 的造型延展出来的纹理设计,这套 pattern会 应用在许多应用场景上,包括广告,内容模版,周边产品等需要辅助设计的场景中。

△ 微视网站

△ 微视内容模板

△ 品牌视频结束页

Pattern 也会结合激光动效的理念运用到微视的场景中,例如官网设计,内容模版,视频结束页等,Pattern 会作为底层展现品牌形象,在整个过程中会有品牌色激光动效,让整个场景丰富立体起来。

微视logo 具备多维度的特性,将这种特性运用到 UI场景的 loading 和微视水印效果上,增强品牌的独特性和趣味性;另外我们也会将 logo 做成霓虹灯的立体装置在线下活动中展出,让用户感受 logo 的丰富多变。

△ 点击查看完整视频

品牌视频通过多个几何维度来诠释 logo 理念,强调微视品牌趣味性。

结合 logo 的造型特征,我们打造了一套完整的图形系统素材库,里面包含了完整的字母与数字,还有结合短视频特性的图标体系;目前这套素材库仍在不断完善中,所有的图形设计都会运用到后期微视的广告和运营活动当中,霓虹灯的实体效果会结合线下的活动装置中使用,这套图形系统素材库,不但具备很好的品牌识别度,而且强调了微视有趣的设计理念。

品牌体验模块把我们确定的这套设计语言结合到与用户面对面的场景中来。品牌体验主要阐述微视的广告,活动和礼品三大块内容上。

在整体的微视广告设计中,我们把微视达人的个性拆成六大类别,每一类型都会拥有一个抽象的图形来代表这一类人群,向往美好生活和生活趣事的人;作风个性炸裂,酷炫的人;有才华的人;潮流网红;二次元;甚至是闷骚奇葩的人等。

每类个性标签的人群都有与之对应的风格与设计手法匹配,例如美趣标签的设计风格偏向暖色氛围与立体化图形的搭配;炸裂标签的达人,风格酷炫,广告整体运用撞色叠加的手法+霓虹灯的视觉效果;每种标签的设定都会有不一样的定义,让微视的广告语言更丰富和多元化。

微视官方品牌广告采用微视的标准品牌风格,对比其它标签的设计,它需要更加微视的风格。在首波微视推广中都采用了标准风格。我们给每套风格设定一套设计规范,方便后期CP 和其他设计师介入制作广告提供一套标准。

另外在微视的 IP形象微视狗的推广上,也采用微视的品牌风格来宣传。

微视中期的推广投放量非常巨大,所以也是微视广告语言需要多元化的原因,只有一套风格设定,不能满足微视的推广需求,美趣风格也是专门为101打造的微视广告,设定的糖果色氛围和3d设计很符合101女团的风格。

酷炫风强调撞色对比来体现氛围感,搭配品牌霓虹灯的视觉效果来呈现,霓虹灯设计也是运用微视图标素材库里提取出来的元素设计。在 NBA总决赛推广期,微视狗与 nba 合作的广告采用了这套风格设定。

微视广告在后期陆续补充了未来概念,街头时尚等风格,都是围绕大量不同个性的明星设定。

二次元作为近几年影响力逐渐壮大的群体,微视也打造了一套插画风格的设计,风格抽象,色彩纯度高,画质的细节多,适用于年轻搞怪的明星使用。

微视官网也采用插画作为主要设计的风格,这套推广插画偏向潮流感科技感,服装特地设计成 wesee 出品,让用户看到微视和其它竞品不一样的设计定位。

微视设计原则的第二条是微视拥有很强烈的个性标签,代表微视自身的态度。

我们采用了警示带的概念,作为微视品牌的专属元素,警示带能够彰显一个人的态度,同时又有趣味性和潮流感。我们结合了微视达人的特性,提炼出6段个性的词语作为警示带内容(拒绝雷同,发现有趣,忠于态度,潮流支配,躁动时代,极度爆炸)让警示带的设计更多选择和多样化。

在 vans 和微视的联名活动中,微视采用了警示带概念来对整个活动场馆进行铺装。

警示带概念还运用到微视线下潮流商品的设计中,背包,帽子,tee,手机壳等单品。

微视的最后一条设计原则,阐述微视的潮流文化。最主要的场景是在微视的达人商品设计上。

我们不希望只把微视当作是一个短视频的产品来做,设计师希望把它打造成一个新生的潮流生活品牌,无论是在选择产品的类型,到设计,打样,还有拍摄推广,都和普通的公司文化衫,或者纪念品拉开差距。

微视的潮流贴纸,除了作为线下达人活动的礼品,也作为线上APP 贴纸库的内容资源,提供给用户使用。

微视后续会继续生产更多的周边商品,比如拖鞋,背包,卫衣,毛巾等,这些都属于生产周期短,没有复杂工艺,性价比极高,属于潮流圈的基础单品,人手一件。这些单品都拿到能够触达用户的官方线下活动和品牌联名活动中,手递手传播微视的潮流品牌影响力。

总结

微视设计不仅包含了APP的体验设计,还包含了市场营销,运营活动,达人推广,周边商品等多个设计环节,环环相扣,缺一不可,一起构建了整个大微视的设计体系;互联网品牌体验在这几年逐渐显得重要,在如何设计同质化严重的产品上,如何打造竞品差异化的设计上,整体规划清晰的品牌设计能够让产品有更好的唯一性和专属感。

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

高手私藏的 UI 细节设计,这篇全都给你整理好了!

涛涛

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

这篇文章渗透进页面中的每一个 Kit控件,深入的分析每一个控件所能带给用户的视觉以及心理感受。

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

用一个案例,告诉你我是如何把工作效率提高30%的!

涛涛

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

最近刚做完一个项目,我发现我的设计效率相比之前竟然提升了30%以上。今天用「个人中心页面从思考到设计全过程」这个案例给大家分享一下。

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

甲方竟敢说你的配色丑! 我来教你怼回去

涛涛


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

当我们看到一件设计作品的时候,映入眼帘的先是配色,然后才是其他的内容,配色的好坏,直接决定了我们对这个作品的第一印象。


当然,选中一个合适的配色绝不是一个偶然的事儿,这其实是一项系统的工作,只有知己知彼,把色彩研究透了,才能运用的得心应手。

以下几个方面也许就是经常困扰你的点:

  • 想要表达的设计思想不知道怎么去选取合适的色彩;
  • 缺少对色彩全面的认识;
  • 对配色没有一个系统的搭配方法;
  • 不懂得如何提高对色彩的敏感度。

接下来,我会分几个部分,来聊一聊色彩及配色。

一、认识色彩

1. 色彩理论

开始理解色彩,必然要提到色彩三要素,色相、纯度、明度,这是最基本的概念,我就简单的以三张图概括下:

色相:指的就是红色、绿色这些色调的称呼。

纯度:指色彩的鲜明程度。

明度:指色彩的明亮程度。

而色相又大体上可以分为冷色系和暖色系。

二、色彩印象

在进行配色实践之前,关于色彩本身的理解十分重要,在理解色彩独特的性质之后,才能进一步学习更有效的配色设计技巧。

点缀我们生活的各种色彩,都具有影响人类心理、情绪、感觉的力量,下面展开介绍一些代表性的色彩印象。

1. 红色

红色既有积极的一面,也有消极的一面,在考虑如何用其他颜色去搭配红色之前,先想想想要红色在整个作品中表现什么?

属于红色的关键词有:热情、兴奋、能量、爱、华丽的、辉煌的、生命力、主动性、活力、激情、辛辣的、炙热的;愤怒、危险、攻击性的、暴力性的、嫉妒、压力、压迫感、刺激的等等。

如果想要表现红色积极性的一面,最好使用泛黄的大红色或者明度较高的粉红色系的颜色。泛黄的红色比100%红色更能够表达温暖的感觉,而在粉红色系中,泛黄的暖粉红色比泛紫的冷粉红色更能传达出积极的印象。

相反,如果想要表现红色消极性的一面,使用泛紫的红色比较好。红色和紫红色中间的色系给人冷淡、不自然的感觉。这些色彩的明度越低,越给人不自然的和消极的形象。

下面举几个红色配色的案例。

上面这幅作品,设计师想要传达出「危险」「压迫感」的情感信息,塑造一个难民的形象,整个配色以红黑搭配,更显深沉。

红色也有着「华丽感」和「刺激感」,大面积的红色做为底色,凸显出画面中的人物形象,很好的诠释优雅和成熟。

2. 橙色

每种颜色都会有某种情感偏向,而橙色的情感是非常暧昧的,这种暧昧感使得它比红色更加温和,比黄色更加老练,即它有一种中性的魅力。

属于橙色的关键词有:活跃、温暖的、喜悦、开朗的、朝气蓬勃的、明快的、跃动的、亲近的、丰收、健康的、轻快的、明朗的、朴素的、安心的、温和的;任性的、歇斯底里的、嘈杂的、廉价的等等。

同属于橙色系的色彩,实际上给人的印象是完全不同的。鲜明的橙色富于年轻感,而偏褐色的橙色更具有复古感。

下面举几个橙色配色的案例。

以大面积的橙色做为底色,搭配高饱和度的黄色,这些色彩的「温度」都很高,很好的表现出了橙色「朝气蓬勃」的感觉。

将橙色的明度适当降低,搭配上「厚重」的红褐色,很好的展现除了橙色鲜明的个性。

饱和度高的色彩难免会表现出「廉价」的气息,画面中的橙色、黄色、蓝色、紫色,饱和度都偏高,很好的展现了作品的「销售属性」。

3. 黄色

谁都无法否定黄色带来的温暖,因为它就是太阳发出的光,黄色就是光,它也被称为「光之色彩」。而作为光的颜色,黄色可以作为挽救黯淡色调的救世主,赋予画面更多活力。

属于黄色的关键词有:明亮的、集中精神的、健康的、幽默的、希望、开放感、未来、宽厚的、轻快的、幸福、纯洁、明快、知识、权威、非正式的、可爱的、繁华的;幼稚、不成熟、警戒等等。

泛橙色的黄色比原色黄更能营造柔和温暖的氛围,这种平和积极的印象更能表现亲切多情的感觉。

泛绿的黄色偏冷,给人感觉冷漠。在原黄中加入白色和黑色的话,黄色本身的明亮的光感和暖意就会消失,变成偏冷的色彩。

下面举几个黄色配色的案例。

黄色的最「暖」的颜色,它很好的体现了色彩的「轻快感」,采用黄色为主色调,使得整个画面都「明亮起来」了。

这是一个以黄色为主,黑色为点睛色的配色,使用黄色超强的表现力,和黑色这种冷色搭配表现出「强烈刺激」的对比。

黄色同时也是小朋友最喜爱的颜色之一,高明度的配色,整体呈现出「可爱」和「童稚」的感觉。

4. 绿色

绿色作为大自然的主旋律,能带给人安宁舒适、生机勃勃的感觉。同时,绿色也是一种存在感极强的颜色,虽然是最为普遍的存在,但也是很难和其他的颜色搭配。

属于绿色的关键词有:自然、和谐、平衡、健康的、和平、治疗、新鲜、安逸、安心、安定、和煦的、诚实的、朴素的、放松的、年轻的、平等、公平、安全;不成熟、带有乡土气息的等等。

自然界的绿色是多种多样的,虽然看上去都是绿色,却可以有青葱的嫩绿,松针的草绿,清亮深邃的青绿色,落叶的橄榄绿等。这些颜色各有各的感觉。

下面举几个绿色配色的案例。

绿色是最「自然」的颜色,会让人不禁想起田园和植物,绿色和蓝色的搭配,没有强烈的对比感,倒显得画面更加「朴素」。

绿色搭配黑白灰,毫无异议的显得干净利落,上图中的绿色作为点睛色,平衡了黑白的单调,而这里的白色和绿色都趋向于轻薄,因此需要用深黑,以加强色彩的力量感。

绿色与偏暖的黄色搭配时,重要的是要强调两者之中的一个,在上图中的主色为绿色,点睛色为黄色,突出强调作品中的画面感。绿色的饱和度较低,与部分黄色相得益彰地变为了背景,辅助突出了点睛色。

5. 蓝色

在很多最爱颜色的民意调查中,蓝色都是最受大家喜欢的颜色。蓝色的原始记忆来自天空的广阔和大海的深邃。它有凉爽、神秘和寂静的感觉,同时又能塑造出特别的亲和力。

属于蓝色的关键词有:稳重、镇静、冷静、爽快、清爽、清凉感、信赖感、沉着、知识性、清洁的、成功的、男性的、理性、诚实;忧郁、孤独、荒凉、悲伤的、保守的、消极的等等。

如果要强调蓝色的积极印象,越贴近绿色的蓝色越好。但是,即便纯度较低,明度高的蓝色也能表现出明朗和积极的氛围。

下面举几个蓝色配色的案例。

提起夏天,我猜你想到的肯定是蓝天、大海,明度稍高的天蓝色,搭配深蓝色,充分体现了夏天的「爽快」与「清凉感」。

同时,蓝色也是极具商务个性的颜色,很多企业都选择蓝色做为品牌色,它也代表着「信赖感」和「成功」。

「蓝色是忧郁的」,静谧的夜晚,带来「孤独」与「荒凉」。

6. 紫色

在商业设计中,紫色被认为是一种优雅高档的色彩,常用于表现商品的奢华和高贵,同时也是很多艺术家喜爱的颜色。

属于紫色的关键词有:高贵、典雅、高尚、优美、风度、尊严、干练、神秘、秘密、心性、性感的、豪华的、华丽的、改观的;不安的、悲伤、孤独、嫉妒、自负、不健康、病弱等等。

紫色带有暗色的特质,所以明度稍微低一点就容易给人以沉闷的感觉。因此,紫色在与其他色彩配色时,尽量选择明度较高的紫色。

下面举几个紫色配色的案例。

紫色是「神秘」的,紫色本身是「冷暗」的颜色,所以与纯度高的色彩配色会强化紫色的冷暗感。

要用紫色来表现优雅、高贵等积极印象时,要特别注意纯度的把握。这种情况下,低纯度的暗紫色比高纯度的亮紫色更能传达积极的印象。

紫色靠近蓝色,所以紫色也有带有「孤独」和「悲伤」的调性,蓝紫色系的紫色更容易传达消极的感觉。

7. 白色

提起白色首先想到的纯洁,给人干净的感觉,它不会有强烈的个性,但是白色是永远的流行色。

属于白色的关键词有:清洁、纯净、清澈、正义、善良、和平、净化、诚实、胜利、真实、简约;空虚、变幻无常的、孤独、失败、离别、死亡、寒冷。

无印良品的产品一直注重「纯朴」、「简洁」、「环保」、以人为本等理念,在包装与产品设计上皆无品牌标注,但是却让人牢牢的记住了它。

大面积的白色显得「空虚」,加上蓝色的点缀,画面更显得「孤独」和「寒冷」,将白色的负面情绪表现的更淋漓尽致。

8. 黑色

当所有的光线都被吸收了,感觉就是黑色, 是一种具有多种不同文化意义的颜色,和白色一样也是永不过时的颜色。

属于黑色的关键词有:严肃、厚重、威严、神秘、高级感、充实、富裕、正式的、时髦的、硬的、重的;收缩、黑暗的、阴郁、邪恶、黑夜、恐怖、压抑、绝望、死亡、自卑、不安。

在画面中以黑灰色为底色,加上磨砂质感,突出了自行车的「高级感」。

黑色的背景加上压暗的人物形象,一种「力量感」油然而生,人物的形象也是凸显了整体画面的氛围。

总结

颜色无所谓美丑,我们对于颜色的判断完全是一种主观的经验,这个作品配色的好坏,并不是取决于这个颜色的好不好看,而是这个颜色适合不适合这个作品要传达的意境。

我们必须摒弃旧有的对颜色的判断,排除自身受到的社会文化的观念影响,从一个全新的眼光来研究色彩。只有在充分了解每一种颜色的色彩印象,才能消除你对配色的迷惑与不安。

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


可能是最全面的表单设计完全手册!

涛涛


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

表单设计可以说是设计界一个老生常谈的话题,针对它的重要性自不必多言。本文结合自身经验和所看所学所得总结,希望能帮助到大家。


从「因子(构成要件)」的角度,将表单逐一拆分,从而能够全面的看待。

如下,大卸八块,一一道来:

  • 结构
  • 标签
  • 输入字段
  • 占位符
  • 帮助
  • 操作
  • 验证
  • 反馈

一、结构 Structure

字段的顺序、节奏、外观和组织。

1. 只问所需

必要而不是全部,简化表单,或许是优化表单的最大建议。简化的办法之一就是追溯每个字段为什么需要,是否是当前最相关的信息,如果它是可选的,最好不要显示。

2. 有理排序

先问什么,再问什么,前后字段根据相关性循循渐进。

3. 从易到难

从用户相对无抵触的信息开始逐渐到隐私的信息,而不是一开始就让用户萌生退意。

4. 组织相关

在繁多字段的情况下,将相关字段按照顺序进行分类组合,并通过增加一些额外的空间或者主标题将它们分成语义组,增加了页面呼吸和节奏感,从而帮助用户更加轻松完成表单。

5. 单列呈现

单列,只需眼睛沿着自然的方向从上至下,便于用户理解操作。多列,眼睛需要按照「之」形进行浏览,从而增加浏览和理解认知的时间。

当然单列呈现还是多列,并非绝对,需根据页面空间,表单内容及性质共同决定。

6. 提高对比度

提高颜色的对比度,你的用户群体可不是高清屏,飞行员。

二、标签 label

标签告诉用户需要输入什么。

1. 名词标签

名词具有很好的描述性且简洁明了。常用的字段可以使用大家熟悉的图标代替文本。

2. 标签位置

左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

多数情况下,谨慎使用内联标签,在用户输入后,内联标签会消失,用户无法判断输入的内容是否符合,当然在用户熟悉且简单的字段下可采用(例如登录中只有账号和密码)。针对以上问题,你可以采用内联浮动标签解决内联标签在输入后标签消失的弊端。

三、输入字段 Input

承载用户输入的区域。

1. 自动对焦(PC端)

进行表单页面,自动对焦第一个输入字段可以引导用户开始进行输入。

2. 提供默认值

可根据已知信息,帮助用户预判内容。例如可以通过 IP 检测出用户的地理位置。

3. 保存输入的数据

记住用户已经填写的内容,以防万一(例如页面刷新),从而避免用户需要再次输入而放弃。

4. 字段约束

为有要求的字段设置限制。例如,最大字符数,电话中数字、字母符号等要求,从而有效的避免脏数据。

5. 格式化(掩码)输入

提供输入格式,帮助用户理解所填内容且减少错误发生。常用于手机号码、日期、银行卡和邮编等。

6. 匹配键盘(移动端)

提供合适的键盘,帮助用户快速完成。

7. 区分可填

如上所述,尽量避免可填字段。如果不可避免,应该做明确区分。根据经验,可填和必填的数量少的做标记说明。

常规做法:必填,使用「*」星号符;可填,使用「(选填)」。

四、占位符 Placeholder

标签的额外描述,帮助用户了解可输入的数据类型和格式提示。

1. 颜色区分

它是内容提示,而不是内容。

2. 不是所有输入框都需要占位符

占位符是对输入内容有特殊要求的提示或提醒,也可理解为对标签的补充,并不是所有的输入框都需要占位符。

3. 输入后消失

不要在鼠标键入后消失,而是在输入内容后消失,这样可以在用户还未输入的时候,依然帮助到用户。

如果提示特别复杂或者重要,请使用帮助,它会一直显示在那里。

五、帮助提示 Tips

说明要求,解释原因,甚至帮助回忆。

1. 三种方式

常驻、按需提供、偶尔需要。

2. 给予解释

当前需要用户填写相对隐私的信息时,请给予解释这么做的原因及目的。

六、操作 Submit

对当前用户输入数据的提交等动作。

1. 区分主次

主操作,是我们期望用户的使用途径,应该在视觉上与次操作做出明显的区分,以突显号召用户点击。

2. 合理放置

合理放置操作的位置,可根据表单的排列方式合理摆放,避免居中。例如表单采用的是顶部对齐,你可以将操作与输入字段左对齐,这样用户在完成输入的时候,轻松地看到操作按钮。

3. 准确命名

清晰可预测。应该准确地描述用户点击按钮后会发生什么。

4. 行动号召

按钮应始终带有强烈的动词,鼓励用户行动。

为了给用户提供足够的上下文,在按钮上使用「动词」 +「名词」格式,除了保存,关闭,取消或确定等常用操作。

5. 禁用操作

在未完成必填字段,禁用操作按钮,通过直观的视觉上告诉用户是否完成了要求,并在恰当的时刻(表单填写完成,按钮被激活)将用户的视线吸引到按钮上。

七、验证 Required

对用户输入数据的验证反馈。

1. 前端验证和后端验证

前端验证不需要服务器上传验证的数据,就可以判断,例如手机格式等;但是要记住在用户输入后才进行验证,为空不验证;

后端验证,例如手机注册输入效验码,通过后才注册成功,需要通过服务器判断,才知道用户输入的是否正确。

2. 错在哪里,显示在哪里

就近原则,方便用户发现并修改操作。

3. 结合颜色、图标和文字

我们不仅仅需要视觉上的区别(请考虑色盲用户),还需要文字说明并告知原因和解决办法,而不是简单的「输入错误」。

4. 请勿清除

错误的字段,请勿在键入后直接清除,请给用户在此基础上修改的机会,记住用户才是决定者。

八、反馈 Feedback

对用户行为的反馈,告知当前状态。

1. 操作前:光标状态

鼠标在屏幕上的映射,我们称之为光标(指针),它会随着操作对象及系统状态而呈现出不同形状,让用户对操作的行为及结果有预先的心理感知。

2. 操作中:操作反馈

如 default,disabled,hover,fouce,pressed,active,error,success 等。例如输入框的悬停和键入的视觉反馈,从而帮助用户聚焦。

3. 操作后:按钮加载

呈现按钮的加载过程,而不是禁止不动,用户会以为系统没有执行操作,从而进行多次点击,呈现加载并禁止用户的后续点击操作。

总结

以上便是对表单设计的一些总结,更多的是提供一种分析问题的框架,从结构化的思维分析设计问题,从而能够全面的认识一个事物并进行了解掌握,愿对你有所帮助。

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


什么是好的网站?

涛涛


关于什么是好设计的问题的答案,定义了设计师。

“有什么好处,Phaedrus,还有什么不好 - 需要我们让任何人告诉我们这些事情吗?” Robert M. Pirsig,Zen和摩托车维修艺术:对价值观的探讨

上周,我的一位英雄(@johnmaeda)发推文说“设计一直是关于肤浅和实质的。”我认为这是一个很好的引用。出于某种原因,我们需要时刻提醒我们,设计不仅仅是花哨的造型。但为什么?为什么物质需要防御?如果你看看像Dribbble这样的网站,设计的表面看起来真的很吸引人。肤浅的品质不需要解释。但这不是设计。在他的“ 设计形状”一书中,交互设计师Frank Chimero正确地说“如果我们留在表面并且不深入研究为什么我们不是真正的设计”。如果问为什么是设计的本质,设计真的是哲学的一个分支。

清晰思考

目前我们有一位来自马斯特里赫特大学的教授,他们在我们的设计工作室中。他正在研究野外设计师,就像人类学家在非洲研究一个不知名的部落一样。他研究的主题之一是设计过程。我总是觉得这是一个有趣的话题,这就是我对Chimero的书的原因:它从设计师的角度讲述了设计过程。他的内部人士认为这是一场认可的盛宴。关于他对设计过程的描述最让我困惑的是清晰思考的想法。奇美罗对他的工作方式有一个有趣的描述:他只是“出现”并让“语境说出它需要的东西”。他说“设计师的工作就是找出一种方法让问题表明它是真实的自我,这样他才能回应已经出现的真相。

设计师通过询问原因来工作。问为什么“更高水平的研究,一个调查所使用的动机和思维过程,以便它们可以应用于我们自己的情况。”为什么看起来更深。它将目前的解决方案与用户的需求相结合,以设想更好的解决方案。

哲学

当我们开始问为什么并开始思考真理时,我们就进入了哲学领域。我一直将设计(和其他艺术)视为哲学的视觉形式。比传统哲学更精细的一个,因为它不仅通过文字而且通过图像进行思考。有些人可能会称这种特殊形式的哲学设计思维。当我们将设计定义为哲学的一个分支时,下一步就是质疑这个世界上一些伟大的思想家,看看他们对设计的看法。对我来说,Martin Heidegger有两个哲学文本定义了良好的设计。

关于您的客户和互联网的真相

第一部是Der Ursprung des Kunstwerkes(艺术作品的起源),其中海德格尔思考什么使艺术品成为艺术品。简而言之,他认为,为了使艺术作品成为一件好作品,它必须揭示我们存在的真相。他用梵高的一双农夫鞋作为例子。这幅画是一件艺术品,因为它向我们展示了鞋子,农业,生活的真相,也展示了梵高绘画时的绘画媒介和艺术现状。它很漂亮,根据海德格尔的说法,美丽是表达真相的最好方式。

如果我们将网页设计视为一门艺术,我们可以将海德格尔的艺术思想转化为网站,并得出一个有用的网站定义。首先(和Chimero在他的书中所说的相似),一个好的网站揭示了用户与您为其建立网站的组织的互动的真相。当然,美丽很重要,因为它是真相展示自己的最佳方式。Beauty以直接方式连接到用户。它比单词更快更有效。但海德格尔增加了另一个重要方面。一件好的艺术品,即一个网站也定义了媒体,即互联网。因此,良好网站的问题与互联网的问题紧密相关。一个好的网站向我们展示了互联网是什么或可以是什么。

与媒体的深层联系

因此,与您正在设计的介质建立深层连接至关重要。这是海德格尔第二篇文章的主题,它定义了良好的设计。在他的文本Bauen,wohnen,denken(建筑,生活,思考)他说,在你建造之前,你首先必须学会生活。在这篇关于建筑的文章中,他将设计与对人类基本条件的理解联系起来。他敦促设计师与他们的主题联系,实现他们的主题,而不是以抽象的方式看待它。对于建筑师来说,很容易爱上图纸,抽象概念和模型。但是如果没有与你设计的生活有真正的联系,它就会变得毫无用处。就像建筑一样,互联网也是人类的基本需求。我们将互联网视为能够让您做新事物的东西。但是人们只想做他们一直做的事情。 人们的经验和广泛的兴趣促进了设计师的理解和想象力。

通过哲学分析生活 - 问为什么 - 是良好设计的基础。哲学是生活与设计之间缺失的纽带。

一个好网站的定义

就像艺术一样,设计一直需要定义。我认为好的设计问题的答案定义了设计师。所以:
- 设计就是问为什么(所以它基本上是哲学)
- 网页设计的目的是找到关于客户,用户和互联网
的真相 - 真相最好通过美容传达
- 找到关于你的媒介的真相必须与之建立深厚的联系

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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

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

存档