BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计 - Since 2011

iOS

iOS7人机界面设计规范 - 目录 »

英文原文出自苹果官方的iOS7设计资源-iOS人机界面设计规范(预发布版本),由C7210自发翻译,并首发于Beforweb.com。如需转载,请注明译者及出处信息。

UI设计基础

设计策略

  • 设计原则
  • 从概念到产品
  • 案例学习:从桌面到iOS

iOS设计技术

  • Passbook
  • Routing
  • 社交媒体
  • iCloud
  • 应用内支付
  • Game Center
  • 多任务
  • 通知中心
  • AirPrint
  • 地理位置服务
  • 预览
  • 声音
  • 语音与可访问性
  • 编辑菜单
  • 撤销与重做
  • 键盘与输入视图

UI元素

  • 栏
  • 内容视图
  • 控制器
  • 临时视图

图标与图片的设计

  • 创建可拉伸的图片
  • 图标与图片的尺寸
  • 应用图标
  • 启动画面
  • 功能图标
  • Newsstand图标
  • 网页剪辑图标

iOS7界面设计规范(1) - UI基础 - 为iOS7而设计 »

今天开个新坑。其实老早就想做这事儿了。记得前一两年,苹果官方还会在开发者中心提供中文的HIG(Human Interface Guideline),后来给没了;网上能够找到的中文版本不知是官方还是同行的自发翻译,总之要看最新的内容还是需要拿来官方的英文文档,估计多数朋友也是这样的。

那么就趁着iOS 7刚刚发布测试版本的时机,开始做这件事吧。之前一周里,到处都在传阅官方发布的新版设计文档,越来越多的人在自己的设备里安装了测试版本,可见大家的关注程度;所以说我爱这一行呢,有点大事小情的大家都能在第一时间反应起来。关于系统本身,毁誉参半吧,东西都摆在那里,建议自己玩玩看;我个人来说,只是觉得视觉风格太娘了;又能怎样呢,反正看看如今的世界,哪里不是漫山遍野的一派娘炮。扯远了。第一篇走起吧;先做着,回头整理出框架,也和《iOS Wow Factor全书自发编译》一样扔到侧边栏去做个固定的栏目好了。

重要:这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核,但并非最终版本,仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的,是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化,届时,你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。

超越按钮 - 谈手势驱动的移动界面设计 »

一周一周的忙成熊样了,以至于周五晚上几乎没有意识到已经周末,以至于今早准时爬起来喂过喵们之后又准备洗漱上路了。btw,儿童节快乐,各位。

进入新公司一个月,做的事情多起来,面对的人多起来,感受也便多了起来;有时需要提醒自己屏蔽一些信号的输入,以便稳定自己的输出;吃一堑长一智,之前两三年经历过的那些让自己在很多时候容易过分敏感,但我想换个角度说那叫做“经验”。

话说又是暗暗的一个周末,对着博客后台,听着Slash在2010年的专辑,琢磨着8月份Metallica过来Live的情况,希望能够像这次一样顺利的买到票。你看,年少时立志此生必看的演出当中,一个已经成行,一个也将要在眼前了;事情就是这么有趣不是么。那么私事就念叨到这里吧,我们来看本周更新喽。

这里进入译文。作为设计师,你也许还记得苹果刚刚发布iPhone时的情景吧,我(英文原文作者)觉得那就像是昨天发生的事情一样。他们将电容触屏技术完整的运用到了这样一个私人化的重要设备当中,这是具有里程碑意义的时刻,同时也改变了整个业界的游戏规则。

若干年之后的今天,连小孩子们都已经习惯了触屏体验,好像这是非常自然的事情,而家长们也会惊叹于他们的孩子可以如此迅速的学会使用触屏设备,包括手机和平板。这也体现出触屏设备及基于手势的交互模式所具有的巨大潜力,它们让移动体验变的更加容易和有趣。

怎样在iOS设计规范的框架下构造灵活的移动体验 »

那,怎样想也都是宅在家里的最后三天了吧。今天下午试着骑车去新公司,四十分钟的样子,一路风风土土,有点闹不住呢,怎样想也还是地铁更加像话吧。

我有个毛病,就是每逢假期或宅期伊始便会告诉自己,“这就开始了哦,很快便会过去的吧,好好享受呢”,然后真的就很快过去了;到最后几天的时候再回想一开始告诉自己的那些话,便觉得凄凉与不舍了。这不有病么?再剧透些,其实现在眼前电视里正在放着日和,接下来发好这篇之后便要喝些啤酒看看X档案。话说我昨天又梦到大灾变了,龙卷风天塌地陷妥妥的。那么,说正经的吧。

这里进入译文。如果你在iOS应用设计方面有过一段时间的工作经验,那么多半会听说过“HIG”,也就是人机界面设计规范(Human Interface Guidelines)的简写。这份苹果官方文档的内容十分广泛,为设计师与开发者提供了一系列打造iOS应用体验的最佳实践。

HIG所关注的是一套普遍适用的设计原则,其中绝大部分内容是关于iOS原生容器和控件的使用方式的,也就是你在iOS自带的邮件、通讯录、日历、Safari浏览器等应用当中所见到的那些界面元素及交互模式;这些已经成为iOS应用体验的一种官方标准。

