存档

2011年8月 的存档

小米的“紧日子”(下)

2011年8月26日 没有评论

DSC_2358

CM ,MIUI ,小米手机之间的那些事儿

CyanogenMod (简称 CM)是最大最专业的 Android ROM 定制社区,而且 CM 的代码对 MIUI 的发展至关重要。对于 CM,MIUI 和小米手机之间的关系,是值得探寻的一个重点。

负责 MIUI 的工程师 Peter 为我做了一个比较精准的描述:“MIUI 品牌下有多个版本分支,可以分为适配版和非适配版。其中适配版是为了让 MIUI 跑在更多手机上,采用了 CM 的底层驱动,而且不同手机的驱动差异相当大,这是体现 CM 价值的地方。另外的非适配版,是针对小米手机硬件而定制的,底层驱动由我们的 BSP 小组编写,跟 CM 没有关系。换句话说,CM 在 Nexus One 等手机上做了我们 BSP 团队应该做的事情。对于上层 UI 和应用,比如说照相机程序,就跟  CM 完全不同了,我们主要的精力集中在这个部分。”

“如果没有 CM ,那还会存在 MIUI 吗?”

“如果没有 CM,只会让适配机型大大缩小,假设未来某款流行的街机没有出现在 CM 的支持列表里,那么它就无法刷 MIUI。但 CM 不是 MIUI  存在的必要前提,比如说 HD2 这款机器的驱动,就可以在 XDA 社区上找到。 ”

“MIUI 对 CM 社区会有贡献吗?”

“当然,CM 社区里 FM 收音机的部分代码就是 MIUI 贡献的。”

“小米手机使用的 MIUI 跟适配版的 MIUI 有什么区别?”

“小米手机在硬件上有些差异,比如说呼吸灯,这在好多机型上都没有。我们为了兼顾省电和漂亮做了不少优化,让它的呼吸方式跟 Macbook 和诺基亚都不太一样。还有米键,是一颗自定义功能的按键,它也需要独特的驱动。”

“荣组儿”

DSC_2339

这次探访有个很深刻的感受:小米是一家轻公司,但它在众包测试上的努力,可以让轻公司完成繁重的开发和测试任务。

最典型的是 MIUI 团队,其中开发人员二十多人,设计师七八人,但荣誉开发组有近百人,他们被称为“荣组儿”——遍布在全国各地,按时在论坛里签到上工,有不同的分工和任务。不得无故请假怠工,用 BUG 数进行考核。

“荣组儿”的资料被贴在小米办公室的墙上,便于随时查阅和联系。这也是为什么小米要把“发烧友”定位成最核心的目标用户,他们的热情和主动性能够提高工程师的效率,让 BUG 尽快收敛。这对于一个初创项目来说,弥足珍贵。

雷军的作用

雷军究竟在小米里起了怎样的作用?这个问题我问了副总,问了产品经理,问了工程师,还问了公关经理,尽量从不同的角度来探寻答案。

DSC_2355

首先,他对手机的功能和交互有直接的影响力。他会给产品经理列出长长的需求清单,然后询问:“做不做?怎么做?什么时候做?”也会在电梯里掏出手机对开发人员说:“这里要改进一下,那里要改进一下。”

其中一个例子是 MIUI 默认的下滑解锁界面,雷军觉得下滑条的位置太靠下,操作不太方便。于是让开发人员把触摸响应区往上提了十几个像素。还有一个例子是静音的状态图标,在早期出现了喇叭和铃铛两种图标,在雷军的影响下统一成了铃铛图标。

其次,他善于利用自己的形象做营销和客服。在米聊发布初期,雷军利用自己的影响力拉来了一批圈内用户,并一直在米聊上回复产品的疑问。两个月前我曾经问他:“外国用户的手机号码注册米聊失败,怎么办?”雷军便说海外版一定解决这个问题。

在渠道方面,乐淘和凡客给予了很大的支持,如果没有雷军出面整合,恐怕小米手机就只能走传统 3C 卖场渠道,增加销售成本。

