LOFTER改版流程（一）

步骤一 LOFTER5.3.1版本设计规范分析

1、LOFTER层级说明：

  五个主界面：首页、发现、相机、消息、我的，其中相机为核心功能

  其中，“首页”下有2个二级目录，关注和订阅；“消息”下有3个二级目录，动态、消息和聊天。“我的”下有多个二级目录。如图1

 

图1：LOFTER界面层级说明

2、页面设计模式分析

  一级导航采用舵式导航。

  1） 通过标签颜色和图标大小的样式区别，突出“相机”这个核心操作。符合APP图片分享的主要功能。

  2） 入口扁平化，视觉效果明显，占用面积大，也便于在几个功能之间进行快速切换

2.1、首页

  首页下有两个二级导航：关注和订阅。因为只有两个标签，所以采用了分段式导航

  1） 分段导航控件不占用空间，便于用户浏览内容

  2） 同时还能在不占用额外空间的情况增加其他控件，如右边的添加关注功能

  整体采用图文结合的垂直列表模式。界面富有感染力

    基于用户可能更希望获取动态详细信息的动机，APP在详细条目中展示了关注用户发表的核心内容：图片或文字内容，以及标签。基本上涵盖了使用者想要浏览到的内容，使用户不用去进行点击操作就能达到用户体验目标。

    缺点：个人认为这里没有达到条目数量和条目详细程度的平衡。单屏的浏览数量仅仅只有1-2条，甚至有些文字内容在首页显示过长，需要拖动才能浏览完全。而当用户对这条动态感兴趣，出于“想要获取更多信息”进行点击操作，却发c现次级界面内容并没有比首页展示内容更详细。如果用户感兴趣一定会点进去看，所以只需要在首页展示精华内容或者首段内容即可

 

订阅界面：

  整体采用采用文字垂直列表模式。条理清晰，目标明确，给人冷静的感官

  出于让用户能尽可能一次性浏览到多个选择的动机，使用文字列表模式非常合适。同时在文字前面放置小图标，使界面不至于显得呆板

2.2发现

  页面为浏览式页面，所以采用轮播图列表模式的导航，广告位使用大图轮播，下方分类使用小图轮播。使页面富有感染力，显得非常高大上。使用轮播图导航，隐藏其他导航选项，保证页面简洁大方。同时使用户在一个时刻内专注于一个目标，配合大背景和大图片，有效地获得较好的体验感。

  大图轮播用原点做出页面切换提示，小图轮播使用显示半个相邻标签作为切换提示。符合设计规范。

  继续往下拖动进入标签推荐。是图片为主的垂直列表模式。

  特别的，这里采用同一主题下三张图片横向并列的方式对标签进行纵向罗列，又不会像单纯文字垂直列表那样产生单一视觉效果，也不浪费空间。

 

  往下的达人推荐，主要目的是展示各位达人，所以采取了典型的宫格导航模式。将所有图标平铺，没有层级区分，更加扁平化，各个控件按钮使用频率相等

2.3消息界面

  次级标签使用分段式导航，有效利用了空间

消息：

  这里二级导航的“消息”和主导航的“消息”命名重复，且“消息”空间放在最中间。给用户直观感受是这3个二级页面中“消息”界面应该是主要功能，然而文字垂直列表导航却给人恰恰相反的感受，中规中矩，一般化，次要。而且只有四个导航选项，导致下方留白较多，页面不美观。

  另外，突然冒出的专题部分也会令用户产生疑惑，点击“查看更多专题”之后跳转专题页面的图片垂直排列方式倒有高端的感觉，但是这个页面的入口隐蔽，页面转化率应该不高，显得有些浪费了。

 

动态界面：

  该界面目的是要陈列用户关注的人的关注动态。所以有两个主要信息需要表现：一是用户本身关注的人，二是关注人的关注动态。这里使用了垂直列表和网格列表结合的列表方式，使用户既能准确定位到关注用户，又能以上帝视角直观地看到陈列对象。

 

 

 

2.4 我

  这是比较常见的个人信息垂直列表模式。

  按照阅读习惯左对齐，从上到下按重要等级排列，同时对一些导航选项进行归类排放。使用户能够冷静、直观、准确地定位到想要的功能。

步骤二  信息架构设计（竞品分析）

分析竞品对象： LOFTER   Nice   In

一、产品特色和定位的差异：

  Lofter产品定位是高质量图片分享平台，不同于另外两款产品的热闹风格，Lofter整体界面风格偏冷色调，显得精致而大方，格调较高，文艺氛围较浓。

  In和nice的功能重叠较多，标签，短视频，直播，滤镜等等，通过图片和文字记录生活，并向朋友圈分享。但是In的原创贴图是一大特色，可爱的原创卡通形象深入人心非常深入人心。

