Android 应用界面设计

与 iOS 相比,Android 系统界面存在各种不协调,应用界面本身缺乏统一的规范。虽然 Android 的开放性为应用的自主发挥带来了最大的可能性,但如果系统本身能够提供标准的范例,也未必是一件坏事,毕竟许多应用并不一定需要独创的界面。从 Android 4.0 开始,系统界面在一致性上有了许多改善,那么 Android 应用的界面应该如何设计?如果你仔细观察 Google 近期的一系列应用上的设计,应该能发现在一些指导性的要点,而这些设计也正在被第三方应用采用。

Android 应用不应该成为 iOS 应用的翻版,那么它应该是什么样子?androiduipatterns 网站针对 Android 应用的界面设计提出了一些规范性的建议,值得参考。

主界面

应用的主界面(起始界面)应该是什么样子?看下面这个规范图。

什么应用使用这样的起始界面呢?看这三个例子: Aldiko,Evernote 和 Google+。

分界面

进入应用的分界面之后如何设计,看下面这个范例。

上面一行是操作栏:最左边是应用图标(或许包括后退键),点击回到起始界面;中间部分主要考虑于应用协调的配色;最右边是当前情景下可进行的操作。

看下面的例子

 

列表界面

应用可能需要处理大量的数据,而列表则是将数据规则化呈现的一种方式。列表界面应该足够清晰,为用户提供一个好的概览,同时,列表界面的操作栏应该允许用户对列表进行单项或多项操作。

两个比较好的范例是 Aldiko 和 Google Mail。需要注意的是,列表的选择框通常是在左边,但是在 Aldiko 中,文件夹图标在左边非常突出,于是 Aldiko 选择框放在了右边,达到界面上的一种平衡。

载入列表

应用可能需要处理大量的信息,比如 Twitter 的时间线。对于用户来说,这意味着列表长度几乎是无尽的。目前,许多应用已经采用了比较通用的处理方法,当下滑到列表已缓冲条目下部的边界时,自动加载更多的信息。

下面是两个例子: Android Market 和 Twitter。

长按

对某个单项信息进行操作,一种交互方式是长按。这也许不是最明显的操作,但是节省屏幕空间,也很符合“情景菜单”的理念。

下面的三个例子:Aldiko,Astro 文件管理器和 Google+。

多选操作

对列表进行多选操作,最好在列表上的项目一侧增加选择栏,如下图:

当你选定了多个项目后,屏幕下方给出操作栏。

标签

从 Android 4.0 开始,系统进一步突出了分类标签。在顶部操作栏的下面,通常会有一个标签栏,你可以点击或者左右滑动,如下图

Android Market 和 Google+ 是两个例子

虽然 Google 并没有在界面上给出太多限制,但是随着 Android 平台的发展,应用界面逐渐形成一套统一的规则和界面应该是一个趋势。这是否意味着一切应用必须遵循规范呢?那倒也未必。比如 Path 的界面,就未必符合任何平台的既成规范。如果你有开创性的界面,而且能够保证易用性,不妨去大胆创新,否则,遵循现有的良好规范可能会让你少走些许弯路。

赶快成为第一个赞的人吧

积木

Unix is simple. It just takes a genius to understand its simplicity. – Dennis Ritchie

已有 48 个评论

  1. qiibeta
    12月20日 08:43

    长按 的那个叫quick action

  2. atom
    12月20日 08:59

    这个设计真是有够反人类的。。。常用的按键都在屏幕的顶端还一左一右。。。这在4.65寸的屏幕上怎么单手操作。。。这个设计要是统一了简直是个灾难。。。

    • lion
      12月20日 09:22

      的确

      • Henry
        12月20日 09:23

        iPhone的就都在顶端

      • Henry
        12月20日 09:24

        iPhone的就都在顶端 当然没必要像iPhone一样 应该更有创意更有独创行

        • Avin
          12月20日 09:26

          iOS的返回在左上角, 基本上除了左撇子是不可能单手操作的

          • tinytian
            12月20日 09:34

            问题是iPhone是3.5的,单手操作还算可以吧。

            • bmouse
              12月20日 10:11

              大部分用触摸屏手机的右撇子,都是用左手操作手机的

            • oi
              12月20日 09:31

              笑话。android 4.0只有4.65这个屏幕尺寸?

              • Henry
                12月20日 09:40

                确实4.65的屏幕 可能对于 某些手比较小的人 操作不方便 但同时有失也有得 就看你能不能经受得起这 高清大屏的诱惑。 其实iPhone 本身设计不是人体工程学的 而是倾向于艺术品 但是 人们经受不住它别的诱惑 就把它反人体工程学的设计给忍受 忽略过去了。 同样你 被他的高清屏幕所吸引 但是你想要便捷操作需要两只手 那你也会去用两只手操作 而且虽然理论上会觉得不爽 但是已经被他的别的吸引你的地方给 盖过去了 并不觉得为了他的高清大屏幕或别的好 双手操作有什么不爽的地方

                • Ray
                  12月20日 10:05

                  你真可怜,跟那个Ken一样,说再多也被thumb down。。这样下去讨论没什么意义啊。

                  不过我赞同你的一个观点,iPhone本身设计不是人体工程学,最典型的是那个方正的造型,美感有了,但是握在手里。。

                  • Avin
                    12月20日 11:57

                    软件规范再怎么改也跟不上硬件尺寸和布局的变化, android机下方的返回按钮显然比iOS左上方的返回要舒适, 左右手都适合

                    • bmouse
                      12月20日 13:34

                      <a class="comment-at" href="http://www.ifanr.com/65085#comment-110386" "="" style="margin: 0px; padding: 0px; text-decoration: none; outline: none; color: rgb(51, 51, 51);">@Avin,真的下方更方便?左手自然状态握住手机时,大拇指是位于屏幕上半部分的….只要大拇指移动一点点就可以碰到返回键;相反的,类似home按钮,如果返回在下方的话,那么要做比较大的姿势才可以碰到

                  • 钢盅郭子
                    12月20日 11:54

                    iPhone 在整体设计上几乎没有短板
                    Android 就很难做到均衡

                    • Avin
                      12月20日 11:59

                      Apple的硬件历来是 外观美感>人体工学>其他标准, 外观设计OK才会进行下一步, 接下来一切的一切研发都不能突破外观所定义的范围

                      • 疯哥
                        12月20日 20:27

                        什么叫没有短板,3:2比例的屏幕上下浪费很多空间算不算短板?边缘卡手算不算短板?不可更换电池算不算短板?天线易被手干扰算不算短板?抗跌落能力差算不算短板?

                    • 小羽
                      12月20日 09:58

                      有個規範總比沒有好。
                      你不會希望這個 app 的刷新在右上,換一個 app 一看刷新又在左下,再換一個 app 一看更高端了直接沒有刷新按鈕(下拉、上拉刷新之類

                      • Mr.G
                        12月20日 10:04

                        恩,软件界面顶部的返回键是基本不用的,对我本人来说完全是浪费屏幕,我一般都是用四大金刚里的返回键~

                        • Todd
                          12月20日 10:22

                          楼主没看清楚吧,屏幕的顶端是一左一右吗?左边一般是一个返回键,或者是home键,一般可以不去用,右边可以有多个操作键。在说在4.65的屏上,你还想单手操作完所有的? 既然用大屏就要想着用双手操作一些东西。

                          • Allan Chan
                            12月20日 13:19

                            iPhone上面的设计,返回也是在左上角的。这个设计确实反人类,但android起码在下面的虚拟和实体按键里面有返回按键,但iPhone的实体键只能完全返回桌面。

                            • dany
                              12月23日 17:04

                              屏幕越大,这样的方式就是逼着用户两手操作,单手情况下真的是灾难。。新浪微博也是采用这样的设计,发微博真的很麻烦,逼着用户使用转发

                            • tinytian
                              12月20日 09:29

                              我一直觉得WP7是为单手优化的最好的。

                              • 黑眼麦嘉拉
                                12月20日 09:59

                                那么大的方块 再按不到 那就是用户有问题了

                                • lion
                                  12月20日 10:04

                                  微软怎么说做工体工学的东西这么多年了

                                  • sdsdsd
                                    12月20日 10:17

                                    WP7是,但WP7上的应用就不一定…….

                                    • o_0
                                      12月20日 11:07

                                      WP7大量的上下滑动,对单手操作来说,这就是个”反人类”的设计. “最好”什么的简直是无稽之谈.

                                      • 1343
                                        12月20日 11:15

                                        何来的大量滑动??你没用过WP7的标签索引吗??

                                        • zhoutiger
                                          12月20日 16:17

                                          常用的软件都可以pin在桌面。上下滑动反人类?你在任何一个触屏手机上看网页看小说难道不上下滑动么?

                                          • huary
                                            12月29日 10:04

                                            To: o_0 ,
                                            不说你什么,只是觉得你小时候蒙牛喝多了。

                                        • Ray
                                          12月20日 10:08

                                          操作上我个人最喜欢的是滑动的标签,这应该本来是WP设计的一大特色,被ICS吸收过来了。

                                          外观上看的话我最喜欢标题栏的设计。

                                          • sdsdsd
                                            12月20日 10:22

                                            4.0的界面用起来很赞,不过那些不遵守股沟设计指导或者照搬ios设计的在上面真的很突兀

                                            • JAK
                                              12月20日 17:34

                                              google没有多少设计指导的,可以参考另一篇文章里一个现役程序员的话……说真的,别去神话任何事物,你只会把它雕刻成你的神

                                              • nlv
                                                12月21日 03:12

                                                Android的UI Guildelines单薄得发指,基本上什么都没说。。。很多应用UI设计不协调,Google是难辞其咎的。开发者真的没有什么官方的guideline可以遵守。。。
                                                而且说实话,就是Google自家应用,也差不多从3.0开始才有一套统一的风格。第三方的应用风格离谱也就没什么奇怪的了。。。

                                              • jimmy
                                                12月20日 10:51

                                                这篇文章没有提到一个很关键的问题:Android 4新增的虚拟按钮如何控制?什么时候需要?什么时候不需要?虚拟按钮是否可以定制?如果可以哪些功能适合放到上面?应用软件在面对Android 4和之前的版本时,怎样的设计可以做到体验的一致或平滑?

                                                • Aziz Liu
                                                  12月20日 11:18

                                                  Google 官方的 Android User Interface Guidelines 几乎什么也没说。Apple 的 iOS Human Interface Guidelines (MobileHIG) 和 Palm 的 webOS Human Interface Guidelines 就都非常详细。

                                                  • 钢盅郭子
                                                    12月20日 11:58

                                                    下拉刷新的手势也可以强化一下吧——

                                                    比如下拉后继续往左/右滑动执行后退/前进什么的

                                                    • so898
                                                      12月20日 12:47

                                                      以后把UI上的触控操作和重力感应操作放到一起制定吧,这样就解决了屏幕大的问题了
                                                      或者说把按钮集中化,像IOS版的PATH 2.0一样,给以更大的可视空间给用户

                                                      • wangming
                                                        12月20日 13:25

                                                        我觉得ICS自带的GMAIL和GMAP是很好的UI列子,竖屏的时候上下都有工具条,上方左边是icon和返回,其他的可以自定义,如logo或者是视图切换选择等,下方是常用工具按钮,横屏的时候下方的工具条取消,常用按钮合并到上方工具条的右边,同时,上方工具栏还承担搜索和复制粘贴操作的功能

                                                        • 疯哥
                                                          12月20日 20:39

                                                          这里人有个毛病,就是很喜欢统一风格,什么都想要个框框,生怕做出不合规矩的东西。我只能说,你被封闭的集权思想影响太深了。Google和Google的用户明显不在乎这个,不想做过多的限制,正所谓百花齐放,百家争鸣,Google官方应用给做了个榜样,你爱学不学,不强制,我想这正是Google的精神力量,就是开放,自由。就没人思考为什么Google的饼越做越大而苹果在原地踏步吗?苹果的玩法已经无法进一步发展,你不可能期待美国总统和拾荒者拿着一样的设备,因为他们的需求天差地别。所以Android的弹性化给了厂商制造产品差异的机会,这正是Android目前高歌猛进不可忽视的因素。

                                                          • JAK
                                                            12月20日 20:44

                                                            mp3播放器遍地开花,功臣是mp3文件缺乏版权监管、mp3播放器的主控芯片一揽子化,从而山寨、正统一齐造蛋糕(当年VCD也是如此),别归功于所谓的“google英明神武”

                                                            • 疯哥
                                                              12月21日 00:27

                                                              你不得不承认,这种模式成功了,而且从用户的角度来说带来了真正的革命。

                                                            • Cyaniris
                                                              12月21日 02:19

                                                              竟然反对统一操作规范……你可以弄个点一下左上角图表执行关闭程序的设计试试,不被用户骂娘才怪了……

                                                              • 疯哥
                                                                12月21日 09:28

                                                                微信正是这么做的,只是左上角不是关闭而是回退,有何不可?

                                                            • Steven Kwok
                                                              12月23日 21:52

                                                              嗯,基础知识,必须掌握。。

                                                              • Aryan
                                                                5月19日 11:13

                                                                那个谁说iPhone有人体工学?
                                                                用惯日系产品的人都笑而不语!

                                                              评论
                                                              添加红包

                                                              请填写红包祝福语或标题

                                                              红包个数最小为10个

                                                              红包金额最低5元

                                                              当前余额3.43前往充值 >
                                                              需支付:10.00
                                                              成就一亿技术人!
                                                              领取后你会自动成为博主和红包主的粉丝 规则
                                                              hope_wisdom
                                                              发出的红包
                                                              实付
                                                              使用余额支付
                                                              点击重新获取
                                                              扫码支付
                                                              钱包余额 0

                                                              抵扣说明:

                                                              1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
                                                              2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

                                                              余额充值