游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

提升Android应用视觉效果的10个UI设计技巧

作者:Lauren Darcey & Shane Conder

在Android应用开发中,风格和设计或许不是最关键的要素,但它们在决定Android应用成功与否上确实扮演重要的角色。以下是10个Android应用的UI设计技巧,还有个附加技巧,能够提供你的Android应用的视觉吸引力。

10 tips fro Android UI design(from phandroid.com)

10 tips fro Android UI design(from phandroid.com)

技巧1:使用大小适当的图像

在图像方面,许多Android应用开发者采用的是大小单一的做法。尽管这会使资源管理变得更为简单,但就应用的视觉吸引力而言,这是个错误的做法。要让应用呈现出最佳的视觉效果,那么就应当针对具体的设备屏幕设计不同的图像。最适当的图像才能构建出最棒的用户体验。

技巧2:使用适当格式的图像

我们都见过有些应用在尝试加载某些大型图像时会暂停,这不仅仅因为图像的大小存在偏差,而且还因为图像采用了非理想的格式。Android平台支持许多种媒体格式,比如PNG、JPEG、GIF、BMP和WebP(游戏邦注:仅Android 4.0+版本支持)。PNG是无损图片的理想格式,而JPEG的呈现质量并不稳定。

Android还支持带有Nine-Patch的弹性图像。如果可行的话,可以考虑使用WebP来替代JPEG,因为这种格式在存储和下载时效率更高。也就是说,如果将其作为与较老格式同时使用的独立图片,那么应用整体规模会变大,这就削减了使用新格式的优势。

技巧3:运用微妙动画,颜色来呈现状态改变

在屏幕转场时运用微妙动画以及UI控制颜色变化来呈现应用状态改变,这会让你的应用更显专业感。比如,活动间的淡入淡出使屏幕转变更为自然,改变被按动的按键颜色会突显正在发生的用户动作,清晰地呈现出用户正在做的事情。

Android 3.x及随后的版本可开启硬件加速,这会让动画运行更为流畅。但是需要进行测试,因为并非应用的所有功能都能够兼容硬件加速。

技巧4:用圆角效果来软化UI

Button、PageView等用户界面控制按钮在屏幕上都会呈现矩形的像素形状,但这需要进行处理。在控制界面上,使用圆角效果来软化用户界面的外观,这显得很像Web的风格,但确实很受用户喜欢。

技巧5:在3D效果中使用一致性的“光照”

最新版本的Android平台使用全息样式和3D图标等。如果你在应用的控制按键中使用投影和其他此类样式,确保要使用一致性的“光照”。换句话说,要确保阴影在屏幕上的朝向一致。在图像编辑器中使用相同的数值来创造相同的斜度和纹理。

技巧6:使用高对比度配色方案

当某个家庭成员(游戏邦注:往往是老一辈的人)首次发现可以在邮件中使用带颜色的字体和背景,于是发送给你一封使用白色背景和柠檬黄色字体的电子邮件,这样的邮件阅读起来相当费劲。有些人在设计应用的屏幕时,可能会让玩家难以阅读或导航屏幕中的内容。使用适当的高对比度颜色,会让屏幕更易于查看,缓解眼睛的压力。要将配色方案作为系统资源的一部分,以此为基础来开展其他工作。

技巧7:使用大型和易读的字体

和上述不良配色方案一样,我们也会收到家庭成员发送来带有某些古怪字体、难以阅读的文字。相比其他字体,有些字体确实阅读起来更为容易。

字体大小也是个重要因素,在保持与其他屏幕功能的平衡性的前提下,尽量将字体制作得够大。就像在使用传真机时,使用小于12磅的字体并不合适。

Android 4.0的设计师推出了一种只适用于该平台的新字体,这种字体在移动设备上的阅读很容易,它被称为Roboto。

技巧8:不要过多偏离平台规范

许多成功的手机应用会使用人们较为熟悉的用户界面。它们有简单且主流的用户界面,其使用的控制方式也是用户所熟悉的。在用户界面控制和屏幕设计中,不要表现得过于另类。尽量简单化,与平台其他应用的表现保持一致。以平台作为决定应用表现和行为的线索。

如果你正在制作的UI与众不同,确保用AB测试等客观方法来比较新UI和传统UI,由此来决定新设计方案是否更优化,比如更有效、更易于使用或者看起来更为舒适。

技巧9:遵从UI指导原则

Android程序说明书中有许多可以整合到应用中的UI指导原则。根据应用所使用的Android版本的不同,这些指导原则往往也有所差异。当出现这种情况时,你需要制作多种资产来应对多种指导原则。指导原则涵盖了图标、小部件、菜单和活动等部分。

技巧10:测试用户界面

开发者往往不是优秀的QA或测试者。应用可稳定运行后,面向完全不熟悉应用设计和意图的用户开展测试是很有价值的做法。应用设计师往往自认为用户会觉得他们的应用UI很直观,情况或许并非如此。只有真正让用户来测试应用,你才能够在发布应用前发现许多意料之外的问题。

附加技巧:雇佣职业美术或图像设计师

现在,用户期望看到外观精美且设计专业的应用。正如你不会衣着随便地去参加面试,所以你应当投入足够的资源来润色应用外观后再将其发布。在多数情况下,程序员往往不是技术娴熟的美术人员,所以可以考虑雇佣职业美术人员来完成这项工作,只是要确保你对设计结果有清晰的认识。

当你埋头进行Android应用开发时,往往很容易遗忘用户界面设计。在你的应用相对较稳定后,浏览这个列表,对应用进行润色。通常来说,这些任务最好留到开发后期,因为此时的屏幕内容相对较为固定。

游戏邦注:本文发稿于2012年1月17日,所涉时间、事件和数据均以此为准。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

