首页

用户体验设计指南 - SUS系统可用性量表

涛涛

怎样迅速感知自己产品的用户体验好不好呢?来看看用户体验设计指南之SUS系统可用性量表,用过都说好呦~

1. 什么是SUS ?


SUS 全称 System Usability Scale ,系统可用性量表。SUS最初是Brooke于1986年编制,可以科学地量化用户体验,用于完成一系列任务场景后,对产品或系统整体宏观的感知可用性测量。



翻译过后可以得到下面的中文表,参与者在使用产品后对每个题目下面打钩来对产品进行5点评分。(小伙伴们可自行保存)



2. 问题组成


SUS提供整体可用性评估度量,由10个题目组成,奇数项为正面陈述,偶数项为反面陈述。


第4,5,10三项构成的子量表为“有效性”(Effectiveness)&“易学性”(Learnability) ;第2,3,7,8四项构成的子量表为“使用效率”(Use Efficiency)&“可用性”(Usability);第1,6,9三项构成子量表“满意度”(Satisfaction)。



3. 使用场景


SUS适用范围广泛,产品新旧版本迭代之间对比,同类型竞品之间对比,同一产品不同终端之间对比均可使用。可采用线上线下问卷调研的方式,简单高效的采集真实用户反馈。避免在初期过早的关注细节。



4. 如何使用


当收集好用户问卷反馈过后,步骤如下:


1. 对于奇数序号的问题,将其得分减1;(比如第1题分数为4,得分为4-1=3分)

2. 对于偶数序号的问题,将其得分被5减去;(比如第2题分数为3,得分为5-3=2分)

3. 将所有问题最后的得分加在一起,然后乘以2.5;(每个题目的得分范围记为0~4,最大值为40,SUS可用性得分的范围在0~100,换算后乘以2.5)

4. 计算出的结果即为产品的SUS可用性得分。



Tips 注意事项:

1. 填写之前不要进行总结或讨论;

2. 应当要求用户快速完成各个题目,不要过多思考;

3. 第二题和第六题对于参与者可能难以理解,需要解释清楚;

4. 如果用户因为某些原因无法完成其中某个题目,就视为用户在该题上选择了中间值。


SUS分数等级与百分等级的区别:



我将其翻译过后得到中文表,可以大体上感知得出的SUS分数对应的用户可接受范围。



更加细化的SUS用户感知,可参照SUS分数曲线分级范围表:


注意到这里SUS分数等级与百分等级的区别。对照SUS分数曲线分级范围表,如果你的SUS分数为68,说明你的产品比市面上50%的产品可用性要好。也就是说这个产品的用户体验算是合格了,表明需要进行较小的改进。50%中值点对应SUS分数68。((59-41)/ (71-65)= 3  故中值点为65+10/3≈68 ,68分是均值,因此对应百分比是50%。)



5. SUS的优点


1. 量表公开免费,题目简单,只需参与者打分,实施便捷,操作简单;

2. 适用范围广泛,产品初期测试验证,竞品分析,新旧版本对比等等;

3. 研究证明SUS在样本量有限时,可以最快达到效果,可信度系数高;

4. 快速宏观有效区分可用系统(产品)和不可用系统(产品),避免在初期过早的关注细节;

5. 当团队内产生分歧时,SUS让更多的人员参与代替少数意见领袖说了算的形式,定量不追求定性。

6. 小样本量时依然呈现高度的内部一致性,产生真实可靠的反馈结果。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:JZDESIGH

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


引入echars5.0报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

前端达人

问题

引入 echars 5.0 遇到报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

解决

引入方式改为

import * as echarts from 'echarts'; // 或 const echarts = require('echarts'); 
            
  • 1
  • 2
  • 3



简单粗暴 快速解决

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


CSS3 元素转圈动画 (元素旋转动画)

前端达人

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>
复制代码

 

分类: CSS




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

CSS3 元素转圈动画 (元素旋转动画)

前端达人

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>
复制代码

 

分类: CSS




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

苹果Google都在用的设计趋势,简直太绚丽了!

seo达人

图片

 

什么是色彩叠加?

图片

色彩叠加这种风格我们经常可以在很多大厂设计中看到。从它的名字我们就知道这是一种通过颜色混合的一种表现手法。色彩叠加在色彩构成学上叫色料混合, 也叫第二混合。两种或者多种颜色混合后所产生的新颜色,混合的色彩不但色相发生变化,明度和纯度都会产生变化。它是多个颜色通过不同模式进行混合,可以得到不同的颜色,通过色彩模式叠加的运用,让它的细节层次更丰富,色彩的饱和度也高。下面我来解刨一下它的特点,你也可以通过这些特点,轻松掌握这个设计技法哦!

 

 色彩叠加特点一:邻近/互补色搭配 

图片

在色相环上采用邻近色搭配,颜色多以明亮的高饱和度为主,使得页面更具时尚活泼感。

图片

