首页 > 交互 > 关键词  > 产品设计最新资讯  > 正文

从手机产品登录页面设计想到的

2011-08-03 10:45 · 稿源:elya妞

一、架构设计和流程设计

我一直追求简单而高效的设计,尤其欣赏臭鱼这一篇文章《为产品结构的设计,为用户任务的设计》。他用图1很好的诠释了这个观点:首先要保证产品逻辑结果清晰、准确,其次要为用户任务架起一些快捷操作的桥梁。

图1 “产品结构设计”和“为用户任务设计”的关系

好的流程设计能使产品具有更清晰的架构,更良好的体验。我的老大曾经举过一个串珠子的例子,说PM给我们的功能列表都像是一堆零零散散的珠子,而我们要做的,就是把这些珠子串起来,把功能串起来,最后呈现给用户的才是一个完整的东西,有着清晰的架构和流程。

这话说起来还是有一些抽象,我想尝试着通过手机产品登录界面的设计,来跟大家分享我对架构设计和流程设计的思考过程。

二、一个例子

首先我们来看一个例子,见图2:

图2 一个小朋友做的登录界面

这个页面非常有代表性,它很像PM提出的需求列表,杂乱的堆在了界面上。先来挑挑问题所在:

文案不太准确,“帐号密码”的文案用“密码”就行了,“登录账号”按钮的文案用“登录”就可以了,“离线使用”按钮,他想表达的是“匿名登录(不需要账号、密码)”。

界面上元素太多,需要分辨哪些是自己需要的

层级关系不明,没有一条清晰的任务主线

没有考虑到虚拟键盘遮挡的问题

相关操作可以离得再近一些,比如忘记密码跟登录按钮

三、研究一下架构

那么我们架构上进行分析,架构上来讲,这个界面,主要有三个模块:登录、匿名和注册,其中匿名可能有两种情况,这里表现的是不需要用户名和密码的情况,如图3.

图3 登录页面架构图

我们先来分析一下登录和注册这两个功能模块。如果用户要登录,那么需要输入用户名和密码,如果用户希望以后不用再输入密码了,可以选择记住密码,如果用户忘记了密码,那么可以给一个入口让他去执行找回密码操作。当然,这些如果都是建立在用户要执行登录操作之后。所以可以把这些元素藏起来。所以,既然登录和注册是平级的,那么我们可不可以把这个页面设计成图4这样子呢?

 

图4 登录页面采用2个入口的形式,可以选择登录或注册

参考案例是Foursquare和16Fun,见图5。 

图5 Foursquare的登录页面,只有两个选项,登录或者注册

这个方案的优点非常明显,就是架构清晰,不会有太多的干扰因素,但是缺点也是有的,登录和注册两个按钮还是需要区分一下的,而且这两个功能过于平级,在不同的产品阶段应该有侧重才对,比如新产品上线,要更合理的引导注册,成熟产品,要突出登录。

再来看看匿名这个功能,前文提到,匿名有两种情况:

1、不需要用户名和密码,就可以登录

2、需要提交用户名和密码,但是匿名登录,不让别人看到

情况1,既然不需要用户名和密码就可以登录,那为什么还要先进入登录页面而不是内容页面呢?如果你的产品是侧重于社区类的,需要用户登录的,那么还是要引导用户登录,如果你的产品是工具类的、内容类的,希望用户能看到内容,那么可以让用户直接进入到软件里,先看到内容,等需要执行一些登录之后才能进行的操作时,才提示用户登录。

情况2,往往是用在论坛、贴吧等需要匿名发表帖子的情况下,那么我们只需要在发帖页面给出匿名发贴的复选框就行了,不需要让用户在登录界面就直接选择了。如果是想登录某些论坛,却又不想暴露在线状态,则可以在登录按钮按钮上面增加一个状态选择,如图6,QQ客户端。 

图6 iPhone版QQ客户端,登录按钮上方可以选择状态

