TA~DA~~  成品

IAT343上周的作业是制作一个5秒的3d小短片,因为这次的重点是动画,所以想做些有趣的,又不花时间建模的,又有情怀的。。于是试着给box做了个3d小短片。

上课提到1930年由沃特迪士尼工作室建立了12个动画基本原则,之前读过一篇讲UI动画的文章,里面也摘录了一些经典原则。。果然是应用广泛。。。

说说制作这个小视频的过程,U盘参照Kingston’s Data Traveler HyperX建的,参考了朋友的实物比例,贴图材质的时候只找到1TB的截图。。于是用ps抠下了U盘身上的那两个logo,放到金属贴图上、渲染用了mental ray,不知道为何maya2015的材质包里没有直接的Metal小球, 用mental ray调了好久的参数。。。((最后渲染效果还是不咋地。。。

好的要说动画了,做动画的时候没用骨骼动画,用了关键帧,因为部件的移动方式都是比较机械的,所以觉得没必要用骨骼。虽然最后做到box那个logo那边觉得可以加一些面部表情或者形态变化来丰富角色,但是最后由于某些原因没有完成(待会儿会提到)、

一开始觉得让一个polygon变形是比较容易的事情,但是关键帧只会记录polygon的放缩、物理位置的变化以及角度变化,如果在某一帧改变了polygon的具体形态,那么这个改变是全局的。咨询了TA,只得到了黑科技。。制作两个polygon在两帧之间快速切换,把原始polygon移动到很远很远或者放缩成很小很小。。这样导致的问题是polygon之间过渡非常生硬。。比如窝这边颜色以及画风的变化。。所以在变形的时候放弃了让polygon本身产生变形的想法,更多的采用放缩、角度变化。。

变形之后的那个画风看起来比较卡通,是用了cel shading,在render模式的面板里有tone选项,在这边可以像添加蒙板一样给3d物体添加一个纯色,或者添加一个线框。

debug的过程非常痛苦。。。为了防止渲染到一半电脑挂掉,我采用了逐帧渲染成png序列,然后导入ae编辑、经常出现黑科技里提到polygon在变换的时候出现模型交叉的情况,看起来非常蠢。。所以渲染到一半发现有某帧不对劲了,赶紧调整,继续渲染。。渲染一张图大概要10来秒,这是个100来帧的动画,所以渲染一遍大概需要花非常漫长的时间。。窝大概渲染了十几回。。才最终调整好模型。。。这也是之后没有时间折腾骨骼动画的原因。。。

不是很会用ae,看了个basic tutorial就上手,对其插入bgm却只能等到视频渲染完才能听到声音的feature非常不理解。。。于是渲染视频又不下5遍。。。

最后时间还是挺仓促的,变形的过程也并不是自己原来开的脑洞。。

今天评分结果出来了。。给分还是蛮不错的。。。

继续探索。。。

This is my notebook for some small tips and tricks when using Arch Linux.

Why Arch Linux?

  • It is fresh and simple in package dependency.

  • It has a powerful Arch User Repository and makes it easy for you to make/modify your package.

  • It has a detailed Arch Wiki comprising useful experiences and recommendations.

  • It gets you to learn the basic knowledge required to be a Linux user/administrator/programmer.

Using manual

Use man [SECTION] <NAME> to show a manual.

Use whatis <NAME> to find out which sections are available in manual.

Use apropos <KEYWORD> to search for manuals whose name or description contains certain keyword.

Use man man-pages to see the definition of each seciton.

Use help -m <BUILTIN> to show help for a shell builtin in manual page format.

The “SEE ALSO” section in a manual sometimes can be very helpful.

Find available commands

Shell builtin compgen can list possible completions for your input.

NTFS partitions auto mounting

  1. Use gnome-disks, select partition and click the settings button below, click and then modify mount options in the popup menu.

  2. Install ntfs-config and enable auto mounting.

Disable Nvidia graphics

Install bumblebee and bbswitch.

And create /etc/modprobe.d/nouveau_blacklist.conf as follow, or else bbswitch will find Nvidia graphics in use by nouveau.

1
blacklist nouveau

You can verify bbswitch status by cat /proc/acpi/bbswitch and view its log by dmesg | grep bbswitch.

Note that nouveau kernel module is shipped in linux.

Shrink pacman cache

From Arch Wiki:

paccache -r deletes all the cached versions of each package except for the most recent 3 (without confirmation).

paccache -ruk0 removes all the cached versions of uninstalled packages.

See paccache -h for dry run and other parameters.

Better diff

alias diff='git diff --no-index' works great with the only requirement of git.

Make programs use proxy

There are several ways to make a program proxied. Part of the following comes from Arch Wiki.

  • Environment variables

    Some programs respect proxy set via environment variables.

    1
    2
    3
    4
    5
    export http_proxy=http://10.203.0.1:5187/
    export https_proxy=$http_proxy
    export ftp_proxy=$http_proxy
    export rsync_proxy=$http_proxy
    export no_proxy="localhost,127.0.0.1,localaddress,.localdomain.com"

    It is sometimes advised that you export these environment variables again, with their names upper cased.

  • Proxychains

    Install proxychains-ng. Proxychains hooks some C library functions so that programs gets proxied. However the Java VM cannot be proxied this way.

    1
    proxychains <YOUR_PROGRAM>
  • Java

    From the documentation of Java:

    • HTTP

      • http.proxyHost: the host name of the proxy server

      • http.proxyPort: the port number, the default value being 80.

      • http.nonProxyHosts: a list of hosts that should be reached directly, bypassing the proxy. This is a list of patterns separated by ‘|’. The patterns may start or end with a ‘*’ for wildcards. Any host matching one of these patterns will be reached through a direct connection instead of through a proxy.

    • HTTPS

      • https.proxyHost

        https.proxyPort

    • FTP

      • ftp.proxyHost (Typo in official documentation)

      • ftp.proxyPort

      • ftp.nonProxyHosts

    • SOCKS

      • socksProxyHost for the host name of the SOCKS proxy server

      • socksProxyPort for the port number, the default value being 1080

      • socksProxyVersion for the version of the SOCKS protocol, the default being 5, and alternatively 4 can be specified.

      Note: socksProxyVersion and more properties are documented at another documentation of Java.

      Sample usage:

      1
      java -Dhttp.proxyHost=webcache.example.com -Dhttp.proxyPort=8080 -Dhttp.nonProxyHosts=”localhost|host.example.com”

Note that you can tunnel http(s) request to local socks client using DeleGate.

GNOME proxy setting

You can utilize GNOME’s proxy setting in Settings > Network even if you use netctl instead of Network Manager (Disabled in recent GNOME, see below). Both HTTP and SOCKS proxy are supported.

You can also modify proxy setting with dconf-editor, Set system.proxy.mode to manual, then set your proxy in system.proxy.{ftp,http,https,socks}.

Note that the proxy setting will also be read and set to corresponding environment variables by gnome-terminal, and no option is offered to turn this behavior off. To avoid setting proxy environment variables, reset the environment variables in your .bashrc.

1
2
3
4
# Unset global proxy set by gnome-terminal
# See https://github.com/GNOME/gnome-terminal/blob/master/src/terminal-util.c
unset http_proxy https_proxy ftp_proxy all_proxy no_proxy
unset HTTP_PROXY HTTPS_PROXY FTP_PROXY ALL_PROXY NO_PROXY

GNOME online account

You can log in your Google account and all the things will be configured and synchronized automatically to your laptop. It can be a huge boost for your work flow.

If you need a proxy to access Google, configure it as in the GNOME proxy setting section.

Save ssh key passphrase to keyring

As in Arch Wiki, use seahorse-ssh-askpass.

As of seahorse 3.18.0-2, SSH_ASKPASS is not exported by default anymore, so you will need to add the following lines to your /etc/profile.

1
2
# Set ssh askpass
SSH_ASKPASS=/usr/lib/seahorse/seahorse-ssh-askpass

Nautilus hangs occasionally

In my case it often happened when I started to search something. Turned out that it is caused by my putting too many files under indexed directories.

To fix the hang up, launch tracker-preferences, go to “Locations” tab, and turn off “Recurse” for directories you may store a large amount of files. Then execute tracker reset --hard to reset tracker index and configurations. This resolved my issue so far.

DNS and resolvconf

DNS is managed by resolvconf in Arch Linux. In order to supply your own DNS, edit /etc/resolvconf.conf.

There are two options you may normally want to specify:

1
2
name_servers=<DNS1> #Prepended into DNS list
name_servers_append="<DNS2> <DNS3> ..."

After modification, you may want to execute resolvconf -u to update resolv.conf.

Note that dhcpd also setup DNS for interfaces via resolvconf, in /run/resolvconf/interface/<INTERFACE>. You can override its behavior by executing dhcpcd -S domain_name_servers=<DNS>, or inside dhcpcd.conf.

Boost entropy

If the output of cat /proc/sys/kernel/random/entropy_avail is less than 1000, you need to install and enable havedged.

1
2
3
sudo pacman -S havedged
sudo systemctl enable havedged
sudo systemctl start havedged

Create software AP (Access Point), a.k.a. virtual WiFi

Install AUR package create_ap; you may want to remove the wifi.service it automatically creates when installed and use your own.

Check the Capabilities section in iw list along with /usr/share/doc/hostapd/hostapd.conf to determine ht_capab.

Note that in ZJU, ZJUWLAN occupies channel 1 and 6, so you’d better specify another channel.

Sample systemd service:

File: <YOUR_SSID>@.service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[Unit]
Description=Create AP service for <YOUR_SSID>
After=network.target

[Service]

Type=simple
ExecStart=/usr/bin/create_ap -c 13 -w 2 -m nat --ieee80211n --ht_capab [HT40-][HT40+][SMPS-STATIC][GF][SHORT-GI-20][SHORT-GI-40][DSSS_CCK-40] <YOUR_WLAN_INTERFACE> %i <YOUR_SSID> <YOUR_PASSPHRASE>
ExecStop=pkill hostapd
KillSignal=SIGINT
Restart=on-failure
RestartSec=5

[Install]

WantedBy=multi-user.target

However on my own machine, I cannot share a secure (with password) network.

Analyze network issue

Use mtr(My traceroute), a tool combining much of the functionality of ping and traceroute into one interface.

Raise inotify limit for IntelliJ IDEA

Write the following line to /etc/sysctl.d/99-custom.conf

1
fs.inotify.max_user_watches = 524288

Sysrq

Write the following line to /etc/sysctl.d/99-custom.conf to enable all the sysrq operations.

1
kernel.sysrq = 1

Reboot to make changes take effect, or execute echo 1 >/proc/sys/kernel/sysrq.

Hold Alt, and press the following key sequence.

  1. SysRq
  2. R unRaw
  3. E tErminate
  4. I kIll
  5. S Sync
  6. U Unmount
  7. B reBoot

Note that the key C can make your kernel panic immediately.

Watch FS buffer status

1
watch grep -e Dirty: -e Writeback: /proc/meminfo

You can execute sync to flush the buffer immediately.

Map Alt Gr (Right Alt) to Alt in tty

From Arch Wiki

1
2
3
cd /usr/share/kbd/keymaps/i386/qwerty
cp us.map.gz us-two-alt-keys.map.gz
gunzip us-two-alt-keys.map.gz

Edit us-two-alt-keys.map,replace include "linux-with-alt-and-altgr" with include "linux-with-two-alt-keys".

1
gzip us-two-alt-keys.map

Edit /etc/vconsole.conf, replace KEYMAP=us with KEYMAP=us-two-alt-keys.

Reboot.

Execute previous commands in bash

Ctrl+R (I-search backward in emacs) can let you quickly execute command in your history.

!! is substituted to be the last command in your history, but be careful when using it, for example echo !! will lead to unexpected behavior if !! is substituted to be something && poweroff, then poweroff will be executed. To avoid such cases, always wrap it with quotes, like echo '!!'.

Input tab or newline character in bash

Ctrl+V in bash works as Ctrl+Q in emacs, which will insert the next character literally.

Default font

To specify your preference on default fonts, create /etc/fonts/local.conf, and edit it like the following example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<match>
<test name="family"><string>sans-serif</string></test>
<edit name="family" mode="prepend" binding="strong">
<string>WenQuanYi Micro Hei</string>
<string>WenQuanYi Zen Hei</string>
<string>WenQuanYi Bitmap Song</string>
<string>DejaVu Sans</string>
</edit>
</match>
<match>
<test name="family"><string>serif</string></test>
<edit name="family" mode="prepend" binding="strong">
<string>DejaVu Serif</string>
<string>WenQuanYi Bitmap Song</string>
<string>WenQuanYi Zen Hei Sharp</string>
<string>AR PL UMing CN</string>
<string>AR PL UMing TW</string>
<string>AR PL New Sung</string>
</edit>
</match>
<match>
<test name="family"><string>monospace</string></test>
<edit name="family" mode="prepend" binding="strong">
<string>WenQuanYi Micro Hei Mono</string>
<string>WenQuanYi Zen Hei Mono</string>
<string>WenQuanYi Bitmap Song</string>
<string>DejaVu Sans Mono</string>
</edit>
</match>
</fontconfig>

Now you have appropriate fonts for sans-serif, serif and monospace as default.

For more information, see Arch Wiki.

Install font

From Arch Wiki:

Drop your font files into ~/.fonts/, cd into that directory, and execute the following command.

1
2
3
4
5
echo -n "Updating font cache..."
fc-cache >/dev/null -f
mkfontscale
mkfontdir
echo done

Handle filesystem package update

Use diff and your editor to manually merge your passwd, shadow, group and gshadow with the *.pacnew one(s), then execute pwconv and groupconv for updating the shadow ones (*-).

Sync time with NTP

1
2
sudo pacman -S ntp
sudo ntpd -gq && sudo hwclock -w

For more information, see Arch Wiki.

Analyze boot time

1
2
systemd-analyze blame
systemd-analyze critical-chain

For more information, see man systemd-analyze.

Sometimes man-db.service may slow down the booting drastically, see this thread, this issue, and this issue.

Sometimes journald can slow down the booting for having too many journal files, see this Arch Wiki to set an limit on old journal files and clean them up.

System backup using tar

Install AUR package system-tar-and-restore.

Example: /etc/backup.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# Configuration file for backup.sh script.
# Place it in /etc/backup.conf and edit it to your needs.


# Set the interface. Available options: cli dialog.
BRinterface="cli"

# Uncomment to disable colors.
#BRnocolor="Yes"

# Uncomment to enable verbose archiver output.
#BRverb="Yes"

# Set the destination directory. Default is /.
BRFOLDER="/run/media/zh/ZH-HDD/"

# Uncomment to set alternative archive name. Default is 'Backup-$(hostname)-$(date +%d-%m-%Y-%T)'.
#BRNAME="my_backup"

# Set the archiver. Available options: tar bsdtar.
BRarchiver="tar"

# Set the compressor. Available options: gzip bzip2 xz none.
BRcompression="gzip"

# Uncomment to keep /home's hidden files and folders only.
#BRhome="No"

# Uncomment to completely exclude /home directory. Use with BRhome="No".
#BRhidden="No"

# Uncomment to set additional archiver options.
BR_USER_OPTS="--exclude=/var/cache/* --exclude=/home/zh/.cache/* --acls --xattrs"

# Uncomment to disable genkernel check in gentoo.
#BRgenkernel="No"

# Uncomment to be quiet.
#BRquiet="Yes"

To start a backup, execute backup.sh as root.

Rename files with number

1
find -name '*.png' | sort -n -r | gawk '{ printf"mv %s %03d.pngn", $0, NR }' | bash

100 files, reversely:

1
find -name '*.png' | sort -n -r | gawk '{ printf"mv %s %03d.pngn", $0, 100 - NR }' | bash

Starting with 100:

1
find -name '*.png' | sort -n -r | gawk '{ printf"mv %s %03d.pngn", $0, 100 + NR }' | bash

Shell calculator

From an AskUbuntu question.

Add the following lines to your .bashrc.

1
2
3
4
=() {
input="${@//pi/π}"
echo -ne "$inputnquit" | gcalccmd | sed 's:^> ::g'
}

For example, = "e^(i*pi)+asin(1)/90" gives 0.

Use English-named XDG user directories

As in Arch Wiki, execute LC_ALL='en_US.UTF-8' xdg-user-dirs-update.

GNOME 3 start up applications

As of GNOME 3.12, gnome-session-properties is removed. Instead, launch gnome-tweak-tool and go to the corresponding tab. If you cannot add a start up application (the add button not responding), try launching gnome-tweak-tool from your terminal.

To truly manage your start up applications, go to ~/.config/autostart/ and edit the desktop files there.

Pomodoro for GNOME 3

Install AUR package gnome-shell-pomodoro.

Clipboard management tool for GNOME 3

Install AUR package gpaste, restart GNOME shell and enable the extension GPaste.

View video codec information

Use ffprobe.

Clip video

From StackOverflow:

If you want to support video players without edit list support (or actually drop the unused frames), you need to do a re-encode, which is the default if copy is not specified.

Normally, you can use the following command to clip a video:

1
ffmpeg -i <INPUT_FILE> [-ss <START_TIME>] [-t <STOP_TIME>] [-async 1] <OUTPUT_FILE>

Convert video to animated GIF

Adapted From dtbaker and a SuperUser question.

1
2
3
mkdir frames
ffmpeg -ss <HH:MM:SS[.XXX]|START_SECONDS> -t<HH:MM:SS[.XXX]|DURATION_SECONDS> -i <YOUR_VIDEO_FILE> [-r <FPS>] -s <WIDTH_NORMALLY_480>x<HEIGHT_NORMALLY_270> ./frames/frame%04d.png
convert -delay <100/FPS> -loop 0 -layers Optimize ./frames/frame*.png output.gif

If you need to compress your GIF file, use gifsicle or do it online; for cropping, you also can use this site with option “Crop with Gifsicle” (ImageMagick output seems corrupted).

Convert SVG to PNG (or else)

1
inkscape --export-png=<OUTPUT_FILE> --export-width=<WIDTH> --export-height=<HEIGHT>

--export-dpi is also available.

See man inkscape for more formats.

Convert PDF to PNG

From StackOverflow.

1
convert -density 300 <YOUR_FILE.pdf> <YOUR_FILE.png>

Where the density parameter is your desired DPI.

Bitmap operation

Resize:

1
mogrify -interpolate bicubic -resize 50% *.png

Crop:

1
mogrify -crop 1080x1845+0+75 *.png

Merge PDFs

1
pdfunite <SOURCE_PDF_FILES> <OUTPUT_PDF_FILE>

Convert GB* encoded mp3 tag to Unicode

Install package easytag.

Note that EasyTag may become the handler for MIME type inode/directory, instead of your own file manager, say, Nautilus. You can delete the default association for Easytag and inode/directory in ~/.local/share/applications/mimeapps.list, which is managed by gvfs-mime. See also the MIME type section.

Edit FLAC metadata

Use metaflac from the flac package.

Test FLAC integrity

Use flac --test <YOUR_FLAC_FILE>.

MIME type handling

In GNOME, there are two components managing the default application for a MIME type.

The first one, which is system-wide, can be queried or set via xdg-mime.

The second one, which is a per-user setting, can be queried or set via gvfs-mime, or manually editing ~/.local/share/applications/mimeapps.list.

The second one takes precedence, and I guess gvfs-mime is implemented partially for GNOME Open with dialog.

Google URL in Google Chrome

Open ~/.config/google-chrome/Default/Preferences, edit last_known_google_url and last_prompted_google_url.

If Chrome keeps reverting the url, visiting https://www.google.com/ncr may help.

Screenshot

Shortcut keys for screenshot is listed in the search category of its setting.

  1. Screen to file: PrtSc

  2. Window to file: Alt + PrtSc

  3. Area to file: Shift + PrtSc

  4. To clipboard instead: Ctrl + above

  5. Record: Shift + Ctrl + Alt + R

To open a dialog for settings before screenshot, execute gnome-screenshot -i.

Use PrtSc key for Menu

On my ThinkPad T450, the usual location for Menu key is a PrtSc key. I tried to change it with xmodmap, but it cannot get automatically loaded by my GNOME 3 — even when using autostart. Seems that it gets reset by some others, but even disabling a GNOME keyboard plugin as per a post in Arch Linux BBS did not help. And some other people say xmodmap has been deprecated; people should use xkb instead.

So in the end, I resorted to xkb, and dirtily modified /usr/share/X11/xkb/symbols/pc, swapping PRSC, Menu and INS, as follows.

1
2
3
4
5
6
7
8
9
10
11
12
32c32
< key <MENU> { [Menu] };
---
> key <PRSC> { [Menu] };
67c67
< key <PRSC> {
---
> key <INS> {
76c76
< key <INS> { [Insert] };
---
> key <MENU> { [Insert] };

Control ThinkPad battery charging

tp_smapi has been out of date for a long time, and it did not support my T450. Newer models of ThinkPad should use tpacpi-bat instead.

For simplicity, there is a tp-battery-mode package. Install it, enable and start the service, and you are done.

Draw graphs

LibreOffice Draw, and use its connectors instead of bare wires. Shift for regular shape and Ctrl + Mouse move for cloning can also be handy.

Render GFM

Bash script from jaburn’s gist.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#!/usr/bin/env bash

data="$(
cat"$1"
| sed's/"/\"/g'
| sed':a;N;$!ba;s/n/\n/g'
)"


if [[-z "$2" ]]; then
context=''
else
context=","context":"$2""
fi

echo '<!DOCTYPE html>'
echo '<html><head><style>'
curl -s 'https://gist.githubusercontent.com/andyferra/2554919/raw/2e66cabdafe1c9a7f354aa2ebf5bc38265e638e5/github.css'
echo '</style></head><body>'
curl -s --data "{"text":"$data","mode":"gfm"$context}" 'https://api.github.com/markdown'
echo '</body></html>'

Minecraft with Forge crashes on splash screen

Sometimes Minecraft with Forge can crash with a message like the following one:

1
[xcb] Unknown request in queue while dequeuing

Disabling the Forge splash screen by setting enabled=false in .minecraft/config/splash.properties can workaround this problem.

Additional tools

  • cloc: Counting line of code.
  • dos2unix: Convert End-of-line and some encoding to Unix flavor.
  • dosfstools: mkfs.fat, etc.
  • easytag: MP3 tag editing and conversion.
  • gpaste: Clipboard manager
  • gsmartcontrol: Graphical SMART viewer.
  • haveged: Boost low entropy.
  • htop: top improved.
  • iotop: top on I/O.
  • jq: Manipulate JSON in command line.
  • lsof: List opened files.
  • mtr: traceroute + ping, automatically.
  • ntfs-3g: NTFS writing support, and others.
  • pdfgrep: grep on PDF.
  • powertop: Show power consumption.
  • profile-cleaner: Optimize browser profile SQLite database, and more.
  • proxychains: Proxify other programs.
  • pv: View progress for dd, etc.
  • trash-cli: Trash bin in command line.
  • tree: ls recursively in tree format.
  • vlc: Versatile and stable video player.

欢迎

零、前言

这是我作为一名 Android 开发者对 Android 设计的理解。在这个教程中,我主要参考 官方的设计教程,同时会加入一些自己的见解,并穿插一些实用资源。其中 NovaDNG 的几篇文章对我影响较大,对此十分感谢。

在今年,Google 已经推出了新的 Material 设计标准,对真实世界进行抽象的模拟,实现了在各个平台上的统一设计标准。我对这个标准的理念认同,然而在布局等细节上有些许分歧。诸位可以学习完 Android 设计后继续学习 Material 设计,作出自己的判断。

一、设计原则

为了对设计中的问题解决提供指导,设计师结合他们所追求的设计理念和实际的设计案例,制定了一系列的设计原则。

在学习 Android 设计的过程中,首先接触 Android 官方推荐的设计原则,可以在设计过程的初期就逐渐熟悉并得到运用。在这以后,经过长期的观察与设计,大家也可以渐渐总结出自己的设计原则。总而言之,有所坚持,有所变通。

以下是一些官方设计原则页面上提及的设计规范,但按照我个人的设计理念,重新进行了组织。

  1. 一致

    一致性是众多原则所共同要求的特性。一致性符合人的认知习惯,无论是编程还是设计,一致性都能够带来清晰与优雅。

    • 保持应用界面的一致性。相似的内容应当拥有相似的布局,使得用户得以通过经验快速熟悉应用。

    • 保持应用逻辑的一致性。相似的界面元素应当拥有相似的功能,使得用户能够举一反三,至于熟练。

      一致的 ActionBar Spinner 导航

      如上图 ActionBar 中的导航,都是通过点击 Spinner(下拉列表框)来更改主界面正在浏览内容的分类。

    • 保持与 Android 界面的一致性。其他平台(如 iOS)拥有自己的设计风格,但 Android 也有着自己的视觉语言,即拟物。Android 用户在应用中期待的是和平台一致的用户界面,因此,请不要将其他平台的设计元素强行引入,相反,寻找并使用 Android 的表现方式。所谓入乡随俗。

      Holo 主题中的控件

      以上是 Holo 主题中的一些控件的展示,可以注意到整体设计风格与 iOS 的不同。这在之后会继续讨论。

  2. 简约

    简约不是简陋,而是合适简化与强大功能的结合。

    • 使用拟真的界面元素,经过适当的抽象在实物与概念化间达到平衡,从而给用户以熟悉而优雅的体验。

      通过拟真的交互方式将图标分组

      拟真是 Android 的核心设计理念,这在之后的 Android 风格介绍中会进行说明。

    • 简化界面的布局,突出常用的功能,而将不常用者隐藏于菜单等二级界面,降低用户的认知负担,加快学习进程。

      将功能装入 Action Overflow

    • 适当而不过度的界面动画,可以为操作过程增加趣味,同时间接说明界面间的逻辑关系。

      启动器(主屏幕)翻页到达边缘的动画

  3. 友好

    • 让用户能够自定义应用,同时记住用户的偏好,让用户拥有在应用中的归属感。

    • 为用户作出最佳的决定,但总是让用户最终确认。

      自动打开 Beam

      用户是为了方便生活而使用应用,因此,应用应当尽力简化用户的操作,根据当前的状态,提供最合理的默认值。同时,为了不让用户感到惊讶或受到侵犯,在执行决定之前总是征求他们的同意。

    • 只在必要时提醒用户,避免打扰。

      日历在事件即将开始时的提醒是可以接受的

      Android 中的通知栏是经常被国产应用滥用的地方,常常可以见到许多广告或是不需要的信息被应用探出在此。我自己,以及一批用户对此都深恶痛绝。

      通知栏中仅仅应当出现用户自己设定的内容,或者是真正具有足够重要性的内容。并且即便如此,还是应当尽量减少应用弹出的通知,避免对用户的打扰。

    • 友好地提示用户的错误,隐藏技术细节,突出重要信息,提供易于操作的解决方案。

      简洁明了的提示文本清晰详细的操作指示

    • 给予用户操作及时的反馈,让用户放心,并获得成就感。

      日历应用创建事件后的提醒

      例如在修改成功后使用 Toast 提示,以及使用向导而非直接让用户填写长表单。关于进行提醒反馈的时机将会在之后进行详细讨论。

以上设计原则中,有很多与用户体验相关,因为设计的目标之一即是对用户友好。下面是一篇来源于 Android 官方视频的文章,可供参考。

延伸阅读

Android 应用中十大常见 UX 错误

二、设计样式

风格

可以先来谈谈其他平台的设计风格。iOS 历史版本的设计风格是拟物,即尝试将实际物体的形状、材质,都在图像资源中体现,来为用户提供友好而熟悉的体验。而当前版本的 iOS 及 Windows Phone 当前的设计风格是扁平化的。其设计的目的是使用大量的纯色与矩形,减少界面元素装饰对用户精力的分散,突出交互元素的内容。

Android 的设计风格可以称之为拟真。拟真与拟物相似,但又并非拟物。拟真是对显示中物体的部分抽象,即保留人们熟悉的物体外形,而去除物体的具体材质,同时加上柔和的阴影。通过拟真的设计,可以避免由于完全拟物带来的认知过载,同时防止过于抽象带来的认知困难,这就是 Android 的设计风格。

顺便一提,在 Android 的设计中,一般建议阴影是从前上方 45 度角照明产生的,这在启动器图标和卡片等界面元素的设计中都有体现。

Android 拟真风格的图标

主题

Android 4 原生主题的名称为 Holo,具有暗色和亮色两个风格,以及一个暗色 ActionBar,亮色界面的变种风格。通过使用原生的主题,可以让应用程序快速获得与 Android 匹配的视觉体验。

Holo LightHolo (Dark)

将原生主题使用自己的配色进行修改,使得应用同时具有自己的特色,也是一种常见的方案。修改主题的任务较为繁琐,所幸可以使用 Android Asset Studio 这个第三方工具进行主题的生成。

Android Asset Studio

Android Asset Studio 可以进行图标和主题等资源的生成,极大地简化设计的实现过程。

在此之外,虽然 Holo 主题是 Android 设计的代表性元素,但也并不是 Android 设计的全部。具体的探讨,可以参考以下这篇文章。

延伸阅读

Android Design 与 Holo Theme

度量

提示

这一小节部分内容与 Android 中应用程序的具体实现有所关联,设计者在初期仅需了解即可。

Android 的设备规格是碎片化的,因此 Android 也有专门设计的方式应对。

设备使用 DPI(Dots per Inch,每英寸像素数)表示屏幕像素密度,从而在不同清晰度的设备上呈现相通的物理大小。

相应地,在进行设计时,也有不同的单位可以选择。

  1. px(Pixel,像素)(少用)

    px 是图像中最基本的单位,在显示器上固定显示为一个点的大小。因此,当屏幕上的像素密度不一致时,显示在屏幕上的实际物理大小则会过大或过小。

  2. dp(Density-independent Pixel,曾写作 dip,密度独立像素)(用于图像)

    Android 设计中通常以 dp 作为图像的尺寸单位,使得同一素材在不同设备屏幕上的大小等表现能够一致。

  3. sp(Scale-independent Pixel,缩放独立像素)(用于文本)

    Android 中允许用户自定义字体的缩放级别,所以产生了 sp 。当应用使用 sp 作为文本单位时,文本大小就可以跟随用户的文本缩放级别自动改变大小,因此 Android 中推荐所有文本的大小都使用 sp 作为单位指定。在默认缩放尺寸(1x)下,1sp 等于 1dp。

为了实现密度独立,需要为不同 DPI 的设备适配不同大小的位图资源。如果仅仅对高质量的图像资源进行缩放,可能会导致图像的失真(例如边缘处)。

因此,Android 将不同的屏幕像素密度按照大小划分到了几个不同的分类(Bucket,桶)中。随着设备的更新,DPI 的分类也缓慢地随之增多。这些分类目前包括 LDPI(Low,一般已不再支持),MDPI(Medium),HDPI(High),XHDPI(eXtra High),XXHDPI(eXtra-eXtra High)(及 XXXHDPI,仅用于应用图标)。

Android 设备的屏幕尺寸

开发者为每个分类提供相应大小的图像资源,在分类内部不同的像素密度之内则由 Android 操作系统自动进行缩放,如此就完成了对不同屏幕密度的适配。

这项工作较为繁琐,不过之前提到的 Android Asset Studio 中也提供了上传高品质的图像,自动使用二次立方插值算法(较为平滑,但比线性缩放耗时稍多)进行缩放生成不同 DPI 所需图片,并按目录组织打包以供下载的功能。

排版

Android 应用的界面普遍以 48dp 组织一个视觉单位,例如 ActionBar 的高度、列表的行高、文本框和按钮的高度。48dp 在物理设备上大约为 9mm 的长度,正好处于 7-10mm 的舒适触摸区域大小之内,同时可以在设备屏幕上保证合理的信息密度,更为重要的是,一致的元素高度可以让用户界面简约而优雅。

48dp 旋律

这称为 Android 的 48dp 韵律。

而 Android 中部件的间距常常为 8dp。这个边距常常被原生部件已经计算在内,然而有时也需要自己指定。

部件的布局

可以看出,Android 中布局常常是以 4dp 的倍数作为长度,这也是推荐的实践。

文字样式

字体

英文字体排版

Android 4.0 之后默认的英文无衬线字体 Roboto 已经具有多个变种,因此英文中也常常使用不同的字体来实现美观的排版。

Roboto 字体集

下载

Roboto 字体集

Android 中的中文字体名为 Droid Sans Fallback,顾名思义,只是一个回退的字体,虽然作为无衬线字体在移动端小型屏幕上拥有令人满意的视觉体验,但并没有如同英文字体那样多的风格与设计考虑。因此,中文常用的字体样式只有常规和粗体两种(中文斜体由算法生成,样式并不理想)。

字号

字号的变化可以产生对比,但过多的字号会导致界面的混乱。Android 系统提供了以下几种推荐的字号。

Android 系统字号

文字颜色

Android 的 Holo 主题默认定义了多种字体颜色,在设计时也可以进行引用。

Holo 主题文字颜色

色彩

Android 拥有自己的标准调色盘(Palette),包括深浅两个风格的红、黄、绿、紫、蓝五色。

Android 调色盘

下载

Android 调色盘

在设计应用界面时,使用系统调色盘的颜色可以简化颜色挑选,同时获得与平台的一致性。

顺带一提,关于灰色,Android 制定了为人类视觉优化的两种灰色标准(猜测与人眼 Gamma 有关)。

  1. 在亮色主题中,RGB 色彩为 #333333,不透明度为启用时 60%,禁用时 30%。

  2. 在暗色主题中,RGB 色彩为 #FFFFFF,不透明度为启用时 80%,禁用时 30%。