首页

UI设计师交互设计-史上最全面的-B端设计规范

周周










一、定义


1.1 设计规范的概念


设计规范是指对设计的具体技术要求,是设计工作的指导规则。一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等。


Design System 最开始是 Guide 演化而来,Guide 是一套可指导、可延续、可扩展、可统一的、可区分的视觉指引手册,指导相关设计结构完成统一性与对外区分性。具象层,它是一种设计方法;抽象层,它是一种思考模型。


设计规范一般会具体到公司级别、某一类产品线、某个产品等。今天主要讲具体某个产品的设计规范,主要是为该产品制定统一的用户体验、品牌、视觉等方面的规范,当然是在满足以上公司级别和某一类产品线层次的设计规范的基础上。


1.2 设计规范的组成

设计规范由设计原则、设计语言和组件库构成,在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。



设计原则是指:整个设计体系所要遵循的全局原则,是为我们设计提供方向指导的。


设计语言:是指设计所包含的语言体系。具体包含了:色彩、字体、图标、布局等。


组件库:相当于积木玩具的一个个积木,每个组件就是一块积木,通过组件的拼搭可以迅速搭建出一个个页面。下面我会具体说明组件库。组件库具体包括:按钮、导航、表单、数据等等。




1.3 B端及C端


B端产品和C端产品制定设计规范差别还是蛮大的,最主要的差异大致是:


C端产品的设计规范:目标几乎都是为了更好的打磨用户体验的一致性和标准化;


B端产品设计规范:由于用户体验更复杂,学习成本更高,所以它的目标侧重点是:除了布局的不同外, 相同业务场景下,相同产品功能需要有一致的,标准化的体验,降低学习成本,提高工作效率,即统一体验。




二 、为什么要制定设计规范?





2.1 对于产品经理来说


创建原型时可直接调用组件库,能搭建出高保真的原型。

与设计师和前端沟通更加顺畅,小的修改可以直接和开发沟通不需要通过设计师出图,极大增加了前期的节奏,提升沟通效率。


2.2 对于设计师来说


对于只有一个设计师的项目:可以让那个设计更加规范,有些简单功能迭代可以直接个研发沟通,不用再单独出图,减少重复性的工作。


对于同一个项目由多个设计师共同协作时:可保证设计各方面包含体验、设计、交互等等的统一性。减少设计成本,提升设计及沟通效率。


对于接手新项目,能尽快的了解产品,快速入手。


对于开发完成验收走查,有了前期的规范及比较详细的设计尺寸,开发的设计还原度会更高,减少重复及没必要的设计走查。


2.3 对于开发来说


开发可以按照设计规范建立好公共组件库,极大的提升开发效率。


可复用的东西确定了下来不会频繁改动,设计走查的问题也会逐渐减少。


2.4 对于测试来说


对于模棱两可的交互可以有地方看交互样式了,不需要再询问设计师。有更多的时间专注于测试功能上的问题了。


通用的组件前期测试后了以后,后续就不需要重复测试,极大的提升工作效率,避免重复工作。


2.5 对于协作沟通来说


前期制定及评审设计规范以后,有一套笔记明确的规范,可减少各个职位方面的沟通成本,提高沟通效率。



三 .为什么要制定自己的设计规范?


目前市面上有很多多的第三方设计规范,比如:antdesign,element,那有人就会问有必要自己重复造轮子做一遍吗?


我觉得是非常有必要的,为什么呢?

1、每个产品有各自独有的品牌调性,如果都用第三方 的设计规范,那同质化会很严重,很难做到差异化,也就很难在竞争中脱颖而出。


2、 世上本没有万能的设计规范,那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范,在此基础上进行修改,效率很低,适配的复杂度和重新开发相差无几。


3、第三方的的成熟的组件库,我认为应该把它当成模式,在他们的基础上去做自己的设计规范。




四 、什么阶段适合设计规范?


个人工作中总结出两个比较建议的规范建立时间点,探索期和成长期。





4.1 导入期


产品在导入阶段,产品还在处于极大变动的时候,这个时候做设计规范,其中就蕴含可极大的风险。但是也不是不做规范,这阶段规范主要涉及到色彩,字体,间距,布局,栅格等通用设计原则以及常用业务组件的定制。此阶段搭建的规范具备高效性以及灵活性的特点。


不适合搭建特殊的业务组件,比如:当领导想要突然调转方向也不会很慌,改动较小就可以完成整体的规范转向)此时搭建规范组件库需要考虑到预留后续更改的空间。 





4.2 成长期


当产品进入成长期处于较为稳定的版本,整个团队对业务的理解也都很熟悉了,这个适合创建符合业务场景的组件库,有了前期的积累这个组件库会更加符合产品及业务逻辑。








在制定规范前,设计师需要明确产品中主要有哪几种分类,将最基础的分类定义好方便后续针对分类内容进行整理。B端产品与C端产品既有共同性也有着很大的差异化,可以借鉴但是切忌生搬硬套C端的设计规范。














一、 pc端


1.1 Antdisign


Ant Design是由蚂蚁集团体验技术部经过大量的项目实践与总结,逐步打磨出来的,基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验,是非常完整的一套设计规范。




1.2 TDesign


TDesign是腾讯企业级设计体系,也是去年才发布的。虽然才发布,但是作为一款诞生于腾讯内部开源,却是经过了超500项内部业务检验的企业级设计体系,TDesign 汇集了腾讯众多优秀组件库能力和设计研发经验。


内含丰富可复用的设计组件资源,如色彩体系、文字系统、动效设计等,覆盖支持 Axure、Sketch、Figma、Adobe XD 等各大产品设计软件。可以按照需求查看对应组件的使用教程和代码演示,只需简单的引入操作,即可搭建属于自己的产品界面。





1.3 Element


Element是由饿了么公司前端团队开源一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品,在众多的的组件库中,AT-UI 属于视觉风格比较清新的一款。

1.4 Zent


是有赞 PC 端 Web UI 规范的 React 实现版本,提供了一整套基础的 UI 组件以及常用的业务组件。通过 Zent,可以快速搭建出风格统一的页面,提升开发效率。目前有 50+ 组件,这些组件都已经在有赞的各类 PC 业务中广泛使用。




2、移动端端


2.1 Material Design


谷歌在 2014 年的 Google I/O 上推出了 Material Design,它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言,并且在不同设备上提供一致的体验底层系统,并同时支持触摸、语音、鼠标、键盘等输入方式。


2.2 iOS Human Interface Guidelines


iOS 的人机规范指南,保持了苹果一贯的风格。虽然没有 Material Design 规范那么细致全面,但是核心的设计原则在每个组件的设计说明中都有渗透。作为 iOS 系统的设计基础,建议每个设计师都需要仔细研究。


2.3 Vant


Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。

2.4 NutUI-JDL


NutUI-JDL 是一套基于京东物流视觉规范的移动端组件库,包含了36+高质量组件和详尽的文档和实例。







设计师在开始准备设计规范时,首先需要确定设计风格和设计尺寸,页面布局是做居中固定式,还是全屏响应式。如果是全屏响应式的网页设计,那要选择怎么样的屏幕来做效果?等等这些问题


接下来分别来展开说明。




1、设计风格


三种B端产品的设计风格


纯白风(网页大背景是纯白色;文字背景是线框,轻淡色(灰);文字一般用深色)





轻淡风 (网页大背景是浅灰色;文字背景是白色;文字一般用深色);



深色风(网页大背景是深色;文字背景是带有透明度的纯色;文字一般用白色)



我们在开始设计之前,要确定好使用哪种风格,一旦确定下来,后面的所有页面和元件的设计,都得基于这个风格来设计。


据数据显示,目前市面上比较流行的是:轻淡色背景风+全屏响应式的设计风格,也是相对比较保守安全的设计。


接下来需要考虑尺寸是做居中固定式,还是全屏响应式。全屏响应式的网页设计,选择怎么样的屏幕来做效果。




2、设计尺寸 


设计规范中,分辨率尺寸的问题,一直以来是我们设计师讨论最多的。




决定产品设计尺寸分辨率大小的因素大致包含以下两点:


2.1 市场占有率(主流)


目前市面上主流的排在前3的屏幕分辨率为1920*1080,1440*900,1366*768。





2.2 兼容能力


做B端产品时,现在市场上的设计师一般都会采用的是1440*900。为什么不用市场占有率最高的1920*1080和1366*768呢?


1、由于B端产品的特殊性,它的尺寸分辨率大小,是取决于用户使用的电脑设备条件。由于员工电脑显示屏大部分都是统一采购的,尺寸也就大致统一,所以开发适配的分辨率可以按这个统一尺寸进行设计。


2、因为它的兼容能力会比较强,向上适配或者向下适配误差会比较小,不管是市场占比最高的主流1920*1080尺寸,还是一般般的1366*768尺寸,都完全可兼容。 


注意:别忘了设计出极端情况(宽度为1280,以及宽度为1920)的效果图,力求前端开发实现的效果和高保真设计图误差最小。




假如你产品的用户用的设备主要是市面上占有率最高的24寸办公室显示器,也就是1920*1080分辨率的话,那毫无疑问,在选择设计尺寸上,直接选择1920*1080分辨率。


比如我现在做的产品,除了移动办公,web基本都是固定办公,管理人员使用的办公设备(电脑)屏幕一般都是台式电脑,那这个时候,我们在设计时就会同时考虑它的占有率和兼容能力。所以我们采用的是:1920*1080分辨率。


所以设计师们在选择尺寸上,一定要灵活使用,不能一味的认死理只选择1920 或1440某一尺寸,而是要对您的产品用户的具体情况做好分析,从而得出最适合你们产品的设计稿的尺寸。




注意点:


如果希望设计稿完全还原程度高的话,还特别要考虑浏览器的适配,比如说它的顶部固定区域(当前网址,书签栏等的高度)必须排除在外,剩余的部分才是我们设计稿的真实高度。


拿我们常用的谷歌浏览器举例,如下面公式所示:设计实际高度=电脑分辨率 -(网址栏+书签栏+页签高度)




3、页面布局


3.1 常见的页面框架有以下三种:


第一种:上下布局



上下布局包括:"顶部菜单栏、主体内容"两大区域。其中顶部菜单栏是固定不变的,主体内容根据不同分辨率进行自适应动态缩放。另外还需要把主体内容左右两边空白区域最小值确定好;


优势:内容区域可操作空间大。


劣势:导航区域限制数量,如果导航选项内容比较多,用顶部横向导航的话,就会显得很拥挤。另外,横向导航一般有“展开”,“折叠”,和“收起”三种状态,加上内容很多的情况下,横向导航就特别难做到尺寸适配。


第二种:左右布局







左右布局包括:"左侧菜单栏、顶部栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的,右侧主体内容根据分辨率进行自适应动态缩放。


左右布局时,左侧菜单是支持收缩或展开,收缩状态下也需要有固定的宽度。


优势:导航部分可扩展性强,适合导航选项内容都是比较多的情况。且只有“展开“和”收起”两种状态,在不同屏幕情况下,宽度的自适应也能更加得心应手。


劣势:相对内容区域空间变少。


第三种:其他的布局





现在很多后台管理系统采用,"顶部一级导航栏、左侧二级菜单栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的,右侧主体内容根据分辨率进行自适应动态缩放。


优势:结构更清晰。可承载更多层级内容。更适用于复杂且层级多的产品。


所以,可以得出结论:设计师在选页面布局的时候,要全局考虑产品框架及内容。


1、如果导航选项内容比较多的话,或者不确定有多少内容的情况,从美观和操作难易程度、可用性来评估的话,选择第二种左侧导航是最适合B端产品使用的。 


2、如果内容选项确定很少,就没那么多限制,“左侧纵向”"顶部横向"都好使




特别要注意


1、同一个产品需要考虑它的统一性,不能这里使用顶部横向,那里用左侧纵向。


2、如果是个更新迭代的版本,就还得考虑老用户之前的使用习惯,避免引起不必要的麻烦。 


在确定好导航的布局后,就基本上能确定整个产品的页面布局了。 


3.2 常见布局尺寸:


B端产品,一般会在整个页面的左上角放企业的LOGO,顶部栏高度48+8n,侧边栏宽度200+8n。


我常用的是顶部栏高度:56px或80px,侧边栏宽度:200px,侧边栏收缩状态宽度:56px或80px,右侧的侧浮窗宽度:400px。(具体高度宽度尺寸,设计师可根据具体情况来定,不需要按部就班这么死板)。


同时需要确定好主体内容的上下左右边距,以及主体内容区域中各模块的安全距离,内容超出区域的,通过滚动查阅更多。




4、文字


4.1 B端产品常用的字体


Windows系统:中文Microsoft YaHei(微软雅黑),英文Arial;


Mac字体:中文PingFang SC(平方字体),英文 Helvetica;





4.2 常用的字体大小


常见的字体大小为:12px、14px、16px、18px、20px、24px、26px、28px、30px(一般都是采用偶数字号,文字大小12+4n)。


注意:


在设计过程中,设计师对字号应该有一个全局观,在同一个界面内,尽量少用大小太接近的字号。比如一个页面中,如果同时用了12px、13px、14px、15px、16px、18px排版,文字的层级对比会比较弱,没有主次之分,用户阅读困难,视觉效果也显得凌乱。


所以,刚接触B端产品的小白设计师,如果不知道怎么运用不同字号字体的情况下,可以直接以这组字号12px、14px、16px、20px、34px的字号为参考使用,这样的分布会层次明晰,能够有个比较不错的布局结构。





“行高”根据文字大小和使用场景来定,公式如下, 


行高=文字大小+8px(或6px,视情况而定,我常用8) 


例如:12号字体的行高=12+8=20px


同一个界面中,一定不要出现多个不同字体。尽量选择用户设备里自带的字体来进行设计,比如说WIN系统默认用系统自带的“微软雅黑”,不能使用特殊字体。


如果必须要用特殊字体,建议用图片替代。如果用户的设备里没有你使用的这些字体的话,会默认显示设备的系统自带字体,最终效果就会和你的设计稿相差很多。


从视觉方面来讲,为了让整体界面更简洁具有美感,体验感更好,在使用字体方面,一般字体种类不超过2种,越少越好。因为页面的层次感主要是靠字号大小及颜色拉开层次,如果字号在变,字体种类也各种变化,整体就会感觉很凌乱,没有统一性。




5、颜色


颜色规范包含“品牌色”、“辅助色”、“中性色、图表色”四部分。


5.1 品牌色系


品牌色系:即产品主色调,主色调的设定直接影响产品气质和直观感受,也是产品的对外的形象。品牌色是根据这个产品的特征和定位、用户群,以及使用场景等综合考虑最后确定的。


品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。


1、品牌色一般建议选择冷色系。这样有效避免与“错误提醒”的红色、黄色相冲突,让人误解。但要是被硬性要求必须选暖色系作为主色调,就得格外注意调节好主色调与错误提醒的区别了。


2、注意选的品牌色(主色调)不要太刺眼。要保证用户长时间使用也不至于颜色太亮太刺眼,而产生的视觉疲劳。


5.2 辅助色系


辅助色系:辅助色一般用于“提示”。类似:成功、失败、警告、无效等内容等。





5.3 中性色系


中性色系:中性色涵盖黑、白、灰三个不同层级,通常在文本、背景、边框、分割线用到它们。同一色相,只要改变它的透明度就能表现出不同的层级。



B端产品的文字中,一般会有:一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。


为了区分层级,提升用户的阅读体验感,通常会根据具体需求,把字体颜色的深浅,大致分成3到5个层级。常见的有#333333、#666666、#999999这个组合,这个组合的层级区分比较分明,适应性比较广,设计师在设计时可以直接作为参考。




5.4 图表色系


图表色:我们常见的后台管理类产品, 像数据可视化、统计图、多个标签的不同配色方案,所以一般还会设定图表的颜色。 


6、按钮


按钮是任何用户界面不可或缺的交互元素,B端产品中用到按钮的场景特别多,类似:登录注册,保存,表单,弹窗,导航,提交,确认等等。


6.1 按钮的形式


常见的按钮形式包含这六大类:图标文字组合的按钮 ,主按钮,次按钮(线性按钮),按钮菜单,文字按钮,图标按钮。


6.2 按钮的交互状态


常见的按钮交互状态包含六种:



正常状态、聚焦状态(使用Tab键或方向键来对网页进行访问输入的聚焦状态,在设计时很多设计师都会把这一状态忘记,导致用户无法用方向键控制光标位置,会降低用户的使用体验感)


悬停状态(鼠标正在按钮上,但不点击,需要注意的是平板电脑和移动端设备上不会展示悬停状态,因为手指跟光标不一样,无法在屏幕上进行悬停 )


激活状态(点击按下状态)


加载状态(等待期间不可操作,在B端产品中Loading状态特别重要,能缓解用户的焦虑情绪)


禁用状态(不可操作状态,置灰显示和透明度(40%)代表不可操作状态)




6.3 按钮的圆角


按钮圆角:在开始设计产品之前,设计师都需要对按钮圆角有具体的规划。按钮四角都是直角会比较有距离感和强烈的引导性,容易分散用户注意力,所以我们一般会采用视觉上给人比较柔和亲近感觉的圆角按钮。


但按钮的圆角并不是越大越好,因为在相同尺寸下,按钮圆角小的,操作热区会更大,页面的使用效率也会更高,更容易操作。同时还要特别考虑到下拉菜单的设计,所以圆角大小一般采用偶数:2px,4px,6px,8px,16px为宜,不宜过大(这里的圆角弧度的值有一定的倍数关系或基数关系,例如:4/8/16, 4/6/8,4/8/12,都是可行的)。



注意:圆角大小也会跟着按钮尺寸的大小有相应的变化。




按钮的高度


