上世纪美国最伟大的工业设计师之一亨利·德莱福斯在其《为人的设计》一书中有这样一句话:工业设计师一开始就要丢弃过度装饰,他们的实际工作就是坚持对产品进行仔细分析,研究是什么使得产品进行运作,并设计出一套让产品更好运作的方法——最后是使得它看起来更美观;我们可以将这句话简单理解为:工业设计首先要实现功能,然后在此基础之上追求美感。这里虽然是定位于工业领域而言,但其实它适用于包括UI设计在内的所有设计。
微信和Line作为移动互联网时代在全世界范围内最为流行的几款即时通信软件中的两个,它们各自在通信功能上的实现已经没有什么大的差距了;因此我们不如从UI设计的角度来对比二者。笔者经过一段时间的体验,发现了微信比LINE在UI设计方面的更加优秀之处。
①微信在界面设计上更加一致
一致性是UI设计的一个重要原则;它能够保证用户在同一个软件的不同界面都能够看到某些共有的设计元素的存在,从而感受到软件是一个有机的组合体而不是几个界面的简单拼凑。在软件主界面的设计上,微信比LINE更加精致,更能体现这种一致性。
微信:切换时标题栏在顶部,导航栏在底部,二者形成对称结构,内容在中间切换;
Line:切换时标题栏在顶部为第一栏,导航栏为第二栏,内容在二者之下切换。
微信:切换时黑色标题栏完全不变,左边“微信”字样,右边是搜索图标和加号;
Line:切换时无论是左侧的标题还是右侧的图标都在随着界面的改变而改变;
微信:在所有的二级菜单下,都保持了顶部黑色标题栏,左侧是返回箭头和标题,右侧是随功能而变的附加项图标。
Line:在不同的二级菜单下,顶部的标题栏保持灰蓝色不变,但是其左右侧的图标则一直在改变。
这里微信给人的感觉是,它以不变的顶部标题栏为“天”,以微变的底部导航栏为“地”,“天”和“地”形成一个显著的对称结构,在这个一样相对稳定的结构之下,进行内容的交互;这个框架一直在用标题栏中的字样提醒你,你用的是“微信”。而在Line四个界面的切换中,我们看不到贯穿于四个界面的完全一致的元素。
微信让用户感受到万变不离其宗;而Line则会让用户在诸多的改变中感受到少了某种一以贯之的稳定感和归属感。
②微信在色彩运用上更加纯粹
色彩运用是UI设计的重要组成部分。微信和Line作为通讯软件,它们都不约而同地选择了绿色作为自己软件图标的主色调,然后衬以白色。但在打开软件之后,两者的颜色搭配却大相径庭。
微信对绿色和白色极为钟爱:主界面导航栏图标填充色(绿色和白色);聊天对话框中的背景色(绿色和白色);单个联系人“详细资料”页面下“发消息”和“视频聊天”按钮的背景色(白色和绿色);“扫一扫”下图标填充色(白色和绿色),以及扫描框四角标志颜色(绿色);设置界面下某些项目的状态按钮的填充色(白色和绿色)……
Line的颜色则更加多样化:软件图标为(白色和绿色);主界面的标题栏和导航栏(灰蓝色和白色);单个联系人卡片图标(深灰蓝色);聊天界面时发送按钮(蓝色)……
Line的颜色安排具备一定的间接性和合理性;但它并没有坚持软件从外到里,从整体到局部的颜色协调,从而在某些界面表现出不和谐甚至凌乱的特征。然而微信的极致之处在于,它充分地将绿色和白色作为UI设计的元素,并将白色和绿色充分地运用软件界面到各个可能的地方,构成了绿、白、黑三大主色调(当然黑色或灰色作为背景色或者字体色出现是必然的,浅蓝色等其他颜色也有极低的出现率)。这种色彩运用使得微信在色彩上显得更加纯粹,更加简洁,当然也更具有一致性。
③微信在操作逻辑上更加成熟
Ui设计应当使用户在操作上舒适简单,尽量少地减少用户的学习成本。作为两款社交软件,它们在聊天界面的设计上都是非常用心,但微信的操作逻辑显然更为成熟。
首先,在微信的聊天界面里,聊天对象的头像在左,“我”的头像在右,更为直观地体现出聊天双方的互相交流的关系;而在Line的聊天界面下,左侧有聊天对象的头像,而右侧却并没有“我”的头像与之对应,这样就导致用户在聊天体验中视觉上和感觉上的不平衡。
其次,在微信聊天界面中,右下角有一个加号来调出“图片”“小视频”等附加功能,当点击时,各项附加功能很自然地出现在底部;而在Line中,调出附加功能的加号则被安排在左下角,但若点击此加号,各项附加功能却突然从顶部弹出,让人觉得十分突兀。
不仅如此,Line在同一个界面中,不仅有左下角加号,还在右上角安排了一个下拉菜单图标,但二者的功能确实有部分重叠的;这给人的感觉不仅有些重复,甚至有些混乱。而在微信上,则不存在这种问题。
综合以上三点来看,微信在UI设计上的确比Line更加精致;它充分地贯彻了UI设计中的一致性原则,将色彩、图标、文字等相关设计元素有效地使用在各级菜单中,使用户在体验不同功能的同时又能感觉到某种贯穿整个软件的特征;从而使软件拥有了灵魂。如果非要将这种灵魂打上几个标签的话,可能是:简洁、一致和自然。
当然,Line相比微信而言,也有它自己的长处;比如说Line在功能实现上就比微信更加全面和自由。但问题是,当这种功能的全面实现已经超出了普通用户的需求的时候,它并不能成为一个加分项。微信和Line的使用者都是人,而人都是视觉的动物;但一件产品足以满足人们的使用功能的时候,它就不得不在满足人们对于产品美感的要求方面下功夫。从这个意义上而言,任何成功的产品都必然是基于对于人性的理解和满足的。
而微信,显然比Line更懂人性。
文章系@产品美学 原创,首发于百略网,转载请注明作者及来源。扫描下方二维码关注作者公众号。
免责声明:本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,读者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时,应及时向本网站提出书面权利通知或不实情况说明,并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后,将会依法尽快联系相关文章源头核实,沟通删除相关内容或断开相关链接。