FB LIKE JACKER

Android Design in Action — 以微信为例

2013 年Aug月 16 日由 发布 | 类别: Android Design 研究会 | Tags: ,

Screenshot (1311)

微信是腾讯公司于 2011 年 1 月 21 日推出的一款跨平台类 Kik 即时通讯软件. 目前已经有逾三亿用户, 功能也日趋丰富.

微信作为一个用户量极大的”超级 App”, 其 Android 客户端一直沿用 iOS UI, 在 Android 4.X 时代, 国外各大互联网厂商纷纷按照 Android Design 重新设计自家应用时, 腾讯没有丝毫这方面的想法, 依然”我行我素”的在 Android 上使用 iOS UI. 其在 Android 平台上的所作所为以及其设计师的不负责任言论对国产 Android 应用产生了极为深远的负面影响.

相对基础扎实的知乎而言, 微信这么一个没有任何设计基础的应用, 我们需要做的是——从头开始进行设计. 没有半点偷工减料的可能性, 容不得半点偷懒的想法. 这次我就以微信为例子, 讲解一下应该如何重做一款”原本就没有意向遵循 Android Design”的应用, 同时希望这个范例能给大家带来一些参考.

1. 最近对话

2013-08-12 11.34.59_framedHome_framed phase 2

既然要重新设计, 那就彻底推倒重来.

试用了一下微信之后, 我决定采用 Drawer 作为导航方式. 微信的导航层级非常多, 很多重要的功能都被放在二级或者更多的层级下, Drawer 的采用显著的减少进入常用功能入口需要的操作次数. 为什么不用 Fixed Tabs? 其实还是怕上方元素过多重心不稳, 而且四个 Tabs 的话会显得略微拥挤 (官方建议是三个或以下… 我是完全不觉得四个 Tab 拥挤啦).

Action Bar 的颜色是这么来的: iOS 版的微信更新了一个新图标 (Android 版本似乎也随后更新了), 我从那个图标的 iOS 7 版本 (没有”水滴高光”) 的顶部和底部各取一个颜色作为主从色调 (其实和知乎的 Action Bar 处理思路是一致的).

iOS

微信的 iOS 新图标

现在的未读通知实在是太 iOS 风了, 于是我自己做了个未读通知样式: 列表左侧 4dp 宽的指示条, 头像变暗 50% 并加上马赛克风格遮罩, 其上显示未读计数.

另外, 语音信息原来就是单纯的显示 [语音], 让人感到很无趣, 我自己做了一个语音的波形图案来代表语音信息. 原来搜索放在顶部, 但是会随列表滚动而不是保持在顶部或者做成 Quick Return 样式, 实际意义不大. 我用搜索按钮代替它. 还有, 我加入了一个表示时间区间的旗帜提示条. 并没有太大的作用, 有点画蛇添足吧…

2. Navigation Drawer & 发现

2013-08-12 15.13.36_framed Drawer_framed

我注意到对于很多用户 (比如说我妈和她的同事, 朋友们) 而言, “发现”分类下的三个功能实际上都是非常常用的, 而它们现在位于二级菜单中,不便于导航. 而采取 Drawer 之后, 就可以做到直接从这些功能的页面进入最近对话等一级菜单的功能中. 而且, 这个 Drawer 被设计为在二级页面中也能唤出的, 它的采用能再次提升应用导航的便利性.

采用 Drawer 还有一个好处就是原来的”发现”和”我” Tab 可以被取消掉. 原本的”发现”和”我” Tab 功能十分鸡肋, 实际上就是两个导航枢纽 (Navigation Hub). 所以我选择将”我” Tab 中的内容放进头像旁 Spinner 展开后的菜单中 (这些功能比起”发现”中的功能, 往往更少被使用到), 而”发现” Tab 下的功能则得到了优先级提升, 可以直接从 Drawer 中访问. 还有一点就是, 在我看来, 新增加的”表情商店”比起”我”更适合放在”发现”下.

另外, 图标也经过了全新设计. 这次的用色对于我而言是一个挑战, 期间也得到了来自 Suiyoubi 的指导. 新的图标采用饱和度和明度都相对较低的配色, 三个一级页面的图标采用冷色, 而三个次级页面采用暖色. 次级页面下我使用淡绿色的背景和绿色的左侧指示条让这次的 Drawer 不至于显得很单调.

Drawer_framed Drawer G+_framed

我还做了一个参照 G+ 4.1 版本的 Drawer, 把朋友圈的个人题图放进 Drawer, 然后去掉了”发现”下的朋友圈, 改为从题图进入.

3. 通讯录

2013-08-12 15.17.23_framed Contacts_framed phase 2

联系人界面我参照了 Android 自带联系人进行设计, 将头像放大, 同时给个性签名更多空间. iOS 风的字母 Index 则用 Android 标准的 Indexed Scrolling 代替. 碍事而且不好用的搜索栏依然移到 Action Bar 中.

4. 对话界面

第一步

2013-08-14 14.26.36_framed Conversation_framed

(由于我懒得打那么多对话所以我就用键盘遮住了一半屏幕…)

对话框的风格参照 Hangouts 来进行设计, 保留了微信原来的对话框和头像的布局. 之所以选择 Hangouts 是因为短信的对话框太平淡了, 没有 Hangouts 这样的活跃感. 原先微信采用了浅黄色背景, 但是感觉和主题不是很搭调,我将背景颜色替换成了淡绿色.

第二步

Conversation_framed Conversation_framed m

观察了一下微信的对话框, 发现原本微信对话的右边距大得可怕. 考虑到”对话”的连贯性, 我不打算采用那么大的边距, 但是还是适当的增加了一下边距的大小. 另外还有重选了一套”更多功能”中的图标 (因为很懒所以随便给搞了几个). 还有, 为了强调”右滑返回”, 我给界面左边缘加入了一个小把手.

5. 朋友圈

2013-08-15 09.48.14_framed Timeline_framed

 设计朋友圈页面的时候其实也没有想太多. 朋友圈的最主要目的就是看照片, 赞和评论. 于是我在排版上借鉴了 Play Music 的艺人题图呈现形式 (Fading Action Bar) 还有 Google+ 的卡片流, 在信息流里加入更大的照片和头像, 把”评论”和”赞”功能直接拉出来 (原来的话需要先点击那个小气泡再选择评论或赞). 另外对于不能完全显示的照片, 我借鉴了 Zagat信息流设计, 让发照片人的头像第一时间显示在时间轴底部, 而个人信息和”评论”, “赞”都浮于照片上方的半透明渐变面板上.

 Timeline_framed Timeline 2_framed phase 2

这是卷动后的效果. Action Bar 在卷动中显现.

6. 扫一扫

第一步

2013-08-13 10.02.59_framed Camera Options_framed

我和 Suiyoubi 在”扫一扫”界面上下了不少功夫. 在一番讨论之后我们达成共识, 既然是”扫一扫”, 那么相机界面就应该是绝对中心, 微信本来就采用了半透明的功能菜单和 Top Bar, 我们干脆把这个设计贯彻到极致, 采用了大胆的渐变透明 Action Bar, 并摒弃了屏幕上的切换功能 (我认为大多数用户是应该不会频繁的在这些功能间切换的, 只需要在进入是给出选项即可).

Image Credit: 乌丸渡NOT LIVES.

第二步

Camera Options_framed Camera_framed

后来我们决定采用更加激进的方式, 摒弃选项对话框, 直接进入常用功能 (现在的微信”扫一扫”功能也是一打开就默认进入二维码扫描), 其他功能则采用 Scrollable Tabs 进行切换 (虽然说昨天我才说过 Scrollalble 的劣势, 但是一个东西的价值不能轻易彻底否定).

Scrollable 比起 Fixed Tabs, 占用的纵向面积更小. 而我们希望这个 Scrollalbe 是可点击式的, 这样就不会离原先的设计太远.修改完成之后, 整体效果比原来好了不少.

