Android UI 设计笔记

一、设计原则
     •理解Android的外观和感觉
          4.x版本简单、平面、干净，注重功能本身。
     •基于心理模型
          将后台复杂的事情设计成符合用户常用的浏览模式和操作模式。
     •以用户使用情景的思维方式做设计
     •为不同的设备设计
          确保在大部分的设备上正常运行，适用于不同的屏幕尺寸和屏幕方向，适用于低亮度或对比度较差的屏幕，和速度慢的低配置机器。注意：使用对比强的文字和元素颜色，避免使用白色或浅灰色。在不同亮度环境下检查效果。确认UI元素和文字在小屏幕或者低分辨率屏幕上显示足够大。
     •使用density-independent设计布局
          确保每个屏幕上显示的元素的物理尺寸一致
     •为不同的分辨率设计
          一般从640X960开始，然后缩小到其他分辨率。MDPI:HDPI:XHDPI:XXHDPH:XXXHDPI=2：3：4：6：8。
     •考虑不同的系统版本
          尽量提供最新的体验，旧平台的可以创建一个单独的版本。
     •提供扩展组件和壁纸
          桌面组件、壁纸、消息通知。
     •为平板设备设计
          需要更大的字体、按钮、留白。多窗格布局。




二、设计风格
     •扁平化设计
           拒绝特效，仅仅采用二维元素，不加修饰（阴影、斜面、突起、渐变等）
           仅仅使用简单的元素，使用简单的外形。
           注重排版。字形应该使用粗体，文案精简干练。字体选择无衬线字体，通过字体大小和比重来区分元素。
           配色更明亮、绚丽，平均使用6~8种颜色。使用纯色，不做淡化或者柔化处理。
           简约方案。避免不必要的元素，注重效率的最大化。
     •卡片式设计
           将页面切割成N个区域，给人很好的视觉一致性，易于设计上的迭代。
           卡片以垂直的方式展现，是响应式的，易读，可共享。
           用于解决：信息分类、导航、任务管理。
           缺点：对页面空间消耗大，将内容元之间割裂，一屏呈现的信息量很小。
           当用户需要大范围扫视、接受大量信息时会降低效率。


三、布局


常见布局：
     •相对布局
          padding指控件内部内容离控件边界的距离。layout_margin指该控件距离父控件的边距。
     •线性布局
          gravity是布局中控件的对齐方式，如果没有子控件则为控件内容的对齐方式。
          layout_gravity为控件在父布局容器中的对齐方式。
     •帧布局
          全堆放在左上角，后添加的控件覆盖前面的控件。例如TabHost。


优化布局：
     •复用布局
          <include>、fragment
          注意，<include>指定了id的话，其布局里面的控件必须先获得该布局再findviewbyid，否则会报空指针。只有间接才能获得相同id的控件。
          <merge>用于根元素，可以解决重复节点造成的浪费。view.inflate(int resource,ViewGroup root,boolean attachToRoot),attachToRoot为true.
     •多设备支持
          创建不同屏幕尺寸的布局文件。放在适当的目录下，如layout-large。文件名必须一致。
          创建横竖屏的布局文件，layout-land横向,layout-port竖向


布局设计原则
     •为高分辨率的屏幕创建资源
     •需要点击的元素要够大
     •图标设计遵循Android准则
     •使用适当的间距
     •支持D-pad和trackball导航
     •正确管理activity堆栈
     •正确处理屏幕方向变化
     •使用主题样式、尺寸、颜色资源来减少多余的值


     需要关注
     •屏幕物理尺寸
     •屏幕密度DPI
     •屏幕方向
     •UI交互方式
     •软键盘还是物理键盘
     •设备差异


布局设计技巧
     •合理利用UI空间
          共享空间——多个界面的跳转和不同状态之间的切换。（标签、滚动、翻转切换）
          expandableListView（挤压式界面布局）
     •注意拇指死角
          分为探索热区（拇指触及的扇环区域）和非探索热区。死角区误操作率高。
     •横屏模式下需要考虑拉伸适配还是重新设计。
          游戏类直接在启动时切换到横屏。
          视频类可以做引导动画效果切换到横屏，可以将导航栏、工具类设置为隐藏或者透明。
          尽量避免重组信息，考虑改变展示辅助信息功能的方式，为每一种方向提供独特的启动图片。
     •触摸设计
          扩大操作焦点：Android4.0规定 有效可触摸的UI元素标准是48dp。建议目标大小为7-10毫米。
          下移操作焦点：将有效点击区域向下向右（右手持机）偏移几像素。


四、使用hierachy viewer调试界面
     •启动
           SDK/tools下的hirerachyview.bat
           Windows-open perspective-hierarchy view
      •查看控件层次 Load view hierarchy
      •页面精确查看模式  Inspect Screenshot             




五、应用主页设计技巧
     •链接列表式（快速启动板）
          主页面中菜单选项就是进入各个应用的起点，常见的包括3X3、2X3、2X2等网格形式。
     •列表菜单式
          可分为 分组列表、个性化列表、行内扩展式列表、增强性列表。适合显示较长或者拥有次级文字内容的标题。
     •选项卡式
          类似于标准网站的导航模式。不同的选项卡显示不同的应用，可以水平滚动选项卡，数量一般不超过7个。
     •陈列馆式
          在平面上显示各个内容项类实现导航。可布局成轮盘、网格、幻灯片演示。一般用来显示文章、菜谱、照片、产品信息。
     •隐喻式
          显示一些隐喻的对象，主要用于游戏应用，在组织事物、分类的应用也可看到，如日记、书籍等。


六、用户体验设计
     产品架构是否清晰：
     •产品结构清晰，没有不必要的层级
     •能够快速了解产品有几个主要页面
     •所有主要部分都能够通过首页访问
     •清晰地指示当前位置
     产品流程是否清晰：
      •明确产品有几个主要的任务流程
      •每个任务流程清晰，没有太多分支
      •任务流程符合用户操作流程
      •用户可以取消正在执行的操作
      •操作成功或者失败都有明确的反馈
      •在每个层级都可以找到返回上一级的方法
      •预防出错，如果出错要帮助用户从错误中恢复过来
      •复杂的交互是否有很好的引导和帮助
     控件使用是否准确：
      •控件使用准确性
      •控件的复用
      •控件的状态
      •链接色的准确使用
      •焦点状态的准确使用
     信息传达是否到位：
     •布局清晰
     •文案简洁
     •没有术语
     •合理排版（标题、作者、时间的字号、字色，页边距的运用）
     •标签和内容的从属关系
               
七、widgets设计与事件处理
     表单控件设计
     文本控件：
      •textview
           ellipsize可以设置文本的显示方式，marquee为跑马灯方式显示。
      •edittext
           hint为指定输入提示信息，inputtype指定输入类型
      输入监听：（物理键盘和软键盘不能同时监听）
          物理键盘
               setOnKeyListener(){
                    onKey（）
                    {
                         if(event.getAction()==KeyEvent.ACTION_DOWN && keyCode==KeyEvent.KEYCOSE_ENTER) //回车
                    }
               }   
          软键盘
               setOnEditorActionListener{
                    new Textview.onEditorActionListener()
                    {
                         onEditorAction()
                              {
                                   if(actionId==EditorInfo.IME_ACTION_DONE) //软键盘回车
                              }
                    }
               }
     •TextSwitcher为文本设置动态效果。
     •AutoCompleteTextView和MutiAutoCompleteTextView完成文本框自动输入功能。


     字体排版
          基于12、14、16、20、34号字体排版缩放（sp）。
          文本应当满足最低对比度4.5:1（明度）。7:1是最适合阅读的。
          每行包含60个左右的字符。


     按钮控件
          •Button
          •ImageButton
          •ZoomControls，包含放大缩小按钮，监听
               setOnZoomInClickListener(new onClickListener(){
                         onClick(){}
               })
           ZoomButton用法类似。
          •RadioGroup和RadioButton.单选按钮
          •CheckBox.多选按钮


     按钮风格：
          悬浮相应按钮：点击后会产生墨水扩散效果的圆形按钮。
          浮动按钮：常见的方形纸片按钮，点击后会产生墨水扩散效果。
          扁平按钮：点击后产生墨水扩散效果，没有浮起的效果。


     按钮设计原则：
          对话框中使用扁平按钮，在内部四周留出足够空间。
          持续可见的功能按钮推荐使用悬浮相应按钮。
          非主要、快速定位的按钮可以使用底部固定按钮。不要在底部固定按钮的区域内使用浮动按钮。


     进度条控件
          •长形进度条、圆形进度条ProgressBar。
               设置样式：style="?android:attr/ progressBarStyleLarge"超大圆 Small 小圆  SmallTitle标准圆
               长形：style="?android:attr/ progressBarStyleHorizontal"
               android:max="100"最大进度值 android:progress="50" 初始化进度值 android:secondaryProgress="70" 初始化底层第二个进度值
          •可拖动进度条SeekBar。
               SeekBar.OnSeekBarChangeListener.
          •星型评级控件RatingBar。


     适配器控件：
          实现自定义适配器、定义控件、绑定控件、适配数据、监听事件。
          •Gallery：锁定中心条目并且拥有水平滚动列表的视图，一般用于一组相同尺寸图片的显示。
          •Spinner：下拉列表框控件，提供快速选择的方式。默认显示当前选中的项，触摸后显示其他可选项的下拉菜单，用户可以做出新的选择。
               生成ArrayAdapter,通过adapter.setDropDownViewResource()设置下拉列表样式，setAdapter绑定数据源，setOnItemSelectedLisener()响应下拉列表选择。
          •ListView:显示一组列表项的列表视图，列表项可以是组合项。
               长按是OnItemLongClickListener.
          ListActivity是activity的子类，用于显示一个绑定到数组或者游标等数据源的列表，并为列表的每一项提供单击事件的管理方法。
          •GridView是一种在平面上可显示多个条目的可滚动的栅格视图控件。
               columnWidth设置列宽度，numColumns设置列数，horizontalSpacing设置列间距，verticalSpacing设置行间距，stretchMode设置缩放模式。


     适配器大数据加载
          •分页显示
               水平分页显示，n/m页形式。
          •拖动刷新
               下拉刷新最新数据，上拉刷新历史数据。
          •垂直定位
               在右侧显示A~Z的索引列，可以单击索引中字母快速定位。（联系人）
               右侧设计垂直滚动条，并显示位置索引。
          •支持批量操作
               选择、添加、删除、排序。


     按键事件处理
          •物理键盘监听 onKeyDown,onKeyUp.
          •软键盘监听 
               显示/隐藏监听：
               InputMethodManager imm=(InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)；
               if(imm.isActive()) //显示软键盘时关闭软键盘
               {
                    imm.toggleSoftInput(InputMethodManager.SHOW_IMPLICIT,InputMethodManager .HIDE_NOT_ALWAYS);
               }


               按键监听：
               dispatchKeyEvent()


     触屏事件处理
          onTouchEvent()
          多点触屏通过event的getPointerCount()获取触屏点个数。


     手势事件处理
          手势类别：
               触摸，长按，滑动，拖动，双击，双击拖动，放大，缩小。


          GestureDetector类将基本的触屏事件转变成不同的手势动作。通过实现GestureDetector.OnGestureListener接口来构造实例，少部分手势动作处理可继承GestureDetector.SimpleOnGestureListener。
          主要回调方法包括：
               •onDown().轻触单击
               •onShowPress().轻触单击，尚未松开或者拖动
               •onSingleTapUp()。轻触单击后松开（单击后立即松开）
               •onFling().按下、快速移动后松开触发。
               •onLongPress()。长按
               •onScroll()。按下并拖动。


     手势设计技巧
     •减少无用手势
     •善用区域性手势
     •注重浅性引导
          露出功能某一部分、到达界限值给出文字动画提示、进入具有手势操作的界面时给出气泡动画图片提示、通过拟物的方式提示（绳子、开关、滑块、掀起页脚）。
     •提供反馈


     感应器事件处理
          传感器通过监听机制实现，其步骤如下：
          创建SensorManager对象。Context.getSystemServiceContext (Context.SENSOR_SERVICE)
          实现SensorListener接口。onAccuracyChanged(),onSensorChanged().
          注册SensorListener.SensorManager对象registerListener(). 取消注册时调用unregisterListener()。 一般来讲注册和取消注册成对出现，如果在onResume中注册，在onPause中取消注册。




widgets设计技巧
         •按钮状态
               不可点击状态、可点击状态、聚焦状态、按下状态。如果处于不可用状态要灰掉或者隐藏按钮。
          •菜单项以5~7个为宜，二级菜单注意合理分类。
          •每页显示6~10个列表，每行显示10~16个字，标题5个字以内，标签栏2~3个字。 如果文字过长，选择型的截断或者打点省略，如果内容阅读型，折行。
          •语言精简，使用用户语言，准确传达信息。
          •分清主要任务和次要任务，清晰流程，不要有太多分支。
          •相关选项要有操作上的延续性，不要离得太远。
          •节约流量、电量，提升浏览速度和浏览体验。可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式保证基础体验。
          •图标可以做小，但是点触范围不要比图标小。
          •标签页和内容要有联动关系，最多二级标签。当标签页是点击切换时，内容可以整体刷新，当标签页是滑动切换时，内容也要滑动切换。
          •需要将功能和操作做个优先级设定，常用的20%可以放在界面主要位置上，其他的放在次要位置或者合理归类组织后隐藏起来。
          •空数据页面，提供情感化的界面，引导用户去执行创建内容的操作。
          •通用的功能、非重点模块不需要引导，功能告知需要轻量级的引导，版本更新说明可以采用说明式的引导，但要言简意赅。
          •手机联网、交换数据时要提供加载中状态，旋转进度条或者toast都可以，要告知开发人员加载中是前台还是后台的，且要考虑加载时间过长、网络开关没有打开、网络不通的情况怎么处理。
          •注意返回键的使用，具体定义是实例的替换还是回到控件的初始状态等。
          •横屏模式需要考虑是简单拉伸适配还是重新设计，如果应用不适合在横屏模式下使用，就屏蔽掉横屏。




表单控件设计技巧
          •清晰的视觉纵线
               L型视线，导航和重要操作在下面。
          •信息分组
               同一类表单可以放在一起，表单太长时可以拆分成不同的组。
               分组一种是以折叠列表的方式显示相关分组，一种是以分屏的方式显示相关分组。
          •极致的减法
               表单中最好不要添加不需要的信息，不常用的可以隐藏，通过某个入口进行添加。
          •利用选择代替输入
          •标签及提示文字的排版方式：不要过于占用垂直空间
          •依靠明文确认密码    
               除了重复输入两次密码外，可以采用其他办法：
               默认明文，可选暗文。最后一位明文。全部明文。默认暗文，可选明文。对话框确认密码输入正确。
          •支持滑块输入
               滑块直观，对特定范围的数据输入非常实用，外形美观，易于操作，占据屏幕控件不多。
          •合理的键盘利用
               网址——网址输入键盘。数字——数字键盘。电话——电话号码。姓名——中文。邮箱——邮箱。
         •及时的校验反馈
               每输入一个表单项系统就立即告诉用户填写是否正确。




数据加载模式设计
     •全屏加载
          整个屏幕白屏进行数据加载，一般有旋转的加载等待提示。保证内容的完整性，有非常强烈的等待感。常用于手机网页的加载。
     •优先加载
          在加载图片比较慢的情况下先加载文字，再加载图片。这种方式不能将重要信息放在顶层图片，也最好不要用图片按钮操作。可以帮助用户快速阅读内容，了解信息，可能会丢失重要的信息，无法建立信息获取的闭环。适用于内容阅读型应用。
     •整页加载
          保证每个页面的数据量不是特别大，优点是能保证每个页面的完整性，体验比较整体。缺点是不能保证整页的加载效率，可能影响浏览的流畅度。适用于宫格图片、全屏图片、网状详情页。
     •自动加载
          适用于长列表的情况，可以设定规则。如默认加载20条，当滚动到第20条再自动加载20条。代入无尽浏览模式，不需要手动点击下一页，缺点是不方便快速索引定位到某个内容。适用于瀑布流、长列表、商品列表等情况。
     •智能加载
          根据网络状况智能调整，根据具体场景来控制流量和加载速度，缺点是不一定真实有效地命中用户需求，所以要给予设置项。适用于有大量图片或视频的应用。
     •离线加载
          在用户没有连接网络时，采用预加载+离线缓存的设计。在连接网络时将数据提前加载并缓存到本地，没有网络时直接加载已经缓存的内容。用户可以选择是否开启WiFi下的预加载功能。解决了没有网络时获取数据的问题，节约流量，保证流畅，缺点是占用本地空间，有时候预加载的内容没有用到。适用于小说阅读、新闻阅读、视频类。
     •支持异步任务
          在等待界面时允许其他操作。


搜索设计技巧
     •自动输入提示
          当文本框获得焦点时，搜索框展开显示历史搜索建议，或者智能给出参考。
     •语音输入
          点击麦克风按钮激活语音搜索，提高搜索简易性。
     •保存搜索记录
          保存用户搜索记录并显示最近搜索内容，用户不需要再次输入相同的关键词。能极大地提高用户输入效率。
     •将结果与本地结合
          将用户的搜索结果做一个本地化处理，并能在搜索结果页直接启动导航或者打开地图，提高效率和体验。
     •移动即时搜索
          保证搜索结果的新鲜感，时效性。基于位置的搜索。
     •显示搜索结果
          键盘隐藏，搜索框失去焦点。搜索结果显示为表格或者列表样式，地图搜索直接显示锚点，可以将结果格式化为卡片。延迟加载。提供多种视图。搜索结果过多时提供一个“查看更多结果”按钮。


 八、对话框、菜单、导航


     通知
          •toast
               简单的弹出式信息，适用于确定用户正在关注屏幕时显示简单信息。不接受交互事件。
          •notification
               在状态栏显示简要信息，将状态栏下滑可以打开通知抽屉，单击消息会打开相关应用。适用于程序在后台服务工作时，需要通知用户某一事件时使用。
               以下情况不应该使用notification通知：
               和用户没有直接关系或者不是时间敏感的事件。如果事件已经显示在屏幕上了就不要用notification了。如果应用可以自己处理的技术就不要问用户。不要用错误信息打扰用户。不要通知用户无法手动开始或者停止的服务。
          •对话框
               alertdialog，progressdialog，datepickerdialog，timepickerDialog。
               注意dismissdialog是使对话框消失但还处于内存中。removedialog从内存中将dialog清除。


     菜单
          •options menu
               按下menu键后显示在屏幕下方的菜单，最多只能显示6个菜单项，只支持文字和图表，可以设置快捷键。
          •context menu
               长按一个注册了context menu的view弹出的浮动菜单项目列表，相当于右键菜单。
               
     动作栏
          •actionbar
               API 11引入的概念。主要作用包括：突出重要操作；提供统一导航和视图切换体验；较少使用的功能收集到其他操作菜单中，减少界面上的杂乱布局；为应用提供展示特点的空间。


          •actionmode
               浮于标题栏上的临时操作栏，用来放置一些特定的子任务。显示用户可以对当前选中项目进行的操作选项。
               
     导航
          •应用图标导航
               动作栏左侧显示应用图标，用户单击时回到父级activity或者回到初始状态。
               例如用户单击时回到父级activity ：
                    onStart(){
                    ActionBar bar=this.getActionBar();
                    bar.setDisplayOptions(ActionBar.DISPLAY_HOME_AS_UP,ActionBar.DISPLAY_HOME_AS_UP);//点击图标返回父级activity
                    //或者为图标增加一个箭头，作用一样
                    bar.setDisplayHomeAsUpEnabled(true);
               }
               该图标id为android.R.id.home.
               例如点击图标跳转到MainActivity:
               onOptionsItemSelected()
               {
                    switch(item.getItemId() )
                    {
                              case android.R.id.home :
                              Intent intent=new Intent(this,MainActivity.class);
                              intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);//要启动的activity如果已经存在于当前任务中，则所有在他上的activity都被销毁，该activity到最上层。
                              startActivity(intent);
                              return true;
                              …………
                    }
         
               }
     
     •标签页导航
          基本过程是：
          创建一个ActionBar.TabListener的实现来处理动作栏标签的交互事件。
               例如：
                    public static class TabListener<T extends Fragment> implements ActionBar.TabListener{
                         private Fragment mFrag;
                         private final Activity mAc;
                         private final String mTag;
                         private final Class<T> mClass;
                         public TabListener(Activity String Class<T> ){……}
                         onTabSelected{
                              if(mFrag==null)
                              {  mFrag=Fragment.instantiate(mAc,mClass.getName());ft.add(android.R.id.content,mFrag,mTag);}
                              else{ft.attach(mFrag);}
                         }
                         onTabUnselected(){
                              if(mFrag!=null){ft.detach(mFrag);}
                         }
                    }
          对于要添加的每个标签页，调用setTabListener()来实例化，还可以用setText()、setIcon()设置标题和图标。
          通过addTab()将每个标签页添加到动作栏。例如
               onCreate()
               {
                    ActionBar bar=getActionBar();
                    bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)；
                    bar.setDisplayShowTitleEnabled(false);
                    Tab tab=bar.newTab().setText("a").setTabListener(new TabListener<XXXXFragment>(this,"Fragment A",FragmentA.class));
                    bar.addTab(tab);
                    tab=bar.newTab().setText("b").setTabListener(new TabListener<XXXXFragment>(this,"Fragment B",FragmentB.class));
                    bar.addTab(tab);
               }


•下拉列表导航
          在动作栏添加一个spinner控件，过程是
               创建一个adapter,为下拉提供列表和列表项的布局。
               实现actionbar.onnavigationlistener.定义用户选中列表项的发生的行为。
               在activity的oncreate方法中使用setNavigationMode()开启导航模式。  如bar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST)；
               设置下拉列表的回调.setListNavigationCallbacks().