App Store 预览视频制作心得

日期:2014 年 9 月 28 日理论 & 教程
公司项目需要,制作了一下 App Store 中的预览视频,因为是新功能,iOS 8 发布之前除了官方文档之外没有什么范例,所以摸索了一下,如今产品已经上线,大波带有视频预览的 app 也出现了,结合官方文档的内容记录一下制作心得。

  1. 视频整体基调是需要「不太像广告」,官方文档要求必须以实际 app 的录屏为主。

  2. 以录屏作为素材,实际上可以做一定的剪辑、调速、转场等。

  3. 比起以前大家习惯的第三方录屏工具如 Reflector 等,现在最方便的录屏工具是 OS X 10.10 的 QuickTime 加 iOS 8,对高清屏、声音等的支持比较好画面也非常流畅。

  4. 在视频的开头、结尾、章节开头的地方加上 logo、产品名以及特性介绍是被允许,但如果有过场动效最好是比较简单的,推荐以淡入淡出和简单的滑动为主。

  5. 在录屏中加上一些介绍的文字遮盖在产品界面上也是可以的。

  6. 可以配乐,也可以加上配音来介绍产品。

  7. 配合 iTunes Connect 后台的上传工具,理论上可以按照 5.5 寸、4.7 寸、4 寸、3.5 寸和 iPad 等不同机型上传不同尺寸的视频以保证视频在各款 iPhone 和 iPad 上都能全屏播放。

  8. 推荐的视频压缩格式是 H.264、10-12Mbps 的比率、30fps,视频最大 500MB,长度在 15 到 30 秒之间,对应的音频格式是 256kbps AAC,44.1kHZ 采样率(但经过实测,这些指标应该只是建议指标,哪怕有点出入 Apple 也是接受的)。另外大家自己上 App Store 也能发现用户实际播放的是已经经过比较厉害压缩的版本。

  9. 后台可以自定义视频播放之前的静态预览帧。

  10. 上传之后在后台可能会显示「App Video Preview Error」,哪怕使用了 OS X 10.10 和番羽土啬工具之后似乎还是有可能没法预览,但应该只是网络的问题,实际上只要上传成功并且保存了应该就 OK。


PS. 官方文档在这里: makeurl('https://developer.apple.com/app-store/app-previews/')
还有这里:makeurl('http://help.apple.com/itunes-connect/developer/#/dev4e413fcb8')
几天前发布的 iPhone 6 Plus 官方标称屏幕是 1920 x 1080 的,但是在 Xcode 中我们发现模拟器的屏幕其实是看似奇怪的 2208 × 1242,为什么呢?翻译一张 PaintCode 官方的一个信息图告诉你原因:

图片载入中...



PS. 这个缩小 17% 的比例是这么来的呢?来看 Stack Overflow 上的回答:iPhone 6 Plus resolution confusion: Xcode or Apple's website?,简单来说就是为了切图的放大倍数、实际渲染像素都是正整数。
08 年分享过路径与图层样式——图标设计小教程,直到现在我基本上还是用路径来做小图标,当然现在屏幕分辨率越来越高,小图标用到场合也越来越少了。挺喜欢鼓捣这种极小尺寸的,因为这个尺度下,我自己美术功底不足的缺陷不那么明显(形和透视这种往往被处理成最简单的状态),而同时我相对比较有耐心喜欢反复调整的优势可以得到发挥。昨天看到知乎上的一个问题:如何绘制边缘清晰又圆润的小尺寸图标?这个尺度下追求各方面都完美的解基本不存在,所以只能按照我自己的一些心得说一说:

1. 不必老老实实画各种基本形状
很多小图标尺寸是 16x16 这种级别的,可以想见,里面的有些基本形状的尺寸完全可能小至 4x4 这样的大小。如果要去雕琢,基本就有些类似像素画了。而像素画里的很多技巧就是用一些规则的、容易实现的、并且看起来更清晰的方法去拟合各种基本形状。方不是方或者圆不是圆,这些都不是事儿,眼睛是很容易欺骗的,最后 1:1 的情况下效果好就 OK 了。比如就跟字体设计里会在很多笔画集中看起来特别重的地方去尝试削细某些笔画,这背后应该是一个道理。

2. 虽然尺寸已经很小了,但有时候可以考虑再小一点
画小图标的时候很多惯性动作就是把整个图标的外框去贴近边框,但有时候可以反过来尝试一下,略微缩小一个或两个像素。这样会有两个好处:有时候一个轴对称或者中心对称的图形在 16x16 尺寸下怎么调整都无法同时满足「像素对齐」和「绝对的对称」,这个时候就可以考虑把他修改成一个 15x16 或者 15x15。另外一点就是把规则图标统一缩小一点处理之后可以保证整套图标里如果有特别不饱满的就可以稍微拉大,使整套的尺寸更统一。

3. 就算我不会画,删我还不会吗?
打开所有的图标绘制教程,都会告诉你在同一个图标不同尺寸下,去掉多余的元素、减少透视并且尽量简化小尺寸的细节。所以遇到画出来效果不理想的元素,大胆尝试把它去掉,实在不行就用其他的代替。

4. 世界上除了处女座,还有其他十一个星座
以前,当做皮肤还需要使用 #FF00FF 作为掩码色来实现非常低端的透明的时候,我会花上好久好久去琢磨怎么保证边缘尽量不生硬,但后来打开了 TSF 的那些已经做到极致的皮肤,我发现其实最好的做法就是直接用 PS 在边缘取个色,定好容错值,直接填上 #FF00FF 就行了,不必多纠结。有些斜边的模糊这本来就是一件见仁见智的事情,没有绝对的对错,比起这些调整,宁愿多花点时间在前期确定好图标的隐喻,让大家看得懂图标是神马,而非让大家来找错是不是小图标里每根斜线或者圆弧都已经在「锯齿最少化」的状态下。

设计师上哪儿找照片素材?

日期:2014 年 5 月 27 日理论 & 教程
源自于知乎上的一个问题:作为一名设计师,你做设计是如何找素材的?我这边就分享一下关于照片素材的吧。以前说到过,前东家这样的跨国企业有自己的图库,按关键词搜之,质和量一般,但还能满足。来了狼厂之后似乎没有很好的 in-house 方式,如华盖之类的大厂牌图库价格又很贵,所以尝试过以个人途径去偏门的地方找图,比较常用的有以下:

  1. Flickr 的搜索选项里勾上 CC 和可商用,然后按关键词查找,偶有让人惊艳的时候

  2. Freeimages - 以前域名是 sxc.hu,上面的图质量都是「卡片机」级别的,但是好处是量大,搜啥都有一大堆,而且全部免费

  3. 最近用的比较多的是 Unsplash,每 10 天更新 10 张 免费的 stock photos,照片总数有限,想要按主题找肯定是没戏,但如果就是提案的时候想要几张美图打底,那随便翻翻还是不错的

  4. 因为以前在 Envato Marketplaces 上卖过图标图标,有一些余额,所以本着不用白不用的原则在其下的 PhotoDune 买过一些图,普遍质量尚可,而且价格便宜

  5. 在需要把手机、Pad 界面放到生活中进行 mockup 的时候很喜欢 Placeit,经过一年多的快速发展,里面已经有相当多场景、机型可供选择,甚至有了动态的背景视频,网站速度慢点无解,不过还真是解决了我等 UI 设计师很多痛点。不得不提他家坑爹的会员功能,曾经帮客户做项目买过一个月会员以下载高清图,但是之后不想继续了还得手动发邮件取消 subscription

  6. 现实一点说,也有不保留节操仅供内部观赏就随便 Google 或者百度图片的时候,搜到泥土去泥土,搜到站哭去站哭


更新:最近这半年,因为 Unsplashjay mantri 这种个人或者小团队更新的免费照片库数量暴增,所以有人做了一个网站 TheStocks.im,如站名所示,把类似网站的内容都聚合到一起了,还加入了一些一键翻页之类的功能方便浏览。

再更新:与上面这个 TheStocks.im 类似,今天新出了一个 Mac 下的聚合 app,展现形式是照片流,看起来更方便一些,名字叫 Zoommy

再再更新:有个外国朋友开发了一个搜索工具「FindA.Photo」,跟上面提到的 TheStocks.im 类似,但可以按照关键词、颜色、分类来搜索。

再再再更新:照片有了,如果要找视频的话可以试试看 Coverr,可以方便做网页背景,视频数量也很多,虽然质量一般但鉴于是免费的,依然值得推荐:makeurl('http://www.coverr.co/')

汉堡图标的起源

日期:2014 年 4 月 2 日理论 & 教程
一直对各种经典图标的起源非常感兴趣,所以曾经也尝试探索过类似为什么设置图标用齿轮或扳手表示这样的问题。除了一些常用的图标出处和来源已经比较确定之外,最近随着移动平台的热潮而火起来的汉堡图标(见下图)的出处之前还没有什么定论。

图片载入中...

快速实现 Poly 效果

日期:2013 年 8 月 28 日理论 & 教程

图片载入中...


发了 Polyricks 壁纸之后很多朋友问这个 Poly 效果是怎么做出来的,这边简单写一下,只需要一张原图和一个 iPad App 就可以了,名字就叫 Poly ( App Store 下载地址,售价 0.99 刀 )

非科班的如何成为 UI 设计师?

日期:2013 年 7 月 1 日理论 & 教程
因为我自己是一个 0 美术基础、非计算机、非艺术类科班出身,但从事视觉设计工作的同学,所以很多大学里学着不喜欢的专业,想要转做设计但又不知从何开始的朋友都来问过我类似「我怎么才能成为一个 UI 设计师?」的问题。尝试在这边统一回答一下吧:

首先请想清楚为什么想转设计,以我的经验,一般在大学里想转设计有这么一些原因:
1. 设计尤其是视觉设计门槛低,以前我身边会两下 PS 的大学生都能早当家,生活费完全不用愁的,而视觉设计给人感觉跟每个人的生活是相关的,可能会让人错误地以为只要审美品位到一定程度的都能做好设计。

2. 设计比较有意思,比如我们当年微电子系的毕业「设计」就是老师安排一个课题,做一堆实验,验证一些数据,做一些数学题目,交一份报告,然后就没有然后了,而学设计的,最不济也是能自己发挥一下弄一套 VI 之类的,这种从无到有创造一些东西出来的工作能给很多人更大的成就感。

3. 设计类的工作比较多,抛开 ID 啊建筑啊这类跨学科比较多、学习成本比较高的学科,很多其他设计门类的工作机会比较多。
Page 3 of 11      « 上一页 下一页 »
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash