预览一下我们要开发的应用的前端设计部分。
外观
切换主题
我们在这次独立开发者训练营里面做的这个应用支持两种主题，一种就是现在你看到的深色主题，还有一种浅色主题，点击边栏上的这个小图标可以切换使用不同的主题。
另外应用可以根据用户系统使用的主题切换使用这两种主题。比如我们可以切换一下系统主题，切换成浅色主题，我们的应用也会自动切换到对应的浅色主题，再切换到深色主题，应用可以自动切换到深色主题。
页面布局
页面的布局主要划分成了三块，边栏、头部还有主体。左边是一个边栏，上面是应用的主要导航，可以快速访问应用的首页，热门的内容，接口的访问情况，还有创建内容页面。
页面上方是页面头部，这块区域主要显示的是应用的工具栏。滚动页面的时候不会影响到页面头部，它会固定在它原本的位置上。页头的下面是主体内容，这个区域会根据访问的地址切换显示不同的东西。
内容列表
在应用的首页会显示一个内容列表，这个列表是用 CSS 的网格系统做出来的，内容项目可以根据它的照片的方向，占用不同的区域。 加载内容列表项目的时候，会显示显示列表的骨架。
列表的分页用的是我们自己做的一个无限加载功能，也就是用户可以无限滚动列表页面，在需要的时候应用会请求服务端载入新的内容项目。直到没有可以显示的内容项目为止。
列表布局
应用的内容列表可以切换使用几种不同的布局，在应用工具栏上会有一个切换列表布局用的小图标，点击这些小图标可以切换到对应的布局。
这个列表布局切换器只会在需要它的地方显示，访问其它页面的时候，会自动隐藏它们。再回到列表页面的时候，又会自动显示出来。
内容页面
点击列表里的内容项目可以访问对应的内容页面。点击内容页面上的照片可以切换使用不同的布局。内容页面会根据之前访问的内容列表，在工具栏上显示一个内容导航，点击小箭头，可以按顺序浏览内容列表里的内容项目。或者也可以使用键盘上的左右方向键。
页面侧板
我们在应用里加了一个页面侧板，在它上面可以动态显示需要的内容，比如点击内容页面评论小图标的时候，在打开的页面侧板上面显示创建评论用的表单还有评论列表。
使用快捷键 ctrl 或者 command B，可以切换显示页面侧板。
点击内容页面下载小图标的时候，如果用户还没有购买这个内容的下载许可，也不是有效的订阅会员，在页面侧板上会显示支付界面，用户可以快速在这里完成支付，购买内容的许可，或者完成订阅。
用户如果可以下载原版照片，点击下载按钮打开的内容侧板上面会显示一个下载按钮，点击二维码，可以生成下载二维码。用户用手机扫描这个二维码可以把原版照片下载到手机上。
用户
微信登录
点击边栏上的用户图标，如果用户没有登录，打开的会是登录页面，用户可以在这里登录，也可以注册新的帐户。在登录页面，用户可以选择使用微信登录。
用微信客户端，扫一下页面上的二维码，确定一下。
如果用户的微信帐户还没有关联网站应用里的用户，会出现这个关联帐户用的界面，用户可以选择关联已有帐户，也可以创建并且关联新的帐户。
选择关联已有帐户，用户要输入网站应用的用户名，还有密码，再确定一下。服务端验证了用户身份，就会让用户登录。
完成绑定以后，下次用户如果再想使用微信登录，同样可以点击登录页面上的微信小图标，然后用微信客户端扫描二维码，确定以后，应用会自动让用户进入登录的状态。
用户帐户
用户登录以后，点击边栏上的用户头像，可以打开用户菜单，先访问一下用户发布的作品，在用户的个人页面会显示用户发布的作品，赞过的内容，用户发布的评论，还有回复的评论。
用户还可以管理自己的帐户，比如设置头像，修改用户名，还有密码。 点击这个选择头像，可以选择电脑上的图像作为用户头像。点击 提交 可以确定设置这个头像， 点击取消按钮，可以取消设置新的头像。
内容
内容发布
用户登录以后，点击边栏上的创建内容小图标，可以打开创建内容用的页面。用户可以直接把要上传的照片拖放到这个上传区域。
上传的进度会实时的显示在这个照片上面。完成以后，应用会显示一个提示，提醒用户照片上传成功，处理也完成了。
用户点击提交审核按钮，可以改变内容的审核状态。在这个页面上可以设置内容的标题，描述，可以给内容打标签。
把内容的发布状态设置成 公开，点击 更新，可以更新这个内容。
内容管理
应用的管理员，可以打开管理这个页面，他可以在这里管理自己发布的作品，也可以打开 管理 模式，这样就可以管理所有用户发布的作品了。
这里会出现用户刚才发布的这个作品，审核状态是审核中，点击这个对号小图标，可以把审核状态设置成通过，这样在应用的列表页面上，就会显示这个内容作品了。
再打开用户菜单， 管理， 选中要编辑的内容，打开页面侧板，可以在侧板上修改这个内容。
按住 ctrl 键，可以同时选中多个要编辑的内容。这样可以统一管理这些被选中的内容项目上的标签，或者修改它们的发布状态。
选中内容项目以后，按一下 command + delete 键，可以删除选中的内容。
接口统计
点击边栏上的统计图表小图标，在这个页面上会显示应用接口的使用情况。使用页面上面的这个过滤器，可以过滤出指定时间范围的接口使用情况。
点击不同的项目，图表会显示对应的接口的使用情况。 现在选中的是内容访问。 在另一个浏览器打开应用的内容页面，用方向键浏览内容页面。
你会发现这个统计数字还有图表会实时更新。
电子商务
购买许可
用户在内容页面点击下载小图标，如果没有购买这个内容的下载许可，会在页面侧板上显示购买下载许可的界面。点击支付小图标可以切换使用不同的支付方法。
或者也可以点击支付方法按钮切换使用不同的支付方法。
选择微信支付，用户可以使用微信客户端，扫一下页面支付用的二维码，立即支付，确定支付以后。 应用会实时更新侧板上显示的内容。
支付界面变成了下载界面，点击这个更新二维码按钮，可以生成一个下载用的二维码，用户可以用手机扫描这个二维码，把原版照片下载到自己的手机上。
或者可以直接点击下载按钮。可以把原版照片下载到电脑上。
打开用户菜单，点击 许可 ，在这个页面上用户可以浏览自己购买过的所有的下载许可。
点击二维码小图标可以生成下载用的二维码，点击照片缩略图，可以直接下载原版照片。
订阅会员
用户在内容页面，点击下载按钮，如果他没有下载许可，或者没有订阅，在打开的页面侧板上，用户可以选择订阅我们的服务。这里可以选择订阅的类型，可以是标准版或者专业版。点击支付小图标可以切换使用不同的支付方法。
用户订阅以后，在一年内可以下载应用里所有内容的原版照片。
打开用户菜单，点击 订阅，在这里用户可以管理自己的订阅，当前这个用户还没有订阅过，所以会显示一个订阅界面。在这里可以选择要订阅的类型。
点击 选择，会显示支付界面。当前选择的是微信支付，用户可以用微信客户端，扫一下支付二维码完成支付。
应用的服务端收到支付结果以后，会通知我们的客户端应用，应用的界面会实时的作出反应。点击 查看订阅，会显示用户的有效订阅。
用户可以在这里选择升级这个订阅，或者续订。
注意这个订阅剩余天数的变化，用微信客户端扫一下这个支付二维码，立即支付，再确定一下。 支付完成以后，应用界面会实时更新，你会发现这个订阅的剩余天数会有变化。
再试一下升级，点击升级，用微信客户端扫一下支付二维码， 立即支付，再确定支付。
完成支付以后，支付的界面会实时变化，显示现在用户的有效订阅是一个专业版的订阅。
用户拥有了有效的订阅以后，再访问一下之前的那个内容，点击下载按钮，在打开的内容侧板上，就会显示下载界面了。点击下载按钮，可以下载这个内容的原版照片。
订单管理
现在登录的应用的管理员，打开用户菜单，选择 订单。在这里可以查看用户相关的订单。
管理员可以打开管理模式，这样这里显示的就是应用里的所有用户的相关订单。 这里可以按时间范围过滤一下。
或者可以打开页面侧板，在这里会出现更多的过滤选项。比如过滤出状态是完成的订单。
点击订单项目，会显示订单的详情。
来体验一次设计与开发的综合实践之旅吧！参加《独立开发者训练营（2021）》，立即报名 →
评论
3 年 3 周 以前