赞助商
立即赞助

赞不绝口的MIUI10,背后的设计故事揭秘

UI设计3年前 (2021)更新 流光
1.8K 0 0

@MIUI : MIUI 10 的测反馈中,设计上的耳目一是众口称的分。日,MIUI设计总监 Gary 和几位核心设计师一起接受了我们的采访,开布公地介绍了 MIUI10 设计背后的故事。

这次的采访我们聊得很细,细到某一交互的设思的变迁,以及什么终以那种方式呈 MIUI 10 之。我相信,无论对设还对手机系统存好奇,一都可以从这次访谈里得到一些益的启发。因我们聊虚的。

赞不绝口的MIUI10,背后的设计故事揭秘

△ MIUI设团队

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

赞不绝口的MIUI10,背后的设计故事揭秘

△ 虚拟键该存在

不太激我们还根据用户反馈判断,这套手势因任何虚拟键的提示,刚始确实需一两分钟学习,但部分的用户反馈:用了就回不去了。目从客观讲,安卓手机里的全面屏手势,MIUI 确实好用的,不我们自己,从各种用户反馈,包括微博很多专业数码博主的反馈得的结论,很多人主动这件事。

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

尝过多版本的全面屏势,最初还没有大胆想干掉所有虚拟键,而是想在虚拟键上做文章。开始觉得那个域多候3个 button 可能用不上,比如书的候,你可能只需要一个返回键,所以考虑的是在某些定的应用景把一些用不的虚拟键收起来,这是做减法,减法做完之后,来虚拟键的位置就空出来了,觉得这个空间是浪费的,在想应该怎利用起来,这是早期一个复杂的思路。

赞不绝口的MIUI10,背后的设计故事揭秘

△ 早期带横杆的产品

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

否定横杆之后,我们才真正全心考虑干掉有虚拟键的方案。但没有虚拟键,就对我们的交互设计了很的要求,首先,这个手势的发点一定得非符合直觉,管是返上一级菜单好,到桌面好,这必须是两个最基础的操作(横滑、上滑),在这两个基础操作上略做停顿,我们就可进入应间的快切和多任务管,我们一种非轻的设计把它附着在两个基础交互上。彻干掉虚拟键这件事最早我们没有太大的勇气做,最后做来反倒更贴户操作手机的直觉,有一种柳暗明的感觉。

赞不绝口的MIUI10,背后的设计故事揭秘

△ 简洁易的MIUI全面屏手势

二、MIUI 10的整体视觉设计遵循了什么思路?

赞不绝口的MIUI10,背后的设计故事揭秘

△ 为面屏而重新设计

在天气、日历、全中心等等 MIUI 10 的各个角落里,实都把原来分式的画面结构做了一个全面屏的设计,页面要有很强的割裂感。容直接浮在屏幕上,户第一时间得到信息,掉干扰元素。

非全面屏时,手机下两比较的黑色框,视觉天然分段式的,之屏幕内的多色块设其实对应了手机外观的这种「分段」,它还谐的,但原样搬到全面屏手机,就显得把一整块完整的屏幕分割了几段。

另是原来有些插画类型风格和表手法,想让个画有些亲和力。是为我们用户覆盖很大,两三亿用户,会有些年龄层用户觉原先插画形有些稚感。所以我们觉到10这代,个系统应该更成熟、更普适些,我们更倾于做个任何来说都很舒服视觉设计。

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

举个特细节例子。MIUI 10 时钟,有部分用户会有疑问:在 MIUI 10 里,可见大多数页是亮色,为什么进入时钟时却是黑色?我们其实也在白色和黑色反复了很多,调研也做了很多。最终我们认为更要是时钟使用场景问题,比如说你晚上在睡觉前拿起手定个闹钟,在夜晚或者内,从手桌进来打开时钟,如进入个很亮页,它即便是好看,也可能会刺眼。所以我们是选择了黑色,然那个比度到现在在调,我们想把视觉上美观和使用舒服统进来。

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

我明白你这个问题意思,大部分手是长期静音,音效这个东西,好像已经被完全忽略了。是我们觉,哪怕有1%用户打开了手铃声,他也应该感受到悦耳而不是打扰和腻烦。如我没记话,我们是手厂商里第个针音效做系统性设计和优化,我们从「百听不厌」自然系音效出发,和过格莱美奖顶尖音乐合作,针手音腔特性音效做了特优化。

