web端为例:我的交互设计细节手册

2019-09-1309:26:10交互设计Comments4,327 views字数 3857阅读模式

我在实际交互设计中的所遇见的细节问题,来源于在绘制产品原型图阶段对于设计细节的思考,类属于产品框架层的部分内容,不涉及产品范围层、结构层的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

一、loding加载页面问题——栅栏式加载还是焦点式加载

1.1 栅栏式加载

展示页面的主要模块区域,模块区域内的信息内容呈现出加载样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

1.2 焦点式加载

页面加载时只显示底图,加载完毕后才出现展示信息,加载时的loding图标可能就是一个圆圈也可以是产品icon,但这种形式统一叫做焦点式加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

对比而言,栅栏式加载更适合运用在区块固定的页面,而且是加载后需要有对应的信息展示,如果没有信息展示就会造成用户的心理落差感,从而降低用户体验,像豆瓣app就大量运用栅栏式加载。而焦点式加载则运用范围更大,无论区块是否固定,都可以使用焦点式加载,但视觉体验上不如栅栏式加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

二、文字按钮何时需要加下划线

文字按钮一般来讲有两种情况,带下划线或者没有下划线的(还有一种是鼠标移上去时出现下滑线,这种也属于前者),这两种文字按钮怎么运用呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

2.1 带下划线的文字按钮

这种按钮点击后的触发效果应该是跳转到一个新的链接地址或者打开新的页面,如点击一个用户名,跳转到此用户的用户主页。还有一种情况是,在一个长文本里将一个文字按钮带上下划线,目的是明确的告知用户这里是可以被点击的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

2.2 普通文字按钮

一般的文字按钮是不带下划线的,点击后的触发效果可能是触发弹窗,弹出浮层,切换tab等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

三、下拉按钮和下拉复合按钮的使用

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

如上图左侧为下拉按钮,右侧为下拉复合按钮,左侧下拉按钮点击展开下拉框,框中每个操作都是平级关系,而右侧下拉复合按钮其实是由一个主按钮和一个下拉按钮组成。主按钮一般是主要操作,而下拉框内的为次要操作,但主要操作和次要操作有着密切关系。例如下图Facebook主页网页端的查看活动日志按钮,次级操作就是时间线设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

四、下拉导航中的一级导航是否可点击问题

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

在正常操作过程中,带有下拉次级导航的上一级导航是不能被点击的,这里不能被点击的意思是使用点击操作不会触发任何效果,如上图显示下拉次级导航是hover效果并不是点击效果,这也与很多展开操作道理相同(如下图)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

五、固定数量图标展示的两种方式

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

如果在一个板块或者一个条目中,有固定数目的icon需要展示,一般会有两种方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

 5.1 正负展示

正负展示(如下图)即将所有可能出现的图标都展示出来,但是有数据/权限的图标高亮/全彩显示,对于没有数据/权限的图标置灰显示。这种展示方式优点是对于用户来说可以很快的认知数据/权限的有无,即使在数据/权限全空的情况下也不会影响视觉效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

因此这种展示方式一般应用在对于有固定区域展示这些图标的情况下,不会因为区域位置限制图标数量。特别是在所有图标都是没有数据/权限的情况而影响板块或者区域面积,星级评分就是正负展示的常见例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

5.2 省略展示

省略显示(如下图)即有数据/权限的就显示出来,反之则不显示。这种展示方式优点在于在合理利用有限的展示区域,缺点是在没有数据/权限的场景下,需要改变展示区域或者使用其他方式说明无数据/权限情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

六、必填情况下触发验证的方式

在页面/弹窗中,所有有输入项都是必填项,此时何时校验输入信息?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

一般分为两种情况:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

  • 一种是默认情况下输入项为空,则是先点击保存/确定/下一步等触发器然后触发校验操作,如下图左侧。
  • 第二种,是默认情况下输入项不为空,例如编辑某些设置,则在输入框失去焦点后即校验,例如下图右侧所示,将原来有内容的输入框内容清空,失去焦点后,立即校验。

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

七、关于三种提示的不同使用场景

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

如上图,目前主要有三种页面提示,提示的内容包括成功、警告和错误等反馈信息,这里以成功提示为例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

 7.1 全局提示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

大家最常见的是全局提示,这种提示一般为操作反馈提示,具有及时性、轻量化的特点,一般运用在用户在进行完某操作后,对操作结果的反馈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

7.2 系统通知提示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

然后是系统通知提示,这种提示一般是由系统推送,具有不定时性,而且说明的文案一般较复杂,或者带有指示用户进行下一步操作的触发点,一般运用在一些特殊情况的通知,比如:邮件发送出去后被退回和系统需要通知用户的内容等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

7.3 警告提示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

最后是警告提示,这种提示使用场景一般是比较重要的提示,需要用户阅读确认,点击关闭后才自动消失。这种提示可以不以全局浮窗的形式出现,也可以单独出现在页面某个操作项附近,例如你对列表项进行修改,此时在列表项的最上方出现此提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

八、“开关”控件的延展设计

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

通过调研我们发现其实很多用户对于现在通用的开关按钮的认知状态并不明确,特别是一些智能手机的初级用户,他们点击这个按钮,并不清楚何时是打开何时是关闭。而这些人在使用实际生活中的开关时从来不会有这种困扰,那是因为实际生活中会有及时的指示反馈给他们,就像按一下开关,灯立刻就亮,大脑立刻收到反馈:我把开关打开了!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

