手机UI设计与WebUI设计交互细节上的区别.docxVIP

手机UI设计与Web UI设计交互细节上的区别在UI设计领域，不管是Web UI还是手机UI都必须遵循着许多同样的规范，比如用户体验、部分技术原则，同时手机UI与Web UI的不同才是UI设计师必须领悟的，也是我们在这里所要说的重点。UI设计的本身也是为了满足用户体验效果，手机与web不同载体下，UI设计过程中交互细节上也存在着根本的区别。1、展示分辨率不同。手机等移动设备的屏幕分辨率最好的属iphone5为1100*640，而电脑已经进入宽屏化境界，淘宝、京东已经进入1600px宽度的境界了。UI控件的外观和布局在这两种分辨率下会呈现不同的效果。网页设计与手机UI，输出的区域尺寸不同，这同样是一个很大的区别，目前主流显示器的尺寸通常在19-24寸，而主流手机的尺寸则仅仅为3.7-4.7寸左右，甚至一些厂商生产出来的最大手机尺寸也不过7寸而已。2、点击精准度不同。对于WEB开发，国内的高端CMS（如逐浪CMS、风讯CMS）可以直接支持，有广大的厂商支持，而移动UI则很多时候是以APP应用客户端体现。在这样不同的系统支持下，触控点击与鼠标点击的精准度差别也相当大。鼠标的准确度是相当高的，哪怕是再小的按钮，对于鼠标来说，也是可接受的，点击的错误率不会很高。而手机的准确度相对而言就没那么高了，而且还要照顾一些肢端较大的用户，因此对于手机UI中的按钮，就需要一个比较大的范围人群研究，以减少错误率。在手机UI设计中，按钮也需要更加的明确，指向性更强，让用户知道什么地方有按钮，因为一旦用户点击，触发按钮的事件就发生了。3、界面空间不同。PC端网页上的按钮通常有四个状态：默认状态，鼠标经过状态，鼠标点击状态，不可用状态。而对于手机UI中的按钮，通常只有三个状态：默认状态，点击状态和不可用状态。因此，在网页设计中，按钮可以与环境以及背景更加和谐的融为一体，不必担心用户找不到按钮，因为当用户找不到的时候，会用鼠标在屏幕上乱画，这时按钮的鼠标经过状态就派上用场了。而对于手机UI，你需要考虑的是手机的使用环境，通常人们更加希望单手操作手机，因此，我们设计的按钮，通常更多的在屏幕下方，或左右手大拇指能控制到的区域内。4、操作方式不同。PC的WEB UI往往是用鼠标、键盘，而移动UI大多为触控。对于鼠标，通常我们有单击，双击，右键这几种操作，因此在网页设计中，我们可以设计右键菜单，双击动作等等。而对于手机UI，通常我们有点击，长按和滑动甚至多点触控，因此我们可以设计长按呼出菜单，可以设计滑动翻页或切换，可以设计双指的放大缩小，以及双指的旋转等。使用鼠标，可以说按钮在屏幕中的任何位置，对于操作的影响都不是很大，你可以轻松的移动鼠标到任何你想去的位置，点击任何你需要的按钮。因此我们可以看到大部分的网页，按钮都在边缘的一个狭小空间内。但很明显，我们不能把以上这两种操作习惯混用，想象一下如果手机应用中出现右键菜单，或者网页中出现多点触控操作，那么用户一定不会买账。这些不同造成的结果是，我们不能在网页设计和手机UI中，在同一屏里放入同样多的内容，一般来说，一个应用或是一个网页应用，总体的信息量是一定的，因此，在网页端，我们可以尽量多的把内容放进首页，而尽量避免更多的层级，一般类的网站，基本只有3级目录，而这个3级目录，是建立在第一级所产生的子目录足够多的情况下。在手机端，我们需要更多的层级，因为我们不能在第一个页面里放入无限多的内容，所以我们需要给用户一个更加清晰的操作流程，让用户可以更容易的知道自己在整体应用的什么位置，并且很容易的到达自己想去的页面或步骤。手机UI设计/手机UI设计/