Product & UX – blueben's blog

淘宝Android平台客户端试用体验[原创]

blueben — Wed, 18 Aug 2010 19:06:20 +0800

下午看到淘宝发布Android平台客户端，于是立即找来试了试。在电子市场里搜索“taobao”很容易就找到了，400多K吧，还算合适，下载，安装，完成。打开，首先是一个欢迎界面，显示正在连接网络，然后进入主界面：在主界面可以看到除了搜索之外，还支持语音和条形码2种找商品的模式。试了一下条形码，感觉还是比较虚，很依赖摄像头和外界环境，使用的时候条形码即使非常清晰，都还需要照好久才能识别。而且识别结果好象不是对应结果，而是相似结果。不知道是不是没有对应数据的时候才会列出相似数据。中间是品类快捷入口，左右的箭头很想点，但却是不能点击的。。窘。拖拽了一下，可以移动了。这里默认看到的3个是数码、直充、男装，右边还有女装和书城，左边还有手机。品类的选择还是很有针对性的，感觉很贴切。屏幕的下面是菜单栏。第一感觉，这图压的也太狠了吧，都感觉品质有点次了。大小固然重要，品质也很重要嘛。正好手机需要充值了，于是就点了直充：厄。。给自己充值应该是一个常用任务吧？可是为什么还要输自己的号码咧，点边上的按钮是打开联系人列表。有2个充值方案供选择，但是不管选哪个，充值店铺都只有一家默认的。。。还好，当你第2次进来充值的时候，会自动提示你第一次输入过的手机号码：输好号码，选好充值金额，继续：到了这里，我窘，很想知道有多少人没有按错过银行的！银行的名字在手机屏幕上只跟笔尖差不多大，还挤在一起，非常的不好按。最窘的来了，标题栏显示样式先不说啊。。。手机银行，我也不清楚我开通了没。。那。。到底能不能支付啊。。。没有说。。。要不要先绑定手机呢？也没有说。。。输入好信息之后，提交，总是不能继续，应该是出错了，但是没有任何提示，用户不知道到底是因为什么不能支付了。下面这个也一样，选择卡通支付之后，还是不能支付成功，同样也没有任何提示。终于还是没有能在这上面充值成功。。窘~~ 而且，退出来一看历史交易才发现，在尝试的过程中，不在意之间却下了3个一样的充值的单。应该是尝试的时候误操作造成的。。对这个也没有任何提示或者保护。。。恩，从结果看，这次体验还是满失败的，感觉产品在细节体验上并没有完全成型，应该也是被DEADLINE逼出来的吧？但是相信淘宝和ALIPAY的同学们应该会很快就能解决这些明显的问题的。从另一个方面说，大型的平台越来越关注自己在移动端的表现，确实也是一件高兴的事情，赞一下：）相关文章iPad用户体验准则[转] (0)手机交互设计原则[阅读笔记] (0)设计iPad应用的几个要点[译] (0)什么是网站的任务分析（task analysis）[转] (0)整体浏览体验的趋势[译] (0)国境以南：淘宝帝国之外的零售电子商务 (0)网页中的地图设计实例[译] (0)扯扯围脖、开心和豆瓣 (0)产品交互设计之奥卡姆剃刀 (0)让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍 (1) 标签(Tags)：Interact & Mockup, 交互设计, 电子商务, 移动网络

什么是网站的任务分析（task analysis）[转]

blueben — Fri, 18 Jun 2010 08:57:44 +0800

什么是任务分析任务分析是角色分析的一个补充。它指的是对你的用户的目标进行分析——了解他们想在你的网站上想做什么，以及他们怎么做。任务分析也包括找出更多为实现目标而所必须完成的明确任务，以及为了完成目标，用户必须经历的步骤。在进行角色和任务操作的同时，我们经常需要对用户环境进行研究（包括物理的，社会的，文化的，以及技术环境。）从任务分析中你所能得到的角色和任务角色主要侧重于理解一下几个方面： 1.用户的目标是什么？他们渴望得到什么？ 2.用户为了达到目标通常做哪些任务. 3.哪些个人的、社会的、文化的因素会影响用户的任务？ 4.用户是如何被他们的物理环境所影响的？ 5.用户以前的知识和经验是如何影响他们对任务的理解以及完成任务的流程的？如何开展任务分析 copyright yixieshi 当我们做一个任务分析的时候，我们通常从几个不同方面去着手。我们通常可以问： yixieshi.com 1.用户在我们网站所要完成的主要任务是什么？就如以下的例子 —-为一位亲戚找一家医院。 —-当你信用卡消费的时候，希望你能收到邮件或短信通知。我们也可以问一些可以帮助我们了解用户会采取或可能会采取何种任务的问题 2.用户通常是如何完成任务的？我们可以从以下几个方面来了解：内容来自yixieshi.com —-在网站下 —-在我们现有的网站上 —-在于我们一样或类似的网站上 3.在我们网站上，什么是帮助用户完成任务的最佳方案？ 4.我们的最佳方案是否与用户的逻辑思维相符合——用户完成任务的思维方式，他们的用语，以及他们的工作方式。从任务分析中所能得到的利益任务分析帮助你了解：互联网的一些事 1.你的网站所必须支持的任务； 2.决定适合你的网站的内容； 3.决定你的网站所应包含的应用领域； 4.优化或者重新设计你的网站的搜获系统或者导航系统，从而更好地帮助用户完成他们的任务——要确保网站对用户来说要是高效的、高满意度的。 5.建立适合用户目标、任务以及操作步骤的页面及应用软件。相关文章淘宝Android平台客户端试用体验[原创] (0)iPad用户体验准则[转] (0)手机交互设计原则[阅读笔记] (0)设计iPad应用的几个要点[译] (0)网页中的地图设计实例[译] (0)扯扯围脖、开心和豆瓣 (0)产品交互设计之奥卡姆剃刀 (0)浅析社会化网络产品设计[转] (0)让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍 (1)如何开始创建iPhone应用[译] (0) 标签(Tags)：Product & Prototype, 交互设计, 设计理论

iPad用户体验准则[转]

blueben — Mon, 10 May 2010 11:59:10 +0800

转自晓生语录，原文请查看这里： http://daichuanqing.com/index.php/archives/1212 ==========================转帖的分割线============================ 本文译自《iPad User Experience Guidelines》，供个人学习之用，水平有限，难免有欠妥之处。 iPad用户体验最主要体现在内容和交互：淡化程序UI，以便用户关注所需的内容。美观的内容形式，富有真实感。充分利用设备的性能来增强内容的交互性。支持所有方位优秀iPad程序的其中一个重要因素是可以在所有方位上运行。竖向的大屏幕可以满足用户浏览内容的需求（当竖屏幕较小时，用户就会将屏幕旋转为横屏幕，这样一行就可以显示较多的文字）。用户不太会注意最小设备结构（minimaldevice frame；使用iPhone时，用户单手握住手机时，屏幕多为竖向显示；而双手使用iPad，屏幕的显示方位并不能确定）或者home按键的位置，他们不认为设备有默认方位。这就导致用户期望程序可以在当前方位上运行。所以程序尽量满足iPad各方位的运行要求。保证以首要内容为重点。当旋转iPad的方位时，如重点显示的内容发生变化，用户会感觉对程序失去控制。旋转时如何显示辅助信息或者功能。尽管能保证上一条，还要考虑如何显示较为次要的信息。例如邮箱功能中，首要内容时发邮件，次要内容是联系人和收件箱的列表。横屏的次要内容显示在左边的分视图中竖屏的次要内容显示在气泡框中。再如，横屏时，一款游戏以长方形显示，当旋转到竖屏时，需要调整屏幕上的显示区域，游戏显示边框的上面或者下面增加显示空间，用于显示辅助信息，而不是垂直拉伸显示区域来撑满整个屏幕。避免布局变化过大或者无缘由地改变。所有方位中都显示相似的UI布局旋转时尽可能保留信息和文本的原有格式。尤其阅读文本时，重要的是避免旋转之后用户找不到读到哪儿了。如果非要对页面重新布局，可以使用动画帮助用户理解当前页面的变化。例如，当旋转时要必须增加或者移除文本框时，可以选择隐藏动作并在新布局中简单地淡出。为了有助于合理地设计旋转动作，可考虑在真实的生活中是如何和它们交互的。避免使用UI元素或者定义一个旋转的手势来完成旋转动作。应该是内容随着iPad的旋转而旋转。为每个显示方位各提供一个启动图片。比如提供1004×768和748×1024的图片来满足两个方位的显示要求。仔细考虑程序是否可以在所有方位上运行。有些程序只能在横屏或者竖屏下显示，此时：显示程序为正常显示方式，无论当前iPad是什么方位。避免使用UI元素来告知用户旋转设备。支持180度旋转。可以特殊处理输入式旋转动作。有些游戏把旋转设备当成操作方式，这时候横竖屏切换时，可不改变游戏的显示方位。增强交互最好的iPad程序在用户执行明确的任务时提供新颖的交互方式。不要为了填满整个大屏幕而增加一些和主要任务没有直接关联的功能，而是提升程序的用户体验。例如读书程序中容许用户阅读时如能保留路径会提升阅读体验，不需要跳转到另外一个页面而是使用气泡框来变更路径。程序可以让用户在文本中增加书签和注释，帮助用户交换书目或者对比阅读进度。信息扁平化 iPad的大屏幕和新UI元素可以显示更多的信息，使用的得当可以避免寻找信息时跳转的次数过多,因此也改变iPhone的单屏显示结构。使用分栏。两级的内容同时显示使得信息扁平化。使用气泡框。顶部的气泡框可以显示控件或者工具，不必切换屏幕即可完成操作。工具栏中显示分段控件。分段控件可以显示并列的信息。使用标签栏。标签栏显示不同种类信息或者是不同的程序模块。减少全屏切换相似的视觉元素，而在某一区域变更内容。普遍的规则是宁愿转换单独的视图或者组件，也不全屏切换，保证视觉稳定性，帮助用户理解自己所处的位置。增强协作和联系用户将iPad视为私人设备，但是它合宜的尺寸可以加强真实的协作和分享。真实感程序显示和现实生活越为相似，用户就越容易理解程序如何操作并喜欢使用。但也不必过于精确，通常夸张的事物看起来更为真实并能传递更多的意义，当做是和用户交流并表述程序本质的一次机会。使用动画进一步地增强程序的真实感。通常，动作的真实感比程序的外观更为重要，不符合物理规律的动作会让用户感觉到迷惑。令人惊叹的图形高分辨率的iPad屏幕所支持丰富、美观和动人的图形对用户富有吸引力，因此可以尝试增加程序中图形的深度和细节。弱化界面控件通过设计程序中的UI来组织信息框架，减少控件的数量和淡化显示效果，创建和程序风格相符的控件，这样既不突出，但又易于发现。最少的模态对话框模态对话框打断用户的工作流，需用在合适的情况下：有必要吸引用户注意力的时候。避免用户因误操作而导致的数据丢失。重新思考列表列表（也就是表视图）在iPhone中常用于显示大量的数据信息，在iPad也是非常有用。但是还可以使用一个更丰富的方式来显示同样的信息。例如：iPhone中的联系方式是一个很有效率的列表。而在iPad中的联系方式看起来是一个美观的通讯录，iPad的列表可以显示更多的信息。多点触摸大屏幕支持自定义的多点触摸，即使是多人同时使用iPad，牢记不用响应不标准的触摸手势，如果有的话，也只用一种方式来执行命令。气泡框气泡框和模态视图有些相似，当气泡框显示时，不能操作主视图。但模态视图是模态的。然而气泡框可以用在两种途径：模态。气泡框出现时，周围的界面淡化，需要一个明确的操作取消。非模态。点击气泡框周围的界面也可以取消气泡框。如果在iPhone中使用了模态视图，可以考虑可以气泡框替代它。以下问题可以帮助你决定气泡框的使用是否合理：是否需要不同类型的输入？如果是，使用气泡框。气泡框更适合显示一个选择器或者列表选项。是否需要用户穿过多级视图。如果是，使用气泡框。气泡框的结果适合显示多级页面，因为对主视图的改变较小。可能在主视图操作才可以完成任务吗？如果是，使用非模态气泡框。因为用户点击主视图即可取消气泡框，容许用户中止操作气泡框并返回主视图。任务需要用户深度投入并且是程序的一个主要功能？如果是，可能需要使用模态视图。模态视图的语境转换帮助用户在任务上集中注意力，较大模态视图便于用户输入大量的字符段。从另一方面而言，这个任务代表程序功能的重要一部分，但要是不需要用户深度投入注意力的话，气泡框是更好的选择，轻量级的视觉对于频繁执行的任务而言更为亲切。是否任务执行只有一次或者很少，就像安装任务。如果是，考虑使用模态视图。用户不会介意为了完成此类任务而停留在当前界面。限制模态任务的复杂度用户乐于在一个模态视图中完成一个子任务，因为语境的转换清晰和短暂的。但是如果子任务太复杂，用户会忽视主任务，当模态视图全屏显示并包含多个子视图时，这种危险会增加。如果模态任务非要包含子视图，确保给予用户一个单独和层次清晰的路径，避免迂回。提供一个明显和安全的方式退出模态任务，用户能预见此操作的后果。淡化文件管理尽管iPad程序容许用户创建和操作文件，这并不意味着用户应该对于文件系统有意识。iPad没有像Mac OS一样的文件搜索，用户也不必想在电脑上一样和文件进行交互。用户不应该考虑文件类型和位置，比如：打开和保存对话框中出现文件层级关系。文件的访问权限信息。一个文件处理程序鼓励用户预览内容。如果iPad程序容许用户创建和编辑文档，最好提供文档种类选择器便于用户打开一个现有文档或者创建新文档。理想情况下的文档选择器为：高度图形化。用户看到文档的视觉形式时能很容易识别出需要的文档。用户使用最少的触摸手势找到需要的内容。例如打开一个文档只需平移水平滚动条和轻击文档。创建新文档的功能。当用户没有找到想要的文档时，选择器提供一个创建文档的功能而不是到其他界面寻找此功能。只有需要的时候才要求用户保存用户应该确信他们的工作是实时地被保存，除非他们明确取消或者删除。如果程序帮助用户创建和编辑文档，保证用户不需要明确地执行保存命令。如果程序的主要功能不是创建内容，但要容许用户切换浏览和编辑模式，这时可以明确要求用户保存修改内容。在这种情况下，信息显示的视图中提供“编辑”按钮，轻击之后，该按钮变为“保存”按钮和“取消”按钮。“编辑”按钮的转换提醒用户当前界面为编辑模式，“删除”按钮让用户不保存修改内容的情况下退出程序。工具栏移至顶部与iPhone程序不同，iPad的工具栏在顶部，iPad宽大屏幕可以显示工具栏中的所有功能。立即启动 iPad程序启动时用户无须等待即可开始操作。当启动时，iPad程序：显示程序在当前方位上的启动图片，减轻用户的等待感，让用户知道程序仍在运行。避免程序启动变慢。启动图片（launch image)中显示品牌信息是容许的，但是铭记用户启动程序时每次都会看到这个内容。如果非要使用启动画面（splash screen），明确显示时候不是过长并且无需任何用户交互。恢复程序上一次运行状况。避免要求用户提供启动信息。取而代之的是：关注80%的用户需求。从系统中获取更多的信息。从系统中调取信息可以避免输入。用户在输入前受益。如果输入不可避免，那也要在用户先让获取有效信息。随时准备停止和iPhone一样，iPad程序在用户按“Home”键之后，因此：尽快和合理地保存数据。退出时保存界面的每一个细节。相关文章淘宝Android平台客户端试用体验[原创] (0)手机交互设计原则[阅读笔记] (0)设计iPad应用的几个要点[译] (0)什么是网站的任务分析（task analysis）[转] (0)整体浏览体验的趋势[译] (0)网页中的地图设计实例[译] (0)扯扯围脖、开心和豆瓣 (0)产品交互设计之奥卡姆剃刀 (0)让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍 (1)如何开始创建iPhone应用[译] (0) 标签(Tags)：Interact & Mockup, iPad, 交互设计, 移动网络

手机交互设计原则[阅读笔记]

blueben — Mon, 10 May 2010 11:50:22 +0800

读了晓生语录的手机交互设计原则，整理了一下移动设备中应用程序的界面设计要点，以备学习参考： 1、考虑屏幕的物理尺寸和显示分辨率 2、视觉重点自上而下 3、控件和内容都应精简 4、当完成一个任务需要多步操作时，可将任务进行拆分成多个子任务，每个界面完成一个子任务。如逻辑清晰并保证用户操作的流畅性，可适当地增加页面跳转次数和点击的次数。 5、避免输入 6、常用操作的一致性 7、考虑使用环境 8、反馈，明确地告知用户程序正在运行比告诉用户任务已经完成更为重要。详细请查看原文： http://daichuanqing.com/index.php/archives/1042 相关文章淘宝Android平台客户端试用体验[原创] (0)iPad用户体验准则[转] (0)设计iPad应用的几个要点[译] (0)什么是网站的任务分析（task analysis）[转] (0)整体浏览体验的趋势[译] (0)网页中的地图设计实例[译] (0)扯扯围脖、开心和豆瓣 (0)产品交互设计之奥卡姆剃刀 (0)让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍 (1)如何开始创建iPhone应用[译] (0) 标签(Tags)：Interact & Mockup, 交互设计, 移动网络

设计iPad应用的几个要点[译]

blueben — Thu, 22 Apr 2010 00:29:28 +0800

ben：这篇文章说的是iPad，一方面可以了解到苹果最新硬件的一些特色功能。另一方面，里面说到的设计要点，不仅是在这个设备上有用，把这些要点放到其他移动设备甚至WEB交互设计上，依然是值得借鉴的。推荐给入门级设计师和产品经理阅读。 ==================寂寞的分割线==================== 原文地址：http://www.smashingmagazine.com/2010/04/16/design-tips-for-your-ipad-app/ 只要有一些JavaScript编程技术加上像Appcelerator’s Titanium这样的工具，自己弄一个iPhone 或者iPad的应用是很简单的。问题在于不要总是一再的犯App Store中产品的设计错误。这篇文章里我们就来聊一聊设计成功的iPad应用要注意哪几点。 Design For People 设计以人为本应用会让iPad更精彩，毫无疑问。但是在开始设想你的应用的时候，最先考虑的是什么？创意？还是设备？真确的答案是：都不是。应该先考虑的是“人”。当你为应用做头脑风暴或者研究的时候，回过头去仔细想一想生活中的人们会在怎样的环境中如何使用这个设备。如何让iPad成为我们生活的一部分？什么时候我们需要它是笔记本电脑，什么时候我们需要它是iPod Touch？ Who Are Your People? 你的用户是谁？理想情况下，你就是自己产品的用户中的一员，但是把这个作为一个理由来决断“我知道这些人要什么”，将会把你引到错误的的道路上，你的产品将永远无法超越自己的想象力。当你仔细考虑各种各样会使用你产品的人的时候，惊喜也许正在等着你。你的目标用户也许和你想的并不一样；或者，在定义目标用户的时候，你会发现你的产品还缺少某种重要的功能。例如我们的一个画画的应用，最初我们的目标用户是那些喜欢尝试的技术人员，但是在一些分析之后我们发现，如果把界面设计的更加简单，那么那些技术人员的孩子们也会迷上这个应用。注意：定义你的目标用户。他们是谁？他们生活在什么样的地方，在哪里工作，在哪里玩？他们面临什么样的问题？给他们中的一个起个名字，设定他的工作、他的家庭、他的车，然后看看你的思路是不是会有什么改变。 What Is Your People’s Story? 你的用户有着什么样的故事？定义好你的用户，还只完成了一半。现在你得把他放在故事情节里面。他们平时的日常生活是怎样的？他们的日常生活中会因为什么对你的产品感兴趣？去想想他们在想什么，我敢保证这会让你看到一些你期待的或者从没考虑到的东西。你并不需要什么思考的软件来做这件事。下面是一个对于我们应用的使用案例草图。当写出一些使用案例后，我们发现人们在进行原创绘画的时候常常容易对画画失去兴趣，因为他们会说“我不会画”，但其实他们还是想自己创造一些好看的东西。起初我们计划把APP和图案一起发布，就像经典的Lite-Brite玩具一样。但是我们没意识到如果我们提供预制的图形和模板而让人们来填颜色的话，人们就会更喜欢玩这个App。多么重要的反馈啊！在实现一个应用的创意的时候，我们的使用案例研究告诉我们这类应用的重玩的概率是很低的，除非你提供模板告诉用户怎么开始。注意：从生活中的使用方式来考虑你的设备，比从功能和技术角度来考虑要好上很多。iPad那独特的性能、操作环境和社会化因素能让你的想法与用户产生共鸣吗？它很轻便=“我更希望把它随处带着而不是当做一个笔记本电脑” 它比笔记本电脑要小一些=“我可以在候车室打开笔记本电脑来做东西吗？显然不行。但是换成iPad呢？可以。” 它有许多强大的实用程序和对多媒体的支持能力=“我可以用它来工作、看书、看电影或者玩游戏” 它的屏幕比 iPhone大=“我可以不用考虑眼睛的压力就享受更多的视频媒体。我的孩子在旅途上也有的玩了。” 它有Wi-Fi和3G网络连接=“我乘坐飞机、火车或乘车的时候都可以上网了。” 以人为本的设计可以让我们抛开那些有欠缺的创意，并且让开发的产品不仅是达到用户的要求，而是在先于目标用户意识到之前就满足他们的需要。 Minimalism Works Best on iPad 越精简越好有了像iPad这样强大的能感知位置的移动设备，就会想把什么都放进去。如果你是一个iPhone的开发者，你一定对扩大了的屏幕面积很惊喜。但是不要总是想着把它们填满了！让它保持简单吧，只显示此时此刻与用户有关的内容和操作项。这需要你在设计时使用下面提到的2个东西。 Contextual Menus 弹出菜单弹出菜单保持简洁的设计非常的棒。我们想把分享和交流的功能放在主导航之外，于是就用了一个弹出菜单（“Share this thang!”）来在适当的时候显示那些控件。一个关于分享的弹出对话框，当你轻击并且按住图片的时候就会弹出来。 Modal Views (but Wisely) 模态视图有了iPad的大屏幕，人们可以设计那些在iPhone 或者 iPod的触摸屏上不可能做到的强大功能。模态视图提供了另一种组织应用的方式，它给了用户几种操作的模态，显得很清晰。而且，如果使用的好的话，它可以很幽雅的帮助UI设计处理掉那些乱糟糟的东西。例如，iPad上的“照片”功能，可以像桌面MAC机上的iPhoto一样的操作。你有2种操作模式：查看和编辑某个单独的照片管理照片组在每个显示照片的分页里把图象、编辑和管理功能挤在一个界面里是不太合适的。考虑一下如何把应用中的功能分成几个类别，同时，保证两个模态之间能平滑的切换。 iPhoto有2个操作模式：查看、编辑单张图片模式和管理模式。注意：你的应用如何能精简到最核心、最实用的东西给人们呢？ iPad’s Two Orientation Are A Big Deal iPad的纵横两个方向的显示是一个大问题可以在横着和竖着两种显示模式中互换，并不仅仅是 iPad的特色，但确实是需要处理的一个大问题。这就是纸上原型设计比PS里要快很多的原因。有时候要考虑这2个显示方式时应用里所有的元素，就像是在为2个不同的设备在做界面。关键是要要保持体验的一致性和连贯性，当切换的时候提供一个无缝的体验。下面是我们在应用中尝试用过的调色盘。在竖着放的视图里看起来很不错，但是横过来的时候…它就太肥了。调色盘在横着的视图里还不错，但是在竖着的视图里它把屏幕都占满了。我们改进了条色盘让它在横着竖着的视图里都能表现出色。简化过了的调色盘能保持在横竖两种视图中表现良好。注意：尽量把你所有屏幕原型的横向、纵向视图都在纸上画出来。 Use Touch And Real-World Metaphors 多使用触摸的方法，并且多联系真实世界里的带有隐喻的操作触摸改变了我们与屏幕上的元素交互时编辑和感知的方式。有了iPad的大屏幕，触摸和手势就更如鱼得水了。快速了解一下iPad的UI元件的特色：一次选择并操作多个元素，可以通过拖动它们到屏幕的某个区域来实现在同一个列表视图中同时查看列表和详细信息（例如邮件）随时随地的编辑元素而不是通过菜单栏的选项。用你的手指在一堆照片上抹动来把它们分散开来看，就像你线下做的一样。注意：想想你线下是如何进行交互操作的。把屏幕上的元素当做实际的物体看待。 Design For Dynamic Content 为动态内容而设计 iPad的轻便和大屏幕给了人们无限的可能去不停的快速创作各种各样的动态内容。因为用户对连接到基于WEB的工具的需求，混合型的应用（例如以WEB应用为原型的应用或者实时载入WEB数据的应用）将会变的很常见。为动态内容而设计意味着处理网络连接的机会与挑战（例如下载速度慢或者断线）。你得想好用户身在东Bum，没有网络连接的时候，你将给他显示啥米内容。注意：为你设计中可能面对的各种情况做好解决方案。 Get Started! 现在就开始做吧！想要开始开发iPad应用，要先下载一个iPad SDK。当开发者们准备着手进行iPad开发的时候，像Appcelerator的Titanium可以用来在JavaScript环境下创建 iPad，iPhone 的 Android的应用。 Further Reading [...]

整体浏览体验的趋势[译]

blueben — Sun, 18 Apr 2010 00:07:09 +0800

感觉原文写的一般般吧，后面有点泛泛的，翻来随便看看吧~~ ====================华丽的分割线========================= 原文地址：http://www.smashingmagazine.com/2010/04/10/holistic-web-browsing-4-trends-of-the-future/ 未来的网络并不在你的桌面上，也不一定是在你的口袋里，未来的网络将无处不在。随着每次技术创新，我们越来越依赖网络，并且开始把身边的一切和那个虚拟世界里的信息联系起来。但是与其对这个美好的未来抱有不切实际的幻想，我们不如冷静的先看看那些大量的产品计划和设计工作对设计师和开发者都有哪些要求。技术的创新和它应用到日常生活之间的时间间隔正在缩小，我们都快赶不上了——看看去年你注册了多少种不同的网络应用你就知道了。这就导致了网络的使用体验变的很零碎。当你用几个不同的浏览器，安装有各种各样的插件，也许你还有各种独立的应用程序来管理你的FEEDS、社会化媒体的帐户和音乐播放列表。虽然我们已经熟悉了在TAB和窗口间切来切去了，我们也应该努力去实现一种整体的浏览体验，用一种简单的方式无缝整合所有我们需要的功能。意识到了这一点，我们再来看4个趋势，设计师们应该了解它们并且把它们融合到工作中去，以便为整体的网络浏览体验做好铺垫。 1、浏览器会像操作系统一样， 2、简化了功能的移动应用， 3、联网了的各种设备， 4、个性化 1. The Browser As Operating System 浏览器会像操作系统一样感谢网络上大量的应用，创造性的工具还有各种可供选择的娱乐项目，我们在浏览器里花的时间比以前更多了。我们在浏览器里花的时间越多，我们使用那些更大型的操作系统里的工具的时间就越少，而事实上浏览器也是运行在这样的系统里的。结果，我们开始期待网络浏览的体验与操作系统的体验一样高度的可靠与成熟。我们大多都满足于于Google的 Gmail、GTalk、日历和文档或者在线图片编辑工具例如Picnik 和Adobe在线版Photoshop这些不同程度上被整合在一起的创新。而那种期待将继续被将来的新品所满足——例如Chrome操作系统——我们已经把浏览器当作了操作系统。在网络上完成所有的事情，曾经是一个梦想，现在已经成为现实。 Ubiquity 在我们大量使用各种applications的同时，浏览器的缺陷也越来越明显，那就是在浏览器tabs之间缺乏有效的关联。很多用户喜欢打开许多浏览器tabs，然后快速的在Gmail, Google Calendar, Google Docs 和各种社会化媒体之间来回切换。但是正是这种来回切换，表明了在本该整合的应用之间那断裂了的联系。 Mozilla试图通过Ubiquity把我们在浏览器里使用的应用直观的展示出来。虽然确实是向正确的方向迈了一步，但是命令行的方式对离不开鼠标的人来说却是一个障碍。在下面的截图中你可以看到Ubiquity如何让你不用在其他tab中打开Google Maps就能在网页里的地图上快速定位。这是一个整合功能的例子，你不再需要在不同的tab中复制粘贴文字了。Ubiquity的核心在于通过理解基本的命令并且用合适和WEB应用去执行这些命令而创造了一个整体的浏览体验，这正是浏览器的发展方向。这个方式，结合语音识别，也许10年后我们不用双手也能上网了，甚至都要不了10年。 Tracemonkey 和 Ogg 同时，一些小的更新也在为整合浏览体验做着铺垫。去年夏天，Firefox发布了一个升级版本，内置了一套全新的JavaScript引擎，叫做TraceMonkey。这个引擎在速度和图片编辑功能上有着显著的提升，而且还可以不借助任何第三方插件就能播放视频。速度方面的提升总是能得到大家的认可，但是除此之外的图片和视频方面的能力却是浏览器进入操作系统领域的有力证明。可以在浏览器中编辑图片，可能你就不需要再使用本机上的图片编辑软件了，也许它还可以替代Picnik这类的独立的applications。但是今天我们仍然不能确定浏览器的这个功能能有多强大，所以设计师和普通用户们可能还得用他们自己本地电脑上的PS软件。新的视频功能依赖于一个叫做Ogg的开源技术，它的出现带来了很多新的可能，首先就是那些不想注册编码器的开发者。目前，开发者们需要注册一个编码器来让他们的视频在专用的软件中播放，例如Adobe Flash。Ogg可以让视频在浏览器里播放。但是更令人兴奋的是，在Firefox的这个新版本里面，允许在同一个页面上的多个应用中进行互动。这个技术带来的一种可能的应用就如上图那样，允许用户在看视频的同时点击其中的某个东西来获得关于它的详细信息。 2. Functionally-Limited Mobile Applications 简化了功能的移动应用到目前为止，我们都还在传统浏览器的角度在看整合网络体验的问题，但是我们已经越来越多的通过移动设备在与网络进行交互了。现在，在移动设备上的浏览体验还不是十分理想，因此它还不是对用户的主要吸引点。小屏幕、不一致的输入、缓慢的连接速度和缺少符合移动浏览器的优质内容，这一切合在一起使得这种浏览体验显得笨拙又难以掌握，还容易让人沮丧——特别是，当你用的不是IPHONE的时候。然而，特别为移动平台写的applications可以处理特定的、有限的数据——例如Google的移动 apps，为特定设备定制的Twitter、Facebook 应用，还有iPhone App Store里的那些成千上万的应用——看起来才更像未来移动互联网的应用。因为移动浏览体验还在最初的发展期，这里有一些设计方面的建议：与其把全尺寸的网站压缩之后塞到口袋里，设计师们更应该用简化过的核心功能放在移动applications里。 Amazon Mobile Amazon在iPhone上的界面（如上图）是一个简化版移动应用的很棒的例子。Amazon 去掉了它网页上的大量内容而只留下最必要的功能：搜索、购物车和商品列表。而且它为IPHONE的小屏幕优化了布局设计。 iPhone 上的Facebook Facebook一直在持续改进他的移动版本。最新版的内置了一个很简单的初始界面，把网页上每个主要功能用一个图标表示，然后按使用的重要程度排列出来。在减少了很多信息并分块显示之后，网站的内容和功能并没有受到影响。而且每一次的更新都让这个应用的使用体验越来越自然。 iPhone上的Gmail 最后，Gmail的iPhone application也让人印象深刻。Google引入了一种浮动条来批量操作邮件，这样人们就不用打开每封邮件再来处理它们。 3. Web-Enhanced Devices 各种联网了的设备移动设备的快速增长将超过计算机产业之前的任一类产品，因此接入网络的用户数量也会激增。但是网络的飞速增长并不仅仅是依靠个人移动设备，而是通过车辆、房屋、服装和其他产品中的全新的网络接口来实现的。一方面，联网功能可以增加产品特色，支持产品的营销和广告活动；另一方面，把日常用品连接上网络会使它们更实用、更高效。这里就有3个例子，可能用不了几年就会出现了： Web-Enhanced Grocery Shopping 联网的超市购物可以联网的超市“VIP”会员卡可以用来记录用户的开销，每次你使用会员卡的时候，你的购置清单会被记录到一个大型数据库中去。作为收集的数据的交换，超市对于你选择的商品提供一些折扣。基于这种联网了的购买行为，超市很快就可以为你提供符合你购买习惯的定制宣传促销内容，甚至是实时的（例如上图）。这对于消费者申请成为会员是一种很大的鼓励，同时也让超市的促销、销售和宣传可以更加的灵活多样。 Web-Enhanced Utilities 联网的公用设施例如上图的室内温度调节器是一种我们很快就能在家里看到的联网设备，它不仅可以让人们使用Google PowerMeter来查看他们的电力使用情况，还可以看到目前与自己相关的记费情况（例如他们打开热水器的时候，不在电脑前面）。 Web-Enhanced Personal Banking 联网的个人银行另一种有用的改进是在你的银行卡或者信用卡上显示你目前的帐户余额情况（如上图），当然，这个信息会被保护起来，当你通过指纹解开了安全锁之后才会显示。不可否认这个主意存在一些隐私和安全方面的隐患，这些问题在未来一段时间内仍然可能存在。 4. Personalization 个性化得益于social networking websites的应用，人们的个性化在线体验变得更加自由、愉快。使用访问者的姓名来打招呼、在浏览记录的基础上提供内容展现和搜索结果，现在这些都是很普遍的功能，而且使得网络变得更有吸引力。下一步应该就是让用户更大程度上能设置他们的个人信息，并且提供更多的工具来传递最新的定制信息给他们。 Centralized Profiles 集中的个人帐号和大多数人一样，你也许也在不同的地方有2到6个SNS网站的帐号。每个帐号都包括了你的信息设置，而且大多数是重复的。可能你在每个网站上的用户名和密码都是一样的，但是通常仍然得在不同的系统注册多次。那为什么不能从一个入口来提交你的帐号信息呢？在将来，你在网络上对别人介绍自己的内容将更多的由自己来控制。但是首先要把你的个人信息集中到一个帐号里，然后共享给其他的。这样，如果你的个人帐号有了改动，你只需要修改一次就可以了。 Data Ownership 数据的所有权关于谁拥有你分享到网上的数据的问题很难说清楚。在一些情况下，它仍然是无人认领的。然而，在social networks上的隐私设置越来越复杂，用户也开始更加关心数据的所有权问题。特别是对于谁拥有那些图片、视频和用户写的消息的问题，在用户想改动帐号的时候就变的更加突出。从大的方面来看，Royal Pingdom在他的Internet 2009 in Numbers报告中指出，2009年平均每个月有25亿张照片被上传到Facebook！这个数字增长的越大，用户就越关心当他们从机器里上传大量的内容到网络的时候，这些内容最终会如何。把用户用户的信息储存在本地机器上，这样他们就可以把数据分享到不同的社会化网络和其他网站里去，这虽然看起来有点退步的意思，但是这个功能很可能很快就涌现出来，以应对不断增加的对隐私的担忧。在这样的系统中，会单独为用户本地机器中的视频或者图片这样的文件创建标签信息，标签会向社会化网沾说明该文件的访问权限。所以不用把文件上传到网上而只是给网站对这些文件的访问权限就可以了。像Data Portability [...]

国境以南：淘宝帝国之外的零售电子商务

blueben — Sat, 10 Apr 2010 00:50:27 +0800

今天在蓝色理想看这个这个新闻：零售大鳄触网沃尔玛推电子商务挑战淘宝。被标题吸引进去，读了之后再想一想，恐怕并不是如文章所说的那么回事。先不论这消息是真是假吧，就这件事侃侃淘宝和电子商务的可能趋势。帝国：电子商务产业链这些年来，淘宝+支付宝一直是阿里C2C的核心，之后又不断并入了阿里妈妈、阿里软件、口碑网、淘江湖、PHPwind等一批生力军，旨在打造完整的电子商务产业链，把能量辐射到电子商务产业的各个领域。目前看起来，除了物流领域（水太深？）之外，基本布局完毕，加上刚推出的1688.com，已经覆盖了批发、开店经营、支付、推广/营销、社区/交流等各个环节，称为电子商务领域的帝国也不过分。但是电子商务市场之大，远非一家所能吃的完。虽然百度有啊（起个这名字…怎么出来混啊…）和腾讯的拍拍暂时不能撼动淘宝的地位，但是在一些细分市场例如图书，淘宝并不占优。这跟线下的情况一样，即使有再多的商家大鳄，一些小区门口的小店铺也一定还是有生存空间的。而线上的这些“小店铺”由于没有了各种限制（地域），一旦形成特色，一定会对淘宝相关品类构成威胁。品类卖家销售的下降不会直接影响到淘宝，但是卖家们的不满一定会影响到帝国的将来。面对遍地开花的各种电子商务网站，淘宝大概也已经感觉到了压力——去年淘宝推出了“大淘宝”战略。什么是“大淘宝”战略呢？最核心就2个字，开放。一个人占了一座金矿，发现其他人也想来拣一点，他可拦不住那么多人，这一点一点的虽然少，但是这么下去可不行啊，自己又不可能一下子把山搬走，怎么办呢？于是他想了个办法，他对那些人说：“来，我给你门铁锹，比你们拣的快多了，但是你们挖出来的要分给我一点。”大家都觉得挺好啊，比我用手拣快多了啊，于是就领铁锹去了。淘宝呢，除了它自己原来挖出来的之外，又额外多了不少金子，最差的情况也是原来放左边口袋里的金子现在放右边口袋里了。也许例子并不恰当，但是开放API对众多想涉足电子商务的中小型商家和无数想红了眼要跳到海里来的网站主来说是非常有吸引力的。中小型商家与个人卖家不同，他们有一定的实力和基础保障，而且更注重自己的品牌。这种由淘宝提供“电子商务基础设施”和大量买家的方法，对它们来说是非常合适的。而各类中小网站、地方网站凭借自己在地方的影响力，也都想分电子商务一杯羹，但是苦于在商品或买家上没数据、没规模。大淘宝开放平台正好解决这个问题。由此，应该说淘宝这步还是非常精明的，说极端一点，将来也许它都不需要自己呼哧呼哧的去做品类运营了，只需要管理进出的数据，维护好买家社区群体，就可以躺着收钱了。国境以南：可能的机遇但是，即使这样，也并不代表其他人就没有机会了。一方面，继续在细分市场做细做深，做出特色，已经有一些后起之秀的例子。另外，SNS对网络的影响一定会在电子商务上体现出来（只是现在国内的SNS还停留在玩的阶段），而淘江湖在这块的表现明显偏弱。这些都是其他人的机会。还有一点，就要说到沃尔玛了。我不认为沃尔玛会进来就全面铺开跟淘宝对打，何必呢？在别人地盘上，路还没摸熟呢，何况还是对这样一个对手。那是自己找难看。即使砸再多的钱，一段时间内也很难有效果。在这个时候进来，一定要找到自己之长，别人之短，狠狠的切进去。淘宝在品类的细分市场上已经忙的不可开交，在Local方面虽然收编了口碑网，但是两者之前都没有这方面的准备，一时还难以让淘宝的主要业务在Local上发挥威力。而物流和配送虽然一直在完善中，但是一直难以跟上电子商务发展的需求。或者说难以跟上淘宝、淘宝买家对他们的要求。《天国王朝》里面，最后奥兰多·布鲁姆指着城墙缺口对大家说：“We can break this army here!” 沃尔玛有自己完善的供应链、并且在较大的城市都有多个店面布局，每个店都有自己影响的一片区域，相比杂牌的卖家他有品牌、售后的优势，有采购价格的优势。这是他的长处。这里我想到了一个词：local e-commerce。我想大家都有这样的经历：平时工作很忙，一周去1、2次超市，甚至加班忙起来都没有时间去超市采购。而每次去，都要大包大包的买一堆东西，然后呼哧呼哧搬回家。 SO？如果沃尔玛的电子商务是基于门店所影响的社区的，他们几乎不需要改变自己原来的体系，只是增加一套订购-配送系统，就能解决问题。这种基于门店的配送模式，成本相对低，而且可以自己控制服务质量，订购的买家甚至可以选择送货时间。而使用这套系统的买家也可以和去店里的买家一样享受优惠等各种服务。在这个层面上，淘宝还不具有任何竞争力，他们离这里还很远，而沃尔玛，相对容易就可以达到了。其实相比人们在服装等消费品上的花费，食物等日常用品的开销绝对是不小的数额，占领这块Local的阵地，绝对是有价值的。而从人们的接受角度来说，相比于各种琳琅满目的陌生新商品，那些再熟悉不过的日常用品更加值得信赖，也更加标准化，几乎是所见即所得，引起的售后问题也会更少。至少我现在很盼望这种local e-commerce，因为常常加班忙起来，一周晚上都9点之后下班，大超市都关门了，让我很郁闷。懒人们大约都很盼望吧，哈哈：）不过说回到那篇文章，虽然有上面的可能性，“沃尔玛”们利用自己的优势在帝国之外打开一片天地，但是要想在淘宝的主阵地上有所突破，恐怕还不是短期的事情。所以，“沃尔玛推电子商务挑战淘宝”看起来更像一个噱头。各家都有自己相对独立的优势领域，山头还没有开发完，还没有到要硬磕的时候。期待精彩。 P.S： 1.《国境以南，太阳以西》是村上春树的一本小说，描述了一段不圆满的爱情。开始一直不明白标题是什么意思，看了之后好几年，忽然想起来，那不就是到不了的地方吗——国境以南也许还能到达，可是太阳以西是无论如何也到不了的，因为太阳每天从东方到西方，所以太阳以西就是一直追寻却无法到达的地方。想标题的时候，想到了这是一些淘宝暂时无法到达的地方嘛，所以“国境以南”就蹦出来了。：） 2.题图呢，主要是想到了望远镜，呵呵，大家都知道望远镜的故事了吧，哈哈哈。拿起望远镜看看国境以南。 www.blueben.cn 原创，转帖请注明出处。相关文章淘宝Android平台客户端试用体验[原创] (0)整体浏览体验的趋势[译] (0)扯扯围脖、开心和豆瓣 (0)Breadcrumb(面包屑)设计与最佳实践 (1)浅析社会化网络产品设计[转] (0)让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍 (1)游戏界面设计[转] (1)英雄连ONLINE交易BUG聊产品设计[原创] (2)马化腾：取悦高端用户获取口碑[转] (1)广告投放如何将钱用在“刀刃”上[转] (0) 标签(Tags)：Product & Prototype, Related, 电子商务, 网络产品设计

