手机APP用户界面设计的10点建议

所属分类: 网页制作 / 应用技巧 阅读数: 281
收藏 0 赞 0 分享

技巧1:保持专注

最好的移动应用集中精力将一件事做得很好。 你应该用一句话就能描述你的应用程序是干什么的,而不用提及任何"细节"。 用户应该能够启动它,使用它,然后在几秒钟内就能利用其达成目的。 如果用户需要通过四层以上的菜单才能使用,那应用程序很快就会被卸载。

技巧2:适当地使用后退按钮

在Android上,系统提供的后退按键在App内应该能够使用户得到返回的功能。 而在iOS中后退按钮是通过软件控制的,您应该总是提供一个返回按钮,原则上用户已经习惯了返回按钮在左上角。 遵循back-button的约定行为和特定于操作系统的位置是至关重要,要让你的应用程序满足用户期望的话。

技巧3:考虑软键盘行为

大多数移动应用程序都在一个或多个屏幕中要用到使用键盘输入。 不幸的是许多设计师没有考虑到激活屏幕键盘后如何显示界面。 当你测试时,请确保在屏幕上有足够的空间让用户知道他们在做什么,即使屏幕键盘被激活时也一样。

技巧4:体贴的空白提示占位符

如果应用程序只有几个数据输入域,则显示空白提示是很友好的,也可以让应用程序看起来更干净。 如果应用程序的数据输入域很多,则使用占位符而不是label就会变得非常混乱。 一旦用户在该输入域输入一些信息,除非这些信息是不言自明的,否则对用户来说那些信息就需要连蒙带猜了。

技巧5:挑战新特性

在以前的应用程序设计中,软件开发人员专注于在程序中添加尽可能多的功能。 他们衡量成功的准则就是能够比竞争对手拥有更多的功能和特性。 移动革命已经改变了这一点。
在桌面应用程序中,一个不常用的功能会被添加到子菜单中,高级用户发现这些功能可能是一个好主意,因为它使得你的程序区别于竞争对手。 在移动应用中,一个不怎么有用的特性会使得用户界面凌乱而难以操作。

技巧6:把选项卡放到正确的位置

在iOS中,主要的选项卡导航看起来不像选项卡。 他们是屏幕底部的一些图标,用户使用使用他们来切换应用的主要功能。 大多iOS用户不习惯这个功能出现在窗口的顶部,但Android用户习惯于这样。 在Android上,选项卡通常放置在应用程序顶部,并且可以左右滑动切换。
这里的关键在于,如果你的应用需要依赖一个"选项卡"来作为应用主要功能的导航,您需要在iOS和Android上将它们放到不同的位置。

技巧7:注意按钮的尺寸

简单设计中有一种倾向,说为了添加一些东西我们可以让它适应一下,如果我们只是稍稍减小按钮或字体的大小。 这是危险和灾难性的!!! 如果曾在智能手机上打开没有为移动设备优化过的web页面,你就知道不能点中一个超链接是多么令人沮丧的用户体验。 在app中,如果用户不能选择放大那就是一个更大的问题。
保持按钮尺寸足够大以容易使用,并在小屏幕设备上测试你的应用程序,如iPhone 4上依然拥有舒适的使用体验。

技巧8:考虑按钮位置

当用户手中拿着智能手机,屏幕的下半部分可以用拇指很容易到达。 习惯右手的用户可以接触到右下角,而左撇子正好相反。
如果你希望能够单手操作,记住这一点。

技巧9:提供必要的提示信息

任何时候给你的用户请求输入,考虑用户需要什么信息做出决定采取什么行动。 如果你的UI不在同一位置提供这些输入框,用户可能需要取消并返回到上一级页面来做决定。
减少用户的痛苦,当用户需要决策时在适当的地方提供必要的信息。

技巧10:注意你的图像分辨率

现代智能手机拥有惊人地高分辨率,看起来绝对漂亮。 不幸的是,如果你仍然在使用低分辨率图像作为图标,应用程序看起来就是锯齿状和模糊的,特别是在操作系统渲染字体和梯度时。 确保你使用264 ppi或更高分辨率的图片,并且看起来应该清晰和干净。 在比Retina屏的iPad具有更高分辨率的平板上(如Nexus 10 有300 ppi), 264 ppi的图像看起来仍然是清晰和干净的。
一个更好的方法是使用向量图(vector),那样可以在任何分辨率下缩放。

结论

用户界面关系到移动应用的成功与失败。 具有良好UI设计的移动应用打败那些速度更快,功能更多,但用户界面设计一般的应用的例子比比皆是。 如果你的应用方便用户学习并快速上手,则它在熙熙攘攘的应用市场上将会更容易成功。

关于作者:
大卫·塔尔博特(David Talbot),当前就任EverBank首席架构师。 拥有软件行业超过15年的从业经验和构建丰富的UI web应用程序的专业经验。 同时也是Applied ADO.NET以及大量技术文章的作者。 邮件地址是 david@legendarycode.com

更多精彩内容其他人还在看

网页设计技巧:iframe自适应高度的问题

所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
收藏 0 赞 0 分享

网页色彩对比与调和技巧分享

在对比状态下,色彩相互作用与单一色彩所带给人的感觉不一样,这种现象是由视觉残影引起的。当我们长时间注视某一彩色图像之后,再看白色背景时,眼前会出现色相、明度关系大体相仿的补色图像
收藏 0 赞 0 分享

网页色彩性质的分类

任何颜色都可以使用三原色——红、绿、蓝组合而成,三原色中只有红色是暖色,所以要判断作品颜色的冷暖,可以依据红色成分的多少而定。色调主要由明度与彩度组合而成,用来表示颜色的状态
收藏 0 赞 0 分享

使用Photoshop 制作网页线框图简单实用

这篇文章向大家介绍一套免费的Photoshop 线框图套件,这个线框图套件中包括通知、图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等
收藏 0 赞 0 分享

CSS使用技巧总结

偶尔看到一篇CSS常用技巧的总结文章,本人整理了一下,晒出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

Web设计师如何制作Retina显屏设备的图片

到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢
收藏 0 赞 0 分享

JPG,GIF及PNG各类型的图片格式详细解说

大家都知道网页上面的图像一般用jpg、gif和png这几种格式,他们有什么区别以及在什么场合下使用进行详细介绍看了下面的内容后你可能会有了自己的结论
收藏 0 赞 0 分享

组件化的前端开发流程详细说明

做前端的同学都知道,做的页面多了,东西就会乱,因此我们需要统一一个开发流程,开发流程的好坏,直接影响着页面开发的效率,间接影响游戏的时间为了更好的开发,我们做了一下总结
收藏 0 赞 0 分享

我们在囧途之UI工程师职业感慨

我是一名还不算特别优秀的UI工程师;这个要先说明一下UI不是美工,美工是以图片方案设计为主的岗位,而UI是指用户交互体验的设计
收藏 0 赞 0 分享

分享8款提高网页设计出色的CSS工具

当一个人需要编辑或修改网站设计,CSS发挥着重要的作用;今天就给大家分享8款非常出色的CSS工具,这些工具都是很出名的,能够解决开发当中常见的棘手问题,希望对你开发有所帮助
收藏 0 赞 0 分享
查看更多