Chris Bank来自UXPin，线框图&原型设计工具的先驱，简述webUI和UX异同时解释了为什么设计中我们选择默认构建UI以及UI如何塑造了UX。欲知详情，可点击查看Web UI Best Practices。

用户体验（UX）是指用户在人与系统交互时的感觉，也就是用户从网络站点得到的一种抽象体验；用户界面（UI）是指用户和某些系统进行交互方法的集合，是作为体验的一部分与用户相互作用的存在。

设计网站的宗旨是让用户享受网站的使用。但是你不能只是说，“好吧，让我们提高我们网站的UX”，这有点像商人说“让我们来挣更多的钱吧”，不可简单粗暴，亦不可一蹴而就。而是要有策略的构建你的UX，也就是说要通过UI来实现。

对网站而言，设计团队在UI上的工作成果都是为了提升UX。菜单，按钮，文本，图像，视频，任何你可想象到的放在页面中元素组成了界面，这一切都需要精心的筹划。他们也就组成了UX，使用方法直接影响了用户体验。

我们将以UI的一些例子作为概述，来解释为什么好的UX依赖于好的UI，为什么构建UI比UX更容易。

UI是什么？不是什么？

一般来说，设计师选择用拖动文件作为组织内容的方法，这是UI。比起其他竞争者，用户可以更轻松随意的享受音乐，这是UX。

正如Web UI Best Practices 2014中讨论说，UI的功能是设计，传达以及执行网页的内容，自然，UI也是多样的，他们包含了设计师在网站中所要添加的全部内容。Usability.gov（评论用户体验和设计规程的先驱），以有效便捷的方式如下分类：

• 输入：文本输入框，日期输入框，下拉列表，选择框，列表框，可点击按键，切换钮
• 导航：滑动条，搜索栏，页码，工具条，标签，图标
• 分享：好友列表，关注，赞，分享，邀请好友
• 信息：文本，功能，信息，通知，图标，进度条，模式窗口

以OS X Yosemite strives for exceptional UI来说，尽管Yosemite是一个操作系统（而不是网站），但事实上除了满足UI原则外，它终究还是个网络环境。可点击按键（输入）使系统操作更有趣，多任务浏览（导航）让用户在点开单个之前预览了内容，而且通知中心（信息）让用户在锁屏情况下也可得知必要信息。

更重要的是，Apple在自己的UI设计规范中宣称，这些UI元素具备传统功能性与超凡用户体验的结合。而Yosemite UI的终极目标则是，让用户自主的熟练的使用，主导而非被动。

UI的作用

UI&UX是不同的概念，但是却又不可否认的联系。

如Web Ui Design Patterns 2014中，Google Play专业于拖拽UI技巧（被称作Pattern）。在网站中，用户能够将歌曲拖拽到列表中，然后又拖拽到他们想要听的序列位置。用户很喜欢这种将音乐分类的方式，UX直接被提升。就是这样，一个考量了便捷性和个性化的UI的选择（拖拽）提高了用户体验。

现在让我们聊会最直接的例子。知道么？你的很多用户关闭你的网站都是因为他们并不想要通过注册来使用你的功能。这个UX问题在于体验促使用户取消，当然你还是能够找出一些在UI上的根源。也许你现在的登录系统需要输入太多信息。既然这样，那么直接登录的（“懒人登录“）UI模式就是解决方法。经过一段时间的自由浏览，他们可能会考虑注册一个账号，尤其是当他们需要一些只有会员才能够享受的功能时。

AirBnB就用了这个策略来吸引用户。用户不需要注册会员就能够浏览网页的一切信息，然而，一旦他们找到他们需要预定的房间，他们就得注册账号来执行进一步操作。

如果说UX是通过UI才能实现的一部分，那么UI是通过草图，线框和模型来实现的。线框图和模型就像设计师的文本大纲或者说蓝图，他们能够将一切的想法徒手画在餐巾纸上，然后线框图则是构建在类似于UXPin或者Balsamiq的工具上。设计师首先需要理性思考理论支撑，构建合适的UI来实现满足需求的UX。就好比造一个房子，如果没有精心打造的蓝图你是没有办法开始的行动的。

欲知更多关于线框图的信息请点击Guide to wireframing。

