首页

如何做好适老化设计?

涛涛

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!


如何做好适老化设计?支付宝设计师送你9个实用锦囊!

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

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



文章来源:优设  作者:Alipay


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

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



掌握这五个方法,帮你提升智能产品体验

涛涛

场景细分

随着各大智能厂商对用户行为数据的收集积累,拆分提炼出了不同场景下用户的特定需求,相比以前的大而全臃肿的功能界面,现在的功能、信息更加精确,产品将不同场景下的解决方案为用户提前准备好,用户只需要简单的选择就好,更加人性便捷。

1. B&O 音箱歌曲模糊切换界面

掌握这五个方法,帮你提升智能产品体验

B&O 音箱面向的人群是音乐发烧友,他们对音乐有独到的理解,为了为用户提供便捷合乎口味的音乐,B&O 将歌曲类型与颜色情感相结合,分别是:黄色代表愉快的歌曲、红色代表激情的歌曲、紫色代表忧郁的歌曲、蓝色代表轻松的歌曲。用户只需要选择颜色就可以播放相应风格的音乐,给用户浓烈的感性艺术气息。

掌握这五个方法,帮你提升智能产品体验

并且 B&O 将音乐播放场景做了细分:只收听自己收藏的歌曲、收听与自己品味相似的歌曲、随便听听;这三个场景下的需求通过三层圆环来满足:点击外环区域播放全网歌曲、点击中环区域播放与用户收藏相似的歌曲、点击内环区域播放用户收藏的歌曲。这种感性的操作方式省去了搜索歌曲的过程,极大的提高了便捷性。

2. 三星智能冰箱 2.0 系统

掌握这五个方法,帮你提升智能产品体验

我们先了解一下三星智能冰箱 1.0 的系统是什么样的,首页包含时间、天气显示、音乐播放、购物清单、备忘录、相册、留言板、设备控制,用户在冰箱面板上什么都能做,整体感觉是一个臃肿的功能集合。

掌握这五个方法,帮你提升智能产品体验

在 2.0 中,三星将用户使用场景做了以下的细分:烹饪模式、日常模式、娱乐休闲模式、家庭管理模式;在烹饪场景下,为用户展现菜谱,用户可以专注的去研究饭菜制作方法;在日常场景下,为用户提供日历、照片墙、留言板、日程等日常生活相关信息;娱乐场景下,用户可以在厨房一边忙碌一边听音乐,还可以查看社交消息,所有的功能都是围绕娱乐休闲;家庭管理场景下,全职妈妈可以一边做着饭,一边看着监控屏幕上儿童房孩子的情况及全屋的安防情况,也可以控制家中的设备。

场景细分可以有重点的为用户提供他们真正需要的服务,让用户感受到产品带来的贴心感。

3. Orvibo 灯光照明场景

掌握这五个方法,帮你提升智能产品体验

Orvibo 根据用户使用灯光的习惯,按照用户对于光线的需求程度,将灯光使用场景分为:夜晚光线昏暗需要明亮的光照、白天光线充足不需要灯光、休闲时需要柔和些的光线、阅读需要不刺眼但明亮的光线、起夜时微弱的轮廓照明即可。为用户提供每种场景下的照明方案,准确快速的满足用户不同的需求。

4. 小米 TV 端空调控制界面

掌握这五个方法,帮你提升智能产品体验

小米根据用户对于空调各个功能的操作频率,罗列出核心功能:开关、温度调节、冷热模式,界面中只体现这几种种信息,将低频功能隐藏起来,为视觉降噪,突出核心功能,提升了用户操控效率。

5. WOM 天气展示模块

掌握这五个方法,帮你提升智能产品体验

针对那些上班中不方便看手机、穿好衣服正要出门、旅游到达当地酒店需要看一眼天气状况的场景,WOM 提供了简洁直观的设计方案,产品显示区域只保留 4 种常见天气类型,高亮的天气 icon 代表当前的天气状况,当天气将要发生变化时,相应的天气 icon 会闪烁。

掌握这五个方法,帮你提升智能产品体验

此外,通过利用颜色来传达不同的温度,蓝色代表 0℃,白色代表10℃,黄色代表20℃,红色代表30℃,在不需要手机的情况下为用户提供了丰富的展现形式。

6. 三星电子画框

掌握这五个方法,帮你提升智能产品体验

随着手机的普及,家庭对于电视的需求已不完全是为了收看节目,往往一个礼拜也看不了几回。三星基于这种情况为了延续电子屏幕的销量,赋予了电视装饰属性,演变为纯展示的电子画框,用户可以选择各种风格的肖像或风景图片进行轮播展示,扮演艺术装饰画的角色,从而满足用户日常家庭装饰需求。

直观明确的表现方式

在设计中融入图片,将操作、状态可视化,这些具象的形式可以让用户快速理解并操作,让我们看看各大智能产品厂商是如何实施的:

1. Nest 温控器安装界面

掌握这五个方法,帮你提升智能产品体验

大多数智能设备买回家后,需要用户自己安装,有的甚至牵扯到线路问题,Nest 温控器安装界面采用与实物一致的模型元素,让用户有参照依据;通过零部件的运动告诉用户安装顺序;通过放大细节,告诉用户应该选哪一个部件及如何链接。让用户有更好的参与感、成就感,还可以降低公司的人力安装成本、客服成本。

2. 小米智能家居电视

掌握这五个方法,帮你提升智能产品体验

小米智能家居电视背景运用实物图片,给用户营造家庭的氛围,设备卡片 icon 运用半写实风格,和实际产品一一对应,便于用户快速查找设备;卡片底部体现设备状态,精简的卡片信息使得设备的状态更容易被用户感知到。

3. 三星、苹果智能家居系统首页

掌握这五个方法,帮你提升智能产品体验

三星、苹果都运用图片作为系统的背景,可以很好的和用户拉近距离,通过白色或磨砂卡片与背景做区分,三星的设备 icon 采用多彩渐变风格,和它趋于年轻化、时尚个性的品牌战略方向保持一致。

4. Whirlpool 洗衣机、烤箱、冰箱模式选择界面

掌握这五个方法,帮你提升智能产品体验

由于洗衣机、烤箱、冰箱的运行模式和用户想要洗的衣物类型、材质、烹饪的食物类型、储藏的食物类型有强关联,Whirlpool 运用图片作为模式背景,将功能和物品类型结合,用户可以直观感性的理解和区分各个功能,从而快速做出选择。

5. Orvibo MixPad

掌握这五个方法,帮你提升智能产品体验

Orvibo 在大屏智能面板的设计上大量使用图片元素,不仅可以区分各个功能模块,还增添了内容的丰富性,要知道智能面板的首屏和设备控制列表页功能是不一样的,它是用来承接并向用户展示房间内各个信息的,房间图片作为背景烘托出家的氛围,每个房间页面的左上角显示屋内温度、湿度、当前开启的设备类型及数量,很直观的向用户展示屋内信息。

掌握这五个方法,帮你提升智能产品体验

每个场景都用具体的图片作为卡片背景,可以让用户预想到每个场景对应的运行效果。有的场景卡片中体现所属房间信息,告诉用户该场景只联动运行特定区域的设备。

