Interaction Analysis - 1.5

Instagram个人主页交互赏析

由于是个人主页的原因故不贴出具体地址了

又是一个漫漫长夜，笔者每至此时便开始痛苦并着快乐的码字进行时。正苦于找不到优秀的交互和设计中，在Dribble上翻来覆去，点开其中一位的Instagram主页时发现非常的精致，符合“小而美”的概念。废话不多说，今天让我们来看一下这个主页的交互和设计。

首先在最上面的大Banner部分被分割除了几块正方形的图片区域，因为要展示图片，而且为了显得多而不乱，我想采用这样的扁平图片的拼接处理无疑是一个比较好的设计方式，并且每隔4秒左右会切换一张图，通过这样的一个小的交互动作带来的作用就是使整个画面不在拘泥于死板的图，而更加显得趣味起来。一个个人的头像，一段短小的简介加上一些个人的作品相关信息等，构成了整个标题部分的内容，与下面的照片既有间隔也因信息的相关层级产生联系。如下图：

homepage

下面的具体照片的排序部分没有我们可以选择的诸如热度、分类、新旧程度等，主要是按日期的先后来走（时间不可逆，永远在向前进？不知研发产品的人是否也是这么想~），而整个页面笔者最喜欢的一处交互就是在图片的查看上，在mouseover时展开卡片！使原来的照片从扁平一下赋予了立体感凸显了出来，几个小小的图片不抢眼做点缀，用户体验整体轻松愉快无负担。

基本状态

鼠标悬浮状态

点击卡片，跳出来的框架是具体的这张图片的一些信息和更加清晰的图片，几处提升用户体验的细节也处理的非常好，包括可以左右选择查看其他的图片（可以不必要再次回到主页切换）；可以直接在这里进行关注（就是那么任性！）；甚至还有一个二次弹框（点击···按钮后的Embed）；唯一让笔者confuse是评论这块的设定（既然能看到他人的评论，却不能回复对方，是否在社交层面上欠缺考虑，难道是因为这只是一个图片分享的社区？笔者觉得比较有说服力的是因为是在其他作者的主页，所以网友之间的评论不是重点，而应当以围绕作作品评论为主，其他为次要）。

说到这里，今天最有收获的算是看到了一个比较有趣的卡片式设计，卡片式设计作为一种新的设计方法，打破了传统的在视觉层面上的表达，在很好的承载较少信息量的同时把图片这一元素放大到最大化使其更加有效的利用起来，同样也使网页在排布上更加规整，空隙等更加整洁。在解决问题上，相信会是设计师们一个不错的选择。