首页

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

涛涛

版式设计是大部分设计师再熟悉不过的一个词了,市面上很多文章都有普及过各种版式设计知识,比如:印刷中的版式设计、移动界面中的版式设计等等。但是在我做中台规范时调研发现针对中台系统文字规范内容科普的知识较少,可能是中后台设计在国内还是处于初级阶段吧。所以结合调研内容到实际工作中的总结给大家分享关于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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



界面如何搭配高质量图片

涛涛

使用图片作为背景

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

配图不够有设计感?这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端产品之权限设计(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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


B端产品设计规范之数据展示

涛涛


数据展示有哪些?



01.徽标

是收纳消息数量的样式,一般出现在图标或者头像右上角。



02.标签

数据展示里面抽取出来的共性特征,将它们转化为标签。标签样式有线框、带不透明底或者面性。



03.走马灯

相当于c端的轮播图




04.文字提示

可以出现在鼠标悬浮按钮时候的行为解释说明,也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。



05.气泡卡片

比起文字提示可以承载更多内容,相对弹窗,气泡卡片操作更轻盈。




06.标签页/选项卡

标签页可以帮助用户在一个页面内快速切换不同类型内容,提升单个页面整体的扩展性。标签本质上就是内容区的导航。



07.折叠面板

折叠面板可以更好的收纳内容区域,提高页面利用率。可以和表格结合使用,折叠表格部分详情内容,使得纵向空间更节约。




08.表格

表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。


当笔记本过小,表格展示不全时候,可以固定首尾重要信息进行滚动。


带排序的表头,可对数量或者金额进行排序。


带分组的表格,建议带边框并且用色块区分表头和内容。


单元格可编辑


批量选中时只会选中当前页,因为分页还没加载出来,为了给用户正确的引导,可以给上提示性文案,例如“已选中XX项内容”。


如果当前页批量选中的数据量不满足要求,可以改变分页器,增加当前页数据量,从而增加选项。


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

文章来源:站酷  作者:最多三分糖

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

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

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



2021 出镜率最高的 7 种网页 UI 风格

涛涛

虽然说 2021 已经快到 10 月份,但我最近我还是花了点时间,搜罗全网设计,总结出了这 7 种出镜率最高的版式风格,也是今年最流行的设计表现形式之一。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

看完这一波网页 UI 类设计,再也不愁接下来该如何做设计创新了。

图与线叠加

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

这是今年出镜率比较多的一种设计风格,不管你是在 Dribbble 还是 Behance 上都能见到它的影子。这种风格设计最大特点:形式感、聚焦、简约而不简单。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

当然还可以是将线圈与文字叠加图片,有一种层叠纵深布局感受。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

又或者说图形只是作为装饰作用。

纯文字版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

纯文字版式在今年版式中出镜率也是相当之高,包括深圳设计周官网也几乎都是几个大字排版。其实我们仔细思考,将文字放大处理,有点图形化的意思。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

上图是典型的文字图形化,将文字转化成线性设计。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计风格大胆、新颖,让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些,追求形式感与观赏性。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计,不光只是图片与文字混合排版,还可以是图标与文字、粗字体与细字体之间的混合穿插。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形设计趋势一直都存在,在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式,让画面瞬间活了起来。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

还可以将文字处理成圆形,与圆形图相呼应。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化版式今年出镜率尤其之高,将文字轮廓化设计处理,减轻了文字的视觉重量感,更像是将文字线条化设计处理。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化设计还可以用在背景,作为设计装饰效果。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感设计趋势,也是今年最火的设计风格之一。那么它在网页出镜率也是在下半年开始逐渐多了起来,也许是设计师发现这种质感细腻与折射光透露出的细节之美。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

使用线条

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线无疑是图形里面运用较多的,今年发现很多网页中都加了线条作为版式装饰,或者就是纯线条版式设计,让人眼前一亮,原来还可以这样玩。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线条在这里作用明显,除了美学设计装饰之外,它还用作信息层级区分。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

好了,差不多到这里就结束了。7 种风格,希望能给大家带来一些新鲜的设计想法,在工作中将其运用进去。

当然,在做设计提案版式、作品集包装都是可以参考,希望大家不要被局限。

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

文章来源:优设  作者:功夫UX

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

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

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



顶部导航 vs 侧边导航,到底哪种更好用?

涛涛

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题,如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究,结论是在左侧设置导航好处多多。此外还有很多类似的研究,你可以在这里看到很多相关研究的摘要。值得注意的是,这些研究大都是 2017年之前的研究成果,而如今很多设计范式发生了变化。

顶部导航 vs 侧边导航,到底哪种更好用?

1、左侧导航更容易浏览

Eyetracķ荷兰国际集团的研究表明,用户习惯于使用 F 式的浏览路径,这使得左侧导航在一般情况下有着相对更强的可用性,它不需要用户视线上的查找,因为用户会下意识注意到它们的存在。

顶部导航 vs 侧边导航,到底哪种更好用?

2、顶部导航更加节省空间

如果我们经常使用笔记本电脑来浏览页面,会很容易注意到不同的导航模块对于页面空间的占用比例,左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍,因为纵向的侧边栏导航需要考虑到横向的标题占用空间,再加上搜索等功能模块的加入,这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠,这种处理方法也不总是有效的,因为这可能会隐藏相关条目的标签信息,降低了导航的可用性。

顶部导航 vs 侧边导航,到底哪种更好用?

3、侧边导航更容易缩放和收纳

也正是左侧导航本身的排版逻辑,它通常可以显示比顶部导航多一倍的条目内容,如果你的信息架构本身涉及到的一级菜单条目较多的时候,采用左侧边栏导航是明显更合理的选择,而且这种导航非常适合随着时间推移逐渐增加条目的需求。

顶部导航 vs 侧边导航,到底哪种更好用?

4、侧边导航支持定制化导航结构

侧边导航本身虽然占用的空间更大,但是它也有着更多的空间根据需求来定制各种不同的需求,相比于顶部导航,侧边导航甚至可以直接将分层的二级菜单直接展现出来,就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

顶部导航 vs 侧边导航,到底哪种更好用?

5、侧边栏更和桌面端系统更一致

你会注意到 macOS 和 Windows 操作系统当中,系统默认的用户界面大都采用了灵活的侧边栏导航设计,很多 web 应用也是如此,它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。

顶部导航 vs 侧边导航,到底哪种更好用?

6、悬停激活下级菜单在顶部导航中更好用

悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的,但是在侧边栏导航当中,这种设计可能会在一定程度上遮挡住下级菜单,如果使用在旁边展开的方式,可能会占用大量的空间,总而言之,它更贴合顶部导航的交互模式。

顶部导航 vs 侧边导航,到底哪种更好用?

7、顶部导航栏适合做超级菜单

顶部导航正是因为和悬停出发下级菜单的功能很搭,所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式,这种布局也为产品展示和广告留出了足够多的空间。

顶部导航 vs 侧边导航,到底哪种更好用?

8、尽量避免重设计时改变导航模式

如果一种导航模式看起来不够好用,那么是否要借助重设计的机会,切换到另外一种模式呢?根据 Jira 的用户测试,95% 的早期用户对于这种情况会感到非常迷惑,即使是再小的导航功能修改都可能直接影响到大量用户的日常使用,因此不管哪种导航模式,一旦选定,尽量不要改变。

顶部导航 vs 侧边导航,到底哪种更好用?

9、不论哪种导航栏都面临响应式设计的挑战

对于没有太多条目的顶部导航,在移动端上依然可以直接在顶部呈现,不过如果太多了就需要使用汉堡菜单来承载,或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点,因为导航模式本身是一致的,但是有限的空间内如何呈现大量的导航条目同样存在挑战。

顶部导航 vs 侧边导航,到底哪种更好用?

结论:用哪种导航栏取决于需求

顶部导航:占用空间小,在页面的位置最为显著,涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站,顶部导航还是很好用的,对于层级较少但是二级条目特别多的超级导航,顶部导航也是不二选择。

侧边导航:侧边导航支持一级条目较多且层级较多的导航需求,扩展性良好,对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。

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

文章来源:优设  作者:Taras Bakusevych

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

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

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



搜索框的学问

涛涛

关键词:搜索框,UI,UX交互,用户体验,响应式设计,网页

 

题外话Tips: 在写Amazon案例时,看到了歪果仁对国货马应龙的评论,简直太欢乐(以前看过人家翻译的帖子,但自己看一遍还是太搞笑了)。于是就写跑偏了,翻译了下贴了上来。随便乐乐~ (CTRL+F页内搜索可直达)



目录:(CTRL+F页内搜索可直达)

第一章 搜索框-默认状态

一、 位置

二、 宽度(包含响应式设计)

三、 按钮样式

四、 展开 or 隐藏?

五、 默认要有提示文字啊!

六、 推荐词

七、 有很多分类怎么办?

八、 一个页面里有2个搜索框怎么处理?

 

第二章 搜索框-光标触发的状态

一、下拉框中,历史记录+热搜词是标配

二、下拉框中,标配+额外内容

三、下拉框中,纯个性化内容

 

第三章 搜索框-搜索中的状态

一、 默认交互

二、 个性化交互

三、 搜索下拉框中的多选功能

四、 回车 or 不回车?



正文:

以下都是从Web端角度写的总结,Web的空间比APP大,相对来说,交互可发挥的余地更大。APP端如果有时间,就另外再写吧。



搜索框简单吧,也就输入框+按钮。但是就那么点小元素,里面也是注满了无数的小心思,死光了无数产品经理/交互设计师的脑细胞,只是为了让交互更流畅,产品体验更好。


第一章 搜索框-默认状态


搜索框的默认UI/UX样式,取决于网站的业务性质,取决于搜索功能的重要性,取决于页面布局。

 

一、位置


搜索框的位置放在哪里,取决于搜索功能对于网站的重要性。

 

N年前,就有很多小伙伴引用过如下研究报告了,我重复下吧。

Dawn Shikh 与 Keisi Lenz 的研究:展示了在142个参与者的调查中,网站搜索框的期望位置。研究发现,对用户来说最方便使用的地方是网站的左上角与右上角位置。用户可以使用常见的F形扫描模式轻松找到它。



如图,搜索框要放置在网站的右上角或者中间位置,这是用户所期望的位置。


 

目前大部分网站在UI布局搜索框时,也是大致遵循这个规则的。但总体来说,搜索框的位置,还是可以分为如下几种:

1.  页面-居中

2.  页面-顶部居中

3.  页面-顶部右边

4.  其他

 

那么,分别讨论:


1.    页面-居中


为啥居中?当然因为对于网站,搜索是核心功能。如果没有搜索功能的话,业务几乎无法开展。它最最最重要啦!

 


1)绝对居中