说到小米内测的线上销售系统,就能解开上篇中可乐的秘密了。“电子商务部门”为了测试官网的销售系统,而在公司内部卖起了饮料。最开始把可乐定价每瓶一毛八,遭到疯狂抢购,现在只好玩起了“限购”——每人只能买两瓶。

一边打电话一边刷机?

DSC_2362

“无锁双系统”是发布会上的亮点,我在小米也得到了更详细的信息。副总黎万强把它称为:“完全没有痛苦的刷机过程,甚至可以一边打电话一边刷机。”

在启动小米手机时,就跟启动 PC 一样,通过按钮选择“系统一”或“系统二”。如果进入了系统一,又想对系统二进行升级,只要设置菜单中点击系统二的 OTA 升级便可,整个过程完全不影响系统一的工作(上网,发短信,打电话照样进行)。如果升级系统二时出现了失败,也不会影响到系统一的正常运行。

整个过程可以不用连接 USB 线,不进入 Recovery 模式,不 Wipe 任何数据。让没有刷机经验的用户,通过图形化的界面就轻松刷机。

系统一和系统二的搭配可以是:MIUI + 原生 Android,或者 MIUI + MIUI,或者原生 Android + 原生 Android。

“外界所说的一键切换,实际上有些夸大了。从系统一跳到系统二,当然要经过手机重启。”

DSC_2325

我上面拍摄的这台开发机,被称为“P2”,应该是内部第二批实验机,还没有搭载石墨散热膜。正面屏幕的触感跟摩托罗拉 Milestone 差不多,但缺乏 Nexus S 表面那种“滑”的感觉。后壳的质感很充分,比 Nexus S 的塑料材质好太多。为此他们还专门拍摄了一段《小米手机汽车压测试》。

当我问到 8 月底那批工程预售机是哪个版本时,只得到了模糊的回答:“大概是 P2 之后的两个版本吧。”

最后的话

当我走出卷石大厦时,发现飘起了小雨。阴沉的天空如同网上绵延不绝的口水战,笼罩了这家年轻的公司。现在谁也无法断言小米手机是否大卖,从研发到销售,不可控的因素实在太多。但是我始终相信消费者会用人民币投票——东西好自然大卖,东西不好自然就偃旗息鼓。

不论结局怎样,希望大家在半年之后能够回顾这篇文章,回顾手机背后的团队和趣事,并在评论中告诉我你的感受。

给子弹飞一会儿的时间。

分类: 9其他 标签:

Chrome为何能撬动IE:创新颠覆产品

2011年8月25日 没有评论

月初,加拿大的网站工程师Tarandeep Gill搞了一个小恶作剧。他杜撰了一份报告,称在对10万名浏览器用户进行测试后发现,使用IE浏览器的 用户大部分智商在70到80,仅有一小部分接近90;使用火狐浏览器和谷歌浏览器的人智商均在110左右;使用Opera和Camino浏览器的人智商更 高,达到了120。很多人都信了,包括BBC、CNN、《每日邮报》和《福布斯》在内的多家媒体都对此进行了报道。

作为一个Chrome用户,我本来以为自己的智商是中等,结果发现这还不一定。

加拿大人最终出来自首。道歉之外,他称自己的真实意图是让人们意识到IE是不兼容于网络标准的浏览器,并希望IE6.0至IE8.0的用户能换成其他的浏览器,因为这些版本的浏览器确实已经过时了。

IE不好用已经不是新闻,但自从IE通过捆绑Windows和免费的策略击败网景浏览器之后,其老大地位就一直难以被撼动。Firefox(火狐)用了十多年,最多的时候也只有30%多的市场份额。

但Google在2008年9月发布的Chrome看起来是那种真正的IE杀手。Statcounter的数据称,Chrome7月份的全球市场份额是22.14%,而就在2009年的6月它的市场份额仅是2.8%,在此期间,IE浏览器的市场份额从原来的59%下降至42.45%,Firefox的市场份额则从原来的30%降至27.95%。

不过你别想歪了,这不是Google和微软这种超级公司对抗的结果。实际上,Chrome是丹麦第二大城市Aarhus的一个教授Lars Bak带着十几个助手在办公室独立做出来的。这甚至都无法和Firefox的团队规模相提并论,Firefox除了有数百人的开发团队外,其40%的工作是由义工完成的。那么Lars Bak的团队到底为什么这么神奇呢?

