Android 4.0用户界面设计和元素-ICS简介

openkk 12年前
     <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>