发布会上洪锋把然音效系统作为一个彩蛋来讲,这是送给机用户的一个礼物,是让骄傲的产品。不确定有多少用户会发现这个产品,有些人可能因为长期静音没有机会触这个新计,但它是一个能带给人惊喜和温暖的西。

五、MIUI的设计理念是什么?

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

我们用一个人来做类比。视,就是感官面的,比说你见到一个人说:个人很帅;二就是互面的整逻辑,就比你跟他说,现他的脑子清楚;三就是整个动效的面,个人的肢语言很优雅;还有字,我们是从 MIUI8 的时就开始做,为让大家有更的阅读验,让人得你个人很有涵,已经深到非常细节的面;最,我们加一个声音的系统,就是你说的时,声音还要听。MIUI 在设计上一直是往个方面进化,我们并不满做出某个漂亮的页面或者互,而是追求整个验面的饱满。

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

举一例子:比如之我们了去掉了一些解锁的动画,用户一按指纹解锁,直接到桌面,这种确实非常的,但这种感觉就什么呢?就一按电梯,门就消失了,了电梯,它咔一声又关了,很,但这种观感不太好的。它一种欢迎的意识,就只把东呈给。这一次我们希望把这东改回,当入手机桌面的时候,图标应该简短的优的动态,一场亮相的过程。

赞不绝口的MIUI10,背后的设计故事揭秘

△ MIUI动态图标

MIUI 其实已经常流畅了,在这地去掉应有动画,是可以快100毫秒,这快是没有意义。让用户舒服看到这个东西,这才是个体验核心。所以我们这定下个目标,和工程团队起,把这为快而快东西它削弱,用户要是更优雅体验,而不是那感知快100毫秒。

这个事情说起来不大,但其实是一种理念层面的进步,大家已经从那种无义的纯数据比拼解脱出来,更注整个体验层面。这次会把上面说的进动画加进来,能让用户点亮屏幕的候觉更加的舒服,能够觉整个系统的「肢体语言」更加优雅。

六、对于MIUI 11的展望?

之前的非全面屏代,机屏幕在16:9的形下,UX计上其实已经极度成熟。机的多功能和计的出新,大程度上都是在迎一些众的需求,可能一部人觉得喜欢这个计,但它并不普适。

面屏手机的出现又将设计师的注意力从小众需求拉回到一个大众需求:怎么在面屏手机上做出更的验。因为智能手机用户迟早将手中的设备换成面屏设备,手机果只是简单地把原来16:9的画面改成18:9,而不根据硬件特点做正的深度定,就离用户验越来越远。

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

MIUI10 落版后,我们也考虑往这方向去深化。我们不会特意去考虑1110之间非得出什么的区别,相比这,我们关的问题:什么用户真需的设。

欢迎关注MIUI微信公众号:「MIUIROM」

赞不绝口的MIUI10,背后的设计故事揭秘

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@MIUI :在 MIUI 10 的内测反馈中,设计上的耳目一新是众口称赞的部分。近日,MIUI设计总监 Gary 和几位核心设计师一起接受了...
MIUI 10
摘要: 目的:研究基于移动智能设备的互联网产品设计的评估和迭代方法。 方法:通过作者亲历不同类型的互联网公司的实际工...
产品设计
比设计App更加复杂和困难 前不久,小爱触屏音箱发布。作为 VUI x GUI 的多模态交互产品(VUI,Voice-user interface。GUI,Gr...
VUI
编者按:对于千千万万的iPhone用户来说,手机里面的那些可爱的符号表情肯定耳熟能详了。但是你知道其中的一些emoji是怎么来的...
emoji表情
我在上一篇文章《动效设计没那么难!让谷歌动效设计师带你入门》当中,已经通过实际的案例,分享了动效设计并不难的原因。我...
AE
现如今许多游戏已经不单只具有娱乐性,还具备了不错的教育性和学习性。和之前的赛车游戏 UI 界面设计不同,这次我们要设计的...
App设计
在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘...
UI 设计
在互联网产品圈里,用户体验一直是被格外推崇,几乎每一个产品经理都会把用户体验挂在嘴上。即便是一个产品菜鸟也会在言谈间...
交互设计