UX初级教程3:手机应用设计方案

用户头像
北京/UX设计师/6年前/1819浏览
UX初级教程3:手机应用设计方案
用户头像
aefrost

用户体验初级教程第三篇翻译。


移动互联网是当今世界的主流。那么在这个竞争激烈的市场中,移动设备上的应用应该怎样设计才能做到有用、可用、好用,并以此来吸引及留住用户呢?

 

下面给出了7条建议,我认为这些是设计出真正好用的应用的关键。

 

1、 一屏一任务

减少用户操作成本

 

在APP中,你设计的每个屏幕界面,应当显示的是对用户来说实际有用的单个操作。将不同的操作设计在不同的屏幕上,每屏只留一个操作,保留一个CTA。这样的话我们的APP会更易学、易用、易扩展。

 

通过优步的例子来说明。优步知道他们的用户使用APP的目的是为了打车。APP没有呈现过多的信息:它通过GEO技术自动获取用户位置,用户唯一要做的就是“(开始)打车”。


 


2、 化功能于界面

功能即界面,界面即功能

 

专注于功能,去掉与用户任务无关的其他元素。由于关注点减少,应该快速引导用户查看他们正在寻找的功能。功能即界面。

 

谷歌地图是一个很好的例子:在改版后的界面中谷歌移除了所有不必要的面板与按钮。他们称此为:地图就是界面。

 


Ps:可能有人跟我一样,在印象中导航应用就是这个样子的。想象不到谷歌地图之前的样子。我找了个之前的版本,话说放这个图应该不过分吧……


undefined 

此图来源太平洋电脑网,若侵权请告知。


3、 疏密有度

通过负面空间来吸引人们对重要内容的注意力。

 

留白或着说“负面空间”是指设计或页面布局元素之间及其周围的空白,经常被忽略、无视。虽然许多设计师可能认为这是对宝贵屏幕资源的浪费,但空白空间是移动设计中必不可少的元素。

 

留白应该被看作是主动的元素,而不是被动的背景——Jan Tschichold

 

留白不只影响着可读性及内容的优先级,它同样在视觉布局中占据重要地位。所以,可以利用它来简化用户界面进而提高用户体验。


 


4、 让导航简单明了

一看就懂

 

帮助用户进行导航是应用程序的高优先级任务。移动端的导航必须是可见的、易用的、并且还要占一点屏幕空间。然而,由于小屏幕的限制,以及需要优先考虑内容,使得导航设计在移动设备上是一个挑战。

 

标签栏和导航栏非常适合导航选项较少的应用程序。它们的优点在于它们展示了主要导航操作,并且通过轻点标签可以快速切换到其他页面。


 


5、 单手操作

为你的设计适配各种屏幕尺寸

 

随着苹果6/6sp的发布,我们发现以后的手机屏幕尺寸将会越来越大。

 

这里是三种基本的用户握持图:

 

有85%的被观察者,他们单手使用手机。下图是从2007年后用户在不同尺寸的iPhone上的拇指操作热图。可以看出,屏幕尺寸越大,易于操作的屏幕区域就越小。

 


有必要调整设计以改善用户体验。确保你的应用程序,可以用单手轻松的(并且完全)在大屏幕上使用(比如iPhone 6或7)。将导航选项放置在拇指的可操作范围内。


 

6、 让应用瞬间相应

不要让用户等待内容的加载。

 

尽可能的让应用能快速响应。通过在后台处理一部分工作,让应用看起来响应速度很快。让程序在后台运行有两个好处:一是操作对用户来说不可见;二是操作在用户确认之前就已经开始执行。

 

我们通过Instagram的例子来解释这事:当用户一选中想要上传的图片,后台就已经开始上传图片。

Ps:所以你就会看到他嗖的一下就分享成功了。


 


7、 合理使用消息推送

三思而后行

 

我们每天会收到很多消息提醒,他们经常打断我们的正常工作。关键是,这些消息提醒都是无用的垃圾信息。用户受够消息提醒是卸载应用的首要原因(受访者占比71%)。


 


手机原本是为了接受有用的信息。不要为了吸引用户而发送消息提醒,除非你觉得这条消息对用户来说非常重要。

Ps:这条谁做到了?——来自使用者的嘲讽


提示:建立有效的移动应用消息传递策略的最佳方式是使用不同的消息类型 — 推送通知、邮件、应用通知以及新闻提要消息。使你的消息多样化 — 你的消息应该在完美的协同工作,以创建出色的用户体验。


 


总结:在设计移动应用程序时,最重要的是要确保它既有用又易用。如果它无法正常使用,那么对用户来说它就是没价值的,没人会使用它。同样,如果应用能用但是学习成本很高,用户也不会花时间去学习(12306这类除外)。好的UI和UX设计会解决这两个问题。

 

感谢观看!!!


硬广:烦请喜欢我搬运的文章的朋友去浏览一下我的个人网站UxBooks,增加点点击量。期望大家能多浏览几页,别进入首页就退出啊。


15
阅读原文
|
举报
|
36
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
科技医疗透明柜UI界面设计
我的钱包-UI界面设计-app
【新年UI图标】体育icon
【新年UI图标】影音icon
户外旅行飞机情侣假日出行
【新年UI图标】珠宝icon
【新年UI图标】旅行icon
Security Camera UI kit
UI 登录界面设计模板包
3D渐变流体抽象矢量UI背景图
【新年UI图标】积分icon
智能家居中心 简约 UI设计组件库
钱包ui模板
【新年UI图标】活动icon
【新年UI图标】30个图标
UI通用设计素材1
拟物风质感写实UI卡片合集源文件
【新年UI图标】礼物/活动icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
3D卡通UI界面图标可爱插画免扣素
盲盒APP UI设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
手表表盘UI系列
新能源APP应用UIKit
你可能喜欢
相关收藏夹
大家都在看
登录注册