这种一般适用于搜索引擎的首页。页面基本就是一屏,搜索是最主要功能,其他内容不重要。

比如Google, 百度。

Google的界面就相当干净清爽。嘿,我就是纯搜索的,赶紧搜呗!



百度,可以只显示一个搜索框。

如图所示的搜索框下的大块资讯,是可以在设置中隐藏的,不想看,关掉就好。



2)相对居中,垂直略靠上部。


适用于数据库网站的首页。


因为数据库的数据量动不动就是千万、上亿的,搜索是极其重要的功能,99%的用户都是带着目的来的,直接通过搜索找数据的。搜索框需要极其醒目,需要占据首屏大部分的位置。


但考虑到数据库网站的首页也需要展示其他信息,来增加用户粘性,一般会有好几屏,比如最新信息,热点信息之类的。这些就放在搜索框大区块的下方了。

 

比如 官方司法权威网站-中国裁判文书网,全国的1亿多个案件都在这个数据库里,供免费查阅。搜索数据是核心功能,因此搜索框最醒目,占首屏大部分位置。其他信息依次往下布局展示。




2.   页面-顶部居中


为啥顶部居中?因为网站业务中,搜索是重要功能,但不是全部。不用夸大显示,但顶部的居中好位置要留给它。

一般适用于电商平台,资讯平台。


这些网站中,展示商品、广告、信息才是重点,是为了促成交易,增加流量的。搜索是工具,比较重要,但不是重点,只是为了达成目的的一个手段。因此可以放在页面顶部且居中的显眼好位置,重要,但是不过分夸张。

 

用户场景:

如果用户是漫无目的的瞎逛,可以随便浏览页面中提供的大量信息。

如果用户是有目的的找某个商品或信息,也能很容易的在页面顶部找到搜索框,定位目标。

 

比如,电商平台-京东




比如,视频平台-Youtube

看到了吗?顶部中间,不太显眼的那个灰色搜索框。




3.  页面-顶部右边


为啥顶部右边?因为网站业务中,搜索只是辅助功能,居中这么好个位置没必要,放右边看得见就行了。

 

比如, Dribbble

Dribbble,设计师都知道。一般大家都是去随便看看找灵感的,浏览信息是重点,搜索功能不太重要,放边上就行了。



比如,小米

提问:有同学会问,嗯哼,这是电商网站呀,要卖产品呀。为什么不像淘宝京东一样放顶部居中呀?

 

回答:因为,这是品牌自己的平台呀,就那么几个品类,在顶部导航条内,侧边导航条内都已经展示得清清楚楚了,鼠标点点就行了。搜索是次要的功能。

 

根据设计原则——奥卡姆剃刀原理(简单有效原理)

*  只放置必要的东西

*  给予更少的选项


顶部的品类导航条本身就能帮用户找到产品了,可以直达分类页面,是非常重要的入口,也是重要的产品宣传,需要放在顶部首行的位置。

搜索是辅助功能(此处相信小米的PM是分析过search usage的),放在次要位置就可以了。

不需要同时突出搜索框+品类导航条,来增加用户的选择成本。

 

另外,要是搜索框居中了,那展示品类的重要导航条就得布局在第二行。Web/APP的第一屏都是黄金位置,能省一行是一行。



4.    其他


1)可以放logo的右边。


比如google的搜索结果页

从设计理念上说,google的搜索框和logo放在一起,也能组成品牌和搜索引擎之间的强关系。即google=search. 用户们不也早就说,“你google一下”,而不是“你搜索一下了”嘛!

从UI上说,搜索引擎的内页一般只有列表,这样搜索框也能和列表左对齐,布局清晰。



2)其他位置,根据情况判断。


比如Figma界面,文章最后有图。此处不赘述。



二、宽度


搜索框的宽度(包括input box + search button),同样取决于搜索功能的重要性。其中,大概率取决于上文所述的搜索框的位置。

其次,也需要考虑输入的关键字的字符数。

另外,根据整体布局决定。


一般情况下,220px<宽度<650px。 请注意, 这是建议的相对值,不是绝对值。只表示搜索框在大部分Web中的情况,具体需根据自己的页面情况调整。实际应用中,也有搜索框最长到1000px的情况。也有比220px更短的。

 

根据搜索框在页面中的不同位置,搜索框宽度分别如下:


1.    如果搜索框位置在页面居中,那搜索功能也极其重要,那当然宽一点。

比如上文提到的google,百度。搜索框宽度通常固定在650px以内,保证在所有分辨率中都能显示全。也保证了可显示的关键字字符数大于60个(即60个字母,30个中文字),大大的足够了。


2.    如果搜索框位置在顶部居右,那搜索就是辅助功能,那当然短一点。

具体宽度,需要考虑顶部UI布局情况。但一般不小于220px(大概数值,自己平衡). 不然就不太方便输入关键字了,或者关键字就显示不了几个了。


3.    那如果搜索框位置在在顶部居中呢?则可长可短,根据业务情况和页面布局判断。

如果为了用户体验好的话,搜索框宽度也需要考虑「响应式设计Responsive Design」。

 


既然都说到 「响应式设计」了,那么就提一下吧。


概念:

响应式设计(Responsive Design)是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面,随着屏幕尺寸的改变,自适应地改变页面布局。

通俗来说,这个网页就可以自动适应手机,平板,和电脑的各个分辨率。用户在各个设备上浏览这个web页时,页面布局和交互都是自动调节的,相当舒适。

 

以页面中的单个功能区为例:

*  比如,内容区块的在一定程度上能够自动调整,以确保填满整个页面。

*  比如,网格排布,能够减少/增加排布的列数。如图片布局在“1行1列” 到“1行N列” 之间,自动调整列数。

*  比如,能够适应比例变化的图片。图片自动调整大小。

*  比如,筛选功能在网页里是在页面左侧一列,全部展开显示的,在手机里就可以隐藏显示,通过按钮点击,有滑出菜单之类的。

 

Tips: 做响应式设计,需要公司舍得投入资源,因为涉及到很多额外的工作量。最起码有以下:

*  Designer | 设计——做3套设计。

*  Frontend Engineer | 前端——写响应式设计的代码,可写1套,可写3套(方便维护)。

*  QA Engineer | 测试——测不同的分辨率,最起码测3套。这还没算fix bug后的retest.

 

为啥3套?因为针对分辨率需要做2个节点。我司一般是792px<X<1440px

 

好了,响应式设计就大概讲一下吧。不然又能写好几页。收~


 


以Youtube为例,大家可以感受下搜索框的响应式设计。


搜索框的宽度是会自动调节的。最小的时候就一个放大镜图标(此时为适应手机分辨率),但最宽也就是固定到640px,不然太宽了,输入关键词时,搜索按钮离得太远,点击也会很不方便。




三、 按钮样式


搜索框的按钮样式,同样取决于搜索功能的重要性。也需要平衡整体页面布局。


按钮样式大致情况,如下图所示:

*  色块带图标的

*  只有一个图标的

*  没有按钮的

*  色块带图标+文字的。

*  其他(比如就一个放大镜图标等。图片中没做展示)



具体怎么应用,详见后文:


四、 正常显示 or 简化显示?

九、 一个页面里有2个搜索框怎么处理?




四、正常显示 or 简化显示?


有些Web中的搜索框,因为各种原因,可能就会做简化。而不是整个显示,这个需要根据情况决定,就是——随机应变~


比如,Apple官网,只显示一个放大镜图标。

此处跟上文提到的小米官网的情况类似。商品品类就这些,导航条突出品类,搜索功能弱化。


但苹果在此处更弱化了搜索,只放一个放大镜图标。(从UI上看,目测是由于导航条中品类太多,放不下搜索框了。) 等用户点击了放大镜图标后,才使用CSS / JS特效,滑动显示完整的搜索框,且居中显示。



再比如,Airbnb 爱彼迎,全球民宿短租公寓预订平台。

网站中,搜索功能很重要,是用户预定,增加销售的入口。因此需要突出搜索框。


*  首页,默认显示完整的搜索框。


*  当页面滚动时,搜索框置顶显示,方便用户查询和预定,增加潜在销售可能。但是这个搜索框的内容太多,硬要在置顶层中全部显示的话,这个始终置顶的层的高度就会很高,会影响用户浏览页面内容。

那么就把搜索框略微简化,相应的高度也就小了。(不建议只放一个放大镜按钮,太弱化搜索功能了。会流失潜在客户,流失潜在销售可能)


*  搜索框在置顶层中居中显示,点击简化版搜索框后,才动效显示完整的搜索框。




五、默认要显示提示文字啊!


