浅析网站 APP 登录界面设计

2023-05-16

无论网页或是移动APP的设计,很重要的一点是如何能在小而美和功能复杂性之间找到平衡点。本文就移动APP表单设计进行浅析,看设计师是如何在设计与交互体验之间做到小而美的平衡。

一.极致的减法

这是一个异于常规设计思路而得的登录框产物,这不是通常意义上的登录窗。它仅仅保留了用户名的输入,只需按回车便可确定,跳出了登录界面设计中的条条框框,配色方面也足够醒目与简单。m_46dc53a0f594000001d239c16d16

二.引人注目的用户界面

1.模糊背景

最近,模糊背景的运用如雨后春笋般冒了出来,因为模糊背景的运用不仅让整个网站显得更加人性化,并且在很大程度上烘托出网站所要表现的氛围。以下介绍的案例是个迷人的登陆界面,在模糊的背景上面用极简的图标与细线来设计,背景图的色调与按钮的颜色很有心的挑选了同一色系,让界面融洽地结合成一个整体。

m_ef0953a0f5aa000001d239e5cdb2

2.暗色调背景

当我们一眼看到下面的案例时,明亮的输入框吸引了所有的注意力。暗调处理过的背景图使登录的表单成了页面的视觉中心,没有任何东西可以分散用户的注意力。这不仅是优质的感官体验,更是舒适的用户体验。

m_50c653a0f5fb000001d239d70382

3.扁平化的纯色背景

我着迷于以下案例中的扁平化设计。基本的样式本该显得单调无聊,但是如果在色彩上精心搭配,扁平化的登录界面将变得活泼俏皮起来。

m_876253a0f611000001d239c92726

三.清晰的视觉纵线

人的视觉浏览一般呈“L”型视线,意指从上到下,从左至右。而设计表单界面很注重对用户的引导作用,当一个界面没有过多的强调元素,那么表单的视觉浏览顺序符合“L”型规律就基本符合用户的心理预期。那么,用户就不用过多思考和寻找,能简单高效的执行完表单项的填写和提交。

m_a69753a0f629000001d239a62fd7

四.注重用户体验设计

登陆和注册表单的使用率非常高,一个表单的设计其实也不是简单的事情,用户体验是必须要考虑的事情。有的喜欢把注册和登陆都放在一个页面,有的喜欢用AJAX无刷新效果来展示,反正很多花样了,总之,一切以最佳用户体验为出发。设计永无止境!哪怕是一个注册表单,也值得再细心研究。如果不重视用户体验,就会致使网站流失大量用户。

1.减少用户输入

一般说来,注册表中每增加一个字段,注册率就会相应的下降。

用户在注册时被要求填写邮箱地址两次或重复输入密码是非常麻烦的,特别是在手机上。其实用户一般都会使用自己的常用邮箱和密码注册,所以不那么容易忘记。采用输入一次密码完成注册更符合人们的期望,但是为了防止密码输入和用户的预期密码不同,可以采用允许用户查看明文密码的方式。假设哪天用户忘记密码了可以通过邮箱找回,再多此一举填写两次反而更加容易导致用户流失。

m_357653a0f63f000001d239776a2e

2.信息化注册提示

为终端用户提供有效的信息提示是用户体验设计中的最好方式,尤其是在用户注册填写信息具有多个输入域,而在需要填写的字段互相可能产生歧义的时候,这些消息提示可以减少用户的思考和猜测时间。提示信息的展现形式有多种,可以在页面的顶部闪烁小便签,或是让隐藏起来的消息跳出气泡框。

设计表现赋予注册表单以特质,而界面设计正是用户所感受到的体验。更多的提示可以防止用户因为输入错误而需要进行再次输入。

m_2f3a53a0f697000001d23995116a

3.减少用户的强制性操作

用户在登录或注册时是否验证?我觉得如果安全性没有大问题的话尽量不采取。可以在用户输入错误一定次数时才会出现验证码。 (不是一开始就有验证码,也不是用户输入错误多了就禁止登录)。但好像你的技术搭档绝大部分时候都会告诉你“安全性”有大问题,所以很多时候我们不能“为了细节的良好体验而纵容了系统的安全受挫”…

m_752d53a0f664000001d239eca372

4.错误密码输入记忆

当用户第一次输入一个错误的密码时,系统在判断错误后同时把用户输入的错误密码保存记忆,当用户再次输入这个错误密码时,系统会自动在客户端提示“密码错误”。这样做减少了用户的一次误操作同时也减少了一次提交给服务器端的任务。因为:密码的输入显示是*并非能直接看到你确切的输入结果,有很多时候的确是用户记错或输错了。

m_a36753a0f684000001d2396897bc

AnyForWeb在为客户建立更具吸引力的Web表单时,我们总是在不断的问自己:我有填写表单的耐心吗?有什么可以让表单对用户来说更轻松呢?这些问题并不会总能找到完美的答案,但如果不断的思考这些问题,站在用户的角度上体验我们的设计,那么我们相信至少方向是对的。总之,登录注册就是“一扇门”,一扇让产品和用户真正互通的门,让产品可以给用户体现出更多价值的门。
所以这个门一定要: 够宽、门槛够低、一直开着、记忆每次进出…

原文地址:http://www.zcool.com.cn/article/ZODUzOTI=.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

浅析网站 APP 登录界面设计 的相关文章

  • 卡片游戏(Throwing cards away I)

    Problem B Throwing cards away I Given is an ordered deck of n cards numbered 1 to n with card 1 at the top and card n at
  • 交换学生(Foreign Exchange)

    Problem E Foreign Exchange Input standard input Output standard output Time Limit 1 second Your non profit organization
  • CAN通信物理容错测试checklist

    CAN通信物理容错测试checklist 工作项目中 xff0c 我们有时有些产品CAN总线功能 xff0c 一般情况下我们必须要满足以下几种状况的测试项才算符合要求 一 CAN H与CAN L短路 判定标准 xff1a 短接故障发生后 x
  • 对称轴(Symmetry)

    Symmetry Time limit 3 000 seconds The figure shown on the left is left right symmetric as it is possible to fold the she
  • 打印队列(Printer Queue)

    Printer Queue Time limit 3 000 seconds 分析 首先记录所求时间它在队列中的位置 xff0c 用一个队列存储这些任务的优先级 xff0c 同时也创建一个队列存储对应任务一开始的位置 xff0c 那么当我们
  • 更新字典(Updating a Dictionary)

    Updating a Dictionary Time Limit 1000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description In th
  • 铁轨(Rails)

    Rails Time limit 3 000 seconds Rails There is a famous railway station in PopPush City Country there is incredibly hilly
  • 矩阵链乘(Matrix Chain Multiplication)

    Matrix Chain Multiplication Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description
  • 天平(Not so Mobile)

    Not so Mobile Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description Before being
  • 下落的树叶(The Falling Leaves)

    The Falling Leaves Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description Each yea
  • 四分树(Quadtrees)

    Quadtrees Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description A quadtree is a r
  • 油田(Oil Deposits)

    Oil Deposits Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description The GeoSurvCom
  • Abbott的复仇(Abbott's Revenge)

    Abbott 39 s Revenge Time limit 3 000 seconds Abbott s Revenge Abbott s Revenge The 1999 World FinalsContest included a p
  • rockchip rk3568 openwrt修改根文件系统分区

    rk3568的openwrt根文件系统分区大小如何修改 xff1f 1 rootfs大小取决于rk356x config的配置 xff0c 默认CONFIG TARGET ROOTFS PARTSIZE 61 512 xff0c 如果需要修
  • 除法(Division)

    Division Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description Write a program th
  • 最大乘积(Maximum Product)

    Maximum Product Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description Problem D M
  • 分数拆分(Fractions Again?!)

    Fractions Again Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description Problem A F
  • 二叉树(Tree Recovery)

    Tree Recovery Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description Little Valent
  • 骑士的移动(Knight Moves)

    Knight Moves Time Limit 3000MS Memory Limit Unknown 64bit IO Format lld amp llu Submit Status Description A friend of yo
  • 单词(Play On Words)

    分析 首先需对欧拉道路有所了解 存在欧拉道路的充分条件 xff1a 对于无向图而言 xff0c 如果一个无向图是连通的 xff0c 且最多只有两个奇点 xff08 顶点的度数为奇数 xff09 xff0c 则一定存在欧拉道路 如果有两个奇点

随机推荐

  • 成语接龙(Idiomatic Phrases Game)

    Idiomatic Phrases Game Problem Description Tom is playing a game called Idiomatic Phrases Game An idiom consists of seve
  • DijKstra算法(单源最短路径)

    原文转载自 xff1a 梦醒潇湘love 转载原文是为了方便自己学习 xff0c 也希望能让更多读者在需要的情况下学到更多的知识 Dijkstra xff08 迪杰斯特拉 xff09 算法是典型的最短路径路由算法 xff0c 用于计算一个节
  • Floyd算法(最短路径)

    Floyd 算法允许图中有带负权值的边 xff0c 但不许有包含带负权值的边组成的回路 原文转载自 xff1a 梦醒潇湘love 上一篇文章我们通过迪杰斯特拉算法解决了从某个源点到其余各顶点的最短路径问题 从循环嵌套很容易得到此算法的时间复
  • 最爱的城市

    最爱的城市 时间限制 xff1a 1 秒 内存限制 xff1a 32 兆 特殊判题 xff1a 否 标签 Floyd最短路径 题目描述 一天小明捧着一本世界地图在看 xff0c 突然小明拿起笔 xff0c 将他最爱的那些城市标记出来 xff
  • Docker中配置Nginx多域名配置多个应用

    注意容器中是一个被隔离的空间 xff0c 可以理解为一个独立的服务器 xff0c 所以在做反向代理的时候 xff0c nginx配置不能使用localhost xff0c 可以使用link方式去访问其他容器 nginxa container
  • 八皇后问题(回溯法)

    八皇后问题 xff08 源于 刘汝佳的 算法竞赛入门经典 xff08 第2版 xff09 xff09 在棋盘上放置8个皇后 xff0c 使得它们互不攻击 xff0c 此时每个皇后的攻击范围为同行同列和同对角线 xff0c 要求找出所有解 x
  • 大整数的乘法

    大整数的乘法 xff08 这里主要讨论的是两个较大的数相乘的效率问题 xff0c 实际上并不是真正意义上的大数相乘 在java中有个BigInteger类已经可以储存大数 xff0c 并提供了大数相乘的方法了 xff09 分析 首先 xff
  • 2的次幂表示

    2的次幂表示 时间限制 xff1a 1 0s 内存限制 xff1a 512 0MB 问题描述 任何一个正整数都可以用2进制表示 xff0c 例如 xff1a 137的2进制表示为10001001 将这种2进制表示写成2的次幂的和的形式 xf
  • 扑克序列

    扑克序列 题目描述 标题 xff1a 扑克序列 A A 2 2 3 3 4 4 xff0c 一共4对扑克牌 请你把它们排成一行 要求 xff1a 两个A中间有1张牌 xff0c 两个2之间有2张牌 xff0c 两个3之间有3张牌 xff0c
  • 分糖果

    分糖果 时间限制 xff1a 1 0s 内存限制 xff1a 256 0MB 问题描述 有n个小朋友围坐成一圈 老师给每个小朋友随机发偶数个糖果 xff0c 然后进行下面的游戏 xff1a 每个小朋友都把自己的糖果分一半给左手边的孩子 一轮
  • 最长公共子序列(LCS)

    最长公共子序列LCS问题 给定2个序列X和Y xff0c 当另一序列Z既是X的子序列又是Y的子序列时 xff0c 称Z是序列X和Y的公共子序列 给定X 61 x1 x2 xm 和Y 61 y1 y2 yn xff0c 请找出X和Y的最长公共
  • 0-1背包问题

    0 1背包问题 甲欲出去旅游 xff0c 可携带20 公斤的行李 xff0c 已知甲想带的 5 件行李的重量及其在旅行中产生的效益如下表所示 xff1a 行李编号 I II III IV V 重量 千克 6 4 8 8 4 行李效益 8 4
  • 旅行售货员问题

    旅行售货员问题 题目 某售货员要到4 个城市去推销商品 xff0c 已知各城市之间的路程 xff0c 如右图所示 请问他应该如何选定一条从城市 1 出发 xff0c 经过每个城市一遍 xff0c 最后回到城市 1 的路线 xff0c 使得总
  • https网页加载http资源时不显示图片,报错解决方案

    https网页加载http资源时不显示图片 xff0c 报错解决方案 自动将http的不安全请求升级为https静态文件放置本地反向代理请求http资源 加载http资源时会报错 xff1a 自动将http的不安全请求升级为https 页面
  • 数独游戏

    数独游戏 题目 九宫格是在81个格子 9 9 中 xff0c 要满足以下条件 xff1a xff08 1 xff09 每个横行和竖列中的9个格子都包含数字1 xff5e 9 xff0c 且不重复 xff1b xff08 2 xff09 每个
  • 静态内部类和普通内部类

    两种内部类 Java的内部类有两种 xff0c 一种是静态内部类 xff0c 另一种是普通内部类 xff0c 普通内部类可以获得外部对象的引用 xff0c 所以在普通内部类能够访问外部对象的成员变量 xff0c 也就能够使用外部类的资源 x
  • 迷宫老鼠游戏

    迷宫老鼠游戏 题目 以一个m n的长方阵表示迷宫 xff0c 0 和 1 分别表示迷宫中的通路和障碍 请设计一个算法 xff0c 对任意设定的迷宫 xff0c 求出一条从入口到出口的通路 xff0c 或得出没有通路的结论 xff1b 如果有
  • java通过JDBC链接SQLServer2012

    下面请一字一句地看 xff0c 一遍就设置成功 xff0c 比你设置几十遍失败 xff0c 费时会少得多 首先 xff0c 在连接数据库之前必须保证SQL Server 2012是采用SQL Server身份验证方式而不是windows身份
  • 完整java开发中JDBC连接数据库代码和步骤

    转载自 xff1a Hongten JDBC连接数据库 创建一个以JDBC连接数据库的程序 xff0c 包含7 个步骤 xff1a 1 加载JDBC驱动程序 xff1a 在连接数据库之前 xff0c 首先要加载想要连接的数据库的驱动到JVM
  • 浅析网站 APP 登录界面设计

    无论网页或是移动APP的设计 xff0c 很重要的一点是如何能在小而美和功能复杂性之间找到平衡点 本文就移动APP表单设计进行浅析 xff0c 看设计师是如何在设计与交互体验之间做到小而美的平衡 一 极致的减法 这是一个异于常规设计思路而得