首页

B端设计师如何快速了解业务

seo达人


1.查阅报告“知”行业

如果是之前从未接触的新业务,我们可以通过市面上的行业报告,来对其有一个宏观的认知,因为在行业报告中,会提到 SaaS 产品相关行业的发展状态政策导向以及未来的发展趋势。

比如在 艾瑞网的 《2020年中国企业级 SaaS 行业研究报告》 当中,通过报告你能了解到 SaaS 行业究竟是为何进行快速的发展,并且在未来几年的发展趋势,并且通过报告,能够构建起你对整个行业的宏观认知。甚至找到行业当中的头部产品,同时能够对其进行体验。(当然如果没找到,可以使用我们的B端竞品书签~)

图片

行业报告相关网站:

艾瑞:http://report.iresearch.cn/

易观:https://www.analysys.cn/

 

2.通过竞品“学”词汇

专业词汇它是B端设计师的一个门槛,在实际工作沟通当中都需要通过专业词汇来进行准确的描述。比如在CRM产品当中,我们必须要了解:公海池、商机、线索、跟进记录 等一些基本词汇,而词汇的背后往往是一个较为庞大的功能,又或者是产品当中的深层逻辑。

其实这就如同我们学习英语一样,只有先学习“单词” 才会有后面的“短语以及语法”,而行业当中,其实是有类似的“英语词典”来帮助我们进行学习。

还是以CRM为例,行业当中较为头部的竞品为:纷享销客、销售易

通过竞品的官网、产品内部,我们可以寻找到“用户手册、帮助中心”等模块,这里面就会有相应的专业词汇的讲解,我们可以通过 竞品的产品对其用户的解释,也让我们作为用户,对于该模块会有更深的理解。

图片

你可以自己学者找找,找不到我这里也提供了网站链接

纷享销客帮助文档:https://www.fxiaoke.com/ap/datacenter/

销售易帮助文档:https://www.xiaoshouyi.com/service/help

 

3.销售客服“理”流程

业务流程往往是一件复杂的事情,因为不同的产品其流程的侧重点也会不尽相同。但可以利用官网去了解该产品更擅长哪方面的功能模块(在对B端产品的官网设计当中,都会突出强调产品的特点,进而提升转化)。比如在纷享销客与销售易的官网首页当中,产品模块都有着这样的一些不同点:

图片

对于这些不同点,我们可以利用B端产品功能演示的形式,来让经验丰富的销售人员来进行解答。

比如在面对销售易的销售人员时,我们可以问:“我对比过你和纷享销客的产品功能,你们的销售云和纷享销客的销售管理在流程上有什么区别,有哪些特点呢?”

而我们可以通过销售人员的解答,清晰的了解到两者之间的差别,以便于为我们在之后接到类似需求时有所帮助。

当然一定要在销售人员演示结束后说上感谢,因为“利用”别人本身不太好。

 

4.试用产品“看”结构

试用往往是在真实的环境下对该产品进行体验,试用可能是销售人员给到你相应的体验测试账号,也有可能是让你注册一个测试环境。但要记住并不是所有的系统都有试用的功能,有些产品你需要通过“间接”的方式才能体验(间接指的是通过 企业微信、钉钉、飞书 这样的平台注册团队 登录获得产品的体验环境)

我见过很多设计师试用产品就是一味的点点点,像个无头苍蝇。

设计师应该根据上一步销售人员演示的流程进行相应的页面梳理,通过截图将该产品的主流程进行截图。最终将页面流程静态的还原到设计图上,这样做有两点好处:

  • 1.在时候遇到同类型需求时,能够快速了解竞品的功能设计思路
  • 2.帮助我们在产品的后续更新迭代,有了可以参考的版本

 

结语

通过以上四个步骤,基本能够对一个B端新业务有所认知,希望能够对你有所帮助。

 

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

作者:CE青年

转载请注明:学UI网》B端设计师如何快速了解业务

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

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


文章来源:csdn

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

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




学好这个方法,可以解决80%的Logo设计

seo达人



设计logo你用过最多的手法是哪一种?加法是logo图形设计中最主流的设计方法,即把两个或两个以上的图形元素,结合成一个全新的图形,每个做过logo的设计师应该都用过这个方法。

 

前不久,一个朋友发了他公司新设计的logo给我看,问我怎么样?他的公司叫达志文化,主要经营与教育相关的业务,他发来的Logo长这样:

好不好我就不评价了,我想说的是,logo设计中的加法并不是简单地把几个元素相加就可以了,讲究的地方其实有很多,葱爷分享几点自己的经验。
1

 一、有哪些比较主流的加法?

01.品牌名首字母相加

可以是大写字母相加、也可以是小写字母相加,关键看哪一种形态更容易结合出高质量的图形,结合的方式常用的有:

①叠加,比如L V、圣罗兰的Logo。

 

 

②共用笔画,比如服装品牌UR。

 

以及陈幼坚最近为香港公开大学设计的Logo也是这种做法。

 

 

③融合,比如交通银行的Logo把首字母c做字母b的负形。

 

比如李宁的Logo首用字母L和N融合成一个类似红旗飘扬的图形。

 

④创意组合,比如LG的Logo用L和G组合成一个笑脸。

 

 

大众汽车的Logo用V和W组合成类似三个胜利手势的图形。

 

02.品牌名的简称相加

这种做法适合比较简洁的文字,且通常为两个字相加,加法的组合形式与字母相加差不多,比如北京大学的Logo是用“北大”二字组合而成。

 

我在大学期间为北部湾艺术研究院设计的Logo,则是用“北”字和“艺”字融合而成的。

 

 

03.品牌名首字母加代表行业属性的元素

使用这种做法的品牌非常多,比如抖音的Logo是用小写字母d加音符图形融合而成的。

 

 

饿了么的Logo是用小写字母e加吃豆人的图形融合而成的。

 

 

04.品牌名“首字”或关键字加代表行业属性的元素

比较典型的代表案例是中国银行和工商银行的Logo,分别用“中”字与“工”字加铜钱图形结合而成。

 

 

再比如中国南方电网的logo,是用“电”字结合电线、电线杆而成。

 

 

05.品牌名中提到的元素加代表行业属性的元素

比如西瓜视频的Logo是用西瓜图形结合视频符号设计出来的。

 

 

贝壳找房的Logo是用贝壳图形结合房屋图形得来了的。

 

06.代表行业属性的元素相加

比如网易云音乐的logo是用音符图形加上唱片图形。

 

比如葱爷以前为一个饰品品牌设计的logo,是用四叶草图形与星光图形结合。

 

 

二、用加法设计Logo有哪些讲究?

01.美观

logo设计的最基本条件是要美观,因为这个符号代表了一个企业、一个品牌的形象和精神面貌。另外,这个符号以后还会出现在品牌对内对外的绝大部分物料、媒体上,如果logo不好看,就会影响到所有的其他设计。

 