在输入框中可以提示搜索示例,告知网站支持哪些内容的搜索,以及如何使用功能。防止用户一脸懵,优化用户体验。


通常适用于数据库,资讯类这些内容类型较多的网站。


比如,天眼查。(垂直顶部居中的搜索框)



比如,网易云音乐。 (右上角搜索框)


六、推荐词


基于业务需要,搜索框内经常会有推荐词,方便用户不用输入关键词就可以直达结果。同时,也是一种对商品的促销,对资讯的推广。根据不同需要,可以有不同的显示方式。


Tips: 推荐词,热搜词,促销,广告都可以这么处理。

 

1. 框内


1)单个推荐词交替显示

 

比如,小米官网



截图为动态图哦,大概5秒换一个推荐词。个人觉得间隔时间有点长了。



2)多个推荐词同时显示


比如,LexisNexis 全球顶级法律数据库 中国站

没有和小米一样,做1个推荐词的动态交替显示,是因为用户场景不同。


考虑到LexisNexis的用户都是律师群体,工作中时间宝贵。使用网站不是闲逛,而是为了快速查询数据,没有时间等待。因此一次性显示2-3个推荐词,方便用户直接看到,直接点击。


提示:推荐词可能会大于3个的,比如有8个。那就在用户每次回到首页后,显示一批新的推荐词。


或者,直接显示在框外,如下文所述。


2. 框外


比如,淘宝



七、有很多分类怎么办?


如果要针对很多内容类型分别搜索怎么办呢?搜索框怎么处理呢?有很多方法。


按复杂程度,依次进阶如下:


1. 下拉框型

一般用下拉框了,那通常分类对于搜索不是太重要,不用突出显示。


2.Tab型


如果用tab来展示分类了,那目的通常是:


*  推广产品或内容

*  引导用户,优化用户体验

 

1)横版显示。比如 某房产网站



2)竖版显示。比如 知网

搜索框的左侧的3个Tab为内容类型分类。

搜索框中展开的下拉框中是字段,此处一并展示。



3)竖版+横板显示。比如 某房产网站

如上图,是竖版分类+横版的两个搜索按钮。



如上图,是竖版的分类+横版的分类。横版的分类还做了2级分类。分类太多,相信设计师们在处理时也挺头大。




八、 一个页面里有2个搜索框怎么处理?


回答:哪个重要,就突出显示哪个呗!

 

以Amazon为例,

该页为商品评论页面。


*  顶部搜索框为全站搜索,非常重要。因此宽度较长,按钮为亚马逊的主色调黄色,醒目。

*  页面内的搜索框,为针对评论内容的搜索,则相对弱化。





第二章 搜索框-光标触发的状态


搜索框的默认状态讲完了。那么当鼠标点击搜索框,此时还没有输入任何内容,那么光标触发的状态是怎样的呢?通常,根据业务情况,大多数搜索框都会自动弹出下拉框。


我们此处只讨论下拉框中的显示情况。


一、下拉框中,历史记录+热搜词是大部分网站的标配。


比如,B站。



二、 下拉框中,在历史记录+热搜词的基础上,再添加些网站自己想推广的内容。


比如,Zcool本酷。



三、下拉框中,根据网站自身业务情况,显示个性化内容。


1. 比如 Zillow, 美国知名房产估价网

网站业务就是估房价。下拉框中,第一行就是“当前位置”,点击后跳转到结果页,显示定位地址的相关结果。优化用户体验。


2.    比如,携程。

携程的业务结构相对复杂,搜索也就相对复杂。搜索项同时也涉及到很多字段/参数,其实也类似表单了。后面有机会可以讲下表单的交互,此处不延伸讨论了。大家有兴趣可以去逛逛携程。




 

第三章 搜索框-搜索中的状态


在搜索框中,一旦开始输入字符,那新一轮的交互又开始了。


一、 默认交互


目前通用的规则——搜索联想功能,Google已经定义好了。我就不重复写了,如下摘自UXPlanet:


Google自2008年以来掌握并实施了“搜索联想”。


 “搜索联想”(自动建议)可以帮助用户通过已输入的文本来预测可以找到的查询结果,为用户节省了时间并创造了更加便捷的体验。

 

交互细节如下:


*  确保搜索联想是有效的,设计不完善的搜索联想会混淆和分散用户的注意力,所以使用拼写自动更正、词根识别、语义识别和预测,可以改进搜索体验。 

(Lu倾倾 注:中文搜索还要识别拼音)


*  尽可能快速的提供搜索联想,例如输入到第三个字的时候,就给用户提供相匹配的联想词汇,以此减少用户数据录入的工作。

(Lu倾倾 注:现在其实输入第1个字就可以提供联想了。)


*  只提供少于10个项目的联想词句(不建议使用滚动条),否则信息将会变得难以承受。


*  允许用户通过键盘的上下键控制选择列表。

(Lu倾倾 注:

百度在使用“键盘”(鼠标不行)上下选择列表时,如果高亮在某个联想词上停顿2秒以上,则等同于“回车键”,整个页面的搜索结果刷新。 Google不支持此功能。

这是用户体验的差异)


*  UI上,已输入文本和建议文本视觉上保持差异(例如,通常情况下建议的词汇通过加粗表示)



二、 个性化交互


1. 比如,Google

(Google作为搜索引擎的灯塔,搜索交互亮点的地方太多太多了,这里只举个小例子。)

如上图,不只在下拉框中展示搜索联想的关键词。

还把关键词作为一个词条显示给客户,比如电影,比如品牌。还同时显示各自的参数,比如 图片,字段。

可以帮助用户了解信息,精准定位。



2. 比如,维基百科。

由于网站的定位不同。维基百科是一个百科全书,其中都是各类词条相关的知识/信息。因此下拉框中的联想,都是以词条形式显示的。包含了图片,词条名, 参数/字段。



3. Amazon 亚马逊


亚马逊的用户体验也是做到极致了。搜索下拉框除了提供搜索联想的关键词,还按照不同的特殊关键词,提供不同的参数选项,方便用户一步到位,不用再到搜索结果页里做一次筛选了。优化用户体验。

比如,想搜索“chair”, 输入了关键词“chai”(注意,还没打全 chair),下拉框中除了显示chair相关的商品。还直接把chair的价格区间显示出来,方便用户点击后,直接显示相关搜索结果。


相信此处亚马逊的PM们是做过usage分析的,chair列表页中,应该是 “价格”筛选的usage是最高的,并且极有可能用户进入chair列表页的第一个用户行为就是对价格做筛选。PM们就干脆把筛选项放到了搜索下拉框中了。