邻近色是色环相邻的两种颜色,色相在60度以内,这样的颜色搭配色彩过度比较平和也会显得页面有层次。互补色是色环相对立的颜色,色相相距180度,这样的颜色搭配对比会非常强烈,视觉效果会鲜明。
 

邻近/互补色在网页的运用

图片

在视觉表现上运用互补色对比,搭配柔和的渐变过渡,给人一种年轻有活力的视觉感受。
 

邻近色在APP中的运用

图片

明亮的邻近色搭配作为页面的背景、卡片背景设计,页面年轻活泼,通过色彩的叠加,有空间感。

 

色彩叠加特点二:混合的质感 

图片

搭配混合模式的运用,营造一种空间感,给页面形成不一样的质感,通过明亮、色相形成一种空间感、层次感、通透,形成不一样的感觉。

 

混合质感图标中的运用

图片

邻近色色彩搭配作为背景,搭配简单的图形和色彩混合和不透明度运用,整个图形给人一种多彩、通透的视觉感受。

 

色彩叠加特点三:简单的几何图形 

图片通过简单的几何图形,主要是圆形、正方形、三角形等;加上混合模式的质感,给人一种高级感。加上透明度、叠加的光影,简单的几何图形背景呈现出空间感。图片上通过运用一个单色渐变,搭配方形的重复色彩叠加,给我的视觉感受是有层次的、立体的空间感。

图片

如图所示,饱和度高的背景搭配几何图形的运用,再运用颜色不透明的渐变,加上形状的重复和变化,使得这个设计给人通透、高级的视觉感受。
 

几何图形在海报中的运用

图片

很多变化丰富的设计都是通过简单的几何图形处理的,简单的几何图形也可以作为设计的抓手,在暗色背景上,通过几何图形的放大,搭配时尚的混合渐变,这样的效果很有科技感、洋气。图片
明亮的色彩搭配块面感的几何图形,这样的设计手法是不是很简单。

 

色彩叠加在APP上的运用 

图片

这样的几何图形我们在设计网站上经常可以看到,通过重复几何图形的组合加上混合模式的叠加,在设计上别具一格。同时让我们的设计多一种表现手法也增加我们的行业竞争力。

图片

通过邻近色/互补色搭配,运用几何图形作为背景装饰,这样的配色与布局会让设计很出彩,并且活泼舒适平和。这样的设计对色彩的搭配要求较高,我们可以通过配色网站进行多种组合搭配练习。图片
示例是菜鸟的首页,在 banner 入口它运用了色彩叠加的设计手法,同时金刚区的图标也是运用了色彩叠加的样式,整体给人一种年轻、时尚的感受。图片色彩叠加还可以运用在引导页、闪屏页面。通过叠加、柔和的过渡,整体呈现的视觉效果还是很时尚、符合主流的设计趋势。

 

色彩叠加在icon上的运用 

图片

明亮的颜色搭配混合模式和不透明度,出现出另外一种效果。

图片

图片

色彩叠加运用在icon上居多,饱和度高的色彩加上不透明度的叠加,整体的视觉效果都偏年轻、时尚,如果你的产品是面向年轻的用户,这样的设计手法你可以考虑运用上哦!图片
这个 app 中,金刚区位置上采用了色彩叠加的视觉手法,通过简单的几何图形,搭配混合模式,使整个页面具有全新的视觉感受,传递的是一种年轻时尚感。

 

色彩叠加在品牌上的运用 

图片

Apple 的今年官方宣传采用简单的正方形搭配明亮的色彩,加上不透明度、混合模式的运用,达到不一样的视觉效果。图片google 家的品牌升级,我们也看到了最新的趋势,运用 google 经典的颜色,搭配混合模式的渐变,同时具有品牌识别性。

 

色彩叠加-设计小教程 

图片

1.选择深色的颜色(#0A00BC),画一个圆角,填充蓝色渐变背景。

图片

2.画一个圆,填充红色的渐变,模式选择提亮的效果,剪贴蒙板在圆角背景上。

图片

图片

3.画第二个大圆,填充红色的渐变,模式选择提亮,透明度调到70%,剪贴蒙板在圆角背景上。

图片

4.画第三个圆,填充红色-黄色的渐变,模式选择正常,透明度调到85%,剪贴蒙板在圆角背景上

图片

5.画第四个圆,填充蓝色的渐变,模式选择提亮,透明度调到90%(可以自己试着调整),剪贴蒙板在圆角背景上。图片6.我们看到示例图交叉处是黄色渐变,把第三个和四个圆进行复制,选择交集,生成一个交叉的图形,把这个交叉的图形改为黄色渐变,模式改为加暗。图片

7.最后一步,右下角的高亮,通过蓝色径向渐变,调整到我们满意的效果即可,模式选择变亮,透明度90%。

图片

8.加上文字效果,这个图标就完成了,是不是很简单,通过不同模式的叠加,出现不同的效果,你也快点试一下吧!图片
 

最后 

图片

色彩叠加这种设计手法经常出现在海报/icon。包括 apple 在品牌宣传上也运用了这种视觉手法,重复运用简单的几何图形,加上混合模式的叠加,构成页面色彩空间感、通透;视觉感受上也有冲击力。我们做设计的也知道往往具有高级感的设计就是通过简单的几何图形加上色彩的混合渐变,也会让我们的设计具有层次感、简约。

 

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》苹果Google都在用的设计趋势,简直太绚丽了!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


UI&UE实用方法论 | 做设计为什么需要“对比” :「冯·雷斯托夫效应」

seo达人


以前我看罗振宇的一个节目,听他谈过一个个人观点,具体原话我记不清了,但大概意思差不多是:得到APP里有一个活动或者功能特别重要的时候,他会要求设计师把入口做得足够特别,格格不入或者丑一些都没关系,但要保证用户一眼就可以看到它,并且产生足够的好奇心和想去点击的欲望。

罗振宇在这里用到的设计手法就是“对比”,而这种手法背后的理论支撑,就是我们今天要探讨的—— 冯·雷斯托夫效应(Von Restorff Effect)。

 

一、冯·雷斯托夫效应及其衍生

1933年,德国医生海德维希·冯·雷斯托夫(Hedwig von Restorff)进行了一系列记忆研究实验,通过多组、多次的对比实验发现了一个人类记忆规律:在一组物品中,人们总是很容易关注记住某个最特别的东西。比如说一组物品,用聚光灯照射其中一个,那么相比其他未被照射的物品,人们会更容易注意并记住它。

也就是说该实验发现并证明了:越特别的事物,越容易抢夺人们的注意力,并形成记忆点。这种人类行为、记忆现象后来以实验者的名字被命名为了「冯·雷斯托夫效应」。「冯·雷斯托夫效应」实际是隶属于人类行为学、心理学方面的研究结果,历史上过了许久才慢慢地被运用于美学设计中来。

从该效应被正式确立命名之后,基于它,后面还有许多科研学者对这种行为、记忆现象展开了更深入的研究,剖析了「冯·雷斯托夫效应」的优缺点,并衍生出了许多其他的理论和学术说。

我个人认为其中比较重要,且对设计同行们有较大意义的两个是:

  1. 独特性可以让内容被人更轻易地关注和记住,但同时会攫取人们的注意力,从而降低人们对项目中其他内容的关注度。因此构建特殊性,就要承担同时会削弱人们对项目整体记忆的风险;
  2. 越突出、越新颖、越令人惊讶、越独特的刺激,越能增强「冯·雷斯托夫效应」的作用程度(1978·Taylor & Fiske 研究结论)。

我认为这两个衍生结论对设计人员最有意义的原因是,它们分别对应了 Material Design “一个页面只专注一件事情” 的设计原则 和 罗宾·威廉姆斯书中所说 “要对比就对比得足够夸张” 的观点。

我知道许多的产品设计者总是希望自己页面上的每一个功能都被用户看到,但你必须学会划分优先级,请把「冯·雷斯托夫效应」作用在真正重要且必须的事情上。

 

二、到底对设计有什么作用

从前面我的反复提及可以看出,「冯·雷斯托夫效应」会影响到人们的注意力记忆两个方面。拆解了这两点,就比较容易理解应该如何将这个设计理论运用在项目之中了。

 

作用一:对注意力的影响作用  

开头我提到的罗振宇的观点中,他就是利用了「冯·雷斯托夫效应」对注意力的影响作用。

其实这一手法在UI设计中经常被使用,不论出于商业价值考虑还是功能考虑,设计师们总是知道用视觉差异来吸引用户的注意力。上案例:

我们看到,得到和汽车之家APP在常规的排版设计中遵循统一、和谐的视觉语言,压低了次要功能的视觉层级,再通过脱离常规视觉语言的设计,抓取用户注意力,吸引用户关注,从而助力营销和商业目标。

不光是商业设计中有很多案例,我们几乎每天都接触到的Badge(徽标)控件,实际也是为了构建视觉上的独特性,引起用户的视觉关注。

所以在设计中,和谐、统一固然是基本,但正是因为有序,才让设计师能够发挥“无序”的功效和威力。

在《写给大家看的设计书》中,罗宾·威廉姆斯总结了许多构建对比的方式,比如 大小、字体、粗细、冷暖色、平滑与粗糙、水平与垂直、松与紧等等。这些方法均可以运用到我们自己的设计中去。

 

作用二:对记忆力的影响作用  

你会记住生命中最极致快乐和最极致痛苦的时刻,因为它比起其他的日子足够特别,这也是「冯·雷斯托夫效应」作祟。别忘了「冯·雷斯托夫效应」最开始本就是起源于行为和心理学。

让特殊的日子被纪念,百度Doodle不就是做着这样有趣并且有益于文化传播的事吗?

Doodle的出现,已经是将「冯·雷斯托夫效应」作用于产品温度和连接用户情感的层面上了,传递了品牌调性与理念。

这一点也可以用于打造自身产品,不论是从功能、交互还是视觉,构建产品的差异,从同质化严重的互联网现状中脱颖出来,就可以让用户深刻地记住你。例如马云的双十一,例如为了躲开马云而发展出来的垂直电商…

 

三、反向运用案例

反例一:太多的突出=没突出  

前面我提到一句“正是因为有序,才让设计师能够发挥‘无序’的功效和威力”,所以越有序的内容中出现一个越不和谐的元素,才能把「冯·雷斯托夫效应」发挥得越极致。

看一个案例:以下两个页面,哪一个你更能关注到标签栏中的“摇现金”功能?毋庸置疑的答案是页面2。

因为页面1中金刚区和功能瓷片区抢走了用户非常多的视觉关注,图标的用色在饱和度和对比度上也比较一致,我很难关注到标签栏中的活动。而页面2中“摇现金”图标的画风、色彩饱和度都与其他元素不一致,我虽然眼睛盯着金刚区,但我的余光一直在被标签栏疯狂拉扯。

当然我这里只是为了论证太多的突出=没突出的论点,拼多多也许有自己的商业和功能考量。该案例在单一论点中进行描述,只是想告诉大家:要发挥「冯·雷斯托夫效应」的作用,前提就是先构建“平庸的和谐”。不要想着每一个元素和功能都要突出,都突出=都不突出。

 

反例二:本末倒置  

受“危险按钮”的陶冶,曾经设计师们都喜欢给负向情绪操作非常高的视觉层级。例如退出登录。

实际上设计者是希望告知用户此操作危险,视觉层面却仿佛在疯狂地暗示用户“看我!然后点我”。虽然近些年在移动端,这样的矛盾设计已经越来越少了。但这个“危险按钮”也真实地困惑了我很久…与其告诉用户“这个操作很难危险”,为何不直接让用户尽量忽视掉这个操作呢…

我至今没有探索和查找到相关文献来解释为何“危险按钮”视觉层级这么高。但AntDesigng规定“危险按钮”一般还需要进行二次确认操作,些许解开了一点我的担心。

但单从「冯·雷斯托夫效应」来看,这样的设计确实是有些本末倒置。在日常的设计当中,也应该极力避免。

 

原文地址:UCD耍家(公众号)

作者:Howiet


转载请注明:学UI网》UI&UE实用方法论 | 做设计为什么需要“对比” :「冯·雷斯托夫效应」

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


B 类产品设计细节:文本缩略

seo达人


缩略方式

末端截断

  • 内容超过列宽时超出的用‘…’省略;
  • 标签内文案超出由‘…’省略。
  • 长文本截断的通用模式。

 

中间截断

  • 设置开头、末端保留的字符数,在末端保留字符前显示 ‘…’;
  • 开头保留字符数根据列宽以「显示尽量多的字符」的原则来确定(极端情况为开头不保留字符,即为「开头截断」;若空间十分有限,则尽量多地保留末端字符)。
  • 中间截断在文本的开头相同、末尾字符对区别字段起到关键作用时使用。

 

场景举例 1:实例名

包括任务名、文件名、表名、系统名等等。

典型案例:完整字段如下:

company_sales_record_20150116

company_sales_record_20150117

缩略结果:

 

场景举例 2:系列名称

开头统一的系列长名称,通过后半部分来区分的字段。

典型案例:阿里集团的 BU 完整名称如下:

口碑-本地生活事业部-北方大区-北方运营

口碑-本地生活事业部-七星大区-东南运营

缩略结果:

 

设计要点

  • 重要数字、时间不建议缩略。
  • 名称列缩略可结合表头的拖拉控制显示与缩略,内容完全显示时‘…’消失。
  • 单行文本省略使用 tooltip,多行文本省略使用展开与收起。

  • 描述‘…’支持 hover,标签整个支持 hover。
  • 标签数量多时建议通过折行全部展示,不建议通过‘…’隐藏后面的标签。

  • tooltip 不承载复杂文本和操作。
  • 根据使用场景为字段设置合理的字数上限和展示空间,避免隐藏过多的内容。
  • tooltip 的尺寸不应过大,建议最大尺寸不超过长 320px、宽 160px。

 

原文地址:Ant_Design(站酷)

作者: 林叶

转载请注明:学UI网》B 类产品设计细节:文本缩略

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


3C Design-618项目复盘总结家电篇

seo达人



PART 1 业务诉求-焕新你的生活

用家电创造生活价值,把对的家电与消费者的核心需求联系在一起。针对于我们全新的品牌主张与不断年轻化的核心购买用户,在整个画面的视觉层面上表达出我们的设计语言:生活焕新,家庭,时尚有态度。

 

PART 2 项目目标

本次618项目在营销层面上,希望借助618购物狂欢这一节点,挖掘各圈层用户对家电618的期待,激活焕新需求,激发用户兴趣,刺激下单的目的。

在设计层面上,首先实现营销方向的焕新、高端及年轻化。在营销方面侧重多元化创新营销助力焕新生活和跨界营销合作线。其次在集团模板的基础上做贴合家电品类的差异化设计,第三通过场景化影响用户心智,做用户看得懂的设计。

图片

 

PART 3 视觉概念

消费者人群-Z世代

Z世代的审美从小受到信息浪潮的洗礼,“颜值即正义”他们更加追求个人幸福感,拥有鲜明的个性,勇于表达自己的观点,从这些性格特征映射到消费特征,所以他们更加喜欢有文化、有故事、有性格的品牌,非常愿意为品牌买单、为兴趣买单,追求及时行乐;个性化、多元化成为他们的主要人设标签;

图片

 

概念脑暴

为了进一步提升家电品牌焕新理念在Z世代中的好感度与传播度,根据不同的家电用户群体(中高端用户、家装用户、女性用户、男性用户、年轻粉丝用户),代入主人公居家场景切换视频的设计理念,通过分析群体共性 场景故事包装、动效印象加成让互动变的更有趣、更有温度。

图片

 

PART 4 系列视觉展示

图片

 

PART 5 设计过程

主会场

家电618主会场针对于我们Z世代的用户群体,创造了一个年轻化的人物形象,此形象也是搭在我们整体视觉创意的心智锚点;视觉创意设定了客厅,厨房,卫生间,三大日常展现家电商品家居场景,结合我们的人物形象,通过三段分镜动效的表现形式,希望能够给我们的用户带来沉浸式的环境共鸣,从而给用户带来全新的购物体验。

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

分会场——IP联盟

IP会场是通过小鸡彩虹为载体,号召百大家电萌物联合传播,在大促期间建立高颜值萌物的活动心智,视觉上打造萌趣味性风格。通过站内外联动传播,整体视觉风格统一。促成IP联盟活动的前期流量铺垫与品牌心智的认知。整体视觉创意采用了IP形象彩虹小鸡,整个视觉结合618视觉模板组成引导视觉中心点,萌趣小鸡的形象吸引视觉,以此激发(女性、颜值爱好者、Z时代)三类人群的关注,渗透萌物圈,表达出家电也可以很萌的态度。

图片

图片

 

分会场——星推官

以集团主风格为核心,保证整体品牌一致性,以明星作为流量会场,背景星星设计元素,渐变质感呈现,突出星推官主题。此次活动初期分析了去年1.0的不足,进行视觉上的优化,整体综艺视觉感更强,页面重点模块进行了交互上的创新,再用户学习零成本的情况下,体验感得到了提升。

图片

 

分会场——极速焕新家

焕新家是家电第一次与综艺合作的项目,由京东家电独家冠名与东方卫视的强强合作,挖掘各圈层用户对家电618的期待,激活焕新你的生活需求。焕新家的活动视觉不同于618其他的会场,是剪辑整合了综艺的宣传片视频,与综艺节目高度契合,传递用户心智。

图片

 

PART 6 项目总结

家电今年618整体的视觉设计相较之前,技术上应用了当前一些比较流行的软件工具与设计技法,从用户圈层维度划分,打造了5大全方位覆盖家电用户人群的会场。

从故事场景代入,再到情感化心智打造,设计表现力有过之而无不及,通过多场景,多维度,多样式的玩法,引发用户参与刺激抢购共鸣,最终达成618“焕新你的生活”的创意心智情感表达,后续我们会从大促的体系化建设与模块持续的AB测试入手,通过数据驱动设计,不断深挖家电用户对于我们整个618活动的价值体验。

图片

 

原文地址:京东设计中心JDC(公众号)

作者:吴晓菊 等

转载请注明:学UI网》3C Design-618项目复盘总结家电篇

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


为什么要用卡片设计?好在哪,怎么做?

涛涛

很多人对APP中的卡片设计习以为常,但对于卡片设计流行的原因,优点,以及如何做好卡片设计却可能不甚了解。关于这些问题,彩云之前也写过一篇非常受欢迎的卡片设计经验原创文章《想做好卡片设计,原来要注意这么多细节》,文章中讲了非常多的卡片设计实用技巧。今天这篇国外大佬写的文章,算是从为什么这样做的角度来分析卡片设计,一起来学习吧。

 

undefined

从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台,卡片设计似乎是无处不在的,这些大厂广泛应用使得卡片设计很快流行了起来。


作为一个信息容器,卡片能承载包括文本、富媒体、按钮等所有UI元素。基于这些内容,卡片设计可以根据不同的设备和屏幕调整其大小,平衡界面视觉和用户体验。


什么是卡片设计?


卡片是一个UI组件,包含了某一个内容的信息和操作。卡片可以包含各种元素,但它们都应该属于同一个主题。

undefined

这样做的目的是为了避免冗长的文字,并呈现更多的内容。即使从设计的角度来看,用户可能不熟悉卡片的概念,但他们马上就知道如何使用它们,因为它们与实体卡片是一样的。(彩云注:这个就是用户心理学中隐喻的运用)


为什么它会如此流行?


卡片之所以流行,是因为它们能更好的把控内容。卡片是模块化的,所以不同的内容可以堆叠在一起,而不需要注意它们的差异。


卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容,而无需担心设计会变得杂乱无章。


卡片可以将内容分解成易于理解的小块,以便用户与之互动。通过给内容一个容器,卡片向用户表明内容是真实和感性的。


卡片 UI 设计流行的原因还有很多:


  • 直观:卡片在界面中看起来与现实世界中的卡片相同,它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前,它们在现实生活中无处不在:名片、棒球卡、便签。卡片代表了一种有益的视觉类比,它允许我们的大脑直观地将卡片与其所代表的内容联系起来,就像在现实生活中一样。


  • 易于阅读:卡片不占用太多空间,并敦促设计师优先考虑其内容。不同的是,每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。


  • 有吸引力且对用户更友好:基于卡片的设计通常非常依赖视觉效果(尤其是图片);就信息架构而言,视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。


  • 有利于响应式设计:卡片是矩形的,可以平滑地调整大小,以适应不同屏幕的水平和垂直正面,这意味着用户可以在所有设备上获得统一的体验。


  • 便于分享:卡片可以鼓励用户在社交媒体上分享内容,因为它允许用户只分享特定的内容,而不是整个页面。



什么时候应用卡片设计?


这通常是当你有:

  • 基于搜索的界面:  卡片能通过模块的内容快速显示合适的内容,这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。


  • 信息浏览:当用户浏览信息时,卡片的兼容性更好。


  • 任务管理:当可以将流程中的单个任务作为卡片进行说明时, 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好,其中每张卡片代表一个单独的任务。


  • 类似项目:卡片最适合于异构项目的集合(当并非所有内容都是相同的基本类型时)。


  • 可视化分析:  仪表板通常在同一页上同时显示各种内容样本。在这种情况下,卡片类比可以帮助在不同物品之间创造出更明显的差异,其中每张卡片可以适应不同的角色。


卡片解构


卡片的布局可以不同,以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。

undefined

(1)富媒体: 卡片可以包含缩略图,以显示图片,插图,头像,Logo,图标或图形。


(2) 标题: 标题文本可以包含相册或文章的名称或标题。


(3) 描述: 支持文本,如文章摘要或简短的描述。


(4) 行动按钮: 卡片可以包含用于操作的按钮。


(5) 副标题: 副标题文本可以包含详细介绍,如文章的署名或标记的位置。


(6) 图标: 卡片可以包含操作图标。


设计技巧


有一些小的技巧可以快速提高卡片设计细节。


1. 使用相关主题的图片


图片是卡片设计的主角,你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像,卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体,但需要与内容主题相关。 

undefined


2. 增加视觉层次


卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部,并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。(彩云注:视觉层级对于信息表达至关重要!) 

undefined


3. 限制内容长度


一张卡片应该只包含重要的信息,并提出一个相关的观点,以获取额外的细节,而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时,卡片可能会变得很冗长,并失去与卡片类比的实际联系,因为它不再像一张卡片了。 

undefined


4. 避免嵌入链接


不要包含内联链接,卡片应该自己链接。嵌入文字链接会让用户误操作。 

undefined


5. 区分操作主次


包含不同操作的卡片应该在视觉上形成对比。在下面的例子中,我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。 

undefined


6. 去掉分割线


对于新手设计师来说,用分割线来区分内容是一种常见的方式,以此定义不同的组。这些边框会造成不必要的视觉干扰,从而影响内容。

undefined


如何做到视觉上更美观?


APP中的卡片并不是纯粹的拟物概念,但通常情况下,使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下,你可以做几件事:


1. 使用圆角


在形态上与真实世界的卡片进行视觉对比。圆角更有效,因为它们让我们的眼睛容易跟随视觉动线,“因为它更适合头部和眼睛的自然运动”。 

undefined


2. 增加一个轻微的外边框或者投影


增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次,这有助于我们区分UI元素。


然而,在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果,让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。

undefined


3.注意字体和留白


重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白,让用户有时间处理并进行视觉重置,有精力看完一张卡再到下一张。


选择简单和基本的字体,因为基本的排版最大限度地提高了可读性,并有助于浏览。


一些优秀卡片设计的例子


让我们看看一些真实项目中的卡片设计案例:


信息流中的卡片设计


保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构,但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素,以使读卡片的人更容易理解它们。 

undefined

由Diseno Constructivo和Webpixels设计


他们突出特色图片和标题作为最突出的元素,这能帮助用户决定文章或发布的内容是否适合他们。


电商卡片设计


产品卡片是一个很重要的东西,它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意,激发人们获得产品的欲望,激励人们购买,并在搜索结果中得到高效推广。 

undefined

由Webpixels设计


产品的名称应该放在最显眼的地方,这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语,所以你需要一个高质量的产品配图来设计完美的产品卡片。


如果产品有特价,不仅要在价格栏中注明促销价格,还要注明常规价格,以及客户可以节省多少钱。


个人中心卡片设计


简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要,卡片设计在这里也能发挥重要作用。 

由Neelesh Chaudhary设计


就像每一张卡片一样,配置文件卡片也是一个UI组件,它包含了对它所代表的内容至关重要的信息。为了达到你的目标,你要向其他人推销你自己。


确保只包括必要的信息(例如,照片,名字,职业),让你的“关于”页面有剩余的细节来完善你的个人资料。


仪表盘卡片设计


仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型,每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。 

undefined

由Simmmple设计


仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI,允许用户精确地控制哪些数据需要在仪表板的前端做好。


只包括最相关的信息,为用户使用方便。当你的数据集在一起看更容易理解时,找到在一张卡片上显示它们的方法。但是要小心,不要让用户感到困惑。


日常计划卡片设计


看板任务卡似乎是一件非常简单的事情——拿一张便签,写下你需要做什么,然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息,清楚地传达了必须做什么。 

undefined

由Neelesh Chaudhary设计


卡片上包含的信息包括任务的名称和重要的细节,如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”,但是状态可能因项目而异。


卡片结构最适用于添加或删除任务这样的小改变,而不是改变像你的总体目标这样的大想法。


总结


有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片,我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效,而不是简单地作为内容列表的现代替代品。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:彩云sky

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端选择录入类组件的使用辨析

涛涛

编辑导读:在很多设计中,选择录入类组件的理解和使用都比较模棱两可,很多其他产品在实际应用中往往也不够规范,使产品体验的一致性受到影响。本文将具体探究下这几种组件的特性和适用场景,与你分享。

一、前言

不久前在进行一个Web端HRM系统的需求设计,场景是对于从企业离职的员工,HR可以根据员工能力和表现选择是否将其设置为优秀离职人才,对于优秀离职人才将进行定期关怀,以便后续重新返聘的可能。在设计过程中,对于设置优秀离职人才这个交互,感觉使用单选框、多选框、开关都能达到目的,究竟哪一种组件才是最合理的选择呢?

这个问题让我回想起之前在很多设计中对于这几种选择录入类组件的理解和使用都比较模棱两可,很多其他产品在实际应用中往往也不够规范,使产品体验的一致性受到影响。本文将具体探究下这几种组件的特性和适用场景:

二、单选框(Radio)和多选框(Checkbox)

1. 来源

1)单选框