在B端产品中,当确定好网格基数时(通常网格设定为:4px。按钮的高度会分两种情况:


1、一种是宽度为高度的倍数关系。


2、第二种是如果宽度为高度的倍数关系,从视觉上看达不到想要的效果的话,设计师就可以灵活设置。




6.4 按钮的大小


讨论到按钮的尺寸,我们需要大致知道如何设置网格基数。


在设计中,我们需要在常用的绘图软件(如:Ps、Sketch)里找到我们的网格功能,设定好一个数为基数,然后按照这个基数来进行按钮的绘制,按钮就相对比较规范了。


那如何用绘图工具设置网格基数呢?方法如下:在Sketch绘图工具中找到:【视图】-【画布】-【网格设置】- 弹出网格设置对话框进行设置就好了



把网格基数设置为【4】的原因:它是谷歌Material Design绘制小组件的规范,模块之间定义的基数就是【8】。


假设我们定这个基数为4,那采用的尺寸数值就需要是基数4的倍数。比如B端产品中,常用的按钮高度尺寸有:24px、32px、36px 、40px、48px,这些都是可以整除基数4的值。例如:32/4=8,40/4=10,这里的4为基数。


按钮的宽度尺寸,一般是确定好文字到边框左右两边的距离(例如如图Padding值为12px)后,开发会根据文字内容的多少自适应的。


按钮间距,按钮之间的间距也遵循基数为4的倍数,比如:16,24,32,40,48等。这里的基数定为偶数(一般为4或8)




7、表单


从广义的定义来讲,表单是指用于数据录入的一切形式。从狭义上来讲,表单在大家更广泛的认知印象中,表单则是一类包含输入框、下拉选择框等常见控件的组合形式的页面才属于表单。表单的本质核心是提交数据,所以凡是具备采集数据并完成采集后提交数据的交互形式均可称之为表单。


表单在设计上的结构有:1、标题;2、表单标签;3、占位符;4、表单域;5、提示信息;6、操作按钮;







7.1 表单设计目标


表单的设计必须优先考虑为用户减负,提高效率并简化填写流程。另外表单中组件的选择需要依据具体的数据类型和具体的业务场景进行合理正确的选用,为用户提供高效的数据录入表单,降低用户操作成本、认知负担,并提高数据采集效率才是表单设计的根本目的。





7.2 表单的输入域

可交互输入域,是构成表单的核心内容,是表单用来采集数据的入口。输入区是用户交互最多也是最能影响使用体验的区域,不同类型数据选择与之相应的录入方式,对提高表单操作效率和用户体验大有裨益。



表单并不是把一些不同类型的输入框排排版、标清楚必填非必填、哪些表单比较复杂适当的加个说明就完了


其实,表单设计远远不止这些,表单本身也是一个小产品,它也需要有需求的支撑、也需要嵌套使用情境、也需要考虑用户的心理模型;从表单的产生到表单在页面上如何呈现,再到使用表单时与表单之间的交互,每一步都需要投入大量的思考来做好表单。


后面我会专门有一篇16000+的文章聊聊这个B端产品中比较核心的表单,有兴趣的朋友可以关注一下,大概五月份就会发。




8、表格


表格在整个B端产品比较常见的,它的地位也是相当重要的,我们在设计表格时需要注意一下几点:



8.1.表格内的文字内容:


一般以左对齐为准。与左边表格边距尽量保持在10px以上的间距。(特别注意:金额和操作的标题和内容需要右对齐)


8.2 表格的列数


默认展示的列数为3-8列,如果需要展示更多列数,则需要优先固定展示重要列,其余的列的内容会以滚动条滑动而展展示出来。


8.3 表格列表的宽度:


宽度的尺寸大小自适应,但需要根据文字的重要性显示,重要文字内容优先完整显示。


8.4 表头每列标题文字字数:


字符不要多,最多可输入8个。如果文字太多,就需要做文字信息精简化。


8.5 滚动条使用场景:


表格内容超过一屏,就需要显示竖向滚动条,注意:表头需要固定,但表格内容可滚动展示。


8.6 表格无内容:


表格的某些单元格无数据内容时,需要用“—”表示,需要区别于“0”。


8.7 表格标题栏和内容栏高度尺寸:


标题栏高度(标准高度为56px);内容栏(标准高度为56px,偏大的标题栏高度为80px),内容区和标题栏水平居中对齐。


8.8 表格内容对齐方式:


列的对齐方式(垂直方向)除了需要始终保持“右对齐”的:金额,最右侧操作列内容外,其他的内容可自行左对齐或右对齐。行的对齐方式(水平方向)

当表格栏的高度尺寸小于80px 时,一般只有一排内容,内容水平需要居中对齐。当表格栏的高度尺寸大于80px时,如果是有两排内容,所有的内容需要顶对齐;但是如果既有一排内容 又有多拍内容的话 ,内容水平则需要居中对齐。


8.9 自适应规则:


表格中的内容,会根据字段的长短定义所占的百分比,完成表格占比,从而达到希望实现的最佳效果。 


8.10 滚动条:


滚动条分为横竖两种,当表格内容超过一屏时,就需要显示滚动条。竖向滚动条时, 需要固定表头标题栏和页码。只需滚动表格内容部分即可。横向滚动条时, 需要固定第一列 和 正在操作的项列。只滚动表格内容部分即可。




9、反馈


9.1 弱反馈


仅提示用户相关内容,不需要用户做任何交互动作。类似:toast弱提示通知提示等弹窗((一般3-5秒会自动消失:包含普通信息,成功信息,失败信息,警告信息)。



另外还有,鼠标经过的时候即可出现而不用点击的弹窗(这个弹窗通常会设计一个浮动带有阴影效果的框,不需要遮罩)。比如提示说明,显示更多信息,鼠标移过后立即消失,它不会影响下一层(当前页面内容)页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。


9.2 强反馈


第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。





例如弹出的列表,详情,表单等的确认信息弹窗、错误提示弹窗。这些强弹窗一般会对下面一层的页面做一些遮罩处理,例如添加上一层有透明度(例如30%,50%都可以)的黑色/白色,给下一层页面的内容做模糊滤镜等等;


在写弹框规范时,应了解各自项目中需使用弹框的有哪些内容,给出相关大小弹框的比例,哪些为固定尺寸,哪些为适配比例。以及对于通知提示给出停留多少时间后自动消失,弹窗弹出状态等等相关的交互规范。




10、其他


缺省页是互联网中常见的场景,当遇到网络不好、页面中没有内容数据、暂无资料等等情况,所导致的空白页面。


大致分可为:系统类缺省页,信息类缺省页,空白类缺省页。


遇到这些情况时,设计师一般采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作,以缓解用户的焦虑情绪。(也就是我们常说的情感化设计的一种方式)









设计规范很大一部分是组件库,所以就把组件库单独拎出来聊聊。


1、组件库是什么?


做一个比喻,组件库相当于积木玩具的一个个积木,每个组件就是一块积木,通过组件的拼搭可以迅速搭建出一个页面,而设计规范就相当于搭建的“说明书”。


通常我们将组件库分为基础组件和业务组件两大类,前者是系统通用组件(图标/按钮/输入框等),后者是由业务决定的相对更复杂的组件模块。


而对于B端产品和C端产品,二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验,因此需要考虑视觉、性能、实现、兼容性,另一方面,C端会根据活动、节日切换不同的主题,也要考虑组件视觉上的个性化扩展。对于B端而言,组件库更看重可复用性和稳定性,保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示,因此相对更高的要求是大而全,覆盖面广。




2、组件库的原子理论


2.1 原子设计/拆分


在业务已经发展到一定体量情况下,需要将项目中具备复用性及拓展性的模块进行拆解,对于B端产品来说筛选的时候会依据之前迭代的版本内容,把页面一一罗列出来,将可替换与相似的模块提取,并利用思维导图的方式统一归纳,并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换,避免了线上组件不一致导致体验问题。


以我们现在的产品为例:依据产品类型将组件拆分为:基础组件 、业务组件、数据可视化组件、常用模块。


原子设计


将产品拆分后,此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面:





从原子开始重新依据定好的视觉规范进行更改,再由原子组成新的分子。




3、盒子理论


在与开发沟通设计规范制定的过程中,常提到他们写CSS样式的时候是采用盒子(box)去写的。通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。


走查时使用浏览器我们也可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。









四、如何搭建组件库


搭建组件库的步骤




4.1 确定组件库内容


对于新产品来说,业务体量较小,较难抽取共性,组件也不全面,因此较好的方式是参考大厂的组件库确定要做哪些组件,它们的相对成熟,参考价值较高。


对于已经成熟的产品来说,我们可以直接全面体验查看页面,找出所有用到的组件,除基础组件外,提炼出复用率高的业务组件进行结构化和组件制定。


4.2 搭建每一个组件库


以提示弹窗为例,演示单个组件的建立方法。





1. 定义组件:根据业务定义提示弹窗使用场景,用于重要信息的提醒,且需要用户自己关闭操作。

2. 拆分组件:这一步是将组件拆分为元件。对提示组件进行拆分后得到如下:





3. 重组输出根据业务场景,我们把各个元件重组为组件,建成组件集,并定义各种组件的使用规则。


4.3 输出文档并替换到产品中


在组件库建立完成后,只有在日常设计中真正使用组件库,提高组件库在设计稿中的覆盖率,才能真正达到组件库的效果。这就要求我们要输出一份完整的组件库描述文档,在团队中进行推广,加强设计团队的公用意识。设计团队内部可以直接维护一套组件库,设计师设计时直接调用公共组件库组件使用。


另外,我们还要与开发工程师配合逐步完成现有页面的组件替换。




4.4 定期维护组件库


组件库的内容并非一成不变,而是在不断地更新,以保证所包含的组件都是最新和有用的。与其他数据一样,组件也会有增删改。我们需要定期对组件库进行维护。


增加:当有新的组件产生时,我们需要通过判断它的拓展性和复用率,以确定是否将它入库。


删除:随着产品的不断升级迭代,如果某个组件已经不用或复用率很低时,我们可以考虑是否要将它删除。


改:不可避免的,组件会随着业务而进行升级,我们可以通过数据埋点和A/B test的方式来确定某个组件是否要进行改动。









一、设计规范落地不了的原因





1. 设计层面


组件扩展性弱:


有时候设计师做出来的组件虽然看着很好,但是实际上使用时,适配效率很低,用组件去扩展和重新做的效率差不多。


脱离业务:


大部分时候设计师手中都有任务,于是这个任务就落在了相对不是那么忙的设计师手里(一般是新设计师),但是新设计了解业务相对来说是不够的,做出来的东西就像是是空中楼阁,抛开业务谈设计规范的都是很难落地的。


缺乏开发思维:


设计师不了解开发的实现方式,可能会做出来以后,开发较难实现,然后开发也就不会做。


2. 开发层面


缺少开发资源:


首先,设计规范的作用是巨大而延迟的,不能即时产出很大的价值,另外一方面,设计规范的落地会增加开发工程师很多的工作量,且无法量化成果。这也导致很多时候设计师无法争取到足够的开发资源来做这件事,所以,很难导致达到预期的效果。




二、怎样更好的落地设计规范?


1. 更加全面的了解产品及业务


设计师需要更加全面的了解产品及业务流程。





研究用户:


前期需要做好用户画像,弄明白产品的目标用户的差异,不同用户的使用场景。只有弄清楚各个角色的关系以及功能设计的逻辑,具体用户年龄,解决什么问题,才可以产出更符合用户需求的设计。


研究业务:


如果是新的产品,那就需要去详细的看类似的竞品的功能及业务流,并且了解公司产品的定位及方向,所以就大致清楚设计的大方向。


研究产品:


系统整理产品情况,最好是做思维导图形式,可以更好的梳理同类型的产品功能及组件,也就能更好的提高组件的复用性。


2. 整理好规范的内容和分类


在制定规范前,需要明确产品中主要有哪几种分类,将最基础的分类定义好方便后续针对分类内容进行整理。



3、如何推给pm、推给设计团队、推给研发团队


团队沟通其实是一门艺术,那需要如何做呢?


首先,写一份设计规范的价值的提案给领导,争取到足够的资源,包含设计资源、开发资源。如果领导的主导参与,那这个事情就好推动多了。


然后,把设计规范的设计工作交给熟悉业务的设计师来做,通过业务提炼复用率高的典型元素,优先开发,最大化投入产出比。


搭建设计规范和我们日常处理工作需求类似,并非输出一份文档就结束了。我们还需要将做好的设计规范推广给各个职能部门的同事包括设计小伙伴,PM和开发小伙伴的团队内外,并且需要得到团队内的一致认可才算是初步完成。


召开专门的设计规范会议,以清晰明确且有效的方式把详细的内容传达给各个相关人员,在一致认可规范的情况下,以达到内容的传达到位。同时,这个时候,就可以依据开发人员的反馈,做落地的修改规范文档。





1、如何推广给PM


利益点:提升协作效率,减少工作成本


在启动设计规范的整理之前,内部宣讲让PM对于设计规范的搭建已经有了一个基础的概念。然后争取到更多的开发资源。否则PM不会分配资源给予时间去搭建整体的设计规范。


可以从提升PM与设计的效率和降低原型搭建成本作为切入点,通过组件库以及通用模版的搭建,PM只需要极低的成本学习一下组件库怎么使用,即可搭建高保真的原型界面。甚至完善好组件库后直接不需要设计的参与,开发通过原型组件库搭建页面。

2、设计团队内部如何推广


利益点:提升设计效率,减少人力损耗,保持体验一致性


设计规范一般由团队内小伙伴共同制定,基本上已经对规范的优势达成共识。因此主要讲讲如何更好在团队内部使用规范。


团队设定主要负责维护的设计人员,其他人员在设计时候,通过Sketch Library 共享组件库可以直接调用组件,并建立更新日志规范项目流程提升效率,定期维护的时候其他人员统一告知负责维护的设计人员,统一定期修改更新升级维护。

3、研发团队内容如何推广


利益点:封装组件,更少的更改,提高验效率,缩短研发流程


需要研发团队认可设计规范,前期前端的参与是必不可少的。

在制作规范时设计师了解了前端开发的一些简单原理,前端开发也能及时了解设计师的想法,大家不再是各司其职而是串联起来共同协作,当规范确认下来前端就不会频繁改动组件,而且在有限的项目时间中。设计规范的统一极大缩短了设计和前端开发所需的时间,为后面的项目争取了空间。


4、排优先级,嵌入版本迭代内


一套完整的规范包含内容是非常多的,难以在1个版本迭代里面修改完。


因此可以采用敏捷开发的思想,小步迭代快速推进,将设计规范的覆盖放在每次迭代过程中。设计师需要将自己作为设计规范这个项目的产品经理,针对现有的需求进行拆分,并排出优先级分版本迭代进产品里面。


可以依据从大到小的原则进行优先级排序。对产品设计风格影响大的先排,影响小的后排。





设计规范的制定不单单是对于设计师,在嵌入版本里面要随时与产品和开发多沟通,以便达到更好的落地效果。







接近1.5万的文字梳理,感谢你看到了最后。接近尾声了,制定及梳理设计规范对于设计师来说个人成长有哪些方面呢?我个人觉得可以从这几个方面来说;



收集信息能力


通过整理规范,需要收集目标用户,使用场景、前期调研、产品功能梳理等众多资料,这期间我们需要去发现信息以及整理信息。庞大的信息收集,那对于个人的收集整理信息的能力是一个很好的提升,同时对产品会有更全面的认识。


归纳总结能力


将收集好的信息进行分类整理,这要求需要一定对逻辑性。在设计基础框架时合理对分类可以协助我们处理好每个控件对层级,这项能力无论实在工作还是日常中都有着巨大对好处,可以帮助我们从一堆繁杂的事物中“提纲挈领”,换言之就是“化整为零”,做减法,提取出最关键对因素。


全面复盘能力


将信息归纳整理好后,需要对全局进行思考,全局的设计及交互都需要考虑到位,比如什么情况下适合跳转页面,什么情况下适合给与用户弹窗。大体符合什么交互原则。


除了对大体交互需要考虑到位,细节上也不可以忽视,比如异常情况,极端情况该如何去处理,组件之间该怎么去配合等。在日常工作中我们也可以逐渐有意识去培养此类技能,对项目全局思考的越多,那么对整体项目对把控能力也就越强,与他人合作也会越显得专业。

沟通表达能力

在整个推广设计规范的过程,就是提升沟通表达能力的过程。


另外,整理设计规范时,难免会遇到模凌两可举棋不定的时候。此时可以寻求向上或者向下的资源寻求帮助,具备良好的表达能力能迅速帮助我们将问题阐述清楚,表达能力是设计师需要具备的重要技能之一


我们每次在求助他人或向他人汇报,都需要在全面复盘问题过后做到心里有数,将问题自己复述一次是否有漏洞或者没考虑清楚的地方。长此以往你表达的事情会更清晰,别人也更容易听懂你说的事情快速理解内在逻辑,那么说服别人推动工作的难度也会越小。同事对自己的逻辑思维,表达能力都是很好的锻炼。


这里总结了几个工作中与上下游沟通的小技巧希望能帮助到小伙伴们:在开始与他人沟通之前我们需要搞清楚我们沟通的原因与对象


原因里面包含:



对象里面包含:





当然在沟通时还需要考虑方式和语气,这些都需要好后斟酌。如果遇到情绪不太好的开发,这个时候反倒我们更不能将情绪激化,一般这些情绪化对态度过一会都会消散,可以采取冷处理等情绪过后换一种方式沟通看看。




文章来源:站酷   作者:789研习社

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

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

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

B端产品界面高屏效初探

鹤鹤

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。

文章来源:站酷  作者:Ant_Design

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

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

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



浅谈B端设计系统

鹤鹤

什么是设计系统?



设计系统 = 设计价值观和原则+设计规范+场景定义+工具包

是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产,,是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案,能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发! 

为什么要构建设计系统?


问题1:

随着业务的拓展,产品和项目数量不断增加,发展中期设计和交互上不一致性的问题浮出水面,需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验,以满足用户预期并向其传达统一的品牌认知。

问题2:

无统一的设计规范和交互原则,没有统一的UI组件库和代码库,各团队设计和前端需花费大量资源陷于低质量沟通协作和重复造轮子,拖慢产品和项目设计和开发节奏。

问题3:

产品项目数量 vs 产品设计师,人员配比严重不足的情况下,团队的设计师们无法从杂/乱/急的日常需求中剥离出来,影响构建产品壁垒的质量和速度。

设计系统的价值


产品侧:

保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候,可以保证产品团队使用同一份设计规范快速完成产品原型设计。 

设计侧:

把设计师逐渐从不必要、重复性劳动中解放出来,节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘,如果每个设计师都具备产品用研、交互、组件化等一条龙能力,才能体现tob产品设计师的价值,才不会被别人称作是拖拽组件的“工具人”。 

开发侧:

形成开发资产,可以提升研发效率,降低维护成本。开发工程师无需再重复开发同一个组件,只需要去组件库里调用即可,配合业务逻辑,高效完成界面开发。做到开箱即用。 

测试侧:

标准化的设计规范,是测试人员最喜欢看到的。1是1,2是2的设计准则,提升了测试效率。例如,设计规范规定弹窗footer区按钮组居右,那么测试人员只要测到不居右,就可以给产品提优化建议了。 

主流设计系统-他山之石可以攻玉!


无需犹豫,直接基于现有的优秀的开源设计系统,

设计系统的打造不必从0-1构建, 例如:Ant Design业界优秀的开源设计系统,我们完全可以站在前人的肩膀,最终生产出符合达观品牌、业务特性的设计系统。


阿里Ant design:https://ant.design/docs/spec/introduce-cn 
阿里的teambition:https://design.teambition.com/ 
华为devui:https://devui.design/design-cn/design-value 
饿了么elemnt:https://element.eleme.io/#/zh-CN 
有赞:https://design.youzan.com/index.html 

字节跳动 Semi Design:https://semi.design/zh-CN/

字节跳动 Arco Design :https://arco.design/

Material Design:https://material.io/ 
Lightning Design System:https://www.lightningdesignsystem.com/ 
Microsoft fluent :https://www.microsoft.com/design/fluent/#/ 
eva.design:https://eva.design/ 
Atlassian design:https://atlassian.design/ 

以原子理论构建设计系统


原子理论设计介绍

首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost提出的,他从化学元素周期表中得到启发,发现在化学世界中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。根据他的理论,设计体系主要包含 5 个层面:原子、分子、组织、模板、页面。


原子理论设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个概念哦~


原子层(Atoms):

原子是物质的基础组成部分,是构成设计系统的最基础元素。

在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线、间距、圆角、间距、阴影等。

简单概述下来就五个字:色、形、质、构、质;



分子(Molecules)层

在界面中,分子就像是一个由UI元素组成的相对简单的组织。如:按钮、弹窗、搜索框等。

以按钮为例,它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联原则组合成一个分子,图标和文字互相配合传达意义,颜色定义了按钮的特性,间距为按钮定义了一个尺寸和规范。


 组织(Organisms)层

分子+原子组合成更复杂和可扩展性的模块,这个称之为组织(区块组件),如:列表操作区块、列表展示区块、表单区块、数据统计卡片区块。

以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。



模板(Templates)层

由原子+分子+组织构成的更复杂更具拓展性的模块,如:分组表单页、页面级表单、详情页、列表页、异常页、dashborad。本质就是线框图,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构,页面中的信息是占位作用,而不是页面的最终内容。


页面(Pages)层

带业务逻辑的场景案例如:标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板;

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的带交互逻辑的「视觉稿」即为高保真原型图,将占位符替换为有代表性的真实内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。



关于设计系统的常见认知误区



误区1:设计体系就是设计规范或者组件库吗?

许多人认为设计系统就是单个代码库、组件库、设计规范,但实际上他们不是一个层次的东西,准确度的来说设计体系包含设计规范,组件库也是建立在设计体系内的,组件库是记录和共享设计模式的工具,就是设计体系工具化和表现层的部分;


误区2:设计体系的存在扼制了组织内创造力,会替代掉设计师?

抛出这个问题,是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点,我个人是很难以认同这个的,对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合,需要调动整个团队的想象力和创造力,最终达到一个统一共识才有可能被实施和执行;

好的设计系统可以通过流程和机制促进创造力的,而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来,当然也不能过度依赖过往的沉淀资产,把自己定位为设计系统的创造者,而不是使用的工具人,不断的创造和贡献好的解决方案被整个组织采用,就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师,反而是一个企业内部尊重设计师价值的开始!是企业对设计文化的认可!


误区3:设计系统是一劳永逸的吗?

设计体系是动态的,永远是随着组织需求和用户需求而变化的,一切说自己已经完成了设计体系的建设的人都是错误的,都是将将静态的设计规范曲解成了设计体系。


误区4:设计系统由少数人员生产,我们负责用就行了?

正确管理机制:少数人负责管理,多数人参与贡献;避免你做、我用模式,这种生产消费模式非常内卷;避免如:我一个设计师为啥要用你的规范;这规范做的太垃圾用处不大,我才不用,用你做的规范;我苦逼做业务,你晋升拿结果的负面心态;

然设计系统也不是简单的靠少数的人1-2个月用爱发电就能完成的,设计系统是一群人,对一种做设计文化的认可,每个与之相关的人都应该是设计体系的贡献者与布道者!


需要克服的潜在难题


当然设计体系也容易出现一些缺点,这些问题需要设计体系的构建者们去摸索去克服; 
  • 产品业务复杂性提升,提升建设难度

  • 难以控制创造与控制间的平衡;

  • 复用与定制间的平衡,刻意追求复用率而容易丢失整体观,为特定业务目标服务时不如灵活集中化式方法等

  • 资源问题,容易被当成是辅助项目而缺乏预算等资源….

  • 缺乏良性有效的组件库更新迭代机制,虎头蛇尾….

  • 收益短期不明显,搭建体系的长期收益难以被组织短期内察觉;


尽管有一系列潜在的问题,但总的来说设计体系的带来的收益是大于这些投入的,总的来说方向是没错的,下一个关键问题是:我们如何去建立一个更优秀的设计体系。

文章来源:站酷   作者:从你的世界经过



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


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

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


如何通过实验来验证设计结果?关于B端产品「屏效提升」的实验研究

鹤鹤

屏幕有效利用率这个话题想必大家并不陌生,在B端产品中,越来越多的产品和用户把目光聚焦到屏效上来。站在体验设计的角度,立足交互和视觉的设计手法,挖掘屏效提升的设计价值,让屏效最大化是提升用户体验的合理方法。





在此文中,对于整个设计(交互、视觉)的手段方法不做过多的详细探讨,我们重点阐述如何利用实验研究的手法验证屏效提升。以某B端项目为例,利用科学的实验研究方法,通过设计实验假设、提炼任务场景、准备实验物料、进行控制变量等完整的实验方法,来验证该项目中屏效提升的设计方法(提高信息密度、缩短操作路径以及信息重组)最终是否提升屏效。



原文地址:站酷
作者:自传一周的鹿

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

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

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

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

B端设计中台落地、响应式界面设计

鹤鹤


以下内容主要分成两大部分,第一是聊聊响应式和自适应的区别和原理,以及我们应该如何去设计响应式界面;第二部分也是比较关键的B端系统设计的核心,B端设计中台完整构建过程的具体步骤,以及应用到的格式塔原则,和命名的一些注意事项,内容较多,大家可以根据上述目录来选择性阅读。


1.1多端兼容设计的发展史



简单概括多端兼容设计的发展史,最早是桌面端,比如桌面的一些应用;后来出现了移动端,针对移动端大家用的都是WAP,指一种无线应用协议,大家在用手机浏览一些网站,会把网站翻译成一种低流量的浏览方式,比如去掉图片大图,只剩全文字,因为当时网络不好,早在3G和2G时代移动端用的都是WAP;在2008年之后出现了响应式,也就是做一套代码可以兼容三端(网页、移动端、iPad)设备,在发展的同时也遇到很多问题,但响应式同时也遇到了很多问题;于是又出现了自适应,指不同的设备打开不同的页面进行自适应,自适应能增加效率,但需要增加工作量;2017年以后直到现在看到最常用的就是渐进式,类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。


1.2 响应式布局的种类



1.2.1 响应式布局RWD


可以理解成用户在手机、电脑、ipad打开同一个界面,所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。


1.2.2 自适应布局AWD


自动布局算是响应式的一种,但平时看到很多响应式其实并不是真正的响应式,而是自动布局,因为界面在不同的设备用的是不同的模板,当我们用电脑打开呈现的是一套模板,而用手机打开则是另外一套模板,这种看起来是响应式,其实不是。因为当我在开发者模式下调节不同设备展示时,就会发现,其实是换了一个网址来根据不同的设备进行自适应的,而真正的响应式是不需要刷新的,在拖小窗口的时候就会变成手机端的那个样子。


1.2.3 渐进式布局PWD


渐进式布局是近几年比较新起的,这种布局设计,很像一个网站或者本身它就是一个网站,但用起来就像一个APP一样,看到这里大家很容易相到,小程序就是渐进式布局得一种,小程序明显是一个网页,但通过技术的一些嵌入和一些接口或者缓存的方式的操作,让用户在使用的时候感觉小程序就是一个APP,但核心技术还是web网页。



1.3 如何应用设计响应式


响应式的原理是通过定位的方式来做响应式的各种开发,需要在页面中至少标出这十个点:中心点,上下左右点,上左上右点和下左下右点,这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解,其实结合figma来看,这些点对应的就是这样(如下图),在figma中的布局点。设计师通过调节图形的布局点,可以做到在页面拉伸时,让想动的元素跟随变化,不动的元素静止不动,这就是响应式的原理。换言之,我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。



1.4 响应式和自适应的区别


01、响应式


如下图是响应式的优点和缺点。响应式其实就是只开发一套页面,这个页面兼容三端。虽然做了响应式,但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面,然后全部做好对应的自动布局,再进行页面拉伸,内容随之会发生变化,比如当拉伸到1024*768的时候,也就是iPad的尺寸,就会发现局部在设计上有些不合实际情况,这时就需要设计师在对应尺寸的设计稿上进行内容上的微调,比如按钮不可能那么长,就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时,然后再酌情针对网页尺寸的呈现样式,局部进行尺寸的调整,比如文字和按钮被拉伸到网页版都需要居中对齐,电脑端的样式就需要设计师重新排版了。


通常在B端系统,设计师需要做响应式设计时,往往是从大往小做设计,这也取决于这个B端产品是否需要进行移动端的设计,《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端,就需要我们将网页改成移动端设计,比如B端的侧边栏导航在拉伸到移动端时,就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中,做三端拉伸时候,可以用断点插件来进行演示,通过对断点插件的设置,就可以完美的看到页面在三端不同情况的适配呈现,断点插件用来做演示非常方便。



02、自适应


如下图是自适应的优点和缺点,其实就是一个项目开发三个页面,分别做定制设计,网页端、移动端和Ipad端。



2.1必读前言


我们都知道2021年也就是今年是我国新基建的元年,十四五规划2035远景目标里提到重点发展传统企业数字化转型,尤其是今年我们设计师更能深刻体会,C端和B端已经是完全两个不同的行业,C端发展近十年,已经很难再做到创新上的突破,该做的功能和创新都已经做了,而B端这片蓝海才刚刚开始发力,很多企业也都在考虑B端系统的搭建,降本提效率成了很多公司新的指标,因此数字化转型重点在于B端系统探索,B端重点在于中台的搭建!设计师通过设计中台,构建出基本的业务类型,再分类到业务中,构建出不同的业务界面,所以设计中台非常关键,很多公司经常会用这两个系统去构建,Antdesign和Elemnet就是设计中台,我们会发现用Antdesign可以做出很多的系统,那怎么进行设计中台的设计呢?和我们设计师有什么样的关联度呢?带着这个问题,我们深度探索B端设计中台的落地!


2.2 中台的概念及作用


概念:中台是互联网的术语,一般应用于大型企业,中国互联网的变革永远是从大型互联网开始,大型互联网公司引发了技术的变革,这也是中台的兴起,一般指搭建一个灵活快速应对变化的架构,快速实现前端提的需求,避免重复建设,达到提高工作效率目的。


作用:降本提效。如果没有组件库,普通设计师一天最多做十个页面,再多就不太可能了,如果有组件化得产生,一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前,组件库的作用尤为重要。但如果落地,就需要前端工程师的密切配合,因为设计师设计的组件只是一个样式,而前端需要把组件进行代码化,所以组件一定是代码化的,也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用,和前端代码的复用,可以大大提高设计师的工作效率。


2.3 设计中台的构建过程



2.3.1 基本库建立


基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等,之所以强调系统两个字,有系统就要统一规则和统一规范,然后进行调用应用在系统中的各个地方,比如我们想调用一个颜色,不是去随选用一个颜色,应该严格的从色彩系统中去调用,如果系统组件库里没有这个颜色,我们也绝对不可以使用,可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用,这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面,组件库中如果没有相应的组件,我们应该试着反推一下,是否要加进组件库中去,来进行系统的调用。在做中台的过程中,我们一直使用Antdesign,我们对组件的名称,组件的分类其实一点都不陌生,其实Antdesign也在借鉴国外的Bootstrap组件库(大家感兴趣可以下载Bootstrap组件库进行查看),所以并不是Antdesign组件库形成了一定的规则,它也是在沿用别人的规则,而这些规则也需要不断的有大公司去继承出来,所以慢慢衍生出来现在这样的组件库,那中台设计,首先要搭建基本库,把基本库里的基础一些系统搭建好后,我们继续去做扩展库。


2.3.2 扩展库建立


如下图,扩展库中包含了很多内容,比如分了四类,导航系统,数据录入,数据展示和反馈系统。其中导航系统又包含了,面包屑导航、下拉菜单、导航菜单、顶部导航等等,包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库,也不需要做成像Antdesign的组件库里包含的那么多,或者和新出得字节Arco组件库,因为它们面向的是系统级的解决方案,各行各业都可以用它,它面向的是一个大系统,也许我们只涉及到了其中的20%,因为也没有一个系统能用到它所有的组件,所以我们自己在设计组件库的时候,一定是按照我们自己项目的范围去做组件库,而不是做一个大而全的,大而全的组件库对我们也没有意义。它们做的是公共平台,而我们要做的是一个专属平台。



2.3.3 方法库建立


形成完基本库和扩展库后,第三步是建立方法库。方法库告诉我们的是什么时候用,比如我做了一个多选框,这个多选框应该什么时候用,是不是只要遇见一个选择就去用多选框,肯定不是,应该加以说明什么时候用这个多选框。类似于是组件的设计说明。


2.3.4 案例库建立


最后再做一个案例库,最佳实践库,具体组件什么时候用我们知道了,接着案例库就是在告诉我们应该如何正确的使用,或者说的方法是什么。比如标签的左对齐和右对齐,这种情况都对,什么时候用顶对齐,什么时候用左对齐,什么时候用右对齐呢?那么根据眼动仪实验数据数据来看,并且结合给出一些工作中业务中的最佳实践得案例放进去,给使用的人去做指引。


所以设计师做的事情,不仅仅是应用组件库和创造组价库,还应该指导其他设计师,指导开发人员在去复用每个页面组件的的时候,应该怎么正确的使用,这也是在B端设计中一个关键的环节,同时我们的视觉系统一定也是和业务有关联度的,所以在B端中做设计一定也不会脱离业务去做,我们一定要联系到实际的业务场景中,这个业务场景指的就是业务和视觉的结合,在做C端的时候,业务场景一定不会比B端多,C端的业务场景大多是定制化的业务场景,它要求的是个性化,不要求通用,尽量得个性化,比如图标、按钮、页面,而B端需要统一化,中台组件库的落地,可以大大提高设计师的工作效率和开发人员的协同效率,严谨的调用组件使用组件,可以使得系统页面保持高度的一致。



2.4 认识格式塔原则


2.4.1接近性


如图1:可以看出纵列的关系更紧密,因为纵间距小于行间距。


如图2:可以看出行间距大于列间距,它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢?这属于用户心理学的应用,如果元素相邻的更近,元素之间的关系就会更加的紧密。


如图3:如果元素相邻的关系都是保持一样的,那么它们的关系是相对对等的。


由此可以得出结论,如果相邻的关系越近,它们的关联度就越近,如果相邻的越远,它们的关联度就越远。


应用案例:如图4卡片中得标题和内容,设计中把标题和内容进行区分,所以我们会做大量的留白,这样的留白就会让信息结构具有层次感,层次感就是指它们信息结构的关联度,如果想让它们有关联度,就让它们距离近一点不要做区分,如果不想让它们有关联度,或者关联度出现一个等级的区分,那么就可以加一条线,让它们之间的关联度分隔开。这就是格式塔接近性的应用。



2.4.2 相似性


如图5:如果去区分右边的形状,通常我们会根据形状进行区分,因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。


应用案例:如果文字的标题大小是保持一致的,包括它有统一的大小,统一的色彩,统一的字号,那系统中的其他同样功能的地方,都应该用统一的文字,这就是格式塔相似性的应用,比如图标也是一样,只有用了相似的图形大小,相似的颜色,在相同的位置,用相同的图标进行表达,图标之间的设计才具有相似性。


2.4.3 主体与背景


如图6:可以看到有一个L,是主体与背景进行了区分,如果在设计的时候让L看的更加明显,我们采用的办法就是将主体的色彩或者形状变的更加独特,或者将背景的颜色变得更加分明,这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。


应用案例:比如警告弹出,可以用色彩去区分,目标就是让用户看的更加得清晰,当警告的时候给用户一个警告的信息,当成功的时候给用户一个成功的信息。还有类似对话框的弹出,采用背景变暗和加阴影的方式,都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中,前景和背景进行区分的时候,我们就可以通过色彩进行区分,色彩的区分要保持统一,比如背景色彩透明度50%同时加一些背景模糊,其他的背景也需要保持一致,阴影也是一样,如果把阴影放在一个平面上,距离平面越近,它得阴影越短,距离平面越远,它得阴影越长,这也是阴影的层级关系。


2.4.4 封闭性


如图7:可以看出这是一个四分之一的圆形。


如图8:这个图可以看出是一个五角星。


封闭性应用案例:当一个形状被另外一个形状或者被另外一个色彩阻断的时候,并不影响人们对这个形状额外得认知,一定会脑补出另外一个形状,这个原则和我们UI的关系是什么呢?比如一个loading,半圆一直在旋转,或者图表中的圆占比,我们就可以判断出谁大谁小,谁多谁少,判断出当前的进程和位置,封闭性原则通常应用在图标的设计,图表的设计和步骤条的设计中。


2.4.5 连续性


如图9:可以看出用一些简单得形状来体现,其中三角形具有明显的指向性,三角形箭头指向右边,上面五个是一组,可以看出它们具有连续性;另外一组三角形箭头指向右下角,可以看出它们是连续的一组。不同的形状会有连续性,箭头也特别有指向性,这就是为什么返回和前要进放在不同的位置,当我们的数据需要有连续的时候,我们也要使用相似的形状来表达,这就是连续性原则的应用。


同理如图10:连续性一定是要有连续等阶的变化,从左上角开始,向下和向右我们可以看出有明显的颜色连续等阶变化,通过色彩的透明度也可以做到连续性。




2.5 组件的命名规则



2.5.1 如何正确的命名


很多公司或者不同公司有不同的命名方式,这个需要和团队开发提前做沟通,主要以方便开发习惯操作为主,如果不命名也不能非得说成是错误的,命名可以理解成是一件锦上添花的事情,因为一切都以效率优先,命名自然会影响工作效率,通常情况,组件的命名可以分成组件的名称、级别、尺寸、状态,这样的命名顺序来进行,这样命名开发使用也比较方便,因为是按照了开发的统一规则来进行命名的。如图所示:



2.5.2 更多命名英文词汇


当英文不好的时候,推荐大家记常用组件英文名,以及常用状态名、级别名、内部名、尺寸名和位置名,那这些英文也几乎涵盖了工作中80%的英文词汇,收藏记忆哦~



至此B端系统设计总概系列为终结篇,回顾第一篇主要内容是如何正确设计组件库,B端业务调研的具体过程步骤,以及视觉规范的建立,可以看出第一篇属于B端设计的方法论或者设计指导,也是为开展B端设计前的一些准备工作;回顾第二篇总概主要内容是如何设计表单、表格、图标、仪表盘这些经常用到的设计难点,第二篇更加讲究设计落地过程中遇到的疑难杂症,专业技法;回顾当前总概三,主要内容就是中台规范的建立和自适应、响应式适配的难点,主要是成系统的B端设计步骤。我们都知道B端市场刚刚打开,而且当下对B端设计师的需求还远远不能满足我国现代化建设,数字化推进这么的大市场,作为UIUX,更早的拓宽一条路是我们当下必要的选择,谢谢阅读,祝愿各位2022乘风破浪,B端设计学有所成,如虎生翼!

原文地址:站酷
作者:_C鱼

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

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

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

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


B端设计指南 - 树形选择

鹤鹤

树形选择

关于树形选择,我们必须先知道它的基础概念,“树” 究竟是什么?我们先来看看树状结构的定义


树状结构:

树状结构其实是作为一种层次结构化的表达方式,它能够将树的抽象出来表达完整的构造关系,为什么叫做树,是因为它更像是一个上下颠倒的树,根部在最顶端,枝叶反而变为下方。

同样在对树状结构的整体命名上,也遵循了与之类似的表达方式:



节点(Node):是树状结构当中的基本单位,使用节点可以表示 不同数据间的 组成关系(从属关系与并列关系)通常节点会分为几类特殊情况。


1.根节点:整个树状结构的开端被称为根节点。一个树状结构一定只有一个根,在思维导图中,根节点就代表着它的开端,用于延展出更多的树状结构。不过在目前的树形选择当中,因为对易用性的要求,通常会隐藏根节点,只展示子节点。而根节点隐藏在 标题、选项文本 当中。


2.子节点:根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制,在树形选择当中是直接展示出来的部分。


3.叶节点:没有连接到其他子节点的节点。叶节点属于一类特殊的子节点,它是整个树状结构的最末端节点,在树形选择当中是一个重要的概念,下面会展开来讲。

分支(Branch):节点之间的链接,在我们树形选择当中,分支的线条可以选择显隐。其搭配的使用方式也有所不同


同时我们还会用到节点的几个基础的概念:

节点层级:指当前节点所在的层级,比如根节点为第一层级,根的子节点为第二层级,以此类推;

节点高度:对于某一节点的高度,便是该节点下所有叶节点从上到下的个数;

节点深度:指该节点到根节点的唯一路径长度,深度与层级较为类似。


树状结构究竟出现在生活中的什么地方呢?树状结构对于我们又有什么用呢?大家可能理解上会觉得很枯燥,我给大家举一个例子:


回忆一下我们小学使用字典时的场景,首先我们是先通过声母,去确定这个汉字的大概的页数范围,然后通过韵母去确定这个汉字的详细位置,最后通过音调找到想要寻找的汉字:


其实字典的设计,便是一个典型的树形结构。而在 B端系统中我们常见的公司组织架构、省 市 县 地址选择、在线教育的班级结构 等等,这些都是使用了完整的树形结构。


采用树形可以快速进行结构化的表达,其目的是为了用户能够快速地增删改查,想要更多了解结构化表达的同学推荐大家看一本书《金字塔原理》,里面讲了非常多的逻辑化思维、表达的方法与内容,内容比较多,而这种思维其实在我们工作生活中都能够用到。



树状结构组成:

1.层级缩进

为了将树的整个结构完整的表达出来,会使用层级缩进的方式进行区分,通常会使用 8px 对下一级节点进行缩进,这样能够表达更为完整的层级关系。

这里要注意,如果想要更为强调树形选择的层级关系或者树形内容本身就比较多的情况下,可以见解 Coding 编辑器的思路,即:将缩进内容使用“分支线”进行表达,更明确清晰。 这里使用层级线后,折叠图标也会有所不同,下面有明确解释。


2.折叠图标(节点按钮)

主要是将节点下的所有树叶与子节点进行展示,在整个树的结构中,折叠图标一般分为两种:三角折叠、方形折叠

三角折叠:为页面层级较少时使用。因为在较少的层级下,用户不用特意去思考当前节点所在层级究竟在哪。

方形折叠: 更多与页面层级线进行配合使用,通过层级缩进,将页面层级线标识清楚,能够更好的在多层级情况下进行合理区分。


3.选择控件

整个树形结构依旧是在选择录入框架下,分为单选和多选。因此需要对其类型有所展示,特别是在多选的场景下,一定要标明它的类型,方便用户进行理解使用。

通常这个控件可以在单选的时候进行隐藏,这里先按下不表,我在树形选择的类型当中深入给同学们进行分析理解。


4.选项文本

注意字数限制、超出后如何处理即可,我就不做过多介绍。



树形选择的类型:

在讲树形选择之前,我先为大家讲解关于与其相关的同类型产品,为了方便大家的记忆,我选择出了两类不同的组件进行对比,感兴趣的同学可以关注“CE青年” 后台回复树形对比进行查看。我通过视频的形式为大家进行了讲解,相信大家在看完之后一定会有所收获。

1.单选树

单选树只能选择叶节点,也就是需要将每个树展开过后才能进行选择。

它是一个较为传统的选择方式,因为它的选择热区较小并且理解成本较高,因此这种方式不太满足现如今对于B端产品效率提升方面的要求,并且要求十分特殊,因此使用较少,现多以单选节点树为主。

2.单选节点树

单选节点树与单选树最大的区别在于其能够选择子节点,这样可快速选择该子节点以及其各种叶节点

同时传统的单选节点树中是采取单选按钮的方式,随着对B端要求的不断提高,并且在树的功能越发的复杂过后,几乎取消了 单选按钮 的形式,取而代之的是将整个 文本标签 作为选择的热区,用户点击过后即可进行选择。

因此在树形选择当中,逐渐将单选节点树演变成由两部分热区所组成的一个控件:



在左侧,主要以树类型的展开折叠操作,热区通常就是图标折叠图标这一部分;

在右侧,以选择该选项、节点的操作为主,热区范围以整个选项文本作为基础,进行延展即可。

这里还是提示以下新读者,这类选择一定要进行 Hover 状态处理,不然用户无法根据光标的变化判断是否可点击,当然老读者跳过就行~

3.多选节点树

大家在对比单选与多选时会发现,为什么不会存在多选树?不存在只选择选项的多选呢?

思考时间又到了,别忘下划,自己先想想呢~

虽然在理论上会存在多选树的情况,但是它存在的价值比较诡异。首先在树的节点当中,我选择一个子节点就是选择该节点下的所有。因此可以说是选择了一个节点;或者说它选择了该节点下的多个选项,因此在实际情况中这类场景过于的少,更多会用多选节点树进行代替。


当然,多选节点树与单选节点树在结构上是十分接近的,就是将复选框展示出来,方便大家进行选择。考虑到大家经验不足,建议这里复选框放在折叠图标前侧,原因有二:


  • 在树形选择后续的拓展当中,经常会遇到选择增加一些操作功能,比如 新增、删除、复制、粘贴、拖动排序。我看很多设计师最开始因为种种原因将选择组件部分放在后侧,导致之后的操作无法进行更多的拓展,随之崩溃,对树形选择又是一顿乱造~

  • 现有的基础架构基本都是沿用了这类设计,可减少前端同学的工作量,同时也减少他 BUG 的产生。


多选节点树的使用场景非常多,我举一个大家在树形选择中都会犯的例子,希望大家能够多理解其中存在的特殊逻辑:


比如在一个大型上市公司当中,我作为老板会去设定整个“设计部”的权限,并且想要得到的效果是之后有任何新员工都是使用这个权限。如果作为一个新人设计师,很容易就会使用多选节点树,将整个组织架构进行选择,但是这样的选择与用户实际想要的内容是存在较大差异的。


在产品设计中,对于上诉的“设计部”这个概念其实是一个动态数据,即在之后新增到“设计部”的所有员工,我不必再去权限管理中重新配置。我们遇到动态数据的情况时,首先不建议大家采取树形选择,因为首先对于这个概念的理解成本很高,无法通过树形选择这样的方式让用户理解;同时系统对于这类动态数据的情况都建议特殊处理,至于怎么处理,大家可以在评论区讨论,我也会在后续文章当中为大家进行讲解。


树形选择的优点

易理解:

因为树状结构本身就已经存在很久,早在 DOS 计算机时代就有它的影子,经过长期累月的发展,用户在理解上也会相对更加容易


快浏览:

在数据量特别大的时候,能够根据子节点优先找到自己想要的叶节点,从而提升选择效率,与《选择录入02》当中讲到的 Tab选择十分类似,没看过的同学建议先去看看。


看结构:

结构,能够辅助人们进行快速记忆,从而对整体框架有着更深了解。而树形选择正是有了这种结构能够更为方便的让更多人熟知,从而更快了解业务。


树形选择常见误区:

数据量

首先对于树形选择本身的控件形式,你就需要去分析其能承载的内容数据量。应该是在什么范围内较为合适。

当数据量过大时一定会出现异步加载、数据分页等诸多情况,因此在设计中,需对这类情况进行设计。

全选功能

全选功能本身较为简答,无外乎就是一个复选框的事情,但是在上面提到的数据量过大 + 全选的存在,会有些问题还需要大家进行留意。

键盘映射

在树形选择当中,都可以采取键盘操作从而提高效率。基本规则是:

↑键:向上切换同级节点;从第一子节点,顺序返回父节点;

↓键:向下切换同级节点;顺序进入已展开的第一子节点;

←键:关闭当前级别节点;返回上一级父节点;

→键:展开子节点列表;顺序进入已经展开的第一子节点;

回车键:提交当前 foucs 的节点选项;

树形选择是较为常见的一类方式,但由于大家对 基本的树形结构 认识不足,导致对其设计会有许多误区。

关于树形选择大家还有什么疑惑,可以在评论区咱们一起讨论~

任何一个新颖的设计浪潮,都会影响设计师的设计表达。我们能做的就是感受浪潮、寻找源头、思考走向,随时精准有力的拥抱变化。


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

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

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

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


B端列表组件交互研究

鹤鹤

1 列表

客服系统常规使用的列表由顶部操作栏、表头、表体、底部操作栏构成。表格是为可读性而生,所以表格的易读、易对比、易操作才是表格设计的首要目标。

1.1应用场景

(1)展示大量结构化的数据。

(2)需要对数据进行排列、搜索、分页、操作等复杂行为。

1.2设计原则

(1)易读性

1)表头。保证表头字段名称精简易懂,既能节省列表空间,又能减轻视觉压力。表头的固定功能也能够很好体现系统界面的友好性,尤其当表头字段过多,数据类型不好识别的情况,固定表头能够大大提升用户的数据浏览效率。

2)行高。较小的行高可以承载更多的信息,但会降低视觉扫描效果,适宜的行高更利于阅读。目前客服系统常用规格为36px行高,但有些数据量大空间小的专区,需要展示尽可能多的数据时,会考虑会采用24px或30px等小行高,需要基于场景的需求进行选择。

