用经典的设计原则,深度解析闲鱼的用户体验设计

2021-04-19 00:00 6212 浏览

今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼,今天先讲两个部分:视觉和交互的用户体验。

其实主要是因为用户体验分为这个几个方面:

  1. 视觉的感官体验,给用户带来的是视觉表现层的体验,所以我们把产品视觉设计四大原则来对照用户的感官体验。
  2. 交互的用户体验,也就是产品设计中给用户使用过程产生交互互动,比如点击效果、输入、弹出、切换等等。所以我们用交互设计尼尔森十大可用性原则来对照交互的用户体验。
  3. 情感用户体验,这是由外而内的心理作用,给用户带来心理认同,增加满足和愉悦感。所以我们用情感化设计原则来对照我们的情感用户体验。

产品视觉设计四大原则

在产品视觉的设计中我们可以用四大原则来满足用户感官体验的优化,主要是:对齐;重复;亲密;对比。

1. 对齐

页面信息对齐,左对齐、右对齐、居中对齐,保持页面视觉统一

移动端的阅读习惯是从左往右的,因此我们也是遵循向左对齐,或者尾部信息向右对齐。居中对齐在整体信息排列中较少使用,除非是比较正规、传统的产品设计使用居中对齐的大关系。而在小细节的对齐中居中对齐应对logo/头像等也有使用。从开发的成本上,对齐的设计也是方便了他们的开发。

举例子

闲鱼消息页面顶部功能区域采用居中对齐方式,比较正式一些,突出显示引导用户点击;个人头像和消息左对齐显示,发布图片右对齐显示。

闲鱼我的页面,功能图标和信息左对齐显示,消息和进入按钮右对齐显示;赞赏、关注、粉丝居中显示。

重点突出的信息,居中显示,引导用户浏览路径。常规列表左对齐、右对齐显示,满足用户浏览习惯,提升用户体验。

2. 重复

重复比较简单的理解为一致性,颜色、形状、材质、空间关系、线宽、材质、空间等等。我们常说视觉规范的一致性就是这样,保持这些单元的统一,贯穿始终这样我们的页面排版才会整体、产品设计才会整体。

举例子

闲鱼消息页面,头部功能区域圆形图标重复,字体重复。消息列表头像、名称、消息、图片重复,保持一致性,和统一。

首页部分功能区域图标重复、风格重复一致。活动区域标题和图片保持重复性原则。在类别筛选部分,每个类别瀑布流展现,宫格重复,保证页面筛选一致性。

3. 亲密

如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉整体。因此我们在设计时候往往需要将信息整合把有亲密组织关系的内容整合一起。减少了混乱不堪的信息内容排列,整合框架,这也是方便用户浏览,满足了易读性、易用性。个人观点(在产品设计中亲密度的把控,要多学理论、然后理论实践结合,多多体证,才能更好的满足用户体验)

举例子

闲鱼首页分为4大部分,功能区域、活动区域、闲置区域、分类区域,每个区域相互亲密,形成一个整体,通过间距分割,满足用户的易读性,降低学习记忆负担。

消息页面就更明显了,主要分为功能操作区域和消息列表区域,每个区域相互亲密通过间隔和表现形式区分。(这类需求就没有基本需求那样必备,是产品中期望需求体验越多越好,用户越满意,反之用户满意度也会下降)。

4. 对比

对比的通俗来说就是要有对比性、不同点,就是要避免页面上的元素太过相似,这样那既要避免了同质化也强调了差异化的节奏感,突出重点信息传递。当然这个度需要我们在日常工作中多多积累。比较常见的对比有方向对比、信息对比、颜色对比、对称对比、比例对比等等。

举例子

闲鱼聊天页面,双方消息颜色对比,色彩的对比更加强的双方聊天的视觉效果,对比也是比较明显。

闲鱼的兑换详情页面,文字和信息的对比,突出展示内容信息,让用户一目了然区分内容和图片,多重信息对比,也增加了信息获取的质量,提升用户体验。

产品设计的四大原则是一位美国设计师Robin Williams归纳整理的,文章中也有许多排版中案例说明,如果想进一步了解排版设计四大原则,可以看看这本书《写给大家看的设计书》。

交互设计十大可用性原则

尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。尼尔森的十大可用性原则是尼尔森博士分析了两百多个可用性问题而提炼出的十项通用型原则。它是产品设计与用户体验设计的重要参考标准,值得深入研究与运用。

百度百科

这是一套实用性的原则,无论是产品开发还是落地,都能够很好的帮助我们提升用户体验和设计质量。以人为本,以用户为中心,让我们设计师能够很好的明确设计方向和用户需求的科学方法论。

1. 状态可见性原则

解读状态可见原则,我们将会从实际的案例中挑选,结合原则进行说明,方便大家更好的理解和把控状态可见性原则。

让用户知道系统在做什么

就是在产品设计过程中,向用户展示系统进行的操作状态。

举个例子

比如当页面刷新过程中,告知用户加载进度。当系统进行判断操作过程中告知用户当前操作状态。当用户清除缓存时告知用户产品怎么清除缓存。等等

让用户知道自己处于系统的什么位置

其实就是我是在哪里呀,我要去哪呀,从哪去呀,让用户一目了然,不用太多学习成本。这是在页面元素中的核心,一旦用户不知道自己处于系统什么位置,就会容易操作失误或者放弃产品。失去了设计为用户服务的本质。

