引言
值得一提的是,经过几天的探讨与努力,我们的项目有了实质性的进展。这一周,我们小组首要讨论的大概有以下几点:
- 用户端系统模块的划分
- 用户端详细设计的初步进行
- 接口文档的进一步确定
- 用户界面设计的进行
用户界面设计的进行
由于用户界面的设计和实现以及相关的界面跳转与系统的功能模块有着紧密的联系,所以主要负责界面设计的我我是在探讨如何规划系统模块,如何精简系统模块以及如何使系统模块间的衔接更加清晰合理的问题上下了大功夫。
目前,客户端的模块设计基本上确定下来,确定下来的模块有:
- 网络请求工具模块,封装了与服务器通信的方法
- 用户模块,功能包括
- 用户注册
- 用户登录
- 修改个人信息
- 修改密码
- 查找用户
- 社区模块,功能包括
- 添加好友
- 确认添加好友
- 改变备注
- 我的朋友
- 获得好友请求列表
- 用户Flag模块
- 创立Flag
- 查看我的Flag
- 更新我的Flag
- 删除我的Flag
- 社区Flag模块,主要功能有
- 查看朋友的Flag
- 请求朋友监督自己的Flag
- 处理要求监督Flag的请求
- 评价朋友的Flag
- 查看朋友对自己Flag的评价
其中,每一个模块将对应着一个界面的设计,具体的设计逻辑以及功能模块的信息显示需要双方的密切沟通,针对我们模块的初步确定。我尝试着将几个集体操作流程所需要的界面进行初步的设计,查看前期效果。
根据用户操作习惯和流程,目前尝试的界面有:
- 注册界面
- 登录界面
- 个人首页界面
- 新建Flag界面
- 社区界面
- 好友界面
分别对应的功能为:
- 用户模块
- 用户注册
- 用户登录
- 用户Flag模块
- 创立Flag
- 查看我的Flag
- 社区模块
- 我的朋友
- 社区Flag模块
- 产看朋友的Flag
用户注册
相关代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/activity_bg_gray"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white"
android:padding="0dp">
<ImageButton
android:id="@+id/back_btn"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentLeft="true"
android:background="@drawable/toolbar_back_bg"
android:onClick="backTo"
android:src="?attr/homeAsUpIndicator" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="注册"
android:textColor="@color/black"
android:textSize="19sp" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/activity_bg_gray"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:orientation="vertical"
android:paddingTop="25dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="@drawable/login_userid_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="昵称"
android:textColor="@color/black"
android:textSize="16sp" />
</LinearLayout>
<EditText
android:id="@+id/registerNameEditText"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="2"
android:background="@drawable/edittext_blue_bord_bg"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="@color/black"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="@drawable/password_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="密码"
android:textColor="@color/black"
android:textSize="16sp" />
</LinearLayout>
<EditText
android:id="@+id/registerPasswordEditText"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="2"
android:background="@drawable/edittext_blue_bord_bg"
android:inputType="textPassword"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="@color/black"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="@drawable/password_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="确认密码"
android:textColor="@color/black"
android:textSize="16sp" />
</LinearLayout>
<EditText
android:id="@+id/registerPasswordAgainEditText"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="2"
android:background="@drawable/edittext_blue_bord_bg"
android:inputType="textPassword"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="@color/black"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="@drawable/phone_num_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="手机号"
android:textColor="@color/black"
android:textSize="16sp" />
</LinearLayout>
<EditText
android:id="@+id/registerPhoneNumberEditText"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="2"
android:background="@drawable/edittext_blue_bord_bg"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="@color/black"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="@drawable/email_num_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="邮箱"
android:textColor="@color/black"
android:textSize="16sp" />
</LinearLayout>
<EditText
android:id="@+id/registerEmailEditText"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="2"
android:background="@drawable/edittext_blue_bord_bg"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="@color/black"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="@drawable/personal_info_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="个人信息"
android:textColor="@color/black"
android:textSize="16sp" />
</LinearLayout>
<EditText
android:id="@+id/registerPersonalInformationEditText"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="2"
android:background="@drawable/edittext_blue_bord_bg"
android:hint="选填"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="@color/black"
android:textColorHint="@color/text_hint_gray"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<Button
android:id="@+id/registerCompleteButton"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="60dp"
android:layout_marginTop="60dp"
android:background="@drawable/login_button_bg"
android:text="完成"
android:textColor="@color/white"
android:textSize="16sp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
设计效果图:
登录界面:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/login_bg"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/login_bg"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="270dp"
android:gravity="center_horizontal|bottom"
android:orientation="vertical"
android:padding="40dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="120dp"
android:src="@drawable/login_logo" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="56dp"
android:layout_marginRight="56dp"
android:background="@drawable/edittext_blue_bord_bg"
android:orientation="horizontal">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_margin="16dp"
android:src="@drawable/login_userid_icon" />
<EditText
android:id="@+id/loginAccountEditText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:background="@null"
android:hint="手机号"
android:textColor="@color/black"
android:textColorHint="@color/text_hint_gray"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="56dp"
android:layout_marginRight="56dp"
android:layout_marginTop="16dp"
android:background="@drawable/edittext_blue_bord_bg"
android:orientation="horizontal">
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_margin="16dp"
android:src="@drawable/login_password_icon" />
<EditText
android:id="@+id/loginPasswordEditText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:background="@null"
android:hint="密码(6-16位英文和数字)"
android:inputType="textPassword"
android:textColor="@color/black"
android:textColorHint="@color/text_hint_gray"
android:textSize="16sp" />
</LinearLayout>
<Button
android:id="@+id/loginLoginButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="56dp"
android:layout_marginRight="56dp"
android:layout_marginTop="16dp"
android:background="@drawable/login_button_bg"
android:gravity="center"
android:onClick="login"
android:text="登录"
android:textColor="@color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="56dp"
android:layout_marginRight="56dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp">
<Button
android:id="@+id/loginRegisterButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/transparent"
android:gravity="center"
android:onClick="goToRegister"
android:text="注册"
android:textColor="@color/login_button_default_blue"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
设计效果图:
新建Flag界面:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/activity_bg_gray"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white"
android:padding="0dp">
<ImageButton
android:id="@+id/back_btn"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentLeft="true"
android:background="@drawable/toolbar_back_bg"
android:onClick="create_backTo"
android:src="?attr/homeAsUpIndicator" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="新建FLAG"
android:textColor="@color/black"
android:textSize="19sp" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="@color/white"
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="内容"
android:textColor="@color/black"
android:textSize="16sp" />
<EditText
android:id="@+id/newFlagContentEditText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:layout_weight="2.2"
android:background="@null"
android:textColor="@color/text_dark_gray"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/activity_bg_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="形式"
android:textColor="@color/black"
android:textSize="16sp" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2.2">
<carbon.widget.RadioGroup
android:id="@+id/radio_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<carbon.widget.RadioButton
android:id="@+id/personal_rb"
android:layout_width="wrap_content"
android:layout_height="@dimen/carbon_listItemHeight"
android:gravity="center_vertical"
android:text="个人"
android:checked="true"/>
<carbon.widget.RadioButton
android:id="@+id/team_rb"
android:layout_width="wrap_content"
android:layout_height="@dimen/carbon_listItemHeight"
android:gravity="center_vertical"
android:text="团体" />
</carbon.widget.RadioGroup>
<TextView
android:id="@+id/newFlagFormEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_below="@+id/radio_group"
android:background="@color/white"
android:textColor="@color/text_dark_gray"
android:textSize="16sp"
android:padding="8dp"
android:text="\@"
android:visibility="gone"/>
</RelativeLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/activity_bg_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="开始时间"
android:textColor="@color/black"
android:textSize="16sp" />
<TextView
android:id="@+id/begin_tv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:layout_weight="2.2"
android:background="@null"
android:gravity="center_vertical"
android:textColor="@color/text_dark_gray"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/activity_bg_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="结束时间"
android:textColor="@color/black"
android:textSize="16sp" />
<TextView
android:id="@+id/end_tv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:layout_weight="2.2"
android:background="@null"
android:gravity="center_vertical"
android:textColor="@color/text_dark_gray"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/activity_bg_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="邀请监督人"
android:textColor="@color/black"
android:textSize="16sp" />
<TextView
android:id="@+id/newFlagInviteEditText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:layout_weight="2.2"
android:background="@null"
android:textColor="@color/text_dark_gray"
android:textSize="16sp"
android:gravity="center_vertical"
android:text="\@"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/activity_bg_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="监督人上限"
android:textColor="@color/black"
android:textSize="16sp" />
<EditText
android:id="@+id/newFlagLimitEditText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:layout_weight="2.2"
android:background="@null"
android:textColorHint="@color/text_hint_gray"
android:hint="请输入上限数"
android:textColor="@color/text_dark_gray"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/activity_bg_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="奖励设置"
android:textColor="@color/black"
android:textSize="16sp" />
<EditText
android:id="@+id/newFlagAwardEditText"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="16dp"
android:layout_weight="2.2"
android:background="@null"
android:textColorHint="@color/text_hint_gray"
android:hint="请输入奖励"
android:textColor="@color/text_dark_gray"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/activity_bg_gray" />
<Button
android:id="@+id/newFlagCommitButton"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:layout_margin="40dp"
android:background="@drawable/login_button_bg"
android:text="提交申请"
android:textColor="@color/white"
android:textSize="16sp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
设计效果图:
总结
为了可以更好模拟在真机上的运行效果,其他三个界面在没有后台的支持的情况下,需要进行相关测试数据的填充处理,来达到查看的目的,由于篇幅比较长,故 暂时先完成了登录、注册、创建Flag的三个界面。剩下的三个界面应该与客户端开发人员协同应该显示的数据有哪些。