设计茶话会：iOS 11 的一些视觉新特性设计指南

文章转自：花长设计招待所

随着 iOS 11 的新版发布，设计风格较 iOS 10 相比，发生了一些新变化，体现在图标样式、大标题 TopBar 的出现、椭圆形按钮、搜索框的变化、标题加大加粗等多方面，我们对 iOS 的原生应用进行了研究分析，再参考 Apple 设计发布的 UIElements 源文件，结合实际工作，在这一期的茶话会，一起讨论确定了丁香园移动产品中的 iOS 11 视觉新特性设计指南。

该设计指南旨在指导 iOS 11 版的 App 设计在尽可能在一定程度上体现新的设计风格，又能适当控制设计与开发成本。

FootBar 和页面中一些图标风格发生了了较大的变化，从原来为 1PX 的线性描边设计风格调整为现在的面性填充设计风格，图标中线条加粗为 2PX，转角也加入了圆角属性，比较平滑，图标下面对应的说明文字也进行了加粗

iOS 11 设计示例

iOS 10 对比示例

a. 小按钮：样式从线到面，分两种：一种是灰色背景、主题色文字，一种是主题色背景、白色文字，整体样式为椭圆形

b. 大按钮：样式也是从线到面，是灰色背景、主题色文字

注：参数是建议标准，设计时可以按具体场景进行调整

iOS 11 设计示例

iOS 10 对比示例

新增有大标题 Tilte 样式风格，可以在主 Table 的页面以及比较重要的次级页面、信息页面进行合理运用，像 iOS 11 新版的 App Store，五个主导航的页面都有使用到

系统搜索输入框的高度由原来的 28 增加到了 36，圆角大小由原来的 6 增加到了 10，图标加文案从居中改为了 左对齐，文案的字体大小有所增大

iOS 11 设计示例

iOS 10 对比示例

iOS 11 在越来越多的场景使用标题加粗的属性，或用于对展示信息进行强调，或用于区分模块，或用于信息对比

iOS 11 在设计中更多地开始尝试使用背景色块的区分，来体现一些内容的分隔，或用于区分模块，或用于内容强调

iOS 11 设计示例