UI基础汇总——网页设计规范

制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。

但是并不代表我们可以在整个画布上作图。

网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。

1、左右布局

灵活性强,UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整;

2、居中布局

中间的黄色部分为有效的显示局域,用于网站内容的展示;换句话说,两边均为留白,没有实际用途,只是为了适配而存在;

3.主流电脑屏幕尺寸有以下几种:

一般网站内容显示的区域为996px;国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。

字体设计的总原则是:可辨识性和易读性。

网页的中文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体

英文则建议使用TimesNewRoamn、Arial、ComisSansMS等无衬线字体

常用的字号大小有以下几种:

14px则适用于非突出性的普通正文内容。

16px、18px、20px、26px或者30px适用于突出性的标题内容。注意都是偶数原则,奇数像素会出毛边!

相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。

行间距:推荐以字体大小的1.5—2倍作为参考;

段间距:推荐以字体大小的2—2.5倍作为参考。

例如,当选用14px的字体时,行间距:21—28px;段间距:28px—35px。

正文字体颜色,保险起见,选用易读性的深灰色,建议选用#333333到#666666之间的颜色。

做网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏模块的设计至关重要。

除去任务栏,浏览器菜单栏以及状态栏的高度,剩下的是首屏的高度。

WindowXP的首屏高度平均值是580px

Window7的首屏高度平均值是710px

综合考虑到WindowXP已经逐渐退出市场,在实际操作时,我们以710px作为依据。

如下图所示,蓝色区域则是我们设计时需要着重考虑的首屏范围。

需要全屏显示的图片,宽度尺寸严格设计为1920px。

但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,即控制在1200px以内。

避免遇到小屏幕设备时,内容显示不全,而造成信息的遗漏的情况。

响应式设计指的是不同设备、屏幕、分辨率、操作方式(鼠标、键盘、触摸),保证信息在不同环境下表现一致,保证可交互可操作。

由于页面的宽度发生了变化,进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。

对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计)

无论基于哪种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点,制定了临界点之后就知道,当屏幕的宽度范围位于哪一个点的时候,我们的页面信息该如何展示。)

我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。

常见的主要有如下几种方式:

1、布局不变,即页面中整体模块布局不发生变化,主要有:

2、布局改变,即页面中的整体模块布局发生变化,主要有:

很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一临界点内(发生布局改变的临界点称之为临界点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

八、网页栅格

强调栅格化设计(grid-design)和栅格化布局(cssgrid)分开描述,是个人理解这完全属于两个不同的工作,前者针对网页设计师,而后者针对前端开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计,主要是为了提高网页的规范性。对于一些中规中矩的网站,或者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是一些规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。而栅格化布局,特指前端攻城狮使用的css框架,来实现页面的响应式布局。

响应式设计只是网页设计的一个折中方案,依赖于项目实际情况进行选择。对于设计师来说,如果没有必须的要求,可选择广义的栅格系统,并在此基础上自由发挥创意。

对于是否采用栅格化设计,采用下面几个案例说明一下:

(企业站之类-以介绍几种单一产品为主)

(功能型网站)

(不拘泥形式的设计形式)

针对这三个具有代表性的案例,栅格化设计是没有必要的。理由很简单,栅格的优点也是缺点,规范意味着统一也意味着限制,在以上的案例中,无需用栅格来限制设计师的灵感,毕竟这个社会,还是需要设计感的。

但绝大多数情况下,推荐栅格化设计。尤其是图文混排、版块很多的网站,栅格化设计会让内容杂乱无章的页面呈现清爽感。

关于栅格化布局,方案非常多,来看下面几个案例,我们都称之为栅格化设计。

(广义的栅格化系统-无间距的单元格)

(广义的栅格化系统-有间距的单元格)

对于不需要考虑页面响应(换句话说,和框架无关)的网页设计,原则可以简化成一句话:“由设计师自由决定”。

Grid-Guide自动生成的栅格系统(宽950-12列)

从图中可以看出,这三种方案列宽columnwidth和间距gutter不同,剩下的工作对于ui设计师来说就简单了很多,你可以把版式规范的png格式下载下来,作为你网页设计的基础版块,在此基础上进行列的划分。或者只是以这个参数为基础,重新建立参考线(我更推荐这种方式,尤其photoshopcc2017的新建参考线版面,装订线对应Gutter,列宽对应columnwidth)。我简单的拿版式规范做了个页面设计示意图,这就是基于栅格系统设计的优点,在划分列时,有理可依,有据可循。

【基于960grid系统的版块划分示意】

当然,既然是设计师,就可以感性的元素再多一些。比如,你希望更多的留白,就可以采用间距值较大的栅格版式,只要整个网站保持一个统一的版式即可。下图是当内容宽度为1200时生成的栅格系统,你还可以尝试很多方案,但MaxWidth的设定并不是那么随意,这个取决于网站的定位。

Grid-Guide自动生成的宽1180的栅格系统(24列)

至于高度和垂直间距,栅格化系统并没有统一的准则,设计师可以采用一些黄金分割之类满满的都是设计感之类的值,或者垂直间距与栅格系统的间距相同或是整倍,总之,也需要一个规范指导全站设计。

栅格系统的参数根据项目的实际情况,尽量建立10的倍数或8的倍数(googlematerialdesign推荐)。

在前面提到过,如果网站的需求是响应式的设计,这时,设计师们一定一定先问一下前端他们准备如何实现响应式布局,而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。

看完你也许会明白为什么涉及到栅格化布局需要前端来确定了,960gis的css框架给出了三种方案,24列16列12列,设计师要在这个基础上进行设计。一旦需要栅格化布局,意味着设计师自由发挥的空间再次缩减,只有在这三个方案上选一种。这些方案从何而来呢?很简单,你只要向前端索取他使用的框架的psd模板即可,里面参考线都是建好的。而前端一定会非常乐意帮你这个忙,理由很简单,你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量,皆大欢喜。比如下面这张,就是目前最新的Bootstrap4的psd文件的截图。

【Bootstrap4】

设计师也可以自给自足,一般这些css框架库都会提供下载途径。尤其是Bootstrap,作为成熟的框架,很多模板文件可以套用。栅格化布局以使用的css框架库为准则,让前端开发提供给设计师再好不过。

1、网站设计及基本框架结构

1.1Container“container“就是将页面中的所有元素包在一起的部分,这部分还可以命名为:“wrapper“,“wrap“,“page“.

1.2Header“header”是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header”(或pageHeader).

1.3Navbar“navbar“等同于横向的导航栏,是最典型的网页元素。这部分还可以命名为:“nav”,“navigation”,“nav-wrapper”.

1.4Menu“Menu”区域包含一般的链接和菜单,这部分还可以命名为:“subNav“,“links“,“sidebar-main”.

1.5Main“Main”是网站的主要区域,如果是博客的话它将包含的日志。这部分还可以命名为:“content“,“main-content”(或“mainContent”)。

1.7Footer“Footer”包含网站的一些附加信息,这部分还可以命名为:“copyright“.

2、需要注意的几点:

2.1尽量考虑为元素命名其本身的作用或”用意”,达到语义化。

不要使用表面形式的命名.如:red/left/big等。

2.3涉及到交互行为的元素命名凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:鼠标悬停::hover点击:click已浏览:visited如:搜索按钮:btn-search、btn-search-hover、btn-search-visited

THE END
1.网页设计所需用到的技术有哪些方法,科学依据解释定义摘要:网页设计中涉及多种技术方法和科学依据。需要掌握前端开发技术,如HTML、CSS和JavaScript,这些是构建网页的基础。涉及网页设计原则和用户界面设计原则,如用户体验、响应式设计等,以提高网页可用性和吸引力http://juliangyuanshu.com/post/34415.html
2.资深设计师带你了解WebUI设计原则,全程干货我们使用过的网站来说,几乎百分之九十的网站都一个共同点的特点,那就是简洁的界面,难道大家都喜欢极简主义吗?答案并不是。其实简洁性原则是有一定的原因的,设计师们普遍会从设计、内容、代码、网页加载速度等角度考虑一个网站的简洁程度。 点击图片即可免费获得论文辅助阅读工具网页设计界面模板 https://js.design/special/article/web-ui-design-principles.html
3.怎么设计网页?重点关注这10条设计原则网页设计需要充分考虑用户如何与界面进行交互,确保用户能够轻松完成在网页上的操作,给用户提供优秀的网页体验。然而,对于新手设计师来说要做到这点并不容易,幸运的是,有一些通用的网页设计规则可以帮助我们更好的做到。 这篇文章,Pixso设计师将为大家分享做好网页设计应该关注的10条设计原则,通过这10条原则可以帮助大家https://pixso.cn/designskills/how-to-design-a-webpage/
4.网页设计经验谈:常用的网页设计工具的收集介绍Web标准教程CSS网页设计有很多软件,本文介绍一下常用的一些 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 常常会听到群里或论坛里讨论哪个软件强大、哪个软件方便等等。其实这个无论是WEB前端开发还是WEB程序的开发,都离不开开发的工具,当然,现在 有不同的系统平台,对应不https://www.jb51.net/css/56944.html
5.手机界面设计是什么意思?详解手机UI设计原则尺寸规范及流程七、手机界面设计常用工具 1、Adobe Photoshop Adobe Photoshop是一种优质的网页设计工具。它有很多选项来创建和编辑您的Web模板。它适用于图像,您可以为您的网页设计创建图形。通过无限的颜色和渐变选项,可以制作出最佳的模板设计。它为您提供了一个空白的画布,让您的想象力生动。您可以按照自己的方式附加图像,移动元https://www.youhuaxing.cn/seojianzhan/17738.html
6.2021年10月自考00900网页设计与制作真题与答案自考摘要:?2021年10月自考刚刚考完,考生们最为关注的就是自考真题及答案了,全国2021年10月自考00900网页设计与制作真题已经公布,各位考生可以参考。 全国2021年10月高等教育自学考试网页设计与制作试题 课程代码:00900 1.请考生按规定用笔将所有试题的答案涂、写在答题纸.上。 https://www.educity.cn/zikao/317100.html
7.《界面设计》复习资料19.Sketch自带根据官方规范设计的IOS和Material Design组件库。20.Sketch专门为网页、移动端设计提供优化和支持。21.Sketch是一款能同时满足交互和视觉设计需求的工具。22.使用Sketch自带的Symbol可以很容易地在高、低保真原型图中进行切换。23.Sketch 对于团队说是一款效率很高的设计工具,意味着能快速推进团队创意到具体方https://www.wjx.cn/xz/260641939.aspx
8.网页界面设计论文范文格式塔理论的图-底规则不仅说明了主体从背景中分离出来的条件,而且指出了背景在一个格式塔中的重要作用。因此在网页设计中我们同样不能忽视背景的作用,图形是依赖于背景而存在的,要使主体感到存在,必然要有底将它衬托出来。因此无论在文字、色彩、图像,还是动画和视频方面都要坚持图底原则。https://www.gwyoo.com/haowen/74479.html
9.响应式设计介绍响应式开发语言与工具Adobe Edge Reflow可以用于响应式设计的可视化创作,提高通过HTML5和CSS3技术在不同设备上所进行的网页开发效率,,Reflow的主要功能是通过在设 计的过程中将所有的“断点”“模块”进行可视化的展示,让开发者可以在工具中一边进行间距的调试,一边测试展示效果。 https://www.open-open.com/lib/view/open1409797852353.html
10.网页制作基本原则是什么?photoshop爱好者在网页设计中,网页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性,影响观者对网站的印象。 在资讯类网站中,文字是页面中最大的构成元素,因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的,通常我们将字体指定为宋体,大小指定为12px,颜色要视背景色而定,原则上以能看https://www.cnblogs.com/hsp09/articles/3152827.html
11.网站设计正确的方法是应该从网站设计的美观、内容的翔实、在线沟通工具的运用,只有这样,才能为一个网站带来大量的人气,从而提高网站大的流量,进而实现企业的营销。 设计原则 自适应网页设计也称为 响应性的Web设计 -设计网页,提供一个很好的感知上的各种设备连接到互联网。自适应网络设计的目的是为不同设备的多功能网站。https://baike.sogou.com/v297911.htm
12.网页设计论文互联网技术的使用范围正在不断扩大,也促进了计算机网页设计得到大力发展,提高网页点击浏览量已经成为技术发展的主体方向。网页设计艺术性越来越高,设计时需要考虑的图像因素很多,要掌握对图像处理工具的运用技巧。计算机图像处理技术是网页设计技术的重要部分,最终网页设计的质量直接与其相关,设计者在设计之初就要考虑页面的整https://www.ruiwen.com/lunwen/6161857.html
13.网页设计的注意事项网页设计的工作目标,是通过使用更合理的颜色、字体、图片、样式进行页面设计美化,在功能限定的情况下,尽可能给予用户完美的视觉体验。下面是小编为大家整理的网页设计的注意事项,希望能够帮助到大家。 网页设计的注意事项 1、页面内容要新颖 网页内容的选择要不落俗套,要重点突出一个“新”字,这个原则要求我们在设计网https://www.yjbys.com/edu/meigongsheji/308312.html
14.运营管理年终工作总结(通用13篇)六、网站设计的原则 1、不同身份的用户看到不同的网站内容: 渔户、科技示范户、中层领导、站长按照不同身份,看到的网站内容不一样。 例如:渔民是普通的网页访问者,他们关心的是渔业生产销售消息、国际、国内渔业新闻、渔业的通知等;站长专门浏览自己的工作行事历、下层上传的工作汇报、总结等。实现不同身份的用户享https://www.unjs.com/fanwenwang/nianzhongzongjie/20221122100601_5994384.html
15.66个网页制作的技巧根据网站的优化原则,越简单的设计越好,而文字导航要比图片导航好的多,当然图片确实比文字漂亮,但是对于用户来讲,文字还是图片没有区别,而对于蜘蛛来说,文字更利于它们抓取,利于网站排名。 刻意追求个性化,增加网页本身的搜索难度,不仅仅是为难蜘蛛,也是为难用户,所以最好用文字导航,同时少用下拉菜单,避免用户查询之时https://www.cdcxhl.com/news/166389.html
16.「设计方法」UI工作流程指南(一)UI设计工作,包括APP设计、网页设计、小程序设计等方面,而一个产品完整的UI设计流程,是指拿到一个新的项目需求后,从设计思考开始,产品前期分析,设计产品,设计评审,用户测试,直至产品上线。我们的工作流程如下: 以上的流程都是与设计师密切相关的内容,我们的关注点不能只有视觉效果,孤立的设计容易脱离产品,反复修改,因https://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
17.12个最佳的响应式网页设计教程,轻松带你入门!响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则。而对于刚步入网页设计的新手设计师,如果你还不了解什么是响应式设计?如何制作响应式页面?这篇文章为大家提供了12个基础的响应式网页设计的教程,结尾还附上了个人最喜欢的3款响应式网页设计的工具, 轻松带你入门。https://cloud.tencent.com/developer/article/1387498
18.让表格更顺眼:快速帮表单选色配色的8种实用工具⑧ 看看别人(设计师、非机器)怎么配:Dribble 如果你之前没有接触过色码,也想在开始之前,大概知道一下表单配色的一般方法与“懒人原则”的话,可以直接往下阅读。 网页颜色的共通语言:色码 讲颜色,如果只能用形容词去描述,说你要深一点的红色、浅一点的红色、红中参杂一点灰度的颜色、莓红色、樱花色这样的沟通https://www.ragic.com.cn/intl/zh-CN/blog/269/make-forms-look-good-color-tools
19.网页设计心得15篇4设计主页及二级页面。 5实现网页间的链接 链接的过程其实很简单,主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。 6向静太网页插入动态效果 具体情况如下: 通过这半年的学习实践中 和老师的指导下以大量明晰的操作步骤和典型的应用实例,教会我们。使更丰富全面的软件技术https://www.cnfla.com/xindetihui/2661536.html
20.网页设计的五大原则是什么要点是什么网页设计的五大原则分别为统一、连贯、分割、对比及和谐。其中和谐不仅要看结构形式,而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通,产生心灵的共鸣。这是设计能否成功的关键。 统一,是指设计作品的整体性,一致性。设计作品的整体效果是至关重要的,在设计中切勿将各组成部分孤立分散,那样会使画面呈现出https://www.qinxue365.com/jsjzx/Web_Design/724727.html
21.网页设计需要了解的相关知识【网页设计】相关 IE无插件下网页全屏尺寸 1003*592 这个是在1024*768正常下的 1003*572 是在安装ALEX条件下的 关于网页尺寸的设置: 1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。 2、1024*768下,网页宽度保持在1002以内,就不会出现水平滚动条,高度则视版面和内决定。 http://www2.hnsyu.net/syxywlzx/jszc/wlxxaq/201012/t20101212_46968.html
22.移动设计初探:触屏网页设计客户端产品需根据机型独立定制界面;网页产品需分化版本,通过识别用户代理(User Agent)去指向不同URL。为了保证较高灵活性和低成本的重绘,在视觉设计时,建议用Photoshop的矢量路径工具(开启对齐像素模式),并应用图层样式绘制(快速复制图层样式)。注意像素虚化的细节。本文不作赘述,请查看《Designing for iPhone 4 Retinahttps://mobile.51cto.com/design-250020.htm
23.Apple最爱的极简主义网页,你也可以设计出来爱范儿运用恰当的话,极简主义可以使设计师更加关注「简化用户任务」。此外,它还有其他优点,比如网页加载速度更快,大小不一的各种设备上兼容性更好等等。 极简主义提倡的「简」,看起来的确简单,但透过现象看本质,「简而不减」。这篇文章,带你了解极简主义应该要注意的几个设计原则和案例。 https://www.ifanr.com/app/804597/
24.Web端工具如何设计「保存」功能?高手总结了这5个方面!数据保存是 Web 端工具的基础功能,一般在产品和技术框架设计之初就已经确定了数据保存的方式,后续不太会频繁更改。 正因为如此,在日常需求迭代中,设计师很容易忽略数据保存的过程,也很少质疑当前的保存机制是否合理,但是当需要设计新模块或产品时就会对保存有疑惑。 https://www.uisdc.com/save-design