网页中的地图设计实例[译]

blueben — Thu, 08 Apr 2010 23:38:24 +0800

随着移动通讯技术和移动设备的更新换代，移动互联网越来越深入生活，除了随时在线、不间断的跟好友保持联系，各种基于Local的应用也有机会突破以前依赖电脑网络的种种限制和不便，在移动互联网上大显身手。说到基于Local的应用，大概最直观的印象可能就是地图了。用什么样的形式，满足什么样的功能，在各种类型的移动设备上对各种操作方式提供最简单快捷的体验并呈现满意的结果，大约是不少设计师们在不远的未来将要接触到的问题了。今天在Smashing_Magazine上面看到一篇说网页中的地图设计的文章，于是拿过来分享一下。虽然说的不是针对移动设备的，但其中的一些要点和思路也不妨拿过来举一反三。 ==========开场白之后的华丽分隔线============ 地理定位在2009年是个热门话题。通过很多支持GPS的智能手机上的应用程序，普通人可以接触到越来越多的地图。但是设计师和开发人员如何利用日益增长的有Local意识的用户群呢？这篇文章对现在的常用惯例、趋势和一些地图交互中可能使用的功能进行了探讨。在线地图的基本原则当大多数人想到网络上的地图的时候，最先想到的可能是Google, MapQuest and TomTom。这些是行业中的巨人，但是它们却没有什么创意。这些公司把地图当作是一项服务提供给大众。对于这篇文章里你将看到的地图应用，Google没有什么市场。有创意的地图应用领域还是一片蓝海。这并不是一堂制图的课程，但是得知道地图在新的设计中如何为目标服务。对于大多数的任务，可以归纳为3个主要的方面：导航和确定方位从地理上反映关系和趋势标示热点 Interactive Maps 交互式地图在过去10年中技术的发展为网络上的信息展现提供了无数可能的方式。而交互与展现方面提升最快的工具就是地图。网络上,交互式的地图在操作方面有着最高的信息展现效率。当用户改变视图的时候，交互式地图可以很容易的体现出信息之间的关联。这些是传统的地图所没有的优势。如果一张印刷的地图有点不清楚，人们几乎就没有办法去理解它了。但是网络上的交互式地图可以通过很简单的滚动条操作来展现信息和内容之间的联系。平移屏幕和缩放屏幕是交互式地图最基本的操作。这样的操作让用户可以把他们的浏览器聚焦在他们觉得最合适的信息量上。不需要图例在传统的印刷地图上，人们需要通过图例去理解那些地图上使用的符号。很多在线地图通过使用弹出窗口改变了这种方式。用户直接点击某个点来得到更多的信息，而不用参考地图边上的那些图例说明。这通过更少的点击和更少的视觉焦点的移动就达到了目的。想看看这种方式对用户来说有多直观，可以去试试“America’s_Best_Adventures”下面这个地图：点击某个点会打开一个弹出窗口但是某些特定的情况下还是会用到图例，例如热区（点）图，通过色差来表现强弱程度，用户会需要一个参考栏来理解那些信息是什么意思。弹出窗口并不会让图例消失，只是让热点的展示更加简单。 Common Types Of Map Navigation 将地图用来导航的常见模式除了平移和滚动屏幕，还有很多有趣的方式来显示数字化的地图。下面是一些新的交互式地图中最常见的。记住，其中的大多数是可以混用或者组合使用的；并不会用了一个其他的就不能用了。 Drill-Down （不知道怎么翻，聚焦模式？看了下面的图就容易理解了）当用户需要进入不同层次的特定信息的时候，通常会使用“drill-down模式”来导航。“drill-down模式”把大图上广泛散布的信息清晰的组织在一起并显示在一块单独的区域里。 Google Analytics 在它的地图上提供了一种drill-down显示方式。当点击某个国家的时候，地图自己弱化了其他的国家，点击不同的州和城市时也是一样。这让用户可以决定显示多少信息而不会被大量信息弄晕掉。 Timeline 时间轴模式通过时间轴滚动条可以在地图上展现时间的进程。时间轴滚动条并不一定要表现出时间本身，它最主要的目的是表现出时间轴的刻度与地图上内容的关系。 Zoom 缩放模式这与“drill-down模式”不同的地方在于，在任何一个放大倍率，地图（上的信息）都不会被重新构建或重新组织过。通过缩放，地图上的信息会靠的更近，而不是为一块小地方重新组织显示的信息。地图上有些信息可能会不可见，除非到了某个特定的放大倍率。这保证了当前倍率下地图不会被一堆没什么关联的细枝末节弄的乱78糟的。例如街道的名称，当放大倍率低的时候，它们将在地图上隐藏。 Before and After 前后对照类似于“时间轴模式”，“前后对照”模式也可以显示地图上同一个位置的多种状态。不同的是“前后对照”模式只显示两种状态。这种模式后面会更频繁的出现，特别是和卫星影象相结合。最近海地的灾难发生之后，纽约时报使用卫星拍摄的合成图片制作了一个交互式地图，反映了这场毁灭性的灾难。结果很显著：before-and-after illustration of the earthquake’s destruction of Port-au-Prince. （Port-au-Prince遭到地震毁坏的前后对比图） Point of Interest 热点模式在设计“热点模式”地图时，除了目标区域之外的所有东西都弱化到背景里面去。这样可以让用户立即把注意力放到和热点上去。附加的信息可以通过相关的标志标注出来，这样很容易就能看出不同的热点之间的关联。 Odopod在它的联系人页面上把这个主意更向前推进了一步，它把办公地点的照片放在了地图上。现在很容易就可以找到那所房子了。 Maps As Informational Tool 将地图用作传达信息的工具网络和电子化的信息将会给印刷地图带来很有趣的发展。结合调查和反馈来使用，地图可以实时的表现信息。用这种方式，同时比较2个指标只需要选择好期望范围就好了。国家地理网站上的地图展示了交互式的地图如何用来显示世界范围内趋势的变化数据。首先会有一个世界地图，侧边有一个菜单，用户可以通过菜单来控制地图上显示的数据，例如人口、肉类消耗和森林砍伐情况。注：这个图建议去原网站看一下，效果很赞。要是能把不同的数据叠加对比，是不是会在更方便对比分析？例如，想知道人口教育程度和森林砍伐情况之间有什么关系，把数据放在图上，叠加一下就能比较直观的有个印象了。 From the Political World 在政治领域地理位置是时事发生的背景舞台。所以，通过网络上创新的地图进行可视化的新闻的组织就不显得奇怪了。也许使用这类地图最多的时候要数2008美国总统大选了。交互式的地图每天刷新显示最新的选举情况。任何一张选票的投出，这个地图都会跟进刷新。因为地图上的信息需要和持续更新的数据绑定在一起，所以静态的地图很可能要不了多久就没用了。当选举正火热的时候CNN发布了一个工具，用户可以进行投票然后预测哪位候选人将会获胜。这个地图已经不仅是显示信息了，而是成为了一个产生信息的工具。当选举结束的时候，全国的投票格局也被用地图展示出来。其中最有意思的是华盛顿邮报按县分割的版本，该图用FLASH技术展示了360度全视角的选举趋势，整个战役的结果都被归纳总结到一张图里，非常高效的显示出来。这就是地图越来越接近（甚至直接成为）信息图表的地方，只是展现方式和设计不一样。在华盛顿邮报的地图里面，信息被直接和一块特定区域绑定在一起，然后这个数据就只和它被绑定的区域相关联了。一个30岁的女性在加洲投了一票和一个30岁的女性在纽约投的票可是不一样的。 Unconventional Maps 非常规的地图虽然这篇文章里大大多数地图都是基于物理上的位置的，但是不要只是这样认为。地理地图并不是地图唯一的种类。地图可以用来研究很多抽象的信息，不象静态的信息图表。好的图象展现就例如“和谐之路”，在逻辑和灵感上都很有创意。 “和谐之路”打破了基于位置的地图模式。 The Future of Location 地理定位的将来大多数我们看到的地图都是基于实际的地点或者是建筑。将来交互式的地图必须要试着适应基于人的定位，而且，人与墙和马路是不一样的，人是会动的。像 Foursquare and Gowalla 这样的服务证实，地图和定位已经是智能手机用户日常生活的一部分了。Twitter也立即扩展了它的API来支持地理定位的数据。在任何时间里，你的位置就有了不寻常的含义，它会被传送到网络上收集这些数据的网站上，然后转化成地图来表现那些动态和趋势。 Mapping Action from Location 把动态反映到地图上想想今年的SXSWi会议有多少人checked in，会议能被反映到地图上全靠那些那些与会者的基于地理定位的标记。这与个别人偶尔上传他们的位置不同，这是一次“把整个活动的参与个体通过他们的行动标注在地图上”的示范表演。不少与会者checked in了每一个活动，这些数据可以用来了解很多事情，从饮食习惯到兴趣小组。 People-Centric Maps 以人为中心的地图认为GPS只能标记建筑的想法很快就会成为过去了。也许我们很快就会看到某些设计师们的网站上联系信息页面上有一部分是“现在在这里可以找到我”，而且完全是基于GPS坐标的。NFL选手Chad Ochocinco 已经把这种交互带到了一个更高的级别。没有什么能阻止越来越多的普通人也加入尝试（尽管有隐私问题在）。 A Showcase [...]

