Redesign之移动界面风格设定(20150803-20150807)

redesign工作还在继续,原型图也画的差不多,马上要进行的工作就是UI设计了,找设计参考的事情我是感觉属于未雨绸缪,工作从来是喜欢有计划有弹性的进行。移动界面风格的设定一定是要紧跟潮流,2015年度移动界面的趋势是什么?发展方向?在知乎里搜了一下类似的总结,同时也在设计网站上看了其他设计师分享的作品,根据自己对潮流趋势和redesign工作的理解,分享一下自己的观点

关键字:Material Design、扁平、沉浸、纵深、卡片式、统一


Material Design

2014年6月谷歌I/O大会发布的设计语言,当时对于自己的感觉就是谷歌各个平台设计操作趋向统一、交互小动态的融合在扁平化当道的设计上融入了一些趣味性(或许是对当时扁平化出入的一个回答?)卡片式的流程操作,让我在当年年底就购买了MOTO G更新到了5.0版本体验,事实感觉也是很不错的,耳目一新的操作方式,交互动效也是对于现实物理动作的延伸,不会感觉到有所突兀并也享受其中。

Material Design动画

扁平明亮

扁平化从iOS7发布以来就开始普及,之前的拟物化我感觉就是现在material design的前身,这么说的理由就要从拟物化设计的初衷开始而谈。当年乔布斯在iPhone上开始拟物化设计的初衷,应该就是让用户在使用智能手机的时候,不会在这个新的平台感觉到陌生反而能找到生活中的一些熟悉的物品也就是日常生活的相关隐喻,典型的例子有passbook、日历、时钟等等等很多,完全把现实的物品拿到了屏幕中,高光、阴影、材质这些都是为了完美的伪装现实中的物品,也做到了,不是吗?我们接受了智能手机,因为上手快,学习陈本低。但这种完美的虚假毕竟也是假的,在我们适应了智能手机后,还能对这样过分的光影能容忍多久呢?我想也是这时候扁平化应运而生。



拟物化设计


扁平化设计

至于为什么说明亮,我出发点只是基于Material Design,风格的定义问题还是要依据自己产品的气质。不过明亮简洁的设计会给到用户操作简单的心理暗示,视觉负担也会减少。


明亮的扁平化设计

活泼的色彩点缀是不是让你感觉更轻松呢?白色的主色调配以黑灰色的文字信息,漂亮的清晰大图,明度亮度都很高的色彩点缀是对以上静态页面的视觉语言的小小总结。

沉浸

沉浸就是让人专注在当前的目标(由设计者营造)情境下感到的愉悦和满足,而忘记真实世界的情境

沉浸式设计意在减少用户所关注内容外的干扰,让用户可以集中注意力去执行其预期的行为,并且可能会利用用户高度集中的注意力来引导其产生某些情感与体验。

在《iOS7人机交互准则》中沉浸式体验是指游戏产品,类似于雅虎天气这样全屏精选高清背景图、UI轻量极简的设计我也把它归类为沉浸式设计,让用户专注于天气本身,而不至于被其它视觉设计元素所打扰。


雅虎天气

纵深(分层界面)

新学到的词,原作者在他的观点中具体的阐述了这一项(原文地址:Mobile:2015 UI / UX Trends)在虎嗅上有中文翻译,这个概念作者称作分层界面。利用Z轴的分层帮助用户理解不同条目之间的主次关系,将注意力集中到用户需要关注的地方。

感觉也是今天的扁平化向昨天的拟物化的致敬,由强写实的3D纵深到扁平化的分层界面,都是为了给用户提供一种更直观的体验,而落实到扁平化设计中表现出来的就是分层界面。


Mobile:2015 UI / UX Trends


Hotel Tonight

卡片式

卡片式设计是从Material Design中最具代表性的设计风格之一。Google将其称为"Inside Out Design (由内而外式)"。 而卡片式设计的本质, 是更好的处理信息集合


谷歌卡片式设计1
谷歌卡片式设计2

卡片式设计有一个很明显的优势,单独出现的时候灵活,大批量出现的时候又能连续统一,也被称作谷歌设计的“狗皮膏药”,哪里需要贴哪里,卡片的适用性也广泛应用各个屏幕平台,在不同屏幕上同时也保证着用户体验的的一致。卡片式设计的框架有效的约束了页面的信息布局,卡片的周边留白微弱投影更加凸显当前信息。

交互

交互在使用场景中的应用为扁平化设计增添了不少操作的乐趣和参与感,也能够区分出来不同的操作目的并加以记忆。例如删除一个app的时候晃动的框体;网上购物时被添加的商品会随着轨迹掉落到购车的图标中;下拉手势的刷新中意外出现的品牌的动态形象,并会随着拉动的程度不同表现等等这些有趣的动态交互为界面加分不少。


dribbble

最后PO一张正在做的Redesign移动界面效果图,过程稿。下周继续咯!


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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • [设计思维] [用户体验] 封面用研整编文章(附视频) 目前全球的主流界面设计语言为苹果、谷歌、微软三家 ,它们在...
    CoverUER阅读 4,197评论 0 5
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,700评论 22 664
  • Emacs tutorial. See end for copying conditions.Emacs教程。可以...
    ShualLiu阅读 343评论 0 0
  • 透过的天空的黑 是最美的精灵 情人的肩膀上 他们在畏畏缩缩 轻轻拍打 又似凡尘下落 如花绽放
    青山白鹭阅读 189评论 0 0