Photo by Medium

近年来，移动手机风靡全球。用户们也已经习惯依照一定的法则在移动端获取信息。在这个微渺的事物就可以定胜负的世里，开发者们需要去了解并迎合用户的高需求，以立足于此。

那么，你应该怎样设计去满足日渐高涨的用户期望呢？

如果转瞬间即可以有影响某款应用的事情发生，那么你可以预见的是，在这个移动领域立足并不是一件轻松的事儿。

在开发者中流传着一个真理，工具可以帮助你做简单的事情，从而让你集中注意力于那些困难与复杂的领域。如果你现在正在处于从 Web 设计向 App 设计的转型之中，那么你一定很难把握小与大的矛盾——当你要把页面做小，实际上所需完成的工作量会更大。

如果你尚处于困惑之中，我会告诉你这十大法则，包括五条视觉设计法则与五条交互设计法则。掌握了它，你在设计移动界面的时候就不会那样子捉襟见肘。

5 大视觉设计法则

苹果在用户体验层面开创了一个新的并充满惊喜的设计领域，它给我们提供了设计参考、样品 App，从而给我们这个时代拉开了一个不同以往的序幕。

同时，谷歌也未停滞不前，谷歌在对行业仔细观察并精准分析之后，成立了一种新的页面规则，并开创了新的用户系统应用于他们自主研发的手机上。

然而，苹果缺乏对移动端用户体验的视觉与交互方面的再定义，在这种情况下，移动应用的创始人们也在事实上进行了创新，从而生成了这十大法则，你可以在这十大法则的基础上去构建你的 App 。

1、合理布局，占满屏幕

人们都喜欢着内容充实的页面，因此，你大可不必对页面的画布进行节省。你可以将你要设计的页面看作一幅油画，而你是那个画匠。所以，尽情的将元素横向铺满整个界面并纵向平衡他们之间的关系吧，另外，在背景中加入一些肉眼可见的小惊喜也是不错的选择哦。

2、删减杂芜

没有人喜欢杂乱无章的东西，特别是在移动屏幕这样一个仅有 4-5 寸大小的地方。在移动端，页面布局的杂乱会被用户们放大无数倍，所以，把用户最需要的最想看的东西呈现出来而将冗杂多余的元素删除是非常必要的。用户体验好的产品应当是简约的，你并不需要展现太多，过犹不及，刚刚好才是最恰当的。

3.尊重用户习惯

为什么必须要这样呢？在移动端，像返回键、导航栏、菜单栏和顶部任务栏这种元素是每一款 App 都会有的，保持它们为相同的位置、大小是用户非常期望的事情。如果你没有把握完全创新将原有的用户习惯打破，你就必须遵从它。

4、使每一像素都臻于完美。

由于 LED、高清、手机显示屏可以影响用户对这款应用的体验从而影响他们的决策，“华丽”是游戏界面的代名词。你一定要确保你每一个 icon 的对齐与间距都是完美的。使用高分辨率的图像可以将应用完美的呈现在每一个显示器上。千万千万不要将不同的字体、字号和字体颜色混杂在一起，那样会显得很丑。

5、忘记你网页端设计的经验

网页端已经统治了互联网太久以至于你很难走出网页设计的惯用思维中，你应该将你自己放到本土移动应用设计者的心态之中。事实上，尽管一些Web功能不应该存在于移动领域，可是他们仍然存在着。你可能会被诱惑去设计一个估计百万级体量的插件，但是当你调整插件场景时你应该谨慎行事。比如，不要做一个带着下划线的连接，不要做弹出窗口或者电台按钮，这些都不是为移动用户体验而设计的。

5大交互法则

在移动领域，有些理念是具有创新性的，交互设计就是这些理念之一。感谢苹果，让我们在交互与触摸体验中有了良好的范本。所以，我会围绕着这些告诉你交互设计五大法则。

1、考虑到触摸问题

移动用户界面是有一个可触摸并可与手指交互的规则的。所以，在移动应用设计上，你应该将每一个 icon 设计到恰当的可以容纳手指触摸的大小上，如果页面面积不够，你可以制作卡片使得手指可以充分接触并提供即时的反应。你要切记的一点是，悬停几乎对移动交互是不产生影响的。并且你千万不要忘记，在移动页面上，不能简单的将手指类比为网页上的鼠标。

2、滑动与伸展

在本土的手机页面中，不同页面相互影响是极好的的，所以，在完全的页面上让他们一起合作吧。比如下拉以刷新，滚动时隐藏标题等。让页面在任何方向上滚动变得容易。手势是预期的触摸接口，所以你可以用手来缩放，拉伸，捏动等。

3、微调过渡

房地产领域强调地段，而在移动手机领域却强调过渡。我们所要满足的不光是用户对“快”的需求，还有他们交互速度的需求。我们可以通过能见度的改变让用户的过渡感觉到很舒服，就像从下往上播放幻灯片一样。如果他们要按返回键，则过渡效果可以反向转换。

4、让加载过程变得优雅

因为在本土手机中，用户，速度，过渡和性能是无处不在的。在用户的心中，没有什么是比空白屏幕更可怕的。所以，你要确保你不会设计出空白的过渡屏幕。在过渡屏中展现一些东西是非常有必要的，不要让用户去等待。不要跳转内容，逐步加载，而不是批量的加载所有数据，从而使元素优雅的出现。

5、增加一些动效设计

除非它有魔术，在现实中，元素不会突兀的出现在任何地方。移动用户们喜欢看元素们到处动的样子。你可以不会魔法，但是你可以营造出一种幻觉。因此，使用动画，从而缓解突兀的感觉，并收集任何你需要的数据。

其实…你不必记住这些规则的

每当你认为你的移动页面设计的不好看或者感觉不对的时候，你可以来翻一翻这个自查表：

在设计夹后台回复 自查表 可以下载，记住，我们给你提供了为你做简单事情的工具，所以，你要集中注意力去攻坚克难了。（个人版是永久免费的）

这个表格不仅拥有一个令人难以置信的框架和用户界面，它是基于默认的所有规则。况且它也可以帮助缩短开发时间，所以你可以专注于那些可以满足用户期望的痛点。

原文网址：https://medium.com/outsystems-experts/10-rules-for-creating-a-mobile-look-and-feel-dc81341660e4#.2ywhdnmva

译者：孙怡娜

编辑：Lin.

声明：本文由设计夹翻译小组成员孙怡娜翻译，Lin. 编辑，如需转载，请申请授权并保留译者全部信息，转载合作请添加微信：sezign01。更多精彩内容请关注设计夹。