人机界面设计(UI设计师必读!iOS 10 人机界面设计指南)

2024-03-08 15:00:02 :42

人机界面设计(UI设计师必读!iOS 10 人机界面设计指南)

本文目录

UI设计师必读!iOS 10 人机界面设计指南

小编:iOS 10人机界面设计指南中文版来了,感谢译者@喵大神经。

iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?

相关文章:

《UI设计师必读!iOS 10 人机界面设计指南 (1)》

《UI设计师必读!iOS 10 人机界面设计指南 (2)》

《UI设计师必读!iOS 10 人机界面设计指南 (3)》

文章索引

5. 图像(Graphics)5.1 应用图标(App Icon)5.2 自定义图标(Custom Icons)5.3 图片大小和分辨率(Image Size and Resolution)5.4 启动画面(Launch Screen)5.5 系统图标(System Icons)6. UI 栏6.1 导航栏(Navigation Bars)6.2 搜索栏(Search Bars)6.3 状态栏(Status Bars)6.4 标签栏(Tab Bars)6.5 工具栏(Toolbars)5. 图像(Graphics)5.1 应用图标(App Icon)

每个app都需要一个精美、令人印象深刻的图标,能在苹果商店和主屏幕夺人眼球。轻瞥图标的瞬间,是你的第一个机会来传达你的app的目的。你的图标也会在系统中经常出现,比如在设置里和在搜索结果里。

拥抱简洁。寻找个单一的元素能够表现你的app的精髓,然后通过一个简单但是独特的形状来表现这个元素。谨慎地添加细节部分。如果一个图标的内容或是形状过于复杂,那么细节就很难辨认了,尤其是在更小的尺寸时。

提供一个单独的焦点。为图标设计一个单独的、集中的点,使它能快速吸引注意力并且明确地代表你的app。

设计一个易于辨识的图标。用户不应通过分析图标才能弄清楚它代表什么。比如,邮件app的图标使用了一个信封,因为它普遍与邮件联系在一起。花点时间去设计一个好看迷人且精炼的图标,艺术性地传达你的app的目的。

让背景简单并且避免使用透明度。确保你的图标是不透明的,并且不要让背景变得杂乱。使用一个简单的背景,这样它就不会过度影响周围的其它图标。你没有必要将整个图标填满内容。

只有当logo全部或部分由文字组成时,才在图标使用文字。在主屏幕时,一个app的名称会在图标之下显示。不要包含没有意义的文字重复说明名称或是告诉用户该如何使用你的app,比如“Watch”或“Play”。如果你的设计包含了一些文字,那么请强调文字与你的app提供的实际内容相关。

不要包含照片、屏幕截图或是界面元素。影像细节在很小的尺寸会难于辨认。屏幕截图对于一个app图标来说太复杂了,也一般不利于传达app的目的。在图标中的界面元素会令人误解并且困惑。

不要复用Apple硬件产品的图形。Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。

不要在界面里到处放置app图标。在app里发现一个图标用于多种目的会让人困惑。反之,考虑使用图标的色彩方案。请参阅Color。

在不同的壁纸下测试你的图标。你不能预期用户会为他们的主屏幕选择什么样的壁纸,所以不要只是在一种深色和一种浅色的背景上测试你的图标。而是观察它在不同的照片上如何表现。在有动态背景的真实设备上试用它,因为背景会随着设备移动而改变视角。

保证图标的四角是方的。系统会自动覆盖一个遮罩层让图标变成圆角。

(1)App 图标大小

每一个app都必须提供一大一小两个app图标。小图标会出现在主屏幕,并且当你的app被安装后会被系统使用。为不同的设备提供不同尺寸的小图标。确保你的app图标在所有支持的设备上都看起来很棒。

大图标会被用在苹果商店。

让小图标与大图标类似。尽管大图标有着与小图标不同的用途,但它终究是你的app图标。大图标一般都和小的看起来差不多,但是可以稍微丰富一些,更有细节,因为不会有任何视觉效果叠加在它上面。

(2)Spotlight和设置图标

每个app都应提供一个小图标,在Spotlight搜索,如果关键词与app名称相符,iOS会展示该图标。同时,需要设置的app同样应该提供一个小图标用于在系统内置的设置app中展示。两个图标都应该清晰标识你的app——更理想地,它们应该与app图标相符。如果你不能提供这些图标,iOS就会压缩你的app主图标展示在上述场合中。

不要对用于设置的图标叠加或是描边。iOS会自动为所有图标加上1个像素的描边,以确保它们很好地呈现在设置白色的背景上。

Tips:

如果你的app能创建自定义文档,你无需额外设计文档图标,因为iOS会利用你的app图标自动创建文档图标。5.2 自定义图标(Custom Icons)

如果你的app含有不能用系统图标表示的任务或模式,又或是系统图标与你的APP风格不符,你可以设计你自己的图标。自定义图标通常被叫做模板,它不含有色彩信息并且通过mask来创建你在导航栏、标签栏、工具栏或是主屏幕快速操作视图看到的图标样式。

创作简单、辨识度高的设计。太多的细节会让图标看起来粗糙且不具可读性。为一个大多数用户都能正确理解并且不会反感的设计而努力。

设计一个纯色并带有透明度的、无锯齿、无阴影的图标。iOS会去除所有的色彩信息,所以没必要使用多于一种的填充颜色。允许用透明度来定义图标的形状。

使你的自定义图标与系统图标有所区分。你的图标不能轻易地与某个系统图标混淆。如果你想让你的图标看起来与iOS图标家族相似,请使用非常细的描边去绘制它。1pt的描边适用于大多数图标(在@2x分辨率下使用2px)。

保持图标之间一致连贯。无论你只使用自定义图标或是混合使用自定义图标和系统图标,在app中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。

提供两种自定义标签栏图标的版本。为未选中和选中态提供两个图标。选中态的图标经常是未选中态图标的填充版本,但是某些设计会使用不同的方法。比如,苹果的原生app经常会将内部细节反过来填充,增粗或减细描边,以及把图标放在譬如圆形的形状内。

不要在自定义标签栏图标内包含文本。如果你需要展示文本,请在标签下面直接加上标题并且适当调节位置。

不要复用Apple硬件产品的图形。Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。

自定义图标尺寸:

5.3 图片大小和分辨率(Image Size and Resolution)

iOS通过坐标系在屏幕上放置内容。该坐标系以点为测量单位,这些点映射到显示器中以像素表示。在一个标准分辨率的屏幕中,1点(pt)(1英尺的72/1)等于一个像素(px)。高分辨率屏幕有更高的像素密度。因为在相同的物理空间内有了更多数量的总像素,所以平均每点有了更多的像素。因此,高分辨率的显示屏需要像素更多的图片。

你必须为你的app支持的设备提供所有的高分辨率图像。依据设备的不同,将每张图像的固有像素乘以相应的比例系数,就可以得到该设备所适配的分辨率。一张标准分辨率的图像对应的比例系数为1.0,并被称为@1x图片。高分辨率的图像对应的比例系数为2.0或是3.0,并被称为@2x 和@3x图片。

打个比方,假设你有一张标准分辨率(@1x)的图片,它的分辨率为100px*100px。那么,这张图片的@2x版本就是200px*200px,@3x版本就是300px*300px。

为不同设备准备图片时请参照以下比例系数。

5.4 启动画面(Launch Screen)

启动画面出现在app刚开始启动时候。随后,启动画面会很快被app的首屏代替,让人感觉你的app是快速响应的。启动画面不是一个炫技的时机,它只是为了增强用户对你的app能够快速启动并且立即被使用的感受。每个app都应该提供一个启动画面。

启动画面

首屏

因为设备屏幕大小不同,启动画面的大小也有所差异。你可以以Xcode故事板或是一组静态(static)图片的形式为你的app所支持的设备提供启动画面。因为Xcode故事板灵活性高且易于适配,所以推荐采用该形式。你可以使用一个单独的故事板来管理你的所有启动画面。了解关于可适配界面的开发细节,请参阅Auto Layout Guide。

设计一个与你的app首屏几乎相似的启动画面。如果你的启动画面包含了与首屏看起来不同的元素,那么用户会在启动画面过渡至app首屏时经历一次不愉快的跳转体验。

避免在启动画面包含文本。因为启动画面是静态的(static),任何展示的本文都不能被定位。

淡化启动。用户通常会在不同的app之间频繁切换,所以请设计一个启动画面,能够让app的启动体验不易被人察觉。

不要打广告。启动画面不是一个宣传品牌的时机。不要设计一个类似开屏广告或是介绍窗口的登入体验。不要在启动画面包涵logo或是其它品牌元素,除非它们是你的app首屏的静态(static)元素。

静态启动画面图片

最好使用Xcode故事板制作启动画面,但必要时你也可以提供一组静态图片。根据设备创建不同尺寸的静态图片,并不要忘记包涵状态栏区域。

5.5 系统图标(System Icons)

iOS提供了大量表示常用的任务和内容类型的小图标,用来在导航栏、标签栏、工具栏和主屏幕快速操作中使用。因为用户对这些图标很熟悉,所以最好尽可能地使用这些内置的图标。

(1)导航栏和工具栏图标

Tips:

你可以在导航栏和工具栏使用文本代替图标来表示某项。比如,日历app在工具栏使用“今天”、“日历”和“收件箱”三个字符。你还可以使用固定空间(fixed space)元素为导航栏和标签栏的图标提供间距。

了解开发细节,请参阅UIBarButtonItem。

(2)标签栏图标

了解开发细节,请参阅UITabBarItem。

(3)快速操作图标

了解开发细节,请参阅UIApplicationShortcutIcon。

6. UI 栏6.1 导航栏(Navigation Bars)

导航栏出现在app屏幕的顶部,状态栏之下,它能实现在一系列有层级的app页面间的导航。当进入一个新页面时,导航栏的左侧会出现一个返回按钮,并且一般会标有上一个页面的标题。有时,导航栏右侧还有含有类似或完成按钮的控件,用来管理当前视图的内容。在分屏视图内,导航栏可能只会出现在分屏视图的一个单独窗格。导航栏是半透明的,也可能会有一个背景颜色,并且在适当时可以被隐藏,比如当前屏幕有键盘时、施加了某手势时或是某个视图在调整大小时。

Tips:

当不需要导航或是你需要多个控件来管理当前内容时,请使用工具栏。请参阅Toolbars。

考虑在导航栏显示当前视图的名称。在大多数情况下,名称提供了环境,因为它让用户知道他们在看什么。但是,如果给导航栏命名看起来是多余的,你可以让名称栏空着。比如,备忘录(Notes)不会在当前笔记的导航栏上放名称,因为内容的第一行已经提供了所需的环境线索。

考虑在app最高层级的导航栏放置一个分段控件。如果这么做帮助你扁平信息层级,让用户更容易找到他们想要的内容,你会深受其益。如果你在导航栏使用了分段控件,请确保为返回按钮选择了正确的标题。了解更多指导,请参阅Segmented Controls。

不要包涵多段的面包屑路径。返回按钮只能执行一个单独的操作,即返回到上一屏。如果你认为用户可能会因为忘记到达当前屏的完整路径而迷路,请考虑扁平你的app层级。

避免用过多控件填充导航栏。一般来说,导航栏最多只能包含当前视图的标题、返回按钮以及一个管理当前视图内容的控件。如果你在导航栏使用了分段控件,除此之外,该栏就不应再包含标题或其它控件。

给文本按钮留出足够的空间。如果你的导航栏含有多个文本按钮,文本可能会让多个按钮看起来像是同时运行的,导致按钮间难以区分。在按钮之间插入固定空间项使它们隔开。了解开发细节,请参阅UIBarButtonItem Class Reference中的UIBarButtonSystemItemFixedSpaceconstant value。

考虑在显示全屏内容时暂时隐藏导航栏。当你想要内容时,导航栏会令人分心。暂时隐藏该栏以提供一个更加沉浸式的体验。地图app在浏览一个全屏地图时会隐藏导航栏及其它界面元素。如果你要隐藏导航栏,允许用户通过简单的手势复原导航栏,比如点击。

使用标准的返回按钮。用户已经知道,标准的返回按钮会让他们在信息层级中按原路径返回。但是,如果你使用了自定义的返回按钮,请确保它们看起来像是返回按钮,有直观的表现,和界面的其它部分保持一致,并且在app内统一使用该自定义按钮。如果你用自定义图片替换了系统提供的返回按钮,请同时提供一个自定义遮罩图片(custom mask image)。iOS使用这个遮罩来实现按钮标题在转场时的过渡动画。

了解开发细节,请参阅UINavigationBar Class Reference。

6.2 搜索栏(Search Bars)

用户通过搜索栏在大量的信息中查找。搜索栏有两种样式:显眼(prominent)(默认)和极简(minimal)。“通讯录”使用了显眼搜索栏,含有引人注目的浅色背景。“照片”使用了极简样式,更好地融入了周边界面。搜索栏默认是半透明的,但也可以被设置成不透明的。有需要时,搜索栏也可以自动遮盖住导航栏。

显眼

极简

搜索栏含有一个单独的搜索框,该搜索框可以包含占位文本、清除按钮、书签按钮和结果列表按钮。除了搜索框之外,搜索栏还会含有一个退出当前搜索的取消按钮。

占位文本

清除按钮

取消按钮

书签按钮

结果列表按钮

让用户通过搜索栏而不是文本框去搜索。文本框不具备用户期待的标准搜索栏所拥有的外观特征。

包含清除和取消按钮。大部分的搜索栏都含有一个清除按钮用来清空输入栏的内容,以及一个取消按钮来快速退出搜索。

选择合适的搜索栏样式,使其能够反映出搜索功能在你的app中的价值。如果在你的app中搜索是个关键功能,使用默认的、显眼搜索栏样式。如果搜索功能使用频率不高,则使用极简样式。

必要时,在搜索栏提供线索和背景。搜索框可以包含占位文本来提示可搜索的类型,比如“搜索服装、鞋子和饰品”或只是简单的“搜索”二字。也可以在搜索栏正上方展示一行简明扼要的带有适当标点的文字,用来引导用户。比如股票(Stocks),就在搜索框上方展示了一行文本告知用户他们可以输入公司名称或股票符号。

考虑在搜索栏下方提供快捷键之类的内容。利用搜索栏下方的区域帮助用户更快地获取内容。比如浏览器(Safari),在你点击搜索框的时候会立即显示你的书签,无需输入任何关键词的情况下即可进入选择的对象。股票app在你对搜索栏输入的时候,会一边在下方展示相关的结果列表,你可以在列表中点击选择而不用完整输入字符。

必要时,为搜索栏添加书签和结果列表按钮。利用书签按钮让用户能够快速获得他们可能需要再次查找的信息,比如保存的、上一个或是最近的搜索记录。使用结果列表按钮来暗示搜索结果的存在,并在用户点击按钮的时候显示这些结果。但你无法同时展示上述两个图标。

了解开发细节,请参阅UISearchController和UISearchBar。

范围栏(Scope Bars):

范围栏可以附加于搜索栏,让用户定义搜索的范围。范围栏采用和搜索栏一样的外观。

专注于优化搜索结果而不是一味添加范围栏。当用户想在定义明确的类别中搜索时,范围栏会有很大的帮助。但是,更好的做法是优化搜索结果,这样用户就无需通过范围栏进行筛选了。

了解开发细节,请参阅UISearchBar。

6.3 状态栏(Status Bars)

状态栏在屏幕的顶端出现,显示与设备当前状态相关的有用信息,比如时间、运营商、网络状态以及电池容量。状态栏上真正显示的信息根据不同的系统设置有所变化。

使用系统提供的状态栏。用户希望状态栏在系统内部保持一致。不要用自定义的状态替换掉它。

根据你的app设计选择协调的状态栏颜色。状态栏的文本和指标的视觉样式非明即暗,在你的app中,可以统一使用一种配色,或是根据不同的屏幕选择单独的配色。暗色系的状态栏在浅色的界面上效果好,浅色系的状态栏在深色系的界面上效果好。

遮盖状态栏下方的内容。状态栏的背景默认是透明的,这样会显示出状态栏下方的内容。既要保证状态栏的可读性,又不能让人误解下方的内容是可交互的,通常通过以下几种技巧来实现:

在你的app中使用导航栏,它会自动显示状态栏背景以保证状态栏下方不会出现任何内容。在状态栏下方放置一张自定义图片,比如渐变或纯色背景。对状态栏下方的内容进行模糊处理。

半透明

