首页天道酬勤ui设计课程(applewatch3)

ui设计课程(applewatch3)

admin 12-02 19:04 231次浏览

UI设计基础的内容占Apple Watch人机交互指南文档的40%。它不仅详细解释了UI设计的规则,还详细讲述了这种设计的原因。从这些略显尴尬的词中,你可以看到Apple Watch的另一面:严谨。这些深思熟虑的细节(即使你不喜欢)与那些狂野的“智能手表”大不相同。

5、Modal Sheets

模态片有明显的优缺点。它允许用户在“强制触摸”菜单中不受干扰地完成任务、获取信息或继续做出选择。为了实现这一点,模态表暂时阻止用户与应用程序的其他部分进行交互。

设计的时候最好尽可能的把APP的模式体验降到最低。一般来说,您可以考虑在以下情况下创建模式内容:

当吸引用户的注意力变得至关重要时,当需要完成一个独立的任务或需要显式放弃一个任务以避免用户数据不明确时。

模式界面包含单个屏幕界面或多个分页屏幕界面。这两个界面唯一的区别是后者在页面底部有一个小点。

模式界面的左上位置为关闭按钮保留。当用户点击左上角按钮时(或做边缘交互操作时),系统会关闭模式界面,不再做进一步操作。关闭按钮是系统强制显示的,不会隐藏,但是可以更改显示的内容(例如,关闭取消)。同样令人惊讶的是,您不需要在下方的内容主体中添加单独的关闭按钮,尤其是当左上角的按钮显示“关闭”或“取消”时。左上角的按钮通常是白色的。

如果涉及的任务需要确认或接受,可以在模式界面的内容体中增加“接受”或“确认”按钮。除了执行适当的操作,点击这些按钮也将取消当前模式界面。

尽量让任务界面简单直接。避免从一个模式界面跳到第二个模式界面。

6、布局

布局指南

限制界面中并排控件的数量。使用并排按钮时,请使用图标而不是文本按钮。并排放置的按钮数量不应超过3个。界面中项目太多,会因为目标太小,给用户操作带来不便。

充分利用屏幕空间。由于Apple Watch的边框已经填充了主要内容的边缘,所以在设计时没有必要包含屏幕边缘和内容之间的空白。请注意,这些额外的边缘不会显示在模拟器中。

相对位置将在应用程序的项目之间使用。由于应用程序将在不同尺寸的Apple Watch上显示相同的界面,相对位置将允许它们根据不同的屏幕扩展和填充额外的空间。

布局优先于左对齐。界面中的元素从上到下、从左到右排列。界面左对齐,可以保证有足够的空间展开和显示内容。

确保文本按钮占据整个宽度。使用文本按钮时,应确保按钮占据整个宽度,以便按钮标签始终可见。

使用上下文菜单显示辅助操作。使用上下文菜单显示不常用的操作,而不是直接在界面中添加按钮。

00-1010无论屏幕大小如何,Apple Watch都应该显示相同的内容。设计屏幕布局时,请确保每个项目都可以自然扩展和收缩,以填充可用空间。

根据不同尺寸的屏幕提供图片资料。如果内容在两个不同尺寸的屏幕上显示良好,可以使用相同的图片素材,否则需要为不同尺寸的不同屏幕提供不同的图片素材。

屏幕尺寸

10-1010颜色可以为你的APP提供视觉连续性和品牌设计。

使用黑色作为应用的背景色。黑色背景可以无缝融合设备的界面和边缘,给用户一种设备没有屏幕边缘的错觉。尽量避免在界面中使用明亮的背景色。

用APP的主色调突出品牌和身份。每个APP都有主色调。系统将在屏幕左上角的标题字符和通知界面应用主色,突出显示APP的名称和其他关键信息。你应该以类似的方式设计应用的品牌。

高对比度颜色的文本。高对比度的颜色将使文本更容易阅读。

避免使用颜色来显示交互性。你可以适当地给APP的品牌设计涂上颜色,但不要单独用颜色来指导用户与按钮和其他控件进行交互。

一定要考虑色盲用户。大多数色盲用户都是红绿色盲,所以请测试你的APP,确保红绿不是区分不同状态和值的唯一配色方案。(部分图片编辑软件会包含色盲校对工具)

用颜色沟通,但不要总是用习惯的方式。每个人对颜色有不同的理解,许多文化对颜色有不同的含义。因此,你需要花一些时间来研究APP配色如何被其他国家和文化所接受。尽量确保你的应用程序中的颜色传达了正确的信息。

00-1010首先,正文

