快速掌握视觉设计和网页设计的技巧

    我是个初入互联网的视觉设计师，做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的…等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应对呢？下面这篇文章给了我很大的启发，特别分享给大家。产品经理、开发工程师和市场策划专员等产品利益关系人认为——视觉设计师在整个团队中没有突出的地位。难道这个论断是正确的吗？我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢？

尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下3点是会被经常提及的：

1、视觉设计就是怎样做得更漂亮

2、流行的东西可以提高视觉设计品质

3、从单个元素出发来评价视觉设计的效果

ui设计或者视觉设计就是怎样把东西做得更漂亮，视觉设计只是蛋糕上的奶油这个观念已存在很久。这就好比把最后一步的视觉设计比喻成产品包装上的一个吸引人注意的蝴蝶结。这个观点也许源于工业时代。在当时，工业产品才开始出现不同以往的外观设计，而且像雷蒙·罗维这样的现代工业设计师开始大张旗鼓地宣扬自己的产品美学。显而易见的，视觉设计确实可以改善产品的表征，但是它可以传递给用户的信息其实更多。通过对不同元素的排列布局，视觉设计师也在向用户传递着产品的核心价值：

A;这是什么？

B;我怎么使用？

C:为什么我只使用它？

上述3个问题在交互式产品的设计上尤其显得至关重要。

（1）同一个网站的不同视觉排列，基于相同的视觉元素——字体、颜色、渐变和图片。不同的布局直接影响着主要功能点的不同。有些页面的设计重点是：主要功能是查看客户联系信息。然后则是用户可以编辑、删除或者为联系信息写备注。还有些页面的重点放在了客户和公司的交流上，然后是用户可以浏览、编辑和删除客户信息。当然也有的设计重点是用户信息的可编辑性查看客户联系信息、管理和更新这些信息以及保留客户的记录。在每个方案中，视觉设计的基本元素是相同的：颜色、字体、渐变和图片视觉设计可以做到的远比美化界面多得多。它还肩负着传递产品核心功能的作用。

（2）流行的东西就可以提高视觉设计的品质，产品经理经常会要求视觉设计师更多地关注排版中的某个细节。这样可帮助我们更容易抓住设计重点的同时，也暴露了对于视觉设计的另一个误解：“为了改进这个网站的视觉效果，把这个做得大一下，这个字体用粗体，变成红色！”然而，页面中任何元素的重要性如何是取决于它周围环境的。比如，在一个页面中放入一个大红色的圆，因此，决定某个元素的重要性要从设计的整体出发。我们不应该只关注于某个元素来改进设计。如果这样做的话，页面的整体平衡就会被破坏，也会混淆页面功能的层次关系。你答应每个利益关系人去逐个调整页面的不同细节，你的调整都要在用户需求和产品需求之间做抉择，大多数情况下，两种需求是无法同时得到满足。

（3）从单个元素出发来评价视觉设计的效果。如果我们把关注的重点单单落在某个元素上而不是整体页面的话，也会让局部的调整很困难。“你能把logo做得大一些吗？”“你能把标题的颜色变一下吗？”“我们能在这里换一张图片吗？”…

这些零散的建议确实可以帮助我们更了解客户的意图，但客户很少会关注到这对整体页面设计的影响。换一个颜色可能需要重新定义页面的色调，设计师需确保新的色调不会影响到用户关注主要任务。换一张图片可能意味着也要同时调整它周围的元素，因为原先图片制造的视觉焦点可能不复存在等等。一个最终的视觉设计稿应该是建立在平衡和调整各个元素相互关系上的——同时传递产品的核心价值。所以，当设计师在调整了一个元素后，他还必须重新考虑页面的布局以不破坏原有的平衡。孤立地完成一个个小设计，合在一起后并不能说这就是一个完整的设计。互联网产品的页面元素尤其容易被独立开来进行评估。因为它也许是分一个个单独的模块做测试的，团队里的一个成员也可能认为我只要把自己的那部分给做好了，整体的项目也就做好了当我们单独看页面头部ebay的logo、paypal提供安全保障的提示和正中照相机的促销广告都会觉得不错。事实上，当这三者同时出现在一个页面上时，他们更像在互相竞争，都过于抢眼了。但愿以上这些实例已经证明了视觉设计师在团队中的价值。但要让更多的团队成员认同视觉设计不仅仅关乎到样式、流行等，视觉设计师还需多提升自我经验，在项目初期就表明视觉设计对于整个项目的重要性。

