IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

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

Catherine • 2017-05-08 14:47 • 交互设计

一个完整的App包含很多页面,设计一个App是一个很系统的工程。笔者会陆续撰写,带着大家完整的学习设计App的过程。我们先从登录页设计开始学习。做界面设计前,我们先来理解一下界面的逻辑。“ It seems that green leaves look more beautiful after the rain “(雨后的绿叶看起来更美了)

文章目录[隐藏]

  • 一、APP的属性分类
    • 第一种:无需登录
    • 第二种:非强制登录
    • 第三种:强制登录
  • 二、注册登录的四种方式
    • 第一种:手机号登录注册
    • 第二种:用户名密码注册登录
    • 第三种:用户名或者手机登录
    • 第四种:第三方社交账号登录
  • 三、视觉设计的思考过程
    • 不选择纯的颜色
    • 多效果混合模式
    • 选图的四种技巧
  • 四、设计案例演示
  • 五、登录界面设计总结

一个完整的App包含很多页面,设计一个App是一个很系统的工程。笔者会陆续撰写,带着大家完整的学习设计App的过程。我们先从登录页设计开始学习。做界面设计前,我们先来理解一下界面的逻辑。

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

一、APP的属性分类

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

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

第一种:无需登录

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

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

第二种:非强制登录

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

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

第三种:强制登录

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

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

二、注册登录的四种方式

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

第一种:手机号登录注册

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

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

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

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

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

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

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

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

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

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

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

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

三、视觉设计的思考过程

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

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

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

不选择纯的颜色

1、填充品牌色

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

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

多效果混合模式

2、加矢量纹理

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

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

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

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

3、加背景图

很多时候矢量纹理也许找不到合适的,或者厌倦了各种规则纹理,我们可以试着去寻找一些好看的图片做为背景。一般选择整体为暗调的图片,这样可以承托前景的按钮,logo等元素。对于需要强调的按钮可以用纯白做底,需要弱化的可以降低白色底的透明度。如果图片顶端颜色杂乱不利于线上电池栏,所以可以再加上一个绿色的半透明渐变。貌似按钮下感觉有点空,那么我们可以配上一段有诗意的语句:

“ It seems that green leaves look more beautiful after the rain “(雨后的绿叶看起来更美了)

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

选图的四种技巧

4、如何选图

通过前面几步发现选图也是一个非常有技术的活,图片好不好直接决定整体视觉格调高不高。那么如何选图了。因为使用VPN有时候太慢了。所以我经常在花瓣上搜图。花瓣上的图片已经很多了。很多国外站好看的图片其实已经被采过来了。搜绿色,植物,叶子等一切你可以想到的关键词。然后通过画板寻找。一些优质的画板已经整理好足够多的图片。那么剩下来就是挑选。

(1)局部特写图片

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

局部特写图片适合做背景图片,因为局部的图形不会显得琐碎,配合适当的叠色对于前景的文字,按钮视觉干扰非常少。

(2)矢量纹理图片

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

矢量纹理图片适合做背景图片,且一些元素可以供灵感参考,单独提取出来做为界面中的装饰元素。

(3)透明底的图片

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

透明底的图片节省了抠图的时间。一般界面是二维平面的,当画面中前景放置一些这种扣好的图片的时候,有效的破除了界面的规则感。让整个界面更加立体。

(4)有人的图片

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

有人的图片才有灵气,所以可以选择一些在自然环境中的人物,选择人物图片的要点就是感受整张图片传达给你的情绪。孤单的,安静的,又或者温暖的情绪。

四、设计案例演示

(1)登录注册分开的界面,切换时候上部背景图片要有区别,区别中又要统一,所以共同选择了纹理不一样的局部特写图片,图片绿色的颜色可能不一样,所以共同叠加了同一种绿色,降低了透明度。让界面图片更加统一。

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

(2)白色的文字,半透明的按钮显得画面非常有格调,所以图片要选择有明有暗的,这样的背景图,既不会太亮,前景无法清晰显示。也不会太暗,使这个画面气氛压抑。

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

(3)如果界面只是一张平面图,会显得很死板。这时候我们需要破除界面的边界。可以在界面设计中,选择透明底的图片,把界面中的树叶,花之类的元素,加上阴影。这样可以增加界面的立体效果。

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

(4)登录注册切换的界面可以选择一对近似又有不同的图片。这时候我选择两个在森林中有人物的图片做为背景。人在自然界很容易有产生神秘孤寂的情绪。所以配上两行诗意文字更好啦!当然文字不是乱写的,需要配合当前界面意境。

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

五、登录界面设计总结

