Android 项目优化笔记（一）：概览

更新啦：

Android 项目优化笔记（二）：登录页
Android 项目优化笔记（三）：首页
Android 项目优化笔记（四）：列表
Android 项目优化笔记（五）：实现一个 MD 风格详情页

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

一、项目改造前

项目改造背景

---

• 界面不好看（不涉及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，在特别小屏的设备里，如果软键盘挡住了按钮，至少还可以滑动。但是这个高度一般手机都不会挡住的。
• 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. 设置页可细分。
   我的页面展示用户操作功能：“我的账单”、“我的二维码”。
   界面右上角增加设置按钮，点击跳转到设置页面查看 “关于我们”、“清除缓存” 等系统信息。

更换头像

更换头像

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

四、结尾

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