全屏展示媒体文件时考虑暂时地隐藏状态栏。当用户想要集中注意力在媒体上时,状态栏会令他们分心。暂时地隐藏状态栏元素能够提供一个更加沉浸式的体验。比如照片app,在用户全屏浏览照片时时会隐藏多余的界面元素。

避免永久地隐藏状态栏。在没有状态栏时,用户需要退出你的app去查看时间或是检查他们是否连接至Wi-Fi。允许用户可以通过简单、易于发现的手势来重新唤醒被隐藏的状态栏。在照片app中浏览全屏照片时,用户只需在屏幕上轻点即可呼出状态栏。

在状态栏显示耗时较长的网络活动状态。

当你的app在使用网络,尤其是耗时较长的操作时,显示网络活动状态栏指示器,这样用户就知道活动正在进行中。请参阅Network Activity Indicators。

了解开发细节,请参阅UIApplication中的UIStatusBarStyleconstant 和UIViewController中的preferredStatusBarStyleproperty。

6.4 标签栏(Tab Bars)

标签栏在app屏幕底部出现,提供了在app不同部分间快速切换的途径。标签栏是半透明的,也可能会有纯色背景,在横竖屏都保持一致的高度,并且在出现键盘时会被隐藏。一个标签栏可以包含无数个标签,但其所能容纳的可见的标签数量根据设备大小和横竖屏模式有所变化。受水平空间的限制,当某些标签无法被显示时,最后一个可见的标签会变成“更多”, 并通过该入口前往其余标签列表的另一屏。

一般来说,利用标签栏组织应用程序级别的信息。标签栏是扁平化信息层级的好办法,并且一次性提供了前往多个平级信息类别或模式的途径。

不要在某个标签的功能不可用时去掉该标签或是使其失效。如果标签时而可用时而不可用,你的app界面会变得不稳定和难以捉摸。确保所有的标签都是有效可点击的,并且向用户解释当前标签内容不可用的原因。比如,当本iOS设备没有歌曲时,音乐app的“我的音乐”标签页就对如何下载歌曲做出了说明。

标签栏只能作为导航。标签栏按钮不应该执行其它操作。如果你需要在当前视图提供作用于元素的控件,你可以使用工具栏。请参阅Toolbars。

避免太多的标签。每增加一个标签就减小了选择单个标签的可触区域,并且增加了app的复杂性,让用户更难找到所需的信息。尽管“更多”标签可以展示额外的标签项,但这需要额外的点击步骤,并且对标签栏的有限空间没有很好的利用。太少的标签也是个问题,它会让你的界面感觉被分离。一般来说,在iPhone上使用3至5个标签,在iPad上则可稍微多几个。

使用角标(badge)低调地传达信息。你可以在标签上展示角标——一个带有白色数字或感叹号的红色椭圆——来暗示该标签视图或模式含有新信息。

总是在与标签栏相连接的视图切换内容。为了让你的界面符合用户预期,选择一个标签后应该直接作用于与标签栏相连接的视图,而不是屏幕其它范围的视图。比如,在分屏视图(split view)的左侧选择了一个标签,是不会导致右半部分突然变化的。在弹窗(popover)选择一个标签页不会导致下方的视图发生改变。

了解开发细节,请参阅UITabBar。

Tips:

理解标签栏和工具栏之间的不同十分重要,因为这两种栏都是出现在app屏幕的底部。标签栏让用户在app的不同部分间快速切换,比如时钟app中的“闹钟”、“秒表”、“计时器”。工具栏包含了执行当前视图相关操作的按钮,比如创建项、删除项、添加注释或是拍照。请参阅Toolbars。标签栏和工具栏决不会在同一个视图内同时出现。6.5 工具栏(Toolbars)

工具栏在app屏幕底部出现,包含了执行当前视图或包含内容相关操作的按钮。工具栏是半透明的,也可能会有纯色背景,并且通常在用户不太需要它们时被隐藏。比如,在浏览器(Safari)中,当你滚动页面表明你再阅读时,工具栏就藏起来了。当你在屏幕底部点击时,工具栏又会再次出现。当前屏幕有键盘时,工具栏也会被隐藏。

提供相关的工具栏按钮。工具栏必须包含在当前环境下有意义的常用操作命令。

考虑图标或文字按钮是否适合你的app。当你需要多于三个工具栏按钮时,图标可以实现。当你只有三个或是更少的按钮时,文字有时候看起来更加清楚。比如,在日历app中,文本就被当作按钮使用,因为图标可能会令人迷惑。因为使用了文本,“Inbox”按钮还能显示所有的日历和事件邀请数量。

给予文本按钮足够的空间。

如果你的工具栏含有多个按钮,文本按钮就会挤在一起,导致按钮间难以区分。在按钮之间插入固定间距使其分离。了解开发细节,请参阅UIBarButtonItem中的UIBarButtonSystemItemFixedSpaceconstant value。

避免在工具栏使用分段控件。

分段控件让用户切换内容,而工具栏更针对于当前屏幕。如果你需要提供切换内容的方式,请考虑使用标签栏替代。请参阅Tab Bars。

了解开发细节,请参阅UIToolbar。

developer.apple.com

译文地址:人人都是产品经理

译者:喵大神经

注:本文译者已授权,如需转载请联系译者。

简述多媒体人机界面设计原则

【答案】:(1)用户原则。人机界面设计首先要确立用户类型。划分类型可以从不同的角度,视实际情况而定。确定类型后要针对其特点预测他们对不同界面的反应。这就要从多方面设计分析。 (2)信息最小量原则。人机界面设计要尽量减少用户记忆负担,采用有助于记忆的设计方案。 (3)帮助和提示原则。要对用户的操作命令作出反应,帮助用户处理问题。系统要设计有恢复出错现场的能力,在系统内部处理工作要有提示,尽量把主动权让给用户。 (4)媒体最佳组合原则。多媒体界面的成功并不在于仅向用户提供丰富的媒体,而应在相关理论指导下,注意处理好各种媒体间的关系,恰当选用。

