赞助商
立即赞助

2018年高手总结了21条最值得掌握的移动App 设计基本原则

UI设计3年前 (2021)更新 流光
2.1K 0 0

移动应用是们获取内容和服务主流。据《财富》杂志报, 过75%用户打开应用再也不用了。今天,移动用户应用程序期望更高——加载速度要快,使用要便,要有愉悦交互体验。适应场景,时尽可能少交互层级(限制完成任务所需操作步骤)正在迅速成为许多应用标准。

那么到么可算是「好的经验」呢?我们来探索移应设计的基本原则。

一、减少认知负担

户与应交互时的阻和困惑越,应被继续使的机会就越大。

二、优化交互流程

了解户如何与应交互是优的必要条件。 作为设计师和开发人员,我们应该在整个交互流程中解户的目标。这将帮助我们确定任务成过程中最见的问题。

这有种比较流行的优化交互流程的方法:

1. 拆任

如果一个在用户端的任包含多步骤和操作,最好是把这个任拆成一定数量的任。一个好的例是在商购物应用中的渐进结账流程,你能够从拆出来的步骤数中清楚的每一步操作。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 通过限制用户端所需要的操作数量,可以提升用户对流程的理解。图片来源: Dribbble

2. 充利用已经掌握的用户息

在下面的例中可以 Uber 应用所考虑的点——应用不会去询问用户的位置,它能够基于数据动定位。 利用这一功能,用户只需要选择乘车的位置就可以叫车。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

3. 每一步衔接自然

当任务需要户成许多步骤时, 通过清楚显示一步的操作来帮助户。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 这个界面指引通过在每次户操作之后供一步骤来引导户。图片来源: Dribbble

4. 每一屏优先成一个要功

通过遵循这个简单规则, 可将界面变得更易于习和使。使视觉权重对重要元素进行优 (例如大核心按钮的对)。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ Airbnb 利颜色将核心按钮进行突

三、减少混乱

好的 UI 设计只展示相的信息(信号),并避免想看到的信息(噪音)。

当你把界面塞, 给用户造成了大的压力。每添加一个按钮、图片、图标都会使得界面更加的复杂。在式机上面杂乱已经是可怕的了,但是在移动备上更糟,因为没有多的屏幕空间让用户去操作。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 清晰的标签栏(右)要比凌乱的(左)起来要舒服的多。 图片来源: Apple

提示:减少用户操作过程中某一界面遇到的混乱,那么就只显示当骤中需的内。例如 ,当用户出选择时,只需显示当用户需的选项, 然后下一界面中展示细节。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 图一款叫 Duolingo 的 iOS 应用,逐深入的界面(一一的展示多信息)

四、清晰的导航

用户如果很难找到的,就算界面再漂亮,内再充实,也变得意义了。

一导航的规则:

  • 不隐藏。 避免隐藏导航,如手势操作因多数用户都很难找到它。
  • 一致。开者经常在一个别的页面隐藏菜单。不要样做,因为它很能让你的用户感到困惑。
  • 显示前位。没有告知用户前位是许多应用常见问题。「我在哪儿?」这是个应用需要告知用户最基本问题。

提示:最使用标准的导航模式。比标签栏( iOS )和抽屉导航( Android )。大数用户熟悉两种导航模式。果一个简单的决方案有效,就不需要特立独行。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 图来源:Google Design

五、结合手机自身特点

手机不是台式机的缩小版,它们有自身的细微差别和。

六、视觉引导要准确

UI 界面元素需要清楚的表达出哪元素是以互的,哪元素是不操的。

与桌不,用户可以使用鼠标悬效来判断某个元素是否可以操作,而移动用户能过击某个元素来确定哪些元素是可以被操作。好设计应该让用户能够正确预判。

七、操作区域要友好

移动界设计可操作元素时,为了让用户可以很便击,关键是要把击目标设计足够大。根据经验,般有效触控积是7-10毫米。这个区域可以让用户在击目标可以看到目标边缘。用户能够知他们是否准确击了目标。

另外,要确保元素之间的位置要太相。应该在点击目标之间设置适当的间距,防止误触。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 图片来源:Apple

