So the final mobile constraint is the small screen. This might seem like
the obvious mobile constraint and it basically means that we can't fit as
much on a really small smartphone
screen, but there's two really awesome techniques
that we can use that will help us optimize for our small UI.
>> Yeah, they're called combination and reflow. And
we're going to talk to an Android designer developer
called Mick Butchard, he's on the Android team,
about how to make this work in your applications.
>> So Andriod is not
a one-size-fits-all OS. It comes in many different sizes
and shapes. From small phones to large tablets, TVs and
beyond. The great news is that Android has been built
from the ground up to embrace this variety and give
you tools in order to deal with it. So, from
the very beginnings, Android has allowed you to scale your
user interface up and down between different devices. The problem
is that scaling approaches will only get you so far.
so, I'm going to take you through some of
the common pitfalls we see with this relying on
scaling approaches, and then I'm going to go through some
alternative ways of dealing with this. So the first
problem we see commonly is one of having excessive
line lengths. So in this application, the text and
images are running the full width of the device's
screen. On a smaller, phone-size device, this might be fine.
But as you get beyond a certain
size this becomes uncomfortable. When you, especially when
you're looking at line lengths of text, you want to be aiming for between 45 and
75 characters of text in order to maintain
a comfortable reading experience. The user can easily
scan across it. And in this application we
can see that this is clearly exceeding that.
The next problem we commonly see is one
of unbalanced content. So, in this example, we
can see there's a lot of content clustered up in the top left of the screen,
and then leaving huge amounts of white space
across the rest of the screen. This leads
to a very kind of unbalanced feeling, which
makes your application feel completely unoptimized for this
device. And the last problem we commonly see is more
of a missed opportunity almost, of not making the best use
of the real estate available to you. So in this
example we might have an application which shows many photos. As
we can, see they're these tiny little thumbnails all grouped
over to one side. It really is a shame not to
make use of these beautiful big screens, when, all this
extra real estate, when it is available to you. So you
want to be avoiding this. So these are
some of the common pitfalls we see in relying
on scaling approaches, and the answer to dealing with
these problems really is to adopt a responsive mobile
design to respond to the device's characteristics. So here
are three techniques you can use in order to
do this. So the first technique is simply one
of combination. This is if you have extra room,
combining things from different screens onto a single screen in
order to make up, to fill up the space. So
in this example, we've got a typical master detail view
which on a phone would be on two separate screens. So
clicking through from a list item for example might show
subsequent details. On a larger device with sufficient width, we
might show both of these things at once. This will
avoid the problem of having those excessive line lengths and make
better use of the screen real estate. The second
technique is one that we call macro reflow. So this
is taking the major building blocks of your application and
reflowing them or rearranging them on the screen in order
to make better use of the space. So in
this example, we simply move something like a large header
image and body text instead of being vertically stacked above
each other to be horizontally stacked next to each other.
So also gives the image more space to kind of to show off on the,
the larger amounts of screen real estate, as
well as avoiding those excessive line lengths when
it's in a landscape device. So this is
not only useful for different sized devices, you
can also use this kind of trick when
changing on the same device between different orientations.
And the last technique I want to go
through is something we call micro reflow. So
this technique really focuses on the individual blocks
within your design and it delegates responsibility to those
individual blocks to optimize themselves given a certain
amount of space. So, a couple of examples
of doing that. On the left here, we
have a list type application which, given sufficient space,
might lead to those excessive line lengths or very unbalanced
views. So instead of that, each individual list item knows that,
given a certain amount of space, how to draw itself. So
once it gets over a certain size, a certain amount of
width available to the device it'll change its representation. Instead of
being a list item, it might change to say, a grid,
grid representation. So this will allow you to have a, you
know, fill the space better. The second example, is if you
can't, if there's simply no way to introduce
more content you can introduce a margin point
instead. So in this form-type application on the
right when we go for beyond the phone,
past a certain size, when there just isn't
anymore content we can show on screen, we
simply introduce a margin point so it doesn't
end up being excessively long or excessively unbalanced.
>> So Nick just talked to us about some really awesome
UI techniques for small screens. But the small screen affects a lot more
than just the UI. It actually really affects the UX of your M. Yeah,
simply taking a web or desktop app and shrinking it down so that
it fits into a sm, small screen is probably not the way to go.
>> Yeah, you really need to think mobile first and optimize
your flow for the smartphone. So how do we do this? Wireframing.
>> Wireframing.
إذًا آخر قيد من قيود المحمول هو الشاشة
الصغيرة. قد يبدو ذلك أكثر قيود المحمول
وضوحًا وهو يعني في الأساس أنه يمكننا
الملائمة بنفس القدر في
شاشة صغيرة للهاتف الذكي، لكن هناك
طريقتان رائتعان يمكن أن نستخدمهما للمساعدة
في تحسين
واجهة المستخدم الصغيرة لدينا.
>> نعم، يسميان الجمع وإعادة الانسياب.
وسنتحدث مع مطور مصمم لـ
Android يُدعى
نيك بوتشارد، من فريق Android،
حول كيفية تنفيذ ذلك في التطبيقات
لديك.
>> حسنًا Android ليس
نظامًا من أنظمة OS ذات الحجم الواحد الذي
يناسب جميع الأنماط.
فهو يأتي بأحجام وأشكال عديدة ومختلفة.
بدءًا من الهواتف
الصغيرة وحتى أجهزة الكمبيوتر اللوحي
الكبيرة والتليفزيونات
وأكثر. الخبر الجيد هو أن Android قد تم
إنشاؤه في الأساس لتبني هذا
التنوع وإمدادك بالأدوات للتعامل معه. لذا
أتاح لك Android من البداية إمكانية
ضبط واجهة
المستخدم لديك من الأعلى والأسفل في الأجهزة
المختلفة. المشكلة هي أن
أساليب الضبط لن تصل بك لأبعد من ذلك.
لذا، سأشرح لكم بالتفصيل بعض العثرات
الشائعة التي نقابلها عند الاعتماد على
أساليب الضبط، ثم سأنتقل بكم إلى بعض الطرق
البديلة
للتعامل مع هذه العثرات. إذًا أول المشكلات
التي نقابلها هي وجود أطوال زائدة بالأسطر.
لذا في هذا التطبيق، يتم تشغيل النص
والصور في كامل عرض شاشة الجهاز.
في الأجهزة الأصغر بحجم الهواتف، قد يكون
هذا جيدًا.
لكن كلما وصلت لأكثر من حجم معين يصبح
ذلك أمرًا غير مريح. فعندما تنظر، بوجهٍ
خاص
لأطوال الأسطر الخاصة بالنص، فستستهدف
أطوالاً تقع بين 45 و75 حرفًا من النص
حتى تحافظ على تجربة القراءة بشكلٍ
مريح.
وحتى يمكن للمستخدم مسح هذه الأسطر
بسهولة.
وفي هذا التطبيق يمكننا أن نرى أن
الأمر يتخطى ذلك بوضوح.
وثاني أكثر المشكلات التي نقابلها شيوعًا هي
مشكلة المحتوى غير المتوازن. لذا في هذا
المثال، يمكننا أن
نرى أن هناك الكثير من المحتوى بمساحة
متفاوتة في الجزء الأيسر العلوي
من الشاشة، ومن ثم ترك مقدار كبير من
المسافة البيضاء
عبر بقية الشاشة. ويؤدي ذلك إلى
نوع من الشعور غير المتوازن، الذي
يجعل التطبيق الخاص بك غير محسّن بالكامل
لهذا الجهاز.
وآخر المشكلات التي نقابلها هي التي تتعلق
بأكثر بالفرص
الضائعة تقريبًا، ومن عدم الاستفادة بالشكل
الأمثل من
المساحة المتوفرة لك. لذا في هذا المثال
قد يكون لدينا تطبيق يظهر الكثير من الصور.
وكما يمكننا أن نرى
هذه الصور المصغرة الصغيرة المجمعة
في جانب واحد. ستكون عدم الاستفادة
من هذه الشاشات الكبيرة الرائعة
خسارة كبيرة، عندما تكون جميع هذه المساحات
الزائدة متوفرة لك. لذا ينبغي
عليك تجنب ذلك. هذه بعض العثرات
الشائعة التي نقابلها عند الاعتماد على
أساليب الضبط، ويكمن الحل للتعامل
مع هذه المشكلات في واقع الأمر في تبني
تصميم مستجيب للمحمول للاستجابة
إلى الخصائص الخاصة بالجهاز. لذا
إليك هذه الطرق
الثلاثة التي يمكنك استخدامها
لإجراء
ذلك. أول طريقة هي ببساطة تقنية الجمع.
فإذا كانت لديك مساحة زائدة، تقوم بجمع
الأشياء من الشاشات المختلفة إلى شاشة واحدة
لتقوم بإنشاء مساحة لملئها. لذا في
هذا المثال، لدينا عرض نموذجي رئيسي
للتفاصيل
التي ستكون في شاشتين منفصلتين على الهاتف.
لذا فإن النقر من عنصر قائمة ما يمكن أن
يعرض
تفاصيل لاحقة. في الأجهزة الأكبر التي
تتمتع بعرضٍ كافٍ،
قد نقوم بإظهار كلاً الأمرين مرة واحدة.
وسيجنبنا ذلك مشكلة
وجود أطوال زائدة بالأسطر وسيعمل على
الاستفادة بشكلٍ أفضل
من مساحة الشاشة. والطريقة الثانية
هي الطريقة التي نطلق عليها اسم إعادة
الانسياب الكبير. وهي نقل كتل الإنشاء
الرئيسية بالتطبيق لديك
وإعادة انسيابها أو إعادة ترتيبها على
الشاشة
للاستفادة بشكلٍ أفضل من المساحة.
إذًا في هذا المثال،
نقوم فقط بنقل شئٍ ما مثل صورة رأس كبيرة
ونص أساسي بدلاً من التكدس عموديًا فوق
أحدهما الآخر أو أفقيًا بجانب أحدهما الآخر.
وبذلك نعطي الصورة أيضًا المزيد من المساحة
لإظهارها في مقدار
أكبر من الشاشة، بالإضافة إلى تجنب هذه
الأطوال الزائدة للأسطر عند وجودها في
جهاز أفقي. لذا تعتبر هذه الطريقة
مفيدة ليس فقط للأجهزة ذات الأحجام
المختلفة، لكن
بإمكانك أنت أيضًا استخدام هذه
الحيلة
عند التغيير بين الاتجاهات المختلفة في
نفس الجهاز.
وآخر طريقة أرغب في شرحها هي ما نطلق
عليه اسم إعادة الانسياب الصغير. لذا
تركز هذه الطريقة حقًا على الكتل الفردية
الموجودة ضمن التصميم الخاص بك وتفوض
الكتل الفردية
المسؤولية لتحسين نفسها بتحديد مقدار معين
من المساحة. إليك مثالين على إجراء ذلك.
على اليسار هنا، لدينا تطبيق من نوع القائمة
حيث قد تؤدي المساحة الكافية المحددة،
إلى أطوال زائدة بالأسطر أو طرق عرض
غير متوازنة.
لذا بدلاً من ذلك، يعلم كل عنصر
قائمة فردي، مع مقدار معين من المساحة
كيف يسحب نفسه.
لذا بمجرد أن يتعدى حجمًا معينًا، مقدارًا
معينًا من
العرض المتوفر للجهاز، فسيقوم بتغيير
تمثيله. فقد يتغير بدلاً من كونه
عنصر قائمة، إلى كونه مثلاً، شبكة،
تمثيل شبكة. لذا سيتيح لك ذلك إمكانية،
ملء المساحة بشكلٍ أفضل. والمثال الثاني هو
إذا لم تستطع، إذا لم تتوفر لديك طريقة
لتقديم المزيد
من المحتوى، فيمكنك تقديم نقطة هامشية
بدلاً من ذلك.
إذًا في هذا التطبيق من نوع النموذج،
على اليمين
عندما ننتقل لأبعد من الهاتف، عند تخطي
حجم معين، وعندما لا يكون هناك
مزيد
من المحتوى لإظهاره على الشاشة، نقوم فقط
بتقديم نقطة هامشية، حتى لا يصل الأمر إلى
أن يكون المحتوى طويلاً أو غير متوازن بشكلٍ
زائد.
>> حسنًا حدثنا نيك للتو عن بعض المهارات
التقنية الرائعة لواجهة المستخدم للشاشات
الصغيرة. لكن الشاشات الصغيرة
تؤثر في أكثر من مجرد واجهة المستخدم. حيث
تؤثر في الحقيقة في تجربة المستخدم الخاصة
بالمحمول لديك، نعم فمجرد أخذ تطبيق
سطح المكتب أو
الويب وتقليصه ليتلائم مع الشاشة الصغيرة
ليس على الأرجح أفضل
>> طريقة. نعم عليك أن تفكر
أولاً في المحمول وفي
تحسين التدفق للهاتف الذكي لديك. إذًا كيف
نقوم بذلك؟ الإطار الشبكي.
>> الإطار الشبكي.
Así que la última limitación de móvil es
la pequeña pantalla. Esto puede parecer
la limitación del móvil obvia
y significa que no podemos adaptarnos
tanto a una pantalla realmente pequeña
de smartphone, pero hay
dos fantásticas técnicas
que podemos usar que nos ayudan a optimizar nuestra pequeña interfaz.
>>Sí, se llaman combinación y ajuste. Y
vamos a hablar de
un desarrollador de Android
llamado Mick Butchard; está
en el equipo de Android,
sobre cómo hacer funcionar
esto en tus aplicaciones.
>>Así que Android no es
un de un solo tamaño para todo.
Viene en muchos tamaños y formas
diferentes. Desde los teléfonos pequeños
a las grandes tabletas, televisiones y
más. La estupenda noticia es que
Android ha sido desarrollado
desde cero hasta admitir
esta variedad y darte
herramientas para manejarla.
Así que, desde
el primer momento, Android
te ha permitido graduar tu
interfaz de usuario arriba y abajo
entre diferentes dispositivos. El problema
es que las propuestas de regulación solo
te servirán a ti hasta ahora.
Así que voy a indicarte algunos de
los inconvenientes que vemos a confiar
en estas estrategias de regulación,
y después voy a hablar de algunas
formas alternativas
de tratar con ello. Pues el primer
problema que generalmente
vemos es tener un exceso
de longitud en las líneas.
En esta aplicación, el texto y
las imágenes están ocupando
todo el ancho de pantalla
del dispositivo. En uno más pequeño,
del tamaño de un teléfono, estaría bien.
Pero cuando vas más allá de un cierto
tamaño esto resulta incómodo.
Especialmente cuando
estás mirando la longitud de las líneas
de texto, intentas tener entre 45 y
75 caracteres de texto para mantener
una experiencia de lectura cómoda.
El usuario puede fácilmente
explorarlo. Y en esta aplicación
podemos ver que se sobrepasa esto.
El siguiente problema que
solemos encontrar es el
de contenido desequilibrado.
Así, en este ejemplo
podemos ver que hay mucho contenido amontonado en la parte superior izquierda,
y entonces dejando una enorme cantidad de espacio en blanco
a lo largo del resto de la pantalla.
Esto lleva a
una sensación de desequilibrio, que
hace a tu aplicación parecer
nada optimizada para este
dispositivo. Y el último problema
que solemos encontrar es más
bien casi una oportunidad perdida,
de no hacer el mejor uso
del verdadero espacio disponible para ti.
Así que en este
ejemplo podríamos tener una aplicación
que muestra muchas fotos.Como
podemos ver, están estas diminutas
vistas en miniatura agrupadas
en un lado. Realmente es una pena no
hacer uso de estas hermosas pantallas grandes,cuando todo este
espacio extra está disponible
para ti. Así que
quieres evitar esto. Pues estos son
algunos de los inconvenientes comunes que vemos a confiar
en estrategias de regulación,
y la respuesta a tratar con
estos problemas es en verdad
adoptar un diseño
de móvil que responda
a las características del dispositivo. Pues
he aquí tres técnicas que puedes usar para
hacerlo. La primera es simplemente
de combinación. Si tienes espacio extra,
combinar objetos de
distintas pantallas en una sola
para compensar, llenar el espacio. Así
que en este ejemplo, tenemos
la típica vista con el máximo detalle
que en un teléfono podría estar
en dos pantallas separadas.
Haciendo clic en un ítem de una lista
por ejemplo podría mostrar
más detalles. En un dispositivo
más grande con suficiente anchura,
podríamos ver ambas cosas a la vez. Esto
nos evitará el problema de tener
exceso de longitud de líneas para hacer
mejor uso del espacio real
de la pantalla. La segunda
técnica es una que llamamos macrorreflujo. Esto
es tomar los principales bloques
de la construcción de tu aplicación y
reasignarlos u organizarlos de nuevo
en la pantalla para
hacer mejor uso del espacio. Así que
en este ejemplo, simplemente movemos
algo como una gran imagen de
encabezamiento y contenidos en vez
de apilarlos verticalmente encima
de otros para apilarlo horizontalmente
unos junto a otros.
Esto también deja más espacio a
la imagen para exhibir
la mayor proporción de
espacio real en pantalla, así como
evitar ese exceso de longitud en las líneas
cuando lo hay en
un dispositivo apaisado. Así que esto
no solo es útil para dispositivos de
distintos tamaños,
puedes usar este tipo de truco cuando
vas a alternar entre diferentes
orientaciones en el mismo dispositivo.
Y la última técnica que quiero
revisar es algo que llamamos microrreflujo.
La técnica se centra
en los bloques individuales
dentro de tu diseño y
delega responsabilidad a esos
bloques individuales para optimizarse
a sí mismos dada una cierta
cantidad de espacio. Un par de ejemplos
de cómo hacerlo. Aquí a la izquierda,
tenemos una aplicación tipo lista
que, con suficiente espacio
podría llevar a esas líneas
demasiado largas o a vistas
muy desequilibradas. En su lugar,
cada ítem de la lista entiende eso
dada una cierta cantidad de espacio,
cómo extenderse a sí mismo.
Una vez que sobrepasa
un cierto tamaño,una cierta cantidad de
anchura disponible en el dispositivo
cambiará su representación. En vez de
ser un ítem de la lista,
podría cambiar, digamos, una matriz,
la representación de un matriz.
Esto te permitirá tener, sabes,
llenar mejor el espacio.
El segundo ejemplo, es si
no puedes,si no hay forma de introducir
más contenido puedes
introducir un margen
en su lugar. Así que en
esta aplicación tipo formulario a la
derecha cuando vamos
más allá del teléfono
superado un cierto tamaño, cuando no hay
más contenido que mostrar en pantalla
simplemente introducimos un margen y así
no acaba siendo
excesivamente largo o desequilibrado.
>>Pues Nick nos acaba de hablar
sobre algunas increíbles
técnicas de interfaz de usuario para
pantallas pequeñas. Estas afectan a más
que simplemente la interfaz. De hecho,
a la experiencia de usuario o tu M. >>Sí
simplemente tomar una web o
aplicación de escritorio y reducirla para
que encaje en una pequeña pantalla sm,
probablemente no es la mejor manera.
>>Sí, realmente necesitas pensar en
el móvil primero y optimizar
tu flujo para el smartphone. Así que,
¿cómo hacemos esto? Líneas de dibujo.
>>Modo esquema de líneas de dibujo
最後の制約は画面が小さいことです
当たり前だと思われるかもしれませんが
小さな画面に合わせられないのです
しかし2つの手法を使えば
小さなUIに最適化できるようになります
コンビネーションとリフローという手法です
Androidの開発者ニック・ブッチャーに
コンビネーションとリフローの方法について
聞きました
AndroidはフリーサイズのOSではありません
スマートフォン、タブレット、テレビに合わせて
様々な大きさや形になります
Androidはその多様性を受け入れ
処理するツールを提供するように
最初から作られています
そもそも最初から異なるデバイスに対応して
UIを拡大縮小できるようになっています
しかしこの方法には限界があります
この方法に依存することで
陥りやすい落とし穴について説明し
別の対処法をいくつかご紹介します
私たちがよく目にする最初の問題は
1行の長さが長すぎてしまうことです
このアプリではテキストと画像は
デバイスの画面の幅になっています
小さいサイズのデバイスでは
これで問題ないでしょう
しかしあるサイズ以上になると見にくくなります
特に1行の文字数は快適に読み続けられるように
45~75文字にしなければなりません
そうすればユーザは簡単に目を通すことができます
このアプリでは明らかに1行が長すぎます
次によく目にする問題は
バランスの悪いコンテンツです
この例では多くのコンテンツが
画面の左上に集まっています
そして画面の右側には大きな空白が広がっています
これはとてもバランスが悪く
アプリが最適化されていない印象を与えます
よく見かける最後の問題は
機会をほとんど逃してしまうことで
スペースが最大限活用されていないことです
この例は写真をたくさん表示するアプリですが
小さなサムネイルが片側にかたまっています
きれいで大きな画面が活用されていないのは
非常に残念なことです
利用できるスペースが余っています
これは避けなければなりません
これらの問題はスケーリングに依存すると
陥りやすい落とし穴です
これらの問題に対処するためには
レスポンシブモバイルデザインを採用し
デバイスの特性に対応します
そのための手法が3つあります
1つ目は単純にコンビネーションの手法です
もし余分なスペースがある場合
別々の画面にあるものを1つの画面にまとめ
スペースを埋めます
この例は典型的なマスタ/詳細ビューで
スマートフォンの画面が2つに分かれています
リストの項目をクリックすると詳細が表示されます
十分な幅を持った大きなデバイスなら
両方を1画面に表示できるでしょう
これで1行が長すぎる問題を回避して
画面スペースをより有効に活用できます
2つ目はマクロリフローと呼ばれる手法です
アプリの主要な構成要素を画面上で
リフローしたり再配置したりして
スペースをより有効に活用します
この例では単純に
大きなヘッダ画像や本文を動かして
垂直に並べる代わりに
水平に並べ替えています
また大画面では画像のサイズを大きくして
画像が引き立つようにします
同時に横画面表示の場合に
1行が長くなりすぎるのを回避できます
異なるサイズのデバイスだけでなく
同じデバイスで画面の向きを変更する時にも
役に立つ手法です
最後にご紹介するのは
マイクロリフローと呼ばれる手法です
デザイン内の個々の構成要素に焦点を当て
それぞれの要素が自分で
与えられたスペースに最適化するようにします
その例をいくつかご紹介します
左のリストビューのアプリでは
十分なスペースが与えられると
1行が長すぎたり
バランスの悪い画面になったりします
そこでそうならないように個々のリスト項目に
スペースの量と表示方法を設定しておきます
特定のサイズつまり
そのデバイスで有効な幅を超えると
表示の仕方が変わります
リストビューからグリッドビューに変わり
画面のスペースが埋まります
2つ目の例はコンテンツを増やせない場合に
マージンポイントを挿入することができます
右の例のフォーム型アプリでは
スマートフォンより大きく
特定のサイズを超えていて
コンテンツをこれ以上表示できない場合
マージンポイントが挿入されるので
1行が長すぎたりバランスが悪くなったりしません
ニックが小さな画面向けのUI手法を
紹介してくれましたが
小さな画面はUI以外にも影響します
実際アプリのUXにも非常に影響を及ぼします
単にWebやデスクトップのアプリを画面に合わせ
小さくするわけではありません
フローをスマートフォンに
最適化する必要があります
その方法は?
ワイヤーフレームです
Então, o último inconveniente do celular
é a tela pequena. Essa pode parecer
a restrição óbvia, e basicamente
significa que não podemos
colocar muita coisa num
smartphone com tela
bem pequena, mas há duas
técnicas realmente fantásticas
que podemos usar para ajudar
a otimizar nossa pequena UI.
- Sim, elas se chamam
combinação e refluxo.
E vamos conversar com um
desenvolvedor de design Android
chamado Nick Butcher,
que parte do time Android,
sobre como fazer esse trabalho
nos seu aplicativos.
- Então, Android não é um
tamanho único para todos os OS.
Ele vem em diferentes tamanhos
e formas. Desde telefones pequenos
a grandes tablets, televisores
e outros. A grande notícia é que
Android foi construído
desde sua base para ser capaz
de se enquadrar nessa variedade
e te dar ferramentas para lidar com isso.
Então, desde o início Android
te permitiu redimensionar
sua interface pra cima e pra baixo
em diferentes aparelhos.
O problema é que redimensionamento
tem suas limitações.
Então vou te guiar através
de uns erros comuns
que nós vemos quando se confia
muito em redimensionamento
e daí vou mostrar meios
alternativos
para lidar com isso.
Então, o primeiro problema que vemos
com freqüência é o de ter linhas
de comprimento excessivas. Então,
nesse aplicativo, o texto e as imagens
estão corendo na largura total
da tela do aparelho.
Num aparelho menor, do tamanho de um
celular, isso pode ser tranqüilo.
Mas quando você vai além
de um certo tamanho, se torna
desconfortável. Especialmente
se você estiver olhando larguras de
linhas de texto, você gostaria de ter
entre 45 e 75 caracteres de texto
para manter uma experiência
de leitura confortável.
O usuário pode facilmente
passar os olhos no texto.
E nesse aplicativo
podemos ver claramente
que isso é excedido.
O outro problema que vemos
comumente é o de conteúdo
desequilibrado. Então, nesse exemplo
vamos ver que há muito conteúdo
acumulado no canto esquerdo
superior da tela e há espaços
em branco imensos
no resto da tela. Isso leva a
uma sensação perturbadora,
que faz seu aplicativo se completamente
inadequado para o esse aparelho.
E o ultimo problema que vemos
com freqüência é mais de uma
oportunidade quase perdida,
de não fazer o melhor uso
do que está disponível para você.
Então nesse exemplo,
podemos ter um aplicativo
que mostra várias fotos.
Como podemos ver, há esses pequenos
ícones, todos agrupados
em um lado só. É realmente uma pena
não usar essas belas telas
grandes, quando todo
esse espaço extra está disponível pra você
Então você vai querer evitar isso.
Esse são os erros freqüentes
que vemos por confiar muito
em redimensionamentos, e a resposta
para como lidar com esses
problemas é apenas adotar um design
móvel responsivo
para responder às características
do aparelho. Então aqui
estão três técnicas que você pode usar
para fazer isso. A primeira técnica
é uma bem simples de combinação.
Isso, se você tiver espaço sobrando,
combinando diferentes telas
numa tela única
para aparecer melhor, para
preencher o espaço.
Então nesse exemplo, nós temos
uma visão geral detalhada típica,
num celular isso estaria em
duas telas separadas.
Então clicando numa lista de item,
por exemplo, isso pode te mostrar
detalhes subsequentes. Num equipamento
maior, com largura suficiente,
nós podemos mostrar essas duas coisas
de uma vez só. Isso evitará o problema
de ter aquelas linhas em excess e fará
uma uso melhor do espaço da tela.
A segunda técnica é que chamamos
refluxo de macro.
Ela pega os maiores blocos do
seu aplicativo e os remaneja
ou os reorganiza na tela para
um melhor uso do espaço.
Então nesse exemplo, nós simplesmente
movemos algo, tipo, um cabeçalho grande
e uma caixa de texto, ao invés de serem
colocados vertivalmente encima
um do outro, para serem colocados
horizontalmente, um ao lado do outro.
Isso também dá mais espaço a imagens
para serem mostradas
nos espaços maiores de tela,
bem como evitar excessivas linhas longas
quando num equipamento geográfico.
Isso não é útil apenas para equipamentos
de tamanhos diferentes,
você também pode usar esse truque quando
estiver trocando de equipamento
de diferentes orientações.
E a última técnica que eu quero passar
é algo que chamo de refluxo de micro.
Essa técnica realmente se foca nos
blocos individuais
dentro do seu design e delega
responsabilidades àqueles
blocos individuais para otimizá-los,
dentro de uma certa medida
de espaço. Então, uns exemplos
de como fazer isso. Aqui do lado esquerdo,
temos uma lista tipo aplicativo,
que tendo espaço suficiente,
pode levar a excesso de extensão de linhas
ou visões muito desequilibradas.
Ao invés disso, cada lista individual
sabe disso,
dentro de um espaço suficiente,
como se desenhar.
Então quando se dá um certo espaço,
uma certa largura ao equipamento,
ele muda sua apresentação. Ao invés
de ser uma lista de items, digamos,
pode mudar para uma tabela,
uma representação de tabela.
Isso o permitirá ter, saber
preencher melhor o espaço. O segundo
exemplo é se você não puder,
ou se simplesmente não for possível
introduzir mais conteúdo, você pode
colocar num ponto de margem.
Então, esse aplicativo
forma-e-tipo à direita
quando você vai além do celular,
depois de um certo tamanho,
quando não há mais
conteúdo a ser mostrado na tela,
nós simplesmente introduzimos
um ponto de margem para que
não seja excessivamente longo
ou excessivamente desequilibrado.
- Então, o Nick abacou de nos contar
uma técnicas de UI realmente
fantásticas para telas pequenas. Mas telas
pequenas afetam muito mais
do que apenas a UI. Na verdade, afeta
bastante a UX do seu celular.
- Sim, simplesmente pegar a web ou tela
de trablaho e encolher para caber
numa tela pequena provavelmente
não é a maneira correta de se fazer.
- Sim, você realmente precisa pensar
em mobilidade primeiro e
otimizar o fluxo para um smartphone. Então
como fazemos isso? Wireframing.
Wireframing.