微信朋友圈画心2的游戏怎样才能重画

线上活动-9月24日已结束深圳 9月24日已结束在线课堂 9月17日已结束
阅读(7750)
加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品
微信作为一个用户量极大的”超级 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 新图标
现在的未读通知实在是太 iOS 风了, 于是我自己做了个未读通知样式: 列表左侧 4dp 宽的指示条, 头像变暗 50% 并加上马赛克风格遮罩, 其上显示未读计数.
另外, 语音信息原来就是单纯的显示 [语音], 让人感到很无趣, 我自己做了一个语音的波形图案来代表语音信息. 原来搜索放在顶部, 但是会随列表滚动而不是保持在顶部或者做成 Quick Return 样式, 实际意义不大. 我用搜索按钮代替它. 还有, 我加入了一个表示时间区间的旗帜提示条. 并没有太大的作用, 有点画蛇添足吧…
2. Navigation Drawer & 发现
我注意到对于很多用户 (比如说我妈和她的同事, 朋友们) 而言, “发现”分类下的三个功能实际上都是非常常用的, 而它们现在位于二级菜单中,不便于导航. 而采取 Drawer 之后, 就可以做到直接从这些功能的页面进入最近对话等一级菜单的功能中. 而且, 这个 Drawer 被设计为在二级页面中也能唤出的, 它的采用能再次提升应用导航的便利性.
采用 Drawer 还有一个好处就是原来的”发现”和”我” Tab 可以被取消掉. 原本的”发现”和”我” Tab 功能十分鸡肋, 实际上就是两个导航枢纽. 所以我选择将”我” Tab 中的内容放进头像旁 Spinner 展开后的菜单中 (这些功能比起”发现”中的功能, 往往更少被使用到), 而”发现” Tab 下的功能则得到了优先级提升, 可以直接从 Drawer 中访问. 还有一点就是, 在我看来, 新增加的”表情商店”比起”我”更适合放在”发现”下.
另外, 图标也经过了全新设计. 这次的用色对于我而言是一个挑战, 期间也得到了来自 Suiyoubi 的指导. 新的图标采用饱和度和明度都相对较低的配色, 三个一级页面的图标采用冷色, 而三个次级页面采用暖色. 次级页面下我使用淡绿色的背景和绿色的左侧指示条让这次的 Drawer 不至于显得很单调.
我还做了一个参照 G+ 4.1 版本的 Drawer, 把朋友圈的个人题图放进 Drawer, 然后去掉了”发现”下的朋友圈, 改为从题图进入.
联系人界面我参照了 Android 自带联系人进行设计, 将头像放大, 同时给个性签名更多空间. iOS 风的字母 Index 则用 Android 标准的 Indexed Scrolling 代替. 碍事而且不好用的搜索栏依然移到 Action Bar 中。
4. 对话界面
(由于我懒得打那么多对话所以我就用键盘遮住了一半屏幕…)
对话框的风格参照 Hangouts 来进行设计, 保留了微信原来的对话框和头像的布局. 之所以选择 Hangouts 是因为短信的对话框太平淡了, 没有 Hangouts 这样的活跃感. 原先微信采用了浅黄色背景, 但是感觉和主题不是很搭调,我将背景颜色替换成了淡绿色.
观察了一下微信的对话框, 发现原本微信对话的右边距大得可怕. 考虑到”对话”的连贯性, 我不打算采用那么大的边距, 但是还是适当的增加了一下边距的大小. 另外还有重选了一套”更多功能”中的图标 (因为很懒所以随便给搞了几个). 还有, 为了强调”右滑返回”, 我给界面左边缘加入了一个小把手.
设计朋友圈页面的时候其实也没有想太多. 朋友圈的最主要目的就是看照片, 赞和评论. 于是我在排版上借鉴了 Play Music 的艺人题图呈现形式还有 Google+ 的卡片流, 在信息流里加入更大的照片和头像, 把”评论”和”赞”功能直接拉出来 (原来的话需要先点击那个小气泡再选择评论或赞). 另外对于不能完全显示的照片, 我借鉴了"Zagat - Play Store"
的信息流设计, 让发照片人的头像第一时间显示在时间轴底部, 而个人信息和”评论”, “赞”都浮于照片上方的半透明渐变面板上.
这是卷动后的效果. Action Bar 在卷动中显现。
我和 Suiyoubi 在”扫一扫”界面上下了不少功夫. 在一番讨论之后我们达成共识, 既然是”扫一扫”, 那么相机界面就应该是绝对中心, 微信本来就采用了半透明的功能菜单和 Top Bar, 我们干脆把这个设计贯彻到极致, 采用了大胆的渐变透明 Action Bar, 并摒弃了屏幕上的切换功能 (我认为大多数用户是应该不会频繁的在这些功能间切换的, 只需要在进入是给出选项即可).
后来我们决定采用更加激进的方式, 摒弃选项对话框, 直接进入常用功能 (现在的微信”扫一扫”功能也是一打开就默认进入二维码扫描), 其他功能则采用 Scrollable Tabs 进行切换 (虽然说昨天我才说过 Scrollalble 的劣势, 但是一个东西的价值不能轻易彻底否定).
Scrollable 比起 Fixed Tabs, 占用的纵向面积更小. 而我们希望这个 Scrollalbe 是可点击式的, 这样就不会离原先的设计太远.修改完成之后, 整体效果比原来好了不少.
7. 初次启动画面 & 登录画面
欢迎画面的设计一定程度上受到了 iOS 7 的影响, 我去掉了原先按钮的边框, 将它们变为 Bottom Borderless 的样式, 一方面增加了触摸范围, 另一方面变得更加美观.
做登陆画面的思路和知乎那边是一致的, 我希望能够给用户带来视觉冲击. 至于那些更新说明什么的, 我懒得重画 (因为每次都不一样…).
我希望做到的效果是, 初次启动画面向上平移到预定位置, 同时登录窗从下方浮入, Faded Action Bar 从上方浮入.
8. 主屏图标 & 通知栏图标
其实微信的图标要改起来也不难, 只要把底座去掉就成了. 我借用了一下 "Android Asset Stuido" 的图标生成工具做了一个具有一定立体感的图标.
至于显示效果嘛…
好吧我承认我又偷懒了, 通知栏图标看起来有种吃撑了的感觉, 不过大小很好调整的 (只是我懒得调整罢了). 但是这效果至少比原来那个好一点吧…
早在半年以前我就想要对微信进行重设计了, 但是由于种种原因 (主要还是懒) 没着手做事. 现在手头有了充足的资源, 我对 Android Design 的理解比起半年前也有了明显的进步, 差不多是时候开始补欠下的作业了.
对微信进行重设计的过程十分痛苦, 每个界面都需要从头到尾重画, 没有任何能直接利用的资源. 但是完全重新设计也有一个好处, 就是可以完全不必顾虑应用原本的形态和样式, 自由的发挥. 由于是完全从头设计, 做出的改变就不列出了.
这里再多嘴说一说上次的"Android Design in Action — 以知乎为例"知乎发布之后我的一些想法吧. 重设计作为我的个人作品, 必然是优先体现我的个人风格和 Android Design, 而如何更好的彰显品牌特性这种事情应该交给软件公司去做, 而不是我. 比起画好看的图标, 我更注重这些元素在视觉上的搭配和位置是否正确, 会不会起到吸引用户注意力这方面的事, 这也是我和 Suiyoubi 为了 Drawer 中图标的配色和形状, 摆放等问题讨论了一个下午的理由. 而画好看的图标的任务, 请交给美工.
另一方面, 我对代码的实现完全不感兴趣, 因为同样一套交互方案, 有的开发者能用简洁漂亮的代码流畅的实现, 有的开发者就要用数倍于前者的代码量实现, 而且实现的效果还很差劲. 我可以很负责的说一句, 在我设计中出现的所有交互方案和思路, 都可以通过现有的代码理想的实现, 就看开发者的水平如何. 作为一个文科生, 我经常逛 GitHub, 对于哪些交互能够实现有清醒的认识.
这次我没画设置页, 因为这个页面画出来效果基本会和上次知乎的设置页效果差不多, 我懒得画 (说到底还是懒的问题嘛!)(不过虽说如此我还是准备了一套绿色调的设置用图标)…
这次重设计的过程中得到了很多人的帮助, 有来自团队内部成员 Suiyoubi 的用色指导, 有来自团队外部流水姐的各种建议等. 相信在大家的帮助下 ADiA 这个栏目会越做越好的.
最后照例是对比图, 不过这次的对比图没什么意思 (就像是拿一台长得像 Nexus 4 的 iPhone 和一台 Nexus 4 对比一样), 权当参考吧.
主屏图标 & 通知栏图标
发现 & 导航抽屉
<div class="count" id="ludouVA_count_
<div class="count" id="ludouVA_count_
<div class="count" id="ludouVA_count_
分享到微信朋友圈
有人回复时邮件通知我
80后,宅女,互联网专业打杂人员。
人人都是产品经理社区()是中国最大、最活跃、最具人气产品经理学习、交流、分享平台,微信公众号woshipm。成立5年以来举办线上活动500余场,线下活动数百场,覆盖北京、上海、广州、深圳、成都、杭州等30多个城市,在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝,其中产品经理占比50万, 中国75%的产品经理都在这里。运营一个微信公众号,你首先得明白这三点:1、想清楚你的微信公众号是不是有明确的定位:给谁看的,订阅了有什么用。2、没钱没名气没资源的个人劝你还是想清楚要不要做微信公号营销推广,真正操作起来你会发现这个比想象得难得多,微博上因为从众效应可以引起广泛传播,但微信不同,微信就是个闭环,所以你所有的粉丝都得通过微博等其他媒介来吸引,而且机构、企业因为资金、资源等相对充分,上量要快得多3、别相信所谓的微信粉丝3天过万技巧,老子都试过,纯TM扯淡!摇一摇、漂流瓶那种方式根本没人理你!大家都在摇妹子呢,你TM发个垃圾信息,谁鸟你啊!话题营销营销的本质是制造差异,有了差异才有传播点。推广自己的微信公众号需要贴二维码,但微信公众号有上万,怎么让自己的二维码脱颖而出呢?后来看到别人的二维码都是静态不会动的,于是我就决定让我的二维码要动起来,这样一下子就和别人不一样了(gif动图,看不到动图点击这里查看:http://t.cn/RvFd5Qr)。别人的二维码都不够屌,我的二维码就要够屌够有趣。于是有了下面这个二维码,我在微博里传播,有人神回复:“很屌的二维码,它教会我们,不要只顾着打炮,看好自己的鸟。。。”所以,只要你的东西有趣,具备话题点,就有人帮你传播。我在某BBS论坛贴了这个二维码,起了个“雷人”的标题吸引眼球,结果竟然收到了七百多个回复!事件营销比如微信5.0出来时打飞机非常火,我在知乎回答了微信 5.0 里的打飞机游戏是谁做的,几小时就获得了上百的赞同,我就迅速在微信里面组织了微信打飞机的技巧等做成一个专题,并在知乎里面提示关注并回复“八卦”了解更多打飞机背后的八卦、技巧,从而把大量关注这个问题的知乎用户引流到我的微信里。这个时候就考验你对事件是否足够敏感,是否具备好的执行力。 
 文章为作者独立观点,不代表微头条立场
的最新文章
传统媒体时代广告是强塞给用户的,基本上用户只能被动的接受,这种状态下用户对广告是非常反感的,但如今到了社交媒世人眼中的微信运营者九点到公司,边喝咖啡边处理邮箱里各类邮件。九点半分析微信后台的数据,做成报表向大boss我们不依赖单一指标,结合总阅读数、收藏数、评论数、点赞数以及对应各平台的互动指标,建立了客观而均衡的综合评价标准,暨“头条号热门文章指数”。《秒速五厘米》我要以怎样的速度生存,才能与你再会。一个好文案和好编剧一样,相信一定都是热爱生活的观察者,他们运营一个微信公众号,你首先得明白这三点:1、想清楚你的微信公众号是不是有明确的定位:给谁看的,订阅了有什么用1、你写PPT时,鳕鱼正跃出水面....你写PPT时,阿拉斯加的鳕鱼正跃出水面....你看报表时,梅里雪山的张三一直喜欢喝20块钱的茶叶。新开茶店里每次张三去买茶叶,老板都送他半两好茶。张三将好茶攒着待客。一天闲来无关于H5的发展,分享几个最近看到的惊人数据和新闻:1、截至2015,有80%的App将全部或部分基于HTML一、盛宴全城·“饰”裳有我服饰类1服饰类精美礼品逐级大派送活动活动时间:9月25日——10月7日
(共13一名优秀的运营人员究竟要具备什么样的能力呢?一、基础编辑能力这个无需做太多赘述,说白了就是公众平台编辑能力。1、作业没带就是没写以前作业没写完的时候,总是会给老师说没带作业本来,后来老师说,不带就相当于没写,于是我内一些短而醍醐灌顶的经典回答成功的人找原因,失败的人找理由,而你却找小姐在一个“情怀”已经泛滥的年代里,任何拿着“情怀”出来说事的人都不太受待见。犀利者会吐槽:“我早已看穿了一切”写在前面:这个月的长春见证了所有长春人的坚强,因为除了时不时的停水还有时不时的停电,外加定点的封路,如果不是
一位员工问我,我想开店行吗?  我回问这个员工,开店不是为了赚钱吗?  她说:是。  我说:傻帽,想吃写在前面:中秋就快到了,十一也不远了,美好的日子就要来临了,小伙伴们不要再低迷了,起来嗨吧!快来关注我们的头我有一个同学,是在做移动端开发的,2011年的时候和我说,未来的趋势是移动互联网,其实那个时候,我对移动导语:随着互联网进化到移动终端的趋势越发加快,原本十分苦逼的餐饮行业正变得越来越像国产智能机产业,仿佛开始了据彭博社报道,百度CEO李彦宏日前表示,该公司的未来在于服务而非搜索领域,宁愿为了未来的长远发展而牺牲眼前利1.普通人的圈子,谈论的是闲事,赚的是 工资,想的是明天。2.生意人的圈子,谈论的是项目,赚的是 利润,想的大部分企业的中高管人员都是90前出生的一代,很多CEO和传统大企业的高管,很可能还是80前。他们出生和成长的什么叫大数据?什么叫O2O?什么叫蓝海?什么叫红海?什么叫互联网思维?什么叫众筹?接下来一个段子统统告诉你,麦当劳这组情话结合产品本身,和对吃货深刻的洞察,句句写到了吃货的心坎里,暖的让人看饿了~创意不在于多么华丽,9.17,谐音“就要吃”。不用说,和“吃”相关的各个品牌都早早卯足了劲,要让全民在“917吃货节”胃口大开。新媒体行业随着互联网诞生,企业或是个人都纷纷在风口中扎堆。可是,为什么总是运营不好企业微信公众号?究竟欠缺了这块豆腐骨骼奇特,是块练武的好胚子■□TOP 10 阅读数:205万愚公移山,天帝震怒,派两个神坐在太行、王cczmtrlm互助、互信、互联、互通、互推、互动,长春自媒体人的精神家 !热门文章最新文章cczmtrlm互助、互信、互联、互通、互推、互动,长春自媒体人的精神家 !当前访客身份:游客 [
当前位置:
发布于 日 11时,
Wipe是一款基于HTML5&canvas的移动端,涂抹,自动播放涂抹轨迹,刮刮乐的插件,还在不断扩展中!/lephy/wipe&&&欢迎关注!
代码片段(4)
1.&[图片] _.png&&&&
2.&[代码][JavaScript]代码&&&&
* wipe 1.0
* A simple, efficent mobile wipe(简单的移动端涂抹插件)
@Author leiroc
* Copyright 2015, MIT License
* animation parmas:
* @param {Element}
canvas 外层元素
* @param {String}
涂抹层(可以使图片{.png|.jpg},和16进制颜色 #ccc)
* @param {Number}
涂抹笔直径
* @param {Boolean}
显示控制数据输出,true时,会在控制台输出轨迹数据
* @param {Boolean}
是否自动播放
* @param {Array}
自动播放的数据
* @param {Function}
涂抹时的回调函数
function Wipe(opts) {
this.opts = {
el: '#wipe',
fg: '#ccc',
debug: false,
autoWipe: false,
onswiping: function(percent, data) {}
for (var i in opts) {
this.opts[i] = opts[i]
this.init();
3.&[图片] 图片1 (2).jpg&&&&
4.&[图片] 图片2 (1).jpg&&&&
开源中国-程序员在线工具:
相关的代码(1016)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
开源从代码分享开始
玩爆H5的其他代码强烈推荐[核心提示] 以微信 Android 版本为例,讲解应该如何改进一款”一个没有任何设计基础”的应用。微信扫一扫,分享文章发表微博,邀请好友参加讨论。您可以 @好友昵称 通知他们微信是腾讯公司于 2011 年 1 月 21 日推出的一款跨平台类&&即时通讯软件。目前已经有逾四亿用户,功能也日趋丰富。
微信作为一个用户量极大的&超级 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 新图标
现在的未读通知实在是太 iOS 风了,于是我自己做了个未读通知样式: 列表左侧 4dp 宽的指示条,头像变暗 50% 并加上马赛克风格遮罩,其上显示未读计数。
另外,语音信息原来就是单纯的显示「语音」,让人感到很无趣,我自己做了一个语音的波形图案来代表语音信息。原来搜索放在顶部,但是会随列表滚动而不是保持在顶部或者做成 Quick Return 样式,实际意义不大。我用搜索按钮代替它。还有,我加入了一个表示时间区间的旗帜提示条。并没有太大的作用,有点画蛇添足吧&&
2、Navigation Drawer & 发现
我注意到对于很多用户 (比如说我妈和她的同事,朋友们) 而言,&发现&分类下的三个功能实际上都是非常常用的,而它们现在位于二级菜单中,不便于导航。而采取 Drawer 之后,就可以做到直接从这些功能的页面进入最近对话等一级菜单的功能中。而且,这个 Drawer 被设计为在二级页面中也能唤出的,它的采用能再次提升应用导航的便利性。
采用 Drawer 还有一个好处就是原来的&发现&和&我& Tab 可以被取消掉。原本的&发现&和&我& Tab 功能十分鸡肋,实际上就是两个导航枢纽 ()。所以我选择将&我& Tab 中的内容放进头像旁 Spinner 展开后的菜单中 (这些功能比起&发现&中的功能,往往更少被使用到),而&发现& Tab 下的功能则得到了优先级提升,可以直接从 Drawer 中访问。还有一点就是,在我看来,新增加的&表情商店&比起&我&更适合放在&发现&下。
另外,图标也经过了全新设计。这次的用色对于我而言是一个挑战,期间也得到了来自 Suiyoubi 的指导。新的图标采用饱和度和明度都相对较低的配色,三个一级页面的图标采用冷色,而三个次级页面采用暖色。次级页面下我使用淡绿色的背景和绿色的左侧指示条让这次的 Drawer 不至于显得很单调。
我还做了一个参照 G+ 4.1 版本的 Drawer,把朋友圈的个人题图放进 Drawer,然后去掉了&发现&下的朋友圈,改为从题图进入。
联系人界面我参照了 Android 自带联系人进行设计,将头像放大,同时给个性签名更多空间。iOS 风的字母 Index 则用 Android 标准的 Indexed Scrolling 代替。碍事而且不好用的搜索栏依然移到 Action Bar 中。
4、对话界面
(由于我所以我就用键盘遮住了一半屏幕&)
对话框的风格参照 Hangouts 来进行设计,保留了微信原来的对话框和头像的布局。之所以选择 Hangouts 是因为短信的对话框太平淡了,没有 Hangouts 这样的活跃感。原先微信采用了浅黄色背景,但是感觉和主题不是很搭调,我将背景颜色替换成了淡绿色。
观察了一下微信的对话框,发现原本微信对话的右边距大得可怕。考虑到&对话&的连贯性,我不打算采用那么大的边距,但是还是适当的增加了一下边距的大小。另外还有重选了一套&更多功能&中的图标 (因为很懒所以随便给搞了几个)。还有,为了强调&右滑返回&,我给界面左边缘加入了一个小把手。
设计朋友圈页面的时候其实也没有想太多。朋友圈的最主要目的就是看照片,赞和评论。于是我在排版上借鉴了 Play Music 的艺人题图呈现形式 (Fading Action Bar)还有 Google+ 的卡片流,在信息流里加入更大的照片和头像,把&评论&和&赞&功能直接拉出来 (原来的话需要先点击那个小气泡再选择评论或赞)。另外对于不能完全显示的照片,我借鉴了&&的,让发照片人的头像第一时间显示在时间轴底部,而个人信息和&评论&,&赞&都浮于照片上方的半透明渐变面板上。这是卷动后的效果。Action Bar 在卷动中显现。
我和 Suiyoubi 在&扫一扫&界面上下了不少功夫。在一番讨论之后我们达成共识,既然是&扫一扫&,那么相机界面就应该是绝对中心,微信本来就采用了半透明的功能菜单和 Top Bar,我们干脆把这个设计贯彻到极致,采用了大胆的渐变透明 Action Bar,并摒弃了屏幕上的切换功能 (我认为大多数用户是应该不会频繁的在这些功能间切换的,只需要在进入是给出选项即可)。
Image Credit:&:&。
后来我们决定采用更加激进的方式,摒弃选项对话框,直接进入常用功能 (现在的微信&扫一扫&功能也是一打开就默认进入二维码扫描),其他功能则采用 Scrollable Tabs 进行切换 (虽然说昨天我才说过 Scrollalble 的劣势,但是一个东西的价值不能轻易彻底否定)。
Scrollable 比起 Fixed Tabs,占用的纵向面积更小。而我们希望这个 Scrollalbe 是可点击式的,这样就不会离原先的设计太远。修改完成之后,整体效果比原来好了不少。
7、初次启动画面 & 登录画面
欢迎画面的设计一定程度上受到了 iOS 7 的影响,我去掉了原先按钮的边框,将它们变为 Bottom Borderless 的样式,一方面增加了触摸范围,另一方面变得更加美观。
做登陆画面的思路和知乎那边是一致的,我希望能够给用户带来视觉冲击。至于那些更新说明什么的,我懒得重画(因为每次都不一样&)。
我希望做到的效果是,初次启动画面向上平移到预定位置,同时登录窗从下方浮入,Faded Action Bar 从上方浮入。
8、主屏图标 & 通知栏图标
其实微信的图标要改起来也不难,只要把底座去掉就成了。我借用了一下&&的图标生成工具做了一个具有一定立体感的图标。
至于显示效果嘛&
好吧我承认我又偷懒了,通知栏图标看起来有种吃撑了的感觉,不过大小很好调整的(只是我懒得调整罢了)。但是这效果至少比原来那个好一点吧&
早在半年以前我就想要对微信进行重设计了,但是由于种种原因 (主要还是懒) 没着手做事。现在手头有了充足的资源,我对 Android Design 的理解比起半年前也有了明显的进步,差不多是时候开始补欠下的作业了。
对微信进行重设计的过程十分痛苦,每个界面都需要从头到尾重画,没有任何能直接利用的资源。但是完全重新设计也有一个好处,就是可以完全不必顾虑应用原本的形态和样式,自由的发挥。由于是完全从头设计,做出的改变就不列出了。
这里再多嘴说一说上次的&发布之后我的一些想法吧。重设计作为我的个人作品,必然是优先体现我的个人风格和 Android Design,而如何更好的彰显品牌特性这种事情应该交给软件公司去做,而不是我。比起画好看的图标,我更注重这些元素在视觉上的搭配和位置是否正确,会不会起到吸引用户注意力这方面的事,这也是我和 Suiyoubi 为了 Drawer 中图标的配色和形状,摆放等问题讨论了一个下午的理由。而画好看的图标的任务,请交给美工。
另一方面,我对代码的实现完全不感兴趣,因为同样一套交互方案,有的开发者能用简洁漂亮的代码流畅的实现,有的开发者就要用数倍于前者的代码量实现,而且实现的效果还很差劲。我可以很负责的说一句,在我设计中出现的所有交互方案和思路,都可以通过现有的代码理想的实现,就看开发者的水平如何。作为一个文科生,我经常逛 GitHub,对于哪些交互能够实现有清醒的认识。
这次我没画设置页,因为这个页面画出来效果基本会和上次知乎的设置页效果差不多,我懒得画 (说到底还是懒的问题嘛!)(不过虽说如此我还是准备了一套绿色调的设置用图标)&
这次重设计的过程中得到了很多人的帮助,有来自团队内部成员 Suiyoubi 的用色指导,有来自团队外部流水姐的各种建议等。相信在大家的帮助下 ADiA 这个栏目会越做越好的。
最后照例是对比图,不过这次的对比图没什么意思(就像是拿一台长得像 Nexus 4 的 iPhone 和一台 Nexus 4 对比一样),权当参考吧。
主屏图标 & 通知栏图标
发现 & 导航抽屉
微信扫一扫,分享文章发表微博,邀请好友参加讨论。您可以 @好友昵称 通知他们图片存储由提供京 ICP 备
号 - 2京公网安备

我要回帖

更多关于 微信朋友圈分享才能看 的文章

 

随机推荐