|   登录   |   注册   |   设为首页   |   加入收藏   

用户登录

close

用户名:

密码:

新用户注册

close

用户名:

密码:

密码确认:

电子邮箱:

关注内容:

个人主页:

帮助

close

龙宇网成立于2008年3月,网站进入整体运作于2010年10月1日。

在这里,我们把它做成了一个真正意义上的网站,完全以个人的信息为内容,以网友的需要为主导,全力搜罗各种信息,建立完善的网站功能,使网友在这里可以第一时间找到所需要的信息。

现在,经过三年的努力,网站的资料已经相当丰富,而网站得到了大家的喜爱和认可。

但,我们还是会继续努力下去,让网间的这份快乐继续持续下去,让这份闲暇时的日子,与快乐一并同行。

寻觅快乐,网住快乐,关注网络,是龙宇网的宣言与承诺。

How To Design For Android Devices(Android设备如何做设计)

分类: 移动开发 发布时间: 2013-02-25 18:26:48 浏览次数: 3235
内容提要: This will be part a series as I’m still in the middle of learning and updating my processes for Android. I used to not pay much attention to their guidelines because I considered them inconsistent and unactractive at the time, but I believe that now things have cha

This will be part a series as I’m still in the middle of learning and updating my processes for Android. I used to not pay much attention to their guidelines because I considered them inconsistent and unactractive at the time, but I believe that now things have changed. I’m starting to see a pattern. That’s a good thing when it comes to a platform’s maturity.

android-heyzap

The Back Button

For the longest time, the back button was never part of the user interface because of the hardware equivalent. It has changed since. It’s a pretty popular use now to include the back arrow next to the App’s logo when you browse sub-level content. The user interface’s back button (they call it “up button”) acts slightly differently than the hardware’s back button. While the up button goes up one level in your application only, the back button can go back to any previous application and content.

Resolutions

All the resolutions on Android are pretty confusing, i.e. we have xhdpi (2x), hdpi (1.5x) and mdpi (1x). They sound extremely technical. When I first started almost a year ago, the engineers couldn’t even explain to me what the ratio were for each of those. I had to figure it out by asking a lot of questions. The resolutions you should design in are 720×1280, 540×960 and 360×640. Make sure to include hardware buttons and the status bar on your design for high-fidelity mockups.

Starter Kit

Jeremy Sallée, designer at Telly, made a very helpful visual document that shows how the 3 resolutions differ. Also, you should head to the Android Action Bar Style Generator for a starter kit in a default theme. It lets you customize some basic settings such as colors and styles and you will get a zip file with all the assets all prepared for you in all 3 resolutions. The best way to learn is by experimenting with a real demo.

android-telly

android-starter

9-slice Scaling

Android has a peculiar way of managing graphical assets that is much different from how CSS does it. 9-slicing allows you to specify which area of the asset you want stretched and which area you want the content to be bounded by. The rest, such as rounded corners, can remain intact even if you resize the asset. On the asset, you have to draw these 1px black lines:

  • Top: this area will stretch horizontally.
  • Left: this area will stretch vertically.
  • Right: this area will allow content vertically. This is where you set the padding for your content.
  • Bottom: this area will allow content horizontally.

android-9slice

The Action Bar

Unlike the iPhone where the title usually goes in the middle of the header, on Android, the title is at the top left and next to the app’s logo. Tapping the logo usually leads to a side menu or to the last content you were on.

android-actionbar

The title sometimes has a triangle arrow below it that indicates that you can navigate sub-level content. Just like on the Web, it is very common to see drop-down menus on Android.

android-refresh

Finally, if you respect their guidelines, all actions should be on the far top right. That includes functions like Refresh (because Pull to Refresh is extremely uncommon on Android), Search and the infamous Action button which is normally represented by 3 dots. The action button is used for more actions that couldn’t fit on the Action Bar.

android-dots

Fonts

Fonts are unfortunately device-specific so better expect crappiness on some devices. Don’t get discouraged if you find yourself in a situation where you have to test your design on an old phone. There were worse days — remember IE6. The most popular font on Android is Droid Sans. It’s free to download. However, Roboto is gaining popularity since it’s present on newer devices.

Content Dimensions

In 2x, the minimum pixel dimension should be 28px for text, 96px for menus & header and 116px for the footer. It is only slightly bigger than on iOS (24px, 88px and 100px). We’re only talking about a ratio of 116% from Android to iOS.

Preview Your Design On Your Android Phone

Roman Nurik from Google released a pretty useful tool called Android Design Preview which allows you to preview your desktop view or design image to your Android device in pixel-perfection glory. Don’t even try Dropbox, the image get compressed badly.

Tip: on the Mac, you have to make sure that you allow applications downloaded outside the App Store by going to Security and Privacy in your System Preferences.

android-previewsettings

Another tip: the only way to preview your design is by connecting with your USB cable to the device and click “Install App”. This took me a while to figure out because I took for granted that they had an Android app on the Play store and that I would be able to preview using WiFi. Nope.

android-preview

译文地址:http://www.csdn.net/article/2013-02-18/2814173-how-to-design-for-android-devices

15
20

分类: 移动开发   |   评论: 0   |   引用: 0   |   浏览次数: 3235