今天看啥 热点：
【Android UI设计与开发】之详解ActionBar的使用，androidactionbar
详解Android中的ActionBar的使用
&请尊重他人的劳动成果，转载请注明出处：详解Android中的ActionBar的使用&
&http://blog.csdn.net/fengyuzhengfan/article/details/
ActionBar是Android 3.0(API level 11)引入的一个新控件，它代表了应用程序标题栏，如果要开发兼容的程序，可以使用v7包下的ActionBar。我们在应用中看见的ActionBar一般是下图的样子，比如有道词典及微信：
1.App icon:应用的图标，左侧图标说明可以触摸返回，相当于触摸back返回键
2.ViewControl:下拉列表导航
3.Action button:相当于普通的Button可以监听点击事件
4.Action overflow:三个点，相当于手机上的menu键，可以显示隐藏的action
使用ActionBar一个最大好处是应用可以根据设备显示空间动态调整，如果显示空间不够，应用把多出的Action Button添加到Action
overflow区域。
如何在应用中添加ActionBar
1、在应用中添加ActionBar，一般我们要继承ActionBarActivity：
&&public classMainActivity extends ActionBarActivity{&//…….&&&&&&&&&}
也可以直接继承Activity，但是为了向后兼容，最好继承ActionBarActivity(注意这个类是兼容包v7中定义的)
2、在res/menu/目录中创建ActionBar的Item，如下：
&menu xmlns:android=&http://schemas.android.com/apk/res/android&
xmlns:app=&http://schemas.android.com/apk/res-auto&
xmlns:tools=&http://schemas.android.com/tools&
tools:context=&com.jph.ab.MainActivity&&
android:id=&@+id/refresh&
android:orderInCategory=&100&
android:title=&/刷新&
android:icon=&@drawable/ic_navigation_refresh&
app:showAsAction=&always&/&
android:id=&@+id/cancle&
android:orderInCategory=&100&
android:title=&取消&
android:icon=&@drawable/ic_navigation_cancel&
app:showAsAction=&always&/&
android:id=&@+id/setting&
android:orderInCategory=&100&
android:title=&设置&
android:icon=&@drawable/ic_action_settings&
app:showAsAction=&ifRoom&/&
android:id=&@+id/cancle2&
android:orderInCategory=&100&
android:title=&删除&
android:icon=&@drawable/ic_cab_done_holo&
app:showAsAction=&ifRoom&/&
android:id=&@+id/play&
android:orderInCategory=&100&
android:title=&播放&
android:icon=&@drawable/ic_media_play&
app:showAsAction=&never&/&
Menu标签中Item标签的主要属性：
android:orderInCategory
表示每个item的优先级，值越大优先级越低，actionbar地方不够就会放到overflow中。
android:title
item的标题。
android:icon
item显示的图标。
app:showAsAction
item显示的方式。
其showAsAction属性接受如下一些值：
会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个，依据屏幕的宽窄而定
永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上。
无论是否溢出，总会显示。
withText值示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action
bar空间的限制，文本标题有可能显示不全。
collapseActionView
声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是不可见的。一般要配合ifRoom一起使用才会有效果。
提示：为了兼容低版本，这里没有使用android:showAsAction而是使用的v7兼容包中的app:showAsAction。使用app:showAsAction需要将&&&xmlns:app=http://schemas.android.com/apk/res-auto命名空间导进来。
3、重写ActionBarActivity中的方式：
public booleanonCreateOptionsMenu(Menu menu) {
// I this adds items to theaction bar if it is present.
getMenuInflater().inflate(R.menu.simple, menu);//获取menu目录下simple.xml的菜单文件
这时ActionBar的Item在应用中就能够显示了，如果要让触摸Item添加功能，必须重写进行第4步
4、监听触摸Item事件
public booleanonOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
switch (id) {
case R.id.refresh:
Utils.showToast(this, &您点击了刷新菜单&, Toast.LENGTH_SHORT);
case R.id.cancle:
Utils.showToast(this, &您点击了取消菜单&, Toast.LENGTH_SHORT);
case R.id.cancle2:
Utils.showToast(this, &您点击了删除菜单&, Toast.LENGTH_SHORT);
case R.id.setting:
Utils.showToast(this, &您点击了设置菜单&, Toast.LENGTH_SHORT);
case R.id.play:
Utils.showToast(this, &您点击了播放菜单&, Toast.LENGTH_SHORT);
return super.onOptionsItemSelected(item);
程序运行效果图：
&为ActionBar配置返回键
在AndroidManifest.xml中为需要返回到上一级的activity配置android:parentActivityName=&.MainActivity&属性。其中parentActivityName表示当前activity要返回到activity。
&activity android:name=&.SpinnerActionBar&
android:parentActivityName=&.MainActivity&
android:label=&ActionBar实现下拉导航&&&/activity&
程序运行效果图：
显示溢出区按钮
如果手机有menu键ActionBar可能不会显示三个点的溢出按钮，触摸菜单键才会显示ActionBar
overflow区域，这样用户体验不一致，为了能够让有菜单键的设备，也能够显示溢出按钮，则需要加入以下代码：
* 即使有物理菜单键也显示ActionBar的flowMenu
public static void showOverflowMenu(Context context) {
ViewConfiguration config = ViewConfiguration.get(context);
//使用java反射技术，获取getDeclaredField类的私有属性sHasPermanentMenuKey
Field menuKeyField = ViewConfiguration.class.getDeclaredField(&sHasPermanentMenuKey&);
if(menuKeyField != null){
menuKeyField.setAccessible(true); //将属性设为可访问的
menuKeyField.setBoolean(config, false);
//为属性赋值为false
} catch (Exception e) {
e.printStackTrace();
然后，在onCreate中调用这个函数，这样有菜单键的设备就能显示溢出按钮了。
ActionBar实现下拉导航
具体步骤：
l&首先需要一个SpinnerAdapter设置下拉item的内容和显示的layout
l&实现ActionBar.OnNavigationListener这个接口，接口中有点击item的事件
l&设置navigationmode例如
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
l&用setListNavigationCallbacks()方法来实现下拉选项，例如
actionBar.setListNavigationCallbacks(mSpinnerAdapter,mNavigationCallback);
程序代码：
package com.jph.ab.
import android.os.B
import android.support.v7.app.ActionB
import android.support.v7.app.ActionBar.OnNavigationL
import android.support.v7.app.ActionBarA
import android.view.M
import android.view.MenuI
import android.widget.ArrayA
import android.widget.T
import com.jph.ab.utils.U
* ActionBar实现下拉导航
* @author jph
public class SpinnerActionBar extends ActionBarActivity {
private ActionB
/**菜单名称***/
private String[] menuI
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
Utils.showOverflowMenu(this);//如果手机有menu键也显示flowMenu
actionbar=getSupportActionBar();//获取v7兼容包中的ActionBar
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
menuItems=getResources().getStringArray(R.array.menus);//获取string_array.xml中的menus数组
ArrayAdapter&String& adapter=new ArrayAdapter&String&(this,
R.layout.spinner,R.id.tvMenu,menuItems );
actionbar.setListNavigationCallbacks(adapter, new OnNavigationListener() {
public boolean onNavigationItemSelected(int itemPosition, long itemId) {
// TODO Auto-generated method stub
Utils.showToast(SpinnerActionBar.this,&您选择了：&+ menuItems[itemPosition],Toast.LENGTH_SHORT);
public boolean onCreateOptionsMenu(Menu menu) {
// I this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.simple, menu);//获取menu目录下simple.xml的菜单文件
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
switch (id) {
case R.id.refresh:
Utils.showToast(this, &您点击了刷新菜单&, Toast.LENGTH_SHORT);
case R.id.cancle:
Utils.showToast(this, &您点击了取消菜单&, Toast.LENGTH_SHORT);
case R.id.cancle2:
Utils.showToast(this, &您点击了删除菜单&, Toast.LENGTH_SHORT);
case R.id.setting:
Utils.showToast(this, &您点击了设置菜单&, Toast.LENGTH_SHORT);
case R.id.play:
Utils.showToast(this, &您点击了播放菜单&, Toast.LENGTH_SHORT);
return super.onOptionsItemSelected(item);
程序运行效果图：
ActionBar实现Tab导航
package com.jph.ab.
import java.util.ArrayL
import android.os.B
import android.support.v4.app.F
import android.support.v4.app.FragmentT
import android.support.v4.view.ViewP
import android.support.v4.view.ViewPager.OnPageChangeL
import android.support.v7.app.ActionB
import android.support.v7.app.ActionBar.T
import android.support.v7.app.ActionBar.TabL
import android.support.v7.app.ActionBarA
import android.view.M
import android.view.MenuI
import android.widget.T
import com.jph.ab.fragment.BaseF
import com.jph.ab.fragment.BaseFragmentPagerA
import com.jph.ab.utils.U
* ActionBar实现Tab导航
* 程序亮点：ActionBar Tab+ViewPager+Fragment
* @author jph
public class TabActionBar extends ActionBarActivity {
private ActionB
private ViewPager vpC
/**ViewPager包含的Fragment集合**/
private ArrayList&Fragment&
/**ActionBar上的Tab集合**/
private ArrayList&Tab&
/**当前页**/
protected int currentP
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_actionbar);
Utils.showOverflowMenu(this);//如果手机有menu键也显示flowMenu
initViewPager();//初始化ViewPager要在初始化initTab之前，否则会出错
initTab();
* 初始化Tab
private void initTab() {
// TODO Auto-generated method stub
tabs=new ArrayList&Tab&();
actionbar=getSupportActionBar();//获取v7兼容包中的ActionBar
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
Tab tabMyContacts=actionbar.newTab();//创建一个tab实例
Tab tabMyFavorite=actionbar.newTab();
tabMyContacts.setTag(0);//为Tab设置Tag，用于标识Tab的位置
tabMyContacts.setText(&全部联系人&);
tabMyFavorite.setTag(1);
tabMyFavorite.setText(&常用联系人&);
tabMyContacts.setTabListener(tabListener);//为Tab设置监听(这一步是必须的，不然系统会不报错)
tabMyFavorite.setTabListener(tabListener);
tabs.add(tabMyContacts);
tabs.add(tabMyFavorite);
actionbar.addTab(tabMyContacts);//将Tab添加ActionBar上
actionbar.addTab(tabMyFavorite);
* 初始化ViewPager
private void initViewPager() {
// TODO Auto-generated method stub
vpContent=(ViewPager)findViewById(R.id.vpContent);
//初始化ViewPager显示的页面集合
fragments = new ArrayList&Fragment&();
BaseFragment fragment1=BaseFragment.newInstance(BaseFragment.LOAD_FRAGMENT_1);
BaseFragment fragment2=BaseFragment.newInstance(BaseFragment.LOAD_FRAGMENT_2);
fragments.add(fragment1);
fragments.add(fragment2);
//设置ViewPager adapter
BaseFragmentPagerAdapter adapter=new BaseFragmentPagerAdapter(getSupportFragmentManager(), fragments);
vpContent.setAdapter(adapter);
vpContent.setCurrentItem(0);//默认显示第一个页面
//监听ViewPager事件
vpContent.setOnPageChangeListener(new OnPageChangeListener(){
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
public void onPageSelected(int position) {
currentPage =
actionbar.selectTab(tabs.get(position));//当滑动页面结束让ActionBar选择指定的Tab
public void onPageScrollStateChanged(int state) {
public boolean onCreateOptionsMenu(Menu menu) {
// I this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.simple, menu);//获取menu目录下simple.xml的菜单文件
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
switch (id) {
case R.id.refresh:
Utils.showToast(this, &您点击了刷新菜单&, Toast.LENGTH_SHORT);
return super.onOptionsItemSelected(item);
* ActionBar的Tab监听器
TabListener tabListener=new TabListener() {
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub
public void onTabSelected(Tab selectedTab, FragmentTransaction arg1) {
// TODO Auto-generated method stub
vpContent.setCurrentItem((Integer) selectedTab.getTag());//当选中了指定的Tab后让VeiwPager滑动到指定页面
public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub
程序运行效果图：
ActionBar实现分享
&menu xmlns:android=&http://schemas.android.com/apk/res/android&
xmlns:app=&http://schemas.android.com/apk/res-auto&
xmlns:tools=&http://schemas.android.com/tools&
tools:context=&com.jph.ab.MainActivity&&
&!-- 分享 --&
android:id=&@+id/share&
android:title=&分享&
app:actionProviderClass=&android.support.v7.widget.ShareActionProvider&
app:showAsAction=&always& /&
package com.jph.ab.
import com.jph.ab.utils.U
import android.content.I
import android.os.B
import android.support.v4.view.MenuItemC
import android.support.v7.app.ActionBarA
import android.support.v7.widget.ShareActionP
import android.view.M
import android.view.MenuI
* ActionBar实现分享
* @author jph
public class ShareActionBar extends ActionBarActivity {
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
Utils.showOverflowMenu(this);//如果手机有menu键也显示flowMenu
public boolean onCreateOptionsMenu(Menu menu) {
// I this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.share, menu);//获取menu目录下simple.xml的菜单文件
setShare(menu);
* 为ActionBar实现分享
* @param menu
private void setShare(Menu menu) {
// TODO Auto-generated method stub
MenuItem item = menu.findItem(R.id.share);
ShareActionProvider sap = (ShareActionProvider) MenuItemCompat
.getActionProvider(item);
Intent shareIntent = new Intent();
shareIntent.setType(&text/plain&);
shareIntent.setAction(Intent.ACTION_SEND);
shareIntent.putExtra(Intent.EXTRA_TEXT, &ActionBar实现分享@author:jph&);
sap.setShareIntent(shareIntent);
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
return super.onOptionsItemSelected(item);
程序运行效果图：
ActionBar实现搜索（操作视图）
&menu xmlns:android=&http://schemas.android.com/apk/res/android&
xmlns:app=&http://schemas.android.com/apk/res-auto&
xmlns:tools=&http://schemas.android.com/tools&
tools:context=&com.jph.ab.MainActivity&&
android:id=&@+id/search&
android:orderInCategory=&100&
android:title=&搜索&
app:actionViewClass=&android.support.v7.widget.SearchView&
android:icon=&@drawable/abc_ic_search&
app:showAsAction=&collapseActionView|ifRoom& /&
android:id=&@+id/cancle&
android:orderInCategory=&100&
android:title=&取消&
android:icon=&@drawable/ic_navigation_cancel&/&
package com.jph.ab.
import com.jph.ab.utils.U
import android.os.B
import android.support.v4.view.MenuItemC
import android.support.v7.app.ActionBarA
import android.support.v7.widget.SearchV
import android.support.v7.widget.SearchView.OnQueryTextL
import android.view.M
import android.view.MenuI
import android.widget.T
* ActionBar实现搜索
* @author jph
public class SearchActionBar extends ActionBarActivity {
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
Utils.showOverflowMenu(this);//如果手机有menu键也显示flowMenu
public boolean onCreateOptionsMenu(Menu menu) {
// I this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.search, menu);//获取menu目录下simple.xml的菜单文件
setSearch(menu);
* 为ActionBar实现查询功能
* @param menu
private void setSearch(Menu menu) {
// TODO Auto-generated method stub
final MenuItem item = menu.findItem(R.id.search);
SearchView sv = (SearchView) MenuItemCompat.getActionView(item);
if(sv != null){
sv.setOnQueryTextListener(new OnQueryTextListener() {
public boolean onQueryTextSubmit(String arg0) {
Utils.showToast(SearchActionBar.this, arg0, Toast.LENGTH_SHORT);
MenuItemCompat.collapseActionView(item);
public boolean onQueryTextChange(String arg0) {
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
switch (id) {
case R.id.cancle:
Utils.showToast(this, &您点击了取消菜单&, Toast.LENGTH_SHORT);
return super.onOptionsItemSelected(item);
程序运行效果图：
&如果你觉得这篇博文对你有帮助的话，请为这篇博文点个赞吧！也可以关注fengyuzhengfan的博客，收看更多精彩!http://blog.csdn.net/fengyuzhengfan/&
安卓的开发者网页有关于actionbar设计的详细文章一篇。建议看看。1，actionbar和下拉菜单是一回事。2，actionbar属于application，只要在转换fragment的时候invalidateOptionsMenu();就会从新构建菜单和actionbar3，onPrepareOptionsMenu()是构建actionbar和下拉菜单的地方
在Activity的onPrepareOptionsMenu()中，通过Menu.add()添加MenuItem即可。默认的MenuItem就是显示在折叠按钮中的。如果想让MenuItem直接显示在ActionBar上，比如图示的“SAVE”和“DELETE”，可设置MenuItem的属性：MenuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)；-------------------------------------------------------------------更多疑问解答，请关注新浪微博@安卓互助平台。
相关搜索：
相关阅读：
相关频道：
Android教程最近更新Windows Phone 8 UI设计规范（UI设计师干货）
&&首推于&15.05.11
浏览(351)|回应(0)
1. 元素对齐与边距所有的页面都应遵循左边距12px或24px。内容，标题，标头以及标头的图标也应左对齐，距离左边界为12px或是24px。如果有需要进行右对齐，右边距也应该是12px或是24px。小贴士： 在调试模式运行应用时，你可以查看由25*25红色方块组成的半透明网格。这些方块是以24px边距填充页面的，并且他们之间的距离是12px，这也恰恰体现了windows phone设计方块的魔力。这些网格可以帮助你迅速找出任何对齐的问题。当列表的字段与数值成对出现时，应以两组左对齐的队列出现，或是像系统联系人应用中详细信息页面的设计那样，标题在内容的上方。2. 元素间距元素的间距应该在水平和垂直两个方向上保持一致。建议元素以12px的间距出现，以遵循设计网格。3. 控制点击响应当使用诸如按钮、列表项等标准控件时，应该使用系统标准的倾斜效果不要使用背景、前景或是外框颜色变化其他控件，不采用动画或是颜色的变化是允许的在点击时，任何信息的颜色变化都是不允许的。4. 列表列表项被点击时，都应以倾斜动画表明。除了在选取器中，列表项都不应该有选中状态。请在应用中使用一致的字体，列表项的文字至少应有12像素的高度，并且是容易点击的，同时确保文字在所有角度和大小下的可阅读性。背景不建议使用背景，尽管他们可以传达品牌并且增加一些对比度。取而代之，你可以给文字前景加一些相关元素。布局用文字的大小和颜色建立列表项的层级列表增强例如在菜单中，不要使用列表增强的设计。除非他们之间需要有明显的差别。有条经验法则：在圆圈里的图标意味着操作而不在圆圈里的往往只有指示作用。可滚动内容如果在页面中有可滚动的内容，你需要在内容的底端留出95px的距离，这样内容就不至于贴着页面的最底端。例如，下图就是一个只比可视区域高出一点点的页面当用户滚动到页面的最底端时， 会出现橡皮筋的效果，内容会被稍稍拉离页面底部。当滚动动作结束时，内容会重新弹回页面的边界。虽然这样可行并且看起来还尚可，但是把内容一直伸展到页面底部并不是完美的。最快解决的办法就是在页面底部设置95px的距离，为内容模块与底部边界腾出一些空间——不管是针对手机屏幕还是底部的菜单栏。这样看起来会更顺眼。在系统的联系人应用中的介绍或是历史页面，你都能看到同样的底边距。还有在日历应用中的新建邀请页面，亦或是IE浏览器的设置页面，也是一样的处理。说到设置，你可以到系统的设置应用中试试滚动到底部。5. 枢轴枢轴页面所有的枢轴使用至少需要两个页面枢轴页面中的禁用控件拨动开关滑动条地图控件——除非它们是静态的（例如缩放和平移手势应被禁用）浏览器控件——除非它们是静态的（例如缩放和平移手势应被禁用）手势冲突提供水平滚动区域或是水平滑动手势的控件都是不允许在枢轴页面中应用，因为水平滑动的手势已被枢轴页面间的切换占用。空的枢轴页面如果某个枢轴页面的内容显示取决于用户的操作，应该使用占位符文本/图片来提示用户。例如，当“未读邮件”的枢轴页面中没有内容时，页面不该被移走，保留的同时应该显示简单的信息来说明当前没有可用的内容。更多细节请查看：Windows Phone枢轴页面设计指南6. 全景全景页面中的禁用控件拨动开关滑动条地图控件——除非它们是静态的（例如缩放和平移手势应被禁用）浏览器控件——除非它们是静态的（例如缩放和平移手势应被禁用）菜单栏在菜单栏中应当有如刷新，搜索及设置等常用操作菜单栏里可用的选项可以随着全景面板变化全景中应当避免使用浮动按钮或是尽量少使用手势冲突提供水平滚动区域或是水平滑动手势的控件都是不允许在全景页面中应用，因为水平滑动的手势已被全景页面间的切换占用。滚动面板全景面板的滚动应当选择水平或垂直方向，不能两者皆有。在全景页面中，不可将所有的面板设置为都可垂直滚动，如果使用场景要求这样的，枢轴页面更为合适。采用多样化的全景面板（水平与垂直向滚动交替使用）可以提升总体的体验并且更易浏览。导航避免使用浮动按钮。如果必要的话提供一个导航模块，提供给用户寻找更深内同的入口系统提供的图片应用以及音乐&视频应用就是全景导航使用的绝佳案例。常规任务的操作应该放在菜单栏里。可交互内容全景页面中尽量少使用可以交互的内容（如表格，搜索框等）全景页面中的控件应对用户有所引导（如应用的缩略图）页面中的用户任务应少而精，具有针对性并且引人注目全景中的操作并不是整个应用的全部面板数量全景页面中推荐最多使用五个面板。超过五个则会增加浏览的难度而且程序的响应会开始变得不流畅。背景全景页面应采用背景，可以是带具有品牌元素的纹理图，各种图形或者是照片。理想的情况是具有吸引力且符合全景页面内容的背景标题标题应带有移动时的动画效果全景标题的动画速度，相对于最顶上有内容的区域慢，如果有背景图片，也应比它移动的速度慢二级标题字体的大小应该比它相应得内容大7. 标题标题应使用左对齐方式，不能使用背景，外边框，下划线等任何装饰唯一例外是在全景下可以使用企业品牌化的元素参考本篇文章关于文字的章节8. 按钮位置只要可能，按钮都应该放在菜单栏中。以下情况除外：全景中“出错啦！无法找到参考源”之类的指引操作弹出窗或是需要很多操作的设置页面快速操作（例如电话应用中的通话记录）关闭按钮 （Close）Windows Phone应用中不需要关闭按钮，关闭操作应由返回的硬键负责。回退按钮 （Back）Windows Phone在任何地方都禁用回退按钮。用户会通过回退的硬键进行操作。主页按钮 （Home）不应提供主页按钮，因为这会引起Windows Phone的导航模式的问题。如果用户同时使用了这个主页的按钮和回退的硬键就会导致一个死循环。9. 选择器标准的选择器控件应用于选择一个日期或时间，或者是选择一个字母。如果要使用非标准的选择器，样式应该遵循系统的设置应用中选择铃声的选择器。10. 开始瓦片主要瓦片开始瓦片不应有圆角或是3D效果。应与开始菜单中的其他的瓦片使用同样的样式。确保使用的标准瓦片的模板应用的Logo应该遵循模板的设计在瓦片中不应重复使用Logo如果应用的名字是图片里的一部分，那么瓦片上的名字信息应被移除避免出现两次避免使用本地化的文字在图片或是瓦片中避免使用纯白或是纯黑的背景，否则这样的瓦片在亮或暗的背景上无法很好地显示避免使用相对时间戳或是日期（比如两小时前），因为随着时间推移会变得不太精确，请使用绝对时间（例如14：00）次要瓦片次要瓦片点击不应链到相应的内容页次要瓦片中不应有和应用交互的操作（例如“下一首”）两个好的例子：新闻类应用会显示常规更新，股票的应用会有实时的价格显示。避免显示不具时效性的内容宽瓦片宽瓦片只能用作显示经常更新的内容或是提醒（至少每周一次）宽瓦片必须实时更新。11. 浏览器控件任何应用都不允许在任何页面中使用内嵌浏览器，应将用户直接带到IE浏览器中。会将用户带离应用的链接都应清楚地告诉用户将会发生的事情例外当需要给用户呈现认证页面（例如Facebook或Twitter认证），如果没有Xauth或是类似的API能够满足实现的需求，这个页面可以允许以内嵌浏览器的形式出现在应用中。12. 弹窗请采用标准的Windows Phone的弹窗。弹窗中只有一个按钮时左对齐，多个时居中对齐。尽量避免使用自定义弹窗——如果一定要使用，请尽量模仿系统弹窗的行为。Windows Phone工具包中也有一个允许一定程度自定义的弹窗控件。13. 对比度页面中所有的控件在前景与背景间都应采用有效的对比度。这个对于全景页面尤为重要，因为全景的图片经常会影响文字的可读性。如果你遇到这样的情况，要么换一张背景，要么给背景上加一个半透明的黑色或灰色的遮罩。14. 文字大小写除了二级标题用全大写外，所以的标题都应该用小写。如果品牌有特殊的需求，请保证在整个app中的大小写规则是统一的。自定义/品牌化字体应用中可适度使用自定义或符合品牌化字体。自定义字体可用在页面标题或是全景区域标题上，而其他的地方应该使用Segoe WP字体。请谨慎使用那些看起来特别像Segoe WP的字体，像Arial和Helvetica，因为与Segoe一起混搭使用这些字体看起来特别奇怪。15. 图片应用中用于背景或是界面元素的图片需与应用相符请保证图片的比例，确保其不会因为缩放而变形或模糊。有透明度的图片需要有一定的抗锯齿属性以确保在不同颜色的背景上较好地显示。对于大部分应用，我们建议只使用WXGA的图片。WXGA相比之下质量最高，而且能够自适应不同的分辨率。16. 图标隐喻不要混用图标的隐喻。用户的认知是特定的图标代表特定含义，要么因为他们在设备的其他地方见到用，或者这些图标通常和某些功能挂钩。例如：如果你想表达的语义找不到相对应隐喻的图标，就自己设计一个，切勿重用其他图标。视觉风格图标的设计应当遵循Windows Phone的视觉风格——简单、单色、扁平。17. 触点确保你的应用在触控体验上最优化最小字体的大小为15pt推荐的触控大小为9mm最小的触控大小为7mm元素中最小的距离为2mm视觉元素的大小与触控范围的比例应控制在60%-100%元素被触控后应提供响应18. 错别字应用中不应有任何拼写错误重申一下，错别字问题不仅看上去很糟糕，而且会对你的品牌造成负面影响19. 主题应用的设计应当考虑设备的主题和颜色变换，或是设定不受颜色改变的固定的主题不管使用什么主题，应用的所有元素都应清晰可见而且有一定程度的对比度。20. 启动页请为不同分辨率定制启动页21. 手机的返回键手机的返回键必须让用户完成以下的操作：1. 关闭例如对话框，键盘或是选择清单的临时界面2. 回退到上一步返回键的功用在任何情况下都不允许改变，包括在次级瓦片时的使用22. 次级瓦片（深层规范）次级瓦片的设计用于给用户展示应用的特殊部分，通过它用户可以快速简单地对内容进行浏览，而次级瓦片通常并不是这些细节的交互入口。系统的应用中有许多关于次级瓦片设计的优秀案例。 例如，音乐和视频应用的专辑，在用户点击时就会播放。而次级瓦片的特殊用途在于点击会将用户定位到该专辑并且直接播放。用户同样可以将联系人放置到开始页面。通过点击这些次级瓦片用户可以进入到联系人的枢轴页面，查看联系人信息，或是进行相关的操作。点击手机的返回键会将用户带回启动页面。放置到开始页面大头针图标应当出现在应用的菜单栏中，表示可以将这个物件或是选择放置到开始页面。不得将此图标用作它意。点击并保持的动作也可以出发选项，将物件放置到开始页面——这是WindowsPhone工具包中的一部分将应用放置到开始页面的行为应当由用户自主控制，或是获得用户许可。在未向用户获取权限之前，请不要擅自将任何应用或是物体放置在开始页面。手机的返回键当用户通过点击次级瓦片启动应用时，点击手机上的返回按钮会退出该应用程序（例如，返回开始页面）。此返回键的交互行为在任何情况下都不许更改。23. 锁屏页面背景图片尽量不要有文字出现，避免与锁屏消息在视觉上产生冲突。背景图片应尽可能简单，复杂的图片会影响锁屏消息和提醒的可读性。标志logo应尽可能小，防止对日期时间以及消息造成干扰。如果图片里出现文字，应当与图片直接相关。锁屏页面的视觉焦点应当是背景图片，而非标志或是文字。24. 拍照设计应用中应该显示左箭头图标来表示有更多照片保存和拍照的动效应该一致需要支持点击直接拍照以及相机上用于拍照的硬键需要支持按下一半拍照键用于对焦对焦框应与系统相机行为一致用于拍照和用于确认的应用应该有统一的图标（例如保存和删除），同样适用于动效取消或保存应将用户带回取景器的页面。图标在Windows Phone SDK中皆可找到多媒体链接链接应当以定制的体验启动应用，而非简单地将用户带到启动默认页避免在相机胶卷中使用品牌的元素——用户需要在毫无视觉干扰的情况下进行分享和编辑。25. 页面跳转动效页面切换时需有动效，各种效果可以查看Windows Phone工具包中的Silverlight。十字翻转——用于不同区域变换的动效旋转——用于展现临时的界面滑动——用于没有前进导航的平级操作倾斜——用于控件被按下的自然反馈进度条的使用就像在界面中使用倾斜效果来表示点击反馈一样，进度条能够让用户清楚地知道有事情正在发生，这能够消除用户对于应用是否正在运行的疑虑。以下是两种进度条的样式：确定进度和不确定进度确定进度条通常用于显示完成度的比例，例如已下载的大小。不确定进度条更为常用，特别是在不确定此进程的时长时，例如正在等待连接网页服务的响应时。26. 界面语言不要使用计算机术语，十六进制的错误编码，或是需要深厚计算机知识背景才能看懂的文字。请使用真实清晰的语气来描述用户语言。请使用友好的、愉快的或是情感化的语言，杜绝出现机械的描述或是对用户愤怒的指责。结论以上只是一些从各种案例分析中得出的常用设计建议，所以做你自己认为对的设计，同时以下有一些值得借鉴的成功经验：在任何移动平台上设计出良好体验就是要为平台及其使用习惯定制应用设计令人信服的Windows Phone界面的第一步就是要花些时间好好用一下系统发布的应用，这能帮助你熟悉Windows Phone平台的特性和设计语言多从那些优秀的第三方应用中获得灵感，我最喜欢的一个应用，Cocktail Flow对设计原则进行了创新，提供了令人印象深刻的体验。当你已经准好基础准备开始进行应用的页面视觉设计时，请参考一下本篇文章中的指南。这对你避免一些常见的错误设计非常有帮助，之前我在设计自己应用的时候也遇到了。
作者：添加作者
(以上内容来自于网友投稿，如侵犯了您的相关权利，请点击
通知我们，我们将尽快予以删除。)
退出以后，该精选社将不会显示在您的首页
您发布的内容超过140字了，试试投稿功能吧
您发布的不能超过500字了！
您发布的内容已经超过500字了，您只能使用投稿功能发布
别忘了点击发布哦！
发布成功！
成功发布到审核区!
你为什么要举报此投稿？
举报说明：(可选)
成为小编才能给社长推荐哦！
我要当小编
举报成功！
收藏成功！
取消收藏成功！
您还没有认证为原创作者
若您先提交此文章,稍后认证,我们会将其自动添加到您的原创
先投稿稍后认证}