每周一博

Android从细节提升用户体验[原创]

2018-05-29  本文已影响111人  健身营养爱好者

*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

前言

HI，欢迎来到裴智飞的《每周一博》。今天是十月第二周，我将基于Android开发中常用的组件，结合具体操作，聊聊如何从细微之处提升用户体验；

本文目录

  1. 基本组件
  2. 界面过渡
  3. 安卓适配
  4. 其他

一.基本组件

1.文本框（TextView）

这是使用最多的控件，用于显示文字内容，其他的一些基本组件基本都继承自他；良好的文字排版可以给用户带来心理的舒畅，设计稿上的文字排版一般都会非常好看，可是到了手机上却变了样，可能是标注不够充分，或是理解不到位，我从以下几个方面介绍一下，主要有字体，尺寸，颜色，对齐，空白，行距，行数，这也是我认为使用TextView必须设置的属性；

1.字体：Android默认是Roboto，如果在个别地方使用自定义字体，那么可以通过setTypeface(Typeface.createFromAsset(getAssets(), "fonts/mini.ttf"))来设置存放在assert资源目录下的字体，如果全局使用了一种字体，那么建议自定义一个TypefaceTextView来使用；

2.尺寸：Android字体默认单位是sp，他在dp的基础上针对文字做了优化，显示效果更好，谷歌建议采用android:textAppearance="?android:attr/textAppearanceLarge/Small/Medium"形式来进行显示，他会根据设备去做适配，但是如果要实现微调的话，还是要自己去写具体数值，再根据分辨率进行适配，建议针对文字尺寸做一套大小等级，然后根据等级去引用；

3.颜色：色彩的搭配很重要，深浅层次可以突出重点，建议文字的颜色也定义一套层级，比如一级黑，二级灰，三级浅灰，四级亮白，然后根据color的层级去引用；

4.对齐：即gravity属性，单个文字的对齐方式有居左（left），居右（right），水平居中（center_horizontal），垂直居中（center_vertical），center（居中）等许多种，或是他们的组合，一般单个文本会采用居中对齐，多个文字的对齐方式则会整体左对齐或是右对齐；

5.空白：这里指padding属性，而非margin，padding是要包含到view的宽高里面的，善用空白会让文字便于阅读，不显得紧凑，一般都会给文字设置paddingLeft/Right/Top/Bottom属性；其实不光文本，其他的view，尤其是viewGroup，给内部组件四周留些空白会使整体的布局变得更优雅；

6.行数：

7.行距，如果文本有很多行，那么建议调整一下行距（lineSpacingExtra="3dp"），Android默认的行距略窄；

8.性能优化：

9.其他：文字内容是否需要自动识别链接（autoLink），是否需要粗体斜体（textStyle）等样式，是否设置透明度（alpha）；

//这里给出上述TextView的属性集合
<TextView    
     android:layout_width="match_parent"    
     android:layout_height="wrap_content"    
     android:gravity="center"    
     android:layout_margin="5dp"    
     android:padding="5dp"    
     android:singleLine="true"    
     android:ellipsize="end"    
     android:maxEms="15"    
     android:lineSpacingExtra="3dp"    
     android:textSize="14sp"    
     android:textColor="#eeeeee"    
     android:autoLink="phone"    
     android:text="Hello World!" />
2.按钮（Button）

按钮是一个需要和用户交互的组件，因此对于用户的点击要及时的给予反馈（使用selector），对于不可点击的状态要给予显示，使用button必须设置background；

