热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

2014年移动界面设计新趋势你知道多少?

在这篇文章里,我想分享一些日益显性的设计语言,让人一眼就记住它的风格,有一些已经随着优秀设计师的摸索,融入到国内移动产品设计里了,而有一些,确实是刚刚在萌芽阶段,

  在这篇文章里,我想分享一些日益显性的设计语言,让人一眼就记住它的风格,有一些已经随着优秀设计师的摸索,融入到国内移动产品设计里了,而有一些,确实是刚刚在萌芽阶段,需要更进一步的摸索和尝试。

  一、唯一主色调 | Simple color schemes

  为什么我们要定义一个界面多种颜色?仅仅用一个主色调,是不是就能够很好的表达界面层次、重要信息,并且能展现良好的视觉效果?事实上也正是如此,随着iOS7的发布,我们看到越来越多唯一主色调风格的设计,会采用简单的色阶,配套灰阶来展现信息层次,但是绝不采用更多的颜色。

 

  卡塔尔航空公司

  卡塔尔公司航空就是这样的设计案例,整个界面采用粉色的主色调,从标题栏到标签页,从操作按钮到提示信息,除了黑白灰之外,全部采用粉色设计,这种简介的的配色风格,反倒起到了很好的信息传达效果,也具有良好的视觉表现力,设计师在内容排版上的技巧实在是加分。

  Readability采用红色主色调设计,连提示信息背景色、线性按钮和图标都采用红色主色调,界面和LOGO也完全是一个色系的。而Vivino采用蓝色主色调设计,信息用深蓝、浅蓝加以区隔。Eidetic采用橙色主色调设计,其中的关键操作按钮甚至整个用橙色提亮,信息图标也用深橙色、浅橙色来表达程度。

  可以说唯一主色调设计手法,是真的做到了移动端APP的最小化(Minimal)设计,减少冗余信息的干扰,使用户专注于主要信息的获取。

  二、多彩色 | Hypercolour

  而与唯一主色调形成对照关系的,就是Metro引领的多彩色风格,为什么我一定要给我自己的产品定义一种主色调,多彩色就不能是主色调吗?于是出现了不同页面、不同信息组块采用撞色多彩色的方式来设计的风格,甚至同一个界面的局部都可以采用多彩撞色,也产生了不少优秀的设计。

 

  优衣库出品的RECIPE,是一个让人眼前一亮的设计案例,多彩色的设计风格融入到整个APP中,不论是切换标签页,还是在内容组块中滚动,都会变更不同的主题色。色彩切换的时候,还会有淡入淡出的效果,让切换变得自然而然,完全不生硬。RECIPE的番茄钟计时器模块,会一边计时一边播放优美的美食背景音乐,同时切换不同的主体颜色,随着主体颜色的变更,所有的前景文案、图片也会变更为该色系,加上清晰度极高的美食图片,真的是视觉+听觉的双重享受。RECIPE真的是2013年难得一见的优秀设计。

  而Peek Calendar、EveryWeather和Harmony这三个APP,是列表多彩色的设计案例,这种列表多彩色,不知道是不是从Clear开始再度流行起立的,用鲜亮的多彩色来区分信息,确实能起到突出的效果,视觉上极其醒目。

 

  可是对于一些内容型的APP,也许并不适用,比如GoogleKeep的多彩卡片,确实是在内容阅读上会起到反效果。百度云记事本第一版设计也是多彩色的,但是后来考虑到文字记事比较多,为提供良好的文字阅读体验,还是把多彩色改成灰白色微质感的设计。

  三、数据可视化 | Data Visualization

  至于对信息的呈现,越来越多的APP开始尝试数据可视化、信息图表化,让界面上不仅仅是列表,还有更多直观的饼图、扇形图、折线型、柱状图等等丰富的表达方式。表面上看起来也不是很难的事情,但是若真想实现,背后的复杂程度也不容小窥。

  Nice Weather用曲线图来表达温度的变化,Jawbone UP用柱状图来表达每天的完成情况,PICOOC用折线图来表达每天体重、体脂的变化。移动APP利用数据可视化,可以在更小的屏幕空间内,更立体化的展示内容。

  四、卡片化 | Cards

  卡片也是一种采用较多的设计语言形式,无法考究这种卡片的设计,是从Metro的tiles流行起来的,还是从Pinterest的瀑布流流行起来的。总之我们可以发现,Google的移动端产品设计已经全面卡片化了,甚至Web端也沿用了这种统一的设计语言,据说是Google搜索的体验负责人引领的设计语言统一升级。

 

  luvocracy的卡片流突出信息本身,用大图和标题文字吸引用户,强化了无尽浏览的体验,吸引用户一直滚动下去。Google Now的卡片则更加的定制化、个性化。有的卡片是用来做用户教育的,有的卡片是用来告知天气的,有的卡片是呈现联系人列表的,有点卡片是显示待办事项的。不同的卡片都遵循在一个统一宽度和样式的卡片内,进行发挥和设计。既保证了卡片和卡片之间的独立性,又保证了服务和服务的统一化设计。Shazam则用一种趣味的卡片样式,呈现专辑和歌曲。

  五、内容为王 | Content First

  APP产品的发展,最终的路径势必会跟web产品一样,突出内容,内容为王,当繁华褪尽,纤尘不染,再重新去看APP存在的意义,不外乎是给用户提供更好的服务。与内容相比,所有的设计和包装,都不外乎是一种表现手法,而真正具有价值的APP,一定是内容取胜的。Facebook用190亿美金收购了Whatsapp,这个全是用统控件搭建的APP,并不是因为他的设计多出众,而是因为他的服务足够有价值。

  Artsy的图片瀑布流,完全没有用到线和面来区分信息组块,而就是用内容本身做排版,用户可以更加集中注意力于图片内容上。Prismatic利用字体排版,尽可能的内容前置,弱化图标和操作,让用户更集中注意力于内容阅读上。而MR Porter则利用商品图片、名称和价格直接做设计,让用户聚焦于商品本身。

  六、圆形的运用 | Circle Design

  园形是最容易让人觉得舒服的形状,尤其是在充满各种方框的手机屏幕内,增加一些圆润的形状点缀,立刻就会增加活泼的气息,徒增好感。一个有意思的现象是,iPhone的拨号数字键盘,一开始都是矩形设计,迭代到iOS7,均变成了圆形,可以说是对传统电话的致敬,也可以说是增强了界面的柔和感。当然相应的,也要处理圆形的实际点触区域,不要因为设计成圆形点击区域也变小了,导致点击准确率下降了,美观度提升易用性受到了影响。

 

  Beats Music把选择喜欢的标签设计成了圆形,这就比普通的列表、矩形tag的感觉要好很多,更加趣味更具探索性。Movse每天走的步数、消耗的卡路里均用圆形承载,是数据可视化、关键信息显性化的最好案例。Tumblr则把要创建的内容的类型选择,用蒙层+圆形选项按钮来设计,让选择变得专注而明确,又不那么死板。

  七、大视野背景图 | Bigger Vision image background

  用通栏的图片作为背景,也成为今年的一个流行趋势,或者是作为整个APP的背景,或者是作为内容区块的背景,既提升了视觉表现力度,又丰富了APP情感化元素。一些信息或操作,浮动在图片上。这种设计方法,对字体和排版设计要求更高,难度也更多,但极容易渲染出氛围。

 

  大视野背景图风格也分为两种,一种像Secret、The Whole Pantry这样的,内容区块中采用大视野背景图,好处是可以利用图片做区块分割,难度是图片拼接后的效果不一定好看,所以可能还需要配合描边、留白等设计手段优化拼接。另外一种就是想Vsco、Flink、Mindie、Soundwave这样的,全屏背景图甚至打通状态栏,前景做内容排版、导航、操作。

  好处是设计非常具有生命了,所以有朋友把这种风格也叫有计划设计,说的就是回归大自然的设计手法。但风险也是很明显的,就是前景的信息排布设计其实是有很大挑战的,必经花花绿绿的背景太过于干扰注意力,导致前景的文字内容可读性会变弱。所以需要把重要操作用明确的按钮区隔出来,阅读型文字跟背景图要用明显的反色,还是不行的话就把文字浮在半透明蒙层上,解决可读性问题。

  最后总结来说,2014年让我觉得印象深刻的7种设计语言,唯一主色调、多彩色、数据可视化、卡片化、内容为王、圆形的运用和大视野背景图。其实设计风格很难有全新的,也是不断轮回的过程,为凸现内容APP都在往轻薄化方向设计,不过保不准哪天,又颠覆回最开始的重质感拟物话设计呢。


