0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

真正全面的全面屏系统是怎么做出来的?

小米公司 来源:未知 作者:李倩 2018-07-05 14:29 次阅读

在MIUI10的内测反馈中,设计上的耳目一新是众口称赞的部分。近日,MIUI设计总监Gary和几位核心设计师一起接受了我们的采访,开诚布公地介绍了MIUI10设计背后的故事。

MIUI设计团队

这次的采访我们聊得很细,细到某一个交互的设计思路的变迁,以及为什么最终是以那种方式呈现在MIUI10之上。我相信,无论你是对设计还是对手机系统存在好奇,一定都可以从这次访谈里得到一些有益的启发。因为我们没聊虚的。

① 彻底干掉虚拟键的全面屏手势是不是太激进了?

虚拟键不该存在

是不是太激进我们还是根据用户反馈来判断,这套手势因为没有任何虚拟键的提示,刚开始确实需要一两分钟来学习,但大部分的用户反馈是:用了就回不去了。目前从客观上来讲,安卓手机里的全面屏手势,MIUI确实是最好用的,不是我们自己说,而是从各种用户反馈、包括微博上很多专业数码博主的反馈得来的结论,很多人在主动地说这件事。

但是在手势的设计上,我们是踩过很多坑的。

我们尝试过很多版本的全面屏手势,最初还没有大胆到想干掉所有虚拟键,而是想在虚拟键上做文章。开始我们觉得那个区域很多时候3个button可能用不上,比如看书的时候,你可能只需要一个返回键,所以我们考虑的是在某些特定的应用场景里把一些用不到的虚拟键收起来,这是做减法,减法做完之后,原来虚拟键的位置就空出来了,我们觉得这个空间是浪费的,又在想应该怎么利用起来,这是早期一个很复杂的思路。

早期带横杆虚拟键的产品

后来我们又想是不是可以把3个键整合成一个虚拟键,当初做了一个Demo,把3个键集合成一个横杆,那个时候还没有看到iPhone的模型,在iOS的全面屏手势出来之前,我们就做了一个横杆子,其实是受Palm的启发,这根杆子很早之前Palm就有了,苹果可能也是受Palm启发。我们设计的是在那个杆子上横滑返回,然后上滑回桌面,很接近苹果目前的处理方式。但最终还是把这个设计给放弃了,去掉的原因是:提示杆一开始是有比较好的引导操作作用,但一段时间后,用户就不需要了,另外就是视觉感官上横杆并不好看,工业设计上好不容易才能把手机下巴缩短几毫米,你一根横杆又全给它加回来了,这其实背离了“全面屏”的初衷,在设计上是一种不得已而为之的妥协。

否定横杆之后,我们才真正全心考虑干掉所有虚拟键的方案。但没有虚拟键,就对我们的交互设计提出了很高的要求,首先,这个手势的出发点一定得非常符合直觉,所以不管是返回上一级菜单也好,回到桌面也好,这必须是两个最基础的操作(横滑、上滑),在这两个基础操作上略做停顿,我们就可以进入应用间的快切和多任务管理,我们用一种非常轻的设计把它附着在两个基础交互上。彻底干掉虚拟键这件事最早我们没有太大的勇气去做,最后做出来反倒更贴近用户操作手机的直觉,有一种柳暗花明的感觉。

简洁易用的MIUI全面屏手势

② MIUI10的整体视觉设计遵循了什么思路?

为全面屏而重新设计

在天气、日历、安全中心等等MIUI10的各个角落里,其实都把原来分段式的画面结构做了一个全面屏化的设计,让页面不要有很强的割裂感。让内容直接浮在屏幕上,用户第一时间得到信息,去掉干扰元素。

在非全面屏时代,手机有上下两个比较大的黑色边框,在视觉上天然是分段式的,之前屏幕内的多色块设计其实是对应了手机外观的这种“分段”,它还是和谐的,但原样搬到全面屏手机上,就显得是把一整块完整的屏幕生生分割成了几段。

