搜索

热搜: 活动 交友 discuz

在线
客服

迪恩在线客服服务时间: 9:00-24:00

选择下列客服马上在线沟通:

快速
发帖

客服
热线

15562103797
7*24小时客服服务热线

关注
微信

关注微信二维码
顶部
Discuz! Board 门户 资讯 查看内容
0

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

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

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

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

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

产品视觉设计四大原则

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

1. 对齐

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

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

举例子

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

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

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

2. 重复

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

举例子

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

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

3. 亲密

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

举例子

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

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

4. 对比

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

举例子

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

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

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

交互设计十大可用性原则

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

百度百科

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

1. 状态可见性原则

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

让用户知道系统在做什么

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

举个例子

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

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

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

举个例子

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

让用户知道系统做了什么

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

举个例子

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

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

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

让用户知道自己在做什么

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

举个例子

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

新手提示

作为我们的新用户是承载整个产品流量的口子,新手的提示关系着我们运营中的留存,这个方面做好,也是对运营业务链路有着很大的帮助。

举个例子

在新手提示中,有一个设计要点就是可以采用趣味性设计,更好的与用户情感交流。

2. 环境贴切原则

简单的理解就是产品设计要跟现实相互结合,产品设计要符合用户认知,不能做个我认为用户是这样理解的产品哈哈哈。

图片、图标与现实相互结合

符合用户对描述图标功能的认证

举个例子

在闲鱼首页功能页面,二手手机图标采用现实生活手机作为造型,游戏交易采用游戏手柄作为造型,二手图书采用图书翻页形式作为造型,珠宝文玩采用珠宝玉器作为造型,符合用户在现实生活中熟悉的东西,满足认知,有良好体验。

文字表达满足用户认知

符合用户自己现实生活的认证场景

举个例子

在鱼塘页面,文艺书画、乐器等兴趣鱼塘,我们叫品质文青聚集地,文艺青年在当下比较火的网络名词,喜欢文化艺术的青年哈哈。符合用户年龄人群的环境认知。

3. 撤销重做原则

这个比较好理解就是产品设计满足撤销重做原则,防止用户出现后悔操作或者误操作等等,满足用户体验逆向操作

撤销

浏览操作可以撤销到前一步

举个例子

闲鱼页面常见的返回操作就是撤销的一个例子

重做

就是用户撤销上一步,又反悔了要到之前哪一步;或者用户操作完成发布又反悔了重新发布,满足用户充足的反悔余地,给予用户对产品的信心和控制感。

举个例子

闲鱼发布闲置后后悔了要重新发布,可以在管理页面进行编辑或者删除重发操作。

4. 一致性原则

一致性原则主要包含颜色、字体、图标、图片、功能、提示等等全局的一致性,给用户带来全局一致的舒适体验。由于一致性包含内容较多,所以下面就举几个主要例子来进行说明一致性原则。

颜色一致性

颜色一致性是全局操作的重要一点,也是符合品牌基因贯通产品的重要体现。


鲜花

握手

雷人

路过

鸡蛋

说点什么...

已有0条评论

最新评论...

本文作者
2020-5-22 22:42
  • 1
    粉丝
  • 526
    阅读
  • 0
    回复
资讯幻灯片
热门评论
热门专题
排行榜

Design

教程灵感就看DEAN

优质教程每日更新

Dean17.com旗下教程网站

  • 官网微信

    每天官微五分钟一年萌新变大神

    扫码关注
  • 新浪微博

    每天50篇设计干货30万设计师关注!

    访问新浪微博
  • 官方客服
765W

Design新媒体等你来关注

Copyright   ©2015-2016  DiscuzXPowered by©Discuz!技术支持:迪恩网络    ( 鲁ICP备 7210185123111号 )