首页

这些细节创新,大厂设计师都不一定全知道!

seo达人



图片

虽然粗看没多大问题,但确实是一个很常规的设计,没有亮点。

试想,我们是否可以在布局、图标图形、色彩质感等做一些细微的突破,这些地方稍微做些改变都可以使得界面变得更好。

图片

再比如上面这个作品,也是同样的问题,缺乏一丝灵魂。之前看很多设计师作品集里面包装的作品,就是这样设计的。

虽然现在UI趋于模式化设计,但是我们在确保体验最优的同时时,还是可以做一些创新设计。比如布局、图标、色彩、质感、杂志化等方向发力,下面我们来看看如何做一些差异化设计。

 

差异化圆角层叠布局

俗话说,当然不知道如何去做创新时,可以去找一些好的概念设计,从里面挖掘一些新的设计想法,用在自己项目中。

图片

例如上图,我们将卡片圆角化与底部地图相呼应,整个设计看上去就有了细微纵深感。如果上下滑动时,再配上视差动态效果,那么细节也会更丰富

图片

上图的设计也是同样的思路,圆角图片作为背景,大圆角卡片在上层叠加布局,增加细节丰富度。

再来看一些优秀案例

图片
圆角化布局设计在功能详情页的应用。
图片

半圆角化布局设计的应用案例,只有一个边用圆角来布局设计,另外一边直角布局。

通过上面一些案例,可以提取一些布局方案用在项目上,如下图所示。

图片
下面这个案例通过圆角卡片来布局,贯穿所有。

图片

看到这,大家面对改版或者0~1的探索,布局上应该有新思路了,而且很多布局都是不断尝试与打磨出来的,下面我们继续看下图标如何做差异化设计。

 

打破常规的图标

图标可以说在设计中非常重要,承载着品牌性格传递,表达产品的气质,但也是我们最容易忽略的地方。

图片

如果纤细的图标看腻了,是不是可以尝试下这种粗线性图标

图片

再或者就是将图标logo化,设计更有趣味性一些。这些图标应用场景可以是功能页面,比如像智能家居、智能镜等场景中。

图片
“点”来贯穿整个图标设计,下图,韩国NAVER的图标设计,通过点与线的集合来打造记忆点。
图片

Naver

图片
图标与品牌色集合,这种虽然现在应用较多,但是可以从不同角度来切入。比如上图中使用填充品牌色与断线集合,形成一种不一样的设计思路。
图片
最后一种思路图标进行品牌化设计,整套图标延续品牌DNA特征
上图app设计,里面图标就是将品牌DNA符号延续到整套系统里面,包括底部bar的功能图标和表情符号等。

 

弥散光感渐变背景

很多情况下会遇到需要做详情页或者个人页面,这时候就会涉及到头像与背景的关系设计。目前设计较多的方式就是高清大图、品牌图形、渐变色等。那么还可以用下面这种思路。

图片
使用弥散光感渐变作为背景,相对于单一的渐变色,会多了一丝细节在里面。
好了,今天分享就到这,早期我们在做创新探索时候,不要惧怕太过于概念,如果一直被这个限制,就难以打破思维的墙,做出来的设计几乎很平庸。我们还是敢于挑战自己,善用逆向思维。

 

原文地址:功夫UX (公众号)
作者: 功夫UX
转载请注明:学UI网》这些细节创新,大厂设计师都不一定全知道!

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

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

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

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


人工智能的十大技术及应用

涛涛

人工智能从诞生以来,其理论和技术日益成熟,应用领域也不断扩大。本篇作者给我们介绍了人工智能的十大技术及其相关应用,一起来看看吧。


人工智能发展到现在已经将近有80年的历史。近日来特斯拉也说了自己不是汽车公司,是可再生能源公司、是机器人公司、是人工智能公司,特斯拉也明确表示未来人工智能汽车自动化驾驶的方向是视觉识别+机器学习。

人工智能从诞生以来,其理论和技术日益成熟,应用领域也不断扩大,接下来我将给大家介绍下人工智能的十大技术及其相关应用。

一、问题求解

人工智能的第一个大成就是发展了能够求解难题的下棋程序。在下棋程序中应用的某些技术,如向前看几步,把困难的问题分成一些比较容易的子问题,发展成为搜索和问题归约这样的人工智能基本技术。今天的计算机程序能够下锦标赛水平的各种方盘棋、十五子棋、国际象棋和围棋。

1997年5月,IBM公司研制的深蓝(DeepBlue)计算机战胜了国际象棋大师卡斯帕洛夫(Kasparov)。另一种问题求解程序把各种数学公式符号汇编在一起,其性能达到很高的水平,并正在为许多科学家和工程师所应用。有些程序甚至还能够用经验来改善其性能。

二、逻辑推理与定理证明

逻辑推理是人工智能研究中最持久的子领域之一。其中特别重要的是要找到一些方法,只把注意力集中在一个大型数据库中的有关事实上,留意可信的证明,并在出现新信息时适时修正这些证明。对数学中臆测的定理寻找一个证明或反证,确实称得上是一项智能任务。

为此,不仅需要有根据假设进行演绎的能力,而且需要某些直觉技巧。1976年7月,美国的阿佩尔(K.Appe1)笔人合作解决了长达124年之久的难题–四色定理,轰动了整个计算机界。他们用了三台大型计算机,花了1200小时。

三、自然语言理解

自然语言处理是人工智能的早期研究领域之一,已经编写出能够从内部数据库回答用英语提出的问题的程序,这些程序通过阅读文本材料和建立内部数据库,能够把句子从一种语言翻译为另一种语言,执行用英语给出的指令和获取知识等。有些程序甚至能够在一定程度上翻译从话筒输入的口头指令(而不是从键盘输入计算机的指令)。人工智能在语言翻译与语音理解程序方面已经取得可喜的成就。

四、自动程序设计

自动程序设计是人工智能的一个重要研究领域。目前已经研制出能够以各种不同的目的描述来编写计算机程序。对自动程序设计的研究不仅可以促进半自动软件开发系统的发展,而且也使通过修正自身数码进行学习(即修正它们的性能)的人工智能系统得到发展。

五、专家系统

专家系统是一个具有大量专门知识与经验的计算机程序系统,它应用人工智能技术,根据某个领域一个或多个人类专家提供的知识和经验进行推理和判断,模拟人类专家的决策过程,以解决那些需要专家决定的复杂问题。

专家系统可以解决的问题一般包括解释、预测、诊断、设计、规划、监视、修理、指导和控制等。随着人工智能整体水平的提高,专家系统也得到发展。在新一代专家系统中,不但采用基于规则的方法,而且采用基于模型的原理。

六、机器学习

学习是人类智能的主要标志和获得知识的基本手段。香克(R.Shank)认为:

一台计算机若不会学习,就不能称为具有智能的。

机器学习的主要目的是为了从使用者和输入数据等处获得知识,从而可以帮助解决更多问题,减少错误,提高解决问题的效率。

七、神经网络

人脑是一个功能特别强大、结构异常复杂的信息处理系统,其基础是神经元及其互联关系。对人脑神经元和人工神经网络的研究,可能创造出新一代人工智能机器。

20世纪80年代以来,神经网络研究职又得重大进展。例如,霍普菲尔德(Hopfield)提出用硬件实现神经网络,鲁梅尔哈特(Rumelhart)等提出多层网络中的反向传播(BP)算法。

目前,神经网网络已在模式识别、图像处理、组合优化、自动控制、信息处理、机器人学和工智能其他领域获得日益广泛的应用。

八、模式识别

模式识别是指识别出给定物体所模仿的标本,如文字识别、汽车牌照识别、指纹识别、语音识别等。这是一种用计算机代替人类或帮助人类的感知模式,是对人类感知外界功能的模拟,使一个计算机系统具有模拟人类通过感官接收外界信息、识别和理解周围环境的感知能力。

九、机器视觉

机器视觉或计算机视觉已从模式识别的一个研究领域发展为一门独立的学科。视觉是感知问题之一。在人工智能中研究的感知过程通常包含一组操作。例如,可见的景物由传感器编码,并被表示为一个灰度数值的矩阵。这些灰度数值由检测器加以处理。

检测器搜索主要图像的成分,如线段、简单曲线和角度等。这些成分又被处理,以便根据景物的表面和形状来推断有关景物的三维特性信息。机器视觉已在机器人装配、卫星图像处理、工业过程监控、飞行器跟踪和制导以及电视实况转播等领域获得极为广泛的应用。

十、智能控制

智能控制是一类不需要(或需要尽可能少的)人的干预就能够独立地驱动智能机器实现其目标的自动控制,是自动控制的高级阶段。1965年,傅京孙首先提出把人工智能的启发式推理规则用于学习控制系统。十多年后,建立实用智能控制系统的技术逐渐成熟。

百度公司董事长兼首席执行官李彦宏认为,人工智能是具有显著产业溢出效应的基础性技术,能够推动多个领域的变革和跨越式发展。例如:人工智能可以加速发现医治疾病的新疗法,大幅降低新药研发成本;可以带动工业机器人、无人驾驶汽车等新兴产业的飞跃式发展;可以大幅提升国防信息化水平,加速无人作战装备的应用。人工智能技术将极大地提升和扩展人类的能力边界对促进技术创新、提升国家竞争优势,乃至推动人类社会发展产生深远影响。

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

文章来源:人人都是产品经理  作者:汪仔2461

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

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

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



中台系统基础知识-文字规范系统

涛涛

版式设计是大部分设计师再熟悉不过的一个词了,市面上很多文章都有普及过各种版式设计知识,比如:印刷中的版式设计、移动界面中的版式设计等等。但是在我做中台规范时调研发现针对中台系统文字规范内容科普的知识较少,可能是中后台设计在国内还是处于初级阶段吧。所以结合调研内容到实际工作中的总结给大家分享关于Web端文字系统的相关内容。


加拿大印刷术家罗伯特·布林赫斯特(Robert Bringhurst)在他撰写的《印刷风格的元素》一书中将印刷术定义为以持久的视觉形式赋予人类语言的技艺。在中台界面文字排版的易读性、美观度是设计师的首要任务,要创建阅读性高和较美观的中台界面文字排版是设计师们必须学习的基础知识之一。因为不论在App界面还是Web网页设计中文字内容总是能占到整个版面的80%~90%的区域,好的文字排版能够大大提高用户的使用效率。所以本篇文章将站在一个网页设计师的角度分享Web端界面中文字系统的基础知识,从基本网页中的系统字体初识、字体排版基础理论、国际化文字适配,希望大家能够合理运用在中台界面的版式中。




内容概览






网页字体应用发展


1、网页排版初期


1990年12月25日,英国计算机科学家蒂莫西·约翰·伯纳斯-李爵士(Tim Berners-Lee)成功发明了万维网,并弄清了统一资源定位符(URL),其中超文本传输协议(HTTP)和超文本标记语言(HTML)的概念后,他在Internet上发布了第一个网站。自从Internet发明以来,字体在Web上扮演着重要角色。1990年至今,网络已经彻底改变了我们的生活方式和工作方式。在最初的20年中,Web经历了许多变化,例如采用Web标准,使用CSS进行布局以及处理动态数据。虽然网络从一开始就包含文本,但直到最近几年它们才得到很好的应用。

在1990年代中期,英国字型大师马修·卡特(Matthew Carter)设计的Georgia和Verdana两款字体广泛用在基于屏幕的网页中。为了使字体在当时分辨率较低的屏幕上清晰易读,马修·卡特设计的这些字体具有X高度大、开孔宽敞的字体空间。由Microsoft专门针对网页上的文本进行处理,Georgia和Verdana首先在位图中进行设计,以适配当时网页屏幕的分辨率,最后把文字转换为轮廓字体,进行文字图形化。


