登入与注册的设计

This topic created in 4104 days ago, the information mentioned may be changed or developed.

首页只有一个按钮, 给「登入」使用. 「注册」该放在登入页面的什么位置呢?

我看了 Yahoo!, CNN, Facebook, 天涯四个网站.

1. Yahoo! (综合性网站)
登入框在页面右侧显示.
注册按钮以按钮方式在登入输入框下面显示.

2. CNN (新闻网站)
登入框在页面右侧显示.
注册按钮以文字方式在登入输入框上面显示.

3. Facebook (社交网站)
登入框在顶部导航栏显示.
注册框在页面右侧显示.
(社交特性要求强用户身份识别)

4. 天涯 (UGC 网站)
登入, 注册功能业内 lightbox 方式显示.
登入与注册按钮以 tab 标签显示.
(和我之前设想的一致, 只不过我将功能放在页面右侧, 而不是 lightbox)

我得到如下结论:
1. 功能要放在页面右侧.
2. 默认登入功能时, 注册的链接要明显.

不知道大家是怎么安排这一细节的?

右侧

页面

按钮

10 replies • 2015-03-02 01:58:01 +08:00

gauzeehom

Feb 28, 2015

我觉得yahoo的好，简单、明了
一眼就能看懂

66beta

Feb 28, 2015

我喜欢CNN的，看着清楚

Keinez

Feb 28, 2015

习惯扔登录下面。

但是脱离使用情景谈这个问题就是耍流氓。

1、这是个什么产品？
2、产品处在什么阶段？
3、产品的主要用户是什么？
4、为什么会只有一个按钮？什么情况下会只有一个按钮？

lyragosa

Feb 28, 2015

我是把登陆框放在屏幕正中间

注册按钮放到登陆框稍微下面一点（不会挡住和干扰登录）

唯一缺点是小屏幕用户可能第一屏看不到注册按钮。

raincious

Feb 28, 2015

@66beta :P

上图个人觉得CNN是最差的。因为阅读顺序是从左到右（标题大字体的重量你会看到Be a part ...而不是登陆框）。

页面的主要功能部分应该是第一个被看见的（设计常规），让用户减少识别时间。

Facebook其实也有这个问题，但是大多数登陆只会进行一次。而已经用过Facebook的人会记住那个位置。

Yahoo的登陆页面用白色底突出了登陆框，而介绍文字在外围的黑色框上。视觉层级还可以（就是用色和布局个人不喜欢）

最后，天涯的登陆不应该是这个么： http://www.tianya.cn/ （Modal那个只是登陆框吧？），另外设计我就不说了，乡土气息太酸爽了。

但如果首页只能给一个按钮，那么可以参考MyCNN右边的部分（而且“Don't have an account? Create one now.”已经是现成的例子），想办法将它放在稍微突出的位置上。

iugo

Feb 28, 2015

@Keinez
1. 想宽泛地思考这个问题, 所以列举了几种不同类型的网站. 有些是强身份识别如社交, 有些则较弱如新闻.
2. 阶段, 如果指的是用户群的规模, 那我觉得无论是大是小不那么重要.
3. 我觉得这点挺重要, 甚至可以单独拿出来讨论. 从大方向说, 面向的用户是企业内部还是任意访客, 从细节说, 面向用户的年龄也决定了什么样怎样的流程适合他们. 但无论如何, 应该有个参考原则. 我们可以依此分类讨论.
4. 我描述不够清楚. 是首页只留给登入和注册一个链接的位置. 比如有些网站在导航栏内既有登入链接也有注册链接, 而有些网站则只有一个登入(现在的 Yahoo! 首页左侧导航栏只有 Sign in). 一般像 Yahoo! 那个体量的网站才会弱化注册. 抛开这点, 无论首页有什么按钮, 在登入页也是应该在什么显示注册的.

otakustay

Feb 28, 2015

直接给个用户名+密码的框，提示是登录注册一体，填了不存在的用户名则提示可以改为注册，随后扩展出需要注册填写的字段，完成后自动登录

chairuosen

Feb 28, 2015

喜欢雅虎那种

momo5269

Mar 1, 2015

雅虎的去掉登陆你的帐号框框颜色再深点（但总体还是浅色）下面按钮再短一点就好了
相比还是喜欢雅虎。
国内论坛弹出的那种也还算不错。

ethans2008

Mar 2, 2015 via iPhone

为什么不喜欢Google account首页呢？