热爱。很多人其实都需要问询自己,我真的热爱现在的工作么?Lars Bak是真的热爱开发Chrome浏览器这份工作。但这种热爱不是工作狂,不是为了升职。Lars Bak称不在乎当什么高级经理,在乎的是推动技术边界。这个我是信了。

速度。Chrome的招牌是速度快。Firefox之前也靠速度快吸引用户,但似乎没到那个临界值。为了提高速度,Lars Bak甚至开发了全新的V8 JavaScript引擎,这可以加速那些大量采用 JavaScript 的Web程序。在最初的测试中,V8处理JavaScript的速度比最常见的IE浏览器要快50多倍。

细节。在浏览器这样成熟的产品中,Chrome依然做出了很多不错的细节创新。比如,用户只要在地址栏中键入网址,无需按下Enter 键,网页就会自动载入;用户要搜索某个复制的信息时,只需要在地址栏中单击右键,选择粘贴并搜索即可,同样不需要按下Enter ?键。

远景。同样是浏览器,Lars Bak看到了更不一样的视界。他认为浏览器已经无法处理日益复杂的网络应用,就好比是很多高性能的跑车跑在颠簸不平的路上一样。所以Chrome被设计成一款面向云计算的产品,除了可以同步收藏夹这种简单云功能外,Chrome还可以很好地运行各种基于浏览器的云软件,现在Chrome Web Store中已经有了数万个基于Chrome的应用软件。

哇,原来浏览器可以这样。当Chrome没有出现之前,即使Firefox这种以挑战者姿态出现的竞争者,看起来也把IE看成了一款接近成熟的产品,所以各种竞争者几乎都在按照IE的路数在做。比如改进细节,争取形成自己的生态系统,获取第三方厂商支持等。

实际上,在现实商业中有太多我们认为已经“成熟”的产品和服务,很多人和公司都已经失去了挑战的勇气和想法。但如果你有更长远的、更不一样的眼光,你会发现那些已经“成熟”的产品是如此脆弱,如此不堪一击。当乔布斯开始做iPhone的时候,也许他眼中的那些“成熟”的手机都是杯具吧??

无论是产品还是服务,永远没有终极完美形式。定位跟随者,最后得到的可能只是从市场中分一杯羹,而定位颠覆者,创新产品和服务,最终会创新消费、创新市场。颠覆者就是这样,商业就是这样。

分类: 9其他 标签:

雷军与黄章:两个极客的恩怨局

2011年8月25日 没有评论

在中国,被冠以“中国乔布斯”称号的,不止雷军一个人,更早的还有魅族老板黄章。
黄章与雷军,一个是高一未完就被学校开除的差生,一个是仅用两年就修完大学全部课程的高材生;一个避开公众视界。

从不接受媒体采访,一个职业背景极 其光鲜,频频高调亮相;一个极其木讷,个性凛冽,对意见不合者,动辄斥以“滚”、“请绕道”、“请离开”;一个极其活泛,喜交朋友,意见同与不同,都笑对 公众,应对得体;一个倔强草根,自下而上;一个韧性精英,自上而下——截然不同的两种人,却都因为对手机的狂热,他们的命运一度交叉,并在此间恩怨相继, 混沌成局。

2011年8月19日,黄章以他惯用的网络ID“J.Wong”在魅族互动社区上回复某网友主题:“我并不怕他,只是恶心他。曾经以天使投资人身份 利用高新区领导关系接触我套取魅族的商业秘密。从整体理念到手机如何做为何这样做,开发流程到供应商选择,生产和销售,公司状况和计划到核心人员介绍和接 触及财务报表…在他一次次的诚意和领导好心敦促下我完全被进了圈套。所以请不要在此谈论他们,还我清静。拜托”

图为魅族M9手机与小米手机。

此言一出,四座皆惊。虽未指名道姓,但在小米手机发布会三天之后,明眼人一看即知直指雷军。不止于此,8月22日,“J.Wong”在回复网友关于 魅族M9最新升级固件能否装米聊时(小米出品的手机端通讯工具),更称小米公司为“这是家没有底线的公司”,“只要一安装手机的通讯录就全部到他们服务器 上。为了防止公司通讯录泄密,所以新固件拒绝安装这个软件”。

