手机网页设计原则:移动网页中的基础元素

文章描述:移动网页设计应该包含的5个基本元素.

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

1. 有意义的导航

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

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

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

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

2. 内容的排版

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

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

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

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

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

3. 信息反馈

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

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

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

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

4. 清晰的品牌

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

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

5. 留白

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

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

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

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

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

时间: 2024-10-29 15:13:11

手机网页设计原则:移动网页中的基础元素的相关文章

网页设计原则理念以及实战经验技巧

什么是好的网页设计,网页设计原则理念 (1)内容和功能决定表现形式和界面设计 常常有人凭借电话的几句交流或者QQ上的几句聊天,甚至是一张句话的小纸条,就开始做一个网站设计.我决的这都是敷衍了事的通用设计,很不专业不成熟的设计.做一个良好的网页设计,你需要了解客户的东西很多,比如: 1.建站目的(是主推产品还是平品牌,是主要注重SEO还是用户交互等) 2.网站类型 3.栏目规划及每个栏目的表现形式及功能要求 4.主色调.客户性别喜好.联系方式.旧版网址.偏好网址 5.根据行业和客户要求,那些要着重

网页设计-jquery替换网页body中所有的“黑龙江”为“北京”

问题描述 jquery替换网页body中所有的"黑龙江"为"北京" jquery替换网页body中所有的"黑龙江"为"北京","黑龙江"可能是在不同的标签,不同的 中,请问如何写代码?需要完整代码,谢谢了! 解决方案 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.j

手机交互设计原则

在设计e指通客户端和wap2.0页面时,积累些手机交互设计经验,不断总结,理清设计思路.以下设计总结出手机交互http://www.aliyun.com/zixun/aggregation/8912.html">设计原则,仅供参照. 屏幕 手机屏幕尺寸分为物理尺寸和显示分辨率. 物理尺寸是按英寸对角线计算.显示分辨率指的是屏幕图像的精密度,是指屏幕所能显示的像素的 多少.显示精度是每英寸上可以显示像素(DPI). NOKIA,N78的物理尺寸为2.4英寸,显示分辨率为240*320像素:H

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

交互网页设计原则:整洁清晰明确

  在网页交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰,自然易懂.这样用户才能够有效的获取这些信息,并迅速作出决定. 1.什么是"简洁自然,清晰易懂"? 简洁清晰:使信息最简化 "少即是多".提倡使用最少的元素来表达最多的信息.如果信息繁杂,将使用户承担大量的信息负担,造成信息过载,影响效率,不能帮助用户解决问题. 自然易懂:使用用户语言 用户获取信息的方式多样,并且对信息的理解程度也各有不同,所以使用用户平时使用和理解的表达方式去传递信息,更可以被用户

网页设计技巧:分析网页图片在网页中展现形式

文章描述:网页设计中图片展现形式的思考. 图片,是构成网页的基本元素之一.图片不仅能够增加网页的吸引力,传达给用户更加丰富的信息,同时也大大地提升了用户在浏览网页的体验.图片的展示形式丰富多样,不同形式的图片展现也让浏览网页的乐趣变得更加多样化. 跟随我们分别来体验一下目前存在的各种图片展现形式,让我们的眼睛去旅行吧. 一.多图展现 图片限制最大高度或宽度并进行矩阵平铺展现,这是最常见的多张图片展现形式.不同的边距与距离可产生不同的风格,用户一扫而过的快速浏览可以在短时间获得更多的信息.同时,鼠

网页设计原则的意义

设计原则是做设计的标准,可用于指导设计和衡量设计方案的优劣.个人在写MRD时,会先考虑用一句话作为设计目的,描述做这个设计满足用户何种需求或者有什么作用,然后再写三至五条设计原则,满足用户这项需求时做的设计需要遵守什么. 比如在设计一个购买彩票出错页面,设计目的是为了降低用户的挫折感.那设计原则可以是: 1.提供用户易于理解的信息. 2.根据出错情形分别提供有用的信息. 3.引导用户继续浏览其他页面. 以上的原则中顺带将之后的设计方法也一并说明,用于指导设计: 根据原则1,设计出的界面中会避免使

高级设计师总结的15条响应式网页设计原则

1.计划 与往常一样,计划总是要放在第一优先级的.一旦你在纸上开始解决你的设计难题,你就已经准备好建立你的站点了. 2.充分利用好原型软件     推荐使用Adobe Edge Reflow,它能让你使用媒体查询,在程序内设置断点并设计适配桌面电脑.平板电脑和手机的布局.然后,你可以将CSS复制到另一个像Adobe Dreamweaver或者其他HTML编辑器来进一步优化你的设计. 3.首先考虑一个移动端策略 如果你是第一次创建手机网站,接着就可以扩大规模,在平板和桌面电脑上设计网页了.这三个平

网页设计技巧之网页首屏高度如何确定?

一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时,首先必须要做的是标注清楚网站首屏的高度线,以便直观的看到网站首屏的高度,首屏可以显示的元素.那么,我们该如何来标注一个网页的首屏线那?笔者结合网上的一些谈论特整理如下: 首屏的高度直接跟客户端的各种客观的条件有关系,因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了,根据各个客户端的操作系统.浏览器分布和屏幕分辨率等情况,并结合常见浏览器状态栏.任务栏等高度进行分析如下: 第一步:分析常见分辨率及浏览器下高