对微信重新设计.pdfVIP

对微信的重新设计 微信作为一个用户量极大的”超级 A pp”, 其 A ndro id 客户端一直沿用 iO S UI, 在 A ndro id 4 .X 时代, 国 外各大互 网厂商纷纷按照 A ndro id Design 重新设计自家应用时, 腾讯没有丝毫这方面的想法, 依然”我行我素”的在 A ndro id 上使用 iO S UI. 其在 A ndro id 平台上的所作所为以及”知乎上某腾讯前 设计师的一条答案” 其设计师的不负责任言论对国产 A ndro id 应用产生了极为深远的负面影响. 相对基础扎实的知乎而言, 微信这么一个没有任何设计基础的应用, 我们需要做的是——从头开始进 行设计. 没有半点偷工减料的可能性, 容不得半点偷懒的想法. 这次我就以微信为例子, 讲解一下应该 如何重做一款”原本就没有意向遵循 A ndro id Design”的应用, 同时希望这个范例能给大家带来一些 参考。 1. 最近对话 既然要重新设计, 那就彻底推倒重来. 试用了一下微信之后, 我决定采用 Drawer 作为导航方式. 微信的导航层级非常多, 很多重要的功能都 被放在二级或者更多的层级下, Drawer 的采用显著的减少进入常用功能入口需要的操作次数. 为什么 不用 Fixed Tabs? 其实还是怕上方元素过多重心不稳, 而且四个 Tabs 的话会显得略微拥挤 (官方建 议是三个或以下 我是完全不觉得四个 Tab 拥挤啦). A ct io n Bar 的颜色是这么来的: iO S 版的微信更新了一个新图标 (A ndro id 版本似乎也随后更新了), 我从那个图标的 iO S 7 版本 (没有”水滴高光”) 的顶部和底部各取一个颜色作为主从色调 (其实和知 乎的 A ct io n Bar 处理思路是一致的). 微信的 iO S 新图标 现在的未读通知实在是太 iO S 风了, 于是我自己做了个未读通知样式: 列表左侧 4 dp 宽的指示条, 头 像变暗 50% 并加上马赛克风格遮罩, 其上显示未读计数. 另外, 语音信息原来就是单纯的显示 [语音], 让人感到很无趣, 我自己做了一个语音的波形图案来代表 语音信息. 原来搜索放在顶部, 但是会随列表滚动而不是保持在顶部或者做成 Q uick Ret urn 样式, 实 际意义不大. 我用搜索按钮代替它. 还有, 我加入了一个表示时间区间的旗帜提示条. 并没有太大的 作用, 有点画蛇添足吧 2. Navigat io n Drawer 发现 我注意到对于很多用户 (比如说我妈和她的同事, 朋友们) 而言, “发现”分类下的三个功能实际上都是 非常常用的, 而它们现在位于二级菜单中,不便于导航. 而采取 Drawer 之后, 就可以做到直接从这些 功能的页面进入最近对话等一级菜单的功能中. 而且, 这个 Drawer 被设计为在二级页面中也能唤 出的, 它的采用能再次提升应用导航的便利性. 采用 Drawer 还有一个好处就是原来的”发现”和”我” Tab 可以被取消掉. 原本的”发现”和”我” Tab 功能 十分鸡肋, 实际上就是两个导航枢纽. 所以我选择将”我” Tab 中的内容放进头像旁 Spinner 展开后的 菜单中 (这些功能比起”发现”中的功能, 往往更少被使用到), 而”发现” Tab 下的功能则得到了优先级 提升, 可以直接从 Drawer 中访问. 还有一点就是, 在我看来, 新增加的”表情商店”比起”我”更适合放在” 发现”下. 另外, 图标也经过了全新设计. 这次的用色对于我而言是一个挑战, 期间也得到了来自 Suiyo ubi 的 指导. 新的图标采用饱和度和明度都相对较低的配色, 三个一级页面的图标采用冷色, 而三个次级页面 采用暖色. 次级页面下我使用淡绿色的背景和绿色的左侧指示条让这次的 Drawer 不至于显得很单调 . 我还做了一个参照 G+ 4 .1 版本的 Drawer, 把朋友圈的个人题图放进 Drawer, 然后去掉了”发现”下的 朋友圈, 改为从题图进入. 3. 通讯录 系人界面我参照了 A ndro id 自带 系人进行设计, 将头像放大, 同时给个性签名更多空间. iO S 风的 字母 Index 则用 A ndro id 标准的 Indexed S