移动网页设计应该包含的5个基本元素

大部分人都认为手机网页设计与电脑网页设计有很大不同，其实不是，手机网页除了小且可以触摸外，很多设计原则与电脑网页设计是共通的。这里有 5 个基本的元素，希望对设计师有所帮助。

1. 有意义的导航

在移动设备上获取信息实际上是有趣的体验，因此，令用户在使用过程中感到愉快很有必要，简单地删除屏幕上的链接（或taps）并不能达到用户友好体验的目的。导航应该包含用户需要的内容，并提供明确的路径。如果用户知道跳转的具体页面，就会进行点击。

首先，确保导航在用户看来是“可点击”的，比如按钮、列表、箭头等等，这些小图标可以在一定程度上帮助用户明白下一步的操作。在没有鼠标悬停效果和tags的帮助下，要尽可能多地对用户进行引导。

标签是很重要的，用好它可以更好地引导用户。标签应保持简单且有意义，例如有一个链接需要好几个taps，你不用把返回键命名为前一页的标题，只需用“back”代替就行了。此外，避免使用作用不清的按钮或标签，这些都是丢失用户的潜在陷阱。但是简洁并不意味着简单，因此与其把“My Profile”或“Passwords” 隐藏在“设置”里，不如为它们增加额外的一两个导航按钮。

图标是一个简单却强大的沟通途径，不仅仅是因为手机阅读文字比较困难且耗时，还因为使用图标可以达到更好的视觉平衡。在手机网页中恰当地使用图标，可以提高用户的整体体验。另外，与标签相结合的图标对用户来说意味着更明确的导航路径。

2. 内容的排版

简单地对内容进行删除操作并不会令页面更简洁，而且这些被删除的内容说不定正是用户所需要的，因此对内容的排版设置多花点儿时间是很有必要的。

不要简单地删除你认为“不重要”的内容，应该重新调整这些内容的布局。为了易于用户阅读，要尽量避免使用大量的文字，将这些文本重新调整为小图标或小条目是不错的做法。此外，用引语、线条或其他设计元素隔开大段的文字，使这些板块显得更美观。

使用视觉元素来完善文本元素：

• 标题同时使用文字和图标。
• 使用图形元素日期代替文字日期。
• 使用小信息图标来加强解释的部分。
• 除了字体的大小变化，使用不同的文章/标题颜色。
• 使用不同的浅背景色来区别不同的内容。
• 使用高亮来强调重要部分。
• 使用padding和negative space来突出文本或区分文本。
• 使用不同的“视图”，将内容分解成较小的部分。

从用户角度来说，他们希望阅读所有的内容，所以我们进行内容呈现，只是用隔断、重组或其他视觉方案来让这些内容更容易访问。

3. 信息反馈

• 用色彩来突出已选择的区域。
• 当用户切换时使用淡入淡出动画。
• 使用边框颜色和渐变来表示按钮触摸状态。
• 使用不同的按钮或文本颜色来显示状态的变化。
• 当选择下拉菜单时，使用正在转向/已经转向箭头。
• 在视图之间使用滑动或渐变动画以显示区域的改变。

4. 清晰的品牌

5. 留白

• 用较小的字体，这样文本周围有空白部分，不会像用大字体那样显得臃肿。
• 在所有的方块元素周围使用大量的padding来构建文本块或图标。
• 元素和元素之间用大量清晰的白色网格进行区分。
• 围绕整个视图使用大量的padding把所有元素包围起来，以免元素溢出到无法操作的区域。

转自：ITeye

英文原文：5 Things Every Mobile Desigh Should Have