PC端UI设计尺寸规范

1、在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值width:150px，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。

2、内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。 注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕。

3、然后在css中 有关margin和padding属性直接用百分比来表示 页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的。

4、一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得不堪入目，这是个很值得注意的问题。 问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。

5、在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

6、浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了

卡片式设计从外观上看，整个卡片呈封闭式设计，因而，卡片式网页制作时，保证整个卡片的内容是一个完整的小整体，即一颗卡片讲述一个核心内容，让用户便于阅读理解，也是为了不让内容混淆，内容更清晰。

卡片设计的细节问题

1、保证整个卡片可点击性，用户不管点击哪一部分的内容都能进入卡片页面查看更具体的内容，能有效增强卡片的实用性，这种设计不管是在PC端网站还是移动端网站都是适用的。

2、卡片的的边框可适当增加阴影，让卡片更加立体，视觉上更突出，阴影颜色的选择要与卡片内的背景颜色相搭配。

扩展资料：卡片式网页制作内容，首先内容要适量，表达要简洁，才能有效保证整体的可读性。其次是内容的排版，上层一般是图片，且面积占比较大，下面一般还有一到两层内容，以文字与按钮设计为主。图片是卡片内容的重点，在图片选择上，要保证图片有意义，以及图片的色彩搭配合理，提升设计质感。

文字表达要简洁，突出重点，并且用户易于理解，在文字的设计上，选用可见性较强的字体、尺寸以及颜色，提升用户的阅读欲望。

按钮设计以需求为主，或是提供有高转化率的按钮，加上相应的微交互，让体验更丰富。

UI是User Interface的简称，UI设计就是指对软件的人机交互、操作逻辑、界面美观的整体设计。比较直白的说明就是，当我们打开微信、操作点击任意一个功能，出现在你眼前的界面都是属于UI设计。

一个优秀的UI设计可以体现出个性和品味，最主要的就是让软件在操作时舒适简单、自由，充分体现软件的定位和特点。UI设计一般分为三个方面，图形设计，交互设计，用户测试体验，我们所说的UI设计师就是，软件图形设计师、交互设计师、用户研究工程师。

UI设计构是成现在的智能生活不可或缺的一部分，平面设计不是我们感觉的那种单纯美术工作，而是软件产品的产品“外形”设计。现在国内目前大部分的UI工作者都是这个工作内容。而交互设计主要就是让用户操作起来更加简单、直接，一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。

用户测试体验顾名思义就是测试交互设计的合理性及图形设计的美观性，主要以目标用户问卷的形式衡量UI设计的合理性。主要是了解用户现在需要什么样的体验以及界面，从而方便用户使用。毕竟图形设计，交互设计都是为了终端用户的感受更舒适，更便于操作。想要成为一个UI设计师，除了熟练使用各类软件，还需要具备色彩、排版、心理学、数据分析等等这一系列的软实力，同时还要清楚的知道，软件的操作技巧不能决定你走多远，但它在一定程度上决定了你能不能走这条路。不过从应用领域来看，UI设计的前景还是非常不错的。