[UI/UX]想要设计出好的登录页,你需要注意这几点

用户进入登录页面时,离开页面之前能引起他们的注意变得比以前更加重要了。值得庆幸的是,一个优秀的登录页面的设计过程比以往更加信息化和数据化,诀窍在于弄清楚其实现过程中的重要切入点所需的核心元素。 

没有人喜欢浪费时间。如果你无法让访客在短时间内浏览到他们想要或者是你认为他们想要获取的信息,他们就会离开你的站点去寻找一个更好的:意思就是说你失去了售卖的机会。

如果你认为用户比起跳转更多的是上下滚动,这是一个非常熟悉的痛点的话,下文将会阐述哪些地方会使你失去访客,当然,以及如何正确设计。



无论是大胆的B2C初创公司新发布还是成立已久的B2B巨头公司进行改版,以下均可作为登录页面的核心准则:

1.言简意赅的价值定位

如果你让用户费劲儿地去理解你所提供的东西,他们便将吝啬他们的时间与金钱。产品或网站的优势特征必须明确体现,出彩的设计可以与其相辅相成。

以“Headspace”网站为例(图1),受欢迎的app登录页面不仅视觉上引人注目,内容也得到了清楚地表达。用两句仅仅20个左右单词的口号作为主标题与副标题,不仅减缓了视觉冲击,还清楚地表达了网站的价值定位,传达出平静与高效的印象——成为下载量超过一百万次的原因之一。


(图1 Headspace app登录页面)


2.简洁的界面

大多数的设计服务都叫嚣着界面的重要性,但并不是很多人都能在各个层面做好这一点。如果你正在售卖的是一个APP或软件,产品本身可能界面做得超乎用户的期望;但如果引导页——“商店的窗户”,由于其拙劣的界面设计成为用户和产品的阻碍,那用户将会离开这样便失去了业务机会。

“Duolingo”(图2)的登录页面就正确地认识到人们更愿意通过易于浏览与理解的方式去学习一门新语言。其页面可以“零干扰”地直接访问产品,网站可提供的各种语言与可链接的各种设备与平台都一目了然地呈现在登录页面上,因此它不需要设置站点去寻找你想要的内容;用户体验将会变得愉悦并且有所收获,并且相同的观点也可应用于APP游戏化。


(图2 Duolingo——简洁的登录页面设计)


3.和市场行为一致的用户体验设计

一致性是关键——这句话或许你已经听了一百万次,但在数字世界的各行各业中确实如此。用户们不仅期望和程序或网站的一致性体验,还需要与邮件、社会媒体或是商店里的各个接触点做到一致。

网页的站点名称应具有无缝衔接的特征,“IFTTF”(图3)提供了一个很好的案例,其登录页将全方位的用户体验结合在一起。其登录页面上体现让生活更智能的核心设计便是显而易见的电子邮件营销。 

(图3 IFTTT——一致的设计表达了软件的本质)


4.具有“Killer Copy”的逻辑结构

(Killer Copy即理性说服、让人理解并无法拒绝来促使人的行为)

当设计一个趋近完美的登录页面时,就需要协同工作了;这意味着除了设计、文案、很好的报价还有很多因素需要考虑。我们需要将所有节点串联起来协调出一个结构化、能给用户展示全貌的页面。

苹果(图4)利用“Killer Copy”这种思路将用户放在首位已经做得非常好了,文案全是关于“你”以及“你的”并且他们认为定位产品运用这些字眼是具有绝对必要性的。 


(图4 Apple——为以用户为中心的产品设计以用户为中心的设计)


5.直切重点的CTA

如果用户注意力集中于产品劣势,想要激励他们付诸行动可能就变得不那么重要了。在这样一个竞争激烈的数字世界中,这是一个很好的平衡,但在涉及设计,定价结构和客户服务等方面时,竞争对手不断纠结于胜人一筹的游戏中则不然了。

在音乐流媒体行业中就看到了“Spotify”(图5)和“Deezer”(图6)之前的战争。“Spotify”也许比“Deezer”成立稍早一些,但是他们发现他们其实身处同一个点播娱乐的时代并具有最低定价、最好用户体验且相似的产品。因此,两个网站登录页面上的口号都是出于经济动机,以便正确应对大多数人对音乐流媒体的一个主要抱怨:价格。 


(图5 Spotify——运用了突出的设计让用户关注于价格上)
(图6 Deezer——简单的CTA就将品质与价格联系起来)

如图所示以及在许多注册与登录的按钮都可以看到,祈使语气的动词能在CTAs上给人一种紧迫感如“Get Spotify Free”和“Try Deezer Premium”,后者所提到的价格激起了“需要”而非“想要”的感觉。


6.相当数量的社会样本

无论我们自己是否喜欢,很多时候我们都是基于别人的决定而做决定。想一想现在反馈对于购买周期有多重要,难怪像“Trustpilot”和“Yelp”火得如日中天。一篇Mintel的报道显示80%的美国顾客在进行购物前都会去浏览反馈——那是在2015年。来自于其他的社会样本事实上有时也值得你花时间和金钱,不单单是推荐和评论,用户数和销售数据通常也有窍门

“Shopify”(图7)在他们的网站登录页面便利用了令人印象深刻的数字以及鲜艳明确的推荐卡片这类社会样本。它们也许是首屏展示但是由于战略位置足够低,可以进一步鼓励用户进行滚动,用户可能对公司提交仍然有些许小疑惑。

这已经成了现代比较古老但是又一次又一次起作用的技巧了,因此是任何一个登录页面都值得锦上添花的重要部分

(图7 Shopify——用设计激励人们)


7.不同的读者,不同的登录页面

正如上述所见,这些优秀的登录页面也许存在很多相似点,但事实却是理想的登录页面设计并没有一个固定的结构。所有的这些案例都依赖于独特的搜索行为、购买周期以及设备使用等,但核心准则应该是对你的用户需求建立直接的反馈为基础。做正确的事,你的登录页也将是正确的。

你正在设计一个新的登录页面吗?今天我们来讨论一下如何通过所需的UI/UX设计元素做一个成功的案例。

原文作者:Simon McCade

来源www.simonmccade.com

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容