恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
产品设计中容易忽视的UI界面
0.0°
2017-10-25 原创文章 经验/观点 举报 4192 26 46 0

这也许是大厂的敲门砖!

这是一篇能让你升职加薪的文章,在开始叙(吹)述(牛)之前,请大家思考一个问题 :平时工作遇到以下界面时,你们会如何处理,例如,注册登录,完善信息,充值页面,支付页面,等一些比较容易被设计师忽视的界面。带着这些疑问接下来我们就来着重探讨一下,作为一名具有产品思维的设计师,应该怎样完善这些平时看起来不重要但是又不能缺少的界面呢?


按照产品设计的顺序,我们以注册登录为开头,新手帮助为结尾,来和大家慢慢探讨那些产品设计中容易忽视的UI界面。


登录注册页面

首先让我们从登录注册页面说起,登录注册作为一个产品的门面可以说是重中之重,可能大多数设计师认为登录注册页面并没有其他页面那么多的功能点,所以设计起来相对简单,但就是因为简单所以这才是难点所在,下面我们就来简单的梳理下设计登录注册页面时需要注意哪些地方。


登录注册分为两种形式,一种是游客模式登录,另一种是强制登录,游客模式主要针对一些O2O,S2C服务类的产品,而强制模式主要针对一些IM社交产品。(如下图)

Image title

简单分析后,接下来我们要分别设计这两种模式下的登录注册页面。首先我们来看一下游客模式(如下图),以京东为例,点击京东【我的】一级页面,进入个人中心页面,点击登录/注册按钮,这时候界面就跳转到京东的登录注册页面,我们看到此登录页面分为两大块,上部分为账号和密码登录,以及手机快速注册和找回密码。下半部分则是第三方登录的选择,虽然这样的设计方式也许你会觉得过于陈旧,但这依然是至今为止产品使用率很高的设计样式,如果你们公司的产品需要涉及到游客模式登录的,可以把京东APP的登录注册作为参考的对象。


Image title



接下来我们来看一下强制登录模式,所谓强制登录模式,就是用户使用该产品的时候必须填写账号(手机号/邮箱/用户名)和密码,否则将无法看到首页的信息。我们以Faceu为例,当用户第一次进入Faceu时,只能来到登录页面,这时候用户可以选择注册新的账号,也可以选择使用第三方账号登录。在强制模式登录的产品里,Faceu的设计可以说是最为典型的例子,一张大插画铺满整个屏幕,突出了该产品的核心,slogan也放在了十分显著的位置。当用户点击【手机注册】按钮后,从上往下会出现一个弹层动效,让用户开始填写相关的注册信息。Faceu这样的设计思路可以说是极大的提升了用户体验,让用户无须打开新的页面即可完成注册流程。


Image title


完善信息页面

现在有些产品希望能在用户注册前期获取到用户的一些基本数据,所以这时候就需要完善信息页面了,此页面也让许多设计师头疼的一个页面,接下来我们就来看看,类似于这样的页面应该怎样设计。


我们看到(如下图)这是一款有关综艺资讯APP的完善信息页面,当用户看到这个页面的时候,就非常清楚地知道自己要在这个界面里做哪些操作,通过模块化设计,能很好的传达给用户平台想要获取用户的哪些数据,让人一目了然。在这个页面里,平台只需要获取用户的3个数据,分别是性别,出生年代以及喜欢的资讯内容,当然如果你没时间填写这些资料,也可以点击右上角的关闭按钮,就可以跳过此页面。


Image title


会员充值页面

接下来我们来看看会员充值页面,例如现在一些直播APP都会涉及到会员充值的页面, 用户进入到充值页面时,如何快速的在第一时间进行充值,这是设计师要解决的首要问题。


我们看到下面这个会员充值页面,三个模块化设计,让用户在第一时间能选择自己需要充值的金额和支付的方式,所以这个设计也是当下很多设计师的参考对象之一。


Image title


新手帮助页面

最后我们来看一下新手帮助页面,在众多产品里,探探是为数不多新手帮助页面做得比较有情怀的,个人觉得只有把新手帮助做成这样才能真正的解决用户的难点。


如下图,左边是新手帮助的问题列表,每一个Q&A都能通过很好的排版设计来解决用户的疑问。右边则是问题的详情页面,我们看到这个页面,标题被放得很大,让用户第一眼就明白,该Q&A能解决那些问题。


Image title


以上就是我们平时在做产品时一些比较容易忽视的UI界面,当然类似这样的界面还有很多,希望大家能在平时的工作中慢慢总结。


微信公众号:UIHome

更新:2017-10-25

收藏

26人已收藏

Shijingkun石璟琨

微信公众号:UIHome

  • 38

    作品

  • 2758

    粉丝

  • 243

    关注

  • 做自媒体的第五年,我想跟设计师聊点干货
  • 社交中的上瘾模型
  • Eagle使用教程
  • 我眼中的社交野史
相关标签
设计经验

    猜你喜欢

      2017-10-25 原创文章 经验/观点 举报 4192 26 46 0

      产品设计中容易忽视的UI界面

      0.0°

      你确定要举报产品设计中容易忽视的UI界面

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年10月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      46
      26
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录