<?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; UI</title>
	<atom:link href="http://www.houshidai.com/tag/ui/feed" rel="self" type="application/rss+xml" />
	<link>http://www.houshidai.com</link>
	<description></description>
	<lastBuildDate>Fri, 11 Oct 2019 03:37:37 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>Ribbon UI用户界面设计</title>
		<link>http://www.houshidai.com/product/ribbon-ui.html</link>
		<comments>http://www.houshidai.com/product/ribbon-ui.html#comments</comments>
		<pubDate>Tue, 19 Feb 2013 14:02:50 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[产品]]></category>
		<category><![CDATA[Ribbon]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[windows8]]></category>
		<category><![CDATA[微软]]></category>
		<category><![CDATA[界面设计]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=6941</guid>
		<description><![CDATA[Ribbon UI最早应用于Office 2007中，后来也被运用到 Windows 7 的一些附件中，如画图 [...]]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ribbon" title="查看 Ribbon 中的全部文章" target="_blank">Ribbon</a></span> <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>最早应用于Office 2007中，后来也被运用到 Windows 7 的一些附件中，如画图（Paint）和写字板（Write）。在Windows 8中，<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ribbon" title="查看 Ribbon 中的全部文章" target="_blank">Ribbon</a></span> 被运用到文件资源管理器（File Explorer）中。</p>
<p><img class="alignnone size-full wp-image-6942" title="Ribbon-UI" src="http://www.houshidai.com/wp-content/uploads/2013/02/Ribbon-UI.jpg" alt="" width="600" height="220" /></p>
<p><span id="more-6941"></span></p>
<p>什么是Ribbon <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>？</p>
<p>Ribbon <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>，是新的 Microsoft Office Fluent 用户界面 (UI) 的一部分。在仪表板设计器中，功能区包含一些用于创建、编辑和导出仪表板及其元素的上下文工具。它是一个收藏了命令按钮和图示的面板。它把命令组织成一组&#8221;标签&#8221;，每一组包含了相关的命令。每一个应用程序都有一个不同的标签组，展示了程序所提供的功能。在每个标签里，各种的相关的选项被组在一起。Windows Ribbon是一个Windows（Windows Vista/Windows 7）自带的GUI构架，外形更加华丽，但也存在一部分使用者不适应，抱怨无法找到想要的功能的情形。</p>
<p>根据<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ms" title="查看 微软 中的全部文章" target="_blank">微软</a></span>公司的调查统计，虽然Windows Explorer提供了近200种的功能，但调查结果显示，最常用的10个功能的使用时间，竟占了全功能使用时间的81.8%，其中前五位的功能分别是粘贴（19%），属性(11%)，拷贝(11%)，删除(10%)以及更改文件名(8%)。鉴于这种现状，Windows 8开发团队决定在Windows Explorer中导入Ribbon UI，以帮助用户更有效率的执行各种常用的文件操作。</p>
<p>Windows8消费者预览版发布之后，针对“Ribbon”界面这一设计反馈如何呢？<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ms" title="查看 微软 中的全部文章" target="_blank">微软</a></span>官方做了一个有趣的调查，看看用户对Win8消费者预览版中的“Ribbon”界面究竟是何评价。</p>
<p>微软去年八月份就曾撰文介绍Windows8中资源管理器的“Ribbon”界面，可以提供更多功能；鉴于“Ribbon”界面屡占窗口空间，并给人以“头重脚轻”的感觉，Win8默认将“Ribbon”界面隐藏起来；但同时也有用户喜欢这一设计，可以便于获取更多的功能和快速操作。调查结果显示，有22.5%的用户在Win8消费者预览版中将“Ribbon”界面设置为展开状态（默认隐藏），并一直保持为展开。</p>
<p>Ribbon是可一键折叠的。点击右上角的箭头图标，就会收缩成如下形状：</p>
<p><img src="https://yofocq.bn1.livefilestore.com/y1pzcXB_aWNE5lLLz1d3-O8PgzFSDcqvDPstH6CXa5XgySPAdZnSTMGLAmiKY1LihLKMlFz7FT52jLEaQGUGgmg-aoPQUFeVHXo/Ribbon-UI-folder.jpg?psid=1" alt="" /></p>
<p>选中磁盘后：以前需要右键-&gt;属性-&gt;磁盘清理，现在只需要点击[Disk Tool]中的[Clean Up]。</p>
<p><img src="https://yofocq.bn1.livefilestore.com/y1pguh_Z1gdVA4QHYtY6w54kxEdw_RmES_v3BSeLuuta0WR4tObj8haruacfQIs0TToC5u0RPCEOhbpW0OGIe6nrB1CGXSKYhKa/Ribbon-UI2.jpg?psid=1" alt="" /></p>
<p>在Microsoft office应用程序中，Ribbon用户界面(UI)功能替代了当前系统的层级菜单、工具栏和任务窗格，使得系统界面更简单，更易找到命令，使用更有效率。Ribbon可扩展性(RibbonX)引入了一个创新的模型，可以增强用户体验。使用可扩展标识语言(XML)和几种传统的编程语言之一来操作组成RibbonUI的组件。</p>
<p>跟传统的菜单式用户界面相比较，Ribbon UI界面的优势主要体现在如下几个方面：</p>
<p>所有功能有组织地集中存放，不再需要查找级联菜单、工具栏等等 ；</p>
<p>更好地在每个应用程序中组织命令；</p>
<p>提供足够显示更多命令的空间；</p>
<p>丰富的命令布局可以帮助用户更容易地找到重要的，常用的功能；</p>
<p>可以显示图示，对命令的效果进行预览，例如改变文本的格式等；</p>
<p>更加适合触摸屏操作；</p>
<p>虽然从菜单式界面到Ribbon界面有一个漫长的熟悉的过程，但是一个不争的事实是，Ribbon界面正在被越来越多的人接受，相应的，越来越多的软件开发商开始抛弃传统的菜单式界面，转而采用Ribbon界面。</p>
<p>Ribbon UI 分析：</p>
<p>Ribbon的菜单和按钮主要集中在程序最上方，以tab和分类的形式展现，功能的布局很有条理。某些按钮平时是隐藏的，只有需要用时才会自动出来。此外，据微软称，Ribbon专门为1024X768的分辨率做过优化。之前的ALT+F组合键打开程序菜单的方法依然有效。</p>
<p><img src="https://yofocq.bn1.livefilestore.com/y1pa1-yS6FcwUj8YSvxTug1zrwDjJKjgWOi4FkL1dlOwQUGUUBqiAFu3IU98Mv3Lm8qsem7Rp6bJh8C3YIoYt4CKCFtkUAqgwDL/Ribbon-UI-design.jpg?psid=1" alt="" /></p>
<p>Office Ribbon功能区：</p>
<p>Microsoft Word从Word2007升级到Word2010，其最显著的变化就是使用“文件”按钮代替了Word2007中的Office按钮，使用户更容易从Word2003和Word2000等旧版本中转移。另外，Word2010同样取消了传统的菜单操作方式，而代之于各种功能区。在Word2010窗口上方看起来像菜单的名称其实是功能区的名称，当单击这些名称时并不会打开菜单，而是切换到与之相对应的功能区面板。每个功能区根据功能的不同又分为若干个组。</p>
<p>1．“开始”功能区</p>
<p>“开始”功能区中包括剪贴板、字体、段落、样式和编辑五个组，对应Word2003的“编辑”和“段落”菜单部分命令。该功能区主要用于帮助用户对Word2010文档进行文字编辑和格式设置，是用户最常用的功能区。</p>
<p>2．“插入”功能区</p>
<p>“插入”功能区包括页、表格、插图、链接、页眉和页脚、文本、符号和特殊符号几个组，对应Word2003中“插入”菜单的部分命令，主要用于在Word2010文档中插入各种元素。</p>
<p>3．“页面布局”功能区</p>
<p>“页面布局”功能区包括主题、页面设置、稿纸、页面背景、段落、排列几个组，对应Word2003的“页面设置”菜单命令和“段落”菜单中的部分命令，用于帮助用户设置Word2010文档页面样式。</p>
<p>4．“引用”功能区</p>
<p>“引用”功能区包括目录、脚注、引文与书目、题注、索引和引文目录几个组，用于实现在Word2010文档中插入目录等比较高级的功能。</p>
<p>5．“邮件”功能区</p>
<p>“邮件”功能区包括创建、开始邮件合并、编写和插入域、预览结果和完成几个组，该功能区的作用比较专一，专门用于在Word2010文档中进行邮件合并方面的操作。</p>
<p>6．“审阅”功能区</p>
<p>“审阅”功能区包括校对、语言、中文简繁转换、批注、修订、更改、比较和保护几个组，主要用于对Word2010文档进行校对和修订等操作，适用于多人协作处理Word2010长文档。</p>
<p>7．“视图”功能区</p>
<p>“视图”功能区包括文档视图、显示、显示比例、窗口和宏几个组，主要用于帮助用户设置Word2010操作窗口的视图类型，以方便操作。</p>
<p>8．“加载项”功能区</p>
<p>“加载项”功能区包括菜单命令一个分组，加载项是可以为Word2010安装的附加属性，如自定义的工具栏或其它命令扩展。“加载项”功能区则可以在Word2010中添加或删除加载项。</p>
<p>Ribbon UI的历史</p>
<p>Ribbon主要来自于此前的Office组件。当时由于原有的界面已经过时，并且用户抱怨经常找不到要用的功能。因此微软寻求各种方法用于代替传统的基于菜单和工具栏的界面。在进行了大量的测试之后，微软的程序员找到了如今我们熟悉的Ribbon界面。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/product/ribbon-ui.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Metro风格界面设计</title>
		<link>http://www.houshidai.com/design/metro.html</link>
		<comments>http://www.houshidai.com/design/metro.html#comments</comments>
		<pubDate>Thu, 13 Dec 2012 14:00:25 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[设计]]></category>
		<category><![CDATA[Metro]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[微软]]></category>
		<category><![CDATA[界面设计]]></category>
		<category><![CDATA[简洁]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=6664</guid>
		<description><![CDATA[Metro[ˈmetrəʊ]，译为：城市地铁(Metropolitan Railway) Metro是由微软公 [...]]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/metro" title="查看 Metro 中的全部文章" target="_blank">Metro</a></span>[ˈmetrəʊ]，译为：城市地铁(<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/metro" title="查看 Metro 中的全部文章" target="_blank">Metro</a></span>politan Railway)</p>
<p><img class="alignnone size-full wp-image-6665" title="Metro" src="http://www.houshidai.com/wp-content/uploads/2012/12/Metro.jpg" alt="" width="600" height="220" /></p>
<p><span id="more-6664"></span></p>
<p>Metro是由<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ms" title="查看 微软 中的全部文章" target="_blank">微软</a></span>公司开发的内部名称为“typography-based design language”（基于排版的设计语言）。最早出现在<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ms" title="查看 微软 中的全部文章" target="_blank">微软</a></span>电子百科全书95，后来的产品如：windows媒体中心、Zune播放器都有用到这项技术。该技术已于2010年初（美国）获得Metro <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>专利批准（USPTO）如今该技术被引入到微软最新开发的Windows Phone操作系统和已经发布的Windows 8预览版以及Office15中。</p>
<p>Metro <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉。</p>
<p>Metro设计的起源：</p>
<p>Metro基于瑞士平面设计的设计原则，本设计原则在Windows XP的Windows Media Center中有体现，这有利于以文字为主的界面导航。2006年，Zune开始使用类似Metro的设计风格。微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的电脑端配套程序也使用了不同于以往Portable Media Center用户界面的清爽排版和设计。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pnC-04KJ1QH_ual20HF8ednZSrSe7K86HA0QgSmtkYJ2_ZyijK3r3X3chUU6qh7g7dUBHKly9hocA8OudM5wUbyPxLlgAKLDM/Metropolitan.jpg?psid=1" alt="" /></p>
<p>Metro的设计意念来源于交通局巴士站站牌机场和地铁的指示牌给了微软设计团队灵感，设计团队说Metro是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，其风格大量采用大字体，能吸引受众之注意力。微软认为Metro设计主题应该是：“光滑、快、现代”。Metro的图标设计也会不同于Android和iOS。</p>
<p>Metro <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>设计具备以下五点原则：</p>
<p>1. 干净、轻量、开放、快速<br />
2. 要内容，而不是质感<br />
3. 整合软硬件<br />
4. 世界级的动画<br />
5. 生动，有灵魂</p>
<p>Metro瑞士平面设计风格概述:</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pm1hMNlRBc8GkuUneJ_c_CB5UOZiWehiViVJfhS4iD_Ba7X6RSOpprUesAS-UBFim9yIdfmbpNo9kIgeT15NiftftD_34vfb9/%E7%91%9E%E5%A3%AB%E5%B9%B3%E9%9D%A2%E8%AE%BE%E8%AE%A1.jpg?psid=1" alt="" /></p>
<p>20世纪50年代期间，一种崭新的平面设计风格终于在联邦德国与瑞士形成，被称为“瑞士平面设计风格”，由于这种风格简单明确，传达功能准确，因此很流行与全世界，成为二战后影响最大，国际最流行的设计风格，因此被称为“国际主义平面设计风格”。瑞士平面设计风格稳健，四平八稳的传达设计，给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格，瑞士设计家大部分不同意这种看法，他们往往强调瑞士国家虽然小，但是设计风格变化多端，极为丰富。</p>
<p>Windows 8看Metro风格IE 10视频</p>
<p><object width="600" height="450" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" align="middle"><param name="src" value="http://player.youku.com/player.php/sid/XMzA0MjIwNjE2/v.swf" /><param name="quality" value="high" /><param name="allowscriptaccess" value="sameDomain" /><param name="allowfullscreen" value="true" /><embed width="600" height="450" type="application/x-shockwave-flash" src="http://player.youku.com/player.php/sid/XMzA0MjIwNjE2/v.swf" quality="high" allowscriptaccess="sameDomain" allowfullscreen="true" align="middle" /></object></p>
<p>微软IE10浏览器，在开发过程中使用了最新的HTML5和JavaScript改进。etro是微软内部代码的一种名称，主要用于<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/gui" title="查看 界面设计 中的全部文章" target="_blank">界面设计</a></span>。这种俗称为“方块和文字（tile and text）”用户界面，对于其他产品微软也将采取类似的做法。</p>
<p>Metro UI界面：</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pnC-04KJ1QH8vODJQL-BWvFtOpQe1A17eWReEJOPsWL3-lrIzeKcgExVAg_3QoCjYpiW9G8Z9fR6fr2FpWUYSXiTlAsqFYk91/Metro_lockScreen_page.jpg?psid=1" alt="" /></p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pm1hMNlRBc8G17ZxLwCG8jwLDTbBEsZYVc_C4bvmQLquzlfXNBj3s4o8BPA9UFF2nmZIAvFJTH8pU3F9Jta--dFrSF7F5fogc/screenshot_photoPicker_page.jpg?psid=1" alt="" /></p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pqt7xp_I_93OlhFKJZalIZcnclXJNdj-x1I_j9LA4LYhyGGprH1ic2yxFynfQwBXNwtblG8u7nzifz2k8DTKZ1zLUeudVAsd6/screenshot_keyboard_page.jpg?psid=1" alt="" /></p>
<p>Metro现状：</p>
<p>Metro是微软在Windows Phone中正式引入的一种<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/gui" title="查看 界面设计 中的全部文章" target="_blank">界面设计</a></span>语言，也是Windows 8的主要界面显示风格。在Windows Phone之前，微软已经在Zune Player和XBox 360主机中尝试采用过类似的界面风格，并得到了用户的广泛认可。于是，微软在新发布的Windows Phone、已经发布的Windows 8预览版以及Office 15、Xbox live中也采用了Metro设计，今后的微软产品中将更多的能看到Metro的影子，而更少的看到传统的Windows视窗界面。</p>
<p>“Windows8”推出的一个专为触摸而设计的最新Metro风格界面，能向用户显示重要信息，这个界面同时支持鼠标和键盘，并应用于平板设备。Metro风格<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/gui" title="查看 界面设计 中的全部文章" target="_blank">界面设计</a></span>风格优雅，可以令用户获取一个美观、快捷流畅的 Metro 风格的界面和大量可供使用的新应用程序。这些应用程序拥有远远超出图形设计范畴的新特性（一个平台）。正如微软所展示的那样，通过出色的触控体验，同时又可以使用鼠标、触控板和键盘工作。如果用户希望永远沉浸在Metro界面中，那么将永远不会看到桌面，除非刻意选择，否则系统甚至不会加载它，这样的Windows 将焕然一新。将在Windows8中开放的Windows应用程序市场（类似于iOS里面的App Store）也使用并推荐采用Metro风格界面的应用程序。</p>
<p>2012年10月随着WP8与Win8的发布，微软在提及Windows8全新开始屏幕（Start Screen）时开始使用 &#8220;Metro(新Windows UI)&#8221;设计一词。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1p9ERKaL48qcBN-NjeGgV-zZvA__WwEROA_cwgDDu_pCO67c8poXL7-IW3j4kIImsG-vt7PahUG3aXbvcfriyuYGlIKd9WZkAV/Segoe-WP.jpg?psid=1" alt="" /></p>
<p>Metro风格的应用是针对你的用户需求而设计的全屏幕应用程序。他针对其所运行的设备所设计，针对触摸屏幕及Windows用户界面优化。Windows帮助你与你的用户进行交互，从而使用户与你的应用产生互动。</p>
<p>针对你的用户所设计的应用</p>
<p>当用户使用Metro应用时，他应该能体验到：</p>
<p>沉浸式：你的Metro应用应该是全屏幕的，让用户沉浸在你所创建的体验之中。在这种全屏体验中，用户能极力享受到他所喜爱的内容。为了充分展示你的内容，我们移除了不是必须的操作系统的边框。你的应用程序就是Windows的核心体验。请充分利用屏幕的空间来设计你的应用程序，但不要让他过于杂乱。让用户专注于他需要专注的任务之中。</p>
<p>增进与活跃：你的Metro应用能帮助用户找到他们关注的信息。Live tiles的更新帮助用户在第一时间找到有用的兴趣，并引导用户进入你的应用程序。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1p65fdQGUuaTHQR8QVNjMlqOZStSWQ8J8DTTCzkaHXRF0KiQ4dSaS6aHdTWdhJdR2EkUFFOIjvjDN-r-1aXiig-fUP1oewoDfm/Lumia.jpg?psid=1" alt="" /></p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pqt7xp_I_93MZnk3ccwT6WqHiLENLUWTDpg8qEsefGxmNftLjXRst_F_RGMiGOLlr6klDYA92QH6KpCdvZzvp8LZDexpYnNXk/panorama.jpg?psid=1" alt="" /></p>
<p>活动方格设计：在Metro界面中，应用都以可以翻转的方形图标的形式呈现在主界面中。他们就好似是多宝格中的 “收藏品”一样，每一个应用都会给用户爱不释手的感觉。可翻转的图标，同时又印证了多宝格精致的机关设计，给人以一种不断幻化的新奇感。让人忍不住去探索 Metro UI中的各种内容。</p>
<p>开始画面帮助展示你应用最好的一面。App tiles上呈载了实时的状态与更新，来鼓励用户进入你的应用。当我们设计tiles，我们应当：</p>
<p>1、突出你的品牌。app tile能帮助你视觉化你的品牌。应当设计得有足够吸引力以及与其它应用的差异化。</p>
<p>2、在app tile上尽可能的展现用户关注的信息以及更新。你会寄希望于用户经常来查看你的tile，查看最新的应用中的更新。你寄希望于这些更新能吸引你的用户点击使用你的应用。考虑周全的信息设计能充分增进你的用户与应用的联系。</p>
<p>Hotmail Metro官方配色：</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pwoXctWxouQ-PaO1afQb5FPyUaNg4YW9iM2-jmFcaXGi40DA-Ejzh3HMso7oKgqhy3rLCj92bA4eP0mBpVHKAYizsQfljwYnc/hotmail.jpg?psid=1" alt="" /></p>
<p>为多任务而设计:</p>
<p>当应用程序全屏幕运行时，Windows同时也能支持多任务操作。</p>
<p>1、Snapped View。用户喜欢同时做多件事情。他们希望使用你的应用时同时还能聊天、上网、看视频或其它，所以请让你的snap view能满足用户的需求，同时在Snap以及非Snap状态时能流畅的切换。</p>
<p>2、Filled View。用户可能将其它应用作为Snap View而把你的应用作为Filled View。注意考虑到水平方向减少面积时你的应用如何更好的适应。</p>
<p><img src="https://zumnra.bay.livefilestore.com/y1pAFRxqOa4iSr9jcGmNZbP2y1lb8ijMI8tsuzW8GQrY8fDIdRnUbxtkzwPCKuMRZbmICcc1oWex6gg29PVXLd_5Q1Uv73hpyAq/win8.jpg?psid=1" alt="" /></p>
<p>Win8启动界面</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/design/metro.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Firefox OS概念设计UI界面</title>
		<link>http://www.houshidai.com/product/firefox-os-phone.html</link>
		<comments>http://www.houshidai.com/product/firefox-os-phone.html#comments</comments>
		<pubDate>Thu, 27 Sep 2012 14:00:15 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[产品]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[手机]]></category>
		<category><![CDATA[概念设计]]></category>
		<category><![CDATA[界面设计]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=6083</guid>
		<description><![CDATA[Firefox OS UI设计界面： 配合Firefox OS智能手机2013年初将巴西上市。最近几个月的Fi [...]]]></description>
			<content:encoded><![CDATA[<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/firefox" title="查看 Firefox 中的全部文章" target="_blank">Firefox</a></span> OS <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>设计界面：</p>
<p><img class="alignnone size-full wp-image-6084" title="Firefox-OS" src="http://www.houshidai.com/wp-content/uploads/2012/09/Firefox-OS.jpg" alt="" width="600" height="220" /></p>
<p><span id="more-6083"></span></p>
<p>配合<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/firefox" title="查看 Firefox 中的全部文章" target="_blank">Firefox</a></span> OS智能<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/phone" title="查看 手机 中的全部文章" target="_blank">手机</a></span>2013年初将巴西上市。最近几个月的Firefox OS测试版的实际体验，已经和当初设计基本接近了，而且设计稿也不再是秘密。现在又有15张新的实体<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/conceptdesign" title="查看 概念设计 中的全部文章" target="_blank">概念设计</a></span>图被Mozilla分享出来。让我们来看一看Firefox OS在细节上的调整和更新吧：</p>
<p><object width="600" height="450" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" align="middle"><param name="src" value="http://player.youku.com/player.php/sid/XNDQ4NjE0MzM2/v.swf" /><param name="quality" value="high" /><param name="allowscriptaccess" value="sameDomain" /><param name="allowfullscreen" value="true" /><embed width="600" height="450" type="application/x-shockwave-flash" src="http://player.youku.com/player.php/sid/XNDQ4NjE0MzM2/v.swf" quality="high" allowscriptaccess="sameDomain" allowfullscreen="true" align="middle" /></object></p>
<p>中兴firefox原型机演示视频。</p>
<p><img src="https://public.bay.livefilestore.com/y1pHB8PEC_kH141DPVmHavcpPBNuokBNpuCwyS_C45pIumV6MUnFKaLQLpelIynyX0xfLjlbYgdSYvTWqB0jLcB8A/Firefox-icon.jpg?psid=1" alt="" /></p>
<p>Firefox OS精致图标</p>
<p><img src="https://public.bay.livefilestore.com/y1pXjt8kPUnKQtBQr6Jy0A8n_oaeJ1RsoDBNYzJmnn8WppXEVsPrHNwEbSwxBaq--aiEqINcRKc6guMiQlol0UrtQ/Firefox-OS-UI.jpg?psid=1" alt="" /></p>
<p>Firefox OS待机界面浏览器打开页</p>
<p><img src="https://public.bay.livefilestore.com/y1pQfLWKs1VJ-35qaWMmXJ-xAjdixAUNcQJF3s-E0iOjVw4PIkRBlmFL7oxExn6QbNRDWoDf_NFrX_osV6pikMU7g/Firefox-UI.jpg?psid=1" alt="" /></p>
<p>Firefox OS锁屏和时钟</p>
<p><img src="https://public.bay.livefilestore.com/y1psyNWR01idxJvBs-8THCgycrmOvJYeLBn6uPeCzsSF1JYRDBRBBmJy0cKM0wkoq5snOSPT3zgnPfzutDdJtQiNQ/FirefoxFM.jpg?psid=1" alt="" /></p>
<p>Firefox OS音乐列表和播放器</p>
<p><img src="https://public.bay.livefilestore.com/y1pQfLWKs1VJ-1PJO5_1QvwQ2a-DA4Nw1F-6EkyIKnvevTwDn--ogqoDLxjp3af0-sRJ_VRLB-2faqOtg-mYYDE6g/Firefox-OS-UI-design.jpg?psid=1" alt="" /></p>
<p>Firefox OS图库和FM收音机</p>
<p>Firefox OS<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/conceptdesign" title="查看 概念设计 中的全部文章" target="_blank">概念设计</a></span><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>界面高清大图<a title="Firefox OS概念设计UI界面高清大图" href="https://www.dropbox.com/sh/greut0yn0o7hx5t/DYSCHY9MXC#/" target="_blank">&gt;&gt;&gt;</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/product/firefox-os-phone.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MIUI是什么？</title>
		<link>http://www.houshidai.com/video/miui.html</link>
		<comments>http://www.houshidai.com/video/miui.html#comments</comments>
		<pubDate>Sun, 21 Aug 2011 14:11:19 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[视频]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[MIUI]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[小米手机]]></category>
		<category><![CDATA[广告]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=4263</guid>
		<description><![CDATA[前面为大家介绍了“雷军和他的小米手机”，今天解读一下什么是MIUI： MIUI是小米公司旗下基于Android [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-4264" title="miui" src="http://www.houshidai.com/wp-content/uploads/2011/08/miui.jpg" alt="" width="600" height="220" /></p>
<p>前面为大家介绍了“<a title="小米手机" href="http://www.houshidai.com/product/xiaomi.html" target="_blank">雷军和他的小米手机</a>”，今天解读一下什么是<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/miui" title="查看 MIUI 中的全部文章" target="_blank">MIUI</a></span>：</p>
<p><span id="more-4263"></span></p>
<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/miui" title="查看 MIUI 中的全部文章" target="_blank">MIUI</a></span>是小米公司旗下基于<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/android" title="查看 Android 中的全部文章" target="_blank">Android</a></span>系统深度优化、定制、开发的第三方手机操作系统，能够带给国内用户更为贴心的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/android" title="查看 Android 中的全部文章" target="_blank">Android</a></span>智能手机体验。从2010年8月16日首个内测版发布至今，<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/miui" title="查看 MIUI 中的全部文章" target="_blank">MIUI</a></span>目前已经拥有国内外50万的发烧友用户，享誉中国、英国、德国、西班牙、意大利、澳大利亚、美国、俄罗斯、荷兰、瑞士、巴西等多个国家。BTW:我们小组都念“米<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>”。</p>
<p><strong>MI<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>官方网站</strong>：<a title="MIUI" href="http://www.miui.com/" target="_blank">http://www.miui.com/</a></p>
<p>MIUI官方宣传视频：</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="450" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="align" value="middle" /><param name="src" value="http://player.youku.com/player.php/sid/XMjk1MTc2OTAw/v.swf" /><param name="allowfullscreen" value="true" /><param name="quality" value="high" /><embed type="application/x-shockwave-flash" width="600" height="450" src="http://player.youku.com/player.php/sid/XMjk1MTc2OTAw/v.swf" allowfullscreen="true" quality="high" align="middle"></embed></object></p>
<p><strong><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/xiaomi" title="查看 小米手机 中的全部文章" target="_blank">小米手机</a></span>官方<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ad" title="查看 广告 中的全部文章" target="_blank">广告</a></span></strong></p>
<p>miui的特点：</p>
<p>（1）绿色极简<br />
提供绿色、干净的ROM空间，不会集成其他繁杂的第三方应用软件  MIUI接听电话界面</p>
<p>（2）独特用户体验设计<br />
MIUI根据中国用户习惯，自主原创了全套的用户体验设计体系。更贴近你的使用习惯和心理习惯，让你上手操作更简单、更贴心。</p>
<p>（3）更华丽、极致个性的操作界面体验<br />
MIUI全球首创“百变主题”以及“百变锁屏”功能，为你带来更为华丽、极致个性的手机操作界面感官体验。</p>
<p>（4）更好的电话以及短信使用体验</p>
<p>MIUI从电话、短信功能细节入手，对<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/android" title="查看 Android 中的全部文章" target="_blank">Android</a></span>原生系统进行了多达近百项的深度优化、微创新，努力为用户提供智能手机中最好的电话以及短信使用体验。</p>
<p>（5）用户话语权的“活”系统<br />
MIUI团队开发人员与用户打成一片、组建用户荣誉开发组，将系统功能选择权交与用户。根据用户意见、建议选择功能进行开发，并在每周五进行更新、升级。</p>
<p>（6）双版本共存<br />
MIUI实行独特的开发版和稳定版共存模式，满足不同用户需求：开发版着重于尝鲜和快速更迭，延续原有的模式，每周五升级，不断测试开发新功能；稳定版则着重稳定性，更新周期更长。</p>
<p>MIUI功能：</p>
<p>（1）相机<br />
　　优化加载速度，超快启动，即想即拍<br />
支持连拍、定时、特效拍照等更专业的拍照模式<br />
（2）图库<br />
　　比Android原生更快的图片浏览速度<br />
全新浏览模式，支持按文件夹路径查看图片  MIUI待机界面<br />
（3）音乐<br />
　　海量在线音乐边听边下，支持榜单直播和批量下载<br />
自动关联本地歌词和专辑封面，支持编辑ID3信息<br />
甩动切歌、睡眠模式，全面提升体验<br />
（4）MIUI HOME<br />
　　MIUI HOME将快捷方式和程序图标的两层模式整合为桌面一层模式<br />
长按进入编辑模式后，打开Widgets小工具盒子支持拖拽添加小工具<br />
如果想卸载程序，把程序拖拽到顶部垃圾框即可。<br />
种桌面屏幕切换效果，桌面动画华丽绚烂<br />
（5）智能拨号<br />
　　智能拨号采用T9键盘<br />
支持联系人拼音首字母、电话号码搜索，结果以联系频率优化排序<br />
（6）短信<br />
　　优化新短信添加联系人方式<br />
系统自动识别部分SP服务商名字和头像<br />
优化手机报阅读体验<br />
支持收藏重要短信<br />
网络节日短信推荐<br />
桌面快捷回复窗口<br />
（7）通讯录<br />
　　字母加姓氏快速定位<br />
更快捷步骤新建联系人<br />
智能生成联系人名字的候选头像<br />
支持将联系人分组管理<br />
联系人编辑支持设置来电大头贴<br />
（8）百变主题<br />
　　第三版主题加载引擎，换主题更快更方便<br />
更灵活、全面的局部自定义，丰富的在线壁纸、铃声、字体等<br />
（9）通知栏<br />
　　通知栏下拉14键开关，用户可设置wifi、 亮度、数据等  MIUI主界面<br />
开关位置会根据用户使用频率自动排序，学习用户使用习惯<br />
（10）FM收音机<br />
　　全球首个N1系统原创FM收音机<br />
（11）设置<br />
　　全新设计的设置界面，优化设置分类为常用设置、个人设置、系统设置和程序设置，方便查找<br />
系统启动极小内核<br />
系统里没有任何多余app，精简到完全系统级的应用</p>
<p>（12）详细介绍</p>
<p><img src="https://byfiles.storage.live.com/y1pADHHZnPDrzOnckA3xk-54yiuOjIYDQPc5Vqb6YJ5-eMQTO81BeCdezGB4M9XMUHomzQ0JHsT06E/miuidesign.jpg?psid=1" alt="miuidesign" /></p>
<p>桌面<br />
· 独创锁屏<br />
锁屏界面支持预览未接电话和新短信，并支持一步进入电话或短信界面。支持自定义全屏锁屏壁纸。<br />
· 桌面底部快捷程序栏<br />
桌面底部提供快捷程序栏，最多支持放6个程序图标，也可以放文件夹。把电话或短信放在快捷栏后在任何界面都能快速进入电话或短信。<br />
· 桌面文件夹<br />
如果你管理桌面图标，可以通过建立新的文件夹来实现，支持给文件夹命名，给文件夹内的图标排序。文件夹有隐藏程序的特性，放入文件夹的程序自动可以隐身。<br />
· 全新桌面编辑模式<br />
在桌面长按进入编辑模式后，你可以修改壁纸和锁屏壁纸，支持多点触摸移动图标，打开小工具盒子支持拖拽添加小工具。如果想卸载程序，可以把程序拖拽到顶部垃圾框处即可。<br />
· 屏幕缩略图模式<br />
双击home或通过&#8221;捏&#8221;的手势进入屏幕缩略图浏览，支持屏幕排序，自由添加，删除屏幕，设置默认主屏。<br />
· 任务管理器<br />
长按home键即可进入任务管理器，可以快速切换最近使用的程序，或者关闭所有正在运行的程序。<br />
· 智能图标样式匹配<br />
系统自动根据图标颜色生成匹配底板，让桌面图标风格更统一。 　　</p>
<p>短信<br />
· 便捷添加收信人<br />
要给新短信快速添加联系人，可以在收件人栏里输入联系人首字母，系统会智能推荐匹配者，也可以点击左侧加人按钮，在全部联系人、收藏、群组和通话记录中选择。<br />
· 自动识别SP服务商名字和头像<br />
系统自动识别部分SP服务商名字和头像。<br />
· 更好的手机报阅读体验<br />
系统自动接收手机报，支持修改文字大小和底色，以便适合不同的阅读环境。<br />
· 收藏短信<br />
收藏重要短信以便查阅备忘。<br />
· 节日短信推荐<br />
提供数千条网络短信，支持群发、转发和收藏，更体贴的过节问候。<br />
· 支持群发短信<br />
想要群发短信，可以在群组菜单中选择发送短信，或者在新建短信页面选择群组或多人为收件人。<br />
· 快捷回复窗口<br />
新短信弹出快捷回复窗口，可以快速回复或者删除不需要的短信。弹出窗口可在短信通知设置中选择开启或关闭。</p>
<p>电话<br />
· T9智能拨号<br />
拨号键盘采用T9智能拨号，支持联系人拼音首字母、电话号码搜索，根据联系频率优化搜索结果排序。 最大化按键操作区域。<br />
· 显示响铃次数<br />
未接来电显示响铃次数，协助你判断来电的重要性。系统自动屏蔽陌生人来电的第一次响铃，防止骗子骚扰。<br />
· 通话记录显示归属地<br />
通话记录显示归属地，并优化时间显示方式。<br />
· 智能IP号码<br />
根据不同运用商给用户默认不同IP号码。<br />
· 呼入限制<br />
如果不想被电话骚扰，可以在电话的设置中修改呼入限制选项为拒接陌生人来电，或仅接收藏联系人电话。</p>
<p>联系人<br />
· 最快捷步骤新建联系人<br />
要把陌生人存为联系人，可以有多种方法，在拨号面板拨打陌生人电话，会出现存储提示，也可以在通话记录点击陌生人头像，选择新建联系人，仅需要输入姓名电话，即可完成最快捷的新建步骤。<br />
· 智能生成联系人名字头像<br />
编辑联系人头像，会发现系统自动生成的联系人名字的头像，方便用户识别。<br />
· 强大的群组功能<br />
将联系人分组管理，方便查找和编辑。群组支持群发短信并且支持设置群铃声。<br />
· 显示联系人电话归属地<br />
在联系人详情页面可以查看电话的归属地。</p>
<p>设置</p>
<p>· 全新设置<br />
设置优化为常用设置、个人设置、系统设置、程序设置，方便用户查找。</p>
<p>通知栏<br />
· 智能14键开关<br />
通知栏下拉14键开关，根据用户使用频率自动排序，学习用户使用习惯。</p>
<p>周边辅助<br />
· MIUI 网盘<br />
网盘包括&#8221;装机必备&#8221;、&#8221;人人为我&#8221;和&#8221;我为人人&#8221;，支持批量安装程序，可以在&#8221;人人为我&#8221;中查看其它用户分享的程序，并可以在&#8221;我为人人&#8221;中把自己的程序分享给别人。如果要安装SD卡中的程序，还可以在菜单中选择程序安装器快速安装。<br />
· MIUI系统更新<br />
如果有系统更新，会显示出新的版本说明及致谢名单。点击下载即可完成OTA升级，保证系统为官方最新版本。</p>
<p>支持机型<br />
· 目前支持机型：N1,Desire,MS,HD2,DHD,NS,I9000,T959,DZ,Defy,I897等等</p>
<p>MIUI大事记</p>
<p>2010年</p>
<p>8月16日 首个为中国人深度定制的Android ROM提供下载，支持机型为HTC Nexus ONE, MIUI第一次内测开始!<br />
9月，国外专业Android发烧友论坛网友自发为MIUI ROM制作多国语言版<br />
9月，发布MIUI收音机，并开放源代码，众多开发者进行源代码下载<br />
11月26日新版本支持摩托罗拉Milestone机型</p>
<p>2011年<br />
1月26 日支持五款手机，超10万手机发烧友使用MIUI<br />
6月30日，MIUI支持 11款机型，23种语言，超50万国内用户使用MIUI<br />
7月8日，MIUI首个稳定版本正式发布<br />
8月16日，基于MIUI的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/xiaomi" title="查看 小米手机 中的全部文章" target="_blank">小米手机</a></span>正式发布</p>
<p>[请保留：<span class='wp_keywordlink'><a href="http://houshidai.com/" title="后时代官方网站" target="_blank">后时代</a></span> <a href="http://www.houshidai.com/">http://www.houshidai.com/</a>]</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/video/miui.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>中国团购网站与创新精神</title>
		<link>http://www.houshidai.com/internet/tuangou.html</link>
		<comments>http://www.houshidai.com/internet/tuangou.html#comments</comments>
		<pubDate>Mon, 03 Jan 2011 15:06:36 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[创新]]></category>
		<category><![CDATA[团购]]></category>
		<category><![CDATA[山寨]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=2482</guid>
		<description><![CDATA[“团购像雨后春笋一般一夜之间兴起，然后又在每夜中死去。”一篇写团购与创新的文章： 我一向认为大多数中国人是没什 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2483" title="tuangou" src="http://www.houshidai.com/wp-content/uploads/2011/01/tuangou.jpg" alt="" width="600" height="210" /></p>
<p><span id="more-2482"></span></p>
<p>“<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/tuangou" title="查看 团购 中的全部文章" target="_blank">团购</a></span>像雨后春笋一般一夜之间兴起，然后又在每夜中死去。”一篇写<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/tuangou" title="查看 团购 中的全部文章" target="_blank">团购</a></span>与<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/innovate" title="查看 创新 中的全部文章" target="_blank">创新</a></span>的文章：</p>
<p>我一向认为大多数中国人是没什么<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/innovate" title="查看 创新 中的全部文章" target="_blank">创新</a></span>精神的，对于这个论调，有些人要骂我，你就不是中国人么？没错，我是中国人，所以我就要说我自己，只有我们自己能承受别人的批评的时候，只有我们自己能进行自我批评的时候，我们的民族才会有进步。古语有云：吾日三省吾身，又云：见贤思齐焉、见不贤而内自省也。对于创新，大致会有这样一种论调：“我们现在<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/shanzhai" title="查看 山寨 中的全部文章" target="_blank">山寨</a></span>是学习发达国家，因为我们起步比晚，我们先模仿再学习再超越”。道理没有错，可是我们真正有超越了么？模仿了这么多年，有多少东西能越过别人的？</p>
<p>有时候觉得，中国人像一群蝗虫，只要见到哪里有新鲜的嫩叶，就一窝蜂冲上去吃，吃完之后立即离开，至于什么可持续性发展，什么创新，什么规则，那都是说说而已。当Youtube流行的时候，我们都做视频网站；当Twitter流行的时候，我们全部搞微博；当Groupon流行的时候，我们所有的网站都以团字结尾，叫xx团；当Facebook流行的时候，大家都做开心网，甚至有些人连域名都懒得想了，直接<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/shanzhai" title="查看 山寨 中的全部文章" target="_blank">山寨</a></span>。结果是什么样呢，结果是一大批的网站倒闭了，整个行业生态被严重破坏了。</p>
<p>拿Google的adsense举例吧，全世界我估计中国的点击价格最低了，原因很简单，有许多人做垃圾站，甚至有许多人恶意点击，用欺骗的方式获取短期的利益。结果造成直接的后果就是中国的广告点击价格低得惊人，1美分的点击多得去了，有些广告主要求直接屏蔽中国的IP。就因为某些人为了几百块的的利益，造成整个行业损失。</p>
<p>我把groupon的网站与国内<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/tuangou" title="查看 团购 中的全部文章" target="_blank">团购</a></span>的网站进行比较，结果发现这些网站有惊人的一致，而groupon的大按钮，几乎在所有的团购网站都可以看见，按钮除了颜色不一样之外，其它几乎完全一样，有些网站甚至连按钮大小都懒得调了。</p>
<p><img src="http://z3caxg.bay.livefilestore.com/y1ps4tgvpv6UsimZJ1LHbjlv278CEf_Dkuw-cNARXM8_0Eq7CrCaYUfMxTetdNpkhHgls9h23z3xlFR1GBe2_nDa3uwpectc-xW/tuan.jpg?psid=1" alt="" /></p>
<p>对于这样的结果，我只能用触目惊心来形容，我实在没有勇气再去截图了，因为我知道不管我怎么截，得到的结果都是一样的，所有的团购网站一定会在左边的位置放置一个尖角圆孔的大按钮，有点创新的把自己的按钮改一下比如说爱帮团，至于24券与新浪团，我也不知道到底是谁在抄谁，完全一模一样的按钮。有时候我看看这些网站的界面，我甚至误以为这是一个工业化的产品，由同一家公司做出来的。但是就算Android这样的系统，各厂商所做的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>也是不一样的。如果你认为这个大按钮是给Groupon致敬的话，那么你就大错特错了，我们继续来分析其它内容。</p>
<p>布局<br />
我把GroupOn网站的布局进行抽象化，发现所有团购网站的布局有惊人的一致，甚至我们可以认为Groupon的团购网站就是业界的工业标准，是大家不可逾越的红线，这种集体美学让人不寒而栗。有些网站，甚至连背景都和Groupon一样，只不过是颜色和大小有所改变而已。主菜单也是一致的，虽然名称不太一样，但意思都是一样的，统一为四个主菜单（今日团购、往日团购、怎么玩本站、帮助）。连邀请朋友获得的奖金也都统一定为10元！天啦，中国人什么时候这么守规矩了？在我的印象中，中国人太不守规矩了，台面上大家都说OK，台下大家都在想着要搞死谁。</p>
<p><img src="http://z3caxg.bay.livefilestore.com/y1pBGAWAlIgmdjMjPl9MC1-AzaIcL4vIuwrZxZKjiO4JrsU9frgkzbk3-fDMpEq6Q46t2jy-Fbsc1RHUj_oTrb0nk-FGcFzwzQs/gou.jpg?psid=1" alt="" /></p>
<p>结语</p>
<p>其实大家都做团购，这并不叫抄袭，就像中国不可能只有一家酒店一样，我们也不可能只需要一家团购。人家有个好的商业模式，我们也可以模仿，但是应该有自己独特的地方，有所创新。如果一个网站连界面都懒得创新的话，我实在想不出还有什么地方能让它创新的。这么多同质化的网站，最终造成的结果就是整个行业的萎缩，也正是大家如此没有创意才让门户大网站有可乘之机。</p>
<p>同样是玩抄袭，腾讯玩的极具创意，别的产品我不敢说，但起码QQ就是一种创新，从最初模仿ICQ到后来的蜕变，成功绝不是偶然。今天你再去看QQ与ICQ，你还能从QQ中看出多少ICQ的影子呢？</p>
<p>国外有一些成功的例子是值得我们去借鉴，但绝对不是完全照搬，如果大家的内容服务都一样，最终的结果就只是打价格战，价格战搞不定大家就开始玩阴的，然后就开始打口水战，最后有一部分死亡。而死亡这部分人还心不甘情不愿，临死前都要给你下一个诅咒，死了都还要找一个垫背的，何必呢？</p>
<p>后记</p>
<p>有位读者专门写了一篇“驳《从团购网站看中国人的创新精神》”发表在cnblogs的blog上，大家也可以从另一个角度来看待创新这个问题，或者国人有蛮多人也持有这样的看法，且不论对错，且不论我是否赞同其观点，但多个角度思考一个问题总是好的，有兴趣的朋友为妨看一下。</p>
<p>此外，我发几家国外团购的网址，大家看看老外也做团购和咱们做团购有什么不一样，或者你就明白这其中的差异了，我还没有看到国外两个一模一样的团购网站，不要再讲中国特色了，这个词害了我们好多年。</p>
<p><a href="http://www.woot.com/">http://www.woot.com/</a><br />
<a href="http://www.buywithme.com/">http://www.buywithme.com/</a><br />
<a href="http://livingsocial.com/">http://livingsocial.com/</a><br />
<a href="http://www.giltcity.com/">http://www.giltcity.com/</a><br />
<a href="http://tippr.com/">http://tippr.com/</a><br />
<a href="http://www.juiceinthecity.com/">http://www.juiceinthecity.com</a><br />
<a href="http://www.wegivetoget.com/">http://www.WeGivetoGet.com</a></p>
<p>[本文来自涂雅 原文链接：iove.net/archives/2712.html]</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/internet/tuangou.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>iPhone UI 界面设计分析精粹-腾讯CDC</title>
		<link>http://www.houshidai.com/design/iphone-ui.html</link>
		<comments>http://www.houshidai.com/design/iphone-ui.html#comments</comments>
		<pubDate>Wed, 08 Dec 2010 13:03:55 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[设计]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[界面]]></category>
		<category><![CDATA[细节]]></category>
		<category><![CDATA[苹果]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=2202</guid>
		<description><![CDATA[　　作为一款革命性产品，iPhone（这里泛指iPhone和iPod touch，当然还有iPad）为我们带来 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2203" title="iPhonedesign" src="http://www.houshidai.com/wp-content/uploads/2010/12/iPhonedesign.jpg" alt="" width="600" height="250" /></p>
<p><span id="more-2202"></span></p>
<p>　　作为一款革命性产品，<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/iphone" title="查看 iPhone 中的全部文章" target="_blank">iPhone</a></span>（这里泛指<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/iphone" title="查看 iPhone 中的全部文章" target="_blank">iPhone</a></span>和iPod touch，当然还有iPad）为我们带来了许多意想不到的创意和惊喜。过去两个月多的时间里，我们认真地咀嚼《iPhone Human Interface Guidelines》，感悟字里行间透露着的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/appletech" title="查看 苹果 中的全部文章" target="_blank">苹果</a></span>的细致与智慧。兴奋、激动之余，有太多的惊喜想与大家分享。但无论从时间上还是精力上，130页的完整套餐肯定会让所有的人吃不消。我们收集了iPhone平台的专业设计师的意见，加上翻译过程的一点体会，整理出11条设计精粹。最后，希望这份130页浓缩而成的快餐不会让您觉得难吃，enjoy yourself！</p>
<p><strong>1. 了解应用类型及各自特点</strong></p>
<p>　　iPhone平台有三类型的应用：</p>
<p>　　● 效率型应用（Productivity Applications）</p>
<p>　　● 实用工具（Utility Applications）</p>
<p>　　● 沉浸型应用（Immersive Applications）</p>
<p>　　每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点，选择合适的应用类型可以更好地迎对。</p>
<p>　　效率型应用用于帮助完成日常的一些工作，如收发邮件、即时通信、照片管理与分享。用户快速查看、跳转、执行、完成，连贯的动作要求<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/interface" title="查看 界面 中的全部文章" target="_blank">界面</a></span>简单直接，让用户可以全神贯注于任务本身。这类应用一般都附带自然的层级结构。所以，表格视图（table view）可以在这类软件里大派用场。</p>
<p><img class="alignnone size-full wp-image-2204" title="iPhone-design-pristine" src="http://www.houshidai.com/wp-content/uploads/2010/12/iPhone-design-pristine.jpg" alt="" width="549" height="269" /></p>
<p>图1.1 附带层级结构的效率型应用</p>
<p>　　实用工具用于执行一项简单的任务（如计算器，天气报告），简单，容易配置就可以了。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-012.jpg" alt="" width="354" height="256" /></p>
<p>图1.2 实用工具之“天气报告”和“深度睡眠”</p>
<p>　　沉浸型应用可以为用户带来极致的娱乐和游戏体验，这类应用可以进一步细分为游戏和虚拟仿真类。这类应用和标准的系统<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/interface" title="查看 界面 中的全部文章" target="_blank">界面</a></span>不同，用户希望这类应用能够给他们带来最大的娱乐，因此，界面设计的自由发挥度比较高，仿真的、可爱的设计风格往往能恰到好处。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-013.jpg" alt="" width="576" height="189" /></p>
<p>图1.3 沉浸型应用</p>
<p>　</p>
<p><strong>2. 熟悉系统布局和控件特点</strong></p>
<p>　　iPhone 操作系统提供了非常出色的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>库，这些标准的控件和视图都得到了大量的研究才得以真正派上用场。另一方面，iPhone 用户已经对这些软件非常熟悉，不管是出于什么理由，如果没有更好更实用的创意，我们应该遵循iPhone的控件规范。至少，在我们打破iPhone的规则之前，“You must understand the rules before you can break them.”(你必须了解规则然后才能打破他们)。</p>
<p>　　iPhone 提供的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>组件从大到小，大致可列举如下（具体每种控件和视图的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/detail" title="查看 细节 中的全部文章" target="_blank">细节</a></span>，请参考《iPhone 用户界面设计指南》第二部分）：</p>
<p>　　● 导航条，标签条，工具条和状态条</p>
<p>　　● 弹出对话框、操作面板和模式视图</p>
<p>　　● 表格视图（Table Views）, 文本视图（Text Views）, web视图（Web Views）</p>
<p>　　● 应用程序控件（如文本框、分页显示器、轮转选择器、进度条、更多按钮等）</p>
<p>　</p>
<p><strong>3.  使用隐喻</strong></p>
<p>　　隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。</p>
<p>　　iPhone内置的备忘录应用就是一个使用隐喻的典范。除了基本的删除和邮件这些图标隐喻，整个产品的外形：棕色的头部导航，米黄色的纸质背景，配合细致的行隔线和垂直的双细线，俨然就是一可爱的小小备忘本。将产品与实体对应起来，用户一看就知道软件的用途。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-031.jpg" alt="" width="186" height="278" /></p>
<p>　　iPhone操作系统的隐喻不胜枚举，我们尚可尽量遵循，但如果有“更合适更贴切”的隐喻，你也可以放胆一试。</p>
<p>　</p>
<p><strong>4.  一目了然，即看即点</strong></p>
<p>　　用户在移动场景下不会长时间对着手机屏幕，他们可能“迅速打开音乐播放器随便播放一首就跳去其他应用程序或继续其他的事情”，不要以为用户有时间去研究怎样使用你的应用程序，这种注意力相对分散的情景要求你的应用程序界面必须尽量简洁，一目了然，用户看到就能马上理解。一般有三种方式可以简化界面：</p>
<p>　　● 删减软件功能：功能越少，界面越简洁。移动产品的设计，减法远比加法来得重要。请牢记移动产品设计里最重要的金科玉律： <strong>为移动场景下的大多数用户设计最常用的少数几个功能特点</strong>（Pick the few features,most frequently used,by the majority of your users,most appropriate for the mobile context）。</p>
<p>　　● 减少输入：尽可能地减少输入，直接为用户提供选项。如索引列表，既方便用户记忆，也可以帮助用户快速扫描并直接选中；轮转选择器，划上划下即可选中，减少打字耗时的同时省去繁多的错误检测。</p>
<p>　　● 避免不必要的交互：用户也不是你想像中那么傻的，不要一味提醒他们如何操作（帮助越多说明你的软件越难用），设计时应该关注如何更有效地引导用户集中精力快速完成任务。</p>
<p>　　内置的短信发送实在是太经典了，写信人和收信人左右区分，信息内容通过时间顺序排列下来，整个信息来回历史一目了然。呼叫程序同样出色，重新设计的数字键盘弱化了字母排列，突出数字，由此换来宽大容易点击的屏幕空间。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-041.jpg" alt="" width="377" height="274" /></p>
<p>图4.1 一目了然的短信历史查看和拨号呼叫</p>
<p>　</p>
<p><strong>5. 考虑屏幕上下</strong></p>
<p>　　不论单手操作还是两只手配合操作，屏幕上部分的可见性是最好的。所以，在设计应用程序时，应该将最常使用的的信息——一般是高度概括的信息，如导航，或者一些常规操作如添加、完成、保存、取消——置于屏幕顶端。</p>
<p>　　屏幕的底部一般是辅助性的工具栏或切换视图使用的页签栏。一些影响较大的操作如果出现在屏幕下半区域，必须仔细考虑它们的排列设计。如图5.1，一般情况下，操作面板的取消按钮放在最后，这样可以鼓励用户阅读完所有的选项，暗蓝色的返回按钮可以和一般的按钮区分开来，即便用户没阅读完也知道这是返回按钮。对于一些影响较大的操作（如删除），将其放在面板的顶部是最好的，因为顶部更容易被看到，再加上红色的警告暗示，用户选择起来会更为慎重。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-051.jpg" alt="" width="367" height="267" /></p>
<p>图5.1 操作面板上的按钮排列</p>
<p>　</p>
<p><strong>6. 提供指尖大小的点击区域</strong></p>
<p>　　如果按键布局过于拥挤，用户就要小心翼翼地花更多时间去操作，错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素，让用户更快更容易点击。</p>
<p>　　旧版内置计算器的按键是大号的，有效区域都为44*44px，非常容易点击。新版的计算器为了容下更多的按钮，按键大小做了一些调整，虽然高度上略有减小，但用户点击起来还算容易。对于经常使用的“=”号，整个目标区域都加大了，这种样式上的区分可以将主要操作和次要操作区分开来，以便更好地引导用户。</p>
<p>　　横屏的计算器完整模式可以容下更多的按键，按键大小相对竖屏的要小，尽管如此，用户点击起来还是得心应手。</p>
<p><img class="alignnone size-full wp-image-2205" title="iPhone-design" src="http://www.houshidai.com/wp-content/uploads/2010/12/iPhone-design.jpg" alt="" width="357" height="482" /></p>
<p>图6.1 适合手指点击的计算器按键</p>
<p>　</p>
<p><strong>7.  灵活运用手势支持</strong></p>
<p>　　去到哪里，手指就跟到哪里，多种动作随时变换，直接感知与设备交互，如此自然直接的“输入”，如果能够灵活合适地运用，除了可以带来良好的用户体验，还能极大满足用户的控制欲望。</p>
<p><img class="alignnone size-full wp-image-2206" title="iPhone-design2" src="http://www.houshidai.com/wp-content/uploads/2010/12/iPhone-design2.jpg" alt="" width="618" height="184" /></p>
<p>图7.1 手势操作：滚屏、长按、拖动、捏</p>
<p>　　当然，手指的一个最重要问题在于它比鼠标指针大得多，灵敏度和精确度会有所欠缺。一些同时使用鼠标和键盘的操作（如复制、粘贴、选择文字）是手指很难完成的。设计上应该考虑由此带来的影响，避免滥用。如果你的应用支持比较复杂的手势（长按、捏），确保用户能够理解他们的含义，并且为这些手势操作提供直接的响应反馈。</p>
<p>　</p>
<p><strong>8.  </strong><strong>考虑横竖屏方向变化</strong></p>
<p>　　iPhone游戏里出现横竖屏设计比较正常，都是视具体的游戏类型来分。但一般的效率型应用或实用工具，也是横竖屏都有。林子大了，什么鸟都有，有些用户就是喜欢经常将屏幕旋转过来，而且还不在少数。他们或是喜欢横屏的浏览方式（如备忘录、音乐），或是希望打横可以看到更多的信息（如计算器）。设计的时候必须充分考虑用户的期望。有时将界面内容旋转就可以简单满足他们的需求，但有时也需要你重新去设计以展示更多的内容（如横屏的音乐会出现一个新的界面，展示所有的歌曲）。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-081.jpg" alt="" width="513" height="299" /></p>
<p>图8.1 iPhoneQQ 横屏输入</p>
<p>　　竖屏情况下，输入键盘宽度只有320px，平均每个按键宽只有32px（320/10，这里忽略键与键的间隔）；横屏时每个按键宽可以达到48px，多了整整16px。如果是在小屏幕上输入，你更倾向那种方式？</p>
<p>　　如果你的应用程序界面只支持单一方向的展示，最好的做法就是保持界面固定，不随着设备方向改变而改变。例如，当用户选择去看一个iPod视频时，不管屏幕打横打竖，这段视频都是横向展示的。有了这个暗示，用户就会很自然地旋转屏幕到水平横向观看。翻转按钮也没有存在的必要了。</p>
<p>　</p>
<p><strong>9. 合理的反馈</strong></p>
<p>　　纵观所有的内置应用，反馈可谓无处不在。由于大部分的操作都是通过手势（其实还有抖动、语音输入方式）完成的，通过一些明显的变化来响应用户做出的操作，能够给予用户极大的信心。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-091.jpg" alt="" width="296" height="155" /></p>
<p>图9.1 iPhone版 QQ斗地主的音量大小调整</p>
<p>　　进入QQ斗地主的游戏设置页面调整音量大小时，手指的大小盖住了滑块，为了将选中的信息反馈给用户，两边的扩音器图标同时使用了外发光样式。</p>
<p>　　iPhone 操作系统提供了许多自动反馈的机制。动画就是其中一种。不过切记一点，动画的目的在于提升用户体验，而不是成为盲目追求酷炫的焦点。</p>
<p><strong>10. 优化启动过程</strong></p>
<p>　　iPhone OS4.0以前的应用都属于单任务的，用户会经常在多个应用程序之间切换，一个电话来了，用户不得不退出正在进行的应用程序。要确保用户回来时启动足够快速，以减少用户的等待，而且，为了将影响降到最低，应尽可能保存上次关闭之前的操作结果。这似乎都是工程师的职责，但作为一个优秀的设计师，你还可以为此做很多的事情。</p>
<p>　　开启时第一屏显示一个背景图或者简短的loading动画。即使是普通的效率型应用或者简单的实用小工具，启动时如果能够预先显示一个背景图，背景图与程序启动后首界面平稳自然地过渡，这种方式既可以带给用户即时的反馈，也可以“缩短”用户等待的时间。</p>
<p><img class="alignnone size-full wp-image-2207" title="iPhone-design-prist" src="http://www.houshidai.com/wp-content/uploads/2010/12/iPhone-design-prist.jpg" alt="" width="611" height="223" /></p>
<p>图 10.1 启动时的预加载背景</p>
<p>　　运行天气应用和iPhone QQ时，即使是很短的启动时间，预加载背景还是能够让人感觉启动等待的时间缩短了。</p>
<p>　　虽然iPhone OS4.0开始支持多任务，但不要天真地以为这种背景预加载的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/detail" title="查看 细节 中的全部文章" target="_blank">细节</a></span>可以忽视了，应用程序应该一如既往地为用户提供这种流畅的体验，毕竟，用户启动的时候还是期望软件可以“快一点”。</p>
<p>　　启动时要切记一点：不要弹出一个说明性窗口，或一个刺眼的闪屏，或其它类似的启动体验（网络wifi提示这些是例外）。这种方式很突兀，让用户立即使用你的应用程序就好了。</p>
<p><strong>11. </strong><strong>为应用程序设计图标</strong></p>
<p>　　应用程序图标是指放在iPhone屏幕上用来启动程序的图标。iPhone的屏幕大小只有480*320px，在这狭小的屏幕里，用户希望放下尽可能多的图标，这些图标必须具有突出的视觉效果才能方便用户辨认。要做到这一点，可以从以下两方面着手：</p>
<p>　　● 美观：确保图标简单美观，富有吸引力，这样用户才愿意让这些图标长久占据有限的屏幕空间。</p>
<p>　　● 可识别特点：要让用户在大量图标中轻松找到该应用程序，图标必须要有自己的特点，对于关联的产品，可以结合品牌进行设计。</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-111.jpg" alt="" width="128" height="60" /></p>
<p>图11.1 “企鹅”图标，一看就知道是QQ产品</p>
<p>　　为了与内置图标保持协调一致，iPhone操作系统一般会自动给图标增加一些视觉效果：</p>
<p>　　● 圆角</p>
<p>　　● 阴影效果</p>
<p>　　● 反光效果</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-112.jpg" alt="" width="58" height="57" /></p>
<p>图11.2 未添加视觉效果的的普通图标</p>
<p><img title="细节成就卓越——浅析iPhone用户界面设计精粹" src="http://cdc.tencent.com/wp-content/uploads/2010/05/iPhone-design-pristine-113.jpg" alt="" width="92" height="92" /></p>
<p>图11.3 iPhone操作系统自动添加效果后的图标</p>
<p>　　为了确保你的图标可以利用这些视觉效果，你应该遵照以下图标设计规范：</p>
<p>　　● 图片格式：PNG</p>
<p>　　● 大小：57X57像素，90°直角（如果图像不符合标准，iPhone系统将自动按比例调整）</p>
<p>　　● 不要有任何发亮或有光泽的部分</p>
<p>　　● 不使用alpha透明</p>
<p>　　最后，将图标文件命名为Icon.png，放在程序的资源包中即可。</p>
<p>　　注：需要的话，可以要求iPhone操作系统不添加反光效果，详情请阅读《iPhone 应用程序设计指南》。</p>
<p>[作者：<a href="http://cdc.tencent.com/?p=2603" target="_blank">listy</a> <span class='wp_keywordlink'><a href="http://houshidai.com/" title="后时代官方网站" target="_blank">后时代</a></span>整理<a href="http://www.houshidai.com">http://www.houshidai.com</a>]</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/design/iphone-ui.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTC Sense UI “Drew Bamford”</title>
		<link>http://www.houshidai.com/design/htc-sense-ui-drew-bamford.html</link>
		<comments>http://www.houshidai.com/design/htc-sense-ui-drew-bamford.html#comments</comments>
		<pubDate>Fri, 03 Dec 2010 14:25:15 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[设计]]></category>
		<category><![CDATA[HTC]]></category>
		<category><![CDATA[Phone7]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[手机]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=2019</guid>
		<description><![CDATA[HTC 用户体验负责人 Drew Bamford 接受了媒体采访。谈到了一些 Sense UI 的设计理念和对 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2020" title="DrewBamford" src="http://www.houshidai.com/wp-content/uploads/2010/12/DrewBamford.jpg" alt="" width="600" height="260" /></p>
<p><span id="more-2019"></span></p>
<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/htc" title="查看 HTC 中的全部文章" target="_blank">HTC</a></span> <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/userexperience" title="查看 用户体验 中的全部文章" target="_blank">用户体验</a></span>负责人 Drew Bamford 接受了媒体采访。谈到了一些 Sense <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span> 的设计理念和对各平台的看法。其中“<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/userexperience" title="查看 用户体验 中的全部文章" target="_blank">用户体验</a></span>层”的概念非常有趣。</p>
<p>“我认为用不了多久，在你的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/phone" title="查看 手机 中的全部文章" target="_blank">手机</a></span>上就能完成以前不敢想象的事情。”Drew Bamford 告诉 Pocket-lint。</p>
<p>Bamford 此人就是 <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/htc" title="查看 HTC 中的全部文章" target="_blank">HTC</a></span> <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/phone" title="查看 手机 中的全部文章" target="_blank">手机</a></span>用户体验的总负责人，HTC 今年的出货量达到了 2000 万台。他的主要工作，是让 HTC Sense <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span> 在数十款<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/phone" title="查看 手机 中的全部文章" target="_blank">手机</a></span>上运行起来，并表现出良好的体验。</p>
<p>跟硬件设计和制造不同，Bamford 的 Sense UI 要覆盖多种操作系统——目前是 Android ，WIndows Phone 7，Windows Mobile 和 Brew 。规格和价格也有高中低之分，从最顶级的 Android 旗舰机 HTC Desire HD ，到最普通的 Windows Mobile 低端机 HTC HD mini。</p>
<p>当我们坐下来时，看到他正在用一款 HTC Desire HD 。接下来就请看看他对设计的看法。</p>
<p><strong>Q：手机是一件简单的东西，也是一件复杂的东西。当你想要设计它时，从哪里入手？是草图吗？</strong></p>
<p>（笑）很多人以为设计就只是画画图，或上上色。其实这只是我们复杂过程的最后一步。拿 HTC Sense UI 来说，第一步，也是最关键的一步，是深刻理解我们的客户。客户需要一部怎样的手机？这种研究占用了我们大部分的时间，却常常被外人所忽略。</p>
<p>我们会找客户聊天，了解他们在日常生活中的行为。一旦看到了他们遇到的问题，我们就要绞尽脑汁去想解决办法。</p>
<p>所幸，我们拥有一支世界级的团队。在招聘时，不单考虑应聘者本身的闪光点，也会考虑到他将在大团队中产生的共鸣。</p>
<p>在早期，我们很容易就设计出一款手机，因为大家都是技术人员，懂得如何使用。但是，智能手机的目标人群已经越来越大，我们必须想方设法让普通人也能顺畅地使用它。</p>
<p>所以，了解客户的生活，是整个设计过程中非常重要的一步。</p>
<p><strong>Q：有些款式的 UI 是针对一种文化的人群，另外一些款式是针对完全不同文化的人群？</strong></p>
<p>当然！这是我们在工作发现中的一个主要问题，所以必须针对不同人群拿出不同的方案。很多人以为设计靠的是直觉，实际上每个人的直觉就是不同的。</p>
<p><strong>Q：难道说你们的设计适合每一种设备和每一个用户吗？</strong></p>
<p>在许多方面，HTC Sense 像是一个空的容器。用户能够按照不同的方式来使用它。我们定制的框架很好，能容纳各种东西，来适应各种用户。</p>
<p>举个例子，就是“场景”。Sense 能保存不同的场景，用户可以自定义，也可以通过网站下载喜欢的场景。</p>
<p><strong>Q：然而微软却不这么认为，你们还会走定制的道路吗？</strong></p>
<p>实际上 Windows Phone 7 也是可以定制的。你可以安装一个程序来实现定制。就像我们的 Android 手机上表现的那样：“这是一个任由使用的工具，来创造你自己的体验。”</p>
<p>这才是 HTC Sense 设计哲学的核心。要给用户带来他们所希望的体验，而不是强加一个“我们说这就是最好的”设计给用户。所以，我们还是会继续走定制化道路。</p>
<p><img title="WP7Sense" src="http://www.ifanr.com/wp-content/uploads/2010/11/ace91d1535a1cb0a733d507d20df354ede2de3c6.jpg" border="0" alt="WP7Sense" width="480" height="320" /></p>
<p><strong>Q：还有一个问题，你面对的不是一种手机，而是很多种手机，怎么办？</strong></p>
<p>当然这更具挑战性，同时也带来了更多机会。我们拿出的方案需要扩展到各种平台，甚至扩展到网页。例如 HTCsense.com。</p>
<p>看看 HTC Sense 的核心是什么？它的 DNA 是什么？这些东西是不是在 Android 手机和 Windows Mobile 手机上都得到了体现。</p>
<p>从设计者的角度来看，这才是 Sense 的基础，而不是屏幕上那一个个定制的图标。</p>
<p><strong>Q：具体说说 HTC Sense 的核心价值？</strong></p>
<p>从根本上来说， HTC Sense 是基于人的设计，这是最简洁的表达方式。它是为人服务的。我们都是人，但我们却互不相同。这就像大家都看电影，但眼光却不一样。所以需要给人们定一个框架，然后让他们自由创造自己的体验。</p>
<p>人和工具的故事。</p>
<p><strong>Q：在 Sense UI 的这么多元素中，你对哪个最自豪？</strong></p>
<p>我最自豪的那些细节，对大多数人来说是很小的特性。当他们拿起手机时，都不会注意到这个特性，但随后会说：“就是应该这样啊。”</p>
<p>即使他们从未用过手机，也能毫无障碍地使用 Sense 。这就是一个设计师最成功的作品吧，完全按照用户的思维去工作。</p>
<p>举个例子，当你拿起 HTC 手机准备接听电话时，原本很大的铃声就变得安静下来。这种细节是隐形的，但就是很棒。</p>
<p><strong>Q：你认为天气功能如何？</strong></p>
<p>天气是排名第二的常用功能。虽然看起来微不足道，但却非常重要。基于以前的研究，我们把“看天气”变成了一种享受。</p>
<p><img title="HTC Sense" src="http://www.ifanr.com/wp-content/uploads/2010/11/b9ba9ad71be2796b9c0d5de4e26a4f04207215ae.jpg" border="0" alt="HTC Sense" width="480" height="320" /></p>
<p><strong>Q：排第一的是什么？</strong></p>
<p>是电子邮件。</p>
<p><strong>Q：你认为应该把用户体验从不同的手机制造商那里独立出来？</strong></p>
<p>是的，现在不同的手机之间差异很大。但是对用户来说呢？看到天气，然后微笑，才是最根本的。我认为把各种小部件连接成一个完整的体验很重要。</p>
<p><strong>Q：在社交媒体方面，HTC 怎样决定谁去谁留？</strong></p>
<p>因为我们专注于人。所以只是建立一个好用的框架。从两年前开始，我们就可以把联系人和电子邮件摆到 Sense 上。而作为一个框架，总会有新的应用进来。</p>
<p>至于谁去谁留？我们趋向于网络上的新服务。当然我们有一个 HTC Opensense 战略，允许第三方开发。例如 LinkedIn 就能做一个人脉的通讯录放在 Sense 上。</p>
<p><strong>Q：HTC 为什么不做自己的操作系统？</strong></p>
<p>其中一个重要的原因是，我们享有自由，而不是某种特有的操作系统。我们所要做的是一个“用户体验层”，消除操作系统间的差异。我们专注于用户体验的顶层，这可以带来最大的价值。</p>
<p>如果我们去研发一种专用操作系统，会把资源分摊去解决技术问题。我不认为这能给公司和合作伙伴带来足够的价值。</p>
<p><img title="HTC WP7" src="http://www.ifanr.com/wp-content/uploads/2010/11/ca5ccdb4e82a380f3ff8ddaa3b2904dddfea3cc6.jpg" border="0" alt="HTC WP7" width="480" height="320" /></p>
<p><strong>Q：Windows Phone 7 不让你们定制 UI ，会妨碍你的工作吗？</strong></p>
<p>我认为这是另一项挑战。在一个严格约束条件下的挑战。我觉得微软放松限制将会给我们带来更多空间，可惜微软的约束很死板。</p>
<p>不排除以后其他的操作系统也会这样，那只好创建 HTC 自己的操作系统（这不是不可能的）——如果我们没有设计的自由，将会尝试转换平台，或建立自己的平台。</p>
<p>现阶段的 Google 和微软，还是能够给我们提供足够的空间，所以我们会尽力满足广大用户的需求。</p>
<p><strong>Q：所以说如果 Android 或 Windows Phone 7 的约束越来越死，你会考虑离开？</strong></p>
<p>我们会尝试一切可能去创造最佳体验，目前来说 Google 和微软还是不错的，但未来谁也说不准。</p>
<p>HTC 的优势之一是不断尝试新鲜事物，新外形，新伙伴。这就是我们的取胜之道。</p>
<p><strong>Q：我们谈谈 Android 吧，它的版本很多，让你头疼吗？</strong></p>
<p>从体验的角度来说，我还是很满意。Google 很给力，Android 的发展速度很快，每个版本都会有新功能和改进。</p>
<p>当然，从发展和分化的角度来说，是个挑战。我们已经可以从 Google 手上获得最新的 Android 版本，某些手机在 6 周内就能完成升级。</p>
<p><img title="Android " src="http://www.ifanr.com/wp-content/uploads/2010/11/ece0948c2379391886adf61071edb7f6bf811f71.jpg" border="0" alt="Android " width="480" height="320" /></p>
<p><strong>Q：如果你是 Andy Rubin（Android 负责人），你会怎样改进 Android ？</strong></p>
<p>Google 最棒的策略是持续开放。允许制造商在这个平台上改造出最好的东西。这是吸引制造商和运营商的最好手段。</p>
<p>虽然这会带来版本分化，但我认为利大于弊。</p>
<p><strong>Q：这就是你的建议？</strong></p>
<p>我喜欢 Android 的灵活性。作为一家公司，HTC 需要操作系统给我们带来机会。</p>
<p><strong>Q：在这么多平台上工作，你最喜欢哪个？</strong></p>
<p>没有最喜欢的。就像问你最喜欢哪个孩子？答案是每个孩子都不同，各自有优点。但我在 Android 平台上的工作非常愉快，这个平台开放而灵活。</p>
<p><strong>Q：未来的发展呢？语音控制？增强现实？3D？</strong></p>
<p>我认为这些设计都很有趣，但重要的要找准合适的场景。你不可能让一部手机只工作在增强现实（AR）模式下吧。</p>
<p>HTC 已经在思考更高的层次了，用户体验不止在手机上。我们正在研究手机与其他产品的交互，例如电视和机顶盒，或是电脑。这种生态系统能增强用户的体验。</p>
<p><strong>Q：需要等很久吗？还是现在就有？</strong></p>
<p>我们在 HTCSense.com 已经走出第一步了，允许人们在不同的设备间共享信息。技术真的不是最重要的一环，也不用等太久。</p>
<p>你的手机是如此强大，它很有可能成为你的视觉体验中心。</p>
<p><strong>Q：最后一个问题，你用什么手机？</strong></p>
<p>我换了很多手机，也同时用很多手机。现阶段我用 Desire HD 和另外一部 Windows Phone 7。它们都应该得到重视。</p>
<p>[<span style="color: #888888;">by </span><a href="http://www.pocket-lint.com/author/1"><span style="color: #888888;">Stuart Miles</span></a><span style="color: #888888;">  | 张恒 译，Via ifanr</span>]</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/design/htc-sense-ui-drew-bamford.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>浅析苹果ipad界面设计特点</title>
		<link>http://www.houshidai.com/design/ipadlow.html</link>
		<comments>http://www.houshidai.com/design/ipadlow.html#comments</comments>
		<pubDate>Thu, 18 Nov 2010 13:16:28 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[设计]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=1267</guid>
		<description><![CDATA[  　　大部分的用户都并非对体验与设计有深入研究，而是从“看着舒服、用着好用”的角度来衡量一款产品，据笔者观察 [...]]]></description>
			<content:encoded><![CDATA[<p> <img class="alignnone size-full wp-image-1271" title="apad" src="http://www.houshidai.com/wp-content/uploads/2010/11/apad.jpg" alt="" width="600" height="170" /></p>
<p><span id="more-1267"></span></p>
<p>　　大部分的用户都并非对体验与设计有深入研究，而是从“看着舒服、用着好用”的角度来衡量一款产品，据笔者观察一些网页设计与数码设计，发现两者之间有着异曲同工之妙，他们对用户的研究、设计发展趋势几乎是共通的，例如苹果著名的COVERFLOW，和网站设计首页焦点图展示的效果。因此，我们常提的CROSSOVER思维可以用上了，互联网与传统数码的视觉设计与交互体验可互为灵感参考。</p>
<p>　　<strong>前言</strong></p>
<p>　　为什么蓝魔的设计感觉“山寨”，而苹果的设计却被无数人追捧为“艺术品”？</p>
<p>　　为什么很多国产品牌模仿国际品牌，作品仍然缺乏吸引力？</p>
<p>　　笔者认为，很大的原因是因为他们都缺少自己的设计理念。好的设计应该有自己的理念，如QQ概念版的设计理念是“生命力空间感时间感”，所有的设计都应该围绕理念进行，所有的模仿都应该建立在理念基础上，这是设计的灵魂。苹果的理念是简约质感；Google是技术派，看似简单却有对用户行为深刻的理解；索爱手机的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>追求精致时尚；韩系品牌大都走柔和可爱风。好的品牌都有自己的独有风格和深入理解，不管如何模仿借鉴，精髓仍在。</p>
<p><img title="ipaddesign" src="http://www.houshidai.com/wp-content/uploads/2010/11/ipaddesign.jpg" alt="" width="490" height="285" /></p>
<p>　　<strong>关键词一：圆角阴影高光</strong></p>
<p>　　圆角、阴影、高光广泛应用于苹果产品设计和互联网设计中，这三种元素的加入，可以增加图标的“质感”。</p>
<p>　　仔细观察一下IPAD的图标，是否很明显的体现了这三种设计元素？圆角处理，月牙型的高光像从上而下打光，字体上淡灰色的阴影（是为了防止白色字体在白色背景上看不清楚，苹果考虑很细致）。不仅是产品，苹果的LOGO设计都没有脱离这三种元素。</p>
<p><img src="http://www.williamlong.info/upload/2281_1.jpg" alt="iPad" /></p>
<p>　　我们再看看Google的chrome浏览器，圆角、阴影、高光的效果仍在（图标圆角处理、图标边缘阴影以突出立体感、鼠标移至某一图标时的高光效果）。</p>
<p><img src="http://www.williamlong.info/upload/2298_2.jpg" alt="chrome浏览器" /></p>
<p>　　<strong>关键词二：空间感</strong></p>
<p>　　空间感并非一个空泛的概念，而是处处体现在设计中。它的一个典型表现方式，就是打破平面感，用立体与三维方式来展现。空间感的设计一是可以增加炫酷和华丽，二是可以用于凸显重要内容。</p>
<p>　　空间感的典型运用之一：苹果cover flow专辑封面展现方式</p>
<p><img src="http://www.williamlong.info/upload/2298_3.jpg" alt="苹果cover flow专辑封面" /></p>
<p>　　空间感运用于网站设计上，OPPO官网改版时焦点图类似cover flow效果。</p>
<p><img src="http://www.williamlong.info/upload/2298_4.jpg" alt="OPPO官网改版时焦点图" /></p>
<p>　　有了空间感的思维之后，发现常规的设计可以有非常多的突破！那就是，把每一个界面都想象成一个实实在在的物体，任我们翻转把玩！例如打破常规的图片展示，我们可以把图片翻过来，在背面写备注；使用多点触摸把图片抓到叠在一起；用便签纸的立体形式展示备忘录，随意贴在桌面的任何地方等等。</p>
<p>　　<strong>关键词三：半透明</strong></p>
<p>　　半透明的设计元素是个人的一个偏好，尤其当用于菜单与边框设计时，半透明可增加灵动、深邃和通透感，别有风韵！另外，半透明也可用于当一些菜单弹出，却不想挡住背景，可把菜单设计成半透明的感觉，既美观又不干扰视觉。</p>
<p><img src="http://www.williamlong.info/upload/2298_5.jpg" border="0" alt="植物大战僵尸" /></p>
<p>　　仔细观察一下IPAD的设计，很多地方都用了半透明的元素，包括首先进入时“移动滑块来解锁”的界面边框，以及进入后的主界面边框。</p>
<p>　　半透明元素在网站设计中也广泛沿用，比如著名的twitter。</p>
<p><img src="http://www.williamlong.info/upload/2298_6.jpg" alt="twitter" /></p>
<p>　　另一个用到半透明元素的网站。</p>
<p><img src="http://www.williamlong.info/upload/2298_7.jpg" alt="半透明元素" /></p>
<p>　　<strong>关键词四：拟物化生命力</strong></p>
<p>　　提起拟物化，大家首先想到的肯定是IPAD的IBOOKS书本表现方式，如同真书般惟妙惟肖，也赢得了很多用户的口碑。拟物化使用好了，可以增加亲切感，减少数码产品的冰冷感，因为用户对生活中的事物才是最熟悉的。同时，拟物化的使用，往往可以在第一眼打动用户，就是我们俗称的“惊艳”。</p>
<p><img src="http://www.williamlong.info/upload/2227_1.jpg" alt="iBooks" /></p>
<p>　　微软courier的拟物化，让数码脱离了机器冰冷的感觉。</p>
<p><img src="http://www.williamlong.info/upload/2298_8.jpg" alt="微软courier的拟物化" /></p>
<p>　　除了IBOOKS之外，三星P3里的小插件，飞舞的蝴蝶、散落花瓣的花朵、饼干人、电灯调节亮度等，其实也是试图通过生活中的事物，来增加用户的好感。</p>
<p><img src="http://www.williamlong.info/upload/2298_9.jpg" alt="三星P3" /></p>
<p>　　在网站设计中，也不难发现一些生命力的元素，如twitter的小鸟，可爱生动。</p>
<p><img src="http://www.williamlong.info/upload/2298_10.jpg" alt="twitter" /></p>
<p>　　<strong>关键词五：动态效果</strong></p>
<p>　　很难想象如果没有动态效果的使用，设计将会变成怎样。动态效果将会让设计更加绚丽、好玩、生动。</p>
<p>　　仔细观察一下苹果，我深深被它界面过渡的动态效果所吸引，华丽又不失自然。例如照片删除时唰的回到垃圾桶的效果，还有书本翻页的过渡效果。</p>
<p><img src="http://www.williamlong.info/upload/2298_11.jpg" alt="过渡效果" /></p>
<p>　　灰常多人都在玩的植物大战僵尸，每种下一棵植物，它都会轻轻摇摆，是不是很可爱呢？这也是一种动态效果。</p>
<p>　　我承认喜欢索爱的原因就是因为它的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>符合我的胃口。除了图标设计精致之外，图标周围有动态变幻的小元素，就像跳舞的精灵。</p>
<p><img src="http://www.williamlong.info/upload/2298_12.jpg" alt="索爱" /></p>
<p><img src="http://www.williamlong.info/upload/2298_13.jpg" alt="索爱" /></p>
<p>　　很多网站也用动态效果来表现，如菜单在鼠标移上去时的动作反馈，不仅绚丽动感，也是给用户操作信心。</p>
<p><img src="http://www.williamlong.info/upload/2298_14.jpg" alt="动态效果" /></p>
<p>　　<strong>关键词六：拟物音效</strong></p>
<p>　　这里需要再提一下植物大战僵尸，仔细观察这个游戏，会发现它也闪耀着智慧的光芒，从视觉设计的生动感、每个植物与僵尸角色的设计、情节布局的环环相扣、甚至是音效的配合都有很多值得学习的地方。</p>
<p>　　植物大战僵尸中大量使用了拟物音效，种植物时与草地摩擦的声音、子弹打到僵尸身上的响声、僵尸来临时的恐怖音效、脑子被吃掉时的哀嚎。拟物音效让这个游戏更加生动，不会苍白平淡。</p>
<p><img src="http://www.williamlong.info/upload/2298_15.jpg" alt="植物大战僵尸" /></p>
<p>　　再观察一下IPAD，翻阅图书时纸张的摩擦声、翻阅报纸时报纸的摩擦声，这个小细节让我感觉很兴奋。更加认定这个品牌是在用心做产品。</p>
<p>　　音效的使用可以让用户更有身临其境的感觉，尤其是模拟真实的音效。</p>
<p>　　以上是这几天的不完全观察，IPAD设计值得学习的地方还有很多，例如提示与暗示的巧妙使用、皮套的贴心设计等。笔者认为IPAD作为电脑的补充，是非常成功的一款产品（平板电脑完全替代电脑是不可能的）。至少，苹果在如今传统数码新品类发展的瓶颈时期，开拓了符合人类使用习惯的新思路，单从这点值得很多中国品牌学习。</p>
<p>[<a href="http://www.williamlong.info/archives/2298.html" target="_blank">来源</a>]</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/design/ipadlow.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>10个UI界面设计的基本问题</title>
		<link>http://www.houshidai.com/design/topui.html</link>
		<comments>http://www.houshidai.com/design/topui.html#comments</comments>
		<pubDate>Fri, 12 Nov 2010 16:25:43 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[设计]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=1112</guid>
		<description><![CDATA[UI 设计的魅力在于，你不仅需要适当的技巧，更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1113" title="uiprinciple" src="http://www.houshidai.com/wp-content/uploads/2010/11/uiprinciple.jpg" alt="" width="600" height="310" /></p>
<p><span id="more-1112"></span></p>
<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span> 设计的魅力在于，你不仅需要适当的技巧，更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现，包括视觉元素与功能操作在内的所有东西都 需要完整一致。为了实现这个目标，你需要问自己10 个最基本的问题。</p>
<p><strong>1. 你的<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span> 是否高度一致？</strong></p>
<p>用户来到你的站点，脑子里会保持着一种思维习惯，你的 <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span> 需要保持一致，以免用户的思维方向被打乱。比如，如果你的某个品目下的产品可以拖放到购物车，那你站点中所有产品都应该可以这样操作。将按钮放到不同页面相似的位置，使用相契合的配色，使用一致的语法和书写习惯，同时，让你的页面拥有一致的结构。</p>
<p><strong>2 . 用户能自由掌控自己的操作吗？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814922.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814922.jpg" alt="" width="500" height="258" /></a></p>
<p>你应当分析一下，自己的站点是否容易导航。用户应当可以自由掌控自己的浏览行为，确保他们能从某个地点跳出，能够毫无障碍地退出。那些在用户离开前弹出窗口的行为是 UI 易用性的一个大问题。</p>
<p><strong>3. 你知道谁是你的用户群吗？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814918.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814918.jpg" alt="" width="500" height="258" /></a></p>
<p>要设计有效的 UI，必须对你的用户群有所了解，不同的用户阶层对不同的设计元素有不同的理解，17~25 岁年龄段的人，和 40~55 年龄断的人有不同的喜好。你的 UI 设计必须针对你的用户群进行设计。</p>
<p><strong>4. 你是否有足够的预防错误的措施？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814917.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814917.jpg" alt="" width="500" height="258" /></a></p>
<p>应该尽可能检查程序中的错误和 BUG，虽然你可以弹出一个窗口告诉用户发生了什么，但为了更好的用户体验，最好减少这些东西。Beta 测试是消减错误的最好方法。</p>
<p><strong>5. 你是否首先将最重要的东西展示给用户？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814916.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814916.jpg" alt="" width="500" height="258" /></a></p>
<p>将重点放在重要的内容上面，首先为用户展示最重要的内容，以便用户更好地理解你的内容。</p>
<p><strong>6. 你的设计是否简约？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814919.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814919.jpg" alt="" width="500" height="258" /></a></p>
<p>很多站点的设计十分简约，简约设计可以增强 UI 的易用性，可以让用户不必关心那些无关的信息。你的 UI 应该是这样的，它的功能很强大，但设计很简约，拥挤的界面，不管功能多么强大，都会吓跑用户。</p>
<p><strong>7. 你是否使用了视觉提示？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814913.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814913.jpg" alt="" width="500" height="258" /></a></p>
<p>如果你使用了 Ajax， Flash 一类的技术，当内容在加载的时候，应当提供视觉提示，应当始终让用户知道目前在做什么。</p>
<p><strong>8. 你的UI 是否有操作提示？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814900.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814900.jpg" alt="" width="500" height="258" /></a></p>
<p>你的用户是否靠自己研究或 FAQ 文档学习如何操作？你应当在 UI 现场提供简单的操作提示，比如，使用 jQuery 在你的各个 UI 元素上显示操作提示。</p>
<p><strong>9. 你的内容是否清晰？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814907.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814907.jpg" alt="" width="500" height="258" /></a></p>
<p>确保你的文本准确，清晰，易懂。</p>
<p><strong>10. 你如何使用色彩？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814904.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814904.jpg" alt="" width="500" height="258" /></a></p>
<p>色彩是 UI 的重要元素，不同的颜色代表不同的情绪，你对色彩的使用应当和站点以及主题相契合。还应注意，有的用户是色盲，你应当考虑到他们的感受。色彩的使用应该一致，一旦选定了某种配色，就应该在整个站点一致使用这种配色。</p>
<p><strong>11. 你的UI 是否大象无形？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814902.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814902.jpg" alt="" width="500" height="258" /></a></p>
<p>UI Engineering曾经说过，”最好的设计不是用来看的，是用来体验的”。这意味着，你的 UI 应该让用户去体验，而不是放一些花哨的东西给用户看。UI 设计越简单，用户体验越好，不要滥用设计元素，不要使用拥挤的界面。</p>
<p><strong>12. 你的UI 是否有良好的结构？</strong></p>
<p><a href="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814906.jpg"><img title="36814926" src="http://www.ucd-grow01.com/wp-content/uploads/2010/09/36814906.jpg" alt="" width="500" height="258" /></a></p>
<p>你的UI 中，各个元素应当放在他们应当放的位置，总体结构应当清晰，一致，相互关联，那些不相关的东西应当单独放置。</p>
<p>本文国际来源：spyrestudios.com Diving Into The User Interface With Fundamental Questions（原文作者：Joel Reyes）</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/design/topui.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iPhone新浪微博 Weico微博客户端</title>
		<link>http://www.houshidai.com/product/weico.html</link>
		<comments>http://www.houshidai.com/product/weico.html#comments</comments>
		<pubDate>Thu, 11 Nov 2010 15:24:56 +0000</pubDate>
		<dc:creator>RUI</dc:creator>
				<category><![CDATA[产品]]></category>
		<category><![CDATA[APP]]></category>
		<category><![CDATA[EICO]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[Weico]]></category>
		<category><![CDATA[微博]]></category>

		<guid isPermaLink="false">http://houshidai.com/?p=1071</guid>
		<description><![CDATA[  Let‘s enjoy the colorful exploration now ！ Weico 是一款全 [...]]]></description>
			<content:encoded><![CDATA[<p> <img class="alignnone size-full wp-image-6045" title="Weico" src="http://www.houshidai.com/wp-content/uploads/2010/11/Weico.jpg" alt="" width="600" height="220" /></p>
<p>Let‘s enjoy the colorful exploration now ！</p>
<p><span id="more-1071"></span></p>
<p><span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/weico" title="查看 Weico 中的全部文章" target="_blank">Weico</a></span> 是一款全新独特的新浪<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/microblog" title="查看 微博 中的全部文章" target="_blank">微博</a></span> iPhone 客户端，最大的亮点在于极大优化和丰富了移动<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/microblog" title="查看 微博 中的全部文章" target="_blank">微博</a></span>的使用体验，提供流畅、快速、贴心、美妙的使用体验和感官享受。</p>
<p>这是一款由设计驱动的客户端产品，由 eico design 为新浪微博 iPhone 用户精心打造的。除了优化浏览操作、信息呈现、界面布局等使用体验外，<span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/weico" title="查看 Weico 中的全部文章" target="_blank">Weico</a></span>还提供了六套富有个性化、精致的视觉主题，允许大家随着心情变化主题。</p>
<p>Weico的目标是给大家带来的是流畅而多彩的微博探索之旅！</p>
<p><img src="https://z3bixg.bay.livefilestore.com/y1pL-QmNsDGpW_ds4qg7GtNqC4Mlra6dLqo5qSbx16kSPPmqNd8XUu3f9tvHJfJeTCzLk2J794ehGaH1LXGYs-zkDOjdj7GZNkk/Weico-ui.jpg?psid=1" alt="" /><br />
<strong>Weico 新浪微博iPhone客户端特点：</strong></p>
<p><img src="https://z3bixg.bay.livefilestore.com/y1p_BmcMeqUINmQmeEHVw8x1lrvN__abMIx3EHsQYVKHgPjOGFPcfBvoms1D2vhPkYNaj9R8qJ_RcmYDDdmuar4jR5G20jH4UeG/WeicoLaunch.jpg?psid=1" alt="" /></p>
<p><strong>流畅的微博浏览体验</strong></p>
<p>在首页中加入了图片缩略图与评论提示；在微博正文页内直接显示该微博的评论。</p>
<p><strong>优秀的发布功能</strong></p>
<p>一键拍照来创建新微博；支持图片的剪切功能；支持@与#话题#的快速输入。</p>
<p><img src="https://z3bixg.bay.livefilestore.com/y1p5UUbYtWm2pOW0dFwYT3V_uqADZYeISokP0m9nXmDF5J9fHdqdpXu8dDRG5zrJcD1nHsC4ZtevzXU8e2rMYWMKbYFPtGcBasW/weico-time.jpg?psid=1" alt="" /></p>
<p><strong>Weico <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span>设计欣赏：</strong></p>
<p><strong><img src="https://z3bixg.bay.livefilestore.com/y1p6LxN7DKpW5P9cBPcdvSo49QdEB6x26ANiIHc2tb1ie11UOT7RTixl4BROWWMcIWI0sOyFcBlN_WFDc3sbQXwaDGDkqz1p9su/weico-illustration.jpg?psid=1" alt="" /></strong></p>
<p>Eico <span class='wp_keywordlink_affiliate'><a href="http://www.houshidai.com/tag/ui" title="查看 UI 中的全部文章" target="_blank">UI</a></span> design</p>
<p><img src="https://z3bixg.bay.livefilestore.com/y1p2c6NQU4lpkdZ7wt2Q4E7rA5LJGC-DDIrsvwU_rZZcWkHszEd2pzBVVtEOJ51orQxcaPgWx1ifEunh7cLOfzOXYDLujtag3mz/Weico-eico-ui-design.jpg?psid=1" alt="" /></p>
<p>Eico UI design</p>
]]></content:encoded>
			<wfw:commentRss>http://www.houshidai.com/product/weico.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