3)行排序。可根据字段以及列表内容的必要性配备排序、筛选、搜索等功能,方便用户快速筛选信息或进行信息对比查看。

4)斑马线。斑马线能够增强用户视觉的横向引导,尤其阅读较宽表格且数量还多的列表,可以避免表格内容过多时,出现错行的现象。

5)分割线。横向分割线能够减轻列表竖直方向的视觉重量,只要采用合适的对齐方式,纵向分割线的作用就可有可无。当表头字段内容少,且易于区分时,可以考虑取掉单元格的纵向分割线,弱化表格形式,便于横向信息阅读、信息获取和信息间对比的同时,又能够简化页面。当数据量太多或单元表格较宽时,保留纵向分割线帮助提升浏览速度。

6)列宽。尽量减少展示的列的数量,关注用户需要的必要信息,当表头字段过多时采用横向滚动条的形式,保证列与列之间足够的呼吸感。

7)自定义列。不同用户信息侧重可能会有所不同,可通过自定义列的下拉面板对列表内容自定义展示。

8)列对齐。标题和内容一般采用左对齐,更符合用户的阅读顺序。金额数值排列采用右对齐,既方便用户读取数据,又方便进行纵向数据对比。

9)空白格。对于无数据项用-占位,不留白。

10)分页。客服系统列表数据庞大,通常采用分页来缓解加载压力,相对用户而言,通常滚屏会比分页更便利,所以,若无展示数据量要求且一屏能展示完时,会尽量避免使用分页。

