交互设计的 UI 原则

交互设计现在已经是一个十分常见的问题，但许多设计者和开发者仍不知道它的具体意义。今天，咱们将从不一样于以往的方面：咱们将会深刻讲解能使你的网站拥有良好交互性的用户界面和设计原则。

　首先，何为IxD

　　交互设计（即IxD）是一块发展迅速的新领域，大体出现于10-15年以前，源于一些体现设计问题的研究，后来被专业设计者鉴别和接受。

　　交互设计促进人与环境的交流，这里咱们指的是人和网站的交流，交互设计师只要考虑用户和电脑的交互，毋须像UX设计者那样思考软件或系统全部涉及用户的方面。你也许在不一样大学里据说过人机交互度——这些度基本是在IxD领域中培养的。

　这样的设计师要作什么？

　　一个交互设计师会思考谁是产品的目标用户以及谁会使用它。用户研究者或是信息架构师会提供这些信息。在这些研究的基础上，一个交互设计师为了用户与软件交流，要耗费很长时间但要尽快地创做出这种使人称奇的交互方式。

　　设计师必须识别出关键交互而且画出线框图, 因此要不停地画草图。有的设计师会直接画出来，有的设计师会用软件来辅助（文末展现了一些不错的例子），还有其余一些设计师会或单独或合做地创做界面。

　　交互设计（IxD）不断地展示出新的交互方式，由于用户老是指望网站出现新的事物。但交互设计师须要意识到这些特性会如何影响用户，而后在许多想法中选择真正要实现的和能够放一段时间的。

　　下面咱们将会看到一些驱动交互设计的概念。

　　目标驱动设计

　　尽管IxD不须要作，但为了得到最好的设计反馈，用户研究查相当重要。用户使用软件时，通常在内心有一些目标，你的应用程序应当很好地知足这些目标。为了成功地结合设计和功能，用户研究偏偏是最重要的元素。

　　这是如此的重要，以致于许多用户研究员也能找到作交互设计师的工做，就是由于他们在分析用于软件的人类行为模式方面的技能。

　　简单化

　　人们不知道用户界面是什么。事实上他们也不关心。他们不知道有人在网站的背后策划着他们所见到的一切。他们只知道他们须要一个简单的网站。他们要一个易用的系统，加载/响应速度快，不要让用户思考而且不给用户伤痛的理由。

　　情景和模式

　　咱们使用的一些产品一般功能设计的很明确，所以每个人都知道怎么使用它们。拿剪刀作例子吧。一个三岁的小孩都知道怎么使用它，两个手指伸到两个环中，只有一个活动方式能使用它。没有比这更简单的了。你的网站应该向一把剪刀同样简单易用。

　　为什此处使用“情景”这个单词呢？由于这个词表达了一个网站或者系统背后一些列的功能。

　　关于模式，用户界面应当由一系列用户熟知的组件组成，若是用户想提交一个表单，他们首先会找到提交按钮。这个按钮就是个常见元素，设计者不必在接受一个新项目时每次都重复早轮子。

　　有些人会说了仿照现有的模式，不从新造轮子会让人感受没有创新性。在易用性没获得保障时讨论创新简直就是白痴。记住，易用性和创新性是两码事。

　　若是你想创新，你仍然须要了解已知的模式。可是，若是你追求高易用性，没有人鼓励你去重复造轮子，由于用户须要时间去适应你的轮子。

　　建立一个高易用的系统须要交互设计师对约定，情景和web易用性有较深的理解。

　　如今你了解了一些交互设计的原则，接下来让咱们看看一个伟大的交互设计是如何影响用户的。

　　访客定位

　　交互设计师须要了解他们的设计面向哪些用户，所以他们能经过用户给产品作好定位。

　　页面上显示出用户停留的地方，这样的体验不会让用户在浏览时感到困惑。用户也能知道如何从一个页面跳转到另外一个想去的页面。让用户知道当前所在的位置这是很是重要的，不要让他们陷入死胡同中。当搜索没有查询出结果，没有告诉用户下一步操做的选择，这样的交互体验是很糟糕的。

　　持续对话

　　交互设计把大量精力专一于给予用户持续的反馈。告诉用户他们作的是对仍是错，即便在无心识的层面上，这也是一个受用户欢迎的元素。 你只须在用户完成动做的时候，告诉他们已经成功了。

　　当你在亚马逊上买一件东西时，你会在浏览器上和你的邮箱里得到一份确认书。当你经过联系表单提交邮件时，你会在页面中得到一份确认书。

　　这使得交互不只仅停留于网站的浏览和特性使用，更是把交互带到了一个新的层面：它帮助用户更好地理解他们当前的状态，并把疑惑和问题减到最少，同时也去除了用户的挫败感。

　　思考工做流

　　IxD还要考虑工做流。若是你有一张注册表单，用户用它提交信息是会有什么事发生？页面会刷新吗，会跳转到首页吗，会显示确认信息吗，会跳转到登录页面，或者同时跳转到上两个页面吗？

　　It’s about having many choices and choosing the one that will fit your users expectancies best. 说起的全部元素都是网站工做流的一部分。每次交互后应该紧跟下一个符合逻辑的步骤，而且与你网站以前所创造的体验相符。

　　视觉层次

　　为了让用户照你的意思操做，你可使用视觉层次来帮助他们。你可使用布局、元素大小和颜色组合达到视觉突出的效果，以此来引导用户的双眼。

　　你也可使用视觉层次使用户找到他们想要的东西。你想租车吗？保证你能使用视觉层次来引导用户来到“租赁”页面。

　良好的线框化工具

　　绘制草稿和线框图是如此重要，所以我愿意向你展现一些好用的工具，这样你就能立刻开始交互设计工做了。

　　Mockingbird

　　Mockingbird是一个基于web的应用，在这个网站上用户能够建立、链接、预览和分享站点或应用的框图。它的界面简洁友好，用户能够拖放元素，调整大小，甚至能够经过一个连接与同事方便共享。

　　由于Mockingbird是一个基于Web的应用程序，这意味着你从任何一台计算机无处不在地建立和修改你的构思。

　　Lovely Charts

　　Lovely Charts是一个在线的图表应用，它容许用户建立流程图、组织架构图、站点地图和流程框图。

　　该应用程序的主要特点功能是依据你所绘制的内容进行推测建议–这有助于绘图过程的简化，返回老版本和撤消更改也很容易。

　　Mockflow

　　MockFlow也是一个很好的Web应用程序，它有干净简单的组织界面和一系列普遍的功能特性。

　　使用起来也使用拖放，有从图表到菜单，广告和下拉菜单等内置组件。你能够上传本身的图片或选择网站提供的通用素材，因此构建框图的过程是很快的。

　　SimpleDiagrams

　　simplediagrams是另外一个帮助用户经过建立框图表达本身的想法的桌面应用程序，它和上面提到的应用同样使用相同的拖放技术来实现。

　　尽管较其余应用没那么多的功能，但simplediagrams提供了能帮助用户建立框图更快速的基本工具。

　　介绍完simplediagrams今天的文章该结尾了。别忘了用户测试的重要性，记住创新和可用性一般会走向不通的方向。当创造神奇的交互界面的时候不断创新，专一于如何让使用它的人更加方便。

　　将这些牢记在内心，你会成为一个伟大的网站或应用程序交互设计师。

　　你怎么认为这个伟大的交互设计领域？你以前尝试过设计一个相似的接口元素没有，或是知道这些原则以后它是否为你所向往呢？

　　英文来源：http://designmodo.com/ui-principles-interaction-design/