Android 4.0用户界面设计和元素－ICS简介
openkk 13年前
<p> 最新的 Android 冰淇淋三明治(Ice Cream Sandwich, ICS)操作系统，不仅仅是用户界面(UI)的简单改变，它几乎是对整个 Android 系统界面的重新定义。为了让你更好地为 ICS 系统设计和开发应用，这里有一个简单的介绍和指南。</p> <p> <strong>内容和活动导航：选项卡和下拉选项 (Tabs and Dropdowns)</strong></p> <p> 对于内容型应用，如何为你的用户提供简单直观的导航是非常重要的。ICS 操作系统有几个通用方法来实现，第一个就是可滑动选项卡。</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/ae2a26d2019dfe04bd3bfebfa0da9db5.png" width="480" height="144" /></p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/c7b7bd337ec6b058062e052b60562da2.png" width="480" height="144" /></p> <p style="text-align:center;"> 上图: ICS 选项卡</p> <p> Android 一直是支持选项卡的，但是在 ICS 上面，这种导航变得更加时尚和简单使用。如上图所示，我们用两个例子：1）联系人应用和2）油Tube 应用来看一下新的功能。</p> <p> <strong>新用法:</strong> 用户可以通过水平滑动在不同的选项卡界面切换 － 一个 ICS 支持的通用导航手势。</p> <p> <strong>新外表:</strong> 被选中的选项卡用宽下划线表示。选项卡，要么是图标，要么是标签。（图和文字不兼得，和 iOS 不同）</p> <p> 第二个是下拉选项（dropdowns）</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/194fe78006e3571328275045166e4baf.png" width="345" height="442" /></p> <p style="text-align:center;"> 上图：Android 4.0 ICS 日历应用</p> <p> 下拉选项在切换相似内容或者相似逻辑时是最好的导航选择，就譬如说在日历应用中 － 下拉选项被广泛应用在单日，星期，月和用户日程表之间的切换。除此以外，组之间的切换也建议使用下拉，譬如说在联系人应用中，不同组的联系人用下拉来选择。</p> <p> 下拉选项：选项卡右下角的小三角表示。</p> <p> <strong>动作栏：不是只在最上面。</strong></p> <p> 动作栏一直作为提供用户快捷操作的最好方式包含在 Android API 里面。</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/2fadfdced4ff3408e6fb1b65edb2b188.png" width="480" height="146" /></p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/0fd604bcad6c3e3f0512ca2d6bb27c09.png" width="480" height="185" /> <strong><br /> </strong></p> <p style="text-align:center;">上图：动作栏在 Email 和地图应用中，与屏幕下沿对齐。</p> <p> 动作栏，开发者应该把最重要的用户操作放在这一栏。用 Android Email 应用来讲，这些操作包括”写 Email”，“搜索”，和“刷新”。动作栏根据当前界面的不同，所包括的操作也不同。当用户在邮件界面，这些操作变成：”删除”，“文件夹”和“前后邮 件”：</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/e181ca8901c93e2a5069418734aebe37.png" width="480" height="185" /></p> <p style="text-align:center;"> 上图：在不同界面，动作栏的图标和动作相应改变</p> <p> 动作栏图标设计：简单，实体单色或使用文字:</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/4d93a11f6427cbef5ae50de050bbe6f4.png" width="480" height="110" /></p> <p style="text-align:center;"> 上图：地图应用中动作栏的文字提示</p> <p> <strong>应用的抬头：活动导航(activity navigation)和其他动作</strong></p> <p> 如果你的应用的台头栏不是选项卡，它应该使用应用的图标，以便用户切换不同的活动。台头作为应用的切入点，应该被充分利用。</p> <p style="text-align:center;"><img style="width:563px;height:104px;" alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/faeebd087a61201c2ba701ffbac4e514.png" /></p> <p style="text-align:center;"> 上图：地图应用的不同界面，注意动作栏的标识</p> <p> 在地图应用中，默认台头是应用本身的图标和名字或者 logo。当你开始使用应用，在不同界面，就会有不同的信息。开发人员应该充分利用这一栏为用户提供快捷、直观的导航。</p> <p> 台头也可以作为信息展示：在单一目的地界面，台头显示了我所搜索的目的地和到达所需时间。在 email 界面，台头显示了我所搜索的联系人信息和可以提供的动作。</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/1bda3ac5131be7d1d9884860bbcbe6e1.png" width="480" height="140" /></p> <p style="text-align:center;"> 油Tube 的台头：录像和搜索</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/5195c8dd617c33d24392801f47491fa0.png" width="480" height="149" /></p> <p style="text-align:center;"> 上图：应用台头使用动作选项</p> <p> <strong> 境况适应 (context-adapting)：搜索和列表设定</strong></p> <p> 在 ICS 上，有两个默认的动作：搜索和列表设定，给了用户界面更加丰富的互动。</p> <p> 当用户选择了搜索：</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/b91d1f07b8f7ebe6f278f91d046a986a.png" width="480" height="86" /></p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/32e968d0bc64230bf8c8dd9b5c674211.png" width="480" height="86" /></p> <p style="text-align:center;"> 上图：搜索在联系人和日历应用中</p> <p> 后退箭头出现，然后台头被搜索条取代，开发者可以选择包括语音搜索或者不包括。</p> <p> 另外一个境况适应的例子是有复选框的列表。举例来说，在 Email 应用中，当用户在复选了 email 时，台头变成了一共 3 封 email 被选中。</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/5639343b750987b57287e9ce54086d05.png" width="480" height="316" /></p> <p> 然后，相对应的，底部动作栏更新成了：对于选中的 email 可以执行的不同操作：删除，标识，压缩和 star 他们。</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/0ae4869883f271eaed202c5c95977510.png" width="480" height="71" /></p> <p> <strong>ICS 的设计和风格哲学</strong></p> <p> 在这款新推出的 Android 系统中，我们可以看出他们更新了设计理念。这个不仅仅是方便使用，还保证了风格和一致性。这些努力让 Android 的界面更加漂亮的同时，也让她更加容易辨识：干净、简单、时尚。</p> <blockquote> <p>我们去除了很多不必要的界面元素，开始更多地使用空白和视觉元素来创造通透的结构。我们使用更多的色彩，来创造光、影。</p> <p style="text-align:right;">——Matias Duarte, Android UI/UX 组长</p> </blockquote> <p> 这些都可以在 ICS 的细节之处体现－摁钮没有修饰，自然融合在界面设计中。文字框用线条拉开。在界面修饰中凸显内容和图像。颜色柔和但是鲜明。</p> <p style="text-align:center;"><img alt="Android 4.0用户界面设计和元素－ICS简介" src="https://simg.open-open.com/show/8f1122238c59847e763ef5f55310c016.png" width="480" height="316" /></p> <p style="text-align:center;"> 上图：在日程表中添加项目</p> <p> 更多信息：</p> <p> Android 4.0 SDK <a href="/misc/goto?guid=4958194346484158405" rel="nofollow" target="_blank">下载</a>.</p> <p> Engadget：Galaxy Nexus 的<a href="/misc/goto?guid=4958331947041724128" rel="nofollow" target="_blank">截图</a> .</p> <p> 希望这篇报道能够帮助你们设计和开发出简单、美观、实用的应用。</p> <p> 英文原文：<a href="/misc/goto?guid=4958331947869740992" rel="nofollow" target="_blank">actionbar</a> 编译：<a href="/misc/goto?guid=4958185140659301754" target="_blank">伯乐</a>在线 – <a href="/misc/goto?guid=4958331949431945877" target="_blank">潘文佳</a></p>