• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 踩坑经验!那些你想太多的「过度设计」和改进方式

踩坑经验!那些你想太多的「过度设计」和改进方式

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

本文主要包含用户体验,经验分享,设计细节,过度设计等相关知识,网易UEDC希望在学习及工作中可以帮助到您

网易UEDC – 魏辛逸?:过度设计,一般是说过度满足用户需求的设计。用户想要A,你给了他ABCDE,结果BCDE全部用不上。既让用户选择困难,又浪费了团队开发时间。

即使是有经验的设计师,有时也容易陷入自己的「小循环」中难以自拔,过度追求一些体验的完美,或者需求的满足,而导致最终的实际使用体验下降,或者偏离产品设计初衷的悲剧结果。

本文整理了一些自己踩过的坑,希望能为设计师们提供一些前车之鉴以作参考。

过度追求精准

例1:我们都知道载入内容时需要loading状态,如下图:

现实的业务场景中,需要加载的内容往往不只一个。如下图:虽然图表比较多,但排列整齐有序,所以看上去还是比较舒适的。

再来看第三张:这样的loading,是你想要的吗?

这是一个曾真实存在过的业务场景图,仪表盘中的图表排版是用户自行构建的。大部分仪表盘中的图表都不少于5张,且大小不一。每张图表中的数据来源于不同的数据模型,模型大小会影响加载速度,所以加载速度有快有慢,再加上网速等一些客观原因,有时就是会出现参差不齐一片loading的场景,而且出现的频率还不低。

这时,就不应该过于追求每张图表与其loading状态一一对应。用户需要的是反馈,虽然精准提示了反馈来自于哪张图表,但如果界面展示反而让用户烦躁和混乱,那就得不偿失了。

比较合理的做法是,把局部loading设计成全局loading,起到反馈作用就可以了。如图:虽然牺牲了一点精确性,但在体验上用户会更容易接受。

例2:这是一个筛选器控件的样式设置页面,有两种样式:纵向、横向。

纵向的列表筛选器,相信大部分人都能理解。如下图:当你勾选了需要筛选的内容时,相对应的内容就会被展示。

好了,现在来想象一下,横向是什么?是这样的:

会发现,横向的列表筛选器比较难理解,甚至之前根本没有看到过,仅仅从文案很难联想到最终的展示形式。横向和纵向,从文案上来说是一个精准的表达,同样的功能,只是方向发生了改变,所以你不能说他错。但用户理解不了,就得换个设计思维。

重新从用户的使用场景着手,大部分用户习惯将横向列表筛选器和图表搭配在一起这么使用:

这非常像一个导航,切换导航就是筛选的过程。最终,我们把设置面板改成了下图:「列表」和「导航」。虽然从含义上不如前者精准,但对用户来说,看到文案能够直观地联想到最终展现形式,体验上会更友好。

死板遵循设计法则

几乎所有的设计师,在入门时都会接触设计法则,设计法则为我们提供设计规范和评判标准,运用这些法则,能让我们在设计时更得心应手,在阐述自己的方案时也会更有底气。但所有的法则都不能盲目的遵守,得根据不同的场景灵活运用。

尼而森可用性原则中有一条叫做,一致性原则。同一用语、功能、操作需要保持一致。 这可以帮助我们的产品看起来更加统一和规范,但一些设计师会机械的执行这条原则。如下图:这是一个数据格式的设定弹窗,通过点击btn,能够激活该面板。

在另一个界面,也有数据格式的设置,为了遵循操作方式一致,设计成了这样,如图:

细看后是否觉得有些地方比较违和?虽然都是通过点击操作激活设置弹窗,但表单中的链接一般不会孤零零的出现在某一个条目中。其次,在弹窗中应该尽量避免再出现一层弹窗,所以设置入口放在这里,是不合适的。

修改一下,这样看上去是不是顺眼多了?

虽然操作方式没有完全统一,但弹窗和下拉菜单面板中的内容布局是一致的。除此之外,下拉框和上一个表单条目也保持了形式统一,整体更和谐。灵活而不机械的运用设计法则,才能将其作用发挥到最大。

过度假设用户行为

在设计的过程中,经常会走着走着就进入了一个误区。「用户可能会如何操作,所以我们应该….」这样的想法经常会伴随着大量的竞品参考愈演愈烈,竞品如果有的,而自己没有就会觉得似乎少了什么。

举个例子:渐变色的设置面板。有的色板是如下图这样的,类型、方向、角度、透明度、亮度等等,一眼看过去十分专业。

