2015年移动端UI/UX设计风格报告与2016年仍会持续火热的5大UI/UX设计趋势

概述:随着响应式Web设计的持续升温以及Google移动友好性的提升,2015流行的一些UI/UX设计趋势将会在新的一年里持续升温。本文就来预测下2016年仍会持续火热的5大UI/UX设计趋势。

  • 预测:2016年仍会持续火热的5大UI/UX设计趋势

随着响应式Web设计的持续升温以及Google移动友好性的提升,过去开始流行的一些UI/UX设计趋势将会在新的一年里持续火热下去。鉴于此,姑且让我来为2016年仍会持续大热的一些UI/UX设计趋势做一个预测。

1.动 画

使用动画可以提升用户体验并且彰显网站/应用的个性,但是要把握好如何以及何时使用动画之间的平衡并不是一件容易的事儿。千万不要为了动画而动画,动画的目的是为了增强内容展现效果,同时兼顾性能。

下图的加载动画便是一个提升用户体验的范例(via the Slack app):

2016-UI-UX-trends-1

2.Material Design

2015年Material Design的风头盖过了扁平化设计,它沿袭了扁平化设计的一些设计原则,比如鲜明的色彩搭配、简洁、大字体、简约等等,然后在此基础上增加了阴影、模糊、覆盖和深度等元素。Material Design给人一种更轻且舒畅的感觉,进一步增强了用户的交互体验。

2016-UI-UX-trends-2

3.Web应用无差别的感官体验

当越来越多的原生应用出现,让应用无论基于Web还是基于原生iOS/Android都能交付无差别的用户体验就变得越来越重要。著名图片分享站Pinterest为我们提供了一个完美的范例:

2016-UI-UX-trends-3

4.强大的Client Transparency

IE的透明性从一开始就做得比较好,尤其是针对C-Suite、营销人员以及利益相关者。创建介于用户界面和用户体验之间的内部线框图能够从开始阶段起就为客户提供更加丰富和准确的线框。当然你可以诡辩它们只是半成品,并不能代表完全的成品。我认为你的观点将会误导你的客户,使他们在设计的时候变得混乱迷惑。

5.高保真线框

要想打动你的用户,有几种方法可以增加你的UI/UX体验:

  • 使用真实图像而不是灰色的盒子(即使不是完全真实的图像)
  • 使用最终要用的字体效果
  • 让标题和尺寸和最终效果一致
  • 使用客户端调色板

当然,并不是说你遵循了上面的原则就一定能打动你的用户,你还需要具备额外的技能,不要一刀切。无论面对何种项目,用你的最佳判断和对用户需求的理解都是最最重要的。

Via Luke Prosser 译 Besy  www.evget.com

设计趋势 | 2015年移动端UI/UX设计风格报告

概述:扁平化似乎让UI设计的门槛更低了,实际上目前的设计趋势对设计师的要求更高了,排版和配色易学难精,动效和交互更是门槛不低,流程设计和原型设计还考验团队合作能力……

 

不论是在手机屏幕上,浏览器上,还是智能手表的屏幕上,设计都是促使产品和用户互动的最重要的驱动力之一。从扁平化设计到 Material Design ,从小屏幕到大屏幕,我分析了一下设计的趋势演变规律,并同你分享一下我的一些拙见。到底有哪些趋势?这些趋势的存在,对于用户有何裨益?它们将会创建怎样的未来?这就是今天的文章所要探讨的内容。

作为近年设计领域中最具有代表性的设计风格,我们不妨从扁平风和 Material Design 入手,聊聊它们是怎样出现、如何成为现如今的设计趋势。

更轻量的设计

lighter-design-1

它是什么

相比于使用大量渐变和阴影堆砌细节的拟物化设计,扁平化设计在美感、程序设计以及流行趋势上,有着更为明显的优势。扁平化的设计对于负空间的运用有着更高的要求,不再对渐变和阴影有太多依赖,用简约的界面,专注于核心的信息,将流程中无法提高用户操作效率的设计元素移除。

为什么

轻量级的设计可以避免用户分心,引导用户专注于屏幕上更有意义更重要的内容,导航也因此更容易,时尚、现代、简约的美学也更符合目前品牌设计的诉求。

用单一字体贯穿整个设计

one-font-2

是什么

降低单屏的字体类型的数量,从而强化排版的设计感和美感。不同的字体拥有不同的气质,带来不同的感受,字体大小和疏密的排列则能更好的区分内容的亲疏关系。

为什么

通过横贯整个设计的单一字体来拥抱一致性设计,并不是只有品牌设计会做的事情,应用程序、桌面和手机网站都可以通过这样的优化统一多平台的体验。另外,单一字体也能让界面更加简单易用,提升内容识别度。