举个例子

在闲鱼页面我们系统的标题栏、TAB栏的提示贯穿整体,用户知道我们所处的什么页面。比如认证提示,每一步告知用户进行到哪里了。

让用户知道系统做了什么

让用户知道产品做了什么,明确了知道下一步如何操作。

举个例子

在闲鱼登录时当你输入密码错误等,系统提示密码输入错误,可以重新输入。

当你退出登录,系统提示保存了当前数据,下次可继续登录。

当你清除缓存时,产品展示已清除置灰,数量变化等。

让用户知道自己在做什么

当用户进行操作时,产品及时反馈,用户做了什么。

举个例子

在闲鱼中最简单的例子就是当我们聊天时候,我们输入信息发送,显示在我们跟对方的聊天页面中。

分享:
相关内容
  • 保障效率!如何做好跨团队交互设计协同?
    近期我被临时抽调进兄弟公司的大型紧急项目中去协助交互设计半个多月,对跨团队交互设计协同颇有感触也有了些许思考。一谈到团队协同,大家首先联想到的大概就是碰头会、晨会、日报这些协同中常见的大小事项。确实,在高压的项目背景下多人协同的沟通会比往日要求更加频繁和密切,但仅仅增强沟通对于跨团队协同来说是远远不够的。那么,实现高效的跨团队交互
  • 如何从零开始设计海报?用一个完整案例教会你
    海报的创意与玩法,不只限于排版,优秀的海报可以把作品的高度拔升好几个层级,省去了大量繁琐文案的赘述,让人一目了然,这样的作品既不乏深度,也不失美感。接下来我以近年的一些工作经验来给大家分享关于海报设计的经验。立意一个作品的立意是个重点问题 ,其重要性关乎到后期作品的效果,立意一旦有些偏差、或者并不符合主题,那就跟写了一篇跑题作文一样
  • 用户不信任你做的产品/界面?不如试试这5招
    什么是产品的信任感??指:基于产品为用户提供可靠服务、价值依赖的一种情感体验。这种体验不仅影响着用户黏性的强弱、业务目标的实现,也影响着不同生命周期下给产品带来的价值。如图:而在产品与用户间建立信任感的过程中,我惊奇地发现有 3 个因素贯穿始终:理念 > 内容 > 表现。基于什么样的理念,向用户传递什么内容,并且怎么表现。所以,未来 3 篇文章主
  • 如何从零开始设计海报?用一个完整案例教会你!
    海报的创意与玩法,不只限于排版,优秀的海报可以把作品的高度拔升好几个层级,省去了大量繁琐文案的赘述,让人一目了然,这样的作品既不乏深度,也不失美感。接下来我以近年的一些工作经验来给大家分享关于海报设计的经验。立意一个作品的立意是个重点问题 ,其重要性关乎到后期作品的效果,立意一旦有些偏差、或者并不符合主题,那就跟写了一篇跑题作文一样
  • Mac 视觉史 vol.2:90年代失败操作系统大赏
    这一章所涉及到的项目,几乎可以组成一个 大型的「90年代失败操作系统大赏」,在主要由成功者们所构成的故事、新闻乃至与传说当中,这些失败的故事和项目,被提及的次数很少。但是对于 Mac OS X 而言,这里的每一次作死和失败都充满了意义。对于绝大多数的用户而言,Mac OS X 是21世纪初顶尖设计的范式,在今天,它是最优秀操作系统的当中的典型。但是仔细想想看:从 S
相关推荐
图文专题
热门内容
  • 想做好线下物料?收了这份平面设计师必修的基础印刷知识
    如果一个设计师对印刷流程和工艺不够了解,那么作品落地时必将大打折扣,所以了解印刷技术方面的基础知识,是每个平面设计师的必修课。平版印刷平版印刷是将油墨印至橡皮滚筒,再藉由压力滚筒印刷至纸上。这是多种印刷方式中最常见的一种,印刷质量较好,图文精细、层次丰富,图像色彩的还原性好,大部分画册、海报、杂志、书刊、包装等都是用单张纸平版胶印
  • 如何设计小程序?来看这份超全面的指南!
    前言最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。小程序的发展史2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。2017 年 1 月 9 日微信小程序平台正式发布,在业界
  • 用经典的设计原则,深度解析闲鱼的用户体验设计
    今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼,今天先讲两个部分:视觉和交互的用户体验。其实主要是因为用户体验分为这个几个方面:视觉的感官体验,给用户带来的是视觉表现层的体验,所以我们把产品视觉设计四大原则来对照用户的感官体验。交互的用户体验,也就是产品设计中给用户
  • 资深UI设计师搞定输入框和表单的20个秘诀
    编者按:这篇文章来自资深设计师Taras Bakusevych,长期从事金融和企业类数字产品的设计,在表单设计领域造诣精深。这篇文章梳理了他总结的 20 条表单和输入框的设计经验,实用性极强。表单是 UI 界面中最为常见的元素,它通常是用来搜集和呈现一些数据、信息和特定的字段。在现实世界中,印刷的表格存在的时间更为久远,它们身上有很多设计可以作为重要的参考,帮助
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
联系方式
  • 400-1234-5678
  • 13333333333
  • test#qq.com