LINE产品分析(二)

LINE_PART2

5         产品设计分析

5.1       界面布局

LINE17-1LINE17-2

图17

从图17可以看到,LINE Android和iOS的界面略有不同,如Tab选项卡不在界面下方,不在操作栏使用返回按钮。这说明LINE并没有完全照搬iOS的界面,在部分遵循Andriod设计规范的同时,对产品细节有相应的调整和优化。除此之外,其他的元素和结构还是保持着与iOS版本风格的统一性。

在这点上众所周知的是,微信在Android上完全移植了iOS的界面和交互方式,此做法更多的考虑了版本迭代的成本和效率。不但忽略了Android用户的使用习惯,也引起了很多的争议。

自Android 4.0之后,Google推出了Android Design官方指南,并集成了Holo主题风格的控件。其意图就是想统一Android界面和交互混乱的局面,但时至今日,完全依照Android Design做设计的开发商仍凤毛麟角。微信坐拥4亿用户更应遵循设计标准,否则会带来不良的示范效应。这一点上,LINE适度匹配Android设计规范的策略相比微信更进一步。

LINE18

图18

从视觉观感上,LINE的界面布局简洁明了,结构层次清晰有序,元素布局简单友好,不同的页面有统一的视觉体验。色彩最能传递产品的质感,LINE主要采用了以下色系:

LINE19