另外就是原来有一些插画类型的风格和表达手法,想让整个画面有一些亲和力。但是因为我们的用户覆盖面很大,两三亿用户,会有一些年龄层的用户觉得原先插画形式有些稚嫩感。所以我们觉得到10这一代,整个系统应该更成熟、更普适一些,我们更倾向于做一个对任何人来说都很舒服的视觉设计。

③ 这次整体视觉风格有比较大的变动,有没有什么地方特别花费精力的?

举个特别细节的例子。MIUI10的时钟,有一部分用户会有疑问:在MIUI10里,可见的大多数页面是亮色,为什么进入时钟时钟却是黑色的?我们其实也在白色和黑色反复了很多次,调研也做了很多次。最终我们认为更重要的是时钟的使用场景问题,比如说你晚上在睡觉前拿起手机定个闹钟,在夜晚或者室内,从手机桌面进来打开时钟,如果进入一个很亮的页面,它即便是好看的,也可能会刺眼。所以我们还是选择了黑色,当然那个对比度到现在还在调整,我们想把视觉上的美观和使用的舒服统一进来。

④ MIUI10的自然音效系统是发布会上的一个惊喜,你们为什么会想到去做音效?

永不重复的MIUI10通知音效

我明白你这个问题的意思,大部分人的手机是长期静音的,音效这个东西,好像已经被完全忽略了。但是我们觉得,哪怕只有1%的用户打开了手机铃声,他也应该感受到悦耳而不是打扰和腻烦。如果我没记错的话,我们是手机厂商里第一个针对音效做系统性设计和优化的,我们从“百听不厌”的自然系音效出发,和得过格莱美奖的顶尖音乐人合作,还针对手机音腔的特性对音效做了特别的优化。

发布会上洪锋把自然音效系统作为一个彩蛋来讲,这是我们送给小米手机用户的一个礼物,是让我们骄傲的产品。我不确定有多少用户会发现这个产品,有些人可能因为长期静音他没有机会接触到这个新设计,但它是一个能带给人惊喜和温暖的东西。

⑤ MIUI的设计理念是什么?

有些人可能会觉得设计是一个偏感性的、依赖审美的的东西,但是对于一个好的系统设计,我会从视觉、动效、交互、字体、音效,五个维度的去衡量它的完善程度。

我们用一个人来做类比。视觉,就是感官层面的,比如说你见到一个人会说:这个人很帅;第二就是交互层面的整体逻辑,就好比你跟他说话,发现他的脑子清楚;第三就是整个动效的层面,这个人的肢体语言很优雅;还有字体,我们是从MIUI8的时候就开始做了,为了让大家有更好的阅读体验,让人觉得你这个人很有涵养,这已经深入到非常细节的层面了;最后,我们加了一个声音的系统,就是你说话的时候,声音还要好听。MIUI在设计方面一直是往多个方面进化,我们并不满足于做出某个漂亮的页面或者交互,而是追求整个体验层面的饱满。

做设计过程中,我们可能会尝试各种各样的方案,也有灵光乍现的时刻,但我们会从多个维度完整地去考量这个设计成果,避免做出一些只是“看上去很美”的自嗨的东西。实际看起来、用起来、听起来怎么样,我们想从这几个大的感官维度上都能达到体验层面的满足。

举一个例子:比如说之前我们为了快去掉了一些解锁的动画,用户一按指纹解锁,直接进到桌面,这种确实是非常的快,但这种感觉就像什么呢?就像你一按电梯,门就消失了,你进了电梯,它咔一声又关上了,是很快,但是这种观感是不太好的。它没有一种欢迎的意识,就只是把东西呈现给你。这一次我们希望把这个东西改回来,当你进入手机桌面的时候,图标应该有个简短的优雅的动态,有一个进场亮相的过程。

MIUI动态图标

MIUI其实已经非常流畅了,在这种地方去掉应有的动画,是可以快100毫秒,但这种快是没有意义的。让用户舒服的看到这个东西,这才是整个体验的核心。所以我们这次就定下一个目标,和工程团队一起,把这种为快而快的东西给它削弱,用户要的是更优雅的体验,而不是那种无感知的快100毫秒。

这个事情说起来不大,但其实是一种理念层面的进步,大家已经从那种无意义的纯数据比拼里解脱出来,更注意到整个体验层面。我们这次会把上面说的进场动画加进来,能让用户点亮屏幕的时候感觉到更加的舒服,能够感觉整个系统的“肢体语言”更加优雅。

⑥ 对于MIUI11的展望?

之前的非全面屏时代,手机屏幕在16:9的形态下,UX设计上其实已经极度成熟。手机的很多功能和设计的出新,很大程度上都是在迎合一些小众的需求,可能一部分人觉得很喜欢这个设计,但它并不普适。

全面屏手机的出现又将设计师的注意力从这些小众需求拉回到了一个大众需求:怎么在全面屏手机上做出更好的体验。因为智能手机用户迟早会将手中的设备换成全面屏设备,手机厂商如果只是简单地把原来16:9的画面改成18:9,而不根据硬件特点做真正的深度定制,那就会离用户体验越来越远。

手机系统的未来我们认为也会是这样的趋势,软硬件的结合会更加的紧密。在这一点上,MIUI有这个意识,也有行动,目前是走在比较前面的。

MIUI10落版后,我们也在考虑往这个方向去深化。我们不会特意去考虑11跟10之间非得做出什么大的区别来,相比这个,我们更关心的问题是:什么是用户真正需要的设计。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • MIUI
    +关注

    关注

    2

    文章

    302

    浏览量

    20880
  • 全面屏
    +关注

    关注

    5

    文章

    907

    浏览量

    41007

原文标题:“我们不聊虚的”——MIUI10设计背后的故事

