2016网页(H5)设计趋势

有这样一句话来描述UX:

“UX is about how we live. It’s about everything we do; it surrounds us.”

(用户体验是我们如何生活,它时刻在我们身边。)

不得不说对于用户界面(UI)和用户体验(UX)两个术语之间有一些相似性,这也困扰了很多人。

最近也听到一个很有趣的例子跟大家分享一下:

 假设你在一天劳累后去酒吧消遣,你看到了一个帅到爆的小哥们又或是可爱吊炸的妹子(根据个人癖好选择),感觉看外表应该是很不错的样子。02c6b256a59e7432f875520f2a6fd1(这里。暂停一下)

以上描述意味着用户界面是完美的 

接下来,

当你深深地被他/她的外表吸引,

准备过去搭讪!

2016网页(H5)设计趋势
妹子操着一口粗狂的大碴子味er

哥们儿吐着屎绿色的口气

2016网页(H5)设计趋势
这时,你会发现你有一个

极差的用户体验过程 

也就是用户界面(UI)是基本美学的范畴,而用户界面必须集中到用户需求。有这样一句话来描述UX:

UX is about how we live. It’s about everything we do; it surrounds us.

(用户体验是我们如何生活,它时刻在我们身边。)


而作为一只UI/UX设计师,

2016网页设计趋势你造么?

(前方高能,设计师请准备好)

2015年,我们看到了大受追捧的“适应设计or响应设计”(Responsive Design),越来越多的网站进攻移动端阅读行列。有人把这归结于Google发出的Mobile Friendly update

fe605887-3360-46f6-9e61-52aac7a7c639

1. The Proliferation of UI Pattern(界面模板)  自适应设计的爆发同时也造成了这样一个结果: 自适应的网站看起来都很像。尽管如此,我们也不能责怪自适应设计。WordPress上不断增加的 主题模版被广泛使用也是其中的一个推手。

02677256a5ab906ac7256cb059c8bd

但是,看起来很像也不是一件坏事。那是因为购买相似UI模版已经成为一种新的网站消费模式。模版设计已经相当成熟,所以当一个新UI问世的时候,一般只需要加一点的创新。随着UI模板不断更新,设计模式也已经成熟。但UI的根本始终是引导用户完成一种流畅的体验。 

以下是我们应该知道的几种模式:

① 汉堡式菜单-The hamburger menu:

虽然很多人批判使用模版,但毫无疑问模版的广泛使用,会让网站的功能简易化并且让用户容易辨认

0230b856a5abd632f875520f205281

cd51f835-1748-48a6-869b-ef15d863fb58
026ebf56a5ac1f32f875520f369c7e

② 账号注册-Account registration:当你浏览网站的时候你会发现每个网站的用户注册的步骤惊人的相似,就像是表单填写后点击按钮让你提交注册账号一样。0266bc56a5ac4c6ac7256cb046beae

③长滚动模式-Long scroll:

把你认为最重要的内容展示在最上端。现在的用户基本都已适应移动端使用这种长滚动页面,制作网站可以通过讲故事的方式吸引用户或者通过将页面排布形成看似多页模式的长滚动页面。

44757702-f33c-4a24-b332-3a863db5833c
 卡片式布局-Card Layouts:

由Pinterest开创的,它的展现形式是分小块展示,这对信息展示十分有效,所以被广泛应用。每个卡片的有一块属于他自己的内容,常使用矩形形状,使它能够在不同设备中排布方式更方便。

02062256a5acbb32f875520f737e12

⑤ 高质量大图-Hero images: 

视觉是人第一感官,所以运用高清图像是最快的方式来吸引用户注意力,而且现在图片加载速度也不再困扰用户。

fe27142e-d6c6-47b7-b895-8d473e0ad7cf

2. Rich Animations(炫酷的动画展现)

  动画形式被越来越多的应用,主要用于提高网站故事性,使它体验起来更具互动性和娱乐性。然而,也不能把动画用在所有地方。你要考虑到它的应用会不会让你的网站更有故事性,以下是两组展现形式:

大规模动画:主要作为一个交互工具使用,主要包括视觉展现和弹出式通知

小规模动画:主要包括悬浮框、加载动效等,这是不需要用户输入的。