7. 初次启动画面 & 登录画面

2013-08-15 15.29.15_framed Welcome_framed

欢迎画面的设计一定程度上受到了 iOS 7 的影响, 我去掉了原先按钮的边框, 将它们变为 Bottom Borderless 的样式, 一方面增加了触摸范围, 另一方面变得更加美观.

2013-08-15 15.46.44_framed Login_framed Phase 2

做登陆画面的思路和知乎那边是一致的, 我希望能够给用户带来视觉冲击. 至于那些更新说明什么的, 我懒得重画 (因为每次都不一样…).

我希望做到的效果是, 初次启动画面向上平移到预定位置, 同时登录窗从下方浮入, Faded Action Bar 从上方浮入.

8. 主屏图标 & 通知栏图标

其实微信的图标要改起来也不难, 只要把底座去掉就成了. 我借用了一下 Android Asset Studio 的图标生成工具做了一个具有一定立体感的图标.

ic_launcher_XXHDPIweixin_logo Whitepng 拷贝

至于显示效果嘛…

2013-08-15 08.31.50_framed 2013-08-15 08.31.50 拷贝_framed Phase 4

好吧我承认我又偷懒了, 通知栏图标看起来有种吃撑了的感觉, 不过大小很好调整的 (只是我懒得调整罢了). 但是这效果至少比原来那个好一点吧…

总结

早在半年以前我就想要对微信进行重设计了, 但是由于种种原因 (主要还是懒) 没着手做事. 现在手头有了充足的资源, 我对 Android Design 的理解比起半年前也有了明显的进步, 差不多是时候开始补欠下的作业了.

对微信进行重设计的过程十分痛苦, 每个界面都需要从头到尾重画, 没有任何能直接利用的资源. 但是完全重新设计也有一个好处, 就是可以完全不必顾虑应用原本的形态和样式, 自由的发挥. 由于是完全从头设计, 做出的改变就不列出了.

这里再多嘴说一说上次的知乎 redesign 发布之后我的一些想法吧. 重设计作为我的个人作品, 必然是优先体现我的个人风格和 Android Design, 而如何更好的彰显品牌特性这种事情应该交给软件公司去做, 而不是我. 比起画好看的图标, 我更注重这些元素在视觉上的搭配和位置是否正确, 会不会起到吸引用户注意力这方面的事, 这也是我和 Suiyoubi 为了 Drawer 中图标的配色和形状, 摆放等问题讨论了一个下午的理由. 而画好看的图标的任务, 请交给美工.

另一方面, 我对代码的实现完全不感兴趣, 因为同样一套交互方案, 有的开发者能用简洁漂亮的代码流畅的实现, 有的开发者就要用数倍于前者的代码量实现, 而且实现的效果还很差劲. 我可以很负责的说一句, 在我设计中出现的所有交互方案和思路, 都可以通过现有的代码理想的实现, 就看开发者的水平如何. 作为一个文科生, 我经常逛 GitHub, 对于哪些交互能够实现有清醒的认识.

这次我没画设置页, 因为这个页面画出来效果基本会和上次知乎的设置页效果差不多, 我懒得画 (说到底还是懒的问题嘛!)(不过虽说如此我还是准备了一套绿色调的设置用图标)…

2013-08-15 08.31.50_framed

这次重设计的过程中得到了很多人的帮助, 有来自团队内部成员 Suiyoubi 的用色指导, 有来自团队外部流水姐的各种建议等. 相信在大家的帮助下 ADiA 这个栏目会越做越好的.

最后照例是对比图, 不过这次的对比图没什么意思 (就像是拿一台长得像 Nexus 4 的 iPhone 和一台 Nexus 4 对比一样), 权当参考吧.

主屏图标 & 通知栏图标

Icons

欢迎页

Welcome

 

登录页

Login

最近对话

Home

发现 & 导航抽屉

Drawer

通讯录

Contacts