接下来我们再看看除视觉设计之外的网页设计相关信息！

大家都知道随着网页设计领域的开放，越来越多的设计人员技术知识非常有限，网站设计似乎成了一件非常可怕的事情。特别是初次与某个美工合作时更是困难重重。小编给大家提供一些合作的基本窍门，帮助你与美工完美协作。这里假设大家使用Photoshop，不过不管你使用什么设计工具，以下基本原则都适用。

1.制定一个统一的计划

俗话说”计划失败一切失败” ，网站的设计和开发也是如此。创建一个成功的网站，策略是必备的，但更为重要的是要确保美工明白你的期望。 避免这个交流不畅的一个有效方法就是在设计开始前让美工先预览你的设计框架。这是一个非常重要的阶段，可以问美工下面的问题： “我们的预算里可以有这个吗？” 或者”你觉的……会成问题吗？”

2. 提交完善的网页设计模型

启动Photoshop开始设计之前，要注意一些图形元素。

网格系统

为了确保网站能与所有的解析兼容，使用960px网格系统可以避免在不同的显示器下网站出现问题。另外，使用网格系统也将给你和美工提供参考，确保你的设计能完美地对齐。使用网格化布局是实现完美设计的最简单最佳方法，它也为你简化了设计流程，因为大量的猜测和调整都从工作流程中消失了。

规划网站发展和变化规模

这里要注意的一点是，你的网站一旦上线后，其整体布局将非常难改变。无论是客户有额外的内容需要添加还是网站进入到下一个开发阶段，一定要对你的网站将会发展到什么样的规模有一个明确的概念。如果要添加五个段落的文章，你的布局会受到什么样的影响？你的导航能否允许添加更多的页面？在开始与美工工作时，你就需要先确认好这些问题。

有序组织管理图样

关于PS文档一定要组织完善这一点，有很多东西可以说。清晰并有条理地管理你的文档，这样美工能够轻松地找出和分解你的设计。可以通过与网站内容相关的命名来分类管理你的文档。例如，你可能想将设计元素分解为头部（header）、主要内容区（main content area）、底部（footer）和侧边栏（sidebar）等。或者以其他逻辑方式来给你的图形分组。此外，一个组织有序的PS文档，分隔各个元素时尽可能依据图层来处理，否则美工想要单独使用某个设计时却发现它是与另一些元素融合一起的，这会让美工相当头疼。

这样做看起来没什么，但是你会发现它将为你省下多少宝贵的开发时间。还要说明一下，确保给美工提供网站一旦上线时所有可能需要用到的图像和链接设计。包括导航系统的不同状态 (正常状态和游离状态)、界面按钮，如行动召唤按钮（Call to Action buttons ）等。

3. 深入了解用户界面功能

当设计那些有特殊效果和功能的元素时，花一点时间去找些例子和文献资料向美工阐述清楚你的想法。

如果你呈现给美工的是静态图片没有任何标记，美工很可能不会注意到而没有到达你所期望的效果。花点时间去搜寻一下你要达到什么样的效果，现在网上有很多关于各种特殊效果和功能这方面的文档、样例以及教程。我相信你会有很多意想不到的收获，至少你也可以受到一点启发。

4. 给出反馈意见

开发人员写完设计代码后，还需要你和客户提出一些修改意见帮助修改。很少有人不经过尝试就可以成功的，现在你的一项任务就是整理出一个明确的修改建议。修改意见应尽可能的具体详细，避免含糊不清。对修改的次数和版本做记录，方便你和开发人员对版本的控制 。

总     结

花时间精心管理你的文件最终被证明是值得的，作为一个设计师，如果在网站开发上还算是新手，应该抓住所有学习新事物的机会。有问题，你可以向程序开发人员咨询，从自己的错误中吸取教训，确保下一个项目能够如期的完工，设计能如你所计划的样子。

温馨提示：转载发布内容如有侵权，请后台联系我们会在第一时间撤销，我们希望在资源共享的同时，与您共同维护互联网的良好生态，谢谢！