下面我们将介绍7款最受欢迎的动画技术:

① 加载动画-Loading Animation:

主要用于在用户乏味的等待中给予趣味。它会在平面设计、极简主义、组合和单页网站中受用户青睐。

02b11b56a5ad0b32f875520f51caa0

避免添加声音,与你网站的整体风格和色调相符。

导航与菜单-Navigation and Menus (nonscrolling):

隐藏导航栏已经变得越来越普遍,因为他们可以节省屏幕空间。我们可以看看下面例子中的UX原型工具的使用,当用户单击一个特定按钮时,想要防止它振动过度,可以用动画的形式来显示一个菜单。(更像是在一个汉堡图标后隐藏了一个导航抽屉)空间

4524fd59-45d8-4b8e-a075-06dae6599d18
③悬停动画-Hovwe Animations:

鼠标悬停到某个内容上是常见的效果,让用户更好的体验网站功能性。

027a7f56a5ad656ac7256cb0defad7

幻灯片模式展示-Galleries and Slideshows:

一个有效的模式给用户展示多个图像

029e6156a5ad8d32f875520f8377ed

动态动画-Motion Animation:

运动的物品总能吸引到人类的眼球,动态动画也会吸引用户注意力,同时建立了视觉层次感

02f09056a5ada66ac7256cb09d64f8

⑥ 滚动动画-Scrolling:

平滑的滚动给用户动态感但又很舒适

023aba56a5adc46ac7256cb02ca7d1

景动画-Background Animations/Videos:

一个简单的动画背景可以添加在一个可视性网站,主要针对个人网站或者一个整体形象表现

02d5c956a5adee6ac7256cb0b7d713

3. Microinteractions(微交互) 02d83356a5ae0c32f875520fba2297

微交互会让你做些什么或者帮你做些什么,体现在很多不同的地方

 一个状态的交流或者一些反馈 Communicate a status or bit of feedback

② 让你看到一个动作的结果 See the result of an action

 帮助用户操作 Help the user manipulate something

02c76956a5ae246ac7256cb04b1406

那些真正让人沉迷的优秀应用很大程度上是因为微交互的存在。微交互出现的瞬间,用户会感受到更强烈的互动和参与感这些微小而自然的变化会创造出不同凡响的愉悦感,不过通常这些微小的互动并不是那么显眼。当然,对于设计师而言并非如此。

4. Material Design:让扁平设计更丰富

 去年,Google推出了新的语言风格, Material Design。为了提高用户设计真实性,它使用了 阴影效果和运动概念的设计

02e5d056a5ae4c6ac7256cb0b2d51d

Material Design的目标是在用户体验中创建干净、现代化设计。在它简单的设计同时,我们也会发现它与扁平化设计趋势有了相似之处。

024a1f56a5ae646ac7256cb0be9cfc

之前我们见到的Material Design的设计都局限在app上,然而在去年7月发布会中也宣称了会更适合在网页端展现,Material Design也是为了在设备跨越中展现更牛逼的UI和UX设计。而且他不依赖于任何特定框架,所以设计师可以使用各种各样的前端工具来实现网站。

5. Responsive Design(响应式网页设计)

 随着移动设备上网的增加,响应式网页设计近年来非常受欢迎, 而它也将成为一个web端开发的标准

02bd0056a5ae8032f875520fb3037f

响应式网页设计可以根据不同的电子设备自动调整网页的分辨率及版式等。为了保证在不同设备中正常运行,设计师应该做到以下几点

 避免使用Javas cript 和 CSS加载显示的图片。

 使用响应式网页设计限定的图片。

 使用RESS - 响应和服务器端。

④ 开始测试性能的应用性,以测量和优化网站。

02eb1b56a5aea232f875520fd490cc

0284d356a5aea36ac7256cb02f1e8a

性能在用户体验中很重要,但同时也对15年4月发布会后Google移动端的更新是一个考验。响应式网页设计也是高度兼容的极简主义,因为它必须要降低页面权重。也可以将它与卡片式设计融合,因为这样它们在不同设备上适应屏幕大小会更加容易一些。

70e41240-ee24-43ab-a867-c0b4140ca3d0
响应式网页设计现在越来越少,但是他的实践性很强。响应式设计非常实用是毋庸置疑的,但为了能通过它更好的解决用户体验问题,设计师需要巧妙的想出能解决任何速度的问题

