界面设计分析概要.ppt

1、ipone用户界面分析,2020/9/24,Contents / 目录,1.,2.,3.,4.,5.,我的总结,我所知道的手机界面,ipone界面设计流程,ipone界面的应用类型及其特点,对ipone界面设计的解剖,2020/9/24,1.,2.,3.,4.,5.,我的总结,ipone界面设计流程,ipone界面的应用类型及其特点,对ipone界面设计的解剖,我所知道的手机界面,2020/9/24,手机界面 ？,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,手机用户界面是用户与手机系统、应用交互的窗口，手机界面的设计必须基于手机设备的物理特性和系统应用的特性

2、进行合理的设计。它是指对软件的人机交互、操作逻辑、界面美观的整体设计。,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,手机应用界面设计：手机应用作为手机第三方程序，已逐渐把用户带入使用本地客户端上网的时期。手机应用种类多样，其中一些应用软件功能类似，但都在设计与使用上有所差异，“良好的用户体验”已成为APP竞争的标配。,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,手机用户界面的好坏决定着整款产品的好坏。用户的大众化以及功能的复杂化使手机界面的设计及其使用环境的技术成为关心的焦点，尤其在

3、竞争激烈的市场环境中，人性化的用户界面设计是诸多设计中受欢迎的。,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,用户界面设计原则,1.简易性 2.用户语言 3.记忆负担最小化 4.一致性 5.清楚 6.用户的熟悉程度,7.从用户的观点考虑 8.排列 9.安全性 10.灵活性 11.人性化,Main Page,2020/9/24,1.,2.,3.,4.,5.,我的总结,我所知道的手机界面,ipone界面应用类型及其特点,对ipone界面设计的解剖,ipone界面的设计流程,Main Page,Topic 1,Topic 2,Topic 3,T

4、opic 4,Topic 5,在人和机器的互动过程中，有一个层面，即我们所说的界面。从心理学意义来分，界面可分为感觉(视觉、触觉、听觉等)和情感两个层次。 用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,保持界面的一致性,置界面于用户的控制之下,用户界面设计的设计过程原则：,减少用户的记忆负担,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,结构设计也叫概念设

5、计，是界面设计的骨架。通过对用户研究和任务分析，制定出产品的整体架构。在结构设计中，目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。ipone的手机结构设计明显，让用户很容易找到。,结构设计,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,视觉设计要达到用户愉悦使用的目的。视觉设计的原则如下：。 1)界面清晰明了，允许用户定制界面。 2)提供默认、撤销、恢复的功能 3)提供界面的快捷方式。 4)尽量使用真实世界的设计。如：电话、打印机的图标设计，尊重用户以往的使用经验。 5)完善视觉的清晰度。条理清晰;图片、文字的布局和隐喻不要让

6、用户去猜。 6)界面的协调一致。 7)同样功能用同样的图形。 8)色彩与内容。整体软件不超过5个色系，,视觉设计,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,一个优秀用户界面应该遵循一些人机界面设计原则，这些原则来源于人用户思考和工作的方式，而不是设备的性能。如果一个用户界面没有吸引力，令人费解，或不合逻辑，那么即使是一个伟大的应用程序也会因此让用户觉得烦琐。但是，一个美观的，无需用户思考且引人入胜的用户界面不仅可以改善应用程序功能，还能激发用户对应用程序产生正面情感和依赖感。,人机界面原则：创建优秀的用户界面,2020/9/24,1.,

7、2.,3.,4.,5.,我的总结,我所知道的手机界面,ipone界面的设计流程,对ipone界面设计的解剖,ipone界面的应用类型及其特点,2020/9/24,应用类型,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page, 效率型应用 实用工具应用 沉浸型应用,iPhone平台有三类型的应用：,每一种都有各自不同的特点和应用场合。,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,效率型应用用于帮助完成日常的一些工作，如收发邮件、即时通信、照片管理与分享。 用户快速查看、跳转、执行、完成，连贯的动作要求界面简单直接

8、，让用户可以全神贯注于任务本身。这类应用一般都附带自然的层级结构。所以，表格视图可以在这类软件里大派用场。,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,附带层级结构的效率型应用,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,实用工具用于执行一项简单的任务，简单容易配置就可以了。主要突出其实用性，在天气的界面中，背景会随天气的变化而变化，便于人们识别；细节到每一天的不同时刻天气的变化，以及未来五天的天气。,Main Page,Topic 1,Topic 2,Topic 3,Topic 4