针对关键词”ipad”, 也是同样的交互处理方式,此处是显示“尺寸”区间。



针对关键词“alarm”,下拉框中按照闹钟的不同“功能”,显示“图片+分类“,方便用户直接点击。




【亚马逊篇 番外】


在收集亚马逊案例的时候,好玩就去搜了搜国货之光“马应龙“,歪果仁们的评论简直是太欢乐了,看着看着我都笑出了鹅叫声。


于是就跑偏了,翻译了2个评论,贴了上来。大家看文章看久了,休息下~






三、搜索下拉框中的多选功能

以上,讨论的都是输入单个关键词搜索的情况。


那么输入多个关键词的交互该怎么处理呢?

N年前,我在《交互设计稿-纯实例》之前我写过,此处不再赘述了。


如有兴趣,请戳,https://www.zcool.com.cn/work/ZMjY4Nzg3MDA=.html




四、回车 or 不回车?

大部分的网站的搜索功能,都是需要在输入关键词后,点击“搜索按钮“ or “回车”,才展示新的搜索结果页的。(此处不讨论百度中,键盘移动到联想上就刷新结果页等特殊情况)


即一定要有个确认的命令,才触发搜索。这里面有很多考虑。比如:


*  数据量大,如果是实时响应+即时加载搜索结果页,对服务器和代码质量的要求都太高。


*  用户体验不太好。因为用户还没输入完,或者还没确定。页面就在不停的刷新,会干扰用户。

 


但,也有个别工具软件中,不用按回车,就实时刷新搜索结果。比如,Figma.


在软件中,都是自己的存档文件,数据量本身就不大。此时边输入关键字,边实时响应,刷新搜索结果页,让用户随时看到自己的文档。这种情况下,不用按回车,用户体验还更好。

 

 

以上,终于写完了。

暂时写到这吧,总结太累,但是值得!

 



最后,附上Amazon贝索斯的原话:




翻译如下:(没有太直译,不然有点拗口)


“以用户为中心”有很多优点,但最大的一个就是:用户是美丽的、棒棒的、不会满意的,即使他们说我们的商业很赞,他们表示很开心很满意。但他们其实想要更好的东西,不过他们自己并不知道。那么你的让用户愉悦的渴望,会驱使你代替他们去发明创造。


——杰夫*贝索斯,2016年给股东的信




额,还是拗口。简单来说,就是:


筒子们,为了让用户高兴,发挥你们做产品/交互的主观能动性吧,自己研究创造去,做个好产品出来。不用指望用户告诉你做什么/怎么做,他们也不知道。



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

文章来源:站酷  作者:LU倾倾

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

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

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

提高操作效率的B端设计

涛涛

我从自身实践的B端项目经验中总结了几个最典型实用的b端的交互设计,来提高用户的操作效率。

目录:

一、简约至上

二、提高用户的操作效率

三、智能化操作设计



       在设计领域已经有很多经过时间和实践检验的定律法则来作为设计的指导原理,它能够帮助设计师更快更有效的将需求转化成合理的界面,并且可以有预见性的去提高产品的用户体验。被推崇的有尼尔森十大原则、用户界面设计的八项黄金法则等。但是实践出真知,一切的方法论都是源自不断实践中提炼和优化的。从原则的输入理解,到实践内化,就是自身不断进步的过程。站在巨人的肩膀上,我们应该总结更多属于自己的设计方法去解决问题优化设计。我从自身实践的B端项目经验中总结了几个最典型实用的b端的交互设计,来提高用户的操作效率。


一、简约至上

      

       1951年威廉.埃德蒙.希克首先提出,认为人们从数组中选择目标的时间取决于可用选项数量。这表明提出的选项数量与随后的选择反应时间之间存在线性关系。从广义上说,界面越复杂,用户就越难找到自己的核心操作点,功能越多,就越难发现真正对用户有价值的东西。

        2011年Giles Colborne在《简约至上》,提出“交互设计四策略”,即:合理删除、分层组织、适时隐藏和巧妙转移这四个令交互设计最大程度简单易用的策略。其本质上就是消除多余的信息干扰,保留了用户主操作流程的心流。

       作为设计师我们利用“删除、组合、隐藏、转移”,不单单是为了简化而简化,我们首要明白的就是要在对用户真正重要的事情上节省他们的脑力。需要把组织成功的标准清晰地构建在产品的简单上。一次交互就是用户与设备之间的一次对话,提高效率就是要节约他们的认知成本,学习成本,操作成本,衡量的指标就是完成某个目标的时间。

      B端管理项目有大量的表格处理,一个表格对应的数据项有很多,遵循简约至上的原则我们不会把所有字段都展示给用户看,只会优选跟业务最核心、用户关心的数据来展示给用户,让他们看到的尽量简约的表格信息。即使是最常用的查询工具,我们也会根据优先级排序,把常用的展示出来,其他的折叠收纳,用户想用到的时候可以展开更多查询条件。我们无时无刻不遵循着这个设计原则。

 


二、提高用户的操作效率


1、快速定位目标信息


       在信息量大的B端系统里,快速找到目标信息是最常用的功能。除了导航上的搜索,我所负责的项目几乎在每个信息页面中都使用了查询,筛选、排序功能,这也是常规表格对信息处理的一种快捷方式。常规的信息定位有搜索、查询、筛选、排序,不同的方式数据的检索模式也不同。根据不同业务场景,合理的使用才能帮助用户缩小信息范围,找到目标信息,提高用户完成一个任务的效率。


搜索:是用户指定任意条件(文本、语音等),平台对此条件进行检索后,展示对应内容。搜索由用户自定义条件,主动表达意图 ,目的性明确。由于搜索行为是用户主动表达意图,往往一个简短的关键词并不能完整表述用户想法,因此,搜索结果的内容通常包含多种类型从精确到模糊的展现规则。


查询:是利用关键字、词组对系统内的相关信息进行多条件组合检索。同时用户也可以输入指定条件的信息作为搜索项,但由于查询功能无法对非结构化的文件内容进行查找,所以输入条件不够精准将无法查询到最终信息。


筛选:是平台为用户提供指定条件,用户可以选择查看符合一类或多类条件下的内容。投顾项目一般都是先大范围查询,再从查询结果列表中,进行表头(快捷、对应、条件更明确细化)的信息筛选。


排序:是根据已设定的内在逻辑,将一组“无序”的记录序列调整为“有序”的记录序列。




