iOS设计规范

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容