# 界面竞品分析 **Repository Path**: NFUNM031/interface_competition_analysis ## Basic Information - **Project Name**: 界面竞品分析 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-04-06 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 新浪微博手机客户端的启发式评估 ## 产品信息 微博是基于用户关系的社交媒体平台,用户可以通过PC、手机等多种移动终端接入,以文字、图片、视频等多媒体形式,实现信息的即时分享、传播互动。微博基于公开平台架构,提供简单、前所未有的方式使用户能够公开实时发表内容,通过裂变式传播,让用户与他人互动并与世界紧密相连。作为继门户、搜索之后的互联网新入口,微博改变了信息传播的方式,实现了信息的即时分享。 ## 使用原理 格式塔原理 ## 优点 ### 热搜页界面 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0406/235332_16f7a36f_1829817.png "01.png")

1- 该页面使用了闭合性原则:
分为热搜板块与话题板块以及热点板块几个区域块,使得整个页面排版清晰,达到视觉降噪的效果。
2- 热搜话题后面的小方块颜色以及文字采用和了相似性原则:
对应颜色与文字有对应的含义,同样颜色的即为同样性质的话题,在视觉上达到话题归类的效果,帮助用户做出判断以及帮助用户以更短时间内抓取自己想要浏览的话题。
![输入图片说明](https://images.gitee.com/uploads/images/2020/0407/003236_c6d837fc_1648149.jpeg "WechatIMG14.jpeg") 3- 页面文字才用相似性原则:
用橙色字体区分功能性文字/用户属性,引导用户可以对功能性文字进行点击跳转/让用户直观了解用户属性,如:更多热搜,关注字眼等;用户呢称呈现橙色代表该用户为VIP。
用蓝色字体代表话题活动以及其他备注,引导用户文字上的互动,以及帮助用户抓取关键字眼。如用户下方所用的设备备注,文字内容用#括起来的部分表示包含的相关话题相关用户或者强调语言,文字后“全文”的字眼等。
4- 采用相近性原则:
中间的广告资讯板块采用相近性原则,从视觉空间上将归类性的图标与资讯图片分开,呈现出简洁有序的板块界面,提高用户的心理对该板块的接受值。
![输入图片说明](https://images.gitee.com/uploads/images/2020/0406/235707_d3ea48bc_1829817.png "02.png")
5- 采用焦点性原则与对齐原则:
点击下拉的符号时,会有弹窗出来,背景颜色变暗,页面突出重点区域,达到提醒用户目前所在的位置以及当前操作状态的作用;文字内容采用对齐的原则,功能直观简洁明了。
![输入图片说明](https://images.gitee.com/uploads/images/2020/0406/235737_8ade13f0_1829817.png "03.png")
6- 在热点板块,采用了相似性原则、共同命运性原则
四个标题的字号、字体颜色采用相似性原则,帮助用户区分标题以及内容。
在该板块左右滑动时,标题下方橙色条会随着滑动速度改变其长度,随着滑动方向移动。给用户提供了可视化的操作过程,告知用户目前正在操作的位置以及状态,遵循了用户的操作逻辑,也增加了页面的灵活性和趣味性。
### 小视频页界面 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0406/235800_9ac1c9d4_1829817.png "05.png")
1- 相似性原则:标题字体号数以及颜色区分标题的状态,从而使用户了解该栏文字的性质以及所处位置。浅灰色字体一般都具有提示性,引导用户操作页面功能,可减少用户猜测的步骤。
![输入图片说明](https://images.gitee.com/uploads/images/2020/0406/235814_778c8454_1829817.png "06.png")
2- 连续性原则:上下滑动,有些视频被空间限制,但是依然能够让用户得知后边还有视频可浏览。
3- 界面对称性分布:每个视频所占空间大小同一,并且对齐式放置,整个界面很整齐,没有其他的视觉杂物,直观告诉用户该界面的内容呈现模式。
### 微博消息页面 ![1](https://images.gitee.com/uploads/images/2020/0407/000628_f03eba88_1648231.png "1.png") 1- 该页面使用了相近性原则: 在@我的,评论以及赞的三个图标使用了相近性原则,与下面的通讯信息进行分隔。 2- 该页面使用了文字相似性原则: 账号昵称统一使用了黑体,而具体的信息内容统一使用了浅灰色的字体。使用户能更加清晰地区分出发件人以及具体信息内容。 ![2](https://images.gitee.com/uploads/images/2020/0407/000642_6d704d10_1648231.png "2.png") 3- 使用了连续性原则: 在页面下部分通过显示半截的图标帮助用户通过构图来解释方向和运动。连续性的中断表示一个部分的结尾,引起人们对新内容的关注。 ![4](https://images.gitee.com/uploads/images/2020/0407/001437_f2d63bfe_1648231.jpeg "4.jpg") 4- 使用了共同命运性原则以及主题与背景原则: 在这个的设置元素中点击之后会呈现出提示语,提示语内容呈现白色,而背景的颜色变暗。使用户的关注点在提示语中。 ### 微博热搜内容页 ![5](https://images.gitee.com/uploads/images/2020/0407/000717_8720992f_1648231.png "5.png") 1- 使用了相近性原则: 这个页面使用了相近性原则来区分了页面的主图,正文,以及其他内容。把不同的内容规划为一个信息组。 ![6](https://images.gitee.com/uploads/images/2020/0407/000728_8ba7acf7_1648231.png "6.png") 2- 使用了文字相似性原则: 靠文字的不同颜色区分不同的内容,使使用者有更好的视觉体验。 ![7](https://images.gitee.com/uploads/images/2020/0407/000741_e6124a9e_1648231.png "7.png") 3- 使用了连续性原则: 序号的标注以及页面呈现都能让用户得知后面还有内容可浏览。 4- 使用了闭合性原则: 通过使用色块来让用户知道底部的内容与正文文字是分开的。 ![8](https://images.gitee.com/uploads/images/2020/0407/000755_b098e8e3_1648231.png "8.png") 5- 使用了共同命运性: 滑块指示器使用了共同命运性的原则 ### 原理运用评估总结 闭合性与命运共同性在热搜页、消息页应用的比较恰当,符合用户的操作需求,页面秩序性比较强,可操作性、易用性强。相似性在消息页、热搜页、首页的应用较差,部分存在误导性,会影响用户的观感体验与情绪值,可用性易用性相对差。 ## 二、潜在问题 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0407/013933_8e2e60df_1648149.jpeg "WechatIMG16.jpeg") - 问题:界面设计欠缺导致误导用户 - 原则:相似性 - 说明:这是位于新浪微博首页界面上方的动态视频观看通道。此通道功能运用了相似性原则,头像周边带着一圈橙色表示该用户有新的视频(直播或故事),头像底下是灰色的统一字体,不同的是第二个头像是“直播广场”,而后面的其他头像下面都是用户ID。 - 困扰:此问题给用户造成一定误导以为第二个头像与后面的头像都是一样的直接进入用户新视频的通道,此问题具有中等的危害性。 - 建议:把“直播广场”从动态视频观看通道删除;然后在标题栏“推荐”后面加上“直播”,点击直接跳转到直播广场。将其放置于标题栏,相似性从图标转换成在文字的运用上,从而解决“图标误导用户“的情况。在该页面添加直播页,使被动态视频吸引而想看直播的用户能够以最少的操作步骤到达直播页面。