以上言论经微博传播等新媒体工具迅速传播,加上好事者不断翻炒出黄、雷旧事,问号不断叩向雷军,而截至目前,雷军仍不作正面回应。有网友还发现,雷 军新浪微博里,一年之前盛赞魅族手机的两条微博,已令人费解地悄然删去。一时间,阴谋阳谋,伦理道德,商战暗算,已混沌自成一局。

“大明湖畔的黄章”

微博上流传着网友的一句无厘头式调侃,如今成为诠释黄章和雷军两人过往关系的最佳描述:“雷总还记得当年大明湖畔的黄章吗?”

与黄、雷两人如今恶化的局面相反的是,还仅仅在一年前,尽管个性、出身有着诸多的不同,但因着对手机同样的极客热情,黄、雷两人曾惺惺相惜,交往甚密。

上海广电电子科技有限公司总经理屠一新在微博上如此回忆:“那天在黄章办公室,听他比划讲M8的输入法应该是怎么样的,雷军来了,跟黄章要了不少 M8的电池。当时感觉他们两个很谈得来,都是拼命三郎,都琢磨用户体验,有惺惺相惜的感觉,应该是乔布斯和google创始人早期的关系的样子。结果魅族 和小米,苹果和谷歌,各自成了对手。形势不饶人啊!”

2010年前后应该是黄、雷关系最好的时期。此后的2010年下半年,不知具体何时,黄、雷开始交恶。业内人士分析,可能与小米公司发布的MIUI手机操作系统有关。(图为雷军在使用魅族M9手机 图片来源:新浪微博)

有接近黄章的业内人士回忆,雷军和黄章的第一次见面应该是在2008年。此前的2007年末,雷军从金山卸任,也卸下了压在肩上16年的负担。这位 不讳言从18岁起就梦想像乔布斯一样办一家世界一流企业的中年人,重新拾起梦想,把眼光放到了手机制造上。其时的黄章创办的魅族公司,虽然还未脱离山寨形 象,但已经开始呈现出类苹果公司般的极客气质,足够引起雷军的关注。会面之后,雷军对魅族公司大为赞赏,在很多场合都强调魅族是个好公司。接下来很多投资 人慕名而来,试图接洽魅族公司,但据说都被黄章否掉了。少数人通过雷军介绍,见到了黄章,但合作都没有谈成。

2010年前后应该是黄、雷关系最好的时期。这期间雷军甚至撮合了UCWeb的俞永福去和黄章会面。会面的主题,传言有几种,最好的期望是双方入股 或投资,最差是实现软硬件交换合作,即UC浏览器内置入魅族手机。从目前结果来看,这些事项应该都没有谈成。但这不妨碍黄、雷的关系达到空前的友好。

在雷军神秘删掉相关微博之前,网友保存下来的微博截图显示,雷军在2010年7月21日发布微博:“【为什么爱魅族】我一直觉得煤油非常强大,怎么 玩新浪微博的人怎么少?我这条微博,只有200多个煤油转发?为什么爱魅族,因为魅族是国内少有的用心做事情的公司。再次请所有煤油转发:期待M9,JW 加油!”

黄章则在魅族互动社区回应网友称:“我和雷军是好朋友,并且我也认为如果他投资的话给魅族带来的不仅仅是资金,但在我还看不到更远的未来之前接受任何投资或上市都是浪费投资人的钱……”

事隔两周,8月4日,雷军再次发布微博:“【魅族】我和魅友一样在等待M9,因为魅族是一家用心做产品的公司,我非常喜欢,希望M9快点,希望JW 加油!另外,Andriod手机竞争实在太激烈,这是全球大比拼。如果M9出来太晚,压力还是蛮大的。附图是我的同事拍的我用M8的照片。”

而魅族互动社区有网友向黄章提出示警:“说什么你和L是朋友,其实你们完全不是一路人!L玩儿的是赤裸裸的金钱滚雪球游戏,你走的却是面对国外强大手机品牌或明或暗的猛烈围攻、看不到十年未来利润不知几许的手机制造业,所以当L那次向你伸出貌似“橄榄枝……”

