天气便利店APP.md · 孔晓桐/UI design

## 二：小组产品——天气便利店APP

### 四个导航栏页面：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/165403_6307afea_2228748.png "20.png")

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/165420_7b9db8f4_2228748.png "21.png")

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/165431_d0c284f5_2228748.png "22.png")

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/165449_f0a90d05_2228748.png "23.png")

### 1. 架构层设计：

- 首页：定位气温、天气 不同时段气温 未来一周气温 更多(未来15天/30天气温) 空气湿度 降雨概率 风向、风力 空气质量 日出日落时间 极端天气预警
- 资讯：高温/低温预警 旅游地点 当地热门景区 建议衣着 美食 路线查询 搜索（搜索结果、历史记录、热门搜索）
- 商城：酒店 景点门票 饭店预约 车票 购物
- 个人：个人资料 生活服务 意见反馈 设置与帮助 我的攻略 历史行迹

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/164457_d8d2ba43_2228748.png "111.png")

### 2. 交互路径设计：

- #### 首页：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/170353_fe37b0e2_2228748.png "24.png")

**亮点总结**

- 首页：具有语音播报、高温预警和未来30天气温。
- 未来30天气温页面：有简单的描述了未来30天气温的大概状况、以日历形式表现出每天的最高、最低气温和当天是否下雨、是否晴朗。在今天和未来7天的天气里的背景运用了灰色和蓝色，和当天的天气相结合。如：下雨天和阴天的天空是灰色的、而晴朗的天气是蓝天。
- 高温预警页面：如果当天或未来30天内出现与近几年来最高的气温就会有“高温预警”的提示。而这篇文章是可分享的。

- #### 资讯:

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/170159_ff8a8d79_2228748.png "25.png")

**亮点总结**

- 资讯页：搜索栏、语音输入、个人登录页、信息汇总
- 搜索栏：历史记录、热门搜索、我的收藏
- 点击搜索栏用户可跳转到下一界面，此页面包含用户近期的历史搜索记录、网络热门搜索推荐以及用户的收藏库。为用户提供方便快捷的使用体验以及贴心的推荐系统。

- #### 商城：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/175325_179d25af_2228748.png "30.png")

**亮点总结**

- 商城页面涵括“订票、住宿、美食、景点门票”四大出行旅游分类，清晰明了。此页面的搜索框里有根据今日搜索热点进行提示/推荐，点“分类”图标可进去看根据出行进行分类的购物导航，并且根据今日天气进行有效推荐，并且可以选择日期进行推荐。

- #### 我的：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/171145_4fa92fc1_2228748.png "26.png")

**亮点总结**

- 个人：个人资料 生活服务 意见反馈 设置与帮助 我的攻略 历史行迹
- 洗车指数页面：今，明，后三天可见洗车情况建议；洗车小百科
- 点击生活服务的洗车部分可跳转到下一界面，此页面包含今，明，后三天的洗车情况建议，以及给用户科普洗车指数由来的洗车小百科。洗车情况根据定位地区，天气状况和风向风力，较为合理的给出了建议，让广大爱车的用户对于爱车的维护和何日洗车有了一个更好的判断。另外还利用颜色的差异，黄色温柔的将整个页面比较重要的部分突出出来，让用户一眼便可以看到。

### 3. 视觉规范设计：

- #### 颜色规范

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/185536_efd8eef3_2228748.png "33.png")

**总结** ：

以黄色和蓝色为主色，冷暖色调的相互融合在当代比较符合当代人的审美，辅色主要是HSL都比较低的颜色，这类颜色看起来会比较舒适，且对保护视力有一定的作用。总的来说，APP色彩的搭配具有活力，符合当代年轻人的市场。

- #### 图标规范

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/171734_c6f14b27_2228748.png "27.png")

**总结** ：

图标包含多色图标、单色图标、线性图标和面性图标。品类区图标多数采用单色图标，因为此类图标功能明显，且多数有文字描述提示，单色就已经很好地展示出图标的功能效果。 分享页图标颜色种类较多，但也不会给人一种视觉疲劳的感觉，反而图标样式很清晰，颜色反差不大，都是用户熟悉的图标。多色图标给整体页面带来一种清新感，也符合天气的氛围。

- #### 字体规范

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/214442_ae98f8a5_2228748.png "1.png")

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/214455_a7ae394b_2228748.png "2.png")

**总结** ：

字体风格主要有6种，字体间风格差别不大，主要的区分在字体的颜色。字体的大小都在12sp以上，只有个别功能需要才使用大字号字体。从页面的整体来说，字体间存在协调性。

- #### 内容版式规范

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/171946_b7eb0739_2228748.png "28.png")

![输入图片说明](https://images.gitee.com/uploads/images/2020/0510/172004_cc22edc4_2228748.png "29.png")

**总结** ：

卡片式的设计，从整个页面来看比较简洁整体，而且容易区分。主页的天气模块一目了然，便于找到想要查询的时间的天气；生活服务层面辨别清晰。

孔晓桐/UI design

简介

发行版

贡献者

近期动态

孔晓桐/UI design .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

孔晓桐/UI design