iOS平台设计规范(一)原则与界面要素

无论是UI、交互,还是产品经理,都应该熟读iOS平台设计规范。这对我们的产品设计,百利而无一弊。


   概 述   

一、设计主题

· 清晰 (Clarity):文字清晰易读,图标精确醒目,去除多余修饰,突出重点,以功能驱动设计。留白、颜色、字体、图形和界面元素都是为了更好地突出重要内容并传达交互性。

· 遵从(Deference):流畅的转场动画和清晰美观的界面可以帮助用户理解内容并与之互动,同时不能过度设计而干扰用户。必须坚定一点:设计服务于内容。UI作为内容的支撑,是为了帮助用户理解界面上的内容并与之交互。

· 深度(Depth)层次分明的视觉布局、生动逼真的交互动画,会让界面更有活力,有助于用户更好地理解内容,提升用户愉悦感。而在浏览内容的过程中,层级之间的跳转,更有利于用户理解产品的结构与深度。


二、设计原则

要使产品的影响力最大化,必须在产品设计中牢记以下原则:


1、整体美学

整体美学,意味着APP的视觉表现和交互行为与其功能已经融为一体。


例如,一个帮助用户执行严肃任务的APP可以通过使用微妙/不显眼的图形、标准控件和可预测的交互行为来使用户更专注。反之,沉浸式APP,如游戏,则可以提供吸引人的外观,同时鼓励用户去探索和发现,增添乐趣。


2、一致性

一致性是指,该APP的视觉上统一了标准和规范。


包括风格统一的图标和界面元素、标准的字体样式、一致的表达术语等。同时,APP内的功能和交互行为都与用户心理预期保持一致(符合用户心智模型)。


3、直接操控

直接与屏幕上的内容进行交互,有助于用户的理解。


例如:当用户旋转设备或者使用手势来影响屏幕内容时,用户可以体验到直接操控的感觉,最后用户可以看到自己的行为所带来的可视化反馈。


4、反馈


反馈是指交互行为后,所呈现给用户的结果。iOS系统自带的APP对用户的每个行为都提供了可感知的反馈。


例如:可交互界面元素被点击时瞬间高亮显示,进度条显示需要进展的时间和当前的进度状态,加入动画和声音来加强交互行为的结果。


5、隐喻

当APP的虚拟对象和交互行为能够与用户所熟悉的体验相似时,无论这种体验来自于真实生活还是数字世界,用户都能够更快学会使用这款APP(其实就是映射,同理心)。

隐喻在iOS中非常有效,因为用户通过屏幕进行互动。例如:用户移动视图来查看更多内容、拖曳和滑动内容、开关切换、移动滑块解锁、滚动选择器、快速翻页。


6、用户控制

在整个iOS中,都是人在控制APP,而不是APP控制人。APP可以提供建议和解决方案,但具体操作一定是用户自己选择的。不能让APP直接替用户做决定。最好的方式在用户主动操作和避免错误结果之间做到平衡。


例如:通过使用熟悉和可预知的交互元素、对重要操作进行确认(如付款、删除)、即便在执行中的操作也可以取消,就可以让用户感觉到他们在APP使用过程中掌握了主动权。



  界面要素  


大多数iOS应用,都是由UIKit组件构建的。UIKit是一个定义基础界面元素的编程框架。而这个框架不仅让APP在视觉外观上保持一致,同时也为APP个性化设计留有很大空间。


UIKit元素是灵活的、常见的、可配置性很高,它能够让你在iOS中设计一款高质量高水准的APP。若iOS系统需要更改外观,只需更新UIKit,iOS系统的APP外观就会随之自动更新。


一、栏(Bars)

栏,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。


包括状态栏、导航栏、工具栏、标签栏、搜索栏。后面会有专门的“Bars”章节,用来详细展开讲。

       

(源文件回复:iOS)

 

二、视图(Views)

包含用户在APP中看到的基本内容,例如:文本、图片、动画以及交互元素。

视图可以具有滚动、插入、删除和排列等交互行为。

       

(源文件回复:iOS)


三、控件(Controls)

控件,是用于触发操作并传达信息的。

例如:按钮、开关、文本框和进度条,都属于典型的控件。

      

(源文件回复:iOS)

 

除了定义iOS界面外,UIKit还定义了APP可以采用的功能。例如:通过这个框架,APP可以响应触摸屏上的手势并启用绘图、辅助功能和打印等功能。

 

iOS也与其他编程框架和技术也紧密集成,如Apple Pay、HealthKit和ResearchKit,让你能够设计出功能更强大的应用程序。



推 荐 阅 读 -


UI进阶产品设计之用户体验地图

如何高效进行同理心地图练习?

干货贴:UI进阶必备高颜值设计网站

产品设计中如何有效利用设计冲刺?



宛苏
产品设计师 · 某公司
认可他 6