6. 扁平化设计短期内不会被替代

   扁平化设计虽然已经发展到一定程度了,但是还会向一些符合流行趋势的方向发展,例如简约形式、web前端的一些设计形式。

02018356a5b02f6ac7256cb00e7b00

我们来看一下未来发展的趋势,配合潮流发展趋势的平面设计会成为主流。

① 充满活力的配色方案:

根据现在比较流行的UI设计模板带来的灵感,大家在做设计的时候会加入非常有活力的配色。

 简洁的排版:

简洁风格的排版有助于保持文本的清晰以及增加文本的可读性。

 虚拟按键:

这种功能充分体现用户体验设计中基于用户的设计理念,在内容概述的部分引入虚拟按键,链接详细内容的网站。

 极简主义:

减少UI中的元素,以新鲜的感觉呈现。

2016网页(H5)设计趋势
IDC创新设计中心 2016.02.15 www.zcool.com.cn

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

(0)
iouedioued
上一篇 2016-02-15 16:52
下一篇 2016-02-16 13:39

相关推荐

  • 专业离结果有多远

    不知道大家有没有这种感觉,线下的很多传统服务,比如健身房、英语口语培训机构等,虽然课程比较专业,却很难让人持续光顾。它们会集中更多的精力去开发新课程或新项目,却不太重视用户的后续留存情况(当然,对于…

    2016-04-26
  • pt 、px 、dp 、dpi 、ppi 解析

    帮助像我一样的新手渣渣理解其中的换算原理。希望这篇解析能解决大家对pt、px、dp、dpi、ppi的困惑。

    2016-07-01
  • 设计团队沉淀:做好 Style Guide (即设计规范)不容易

    说起 Style Guide (即设计规范),大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines,我自己就是靠读这两份文档逐渐入门设计领域,国内外的设计师、开发者们自然也是对它们了然于胸。来…

    设计理论 2015-08-31
  • 克制的力量

    引言  两家茶餐厅         有一家茶餐厅A的位置很好,周围有不少人流,但只有这一家茶餐厅,有地理位置优势,原本一个人30元左右就能吃一顿饭,餐厅经常巧言推销,让顾客多点菜,让顾客消费到50元以上。还有一家茶…

    设计理论 2016-06-05
  • 【行业经验】华为交互设计师教你“如何让别人认可你的设计”

    当你的设计被人否定的时,相信大多数人都会感觉很憋屈。什么鬼?辛苦完成的工作,又要重新改过。这感觉就像自己的价值被否认,没存在感。马斯洛需求层次最高层是自我实现的需要,相信如果长期处于这么一个状态,久而…

    设计理论 2015-08-27
  • 案例:移动Web框架设计

    本文由Mail.Ru公司的员工Yury Vetrov讨论的关于移动Web框架设计的案例研究,将从设计流程的转变过程讨论,即从经典原型→设计→模型→HTML实现方法,为每个产品设计实现基于框架的现代而高效的方法。 在2012年代中期,…

    2015-02-05
  • 好的人机交互设计(UX)评判标准的四个原则

    一些设计的基本原则往往是通用的,甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。 一个设计师&产品…

    2015-04-14
  • 是不是该考虑加入动态交互了?

    本文转载自:阿西博客 原始链接:是不是该考虑加入动态交互了? 一个优秀的APP交互动画不仅仅是炫,而且要实用,有的还要考虑手机的性能等因素,所以想做一个好的交互不并容易,今天就带你来见识一下什么叫洋气范儿…

    2015-03-21
  • H5未来真的会取代APP吗?

    现在APP越来越多,H5也能实现APP的功能,以后H5真的会取代APP么?特别是移动应用方面   至于取代不取代这个不敢做独论,但是我觉得是一个技术进步的提升。 App原生态做的优点: 1、App预先装于本机,对于程序…

    设计理论 2016-01-06
  • 吃你自己的狗粮 - Eating your own dog food

    Eating your own dog food 直译为“吃你自家的狗粮”,亦略称为dogfooding,是一句英语俚语,常用于描述公司(尤指软件公司)使用自己生产的产品这一情况.

    2016-06-28