10 Android UI Design Tips to Improve Your App’s Visual Appeal

Lauren Darcey & Shane Conder

When it comes to Android app development, style and design may not trump substance, but they certainly play an important role in whether or not your Android app is successful. Here are 10 Android UI design tips — plus a bonus one — for improving the visual appeal of your Android apps.

Android UI Design Tip #1. Use Appropriately Sized Graphics

When it comes to graphics, many Android app developers take a “one size fits most” approach. While this makes for simpler resource management, it can be a mistake in terms of the visual appeal of your app. In order for an app to look its best, it should include graphics tailored to specific device screens (dimension-wise) as alternative resources. The most appropriate graphics will be loaded at runtime, making for the best user experience possible.

Android UI Design Tip #2. Use Appropriately Formatted Graphics

We’ve all seen apps that grind to a halt while trying to load some gigantic graphic file that is not only the wrong size, but a less-than-ideal format. The Android platform supports a number of media formats, such as PNG, JPEG, GIF, BMP and WebP (Android 4.0+). PNG is the ideal format for lossless images, while JPEG quality is “tweakable.”

Android also supports stretchable graphics with Nine-Patch. Consider using WebP, when available, in place of JPEG, as it may be a more efficient choice when it comes to storage and download sizes. That said, if used as a separate set of images alongside older formats, the overall package size will be larger, offsetting any benefits of using the newer format.

Android UI Design Tip #3. Apply Subtle Animations and Use Colors to Display State Changes

Applying subtle animations during screen transitions and UI control color differentiation to communicate application state changes adds professional flair to your applications. For example, fading between activities makes screen transitions less jarring, while changing the color of a button control when it is pressed highlights a user action as it is taking place, clarifying what the user is doing.

Turning on hardware acceleration, available on Android 3.x and later, may allow animations to run more smoothly. But test well, as not all features are available when hardware acceleration is enabled for the app.

Android UI Design Tip #4. Soften the UI with Rounded Corners

Each user interface control, such as a Button or ImageView, takes up a rectangle of pixels on the screen, but it need not be a harsh, pointy-cornered deal. Soften the look of the user interface by using rounded corners on your controls — a very Web-like style, yes, but popular with users.

Android UI Design Tip #5. Use Consistent “Lighting” for 3-D Effects

The newer versions of the Android platform use holographic styling, 3-D icons, and the like. If you are providing your own controls with drop shadows and other such styling, make sure you use consistent “lighting” — in other words, make sure the shadows are all consistently oriented on a screen. Likewise with gradients; use consistent values in your graphics editor (such as Photoshop) to create consistent gradients and textures.

Android UI Design Tip #6. Use High-Contrast Color Schemes for Easy Viewing

You know how you cringe the first time a family member (usually of an older generation) discovers colored fonts and backgrounds, and sends you an impossible-to-read email with lemon yellow text on a white background, or fuchsia on orange? Well, some people design applications with screens that make it difficult to read or navigate. Use moderately high-contrasting color screens for easy viewing without harsh eye strain. Start with the color schemes provided as part of the system resources and work from there.

Android UI Design Tip #7. Use Large, Readable Fonts and Font Styles

Just like bad color schemes, we’ve all had family members send us unreadable text in some wacky font that was likely designed by demented, calligraphy-obsessed monks who drank too much mead. Certain fonts are easier to read than others.

Font size is also a factor — make the font as big as possible without losing the balance with other screen features. Just like with a fax machine, fonts below 12pt are usually not a good idea.

The designers of Android 4.0 (Ice Cream Sandwich) designed a new font just for the platform — one that is easy to read on a mobile device. It’s called Roboto.

Android UI Design Tip #8. Don’t Deviate Too Far from Platform Norms

Many of the most successful mobile applications leverage user interface patterns that users are familiar with. They have simple, streamlined user interfaces that use controls as they were intended to be used. Don’t try to be too different when it comes to user interface controls and screen design. Just keep it simple and in line with how the rest of the platform behaves. Use the platform as a cue for how your app should look and behave.

If you are creating a UI that is different, make sure to use objective methods such as user studies and A/B-style testing to compare against a more traditional version of your UI to determine if it is better — i.e. more efficient, easier to use, and perhaps more pleasant looking.

Android UI Design Tip #9. Follow Documented UI Guidelines

The Android documentation includes many UI guidelines to incorporate into your app. These guidelines often vary depending on the version of Android on which your app will appear. When this happens, you’ll need to include alternate resources to cover multiple guidelines. The guidelines cover icons of all types, widgets, menus, and activities.

Android UI Design Tip #10. Beta Test Your App User Interface

Developers do not make good QA or beta testers. After your app is reasonably stable, it’s usually worthwhile to perform some true beta testing with users completely unfamiliar with your application design and intentions. App designers often assume users will find their application UIs intuitive when they may not. Only by putting your app in front of users can you discover any unanticipated issues before you publish.

Bonus Android UI Design Tip: Consider a Professional Artist or Graphic Designer

These days users expect an application to look polished and professional. Just like you wouldn’t go to a job interview in your pajamas, you shouldn’t publish apps without spending a reasonable amount of resources making the app look awesome. In many cases, code monkeys are not very skilled artists, so it’s worth hiring a professional to help you out. Just make sure you are clear about the requirements — mobile design is a specialty.

Conclusion

When you’ve had your head down developing your Android app, it’s easy to forget about the user interface design. It’s a good idea to walk through this list after your application is relatively stable and add some professional polish. These tasks are generally best left until late in the development lifecycle when screen content is relatively stable, as it makes no sense to tweak and perfect contents your app won’t be using at publication time. (Source: developer.com)


上一篇:

下一篇: