web端与移动端产品设计区别

同一产品不同的终端,在设计上相同却又不相同。(20191008-1009)

一、在功能上web做加法,app做减法

web端更重视功能的齐全,能否直观的查看到或者使用更多的功能,所以一般在同一个页面,在界面设计允许的情况下,以功能齐全为优先,功能做加法。

移动端则重视功能分级,根据功能权重分级,权重最高的功能展示在主页面,次一级的功能可以通过“抽屉”,隐藏在主页面下,每个页面都是功能做减法。抽屉有上下,侧边抽屉方式。

二、交互上

2.1操作不同

web端用鼠标操作,鼠标单机,悬停,滚动等。移动端则是手指操作,点击,长按等

2.2交互形式上

web端数据列表常分页,信息输入多下拉。

移动端数据列表常下拉加载,信息输入多页面。

三、设备需求上

1.设备需求不一样

web端显示器大,窗口可以随意缩放。

移动端窗口小,用户操作多为线性流程,用户使用习惯多为碎片化时间。

2.反馈机制不一样

web端很少有主动反馈,一般也就进某些网站,弹出业务聊天窗口。

移动端则是可以推送消息,主动反馈普遍也明显,所以需要考虑到如何让用户打开推送,再考虑让用户喜欢推送。

3.网络机制

1.web端若要上网,一般是在有网的同一位置。除了极少数停电的情况

2.手机端位置不固定,都有过丢失信号无网络的情况,那就要考虑好无网络时,哪些数据是可看不可看的,而且,手机还要考虑在使用流量与wifi情况下的不同场景,比如电影,若在流量情况下,需要提示是否要连wifi了再看。

4.展示对象不一样

web端需要注意浏览器的适配。

移动端需要注意各手机型号的适配。

四、其他

移动端设计有几种信息架构,层级式、辐射式、套娃式、标签视图式、仪表盘式、筛选视图式。

他要遵循的6个原则有:

mvp原则:当前页面以展示当前核心内容功能为优先。突出重点

易用性:操作简单,上手快。

可扩展性:建立完善的产品信息架构,当迭代优化时能聚焦到功能点附近,不影响其他功能的显示与使用。

手势优先性:移动端不只是点击,手势操作更要优先考虑,提高使用便利性。并且各手势功能应该保持一致。

转换输入方式:移动端应减少文字输入的部分,多加入选择或者语音输入方式。

为中断而设计:移动端多为碎片化时间来处理事情,所以要考虑各个中断的场景

最后要注意,安卓与苹果的各方面也是不一样的,比如说封装性,比如说物理交互,截屏与返回,而且两种系统在设计的时候也有出入,比如字体大小,尺寸,使用单位、控件(导航,弹窗,动画,按钮,键盘,选择控件)等

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如何设计移动端产品? 大家好,我是IT修真院上海分院第4期学员,一枚正直、纯洁、善良,严谨理性与艺术智慧并存的PM...
    L_7fab阅读 720评论 0 3
  • 产品知识面考察 真题 例题分析 例题7.3 DAU代表 。 日用户点击量 月活跃用户数量 日活跃用户数量 网站...
    爱摄影的奥派阅读 12,415评论 4 46
  • 同学们,你在生活中你遇到过必须坚持到底才能胜利的困难吗?你要是怎样去做的呢?先来听听一个乌龟坚持不懈的故事吧。 在...
    要惠哲四五班阅读 167评论 0 0
  • 很多烤鸭不知道怎么写好雅思作文,读别人的范文觉得很好,但是读完就没有然后了,还是不会灵活应用! 雅思高分范文到底有...
    不爱睡懒觉的小芝麻阅读 225评论 0 0
  • 今天,与发小的促膝而谈深深的得知了计算机行业的可怕,正所谓每一个行业都有其复杂的地方,你如果不深深的投入到里面去,...
    ss毅阅读 804评论 2 4