移动应用交互设计趋势:潮流元素的创新设计

文章描述:移动应用交互设计趋势:潮流元素的创新设计.

这两个月在忙产品2012的交互设计,很是感触。记得IM组大家在为2012忙得焦头烂额的时候,产品总监说过一句话:“你看每年的时装发布会,衣服都很夸张,但用到市场时,只会看到发布会上的一两个时尚的小元素……”交互设计也是这个样子吧,每年优秀应用所带来的新的流行趋势,总能把交互设计提升到一个新的高度,站在巨人的肩膀上看得更高望得更远……囧,这里说的并不是贬义的“微创新、纳米级微创新、像素级copy……”
虽然自己能力和经验尚且不能总结出像《2012年移动应用交互设计趋势》这样的文章,但是回想一些对自己有启发的Nubility应用,其实还是很用意思的。
一、照片等信息的展示设计
(一)类 Pinterest 不规则照片流风潮
Pinterest出来以后,出现了许多高仿的设计,但是换个角度思考,这种不规则的版块设计有一点像报纸的版块或者照片的拼图模板,如果对死板的列表项已经厌烦,试试不规则的版块布局,也许能为应用信息的浏览带来一点趣味。
(二)层叠、透明和轮播通知
Path带动了大cover的设计。但是那么大的背景图占用了半屏面积,多少有点浪费,于是叠加在上面的信息成为必然,但是叠加的信息设计成了交互设计和视觉最大的考验,怎么利用好面积,又能把需要展示的信息充分展示完?
小体验
在做名片设计的时候,节约开发工作量的要求就是主人态的名片和客人态的名片尽量的符合复用,但是两者展示信息的不同,要展示的信息诸多,颇让人伤脑筋,比如

需求点 结果
① 客人态赞的按钮要容易点击;
② 主人态赞过你的人要现实出来,包括数字,赞的人的信息;新赞你的人要有通知;
③ 主人态的名片和客人态的名片要尽量复用
① 赞的按钮叠加在了cover上;
② 如果有多人赞过你,头像滚动的方式显示;
③ 如果有新赞你的人不是采用文字通知的形势,而是采用红色的数字图标提醒,因为ios的习惯,用户也很容易习得。

从名片的设计中,自己学到最多的是视觉体验和信息展示的平衡,在交互设计上,如何去布局信息,那些信息是该显示的,那些信息是累赘,那些信息能够以最佳的展示方式显示,是莫大考验呀。名片设计结束了,虽然这个版本还有很多遗憾,但下一个版本继续努力吧。
官网下载地址:http://mobile.qq.com/iphone/
(三)推、拉、摇、移的照片显示
最初看到这么显示照片的是flickr,利用运动摄像的手法展示照片,用推、等形式突破画框边缘的局限、扩展画面视野,更好的吸引眼球。后来,发现这种方法被用到了各种登录页面上,尤其是照片分享的APP。
当时在没有拿到Weico+的邀请码时,看到它的欢迎页面,顿时一种文艺上流小清新的印象就形成了,其实即使不是在登录页面,一些Banner的照片显示区域,这样的设计手法能不能有良好的效果呢?真想尝试。
二、按钮设计方法
(一)藏起来的设计
看过小罗写的文章《移动设计空间节省之道》颇认同,讨厌那些简单粗暴的将所有的按钮都显示在同一个界面的设计,总是担心用户点击看不到呀,开发成本很高呀……,结果一个界面摆满了按钮,用户分不清哪个是核心按钮,还影响了视觉体验。自己的在工作中,也尽量的尝试把不必要的按钮收拢起来,给出明显的提醒。

只要提示足够合理,用户并不会找不到你藏起来的按钮,反而让它找到时,还会有惊喜。这不仅是观察一两个用户的结果。
裂开的动效也许仅是方案的一种,也许可以根据场景可以下推、撕裂等等显示动效。
(二)展开和下拉的操作,不脱离现场,用手势代替
以前做应用,写操作、阅读类操作流程时,总是习惯先设计一个全新的阅读评论的界面,然后点击写操作输入框,键盘弹起。当时很傻很天真的觉得写评论或者阅读评论是用户当前的主要操作任务,多余的信息会干扰到用户的沉浸体验。但是后来发现,原来写评论,阅读等等只是我暂时的操作任务,我在写评论或者阅读评论的时候其实并不像脱离原文本身。


这些展开的设计,大多数可以用手势上推或者下推关闭,这也是移动触屏上去按钮设计的一种特色吧。
(三)侧边栏设计
Facebook是我见过最早采用侧边栏的,后来Path、悦读等也纷纷采用了这种设计,界面结构比较复杂时,侧边栏有助于减少界面的层级关系,充分利用显示空间,或者让目录型数据便于操作。但是,看就了应用,你会发现这些侧边栏都是千篇一律的在内容页面的下方,有没有其它的办法,让侧边栏的显示也创新一下,极阅也许是一个小启发吧:调出侧边栏的按钮不一定要在顶端、侧滑出来的层级也不一定要在底层。
三、引导设计根据场景引导用户
开启APP的新功能引导页面已经成为了APP的标配,和同事常常讨论这种功能到底这种引导到底合不合适,最后统一的出来的结论是这种引导界面只能起来通知用户有新功能的作用,要想通过这么几个页面教会用户怎么使用软件,太一厢情愿,真正的引导可以放在用户正在使用这个功能的时候。
比如新浪、悦读的的夜间模式,在夜晚的时候才会提醒用户。
四、“写”操作的设计
最传统的写操作,是像微博(新浪、腾讯、QQ空间)那样,在内容页面的title栏处添加写操作的入口,后来Instagram出现后大多数拍照软件把Post操作放在中间的位置,再后Foursquare把checkin的操作也移动到了中间……轻博出现后,写操作的按钮放在中间,越来越多的中间大按钮的Tab设计。
同时又有另外一种趋势,就是Path把所有的写操作都收拢了起来,成为一种小按钮。两种形式。采用着两种设计主要是和整体软件的信息结构有关系,那种风格更合适,慢慢体验吧。

