教案APP界面设计规范.pdfVIP

恋爱说APP界⾯设计规范 ⼀．概述 编写⺫的：编写iOS移动产品设计规范（以下简称“设计规 范”）主要是为了规范化公司移动产品设计，将常⽤控件的设 计标准化，使其更符合iOS平台的特性，降低⽤户的学习成 本。 此外，也能让产品、UI、开发⼈员在产品细节上达成共识，减 少沟通成本，提升开发效率。 主要⾯向对象：产品⼈员、UI设计师、交互设计师、开发⼈ 员。 适⽤范围：iOS平台上所有APP与⼤多数移动版⺴⻚。 ⼆．设计原则 2.1设计 依从：⽤户界⾯（UI）应当有助于⽤户理解内容并与之互动， ⽽⾮对抗。 清晰：⽂字在每种字号下都易于阅读，图标表意准确清晰，装 饰也恰到其度，并以对功能的⽆⽐关注驱动设计。 纵深：视觉上的分层界⾯和逼真的动作使其更赋活⼒，提升了 ⽤户的愉悦和理解。 2.2交互 可控：所有交互应该给予⽤户安全感，让⼈感觉程序可操纵 性。 适时反馈：永远在合适的时间出现，惊喜⽽⾮“惊吓”。 有意义：交互是为了引导⽽存在，尽量避免⽆意义的炫技。 三．格式 3.1标准单位   3.1.1Pixels(像素)   Pixels是数字显⽰屏上我们可控制的最⼩物理元素，在⼀个 特定屏幕尺⼨中可以有多个像素。 3.1.2Points （点） Points⽤以衡量分辨率。根据屏幕的像素密度，⼀个point可 以包含多个像素（⽐如在常规的Retina屏上，1pt包含2 x 2 的像素）。 3.2字体的选择 iOS版本中默认字体都是Helvetica Neue。建议中⽂字体 Mac下⽤的是Heiti SC(⿊体-简)。Windows下则为华⽂细 ⿊。设计以iPhone6的尺⼨进⾏设计，所以所有的字号都要使 ⽤双号数字。 3.3字体⼤⼩（建议⼤⼩） 确保⼀个⾃定义字体在不同尺⼨下的所有类型都具备可读性。 实现这⼀效果的⽅法之⼀是效仿在不同的⽂本尺⼨下iOS系统 呈现字体样式的⼀些⽅法。例如（以iPhone6及以下尺⼨为 例）： 1）⽂本永远都不应该⼩于22px ，内容样式使⽤34px的字号 作为最⼤尺⼨的默认⽂本尺⼨设置。（个别情况：⽂字最⼩使 ⽤20px的，如标签栏图标的⽂字为20px;⽂字最⼤使⽤34px 及以上的，如弹窗按钮⽂字为36px） 2）为了区分标题与内容样式，标题样式使⽤更重的值，可以 是颜⾊或字体⼤⼩区分。 3）导航栏的⽂本使⽤相同的字号，值为34px。 3.4屏幕与显⽰ 3.4.1 图像分辨率（ppi） PixelsPer Inch所表⽰的是每英⼨所拥有的像素（Pixel）数 ⺫。因此PPI数值越⾼，即代表显⽰屏能够以越⾼的密度显⽰ 图像。当然，显⽰的密度越⾼，拟真度就越⾼。 我们在移动应⽤中提到ppi和dpi其实都⼀样（概念不同，但 对设计来讲没有特别需要深⼊了解），所以我们先忽略掉 dpi。 1）第⼀代的iPhone屏幕密度：165 ppi；(基本已经淘汰) 2）iPhone4开始后的屏幕密度：326 ppi； 3）iPhone6 plus屏幕密度：401 ppi ； iPhone6 plus缩减像素取样 在iOS上渲染像素和物理像素（Physical pixels）是等同的， 只有⼀个例外：iPhone 6 plus的Retina HD显⽰屏。由于它 屏幕的像素分辨率要低于⼀个常规的@3x分辨率，所以被渲 染内容会⾃动调整为原始尺⼨的87% （从2208*1242像素来 适应为1920*1080像素的显⽰屏分辨率） 3.4.2 iOS的常⻅分辨率和显⽰规格 3.4.3界⾯基本组成元素（建议⾼度） ⼏乎所有的iOS应⽤都应⽤了UI Kit framework中定义的组 件。了解这些组件的名字，作⽤和构成能够帮助你设计应⽤过 程中做出更好的决定。 界⾯基本组成元素包括：状态栏（Status Bar）+导航栏 （NavigationBar）+标签栏（Tab Bar）/⼯具栏（Tool Tabs）+内容区域； AppStore、Safari界⾯预览 3.5图标icon 每⼀个