HIG方面的话题通常可以在设计师群体中引发强烈的反应。其中一部分人会将HIG视为圣经,而另外一些人则认为官方的规范不够灵活,比起其他一些移动平台来说,在体验模式等方面甚至有些过时。市面上的一些应用,譬如Clear,已经大规模的摒弃了iOS的标准控件和传统交互模式,旨在为用户带来更加独特和前沿的体验模式。

提升产品体验愉悦性的十个方法 »

又是一周过去,宅的日子越过越精炼,连续多日每天读一本书,到了晚上就觉得大脑好像变成了一个卡通形象,就是那种仰面朝天躺在地上四肢无力动弹不得只剩下喘气的小人儿的样子。剩下未读的书不多了,又该补货了诶。来看本周的译文呗,有点长,主要是图多。

这里进入译文。我(英文原文作者)时常和其他设计师讨论到产品愉悦性的话题。在最近的一次聊天中,有人提到这样一个有意思的问题:

我们可以首先专注于提升产品的愉悦性,然后再考虑可用性等其他方面的问题吗?

这个问题立刻让我联想到“形式追随功能”这句话,所以我还是倾向于功能与可用性优先的方式。

不过必须承认,这种通过理性分析入手的“传统”设计思路或多或少会让我们失去一些在创意上实现突破的机会。也许我们可以从“有趣”这个角度展开设计工作,首先聚焦于体验的愉悦性,然后再将整个方案“拉”回到一个约束框架中,使它最终成为一个切实可用的产品?

无论我们的实践方式从哪个角度出发,有一点是无疑的:任何一个成功的设计方案都必须以产品功能的可行、可用、可靠为基础。假设你已经有了一款可用的产品,并且希望为其注入更多能够让用户在情感上为之吸引的元素,那么你应该做些什么呢?应该从何处入手?下面是我的十个建议,希望能够帮你有效的提升网站或应用产品的体验愉悦性。

十条设计贴士,帮你塑造更好的iOS应用整体体验 »

2013年的第一篇,也不知道是不是有什么可以庆贺和纪念的。这个假期没少下雪,印象里在1号之后就没见过太阳的样子了;倒是这样夜晚的时候灯光昏黄的吹吹空调听听B.B.King,还真有那么点迷离。

假期中间回去金山海边爸妈家,温度更低,风雪更大,这种季节没什么人还会到海边溜达了,沙滩上原本那些摩天轮和海盗船一类的娱乐设施也都拆除掉了,彻头彻尾的肃杀荒凉。有意思的是在家里翻箱倒柜找到几本1997至2000年间买的杂志,比如Music Heaven啊通俗歌曲啊这些;拍了照片放到微博上,立刻有朋友评论说我完全暴露了年龄,哈。

这次选取了Computer Arts官网当中的一篇小文章。CA,国内叫做“数码艺术”,记得没错的话我是从2006年3月开始购买的,那阵子算是刚刚进入Web这个行当叭,看什么都新鲜,发现这本杂志之后简直就忘乎所以了,无论是内容还是杂志本身的排版设计都让我无法自拔...不过到了09年之后就不怎么买了,感觉它变了...怎么变的我也说不上,总之不再那么爱了。倒是偶尔会在RSS订阅里发现一点可以读读的小文章,所以这次也算是纪念自己曾经对CA的爱叭。十条设计贴士,帮你塑造更好的iOS应用整体体验。

btw,其实这次的图标我不是很喜欢,冷冰冰的赶脚,不过其他几个备选的还没这个顺眼呢。

移动应用的成功准则 - 从产品概念到市场推广 »

几天的风风雨雨似乎在这个周日的上午逐渐褪去了,现在整个书房几乎要被阳光铺满了。如果阳光能发出声音,想必满屋子都会是轻盈精巧的小旋律了。

又是一篇我自己非常受用的文章,长是长了点,拿来把译文做掉,分享给大家。特别是后面关于市场推广的部分,我很喜欢;即使在环境如此恶劣的这片土地上,仍然希望至少能够通过自己的一点努力为大家的生存环境带来一丝正能量。进入正文叭。

多数应用产品会走向失败。残酷的现实甚至让很多不抱希望的设计师和开发者们开始认为,只有运气足够好,才能在App Store当中获得成功。

这种想法就像用来缓解失败痛苦的麻醉剂,其实蛮危险的。痛苦不是坏事,痛苦才有救,才能让人看到问题所在。如果我(英文原文作者)的应用失败了,我会首先在产品身上找原因,而不是毫无意义的埋怨那些我们控制能力以外的因素。大家所处的环境是相同的,为什么不想想看来自tap tap tap或Tapbots的家伙们为什么就能一再获得成功呢?

本文所归纳出的"移动应用成功准则",内容涉及产品概念、设计、开发、市场推广这四个方面。必须承认,在现实当中,我们其实很难完美无暇的将这些准则落实到位,但有一点是肯定的:沿着正确的道路向正确的目标努力前行,你能获得成功的几率将增大很多;我们可以依靠的绝不只有运气。另外,虽然本文当中的相关内容及案例都是以iOS为例的,但其中的道理同样适用于其他平台。

设计师应该了解的iOS应用开发基础知识 »

先祝各位假期愉快喽。不知有多少同学和我一样计划把这8天当中的多数时间花在“宅”上;做做博客和小项目,看看live视频,录点demo出来,太赞了这日子。

话说这里我要长出口气先。今次选做的译文蛮科普的,也真是蛮长的,还好之前几天就开始着手来做,也在微博上做了预告;搞到这两天觉得简直是没有尽头的样子。

我之前几个月花了蛮多时间在iOS应用开发的学习上,到目前为止感觉也仍只是入门而已,所以真心觉得这一篇文章即使再长,也无法让人从零开始学会怎样开发一款应用。但之所以建议和我一样的交互或视觉设计师同学们来阅读,主要目的是让我们自己在头脑里建立开发意识,了解这摊子事情大体是怎么一回事。如果你有兴趣,以此为起点,通过学习逐渐掌握了开发技能,这自然不坏;但更实际的效用,我个人看来还是在平时的工作当中,在打造设计方案的过程中,可以结合具体的开发可行性进行考虑和评估。另外,当程序员同学告诉你哪些不能做的时候,我们自己心里也可以有个底;这事不用说太细,大家都明白。OK废话不多说,进入正文。

作为一名交互或视觉设计师,你希望顺应当前大环境的发展趋势,向移动领域拓展自己的视野和能力,于是决定挽起袖子学习iOS应用开发。兴奋之余,你开始做一些初步的研究,但是很快发现,除非自己有足够丰富的编程经验,否则要实现目标还真不是件易事。

确实是这样。苹果提供的开发文档主要是面向技术人员的,市面上多数iOS开发书籍都会一上来就问你是否掌握了足够的Objective-C知识,而网上各种教程的质量又参差不齐,其中有不少还是面向着很旧版本的iOS系统及开发工具的。

本文的目的就是帮助各位设计师在最短的时间内,以实战的方式探索iOS应用开发工具及相关的基础知识。我们将一同了解应用开发流程中的一些重要环节,包括理论讲解及方法演示,即使你没什么编程经验也没问题。

先了解规则,再寻求创新 - 关于iOS应用界面自定义 »

刚刚在微博中傲娇的赞许了一下iOS 6当中图标形式的Action Sheet。我真心不愿意用九宫格这三个字,好傻。地图用谁家的,能不能用汉语调戏Siri,这类问题我个人来讲不是很关注了,没多大需求;倒是这些交互模式当中的小改变更让我觉得惊喜。

这些改变体现出的设计原则依然是我们耳熟能详的那些:针对移动设备特定的使用情境,减少用户对于文字的阅读量(文字按钮的文案)、减小UI元素的排布密集度(文字按钮纵向排布的方式)、充分利用用户对常规应用图标的辨识和记忆能力(邮件 、信息、微博)等等blahblah...iOS Human Interface Guidelines摆在那里,有多少设计师能真正把它吃透呢?不想代表任何人,至少我觉得自己远远没有达到那样的程度。

Xcode正在更新,不知所谓的“SDKs for OS X 10.8 Moutain Lion and iOS 6”当中是否包含制作新模式Action Sheet的方式,希望可以喽;就算不会去做iOS 6 only的应用,看到这样的变化及相应的原生制作方法一点点出现,也是一件非常开心的事。

蛮巧的这个话题与今次选定要做的小译文契合在了一起,多棒的一天。原文当中的一些铺垫就不做过来了,大意是作者的一些朋友把iPhone应用设计想的太简单,把过多的精力放在了业务、市场一类事情上面,却忽略了设备自身属性所导致的交互模式方面的一些特定问题,致使产品自身在细节设计当中具有硬伤blahblah...我们跳过前戏吧,想必看过日本动作片的同学是可以理解的。那么大家都可以理解喽。进入正文。

将产品在移动应用市场中推向成功的十点建议 »

话说最近忙的倒是有些昏天黑地了。和老朋友合作一个应用项目,“情感”方面的一个东西,做的还蛮来劲的。时不时的精分一下,全身心进入某个角色,体会ta的情绪和心理需求,难以自拔的时候心里还真挺难受的...

在这个流程中,有个环节确实需要一定的把握能力:一方面要尽量充分的进入角色去使用yy出来的产品,完成目标任务;另一方面又要让自己保持在一个观察者的位置上,对角色的每一个动机以及感受上的波动进行考量和评估。慢慢的,我发现自己必须借助辛普森之家以及90版封神榜才能恢复较为正常的心智状态。

写到这里突然阴云密布下起了大雨,我想还是不要扯下去了为好。这次上新的译文代表着我个人最近需要稍微关注一下的方面,当然最好也能为大家带来些阅读和参考的价值;如果不能,也真心希望您别太介意,毕竟我只是在自己的博客和微博里做着自主分享和交流,不是自我感觉良好的在什么大会上给下面百八十号人讲课。江湖老油条我一辈子也做不来,咱各自玩各自的。正文走起。

Pages