ui网页设计规范

ui网页设计规范有哪些？网页ui设计注意事项有哪些？

　　现在互联网行业是非常发达的，互联网行业带动了很多企业的发展，让很多人找到了工作，如果你设计比较优秀可以参加ui网页设计的工作，下面faceui的小编就给大家说说ui网页设计规范，希望对你有帮助。

　　ui网页设计规范有哪些？

　　1.网页规范：

　　网页宽度为1920 高度不限，有效可视区：950px~1200px宽度，具体尺寸根据项目，客户要求以及用户群决定。

　　首屏高约为700-750PX 主体内容区域1200。

　　文档建立：文件宽度为1920PX 高度不限，RGB颜色模式， 分辨率72。

　　2.字体规范：

　　中文常用字体：宋体-字体样式(无)、微软雅黑-字体样式(Windows LCD)、苹方(MAC)。

　　英文常用字体：Times NewRoman、Arial、sans。

　　(1)中文字常用字号：

　　导航文字大小：14px、16px、18px、20px;。

　　正文内容：12px、14px;。

　　标题：22px、24px、26px、28px、30px;。

　　辅助信息：12px、14px。

　　(2)英文字常用字号：

　　标题和内容文字10-16px;中英文结合最小12px;全英文网站最小10px(比如底部信息)。

　　3.网页页面等级