9、,Topic 5,沉浸型应用可以为用户带来极致的娱乐和游戏体验，这类应用可以进一步细分为游戏和虚拟仿真类。这类应用和标准的系统界面不同，用户希望这类应用能够给他们带来最大的娱乐，因此，界面设计的自由发挥度比较高，仿真的、可爱的设计风格往往能恰到好处。,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。 iPhone内置的备忘录应用就是一个使用隐喻的典范。除了基本的删除和邮件这些图标隐喻，整个产品的外形：棕色的头部导航，米黄色的纸质背景

10、，配合细致的行隔线和垂直的双细线，俨然就是一可爱的小小备忘本。将产品与实体对应起来，用户一看就知道软件的用途。,Main Page,使用隐喻,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,一目了然，即看即点,删减软件功能：功能越少，界面越简洁。移动产品的设计，减法远比加法来得重要。,减少输入：尽可能地减少输入，直接为用户提供选项。如索引列表，既方便用户记忆，也可以帮助用户快速扫描并直接选中； 避免不必要的交互：用户也不是你想像中那么傻的，不要一味提醒他们如何操作（帮助越多说明你的软件越难用），设计时应该关注如何更有效地引导用户集中精力快速完

11、成任务。,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,去到哪里，手指就跟到哪里，多种动作随时变换，直接感知与设备交互，如此自然直接的“输入”，如果能够灵活合适地运用，除了可以带来良好的用户体验，还能极大满足用户的控制欲望。 当然，手指的一个最重要问题在于它比鼠标指针大得多，灵敏度和精确度会有所欠缺。一些同时使用鼠标和键盘的操作（如复制、粘贴、选择文字）是手指很难完成的。设计上应该考虑由此带来的影响，避免滥用。如果你的应用支持比较复杂的手势（长按、捏），确保用户能够理解他们的含义，并且为这些手势操作提供直接的响应反馈。,Main Page,灵活运用手势支持,T

12、opic 1,Topic 2,Topic 3,Topic 4,Topic 5,iPhone游戏里出现横竖屏设计比较正常，都是视具体的游戏类型来分。但一般的效率型应用或实用工具，也是横竖屏都有。横屏状态下，虚拟键盘的键面会更大一点儿，更便于手指操作。 有些用户或是喜欢横屏的浏览方式（如备忘录、音乐），或是希望打横可以看到更多的信息（如计算器）。,Main Page,考虑横竖屏方向变化,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,纵观所有的内置应用，反馈可谓无处不在。由于大部分的操作都是通过手势（其实还有抖动、语音输入方式）完成的，通过一些明显的变化来响应用户做

13、出的操作，能够给予用户极大的信心。 手指的大小盖住了滑块，为了将选中的信息反馈给用户，两边的扩音器图标同时使用了外发光样式。,Main Page,合理的反馈,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,内置的短信发送写信人和收信人左右区分，信息内容通过时间顺序排列下来，整个信息来回历史一目了然。呼叫程序同样出色，重新设计的数字键盘弱化了字母排列，突出数字，由此换来宽大容易点击的屏幕空间。,Main Page,一目了然的短信历史查看和拨号呼叫,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,简洁易用的界面空间

14、，合理地按钮布局，让用户更快更容易点击。 输入信息区域以白色为底的按钮，更易操作；拨号以圆圈的外形呈现，符合指面的轮廓，不易按错，可以更好地引导用户，用户点击起来还是得心应手。,2020/9/24,1.,2.,3.,4.,5.,我的总结,我所知道的手机界面,对ipone界面的解剖,ipone界面的应用类型及其特点,对ipone界面设计的解剖,2020/9/24,ipone 界面剖析,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,ipone的颜色和边界在这个应用上有很明显的区别。ipone舍弃了边界，依靠色彩来体现交互、信息的分隔;相应地控制

15、也变成了隐形的，基于标签或者图标以及主题颜色的控制。,颜色和边界,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,ipone的一级锁屏界面中，用手指从下往下滑动去打开控制中心。在锁屏界面的，可以看到在屏幕底部中间有一个箭头符号，以方便用户清晰的知道其作用。时间的显示数字较其他偏大，有效的突出内容，便于人们识别。,锁屏界面,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,采用了扁平化设计，图标具有突出的视觉效果。 美观性：它确保图标简单美观，富有吸引力，这样用户才愿意让这些图标长久占据有限的屏幕空间。 可识别特点

