Android 项目优化笔记(一)

作者: Marker_Sky | 来源:发表于2018-10-17 14:41 被阅读1169次

    声明:不是产品也不是设计师,以下有关项目改造的内容是集合了同事和自己的一些想法和建议。
    本文目前基本不包含技术干货,在项目优化申请通过后会添加不涉及公司项目的示例代码片段。

    一、项目改造前

    项目改造背景

    • 界面不好看(不涉及UI设计),缺少过渡和动画
    • 体验不好,如交互响应,响应提示
    • 使用Material Design相关元素
    项目改造原则

    • 只能一定程度改变项目UI、控件以及交互,不能改变原有逻辑。

    二、开始前的准备

    2.1 设计规范

    大 Google 的设计规范,必须吹一波。2014 年就出来了,现在国内一些主流app可以看出 MD 的影子。

    Material Design中文版

    跟着目录细心看,试着去理解这种设计的思路。里面详细记录了从动画到布局,甚至行间距和文字大小的一些规范,按照这样的规范来,相信大家都可以做出漂亮的App。

    2.2 Material Design 相关控件

    有了官方的设计规范,接下来需要了解一些 Material Design 的相关控件的使用:

    Android Material Design(一)史上最全的材料设计控件大全

    12个Material Design风格控件的使用

    或许你喜欢直接拿来用:

    GitHub Awesome-MaterialDesign

    类似的资料还有很多,可以自行查询。

    2.2 图标

    • Google 在 GitHub 维护的 Material Design 风格图标:

    material-design-icons

    • AndroidStudio 自带的图标:

    drawable 右键创建 Image Asset(图标)或 Vector Asset(矢量图)


    新建图片资源 新建图标

    有很多图标可供选择和使用,另外,使用Vector Asset(矢量图)需要注意适配。

    Android Studio使用Vector Asset的注意事项

    2.3 色彩

    已经广泛传播的调色板,记录一下。包含预览颜色效果,图标下载以及色值选择。

    material design palette

    三、开始吧

    3.1 登录页面
    登录
    优化建议:
    1. 输入框 获取焦点时更新颜色。
    2. 登录按钮高度太低,现在用户在输入账号密码后需要再次点击隐藏键盘才能登录。
      登录按钮移动至上半屏幕,确保 不会被输入法挡到位置。
      这时感觉上半屏位置有点挤:可以把注册和登录同行,标题左移,忘记密码放到标题右侧。
    3. 用户输入账号或密码后添加小×图标,一键删除输入内容。
    4. 所有可操作按钮 添加响应。
    5. 打开登录页 自动弹出键盘,并锁定账号输入框。如果涉及第三方登录,不适合这种做法。因为会影响用户点击其它方式的登录按钮。
    6. 可用 MD 控件:顶部通用 ActionBar,也可用 ToolBar。输入框 TextInputLayout + AutoCompleteTextView(自动补全TextView,可设置下拉补全选项)。
      贴一段 Google 登录页面 xml 代码。
    <ScrollView
        android:id="@+id/login_form"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/email_login_form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
    
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <AutoCompleteTextView
                    android:id="@+id/email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_email"
                    android:inputType="textEmailAddress"
                    android:maxLines="1"
                    android:singleLine="true" />
    
            </android.support.design.widget.TextInputLayout>
    
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <EditText
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_password"
                    android:imeActionId="@+id/login"
                    android:imeActionLabel="@string/action_sign_in_short"
                    android:imeOptions="actionUnspecified"
                    android:inputType="textPassword"
                    android:maxLines="1"
                    android:singleLine="true" />
    
            </android.support.design.widget.TextInputLayout>
    
            <Button
                android:id="@+id/email_sign_in_button"
                style="?android:textAppearanceSmall"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="@string/action_sign_in"
                android:textStyle="bold" />
    
        </LinearLayout>
    </ScrollView>
    
    • 外层 ScrollView,在特别小屏的设备里,如果软键盘挡住了按钮,至少还可以滑动。但是这个高度一般手机都不会挡住的。
    • TextInputLayout:效果可参考

    Android原生控件之--TextInputLayout、TextInputEditText

    • AutoCompleteTextView:其实是个包含了 ListPopupWindow 的 EditText,封装起来做成自动补全功能。
    额外的建议:
    1. 记录在本机登录过的账号,一键补全。

    货主和承运商界面相似,本文以货主角色 UI 为例。

    3.2 首页

    首页

    App涉及角色切换,点击左上角的货主按钮出现 PopupMenu,可选 “货主”,“承运商”,“司机”三个角色。

    优化建议:
    1. 角色切换方式 可以优化,如果更换的话可能需要 重新设计,且涉及逻辑较多,暂不更改。
    2. 用户登录时 提示用户选择角色。(Maybe)
    3. 角色切换可添加动画,用户操作时从左上角动画延伸至整个首页。Reveal Effect (揭露效果)。
    4. MD 风格:头部 CoordinatorLayout + AppBarLayout + Toolbar,AppBarLayout + Toolbar 可以抽出来。底部导航栏可用 BottomNavigationView 替换。
    权限提示框

    权限提示框
    1. 优化弹出效果,淡入淡出。替换 Material Dialog。
    2. 调整优化布局,按钮位置、颜色以及增加点击效果。
    3.3 询价
    询价
    优化建议:
    1. 这里看上去是个 TabLayout + ViewPager,其实并不是。所以准备替换掉,使该页面可以左右滑动。
    2. item 布局视觉效果较差,调整条目显示效果,参考 司机端-运单。
    3. 单号既然展示出来,就应该支持长按复制单号。
    4. 注意到右上角搜索按钮,可用 Toolbar和其 Search Action 优化。
      搜索页面也需要优化,以后版本处理。
    额外的建议:
    1. 或许可以增加 收藏功能。包括 询价、报价、找货详情 等都可以收藏,让用户能够准确快速访问到自己留意的信息。在某个条目右下角设计收藏按钮。在 “我的” 页面添加收藏界面的入口。
    3.4 订单
    订单

    订单页面是个 H5 页面。无论是视觉、操作还是可优化性上都与原生相差甚远。
    为了提升用户体验,建议转为原生来做

    3.5 我的
    我的
    优化建议:
    1. 可点击条目增加点击反馈。
    2. UI 细节优化,条目线颜色等。
    3. 使用 CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout 优化滑动效果。
    额外的建议:
    1. 设置页可细分。
      我的页面展示用户操作功能:“我的账单”、“我的二维码”。
      界面右上角增加设置按钮,点击跳转到设置页面查看 “关于我们”、“清除缓存” 等系统信息。
    更换头像
    更换头像

    去掉弹出框,到图片选择页面可以选择拍照功能。

    四、结尾

    • 以上只是个人想法,暂未取得领导同意。所以暂时先更到这里。
    • 后续会贴出修改前后效果对比图。
    • 涉及公司项目的代码不会贴出,但是会找出相应实现例子供参考。
    • 本文持续更新...

    相关文章

      网友评论

        本文标题:Android 项目优化笔记(一)

        本文链接:https://www.haomeiwen.com/subject/lglynftx.html