如何让自己设计的logo图形好看呢?提升自己的审美当然是最重要的,比如每天都要看一些优秀的logo设计作品,还可以多看一些图形、图案作品等等,当然这是一个需要慢慢积累的过程。

而想快速知道自己设计logo好看不好看,你可以把自己的logo与众多优秀的logo放在一起,如果自己的logo明显不“合群”,那多半是你的logo设计不够好看、不够专业,那么你就要继续尝试其他的图形组合方式,或者是优化一些影响图形美观的细节,比如线条、轮廓、配色等。

例如几年前我给一个叫“音眸”的服装品牌设计了一个logo,也是用了加法,我用品牌名相关的两个元素:高音符号和眼睛做结合,刚开始是这么结合的:

 

 

但感觉造型不是很美观,于是我又进行了其他尝试:

 

这种结合方式感觉更好一些,但图形的比例以及线条的细节不到位,所以我又继续做了优化,从而得到了最终的方案:

 02.要具有行业属性

例如文章开头列举的达志文化logo,就只是用字母“D”和“Z”做了简单的相加,这样的图形凭什么说他是达志文化的logo呢?任何一个品牌字母是D和Z开头的品牌都可以这么做。

所以,设计出来的新图形一定要具有该行业的气质和特点,例如李宁旧的Logo是由其品牌首字母L和N组合而成的,且组合出来的图形很有动感、很简洁,这就贴合了运动品牌的属性,而不是直接用两个简单的字母加在一起就完事了。

 

如果logo图形只是用字母或文字简单组合而成,那么这些文字的字体则一定要与该行业的气质相符,比如LV的logo是由品牌首字母的简单相加,并没其他深刻的含义,但由于其使用的罗马体具有优雅、高端、经典等特质,以及图形也还算好看、独特,所以它们的logo总的来说还是符合行业属性的。

 

还有一种处理方式是,除了文字以外可以再融入一个能体现该品牌行业性质的元素,比如LG的logo是用品牌首字母L和G组合成了一个笑脸图案,寓意热情服务、客户至上,这就让这个Logo有了内涵。

 

我设计的北部湾艺术研究院logo图形,刚开始的方案是这样的:

 

虽然也是把“北”字与“艺”字完美的结合起来的,但是该图形在气质上与艺术学院并没什么联系,所以后来我在此基础上加上了传统的回形纹,传统艺术的感觉就加强了。

 

03.可识别

图形中融合的几个主要元素最好能清晰、易识别,而不是只有设计师自己能看出来。有些设计师为了让logo图的寓意尽量丰富,把五六个图形融入其中,结果是别人一个都看不出来,这就很没必要,因为一个图形融合的元素太多很容易做成“四不像”,而且logo设计并不是寓意越多就越好,如果寓意足够准确、可识别性足够高,那么一两个足以,否则就算再多也是徒劳。

比如中国银行的Logo图形,“中”字代表中国,铜钱代表银行,简单易懂、易识别。

 

再比如耐克的logo图形就是一把勾。

 

前段时间长隆要我们帮设计一款“奇妙动物直播间”的logo,我也是使用了加法,创意是用动物掌印结合视频播放符号,刚开始的方案是这样:

 

为了照顾完整的圆形外轮廓,我把整个掌印图形都所在圆内,但这样做就导致了,三角图形没有在圆形的正中央,于是弱化了视频播放符号的识别性,所以后来我把整个掌印图形向右移动冲出了圆圈,这么做不仅加强了识别性,而且使整个图形变得更特别。

 

 

加法可以让logo图形的设计有理可依、有迹可循,可以增加logo设计的合理性,所以很受设计师和客户的青睐,但加法只是手段而不是目的,所以,在使用加法的时候也千万别忘了logo设计的一些原则性问题,比如:美观性、简约性、相关性、原创性等。

 

原文地址:站酷 

作者:葱爷

 转载请注明:学UI网》学好这个方法,可以解决80%的Logo设计

好的表格信息展示都有这三个特征

资深UI设计者

表格是B端产品中出现最高频的模块之一,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。

前言


表格作为组织整理数据的手段,可以有效的向用户展示数据信息,是B端产品中出现最高频的模块之一。

下图为典型的B端表格示例:



用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷的实现以上场景中的诉求。

今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。


///


一、疏密适度


常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元,行高和列宽的定义决定了表格信息的疏密程度,进而决定了表格给用户的直观感受,因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。



1、定义合理的表格行高


a、行高模数设定

在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯(多行行高同理去设定)。



根据用户场景的不同,来选择模数倍数,需保证系统内使用统一的模数。比如,针对用户快速浏览获取大量数据场景时,可以选择1.2倍作为模数,列表更为紧凑,同样扫视范围内,可获取更多信息。


b、为小屏幕考虑一屏显示的行数

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。对于1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于1366×768、1280*720等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。


c、用户自定义行高的场景

B端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因,有些用户喜欢表格行高值大一些,看起来舒适透气,便于阅读。而有些平台用户由于很熟悉线下excel表格模式,希望线上的表格也尽可能像excel那样紧凑,以便他们在一屏内看到更多的数据,进行对比,提升工作效率。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

例如,Gmail提供默认/标准/紧凑三种表格密度设置,如图:



2、灵活扩展的横向空间


通过对表格固定位置与列宽的调整,扩大表格数据空间,使信息不局促,空间更透气,保证横向扫视易读性。


a、列宽极限值设定

设计师需要根据表格承载内容定义表格的列宽,应包含最大/最小/默认列宽的定义以及使用规则。

我推荐的一个规则是:

规则1:当相对列少【浏览器宽度-页面其他模块 > 全部列的默认宽度和】,则各个列自动等比拉伸,撑满屏幕;

规则2:当相对列多【浏览器宽度-页面其他模块 < 全部列的默认宽度和】,则出横向滚动条,每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现【对联式表格】。对联式表格最大的问题在于,一屏内展示的行数有限,当用户纵向对比数据时,需往复滚动多次,记忆压力大;横向扫视时,阅读视线不能一直保持左右横向预览,而是不停上下左右切换,使用体验不佳。



b、横向『偷取』屏幕外空间、行高模数设定

当压缩列宽也无法在有限空间内展示大量的数据指标列时,我们可以借助横向滚动来『偷取』屏幕外更多空间。横向滚动需用户拖动滚动条进行浏览,有一定操作成本,所以要结合业务实际情况选用是否利用屏幕外横向空间。

随着行和列的增加,用户的瞬时记忆会达到极限,超过“7±2原则”的范围,用户需要依靠辅助信息去阅读表格内的数据,防止遗忘某列数据的意义。因而当表格数据列较多横向滚动时,建议为用户固定重要信息列,如标题列、操作列。同时用户浏览表格时是符合F型扫视原则的,建议固定列显示在表格左侧,方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么,同时可根据需要快速发起操作。