2、缩短操作路径


        缩短操作路径简单的说就是减少操作的步骤来提升操作效率,是基于对用户、任务及环境的清晰理解的前提条件下,对用户操作的路径进行优化。我们可以从以下两方面入手:


2.1、通过预测用户下一步的行为

        通过预测用户下一步的行为,对用户进行直接引导,缩短用户的行为路径,减少操作步骤。比如在一系列连贯的操作流中某个链路执行出现问题时,用户下一步的行为是需要及时查看错误内容并处理相关信息,在执行结果中增加一个快速查看的按钮,引导他去查看和处理问题。这比他去菜单中重新查找对账信息效率要高很多。



2.2、通过用户操作路径分析减少操作步骤

      涉及到大量的信息管理时,那对于信息的快速处理就涉及到批量操作。通过用户操作路径分析,用户勾选批量执行的操作频繁,单项处理在较少情况才会用到。针对此分析,我们找到了一些具有共同批量操作特点的管理页面,对其进行操作路径的优化。批量操作可完全合并成一个执行触发点。将这个执行点,单独成一个tab切换页,细化操作为另一个切换页。tab页面的设计,也为错误信息的显示腾出了空间,整个页面清晰可对比。经过操作路径的验证,这个按钮使用率极高,明细操作几乎没有使用到,也缩短了管理页面的操作时间。




3、减少记忆负担


       减少记忆负担,是减少用户在操作时,需要记忆的信息量。一方面我们需要,简化多余的信息,减少用户对页面的认知负荷,另一方面我们可以设计记忆性功能可以帮助用户记忆。


       为什么要去减少用户的记忆负担,一方面,缩短整个操作的时间快速达成操作目标,另一方面,降低记忆数据量,有助于提升用户使用的愉悦感。从心里学来讲, 人们往往更容易记住那些自己喜欢的事物,而对不喜欢的东西记起来比较吃力,在信息大爆炸时代,我们要记忆的很多信息如登录号、证件号、密码、账户号等,这些信息有的不但复杂,而且对用户来说枯燥无味不想记忆,有一种天然的排斥感。那我们通过帮助用户去记忆留存,再在合适的机会调用显示,会提高他们在使用过程中的轻松和愉快感。比如对历史登录账户号的保留,秘钥储存功能,再到短信验证的直接不用密码即可登录,验证码还可以直接复制到剪贴板,这都是为了降低他们的记忆成本。



      随着业务的发展,平台菜单数越来越多,对用户来说非目标菜单的数量增加,用户需要更长时间来记忆所选项目的位置,到最后完全只能选择上方的搜索框进行菜单搜索。Google对用户的测试表明,没有一个人始终会把搜索作为第一选择。相反,他发现只有在网站没有提供有效导航的情况下,用户才会使用搜索。搜索需要输入关键词,即使有模糊匹配,还要进行选择,而且这个过程不一定顺利,可能需要反复操作才能顺利找到才能找到自己心中的目标。我们小组设计师通过竞品分析和用户访谈得到的一个验证性的问题,就是平台存在菜单设计命名不合理的情况,急需优化。优化思路一个是合理菜单命名与菜单结构,但这个不是一蹴而就的事情,需要从产品整个角度去整理和长远排期,持续迭代。为此我们先选择了帮助用户记忆的思路,即做一个菜单收藏的功能。用户可以手动把常用菜单直接收藏在首页,如果在没有收藏或者收藏未满限制数量时,会根据记录的用户访问次数提供最常用的菜单(以用户为导向,自定义功能;以首页为核心提供业务线支持),无需去记忆菜单位置,不断寻找菜单。




4、信息可对照 


      在处理信息的时候,提供信息的对照,减少了跳转,增强关联信息的对比,可以很大程度提升用户处理信息的效率。从系统上讲就是分屏,处理多任务事件(苹果和Windows系统均很好的使用了分屏功能)。从页面角度来讲,其实就是合理化信息模块展示,一个页面不止展示一个信息层级的内容。信息内容有从属关系(避免跳转)、因果关系(显示结果)、并列关系(同级对比)。



      同样具有审批功能的B端项目可能审批流程的设计会完全不同。我负责的另一个项目主要任务是对重大任务的监控,保障日间重点工作按时完成,审批必然严格,且需要单条仔细处理。所以我们设计的是树菜单的形式,让用户可以将待处理信息的条目和内容可以直接对照来处理,提高效率。



三、智能化操作设计


      随着B端行业日益成熟,越来越多的C端设计师转型成B端设计师,B端行业的设计思维也不断的融合和革新,如今B端产品也越来越重视产品的情感化建设、整体的用户体验、简约高效的智能化提升。

      首先让大家了解一个概念,那就是泰斯勒定律,也就是我们常说的复杂性守恒定律。泰斯勒定律认为每一个过程都有其固有的复杂性,这个复杂性存在一个临界点,超过了这个点就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。



      对于我所负责的项目来说,最能体现产品日趋智能化的交互设计就是清算流程的设计。以往的清算流程是分大流程,点击流程步骤跳转至相关操作页,再进行子模块的操作与检验。完成后,切换回住流程去执行下一个模块的操作。操作员的操作连续性差且操作步骤多,完全由操作员手动操作触发,体验繁琐及不流畅。为此我们重新梳理了所有清算流程步骤,精间可合并的操作步骤,然后将所有步骤按照时间节点顺序排列,完成先前步骤才能进行下一个步骤。流程下方就是对应的执行模块,只需一键执行便可完成当前清算步骤。极大的提高了用户清算的操作成本。



      后续我们UE小组也会针对平台进行用户调研,建立了用户画像。对于运维人员痛点分析后,提出清算流程自动化设计,用定时任务直接去执行相关的流程操作,用户不用进行操作,即可完成结算,只需要关注状态和处理错误信息。



       自动化智能设计的最大缺陷就是无法遇到极致的准确率。实际处理过程中,还是会有清算错误信息存在。为了解决这个问题,我们保留了执行按钮(不手动操作时,自动跑完),运维人员也可以手动执行,处理问题。除了将操作日志信息模块,作为组件,分屏来显示错误信息,我们还按照商户维度来计算状态,以便于运维人员发现具体的错误位置。帮助操作员去查看和解决错误信息。智能化的设计解放了很大一部分的重复劳动,让用户更聚焦有意义的工作。

        智能化已然成为了设计趋势,这将会对系统的性能提升和信息处理精准化提出更高的要求。


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

