iOS 11 设计方向

距Apple 发布会还有2周时间，想想都好紧张呢。

需要关注的，除了传说中令人垂涎的"iPhone 8"，还有即将推出的新系统 - iOS 11。

每次 iOS系统大更新，不但增加了新功能，而且改进了交互和用户界面。对于新的界面设计，有人爱，有人恨。更有甚者，曾经在 iOS 7发布的时候，说接受不了扁平化风格，守着iOS 6拟物化设计的尘埃。

我们应当拥抱变化，接受新事物，跟随设计大方向（抱大腿）。

• 卡片式设计
  这个嘛，今年依然是重点。
  在Microsoft的Modern UI，Google的Material Design设计语言中，卡片式设计已经不是新鲜事。视觉效果嘛，前者是五颜六色的艺术派，后者是注重色彩搭配的理性派。后者更引入了 Z轴的概念，将三维空间投射到二维平面，使用不同程度的阴影，表现卡片内容的不同层级。而苹果也使用着卡片式设计，今年向卡片风格更迈进了一步，不过是扁平的卡片，大大的圆角，没有阴影，所有内容理论上处在同一平面。

新系统锁屏页面有个关于隐私的细节改善，值得点赞一下。
iOS 11 锁屏界面默认将推送通知隐藏，需要向上滑才可看到推送消息，而不会像iOS 10及以前，随手点亮下屏幕，隐私聊天和机密信息不小心就被别人看到了。（再也不用担心别人问几点了~）

notification card.jpg

推送消息卡片设计从之前的标题行（图标，应用名，推送时间）与消息间采用层次分明，到现在的同一层级。用户并不在乎是谁推送的消息，只关心该消息内容，因此新卡片设计将不相关的的信息进行了弱化。

这次苹果大刀阔斧的，将iOS 7以来的扁平iTunes Music/Apple Music设计，改为了卡片风格。新的设计在音乐播放的时候，允许推送消息显示在播放器底部，此前需要从顶部下拉通知中心查看。
同样大改版的，还有App Store

music n store.jpg

• 导航栏设计（Navigation Bar）【更高，更大，更粗】
  更高：新的设计在原有高度上增加了52pt的高度，用于放置页面标题。
  更大、更粗：页面标题使用更大号，更粗的字体。
  此前，导航栏高度为44pt, 页面标题一直置于导航栏的中心，多个原生应用，在新的设计中已经将Title移到左侧，处于原有导航栏的下方。

navigation bar.png

• 消失的表格视图（TableView）分割线
  在Apple自带的新闻应用中，不再使用分割线对表格视图的Cell间进行划分。在新版的微信读书应用中，也能看到同样的设计，取消分割线，既使得相关联的内容不被打断，完整，也使得不同表格视图区域（Section）之间界限清晰，整体结构清晰，界面干净整洁。

TableView Cell.png

• 可手势下滑折叠的页面
  在Apple Music应用中，选择音乐进行播放时，会弹出新的界面进行播放，用户可使用下滑手势，缩小该页面，并停留在底部。
  1.该设计允许用户进行其他页面的浏览，而不中断操作，还可通过点击底部的缩小版视图，放大并返回完整页面。在知名应用Overcast中也采用相同的设计。
  2.当该页面处于折叠状态时，没有遮挡住Tabbar，此时可点击barItem直接返回主页面，而不需要一层一层返回到父级页面。

scroll down popview.png

该设计可用于音乐播放器、新闻应用，任何可能有较多层级页面的应用，如在微信阅读文章时，有新消息过来，折叠该页面，选择聊天框进行消息回复，点击折叠区域，返回文章阅读。现版微信有实现类似功能，叫文章置顶，不过入口太深，该功能的使用率可想而知。。。
具体对比见下图

pop up.jpg

• 细节方面
  字体：设计时，苹果建议字号<20的英文，使用SF Text字体，否则使用SF Display字体，而开发者无需在意，系统会自动根据字号选择。（中文苹方字体仅有一种）

文末福利：
附上iOS 11 UI设计的Sketch模板，包含Symbol、San Francisco Pro字体。大家可以上手体验，开始准备改版吧。
https://www.sketchappsources.com/resources/source-file/apple-ios-11-ui-design.zip