关于设计网站效果图的注意事项

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

    一、沟通需求是先决条件

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

    1、改变销售路子

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

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

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

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

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

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

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

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

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

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

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

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

    3、企业内部管理难

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

    不要说客户都是这样，我们不要借口，或者说销售人员没有事先跟客户沟通好需求！

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

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

    二、网页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

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

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

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

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

    问题：

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

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

    3、响应式网站

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

    传送门：http://grid.guide/

    页面简洁清晰，可以看到的直观操作就五个，只要确定好内容总体宽带，分栏数和颜色，下面就给你分了很多不同的间距的栅格，当然每个栅格都可以下载，拖进ps，拉好参考线即可！

    三、交互及特效注意

    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。网站里打开图片的效能其实一个道理。

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

    网页中的广告图尺寸，除了去年iab发布的4种“通用广告包”中的格式：160x600, 300x250, 180x150及728x90，还包括新公布的468x60 和120x600（擎天柱）2种。

    -------------分割线-------------

    所谓设计不规范，全员两行泪

    咱们今后不要老说把某件事情做到极致，而是要尽量规范和沟通到位，减少不必要的重复劳动或无意义的时间浪费。要知道，时间就是效率就是成本啊，这对于任何一方来讲都是非常重要的。

    以上就是马氪软件从时间效率、沟通、界面尺寸、字体、图片规范等方面对网站设计效果图一一作了阐述，对销售人员、设计师、前端、程序员、产品经理都提供了借鉴思路，希望会给大家今后的工作提供参考。

    部分内容参考自UI设计师、互联网。

声明：除非注明，本站内容由无锡网站建设马氪软件原创发布©，转载请联系我们授权合作。