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

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

1. 有意义的导航

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

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

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

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

2. 内容的排版 

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

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

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

标题同时使用文字和图标。

使用图形元素日期代替文字日期。

使用小信息图标来加强解释的部分。

除了字体的大小变化,使用不同的文章/标题颜色。

使用不同的浅背景色来区别不同的内容。

使用高亮来强调重要部分。

使用padding和negative space来突出文本或区分文本。

使用不同的“视图”,将内容分解成较小的部分。

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

3. 信息反馈 

信息反馈是设计中很关键的一个部分,特别是手机网页,用户反馈显得尤为重要。

移动设备不存在鼠标悬停和动画,而且大多数设备都是在被触摸时才有所显示,所以及时提供清晰的操作反馈信息是非常重要的。在现实生活中,当我使用ATM机时,操作反馈信息包含听觉(按键声)、触觉(按钮的金属冰凉感)等方面,但在移动设备上,我们只有一个选择——视觉反馈。

使用视觉反馈机制来与用户交流:

用色彩来突出已选择的区域。

当用户切换时使用淡入淡出动画。

使用边框颜色和渐变来表示按钮触摸状态。

使用不同的按钮或文本颜色来显示状态的变化。

当选择下拉菜单时,使用正在转向/已经转向箭头。

在视图之间使用滑动或渐变动画以显示区域的改变。

4. 清晰的品牌 

每个公司或应用都有不同风格的品牌元素,塑造品牌的关键是设计元素比如logo、字体和颜色等等要能代表该品牌。对于手机网页设计来说,这一点至关重要。Logo的位置可能与电脑版本有所不同,甚至可能只在Web应用的主视图呈现,所以配色方案很重要。

另一个要注意的点是,手机网页的顶部没有标题栏或地址栏,相应地,也就没有网站标题和图标。所以你的设计应该让用户知道,他们现在所浏览的网站名称,这对塑造品牌也很重要。

5. 留白 

虽然屏幕的尺寸变小了,空白却依然不可少,因为留白是所有优秀设计的关键。在手机网页设计中,由于空间限制,为了让设计更加有效、可用、可读,所有元素(按钮、导航、图标、文本等)需要有序正确地排列。

这并不是要你删减内容以达到留白的目的,也不是指用大字体以便用户阅读。手机网页设计需要比电脑网页设计更多的UI规划,而留白的规划更是起着重要的作用。

留白,以创造更好的用户体验:

用较小的字体,这样文本周围有空白部分,不会像用大字体那样显得臃肿。

在所有的方块元素周围使用大量的padding来构建文本块或图标。

元素和元素之间用大量清晰的白色网格进行区分。

围绕整个视图使用大量的padding把所有元素包围起来,以免元素溢出到无法操作的区域。

原文:http://www.iteye.com/news/24531

【编辑推荐】

  1. 2011移动Web综述:工具集和资源库步入成熟
  2. Google官方开发指南:提升移动Web性能表现的四大建议
  3. 移动Web研发流程
  4. 移动Web开发指南
  5. 移动Web开发简介
责任编辑:陈贻新 来源: iteye
相关推荐

2012-07-10 15:51:01

移动网页设计移动Web

2020-10-18 21:41:34

软件设计语言开发

2012-03-09 09:21:41

Shadow

2011-02-25 14:04:20

2014-05-04 11:06:41

移动网站移动设计

2017-10-17 11:51:59

移动端调试网页Erdua

2016-10-18 21:39:59

Semantic-UIReact基本元素组件

2010-06-13 10:56:13

UML文献

2023-07-18 07:51:56

JavaScriptAPI

2013-08-27 13:13:29

移动网站性能优化移动web

2013-09-17 10:13:06

网页设计设计

2011-05-30 10:24:34

网页设计

2020-09-18 15:53:21

5G

2020-12-11 09:38:49

Shell编程开发

2012-12-24 08:50:21

iOSUnity3D

2018-01-23 08:24:57

HTTPS服务器加密

2011-03-21 15:23:24

触屏网页设计

2020-10-13 08:41:58

Java开发框架

2017-02-28 20:34:08

Linux移动应用程序员

2016-02-01 10:12:22

网页设计移动端
点赞
收藏

51CTO技术栈公众号