网页设计师设计指导.pptxVIP

UI设计师设计指南 V0.8 网游事业部-产品部 2010-11 陈亚琛 部门文化 1.创新 2.激情 3.累积 4.价值 5.精确化管理 目录 1.总体规范说明 2.左右分格式页面设计 3.左中右分格式页面设计 4.黄金分割点 5.图片九宫格 一、总体规范 1.文字不可超过三种其中包括（字体、字号及颜色） 2.界面导航栏下面应是统一的颜色。 3.应遵守黄金分割线的利用，图片设计应遵守九宫格位置设计。 4.文字必需采用网页可显示文字，（图片效果例外） 5.截图或者照片等图片应遵守16:9大小。 6.页面切图/flash大小必需严格控制，不可超过40k，如必需超过需要注明并且上报、采用后台加载方式 7.栏目字段如果超出5条，必需加个分栏符，例如用.....................分格。 二、左右分格式页面设计 应用于游戏官网新闻显示页面设计：页面宽度1000 1.公司logo页 高度：45px; 宽度：980px; 2.pic宣传 高度：260px; 3.导航栏 高度：35px;(可双行导航) 4.左侧正文 宽度：610px(980*0.618) 文章下方可放(栏目仅做为参考)： 1)相关新闻 2)评论 5.右侧栏目： 宽度：370px 以下栏目仅做为参考: 1)近期热点(图片宣传 2x2) 2)要闻推荐 3)图片推荐 4)心情故事 6.下面导航 三、左中右分格式页面设计 游戏官网主页设计：页面宽度1000 1.公司logo页 高度：45px; 宽度：980px; 2.pic宣传 高度：260px; 3.导航栏 高度：35px;(可双行导航) 4.左侧正文 宽度：310px 5.中间 宽度：440px 6.右侧栏目： 宽度：230px 7.下面导航 四、黄金分割点 1.618∶1或1∶0.618 　　 “黄金分割”公式可以从一个正方形来推导，将正方形底边分成二等分，取中点X，以X为圆心，线段XY为半径作圆，其与底边直线的交点为Z点，这样将正方形延伸为一个比率为5:8的矩形，（Y’点即为“黄金分割点”）， A:C = B:A = 5:8。幸运的是，35MM胶片幅面的比率正好非常接近这种5:8的比率（24:36 = 5:7.5）  黄金分割点 通过上述推导我们得到了一个被认为很完美的矩形，连接该矩形左上角和右下角作对角线，然后从右上角向Y’点（黄金分割点，见图A）作一线段交于对角线，这样就把矩形分成了三个不同的部分。现在，在理论上已经完成了黄金分割，下一步就可以将你所要拍摄的景物大致按照这三个区域去安排，也可以将示意图翻转180度或旋转90度来进行对照。 五、设计九宫格 九宫格的源头可是我们中国人发明的一种构图模式，但巧的是它与黄金分割有着惊人的理论联系！大家们把画面的上下左右用黄金分割来做出4条线，我们惊奇的发现这就是我国古人所说的九宫格！  看，整个主体分布在2和黄金分割线上 人们发现在九宫格的4条线交汇的4个点是人们的视觉最敏感的地方，在国外的摄影理论里把这4个点称为“趣味中心”。顾名思义，被反复证明的是当被摄主体处于或发布在这4个点附近最容易得到“眼球” 六、精确化管理 每周周报 必需体现设计名称、设计时长(时)、完成备注（试行） 结束 谢谢！