1990年代到2000年代中期是网页设计的一段过渡时期网页更加图形化,系统默认自带的字体如:Georgia、Verdana、Arial、Helvetica、Times New Roman已经满足不了设计师们的设计需求。设计师们必须使用Photoshop和Illustrator等相关工具将一些特殊字体的每一段文本切成图偏提供给开发人员,但是这种方式有着很多弊端,问题主要集中于本文不可选择、复制、翻译甚至是不可搜索。其中newyorker.com可作为典型代表,其网站在使用Typekit(可提供其自定义字体库)之前,为了让网页与原印刷出版物保持一致,便使用了切图方式将特殊定制化文本进行切图处理,直到该该公司2010年11月开始使用Typekit自定义字体库后才解决字体图形化这种耗时耗力的方式。




2、自定义字体库“Typekit”


在上面提到了在Jeff Veen还未创立字体服务Typekit之前,很多时候系统自带的几种字体满足不了设计师需求,所以设计师们使用文本转图片的技术进行处理。为了解决这些问题肖恩·英曼(Shaun Inman)2004年开发了SIFR,虽然SIFR解决了图片切图问题,但其中也还是有一些问题存在,比如,太过依赖Flash,并且设置SIFR还需要掌握大量的相关知识,门槛较高。2009年Simo Kinnunen又将技术改进称为Cufón,他使用canvas和VML快速替换文本,无需Flash或图像。Cufón由两部分组成:一个字体生成器(将字体转换为专有格式)和一个用JavaScript编写的渲染引擎。虽然文本图片转化技术一直在不断完善中,但是归根结底文本图片转化技术并不是网页中的文字排版。


直到2009年Jeff Veen离开了Google并且同一年创立了字体在线服务Typekit,极大的丰富了设计们的字体选择。2011年Adobe收购Typekit(也就是现在Adobe Fonts),并且Jeff Veen也因此成为Adobe产品的副总裁,负责Creative Cloud业务,负责Adobe旗下几乎所有产品的在线体验。




3、可变字体


可变字体指的是一个字体默认状态进行多个样式扩展,他是一种含有多种变化的单一字体:即所有字宽和粗细、甚至是斜体的变化都可以包含在一个单一、高效且可压缩的字体文件中。比如说PingFang SC,如果在系统上使用,同时包含了六种字重:常规体、中等、细体、特粗体、特细体、粗体。


可变字体是由Adobe, Apple, Google, Microsoft四大巨头在20016年9月联合在波兰华沙的ATypI会议上宣布的Variable Font的字体规格OpenType,OpenType特点在于可将多个字体打包成一个字体,并且不会增大字体文件包的大小。他解决了某单个字体文件可以获取各种粗细,宽度,高度,样式和其他属性的问题,具有灵活性。可变字体为Web上的排版提供了一个跨时代的变化。目前排版软件厂商、字体设计师、字体厂商都积极地大量投入可变自己提的研究和开发设计,并且广泛运用在操作系统和印刷行业。


目前在主流的操作系统、浏览器、设计软件都在不同程度上支持可变字体。像操作系统,Mac os、iOS、Android、Wear OS、Fuchsia。浏览器Safari、Chrome、Edge、Firefox。设计界最为熟知的图像编辑工具Photoshop、Illustrator、Sketch、Figma也已支持可变字体,设计师可以使用该设计工具进行同款字体不同样式的使用。


举个比较比较典型的例子,在2019年9月小米推出了全新的 MIUI 11 系统,并带来了小米兰亭Pro动态字体系统,小米兰亭Pro字体联合方正字库联合开发。在 MIUI 11操作系统中,用户可以通过系统设置进入字体模块,拖动相应滑块即可改变手机界面用字的字体大小和字重粗细。MIUI动态字体支持文字粗细无级调节,每个人都可找到适合自己的字重,下图是MIUI 11系统中可变字体的演示:




网页中的字体


1、字体工具推荐


字体是体系化界面设计中最基本的构成之一,选择字体是一个具有创造性和情感的过程,因为不同的字体传达出不同的情感。在制定用户界面规范时科学的定义字体规范系统,不仅能够有效的表达出不同的设计风格,还能通过定义字体的字族、字阶、字重、字体颜色、字体行高,有效帮助设计师在设计界面时使用字体达到统一性和整体性,保证界面有良好的阅读体验。首先,先为大分享一些非常实用的字体网站。


1.1 Adobe Font

第一个我要推荐的是Adonbe旗下的Adobe Font,网站中有非常多优秀的字体。但是网站字体需要收费,一般是按照使用量的形式进行支付版权费,特点是可设置属性进行字体样式实时预览,并且字体比较全。


1.2 Google Fonts 

在Google Fonts,你可以免费下载你喜欢的字体,并且按照你的需要在项目中使用。由于在系统中使用其他字体的唯一方法就是将字体文件导入到系统中,因此Google Fonts的下载功能非常有用。Google Fonts包含超过1400种不同的字体,其中包含最著名的:Open Sans和Roboto字体,他们是Android系统使用的默认字体。


1.3 求字体网

设计师在做设计时常常会遇到某些网站或海报使用的字体特别喜欢,但是苦恼无法获取改字体的信息导致无法下载使用,求字体网解决了此痛点。你可以将喜欢的字体进行截图并上传到网站进行字体识别,确定后他会提供出字体下载链接或者字体信息,解决设计师们喜欢某个字体而找不到的烦恼。


1.4 字由

字由也是我比较推荐的一个字体网站,个人用的也会比较多。官网将全部字体进行整理分类方便用户快捷寻找字体,并且有个分类是免费商用字体库,避免了常常困惑的设计师使用字体导致版权纠纷问题。此有网站有两大亮点,第一是此网站在设计师选用字体时有个实际运用预览效果,直观的看到字体在实际使用效果,第二是网站提供客户端下载,在客户端中点击下载以后可直接进行在设计工具中直接使用。



2、如何定义系统“字族”


在选用系统字体时需要考虑在不同系统的兼容性,大家都知道在不同的操作系统及不同的游览器中默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同。在做字体规范时需要提供一套系统完整的字族,里面不仅需要包含系统默认的界面字体,还需要一套有利于屏幕显示的备用字体,方便维护不同系统及浏览器的实现,保证在任何场景保持良好的阅读性和可读性,下面是我在做界面规范时与相关同学一起选取的界面字体。


第一部分:-apple-system是在以WebKit为内核的浏览器,比如苹果的Safari中调用苹果系统macOS、iOS、watchOS、tvOS中默认字体,目前一般情况下英文使用的是San Francisco,中文使用的是PingFang。BlinkMacSystemFont是在Chrome中调用苹果系统的字体。



第二部分:主要是提供了Windows和MacOS下的字体。其中Segoe UI针对Windows and Windows Phone等系统。PingFang  SC是苹果为中国用户打造了一款全新中文字体,整体样式看上去更加简洁,字族共6个字体:极细体、纤细体、细体、常规体、中黑体、中粗体。Hiragino Sans GB是是Hiragino KakuGothic的简体中文版,由日本设计师为MacOS和iOS系统中内置字体,简体中文有常规体和粗体两种,冬青黑体是一款清新的专业印刷字体,其小字在屏幕显示时足够清晰,拥有很多用户的追捧。Microsoft YaHei是从Vista开始,微软提供了这款新的字体,它是一款无衬线的黑体类字体,并且拥有Regular、Bold两种粗细的字重,字重有效提高了字体的层级显示效果。目前这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始,微软雅黑又加入了Light这款更细的字重,对于喜欢细字体的设计或开发人员又多了一个新的选择。


第三部分:主要是系统备用兜底字体,Helvetica Neue在没有El Capitan versions系统的电脑中是最流行的,所以作为兜底,sans-serif也是常见的兜底字体;



第四部分:主要是系统的emoji,在我们的规范中选用了'Apple Color Emoji',  'Segoe UI Emoji', 'Segoe UI Symbol' 针对在macOS和Windows显示emoji。




3、如何定义字体规范


在设计规范系统中字体是用户体验相当重要的一部分,因为不论在App界面还是Web网页设计中,不同的系统分辨率、不同的显示器尺寸、不同的DPI都会对最终展现的文字大小带来影响,并且文字在内容区总是能占到整个版面的80%~90%的区域,所以要根据用户使用电脑的分辨率给予用户一个比较合适的默认字号。那么这个字号多大合适呢?是12px、13px、14px还是15px比较合适呢,所以我们回到这个老生常谈的问题进行分析。



3.1 定义默认字体大小

在做规范时调研了在市面上各大较流行的网站,目前大部分文本类字体大小都采用了12px-14px范围的文字大小。另外Windows自带的点阵宋体从Vista开始只提供12px、14px、16px三个大小的点阵。所以,如果13px、15px、17px虽然每个字的空间大了1px但是点阵却没变,从视觉上会显得略稀疏,可能导致显示效果不佳。偶数字号的文字,比如12px的“中”字,去掉1像素的间距,填充了像素的实际宽是11px,文字的中竖线左右是平分的显得均衡,具有美感。如下图所示:


但是也有少部分网站使用基数作为文本大小,比如知乎正文使用15px,豆瓣首页标题下面的的简介文字使用的13px大小,我简单的分析了一下,知乎在改版之前文本类内容用的13pt大小的可能是有用户吐槽页面文字太过于密集后来统一改成了15pt,知乎和花瓣页面虽然使用的是基数但是整体效果还算不错。不过为了字体使用更加的“安全”还是推荐偶数作为文本规范。

还有些因素会比较推荐用偶数,比如说从浏览器角度上看,因为某些电脑的浏览器上如在IE6浏览器会把基数的字号自动渲染成偶数系。在一些画图软件如Figma、Sketch、Photoshop等一些画图软件在设置字体大小属性时从12px以上都是采用偶数进行快捷选择,这也形成了一种常见的习惯。

在文字规范时也借鉴了设计界大佬AntDesign的规范,Ant Design 3.0 的时候,对主字号进行了研究,饮用AntDesign的解释“我们基于电脑显示器阅读距离(50 cm)以及最佳阅读角度(0.3)对 Ant Design 的主字体进行了一次升级,从原先的 12 上升至 14,以保证在多数常用显示器上的用户阅读效率最佳。”


同时我们也站在电脑屏幕分辨率也有过调研,在上一篇分享分享的系统布局中也提到了,目前大部分中台系统中用户使用的电脑屏幕主流分辨率分别为1440*900、1366*768、1920*1080、1280*800,因此在这些主流电脑分辨率中经过实验,14px小大的文字效果以及阅读体验会比12px更加的舒适,并且内容会更加的清晰。


总结以上几点分析我们得出,在界面中使用偶数会比基数更加的美观、安全,也比较利于设计师的使用习惯,并且在纠结使用12px还是14px字体大小的很长一段时间里我们经过调研竞品以及进行不同屏幕分辨率下字号的实验最后确定我们字号使用14px正常文本大小,12px可作为辅助文字使用。



3.2 行宽

行宽是指一行字的长度,那么在用户界面排版中我们使用多少行宽比较合适呢?引用Fusion Design的解释“从生理结构分析,人在阅读文字的时候,理解并传递到大脑的信息是有限的。用户在阅读时,目光左右上下巡视、扫描和阅读,这意味着阅读要求大量的眼球运动。行宽越长,眼睛移动的距离太长太多。宽度较大,眼动位移较大,读者阅读换行时容易串行。行宽越短,眼睛阅读折行的次数太多。行数较多,眼动跳跃次数多,读者阅读行时会感觉到文字不连续。”所以在操作界面中避免过长、行数较多的文字,阅读是大脑活动中一种最复杂的过程,比如说在操作系统中界面操作较复杂,如果出现大段的文字用户不仅要操作复杂的系统,还需要进行阅读理解大大降低了用户的使用效率。

加拿大印刷大师罗伯特·布林赫斯特(Robert Bringhurst)有一个算法是:行宽=字号x30,例如:设置字号为14px大小,那么我们建议其基础行宽是420px左右。中文一个字体宽度是14px,那么建议一行建议30个文字。注:在文字宽度规范时,为了考虑国际化的适配,避免多语言差异我们不以文字个数作为度量单位,而是以整个行宽来计算,比如说表单Title、Table。



3.3 行高

行高是指在多行里面一行文字与另一行文字之间的的间距,每行文字占用空间的高度。我们定义行距(行高) = 字号 + 行间距,而不是单指字体高度,所以文字的高度不等于字号的高度,如:字号12px,行高为22px,根据Web页面平均分配原则,行距就是从文字的顶端上移4px到文字底部下移4px的距离。如下图所示:




