pc ios android,PC、iOS、Android通用的交互设计

5da0d4b6fa429a80d1ab868acfc8eb50.png

本文作者@一大坨黄 供职@微博UDC设计中心 。近年来,在技术方式,网页自适应的兴起、微软Win8系统的发布,都在试图解决一个问题:让同一产品能在平板、PC等多平台下同时使用。

由此可见,替换掉冗余的多版本开发模式,发展通用性,是未来产品发展的一种趋势。因此,设计师也要在不同的平台规范和习惯中寻找共同点。

针对多平台这一问题,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个Mobile版本,或者iPhone 、iPad版本。这样做固然保证了单一平台的使用效果,但是他妨碍了用户对一家产品的连贯性认知。使用起来比较麻烦,同时要维护好几个版本。而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

如果你要说“因为屏幕大小不一样,需要针对性的设计才能最大化的利用屏幕空间。”我认为这是产品经理强加给用户的需求,因为在用研过程中,很少听到有用户的反馈是“我觉得这个地方空掉了,好浪费”。能考虑到最大化利用空间这点固然是好,但是,如果以牺牲用户对你家产品的操作习惯为代价,那就没有节操了。

作为交互设计师一枚,从产品开发者的角度来想,类是要分的,不过差别太大就不好了。因为,版本对于开发者的意义远远大于用户。从用户的操作行为来看,PC版、iPhone版、iPad版、Android版神马的… 差别不过是:通过触摸来完成操作,或是需要通过鼠标来操作。

要做到一款产品完全适用多个平台是不可能的,我们能做的是综合考虑多个平台,找出共性,让差异减少到最小。

在现有的产品产品设计中,已经看到多平台通用设计的模型了,例如,虽然Android平台自带物理返回键,但是在Android许多应用中仍保留了iOS的虚拟返回操作。

上文分析过,各平台的操作对用户来说,差别是通过触摸或是通过鼠标来操作。接下来,从用户角度出发,针对这两种操作行为总结几点设计中要注意的问题,保证多平台的通用性:

交互层面:

一个完整的交互事件包括:交互行为+交互对象+交互展现。宏观上多平台的交互通用性要从这三个方面考虑。至少确保一个产品的主要功能的交互差异不要太大。不过,具体问题还要具体分析,各个平台的独特优越性,还是要充分利用。

75be3815a8d74e80b2b21dd2e2ee9a2a.png

由于鼠标悬浮只适用于鼠标操作,而语音、亮度、位移只适用于触摸操,因此,一个要兼容多平台的产品,在主要功能上,要避开这些交互行为。而是采用两者的交集:鼠标点击、鼠标拖拽、获得焦点、键盘弹起和滚动滚轮。

主要功能的交互对象一致

所谓交互对象,就是交互动作的直接接收者,一般体现为一个按钮或者热区,要考虑多平台的通用性,就要从其位置和大小两个属性入手

触摸操作(iPhone、iPad、Android等)

位置:用户使用手机,多是单手握住手机底部,竖屏操作;而使用iPad多是双手握住机器中部,横屏操作。这两种场景下的易触位置如图

5ac4e9628445d5e1d0733f2132104d61.png

大小:根据iOS规范,理论上可触击元素的最小尺寸应该为44像素(约1/4英寸或7毫米)见方。

鼠标操作(PC)

根据费茨定律,PC端的交互对象描述如下:目标越大,所用时间越短。距离越长,所用时间越长。

由于PC鼠标箭头能够点击的区域可以很小且相对精确,PC端的约束较轻,所以这里只单向考虑了触摸操作平台,将主要功能置于屏幕下方,尺寸大于44像素(约1/4英寸或7毫米)见方的点击区即可。

主要功能的交互展现一致

所谓的交互展示就是交互行为作用在交互对象上产生的结果、反馈。两大操作形式上不做区分,只要技术支持,形式不限,重要的是平台实现效果的性价比。

实现多平台的通用性设计不仅需要交互层面的考虑,还需要视觉和技术层面综合考虑,由于本人从事交互,其他两项无法深入分析,找出共性。还请人心人士补充。

编后语:作者这段话很傲娇,特意为作者留下

作为一名普通用户,吐个槽~

虽然不是5岁的美国小萝莉,不过我还是受够了各种操作平台的分类,以及浏览一个网站或者使用一款产品要学多个版本的行为!!各种PC版、iPhone版、iPad版(所谓的HD)、Android版… 我想说,版你妹呀…

给作者打赏,鼓励TA抓紧创作!赞赏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/61618.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac设计的必备设计软件,看看你还差什么

作为设计师而言,人手一台苹果设备大概是人人向往的最佳配置。即使是刚入行业的小白,揣着苹果设备也能让自己看起来像那么一回事儿。不过,真正在设计工作中发挥作用的还是那些优秀的设计软件。让我们来了解一下下面的这些MacOS必备设计软件,看看你还差什么。 1.Figma …

推荐:产品经理都在用的交互软件

这篇文章主要针对还没有入职产品经理,但是对产品经理有兴趣,想要进行了解,以及已经入职,但是没有头绪的一些小伙伴们,为大家分享能够轻松上手的交互软件。 1.Pixso 第一款软件是我在进行交互设计的时候最喜欢使用的设…

MAC 终端美化教程(来个全套)

废话不多,上才艺(最终效果图) 帅不帅!!! 你说帅 按照此教程咔咔一顿操作后,你将获得以下装逼成就: 1、清晰好看的文字提示格式 2、带有自己最靓照骗的背景图 3、这个很重要&#xf…

html中pc端与移动端区别,盘点移动端和PC端交互设计上的区别

