设计案例分享:腾讯手机令牌的设计过程

文章描述:QQ安全我做主—手机令牌2.0设计分享.


  一款小小的工具软件,如何赢得  iPhone app store4星级+评价;Android 电子市场4.5星评价,让我与您一起分享手机令牌的设计过程

什么是手机令牌?

  手机令牌是通过6位动态密码保护QQ帐号、Q币和游戏装备等虚拟财产安全的手机软件。手机令牌每30S更换一次动态密码,用户在敏感操作的时候验证动态密码,以此保障自己的帐号安全。简单的说:手机令牌是一个动态密码的生成软件。是我们专为保护用户QQ帐号安全设计的手机APP。

  设计工作主要包括:手机令牌风格设定、新手绑定、更换及设置流程,以及AQ网站宣传三部分。

  下载地址:http://aq.qq.com/cn/manage/token/download

  如何把一个简单的工具型软件做好,我们做了以下设计思考:

一、确定清晰的框架和结构

  手机令牌2.0是一款工具类型的APP,在做框架设计的时候,应展现的是此APP的主要界面(动态密码),其次才是“设置”操作。

  我们利用iPhone平台的特性,将放在了正面与背面进行展示,使得此软件结构清晰明了。而在Android平台,我们则利用了本身的menu菜单键呼出option菜单的方式进行设置操作。 

iPhone平台:

 

Android平台:

  

二、激活和使用的操作流程便捷性,细节决定成败

  为了让用户能快速了解如何使用令牌,每一部操作都在考虑用户预期如何,用户操作后所得到的反馈如何,是否准确,令牌在产品的规划和设计的细节上都充分考虑了这些。

  用户在第一次打开产品时,需要app自动发送一条短信确认身份后才能激活,在使用过程中,我们需要充分的提醒用户每一步操作的原因,下一步会怎样,还有操作后的反馈是怎样。而令牌自发布后,没有接到一例关于使用上的投诉或疑问,而令牌本身,在使用上,也没有提供任何一个FAQ,我们将教育结合在了操作和使用当中。

  令牌在初期规划时,设计师利用了草图设计软件mockups,设计了低保真交互原型初稿,快速搭建使用流程并与产品讨论修改,流程界面如下图:

 

  

三、遵循平台软件设计规范

  我们的产品设计团队虽然只有3人,但是对于细节和精品的追求,让我们决定针对不同平台,完全重新设计产品交互/UI,每一个细节都按照系统特色重新设计。

  iPhone令牌的“设置”按键一目了然,即按即点,点击后界面翻转至背面进行设置,对于Android令牌,则必须充分利用“menu”和“返回”的物理按键,这样也使得Android的页面更加简洁:

 

  

四、拟物化风格,移动设计的灵魂

  经过总结和分析各类手持设备中的项目,尤其是在触摸屏手持设备中,发现了UI拟物化风格有其必然性和合理性,虚拟的体验来源于真实生活的实际体验的积累,让指尖在与设备互动中感受正式的场景。结合手机令牌的用户需要,以及各个平台上手机特色需要,大胆进行设计畅想。

  因此手机令牌选择了盾牌作为拟物的核心要素,盾牌是自然的保护与安全的代言,直接让用户感觉到手机令牌对QQ安全的呵护。

  当然单纯的盾牌并不能引发视觉冲击,也不能解决令牌中一堆数字展现的单调乏味。所以我们创造性的引入了类似心电图的概念,表达了数字更新的同时增添了科技感,而数字的快速翻动和变化的效果,让数字更换的情景表现的更加淋漓尽致。尤其是有很多用户反馈,会一直盯着手机屏幕中,动态密码每隔30秒跳跃的动画看,也许这就是设计中的细节吸引了用户,打动了用户。

 

  

五、让用户感到惊喜,引入手势操作(高级功能)

  令牌是一款非常单纯的工具软件,如何在这样的简单软件中引入手势,给用户惊喜,让用户在使用时也能挖掘出一些高级功能,从而提高用户体验,是一个值得考虑的问题。最后,我们考虑到了令牌时间校准这样一个功能,虽然用户使用的时间不多,但是对于使用此功能的用户,将会非常得意于此功能,因为我们引入了晃动校准时间,晃动本身就有将无序变为有序之意。在增加用户体验的同时,符合用户操作预期。

六、屏幕适配

  这个难题在Android系统上格外突出,如何适配android手机不同像素的分辨率,320×240,480×320,800×480,854×480?

  出多个版本?我们只有一位视觉设计师和一位开发同学,必须在资源有限的情况下用一个版本解决这些适配问题。在闪屏画面,如何做到一张图片适配这么多屏幕?而保证不出现字迹模糊或者图片变形?

  我们采用了一个非常简单的方法,闪屏画面中间采用了过渡色,下方采用纯白色处理。对于闪屏界面,直接默认先画出纯白色的背景,然后将闪屏图片置顶。形成如下图:

 

  对于令牌主页面的全拟物风格,如何适应这些不同的分辨率,我们也做了统一适配处理:我们先采用了木材背景填充页面所有位置,针对不同的分辨率,程序先检测手机分辨率,然后针对不同的分辨率,将盾牌摆放在不同的高度。当然,高度还要充分考虑到menu键呼出option菜单后的效果,大家可以留意下不同手机看到的盾牌距离状态栏的距离,如下图所示: 

 

  其他场景也采用了类似方法处理屏幕适配性。

  在进行了充分的思考后,我们使用了一个670k的安装包,适配了Android的所有机型,并且在电子市场获得了4.5星级的高分。

七、项目组全员参与产品体验与设计

  手机令牌的整个项目过程中,不少细节的优化,是来自于产品和开发同学的创意。

  在此,特别感谢为手机令牌项目付出努力的产品和开发同学,没有你们的努力与建议,手机令牌不会取得现在的成绩!

时间: 2024-08-07 16:01:38

设计案例分享:腾讯手机令牌的设计过程的相关文章

交互设计案例分享:对话框引导用户操作

文章描述:交互设计案例分享:对话框引导用户操作. "怎么了?"除非你对某类对话框已司空见惯,否则遇到,第一反应往往是这样的?这种体验就像你明明急着去赶车,途中却不断被拦住塞传单一样.不能否认,它是一种打断,有时甚至会成为打扰.做为设计师,虽知"打断"暂不能杜绝,但不使之变为"打扰",却是我们该努力做到的: ① 多次打断=打扰 隔一个小时打断你一下,你或者还可以忍受.若是1分钟内好几次打断你,想起来就抓狂吧?这也是Chrome为什么在判断此网页多次

设计案例分享:QQ登陆节日banner的创作过程

文章描述:设计案例分享:QQ登陆节日banner的创作过程. QQ登录banner是与用户沟通情感的小窗口,在一些特殊的日子里我们尝试一些力所能及的表达方式来给用户一种感动,一种记忆. QQ登录banner正力求避免直白的画面呈现,增强画面的趣味性.故事性,唤起用户共鸣,以幽默的方式带给用户愉悦的心情. 下面分类归纳一些节日banner的创作过程,通过记录一些设计过程中的反复与纠结,总结几点与大家共享.一. 避免低幼与直白的画面铺陈 [开学日] 九月一日开学,对于在校学生或是毕业许久的社会人士,

从错误中汲取经验–产品设计案例分享

小编今天看到一篇译文是有关产品设计案例分享的内容,个人从中获益匪浅,因此分享给大家,希望大家能够从中汲取经验.译文:Buffer是一款帮助你在Twitter.Facebook等平台上更高效的发布内容的应用,到目前我们已经有超过50万的用户了.两年前刚刚开始打造这个产品的时候,我们就已经做好了充分的思想准备去面对各种挑战,包括设计开发过程中会遇到的障碍以及可能犯的错误.我们始终觉得,在项目当中犯错是在所难免的:只要能够从中学到一些东西,这些错误就能引导我们向正确的方向前进.从某种程度上讲,将我们的

