<?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://www.86ue.com/archives/tag/%e7%94%a8%e6%88%b7%e7%95%8c%e9%9d%a2/feed" rel="self" type="application/rss+xml" />
	<link>http://www.86ue.com</link>
	<description>UED web2.0 前端技术 用户体验 SEO 80后</description>
	<lastBuildDate>Sun, 14 Mar 2010 14:02:08 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>UI在中国</title>
		<link>http://www.86ue.com/archives/771</link>
		<comments>http://www.86ue.com/archives/771#comments</comments>
		<pubDate>Tue, 09 Feb 2010 07:02:25 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[设计杂谈]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[用户界面]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=771</guid>
		<description><![CDATA[UI全称User Interface，中文叫“用户界面”。


2000年传入国内，国内最早专业从事UI的公司还是我们的民族软件——金山，据说在2000年已成立人机界面组，虽然只有2个人。金山软件的UI 团队是业内名副其实的黄埔军校，培养了如今江湖上整整一代的设计领袖，并且他们出的作品也深远影响了国产软件的用户体验整体水准。也许早期的金山软件用户们还记得，随后WPS和金山毒霸的界面设计在整个大环境内首屈一指。

 

2001年2月出版的《软件创新之路》中文版，在技术专著角度强调了交互与界面的重要性，为UI概念被广泛认可做好了铺垫。作者叫Alan Cooper，眼熟吧？没错，这本书就是后来2006年3月出版的《交互设计之路》的前辈版本。

 

2001年到2003年之间，国内大小公司相继设立UI职位，同期，不少平面设计和网页设计从业者也开始尝试转行做UI。因为当时从事web design非常不景气，整体水平低下，市场环境糟糕。

 

2003年随着ChinaUI论坛的上线，此概念开始在数字设计领域声名鹊起。如同ChinaUI网站最早的title“欢迎来到中国第一个UI设计网站”，但什么是UI？我估计当时没几个人清楚。同年5月，由金山转会腾讯的唐沐主导了QQ发展史上革命性的界面升级。耳目一新的QQ界面给粉丝们带来了极大惊喜，在外观和人性化方面做了较大改善。
]]></description>
			<content:encoded><![CDATA[<p>UI全称User Interface，中文叫“用户界面”。</p>
<p>2000年传入国内，国内最早专业从事UI的公司还是我们的民族软件——金山，据说在2000年已成立人机界面组，虽然只有2个人。金山软件的UI 团队是业内名副其实的黄埔军校，培养了如今江湖上整整一代的设计领袖，并且他们出的作品也深远影响了国产软件的用户体验整体水准。也许早期的金山软件用户们还记得，随后WPS和金山毒霸的界面设计在整个大环境内首屈一指。</p>
<p>2001年2月出版的《软件创新之路》中文版，在技术专著角度强调了交互与界面的重要性，为UI概念被广泛认可做好了铺垫。作者叫Alan Cooper，眼熟吧？没错，这本书就是后来2006年3月出版的《交互设计之路》的前辈版本。</p>
<p>2001年到2003年之间，国内大小公司相继设立UI职位，同期，不少平面设计和网页设计从业者也开始尝试转行做UI。因为当时从事web design非常不景气，整体水平低下，市场环境糟糕。</p>
<p>2003年随着ChinaUI论坛的上线，此概念开始在数字设计领域声名鹊起。如同ChinaUI网站最早的title“欢迎来到中国第一个UI设计网站”，但什么是UI？我估计当时没几个人清楚。同年5月，由金山转会腾讯的唐沐主导了QQ发展史上革命性的界面升级。耳目一新的QQ界面给粉丝们带来了极大惊喜，在外观和人性化方面做了较大改善。</p>
<p>此后，以UI为主题的设计类网站层出不穷。我当时对UI其实并不太感兴趣，认为与我从事的是两个路子，但每天看到、听到的讨论又不得不去了解相关知识。从概念角度推敲，当时所有软件UI从业者所做的，都应该是Graphical user interface，简称GUI，仅仅只是UI的一个分支。所以，我后来特纳闷，为什么没有Web user interface？也可以简称WUI。</p>
<p><a href="http://en.wikipedia.org/wiki/Graphical_user_interface">http://en.wikipedia.org/wiki/Graphical_user_interface</a></p>
<p>A graphical user interface or GUI is a type of user interface item that allows people to interact with programs in more ways than typing such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands.</p>
<p>首先要肯定概念推广对业界整体实力的推动作用，但因对概念理解的不清晰，甚至误导，绝大多数同行认为“UI等于网页设计”，更有人认为“UI是专业的网页设计”。很大程度上影响了当时的web design主流审美，当时所谓好的“网页”设计，要么是一幅全由图片拼接的平面大作，要么就是由各种华丽的UI控件堆砌而成软件皮肤，丝毫看不到任何 web design的技巧和内涵。</p>
<p>注意，软件的UI设计与网页的UI设计完全是两套知识体系。对于软件UI来说，设计师能够操作到的仅仅是视觉的表现层，所以从事软件UI的基本都是视觉设计师；而网站UI在表现原理上有很大区别，不是视觉设计师天马行空想象就能做，也不是所见即所得做出来的样子马上就可以用在页面上。关键网页表现层还有个Front-End的概念，所有界面控件表现都通过代码来落实，这是web最终用户体验的质量总控。</p>
<p>针对互联网产品而言，当时有同行认为真正的UI专业流程，应该是用户研究、需求分析、架构设计、交互设计、可用性测试整个过程。我认为错的很离谱，因为对概念层级理解的模糊，导致对整个体系的认识存在缺陷。以点盖面，以偏盖全，后来的“交互设计”也走入此误区。</p>
<p><a href="http://mashable.com/2009/01/09/user-experience-design/">http://mashable.com/2009/01/09/user-experience-design/</a></p>
<p>It’s not uncommon to confuse “user experience” with “user interface” — after all it’s a big part of what users interact with while experiencing digital products and services. But the UI is just one piece of the puzzle.</p>
<p>就我目前的实践经验来看，比较认同《用户体验的要素》作者的总结——界面设计只是框架层的一部分，与信息设计、导航设计并列组成用户真正能够看到和使用的原型。Web设计中典型的Web UI是表单，几乎每个系统、平台都有，也是处理用户交互行为最容易出问题的难点。</p>
<p>GUI背景设计师做网站，有很显著的GUI风格，我观察中外很多设计师作品得出的结论。因为他们对web构建原理的认识不够，还有本身产出技能上的习惯差异所致。当然，也有个中高手，能够融洽的处理两者差异。总体上来看，因为GUI与WUI各专业体系纵深发展的日趋分化，顶尖GUI高手一般只专注于 GUI领域。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/771/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何精简用户界面</title>
		<link>http://www.86ue.com/archives/697</link>
		<comments>http://www.86ue.com/archives/697#comments</comments>
		<pubDate>Mon, 18 Jan 2010 09:01:51 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[用户界面]]></category>
		<category><![CDATA[精简]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=697</guid>
		<description><![CDATA[简洁、易用、友好、直观。这些词语经常被提及，但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果，减少复杂的操作过程并精简操作界面，那该软件的用户体验就大大的提升了。


<strong>去除无用的功能</strong>

研究发现：80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间，也使得软件更加难以使用（这些功能对用户的阻碍作用大于有用价值）。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的，可单独智能化的解决单个问题。
精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务，那么可以将其排除在外。删除功能是艰难的，当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。

<strong>隐藏复杂部分</strong>

如果实在无法去除某个复杂功能，那么就将其隐藏。通常情况下，不常使用的功能要比经常使用的功能占据更多的屏幕**。而优秀的界面应该确保最常用的功能在最显著的位置，将不常用的功能隐藏。

当我们重新设计CMS系统时，我们无法去除一个复杂的功能：批量编辑功能。在之前的版本里，在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域，但我们发觉很少有人会用到此功能。我们的解决方法是，放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的**，也不会干扰用户使用那些最基本的功能。

<a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png" alt="" title="minimizing-complexity-in-user-interfaces_1" width="260" height="173" class="aligncenter size-full wp-image-703" /></a>

<a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png" alt="" title="minimizing-complexity-in-user-interfaces_1_" width="260" height="173" class="aligncenter size-full wp-image-704" /></a>

最小化视觉干扰我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是：空白与对比。]]></description>
			<content:encoded><![CDATA[<p>简洁、易用、友好、直观。这些词语经常被提及，但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果，减少复杂的操作过程并精简操作界面，那该软件的用户体验就大大的提升了。</p>
<p><strong>去除无用的功能</strong></p>
<p>研究发现：80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间，也使得软件更加难以使用（这些功能对用户的阻碍作用大于有用价值）。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的，可单独智能化的解决单个问题。<br />
精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务，那么可以将其排除在外。删除功能是艰难的，当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。</p>
<p><strong>隐藏复杂部分</strong></p>
<p>如果实在无法去除某个复杂功能，那么就将其隐藏。通常情况下，不常使用的功能要比经常使用的功能占据更多的屏幕**。而优秀的界面应该确保最常用的功能在最显著的位置，将不常用的功能隐藏。</p>
<p>当我们重新设计CMS系统时，我们无法去除一个复杂的功能：批量编辑功能。在之前的版本里，在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域，但我们发觉很少有人会用到此功能。我们的解决方法是，放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的**，也不会干扰用户使用那些最基本的功能。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png" alt="" title="minimizing-complexity-in-user-interfaces_1" width="260" height="173" class="aligncenter size-full wp-image-703" /></a></p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png" alt="" title="minimizing-complexity-in-user-interfaces_1_" width="260" height="173" class="aligncenter size-full wp-image-704" /></a></p>
<p>最小化视觉干扰我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是：空白与对比。</p>
<p>空白，是指介于各个元素之间的间隙。它应是你默认的布局工具。经典法则之一：如果可以使用空白就不要放置其他设计元素。如果用这种方式布局，你会很惊讶调整界面的空白就可以完成布局了。</p>
<p>虽然使用空白多多益善，但也要尽可能的保证有对比感。设计理论家说：设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_2.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_2-e1263706322124.png" alt="" title="minimizing-complexity-in-user-interfaces_2" width="513" height="175" class="aligncenter size-full wp-image-705" /></a></p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/typekit_modified.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/typekit_modified-e1263804890609.png" alt="" title="typekit_modified" width="513" height="174" class="aligncenter size-full wp-image-718" /></a></p>
<p>你可以看到修改过的版本有很重的黑线，与之前的边框不同。那个版本视觉干扰更小呢？（当然是原来的更好）大量的空白区域减少视觉干扰并让人觉得更舒适。</p>
<p>做减法、重复使用，循环利用当软件成形后，问题经常发生在程序的各个结合部分。存在的问题往往可以通过相同方法加以解决。界面中应使用相同的组件。使用相同组件的两个好处：减少开发所需时间；给人一致的使用体验，如果用户学会使用一个操作，他们就可以把相同的操作行为运用到进行其他操作中去。</p>
<p>在设计CMS过程中，我们在表单验证上花费了大量的时间。我们用红色框出无效的区域，甚至增加红色的提示框来说明每个填写表单的环节有多少错误。</p>
<p>在之后的开发过程中，我们在需求列表中增加了版本比较的功能。与其创建全新的框架，不如使用在已有的框架上进行改进。我们用蓝框标出已修改的表单，并使用蓝色提示框标注该区域。通过这种方法我们快速部署到用户已经熟悉的界面上。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_3.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_3-e1263804965979.png" alt="" title="minimizing-complexity-in-user-interfaces_3" width="521" height="264" class="aligncenter size-full wp-image-706" /></a></p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_4.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_4-e1263805022766.png" alt="" title="minimizing-complexity-in-user-interfaces_4" width="521" height="263" class="aligncenter size-full wp-image-707" /></a></p>
<p>重复使用元素是另一种可以减少界面复杂的方法，因为用户可以迅速的熟悉软件。</p>
<p>空白状态不应空白空白状态是指界面无数据时的样子，如用户初次使用软件。作为设计师，我们花费大部分精力用来设计如何最好的展示内容，但时常忘记如何展示无数据的样子。</p>
<p>如何建立合理的默认值是很重要的。软件的空白状态通常是给用户的第一印象，用户通过第一印象来考虑是否来使用软件。好的空白状态可有助于用户学习使用软件的途径，帮助用户学会初次使用软件的基础操作。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_5.gif"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_5.gif" alt="" title="minimizing-complexity-in-user-interfaces_5" width="498" height="452" class="aligncenter size-full wp-image-708" /></a></p>
<p>Versions的mac版本显然在程序的空白状态投入了很多心思。在首次运行的时候，程序突出了两大人们可能会用得到的功能。</p>
<p>再次重复：不要忘记空白状态！</p>
<p>相关展示我们已经见过大量界面混乱，复杂的软件。然而，有效的减少程序的复杂性有点难度。</p>
<p>Invoice Machine 的界面十分的简约。示例显示它非常节约扩展部分并注重细节。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_6.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_6.jpg" alt="" title="minimizing-complexity-in-user-interfaces_6" width="435" height="290" class="aligncenter size-full wp-image-709" /></a></p>
<p>Freckle只是确保你可以跟踪自己的时间。简洁的界面闪现活力，将例行任务变得有趣。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_7.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_7.jpg" alt="" title="minimizing-complexity-in-user-interfaces_7" width="435" height="290" class="aligncenter size-full wp-image-710" /></a></p>
<p>Image Spark黑白色的渐变。界面几乎没视觉干扰，易于使用。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_8.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_8.jpg" alt="" title="minimizing-complexity-in-user-interfaces_8" width="435" height="290" class="aligncenter size-full wp-image-711" /></a></p>
<p>Ballpark有简洁的界面，用色不跳。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_9.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_9.jpg" alt="" title="minimizing-complexity-in-user-interfaces_9" width="435" height="290" class="aligncenter size-full wp-image-712" /></a></p>
<p>Krop，其核心就两个表单：地址与关键词。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_10.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_10.jpg" alt="" title="minimizing-complexity-in-user-interfaces_10" width="435" height="290" class="aligncenter size-full wp-image-713" /></a></p>
<p>Fever网站的整个目的就是减少你与感兴趣博客之间的距离。它通过非常简单独特的方式来实现。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_11.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_11.jpg" alt="" title="minimizing-complexity-in-user-interfaces_11" width="435" height="290" class="aligncenter size-full wp-image-714" /></a></p>
<p>Screenr 是个惊人的简单截屏并发布到Twitter的软件。值得注意的是没有的功能它有，但其他类似软件有的功能它都没有。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_12.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_12.jpg" alt="" title="minimizing-complexity-in-user-interfaces_12" width="435" height="290" class="aligncenter size-full wp-image-715" /></a></p>
<p>Squarespace 在隐藏复杂功能方面做得很好。虽然它是网络的发布平台，它把功能隐藏在一个简洁的界面中。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_13.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_13.jpg" alt="" title="minimizing-complexity-in-user-interfaces_13" width="435" height="290" class="aligncenter size-full wp-image-716" /></a></p>
<p>总结</p>
<p>    * 减掉不必要的功能；<br />
    * 然后隐藏那些不能减掉的功能；<br />
    * 减少视觉噪音并重复利用元素；<br />
    * 使用空白帮助用户；</p>
<p>(翻译略有删减)<br />
英文地址：<a href="http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/">http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/</a><br />
原文地址：<a href="http://blog.uxredesign.com/interactive-design/minimizing-complexity-in-user-interfaces/">http://blog.uxredesign.com/interactive-design/minimizing-complexity-in-user-interfaces/</a></p>
<p>来源：<a href="http://forum.chinaui.com/viewthread.php?tid=67424&#038;extra=page%3D1">http://forum.chinaui.com/viewthread.php?tid=67424&#038;extra=page%3D1</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/697/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