16、：让用户在大量图标中轻松找到该应用程序，有自己的特点。,一级主界面,Main Page,圆角 反光效果,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,ipone在整个版式上舍弃了边界，依靠色彩来体现交互、信息的分隔;相应地控制也变成了隐形的，基于标签或者图标以及主题颜色的控制。字体变得细长。,一级主界面版式,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,ipone信息输入的界面选择了用虚拟键盘来替代。键盘的整体颜色以白色为主，数字换行等按钮则运用浅灰色，整体简单，易懂，有良好的统一性。,二级界面,Main

17、Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,设置的界面中，能让用户一目了然其功能及其内容。飞行模式是采用滑动的模式；通知中心一栏，如果有新消息右上方则会变为红点提示；服务于体验的设计才是出色的设计。,二级界面,Main Page,能根据时间和地点智能地分组管理你的照片和视频，能快速找到任何时间、任何地点拍摄的内容。 下部的状态栏中分照片和相薄两方面的内容排版,相册界面,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,控

18、制中心将背景透明化，上部分以圆圈的形式排列，深灰和白色的运用；调节的菜单滑行也是符合指面的圆点造型；在下部分，因为考虑到手电筒的广泛使用性，而将它和其他图标的颜色区分,控制中心界面,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,导航栏,状态栏,工具栏,导航栏出现于屏幕的上方，位于状态栏之下。 这些应用程序通常以一种层级的方式组织信息。 导航栏与浅灰色的背景颜色以及正文字体颜色不同，它用的是蓝色，能吸引人的视觉，简洁易懂。,导航栏,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main P

19、age,状态栏包括手机信号强度、当前网络连接和电池电量等。图形简洁，一目了然。 iPhone中的图片程序可以用几秒钟的时间隐藏掉状态栏、导航栏和工具栏等，以全屏的方式显示耽搁图片。且用户只需要轻点屏幕，就可以马上看到状态栏、导航栏和工具栏等。,状态栏,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,工具栏出现于屏幕的最下方，提供可以对当前页面对象进行的操作。 当用户在邮件系统中阅读一条消息时，应用程序就会提供一个工具栏，里面包含了一系列的按钮，用于删除、回复和移动该消息，还有查看新邮件和编写新消息等。,工具栏,Topic 1,Topic 2,

20、Topic 3,Topic 4,Topic 5,Main Page,工具栏中的按钮以均匀方式水平分布。对工具栏中的按钮数目进行限制可以使用户更容易点击到他们需要的按钮。少于或等于五个的工具栏按钮是合理的。,工具栏的内容,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,在设计工具栏上的图标或屏幕的布局时要注意高度的不同。 可以为工具栏指定颜色和透明度来使它的整体外观跟你的应用程序以及其他栏（即导航栏，标签栏，状态栏）一致。你可以使用自定义颜色或者选择一种标准颜色：蓝

21、色（默认颜色） 黑色 还可以在工具栏中加入半透明的效果，前提是这样做能优化你的应用程序的外观。当你使用半透明的工具栏时。尽量保持工具栏的外观和应用程序的其他栏的一致性。,工具栏的尺寸和颜色,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,ipone APP尺寸,Main Page,For ipone 5 : 120*120,同为圆角矩形图标,For ipone 4S : 114*114,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,ipone 菜单界面,Main Page,ipone并没有一个明确和固定的菜单

22、模式.一些类似菜单的操作通常是通过弹出选择，或者是拆分成几层，一次次点击进入更深层的页面去寻找按钮的形式来达成.它尽可能的在做缩减功能。,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,ipone 导航界面,Main Page,iPhone的应用程序载入飞快且易于使用。无论这个应用程序能够完成能发送邮件或者是娱乐任务，它必须具有以下特点：响应快，简单，美观且流线型的用户界面。,2020/9/24,Android 和 ipone 对比,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,Main Page,Android主界面APP,I

23、pone主界面APP,Android屏幕分辨率多样化带来的界面适配问题、按键布局混杂；它的APP布局以及APP自身的设计，没有统一性，很杂很乱。,iPhone的APP则保持了很好的统一性，都是以圆角举行的形式出现，布局美观，辨析度很高。,2020/9/24,小结,Main Page,Topic 1,Topic 2,Topic 3,Topic 4,Topic 5,审美的完整性并不是一个用来衡量ipone应用程序有多漂亮的标准。 它的作用是衡量外观与功能相匹配的完整性。一个高效的应用程序应保持微妙的装饰元素以及装饰背景，同时又通过标准控制和行为以突出任务。 ipone界面元素在这样的应用程序里是细致的.,2020/9/24,1.,2.,3.,4.,5.,对ipone界面设计的解剖,我所知道的手机界面,ipone界面的设计流程,ipone界面的应用类型及其特点,我的总结,2020/9/24,我的看法,Main