写文意在学习移动端怎么构建。
APP移动版最主要的是:
1)抽象出业务实体,对其分类、分层和衔接。这个可参考微信和知乎
2)实体之间会发生哪些动作?对其分类和衔接。还有风控呢?
3)哪些动作产生的实体可以做成配置化,可以关了?
4)构建互动场所+升降规则,例如虾米的直播间或小红书的UGC+社区
5)充分利用通讯录、地点、手势、传感器这3个元素,同时考虑数据如何标准化。
--------------------------
1、业务实体之间怎么衔接
抽象出一共哪些对象,怎么合并和分层展示,哪些作为属性,哪些是包含或者共享关系。
抽象出有哪些对象动作产生的业务实体,怎么合并和分层展示
1)如果是对象
移动版:先把最底层的业务实体抽象出来,放在最顶部或最下方,功能架构是上下。再想哪些对象需要合并放到一起的?哪些需要分层?如朋友和分组分别怎么展示,朋友与分组的关系,怎么设置分组,分组与通讯录的关系,朋友与群的关系,群与通讯录的关系,这个可参考微信。商品与店铺的关系,店铺与商品的关系,这两个对象分别怎么展示。
PC版:最底层的业务实体抽象出来,放在最顶部,功能架构是上左或左右。对象之间不需要进行分层跳转,可以直接在当前页弹出。比如朋友手机号
2)如果是对象动作产生的实体
动作产生的实体可以一并归类到底部一个tab,可参考微信的“看一看”,“朋友圈”
还有的不重要的动作产生实体,这类实体是作为属性放在对象页上。如商品评价放在商品页,如活动放在商品页
移动版:不重要的动作直接砍掉
PC版:功能齐全
待整理ing.......
2、动作
记住常用操作是放在对象页下方鲜明显示的,非常用操作放在中间或者隐藏在最上方的,可参考微信
1)增
移动版:增加时,不同类型且排斥场景的增怎么展示?通过列表页或水平排列或者tab或分块或九宫格等展示,点击任意一行或者tab跳转至特定场景的增。注意,移动版会优先展示增加最常用的场景界面,参考QQ的加好友或者分组。还有一种情况,增加入口在其他分块,不在此列表,参考收货地址
PC版:增加时,不同类型且排斥场景的增怎么展示?通过任意摆放场景类型(如QQ加好友)或分块或九宫格或者下拉列表或者tab展示等,如泛微的新建流程。
2)删
移动版:单独删除且需要确认,和PC一样,都需要弹出框,但是移动版是长按出现删除;批量删除,可能和其他按钮合并到一个按钮,PC是直接展示
3)改
移动版:因为移动版基本都是展示而且非列表形式,很少改,如果有改,一般点击详情页才改。且改的时候,一般把最常改的操作显示到下方,其他操作放到更多
4)查
移动版查的时候,会考虑手机号,历史查询,所在地址等信息。且查的时候,查询条件会用收缩框或者横条tab等展示
5)撤销
移动版每个动作都要考虑撤销,比如搜索时要带取消或返回,消息免打扰采用开关形式;而PC版因为屏幕大,所以搜索时不用带取消,消息免打扰采用单选框形式
6)设为默认或批量管理
场景一般是配送地址等排斥类选择,PC和移动一致
批量管理参考虾米
7)置顶
移动版是置顶,PC是排序
8)分组
可参考微信的分组
9)收藏
10)赞
11)打赏
12)试听,试吃等
13)复制
14)下载
15)预览
16)扫描二维码
17)举报
18)邀请
19)私信、短信、关注、订阅、推送、回复、评论
20)设置权限
21)反馈
22)升级
23)想看
24)邀请
25)转发
26)分享
27)关注、订阅、推送、回复、评论
28)语音、视频、呼叫
3、控件
PC端:下拉或单选,有表格,textarea
移动端:顶部或底部导航tab,下拉菜单,选择器或列表,开关,ListView
待整理ing.......
4、交互方式
1)PC右击=移动版长按
PC右击是上下排列,而移动版长按是水平排列。如QQ聊天记录
2)点击
A、隐藏与展开
因为移动版空间小,所以如果要展示的信息或者操作多,就需要归类到一个图标里,点击图标后,隐藏的内容就展开了。比如QQ聊天或者微信
如果要展示的是关联对象,则移动版需要点击并跳转到关联对象页。而PC版可以在同一个页面展示显示其他对象。比如聊天时查看聊天记录
展开方式可以下移式,抽屉式右移(比如导航式目录)等
B、关闭与返回
PC版一般用关闭实现返回,而移动版本身就有返回或者用下移实现
C、内部与外部跳转、内部转发、分享
外部跳转之移动版:微信的跨平台链接跳转可以不脱离微信
内部跳转:PC通过右击/单击跳转再通过关闭至上一页,移动版单击跳转然后再通过返回或下移至上一页(用于业务实体之间跳转)
转发:对象之间可以相互转发,比如微信读书的转推
分享:移动版可以分享到其他平台(一般社交平台),PC版不能
D、选中
移动版:选中时图片会刷新
3)移动
对象可以向上移、下移、左移、右移。场景比如信息多时采用卡片式拖动,语音操作后想撤销就上移,删除时选择向右移动,下拉刷新或者返回(如虾米音乐详情页返回列表页)。还有的,魅族覆盖某消息时就上移,展示某消息时就下移。
4)置顶
移动版:页面内容太多,往下移时tab不动,置顶
5)双击
移动版双击图片放大,PC版是打开
6)放大与缩小
7)自动消失
PC和移动版都有提示框的自动消失
8)屏幕旋转
移动版要考虑屏幕旋转怎么办
9)悬浮
如播放列表下方显示要正在播放的歌或者tab
10)提示
在操作上方鲜明展示提示框,要求强制操作,如收藏上方加提示“感兴趣就存起来哦...";
操作中或操作后给出提示,如微信收藏和发送语音
4、多业务实体怎么展示?
1)列表(一行占满)
2)九宫格(一行占几个)
3)卡片(一行占几个,可拖动)
4)tab或者抽屉式导航+滑动不动
5)阶梯式(参考虾米的曲风流派)
6)专题形式(一行占满)
5、分类之间怎么跳转
1)下拉(参考虾米的曲风流派-》流行摇滚)
2)列表、九宫格、卡片、tab或者抽屉式、阶梯式
6、业务实体怎么展示?
一般是抽象出对象的属性+关联实体+操作。操作一般放在最下方。
1)该实体有很多属性或者关联实体
移动版:因为尺寸小,先抽象常用和重要的。常用且重要的属性或实体要放到顶部或底部tab,滑动时tab不动,可参考商品详情和评价。如果不常用或者不重要的,用分类控件或者九宫格或分块或列表等形式显示在一个页面,可参考微信钱包。
PC版:尺寸大,常用的属性或实体放在下方没事,可以通过拖动看。
2)该实体有很多操作
移动版:因为尺寸小,先抽象常用和重要的。常用的操作要放到顶部或底部tab,可看播放或加入购物车等。不重要的,则放在不显眼地方;
7、常用业务实体有哪些?
其实就是对象和动作
待整理ing.......
8、业务实体展示哪些属性
其实就是抽象出属性和关联实体
待整理ing.......
网友评论