<?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>设计地带 &#187; 设计</title>
	<atom:link href="http://tina.reeze.cn/tag/%e8%ae%be%e8%ae%a1/feed/" rel="self" type="application/rss+xml" />
	<link>http://tina.reeze.cn</link>
	<description>爱生活爱设计，这里是一片自由的沃土，生活的美好由此开启……</description>
	<lastBuildDate>Thu, 12 Aug 2010 09:55:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>让人又爱又恨的标签们</title>
		<link>http://tina.reeze.cn/2010/05/10/labels/</link>
		<comments>http://tina.reeze.cn/2010/05/10/labels/#comments</comments>
		<pubDate>Mon, 10 May 2010 03:01:32 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[多个标签]]></category>
		<category><![CDATA[标签]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27770</guid>
		<description><![CDATA[[版权声明]:版权归作者“Tina-童童”所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://tina.reeze.cn/

        标签的出现解决了页面上导航难以排布的难题，让页面信息整理更加容易。标签的形式来源于人们的生活，在书中夹上一些做好标记的纸条并露出书边，下次再寻找书里的内容就非常方便了。
       网页中的标签是为了更加清晰的整理网页导航区域，对每个不同的页面进行信息整理并归类为一种最完整易懂的分类名，以此作为页面的标签。这样的形式在如今的网页设计中得到了广泛的应用。如果我们需要列出的标签只有几个时，可以用非常漂亮的样子做出来，而且会很容易看懂。
      可是当摆在我们面前的是一长串，比如二十几个标签的时候，我们该怎么办呢？以往的做法是将所有标签列出，并排列成多行，这样的方式虽然解决了标签的排布问题，但却给使用的用户带来了极大的困惑，并且这样的排布在形式上也不再像标签的形式了。另外，这样的排布想要类似标签的形式时免不了需要滚动显示标签，将当前项滚动至下方距离标签内容最近的位置。这样就会产生每个标签在使用时位置不固定的问题，用户会有一定的疑惑：上次明明在这里的啊？奇怪，难道我记忆力出问题了？
       
       这个是我一个朋友在设计页面时遇到的问题，在与之进行设计讨论的时候遇到了很多的问题。在这里我将讨论中的思路简单的说一说吧。
      由于显示器显示的页面宽度有限，目前虽然宽屏幕、大分辨率的显示器已经出现，但是还并不算非常普及。我们在设计网页时需要考虑更多的适应性，让更多的用户在使用时不会出现问题，还是需要考虑较小分辨率的显示器情况。鉴于这些限制性因素，那么我们究竟该如何来排布这么多的标签呢？
      1.   分好的标签之间一般是并列关系，内容最好是互相不交叉的，并且是互相平等的关系。如果我们罗列出的许多个标签之间有从属关系，我们需要考虑将其重新进行分类划分。将标签进行分组，把完全平铺的标签换为几组标签。
      2.   用任务标签直接显示分组情况。比如Windows系统中，浏览器在开启多个网页窗口时，在任务栏位置以同一个浏览器程序的形式显示，共同表示开启的多个窗口标签页。这样的显示就大量节省了任务栏宽度。
      3.   将标签从重要标签向次要标签进行排布，按照所设计的页面进行排列，将多余出来的标签归入“更多”标签中，这样虽然在界面上隐藏了一部分标签，但是却让界面显得更加清爽整齐。并且，根据这样的排列后的标签，会突出网页想要人们注意到的重点界面，集中来访用户的关注度。次要标签中的内容让那些愿意在网页中长时间浏览和寻找的用户进行探索，这些相对次要的内容不是网页设计的重点，因此相对而言也不会有非常多的用户使用起来不方便。
      4.   如果标签很难划分重要不重要，可以将所有的标签列出来，并加以滚动条或者左右箭头的形式，让用户可以在众多标签页中横向滚动浏览。为了让人们使用起来更加方便，需要又一个地方可以以下拉菜单或其他形式显示所有标签，方便用户快速选择。另外，在平铺标签的时候，不能无休止的缩短标签的长度，要以标签的辨识度为首要。不能够无休止的缩短标签，以至于用户无法知晓每个标签的内容。如图是有这个问题的典型&#8211;Google Chrome浏览器：
      5.   当横向位置不够放置多个标签时，可以改为向垂直方向设计。垂直方向用户可以较方便的滚动鼠标来浏览，即使标签有比较多个也能更容易的排列。此外，垂直方向上每个标签的高度都是容纳一个字的高度，因此较短的位置可以显示较多的标签。横向设计的标签由于每个标签都会有几个字的长度，从而会占据更多的横向空间。
      最后回到我和朋友讨论的话题上，本来如果只是单纯的是二十个标签我会建议他设计成垂直标签，但是根据项目的特殊性，他搭建的页面左侧还有一个不可或缺的树状结构，因此，经过再多的思考，考虑到这些标签在不同的用户面前会呈现不同的一些标签，但有部分是会常用到的，因此最终建议他考虑使用“3”，即权衡出几个相对常用和重要的标签，然后将排列不下的标签们放到更多标签里面，这样能够将过多的标签稍作缓和。
      在设计标签时可能会遇到各种各样的问题，根据不同的情境采用不同的设计方式，灵活的运用设计技巧就可以制作高可用性的网页。在每次的问题处理时多做不同的尝试，会容易产生很多优秀的设计模式，积累这些设计模式在今后的应用中就会更快捷。
]]></description>
			<content:encoded><![CDATA[<div>[版权声明]:版权归作者“<a href="http://tina.reeze.cn/about/">Tina-童童</a>”所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:<a href="http://tina.reeze.cn/">http://tina.reeze.cn/</a></div>
<p><a href="http://tina.reeze.cn/"><img class="alignnone size-full wp-image-27783" title="标签2" src="http://tina.reeze.cn/wp-content/uploads/2010/05/标签2.jpg" alt="" width="600" height="150" /></a></p>
<p>        标签的出现解决了页面上导航难以排布的难题，让页面信息整理更加容易。标签的形式来源于人们的生活，在书中夹上一些做好标记的纸条并露出书边，下次再寻找书里的内容就非常方便了。</p>
<p>       网页中的标签是为了更加清晰的整理网页导航区域，对每个不同的页面进行信息整理并归类为一种最完整易懂的分类名，以此作为页面的标签。这样的形式在如今的网页设计中得到了广泛的应用。如果我们需要列出的标签只有几个时，可以用非常漂亮的样子做出来，而且会很容易看懂。</p>
<p>      可是当摆在我们面前的是一长串，比如二十几个标签的时候，我们该怎么办呢？以往的做法是将所有标签列出，并排列成多行，这样的方式虽然解决了标签的排布问题，但却给使用的用户带来了极大的困惑，并且这样的排布在形式上也不再像标签的形式了。另外，这样的排布想要类似标签的形式时免不了需要滚动显示标签，将当前项滚动至下方距离标签内容最近的位置。这样就会产生每个标签在使用时位置不固定的问题，用户会有一定的疑惑：上次明明在这里的啊？奇怪，难道我记忆力出问题了？</p>
<p><a href="http://tina.reeze.cn/wp-content/uploads/2010/05/设计地带.jpg"><img class="alignnone size-full wp-image-27772" title="设计地带" src="http://tina.reeze.cn/wp-content/uploads/2010/05/设计地带.jpg" alt="" width="600" height="287" /></a>       </p>
<p>       这个是我一个朋友在设计页面时遇到的问题，在与之进行设计讨论的时候遇到了很多的问题。在这里我将讨论中的思路简单的说一说吧。</p>
<p>      由于显示器显示的页面宽度有限，目前虽然宽屏幕、大分辨率的显示器已经出现，但是还并不算非常普及。我们在设计网页时需要考虑更多的适应性，让更多的用户在使用时不会出现问题，还是需要考虑较小分辨率的显示器情况。鉴于这些限制性因素，那么我们究竟该如何来排布这么多的标签呢？</p>
<p>      1.   分好的标签之间一般是并列关系，内容最好是互相不交叉的，并且是互相平等的关系。如果我们罗列出的许多个标签之间有从属关系，我们需要考虑将其重新进行分类划分。将标签进行分组，把完全平铺的标签换为几组标签。</p>
<p>      2.   用任务标签直接显示分组情况。比如Windows系统中，浏览器在开启多个网页窗口时，在任务栏位置以同一个浏览器程序的形式显示，共同表示开启的多个窗口标签页。这样的显示就大量节省了任务栏宽度。<a href="http://tina.reeze.cn/wp-content/uploads/2010/05/21.png"><img class="alignnone size-full wp-image-27777" title="2" src="http://tina.reeze.cn/wp-content/uploads/2010/05/21.png" alt="" width="476" height="212" /></a></p>
<p>      3.   将标签从重要标签向次要标签进行排布，按照所设计的页面进行排列，将多余出来的标签归入“更多”标签中，这样虽然在界面上隐藏了一部分标签，但是却让界面显得更加清爽整齐。并且，根据这样的排列后的标签，会突出网页想要人们注意到的重点界面，集中来访用户的关注度。次要标签中的内容让那些愿意在网页中长时间浏览和寻找的用户进行探索，这些相对次要的内容不是网页设计的重点，因此相对而言也不会有非常多的用户使用起来不方便。<a href="http://tina.reeze.cn/wp-content/uploads/2010/05/3.png"><img class="alignnone size-full wp-image-27778" title="3" src="http://tina.reeze.cn/wp-content/uploads/2010/05/3.png" alt="" width="446" height="77" /></a></p>
<p>      4.   如果标签很难划分重要不重要，可以将所有的标签列出来，并加以滚动条或者左右箭头的形式，让用户可以在众多标签页中横向滚动浏览。为了让人们使用起来更加方便，需要又一个地方可以以下拉菜单或其他形式显示所有标签，方便用户快速选择。另外，在平铺标签的时候，不能无休止的缩短标签的长度，要以标签的辨识度为首要。不能够无休止的缩短标签，以至于用户无法知晓每个标签的内容。如图是有这个问题的典型&#8211;Google Chrome浏览器：<a href="http://tina.reeze.cn/wp-content/uploads/2010/05/4.png"><img class="alignnone size-full wp-image-27779" title="4" src="http://tina.reeze.cn/wp-content/uploads/2010/05/4.png" alt="" width="607" height="72" /></a></p>
<p>      5.   当横向位置不够放置多个标签时，可以改为向垂直方向设计。垂直方向用户可以较方便的滚动鼠标来浏览，即使标签有比较多个也能更容易的排列。此外，垂直方向上每个标签的高度都是容纳一个字的高度，因此较短的位置可以显示较多的标签。横向设计的标签由于每个标签都会有几个字的长度，从而会占据更多的横向空间。</p>
<p>      最后回到我和朋友讨论的话题上，本来如果只是单纯的是二十个标签我会建议他设计成垂直标签，但是根据项目的特殊性，他搭建的页面左侧还有一个不可或缺的树状结构，因此，经过再多的思考，考虑到这些标签在不同的用户面前会呈现不同的一些标签，但有部分是会常用到的，因此最终建议他考虑使用“3”，即权衡出几个相对常用和重要的标签，然后将排列不下的标签们放到更多标签里面，这样能够将过多的标签稍作缓和。</p>
<p>      在设计标签时可能会遇到各种各样的问题，根据不同的情境采用不同的设计方式，灵活的运用设计技巧就可以制作高可用性的网页。在每次的问题处理时多做不同的尝试，会容易产生很多优秀的设计模式，积累这些设计模式在今后的应用中就会更快捷。</p>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2010/05/10/labels/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>web界面设计&#8211;左上到右下的距离</title>
		<link>http://tina.reeze.cn/2009/11/28/ue/</link>
		<comments>http://tina.reeze.cn/2009/11/28/ue/#comments</comments>
		<pubDate>Sat, 28 Nov 2009 02:32:22 +0000</pubDate>
		<dc:creator>tina</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[未分类]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[古藤堡图表]]></category>
		<category><![CDATA[瞬间之美]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://tina.reeze.cn/?p=27620</guid>
		<description><![CDATA[
         参加完今天的大型招聘会回来，继续给大脑补充养分:P
         喜欢一本好书《瞬间之美——Web界面设计如何让用户心动》，关注很久了，可惜囊中羞涩，图书馆来了这本书第一时间奔过去借来阅读 
         才只看到前面很少的一部分，喜欢本书开头的一句话“良好的用户体验，全在于那些完美的瞬间”。说得非常正确，用户体验其实就是用户在真正使用产品时候的一些感受。如果产品能够带给人们一个个感动的瞬间，用户会爱上这个产品，说不定偶尔在朋友间还会无意间提起，顺便帮产品做了推广。因此完美的瞬间提升用户体验，而用户体验提升用户的市场价值，比如Iphone刚出来的时候，人们一瞬间爱上这个产品，并相继介绍给身边的人，不断的有赞美之词出现，市场上卖到断货的现象时有出现。
         在以前的学校学习以及在伊飒尔实习的时候做过一些设计项目，在开始着手设计之前会整理一个类似于功能列表的东西，其实就是说我事先对我将要进行的设计会有一个规划，会自动在脑中有一个大概的概念。因为设计总是带着一定的目的去进行的，比如网站，总是有个主题的，大致具备什么样的功能，主要是宣传公司还是推广公司的产品，有大致的一个设计方向。收集好这些设计点后用一个很大的容器放起来，根据具体特点开始着手布局，导航位置，内容位置，等等信息架构在此时可以适当用线框图开始布局。没有细节，只是一些大体的界面轮廓逐渐开始布局。界面设计的拼图游戏就从这样的步骤开始。
        书中提到了一个概念翻译为古藤堡图表，汗颜自己从事这个行业居然没听过这样的一个理论，一直认为我们做的左上角到右下角的设计是根据大量的用户研究结论比如用户眼动研究等方法得出来的，平时设计工作中只是在使用这样的一个图表理论但是从没有仔细的研究过。仔细看看发现很多地方的设计都是这样的一个布局方式，从左上角到右下角的方向是用户的一个习惯方向，很多网页或应用软件都按照这样的方向来进行布局。
举例：

       淘宝网上的购买和加入购物车在一定程度上也是遵循这个左上到右下的设计准则，引导用户的视线。橙色和蓝色的按钮将用户从主要目标“图片”拉过来，吸引用户注意，让用户有点击购买的倾向，引导购物动作的发生。


        还有很多类似的设计，使用了这样的左上到右下的设计，安装软件，弹出框的设计等地方，仔细观察都会发现这样的理论应用:)  借鉴其他人的理论并运用在平时的学习和工作中，这对自己是一个很好的提升方法。
 
]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><img class="size-full wp-image-27622 aligncenter" title="未标题-1" src="http://tina.reeze.cn/wp-content/uploads/2009/11/未标题-12.png" alt="未标题-1" width="600" height="100" /><br />
         参加完今天的大型招聘会回来，继续给大脑补充养分:P<br />
         喜欢一本好书《瞬间之美——Web界面设计如何让用户心动》，关注很久了，可惜囊中羞涩，图书馆来了这本书第一时间奔过去借来阅读 <img src='http://tina.reeze.cn/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
         才只看到前面很少的一部分，喜欢本书开头的一句话“良好的用户体验，全在于那些完美的瞬间”。说得非常正确，用户体验其实就是用户在真正使用产品时候的一些感受。如果产品能够带给人们一个个感动的瞬间，用户会爱上这个产品，说不定偶尔在朋友间还会无意间提起，顺便帮产品做了推广。因此完美的瞬间提升用户体验，而用户体验提升用户的市场价值，比如Iphone刚出来的时候，人们一瞬间爱上这个产品，并相继介绍给身边的人，不断的有赞美之词出现，市场上卖到断货的现象时有出现。<br />
         在以前的学校学习以及在<a href="http://www.isaruid.com">伊飒尔</a>实习的时候做过一些设计项目，在开始着手设计之前会整理一个类似于功能列表的东西，其实就是说我事先对我将要进行的设计会有一个规划，会自动在脑中有一个大概的概念。因为设计总是带着一定的目的去进行的，比如网站，总是有个主题的，大致具备什么样的功能，主要是宣传公司还是推广公司的产品，有大致的一个设计方向。收集好这些设计点后用一个很大的容器放起来，根据具体特点开始着手布局，导航位置，内容位置，等等信息架构在此时可以适当用线框图开始布局。没有细节，只是一些大体的界面轮廓逐渐开始布局。界面设计的拼图游戏就从这样的步骤开始。<br />
        书中提到了一个概念翻译为古藤堡图表，汗颜自己从事这个行业居然没听过这样的一个理论，一直认为我们做的左上角到右下角的设计是根据大量的用户研究结论比如用户眼动研究等方法得出来的，平时设计工作中只是在使用这样的一个图表理论但是从没有仔细的研究过。仔细看看发现很多地方的设计都是这样的一个布局方式，从左上角到右下角的方向是用户的一个习惯方向，很多网页或应用软件都按照这样的方向来进行布局。<br />
举例：</p>
<p style="text-align: left;"><img class="alignnone size-full wp-image-27625" title="taobao" src="http://tina.reeze.cn/wp-content/uploads/2009/11/taobao.jpg" alt="taobao" width="607" height="321" /></p>
<p style="text-align: left;">       淘宝网上的购买和加入购物车在一定程度上也是遵循这个左上到右下的设计准则，引导用户的视线。橙色和蓝色的按钮将用户从主要目标“图片”拉过来，吸引用户注意，让用户有点击购买的倾向，引导购物动作的发生。</p>
<p><img class="alignnone size-full wp-image-27631" title="taobao" src="http://tina.reeze.cn/wp-content/uploads/2009/11/taobao1.jpg" alt="taobao" width="623" height="457" /></p>
<p><img style="width: 520px;" src="http://www.websbook.com/upimg/allimg/090429/08392110.jpg" alt="nerve" width="615" height="450" /></p>
<p>        还有很多类似的设计，使用了这样的左上到右下的设计，安装软件，弹出框的设计等地方，仔细观察都会发现这样的理论应用:)  借鉴其他人的理论并运用在平时的学习和工作中，这对自己是一个很好的提升方法。</p>
<h3> </h3>
]]></content:encoded>
			<wfw:commentRss>http://tina.reeze.cn/2009/11/28/ue/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
