# 移动界面设计的一些心得

- 作者：积木
- 发布时间：2011-09-19 07:00
- 分类：公司
- 原文：https://www.ifanr.com/52779

[![frontendconf-fishbowl](https://s3.ifanr.com/wp-content/uploads/2011/09/frontendconf-fishbowl_thumb.jpg)](https://s3.ifanr.com/wp-content/uploads/2011/09/frontendconf-fishbowl.jpg)

软件开发者 Johannes Fahrenkrug 在自己的博客 Springenwerk 讲述了移动界面设计的一些心得，值得参考。

**跨平台界面是一种观念的错误**

跨平台界面是一个从未实现的幻想，是否记得 Java Swing？它许诺在任何运行 Java 的平台统一界面，而这个许诺从未兑现，为什么？

> 跨平台 UI 糟糕透顶。跨平台 UI 意味着它在任何平台的视觉和感觉都很糟糕。

因为人们喜欢自己平台的特殊性，如果你想为某个平台开发应用，必须深入了解每个平台的特点。跨平台界面意味着你的界面在任何平台都像一个异类，这不仅仅是按钮和窗口的问题，也不仅仅是风格和配色的问题。根本没有“一个尺寸，适合全部”的界面。

**网页是一个例外**

游戏是一个例外，但这个可以先放下不谈。如果说有一种界面能够跨平台，那就是网页界面。这是因为人们已经习惯了网页界面各有不同。

> 当用户打来浏览器的时候，他们知道自己进入了一个充满不同的领域。

这正如你进入了一个书店，你知道自己会看到不同尺寸、不同排版、不同颜色的书籍和杂志，这就像是多彩的网页一般，充满了不同的界面设计。但是，如果你看到图书系列中的某本图书排版不同，或者杂志的下一期突然改变了排版，你会感到惊讶，这种惊讶就像是在原生应用中突然看到了跨平台的界面。

因此，用户的心理期待的差异带来了不同的效果。显然，网页给开发者提供了跨平台的自由。他们可以开发一套在所有平台运行的通用界面，而且不遭受批评。只是需要注意一个问题，不要模仿原生应用。

如果你模仿原生应用，用户会期待着它和原生应用完全一样，而网页应用常常满足不了这种期待，更糟糕的是，模仿一个平台上的原生应用，在其它平台上看起来反而成了一个异类。

应该怎么做?

构建一个与平台无关的界面和体验（UI 和 UX）……以非原生来使你的用户惊喜，但是要增加功能、动画，易用性，这些是他们使用网页应用时没有心理期待的东西。

**移动界面呢？**

同样的道理，用户不喜欢看到其它平台的模仿品，网页应用不要模仿原生应用。或者说，不要制造那种快捷方式的应用，在用户看来，主屏幕上的图标就是应用，他们不在乎具体的实现细节。他们会期待这是原生应用，而他们会失望。

在移动设备上使用网页技术模仿原生界面，只能带来失望。

你有充分的自由去创造出色的、独特的界面。如果你模仿原生界面，用户会将你花费心思使用的技术当做理所当然，当他们看到你的应用不如原生的流畅，他们会失望。

**原生还是网页？**

首先问自己一个问题，“我想用这个应用达到什么目的？”如果你没有明确，不要去做。

人们希望应用是有用、漂亮、令人惊异或者有娱乐性的。如果它不符合以上条件，不要花费心思去开发它……如果你想要开发一个应用，开发一个你也想要使用的应用。否则，不要去想这个问题。

如果你想把应用放到 App Store，用户会期待它和原生应用一样的速度，界面和体验。坦白的说，最简单的方法是做原生应用。

> 网页技术构建应用更加简单和快速是一个神话。它很可能花费更长的时间，而用户体验仍然更加糟糕。构建一个简单的原生应用反而更简单。如果你用网页技术构建的话，可能更加复杂（如果你试图去模仿原生的话。）

如果你非要那么做，可以去试试 Appcelerator Titanium 或者关注一下 Strobe。使用一个专业的平台可能会减少你的麻烦。

当然，App Store 更容易获得回报。如果你对回报不是很急切，或资金不足，可以考虑开发一个移动网页或者网页应用。出色的网页应用同样是一个挑战。

一些大公司，比如 Google 和苹果会同意一个统一的网页应用标准吗？可能性不大，它们对跨平台开发的兴趣不大，而对应用的平台独占性更加有兴趣。

**结论**

如果你想要最好的用户体验，去开发原生应用吧。但如果你不喜欢 App Store，而你的应用不会因为缺失原生界面和功能而失色的话，开发一个出色的网页应用，但不要模仿原生界面。

网页有它自己特殊的东西。利用这些东西，通过现代移动浏览器提供的高级功能使你的用户惊喜吧。

via [Springenwerk](http://www.springenwerk.com/2011/09/thoughts-on-mobile-ui-design.html)
