UI设计师必读的IOS 10人机界面设计指南 (一)

Date 2025-03-14 16:55:27

1.1 设计原则(Design Principles)

作为一名移动应用程序设计师,这意味着你有机会发布一款致命的产品,并在苹果商店中排名第一。为了实现这一目标,您的产品必须达到高质量和功能标准。

以下三个原则使iOS系统不同于其他平台:

清晰(Clarity):

纵观整个系统,任何尺寸的文本都清晰易读,图标准确易懂,装饰得当,注重功能,所有设计都是由功能驱动的。空白、颜色、字体、图形等界面元素可以巧妙地突出关键内容,表达互动性。

遵从(Deference):

流畅的动态效果和清新美观的界面可以帮助用户在不干扰用户的情况下理解和互动内容。当当当当前的内容占据整个屏幕时,半透明和模糊的处理可以暗示更多的其他内容。减少边框、渐变和阴影,使界面尽可能轻,以突出内容。

深度(Depth):

清晰的视觉层和生动的动态效果表达层次结构,赋予活力,有助于理解。

易于发现和触发的界面元素可以提高体验愉悦感,使用户能够成功地触发相应的功能或获得更多的内容,同时控制当前位置的上下文。当用户浏览内容时,流畅的过渡提供了一种深度感。

为了扩大影响力和范围,请记住以下原则:

美学完整性(Aesthetic Integrity)

审美完整性代表了一个应用程序的视觉外观和交互行为及其功能集成的良好程度。例如,协助用户完成重要任务的应用程序应使用不易察觉和不引人注目的图形、标准化控制器和可预测的交互行为,以保持用户的注意力。相反,身临其境的体验应用程序(如游戏)需要吸引人们的视觉外观,并在鼓励用户探索的同时带来无限的乐趣和刺激。

一致性(Consistency)

一个内部一致的应用程序可以执行相同的标准和规范:使用系统提供的界面元素、统一的风格(众所周知)图标、标准的字体风格和一致的措辞。应用程序中包含的特征和交互行为符合用户的心理预期。

直接操作(Direct Manipulation)

直接操作屏幕上的对象(而不是一堆控制器)可以提高用户的参与度,并有助于理解。直接操作是指用户旋转设备或手势控制屏幕上的对象。通过直接操作,他们的交互行为可以得到即时的视觉反馈。

反馈(Feedback)

反馈认证交互行为,呈现结果,并通知用户。系统自带的iOS应用程序为每个用户的行为提供了明确的反馈。点击可交互元素时,进度指示器会暂时亮起(progress indicator)它显示了需要长时间运行的操作进度,动态效果和声音增强了对行为结果的提示。

隐喻(Metaphors)

当一个应用程序的虚拟对象和行为类似于用户熟悉的体验时,用户可以更快地学习使用该应用程序,无论它来自现实生活还是数字世界。隐喻在iOS中工作是因为用户与屏幕进行物理交互。他们通过将视图移出屏幕来显示下面的内容,他们拖动(drag)和滑动(swipe)对象,他们拨动(toggle)开关,移动(move)滑块,滚动(scroll)他们甚至通过轻扫数值选择器(flick)阅读书籍和杂志。

用户控制(User control)

在iOS中,它是用户-而不是应用程序-控制。应用程序可以对一系列用户行为提出建议,或警告可能造成严重后果的行为,但不应该为用户做出决定。一个好的应用程序将在用户领导和避免不想要的结果之间找到平衡。为了让用户觉得自己在控制,应用程序应该使用熟悉和可预测的交互元素,使用户可以第二次确定破坏性行为,即使在操作中也可以很容易地取消。

1.2 iOS 10 新特征介绍

在iOS 10.您可以创建前所未有的更强大的应用程序。当您浏览这些新的变化并考虑它们将如何帮助您的应用程序时,请特别注意设计指南。

1.jpg

窗口控制器搜索屏幕和主屏幕(widget)

Widget 提供即时有用的信息,或者应用程序独特的功能,可以在不打开应有的情况下使用。在过去,用户将widgets添加到消息中心作为快速入口。现在,用户在搜索屏幕上添加widgets,用户可以通过在主屏幕或锁定屏幕上右滑进入搜索屏幕。您也可以在主屏幕上使用3D Touch触发某个应用的快速操作菜单(quick action list)在上面添加widget。widget的设计和交互方式也发生了变化。请注意更新您现有的设计。

2.jpg

与Messages的联动

应用程序可以执行一个出现在对话下面的messaging插件,让用户与朋友分享应用程序的内容。应用程序可以通过message分享文本、图片、视频、贴纸,甚至可以交互的内容,如信息中的游戏。

3 .jpg

与Siri的联动

应用程序可以与Siri联动,使用户可以使用声音来执行相应的应用程序操作,如打电话、发短信和开始锻炼。

4.jpg

可扩展的通知栏

您可以通过扩展详细信息视图来强化您的通知栏,用户可以在未锁定屏幕的情况下使用3D 点击或滑动您的通知打开拓展视图。使用此视图可以让用户快速浏览更多信息,并允许他们快速操作信息而不离开当前界面。

1.3 界面基本元素

上一篇:美国顶尖杂志封面的百年变迁

下一篇:鲁迅也是一位优秀的设计师

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计

Floating Image