A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 网页UI设计规范

© 绘儿 黑马粉丝团   /  2022-5-3 16:02  /  94 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文



透彻了解UI设计,从此系列帖开始!


在设计网页界面时,首先要了解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
--------------------------------------------------------------------------------------------


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马