网页中版式原理


1、视觉层级


在页面布局分享有提过视觉层次,因为视觉层次是设计过程中的核心方法之一,对于中台的UI设计师们而言,良好的理性思维相对比感性的视觉思维更加重要,因为在UI设计师设计界面时需要把界面中很多互不相关的元素有秩序的组织在一起,正确引导用户操作与使用。那么什么是视觉层次呢?官方概括:视觉层次结构致力于一种用户能够理解的方式呈现产品的内容,以便用户可以理解每个元素的重要性级别。它可以组织页面内容,以便大脑可以根据物理差异例如:大小,颜色,对比度,样式等区分对象。


视觉层次中的“层次”其实讲的是在设计用户界面过程中设计师需要有在内容上进行取舍,保证用户使用产品时能够让用户强烈的感知内容的主次,并且内容和功能优先级的高度进行区分,有效的减少用户在操作界面时对内容需要就行二次过滤。比如说某个提示说明在页面上最高,那么此提示在界面中一眼看过去需要最被突出和强调的。如果用户界面看起来一团“糊”,那么这个设计是失败的,因为它不能有效的帮助用户进行内容筛选,导致用户还需要使用时花大量时间去阅读操作。

视觉层次分为4个基础部分,其中包含了大小对比、字重对比、位置对比、颜色对比。



同样还是用苹果官网作为案例,真心觉得官网设计太好了。苹果的设计一直以来都是引领着设计趋势,其设计被国内外用户所认可,所以就以苹果官网作为案例。其中,字重对比:苹果官网在字重上给人眼前一亮的感觉,它采用Medium+Bold的字重使得标题与详情内容产生强烈的大小对比,用户进入官网的第一眼便能了解核心内容。颜色对比:在颜色上使用黑色背景承托产品和内容,强烈的黑白对比增强了信息传播中的识别度和对比度。图文排版:在图片与文字排版中使用了文字层和图片层互相叠加的视觉效果,使得页面层次感更加的丰富。如下图:




2 格式塔定律


格式塔原理或格式塔定律是感知场景组织的规则,人们感知由许多元素组成的复杂对象时,会采用有意识或无意识的方法将这些元素安排到整个组织的系统中,而不只是单一的元素级。它适用于不同级别的感知,其中视觉部分是设计师设计界面时最能体现价值的部分。

格式塔(Gestalt)这个术语来自德语单词Gestalt,中文翻译为“形状,形式”,格式塔心理学家库尔特·科夫卡(Kurt Koffka)的一句话可以捕捉到这一运动背后的基本思想:“整体不是元素基因的总和”。官网概括:“在心理现象中,人们对客观对象的感受源于整体关系而非具体元素,也就是说知觉不是感觉元素的总和,而是一个统一的整体,部分之和不等于整体,因此整体不能分割”。格式塔理论中元素之知见的原则分别为临近,相似,连续,封闭和连接。在用户打开界面进行阅读或者操作界面时视觉的第一感受是产品的整体效果,而并不会感知到一些较细节的元素。


在设计用户界面时需要理解格式塔定律中5大定律,分别是接近、相似、闭合、连续、简单,其中两个最重要的定律分别是接近定律和相似定律,这两个定律主要描述了我们感知事物的核心方式。



2.1 接近定律

人类的大脑总是把一些细节复杂的元素分析归类,将相对靠近或有相似的连接点的内容作为一个整体,在我们的生活中有类似的在我们的现实的生活中有很多自然规律中遵守了格式塔原理的接近定律,比如说比如说每到秋天,北方的严寒气候不再适合大雁生存,这时候大雁便会飞往较暖和的南方,当人们看到天空正在南飞的大雁队伍,它们组织链接得十分严密,并且群体在同一个方向移动,所以队伍的形状在我们的大脑中将它们视为一个群组的一部分,产生人字形或一字形的图形。当你看空中一些比较特殊的云朵比如像猫、像飞鸟等图形,是因为蓬松的气体发生形变,形成了酷似动物或生活中熟悉的物体。这其实都是人类大脑通过潜意识进行脑补和整理出来的画面,如下图中的元素彼此靠近的元素归为一组,相反距离较远的元素被视为不同组。


其中在元素排布中也有一定的规律性,比如当行向间距大于列间距时,那么视觉的行排布的横向关系密切形成整体。当纵向间距大于列间距时,那么视觉的列排布的纵向关系形成整体,如下图所示:


以今日头条和优酷视频作为案例,首先进入到今日头条首页后映入眼帘的是无穷式的信息流。可以看出设计师使用接近原则对信息进行分组、组织内容和整理布局。卡片承载的内容形成模块,模块与模块之间的这里发挥着至关重的的作用,因为它引导用户眼睛朝向预期的方向,有效引导用户使用。并且其排列方式是比较典型的纵向关系,可以看出行间距小于列间距,增强了纵向关系,有助于用户阅读和分类。把重要信息流的内容模块放置中间位置,其他次要内容放置左右两列。


优酷视频是个大型视频分享平台,进入到首页同样是无穷式的视频类信息流。我们可以看到产品排列方式与今日头条正好相反,除了顶部导航以外内容区的行间距大于列间距,增强了横向关系并且以横向关系密切形成了整体,属于典型的横向关系排列。其中视频封面与下面的文本形成一个内容小组,内容小组与内容小组形成一个大分类。由于产品视频分类较多,所以从页面排版上使用横排关系将白色的空间增强了视觉层次感有效将视频类型横向区分,帮助用户更快的找到相关类型的视频内容。



2.2 相似定律

接下来再说下相似定律。人们大脑总是把一些相似视觉特征的元素被认为是一类,与不具有相似视觉特征相比较具有相似特征的元素关联性更强。在用户界面排版中具有相似功能的元素在样式上应该保持一致,比如说在操作界面中Link的颜色为蓝色,那么用户在操作界面时默认会把蓝色的文字理解为可点击Link。

设计师在设计界面过程中可以使用相似定律将元素进行元素分组、元素组织、元素布局。但是需要强调界面中相同的元素(组件),如按钮、下拉、标题、正常文本等一些基础组件需要使用相同的设计语言,保持一致的颜色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里说过:“在界面设计中,要采取一致的行动顺序”。因为用户会将视觉属性相似的内容分组,将最相关的内容彼此靠近作为小组,小组与小组之间可组合成大组也就是我们在布局中提到的模块,最后由模块组合呈现出页面形态。



西瓜视频是个性化推荐短视频平台,从下图中可以看到首页分为影视和短视频两类,这也是西瓜视频的两大特色功能。设计师在设计界面时考虑到影视和短视频这两大类视频需要在视觉感知上需要进行区分,所以设计师运用了相似定律进行设计,其中竖版视频封面与下面的文本形成一种内容小组,横版视频封面与下方内容组合形成另一种内容小组。以不同的形状来告知用户的功能类型差异。如下图所示:


2.3 小结

在网页设计中不论是视觉层级还是格式塔定律,其实都是由我们人类的大脑神经感知事物的规律总结而来,在生活中每个人潜意识都具备这种技能,因为人们总是喜欢有规律的事物,规律可以让事情变得更容易理解。同理在设计用户界面时不仅仅是为了漂亮美观,还需将界面中内容有效的进行梳理并传达给用户。




适配多语言切换


随着公司业务不断快速发展以及互联网信息的快速交流与传播,很多产品已经突破地域的边界走向了海外市场,并且个人也因为在实际项目中产品切换多语言时产生了各种各样的体验问题,所以为了提高规范体验设计师们应该提前自主探索和思考关于产品国际化的相关内容。今天主要浅谈文本适配问题。



1、预留出足够的文字空间

在实际的工作中会遇到界面使用中文时布局非常的合理,但是一切换到其他语言时出现各种折行或者是遮挡的问题。主要原因是因为文字的长度会因语言不同而异,即使是使用同类字形的语言也是如此,比如说英文“New”翻译成法语是“Nouvelle”,并且法语的感叹号前面还需要留一个空格,字符数从4个变成了8个。所以设计师在做规范时一定要考虑预留出更大翻译空间,以下是网上找的一些Bad case。




2、书写顺序

在多语言适配时我们发现很多书写系统,如阿希伯来语、拉伯语、波斯语、乌尔都语等,都是以右到左对齐方式进行字符显示,并且在相同的字体大小情况下,这些字体可能看起来比西伯来语字体要小,所以需要考虑调整行间距和对齐方式,使得不同字体在相同界面中都适用。并且使用这些语言的人口数量相当大,特别是在波斯湾地区由于石油经济发展特别迅速。对于面对中东地区出海的产品,是不能回避的问题,所以要及时作出可配性方案。





3、匹配不同行高

在多语言适配时因为不同的语言可能在同一界面中需要设定不同的行高达到最佳效果,可以定义3种行高尺寸来做多语言适配,分别为大(l)、常规(lg)、小(s)。从下图可以看出区别较大的是泰语和阿拉伯语的字型高度相差较大,可利用相对合理的行高尺寸进行匹配,比如泰语字型较高可使用大(l)尺寸作为文本行高,阿拉伯语字型较低可使用小(s)尺寸作为文本行高。




4、避免组件与文本混排

设计师在设计界面时经常遇到文本与组件的组合排版方式,但是其中会有比较多的“坑”,设计师们很容易不小心就陷入“坑”中。举个例子,比如设计师们会为了更加美观会把组件插入一段文本中间中进行混合排版,这种组合方式有几个比较大弊端。第一不同语种有不同语法顺序,比如法语形容词的后置,日语里动词的后置。第二复数问题,在英语里面,每个名词都有一个单数形式和一个复数形式,比如One picture复数是Two pictures。但在俄语里面,复数有三种可能的形式。在法语里面,有不少单词变成复数之后拼写也会改变。所以,如果用户要在句子中间输入数字这种设计就可能造成语法错误。第三有些语言里面,单词是区分阴阳性的。比如在法语里面,形容词也是有阴阳性形式的。所以如果你在句子中间插入一个下拉菜单框,那么可能又会造成语法错误。



5、小结

产品国际化题材比较大涉及到的内容也会比较广,可能需要考虑的不仅限于文本适配,还需要考虑很多的因素比如说各国的文化差异、本地格式、地区标准等等,所以今天主要站在文字适配的角度给大家分享几个做国际时需要关注的小点。





写在最后


本篇文章主要是网页中文字系统初识,网页中的文字虽然看起来比较简单但是每个内容板块拆分开都是值得深挖的。比如说文字结构、如何结合印刷理论应用到网页排版中、解刨多语言适配等等吧。本片文章还是秉着启发的态度与大家进行网页文字系统的探索,希望大家能够可根据此篇文章结合工作中实际案例举一反三,更深入地探索相关内容。在这里再次强调一下产品国际化方面内容,互联网信息的快速交流与传播使得人与人的连接越来越容易,很多产品进入海外市场是必经之路,大家可提前做好相关知识储备,还是那句话也希望自己后续可以多归纳总结与大家展开探讨分享。


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

文章来源:站酷  作者:熊细辉Neo

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

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

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



车载智能助手设计:智能座舱的合作伙伴

鹤鹤

前言:


随着科技的发展从家庭到办公室,协作机器人(cobots)正在逐渐出现在我们的视野,汽车车载虚拟形象也越来越多地涌现,例如:蔚来的NOMI,理想的ONE,奔腾的YOMI。虚拟语音助手的形象也越来越符合大众口味。虚拟语音助手形象通过改善用户体验和培养情感联系来增加汽车的价值。但是我们在使用的过程中不难发现,机器人的设计很容易出错,从而让我们感到无聊、生气,甚至更糟糕的情绪——害怕。

 

那么,汽车公司如何设计虚拟语音助手,才能创造更安全、更高效、更有回报的驾驶体验呢?

本文将通过以下几点进行阐述,让虚拟语音助手的设计创造更好的汽车体验。


1.利用UX(用户体验)来驱散对人工智能的恐惧


如果在文化的进程中,高科技在其中扮演过一个坏人的角色,那么在设计时一定要谨慎。例如,在美国,小说作家史蒂芬·金写过一本关于杀人汽车的恐怖小说,这会让用户在使用汽车的时候产生联想。

谷歌公司也深知这一点,这就是为什么早在10年前,它将其早期的自动驾驶汽车Waymo设计得如此可爱,目的是为了帮助人们更适应自动驾驶这一遥远的概念。

          undefined

史蒂芬·金恐怖小说《克里斯汀》                                 谷歌第一辆无人驾驶汽车waymo


从另一个角度来说,创建一个可爱的,温柔的,虚拟形象是为了给用户一种优越感,从而消除恐惧。

外形的设计固然重要,但是行为比外观更应该受到重视,美国时间2016年6月27日,Anki发布的玩具机器人Cozmo的产品,它的面部是一块发光显示屏(OLED),眼睛则是随心情变化的方块。因为外形相似,Cozmo被认为是皮克斯动漫《机器人总动员》中瓦力(WALL-E)的现实版。看起来比较呆萌,给人一种畜类无害的感受。并且通过笨拙的行为,展现出它呆萌的性格,大大降低了人们得戒备心理。

呆萌的机器人Cozmo

           

以黑绿色代表邪恶的斯莱特林学院                                黑绿色的Cozmo


因此即使用了一些比较可怕的颜色,例如,黑绿色。你也不会产生恐惧的心里。由此可见,行为远比外观给用户带来的感受更具有说服力,也更加直观。

当我们在设计语音虚拟助手时也是一样,无论是作为一个合作机器人,还是车辆本身,要问问自己,我想展现的AI是什么样子的,这样你就可以在它跨屏幕迁移时设计一个有凝聚力的体验。


总结虚拟语音助手的形象要降低用户的恐惧感适当的为用户增加优越感


2.不要越界


Jibo是一款设计来帮助你在家工作的合作机器人,由 MIT 科学家 Cynthia Breazeal 制造。它高约28cm,重约六镑,无法自由移动,拥有电子眼睛、耳朵和声音,头部可以 360 度旋转并进行声音定位,能够讲故事、聊天和提供安慰,也可以拍照和做日程提醒。但可惜的是它失败了,因为它承诺太多,更注重情感而不是功能,比如语音和人脸识别上存在一定的误差,并没有宣传视频里演示的那么生动;智能家居中控方面,因为要通过第三方平台实现控制,实际体验并不流畅;又比如,因为起初内容缺乏、功能未得到完善,Jibo 无法看视频、玩游戏和视频通话,除了挤眉弄眼之外,屏幕成了摆设。

简单来说就是它能做的事儿和它899美元的售价不匹配,自然就没有用户愿意为他买单。

 经营失败而倒闭的机器人JIBO


Qoobo是一款带尾巴的靠垫,可以通过摆动尾巴来安慰用户,虽然看起来也没有特别智能,但它之所以能够成功的原因是因为它的功能和价格合理。在满足基本需求时,“摇尾巴”的功能可谓是“锦上添花”。

深受用户喜爱的坐垫机器人Qoobo


在车载中也是如此,比如蔚来的NOMI,经常有用户反馈,nomi有的时候所问非所答,要喊出指定的关键词才可以做出相应的应答,但是它能够成功的原因是,它们能增加真正的价值,并在受控的环境中运营,在那里人工智能可以成为“领域的老板”。同样的在设计虚拟语音助手形象时,需要有一个明确的目的,那就是它能做什么,不能做什么。换句话说就是:在不影响我驾驶的前提下帮助我完成一些额外的工作


总结:要使虚拟语音助手成为功能清晰的服务生态系统的一部分满足用户的基本需求



3.展现它作为助手功能性的一面


恐怖谷理论是一个关于人类对机器人和非人类物体的感觉的假设,它在1970年由日本机器人专家森昌弘提出,虚拟形象或机器人的仿真度越高人们越有好感,但在相似度临近100%前,这种好感度会突然降低,因为你无法分辨某物是否是人类,这会让用户产生不安的心理。虽然车内人工智能显然不是人,但我们确实要避免这个令人毛骨悚然的情况发生。在赢得用户的信任并建立联系的同时,也需要让用户知道你的界限,并对数据的收集和使用保持透明。

undefined                          

恐怖谷理论


                       

令人恐惧的设计                                                                   看完就喊妈妈的动画


还要注意的是在设计的过程中,要区别人和人的交流以及人和虚拟语音助手的交流的交流。

机器人再说话时会说:请,你好等礼貌用语,这样父母在使用语音助手的同时,不会担心孩子学到一些粗鲁的用语

其次,我们在与功能性动物交流时,不会用人类的用语,更倾向于使用专门的动物用语。例如,在东北赶集的人,不会对马或者驴说,往前走,不要走了。而是会说:“驾”  “屡” 等拟声词来代替,一方面是为了快速的下达指令,另一方面就是区分人类用语言。

你可能会经常看到这样的新闻:某演员入戏太深,走不出自己的角色,导致发生抑郁,带来糟糕的结果。这就是用户对角色情感的过度投入,导致无法区分现实世界和角色世界。因此语言另一个用处就是:防止用户入戏太深。


总结:保持和突出语音助手该有的特征,这样可以让用户更加容易走出和进入使用场景。



4.扮演它该有的角色


paro这是一个海豹幼崽的形象,这种机器人有助于痴呆症患者的护理。通过肢体接触,可以唤醒痴呆症患者过去养育子女、饲养宠物的记忆。它的感光装置能分辨白天和黑夜,它的位置感受装置可以判断自己是处于被抱着,还是处于跟主人相对的状态。它在充电时用一个奶瓶,这和他“被扶养”的定位相吻合。

代替动物为老人治疗的Paro


undefined

正在充电的Paro


宠物机器人Lovot,当你决定要收养它们时,也要意识到它们每天半个小时闹腾,还有那被“关爱”需求,真的也许会让你累觉不爱却又割舍不了,感叹自己为什么要“养”这两个小鬼。让我们感受到,这些机器人就像人一样,它也有婴儿期,需要我们耐心教导。

宠物机器人Lovot


再比如马里奥在最早的出道作品《大金刚》中,马里奥被设定为一名普通的美籍意大利人,从他的口音(或是从他的配音演员Charles Martinet的所配的口音)来看,他的英文确确实实带有一定的意大利口音,而且从服装上也是典型的美国公民装扮。

因此,无论是外形还是功能上都要有一定的隐喻和暗示。



总结为所有情况寻找隐喻这可以让用户有一个连贯的想法无论在哪中场景都要暗示和产品相关的特性这样用户对虚拟语音助手的角色定位才会一直保持统一


5.让互动更有价值


在设计过程中,始终要贯穿的思维就是如何使虚拟形象对用户的情感做出反馈。通过设计引起用户情绪价值与情感体验。比如,通过简单应答,或者简单的肢体动作来达到目的。建立一个专属于用户的体验设计。比如引导用户给虚拟形象命名等。



总结:培养感情纽带,让用户与虚拟语音助手建立长期关系,让用户对合作机器人更加满意。

 

在未来几年内,我们预计语音人工智能的个性、年龄和性别将会多样化,车内语音助手将继续被采用,尤其是随着更多的自动驾驶功能进入市场。对于一些原始设备制造商来说,将合作机器人设计成技术的实体表现形式,以帮助赢得用户的信任,这是有意义的,当然还有其他制造商将在人机界面(HMI)中以图形方式展示人工智能,就像Siri一样,以较为抽象的方式表现出来。无论哪种形式所遵从的原则是不变的,期待大家更好的设计!


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

文章来源:站酷  作者:大牛李
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


未来感设计汽车大盘点(上)

鹤鹤

在灵笼中,白月奎开着奥迪在满是噬极兽的世界驰骋。小伙伴们也惊呼连连。其实,这是一款名为AI trail的奥迪概念车已经被生产,预计2030年上市,那现实中是什么样的呢?接下来,就从奥迪开始,为大家盘点未来感的汽车是什么样子的吧。

1.奥迪AI trail 

这也是一辆纯粹的SUV。它有四个电动马达,每个轴距上有一个,这使它具有四轮驱动能力,它在公路上的最高速度为每小时81英里,越野范围为155英里。它的轮胎压力可以根据地形,在移动中调整。

         

奥迪 AI trail外观


当你坐在里面,它会给出一个令人难以置信的宽广的观察范围,她甚至可以让你看到轮胎。因为里面有足够的空间,甚至没有任何多余的显示器,它是完全由你的手机进行控制的。

把手机作为屏幕,从而达到更广阔的视野


你可能已经注意到没有大灯,但这是因为它用于照明的灯被安装在自主的无人机上,这些无人机会在前面飞行,为你照亮道路。当你在光线不好的环境野营时,你可以通过折叠无人机,手电筒等照明设备。

无人机搭载照明灯


充当照明设备的无人机


2.雷诺EZ-Go 

雷诺在2018年发布了他们的电子出租车概念车easy go,同样计划在2030年面世。其设计理念是:在未来,汽车的所有权已经不在是一种趋势,当我们需要旅行时,我们只需预约一辆自动驾驶的汽车。雷诺高层表示,网约车和共享移动服务将会是雷诺的主要发展方向。当你来到一个陌生的场景,你可以透过360的窗户来欣赏沿途的风景。进入内部,内部空间可容纳六名乘客,呈U型排列车顶从前面打开,提供存储空间。并且它还有四轮转向功能,意味着它可以在城市间轻松穿梭。当然,作为更明显的旅途用车,它的车速最高限制在50m/h。对于行动不方便的乘客,它有一个可伸缩的斜坡,当你需要下车是,将自动伸向路边,让乘客可以更加方便的进出。

在城市穿梭的ES-Go


通过显示器可以看到基本信息


汽车内饰


undefined方便进出的设计


3.terrafugia tf-x

相信小伙伴们多少在科幻电影当中看到“会飞的汽车”,我在小的时候看过一个电影《第五元素》,依稀记得家里的七大姑八大姨,嗑着瓜子,坐在炕头,讨论着“我们有没有机会坐上这样的汽车”。这部这款汽车可能在不久的将来将会满足大家的远景。

电影《第五元素》


如果你正在寻找未来的汽车是什么样子的,那么 terrafugia tf-x就是我们我们理想的设计。这款汽车售价 28 万美元起,折合人民币约为190万左右。它拥有一双可折叠的螺旋桨,隐藏在车机两侧。

                                

TF-X外观                                                                              展开双翼的TF-X


这款汽车很快就由波士顿的设计公司开发出来了,这款概念车比它最初看起来的空间要大得多,它是插电式混合动力,能够实现全自动飞行,在紧急状态下可以手控或者遥控。在动力系统上采用插电式混合动力传动系统,有两个600制动马力的电机和一个33制动马力的燃料发动机,电脑自动控制,拥有有四个座位,可垂直起降空中续航可达640 公里,最高时速为 185 公里/小时,但是它在路上的最高速度或它的范围还没有被公司宣布,即它可以飞到可伸缩的翅膀上折叠出一个连接的螺旋桨的事实。

与此同时,各国的航空当局也在讨论和协商制定管理这一新兴交通业的政策和安全标准。如果未来将会普及飞行汽车,那么开上飞行汽车是否需要飞行驾照?人们是否会花费超过100万RMB来购买?

正在倒车的Terrafugia TF-X


飞行中的Terrafugia TF-X


4.雪铁龙19_19

雪铁龙1919确实是一款具有未来设计感的汽车,它的目的是要做到其舒适性已优先于其他每一个元素,它的设计理念是未来航空工业。结合前挡风和立体化的玻璃覆盖,上半部分更像一个漂浮的太空舱。

undefined

雪铁龙19-19外观


它在车顶后部安装了激光雷达探头,主要用于在长距离行驶时的自动化驾驶。 它的踏板和方向盘,是可以伸缩的。但当驾驶者想自己驾驶时,踏板会降到合适的位置,方向盘会展开。当用户不想驾驶的时候,方向盘会自动缩回,智能音箱自动升起,几乎像一个潜望镜一样,帮助用户实时检测驾驶情况,并且把信息显示在挡风玻璃上。undefined

自动驾驶模式,信息在挡风玻璃上显示


