🏕 参加独立开发者训练营(2021),开发一个完整的应用。了解详情 | 立即报名

独立开发者训练营内容演示(前端设计)

预览一下我们要一起开发的应用的前端设计部分。

外观

切换主题

我们在这次独立开发者训练营里面做的这个应用支持两种主题,一种就是现在你看到的深色主题,还有一种浅色主题,点击边栏上的这个小图标可以切换使用不同的主题。

另外应用可以根据用户系统使用的主题切换使用这两种主题。比如我们可以切换一下系统主题,切换成浅色主题,我们的应用也会自动切换到对应的浅色主题,再切换到深色主题,应用可以自动切换到深色主题。

页面布局

页面的布局主要划分成了三块,边栏、头部还有主体。左边是一个边栏,上面是应用的主要导航,可以快速访问应用的首页,热门的内容,接口的访问情况,还有创建内容页面。

页面上方是页面头部,这块区域主要显示的是应用的工具栏。滚动页面的时候不会影响到页面头部,它会固定在它原本的位置上。页头的下面是主体内容,这个区域会根据访问的地址切换显示不同的东西。

内容列表

在应用的首页会显示一个内容列表,这个列表是用 CSS 的网格系统做出来的,内容项目可以根据它的照片的方向,占用不同的区域。 加载内容列表项目的时候,会显示显示列表的骨架。

列表的分页用的是我们自己做的一个无限加载功能,也就是用户可以无限滚动列表页面,在需要的时候应用会请求服务端载入新的内容项目。直到没有可以显示的内容项目为止。

列表布局

应用的内容列表可以切换使用几种不同的布局,在应用工具栏上会有一个切换列表布局用的小图标,点击这些小图标可以切换到对应的布局。

这个列表布局切换器只会在需要它的地方显示,访问其它页面的时候,会自动隐藏它们。再回到列表页面的时候,又会自动显示出来。

内容页面

点击列表里的内容项目可以访问对应的内容页面。点击内容页面上的照片可以切换使用不同的布局。内容页面会根据之前访问的内容列表,在工具栏上显示一个内容导航,点击小箭头,可以按顺序浏览内容列表里的内容项目。或者也可以使用键盘上的左右方向键。

页面侧板

我们在应用里加了一个页面侧板,在它上面可以动态显示需要的内容,比如点击内容页面评论小图标的时候,在打开的页面侧板上面显示创建评论用的表单还有评论列表。

使用快捷键 ctrl 或者 command B,可以切换显示页面侧板。

点击内容页面下载小图标的时候,如果用户还没有购买这个内容的下载许可,也不是有效的订阅会员,在页面侧板上会显示支付界面,用户可以快速在这里完成支付,购买内容的许可,或者完成订阅。

用户如果可以下载原版照片,点击下载按钮打开的内容侧板上面会显示一个下载按钮,点击二维码,可以生成下载二维码。用户用手机扫描这个二维码可以把原版照片下载到手机上。

用户

微信登录

点击边栏上的用户图标,如果用户没有登录,打开的会是登录页面,用户可以在这里登录,也可以注册新的帐户。在登录页面,用户可以选择使用微信登录。

用微信客户端,扫一下页面上的二维码,确定一下。

如果用户的微信帐户还没有关联网站应用里的用户,会出现这个关联帐户用的界面,用户可以选择关联已有帐户,也可以创建并且关联新的帐户。

选择关联已有帐户,用户要输入网站应用的用户名,还有密码,再确定一下。服务端验证了用户身份,就会让用户登录。

完成绑定以后,下次用户如果再想使用微信登录,同样可以点击登录页面上的微信小图标,然后用微信客户端扫描二维码,确定以后,应用会自动让用户进入登录的状态。

用户帐户

用户登录以后,点击边栏上的用户头像,可以打开用户菜单,先访问一下用户发布的作品,在用户的个人页面会显示用户发布的作品,赞过的内容,用户发布的评论,还有回复的评论。

用户还可以管理自己的帐户,比如设置头像,修改用户名,还有密码。 点击这个选择头像,可以选择电脑上的图像作为用户头像。点击 提交 可以确定设置这个头像, 点击取消按钮,可以取消设置新的头像。

内容

内容发布

用户登录以后,点击边栏上的创建内容小图标,可以打开创建内容用的页面。用户可以直接把要上传的照片拖放到这个上传区域。

上传的进度会实时的显示在这个照片上面。完成以后,应用会显示一个提示,提醒用户照片上传成功,处理也完成了。