文章来源:站酷  作者:上仙修行

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

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

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


关于后台系统设计规范总结

涛涛

一套完善的产品化设计系统,可以解决内部协作的一致性问题,解决设计系统更新的周期性问题,解决一群设计师与工程师如何规模化的生产各种业务、UI的问题,从而最终解决用户体验一致性的问题。说到自己,公司的产品从接手开始便是以antdesign作为前端框架,所以很多人会说后台用antdesign、Element或者Taro的框架就足够了呀,当然不~在已有的成熟框架下,也并不能完全满足产品日(sang)益(xin)旺(bing)盛(kuang)的需求,所以设设计规范还是很有必要的。

作为B端设计师,视觉表现层面权重逐渐减少,更多的是需要梳理逻辑流程,将线下业务更好的梳理到线上流程,所以熟知设计规范可以更效率的完成工作。



设计规范的目的:


1、解决内部协作的一致性问题

为设计师内部沟通协作起到决定作用,当同一个项目存在多个设计师横向设计的时候,设计规范会避免颜色错误、间距失调、控件混乱等问题。

2、解决设计系统更新的周期性问题

随着产品的不断推进和发展,为了新增的需求和不断优化的用户体验,这时候会需要对某些规范控件进行调整,在有设计规范的情况下,可以迅速对接开发快速全局调整控件,极大的提升了设计和开发的工作效率。


3、解决设计师与工程师如何规模化的生产各种业务

关于和开发对接,图标在如今有了iconfont的项目管理下,项目可以建立自己的图标库。再加上设计建立的可复用的公共控件库,开发可以更加快捷的复用控件,减少返工率,也为后期的修改降低开发成本。


关于建立后台设计规范:


首先要了解项目适用的主要场景,也就是用户爸爸一般是在什么情况下用什么样的设备来进行操作的,然鹅你永远不知道会有什么的场景和什么样奇葩的设备在等待你。在后台的设计群一直有一个经久不衰的话题,那就是后台设计的设计分辨率是向下适配还是向上适配更合适(是1980*1080 还是 1440*900 ),这两者都是可以的,本案由于用户使用笔记本的情况居多,且设备并不是很新所以采用1440*900的分辨率向上适配1980向下适配1200。
在清楚的了解到项目背景之后,开始着手于设计规范的建立,这里关于设计规范的建立是随着设计的不断深入从而不断完善的,不必刻意深入,但是要随时更新规范文档。



关于页面构成


开发与设计所理解的页面是不一样的,所以会造成开发出来的页面有时候会因为各种原因与高保真相差较大,在设计看来(比如sketch),一个页面是由多个组结合而来,每个组里包含一个或多个字段、图片和图标等,在调整大小、间距、颜色之后慢慢成为高保真。而在开发的角度来看,整个页面就是由多个box构成,盒子与盒子之间存在空白间隔,且盒子存在一定的属性,例如盒子默认对齐于左上,盒子之间相互嵌套或覆盖需要基于所属盒子来定位。


颜色

根据品牌背景和产品定位来确定你的品牌色,用于字体、icon、按钮、插画等业务流程。功能色则是为特殊场景,例如失败、成功、提醒等情况。


字体

通过购买商用字体或使用免费字体来使用,如果选用免费字体同时也要注意区分系统,通常情况下mac系统使用默认字体苹方字体,windows系统使用微软雅黑。如今免费等字库已经越来越多了,所以这对设计师来说是一个好消息,今年阿里也在UCAN上公布了普惠体,年尾oppo也推出了自己的免费字体,文章末尾附上群友整理的免费字体导图。


边角

倒角的使用可以起到样式的区分,从而让用户感知到功能区域的分别。


图标

快速帮助用户理解产品并顺利完成操作,好的图标具有高度浓缩并快捷传达、便于记忆的特性,能够更好的传达品牌特性。


阴影

阴影的添加可以更好的提高界面品质,让用户易于区分功能区域


按钮

按钮是传达它将要发起动作的载体。 用户可以点击一个按钮来开始一个过程或工作流程,或触发一个动作。

用法:

1、要传达重要的行动。如:提交表单;

2、要导航到另一个屏幕,触发一个模式或启动一个动作。如:在进程中指定新的动作或模式;

3、按钮上的文本应保持简洁,带着明确、可操作的动词,例如:注册、下一步、下载 ;

4、优先考虑最重要的行动。行动号召太多会引起混乱,并使用户不知道下一步该做什么。

选择输入框

如无特殊需求,则默认采用框架内输入框,特殊情况可同研发一起讨论修改。这边因为一些特殊原因,在修改了代码的情况下实现了标题、选择、输入同时在框架内,这样为寸土寸金的后台界面留出了更多的空间。


表格

表格在后台系统中无处不在,对数据管理和分析起到了重要的作用,方便用户阅读,分析和比较数据。表格一般由表头、表尾、数据单元格组成。


模态/非模态弹窗

用户交互的两种方式,模态弹窗强制交互完成当前操作流程,非模态则是弱提示。

缺省状态

缺省页是指操作异常状态下给予用户反馈的提示页面,它的作用不仅是提醒用户,安抚情绪;更重要的是用“空白”触发用户的操作行为,营造良好用户体验。


结语