请简述人机界面设计应该遵循的原则

1.以用户为中心的基本设计原则在系统的设计过程中,设计人员要抓住用户的特征,发现用户的需求。在系统整个开发过程中要不断征求用户的意见,向用户咨询。系统的设计决策要结合用户的工作和应用环境,必须理解用户对系统的要求。最好的方法就是让真实的用户参与开发,这样开发人员就能正确地了解用户的需求和目标,系统就会更加成功。2.顺序原则即按照处理事件顺序、访问查看顺序(如由整体到单项,由大到小,由上层到下层等)与控制工艺流程等设计监控管理和人机对话主界面及其二级界面。3.功能原则即按照对象应用环境及场合具体使用功能要求,各种子系统控制类型、不同管理对象的同一界面并行处理要求和多项对话交互的同时性要求 等,设计分功能区分多级菜单、分层提示信息和多项对话栏并举的窗口等的人机交互界面,从而使用户易于分辨和掌握交互界面的使用规律和特点,提高其友好性和易操作性。4.一致性原则包括色彩的一致,操作区域一致,文字的一致。即一方面界面颜色、形状、字体与国家、国际或行业通用标准相一致。另一方面界面颜色、 形状、字体自成一体,不同设备及其相同设计状态的颜色应保持一致。界面细节美工设计的一致性使运行人员看界面时感到舒适,从而不分散他的注意力。对于新运行人员,或紧急情况下处理问题的运行人员来说,一致性还能减少他们的操作失误。5.频率原则即按照管理对象的对话交互频率高低设计人机界面的层次顺序和对话窗口莱单的显示位置等,提高监控和访问对话频率。

人机界面设计的内容简介

随着近几十年来科学技术的飞速发展,人机界面技术的地位越来越重要。这本《人机界面设计》由刘伟、庄达民和柳忠起编著,介绍和分析了人机界面技术中交互信息的输入、处理、输出三大过程的特性和关系,阐述了相应的基本理论模型和方法。主要内容包括人机界面技术的形成和发展、人机界面中人的感觉特性(人机界面信息输入阶段)、认知特性与分析、人机界面中情境认知特性(人机界面信息处理阶段)、人机界面中人的控制特性(人机界面信息输出阶段)、网络用户行为信息分析、信息产品中人机交互研究案例(视盲现象与界面设计研究案例、Web信息架构设计对网络用户视觉搜索能力的影响、即时游戏中玩家流体验的研究)等,章末附有思考题与习题,便于读者掌握所学内容。

人机界面用什么软件设计

不同的人机有不同的程式软件,主要以生产厂家为区别,不同厂家生产的人机有各自的设计软件件,如三菱的就用三菱的软件,富士的就用富士的软件

1、人机界面介绍

人机界面(HumanMachineInteraction,简称HMI),又称用户界面或使用者界面,是人与计算机之间传递、交换信息的媒介和对话接口,是计算机系统的重要组成部分。是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。凡参与人机信息交流的领域都存在着人机界面

2、人机界面的设计原则

1)以用户为中心的基本设计原则

在系统的设计过程中,设计人员要抓住用户的特征,发现用户的需求。在系统整个开发过程中要不断征求用户的意见,向用户咨询。系统的设计决策要结合用户的工作和应用环境,必须理解用户对系统的要求。最好的方法就是让真实的用户参与开发,这样开发人员就能正确地了解用户的需求和目标,系统就会更加成功。

2)顺序原则

即按照处理事件顺序、访问查看顺序(如由整体到单项,由大到小,由上层到下层等)与控制工艺流程等设计监控管理和人机对话主界面及其二级界面。

3)功能原则

即按照对象应用环境及场合具体使用功能要求,各种子系统控制类型、不同管理对象的同一界面并行处理要求和多项对话交互的同时性要求等,设计分功能区分多级菜单、分层提示信息和多项对话栏并举的窗口等的人机交互界面,从而使用户易于分辨和掌握交互界面的使用规律和特点,提高其友好性和易操作性。

4)一致性原则

包括色彩的一致,操作区域一致,文字的一致。即一方面界面颜色、形状、字体与国家、国际或行业通用标准相一致。另一方面界面颜色、形状、字体自成一体,不同设备及其相同设计状态的颜色应保持一致。界面细节美工设计的一致性使运行人员看界面时感到舒适,从而不分散他的注意力。对于新运行人员,或紧急情况下处理问题的运行人员来说,一致性还能减少他们的操作失误。

5)频率原则

即按照管理对象的对话交互频率高低设计人机界面的层次顺序和对话窗口莱单的显示位置等,提高监控和访问对话频率。

6)重要性原则

即按照管理对象在控制系统中的重要性和全局性水平,设计人机界面的主次菜单和对话窗口的位置和突显性,从而有助于管理人员把握好控制系统的主次,实施好控制决策的顺序,实现最优调度和管理。

7)面向对象原则

即按照操作人员的身份特征和工作性质,设计与之相适应和友好的人机界面。根据其工作需要,宜以弹出式窗口显示提示、引导和帮助信息,从而提高用户的交互水平和效率。

为什么说了解并遵循认知心理学的原理是进行人机界面设计的基础