推荐阅读
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • 本文介绍了iOS开发中检测和解决内存泄漏的方法,包括静态分析、使用instruments检查内存泄漏以及代码测试等。同时还介绍了最能挣钱的行业,包括互联网行业、娱乐行业、教育行业、智能行业和老年服务行业,并提供了选行业的技巧。 ... [详细]
  • 2018年人工智能大数据的爆发,学Java还是Python?
    本文介绍了2018年人工智能大数据的爆发以及学习Java和Python的相关知识。在人工智能和大数据时代,Java和Python这两门编程语言都很优秀且火爆。选择学习哪门语言要根据个人兴趣爱好来决定。Python是一门拥有简洁语法的高级编程语言,容易上手。其特色之一是强制使用空白符作为语句缩进,使得新手可以快速上手。目前,Python在人工智能领域有着广泛的应用。如果对Java、Python或大数据感兴趣,欢迎加入qq群458345782。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 开发笔记:Python之路第一篇:初识Python
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Python之路第一篇:初识Python相关的知识,希望对你有一定的参考价值。Python简介& ... [详细]
  • 我一直都有记录信息的习惯,不知是从什么时候开始,大约是在工作后不久。如今还真有点庆幸从那时开始记了点东西,当然是电子版的,写 ... [详细]
  • 树莓派语音控制的配置方法和步骤
    本文介绍了在树莓派上实现语音控制的配置方法和步骤。首先感谢博主Eoman的帮助,文章参考了他的内容。树莓派的配置需要通过sudo raspi-config进行,然后使用Eoman的控制方法,即安装wiringPi库并编写控制引脚的脚本。具体的安装步骤和脚本编写方法在文章中详细介绍。 ... [详细]
  • 如何提高PHP编程技能及推荐高级教程
    本文介绍了如何提高PHP编程技能的方法,推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力,本文提醒读者要有足够的耐心和时间投入。通过实践操作学习,可以更好地理解和掌握PHP语言的特异性,特别是单引号和双引号的用法。同时,本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言,建议读者要从整体来考虑局部,培养大局观。最后,本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]
  • Sleuth+zipkin链路追踪SpringCloud微服务的解决方案
    在庞大的微服务群中,随着业务扩展,微服务个数增多,系统调用链路复杂化。Sleuth+zipkin是解决SpringCloud微服务定位和追踪的方案。通过TraceId将不同服务调用的日志串联起来,实现请求链路跟踪。通过Feign调用和Request传递TraceId,将整个调用链路的服务日志归组合并,提供定位和追踪的功能。 ... [详细]
  • Python脚本编写创建输出数据库并添加模型和场数据的方法
    本文介绍了使用Python脚本编写创建输出数据库并添加模型数据和场数据的方法。首先导入相应模块,然后创建输出数据库并添加材料属性、截面、部件实例、分析步和帧、节点和单元等对象。接着向输出数据库中添加场数据和历程数据,本例中只添加了节点位移。最后保存数据库文件并关闭文件。文章还提供了部分代码和Abaqus操作步骤。另外,作者还建立了关于Abaqus的学习交流群,欢迎加入并提问。 ... [详细]
  • 安卓“灵动岛”App下载安装量超100万次
    安卓“灵动岛”App下载安装量超100万次 ... [详细]
  • 当google在搜索上很成功,并购youtube、发布gmail、进入手机、一统地图的时候,我们说google真伟大。当苹果在mp3领域一骑绝尘,iphone秒杀诺基亚,ipad打倒了电子 ... [详细]
  • Myappcrashedandthecodeisthefollowing:我的应用程序崩溃,代码如下:elseif(){CGDetailVie ... [详细]
  • Xcode离线安装帮助文档1.在线查看帮助文件:Xcode下查看帮助文件,菜单Help-DeveloperDocumentation在右上角搜索框中即可检索,但速度很慢 ... [详细]
author-avatar
张鹏22_981
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有