美文网首页我爱编程
安卓设计指南

安卓设计指南

作者: 猿万 | 来源:发表于2018-03-23 19:20 被阅读0次

Android Cheatsheet for Graphic Designers

Graphic designers aren't programmers and sometimes don't know how to properly prepare graphic assets for developers. This simple cheatsheet should help them to do their job better, and to simplify developers' lives.

Content

Dimensions

Screen densities and icon dimensions

Google Play asset dimensions

Dimension units

Size buckets

Views dimensions and spacing

Action bar height

Text size

Images and themes

Nine-patch

Colors

Holo themes

Naming conventions

Naming conventions for drawables

Naming conventions for icon assets

Naming conventions for selector states

Organizing drawables to directories

Resources

Graphic generators

Useful links for designers

Download

Written by

Dimensions

Screen densities and icon dimensions

各种图表大小

Notice: the first icon dimension in table cell is full asset size, the second icon dimension is optical square. Dimension values are in pixels.

Tip: creating ldpi assets is not really needed anymore. The devices are rare and the platform will just scale down mdpi.

Sources and useful links: IconographySupporting Multiple ScreensIcon Design GuidelinesDimension

Google Play asset dimensions

Video linknoURL of YouTube video-

Sources and useful links: Graphic and Image AssetsGoogle Play Featured-Image GuidelinesIconography

Dimension units

dimen单位

Sources and useful links: Understanding Density Independence in Android

Size buckets

Sources and useful links: Metrics and Grids

Views dimensions and spacing

Touchable UI components are generally laid out along 48 dp units. Spacing between each UI element is 8 dp.

Sources and useful links: Metrics and Grids

Action bar height

actionBar的高度

Sources and useful links: Action Bar

Text size

文字大小

Notice: one sp (scale-independent pixel) is one pixel on a 160 DPI screen if the user's global text scale is set to 100%.

Sources and useful links: Typography

Images and themes

Nine-patch

A Nine-patch drawable is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the view in which you have placed it as the background, e.g. nine-patch background for button, which must stretch to accommodate strings of various lengths. The rules for nine-patch image are following:

Sources and useful links: Canvas and DrawablesDraw 9-patchSimple Nine-patch Generator

Colors

Use color primarily for emphasis. Blue is the standard accent color in Android's color palette. Note that red and green may be indistinguishable to color-blind users. Primary colors are as follows:

Sources and useful links: Color

Holo themes

Android provides three system themes:

Holo Light

Holo Dark

Holo Light with dark action bar

Sources and useful links: ThemesHolo Everywhere

Naming conventions

Naming conventions for drawables

File names must contain only lowercase a-z, 0-9, or _.

Drawables for the specific views (ListView, TextView, EditText, ProgressBar, CheckBox etc.) should be named like this views keeping the naming rules, e.g. drawable for CheckBox should be named "checkbox_on_bg.png".

Asset TypePrefixExample

Action barab_ab_stacked.9.png

Buttonbtn_btn_send_pressed.9.png

Dialogdialog_dialog_top.9.png

Dividerdivider_divider_horizontal.9.png

Iconic_ic_star.png

Menumenu_menu_submenu_bg.9.png

Notificationnotification_notification_bg.9.png

Tabstab_tab_pressed.9.png

Sources and useful links: naming conventions taken from the Android SDK

Naming conventions for icon assets

Asset TypePrefixExample

Iconsic_ic_star.png

Launcher iconsic_launcheric_launcher_calendar.png

Action bar iconsic_menuic_menu_archive.png

Status bar iconsic_stat_notifyic_stat_notify_msg.png

Tab iconsic_tabic_tab_recent.png

Dialog iconsic_dialogic_dialog_info.png

Sources and useful links: Icon Design Guidelines

Naming conventions for selector states

StateSuffixExample

Normal_normalbtn_order_normal.9.png

Pressed_pressedbtn_order_pressed.9.png

Focused_focusedbtn_order_focused.9.png

Disabled_disabledbtn_order_disabled.9.png

Selected_selectedbtn_order_selected.9.png

Sources and useful links: Touch Feedback

Organizing drawables to directories

One drawable must have the same file name for all screen densities (ldpi, mdpi, hdpi etc.) and all these files must be organized according to density into the following directories. Here's the resources directory structure for drawables:

res

drawable-ldpi

drawable-mdpi

drawable-hdpi

drawable-xhdpi

drawable-xxhdpi

Resources

Graphic generators

Android Asset Resizer

Android Asset Studio

Android Button Maker

Android Holo Colors IntelliJ Plugin

Device Art Generator

Google Play Badges

Useful links for designers

Android Design Guidelines

Android Design in Action

Android DP / PX Converter

Android DPI Calculator

Android Niceties

Android Views

Android Views/UI Components

App Patterns

Design Tools

Holo Everywhere

相关文章

  • 安卓设计指南

    Android Cheatsheet for Graphic Designers Graphic designer...

  • mapbox-gl-native 安卓小白编译指南

    mapbox-gl-native安卓小白编译指南 引用:安卓小白编译指南.MD 安装 ubuntu 16.04 d...

  • 安卓APP设计指南

    安卓设备的型号与iOS设备有所不同,而且界面风格和用户的交互习惯都与iOS不同,直接使用iOS的设计图会降低展示效...

  • 安卓架构指南

    Architecture Guidelines 安卓架构指南 The architecture of our An...

  • 2.React Native安卓开发环境安装

    翻译自:官网原文在运行React Native安卓应用时,需要一个安卓模拟器。这个指南用于描述基本的安卓开发环境安...

  • 2018.11.26(分享关于Android的设计规范)

    1.每日文章 — 关于安卓端设计的规范: 安卓设计尺寸规范 界面切图命名规范 安卓验收规范 — 相关总结:(emm...

  • 安卓设计模式(二)单例模式

    单例模式是使用最广的设计模式,也是大家最为熟知的. 该系列其他文章: 安卓设计模式(一)面向对象六大设计原则 安卓...

  • 安卓工程指南

    1. Project guidelines 工程指南 1.1 Project structure 工程架构New ...

  • 安卓食用指南

    在这之前区分下软件的区别 不画圈的 这个样 花圈的 这个样 网站提供的通常是第二种花圈的单导入方法都一样 两种方法...

  • 安卓 WebView 指南

    一: WebView 基本配置及使用 1:WebSetting 管理 WebView 状态配置 2:WebVie...

网友评论

    本文标题:安卓设计指南

    本文链接:https://www.haomeiwen.com/subject/ydoxcftx.html