创建UI而不是UX的原因

Shawn Borsky, Rivet Games的UI/UX设计主管, Reminds usthat the UX is more than just the result of UI.如他所说，UX是品牌的核心，由此品牌所包含的意义就是整个公司所能提供的优质用户体验。一个优秀的UX不只是UI的目标，更体现了公司提供优质的服务。

网站的每一个细节都作用于用户体验，而且让用户留下印象，但是设计师不能直接掌控用户体验。当你看下图时，你得到的是UI所呈现的有限的视觉印象，因为有形（比方说汤匙）幻化为了体验感觉中的无形（比方说享受早餐）。

同样的，如果你正准备一顿重要的宴席，你脑子里可能充满了想法。你需要最棒的材料，选择最好的菜谱，还要考虑客人的口味，你甚至要为了用餐氛围来找一个不错的餐桌装饰。网站也是一样。为了用户的满意，你需要将所有事都计划完美。可能你需要花费几小时甚至说很多天来准备这顿晚宴，对比起来，最终让客人享受到的美食的时间仅仅只是一小会儿。这也解释了你心中构想着的是UX，而更值得做的在于攻克UI细节。

如果一个UI在创建中投以极妙的想法，注意和关心，一切都会在UX中体现出来。如果UI在创建时只是偶然无计划的，或者存在很多疏忽，那么UX的结果也就可想而知。一个好的例子便是iPhone的Shift键的疏忽（当我们讨论网站时，移动设备是免于遭遇失败UI毁掉UX的幸运存在）：

两张图中，哪一张的Shift键是被激活的？途中一些按键的背景为灰色，而另一些为白色，但是Shift键两者都有，颜色取决于是否被激活。即使满足了功能性的考虑，但Shift键的颜色仍是个糟糕的UI。由于用户（比方说在UXPin工作的我们）难以判断Shift键是否被激活，不得不总是删除和重新输入文本，糟糕的用户体验，不是么？

（说真的，在UXPin，我们用了6年iPhone，但是我们仍然很迷惑！）

正如Web UI Best Practices中对大家的劝诫，举出了一个臭名狼藉的却广泛引用的UI设计，即使在流行的网站上，比如说LivingSocial。

当你第一次打开网站就会弹出这个窗口，错就错在并没有办法取消。这就意味着随机的或者好奇的浏览者并不愿意为了一次访问而留下他们的邮箱地址。也许这是一个有意为之的UI瑕疵，促使用户填写他们的邮箱地址，但是你真的希望你的网站UX看起来像个霸王？

现在，值得注意的是这里的UI完全满足功能性需求，颜色很好，按键也不错，只有UX很糟糕。这也说明了一个好的UI也能造就糟糕的UX。Marcin Treder，UXPin的CEO，认为除非特别必要的目的，用户能勉强接受糟糕的用户体验。“有时你可能会看到整个冗长又复杂的左边满是对其标签的网页页面，这就是非常差的阅读体验，”Treder说，“但另一方面，这样能够实现更好的数据质量目标，以防止人们机械快速的阅读。”

我们选了一些bad UI Designs，因为比起好的UI设计，糟糕的UI会更容易引起注意。好比说，好的电影能让你忘记你身处影院，而好的UI设计也比较难让你注意到他本身，更别说UX了。

UI塑造UX

让我们看看UI的选择是如何直接影响UX的：

 上述举例都只是粗略概观了UI选择对UX的影响。通过63项技术比对，详情请看Web UI Design Patterns2014.

 及时UI塑造了UX，但你的首要仍然了决定你想要什么样的UX，然后再找到合适UI来满足需要。相似的，如果你的UX存在问题，最好的问题处理方式也是考虑UI的问题。 

学习UX

理解UX和UI的区别仅仅是开始，构建一个好网站的关键仍然是找到两个概念的相关性，并加以利用。尽管很多网页设计师被分为UI设计师或者是UX设计师，但UI和UX是终究还是一体的。

正如你所看到的，创造一个足够优秀的用户体验不仅仅需要视觉体验，而且视觉和听觉的设计都只是UI元素能够供给给UX的小小一部分。尽管你不能直接有效的掌控你网站的UX，但你能够选择你的UI。那么，确保你的UI能够实现你最初的UX目标吧。