美文网首页商业空间思考力
设计之网页版与移动版区别

设计之网页版与移动版区别

作者: 徐薇薇 | 来源:发表于2018-05-14 15:38 被阅读6次

    写文意在学习移动端怎么构建。

    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.......

    相关文章

      网友评论

        本文标题:设计之网页版与移动版区别

        本文链接:https://www.haomeiwen.com/subject/xyckdftx.html