乐视mxa2值得买吗
按时间排序
楼主你好，该机的性价比还是非常高的，但系统方面优化很一般。
2500RMB乐Max2全网通，骁龙820 + 5.7寸2K屏 + 6GRAM+64GROM + 800W/2100万索尼IMX230 + LCDA，全能顶配机器了，音质需要耳机支持。比MX PRO5高配还强，价格便宜了600RMB。4GRAM + 64GROM版本的2300RMB
乐视2 Max为无边框ID3.0一体化金属机身设计，是5.7英寸2K屏，骁龙820处理器，4GB RAM+32GB ROM（2099元）版和6GB RAM+ 64GB ROM（2499元）版，800万+2100万摄像头，索尼IMX230传感器，F2.0光圈，支持光学防抖，HDR，PADF相位对焦，中置马达，3100mah电池，支持QC3.0+PD快充电，type-c耳机接口，超声波指纹识别，支持指纹拍照和指纹支付，4G+，VoLTE，双卡全网通，4月26日首发。～～～目前这货在其档次是性能比最高的。
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
点击可定位违规字符位置
确定要取消此次报名，退出该活动？
请输入私信内容：乐视手机1的电池怎么样?
按时间排序
乐视的超级手机1 是后置的不可拆卸式电池，电池容量 3000mAh，这个配置是现在手机的主流电池配置！ 但是正常使用的话还是会有发热！ 这个是现在智能机无法逾越的鸿沟啊！！
这个电池是3000mah的，估计能满足这手机一天的使用。
这款手机采用的是3000mAh不可拆卸式电池，保修6个月，一般可以满足一天一充的需求。
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
点击可定位违规字符位置
确定要取消此次报名，退出该活动？
请输入私信内容：小咪闹特2和乐视pro3乐视mxa2小咪5spuls那个好
按时间排序
乐视2Max和乐视pro3的性价比高！乐视pro3和米note2，米5sp大致一个性能的档次。所以按性能和性能比，乐视Pro3最值得考虑。
您可以邀请下面用户，快速获得回答
擅长领域：&&&&
在手机数码分类下共有78899个回答
擅长领域：&&&&
在手机数码分类下共有21579个回答
擅长领域：&&
在手机数码分类下共有16818个回答
擅长领域：
在手机数码分类下共有8885个回答
擅长领域：&&&&
在手机数码分类下共有7528个回答
weixin_3r654129
擅长领域：
在手机数码分类下共有6775个回答
加载更多答主
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
点击可定位违规字符位置
确定要取消此次报名，退出该活动？
请输入私信内容：&p&很多用户由于身在天朝，难得上一次youtube， 无奈网速观看即使是 流畅 分辨率的视频，也会卡的不行，也关掉不看了，自然也体会不到youtube的强大和好处。&/p&&p&而每当别人问我，你上ins， facebook， google用的啥VPN，我心想这在我本科的一堆西南某高校（上海交大）的计算机猥琐男面前，简直就不是事情。他们都是自己在海外搞个服务器，然后给我一个代理链接，就搞定一切了。看youtube 1080p视频轻轻松松的， 所以youtube也成为了自己每周必上的视频网站。&/p&&p&这里不得不说下，youtube这玩意的首页推荐，他娘的都是老子喜欢看的，不信你看我的首页就三类：&/p&&p&&i&&b&汽车、滑雪、篮球&/b&&/i&&/p&&figure&&img src=&https://pic1.zhimg.com/50/v2-1f84f862da930fbe0f14d52b_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&p&“中间那个bikini妹子是哪一类？”&/p&&p&西南某高校的同志们都懂的，ppp版大家都看的。&/p&&br&&p&技术上的东西说多了不好，吃瓜群众也看不懂，简单从用户角度来比较下两者的区别：&/p&&p&&b&1. 观看体验&/b&&/p&&p&&b&- 广告：&/b& 同样是为了公司生存而创收，youtube良心很多。&/p&&p&&b&youtube的插播广告大多数5s之后可以手动关掉，直接进入影片&/b&&/p&&p&优酷的是关不了的，一般是30s, 45s或者60s， 一直要忍住看着跟自己不相关的垃圾广告一直到结束。&/p&&br&&p&&b&youtube的广告是根据你的兴趣，推荐给你可能关注甚至未来产生购买的广告。比如你喜欢汽车，就不会推荐游艇给你。&/b&&/p&&p&优酷是不管的，卫生巾，电商网站，洗发水，洗衣粉，他觉得都是你喜欢的广告。&/p&&p&我不知道别人怎么样，我觉得youtube的个人广告推荐算法非常好，大多数推荐给我的广告，我是不会主动去关掉的，因为我确实是想看的，一般情况下都会看完。&/p&&p&虽然现在爱奇艺也在做“一搜百映”，但是我个人觉得效果不如youtube的广告推荐。&/p&&blockquote&&i&每一天有 60 亿个搜索请求被键入百度搜索框，2013 年，百度把搜索数据全部提供给爱奇艺做分析，发布了“&a href=&//link.zhihu.com/?target=http%3A//www.iqiyi.com/common/fe94d47a1153983.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一搜百映&/a&”精准广告技术。这套算法基于浏览记录、搜索历史等构成“用户画像”，继而在爱奇艺上展示精确的广告内容。&/i& &i&比如，你最近一个月搜索过“购车税”，打开爱奇艺就会给你展示路虎、宝马、大众、菲亚特的贴片广告。&/i& &i&2013 年爱奇艺和 PPS 合并，数据打通，爱奇艺说他们“建成中国最大视频广告投放平台”。&/i& &i&类似的广告技术产品还有几个。比如 2013 年的“&a href=&//link.zhihu.com/?target=http%3A//www.qdaily.com/articles/www.iqiyi.com/common/7.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&绿镜&/a&”，爱奇艺用大数据作为“剪辑师”，综合分析用户视频的观看数据，判断用户喜好，自动将用户最关注的素材抽离出来，生成受关注程度最高的“精华版”视频。&/i& &i&这个技术对广告主更有吸引力一点，知道了观众最喜欢节目里的哪个部分，就是“精准投放”的第一步。&/i&&/blockquote&&br&&p&&b&youtube在视频播放过程广告插播也是5s关闭的。&/b&&/p&&p&优酷在电视剧中，一定要中间插播广告，突然跳出来一个人吼一声：“买卖二手车。。。”，我去你大爷的，吓死爹了。&/p&&br&&p&&b&youtube的广告位固定，大多数是在视频前后推荐和某些固定位置。&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-d30dce57ffbf_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&blockquote&除了上面说的youtube在拓展视频内容的同时，YOUTUBE还帮助广告主根据用户喜好来吸引目标用户。YOUTUBE推出了新广告系统TRUEVIEW，只有当用户选择观看广告后，才向广告主收费。&/blockquote&&p&优酷的首页先不算，打开任意一个视频，如图中红色框。广告位想来多少来多少，真的想问一下，我这视频还没有开始看，就来了5个广告，你把观众的脑力接收效率考虑的多高？&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-cb7d22533dfec678f283ce8_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&p&提起来节操，在看看youtube的流程：&/p&&p&请注意下图右上角的广告位：&/p&&br&&figure&&img src=&https://pic2.zhimg.com/50/v2-356b1cd492ff9f70b6de9d_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&p&点了右上角的关闭按钮之后：&/p&&figure&&img src=&https://pic1.zhimg.com/50/v2-a9d184d0fe16f69af74647_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/50/v2-a9d184d0fe16f69af74647_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/50/v2-5c4ac587bdfc68c9cac048cc0c75dac9_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&中国视频网站都有个不成文的规定：&b& 想要视频前不看广告，那就付费买VIP会员&/b&。简单来说就是一个套路： 就是先拿恶心的广告恶心你，你实在忍无可忍，就付费了。&/p&&p&所以其实之前很长一段时间，国内视频网站的有一部分付费用户是真正被强奸付费的，而不是自愿付费。现在稍微好一点了，比如腾讯买下了NBA的转播权，我是愿意为了看NBA而付费，这也算是良心收费。&/p&&br&&br&&p&&b&- 画质&/b&&/p&&p&&b&youtube的：&/b&&/p&&p&除了下面的，还有4K、5K、8K、3D、360度全景视频&/p&&figure&&img src=&https://pic4.zhimg.com/50/v2-0be9aaf57ced95ff626771_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&p&&a href=&https://www.zhihu.com/question/& class=&internal&&在YouTube观看4K、5K、8K、3D、360度全景视频是一种什么样的体验？ - X 是种怎样的体验 - 知乎&/a&&/p&&br&&p&优酷的：&/p&&figure&&img src=&https://pic4.zhimg.com/50/v2-75d1fae2bd9f5ec351fc31db46b56ac1_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&哦，对了，看到了这个小皇冠么？1080p在优酷是要收费的。youtube任何画质都是免费的。良心吧。&/p&&p&而且youtube的自动画质，保持不卡顿的效果要比优酷好很多。&/p&&p&视频播放过程中，youtube是支持改变播放速度的：&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-0c5ccba25e_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&&b&- 字幕&/b&&/p&&p&youtube对于没有字幕的上传视频，是可以支持播放的时候实时打印字幕在屏幕底部，而且英文的效果非常好。基本可以作为学习英语使用。其他语言只试过 中文，中文的自动字幕也很不错，但是有些地方语言效果一般：&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-7fbd2aaec38ffeb54ca32fd_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-ce292fe3a1edb54ec7db0c_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&&b&2. 视频资源&/b&&/p&&p&具体视频多少我找了一下没有找到16年两个网站的视频总量，其实这个数据大家也都知道肯定是youtube多，但是多了多少我心里也不清楚。但是其实关键还是看质量，同样是UGC视频内容生产平台，还是要看其中产生的自媒体人，也就是“网红”，“网红短片”或者“网红剧”有多少。&/p&&p&这里提供一下 好奇心日报 在15年4月发布的一个youtube文章：&/p&&blockquote&YouTube 成为 Justin Bieber 起步的地方；鸟叔一个视频可以被人点开超过 20 亿次；通过游戏视频，没有一分钱市场预算的独立游戏 Minecraft 成为一笔每年上亿美元的生意并最终以 25 亿美元卖给微软。甚至仅仅是一个人在家对着镜头玩游戏、拆迪士尼玩具，在 YouTube 上都能让一个团队带来每年数百万甚至上千万美元的收入。&/blockquote&&br&&figure&&img src=&https://pic1.zhimg.com/50/v2-8e21fb574bc41bfd91a9f6c326f05c99_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&blockquote&伴随着互联网数据传输成本的降低、2007 年随着 iPhone 进入手机，YouTube 以及随后诞生的 Netflix、Twitch、优酷、爱奇艺、斗鱼等不同类型的视频网站已经牢牢嵌入了每个人的生活。早在 2013 年，全球超过一半的互联网下行流量来自于视频
从 2007 年起，YouTube 在 75 个国家和地区上线了本地页面，支持 61 种语言——就连维基百科上拥有 10 万以上条目的语言其实也不过 50 种。同时 YouTube 上平均每位视频上传者收获的点击量中大约有 60% 都来自国外。更重要的是，十年间 YouTube 上的一举一动都在影响着全球无数用户和产业。
&b&YouTube 改造了好莱坞&/b&
曾经的 HBO 高管、好莱坞资深人士 Robert Kyncl 从 Netflix 跳槽来到 YouTube，他在 2011 年 10 月宣布 YouTube 将投资 1 亿美元打造 100 个原创频道。最后这项计划不仅如期实现，规模还扩展成了 2 亿美元、130 个原创频道。
刚在《Fred》大电影上大获成功的 Brian Robbins 投入这个计划，在 2012 年 7 月创建了自己的 YouTube 频道 Awesomeness TV，只花了一个月就有 10 万人订阅，而这个数量本是他们一年的奋斗目标。
这让一大批好莱坞从业人员转移阵地，到 YouTube 上“淘金”。2012 年 9 月，当时人气一般的喜剧明星 Turning Silverman 和几位演员一起在 YouTube 资助下创建喜剧频道 Jash 大获成功。
而主演每部片子可以获得上千万分账的 Ben Stiller 也早在 2009 年便开始通过 YouTube 建立数字世界影响力并组织拍摄了大获成功的网络剧 Burning Love。&/blockquote&&figure&&img src=&https://pic1.zhimg.com/50/v2-7135dea732bccc51a4f0_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&blockquote&与此同时，一批在 YouTube 走红的明星也开始进入好莱坞，其中 Justin Bieber 便是其中典型。Bieber 的视频在 YouTube 走红后被经纪人所发掘，今天已经成为年收入超过 8000 万美元的巨星。逐渐地，YouTube 拥有了一批能和好莱坞分庭抗礼的当红明星，甚至在一些青少年眼里 YouTube 还略胜一筹。
《名利场》杂志去年做的调查中有一半“最受青少年欢迎的 20 位明星”来自 YouTube，其中前五席悉数被 YouTube 明星把持。甚至于一贯走亲民路线的美国总统奥巴马，也在今年 1 月来 YouTube 接受了三位网络红人联合访谈。&/blockquote&&br&&figure&&img src=&https://pic4.zhimg.com/50/v2-a6ddde6cfaabec9c5a4aa2f_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/50/v2-9a873a75df57e62e5b86ec1dadc1246c_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&而优酷上有多少这样的明星。。。。我知道的就是张昕宇和梁红 ，反而爱奇艺上的一些网剧倒是有些大红大紫的。&/p&&br&&p&&b&- 智能推荐&/b&&/p&&p&除了在文章顶部我提及的首页推荐&/p&&p&youtube在你观看视频的同时会推荐相关视频&/p&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-a086dca466b2f1c8d298cd_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&在你看完之后会推荐相关视频&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-9cd51ed33fbebb7bcd21b04c86c9106b_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&往往这些推荐的内容都是不错的。
&/p&&br&&p&&b&3. 上传视频，制作视频，处理视频&/b&&/p&&p&- 网页工具更方便，更易用， 更挣钱。&/p&&p&先看看这个上传工具，其实就是个网页版的iMovie，能够完成基本的修片功能。&/p&&br&&figure&&img src=&https://pic4.zhimg.com/50/v2-9f7f9c7b7d933f5dcc44e289d8aca949_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&也可以自己在视频中制作字幕， 增加注释，改变色彩，慢镜头，插入音乐等，真的是mini版本的视频编辑器。&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-baf4a86a6c4_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&而且如果你是gopro视频，youtube后台自动检测“抖动”太厉害的话，会提示你，并且帮你优化视频，减轻抖动。这么人性化的功能，后面是多少技术程序员的辛苦工作啊：&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-eb3bd1d6d7de517bcff4798_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&- 创造商业影片app&/p&&p&而对于一些广告主来说，youtube director for business可以很轻松的帮助“小白”用户拍出一个自己的产品广告片，此app只在美国app store有下载，里面用户可以选择短视频模板，在自己拍摄的时候，模板会告诉你坐在哪个为准，距离多远，产品怎么介绍，上手非常简易。&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//www.youtube.com/yt/advertise/make-video-ads.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&youtube.com/yt/advertis&/span&&span class=&invisible&&e/make-video-ads.html&/span&&span class=&ellipsis&&&/span&&/a&&/p&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-78dabdad2e22e165d13a746_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/v2-df7ceea6f4b7cab9dc54c20d8ffce78e_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/50/v2-dab1eabc5f72_b.jpg& data-rawwidth=&0& data-rawheight=&0& class=&content_image& width=&0&&&/figure&&br&&p&比起在天朝的广告媒体公司，拍一个片子随随便便十来万人民币，这真的是中小企业的福音。&/p&&p&其实上面所有东西都是跟公司团队基因有关系的,youtube就是google的啊，那工程师都是技术大牛，这就是跟优酷相比最大的核心竞争力。&/p&&br&&p&如果说给两者打分的话，youtube如果是满分，优酷顶多算是及格6分。当然这多少跟天朝也是有关系的，毕竟中国的互联网企业 Copy 2 China的功利都十分了得，为什么都抄都不抄？&/p&&p&哦，对了，现在优酷是叫做优酷土豆，原谅我没有注意这个细节。&/p&&p&如果我总结下视频网站跟youtube的区别，那我就想说，&b&Youtube 更加自由。&/b&&/p&&p&所以，找个好的VPN或者代理服务器，赶紧体验体验youtube，之后你会发现, 原来很多微信里面病毒传播的视频，今日头条等媒体号很多文章里面的视频内容，都是你在youtube上看过的。他们都是个搬运工。&/p&&br&&br&&p&---------分割线 ------&/p&&p&问咋弄服务器的人太多了、我这里还是说下吧。&/p&&p&大家如果身边有程序员朋友、可以让他们帮忙买一个海外服务器、使用ss、代理的方式、几个人一起使用比较实惠。日本和香港的都是不错的、但价格也贵一点。&/p&&p&如果有些小型企业或者团队、20-100人、我觉得这个方案就很实惠了、虽然看起来市面上的VPN价格都不贵、但我相信买过VPN的付费用户、买的肯定是2、3家了吧、相信我、你还会因为现在买的VPN质量不好还会继续买下去。其实这东西我们也研究过、就是因为好的VPN用户一旦多起来、就容易被封IP、所以买家卖家其实都挺蛋疼。如果企业有需要的可以私信我、这里金数据弄了个表格，需要的团队可以看下： &a href=&//link.zhihu.com/?target=http%3A//jinshuju.net/f/fWTIPJ& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&jinshuju.net/f/fWTIPJ&/a& 这是他们开给企业用人数多的团队用用还不错。&/p&&p&交大出品必属精品！&/p&
很多用户由于身在天朝，难得上一次youtube， 无奈网速观看即使是 流畅 分辨率的视频，也会卡的不行，也关掉不看了，自然也体会不到youtube的强大和好处。而每当别人问我，你上ins， facebook， google用的啥VPN，我心想这在我本科的一堆西南某高校（上海交…
&p&多图渗入&/p&&br&&figure&&img src=&https://pic3.zhimg.com/50/e4a6ab57ff0b446d8d21_b.jpg& data-rawwidth=&970& data-rawheight=&647& class=&origin_image zh-lightbox-thumb& width=&970& data-original=&https://pic3.zhimg.com/50/e4a6ab57ff0b446d8d21_r.jpg&&&/figure&&p&&figure&&img src=&https://pic1.zhimg.com/50/7b4cbb32158d4bcf3da8e7e605e9727a_b.jpg& data-rawwidth=&600& data-rawheight=&327& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic1.zhimg.com/50/7b4cbb32158d4bcf3da8e7e605e9727a_r.jpg&&&/figure&（上图：之前的 Google Now）&/p&&br&&p&Material design（内部代号『量子纸』）是 Google 开发的设计语言并在 2014 年 6 月 25 日的 Google I/O 大会上推出，是基于首次在 Google Now 上面出现的『card motifs』（直译过来叫做『卡片式图案』） 扩展设计出来的。这种设计大量的增加了栅格化图层、响应式动画，以及一些赋予光影变化的变形、叠化、深度等效果。设计师 Matías Duarte 解释这种设计风格『我们不是在做真实的纸张，但是我们的虚拟设计元素却能智能的拓展和变形（大意就是各种设计元素并没有遵守拟物设计，但是却有一定的实体物理性质，可以理解为物理性质拟物）。真实物质是有物理表面和边缘的，接缝和阴影又能够揭示你触摸的是什么，Material 设计来源也就是这个道理』。Google 说他们这个设计语言思路是来源于纸和墨，所以充满了物质性。&/p&&br&&figure&&img src=&https://pic3.zhimg.com/50/64c52add97eb27001dd87_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic3.zhimg.com/50/64c52add97eb27001dd87_r.jpg&&&/figure&&p&Material design 能在 Android 2.1 到 v7 中都能使用，2009 年以后出品的所有 Android 实体设备都可以。Material design 会用 Google 一贯以来的做法，通过网页端以及移动设备产品的扩张，来逐渐扩展影响力，Google 也发行了 Application programming interfaces (APIs) 给第三方开发者去了解和把他们的应用做成这种风格。&/p&&figure&&img src=&https://pic3.zhimg.com/50/db7d82acf567c152b3dd54c_b.jpg& data-rawwidth=&696& data-rawheight=&1458& class=&origin_image zh-lightbox-thumb& width=&696& data-original=&https://pic3.zhimg.com/50/db7d82acf567c152b3dd54c_r.jpg&&&/figure&&p&在 2015 年，Material design 已经占领了大多数 Google Android 移动设备 APP 的界面了，包括 Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox, 还有所有 Google Play 旗下直属 App，以及 Chrome 浏览器和 Google Keep 外设，还包括了网页端一些应用界面，例如 Google Drive, Docs, Sheets, Slides and Inbox。&/p&&figure&&img src=&https://pic1.zhimg.com/50/8b1296ffea3_b.jpg& data-rawwidth=&736& data-rawheight=&987& class=&origin_image zh-lightbox-thumb& width=&736& data-original=&https://pic1.zhimg.com/50/8b1296ffea3_r.jpg&&&/figure&&p&Material design 的 UI 设计规范被称为『Polymer paper elements 叠纸元素』（暂且这么翻译），它包括『层叠元素库』，在浏览器中它会用一个『垫片』来显示网页端外加的 API 组件，表示它并不是该软件本身携带的控件。&/p&&p&设计详解&/p&&p&这一部分的内容是 &a href=&//link.zhihu.com/?target=http%3A//design.1sters.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Material Design&/a& 中文版的部分摘要和总结，在此表示感谢。&/p&&p&1.动画&/p&&figure&&img src=&https://pic4.zhimg.com/50/3aea6b5b6c12f8daf525cbd_b.jpg& data-rawwidth=&2380& data-rawheight=&815& class=&origin_image zh-lightbox-thumb& width=&2380& data-original=&https://pic4.zhimg.com/50/3aea6b5b6c12f8daf525cbd_r.jpg&&&/figure&&p&在真实世界里面，由于重力等有加速度存在的力场里面，物体运动速度大多数时候不是线性增加的，斜率改变也许更接近二次函数，所以在 Material 里面，动画首先要遵守『物理』，偶尔比如你要做出虚拟的上抛运动，这时候你的初速度要设定到最高才符合真实世界的规律。还有就是要考虑一下惯性，想象一下你要赋予这个物体的质量和初速度，有助于你做更好的动画。参考 &a href=&//link.zhihu.com/?target=http%3A//design.1sters.com/material_design/animation/authentic-motion.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&真实的动作 - Material Design 中文版&/a&&/p&&figure&&img src=&https://pic3.zhimg.com/50/35b1cb4752bfa4b111eb9_b.jpg& data-rawwidth=&479& data-rawheight=&541& class=&origin_image zh-lightbox-thumb& width=&479& data-original=&https://pic3.zhimg.com/50/35b1cb4752bfa4b111eb9_r.jpg&&&/figure&&p&同样的就是在真实世界里面你试着和水面互动，你会扔石头，或者用手指触摸水面，结果有不同但是效果是相近的，水面会泛起涟漪。在 Material 里面你点击设计交互元素产生的响应也应该和这个一样，产生『涟漪』，下一步也应该以你的点击的地方为中心打开一个新界面。&/p&&p&对于转场，也是类似，永远想象观众在翻书，而不是看电影那样硬切。在元素变化不大的界面切换中，想象要新进来的元素、要走出去的元素、要保留的元素都是要沿着怎样的路线和动画去走，规划出来的东西都要井然有序，即便是要加入『物理』的动画了，也不可以乱了阵脚。&/p&&figure&&img src=&https://pic3.zhimg.com/50/a955e482b85b74d828c196bcfb4a4e7b_b.jpg& data-rawwidth=&761& data-rawheight=&381& class=&origin_image zh-lightbox-thumb& width=&761& data-original=&https://pic3.zhimg.com/50/a955e482b85b74d828c196bcfb4a4e7b_r.jpg&&&/figure&&p&以上的做好了的话大体能把 UI 动画做到 90 分，最后的 10 分就是来源于细节了。但是也要保证『简单却动人』，如果复杂又违和，宁可不要。&/p&&p&2.样式&/p&&figure&&img src=&https://pic2.zhimg.com/50/a2ae3c4b060ab57a82a8a9_b.jpg& data-rawwidth=&741& data-rawheight=&264& class=&origin_image zh-lightbox-thumb& width=&741& data-original=&https://pic2.zhimg.com/50/a2ae3c4b060ab57a82a8a9_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/c001efd79cf74f40f950fbfde7476994_b.jpg& data-rawwidth=&740& data-rawheight=&458& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/c001efd79cf74f40f950fbfde7476994_r.jpg&&&/figure&&p&大胆使用鲜艳的颜色，一般情况下饱和度达到色彩图中 500 为佳。糖果色和撞色也是 Material 的一个重要特色，选好两个对比强烈的颜色，各自选取三个饱和度纬度的颜色，这样就基本上把一个画面的主要颜色都定下来了（优秀的设计需要有一个强而有力的 VI 制定守则），其中一个色系作为强调色，在关键的控件设计上起到吸引视觉重视的作用，谨慎使用。&/p&&figure&&img src=&https://pic3.zhimg.com/50/77a31b823bdb_b.jpg& data-rawwidth=&740& data-rawheight=&810& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/77a31b823bdb_r.jpg&&&/figure&&p&&figure&&img src=&https://pic2.zhimg.com/50/b58cdfb708aaf_b.jpg& data-rawwidth=&740& data-rawheight=&592& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/b58cdfb708aaf_r.jpg&&&/figure&（字号和透明度之间关系）&/p&&p&&figure&&img src=&https://pic4.zhimg.com/50/f3dc7793412bbffc0d3a355cf84afdd3_b.jpg& data-rawwidth=&740& data-rawheight=&304& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/f3dc7793412bbffc0d3a355cf84afdd3_r.jpg&&&/figure&（字号和行距关系）&/p&&p&&figure&&img src=&https://pic3.zhimg.com/50/2ee0ee6effc0f_b.jpg& data-rawwidth=&360& data-rawheight=&467& class=&content_image& width=&360&&&/figure&（行文缩进注意事项）&/p&&p&从 Android 诞生伊始，全部 Google 平台中 Roboto 就是最标准的字体，在历次改版之后 Roboto 显得更加清晰特征明显了。比例一般都是按 12、14、16、20 和34 号的字体排版缩放，层级要非常清晰明了。在 Material 的设计标准里面还有一个更加进步的规则就是不同字号颜色以及间隔和换行都需要有部分修改，以防止对比度过大而引起注意力分散。对于阅读长度，『要得到良好的阅读效果，每行应当包含60个字符左右』。&/p&&figure&&img src=&https://pic1.zhimg.com/50/c73b7fcfff36_b.jpg& data-rawwidth=&628& data-rawheight=&975& class=&origin_image zh-lightbox-thumb& width=&628& data-original=&https://pic1.zhimg.com/50/c73b7fcfff36_r.jpg&&&/figure&&p&对于图标而言，整个设计里面有相对固定的栅格规范，圆角处理和避免过于锐利的直线角，还有就是在各种场合下都有很强的大小和颜色适配性。&/p&&p&&figure&&img src=&https://pic3.zhimg.com/50/7f215ffa3ac2eee8aef27de_b.jpg& data-rawwidth=&740& data-rawheight=&421& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/7f215ffa3ac2eee8aef27de_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/36db21d5ef18e63a0d352bb_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&（这种阴影是不可取的）&/p&&p&作为一套 UI，也要经常处理图像和设计元素的搭配。虽然图像本身的质量永远是处于不可控制的范畴，在可控的范围内（比如 APP 背景、登陆界面、专辑缩略图等），增强和周围图层及控件的关联度、巧妙使用遮罩都能让设计更具『人性化』。插画和摄影常常混搭，能加强戏剧性，但是非常避免只有照片甚至是只用图片库的图片。还有就是像素要满篇幅，留白处理会让其他设计和图片格格不入。分辨率也要保持足够大，不要随意添加滤镜，甚至不要加很强的灰色半透明，这些都是降低画面质感的行为。&/p&&p&3.图层&/p&&figure&&img src=&https://pic2.zhimg.com/50/8d2aed2beea_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/8d2aed2beea_r.jpg&&&/figure&&p&由于整个设计的本质是想模仿『纸墨』，所以在 Material Design 处处要遵守的就是印刷时代的栅格化设计，这样能最大化带来『纸质』体验（虽然我觉得这只是针对欧美印刷业）。图层之间有非常明确的相互关系，同级的『纸张』只能相互『推动』（并且永远保持一个『接缝』），不能忽然窜到别的层级的纸张上。另外『纸张』都是有弹性的，但是却有一定的阈值，设计的时候也同时考虑之前说的物理学原理。&/p&&figure&&img src=&https://pic4.zhimg.com/50/ff335d2b08cfc_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/ff335d2b08cfc_r.jpg&&&/figure&&p&在 Material Design 中所有衬线都是有意义的不可以滥用，只是为了使得图层互相之间的逻辑非常严密。于是在有些界面不再有标题栏的时候，这些衬线就变成了非常重要的图层要素。&/p&&figure&&img src=&https://pic4.zhimg.com/50/988cac4cc3ec_b.jpg& data-rawwidth=&740& data-rawheight=&296& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/988cac4cc3ec_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/41eed7a09f697cc6d657ad5cdd600472_b.jpg& data-rawwidth=&740& data-rawheight=&631& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/41eed7a09f697cc6d657ad5cdd600472_r.jpg&&&/figure&&p&每个 APP 独立性非常严谨，互相不能互窜图层。如果有 APP 本身包含多图层，那么会有一些控件是用于连接这些图层的，那么它将会一直浮现在所有图层之上。还有一些守则，比如系统的提示永远在图层最上面，这也是所谓的『深度』效果了，所有图层都有它在 3D 上的『深度』，在 Z 轴上有自己的位置，而每个图层上它们都有他们的阴影来暗示它们距离最下面的 Z 平面有多高（虽然我觉得有时候这个处理方法有点太过头了，尤其层高高的时候阴影简直吓人）。&/p&&figure&&img src=&https://pic2.zhimg.com/50/e3f7cb15f9b0f93c61f7fa_b.jpg& data-rawwidth=&360& data-rawheight=&401& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/0c8aa11e_b.jpg& data-rawwidth=&1120& data-rawheight=&437& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic1.zhimg.com/50/0c8aa11e_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/87db27e20f34b21efb5a02240d50bff6_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&关于各种元素之间的间隙尺寸，Material Design 都有非常成熟的尺寸规定，水平和垂直部分都有。而所有这些被定死的尺寸以外，都是由内容和留白来占据的，这就是它灵活处理的部分了。即使在平板和 PC 上，也是同样的处理法则。遇到棘手的尺寸，就用倍数法则：&/p&&figure&&img src=&https://pic4.zhimg.com/50/92b6a24f952e5c263dd4_b.jpg& data-rawwidth=&719& data-rawheight=&716& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic4.zhimg.com/50/92b6a24f952e5c263dd4_r.jpg&&&/figure&这里要说到更深层次的东西，关于交互逻辑了。其实 UI 页面之间有三种联系：&ol&&li&一个屏幕完成所有事情，如计算器 App；&/li&&li&同一个层页面但是不同 Bar 切换，比如拨号界面直接推拉出收藏夹这些；&/li&&li&复杂应用，多层页面，数据较多，比如有分类功能的购物 App，包含预览功能的文件夹。这种已经非常接近不同 App 之间的逻辑了，但是又稍微不同；&/li&&/ol&&p&这时候你不仅要考虑单个页面设计了，要考虑整体的 UI 设计以及设计过程要保持头脑清醒（这时候你更像个导演或者建筑师，纯美工级别的请跳过以下内容……），首先出来的这个页面一定是用户最想看到了。而且你要做到不要混淆视觉，如果满屏幕都是导航栏将会使得用户非常迷茫（就像以前版本的 Android 打开 App 会出来一大堆的 Bar，极其丑陋），另外 Icon 设计的辨识度、能否清晰的表达出直接访问路径的内容，都是非常重要的。如果实在太多功能，先考虑精简，然后考虑平铺，再考虑侧滑，尽量少的让用户产生多余的使用步骤（当然如果你是在做 Motion 动画，这个观点也是值得采用的）。&/p&&figure&&img src=&https://pic3.zhimg.com/50/7bd6a662ba6aed7605648_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/7bd6a662ba6aed7605648_r.jpg&&&/figure&&p&&figure&&img src=&https://pic2.zhimg.com/50/acabe7a8aa9e_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/acabe7a8aa9e_r.jpg&&&/figure&（网页端的边栏设计）&/p&&p&&figure&&img src=&https://pic4.zhimg.com/50/ebe40bd9e64e36fbf70115_b.jpg& data-rawwidth=&374& data-rawheight=&378& class=&content_image& width=&374&&&/figure&如果你的应用页面有大量同级的『纸张』，你可以加入边选栏或者侧边栏来管理这些复杂的 List，但是这是需要一点学习成本的，因为它们不是一打开就能看到。当然如果是在平板或者 PC 上看的话，可以做出一点小改变，比如工具栏可以长期在上面，而底栏未必出现。一般来说尺寸设计：（手机上）侧边导航栏宽度 = 屏幕宽度 - 应用栏高度；&/p&&p&&figure&&img src=&https://pic1.zhimg.com/50/a0fd995aa6fcd05df662_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic1.zhimg.com/50/a0fd995aa6fcd05df662_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/55ce9aa2ac920a169599c_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/55ce9aa2ac920a169599c_r.jpg&&&/figure&（在比较大的屏幕中，尽量不要频繁切换整个屏幕的界面，而是像下图示，两级页面都在一个屏幕上可以显示，这样可以使得逻辑清晰，不要让使用者迷路。）&/p&&figure&&img src=&https://pic3.zhimg.com/50/e342e41c3cf336f3efdce32c8d2b8520_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/e342e41c3cf336f3efdce32c8d2b8520_r.jpg&&&/figure&&p&&figure&&img src=&https://pic3.zhimg.com/50/d553c98af4b1123694ddb73ab640d632_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/d553c98af4b1123694ddb73ab640d632_r.jpg&&&/figure&（另一种逻辑就是信息群，不要用分割线，而是多用卡片，这样平行关系更明确。如果要加入诸如工具栏等非平行关系的结构的话，利用浮动按钮和卡片让『越界』变得明显，如上图）&/p&&p&工具栏设计未必会限制得很死，有些情况它甚至能做出很大的变动，但是基本样式以及分级是务必十分明显的：&/p&&figure&&img src=&https://pic4.zhimg.com/50/b5deed2eedbd90c07a6d7_b.jpg& data-rawwidth=&720& data-rawheight=&223& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic4.zhimg.com/50/b5deed2eedbd90c07a6d7_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/a959cbfaefbeba73e2cc_b.jpg& data-rawwidth=&725& data-rawheight=&227& class=&origin_image zh-lightbox-thumb& width=&725& data-original=&https://pic4.zhimg.com/50/a959cbfaefbeba73e2cc_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/94c547f33c2a8eb40000beddab18c97d_b.jpg& data-rawwidth=&714& data-rawheight=&274& class=&origin_image zh-lightbox-thumb& width=&714& data-original=&https://pic2.zhimg.com/50/94c547f33c2a8eb40000beddab18c97d_r.jpg&&&/figure&&p&当然，在 Material Design 里面其实这些工具栏也是有尺寸要求的，和之前的水平上的尺寸要求类似，工具栏和底栏边栏上，内容和空白可以自由去填补剩下没有硬性要求的部分：&br&&figure&&img src=&https://pic1.zhimg.com/50/504f48c01fb9c318bf2f8b43ee532a92_b.jpg& data-rawwidth=&375& data-rawheight=&326& class=&content_image& width=&375&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/a041c65d9e64cdfd138797fed97e1f80_b.jpg& data-rawwidth=&375& data-rawheight=&654& class=&content_image& width=&375&&&/figure&&/p&&p&4.组件&/p&&figure&&img src=&https://pic1.zhimg.com/50/9de5f71a84_b.jpg& data-rawwidth=&741& data-rawheight=&653& class=&origin_image zh-lightbox-thumb& width=&741& data-original=&https://pic1.zhimg.com/50/9de5f71a84_r.jpg&&&/figure&&p&在点选一个项目的时候（比如一个人的联系方式），如果这个项目能操作的项目超过了 3 项，那么就务必要用到底部动作条这种『大工程』的控件了，普通的那种两个三个按钮的对话框没办法满足。当然也是有一定的尺寸标准的：&/p&&figure&&img src=&https://pic2.zhimg.com/50/27aa356b9e9d4f97f5f9067becaa0649_b.jpg& data-rawwidth=&743& data-rawheight=&416& class=&origin_image zh-lightbox-thumb& width=&743& data-original=&https://pic2.zhimg.com/50/27aa356b9e9d4f97f5f9067becaa0649_r.jpg&&&/figure&&p&&figure&&img src=&https://pic4.zhimg.com/50/1bb38f49db3b72d047ac0c_b.jpg& data-rawwidth=&739& data-rawheight=&418& class=&origin_image zh-lightbox-thumb& width=&739& data-original=&https://pic4.zhimg.com/50/1bb38f49db3b72d047ac0c_r.jpg&&&/figure&按钮是 Material Design 里面的一个非常重要的部件，不可以把它当成纯装饰元素，当然按钮分为『圆形 Icon 式』FAB 和『有背景色 Raised /无背景色 Flat 文字的普通按钮』，虽然点击后都有涟漪效果，但是三者功能完全不一样：&/p&&figure&&img src=&https://pic4.zhimg.com/50/1e06965eabde_b.jpg& data-rawwidth=&372& data-rawheight=&651& class=&content_image& width=&372&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/e9abaeac662d9b_b.jpg& data-rawwidth=&374& data-rawheight=&654& class=&content_image& width=&374&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/caea7efdfe8fb_b.jpg& data-rawwidth=&371& data-rawheight=&652& class=&content_image& width=&371&&&/figure&&p&这三者的选用一般是基于图层高低来确定的，还记得我之前的那个图吧？&br&&figure&&img src=&https://pic4.zhimg.com/50/ee5bdfd925d61_b.jpg& data-rawwidth=&740& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/ee5bdfd925d61_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/d9fe6c5b3fde7b3d620fda6_b.jpg& data-rawwidth=&600& data-rawheight=&378& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic1.zhimg.com/50/d9fe6c5b3fde7b3d620fda6_r.jpg&&&/figure&仔细想想你需要赋予这个按钮在哪个 3D 图层、有什么功能（要准备推拉和弹出一堆同一个图层信息的就用 FAB、连续一片的卡片式或者接缝式的图层上一般就用 Raised、一堆文字对话框伴随的一般就是 Flat），然后就你知道应该用什么按钮了。另外按钮的位置也是有尺寸标准：&/p&&figure&&img src=&https://pic4.zhimg.com/50/abfd96cf1b716_b.jpg& data-rawwidth=&740& data-rawheight=&408& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/abfd96cf1b716_r.jpg&&&/figure&&p&&figure&&img src=&https://pic4.zhimg.com/50/3c421b7db60a926db936aed5892166fa_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&（这种情况只能用无背景文字按钮 Flat）&br&&br&&figure&&img src=&https://pic3.zhimg.com/50/9ee7703105bfda1fae81c41d0bab588a_b.jpg& data-rawwidth=&360& data-rawheight=&484& class=&content_image& width=&360&&&/figure&&/p&&figure&&img src=&https://pic1.zhimg.com/50/f5caf9bad7f_b.jpg& data-rawwidth=&360& data-rawheight=&484& class=&content_image& width=&360&&&/figure&&p&&figure&&img src=&https://pic4.zhimg.com/50/debb902dd805caae49052_b.jpg& data-rawwidth=&360& data-rawheight=&472& class=&content_image& width=&360&&&/figure&关于按钮的动作，在每一步上它的颜色都是不一样的，一般来说参数如下&/p&&p&Raised Dark/Dark Color &br&最小宽度: 88 dp， 高度: 36 do &br&正常状态: Color 500， 覆盖状态: Color 600， 点击状态: Color 700，&br&不可用状态: 10% #ccc&br&&/p&&p&&figure&&img src=&https://pic3.zhimg.com/50/2cca78c2b44e255ddd11b9e_b.jpg& data-rawwidth=&740& data-rawheight=&624& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/2cca78c2b44e255ddd11b9e_r.jpg&&&/figure&遇到特殊页面，按钮的界限有点模糊，形状也可以有变化，但是响应面积依然要注意；&/p&&p&&figure&&img src=&https://pic3.zhimg.com/50/3f42c8f4cb1a8e1fd502c4b0e4f22e6e_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&在 Material Design 里面的下拉菜单有一个非常重要的注意点，就是不能把之前的图层切断，所以只能在边缘部分往下面展开，如上图；&/p&&figure&&img src=&https://pic1.zhimg.com/50/e4d218b48dd8a148a6ead_b.jpg& data-rawwidth=&740& data-rawheight=&889& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic1.zhimg.com/50/e4d218b48dd8a148a6ead_r.jpg&&&/figure&&p&&figure&&img src=&https://pic2.zhimg.com/50/7c0369eeed8f4256349d_b.jpg& data-rawwidth=&740& data-rawheight=&650& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/7c0369eeed8f4256349d_r.jpg&&&/figure&下拉菜单也有几种，一种常规的就是什么都不显示，第二种就是有默认选项和下拉按钮，第三种是有默认值和下拉按钮而且还能自己编辑，他们也是有响应动作的。多种选项和下拉菜单连在一起的时候也有版式要求，如上图。&/p&&figure&&img src=&https://pic1.zhimg.com/50/74c30e03d2ca4dae99d4_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/1ab43f7ccc4ab85ded5ef002_b.jpg& data-rawwidth=&360& data-rawheight=&360& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/0ed10a121bb498d2ad9b30a94082bf7c_b.jpg& data-rawwidth=&740& data-rawheight=&376& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/0ed10a121bb498d2ad9b30a94082bf7c_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/4a782b1f71ef6e9f3f8a8f_b.jpg& data-rawwidth=&740& data-rawheight=&488& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/4a782b1f71ef6e9f3f8a8f_r.jpg&&&/figure&&p&&figure&&img src=&https://pic3.zhimg.com/50/ac7b26de9eb6c07e8a5381_b.jpg& data-rawwidth=&740& data-rawheight=&280& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/ac7b26de9eb6c07e8a5381_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/e38adda96e8a6c3671b1ade_b.jpg& data-rawwidth=&740& data-rawheight=&548& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/e38adda96e8a6c3671b1ade_r.jpg&&&/figure&和大家想象的不一样就是在 Materila 里面的卡片其实还是有小小的拟物化的，圆角和阴影是必备要素。卡片的内容类型都可以不一样，而且还能互动，例如添加评论点赞之类，但是不宜过多，表示出它的基本功能即可（控制在两项以内）。&br&&figure&&img src=&https://pic3.zhimg.com/50/4d21e188dfbb2_b.jpg& data-rawwidth=&371& data-rawheight=&652& class=&content_image& width=&371&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/d7b7dcf29ac23e14c9cc3_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&br&网格设计展示图片和文字必须简洁明了，编排禁止混乱和滥用阴影。千万不要在图片下面加入分散注意力的部件，如下：&/p&&figure&&img src=&https://pic1.zhimg.com/50/581aef9bd5c6fe4d5ea89_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/efece3e_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&在布局上，也是有一定讲究，比如：&/p&字体设计&br&&p&正文：14 sp 或 16 sp&/p&&p&标题：24 sp 或更大&/p&&p&扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距&/p&&p&移动设备上的卡片间距&/p&&p&屏幕边界与卡片间留白：8 dp&/p&&p&卡片间留白：8 dp&/p&&p&内容留白&/p&&p&16 dp&/p&&figure&&img src=&https://pic3.zhimg.com/50/de4c711cce19_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/c74f8e0c280c471f2f38a84d57c9c247_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/db133ab4acc08d5db32abad8e8fb8608_b.jpg& data-rawwidth=&747& data-rawheight=&665& class=&origin_image zh-lightbox-thumb& width=&747& data-original=&https://pic4.zhimg.com/50/db133ab4acc08d5db32abad8e8fb8608_r.jpg&&&/figure&&p&和这种卡片有点类似的就是纸片。所谓纸片就是包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息的小卡片，如上图。&/p&&p&&figure&&img src=&https://pic3.zhimg.com/50/73b61ec383f6d20abdd368_b.jpg& data-rawwidth=&421& data-rawheight=&298& class=&origin_image zh-lightbox-thumb& width=&421& data-original=&https://pic3.zhimg.com/50/73b61ec383f6d20abdd368_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/3daac8fcf8c7_b.jpg& data-rawwidth=&740& data-rawheight=&1106& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/3daac8fcf8c7_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/acbb3ab6e4c_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&这种提示框一般用于警告，偶尔用于输入 WIFI 密码之类的。之前在按钮里面有说过一下，其实和文本有点类似，也有标题和正文之类的。涉及到操作的时候，一般在固定高度的提示框里面，注意一下有滚动条时候，哪些元素是不能够和滚动条一起动的。&/p&&figure&&img src=&https://pic2.zhimg.com/50/4cd48b21dd03dd37d8e1ed_b.jpg& data-rawwidth=&740& data-rawheight=&444& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/4cd48b21dd03dd37d8e1ed_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/3f4a9ce9_b.jpg& data-rawwidth=&740& data-rawheight=&408& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/3f4a9ce9_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/b11f2ce2d1d323a9bf98a_b.jpg& data-rawwidth=&734& data-rawheight=&655& class=&origin_image zh-lightbox-thumb& width=&734& data-original=&https://pic1.zhimg.com/50/b11f2ce2d1d323a9bf98a_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/69eabfdcfe_b.jpg& data-rawwidth=&740& data-rawheight=&476& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic1.zhimg.com/50/69eabfdcfe_r.jpg&&&/figure&分割线也是 Material 组成要素。不需要每次都处理成等屏宽，尤其是比较密集的时候，需要一些缩进留出空白，另外给点文字提示也有助于信息筛选：&p&&figure&&img src=&https://pic4.zhimg.com/50/b050b4eb9788f4eec0fb13c_b.jpg& data-rawwidth=&736& data-rawheight=&654& class=&origin_image zh-lightbox-thumb& width=&736& data-original=&https://pic4.zhimg.com/50/b050b4eb9788f4eec0fb13c_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/48d7d2fe242c241a3ff0b97_b.jpg& data-rawwidth=&737& data-rawheight=&653& class=&origin_image zh-lightbox-thumb& width=&737& data-original=&https://pic1.zhimg.com/50/48d7d2fe242c241a3ff0b97_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/dfa71cc38dd8_b.jpg& data-rawwidth=&360& data-rawheight=&360& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/786b43c896dc574c0c60833d5cfd47ef_b.jpg& data-rawwidth=&360& data-rawheight=&353& class=&content_image& width=&360&&&/figure&网格一般用于存储同类内容，处理办法和卡片类似但是有点不同，比如它完全不需要拟物化的圆角和阴影。有时候你要在上面加入可用的控件和文字，那么处理方式和卡片基本一样。&/p&&figure&&img src=&https://pic4.zhimg.com/50/d860a13ea3aba9f1d5b74a9f_b.jpg& data-rawwidth=&360& data-rawheight=&744& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/b1ab1c896bfeba9abf4a454_b.jpg& data-rawwidth=&360& data-rawheight=&744& class=&content_image& width=&360&&&/figure&Material 的列表控件里面，一般有非常明显的主次之分：&figure&&img src=&https://pic2.zhimg.com/50/9ceb1adbdcce9bd512c850686eff8836_b.jpg& data-rawwidth=&386& data-rawheight=&449& class=&content_image& width=&386&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/ccff44fb8_b.jpg& data-rawwidth=&381& data-rawheight=&226& class=&content_image& width=&381&&&/figure&&p&&figure&&img src=&https://pic3.zhimg.com/50/efdab79abe53b_b.jpg& data-rawwidth=&740& data-rawheight=&378& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/efdab79abe53b_r.jpg&&&/figure&&br&每一类（比如图标）千万不要放在一起使用，比如头像和复选框，选择那个是首选哪个只是视觉辅助。比如下面这种排版，根据情况是头像重要还是选项重要，决定后，二选一：&/p&&p&&figure&&img src=&https://pic4.zhimg.com/50/c7d3ee743e68fc0bf6a2_b.jpg& data-rawwidth=&740& data-rawheight=&312& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/c7d3ee743e68fc0bf6a2_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/490ce204facd3a6e3b024a5eb5bdca63_b.jpg& data-rawwidth=&740& data-rawheight=&288& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/490ce204facd3a6e3b024a5eb5bdca63_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/3c2f012fc96ddd22bea38e3_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&遇到折叠的时候，就按照分隔线情况处理。滑动式删除这种行为可以两边滑动都做到支持：&/p&&figure&&img src=&https://pic2.zhimg.com/50/03abfd904af46dbe0c01c_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/dab3f0aec5798cac1f14157_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/b2e1c6b76fb2b5af164afe_b.jpg& data-rawwidth=&740& data-rawheight=&472& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/b2e1c6b76fb2b5af164afe_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/a68d1fdd7ae24a6f37000a6_b.jpg& data-rawwidth=&740& data-rawheight=&786& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/a68d1fdd7ae24a6f37000a6_r.jpg&&&/figure&&p&&figure&&img src=&https://pic2.zhimg.com/50/a01f382b56fa92bf6aacd70_b.jpg& data-rawwidth=&740& data-rawheight=&786& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/a01f382b56fa92bf6aacd70_r.jpg&&&/figure&菜单设计一般在靠下面或者直接在上面出现，并且顶对齐原来的选框，然后比例也保持一致。多级菜单的时候也是一样的处理。动态上，还记得之前的中心点开吧？&/p&&figure&&img src=&https://pic4.zhimg.com/50/d9f01ec200b96e51d67fcfeb22cb772d_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/09f6f9c9ae6b580fd6c3aa99bd6e35cc_b.jpg& data-rawwidth=&740& data-rawheight=&384& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic1.zhimg.com/50/09f6f9c9ae6b580fd6c3aa99bd6e35cc_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/fb5_b.jpg& data-rawwidth=&740& data-rawheight=&706& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic1.zhimg.com/50/fb5_r.jpg&&&/figure&&p&进度条有几种，包活线形的还有圆形的，以及确定的和不确定的。『要用户没有目标的白等是不道德的』&/p&&figure&&img src=&https://pic2.zhimg.com/50/7aaa7c8adcbcaf_b.jpg& data-rawwidth=&601& data-rawheight=&453& class=&origin_image zh-lightbox-thumb& width=&601& data-original=&https://pic2.zhimg.com/50/7aaa7c8adcbcaf_r.jpg&&&/figure&&p&有时候加载『实时』的消息，类似各种 SNS 的下拉刷新，需要一些比较有创意的加载方式，比如卡片底部 + 指示器；&br&&figure&&img src=&https://pic1.zhimg.com/50/dcabffc2827_b.jpg& data-rawwidth=&761& data-rawheight=&513& class=&origin_image zh-lightbox-thumb& width=&761& data-original=&https://pic1.zhimg.com/50/dcabffc2827_r.jpg&&&/figure&&/p&&p&&figure&&img src=&https://pic1.zhimg.com/50/ca229fdb94f4_b.jpg& data-rawwidth=&357& data-rawheight=&611& class=&content_image& width=&357&&&/figure&（这种加载办法比较传统）&/p&&figure&&img src=&https://pic3.zhimg.com/50/86d4f87cf006f3f574ee_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&&figure&&img src=&https://pic2.zhimg.com/50/aebfdb3e413c7671ffe9a30_b.jpg& data-rawwidth=&740& data-rawheight=&336& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/aebfdb3e413c7671ffe9a30_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/7a776dfffacf40a2c413_b.jpg& data-rawwidth=&740& data-rawheight=&336& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/7a776dfffacf40a2c413_r.jpg&&&/figure&对于一些特殊的还带有数值和和缩略图的滑块，&br&&br&&figure&&img src=&https://pic3.zhimg.com/50/dd67c9b0daaeb587c739ab_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/57be9aae666cfa31ca8b9f_b.jpg& data-rawwidth=&740& data-rawheight=&406& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/57be9aae666cfa31ca8b9f_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/10f3fab10fe40ebb1b0a6b0faa519307_b.jpg& data-rawwidth=&360& data-rawheight=&128& class=&content_image& width=&360&&&/figure&&/p&&figure&&img src=&https://pic2.zhimg.com/50/69d7386caad071e8ee3481_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&Snackbar，也可以理解为小型弹出框，屏幕上同时最多只能现实一个 Snackbar。还有一种类似的，胶囊状的提示框 Toast，不含操作也不能关闭。他们都有规定就是务必要非常简洁，不能出现过多两个控件、图标这种干扰，纯文字。也不能遮住界面元素，只能在底部出现。&/p&&p&&figure&&img src=&https://pic3.zhimg.com/50/ce3926cc9de_b.jpg& data-rawwidth=&740& data-rawheight=&344& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/ce3926cc9de_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/fe357fc9c97_b.jpg& data-rawwidth=&740& data-rawheight=&340& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/fe357fc9c97_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/768ccff39fa_b.jpg& data-rawwidth=&374& data-rawheight=&308& class=&content_image& width=&374&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/a5f16fed90bb_b.jpg& data-rawwidth=&369& data-rawheight=&292& class=&content_image& width=&369&&&/figure&在普通场合，以及有栅格排列的界面中，副标题应该如上处理。&/p&&figure&&img src=&https://pic2.zhimg.com/50/37cd35fdb2fe474a9644_b.jpg& data-rawwidth=&740& data-rawheight=&276& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/37cd35fdb2fe474a9644_r.jpg&&&/figure&&p&&figure&&img src=&https://pic3.zhimg.com/50/9bfbecd60_b.jpg& data-rawwidth=&740& data-rawheight=&276& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/9bfbecd60_r.jpg&&&/figure&关于选择框和开关，除了和之前说的一样要涟漪等物理效果和满足版式要求以外，这里涟漪一般要扩大更大的范围。&br&&figure&&img src=&https://pic3.zhimg.com/50/370e4b80f0b759e6e0fd48b5c21c8399_b.jpg& data-rawwidth=&740& data-rawheight=&544& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/370e4b80f0b759e6e0fd48b5c21c8399_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/6ff178eee92a6cd4c910a386cf2e396c_b.jpg& data-rawwidth=&385& data-rawheight=&65& class=&content_image& width=&385&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/9ba968db1cb04de476eee_b.jpg& data-rawwidth=&384& data-rawheight=&78& class=&content_image& width=&384&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/52fa1b82ebff0b85b8d3488_b.jpg& data-rawwidth=&379& data-rawheight=&322& class=&content_image& width=&379&&&/figure&&/p&&p&Tabs 是一种节省空间的做法， 并且可以便于空间分组管理。但是前提是，不能把它当成高级别的内容切换。放在地图上它就只能区别交通工具（所以它展开的起点终点会一直保持不变），但是绝对不能用来切换成设置，这样逻辑会变得很混乱：&/p&&figure&&img src=&https://pic4.zhimg.com/50/48b9ec6b47ab8c6c300a958a97f8dfaf_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&&figure&&img src=&https://pic1.zhimg.com/50/a9f6dd3cacc7_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/96c54c608ab132b814378bbb2c884f55_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&（这也是不可取的，因为 ALL 和 CAMERA 的关系会让人引起误会）&/p&&p&&figure&&img src=&https://pic3.zhimg.com/50/be4ce116e680d3d82e0e_b.jpg& data-rawwidth=&740& data-rawheight=&432& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic3.zhimg.com/50/be4ce116e680d3d82e0e_r.jpg&&&/figure&不同风格和样式的文字或者 Icon 也是不能放在同一行的 Tab 里面的。如果出现复杂的 Tabs 或者空间不够用，那可以加入滚动效果：&/p&&p&&figure&&img src=&https://pic2.zhimg.com/50/b80e7dff35fa81b59583aab65dbacf80_b.jpg& data-rawwidth=&722& data-rawheight=&239& class=&origin_image zh-lightbox-thumb& width=&722& data-original=&https://pic2.zhimg.com/50/b80e7dff35fa81b59583aab65dbacf80_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/3dcc00f8f5d30df05d0e50f_b.jpg& data-rawwidth=&718& data-rawheight=&232& class=&origin_image zh-lightbox-thumb& width=&718& data-original=&https://pic4.zhimg.com/50/3dcc00f8f5d30df05d0e50f_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/27adf3bac7f_b.jpg& data-rawwidth=&2348& data-rawheight=&583& class=&origin_image zh-lightbox-thumb& width=&2348& data-original=&https://pic2.zhimg.com/50/27adf3bac7f_r.jpg&&&/figure&至于动画，参考之前的涟漪。&/p&&p&文本框基本没啥说的，就是一些样式而已。倒是在 Material Design 里面，出现了『隐藏』的小标志，你可以点击然后回到字符开头。这个很创新：&/p&&figure&&img src=&https://pic2.zhimg.com/50/dd1c39d9df2_b.jpg& data-rawwidth=&740& data-rawheight=&224& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic2.zhimg.com/50/dd1c39d9df2_r.jpg&&&/figure&&p&提示的颜色在字数还有不同剩余的时候也有提示：&br&&figure&&img src=&https://pic4.zhimg.com/50/c257a250bcb13e2fd7dea_b.jpg& data-rawwidth=&740& data-rawheight=&608& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic4.zhimg.com/50/c257a250bcb13e2fd7dea_r.jpg&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/9ed3411eaaad61e30118cc_b.jpg& data-rawwidth=&360& data-rawheight=&240& class=&content_image& width=&360&&&/figure&&/p&&p&&figure&&img src=&https://pic4.zhimg.com/50/f3c2e5b5eed138e6713fde_b.jpg& data-rawwidth=&360& data-rawheight=&388& class=&content_image& width=&360&&&/figure&工具提示只需要文字和必要信息即可，框也不需要多余的箭头。&br&&/p&&p&5.部分交互模式&/p&&figure&&img src=&https://pic1.zhimg.com/50/acdc767bdc94f_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&&figure&&img src=&https://pic1.zhimg.com/50/544bd21f9aa_b.jpg& data-rawwidth=&316& data-rawheight=&141& class=&content_image& width=&316&&&/figure&选取工具：在选取文字后，弹出来的工具框必须全部大写。&/p&&p&手势是智能手机交互的最精髓，可以分为两大类，触发动作（比如轻触点击）和触发行为（比如双击放大、拖曳）。这部分没有什么设计要素要讲，基本上都是交互要素。&/p&&p&关于圆形按钮 FAB 一直都是这个 Material 经常被人设计时候玩坏的点。除了同一个界面里面不要出现多个圆形按钮以外，就是种类也不能混淆。&/p&&p&&figure&&img src=&https://pic2.zhimg.com/50/863f96f009d632db67d81ab74cd1cbcc_b.jpg& data-rawwidth=&360& data-rawheight=&436& class=&content_image& width=&360&&&/figure&这种就是典型不同类的搭配会让人很不舒服。&/p&&p&&figure&&img src=&https://pic1.zhimg.com/50/b4583e5ded70edac0e7f2be8e41f8d3b_b.jpg& data-rawwidth=&740& data-rawheight=&374& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic1.zhimg.com/50/b4583e5ded70edac0e7f2be8e41f8d3b_r.jpg&&&/figure&另外，有歧义的，有破坏性（比如剪切删除禁止之类）的 Icon 不适合做圆形按钮。还有始终要用圆形，禁止其他形状。也严禁过于拟物化：&/p&&p&&figure&&img src=&https://pic4.zhimg.com/50/b76ca2217eea32a3ddd4a_b.jpg& data-rawwidth=&360& data-rawheight=&256& class=&content_image& width=&360&&&/figure&（无比滑稽的设计）&/p&&p&而且它的位置通常在接壤接缝处，不能孤魂野鬼的出现或者被干扰的状态下出现：&/p&&figure&&img src=&https://pic4.zhimg.com/50/0d97bfc7e80_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&&figure&&img src=&https://pic3.zhimg.com/50/455bc9ad945a_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&关于设置，一般都会放在每个 App 中的工具栏中，而比较少使用『集中』在设置 App 中。还有一个容易经常被人混淆的就是什么叫设置？&/p&&ul&&li&这确实是一个用户偏好吗？信息和操作不是一个用户偏好。如果不是用户偏好，就不要把它当做一个设置。如果它是应用的静态信息（比如版本号、服务条款、开源证书），将它组织到一个帮助页面里。如果它是一个操作（比如刷新、切换账号），在你的应用的主要流程中为它找一个合适的位置。&/li&&li&这个选项经常被用户更改吗？用户每次访问这个选项要多次操作会觉得负担重吗？如果是这样，不要把它作为一个设置。可以通过把它放在工具栏或者更多操作（action overflow）中，让这个控制更容易使用。&/li&&li&只有少于20%的用户改变这个设置的值吗？如果是这样，不要将它作为一个设置。不管是新的还是本来就有的设置，都应该问这些同样的问题。&/li&&li&对于已经存在的设置，最后一个问题应该多考虑一些：如果这个设置项被移除了，这会对那些不再能改变这一设置项的少数用户造成危害吗？如果会，或者你不清楚，那么合适的做法是将它作为一个设置项保留。&/li&&/ul&&p&其实即便你只是个做视觉的，也务必要注意这个问题，因为直接影响用户体验。&/p&&figure&&img src=&https://pic2.zhimg.com/50/593eca7b51c85c8e6efca_b.jpg& data-rawwidth=&360& data-rawheight=&600& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/cb709bdf1e15018a7aff3c8255bee44a_b.jpg& data-rawwidth=&360& data-rawheight=&600& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/c09a4a64fec369e23c2ccba84ab959df_b.jpg& data-rawwidth=&360& data-rawheight=&600& class=&content_image& width=&360&&&/figure&图片的载入也有一些小细节值得考虑，其实可以从下面三个维度加载：（与视觉设计关系不大，暂且不详谈）&figure&&img src=&https://pic1.zhimg.com/50/167ad2d4dadbc_b.jpg& data-rawwidth=&740& data-rawheight=&362& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&https://pic1.zhimg.com/50/167ad2d4dadbc_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/e8d8cdb5f00948_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&&figure&&img src=&https://pic2.zhimg.com/50/d88dce7fe7b7b_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&一般来说搜索列出历史搜索、自动补全和附带语音功能能让搜索体验更美好。而开始输入后也要及时改变控件，比如『清除文本』这些。以上的界面为『持续性搜索』，下面这种叫做『可拓展搜索』（你可以理解为：本来主业是工具栏，偶尔客串当搜索框）。&/p&&figure&&img src=&https://pic1.zhimg.com/50/7dfabe2af2ed56ed6d759a861fec8728_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/9b22a5db827a0b9e81f96_b.jpg& data-rawwidth=&360& data-rawheight=&640& class=&content_image& width=&360&&&/figure&&p&6.可达性 | 普适性&/p&一个产品,如果对于任何人（无论能力）而言，都是非常容易掌握、理解并可以用之来完成他们的目标的话，那么这个产品就是『可达』的。其实这个再通俗说，比如你的用户是有身体机能障碍的，请问你如何改变设计？&p&当然更多时候这一点更像是如何引导视觉走向，降低识别的错误（比方从像素大小和对比度以及 ICON 设计入手），还有就是减少学习成本。&/p&
多图渗入 （上图：之前的 Google Now） Material design（内部代号『量子纸』）是 Google 开发的设计语言并在 2014 年 6 月 25 日的 Google I/O 大会上推出，是基于首次在 Google Now 上面出现的『card motifs』（直译过来叫做『卡片式图案』） 扩展设计出…
我先说说在我手上折腾过的机子（智能机）（平板不算）：&i&索爱ST17i htcG7 华为8813q 索尼M35c 酷派电信绑定一台破手机5832 华为P6 华为6P 魅蓝note&/i&&br&在我手上玩过（折腾过）至少一天的：&i&索爱Lt18 小米1 小米2S 小米3 小米note顶配 魅族MX4 htcM8 lgG2索尼L36h IP4S IP5 IP5c IP5S IP6 （IP6P没有怎么破T-T）&/i&&br&&i&摸过 看过真机的···太多了不一一列举（主要是因为我有个爱折腾的心和比较厚的脸 总是尽己所能借来折腾）&br&&/i&（PS：装下逼才能显得我比较有发言权）&br&自我介绍一下 &b&索尼脑残粉转苹果粉（没脑残）转锤子粉（没脑残）&/b&&br&&b&我说的是综合 包括销量质量实力技术创新系统等等等总的来说 有吹有黑&br&&/b&&br&（额 穷人一个 一台水果机都没折腾过 一台三星机都没折腾过···）&br&好了 主要是看到各个平台下的各种黑来黑去吹来吹去···感觉受不了 我也想说点什么鬼&br&&br&好吧 先从水果机（好像这个不是国产吧 这是个对比）说起 额···&br&作为一个曾经的索尼脑残粉 我想说的是 帮主（注意 是帮主）的好多理念是抄（不对应该是借鉴并超越了）索尼的 水果机的优势在于 IP4一机统天下 IOS的单独适配 水果各平台的资料转移便捷 水果机知识产权保护较好（包括APP还有音乐书籍等等） 再加上外观简洁大气（PS：这很对我胃口） 大概就这些&br&&br&个人认为 小米一直渣但是懂屌丝现在在转型做智能家居 华为学小米财大气粗技术有底蕴现在的确国内第一 魅族一直好就是没钱推（没钱指跟阿里联手之前） 锤子良心想做苹果第二就是老罗嘴欠偏执外加国人尿性&br&（PS：1L说的除了黑锤子的之外我还是挺赞同的）&br&&br&···让我去泡个面 复习司考的人伤不起···T-T&br&&br&好的 继续 好吧 说我是魅族吹
那麻烦看下上面黑字（特意强调了一下）&br&那我先说魅族 M8手机多牛掰 自己百度M8的历史 懂什么叫底蕴吗 现在在这里逼逼的知道M8的历史地位吗（历史地位这个词不是说说就历史地位了） 我不多说 魅蓝翻身仗+抱了阿里大腿 可以算了国产三强了（不然你说谁是国产第三？）&br&当年三国以魏的实力是100来算 蜀只有35-40（别他妈拿三国演义说事 就是演义而已）也是三分天下好吧？&br&印象中MIUI还没有出的时候魅族就已经在做手机了（那时候HTC还是多普达
安卓还是刚刚起步没什么人知道 诺基亚还是塞班 索尼那时候还没收购爱立信业务还叫索爱）（PS：估计那时候很多魅黑用的还是跑马灯大喇叭 哈哈哈）&br&综上 魅族可以排三强 （我再多嘴一句 小米在华为还没起来的时候一直都是视魅族为对手）&br&可是魅蓝note2 魅蓝note跟MX4+ MX4的历史惊人相似 先出了一个不错的机子 然后忽然发现这里要改进（CPU+按键 note2是换了全网通CPU还有Mback键 MX4+是换了三星CPU加指纹识别）妈蛋 每次都是来个微调升级 烦不烦 为什么全面升级（或许是为了月月有惊喜这句话吧）&br&魅族之前是不能算三强是因为产能跟不上 魅族实体店都不能正常出货（魅族实体店算开得早开得久了）抱上阿里大腿就产能跟上了 很好的佐证是MX5需要抢吗（阿里就是一直想找个合适的友商推广阿里云OS 魅族之前就是缺钱还有缺推广）&br&底蕴+阿里大腿+Flyme（个人觉得是国内优化最好的UI可能是我用过的UI算少吧其实也算底蕴之一）&br&这里有个问题三楼评论很好的描述了我对魅族的看法（虽然我唯一魅族手机是魅蓝note给女朋友用的~~~_~~~）&a href=&http://www.zhihu.com/question/& class=&internal&&如何评价魅族MX4和锤子手机？ - Android&/a&（3L）&br&&br&题外话 阿里云OS不错 阿里云OS不是基于安卓开发的UI 是基于lunix开发的新系统 简单说是安卓的兄弟 不是安卓儿子&br&&br&我这人EQ低 不太会说话 要是那你说的冲一下 你们看我不爽 来口交（yao）我啊 来口交（yao）我啊 来口交（yao）我啊&br&&br&好了 到vivo（oppo）走的是CCP路线 农村包围城市 机海战术 存了钱 oppofind开始旗舰 一开始走的妹纸路线（最鄙视坑妹纸赚钱的东西 不论手机还是鞋子 虽然我干过但是妹纸真他妈逼好坑 PS：我说的是卖鞋子 不是吃软饭谢谢） 能算三强？&br&就像一个跑马灯大喇叭机海战术吃软饭起家的品牌 有内涵？&br&不过不能否认oppo和魅族一样 MP3起家的 音质一流 这个不能否认 但是别的···我就见多远跑多远 恶心 对国产手机发展有过贡献？纯圈钱的（不过不能否认能圈钱也是也是一各牛逼的能力 至少我不行）&br&不对 请了我小李子来拍广告也是叼叼哒 oppo战略眼光很好啊 也是成功的 跟小米类似但是起家（积累方式不同发展方向不同） 挺适合中国国情的 你看过多少人黑oppo的吗？不过我算半个&br&不过黑也是一种宣传 至少让别人听过这个品牌这个产品&br&oppo vivo没用过只能说这么多 真的鄙视CCP战略 在小地方的时候一天到晚都看到个oppo大logo很烦的 而且机海战术真的不喜欢&br&&br&能不能让我写完···我是一边复习一边写···慢&br&&br&然后继续 我想八一八乐视 但是真的不了解 这个空着&br&&br&华为 有钱啊 有钱砸宣传啊 华为本来是做通信的 这个大家都知道吧 3G 4G 现在5G好像也在测试ing了 华为也舍得砸钱做技术啊 根本就是冲着三星苹果去的（前两年说这句话还有人很不屑的说 就华为？就国产手机？原话 假的剁屌）华为一开始也是机海战术 除了8813系列之外那时候还真没太多出彩的机子&br&然后华为的UI各种慢各种坑 一开始我是用MIUI EMUI3.0才换回了EMUI（不得不说一句MIUI5之前 国内UI最高水准我觉得只有MIUI）现在我还在苦逼的等EMUI3.1版本更新 我也是被华为耍的猴&br&据说华为很多水军 这个我真不清楚 我很少看评论 因为都是黑来黑去不忍直视&br&华为的特点是信号好 上个星期去泡温泉 IP5S IP6都没有4G信号 我大华为6P居然4G妥妥的 都是移动卡 而且我的卡还是外地卡（虽然这样说没什么卵用）···还有一台SONY L36h4G信号时有时无&br&海思的CPU也不错 够用 但是还没到可以跟高通比的水平 比MTK好一点吧 三星猎户座应该能掰一掰 不过海思的祖传GPU也是醉了 用IP6P对比过华为6P 色彩完全不是一个级别的（抛开屏幕来说都不止）···&br&华为从6P开始翻身 原来国产机也可以这么好看啊（虽然还是在严重的抄袭IP5）（说来惭愧 我是在P7出前几个星期才撸的P6 主要还是移动那个清货套餐很划算 话费多···）然后MATE7 再来荣耀6 4X 6P 智能手环风的时候也出了个B1 B2 不错嘛 从机海战术慢慢向旗舰机转移&br&顺带吐槽一下6P双摄像头 一开始的时候对焦奇慢 现在慢慢优化好很多了 真的可以手机当单反使用 一开始说只发挥30% 我觉得顶多10% 现在还不行 还得优化&br&就是华为特点嘛 硬件杠杠的 软件就是渣 这也是安卓机与IOS水果机的区别所在（这个后面或者另外讲） 适配跟不上 就像你在买个2、300平米的房子毛坯房装修随便搞两下就住了 跟80-120平米超精装修配套齐全的房子 住的谁舒服？&br&不过华为已经很努力了 从EMUI3.0就能看出来了 适合国情嘛（国产手机最大有点就是UI ROM OS 什么鬼的优化做得好 真心好 放出去有得比 虽然很多功能都是抄别人的···但是优化真心青出于蓝）（最简单 EMUI3.1 据说很屌很大亮点分屏功能 我在三星S3还是S4就见别人用过了···0.0）&br&and 小米现在开始走国外市场了 华为早都做到了 媒体吹吹吹 有什么gui好吹的 不然华为全球出货量第三怎么来的 真的完全是靠是国内走的量？ 时代广场放6P广告就挺霸气的&br&&br&题外话 MTK X10 没有小米吹得那么神 也没印象中那么次 不然红米NOTE2哪敢强调自己CPU用的是MTK X10 找喷么？ 又不是不知道中国喷子多&br&再说一个连锁反应 三星高端机不用高通了 华为几乎就不用高通 苹果早都A678了 HTC SONY MOTO LG出货量不大（CPU就是看出货量 你一台手机一个CPU 我管你手机卖多少钱 你先把CPU钱给了就行）高通高端CPU市场份额减小 他要干嘛 肯定是干中低端的MTK MTK能干嘛 傍着小米赶紧把品牌形象竖立起来 等小米出自家CPU之前走一步算一步&br&&br&&br&我在看发布会 挤都挤不进去 看相声的人这么多···&br&看完相声 由粉转黑转路人又转粉···决定掏钱买坚果玩玩了···然后卡着进不去···进了···进去了下不了单···没了···&br&今晚只能