文章出处:【微信号:xiaomigongsi0406,微信公众号:小米公司】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    京东方首款1.5K下摄像全面正式发布

    近日,BOE(京东方)携手中兴通讯旗下努比亚、红魔在成都举办“全面 全屏实力”全新一代真全面交付仪式。
    的头像 发表于 11-06 16:14 186次阅读

    微型晶体管怎么做出来

    微型晶体管的制造过程 1. 硅晶圆的制备 微型晶体管的制造始于硅晶圆的制备。硅晶圆是半导体制造的基础材料,通常采用高纯度的单晶硅制成。硅晶圆的制备过程包括: 硅矿石的提取和提纯 单晶硅的生长,通常采用Czochralski法(CZ法)或区域熔炼法(FZ法) 晶圆的切割、抛光和清洗 2. 光刻技术 光刻是制造微型晶体管的关键步骤之一,它涉及到使用光敏材料(光刻胶)和光源(如紫外光)来转移图案到硅晶圆上。光刻过程包括: 涂覆光刻胶:在硅晶圆
    的头像 发表于 10-15 14:48 161次阅读

    污水监测系统:实时、全面监测水质

    在环境保护日益成为全球共识的今天,水质监测作为守护水资源安全的重要一环,正得到广泛关注。其中污水监测系统以其优越的性能和便捷的操作方式,为水质检测领域做出了贡献。 污水监测系统具有全面的
    的头像 发表于 09-24 16:07 195次阅读

    想用INA333放大1000倍,但是做出来的板子没有输出,为什么?

    大家好,我现在需要测一直流小电压,电压范围从0-2mv,采用差分输入,想用INA333放大1000倍,但是做出来的板子没有输出,我用TINA仿真也不对,第一次用这个仿真软件,有可能是我不会用,我的电路如下
    发表于 09-06 06:24

    CD74HC4046做出来的电路9.995M的频率不稳定,是什么原因?

    我10M赫兹经2000分频产生5K赫兹的信号后用CD74HC4046来对5K赫兹的频率进行锁相倍频产成9.995M赫兹的频率,我选用的是PC3口来作为相位比较端口滤波电路电阻为6.2M电容100P。而实际做出来的电路9.995M的频率不稳定。问下大家这是什么原因?谢谢大家!
    发表于 09-02 06:23

    利用OPA2140搭建了一个0-24mA的电流源,做出来的pcb有点小问题求解

    最近工作需要,搭建了一个0-24mA的电流源,用OPA2140和OPA140构成,设计原理图如下:仿真时没有问题,现在做出来的pcb有点小问题: 1、单电源供电时(正12V)时,输入0-2V,输出
    发表于 08-12 06:13

    万界星空科技商业开源MES系统全面解析

    开源MES系统具有定制化、节省成本、开放性和适应性等优势和特点,可以帮助企业更好地管理生产流程。万界星空MES制造执行系统的Java开源版本,为制造业企业提供了全面的生产管理解决方案。
    的头像 发表于 07-15 14:02 296次阅读
    万界星空科技商业开源MES<b class='flag-5'>系统</b><b class='flag-5'>全面</b>解析

    非常全面的传感器工作原理图

    今天和大家分享一波传感器的工作原理图,非常全面
    发表于 04-29 11:06 690次阅读
    非常<b class='flag-5'>全面的</b>传感器工作原理图

    我们经常见到的电路板的“黑疙瘩”是啥?知不知道它是怎么做出来的?

    作为嵌入式或者电子行业的我们,肯定见过电路板的“黑疙瘩”,有人称之为牛屎芯片,尤其是我们经常用到的类似LCD12864显示或者LCD1602显示上经常看到这种“黑疙瘩”。 你见过这种牛屎芯片
    的头像 发表于 04-24 15:15 746次阅读
    我们经常见到的电路板的“黑疙瘩”是啥?知不知道它是<b class='flag-5'>怎么做出来</b>的?

    大家有全面转型使用国产FPGA的么?

    大家有全面转型使用国产FPGA的么?比如高云、紫光、安路等等
    发表于 03-06 13:43

    广州尚能丨带您了解全面光伏组件

    随着科技的不断进步,全面技术已经深入到我们的日常生活之中,从智能手机到电视屏幕,全面设计带来了更为沉浸式的视觉体验。而在太阳能领域,全面
    的头像 发表于 03-04 13:49 475次阅读
    广州尚能丨带您了解<b class='flag-5'>全面</b><b class='flag-5'>屏</b>光伏组件

    告诉你多层陶瓷电容MLCC是怎么做出来

    陶瓷电容是高性能电子元件,具有大温度系数、大比容量和良好耐潮湿性。多层陶瓷电容MLCC体积小,得益于其独特的结构和制造工艺,包括陶瓷膜流延、电极印刷、层叠烧结等步骤,可在小体积内实现高电容值和良好电气性能。
    的头像 发表于 03-04 09:21 677次阅读
    告诉你多层陶瓷电容MLCC是<b class='flag-5'>怎么做出来</b>的

    知语云全景监测技术:现代安全防护的全面解决方案

    可以帮助实现政务数据的安全保护,防止敏感信息泄露;对于个人用户而言,知语云全景监测技术可以提供更加全面的网络安全保护,防范网络钓鱼、恶意软件等安全威胁。 总之,知语云全景监测技术作为现代安全
    发表于 02-23 16:40

    快速全面了解大模型长文本能力

    那关于LLM的长文本能力,目前业界通常都是怎么做的?有哪些技术点或者方向?今天我们就来总结一波,供大家快速全面了解。
    发表于 02-22 14:04 809次阅读
    快速<b class='flag-5'>全面</b>了解大模型长文本能力

    ADI与战略合作伙伴共同开发全面的集成式电机控制设计程序

    电子发烧友网站提供《ADI与战略合作伙伴共同开发全面的集成式电机控制设计程序.pdf》资料免费下载
    发表于 11-29 09:11 2次下载
    ADI与战略合作伙伴共同开发<b class='flag-5'>全面的</b>集成式电机控制设计程序