iPad应用的十大用户体验设计准则 咱先祝各位情人节快乐吧，宅基腐都没太大所谓，2012了，图个乐呵。话说今次上新与之前一篇的间隔稍微长了些，不过也确实尽力而为了；天天梦里都在翻译东西，满脑子的iOS、交互设计、用户体验...希望事情都能快快的顺利搞定。 闲话不多说了，今天的这篇译文同样是移动方面的话题。有人说了你这不叫“为网而生”么，哪来这么多移动的东西呢？这事儿也不奇怪，首先这是我个人目前最关注的方向，也是除了工作时间以外花费精力最多的地方；其次，正像我们在“从网站到移动客户端应用 - 随机应变的用户体验设计 ”一文中提到的，我相信很多同行朋友们无论一直以来主攻哪个方向，也许现在都已经开始琢磨着探索移动应用的相关领域了；其实这是个生态问题。OK我们果断进入正文。 与众多优秀的产品相同，iPad应用的成功也取决于产品核心价值以及用户体验模式等诸多方面的因素。 在本文中，我们将共同了解一些你在设计工作中需要认真考虑与贯彻的指导准则。 1.瞄准核心需求，简化产品功能 优秀的iPad应用通常可以让用户以最简单的操作方式完成一个或多个非常明确的任务目标。 来看些实例。 Whole Foods也是一款烹饪辅助类型的应用，如果用户希望对某些菜谱进行尝试，它可以帮助用户将那些所需的食材配料生成为购物清单。 另外，不要到处使用按钮一类的视觉交互元素；在很多情况下，操作控制行为完全可以通过手势来完成。 2.打造更加智能化与个性化的产品体验 没人喜欢花钱买回一款应用还必须首先进行复杂的设置才能正常使用。 Zite是一款令人叫绝的内容阅读类应用，它会读取用户在Google Reader、Twitter和Delicious账户中的内容信息， 分析用户的个人喜好，并在此基础上向用户推荐其他内容源当中的相关文章 。 下图是Zite自动生成的杂志界面： 3.注意应用产品的上下文环境 根据你的产品所面向的核心需求，考虑用户会在哪些典型的情景环境中进行使用。 OpenTable主要提供订餐方面的服务。 Awesome Note也是个不错的例子。 GroceryIQ是一款购物清单类型的应用，它的一个重要特色是允许用户按照不同商店来归纳与筛选自己需要购买的商品，非常符合人们在实际购物需求中的心智模型。 4.考虑多用户与多设备的情况 家庭成员之间通常会使用同一部iPad来完成各自的需求目标；另外，全家人围坐在一起共同使用的场景也是很常见的。 5.打造合理的交互模式 Houzz：
Mockups Take a second. Let it sink in. The first impression might be disorienting. There are very few interface elements on the screen. Start exploring however, and you'll find out that Mockups is filled with powerful yet only-visible-when-you-need-them features. Getting your ideas out should be effortless. We've been in business long enough that we think we have learned enough about ourselves, our product, our customers and our competitive space to be able to put a stake in the ground and tell the world what we're about. Our sweet spot: the ideation phase Mockups really shines during the early stages of designing a new interface. Mockups is zenware, meaning that it will help you get "in the zone", and stay there. Mockups offers the same speed and rough feel as sketching with pencil, with the advantage of the digital medium: drag & drop to resize and rearrange elements, make changes without starting over, and your work is clear enough that you'll make sense of them later. Skin: Ready to try it out?
yEd - Graph Editor yEd is a powerful desktop application that can be used to quickly and effectively generate high-quality diagrams. Create diagrams manually, or import your external data for analysis. Our automatic layout algorithms arrange even large data sets with just the press of a button. yEd is freely available and runs on all major platforms: Windows, Unix/Linux, and Mac OS X. The latest release is version 3.12.2 Key Features Import your own data from an Excel® spreadsheet (.xls) or XML Create diagrams with easevia an intuitive user interface. Automatically arrangeyour diagram elements. Export bitmap and vector graphicsas PNG, JPG, SVG, PDF, SWF yEd in 90 seconds Supported Diagrams yEd supports a wide variety of diagram types. Support Resources The yEd online support resources include the yEd Graph Editor manual and the yEd forum where you can give us feedback.
Ninja power: open-source HTML5 toolset aims to enable richer Web apps Modern HTML rendering engines and emerging standards make it possible to create a new class of rich experiences that could previously be achieved only with native development toolkits—but developers need better Web development frameworks and authoring tools in order to take advantage of the possibilities. Three new open-source software projects developed at Motorola Mobility hope to address the problem. We—Tim Statler, Zachary Cohen, and Kris Kowal—have had the pleasure of working on a new content creation tool called Ninja, a JavaScript development framework called Montage, and a testing automation tool called Screening. The Ninja authoring tool is a Google Chrome app for designing keyframe-based animation with HTML5, including 3D scenes and vector graphics. Montage bridges the gap between developing native applications and Web sites. Modularity is a key theme of the project. Ninja also creates high-quality markup and code that’s easily maintained outside of the tool. Workspace Layout
Les 10 outils qui simplifient la vie du community manager Publication, modération, suivi de l’e-réputation, gestion de campagnes publicitaires sur les réseaux sociaux… le métier de community manager a de multiples facettes et nécessite d’avoir recours à certains outils pour être plus efficace. Les services proposés sont nombreux, je vous propose une sélection de 10 outils simplifiant la vie de nos chers community managers… 1 : Buffer : publier sur les réseaux sociaux au bon moment Je vous ai déjà parlé de Buffer, c’est un outil qui va vous faire gagner un temps fou dans votre planning éditorial. Vous pouvez retrouver le test complet ici : Animer ses comptes Twitter et Facebook avec efficacité grâce à Buffer. Et tester l’outil ici : Buffer. 2 : Power Editor : gérer plus facilement vos campagnes publicitaires Facebook Power Editor, c’est un peu l’Adwords Editor de Facebook. 3 : Debugger Facebook : vérifier que les pages s’affichent bien lors des partages Facebook Etes vous sûr que les pages de votre site s’affichent bien sur Facebook ? En complément…
触屏手机点击区域的小秘密 摘要: 做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。 这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。 一、扩大操... 做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。 这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。 一、扩大操作焦点 iPhone自带的控件NavigationBar上的Button、TabBar上的Item、ToolBar上的ButtonItem，实际的点触区域都是被放大了的。 虽然iPhone导航栏上的操作按钮仅有29px高，但是它的实际点触区域比整个导航栏的高度还要高出5px左右，大概能达到44px+5px，这样用户就不用小心翼翼的去点击返回按钮了，按钮点起来比看起来要大的多。 如果导航栏下边区域还有按钮，或者输入区域，点击下边的按钮经常会触发导航栏上的按钮，这点很多开发人员都可能遭遇过，我看到Cocochina上就有不少类似问题，比如wyx遇到的问题，比如dave遇到的问题。 类似的，新浪微博的撰写微博界面也是个列子，当用户想编辑第一行的文字的时候，点击文字经常会误触顶部操作栏的取消或发送。 底部标签栏的可点击区域也比视觉焦点要多出5个像素左右，标签切换是比较常见的操作，这样一个小改动帮用户提升了标签切换的准确率。 但是正因为iPhone标准的TabBar的点击区域是有扩张的，所以如果你在TabBar上方放置可操作区域，都比较难以点击，Foursquare和USA today等应用最后都是采用自定义TabBar的方式规避问题的。 关于和设置往往被做成半透明图标，浮动在界面上，如果操作焦点=视觉焦点，那么用户就只能杯具的削尖指头去点了，还好这两个按钮的实际操作焦点要比视觉焦点大的多，保证了足够准确的点击。 Android4.0规定的有效可触摸的UI元素标准是48dp，一般来说，48dp转化为一个物理尺寸，约为9毫米。 二、下移操作焦点 由于用户在进行各种操作的时候，需要确保自己准确的点击到了相应的元素，所以一般情况下，右手持机的用户，落点会偏右偏下，见下图：
Dive Into HTML5 Real Time Multiplayer in HTML5 Multiplayer and browsers When you consider making multiplayer games, there are many methods available for creating a game that friends can play online. There is a good variety of multiplayer game types - take for example a card game you play synchronously with friends. Turns are made, information is exchanged in (semi) real time and the game progresses in discrete steps. Another example, Chess, can be asynchronous. Card games and Chess both usually require communication with a server and communication with the other players in order to work online. The trouble with these methods is the delay, posting a message and waiting for a response each time is just too slow. Luckily, in modern browsers we can take one step higher, and have a real time connection between a server and clients. The technologies that we have chosen and why Socket.io socket.io is a powerful and flexible server-side and client-side component that enables real time networking in your browser. Node.js Canvas/HTML5
Analyze your Facebook page | Likealyzer 设计好脾气的Web页面 随着技术的进步，Web设计的理念与技法也在不断发展。设备种类越来越多，带给我们的挑战也越来越大。怎样以最合理的方式使设计方案能够最大程度地适应各种设备的性能与规格属性，这是我们在工作当中必须考虑的问题。 面对这样的挑战，我们一方面会觉得自己曾经熟悉的工作领域突然充满了未知感，而另一方面，一直普遍存在的那些旧问题也依然摆在面前。 Web设计的历史过于短暂，要想弄明白一些大道理，我们不妨将视野放远些，让思路跨越设计的范畴。 巴赫与“好脾气的克莱维尔”(十二平均律钢琴曲集) 1722年，巴赫创作了一部包括48首前奏曲与赋格(24个大小调)的钢琴曲集，主要用作培养年轻音乐家的教育素材。 为什么这部曲集具有重大的历史意义呢？ 物理定律是很难被突破的，但人的感知是可以被改变的，解决方案就是重新定义“合调”的概念。 巴赫的平均律对自然律进行了修正，将八度音程分为十二半音的调律法，以便于转调。 Web设计中的好脾气 Web设计面向的目标设备正在由单一发展为多元，这也许是最近一两年里最令人激动，同时又是最令人焦虑的事情了。 虽然响应式设计(什么是响应式Web设计？) 触控优先 最近，越来越多的桌面版本网站当中开始出现具有触屏设备UI风格的界面元素，这种做法很好地体现出了“好脾气”的设计思路。 举个简单的例子，Google在其新版UI当中明显地增大了“写邮件”按钮这类重要交互元素的尺寸；同时，诸如导航菜单、工具栏、邮件列表等界面元素，在间距留白等方面也有做相应的调整。 从某种程度上讲，iPad在触屏移动设备与传统桌面设备之间架起了一座桥梁，它的普及提升了触屏设备UI风格在桌面设备当中的影响力。 在这类设计方案当中，界面元素所占据的空间对于鼠标指针来说显得有些许浪费了，但对于手指触控的方式却恰到好处。 而且在很多时候，这种权衡的结果对于键鼠交互方式来说也并不坏。 此外，我们之前的又是为了触屏移动设备而设计一文也可以在触控体验设计方面为大家带来一些参考。 响应式设计方案 市面上有很多关于这个话题的讨论，不过它们大多是围绕着各种相关的开发技术来进行的。 响应式方案离不开全局化的用户体验设计。 各位可以试着使用不同类型的设备来访问这个站点，或是直接在桌面设备中不断调整浏览器窗口的尺寸，以观察页面的响应化调整规则。 我想，如果我们只需要面向桌面设备进行设计，那么最终的方案应该是更加纯粹的，包括视觉效果及交互体验等方面。 移动优先的设计 当心狼
SELFHTML 8.0 (réaliser soi-même des fichiers HTML) SELFHTML stellt seit 1995 eine deutschsprachige Dokumentation zu HTML und verwandten Technologien zur Verfügung. Wir möchten dabei besonders … Anfängern die Grundlagen vermitteln und Kurse in deutscher Sprache anbieten Fortgeschrittenen ein Nachschlagewerk bereitstellen Discord SELFHTML hat einen Discord-Kanal, bei dem Sie Fragen rund um HTML und Programmierung stellen können. Everyone’s a publisher SELFHTML gehört seit vielen Jahren zu den bekanntesten Dokumentationen über das Erstellen von Web-Seiten. Fertige Content Management Systeme, soziale Netzwerke und andere Plattformen bieten dafür ebenfalls Mittel an. Wollen Sie aber eine individuelle Webseite gestalten, müssen Sie sich mit den grundlegenden Werkzeugen vertraut machen. Für Fragen zum Inhalt und Diskussionen steht das SELFHTML-Forum zur Verfügung.
Social Startup: Percolate “What should I say?” It’s the question and number one challenge brands ask themselves every day, according to Noah Brier, co-founder of Percolate, a social SaaS startup dedicated to answering that call. “Percolate is interested in helping brands create content at social scale,” Brier explained. Percolate started in 2011, a few years after Brier met his co-founder James Gross at likemind event, what The New York Times called “a monthly kaffeeklatsch for creative professionals” (and something Brier co-founded as well). Brier was at The Barbarian Group and Gross was at Federated Media, and both realized that there was a need not being met: helping brands figure out what to do with all of the fans and followers they were collecting. Brier knew that the potential was there, but first helping brands move away from “the blank boxes” of Facebook and Twitter needed to happen. Which is why Percolate is designed for their main users: community managers.
又是为了触屏移动设备而设计 印象当中，最近这些年的春天总是会带来让人觉得真心别扭的气候体验，雨和冷风就像催化剂一样，让生活和工作当中的人和事也变得异常凌乱，仿佛一团被咀嚼到完全失去味道的槟榔。November Rain前奏当中的钢琴旋律多少可以让心安然一些，一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界。 可脑袋一旦被拧下来，就什么也无法吃的样子了，不是吗。说正事儿吧。Designing for touch，关于这个话题及相关的文章，最近貌似已然铺到大街上了，不过我还是做我的吧。在标题里加了个不伦不类的“又是”二字，以示区分。 Josh Clark老师最近蛮活跃的。 对于移动设备的操作系统及应用来说，判断其用户界面设计方案是否优秀的一个重要衡量标准，就是看它对于手指触控操作的友好程度。 拇指热区与底部原则 首先，我们需要了解人们通常会以怎样的方式将手指停靠在设备上。 拇指是很不可思议的，据说它是将我们与动物区分开来的重要标志之一...拇指的功能具有相当的弹性，同时也受到一定的局限。 这也正是移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部的原因。 相比之下，左下角还是右下角的问题略显次要。 底部原则可以帮助我们对界面当中的可触控元素进行更好的组织。 另外，底部原则不仅与拇指的作用范围有关。 我，机器人(Android) 在Android设备中，底部原则这档子事被机身下方的实体硬按键搞的复杂了些许，尤其是冰淇淋三明治之前的平台。 固化的硬按键是无法被移除的，避免控制元素之间产生冲突的最直接的办法就是让虚拟与实体的工具栏在视觉上彼此分离，而这就意味着需要将Android应用中的相关控制元素和导航结构放置在用户界面的顶部。 这种将重要的控制及导航元素放在顶部的做法与iOS设备的方式正相反。 相关书籍推荐 移动版本的网站 毫无疑问，当我们在移动设备中浏览网站页面时，类似的问题也会出现。 不过，与Android应用中的解决方案有所不同，对于Web页面来说，将控制元素与导航结构放在界面顶部的做法同样会产生很大问题。 Luke Wroblewski在Mobile First一书中提到：“在很多移动版本的站点中，用户首先会看到一大坨导航结构，而不是内容。 确实是这么回事。 Wroblewski继续发言：“这个设计方案在首屏当中使用了最小化的导航机制(只有一个按钮链接)，用户可以集中精力去阅读每个分类当中的最新文章。 平板电脑