并不是每一个颜色设置场景都需要使用到渐变色板,相对于一般的纯色色板,它的使用门槛更高。对于这类设置较多的模块,有时我们并不能确定是所有内容全部提供还是只提供其中最常用的一部分,毕竟每一个功能似乎都有需求,难以舍弃。再加上设计迭代周期短,没有足够的时间做一次完整的可用性测试,来研究和验证用户到底想要哪些功能,所以就会陷入纠结。

可以试着先将所有的内容归类,同类组合,视觉上精简内容,内容一旦形成区块就比较容易区分出优先级,优先级低的内容暂时先不放出来。如图:

建议刚开始选择较为简单的方案,同时留出可扩展的空间。如果简单的设计方案已经能满足用户了,就不用盲目做加法。如果根据后期的可用性测试验证用户还有新的需求,再逐步添加。不要一下子就把用户行为想得太复杂,设计太多,吃力还不讨好。

过多展示内在业务逻辑

To b产品往往业务属性较强,内部逻辑比较复杂,概念定义也多。如图:

报告设置针对的是全局的内容,页面设置针对的是当前页的内容。由于技术是按照两个入口实现该功能的,逻辑上也清晰,所以设计时两个入口都暴露给了用户。但经过可用性测试,这两者的概念区别对用户来说都需要一定的理解时间,首次选择时也容易疑惑。其实这些定义产品内部分清就足够了,不需要额外暴露给用户。

把两个概念合二为一,直接进入当前页面设置,如果有需要,再勾选应用到全局,用户不需要在不同的入口之间犹豫选择,体验上会好很多。

过于把用户当「小白」

产品设计中经常会强调,把「用户当小白」,但这更多适合to c类产品,to c产品的操作流程更有规律性,做好引导或者在操作过程中自然的提示,的确能够帮助用户更快上手。

而 to b类产品,尤其是工具类产品,使用者本身是有一定的专业基础的,再加上操作频繁,形式多样,想要预判用户的下一步操作并不容易。如果老抱着一种我要去教用户使用的想法,每一步都去提示、引导,只会不停打断操作流程,降低用户体验。

对于工具类的to b产品,与其不断提醒,造成大量提示文案,不如在一些复杂概念或者复杂操作旁提供帮助,供用户自己查阅学习。

例如:提供搜索入口帮助用户快速定位到问题。

如果一些内容难以理解,可以在一旁放上注释框,hover时tooltip显示。

如果注释框难以解释清楚复杂问题,可以直接提供帮助手册的链接,点击跳转到新页面查看详细说明。

对于有一定专业基础的用户来说,提供工具书,当他遇到问题时自行查阅,比强制性的手把手教往往作用更大。

盲目满足用户需求

参与过用户访谈和可用性测试的设计师可能会有一个体会,经常会出现「希望

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

  • 用户体验的76个体验点小结
  • 好的网站文案 良好的用户体验
  • B2C 网站用户体验细节设计参考
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 设计好看但没人用?6个技巧告诉你到底该如何影响用户!

相关文章

  • 2018-08-23进阶实例教程!如何通过设计提升产品的增值服务?
  • 2018-08-23想让用户忍不住浏览下去,这5种设计策略需谨记
  • 2017-09-08openStreetMap ,Leaflet and XGeocoding V2之初步使用
  • 2018-08-23是什么限制你成为优秀的设计师?高手的答案在这!
  • 2018-08-23高手课堂!「按钮系列」之按钮位置与用户体验的关系
  • 2018-08-23腾讯干货!虚拟To B支付设计研究之基本知识科普篇
  • 2018-08-23超干货!如何利用记忆心理学提高用户体验?
  • 2017-08-06img标签src属性值为空时2次请求问题(非ie浏览器)
  • 2017-08-06条件注释样式的编写方法及示例代码
  • 2018-08-23腾讯设计师:极速适配 iPhone X 的技巧揭秘!

文章分类

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

最近更新的内容

    • 设计实战!如何设计一款富有情感吸引力的拼字游戏
    • 超实用!信息架构基础知识科普手册
    • 给web设计的新手们建议一些有用的学习资料
    • 超全面!可能是最全面的「深色界面」使用方法+优缺点分析
    • 实战案例!58 招才猫直聘积分系统设计过程总结
    • 商业设计比赛中如何提升获奖率?高手总结了这4个实用小技巧
    • 用户体验和可用性之间的联系和差异,你都知道吗?
    • 想让文字更出彩?试试通过切割文本来创造视觉吸引力
    • button带一个灰色的边框很难看如何去掉
    • 为什么你始终做不好视觉设计?

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

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