对微信的重新设计.pdfVIP

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