5.辆丰田LQ

丰田LQ的设计原则是,让司机和他们的车辆之间有更加紧密的联系。所以通过加入最先进的先进的AI,称为Yuyi,将人工智能打造成你在车内最好的朋友之一。 

会眨眼睛的LQ


它是全电动的,拥有SAE  L4级自动驾驶系统,这意味着不需要用户的参与,因此车厢的舒适性就显得尤为重要。在座舱内的乘客被不断地监测,AI将根据司机的情绪和警觉状态来调整温度,甚至是驾驶模式。并将进一步尝试在情感上吸引司机,使他们在旅途中保持愉快的心情。车内的每个控制都是语音激活的,这代表车内几乎没有任何物理按键,所有的信息将会投射在挡风玻璃上。甚至可以调整照明水平,在空气中释放平静的感觉,AI也会选择自己的音乐播放列表,唤起它认为目前最符合你情绪的音乐。

AI根据用户心情播放相关音乐

正在自动驾驶的LQ


6.梅塞德斯-奔驰Vision AVTR

如果你想看到世界上最有未来感和最有异国情调的轻型概念车,那么你一定要看的就是这辆车。相信小伙伴们都看过《阿凡达》这个电影,无论是科幻的剧情,还是绝美的场景,都在当时引起了不小的轰动。这辆车的灵感就是来自《阿凡达》这部电影。而且契合度可谓是非常的高。

                     

阿凡达场景                                                                  阿凡达宣传海报


它外观采用了仿生设计,整体观感十分科幻。车身两侧采用了全透明设计,意在大幅提高车内视野,强调车内、车外的交互。它还使用了33瓣采用了独立的仿生襟翼,看起来像爬行动物的鳞片,可以根据不断变化的条件来调整车辆上方的空气流动。

      

《阿凡达》电影中的精灵树


他的轮胎,借鉴了电影中,精灵树的样式,并且它去掉了传统的圆形轮,胎取而代之的是球形轮胎,它提高了机动性,对周围的影响较小,并且能够扭转30度,这意味着汽车可以以螃蟹的方式侧向移动。

AVTR外观


可以依据气流和感应翻转的仿生襟翼


内饰以流动的波浪和花朵形状为基础,这看起来是有史以来最舒适、最高效和最愉快的旅程。这辆车会与你交谈,了解你想去的地方,在给它下达指示后,你需要做的就是坐下来,让它做所有剩下的事情。值得一提的是,车内同样没有任何按键,当你伸出手站,并且注视手掌时,按键就会显示在你的手心上,你进行移动点击等操作。

AVTR内饰                                                             显示在手掌上的虚拟按键


通过手掌来控制方向                                                用手掌进行交互


通过对趋势的了解和分析,相信小伙伴们对未来感汽车有了新的认识和理解。目的也是为了让大家更好的把自己的理念和设计与未来汽车相贴合,亦或是产生灵感,发散思维,做出更好的创作。希望在不久的将来,无论在汽车造型,还是内饰,或是仪表等,可以看到大家充满激情的设计。

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

文章来源:站酷  作者:大牛李
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


案例分享 PM/UX 必看 [用户体验]

鹤鹤


 

讲User Research | 用户研究 之前,有必要先介绍下“用户体验”。这两者是密切关联的。

 


作为一枚互联网老兵,先说一下历史吧。

 

N年前,UX Designer还不怎么流行。

 

随着乔帮主iphone4的横空出世,惊为天人,彻底改变了整个手机生态。于是在中国市场,各种热钱涌入,到处都是创业公司(start-up),各类APP纷纷孵出(我在上海)。这是整个移动互联网行业野蛮生长的年代。公司那么多了,那么UI,iOS开发,Android 开发等等都是供不应求的。

 

 

当然,那么多创业公司,90%都会在一年内,在天使轮的阶段死掉。能活下来的,都是壮士!现在你看看你手机上装的啥耳熟能详的APP,基本也就是那些了。

 

题外话:我当时的公司楼上是一家知名网游公司。某天我很快乐(KU B)的去上班(Make Money),结果就看到新闻说那家创始人CEO昨天半夜心脏病发,人没了。隔天就看到他家公司门口贴讣告了。(此处默哀!)创业不易,真心能活下来的都是壮士!

 

野蛮生长的年代,对于岗位要求不会那么精细。做UI的,最好你什么都会,十项全能。平面/手绘/App UI/ Web UI/H5/交互/动效/前端最好也懂一些/其他。。。


那时候少有交互岗,因为交互岗通常会被产品岗,或者UI岗兼了。但随着这些年WEB/APP越来越成熟,用户对于体验的要求越来越高。另外,随着各类海归人才带回来的国外先进设计理念。各路大中小厂对于UX交互也就越来越重视。

 

于是,就有了UX Design | 交互设计的专门岗位,有些也叫User Experience Design | 用户体验设计,在互联网行业,两者基本一个意思。

(我们这里不讨论用户体验的五个层次,战略层、结构层、表现层之类的。这些太理论,大概知道就行了,多说我也困。真要硬掰,那交互设计实际算是用户体验中的结构层。但在国外专业文献中,UX Design=User Experience Design。不要硬刚。 :P)

 

人类总是情绪化的,总是对他们世界里的产品做出情绪化的反应

-艾伦·库珀,Cooper公司总裁,Visual Basic之父

 

 

一.什么是 User Experience | 用户体验?


通常来说,“用户体验”就是人们在使用产品时候的感受。用户体验并不仅限于互联网行业,各行各业都有。


用户体验更关注的是人和物的交互(Human-Objects Interaction)之间的联系。


“物”在互联网产品中的应用可以是Web,APP,System等。

 

举个生活中的例子,迪斯尼。

迪斯尼,娱乐行业吧?但它更是一家彻彻底底的体验公司,极其注重体验管理。


迪斯尼乐园为小朋友们,大朋友们筑造了一个梦。迪斯尼的体验管理,就是从造梦这个目的出发的。


对于服务人员、演职人员的要求,干净、礼貌都是最基本的。


迪斯尼对演员的要求是,你不是演米老鼠,你就是米老鼠。用户体验细致到如下:

只要有宾客在,演员就不能把头套摘下。之前有新闻说演员中暑了,也坚持不取下头套。(这里我们不讨论劳工权益之类的问题)因为不能毁灭孩子们的梦。

在同一个视野里,不能有两个同样的米老鼠。因为对于孩子来说,米老鼠只有一个!

全世界演米老鼠的演员,都要苦练签名。因为对于孩子来说,全世界只有一个米老鼠,签名当然是一摸一样的。


这只是演员,还有其他工作人员,还有工作以外的服务。此处不再延申讨论了。


 

二.什么是 User Experience Design | 用户体验设计(即UX Design | 交互设计)?


用户体验设计,顾名思义,就是为产品/服务设计一个良好的体验。用户体验设计同样并不仅限于互联网行业,各行各业都有。

 

举个生活中的例子,麦当劳的打包袋设计。


传统设计是这样的。

汉堡薯条什么的全部装纸袋,没有提手,每次都捏到我手指抽筋。饮料再另外装个塑料袋。

一个捏,一个提。其实是不舒服也不方便的。

 

用户体验好的设计可以是这样的。方便快捷,节约资源,解放手指。

(gif动图,刷新页面重播)

 

我们这里想说的用户体验设计,特指互联网行业。


早期的Web页,几乎就是个静态网页,就提供些信息展示。那时候用的还是asp, php, .net技术,快捷点的话有个模板套套,新闻/产品就能后台维护了。


从大概2010年以后,Web就开始越来越复杂了,APP也开始越来越精细和规范了。这对于交互的要求就越来越高,需要有一个良好的用户体验设计。

 

举个APP的例子。

淘宝最近对“确认收货方式”做了优化(大致在2021.9),不知道你发现了吗?


淘宝购物时,首先,在买东西付款的时候,就需要输入第1次支付密码。


最后,在收货确认时,

Before: 原来,还需要再输入第2次支付密码。

Now: 现在,只需要点击“确认”就行了,不需要再输入一次支付密码了。此次优化,就是简化用户的操作,提升用户体验。

 

如下图为最新优化后的截图:


 

如图,

Before: 原来,在Step 3中,原来还需要再输入第2次密码。

Now:现在,在Setp3中,直接从Setp3——>Setp4.


三.为什么UX Design | 交互设计很重要呢?

 

产品成功与否,涉及到太多方面了。战略决策、产品、内容、用户体验、技术、运营、服务、竞品情况,资金投入、运气等等,缺一不可。而用户体验/交互是其中重要的一环。


专注于用户的交互设计,大大增加了项目成功的机会。因为产品是给人用的,尤其是互联网产品,用户不会因为产品是知名品牌,就坚定不移的支持它,买它,用它。


要是产品不好用,那放弃它,也是迟早的事情了。


毕竟,能让大家都喜爱的,还不管怎么样都爱到死的,也只有RMB人民币了。

 

 

四.什么是 UX Designer | 交互设计师?


 

交互设计师,需要通过调查和分析等用户研究方法来设计产品,或者对产品做优化改进,以保证用户能有一个良好的用户体验。


 

五.UX 和UI的区别?


UI,纯粹的UI,通俗来说,就是负责好看。把产品做好看了,做精致了,让用户看得赏心悦目,心情舒畅。这是美学意义上的工作。

 

UX,通俗来说,就是负责好用。让整个产品流程简单又便利,用户使用产品不会有停顿和疑问,让用户使用产品的感受非常好。最终目的是为了增加用户的粘性,提高产品的流量,促进产品的转化率,为公司带来直接或间接的收益增长。

 

UX是产品中的重要一环。

 

当然,在实际工作中,如果产品——长得好看+体验好。那就是王者~

这也应该是做产品的要求和标准,也应该是设计师对自己的要求和标准。

 

 

举个两者结合的例子,摩拜单车。

(虽然他欠用户押金,虽然他已经没了,成为了美团单车。但是他的故事还是可以讲一讲的)

 

设计方面,

摩拜单车的联合创始人王晓峰(负责具体的研发、运营及市场工作)回忆当年做摩拜单车的时候,首先考虑的是产品和服务要让消费者有面子。


前期他做了很多市场调研(看,用户研究),当年在校园外骑车的只有三种:除了专业骑赛车的,就是蓝领工人和老年人。


想让白领阶层都愿意骑自行车,就必须要让他们觉得有面子。如果让一个白领,骑着五花八门,甚至还叮当带响的自行车上路,那是很没面子的,这种生意一定会失败。


于是,摩拜就设计出一辆金属感十足的橙色自行车,好看又酷炫。

 

用户体验方面,

摩拜单车能够提供给用户的体验一直有着不错的口碑,比如车身结实、开锁方便、损坏率低。但是,在夸赞的后面,用户们往往会补刀:「好是好,就是太重了。」(第一代重量为25公斤,是普通自行车重量的2倍。)


于是,为了改善用户体验(看,基于用户反馈。又是用户研究。),第二代摩拜单车在确保安全和耐用的前提下对每个零件减重,整车仅重 15.5kg。比于第一代单车「减重」了约 10 公斤。


这还仅仅是车身重量,其他各方面,轮胎,锁,链条,车座等等,全部做了优化改进。此处不再延申讨论。

 

 


回到做WEB或者APP的设计上。


中国的互联网行业并不羞于抄袭对手,现在产品同质化这么严重,靠单纯的产品创意早已经无法取胜了。


现在产品更多的核心优势是ABC——人工智能(AI)、大数据(BIG DATA)和云计算(CLOUD)。我们顶尖的算法工程师们(Data Scientist)好不容易对数据做了识别、分析和精准有效的输出。


结果在交互这一环没做好,用户找不到,看不懂,不会用这些产品/内容。你做设计的良心会不会痛?


 

六.用户体验设计就是需要“以用户为中心”(user-centered)而设计


不要拍脑袋决定,不要自己YY。

不然只能设计出一个你自己想要的,或者是你老板想要的产品。

 

举个反面案例:生活中的例子,厕所标识。

 

用户体验—— 正常

这张图,好理解吧,厕所标志。就算右边那个清朝的个性了点,那也是设计得不错,能看懂。


 

用户体验—— 差

这张图,额。鸡?让我想想,哪个是公鸡,哪个是母鸡?只要我努力辨认,我还是有机会成功上厕所的。


 

用户体验—— 极品差

这就是设计师自己YY的结果。


这张图,这都是什么玩意儿?大象?长颈鹿?什么意思?设计师,你给我出来,你信不信我打不死你?


这样的厕所标志,我猜都猜不出来,我只能跑到厕所门口张望,当个女流氓,看看厕所里的坑位是什么样的,我才有指望上厕所。

 

好了,那位设计师现身说法了,他的灵感源于动物习惯,大家弄不清楚的原因是他们不了解动物的具体习性。


长颈鹿在嘘嘘时会张开双腿,这标志着女厕所,而大象则用象鼻喷水,这标志着男厕所。他的灵感在大部分人看来太牵强,因为一般人对于这些动物习惯一无所知,用大象和长颈鹿来分辨厕所之间的区别是不是很无语?


这设计师就光顾自己玩创意了,自己YY。厕所是为了给大家带来方便的,好的设计创意是一回事,但最大的问题也是要方便众人使用的。

 



举个正面案例:APP的例子, AR(增强现实)。


现在AR技术已经相对成熟了,导航,家居,翻译,试妆,试鞋,地球仪都有AR。

 

拿AR试鞋举例子。

Before: N年前,AR试鞋还是把鞋子投到地面上,看个大致效果。(左侧Before截图大概是我3年前截的)

Now: 现在,AR技术做强了,AR试鞋就直接投到脚上,能够看到鞋子上脚的效果。对用户而言,体验更好。对商家而言,转化率会更高。

 

好了,用户体验就讲到这了,是不是很轻松,看看故事就有些体会了?


 

最后,

今年是乔帮主逝世10周年,缅怀下!原来,他已经离开这么久了。

 

I skate to where the puck is going to be, not where it has been. 

- Wayne Douglas Gretzky

这句话简单来说,就是预判形势,提前准备。

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

文章来源:站酷  作者:Lu倾倾
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



B端查询列表剖析和实战

鹤鹤

什么是查询列表?


首先我们先了解下官方Ant Design对查询列表的定义:


简介:

查询列表可以查看和处理大量的条目数据,常有导航至详情的作用,

用户可在列表页对条目进行筛选、搜索、对比、新增、分析、下钻至条目完整详情页等操作。


设计目标:

帮助用户更高效的查看、处理、查找条目。


设计原则:

易读性:采用格式一致外观,突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷;

可寻性:列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息;


常规布局顺序:

数据过滤 + 数据统计 + 数据列表 + 批量操作

undefined


模板页面示例:


现在有了官方解答指导,我们就先从分析模仿开始



查询列表有什么?


从四个维度开始一一分析:


一、数据过滤:

常规的数据过滤分为两种类型:


1、条件筛选:

特点【结构化+有限范围】,筛选需求和数据都是结构化的,

比如有一个用户信息表,需要筛选出性别【男】+城市【北京】+年龄段【18-24岁】的用户,就是因为信息属性可以被量化和拆解处理,我们才能多条件组合筛选(且的关系)出来;


组件:选择器(单选/多选);

布局:上下结构(常用)、左右结构,条件多时要配合可折叠操作;

形式:区域堆叠、表头、弹窗;


2、搜索查询:

特点【非结构化+模糊/精准匹配】,搜索的需求是非结构化的,

比如还是用户信息表,需要查到一个叫【宁荣荣】的信息,你就只能去手动打字去搜索,因为姓名是开放式的信息,无法被结构化处理。

undefined


组件:基础搜索框、高级搜索框;

布局:跟随列表,常放置其左上角或右上角;

关于具体使用,搜索不用多说,遵循系统统一性原则,选择一处固定位置就好,


对于B段产品,业务本身比较复杂,筛选条件偏多,原则建议从使用高低频入手,高频显性,低频置后、折叠都可(后续可以出一片详细的筛选篇分享下)


二、数据统计:

数据统计一般作为查询列表的重要配角出现,方便用户直观了解到当前页面的统计信息。

就是列表数据提炼出来统计信息,数据名称+数值,左右、上下布局都可,

有一点强调一下,业务的数据统计要求和条件筛选联动变化,就要放在条件筛选下方,

如果统计数值是固定值,就放置条件筛选上方。


三、数据列表:

这里的列表主要陈述标准的【表格Table】形式,

表格被公认为是展现数据最为清晰、高效的形式之一。


它常和排序、搜索、筛选、分页等其他元素一起协同,适用于信息的收集和展示,以及操作结构化数据,

明显优势就是结构简单,分隔归纳明确,使信息之间更易于对比,大大提升了用户对信息的接收效率和理解程度。


常规内容构成:

Header:标题、筛选(高频)、操作按钮、表搜索、icon(列设置、刷新、全屏)

Table-Header:复选框、序号、列名称、icon(排序、提示、列筛选、列搜索)

Table-Content:数据内容、按钮

Footer:多选数量,分页器


四、批量处理:

批量操作是作用于整个页面的操作,故放置与页面最底部,当然这个可以根据应用场景调整位置,

常见操作有【批量删除】【批量禁用】【批量导出】。



如何设计查询列表?


笔者也是从0开始接触B端设计,开始查阅了相关很多设计规范体系,一顿狼吞虎咽,依葫芦画瓢出了设计模板


下图就是依据Ant Design设计出的第一版查询列表模板


经过产品和研发评审,这样的布局表现虽说“五脏俱全”、“兼容性较好”,但是脱离了用户实际使用场景和交互路径,割裂感也很强,


举个例子,你准备盖一个房子,常规讲应该有有客厅、卧室、书房、厨房和卫生间五个空间,但你现在只是单纯用砖块砌了五个房间,大小一样,毫无顺序,想必你也不会这么盖···,我们现在从头开始,你是不是会考虑:


1、是不是进门应该是客厅,是不是应该大一点好接待客人;

2、书房是不是应该远离,减少噪音;

3、哪些房子需要窗户,窗户朝哪边好通风,阳光充足;

4、等等···


总结一句:我们设计出的交互操作&视觉呈现,要契合用户实际使用场景和路径,而不是自己YY。


怎么获取你想要的答案?调研和竞品分析。

调研可以向产品、销售、交付人员获取你想要的信息,

竞品分析可以找同类型产品进行优劣分析,取其精华。


下面列举调研和竞品分析的几个点说明下:


调研一

问:产品或销售登门拜访客户时,演示电脑分辨率是多少?客户使用电脑分辨率是多少?

答:多为老式笔记本电脑且分辨率偏小,1440*900、1366*768偏多。


机会点:上图数据来自百度统计-流量研究院也只能作为辅助参考,最终还是要看产品实际用户设备情况,为了保证页面内容尽可能多的展示在屏幕上,布局得紧凑,要优先适配小屏幕效果,所以设计稿尺寸得调整为1440*800(去除浏览器顶部页签+地址栏+Win任务栏高度,再取整)。


调研二

问:询问客户使用查询列表页面是否能高效的查看、处理、查找条目

答:查询查看没问题,就是一屏数据内容展示的太少,标题栏、筛选和数据统计占了太多高度,而且筛选也不常用,导出按钮在底部不明显,横向滑动很难用,看错行。

机会点:优化布局,筛选考虑折叠或者表头筛选,横向数据堆积能否换行展示,导出操作是否可以放在上方?


竞品分析:纷享销客CRM

优点:列表内容占主要视觉面积,筛选采用表头和自定义配置条件功能结合,列内容可自定义隐藏/显示/前置和列固定左侧,优先展示用户自己想看的信息,减少横向滚动条操作和提升小屏用户体验,将主动权交给用户,列表视图和分屏视图也满足了不同用户的查看需求,以上这些都是很好的优化方向。



竞品分析:广联达

优点:同样列表内容占主要视觉面积,高频筛选放出来,低频筛选采用折叠交互方式,用户有需要则点开【更多筛选】去操作,顶部有数据统计支持总揽,Table内容对于强关联的内容进行上下组合(节省横向空间),所有的操作按钮集合到右上角,方便用户定位操作。

undefined


总结一下:

undefined


以上就是笔者在调研和竞品分析上可以获取到的主要信息,虽说第一版套用AntD模板的设计并不理想,但对于初入B端行业的笔者来说着实重要,对查询列表的框架、功能、和交互有了基础指导和了解,才能有后续的一些针对特定业务场景的设计优化改版,凡事还是得现有基础理论支持,后面的路才会走的更远。


言归正传,下图就是针对上面的总结优化后的查询列表,相比第一版(可上划参考对比)变化还是挺大的,各位可以对照的优化点细细体会下:


1、取消面包屑(系统深度较浅),优化(减少)标题栏高度;

2、增加数据统计,区域板块使用分割线划分,减少割裂感;

3、页面操作按钮集合放置在右上角,主按钮统一在最右侧;

4、高频筛选常驻+表头筛选结合交互(这里其实还是有问题的,对于组合筛选操作并不易用,待优化);

5、增加Table刷新和列设置操作(刷新和设置icon);

6、列锁定(锁子icon)可以快速自定义设置优先左侧固定;

7、Table内容根据业务内容属性合并上下组合展示,节省横向面积(宁可上下滑动,也不要横向滑动,至少减少横向滑动的距离);


这一版看起来整体架构层级依然清晰明确,从视觉角度看更丰富、更有节奏感,从交互来看也更符合用户的操作场景,新增了几个辅助功能,让用户可以根据自己的业务需要自定义配置列表内容,更有掌控感,能更高效的查看、处理、查找相关信息,这也是基本达到了查询列表的设计目标。


经过和产品经理沟通,此次优化思路和方向也很准确,获得了肯定,后续的迭代还需持续进行。


调研和竞品分析带来的好处想必各位也体会到了,凡是我们不了解不精通的,就去多看看多搜搜,总会有收获,站在巨人的肩膀上总会看的更远。


Ending


这次的分享是自己在探索B端道路上的小经历,同时也体会到一些更深层次的东西,比如设计的意义在哪,什么是好的设计,怎么才能做出“好”的产品,在此分享给各位,希望能给大家带来些思维上的变化,共同进步。

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

文章来源:站酷  作者:MinFan菌
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


界面如何搭配高质量图片

涛涛

使用图片作为背景

这里的图片选择要突出核心内容且一定要高质量,不要选择杂乱无章或与主题无关的低质量图片

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片于背景进行融合

结合页面表达需要,选择合适的配图并做融合或出界的设计,会让画面极具吸引力和强烈的设计感。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将高质量的图片紧密的放在一起,不留任何间距

当画面主要以高质量图片吸引用户注意时,尽可能的利用更大展示面积,这样会显得更加高级和有视觉冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方添加色块

这里的色块要注意跟图片的主色调保持相近,可以直接吸图片上的颜色然后找找邻近色就好了,色环上 30°区间内的颜色就比较和谐。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方/上方增加图案或形状

这里的形状建议不要太过于复杂,用一些基本图形就可以,比如圆点、方块矩形之类的,增强画面的形式感

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方或上方增加文字、图案或不规则形状

这里的文字、图案或不规则形状跟上面的技巧类似,都是起到装饰的作用,但文字的话有时候还要注意识别性,比如文字比较紧凑的时候。图案或形状更多的是起到视觉引导的作用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切到文字或形状中

这个很好理解,就是以文字或形状作为遮罩,增加画面的设计感,文字尽量选择粗体

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片周围增加一个非常窄的边距

这个技巧可能跟第 3 条有些冲突,其实这 2 个方法都是可以的,要根据页面具体的排版情况灵活使用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片上增加颜色层

这个技巧也比较容易理解,一般会选择饱和度较高的颜色应用在充满活力的页面上,增加画面的冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在彩色叠加到图片中的一部分上

这个技巧跟上面的有些类似,只不过是以小面积叠加的形式,颜色一般选择品牌色或主题色,与背景尽量有较大反差会更加容易出彩。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切成其他形状

这个方法有一点需要注意的就是剪切的形状不要过于复杂,一般用基础图形就好

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