二、产品界面的差异和共性（主要针对LOFTER进行比较）：

  l共性：

    a) 三者都属于图片社交类软件，核心功能都是发布和上传图片。所以都采用了舵式导航，突出相机功能。

    b)首页都为用户的动态界面，而且都使用大版面放置图片，使界面有张力，而且足够吸引人眼球。

    c)聊天界面比较一致，各版本的迭代也相对稳定。

  2 差异：

    a)LOFTER首页放置了“动态”和“订阅”两个二级度

    b)“发现”页面内容和结构的差异

   c) 消息界面的位置不同

    d)个人中心的不同（在做这个分析的期间，LOFTER进行了一次改版升级，升级后的页面已经和竞品类似，所以这里不进行展开讨论。）

  根据以上共性和差异的总结，想要对LOFTER进行改版升级，首先为了不对用户的操作习惯制造困扰，就要保持共性之处的稳定。首页动态界面，舵式导航、聊天界面的设计不进行改变。其次再针对差异之处进行创新和改版。

5.3.1版本LOFTER

 

三、卡片分类法进行用户心智模型的建立

  从信息架构模型中提炼出了以下29个关键词（主要对差异性较大的界面进行展开）：

  关注、我的订阅、我参与的订阅、分类查看所有标签、添加关注、搜索标签或用户、专题或活动、精选推荐、标签推荐，达人推荐、上传照片、我的消息、关注人的关注动态、聊天列表、个人信息、我的喜欢、我的粉丝、我的关注、乐乎印品、福利市集、摄影课堂、分享APP、账号管理、隐私设置、夜间模式、关于LOFTER、意见反馈、清理缓存、退出登录

  以下是使用卡片分类法做出的用户心智模型。

  调查了两位用户。第一位用户没有使用过LOFTER，我简单告诉她是一个图片分享平台，在不断地提问卡片名称代表的含义，在我的引导下历经艰难险阻才给出了她的分类结果。所以第二个我就找了使用过LOFTER的用户作为对象。

  值得注意的地方有以下几点：

  a)两位用户都把“我的订阅”内容放到了个人主页下。而且用户2表示在使用过程中一直不理解“我参与的订阅”和“我的订阅”这2个功能的区别，所以在分类时进行了自主删减。

  b)两位用户都把“我的消息”放到了个人主页下。询问原因都是基于过去使用的软件习惯。

  c)用户1在没有使用过LOFTER的前提下，把摄影课堂、乐乎印品和福利集市放在了活动页面下。她认为这些可以算是活动，可以用来吸引用户使用。思考过后，我认为乐乎印品和福利集市这样带有商业性质的功能，在一款社交平台中还是不适合放在过于显眼的位置。但摄影课堂却是一个适合推广的宣传点。

  d)用户2把原来在“消息”下的“动态”功能放到了个人中心的“我的关注”下。他认为这个功能并不会经常使用，发现页面的推荐已经足够丰富。而且就功能分类来说，也比放在“消息”下要更合适。我认为这点是可取的。

四、改版后的LOFTER信息架构图

  综上，得出改版后的信息架构树状图（注：重要级应该根据大量的数据和调查得出，由于条件限制，这里根据个人使用感受评分，仅做示意。）

  主要修改点说明：

  1.“订阅”内容把“我参与的订阅”移至个人主页，个人中心新增“我的消息”选项。保留“我的订阅”和“分类查看所有标签”选项

  原因：

    a)用户更愿意看到的应该是自己订阅过的内容，其实“参与过的”和“订阅的”内容并没有本质上的差别，都是用户想要浏览的内容。所以没有必要在这里分两个模块。

    b)两个功能模块放在一起还会混淆视听让用户迷惑。如果说把“参与过的”放到个人中心模块，那么功能就很明确了。

  2.把“消息”界面的粉丝、关注等互动放到个人中心模块，个人中心新增“我的消息”选项

  原因：

   a)符合用户的使用习惯和惯性认知。

   b)发展社交和互动，减少聊天界面的度，让聊天功能更纯粹

  3. 把“消息”界面的“动态”模块放至个人中心模块，个人中心新增“我的动态”选项

  原因：

   a)发现页面的推荐内容已经足够丰富，这里的推荐显得有些鸡肋。可以弱化这个界面

  4.把”摄影课堂”放到“发现页面”

  原因：

   a)高质量图片分享是LOFTER产品的一大特色，爱好摄影的用户人群一定占了很高的比例。而发现界面是给没有目的性闲逛的用户提供一些推荐内容。当一个用户在漫无目的地闲逛的时候，“摄影课堂”就是一个既能很好消磨时间，又符合用户想要学习相关技术的功能。就能极大增加摄影课堂这个活动的推广率。比单独列在个人主页中要好很多。

五、交互稿输出

  见附件：LOFTER改版HTML