首页 web前端 html教程 关于登录页设计的实例教程

关于登录页设计的实例教程

Jul 18, 2017 pm 03:59 PM
设计

    无论网页或是移动APP的设计,很重要的一点是如何能在小而美和功能复杂性之间找到平衡点。 在执行设计的第一步,便是思考如何利用原型工具诸如MockplusAxure在初始阶段把握产品登陆页面设计的技巧。

一、 学会做减法

跳出登录界面设计中的条条框框,搭配简单的配色,醒目又大方。

 

二、 结合用户界面设计-页面背景

1. 模糊背景

模糊背景的运用不仅让整个网站显得更加人性化,并且在很大程度上烘托出网站所要表现的氛围。

2. 暗色背景

在暗色背景中,明亮的输入框便吸引了所有的注意力。

3.扁平化纯色背景

 

三、清晰的视觉纵线

人的视觉浏览一般呈“L”型视线,意指从上到下,从左至右,表单的视觉浏览顺序符合“L”型规律就基本符合用户的心理预期。

四.注重用户体验设计

登陆和注册表单的使用率非常高,一个表单的设计其实也不是简单的事情,用户体验是必须要考虑的事情。哪怕是一个注册表单,也值得再细心研究。如果不重视用户体验,就会致使网站流失大量用户。一切以最佳用户体验为出发。

 

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

2. 减少用户输入

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

3. 信息化注册提示

为终端用户提供有效的信息提示是用户体验设计中的最好方式,尤其是在用户注册填写信息具有多个输入域,而在需要填写的字段互相可能产生歧义的时候,这些消息提示可以减少用户的思考和猜测时间。

4. 错误密码输入记忆

当用户第一次输入一个错误的密码时,系统在判断错误后同时把用户输入的错误密码保存记忆,当用户再次输入这个错误密码时,系统会自动在客户端提示“密码错误”。

以上就是一些常见的网页或APP产品登陆页面设计的技巧。巧妙的设计是吸引用户的第一步,站在用户的角度,让更多的用户通过登陆注册这扇大门真正的走近和了解我们的产品。


以上是关于登录页设计的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

复古潮流!HMD与喜力联合推出翻盖手机:透明外壳设计 复古潮流!HMD与喜力联合推出翻盖手机:透明外壳设计 Apr 17, 2024 pm 06:50 PM

4月17日消息,HMD携手知名啤酒品牌喜力以及创意公司Bodega,联袂推出了一款别具一格的翻盖手机——无聊手机(TheBoringPhone)。这款手机不仅在设计上充满新意,更在功能上返璞归真,旨在引领人们回归真实的人际交往,享受与朋友畅饮的纯粹时光。无聊手机采用了独特的透明翻盖设计,展现出一种简约而不失优雅的美感。其内部配备了2.8英寸QVGA显示屏,外部则是一块1.77英寸的显示屏,为用户提供了基本的视觉交互体验。在摄影方面,虽然仅搭载了30万像素的摄像头,但足以应对日常的简

首发649元 酷比魔方小酷平板2 Lite来了:11寸护眼大屏+8000mAh大电量 首发649元 酷比魔方小酷平板2 Lite来了:11寸护眼大屏+8000mAh大电量 Mar 05, 2024 pm 05:34 PM

3月4日消息,酷比魔方将于3月5日推出“小酷平板2Lite”平板电脑,首发价649元。据悉,新款平板搭载紫光展锐T606处理器,采用12nm工艺,由两颗1.6GHz的ArmCortex-A75CPU和六颗ArmCortex-A55处理器组成。屏幕采用的是10.95英寸IPS护眼屏,分辨率为1280x800,亮度高至350尼特。影像方面,小酷平板2Lite后置1300万像素主摄,前置500万像素自拍镜头,另支持4G上网/通话、蓝牙5.0、Wi-Fi5。此外,官方宣称,这款平板电脑&l

首发899元 中兴5G随身Wi-Fi U50S开售:最高网速500Mbps 首发899元 中兴5G随身Wi-Fi U50S开售:最高网速500Mbps Apr 26, 2024 pm 03:46 PM

4月26日消息,中兴5G随身Wi-FiU50S目前已经正式开售,首发899元。外观设计上,中兴U50S随身Wi-Fi简约时尚,易于手持和包装。其尺寸为159/73/18mm,携带方便,让您随时随地畅享5G高速网络,实现畅行无阻的移动办公与娱乐体验。中兴5G随身Wi-FiU50S该设备支持先进的Wi-Fi6协议,峰值速率高达1800Mbps,依托骁龙X55高性能5G平台,为用户提供极速的网络体验。不仅支持5G双模SA+NSA网络环境和Sub-6GHz频段,实测网速更可达惊人的500Mbps,轻松满

