网页UI设计规范、布局及提升用户体验设计.pdfVIP

⽹页UI设计规范、布局及提升⽤户体验设计 ⽹页UI设计规范 1. ⽹页规范： ⽹页宽度为1920 ⾼度不限，有效可视区：950px~1200px宽度，具体尺 根据项⽬，客户要求以及⽤户群决定。 ⾸屏⾼约为700-750PX 主体内容区域1200PX。 ⽂档建⽴：⽂件宽度为1920PX ⾼度不限，RGB颜⾊模式， 分辨率72 2. 字体规范： 中⽂常⽤字体：宋体-字体样式 （⽆）、微软雅⿊-字体样式 （Windows LCD）、苹⽅ （MAC） 英⽂常⽤字体： imes New Roman、Arial、sans （1）中⽂字常⽤字号： 导航⽂字⼤⼩：14px、16px、18px、20px ； 正⽂内容：12px、14px ； 标题：22px、24px、26px、28px、30px ； 辅助信息：12px、14px ； （2）英⽂字常⽤字号： 标题和内容⽂字10-16px ；中英⽂结合最⼩12px ；全英⽂⽹站最⼩10px （⽐如底部信息）； （3）段落字体格式： 3. ⽹页页⾯等级 （1）⾸页：进⼊⽹页中看到的第⼀个页⾯ （LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner ⼀般是5个。 注意：⽹站的⾸页只能有⼀个。 （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）图⽚距离⽂字不要过近。 常见的⽹页布局形式 布局的原则 ⽹页布局的原则包括：协调、⼀致、流动、均衡、强调等，另外在进⾏⽹页布局设计的时候，需要考虑到⽹站页⾯的醒 ⽬性、创造性、造型性、可读性、和明快性等因素； （1）协调：将⽹站中的每⼀个构成要素有效的结合或者联系起来，给浏览者⼀个既美观⼜实⽤的⽹页界⾯。 （2）⼀致：⽹站整个页⾯的构成部分要保持统⼀的风格，使其在视觉上整齐、⼀致。 （3）流动：⽹页布局的设计能够让浏览者凭着⾃⼰的感觉⾛，并且页⾯的功能能够根据浏览者的兴趣连接到其感兴趣 的内容上。 （4）均衡：⽹页的布局设计要有序的进⾏排列，并且保持页⾯的稳定性，适当地加强页⾯的使⽤性。 （5）强调：把页⾯中想要突出展⽰的内容在不影响整体设计的情况下，⽤⾊彩搭配或者留⽩的⽅式将其最⼤限度地展 ⽰出来。 不同类型的⽹站、不同类型的页⾯往往有不同布局，常见的布局模式为：⼀栏式、两栏式、三栏式 1. ⼀栏式 布局页⾯结果简单、视觉流程清晰，便于⽤户快速定位，但是由于排版⽅式的限制，只适⽤于信息量⼩，相对⽐较独⽴ 的⽹站。通常会通过⼤幅精美图⽚或者交互的动画效果来实现强烈的视觉冲击效果，从⽽给⽤户留下深刻的印象，提升 品牌效果，吸引⽤户进⼀步浏览。由于⾸页信息展⽰量有限，⼀般需要在⾸页中添加导航或者重要⼊⼝的链接等。 2. 两栏式 两栏式是最常见的布局⽅式之⼀