电脑的分辨率只有800×600像素,那时的网站性能和体验都不好,而现在网站设计和过去已经有了巨大的变化:注重用户体验、注重页面内容、多媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及,网站仍然是人机交互中非常重要的平台之一。
那么作为网站设计师,我们掌握网站设计的规范和理解网站运行的原理的同时,还要结合运用更好地驾驭这个平台。接下来是关于网站设计的六点设计规范,满满都是干货,让我们一起看下去吧!
因互联网的发展,现今对网页设计的要求也提高了,所以设计师有个自己的设计规范会使设计简洁而高效。接下来,我们会从多方面来开展深入探索!
其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范有许多不同分类,例如:字体规范、主体色规范、图表规范等。
网页的布局主要有两种:左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。
01
左右布局
灵活性强,UI的限制小;左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整;右侧为内容版块范围,是网站内容的展示区域。
居中布局
中间为有效的显示局域,用于网站内容的展示;换句话说,两边均为留白,没有实际用途,只是为了适配而存在。
02
删减元素容器的线框
设计师在设计的过程中应该时常将自己抽离出来,审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱,是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。设计师设计的大部分元素都存在于线框里,简单清除掉这些“容器”可以让界面看起来不那么拥挤,给元素更多呼吸的空间。
03
无障碍设计-重视对比度
善用对比度不仅仅是为了让用户的注意力集中于重要的信息,更是为了使产品更容易使用。设计产品就好比建设像图书馆、学校类的公共场所,它的适用对象需要涵盖每一个人,包括失明、色盲和视障用户。
04
善用颜色重量( color weight)
建立视觉层次
善用颜色视觉重量的秘诀是,一个更为重要的元素,应该有更重的视觉颜色,以便用户快速浏览网页,区分重要和不重要的信息。大字号、粗体的信息会首先被用户注意到,而后他们会关注其下的辅助性信息。
05
间距
有人可能会觉得间距和尺寸有些相似,但其实它们有着很大的不同,我们可以这样理解:尺寸是形容容器的大小,而间距是形容容器之间的距离。间距相对比较简单,只要标注清晰就不会有太大问题。
06
命名规范
很多网页设计师对于“命名”是没什么概念的,他们都是随随便便地用一些没有特定意思的字母去给页面命名,这是不好的。
因为统一的、规范的命名对设计师自己的文件整理有很大的帮助,后期修改文件、图层的时候更加方便快捷,而且规范的命名也显得设计师自身比较专业。而且,如果如果命名不统一,团队之间的成员很难达成共识,任务交接时需要很大的学习成本。而更重要的是,有规范的命名可以极大的节省程序开发的时间成本,减少很多不必要的沟通与重复切图的概率,程序员完全可以直接使用的设计师切片而不更改切片的名称,后期设计师更换切图,只要切片名称不变,开发看都不用看直接替换就可以了。
所有命名全部为
小写英文字母
在程序员的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的,所以命名全部用小写的英文字母是最基本的规则。有些人会觉得写这么多英文太麻烦,但其实为了自己专业能力的提高,这种规范的命名方式是必须要经历的过程,当你习惯了这样的命名方式后,你的成就感会油然而生。
命名格式
一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。
常用英文单词
如果所有命名都写为全称,名字就会特别长,所以设计师将一些常用的英文单词进行缩写,减少工作成本与开发代码资源。至于怎么缩写,只要整个团队能够达成共识并且输出一份缩写清单,任何缩写规则都是可以的。
优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。
责任编辑:优网科技
版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处