【翻译】2017热门界面设计趋势回顾(上)

原文:《Review of Popular Interface Design Trends in 2017

以下是uxplanet整理出来的2017设计趋势,供参考。此篇为上半部分。


功能极简化

很大一部分的手机应用程序和网站沿袭和传承了极简主义的法则,简约的界面使得那些重要的视觉元素能被很清晰地传达给用户,表达明确的含义。

极简功能主要有以下几个特点:

简单

清晰

传递视觉层级

关注元素构成和相互之间的比例关系

每个元素都有自己的功能性

大量留白

关注核心内容的细节

把文字排印作为重要的设计元素使用

减少无意义的装饰元素

当然,这个列表还可以继续写下去,但无外乎都是一个目的——让界面设计变得更加友好。如果把这些特点合理地规划实践,可以帮助用户聚焦于界面的核心内容、让用户体验的过程更有目的性。再者,简洁的界面通常看上去整洁而精致,给人以审美上的满足感,这也是用户体验理论中满足感的来源之一。

WineYard App


野兽派风格

野兽派的数字设计趋势在去年就已急速上升,今年持续升温。“野兽派”一词用来形容那些旨在突破传统标准、使用创新技术的设计风格,用这种方式创立的网站有悖于一般审美的“标准”站点(工整、协调,有着复杂的布局层次,把精力放在视觉审美表现上),它们显得颇为简单,外表看上去不加修饰,不会加载过多的视觉细节,甚至有的页面看上去就像一个简陋的HTML页面。考虑你的设计目的和用户,慎重地选择和使用它可以让你的数字产品看上去与众不同,这种“原始”意味的风格有可能会招一些用户的反感,但绝不会被忽视。


排字嵌图

加大加粗的字体一直都在网站和移动端布局里保有一席之地,今年,这种风格有了新的表现——使用页面中的视觉元素把标题文字切割或者刻印分离开。这种设计形式加强了元素之间的整体感和协调感,使文字和界面紧密地联系在一起。

Big City Guide


hero banner动画化

网站设计中,hero banner一般是引人注目的大型图片,通常担负起网站内容的视觉呈现的重责,有助于传达信息、表达情绪。再者,相比起页面里其他有吸引力的图像,动画化的hero banner在信息和情绪的传递上更有感染力。优秀的hero banner一般需要满足以下几个目的:

吸引用户的注意力

通过视觉方式传递信息

能适应大部分样式内容

根据主题建立情绪和气氛

有效地表达核心观念、介绍物件

Dance Academy Landing Page


主题定制版插画

根据主题配的矢量插画在现在的网站和移动端UI中占据越来越大的版面,让用户得以快速地获取和认知信息内容。在网站和移动端界面上一般使用mascotsicon插画等形式,以此来提升页面的视觉呈现,同时,也加强了可用性,导航也变得一目了然。再者,图片的使用增强了体验设计的可访问性,为文字识别困难的用户(如诵读困难者、尚无阅读能力的学龄前儿童等)打破认知的局限。

Financial Service Website


无边框布局

今年,网站界面也频繁地使用了大背景图或者纹理+无边框这一设计样式,这样的排版视觉上看上去更有呼吸感、空间感,不会被页面的边界而打扰,影响交互的进行。

Big City Guide


种类丰富的交互动画

跟上一年一样,界面交互动画继续发光发热。它不仅为交互增添了活力和动感,对于提高可用性也起了重要的作用。通过交互动画效果,操作过程中,交互元素能用更清晰的方式去回应用户,这样一来,信息就能更好地表达和传递出来。今年,按钮、tab切换、图标、预加载及滑动条等交互元素都有不错的动画表现。

Watering Tracker App


友好度高的品牌UI设计

品牌重做也是2017不得不提的一个设计趋势:大量的跨国或本土公司开始对自有的产品或者品牌进行重新设计,把logo的形式和细节改得简洁明了。这其中一个原因,是由于拥有更高可用性和指向性的品牌设计,能为它们在市场竞争中赢得更多消费者的注目。因此,品牌logo在重新设计时会更加考虑是否有亲和力、在数码设备和平台上信息传递是否有效。此外,logo动画使得图形元素变得生动、更有品牌识别度,也慢慢成为了一种趋势。

Whizzly Logo Animation


单色UI

为了把最多的功能精简为最小的设计表达,单色UI的解决方案逐渐进入了大家的视线。这类UI的样式通常看上去很时髦,配色协调,但又不抢眼。当然,设计师们如果想要设计出这样的样式风格,需要花很大功夫让设计看上去不显得单调,同时核心元素又必须一目了然。

Jewellery E-Commerce App


背景色趋暗

移动端应用及网站界面越来越多地使用暗色作为背景色来搭配,在那些着重视觉效果的数码应用上尤为明显。以传统的观念来说,暗色背景往往为优雅或者威严的对象服务,深色基调能让用户不容易被分散注意力,更快进入到不同的内容气氛中。现在,很多APP提供了深色模式,为很多喜欢这种调调的用户提供了设置选择,满足他们的需求。

参考图例:Cinema Appgif演示


内容色趋浅

由于深色背景主题的广泛流行,另一个趋势也愈渐明显:关键数据块或者内容使用浅色背景的方块或者留白凸显出来,使用柔和简洁的对比来解决可读性的问题。

Watering Tracker App
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,569评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,499评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,271评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,087评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,474评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,670评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,911评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,636评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,397评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,418评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,074评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0 196
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2 270

推荐阅读更多精彩内容