八、考虑拇指空间

为拇指设计仅是为了把目标区域设计得足够大,同时要考虑到设备的持有方式。

虽然拇指可以在屏幕中的大多数域操作,但是只有三之一屏幕是真正毫不费力的域,这个域被称为拇指舒适。其域需要指伸展,甚至改变持握方式才能操作。基于的持握方式(左、右或者双),可以移动备中的安全域(在下图中的绿色域)。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 图片来源:Smashing Magazine

越的屏幕,越不易操作。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 惯用右手的拇指区域,根据 Scott Hurff的研究

为移动端应用设计时需要考虑所有不同区域:

绿色区域是导航选项或者有频繁交互操作(如动指引按钮)最佳位。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 「分享」按钮是在绿色拇指区域。

红色区域是潜在危险项的最佳位置(例如删除或者抹掉)。户大可会误触。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 在难到达的红色区域放置破坏性操作(如删除和抹掉),因为希望户发生误触。

九、中断设计

我们生在一个中断的世界里。有些事情总是试图分散我们的注意,把我们的注意转移到别的地方。

例如,用户可能在等火车的间使用应用。对于移动应用景的考虑是至关重要的。让应用在用户中断使用后能够容易的恢复之前的状。

Twitter 中断设的一很好的例子。应用的通知列表显示了所近的通知。只用户停留这页面,应用就不会自动新列表——它只列表的顶部显示一状态「X 新通知」。这允许用户一段时间后重新使用应用时不会丢失当的置。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

十、努力创造多终端一致性体验

移动应用不是存在于真空中。

例如,用户通常用移动端浏览购网站,然后切换到台式机去购买。体验的转变让用户感知不到。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ Spotify 能够到多终端无缝体验。可以 Mac 设置一播列表,的 iPhone 马就可以使用它。当设备之间切换时,应用会记住停哪里。

十一、直观的手势

只应用中使用自然的手势。什么?因手势隐藏的控件。

正 Thomas Joos 在他的文章《超越按钮:拥抱手势操》中所指出的样,在用户界面中使用手势的最大缺点是学习曲。每次用手势代替见控件时,应用的学习曲就上升。是因为手势具有低的现——它们总是隐藏的,人们需要能够首先识别选项。就是为什么只使用被泛接受的手势(用户希望在你的应用中使用)的原因。

个好手势例子是为 feed 流应用进刷新。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 图片来:Ramotion

十二、使用框架界面让应用能够快速显示

应用应该响应快速灵敏,是不可避免会遇到些特殊情况。

例如,非慢的速。如果缩短载时间,至要等待那么乏味。可先载信息的框架结构(即时信息容器)。

框架界面是一个页面的空版本,其中息是逐渐加载的。不同于加载动画,它将用户的注力集中在数据加载本身,框架界面则将用户的注力集中在进度上,而不是等待间上。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ Slack 应用的框架界面

十三、关注初次使用体验

就像一个人一,应用不会有第二次机会给用户留下好的第一印象。如果不把第一印象做好,敢赌(80%的概率),用户不会再次使用了。

十四、必要的引导

对于引导规则来说,它不应该是通用性的,而是应该有利于人如何去使用这款应用。

设者应该以引导作一次契机,新手用户辟绿色通道。还一点,引导应该只初次使用时会出。

十五、空页面设计

空状态(或零状态)未发任何事的状态。这种状态不应该空白的界面(或者许多设师所的那样死的),它应该能够用户提供对接下操作的指导。

以 Spotify 的错误状态页面为例。它不能帮助用户理到底生什么,也不能帮助用户找到决方案:「我能做什么呢?」

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 应用中不应该有死胡同

比 NFL Fantasy 空状态。它空状态显示了条简单有用误提示。简单、礼貌、有指导性表明:

  • 出什么错,能的原因是什么。
  • 用户想要解决这个问题需要怎么做。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ NFL Fantasy 解释了什么用户什么内都看不到,并且告诉用户应该试怎么。 图片源:Emptystates

十五、使用功能动画改善交互体验

