界面设计的规范

  由于用户浏览网页的习惯或者是由于Web前端技术的限制或界面限制，网页设计和移动端界面设计不能任意进行天马行空的设计,需要遵守一些设计规范，下面为用户详细地进行介绍。

  1.界面不同

  PC端界面设计设计指的是计算机端网页的设计，移动端界面设计设计指的是手机端用户页面设计，因为屏幕尺寸不同，因此设计稿也会有很大不同。

  (1)操作方式。

  PC端的操作方式与移动端已经有了明显的差别，PC端使用鼠标操作,包括滑动、左击、右击、双击操作，操作相对来说单一, 交互效果相对较少;而对于手机端来说，包括点击、滑动、双击、双指放大、双指缩小、五指收缩和苹果最新的3DTouch按压力度，除了手指操作外还可以配合传感器完成摇一摇、 陀悬仪感应灯等,操作方式更加丰富,通过这些丰富的操作可以设计新颖、吸引人的交互设计

  (2)屏幕尺寸。

  随着时间的推移,移动端的设备屏幕逐渐增大，但是再大也是大不过PC屏幕的。PC端屏幕大,所以视觉范围更广，可设计的空间更大，设计性更强，相对来说容错度更高，有一-些小的纰漏不容易被发现。移动端设备相对来说屏幕较小，操作局限性大，在设计上可用空间显得尤为珍贵,在小小的屏幕上使用粗大的手指操作也需要在设计中避免元件过小过近

  (3)网络环境。

  当下不管是移动端还是PC端都离不开网络, PC端设备连接网络更加稳定,而移动端可能会遇到信号问题导致网络环境不佳,出现网速差甚至断网的问题，这就需要产品经理在设计中充分考虑网络问题，更好地设计相应的解决方案。

  (4)使用场景与使用时间。

  PC端设备的使用场景多为家里或者学校、公司等一些固定的场景,所以其使用时间偏向于持续化,在一个特定的时间段内持续使用，而移动端设备不受局限，所以它的使用时间更加灵活，时间更加碎片化，所以在操作上更偏向于短时间内可完成的。

  (5)文字的输入。

  对于文字输入，PC端一般使用文本框解决。在移动端中，因为手机屏幕尺寸及界面设计风格的原因,我们基本没有在手机上看到过PC端这样的展现形式，而是采用另起一页输入或者在文字后直接输入的方式，这些都是各个平台根据自身的特性选择的展现形式。

  (6)内容选择。

  在PC端,由于鼠标的灵活性，可以使用下拉菜单或者是单选按钮完成内容的选择。而在移动端，由于手指操作的便捷性,一般不采用PC端的选择方式，而是通过列表选择或者其他交互来完成。

  2.PC端设计规范

  前面为用户详细讲述了PC端与移动端设计上的区别，相对于移动端而言，PC端比较简单，本节主要为用户详细介绍PC端的设计规范，PC端网页设计画布宽度一般为1920px ，在设计时，网页高度随着需求变化，页面宽度有效范围应该控制在1000px~1200px，网页的

  宽度都在1000px左右。

  由于整体的计算机屏幕向大尺寸及高分辨发展，不少网页也正朝着更宽的方向发展。有效范围就是显示内容的地方, 比如打开一个网页后，除浏览器的工具栏和侧边栏，真正显示有用内容的地方。主体内容字体网页默认的是宋体，字体种类不要超过3种，配色不要超过3种,一般使用12px或14px。导航和标题可使用18px或者更大的字体,也可根据需要设计字体加黑或者变化颜色,避免大面积地使用加黑字体。

  字体之间的间距一般根据字体大小选择1~1.5倍,段间距可以选择加大点，正文的文字颜色为深灰色， 建议选用333333或666666。图片上使用文字或装饰,要确保文字清晰、易识别、整体搭配协调统一， 需要全屏显示的图比如banner可以设计成1920px，图片上的有效内容不得超过有效区域,比如图片上可能出现的按钮等,就是为了保证分辨率比较低的用户也能够看到有效内容。将图片设计成1920px，是因为开发人员会通过代码实现100%显示，界面设计设计只要保证有效范围就行。

  页脚部分的内容,比如许可证书、版权信息或者备案编号等, 各超链接之间统一使用"I” 或者空格,禁止使用加粗字体。

  上述规范只是实践中比较常用的一-些,并不是一成不变的,可根据实际情况进行调整，保证网页的美观性、协调性、实用性即可。

  3.移动端设计规范

  PC端的设计思路和移动端的不一样,移动端更多的是从用户体验来思考的，而且因为屏幕的限制尽量要去繁就简，PC端因为只有单击操作而且可视面大，所以布局流程和移动端不是一个思路。当你使用一个在移动端和PC端均可打开的网页时,就会发现两者有很大的不同。经过多年的发展，在设计上形成了很多规则，下面为用户详细介绍移动端界面设计。

  (1 )内容精简。

  手机界面交互过程不宜设计得过于繁杂，交互步骤不宜过多，可以提高用户操作的便利性,提高用户体验。

  (2)色彩鲜明。

  手机的显示屏比较小，设计人员需要在有限的屏幕下抓住用户的视线,需要色彩鲜明简洁的设计。手机支持的色彩范围有限,也要求设计做得简洁。PC端和移动端最大的区别就是尺寸有很大不同，PC端可以通过有效范围来解决这个问题,如当前的手机种类繁多，手机屏幕的大小、比例各异,并且手机的屏幕本身就小,因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性,这就存在着很多矛盾点。