同理,用户拖拽纵向滚动条来阅读数据时,可固定表格的表头,帮助用户在阅读过程中清晰知晓单元格数据的意义。


c、用户自定义展示信息

针对需展示大量数据的情景,我们除了【偷取】屏幕外空间外,可以根据B端产品提供的数据表格是覆盖全部用户角色的全量数据的特点,让不同用户角色来自定义想要浏览的信息,从而提升表格的可读性。下图为百度信息流推广平台的自定义列功能,用户可根据需要选择展示的数据列,系统将在用户完成选择后,主动帮用户保存自定义内容,下次登录后,表格依然按照用户定义的数据来展示。



///


二、高效扫视


无论是在表格中要明确的定位数据,还是顺序阅读,高效扫视都是B端用户一个很重要的诉求,我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。


1、合理的对齐方式


数据信息本身包含多种格式,可遵守一个基本原则即文字左对齐,符合从左到右的阅读习惯;数据信息右对齐,方便数据大小的直观对比。

具体对齐方式可参考我们建议的方式:

文本字段:可点击字段、普通文本类、数字、字母等,长短参差不齐,左对齐;

格式化字段:日期、时间、部分枚举类等,字符数一致且较短的,左对齐。

数据字段:金额、数据、百分比。带小数点等数据,方便对比为主,右对齐。



2、去除视觉杂音,强调对比关系


a、正确使用分割线,实现对表格行与列的强调

横向分割线可强调行内信息的连续性。垂直分割线在缩减元素之间的距离后也能区分不同元素,更好的强调纵向数据对比。但只要遵循良好的对齐方式,通常不展示纵向分割线,避免信息干扰。因而表格中通常仅使用横向分割线和底色分割,提升表格阅读效率。



b、斑马线作用有限

斑马线即隔行(列)变色。它能让行(列)间界限更为明显,但由于与分割线的作用类似,起到的作用有限,可针对不同场景酌情考虑是否使用。比如针对不同类型的数据(如总和、平均值)使用不同底色来区分,可以更突出强调该数据。要注意的是,隔行(列)换色的两种颜色不能反差过大,否则看来太“跳跃”。

对同一类数据而言,分割线就已经能够明显区隔,所以可不使用斑马线,但需要给出单行的悬浮状态,强化横向导视,避免出现列数过多引起数据错行的问题。



3、突显重要内容的视觉重量


前面我们提到表格呈现的数据信息除文本外,还有其它一些可视化数据。可视化一方面提升了列表视觉表现力,增加差异化,另一方面让内容更加突出,提升阅读效率。例如:数据列中数据异常时,最好可以醒目的形式突显,让用户一进入页面就能快速注意到异常状况。



///


三、精简克制


体验好的表格一定是克制的,克制应表现在信息的适度隐藏以及内容折行与截断展示原则。


1、适度隐藏信息


a、隐藏低频操作

当表头需要承载排序、表头筛选、提示等功能时,不建议一股脑的将所有功能展示出来。用户对表头的诉求是定位数据指标﹥执行操作的,因此可根据具体业务定义展示哪些操作,将其它操作隐藏,有需求时用户主动触发再展示。比如,百度搜索推广平台的推广管理页面提供了全局筛选,所以表头筛选对于用户而言是相对低频的操作,我们选择隐藏表头筛选的图标,当用户鼠标HOVER表头单元格时再展示。



对于表格行内的操作我们也应当进行优先级排序,为用户专门设置操作列展示高频核心的操作,其它相对低频的次要操作可隐藏在相关数据单元格中,用户有诉求时hover对应单元格即可快速发起操作。



b、隐藏辅助信息

表格中的有些数据指标是综合纬度的,当用户关注点定位于该指标时,需要通过细分数据来理解、分析。指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用,但如果全部拿出来在表格列展示,会让表格变得臃肿不易读,此时可以考虑采取一定设计手段去隐藏这些信息,把触发展示的自由度交给用户,也更符合用户逐级查看的场景。例如,百度搜索推广平台中关键词列表中,质量度指标是由多条数据共同决定的,我们采用了将细分指标聚合在气泡卡片中,当用户HOVER质量度得分数据时展示出来。



再比如,有父子层级关系的数据,可以通过父子折叠表格将子信息默认隐藏,用户根据需要,去展开查看详细的子信息。



2、设定折行与截断规则


B 端业务的数据信息复杂多样,信息内容的长度高度是多样不可控的,很多内容会超出我们限定的最大列宽,最大列高,我们应当给出折行与截断原则去约束内容的展示,而非总是为具体情况而做特殊设计,破坏体验的一致性。

截断折行原则设定时要细分,不能简单粗暴的一刀切,比如一行截断这种,如日期、时间等固定格式内容,拖动列宽后文字应折行而非截断展示,避免影响用户误读。再比如很多业务实体标题字段是格式化的,即标题前面部分可能都是一致的,这时候如果简单的截断,用户就需要逐一Hover才能找到定位到要找的数据。因而折行与截断原则,我们建议是给出三种:单行截断、双行截断以及自适应截断,根据具体业务情景选择。

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


文章来源:站酷    作者:百度MEUX

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

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

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


《2021年第一季度民用航空业移动端趋势分析报告》

资深UI设计者



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


文章来源:站酷    作者:简立方SimpleUX 

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

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

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


「感知性模式设计」是什么?

资深UI设计者

总的来说,所谓的感知性模式就是物体或者物件的一种外在的呈现而给人的感觉或者感受。例如同样的一个电脑桌上都有电脑、鼠标、或者其他的物件摆设,但根据不同人的使用给人的感觉是完全不同的,或是凌乱、或是整洁、或是简约,而更直观的差异可能来源于这些物件的样式、材料、颜色、纹理的不同而传递出来的视觉感知,

如果沿用到互联网方面的设计,那么感知性模式的例子可能包括:文字信息、版式、配色、布局、插图、图标、形状纹理、间距、交互或者动画等等,这些都作为具体方式来表达感知性设计。

说到这里,你可能会认为感知性设计是一个纯粹的外在视觉表现,但想要完全的得到一些成效,更多需要把这个事情融入到品牌的核心中,随着产品的发展而发展,进而在众多的同类此产品中脱颖而出。

感知性模式较强的产品例子

案例一:微信

微信作为一个超过十亿用户的产品,随着版本的不断迭代,功能也越来越强大,因此从产品体验上来说也可能会给人一种臃肿的感受。但微信整体的感知性模式的设计是非常清晰的,从桌面 APP 的 logo,再到内页呈现的图标、颜色、按钮样式、交互反馈等等的设计都是统一性很好的设计。

腾讯高手都在学的「感知性模式设计」是什么?

案例二:Instagram

Instagram 作为全球热度最高的图片分享社区,自始自终都有着非常明显的感知性,整体 APP 的简洁性设计让用户更加专注于内容本身,似有似无的品牌蓝色似乎已经牢牢融入了用户的大脑中,这种感知性无需被刻意放大,但就在潜移默化中用户就能感受到。

腾讯高手都在学的「感知性模式设计」是什么?

案例三:抖音

作为目前国内最热的短视频平台,抖音的感知性模式已经深入的印在用户的脑里,我认为抖音主要在以下三个方面让用户记住了 TA:1.品牌属性,抖音的品牌属性就是用最简单的方式让用户记住了 ta,通过 APP图标、闪屏、发起按钮的图形及品牌色的串联;2.内容属性,具有自己平台气质的内容特性,抖音在最早期主打的“潮酷”类的视频让它跟快手做了明确的区分;3.体验属性,大胆的全屏滑动视频交互很好的结合了手机的体验方式。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的作用

1. 有助于品牌形象传递

在同一个领域中的产品,在功能上大多会具有一定的趋同性,而由于这几年的扁平化风格盛行,更把产品之间的类同性推向极致。因此更需要通过感知性模式的设计来进行区分,这种区分不仅仅只是视觉上的差异,更多是来自于产品者对于自己产品方向的把控。

书中提到 Spotify 的例子,Spotify 给人感觉是温暖的、私人的,虽然月活跃量已经超过一亿,但给用户的感受仍然是独特的,除了功能之外,主要在于整体的图形样式、颜色搭配(黑绿的品牌色比例把控)、交互中微妙而平静的感觉,以及排版上传递出来的感受。

从上面这个案例来说,基础体验是用户值得参与的一个重要环节,但感知性模式的设计更多是来源于产品者想要给用户传递什么样的品牌性格或品牌核心,Spotify 的静谧性及沉浸式体验,这是 Spotify 设计师想要传递出来的品牌核心

2. 感知性模式通过界面传递品牌

感性性模式的品牌传递主要是通过界面或者运营调性来让用户得到感知,并且让人记住。在界面上想要让用户记住我们的产品,更多的是需要思考三个关键点:设计的独特性;设计的辨识性;设计的区分度。

设计的独特性

设计的独特性往往是通过我们界面的排版、图标、图像、交互体验方式、交互措辞等等一系列的内容来奠定。这些内容我们常常可以在国外的软件中看到很多不错的案例。

还是以 Instagram 作为案例来说,ins 风的极简设计是一种贯彻始终的独特性存在,除了设计界面本身的研究之外,还在内容上下足了功夫。以照片浏览来说,始终坚持大图的体验方式,保证一屏内的沉浸度,而非为了效率,这与 Instagram 一直具有较高的照片质量密不可分。

腾讯高手都在学的「感知性模式设计」是什么?

设计的辨识性

辨识性的可打磨方式有很多种,以图标作为一个基础的案例来说,我们在设计图标的时候是否有结合整体产品的性格去思考并且设计,并且深入打磨。简单的区分,我们可以从风格(例如:简洁的、有趣的、硬朗的、柔软的等等),更深入的内容就是需要思考如何传递品牌感,以及将图形与品牌理念、产品性格进行结合,通过设计贯彻品牌辨识性。

以 YouTube 这个 APP 的图标作为案例,设计师在设计时更多是希望表达整体 APP 设计的简洁性,弱化图形对于内容的影响,因此在整体坚持了三个核心关键点:简约、细线、普识。

腾讯高手都在学的「感知性模式设计」是什么?

设计的区分度

在目前趋同性的主潮流之下,如何把握好产品设计的区分度变得尤为关键,也就是说,当用户在看我们产品的时候会不会乍一眼认为是另一个产品。区分度的把握往往来源于品牌对于颜色的选择,我们在定义色调之前需要对主流竞品做一个分析,从中找出属于我们的区分度,并且尽量避免重合性。

以现在流行的电商 APP 为案例,很大电商平台的设计大多类似,在品牌色的选择上则尤为重要,因此需要尽量避免具有耦合性。

腾讯高手都在学的「感知性模式设计」是什么?

让设计系统更加连贯

我们在产品设计中想要把所有的模块或者组件做得一模一样几乎是不可能的,但我们可以利用感知性模式的设计进行内容模块的渗透,让用户对于整体的感受感知是一致的。

以 material design 的设计系统为案例,他所确定的是一个规则,而并不是任何的模块或者任何的图标都是一样的、无差别的,如果都完全长得一样会让设计变得单调、无差异性,通过设计准则来限定整体的图形风格,应用在不同的位置让用户从视觉角度感知到风格的一致性,这样也可以让整体的体验更连贯。

Material design 的设计准则

富有表现力

为了突出 Material Theming 必须提供的功能,每个 Material 研究都表达了一个不同的品牌。

各种各样的

为确保 material 主题化和组件满足尽可能多的产品需求,material 研究代表了不同类型的产品。

基于现实

为了尽可能地复制真实产品,每项研究都会识别用户、显示功能用户流并应用现实世界的限制。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的探索与思考

我们在日常设计功能性模块更多的是考虑到用户对于产品的体验感受,而感知性模块则是我们想要用户在这里获得什么品牌感知,通过品牌结合视觉设计系统给用户带来产品独特的性格及个性化氛围。

对于探索感知性设计的方法也有很多,目前比较流行的技巧主要有:情绪板、样式叠片、元素拼贴。无论是哪种方式,都没有唯一的答案,更多是利用这些方法在不断的尝试中探索到属于自我品牌的感知。

情绪板

情绪板是一种较为轻量的风格探索方法,在这个过程中往往不需要花费过多的精力,我们需要做的就是把统一或者接近类型的图片进行重新整合,得出我们想要表达的视觉感受即可。

情绪版属于比较前期的视觉品牌调性探索,在整体的颜色、排版上也都可以利用情绪板来获得初步的答案,如果想要再往深一步,可能则需要样式叠片的方式。

腾讯高手都在学的「感知性模式设计」是什么?

样式叠片

给予情绪板获得的大致品牌方向之后,便可以利用样式叠片的方式来进行更精细化的探究,我们可以用一种或多种不同的样式叠片来表达,但是希望在截取这些内容的时候要记得保持控件、组件、颜色、字体等等内容的一致性,避免差别性较大,形成不了统一的视觉系统。

腾讯高手都在学的「感知性模式设计」是什么?

元素拼贴

从书中讲到的大体概念是:将界面元素等内容拼贴在一起,从而达到设计稿初稿的雏形感受。这个方法可以比较敏捷的对需求方进行试探,但相比上面 2 种方法需要花费更多的时间及精力,同时这个方法出来的内容也比较偏向高保真。

腾讯高手都在学的「感知性模式设计」是什么?

从表面上来看,这三种方法似乎都可以帮助我们更好的进行设计,没有太大的差异化,不过从本质上来看,这三个方法影响的是我们设计初期输出的保真程度,从情绪版到样式叠片再到元素拼贴似乎是一个越来越保真的方式,我们可以选择其中一种,或者 2 种结合来进行表现。

平衡品牌性与一致性

过多的个性化设计,会削弱整体的品牌感,同样,如果设计的内容需要全部都一模一样的规范,也会扼杀设计的品牌感的创造性。因此,在感知性设计的概念下,一致性设计不是一味的复用,不求变通,而是通过整体统一的理念,允许个性化设计的存在,这样既满足部分模块的独特视觉表现又并不影响品牌传递。

举个例子

例如外面在设计一个完整的 APP 时,我们已经规范好了大体的基础视觉规范,在不影响这个规范的前提下,我们针对部分模块,例如福利类、游戏类,这种比较偏运营的设计界面,我们可以考虑有更丰富的颜色、图形等视觉表现,但前提在于是否符合基础规范的设定,如果符合那我们完全可以对这些类型进行个性化设计。

如果没有打破常规的设计方式,固化的追求一致性的设计,那么它就会变得普通、僵化,感知性设计的存在就是让我们在允许的范围内追求更不一样的设计,鼓励设计师积极探索更多的可能性,好的设计体系既能体现品牌的一致性也能表达出创造性。

由于感知性模式的相关设计,容易被当作只是样式或者主题化皮肤设计,很多人会认为这方面的设计比优化交互流程更容易些。在这种状况下,临时的业务经常会去挑战产品的品牌性和规范性,综合这 2 方面的原因,我们需要随时调整我们对于感知性模式的策略。

好数据不代表感知性设计的好坏

数据的好坏往往来自各种原因,优化设计后得到好的数据,但并不能说我们的感知性设计是好的,首先刺激数据的手段有很多,例如加重内容的表现、利用颜色对比突出想要突出的模块,这些方式都是与感知性设计背道而驰的。

基于上面这个问题,我们在日常设计中有几个基本原则是需要我们去遵守的,尽量避免为了满足短时间的产品需求而影响整体的设计感知性。

1. 不挑战基础规范原则

基础规范作为整体设计的基本标准,整体的制定肯定经过多种尝试之后的结果,如果轻易推翻的话,其中产生的设计成本是巨大的,往往需要重新输出、多方对齐、最终输出、再落地形成开放组件,在我日常的工作中也常遇到。往往是因为一个极小的模块而产生了巨大的设计成本。

2. 不改变用户的普识习惯

这里说的不是不去优化或迭代体验设计,而是我们应该尽量避免因为一个很小的内容而调整全局的体验方式。

举个例子:早前很多 APP 在设计表单选择器时都喜欢进行 UI 定制,从这个问题分析,用户在使用这种表单选择器的时候是用的系统多一点还是我们的 APP 多一点,如果是系统的多一点,我们何不直接调用系统?因为组件的 UI 改造,往往会带来一定的开发成本,但其造成的感知却并不够大,反而会让用户觉得很奇怪,为啥这些选择权在不同 APP 的不一致。

3. 一致性最大化

任何的设计都应该以一致性作为最大的前提,这样才能更加完整体现感知性模式,在各个模块、颜色、图形等等内容都具有完整的呈现,无时无刻影响着用户,让用户对于整体具有潜移默化的感知。

最后

感知性模式不是一个原则,而是一种工作方式、设计模式,除了个人的坚持之外,还需要有团队的意识才能让我们的设计更加具有品牌性,自上而下的调性、方向的确定,在团队中形成共识,这样设计语言才能形成。

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



文章来源:优设    作者:ID设计站

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

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

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


底部导航栏设计技巧

资深UI设计者

很多受欢迎的产品中都有我们值得学习和借鉴的设计思考点,通过分析海外主流产品,带大家掌握底部导航栏(Tab Bar)的基本知识,找到解决问题的方法并开拓创意思维。

在开始之前,请大家先思考下面两个问题~

问题 1:你的产品真的需要 Tab Bar 吗?

好像并不是。虽然淘宝、微信、微博、美团等大多数主流的产品都在使用 Tab Bar,但这并不意味着所有产品都需要它。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

很多APP没有Tab Bar,比如日历、计算器、滴滴、Uber等。对于是否要在APP中使用Tab Bar,应该分不同的情况灵活考虑。

问题 2:为什么产品要有 Tab Bar?

答案是为了易于使用,意味着通过 Tab Bar 这种简单的设计可以轻松帮助用户导航到页面。

明白了上面的问题后,接下来就要考虑如何来设计 Tab Bar,能更好的满足用户的需求和体验。

1. 显示最重要的信息

导航栏应该只包含最有用的信息,不能添加过多无用的标签使导航栏混乱。许多 App 在导航栏上添加搜索功能,因为这有助于用户更快地导航和检索内容。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

在Spotify底部导航中,主页选项用于播放或收听所有内容,搜索选项用于搜索下一首歌曲和播客,音乐库选项用于播放列表中喜欢和保存的歌曲,单独的会员选项方便用户轻松点击并快速完成购买操作。

2. 扩展导航的功能

主流 App 更喜欢在底部导航栏中使用 4-5 个标签,这样能保持导航栏的整洁,还避免了标签过多导致用户难以精确点击选项的情况。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest的导航栏上只有四个选项,这有助于用户轻松点击。消息选项会实时更新消息数量,对用户来说这样的提示很直观。另外搜索功能包含在导航栏中,方便轻松地在主页和搜索结果之间来回切换。

3. 容纳多种标签形式

多数 App 底部导航栏会使用「图标+文字」的标签形式,这样能清楚地告知用户点击标签之后的结果。

有时候我们也会看到有些产品的导航栏只有图标没有文字,但这种形式并不会影响我们的操作,因为当导航栏的标签使用了用户特别熟悉的形状和内涵,完全可以省略文字。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

宜家App的导航栏使用了大众都很熟悉的图标,所以即使不加文字,我们也能清楚地知道这3个图标分别代表了主页、分类、我的。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

相对于宜家,Youtube的导航栏就显得有点复杂,因为Youtube的图标含义用户可能并不是很熟悉,加上文字说明很有必要。

4. 文字标签应该简短

文字标签应该简短而清晰,准确的文字说明能对用户使用正确导航起到关键作用。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

TikTok导航所有的文字标签都简短,并且中间的添加图标还隐藏掉了文字,以此来引吸引用户的注意力。

5. 避免隐藏导航栏

Tab Bar 通常包含了最重要的导航信息,应该始终向用户展示,避免在用户滚动页面的情况下被隐藏掉。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest导航栏的设计是个例。当滚动页面时,底部的导航栏会隐藏,这么设计的原因可能是为了防止导航栏遮挡图像,保证用户看到更多的图像内容。

6. 传达位置

Tab Bar 帮助用户轻松导航,但如果用户不知道自己的位置,将会影响他们浏览和使用产品的体验。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

多邻国App通过改变导航图标的样式来让用户清晰的知道自己所有的板块。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Headspace在底部导航栏加上了线条装饰,每次切换选项,线条都会跟着一起切换,确保告知用户确切的位置。

7. 从反馈中学习并不断改进

反馈是关键,如果想改善产品的导航栏设计,就要考虑并测试用户最喜欢哪个导航选项,不使用哪个导航,需要四个还是五个选项等等。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计,帮助用户更方便地使用产品,这些不断打磨的改进真是产品成功的关键。

8. 在导航栏中显示更新

Tab Bar 不仅仅起到导航的作用,很多时候还能通过状态变化告知用户更多的信息。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

在Twitter主页导航中,当有新内容推送时,主页就会出现更新的状态,提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。



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



文章来源:优设    作者:Clip设计夹

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

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

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



深小卫 — 深圳卫健委IP形象设计

seo达人

莫b


 

原文地址:站酷
作者:白无常电商设计

转载请注明:学UI网》深小卫 — 深圳卫健委IP形象设计

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

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


文章来源:csdn

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

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



好的表格信息展示都有这三个特征

seo达人


表格作为组织整理数据的手段,可以有效的向用户展示数据信息,是B端产品中出现最高频的模块之一。

下图为典型的B端表格示例:

图片

 

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷的实现以上场景中的诉求。

今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。 

 1

一、疏密适度

常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元,行高和列宽的定义决定了表格信息的疏密程度,进而决定了表格给用户的直观感受,因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。

图片

 1

1、定义合理的表格行高

a、行高模数设定

在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯(多行行高同理去设定)。

图片

 

根据用户场景的不同,来选择模数倍数,需保证系统内使用统一的模数。比如,针对用户快速浏览获取大量数据场景时,可以选择1.2倍作为模数,列表更为紧凑,同样扫视范围内,可获取更多信息。

 

b、为小屏幕考虑一屏显示的行数

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。对于1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于1366×768、1280*720等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。

 

c、用户自定义行高的场景

B端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因,有些用户喜欢表格行高值大一些,看起来舒适透气,便于阅读。而有些平台用户由于很熟悉线下excel表格模式,希望线上的表格也尽可能像excel那样紧凑,以便他们在一屏内看到更多的数据,进行对比,提升工作效率。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

例如,Gmail提供默认/标准/紧凑三种表格密度设置,如图:

图片

 1

2、灵活扩展的横向空间

通过对表格固定位置与列宽的调整,扩大表格数据空间,使信息不局促,空间更透气,保证横向扫视易读性。

a、列宽极限值设定

设计师需要根据表格承载内容定义表格的列宽,应包含最大/最小/默认列宽的定义以及使用规则。

我推荐的一个规则是:

规则1:当相对列少【浏览器宽度-页面其他模块 > 全部列的默认宽度和】,则各个列自动等比拉伸,撑满屏幕;

规则2:当相对列多【浏览器宽度-页面其他模块 < 全部列的默认宽度和】,则出横向滚动条,每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现【对联式表格】。对联式表格最大的问题在于,一屏内展示的行数有限,当用户纵向对比数据时,需往复滚动多次,记忆压力大;横向扫视时,阅读视线不能一直保持左右横向预览,而是不停上下左右切换,使用体验不佳。

图片

 

b、横向『偷取』屏幕外空间、行高模数设定

当压缩列宽也无法在有限空间内展示大量的数据指标列时,我们可以借助横向滚动来『偷取』屏幕外更多空间。横向滚动需用户拖动滚动条进行浏览,有一定操作成本,所以要结合业务实际情况选用是否利用屏幕外横向空间。

随着行和列的增加,用户的瞬时记忆会达到极限,超过“7±2原则”的范围,用户需要依靠辅助信息去阅读表格内的数据,防止遗忘某列数据的意义。因而当表格数据列较多横向滚动时,建议为用户固定重要信息列,如标题列、操作列。同时用户浏览表格时是符合F型扫视原则的,建议固定列显示在表格左侧,方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么,同时可根据需要快速发起操作。

图片

 

同理,用户拖拽纵向滚动条来阅读数据时,可固定表格的表头,帮助用户在阅读过程中清晰知晓单元格数据的意义。

图片
 

c、用户自定义展示信息

针对需展示大量数据的情景,我们除了【偷取】屏幕外空间外,可以根据B端产品提供的数据表格是覆盖全部用户角色的全量数据的特点,让不同用户角色来自定义想要浏览的信息,从而提升表格的可读性。下图为百度信息流推广平台的自定义列功能,用户可根据需要选择展示的数据列,系统将在用户完成选择后,主动帮用户保存自定义内容,下次登录后,表格依然按照用户定义的数据来展示。

 

图片

二、高效扫视

无论是在表格中要明确的定位数据,还是顺序阅读,高效扫视都是B端用户一个很重要的诉求,我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。 

1

1、合理的对齐方式

数据信息本身包含多种格式,可遵守一个基本原则即文字左对齐,符合从左到右的阅读习惯;数据信息右对齐,方便数据大小的直观对比。

具体对齐方式可参考我们建议的方式:

文本字段:可点击字段、普通文本类、数字、字母等,长短参差不齐,左对齐;

格式化字段:日期、时间、部分枚举类等,字符数一致且较短的,左对齐。

数据字段:金额、数据、百分比。带小数点等数据,方便对比为主,右对齐。

图片

 1

2、去除视觉杂音,强调对比关系

a、正确使用分割线,实现对表格行与列的强调

横向分割线可强调行内信息的连续性。垂直分割线在缩减元素之间的距离后也能区分不同元素,更好的强调纵向数据对比。但只要遵循良好的对齐方式,通常不展示纵向分割线,避免信息干扰。因而表格中通常仅使用横向分割线和底色分割,提升表格阅读效率。 

图片

1

b、斑马线作用有限

斑马线即隔行(列)变色。它能让行(列)间界限更为明显,但由于与分割线的作用类似,起到的作用有限,可针对不同场景酌情考虑是否使用。比如针对不同类型的数据(如总和、平均值)使用不同底色来区分,可以更突出强调该数据。要注意的是,隔行(列)换色的两种颜色不能反差过大,否则看来太“跳跃”。

对同一类数据而言,分割线就已经能够明显区隔,所以可不使用斑马线,但需要给出单行的悬浮状态,强化横向导视,避免出现列数过多引起数据错行的问题。

 

图片

1

3、突显重要内容的视觉重量

前面我们提到表格呈现的数据信息除文本外,还有其它一些可视化数据。可视化一方面提升了列表视觉表现力,增加差异化,另一方面让内容更加突出,提升阅读效率。例如:数据列中数据异常时,最好可以醒目的形式突显,让用户一进入页面就能快速注意到异常状况。

图片

 1

三、精简克制

体验好的表格一定是克制的,克制应表现在信息的适度隐藏以及内容折行与截断展示原则。

 

1、适度隐藏信息

a、隐藏低频操作

当表头需要承载排序、表头筛选、提示等功能时,不建议一股脑的将所有功能展示出来。用户对表头的诉求是定位数据指标﹥执行操作的,因此可根据具体业务定义展示哪些操作,将其它操作隐藏,有需求时用户主动触发再展示。比如,百度搜索推广平台的推广管理页面提供了全局筛选,所以表头筛选对于用户而言是相对低频的操作,我们选择隐藏表头筛选的图标,当用户鼠标HOVER表头单元格时再展示。

图片

 

对于表格行内的操作我们也应当进行优先级排序,为用户专门设置操作列展示高频核心的操作,其它相对低频的次要操作可隐藏在相关数据单元格中,用户有诉求时hover对应单元格即可快速发起操作。

图片

 

b、隐藏辅助信息

表格中的有些数据指标是综合纬度的,当用户关注点定位于该指标时,需要通过细分数据来理解、分析。指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用,但如果全部拿出来在表格列展示,会让表格变得臃肿不易读,此时可以考虑采取一定设计手段去隐藏这些信息,把触发展示的自由度交给用户,也更符合用户逐级查看的场景。例如,百度搜索推广平台中关键词列表中,质量度指标是由多条数据共同决定的,我们采用了将细分指标聚合在气泡卡片中,当用户HOVER质量度得分数据时展示出来。

图片

 1

再比如,有父子层级关系的数据,可以通过父子折叠表格将子信息默认隐藏,用户根据需要,去展开查看详细的子信息。

图片

 

2、设定折行与截断规则

B 端业务的数据信息复杂多样,信息内容的长度高度是多样不可控的,很多内容会超出我们限定的最大列宽,最大列高,我们应当给出折行与截断原则去约束内容的展示,而非总是为具体情况而做特殊设计,破坏体验的一致性。

截断折行原则设定时要细分,不能简单粗暴的一刀切,比如一行截断这种,如日期、时间等固定格式内容,拖动列宽后文字应折行而非截断展示,避免影响用户误读。再比如很多业务实体标题字段是格式化的,即标题前面部分可能都是一致的,这时候如果简单的截断,用户就需要逐一Hover才能找到定位到要找的数据。因而折行与截断原则,我们建议是给出三种:单行截断、双行截断以及自适应截断,根据具体业务情景选择。

 1

总结

我们今天集中讨论了应该如何考虑表格信息展示,并总结了如何做好表格信息展示,即遵守【 疏密适度】、【高效扫视】、【精简克制】三原则,并结合业务特点以及目标用户场景,设计高效易读的表格。

最后,感谢你花费宝贵时间阅读这篇文章,希望可以给你带来一些启发。我们非常期待我们的思考和一些小经验能够帮助你去设计满足你的业务场景的表格,也可以通过这些方法和步骤,创造属于你们团队自己的设计资产。 

感谢阅读,以上内容均由百度MEUX团队原创设计,以及百度MEUX版权所有,转载请注明出处,违者必究,谢谢您的合作。申请转载授权后台回复【转载】。

也欢迎加入MEUX,视觉/交互/用研

可投简历至MEUX@BAIDU.COM

(注明信息获取来源如:公众号)

 

原文地址:百度MEUX(公众号)
作者:善于发现的
转载请注明:学UI网》好的表格信息展示都有这三个特征

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

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


文章来源:csdn

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

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


前端Datatables自定义事件(监听Datatables插件一些常见的事件动作)

前端达人

今天开发项目的时候,用Datatables插件做前端分页列表,想在列表发生翻页、排序、搜索、改变单页显示数据条数这些行为的时候做一些其他的操作,看了半天Datatables官网终于找到可以监测到这些事件发生方法:


        
  1. $('#table')
  2. .on( 'order.dt', function () {
  3. console.log( '排序事件' );
  4. } )
  5. .on( 'search.dt', function () {
  6. console.log( '搜索事件' );
  7. } )
  8. .on( 'length.dt', function ( e, settings, len ) {
  9. console.log( '改变单页显示条数事件' );
  10. console.log( 'New page length: '+len );
  11. } )
  12. .on( 'page.dt', function () {
  13. console.log( '翻页事件' );
  14. } )
  15. .DataTable();

遇到问题多看官网,而且英文网站的社区讨论真的有很多有效的提问和回答。

附上datatables的官网:https://datatables.net/,大家遇到问题可以多看看

转载于:https://www.cnblogs.com/fuxin41/p/6782994.html


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

文章来源:博客园

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

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

datatable.js 服务端分页+fixColumns列固定

前端达人

前言

记得还是15年的时候,工作需要,独自写后台管理系统。。记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示。 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的问题,费时,而且总是达不到我想要的效果...也是那个时候,第一次接触了datatable.js插件,只需要简单的修改配置值,就可以改变表格的方方面面,真的是非常好的体验。。。

不过,因为一些历史原因,和时间问题,那时候对 ajax加载+服务端分页+页面刷新,仍然是一直很迷迷糊糊...刚好最近工作中需要做一个列表管理页,所以就很自然的选择了datatable.js,并且总算把  ajax加载数据+服务端分页+reload这套流程弄通。也许还有很多种方案可以达到效果,但至少这个是肯定可行的.

样式是基于bootstrap风格.

正文

一.前端

需要引的js文件

复制代码
<!-- datatables样式和bootstrap支持样式 --> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--form ajax提交--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.js"></script> 
复制代码

 

html部分

复制代码
<!-- search 框start --> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="用户姓名" name="userName" id="searchUserName"> </div> & <div class="form-group"> <input type="text" class="form-control" placeholder="律所名" name="officeName" id="searchOfficeName"> </div> & <div class="form-group"> <input type="number" class="form-control" placeholder="状态" name="be_valid" id="searchValid"> </div> <button type="button" class="btn btn-success" onclick="searchData()">搜索</button> </form> <form class="navbar-form navbar-right"> <button type="button" class="btn btn-primary btn-sm btn-warning" data-toggle="modal" data-target="#addModal"> 新增律所 </button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!-- search 框end --> <div class="container"> <table id="mytable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="white-space: nowrap;"> <thead> <tr> <th>用户名</th> <th>用户ID</th> <th>邮箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所简报</th> <th>律所创建时间</th> <th>限制人数</th> <th>验证码</th> <th>状态</th> <th>备注信息</th> <th>操作</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th>用户名</th> <th>用户ID</th> <th>邮箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所简报</th> <th>律所创建时间</th> <th>限制人数</th> <th>验证码</th> <th>状态</th> <th>备注信息</th> <th>操作</th> </tr> </tfoot> </table> </div>
复制代码

因为是服务端分页,所以我页面做了搜索框,进行自定义的参数搜索.

 

js部分 

复制代码
<script type="text/javascript"> var oTable;
    $(function(){ LoadData();
    }); function searchData(){
        oTable.draw(true); // oTable.ajax.reload(null,true);  }function LoadData() {
         oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "对不起,查询不到任何相关数据",
                sInfoEmpty: "记录数为0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, //可滚动 bDestory: true, //数据允许清空 bServerSide: true, //服务端处理分页 bLengthChange: false, //是否允许自定义每页显示条数. iDisplayLength: 20, //每页显示10条记录 bPaginate: true, //是否分页 //sPaginationType: "amaze", //分页样式   "full_numbers" //bJQueryUI: true,//是否将分页样式应用到表格 bProcessing: true, //当datatable获取数据时候是否显示正在处理提示信息。 bFilter: false, //是否启用条件查询 bSearchable: false, //bStorable: false,//是否启用列排序 //bInfo: true, //是否显示分页信息(页脚信息) order: [[7, "desc"]], //默认按照第几列排序,从1开始 bAutoWidth: false, //自动宽度 bStateSave: true, //状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容  ajax:{
                 dataType:'json',
                 type:'POST',
                 url: '/adminUserList',
                 headers: { 'token': window.localStorage.token //取localStorage中的token,用来做安全校验
                 },
                 dataSrc: "aaData",
                 data:function(d){
             //取搜索的参数值,在请求服务端时,附加到请求参数中 var userName=$('#searchUserName').val(); var officeName=$('#searchOfficeName').val(); var be_valid=$('#searchValid').val();

                     d.userName=userName;
                     d.officeName=officeName;
                     d.be_valid=be_valid;
                 }
             },
            columns: [
                {
                    data: "name",
                    bSortable: false },
                {
                    data: "user_id",
                    bSortable: false },
                {
                    data: "email",
                    bSortable: false },
                {
                    data: "level_name",
                    bSortable: false },
                {
                    data: "office_name",
                    bSortable: false },
                {
                    data: "office_id",
                    bSortable: false },
                {
                    data: "officeBriefing",
                    bSortable: false },
                {   data: "office_create_time"},
                {
                    data: "limited_num",
                    bSortable: false },
                {
                    data: "verify_code",
                    bSortable: false },
                {
                    data: "be_valid",
                    bSortable: false },
                {
                    data: "remark",
                    bSortable: false },
                {
                    data: null,
                    render: function (data, type, row) { return '<button type="button" class="btn btn-primary btn-sm" onclick="editShow(\''+data.user_id+'\')">编辑</button>'; },
                    bSortable: false }
            ]
        });

    } </script>
复制代码

二.后端

java服务端代码

复制代码
@ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "开始条数") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少条") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用户名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "状态") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{// Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相关参数 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setSEcho(Integer.parseInt(drawStrArr[0]));
        }

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超级管理员");

        responseDTO.setITotalRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));//实际需要传数据总数,此处值不对
        responseDTO.setITotalDisplayRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));
        responseDTO.setAaData(appUserShowDTOPage.getResult()); return responseDTO;
    }
复制代码

start(起始条数,注意,是条数而不是页数 )和length(取多少条数据)为datatable默认会传到服务端的2个参数, userName/officeName/be_valid则为我前端自定义的附加参数。

Page是List<T>泛型集合,是开源项目PageHelper-mybatis中的类。

服务端返回给前端的json数据也有格式要求,具体见AjaxListResponseDTO类定义.

复制代码
/** * Created by xinhuiyang on 2017/6/9. */ @Data public class AjaxListResponseDTO<T>{ private Integer sEcho; private Integer iTotalRecords; private Integer iTotalDisplayRecords; private List<T> aaData;
}
复制代码

 

自此,就实现了带搜索功能的服务端分页效果.

三. FixColumn(固定第一列和最后一列效果)

首先,在之前的基础上,需要添加一个js文件引用

<!-- 固定列 插件js -->
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>

其次,在配置项中添加一项:

复制代码
oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "对不起,查询不到任何相关数据",
                sInfoEmpty: "记录数为0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, 
            fixedColumns: { //固定列的配置项 leftColumns: 1, //固定左边第一列 rightColumns:1 //固定右边第一列  },
            bDestory: true, 
            bServerSide: true, 
            .....省略......
复制代码

然后,刷新页面...至此,固定列效果就ok了。

 

后言

现在的页面效果,还有2个瑕疵:

其一是后台返回"总条数"不对,我是时间赶,来不及写查询了..大家实际使用时,自己查询一下就行,这个好解决;

其二是前端页面,下角显示页码总数和页脚信息显示有问题(见下图),不知道当后台"总条数"准确时,会不会就ok了。我后面还会找个时间,去修复一下的...当我有解决方案时,会补充在下面的,大家有知道原因和解决方案的,也欢迎评论在下方。

页脚图

1.左边数字没显示出来.  

2.实际83条数据,每页20条,应该最多到5页的,但实际上,可以点任意页,只不过从第6页开始,数据都为空.

 

补充

页面显示不对的问题已经找到原因并且解决.

原因是:后端分页时,需要返回给前端更多的信息,如总数多少,过滤后多少等,所以我代码中的AjaxListResponseDTO类就不符合后端分页时的需求了,需要改动.

修改后的类定义为:

复制代码
/** * Created by xinhuiyang on 2017/6/9. */ @Data
@ApiModel public class AjaxListResponseDTO<T>{

    @ApiModelProperty("必要。上面提到了,Datatables发送的draw是多少那么服务器就返回多少。 这里注" +
            "意,作者出于安全的考虑,强烈要求把这个转换为整形,即数字后再" +
            "返回,而不是纯粹的接受然后返回,这是 为了防止跨站脚本(XSS)攻击。") private Integer draw;

    @ApiModelProperty("必要。即没有过滤的记录数(数据库里总共记录数)") private Integer recordsTotal;

    @ApiModelProperty("必要。过滤后的记录数(如果有接收到前台的过滤条件,则返回的是过滤后的记录数)") private Integer recordsFiltered;

    @ApiModelProperty("必要。表中中需要显示的数据。这是一个对象数组,也可以只是" +
            "数组,区别在于 纯数组前台就不需要用 columns绑定数据,会自动按照顺序" +
            "去显示 ,而对象数组则需要使用 columns绑定数据才能正常显示。") private List<T> aaData;

    @ApiModelProperty("可选。你可以定义一个错误来描述服务器出了问题后的友好提示") private String error;
}
复制代码

相应的,controller部分代码,也要给对应的属性附上正确的值,改动后代码如下:

复制代码
 @ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "开始条数") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少条") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用户名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "状态") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{ // Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相关参数 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setDraw(Integer.parseInt(drawStrArr[0]));
        } int totalCountBeforeFilter=authUserService.countUserByLevel("超级管理员");

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超级管理员");

        responseDTO.setAaData(appUserShowDTOPage.getResult());
        responseDTO.setRecordsTotal(totalCountBeforeFilter);
        responseDTO.setRecordsFiltered((int) appUserShowDTOPage.getTotal()); return responseDTO;
    }
复制代码

然后,页面的页码显示就正确了(如图):

 

 

 

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利;

原文链接:https://www.cnblogs.com/Andrew-XinFei/p/7020055.html


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

文章来源:博客园

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

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

日历

链接

个人资料

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

存档