在设计中如何把握高保真的度

深圳网站制作让产品原型尽可能的高保真、华丽丽、无限逼近于完整产品是每个人都要的。但同时高保真也意味着大量的资源投入。如何在设计中既实现尽可能高的保真度，同时又避免资源浪费呢？这即需要我们对高保真的意义有清醒认识，同时也需要吸取一些敏捷的思想。

    怎么定义高保真

    一个华丽丽的作品（不局限于互联网产品）不可能一下子就从脑子里创意变成现实。它会被拆分成一系列相互依存的元素，整个组装过程会先从最基本的元素开始，逐渐填充和丰富。就像房子，先有钢筋，再有水泥，再有装修；就像汽车，先有车架，再有喷漆。

    高保真的高是以完整的、可为消费者服务的产品为标准的。产品的诸多元素，目标用户、用户需求场景、信息架构、布局、控件逻辑、尺寸、色调、纹理、风格等等，被填充的越丰满，对最终完整产品的“模拟”程度就越高。只要能让这个半成品看起来更像是成品，就是高保真，怎么个像法，可以有很多选择。

    所以，所谓的“高”保真可以是对外观的高保真，也可以是对交互逻辑的高保真，或者对代码性能、流量消耗的高保真，等等等等。

    高保真原型在打造产品中的作用

    任何产出物都具备两种作用。一种是创意发散阶段，产出多个方向，供后面筛选；一种是交付阶段，设计方案确定了，需要交付给下一阶段。

    从节约资源的角度来考虑，高保真存在的前提是其依赖的前期元素都是确定的，这样投放在后期的资源才不会因为前期根基的动摇而尽废。

    在创意发散阶段，假设项目进度已经到了需要确定精确尺寸，颜色，风格等后期元素的程度，设计师就应以用户需求场景、信息架构、布局等为确定的基础约束条件进行发散，想出多种视觉设计方案填充到已有的低保真原型框架上，再按照一些客观原则进行收敛过滤，找出最合适的选项。但通常收敛这个阶段会是产品大老板来拍板，虽然这并不应该成为唯一的决策方式。

    在交付阶段，设计师应该对高保真阶段选定的设计方案中的元素进行充分的描述，以便充分地传达给下游的合作者。通常这些合作者是前段重构。所以要用程序员最熟悉的语言来描述设计，比如以CSS的盒子模型的方式来标注尺寸，以网页色彩体系来标注颜色。

    使用高保真原型的禁忌

    高保真原型其实就是产品开发进行到后期的半成品。从一个脑袋里的idea到像模像样的半成品，是需要投注很多心血的。每艰难地前进一步，都是以已有的步子为前提。

    最大的禁忌就是老大说我只看高保真的漂漂亮亮的东西，然后指着高保真的设计说早期的哪些步子定的不对。这种决策方式是对资源极大的不尊重，一旦早期的东西被干倒，后面的功夫都白费。

    第二个禁忌就是各合作方没有把自己份内的构思充分夯实，就交付给下一步的合作者。夯实可以通过多从利益及决策相关人获取反馈，也可以通过自己多加发散再严格收敛，但终究要保证交付给别人的东西是经得起考验的，靠谱的，不会轻易改变的。一旦别人以你的东西为参考投入更多精力去丰富了产品，却被告知要返工，损失的资源和信任不止一点点。

    第三个禁忌就是在向下一位合作方交付时传达信息不充分。传达信息可以靠更恰当、充分的文字标注，也可以靠面对面的交谈探讨，甚至还可以加上重复确认。当然，这是要消耗大量精力的，但这也是成为一个负责任的雇员应有的尽责态度。

在网页中使用图片的基本规范

    巧妙用图也算是一种设计

    即便是内容主导的网站，也需要图像作为润色，每次设计这种网站，我都需要寻觅一些优秀的照片或者插画。这种图像搜寻对我来说至关重要，因为我不会画画，如果你会画画，或者你的团队中有有天赋的绘画能手，那你真的太幸运了！我都有点嫉妒你的好运。

    良好的照片运用能够成就优秀的设计。人都是视觉动物，在浏览网页时，对于图像有一种渴望，因此添加图片非常重要。而且，一定要是合适的、相关的图片。

    对比

    可用性至上！因此你的图像必须与整体相协调，并且与文字产生对比。干读文字非常让人厌烦。想象一下，一面小黑板，密密麻麻几千个字，白板黑字，读吧！这里有你要的全部。

    要想产生鲜明的上下对比，就要学会观察；图片比较亮，那么文字可以使用较深的颜色，反之亦然。如果想要使用白色字体和亮色背景，那么最好使用一些黑色元素作为过渡。比如，精美的投影技法就很不错。

    质量

    比方说你要为一家餐馆设计网页。在设计中想要用什么样的图？好吧，现在你决定开始抓起想起，去这家餐馆摄影了。你拍第一张照片的时候，站在餐馆门口，离桌子上的美食非常遥远，照片根本无法体现美食的细节；你拍第二张的时候，手突然抖了起来，导致拍摄的照片十分模糊。你觉得这种照片能放在网站上吗？

    如果你的客户不提供专业的摄影作品，那么赶快去劝劝他们，赶紧拍摄点高清无码大图吧。如果客户很顽固，说”就不！”，那赶紧换个思路，建议采用字体设计、布局新颖、极简主义等风格，打造处一种极简风，然后不带图像。宁缺毋滥。宁肯一张图也不配！也不能配上一堆20k的图！

    关联性

    一图胜千言，但是有时候文字为主，那么配上的图就一定要与文字相关。这是常识，保持元素一致性。还是上面那个例子，人家让你设计个餐馆网页，你给配上了股票走势图，可以想像一下甲方收到作品后的脸色。

    如果网页中的内容比较灵活，比如说卖保险的，那么配图可以符号化一点，但是还是要和产品/服务相关。而且符号象征意义一定要强，这样就很便于辨认。而且要注意的是，不同国家、不同文化的符号象征不同。

    大图受欢迎

    这条原则再明显不过了，图像越大，视觉冲击也越大。

    图像也是内容的一种

    图像不但利于设计，还是非常棒的内容，当图像和文字、音频相结合时，能够产生下列作用：

    攫取注意力

    当文章和页面中有吸引眼球的图像时，爱屋及乌，用户会对内容高度敏感。当用户在网上面临大段大段的文本时，人类的大脑便倾向于”略过这片内容”吧，很少有人会保持注意力，继续阅读细节。

    图像能够打破视觉的单调性，帮助用户聚集注意于文章、链接、故事。简而言之，图像让用户集中注意力。

    更好的理解上下文

    好的图像，相当于一种”过渡句”，能够很好的引导下文。而且选图一定要谨慎，图像能够激发用户的一种情绪，一定要确保这种情绪和内容属于同一个”点”，要做到到位。

    其他注意事项

    许可问题

    如果图像不属于你也不属于用户，那么一定要获得许可。最好是书面的许可，而且一定要注明摄像者。因此在设计前，一定要预先要到许可。不过还有一种办法，那就是图库搜刮一些素材

    图库：免费好还是付费的好？

    无论是收费还是免费，图库的好处在于，你不用关心这图是谁的，不用关心许可问题。不过在为网页配图时，一般都会使用一些付费的图片。

    人物摄影

    好处是有一种真实感。

    如果在产品或服务中采用真人图片，展示他们工作时的场景。会让人有一种真实可信感。可如果你选的模特作态扭捏，露出假惺惺的白牙，会让用户感到这是个牙医广告，太假了。因此，一定要贴近产品。

    总结

    选图要谨慎！图片要合理！一图胜千言！

设计师必备的响应式网页设计工具

    随着便携设备用户的指数级增长，网页设计师采用响应式设计作为多平台布局解决方案，不但节省了设计师的时间，而且从长远角度来讲，响应式设计能够为用户提供更舒适的操作环境。如果你毫无经验，不知从何开始，那么这份工具列表将大大的帮助你，能够让你的布局更有“弹性”。

    Simple Grid

    难以置信的CSS框架，无所限制的栅格布局，支持不同大小的屏幕。

    Susy

    “语义变焦”的栅格系统，无需额外标记和特殊的类，很方便使用Sass的人。

    Tiny Fluid Grid

    很棒的网页应用，能帮你选择栅格系统。一旦完成后，提供CSS文件下载。

    Variable Grid System

    依据960栅格系统，能够自动产生布局，在精确调整后，提供CSS文件下载。

    Responsive Web Design Sketch Sheets

    标记很方便，可以方便的选择不同方案中元素的放置位置。

    Style Tiles

    可以通过该网站制定完美的响应式设计流程。

    Gridpak

    免费工具，可在线创建响应式设计栅格。

    Adobe Edge Reflow

    专攻响应式设计，栅格系统，各种元素的惯例都非常得心应手。

    Adaptive Images

    读取设备屏幕信息，自动调整优化图像，无需标记。

    Retina Images

    高分辨率图像解决方案。