浅析移动端UI设计和PC端UI设计.docVIP

浅析移动端UI设计和PC端UI设计 　　【摘 要】UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。 　　【关键词】UI；设计 　　中图分类号：J529 文献标志码：A 文章编号：1007-0125（2017）10-0168-01 　　科技飞速发展，互联网成为我们生活必不可少的一部分，UI设计也就成为了大势所趋，手机、电脑等在我们生活中如影随形，因载体的不同，移动端UI设计和PC端UI设计也有着一些异同。 　　首先，直观上来看，移动端和PC端的屏幕尺寸就有很大的差别，PC端的相对较大，而移动端的相对较小，所以设计时所要用的尺寸也就不同，注意事项也会有差别，同时分辨率、比例和倍率也有很大的差别。 　　屏幕尺寸的差异直接导致了界面空间大小的不同，同一界面，PC端则会呈现出更多的内容，网页空间很大，我们可以移动鼠标去想去的地方，手机界面只有那么大，我们只能通过上下滑动来读取更多的信息；设计时，就要考虑这个要素，针对不同大小的界面给予不同的布局，比如：在移动端上我们想设计一个按钮，按钮就要在非常明显的位置，以免浏览者四处寻找，通常情况下这个按钮设计在网页的底部，很多还会用一个区别于网页颜色的颜色块让按钮更加明显。或者在移动端和PC端上各放置一个广告，PC端一般网页主要内容的两侧居多，而移动端一般插在上一页与下一页中间作为隔断，或者直接覆盖整个页面，n秒后消失。 　　布局包含在视觉里，视觉设计上移动端和PC端虽然有很多的不同，尺寸不同、分辨率不同、布局不同……但万变不离其宗，排版布局一定要合理舒适，颜色搭配漂亮上档次，风格吸引人，让浏览者有好的体验。 　　其次，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，优秀的UI设计不仅要让软件变得有个性有品位，还要还要让操作变得简单、舒适、自由。 　　移动端和PC端的系统支持和操作习惯上存在差异，那么设计上也就存在区别。移动端的系统有iOS系统、Android系统、webOS系统等，每个系统都有自己的操作规范、交互方式和程序接口，而系统版本不断地在更新，这些系统的东西也都在各自发生着变化；PC端的系统有：Windows、Mac、Ubuntu、openbsd等，国内大部分使用Windows和Mac；相比之下移动端就要比PC端考虑更多的问题，比如兼容性。 　　另外移动端和PC端有着不同的操作习惯，在PC端上我们习惯用鼠标单击、双击、滑动等，在移动端上，我们都是用手指点击、上下滑动、长按、左右滑动和单指操作、双指操作、多指操作等，设计时就要根据不同的操作方式匹配不同的互动效果，让网页、软件界面更生动；比如：PC版的淘宝利用鼠标中键向下滑动，鼠标停留的地方的产品会直接放大，便于观看，而移动端的淘宝则没有这一功能；PC版的很多图片素材网站的推荐栏，把鼠标停在这一区域，滑动鼠标中键，推荐的内容就会一个个由右边向左边滑出然后放大，移动端则没有这一功能；移动端在浏览网页时，打开一则内容，浏览完毕可以右滑返回上一页，如果想要再次浏览可以左滑再次打开，PC端就只能点“X”关掉；移动端浏览网页时，如若文字或者图片看不清，就可以用两个指头由中间向两边滑动进行放大，PC端出现?似情况，文字可以调整网页整体的文字大小，图片可以点开查看。这些互动效果根据不同情况出现，让使用更加顺畅和舒心。 　　PC端和移动端采用不同的操作方式，所以精准也就存在区别，PC端的鼠标很小，精准度非常的高，但是移动端使用的是手指，手指比鼠标大得多，精准度也就没那么高了；所以在设计图标及按钮时，PC端的很多只有移动端的1/3或者1/4，这种大小对于鼠标来说是不成问题的，而手指就不行了，移动端的按钮和图标都比较大，且显眼，方便手指操作，不会点到别的图标上；比如在移动端看小说，“上一页”和“下一页”都位于页面底部，并且各占据页面底部的一半，而PC端的则非常小；PC端的Word里顶部一寸宽的栏里就有将近二三十的按钮和图标，这是移动端无法做到的。 　　根据PC端和移动端不同的操作方法和精准度，UI设计也就有不同的考量，设计出不同的适用于其本身的交互动作和图标、按钮等，PC端使用鼠标，点击时有“咔嗤、咔嗤”的声音，移动端点击时会有“叮、叮”的声音，同时按钮颜色会变深，同时还可以有震动，模拟按按钮的感觉，设计师设计此一类交互动作希望使用者的感受深刻且有意思，人给了动作，机器就会有相应的反应，让使用者有更好的使用体验。 　　PC端和移动端的的UI设计还涉及前台技术要求、平台设计规范等，这些要素的差别也是UI设计时要考量的，包括移动端还分为移动端手机应用界面设计和移动端网页设计，PC端分为PC端桌面应用软件界面设计和