用户点击提交审核按钮,可以改变内容的审核状态。在这个页面上可以设置内容的标题,描述,可以给内容打标签。

把内容的发布状态设置成 公开,点击 更新,可以更新这个内容。

内容管理

应用的管理员,可以打开管理这个页面,他可以在这里管理自己发布的作品,也可以打开 管理 模式,这样就可以管理所有用户发布的作品了。

这里会出现用户刚才发布的这个作品,审核状态是审核中,点击这个对号小图标,可以把审核状态设置成通过,这样在应用的列表页面上,就会显示这个内容作品了。

再打开用户菜单, 管理, 选中要编辑的内容,打开页面侧板,可以在侧板上修改这个内容。

按住 ctrl 键,可以同时选中多个要编辑的内容。这样可以统一管理这些被选中的内容项目上的标签,或者修改它们的发布状态。

选中内容项目以后,按一下 command + delete 键,可以删除选中的内容。

接口统计

点击边栏上的统计图表小图标,在这个页面上会显示应用接口的使用情况。使用页面上面的这个过滤器,可以过滤出指定时间范围的接口使用情况。

点击不同的项目,图表会显示对应的接口的使用情况。 现在选中的是内容访问。 在另一个浏览器打开应用的内容页面,用方向键浏览内容页面。

你会发现这个统计数字还有图表会实时更新。

电子商务

购买许可

用户在内容页面点击下载小图标,如果没有购买这个内容的下载许可,会在页面侧板上显示购买下载许可的界面。点击支付小图标可以切换使用不同的支付方法。

或者也可以点击支付方法按钮切换使用不同的支付方法。

选择微信支付,用户可以使用微信客户端,扫一下页面支付用的二维码,立即支付,确定支付以后。 应用会实时更新侧板上显示的内容。

支付界面变成了下载界面,点击这个更新二维码按钮,可以生成一个下载用的二维码,用户可以用手机扫描这个二维码,把原版照片下载到自己的手机上。

或者可以直接点击下载按钮。可以把原版照片下载到电脑上。

打开用户菜单,点击 许可 ,在这个页面上用户可以浏览自己购买过的所有的下载许可。

点击二维码小图标可以生成下载用的二维码,点击照片缩略图,可以直接下载原版照片。

订阅会员

用户在内容页面,点击下载按钮,如果他没有下载许可,或者没有订阅,在打开的页面侧板上,用户可以选择订阅我们的服务。这里可以选择订阅的类型,可以是标准版或者专业版。点击支付小图标可以切换使用不同的支付方法。

用户订阅以后,在一年内可以下载应用里所有内容的原版照片。

打开用户菜单,点击 订阅,在这里用户可以管理自己的订阅,当前这个用户还没有订阅过,所以会显示一个订阅界面。在这里可以选择要订阅的类型。

点击 选择,会显示支付界面。当前选择的是微信支付,用户可以用微信客户端,扫一下支付二维码完成支付。

应用的服务端收到支付结果以后,会通知我们的客户端应用,应用的界面会实时的作出反应。点击 查看订阅,会显示用户的有效订阅。

用户可以在这里选择升级这个订阅,或者续订。

注意这个订阅剩余天数的变化,用微信客户端扫一下这个支付二维码,立即支付,再确定一下。 支付完成以后,应用界面会实时更新,你会发现这个订阅的剩余天数会有变化。

再试一下升级,点击升级,用微信客户端扫一下支付二维码, 立即支付,再确定支付。

完成支付以后,支付的界面会实时变化,显示现在用户的有效订阅是一个专业版的订阅。

用户拥有了有效的订阅以后,再访问一下之前的那个内容,点击下载按钮,在打开的内容侧板上,就会显示下载界面了。点击下载按钮,可以下载这个内容的原版照片。

订单管理

现在登录的应用的管理员,打开用户菜单,选择 订单。在这里可以查看用户相关的订单。

管理员可以打开管理模式,这样这里显示的就是应用里的所有用户的相关订单。 这里可以按时间范围过滤一下。

或者可以打开页面侧板,在这里会出现更多的过滤选项。比如过滤出状态是完成的订单。

点击订单项目,会显示订单的详情。

来体验一次设计与开发的综合实践之旅吧!参加《独立开发者训练营(2021)》,立即报名

目录

应用与内容

代码量与内容分布

演示

独立开发者训练营内容演示(前端设计)

介绍

宁皓独立开发者训练营(2021)

评论



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

13198
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点