声明：不是产品也不是设计师，以下有关项目改造的内容是集合了同事和自己的一些想法和建议。
本文目前基本不包含技术干货，在项目优化申请通过后会添加不涉及公司项目的示例代码片段。
一、项目改造前
项目改造背景
- 界面不好看（不涉及UI设计），缺少过渡和动画
- 体验不好，如交互响应，响应提示
- 使用Material Design相关元素
项目改造原则
- 只能一定程度改变项目UI、控件以及交互，不能改变原有逻辑。
二、开始前的准备
2.1 设计规范
大 Google 的设计规范，必须吹一波。2014 年就出来了，现在国内一些主流app可以看出 MD 的影子。
跟着目录细心看，试着去理解这种设计的思路。里面详细记录了从动画到布局，甚至行间距和文字大小的一些规范，按照这样的规范来，相信大家都可以做出漂亮的App。
2.2 Material Design 相关控件
有了官方的设计规范，接下来需要了解一些 Material Design 的相关控件的使用：
或许你喜欢直接拿来用：
GitHub Awesome-MaterialDesign
类似的资料还有很多，可以自行查询。
2.2 图标
- Google 在 GitHub 维护的 Material Design 风格图标：
- AndroidStudio 自带的图标：
drawable 右键创建 Image Asset（图标）或 Vector Asset（矢量图）
新建图片资源
新建图标
有很多图标可供选择和使用，另外，使用Vector Asset（矢量图）需要注意适配。
2.3 色彩
已经广泛传播的调色板，记录一下。包含预览颜色效果，图标下载以及色值选择。
三、开始吧
3.1 登录页面
登录
优化建议：
- 输入框 获取焦点时更新颜色。
- 登录按钮高度太低，现在用户在输入账号密码后需要再次点击隐藏键盘才能登录。
登录按钮移动至上半屏幕，确保 不会被输入法挡到位置。
这时感觉上半屏位置有点挤：可以把注册和登录同行，标题左移，忘记密码放到标题右侧。 - 用户输入账号或密码后添加小×图标，一键删除输入内容。
- 所有可操作按钮 添加响应。
- 打开登录页 自动弹出键盘，并锁定账号输入框。如果涉及第三方登录，不适合这种做法。因为会影响用户点击其它方式的登录按钮。
- 可用 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：效果可参考
- AutoCompleteTextView：其实是个包含了 ListPopupWindow 的 EditText，封装起来做成自动补全功能。
额外的建议：
- 记录在本机登录过的账号，一键补全。
货主和承运商界面相似，本文以货主角色 UI 为例。
3.2 首页
首页
App涉及角色切换，点击左上角的货主按钮出现 PopupMenu，可选 “货主”，“承运商”，“司机”三个角色。
优化建议：
- 角色切换方式 可以优化，如果更换的话可能需要 重新设计，且涉及逻辑较多，暂不更改。
- 用户登录时 提示用户选择角色。（Maybe）
- 角色切换可添加动画，用户操作时从左上角动画延伸至整个首页。Reveal Effect (揭露效果)。
- MD 风格：头部 CoordinatorLayout + AppBarLayout + Toolbar，AppBarLayout + Toolbar 可以抽出来。底部导航栏可用 BottomNavigationView 替换。
权限提示框
权限提示框
- 优化弹出效果，淡入淡出。替换 Material Dialog。
- 调整优化布局，按钮位置、颜色以及增加点击效果。
3.3 询价
询价
优化建议：
- 这里看上去是个 TabLayout + ViewPager，其实并不是。所以准备替换掉，使该页面可以左右滑动。
- item 布局视觉效果较差，调整条目显示效果，参考 司机端-运单。
- 单号既然展示出来，就应该支持长按复制单号。
- 注意到右上角搜索按钮，可用 Toolbar和其 Search Action 优化。
搜索页面也需要优化，以后版本处理。
额外的建议：
- 或许可以增加 收藏功能。包括 询价、报价、找货详情 等都可以收藏，让用户能够准确快速访问到自己留意的信息。在某个条目右下角设计收藏按钮。在 “我的” 页面添加收藏界面的入口。
3.4 订单
订单
订单页面是个 H5 页面。无论是视觉、操作还是可优化性上都与原生相差甚远。
为了提升用户体验，建议转为原生来做。
3.5 我的
我的
优化建议：
- 可点击条目增加点击反馈。
- UI 细节优化，条目线颜色等。
- 使用 CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout 优化滑动效果。
额外的建议：
- 设置页可细分。
我的页面展示用户操作功能：“我的账单”、“我的二维码”。
界面右上角增加设置按钮，点击跳转到设置页面查看 “关于我们”、“清除缓存” 等系统信息。
更换头像
更换头像
去掉弹出框，到图片选择页面可以选择拍照功能。
四、结尾
- 以上只是个人想法，暂未取得领导同意。所以暂时先更到这里。
- 后续会贴出修改前后效果对比图。
- 涉及公司项目的代码不会贴出，但是会找出相应实现例子供参考。
- 本文持续更新...
网友评论