《苹果ui设计规范,英文》由会员分享，可在线阅读，更多相关《苹果ui设计规范,英文（10页珍藏版）》请在金锄头文库上搜索。
1、苹果ui设计规范,英文篇一：Apple Watch界面设计规范Apple Watch界面设计规范 本文来自Be For Web英文原文:XX/译者信息: C7210 - UX玩家、交互设计师、猫奴、guitar fucker，现就职于腾讯ISUXUI设计基础Apple Watch体现着如下几个方面的主题思想：个人。Apple Watch是面向穿戴而设计的，所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digital Touch来“传心跳”或“传画” - 这些全新的沟通方式是极具个人色彩的。加速感应器和心率传感器可以日复一日的向佩戴者提供
2、其运动行为方面的个人数据。苹果推出的其他任何设备都不曾与用户建立起如此紧密的关联。在你为Apple Watch设计应用的时候，时刻留意这种个人化的关联是非常重要的。整体。Apple Watch旨在使硬件与软件的边界更加模糊。数码表冠是经过精心打造的实体控件，帮助用户在软件当中进行精巧的导航操作。Taptic Engine可以与提示信息或界面操作结合起来，为用户提供微妙的触觉反馈。Force Touch - 一种可以由硬件感知按压力度的触摸方式 - 为软件的情境化控制方式带来了一个全新的维度。即便是Retina显示屏的物理边缘也被考虑了进来 - 隐性的边缘渲染方式允许你打造出“边到边”的全屏UI
3、设计。上乘的应用设计方案需要贯彻这种软、硬件一体的体验原则。轻量。Apple Watch应用在设计上要注重快速、轻量的交互流程，并充分利用屏幕显示空间及其位于手腕位置的这一重要特性。出于隐私和可用性方面的考虑，界面当中信息的获取和移除方式都应该是非常快捷的。举个例子，Apple Watch上的Short Look信息提示方式的设计原则，就是首先以最小化的方式提供少量提示信息，如果用户持续关注，再为其展示更全面的信息。Glance则是通过一种易访问的、可通过轻扫手势操作的界面形式将应用内部的信息呈现出来。为Apple Watch设计应用时，要遵从于佩戴者使用该设备时的体验情境，例如短暂而高频次的
4、交互会话，以及狭小的屏幕显示空间等等。Watch应用是对iOS应用的补充，而非替代品。如果说我们能以“分钟”来度量iOS应用的人机会话时间，那么对于Watch应用来说则需以“秒”计。交互流程必须简短快捷，界面必须简单易懂。pple Watch必须配合用户的iPhone才可以运行你的应用。界面风格Watch应用支持两种导航方式：层级式。这种方式与iOS的导航风格相吻合，最适用于拥有层级化信息结构的应用。在层级式导航的应用当中，用户在每屏当中只能做出一个选择，直到他们到达目标位置。要继续导航到其他地方，用户需要折返一部份或是全部的层级来做出不同的选择。对于交互流程较为复杂的应用来说，层级式导航比扁
5、平化的、基于页面的导航机制更加适用。 页面式。基于页面的界面形式允许用户通过横向轻扫的手势在不同的内容页之间进行导航。这种模式最适用于那些数据模型简单、且不同页面之间不存在直接数据关联的应用。界面底部的圆点指示符可以让用户了解目前所处的位置。要尽可能将页面总数控制在很小的范围内，使导航保持简便快捷。你不能将以上两种导航方式组合起来使用。在设计阶段，必须从两者当中选择一种最适于你的应用内容的方式，并以此为基础进行设计。无论使用哪种导航方式，你的应用都可以模态化的呈现内容。模态化界面可以使用户不受干扰的完成任务或获取信息，但是相应的，他们将暂时无法与应用当中的其他部分进行互动。请参考模态表单。交互
6、方式基于行为的事件。轻点是用户与应用进行互动的主要方式。列表行、按钮、切换等控件都是通过轻点来进行操作的。这些事件接下来会被传递到WatchKit扩展的代码当中。 手势。你不能在应用中添加任何定制化的手势。系统已经代你制定了标准的手势行为： o 通过纵向轻扫使当前界面滚动。o 通过横向轻扫在基于页面导航的界面之间前后查看。o 从屏幕左边缘向右轻扫，可以返回父级界面。o 轻点选项控件或其他交互元素。轻点事件会由系统处理并传递到WatchKit扩展的相关行为方法当中。Apple Watch不支持多指手势，例如捏合等。按压。如此小屏只能容纳为数不多的界面控件，因此苹果带来了一种全新的交互方式：按压。
7、正如可以感知到普通的轻点，Watch的Retina屏幕同样可以灵敏的感知到按压。按压用来唤出与当前界面相关的情境化菜单。你可以在应用中使用这种菜单来展示与当前内容相关的各种操作选项。请参考菜单。数码表冠。可以精准滚动的实体控件，使浏览长页面等任务变得更加轻松，而且屏幕不会被手指遮挡。Glance是Apple Watch当中的一种快捷视图功能，它能将应用当中的重要信息提取出来，并以简明的形式呈现。理想情况下，Glance具有适时性和情境关联性。成组的Glance汇总了用户最为关注的应用当中的重要信息。Glance采用的是拉取机制，而非推送。所以，与推送提示有所不同，是否通过Glance访问信息是
8、由佩戴者自己决定的。Glance具有以下几方面的特性：基于模板。Glance界面的上下两部分有各自独立的模板。你可以在Xcode当中挑选合适的模板，并按照相应的规格设计你的内容。不可滚动。所有信息都要集中呈现在一屏当中。 只读。轻点Glance界面当中的任何地方都会打开相应的应用。 非强制。不是所有的应用都需要Glance视图，用户可以自主选择在Glance中显示哪些应用的信息。Glance界面的底部区域是预留给点状页码指示符的。根据用户当前所处情境来配置Glance的信息。滞后的或是不相关的信息会使Glance失去价值。通过时间和地点信息来传达相关性。Glance可以与其对应的应用建立深度关
9、联。利用Handoff功能，Glance可以在用户轻点的时候，向与其对应的应用传递当前视图中显示的信息；应用启动之后，便可以根据这些信息来呈现不同的界面或是在已有界面当中进行相应的配置调整。Glance必须向用户提供有用的信息。不要只是为了给你的应用增加一个启动入口而提供Glance视图。篇二：ui设计规范命名规则模块_类别_功能_状态.pngnav_button_search_导航_按钮_搜索_默认.pngsearch搜索 bg 背景 selected按钮状态（选中）button按钮 nav导航栏 disabled 按钮状态（不可点击）tab菜单栏icon 图标 default 按钮状态（默
10、认）bg 背景 personal tada 个人资料presses 按钮状态（按下）user 用户pop 弹出back 返回refresh 刷新 delete 删除 eidt xximage 图片 download 下载 content 内容banner 广告 login登陆left right center左右中registered 注册title 标题 msg 提示信息link 链接 note 注释 logo 标志icon制作：iOS120px：Icon_12080px: Icon_small_4058px: Icon_small114px: IconAndroid：36*36px：dra
11、wable-ldpi48*48px：drawable-mdpi72*72px：drawable-hdpi96*96px：drawable-xhdpiAndroid安卓系统dp/sp/px换算名称 分辨率 比率rate（320px）比率rate（640px）idpi 240*320mdpi 320*480 1hdpi 480*800xhdpi 720*800xxhdpi1080*1920Android的图标尺寸屏幕尺寸 启动图标 操作栏上下文320*480px 48*48px 32*32px 16*16px480*800px480*854px 72*72px 48*48px 24*24px640
12、*960px720*1280px 48*48dp 32*32dp 16*16dp1080*1920 144*144px 96*96px 48*48px比率rate（750px） 系统通知 最细笔画24*24px 2px 36*36px 3px 24*24dp 2dp 72*72px 6pxiPhone图标尺寸设备 AppStore 程序应用 状态栏 spotlight搜索标签栏导航栏6p 1024*1024px180*180 54px 87*87 146（66）132（160px）（物理60px）6 1024*1024px120*120 54px 58*58 98 （44）985 1024*1
13、024px114*114 40px 58*58 98 （44） 984 1024*1024px114*114 40px 58*58 98 （44）983 515*512px 57*5720px 29*29 49 （44）44 （80px）点击区域点击区域大于44pxretain屏幕大于88px字体大小上的英文字体：HeiveticaNeue 中文：mac下是 黑体-简 win下 华文黑体Ios 长文本 （可接受）26px（见小值）30px（舒适值）32px34px 双数短文本 （可接受）28px（见小值）30px（舒适值）32px注释 （可接受）24px（见小值）24px（舒适值）28px手机
14、上的字体：Droid sans fallbackAndroid高分辨率长文本 （可接受）21px（见小值）24px（舒适值）27px（480*800）短文本 （可接受）21px（见小值）24px（舒适值）27px注释 （可接受）18px（见小值）18px（舒适值）21pxAndroid低分辨率长文本 （可接受）14px（见小值）16px（舒适值）1820px（320*480）短文本 （可接受）14px（见小值）14px（舒适值）18px注释 （可接受）12px（见小值）12px（舒适值）1416px篇三：IOS界面规范IOS界面规范IOS界面需要设计2套尺寸，以640x1136px为基础去适配 iphone4,5,6,（ip6可以在ip5的基础上空白区域拉伸即可，资源同用 ip5的，位图则要等比缩放），以1242x2208px的尺寸去设计 iphone6 plus,并且切图是3x，如果时间多的话，iphone6也可以单独设计一套一、iphone5，iphone6和iphone6 plus的一些数据对比：中文字体：方正黑体简体英文字体：Museo Sans界面布局1、布局Layout-页面整体宽度：640px2、顶部导航栏Navigation bar_W640*H88px3、顶部标签栏Tab bar_W640*H88p
