当前位置:首页 » 网页前端 » web界面设计规范
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web界面设计规范

发布时间: 2022-02-27 05:22:23

① Web前端设计,举例说明页面常用的布局形式,具体要求及回答案例如图

摘要 你好:例如:http://www.aufe.e.cn/

② UI界面设计需要遵循哪些规范

交互和UI(界面)是两个体系。界面设计师本身是不需要代码的,但是很多公司为了节省人力成本要求设计师这么做,设计界面的时候每个icon、列表间距之类的都是设计师标注的,一般都有设计规范,移动端的根据安卓和ios系统来适配,web端根据各公司自己的栅格来。交互设计师的体系很复杂,他需要大量的时间来研究需求、分析竞品以及勾画框架和原型,在大公司里和团队成员多向沟通,小公司一般是由PM(产品经理)兼任的。

如果你想学设计,最好先考虑清楚自己要学交互设计,还是UI(界面设计),这两个不是单纯的包含与被包含的关系,而是分属两个不同专业,就目前来看,北京一带UI指的是界面设计,上海珠三角一带指的是交互设计,而UE用户体验设计偏向交互多些,地域不同划分也很乱,所以我不太清楚你所说的UI指的是什么,不过设计师需要标注规范,这个是肯定的。

③ 如何建立一套 UI 设计规范

学习,先把UI设计的知识都学会,在自己大脑中兴城一种自己的知识架构,然后就ok了
下面给你提供AAA教育的UI设计
第一阶段 :UI设计基础课程
初识UI: UI设计师的角色定义和价值体现,UI的含义、UI设计师的含义
手绘造型: 学习设计基础、字体、构图、手绘等基础技能,快速培养UI设计师的视觉敏锐度,和绘画能力, 二维造型方法,二维简约图标绘制原理与技法,各种材质质感表现
三维造型方法(物体的体积、结构、透视与光影表现)
色彩原理: 色彩属性、对比与调和、色彩的混色配置、设计色彩的表述体系,色彩的装饰美感及色彩的表现方法
第二阶段: 平面设计
设计软件应用: Photoshop:以Photoshop软件为工具,讲解书籍封面设计、海报设计、广告设计、影楼后期处理、包装设计、喷绘设计、画册设计、DM设计等企业实际工作中的具体项目。
I llustrator:以矢量图形绘制软件Illustrator为工具,讲解标志设计、字体设计、图形设计、企业VI设计、卡通形象设计等企业实际工作中的具体项目。
字体专项设计: 字体的分类和种类、字体的认识、各种场合字体的应用、形象时尚字体设计、字体标志及在广告设计中的实际应用
版式专项设计: 版式的概念、版式中的色彩应用、版式中的字体应用以及网页、书籍、报纸、画册、DM、海报等中的应用。
平面项目设计: 结合软件、色彩、字体及版式的学习,针对宣传单、折页、名片、海报及VI做专题设计,提升综合应用能力及平面UI设计能力。
第三阶段: 网页UI界面设计
WUI设计基础: 页面设计基本流程与设计规范的概念性讲解,重点了解WEB界面设计规范;网页配色技巧、色彩与构图的概念及技巧;网页导航与字版式设计
网页设计软件应用:Fireworks:软件的基本构成、矢量工具和位图工具、WUI用户界面及广告设计。
Dreamweaver:建立站点、添加页面元素、使用CSS样式及交互行为。
Flash :动画制做原理与技巧,典型WUI商业广告中的Flash技术与实现。
网页设计要素: 学习web网站设计基本要素,网站图标、按钮、广告banner、专题页设计等元素的具体设计方法
Web标准化布局: (X)HTML/HTML5语言:HTML语法与常用标签的详解,包括布局标签,表格标签,表单标签等。
CSS/CSS3层叠样式表: CSS语法与常用属性的详解,使用CSS对网站中各个模块进行修饰美化。
WUI项目实战设计: 以企业网站、电商网站及专题网页做实战项目设计,经过全流程设计,达到网页界面设计要求
第四阶段: 移动设备端UI设计
UE交互设计
1. 手机主题、界面与图标设计;
2. 拟物化与扁平化设计;
3. 系统性学习苹果IOS设计规范;
4. 系统性学习Android设计规范。
图标设计: 图标设计要素与技法,图标设计中的色彩应用,图标创意思想与方法,2D图标设计方法,3D立体图标设计方法,图标在界面中的设计应用,
移动UI界面设计:手机APP的用户使用场景,手机界面的布局与结构,手机界面中的视觉语言与控件详解,手机交互中的手势操作,APP产品的核心设计:导引设计,手机APP的色彩与情感化设计,手机APP整体视觉情感的提炼与传达,移动APP项目设计 iphone端APP实际项目实战
APP产品的需求分析—用户研究—原型
Android端APP实际项目实战
ipad端APP实际项目实战

④ web app 的设计规范和标准有哪些

WEB标准设计 :

网页结构 HTML XHTML XML DIV+CSS XHTML+CSS 表现层

网页表现 (Cascading Style Sheets) 样式表 页面皮肤

网页行为 ECMAScript DOM BOM

用户体验 (User Experience)

搜索引擎优化 (Search Engine Optimization)


App的标准

IOS:界面尺寸、图标尺寸、字体、颜色值

内部设计:1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式,如图

Aos:界面尺寸、图表尺寸、字体、颜色值

希望可以帮助你,望采纳,谢谢啦~~~~~~

⑤ 网页设计合适的页面尺寸是多少

网页设计选用的分辨率是72像素,使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计,一般采用全屏展示和两侧留白的方式。
全屏展示,是整个网站看起来大气一些,但是布局要合理安排,不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸,能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域,内容限时区域在好控制在1000px-1200px。

⑥ 公司后台管理web界面设计尺寸是多少

这个一般用百分比来设计,头部固定高度,左侧固定宽度,右侧用100%-左侧宽度,以达到最佳浏览效果
一般后台管理都会有表格编排问题,会涉及到很多参数,用百分比可以根据表格属性自动伸缩,而且不影响美观性
望采纳

⑦ Web 页面采用多大的宽度最合适

网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.

网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等.

高度:

高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。

宽度:

1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005

3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001

注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

所以如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.

如果是800的分辨率一般都设成770。但也有设成760的.

这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.

网页设计标准尺寸:

1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。

2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右

4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.

页面标准按800*600分辨率制作,实际尺寸为778*434px

页面长度原则上不超过3屏,宽度不超过1屏

每个标准页面为A4幅面大小,即8.5X11英寸

全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px

另外120*90,120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K

标准网页广告尺寸规格

一、120*120,这种广告规格适用于产品或新闻照片展示。

二、120*60,这种广告规格主要用于做LOGO使用。

三、120*90,主要应用于产品演示或大型LOGO。

四、125*125,这种规格适于表现照片效果的图像广告。

五、234*60,这种规格适用于框架或左右形式主页的广告链接。

六、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。

七、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。

八、88*31,主要用于网页链接,或网站小型LOGO。

广告形式 像素大小 最大尺寸 备注

BUTTON 120*60(必须用gif) 7K

215*50(必须用gif) 7K

通栏 760*100 25K 静态图片或减少运动效果

430*50 15K

超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果

巨幅广告 336*280 35K

585*120

竖边广告 130*300 25K

全屏广告 800*600 40K 必须为静态图片,FLASH格式

图文混排 各频道不同 15K

弹出窗口 400*300(尽量用gif) 40K

BANNER 468*60(尽量用gif) 18K

悬停按钮 80*80(必须用gif) 7K

流媒体 300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧)

网页中的广告尺寸

1.首页右上,尺寸120*60

2.首页顶部通栏,尺寸468*60

3.首页顶部通栏,尺寸760*60

4.首页中部通栏,尺寸580*60

5.内页顶部通栏,尺寸468*60

6.内页顶部通栏,尺寸760*60

7.内页左上,尺寸150*60或300*300

8.下载地址页面,尺寸560*60或468*60

9.内页底部通栏,尺寸760*60

10.左漂浮,尺寸80*80或100*100

11.右漂浮,尺寸80*80或100*10

⑧ web界面设计规范有哪些

一、网页尺寸
制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。
但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。
二、网页字体
字体设计的总原则是:可辨识性和易读性。
网页的文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体,英文则建议使用arial无衬线字体
常用的字号大小有以下几种:
12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px或者20px 适用于突出性的标题内容。

⑨ 什么是web前端开发标准

对于前端,官方的定义是网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。用自己的话来说,前端是网页给访问网站的人看的内容和页面,那前端开发顾名思义就是这些内容和页面中代码的实现。

现在的前端开发使得现代网页更加美观,交互效果显着,功能更加强大。所以现在的前端开发,运用到的知识面更加广泛,难度也更大。前端开发目前市场需求还是很大的,而且相对来讲比较容易,很适合学习。需要学习的内容也不少,我有全套web前端视频课资料可以发给你自学。

学习内容包括:

①计算机基础以及PS基础

②前端开发基础(HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架)

③移动开发

④前端高级开发(ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等)

⑤小程序开发

⑥全栈开发(MySQL数据库、Python编程语言、Django框架等)

⑦就业拓展(网站SEO与前端安全技术)

互联网行业目前还是最热门的行业之一,学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的,发展前景非常好,普通人也可以学习。

想要系统学习,你可以考察对比一下开设有相关专业的热门学校,好的学校拥有根据当下企业需求自主研发课程的能力,能够在校期间取得大专或本科学历,中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的,建议实地考察对比一下。

祝你学有所成,望采纳。

⑩ UI设计网页时,导航栏尺寸规格一般是多少

当前最流行的分辨率是1920*1080,在该分辨率下,页面中心区域为1200px以内都可以。在800*600分辨率下,导航栏尺寸规格保持在778px以内;在1024*768分辨率下,网页宽度保持在1002px以内。

如果没有指定的要求,以1920尺寸设计就好(这是目前最普遍的尺寸大小),前端开发人员会自行适配其他的分辨率。

(10)web界面设计规范扩展阅读:

UI设计网页方法

一、呈现更新颖的内容

设计师在进行网页ui设计的过程中需要注意的是,想要让自己的网页看起来更加与众不同,但也不必过于夸大,可以用一些新鲜的理念和不同的布局来吸引用户访问。比如以一种动态的方式,将信息呈现给用户,以此来赢得用户更多的关注。

二、增强元素的设计感

相对于普通的网页ui设计而言,具有较强的设计感的网页往往会更容易吸引用户的注意。任何一个具有创意的网站开发设计方案,都会把目光更聚焦在网页的基本布局和色彩搭配上,而这也意味着网页上一般存在很多种不同的元素。

三、激励用户更多操作

网站开发的设计制作的类型有很多种,面对不同的类型,要有特定的网页ui设计方案。给用户提供一个寻找目标的简易方法,这样用户就容易沉浸到页面中来,同时也增加了用户操作的几率。