• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 在实际项目中,我遇到过的技术限制坑和用过的设计方法

在实际项目中,我遇到过的技术限制坑和用过的设计方法

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含团队协作,经验分享,设计协作等相关知识,希望在学习及工作中可以帮助到您

hey熙:交互设计师的工作也是不断填坑的过程,项目不断给坑,设计师不断填坑。回顾交互设计的历史,就不难发现,交互设计催生于机器最难用的时候,最开始的时候因为机器都是实现模型,与用户心理模型实在相差太远,于是需要交互设计作为调节剂,缩小实现模型和心理模型的鸿沟。

在我们实际项目中会有很多的限制,这当中会有很多技术上的限制,不外乎:

  • 可能是因为时间和人力问题,还没有更好的技术方案。
  • 可能是历史遗留问题,改动起来难度大,甚至需要推翻,但是现阶段没法做。
  • 可能是合作问题,改动需要其他部门配合。

因为这些技术限制问题而导致的问题,往往就需要设计师用设计的方式来改善,我们戏称为填坑。

但是方法各式各样,在这里可以分享实际项目中遇到过的技术限制坑和用过的方法。

用户教育

用户教育就是直接“臣妾错了,请你原谅”的姿态,和用户直接明了地说明情况,希望用户能理解和体谅。

这是对付技术限制成本最低的做法,但未必优雅,有可能会让用户厌恶。关键就看教育是否真的能触动用户,赢得用户体谅。

举一个实例:在做【安卓手机游戏充值】(想看界面可以打开任意一款腾讯安卓的手游),使用话费支付时,因为运营商(中国移动、联通、电信)后台限制,充值的金币是无法实时到账的。

这个时候需要告知用户,这笔订单由于运营商限制,未能实时到账,但是到账了会通知。

值得注意的是,教育也需要看产品的用户群体,“见人说人话”:

  • 比如产品主要用户是年轻人,卖萌式的文案教育可能适合。
  • 比如产品主要用户是白领、中年人,那沉稳、陈述性的文案教育可能即可。

“假”文案

这也是教育的一种,但是不是直接告知,而是杜撰一个假的理由告知用户。原因在于:

  • 有的时候技术限制实在难以描述完整和清楚。
  • 或者涉及到专业背景知识,用户无法理解。

这个时候不必真的告诉用户完整的前因后果,可以用一个“假”的话术来说明这个限制。

举一个例子,在做【web端的游戏充值】时(想看界面可以打开任意一款腾讯web端的游戏),在做网银支付方式方式时,遇到一个坑:银行CGI不支持立马回调,API本身也有bug不是一时可改……导致可能查询不到支付结果。

这些这么专业的原因真的要告诉用户吗??诚然不是,所以我们当时用了一个假原因。当真的查不到支付结果时,告知用户是“网络”原因,然后引导用户重新查询或者重新支付。

PS:这里可以引起一个“道德”的讨论,看起来我们好像在欺骗用户,但是如果我们想想,这何尝不也是一种“善意的谎言”,毕竟综合起来,要是用户看到真实的原因,看到一堆不知所措的名词,反而会造成困惑。

动效

动效也是为技术限制擦屁股的手段,它是一种很好用的设计工具。

动效的主要作用是信息层级的过渡引导,即让用户感知信息的变化。在此之下,遇到一些和信息变化有关的技术限制,可以采用动效这个“润滑剂”来帮助解决技术限制的问题。

举一个例子,在做【腾讯周边商城】购物车功能时候,遇到一个技术限制:商城的商品是多个供应商提供(可以类比淘宝的店铺),但是购物车不能做合并支付(只能基于供应商进行支付,不能跨供应商),因为公司分成系统决定,如果要改,需要改动整个公司的系统,这个对于一个部门来说不现实也做不了。

什么意思呢?平时大家逛电商,购物车是可以跨店铺合并生成一个订单进行支付的:

但是,对于腾讯周边商城来说,后台不支持这个功能。结果就是,必须分开订单来结算。

因此,最后只能基于供应商来支付,所以最终设计结果推导为如下,直接分开两个供应商结算。

同时为了让用户能看到两个供应商,使用了一个“抽纸式”的动效,让用户可以同时看到两个供应商(商城实际上也只有两个供应商),滑动过程中供应商①会被供应商②顶走,点击①还是会展开。

庆幸的是,这个设计还是能让用户理解和接受。用户原话:

“为何不能合并支付,和我逛电商习惯不一样”——预料之中