动画界面中解决了许多功能问题,同时使得界面活力灵敏。

十六、显示系统状态

当应用忙处理某操作时,应该让用户知道当的状态不卡死。视觉的变化让用户对应用一种掌控感。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 这应用通过动画告知用户加载内。 图片源:Ramotion

十七、导航的过渡

动画描述状态转换的具。它帮用户理解页面布局的变化,点击后的变化,以及如何我们需的时候始这样的改变。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 功能动画可以效的引导用户,使复杂的跳转变得易于理解。图片源:Jae-seong, Jeong

十八、视觉反馈

实世界中,对象会响应我们的交互。 UI 控件中,人们也待类似的的响应能力。

良的视反馈使得互验变得非常舒适。所有互元素(按钮)应该提供完美的视反馈。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 按钮响应用户的点击。 图来源:Shakuro

十九、人性化体验

性化

性化当今应用关键的部分之一了。这一与用户沟通机会,每用户提供他们所需的信息,让他们感觉到应用他们身的。

星巴克就是一个很的例子。应用使用用户提供的信息(例,他们经常点的咖啡)来提供特别的优。

二十、令人愉快的动画

与提高用户界面清晰度的功能动画不同,令人愉快的动画是用来使界面看来更加人化。种类型的动画能够让用户感受到设计者的用心。一令人愉快的小细节是应用与用户建立情感联系的机。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 图来源:Dribbble

二十一、推送的价值

烦人的通是用户卸载应用的首要原因(71%的受访者)。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 来源:Appiterate Survey

不要仅仅为你可以发送送知——条知都应该是用户有价值,并及时。下是在设计送知时需要考虑些事项:

1. 避免在短时内发送太多知

短时内送太多知,会导致矫枉过正——用户不能进有效信息阅读,而是接跳过它。尝试将不消息组合在起,以限制知量。

2. 知时

不仅知内容很要,什么时发知样要。不要在奇怪时发送知(比如午夜)。送知最佳时应该是应用使用高峰时——在下午6到10。

3. 综合其他渠发布信息

送知不是用户发送消息唯。使用电子邮件、应用知和新闻送信息,根据你想要分享内容紧急程度和类型来知用户要事件。

2018年高手总结了21条最值得掌握的移动App 设计基本原则

△ 根据紧急程度和内容来选择合适知类型。 来:Appboy

结论

伟大设计应该是形,使用它专注于自己目标而不是界。作为名设计师,应该努力去设计形界,为这样界既满足了用户需要,也提供了良好用户体验。

就像他指南一样,上面总结的一些只是开始。一定要把它们与自己的想法进行结合,才达到最佳的效果。

原链接:《The Guide to Mobile App Design: Best Practices for 2018 and Beyond》 作者: Nick Babich

注译者的微信公众号:「彩译设计」

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范
iPhone X 发布后,很多设计师吐槽屏幕的形状。当大部分的吐槽逐渐平息下来,我依然没看到关于屏幕转角细节设计的讨论。 你...
iPhone X
网易UEDC – 吴挺聪 :很多设计师做品牌设计,会把较多精力放在LOGO设计上,却很少有人去认真设计一款辅助图形。其实一个好的...
logo设计
前段时间一直在做运营类设计,banner 在其中占了较大比重,为此就想写一篇阶段性总结。其中部分观点参考了相关视频教程和文章...
Banner
一、功能逻辑梳理 在做框架设计与加减乘除合并同类项之前,梳理业务与产品逻辑对于复杂的流程界面来说是至关重要的。 我们举...
App设计
这是一套较系统的交互设计原则,我将会结合一些案例进行讲解,希望你有收获。 此书属于作者博客分享,并未成书出版,总结于1...
交互设计
很多人误解 UI设计师做的只是画图标和「填色」,也有一些刚入行 UI 的朋友,拿着原型图就开始做设计稿。其实 UI设计师也叫做...
App设计
@Jenny黄静雯 :​​​相信很多同学会有,看理论的时候觉得很有道理,看完后却不知该怎么实践,久而久之便会产生「看过很多设计...
ICON