单选框一般被认为来源于收音机(Radio)上的物理按钮,当一个按钮被按下时,另一个按钮将会被弹起,使得永远只有一个按钮处于被按下的状态。

这种说法可能也不够严谨,因为收音机上的按钮在被按下后,不仅呈现出了“按下”的状态,同时也会立马触发收音机的广播,即立即生效。实际上绝大多数UI界面中无论单选框还是多选框一般都是仅作为录入,触发生效往往需要配合“提交”操作来进行。

2)多选框

多选框来源于生活中常见的各种多项选择场景,如饭店菜单、考试多选题等。多选框一般也是作为内容录入的组件,一般在进行选择后同样需要配合后续的“提交”动作,就像选择菜品后下单,选择答案后交卷,这种“选择类”场景多用在表单或者表格中。

多选框还有另一种“设置类”场景,这种场景下多选框用于启用某种模式、应用某项设置,与开关(Switch)非常类似,这也使得多选框在实际产品中的应用要比单选框复杂得多,后文将详细阐述多选框与开关的使用区别。

2. 简单定义及外观样式

1)单选框

可以概括为从最少两个或两个以上的互斥关系选项之中选择一项的组件,外观样式通常由“圆形外框+文字标签”组成,选中时圆形外框样式发生改变表明选中状态。

2)多选框

可以概括为从多个并列关系的选项中选择多个的组件,多选框最少可以一个都不选。外观样式通常由“圆形或方形外框+文字标签”组成,选中时一般在外框中出现√表明选中状态。与单选框相比多选框还有一种特殊的“半选中状态”(half-selected),一般出现在表格(Table)或者树选择(Tree select)中。

3. 交互细节

1)触发区域

单选框和多选框本身外框尺寸都比较小,因此需要将触发区域增大至整个标签范围,方便用户点击

2)排版

单选框和多选框在B端各类表单中应用较多,在页面空间允许的范围内,最好将选项纵向对齐排列,方便用户直观比较,需要横向排布时,选项间应该设置清晰明显的间隔。

3)单选框的容错机制

单选框在选择过后一定要有一个选中项,因此就不能恢复至“空状态”。在比较典型的社交场景中,一些涉及隐私的信息比如婚姻状态选择,可以给用户提供诸如“保密”“不展示”之类的选项,防止用户在选择之后无法回退。

4. 单选框、多选框和下拉选择(Select)的使用辨析

对比单选框、多选框和下拉选择的外观样式不难发现,它们之间最重要的区别在于信息传达效率和包容度的不同。

1)单选框和多选框的特点

单选框和多选框的所有选项信息都是直接暴露出来,如果选项过多将占用较多界面空间并且影响用户的阅读效率和界面整体规整度,信息包容度低但信息传达直观高效;

2)下拉选择的特点

下拉选择则是收在下拉菜单里,只有选择值是用户一眼能看到的,信息包容度高,节省空间,与其他输入类组件并用时能保持整体界面的规整度,但每次都得点开再进行选择也牺牲了一定的信息传达效率和操作便利性。

3)适用单选框和多选框的场景

因此,单选框和多选框更适用于选项数量较少(一般不超过5个),有一定界面编排空间,且用户需要直观看到不同选项内容并进行比较选择的场景,如选择会员购买方案。

4)适用下拉选择的场景

相反,下拉选择更适用于选项数量较多,表单配置复杂、包含各类不同样式组件或界面空间不足,且用户对于被隐藏的选项内容有一定预期的场景,比如选择省份。同时下拉器扩展性更高,下拉菜单可以进行多种类型的变体设计,满足不同业务场景的需求。

三、开关(Switch)

1. 来源

开关(Switch)这个组件就是模仿现实生活中的开关而设计的,现实生活中灯的开关一按,灯马上就亮了,因此开关有一个最大的特征:即时性。这在Ant Design设计系统的全局规则中也给出了注释:“当用户切换「开关」按钮将直接触发状态改变“,因此不同于单选框和多选框这种录入型组件,开关同时兼备录入和触发两种属性。

2. 简单定义及样式

开关是一种特殊的选择组件,只能从“开启/关闭”两种状态选择其一,并且选择的结果会立即生效,通常点击后页面或者开关本身会有加载效果,或者点击后给出反馈,告知用户操作已生效。

3. 开关和多选框的使用辨析

上面提到复选框也经常作为开启某种模式或者应用某类设置使用,在这种场景下它与开关的逻辑十分相似,让人容易混淆。对于这两种组件的使用区别当前已有很多讨论,说法各异,这里根据我自己的探究和经验,从以下几点阐述下自己的看法:

1)开关的即时性

开关的即时性决定了当开关与需要提交的表单一起出现时会存在矛盾,因此在表单中进行状态选择时,尽量选择单选框、多选框,避免使用开关。

2)开关更适合控制一组设置吗

苹果官方人机界面指南中指出“开关比复选框具有更多的视觉权重,因此当它控制的功能比复选框通常更多时,它看起来更好。例如,您可以使用开关让人们打开或关闭一组设置”,然而在复选框的设计指南中又举了用复选框控制一组设置的例子。

再来看一个飞书的例子,飞书管理后台中使用了开关来控制一组设置的开启,而在飞书客户端的设置里用的都是复选框。

对于这个问题,个人认为苹果官方人机指南所说的因为开关比复选框具有更多视觉权重,所以更适合用来控制一组设置的说法并不准确,复选框本身也具有明显的选中和非选中状态,尽管开关组件自身大小以及在视觉效果上可进行设计的空间都更大,但是好像并不足以成为决定性的因素。

