4000-888-103

资讯动态移动APP设计完全指南-关于UX, UI和参与感资讯详情

移动APP设计完全指南-关于UX, UI和参与感

2019-11-12 14:40:50

1. 移动APP设计

目录

1. 移动APP设计

2. 优秀移动APP UI设计原则

2.1 一致性

2.2 最小与最简

2.3 掌控(让用户控制)

2.4 移动设计小窍门(文字,图像,视频等)

2.5 更多移动APP设计小技巧

2.6 个性化

2.7 无障碍

3. 界面与APP案例

3.1 闪屏

3.2 引导页

3.3 登录与个人页

3.4 首页(菜单)

3.5 权限

3.6 电子商务

3.7 信息流

4. 测试与反馈

4.1 反馈回路

4.2 工具

 

2. 优秀移动APP UI设计原则

2.1 一致性

一致性,是优秀移动端UI设计的关键。对于一款令人着迷的APP来说,能够凭直觉操作的用户体验是至关重要的。

 

用户熟悉

想要建立一致性,你得善于利用大家熟悉的界面和操作来降低用户的学习曲线。

举个栗子,信息流(类似于朋友圈的地方)界面可能会极其复杂。然而,很多用户是熟悉它的。大家对桌面端和移动端的这类界面都已经耳熟能详啦。这意味着什么呢?它说明用户在即使从未使用过信息流的情况下,也具备较高的信息流使用能力。

作为一名APP设计狮,非常重要的一点是能遵循这些大众熟悉的界面设计并把它们运用到你的作品中。

想了解更多这类案例,请直接移步至本文的界面与APP案例部分哦。

 

直觉操作

这一点也和前文的“用户熟悉”原则类似。用户熟悉,主要依赖的是当下流行的设计形式,而凭直觉操作又有些不同。

当用户在使用你的移动APP时,最好不要让他们思考这个流程。

用户体验应该是出于直觉的-让他们不费脑子地直达目标。

为了做到这一点,设计师必须具备正确的思维:如果自己是用户,当下会如何进行交互?这就涉及到定义交互流程了,最重要的是缩短每一步流程之间耗费的时间。

建立凭直觉的操作是移动UI设计中至关重要的一点。做不到这一点的话,放弃率将会变高,体验感将大打折扣,用户流失率也会增加。

 

2.2 最小与最简

功能最小化

移动端的设计意味着将最小化的概念运用到你的APP体验中。最简化在移动设备上亦至关重要。因为容错范围太小所以最好别让你的用户失望。

断舍离便是实现最小化的好办法。经验法则告诉我,不需要的信息都应该去掉。不仅对内容来说是这样,APP中诸如菜单等基础模块都是如此。

一次性向用户展示太多内容也是不可取的。这里推荐一个很棒的解决办法那就是使用可折叠元素或渐进展开听起来可能有点复杂?但它其实是一个很简单的概念,能方便你的用户操作界面中的大量信息。

 

简单的导航

对于导航、内容和元素来说也应该最小化。你要做的是帮助用户简便、高效地导航。

APP导航太复杂、耗时太长或与其他元素不统一都会导致用户流失。

为了解决这些困扰,这里有一些关于导航的小建议:

 

让导航一直可见

导航内部使用标准组件-也就是说安卓平台使用导航抽屉,iOS平台则用tab标签栏。

一致性-不要混合不同的模式,在你的APP中应该始终保持一致的风格。

让用户知晓他们当前的位置。要做到这一点,得保证当前导航位置一直可见。

 

最小化用户输入

在移动端打字永远不会像在大键盘那样舒适。用户在使用表格时经常遇到输入的麻烦。这种情况在移动端APP很常见也无法避免。

一种常见的错误就是把桌面或笔记本的表格样式用到移动端。这种看似快速的方法其实并不讨巧-在移动为主的世界,需要用移动为主的思维来进行设计。

 

一些关于用户输入的基本原则:

  • 少即是多-非百分百需要的输入框都可以去掉。它们的存在是一种阻碍,应该被忽略。

  • 自动补全功能是设计师们考虑用户输入时最棒的朋友。

  • 动态验证在移动端很重要。没有什么比终于等到页面刷新,却告知你某个输入框出错了更让人抓狂的了。这时候用户可能会毫不犹豫地离开,不想再输入第二遍。

 