当使用分页时,考虑到用户的操作习惯,可让用户自定义每页展示数量。

11)特殊标识。对于用户关注的数据状态变化,可以采用一些符号标识,便于用户快速定位信息的同时,也能更加直观的呈现数据变化。如下图,通过不同颜色和方向的箭头来反映数据变化。

undefined

12)全屏。全屏展示能够避免和表格无关内容的干扰,提供沉浸式阅读体验,可根据场景需要配置全屏阅读功能。

13)操作项。对于用户需要进行业务办理或高频点击的操作栏可以固定在列表的两侧,更方便用户对数据进行操作。当操作项太多或操作项不常用时,可通过收起较低频操作项,来节省页面空间,保证用户阅读高效性。

undefined

(2)易搜索

1)条件查询。一般位于表单查询页面上方查询条件模块,当查询区域内容过多时,可展示第一行的筛选项,其余收起。

undefined

2)表头筛选。在表头单元格右侧增加筛选图标,点击后出现筛选覆盖层,根据不同筛选类别,配置相对应的表单组件,可快速查找数据。

3)标签筛选。将用户常用筛选条件或关注目标设置为默认选项,如时间、状态、范围,一般位于顶部操作栏或表头区域。

(3)易操作

1)单条操作。单条数据操作一般固定在列表左侧或右侧。

2)批量操作。当对批量数据进行相同操作时,沿着用户的操作路径,建议将此类操作按钮放至底部操作栏。

undefined

3)全局操作。当进行一些“导入、新增、导出、其他页面跳转入口”等列表的全局操作,或进行模糊搜索、条件筛选等操作时,建议将操作按钮放至顶部操作栏。

undefined

4)详情。可在操作里加“详情”按钮,也可将名称项做成可点击样式,跳转详情。

5)树形结构展示。无须用户进行页面跳转,展开父级节点即可查看子级列表内容,一般控制在三层以内。

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

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

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

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


B端产品设计思路&高频设计要点笔记

鹤鹤

B端全称是Business即商家(泛指企业)的产品,通常是企业或商家,为工作或商业目的而使用的系统型软件、工具或平台。相对于C端产品,B端产品对业务逻辑和产品逻辑要求会更高。


本篇笔记将罗列B端设计过程中的核心设计思维和高频设计要点,结尾附上大厂设计规范链接。供大家下载查阅。



★目标导向·B端产品的商业目标


设计开始要了解设计的目标,用户的行为都是有「目标动机」的,B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。
当设计过程以「目标」为出发点,可以增强设计判断力,输出更有效设计解决方案。


B端产品的设计原则:提高使用者的工作效率,同时降低业务链路的操作及学习成本。

当你有了目标以后你的设计就可以围绕这个目标展开:



★设计价值·B端的设计价值体系搭建


对于B端的产品而言,用户最关心它能为实际的工作带来哪些便利,而并非这个界面做的多么的好看,以及用户体验多么棒。所以B端产品设计价值优先级往往是  功能性>表现力



B端产品设计需要站在整个业务线全局角度去把控各个设计点,不再是「用户体验」至上,为实现「任务目标」,「牺牲」一部分「用户体验」是必要的,这个时候视觉和一些体验就不那么重要了。通过调研业务去了解各个角色职能的工作流程、相关痛点,让产品能用,好用。



要点1·了解项目的业务流程


理想的B端设计需要了解业务目标以及业务链路中每一个环节的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。

这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作,从而提高效率。产品原型一般基于「功能」本身,而设计师从用户实际场景规划用户的任务流,可以优化产品逻辑,补全缺失场景,通过了解业务流程也能给予创造性解决方案




要点2·用户调研与场景化设计思维


B端产品往往是是服务于企业用户,用户画像需要专注于用户特征中的「群体职业身份」这类人无论性别、年龄、地区有何差异,他们都是一类角色,我们的产品要提供给这类角色使用,而不是某个人使用。



由于B端设计师不是产品的用户,无法沉浸在与用户相同的真实场景中,建立共情。所以设计师最好亲自感受一下业务流程,获得一手的用户洞察,


获取B端用户反馈的方式

「通过业务人员交流」业务人员可以帮助我们快速高效的描绘出典型客户案例的用户画像。
「实地走访」:观察在自然状态下用户如何完成工作任务,并提问题:「你怎么做?」或者「为什么这么做?」
「建立种子用户群」:聚集活跃的种子用户群,收集意见和建议,并在群里验证设计想法。
「亲身体验」:成为真正的客服小二,接听客户电话,记录自己在工作台场景下的真实体验和感受。

获取用户画像后了解该群体背后工作感受,行为习惯,以及任务类型。




要点3·情感化设计心理


安全感和信任感建立:人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息,请确保使用字段下方的注释文本解释为什么需要这些信息。


实际工作中我们曾经自动获取过用户之前表单中填写的的支付类账户信息,在收集的用户反馈中,用户会感觉到隐私正在泄露并让用户信任感降低。所以即使用户输入体验会更好,但是考虑到信任感,敏感类信息请不要自动获取。


让用户感受到你正在帮助他操作:Jakob Nielsen于1994年提出的十大可用性原则中,其最后一条原则Help and documentation(帮助性指导原则)是搭建B端用户帮助体系的核心准则,在理想情况下,没有帮助文档就可以使用系统是最好的,但在某些情况下(尤其是B端系统),提供一些引导性的帮助其实是必要的。


B端系统中可以尝试搭建用户帮助系统:




要点1·降低学习成本


对B端产品来讲,设计师在设计的时候是不需要耗费太多的思考的,只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲,其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。



要点2·保持高效


例如修改资料的时候,使用弹窗、浮层等等交互操作会减少页面跳转的频率。

但是与此同时,减少页面跳转并不代表真正的高效,例如瑞幸的供应商系统,供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加,但是可以避免操作出错给用户带来更大的困扰。



要点3·整理信息/引导视觉


设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉,举个例子,如何引导:




设计侧核心要点


B 端产品是以业务为核心,是需要用户长时间操作并完成工作任务的,对于操作和展示内容无关的元素,越少越好。视觉为功能让步,追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。



要点1·表单设计


输入顺序:先易后难;先必填后选填;先公开信息后隐私信息;有关联性的合成一组,特殊问题后置,用户输入时、不会觉得突兀、门槛太高 。

自动对焦(PC端)进行表单页面,自动对焦第一个输入字段可以引导用户开始进行输入。

标题:标题是对下文最短最精的概括。用户一般都会跳过表单内容,而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。
用户应该可以看一眼标题就知道他们应该怎么做,而不是非得把剩下的全部看完,
(附:这部分感兴趣的同学可以搜索“微文案设计”)

在表单编写方面,或者说各种写作中,删减词语都要比添加词语更加有益。 在仔细检查不必要的词语后,文章会更笃实,更连贯,更吸引人。



这个链接有什么用?关闭是点击右上角的按钮吗?如果并没有增效,那就是减效。每一个字,每一张图片,都不是100% 必需的,这些都会降低你表单的转换率。

删除一个字段,表单提交率就可以提高 26%。(本篇笔记原本有12000余字,为了避免浪费大家时间,我仅保留4000余字的高频要点内容)


PC端产品提示文字尽量不要放在框内

提示文字存在于框内常用在移动端,它的空间占比很小,对移动端的小屏来说,是非常友好的,但如果在交互上处理不好,会有很大的缺陷。

内部标签结构,只有提示性文字,用作提示用户应该输入什么内容,但用户在输入的时候,内部的标签/提示性文字就会消失,这时候,用户会失去它是否输入准确的唯一判别标准。


减少打字需求

字段输入通过部分人工智能自动将操作步骤可以变得简洁高效 ,也包括诸如一些、自动定位、图片识别、自动获取,第三方导入等方式来使用户的效率得以提升的功能。
打字是在线表单中最耗时、最密集的部分,而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能,将减少工作量并提高转化率。



使用文本块

文本块会更容易让用户记住内容:例如银行账户、电话号码等等。它指的是将信息排列成「块」的过程,使内容更容易保留、处理和回忆。一份研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。


表单的提示文字和定义格式要求

如果一个字段需要特定的格式输入,请告诉用户。例如密码要求、语法规则、编号间距等等。



用输入框长度提示

可以用输入框长度提示用户输入的内容是否正确。
德莱厄斯研究所的可用性研究发现,如果一个字段太长或太短,用户开始怀疑他们是否正确理解了标签。


在用户输入的时候,右下角告诉用户已经输入了多少字,如果超过 80 字后会变红色,用来警示用户,并且此时的表单域也无法输入新的内容。


如果用户填写错误,向用户显示错误发生的位置,并说明原因。


单选框

如果你的表单里的选项少于5个可以列出所有选项供用户快速选择,当大于5个时候可以尝试用下拉框解决。
将第一个选项作为用户最有可能的默认选项,且是最安全的选项,提前预判用户的操作提升选择效率。排列方式推荐数直排列,竖直排列相对于水平排列容易读取和定位,提高用户的浏览顺序。



解释隐私消息

当前需要用户填写相对隐私的信息时,请给予解释这么做的原因及目的。


收集设计反馈

完成表单的设计后可以给业务用户进行简单的测试,并记录他们填写的时间收集反馈,以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。

最后在情感化设计系统里记得感谢用户填写或者反馈问题,因为用户是花时间的。所以请表示感谢。


要点2·表格设计