因为我们这个登录页面属于情况1,所以就把匿名登录功能从登录页面拿掉了。

  • 相关推荐
  • 大家在看
  • 大厂是怎么量化产品设计的?

    ​前几天我写了一篇文章,讲的是淘宝 App 的一个设计优化案例,想必很多人都看过了。通过那个案例,你可以看到如何通过产品设计驱动业务增长,以及如何通过产品设计来拿到业务结果。

  • 亦岚酒店:以商业模型驱动产品设计,以产品设计赋能业务发展

    亦岚酒店作为锦江酒店(中国区)旗下的创新中端酒店品牌,面世不到 1 年,已完成30+项目签约,成为行业公认的高性价比中端酒店首选品牌。除了凭借精准的品牌市场定位、完备商业模型和独特的服务理念,赢得投资人的青睐之外,其卓越产品设计和落地能力在品牌发展初期,也起到了不容忽视的作用!实力:亦岚酒店由全球顶尖酒店集团首席设计师操刀设计亦岚首席设计师:谭友全球顶级酒店设计集团首席设计师亦岚酒店的首席设计师谭友,来自于?

  • 字节跳动投资小帮手装饰,后者经营范围含产品设计

    近日,北京小帮手装饰有限公司发生工商变更,原股东李春辉退出,新增字节跳动关联公司北京有竹居网络技术有限公司为股东,持股100%。

  • 终止企鹅号黎明计划!腾讯致歉UP主:部分产品设计不完善

    今日,腾讯内容开放平台公众号发文,称执行中管理不严及产品设计不完善,导致了不少问题,决定终止黎明计划”,并向UP主们道歉。腾讯在致歉说明中表示, 网传企鹅号利用视频内容向其他平台投诉原创、甚至打击创作者原有的外平台帐号”的说法不实。针对目前收到的对MCN机构操作问题的质疑,包括承诺了入驻金未兑现、MCN恶意举报帐号,或在入驻时被索要创作者在第三方平台帐号和密码等情况,腾讯表示继续跟进处理。对于已经入驻的创?

  • 大厂产品经理都在用的设计工具

    产品经理,一个改变世界的职位:QQ、百度、微信、360……这一个个改变世界的产品其背后都是响当当的产品经理:李彦宏、马化腾、张小龙、周鸿炜。他们在互联网世界里改变着人们的生活方式,也同时在改变着世界的趋势。2021 年的今天,以大数据、云计算、人工智能、物联网等为核心的新一代技术正在对移动互联网产业进行重塑,产品经理作为其中最重要一环协调负责产品的规划设计、运营运维、迭代优化和流量变现,为人们提供更新更优的互

  • 科勒合肥设计体验中心盛装开业 打造家居设计灵感新地标

    2021年11月19日,科勒合肥设计体验中心于望湖美家居馆盛大开业,成为全球厨卫创新先锋科勒KOHLER落户安徽合肥的首家设计体验中心。有别于旗舰店或一般门店,科勒设计体验中心旨在打破传统的消费模式,将以一站式购物服务体验,为合肥消费者提供高品质整体厨卫解决方案,打造家居设计灵感新地标。开业当天,科勒厨卫集团中国区总裁王振颜先生,科勒(中国)投资有限公司商务副总裁徐赣华先生,科勒(中国)投资有限公司市场副总裁强基

  • 艾维设计公司为查理斯王子“可持续市场倡议”设计出Terra Carta奖章

    获悉,苹果前设计主管乔尼·艾维(Jony Ive)的设计公司LoveFrom日前设立了一个特别奖,以此来旨表彰那些在创造可持续市场方面处于领先地位的公司。由LoveFrom设计的Terra Carta奖章是跟英国查尔斯王子领导的可持续市场倡议(Sustainable Markets Initiative)合作制作的。Terra Carta是一个章程,为企业提供了一个路线图以通过利用自然的力量建立一个可持续的未来。艾维的Terra Carta奖章旨在体现Terra Carta的价值观,其中包括通过赋

  • 设计师畅想小米12 Ultra概念设计:徕卡相机加持

    在年初发布了小米 11 Ultra 之后,许多人一直期待着该公司在 2022 推出更加强大的小米 12 系列。除了传闻首次加入的 12 mini,该公司还可能引入 12 Lite、12 Lite Zoom 和 12T 等型号。不过大家最为关注的,还是旗舰定位的小米 12 Ultra 。为了帮助大家更好地想象它的样子,荷兰科技博客 LetsGoDigital 刚刚分享了 Technizo Concept 的最新概念设计渲染图。小米 12 Ultra 或配备后置徕卡三摄(来自:LetsGoDigital)尽管官方尚未披

  • 苹果重新设计Apple ID页面:界面更简洁 交互更流畅

    苹果公司近日上线了重新设计的 Apple ID 页面,引入了一个全新的外观,比之前使用的设计更加现代和简洁。新页面采用了新的圆点和苹果 LOGO 设计,并介绍了 Apple ID 页面可以做什么。整个网站很简单,反应灵敏,易于浏览,而且比之前的网站更快。对于那些需要在网络上管理他们的苹果ID的人来说,新的外观比之前的设计有明显的改进。新的网站设计可以在以下网址找到 https://appleid.apple.com/

  • 你参与设计的云之家UI上线了

    报告各位云之家粉丝,云之家终于在 UI 上面百尺竿头更进了一步,告别了2 年前的V10 版本,一脚踏入了更清新的风格。 9 月份我们发布了云之家视觉方案设计优化的调研,共收到1100+份问卷,非常感谢云粉的出谋划策,现在!是时候更新一波了!你设计的云之家UI上线啦~ 这次更新页面UI 除了视觉的重大改变,还针对页面做出了更好的优化,提升响应的速度不是一星半点。UI升级,这次,我们“大有不同”。 色调焕新,清新+品牌我都要 以?

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天