写给设计师看的iOS11人机交互规范

本文大部分为读书笔记,小部分为自己的思考。

自iOS7发布以来,不知不觉中我们已经适应了"扁平化设计",而那些梦幻的光影、优美的材质、迷人的纹理好像离开我们很久了(其实也不过三四年时间)。这已经深深地改变了整个移动端设计——设计师们可以专注于动效和内容,而不是错综复杂的视觉细节。如今超写实设计(Skeuomorphic)越来越少见,取而代之的是迷人的渐变、细腻的投影和无处不在的卡片。

为什么扁平化设计会统治移动端设计?

在2007年iOS 刚发布的时候,人们对于触控的智能手机是完全陌生的。所以那时候苹果公司引入了强有力的隐喻——直白模拟现实的设计,来教育用户。比如系统内置的iBook程序。

但是当人们越来越熟悉智能手机的时候,这种强有力的隐喻会让人觉得过于直白,过于累赘。超写实设计是一种包容性较低的设计,它的设计隐喻性过于直白,越来越不适应内容大爆炸的移动互联网时代了。随着移动端承载的内容越来越多,所有的设计都应该让位于内容。

iOS的核心设计理念

iOS的整个设计围绕着三个核心理念:清晰、遵从、深度。

清晰

让事情变的显而易见,可交互部分(如按钮、链接等)应该是不言自明的。字体的大小要合适,间距要合理,以便于阅读。你的内容需要清晰指出你的软件是什么的?能干什么?

文字的可读性和对比性

标题应该与内容产生良好的对比。标题字体大小建议使用34pt及以上,内容字体大小建议使用17-19pt。根据经验中文字体大小可以比英文适当减少1-2个pt。文本要与其他元素对齐,以便现成流程的视觉流线。iOS11多使用左对齐(向安卓靠拢?)和居中对齐

图标应该容易懂

图标不应该表意不清!而是要让用户一看就懂。文字搭配图标是最佳的方式,因为再明显的图标也没有文字来表达的准确。在一个软件里,同一个图标不应代表2个或多个意思,因为这会让用户感到困惑。

为了应对不同分辨率的屏幕,你应该使用矢量化设计。

iOS11内置部分应用使用面性填充图标代替了原本的线性图标,图标中的线条,也有原本的1pt改为了2pt。

页面描述应该准确

每一个页面都应该明白无误地表示它到底是什么。品牌标识应该最小化的,你应该清楚铭记你的APP是你们的一个产品,而不是你们企业VI的一部分

如果页面中有图片,建议选取高质量的素材和干净背景,外加清晰的标题。

颜色是有意义的

颜色是有意义的。在UI设计中红色代表破坏性行为,绿色代表肯定行为,蓝色代表链接,灰色代表非激活状态。不要混淆使用颜色,比如把绿色用于退出登陆按钮(破坏性行为)。

可点击

按钮应该是易于点击的,它们的大小应该在30-60pt之间,最佳尺寸为44pt。如果你的APP有点击查看图片的功能,请确保包含缩放功能,最好加入双击缩放功能。随着iOS设备的屏幕越来越大,利用滑动手势轻松导航到前一个屏幕的功能是非常有必要的。如果你的页面内容很多,导致页面很长,建议加入双击Status bar回到顶部功能。

横屏模式

横屏模式我们常见于iPad等设备中。苹果公司建议在6P和iPhone X上使用横屏模式。你可以在Sketch中尝试使用自动布局设计,而Xcode也早在Storyboard中加入了Auto Layout和Size Class。技术改变世界,技术提升效率。

遵从

你的内容才应该是屏幕的主角,其他事物都是次要的。你应该使用界面设计元素衬托你的内容,而不是去干扰它。

简化

你的用户界面应该直达审美核心。每当你添加一个元素,就问问自己“这个有必要的吗?” 如果你的APP是游戏或需要特别主题,趋向于使用沉重的纹理,3D效果和多重阴影。如果不是,你应该专注于功能性颜色,和谐的渐变和优美的排版。

内容应该最大化

你的内容应该占据整个屏幕,把内部要素最大化。避免在同一个的滑动区域,使用多种不同形式手势操作,以允许更多的空间用来交互。

颜色

你应该使用突出的颜色来显示某个元素是可点击的或者需要高亮的。如果你选不好主题颜色,那就选蓝色吧,因为它是最安全的颜色。你如果是初学者,建议使用浅灰色背景/白色背景搭配黑色文字来开始设计,这个方案拥有极好的对比度和可读性。