……
每一年,可以让人发散思维的“潮流元素”太多太多,大的原则一定是设计该坚持的创新,但有时候创新是来至生活的小体验,先抓住一两点总结一下,继续发散思维,同时警告自己别把这些思路变成山寨思维,贻笑大方。

时间: 2024-10-29 06:39:17

移动应用交互设计趋势:潮流元素的创新设计的相关文章

web设计趋势使用大背景图像增加设计吸引力

网页制作Webjx文章简介:使用大背景图片的网页设计案例. 有一项web设计趋势已经流行一段时间了,但似乎势头依然不减,这便是使用大背景图像.这是一种增加设计吸引力简单有效的方法,用一张图片或插图就可奠定网站的整体色调.不过,这样做也有些孤注一掷,你创建的网站可能会显得太繁杂.因此,在背景与其他设计元素之间寻找平衡,就是一件十分重要的事情.为了给你一些启发,下面提供了30个高效运用此项技术的网站范例. Stephan Siegrist Noah Stokes – Es Bueno 大峡谷空中通道

11个网页设计趋势热点 持续联系响应设计

设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在. 使用PS设计网页版面,足矣?或许五年前是吧!现在的互联网用户要求越来越多.没有内涵的华丽很快就会被丢弃.如果你追求华而不实的设计,那么相信你很快会被时代遗弃. 2011年不再属于单纯的华丽而是注重功能.新的一年或者未来十年的设计趋势是响应设计(responsive design).持续联系(constant connection)和虚拟现实(virtual reality). 作为设计师的你,2011年

Web2.0网页设计趋势:为表达信息而设计

自从web2.0之后,网页设计开始走向实用设计的阶段,越来越多的设计师注意到"为表达信息而设计". 着迷于前段时间黑白灰老师给大家介绍的"infographic"这里为感兴趣的同学推荐一些有用资源."infographic"由最初的概念变成一个新的专有名词,越来越多的专家研究并推崇这种令复杂信息更容易理解的设计手段.一部分可视化设计聚焦在传达精确的数据及统计信息,另一部分则聚焦在传达抽象的概念上. 很可惜"infographic&quo

web设计趋势与潮流

原载于 <程序员>杂志2010年第7期. 作者:西乔 19年前,世界上第一个网页诞生,它没有设计可言,由文本和url组成,样式只有最基本的<h1><p>.而如今,Web设计已经成长为独立而庞大的设计门类,一个网页的创造需要多个工种.多种技术的参与,其流程的复杂和挑战性已经超过任何传统设计类别. 这19年间,网站的拥有者越来越清楚自己的目标,而设计师们也越来越理性和专注,人们在不停寻求商业诉求.用户.审美和技术上的平衡点.每一年过去,都有无数过时的风格.特征元素以及实现技

2012年移动应用交互设计趋势

2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度.不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式.信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验.  本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势.  突出主要功能  对于信息架构的不同,主界面也会有很大区分,以某一功能吸引用户,如拍照分享.  专注是从众多相似产品中脱颖而出的产品策略.有数据表明,如果界面某项

案例解析:2012年移动应用交互设计趋势

2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度.不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式.信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验. 本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势. 突出主要功能 对于信息架构的不同,主界面也会有很大区分,以某一功能吸引用户,如拍照分享. 专注是从众多相似产品中脱颖而出的产品策略.有数据表明,如果界面某项功能在视

对抗潮流!忽视设计趋势的网站

  作为网站设计师,我们很容易就迷失在流行设计的风潮中.比如说,最近颇为流行的扁平化设计已经成为了成千上万的网站争相应用的形式.然而,提升设计固然重要,一味跟随最新流行趋势却让我们的网站千篇一律毫无特色.值得我们关注的是,那些真正富有创意的设计如何大胆的对抗那些所谓的流行趋势,坚守自己的创意之路,推广他们独特的时尚感. 这篇文章展示的是设计师们如何通过自己的作品来传递他们的个性,对于视觉的鉴赏力,还有他们无处不在的天赋.所有的设计都别具一格,独一无二,却都美不可言.希望这些设计能激发你的灵感,为

网页设计师指引:当前的网页设计趋势

文章描述:设计师和开发者都需要和市场接轨并跟上潮流的脚步,但是所谓的潮流是当下的,未来确是未知的.我们的确需要保证自己不被行业趋势甩到队尾,但更重要的是在浪潮中适应和学习. 技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地.而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意.所以在我们适应着现代设计潮流的同时,不妨也来看看现阶段网页设计大致的趋势和风格吧.我不敢大言不惭的说这就是当下网页设计的趋势,这只是本人对当下网页设计做出的一些小总结.希望这

悄然流行的混合型视差网页设计趋势

  如果你仔细观察那些最新的使用了视差技术的网页,你会发现这些网站所采用的视差设计已经似是而非了.这些网页中的可动元素非常之多,但是并非动画;配色风格和视觉元素趋近于扁平风,并且借用了来自Material Design的物理隐喻,融合了许多微妙的交互细节.诸多时下流行的设计手法和新趋势开始被打碎分解揉合到一起,形成了新的混合型视差 滚动网页. 了解新趋势 Tour Primer El burro 新的混合型视差 不同于以往,它不是属性单一的视差滚动 ,它是诸多设计手法和技术有机而无缝地结合到一起