运用图片会有以下问题:1、找到能体现各个特定功能的图片增加了人力成本;2、图片的多样性容易打破画面的整体统一感。所以要结合公司的现状克制的运用图片。

6. Amazon 智能家居系统

掌握这五个方法,帮你提升智能产品体验

Amazon 的监控设备卡片背景外显了房间内的监控画面,用户在设备列表界面就可以直观的看到监控区域的信息,强调了用户关注的内容,缩短了操作步长。

7. Lenovo Smart Clock 备忘提醒时间设置界面

掌握这五个方法,帮你提升智能产品体验

通常,我们设置时间时,系统会给我弹出时间选择控件,需要我们上下滑动设置;Lenovo Smart Clock 的做法是将时、分的设置具象成了时钟实际运行的圆形轨迹,与用户对于时间的认知保持一致,很贴心的设计,这种方式非常值得我们学习。

8. Google Nest Hub 定时界面

掌握这五个方法,帮你提升智能产品体验

Google Nest Hub 将传统的定时列表具象成了一个个正在倒计时的时钟,用户可以更直观的看到每个定时的状态。点击某个定时卡片可以快速的进行暂停或删除操作。

9. 小米空气净化器界面

掌握这五个方法,帮你提升智能产品体验

小米空气净化器界面,每一档空气质量值都对应不同的颜色,并且将颜色延续到了其他操控按钮,让用户对当前空气质量有更强的感知;净化器被关闭时,显示区域、控制区域置灰,明确告知用户设备状态及可操作区域。

10. 三星 SmartThings 设备连接查看界面

掌握这五个方法,帮你提升智能产品体验

房屋面积大,会有很多的设备与多个网关连接,家中与网关连接的智能设备有时候会连接中断,具体哪个设备与哪个网关中断了不容易被查清。三星 SmartThings 将设备与网关的连接情况可视化,可以向用户直观的反映出哪个设备连接出了问题。

运用手势控制

通过利用不同形式的手势操控,让用户和产品的交互过程更新颖更便捷。要注意的是虽然手势不需要操控物理按键,但手势操控的形式要建立在用户已有认知习惯之上,请看以下案例:

1. LG 手机系统控制界面

掌握这五个方法,帮你提升智能产品体验

最左边的图为行程信息截屏操作,目前截图方式有几个按键一起按下的,也有手机背面敲击三下的,这些都需要与设备接触,接触交互的过程就需要花费用户更多的时间,LG 通过双手捏合截图的形式体现现实中“抓取”的语义,用户使用起来顺其自然,瞬间就可以完成截图的目标。

中间的图为应用快速切换操作,用户只需要对着屏幕做挥手动作,就可以切换至下一个应用,这个隔空操控的手势核心使用场景是:当你正在厨房,手上沾着面粉或其他东西时,需要操控手机又不想弄脏手机,那么隔空操作就可以解决这一痛点。

最右边的图为多媒体音量调节,只需要作出旋钮的动作,就可以实现音量的控制,是不是觉着很 Cool。这种新的控制形式可以让用户加深对产品的印象。

2. Google Nest Hub 音乐播放控制界面

掌握这五个方法,帮你提升智能产品体验

在 Google Nest Hub 的音乐播放界面,当你想开启或暂停音乐播放,只需要手掌隔空朝着屏幕方向做按压动作,就可以快速触发相应功能,这种方式让用户会感觉很爽,自己就像有了魔力。

3. Google Nest Hub 闹钟控制界面

掌握这五个方法,帮你提升智能产品体验

早上闹钟响起时,需要用户选择关闭闹钟还是稍后提醒,常见的情景是,用户睁开眼伸手去点击某个选项,会干扰想要接着睡的用户。Google Nest Hub 在此处增加了隔空操控手势,用户如果想关闭闹钟,只需要闭着眼,手掌朝着屏幕一挥手,就可以搞定了,有没有被宠爱的感觉。

4. HomePod 音乐投射功能

掌握这五个方法,帮你提升智能产品体验

苹果用户如果想将手机上正在听的歌曲通过 HomePod 播放,只需要将手机靠近 HomePod,就可以轻松完成音乐投射,整个过程就像将一个容器的内容倒入到另一个容器内,既充满趣味性又大大简化了音乐播放设备切换的过程。

提供个性化、多样化的选择

通过设计语言为用户提供更多的视觉风格,甚至开放编辑权限让用户更自由的制定自己喜欢的形式,这些都可以满足用户的个性化需求及专属感,请看以下案例:

1. Sony HUIS 遥控器

掌握这五个方法,帮你提升智能产品体验

Sony HUIS 遥控器为用户提供了最大限度的自主编辑权,用户可以从后台设定每个按键的形式及功能,也可以在屏幕中设置户型图,方便控制对应的设备。

掌握这五个方法,帮你提升智能产品体验

甚至可以绘制只有自己理解的专属图案,大大提升了专属感。

2. 三星智能冰箱屏保

掌握这五个方法,帮你提升智能产品体验

用户具有喜新厌旧的心理,三星智能冰箱为用户提供了丰富的屏保:有没有任何信息展示的抽象几何艺术画风格、有配合温度展示的春夏秋冬风格、有简洁素雅的时间显示风格、还有照片背景墙风格;兼顾了用户日常装饰和功能的需求。

3. Lenovo Smart Clock

掌握这五个方法,帮你提升智能产品体验

Lenovo Smart Clock 对于时钟屏保为用户提供了不同的风格,涵盖了大多数的人群风格喜好:活泼跳跃、实用直观、极简现代、抽象艺术、纯文字、纯数字等

掌握这五个方法,帮你提升智能产品体验

甚至在同一种风格中再细分为多种色彩搭配方案供用户选择。可以说想尽办法来满足用户的个性化需求。

统一的设计语言及操控逻辑

这里的统一设计语言有两个方面:一、同一个功能在不同的智能设备上布局要一致;二、同一类设备在 APP 中的功能布局要一致;操控逻辑统一指的是:产品中设备的操控方式要和用户对实际设备的认知一致。一致性可以降低学习成本,提升更稳定的操控体验。请看以下案例:

1. 温控器多端控制界面

掌握这五个方法,帮你提升智能产品体验

Nest 温控器及 ecobee 温控器在设备上的设计语言和 App 上的保持一致,方便用户在多端设备上的无缝操控体验。移动端与智能设备界面唯一不同的是,移动端,同一层级上展示的功能入口更多,适合更复杂的操作。

2. Orvibo 移动端设置界面

掌握这五个方法,帮你提升智能产品体验

在移动端设置智能面板功能按键的界面中,Orvibo 将按键列表做成与实物一致的样式,便于用户快速找到对应的按键进行设置,这是提升智能家居一致体验常见的方式。

3. 三星 SmartThings 功能卡片

掌握这五个方法,帮你提升智能产品体验

在智能家居 App 中,由于功能种类繁多、内容不确定等因素,承载它们的卡片在布局设计上面临很大挑战,需要兼容各种功能、还要保证卡片的整体一致性及合理的屏效比。

