当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 设计理论:视觉设计是美化产品

心得技巧
404页面设计原则
网页注册表单设计原则
如何让网页表单成为完美的友好用户界面
Axure RP交互设计软件使用教程:Widgets工具栏
大型门户网站腾讯QQ首页改版流程
网站视觉设计的18个要点
完美三栏网页布局例子
体验ebay AIR
用户体验另外一个角度的认识与看法
浅谈web分析
以用户为中心的设计思想不完全正确
网站产品交互设计要素
10款PHP开源的电子商务管理系统
网站底部设计欣赏 希望你有感触
网站可用性和用户体验的研究分析
Web设计之道
更加完善的用户界面设计参考网站
以用户为中心的网站设计全面认识理解
程序员的用户界面设计技巧
帐户登录页面需要避免的设计失误

心得技巧 中的 设计理论:视觉设计是美化产品


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 97 ::
收藏到网摘: n/a

原文:Common Visual Design Misconceptions

最近,我有机会研究对视觉设计作用的常见误解,这些误解仍然盛行于行政主管、产品主管,工程经理和市场专家中。设计团队成员如何说明这些认识是错误的?又该如何向同事和老板展示视觉设计真相?

视觉设计师在特定产品领域或职业生涯中会面对各种困难,但有三种误解频繁发生:

  • 视觉设计是美化产品;
  • 突出显示能改善视觉设计;
  • 可以分割评估视觉设计。

视觉设计是美化产品

这种信条可能起源于工业时代的设计理念引入。从那时起,产品以前所未有的方式进行设计,并形成风格。Raymond Lowey等工业设计师对呆板产品进行美学设计,而声名大噪。

视觉设计固然能美化产品,但其与人交互的潜能早已超越美丽外观。通过组织视觉元素,设计师可以传达回答关键问题的核心信息:

* 这是什么?
* 怎么使用?
* 为什么要使用?

回答这些问题是功能和可用性的关键组成部分,尤其是对于交互产品。举些例子来说明:

图1到图3,某个网络应用工具,相同基本设置的三种表现方式,字体、颜色、渐变和图片都相同。三者主要区别是页面元素组织方式不同。这种区别表明该网络应用工具存在三种主要使用方法。

图1——网络应用工具设计示例

图1,表现方式清晰显示出主要功能——查找客户联系信息;其次,用户可以编辑、删除或者增加备注。图2,重点是顾客和公司之间的交流;其次,用户可以查看、编辑和删除联系人信息。

图2—相同网络应用工具,不同视觉组织

图3,关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。

图3—另一种视觉组织

相同应用工具,三种不同视觉组织,三种不同主操作:查找联系人信息、管理客户交流以及维护客户记录。每个例子中,影响视觉设计的因素大体一致:颜色、字体、渐变和图片。

显而易见,视觉设计不仅是美化此工具。它传达工具的核心功能:它是什么?如何使用?为什么要使用?,而同时有美化了界面。

能让这个更突出吗?

很多网站都喜欢把logo做得比较大,客户和老板常要求视觉设计师着重强调页面上某些元素。这类评论有时可以帮助我们发现设计中的最重要元素,但也常引发视觉设计的另一常见误解:改善网站视觉设计,通过加大、加粗、变红或同时使用三种方法来实现!

页面任何元素的相对重要性都是由其周边元素决定。白色页面放上红色圆圈,会吸引很多注意力。但把红圈放在10个粉色圆圈旁就不会吸引那么多注意力。突出重要元素是整体设计的一个过程,并不是改变任何单一元素。给予单个元素额外视觉权重会破坏布局平衡,搅乱相关元素、主操作等之间的关系。

要是满足客户和老板每个强化某些功能的需求,页面所有元素都会去抢着吸引用户注意—结果就是都得不到注意。图4和图5,两个互联网浏览器下载页面。Firefox页面,下载浏览器号召很明显,页面其他元素—-Thunderbird、 Mozilla商店和最新内容—–没有干扰。

图4—Firefox下载页

图5,Flock下载页面强调了许多不同元素,设计团队决定提供四个下载入口——右上角、左侧菜单底部、新闻面板右上角和页脚。如果页面上没强调那么多其他元素,Flock下载页面或许可以和Firefox一样只用一个下载按钮。