Tag Archives: Milk香港版

milk香港版——瓦尔登湖的语

我们被迫生活得这样周到和认真,崇奉自己的生活,而否定变革的可能。……可是从圆心可以画出多少条半径来,而生活方式就有这样的多。一切变革,都是值得思考的奇迹。
——《瓦尔登湖》

不想这样结束,但真的结束了。
————
很荣幸,在这个移动应用市场的早期,全程handle的产品设计。
很荣幸,在没有marketing资源推动的日子,依然收到的三方媒体社区用心点评:
Softonic
MILK香港版电子刊物 http://milk-hk-ios.softonic.cn/iphone
Tech2IPO
HT实验室:做“走出去”的设计之Milk评测 http://tech2ipo.com/44460/
特别想记下milk当家总监kabo长期给予的耐心与支持。对于一款阅读产品,产品设计与品牌内容资源同样重要。
————
There is no time。还是要几个产品碎片留下⋯⋯
无间
很想让使用它的人也知道,我们传达信息间的连贯与流畅。这种意愿的传递,不再只停留在静态。
在内容视图里,标题与内容将通过带有金属气息的线条分割,箭头标示了两者的层级关系。
切换视图的状态,银色箭头跟随标题长度居中的运动场景与开合方向,指引信息间的关联。
不孤独。
冰山
呼吸的节奏
回归平静,在睡前,在感受呼吸的背影间。
一直在你身边
献给这个产品过程、产品开发团队与milk同事。
尤存。

「milk香港版」交互设计漫谈(2)——社会化分享

为什么分享的图形是“心”?不应该是三点网络还是别的什么??
因为,人在用心分享!用心。

晚上忽然些许感触。一年前的晚上舜日对那个分享定义,略显激动地解释。
不想在这儿考究用户体验抑或是通用习惯,感觉苍白。
只是说,我们有一种态度,让产品设计与生活走得更近。

在这篇文章发布的几天里,milk香港版iPhone迭代了一个版本,再次被推送在官方新品推荐以及热门推荐。
几周前,milk香港版Android首次面世,新品热门推荐。
零推广。

1.2版本的迭代开发,主要功能是社会化分享。

分享的意义
社会化分享,是指在社会化媒体中,基于其分享功能,将信息网络化输入输出,加速组织传播。博客、微博客、WIKI、博客、社交网络、内容社区等,是可以常见到的社会化媒体形式。在国内近两年,社会化分享的传播量又以QQ空间、新浪微博、腾讯微博势头最猛。
社会化媒体最大的特点是赋予了每个人创造并传播内容的能力。
Twitter平等的信息网络,使得每一个独立个体变得真实。
虽然国内的类twitter产品有变质,人与人多了一层等级关系,信息传播也不再充分流畅。但人们依旧乐于低成本的表达自己,传播感兴趣的内容。
最后在这个项目里,我们确定将新浪微博、腾讯微博做为第一批分享通道。
定位与设计探索
milk香港版的前后两个功能版本迭代间隔两个月。
保持良好的迭代节奏、并达成对用户有参与感的互动体验提升,是分享功能的两个产品考量因素。
设计定位
1. 迭代版本的分享功能,需要在视觉交互中引起用户注意。
2. 分享功能的显示与操作方式,沿用已有的设计,减少用户认知成本。
3. 操作流程简化、流畅,层级关系易理解。
功能ux流程探索
简述:入口->(过渡)->分享UI->(过渡)->完成
在当前的UI框架中,我们有三个区域,放置功能入口。分别是:
(点击放大)
头部条,Getit弹出区域,底部条。
头部条
——优点:规范标准设计
——缺点:游离在milk设计之外 不具有一致的美感
Getit弹出区域
——优点:易引起关注
——缺点:增加手势误操作的可能性
底部条
——优点:规范标准设计 易引起关注
——缺点:占用过多空间 增加手势误操作的可能性
权衡的设计,选择Getit弹出区域的非标准设计,统一在已有的信息框架。
这符合用户对第一个版本的认知——弹出区域是被推荐的互动内容。
(点击放大)
如上图,这是一个最终设计的mockups截图罗列。
接下来的分享通道,将提供2个入口,以及允许回退操作的取消按钮。
验证登录,将提供一个webview供用户填写登录。登录失败将停留在这个页面,允许继续尝试,或回退。
登录成功将填写分享信息,详细的分享内容由应用自动填写,包括关联的图像(隐藏)、slogan 、关联的资讯内容,用户可修改。并通过右上角的按钮进行发布。
更多的细节:更换账户的功能集成在该页面,允许用户的快速回退操作。超出140个字符的内容,将红色提示,默认灰色标示。
上传的过程将提供应用状态。并允许因为网络或其它问题的用户回退操作,回退的关闭按钮与提交按钮位置一致,易于理解。
分享成功会提示成功并进入分享前的初始资讯UI,失败将重新回到填写分享信息UI。
通常情况下,用户完成一个分享操作会经历三次操作,分享入口->分享渠道->提交。
视觉设计与交付
将视觉设计与交付合并,是因为沿用了前期版本的设计,不需要探索新的视觉风格,整个过程会十分高效。
保持标识元素的可识别与简约,皮质底纹。
(点击放大)
iPhone资源,基于640×960与320×480分辨率,@2x标识了retina适用的图像。
Android资源,按480×800分辨率导出,以_ad为区分。
(点击放大)
同样针对每个UI的redlines,为开发提供参考。
碎片的设计
默认的API错误alert反馈,只是在debug版本里才会出现。弹框消息提示是个恶心的设计,并且在这个场景里对用户没有帮助。
为什么小按钮没有pressed的状态设计?它们太小巧了,以至于手指按下后,眼睛看不到这个按钮……
应用提交iTunes时的Special设计……更新的应用截图,丰富的颜色与物品。

