• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 移动互联网网设计之碎片时间里的高效设计

移动互联网网设计之碎片时间里的高效设计

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含碎片时间,高效设计等相关知识,佚名 希望在学习及工作中可以帮助到您
正如微博,在移动互联时代用户的"短、频、快"诉求更为强烈了。移动用户多是利用碎片时间来享受服务的,银行排队、坐地铁、乘公交、电梯中…… 当仔细观察这些"道路勇士"们的使用情景时,深感高效服务于用户的碎片时间的重要性。去年曾跨部门作了类似的设计分享,重点介绍了三个层面的高效:功能框架、操作任务流、控件元素等层面。这里摘取一些让体验更高效的设计方法与大家分享。
  功能需求层面
  "你逃,或者不逃,选择都在那里,挥之不去"。一堆功能同时供用户选择,使用上是无论如果也高效不起来的。如Fanson所言产品经理的角度,有永远背不完的功能KPI,即使此次不加,下个迭代或版本仍将面对。所以如何在庞多的功能面前,是让用户在碎片时间里高效使用,从功能需求着手是第一步!
  一:"1 > N" 突出核心
  大多数产品功能点关联性比较强,往往一个点的处理,关系着多方面细节,点与点间深层面的纠结就难以把握。如果在处理时,抱着"并行需求"的观点,往往是大多数需求都难以平衡。在经历QQ音乐大大小小无数PK后,深刻认识到:坚持"1 N"设计原则,做好一个比做多个却平庸更能提升体验效率。突出核心功能需求,能让产品变得更易用,也能让工作更敏捷。有重点、分层次的把握功能点的设计,也是体现设计师能力的一个重要角度。
  案例:手机QQ音乐的有效减法
碎片时间里的高效设计 微课江湖
  一直有效做减法的手机QQ音乐播放器
  2010 QQ音乐播放器弃用了九宫格形式,改变九个功能点并行处理的方法,突出目标用户听音乐、看歌词等重点需求,直接采用Tab页签左右切换的导航,让用户直观查看操作。Android版的QQ音乐播放器,更是直接突出快速听音乐的需求,利用触屏特性,在默认播放器界面上相对弱化了设置、选择等功能,把它们放在第二操作层面,以"简"胜"繁"。
  二:紧握全局导航
  社区类、电商类、平台类、工具类……产品形态各不相同,在狭小的屏幕中有效构建产品基础形态是带镣铐跳舞的活儿。在非触屏时代,导航不畅带来的成本要远高于触屏时代,让用户更快体验到访问结果一直是设计师们的追求。对以信息获取为核心的产品,Tab、列表类导航是首选,且主导航争取在1级内展开;对以操作为主的应用(游戏类浸入式应用除外),宫格类导航是选择重点,力求树立稳定的操作映射。
  操作任务流层面
  按一下、再按一下、再按一下、再按一下……期待用户通过更多操作才能看到结果是很危险的。在产品的操作任务流上,多一项点击,总是意味着用户付出时间和手指移动的代价(某些时候这种问题被长期积累起来是令人担心的)!完成目标的路径越少,用户实现目标的效率越高,相应的,在碎片时间里的报怨、焦虑等负面情绪能得到有效控制。
  一:及时呈现
  在用户体验的时间尺度方面,移动终端上超过10秒才能完成任务体验通常是不能被接受的。让用户从一开始接触产品就"快"了起来,将急需的工具、指引恰当设置在当前所见处,提升效率,减少负担。
  案例1:默认呈现虚拟键盘
  iPhone版腾讯微博登陆界面,默认提供虚拟键盘。直接呈现输入配置,减少了键盘呼出操作。
  案例2:即时搜索
  用户无需等待至词条输入结束,即时搜索时便可以在输入时搜索出结果。减少了输入操作,也弱化了小屏幕上虚拟键盘的使用难度。
  二:定制化、快
  用户对产品总是有形形色色的期待,个性化的需求总是呼唤着被进一步满足。不过,这在Tencent的海量用户基础上,对设计的挑战很大。应当充分理解用户能力上的局限性,将类型化的产品行为(如操作姿态、视觉动向、触听配合等等)提炼出来,进一步深入设计。
  案例1:快速链接
  QQ浏览器的快速链接是根据用户的网页浏览习惯,提供直达区的一种方式。在网页浏览基础上,给出定制化的"添加书签"、"添加快速链接"等功能,也让产品对单个用户而言更为饱满。
  案例2:定制左右
  在QQ浏览器中用户可单手翻页,定制左、右手操作习惯,尤其在电阻屏设备上提供这种设计尤为易用,因为用户的双手并不灵巧。
  三:一致性
  这点无需多谈,尤其是对大公司种类繁多的产品而言,在相关规范指引下,降低操作学习成本,形成统一品牌认知,务必保持一致性。值得注意的是:一致性要与用户更大范围的生活知识和经验相一致,避免冲突。
  不过,在多系统、多终端的情况下,一致性出现了新问题:如何满足多产品的一致性?裂变平台的一致性?硬件操作的一致性?……有机会将深入探讨一下。
  四:避免打断
  试想一下,你正沉迷在网页查看、书籍阅读或游戏的战斗中,突然被另外的任务生硬暂停了。这是一个令人沮丧的情形。在这些使用情景下,用户无法流程体验产品。Vera也一直提醒我:手机产品体验中要能"快进快出"。正如iPhone QQ斗地主游戏中的快速发牌、理牌、出牌等,保证玩家在具体操作中的流程性、简洁性。尤其避免模态对话的打断,在Symbian、iPhone设计中经常出现此类情况。
  案例:自动切换网络
  在iPhone QQ斗地主中,自动检测用户网络,在背后提供网络间切换,而不是询问用户该如何选择,自信的帮助用户链接体验过程。
  控件元素层面
  控件类型林林总总(如下图中某产品涉及到的控件),更深入细节上的高效体验往往隐藏在这些控件元素中。如在弹出框的设计中尽量避免 Check box的形式,减少询问;如在搜索框中主动Push一些用户常用关键词、热门关键词;如下拉列表间帐号的快速切换……元素的精细能保证使用的快捷。控件元素的设计也是在不断的进化优化,量的积累改进能促进质的飞跃。
  腾讯某移动终端产品控件规范目录
  遵循有效法则
  一些诸如"时间感知的非线性"、"7±2"现行记忆、图形增强文本表现力等等科学法则都能为产品提供高效体验。
  案例:菜单的"7±2"原则
  上世纪,Miller通过研究显示,我们的短期记忆只能同时保存7±2项内容。在各种Tencent无线Symbian产品中,菜单设计上,都遵循"7±2"个信息项的现行记忆法则。当然我们还可以进一步探讨如何改进菜单分类,实验也证明了广而浅的树会比窄而深的树更加合适;也可以探讨在键盘机菜单上是否有设计分割线的必要(如S60 V3上的Skyfire)……
  小结
  在功能层面上,突核心、紧握导航;
  在任务流层面上,提供定制化、快进快出、一致性操作、避免打断;
  在控件元素上,遵循科学有效法则;
  ……
  这些都是产品设计中服务于用户高效利用碎片时间、让体验快起来的设计方法,尤为针对小屏幕移动终端。某些方法,对于Pad类产品未必合适。Pad类产品设计具有Web网页和小屏幕终端的交叉性特点,设计思路、体验方式上都有很大的差异化。期待在这个方向上有所沉淀能于大家分享!

您可能想查找下面的文章:

  • 移动互联网网设计之碎片时间里的高效设计

相关文章

  • 2017-08-06CSS中的选择器种类总结及效率比较
  • 2017-08-06CSS3实现10种Loading效果
  • 2017-08-06CSS3实战第一波 让我们尽情的圆角吧
  • 2017-08-06使用div+css布局过程中在什么时候使用table呢
  • 2017-08-06一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
  • 2017-08-06活动专题页信息表达法则--瞬间致胜的方法
  • 2017-08-06网页制作 默认Web字体样式
  • 2017-08-06css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
  • 2017-08-06页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
  • 2017-08-06div背景颜色怎样渐变 css实现div层背景颜色渐变代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS 使用table布局网页是不明智
    • css word-break word-wrap 前台显示自动换行
    • css中clearfix清除浮动的用法及其原理示例介绍
    • div等浮层在IE6下被下拉框遮挡的解决方法
    • CSS3圆角和渐变2种常用功能详解
    • CSS中的文本属性学习指南
    • 详解CSS制作Web页面条纹背景样式的技巧
    • ie6和ie7中的链接图片点不中问题讨论
    • 说说CSS Hack 和向后兼容(推荐)
    • 通过简单的css样式让按钮居中显示

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有