从交互设计“流行元素”中启发

　　看过一篇文章《2012年移动应用交互设计趋势》，这两个月在忙产品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把所有的写操作都收拢了起来，成为一种小按钮。两种形式。采用着两种设计主要是和整体软件的信息结构有关系，那种风格更合适，慢慢体验吧。



　　……

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