《界面设计》课件-IOS规范

界面设计Interface design第三章

商业规范体系构建OS规范界面设计Interface design核心设计哲学01色彩02图标03字体与排版04核心设计哲学01清晰（基石）确保每一个元素都为功能服务。尊重（升华）让界面优雅地退后，将焦点完全交还给内容。深度（注入活力）通过视觉层级与流畅动效，让用户直观地理解整个应用的空间与结构。色彩02首要任务：降低用户的认知负荷。颜色在无需阅读和思考的情况下，瞬间区分什么是背景、什么是可操作的元素，什么是彼此关联的内容组，从而高效地建立信息层级。色彩02iOS

灰度色彩层级通过颜色轻重表达出四种不同重要性的信息层级标题副标题占位文本禁用文本越重要的信息需要具有更强的对比度以吸引注意力。色彩02特定语义颜色一套会‘动态翻译’的颜色语言。它定义的并非固定色值，而是颜色的角色和意图。一个‘首要按钮’在浅色模式下可能是深蓝色，在深色模式下自动变为浅蓝色，但其‘首要’的语义始终不变。这极大地提升了跨模式设计的效率与一致性。色彩02色彩02设计目标是明确的：在不同模式下，维持一致的视觉感知与层级关系。语义化颜色体系核心原理：

还原真实世界中光线衰减的物理感受——这种源于自然的映射，正是让界面感觉舒适、层级清晰可辨的根本原因。色彩02主题色我们确保这套主题色能智能地动态适配深色与浅色模式。我们还专门建立了一组对比度更强的色彩维度，以满足无障碍设计需求，为用户自定义高对比度场景提供了坚实支持。色彩02颜色对比度比率核心原则：在深色背景下变浅，在浅色背景下变深。在最初选择主题色时，就必须前瞻性地测试它在两种语义下的可见度与易读性，确保其在任何模式下都清晰可用。色彩02对比度可被量化正确流程是：在设备上预览，并为浅色、深色模式分别微调颜色，最终通过公式验证其对比度比率达标。这才是交付专业、可信赖设计的保证。色彩02自主选择主题色它始于对颜色感知一致性的跨模式微调，最终必须落脚于严格的量化验证。在线的对比度检查工具，输入色值进行精确计算，确保调整后的动态颜色在任何模式下都坚守4.5:1

这条不可妥协的安全底线。色彩02灰度色板体系Fill

Colors 填充颜色像是柔和的‘水彩’，用于大面积渲染背景区域，通过透明度创造出丰富的层次感。Separator

Colors 分隔颜色像是一支精准的‘绘图笔’，专门用来勾勒边界和分割线。色彩02交织网格元素避免视错觉。有重叠的操作元素避免误读为禁用状态或bug。灰度色板体系：两个灰度色板分类|6种灰色梯度。色彩02色彩02色彩02‘液态玻璃’材质边缘高光磨砂质感半透明效果色彩02外观模式迎来重要更新：深色色调浅色色调色彩02从过去为不同设备分别设计，转变为采用一套统一的系统，让图标能在所有平台上无缝适配。图标设计哲学色彩02采用更简洁的网格与更圆润的半径，使其视觉更协调。圆角矩形图标圆形图标预留更多空间，确保了它在各种比例下的视觉平衡。图标03为求一致系统能自动将多数旧图标适配新模板。为求整洁用画布遮罩整合了超出边界的凌乱元素。为求完整特殊图标，自动处理，通过重绘来达到尽善尽美的统一效果。图标03基于新的设计系统更新了模板，这对你开始自己动手设计图标时会非常有帮助。FigmaSketchPhotoshopIllustrator图标03分层背景与前景的分离图标03分层前景的多层堆叠图标03材质风格与透视控制平视视角避免3D写实，以确保材质细节得以清晰展现。有意识地设计立体感使其与玻璃材质协调共生新版‘预览’图标所示，这种有目的的视角能有效聚焦视觉，让图标与材质相得益彰图标03材质风格与透视控制图标03半透明细腻的层次、轻盈的质感与迷人的深度。图标03减少花瓣数量来简化结构，让材质的交汇与反光成为真正的视觉焦点。图标03更新色彩使其如染色玻璃般鲜艳通透，并借助新的网格系统赋予更多呼吸空间，最终以色彩阴影强化了玻璃材质的深度感。图标03圆润的边缘与粗壮的线条图标03精心调校的系统渐变图标03图标03工作流程

(设计工具)Icon

Composer矢量工具创作图标03工作流程

(设计工具)图标03工作流程

(设计工具)分层是可控性的关键工作流程

(设计工具)图标03保持设计稿的平面与简洁工作流程

(设计工具)图标03各图层导出为SVG工作流程

(设计工具)图标03导出图层图标03工作流程

(设计工具)Icon

Composer：高效与可视化简单的拖拽即可导入并管理图层，强大的实时预览功能让您无需反复导出，就能同时查看图标在iPhone、iPad等所有苹果设备上的显示效果。图标03阴影运用精细调整图标03若导入的是PNG，则需直接提供暗色变体，确保图标在任何环境下都清晰出众。图标03图标03虽然方形与圆形图标共享网格，但在圆形画布上请务必进行视觉微调，因为形状的改变会影响视觉平衡。图标03圆形图标（如手表）适当放大图案或预留‘出血’。丰富的预览工具测试适配性。图标03图标03将成品保存为

.icon

文件，直接拖入Xcode，即可作为应用图标使用。图标03图标03将抽象概念转化为直觉的实体，运用平衡、对比和微妙的动感，创造出一种人人都能理解的无言沟通。油漆桶图标03隐喻寻找一个直观的图形来代表功能。简洁确保信息能被瞬间读取。传承性有意义的渐进式优化，使图标成为历久弥新的品牌资产。情感连接让图标成为应用富有魅力的面貌。图标03Keynote的图标从2003年起，‘讲台’这一核心隐喻始终不变，通过加入木质质感、麦克风等元素强化情感与识别。图标03Keynote的图标为用户构建了稳定的品牌记忆，并传递了跨平台体验一致性的重要信息。图标03一套强大的设计原则应能跨越不同产品。图标03图标追求三个层面的极致：色彩的和谐形态的清晰细节的精致图标03Music

Memos的图标完美平衡了传承与系统融合。GarageBand的品牌渊源遵循iOS图标网格图标03新闻图标的演进生动地诠释了图标设计的核心原则：清晰的边界、强烈的对比与简化的图形图标03一个卓越的图标需要三个要素：独特的视觉个性严谨的实验测试精神不可或缺的耐心这三者共同将好的想法铸就成了经典的设计图标03SF

Symbols完整的粗细梯度自动的文本对齐能力动态适配文本的大小与粗体变化图标03SF

Symbols通过双重对齐机制实现视觉精准：符号与大写字母高度居中对齐运用负间距技术图标03为符号选择正确的变体是关键的设计决策：面性符号线性符号斜杠变体图标03不同的轮廓形态丰富的变体图标03运用颜色通过赋予符号色彩，我们不仅能增强其吸引力和多样性，更能构建一套视觉编码系统，使关键信息脱颖而出。克制且有规律，才能实现有效的沟通。字体与排版04色彩图形界面的皮肤字体排版骨架它构建了信息的秩序，是一切阅读体验的基础。字体与排版04每个字形自带的‘边轴’决定了其默认间距字间距字体与排版04‘字偶距’是字体设计师为特定字母对预设的微调。‘字间距’则是我们可整体调整所有字母间隔的工具。调整字间距来优化字体字体与排版04字间距的调节正随着字体技术的发展而进化：需为不同尺寸准备多个静态字体文件。一个可变字体文件即可通过参数灵活适配。将传统的Tracking值（1/2048em）转换为更直观的百分比单位，例如6号字的间距即为3.66%，这使跨尺寸的间距控制变得精确而统一。字体与排版04静态字体的核心设计策略：小字求晰，大字求整字体与排版04SF

Pro

可变字体（Variable

Font）：

小字号‘放：增加间距保障清晰阅

读

中字号‘调’：根据上下文精细

微调 大字号‘收’：压缩间距塑造视觉冲

击 字体与排版04行间距字体与排版04行间距一项关键的设计决策：优秀的排版正在于做出这些有依据的权衡。字体设计的坐标系建立在

2048个单位的网格上。1em这个网格的100%，其物理长度等于当前字号（如16pt）。其转换为

em（75/2048

≈0.0366em）

后，再乘以字号（如16pt），即可得到实际的物理间距

0.586pt。Tracking值网格上的绝对单位。（75）字体与排版04确保了字母间距能随字号完美缩放。字体与排版041em等于当前字号（如16pt）。再乘以字号，就得到了能随字体完美缩放的物理间距（如0.586pt）。字体存在于一个2048单位的网格中。将Tracking值（如75）转换为em单位（75/2048）。字体与排版04这套字体蕴含了两层设计智慧：‘表达’，通过完整的字重体系赋予界面节奏与情感。字体与排版04这套字体蕴含了两层设计智慧：‘关怀’，其光学尺寸功能能主动为小字号放大细节、为正文优化间距，这种无微不至的自动优化，正是专业设计的体现。字体与排版04字体样式字体与排版04字体样式视觉结构性语言兼容性字体与排版04SF字体的设计逻辑极为严谨：调节负空间三种精准的宽度样式字体与排版04权衡其功能与边界：紧缩与压缩样式字体与排版04面对海量字体，只需进行快速诊断：明确‘用途’，锁定字体在功能上必须具备的特质。定义‘印象’，确定字体在情感上需要承载的基调。字体与排版04追溯其‘设计基因’——书写工具字体与排版04对比度字体与排版04文本字体与显示字体‘易读性’服务，牺牲华丽的对比来保证阅读的流畅。‘表现力’而生，用强烈的对比和紧凑的节奏来塑造风格。字体与排版04文本字体与显示字体将Big Caslon这样的显示字体用于小字号正文时（如上方案例），其高对比度反而会成为阅读的障碍。字体与排版04字体设计高对比度

：

带来了大尺寸下的图形魅力与锐利感，但代价是小尺寸下的可读性丧失 。低对比度

：

牺牲了部分视觉张力，却换来了小尺寸下的坚固形态与清晰的阅读体验。字体与排版04卡斯隆的复兴版本Big Caslon ‘为显示设计’，以高对比度追求视觉冲击。Adobe

Caslon

Pro则‘为文本设计’，其更宽的字距和更低的对比度 。字体与排版04‘表现主义’，通过显示字体在瞬间抓住用户。‘功能主义’，通过文本字体在长久阅读中提供无声的陪伴。正确地区分和使用它们，是优秀排版的基础。字体与排版04为正文选择字体，请遵循三大原则：风格上保持‘克制’，选择对比度中等、结构简单的字体。字重上追求‘均衡’，优先常规至中等字重。排版上确保‘清晰’，为小字号设置舒适的字距。提供无感的、舒适的阅读流字体与排版04Cochin以其‘过渡旧式’的特质和小写字母的经典比例，奠定了优雅与奇妙的基调。字体选择字体与排版04Snell

Roundhand组合步步要敢于使用对若混合字体，支撑这一切比，利用字重、务必确保风格的，是对字字号制造强烈差异显著以避体风格的持的视觉层次。免冲突。续学习。步字体与排版04字体与排版04字体选择应坚持‘功能优先’：主题高度相关如果字体在比例、大小等视觉功能上存在缺陷，就应果断放弃。清晰有效的传达字体与排版04不同字体的固有比例（即字体框内的绘制方式）使