网站定制设计网站效果图的注意事项

网站定制设计网站效果图的注意事项
原创设计型网站一般都需要出具网页效果图，一般网络公司会在初期给到客户首页效果图和方案。而对于网站设计的效果图我们需要注意哪些今天马氪软件就为大家详细总结一下。

一般常见的网页都是居中类型，设置好主内容的宽度然后居中就好。适合门户网站、平台类网站、内容比较多信息量大的站点。

另外一种是布满全屏的网页，又分为自适应和响应式。常见的全屏的后台界面就是自适应的，国外常见这种形式，一般在一些流行的设计产品上，科技公司网站和一些高逼格的站点较为多见，很多企业也正逐步采用。

一、沟通需求是先决条件

试问销售人员连客户做网站的基本需求都没有了解清楚，就拍着胸脯说：noproblem？客户要做一个什么样的网站，有无参考对象？预期做网站的工期是多久？网站以什么样的形式展现（电脑版）

1、改变销售路子

千万不要给客户带去一个这样的印象：做销售的都这样！信心十足，风风火火急躁的。

所以，请改变销售套路、沟通交流方式和思维模式。

前期沟通，我们的销售人员主要需要了解清楚客户的诉求，客户实在表达不出来的话也没关系，你可以给他找一些参考建议，如果需要原创设计，那再交由设计师讨论。

2、明确网站制作的整个工作流程

（1）前期大致了解客户需求

（2）参考建议、设计风格探讨

（3）合作洽谈、合作确认，确定制作版式数量（即修改版式的次数，你要说无限次修改，那么设计师的大刀已经提在路上了）

（4）提交设计图（草图—低保真）

（5）确认修改（6）高清效果图

（7）前端代码编写（8）程序后台对接

（9）测试版网站上线（10）最终修改完善

（11）正式上线交付（12）进入年维护期

3、企业内部管理难

难其实还是难在人员管理。为什么设计师对无数次改稿非常不爽？网站前端也改来改去，程序员对于网站结构、功能修改嗤之以鼻？产品经理把握品控无从下手？一切的源头来自于需求沟通工作没做好！

不要说客户都是这样，我们不要借口，或者说销售人员没有事先跟客户沟通好需求！（需求不明确，后期反复事多，这是肯定的！别怪我没提醒哦）

沟通不及时或不到位，造成的时间成本、人力等成本是最容易被忽视的，毕竟这没用money去标注。

加急、赶稿、改稿仿佛是设计行业本身应该有的现象，没有都好像说不过去一样。

这怕是以后设计师也会让老板要求加班费赶稿费吧，毕竟要做到大家心里不太过于不平衡才不失为好的管理哦。

二、网页UI图片尺寸规范

1、PC电脑版

大部分的企业网站大都从电脑版开始，当然停留在上个世纪的设计风格网站我们今天就不去讨论了。

（1）电脑网页设计尺寸建议

现在宽屏电脑越来越普及，但是这并不代表了网页设计时候不考虑安全距离”！

（2）各分辨率电脑的市场占有率

（3）各个浏览器界面参数与份额

（4）建议

PSD导出切图，尽量使用jpg格式，并且在保证图像质量的前提下尽量压缩大小。

如必须使用到透明png格式图片时，也尽量压缩小一点。

经常有客户会问怎么网站打开速度不是那么快？那么请问一张图就几个MB大小，一张网页打开的速度能快到哪儿去？此外也要考虑您使用的服务器配置了。

2、WAP手机版

当下，手机版网站设计尺寸宽度可以按照750px来设计，而如果要自适应则这工作就可以交給前端。

对于设计来说，选一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。

（1）iPhone手机网页的设计尺寸

iPhone5尺寸是640x1136px分辨率是326PPI

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

iPhone和iPodTouch一代、第二代、第三代尺寸是320x480px分辨率是163PPI

（2）安卓网页的设计尺寸

320dp：一个普通的手机屏幕（240X320，320×480，480X800）

480dp：一个中间平板电脑像（480×800）

600dp：7寸平板电脑（600×1024）

720dp：10寸平板电脑（720×1280，800×1280）

（3）ipad网页的设计尺寸

iPad第三代第四代尺寸是（2048x1536px）分辨率是264PPI

iPad一代第二代尺寸是（1024x768px）分辨率是132PPI

iPadMini尺寸是（1024x768px）分辨率是163PPI

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：

首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。

对于retina屏幕(如:dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。

问题：

对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？

对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)

3、响应式网站

网页中栅格化是很常见，也是很保险的一种做法，良好的运用栅格化是网页设计中的一大利器，但是对于像小编这种对数字不是很敏感的设计师，算间距，算内容大小，简直崩溃，每次都要算好多次浪费时间。下面这款小工具就好的解决了算数这一大问题。从此对栅格化间距说拜拜了！

三、交互及特效注意

1、有据可查

设计师最好标注好需要技术人员注意到的交互、动效，效果实现方式。并且有理可依：比方说一个效果，你想这样实现，那能不能提供给程序一个类似的例子，这样就不会造成沟通或理解上的偏差。

2、ICON图标

在设计图标的时候可以做成字体图标或者svg矢量格式的，具体要和前端配合完成，一般遵循文字流式，控件弹性，图片等比缩放这3大适配技巧。

四、字体规范

1、字体选择

网页中一般字体的使用常为宋体、微软雅黑。不要使用较生的字体，防止用户因没有安装对应字体样式造成显示错误。

要知道，windows系统也自带了40多种英文字体样式和5种中文字体样式。这些字体的样式，你也可以在网页设计排版时自由使用和设置不同的字体样式。

所以凡是使用了windows操作系统的浏览器都可以正确的显示这些字体，但是在其它操作系统里也有显示不正常的。

而如果设计师在设计网站之初使用了其他字体（windows不自带的），那么就需要使用到引用字体或直接导入到网站内。

而如果某个字体文件20MB多（比程序员千辛万苦优化代码后的网站程序还大，这就纯扯淡了），那简直是不敢想象的，而且网站内加载字体服务器消耗也会占据，造成网站打开速度慢。

引入字体对于英文来说，是合适的，因为字体文件本身不大，纯英文网站可以考虑。但是对于中文字体来讲，一个字体文件可能就好几M，既耗费流量，又拖慢了加载速度，还会出现加载后字体突然变化的情况，尤其是对于移动端来讲，非常不划算。

2、字体大小

在CSS中，最常用的描述字体大小的单位有两个，即em和px。通常认为em为相对大小单位，而px为绝对大小单位。但从实际应用中来讲，px像素有时也像是一种相对大小单位。比如，在一块15寸分辨率为800×600像素的屏幕上，10px大小的文字，要比一块10寸分辨率1024×768像素的屏幕上的10px大小的文字显得更大一些。px为像素单位，20px表示20个像素大小，在现在的网页设计中，常被用来表示字体大小，方便且直观。

五、网站内部图片

很能理解设计师为了追求页面效果，切图有时候可能一张图片就2MB左右。但是在一般企业网站内，几MB的图片简直是疯狂的。要知道，愿意支付高昂服务器的企业并不是非常多的。

其实我们可以这么理解，你就算电脑上打开一张图片，如果是配置低点的电脑打开效率也不高吧，也得加载一会儿PS。网站里打开图片的效能其实一个道理。

磨刀不误砍柴工，如果一定要追求图片质量和加载速度，就别吝啬服务器配置吧。

文章标题：网站定制设计网站效果图的注意事项
文章来源：https://www.cdcxhl.com/news/66476.html

成都网站建设公司_创新互联，为您提供用户体验、微信公众号、云服务器、企业建站、App设计、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联