所以,我们也可以利用这种生活反馈,在控件开关上加入这种反馈因素(如上图),把开关打开,左边的小灯即点亮,把开关关闭,小灯即关闭置灰。等于给这个操作增加一个及时反馈,提升了用户体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

以上就是全部内容,所列的具体案例都是来自于我实际工作中的所遇到的问题,希望能给你带来一定的设计启发,也希望被当下大量理论原则、炫酷动效的“浮躁”设计知识围攻下,大家更加关注实际工作中设计上的细节,这才是提升用户体验的关键!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

本文案例参考了“Ant design”、“盈店通平台”部分页面和控件,如涉及侵权请联系作者删除。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

一、关于页面提示的设计

1.1 无提示状态

对于一些简单且操作后状态变化明显的操作,不需要进行任何提示,防止打断用户,例如打开关闭开关、点赞等,这些操作通过页面上元素的状态变化已经明显的反馈给用户操作结果,就不需要再进行任何提示(如下图)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

1.2 全局提示状态

全局提示一般是对操作结果的反馈,但不需要用户进行二次确定或者下一步的引导,且操作的结果在页面表现上较弱,这时候就需要全局提示用户操作的结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

例如联系人分配成功,因为分配后,联系人卡片上的变化极小,仅仅是归属人的字段发生改变,用户不易感知到分配是否成功,这时候需要进行全局提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

1.3 弹窗提示

弹窗提示的使用主要是以下三个场景:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

(1)对于部分毁灭性或者不可逆操作需要用户进行二次确认(如下图一)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

(2)部分需要进行引导的反馈都需要是用弹窗提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

例如:下图二消息接收设置这里,如果没有完善店铺的资料,将接收不到消息,于是点击消息开关需要提示用户先去完善店铺资料,这里就需要使用弹窗提示,引导用户去完善店铺资料。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

(3)重要信息需要用户确认的,或者信息内容过多,需要花费用户一定时间去阅读的(如下图三)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

1.4 固定导航提示

固定导航提示主要分为两种:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

  1. 可关闭的式的导航固定导航提示。一般用于与该页面业务有关的说明或者需要提醒用户的提示;
  2. 不可关闭的提示。这种提示的业务层面级别高于上一种提示,必须让用户知道,固定导航的提示一般在登陆系统后才出现。

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

1.5 侧边系统提示

侧边系统提示一般是系统类的提示,或者跨功能的提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

比如来了一封新的邮件或者系统程序出现了某种故障需要告知用户,往往是被动的及时反馈的提示(与主动及时操作反馈不是一个概念),这类通知对于页面的一般在页面的右侧出现,且必须会自动消失或者可以手动关闭。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

二、对于图片展示规则的设计

2.1 社交媒体类平台

对于社媒类平台,图片都是由个人进行上传,各种图片尺寸、质量都参差不齐,而为了优化体验和保持美观,一般会按照上下左右居中截取的方式把图片展示出来(规则为上下左右居中截取,小图会自动放大适配长宽去截取,如新浪微博)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

2.2 工具类平台

对于工具类平台,会按照长宽缩略展示图片全部概况(图片同比缩放展示),因为在工具平台里主要满足图片使用的场景,如淘宝店铺里上传产品详情图,这时用户更需要了解图片的基本概览。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

三、是否需要新开页面的规则

在实际设计工作中,我们经常会遇到这样的问题,点击某个按钮是新开页面还是本页跳转。当然这里面牵扯到的原因会有很多,比如阿里千牛后台,点击每个一级二级tab都会在一个新的页面打开,这是因为深层次的商业原因,现在仅站在设计的角度上来分析这个问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

3.1 导航层级之间的切换

在一个后台系统中,在导航切换时,是不用新建页面的,无论是一级二级三级的导航都是在原页跳转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

3.2 跳转链接

如果点击的是一个外网链接,则建议新建一个页面进行展示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

3.3 查看详情

查看详情是一个常见的操作场景,目前大多数平台是新建页面查看,但我建议在后台系统中可以用模态的形式展示详情,这样做的好处主要在于可以在查看详情的同时对比其他同类数据,当然也可以新开页面去查看详情,但记住不要在详情页里放置删除此单元的按钮,因为这样会造成数据不同步的bug。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

四、用列表还是用卡片

在设计一类信息区块时,通常有两种比较常用的信息展示形式,卡片和列表。设计师也往往会纠结使用那种展示形式,这里有个诀窍可以分享给大家——如果信息数量较多,且所有信息字段展示数量一致用卡片,其余情况都用列表。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

下图就是一个典型案例,由于展示字段数量不一致,且还有更多的拓展字段,导致卡片上的操作都不一致,且查看卡片详情时很尴尬——因为有的卡片字段已经全部展示出来了,这时查看详情没有意义,但有些卡片字段被隐藏了,就需要点击详情去查看或者展开卡片查看,导致页面交互变得十分复杂。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

而反观左侧列表式的方式,拓展性良好,无论有多少字段需要展示都可以向下延展展示,即使在同等高度上展示的区块数量没有右侧卡片多,但对于信息完整度则好多了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

web端为例:我的交互设计细节手册文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/16403.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/jiaohu/16403.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定