表格的设计围绕着「可读性」和「易操作」两个设计原则。设计易读,易扫视,易比较,易操作的表格结构是表格设计的首要目标。


列宽有三种常见处理方式:

1.  根据内容的极限长度给出足够的固定宽度;
2. 可以固定部分列的宽,其余列按百分比处理;
3. 列宽需要考虑最低宽度/最大宽度/文字极限状态,内容为空状态显示方案;
4.需要设置列之间的最小宽度,表格响应式布局情况下最小不小于此宽度。

M-Densign规范中对齐方式会遵循如下规则:
表格的排序,应从用户目的出发,遵循用户查看数据的习惯,尊重数据之间的关联性,设计用户查看、操作数据的路径,而非随机排列(这部分可以在业务侧调研时验证,提高用户体验和阅读效率)。


1. 文本信息/混合型文本左对齐,符合从左到右的阅读习惯;

2. 数字信息右对齐,方便数字之间的直观对比;



要点3·按钮设计

设计规范需要定义按钮的四种状态:正常状态(Normal)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)



B端产品的开发一般涉及多个开发团队协作,例如瑞幸的后台修改按钮颜色,都可能牵动10+工程师的协同。

所以B端产品在进行设计改版以及设计侧调整时候要思考调整对于业务侧是否有直接帮助,在设计和规范建立之前,切勿频繁改动。


除了完全独立设计开发的项目以外,还有大量的 B 端项目是采用第三方框架开发而成的,如 Ant、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力。


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

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

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

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


B端设计指南 - 审批

鹤鹤

业务究竟是什么?


很多时候既让初入B端行业的设计师感到一丝丝迷茫,因为不同的B端系统也就意味着,它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理,OA的办公自动化,特定的行业往往都会蕴含着不同的业务类型


而作为设计师,如果只了解设计模式、设计组件,不去分析设计最后的业务诉求,其实是没有任何意义。因此想要通过B端设计指南,和大家一起聊聊B端业务,以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的 审批


开始之前,还得再多说两句,因为一个系统当中,业务本身就不是独立存在的。因此在去讲述审批的过程,一定会涉及到 流程、权限、表单配置 等一些基础内容,建议可以先做初步了解,再结合文章进行阅读



审批的起源

虽然在说起源,其实我更想给大家讲清楚 审批在B端系统 当中的重要性

审批字面意思是审查并加以批示,通常指对 下级呈报上级的公文进行审查批示,报请上级审批

现如今,任何事情一定都会有分工协作,而使用审批的好处是可以

  • 规范员工行为

  • 提高企业运转效率

  • 系统存档便于溯源

  • 保护环境(毕竟减少了纸张浪费)

当然在不同的阶段的公司,对于审批的诉求是不太一样

小公司:因为审批的决策路径短、流程上都非常简单,但因此就会缺乏规范保障。比如在外出办公时,看似只需要与老板当面进行口头上的沟通即可,但是在外出出现意外时,由于缺乏外出办公的相关证据,员工的权益则很难得到保障

大公司:因为审批的决策路径长,流程上都极其复杂,因此会在多人协作下完成整个流程审批。比如想要申请购买办公用品时,会由 行政、Leader、财务 层层审批,从提交审批到最终落实可能需要十天半个月,但是这样的流程,能够确保企业在清查财务状况时,更加有理有据

审批的演变,就是从最开始的规章制度而来。比如在早期去政务机构办理各种业务时,会让你去填写各种纸质表单。在审核过程中,则需要有各个机关的盖章及批准,而这种形式正是政府对于普通市民的自上而下的管理方式


审批其实是整个B端系统的灵魂,因为在B端系统当中,企业想要使用系统的一大痛点便是 核心的管控 

因此你会发现,只要一个独立的系统,一定会存在独立的审批模块。因为B端管理系统当中企业的最终目的,是管理手中的人,而审批便是最为常见的一种手段

审批在如今的B端系统当中,可以理解为它是一组消息,在这一组消息当中会有:“具体的文本、对应的附件、以及照片视频”这些内容都是辅佐 申请人 去讲诉你需要申请的内容

比如我们在申请病假时,往往需要出示 三甲医院所开设的证明,对于这个证明,如何在表单当中出现,你会发现最为常见的便是拍摄证明图片,然后上传到表单当中(这个与字段属性紧密相连,我就不做不过介绍)


审批的这组消息还会有些特殊,因为它非常重要,你可以理解为它是一则“加急消息”会提醒审批人快速的进行处理,同时会告知相关的参与人(处理人、抄送人)审批的进度、并且无论成功与否,都会在系统当中留下 足迹,因此它起到了 “追踪、通知、留存” 三个非常重要的作用,我们首先对于审批进行一个基础的拆解

审批的拆解

如果把审批单独拿出来,你会发现审批会牵涉到 发起人、处理人、抄送人

发起人:

审批的发起人,也是整个审批流程的归属人,他最关心整个审批进展

因为在发起人的角度,创建完审批事项后,可能还需要进入审批页面,完善 后续附加信息、及时了解审批状态、催促审批人的审核、处理驳回意见 等等,因此站在发起人的角度,审批需要尽可能详细的展示 当前审批的状态、完整的审批流程、驳回信息的快速操作、成功信息的必要通知

处理人

审批的处理人主要在审批过程做出决策,因此他更在乎的是审批申请内容的信息。比如 审批的信息内容、直接的审批操作、多条审批的管理

当然,在一些大型的集团企业当中,会将审批分为审批「直接处理人」「间接处理人」(后文以 直处人、间处人 简称)

「直处人」作为审批的第一处理人,也就意味着他的意见至关重要,如果「直处人」通过过后,相对而言整条审批的通过几率会大大增加。通常「直处人」是作为申请人的直系领导居多,因此多数情况下可以理解为直属领导进行 “把关”

「间处人」作为审批的后续处理人,同样在流程当中也十分重要。但在有些情况下,比如一些偏平化管理的企业,「间处人」更多像是“权利”的象征,因为权利已经下放给「直处人」,而「间处人」起到知晓审批以及企业的规章制度要求

抄送人

审批抄送人主要起到通知对应角色的作用,因为一条审批的出现,会造成诸多影响,假设今天你需要申请事假,如何通知同部门的其他成员呢?

发送即时消息,显得过于简单;每个打电话,又有些麻烦;发送企业邮件,又怕他们没有看到

这时候抄送人会显得尤为关键

通常抄送会有企业流程上管理员配置的固定抄送人,以及发起人选择的自行抄送人 两种类型

固定抄送人 角色通常与管理员配置整个流程有关,他是角色当中 管理员 所配置的重要通知人,比如今天你的请假信息,肯定会告知行政,像这类默认的通知流程,则可以将其设为固定抄送人

自行选择抄送人 则是提供给发起人自行选择,该条审批可能会影响到的相关人群。比如就是发送给同事,让他们知晓今天你不在岗位上,因此自行选择可以增加审批抄送的灵活性

这里肯定会有很多读者会问,我选择抄送人与我发消息给同事,有什么区别么?

看似完全相同,实则有明确的区分

通过消息,将审批内容传达,本质上是你自行将内容发送给对方,对方会对于你这个消息的真实性会产生疑问?你是否通知了

而选择抄送,更为权威,更能体现你这条消息的真实性,并且整个流程都已经由领导进行批准,因此不会存在太大问题

其实审批的本质就是一组消息,而这一组消息当中,申请人 通过 表单配置 去获取需要补充的消息内容,而流程会根据企业所配置的流程方式将这一组消息进行合并转发给对应人,而审批人则需要对这一组消息进行回复“通过、驳回” 来让整个流程继续延续

审批流程

审批当中,最主要的便是流程。因为你可以通过查看流程图,去了解整个企业的组织架构、规章制度、员工管理方式

1.串行审批/依次审批

串行审批主要是指当一个审核节点通过后,才能进入下一个审核节点。如果节点驳回,则可以根据业务实际需要,配置驳回的返回路径,会有:拨回到发起人、驳回到上一个节点、或驳回之前任意一个节点 重新审批


2.并行审批

并行审批是指一个审批节点存在多个角色同时审批,这里会存在两种情况

  1. 任何一个人审批通过,则可以进入下个节点,这也就是系统当中常说的 「或签」

  2. 所有审批人员通过,才能进入下个节点,这也是系统当中常说的 「会签」


3. 条件审批

条件审批就是将企业当中的规章制度映射到实际的项目当中,通常就是某个审批内容会根据 金额多少、实际数量 等 进而选择哪个角色进行审批

比如销售人员在申请一个合同审批时,会根据合同金额的不同,审批人也会有所差异

  • 当金额小于8000时,合同直接由财务专员进行审批,进而让流程进行快速审批

  • 当金额大于8000时,合同会由销售主管进行审批,让销售主管能够掌握企业的重要合同


4.自主审批

通过发起人选定一个审批事项后,将自主选择后续的审批内容,进而实现审批的后续选择。这是一种较为灵活的审批流程,当企业尚未形成标准化流程时,自主的核心就是当发起人发起一个审批,提交时需要自行选择下一个环节的审批人。而下一个环节的审批人审批通过后,可以选择继续流转到再下一个人去审批,或者结束这个流程

审批页面梳理

审批的背后,它映射的其实是企业的一条条管理制度,而它的设计一定是要满足企业的实际需求。因为你负责的产品不是为某一家企业提供的服务(定制化产品),并且企业管理制度的变动其实是家常便饭,你需要去考虑一个通用的解决方案,这个解决方案拆解下来会分为三个内容,分别是:申请表单、流程配置、更多配置 进行讲解

1.审批表单

审批表单是最为一个“简单”的用户可配置化表单,因为现如今大多数B端产品都是以 SaaS 作为基础(如果是定制化产品 它的审批内容、流程也不会是固定不变的)也就意味着审批表单需要为企业提供“DIY”的方式,通过表单提供不同的字段类型,去构建审批的实际要求


比如在一个选择请假时,年假、事假、病假、婚假 等的要求都会有所不同

如何知道他们的差别,其实可以根据《劳动法》的相关规定 以及 各个其实的实际公司制度,进行个性化的处理

在申请婚假时,需要上传你的结婚证,以证明其真实性;在病假时,需要有3甲医院的病情证明;在年假时,则需要有你的剩余年假天数。而这些特殊诉求,其实都需要在表单当中进行各种定制化表单

当然这只是极为常见的 请假 场景,而在实际业务当中的复杂场景(更多需要将 审批与其他系统关联)一个简单的表单是没有办法进行满足

这也是很多企业会发现,无论是飞书、钉钉、企业微信,都没有办法满足其实际流程需求。又没有办法改变自身流程,只能够自研、定制化 产品,这也是为什么即便各行各业都有了初具规模的 SaaS 产品,但是还是会有很多企业愿意自行研发软件


2.流程配置

企业可以根据自身的系统流程,在流程配置当中去定制特定的流程。在这个页面的设计上,需要注意不同参与人的状态,以及复杂流程时如何才能够进行清晰的阅读,因此增加了 颜色区分(发起人、审批人、抄送人)+ 视图缩放 功能

颜色自然不必多说,整个系统需要统一,因此不能够只考虑在管理后台的颜色,是一定要在详情页当中也能过保证颜色的一致。这样才能够满足实际业务所需

视图缩放只是小小提一下,常见的视图缩放会放在左侧,至于为什么,自己稍稍揣摩揣摩

由于流程配置的属性页面会涉及很多表单的复杂逻辑,这个只能够留在我的 训练营的课程 当中进行拆解,这里就不过多赘述


3.更多配置

更多配置项则是审批在实际情况下的特殊处理,比如:申请人修改审批的具体时间、能够将审批转发给其他人、出现多次相同的审批人是否去重 等等...  其实就是将审批的设计方案进行“赋能”,去满足更多企业在实际场景当中的需求,感兴趣的同学可以去 钉钉、飞书 了解详情


结语

审批,核心还是提高企业运转效率,如果在审批之间,还需要不同角色私下反复沟通,本质上就失去了审批的意义。而审批本身,就是一个典型的B端产品 从场景到需求,进而研发功能,最后又回归场景,你设计的好与坏,落地到真实的场景当中,试试便知

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

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

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

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


B端体验设计-与复杂共处

鹤鹤

“复杂是世界的一部分,但它不应该令人困惑,好的设计帮我们驯服复杂,不是让事物变简单(如果复杂是符合需求的),而是去管理复杂”--唐纳德·A·诺曼



与复杂共处,这是一个有趣的话题。在这个奉行“少即是多”的时代,设计师对于复杂噤若寒蝉,认为优秀的设计应该简洁明了,若无必要,勿增实体,而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思,甚至试图通过削弱功能的方式来降低产品的复杂度,得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗?从心理学的角度来看,复杂的事物往往功能强大,而功能强大意味着更好的服务与更高的价值,用户也更愿意为之付费。当我们购买商品时,我们会仔细斟酌,拿着产品的功能列表反复比对,这个时候我们忘记了产品复杂与否,更多考虑的是功能是否满足自身需求。


对于大部分B端产品而言,复杂或许难以避免,复杂是出于实实在在的业务的需要,而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂,是因为产品需要完成复杂的工作任务,界面内承载的信息内容较多,在视觉上会带给用户压力,直观感受上觉得产品很复杂。但是这些信息又都是必需的,如果缺少这些必要的信息,会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱,密密麻麻的按钮如此复杂,但是每一个按钮都有着相应的功能,不可或缺。既然复杂难以避免,那么作为设计师我们不应该被动接受或盲目拒绝复杂,我们应该学会如何与复杂共处,去尝试驯服复杂、管理复杂。


理性看待复杂


相信很多设计师和我一样,经历过现代主义浪潮的洗礼,对于简约的设计有着或多或少的偏好。因为这种偏好,在自己进行设计时也希望能够选用这种风格,在设计时刻意的去追求界面简约,却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看,复杂的事物更容易理解,简单的事物反倒令人困惑,一味的追求简单反而会让事物变得复杂。


B端产品的目标是降本提效,追求简约的设计思想在B端产品的设计中并没有那么适用,为了提升用户的操作效率,我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度,但是相较于产品视觉界面会因此变得复杂,产品的易用性和操作效率对于B端产品而言会更为重要。


与复杂共处的前提是能够理性地看待复杂,复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态,它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定,就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单,因为两者的功能需求不是一个层面的,所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。


分清复杂与困惑


我们之所以对复杂怀有畏惧,其实更多的是畏惧令人困惑的复杂,复杂与困惑有着本质的区别,理解他们之间的区别很有必要,复杂描述的是事物的状态,而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑,理解这些规则和逻辑,能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑,用户难以理解产品的运转机制,需要花费很大力气才能完成有效操作,容易让用户产生挫败感。产品可以是复杂的,但是不应该让用户困惑。


在很多复杂的传统线下业务数字化转型的过程中,为了让产品易于使用,设计师需要深入到一线,去了解真实用户在线下业务场景中是如何处理日常任务的,在流程线上化过程中也需要遵循这样的业务流程,这样能够让用户更快上手,而如果我们在设计过程中不去参考用户在线下的操作场景,按照自己的想法去意测用户的行为,这样设计出的产品背离了用户的心理模型,缺乏内在逻辑,会让用户感到混乱困惑,陷入深深的麻烦。


基于产品本身功能需要,我们可能无法很主观的去降低产品的复杂度,这就需要我们在进行产品设计时花费更多的心思,通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰,不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计,用户在编辑器内完成一系列针对表单的编辑、配置操作,然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列,这种方式结构简单,但是扩展性较差,过多的栏目也容易让用户陷入困惑,不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构,在步骤导航上给出完成表单编辑配置的主要步骤,在大的步骤下用侧栏导航承载小的编辑项,结构清晰,且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致,视觉观感上甚至方案B更为复杂,但是方案B在这里可能是更合适的方案,因为方案B在配置流程的指引上更为清晰,也更贴近用户心理模型,即使没有使用过在线表单的用户也能理解产品流程,因而用户能够更容易的完成表单配置并发布表单。



功能决定产品的复杂程度


我们在使用产品时,都会有一个大概的心理预期,会认为某一类型的产品会较为复杂,某一类型的产品会相对简单。为什么我们会有这样的认知呢?是因为我们知道这些产品大概有哪些功能,而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定,而不是依照设计师的自我喜好,像如淘宝、京东这类的购物网站、拥有着很多的栏目,所以淘宝、京东的界面相对来说较为复杂;而像百度这样的搜索引擎功能相对来说比较简单,所以界面设计相对简单干净。


我们可以容许一个功能强大的产品设计得相对复杂,但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计,即不过度设计,也不执着于追求简约,而是基于需求恰到好处的进行设计。


复杂产品也能有好的体验


复杂的产品会有好的用户体验吗?答案是肯定的,用户体验的好坏与产品是复杂还是简单并没有直接的关系,很多时候复杂的产品也能带给我们良好的用户体验,在互联网产品中,我们可以看到很多复杂的产品,这些复杂的软件产品,一点点的改变着我们的生活与工作方式,让我们生活与工作变得便捷与高效。


首先可以看看我们的国民级电商应用淘宝,乍看淘宝的界面,可能会觉得十分复杂,甚至会给人一种眼花缭乱的感觉,但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际,做社区团购的淘鲜达,专做拍卖的阿里拍卖等数十个板块,业务繁多,功能复杂,但这几乎很难改变,因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看,虽然淘宝的业务和功能繁多,却有着清晰的布局、信息对齐、内容组织,产品尽管复杂,但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿,贴近用户的心理模型,用户容易了解产品功能、容易与之交互,整体上有着良好的用户体验。



又如我一直在使用的一款笔记软件Notion,Notion相对于印象笔记、有道云笔记而言更为复杂,需要花费一定的时间成本学习才能够从容上手使用,但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前,甚至都不会想到会出现在一款笔记产品里面,如甘特图,多维表格等,这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式,让笔记能够自由拖拽,拥有了极强的自由度,用户可以很自由的用各种各样的形式来记笔记,要是你肯再花一些心思,你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识,打造个人专属知识库。将我们习以为常的线性笔记思维,转变成纵向思维,甚至是网格状思维。Notion无疑是复杂的,但是这样做是为了给用户提供的强大功能和极高的自由度,这些功能恰恰也切合了用户的需求,创造了一种全新的笔记体验,带给用户愉悦的使用感受。



过度简化的潜在风险


简单是产品追求的最终形态吗?其实未必,很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计,不可避免的就需要隐藏一些信息或者拉长操作路径,这是一个权衡的过程,我们在做设计时也会经常面临这样的抉择,是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要,人们对于美的事物往往更有耐心,也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言,准确的传达信息,帮助用户进行判断,频繁使用的功能设计得更高效便捷,这些点能带给用户更实际价值,也是我们在设计产品时应该优先考虑的点。



特别是在一些专业性的软件中,如果我们为了追求简约而弱化或者省略掉一些关键信息,还有可能会导致用户错误操作的出现,造成严重的后果。试想一下当你在使用软件编写一个计算字段时,软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例,导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用,为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。


如何与复杂共处


前面我们了解了关于复杂的定义,认识了复杂与困惑之间的区别,也明确了在B端产品中复杂或许难以避免,复杂是出于实实在在的业务的需要而非某位设计师的错误喜好,既然复杂无法避免,我们就应该学会与复杂共处,管理与驯服复杂。那么如何与复杂共处呢,有一些策略或许可以给予我们一些思路。


1.为产品注入规则


复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑,而困惑缺少这样的规则与逻辑,让人无法预测与揣摩,对应到软件产品的设计,一款成功的优秀的软件产品,应该是易学易用、能够满足用户预期,用户能够直观的理解产品的流程与主要功能,并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢?


这里可以看看我们团队正在使用的研发管理工具TAPD,TAPD是一款敏捷研发协作工具,凝聚了腾讯研发方法及敏捷实践精髓,其中敏捷开发的方法就是TAPD的内在规则与逻辑,有过敏捷开发经验,理解敏捷开发流程的的开发人员能够快速的上手使用TAPD,对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想,进而理解产品的功能与流程,因此虽然TAPD功能与页面结构相对复杂,但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径,实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处,将原本零散的功能点通过特定逻辑链接成操作流程,帮助用户更好地理解与使用产品。



相同的在我们公司自己的一个项目中我们也运用了同样的方法,在我们公司之前研发的一款crm产品中,为了给用户提供最佳的销售实践,帮助用户更快上手使用我们的产品,我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询,并依照硅谷蓝图的销售转化路径来构建我们的产品体系,确定产品功能,梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户,让用户能够更好地使用我们的产品,实现产品的最高价值,为中小企业销售团队赋能。


通过前面两个案例其实我们可以感受到,当一款复杂的产品有了内在的规则与逻辑以后,用户理解和使用我们的产品会变得更顺畅,用户不会迷失在茫茫的功能之中,通过理解规则与逻辑,用户能够对自己操作结果有一个大概的预期,而不是处于困惑状态,作为设计师的我们也可以将这种规则逻辑作为我们设计的引导,让我们的设计更为系统和有条理,让产品不再是一堆功能的堆叠,各自为战。


2. 贴近用户心理模型设计



复杂是用户的一种心理感受,用户觉得产品复杂除了产品本身结构信息复杂之外,也是因为产品在设计上没有贴合用户的心理预期,用户很难理解产品的流程与交互,所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念,实现模型、表现模型和心理模型,三个概念的释义如下:

实现模型:产品是怎样工作的
心里模型:用户认为产品是怎样工作的
表现模型:通过设计来让用户认为产品是怎样工作的


表现模型越接近心理模型,用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型,用户越难理解产品,产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制,很多B端产品在设计时更多的偏向于实现模型,用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致,使用过程中会遇到很多的阻碍,影响整体的使用体验。对于一款复杂的产品而言,我们需要让我们产品的表现模型更接近于用户的心理模型,这样用户能够更容易了解产品的功能,并与之交互。


大家使用电脑时有没有遇到过类似下图这样的电脑报错信息,里面是一堆的专业名词,看得人一头雾水。这时候我们能做的只有默默的打开百度,去了解弹窗里面讲的内容究竟是什么,了解后才明白原来这样,然后按照百度上操作步骤一通操作,侥幸解决了问题。但是当下次我们遇到相同问题时,可能还是不知道如何解决,无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰,用户不是专业的开发者,他们不了解也不需要了解产品背后的实现逻辑,这对用户而言是没有价值的,给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难,变相的是在人为的增加产品的复杂度,与复杂共处,我们需要学会贴近用户心理进行设计。



3.统一交互模式


复杂的产品往往功能、页面繁多,如果页面内的视觉元素以及交互各自为战,那么放大到整个产品就是一个灾难,不仅是产品给用户感官上不统一、整体性差,过多的交互模式也会增加用户的学习与记忆成本,用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑,对用户使用产品造成困扰。针对这个问题,现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互,一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题,通过模块化解决方案,也能降低冗余的生产成本,实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题,但实际上就算一个产品有了一个自己的组件库,依旧还会遇到体验上统一性问题,这是为什么呢?


在原子化设计理论中,粒子是构成页面的最小颗粒,粒子构成简单组件,简单组件到复杂组件,再到区块、页面。虽然用组件能去构建页面,但是还会遇到页面结构、交互不一致的问题,设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题,在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。



这里我们拿B端产品中常见的列表页来举例,纵观所有后台列表页面,抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区,在不同的业务场景下,对筛选器的需求也各不相同,简单的可能只需要使用标签选择就能够完成筛选,复杂的可能添加很多的筛选项甚至选项之间还有且或关系,我们需要根据实际的业务场景设计适合的筛选器,但是需要注意的是一个产品中用到的筛选器形式不应太多,我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。



B端后台产品中比较常见的还有表单,我们可以归纳出产品内可能会使用到的表单类型,然后定义出具体的框架结构与交互,在具体的设计过程中在根据实际情况选用不同的表单区块。


1.分组表单

一种常见的信息录入以及信息展示表单,这种形式是我们最长用。



2.分步表单

分布表单适用于信息录入项以及信息展示项过多,在一个页面内已经不能合理清晰的组织传递信息,或者表单内容的录入方式或者展示方式存在较大差异,不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。



3.组合表单

组合表单因其结构能够承载更多的信息,每一个栏目都可以承载一个独立的表单页,有效的管理信息。


4.弹窗表单

很多时候我们也会用弹窗来承载表单,好处是交互衔接流畅,不用跳页。



将产品中类似的区块做成最佳的交互模式范例,能够最大的程度的规范我们产品中的交互,这样才能真正的实现产品体验上的统一,化繁为简,让复杂的产品也能够调理清晰,上手简单容易。在面对复杂的系统级软件时,在统一组件样式的基础上还应该统一产品内的交互模式。



信息归纳突出重心


复杂的产品页面内信息往往都特别繁多,如果不做好信息归纳,用户将很难把握住重点内容,信息获取效率低下,十分影响用户的使用体验,所以信息的强弱的整理十分重要,那么什么样的信息是对用户而言重要的信息呢?


信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”,他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。


如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型,通过调研的来得用户模型是对于我们产品客户的抽象归纳,通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出,哪些内容相对不是那么重要可以弱化处理,通过对于页面内容强弱的划分,用户能够更快的获取到对自己有用的内容,尽管页面仍旧复杂,但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验,帮助用户高效的处理任务。


说在最后


复杂是产品的本来特性,本身不含褒贬,但是如果复杂不加以控制,让其发展为困惑与混乱,这对于一款产品而言绝对不是一件好事情,这样即使产品功能上很优秀,用户也无法长期忍受,一旦市场上出现替代产品,那么忍受已久的用户也将抛弃产品转向体验更好的新产品。


曾经我也是一个极简主义的追捧者,但是经历过越来越多的设计项目,我开始发现某些产品复杂性是必需的,将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂,而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素,让其在视觉界面上变得简洁干净,而是要让产品拥有内在规则、一致且能够被理解。

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

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

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

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





日历

链接

个人资料

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

存档