扯扯围脖、开心和豆瓣

blueben — Thu, 08 Apr 2010 02:26:43 +0800

今天在翻译Smashing Magazine上的地图的文章，还没翻完，迟点才能发上来了，先随便扯点别的吧。 SOHU的围脖发布了，进去体验了一下，交互上遇到一个问题：在绑定博客的时候，输入博客地址，结果无法检测到，再输个RSS地址，还是无法检测到，换个RSS地址，还是不行。我就汗了，被打击了。但是想想应该不至于啊，几个地址应该都好的啊~~ 然后忽然想到——是不是要加“HTTP：//” 然后就被雷了，竟然是真的，加了之后就好了。我也玩RSS和博客好多年了，遇到这个情况都被蒙到，要是换个不是很了解的用户，这个功能对他来说只能增加他的挫败感。 SOHU还是赶紧改改吧，不然博客绑定量一定会有影响的。然后就回去新浪的围脖看了看。。。新浪。。还没有到这一步就开始汗了，导航和工具栏分了好几个区域，可是怎么也不明白之间是什么逻辑，而且从字面怎么也猜不出“绑定博客”这个功能到底有没有、在哪一个菜单里面。只好一个一个试。感谢上天，终于给我试到了。另外还要再次感谢新浪做绑定这块的同学，他们在输入框前面加了一个HTTP：// ，让我一看就明白应该输入啥米东西。其他还没深入研究。再说昨天的。昨天给文章找配图，在GOOGLE搜索“剃须刀广告”图片，没翻几页就翻不出来了。。反正搬HK去之后就一直奇怪毛病不断，据说有被屏蔽之嫌。顿时又把GFW鄙视了一百遍。到人人和开心去发牢骚，开心不知道为什么，把GOOGLE设置成了敏感词还是什么的，发了就删，晕死了。而且开心昨天还是前天晚上貌似有一段时间发生了当机。。。虽然09年上半年之前开心都一直风头很盛，即使校内出kaixin.com这种招都没辙，但是从09年下半年开始，人人陆续做的SNS产品优化，引入一些商业和名人的因素，还有推出的一系列高品质的SNS游戏，感觉开始慢慢的上路子了。再看开心呢？频道改版在做，但是改的结果并没有什么实质的变化，有的反而不知所云。例如电影，竟然把原来4：3的电影封面图改成正方形的，可是谁都知道电影海报封面是长方形的啊！反正从那之后我好象就没怎么更新过电影了。再说游戏。大年三十前1天发布的那餐厅游戏。。。当天上去就一堆BUG。。后来再看看也要比人人抄袭PLAYFISH的那个餐厅可玩性差不少。其他呢，什么亮点也没有，而且，至少人人有个开放平台的牌坊，开心连个牌坊都没有。说到开放平台，今天测试了好多个版本的小工具，是用来在BLOG里面把内容分享到各个平台上去的小控件，惟独只有开心的总是发不成功。不知道是巧合还是什么。。。如果是屏蔽了，我只能说你丫还搞什么SNS。总之是看空开心了。加上觉得他们随意强制删帖的做法太孙子，所以今天干脆留个条搬家了。以后用BLOG配合豆瓣、围脖玩。最后再说2句豆瓣吧。。。真是让我欢喜让我忧。。内容和社区都非常好，但是功能、交互、信息架构等等形成的产品本身的使用体验，实在是有够糟糕的。总是要在各个菜单区域里面找来找去也找不到想要用的功能，填好的东西不知道如何改，想要做的操作不知道哪里去做，之前做过的操作不知道哪里取消，操作的提示和反馈也不全，一边用以便猜而且就那么点简陋的功能，都盘成这样子叮定当当的。不知道说什么好了看在社区和内容的份上，我忍先就写这些吧~~今天的题图风格不一样了吧~~还有人记得吗~~~呼哧呼哧~~ 相关文章让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍 (1)游戏界面设计中的交互研究[转] (0)界面设计测试规范[转] (0)大头贴改版设计总结[转] (0)让一部分用户先体验起来[转] (0)[转]安静的结构：控制页面的视觉“分贝” (0)地铁站自动购票终端角色设计 (0)如何保持角色的活跃度[受重视程度，转帖] (0)功能结构和页面结构的设计 (0)什么扰乱了信息结构？[转帖] (0) 标签(Tags)：Others, 交互设计, 网络产品设计, 随想