在 SmartThings 智能家居控制系统中,三星对功能卡片进行了统一的部署,卡片左上角为功能名称,左下角为状态信息,右下角区域为操控区,并且还考虑了只有功能控制没有状态、只有信息没有功能控制情况下卡片的拓展形式,充分保证了操控的一致体验。

4. Google Nest Hub 调光灯控制界面

掌握这五个方法,帮你提升智能产品体验

在调光灯的操作逻辑里有这么个问题:是将亮度值调至 0%关闭灯光,还是需要一个单独的开关按钮。看看 Google 是怎么做的,它将调光区域与灯的开关做了区分,也就是说亮度通过调光区域操作最低为 1%,需要通过开关按钮进行关闭;这样做的好处是操作逻辑明确,并且当用户在 80%亮度下关闭灯光,下次开启时还是 80%的亮度,更加人性。

总结

目前网上各平台的智能产品界面有很多,然而大多都是不落地的概念稿,里面的设计稿由于没有具体场景及需求的约束,大多都无法解决公司实际项目中的问题,经常浏览仅能提升个人审美。只有平时通过对各行业实际落地产品的搜集积累和分析,才能发现它们在提升产品体验道路上的共通点、差异点,从而为公司提供真正有价值的设计方案。

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

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



文章来源:优设  作者:Aaron杜斌 



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

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



f

jquery DataTable 汉化 以及其他实用配置

前端达人

一、将 DataTable 设置成中文

复制代码
<script> $('#datatable').DataTable({

   language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" }
   }
});
}); </script>
复制代码

 

二、设置列宽度

复制代码
<script>
$('#datatable').DataTable({

"columnDefs": [
  {
    render: function (data, type, full, meta) {
        return "<div style='white-space:nowrap;float:right'>" + data + "</div>";
    },
    targets: [2,3,4,5,6]
  },
],

});

</script>
复制代码

 

三、修改表格数据后,静态刷新表格数据不跳转

dataTable.ajax.reload(null, false);

 

// 重载所有接口数据,返回到第一页
dataTable.ajax.reload();

 

相关 API

ajax.reload( callback, resetPaging )


里面有二个参数:
callback :当服务器返回数据并重绘完毕时执行此回调方法,回调方法返回的是服务器返回的数据
resetPaging: 重置(默认或者设置为true)或者保持分页信息(设置为false) 


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

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


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

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

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

JqueryTable的使用

前端达人

1.目的

用漂亮的前端表格直观显示数据

 

2. JqueryTable简介

JqueryTable官网

表格显示

 

3.用法

1.初始化html页面

设置一个table


  1. <table id="table_id" class="display">
  2. <thead>
  3. <tr>
  4. <th>Column 1</th>
  5. <th>Column 2</th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td>Row 1 Data 1</td>
  11. <td>Row 1 Data 2</td>
  12. </tr>
  13. <tr>
  14. <td>Row 2 Data 1</td>
  15. <td>Row 2 Data 2</td>
  16. </tr>
  17. </tbody>
  18. </table>

 

2.引入静态资源

这个是JqueryTable必要的静态资源


  1. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
  2. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

如果你使用了js, 那么还需要引入jquery.js

 

3.初始化表格


  1. $(document).ready( function () {
  2. $('#table_id').DataTable();
  3. } );

3.实例

 

1. html页面


  1. <table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
  2. <thead>
  3. <tr>
  4. <th width="10%">用户名</th>
  5. <th width="10%">姓名</th>
  6. <th width="8%">性别</th>
  7. <th width="10%">手机号</th>
  8. <th width="5%">工作年限</th>
  9. <th width="12%">教员类型</th>
  10. <th width="15%">角色</th>
  11. <th width="10%">备注</th>
  12. <th width="12%">操作</th>
  13. </tr>
  14. </thead>
  15. </table>

 

2.js代码

ajax 发送请求, 接受表格数据,再填写进去


  1. initGrantedCoachGrid:function(){
  2. selectedUserId =[];
  3. if(grantedCoachGrid){
  4. grantedCoachGrid.ajax.url(
  5. "course/getGrantedCoachByFolder?json&folderId="
  6. + selectNodeId + "").load();
  7. } else {
  8. grantedCoachGrid = $('#tbl_grantedCoach')
  9. .DataTable(
  10. {
  11. "lengthMenu" : [ [ 10, 20, 30 ],
  12. [ 10, 20, 30 ] // change per page
  13. // values here
  14. ],
  15. "ordering":false,
  16. "retrieve":true ,
  17. "bDestory" :true,
  18. "pageLength": 10,
  19. "bAutoWidth" : false,
  20. "ajax" : {
  21. "url" : "course/getGrantedCoachByFolder?json&folderId="
  22. + selectNodeId + "",
  23. "type" : "get",
  24. "cache" : false,
  25. "contentType" : "application/json; charset=utf-8",
  26. "dataSrc" : ""
  27. },
  28. "rowCallback" : function(row, data) {
  29. selectedUserId.push(data.userId);
  30. },
  31. "aoColumnDefs" : [ {
  32. sDefaultContent : '',
  33. aTargets : [ '_all' ]
  34. } ],
  35. // 填入列数据
  36. "columns" : [
  37. {
  38. "data" : "loginName"
  39. },
  40. {
  41. "data" : "userFullName"
  42. },
  43. {
  44. "data" : "gender",
  45. "mRender" : function(data,
  46. type, full) {
  47. if (data == "M") {
  48. return "男";
  49. } else if (data == "F") {
  50. return "女";
  51. }
  52. }
  53. },
  54. {
  55. "data" : "mobilePhone"
  56. },
  57. {
  58. "data" : "workYear"
  59. },
  60. { "data": "coachType" , "mRender":function(data,type,full){
  61. if(data=="0")
  62. {
  63. data="理论培训";
  64. }else if(data=="1"){
  65. data="实习培训";
  66. }else{
  67. data="理论培训+实习培训";
  68. }
  69. return data;
  70. }},
  71. {
  72. "data" :function( row, type, val, meta ){
  73. return row.userRoles[0].roleName;
  74. }
  75. },
  76. {
  77. "data" : "remark"
  78. },
  79. {
  80. "data" : null,
  81. "mRender" : function(data,
  82. type, full) {
  83. return "";
  84. }
  85. }
  86. ],
  87. "oLanguage" : {
  88. "sProcessing" : "正在加载中......",
  89. "sLengthMenu" : "每页显示_MENU_条记录",
  90. "sZeroRecords" : "对不起,查询不到相关数据!",
  91. "sEmptyTable" : "无数据存在!",
  92. "sInfo" : "当前显示_START_到_END_条,共_TOTAL_条记录",
  93. "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
  94. "sSearch" : "",
  95. "oPaginate" : {
  96. "sFirst" : "首页",
  97. "sPrevious" : "上一页",
  98. "sNext" : "下一页",
  99. "sLast" : "末页"
  100. }
  101. }, // 多语言配置
  102. "stateSave" : true
  103. // save the state of a table
  104. });
  105. }
  106. }

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

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


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

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

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

从垃圾桶到“多入口”,谈谈B端设计思考

seo达人


