阔腿裤推荐App设计-优快云博客

本文介绍了一款专注于推荐各种款式阔腿裤的应用设计方案。该应用包含每日推送、历史记录查看、收藏管理等功能，并详细描述了各个页面的设计与交互细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们的应用是一个专门推荐各种款式的阔腿裤的应用，下面这个链接是我们做的简陋的原型......
- https://www.xiaopiu.com/h5/byId?type=project&id=5acc4c4ffbeaec0d1e00097f
我们的应用能够实现
- 功能一：每天推送5条阔腿裤；
- 功能二：每天推送的内容都可以在历史推送中查看；
- 功能三：喜欢的阔腿裤可以添加收藏；
- 功能四：在我的收藏当中可以对收藏的单品进行管理；
- 功能五：可以分享阔腿裤到QQ、微信。
我们的应用的特色在于
- 特色一：我们只推荐阔腿裤，虽然小众，但是真正爱阔腿裤的人一定会觉得比到某宝当中逐家店当中去搜索热门的阔腿裤便利；
- 特色二：每条推送内容都附带着裤子所在店铺的链接，心动的人可以通过这个链接到店铺进行购买。
我们应用的页面架构为
- 页面主要有5个：
  - 注册页面；
  - 主推送页面及侧栏；
  - 详细介绍页面；
  - “我的收藏”页面；
  - “历史推送”页面。
    点开每一条推送内容后的详细介绍的页面，大体结构图如下：
每个页面的具体设计以及交互细节
- 注册页面
  - 输入信息，点击登录后可跳转到主推送页面。
- 主推送页面
  - 左上角有一个三条杠的菜单图标，点击会弹出侧栏
  - 每天会推送五条内容，每条内容在这个页面上都由一张图片、一两句简介以及一个收藏图标构成，这个页面是可以上下滚动的；
  - 点击每条内容后，会进入另一个界面，详细介绍这条裤子；
  - 点击每条内容右下角的心形图标，图标会变成红色，这代表收藏成功；再次点击图标，会变回原来的颜色，这表示取消收藏；
- 侧栏
  - 点击头像可以进行账号管理；
  - 点击“我的收藏”，会弹出“我的收藏”界面，可查看收藏的单品；
  - 点击“历时推送”，可以查看历史推送内容；
  - 点击侧栏外的部分，可以回到原来的界面。
- “我的收藏”界面
  　　
  - 在当前界面，可以查看收藏的单品；
  - 对该条内容左划，可以对收藏的裤子进行删除、置顶等其他管理；
  - 点击左上方的箭头，可以返回到原来的界面。
- “历时推送”界面
  - 界面是一个可以左右滚动的时间轴；
  - 点击其中某个日期，可以查看那一天的推送消息，点开的页面形如主推送页面。
　　
- 每条内容点开后的界面
- 上方会有可左右滚动翻阅的多张图片，以便更直观的了解裤子；
- 图片下方是对裤子的详细介绍以及裤子的链接；
- 图片下方还有心形的收藏图标，通过浏览详细的资料可以对之前做出的收藏决定进行更改；
- 图片下方还有分享图标，可以选择分享到QQ或微信好友；
- 点击左上方的箭头，可以返回之前的页面。
我们应用的每个功能/页面所需的技术为
- 登录界面
  - 下拉菜单选择国家，需要ComboBox
    - 下拉菜单的滚动循环问题：https://blog.youkuaiyun.com/azureternite/article/details/50116461
  - 输入手机号，需要TextBlock
    - https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.textblock.aspx
  - 输入帐号密码，需要PasswordBox
    - http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.passwordbox.aspx
  - 登陆按钮，需要对Button添加点击事件，实现点击按钮时跳转到主推送页面。
    - 如何用Button跳转到另一页面：https://tieba.baidu.com/p/4890536381
  - 登录与注册势必需要运用数据库知识：
    - 这个网址有简单的数据存储的知识：https://blog.youkuaiyun.com/judyge/article/details/50827458
    - 这个网站介绍后台与数据库的交互、引用啥的：https://blog.youkuaiyun.com/zhongyanfu0/article/details/51899302
- 主推送界面
  - 左上角的菜单，需要用NavigationView
    - https://docs.microsoft.com/zh-cn/uwp/api/Windows.UI.Xaml.Controls.NavigationView#methods-
  - 每一条推送内容，可以用StackPanel，构成上图片下文字的一个整体。
  - 对于心形收藏图标，可以利用ToggleSwitch来实现状态切换（可以改变图形形状成心形），同时将切换的状态结果同步到“我的收藏”当中。
    - 修改外观：http://help.outlook.com/zh-cn/140/mt299159.aspx
  - 所有的推送内容可以用ScrollViewer实现滚动浏览。
  - 每一条内容在点击之后都会跳转到另一个界面，可以对每一个StackPanel添加点击事件，实现点击时跳转到对应的详细介绍页面。
- 侧栏
  - 侧栏使用NavigationView，其中的每一项使用NavigationViewItem，为每一个NavigationViewItem添加点击事件，实现跳转到其他页面。
    - 为NavigationViewItem实现跳转到其他页面：https://blog.youkuaiyun.com/lohiaufung/article/details/61414592
- “我的收藏”页面
  - 所有收藏的内容可以用ScrollViewer实现上下滚动翻阅。
  - 对每一项内容使用StackPanel，构成图片和文字的一个整体。
  - 每一项内容通过左划，会产生三个可选按钮：删除、置顶、更多。　　
    - 这个网站可以实现对手势的监控以及对手势动作添加相应事件：https://blog.youkuaiyun.com/xuzhongxuan/article/details/53575015
  - 左上角的箭头实现返回功能：
    - 回退亦是跳转到其他页面，通过BackRequest来实现：https://blog.youkuaiyun.com/lohiaufung/article/details/61414592
- 详细介绍页面
  - 分享内容到QQ或微信好友的功能
    - 通过使用QQ SDK使我们在自己的代码里能将QQ客户端呼起来，并作相应的操作：https://www.cnblogs.com/zhxilin/p/4661910.html
    - 分享到微信应该与分享到QQ的原理差不多，微信SDK基本使用方法和基本原理：https://www.cnblogs.com/zhxilin/p/5005112.html
- 还有其他界面，但其他界面上面的功能在前面这几个界面当中基本都介绍到了，便不再赘述。
我们的采访视频为（视频地址）
http://v.youku.com/v_show/id_XMzUyOTQ3MDEzNg==.html?spm=a2h3j.8428770.3416059.1
http://v.youku.com/v_show/id_XMzUyOTQ3MjIxNg==.html?spm=a2h0j.11185381.listitem_page1.5!2~A
http://v.youku.com/v_show/id_XMzUyOTQ3MTcyMA==.html?spm=a2h0j.11185381.listitem_page1.5~A

根据采访的结果，我们更新后的设计为（只需描述更改的部分，要求同上）
- 可添加用户评价：每一个推送的内容在打开详细介绍的页面后，增添一个评价模块，用户可以对这个单品进行评价，修改后的页面如下：
  - 暂时没有找到讲述如何实现评论功能的网页，不过我想关键应该是将TextBlock内的内容上传吧。
- 搭配适合的上衣及鞋子等：每一条裤子都附带上何时单品的图片以及相应链接，用户也可以收藏这些单品。
  - 这个实现其实很简单，只要在每个详细介绍的页面中添加一个链接，点击即可切换到到搭配的衣服的详细介绍的页面。