图19

         LINE采用蓝而近黑的藏青色(#202836)为菜单色系,通过柔和渐变,低饱和度、亚光质感等方式来增强立体效果。主内容区以银灰和银白条栏作为列表或功能的区隔,列表内容以白色为底,整个界面的主体色系偏向于零度对比,整体视觉效果既有一定层次,又感觉大方且富有现代感。同时,消息提示加入了黄绿(#72D60A)和红色点缀,强色彩差对比,使整个界面明快和活跃。黄绿色是LINE系列产品的基础色系,象征着年轻而富有活力,未读消息提示使用该色彩也在一定程度上延续了品牌基因。

菜单选择的图标均采用银白渐变的风格,突出了金属质感并与藏青色的菜单保持高包容度,尤其在联络卡片中,这两种色系的搭配体现了很好的统一性,银灰渐变的卡片上图标以藏青色渐变呈现。同时也应该注意到,文字遵循与图标同样的法则,与图标色系保持一致。

LINE20

图20

另外,标签选项卡的图标在选中时,采用湖蓝色(#7BB7FA)渐变并以高亮透明的按钮为底。聊天对话框中使用白色的图标并以宝蓝色(#377DD9)为底的按钮,均使得图标清晰而醒目,强化了位置感和功能性。

LINE21 图21

简约图标的运用在准确表意的同时,排除了不必要的多余元素,保持轻量的渐变,明确的描边,使LINE得图标显得非常精致,也符合整体界面的风格。同时,也让用户快速直观的理解选项的含义。

LINE整体划分可划分为3个区域,最上为导航区,中间内容区,下方菜单区,是比较典型的Tab布局方式,同时内容列表采取了手风琴结构,更多选项卡下结合了九宫格的布局形式。整体的信息结构与功能布局与微信、KakaoTalk、WhatsApp等很相似。此种布局方式,以信息和内容为主,结构上首尾呼应,减少了用户的学习成本,增加了产品的易用性体验。

整体而言,相比WhatsApp的原生态,KakaoTalk的亮色系,微信的偏稳重,LINE更具有时尚感和亲和力。

5.2       交互设计

5.2.1        导航

LINE22

图22

         图22从左到右依次是设置->添加好友->主页->动态好友,如图中红圈所标示,LINE的导航栏关闭按钮设计比较混乱。在设置和添加好友中的导航栏中,关闭按钮在右上角,在主页中被放置于左上角,而在动态消息中右侧与主页一样均为撰写消息的按钮,左边却是通知消息。因此,会导致用户经常误操作,尤其在移动环境下,用户更需要分散精力同时关注右上角的按钮属性,打断了操作的流畅性。尤其如图23所示的典型流程:

LINE23

图23

         可以看到右上角的按钮从关闭变成了编辑,用户有一定操作惯性和短期记忆度,连贯一致的逻辑会让流程更顺畅,无需更多的思考。而此处显然会影响操作的连续性,如果不停下来留意细微的变化,将不会得到所预期的结果。

LINE使用关闭按钮的逻辑是便于功能模块的调用。如在好友模块中可切换至添加好友界面,当任务完成后点击关闭按钮切换回好友模块。使用返回还是关闭,这是个值得思考的问题。关闭按钮表明该功能是相对独立的,而返回按钮需要考虑当前页面所关联的上一级属性以及当前所在位置。动态消息是独立的模块,考虑到用户查看通知消息的便捷性,特别将通知消息按钮置于导航最高层,如此一来,撰写按钮在右侧也未尝不可,作为组成整体架构的模块,这样的设计无可厚非。但是主页作为独立的页面,这样的设计值得商榷,为了与动态消息的撰写按钮保持一致,要在用户联络卡方便调用主页,只能将关闭按钮放在导航栏左侧,逻辑上很矛盾。其实,LINE在群的留言板中投稿按钮被置于屏幕底部,如下图24所示。那么,主页的撰写按钮是否采取此种方式呈现,以此解决存在的问题。

LINE24

图24

         对于导航栏的统一性体验,微信对细节的把控是值得借鉴的。在不同的页面调用添加朋友时,左侧的返回按钮会显示与之相关联的上一级标题,这样很好的保证了整个逻辑和流程的完全一致。如下图所示:

LINE25

图25

5.2.2        搜索

LINE26

图26

LINE分别在好友模块、添加好友和官方帐号中提供搜索功能。好友模块中提供用户好友的搜索,添加好友通过LINE ID寻找朋友,官方账号用来查找明星或商家。

好友模块的搜索框在默认状态下是被隐藏的,只有当用户下拉列表时搜索框才会呈现。主内容区的群和好友信息采取类手风琴布局方式,当所有条目展开情况下,用户一般会通过手势上划查看好友列表,当好友列表过长且划动到名单底部时,用户会在好友条目区隔的范围的来回停留。并且用户退出再次进入LINE时,搜索框都不会自动呈现。这意味着,当搜索框过于隐蔽时,很难吸引用户的注意力,搜索框的价值体现也因此被弱化。

进入应用时,依照习惯,视线都趋向于从上到下,从左到右的眼动规律。此处,微信和KakaoTalk都将搜索框固定在好友列表上方,简单直接的引导用户。

LINE27

图27

         LINE搜索严格匹配关键字,中文不支持拼音也不支持简繁体互转,如上图27所示。官方帐号搜索虽然不但可以搜索ID,也可以搜索出签名内容,如下图,但是也存在以上同样不支持和简繁体的问题。

LINE28

图28

当官方帐号属地为中国大陆时,入驻LINE官方账号的企业或媒体几乎没有,选择日本才会看到大量的企业明星帐号。所以,目前在中国大陆,官方帐号的搜索几乎沦为鸡肋功能。

LINE有着严格的隐私条款,并且不鼓励用户在网上公开自己的ID,以此寻求朋友或交往对象。前面在产品结构中提到过,LINE用户的好友主要来自电话薄或者社交网络,本质上是一款私密社交的应用。要想添加陌生人,设置LINE ID是其中的一种方式,LINE ID就是方便其他用户在LINE寻找到使用者,默认是未设定状态,需要使用者自行设定。

同时,LINE搜索采取的都是严格匹配关键词的策略,不会以模糊查询的方式给出结果。由于LINE ID只支持英文字母和半角英文数字的组合,导致用户设置的LINE ID比较长或复杂,在手机上输入ID时不够便捷。并且,为防止LINE搜索ID功能遭乱用,搜索若超过一定次数或输入的ID错误超过一定次数,搜索ID功能将被暂停1个小时。

总体来说,LINE对中文搜索支持不够,在加上严苛的陌生人搜索限制,使得LINE的搜索体验不够好,部分因素源于LINE本身的定位。即便如此,微信支持拼音查询、简繁互查、公众帐号模糊查找、好友列表集成语音等等交互方式,这些都是LINE所欠缺的。同时建议,LINE的贴图商店在变得日益庞大,越来越多的收费贴图让列表变得越来越长,这里是否考虑加入搜索框方便用户的查找。

5.2.3        反馈

首先,产品要符合用户直觉和习惯的操作方式。如导航中所述,LINE的关闭按钮存在着逻辑操作呈现不一致的问题,在界面元素文案上也存在着不一致的提示。如下图所示,从设置进入后,导航栏标题变成了设定,似乎有点吹毛求疵,但是最简单的问题才暴露着设计者对细节体验的雕琢。

LINE29

图29

在LINE的登录和注册界面中也同样存在着提示文案表述不够简洁,导向不够明确的问题。

LINE30

图30

         如上图标示的产品文案提示信息,「6-20位之间的半角字母及数字」的表述对普通用户来说过于复杂了,6-20位之间的字母和数字会产生歧义,是6-20位的字母、数字还是字母和数字的组合。「若您尚未绑定邮箱地址」这个按钮功能目的不够明确,文字应该能给用户传递足够清晰的提示,引导用户下一步的操作。而此处的提示让人生疑,切换后的界面如上右图所示,大量的拗口文字声明,并不能够清晰指引给用户这样做的好处,那么这段声明存在的意义和用处就显得多余,也给用户带来复杂的印象。

在移动端输入时,由于虚拟键盘无法像PC那样进行高效的盲打,以及空间的限制,手指经常会误操作。所以,在产品设计时应该尽量减少用户的输入。正如前述,由于LINE ID只支持英文字母和半角英文数字的组合,导致用户设置的LINE ID比较长或复杂,在手机上输入ID时不够便捷。

LINE31

图31

         LINE对动态消息的提示采用Tab标签提示的方式,但是在点击标签后不能直接看到好友的动态,需要再次点击左上角的通知标签才能查看具体信息。当用户单手操作时,手势操作移动的路径较远,操作不便。同时,也可以看到在多图的情况下,最后一张图片在消息卡片的边缘之外出现,滑动多张图片时给人的感觉是浮动于消息卡片之上,抽离于整个界面。另外,当进入通知的浮动窗口后,好友的动态消息提示不一致,前后居然出现英文和中文混杂的情况。

那么,是否可以在Tab标签后,在屏幕底部采用浮动提示引导用户进入消息详情。好友主页时间线进行的动作也给与提示,而非仅仅是评论和留言。若对方通讯录没有使用者的电话号码,使用者将被自动添加为对方的「您可能认识的人?」列表中,整个操作路径也隐藏的比较深,也可以采取浮动提示来引导。

LINE32

图32

当用户在LINE中进行消息内容撰写时,尽量不要打断用户操作的任务流,也要给予用户选择的余地。从上图可以看到在上传照片时,LINE将一个枯燥的等待界面直接呈现在用户面前,显示了一个上传进度的界面,让用户看上传百分比。用户别无他法,只能选择等待。尤其在网络信号比较差的时候,这个问题显得尤为突出。这里是否可以更灵活一些,只需告知照片在上传,让用户可以同时进行其他操作,不要让用户有等待的焦虑,等上传完毕后,在用通知来告知用户上传成功与否。

当网络质量较差的时候,用户发布内容失败后,只能选择遗弃之前辛苦输入的内容。既没有草稿保存,也没有一键清除文字的选项。对于移动端不便的输入来说,缺少这些考虑会给用户带来很多不便。这里可以参考新浪微博的设计,如下图33所示,在网络质量欠佳的情况下,可以提示用户保存草稿也能一键清除文字。

LINE33

图33

LINE产品分析(三)将完成最后部分,产品核心功能、竞争策略及商业模式进行分析。

–END–
原创文章,转载请注明: 转载自移动互联网2.0,本文链接地址: LINE产品分析(二)