• 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

本文主要包含一致性原则,产品思维,动效设计,品牌,用户体验,用户场景,经验分享等相关知识,早安左小姐希望在学习及工作中可以帮助到您

一般 UI 设计师刚到一家新公司会遇到2种情况:

  • 公司的产品视觉构架包括规范以及到设计团队建设都非常完备,产品体验从第一眼看过去就很棒,可优化的地方屈指可数。
  • 与第一种情况完全相反。

那么我们从第二种比较糟糕的情况开始总结该如何从1过渡到2,做一个设计与用户体验的提升。

一、基础问题梳理

是不是时常有面试官喜欢问这样的问题:你觉得我们的 APP 有什么可以优化的地方吗?

1. 一致性原则

一致性原则是雅各布 ? 尼尔森的十大交互设计原则之一,在实际项目实践中有很强的指导性作用。

因为各式各样的原因,一些产品的视觉设计没有规范,由不同批次的设计师完成,导致 APP 中许多界面的视觉风格都不一致。

一致性体现的方面

  • 控件结构:比如卡片底部操作区展示(点赞/评论/分享的固定控件样式)的统一。
  • 视觉规范:主色调与其他辅色在各界面色值的统一,文字样式与主体文字大小的统一。
  • 操作反馈:用户在使用 APP 同功能时的操作统一,并得到统一的反馈,比如点击弹窗关闭按钮,会有统一的下滑消失反馈。

一致性的重要性

因为对于用户来说,同样的控件样式/操作反馈都触发了相同的事情,而不同的界面视觉语言打乱了用户的界面使用惯性, 给产品易用性打了折扣。

同时,视觉上的不规范也仅对设计团队的后续版本迭代视觉规范管理有影响,对产品的品牌性也造成了一定影响,给产品带来一种不专业感。

虽然产品经理有时并不在意?APP 界面的不一致,但作为 UI 设计师应该以理服人推进到底 。

2. 视觉品牌性

通常我们给 UI 设计的作用定义都是通过视觉的方式优化产品体验传达品牌概念。APP 产品不同于我们常见的线下产品,用户对于它的感受几乎完全的依赖于线上界面中所提供的信息。因此除了本身的产品 LOGO 之外,整个 APP 的 UI 都在传达给用户这个产品的定位与品牌调性。

因此如果一个 APP 做出来毫无自己的调性,和 N 种竞品像素级类似,那么产品本身也就很难从众多的山寨中脱引而出。

3. 用户体验漏洞

我们在这里暂时不说用户体验提升,先单纯说缺漏。大家可能觉得只有刚刚做完1.0版本的 APP 会有这样的缺漏,成熟的 APP 就不会有。

这里举个成熟的工具型 APP 的例子——墨迹天气。

拍照/选择图片部分调用了 iOS 原生控件,很显然这个部分算是一个设计细节缺漏吧。

另外我很想知道这个页面右上角图标点开后会是个大概什么内容的界面(虽然 APP 第一次使用时有个黄条提示)。

最后我们回到首页,让我有点惊讶的是 APP 第一次使用时没有提示屏幕可以下滑看未来5天的天气详情。

当然也许墨迹天气有它的数据考量,我们只能单纯从视觉用户体验层面稍加分析。

大家应该都发现在这部分我没有提大框架上的界面设计优化,因为其实在没有真正去产品经理手里拿到 APP 各项具体数据,了解他们针对的实际用户群体和目前发展方向之前,APP 的设计优化也都只是停留在浅层的视觉优化层面上的。所以真正的设计提升优化还是得从了解产品本身开始。

二、如何做设计提升

你的设计从「能用」到「好用」有多远的距离?

1. 学会包装

这里说的包装,当然不是指你把作品用各种 mock up 和排版包装成 blingbling 的展示图,扔到站酷上就表示你包装成功了。

也有同学在站酷私信我,问面试总失败的原因,看过 TA 的作品之后就发现一个很严重的问题,作品不落地的同时过多的把作品停留在视觉包装上而非内容的包装。

如果你是一名在公司上班的 UI 设计师,那么在工作中很现实的问题就在于没有人会轻易同意你的设计稿(除非你是业界公认的大咖),从产品经理到设计经理甚至开发都可能从配色到风格开始 diss 你的设计稿,那么如何从一开始就争取到主动权呢?

用完整思考路径代替结果

无论是配色还是图标风格,相信都会有你自己的思考过程,把这些加上「证据」(竞品或大咖 APP 呈现的效果等)做成完成的分析,最后用一个完整的分析代替单纯的一页设计稿。

就算还会有不同的声音,但至少会让自己在前期站住脚,拿到主动权,并且很有说服力。

这里给大家放一个之前帮公司做的基金详情页优化的一个思考路径做参考吧。

△ 基金详情页在 UX 改版后点击率提升了3个百分点

提供更多解决方案

正如我们《超全面!从0到1正确开启UX项目的方式》文章中说的,设计师是解决问题的,那么在发现问题到解决的过程中,单一丢出一个结果也是无法服众的。

建议通过思考做出多种方案(不需要过多),这里也拿一个例子和大家分享。

2. 设计移情

这个概念也是听过一次腾讯的大咖设计师分享之后知道的概念,当时感觉受益匪浅。

