首页 > 建站资源 > 网站优化 > 网页设计:如何使登录页更完美与高效?

网页设计:如何使登录页更完美与高效?

时间:2017-10-15    来源:人人都是产品经理

美观的登录页面将带来很好转化率,那么如何是登录也面更加美观与高效呢?

译者:L_Lainey

对于设计师来说,工作中的挑战之一就是创建一个看起来不错,而且还能有很好转换率的登录页面。您可以理解为什么这是案例设计的目标和业务目标常常是不一致的。

当产品相关人员创建登陆页时,他们更专注于布局,基本原则和信息层次。然而,设计师最关心的是用户体验,颜色,排版和风格元素,有助于建立强大而有效化的准则。

转化最优设计本质上希望使这两个思想学派相一致。因此,不仅要专注于UX,还要强调劝导和转化,同时将它与将导致更好的网站的美学选择合并。

1.选择正确的布局

产品经理非常了解,页面上不同元素的布局会影响转化率。这就是为什么他们要求设计师将最重要的信息放在首要位置,并从检出页面中删除导航菜单,即使这个操作违反了UX设计的原则。

但是,您可以采用一些理论原则来创建转化优化的着陆页,而不会影响用户体验:

1)按照三分法规定设计

如果你曾经拍过摄影课,你可能听说过三分之一的规则。这个规则越少越好,这个规则说,任何形象在分为 9 个相等的部分时,会有更多的紧张和精力。

来自维基百科的这个GIF说明它完美:

维基百科 CC BY-SA 2.5

三分之一的规则是摄影师并不总是把他们的主题放在框架中的原因。世界上最着名的一些照片遵循这一规则。

这里有一个例子:

人物在九分之一的右上角

三分法则不仅适用于照片 – 它也适用于登录页。看看WebDAM的这个登陆页面:

或者来自Inbound Emotion的一个:

Inbound Emotion

根据设计理论和眼睛定视来看,3× 3 网格线的交点在任何页面上都得到最多的关注。因此,放置在这些网格线上的元素也会更受关注。

“使用三分法规则来设计的布局视觉看上去会更舒适。”

2按照菲茨法则的重要内容

训练人眼遵循层次结构。我们的眼睛自然地从大到大的元素发展。尼尔森进行的眼睛跟踪研究也显示:

在这里,用户比标题更多地集中在人物图像上,并且他们的眼睛比较小的段落文字更长的字体。

与此相似的另一个原理是菲茨定律。最初由心理学家保罗·菲茨(Paul Fitts)在 1954 年制定的描述人机交互的方法,该法规定用户移动到屏幕上对象的速度是对象的接近度(与用户)的比例及其大小的函数。

在数学上,这表示如下:

结论:目标越大,完成点击越快,时间越短。同样地,目标越近,指向越快,完成点击时间越短。也就是说,定位点击一个目标的时间,取决于目标与当前位置的距离,以及目标的大小。

相关推荐
真正的新用户引导应该这么设计
提高网页转化率的5个设计技巧分享
32条优秀UI设计建议 助你提升网页易用性及转化率(1)
32条优秀UI设计建议 助你提升网页易用性及转化率(2)
网站优化:“进度条”如何有效的帮助用户体验设计
在交互设计中,极简设计的四种策略
APP设计教程:特殊情况下如何处理加载页面?
交互设计入门:全面看懂尼尔森十大可用性原则!
交互设计优化:什么是界面设计?
iPhone X 官方人机交互指南中文版
有效提高网站销售转化率的16个UI设计秘诀
网页设计必读!125个小优化提升网页可用性(三)
国内人气最高的百度首页,原来背后的设计过程是这样的!
Axure实例:制作一个通用的移动端内容滚动区
以简书的网站改版为例,浅谈产品如何完成友好迭代
想要设计一个完美的搜索框 你需要注意这9个要素
制作完美搜索框的9个要素设计原则
探探和Linkedin都用的卡片设计 怎样才有好的体验?
2017版“我的淘宝”可能是迄今为止最懂你的设计
想让网页可读性更强?你得善用这个 F 式布局
iOS 11 设计中的几个 UI 设计细节
UI设计规范:单选按钮vs复选框要怎么用?
老年用户的体验思考:如何保证界面适合阅读
APP设计教程:UI界面中的版式设计理论
APP设计:移动端下拉表单的更好选择
UI界面设计:空心图标是否比实心图标难以识别?
怎么做才能防止用户对界面优化的不满?
干货:移动端响应式的7种UI布局解析
9个UI界面设计灵感来源的网站推荐
前端开发如何做好SEO优化的工作

精彩推荐

热门教程