【iOS设计规范】UI设计基础

为iOS而设计


iOS要体现以下几点原则:

·服从内容

UI本身就是为了帮助用户理解内容、与内容互动的,千万不要喧宾夺主。

·明确

文本不管任何大小,都要确保可读性;Icon要精致并且清晰;其他修饰要恰到好处。我们要聚焦在基于功能的设计上。

·深度

可视化界面和模拟现实的操作,可以无形中形成产品的生命力,使产品更有情趣,并且使用户对产品的理解更加深刻。

天气

不管你是在重新设计一个旧版应用,或是正在创造一个全新的应用,如果用以下方式考虑你接下来的工作,将会对你有很大帮助:

·首先,确认APP的核心功能以及核心功能之间的联系;

·其次,用上面提到的原则来覆盖UI和用户体验的设计。细节和辅助功能的使用要十分小心,千万不要平白无故地乱加;

·最后,确保你的UI设计能适配不同的设备、不同的模式。这样,你的用户才能在尽可能多的场景下使用你的APP。

通过这些过程,你要做好无视一切先例、问题和假设的心理准备,一定要聚焦在内容上,并且通过功能来验证你的每一个设计决策。

服从内容

虽然好看的界面和流畅的交互对于iOS体验来说,是一个亮点,但是用户的内容始终都是设计核心。

这里有几种方法,用来帮助你提升功能的表达,并且更好地服从内容。

天气

合理利用整个屏幕空间

“天气”这个APP是个很棒的例子:优雅地、全屏地描述当地当前的天气状况,当然这也是需要表达的最重要的信息。再加上额外的空间,来展示每小时的天气变化。

地图

重新思考可视化图标的设计,来表达现实意义

斜面、渐变、投影,这些有时候会让UI元素看起来很重,甚至可能盖过了内容。因此,我们应该关注内容,并且让UI作为辅助。

控制中心

利用半透明的UI元素,来暗示用户,后面还有其他内容

半透明元素——例如系统的控制中心——提供了一种场景的表达方法,可以马上暗示用户“喏,你看这背后还有东西呢”。在iOS,一个半透明元素,仅在被它遮盖住的地方,对背后的图像做了模糊(见上图)——像是透过糯米纸去看东西一样——但是屏幕中没有被半透明元素遮盖的部分,是不做模糊的。

提供明晰的表达

要求提供明晰的表达,再一次说明了内容才是你APP的核心。这里提供几种方法,帮助你更清楚、更简单地与重要内容互动。

短信

充分利用留白(原文是negative space,这里还没琢磨出来怎么翻译的好,求赐教)

留白可以使重要内容或功能,看起来更引人注目并且容易理解。留白也可以传达出一种冷静、安宁的感觉。这可以使你的APP看起来更加聚焦和高效。

备忘录

让颜色简化你的UI

一个主色——比如备忘录中的黄色——着重表达除了重点信息,巧妙地隐喻了其中的交互。这也给APP定义了一个视觉主题。苹果内置的APP用了一系列纯色,使之与任何其他颜色、明暗背景色中都协调搭配。

邮箱

利用系统字体来确保可读性

San Francisco(iOS系统默认字体)配以各种大小,可以自动适应文字空间以及行高。这样文本无论是在哪个尺寸下,都会看起来简单易读。无论你正在用的是San Francisco字体或是其他字体,一定要确保它可以适应各种大小。只有这样,用户在使用你的APP时,采用了一种不同的大小的字体时才不会出现问题。

联系人

推崇无边框按钮

默认所有Bar上的按钮都是无边框的。在内容区域,一个无边框按钮可以利用文本、色彩、和一个引起点击的文案,可以暗示交互喻意。如果这样行得通,一个内容区域的按钮可以用细边框或者有色的背景来使之凸显。

利用深度来沟通

iOS通常利用图层和位置的不同,来表达不同层级的内容。这样也有利于用户更好地理解同一屏幕中不同元素之间的关系。

3D Touch的场景

在一个支持3D Touch的设备上,轻按、重按、快速滑动可以让用户在不退出当前场景的前提下,直达重要功能。

桌面文件夹

文件夹通过半透明的背景,悬浮在主页之上,来把文件夹里面的内容同主页的其他内容区分开来。

提醒事项

提醒事项这个APP通过不同的图层展示不同的表单,如图。当你需要操作其中一个表单的时候,其他表单将会聚集在屏幕底部。

日历

日历强化的过渡动画的表现形式,来给予用户一种强烈的层级以及深度的感觉,让他们明确知道当前是在年、月、日之前切换。在表达“年”的界面中,用户可以马上识别出今天的日期,并且操作其他根据日历的任务。

日历

当用户选择了其中一个月份,年份的视图将会合起,月份的视图展开。当天的日期用高亮的方式标记出来,而年份,在“返回”的位置展示。这样,用户可以清楚地知道,此时此刻ta正在浏览的是APP的哪个部分,上一步是什么,以及如何返回上一步。

日历

当用户选择某一天的时候,将会看到一个小小的过渡动画,月份的视图将会裂开,并将本周的日期推到顶部,下面呈现出选中当天的小时视图。利用每一个过渡动画,日历这个APP将年份、月份、日期的层级关系强化了。


原文链接:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

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

推荐阅读更多精彩内容