• 浅谈B端全局设计

    来我们公司之前我对C端接触比较多,来之后工作重心一下子转移到了B端,所以找了很多B端方面的文章和视频,下面让我们一起来学习一下吧!

    首先,我们要明确一点,B端是什么?

    B 端是为企业提供服务,帮助企业实现商业目的,往往是为了解决办公或经营过程中的问题,承担着为企业提高收入、提升效率、降低成本、控制风险的重任。(我们公司的TiOps混合云管理平台也是一样的目的)

    全局设计

    在设计之前,我们要首先确定产品界面的风格,在保持产品的统一性情况下,还要控制不同的变化风格,包括以下4个的基本要素

    l  栅格系统

    l  字体

    l  颜色

    l  图标

     

    栅格系统

    栅格系统是对界面元素进行横向排布时需要遵循的模式,不适用于类似图标与文字间隔的小型元素安排,而是用于大型区块间距的安排,通过正确使用网格,有助于提高设计效率和设计质量。

    空间布局是体系化视觉设计的起点,UI 界面的布局空间要基于「动态、体系化」的角度出发展开。在中后台视觉体系中定义布局系统,基于以下4个方面:

    l  统一的画板尺寸

    l  网格单位

    l  建立栅格

    l  布局规则

    1、统一的画板尺寸

    据统计,目前 PC 端用户屏幕分辨率占比排名前三的1920*1080、1366*768、1440*900,以 1440 来设计的话,向上适配或者向下适配误差会比较小。

     

    2、网格单位

    一般常用模度表可以选择4px或者8px,一般用8px会比较多

     

    3、建立栅格

    1440×900(以我们公司产品为例)

     

    4、布局规则

    栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现,以满足 2,3,4,5,6 分比布局等多种情况。固定宽度 Column,将间隔 Gutter 进行动态缩放。

    需要栅格化处理的内容的总宽度=23列(1列=1宽度Column+1间隔Gutter)+1宽度Column=24宽度Column+23间隔Gutter。

    对于 B 端后台类产品,功能比较复杂,所以在布局上比较讲究如下几点:

    字体

    字体是文字信息的载体,优秀的阅读体验是用户高效、愉快地使用产品的前提。

    l  字体选用

    l  字体家族

    l  字阶与行高

    l  字重

    l  字体颜色

    l  字体行高的使用场景

     

    1、字体选用

    普遍使用平台默认字体

    2、字体家族

    3、字阶与行高

    普遍使用平台默认字体

    4、字重

    字体字重分别有ExtraLight、Light、 Normal、Regular、Medium、Bold和Heavy,当然它还有一个数字名称:100、200、300、400、500、600……

    我们可以通过字重也就是字体的粗细来改变页面层级。因为字体越粗,越容易吸引读者的视线,整个信息层级会发生较大变化。而粗字体通常表示我们的标题,也就意味着标题是概括下面的所有信息内容。因此通过良好的字重管理,能够帮助我们区分信息层级。

     

    5、字体颜色

    6、字体和行高的使用场景

    行高和字号是一对绑定的关系。

    行高一般是字体的1.5-2倍,因为行高的出现,他代表着文字有着更为统一的高度,并且在实际间距的测量中,必须把行高算为字体内部的元素当中。

    颜色

    颜色是用户感知界面内容及产品特性的直观方式和媒介,合理且和谐的颜色搭配能够提高界面的可用性,为我们的界面带来统一且可识别的一致性,提升用户体验和感知。

    l  产品级色彩体系应用

    l  基础色板

     

    1、产品级色彩体系应用

    design token

    2、基础色版

    l  可以从设计作品收集色彩

    打开dribbble,每一幅作品预览页左下角都有一份自动生成的配色板,将调色板保存到本地,为自己在创作时提供灵感。在ps里的操作步骤是:点击“窗口—色板”,然后在色板的属性面板右上角打开“导入色板”,载入刚下载的色彩文件即可。

    l  自定义色块叠加

    该方法稍微复杂一点,示例步骤如下:第一步绘制一个正方形做底板,填充一个颜色#5354F0;第二步分别在正方形的上和下1/3处叠加20%的白色和黑色;第三步分别在正方形中和右1/3处叠加40%、80%的紫红色#DF56FA;最后改变紫红色图层的混合模式为叠加即可得到一组蓝紫色色调的调色板。

    l  使用配色网站

    https://color.adobe.com/

    https://colors.eva.design/

    https://colorhunt.co/

    https://grabient.com/

    总结

    对于新手设计师来说,颜色越少越容易把控画面。色彩层级越精简,就越容易达到整体色彩平衡,掌握好色彩的功能划分必然会让你的配色过程保持思路清晰从而提高效率。

    图标

    具有指代意义的图形符号,高度浓缩并快捷传达信息、便于记忆;替代文字或者辅助文字来指导用户的行为,直观、易懂易记

    l  通用规则

    l  类型

    l  关键线及栅格

    l  图标的keyline

    l  大小尺寸

    l  交互状态

     

    1、通用规则

    为避免尺寸多样性,通常选择48px盒子作为基本尺寸,描边为4px,圆角也是4px.

    2、类型

    图标类型基本上分为三类:线性、面性、线面结合

    细分的话就很多了,例如:彩色、磨砂玻璃、质感、微质感、渐变、线面错位、插画卡通、写实、拟物、3D质感、等距、双色调混合模式叠加等等

    3、关键线及栅格

    以48px为例,容错安全区为44px

    4、图标的keyline

    5、交互状态

    今天的分享就到此结束了,让我们下次再见!

    «
    »
以专业成就每一位客户,让企业IT只为效果和安全买单

以专业成就每一位客户,让企业IT只为效果和安全买单