后记
这是第四篇编号为2的系列文章。。。- -。。。太懒鸟。。太不知道说什么鸟。。。多去看书体验生活咯。。

「milk香港版」交互设计漫谈(1)——Splash screen


当产品相对稳定与可控,小神有愿望快速记录这个项目。
内容涉及小神参与产品设计与执行的过程,由交互/视觉设计层面的需求分析、功能设计与设计执行组成。
与其带入一些工作中的设计技巧,小神更愿意分享其中的设计思想与理念憧憬。
设计之所以不同于美化,是因为前者被赋予了驱动的灵魂。

背景

milk香港版,内部命名”milk mobile”。是香港潮流杂志《milk》在移动新领域的合作尝试。目标设备为主流的中高端便携移动设备,iPhone/iPod touch/Android Phone/WP7…目前iOS版本如期发布,您可以从这里获得最新的版本。其它平台蓄势待发…
在发布后两周中,milk香港版荣得Apple app store的”新品推荐”与”热门推荐”,Lifestyle排位第二。
小神在过去的三个月,从零开始着手milk香港版的设计执行。

设计的生命周期

在展开一项工作时,我们都希望对它在整体上有所控制。
一个相对清晰的timeline使得设计在时间与质量之间平衡,并在恰当的里程碑有所产出,跟随整个项目进展。
milk mobile的设计定义
milk mobile的品牌与内容定位,决定这即是一面向城市快速消费的精神食粮。
它具备几个特质——高时效性、眼球经济、缺乏耐心的。
继而在视觉与操作着力营造如此的氛围:

  • 信息传递的高度流畅。
  • 信息呈现的节奏感。
  • 轻松的操作浏览环境。

探索从Splash screen开始
Splash是用户进入App,直到程序完全可用前,显示的第一个视图。
Splash Screen概念存在的价值

  • 品牌识别(权重30%)
  • 当用户通过桌面icon进入milk香港版,会再此传达具有品牌象征的手写milk英文字符。与milk其它产品形象统一,用户得以加深认同感与归属感。

  • 必要的数据加载与反馈过程(权重70%)
  • 对于milk香港版而言,splash screen的存在更多承载的是功能层面的需求。
    对网络与cache的不同状态产生的scenarios进行处理,并提供良好的反馈。

