手机登陆界面设计

1. 如何设计android的登录界面

在网上在到一个登录界面感觉挺不错的，给大家分享一下~先看效果图：

这个Demo除了按钮、小猫和logo是图片素材之外，其余的UI都是通过代码实现的。

?

一、背景

背景蓝色渐变，是通过一个xml文件来设置的。代码如下：

background_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:andro>
<gradient
android:startColor="#FFACDAE5"
android:endColor="#FF72CAE1"
android:angle="45"
/>
</shape>

startColor是渐变开始的颜色值，endColor是渐变结束的颜色值，angle是渐变的角度。其中#FFACDAE5中，FF是Alpha值，AC是RGB的R值，DA是RGB的G值，E5是RGB的B值，每个值在00~FF取值，即透明度、红、绿、蓝有0~255的分值，像要设置具体的颜色，可以在PS上的取色器上查看设置。

?

?

二、圆角白框

效果图上面的并不是白框，其实框是白色的，只是设置了透明值，也是靠一个xml文件实现的。

background_login_div.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:andro>
<solid android:color="#55FFFFFF" />
<!-- 设置圆角
注意： bottomRightRadius是左下角而不是右下角 bottomLeftRadius右下角-->
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>
</shape>

?

三、界面的布局

界面的布局挺简单的，就直接贴代码啦~

login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:andro
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/background_login">
<!-- padding 内边距 layout_margin 外边距
android:layout_alignParentTop 布局的位置是否处于顶部 -->

<RelativeLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="15dip"
android:layout_margin="15dip"
android:background="@drawable/background_login_div_bg" >
<!-- 账号 -->
<TextView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="5dp"
android:text="@string/login_label_username"
/>
<EditText
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/login_username_hint"
android:layout_below="@id/login_user_input"
android:singleLine="true"
android:inputType="text"/>
<!-- 密码 text -->
<TextView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/username_edit"
android:layout_marginTop="3dp"
android:text="@string/login_label_password"
/>
<EditText
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_password_input"
android:password="true"
android:singleLine="true"
android:inputType="textPassword" />
<!-- 登录button -->
<Button
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/password_edit"
android:layout_alignRight="@id/password_edit"
android:text="@string/login_label_signin"
android:background="@drawable/blue_button" />
</RelativeLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView android:
android:text="@string/login_register_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textColor="#888"
android:textColorLink="#FF0066CC" />
<ImageView android:
android:src="@drawable/cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="25dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="25dp" />
<ImageView android:src="@drawable/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/miniTwitter_logo"
android:layout_alignBottom="@id/miniTwitter_logo"
android:paddingBottom="8dp"/>
</RelativeLayout>
</LinearLayout>

2. 手机app登录界面逻辑设计怎么做

熟悉必要的设计流程，分布开始实施

3. 登陆界面ui设计是什么

1. 文本输入框需增加提示

如果用户使用你的服务必须登录，那么输入框中的提示语（如：输入手机号码，输入验证码）必须要增加。

使这些字段清楚可见，并且不要让用户到处寻找，或花更多的步骤进到App。

提示：相比于使用常见的“登录”“登陆”的按钮，可以更富有创造性，并要包含可直接输入区域。确保记住用户的数据，这样他们就不需要每次输入信息。

2. 在登录和注册部分，增加不同的输入字段

除了动词“登入”之外，另一个另用户感到困惑的是，登录和注册部分通常有相同数量的输入框（用户名，密码，和邮箱）。为了更好的区分，最小化新用户尝试直接登录的机会。应用不同的输入字段。

让用户知道哪里错了

如果应用监测到一个错误的密码组合，或用户名，但是没有明确的报告给用户哪里错了，用户可能会多次尝试后，很生气的退出应用。

所以你应该考虑回复哪里出错了（例如“你的密码或邮箱不符合”），并且给他们立马回复怎么解决这个问题。

4. 如何更好地设计手机软件界面

手机已经成为大多数人的使用方式，所以手机用户界面成为基本用户界面，这也成为许多设计者考虑设计手机软件或者以网页为基准的手机应用的因素。让我们现在去测试一些普通的手机软件UI元素来看看一些新手怎么完成他们，以及从中发掘更好的方式去解决问题。
尽可能的限制文本输入
大多数的手机程序都提供一个文本框来捕捉用户的反馈信息。然而我认为文本信息框应该只运用在一些必要的时刻，密码输入框就是一个完美的例子。
即使是大屏手机用户，他们打字的体验度也不会比电脑用户更加舒适，因此打字输入的功能应该在许多方面尽可能减少。
改变输入的方法如滑动以及旋转界面元素
OAuth 登陆插件提供一个更佳的方式去验证身份
案例学习: Uber（打车手机软件）以一个非常 聪明的方式解决了定位的问题。Uber使用GPS定位系统去追踪用户所在的地址，Uber用自动锁定地址代替了输入地址，这使用户更快并且更简便的预定他们的旅途。

文本接口
软件的文本界面元素的使用应该减少，相对的去支持图标的使用。例如，你可以使用一个垃圾箱图片去代替一个“删除”的文本。
需要注意的是你需确定在这个软件里面，图标与所表达的意义是统一的。
案例学习: Kudos（IOS图片工具软件），图标和文本比例合适使用的例子。符号“删除”，“赞”以及“分享”有统一的用户界面体验并且他们的意义简洁明了，让首次使用者操作更加方便。
屏幕之间的切换
多屏之间的切换要求流畅便捷，基本上切换键需要放在屏幕一半的最低端。这是因为大拇指常用在屏幕上进行导航，而且大多数人的大拇指并不能轻易访问大屏幕的上方。
这帮助许多用户在应用上多个部分之间的切换更加迅速。
例如在IOS上的谷歌浏览器用手指“边缘滑动”（edge-swipe）会使用户返回到历史页面。
案例学习：Twitter上的切换键被放在屏幕的最低端。这帮助用户更加快速的触碰相关键如主页（Home）、通知（Notifications）、消息（Messages）、我（Me）以进入软件的各个部分。他们曾经将按键放在了最顶端，然而这增加了大屏用户使用难度。

移动：没有最好，只有更好
基本上设计中最重要的几个方面就是手机应用的用户界面设计以及用户体验（UI/UX），还有应该注意的是屏幕应该简洁而不混乱。太多的动画也不该应用在一个软件里。

如谷歌的Material Design的现代设计理念，强调设计的简洁。一个应用程序的登陆页面的第一印象是非常重要的，一个混乱的用户界面会让用户失去方向，也一定会使用户持续减少使用的兴趣。
案例学习：谷歌收件箱在完成Material Design框架，保持一个简洁直观、方便使用的用户界面方面做得非常好。譬如当你的收件箱是空的时候，界面也可以保持简洁，转换键保持流畅并且有一个令人满意的画面。即使用户界面很简洁，找到一些功能键也是非常方便。
总结(Wrapping up)
手机比以往任何时候都更便宜，更快，更强大，在未来的十年中，手机只会变得更加普遍。移动应用程序开发人员需要遵循这些简单的设计原则，使他们的应用程序更直观，整洁和易于使用。另外开发者应该确保阅读并遵循操作系统特定的风格指南，因为它们提供了在用户界面方面的属于是否工作的重要见解。

5. html网页设计：一个简单的登录界面代码！

<input
type='button'
text='登陆'
onclick='return
checknull()'>你说的要能识别是否输入了用户名和密码！需要用脚本来验证
<script>
function
checknull()
{
var
a=document.getElementById('用户名文本框ID').text;
var
b=document.getElementById('密码文本框ID').text;
if(a.length>0&&b.length)
return
true;
else
return
false;
}
<script>

6. 几个国外优秀手机登录和注册界面UI设计

你好：安卓系统的推荐摩托新三防ME525+,采用了全新的Android 2.3版系统，同时还拥有1GHz高速处理器，速度比上一代产品有了明显的提升，三防功能更加出众。HTC的推荐G11和G12两款，两个机器的运行速度非常不错，并且HTC的UI优化出色，在同档次安...

7. 手机界面设计的特征越详细越好

不是的，最好是整洁的，

8. html网页设计：一个简单的登录界面代码！

大致形式应该是这样的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3</title>
</head>
<body>
<div align="center">
<form action="" name="myform">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="user" /></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="text" id="password" /></td>
</tr>
<tr>
<td>验证码：</td>
<td align="left"><input type="text" size="5" id="code" /></td>
</tr>
</table>
</form>
<table>
<tr>
<td>
<input type="submit" value="提交" onclick=myfun_submit() />
</td>
<td>
<input type="submit" value="重置" onclick=myfun_reset() />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myfun_submit(){

var user_val = document.getElementById("user").value;
var password_val = document.getElementById("password").value;
if(user_val==""){

alert("用户名不能为空！！");

}else if(password_val==""){

alert("密码不能为空！！！");

}

}
function myfun_reset(){
document.getElementById("user").value = "";
document.getElementById("password").value = "";
document.getElementById("code").value = "";

}
</script>
</body>
</html>

9. 如何设计用户登录界面

最简单的,就只用换两张图片首先说明一下QQ界面图片的格式为bmp大图片的大小为324×167小图片的大小为324×47以下以修改QQ2005正式版为例:1.下载修改软件“eXeScope650汉化版”安装安装时按默认设置安装就可以了,软件是汉化破解版,是免费软件软件下载地址QQ登陆界面下载地址(的QQ登陆界面图片可以到我QQ空间的日志里下载)2.安装软件后右键点击QQ目录下的“LoginCtrl.dll”文件选择“用exeScope编辑资源“菜单(注意:如果你正在运行QQ的话先把QQ关闭或者复制QQ目录下的“LoginCtrl.dll“文件到其他目录单独修改)否则会提示“拒绝写入,以只读模式打开”选择后弹出“exeScope”界面,分别“资源”-“位图”分支,选中“963”分支(如下图)然后按键盘快捷键“F4”导入小图片(格式bmp大小324×47)(如下图)导入后按键盘快捷键“Ctrls”保存,(如下图)以上面的方法选中“16050“分支,导入大图片(如下图),然后保存保存后关闭“修改软件“,然后打开QQ看看,这样就成功修改了QQ登陆界面最后修改QQ界面按钮的位置,分别“资源”-“对话框”选取中“450”分支,改里面的坐标就可以了满意请采纳