东时 资讯

2017年UI设计趋势告诉你什么是UI

开心果烁烁 2017-03-14 3667 1

摘要: UI界面的设计趋势是不断变化的。随着时间的推移也在不断的成长,进化。虽然有些趋势还有待检验,但我们还是需要不断的

移动应用


1. 各平台 (Android/iOS。。。) 的标准设计语言接近一致
 
部分原生控件上只存在风格上的差异,对用户无显著影响。
 
Material Design 不会大兴其道,更不可能逆袭(用 Material Design 设计的 App 在 iOS 上使用),iOS 的实用主义设计会显著影响 Material Design。
 
桌面常见的交互形式也将更多影响移动端,要支持 iPad Pro 这样的生产级设备,iOS/Android 会为了兼容桌面场景作出优化。
 
 
来源:Google+ 在 Android 版也出现了底部导航的交互
 
2. 设计规范、平台特性将越来越受重视
 
大厂商更加务实,更遵守平台的设计规范,只在需求无法满足的情况下重新发明轮子,因为实现、适配、用户学习成本等方面的考虑,自创的交互效果未必理想。
 
(iOS 上的 App,在理想情况下应该适配 iPhone 5/6/6+ 的分辨率,iPad/iPad Pro的 25%, 50%, 75%, 100% 宽的分辨率)
支持平台特性(3D Touch, Live Photos, Chromecast, 分屏)能够在 Early Adopter 中树立口碑,得到免费的传播点,同时也会把中间立场的用户从竞品手中拉拢过来。
 
但 3D Touch 仍然是噱头。
 
3. 动效使用更加普遍,但更多在微交互中
 
过于华丽的动画,经常出现容易引起厌恶,而且会导致用户等待的时间延长。
 
合乎逻辑的动画、微交互形式将在2016年沉淀下来并作为新的平台规范。(如之前的下拉刷新、Float Label 等很难察觉的动效会更流行)
 
 
4.「可用性高」的设计会战胜「简洁」的设计
 
智能手机的用户已经扩展到非常边缘的人群,而且数量级很大,他们对于一般的界面交互、隐喻没有任何概念,把信息尽量直白、无损地传递出去,会在可用性和设计的「简洁性」上产生一定的冲突。
 
 
来源:LukeW: Obvious Always Wins
 
这也是「汉堡菜单」和 Material Design 中 FAB 按钮最大的问题。
 
5. 平面设计、游戏设计的灵感会影响 App 交互/内容的设计
 
Flat 2.0 感觉的设计:虽然整体感觉还是「平」的,但阴影、渐变等细节会更丰富。
 
 
来源:Flat Design 2.0
 
精美的插画、摄影更普遍,直接影响App本身的品质感。
 
字体的选择更多,排版更像杂志。
 
 
来源:MONO 猫弄
 
6. 「智能通知」将会成为新的「App主界面」
 
Apple Watch 等智能手表最核心的价值被证明是「通知」,尤其是在每个人有很多App,注意力资源稀缺,不主动启动应用(或不方便启动,如 Apple Watch)的情况下,通知成为了用户与 App 交互的最直接渠道。
 
通知会以更「智能」的形式出现,不会是现在的小广告推送形式,也不会是类似 Widget 常驻的形式,而更接近「手表屏幕」大小,按需出现,可交互的、功能相对完整的界面(即使是在手机上而不是手表上),用户甚至可以永远不打开一个 App,而能够享受 App 提供的全部功能。
 
网页设计
 
1. 新的手机 App ,不一定会有对应的全功能网页
 
对新的应用而言,功能最齐全、最强大的一定是手机版。因为手机所能获取的信息最丰富,可以通过发通知等各种办法与用户更贴近。
 
  
△ 来源:Periscope 的主页,只提供下载应用的入口,无视频直播功能。
 
<img class="" data-ratio="0.6420863309352518" data-w="" data-src="http://mmbiz.qpic.cn/mmbiz/3JjIxqTlaByzy82EOZbpqVLHXHQCaZTfzU3SOqOibt8NmlicFwaqBGJibbISliaOQ2VxicNYlM8B4CecicUoaCPZFmyw/640?wx_fmt=png" data-type="png" _width="auto" src="http://mmbiz.qpic.cn/mmbiz/3JjIxqTlaByzy82EOZbpqVLHXHQCaZTfzU3SOqOibt8NmlicFwaqBGJibbISliaOQ2VxicNYlM8B4CecicUoaCPZFmyw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1" data-fail="0" style="margin: 0px; padding: 0px; height: auto !important; max-width: 100%; box-sizing: border-box; word-wrap: break-word !impo
在线咨询
在线报名
客服QQ
视频下载
回到顶部