作为产品经理，你觉得交互设计师都有哪些通病. 2012年移动应用设计趋势. 摘要: 苹果的新一代平板电脑在千呼万唤中亮相了。 出乎意料的是这个新产品没有如人们猜测的那样用iPad3或者iPad HD这样的商标。 而是用了The new iPad。 这应该是所有人都没有想到的。 但是这根本不会影响产品的反响。 第一批预定已经售尽！ 我们都知道这些年苹果改变... 苹果的新一代平板电脑在千呼万唤中亮相了。 自定义导航栏素材 每天都有优秀的应用程序推出。 这并不是唯一的改变，你会发现很多优秀的应用程序都会在纹理、标签和背景上有个性的变化。 图形显示在启动 你可能已经注意到许多应用程序会有定制启动画面的设计功能。 定义标签栏图标 此功能将主要适用于iOS用户。 一个ImGame新的社会网络应用提供了一个很好的例子。 Photoboxes Instagram的仍是经典摄影iPhone用户的应用程序。 清新致简 浮华的图形和梯度并不总是最好的方式去。 独家界面元素 如果你对移动应用设计趋势有兴趣，也与我们分享您的想法和问题，在下面的评论区！ 960 Grid System.
触屏手机点击区域的小秘密. 摘要: 做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。 这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。 一、扩大操... 做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。 这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。 一、扩大操作焦点 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毫米。 二、下移操作焦点 由于用户在进行各种操作的时候，需要确保自己准确的点击到了相应的元素，所以一般情况下，右手持机的用户，落点会偏右偏下，见下图： iPad应用的十大用户体验设计准则. 咱先祝各位情人节快乐吧，宅基腐都没太大所谓，2012了，图个乐呵。 话说今次上新与之前一篇的间隔稍微长了些，不过也确实尽力而为了；天天梦里都在翻译东西，满脑子的iOS、交互设计、用户体验...希望事情都能快快的顺利搞定。 闲话不多说了，今天的这篇译文同样是移动方面的话题。 有人说了你这不叫“为网而生”么，哪来这么多移动的东西呢？ 这事儿也不奇怪，首先这是我个人目前最关注的方向，也是除了工作时间以外花费精力最多的地方；其次，正像我们在“从网站到移动客户端应用 - 随机应变的用户体验设计 ”一文中提到的，我相信很多同行朋友们无论一直以来主攻哪个方向，也许现在都已经开始琢磨着探索移动应用的相关领域了；其实这是个生态问题。 与众多优秀的产品相同，iPad应用的成功也取决于产品核心价值以及用户体验模式等诸多方面的因素。 在本文中，我们将共同了解一些你在设计工作中需要认真考虑与贯彻的指导准则。 1.瞄准核心需求，简化产品功能 优秀的iPad应用通常可以让用户以最简单的操作方式完成一个或多个非常明确的任务目标。 来看些实例。 Whole Foods也是一款烹饪辅助类型的应用，如果用户希望对某些菜谱进行尝试，它可以帮助用户将那些所需的食材配料生成为购物清单。 另外，不要到处使用按钮一类的视觉交互元素；在很多情况下，操作控制行为完全可以通过手势来完成。 2.打造更加智能化与个性化的产品体验 没人喜欢花钱买回一款应用还必须首先进行复杂的设置才能正常使用。 Zite是一款令人叫绝的内容阅读类应用，它会读取用户在Google Reader、Twitter和Delicious账户中的内容信息， 分析用户的个人喜好，并在此基础上向用户推荐其他内容源当中的相关文章 。
下图是Zite自动生成的杂志界面： 3.注意应用产品的上下文环境 根据你的产品所面向的核心需求，考虑用户会在哪些典型的情景环境中进行使用。 OpenTable主要提供订餐方面的服务。 Awesome Note也是个不错的例子。 GroceryIQ是一款购物清单类型的应用，它的一个重要特色是允许用户按照不同商店来归纳与筛选自己需要购买的商品，非常符合人们在实际购物需求中的心智模型。 4.考虑多用户与多设备的情况 家庭成员之间通常会使用同一部iPad来完成各自的需求目标；另外，全家人围坐在一起共同使用的场景也是很常见的。 5.打造合理的交互模式 6.提供首页视图 7.谨慎使用弹出效果. 触屏手机点击区域的小秘密. 摘要: 做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。 这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。 一、扩大操... 做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。 这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。 一、扩大操作焦点 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毫米。 二、下移操作焦点 由于用户在进行各种操作的时候，需要确保自己准确的点击到了相应的元素，所以一般情况下，右手持机的用户，落点会偏右偏下，见下图：
23款单页面网站设计案例. 设计好脾气的Web页面. 随着技术的进步，Web设计的理念与技法也在不断发展。 设备种类越来越多，带给我们的挑战也越来越大。 怎样以最合理的方式使设计方案能够最大程度地适应各种设备的性能与规格属性，这是我们在工作当中必须考虑的问题。 面对这样的挑战，我们一方面会觉得自己曾经熟悉的工作领域突然充满了未知感，而另一方面，一直普遍存在的那些旧问题也依然摆在面前。 我们是否需要花费全部精力用来解决各种新旧细节问题，还是可以从宏观上寻求一些具有指导性质的“真谛”？ Web设计的历史过于短暂，要想弄明白一些大道理，我们不妨将视野放远些，让思路跨越设计的范畴。 其实，我们真的可以从那些看上去与设计没有多大关联的领域中找到一些抽象化的、更具普遍意义的思路和模式，以帮助我们解决自己的问题。 巴赫与“好脾气的克莱维尔”(十二平均律钢琴曲集) 1722年，巴赫创作了一部包括48首前奏曲与赋格(24个大小调)的钢琴曲集，主要用作培养年轻音乐家的教育素材。 为什么这部曲集具有重大的历史意义呢？ 物理定律是很难被突破的，但人的感知是可以被改变的，解决方案就是重新定义“合调”的概念。 巴赫的平均律对自然律进行了修正，将八度音程分为十二半音的调律法，以便于转调。 Web设计中的好脾气 Web设计面向的目标设备正在由单一发展为多元，这也许是最近一两年里最令人激动，同时又是最令人焦虑的事情了。 虽然响应式设计(什么是响应式Web设计？) 触控优先 最近，越来越多的桌面版本网站当中开始出现具有触屏设备UI风格的界面元素，这种做法很好地体现出了“好脾气”的设计思路。 举个简单的例子，Google在其新版UI当中明显地增大了“写邮件”按钮这类重要交互元素的尺寸；同时，诸如导航菜单、工具栏、邮件列表等界面元素，在间距留白等方面也有做相应的调整。 从某种程度上讲，iPad在触屏移动设备与传统桌面设备之间架起了一座桥梁，它的普及提升了触屏设备UI风格在桌面设备当中的影响力。 在这类设计方案当中，界面元素所占据的空间对于鼠标指针来说显得有些许浪费了，但对于手指触控的方式却恰到好处。 而且在很多时候，这种权衡的结果对于键鼠交互方式来说也并不坏。 此外，我们之前的又是为了触屏移动设备而设计一文也可以在触控体验设计方面为大家带来一些参考。
响应式设计方案 市面上有很多关于这个话题的讨论，不过它们大多是围绕着各种相关的开发技术来进行的。 响应式方案离不开全局化的用户体验设计。 移动优先的设计 当心狼. 又是为了触屏移动设备而设计. 印象当中，最近这些年的春天总是会带来让人觉得真心别扭的气候体验，雨和冷风就像催化剂一样，让生活和工作当中的人和事也变得异常凌乱，仿佛一团被咀嚼到完全失去味道的槟榔。 November Rain前奏当中的钢琴旋律多少可以让心安然一些，一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界。 可脑袋一旦被拧下来，就什么也无法吃的样子了，不是吗。 说正事儿吧。 Designing for touch，关于这个话题及相关的文章，最近貌似已然铺到大街上了，不过我还是做我的吧。 Josh Clark老师最近蛮活跃的。 对于移动设备的操作系统及应用来说，判断其用户界面设计方案是否优秀的一个重要衡量标准，就是看它对于手指触控操作的友好程度。 拇指热区与底部原则 首先，我们需要了解人们通常会以怎样的方式将手指停靠在设备上。 拇指是很不可思议的，据说它是将我们与动物区分开来的重要标志之一...拇指的功能具有相当的弹性，同时也受到一定的局限。 这也正是移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部的原因。 相比之下，左下角还是右下角的问题略显次要。 底部原则可以帮助我们对界面当中的可触控元素进行更好的组织。 另外，底部原则不仅与拇指的作用范围有关。 我，机器人(Android) 在Android设备中，底部原则这档子事被机身下方的实体硬按键搞的复杂了些许，尤其是冰淇淋三明治之前的平台。 固化的硬按键是无法被移除的，避免控制元素之间产生冲突的最直接的办法就是让虚拟与实体的工具栏在视觉上彼此分离，而这就意味着需要将Android应用中的相关控制元素和导航结构放置在用户界面的顶部。 这种将重要的控制及导航元素放在顶部的做法与iOS设备的方式正相反。
相关书籍推荐 移动版本的网站 毫无疑问，当我们在移动设备中浏览网站页面时，类似的问题也会出现。 不过，与Android应用中的解决方案有所不同，对于Web页面来说，将控制元素与导航结构放在界面顶部的做法同样会产生很大问题。 Luke Wroblewski在Mobile First一书中提到：“在很多移动版本的站点中，用户首先会看到一大坨导航结构，而不是内容。 确实是这么回事。 Wroblewski继续发言：“这个设计方案在首屏当中使用了最小化的导航机制(只有一个按钮链接)，用户可以集中精力去阅读每个分类当中的最新文章。 平板电脑 又一个底部原则 交互对象的尺寸 元素的尺寸与空间布局. 你所没有意识的你自己——浅谈下意识设计. 摘要: 假设这样一个场景：你走在路上，一辆卡车朝你飞驰而来，你将会做什么？ 回答傻站着不动的请允许我致以无上的同情。 普通青年的答案应该是马上躲开，对吧？
好，请先停一下，仔细想想，完整的动作流程是怎么样的？ Ok，重新整理一下：你看到了这辆车→做出它即将撞到你的判断→你... 假设这样一个场景：你走在路上，一辆卡车朝你飞驰而来，你将会做什么？ 回答傻站着不动的请允许我致以无上的同情。 Ok，重新整理一下：你看到了这辆车→做出它即将撞到你的判断→你感到了危险→你马上躲开了。 觉得这个是标准答案请伸出右手放在自己的心口上，扪心自问一下真的是这样么？ 真实的情况应该是这样的：你看到了车→你感到了危险→你躲开了。 所以究竟是什么救了你？ A. B. C. 答案是D. 生物学上的大脑分成三个部分，分别影响着思维和行为的不同方面。 旧脑（the old brain），也就是所谓的脑干，这部分是进化中最先产生的。 中脑（mesencephalon，midbrain）之所以叫中脑是因为它在空间上和进化顺序上都位于旧脑和新脑之间。 新脑，也就是我们所说的大脑皮层。
当我们感知到某个东西或事件时，大脑的三个部分都参与思维和行为，而旧脑和中脑比新脑反应更快，因此在新脑（掌管理性思维的那部分）做出反应前，我们就“本能”地“下意识”地行动了。 日本设计师深泽直人首次提出了一种叫做无意识设计的设计理念，又称为“直觉设计”，意为：将无意识的行动转化为可见之物。 关键词：本能、反射、情绪、经验 由本能、反射、情绪和经验产生的行为是很难被意识到的甚至可以说是无意识的。 一、本能 本能是指某一动物物种各成员都具有的典型的、刻板的、受到一组特殊刺激便会按一种固定模式行动的行为模式。 铁质围栏的的尖角 围栏大家应该都知道，开放区域里随处可见，本身目的是分割物理区域、引导人流。 二、反射 反射的定义是这样的：在中枢神经系统参与下，机体对内外环境刺激所作出的规律性反应。 望梅止渴 望梅止渴可能是从古至今最妙的反射行为设计。 数字提示 如果有反射设计排行榜的话，iOS的push messages绝对应该占上一席，可谓是当代社会大多数人都非常熟悉、又爱又恨的一种条件反射信号。 另一个我们熟悉的反射设计是微博的新feed提示。 三、情绪 情绪是指人对认知内容的特殊态度，是以个体的愿望和需要为中介的一种心理活动。
戒烟广告 四、经验 经验是从多次实践中得到的知识或技能。 平板设备.
交互设计方法探讨. 一套手机客户端拍照上传流程的交互设计稿~ by flowercai_交互设计_界面设计_原创设计作品频道. 腾讯QQ触动未来的概念版设计稿_交互设计教程_三联教程. QQ概念版经过一年的秘密研发，终于掀开了她的神秘面纱，向世人展现了她的真实面目，做为一个全新的产品，以及内部封闭秘密研发的众多因素，可能很多人想了解这个QQ概念版的研发设计过程以及产品的设计理念，在这里我们将带你全面的了解QQ概念版这款产品的研发设计过程，也和大家一起分享我们项目团队的研发设计经验。 1.项目背景 QQ同时在线过“亿”，腾讯开始正式步入“亿”时代，正在大家沉浸在喜悦以及自豪的同时，我们一款全新的概念产品将破茧而出，因为我们知道过“亿”，互联网对我们来说意味了更大的期望，也给我们更大的责任，在这里我们会去探索未来QQ的概念模型： 未来IM会发展成什么样? 未来用户的沟通会呈现什么样? 什么样的体验设计能更便捷地满足用户的沟通以及交流?
触摸时代已经到来，我们如何提供用户更好的体验设计? 其实对于QQ 的探索，我们从来没有停，前期的My QQ概念视频的展示以及QQ搜索应用等概念视频，都已经在网上风靡一时，而如何真正在概念设计的基础上，结合即时通讯强大的技术力量孵化出一个真正能让用户体验的产品，是大家最为期待的。 2.研发设计过程 QQ概念版在研发设计之初，由于投入开发资源比较少，项目战线拉得比较长，虽然前阶段没有产品经理的参与，但是只有设计师及开发人员的团队，或许是让设计师能更好的发挥想象力的机遇，虽然流程没有如研发QQ时的规范，但这样能采用更加敏捷的开发方式。 QQ概念版团队在一开始设计之初就定下了自己的设计目标： 创新性的界面能让人眼前一亮，需要承载用户更多的情感，让用户感受到界面的生命力，更需要传递一个时间和空间上的应用，带给用户更多想象的空间，让界面的表现更加丰富多彩，通过对人机工学的知识运用，更好的支持鼠标操作及多点触摸操作。 我们在设计过程中提炼了两个未来趋势设计：拟人化和拟物化，其中涉及到的核心关键词为：生命力、时间感和空间感，生命力就是通过拟人化的情感沟通，是产品更具有亲和力，简单来说就是在交互的操作上有呼吸效果，在视觉的感受上有更贴近人的实际生活场景，而时间感和空间感就是通过拟物化的产品界面，是用户更贴切生活，让用户在使用过程更好与产品进行互动。 体现在设计会随着时间的变化而产生不同的界面效果，而空间感则是通过wpf的新技术，体现出多维的空间表现力。
而我们研发的一个重要的目的就是开始研究多点触摸对界面带来的革新及挑战。 整个设计的过程将有以下几个步骤： 交互设计师是一个没有前途的工作？（译） 怎么去写网站的交互设计文档. The Cooper Journal. While I was on route to Amsterdam for IXDA14, something struck me about the way the dinner options were presented to passengers. Here’s what was happening. The flight attendant delivered the menu in the same way to each row: “Would you like barbeque chicken, beef strip, or vegetarian?” I’ve been a vegetarian for twenty years now, and I’m a little sensitive to these moments. At first, my identity hackles were raised. “Hey!” I thought, “Why wouldn’t it be ‘Chicken, beef, and spicy red-beans-and-rice?’ Fortunately, as is my habit, I caught myself mid rant, and tried to consider what was good about it. You see, one of the problems that vegetarians encounter when eating buffet-style with omnivores is that when there is a veggie option present, if it’s too good, there’s a risk that the omnivores will eat all the veggie stuff before we get to the front of the line, leaving us poor suckers with empty plates and sad-trombone bellies.
万众瞩目的-斯坦福大学公开课: 人机交互研讨. 呆聋瞎，让用户体验设计体现商业价值. 【广州】小团队找设计师. 与ISUX一齐成长：深圳-北京-上海-成都 | 腾讯ISUX – 互联网用户体验设计. 腾讯ISUX 正在积极发展之中，我们一直为优秀人才提供多元化的空间和在职培养； 我们长期面向社会招募不同用户体验设计的专业人才，配合我们在深圳、北京、上海和成都设计中心的发展。 想加入我们的团队？ 快把简历发到 isux@qq.com 吧！ UR用户研究 用户研究师需要有好奇心、良好的沟通技巧、冷静的头脑和洞察力。 用户研究师首先理解设计问题，量身订做合适的研究计划，再邀请用户参与，拿到数据作分析，然后向团队宣讲结果，协助推动把用研结果落实在设计里面。 人不是什么都想说出口，即使想说也不一定懂得怎样表达； 因此做用户研究需要有好奇心，在跟用户交流时要多看多听，不要放过看似平平无奇的线索。 不论是定性还是定量，每次研究后拿到的数据都很多，冷静的头脑可以让你不慌不忙的去处理这些大量的数据；怎么去处理呢？ 发送一封简历到 isux@qq.com ID交互设计 交互设计师是注重理性的。 他们很多时候是在分析和讨论用户的需求，并花大量的时间做信息架构、任务流程和竞品分析的梳理，同时也会时常和用研的同学讨论如何定位人群和分析用户的行为。 VD视觉设计 最另类的一群人，最天才的创意家。
他们是艺术家，要给予充分的时间和空间给他们去消化需求和进行艺术创作，流水线作业很容易影响产品质量。 FD前端开发 前端开发工程师不是新岗位，其前身是网页制作工程师，负责流程中的网页制作部分。 交互设计方法和思考过程 | 用户体验与交互设计. 我常被问起：“你是做什么的？” “交互设计师。” “交互设计是做什么的？” 我很尴尬的解释一堆：“！ @#￥%…….” 交互设计的特色之一——“虚” 交互设计似乎是个很难解释，有点”虚、空、玄“的东西。 交互设计的特色之二——纠结，有木有！ JJg在《用户体验要素》中，将交互设计设置在结构层。 一方面，交互设计恰恰处在抽象的战略向具体实现页面的转化过度阶段。 另一方面，交互设计师的诞生某种程度是为了提升产品可用性。 说起来简直就是吃饭靠公司，目标是用户的“无间道”。 能不纠结么….. 交互设计的内容有哪些？ 有人问我交互设计难么？ 我说“不难，你想，用户的操作行为就俩：点击、拖拽。” 其实，我理解的交互设计主要分为两块：信息架构和操作细节。 下面从交互设计不同阶段的产出物，来谈谈我自己交互设计方法和思考过程： 1.接需求 这个阶段主要是接到产品经理等拿来的需求，比如FRD文档。 2.需求分析——>翻译成界面语言 俗话说，Think first，Design next.对于接到的需求，第一件要做的事情就是仔细分析和讨论下需求的逻辑、内容和目的，而不是马上风风火火的开工。
忍不住引用臭鱼博客的一个灰常贴切的案例： 一个需求文档。 第一步. •您选择了回邮方式办卡，概括解释这个办卡方式。 •接下来您应该 下载申请表 •回邮办卡的全过程是这样的… •一系列注意事项。 第二步. 1. 2. 3. 4. 第三步. 对于单一的页面（并非整站，没有操作逻辑）的产品来说，需求分析完，交付物出线框图，后面视觉和开发静态页面足够了。 3.结构框架 实际产品往往复杂很多，在需求分析的时候要对产品结构进行梳理，表达出网站的层级结构。 4.流程图（flow charts）：表达用户或系统对某项任务执行的流程。 其实流程图分为单个用户流程图和多用户流程图。 举一个购物网站的例子：使用者主要包括购买者、买礼物的人、通过EDM(email营销)进来的人和退货者。 先画出“购物者”的流程图 再画出其他角色的流程图 继续画出“买礼物的人”的业务流程。 你会发现不同用户角色可以复用相同的页面。 画出所有用户角色的流程图，整体看一遍 通过梳理不同用户的行为路径，可以更好地梳理复杂问题。 所谓避免遗漏页面就是查看整站是否缺失了某些页面，首页、类目集合list页、list页、detail页，以及操作后的结果页。 这些表现页面 相关箭头越多，页面承载的信息量也越多。 6.检查check. 产品中图形语言规范化的意义与过程. 摘要: 现在随着互联网企业的发展与业务的拓展，随着时间的推移，一个公司的产品可能将越来越丰富多样，同样每一个产品随不断的功能完善和扩展，随着一个产品的“长大”产品内所需要用到的图标也必然会越来越多，这时候众多产品形象的呈现、产品内图标等视觉原素的表现，如何能与整个产品... 现在随着互联网企业的发展与业务的拓展，随着时间的推移，一个公司的产品可能将越来越丰富多样，同样每一个产品随不断的功能完善和扩展，随着一个产品的“长大”产品内所需要用到的图标也必然会越来越多，这时候众多产品形象的呈现、产品内图标等视觉原素的表现，如何能与整个产品或公司的战略计划相适应，这时候在图形语言的视觉呈现，语义表达、识别性等层面就需要作一个全面细致的考虑了。
我们来看几个典型的例子，回顾一下 Adobe 产品系列的成长过程， 从2005年 Adobe 收购了原最大的竞争对手Macromedia公司后，它的产品线得到了极大丰富， 而后在2002年Adobe确立了 Creative Suite概念后，后续的新产品持续推出，庞大的产品线以一种什么样的展现方式呈现在用户面前便成为了一项非常重要的课题。 下图中我大致的列了一下Adobe产品logo的一个进化转变过程： 产品阵容强大的Adobe帝国在CreativeSuite 3发布的时候为旗下全部产品Logo进行一个色环划分图，很好的呈现出各产品logo的色彩关系和一个完整的用色体系。 我们再看一个例子，Apple公司在2010年和2011年先后将itunes与App store的Logo作出了比较重大的调整，到Max OS Lion版本时，两大平台级的产品新形象同时展现在用户Mac的Dock上。 另外itunes 10的发布后侧栏的图标全部变成了单色，这一变化我认为是为了突出Store的资源核心区域，强调产品的平台性，和上述的分析一样，这个视觉表现层面的调整同样是为了整个产品的资源商业战略服务的。 那现在回到我们自己的产品，现在“我的阿里”作为一个网商用户的得力助手，用户的家，“我的阿里”内容与应用在日益的增长，系统越来越庞大，同样网站的视觉的图形语言的整理，解决原来积累已久的视觉表现“乱象”也日益的紧迫。 ■ 在图标的分类上，我们将网站图标分为以下三类： 一 产品图标 （Logo） 产品图标设计原则： 二 产品界面中的功能、工具图标 功能、工具图标设计原则： 三 图形符号. 科技界评论 Windows8：Metro 和传统桌面并非天作之合. Adobe Air 部门的产品经理 Christian Cantrell 在他的 个人博客 发表了一篇长文。
他认为 Windows8 将会重现 Vista 的失败，其原因是微软试图通过激进革新战胜苹果，反而忽略了自己原有的优势。 同时，他也认为这是个容易改正的错误，只要微软不再强行把 Metro 和传统桌面环境绑合在一起。 “我对 Windows8 的看法是，微软试图在苹果之前把操作系统统一起来，从而取得对苹果的优势。 但是，我认为他们想要取胜的事情，却是苹果没有兴趣去做的。 （微软的）这种做法实际上造成了计算机交互和效率上的大幅倒退。” 持这种观点的不只是 Christian Cantrell 一人。 英国 卫报 的 Matthew Baxter-Raynolds 更加不客气，他认为 Windows8“让人困惑，难以置信的困惑”(Confusing as hell)。 Daring Fireball 的 John Gruber 看过许多评论，他发现：“在 Windows8 的评论中不断出现的一个主题是：新的 Metro UI 很优雅、聪明、有原创性，也显出了许多潜能；更新后的传统 Windows 桌面远远超过以往；这两个环境放在一起，体验并不好”。 所有人都爱 Metro，问题是：它是否适合桌面？ 微软不断强调的“No Compromise”从来就没有说服评论家。 简单的说，微软似乎不愿意为它的 Windows8 愿景妥协。 对于微软来说，产品是第一位的。 在试过 Windows8 预览版之后，我的第一感想就是，在最基本的操作上，这是在迫使用户使用平板操作来处理桌面任务，导致的后果就是低效。 正如 Stephen Hackett 所 总结 的，这种人工斧凿式的切换使得 Windows8 用起来就像是两个不同的机器。
让 Metro 归于平板，让 WIMP 归于桌面，把用户体验找回来吧。 P.S. : 我的笔记本不需要触屏。 图片来自 Gizmodo Life would be so much easier if we only had the source code. 21款网页设计案例之个性导航菜单. Windows 8消费者预览版试用体验：进化未完成. 摘要: 微软于北京时间2月29日晚间发布了Windows 8消费者预览版，将PC、移动端操作系统合二为一。 作为Win8的公开测试版本，它重视平板操作体验、内置应用商店、云服务及社交分享无处不在等等特性，均备受关注。 在硬件性能已普遍提高的今天，用户最关心的也许不再是某... 微软于北京时间2月29日晚间发布了Windows 8消费者预览版，将PC、移动端操作系统合二为一。 作为Win8的公开测试版本，它重视平板操作体验、内置应用商店、云服务及社交分享无处不在等等特性，均备受关注。 在硬件性能已普遍提高的今天，用户最关心的也许不再是某程序占了多少内存，而是操作起来感觉如何。 此事无关CPU跑分或微软未来CEO是谁，以下从安装上手开始，更多谈及体验。 Windows 8消费者预览版试用体验：标志性的Metro开始界面 下载安装及简单上手 首先需要注意的是，Windows 8消费者预览版无法卸载，如想恢复系统需重新安装原系统；原操作系统程序有些可能出现不兼容的现象，造成该程序无法使用，或系统不稳定。 Windows 8消费者预览版硬件最低配置 如果已决定安装，微软此次提供了两种下载安装方式： 1、使用在线引导程序。 2、下载ISO镜像文件。 此版本过期时间为2013年1月16日，可用于PC端也可用于平板，但目前尚未放出ARM版本。 用“应用”方式显示程序，部分程序与应用重复，“桌面”也是应用之一，右键显示命令菜单 按向导进行简单设置后就可以开始使用Windows 8消费者预览版了。 登录可以使用本地账户，如果有Live系列账号，也可使用在线账户，后者可将个性配置同步到不同终端。 鼠标滚轮或左右点击均可翻页，右击应用可见命令菜单，左击进入。
默认打开的第一个页面是微软的必应；现在知道那条鱼的原型了么？ 12个主要特性：科技概念的盛宴 移动互联网、云计算、社交分享……这些红得发紫的概念，在Win8中都得到了淋漓尽致的体现。 1、跨平台系统——移动互联网大势所趋 这一特点迎合了移动互联的需求，其实早在开发者预览版中便已有体现，但在苹果发布了同样意在结合PC与移动端的OS X Mountain Lion后，其意义变得尤为突出。 鼠标悬停左下角出现开始菜单，指向左上出现正在使用的应用列表，右键可直接关闭 2、Metro界面——消失的“开始”菜单 新版Windows引起使用者最强烈反应的便是陪伴他们多年的“开始”的消失。 Untitled. 市面上现有的主流手机操作系统有一些优秀的体验，比如android从顶部下滑出的通知中心。 Palm的context menu 从屏幕下部的感应区呼出。 Nokia N9 就更为纯粹，把just swipe——从侧面滑动切换手机态视为核心的设计理念。 仔细看还挺邪门儿的，从顶部向下，从底部向上，从侧面向内——它们是如此热衷于边缘，以至于当我们想再这么做的时候，发现四周都被它们用光了：） 为什么是边缘？ 画了三张图，试着每张图停留5秒钟，记住黑点的位置： 事实上可以将黑点理解为界面中需要定位的信息，随机摆放的情况下，5秒钟的时间很可能一个也记录不下。 下一张，仍然是5秒钟的时间 同样是5秒钟的时间，结果确有所不同。 显而易见的一个结论是边缘的记忆成本要低一些，道理也很简单，如果黑点在屏幕内，每个点有两个维度的信息，x，y，而在屏幕边缘时，因为边缘只有四个，很容易区分，以至这个维度的信息几乎可以忽略，这样自然更容易定位了。 第二可以说明边缘道理的就是fitts定律，它可以简单的描述成定位一个目标的时间，取决于目标与当前位置的距离，以及目标的大小（还有其他因素，但和界面相关度较小）。 表面看来，fitts定律和边缘没有什么直接的关系，但仔细想下，我们所谓的“移动到边缘”和“从边缘移入”实际的目标点并非边缘本身，而是“边缘外”。 另外还有一些我曾经做过的设计作为案例，比如下面的解锁界面，上边为概念稿，下边是我们再产品正式开发前改进的稿件，这个设计可以在现在市面上的腾讯定制的手机上可能到。 右图中的小字为“拖动图标到屏幕边缘解锁”。 当然，不论什么设计都不是完美无缺的，比如这个设计也受到一些挑战，诸如：“为什么有四个入口，一个不是挺好，移动端设计力求一个页面完成一个功能，不用这么复杂”。
在NOKIA工作的时候，一个设计师说起他们的调研结果：用户每天在手机屏幕停留的时间，大约60%-70%以上在主屏幕（home screen）上，这一结论好像那个直接导致了我们看到nokiaN97刚上市时那个繁华的过了头的主页面，先不论这个设计的好坏，数据上是比较客观的（3年前的数据）。 摩托罗拉在去年年末推出了一款新的手机，界面上和我们之前的设计非常相近，并非想说moto抄袭，应该只是个偶然，因为腾讯也经常要面对抄袭的指责，可能大家都是中国人，习惯这个词了，但是设计上并没有那么多抄袭可言。 边缘与交互密度. 从事产品设计应订阅的13个团队博客. HOME 键的迷思. 新浪前端工程师开发出在线演示文档JS框架webSlide，比impress更流畅、更实用. 手机产品设计禁忌. QQ2012 Beta1 会话窗口支持合并 融合社交元素. UI /UX. Clear. 手势的未来? | 百度商业用户体验部. Windows 8 音乐、视频、Xbox Live介绍【视频】 浅析产品新手引导设计. MWC 2012：微软 Windows 8 消费者预览版发布会总结. 如何让有用的产品更好用. 简化输入 — 让网页表单更亲切. UI/UX. 浅谈移动互联网广告设计. WP7交互特性浅析及APP设计探究.