# 界面设计竞品评估 **Repository Path**: NFUNM010/beauty ## Basic Information - **Project Name**: 界面设计竞品评估 - **Description**: No description available - **Primary Language**: HTML/CSS - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-04-03 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 界面设计竞品评估 —————— 美丽修行APP ## 产品介绍 - 美丽修行是一款查询化妆品成分的手机APP，该产品是提供化妆品安全星级和成分查询的APP。精准匹配16种肤质。汇集全球30万化妆品数据库。同步药监局备案数据，避免三无产品，属于测评分享类APP。 ### 美丽修行APP —— 搜索界面分析 ![搜索1](https://images.gitee.com/uploads/images/2020/0403/095850_c0ba4ad5_1648233.png "屏幕截图.png") - 用户的控制和自由——右上方有一个取消键，用户可以自由地退出。 - 灵活高效的使用——搜索框的下方会出现历史搜索记录，允许用户使用重新操作；同时还会在搜索框下方设置热门搜索和新品搜索，提供系统默认值，减少用户多余操作 - 美观简洁的设计 ![搜索2](https://images.gitee.com/uploads/images/2020/0403/100048_c6ebeea1_1648233.png "屏幕截图.png") - 再认而不是回忆——在该页面内，APP将产品、成分、话题和文章这四个选择对象可视化，使用户一看就懂。 ### 美丽修行APP —— 我的界面分析 ![我的1](https://images.gitee.com/uploads/images/2020/0403/100333_496fe5b3_1648233.png "屏幕截图.png") ![我的2](https://images.gitee.com/uploads/images/2020/0403/100351_49ff0d3d_1648233.png "屏幕截图.png") - 一致性与标准化——若未测试肤质，提示词颜色与关键按钮和被选中界面图标颜色呈现一致的紫色。完成测试后提示词消失，更换为测试结果黑色字体的关键词。积分商城与立即签到颜色对比明显。提示用户签到的采用深紫色，更容易引起用户注意，该功能与通用业界标准功能一致。 ![我的3](https://images.gitee.com/uploads/images/2020/0403/100546_9dc56ee5_1648233.png "屏幕截图.png") ![我的4](https://images.gitee.com/uploads/images/2020/0403/100613_4f3b0c83_1648233.png "屏幕截图.png") - 让用户再认而非记忆——点击护肤方案的+，会跳出弹窗和输入法，尽量减少用户需要记忆的事情和动作，提供可选项让用户再确认信息。 - 系统与用户现实世界的匹配——该页面使用的指示按钮和提示词都十分简单明确，符合用户在现实世界的使用习惯。 - 帮助使用手册——新手用户点击“我的”页面中的“收藏”功能，会有操作提示。提供帮助信息，聚焦于用户的使用任务，列出使用步骤，且信息量不过于大。 - 错误预防——在“基础方案”，“种草”和“过敏不适清单”这三个区域中会有小字提示该模块功能，在用户选择动作发生前，可以预防用户容易混淆或者错误的选择。 - 系统状态可见性——用户签到第几天会在签到按钮中提示，告知用户当前的状态。 - 美观而简洁的设计——界面色彩搭配简单且自然。没有多余的信息作干扰，分散用户注意力。 ### 美丽修行APP —— 肤质界面分析 ![页面1](https://images.gitee.com/uploads/images/2020/0403/100834_01e8276d_1648233.png "屏幕截图.png") - 相近性-“同肤质最爱”下的产品列表 - 连续性-产品列表下不完全的部分/根据我们的认知，护肤除了这几项产品类型外右边应该还有别的，而且最右有一个灰色提示图案 ### 美丽修行APP —— 首页界面分析 ![首页1](https://images.gitee.com/uploads/images/2020/0403/100959_48607fb6_1648233.png "屏幕截图.png") 根据尼尔森十大原则，对美丽修行首页进行产品评估，结果如下： - 一致性与标准化——在首页内，产品的信息架构与导航搜索，功能名称与内容分类，整体信息的视觉呈现，操作行为交互方式都是一致的。 - 具备灵活且高效——首页的页面设计排版清晰简洁，让新用户可以很容易得到想要的信息，而老用户也能根据自己的需求快速到达APP指定区块。 - 美观且简洁的设计——首页图标小巧精致，配色简洁大方，既满足了用户的视觉效果又能明确指引用户寻求信息。 - 让用户再认而非记忆——每个主功能板块都能在首页得到清晰的展示，减少了用户需要记忆的事情和行动，提供可选项让用户再认信息。 ### 美丽修行APP —— 发现界面分析 ![发现1](https://images.gitee.com/uploads/images/2020/0403/101142_f02ae863_1648233.png "屏幕截图.png") - 在“发现”界面中，该界面使用了接近性来区分每篇文章的图像，标题，描述和其他信息； - 首先用相同的排版方式来区分界面中的每个区块，并使用紫色来区分常规按键功能； ![发现2](https://images.gitee.com/uploads/images/2020/0403/101220_d1c0da82_1648233.png "屏幕截图.png") - 在发现的关注页面中，用户关注按键和页面上方的选中按键呈同一色系协助认知 ![发现3](https://images.gitee.com/uploads/images/2020/0403/101250_35c813b8_1648233.png "屏幕截图.png") - 该地方的设计使用了连续性原则加强了对分组信息的感知，连续性的终端可以表现出一个部分的结尾，引起人们的关注。 - 在“发现”界面中的设计都使用了对称性原则，给用一种坚固和有序的感觉，增强页面内容的可读性同时提高用户的使用感，同时在该界面的设计不仅简洁而且美观，能够帮助用户更好的体验app里面的功能，在设计中保持了一致性的原则，不管是在配色还是图标大小或者是各种文章排版中都体现了一致性的原则。 ### 美丽修行APP —— 分类界面分析 #### 1.系统状态可视化 ![分类1](https://images.gitee.com/uploads/images/2020/0406/193641_8a6b9c07_1648233.png "屏幕截图.png") - 通过页面最上方“xxxx排行榜”的文字以及奖牌图案提示，帮助用户快速感知此时正处于分类排行的页面，强化用户心理预期。 #### 2.不脱离现实 ![界面2](https://images.gitee.com/uploads/images/2020/0406/193710_726eaf9f_1648233.png "屏幕截图.png") - 把化妆品或护肤品的文字以及图标放在一起，榜单下方图文并茂，并且以星星作为评价等级；遵循现实生活中的基本规律，信息的显示自然而有逻辑。 #### 3.用户有自由控制权 ![界面3](https://images.gitee.com/uploads/images/2020/0406/193758_e31ad36d_1648233.png "屏幕截图.png") - 在商品的评价页面有相应的提示性语言，如提示评论要多于20字，以及点击星星可以对商品进行评分。 #### 4.一致性 ![界面4](https://images.gitee.com/uploads/images/2020/0406/193839_fa5844f0_1648233.png "屏幕截图.png") - 产品名称、图标显示、操作方式等都保持了一致；商品分类采用从左到右的形式，排行则为从上到下。规则的商品排列顺序能减轻用户的思考负担。 #### 5.预防用户出错 ![界面5](https://images.gitee.com/uploads/images/2020/0406/193912_2890874f_1648233.png "屏幕截图.png") - 可导致严重后果的功能键与常用功能在排版上应有一定距离而不是相邻。在看评论时有一个返回顶部的按钮处于页面的右下角的一小块地方，在布局上占据了更小的版面，一定程度避免用户出错。 #### 6.美观和极简的设计 - 榜单画面简单清晰，仅有横排的化妆品类目以及下排的产品信息，不相关和不必要的信息不显示；不做过多影响信息传递的额外设计。 #### 7.帮助和说明文档 ![界面7](https://images.gitee.com/uploads/images/2020/0406/194121_fb325025_1648233.png "屏幕截图.png") ![界面8](https://images.gitee.com/uploads/images/2020/0406/194143_082dea42_1648233.png "屏幕截图.png") - 在榜单页面右上方有一个“？”按钮，点进去可以看见便利的检索或指引帮助功能，内容较为详细描述，并且列出了具体实现步骤。