在iOS Human Interface Guidelines,对Splash的概念有较为详细的阐述,你可以点击这里查看。但并不赞同对Splash Screen的一个定义——Launch Images。
我们所感知到的信息是流动的,图像与其承载的信息也应该在表现上流动,贴近感知。
流动的图像表现上更贴近于animation,iOS从文字示意上误导设计人员并限制了它的可能性。
Launch/Splash是一个无限延展的屏幕空间,不仅是”图像”。
作为跨平台设计,Android对Splash screen的理解,更注重实用性。

If your application has a time-consuming initial setup phase, consider showing a splash screen or rendering the main view as quickly as possible and filling in the information asynchronously. In either case, you should indicate somehow that progress is being made, lest the user perceive that the application is frozen.

Windows Phone 7注重信息传递的效率。绝对效率是应该被真正推崇的,当你不能提供更好的理由使其存在。

Don’t use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with poor performance. Use them only to give feedback and reduce the perception of time for programs that have unusually long load times.
Don’t use animated splash screens. Users often assume that the animated splash screen is the reason for a long load time. Too often, that assumption is correct.

通常,我们尊重平台的design guidelines,它使得你的app与OS融为一体。
milk香港版Splash screen wireframes
基于以上的定义,沉淀设计。文档的细则,受限于NDA将不被分享。但你可以在测试app的过程中,看到不同scenarios下的表现。

  • 当无网络无cache状态。
  • milk香港版不可用,没有数据的App是丑陋的。用户更需要的是一个友好的帮助界面,提供状态反馈与解决方案,在易识别的区域提供异常网络状态与”重试”入口。

  • 当有网络无cache状态。
  • 客户端从服务器端取得少量的必要数据,继而无缝过渡。

  • 当无/有网络有cache状态。
  • 客户端优先读取cache,弱化用户不需要参与的载入状态信息,并无缝过渡。

受益于尺寸变形动画,milk logo的使用场景由Splash自然转化到app页面。于此同时,渐隐Splash背景与隐藏提示信息。由此结束整个Splash screen。
milk香港版Splash screen的视觉设计与交付
Splash的视觉风格统一于app完整的视觉设计。
黑白为色调,赋予皮革材质,以幽暗的顶部光线渗透全部的元素。致力于简洁但不失细节的表现。(视觉设计将单独成文)
使得用户将视觉重心停留在表现丰富的资讯信息。
针对iPhone的屏幕与app的默认展示方式,需要320×480以及为retina屏幕的640×960两种尺寸的设计(单位px)。
Android有着更广的屏幕设计需求,但从实际的开发实践,我们只保持了480×800的设计资源。这被验证为是体积与质量的最佳妥协方案。
接下来的是其中的一则redlines图像,此类的设计资源为团队的开发人员提供参考,使得整体项目运转顺利。

当时间充裕,执行Flash实现的高仿真模型,更高效的推动沟通,并为开发人员提供参考。
Review设计是一个自我提高的过程,并希望对读到该文的同学有所帮助。

milk香港版

由2001年7月開始,《MILK》雜誌一直代表潮流指標。《MILK》誌集設計與時尚於一身,希望給年輕讀者團員最好的選擇。我們盡力為讀者帶來刺激思維的新概念及資訊,希望打破香港以娛樂為主的雜誌風氣。我們的編輯部每星期均竭盡所能搜羅全世界不同領域,不同範疇的最新資訊,同時,文化及設計等也是我們關心的;所以在《MILK》誌內,每位讀者都可以得到各方面均勻與正面資訊。我們明白讀者團員都愛嘗試新事物,2010年,《MILK》誌矢志走向多媒體,除了開設FACEBOOK及新浪微博作為與讀者溝通的橋樑外,更破天荒推出“MILK香港版 HD”、“MILK香港版”,透過不同的社交網絡,滿足大家的需要,希望各位可以從中接收更多嶄新的新意念,從而尋找及建立個人風格。
您可以访问这里milk香港版了解更多,覆盖iPad、iPhone以及Android。
7月18日凌时起,可通过在itunes搜索“milk香港版”,获得下载。
如果您对 milk香港版 有任何的问题,请在这里回复留言。或者邮件至info@i-milk.com。