PS设计教程网欢迎你!

在IPAD平板电脑上进行界面设计(2)

文章来源于 牛壹周,感谢作者 佚名 给我们带来经精彩的文章!
设计教程/设计理论/设计理论2010-08-10
三、细节 神在细节间,魔鬼也是。 团队奉行37教(我们喜欢37signals.com这种精悍的团队),行事原则就是 Geting Real,不过这也让我们在快速迭代中很难做到细节的尽善尽美。 就拿牛一周的图标来说吧。 7月8号的时候,

三、细节

神在细节间,魔鬼也是。

团队奉行37教(我们喜欢37signals.com这种精悍的团队),行事原则就是 Geting Real,不过这也让我们在快速迭代中很难做到细节的尽善尽美。

就拿牛一周的图标来说吧。

7月8号的时候,Shawn说:“妖怪,给我个牛一周的icon吧,我要72X72和256X256两种大小。”

于是我迅速地山寨了一个(好吧,你没猜错,克隆的原型是NBA的芝加哥公牛队LOGO),然后继续其他的设计。

在IPAD平板电脑上进行界面设计

费总说:Ei~看起来怎么这么眼熟呢?

等到7月10号比较空闲的时候,我花了些时间来做icon的精细化设计——在Illustrator下拉渐变网格,并尝试各种造型组合。当大家看到那个魔爪版的时候,Mak说:“牛长的不是蹄子么⋯⋯”小龙替我解释道:“妖总画的其实是大菠萝(Diablo)。”

在IPAD平板电脑上进行界面设计

《牛壹周》icons不同版本尝试

在IPAD平板电脑上进行界面设计

牛壹周icon定妆照

那几天正好在看《独唱团》,用手在封面的牛皮纸和微微泛黄的内文纸上摩挲,感觉很有feel——想到iPad设计指导中所提到的“内容形式上富有真实感”的设计原则,就在封底和内页分别加上了牛皮纸和新闻纸的质感。

在IPAD平板电脑上进行界面设计

Loading页和封底

在IPAD平板电脑上进行界面设计

内文页设计第三版

为了让人有场景代入的真实感,让人觉得这就是一本杂志,我也改进了横屏时的设计——修改前两边多出的部分本来只是个背景平铺;改进后加入了桌面、台布和咖啡杯——就好象在家,用一本杂志,享受一个很惬意的下午。

在IPAD平板电脑上进行界面设计

封面竖屏设计

在IPAD平板电脑上进行界面设计

早期的封面横屏设计,只是简单的旋转缩放然后居中

在IPAD平板电脑上进行界面设计

修改后的设计,增强了场景代入感

如果你在内文页轻轻点击一下,下面会推出一列Preview缩略图。这个部分的设计其实也费了一番思量和讨论,团队内部争论也比较激烈。

最早的想法是拿作者的头像作为索引,一来这样区分度比较明显,二来其实我们最关注的还是人本身。最早的效果,也不过是在下面浮上来一个半透明的层,然后显示人像照片。

在IPAD平板电脑上进行界面设计

第二版的预览模式设计

后来我们觉得对于我们这样的牛博网老用户来说把人和文章对应起来不是问题,但对于一些普通读者来说就是会比较困惑——他要跳转到自己喜欢的文章,先要把人头像翻译成自己对应喜欢的文章或风格,这里面经历了一次逻辑转换,会降低成功率。如果他恰好不认识这位作者,那么失败率更高。而小的缩略图虽然可能看不清标题和内容,但是原样复制了色彩和版式,让人很容易形成视觉上的一一对应。

于是我们改成了整个杂志的界面上推,然后在下面的餐台布上显示预览缩略,为了让你的目光聚焦在这个区域,我们在预览浮出的时候,把上面主体的部分作了暗化——这就象有点物理基础的科幻片,让你感觉真实,但也有点超现实。

在IPAD平板电脑上进行界面设计

改进后的预览设计

如果你再细心一点,会发现不同文章的缩略,厚度是不一样的——有些是单页,有些则叠了一两页——这样的设计是我们想用不同的厚度来提示读者这篇文章的长度——如果你觉得它太长就可以放弃。进入文章后,则会用苹果通用的圆点来表示一共有几页和你当前在第几页。

在IPAD平板电脑上进行界面设计

提示用户不同文章的长度以及现在读到了当前文章的第几页

不管怎么说,简洁是我们设计的第一法则。我们不希望看到任何多余的按钮,也没有教程,希望你一上手通过简单的尝试就知道该怎么做——为了达到这个目标,我们在样本大致出来后也找了身边很多朋友来测试。

在IPAD平板电脑上进行界面设计

它还不够完美,我们正在努力,也期待你的加入

四、定位

最后,我想用FAQ的方式,来谈谈关于《牛壹周》为什么这样设计,以及如何定位。

Q:如果我喜欢那些文章,我可以上牛博网和订阅他们的RSS,为什么你们还要做这样一本电子杂志?

A:首先,它们的阅读体验不同,在iPad上阅读,显然比在电脑上阅读来得更愉快而方便,而且它相当于是一个存档——在纸张时代就已经有很多人喜欢收集全年的旧杂志,网络时代同样有人有此癖好;

其次,这里面是精选的文章,经过了人的过滤,提升了内容质量,同时降低了阅读噪音,降低了你的筛选成本——我们相信编辑,也是有价值的再创造。虽然我们的品味未必你未必完全认同,但其实你如果完全不认同也就天然不是我们的目标用户。

当然,这只是我们的理解。用古灵常说的一句话来作结,那就是:“我说的都是错的。”欢迎提出相反的看法。:)

Q:为什么是期刊而不是南周阅读器或者书的形式?为什么是十篇文章而不是更少或更多?

A:选择做期刊其实是在信息的流动性和质量控制之间作必要的平衡和妥协。Twitter、Blog以及RSS已经解决了信息迅速流动的问题,高质量的、时效性堪比新闻但内在价值比新闻更强的精华信息如何展现和留存?我们认为期刊是不错的选择。

关于为什么是十篇?我承认这受到了爱枣报(www.izaobao.com)的影响。虽然我们身边不乏一觉醒来就要浏览上百个网站,RSS阅读器里躺了一千条未读文章的信息达人,但也有大量的人希望花更少的时间阅读到更有质量的信息,然后迅速离开,干自己该干的其他事情——我们信奉小就是美,少就是多。

Q:《牛壹周》会每周更新么?你们以后会收费么?

A: 会一直出下去,但暂时无法保证每周更新,因为《牛壹周》还只是本实验性的杂志,还没定型,我们还在尝试更好的阅读体验效果,更多的内容格式支持以及更易使用的编辑平台——之所以在设计阶段就开放出来,是因为我们希望和你一起设计,也希望最终你也能轻松地编辑并生成这样的iPad杂志。

牛博网不收费,我们也是。

对于《牛壹周》有任何意见或建议,欢迎在我们的Blog留言,或写信给team+ iPad@mycolorway.com,让我们一起设计,共同来决定它未来的样子。

交流和讨论:http://www.missyuan.com/viewthread.php?tid=472845

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa