<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Wedding Dresses Outlet &#187; 视觉结构</title>
	<atom:link href="http://www.cubiczd.com/tag/%e8%a7%86%e8%a7%89%e7%bb%93%e6%9e%84/feed" rel="self" type="application/rss+xml" />
	<link>http://www.cubiczd.com</link>
	<description>Cheap Wedding Gown, Bridal Gown</description>
	<lastBuildDate>Thu, 01 Sep 2011 07:29:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>交互设计中的视觉结构</title>
		<link>http://www.cubiczd.com/mba-wiki/19</link>
		<comments>http://www.cubiczd.com/mba-wiki/19#comments</comments>
		<pubDate>Thu, 04 Feb 2010 15:57:31 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[MBA wiki]]></category>
		<category><![CDATA[视觉结构]]></category>

		<guid isPermaLink="false">http://www.cubiczd.com/?p=19</guid>
		<description><![CDATA[网站的交互设计分2种：流程交互和界面交互（即&#8221;单页面交互&#8221;或“小交互”）,而界面交互又包含2类：“视觉结构”和“动态模块”。之前提及过交互设计中的页签，下面看看视觉结构。 何谓动态模块？简单的说就是“AJAX”，它有几种视觉呈现方式：弹出的浮动层、Tab切换、展开 (侧边展开或下拉展开) 何谓视觉结构？ 界面信息按逻辑关系、包含关系和先后顺序，进行排列、组织后形成的模块，即为视觉结构。 这个界面结构可以很大，也可以很小。拿Igoogle的三栏式来举例,其视觉结构是这样的： 再如Blog的视觉结构 这些大的界面视觉结构都是由一个个小的模块结构组成（如下图）： 视觉结构的对比： 以上是2款网页游戏中关于“农田升级”时的不同表现方式，哪一种视觉结构更易让用户接收信息并操作？ 导致视觉结构混乱的因素有哪些？ 1. 最常见的情况是公司无交互设计师，产品信息未经过梳理就传达给UI设计师了，最后产出了一个可用性比较差的产品。 我们常常看到：PM把设计诉求提供给UI，UI也按部就班的完全执行，可出来的东西就是感觉有问题，但也说不出到底为什么，于是一版接一版不停的改，最后……这个沉重的负担压得UI直不起腰来，这不公平。 此时UI设计师或产品经理要大胆的站出来：“我们需要交互设计师来帮我们梳理信息！” 当然，交互设计师也要积极主动回应一下。 2.还有一种情况：由于视觉设计本身是一种比较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲，加入许多不必要的线条和修饰……诸如此类，很多产品上线后的可用性可想而知。 这种情况下，交互设计师（或产品经理）的个人魅力和沟通能力尤为重要，既不能打击UI设计师的积极性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术。 视觉结构对于信息架构的作用： 因为视觉结构中承载着信息，所以在某种程度上它也起到诠释、部分验证信息架构是否合理的作用。 攻守平衡的关隘： 视觉结构，上可攻信息架构，下可守界面设计。一个交互设计师对信息的理解有多深？看看他原型中的视觉结构就知道了。 问题和后果： 信息架构出了问题(譬如一级导航里缺内容，流程走不通等等)，则会导致产品根本不能用。 视觉结构不清晰时，我们接收信息的速度就会变慢，导致产品不易用。 换句话说，信息架构如果考虑不明白，视觉结构做得再好也白搭，而UI设计最终是充当尸体彩绘和替罪羊的角色。 当我们对众多“尸彩产品”愤怒的时候，是否也该反思一下，到底是什么原因造成的？ 来源：http://www.ueui.com.cn/user-experience/interactive-design-vision-frame.html]]></description>
			<content:encoded><![CDATA[<p>网站的交互设计分2种：流程交互和界面交互（即&#8221;单页面交互&#8221;或“小交互”）,而界面交互又包含2类：“视觉结构”和“动态模块”。之前提及过<a href="http://www.cubiczd.com/interactive-design/7">交互设计中的页签</a>，下面看看视觉结构。</p>
<p><strong>何谓动态模块</strong>？简单的说就是“AJAX”，它有几种视觉呈现方式：弹出的浮动层、Tab切换、展开 (侧边展开或下拉展开)</p>
<p><strong>何谓视觉结构？</strong><br />
界面信息按逻辑关系、包含关系和先后顺序，进行排列、组织后形成的模块，即为视觉结构。</p>
<p>这个界面结构可以很大，也可以很小。拿Igoogle的三栏式来举例,其视觉结构是这样的：</p>
<p><img src="http://www.ueui.com.cn/wp-content/gallery/ueui_ue/shijuejiegou4.JPG" alt="视觉结构" width="600" height="330" /></p>
<p>再如Blog的视觉结构</p>
<p><img src="http://www.ueui.com.cn/wp-content/gallery/ueui_ue/shijuejiegou.jpg" alt="视觉结构" width="294" height="387" /></p>
<p>这些大的界面视觉结构都是由一个个小的模块结构组成（如下图）：</p>
<p><img src="http://www.ueui.com.cn/wp-content/gallery/ueui_ue/shijuejiegou5.JPG" alt="视觉结构" width="594" height="258" /></p>
<p><img src="http://www.ueui.com.cn/wp-content/gallery/ueui_ue/shijuejiegou3.JPG" alt="视觉结构" width="360" height="183" /></p>
<p><strong>视觉结构的对比</strong>：</p>
<p><img src="http://www.ueui.com.cn/wp-content/gallery/ueui_ue/shijuejiegou6.jpg" alt="视觉结构" width="448" height="490" /></p>
<p><img src="http://www.ueui.com.cn/wp-content/gallery/ueui_ue/shijuejiegou7.jpg" alt="视觉结构" width="383" height="325" /></p>
<p>以上是2款网页游戏中关于“农田升级”时的不同表现方式，哪一种视觉结构更易让用户接收信息并操作？</p>
<p><strong>导致视觉结构混乱的因素有哪些</strong>？</p>
<p>1. 最常见的情况是公司无交互设计师，产品信息未经过梳理就传达给UI设计师了，最后产出了一个可用性比较差的产品。<br />
我们常常看到：PM把设计诉求提供给UI，UI也按部就班的完全执行，可出来的东西就是感觉有问题，但也说不出到底为什么，于是一版接一版不停的改，最后……这个沉重的负担压得UI直不起腰来，这不公平。<br />
此时UI设计师或产品经理要大胆的站出来：“我们需要交互设计师来帮我们梳理信息！”<br />
当然，交互设计师也要积极主动回应一下。</p>
<p>2.还有一种情况：由于视觉设计本身是一种比较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲，加入许多不必要的线条和修饰……诸如此类，很多产品上线后的可用性可想而知。<br />
这种情况下，交互设计师（或产品经理）的个人魅力和沟通能力尤为重要，既不能打击UI设计师的积极性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术。</p>
<p><strong>视觉结构对于信息架构的作用：<br />
</strong>因为<strong>视觉结构</strong>中承载着信息，所以在某种程度上它也起到诠释、部分验证<strong>信息架构</strong>是否合理的作用。</p>
<p><strong>攻守平衡的关隘：</strong><br />
视觉结构，上可攻信息架构，下可守界面设计。一个交互设计师对信息的理解有多深？看看他原型中的视觉结构就知道了。</p>
<p><strong>问题和后果</strong>：<br />
信息架构出了问题(譬如一级导航里缺内容，流程走不通等等)，则会导致产品根本<strong>不能用</strong>。<br />
视觉结构不清晰时，我们接收信息的速度就会变慢，导致产品<strong>不易用</strong>。</p>
<p>换句话说，信息架构如果考虑不明白，视觉结构做得再好也白搭，而UI设计最终是充当<strong>尸体彩绘</strong>和替罪羊的角色。<br />
当我们对众多<strong>“尸彩产品”</strong>愤怒的时候，是否也该反思一下，到底是什么原因造成的？</p>
<p>来源：<a href="http://www.ueui.com.cn/user-experience/interactive-design-vision-frame.html">http://www.ueui.com.cn/user-experience/interactive-design-vision-frame.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cubiczd.com/mba-wiki/19/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