此时的黄章仍对雷军深信不疑:“朋友不是同志,无需一样的志向和价值观。再说朋友归朋友商业归商业未必要联系在一起。至今没有接受过投资是担心自己 不能承担起投资人的期望”,并且补充“雷总已经很有钱了,据我所知赚钱不是他唯一的目的,投资也是他一种商业智慧和自我价值的体现。”

此后的2010年下半年,不知具体何时,黄、雷开始交恶。业内人士分析,可能与小米公司发布的MIUI手机操作系统有关。

图为黄章在魅族互动社区发言。

有据可查的是2010年12月14日,黄章在魅族互动社区发言称:“MIUI是雷军投资的公司,包括那个迷人浏览器,貌似吸收了很多UC的精华。我 得知这些后有些后悔之前毫无保留地和雷军交流我们公司的一切,就连M9UI交互文档都有发给他请他一起探讨。我觉得MIUI伪装成民间团队很过分,请不要 在论坛发MIUI的话题。”

对此,雷军没有回应。在其微博中对魅族也未再提及。

黄章其人

介绍雷军,无须费太多笔墨,这个时常活跃于公众视界的光鲜企业家,早已为人所熟知。而介绍起黄章来,显得要费一番功夫。他和同样偏安于南方的顺丰快递老板王卫一样,在媒体圈里被称为无法采访到的两个隐形人物。

从零星的正式报道中拼凑出来的黄章形象,大概如下:原名黄秀章;身材瘦弱、容貌平凡;70年代初出生于粤北梅县农村,高一未完就被学校开除;16岁 那年不读书背个包身上一百元不到就闯深圳;离开学校后从来不看书;有人推测黄秀章之所以改名为黄章,可能是出于简单好写的考虑。

雷总还记得当年大明湖畔的黄章吗?

当黄章还是黄秀章时,其野蛮生长的路径和经历与无数个中国农村打工少年没有什么区别。区别在于,黄章自小对技术有一种迷恋。据黄自述,少年时口袋里有十块钱就敢花七块钱去买个无线电设备。一次,他甚至拆了村里的第一台电视机。疯魔般的执着使他脱颖而出,成为其中的佼佼者。

黄章第一桶金是如何积累起来的不详。有一个时期是做厨师,曾狂热地研究过如何做出最好的粤菜。最终,不知因何缘由,黄章放弃了做厨师,进入了电子行业。自此如鱼得水。

2002年,黄章出任新加坡合资企业爱琴公司总经理。领导这家企业从已日薄西山的VCD行业转型为音响、功放、MP3企业。在他的主持之 下,2002年的爱琴MP3产品有了当时闻所未闻的功能——20小时超长播放、128MB内存、免驱动连接电脑等等,让爱琴的MP3产品名声大振。但他过 于对技术的疯魔注定让他和新加坡股东的经营理念发生冲突。这之后,黄离开了爱琴公司。

2002年底,黄章投入10万元现金,开始了魅族的起步。技术专注产生的成果有了自己的拥趸,市场越做越大。

2003年6月,魅族的第一款MP3随身听产品上市。与此同时,魅族的网站和论坛开通。这个曾经的乡村少年大约已经迈过了而立之年,他在论坛注册了一个英文名,从此摇身一变,以“J.Wong”的英文名更广为人知。

J.Wong勤恳地通过论坛与用户互动,并由此确立了魅族的售后服务风格——哪怕产品已经停产,黄章还是会在论坛上回答有关的问题,研发部也依然会推出停产机型的新软件版本。就这样,不靠广告,魅族的口碑,却日积月累,一个用户一个用户地逐渐积累起来。

从另一种角度看,其实J.Wong并不神秘,他几乎每天都在论坛上接受“采访”,只对用户,不对媒体。在魅族互动社区,我们从汪洋信息中,还可以拼 凑出黄章迥异于之前另一幅形象。在这里,黄章不是黄章,而是J.Wong:他痴迷于技术,重视客户体验;时常出没在深夜,对用户的问题相应很快;性格直 率,强硬粗暴,对意见者动辄斥以“滚”、“请绕道”、“请离开”,甚至骂脏话;外界看起来极端的自我和封闭,在他看来十分自得;对于夸赞、崇拜他的话语, 他十分消受并选择性地回复;产品不断跳票(M8发布晚了一年,M9发布晚一年半),他总能自圆其说,并令之成为粉丝更忠实拥护魅族的理由。比如说,新产品 跳票是因为精益求精,发现问题,开的模废掉也在所不惜,打回去重新做,为此亏损几千万。论坛里大都是疯狂支持他的粉丝,反射出来的热情不亚于苹果粉丝对乔 布斯的宗教式狂热。

不过,即使是洋名也让J.Wong跳不出一个怪圈——和很多中国本土起来的富豪一样,他的企业安排了众多的七大舅八大姨,他们掌控了这家企业从营销 到财务的方方面面,本质上是一个家族企业。在这里,他是拥有绝对权威的,不能容忍任何挑衅的皇帝。现在,我们就不难理解J.Wong和雷军交恶之后的言行 了。

在和雷军没有沟通化解之前,他固执且狂躁,在魅族论坛封杀一切关于小米手机的言论,“不愿者请离开,勿在此烦扰”。

在尔虞我诈的商业社会,朋友也许本身就是一个传说!

 

分类: 9其他 标签:

最令人蛋疼的10种用户体验设计师

2011年8月23日 没有评论

和设计师打过交道的人一定也见到过少数极品,不是扎着小辫子留着小胡子,就是剃了光头抽根烟,通常说起来一套一套的人作品都很一般般,而作品一般般的人,又不和你多说,总之令人蛋疼。

1、“用户肯定……用户绝对……”

设计师:“这个页面用蓝色用户绝对喜欢……这个字体用雅黑用户绝对可以看清的……这按钮这样做绝对有用户点的!”倔驴一样的设计师通常是最难沟通的,往往从自己很窄的角度去看问题。

2、“XX网站设计是最全的”

只看一类网站,并且抗拒一切。你给他参考一些同类型的网站,他马上翻出一堆国外的网站。你告诉他我们做的是服装,请看看凡客是怎么做的,他马上顶你一句:“凡客的设计师吃屎的,做那么滥也能叫设计……?”

最令人蛋疼的10种用户体验设计师 - 董释德 - 董释德-非著名IT评论员

3、看别人的设计都不顺眼

“有什么好看的,别人都是抄XX的。”在同一个团队内,设计师更不会互相认同,看到别人的方案胜出,会蛋疼的来一句:“这小子今天运气好,被富婆看上了。”

4、“嗯……嗯……”

“不同意你但又不告诉你,该怎么做还是怎么做。”这种最蛋疼的在于你找来N多参考资料,N多修改意见,最后设计师看也不看,听也不听。拖到最后交稿也,只能逼的你使用他的方案。

5、“我是美院毕业的,老师说这个应该是这样做的。”

时时刻刻强调科班出身,言下之意,就是告诉你,设计上的事你不要插嘴,他是专专家。方案如果被客户打回了,还会蛋疼的来一句:“这鸟客户没口味,农民!”

6、“我的电脑上看是正常的!”

你跟他说页面为白花花的没线条,他立即拿一台苹果笔记本跑过来跟你说:“我的电脑上灰线全有的,你看多清晰!”可用苹果的用户有多少呢?他会蛋疼的告诉你:“大部分的用户都是用苹果的,你们看不了我也没办法”

7、“这世界太黑暗了,没一个好人。”

“客户是混蛋,老板是混蛋,旁边的人是混蛋,自己是正义的化身。他们全都在欺负我,我要炸了这楼,我了灭了你全家”遇到这样的设计师基本上不能深交,否则有杀身之祸。

8、“做错了那是因为XXX原因”

为什么不使用VI色?“那是因为我觉的VI手册的颜色不好看!”为什么头发没扣干净?“素材拿来就是这样的呀!”为什么没做出血?“我原先的公司都是印刷厂做的呀~~”

9、“就这一个方案你爱用不用”

