微信号:uedcss

介绍:产品学习者(前web前端开发追随者)

交互设计中Web UI与手机UI的区别

2014-04-03 11:48 uedcss整理

1、 精确度不同

鼠标的精确度是相当高的,哪怕是再小的按钮,对于鼠标来说,也是可以接受的(注意,紧急时可以接受),点击的错误率不会很高。

而手机的精确度相对而言就没有那么高了,而且还要照顾一些肢端较大的用户,因此对手机UI中的按钮,而需要一个比较大的范围,以减少错误率(相信不少人咒骂过iPhone的输入法吧,这是一个很好的例子)

2、 位置不同

对于鼠标,可以说按钮在屏幕的任何位置,对于操作的影响都不是很大,你可以轻松的移动鼠标到任何你想去的位置,点击任何你需要的按钮。因此我们可以看到大部分的网页,按钮都在边缘的一个狭小的空间内。

对于手机UI,你需要考虑的是手机的使用环境,通常人们更加希望单手操作手机(某品牌的7寸大砖头除外),因此,我们设计的按钮,通常更多在屏幕下方,而左右手大拇指能控制到区域内。

3、 操作习惯不同

对于鼠标,通常我们有单击、双击、右键这几种操作,因此在网页设计中,我们可以设计右键菜单,双击动作等等。

而对于手机UI,通常我们有点击、长按和滑动甚至多点触控,因此我们可以设计长按呼出菜单,可以设计滑动翻页或切换,可以设计双指的放大缩小,以及双指的旋转等等。

但很明显,我们不能把以上这两种操作习惯混用,想象一下如果手机应用中出现右键菜单,或者网页中出现多点触控操作,那么最先骂娘的就是用户,然后就是设计时的老板。

4、 按钮的状态不同

对于网页中的按钮,通常有四个状态:默认状态、鼠标经过状态、鼠标点击状态、不可用状态。

而对于手机UI中的按钮,通常只有三个状态:默认状态、点击状态、不可用状态、

因此,在网页设计中,按钮可以与环境以及背景更加和谐的融为一体,不必担心用户找不到按钮,因为当用户找不到的时候,会用鼠标在屏幕上乱画,这时按钮的鼠标经过状态就派上用场了。

而在手机界面中,按钮需要更加的明确,指向性更强,让用户知道什么地方有按钮,因为一旦用户点击,触发按钮的事件就发生了。

 

 
优设前端 更多文章 banner的故事 (转)腾讯网无障碍说明 母亲您辛苦了!-祝天下母亲们节日快乐! 利用@media screen实现网页布局的自适应 设计师看过后很有收获的12个网站
猜您喜欢 IDG资本合伙人:投资要做有耐心的“好人”,暴风是价值投资的代表例证 2016SANS网络威胁情报峰会议题(含PPT) 销售零日漏洞的超级黑客 生命 宇宙以及任何事情的终极答案 阿里云事业群招聘