字体

由于用户界面的简化和对内容的关注,文本内容将占据整个屏幕的50-90%。因此,你需要选择一个漂亮并的字体,并设置字重和颜色,以期有漂亮的视觉感受和最佳的阅读体验。为了让你的设计易于理解和贴合iOS系统,推荐使用默认的旧金山字体(苹方字体)。因为苹果公司在所有的内置程序都使用了它。

负空间/留白

使用负空间,让视觉焦点放在内容上。你看到的越少,你就越能专注于一些事情。留白也给予整个版面呼吸的空间。不要使用太多的结构层级,不要让你的视觉元素霸占你的屏幕。建议使用8pt网格模式设计,这是移动端的最佳网格设计模式。

深度

深度也许是最难理解的一部分。这是一个非常抽象的概念,但同时又是非常有力量的和独一无二的。深度的灵感来自于任何事物之间都有上下关系和场景过度。在现实世界中,当你从一个房间走道另一个房间,你会体会到距离感和发展过程。这也是你不会迷路的原因。

页面过渡

iOS最令人兴奋和感到独特的地方就是动画。每个页面的过度,从主页面到文件夹页面,再到App页面,其中充满了深度的隐喻。

背景模糊

为了防止背景对你内容清晰性的干扰,所以产生了背景模糊。背景模糊不仅允许你保持背景原本颜色,并且把焦点聚焦于前景内容。当然背景模糊也不是一种虚构的发明,它同样来自于我们的现实世界。比如当你盯着一样东西看的时候,其他事物就变的模糊不清了。

动画

动画不仅可以从一个屏幕转换到另一个屏幕,还可以为你的设计增添愉悦性和乐趣。它是提升你的app品质的一个重要却常被忽略的因素。通知比较明显,当背景中有大雨的时候,天气比较好理解。

虽然鼓励使用动画,但不应该过度。它们应该服务于你的内容、功能目标以及视觉引导。

手势

随着iOS设备的屏幕越来越大,返回按钮的位置已经太高了,拇指不易触及。所以,虽然不如可见按钮那么明显,但手势可以作为可见交互模式的一种补充。

3D触控

3D Touch允许用户快速访问应用程序内外的选项。类似于你Mac上的快捷键,它其实是一个高级功能,所以它不应该独有,即你的用户在没有使用它的情况下也能完整使用的你的APP。

声音

因为手机使用环境的复杂性和多样性,声音在APP中应该被最低限度地使用。不过你可以设置特别的通知声音,让其“未闻其人先闻其声”,为你的APP形成品牌/产品特色。

iOS11的新特性

大标题

iOS 11使用又大又黑的标题。因为随着iPhone P和iPhone X的出现,屏幕越来越大,屏幕空间变的充裕,现在出现大的标题才合理并且有意义。大字体的另一个原因是可访问性,随着智能手机对全社会的渗透,智能手机已经不是年轻人的专利了,苹果公司需要让iPhone顾及各个年龄段。在辅助功能中,允许用户设置字体的大小。在iOS 11中,所有的苹果的内置程序都支持这个功能,希望越来越多的第三方APP支持这个功能。

卡片式设计

更大的屏幕意味着更多的使用空间。在小屏幕的iPhone上嵌套容器(卡片),对于局促的屏幕空间来说是奢侈的,不合理的。但是当iPhone X和P系列出现的时候,情况就完全不同了。把通知栏、选项卡、导航,通过卡片的形式来更好地组织起来,可以让你更加方便的浏览。圆角的卡片使内容看起来更有触感和温润感。你可以使用模糊的背景和阴影来为设计添加深度敢和上下关系。

iOS的发展的思考

是什么原因导致一开始面向极客的又黑又酷的iPhone和iOS变成如今的模样。我个人的理解苹果的设计逻辑是以下这样的。

WHY?

设计背后的原因:移动端信息爆炸、使用人群的扩大、屏幕尺寸多样化和大屏化、普通用户成长为高级用户、软件功能越来越复杂

how?

如何做:包容性设计模式、自动布局、优化信息结构、可调节字体大小、防迷失设计、易读的文本

what?

最后输出的设计:扁平化设计、专场动画、卡片化设计、优美的版式、美丽的字体、大标题


参考文献:

Meng to -《designCode2》

Apple -《iOS Human Interface Guidelines》

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

推荐阅读更多精彩内容