以上是我对于设计规范的部分总结,还有很多没有涉及到,包括非常重要的可视化部分,可以多了解一下ECharts(https://www.echartsjs.com/zh/index.html),然后希望可以和大家互相学习。设计规范的建立是长征的第一步,贯彻执行才是根本,在B端庞大的设计系统中,我们需要维护好产品的组件库,不断的完善用户体验和清晰的梳理线上业务,保证产品的功能需求才是重中之重。


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

文章来源:站酷  作者:请叫我红领今

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

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

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


整理数据报表系统的7个步骤

涛涛

清晰且有效的数据报表可以反映出数据变化,进而帮助团队人员确定后续的产品优化迭代方向,找出可能存在的问题。那么,产品经理应当怎么整理出清晰且直观的数据报表?本篇文章里,作者总结了产品经理整理数据报表的可操作步骤,一起来看一下。

之前聊数据埋点的时候曾经提了一下,说是后面聊一下数据报表的事情,今儿个正好有空,捋一捋,跟大家做个分享。

上次分享的是《产品经理整理埋点需求的6个步骤》,有兴趣的朋友可以进去看看。

大家都很关心数据的事情,因为数据能比较直观地反应哪些地方发生了新的变化,能够提醒相关人员去关注和调整,同时一个新的优化上线之后也能够根据数据去判断优化方向是不是正确的问题。数据是最便捷的方式。

但是你想看数据就需要先把数据报表理出来,一个业务或者一个APP会产生大量的数据,你需要根据关联性和重要性去整理出具体的数据表,然后再去观察,直接看明细或者日志那你得疯。

怎么整理数据报表呢?

它需要根据核心业务流程和业务指标来梳理,然后兼顾到职级分层、部门分类、重要程度、使用频次来分别处理。

我们以电商业务为例来简单说说,选电商是因为大家对电商业务更熟悉。

我整理了一下,大致上可以按照以下步骤去整理数据报表系统。

第一步,确认要做哪些表。

你先确定有哪些部门需要看报表,常规来说包含市场、商务、运营、产品、客服、售后等部门。

然后你去看这些部门都会需要哪些报表,譬如市场部门需要渠道流量转化表等,运营部门需要营销转化表、业务流程表、销量排名表等,产品部门需要业务流程表、产品日常数据表等(观察用户留存与活跃的),客服需要用户反馈问题进度表等、售后需要售后问题进度表等。

以上只是我不专业的一个举例,实际上表是非常多的。

这里面有个地方需要注意一下,有些表看上去字段是差不多的,譬如渠道流量转化表和业务流程表,很多字段都是重复的,那么要不要并表就是一个需要考虑的问题。有的公司管理比较严格,那么最好不并表,这样可以通过后台权限来控制展示,如果相对宽松那么可以向相关部门做一下确认然后决定要不要并表。

注意:数据后台和管理后台是分开的,不能混淆。管理后台用来管理用户、商品、商户和看明细数据(用户信息表、购买订单表)等等,数据后台就是用来看统计数据的。

第二步,整理不同部门报表需要展现的字段。

以业务流程表为例。

先把业务主流程的关键节点梳理出来,到成交算是一个流程。电商的话流程大概是用户注册/登录→查看商品详情→加入购物车→立即购买/结算→立即付款→完成付款。

那么业务流程表的字段也就清楚了:

注意:报表字段是有了,但是也需要说清楚这些字段的具体含义,譬如注册/登录用户数,指的是在统计时段内,注册+登录用户的人数之和,需要去重。

不要小看这个说明,这个说明决定了大家的理解能不能一致,边界请不清晰,上面那个例子,如果没有后面那个“需要去重”那么技术在处理的时候是不会去重的,这样的话如果一个用户在指定时段内登录了多次就会统计多次。

一定要写这个说明,不写的话技术就自己发挥了,每个人对业务的理解是不一样的,所以一定要写。

第三步,去扩展报表的统计维度。

数据报表是有了,但是统计维度也需要定义,譬如需要按照日期、按渠道、按类目(商品)、按商户、按地区等等维度去看数据,那么就需要把这些和报表相关的维度加上去,这样就能实现按维度看数据的目的。

这个比较简单,有什么维度加什么维度就行,但是在处理的时候需要注意,多个条件组合能不能筛选出数据的问题,这个比较细节。

第四步,整理核心转化公式数据表。

核心转化公式数据表是给公司高管和核心业务骨干看的,高管是不可能看什么部门表的,看不过来也没必要,高管们看的表只需要体现核心数据和指标就可以。

高管们关心的也就是部门负责人关心的,部门负责人关心就应该是一线员工关心的,这就是一个拉齐公司内部认知的一个表,所以核心转化公式数据表特别重要,重要到需要单列一个步骤说明。

整理核心转化公式数据表之前就需要去梳理业务的核心转化公式,电商业务的核心转化公式如下:GMV=注册登录用户数*购买转化率*客单价*人均购买数量*(1-退货率)。

这就是一个用户从曝光到复购的一个简化的转化公式,这个公式的意义在于聚焦提高产值的关键步骤,目标不会偏。

注意:这个公式很重要,不能错,如果自己没把握的话可以问一下公司领导,知道弄清楚为止。

其实做KPI的时候也一定会需要这个核心转化公式,这样大家就能知道在哪些环节可以提高绩效,分别是提高多少,由哪些部门具体负责。

根据这个核心公式就可以整理相关的字段:

这样公司领导每天看这个数据就知道业务有没有在向预定目标发展,以及距离目标还有多远。

当然有了字段以后也需要加维度,这个就参考前面的步骤就可以。这里的统计维度其实是比较少用到的,但是功能还是必备。

 第五步,整理日常大盘数据表。

大盘表是给所有员工看的,可以作为数据后台的首页。

大盘表通常是昨日数据的汇总统计,譬如GMV、销售订单数、销售商品数、退货商品数、退货总金额、新增商户数、新增用户数、新增商品数,大概看一下数据的变化,给大家一个总体的印象。

第六步,整理实时统计表。

有一些业务对于数据的实时性要求比较高,所以会涉及到需要做实时统计表,实时统计表一般每小时更新一次数据,如果流程出现问题就可以及时进行排查和修复,但是对于大部分业务来说其实不需要,如果不是发布了新的代码,理论上是不会出现这个问题。

当然像电商APP,如果遇到双11这种,一般来说还是需要看一下实时数据的,因为全公司都很关心当天的战果,属于重要时刻。所以电商APP需要做实时表,字段的话一般也就是大盘数据表上的字段就行,额外字段的话可以根据领导的要求做。

第七步,最后确认报表字段和整理成需求文档。

把整理好的表格和各部门对一下,根据各部门的要求调整完成后制作成需求文档。

这个步骤就不多说了,按照需求的整理流程处理就行。

以上就是整理报表系统的几个步骤,当然因为细节太多了,其实没有办法在一篇文章里面讲的非常清楚,但是至少80%的东西还是在了,所以还是有参考性的。希望对大家有所帮助。

实际上做报表系统是一个持续优化和新增的过程,如果是从0开始做的话就需要单独立项然后分期做,一下子肯定是不现实的,因为工作量太大了,项目的进度不好控制,还有就是有些表并不需要马上做的,也可以缓一缓,这样优先级高的数据报表就会更快的上线。

如果业务不大的话甚至可以用excel先统计起来。总之展现形式和处理方式还是很多样化的。

产品经理在数据方面我认为其实可以多花点功夫,形成一套比较具有实操性的方法论比较好,一个数据产品和一个APP产品在竞争力上还是有差异,实际上越细分专业度越高,竞争力越强。当然首先至少要做到及格。


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

文章来源:人人都是产品经理  作者:代号道长

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

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

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

日历

链接

个人资料

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

存档