`
wx1569225609
  • 浏览: 14287 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

网页与APP中那些优美的登陆表单

 
阅读更多

网站与APP中的登陆表单

Login Form 继承了iOS7的精髓,这件登陆界面作品将iOS7微妙的动画背景上升到一个新的层面。此处的背景完全是一张动画图片——甚至可能是GIF。尽管这背景事实上没有那么精致,但这一定是你平时不常见的设计。你几乎很难见到这样的APP,还有如此卖弄的首屏设计。 同样秉承着iOS7的精神,这个登陆界面和它的附属界面采用了彩色模糊背景,令一切都保持绝对简洁。我得说这两个界面都相当极简化,实际的输入框被细线所取代。不过美妙的多彩背景增添了个性化色彩,令作品亲切美观。 如果说有令人愉悦的设计,那这一件就是了。蓝色背景图与明快的白色LOGO、文字和输入框形成强烈对比。绿色按钮看起来像个真实的按钮——尽管界面的其余部分都是扁平的——色调也与蓝色搭配地非常好。 真是醒目的配色!当然,它是从另一个角度思考登录框的产物。这不是一个通常意义上的登录窗,因为它在易用性方面仍存在瑕疵。但是在设计方面,我们尽可以跳出条条框框来思考登陆界面。 与之前那些相比,这件相当平静和简洁。颜色选得非常棒。页面也很切中要害,它没有任何不必要(甚至扰乱注意力)的小把戏,任何一个登陆界面都不应该有。 这又是一款大胆的登陆界面设计。深色的登陆界面、深色模糊背景、明亮柔滑的纤细字体,营造出了神秘气息与魔力。有了迷人的登陆界面,就别无他求了。 现在呈现的是一款深色登陆界面,还有非比寻常的红色文字与按钮。我不确定这么多红色是否合适,不过我们暂且继续——这是非比寻常的大胆设计,值得喝彩。我觉得自己对于红色的忌惮是没道理的,因为决定用户反应的,是红色按钮所处的环境,而非红色本身。我可以肯定,没有人会在按下这个登陆按钮时感到崩溃。 这件作品绝对是本文中我的最爱之一,因为它够简洁,却不单调。它的配色相当惊艳,几种颜色完美结合。而且,它看上去真的很赞!确实是个打造简洁美观登录界面的好办法。 这是个稍微复杂些的登陆界面。像如今大部分平台一样,你可以已有账号来登陆,比如Google、Twitter或者Facebook,而不必在每个新网站上创建新的账号。不过如果你想的话,你也可以注册自己的账号。 这个界面很有创意——手写风格的注释与箭头,给界面增添了一些个性,配色也很棒,与常见的蓝色和银灰色有所区别。同时,不像时下大多数登陆页面,它的背景图并不是视觉焦点,它就是一个轻巧的登陆/注册页面。 我非常欣赏这件自由散漫的设计。没有分散注意力的导航,也没有烦人的其他内容。用户的操作与目标同样简单:选择Platform或Opentag,然后登陆。如果是首次打开,你可以试试底部的“注册账号”链接。我觉得这真是个组织良好且执行到位的登陆界面。 这也是我最爱之一,我着迷于它的扁平设计。它也没有多少分散注意力的东西,重点就是登陆。简明的logo效果非凡,如果你没有账号,也能在这注册一个。除此之外,所选的颜色也紧密结合,表现良好。 我非常喜欢这件设计,因为东西都足够大,登陆按钮很大,按钮上的文字很大,图标也很大。现在你应该有所体会了。另外,登陆按钮是明亮的橙红色,你不会忽略它。它不会与周遭环境混为一谈,所有需要强调的操作都该如此。 我不确定自己是否赞同输入框背景和文字的颜色,不过除此之外,这仍然是件优秀的单色表单设计。我喜欢这两个输入框彼此结合的方式,因为他们显然就是一体的。我也喜欢那个醒目的登陆按钮。 在你注销登陆前,网站会记住你是谁,这点太赞了。从外观来看,它想营造安全登录的感觉,事实也确实如此,这得益于下面的两个logo——McAfee和VeriSign。我还喜欢它滑稽的头像,使得整个界面体验如此愉悦,虽然它其实很严肃。 这是我第三喜爱的作品,因为它好玩的配色。是的,这是扁平设计。如此基本的样式,本应该很单调,它却没有。我发现精心挑选过颜色的扁平设计常常能成功,因为充满了亲切感和个人色彩,这件登陆界面就是如此!我很希望在自己经常使用的app和网站中见到更多这类设计。 啊,又是一个蓝色的界面!我对此处使用的绿色持怀疑态度,不过本作品中微妙变化的蓝色,与白色文字结合地很好——确实非常好。非正式的小写字体也给整个界面增添了几分个性。 我相当喜欢这个表单,因为它显然是页面的视觉中心,再没有其他东西分散我的注意力。当然,还有logo和邀请注册链接,不过它们在哪里都无法盖过巨大的登陆界面。与暗调处理的背景图相对比,明亮的输入框吸引力注意力,让你立马就去登陆。 这是一件拟物化与扁平结合的UI作品。你怎么想?我觉得它处理的非常好。不用嘲笑拟物元素的阴影效果,它们并没有影响整个设计,此处的设计相当聪明,节制地使用拟物化元素,字体的选择和色彩搭配铸就了这件作品。 又是一件迷人的登陆界面。它内容比本文中很多设计都更丰富,不过配色选得很好,让界面漂亮地结合成一个整体。

转载于:https://my.oschina.net/wangchenyu/blog/1530731

分享到:
评论

相关推荐

    vuejumeiapp聚集美丽成人之美

    【Vue2.0全家桶】 Vue2.0全家桶是指使用Vue2.0核心库与其他配套技术构建的完整前端开发环境。...以上是关于"vuejumeiapp聚集美丽成人之美"项目的相关知识点,涵盖了Vue2.0全家桶中的主要技术和它们的应用。

    html5做的爱情表白页面非常漂亮,表白绝佳选择

    此外,HTML5引入了离线存储机制(App Cache与Service Worker),使得表白页面即使在网络不稳定的情况下也能正常显示,确保爱意的传递不受任何干扰。同时,`<section>`、`<article>`、`<header>`、`<footer>`等语义化...

    数字艺术画廊-Web-APP:此项目是使用HTML,CSS,JDBC开发的。 在此项目中,用户可以查看和购买不同​​类别的艺术品

    在数字化时代,艺术与科技的结合日益紧密,数字艺术画廊Web-APP就是这样的一个创新实践。它利用先进的Web技术为用户提供了一个在线浏览和购买艺术品的平台,使得艺术欣赏和交易变得更加便捷。下面我们将详细探讨这个...

    Argon React Native app模板 .html素材下载

    【Argon React Native App模板】是一款专为移动应用开发者设计的高级前端模板,它结合了React Native框架的灵活性和Argon Design System的优美界面。React Native是Facebook开发的一个开源库,允许开发者使用...

    angularJs实现学生信息的增删改查以及翻页

    AngularJS是一款强大的前端开发框架,由Google维护,它允许开发者用声明式的方式来构建动态网页应用。 **一、AngularJS简介** AngularJS的核心特性是数据绑定和依赖注入,这使得开发人员可以专注于业务逻辑,而不是...

    react-基于reactjsreduxsaga和antd的购物网站单页应用

    7. **构建与部署**:项目可能使用Webpack或Create React App等工具进行打包优化,然后部署到服务器上供用户访问。 总结来说,"reactjs-redux-saga-antd"项目是一个使用前沿技术栈构建的单页购物网站,结合ReactJS的...

    世界著名旅游景点介绍网站模板

    【标题】"世界著名旅游景点介绍网站模板"指的是一个专门设计用于展示全球知名旅游景点信息的网页模板。这种模板通常采用HTML5技术构建,旨在提供一个吸引人的、用户友好的平台,让游客能够轻松地探索世界各地的美丽...

    Catalyst-Productivity-App:使用React和Airtable构建的精美而令人振奋的待办事项清单

    会根据一天中的不同时间(早上好,下午好,晚上好)向用户打招呼,并要求输入他们的姓名。时钟将以12小时显示显示当前时间。用户将能够添加要执行的任务,并在完成任务时将其选中。这是表单链接的线框,用户可以在...

    简洁可爱的旅游网站adobe_xd&psd登录界面ui素材.zip

    1. **视觉吸引力**:素材中可能包含吸引人的背景图片或视频,展示美丽的风景和目的地,以激发用户的旅行欲望。 2. **清晰的导航**:有效的导航菜单和CTA(Call-to-Action)按钮是必不可少的,帮助用户轻松浏览和了解...

    威罗纳

    由于标签中提到的是"HTML",我们可以推测这个项目与HTML(超文本标记语言)有密切关系,HTML是构建网页内容的基础语言。 在Web开发中,HTML用于定义页面的结构,比如标题、段落、图片、链接等元素。HTML5是目前广泛...

    react-elemental一个灵活的和漂亮的ReactjsUI框架

    React Elemental充分利用了React的组件化特性,提供了丰富的UI组件,如按钮、表单元素、布局容器等。这些组件可以像乐高积木一样拼接起来,构建出各种各样的界面布局。组件的可复用性提高了代码的可维护性和开发效率...

    CrudAngular9-Angular-Material-UI

    在本项目中,可能会有主模块(AppModule)和其他功能模块。 2. **Angular组件**:组件是Angular应用的基本构建块,它们负责渲染视图和处理用户交互。CRUD操作通常会涉及多个组件,如数据列表组件、详情展示组件、...

    Simple_Authentication:具有简单用户身份验证的Ruby on Rails应用

    Ruby on Rails(简称Rails)是一个基于Ruby语言的开源Web应用程序框架,它遵循MVC(模型-视图-控制器)架构模式,致力于实现“开发更快乐,代码更美丽”的理念。Rails强调DRY(Don't Repeat Yourself)原则,推崇...

    所有都在一起的AngularJS生成器MaterialDesignGulpuirouter

    这个工具结合了AngularJS的强大力量,Material Design的优美界面设计以及ui-router的高级路由管理,帮助开发者快速构建功能丰富的单页应用程序(SPA)。 AngularJS是Google推出的一个前端JavaScript框架,它极大地...

    SmartScheduler:Ruby on Rails 体育调度网站

    总之,"SmartScheduler"是一个结合了Ruby on Rails的强大功能和CSS的优美设计的体育调度应用,其源代码包含了大量的Web开发实践和技术细节,对学习和理解Web开发,尤其是Ruby on Rails框架,有着宝贵的参考价值。

    WedCamp

    在WedCamp中,JavaScript作为客户端脚本语言,负责处理用户与网页的交互。这包括页面动态更新、表单验证、数据提交等。JavaScript的灵活性和广泛支持使得开发者可以创建出响应迅速、交互丰富的用户体验。同时,由于...

    angular-components:一个漂亮的 Angular 组件库

    这个库包含了多种预先构建、样式优美、功能丰富的 UI 组件,可以方便地集成到你的 Angular 项目中,帮助快速构建用户界面。 组件库的核心优势在于它与 Angular 的设计理念高度契合,提供了对变更检测、服务注入和...

Global site tag (gtag.js) - Google Analytics