2.3 掌控(让用户控制)

要创造良好的移动用户体验,必须让用户感到一切尽在掌控之中。要做到这点,APP应该时刻呈现出用户可操作的元素,并且始终秉承一致的设计和可预测性。

 

让元素一致并可预测

如果用户对一款APP中的操作有所预测且验证正确,他们便会有自己能够掌控的快感。建立这种体验是移动UI和UX设计中的基本环节。

在移动端,用户无法悬停在某个元素上查看其交互功能。这意味着我们设计的组件必须统一,以帮助用户快速理解它们是何含义。

一个元素应该要让用户看上去就知道使用、点击、滑动它或和它交互后会发生什么。不要在交互中混合不同的设计风格,否则会导致歧义且很快让人烦躁。

 

我们都会犯错-处理错误

提醒大家在APP中避免出错是没用的。消除所有错误也是不可能的。错误始终存在,减少出错才是重点。

有时候出错是因为APP本身的问题。有时则是用户的原因。不管是何原因,如果不妥善处理都会破坏体验感。

最好的办法就是明确解释哪里出了问题并告诉用户以后该如何避免再次出这种错。

 

该回到哪?

一种常见的错误就是返回按钮出错,它会随着界面和流程数量的增加而出现。设计得糟糕的返回按钮会严重妨碍APP的操作流程。

糟糕的体验还包括直接把用户带到首页。应确保返回首页的路径是渐进的才好。

这个法则能保证用户可以导航回去检查输入过的信息或核对其他内容,而不用回到最开始重新走一遍整个流程。

 

2.4 移动设计小窍门(文字,图像,视频等)

文字设计

文字是你和用户交流信息的首要形式。因此,正确运用它至关重要。在你的APP中,排版应该是可读、易读的。

 

按照以下法则来考虑移动APP的排版会是个很棒的开始:

  • 字体集-还记得我们说过的用户熟悉性吗?这个原则同样适用于你的字体集选择。谷歌用的是Roboto而iOS用的是San Fransisco。在APP中遵循它们是不错之选。

  • 字号-我推荐16px。这个字号可以根据你的字体做略微调整。

  • 对比-让你的APP中字体和页面之间有足够的对比非常重要,这样才能保证内容易读。有的人喜欢在灰色背景上使用浅色字,但这很难阅读。另外,由于很多时候设备会在户外使用,屏幕反光可能也会使对比度低的内容更难或无法阅读。

 

在个别情况下,这些方法可以让你的文字看上去阅读

  • 限制一行的长度-这让你的用户在阅读时不必费功夫用手指放大。

  • 大写-但大多数情况下最好避免使用。

  • 行距-适当的行距带来舒适的阅读体验。行距太小会很挤,太大又会很松散。

 

补充说明谨慎使用专业术语

谨慎使用专业术语可能超出了设计的范畴。但我想它们还是有一定的关联性。不要把日常用语换成难懂的术语,否则用户会困惑。该用“首页”、“商店”、“我的”的地方就不要换成其他用户必须使用后才理解的新词语了。

 

图像

目前移动端界面是展示高质量、高分辨率图像的最先进屏幕之一。

在这上面作图得记住屏幕纵横比例。拉伸变形的图片真的会很掉档次。

最佳解决办法是使用自适应分辨率。这个操作会根据你的屏幕尺寸来调整APP中的图片分辨率。

随着新设备形状的出现,比如可折叠设备和其他五花八门的创意造型,自适应分辨率将会越来越重要。

iPhone X或许就是最好的例子。它使用的是和市面上大多数设备不同的分辨率,还有一部分被一个齐刘海遮挡了,技术上来说那里是块没用的空间。

 

视频

视频正在快速成为最重要的媒介,尤其是在移动端。在你的APP中正确运用它很关键。

研究表示很多用户喜欢竖屏观看视频。这种偏好表示你需要兼顾横屏和竖屏的视频展示。

Facebook和YouTube或许就是不错的范例。

 

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png