声明:不是产品也不是设计师,以下有关项目改造的内容是集合了同事和自己的一些想法和建议。
本文目前基本不包含技术干货,在项目优化申请通过后会添加不涉及公司项目的示例代码片段。
一、项目改造前
项目改造背景
- 界面不好看(不涉及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 优化滑动效果。
额外的建议:
- 设置页可细分。
我的页面展示用户操作功能:“我的账单”、“我的二维码”。
界面右上角增加设置按钮,点击跳转到设置页面查看 “关于我们”、“清除缓存” 等系统信息。
更换头像
更换头像去掉弹出框,到图片选择页面可以选择拍照功能。
四、结尾
- 以上只是个人想法,暂未取得领导同意。所以暂时先更到这里。
- 后续会贴出修改前后效果对比图。
- 涉及公司项目的代码不会贴出,但是会找出相应实现例子供参考。
- 本文持续更新...
网友评论