苹果iOS设计规范

  • 经验类型经验/观点
  • 经验属性好文转载
  • 经验版权不使用原创授权
6218 0 25 2019-04-26

这次整理了iOS的设计规范,希望能对大家有所帮助。

为什么要遵循规范?

设计时遵循规范是为了尊重用户习惯,提高开发实现的效率。

规范由设计升华而来。从视觉的角度来说,规范实际上就是一个素材库。产品有什么样的视觉呈现和元素定义,都有可遵循的标准,保证日后迭代可以延续产品所传递的思想跟价值,最大限度保证了产品的一致性。



设计需要遵循的几个规范



操作系统规范

遵循系统平台的规范可以让刚入行的新人少走弯路,避免我们设计出的界面出现大的问题。



公司设计规范

遵循公司的规范可以让UI风格与公司风格形象保持一致,更具品质。



产品内设计规范

产品规范可以让界面的设计更统一协调,设计时需要基于平台和公司规范上参考制作。




iOS设计三大原则



清晰:视觉层

在整个系统中,文字在每一尺寸都是清晰易读的,图标精确而清晰,装饰精巧而适合,是的用户更易理解功能。负空间、颜色、字体、图形和界面元素巧妙突出重要内容并传达交互性。


设计要点01:颜色

在UI的早期比较偏向高级灰的设计,是因为该开始时大多UI设计师都是从平面转过来的,比较推崇高级灰、消色设计,随着发展现在几乎都采用高饱和的的颜色,减少了灰度颜色的应用,甚至毛玻璃效果,模糊效果,字压图等越来越少。

设计早期可以通过较灰的颜色来避免色台对于间距和布局的影响,一旦设计完成,需要通过调整颜色和色调,来保证色彩在任何情况下都可以辨识。同时,也需要关注色盲人群的体验。


设计要点02:排版

对任何信息进行排布的时候,必须贯穿掌握设计的四大基本原则——对齐/重复/亲密/对比



遵从:交互层

流畅的动画和清晰美观的界面可以帮助人们更快的了解并且与内容交互,而不应该(因为过于花哨而)干扰到用户的使用。内容通常充满整个屏幕,而半透明和模糊常常暗示有更多内容。尽量少的使用边框,渐变和阴影,来保持界面的亮度和通透。




深度:结构层

使用不同的视觉层级和真实的运动效果来传达层次的感觉,赋予界面活力,并促进用户的理解。让用户通过触摸和探索来发现程序的功能不仅会使用户产生喜悦感、更加方便了解功能,还能使用户关注到额外内容。在对内容进行导航时,层级的转场效果提供一种有深度的感觉。









界面结构规范



状态栏


状态栏中固定在屏幕上边缘


1倍图下尺寸为20pt

不要自定义状态栏

避免滚动内容直接透过状态栏显示(设计抽屉导航时)

在用户全屏观看媒体时,可以考虑隐藏状态栏以及所有页面UI





导航栏

导航栏是半透明的(70%),位于状态栏下方

1倍图下尺寸为44pt(iPhone X上为88pt,是因为需要加上刘海)

不要自定义导航栏

避免导航栏内容过多,空间数目一般不超过2


iOS11导航栏分为两种形式



标签栏

标签栏是半透明的(70%),始终位于屏幕底部

1倍图下尺寸为49pt(iPhone X上为83pt,是因为需要加上Home Indicator)

标签栏一次最多承载5个标签,多于5个的图标以列表形式收纳到“更多”里

标签栏用来组织整个应用层面的信息结构,一定是最常用的

标签栏的图标有正负形


(标签栏半透明和模糊暗示有更多内容)




工具栏

工具栏是半透明的(70%)

1倍图下为44pt(iPhone X上为83pt,是因为需要加上Home Indicator)

工具栏内放置用户总常用的指令

工具栏可以放置文字或图标,当项目超过3个以上的项目可以使用图标





系统字体规范

在用户界面中,每一个单词和字母都至关重要。好的字体等于好的设计。字体成了界面设计的基石,而我们设计师,则是这些「信息基石」的修造者。

文本应该至少达到 11 像素,使得在典型视距内无需缩放即可看清。


iOS 9之前的字体

英文字体:Helvetica

中文字体:华文黑体


(都是基于Helvetica进行改动)




iOS9之后的字体

英文字体:San Francisco(旧金山)

中文字体:PingFangSC(苹方)


从对比来看,iOS 9字体相比iOS 8字体更好一些,整体显得更为圆润,让阅读变得更加容易。

点击了解更多关于苹果字体的信息:https://www.uisdc.com/ios-9-the-best-font




人机交互规范

iOS 11将这个先进的操作的系统又一次提升至新标准。

它让iPhone和iPad变得更为强大、更个性化,同时也变得更为智能。

手势规范

用户通过在屏幕上执行手势与iOS设备进行交互。这些手势与内容关系密切,并增强了与对象的直接操控感

Image title

Image title

Image title


Image title





全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票