好的设计,都不会是“无缘无故”,它一定是从满足某种实际需求而出发,向更高级的目标前进。作者从垃圾桶的设计开始,将思绪延展到界面的功能入口,带大家一起思考一些B端的设计逻辑。

 

最近在一次大扫除当中,不小心把厨房里的垃圾桶给摔坏了,于是乎想在网上选购一个合适的垃圾桶,而回顾了垃圾桶的选购经历,或许它是一个很好的例子,让大家了解 多入口 的设计思考。

首先,究竟厨房需要是什么样的垃圾桶?我陷入了嘀咕,因为我自己也不太明白,于是我在淘宝上看到了许多不同类型的垃圾桶

把它们总结了一下,基本上可以分为两类:直筒式、脚踏式:

图片

 

直筒式:

采取顶部开放的结构,使用者可以直接将垃圾扔到桶里。如果不够有趣?你还可以将垃圾桶看作“篮筐”进行投篮。

直筒式顶部开放的结构,确实能够给我们扔垃圾带来不少便利,但同时也会暴露一些问题,就是蚊虫

因为 厨房里的垃圾桶会有很多 餐厨垃圾,也因此会滋生很多蚊虫,特别是在一些剩下的水果核上,会留下很多蚊虫。

 

脚踏式:

顶部为盖板,当需要扔垃圾时,使用者需要用脚踏住盖板,并将其抬起。这种方式就能够避免厨房餐厨垃圾所滋生出来的蚊虫

但问题又来了,在做菜时,扔垃圾通常十分频繁,每一次都需要脚踏显然效率太低。

那能否既能脚踏又能随手就扔呢?

面对这一问题,我发现了一个新式垃圾桶:

图片

它在为用户设计时,考虑到了两种不同的模式,因而将两种入口进行巧妙的融合。

通过顶部面板的开关,可以将垃圾桶设定为开启或者关闭,能够让垃圾桶在你想要的时候保持开启的状态,这样就能满足在一小段时间内的频繁扔垃圾的需求。同时又能提供脚踏的形式,将垃圾桶盖完整抬起,这样的垃圾桶既可以脚踏也可以直接扔。

而在我们设计B端产品时,同样会有 “多入口”的情况。

比如在 纷享销客 的设计当中,新建客户有着两个不同的入口:

 

入口一:首页 – 客户及商机管理 – 客户 – 新建

这是新建客户最为常规的入口,它就类似垃圾桶的直筒式。通过表格页操作的新建,让用户进行表单的填写,进而新增客户。

图片

 

入口二:首页 – 新建 – 客户

这是 纷享销客 的一个特别设计,它在导航菜单处设置一个全局的新建入口,当用户在系统的任意页面,都可以进行新建。

大家可以跟我一起思考一下,我们如果是一个销售人员,在我的工作当中,会去经常新建客户、跟进记录等,那通过一个全局的新建入口,能帮助我们更快的进行操作。这便是纷享销客的第二个新建入口。

图片

 

我再给大家举一个简单例子,同样我们在纷享销客当中,表格当中的筛选同样也是有着两个不同的入口:常规筛选与表头筛选(大家可以看我B端设计指南筛选的文章):

常规筛选:

用于表格当中一般和许多操作并排放置,算是一个较为基础的入口

表头筛选:

点击过后同样也是进入到筛选弹窗,但不同的是,表头筛选点击过后,会将表格的值带入到筛选当中,来实现筛选+选值这样的两步操作。

而为什么会有两种不同的入口,我们回过头来想想,就像我文章开头说到的垃圾桶一样,两种不同的入口,其实是为了方便我在某一个场景下进行使用(比如垃圾桶的 持续丢垃圾与开关垃圾桶盖;纷享销客  新建操作当中的 常规新建与快捷新建;)

而它不正是因为用户在不同的场景需求下,所设计的形式不同。

在B端产品当中,不同场景的需求其实经常存在,但为什么没有暴露出来?

其实是因为用户在B端产品当中,本身用户就是处于弱势群体,他们都是服从于上级的安排,而设计师不会分析,就会选择最平庸的方式去处理需求。我们往往需要基于场景去思考问题,而场景如何理解?

之后有机会再和大家展开聊聊~

 

原文链接:CE青年(公众号)

作者:CE青年


转载请注明:学UI网》从垃圾桶到“多入口”,谈谈B端设计思考

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


后台查询页面的交互样式优化

鹤鹤

一、什么是“查询”?

“查询”是指用户在通过某些查询条件进行数据筛选后,再以“表格”的展现形式进行数据呈现,以到达筛选数据,快速查看的目的。

查询的动作主要由搜索和筛选组成,这里要强调一下查询和筛选的区别

搜索和筛选的主要区别是:搜索可以自定义查询条件,筛选是必须按照特定的条件字段查询,如“是”、“否”、“不限”、“男”等条件

一般语境下,不支持模糊搜索的查询结果为单项数据,如姓名查询,订单号查询,这些查询操作只能输出一条结果,即查一得一

举例 手机号搜索 139xxxx2918 正常情况下是输入11位号码进行搜索数据 得到手机号码为139xxxx2918的各项数据,即查一得一

输入139进行搜索查询也可以得到多条手机号码包括139的数据,但是一定程度上失去了手机号搜索的意义

所以建议在后台数据查询的页面,将搜索和筛选这两个操作区域通过换行或者间隔拉大进行比较清晰的区分,不要在搜索字段的区域里面混入筛选的内容。


二、数据过多时,“查询”为什么要优化?

当数据过多,导致“查询条件”的搜索项和“搜索结果”的数据项过多的情形。查询操作优先级混乱,增加操作人员的使用负担和效率

好的查询界面可以通过折叠,新增弹框等方式,合理的编排查询层级关系,在保证查询功能完整性的情况下,高频查询优先展示,编辑方便,预览快捷,增加工作效率。


三、操作修改实例

我们来看一下什么样的界面属于查询条件过多,搜索结果项过多的页面,分析一下臃肿的部分和解决方法。

查询页面可以分为三个区域,查询条件区域、操作按钮区域和数据展示区域,分析一下3个区域冗余和待优化的地方才可以设计出交互良好简介的页面




问题分析:

1、搜索条件和筛选条件混合,功能区混乱

2、单项选择框对多选的字段兼容性差,表达效果弱

3、查询区域设计语言混乱,输入框 选择框 时间选择框 数值框同时出现 视觉上涣散,混乱 



改良目标:

1、查询区域搜索和筛选字段重新编排,并且进行优先级整理排序

2、重新设计针对多选的字段的选择组件

3、将同一数据类型的查询字段合并,页面只出现一个时间组件、数值框



改良方法:

1、查询区域搜索和筛选字段重新编排,并且进行优先级整理排序

2、重新设计针对多选的字段的选择组件

3、将同一数据类型的查询字段合并,页面只出现一个时间组件、数值框


四、具体案例

   鉴于后台系统的庞大数据量,查询条件难免会出现过多的情况,为保持各页面简洁统一,默认当数据超过N条的时候,将其余查询条件进行收起处理,防止查询条件过长,导示影响用户查看搜索结果。这种收起状态可以通过几种不同的形式呈现。