产品交互设计之奥卡姆剃刀

blueben — Tue, 06 Apr 2010 23:50:12 +0800

如果你也是“挨踢”（IT）工作者，是否遇到过这样的情况呢： ·PD召集会议，兴奋的拿出一个功能方案来，虽然看不明白对站点的意义和帮助，但是因为“XX也是这么做的”“别人有的我们也要有”之类的，一阵忙和之后，做出一个看着还行，却怎么都很难给现有业务带来帮助的东西出来； ·某个设计方案经过市场、UED、PD、运营等各个相关部门和各级老板评过之后，被改的面目全非，为了满足各方需求，逻辑设计的异常复杂，交互流程一道又一道，控件一堆又一堆，最后终于大家都再提不出什么问题，才如愿上线，可是用起来却总是有几分奇怪；这时候，我们可以试着用“奥卡姆剃刀”定律的思路来看一看定义：自然界选择最短的路。——亚里斯多德如果某一原因既真有足以结实自然事物的特性，则我们不应当接受比这更多的原因。——艾萨克·牛顿万事万物应该最简单（Make everything as simple as possible, but not simpler ）。——阿尔伯特·爱因斯坦奥卡姆剃刀定律归结到底，就是“如无必要，勿增实体”。也就是“切勿浪费较多东西去做用较少的东西同样可以做好的事情”。之前在网上逛的时候看到，后来结合工作上的感受想一想，在解决设计问题的时候，有些地方正是用了这样的思路，还是有一些收获的。在网络产品设计上，有产品和交互两个层面。从产品的角度来说，主要是解决“做什么”的问题。在各个不同的阶段，创新、实现、优化的思路可能有很多种，但是哪一种对现阶段的目标最有效？与之相关的是哪些最核心的功能点？从交互的角度来说，解决的是“怎么做”的问题。面对来自用户和各个部门的纷杂的需求，如果只是做大而全的设计，那多数只能是杯具了。如何从一堆人的扯淡中挣扎出来呢？首先，无论是产品还是交互，无论谁跟你说的天花乱缀，一定要把2个字清清楚楚先放在脑子里：产品设计：需求，还是需求。在开始工作之前，要先问自己有没有想清楚“需求是什么？” 而在看需求是什么之前，我们先看看什么是需求。某某老板跟你说的，并不一定是需求，他说的是他理解的需求加上了他的个人意志；某某PD跟你说的也不一定是需求，他也许只是从哪位老板那里听的一知半解然后依葫芦画个南瓜给你；某某市场/销售从客户那里听来的也不一定就是需求，我们可以把这个看做一个个例，它也许是需求打过折的一小部分，也许是用户的个别习惯，甚至只是个抱怨牢骚。如果把这种个例当作需求，也许用不了多久，产品就俗不可耐了，因为“你若问人们，谁也不会说想要汽车，他们只想要一辆更快的马车”。当拿到某个“需求”的时候，要去考虑这个“需求”的目的是什么，是为了解决什么问题，是否能有效解决，需要多少实现成本，对用户有什么影响，对将来的产品计划会有什么影响，有没有其他更好的办法。很多时候用户要解决的其实就是1、2个核心问题，但是如果缺少对需求的分析和思考，要么是没有满足真正要的东西，要么是给出一个大而全的方案，而造成成本很高体验上又很难用。所以，面对纷杂的思路的时候，找到那1、2个核心问题先解决掉，而不用去试图同时满足各个方面。例如要促进用户之间的互动，那么方法有很多种，全都有当然好，但是在资源有限的情况下，不如先找到成本最低、效果最好、与其他功能结合最紧密、同时最有利于下一步产品计划的来做。首先要避免缺乏分析就列一个LIST挨着做的情况，它很可能会使你不能满足核心需求；同时要避免贪大而全，结果资源有限，搞的一个也没做好，还留下一堆问题，为以后的工作埋下了地雷。交互设计：如无必要，勿增实体现在越来越感觉到，交互设计中用户这个角色的重要性，交互设计应该是面向用户的设计——以用户为中心，从用户开始着手。首先依然和上面说的一样，从核心需求出发，理清楚要“做什么”，然后再根据这个“做什么”，有针对性的设计“怎么做”。最近看到一本书的标题就很有意思“正确的设计，设计的正确”，说的就是这个意思。根据用户的核心需求，把用户模型放到他们使用产品的情境中，去看看他们要的是什么。就像把人放在沙漠里，他的核心需求就是水一样。用户在不同情境中，针对不同的任务，会有不同的偏好、决策方式以及心智模型，这些才是做交互设计的最根本参考和理由。首先根据情境区分用户最主要的任务流和其他可能的任务流，去掉那些干扰的成分，如果一定要留下（也许出于商业需要），那就小心的规划它们；然后在特定情境中对用户的主要任务流进行设计：仔细的挑选交互控件、使用尽可能少的元素，满足最基本的需求，如果能用1个元素表达清楚的，就不要用2个，保证界面上不要有引起额外思考和误会的多余元素；最后，再对照需求，看看是否都在尽可能简单的界面、尽可能快捷的操作中实现了。尽可能保证： 1、减轻辨识的视觉压力（数量少了，同时增加了每个元素被注意到的可能性） 2、避免额外的思考与疑惑（Dont make me think） 3、减少控件的同时也简化了操作（有时候减少控件/元素的数量不一定能减轻理解和操作的压力，就需要仔细拿捏一下了）这就是前段时间的一些工作体会了。www.blueben.cn原创相关文章淘宝Android平台客户端试用体验[原创] (0)什么是网站的任务分析（task analysis）[转] (0)iPad用户体验准则[转] (0)手机交互设计原则[阅读笔记] (0)设计iPad应用的几个要点[译] (0)网页中的地图设计实例[译] (0)扯扯围脖、开心和豆瓣 (0)让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍 (1)游戏界面设计中的交互研究[转] (0)界面设计测试规范[转] (0) 标签(Tags)：Interact & Mockup, Product & Prototype, 交互设计