简化来说就是学会考虑用户使用场景,站在用户角度映射使用场景,考虑设计可能,把设计从能用变为好用。下面还是用例子说话。

△ 这是腾讯大咖分享的一款手机购票的 APP 改版前,看上去也似乎可以正常使用

△ 这是 APP 优化后的最终效果

个人觉得这是一个特别完美的例子,前后对比我们可以很明显的看出,这不单单是一个视觉优化的过程,更多在于信息的整合与收纳。

同时模拟了用户的使用情境,以模拟实物票的样式表达线上的出票信息,使用不同地铁线分类地铁站代替难以点击的字母分类(虽然个人觉得这块还可以再优化,目前来看也少了搜索功能)。

这些改动都极大的提升了用户的使用效率,真正从 UI 层面上贴近了地铁购票 APP 的核心关键:便捷购票。

3. 培养产品思维

数据化思维

很多好学的设计师注重设计创造力与交互理论的积累,容易忽略了数据分析的重要性。这个大概也就需要在实际工作项目中去体会了。

在整个项目进行中,数据分析基本可以分为:

  • 前期调研数据
  • 中期测试数据
  • 后期结果数据

这里举一个还在猎豹做清理大师大改版时候,遇到的因为数据改变设计的例子。

因为中期测试一部分数据,用户反馈首页改版后显得刺眼(因为 APP 长年未做大改版,旧版主色较深),因此重新调整了改版的主色,使用了明度更贴近原版的蓝色。

营销思维

在关注数据后,我们就可以有所依据的去设计,不是如何设计好看,而是如何设计用户更容易买单。最近有篇文章很流行《这5个丑出新高度的网站,为什么那么多人夸》,让我想起之前 Expedia 特地为了日本市场重新做了一个「接地气「的销售网站。

△ 左边为美国的 Expedia ,右边为日本的 Expedia. 2014

日本是一个极度重视信用度的国家,美国版的 Expedia 对大多数日本人来说内容过少,并没有足够的信任感。

这个例子其实就告诉我们所有的 UI 设计都应该是基于实际数据的,而不是设计师的审美或者某个国外书籍里告诉你的某个交互定律。设计感与定律是参考,但决定一切的是产品的发展策略与实际数据。不同国家不同国情,并不一定适用,就比如欧美人的阅读习惯和国人就不同。

三、被误解的交互动效

动效在很多人眼里是和辅助一样的存在,真的这么鸡肋吗?

1. 交互动效的用途区分

现在 AP P中可以用到的交互动效按用途分,可以分为几个类型:

反馈型交互动效

在使用某个功能后,反馈用户当前 APP 功能状态切换的交互动效。涵盖的范围也非常广,比如下拉 loading、tabbar 上的微动效等。

功能型交互动效

特定工具类、直播类等产品所需求的元素动效。比如直播时飞过的飞机、清理应用时转动的风扇。这类动效通过拟物化设计完成特定的重要功能,增强了与用户的互动,是特点功能的最佳展现方式。

过渡型交互动效

在页面跳转与功能衔接中起到重要作用的交互动效。好的过渡动效避免了界面快速切换时给用户带来的迷失,给人以极佳的使用舒适感。

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

  • 用Airbnb 的产品,帮你快速理解尼尔森10大可用性原则!
  • 腾讯CDC:设计师必须知道的16句名言
  • 设计师想自我提升?高手给你3个方向!
  • 如何做好标签系统设计?来看我的实践过程!
  • 超全面总结!有可以提升用户设计体验的方法?
  • 科普手册!值得新手收藏阅读的界面设计原则
  • 学会这4个心理学小知识,你的设计会更有说服力!
  • 网易设计师:做好文字排版的小技巧
  • 学习按钮设计,看这篇就够了!
  • 想引导用户?来学习UX中的承诺和行为一致性原则

相关文章

  • 2018-08-23新姿势!用自然灵活的波纹曲线来柔化你的设计
  • 2017-08-06关于HTML面试题全部汇总
  • 2018-08-23Google对话式交互规范指南(九):对话中不存在“错误”
  • 2017-08-06组件化的前端开发流程详细说明
  • 2018-08-23AI教程!教你制作超唯美的游戏场景
  • 2017-08-06使用字符代替圆角尖角研究心得分享
  • 2018-08-23我们邀请了搜狐的UE设计组长,教你应聘UE 设计师!
  • 2018-08-23用腾讯企鹅电竞的案例告诉你完整的品牌设计该怎么做
  • 2018-08-23产品迭代中,如何做到视觉设计的继承和升级
  • 2018-08-23新手进阶手册!成为交互设计师两年后的经验总结

文章分类

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

最近更新的内容

    • UI实战教程!从零开始做App 系列之项目立项+预估时间篇
    • 让设计更高效!正式为大家安利这个好用的「8点栅格」
    • 网页色彩对比与调和技巧分享
    • 网页文字设计应该像聪明女孩穿衣服
    • 杜蕾斯让人高潮迭起的海报,你也能快速做出来!
    • 网易严选设计师:如何提高产品思维?
    • 世界顶级的设计师就能一稿过么?
    • 学会这5个法则,轻松掌握格式塔理论!
    • 内部教程!超详细的支付宝设计规范之配色篇
    • 为什么你的动效特别酷炫,但一直不能落地?(附解决思路)

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

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