# Project_interface-design **Repository Path**: crayon-heimi/project_interface-design ## Basic Information - **Project Name**: Project_interface-design - **Description**: 界面设计期末项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-11-19 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 叽账APP产品文档 ## ❗A3海报❗ ## ❗品牌核心价值❗ ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/hxjz.png) - 叽账主打智能记账,联合支付平台自动导入账单和语音输入,给用户提供方便快捷的记账体验,同时加以可视化的图表分析,使用户记有所示,更配以理财产品推荐,更全面符合现代人的记账理财需求,也更具个性化。 - 页面架构:
”首页“是作为动态分享的板块,用户可以了解到购物动态,记账动态等,有利于保持用户粘性。
”明细“主要是对账目,预算等进行可视化修饰,让用户在整理账目的时候更加简洁易懂,以保持对记账的兴趣。
”记账“主要是一个娱乐性的板块,模拟一个人机对话的过程,让用户在娱乐的过程中理清每一天的账目。
”我的“页面主要是对账户的管理,包括账号的关联(淘宝,支付宝等),阶段性账单查看,签到等功能。
## ❗品牌元素❗ ### 1. Logo系统 + = - logo的组成:小鸡+笔+“叽账”文字 叽账的logo以小鸡头顶算盘、手拿毛笔的形象为主导,极具形象却不繁杂,具有精确计算和活力记账的象征,给用户专业感却不乏趣味。 ### 2. 颜色系统 - 橙黄色系中很温暖的色,欢快活泼的光辉色调,给人温暖舒适之感。因其色彩明亮、健康、活泼.整体个性化、年轻化更富有趣味,与叽账的记账理财观念相符,给用户健康理财、放心理财、个性化理财的信息传达。 - 基调统一却不单一 辅以绿色、紫色、蓝色,灰色使整个视觉更丰富多层次,可读性更强 ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/ys.png) ### 3. ICON视觉系统 ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tb1.png) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tb4.png) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tb2.png) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tb5.png) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tb7.jpg) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tb6.png) ### 4. 字体系统 - 叽账使用的标准字体是微软雅黑,这款字体是一种全新的无衬线黑体,它的字形略呈扁方而饱满,笔画简洁而舒展,易于阅读。 - 统一字体更具一致性,以不同字号区分层级,更丰富,阅读感更舒适。 ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/zt1.png) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/zt2.png) ### 5. 图片使用规范 - 首页优惠券商品展示图片比列1:1 - 聊天页导入图片比列1:1 - 整齐统一 ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tp1.png) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/tp2.png) ### 6. 版式、栏高、边距等尺寸规范+栅格系统说明 ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/sg1.png) ![WAI](https://gitee.com/Elaine111/COURSE_Interface-designI/raw/master/images/sg2.png) iOS(750*1334px) - 顶部状态栏高度:40px - 页面导航栏高度:80px - 内容快最小间距为:16px - 屏幕左右与内容间距为:24px - 列表内容高度:88px - 小标题栏高度:64px ## ❗高保真原型图❗