广东快3>WIKI库>学习UI设计>web页面设计规范

web页面设计规范



为什么要有web页面设计规范


1.有利于建立统一的视觉体验,便于用户熟悉界面操作,获得良好的视觉与交互体验。


一个大型的网络公司一定会有综合的产品,就同一个网站来说,也一定有大量的页面,这不是一天或一两个人可以做出来的。产品与产品之间,页面与页面之间,需要保持视觉上的统一性。要建立起一种风格,这需要依赖于统一的要求,也就是规范。从这个角度来说,页面设计规范是建立这些大型网络公司视觉识别系统的一个关键性依据。同时,用户长期使用这些网站,自然会对网站产生习惯性的操作与浏览的方式,网页界面会在一定时期内保持相对的稳定,这样用户可以非常熟练地在相应的位置找到相关的功能。以他们熟悉的方式打开相关的页面,这对提升用户的使用体验,尤其是维护老用户的感情是非常有益的。


2.有利于新人加入团队,减少培训成本,提高设计流程的规范性,使团队合作更高效更流畅。


团队在发展过程中,经常会出现人员的变化,而新人加入之后,主要做的就是融入进来,一套规范可以帮助他们形成统一的技术要求,减少随意性,在一些通用环境下,不需要过多的考虑设计问题,提高了效率,降低了融入的时间成本。


3.有利于网页界面设计师、网页前端人员及后台开发人员前后的衔接,减少沟通成本。


举例来说,网页当中会用到一些字体和颜色,界面设计师制作完成之后,网页设计师拿到手之后,需要了解这些字体是什么、字号是什么、所用的颜色参数是什么以及两个模块之间的间隔是多少像素,如果没有规范文档的存在,就必须去问询设计师或者用工具来测量。


4.有利于设计师将长期工作之中累计起来的一些好的做法、经验系统地保存,建立起一条团队资源共享、经验分享的沟通渠道。


设计部门早期建立规范的原型就是一些经验总结、设计参考,将好的设计效果保存下来,以便下次遇到类似的设计时能用上,大家将这些拿出来交流分享,慢慢形成共性的东西,最后形成部门乃至业内的规范。规范是限制性的标准,规范本身也需要随着时代和技术的更新不断地修改、补充、发展。



web页面设计规范包含的内容


1.首先应考虑到的应该是三个:LOGO、字体、色彩,因为这三个是建立起统一风格的关键。


1)LOGO是一个企业的标志,对于LOGO的使用一定要做到统一规范和清晰,页面设计当中如果遇到LOGO一定要拿到设计源文件,这样才能保证设计的清晰规范。同时,LOGO应用不同层里上时,要注意规范,如大小、配置风格等。


2)字体是网页当中所使用的比较多的素材,文本的间距、粗细、大小、段落长度等,需要仔细规范第使用。


3)色彩系统是一个页面中非常重要的一个部分,页面当中的主色、副色各类文本的配色度及色彩都需要统一规范,包括一些图的搭配,都需要参考整体用色的要求,尽量符合视觉上的统一性。一般是色块加颜色编码的形式给出。


2.另外需要考虑的恶事界面的版式、广告图片(banner)、模块间距以及众多控件的规范。


1)界面的版式设计,一般使用栅格化系统。屏幕的安全宽度,90%的用户的屏宽分辨率都达到了1024以上,那因此网页常用的框架宽度是在1000左右,常用的是950-990的宽度。例如淘宝网使用的是950像素的栅格系统。(40*n)-10=W


2)banner及相关的广告图片,banner又称为横幅广告,一般出现在网站的开头或其他重要的位置。用来放置代表企业形象或者主营业务的信息,是提升网站整体气质的设计因素。以提供实例参考的方式给出。


3)间距也是页面当中考虑的因素。一般存在于模块与模块之间、内容与内容之间、模块与内容之间以及图片与文字之间。间距统一规范之后,在一些通用环境中,基本上不再需要过多地考虑这个问题,浪费时间。在前段代码考虑的也是非常多的。


4)众多的控件,Tab控件是遇到比较多的信息所用到的一种控件形式,可以把相类似的内容合并到一个模块之中,再进行预分类。不同的分类通过Tab按键进行控制,。这样就涉及到控件的大小、风格以及当中的文本、字体、字体的间距等。分页控件给出了通用的样式形式,如文本是使用的什么字体,数字是使用什么字体,数字的颜色,已访问的颜色,页码是否需要加样式等。表单控件,在注册或者登陆时,一般需要遇到这样的控件,如文本框、单选、多选按钮、提交按钮等。要注意文本框的高度、文本框与注释按钮之间的间距等。


3.命名统一性


最后一个,但也非常重要的是设计时的命名规范。一个是在同一个页面当中图层的命名方式,以及多个源文件之间的命名统一性。规范命名的好处,一方面可以提高设计的操作逻辑性。另一个是可以优化图层的可读性,使作品更有条理,方便后期修改、切图。设计师也是技术团队的成员,而前端开发工程师需要使用设计师的项目原图,所以统一命名规范对团队的协作和工作效率的提升有好处。



小作业


了解web页面设计规范的用途。掌握web设计规范包含的基本内容。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录