<?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>我烜无限的主页</title>
	<atom:link href="http://www.zhangxuan.cn/feed" rel="self" type="application/rss+xml" />
	<link>http://www.zhangxuan.cn</link>
	<description>张烜的个人博客</description>
	<lastBuildDate>Mon, 24 Oct 2011 03:09:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>扩展RBAC用户角色权限设计方案</title>
		<link>http://www.zhangxuan.cn/archives/24.html</link>
		<comments>http://www.zhangxuan.cn/archives/24.html#comments</comments>
		<pubDate>Mon, 24 Oct 2011 03:05:16 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[交互＆视觉设计]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=24</guid>
		<description><![CDATA[RBAC（Role-Based Access Control，基于角色的访问控制），就是用户通过角色与权限进行关联。简单地说，一个用户拥有若干角色，每一个角色拥有若干权限。这样，就构造成“用户-角色-权限”的授权模型。在这种模型中，用户与角色之间，角色与权限之间，一般者是多对多的关系。（如下图） 角色是什么？可以理解为一定数量的权限的集合，权限的载体。例如：一个论坛系统，“超级管理员”、“版主”都是角色。版主可管理版内的帖子、可管理版内的用户等，这些是权限。要给某个用户授予这些权限，不需要直接将权限授予用户，可将“版主”这个角色赋予该用户。 &#160; 当用户的数量非常大时，要给系统每个用户逐一授权（授角色），是件非常烦琐的事情。这时，就需要给用户分组，每个用户组内有多个用户。除了可给用户授权外，还可以给用户组授权。这样一来，用户拥有的所有权限，就是用户个人拥有的权限与该用户所在用户组拥有的权限之和。（下图为用户组、用户与角色三者的关联关系） &#160; 在应用系统中，权限表现成什么？对功能模块的操作，对上传文件的删改，菜单的访问，甚至页面上某个按钮、某个图片的可见性控制，都可属于权限的范畴。有些权限设计，会把功能操作作为一类，而把文件、菜单、页面元素等作为另一类，这样构成“用户-角色-权限-资源”的授权模型。而在做数据表建模时，可把功能操作和资源统一管理，也就是都直接与权限表进行关联，这样可能更具便捷性和易扩展性。（见下图） 请留意权限表中有一列“权限类型”，我们根据它的取值来区分是哪一类权限，如“MENU”表示菜单的访问权限、“OPERATION”表示功能模块的操作权限、“FILE”表示文件的修改权限、“ELEMENT”表示页面元素的可见性控制等。 &#160; 这样设计的好处有二。其一，不需要区分哪些是权限操作，哪些是资源，（实际上，有时候也不好区分，如菜单，把它理解为资源呢还是功能模块权限呢？）。其二，方便扩展，当系统要对新的东西进行权限控制时，我只需要建立一个新的关联表“权限XX关联表”，并确定这类权限的权限类型字符串。 &#160; 这里要注意的是，权限表与权限菜单关联表、权限菜单关联表与菜单表都是一对一的关系。（文件、页面权限点、功能操作等同理）。也就是每添加一个菜单，就得同时往这三个表中各插入一条记录。这样，可以不需要权限菜单关联表，让权限表与菜单表直接关联，此时，须在权限表中新增一列用来保存菜单的ID，权限表通过“权限类型”和这个ID来区分是种类型下的哪条记录。 &#160; 到这里，RBAC权限模型的扩展模型的完整设计图如下： 随着系统的日益庞大，为了方便管理，可引入角色组对角色进行分类管理，跟用户组不同，角色组不参与授权。例如：某电网系统的权限管理模块中，角色就是挂在区局下，而区局在这里可当作角色组，它不参于权限分配。另外，为方便上面各主表自身的管理与查找，可采用树型结构，如菜单树、功能树等，当然这些可不需要参于权限分配。 &#160; 以上，是从基本的RBAC模型进行了扩展，具体的设计要根据项目业务的需要作调整。欢迎大家提出批评意见！]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/24.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>需求是如何变成产品原型的</title>
		<link>http://www.zhangxuan.cn/archives/21.html</link>
		<comments>http://www.zhangxuan.cn/archives/21.html#comments</comments>
		<pubDate>Mon, 24 Oct 2011 00:52:47 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[交互＆视觉设计]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=21</guid>
		<description><![CDATA[在一个互联网公司的工作流程中，产品经理（主要指偏向产品设计的产品人员）和交互设计师是这个流水线上最起点的环节，也是关系最暧昧的两个环节。说其暧昧，是因为在很多互联网公司里面，这两个环节所做的事情是有重合的，这就意味着，他们或许也是整个流程中合作最紧密的两个环节。 相对比之下，产品经理更关注的是产品的内部逻辑、操作流程、策略等；而交互设计师更关注的是产品的易用性、流畅度和操作感受。总的来看，似乎可以认为，产品经理是从一个更加宏观的角度去设计产品，而交互设计师，则是从更多的细节出发，去提升用户体验。这两种不同的视角决定了只有产品经理和交互设计师密切配合，深入沟通，才能够最高效最合理的将产品策略转化为产品原型，从而为流水线的后面环节提供精确的参考资料。 下面以人人网广告平台的一些产品和交互细节为例，使用对话的形式来分享一下我个人在做交互设计过程中的一些体会和想法。入门级文章，高手请绕行。 在广告平台其中一个投放系统中，有一个产品需求，是要根据广告受众所在的地区做广告的定向投放。也就是说，可以控制广告只展示给固定地域的受众。这就意味着，需要设计一个「区域选择器」，供用户选择区域。产品经理的原始需求是这样的： 产品经理：“我们这次的投放系统需要设计一个区域选择器，就是让用户选择广告定向投放的区域的。可以精确到城市，可以多选。另外，‘区域’作为一个投放广告的限制条件，如果用户没有选择任何选项，那就代表用户忽略该条件，则该广告会面向全国投放。” 交互设计师：“哦。” 产品经理：“嗯，我能够想到的这个东西的原型，可以提供两个下拉框，让用户分别选择省和城市。当用户在第一个下拉框里面选定了省以后，第二个下拉框中会显示该省下面的地级市。我做了一个简单的框图，大家看一下。” 产品经理：“大概就是这个样子。每选定一个城市，点击后面的添加按钮，可以将该城市添加到下面的列表中。同时，如果点击已经添加的城市名称后面的「删除」链接，则会将该城市从已选列表抹去。” 交互设计师：“等一下，我有一个问题。按照产品的策略，如果用户一个城市都不选，那么就会默认投放全国。但是这个概念很难表达给用户，比如说，如果在「区域选择器」旁边放提示，估计没有多少人会注意到。” 产品经理：“一个都没选，就是等于忽略条件啊。因为这些都是限制条件。” 交互设计师：“问题是用户很难意识到是这样。在中国人的观念中，大家都是觉得，选上的，是我要的。但是大家没有「不选就等于全要」这种思维习惯。” 交互设计师：“我觉得可以这样。我们在现在的「区域选择器」上面放两个单选按钮。一个叫「全国」，另一个叫做「指定」。打开页面时，默认选中「全国」项，并隐藏「区域选择器」。只有用户选择「指定」项时，区域选择器才会出现。这样表达就很明确了，你不是「全国」就是「指定」。” 产品经理：“哦~听起来不错。试试。” 于是得到了下面这个版本的原型图： 交互设计师：“嗯，我想，现在这个版本已经基本上从界面的层面解决了全国投放的选项问题，我想，用户应该不会因为不知道怎么选而卡在这里了。” 交互设计师：“我看下一步，需要对一些关键的元素做一定的视觉设计，以便于引导用户操作。比如「添加」按钮，应该更明显些。我觉得可以请UI设计师出一个简单版本的UI了。” 产品经理：“稍等一下，我看咱们还是把细节再讨论清楚一些再去找UI吧。比如，字的颜色啊什么的都没定呢。而且，我觉得选中的区域中，每个城市名称后面都跟着一个删除链接，很奇怪。” 交互设计师：“嗯。的确。我的想法是这样，字的颜色，就用黑色吧，或者是深一些的灰色也行。虽然从视觉设计的角度来看，视觉设计师觉得稍浅一些的灰色比较养眼，可能黑色太‘抢’。但是咱们的系统毕竟是给人用的，灰色的话，可能会让人误认为这些选项是不可操作的。你看如何？” 产品经理：“同意。” 交互设计师：“关于已经选中的区域列表。我看可以把「删除」链接换成×，事实上，用户对于×这种符号比汉字更敏感。你看，大家不论是用Windows还是Mac，关闭窗口的时候都是×，早就习惯了。另外，为了让所选定的城市名称看起来是一个整体，并且跟其他城市名称区分开。我看，可以给每一个城市加上背景色，每个城市一个色块，这样也一目了然。” 产品经理：“颜色呢？” 交互设计师：“蓝色吧，人人网都是蓝色的风格。” 产品经理：“ok” 于是，配合UI设计师，得到了下面的界面： 产品经理：“我看现在这个地方已经基本上成型了。咱们也已经讨论很很久了。该问问别人的意见。” ———-时间分割线———- 产品经理：“Hi~ 各位。我收集了一些内部测试的意见。有用户提出，搞不太清楚两个下拉菜单和「添加」按钮之间的关系。” 交互设计师：“什么意思？” 产品经理：“就是说，有人意识不到选完了省，选完了城市以后，还得点「添加」。他们觉得，选完了就完事了。” 交互设计师：“晕。” 交互设计师：“可能是已选列表框在空着的时候长得太秀气了，大家没意识到它是用来装东西的。” 交互设计师：“好吧，我有两个方案。1、把「添加」按钮上面加一个向下的箭头。指向已选列表框。2、在已选列表空着的时候，添加一条提示语，来提示用户他并没有完成区域选择操作。” 产品经理：“提示语那个，你的意思是说，当用户添加了城市以后，会自动消失是吧？” 交互设计师：“是的。” 产品经理：“我觉得加提示吧。感觉放箭头有点儿傻。” 交互设计师：“嗯，而且，可能放了箭头以后，用户依然不知所云。” 产品经理：“那提示语怎么说呢？您尚未添加任何区域，请选定城市后，点击上面的「添加」按钮，该城市会被添加到…” 交互设计师：“停！太长了，大部分人不会认真看完的。” 产品经理：“的确…” 交互设计师：“我看就一句话就可以。写‘您尚未添加任何区域。’” 交互设计师：“你看。下拉列表后面的按钮叫「添加」。提示中又明确的传达出了尚未「添加」的状态。这样既说明了这个框框是用来放东西的，又可以告诉用户，这个东西是可以选多个的。因为「添加」的概念就是一个一个往里面放。如果只能放一个，那应该叫「选择」。” 产品经理：“顶。” 交互设计师：“而且，我觉得这个控件最初的原型你设计的不错。嗯，用户只要成功的进行一次操作，以后就可以非常高效的进行操作了。这个东西的学习成本和认知成本都比较低。” 产品经理：“oh,yeah~” 那么，现在的UI是这样的： 产品经理：“哎，对了。话说，我最开始的策略是，用户如果不选，相当于全选，要全国投放的。你说如果用户选了「指定」，但是并没有添加具体的城市，直接提交表单，怎么办？系统是应该直接把用户的广告设置成全国投放，还是报错，阻止用户继续？” 交互设计师：“我看啊，报错吧。因为现在「全国」和「指定」这两项，已经明确的把整体和局部给分开了。我觉得你那个策略没必要再应用了，因为现在这种已经达到了你最初的目的，而且还好理解。再有就是，咱们的平台是涉及到钱的，是要让用户花钱的，如果让用户不明不白花了冤枉钱，本来想投北京的投了全国，那我们会被用户骂死的。虽然感觉上报错会让用户有挫败感，但是在这种细节上，还是用户利益应该放在第一位，用户体验，可以稍微往后放一放了。” 产品经理：“好吧。” 交互设计师：“呵呵，你看，这个故事告诉我们，不能每件事情都听产品的。产品提的只是需求，但是如何实现需求，还是得从多个角度来讨论。” 产品经理：“好吧。那么，技术兄弟们，下面的工作就拜托你们了。” 个人观点： 1、产品经理和交互设计师需要时刻密切配合，深入沟通。 2、有时候，产品策略和用户体验会发生冲突，这时应该从多种角度去考虑和探讨最终解决方案，不应该有谁一定比谁重要的说法。 3、优秀的产品经理，相当于半个交互。同样，优秀的交互设计师，相当于半个产品。二者虽然职位不同，但是应该在一定程度上考虑对方的工作内容。 [...]]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/21.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WAP设计基础</title>
		<link>http://www.zhangxuan.cn/archives/18.html</link>
		<comments>http://www.zhangxuan.cn/archives/18.html#comments</comments>
		<pubDate>Sat, 22 Oct 2011 02:19:26 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[交互＆视觉设计]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=18</guid>
		<description><![CDATA[WAP站点，这似乎是一个有点落伍的东西。在诞生之初，它很简陋，只能通过一个叫WML的标记语言来搭建没有任何美感的文字+链接页面。而今，绝大部分WAP站点都开始使用xhtml标记语言，不过在iOS、Android风潮席卷全球的今天，这个演进似乎显得有点苍白无力。但在中国，WAP的用户群体依然是移动设备上网的绝对主力军。那么，到底该如何设计一个WAP站点呢？个人以为，需要从设备、浏览器、任务、场景四个方面入手。一个WAP站点好与坏，不取决于页面的绚丽程度，不取决于功能是否强大，而是取决于站点的兼容性。 一、用户使用的设备 “用户是通过什么设备访问我们的站点？”这是在搭建一个WAP站点之初，设计师需要考虑的第一个问题。一般来说，我们可以把用户使用的设备粗略的划分为【键盘机】和【触屏机】。 Ⅰ、键盘机： 屏幕物理尺寸小，可视区域小 用户对手机的操作受限于导航键 &#160; 1. 可视区域小，就决定了用户在当前屏幕内看到的内容非常有限，用户往往是通过扫视第一屏的内容来决定是否继续向下浏览。我们在设计过程中，则需要按信息的重要度以降序的方式来组织，将最重要的信息在首屏呈现给用户。大部分情况下，logo和导航区块是必不可少的元素。如果你的站点是互动型的，还需要在header里体现出用户登陆状态和用户名。根据应用场景和任务的不同，少数页面可以省略header。 目前市面上低端机器的屏幕分辨率宽度基本都在176px以上，所以，针对最低端键盘机设计WAP站点时可采用176px的基准宽度来设计，页面高度不限，但最好不要超过7个屏高。同时还需考虑页面文件大小，页面文件大小最好控制在13k以内。 2. 键盘机的第二个特征决定了用户必须遵循既定的规则来移动焦点，例如：方向键、摇杆、滚轮、拨盘（BlackBerry）。正因为如此，我们在设计的时候，必须思考页面链接元素之间的内联关系，仔细计算用户的焦点移动轨迹。重要的信息最好是放在每一行起始位置。 Ⅱ、触屏机： 可视区域较大 操作所需面积大 用户操作行为跳跃 1. 可视区域大，决定了页面承载的信息量也比键盘机要多。现在市场上主流的触屏手机分辨率为320*480，屏幕宽度最低也是240。这时，如果将适配键盘机的WAP页面放到触屏机上来看，会出现大面积“被留白”的情况，视觉上将带给用户松散的感受。这时我们可以将240px作为基础宽度进行设计。 2. 触屏手机的屏幕大了，是不是我可以放更多的链接了？答案其实是否定的！用户通过手指、触控笔对手机进行操作。触控笔笔尖一般面积都在2*2mm左右，能进行比较精准的点击。而人的手指头则要大很多，为了确保用户不会出现误操作，我们在设计的时候，需要将链接的字号、行高、间距增大。国外研究某资料给出过参考值：食指所需最小操作面积为7*7mm、间距1mm；拇指所需最小操作面积为9*9mm、间距2mm。（资料待查阅后将补上原文链接） 有同学会问了，这个面积单位是毫米，如何在设计过程中我们如何换算成像素呢？这个根据每款屏幕的分辨率、dpi、物理尺寸的不同，换算结果都不一样，有关像素、dpi、厘米、英寸之间的换算关系，请学习这篇文章。 3. 众所周知，用户在操作键盘机的时候，在达到目标链接之前，基本都需要进行多次焦点移动的操作。而触屏机则没有这种限制，用户的操作大多不再受物理按键的局限，更多是受到视觉感官的支配，换句话说就是看哪点到哪。这时需要注意的是，因为失去了“焦点”的提示，我们必须对可点击的链接和不可点击的文字进行明确的视觉区分。 二、浏览器左右设计 大部分手机自带浏览器和第三方浏览器在操作方式和页面解析上都有着自己的特性。我们在设计之初，需要深入的了解它们各自的特性，这样我们才能对不同的方案进行权衡。本文针对焦点、操作键、HTML&#38;CSS这三大基础因素就浏览器对设计的影响进行一番浅析。 Ⅰ、焦点如何移动 1. UCWeb浏览器 左右键：翻屏 上下键：焦点逐个移动 长按左右键：加速翻屏 长按上下键：加速焦点纵向移动 &#160; 2. 手机QQ浏览器 左右键：横向移动焦点 上下键：纵向移动焦点 长按左右键：翻屏 长按上下键：加速焦点纵向移动 3. Opera mini浏览器 这哥们是最PC化的手机浏览器。内置伪鼠标一枚，左右键、上下键均为鼠标横向、纵向移动，单次按键大概位移10像素，长按加速。 了解浏览器的焦点移动规则后，一方面有利于我们对某个控件信息进行优化组织，另一方面对于多个设计方案进行取舍的时候也有莫大的帮助。当我们充分考虑焦点移动路径、用户操作频次、某信息块权重等因素后，往往能迅速的找到最适合的设计方案。 小提示：QQ浏览器和UC浏览器默认会给所有的图片赋予焦点，也就是说哪怕页面上某张图片没有链接，但用户操作过程中焦点也会路过这张图片。 Ⅱ、操作键 键盘机的浏览器（自带、第三方）都有左右功能键。左功能键一般为菜单键，右功能键一般为返回、退出键。用户在进行“返回”操作时，基本都会通过右功能键完成。触屏机虽然没有物理功能键，但绝大部分的浏览器都在屏幕内虚拟了一排功能键。并且UCweb、QQ、Opera等第三方主流浏览器均提供缓存功能，页面在返回的时候均为秒读。因此，我们不需要频繁的为用户提供“返回上一页”的链接。后续的系列文章中，将有专门的章节对手机导航系统进行探讨。同时，某些浏览器也提供重定位至页顶、至页尾以及快速翻屏的操作，当我们在处理超长页面时，对于“Top”这样的回顶部锚点的处理也需要慎重。 Ⅲ、HTML &#38; CSS支持度 各大厂商大多都有一套自制内核的浏览器，甚至同一个平台下的不同系列手机浏览器的解析效果也五彩缤纷，再算上市面上的多款不同内核的第三方浏览器，这真的让人无比头大！因为公司的兼容性研究资料尚未开源，所以这里只能列出一些高危的风险点。有兴趣的朋友可以自己着手研究下，有条件的公司也建议系统的做一次深入测试。这些资料对于WAP站点的设计有着决定性的影响！ font属性：176px的屏宽下，12号字一行可以放14.5个汉字，但实际上部分浏览器会将字体放大至14号，所以安全字数是12个汉字/行，并且大多不支持自定义字体； background属性：背景色支持很好，但背景图片支持度则要差很多，如果你需要用到背景图片，最好设置一个类似的背景色做优雅降级处理； float、position属性：千万别照搬Web的层叠布局理念，这是两个高危属性，老老实实搭积木吧； margin、padding属性：这两个也支持不好，所以不等高、宽的设计方案在实现过程中兼容性问题很大； [...]]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/18.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>手机客户端交互适配设计之我见</title>
		<link>http://www.zhangxuan.cn/archives/16.html</link>
		<comments>http://www.zhangxuan.cn/archives/16.html#comments</comments>
		<pubDate>Sat, 22 Oct 2011 02:18:08 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[交互＆视觉设计]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=16</guid>
		<description><![CDATA[简摘：本文从手机平台、机型（触屏和键盘）及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则。 手机客户端软件虽只是手机中一个功能，但它却要比设计单款手机更为复杂。在设计单款、单系列手机时，需要考虑这款手机的软、硬件优势及不足，考虑其特性、其UI Style Guideline ，确定这些内容后，整个平台的UI也找到基础了。说起来，这至多是考虑某个系统、某个屏幕的特性而已，而不同功能的所有设计基础都是一致的。 但是对于客户端，咋一看，好像很简单，就是设计一个应用。实则不然，客户端重在适配，客户端不仅仅会用在一个型号的手机中。这样问题随之而来，如何能适配不同的手机呢，手机千变万化，我总不能只针对一款手机，一个平台吧？当然也有些客户端确实是这样的，只能使用Windows Mobile、Symbian、iOS、Android、Java(非系统)等的某个平台。但是即使对同一个平台，问题还是很多，是要在触摸屏中来用，还是在键盘机中使用？是在大屏幕中，还是小屏幕中等等。 如何处理？？？有待大家讨论，这里只是抛砖引玉… &#160;                         客户端在不同的平台中，界面展示和特性各不相同 所以，本文中，我想简单的总结一下手机客户端的交互适配方法，希望能更好地来指导当前移动应用的设计需求。 一、 手机客户端的适配分析  对于手机客户端的适配，我想首先需要做的就是如何适配，我要在什么样的手机上使用？在设计上，我会从平台、键盘机与触屏机、屏幕大小三个维度进行分析： 1. 平台： 不同的平台手机的设计风格、操作方式、硬件配置都存在很大的差异。当前的主流平台主要包括 iOS、Android、Symbian、Blackberry、Win Phone7、Web OS等。 每个平台都有各自的设计指南（UI Style），其对应的手机的硬件也有各自的特点，如iPhone的home键，Android 的back键，blackberry的滚轮等等。特别提一下Palm，Palm的web OS真的值得手机交互设计师研究一下（手机 Palm pre）。因此，在设计上，不仅要了解平台的设计指南，同时需要考虑平台的硬件特征，使自己设计的应用不仅符合平台的交互特性，并能兼容平台上硬件使用习惯，提高应用的可用性。 &#160; Win phone 7 系统的几个特点  &#160; iOS系统的几个特点 Android 系统的几个特点 由上图可知，几个最新的平台也存在较大的不同。对于手机的平台特性，会在未来的博文中再详细赘述。 2. 触屏机和键盘机 键盘机和触屏机在操作方式上很不同。 下面简单总结一下键盘机和触屏机的特点。  键盘机：  1）键盘机的操作方式采用Soft Key 与屏幕软键标签一一映射（左右软键、对话框的按钮等都需要与键盘的标签一一对应），对所有的屏幕元素，都需要用五向键（滚轮）导航；需要用光标来操控屏幕上的所有元素。 2）一般左右软键上有一个【返回】键。用户可以通过软键快速的返回。 3）由于用键盘操作时，每次选择项目都需要从上到下依次浏览项目，因此重要性高、使用频率高的元素应放在屏幕的最前面。 4）按键可以根据数字键来设置一些快捷的操作；通过长按来设置快速翻页。 5）除了网页的形式，绝大多数的操作都是在菜单里完成。 6）文字输入的方式，通过键盘来输入，全键盘和数字键又有不同。  触屏机（屏幕尺寸会略大）：  触摸屏手机最主要的特点是直接操作屏幕对象。对用户来说，不需要进行映射的转换，因此易学性更强。但是由于手机的使用场景很特殊，或站着，或在行走，或只能腾出一只手等等，在这些时候要精确指点操作也有一定的难度。 触屏手机也有两种操作形式，用手指直接操作或者用笔操作。但是当前的屏幕发展及推出的机型来看，主要会针对用手指直接来操作。如果用户操作后，有屏幕的力反馈，则效果会更好。 1）操作对象的大小符合手指的操作，按键的大小设置规范： 食指点击的间距 约为7*7 [...]]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/16.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>客户端交互设计适配之——屏幕大小</title>
		<link>http://www.zhangxuan.cn/archives/14.html</link>
		<comments>http://www.zhangxuan.cn/archives/14.html#comments</comments>
		<pubDate>Sat, 22 Oct 2011 02:17:37 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[交互＆视觉设计]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=14</guid>
		<description><![CDATA[随着各个手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上迁移。然而手机与PC 不一样，PC经过了多年的发展，在设计上形成了很多不成文的规则，如网页的宽度都在960px左右【当然，由于整体的电脑屏幕往大尺寸及高分辨发展，除了背景宽屏自适应外，不少网页也正朝着更宽的方向上发展】。当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾点。 在客户端的设计过程中，针对不同的屏幕大小，应该如何来设计？是否每个大小的屏幕尺寸都需要一个新的界面布局，还是所有的屏幕尺寸都使用相同的界面布局？我们将在下面的内容中来探讨这些内容。 一、当前热门手机的屏幕大小  下图中，我抽取了国内某个网络电器城某周的10大畅销手机排名： &#160; 虽然只是2010年中的某一周的手机销售量排名，由此可以看出，当前使用中的手机屏幕差异很大，各种屏幕大小和分辨率都有。如果为了适配更多的用户群体，则需要考虑的手机屏幕大小和分辨率更多。【不过，根据当前的手机发展趋势，及手机客户端的使用行为可以看出，最主要需要用户关注的手机屏幕是2.4吋以上，240*320以上的手机屏幕，因为这样的手机使用客户端的频率和用户量都会更多。个人建议更多地是考虑320*480及以上的屏幕。】 二、屏幕大小正确理解 说起屏幕大小的时候，会有两种表达方式，1） “我的屏幕2.4吋，你的屏幕3.5吋。” 2）“这个屏幕分辨率 240*320，那个屏幕分辨率为320*480。”但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。 这里首先有几个概念需要再澄清一下： 屏幕物理尺寸：屏幕对角线长的实际尺寸，如2.4吋，3.5吋等等 屏幕分辨率：屏幕所能显示像素的多少。如，240*320等。 屏幕密度（pixel per inch）：以每英寸的像素数。每英寸的分辨率数，如160ppi。 物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。 在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，甚至更为重要（人眼是要靠物体成像在视网膜上的视角大小来进行识别感知，视角是与物体实际大小和距离有关）。 在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。 也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。 在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。 也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。 三、设计过程与屏幕适配思路 1．确定目标的屏幕大小 屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容；文字可以在适当的位置折行；标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。 由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作系统、手机类型等还是存在很大的相关性的。 首先，我们先来定义一下手机的屏幕大小的归类档次： A. 小屏幕：宽度240 px 以下屏幕或者2.4 以下屏幕 一般以非智能机为主，归在这个分类中的手机屏幕，一般是以java版本的客户端为主。 B. 中等屏幕：宽度240~320 px，或者2.4~3.0吋屏幕 智能手机以Symbian或S60 v1,2,3，Windows mobile为主流；或者是非智能手机的客户端以java版本为主。 同时包括240*320的宽屏手机。 C. 大屏幕：宽度320 px以上屏幕或者 3.0吋以上的屏幕  iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致； Android 系统手机及衍生平台手机 Win phone 7 系统手机 Nokia [...]]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/14.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>行为地图（Behavioral Mapping）在可用性研究中的应用探索</title>
		<link>http://www.zhangxuan.cn/archives/9.html</link>
		<comments>http://www.zhangxuan.cn/archives/9.html#comments</comments>
		<pubDate>Sat, 22 Oct 2011 02:12:00 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[用户体验研究]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=9</guid>
		<description><![CDATA[概念+实战 一、概念篇——传统行为地图（Behavioral Mapping）的概念及应用范围 一种从时间和空间角度，系统的观察研究行为的方法。而这种从时间和空间角度还可以有两个维度进行观察：以人群或个体为观察单位、以地点为观察单位。 以人群或个体为观察单位（好像有点像狗仔队），观察人群/个体的行为、语言、行动路线等，得到关于这个人或这一个体的习性、性格特征等。这种观察更多的是用在动物或者小孩身上，因为当你观察小孩子的时候，可能会被注意到，但是很快他又会忽略你的存在，对实验观察的影响比较小。 重点要说一下以地点为观察单位来进行行为地图的研究。主要会运用于公园、医院、图书馆、博物馆等公共场所，研究人们的行为路线，从而提升公共设施的便利性、人性化。 案例一：某研究团队对一个关于“淘金时代”纪念博物馆所做的行为地图研究 目标：共53人，男性28人，女性25人，年龄约45岁左右 实验时长：12天，工作日分时间段，周末全天 观察时长：平均耗时都是31分钟左右 研究发现：在博物馆的中心展区游人停留的时间都比较短，约45s，大约只看看3个入口处的3-5个展品。并且，在这个餐馆过程中，参观游人没有任何的交流，也不会去触摸展品。 年纪稍大的人阅读展品说明的文字比较困难。 是展品很无聊？还是另有原因？不得而知，这就是行为地图的一个缺陷，虽然你知道你的研究对象做了些什么、说了些什么，但是你不知道为什么。 给出的改进建议： 1）减少出入口，即聚流，将3个出入口变为1个； 2）将有趣的展品放在入口处，吸引游人继续参观下去； 3）将展品按照一定的逻辑，例如：年代，来展示； 4）增强互动，可以延长停留时间。例如，增加写按钮、或者语音类的讲解、小游戏等 5）更换展品说明的文字颜色以便老年人阅读更方便 案例二： 这是一个downtown的公园行为研究，从而发现问题： 是不是可以让人有想来约会的冲动？ 公园的入口是否清晰，是否会吸引人进去？ 公园的座椅是否够用？人们都经常在哪里聚集？ 每个方法都有优劣势，简单来说，行为地图的操作会比较容易上手，记录时间、记录行为等，对参与实验人员进行简单的培训即可上岗；同时，对被试人员不需要经过招募、选定。但是，也有弊端，我们上面提到的，你不知道人们为什么会做出这样的行为。 二、实战篇——在手机WAP流程中的应用及探索 前段时间一直在接触无线的业务，WAP的产品经理，想要对手机用户在WAP上的购物流程进行一些梳理，并发现一些可用性问题。但是，PD不是很确定用户的路径有什么规律，所以最后我选择了行为地图的方法，因为这样不仅可以帮助PD和设计师理清流程，也能在中间发现一些问题，结合访谈，还可以知道问题的原因，但是比单纯的访谈要生动有趣一些。 之前的准备工作： -列出所有用户可能涉及到的操作和流程，如图： -根据之前无线的一些研究，用户任务在两种情景下进行“有购物目的”、“无购物目的 确定目标用户： -无线新用户（PC客户端3星以上用户，近三个月手机登录次数&#60;=3次，有无成交均可） 综合所有被试用户的行为，如下图： 以上均为登录状态下的路径图 （在测试中，发现用户在登录与非登录状态下，行为路径也有不同，所以，在最后的报告呈现中，将登录与非登录状态做以区分） 整理后，如下： 有购物目的 无明确购物目的 经过可用性测试，可以简单梳理出用户在使用WAP的一些路径，但是，本次测试使用行为地图有以下几个缺陷： -参与被试需要量多。因为一般可用性测试是6-8人即可，但是行为地图的研究对于数量要求还是有些高的（20个是保障），所以应用到互联网中成本会比较高； -对记录员要求高。记录员要准确的记录用户的每步操作，整个过程需要全神贯注； -无法记录时长和出错率。在传统的行为地图中，可以记录在某个地点的时长，但是使用手机过程中，因为收到手机本身的限制（如触摸屏的误操作）或者无线网络的速度等，我们无法准确记录页面停留时长及出错率，所以无法判断哪些页面可能是在特定情景下用户比较感兴趣的； -分析起来比较吃力，结果也无法预期。因为要看到所有用户的趋势，就需要人工的将每个用户的路径都梳理一遍（人工去画），所以工作量比较大，有没有规律要总结出来才能看到； -手机TB购物本身的局限。因为对于TB的业务来说，本身就只有 那么几个核心的购物页面，最后可能真的只是对猜想假设的一个验证，没什么特别的新发现（除了一些界面和交互的可用性问题）； 其实，对于互联网的产品来说，不能严格按照行为地图的方法进行研究，例如，没有办法严格记录时间、动作、出错率，但是，比传统行为地图更有优势的地方在于：当用户发生了预期之外的行为，你可以通过访谈很快的了解“为什么”。 行为地图在WAP流程中简单的可用性研究，算是一种探索，希望能与大家共同思考~]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/9.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>手机客户端UI设计之手机平台之争</title>
		<link>http://www.zhangxuan.cn/archives/6.html</link>
		<comments>http://www.zhangxuan.cn/archives/6.html#comments</comments>
		<pubDate>Sat, 22 Oct 2011 02:09:56 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[用户体验研究]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=6</guid>
		<description><![CDATA[1. 当前手机平台的争锋 为了占领移动互联网的制高点，当前的几大IT巨头都以手机平台为基础展开争夺。占领移动平台就是占领了用户的移动桌面，也就为自身的移动服务争取到了最佳位置。 微软公司推出windows phone 7, 曝光了windows 8；苹果公司也开了iOS 5的发布会；谷歌的Android 3.0的发布，Android 2.4 的若隐若现等等；大家都在努力提升平台体验。另外，惠普的Web OS、黑莓公司也都在研制和发布新平台，也引起了业内人士的极大关注。 从当前市场占有率和未来的发展趋势看，客户端适配上，主要还是考虑iOS ，Windows，Android三个系统为主，其他的系统在国内还难占据主流，这里不解释。Android手机的增长最快；iOS手机在国内的占有量也增长很快，利好消息也不断，电信、移动都在谈；Windows主要看与Nokia的未来合作，前景不小。 因此，在本文中，简单的介绍一下这三个主流平台的交互特性，以帮助刚从事客户端交互设计的同行们更快地了解它们的基本特性，为能开发出更好体验的客户端提供便利。 2. 各个平台的特点及优势  1）平台的硬件特性 a)   平台的按键 手机按键是系统自带的，平台也会把按键的功能带入到系统的客户端应用中，他也天然地与用户操作相融合。 手机按键一般分为两类，功能键和导航键。功能键被指派为特定的功能，用户按了后，触发对应的功能，一般与屏幕内容关系不大，如拍照键，只是启动拍照，在其他的客户端中基本无效。 另一类是导航键，被赋予了特定的逻辑规则，她的操作与屏幕有一个逻辑映射的关系，但操作与操作对象分离，用户按键后，在屏幕中得到对应的反馈。如【Back】映射为返回前一页，点击【Back】后，屏幕的内容返回到上一页。 功能键能直接启动功能，它本身对交互的影响不是很大。而导航键则是交互设计的重要组成部分。主要应该注意以下几点： （1）  客户端的交互导航设计应该支持平台的导航按键的操作。不管你是否已经在屏幕中有虚拟按钮代替了按键已有的功能，也应该支持系统按键的导航逻辑。 （2）  客户端用到了平台的功能键对应的功能，应该支持功能键的操作。如，在客户端中需要调节音量，则应该支持系统音量的按键来控制。 （3）  所有客户端对按键的操作都必须保持一致，不要随意互用。 b)   平台的屏幕适配 由于不同平台的开放程度很不一样，不同的平台产品对于屏幕的大小的设计很不一样，有些只有很少的尺寸分布；有些有很多不同的尺寸，这给适配带来了很多问题和麻烦。屏幕适配设计参见我之前的博文。 c)   平台支持的其他硬件：传感器，屏幕特性等 iPhone 推出来后，迅速风靡全球，创造了一个革新的时代（也有人说iPhone本身不是革命，但是他创造了一次革命），除了设计本身外，几个传感器的合理使用也立下了汗马功劳。主要包括，重力加速度传感器、陀螺仪、接近传感器、电子罗盘等。这些传感器在不同的情景下，创造了很多独特的体验，极大的增强了手机的可玩性。 不同的平台或是手机会支持不同的传感器，在界面设计时，也需要考虑它们在不同平台上支持的普及程度，以及不支持的时，能提供的相关代替设计方案。 2）平台的界面特性 a)   应用入口形式 应用程序的启动入口是指用户启动程序的交互界面及操作形式。不同的平台上，对于启动入口操作和界面也有较大的区别，这是展示平台特性的第一印象。同时，不同平台及手机公司为了使品牌形象更加突出也会在这里多做文章。 从交互特性上看，应用程序的启动入口主要有以下几个特征和注意点： b)   页面基本结构 页面的基本结构布局，决定了手机界面的主要风格，在不同的平台上为了表现出设计的差异和风格，在界面布局上都有所不同。但是，总的来说还是没有与iOS有何本质的不同，主要在形式上略微的不同。 iOS： Android： Windows Phone7： Android 的手机厂商都更改了原生系统的界面，不同Android手机在界面的展示上多有不同。在Android客户端的设计上，本身有不少都是从iOS上直接移植了界面，导致了它的更多不同。但是不管怎么样，界面上操作和导航逻辑要符合平台本身的特征。 在框架的设计上，我是倾向于把最核心的操作放在底部，方便用户的单手操作。iOS的设计把导航按钮方在左上角，远离大拇指的操作区域，就是容易造成用户脱手“甩机”，也影响操作效率。 c)   [...]]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/6.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何设计新手用户引导</title>
		<link>http://www.zhangxuan.cn/archives/4.html</link>
		<comments>http://www.zhangxuan.cn/archives/4.html#comments</comments>
		<pubDate>Sat, 22 Oct 2011 02:05:47 +0000</pubDate>
		<dc:creator>zhangxuan</dc:creator>
				<category><![CDATA[用户体验研究]]></category>

		<guid isPermaLink="false">http://www.zhangxuan.cn/?p=4</guid>
		<description><![CDATA[一个新的网络产品，或者一个全新的功能要想吸引用户的使用兴趣，就需要让用户在刚一接触到的时候能够快速地了解它是什么，能做些什么，并且能马上开始一些简单的操作。如果看了很久还没弄明白这些，那么很可能就彻底放弃了。 所以，设计新手用户引导，就是设计用户前一、两次使用产品时的体验，设计目标是让新手用户快速、无痛苦地成为中间用户。 一、设计时的注意事项 无论是什么类型的产品，新手用户在尝试时都会经历一些共同的情感历程：他们会对新产品和新功能有一些好奇和茫然，希望能快速了解它的概念和范围。在尝试使用时会比较敏感、容易受挫。如果身边有非常了解产品的专家级用户，一般会十分相信这个专家用户对产品的介绍和判断。 针对新手用户的这些情感上的特征，我们试着提出来一些设计新手用户引导时的注意事项。 1. 尽量少的新手任务 首先，我们要让新手快速了解产品是什么、能做什么，并且能快速上手，那么完成这个过程必须经历的任务一定不能多，要特别有针对性。引导用户阅读说明或是尝试操作都要围绕着“了解产品的概念、范围”这个目标展开，尽量不超过三个新手任务。“将用户想象成非常聪明，但非常忙的人。”──Alan Cooper。 2. 最好的引导是无形的 如果一个产品的用户界面做得足够好，体现了用户的心智模型的话，那么就不需要设计所谓的新手用户引导，而是能让用户一看到就知道要如何操作。另一方面，在新产品中延续用户在其他同类产品中已养成的使用习惯也是将引导化为无形的一种手段。 3. 容易发现和理解 当新功能确实复杂到需要特别的引导时，我们需要让引导信息容易被用户发现和理解，提供明确的操作入口。 4. 适当夸大用户成功的程度 在新手还比较敏感、易受挫的时候，给她一些鼓励和积极的反馈能够帮助她建立起使用信心。这个做法在游戏中特别常见，针对新手的任务一般都很简单，奖励积分会来得特别容易，一旦上手之后就越来越难了。为用户设置符合她使用水平的任务，并帮助她成长，这也是符合Mihalyi Casikszentmilhalyi的心流理论的。 5. 原谅用户出错 用户在不了解产品的时候最有可能在里面到处乱逛，因此产品需要提供一个安全的、可供探索的环境。系统提供的防错、纠错、帮助从错误中恢复等机制，针对新手用户的任务可以做得更加细致和周到，可多花一些成本。 二、设计思路 以上提出的注意事项要如何在产品中体现呢？我们查阅了一些资料，也学习了目前比较受欢迎的网站的常见做法，在此基础上提出我们的设计思路。还远谈不上是什么设计方法，因为还很不严谨。只是想提出来供大家探讨，拍砖也是可以的。我们暂且叫它做“以新手任务为中心”的设计思路。 1. 确定新手任务 谈到以新手任务为中心，那首先第一步就是要确定什么是新手任务。我们知道产品设计永远是以中间用户为主，不会针对新手用户单独设计一个产品。在为中间用户设计界面的基础上，提炼出一些新手任务来帮助新手用户成长。前面提到了最好的引导是无形的。如果做到了无形的引导，那么就没有必要设置专门的新手任务，但是很多情况下，新手任务是必要的。 我们首先为产品整理出一份功能清单，然后从中筛选出新手用户的任务。 筛选依据以下原则： 前3次使用产品需要操作的任务； 非完成不可的任务，否则无法继续使用产品； 聚焦到不超过3个新手任务。 2. 分析任务特征 确定新手任务之后，对任务的特征进行分析。我们从两个维度来分析一个任务：任务难度和操作频率。下图是以SNS网站为例，列举了4个任务，分别对应了4种不同的任务特征： 注册：低难度、低操作频率； 建立个人资料：高难度、低操作频率； 写博客：低难度、高操作频率； 建立朋友圈子：高难度、高操作频率。 3. 分析用户类型 根据用户使用产品的目的明确性，我们把用户分为3个类型：无向型、探索型和定向型。 无向型：没有目标，不知道自己要什么；会偶尔发现感兴趣的信息；对使用产品的粘性弱。 探索型：有模糊的目标，但无法准确表达；目标范围过广，无法迅速确定；对使用产品的粘性一般，可能会选择竞争对手产品。 定向型：有计划、有目的的访问网站，有时候甚至清楚怎么做；有耐心，包容性强；对使用产品的粘性强。 把新手任务的特征和用户类型按以上方式大致分析归类之后，接下来就是确定如何在界面上展示这些任务去引导用户一步步操作下去，也就是任务的具体表现方法了。我们总结出7种常见的表现方法，并且与任务特征和用户类型逐个去对应。 三、表现方法 1. 大喊大叫式 用视觉等手段达到让新手任务“大喊大叫”的效果，旨在吸引新手用户立刻采取行动。 图片来源：Backpackit 适用的任务特征：独立的主要任务或分步骤的简单任务、操作频率低； 适用的用户类型：无向型、探索型。 2. 填补空白式 [...]]]></description>
		<wfw:commentRss>http://www.zhangxuan.cn/archives/4.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