对话

Conversation

朋友圈

Timeline

扫一扫

Camera

« Android Design in Action — 以知乎为例
男神论设计 —— 从雅虎天气和果酱说开去 »

About NovaDNG

Nexus 4 (Android 5.1), Xperia Z3 (Android 5.0), Xperia Z2 Tablet (Android 5.0), veer 4G (webOS 2.1.2), Chromebook Pixel LS (2015). Guest Member of HiHex. Product Design @ Zhihu.com

» has written 188 posts

  • Pingback: Android Design版微信首度亮相:这是微信的一小步,或成为规范Android应用UI设计的一大步? | 内容采集()

  • Pingback: Android Design版微信首度亮相:这是微信的一小步,或成为规范Android应用UI设计的一大步? - 海南SEO_顾双江同您一起分享SEO与网络营销技巧的交流平台()

  • 牛奶巧克力

    此人没从实际应用出发。有说的好的地方。值得肯定。不过好多想法欠妥当。比如这位大侠喜欢 细化分类的 东东。典型例子 二维码 扫描。冥冥中多了一步。还有 聊天通讯录 切换 又多了一步,隐藏了一下。我想说,不仅视觉要扁平化。你的交互,思维也要扁平化

    • http://www.phonekr.com/ NovaDNG

      嗯, 你说的极是, 当初我确实没有考虑那么多, 现在如果让我重新做的话是不会犯这样的错误了.

  • Kokuryuu

    哦!android!我快用泪流满面来形容了!! 虽然有道一直是这么做的!!

  • Pingback: Android Design版微信首度亮相:这是微信的一小步,或成为规范Android应用UI设计的一大步? | 天擎软媒资讯()

  • Pingback: Android Design版微信首度亮相:这是微信的一小步,或成为规范Android应用UI设计的一大步? - 智能互联,物联世界,想想科技,很有趣!()

  • Pingback: Android Design版微信首度亮相:这是微信的一小步,或成为规范Android应用UI设计的一大步? | 杂事儿()

  • Pingback: Android Design版微信首度亮相:这是微信的一小步,或成为规范Android应用UI设计的一大步? | 阿贰叁部落格()

  • Pingback: Android Design版微信首度亮相:这是微信的一小步,或成为规范Android应用UI设计的一大步?()

  • Antediluvian

    虽然大家都说这绿色太刺眼,不过在我看来微信这样一个相对年轻化的app,用活泼一些的绿色也未尝不可

  • Lucifer J Shieh

    您好,请问您的微信UI设计素材和相关xml是否还在?最近相对QQ和微信进行美化,看了您的设计深感惊艳,望不吝分享。谢谢!

  • 乌鸦

    好喜欢!!!!!!!

  • Cknight

    配色有点惨淡,字体大小欠考虑,线型单薄而且部分地方太粗,左滑窗口布置不合理,尽管很多问题很致命,但是也比原来的好看了

  • Pingback: Android 五年: 仍在追赶中的国产应用 | 另客网-官方博客()

  • Pingback: Android Design in Action —— 十大常见 Android UX 错误 | 另客网-官方博客()

  • bice

    登录界面的设计不错,朋友圈的设计不好,评论和赞按钮有点拼凑的感觉。另外使用Drawer有个缺陷:由于导航航被隐藏起来,当有新消息进来就不像原版那样能够直观地看到更新(如朋友圈),颜色我就不吐槽了。整体有突破,但不是我想要的那种,有时间我也redesign一个,嘿嘿

  • rankun203

    使用Facebook登录,,果然腾讯面对的用户和设计师面对的不同。

  • howard g

    好文,navigation drawer设计还是不错的,不过从个人来看,比较喜欢开源slidingmenu, content_frame在最上层,left_frame和right_frame在下层的设计,旁边毕竟是导航的作用,把content_frame放上层主次更加分明。如果navi_drawer加入这样的选项让设计人员可选的话就完美了。

  • http://www.phonekr.com/ NovaDNG

    我明白了. 你说的这种方式就是我最早的时候考虑到的, 毕竟 Tabs 的可见性是最强的. 之所以改成 Drawer 主要是因为 Tabs 会隐藏很多常用的东西, 考虑到微信用户现在大多都经常用朋友圈和玩游戏 (毕竟是作为了卖点…), 所以就把他们直接放进 Drawer 了.

    • ss1271

      对的,drawer很好的。另外就是那个日期的标签。。。违和啊

      • http://www.phonekr.com/ NovaDNG

        嗯, 我自己也这么觉得… 文章里我也自己吐槽了…

  • ss1271

    赞。其实「最近对话」这个页面如果模仿一下系统的Contacts的Tab处理方式,是不是会好些?

    • http://www.phonekr.com/ NovaDNG

      呃, 那 Fixed Tabs 应该放哪几个分类呢…?

  • bianmunsse

    有修改版下载吗?

  • appendix

    好像已经有美化版出来,是出自你之手吗?

    • http://www.phonekr.com/ NovaDNG

      不是

  • Wang

    有没有兴趣看看虾米音乐APP?

  • 小小_HaPPY

    非常喜欢的风格,曾经看到fuubo设计时就想了,要是所有应用用抽拉式风格,使用起来不知道会方便多少?!至少觉得可以方便单手……还建议LZ分享资源,已经看不下去微信的狗屎风格,最近换了个美化,也就是把图标、底栏换了而已。还是不咋滴…

  • aitianci

    没想到微信那坨狗屎图标去掉底座居然还是能看的,这是个惊喜。
    我忍微信很久了,干脆今天删掉,一了百了。我希望真正需要我的人会为了我安装一个Hangouts,不需要我的老子也不屑和他们聊。

  • Pingback: 微信设计 | WaterM’s home()

  • Chrono Lee

    请问截图左上角显示网速的是什么app?

    • stanleywind

      我也想知道啊

  • Assassin

    很赞啊。。很想下载啊。。。

  • i08

    除了选用的绿色有些刺眼(仅个人意见),其他都棒透了!

    • 鱼鱼給給

      同感,这颜色有点没法接受

  • Pingback: Android Design in Action,对微信的重新设计 _ 人人都是产品经理()

  • foxhu

    在知乎上看到allenzhang是这样解释为什么android版微信要移植ios的UI
    “微信的头几个android版本,是单独做了一套符合android规范的UI的。但是几个版本下来,很难让我们自己觉得满意。android的UI规范, 确实稍嫌混乱,各种app也都是大胆自己发挥。我们自认为以我们现有的UI人手,专门针对android做一套令我们自己满意的UI,而且还要跟上iOS 版本的快速迭代节奏,很困难,所以才决定直接移植iOS的微信UI。
    用户不是设计师,他们不会觉得“返回”按钮刺眼,所以绝大多数用户是能接受移植自iOS的UI的。如果我们专门针对android版去掉“返回”按钮,似乎有点多此一举。
    从项目进度来说,这样做,效率的提升非常明显。新功能,我们在iOS上先做,做的过程中会有很多的UI上的反复修改,很耗时。而android版本只需要移植,使得跟进速度非常快。
    从一般的UI原则来说,对不同平台采取适合平台的UI规范是正确的。所以我们做Windows Phone版本,几乎是不可能考虑用iOS的UI的。但万事无绝对,android和iOS确实太接近了,变通是可以考虑的方案。也许将来有一天 android的系统UI完美到令人信服,我们又会专门为它设计一套android版的UI。

    • Robin

      不就是我想偷懒的意思吗。。

    • Nolan Tse

      你知道他发这个回答的时候是2012年第一季度么?

  • 纸上谈爱

    不得不爆个粗口,他妈的太赞了~~~

  • siau2tie1

    搭配上锤子那个微信图标(可以适当扁平)估计会很好。

    • bianmunsse

      不会的,拟物图标可不是Android design的特色

      • siau2tie1

        那个也不算拟物。锤子也就是海豚浏览器、网易新闻比较显著了。其他和安卓一样是拟真。

  • xbting

    登录页面后面跟着那个微信的地球背景感觉有点变扭

  • lsyiverson

    最近在用新nexus 7,感觉android的平板应用还差很远,博主什么时候有兴趣写一篇有关于android平板应用该如何设计的文章?

    • http://www.phonekr.com/ NovaDNG

      很早以前就写过了…

  • junan

    帅 个性化很高

  • ss428

    这设计太惊艳了,简直就是把一坨狗屎变成了一束鲜花啊!辛苦了!
    提一点意见吧。新的扫一扫界面上手不够容易啊。微信原版的模式切换方式倒是更好。

    • http://www.phonekr.com/ NovaDNG

      是我偷懒了。。。

  • rokayu

    相当棒啊啊 比腾讯做的好多了

  • 李磊

    在哪里下载

    • http://www.phonekr.com/ NovaDNG

      只是 Demo 图…

      • 李磊

        唉。。。

  • MASAILA

    这绿色有点扎眼

  • ake1987

    不知道发上cnBeta会有多少人会骂腾讯…建议作者发上去试试…

    • http://www.phonekr.com/ NovaDNG

      不要, 一朝被发 cb, 十年怕水壶…

      • lishuhang

        CB始终欢迎好的文章呀。不过最近大家对喷设计没什么太大动力,主要精力都集中在喷人傻钱多的电信诈骗上

  • 竹子

    TX 这个设计 实在是。。 美工是街上拉来的 估计

  • kubikiri

    说实话Holo风格其实也很蛋疼,一个典型的例子就是,我需要猜按钮是干啥用的——它根本没有文字描述

    • http://www.phonekr.com/ NovaDNG

      可以长按啊…

    • 玩耍天使

      其實ios的也慢慢變成這樣了,好應用會給你導航讓你先學習的

    • kk

      长按按钮就有提示的

  • 大宁

    一直不能理解Drawer中的下拉菜单存在的意义,如果仅仅是为了突出层级,却要多一次点按操作,难道没有更好的设计么?

    • http://www.phonekr.com/ NovaDNG

      默认展开.

  • ano

    感觉扫一扫的修改不合适。。。从条形码切到翻译,需要多次操作

    • http://www.phonekr.com/ NovaDNG

      本来是要做成 Google Play 那种形式的, 可以容下五个功能, 但是我懒…

  • Halo

    不知道把主配色替换成Vine那个绿效果会如何

  • KochiyaOcean

    看到Not Lives感觉好亲切OwO

    • http://www.phonekr.com/ NovaDNG

      最近出了新一章. 画风喜, 天宫萌~

    • Sam喵

      我还以为人气不高没想到这里也能见到

      • http://www.phonekr.com/ NovaDNG

        没理由人气不高啊…

      • http://about.me/Laoism 林卯

        NOT LIVES 我也在看,略惊了下。

        (对NovaDNG):当前这个绿色饱和度太高非常扎眼。因图标设色原则和主题不同(更夺目…),不建议从图标取色,保守些的话,我推荐深色Holo主题配Android调色板中的#99CC00。

  • 蒋达

    可不可以自己做一个?

    • http://www.phonekr.com/ NovaDNG

      可以啊 (Demo 图)~ 不可能 (apk)…

  • Roger

    不错,支持。大爱4.1版本的G+

  • Icy Cai

    居然是文科生。。。我一直以为楼主是学计算机的囧。。。4.1版本的G+ drawer真不错哈。。。

    • http://www.phonekr.com/ NovaDNG

      咦, 我没说过我高中一直是文科生么…

    • Uucky

      文科生也是可以学计算机的。

  • Charley Brown

    沙发。

锋客的朋友们

  • 少数派
  • 煮机网

签订契约成为机油吧!

Buy me a coffee~ ;-)

Buy me a coffee~ ;-)
閃開│讓專業的來 沒辦法│我這個人就是太正直了