“明白怎么用,就是区分供应商来支付”——验证设计可用性

灵活的设计

灵活的设计就是具体问题具体处理,通过设计把技术限制隐藏得无影无踪。(好像很玄的样子)这类情况是对设计师的挑战,但恰好最能锻炼设计师对技术限制带来问题的把握和处理能力。这是处理技术限制的最高方式。

举一个例子:也是【安卓手机游戏充值】,使用话费支付时,有10%的手机号是需要用【编辑发送短信】这种古老的方式支付的。因此技术限制需要对手机号进行甄别,用户需要触发检测手机号是支持“短信验证码”还是“发送短信”。

什么意思呢?90%的用户手机是支持验证码,很顺利完成支付的:

但是10%的用户,手机号不支持,他们只能用【编辑发送短信】这种n年前的古老方式。当时最初的做法是,把后台判断的过程放在“获取验证码”这个操作,即:点击获取验证码,识别到不支持验证码就使用编辑发送短信的方式:

这种做法让大家陷入了道德和哲学纠结。其实对10%的用户来说,牺牲了体验,让用户犯了错之后再支付,好像告诉他:你的支付方式好low好古老;您的手机号很旧……

所以最后采取了更“顺滑”的方式,用户输入手机号后,触发后台判断,进入相应方式:

其实我们会担心对于90%的用户来说,相当于多了一步操作。但是我们用了“使用手机安全支付”的文案,在可用性测试和访谈过程中,用户并不觉得这是多一步的负担,反而是猜想觉得是步骤的一部分。

用户原话:“是不是为了安全检验手机号”?“感觉更加安全”

总结

为技术限制擦屁股还有很多方式,不局限于这些方式。当然,最最最最最佳方式当然是推动工程师们把技术限制直接解决掉。不过具体问题具体分析,当真的遇到人力、时间、成本问题不得不为技术限制擦屁股时,用户体验设计师的作用也真正能发挥。

欢迎关注作者的微信公众号:heychen思录

设计师沟通三板斧」

  • 和甲方:《这才是真相!为什么中国的甲方都不愿意为设计付出高额费用?》
  • 和工程师:《畅快出效率!帮设计师与工程师更好沟通的3个方法》
  • 和上下级:《工作不顺心?总监给你聊聊职场沟通中的“上下左右”》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速

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

  • 为什么几个人的小团队更加高效更加靠谱?
  • 半年做了两个APP,我总结出这6个实战经验
  • 腾讯出品!设计师辅技手册之项目同步管理法
  • 网易可用性优化实录!如何让你的交互设计自查表真正用起来?
  • 高手进阶技巧!全方位深入理解 Sketch 库(上)
  • 高手进阶技巧!全方位深入理解 Sketch 库(中)
  • 设计师该如何带团队?来看高级设计师的总结!
  • 如何输出高质量的交互稿?来看京东设计师的总结!
  • 经典好书!从零开始翻译《Design Systems》:设计系统
  • 如何规避 Design System 架构设计中的逻辑陷阱?

相关文章

  • 2017-10-01webpack项目的一些文件用途解析
  • 2017-08-06编写Web前端代码的注意事项小结
  • 2017-08-06最佳20款免费英文手写字体推荐
  • 2017-08-06设计参考 漂亮和原创的博客设计
  • 2017-08-0618套精美的苹果风格免费图标素材分享
  • 2018-08-23超实用!信息架构基础知识科普手册
  • 2017-08-06Web 设计师的 50 个超便利工具
  • 2018-08-235个电商案例,教你学会优雅高效地给设计师们提修改意见
  • 2018-08-23从交互角度,分析为什么我沉迷抖音,却不想刷微视?
  • 2018-08-23网易设计师:帮你学会万能的深度访谈方法

文章分类

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

最近更新的内容

    • 从这4个角度,做出情感化设计的产品
    • 网站产品设计参考的几条原则
    • 写给UI新手的APP结构指南:闪屏
    • 盲人站长深恶痛绝的onfocus=”this.blur()”
    • 为什么优秀的设计师都是讲故事的高手?
    • 如何避免产品设计中的「生造方案」和「重新发明轮子」?
    • 窗口中的各种距离/滚动距离的精确计算汇总
    • 将爱豆的照片转成人物插画?这可能是最简单的方法!
    • 像做产品一样对Design System进行前期规划
    • 2013年网页设计UI最热趋势 最流行的UI设计

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

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