设为首页 加入收藏

TOP

非官方的iOS设计指南 (一)
2014-11-23 22:08:04 来源: 作者: 【 】 浏览:13
Tags:非官方 iOS 设计 指南

有时候为iOS设计app并不是一件简单的事,但是如果你能找到正确的最新的苹果设备信息,并按照正确的方向,那么为iOS设计app或许会变得简单容易些。


关于这些指南


这些指南描述了如何遵守苹果的iOS 人机交互指南来设计app,而不是讲用自定义控件可以做成什么样的设计,有时候打破规则也很重要。该文档的目的并不是为一些复杂的设计问题提供解决方案。该文档是非官方的,将会定期更新和扩充内容,最近一次更新是2014年11月11日。


分辨率和显示屏规格(Resolutions和Display Specifications)


QQ截图20141117135444.jpg


Points 和Pixels的区别


Pixels(像素)是数字显示屏上我们可控制的最小物理元素,在一个特定屏幕尺寸中可以有多个像素,PPI(pixels-per-inch)越高,则渲染的内容会越清晰。


Points用以衡量分辨率。根据屏幕的像素密度,一个point可以包含多个像素(比如在常规的retina屏上,1pt包含2 x 2的像素)。


当你针对多个显示屏类型进行设计时,你应该以points进行思考,但以pixels进行设计。这意味着你仍需要以3种不同的分辨率来输出设计资产,不管你针对哪个分辨率设计应用程序。


QQ截图20141117135513.jpg


iPhone 6+缩减像素取样


在iOS上渲染像素和物理像素(physical pixels)是等同的,只有一个例外:iPhone 6 Plus的Retina HD显示屏。由于它屏幕的像素分辨率要低于一个常规的@3x分辨率,所以被渲染内容会自动调整为原始尺寸的87%(从2208*1242像素来适应为1920*1082像素的显示屏分辨率)


55.jpg


iPhone 5S, 6 以及6+显示屏区别的详细信息可参看: The Ultimate Guide To iPhone Resolutions


App Icons


60.jpg


自动应用效果


多尺寸的应用程序icon通常被添加到应用程序包中,当在设备上渲染时,iOS会将效果应用在应用程序icon上。


(1)圆角


圆角半径值已经不存在了。从iOS 7开始,app icon已经使用了超椭圆的形状。由于苹果没有发布该形状的官方模板,所以你得精确地使用 非官方的模板 。


QQ截图20141117140106.jpg


圆角的图形不应该包含在最终的输出资产中,但如果你想要添加和应用程序icon拐角对齐的描边和阴影效果,那你可能还会用到圆角图形。


提醒:因为你想将应用效果和icon拐角对齐,所以如果你正使用超椭圆的形状对icon资产进行蒙版(遮罩),那要确保在遮罩外的区域不能使用任何透明的图形。应用程序icon不支持透明度,相反作为纯黑色进行渲染。如果你的遮罩不是百分百精确,那用户将会在圆角边缘看 到黑色的锯齿。推荐将canvas的背景设置成和app icon一样的背景。


(2)边框描边(某些情况下)


如果你使用的app icon有白色的背景,那么将会应用1pixel的灰色边框,以便更容易地识别icon的边缘。这只能在设置app和App Store中进行。


(3)后续问题(iOS 6 和之前的版本)


在旧的iOS版本中,这些效果会自动应用:可以被禁用的圆角(和iOS 7+中使用的icon不同)、主屏幕上的阴影效果以及关泽效果等。


栅格系统


61.jpg


苹果开发了具有黄金分割比例的栅格系统,可用以正确地调整和对齐icon上的元素。不过,甚至是苹果设计师的原生app icon也没有完全严格地遵守栅格系统。所以如果你的icon上的元素在没有严格遵守栅格系统的情况下能更好地展示,那你可以考虑下打破一些固有的规则。


字体排版


所有的iOS版本中默认字体都是Helvetica Neue。从iOS 7开始,苹果使用了稍作修改的字体,但是在你的设计过程中使用原始的Helvetica Neue是极好的。除了默认字体外,你还可以使用很多可选的字体,你可以在此查看 完整的预置字体列表 。