了解并遵循认知心理学的原理是进行人机界面设计的基础,因为人机界面是人与计算机接触、交流的平台,而人与计算机的交流需要认知心理学来指导设计,以符合人的认知过程和心理特征。具体来说,认知心理学研究的是人如何接受、处理和利用信息,以及在这个过程中产生的各种心理现象。在人机界面设计中,需要考虑到用户的认知过程和心理特征,比如人如何注意和识别信息、如何记忆和理解信息、如何产生情感和行为反应等。根据认知心理学的原理,可以更好地理解用户的需求和行为,从而设计出更符合用户认知和使用习惯的人机界面,提高用户体验和人机交互的效率。例如,可以根据认知心理学的原则来设计界面布局和信息呈现方式,以便更好地吸引用户的注意力、帮助他们更快地理解界面内容并完成任务;同时,也可以根据用户的情感和行为反应来调整设计,以提高用户的满意度和忠诚度。因此,认知心理学在人机界面设计中具有重要的作用,是进行人机界面设计的基础。

人机界面的设计过程

人机界面的设计过程可分为以下几个步骤:1、创建系统功能的外部模型设计模型主要是考虑软件的数据结构、总体结构和过程性描述,界面设计一般只作为附属品,只有对用户的情况(包括年龄、性别、心理情况、文化程度、个性、种族背景等)有所了解,才能设计出有效的用户界面;根据终端用户对未来系统的假想(简称系统假想)设计用户模型,最终使之与系统实现后得到的系统映象(系统的外部特征)相吻合,用户才能对系统感到满意并能有效的使用它;建立用户模型时要充分考虑系统假想给出的信息,系统映象必须准确地反映系统的语法和语义信息。总之,只有了解用户、了解任务才能设计出好的人机界面。2、确定为完成此系统功能人和计算机应分别完成的任务任务分析有两种途径。一种是从实际出发,通过对原有处于手工或半手工状态下的应用系统的剖析,将其映射为在人机界面上执行的一组类似的任务;另一种是通过研究系统的需求规格说明,导出一组与用户模型和系统假想相协调的用户任务。逐步求精和面向对象分析等技术同样适用于任务分析。逐步求精技术可把任务不断划分为子任务,直至对每个任务的要求都十分清楚;而采用面向对象分析技术可识别出与应用有关的所有客观的对象以及与对象关联的动作。3、考虑界面设计中的典型问题设计任何一个机界面,一般必须考虑系统响应时间、用户求助机制、错误信息处理和命令方式四个方面。系统响应时间过长是交互式系统中用户抱怨最多的问题,除了响应时间的绝对长短外,用户对不同命令在响应时间上的差别亦很在意,若过于悬殊用户将难以接受;用户求助机制宜采用集成式,避免叠加式系统导致用户求助某项指南而不得不浏览大量无关信息;错误和警告信息必须选用用户明了、含义准确的术语描述,同时还应尽可能提供一些有关错误恢复的建议。此外,显示出错信息时,若再辅以听觉(铃声)、视觉(专用颜色)刺激,则效果更佳;命令方式最好是菜单与键盘命令并存,供用户选用。4、借助CASE工具构造界面原型,并真正实现设计模型软件模型一旦确定,即可构造一个软件原形,此时仅有用户界面部分,此原形交用户评审,根据反馈意见修改后再交给用户评审,直至与用户模型和系统假想一致为止。一般可借助于用户界面工具箱(Userinterfacetoolkits)或用户界面开发系统(Userinterfacedevelopmentsystems)提供的现成的模块或对象创建各种界面基本成分的工作。5、在人机界面分析设计中所要考虑的人文因素主要包括以下内容:1)人机匹配性:用户是人,计算机系统作为人完成任务的工具,应该使计算机和人组成的人机系统很好地匹配工作;如果有矛盾,应该让计算机去适应人,而不是人去适应计算机;2)人的固有技能:作为计算机用户的人具有许多固有的技能。对这些能力的分析和综合,有助于对用户所能胜任的,处理人机界面的复杂程度,以及用户能从界面获得多少知识和帮助,以及所化费的时间做出估计或判断;3)人的固有弱点:人具有遗忘、易出错、注意力不集中、情绪不稳定等固有弱点。设计良好的人机界面应尽可能减少用户操作使用时的记忆量,应力求避免可能发生的错误;4)用户的知识经验和受教育程度:使用计算机用户的受教育程度,决定了他对计算机系统的知识经验;5)用户对系统的期望和态度。

人机界面设计的交互方面有哪些

交互的方式有:面对面交互、电话交互、文字交互、视觉交互、语音交互。

1、面对面交互:指人们通过面对面的方式进行交流和互动,例如会议、会谈、面谈等。这种交互方式通常需要双方具备良好的沟通能力和语言表达能力,能够有效地传递信息和理解对方的意思。

2、电话交互:指人们通过电话进行交流和互动,例如客服电话、销售电话等。这种交互方式通常需要双方都具备良好的听力和口语能力,能够清晰地表达自己的意见和理解对方的意思。

3、文字交互:指人们通过书信、邮件、短信等方式进行交流和互动,例如商务邮件、社交媒体消息等。这种交互方式通常需要双方都具备良好的写作和阅读能力,能够准确地表达自己的意见和理解对方的意思。

4、视觉交互:指人们通过图片、视频、动画等方式进行交流和互动,例如广告、教学视频等。这种交互方式通常需要制作方具备良好的创意和设计能力,能够吸引观众的注意力并传达有效的信息。

5、语音交互:指人们通过语音识别技术进行交流和互动,例如智能音箱、语音助手等。这种交互方式通常需要设备具备良好的语音识别和处理能力,能够准确地理解用户的指令并给出相应的反馈。

在进行交互时,需要注意以下几点:

1、尊重对方:在进行交互时,需要尊重对方的意见和感受,不要轻易打断对方的发言或做出不礼貌的回应。

