iOS设计三大原则(Principles)
•清晰 •依从 •深度
清晰(Clarity)
在整个系统中,文字在每一个尺寸都是清晰易读的,图标精确而清晰,装饰精巧而适合,使得用户更易理解功能。负空间,颜色,字体,图形和界面元素巧妙突出重要内容并传达交互性。
颜色(Color)
设计早期可以通过较灰的颜色来避免色对于间距和布局的影响,一旦设计完成,需要痛殴调整颜色和色调,保证色彩在任何情况下都可以辨识。同时,我们也需要关注色盲人群的体验。

排版(Typography)
对任何信息进行排布的时候,首先必须要掌握的是对齐/重复/亲密/对比,贯穿设计的四大原则。

排版(Typography)
对任何信息进行排布的时候,首先必须要掌握的是对齐/重复/亲密/对比,贯穿设计的四大原则。

图形(Graphics)
图标设计与功能相关,辨识度高,但是无论多么精彩的图标都不可替代文字。

留白(Empty Area)
适当的留白,能更加让设计依从与信息本身、颜色、板式的设计,都是为了让用户能更加高效的使用产品,获得信息和产品功能,不要用过多的字体,精简自己的设计元素。才能更好的给信息让路。

依从(Deference)
流畅的动画和清晰美观的界面可以帮助人们了解和与内容交互,而不应该(因为太过花哨而)干扰到用户的使用。内容通常充满整个屏幕,而半透明和模糊常常暗示有更多内容。

深度(Depth)
使用不同的视觉层级和真是的运动效果来传达层次的感觉赋予界面活力,并促进用户的理解。让用户通过触摸和探索来发现程序的功能不仅会使用户产生喜悦感。在对内容进行导航时,层级的转场效果提供一种有深度的感觉。(一般一个页面不会超过3个层级)

结构(Structure)

1.栏(Bar)

2.内容(Content)

3.控件(Control)

4.活动视图(Activity Views)

视图(Views)

操作列表(Action sheets)
操作列表是一种特殊的弹窗形式,来反馈特定交互动作,一般包含两个或两个以上的选项。使用操作列表是为了让用户启动任务,或者确定不可撤销的交互动作。在小屏设备上,操作列表内容由下向上滑动显示;而在大屏设备上,操作列表内容作为弹窗全部显示。


活动视图(Activity views)
活动视图可以让用户执行应用中的一项自定义服务或任务。例如在应用里频繁使用的复制、收藏、查找。在它激活后,可以立即执行任务,或者逐步完成多步任务。每个活动都由活动视图管理,采用表单式或展开显示取决于设备屏幕大小和方向。

警告窗(Alerts)
弹窗由标题、可选消息、一个或多个按钮,以及解释说明文字字段组成。除了这些可配置的元素,弹窗的视觉样式是不可自定义的。


1.当操作涉及潜在的风险时,取消「Cancel」按键应位于右侧,并高亮提示。
2.当需要引导人们进行所期望的操作时,取消「Cancel」按键应位于左侧,相对应的操作按键高亮提示
想让用户点击的放在右边

集合视图(Collections)
集合视图是一组有序内容,例如一组照片,布局形式可定制并高度可视化。一般来说,集合视图是展示图像内容的理想选择,可以自定义背景和其他装饰视图,从视觉上区分图片子集。

图片视图(Image Views)
图片视图在透明或不透明背景上显示单个图片或图片序列。在图片视图中,图片可以被拉伸、缩放或固定到特定位置。默认情况下,图片视图不互动。

页面浏览控制器(Pages)
页面浏览控制器提供了一种在文档、书记、记事本或日历之间的内容页线性导航方式,它使用滚动,卷动管理页面之间的转换。滚动转换没有特定的外观,页面从一个流畅滚动到另一个;卷曲转换会是页面卷曲,当用户在屏幕上滑动时,就像转动物理世界中的书一样。

浮出层(Popover)
浮出层作为一种临时视图,会在用户点击控件或特定区域时触发,高于其他页面层级。一般来说,浮出层应该保留在iPad应用中使用。在iPhone应用中,在全屏模式视图中呈现信息,而不是在浮层中,利用所有可用的屏幕空间。

滚动视图(Scroll views)
滚动视图允许用户浏览大于可见区域的内容,例如文档中的文本或图像集合。随着用户滑动、轻拂、拖动、点按和捏住,滚动视图会沿着手势以一种自然感的方式显示或缩放内容。它本身没有外观,但是与其用户交互时,它会显示临时滚动指示器。还可以配置为寻呼模式,其中滚动显示全新的内容,而不是移动当前页面。


分屏视图(Split views)
分屏视图管理两个并排的内容窗格显示,主窗格中的常驻内容和辅窗格中的相关信息。每个窗格可以包含各种元素,包括导航栏、工具栏、标签栏、表格、集合、图像、地图和自定义视图。如果应用需要,主窗格可以覆盖辅窗格,并且在不使用时可以隐藏屏幕。


表单视图(Tables)
表格视图以一个可滚动的单列多行的形式来展示一段或一组数据。用一个表格以列表的形式,简洁高效地显示大量或少量的信息。一般来说,表格最好用来展示文字内容,而且经常以导航的方式出现在分栏视图的一侧,另一侧显示相关内容。

栏(Bars)
作为洁面的组成元素,栏主要可以看作是应用的骨架,起到梳理信息层级,引导相关交互等重要作用。

状态栏(Status bar)
1.状态栏是透明为(0%),始终固定在屏幕上边缘
2.@1x下尺寸为20pt
3.不要自定义状态栏
4.避免滚动内容直接透过状态栏显示(设计抽屉导航时)
5.在用户全屏观看媒体时,可以考虑隐藏状态栏以及所有页面UI

网友评论