自定义字体


从技术角度讲,True Type Font (.ttf)可以被用在iOS app中,但要注意许可问题。一般来说,使用完全免费或者商业化的字体是安全的。 MyFonts 最大数量地包含了可用在app中的许可字体。


调色板


ios-color-theme.jpg


iOS 7以后,苹果在操作系统和预装app中使用了更有生机和活力的调色板。虽然你可以使用上边默认的iOS调色板,但你也可以使用自己的颜色(如果你想与众不同,当然要使用了)。


图标


在iOS app中,icon一个很好的用法是使用视觉化的关系来支持文本标签,从而执行一些操作或者完全取代文本(最常用的比如"New"、"Delete"等)。通常,我们使用icon来区分导航栏、工具栏以及标签栏。


各种"栏"的按钮icon


各种"栏"中的按钮icon应该有两种状态:默认状态下的1或者1.5pt笔画宽度的轮廓样式,以及纯色填充的活跃状态。


ios-bar-icons.jpg


不要在按钮icon上添加任何额外的效果,比如下拉阴影或者内阴影,因为这些是iOS 7之前版本中的用法。按钮icon应该在一个透明背景上以一种纯色进行绘制--icon的形状作为遮罩,颜色将会以编程形式应用。


活动视图图标


活动视图(通常指分享弹出视图)中的icon以轮廓样式设计,但苹果在iOS 8以后回归到白色背景上的实体填充icon风格。


ios-activity-icons.jpg


常用设计元素


iOS提供了很多不错的现成的视图和控件,可帮开发者快速构建页面。开发者可以将一些元素自定义到某个级别,但是也有一些元素不能或者不应该进行自定义。当为iOS设计应用程序时,你应该知道一些工具集的使用,只要是可能,就应该坚持下去。但在一些情况下,可能需要设计一些自定义控件,因为你需要一个更加定制化的界面或者想要改变现有控件的功能(有点危险)。几乎任何一件事情都是有可能的,而有时候你需要打破既有的规则,不过需要三思。


状态栏


状态栏包含了基本的系统信息,比如运营商、时间、电池状态以及其他等,它在视觉上通常与导航栏联系在一起,并且使用相同的背景填充。为了匹配你的app的风格,并且易于阅读,状态栏的的内容一般有两种不同的风格:深色(黑色)和浅色(白色)。


62.jpg


你可以隐藏导航栏,但要思考清楚。比如在app下载web内容时,用户可能对设备是否连接上WiFi网络比较感兴趣,在app要求蓝牙连接第三方硬件时,用户可能会想知道应用是否启用了蓝牙。一个令人信服的隐藏状态栏的理由是你想移除对的那个元素的所有干扰信息,比如全屏展示内容,比如图片。


导航栏


导航栏包含在app多个视图间进行导航的控件,以及在当前视图中管理内容的选项。导航栏通常展示在屏幕的顶部,状态栏的底部。默认情况下,背景是半透明的,在导航栏下方还有模糊的内容。导航栏的背景可以是纯色的,渐变的或者是自定义的位图模式。


63.jpg


竖屏模式下的iPhone 6导航栏。


64.jpg


横屏模式下的iPhone 4S导航栏。导航栏的高度减了12pt,除了iPad。这也是常见的横屏模式下隐藏状态栏的方法。


元素应当遵循特定的对齐模式:


1.返回按钮通常居左对齐。


2.当前视图的标题应当居中展示在bar中。


3.Action按钮通常居右对齐。如果可能的话action按钮应当限制在一个主要操作行文,以避免错误点击,并维持其简洁性。


工具栏


工具栏包含用于管理或者操作当前视图中内容的一些操作。在iPhone上,它通常出现在屏幕的底部,但在iPad上也能出现在屏幕的顶部。


和导航栏类似,工具栏的背景填充也能调整,默认情况下工具栏本身是半透明的,在其下方还有模糊的视图内容。


65.jpg


当一个特定视图要求三个以上主要活动,但放在导航栏上又显得凌乱时,你可以使用工具栏。


搜索栏


首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇 联发科入股金士顿,持股6.74% 下一篇 支付宝宣布成立澳大利亚子公司A..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: