Your device has a pretty nifty developer
option for showing GPU overdraw.
Once you toggle back to active,
you'll notice that your layouts
are all drawn with a tint.
A pixel drawn once is
shown in its normal color.
But when the pixel is drawn over itself,
it's tinted.
You've got blue for one overdraw, green
for two, pink for three and red for
four or more.
Clearly, the goal here is to
minimize the amount of red, and
keep everything fairly blue.
To see how this works,
we'll look at Sunshine both before and
after Dan updated it with a look
inspired by Material Design.
You'll notice that most things
are pretty consistent, except that
after material, everything is a shade or
two darker on the tint scale.
This is because material design focuses
on beautiful components and transitions.
And so
it comes with a heavier drawing cost.
Some events have a heavier cost as well.
Clicking, for example,
tends to result in a shading effect as
an indicator of the action to the user.
You can see this with a red
overdraw on a touch event.
With material design, though,
we increase the number of these types of
smaller overdraws with the addition of
animations, such as the scroll animation
or the hover action in the menu.
These animation elements add
a bit of magic to the app and
help create a beautiful user experience,
but as you've seen,
there's clearly a rendering cost.
Perf considerations are a trade-off.
You want to do fancy things, but
you might be doing too much, so
use your tools to set up
a regular testing process and
then evaluate why your changes for the
better versus how it could be improved.
يوجد في جهازكم هذا خيار تطوير رائع
.لعرض استبدال رسم GPU
،وبمجرد العودة إلى الوضع نشط
ستلاحظون أن جميع التخطيطات
.قد تم رسمها بلون خفيف
في حين يعرض رسم بكسل
.بلونه الطبيعي
,ولكن عندما يتم رسم البكسل فوق نفسه
.فيصبح بلون خفيف
ولديكم اللون الأزرق لاستبدال رسم واحد، والأخضر
لاستبدالين، والوردي لثلاثة استبدالات، والأحمر
.لأربعة أو أكثر
ومن الواضح أن الهدف هنا هو
تقليل كمية اللون الأحمر
.الحفاظ على كل شيء باللون الأزرق
،للتعرف على كيفية عمل هذا الأمر
سوف نبحث في تطبيق Sunshine قبل وبعد
تحديث دان له، مع إلقاء نظرة
.مستفيضة على تصميم المادة
وستلاحظون أن معظم الأشياء
متناسقة تمامًا، ما عدا
بعد تلك المادة، حيث إن كل شيء عبارة عن ظل أو
.داكنًا بما يعادل مرتين بمقياس اللون الخفيف
وهذا لأن تصميم المادة يركز
.على الانتقالات والمكونات الجميلة
،ولذا
.فإنه يأتي بتكلفة رسم أكبر
.وبالطبع بعض الفعاليات ذات تكلفة أكبر أيضًا
،فالنقر على سبيل المثال
،سيؤدي إلى تأثير ظلي
.كمؤشر للمستخدم على هذا الإجراء
ويمكنكم مشاهدة هذا باستبدال رسم
.باللون الأحمر في حدث اللمس
،ومع تصميم المادة
فقد قمنا بزيادة عدد أنواع
عمليات استبدال الرسم الأصغر تلك مع إضافة
،حركات، مثل حركة التمرير
.أو إجراء التحويم في القائمة
وتضيف عناصر التحريك تلك
شيئًا من السحر للتطبيق، و
،تساعد في إنشاء تجربة مستخدم جميلة
,ولكن كما ترون
.هناك تكلفة ليست بالقليلة
.فالاعتبارات المثالية هي عملية مفاضلة
فأنتم ترغبون في القيام بأمور رائعة، ولكن
ربما تقومون بالكثير، لذا
استخدموا أدواتكم في إعداد
عملية اختبار معتادة
ثم قيموا السبب وراء جعلها
.أفضل بالإضافة إلى طريقة تحسينها
Seu dispositivo tem uma boa opção de
desenvolvedor para mostrar sobreposição da GPU.
Quando você alternar para ativo,
perceberá que os layouts
estão desenhados com uma matiz.
Um pixel desenhado uma vez
aparece na cor normal.
Quando o pixel é desenhado sobre si,
ele é pintado.
Azul para uma sobreposição, verde
para duas, rosa para três e vermelho para
quatro ou mais.
O objetivo aqui é
minimizar a quantidade de vermelho e
manter tudo razoavelmente azul.
Vamos olhar para o
Sunshine antes e
depois de Dan atualizá-lo com uma aparência
inspirada pelo Material Design.
Muitos itens são
bem consistentes, exceto que
depois do material, tudo tem sombra ou
está mais escuro na escala da matiz.
Isso ocorre porque o material design se concentra
em componentes e transições bonitos.
E
isso acompanha um alto custo com desenho.
Alguns eventos também têm alto custo.
Clicar, por exemplo,
resulta em um efeito de sombra como
indicador da ação ao usuário.
Veja isso com a sobreposição
vermelha em um evento de toque.
Porém, com o material design,
aumentamos o número desses tipos de
sobreposições menores adicionando
animações, como a animação de rolagem
ou a ação de focalizar o menu.
Esses elementos de animação adicionam
um pouco de mágica ao aplicativo e
ajudam a criar um experiência do usuário atraente.
Porém,
há um custo de renderização.
Considerações de apresentação são uma compensação.
Você quer fazer coisas legais, mas
talvez esteja fazendo muito. Então,
use as ferramentas para definir
um processo de teste regular e
avaliar por que as alterações para
melhor versus como melhorar.
你的设备上有一个实用的开发人员选项 用于呈现 GPU 过度绘制
开启此选项后
你会发现绘制布局时加上了一层色调
只绘制一次的像素以常规颜色显示
像素出现重复绘制时 就会加上一个色调
一次过度绘制为蓝色 两次为绿色 三次为粉色
四次或更多为红色
显然 目标是尽量减少红色
尽可能让一切更接近蓝色
为了解其工作原理 让我们看一看
Dan 受 Material Design 启发而对 Sunshine 的界面进行更新的前后
你会注意到大部分内容都一样
但在采用 Material Design 后 所有对象的色调都往红色移动了一两步
这是因为 Material Design 注重组件美观性及过渡动画
因此带来了更重的绘制负担
一些事件的渲染负担也会更大
例如
点击往往会触发涟漪效果 以向用户提供操作反馈
在发生触摸事件时 可看到红色的过度绘制
在 Material Design 中
由于增添了滚动动画或菜单悬停动画等多种动画效果
这类规模较小的过度绘制也更为多见
这些动画元素让应用更加丰富多彩
有助于营造愉悦的用户体验 但也可以看到
所需的渲染负担也更大
此时对性能的考量就需要一定折衷
你希望实现一些出彩的效果 但不应该做得太过火
因此请恰当运用工具来设置常规测试流程
以评估所进行的改动 以及如何对其做进一步改进