同时因为开关的即时性,如果是在需要提交的表单或者模态弹窗中用开关控制一组设置,反而是多选框更合适。

3)从组件的来源分析

从组件的来源及发展历史来看,勾选的交互是基于PC键鼠操作设计的,单选框和多选框组件本身尺寸较小,因而触发区域会扩大至整体标签区域,方便鼠标点击;而开关是诞生于移动设备触控交互的组件,在移动端界面本身配置就比较简化,这时候配合开关自身相对较大的触发区域,用手指点击起来非常方便顺畅。

而在PC端,因为屏幕尺寸更大,同时很多B端系统配置项多、界面布局相较移动端要复杂很多,这时候要把鼠标移至开关热区去点击,反而没有勾选框来得方便,这种操作体验在一个纵列中有多个连续的开关时尤为明显。

4)我的观点

依据开关的即时生效特性,开关更适合用在不需要提交操作的页面中,用来控制功能或设置的开启/关闭,在需要提交操作的表单或者弹窗中,建议使用多选框。

开关和勾选框都可以用来控制一组设置的开启/关闭,使用开关进行控制时,最好将它控制的下属组件都设置为立即生效,这取决于设置本身对于系统的影响,如果设置对于系统重要功能影响较大,则建议改用多选框去控制,让用户多一步“提交”操作进行确认,提升容错性。

四、总结

回到开头设置优秀离职人才场景中的组件问题,这个需求流程涉及到的不只是在离职人员的编辑弹窗中操作,还涉及到在离职人员表格中的状态展示和设置优秀人才的单独操作。首先弹窗中的编辑操作是需要提交的,用开关比较矛盾;单选框和多选框在弹窗中都可以适用,但考虑还需要在离职人员表格中的状态展示和单独编辑,为了保持整体的交互一致性,最后选用了单选框。

总的来说,这几种选择录入类组件在B端系统中应用非常广泛,可能正是因为太司空见惯了,所以容易忽略它们细节上的特性和区别。尽管有时候这些组件的使用问题并不会对用户体验产生决定性的影响,但对细节的探究正是设计师严谨的工作态度和工匠精神的体现,只有秉持着这种对细节的打磨和追求才能不断提升产品的用户体验。

另外虽然文中做了一些各个组件的特性和适用总结,但可能在不同产品和系统中情况会更加复杂,需要设计师根据实际情况灵活处理。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理   作者:齐治设计

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档