以上,就是我总结的一些可以用来操作 UI 图片的实用方法,这些方法可以使得作品变得更加有视觉感也更加专业。

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

文章来源:优设  作者:彩云Sky

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

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

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



B端图标如何设计和应用

涛涛


1.1 图标的主要类型


理解图标,首先关注的是图标本身的类型,在整个 UI 体系中,图标基本就分成3个大类:



工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解

装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于节日活动中

启动图标:产品的启动图标,即用来在系统中打开该产品的图形按钮,基本以自身 LOGO 为主


在 B 端项目中,应用最广泛的必然是工具图标,而装饰、启动图标却鲜有露面机会。但出现的少,不代表没有,解释工具图标前,我们先优先讲解下装饰和启动图标在什么情况下会出现。


其中,SAAS 类服务就有很多会重点强调品牌、情感化设计的案例,例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。



启动图标则会应用在一些比较大型的项目里,当项目出现了很多下级功能模块或类似插件的体系时,就会采取使用应用图标的方式作为入口。


比如 Figma 也是一个 B 端工具,它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品,一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求,就自然而然会用到启动图标了。



最后,就是我们熟知的工具图标了,前两种图标,在前期画不好不要紧,毕竟这类规格的产品会有经验更丰富的设计或总监坐镇,新手当个切图仔即可……


但是工具图标,重要性就不言而喻了,B 端项目对工具图标的需求非常大,几乎每个组件中都会包含图标。



虽然今天网上有非常丰富的图标素材库,但在形式各异的 B 端项目里依旧是供不应求的,各种行业特有的功能、实物、隐喻,只能设计师自己完成。


B 端设计师在图标设计领域的主要工作,就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。


1.2 B端工具图标的风格


工具图标的应用主要包含两个部分,线性图标和面性图标。



这里再提图标风格,不是把以前的知识点重新讲一遍,而是要强调 B 端图标的特殊性。和 C 端相比,B 端图标的实用属性更高,并不需要过多凸显本身的视觉风格。


所以,工具图标中,使用大量渐变、插画、投影的类型都要排除掉,它们对 99.9% 的项目都只会造成体验的负影响,不要被网上的追波风飞机稿给带偏。



适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可,一定要划分出差异,应该只包含圆润、纤细、尖锐这几种。



很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢?答案是没有差异。


线性和面形的使用,纯粹看设计师在当前场景判断哪个合适用哪个,只要保证对应图标风格统一即可。


不过如果遇到一些比较特殊的情况,比如要表现各类设备的复杂图标,那用线性的做法还是相对合适和简单一点。



1.3 图标的统一性规范


对 B 端设计来讲,独立设计图标的步骤是必不可少的,应该掌握的图标规范还是必须要懂的。


我们虽然没有 C 端那么多风格和技法的拖累,但想画好 B 端图标却多出了其它难点,那就是一个页面中出现的图标实在是太多了。



这就引发了我们要讲的第一个规范要点 —— “统一性”,所有同规格类型图标具有一致性的特征,这些特征包含了:

  • 粗细一致:首先使用统一的描边、线段粗细参数

  • 圆角一致:使用一致的圆角数值,不要一下尖角一下圆角

  • 透视一致:使用接近的透视角度,不要有的侧视有的正视图

  • 大小一致:视觉的大小保持一致,有均衡的大小感受


如果不能保证统一性的基本要求,那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标,它们的细节完全不一样,统一性当然无从谈起。


而让整套图标保持统一性,是相当有难度的,其中最难的一点,就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸,但不代表图标实际图形的长宽数值是完全一致的。


几何图形对视觉有一定的欺骗性,有不同的大小体验,比如下方案例(鱿鱼游戏乱入?):



所以,基于这样的特性,每个图标本身都包含了两层属性,图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小,是透明白的,排版的时候以这个尺寸作为实际的边缘来测量。



而视觉尺寸,则是在占位尺寸下图标图形的实际大小,这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的,我们用占位尺寸包裹它们来方便我们进行统一的应用。



所以,使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然,不同的素材,这个留白也是有区别的,下一个小节就会解释。


最后要声明一点,一套项目中可以包含多个规格(2-5个)的工具图标,比如导航用的图标比普通工具图标更复杂一点,设计师只要保证每种规格保持的统一性即可。


1.4 图标的栅格系统


图标越多,大小的控制越困难,所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。


在 Ant 的体系中,一个基于栅格的图标实际包含3层,背景层、格线层、图形层。



背景层,即图标展位尺寸,需要先确定出这个元素的大小,然后才是里面的绘制区域。通常,栅格系统会为边缘预留 1-4 像素的内边距(出血位),正所谓四周留一线,日后好相见。


格线层,则是使用的栅格线段,也是最重要的部分。格线层通常由 4 个基本图形构成,包含正方形、圆形、水平长方形、垂直长方形。


这四个图形的长宽大小不一,原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列,就可以发现它们的视觉大小非常接近。



这些格线的作用,就是提前帮我们确定好视觉比例,帮助我们快速绘制相同图形类型的图标。



但是,不是完美符合这四个图形要求的图标该怎么办,总不能格线把所有轮廓都给你实现出来吧?


格线的另一层作用,也就是最重要的作用,其实是一个用来做测量的工具,而不是轮廓依据。在几何视觉差中,最基础的大小原理是占用面积越大的图形,尺寸感受越大。所以,长宽一致的正方形大于圆形,圆大于三角形。


所以当我们绘制的非常规图形,和类似格线进行对比时,长宽缺少的一侧,就要由另一侧增加数值来填补它的面积。


比如下图 Ant 官方的电脑图标,它的宽是横向矩形,但是中间区域面积较小,所以增加了高度进行平衡。



再看一些其它的案例



这一步没有固定的参数使用技巧,设计师需要将完成的图标置入到其它图标旁边进行调试,确保尺寸是合适的。

格线只是一个图标大小设置的参考工具,一切以最终效果为标准。





理解完图标的基本规范,就到图标的使用逻辑了,解决一些常见的设置误区。


2.1 图标应该做多大

图标该做多大的,这是目前被问到最多的问题。本来应该是非常简单的一件事,但很多工作多年的设计师也搞不清楚。


仔细捋了捋,罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。



要重点强调,Ant 设计图标的意图,和一般项目的是完全不同的。Ant 作为一套庞大的开源项目,它的图标核心特征之一就是 —— 适应性


这些图标要被应用到各种不同的设备、显示器、系统中,图标尺寸会用多大,在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成,后续实际应用中的缩放、匹配也就越容易,适应性越高。


但是,在我们自己的项目中,这种做法是完全没有必要的,1024 图标的负面影响包含:

  • 像素数过多使得数值的制定难度大大提升,不管是元素尺寸还是描边粗细

  • 矢量图形源文件进行缩放很容易发生错位,提前轮廓化会破坏源文件

  • 缩放图标后描边的数值往往会出现非整数和 0.5 的状态,虚边问题严重


在常规项目里,一套项目是可以包含不同尺寸和规格的图标的,而不是我们做一套相同风格的图标在整个应用中无差别使用。


这也意味着,每个图标在产品中的使用场景通常只有一个尺寸,不需要去面临缩放的情况。即使需要缩放,也只是这套图标中的少数几个需要,或者相对特殊的项目。


所以,图标尺寸设定,就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适,然后创建同样的数值即可(尽量以4的倍数为标准)。



2.2 素材的正确使用方法


我们知道图标的素材非常丰富,不管是 Iconfont、IconPark 还是 Iconsearch 等网站,都提供了海量的素材。但是只要稍微专业点的项目,往往素材库都满足不了,部分规格的图标还是需要我们自己重新绘制。


所以说图标素材就完全没用了吗?当然不是。


图标的正确用法是作为一种快速试错的参照物,它可以帮助我们实现:

  • 参考图标的具体尺寸在哪个数值最合理

  • 参考当前场景使用面性还是线性的风格更合理

  • 参考图标的设计风格是圆还是尖锐更合理

  • 参考相关隐喻的图形样式哪种更合理


在项目的界面设计阶段,我们一向建议优先使用外部的素材,尤其是 IconPark 这种比较统一,还可以快速调节图标样式的工具网站。



这个过程即使素材找不到和寓意一致的也没关系,用相近的图标替代就可以。等到页面布局基本完成以后,最后再集中精力对需要绘制的图标重画一遍(甚至是在开发阶段绘制)。


通过别人的图标来快速匹配尺寸、风格、样式,会帮助我们节省非常多的时间,也有助于我们设计出更专业、美观的图标。


另外,就是针对项目一些偏小尺寸的通用图标,就可以比较放心的应用素材,例如翻页的左右、更多、下拉、搜索等等。



2.3 图标的色彩和状态


图标的尺寸、样式都确定了,最后就是关于图标的色彩和不同状态的制定了。


前面讲过,B 端项目对图标的装饰属性没有那么迫切,所以正常情况下,太花哨的图标是要尽量避免的。彩色、渐变色、投影,都不应该在这个情况下胡乱使用。


常规的图标只要使用中性色即可,而需要特别对待的图标,色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。


当然,如果项目涉及到一些特殊的工具图标,类似工厂、工业领域表达实体设备的拟物图标,可以打破这个原则。但是,同样避免这套拟物图标的每个图标用色不同,尽量只使用 3 种以内的颜色完成拟物的填色。



同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现,部分图标会承担按钮的功能,包含默认、选中两个基本状态。


普通权重的图标,未选中状态可以在默认色彩基础上使用透明度来实现。



高权重的图标,则可以在选中的状态替换色彩,或者更改图标的类型,将原本的线性更改成面形并填充色彩制造反差。





完成所有图标的设计以后,最后一步就是切图和导出了,这决定你的图标能不能被正确运用到线上项目中。


3.1 图标的收纳和命名


在一套专业的 B 端项目中,已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里,而是在规范页面中有统一的整理和收纳。



这种做法的流程是,先在软件的规范库中创建对应的图标组件( Symbol / Compoent ),然后再在具体页面中应用,方便后续的统一管理和修改。


而在这个过程中,我们也需要对图标有正确的命名方法,来确保团队调用、检索图标的效率。通常,我的图标命名规范如下:

尺寸 / 类型 / 图标名-状态


示例:

48px/导航图标/表盘页-默认

24px/一般图标/搜索-默认


“/” 号的引用主要是方便软件中对组件层级进行划分,而我调用图标的规则势必是先从尺寸开始,再选择对应规格,最后类型和状态。


提前命名也是方便后续我们切图和导出,但要提及一点,图标的命名不要追求英文化,因为我们的词汇量不可能实现正式的英文命名规则,只会写一堆大家都看不懂的单词。


而开发在使用我们的图标切图时,也不会用我们之前取的命名,会根据自己的命名习惯重新命一遍,写个让他能看懂的名字远比用乱七八糟的英文强


3.2 图标的切图格式


接下来,就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片,然后上传蓝湖发给开发自生自灭了,这是一个非常不合理的操作。


再或者,强行使用 Fonticon 格式,而不管实际情况如何,造成最后实现效果完全不同步或实现不了。


切图是通过前端调用并在浏览器中进行显示的图形,而要被浏览器正常显示,就有必要了解适合使用的切图格式。


图片的格式包含位图和矢量两种,位图是通过记录像素色值的图形格式,假设一张图是 100*100 像素,那么记录 1W 个像素点的色彩,所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式,可以支持自由缩放。


理论上,矢量格式是最佳的图标切图格式,但是它的限制同样有很多,例如:

  • 无法记录渐变色

  • 导出轮廓容易有错误

  • 无法记录拟物图形

  • 无法记录投影元素


前面说过,普通项目中同一图标是很少出现一会儿大一会儿小的需求,所以矢量最大的特征无损缩放,往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题,而不是网页端的基本使用。



当一套项目中出现了矢量格式无法覆盖的图标时,那么即用矢量切图,又用位图,就会显得非常的混乱。只有类似 LOGO 等图形元素,才需要考虑 SVG 格式,而不是一看到图标就上。


所以,最适合切图的格式就是位图的 PNG 格式,一方面它是无损的,另一方面它支持透明背景,在切图应用上可以完美和设计稿结合,而这是其它大多数位图格式不具备的特征。


当每次项目完成以后,并不需要通过蓝湖来实现切图的导出,如果切图文件分散在各个项目页面里,那么一定会有很多图标被遗漏,尤其是图标的不同状态切图。


所以,最理想的切图形式,就是将所有图标完成整理和命名以后,一起框选,然后导出成 PNG 格式,再同步给程序员即可。






以上就是关于 B 端图标应用的所有知识点了。后续会将这些内容进行分拆,更新到原子核系列课程中去,会有更细节的案例说明。

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

文章来源:站酷 作者:酸梅干超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


B端产品之权限设计(RBAC权限模型)

涛涛


一、前言


随着互联网的快速发展,B端行业也逐渐崛起,很多企业管理中使用的软件我们通常称其为B端管理系统,而在B端系统中“权限管理”是必不可少的功能,不同的系统中权限的应用复杂程度不一样,都是根据实际产品以及需求情况而设置合理的权限。而我们现在对于权限的设置基本上都是建立在RBAC权限模型上的、扩展的,下面我会通过介绍RBAC权限模型的概念以及结合实际业务情况列举权限设置的应用。






二、什么是RBAC权限模型?


RBAC是Role-BasedAccess Control的英文缩写,意思是基于角色的访问控制。RBAC认为权限授权实际上是Who、What、How的问题。在RBAC模型中,who、what、how构成了访问权限三元组,也就是“Who对What进行How的操作,也就是“主体”对“客体”的操作。其中who是权限的拥有者或主体(例如:User、Role),what是资源或对象(Resource、Class)。


简单的理解其理念就是将“角色”这个概念赋予用户,在系统中用户与权限之间通过角色进行关联,以这样的方法来实现灵活配置。


RBAC其实是一种分析模型,主要分为:基本模型RBAC0、角色分层模型RBAC1、角色限制模型RBAC2和统一模型RBAC3。


RBAC权限模型是基于角色的权限控制。模型中有几个关键的术语:

  • 用户:系统接口及访问的操作者

  • 权限:能够访问某接口或者做某操作的授权资格

  • 角色:具有一类相同操作权限的用户的总称





1)RBAC0

RBAC0是RBAC权限模型的核心思想,RBAC1、RBAC2、RBAC3都是在RBAC0上进行扩展的。RBAC0是由四部分构成:用户、角色、会话、许可。用户和角色的含义很简单,通过字面意思即可明白,会话:指用户被赋予角色的过程,称之为会话或者是说激活角色;许可: 就是角色拥有的权限(操作和和被控制的对象),简单的说就是用户可使用的功能或者可查看的数据。


用户与角色是多对多的关系,用户与会话是一对一的关系,会话与角色是一对多的关系,角色与许可是多对多的关系。






   

2)RBAC1

RBAC1是在RBAC0权限模型的基础上,在角色中加入了继承的概念,添加了继承发的概念后,角色就有了上下级或者等级关系。



举例:集团权责清单下包含的角色有:系统管理员、总部权责管理员、区域权责管理员、普通用户,当管理方式向下兼容时,就可以采用RBAC1的继承关系来实现权限的设置。上层角色拥有下层的所有角色的权限,且上层角色可拥有额外的权限






3)RBAC2

RBAC2是在RBAC0权限模型的基础上,在用户和角色以及会话和角色之间分别加入了约束的概念(职责分离),职责分离指的是同一个人不能拥有两种特定的权限(例如财务部的纳入和支出,或者运动员和裁判员等等)。

用户和角色的约束有以下几种形式:

  • 互斥角色:同一个用户在两个互斥角色中只能选择一个(也会存在一个用户拥有多个角色情况,但是需要通过切换用户角色来实现对不同业务操作)

  • 基数约束:一个用户拥有的角色是有限的,一个角色拥有的许可也是有限的

  • 先决条件约束:用户想要获得高级角色,首先必须拥有低级角色


会话和角色之间的约束,可以动态的约束用户拥有的角色,例如一个用户可以拥有两个角色,但是运行时只能激活一个角色。




例如:iconfont和蓝湖的用户与角色就采用了约束的概念,超级管理员只允许只有一个







4)RBAC3

RBAC3是RBAC1与RBAC2的合集,所以RBAC3包含继承和约束。








二、为什么要引用RBAC权限模型?


RBAC中具有角色的概念,如果没有角色这个概念,那么在系统中,每个用户都需要单独设置权限,而系统中所涉及到的功能权限和数据权限都非常多,每个用户都单独设置权限对于维护权限的管理员来说无疑是一件繁琐且工作量巨大的任务。


而引入角色这个概念后,我们只需要给系统设置不同的角色,给角色赋予权限,再将用户与角色关联,这样用户所关联的角色就直接拥有了该角色下的所有权限。



例如:用户1~用户8分别拥有以下权限,,不同用户具有相同权限的我用不同的颜色做了区分,如下图:




在没有引入RBAC权限模型的情况下,用户与权限的关系图可采用下图的杨叔叔展示,每个用户分别设置对应的权限,即便是具有相同权限的用户也需要多次设置权限。





引入RBAC权限模型及引入了角色的概念,根据上面表格的统计,用户1、用户3、用户5、用户8拥有的权限相同,用户2、用户6、用户7拥有相同的权限,用户4是独立的权限,所以我们这里可以根据数据统计,以及实际的需求情况,可以建立三个不同的角色,角色A、角色B、角色C,三个角色分别对应三组用户不同的权限,如下图所示:




对应的上面的案例表格我们就可以调整为含有角色列的数据表,这样便可以清楚的知道每个用户所对应的角色及权限。




通过引用RBAC权限模型后,对于系统中大量的用户的权限设置可以更好的建立管理,角色的引入让具有相同权限的用户可以统一关联到相同的的角色中,这样只需要在系统中设置一次角色的权限,后续的用户便可以直接关联这些角色,这样就省去了重复设置权限的过程,对于大型平台的应用上,用户的数量成千上万,这样就可避免在设置权限这项工作上浪费大量的时间。







三、引入用户组的概念


我们依旧拿上面表格案例举例,虽然前面我们应用的RBAC权限模型的概念,但是对于大量用户拥有相同权限的用户,我们同样的也需要对每个用户设置对应的角色,如果一个部门上万人,那么我们就需要给这个部门上万人分别设置角色,而这上万其实是具有相同的权限的,如果直接采用基础的RBAC权限模型的话,那么面对这样的情况,无疑也是具有一个庞大的重复的工作量,并且也不利于后期用户变更的维护管理,那么针对相同用户具有相同的权限的情况,我们便可以引入用户组的概念。


什么是用户组呢?用户组:把具有相同角色的用户进行分类。


上面我们的数据表格案例中的用户1、用户3、用户5、用户8具有相同的角色A,用户2、用户6、用户7也拥有相同的角色B,那么我们就可以将这些具有相同角色的用户建立用户组的关系,拿上面的案例,我们分别对相同角色的用户建立组关系,如下:

用户1、用户3、用户5、用户8→建立用户组1

用户2、用户6、用户7→建立用户组2


因为用户4只有一个用户,所以直接还是单独建立用户与角色的关系,不需要建立用户组,当然尽管只有一个用户也是可以建立用户组的关系,这样有利于后期其他用户与用于4具有相同的角色时,就可以直接将其他用户添加到这个用户组下即可,根据业务的实际情况而选择适合的方案即可。




通过案例表格的变化我们就可以直观的看出权限设置变得清晰简洁了,通过第用户组赋予角色,可以减少大量的重复的工作,我们常见的企业组织、部门下经常会出现不同用户具有相同角色的情况,所以采用用户组的方式,便可以很好的解决这个问题,给具有相同权限的用户建立用户组,将用户组关联到对应的角色下,此用户组就拥有了此角色下的所有权限,而用户是属于用户组的,所以用户组下的所有用户也就同样的拥有了此角色下的所有权限。一个用户可以属于多个用户组,一个用户组也可以包括多个用户,所以用户与用户组是多对多的关系。






四、引入权限组的概念


权限组与用户组的原理差不多,是将一些相对固定的功能或者权限建立组的关系,然后再给此权限组赋予角色,目前我所接触的B端项目中使用权限组的概念的比较少,可简单的看一下关系图










四、功能权限和数据权限


B端系统中一般产品的权限由页面、操作和数据构成。页面与操作相互关联,必须拥有页面权限,才能分配该页面下对应的操作权限,数据可被增删改查。所以将权限管理分为功能权限管理和数据权限管理。


功能权限管理:指的是用户可看到那些模块,能操作那些按钮,因为企业中的用户拥有不同的角色,拥有的职责也是不同的。

数据权限管理:指的是用户可看到哪些模块的哪些数据。


例如:一个系统中包含多个权责清单(清单1、清单2、清单3),系统管理员能对整个系统操作维护,也就可以对系统中的所有清单都能操作(增、删、改、查);假如分配给总部权责管理员的是清单1,那么他将只能对清单1进行操作(增、改、查);普通用户也许只有查看数据的权限,没有数据维操作的权限(查),这里的操作是系统中所有可点击的按钮权限操作,列举的增删改查只是最常见的几种操作而已。









五、实战案例总结


我目前所做的项目是一个关于权责管理平台的B端系统,关于系统中的权限需求我这里简单的介绍一下,并采用上面所总结的RBAC权限模型对实际业务需求进行设计分析:

01:不同的区域管理员的权限各不相同(说明会存在不同的用户具有不同的权限,那么我们就可以采用角色对其进行规范)

02:有大量的用户具有相同的权限(例如组织、部门等)(说明存在相同权限的用户,那么我们就可以采用用户组的概念)

03:上级管理员拥有下级人员的所有权限(说明存在继承关系)

04:不同用户所看到的数据和能编辑的数据不同,一些机密性的数据只允许部分人员看或者编辑(说明存在约束)


05:会存在临时性的用户(说明需要支持新建新角色)

06:同一用户会存在多个角色(多角色求合集或者切换用户角色)



简单说明一下,我所做这个项目的人员管理是在另外一个系统中管理的,权责平台只是调用另外一个平台的组织结构树即可,所以权限设置模块没有做人员管理的模块


根据上面对需求的分析,整个权限管理模块中我们需要建立用户组管理模块、功能角色管理模块、业务(数据)管理模块、权限设置模块,下面就对每个模块做更细致的页面展示设计分析



1)用户组管理模块

用户组管理主要是对具有相同权限的用户分类建组,所以页面中我们需要有新建用户组的功能,每个用户组下我们需要关联对应的组织、部门、岗位、人员,让这些具有相同权限的用户在同一个用户组下,如下图:





2)功能角色管理模块

B端项目中一般会建立几个默认的角色是不支持用户修改、删除的,例如最常见的系统管理员,而也会需要有其它角色的需求,所以此模块需要支持用户新建角色,功能角色是对大模块的页面和操作的权限设置,操作权限的颗粒度可以细分到每个页面的每一个按钮的操作,如下图:






3)业务(数据)角色管理模块

业务角色是对页面中的数据饿查看的权限设置,而对于系统中的普通用户查看系统的权限是常用不变的,所以我们考虑默认有一个普通用户的角色,其它业务角色用户根据实际需求情况自行建立即可,由于我们权责系统的特殊性,我们需要满足用户对部分数据可编辑且对部分数据的字段可编辑,按照常理来说,编辑的操作行为是属于功能权限的设置,但是这里的操作行为是建立在数据的基础之上的,所以如果把这里对数据的操作权限在功能角色模块中设置,就会显得混乱,所以我们直接在业务角色模块中加入对数据的可编辑权限,这里在设置的时候更方便灵活





4)权限设置模块

权限设置模块只需要设置权限分配的对象,选择对应的用户或者用户组,关联对应的功能角色和业务(数据)角色即可,这样就形成了一条完整的闭环的权限设置






对于06同一用户会存在多个角色,我们系统是采用切换角色的模式来实现的,因为不同角色中存在互斥的情况,以及所涉及的领域不同,操作权限差距较大,求合集不利于控制权限,所以只能采用切换的模式实现

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

文章来源:站酷  作者:设计小余
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


日历

链接

个人资料

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

存档