1.状态：一个按钮至少应该有可用（enable="true"），不可用（enable="false"），按下（pressed="true"）三态，按下的状态可以简单的把透明度调到50%(8位16进制颜色值前两位代表透明度，如#500000ff表示有一半透明度的蓝色)，但一定要有，这三者共同组成一个基本的selector，对于需要选中的要有selected状态，这个一般出现在底部导航选中或这列表某一项选中；

//exitFadeDuration属性可以实现状态间的动画过渡
<selector xmlns:android="http://schemas.android.com/apk/res/android"  android:exitFadeDuration="100">
     <item android:state_enabled="false" android:drawable="@drawable/button_unable"/>    
     <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>    
     <item android:state_enabled="true" android:drawable="@drawable/button_enable"/>
</selector>

2.背景：对于采用背景（background）变换的按钮，建议优先使用xml文件来编写shape，其次是使用.9文件，最后才使用压缩后的图片，这样可以从点滴之处减小安装包的体积；

3.文字按钮：Button继承自TextView，所以其他一些属性都可以套用，对于文字按钮，即没有背景（background）的点击需要改变文字颜色，给用户一个回馈，颜色的selector和背景的selector类似；

4.配合EditText：程序里面经过判断之后对于不可点击的按钮要setEnable（false），并且在点击的时候弹出一个当前不可用的提示；

5.其他：一个按钮的可触摸区域不应小于手指触碰的最小面积，即48dp，文字按钮的触摸区域为18sp；

3.输入框（EditText）

EditText继承了TextView并实现了输入文字的功能，也是一个和用户进行交互的组件，使用EditText需要设置hint，inputType，imeOptions属性来提升体验；

1.提示：hint属性一定要有，也可以称作占位符，textColorHint可以设置提示文字颜色，一般是要比显示的文字低一个等级；

2.输入类型：指定了inputType会出现相应的键盘，如数字，电话，密码或文本，对于密码文本需要在右边添加一个切换显示方式的按钮；

3.设置右下角的键盘动作（imeOptions）是什么，是search，next，done，还是go；

4.快速删除：当用户输入内容之后，右边出现一个叉号，快速清空所输内容，而不用一直按back键；

5.验证：提交信息的时候一定要进行验证，或者实时验证，诸如邮箱，手机等格式，或者长度等，对于空格要考虑是否trim掉，如果输入不合法要给予一个提示，比如右边出现红色的提示文字，我一般是让输入框左右晃动一下；

6.设置右下角回车的事件，不需要按钮来辅助执行;

 editText.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (keyCode==KeyEvent.KEYCODE_ENTER){
                }
                return true;
            }
        });

7.设置光标（selection）所在的位置，一般是设置在最后一位（setSelection(mResultText.length())）

8.增强的搜索体验：给输入框添加监听器，监听用户输入的字符串，实现实时搜索或过滤，或者根据输入内容进行数据库的匹配，显示相关条目；

9.限制输入的内容：可以设置（android:digits="1234567890.+-*/%\n()"），还可以根据需求屏蔽长按，设置其为不可复制；

10.设置不可编辑：可以采用旧的api（editable=false）或者新的setInputType(InputType.TYPE_NULL)；

  <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:imeOptions="actionDone"
        android:hint="请输入内容"
        android:textColorHint="#bbbbbb"
        />
4.图片（ImageView）

图片需要设置前景图和缩放属性，不论是设计还是开发都需要考虑到这一点；

1.前景和缩放：src属性是图片特有的，用于显示一张图片，但是图片的大小和view的大小一般是不一致的，这就需要设置缩放模式（scaleType），所以这两个属性一般是成对出现的，基本的模式有不下10种，常用的有拉伸铺满（fitXY），居中缩放（centerInside），裁剪（centerCrop） ，一般的banner显示是会让宽度为屏幕宽度，高度自适应；

2.背景：任意一个view都可以设置背景（setBackgrounResourse），背景是和view的宽高一致的，所以图片用来做背景通常是会发生形变的，但是背景和前景一起设置，有的时候可以做出一些特殊的效果；

3.项目中常用到的图片一般是从网络上面取得，这就需要显示一张占位图来宣传品牌标识，对于图片库建议采用FaceBook的Freso库，圆角，圆形，或者其他效果都有很好的封装；

4.素材管理：

  <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_actionbar_add"
        android:scaleType="centerCrop"
        android:alpha="0.6"
        />
5.布局（ViewGroup）

Android提供了多种类型的父容器，我们应当针对布局的特性，复杂性和性能优化方面合理的进行选择，主要的ViewGroup有FrameLayout，Linearlayout，Relativelayout，GridLayout和下一节的AbsListView；

1.FrameLayout：是最轻量级的容器，性能比较好，建议优先考虑，一般fragment的container会用，还有一些看起来是相对布局的样式也可以使用FrameLayout来实现，依赖于gravity属性；

2.Linearlayout：对于子控件的出现或消失可以给一个过渡动画（android:animateLayoutChanges="true"），避免突兀，对于适配使用weight属性，平分布局的分割线可以用deliver；

3.Relativelayout：相对布局可以实现比较复杂的布局，常用于列表的每一项的布局，但是我觉得还是尽量减少子控件之间的依赖，多使用相对于父容器的属性，这样设置view可见和不可见的时候不会影响其他组件的显示；

