移动端设计流行趋势整理

用户头像
深圳/UX设计师/7年前/1646浏览
移动端设计流行趋势整理
用户头像
zardfans

— — 为方便同事了解移动端流行元素,也是给自己做一个总结,整理了以下六点。

(个人向整理,侵删)


1、卡片式与无边框设计

今年的ui不再局限于一块,而是更加的倡导无边框设计、卡片式设计。


也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。


所以,今后的移动UI设计潮流,会趋向无框设计的卡片化设计。


原因一:在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。去样式化或去形式化,就是一张非常模糊的全景图,在UI设计潮流演化中,会出现一些新的设计风格。


原因二:卡片化的由来也有它的合理性,卡片化设计就是设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。


而作为交互信息的载体,卡片以浓缩的形式提供了快速并且相关的信息,还会用另一种委婉的方式去要求一次交互。设计精美的卡片视图能够快速抓住用户眼球,完全适配响应式,还有极高的可读性。在较小的屏幕上灵活组织和安排内容的意义是无价的,卡片提供了文本、图像和视频等多种媒体内容的一体化解决方案。


所以,其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。


     

     


2、半扁平化设计

扁平化风格已经占领了设计风潮的半壁江山,在卡片视图的影响下,为了更加突出内容和观感,扁平化设计变得更为立体和多维度,采用了大量的阴影和对比。


平滑的阴影能够增强界面深度和复杂性,同时也不会对原有风格造成冲突,相信在之后,扁平化风格不会止步于现在的整体的风格,还会融合更多模式不断优化创新。



     

     


3、微交互

在移动端产品中,小屏幕上以动画形式呈现的微交互对用户体验和界面都有着至关的作用。对于用户体验来说。微交互提供给了用户直观而人性化的反馈方式,并且能够传递某种微妙的状态和预知感。


微交互之所以会起作用是因为它引起了人们总是想了解更多信息的原始欲望。用户在进行某个操作后能瞬间得到视觉上的反馈,这会让人充满继续操作下去的欲望。微交互也可以用来引导用户进行正确的操作。


具体来说,设计师通过有趣的加载动画,顺滑的图标切换等微互动同时起到吸引和明确通知用户的作用。





4、视频

视觉永远是人们感知最强烈的。巨大的单幅图片已经成为了几年来的主流设计趋势,而大幅图片的成功和带宽的发展也为全屏沉浸式视频铺垫了道路,动态的视频在产品设计中的出场率越来越高,甚至出现了内容丰富、互动强劲的全屏视频的展示模式。

动态和美观的视觉观感其实正是符合了人类本身的自然审美追求。

如今随着带宽的提升,4G普及,5G即将到来。现在我们在应用中可以更多的使用视频形式的背景展示,国内的应用中,淘宝、京东等代表性电商应用在商品详情中都有介绍视频,可以向用户展示更多信息,加深信任感,而抖音,QQ登录界面,虾米音乐等都尝试使用了背景启动效果,视觉上的冲击性非常强,且给用户带来了情绪变化,留下更深的印象。

     



5、渐变色

自从Instagram的logo更改以来,渐变色逐渐进入了人们的视野。归根其原因在于扁平化风格极其容易造成同质性,追求视觉丰富度的设计语言又开始回归。除了上面提到的半扁平化风格,更具视觉冲击的渐变色能够牢牢抓住用户眼球,简洁的图形和高饱和度的渐变色能够较好兼顾设计的便利度和视觉的分量感。


色彩上的精准运用,有利于唤起用户情绪并且建立一个有个性的产品,让用户通过色彩深刻地感知你的产品。


 

              

6、偏移式网格布局

整体内容元素向右偏移一个自定网格,留下的空间可留白、可放置导航或其他元素,这种布局突破了常见移动端平台规范的约束,结合卡片式可以更加灵活布局,尝试更多可能性,增加了趣味性和新颖感。




                   


7、总结

设计趋势基本每年都在不断变化,身为设计师需要随时关注最前沿设计趋势,保持审美的提高,才能跟上时代,增加自身竞争力。


以下是通过上面的描述提炼的几点:


1. 卡片式与无边框设计:卡片化布局,去分割线和边框,以大量留白区分层级,降低视觉干扰;


2. 半扁平化设计:通过阴影样式增加元素 Z 轴高度,强化画面层次感,主次对比;


3. 微交互:通过细节动效引起用户操作欲望,正确引导用户操作,给用户有趣的体验;


4. 视频:小视频给用户展示更多内容,而沉浸式全屏视频能带来更强的视觉冲击,加深用户印象;


5. 渐变色:能牢牢抓住用户眼球,高饱和度的渐变色配合简洁图形能兼顾设计效率和视觉分量,给人个性感,用户更易于感知产品;


6. 偏移式网格布局:打破常规布局,可尝试更多可能性,给人趣味性和新颖感。




T H A N K S


22
Report
|
37
Share
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
抽象液态渐变UI背景模版
科技医疗透明柜UI界面设计
我的钱包-UI界面设计-app
钱包ui模板
新拟态风格 UI设计组件库
手表表盘UI系列
【新年UI图标】影音icon
UI通用设计素材1
UI界面 组件
UI应用平面图标
盲盒APP UI设计
智能家居中心 简约 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】秒杀icon
【新年UI图标】珠宝icon
高级感金属拟物 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新能源APP应用UIKit
UI 登录界面设计模板包
高级表盘系列UI源文件
【新年UI图标】会员icon
【新年UI图标】银行卡icon
Security Camera UI kit
Log in