要清晰易读。如果用户不能清晰地阅读APP中的文本,字体再漂亮也是白搭。

为了提高Apple Watch的文本易读性,Apple专门为此设计了名为“旧金山”的系统字体。在较大的屏幕上,字体间隙被轻微压缩,如此紧密排列以占用较少的水平空间。 但是在较小平面上,松散的字母排列会更加易读。当字体变小的时候,标点符号会按照一定比例放大。任何时候对文本大小进行调整,Apple Watch都会为了保持文本的清晰度和易读性而进行动态调整。

所以,APP应该始终使用动态类型(Dynamic Type)。含蓄的诺言使用动态类型的时候,你可以做到以下几点:

・让APP中的字母的字符间距和行距自动调整

・让不同语义文本可以被指定不同的文本类型,比如主体、注脚或者标题。

・让文本可以随着不同的文本设置而响应式地调整(包括无障碍文本的大小)

注意:如果你使用了自定义字体,仍可以根据字体的系统设置缩放文本样式。当用户更改设置时,你的APP适当地进行响应式调整。

如果你使用内置的文本类型,那么你将直接获得动态类型(Dynamic Type)支持。如果你使用自定义字体,那么你需要对其进行调整以采用这种特性。学习如何使用文本类型,并确保在用户更改文本大小设置时,你的APP能得 到了通知,请参看 Text Programming Guide for iOS中Text Styles一节。

尽可能使用内置的文本类型。内置的文本类型自动支持动态类型(Dynamic Type),并且内置文本类型可以更好地在Apple Watch上展示。

尽量在APP中使用单一字体类型。出于品牌化设计的需求,APP中可以使用附加字体,但尽量少用。混合使用多种字体会让APP看起来支离破碎和草率。根据语义用法,比如主体和标题,可以使用UIFont文本样式API来定义不同的文本区域。

当手动设定系统字体大小的时候,磅值决定了正确尺寸。为文本选San Francisco 文本字体的时候,字体大小为19点,或者略小一点。为文本选择San Francisco Display文本字体的时候,字体大概是20点,或者更大一点。

8、动效

精细漂亮的动效遍布Apple Watch的每个角落,并为用户引入充满活力的用户体验。恰如其分的动效能带来如下效果:

・表明状态并提供反馈 ・以更加视觉化的方式帮用户了解操作的结果

使用一系列静态图片创造渲染动效。你可以在Apple Watch 的APP中储存录制好的动画(Canned Animations),这样可以向用户快速展示。录制好的动画可以让你交付更为流畅的高帧动画。你可以从WatchKit扩展中动态地创建动画,再将其 转移到Apple Watch,在回放之前添加一定的延迟就好了。

仅有图片和分组对象(Group Objects)可以使用回放控件。大部分界面对象是以无限循环的方式来展示动态图像序列的。要终止动画,或从动画中回放一组特定的帧,你必须使用图片或者分组对象。

9、品牌化设计

成功的品牌化设计所涉及的内容,远不止于在APP中添加品牌素材。最好的APP将现有素材和独特的外观与感觉结合在一起,为用户提供了一个令人愉悦而难忘的体验。

品牌化你的APP有多种途径,其中包括icon、配色、自定义按钮、自定义字体以及所使用的版权内容等。在你设计APP的图形元素时,务必记得让每 个自定义元素都要看起来很好,并其本身的功能也一样运行良好,最重要的是,每个元素看起来也应当和APP中的其他元素一直,不管它是否是定制的。

以优雅不违和的方式整合品牌素材。用户使用你的APP来完成任务或者娱乐,但他们不想被强迫观看广告。为了获得最佳的用户体验,你可能需要通过色彩、精心选择的字体或者意像来潜移默化地提高用户对品牌的辨识度。

抵制在APP或Glance中展示Logo的诱惑。Apple Watch上的空间非常宝贵,每次展示logo都会占用内容的空间,并且在APP中展示Logo的目的与在网页中展示Logo有所不同:很多时候,用户会 进入某个的网页并不会意识到它的所有者,但用户在打开APP之前通常会查看APP icon,并且明白它属于谁。

结语

看完UI设计基础之后,你需要开始了解Apple Watch 人机交互指南的第二个部分 UI元素设计的细节了。

原文来自:优设

优设网译者:@tmdyj

APPLE WATCH人机交互指南系列文章

#yyds干货盘点#Java ASM系列:(098)Cyclomatic Complexity自愈见缝插针游戏的实现途径rabbitMQ的发布模式怎么实现归并排序(常见经典排序算法)
人机界面组态(海泰克人机界面官网) 我和labview(labview中文教程)
相关内容