
1.1.4 移动UI设计的原则
进行移动UI设计时,需要遵循iOS系统和Android系统的设计规范,可以根据iOS系统下的设计原则及Android系统下Material Design语言中的设计原则进行设计。
1. iOS系统设计原则
iOS系统设计应遵循清晰、遵从、深度3大原则。
(1)清晰
在整个系统中,文字在各种尺寸上都清晰易读,图标精确而清晰,装饰精巧且恰当,令用户更易理解功能。负空间、颜色、字体、图形和界面元素巧妙地突出重要内容并传达交互性,如图1-7所示。

图1-7 以色列设计师Vlad Tyzun创作的界面
(2)遵从
遵从意指整个页面的交互要让用户的操作有着“从哪来回哪去”的体验。其中,流畅的动画和清晰、美观的界面可以帮助用户理解内容并与之互动,同时不干扰到用户的使用。想要传达的内容一般需要填满整个屏幕,而半透明和模糊显示通常暗示有更多内容。少使用边框,使用渐变和阴影的功能可使界面轻盈,同时确保内容明显,如图1-8所示。

图1-8 印度设计师Abhisek Das创作的App界面
如图1-8所示,位于左侧App界面中橙色渐变银行卡旁边的卡采用了半透明效果,暗示用户可以进行滑动查看更多内容。两张App界面的渐变、边框及阴影都不是很明显,使界面非常轻盈。
(3)深度
独特的视觉层级和真实的动画效果传达层次结构,赋予界面活力,并促进用户理解。让用户通过触摸和探索发现程序的功能,不仅会使用户提高乐趣,更加方便用户了解功能,还能使用户关注到额外的内容。在浏览内容时,层级的过渡可提供深度感,如图1-9所示。

图1-9 乌克兰设计公司Cadabra Studio创作的界面
2. Material Design设计原则
Material Design(材料设计)语言(Google开发的可与iOS系统下的设计原则相媲美的设计语言)设计原则有材质隐喻、大胆夸张、动效表意、灵活、跨平台5大原则。
(1)材质隐喻
Material Design的灵感来自物理世界及其纹理,包括它们如何反射光线和投射阴影。对材料表面进行重新构想,融入纸张和墨水的特性,如图1-10所示。

图1-10 Material Design官网提供的示意图1
(2)大胆夸张
Material Design以印刷设计方法中的排版、网格、空间、比例、颜色和图像为指导,来创造视觉层次、视觉意义及视觉焦点,使用户沉浸其中,如图1-11所示。

图1-11 Material Design官网提供的示意图2
(3)动效表意
Material Design通过微妙的反馈和平滑的过渡使动效保持连续性。当元素出现在屏幕上时,它们在环境中转换和重组,相互作用并产生新的变化,如图1-12所示。

图1-12 Material Design官网提供的示意图3
(4)灵活
Material Design系统旨在实现品牌表达。它集成了一个可定制的代码库,如图1-13所示。

图1-13 Material Design官网提供的示意图4
(5)跨平台
Material Design使用Android、iOS、Flutter和Web的共享组件进行跨平台管理,如图1-14所示。

图1-14 Material Design官网提供的示意图5