视觉设计前先理清楚界面的逻辑,界面中每个元素的点击从哪里来到哪里去。App因为产品账号体系不同的,所以有各种登录注册方式。登录注册有四种方式。每种方式可以采用不同的形式的背景图设计。

找图片有意识的按不同类型分类去寻找图片。要善于运用一些透明底图片调节界面的维度。让界面细节设计更丰富。设计师也要学会运用文字的力量,点睛的文字可以让界面设计增加品质感。

 

作者:余振华(网名:风尾竹),UI设计师,站酷推荐设计师,微信公众号【 liaosheji2010】,欢迎交流

本文由 @余振华 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24405/

App登录页iPhonelogoPSUEDUIUI设计VR交互产品产品经理产品设计分享图标微信灵感用户用户体验界面设计界面逻辑登录页设计视觉视觉设计设计设计师设计案例转载
赞 (0)
CatherineCatherine
0
生成海报
QQ国际版视觉探索:准备了两套视觉设计方案
上一篇 2017-05-08 13:49
面对大项目,交互设计应该如何进行?
下一篇 2017-05-08 15:43

相关推荐

  • 微信热点

    UI设计师最该考虑微交互的设计

    前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

    2018-04-20
  • 微信热点

    2017用户体验行业调查报告

    更多精彩内容:IPO新机制 催生市场四大变化最全关于企业上市流程知识汇总!(强烈建议收藏)由IXDC主办的2017国际体验设计大会于2017年7月12-16日在国家会议中心举行,作为全球极具影响力的体验设计交流平台,吸引了3000多名从业者参加,大会通过主题演讲、工作坊等形式充分交流经验,共享体验设计盛宴。而作为一年一度的用户体验行业报告发布也是大会重要的组成部分,备受从业者们关注,报告每年通过全面详尽的调查分析,系统梳理整个行业脉络,...

    2018-02-14
  • 百度糯米店铺设计思考:以用户思维去创造设计需求 交互设计

    百度糯米店铺设计思考:以用户思维去创造设计需求

    设计应该是创造新事物新方向的引导者,不仅要主动的思考产品和业务需求,更要通过用户思维去创造设计需求,给产品和业务带来更大的影响,给用户创造更多的价值。『世界就是你所塑造的模样,成为变革者而非跟随者。—–Alex Osterwalder』

    2017-05-11
  • 互联网公司官方标志Logo的颜色选择依据 交互设计

    互联网公司官方标志Logo的颜色选择依据

    小编导读 : 颜色的作用,就是在图形都追求尽可能简约的时候,又可以保持企业标识的高度识别性。

    2014-12-28
  • IxD案例

    【交互设计】【装置艺术】传统昆曲与数字视觉的结合

    ▼数字与戏曲在数字时代大势所趋的背景下,传统戏曲也进行了一些试探性的尝试。交互性能和身临其境成为了戏曲的一种新的模式。演员通过光影达到像素化的效果,圆滑光影与演员的冲突,减少真实与虚拟的隔阂。打造沉浸式的戏曲艺术。▼沉浸与交互数字技术润滑了装置与观众的联系,发挥更大的互动作用。利用空间互动装置设计,以评估演出、空间和观众之间的联系,从而为观众提供一种身临其境的体验。▼古典与未来昆曲是一种东方古典戏剧艺术形式。数字技术的使用可以带来一种新...

    2018-04-17
  • 什么样的体验是好的用户体验? 交互设计

    什么样的体验是好的用户体验?

    互联网的时代,说是一个体验为王的时代,一点也不为过。在互联网时代,产品是否能够做成功,用户体验成为一个关键点,用户购买你的产品,并非是与你结束了交易,而是一个新的开始。当用户拿起你的产品,使用你的产品的时候,用户体验之旅才真正开始,而用户的体验之旅是否愉快,将直接影响到你的口碑,影响到你的销售。

    2017-05-23
  • 交互设计

    交互设计差异化:WebAPP和APP

    WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结。 从使用场景上,WAP用户面临比APP用户更严峻的问题: 1、页…

    2015-01-26
  • 微信热点

    Axure8.0展开收起

    设置菜单展开收起效果,且联动箭头朝上朝下动效。收起状态:箭头朝下,内容收起。展开状态:箭头朝上,内容展开。【步骤】1)设置展开内容与箭头为两个动态面板,命名2)点击事件设在点击菜单栏,同一个事件下控制两个面板状态。内容面板:箭头面板:设置旋转效果。点击菜单栏:点击运行即可。

    2018-03-15
  • 微信热点

    设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 标签栏设计的心理暗示:高亮与视觉纵深的心理模型 交互设计

    标签栏设计的心理暗示:高亮与视觉纵深的心理模型

    UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
    注:本文面向入门级设计师,大神请飘过~

    2017-05-18
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress