MyFlag Step3: 界面设计初步

引言

值得一提的是，经过几天的探讨与努力，我们的项目有了实质性的进展。这一周，我们小组首要讨论的大概有以下几点：

• 用户端系统模块的划分
• 用户端详细设计的初步进行
• 接口文档的进一步确定
• 用户界面设计的进行

用户界面设计的进行

由于用户界面的设计和实现以及相关的界面跳转与系统的功能模块有着紧密的联系，所以主要负责界面设计的我我是在探讨如何规划系统模块，如何精简系统模块以及如何使系统模块间的衔接更加清晰合理的问题上下了大功夫。

目前，客户端的模块设计基本上确定下来，确定下来的模块有：

• 网络请求工具模块，封装了与服务器通信的方法
• 用户模块，功能包括
  • 用户注册
  • 用户登录
  • 修改个人信息
  • 修改密码
  • 查找用户

• 社区模块，功能包括
  • 添加好友
  • 确认添加好友
  • 改变备注
  • 我的朋友
  • 获得好友请求列表

• 用户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的三个界面。剩下的三个界面应该与客户端开发人员协同应该显示的数据有哪些。