透彻了解UI设计，从此系列帖开始！

       面试避坑必看:《设计师面试失败，绝大部分死在这50个问题上》

在设计网页界面时，首先要了解PC端的设计规范，才能将设计标准化，使其更符合网页UI设计的特点。本节将从PC端屏幕分辨率、网页设计尺寸大小、网页设计命名规范、以及网页设计中字体编排四个方面详细讲解。

　　1、PC端屏幕分辨率

　　PC端的屏幕分辨率指的就是计算机的屏幕分辨率，如图1-1所示红框标识。当下比较流行的屏幕分辨率分为1024×768像素、1366×768像素、1440×900像素和1920×1080像素等。在设计网页时要考虑计算机屏幕分辨率下的浏览器的有效可视区域。

　　图1-1 计算机屏幕分辨率

　　2、网页设计尺寸大小

　　网页设计尺寸大小指的是在设计界面时宽度和高度。尺寸一般以宽度1920像素进行设计，高度可根据内容调整设定，如图1-2所示。但是考虑到屏幕分辨率1024×768像素，在浏览器内有效可视区域宽度为1000像素，所以设置版心宽度为1000像素。

　　图1-2 网页设计尺寸大小

　　3、网页设计命名规范

　　作为一个完整的页面，往往包含很多部分，如logo、导航、Banner、内容主体、版权等。设计界面时，按照规定的准则命名图层或图层组合，有利于快速查找和修改页面效果，还可以大幅度提高切图和后期制作的工作效率。PC端网页UI设计常用英文名单词如表1-3所示。

　　图1-3 网页UI设计命名常用单词

　　4、网页设计中字体编排

　　网页界面中，字体编排设计是一种感性的、直观的行为。设计师可根据字体字号来表达设计所要表达的情感。需要注意的是，选择什么样的字体字号以整个网页界面的效果和用户的感受为准。另外，考虑到大多数用户的计算机里的基本字体类型。因此，在正文内容最好采用基本字体，如“宋体”“微软雅黑”等字体，数字和字母可选择“Arial”等字体。在网页界面设计中，字体字号和常用颜色应用如表1-4和1-5所示。

图1-4 字体选择

图1-5 常用颜色

友情提示：若你是对设计不太了解的小萌新，看完这个问题后，却对设计还有太多的疑惑（前途、薪资、技术含量、女生是否好找工作.....），强烈推荐你观看《设计萌新必看：学习UI设计必问的50个问题，从此系列贴开始》，相信能扫除掉你心目中90%以上的常见问题，请狠狠点击下方链接：http://bbs.itheima.com/thread-514779-1-1.html





精华推荐：

UI设计师如何自我介绍最有用！
如何向面试官介绍你的项目
从工作对接——告诉你UI设计师的工作流程
破解HR常见5种面试套路，助你轻松拿下Offer
初级设计师面试失败，大部分败在这50个问题上
设计面试——应聘机试题怎么破1
设计面试——应聘机试题怎么破2
设计面试——应聘机试题怎么破3

--------------------------------------------------------------------------------------------

如果有用，记得点赞留言哦~

【推荐阅读】：黑马论坛快回帖仅需这简单3步http://bbs.itheima.com/thread-513666-1-1.html

获取【UI设计视频教程资料】加绘儿：2168934524

--------------------------------------------------------------------------------------------

↑想看最新课程大纲，手机用户点此文字链即可跳到传智UI设计学科站↑

透彻了解UI设计，从此系列帖开始！

       面试避坑必看:《设计师面试失败，绝大部分死在这50个问题上》

在设计网页界面时，首先要了解PC端的设计规范，才能将设计标准化，使其更符合网页UI设计的特点。本节将从PC端屏幕分辨率、网页设计尺寸大小、网页设计命名规范、以及网页设计中字体编排四个方面详细讲解。

　　1、PC端屏幕分辨率

　　PC端的屏幕分辨率指的就是计算机的屏幕分辨率，如图1-1所示红框标识。当下比较流行的屏幕分辨率分为1024×768像素、1366×768像素、1440×900像素和1920×1080像素等。在设计网页时要考虑计算机屏幕分辨率下的浏览器的有效可视区域。

　　图1-1 计算机屏幕分辨率

　　2、网页设计尺寸大小

　　网页设计尺寸大小指的是在设计界面时宽度和高度。尺寸一般以宽度1920像素进行设计，高度可根据内容调整设定，如图1-2所示。但是考虑到屏幕分辨率1024×768像素，在浏览器内有效可视区域宽度为1000像素，所以设置版心宽度为1000像素。

　　图1-2 网页设计尺寸大小

　　3、网页设计命名规范

　　作为一个完整的页面，往往包含很多部分，如logo、导航、Banner、内容主体、版权等。设计界面时，按照规定的准则命名图层或图层组合，有利于快速查找和修改页面效果，还可以大幅度提高切图和后期制作的工作效率。PC端网页UI设计常用英文名单词如表1-3所示。

　　图1-3 网页UI设计命名常用单词

　　4、网页设计中字体编排

　　网页界面中，字体编排设计是一种感性的、直观的行为。设计师可根据字体字号来表达设计所要表达的情感。需要注意的是，选择什么样的字体字号以整个网页界面的效果和用户的感受为准。另外，考虑到大多数用户的计算机里的基本字体类型。因此，在正文内容最好采用基本字体，如“宋体”“微软雅黑”等字体，数字和字母可选择“Arial”等字体。在网页界面设计中，字体字号和常用颜色应用如表1-4和1-5所示。

图1-4 字体选择

图1-5 常用颜色

友情提示：若你是对设计不太了解的小萌新，看完这个问题后，却对设计还有太多的疑惑（前途、薪资、技术含量、女生是否好找工作.....），强烈推荐你观看《设计萌新必看：学习UI设计必问的50个问题，从此系列贴开始》，相信能扫除掉你心目中90%以上的常见问题，请狠狠点击下方链接：http://bbs.itheima.com/thread-514779-1-1.html





精华推荐：

UI设计师如何自我介绍最有用！
如何向面试官介绍你的项目
从工作对接——告诉你UI设计师的工作流程
破解HR常见5种面试套路，助你轻松拿下Offer
初级设计师面试失败，大部分败在这50个问题上
设计面试——应聘机试题怎么破1
设计面试——应聘机试题怎么破2
设计面试——应聘机试题怎么破3

--------------------------------------------------------------------------------------------

如果有用，记得点赞留言哦~

【推荐阅读】：黑马论坛快回帖仅需这简单3步http://bbs.itheima.com/thread-513666-1-1.html

获取【UI设计视频教程资料】加绘儿：2168934524

--------------------------------------------------------------------------------------------

↑想看最新课程大纲，手机用户点此文字链即可跳到传智UI设计学科站↑