用空间来间隔

space-3

是什么

通过线条和分隔符来进行划分内容区块是之前所流行的处理方式,但是这样会让界面拥挤不堪。通过空白空间来划分区块能让界面更加通透,构建更优秀更干净的界面。

为什么

移除分割线和分隔符可以为界面提供更加现代化的外观,专注于功能,比如可以将图片和字体放大,提供更加清晰的层级划分和更优的易用性。通过空间间隔来划分区块是一种非干扰性的设计,更匹配时下流行的风格和设计的需求。

高亮的数据

highlight-data-4

是什么

用户更偏爱简单的界面,大号的字体和醒目的色彩,希望特定的数据在最重要的位置显示出来,而这些被高亮处理的数据会随着用户的状态变化而灵活地变化。

为什么

通过增加字体尺寸和显眼的色彩来将用户的注意力转到特定的区域,这种方式更加潜移默化,不显突兀。在这样的设计之下,用户会更快地接受信息和数据,更高效地导航。

微交互

micro-ux-5

是什么

围绕特定的用例,通过微妙细小的动效或者交互强化它的视觉效果。通常当你完成某个过程的时候,比如收藏某个条目、弹出提示框,这个时候微妙的动画会强化这些动作,将这些控件同其他的元素区分开来。

为什么

这些微交互能够作为信号提示,来提醒用户动作和任务的完成,它们更简单、更有趣也更加吸引人。微交互通过微妙的细节和动效赋予界面更强大的生命力。

简约的配色

single-color-6

是什么

扁平风在2013年开始大规模流行,令简约设计风成为了大势所趋。为了更为契合简约的设计理念,设计师和用户都逐渐开始喜欢用更少的色彩来完成设计。

为什么

色彩的运用是营造情绪、吸引用户吸引力、构建品牌意识必不可少的组成部分。更少的色彩能让品牌形象更加突出,色彩的减少意味着凝聚性的提升,用户更容易买账,因为它不容易让人分心,突出主要功能和内容。

分层的界面

n-level-7

是什么

拟物化的设计在几年前占据着设计领域的主流,随后扁平化设计的革命将拟物化打入冷宫。可是随着时间的推移,层级更多、细节更丰富的扁平化2.0出现了,分层的扁平化界面让二维化的扁平风拥有了深度和更多维度,为用户带来一种更为“真实”的体验。

为什么

早期的扁平化设计存在“过于扁平”的风险,而扁平化2.0的出现,让扁平化的设计拥有了层级,以Material Design为代表的这类设计风格,通过阴影和分层显示,让界面步入3D,让不同的层有了对应的Z轴座标。不同的组件之间的相互关系开始越来越清晰了。

幽灵按钮

Ghost-button-8

是什么

幽灵按钮是无色彩填充的透明按钮,它的边界用非常纤细的线勾勒出来,本身的形状通常是圆角矩形或者方形,这些按钮的名称用简单的文字来标识。

为什么

这些干净而时尚的按钮设计同样可以抓住用户的吸引力,同时还不会显得过于突兀。幽灵按钮让按钮在界面拥有了更高的融入度,甚至于按钮可以在界面中拥有不同的层级。在Material Design中,幽灵按钮还拥有轻微的阴影来表现层级。

手势操作

Gesture-ui-9

是什么

设备借助陀螺仪和运动传感器,能够感知速度、加速度、方向等参数,识别运动和手势。用户同屏幕之间的交互从简单的点击延伸到现实生活中的手势、动作等不同的交互方式。

为什么

用户熟悉手势,当用户需要删除条目的时候,不论用户是是什么年龄,性别,社会背景,将条目移出屏幕都是下意识并且易于理解的操作。更少的点击,更多的滚动和滑动令用户体验有了极大的提升。

动效

motion-ui-10

是什么

越来越多的应用开始使用单页面来搞定整个操作流程或者多个步骤,替代之前流行的多界面导航,降低用户在操作过程中花费的时间和精力。

为什么

移动端本身的特征决定了移动端用户对程序的流程和易用性有更高的要求,将操作流程最小化有利于提升移动端的用户体验,从而提高操作的转化率和操作频率。

设计标准

design-standard-12

是什么

在设计项目开始之初,设定一套标准化的视觉语言,包含色彩、图标、字体、排版等因素。

为什么

标准化的设计有助于建立应用程序和不同平台之间的一致性,它可以让项目更平稳地推进,更容易修改也可以减少错误的发生。

原型设计

proto-ui-13

是什么