有第二个方案可选择吗?“我看过了,我觉的我这个方案用户一定会喜欢。”我们希望有两个方案做个比较。“不用比较,我这个方案是最好的方案,没比这个再好的了。”

10、“大公司的成功都是因为设计做的好。”

你这个方案太花了,字小的都看不到,能不能突出这几个字? “你看看,所有的国际品牌都是设计做的好才成功的,不是靠这些字的。”你看苹果的广告多简洁,打一行字就是一幅广告。“苹果那种打打字的广告又不是设计师做的……”彻底无语

设计师其实和其它专业一样,都想直接面对用户,都想有成就感,但如果你真的碰到极品设计师,也不要急,可以关注我的微博,下回我再分享一下如何破解10大蛋疼的设计师。

分类: 7职业创业 标签:

不纠结不是好设计师——标签栏的设计

2011年8月23日 没有评论

交互设计师的纠结有时候挺惹人讨厌的,大量的口水浪费在小的细节上了,有时候我也会告诫自己,要着眼大局分清主次,一些小的细节干脆就不要太纠结了,可是我又相信,好的交互设计师一定要对细节有一针见血的判断力,不疯魔不成活,不纠结出不来好设计。

一、一个案例的反思

这里想聊聊腾讯微博iPhone新版的一个设计细节。

事件起源于我们的一个设计师提供了一个新版的视觉设计方案,整体很大气,可是有一个地方别扭,他把选中的标签栏暗掉了,未选中的标签栏高亮了,我说是不是反了?他说没反啊,腾讯微博就是这样的。于是我去看了新版腾讯微博,竟然真是这样。

屏幕快照 2011 08 20 下午04.50.31 不纠结不是好设计师——标签栏的设计

图1 腾讯微博的标签栏

 

那么,让我们从以下三个角度看看,这样做到底对不对:

1.HIG怎么说?

那么让我们来对比一样IOS系统的标签栏的样式:

ui selecteditemmodeswitcher 不纠结不是好设计师——标签栏的设计

图2 系统的标签栏样式

iOS Human Interface Guidline里有对于Tab Bar的行为有这样一句话的描述“When users select a tab, such as Search in YouTube, the tab’s background lightens and its image is highlighted”,选中的标签栏背景亮起,图标高亮。

2.其他应用怎么做的?

既然是微博,对比一下其他微博客户端,有哪个是选中状态的标签暗掉的?

twitter tab bar 不纠结不是好设计师——标签栏的设计

图3 其他微博类客户端

 

再对比一下其他的优秀客户端的设计,有哪个选中的标签是暗掉的?

tab bar1 不纠结不是好设计师——标签栏的设计

图4 其他优秀客户端

 

再对比一下Web端的标签模式,有哪个是选中的标签暗掉的?

web tab bar 不纠结不是好设计师——标签栏的设计

图5 Web版的一些标签设计

3.用户怎么理解的?

于是我到腾讯微博上反馈了意见,看到了有些人跟我一样纠结了,包括麦田老师,但也有些人还是觉得这里可以接受的,原因不外乎以下几种:

  • “这里用补色来标注选中状态,表示不可点,其他的是可点的,所以高亮”
  • “等你选的当然高亮,不需要再选的当然暗啦”
  • “明暗比例1:4,应该能分辨出来哪个是选中的,只要不是1:1就行,用户能理解就行”
  • “谁规定的?用户能理解就行呗”
请注意,这里的明暗关系,不应该是用来区别可点、不可点的,而是应该用来区别是否处于活动状态的,可以参考Web版Module Tabs的说明:
anatomy 不纠结不是好设计师——标签栏的设计
  • The active pane is the pane that is currently being shown; it is paired with the active tab control. The pane that is displayed immediately when the web page first loads is the default active pane.
  • Inactive panes (not shown in the illustration) are the panes that are currently not being shown. An inactive pane becomes the active pane when its tab control is clicked
