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

西岭飘雪

也做了几年的UI和交互，网页设计和手机应用的界面，也都多多少少接触过，现在简单的谈一下两者之间的区别，个人愚见，欢迎各种不同意见。
     首先，网页设计与手机UI，操作的媒介不同，鼠标与手，这是一个很大的区别，而这个区别所造成的几点不同如下：
1.       精确度不同：
鼠标的准确度是相当高的，哪怕是再小的按钮，对于鼠标来说，也是可接受的（注意，仅仅是可接受），点击的错误率不会很高。
而手的准确度相对而言就没那么高了，而且还要照顾一些肢端较大的用户，因此对于手机UI中的按钮，就需要一个比较大的范围，以减少错误率（相信不少人咒骂过iphone的输入法吧，这就是个很好的例子）


2.       位置不同：
对于鼠标，可以说按钮在屏幕中的任何位置，对于操作的影响都不是很大，你可以轻松的移动鼠标到任何你想去的位置，点击任何你需要的按钮。因此我们可以看到大部分的网页，按钮都在边缘的一个狭小空间内。
而对于手机UI，你需要考虑的是手机的使用环境，通常人们更加希望单手操作手机（某品牌的7寸大砖头除外），因此，我们设计的按钮，通常更多的在屏幕下方，或左右手大拇指能控制到的区域内。


3.       操作习惯不同：
对于鼠标，通常我们有单击，双击，右键这几种操作，因此在网页设计中，我们可以设计右键菜单，双击动作等等。
而对于手机UI，通常我们有点击，长按和滑动甚至多点触控，因此我们可以设计长按呼出菜单，可以设计滑动翻页或切换，可以设计双指的放大缩小，以及双指的旋转等等。
但很明显，我们不能把以上这两种操作习惯混用，想象一下如果手机应用中出现右键菜单，或者网页中出现多点触控操作，那么最先骂娘的就是用户，然后就是设计师的老板了。


4.       按钮状态不同：
对于网页中的按钮，通常有四个状态：默认状态，鼠标经过状态，鼠标点击状态，不可用状态。
而对于手机UI中的按钮，通常只有三个状态：默认状态，点击状态和不可用状态。
因此，在网页设计中，按钮可以与环境以及背景更加和谐的融为一体，不必担心用户找不到按钮，因为当用户找不到的时候，会用鼠标在屏幕上乱画，这时按钮的鼠标经过状态就派上用场了。
而在手机界面中，按钮需要更加的明确，指向性更强，让用户知道什么地方有按钮，因为一旦用户点击，触发按钮的事件就发生了。
     然后，网页设计与手机UI，输出的区域尺寸不同，这同样是一个很大的区别，目前主流显示器的尺寸通常在19-24寸，而主流手机的尺寸则仅仅为3.7-4寸（请果粉原谅我没有把iphone的屏幕尺寸作为主流标准，因为它实在是太小了），甚至最愚蠢的厂商开发的大砖头，也不过7寸而已。
     这个不同造成的结果是，我们不能在网页设计和手机UI中，在同一屏里放入同样多的内容，一般来说，一个应用或是一个网页应用，总体的信息量是一定的，因此，在网页端，我们可以尽量多的把内容放进首页，而尽量避免更多的层级，一般类的网站，基本只有3级目录，而这个3级目录，是建立在第一级所产生的子目录足够多的情况下。
    在手机端，我们需要更多的层级，因为我们不能在第一个页面里放入无限多的内容，所以我们需要给用户一个更加清晰的操作流程，让用户可以更容易的知道自己在整体应用的什么位置，并且很容易的到达自己想去的页面或步骤。因此，map在手机UI中的重要性，要比网页更大。

独奏C大调

有道理，学习了！

抽翻我自己

这篇写的真好啊

lhjnn

手机UI中的按钮，通常只有三个状态：默认状态，点击状态和不可用状态.
补充一点：默认状态、点击状态、选中状态、不可用状态。

正版小一

支持一下啊

wangshan0304

没有做过手机的UI，但发现做这个要求更高呀，学习学习

ze_ping

支持一下

金元宝

必须支持

414639093

6# wangshan0304
是啊~尤其是客户端~

呢哦~

手机按钮还有个hold状态

8qt187464

新手学习啦~

sundry129

谢谢楼主~:handshake

gdcpjay

学习了！！！

ElizaLiu

受教了~~~~

cookiemon

非常有道理，两个平台都有不同的特性。坚决反对整体移植。:shutup:

个人补充一些个人的观点：
使用环境问题
掌上终端更多情况下，用户处于运动操作（如步行中，乘坐交通工具中等等），如界面设计涉及数据量较大展示，必须简化部分板块有别于web端。这部分主要涉及到前期框架与整体布局的UE（产品原型）部分。

ps 本人从UI过渡（兼容）ue中:handshake

惨绿

产品新手~~学习了

truemean2012

感谢分享！！