400-030-9020

新闻咨询

新闻资讯

关注云端科技,互联网+,电子商务,O2O运营,智能云计算

视觉设计的思考:如何设计APP的登录页

一、APP的属性分类

我们先给App分个类,为什么需要登录注册?因为App需要你的个人信息啊。这样才是一个留存下来的用户,而不是来一下就走的过客。App按注册登录必要性分分如下三种:

第一种:无需登录

直接使用App的功能,主要是工具类的App,如日历、计算器,手电筒之类的App,不过现在这样纯粹的App几乎不存在,因为没有用户留存的App就没有价值啊。没有经济价值就活不下去啊。所以市场上没有这样的活雷锋了,都被系统应用取代了。而工具类的APP为了不被系统应用取代,就想办法提供一些个性功能吸引用户注册。

第二种:非强制登录

主要是一些资讯、生活类应用,如:网易新闻、网易云音乐等;第一次启动App的时候既可以选择立即注册,也可以选择不注册,直接进入App的主界面。用户无须登录可以使用部分功能,如果需要解锁某些功能,就必须登录啦。比如听音乐想根据你听歌习惯推荐歌曲这样的个性化功能。

第三种:强制登录

这类应用具有很强的个人隐私熟悉,比如支付宝,你的钱袋子不能让人知道你有多少钱吧,比如陌陌,你最近约了谁也不能让人知道。还有淘宝,最近买了一些不可描述的东西不能闲杂人看到。所以这些和钱和隐私有关的音乐都是强制登录。不登录你是不可以使用这个App的。

二、注册登录的四种方式

理清楚哪些App需要登录后,那么我们开看看注册有哪几种方式?

第一种:手机号登录注册

一个界面就完成了登录或者注册的过程。通过手机号验证码快速注册或登录,这应该是目前最高效的登录注册方式了。如果是新用户直接通过手机验证码注册,老用户也可以通过验证码登录。登录和注册一气呵成。用户甚至不需要记得密码,只要手机在手,就可以无忧登录。

第二种:用户名密码注册登录

注册和登录是分开的,简单的说就是登录和注册界面是两个界面。优点就是多平台登录的时候有用户名密码方便些。缺点就是注册流程繁琐啊。界面表现形式如图例B用户名/邮箱登录,如果需要注册点击跳转新页面。国外用户是挺喜欢用邮箱注册的,总觉得老外的用户习惯很多时候和国人差异挺大的。当然如果不想注册弹出新页面,那么选择图CD方式的标签切换也可以让界面很简洁。

第三种:用户名或者手机登录

这种界面表现形式如图EF,是一个标签栏切换登录方式。一个界面上可以切换手机号登录和账户登录两种方式。这种方式摆在台面上的说法是,为了方便用户,给你多种登录选择。实际上为了方便企业维护App账号体系的,因为可能有大量用户是从PC上转换过来的。他们之前并没有用手机注册。当然也就没有手机号登录了。例如美团大众点评这样的PC用户量的应用肯定会选择如EF这种形式。从用户体验的角度来说不是方便用户的,因为选择越多越难用啊。

第四种:第三方社交账号登录

一般会通过微信、微博、豆瓣等第三方常用社交账号登录,不仅仅能够快捷方便的登录体验产品,同时方便后续通过社交账号对APP进行分享宣传推广。一般小应用都会选择这种方式,因为登录门槛比较低。但一些用户隐私性比较高的应用还是会选择自建账号体系。比如支付理财类应用比较偏向自建用户体系,因为对于此类应用,用户账户数据是至关重要的信息。

前面说了这么多,就是让各位同学知道UI是需要基于产品设计,同时对于页面的交互逻辑也要理解。所以视觉设计师做页面需要去理清你界面上下游,或者界面中每个元素的逻辑,从哪里来到哪里去。

三、视觉设计的思考过程

下面我开始做视觉设计了。为了演示方便,我给自己出了一个题目,以绿色为虚拟的主题做设计登录页。

首先设计稿以iPhone7为基准设计,分辨率是1334×750,为什么选择这个分辨率,我的书说的很明白了。这里就不再赘述了。我们先做强制登录注册的。这里打开应用后,一般国外的应用挺喜欢出现选择登录注册界面。这里我给自己出一个题目,以绿色为主题进行设计。

不选择纯的颜色

1、填充品牌色

整个界面背景填充App的主色,因为是绿色主题,暂定主为绿色。色相选择不要选择过于纯的颜色,不要选择下面第一排的颜色比如翠绿。而倾向于选择第二排,例如墨绿,祖母绿这样颜色。就好像我们画画用的颜料如果直接使用颜料的颜色,会显得画面颜色生硬。而经过多色调节出来的颜色会显得层次丰富。如果主色饱和度较高,请调低主色的饱和度。因为过于鲜亮的颜色会降低应用的品质感。

多效果混合模式

2、加矢量纹理

纯色背景适合用反白的logo,那么,你需要设计一个有特点的线性或者剪影图标。很多时候APP并没有单独设计文字名称,这时候logo的标题字我一般选用非衬线粗体搭配。界面上的按钮只有两个,至于是突出注册还是突出登录。这个还是看产品人员的需求。因为不同应用对于登录注册的优先级理解不一样。如果你的BOSS觉得这种极简风格的背景太敷衍了。那么我们可以考虑加一些矢量的纹理。当然我们需要找绿叶元素的纹理。这样才贴合主题。为了让颜色更加贴合主色,我会把矢量的图片去色,图层模式并选用明度的模式。

CONTACT US

云时代,踏上云端,现在就联系我们吧!

Cloud era,set foot on the clouds.contact us now!
*名字:
*电话:
*内容:
  • 南昌(总部)
  • 赣州
  • 长沙
  • 南昌分部
地址:
江西省南昌市红谷滩新区丰和南大道2111号世茂APM3-5栋(C2)4楼
电话:
400-030-9020
邮箱:
lumaohua@gogotoo.net
在线咨询 联系我们
地址:
江西省赣州市红旗大道86号江西理工大学大学生创业园2楼
电话:
15083831105
邮箱:
lumaohua@gogotoo.net
在线咨询 联系我们
地址:
湖南省长沙市芙蓉区中天广场中融国际联合商厦8楼
电话:
15879196569
邮箱:
lumaohua@gogotoo.net
在线咨询 联系我们
地址:
江西省南昌市青山湖区北京东路458号东方银座5楼空中花园
电话:
0791-88197248
邮箱:
lumaohua@gogotoo.net
在线咨询 联系我们

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!