精华内容
参与话题
问答
  • 11个优秀的交互设计作品集

    万次阅读 2019-10-13 16:40:30
    本文转自墨刀编译自Vanschneider的10 inspiring ...虽然很多交互设计师可能认为自己的工作不能很好地以视觉化的方式呈现出来,但一个作品集对于交互设计工作来说真的很重要。 在交互设计作品集中,可以引导人们了解...

    本文转自墨刀编译自Vanschneider的10 inspiring ux portfolios and why they work。

    不管你做什么样的设计,一个在线交互设计作品集都是必备的。在大多数情况下,公司和客户根本不会考虑你是做什么工作的。虽然很多交互设计师可能认为自己的工作不能很好地以视觉化的方式呈现出来,但一个作品集对于交互设计工作来说真的很重要。

    在交互设计作品集中,可以引导人们了解你的工作流程,分享你在简历甚至谈话都无法完全阐述出的细节。一个交互设计作品集将帮助面试官和用户都能更好地理解你的想法,以及你与众不同的地方。

    通过与Semplice(我的设计师作品集系统)的合作,我看到了很多例子,这些例子表明:即使是复杂的交互设计工作也可以漂亮的作品集的方式呈现出来。 我们可以去留意一些有才华的UI设计师的作品集,学习用可视化的方式来展现你的作品集,进而让人们对此留下深刻的印象。

    1. Kurt Winter

    在这里插入图片描述

    我最喜欢Kurt 的交互设计作品集的一点是:它看起来最不像是一个作品集。对于交互设计作品集来说,很容易塞满一些原型图,堆砌文字。 Kurt 确实分享了所有必要的细节,但同时成功地使它具有视觉吸引力。注意观察一下他的布局、图标和文本,这些都是值得学习借鉴的。

    在这里插入图片描述

    点击访问Kurt Winter的作品集

    2. Liz Wells

    在这里插入图片描述

    Liz Wells 是我们交互设计作品集的代言人。 她的作品集不仅让人眼前一亮,而且让人很容易理解她到底在做什么,以及她的作品是如何融入一个成功的最终产品的。每个案例研究都讲述一个具有相似结构的故事:

    • 项目摘要

    • 目前的任务

    • 用户体验的挑战

    • UX解决方案

    这使得读着很容易理解她从头到尾的方法流程。最令人印象深刻的是,她用了大量的图片来说明她的创作过程: 早期的草图,批注笔记,线框图。 许多这样的视觉效果都是简单地从笔记本上撕下来的,或者快速地写在白板上——这些视觉效果是任何UX设计师在随时随刻都能得到的。但 Liz 做的还远远不止这些,她拍摄这些笔记就像你拍摄印刷品一样,有互补的背景和可爱的小道具。她将最终产品的图片和视频呈现出来,让这个项目在屏幕上栩栩如生。

    在这里插入图片描述

    你可能会认为没有太多要展示的过程,尤其是策略和研究阶段,但是即使是头脑风暴的速记笔记也可能对你的交互设计作品集有价值。 将这些小片段保存在你的整个项目中,你会惊奇地发现这个故事在之后是多么的容易拼凑起来。

    点击访问Liz Wells的作品集

    3. Isa Pinheiro

    在这里插入图片描述

    与Liz的“幕后“式的案例研究相反,Isa Pinheiro在她的交互设计作品集中分享了精美的成品,并解释了她的工作如何影响最终用户。

    以她在日本铁路系统的项目为例。Isa在页面中嵌入了交互式原型,因此读者可以直接从她的产品作品集中体验成品。如果你没有从早期项目阶段分享的点点滴滴,这是一个很好的解决方案。

    在这里插入图片描述
    在这里插入图片描述

    (用墨刀做的交互原型,可以获取分享链接分享到作品集里)

    艾萨(Isa)还花时间在自己的作品集中添加了一些个人风格。看看她的两个独特的导航选项:一个是带有两个直接菜单项的全屏导航,另一个是每个项都配图的图像式导航。平滑的滚动和全屏封面滑块为她的交互设计作品集增添了视觉冲击。

    点击访问Isa的作品集

    4. Oykun Yilmaz

    在这里插入图片描述

    Oykun Yilmaz 擅长用一句话介绍客户并简要概述项目目标,从而使他的项目摘要简短而优美。 但是他会确保用精准的数字来呈现具体的结果,这往往是许多交互设计作品集案例研究都缺乏的。交互工作在人们看来似乎是抽象的,所以可以通过解释你的工作是如何产生实际影响的,让它具体化。

    点击访问Oykun Yilmaz的作品集

    5. Naim Sheriff

    在这里插入图片描述

    Naim Sheriff的主题对于读者来说看起来很简洁,使读者看起来很真实。 以他的Ideapaint案例研究为例,他在其中分享“设计探索”阶段的重要性,以及他通常如何进行。 甚至例出了在项目过程中问自己的问题,例如:“我们如何成功展示出相似产品之间的差异?用户怎么知道该为其的空间买多少油漆?” 随后,他们团队分享了解决方案。

    对于那些可能需要交互设计师,但又不了解内部术语和工作方式的客户来说,这样的交互设计作品集更加接地气。这样的作品集能让任何人,即使是招聘员(可能对设计一无所知)都容易理解你所做的工作。

    在这里插入图片描述

    点击访问Naim Sheriff作品集

    6. Sebastián Martínez

    在这里插入图片描述

    SebastiánMartínez 用单页作品集的方式带你了解他的作品。 他的案例研究很短,但是他做了很多设计师忘记做的一件事:他分享了他对最终产品的感觉。 “这是我感到自豪的最完整,最有趣的产品之一,”SebastiánMartínez谈到他的 Monkop Test Cloud 项目时说道。分享对工作的感受不会花费你的太多时间,但很有价值。

    在我们的“如何在X找到工作”系列中,我采访了顶级公司的设计师和招聘人员,只是询问我们如何能够在他们的设计团队中获得一份理想的工作。 他们中的许多人都说,他们想知道你对项目和结果的看法。 它给你的工作带来了深度,并给了我们一个进入你心灵的窗口。

    点击访问Sebastián Martínez的作品集

    7. Husam Elfaki

    在这里插入图片描述

    Husam Elfaki的交互设计作品集案例研究在第一段会介绍项目、目标和结果。但他并没有就此打住,把一堆照片扔在下面,而是将项目分解,解释项目的每一部分。

    不要想着放上图片你的读者能够理解它们的意思——花时间去写上标题或简短的摘要,解释你项目的来龙去脉。

    点击访问Husam Elfaki的作品集

    8. Kali and Karina

    在这里插入图片描述

    从概念到成品,Kali and Karina 的工作涉及到全流程。她们很少提到UX/UI这些字眼,但这都隐含在他们的案例研究中。从精心设计的用户旅程、黑白草图到高保真的原型图,她们像讲故事一样分享她们的项目。

    点击访问Kali and Karina 的作品集

    在这里插入图片描述

    (通过墨刀制作的高保真交互原型)

    9. Elliot Owen

    在这里插入图片描述

    Elliot Owen 呼吁人们注意特定的手势、互动和经验,这使他的项目取得成功。以他的 British Airways 为例。

    在这里插入图片描述

    他展示了小的功能或特性如何对项目产生重大影响。 而且他在合适的地方使用的GIF,不是为了让观众眼花缭乱或分心,而是准确地展示了他的交互设计项目的工作方式。

    点击访问Elliot Owen的作品集

    10. Veda Dsiljak

    在这里插入图片描述

    Veda Dsiljak的案例研究几乎就像是产品营销页面,他们的作品销售得如此出色。不只是用产品或项目的标题来命名页面,而是为它们撰写一个性标题。它们的作用就是一开始就引起人们的兴趣。 他在每个案例的结尾都添加了原型的下载链接,以便读者可以亲自体验。

    点击访问Veda Dsiljak的作品集

    11. Jason Yuan

    在这里插入图片描述

    我们以上分享的一些示例是允许你在作品集上直接跟原型进行交互,但 Jason Yuan 是使用带有鼠标操作轨迹的视频来可视化体验。通过这种方式,他能引导读者无障碍地明白产品的使用过程。

    年轻设计师们可以学习这一点:Jason为Apple设计的作品是自发的重新设计,但设计是如此详尽周到,感觉就像是真正的客户作品。 自发的重新设计是一种很好的方式,可以在你的职业生涯初期或你希望进入新的设计道路时展示你的技能和兴趣。 我总是建议说不要给像苹果这样的大公司进行自发设计,因为它们已经是一个成熟的知名品牌,这太容易了。 不过对于Jason来说,他成功做到了对FastCoDesign,Next Web,Mic等产品的设计。

    点击访问Jason Yuan 的作品集

    在创建交互设计作品集时,就像在日常工作中一样,需要深思熟虑以及具有战略性。 花一些时间来解释你的流程,让你的读者了解你工作的每一个步骤,并说明它是如何产生影响的,这样你的交互设计作品集就能被记住了。

    ————————————

    展开全文
  • 史上最完整交互设计基本原则

    千次阅读 2017-04-06 18:14:48
    摘要:如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题,“好的产品设计一定是建立在对用户需求的深刻理解上” 这句话被许多设计师视为设计的天条;至于在设计中如何发现并深刻理解用户的需求,并...

    via: http://36kr.com/p/5042087.html

    摘要:如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题,“好的产品设计一定是建立在对用户需求的深刻理解上” 这句话被许多设计师视为设计的天条;至于在设计中如何发现并深刻理解用户的需求,并由此设计出具有优秀用户体验的产品呢?这篇翻译自国外的交互设计基本原则,是目前为止最完整的一篇,推荐收藏。本文由人人都是产品经理社区 作者 @ 法海(微信公众号:uxd_design)原创发布。

    下面的原则对于有效的用户界面的设计和实现都是最基本的,不管是针对传统的图形用户界面还是针对任意的可联网的智能电子设备都是有用的。

    有效的用户界面是视觉明显的并且宽容的,会带给用户一种控制感。用户能很快明白他们可以做的事,知道如何实现他们的目标,并且可以不受打扰的完成他们的工作;有效的界面不会让用户知道系统的内部是怎么运转的,用户的工作被仔细连续不断的保存下来,并且可以允许用户在任何时间重做他们的工作;有效的应用和服务自己做大量的幕后工作,只让用户做少量的事。

    我喜爱苹果公司及它的产品,但它并不完美

    在这篇文章里我用了很多的苹果公司产品的例子,大多是反面的例子。苹果公司在交互设计领域已经做出了很多的革新,我希望他们继续下去。但是他们也会犯错误,虽然没有其他的产品错误多,但是因为我频繁使用苹果的产品,导致一直看到那些错误。在写这篇文章的时候我用了好多的苹果产品,从 iMac 到 iPad,因此我很容易立即就能找到那些反面的例子。

    但是不要因为这篇文章就认为我对苹果怀恨在心。事实上在 1978年,在被乔布斯雇佣后我设计了苹果的第一个人机界面。之后超过 14年 我一直在这个公司工作,新产品发布后我会第一时间买几乎所有的苹果产品,并且投资了很多的苹果公司的股票。我喜欢苹果,支持苹果,但同时希望它变得更好。

        

    美学:

    原则:美术设计应该留给那些受过正规训练的有足够技术能力的图形或视觉设计师

    原则:设计潮流应该先考虑可用性

    从衣服到汽车,出于商业的目的为了卖出更多的产品,公司会人为地推出新设计来使旧产品过时。但是新的设计潮流不应该对产品的可用性不利。

    原则:像测试交互设计一样也要对视觉设计进行测试

    在美学风格变化之后进行用户测试,要确保产品的可学性,用户的满意度和工作效率等会提高或至少不会降低。如果不是的话,新变化的美学风格所造成的问题需要重新考虑。

    原则(译者补充):保持一致性

    一致性也是非常重要的,不一致的设计不但会让用户迷惑,而且会让他们觉得设计很丑。一致性包括很多内容:

    1. 与平台设计语言的一致,比如 iOS7+ 系统都变得扁平了,如果某个应用仍然是十分拟物的,单独看可能会不错,但如果与其他的应用比较用户可能就会觉得这个设计很丑;
    2. 自身版本更新时前后一致,不要突然大幅度变化设计风格让用户难以接受;
    3. 应用的当前版本内部各个设计也要一致,比如图标风格一致,颜色一致,不要随便选择按钮的颜色,圆角的角度

         

    预知需求:

    原则:在用户达成目标的每一步都把所有必要的信息和工具带给用户

    不管是软件还是硬件都要尽力去预知用户的需求。不要期待用户离开当前的页面去寻找他所需要的信息。所需的信息和工具必须放在合适的位置并且要明显可见。

    预知要求设计师对于用户和用户的目标有一个很深的理解,它也请求有效的可用性测试来保证达成了目标:如果所需的工具和信息已经在屏幕上了,但是用户却不能发现他,可能预知地不是很准确。

    设计师没能预知用户的需求所带来的损失经常是很快并且长久的,特别是如果你还没有忠实用户,对于大众服务类网站或应用,这些用户可能就不会再重新使用你的产品了。甚至是如果你已经有了一些忠实用户,但是你也很难将他们转为为忠实的付费客户,这时往往是你的竞争对手超越你的机会。

         

    用户自主:

    原则:不管是硬件环境还是软件环境都应该属于用户,但是这不是说用户自主控制就意味着我们要放任这个规则

    给我们的用户一些 “呼吸” 的空间(自由)。用户可以快速学习并且掌握我们的产品。然而,有时候人们在没有边界的自由中也会感到不自由,掌握好这个度。一个小孩子被放在一个小的空间中或者放在一个特别大的仓库中他都会感到不舒服甚至哭。我们成年人也一样,在一个既不会受限也不会太放任的环境中会感到更舒适,这个环境可以留给人们探索的空间但是没有危险。

    原则:让人们自主做出决定,尽管有些用户没有好的审美或者行为并不高效

    用户自主意味着用户来决定他们使用键盘的哪个按键,他们把他们的电脑桌面弄成什么样子(尽管可能会很丑),或者他们用哪个 APP。当开发者从用户的手中带走控制权时,用户会感到挫败和生气。

    原则:一步步实践来提供给用户恰当的控制

    留给用户自主控制并不意味着设计师要放任所有的控制,相反的,设计师必须采用有必要的控制。“用户不应该被给一把枪来自杀”。目前,很多设计师们不但采用了过多的控制,而且在这些过程中犯了很多人机交互的基本错误,比如限制人们阅读普通人眼难以阅读的文字大小和字体。他们甚至让用户用 “肥胖的” 手指定位到像素级别的文本输入框中,却不用必要的箭头按键,仅仅是因为设计师觉得好看。这些都损失了易用性。

    设计师们设定一个武断的时间长度和移动距离来判断一个用户是否故意点击一个链接,但是用户很可能就只是在上下滑动的过程中想暂停一下不小心就触发了那个链接(译者对移动端 medium 的链接已经讨厌死了)。设计师没有提供用户改变那个触发门槛的方式,因此很多用户发现他们每天很多次很多次触发了他们并不想要打开的链接。这就是应用不负责任控制的例子。我们 30年 前发现用户使用滑块所需的努力相当于需要鼠标两次点击所需要的努力。触摸屏的用户对于链接的处理也需要如此。

         

    每次完美的链接触发机制

    在思考如何解决像偶然的链接触发问题的时候,我们必须考虑用户偶然触发链接和用户有意触发链接的区别。

    当我们考虑后这俩者的区别是显而易见的:当我看那个链接时我是下意识想打开那个链接的,当我不看那个链接时那么我就是偶然触发的那个链接。打开设备的摄像头或者使用内置的专用眼动追踪仪去查看用户的眼睛轨迹。如果用户长时间恰好在看那个链接,那么就是用户想要打开那个链接;相反,如果用户没有看那个链接,他就是不小心触碰到了那个链接。当你已经能决定用户是不是有意识的触碰链接了,这个问题 就很好解决了。如果用户不小心触碰链接,不理睬那个事件就可以了。

    为了节省电量,采用这个方法的时候只在用户按压链接的时候打开摄像机或者内置眼动仪。这个技术和算法可能需要对时间进行微调,但是一旦成功就是相当精确地。

    这个方法可能已经被发明了,它叫做:“用眼动追踪来减少偶然的链接唤起错误”。我在这里将它公之于众。

    原则:设备状态让用户可知

    用户自主需要让用户有控制权,这就需要让用户清楚地知道有效的设备状态信息,比如电量,网络情况等。状态机制为用户响应产品使用过程中状况的改变提供了必要的信息。

    原则:让状态信息保持及时更新并且容易看到

    用户不应该去寻找那些状态信息。而应该如此:他们应该能够轻易看到他们的工作状况并且能够收集到最重要的状态信息。

    原则:确保状态信息是精确的

    状态信息不但应该及时更新,更应该是准确无误的。截止目前,当一个用户更新 iPhone 或者 iPad 的系统时,一个进度指示条将会出现告知完成更新过程大概会用 5 分钟。但是实际上,它可能会花费 1 个多小时(新的系统可能 5 分钟确实就弄好了,但是其他的很多内容信息必须被重新加载才能使用)。用户,被欺骗了,他不知道设备什么时候可以正常使用,没有自主控制感。

          

    颜色:

    原则:在用户界面设计中你想通过颜色传达信息时,你应该也要使用第二个线索来给那些不能准确看清楚颜色的用户传达清楚信息。

    目前大多数人没有颜色问题,然而,大约 10%的男性用户,少于 1%的女性用户,有不同程度的色盲。其中很多男性用户对细微的颜色差别不是很敏感。

    原则:测试一下你的网站去看一看色盲用户眼中你的网站是什么样子

    通过谷歌搜索一些这样的模拟工具。比如,对于网站,你可以尝试 http://enably.com/chrometric/

    对于图片,你可以尝试这个:http://www.color-blindness.com/coblis-color-blindness-simulator/

    原则:不要因为不是每个用户都能看清楚每个颜色而避免在界面中使用颜色

    对于我们设计师,颜色是一个重要的交流工具。对于色盲用户拿走他们不能看到的颜色无异于完全没有视力的人们看不清楚任何东西。即使对于色盲用户颜色也是一个重要的线索。

    原则:在用户界面中不要因为一时的时尚潮流完全不用颜色或者使用大量的颜色线索

    从服装到汽车领域人为地制造一些时尚来使产品过时从而获得利润是一个有效的方式,然而时尚不应该也不需要让用户使用软件时有所不便。在软件的美学改变后进行用户测试,标记那些新的设计变化。确保整个软件的可学性,满意度并且确保整个产品已经提高了那些指标或者至少保持不变。如果不是的话,新增加的美学风格正在引起一些需要重新被考虑的问题。

          

    一致性:

    下面所说的四个一致性原则,在产品的更新过程中提供给交互设计师一些参考。具有一致性的产品对于用户来说是重要的。

    (1)一致性的不同等级

    原则:按照等级的不同维持严格的一致性

    下面的清单是根据苛求最少的连续性到苛求最多的连续性排序的(很多人们认为下面的一致性顺序应该按照相反的顺序排序,那真的才会导致用户对看起来熟悉,但是交互完全不同的界面迷惑):

    1、平台一致性和内部产品的一致性:

    让产品与所在的平台规范尽量保持一致。在你公司的不同产品或服务之间维持一个普遍的样子或感觉。传播你的品牌可以使你的其他产品更快更容易被用户接受。

    2、系列产品的一致性:比如微软的 office

    3、应用的欢迎屏、首页等设计元素的总体的视觉一致性:

    视觉设计师应该建立一个有目的的经过思考的视觉语言,并通过可用性测试。用户的行为应该能在不同的版本的产品之间一致。

    4、小的可见的结构元素一致性,比如 icons,按钮,滚动条等

    这些元素的视觉设计应该需要被严格的控制。他们的位置虽然没有视觉设计重要,但依然需要认真考虑,如果标准化他们的位置是有意义的,那就这么做吧。(译者注:元素的位置应该遵守用户的习惯,建议看下面这篇文章:http://uxmovement.com/buttons/how-button-placement-standards-reinforce-user-habits/)

    5、不可见的产品元素的一致性:

    比如 Word 的 “聪明的小左边框”(译者注:不知道这里指的什么,原文是:clever little left border)有各种各样的神奇的属性。如果你曾经在某个地方发现了他,他可能在你的 Word 中又没有了。如果你真的找不到了,你可能再也不确定她是不是在那里。这真的就是不可见的元素的错误,如果你坚持用他们,务必要保证他们的一致性。

    苹果公司也很明显地认为不可见的元素是一个好主意,然后开始模仿微软,到处在它的产品中增加不可见的控制,从滚动条到按钮。在 mac 上这种情况很糟糕,在 2010年 之前,一个用户知道怎么在电脑上使用那些最基本的功能唯一的方式就是通过谷歌搜索(了解更多,看之后的 “可见性”)

    一些元素,严格的说,明显没有表现出用户可以控制他们,因此用户,即使离开他们的设备后,可能也不会发现他们可以被操控。如果你坚持要隐藏一些控制,一定要保证对于用户来说那些规则是简单的,比如:“你能通过点击和拖动当前窗口的边缘来缩放窗口”,不应该是:“你能通过点击和拖动有时候是一个物体来实现他们,有时候又是另外一个物体”。因此尝试观察一些用户看他们是怎么做的。

    物体是传达信息的,而不是用来产生信息的,很少应该保持不可见。苹果公司在 mac 上让用户只有把鼠标放到特定的地方才能让滚动条出现,这已经违反了这些原则。

    6、用户行为的响应

    改变你的用户已经习惯的某个行为的系统响应是你对你的用户做的最差劲的事情之一。快捷键必须维持他们的意义。一个用户已经习得的手势动作必须被系统以标准的方式响应。比如说如果某一个把用户带到下一个页面的按钮 30年 来一直是放在右下角,你就不要突然把他移到右上角,除非你有足够的理由。请求用户忘记已经学会了的动作重新学习新的动作会令用户及其沮丧。用户甚至可能不知道在发生什么从而猜想他的硬件或者软件发生了错误。

    如果你想吸引新的用户使用你的产品,你应该设计你的系统以用户熟悉的方式响应用户的命令。比如,允许他们重新用他们已经学会的相同的快捷键。

    案例研究:苹果的 “Command” 修饰键

    很多年前苹果最终给 Windows 用户一个简单地方式来使用 “Control” 键,而不是 “command” 键。对于键盘的快捷键,新使用 Mac 的 Windows 用户有很大的困难去放弃重新学习如此根深蒂固的习惯。当用户在家里或办公室里必须在俩种不同的操作系统之间转换,他们必须每天学习使用俩种不同的键盘快捷键,可想而知他们会经常犯错误或思考到底按哪个修饰键,而我们说不要让用户思考。在使用俩种不同的操作系统间的用户会面临着很大的困难由于缺失转换的才能,而这一切在开始时都是完全没有必要的。

    (2)不一致性

    原则:就像当元素行为一样时视觉一致一样当元素行为不同时保持视觉不一致也是极其重要的

    让那些行为不同的元素看起来也要不同。比如,一个垃圾桶应该是用户可以把文件放进去然后又可以拿出来。如果你想要一个功能只允许用户删除文件而不能恢复,这是可以的。但是要保证它看起来不是一个垃圾桶,你可以让他是一个焚化炉或者碎纸机甚至其他东西。

    让已经变化的页面看起来也变化。如果用户遇到一个已经更新的网站页面或者 APP,他们知道四处看看找出哪里有不同,如果他们找不到不同,他们会尝试像之前使用的方式去使用你的产品,但那可能会失效。

    (3)连续性

    原则:经过一段时间,追求连续性而不是一致性

    如果你们想出一个你们产品完全重新变化的区域或者甚至一个完全新的产品,让用户一眼就能知道大的变化已经发生了是重要的。否则,他们将会无视那些变化像往常一样使用你的产品但是产品却不正常工作。“不变性” 是指你的下一版本的产品和你的上一个版本是完全一样的,明显这样不合适,但 “一致性” 允许在产品的版本更新中不断成长进化。我们的目标是连续性,就像有一根线把我们的不断更新的产品串联起来,引导我们的用户,而不是把我们绑在过去。

    (4)用户期待的一致性

    最重要的一致性是用户期待的一致性

    如果用户期待某些事以不同的方式运作,你会发现去改变这些期待时你无法取胜。如果你的方式没有明确的优点,那就按照你的用户期待的方式来吧。比如下面这个例子:

    案例研究:“The Xerox Star” 的拖动规则(译者注:“The Xerox Star” 是一款早期的电脑名字)

    1、被提议的规则:从一个地方(比如文件夹或硬盘)拖动一个文档图标到另一个地方将会移动文档

    容易学习,容易理解,合逻辑的。然而,也是很糟的。这个规则,公正的说,在大多数时间工作的很好,这甚至比我们目前为止所用的复杂的规则工作的更好。举个例子来说明这个规则:在你工作用的电脑上,如果你拖动一个文档到你的移动硬盘上,这将移动那个文档,而不是在你的移动硬盘上复制一份。如果你在家里通过移动硬盘对那个文档做出一点改变,当你明天早上把那个文档再放到你的工作用的电脑上时,这时候你的工作用的电脑上的那个文档就只有新的已经变化的那个文档,旧的文档就没有了。因为这个规则是 移动 文档。

    这个规则一直工作的都非常好但是遇到下面这个情况时就很糟糕了:当你打印文档时,你将会把文档拖动到打印机的图标上来打印。这时文档被传输到打印机并且从原来的位置永远删除那个文档。于是你辛辛苦苦的工作就没有了。对于这个规则设计师和工程师讨论了俩周,最终设计师赢了,改为我们今天使用的规则:

    2、从一个地方拖动一个文档到另一个地方有时会移动它,有时会复制它。

    就像上面说的,拖动到移动硬盘上会移动它,拖动到打印机上会复制它。99%以上的用户可能都不能告诉你这个规则具体是什么,然而他们明白规则不用我们教他们。为什么?因为这是用户期待的一致性,他们期待做一些事时不会让他们的工作成果损失。

        

    默认:

    原则:输入框中字段的默认行为

    当用户激活一个输入框中的字段时(比如谷歌浏览器的网址输入框),当前的字段应该被自动全部选中,而且按 “Backspace 或 Delete” 键或者开始输入字符都会删除当前的选中。用户也可以点击字段的某个位置来取消选择所有,或者移动鼠标光标来把那些字段移到相应的位置。这个规则一直被沿用至今。(然而有时候很糟糕的编码会导致把文本拖动到不可预测的位置)

    原则:默认应该是智能的,被大多数人采用的

    不是每个东西都应该有一个默认。如果确实不知道应该采用哪个选项作为默认的选项,那么就考虑一下不要采用默认了。用户会花费宝贵的认知负担来找到默认设置项并且有大概 25%的情况用户会决定不使用默认选项。如果没有足够的理由提供默认项还不如让用户去选自己想要的选项。

    原则:用一个更有意义的术语来代替 “默认” 这个单词

    在一个给定的场景中用户经常不知道 “默认” 到底指的是什么?(当然他们肯定知道字面上的意思)用 “使用标准设置”,“自定义设置”,“储存初始设置” 或其他的更有意义的能描述会发生什么的术语来代替 “默认” 这个单词。进行小的用户测试来发现那个术语会不会让你的用户精确地预测你的软件将会做什么。

    原则:你的用词和视觉设计都必须传达出系统能恢复(复位)的范围

    要确保通过用户测试来看用户是否明白系统能恢复的范围或程度:恢复系统仅仅通过用户简单地注册几步还是他们将会花费几天的时间来给每个应用重新输入用户名密码登录进去。

    测试你的恢复选项来发现用户觉得点击按钮之后会导致什么结果。如果你做的是对用户来说是很方便的,但是用户觉得那会有潜在的破坏性的影响,他们就不会用那些默认选项。

    当设计选项卡的控件时,比如属性和优先级窗口,确保视觉设计能使复位按钮所影响的范围清晰。单独的选项卡片应该与周围的窗口视觉上明显隔离因此放在单独选项卡内部的按钮或者放在周围窗口的按钮应该能指示那个按钮将会影响是当前选项卡的还是所有选项卡的。设计师从来都不应该做出模糊不清的设计。(这一部分感觉翻译的不太好,建议大家看原文)

          

    可发现性:

    原则:任何隐藏复杂性的尝试都会增加复杂性

    功能性软件不需要看起来像一个拖拉机,他可以看起来像一辆保时捷。然而真的是这样吗?很明显不是,看起来像保时捷往往会使他缺失必要的轮子,刹车闸,或加速器。然而很多公司自上世界 90年 代后开始有目的的隐藏他们最基本的控制项,往往带给他们的用户严重的伤害。为什么他们这样做呢?因为他们认为给潜在的买家展现软件的表面简单要比给真实用户展现那一堆复杂性要更重要。

    由于利益驱动软件公司会隐藏复杂性因为它能带来短期的利益:大多数潜在的软件买家是根据售货员展示的几分钟软件 demo 来判断软件是不是容易学会的,而不是通过坐在那好长时间上手试验来判断。拿走滚动条,隐藏必要的按钮,这可能会增加短期利益,但是是短期的。

    案例研究:隐藏的 Mac 滚动条

    滚动条被用来指引信息,用户通过点击或拖动滚动条来通知软件他希望移动到文档或页面的某个位置。然而,经常性的,用户也会一撇滚动条仅仅是看他们在页面的哪个位置。用户会努力维持俩种水平上的位置感:第一:他们的位置恰好在可见页面的哪个部分;第二:他们在整个文档的哪个位置。用户为了让滚动条可见来知道在整个文档的哪个位置却被强迫把鼠标指针从他们的当前位置点移开却忘了在可见页面的哪个部分。

    让复杂的控制项隐藏比如隐藏滚动条也会让用户使用滚动条的速度慢下来:滚动条不可见时,他无法知道滚动条上的控制点在哪里,他必须尝试找出。首先他必须把指针放在滚动条的某个位置(步骤一),然后再往上或往下移动到控制点(步骤二)。根据菲茨定律就知道这很糟糕。让我们假定额外一步需要额外一秒,一个非常保守的估计,每人每天 10 次滚动,6 千 6 百万 Mac 的用户(截止原作者写的时候)=每天浪费 21 个人的生命。这仅仅是因为为了让商店中的产品看起来简单。

    原则:如果你选择隐藏复杂性,只在陈列室隐藏

    你从不需要决定是支持潜在的买家还是最终的用户。我们不是和固定的硬件打交道,而是和纯粹的软件或者软件驱动的硬件。一个设计师能容易得创造出一个系统完美的支持买家或者用户,只需要依据当前的需要转换软件的样子就可以了。比如,你可以为操作系统设计一个软件,将会在商店中展示一个简单地形式;而对于真实用户提供更必要的功能项,使他们更有技巧效率更高。

    做一个看起来简单地界面可能会帮助短期的销售,但是长期来看,他会导致你遭遇销售瓶椎,你的存在的消费者,不只会离开你,也会告送你潜在的买家离你越远越好。

    原则:软件中一个功能如果用户不能发现他,就表示没有这个功能

    并不是所有的买家都很天真,甚至是天真的买家有一天也会变。只有最坚持的的买家、用户才会在你的网站到处浏览查找你为他们隐藏的数据。大多数用户如果发现不了功能就很简单的转向你的竞争者,告诉你你的软件没有那个功能。

    案例研究:Mac 上的 Safari 浏览器

    我发现 Safari 并不支持对 PDF 文件另存为时我抛弃了 Safari 转向了火狐浏览器。2年 后,我再一次尝试 Safari,猜想苹果可能修订了这个 bug。但是仍然存在,但是我这次坚持了下来,花了 20 分钟谷歌了一下解决方法。我发现了什么?不要用另存为来保存 PDF 文件,而是:鼠标从窗口的顶部移开(通常这一般是文件操作工具的地方),移到窗口的底部(通常这一块什么也没有,除了存在的内容)。突然,一个灰色的背景条上出现了一个磁盘图标,点击那个图标,Safari 会保存你的 PDF 文件。

    原则:使用 “主动地发现” 来引导人们进入更高级的内容

    主动发现,你不需要等待用户去发现数据,代替的是,向他们提供。理想的情况下,你的系统意识到他们现在需要什么并且提供给他们。但是在大多数情况下,我们还远不能做到这些,一个妥协的方法是:

    1. 在用户需要数据之前提醒用户那个数据存在;
    2. 智能的间隔周期来提醒用户,而不是一遍又一遍的重复;
    3. 一旦用户已经发现了功能或数据就不要再去提及它;

    在开始的时候你展示的提示信息可能是这样的形式:“你知道……?”。如果你看到很大比例的用户关闭了你的那些提示,这反映了你正在过早的提示信息,给他们过于频繁的提示或者提示信息已经被用户知道了你还在告诉他们。当用户打开你的应用的时候不必要每次都要给出一个帮助信息。用户更可能会在必要的上下文环境中读那些信息

    案例研究:iPhone 上的 GroceryIQ APP

    GroceryIQ 能使用户扫描他们厨房中的食品的条形码或打上物品的关键字来提醒用户去杂货店买哪些东西。这个工具是有效的,快速的,设计适合的。这个工具没有刻意去隐藏复杂性。然而,用户如果需求扩大,比如多设备同步可以花几分钟去探索这个软件的更远一步的复杂性。GroceryIQ 也有这个功能不过需要探索。一个新的类似 APP 发布了也能使用户在不同的设备之间同步信息,比如,妻子新加了一个项目:一份牛奶,然后在几秒钟之后丈夫的购物列表里那个项目就会出现,于是很多人结果就抛弃了 GroceryIQ 转而去用那个新的 APP。这个例子哪里有趣呢?因为 GroceryIQ 比那个新的 APP 早有这个多设备同步的功能已经 5年 了,那很容易设置并且很可靠,也没有被有目的地隐藏,确实只是没有被直接显示,问题是那是在 “更多” 的子菜单中,而不是直接展示在手机的底部。

    一个主动发现的提醒,在 APP 被安装之后一些天提醒用户有那个功能,甚至是很长时间之后如果用户不经常用那个功能再给用户一些提示就可以有效的避免在 5年 后新 APP 发布后大量的消费者损失。

    原则:为了用户能成功的使用软件必要的对象应该时刻可进入

    对象应该要么可见要么在一个可见的对象里面(比如文件夹里的文档,菜单里面的菜单项),换句话说,应该时刻易进入。

    对于一个日常的软件系统例外也是有的,比如手机浏览器或阅读器:

    • 由于屏幕大小有限展示当前不需要的项目是不实际的
    • 为了防止用户偶然的唤起一个控制项,只要确保用户可以发现他们的存在就可以了。

    在手机设备上标准的广泛使用的操作系统会包含这些例外,只要用户能被给一个简单地明显的引导就行了。

    原则:对于不可见没有 “优雅的” 例外

    一些设计师,爱上了智能手机里面的干净的线条,认为在手机屏幕里使用同样干净的线条是好的。大错特错!隐藏功能性来创造出一个视觉上的简单是一个降低用户效率的方法,会给产品的竞争对手可乘之机。

    原则:即使在小的手机设备中存在例外 控制项也不应该在内容区域的中间

    智能手机中的控制项有时候被强迫放进内容区域中因为屏幕实在太小了。尽管这样,你也需要提供一个标准的唤起,比如在内容区域中点击一下,这将让隐藏的 icons 和按钮出现因此用户不需要到处找这些控制项。

    原则:用视觉的线框图传达你的手势用词

    包含一个展示手势如何使用的帮助页面是可以理解的。当用户第一次打开 APP 的时候展现那个页面并且清晰地告诉用户如何之后再次找到那个帮助页面。对于杂志和相似的类型的 APP,让帮助页面在第一次打开一本杂志的时候出现。

    史上最完整交互设计基本原则|推荐收藏

    原则:寻求平衡

    这不是 1980年,那时候大多数人都没有见过电脑,我们有必要让每件东西都保持高度可见。而现在你可以在设计中使用一些微妙的东西:不要在一个页面上每个单独的项目旁边都放一个信息的 icon,可以是用上像 Google+snapseed 的遮盖图层一样一次解释每个形状或手势:

    史上最完整交互设计基本原则|推荐收藏

    把遮盖层放在那里很难看清,但是开发者通过标签和箭头优雅地强调了他们的各个选项。你如何发现这种强调是不是必要的?你怎么发现用户是不是知道点击什么?

    看下面的那个原则:

    原则:通过用户测试看具不具有发现性

    为了发现你需要提供给用户什么信息并且确保你成功的传达出这些信息,你必须做贯穿整个项目的可用性测试。看用户是不是能找到,学会使用你期待你的用户执行任务时所需要的工具。如果他们不能找到,通过迭代设计知道他们可以找到。利用主动发现等方法确保你的用户能发现和使用你的产品所提供的功能。

    上面我所提到的那些错误在推向市场时都没有经过可用性测试,基于测试结果变更设计。

           

    用户效率:

    原则:看用户的生产效率,而不是软件的花费成本

    为了评判一套系统的效率,不只是要看机器的花费成本。人们花比机器更多的钱,同时增加机器的使用效率一定会导致增加人们的工作效率,反之亦然。举一个例子,强迫用户在不合理的按键间隔和功能的电话机上键入电话号码可能会节省代码量(节省开发软件的时间和花费),但是也会导致人们不能正确的输入电话号码,并且容易出现错误。单个用户浪费的时间可能就会抵消开发蹩脚软件节省的时间。容易出错的电话号码也会导致流失的销售,丢失的销售所带来的利润损失可能就开发出很多高质量的软件了。

    原则:让用户能不间断使用软件

    可以说到目前为止最高的花费仍然是劳工花费。任何雇员任何时间因为系统问题等待系统响应时,钱财就丢失了。

    原则:为了最大化一个公司的效率,你必须最大化每个人的效率,不仅仅是 IT 部门的效率

    大的公司趋向于把部门进行划分,每个部门只做自己的事,有时候从整体来看这并不总是有利的。信息技术部门经常掉入陷阱导致增加自己的开发效率和降低信息资源部门的花费,但是整体上这会导致公司的较低的生产率。设计师们必须花时间研究新的设计是不是能增加或者减少受影响的雇员的生产率,如果能增加的话,需要花费多少 IT 部门的投入。

    作为设计师应该和 HR 去查找受影响的雇员的平均每小时的花费,看新设计是不是整体上能提升公司的效益,要考虑新设计开发时所需的开发,设计代价,同时考虑新设计所能提升的公司效益,把俩者比较看哪个高一些。如果提升的效益高,那么可以说服公司采用新的设计。

    原则:在软件中提升效率的最大的突破是系统信息架构的变化,而不是界面的表面设计

    这个简单的真相解释了为什么对于软件项目中的人应该意识到把用户工作目标放在第一位是重要的,如果用户目标能被实现也需要软件开发人员和人机交互设计师的密切合作。

    看一看 iPad 和笔记本的不同吧,这不同与打开邮箱时具体按哪个键无关,关键是 iPad 根本就不需要按任何的按键。

    原则:错误信息应该有帮助

    错误信息应该被有思考的写出:

    1. 解释哪里出错了
    2. 告诉用户关于那个错误应该做什么
    3. 千万不要让错误信息由于系统故障被不合适的生成(比如出现乱码错误)

    “error-1264” 这条信息对于用户没有任何鸟用。甚至很少有错误信息能遵守上面的第一条,而你应该遵守上面三条。你们的测试小组应该能向你反馈哪里有错误信息没有遵守那些标准。

        

    可探索的界面:

    原则:给用户清楚标记的路径,并且让他们能够快速使用软件

    对于一个服务不要只给用户提供一条路径,但也保证能让他们顺利使用。这让新用户和就想以最快的方式让工作完成的用户来说是一个不费脑子的活动,仍然也能使想要探索软件的高级用户得到满足。

    原则:提供给用户预知线索

    稳固的视觉元素不仅能让用户快速导航,他们也扮演着一个独立的标志角色,给用户一种家的意识。在网站的每个页面上,固定的放置一个公司 logo,都能使用户到达主页,让用户感到安全。矛盾的是,如此的安全的线索能让用户不会轻易返回主页,因为他们知道主页就在那。

    原则:让动作可逆

    用户以各种各样的方式在导航中探索,有时候他们想知道如果他们点击潜在危险的动作会发生什么,有时候他们没有刻意发现,就只是偶然点了。通过让动作可逆,用户可以安心的探索界面不必担心发生危险。

    原则:给用户提供 “撤销”

    不支持撤销操作不可避免的结果是你必须给用户提供一大堆的对话框:“你真的想……,你确定吗?” 毫无疑问,这会让用户工作变慢。

    如果你不提供对话框,但又不提供撤销操作,这只会让用户的行为更慢。几年前的一个研究表明在危险的环境中人们比在安全的环境中犯更少的错误,但同时他们的工作效率极慢,他们总是小心的避免出错。这对生产率是一个极大地打击。

    我们通常会认为不提供撤销操作是因为开发工程师太懒了,但是有时候设计师们也有目的的这样做——不提供撤销操作。比如,一旦你把东西放到购物车里,一些电子商务网站让你很难的才能把你不想买的物品取出,他们认为这会增加购买率,但这被证明是愚蠢的策略:一个我们在 nngroup 做的电商研究表明,当网站让用户很容易的能从购物车取消不想买的物品时,像期待的那样,人们更愿意往购物车里面塞东西,反正很容易取啊。同时这些用户也会买更多的东西。

    原则:总是允许用户以一种方式出去

    用户不应该感到在迷宫中出不去,他们应该有一个清楚的路径出去,比如引导页面提供一个 “skip” 的按钮操作。

          

    向导和取消

    在向导中取消是特别重要的,让人们在任何时间可以离开,但是确保告诉他们能在之后重新找到向导。

    原则:让用户很容易沉浸到一个过程中

    一个清楚的,可见的工作流能让人们理解他们在哪里,他们要到哪里去,或者向前向后移动,这会鼓励用户坚持完成一个任务。考虑下面的一个例子,一个多步骤的支付过程。通过把每一步都清楚地标记在 Tab 上使导航可见将会让用户知道他们在整个过程的哪一步。点击一个更早的 Tab 应该允许用户跳到那一步修正错误或者仅仅改变他们的想法,比如,选择一个不同的收货地址。当你禁止用户这样做的时候,或者不保留用户的数据,用户可能会很失望并不会用你的软件。

        

    菲茨定律:

    原则:到达一个目标(通常指的是按钮)的时间与目标的大小、与目标的距离有一个函数关系

    为重要的功能安排一个大的按钮,可以让用户更快点击。为你不想要用户执行的功能安排一个较小的按钮。

    在你的系统的展示窗口里,侧边、底部、顶部、或者四个角上适当使用固定动作(“pinning actions”,比如 Windows 系统的开始菜单放在左下角),可以让点击的速度变快:Mac 系统里软件的菜单栏总在顶部。

    初看这条定律,似乎是非常明显的,然而在设计中设计师经常忽略这个定律。菲茨定律可以计算出 Mac 系统的下拉菜单使用的速度要比使用 Windows 系统的软件的下拉菜单速度快大约五倍(因为 Mac 系统下软件的菜单都放在显示屏幕顶部,Windows 系统的软件的菜单跟随软件的位置变化)这个已经被实验证明了。

    菲茨定律指出 Windows 的开始菜单展开后,最常使用的应用与左下角比较远,因此消耗时间长。菲茨定律也指出在任何屏幕里最快捷的操作目标总是在屏幕的四个角落里,因为他们 “无限延伸”,然而,至今为止,他们似乎很少被设计师注意到。

    原则:到达多个目标的时间之和是到达每个单个目标的所需时间的总和

    在尝试使用菲茨定律时,不只是要注意目标的距离和大小,也要注意完成一个任务时一共需要多少个点击目标。记住一共有俩类目标:

    1. 在屏幕里面的目标——按钮,菜单,滑块……
    2. 真实世界中的目标——键盘和上面的按键,鼠标……。所有的这些对于菲茨定律都适用。

    原则:无论是定点设备还是触控设备菲茨定律都适用

    菲茨定律不会对智能手机和平板电脑失效。菲茨,在 20 世界 40年 代提出了这个定律,当时他在飞机驾驶舱针对物理的控制按钮做设计,这与直接的触控界面更类似而不是和有鼠标的定点设备更类似。在触控设备中,在屏幕的四周和边缘放置按钮没什么效果,但是目标的大小和距离原则依然适用。

    原则:根据菲茨定律所得的设计依然需要可用性测试

    像人机交互领域的大多数法则一样,你必须还要做及时的可用性测试来证明菲茨定律对你的设计是有帮助的。

    更多关于菲茨定律的文章,可以看:http://www.asktog.com/columns/022DesignedToGiveFitts.html

          

    人机交互对象:

    人机交互对象不同于面向对象系统(有一些程序语言是面向对象的)中的对象,我们的对象包括文件夹,文档,按钮,菜单以及垃圾桶。用户所要面对的对象可能会也可能不会与面向对象程序中的对象相对应,俩者没有关系,实质上,早期的图形用户界面完全不是在面向对象系统上建立起来的。(译者猜测作者是怕学过面向对象程序的读者把当中的对象与交互设计中的对象混淆)

    原则:人机交互中的对象应该能被看到,听到,或感觉到

    能被看到的人机交互对象在图形用户界面中是非常常见的。能被其他感官比如听觉和触觉觉察到的对象不是那么的熟悉,也不必要被我们认知到。比如铃声是音频对象,但是我们思考他就只是把它当做铃声,不会把它当做更高水平的数据。

    原则:人机交互对象应该有一种标准的操控方式

    比如按钮是被点击的,滑块是被拖动的。

    原则:人机交互对象有一种标准的行为

    把一个文档拖到一个垃圾桶并不会删除它,只是把它储存到垃圾桶中了。用户可以恢复。选择 “清空垃圾桶” 才会真的删除那个文档。

    原则:人机交互对象应该能被理解,保持一致性,并且是稳固的。

    原则:当你希望用户以一种不同的方式与已有的标准对象交互时或交互后出现不同的结果那就使用一种新的不同的对象。

    如果拖动一个文档到你的删除文件的 icon 中将会立即永久删除它,就不要让那个 icon 对象看起来像一个垃圾桶。人们对之前遇到的对象有预知。不要让用户迷惑这样的预知是十分重要的。举个例子,如果你用一个垃圾桶的 icon,但是一旦用户立即把文档拖动到那里就删除了文档,他拓宽了垃圾桶的标准规则。标准规则是这样的:“拖动一个文档到垃圾桶里并不会删除文档。他只是把文件从原来的地方储存到垃圾桶里了。选择清空垃圾桶才会真正的删除那个文档”。而你拓宽了的垃圾桶规则是这样的:“拖动一个文档到垃圾桶里要么立即删除那个文档要么保留 6 个月之后删除” 这样做不仅让你的用户疑惑,而且对其他合理的使用垃圾桶的程序不利,因为用户对垃圾桶的预知已经变了。

         

    较少延迟:

    原则:无论什么时候,用多线程技术把系统延迟放到背景中

    延迟经常通过多线程技术对用户隐藏,把用户传输数据或者系统计算的过程放到背景中,以便让用户继续他们的工作。现代的网页浏览器都能预先抓取所需的数据,当用户完成当前任务准备到下一个页面的时候不需等待很长时间。

    原则:降低用户对延迟的感知

    1. 在 50 毫秒内对任何按钮的点击给用户视觉或听觉的反馈
    2. 避免用户对同一个对象的多次点击

    因为网络速度还不够快,在按钮没有反馈的时候人们经常重复的点击同一个按钮,造成事情变得更慢。

    原则:当用户面对延迟的时候让他们知道

    史上最完整交互设计基本原则|推荐收藏

          

    易学性:

    理想的情况下,产品应该没有学习曲线:用户第一次使用的时候能很快学会并且立即精通软件的操作,然而,在实际情况中,所有的应用和服务,无论设计的多么简单,都会显示一个学习曲线。

    原则:考虑易学性与可用性

    易学性与可用性是相关的,要决定哪个是最重要的,然后把焦点放在那上面。

    你如何决定易学性和可用性哪个更重要呢?你需要做的第一件事是定义使用频率:你的产品使用人群使用你的产品时是仅仅一次或者不频繁的,还是要经常使用它?如果是不频繁的使用,答案是明显的,易学性更重要一些。如果用户使用你的产品几乎每天都用,应该先考虑可用性更好一些。

    接下来,考虑买家是谁?如果使用产品的人也是做出购买决定的人,易学性可能会是一个更重要的因素导致他购买,但同时可用性会决定他会不会向其他人推荐你的产品。

    原则:避免只测试易学性

    大多数可用性测试是进行一些列的测试:你和你招募的志愿者固定的花费 20 分钟到一个小时,你最终知道用户开始用你的产品的学习曲线,但是你不知道长期的产品学习曲线,用户最终把你的产品掌握到什么程度你也不知道。

    如果你设计的一个应用是用户经常会使用的,就要改变一下可用性测试的方法:和 HR 在一起招募一些临时的志愿者,然后,让他们花费一到俩周去用你的产品,通过测试研究一下你的产品的总体的学习曲线是什么样子,以及最终的产品的工作效率。

           

    隐喻:

    原则:选择能使用户立即抓住概念模型细节的隐喻

    好的隐喻能在用户的大脑中把过去的真实世界的体验或之前的使用软件的体验与你的产品连接起来,能快速的并且精确地让用户形成一个你的系统能干什么不能干什么的意识。

    原则:通过唤起用户的认知(视力,声音,触摸,甚至他们的记忆等)来设计好的隐喻

    在软件中尽力使你的概念视觉明显。如果有困难,通过插图的形式。插图应该是简洁的并且有意义的。测试它是否有效,然后应用它。

    案例研究:苹果的超级卡片浏览器

    史上最完整交互设计基本原则|推荐收藏

    对于网页,有三层结构。每个网页上都有的公共部分叫做背景层;一个前景层:拥有与每个单独的卡片有关的元素;还有一个逻辑控制层,带有各种各样的按钮等元素。如果你不明白这个概念,你就不能使用这个东西。几乎没有人能明白这个概念除了一个图形设计师,Kristee Kreitman,画了一个分层的图片展示了这三层。当我们测试的时候,每个人立即明白了他。他的发明者用了 20 页的文字说明它,没有任何效果。一个图片完全搞定。

    原则:不必完全照抄真实世界的东西

    好的隐喻能使用户感到熟悉,但是通常也能增加新的功能。比如电子报刊可能与传统的报纸非常相似,但是增加超链接可以让用户点击自己更关注的文章里面去,用传统报纸是不可能的。不需要完全照抄真实世界的对象(拟物设计),那会限制软件的功能,通常完美的模仿经常是一个糟糕的设计。

    拟物设计的相反一面是抽象,我们现在叫他扁平化设计,自 2013年 开始慢慢流行,把有意义的 icons 和其他对象转化为无意义的抽象甚至是错误的符号。(比如,iPhone 上面的浏览器图标是一个指南针,只是通过很模糊的抽象与网页有关联。iPhone 事实上还有一个指南针,因此苹果设计师把那个指南针画成一个……另一个指南针。俩个指南针的 icons:一个能告诉你南北区分方向,另一个能告诉你如何写论文。设置的图标看起来像钟表内部的结构,清楚的传达了这是一个能让你看到并且影响到 iPhone 内部如何工作的 APP。这个抽象的表明了他真的是一个大的工业迷。

    原则:如果隐喻不会帮助你,就抛弃隐喻

    通常隐喻有利于你的用户理解软件,然而,有可能它也会起相反的效果。(译者注:记得之前锤子系统的京东图标是一个纸箱子,灰色的,第一张图,用户一眼一看根本就无法第一时间找到,因为与原红色的京东图标差距很大,虽然很漂亮,但是实用性不好。之后他们把图标改了,如第二张图,这样效果好多了)

    史上最完整交互设计基本原则|推荐收藏

        

    保存用户的工作:

    原则:确保用户从不会丢失他们的工作

    这个原则很重要。用户不应该由于一些错误而丢失他们未保存的工作,除了不可避免的原因,比如突然系统没电了(译者注:其实软件完全可以检测电量没电时提醒用户注意信息保存)。我们已经经常成为数据丢失的罪犯甚至我们自己都没有注意到,因此考虑到尽可能多的情况:

    你进入你们那的一家商店,在做出选择后,你被让填完一个四页的表格。然后一个绅士进来了,看了看那个表格,然后盯到第三页的你写的电话号码的位置,“对不起”,他说 “看这里,看你怎么用电话号码的格式的,这不对啊?” 当你点头,他继续说,“我们不期待你那样做。” 然后,他重新拿起了一份四页的空表格让你重新写完。

    你可能从不会遇到过这样的情况,但我确实在互联网世界中遇到过类似的情况:有一次我被让填写一个紧急的联系信息,每次我填写完表格中的那八个输入框,总会有至少一个输入框显示输入错误,而这同时把所有的输入框都清空了。同时我并不知道网站到底需要什么信息,我尝试了 20 分钟后放弃了,我确信很多人也会像我一样放弃的。

    上面所说的那种情况只是冰山一角,普遍存在的很多网站和应用对于用户的辛苦工作一直保持傲慢的态度,并没有停下来的趋势。传统网站和应用经常崩溃还总是以系统崩溃为由。目前桌面电脑系统已经很稳定了,上面的很多软件还不支持自动保存功能真的很难让人接受。

         

    可读性:

    原则:易读的文本必须要有高的对比度

    最好把黑色文本放到白色的背景上,避免放到灰色背景

    原则:用上足够大的字体保证可读性

    你需要让你们的市场部门告诉你你们的顾客大体的显示器大小。然后和你们的图形设计师以及工程师合作来确保字体在那显示屏上会显示合适的大小。这不需要一个字体大小适配所有显示器,比如,CSS 可以根据显示屏的大小来找到合适的字体大小。

    原则:与标签比起来为你想要展示的数据用大的字符

    比如,标签 “用户名”,能被显示的较小一些。大多数用户会知道那几个字就是指 “用户名”,甚至是对于新用户,基于表格的上下文,会很容易猜测那指的就是 “用户名”。然而用户真正输入的用户名比如 “张三” 应该保证清晰可读。这个对于数字来说更重要,人类语言,是高度过剩的,即使不给展示足够的信息,也大体能猜到大致的意思,然而对于数字就不一样,错一个字符就全错了,因此人们需要理解阅读每个单独的字符的意思。

    原则:菜单和按钮应该首先有关键字,形成独一无二的形式

    有经验的用户只读菜单项的部分文字来区分不同的菜单项。更有经验的专家用户甚至只看那些标签的外部的轮廓来区分不同,他们根本不读任何东西。

    原则:针对你的年龄大的目标用户进行测试

    年龄超过 45 岁的用户可能会有一些视力上的问题,比如老花眼或其他的,不要信任你自己的眼睛来确定字体的大小,你不能够代表他们。

    原则:字体的漂亮与否与可读性经常有相反的关系

    特别的,抗锯齿会柔化字体的边缘,给电子屏幕上的字一个更流利的外表。可是问题是人类的视觉系统会对尖锐的边缘更敏感。因此,对于小的字号,一个抗锯齿的字体,经常看起来更具有吸引力,但是理解起来会有困难。现在有抗锯齿技术能特定地增大边缘的锐利程度。在使用特殊的字体时可以考虑进行阅读速度的测试。

           

    简化:

    原则:平衡易于使用和设置

    作为一个设计师,我们需要努力简化用户的生活。这经常需要做出一个对于产品更容易安装设置和产品更容易使用之间的微妙平衡。

    考虑一下浏览器的自动填充数据:用户可以选择浏览器保存账户名和密码。但是一旦任何东西变化了,浏览器就多了一条记录,用户就需要再次选择。另外,浏览器经常还不能正常工作,不会响应或者把数据填在了错误的地方。

    苹果已经简化了设置过程,它能让用户把 Safari 的自动填充数据和用户的联系人以及他的地址联系起来,然而,Safari 自动填充表单的能力依然是非常有限的,很大程度上是因为 HTML 并没有标准的标签,定位等表单特性。

    我用了一个更技术复杂的解决方法:有一个应用叫做 Keyboard Maestro,能根据使用场景寻找特定的组合按键。当它发现我已经设置好了时,它自动的把我输入的文字替换成我之前储存的与之对应的文字。设置过程是有些复杂,但是当我现在输入一个表单时,我能用 “bbbb” 代替我的名字或地址等其他东西。这会花费大概 30 秒填充一个表单,比自动填充表单的功能花费的时间略长,但是这个方法每次为一个单独的表单项有效,这不但节省时间,而且还有效,不会让我迷惑。

    原则:避免只是 “视觉简单”

    在这个世纪的早期,苹果公司太过于关注于为潜在的买家设计视觉的简单的东西,但这些已经严重降低了生产的效率。他们认为这样做有一个好的原因:他们想要给潜在的买家生产看起来漂亮的,简单地东西。这是一个极好的目标,但是真正的简约性是通过简化事情,而不是隐藏复杂性。

    让你的展示产品看起来简单是没问题的,但是,你想要隐藏复杂性的目的是担心吓跑买家,在展示的时候这样做就可以了,而不是在家里或工作的地方,因为消费者要在那里完成任务。我在 1978年 开始进入苹果公司后推广这种特别的销售模式,因此产品将会在家里和展览室里看起来不同,计算机允许这样做,人们买回家的时候就会忘得,只要他们能很好地完成工作。

    原则:用渐进的启示让学习曲线变平

    当用户学习的时候通过隐藏高级的功能让软件简单一些是合适的,在用户需要他们并且知道如何处理的时候再把那些功能逐渐展示给用户。这不同于上面提到的只是视觉的简单。渐进的启示能让用户更快的学习如何使用软件。

    原则:不要通过去除必要的功能来简化软件

    苹果在它的移动设备发布之后犯了这个错误,2014年 的时候 mac 上,你能设置一个日历事件并设置提醒在之前 90 分钟提醒你。在 iPad 上,你能设置在 1 个小时或 2 个小时提醒你,但是不是 90 分钟。如果一个用户需要一个在事件之前 90 分钟提醒你,就需要另外麻烦的方法。苹果简化了见面,不让用户设置任意的时间,但这不能满足一些场景的需求。

    同样的,苹果对用户查找照片有一个非常简单地界面:你浏览你所有的照片,一次只能一张,直到你发现你正在寻找的照片。苹果没有让你通过标题,备注,关键字来过滤,搜索照片,你必须小心的一张一张查找。用户会指责那界面太简单了:如果你想要在 20000 个照片里找一张照片,你就一张一张找吧,会累死你。你不需要学会搜索,不需要记得那标题名字,就需要 20 分钟来花时间滚动屏幕就可以了。

    幸运的是,一段时间后,有一些应用如 “Photo Shack HD” 能让你通过搜索一些条件来更容易的找到照片。确实搜索也算是一个高级功能了,但是几乎所有的用户都知道如何搜索。

          

    状态:

    原则:我们可以利用那些能帮助改善用户体验的数据

    我们的系统应该知道:这是不是用户第一次使用?当用户离开的时候他上次是在什么位置?用户现在在哪里在干什么?……以及其他的细节。只要简单的知道我们的用户在哪里,我们就能好好利用这个信息帮助他们更快完成任务。

    一个好的例子是亚马逊,他们会根据我们的浏览历史给我们做出推荐,他们知道我们在过去重复购买过什么东西等等。

    原则:当用户注销后用户的状态信息应该加密后储存在服务器上

    用户应该能够在办公室退出,回家,然后在从他们退出的地方在家里继续他们的操作。遵循保存用户工作的原则,无论他们上次进行到哪里下次继续操作时应该能够回到那个位置。

    对于医生这样的私人服务,“Physicians on Line”,做了一个极好的工作。医生会 95%的情况做一个复杂的工作,然后退出软件,几周后又从另一个地方重新登录,程序会问他们是否从他们之前工作的地方继续。

    原则:把你从用户那得到并保存的数据信息明确的告诉用户

    状态数据不能说好也不能说坏,但是他可以用来做坏事也可以用来做好事。在你的私有政策中你应该陈述清楚你将保存信息,如何使用它。任何从用户那得到的数据,应该被加密并安全保管。

          

    可见导航:

    原则:让导航可见

    大多数用户不会尽力去记住你的网站的站点地图,如果你们期待他们这样做他们可能会很累或者在网站中迷失。

    万维网联盟,它的所有的屏幕和按钮设计都很完美,但是,却没有可见的导航。事实上,你可以看到你具体在哪个页面上,但是你无法看到其他的页面内容。一个用户到达我们的网站上,我们必须小心的安排导航确保导航是清楚的自然地。

    原则:限制页面数量

    在设计复杂的应用时,努力设计出最小数量的页面,每个页面表示一个独立的用户将要完成的任务。当用户执行一个子任务时,设计一个比全屏幕小的覆盖层,因此用户仍然可以看到变黑的主任务的屏幕(译者注:比如手机支付宝输入密码时并不是在新的页面上)。因此用户并不需要记住当前在哪里。

    展开全文
  • 交互设计是什么?

    千次阅读 2016-11-14 14:49:28
    一句话概括你理解的交互设计是什么?不同人对于“交互设计”的理解是不一样的。正如抛出这个问题的时候描述的那样,答案没有标准。 我的理解是:信息的输入,输出过程。作为一个新人,大胆写出自己的理解,一方面是...

    一句话概括你理解的交互设计是什么?不同人对于“交互设计”的理解是不一样的。正如抛出这个问题的时候描述的那样,答案没有标准。
    我的理解是:信息的输入,输出过程。

    作为一个新人,大胆写出自己的理解,一方面是为了整理之前的一些学习心得,另一方面也希望借此能和更多的前辈学习交流。

    1、我的理解:
    ▪我自己一句话概括交互设计是什么:交互设计是对于用户产品使用行为的优化设计。

    ▪解读:交互设计关注的是“用户场景”和“用户心理”,设计的对象是“用户行为”,达成的目标是“能用、易用、想用”。

    ▪基础阶段(能用,易用):
    “用户场景”包括“什么人who,什么时间when,什么地方where,完成什么事情what,怎么完成这个事情how”进一步可能还需要弄明白“为什么需要完成这个事情why”
    在“场景”中“什么人who,什么时间when,什么地方where,完成什么事情what”是做交互的前提和背景知识,需要优先回答,可以通过用户研究获得。(我个人在画交互稿之前,会把这些背景都列在交互稿前面,这样有两个好处:A、不会走偏;B、更容易关注到相应场景下的的交互细节)
    在“场景”中“怎么完成这个事情how”是交互设计本质上需要去设计的落脚点。具体来说包括:用户行为流程(流程图等),行为方式(交互方式等),行为反馈(交互动效等)等几个方面。其中流程是基础,交互设计师需要梳理用户操作行为流程,以满足用户便捷、高效甚至是生动有趣的去完成一个行为目标what。
    ▪进阶阶段(想用):
    在基础阶段,完成的是对于“能用,易用”的设计目标,可以保证用户在完成自己的“行为任务”过程中的“流畅、高效、不受干扰”。能够实现上述目标,我个人觉得这个应用或者网站就可以“上线”了。
    那怎么让用户达到“想用”这个层次呢?需要进一步关注的点还包括“用户心理”。用户体验的本质,我个人觉得就是对于“人”的洞察和针对性“优化设计”,这里的“人”更多的是指用户的心理和感知体验。
    “用户心理”,从宏观上对应着“用户需求”,微观上对应着“心理模型”。
    宏观上的“用户需求”是产品设计的前提,只有满足了用户一定需求的产品才会被用户接受以致达到“想用”的层次。(举例:日程应用满足的是规划和提醒活动安排的用户需求,IM应用满足了与人沟通的用户需求等等)
    微观上的”心理模型”是交互设计的出发点和终点,了解了用户的“心理模型”,便于更好的理解用户目标、优化行为流程、提升用户体验,达到“想用”的设计目标。(每个用户心中都有一个自己理解的系统运行模型,设计师有自己的“设计模型”,交互设计师需要做的是将减少“设计模型”和“用户模型”之间的差距)
    ▪深入阶段:
    个人觉得如果能完成“基础和进阶阶段”的相关要求,已经是一个非常棒的交互设计师了。如何让自己成为“专家级”的交互设计师,“深入阶段”主要解决的还是基础阶段需要回答的一个问题“为什么需要完成这个事情why”,能够很准确的回答用户的这个问题,是产品设计最起点,也是最终点的问题。
    另一方面是关注“产品目标”,这里的产品目标除“用户目标”之外还包括“商业目标”等,交互设计师关注“用户”是根本和基础,“用户价值”也是产品的基石。但一款好的产品还有很多方面需要去推动和维护,交互设计师需要了解“产品战略”、“业务逻辑”、“运营策略”、“开发成本”等等和“用户价值”相辅相成,互相促进的关键点。
    以上是我个人对于“交互设计”的一些理解,肯定有不足之处,希望可以和行业前辈和同仁多多交流,并给予指正。
    2、权威理解:
    在总结了自己对于“交互设计”相关理解的基础之上,我也去收集了相关资料,一是为了验证自己的理解是否正确,二是为了更全面和深入的理解“交互设计”。
    ▪权威的定义:
    以下是目前能找到的最权威的“交互设计”的定义。对“交互设计”的定义来自于交互设计协会(IxDA):
    交互设计师以创造有用且实用的产品及服务为宗旨。以用户为中心作为设计的基本原理,交互设计的实际操作必须建立在对实际用户的了解之上:包括他们的目标、任务、体验、需求等等。以用户为中心的角度出发,同时努力平衡用户需求、商业发展目标和科技发展水平之间的关系,交互设计师为复杂的设计挑战提供解决方法,同时定义和发展新的交互产品和服务。
    ▪解读:
    设计对象是:产品或服务
    设计目标是:有用且实用
    基础原理是:以用户为中心
    前提条件是:了解用户(用户目标、任务、体验、需求等)
    相关要求是:平衡用户需求、商业发展目标和科技发展水平之间的关系
    最终落地是:为复杂的设计挑战提供解决方法,同时定义和发展新的交互产品和服务
    这6点,个人觉得还是比较空泛的,但作为“下定义”的范畴,也着实解释了“交互设计”。综合这个定义,回顾到我前面对于“交互设计”的个人解读,也着实有些欣慰,至少可以说明,我的理解在方向上是对的。
    ▪其他相关权威观点:
    交互设计是“为沟通和交互而设计”——马萨诸塞艺术与设计学院教授Jan Kubasiewicz
    交互设计“设计的对象是人的活动”——江南大学设计学院教授辛向阳

    展开全文
  •  这是一次内部分享,新部门的同学们希望我聊聊我过去从事的交互设计,做个了面对入门者等级的PPT,和各位简单聊了聊。发到微博上,也敦促自己对交互设计从业经历做个简单总结。——类似的文章,貌似自己在三年前也...

    转载请注明来处,关注我,请点击:http://weibo.com/heidixie

      这是一次内部分享,新部门的同学们希望我聊聊我过去从事的交互设计,做个了面对入门者等级的PPT,和各位简单聊了聊。发到微博上,也敦促自己对交互设计从业经历做个简单总结。——类似的文章,貌似自己在三年前也写过……

      一. 什么是交互设计

      要谈什么是交互设计,先要了解这几个概念。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      网页设计年代,大概是从2004年开始热起来了,等到我毕业的2006年,满大街都已经是电脑培训机构,记得当时北大青鸟的百日千才培训就在我每日下班必经的十字路口。

      网页设计年代重视的是特效,说白了就是特效背后的技术,君不见当时的网页是让人看得眼花缭乱啊,这里bling bling闪闪的,漂浮框乱跳的。然后就是套各种网页设计模版,做出很多复杂的类似于右边这种典型的政府网站出来。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      美工时代:

      网页设计时代,大批的“美工”涌现。显然人们有了更高的追求,光是bling bling的眼花缭乱的动画效果已经看厌了,网页也是需要装饰美化的。虽然网页设计论坛(www.68design.net)当时很火,但是网页设计师这个头衔仍然是一厢情愿的叫法。大多数时候,仍然是老板和客户嘴里的“美工”。

      美工时代重视的是:视觉效果。并且,原来对网页设计一窍不通的老板们纷纷成了资深的视觉鉴赏家。美工时代“美工”很痛苦——单纯靠视觉效果去评价作品好坏,太主观,太随意。于是他们通常会做N个版本,反复修改,直至美工崩溃或者老板崩溃。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      历史迈入了伟大的UI年代。

      大概是在2005年,我崇拜的网络名人从擅长鼠绘的小非变成了图标达人Rokey(时光倒流到2005年,我正在看这篇文章:灵感来源于生活-微软亚洲工程院移动设备组UI设计师张伟)。也自学了关于UI的若干知识,开始迷恋起PS像素级的奇妙世界。

      UI=User Interface. 已经将User即用户纳入界面设计考虑的重要要素。但是对于精致、质感的无极限的追求,依然会让人顾此失彼,忘记了从用户的视角去审视一个UI的作品。于是,经常会看到虽然很精致,但是很难用的软件界面。

      用户看到的部份,无可挑剔。但是实际上,使用的感受并不好。而感受部份,可以从几个角度去阐释:

      ● 他们知道不知道这个是什么东西?他们感觉到迷惑吗?

      ● 他们是否清楚能够通过此物做什么?

      ● 是否清楚如何做到?

      ● 当他们有兴趣去尝试时,他们知道如何开始吗?

      ● 当他们开始后,知道如何进行下一步吗?

      ● 当不想要使用时,能够快速明白如何退出吗?

      ● 当他们退出后,下次来用,是否需要重新去学习掌握如何操作?

      ● 每一步操作时,他们心理会感觉到愉悦还是枯燥乏味?

      当然,我们崇尚软件操作过程中的效率,但是若用户感觉到愉悦,也许就不会觉得效率太低,其实,效率是个相对的说法。归根结底,这就是用户体验。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      UED时代——用户体验制胜

      我们不缺技术,我们不缺另人震撼的视觉,这些虽然过去是我们孜孜追求的东西,如今已经不足为奇。但是我们缺用户来用,我们缺用户持续来关注,我们缺用户体验。用户体验过去一直在产生影响,但是未能得到足够的重视。

      2007年,开始关注www.ucdchina.com. UED是套方法论,UCD是指导思想——User-centered Design. 不再是BCD-Boss-Centered Design.老板说了算,除非老板能够代表目标客户。这和市场营销学发展的历程有点像,从生产主导到市场主导。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      以下是我在用户体验设计?——是什么不是什么里用到的图片。WEB2.0后,用户的参与度越来越高,用户从被动的接受者变成了主笔,主编,摄影师,作家……他们是主角,使用中遇到问题,当然不可能靠网站的客服电话或帮助教程搞定,他们需要自助,所以,降低使用门槛,消除使用障碍,吸引他们重复使用,是每个网站致力的方向。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      以下是在用户体验设计答疑对话(半吊子和纯外行)一文中的配图。从广义来讲,一个网站的任何部门都是在为用户体验服务,从战略层的布局开始,用户体验已经开始。而狭义的用户体验设计,也就是UED部门做的事情,大部分是围绕到结构、框架以及表面层。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      UED部门的组织架构基本如下,解决用户易用(交互、文案),以及想用(视觉,交互)的问题。而用户研究是帮我们看清用户特征、洞察及挖掘用户需求,前端是伟大的实现者。

      文案对于用户体验的重要性经常被忽视,所以,文案撰写在UED团队是很稀缺的资源。目前据我了解,只有支付宝的UED团队有此配置,其他团队大部分是由产品经理担任此职。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      那么,交互设计到底是什么呢?

      我突然打了一下你,你肯定会有一定的反应。首先,你的表现会吃惊或者生气,你的吃惊或者生气的程度也会受我下手的轻重和方式影响。

      我呢,对你的反应会有一定的预期,下手的时候,没有期望你会突然哈哈大笑——这就是人与人之间的交互。

      人和物也是一样,我按下电视的开关键,我预期电视会打开,并且电视如期望发生运转。若我按下电视的开关键,突然电视成了静音,这就是非期望的交互行为。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      二. 为什么需要交互设计?

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      人可以经由训练,改变自己对于行为的反馈,比如,妈妈教育婴儿对于他人的礼物回报以“谢谢”和微笑,不要跟着陌生叔叔走等。如果你送一个小孩子礼物,他却对于大骂,你会觉得这个小子怎么这么没教养。

      机器、系统没有生命力,则需要被赋予对于各种行为的反馈机制。将用户的期望赋予给它,让它给出合理的反馈行为。

      然而不幸的是,我们的生活里,没有教养的产品实在太多太多……

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      上图左侧是一个杯子。我让现场的同学猜这个杯子的成本价,答案集中在10元左右。但是不幸的是,我为这个杯子花费了不下600元。原因正在于不良交互。

      杯子的把手处仅容两个手指塞入,当倒入热茶后,我端起此杯,把手上部是光滑无比的玻璃,而手指又被杯壁烫了一下,结果杯子倾斜,将热茶倒入了笔记本电脑键盘里——修键盘花费了580元。

      考虑到这里,设计杯子的设计师可以考虑把把手做成磨砂玻璃,增加卖点。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      上图是公司内部的门。基本上去个卫生间都要从此门经过,那么基本上每个员工每天进出此门不下6次吧。

      在场的同学声称每次都很紧张——为什么?怕被撞啊。你看不到对面有没有人,怕推门撞别人。自己也担心被人撞。所以,途径此门,瞳孔会不会由于紧张放大呢?还有,此门推也可拉也可,上面的“拉”字其实形同虚设。

      每天反复扇动,座位靠近此门的同学们夏天感觉到热,冬天感觉到冷。严重不低碳环保。

      原因也是不良交互设计。

      改进此门,可以设置透明的玻璃窗。或者用自动开启的推拉门代替。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      上面是一个电梯事件。要知道电梯是个最讲究习惯统一的地方。你要经常在不同的大楼用不同的电梯。若A电梯用这种按键,B电梯用那种按键,基本上你都要重新适应。然而这个适应你又无法持续,因为你到了C电梯,仍然要重新学习。所以电梯的按键设计,基本上要有行业标准的。

      然而华星路的创业大厦就是特立独行的。大多数电梯将开门、关门的按键放到了数字键的上部。而创业大厦则是将报警按键放到此处,开门关门则放到了数字键的最下方。

      我2008年到阿里巴巴上班(当时公司就在创业大厦),觉得这里的同事很不友好。好几次晚到一步,电梯门即将合上,我大步向前,边跑边叫等一下。里面的人面带笑容,靠门的MM伸手一按键,电梯门无情地关上了。

      这里的人都太不友好了——我一直怀抱如此恶念。直到有一次我上了电梯,电梯门即将关闭时,有几个迟到的同事飞奔过来,我二话不说,直接按开门键——叮呤呤,居然响起了铃声,有个声音问:什么事?我定睛一看,原来本以为是开门键的地方,是个报警的按键!原来如此!

      上图右下方我写了一个HISTORY, 历史。这是开个玩笑。假设某人暗恋已久的人向TA飞奔过来,希望电梯等一下,结果由于此不良设计,让这个暗恋的人心存纠结,错过美好姻缘。本来两个人结合有可能生出一个能够改变历史的天才,结果错失了。

      去年11月底我再去创业大厦,发现此电梯的故事还在继续——毕竟更换电梯成本太高了!而且在报警的按钮下方,被保安贴了一张醒目的即时贴,上面写着几个大字:这是报警用的!哈哈,看来保安也不堪忍受“假报警”。但是没用,贴着这个提示并不能有效阻止错误发生——用户首先是凭借习惯,其次才是认知和学习。

      原因正是不良交互设计。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      上图是今年去千岛湖outting拍的酒店里的门以及开关。酒店的门打开貌似是在教我们做肢体协调操,需要两个手同时按指示操作才能打开。试问门的安全性在于防止外面的人破门而入,不是为了防止屋内的人出门。不晓得这个过度设计有何作用。总之,妈妈不再敢把小孩子留在房间自己不带房卡出门。因为一个8岁以下的孩子,基本上不会开此门。

      右下角是大部份酒店都有的变态的灯。你不知道什么状态是开,什么状态是关。当然,由于酒店系统,某处灯光是由多个按键控制,无法用统一的交互解决。但是这是系统的问题,不是用户的问题。

      网页上的无教养的表现更多了……

      某日我看到一封邮件。我大概一瞄,我就看到几个关键词:免费,即可获得,10元,立即领取。

      (我和大部分用户一样,不会逐字去阅读什么什么介绍,基本上都是在抓关键词,要提高效率,请精简网页文案,强调文案重点)。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      但是,当我点击立即领取之后,直接给我一个添堵的页面:我没有资格。(文案的重要性!)

      我不知道是不是不登陆造成的,当时的设计应该考虑各种风险给出周全的解决方案。

      从数据上去看,也许会看到活动的转化率很低很低,也许活动方会认为是投放人群不对,页面不够吸引人,或者10元的力度不够等等。但是只要认真去找问题,也许会发现不良交互产生了严重影响。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      当然,我还搞不明白,像UIGARDEN这种盈利模式单一急需用户注册的网站为何会在注册页面和用户过不去。

      你链接不上GMAIL的服务器是你的不对,别说用户的EMAIL是无效的好不?

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      再看麦考林糟糕的经历,我不知道具体的数据如何,但是麦考林肯定有大量非商品质量问题,也非服务问题造成的退货。

      也是由于糟糕的交互设计引起的。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      我填写了收货地址后,上图是让我指定送货方式。麦考林给出了两个方式可选,我毫不犹豫选择了邮局方式——因为EMS太贵了嘛。谁知道这邮局还真的是邮局——5天后,我收到前台给我签收的一个包裹单,让我去邮局凭借身份证领取包裹。要知道,快递送货上门时代,我怎么可能去邮局领包裹?打电话给麦网,客服小姐说,因为我的收货地址不支持快递,所以只能让我选邮局。

      我这才知道是怎么回事。原来麦网为了解决用户选的配送方式不可用的问题(淘宝也经常存在这个问题),故作聪明使用了邮编去匹配配送方式的方法。我填写的邮编他们系统解读不支持快递,因此下个页面就不给我这个选项。

      邮编在今天已经是用户认为很不重要的字段,他们会不确认就随便写。另外,麦网要避免这个问题,也可以让顾客明白有哪些配送方式不可用且告诉原因而不是简单隐藏了事。

      所以,我们需要交互设计去做什么呢?

      1. 发现并解决这些问题

      上面的那些交互的问题,有些人根本发现不了。有些人发现了并不知道如何解决嗯。

      交互设计师需要发现并有一套方法去解决。

      2. 平衡——引入用户视角和方法。还是那个老图:

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      3. 控制成本,降低风险

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      交互的系统方法,让交互的输出物快速迭代呈现,并且低成本。不需要开发,不需要视觉,就能够将抽象的想法具像呈现原型,方便的且低成本的工作方法,方便项目组进行多种可能性的探索。

      在一轮轮的评审和讨论中让决策人和参与方根据项目的阶段逐步聚焦。最终输出一个最终版的原型。

      4. 术业有专攻

      当然,产品经理和视觉设计师若有可能多做一些,也可以不需要交互设计师。事实上,大多数创业型的公司,确实是没有交互设计师的。但这不意味着交互设计缺失,有可能是产品经理或者视觉承担了此阶段的工作。但是,产品经理在平衡商业和用户的点上,往往会更多站在老板或者KPI的角度,而视觉设计师感性大于理性,更加纠结于各种视觉细节,会不自觉在项目前期就引入太多视觉元素,让项目组在讨论中偏离核心方向。

      总归来说,他们的专攻方向是不一样的。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      三. 什么是交互设计

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      我个人认为交互设计师的工作围绕以上四件事情展开。入门的人,很容易将重点落到第二点:快速迭代呈现上,所以他们会直接问:你们都用什么工具?能给我们培训一下工具吗?

      其实工具真的不是重点,想法若有,发现白纸和笔都是最好的工具。所以进阶的交互设计师后来会明白这一点,他们会回归到需求本源:这是什么?为什么要做?我们要解决的是什么问题?非要如此解决吗?

      举个例子,若有需求方说:帮我设计一个花瓶。小A设计师就直接去做花瓶去了。小B多问了几句:多大的花瓶?什么材质的?什么时候要?预算是多少?小C则问:你要花瓶做什么的?是放鲜花还是做室内装饰用的?小A肯定做出了花瓶,但是未必是顾客想要的。小B也做了花瓶,顾客也买单了,已经合格了。但是小C则有可能让顾客惊喜。顾客表面要的是花瓶,但是实际上是在寻求一种解决方案。他要解决的问题有可能是风水问题,有可能是美化家庭,有可能是装一束鲜花……若不了解这个背后,你也许只能给他一个花瓶,而不是其他的更加适合他但是他描述不出来的,甚至没意识到的。

      在实践中,我曾遇到一个需求,在一个新的频道即将发布前,需要做一个预热页面。这个预热页面比正式的页面提前几天发布。运营同事说需要提前让目标顾客知道一个新的频道要上线了,那么原来的设想就是在这个页面上介绍一下新的频道,以及新频道上线后的精彩活动。

      追问:你的目标是让这些人知道有这件事情,还是让他们知道有这件事情并且在频道发布后回访呢?需求是后者。那么一个简单的介绍页面只能达到前者的目标。这群人知道这件事情,但是一周后就会淡忘这件事情,这群人绝大多数不会成为正式频道发布后造访的那拨人,那为何还提前预热?要达成后者的目标,我们则需要放钩子,比如在预热期间让用户抢积分,免费送积分,折扣券等,并且限定了积分或者折扣券只在正式发布那天有效等。

      数据可以看出一些需求,但是数据是个有意思的武器。武器可以让用户的行为显像化直观化,但是你依然不了解这些数据的背后有什么样的顾客行为。比如,数据显示某购物网站主流用户也许是集中在25岁到29岁。这是个事实。那么我们的产品有可能会认为就是要满足这类顾客的需求。但是有可能是我们在设计上太偏重这个阶段的用户群,让其他用户更难去用我们的产品。

      另外,交互要始终平衡的除了商业与用户、技术,就是ROI, 也即投入产出比。

      解决一个问题,满足一个需求,有多种方法。有的属于过度设计。有的属于隔靴搔痒——需要多搔很长时间才能解决问题。所以交互需要有四两拨千金的意识,在探索阶段,不放过一个灵感,多做一些探索去求寻最佳解决方案。在后期则当快刀斩乱麻,当断则断。

      交互设计师的工作——

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      在整个项目流程中,交互则在四个阶段有不同程度的参与,并且这几个阶段并不是严格的串行,而是并行中迭代的。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      1. 需求阶段

      参与讨论,了解并挖掘需求。进行用户需求分析(也会与BI部门以及用研配合,走访用户,做用户调研等),任务分析,提供网站架构图(site map), 网页流程图(page flow)等,协助产品经理细化需求,从BRD(商业需求文档)到PRD(产品需求文档).

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      2. 原型阶段

      同步PRD进程,输出各阶段所需的产品原型,也即线框图(Wireframe). 探索满足需求的各种解决方案(包括任务流以及单页面交互),并组织评审和讨论会,在评审和讨论后,输出一个确认版的线框图以及交互说明文档。

      此阶段若有必要,也会配合用研进行可用性测试,以便提前发现问题。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      3. 视觉-前端以及开发阶段

      演变成为UED内部项目经理,对UED整体时间进度负责,讲解需求,答疑,验收视觉以及前端、开发成果。根据他们的反馈,改进交互设计,并与产品经理协调。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      4. 优化阶段

      观测核心数据变化,进行可用性测试和用户调研,以便优化下个版本。

    什么是交互设计?为什么需要交互设计?,互联网的一些事

      先到这里,下一篇分享下交互常用的工具和方法。继续关注哦~

    什么是交互设计?为什么需要交互设计?,互联网的一些事

    围观: 26798次 | 责任编辑:包子

    展开全文
  • 交互设计

    千次阅读 2014-12-13 20:19:54
    交互设计编辑 本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计...
  • 交互设计精髓4

    2018-10-13 21:57:56
    《About Face 4: 交互设计精髓》是一本数字产品和系统的交互设计指南,全面系统地讲述了交互设计的过程、原理和方法,涉及的产品和系统有个人计算机上的个人和商务软件、Web 应用、手持设备、信息亭、数字医疗系统、...
  • 史上最完整交互设计基本原则|推荐收藏 人人都是产品经理 • 2 小时前 摘要:如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题,“好的产品设计一定是建立在对用户需求的深刻理解上” 这句...
  • 以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更...而这些失败的产物大部分可能与交互设计的缺陷和失误有关。在接下来的一年中,将用户体验纳入设计之中将继续成为头等大事。我们很难准确预测在...
  • 设计一个网站并不难,但要设计出一个让用户能够乐在其中,并且从中很快找到所需内容的网站并不是一件容易的事情。本书是一本专门解决网站可用性和易用性问题的实用书籍,全书分成3个部分,第1部分论述了以用户为中心...
  • 什么是交互设计

    千次阅读 2014-11-24 17:25:45
    交互设计,又称互动设计,英文Interaction Design, 缩写为IxD,是定义、设计人造系统的行为的设计领域。 人造物:即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。 交互设计...
  • 九大交互设计原则

    千次阅读 2019-08-23 18:25:56
    交互设计作为原型设计里的重要环节,了解交互设计原则,给交互设计提供更多设计支持。 1. Fitts’ Law / 菲茨定律(费茨法则) 目标离的越远,到达就越是费劲。目标越小,就越难点中。如果我们要想鼠标比较快速...
  • 一、Axure的绘图方法比ps要简单许多,在下图左下角的元件库里面可以选择你需要的元件,然后摁住鼠标拖动到画面中去,在右上角的xywh参数值处可以调整所需要的元件的参数。元件库里面有各种各样的形状,分为以下几种...
  • 2020全新Axure RP 9.0产品原型交互设计

    千人学习 2020-02-24 19:17:08
    Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。...
  • 2020全新Axure RP 9.0产品原型交互设计 知识传播美丽,分享传递...
  • Axure 交互设计 (1)

    2015-09-10 19:04:27
    网页交互原稿制作流程 1、利用Photoshop、九点切图等软件将网页图片进行切片; 2、利用Markman测量标注工具或Photoshop等软件查看图片文本等参考数据; 3、在Axure中进行排版制作。 设计稿标注测量工具 Markman 1...
  • Axure交互设计从入门到精通,让你迅速掌握工具技能,更提升交互设计的休养
  • 我在网上看到很多人都总结了Axure的快捷键,但是有两个问题,一是没有跟上软件版本,现在已经是Axure 7.0,很多快捷键还是针对Axure6.5的;二是整理得不全。所以我在这里重新整理一遍,希望对大家有帮助。 ▏通
  • Axure这个工具,是产品交互设计师的一个利器,07年的时候就在研究它使用它,相信绝大多数同行都认为它的优势在于: 一、Axure这个软件功能强大,可以做出很多交互效果,直接通过拖拽画出原型、生成网页; 二、Axure...
  • 个人学期完成的借鉴网上,有些值没有引用函数,根据网上的资料在RP8版本有些功能实现不了。没能完成具体的功能,只是展示了界面和部分功能。
  • Axure实现交互设计

    2015-03-23 11:54:40
    AJAX或JavaScript,甚至是Flash、Silverlight、JavaFX,这些都被... Axure RP与其它的wireframe(线框)软件,最大的差异在于能够进行交互设计(Interaction Design),且可以立即将结果呈现于prototype(原型图)上A
  • axure8.0综合案例-小技巧 十余年从业经验,专业从事线下培训3余年,集...
  • 交互原型案例Axure50套

    万次阅读 2018-12-14 18:00:25
    原型下载链接:https://pan.baidu.com/s/1cu5cfebWMSeacEou-Lg6sA 提取码:d0i4 想了解更多Axure资讯,赶快下方扫码加入【Axure修炼手册】微信公众号吧!!! ...
  • 关于原型开发工具,各有哥的使用习惯,有人喜欢axure、photoshop,也有人喜欢手绘,robert还见到过高人直接用excel制作的交互原型,不仅能够布局,还具有基本的链接和跳转功能,相当佩服。工具只是实现目标的一个...
  • 一、Axure RP 9 下载 二、Axure RP 9 安装 三、Axure RP 9 破解 四、Axure RP 9 汉化 一、Axure RP 9 下载 (1)最新版本 Axure RP 9 下载地址(Mac & window):点击前往下载 (2)汉化包下载、历史...
  • 在互联网产品领域,Axure已成为产品经理、产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品...
  • 为大家带来Axure RP 9 for Mac(交互原型设计工具) v9.0.0.3628Beta中文激活版,相信大家对Axure RP 8非常熟悉,最近Axure RP官方更新了Axure RP 9的消息,本站也将新版Axure RP 9 Mac激活版带给大家,Axure RP 9...
  • \iOS wireframe blueprint.rplib 交互设计 ios版本 axure
  • Axure RP 8.0原型设计(一):入门

    千次阅读 2016-04-21 16:27:04
    Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。...
  • 产品经理在进行原型设计的时候,时常会遇到这样一种动态效果:鼠标移入到页面中的某个图片...在前面的分析中,我们基本知道这个交互的逻辑是怎样的了,那么这个效果在Axure RP9中应该怎么样去操作设置呢?我们一步步...
  • Axure RP 9教程:如何构建内联交互

    千次阅读 2019-06-19 15:47:56
    Axure RP 9是一套专门为网站或应用程序所设计的快速原型设计工具。通过对原型的用户测试,可以更深入地了解Workflow Solution的各个方面。 >>>Axure RP v9 免费下载 如何构建内联交互 首先,选择要添加...

空空如也

1 2 3 4 5 ... 20
收藏数 708,176
精华内容 283,270
关键字:

交互设计