选中的标签栏,应该是处于活动状态的,整个页面的内容,也跟这个标签栏是从属关系。默认加载的,也是那个唯一的活动状态的标签页,当你点击其他标签页时,其他标签页才会被加载出来。你明暗颠倒了,会让人以为这个标签页处于非活动状态呢。
另外,这个标签页不是不可点的状态,当有新消息的时候,这个标签上会有气泡提醒的,这时候双击标签就可以刷新内容,加载新数据了。
屏幕快照 2011 08 20 下午05.47.23 不纠结不是好设计师——标签栏的设计
图 6 双击有气泡的标签可以加载新内容

最后,说明暗比例1:4,所以能猜出来那个是选中的朋友,猜出来哪个是选中的不难,但这毕竟不是智商测试嘛,还是以满意度为基础来做设计的,而且最好做到不需要思考,是不?就算用户真的没有感觉异样,我也会觉得自己的设计层次逻辑不合理,然后给自己狠狠拍上一块板砖的。
我知道批评人家的设计挺不好的,毕竟,新版设计整体来说很优秀,新LOGO也很好看,瑕不掩瑜,希望腾讯微博越来越好。

二、标签栏的设计原则

标签栏的设计,要注意以下几点原则:

1. 处于选中状态的标签栏要高亮,用以标识活动状态

程序启动时,优先加载的内容肯定是选中状态的标签页的内容。选中状态的标签要处于视觉上的活动状态。

2. 标签的数量不要多于5个,如果太多就放在more里

标签的数量,最多不要多余5个,否则就放不下了。如果你平级的信息模块实在是太多,可以考虑除了最重要的4个标签页之外,增加一个More标签,把那些次重要的标签,都放在More标签里。
ui selecteditemmodeswitcher 不纠结不是好设计师——标签栏的设计
图 7 最后一个More标签

但是,建议还是尽量不要有More这个标签,当More里的内容也超过5条时,就要考虑给用户带来的认知负担了。据说测试显示,大部分用户都不知道也不关注更多里有什么,根本都不去打开它。
当然,你也可以让用户去编辑首选标签,不过要知道,用户自定义永远是高级用户才会使用的高级功能,不能用它来解决普世问题。
屏幕快照 2011 08 20 下午07.08.46 不纠结不是好设计师——标签栏的设计
图8 Tweetbot的标签栏最后两个是可以长按之后自定义的

3. 标签是用来做模块切换的,而不是操作入口

如果是想提供对当前页面元素的操作,可以使用工具栏,而不是标签栏,标签是对内容模块的平级切换。当然现在比较流行把重要操作放在标签栏的某个位置上,如一系列的拍照应用,都把拍照放在标签栏中间,做了一个差异化的样式设计,也是可以参考的。

4. 可以用红色气泡或其他形象来在标签栏上标识新消息

当有新消息到达是,可以在标签栏上用数字气泡或者其他形式给予提醒。

notifacation 不纠结不是好设计师——标签栏的设计

图9 标签栏上的新消息提醒

5. 如果图标的表意性不够好的话,一定要用图标加文字来表达标签内容

iPhone有提供一些系统图标,用于工具栏上,表示收藏、历史、书签、更多等等,如果是的标签可以用系统图标来表达,尽量用系统图标,如果你非要自己设计也可以,但是请注意表意性,让用户不需要思考也能知道是什么。如果图标的表意性达不到要求的话,请一定要辅助文字来说明,文字不能太长,防止折行显示。

6. 如果你的操作产生标签切换,不要直接跳转,而是给予视觉引导

如果你把某个条目从一个标签页移动到另外一个标签页了,千万不要直接把标签页跳转过去,这样做,1会让用户失去控制杆,2如果用户不小心溜号了,就会在你的程序中迷失了。但是,你又不得不告知用户,内容已经产生了状态变更,这时候最好借助于引导动画。
屏幕快照 2011 08 20 下午07.46.33 不纠结不是好设计师——标签栏的设计
图10 凡客诚品
凡客诚品当从分类标签中,把商品加入购物车时,有一个引导动画,1.告知用户已经加入购物车成功了,2.告知用户购物车在另一个标签栏后面。当然这个动画的位置感还可以再好一点。

三、关于标签栏的设计模式库

分享一些关于标签栏的设计模式库:
iPhone:
Android:

分类: 6如何设计 标签:

无觅相关文章插件,快速提升流量