台电M50 Mini小平板来了:8.7寸IPS屏、5000mAh电池 台电M50 Mini小平板来了:8.7寸IPS屏、5000mAh电池 Apr 04, 2024 am 08:31 AM

4月3日消息,台电即将推出的M50Mini平板电脑是一款功能丰富、性能强大的设备。这款8英寸小平板新品搭载了8.7英寸的IPS屏幕,为用户提供了出色的视觉体验。其金属机身设计不仅美观,还增强了设备的耐用性。在性能方面,M50Mini搭载了紫光展锐T606八核处理器,拥有两个A75核心和六个A55核心,确保了流畅且高效的运行体验。同时,该平板还配备了6GB+128GB的存储方案,并支持8GB内存扩展,满足了用户对于存储和多任务处理的需求。在续航上,M50Mini配备了5000mAh的电池,支持Ty

荣耀Magic V3首发AI离焦护眼技术:有效缓解近视发展 荣耀Magic V3首发AI离焦护眼技术:有效缓解近视发展 Jul 18, 2024 am 09:27 AM

7月12日消息,荣耀MagicV3系列今日正式发布,搭载全新荣耀视力舒缓绿洲护眼屏,在屏幕本身具备高规格和高素质的同时,还开创性的引入AI主动式护眼技术。据悉,传统的缓解近视的方式是“近视镜”,近视眼镜度数均匀分布,保证了视线中心区域成像在视网膜之上,但周边区域成像在视网膜后,视网膜感应到成像在后,促进眼轴向后生长,从而使度数加深。目前主要的缓解近视发展的方式之一是“离焦镜”,其中心区域度数正常,周边区域通过光学设计分区调整,从而使周边区域成像落在视网膜前,

ppt结束页如何设计才足够吸引人 ppt结束页如何设计才足够吸引人 Mar 20, 2024 pm 12:30 PM

在工作中,ppt是职场人士常常使用的办公软件。一个完整的ppt必须有一个好的结束页。不同的职业要求赋予不同的ppt制作特点。关于结束页的制作,如何才能设计的比较吸引人呢?下边我们一起看一看,如何设计ppt结束页吧!ppt结束页的设计可以在文字和动画方面进行一些调整,根据需要选择简洁或炫目的风格。接下来,我们将重点关注如何通过创新的表达方式来打造出符合要求的ppt结束页。那我们开始今天的教程吧。1、对于结束页的制作上,使用图片中的任何文字都可以,结束页重要的是表示我的演示结束了。2、除了这些文字,

华为Pocket 2首创超冷立体散热系统:整体导热面积提升80% 华为Pocket 2首创超冷立体散热系统:整体导热面积提升80% Feb 22, 2024 pm 08:04 PM

2月22日消息,华为Pocket2折叠旗舰今日正式登场,采用灵巧身型设计,推出大溪地灰、洛可可白、芋紫、雅黑四款配色。据介绍,华为Pocket2首创超冷立体散热系统,业界首创中框VC+立体散热结构,并且采用业界最高导热石墨烯材料,等效导热系数达1800W/m·K,整体导热面积提升80%。对于大家关心的折痕问题,华为Pocket2搭载业界首创玄武水滴铰链,屏幕长时间使用依然平整,双力臂杠杆齿轮,轻巧开合。通信方面,华为Pocket2支持超强灵犀通信,并且还是首款支持双向北斗卫星消息的小折叠。操

1399元起 荣耀X60i手机开售:视觉四等边OLED直屏 1399元起 荣耀X60i手机开售:视觉四等边OLED直屏 Jul 29, 2024 pm 08:25 PM

7月29日消息,荣耀X60i手机今日正式开售,首发1399元。设计上,荣耀X60i手机采用居中挖孔直屏设计,四边近乎无界的超窄边框,极大地拓宽了视野边界。荣耀X60i参数显示屏:6.7英寸高清显示屏电池:5000mAh大容量电池处理器:天玑6080处理器(台积电6nm,2x2.4G的A76+6×2G的A55)系统:MagicOS8.0系统其他功能:5G信号增强灵动胶囊屏下指纹双MIC降噪知识问答摄影能力:后置双摄系统:5000万像素主摄200万像素辅助镜头前置自拍镜头:800万像素价格:8GB

See all articles