• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 2018年高手总结了21条最值得掌握的移动App 设计基本原则

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

作者:彩云译设计 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,UI设计指南,经验分享,设计原则等相关知识,彩云译设计希望在学习及工作中可以帮助到您

移动应用是人们获取内容和服务的主流方式。但据《财富》杂志报道, 超过75%的用户只打开一次应用就再也不用了。今天,移动用户对应用程序期望更高——加载速度要快,使用要方便,还要有愉悦的交互体验。适应场景,同时尽可能少的交互层级(限制完成任务所需的操作步骤)正在迅速成为许多应用的标准。

那么到底什么可以算是「好的经验」呢?让我们来探索移动应用设计的基本原则吧。

一、减少认知负担

用户与应用交互时的阻力和困惑越少,应用被继续使用的机会就越大。

二、优化交互流程

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

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

1. 拆分任务

如果一个在用户端的任务包含很多步骤和操作,最好是把这个任务拆分成一定数量的子任务。一个很好的例子是在电商购物应用中的渐进结账流程,你能够从拆分出来的步骤数中清楚自己的每一步操作。

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

2. 充分利用已经掌握的用户信息

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

3. 让每一步衔接自然

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

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

4. 每一屏优先完成一个主要功能

通过遵循这个简单规则, 可以将界面变得更易于学习和使用。使用视觉权重对重要元素进行优化 (例如加大核心按钮的对比度)。

△ Airbnb 利用颜色将核心按钮进行突出

三、减少混乱

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

当你把界面塞满时, 给用户造成了很大的压力。每添加一个按钮、图片、图标都会使得界面更加的复杂。在台式机上桌面杂乱已经是很可怕的了,但是在移动设备上更糟糕,因为我们没有太多的屏幕空间让用户去操作。

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

提示:想要减少用户操作过程中某一个界面遇到的混乱,那么就只显示当前步骤中需要的内容。例如 ,当用户做出选择时,只需要显示当前用户需要的选项, 然后在下一个界面中展示细节。

△ 上图是一款叫做 Duolingo 的 iOS 应用,逐步深入的界面(一步一步的展示更多信息)

四、清晰的导航

用户如果很难找到想要的,就算界面再漂亮,内容再充实,也变得没有意义了。

一些导航的规则:

  • 不要隐藏。 避免隐藏导航,如手势操作因为大多数用户都很难找到它。
  • 一致性。开发者经常在一些个别的页面隐藏菜单。不要这样做,因为它很可能会让你的用户感到困惑。
  • 显示当前位置。没有告知用户当前位置是许多应用的常见问题。「我在哪儿?」这是一个应用需要告知用户的最基本的问题之一。

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

△ 图片来源:Google Design

五、结合手机自身特点

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

六、视觉引导要准确

UI 界面元素需要清楚的表达出哪些元素是可以交互的,哪些元素是不可操作的。

与桌面不同,用户可以使用鼠标悬停效果来判断某个元素是否可以操作,而移动用户只能通过点击某个元素来确定哪些元素是可以被操作的。好的设计应该让用户能够正确预判。

七、操作区域要友好

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

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

△ 图片来源:Apple

八、考虑拇指空间

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

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

△ 图片来源:Smashing Magazine

越大的屏幕,越不容易操作。

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

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

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

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

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

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

九、中断设计

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

例如,用户可能在等火车的时间里使用应用。对于移动应用场景的考虑是至关重要的。让应用在用户中断使用后能够很容易的恢复到之前的状态。

Twitter 是中断设计的一个很好的例子。应用的通知列表显示了所有最近的通知。只要用户停留在这个页面,应用就不会自动更新列表——它只是在列表的顶部显示一个状态「X 新通知」。这允许用户在一段时间后重新使用应用时不会丢失当前的位置。

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

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

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

△ Spotify 能够做到多终端无缝体验。你可以在 Mac 上设置一个播放列表,你的 iPhone 上马上就可以使用它。当你在设备之间切换时,应用会记住你停在哪里。

十一、直观的手势

只在应用中使用最自然的手势。为什么?因为手势是隐藏的控件。

正如 Thomas Joos 在他的文章《超越按钮:拥抱手势操作》中所指出的那样,在用户界面中使用手势的最大缺点是学习曲线。每次用手势代替可见控件时,应用的学习曲线就会上升。这是因为手势具有较低的可发现性——它们总是隐藏的,人们需要能够首先识别这些选项。这就是为什么只使用被广泛接受的手势(用户希望在你的应用中使用)的原因。

一个好的手势例子就是为 feed 流应用进行刷新。

△ 图片来源:Ramotion

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

应用应该响应快速且灵敏,但是不可避免的会遇到一些特殊情况。

例如,非常慢的网速。如果不能缩短加载时间,至少也要让等待不那么乏味。可以先加载信息的框架结构(即临时信息容器)。

框

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2017-08-06Web 设计 实现干净代码的12条定律[图文]
  • 2018-08-23如何做好标签系统设计?来看我的实践过程!
  • 2018-08-23超全面的对话式交互设计流程
  • 2018-01-07React 安装
  • 2018-08-23解锁构图新姿势!让平面作品变得高大上的3个构图技巧
  • 2017-08-06网页制作不得不知道的几个技巧
  • 2018-08-23更新Adobe全家桶之前,这些关键信息不要错过了
  • 2018-08-23大盘点!互联网产品Logo 的分类及特点总结
  • 2017-08-06无法查看网页的源文件该怎么办?
  • 2018-08-23腾讯专业干货!Web图像的常见应用策略与技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 2017年快结束了,网易高手是怎么做设计年度总结的?
    • 以用户为中心作为设计的标准
    • 平面设计中如何留给别人最好的第一印象?
    • ie6下关于html编码问题导致js出错css不被应用的解决方法
    • 网站的视觉设计路径应顺应用户习惯
    • 配色和字体都很棒,但为什么界面看着不高级?
    • 如何写好移动端产品文案?这儿有份超详细的规范指南
    • 学会插画的这四种玩法,能让你的UI体验更优异
    • 去掉a标签和按钮加背景图片虚线/阴影完美解决方案
    • Div与table的区别在速度和加载与网页应用等等中的差别介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有