由于屏幕的大小,所以PC端和移动端在信息呈现上有很大不同。但是有的设计师简单地将区别理解为把页面做长一点,让用户多滑动一些。然而这样是不对的,并不能根本理解两者的不同。 终于把书写完,接下来恢复之前的更文频率。这篇文章我…

你一定要知道的5款交互原型设计工具

不管是小白还是大牛,绘制交互原型图是产品经理必备的技能;不管是实习生还是总监,都是从画原型图开始的。好的交互原型图,可以让开发不问一句,就能看得清清楚楚,开发得明明白白;差的交互原型图&a…

一文带你快速设计精美可视化大屏

一文带你快速设计精美可视化大屏 文章目录 一文带你快速设计精美可视化大屏👨‍🏫前言:什么是可视化大屏👨‍🔬内容1:可视化大屏设计原则和设计考虑👨‍⚖️内容2:可视化大屏设计流程…

实用交互设计工具大盘点

近年来,页面交互设计有了很好的发展,越来越受到人们的重视。如果你想成为一名页面交互设计师,除了对平面设计和产品设计有一定的了解外,更重要的是要知道哪个软件适合页面交互设计。本文将带您了解5款流行的页面交互设计软件。 1…

支持Mac电脑的五款设计软件,你都装好了么?

随着生活的进步,人们对于精神和生活的需求越来越高,随之而来的就是对于设计的需求。想从事设计行业的人也越来越多,不少UI设计师依靠自己的自学也能够设计出众多令人惊艳的作品。这里我就介绍几款支持Mac电脑的五款设计软件,有需要…

五款支持Mac的设计软件

大学一毕业,我就投身到UI设计行业里,作为非专业出身的设计师,我付出的努力比入行前预想的还要多,就我自己的经验而言,UI设计不仅要有设计功底,同时还要有用户思维,当然,掌握好几款合…

pc端产品设计

目录 一、pc端和移动端的区别 二、pc作用 三、pc端原型设计尺寸 四、网站结构 1、通栏 2、两栏 3、三栏 4、混合 5、瀑布流 五、pc页面设计 A、页面设计——单排导航 B、页面设计——多排导航(淘宝、携程) C、页面设计——banner D、页面设…

如何让安装微信

打开浏览器,输入链接 可以直接搜索微信官网,也可以直接点击这个链接 https://pc.weixin.qq.com/,把这个链接输入到框中,回车 如图,点击 “立即下载” 第三步 第四步 第五步 第六步 第七步 最后,点击“安装”…

调用SMS腾讯云短信验证码API的几个坑,及详细使用流程

前言 首先说下,几个坑已解决。准备说一下。使用的一些步骤 因为项目有一个短信验证码登录注册的,首先注册的是阿里的。但是审核没有审核通过,所以有注册了腾讯的 本来向截图一下阿里的,结果登录出错了,这里就不说了。…

短信发送接口超详细短信接口使用教程

进入到登陆界面 点击测试号码,添加号码 点击SDK这链接下载他的PythonSDK或者直接点击复制 https://github.com/cloopen/python-sms-sdk 下载SDK 点击下载提供的sdk 下载后解压出文件,使用pycharm打开文件按照要求安装对应的依赖库 在个人控制台上将信息…

CVPR2022会议论文,关于transformer的文献阅读笔记

Transformer文章阅读笔记 Vision Transformer With Deformable Attention. CVPR, 2022. 作者: Zhuofan Xia, Xuran Pan, Shiji Song, Li Erran Li, Gao Huang. Remark: Deformable Attention Transformer. 提出一种可变形自注意力模块,key …

论文阅读:A ConvNet for the 2020s

Abstract SWIN Transformer重新引入了几个ConvNet priors,使得Transformer实际上可以作为通用的视觉主干,并在各种视觉任务上表现出卓越的性能。 然而,这种混合方法的有效性仍然很大程度上归功于变压器的内在优势,而不是卷积的内…

年度汇总!一文了解2021 IEEE Transaction Winner奖19篇论文

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 哈喽艾瑞巴蒂,年关将近,又到了总结过去一年学术成果的时候了。 今天,我们整理了2021 IEEE Transaction 最佳论文合集!为大家的文献库添砖加瓦,注入科研…

OpenChatPaper | 你值得拥有的论文阅读小助手!~(粉丝投稿)

1写在前面 最近开始天气转暖了,不知道大家那里的树有没有绿,花有没有开。😝 旅游的人越来越多了,多到早上去吃个馄饨都要排队了,不过总得来说一个城市还是要有人间烟火气啊。🥲 之前给大家推荐了chatPDF来帮…

论文速读系列一:VoteNet、CBGS、BirdNet、StarNet、STD

如有错误,恳请指出。 参考网上资料,对一些经典论文进行快速思路整理 文章目录 1. VoteNet2. CBGS3. BirdNet4. StarNet5. STD 参考网上资料,对一些经典论文进行快速思路整理 1. VoteNet paper:《Deep Hough Voting for 3D Objec…

论文学习记录——iTPN(2023年CVPR)

论文题目:Integrally Pre-Trained TransformerPyramid Networks 论文地址:https://arxiv.org/pdf/2211.12735.pdf 代码地址:https://github.com/sunsmarterjie/iTPN 一.Introduction 近年来视觉识别领域两个比较重要的成果是:1.用…

记录学习GNU/Linux(1)

目录 1. 【林纳斯托瓦兹】简介 2. 什么是GNU/Linux? 2.1 GNU计划 2.2 GNU/Linux 3. Linux内核版本与发行版本 4. MBR(MS-DOS)主引导记录 5. 计算机系统启动流程 6. 图形界面与命令行模式切换 7. 切换用户 7.1 方式一 7.2 方式二 8. 查看当前目录文件信息…