享卡APP的UI设计和产品构架

最新推荐文章于 2024-02-28 16:01:34 发布

fjnu_se

最新推荐文章于 2024-02-28 16:01:34 发布

阅读量315

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/fjnu_se/article/details/80854261

版权

Android 专栏收录该内容

627 篇文章 28 订阅

订阅专栏

这里写图片描述 创意来源
我在和朋友吃饭时，商家送了我们一张50元的代金券，朋友想将代金券转让变现，但是没有合适的地方转让，于是我就想到了做一个卡券共享平台来解决卡券的闲置浪费问题。
产品定位
将产品定位于喜欢冲动消费，办理过多卡券，有许多闲置卡券希望变现的用户群体

核心功能确认
在开始设计产品前要先进行产品的总体功能架构设计，产品的主要功能分为两块，一是分享闲置卡券变现，二是，共享卡券省钱，这两个是主要的功能，此外为了吸引用户，还加入了卡窝社交功能，以卡为媒介构建卡窝社区，实现交流互动吗，交友分享的功能。
产品草图
在有了总体的架构后开始进行产品界面和交互逻辑的设计。
这是产品界面首页的大致构想，产品设计草图，采用线性布局的方式，最上面是搜索栏，下面有广告轮播图，可以轮播广告，这也是项目的主要盈利点，打广告。中间分为三大模块，电子卡、会员卡、优惠券，再下面是一些推荐的卡券信息，最底部为四个功能的图标

底部导航栏
在底部设计底部四大图标分别对应四个界面，点击每个图标跳转到相应的界面，分别是分享卡券界面，卡窝界面，聊天界面和我的界面。

首页界面实现效果图
![ 这里写图片描述] （https://img-blog.csdn.net/20180628152200169?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaXppeG0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 ） 卡券发布的设计效果图在券发布界面，需要填写你的卡券名称并，为了更好的分类卡券，下面设置了三个选项电子卡，会员卡和优惠券可以选择，填写转让的的价格和原价，选择你想发布的卡窝，就可以发布到平台上面！[ 这里写图片描述] （https://img-blog.csdn.net/20180628152252924?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaXppeG0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 ） 约卡界面点击你想预约的卡券会，方便进行线下约卡交易，也可以点击收藏，收藏卡券，可以和卖家私聊，会进入聊天界面！[ 这里写图片描述]

（https://img-blog.csdn.net/20180628154309779?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaXppeG0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 ） 聊天界面 在聊天界面可以和卖家进行聊天砍价，可以进行图片和语言聊天的功能！[ 这里写图片描述] （https://img-blog.csdn.net/20180628154659128?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaXppeG0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 ） 消息界面 在消息界面可以接收到系统消息，点击会进入聊天界面！[ 这里写图片描述] （

https://img-blog.csdn.net/20180628155436875?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaXppeG0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
卡窝界面
在顶部为搜索栏，可以搜索不同的卡窝，下面为商家的广告轮播图，中间有不同的大学窝可以加入，在下面为不同的卡窝展示，底部为四大导航按钮

我的界面
在我的界面可以显示自己的个人资料，还有被关注数和点赞数，还可以进行微信绑定、实名认证和芝麻信用等功能，下面还可以显示你发布的卡券信息
![这里写图片描述](https://img-blog.csdn.net/20180628160346888?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaXppeG0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 ） * APP启动页界面打开APP出来的首页闪现界面，主要凸显了我们的产品理念分享，优惠和共赢！[ 这里写图片描述] （https://img-blog.csdn.net/20180628160553918?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaXppeG0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 ） ICON设计 *先从简单的轮廓开始，先从核心创意开始即卡券共享。包含了卡券的图标和一，凸显出卡券共享的设计理念！[ 这里写图片描述] （