这是准备阶段产品的早期可用版本。借助原型可以帮助设计和开发人员洞悉产品的功能,以最低的成本发现提升用户体验的可行方案和潜在可能性。

为什么

原型这种“低成本实验”可以让产品和项目的必要部分更清晰地展现出来,明确功能范围和需求。使用原型让开发人员有足够的时间和精力投放于必要的地方,从测试中获取信息,为迭代产品确立方向。

原文地址:medium
译者:@陈子木  www.evget.com

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/11937/

(0)
iouedioued
上一篇 2015-12-30
下一篇 2016-01-06

相关推荐

  • 给用户带来新的feel|5个好玩的交互设计效果

    真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。—— 巴尔扎克近期在工作中偶然发现的3种移动界面布局,从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式,更多的让点击率、产品凸显展示,总共5个好玩的交互效果给大家分享。开发资源不够或快速上线的页面交互设计上图在专业术语中叫做流体交互效果,这种交互效果的好处与坏处优点:避免小分辨率的情况下,出现水平条的情况。缺点:分辨率小...

    2018-04-17
  • 网页设计中,如何突破栅格的限制又保持协调?

    想要打破栅格又保持网页的协调,是有技巧的,并非任何“破格”的设计都是好的。

    2017-05-09
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 一个视觉交互设计失败的案例

    本文由PMCAFF 原创作者 臻龙 原创发布于pmcaff.com最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。好看的设计未必好用我负责的是一款秀场类产品,近…

    2017-08-02
  • 从交互设计浅谈安卓开发有多痛苦,安卓程序员才最值得尊重

    导语:交互设计带来的痛苦和问题,总有种让我们安卓开发者恨铁不成钢的感觉,虽然想吐槽,又无力吐槽。如果你懂得微信交互的设计,那就勇敢的,尽情的去吐槽吧!微信的交互,Android和IOS都是按照各自的交互去展示的,去设计的。比如:列表的删除操作,Android中的微信它就严格遵循了长按删除功能,而IOS就一贯的按照自己的风格,滑动删除;又比如底层四个tab按钮,安卓中可以滑动变换界面,而苹果的只能点击操作;再比如顶层的标题栏安卓中微信的标题栏是不变动的,而IOS的是跟着界面变化的;再比如安卓的微信中点击退出是中间弹框,而苹果的则是底部弹出;再比如选择相册等等很多细节,你要注意去体验,去感受,你就会发现,微信的设计是按照Android和IOS各自的交互规范来设计和实施的。如果这样去设计和做就会大大降低开发者的难度。说到这里聪明的你们,估计想到我下面要说什么了?一个苹果手机用户手机破了,买不起了,一想要是再买个苹果手机,就得卖肾了,于是乎买了一款Android的坚果手机,之后打开微信后,看到好友给他发了一个优衣库的视频的公众号文章,感觉非常不错,直接就把这条链接收藏了,偷偷欣赏完之后,回到家怕被爱玩手机的儿子发现,就想删除这条收藏,哎呦喂,怎么滑动都没有滑动出删除按钮来,最后果真让自己的儿子看到了,听到声音的老婆过来就扇了他丈夫一嘴巴子!

    2017-05-28
  • 听说,昨天网上打了这么一场营销+公关大战~

    你喜欢我们这些文字的话就推荐给更多的人吧。姐姐先行谢过了!我们公众号是:Aioued,记得分享哦,么么哒! ----------------------------我是一条分割线,你看不见我!-------------------- 正文: 这件事的起因,…

    2014-10-30
  • 什么是用户体验文案设计?【UXRen译#164】

    作者: Kristina Bjoran  |  翻译:陈馥丹,校审:小四   有一种新的职业出现了,嗯,也许不是“新”的,但可以肯定的是这种职业出现次数会逐渐增加,像谷歌、亚马逊、Dropbox、Paypal……许多大型科技公司正在寻找UX文…

    交互专题 2017-08-07
  • 老外看中国的移动App设计精髓-1 ui设计的十大精髓

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • 浅谈用户体验设计

    这是一本交互入门书(主要偏向Web端,涉及到一部分移动端),如果你感兴趣就看看下面的内容,觉得有用的话,也去看看原书的内容。 这本书看了其实很久了,笔记也是当时记得,不过最近正好看到好朋友@elainezhu 也出…

    2016-06-05
  • 初级交互设计师的自省:基础知识能力很重要

    在交互设计师参与的各个阶段都会有不同的挑战和着重的考察点,希望大家都能打好基础,不要让基础的知识能力的欠缺影响甚至阻碍我们综合设计能力提升。

    2017-05-16