Android 应用界面设计

     <div id="news_body">     <p style="text-align:center;"><a rel="attachment wp-att-65109"><img title="Android-ICS1" alt="Android 应用界面设计" src="https://simg.open-open.com/show/63628eebf8abd7a02fe6bbbcdc222393.jpg" width="610" height="417" /></a></p>     <p>        与 iOS 相比，Android 系统界面存在各种不协调，应用界面本身缺乏统一的规范。虽然 Android 的开放性为应用的自主发挥带来了最大的可能性，但如果系统本身能够提供标准的范例，也未必是一件坏事，毕竟许多应用并不一定需要独创的界面。从 Android 4.0 开始，系统界面在一致性上有了许多改善，那么 Android 应用的界面应该如何设计？如果你仔细观察 Google 近期的一系列应用上的设计，应该能发现在一些指导性的要点，而这些设计也正在被第三方应用采用。</p>     <p>        Android 应用不应该成为 iOS 应用的翻版，那么它应该是什么样子？<a href="/misc/goto?guid=4959499513975065474" target="_blank">androiduipatterns 网站</a>针对 Android 应用的界面设计提出了一些规范性的建议，值得参考。</p>     <p>        <strong>主界面</strong></p>     <p>        应用的主界面（起始界面）应该是什么样子？看下面这个规范图。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65087"><img title="def_screen1" alt="Android 应用界面设计" src="https://simg.open-open.com/show/b6fdbee85f89f42c7043d1a4725c45f2.jpg" width="336" height="400" /></a></p>     <p>        什么应用使用这样的起始界面呢？看这三个例子： Aldiko，Evernote 和 Google+。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65090"><img title="landing page" alt="Android 应用界面设计" src="https://simg.open-open.com/show/3b737098026c868de83c7f90a43dd7cc.jpg" width="501" height="253" /></a></p>     <p>        <strong>分界面</strong></p>     <p>        进入应用的分界面之后如何设计，看下面这个范例。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65091"><img title="def_screen2" alt="Android 应用界面设计" src="https://simg.open-open.com/show/81ba6d7d5457851e1298f6238f831bef.jpg" width="368" height="400" /></a></p>     <p>        上面一行是操作栏：最左边是应用图标（或许包括后退键），点击回到起始界面；中间部分主要考虑于应用协调的配色；最右边是当前情景下可进行的操作。</p>     <p>        看下面的例子</p>     <p style="text-align:center;"><a rel="attachment wp-att-65092"><img title="second page" alt="Android 应用界面设计" src="https://simg.open-open.com/show/023ffae2351d917fa2b2cfdd17a317fd.jpg" width="330" height="256" /></a></p>     <p>        <strong>列表界面</strong></p>     <p>        应用可能需要处理大量的数据，而列表则是将数据规则化呈现的一种方式。列表界面应该足够清晰，为用户提供一个好的概览，同时，列表界面的操作栏应该允许用户对列表进行单项或多项操作。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65093"><img title="def_screen3_1" alt="Android 应用界面设计" src="https://simg.open-open.com/show/ea98003d78099afdf86feb7318dc0b86.jpg" width="400" height="331" /></a></p>     <p>        两个比较好的范例是 Aldiko 和 Google Mail。需要注意的是，列表的选择框通常是在左边，但是在 Aldiko 中，文件夹图标在左边非常突出，于是 Aldiko 选择框放在了右边，达到界面上的一种平衡。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65094"><img title="list" alt="Android 应用界面设计" src="https://simg.open-open.com/show/224701c889143a9778376c8e1facde49.jpg" width="499" height="362" /></a></p>     <p>        <strong>载入列表</strong></p>     <p>        应用可能需要处理大量的信息，比如 推ter 的时间线。对于用户来说，这意味着列表长度几乎是无尽的。目前，许多应用已经采用了比较通用的处理方法，当下滑到列表已缓冲条目下部的边界时，自动加载更多的信息。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65095"><img title="def_screen3_4" alt="Android 应用界面设计" src="https://simg.open-open.com/show/ed98c2a6ccd590a63a66e16eea920631.jpg" width="324" height="400" /></a></p>     <p>        下面是两个例子: Android Market 和 推ter。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65096"><img title="neverending list" alt="Android 应用界面设计" src="https://simg.open-open.com/show/6da8828fde892c47a6c27f70a925ba6b.jpg" width="529" height="360" /></a></p>     <p>        <strong>长按</strong></p>     <p>        对某个单项信息进行操作，一种交互方式是长按。这也许不是最明显的操作，但是节省屏幕空间，也很符合“情景菜单”的理念。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65097"><img title="def_screen3_3" alt="Android 应用界面设计" src="https://simg.open-open.com/show/284ec5506ecaa29ae3bf558ed850f690.jpg" width="400" height="303" /></a></p>     <p>        下面的三个例子：Aldiko，Astro 文件管理器和 Google+。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65098"><img title="long press" alt="Android 应用界面设计" src="https://simg.open-open.com/show/3d9bf7155f1113d829d318713076d650.jpg" width="525" height="243" /></a></p>     <p>        <strong>多选操作</strong></p>     <p>        对列表进行多选操作，最好在列表上的项目一侧增加选择栏，如下图：</p>     <p style="text-align:center;"><a rel="attachment wp-att-65099"><img title="def_screen3_2" alt="Android 应用界面设计" src="https://simg.open-open.com/show/355603d55b814d7e371e4959640bdb05.jpg" width="331" height="400" /></a></p>     <p>        当你选定了多个项目后，屏幕下方给出操作栏。</p>     <p style="text-align:center;"><a rel="attachment wp-att-65100"><img title="multi select" alt="Android 应用界面设计" src="https://simg.open-open.com/show/29acfb900fbcf6f715012b5f232883ad.jpg" width="525" height="363" /></a></p>     <p>        <strong>标签</strong></p>     <p>        从 Android 4.0 开始，系统进一步突出了分类标签。在顶部操作栏的下面，通常会有一个标签栏，你可以点击或者左右滑动，如下图</p>     <p style="text-align:center;"><a rel="attachment wp-att-65101"><img title="def_screen4" alt="Android 应用界面设计" src="https://simg.open-open.com/show/ed18a6dc66c1b65e1fb14352790f640d.jpg" width="320" height="306" /></a></p>     <p>        Android Market 和 Google+ 是两个例子</p>     <p style="text-align:center;"><a rel="attachment wp-att-65102"><img title="tab" alt="Android 应用界面设计" src="https://simg.open-open.com/show/0e64b73d5dd84e8dee53893f53235577.jpg" width="520" height="367" /></a></p>     <p>        虽然 Google 并没有在界面上给出太多限制，但是随着 Android 平台的发展，应用界面逐渐形成一套统一的规则和界面应该是一个趋势。这是否意味着一切应用必须遵循规范呢？那倒也未必。比如 Path 的界面，就未必符合任何平台的既成规范。如果你有开创性的界面，而且能够保证易用性，不妨去大胆创新，否则，遵循现有的良好规范可能会让你少走些许弯路。<br /> </p>     <div id="come_from">      来自:      <a id="link_source2" href="/misc/goto?guid=4959499514145056556" target="_blank">ifanr 爱范儿</a>     </div>     <p></p>    </div>