4.布局适配：Android的UI适配可以采用百分比库，这个库可以按照屏幕或父容器宽高进行子控件的宽高的分配，这是我认为目前比较合理的适配方案；

6.列表（AbsListView）

列表是安卓中大量使用到的组件，一般有LIstView，GridView，新的RecycleView

1.空视图：当列表为空的时候，要放置缺省图和说明文字，给予用户提示，空视图最好可以点击，并执行重新加载的请求；

2.下拉刷新：让列表支持下拉刷新的功能，以便用户可以及时的获取最新的内容；下拉一般是用户主动去触发，对于编辑之后返回列表需要刷新的采用自动刷新；

3.分页加载：当列表内容过多的时候要采用分页加载，一般是一次取20条，当列表滑到最底端的时候自动去请求下一页的数据或者是上拉刷新下一页；

4.缓存：当有网的时候请求网络数据，没有网的情况下使用本地缓存，即用户上一次看过的列表内容；

5.列表中的图片：采用异步加载，不阻塞线程，从占位图到网络图的出现给一个alpha动画，避免突兀，使用弱引用及时回收图片，避免内存溢出；

6.列表中的控件：需要考虑列表整体是否需要被点击，列表内单个控件的点击行为是什么，建议根据实体去进行操作；

7.列表样式：

8.复用：adapter里面的逻辑判断不要过于复杂，否则会影响界面滑动流畅度，adapter可以复用，如列表页，搜索结果页，我的内容页，都可以共用，通过构造函数传入的变量进行合理的重构；

9.对于需要编辑的列表，编辑成功之后再刷新列表，而且是只刷新点击的那一条数据，这就需要在点击item的时候使用startActivityForResult，并用onActivityResult来接收结果；

10.根据需要添加滑动删除功能，对于删除的item可以做一个逝去的动画，有一个体验规则是用户知道自己要做删除，所以删除前不要询问，而是在删除后给予一个撤销的功能，这个体验在绝大多数的国外软件中都有用到；

7.开关，进度和提示框（Switch，Progress/Dialog/Toast）

1.开关：
其实开关和一个按钮没什么区别，只不过这种布尔值的按钮用起来比较方便，button完全可以替代它，一般有单选框（radiobutton），复选框（checkbox，switch），他有一个onCheckChangedListener，但我觉得还是使用button配合bean比较好；

2.简单提示

3.对话框

二.界面过渡

1.过渡动画
2.状态保存

伴随着界面的切换和旋转，旧的activity和fragment的view可能会重绘，这样就有可能失去view当前的状态，如用户的输入内容（EditText），浏览的列表项（ListView）等等，这就需要我们手动保存数据并复原（在onSaveInstanceState里面把要保存的数据记录下来，并在onRestoreInstanceState中恢复）；

  @Override
    public void onSaveInstanceState(Bundle outState, PersistableBundle outPersistentState) {
        super.onSaveInstanceState(outState, outPersistentState);
        outState.putString("edit", editText.getText().toString());
        outState.putInt("list",listView.getLastVisiblePosition());
    }

    @Override
    protected void onRestoreInstanceState(Bundle savedInstanceState) {
        super.onRestoreInstanceState(savedInstanceState);
        editText.setText(savedInstanceState.getString("edit"));
        listView.setSelection(savedInstanceState.getInt("list"));
    }
3.滑动返回

用户常见的手势有touch，click，swipe，flip，我们在开发程序的时候应该尽量采用滑动手势去替代点击行为，因为用户是懒惰的，产品越简单越易操作越好；

4.界面跳转

三.安卓适配

Android程序需要适配很多机型，而适配又分很多种类型，主要是分辨率，系统版本，屏幕尺寸，处理器，我一般会去Talkdata去查看近期的数据统计，它是针对国内用户的数据统计；

四.其他

1.与时俱进，进一步提升用户体验
2.优化代码，提升性能
3.测试和调试
4.安装包体积优化

可以从这几个方面入手来优化体积：第三方库，服务器，图片，插件化；

结尾：

本周给大家分享了Android从一些细节方面提升用户的体验，更多的是偏向设计和产品方面，市场上面这种设计结合代码的书也有很多，面向产品的书籍就更多了，它们都可以给我们很多的灵感，让我们不光只看代码，也关注用户。感谢大家的阅读，我们下周再见。

上一篇下一篇

猜你喜欢

热点阅读