　　(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个；

　　注意：网站的首页只能有一个。

ui网页设计规范（图片来自网络）

　　(2)二级页面：从首页点击进入之后的页面叫做二级页面；

　　(3)三级页面：从二级页面点击进入的页面；

　　4.网页常见板块划分

　　(1)头部区域-----top或header；

　　Logo、主导航、搜索、注册、登录、版本等信息。

　　(2)主视觉区----banner；

　　展示公司品牌形象、新品宣传、主题活动等轮播大图。

　　(3)主要内容区---main；

　　新闻动态、产品与服务、公司介绍等。

　　(4)底部信息区---footer；

　　网站地图、联系我们、版权信息、ICP备案号等信息。

　　5.网页的颜色

　　(1)来自于LOGO的颜色；

　　(2)来自于环境的颜色；

　　(4)来自于产品的颜色；

　　(5)公式：随意选择四个颜色，调整四个颜色的明度和直线色相；

　　(6)选择一个符合你产品的任意颜色图片，然后在这个图片中提出出来四中颜色，来作为网页的主色调 (服装，饰品、化妆品类居多)。

　　6.网页设计需注意的问题:

　　(1)高清大图，图片不能有水印；

　　(2)有图片的位置最好配有文字说明不要大篇幅的图片摆放；

　　(3)文字排版，标点符号不能在一行的第一个，不要一个文字为独立的一行；

　　(4)如果色块中有文字，文字必须在色块的中心，不能上或者下留有太多空白空间；

　　(5)如果箭头朝下必须有下拉菜单，如果下拉菜单是合起的状态，箭头朝右；

　　(6)banner不能是现成的图片，需要进行合成和设计，也需要有文字的极差关系和对比；

　　(7)产品分类中必须有不同的产品体现；

　　(8)在每一个板块中都必须体现明显的连接；

　　(9)在网页设计中不要有重复图片，每个图片必须有一个部分是完整的；

　　(10)图片素材不要直接用设计好的图片；

　　(11)在板块中不要有纯图片的设计，一定有文字解释，有链接；

　　(12)一个版块内的图片要选择同一种类型；

　　(13)图片距离文字不要过近。

　　网页ui设计注意事项

　　一、布局要简洁

　　这点和网页设计的理念比较接近，无论是考虑到用户的浏览体验还是操作体验，都应当尽量将整体的布局设计简单化，让用户可以一目了然。

　　以左树右表的结构布局而言，左侧的操作区域功能名称要准确，层级不应太繁琐，功能点要方便于用户操作；右边的信息展示区域更应当尽量将内容充分展示，尽量避免层级过深，如果应特殊需求需要用户做出跳进跳出的操作，那么应当考虑给予一些友情提示，别把用户弄晕。

ui网页设计规范（图片来自网络）

　　这里要强调一个地方，那就是顶部设计，尽可能的把高度缩小，不宜使用falsh动画或其他特效，就静态展示即可，这样不影响系统的运行速度而且相对整体布局更加清爽。

　　二、色彩运用

　　网页UI的色彩运用倾向于少而精，少代表了整体页面的颜色使用，千万不要做得花里胡哨；精代表了在配色的时候尽可能的协调，当然了，前提也是尽量用色越少越好。

　　这和网页设计理念差不多，根据客户LOGO或确定的主色调，再搭配一种、最多两种色彩即可，一定要让整体页面看起来舒服。

　　三、图片的使用

　　网页UI中少用素材图片，在某些信息展示中不得不用到实物图那另当别论，就设计而言，不能说图片越漂亮就用得越多，这点和网页设计不同，网页UI不需要大气精美的banner。但是整体设计也不能缺少图片，这里最好使用一些小图标，配在功能区的文字前面，或者是一些提示性信息的前面进行点缀，可以有效的提升页面的生动感。

　　四、注意实用性

　　系统毕竟更多的是给人用的、是给人看到准确信息的，所以设计师在设计的时候一定要注重设计的实用性，这里笔者不建议将页面作个性化处理，当然了，也要根据实际需求或面向的市场而定，但是大部分的时候尽量做到中规中矩、清楚明了就行了。 比如网页中涉及到的一些比较好看的JS特效，那么在UI设计中就要判断一下是否适合使用，如果该特效与信息展示之间产生了矛盾，则优先考虑信息展示，宁可舍弃那些无谓的特效。还有一点，提升页面美观的flash动画就不要放了吧，因为对于系统来说一点用都没有。 BS架构的系统最大优势就是用户可以通过网络并且不需要安装任何客户端文件即可访问使用，因此这对于设计师来说就要掌握不一样的设计理念，操作性强、页面设计简易、信息展示清楚这是基本原则。

　　UI的概念

　　首先，UI是指人与信息交互的媒介，它是信息产品的功能载体和典型特征。UI作为系统的可用形式而存在，比如以视觉为主体的界面，强调的是视觉元素的组织和呈现。这是物理表现层的设计，每一款产品或者交互形式都以这种形态出现，包括图形、图标(Icon)、色彩、文字设计等，用户通过它们使用系统。在这一层面，UI可以理解为User Interface，即用户界面，这是UI作为人机交互的基础层面。

　　其次，UI是指信息的采集与反馈、输入与输出，这是基于界面而产生的人与产品之间的交互行为。在这一层面，UlbJ以理解为User Interaction，即用户交互，这是界面产生和存在的意义所在。人与非物质产品的交互更多依赖于程序的无形运作来实现，这种与界面匹配的内部运行机制，需要通过界面对功能的隐喻和引导来完成。因此，UI不仅要有精美的视觉表现，也要有方便快捷的操作，以符合用户的认知和行为习惯。

　　最后，UI的高级形态可以理解为User Invisible。对用户而言，在这一层面UI是“不可见的”，这并非是指视觉上的不可见，而是让用户在界面之下与系统自然地交互，沉浸在他们喜欢的内容和操作中，忘记了界面的存在（糟糕的设计则迫使用户注意界面，而非内容）。这需要更多地研究用户心理和用户行为，从用户的角度来进行界面结构、行为、视觉等层面的设计。大数据的背景下，在信息空间中，交互会变得更加自由、自然并无处不在，科学技术、设计理念及多通道界面的发展，直至普适计算界面的出现，用户体验到的交互是下意识甚至是无意识的。

　　用户研究工程师一般是心理学人文学背景比较合适。

　　综上所述UI设计师就是：软件图形设计师、交互设计师、用户研究工程师。

　　ui网页设计规范有哪些？网页ui设计注意事项有哪些？读完上面相信大家对ui网页设计有了一定的了解了，ui网页设计的成果直接关系到了网页浏览量的多少，大家可以让faceui帮助你完成ui网页设计。