# 宠物圈app **Repository Path**: NFUNM010/pet_circle_app ## Basic Information - **Project Name**: 宠物圈app - **Description**: No description available - **Primary Language**: HTML/CSS - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2020-04-22 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 宠物圈APP ## 1.0 竞品分析 ### 1.架构层主导航的信息架构简要列明（1.1） ![架构层主导航](https://images.gitee.com/uploads/images/2020/0423/205006_5c9b1cab_1648233.jpeg "微信图片_20200423200248.jpg") ### 2.架构层细分页面的结构框架（1.1） ![架构层细分](https://images.gitee.com/uploads/images/2020/0423/205043_09901ff6_1648233.png "微信图片_20200423200020.png") ### 3.交互路径分析（1.2） ![交互路径分析](https://images.gitee.com/uploads/images/2020/0423/205110_96c39287_1648233.png "交互路径.png") ### 4.交互亮点提取分析（1.2） ![交互1](https://images.gitee.com/uploads/images/2020/0423/205153_ed5ddba9_1648233.png "1.png") #### 分析总结 - 1.推荐页面：分成两栏，用户可以看到视频的缩略图。 优点：视频并列排放，整齐有序，不会让用户眼花缭乱。 缺点：用户只能看视频，没有图片或文字。发布动态的按钮 在右下角，不在显眼位置，容易被用户忽略。 - 2.详情页：点进视频后，视频基本占满屏幕 优点：点赞，评论，分享在最下方，发布动态的用户名在顶部 减少分散用户的注意力。 缺点：分享按钮和右上方的三个点功能重叠。都有分享到其他社交平台的功能。 视频不能暂停。 ![交互2](https://images.gitee.com/uploads/images/2020/0423/205352_c26d3a5f_1648233.png "2.png") #### 分析总结 - 1.推荐页面：分成两栏，用户可以看到视频和图片的缩略图。 优点：用户可以发布图片，视频还有话题。 发布动态的按钮在底部中间，符合用户的使用习惯。 缺点：内容并列排放，成不对称，容易让用户看漏或者重复看，减弱用户体验感。 - 2.内容页面：点赞评论和收藏在底部，用户头像昵称和关注按钮在顶部。 优点：功能分布清晰，没有重复繁琐的功能转移用户注意力。 缺点：暂无发现 ![交互3](https://images.gitee.com/uploads/images/2020/0423/205432_0e9f2377_1648233.png "3.png") #### 分析总结 - 1.推荐页面：分成两栏，用户可以看到图片的缩略图。 优点：只显示图片主题，用户昵称和获赞数，内容简洁减少用户注意力转移。 缺点：内容并列排放，成不对称，容易让用户看漏或者重复看，减弱用户体验感。 动态发布页在右上角，不明显，容易造成遗漏。 - 2.内容页面：点赞评论和收藏在底部，用户头像昵称和关注按钮在顶部。 优点：功能分布清晰，没有重复繁琐的功能转移用户注意力。 缺点：没有分享功能 ### 5.视觉界面设计颜色，字体规范分析总结（1.3） #### 颜色规范 ![颜色规范](https://images.gitee.com/uploads/images/2020/0423/205708_2e8b1a11_1648233.png "颜色.png") #### 总结分析 - 顽萌app界面以橙色为主色调，使用橙色为主色调能够给用户一种青春，明亮，欢乐和温馨的视觉感受，在一定程度上能够让用户在视觉上保持一种兴奋的状态，同时辅以软色调的黄色和较为明亮的橙红色，这两种颜色搭配刚好搭配成红橙黄三种暖色系的过度，红色和黄色的使用在一些特别提示上还能起到一定的视觉冲击感，吸引用户的注意；以橙色为主色能够让整个app的风格呈现一种年轻，欢乐和活力的风格。 ![文字](https://images.gitee.com/uploads/images/2020/0423/205748_d64b5ec9_1648233.png "字体.png") ![数字](https://images.gitee.com/uploads/images/2020/0423/205805_2a18e78d_1648233.png "数字.png") #### 分析总结 - 1、IOS:苹果 ，从ios 9系统开始，系统最新的默认中文字体是：苹方。 英文字体是： San Francisco 2、Android：英文字体：Roboto，中文字体：Noto；导航主标题字号为36px，正文标题为32px，用于大多数文章字体为28px，辅助性说明文字为24px，小字(视频长短，标题栏按钮名)为20px，头像名为28px。字体大小代表的层级关系一目了然。 ### 6.视觉界面设计图标规范，内容版式规范分析总结（1.3） ![图标](https://images.gitee.com/uploads/images/2020/0423/210253_2c3ca42d_1648233.png "图标.png") #### 分析总结 - 基础图标的辨识度很高，总体风格活泼且年轻化。同一模块图标的质感、配色、大小等都一致。填充图标是同一色系且传达效果佳；线性图标轮廓线条统一。 ![版面1](https://images.gitee.com/uploads/images/2020/0423/210120_adaa011d_1648233.png "版面1.png") ![版面2](https://images.gitee.com/uploads/images/2020/0423/210139_20342d40_1648233.png "版面2.png") #### 分析总结 - 内容版面内容整洁、有顺序，3选2的组合方式和独立内容模块成为一个视觉单元，有助于减少混乱、提供清晰的结构，利于用户一目了然地抓取重点。圆角边框相对于有棱有角的边框让人更有亲切感。