对于单个查询项 

1.相同搜索类型合并展示

鉴于后台系统查询种类繁杂,我们大体把他分为关键字搜索,日期选择,数值范围,单选多选

为保持设计语言统一,可以将关键词搜索和日期选择合并展示,折叠不同的数据项。



若一个搜索同时存在两种及以上状态,可以通过标签展示删除



2.搜索项分类选择

当搜索项中的数据项过多还可使用另一种优化形式,使用下拉框与分类形式相结合。为方便用户快

速选择加入了“本项全选/反选”和“全部全选/反选”的功能。其中,“本项全选/反选”是针对当前项

的批量操作,“全部全选/反选”是针对所有项的批量操作。


对于整个查询区域的布局

1.折叠收起过多搜索项



2.通过开关收起过多搜索项




3.通过分类搜索项目,用标签跳转区分


4.通过增加新弹框,隐藏使用频率低的查询项







问题分析:

1、操作按钮数量过多

2、操作按钮样式类似,无法体现功能优先级


改良目标:

1、精简按钮数量

2、根据按钮功能地位,强化/弱化按钮样式体现层级关系


改良方法:

1、将使用频率不高的按钮折叠展示

2、弱化次要按钮


四、具体案例






问题分析:

1、表头与关键数据列固定列表内数据行的横向、纵向数据过多

2、无法自定义展示的数据列


改良目标:

1、将重要的数据项固定,梳理过多的数据项

2、增加自定义展示数据列的功能


改良方法:

1、选择使用表头固定及关键数据列固定,方便对应查看数据标题及内容

2、通过增加自定义字段展示和支持列宽,就能尽可能多的展示需要观察的数据项


四、具体案例

1.表头与关键数据列固定

列表内数据行的横向、纵向数据过多时,选择使用表头固定及关键数据列固定,方便对应查看数据标题及内容。



2.分类筛选字段展示

数据行横向字段过多时,可将字段分类展示,根据不同的分类去展示字段,即可全局查看,又可分类查看。根据用户选择的分类进行横向滚动,方便查看数据。



5.自定义筛选字段展示

数据行横向字段过多时,还可将字段自定义展示,用户可以自定义选择展示的筛选字段和调整顺序,根据用户的要求将常用的高频率的筛选字段优先展示,提高工作效率。




五、实际操作

以上的内容是按照查询页面的三个部分臃肿的地方提出的解决方法,但是优化查询页面的交互,使得查询操作既高效又舒适

还是得依据各个查询页面的业务需求,将以上不同的解决方法组合,才能得到一个适应于自己当下任务的方案。

方案一

查询条件区域    将低频率的筛选条件折叠到高级筛选中+搜索项分类选择+将关键字搜索字段合并展示

操作按钮区域    将低频率的操作按钮折叠到更多按钮中    

数据展示区域    使用分类展示+表头与关键数据列固定



优点    首页展示查询内容最少,页面简洁,可以展示更多查询数据,页面和弹框内将类似字段折叠展示,内容紧            凑,操作便捷


缺点    页面交互路径增长,编辑数据要进弹窗,不够方便,次要按钮和次要查询字段被折叠隐藏,新客户不易找            到



方案二

查询条件区域    通过筛选开关,选择是否展示筛选字段 字段选项铺开展示

操作按钮区域    将低频率的操作按钮折叠到更多按钮中

数据展示区域    使用自定义显示表格字段





优点    首页可以直接编辑字段,展示内容最多,直观方便,可操作性强,交互路径短

缺点    页面铺开高度过高,关闭筛选开关无法预览筛选条件,打开开关,则压缩表格空间,电脑一屏展示数据较            少


灵活运用布局和组件的简化方法,才能搭配出适合自己产品的最优设计,以上内容仅供参考,希望大家可以学到的是设计方法,而不是组件和布局本身。感谢观看。

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

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



文章来源:站酷  作者酸奶烤鸭

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

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



围绕应用生命周期的编排设计

鹤鹤

什么是围绕应用生命周期的编排设计

围绕应用生命周期的编排设计是一种企业级技术产品设计策略。

它的核心是要解决设计师很难上手企业级技术产品,且更加难以找到体验设计机会点的问题。我们是一群工作在企业级技术产品领域里的设计师,同时也是掘金者,这篇分享即是我们在企业级技术产品领域里探索的一些方法总结。

 


当设计遇上技术

工作现状

在我们日常工作中,和技术产品 PD 聊需求是一件非常痛苦的事情,他们讲的每一个字都认识,但是组合起来就不知道是干什么的了,因此设计师也很难去想象用户是怎么在用这些功能。

因此相较于 C 端产品来说,B 端的技术产品目前还处于基本可用的状态,更谈不上什么体验了。

 

分析原因

究其原因,我们总结有三点:

① 这些产品大多数都是由技术来主导,功能优先

② 设计在整个流程中都处于非常被动的状态

③ 设计与技术之间存在一定的专业壁垒,技术往往比较抽象难以理解

同时,我们的用户并不是客户,用户不能根据自己的意愿喜好选择产品。用户隐藏在企业内部,设计师日常中很难接触到真实用户。另一方面,用户的技术专业背景与设计师的专业存在鸿沟,这使得设计师对用户需求的理解也不够深,所以说在这种环境隔离和语境不通的状态下,设计师其实难以和用户构建同理心。

 

能做的事

在这种狭小的设计发挥空间里,我们能做什么呢?

其实我们设计师有明显的优点:

比较擅长找规律找方法,有破局意识,从而能够发现设计的机会点。


 

企业级技术产品设计探索

发现规律

所以我们回过头看一下之前做过的这些产品和功能,从它们的作用对象、出现时间、用户目标、用户行为这四个维度对他们进行归纳和总结。

我们发现这些产品具有很强的阶段性,通过不同的产品来支撑各个阶段下的用户目标。用户通过产品的功能来实现各种编排动作,例如对应用本身代码的编排、对应用依赖的底层资源的编排,从而支撑用户应用的生命周期。

因此企业级技术产品具有以下四个特点:

  • 阶段性

  • 驱动性

  • 流程性

  • 抽象性


提出策略-围绕应用生命周期的编排设计

首先我们要针对这四个特性进行一轮判断,了解这个产品的场景,场景下对应的角色,每个角色执行的是单线还是多线任务流,以及任务流是由哪些功能支撑。经过这层判断之后再定位具体问题:

① 每个阶段的目标是什么

② 阶段下每个角色各自的小目标又是什么

③ 任务要对应用还是应用相关的内容进行编排

④ 产品的功能是如何实现的


当找到这些问题的答案以后,我们就可以对产品的上下游场景进行编排,明确各阶段的侧重以及上下游场景的限制条件;对角色进行权限分配以及协作触点的确定;将任务流从起点到过程再到结果进行梳理;以及最后通过对底层技术的理解,合理编排产品信息架构和界面内容。

为了能够更加高效的完成以上信息的收集和处理,我们沉淀了 CMTD 四个小工具。

 

策略详解

C 是 Collaboration,协同场景,主要回答四个问题:When、What、Who、Where。

① When:用以明确产品所处阶段以及上下游阶段,以全链路的视角看用户的完整使用场景,因为产品往往可能只是解决用户部分场景的问题

② What:定义当前场景的阶段目标以及要做的事情

③ Who:当前阶段的事情由哪些角色参与

④ Where:这些角色在线上或线下是如何配合协作的

例如我们要做一个技术产品,通过 Collaboration,我们知道它覆盖了发布阶段、日常运维阶段,目的是把经过测试的应用发布上线并进行日常维护,主要是运维人员配合研发人员和发布经理完成线上的问题排查和线下配置文档的交接,我们就能比较清楚的知道我们要做的是一个运维平台。

 

M 是 multi-role,多角色,主要用以分析产品是由哪些角色共同协同驱动的。

与 C 端产品不同的是,我们除了对核心角色的自然人属性进行洞察,还要定义清楚该角色的目标有哪些,目标对应的任务流以及支撑的功能和权限。并且企业级技术产品往往都不是一个角色就能完全执行完成,所以该角色的上下游角色也要摸清之间的协作触点在哪里。

多角色的信息我们可以通过在客户现场或者用户访谈来收集,并沉淀为用户角色库。

基于收集来的用户信息,来定义我们产品的角色:

 

T 是 Task flow,任务流。任务流一定是基于一个用户角色的某个目标,来定义任务的起点-过程-结果。

起点就是界面上用户的操作入口,过程需要包含触发操作、自操作、条件判断以及是否有协作角色参与进来,在结果处除了提供结果反馈还要提供下一任务的去向入口,帮助用户把流程串联起来。

任务流可以借助现有流程的走查或按照 T 模型来梳理任务流信息,从而帮助我们更好的定义一条用户的任务流是如何执行的。

例如我们要做的运维平台的产品,核心角色是运维,他其中的一个目标是为应用创建工作空间。按照 T 模型,我们可以很方便的将这条任务流定义出来。

 

D 是 deep ,深化。主要从两个维度展开:技术架构和逻辑原理。这是两个在做技术产品的过程中经常会接触到的两个概念。

在分析技术架构时,我们可以重点关注两个点:看由哪些功能模块构成,这些功能之间的静态结构,是包含关系还是依赖关系。分析逻辑原理,一是了解这些功能产生的实例,是一对一的关系还是一对多的关系,信息或流量在这些功能模块之间如何流转。通过这些分析,我们可以把掌握的功能特征和逻辑规律。

举例来说,运维平台的核心角色运维人员需要为应用创建工作空间,按照梳理出的任务流,用户需要经过3次跳转7步完成,那这个是否还有优化空间呢?

我们可以从 Deep 深化的角度入手,看这条任务流是由哪几块功能支撑的。例如工作空间内包含网络和安全组,安全组内包含负载均衡和虚拟机。就像我们了解汽车的制动装置,看到装置内包含气室,气室内包含活塞体、密封垫,密封垫连接在推杆上。

再从逻辑原理图入口,了解流量会先按照工作空间进行隔离,从工作空间走专有网络还是经典网络,网络将流量分发到安全组,安全组里的负载均衡会负责调配流量到虚拟机。他们之间层层递进互相依赖。就像汽油从油箱到达制动装置,在发动机里和空气一起被压缩燃烧后能量转化转送到动力装置一样。

通过上面的分析我们了解到这几个功能其实是紧密关联的,用户没有必要分散到不同的地方进行添加和创建,完全可以借助流程表单和抽屉把他们串联在一起。

因此我们找到优化体验的机会点,把之前需要三次跳转7步完成的任务流,优化到1个入口5步完成。

 


总结回顾

企业级技术产品有四个特性:阶段性、驱动性、流程性、抽象性。通过 C、M、T、D 四个小工具来帮助我们收集和归纳信息,实现对上下游场景的编排、角色的定义、任务流的编排以及界面的编排。



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

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


文章来源:站酷  作者:Ant_Design

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

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


B端产品布局设计规范

鹤鹤

一、布局原则:古登堡、尼尔森

二、结合B端产品和页面分析

三、大厂布局设计规范分析

四、总结

一、布局原则

布局设计在设计的每个领域都有涉及,这里说的不是设计中的布局四原则:亲密、对齐、重复、对比(专业术语:格式塔原则),这是平面设计中常用的布局方式,我的理解就是排版。但B端的布局设计是不同的,每个企业或者产品的设计规范有各自不同的依据。

B端页面布局最常用的原则我见过有两种:古登堡原则和尼尔森F型视觉模型。下面是网上找的图:

(1-侵权提删:古登堡原则)

古登堡原则:阅读引力是从上到下,从左到右,呈现Z字形移动,而起点和终点会作为重点视觉记忆区,中间过程会轻扫作为次要视觉记忆区。左上和右下是用户会比较容易关注和注意到的地方。

 

(2-侵权提删:尼尔森F模型)

尼尔森F模型:我们在第一次观看页面时,视线会呈 F的形状关注页面。先从顶部开始从左到右水平移动,目光再下移开始从左到右观察但是长度会相对短些,以较短的长度向下扫视,形成一个 F形状。

这两个原则都是从用户视觉角度分析,在按需带入产品页面设计的。没法单纯的说哪个对哪个错,或者说哪个更好。因为要结合产品属性、信息结构、及用户心理等因素。

二、结合产品和页面属性分析

我们公司产品的列表页面是参考古登堡原则制定的布局设计规范。这是一个运维产品(我们通常称为SaaS:软件即服务)-列表页面的模板,可以看到大部分内容被表格占据,且表格中的内容是相似的。通过与腾讯蓝鲸团队的沟通,最终确定这种布局的页面用户视角浏览流程是“Z”型的。

主要操作按钮在左侧的第一视角区,通常以“新建”等主要按钮为主、“导出”或“批量操作”等次要按钮为辅一同摆放。因为列表通常是某个任务的罗列,会把新建的入口也放在一起,一是为了方便用户快速找到新建任务入口,二是为了让信息结构更聚拢。强休息区放搜索框。在不同场景下,按钮和搜索框位置要视需求确定位置。在我们公司的大部分产品场景下,按钮是在左侧。最终落脚点是在操作字段(表头属性,技术角度称为字段)。

 

弹窗的布局也是类似的,很容易可以判断出标题和确定、取消按钮是两个视角落脚点。

 

当然不是所有页面都遵循古登堡原则,像下面的表单页面就是使用F模型。因为最主要信息标题都在左侧,且信息流是集中往下走,并不分散也不需要横向跨度很大。所以使用尼尔森F模型就可以支持布局走势。

 

三、大厂布局设计规范

这里以腾讯Magic Box VUE组件库和阿里AntDesign来分析我个人的理解:

 

这是从antdesign官网找到的信息复杂度和相关性模型,选用相应的信息呈现方式,选用合理的布局方案来承载详情页的内容。这应该是阿里内部自己建立的布局规范,既不符合古登堡原则,也不适应尼尔森F模型。但从地下不同页面内容的分布来看,我觉得是把这两种模型结合了。请看下图:

 

古登堡原则注重左上角和右下角的内容。尼尔森F模型是只注重左侧内容,这种布局方式通常是信息量比较大时用的比较多。我们把页面的内容拆开看就可以分析出,每个模块也是可以分成不同模型的结合。

 

腾讯Magic Box的布局规范就是前面我们公司用的是一样的,就不多分析了。

四、总结

通常:信息流页面使用尼尔森F模型。需要用户操作页面的则常常把古登堡和F模型结合使用,具体使用哪种看两个:1、用户在页面的常用操作是什么,2、你想或者说是产品想传递给用户的信息是什么。

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

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



文章来源:站酷  作者:lq934731638

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

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



快速提升B端图表用户体验的15小细节

涛涛

图表作为一个使用频率不高却很重要的组件,让设计者们操碎了心。看着自己设计的图表,总觉得有哪里不好,但又说不上来。本文作者总结了快速提升B端图表用户体验的15小细节,一起来看一下吧。

B端界面中使用频率不高,但却无比重要的组件——图表,可谓是让设计者们烦透了心。图表设计起来不难,但想要设计好,也是需要下一番功夫的。

很多小伙伴问我,说:每次在设计图表的时候,总是找不出自己哪里设计的不好,但看着自己设计的图表,又没有那么满意,该如何办呢?今天,我们就来一起了解下B端的图表,挖掘一些设计者们平时未曾捕捉到的细节,获得这些细节,将从细微之处提升产品的用户体验。

本文将从以下五个部分来展开:

  1. 什么是图表
  2. 图表的优势
  3. 开源图表库有哪些
  4. 15个图表小细节
  5. 总结

一、什么是图表

百度百科解释:“图表,Microsoft Office用语,泛指在屏幕中显示的,可直观展示统计信息属性(时间性,数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观,形象的‘可视化’的手段。”

根据百度百科的解释,我们来做一个”数据图表化“的小推导。我从网站找了一段描述低码的数据(数据来源艾瑞咨询,并做了一些小修改),如下:

“2016年开始低代码概念开始从国内逐渐兴起,当年低代码相关产品投融资事件达10起,亿元以上融资数量2起,至2020年中国低代码市场共有59起投融资事件,其中亿元以上融资共有13起。2017年融资事件11起,亿元以上融资3起;2018年融资事件12起,亿元以上融资2起;2019年融资事件12起,亿元以上融资3起;2020年融资事件14起,亿元以上融资3起。随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升,市场会迎来新的发展契机,短期内投融资热度将持续增长。”

虽然以上的文字已经做了一些简练,但阅读时候不免觉得有些绕,不能很直观的理解数据,且要记住关键数据还是较为困难的。

下面,我们对以上文字进行再次梳理,适当分段,进行结构化排版:

“2016年开始低代码概念开始从国内逐渐兴起,当年低代码相关产品投融资事件达10起,亿元以上融资数量2起。

至2020年中国低代码市场共有59起投融资事件,其中亿元以上融资共有13起。

2017年融资事件11起,亿元以上融资3起;

2018年融资事件12起,亿元以上融资2起;

2019年融资事件12起,亿元以上融资3起;

2020年融资事件14起,亿元以上融资3起。

随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升,市场会迎来新的发展契机,短期内投融资热度将持续增长。”

通过分段描述,以上段落显得清楚了很多,但是例如”融资事件、亿元以上融资“等词语还是反复出现,整体来说不够简练。

那么,我们再将以上数据进行表格化展示来看看,如下:

我们可以发现,表格的展现形式比分段的结构化文本又清晰了太多,使得数据展示非常直观。不仅用户可以看清楚数据本身,还可以对比数据,假如表格再设计的人性化一些,可以将最大值进行重点标注(根据业务需要对数据进行差异化标注)。

不过表格也有劣势,无法展现数据随时间变化的趋势等问题。我们再次仔细阅读上述数据,可以梳理出如下图表。

上图将2016年到2020年的融资事件总数进行了重点处理,亿元以上融资事件数量进行了次要处理。并且用柱状图叠加折线图的图表表达了2016年到2020年低码融资事件数量的趋势情况。

二、图表的优势

综上所述我们可以发现,从通常意义上来说,图表优于表格,表格优于结构化文本,结构化文本优于普通段落。那我们来看看图表有哪些优势。

1. 针对性

一图一类型是图表的特点,例如柱状图是用来比较同一指标下不同对象情况的图表;饼图是展现部分与部分之间,及部分与整体之间占比的情况。我们在使用图表时,需要先对数据进行判断,再选择合适的图表进行展现。

2. 直观性

图表与文字相比,在数据的表现上非常直观。不仅可以让用户一目了然地看到数据,还能让用户将数据进行对比,从而发现问题,定位原因,解决问题。

3. 混合与拓展性

根据数据的属性,图表是可以进行混搭与拓展使用的。混搭是指图表和图表可以拼搭使用,例如折线图与柱状图经常合体使用。拓展性是指根据基础图表可以拓展出一系列个性化图标。例如堆叠柱状图是由基础柱状图衍生出来的。

三、开源图表库

目前开源的图标库以下几种:

1. AntV G2

在AntV的官网上,是这么描述G2的:“一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。”

2. ECharts

百度百科:“ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。”

3. High Charts

百度百科:“Highcharts 是一个用纯JavaScript编写的一个图表库,能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。”

4. Chart.js

Chart.js是一个面向设计人员和开发人员的简单而灵活的 JavaScript 图表。以下是Chart.js的文档链接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一个面向设计人员和开发人员的简单的响应式图表,是前端图表生成器。

目前来说B端产品使用最广泛的图标库是AntV G2和ECharts。

四、15个图表小细节

在大致了解了图表以后,笔者总结了基于自身经验、团队经验与行业经验的图表小技巧。希望这些小技巧能润物细无声地影响我们的设计者,从而为B端提升一点小体验。

1. 折线图2px

通常在B端中,我们用到线,以1px居多。但在折线图中,我们经过反复推敲,发现2px线优于1px线。首先,2px线条显得有力而清晰;其次,在线条多的时候,便于分辨。

2. 柱状图间距

柱状图中柱子与柱子之间的间距与柱子的宽度一致就好,且最左边和最右边柱子距离两边的间距为柱子的一半。如下图所示,若柱子的宽度为X,则柱子与柱子间的间距为X,两边柱子距离各自向外间距为X/2。

3. 刻度值

图表上的刻度值递增数值根据实际情况需要做适当约束,如最大数值为150,就不适合刻度值上线标记为1000。其次,若业务数据一直处于动态变化中,则图表Y轴可以设置成动态。

4. 饼图文字显示

在饼图分类较少时候,可以将文字写在饼图上,但当分类较多时候,文字适合写在饼图外。

5. 饼图块排列

饼图块排列也是个值得考究的事情,通常来说,饼图块呈顺时针方向旋转,且以12点钟方向为起点,块面从大到小布局,若有“其他”模块,则放置在最后。

6. 标签位置

通常标签都会放在图表的上方区域,但这并不是一成不变的规则,例如当折线图线较多的时候,可以考虑将标签直接跟在折线的尾部。同时可以做一些交互效果,鼠标点击标签可以让线弱化或者显示。

7. 图表色彩

图表在配色上要使用区分度大的颜色,不要为了好看而使用相邻的色彩,这会导致图表的可读性大大降低。如有条件,建议在色彩上考虑无障碍视觉。

8. 同类色使用

属于同一色相,不同明度和饱和度的颜色,也是有使用空间的,通常表示同一对象的梯度变化。

9. 显示重点

当图表上数据及其多,且产品团队压根没打算将数据量减少时,我们可以考虑展示重点数据(系统默认展示推荐重点,用户可以自己选择他所需的重点),弱化其他数据。

10. 标题的妙用

标题不仅仅是用来呈现普通描述的,在特殊场景下,标题描述可以稍微进行变化,从而达到直观表述图表核心含义的目标。

11. 时间周期太长

某些业务的数据统计需要跨很长的时间周期,这时,图表无法满足如此长周期的时间展示需求,我们不要慌,可以通过以下几种方式去解决。

11.1 添加缩略滑块

给图表添加缩略滑块,可以通过拖拽滑块了查看某段时间范围的数据。滑块拉拽的越大,可以看到的时间范围越大,但注意,会有极限值。

11.2 添加滑动滑块

给图表添加滑动滑块,可以通过滑动一个固定大小的滑块,查看某短时间范围的数据。它与缩略滑块的区别在于,滑动滑块每次看到的时间段是一致的。

11.3 区块放大镜

如果图表的呈现就是希望时间周期显示完整,那么当时间周期较长的时候,颗粒度可以展示的稍微粗一些,不用太细,例如无需2月1日、2月2日、2月3日、2月4日、…连续展示,只要2月1日、3月1日、4月1日、5月1日、…间隔展示即可。在交互上,鼠标移入图表区不断进行某时间周期数据框选(即放大),就可以让框选区数据不断清晰。日K线常用此类方法去做。

12. 时间轴显示

当时间轴日期跨越在当年时,无需每个时间点都带上年份;而当跨年时,可以带上年份,这样可以保证时间轴显示更简单,不拥挤。

13. 等宽字体

若图表中会采用表格去协助查看某类数据的明细,联动展示,那么表格中的字体建议使用等宽字体,等宽字体方便用户用视觉来比较大小。

14. 数据归类

指标大盘上放置着各类型图表数据,建议设计者们对数据的进行归类整理,属于一类的数据临近展示,方便用户连续性查看相关数据。

15. 静态与动态图表

图表分为静态和动态图表,当业务呈现较为简单时,使用静态图表就好。而当业务复杂,一张图表难以表达细节时,就要考虑动态图表去呈现了,“鼠标交互,数据扩展和下钻”是动态图表的特征。

五 、总结

图表的小细节远远不止文中提到的这15种,还有好多好多。由于每时每刻都有设计者因为产品需求创造出新的好用的图表类型,图表成为了B端可持续探索的一片海洋。


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

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


文章来源:人人都是产品经理  作者:知果

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

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




UI/UX设计趋势@2021年中期盘点

鹤鹤

往往伟大的事业都是从七月开始的、我用一个设计师的视角,来盘点一下UI/UX行业这半年的设计风格走势。

以下我从色彩、图形、图标、排版、行业趋势这五个层面进行一些2021年中期盘点总结。


在色彩方面,虽然UI是一个相对独立的设计环境,但其实一直是在跟随平面的趋势。

 


年初潘通发布了2021年的色彩流行趋势,灰黄色一时间成为了我们追逐的目标。

但是潘通流行色更多是表现了一种当下的社会情绪与远景追求,并不是用来指导设计的。

(图片来源:Dribbble)


在UI的色彩方面,我们都记得2020年还是流行的是高饱和色彩路线,而2021年UI色彩一下子就被冲淡了,各种低饱和度色彩的作品更加得到设计师的青睐,似乎也昭示着大家的情绪也从疫情中慢慢稳定了下来,这个世界的确需要设计来对情绪进行即时表达,在5月份Google的全新Material You设计语言中,这种低饱和色彩也被发挥的淋漓尽致。相信低饱和度色彩将在2021下半年会延续发展!


有关Material You信息可以看一下我的另一篇文章《Material You 为你而来!》


(图片来源:Google Material You)


(图片来源:Dribbble)


图形方面,亮点在3D!毫无疑问3D插画在2021上半年继续着他的强劲势头,2021上半年涌现出了大量优秀的3D风格插画,并且不止是3D卡通人物,在产品渲染和背景展现上也在酝酿新的力量。特别说明的是,设计工具的高速发展也让3D门槛不断降低,如果你只盯着C4D那就真的OUT了,像Blender Spline Stager 这样的新兴轻量级3D工具软件是需要特别关注的,也许这些新工具是真的能让你跑出与别人不一样的赛道。


(值得关注的3款新兴3D软件)



在2D图形方面,也有突破,除了传统的矩形、圆角矩形、圆形之外,UI中将会引入到更多的形状,像多边形、三角形、不规则形都会大量的出现在UI设计中,UI设计越来越开放和放得开了!



(图片来源:Google Material You)


随着去年底苹果BigSur操作系统的发布,3D图标着实火了一段时间,出现了不少3D风格图标。但是后来大家发现在图标在2D层面其实还是很有创新点的,并且也更加实用,所以我们又看到了磨砂玻璃风格图标走入了我们的视线。这种采用背板透光设计的风格图标,看起来清新自然,一经亮相就让设计师们喜欢起来了!

(图片来源:Dribbble)


但无论是3D风格还是磨砂玻璃风格图标设计,从某种意义上说,这些都是拟物化设计的一种新的回归方式,设计就是一个圈哪!


排版设计,块状与字体成为了关键词。先看几个作品,你发现了什么了吗?


(图片来源:Dribbble)


UI设计的排版不止是为了视觉好看,更多是要做信息的分割与归类,让信息阅读快速准确且优雅!从某种方面也就是我们说的用户体验。当下仍然是扁平化为主体UI设计语言的时代,阴影设计几乎已经退出了当下的主流设计,所以在信息的区分上靠的就是留白与文字,所以加粗大字体,卡片留白、形状色彩块就在UI排版设计中起到重要的作用。再辅助通过一些微交互动画,一切都是那么自然丝滑,主次分明!


(UI排版的三个趋势)


最后我们说说行业趋势方面,在2021上半年的UI设计作品中,除了常规的移动端APP UI设计之外,我们更多看到了一些针对于其他设备的UI设计,比如说电脑B端应用、车载HMI、数据可视化、交互动画等这样的新端趋势,并且这些作品的数量越来越多了,所以从行业趋势来讲,UI设计师们还是要打开更多的眼界和格局,设计的竞争不止是在水平能力上,更重要的是行业赛道的选择!关注趋势尤为重要!


(图片来源:Dribbble)

(需要关注的四个新端设计趋势)



用我开头的那句话,做个结尾吧! 往往伟大的事业都是从7月开始的,无论你上半年是硕果累累还是颗粒无收,现在开始!一切都还来得及,还来得及!


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

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



文章来源:站酷  作者:残酷de乐章

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

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



日历

链接

个人资料

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

存档