网页设计案例分享:黑色风格网页实际案例

文章描述:不走寻常路:22款"暗黑系"的网页设计分享. 自从iOS 7推出后,便掀起了扁平化加色彩明亮的设计风潮.如今,色彩明亮的扁平化设计已填满了我们的生活,大家是否有些审美疲劳了呢?在扁平风潮下,依旧有些特立独行的设计师们坚持走自己的路,在他们的作品中采用的多是较为柔和的配色方案,使用的色彩也都趋于深色系!     虽然如今"暗黑系"并非大势,但他们的作品依旧充满了另类的吸引力.在黑与白的交错中,扑捉那份独特的情感体验!下面为大家介绍20款"暗黑系&q

优秀的后台管理界面设计案例分享

今天这篇文章收集了30个漂亮的应用程序后台管理界面分享给大家.这些界面都是来自themeforest网站,虽然直接下载需要付费的,不过大部分都提供了在线预览,所以完全能够复制下来,有的提供了预览图,设计师可以根据预览图自己设计.希望这些漂亮的后台管理界面设计案例能帮助到你.(有登录界面的,点击登录即可进入后台界面) 1-Administration for the professionals 2-Boxie Admin 3-HTML,CSS & jQuery Admin Panel 4-Simp

移动UI/UX交互设计案例:50个精美移动UI设计

文章描述:50款拥有超赞用户体验的精美移动UI设计. 实际上用户界面(UI)和用户体验(UX)就如同硬币的两边,两者同等重要.他们在用户跟他们的产品之间都保持着紧密的联系.用户界面(UI)描述的是面对XX以及产品,而用户体验(UX)面对的则是用户的体验和对产品的洞察力.除此之外,简单来说用户界面(UI)面对的是技术以及整个网站的表现形式,用户体验(UX)面临的则是用户的理解和反应. 最漂亮.时尚.超赞的移动UI设计都在这儿了.今天,我们从behance和dribbble挑选了50款拥有超赞用户体

qzone相册照片编辑器设计案例:减少用户思考的简洁设计

网页制作Webjx文章简介:设计案例:简化用户界面,别让用户思考. ·介绍QQ空间相册的个性化利器,能对照片进行效果的优化.文字编辑等等. 从设计上使用了创新的手法,尽量减少用户的思考.其中,通过界面的特殊表现,让用户更容易学会使用.在使用的过程中,也避免了复杂的操作方式,降低使用门槛. ·定位 了解用户需求·用户期望照片编辑工具拥有"玩"照片的成分:·大多数用户反映,最需要的功能是旋转.裁剪.添加照片的边框:·能给照片添加文字.装饰品:·对照片进行颜色或其他效果优化.- 分析用户需求

设计实例分享:腾讯形象店品牌设计

腾讯形象店是公司对外形象的重要窗口,员工可在此购买公仔及来自各个系统的礼品,更有上等的illy咖啡供应.这一次我们要帮助它建设及管理品牌,从取名规划到包装执行. 一.成果 1.LOGO释义:1) M字中间两个门为两只企鹅手牵手:2) 中间两只企鹅大小一致,表示"印象"(通过折叠,一只企鹅印出另一只企鹅):3) 多彩表现业务多元化,而企鹅(QQ)是主要平台,通过M(Main)表现:4) "腾讯印象"4字使用"腾讯网"字体,引入母品牌元素:5) 外框

网页设计教程:网站背景设计案例分享

文章描述:我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景.收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋. 如何选择一种最恰当的网页背景是网站设计中最常见的问题之一. 通常网站设计者都已准备好网站内容,而且版面布局大多也基本敲定.但背景要么是令人厌烦,要么是让人眼花缭乱,让设计者迟迟不能确定. 今天,我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景.收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋. 1. 素描设计 这种