2、注意语言表达:在进行交互时,需要注意自己的语言表达能力,尽量使用清晰、简洁、准确的语言表达自己的意思。

3、注意沟通方式:在进行交互时,需要注意选择合适的沟通方式,例如面对面交流、电话交流、文字交流等,根据不同的情况选择最合适的方式进行沟通。

4、注意听取反馈:在进行交互时,需要积极听取对方的反馈和意见,及时调整自己的表达方式和态度,以达到更好的沟通效果。

5、注意情绪控制:在进行交互时,需要注意自己的情绪控制能力,不要因为情绪波动而影响到沟通效果。

人机界面设计(UI设计师必读!iOS 10 人机界面设计指南)

本文编辑:admin
人机界面设计 ,读

更多文章:


学校欢迎标语(学校欢迎新生的欢迎标语)

学校欢迎标语(学校欢迎新生的欢迎标语)

本文目录学校欢迎新生的欢迎标语学校欢迎的横幅标语欢迎的标语学校欢迎标语学校迎新宣传标语学校欢迎新同学的标语学校欢迎新生的欢迎标语欢迎新生的欢迎标语如下所示:1、欢迎来到我们温馨的大家庭,开启精彩人生的新篇章!2、新的起点,我们与你一同成长,

2024年6月26日 16:10

暑假适合带孩子去哪里旅游不热?暑期出游人太多,有哪些适合玩一周的小众目的亲子旅行路线

暑假适合带孩子去哪里旅游不热?暑期出游人太多,有哪些适合玩一周的小众目的亲子旅行路线

本文目录暑假适合带孩子去哪里旅游不热暑期出游人太多,有哪些适合玩一周的小众目的亲子旅行路线暑期旅游去哪里好暑期有哪些旅游胜地暑期带孩子去哪里旅游暑期旅游攻略必去景点暑假带孩子出去玩,京郊有哪些凉爽避暑的山推荐暑期国内适合带孩子出游的地方有些

2024年4月9日 02:30

男女朋友协议书(男女双方共同生活协议书)

男女朋友协议书(男女双方共同生活协议书)

本文目录男女双方共同生活协议书恋爱协议书正规范本恋爱协议书男女朋友协议书男女朋友的协议书男女双方共同生活协议书 男女双方共同生活协议书   男女双方共同生活协议书,爱情是靠两个人来经营的,有什么问题需要及时沟通,大家其实更希望可以用协议来

2024年5月2日 00:50

失恋了听什么歌(失恋了听什么歌 适合失恋听的歌曲)

失恋了听什么歌(失恋了听什么歌 适合失恋听的歌曲)

本文目录失恋了听什么歌 适合失恋听的歌曲失恋的时候适合听什么歌适合失恋听的歌有哪些失恋的时候应该听什么歌曲失恋必听的51首歌失恋的人听什么歌好失恋听什么歌好适合失恋时听的歌失恋听什么歌 适合失恋时听的歌曲失恋了听什么歌 适合失恋听的歌曲1、

2024年2月29日 03:30

请形象代言人(为什么要请明星代言请明星代言有什么好处)

请形象代言人(为什么要请明星代言请明星代言有什么好处)

本文目录为什么要请明星代言请明星代言有什么好处人家邀请你做别人店子里的形象代言人我要怎么回答代言人是什么意思企业找代言人需要提供哪些资质品牌请形象代言人是否违反了商标法很多品牌都要请明星做代言,请明星做代言有什么作用为什么要请明星代言请明星

2024年6月20日 19:10

小学英语学习策略(学好小学英语的建议和方法)

小学英语学习策略(学好小学英语的建议和方法)

本文目录学好小学英语的建议和方法小学生学英语的方法和技巧如何提高小学英语学习的措施小学阶段怎么学好英语 有什么方法小学英语的方法和技巧小学生怎么学好英语方法技巧如何学好小学英语的方法和技巧小学阶段怎么学好英语学好小学英语的建议和方法小学英语

2024年3月22日 17:10

我的地理老师(地理作文400字)

我的地理老师(地理作文400字)

本文目录地理作文400字怎么写描写地理老师的作文介绍我的地理老师英语作文地理老师个人工作总结我的地理老师作文 我的地理老师作文例文我的地理老师初二作文于我的地理老师作文高中作文我的男地理班主任我的老师初三作文写给地理老师的话地理作文400字

2024年3月31日 12:30

情侣浪漫的十大方式有哪些?情侣之间的浪漫情话

情侣浪漫的十大方式有哪些?情侣之间的浪漫情话

本文目录情侣浪漫的十大方式有哪些情侣之间的浪漫情话情侣必做十件浪漫的事情侣浪漫情话短句大全情侣间最浪漫的事情有哪些情侣之间有哪些浪漫的约会方式情侣间有哪些浪漫的事情可以做情侣之间有什么小浪漫情侣浪漫的睡前故事8篇简约浪漫情侣网名 温馨浪漫幸

2024年3月11日 15:20

归去来兮辞朗诵(必背高中文言文音频)

归去来兮辞朗诵(必背高中文言文音频)

本文目录必背高中文言文音频急啊!!有没有适合朗诵的古诗或者古文比较押韵的,顺口一点的SOS!!归去来兮辞串场词搜《归去来兮辞》朗诵会的开场白必背高中文言文音频 1. 高中语文必背古文mp3朗诵 /shandao-cn0825_n8832

2024年4月11日 09:50

摔跤吧爸爸完整版下载(求 摔跤吧!爸爸 百度云免费在线观看资源)

摔跤吧爸爸完整版下载(求 摔跤吧!爸爸 百度云免费在线观看资源)

本文目录求 摔跤吧!爸爸 百度云免费在线观看资源跪求好心人分享摔跤吧!爸爸2016年由 阿米尔·汗主演的免费高清百度云资源求 摔跤吧!爸爸 百度云免费在线观看资源《摔跤吧!爸爸》百度网盘高清资源免费在线观看:    ***隐藏网址*****

2024年5月2日 19:30

高贵的反义词(高贵华丽的反义词)

高贵的反义词(高贵华丽的反义词)

本文目录高贵华丽的反义词高贵的反义词高贵的反义词是什么高贵的反义词有哪些高贵反义词高贵的反义词_高贵的近义词_高贵的词语解释高贵的反义词是什么高贵的反义词高贵华丽的反义词高贵的反义词是:通俗、晦涩、低贱、微贱、卑贱、轻贱、卑微、下贱华丽的反

2024年4月13日 23:50

酒鬼酒广告词(关于酒鬼酒广告词是什么)

酒鬼酒广告词(关于酒鬼酒广告词是什么)

本文目录关于酒鬼酒广告词是什么有一种酒的广告是“年轻时有所求,中年时有所思,老了有所悟”这种酒是怎么酒酒鬼酒的广告词关于酒鬼酒广告词是什么  关于酒鬼酒广告词 1、酒鬼背酒鬼,千斤不嫌赘;酒鬼喝酒鬼,千杯不会醉。无上妙品,酒鬼酒!

2024年5月7日 06:20

管理咨询案例(求经典的管理咨询案例)

管理咨询案例(求经典的管理咨询案例)

本文目录求经典的管理咨询案例企业管理咨询案例分析:餐馆的困境管理咨询师考试案例模拟分析题及解析管理咨询师案例之红牛饮料的全球体育帝国(2)求管理咨询案例管理咨询师案例:综合控制计划的制定管理咨询师考试案例分析模拟题及答案2010年管理咨询师

2024年4月8日 07:00

编辑个性签名(朋友圈签名怎么改)

编辑个性签名(朋友圈签名怎么改)

本文目录朋友圈签名怎么改qq编辑个性签名_qq编辑个性签名好听微信个性签名在哪里设置微信怎样修改个性签名如何编辑或修改手机QQ内的个性签名怎么改qq的签名档编辑个性签名微信个性签名怎么改呢qq个性签名在哪里改qq编辑个性签名好听的朋友圈签名

2024年6月16日 19:40

贺新郎·国脉微如缕赏析?贺新郎国脉微如缕翻译和解析

贺新郎·国脉微如缕赏析?贺新郎国脉微如缕翻译和解析

本文目录贺新郎·国脉微如缕赏析贺新郎国脉微如缕翻译和解析贺新郎·国脉微如缕原文翻译贺新郎国脉微如缕开头三句有何妙处国脉微如缕问长缨何时入手贺新郎(国脉微如缕)原文及翻译贺新郎·国脉微如缕翻译及注释贺新郎国脉微如缕典故及表达思想贺新郎·国脉微

2024年3月1日 12:10

狐假虎威课本剧(课本剧狐假虎威作文两张400字稿纸)

狐假虎威课本剧(课本剧狐假虎威作文两张400字稿纸)

本文目录课本剧狐假虎威作文两张400字稿纸狐假虎威课本剧怎么写狐假虎威的剧本小学二年级语文《狐假虎威》原文及教案课本剧《狐假虎威》怎么写英语课本剧的剧本狐假虎威的课本剧狐假虎威课本剧台词小学二年级语文《狐假虎威》教案狐假虎威分角色表演课本剧

2024年4月5日 21:30

《望月》杜甫的全诗是什么?古诗《望月》作者杜甫的译文

《望月》杜甫的全诗是什么?古诗《望月》作者杜甫的译文

本文目录《望月》杜甫的全诗是什么古诗《望月》作者杜甫的译文望月啥意思望月的解释望月的解释是什么一个月中的望月指哪几天望月指的是什么意思望月是什么意思望月的意思望月的意思是什么望月的古诗《十五夜望月》原文翻译赏析,十五夜望月表达的情感《望月》

2024年3月4日 21:10

写猫咪的作文通用5篇?写猫咪的作文7篇

写猫咪的作文通用5篇?写猫咪的作文7篇

本文目录写猫咪的作文通用5篇写猫咪的作文7篇猫的作文写猫作文500字二年级写猫咪的六年级500字作文写小猫的作文六年级猫的优秀作文小学二年级描写猫的作文6篇描写小猫的作文描写猫的作文600字高二写猫咪的作文通用5篇 写猫咪的作文篇1

2024年3月15日 15:20

雷锋的好人好事(雷锋有哪些好人好事)

雷锋的好人好事(雷锋有哪些好人好事)

本文目录雷锋有哪些好人好事雷锋的好人好事急!!!雷锋做过人多好人好事,帮我举几个例子,每个例子一句话概括一下就行,雷锋做过的好人好事雷锋的好人好事事迹雷锋的好人好事学雷锋都可以做哪些好事日常生活中有哪些事是学习雷锋做好事的关于雷锋的好人好事

2024年3月5日 08:40

艺术实践活动总结?校采风部工作总结及计划

艺术实践活动总结?校采风部工作总结及计划

本文目录艺术实践活动总结校采风部工作总结及计划音乐艺术实践周总结报告校园采风活动总结学生摄影活动总结艺术实践活动总结   不经意间,一个有意义的活动又告一段落了,我们一定都增加了不少生阅历,该好好写一份总结把这些都记录下来了。那么如何把活动

2024年4月2日 23:30