首页

B端设计思考总结

博博


本文主要从业务分析、交互体验和设计规范三个层面进行总结。



一、业务分析层面

与C端不同,B端产品主要围绕业务为核心展开,面向专业的人员,有固定的业务属性,我们只有将业务理解透彻,熟悉业务的运作流程,才能在B端设计过程中,输出良好清晰的设计架构,更好的解决业务问题。因此,设计师的业务分析能力在B端设计中至关重要。进行业务分析可以从以下几点着手:

1.深入透彻的理解业务场景

我们可以从多方面收集业务相关的信息,包括梳理需求文档,与业务人员沟通等,来了解行业背景、业务目标、组织架构,理清一些专业名词等。业务场景理解的越深入透彻,我们才能建立起一个系统性的逻辑思维,对我们接下来的设计脉络的梳理以及整体设计的把控是越有利的。

2.梳理业务流程

我们可以通过绘制业务流程图,将零散的业务信息通过具象的流程图清晰地呈现出来,有助于我们宏观系统的了解整个功能流程,同时也能够确保业务的标准流程都能够走通,不会出现逻辑问题及功能场景的缺失。

3.理清角色权限

B端用户因其岗位角色的不同,使其具有清晰的角色权限。比如普通成员、管理员、超级管理员,分别对应不同的权限,不同的权限背景下,其功能和业务路径也是不同的。理清角色权限,聚焦当前角色本身的任务流程,避免被无关的信息干扰,可以使我们的业务功能更加清晰,避免冗杂无用功能在不同角色间的穿插,有助于分解信息结构呈现的复杂性。

二、交互体验层面

我们知道,B端设计的核心目标为降本增效,在交互体验层面可以理解为降低认知成本,提高使用效率。而B端设计的一个显著特点就是功能、场景复杂,要达到降本增效,需要我们在交互体验层面上注意以下几点:

1.视觉降噪与引导

B端注重对页面的高效操作,因此在设计的过程中要保持简洁克制,排除过多的干扰元素,聚焦主要功能,弱化或隐藏非必要功能,保证页面信息呈现轻量化,降低用户认知负荷。

同时,通过视觉设计,比如颜色、字号、字重、合理排版等,使页面信息呈现有层次、有重点,能够合理有效的进行优先级的引导,页面信息呈现更加清晰有序,降低页面的复杂性。

2.设计一致性

设计过程中,遵守设计规范,在视觉与交互上保持一致性至关重要。

一方面保持视觉上的一致性,包括字体、颜色、间距、结构等,能够使页面信息呈现严谨有序,保证易读性;另一方面,保持整个系统交互操作的一致性,则可以大大降低用户的学习成本,同时还能够提升开发效率。

3.符合用户心智模型

B端功能交互逻辑复杂,在设计过程中,尽量保持已成标准的用户操作习惯,尊重用户已有的认知,保证内容的可理解性,可以增加用户的熟悉度,降低学习成本。

4.信息层级划分

B端的信息结构复杂,如果将信息完全平铺呈现,不仅占用页面空间,还会大大加重用户的认知负担。这就需要我们站在用户的角度,基于用户的行为路径,进行信息层级的划分。

第一,对页面信息进行梳理,明确主要信息和次要信息,必要信息和非必要信息,将次要信息和非必要信息进行隐藏、收起、删除等,可以有效聚焦核心内容,避免分散用户注意力;

第二,对需要展示的主要、必要信息进行分类归纳、信息分组,通过合理的页面排版布局,使信息结构清晰有序的呈现;

第三,注意层级步骤的拆分,让用户逐级获得信息,路径清晰,避免过多信息杂乱无序的呈现,增加用户认知负荷。

5.预测用户行为

首先,我们通过预测用户行为,在关键交互节点增加功能曝光,给予用户操作建议和提示,可以帮助用户高效流畅的完成任务目标;其次,对用户行为进行预测,主动帮助用户完成一部分操作,比如信息默认值填充等,可以提升用户体验,减轻用户的操作负担。

6.保留旧版返回入口

B端产品结构功能复杂,有使用学习的过程,如果对B端产品进行大的改版升级,会让已经熟悉旧版本且已经产生使用习惯的用户产生一些不适应感。保留旧版本返回入口,让用户慢慢习惯过渡到新版本,可以减小用户学习的压力,避免因习惯问题影响产品的正常使用,无论是对用户的接受度还是对我们改版的顺利落地都是一种不错的方式。

三、设计规范层面

B端系统庞大且复杂,建立起统一的设计组件和设计规范至关重要。

组件规范的建立:

第一,能够保证交互及视觉设计的一致性,提升设计效率和降低用户学习成本;

第二,能够提升团队的协作效率,提高设计还原度,降低对接成本;

第三,组件化设计,可复用性强,能够提升开发效率,在后期的迭代开发中,也可以进行统一的更新和应用,能够减少开发工作量,便于维护。

设计规范比较具体,且不同的项目在规范细节方面也会有所不同,下面主要整理了一些比较常涉及且可以通用的规范和组件。

1.布局

B端系统用户的主流分辨率为1920、1440和1366,我们在选择分辨率时,首先确定目标用户使用场景是否对分辨率有特殊要求,如果没有特殊的场景分辨率要求,基于上下好适配性,通常会选择1440的尺寸进行设计。

由于B端业务场景复杂,信息量比较大,通常选用24栅格系统。

考虑结构布局,根据不同的结构布局,给出动态缩放适配方案。常用的布局为:左右布局和上下布局。

左右布局:通常是将左边的导航栏固定,对右边的工作区域进行动态缩放。

上下布局:通常是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。



2.色彩

B端用色讲究简洁克制,使用户能够高效聚焦功能内容,Ant Design上面对色彩应用的描述为“色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率,影响信息的清晰传达的这些原则之上,理性的选择颜色是关键。”基于色彩使用的目的,B端用色主要分为主色、功能色和中性色。

主色:通常是品牌色,或者根据用户群体、产品定位以及使用场景来定义,主要用在主要按钮、选中状态、高亮信息、空状态等。

功能色:代表了明确的信息以及状态,如成功、错误、提醒、链接等。功能色的使用需要遵守用户对色彩的基本认知。

中性色:主要用于文字、分割线、边框、背景等。

3.文字

字体:中文常用字有:Ping Fang SC、微软雅黑、思源黑体;英文常用字体有:San Francisco UI(SF字体)、Helvetica Neue、Arial。

字号:最小字号不小于12px,常规字号大小一般为14px。辅助文字12px,正文(常规)14px,小标题16px,标题18px、主标题20px,字号的选择可根据具体情况进行定义。

字重:字重通常选用regular、medium、semibold,分别对应代码中的400、500、600。

行高:行高设置一般为字号的1.5倍左右,我们也可以采用,字号+8px做行高。

4.按钮

(1)按照基础样式分为:主按钮、次按钮、虚线按钮、文本按钮、链接按钮



(2)定义按钮的交互状态:Normal(默认状态)、Disable(禁用状态)、Hover(悬停状态)、Press(点击状态)、Loading(加载状态)



(3)对按钮进行规范的制定:包括尺寸、圆角、文字、颜色、背景等


5.表单

表单通常由输入框、选择器、单选框、多选框等组成,具有收集、校验、提交数据的功能。

(1)表单的状态:设计时,要明确规范表单的三种状态

默认状态:即用户输入信息之前的状态;

焦点状态:即用户正在输入信息时的状态;

反馈状态:即用户填写信息后的校验状态。


(2)输入顺序:表单设计时信息的输入顺序按照先易后难,先必填后选填,先公开信息后隐私信息进行,可以减轻用户填写表单的心理压力。

(3)对齐方式:对齐方式分为三种:顶部对齐、右对齐和左对齐。

对齐方式的选择,需要根据浏览效率、屏幕空间以及标签长度来实际判断,做出选择。

首先,需要明确,浏览效率上,顶对齐>右对齐>左对齐。

然后结合屏幕空间和标签长度做判断:

顶对齐:效率最高,标签长度可以更灵活一些,但垂直空间占用多;

右对齐:效率次之,文本字数不可控但又不是很多时可使用右对齐;

左对齐:浏览时间最长,效率最慢,标签字数可控或者需要用户谨慎确认信息时,可使用左对齐。

需要注意的一点是,顶对齐的标签布局之间要有合适的垂直间距,才能浏览舒适,效率更高,通常使用输入框 50%至 75%的高度作为相邻输入框的垂直间距。


(4)校验反馈:校验反馈要具有准确性和及时性。

准确性:主要体现在,要给予用户准确清晰的错误原因和解决方案,以及准确的错误位置。

及时性:表单填写时,出现错误是难免的,为了避免用户盲目填写信息或者出现大面积报错,可以进行实时的校验反馈,比如用户输入完成鼠标失焦后进行信息校验,但反馈的前提条件是不打扰到用户。

需要注意的一点是,成功或者错误等的反馈,不能仅用颜色来区分,需要加入明确的图标和文字来提示,以达到视觉无障碍设计。

(5)标签与占位符:标签和占位符都要尽量简洁,避免文字过多,给用户造成视觉负担,信息描述应该准确、直观且完整。

(6)表单分步:当表单内容多而复杂时,会让用户感到烦躁和不知所措,表单分步不仅有利于减轻用户的填写负担,缓解焦虑情绪,还能够明确了解表单填写的步骤流程。

(7)数据与默认值填充:在用户进行信息录入时,可以通过后台数据库进行匹配,自动填写已知信息,也可以设置合理的默认值,满足多数人需要的默认选择,帮助用户节省时间,快速完成表单填写。

(8)输入框宽度与高度设定:输入框的大小通常对用户输入信息的多少有着暗示作用,输入框尺寸越大,用户会认为是可以输入很多字的。因此,并不是所有输入框宽度一致,就是好的设计,需要根据实际情况,设定输入框宽度,但是也不能设定太多宽度,宽度太多会使表单视觉效果凌乱,宽度设定要合理适当。

输入框的宽度是固定的,但是高度可以根据内容进行自适应调整,来保证信息的显示完整性,给用户以良好的体验。



(9)选项便捷性:表单填写要始终遵循能不填写就不填写,能选择就不要输入的原则。当选项多于5个时,适合使用下拉框的形式进行展示。当选项内容过多,超过下拉框的高度,用户筛选比较困难时,可以考虑是否输入更快,采用输入的方式。

6.表格

B端表格的设计本着清晰易读的原则进行,设计上需要我们注意以下四点:

(1)表格宽度:表格宽度的处理需要考虑自适应问题,主要有三种方式:

a.设定表格的最小宽度,最大宽度不做限制,可以无限延伸,当表格达到最小宽度时,做极限处理;

b.根据需要设定多个等级的最小单元格宽度,当单元格达到最小宽度时,做极限处理;

c.也可以按照表格宽度的百分比,设置单元格宽度,或者固定部分无放大需求的单元格宽度,对剩余单元格按照百分比进行缩放;

(2)极限处理:极限处理主要针对最小宽度,当表格达到最小宽度时,信息展示不全的情况下,常见的处理方式有:文本信息缩略显示、文本信息换行显示、横向滚动显示。


(3)单元格高度:单元格的高度直接影响表格的高度,信息呈现量,以及阅读体验。单元格高度一般在38px~58px之间,高度太大或者太小都不利于阅读,个人实践建议高度为字体行高的2.5倍。

(4)对齐方式:为了提升浏览效率和数据的对比效率,通常采用文字左对齐,长数字右对齐的方式,空数据使用“-”填充。


总之,做好B端产品的设计,需要我们多思考、多总结,规范与标准不是一成不变的,设计过程中要与业务、产品、前端多沟通,才能够做出体验更好的产品。





作者:陈小花儿          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

设计师必看的保姆级间距控制规范!

博博

一、间距在UI中的重要性

1.什么是间距?

间距指的是界面各元素彼此相隔的距离,可以是文字自身的行距、与图片、与组件、与模块的间距,或是界面两侧的安全距离(如网页的宽度为1920px,内容区为1400px,那么安全距离为两侧各260px)等。
作为UI设计师,在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距,利用各间距之间的规律来组织界面内容,确保信息的节奏性,给用户轻松、预约的浏览体验。


2.间距的实际作用

间距可以让界面信息更有节奏,提升内容的可读性,还能通过不同的疏密程度来阐述各元素之间的关系,以吸引用户的注意力,所以在控制界面间距时,一定要有“较真”的心态,任何一次的改动与调整都要先考虑清楚为什么,能给产品和用户带来什么。要做好间距,不能仅停留在视觉层面,需要进行多方面思考。
设计师层面:规范的定义间距,不必每个元素都去考虑间距的大小,有效减少决策和思考时间,提升效率。
开发层面:开发可以按照基础间距去定义变量,长期如此,虽然不能炼成像素眼,但仅凭视觉也能看出间距的倍数。例如基础间距以8px增量,在使用8px、16px、24px、32px、48px...等,开发直接使用基础间距x1、x2、x3...,以此类推,在开发眼中,肉眼定然看不出1px的差别,但却能区分出8px的差距,不必每次都去测量,还能减少误差,高度还原设计效果。
用户层面:有节奏且具备一致性美感的界面效果,信息的有效传递变的轻松,用户体验能得到很大程度的提升。


3.间距的统一性

设计规范的目的是提升设计师的工作效率、团队之间的高效沟通、让设计风格始终保持高度统一。同理,间距也是设计规范中非常重要的一环,它作为规范中的最小单元,如果没有遵循统一,将会直接影响界面整体的版式和布局,信息的疏密程度严重影响用户的浏览。不仅是设计师,开发每次面对同样的模块都需要定义不同的间距也是崩溃的,毫无规律可循。
统一的间距能让界面的视觉效果更有节奏,设计师在设计某些相似的模块时可直接复用组件,即便是多人共同完成同个项目或更换成员,也不会因间距不统一的问题造成整个APP的风格混乱。
对开发来说,如果清楚间距的使用规律,即便有小的误差,也能自行更正,例如使用8px增量,8、16、24...按倍数规律以此类推,若出现9的间距,开发会更正为8、15则会更正为16,自行多退少补,虽然设计师需要细心、尽量不出现这种小的出入,但任何事情都没法做到绝对,统一的间距能让减少设计的出入以及与设计师之间的频繁沟通,能进一步提高开发效率。


▲ 从上图可以看出,间距不规范、信息就像一锅粥,而规范的使用间距就能将信息自动分组。

二、定义文字间距

文字是UI设计中非常重要的信息元素,虽然大多数设计师对文字的属性比较了解,但在真实设计中总会因其他信息的干扰不能合理运用,与上线后的视觉效果预期相差甚大。文字的各种间距处理看似简单,但实际上有很多因素要考虑,例如字间距、行高、段落等,下面带大家一起了解。

1.字符间距

字符间距一般都是设计工具的默认数值,无需调整。当碰到多行文字需要避开头尾的标点符号时,使用工具中的避头尾功能即可自动调整字间距,如无此功能,则需手动调整,这里并没有所谓的技巧与方法,头尾避开标点符号即可。
另外,在设计卡片、瓷片区的标题时,有时需要通过调整字符间距来提升界面的舒适度,间距数值自行定义,但相同层级的内容标题字间距一定要保持一致。


2.文字行高

行高是指上边框+下边框+字号的高度之和,这里主要针对多行文本。在平面设计中,行高没有一定的标准,如无特别需要,使用系统默认的行高即可。
在UI设计中,文字会有5~6个不同的等级,为便于用户阅读,一般会设定行高标准,尤其是新闻资讯类型的应用本身就以文字内容为主,不同的行高对文字的易读性会产生较大的影响。
文字行高一般会设定为字号的1.2~1.5倍,具体值跟字号有很大关系,文字越小,行高就越大。例如,我们可以设定字号32px为中间值(非绝对),小于或等于32的字体、行高为字号的1.5倍,大于32的为1.2倍。另外,也可以直接将所有行高固定在字号的1.5倍,不难发现,字体越大其折行的概率就越低,试想一下,如果将48px的文字折成几行,界面还能剩下多少空间?


3.文字段落

文本段落间距的重要性在移动UI界面中并不明显,更多体现在网页设计中。需要着重纠正一点的是,部分设计师在设置段间距时习惯性的多敲一次回车键,这种方式并不可取,会造成间距过大、内容脱节。
如有需要,一定要手动设置段间距,这里没有固定的数值和规律,视觉舒适即可。笔者习惯将段间距设定为字号的0.5倍,例如字号为30、段间距为15,字号为40、段间距为20,仅供参考。


三、定义元素/组件间距

定义间距其实并没有一个绝对的标准,主要取决于最小单位,例如4px、5px、6px、8px都是可以的,到底使用哪个数值还得根据产品自身定位及内容组织形式,前提是所有间距都要遵循最小单位并基于倍数形成规律。
在设计界面时,需要利用间距来建立信息层级、提升浏览体验以及表达各元素之间的关系,这就是为什么当我们打开新闻资讯、电商类应用会发现信息非常紧凑,而打开工具、社交类应用时感觉信息比较宽松。间距的基数越小、页面就越细碎;基数越大、页面的留白就越多,使用不同的基数,呈现出来的视觉效果也形态各异。
笔者在工作中通常以8px作为基数,以此衍生出8、16、24、32、48、64这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到120、160、200...其他间距数值,例如缺省页、登录页面等。不难看出,上述以8px为基数定义间距数值时,没有40、56这两个数值,难道他们不是8的倍数吗?我们以8和16做对比,后者是前者的2倍,其间距的变化尤为明显;但如果用56和64做对比,后者是前者的1.14倍,其间距的差别微乎其微。敲重点,设计师在定义间距时,需要遵循倍数规则,但同时也要为考虑界面美观及用户的浏览体验而跳出呆板的规则,当间距数值越大时,根据基数所跳跃的倍数就越大,其实设定字号也是相同的逻辑(后期详解)。


四、定义模块间距

从信息层级角度来看,等级权重越高、间距就越大,在现实世界中也是如此,一个物体周围的空间越大,就越容易吸引人们的注意力。
模块间距分为块内间距(同一模块中不同元素或信息组之间的距离)和块外间距(同一个页面中不同模块的之间的距离),为了更好的区分信息层级,块外间距一定会大于块内间距,也能保持块内信息的亲密性。
如下图所示,将装修序列步骤、官方攻略、常用服务等看作不同的信息模块,每个模块内元素的间距都会比各模块之间的间距小很多。


五、间距的使用技巧及原则

1.接近性原则

需要通过各元素的间距来体现出信息的关联性,格式塔原理中的“接近性”原则告诉我们,相互靠近的物体被认为比相互距离较远的物体更有关联性,因此,相关联的元素之间靠的越近,用户越能感知到信息的关联,同时更能了解整个界面中各模块信息的逻辑关系。


2.利用留白强调

很多时候,想让一个元素变的突出,可以用加大字号、修改色值或后加粗等方式进行强调,但这并不是突出信息的唯一方式,当所有元素都变的突出,那就等于什么都不突出了。如果想让界面中的元素不同程度的突出,留白也是一种强调信息的方式,它能引导用户将注意力集中在特定的内容上。

3.使用栅格系统

善用栅格系统(上述有详细说明),通过最小间距值进行递增,让整个界面看起来更协调。栅格系统可以让设计师在元素的亲疏关系上更快作出决策,后续不管是迭代还是更换设计成员,都能保持统计的间距规范。


4.文字行高规则

这个问题在很多团队中都是硬伤,甚至在设计验收时还被直接忽略。在主流UI设计工具中,添加文本元素时,都会有默认行高,在前面的内容中有讲过多行文本的行高为字号的1.2~1.5倍,那么单行文字的行高到底是需要手动设置还是遵循默认,笔者认为都是可以的,但一定要与开发保持一致。
行高决定着文字边缘与定界框的间距,而开发只能看到定界框与其他元素的间距。

1)默认行高
默认行高值会随着字号的变化基于一定的倍数自动增减,需要将此规律或倍数告知开发,开发将此规则植入代码方能最大化还原设计效果。另外在设计界面时,尤其是多组文字元素的上下间距,需要通过计算(文字边缘到定界框的间距+文字元素间距=实际间距)或手动测量才能达到精准状态,下图为例:

2)手动设置行高
手动设置即字号是多少、就将行高设置为多少,确保文字边缘紧贴定界框,在设计过程中调整间距时,无需计算,根据设计工具的智能提示调整即可。


5.间距值数量设定

在同一APP应用中,根据最小基数定义的间隔值数量不易过多,一般在6个左右就能满足绝大多数的设计场景。例如以8px的基数为8、16、24、32、48、64等,以5px的基数为5、10、15、25、40、60等。数量过多会导致界面不同元素、模块的间距差异化不够明显,数量太少无法满足多元素、模块使用场景,也会导致间距跨度较大。


6.明显相邻间距值

设定间距值需遵循一个原则“数值越大、递增的倍数就越大”。当相邻间距值的差异化较小时,用户很难感知到界面中信息之间的逻辑关系,我们需要根据栅格系统中间距值的增大、设置更大的区间值,让相邻间距值之间的视觉差异更加明显。


7.跳出间距的束缚

当界面中的信息较为密集、间距不足以满足信息的突出程度时,需跳出纯粹的间距规范束缚,换种方式或许更好。例如:给元素添加背景让其聚焦、使用分隔线/色块间隔、调整元素大小等,需知「此消彼长」的道理。


六、结语

如果在处理界面信息层级时,改来改去还是觉得很乱,不防从间距角度出发,或许会有不一样的收获。虽然在刚开始的时候,规范间距带来的效果甚微,但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现,所有内容统一间距规范,不管是构建一致性界面视觉效果、还是对开发和设计师来说,既能提升用户体验、还能提高团队的工作效率。
间距是否规范使用,决定着界面是否规整、信息传达是否清晰,即便如此,间距也只是解决信息层级方式的其中之一,切不可让其限制设计师的发挥和思考空间。制定设计规范有助于项目的高效运转,间距也好、色彩也罢,设计师依然需要从实际用户场景出发,通过不断的思考和经验总结,打磨出更合理、更符合项目需求的设计规范。



作者:大漠飞鹰CYSJ



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

如何有效的打造设计体系

鹤鹤

“仰望星空,脚踏实地” ,做设计需要想象空间,也要有反思和总结的能力。



什么是设计体系?
设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。



让我们来看两个毫无关联的产品的界面。



BI产品




团队协作产品

这两个案例展现了如何选用不同的模式以实现不同的目的。
对于BI产品来说,目的是让数据分析更彻底,提高数据分析效率;更好的整合数据,为企业提供报表,做为企业决策的依据;更好的帮助企业管理者管理企业,提高企业实力。
对于teambition来说,目的是轻松记录要做的事,并与伙伴实时同步进展。让彼此清楚地了解项目整体情况及事项优先级,从而完成目标。


基于产品目的我们可以看出BI产品重效率;teambition 更看重清晰以及使用是否轻松愉悦。
而产品的目的决定了它所采用的设计模式也会不同,下面我们再对照界面看下基于目的在界面设计上有什么不同。






BI产品






团队协作产品

BI数据分析类产品的布局多是小部件组成,这样做会方便用户进行多任务处理。界面设计也会相对比较密集,整个界面承载了很多信息。它使用了紧密的间距、紧凑的控件、灵活的布局和排版方式。

设计模式

设计模式的概念最早是建筑师克里斯托弗 • 亚历山大(Christopher Alexander)在他的开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。 

《建筑模式语言》里面包含了253个建筑设计模式,大的如城市和道路系统的布局,小的如家庭住宅中的照明和家具。 

类似地,我们在创建界面时,也在使用设计模式(组件)来解决常见的问题:使用标签页将内容分成几个部分,并表明哪一个选项对应于当前的页面;使用下拉菜单展示可供用户选择相关选项。



标签页



下拉组件

设计模式分为2类:



第一类:功能性模式(组件库)表现为界面上的具体模块,如按钮、标题、表单元素、菜单等。
第二类:感知性模式(视觉规范)则是描述性的样式,以可视化方式表达和呈现产品的个性,如配色、排版、图标、形状、动画等。

功能性模式有点像名词和动词,它们是界面中那些具体的、可操作的部分;而感知性模式则类似于形容词,它们是描述性的。

例如,按钮是具有明确功能的模块,它让用户能够提交某项操作。但按钮上的文字的样式,以及按钮本身的形状、背景色、填充、交互状态和过渡动画不是模块,而是样式,这些样式描述了按钮是什么样的。

共享语言

唐·诺曼在《设计心理学》一书中说过:系统映像(界面)和用户模型(用户通过与界面交互而形成的感知)之间存在着一道鸿沟。


在设计团队内部也是如此,比如“范围输入框”组件,你能想象它是一个什么样的组件吗?相信不同的人肯定有不同的心智模型,因为这个组件不是常用组件,在ant design、arco.design组件库中也找不到这个名称组件,因为它是TDesign的产物。



而每个公司都会根据自己的产品特性创造一些非常规类组件名称,这个时候就需要在所有参与产品创建的人之间共享。只有产品内部设计语言一致,才能去培养用户的心智模型,这样才能去除系统映像与用户模型之间的这道鸿沟。


例如上面这个组件,每个人都需要知道这个组件叫“范围输入框”,而不是“输入框”或者“数字输入框”。

如何衡量设计体系的有效性

例如,teambition的目的是“轻松记录要做的事,并与伙伴实时同步进展”。



于是,我们可以去看产品,设计体系在实现这一目标的过程中发挥了多大作用,以及这些设计实践的效果如何。如果视觉、交互混乱,导致无法实现上述目标,那么可以认为这套设计体系是无效的。

上面介绍了设计体系包含的内容,下面我们针对这些内容进行具体的介绍:

设计原则


有效设计原则特征

做B端的小伙伴应该都知道ant design,但不知道有多少小伙伴有认真的看过ant design的设计原则。 可能有小伙伴会问这个设计原则有什么用,我最开始也觉得没什么用,后来在参与设计体系优化过程中发现这个原则就是金字塔尖。 

例如:用户没有填写完表单,那么表单的提交按钮能不能点?是置灰好,还是按了以后再给弹窗提示。 

例如:可编辑表格,是放一个笔状icon来提示可编辑,还是采用鼠标触发时出现输入框以及指针变为文本状态。

日常工作中总会在这些细节问题上争论很久,美其名曰“打磨设计”,其实很多时候就是设计原则在团队内部没有达成共识。

为了避免出现上述问题,我们要建立一套基本的价值观和原则。在一些公司里,尤其是在处于初创期的公司里,尝试建立一套共同的准则是很难的。设计原则是无法量化的,因此定义这些原则可能需要多次迭代。

对于原则到底是什么,可能存在一些争议。有些公司的设计原则偏重于品牌,有的偏重于团队文化,有的则偏重于设计流程。 

例如,Pinterest的设计原则便偏重于品牌。



Atlassian公司没有分团队或者产品单独制定原则。


他们的目标是在客户可触及的每一点上都体现一些核心的价值观。比如“大胆”“乐观”“实用但不乏味”作为价值观的体现。
不过,尽管各处的价值观是相同的,但体现程度并不一样。


例如,官网就会较多的提现“”大胆”,但产品里面就不会,正如Atlassian公司的设计经理Kevin Coffey所说的,“没有人想要一个‘大胆的’服务支持页面”。



Atlassian 官网截图 https://www.atlassian.com/zh


Atlassian 设计体系 https://atlassian.design/

设计原则是真实而贴切的

我们以TED为例。TED的一条设计原则是“追求永恒,而不是追求潮流”。永恒这个词不光体现在TED的界面上,还体现在TED的整个品牌和设计方法上。 

这意味着他们不会为了追逐潮流而采用一项新的技术或引入一个新的设计元素。



设计原则是实用的、可操作的

例如:定义了原则为“简化”(让产品尽可能简单,简单到几乎感觉不到它的存在)。这种原则就是不实用也不可操作的。 

怎么能让团队所有人都能理解? 

消除无用的部分。每一个设计元素,无论大小,都必须有一个目的,并遵循它所属元素的目的。如果你无法解释一个元素为什么要在那里,那么它便很可能不应该在那里。这样的定义就清晰很多。

再例如:定义了设计原则为“有用”,什么是“有用”? 

从需求开始。如果你不知道用户需要什么, 就无法做出正确的事情。去做调研,去分析数据,去与用户交流,而不是做假设。

设计原则能帮我们确定优先级 

好的设计原则也能帮我们确定优先级和平衡点。 

Salesforce公司的Lightning设计体系的原则是“清晰、高效、一致、美观”。 

这些原则的优先级必须遵从以上顺序。“美观”不应该高于“高效”和“一致”,而“清晰”应该始终放在第一位。按照这种方式对原则进行排序,可以让团队在做设计决策时明确哪些东西应该优先考虑。



设计原则是能产生共鸣、容易让人记住

Atlassian和Airbnb的团队成员被问及他们的设计原则时,他们都能脱口而出,没有片刻犹豫,没有人表现出迟疑,没有人想要去翻看品牌手册里的原则内容。他们为什么能把原则记得这么牢固呢?因为他们的原则足够简单、实用、易于让人产生共鸣。

Airbnb公司的四条设计原则(“统一”“通用”“风格化的”“对话式的”)便深深地扎根于其设计过程之中。

每当设计一个新的组件时,我们都会确保它完全满足四条原则。如果我们没有这一套原则,便很难就各种问题达成一致意见。----Airbnb 首席交互设计师

怎么定义设计原则

每个团队建立其设计原则的方法都不尽相同:有的会召开几轮研讨会,有的可能会征求CEO或创意总监的意见。不过,无论采取哪种方式,都离不开下面几点:

从目的开始

TED网站的主要目的可以用一句话来表述:“尽可能广泛地传播演讲。”因此,TED网站的精神和价值观便是触及尽可能多的人群,降低使用门槛,让产品具有很高的兼容性和可访问性。这意味着优化性能和提升可访问性比添加华而不实的功能更重要,清晰的文案比大胆的设计更重要。

寻找共识

如果你仍处在定义设计原则的阶段,那么一个有效的方法便是让团队的一些人或所有人(取决于团队规模)各自回答关于设计原则的问题。例如,在他们眼里,什么样的设计对你们产品来说是好的设计?他们将如何用既实用又易于理解的五句话向团队的新成员解释设计原则?

面向正确的受众

如果搞不清楚设计原则是为谁写的,就一定会写出含糊不清的原则。有的小伙伴说我们领导就喜欢“美观”,那我们是不是把“美观”放在第一位?一定要搞清楚为谁而写。原则到模式

原则到模式

作为一个设计师,定义设计原则可能对你来说也许并不难, 但怎么把原则、品牌价值、组件相结合,怎么体现在设计模型中,这个我觉得是个挑战。

对于 TED 来说,信息的清晰比美观更重要。试图将每个演讲都 提炼成一个短句可能很难,所以有时候标题可能很长。对标题 进行截断是很容易的,但对他们来说,演讲信息的优先级是最 高的。

因此,他们没有选择相对容易的标题截断方案,而是确保他们的设计模式可以容纳长的标题。



功能性模式(组件)

功能性模式是界面中有形的构件(表单)。它们的目的是让用户能够完成某种行为(填写表单),或者激励用户完成某种行为。

功能性模式可以很简单(标签⽂字、输⼊框、按钮 ),也可以组合成更复杂的模式(搜索组件)。

标签⽂字、输⼊框、和按钮

搜索组件由标签⽂字、输⼊框和按钮组成


模式在变,行为不变

随着产品的发展,模式也在不断发展。包括风格,甚至功能和交互方式,都有变化。然而,它们的目的基本保持不变。

我们用顶部导航举例:

顶部导航是由logo、搜索定位框、文字下拉框、图标功能按钮、通知按钮构成。导航条里的每一个模块都有自身的目的:搜索定位框告诉我们怎么快速找到想要的东西,导航带领我们浏览全局,指引我们到想去的地方,而后面的的图标按钮让我快速触达。

总的来看,这些模块都有一个共同的目的:引导用户快速浏览使用。随着产品的发展,模式也在不断发展。

例如,随着产品功能越来越多,可能会在导航上面新增设置功能,让用户自己去排布常用功能。又如,我们可能会对导航进行重新布局,把导航按模块分类,采用标签按页展示。把模块下面更多功能放到子页面左侧。虽然我们不断的对模式进行迭代,希望它更好的实现各自的目的或者说更有效地激励用户使用。

在设计开始阶段就阐明模式的目的,能避免在产品发展过程中做重复性的工作。

目的决定了其他的一切:模式的结构、内容及呈现。了解模式的目的,可以帮助我们设计和构建更加稳健的模块。

如果说功能性模式是界面中的组件,那么感知性模式则更像是样式——描述组件是什么类型的,给人的感受是什么样的。下面,我们将探讨感知性模式。

感知性模式(视觉规范)

设想我们每个人各有一套房子,且每套房子都有以下这些家具:一张桌子、几把椅子、一张床和一个衣柜。

不过,虽然都有这些家具,但每套房子给人的感觉截然不同:可能是因为家具的样式、材料、颜色、纹理不同,或者是床罩的布料、装饰品的样式、房间的布局和灯光,甚至是房间里播放的音乐不 同。

上述这些属性便称作感知性模式。正是因为它们,可能你的房子就像是一个地中海风格的小窝,而我的房子就像是一个仓库。

而数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画,以及这些要素在界面中的组合和使用的具体方式。

有时,人们将这样的特性视为产品的样式,或称作皮肤,也就是最外面的一层。但要想取得成效,它们必须不仅存在于表面,还必须存在于品牌的核心,并随着产品的发展而发展。

只有这样,感知性模式才会成为让产品脱颖而出的强大力量。

感知性模式的作用

同一领域的产品,哪怕具有相似的模块,它们给人的感觉也是不一样的。感知性模式通过界面传递品牌,并让品牌被人记住。

看下面的图片,你能认出它们是什么产品吗?

这两张图里面并没有太多的信息,你只能看到排版的样式、一些图形和颜色,以及一些图标。然而那些视觉上的线索极具辨识度,所以你仍然很有可能看出它们分别属于什么产品(即钉钉和飞书)。

这些视觉元素通过有意识地反复使用,便形成了模式,这就是为什么我们可以在没有上下文的情况下认出它们。

感知性模式让系统更为连贯

在模块化的系统中,想要做到视觉上的连贯统一可能是一件很棘手的事情。模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的,因此它们可以将系统的不同部分连接起来。如果这种连接是有效的,那么用户就会感受到模块之间的统一性。

例如:飞书和腾讯的相同功能的组件感知模式是不一样的,所以两个公司设计体系不能混用。

探索感知性模式

如果说功能性模块反映的是用户需要且想要的内容,那么感知性模式关注的则是他们直观的感受或行为。

在《网站情感化设计》一书中,作者提出了一 个简单的方法,通过创建“设计角色”捕捉产品关键的个性 品质。以下是一些有助于探索感知性模式的一些技巧。

情绪板

情绪板是探索不同视觉主题的绝佳工具。可以使用数字化的方式创建情绪版(Pinterest或花瓣都是一种用于创建数字化情绪板的常用工具)。

如果你目前做的产品是需要体现:科技、质感、智能,那上图应该可以满足这些条件,你可以通过这张图与领导进行沟通达成一致,然后从中提炼出一些颜色、元素、材质,这样大方向就不会有太大问题,只需在细节上进行打磨。

样式叠片

定义好了大致的方向之后,便可以使用样式叠片来更加细致地探究多种可能性。样式叠片的概念由Samantha Warren提出,他将其定义为“由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。”

和情绪板一样,样式叠片可以为用户和产品团队提供有价值的讨论点,并呈现他们对特定设计方向的初始反应。

arco.design 首页这张图可以理解为就是样式叠片,把不同的组件样式叠片放在一起比较,有助于准确地找到设计方向。

迭代与改进

当功能模式和感知模式建立完成后,我们将它们集成到产品的过程,它们还将进行演变。

因为在真实的界面中,模块、交互、样式之间相互影响下会产生新的问题,这都是很正常的,是典型的迭代过程,这个过程会一直持续,直到设计语言最终形成。

像ant design、arco.design应该都经历过这个过程,只是我们不知道而已,要不然也不需要花费几年的时间打磨后才发布出来。

平衡品牌性与一致性:

过分关注一致性也会扼杀品牌性。矛盾在于,让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时,这样做反而会削弱品牌性——在一致性和统一性之间存在着细微的差别。

《英国公开大学》的创意总监曾说过:“当你专注于产品一致性的时候,打造产品质感的一些重要的细微之处就有可能会丢失。

发展感知性模式需要为设计师赋予打破常规的权力,鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。

小规模试验:

后期如果发现样式无法满足,我们如何将新的样式引入设计体系呢?

可以先进行一些小规模的试验是一种相当有效的做法。如果某些元素的效果很好,我们就逐渐将它们集成到其他界面中去。

例如,在学习者完成一个步骤时,纯功能性的切换按钮缺乏庆祝和成就的感觉。于是,我们用带有圆形样式、弹跳 动画以及勾号图标的按钮取代了先前的按钮。

虽然新的按钮样式受到了学习者们的好评,但它与设计体系的其他元素格格不入。后来,我们开始在网站的其他地方应用圆形图案、弹跳动画和勾号图标。如果不这样做,那么整个设计 体系给人的感觉就是割裂的。

共享设计语言

数字产品都是由团队打造的。团队里的每个人都有各自的具体目标,都有各自的截止日期。这就意味着难免会出现草率加入的模式、重复或错误的模块。

我们能确保一个产品即便有多人协作,却仍能连贯、统一吗? 只要我们团队对自己的设计体系及其运转方式有共同的理解,我们就能做到这一点。

这意味着我们遵循相同的指导原则,我们对品牌愿景的理解是一致的,我们在设计和前端架构方面有共享的方法,我们知道什么样的模式是最有效的,也知道它们的工作原理。换句话说,创建统一的设计体系需要共享设计语言。

许多伟大的建筑物(如圣家族大教堂、沙特尔大教堂、阿尔罕布拉宫)并不是由一位主建筑师在绘图板上费力地创造出来的,而是由一群人构建出来的,这群人对能将这些建筑物变为现实的设计模式有着深刻的共识。

“几组人可以通过遵循一个共同的模式语言,当场构思出他 们的大型公共建筑,就好像他们共有一个心灵。”

——克里斯托弗 • 亚历山大,《建筑的永恒之道》

我们可以用类似的想法构建数字产品。设计语言可以让人们创建出具有整体感的产品,哪怕不同的人负责不同的部分也是如此。

为模式命名

如果一个界面上的元素没有恰当的名称、团队里人尽皆知的名。那么该元素就没有在你的设计体系中成为有效的单元。一旦你给一个物件命了名,你就塑造了它的未来。

例如,如果你给的是一个表现型的名称,那么它将来就会受到样式的限制:“蓝色按钮”只能是蓝色。

例如,如果你给的是一个状态属性的名称:“幽灵按钮”,它的特点是:按钮形状的透明按钮,但有细实线的边框,常用在有色背景上。

将团队融入设计语言

仅仅完成命名还不足以建立共享的设计语言。整个团队都应该 沉浸到设计语言中去,让它无所不在。

让设计模式变得可见:

如果有条件,可以在墙上开辟一块专门展示设计体系的空间,将它称作“模 式墙”

让你的设计体系更加开放,人们会感觉你欢迎他们的加入,欢迎他们提出问题甚至做出贡献。

引用事物的名称:

所有语言的共同特点是,只有不停地使用才能让它保持活力。


它需要成为日常对话的一部分:

这就是为什么需要有意识地使用约定好的名称去引用这些模式很重要——无论这个名称听起来有多奇怪。将设计体系作为入职培训的一部分将设计体系的内容作为入职培训的一部分,新员工了解设计体系就会更加容易。当新员工入职时,他们将了解到设计指南是如何创建出来的,这样他们就可以理解为什么以及如何做出决策。在 《英国公开大学》 内部,他们创建了一个入门性质的线上课程,其中有一章专门对模式库进行了介绍,并包含了 一些小测验和小课程,这样可以帮助新员工更好的理解设计体系。

定期组织设计体系会议:

每个人都讨厌开会。但是,如果你希望每个人都跟得上设计体系的发展,那么组织召开设计体系的会议就是必要的。这是所有设计师和开发人员共同专注于设计体系的时间。一开始,可 以每周举行一次,当团队找到节奏之后,可以每两周举行一 次。团队可以利用例会时间就产品的总体模式(如图标、排版)得出一致意见。同时,这也是分享新模块并讨论其目的、 用途及可能遇到的问题的好机会。


设计体系不是一夜之间构建出来的,而是通过日常的实践逐渐形成的。

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

作者:夜鹰YEAH   来源:站酷

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

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


如何搭建B端设计规范

鹤鹤

前言

对于B端来说,可能很多UI和前端喜欢直接套用Ant Design或Element ui组件规范;因为之前企业要求并不高,但是随着市场和环境的发展,企业对B端越来越重视,这些模版太类同,显然就太烂大街了。随后字节推出Arco Design、腾讯推出企业级设计体系TDesign、有赞推出Zan Design,很多大厂都推出了适合自己产品的模版和规范,给了我们许多借鉴,能让我们快速作出一个不出错的方案。不过企业、市场的要求显然不止于此,我们的设计追求也不止于此。那么我们如何才能摆脱套模版,提高界面的精致度,提升界面的交互体验呢?

一. 设计目标


为啥要搭建设计系统?设计系统对我们开发团队中谁有指导作用?

◆ 设计系统可以保证我们产品风格的统一性,降低用户对新产品适应时间和学习成本;对UI设计输出效率有很大的提高,在团队协同中可以大大的减少无效沟通,节约时间成本

◆ 在开发团队中,设计系统对UI、交互、前端、测试等岗位的工作都有一定的指导作用


二. 设计原则

设计原则是传统智慧的沉淀与未来趋势的结合体,能够帮助我们更好的进行设计活动时代在进步,设计原则也必然需要不断的更新以适应发展新的设计原则要求界面更友好,操作更加人性化。

这里我归纳了8条原则仅供大家借鉴学习:

◆ 可用性:有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作

◆ 易用性:易用是首要考虑的因素,能一步解决的事情绝不两步

◆ 统一性:页面风格、色彩、布局等要保持全局统一,不可为了某一功能的美观而去破坏整体

◆ 亲密性:信息的关联性强,距离就要相应的缩短,让他们看起来是一个视觉单元;反之,则距离要加大,要让用户对信息的区域划分一目了然

◆ 对齐性:在界面中,将元素进行对齐,符合用户的认知,引导视觉流向,让用户更加流畅的阅读信息

◆ 对比性:对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

◆ 重复性:相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

◆ 稳定性:没有任何东西比产品的稳定重要,down机再好的产品也是徒劳。会影响到系统稳定的事情不能做



三. 框架布局

响应式布局,能够适应各种屏幕尺寸及分辨率,确保整体布局的一致性简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。一般采用栅格系统布局,常用栅格一般是16列或24列。

◆ 栅格:是对界面当中元素横向排布的一种模式,主要用于大型区块间距的排列,不适用于图标与文字间隔的小型元素。

◆ 模度:为界面布局的一致性和韵律感,统一设计到开发的布局语言,减少还原损耗,我们网格基数设为8,卡片宽度及间距为8n。常用模度:4 8 16 24 32 40 48 56 64 … 1920

◆ 布局:常用左右布局或上下布局


左右布局以1920页面布局为案例:通常B端产品左侧会有一个导航菜单,假设240px,右侧核心工作区域总宽1632px, 右偏移240px ,列数16列,列宽86px, 间隙16px, 左右边距24px; 左边导航和边距固定不变。



上下布局以1920页面布局为案例:通常左右会有一个留白区域,假设144px,中间核心区域总宽1632px, 右偏移144px ,列数16列,列宽86px, 间隙16px。



四. 设计风格


设计风格说白了就是用户最直观的感受,“商务、时尚、简约、科技感、沉稳、年轻、高端...”?

决定设计风格的因素有这些:

1. 颜色

色彩是UI设计的基石,人脑对于色彩的记忆度要高于形态;除了美学之外,色彩还是是情感和联想的创造者。通过对自然的感知和行为,我们通常对色彩定义品牌色板、功能色板、中性色板,以及衍生色。 

◆ 品牌色:是体现产品特性和传播理念最直观的视觉元素之一(例如:我们熟悉的政府蓝/党政红/淘宝橙,他们都能直观或间接的传达产品特征属性)

◆ 功能色:遵守用户对色彩的基本认知,保持一致性,不过多的自定义干扰用户的认知体验,提高用户的阅读理解力,功能色代表了明确的信息以及状态,比如正常、成功、失败、警告、链接等



◆ 中性色:主要应用在界面的文字部分、背景、边框、分割线等场景,根据使用场景,通常将中性色被定义为 3 类:文字、线条、背景

◆ 衍生色:B端产品中颜色的应用场景可能很广泛,要考虑它的延展性,按照一定规则定义完毕主色,便可以自动获得一系列完整的衍生色


2. 文字

设定统一的字体规范,无衬线黑体中宫更为开放,布白更为匀称,显示效果更为舒适,醒目利于阅读,更利于视觉信息的传达,在互联网时代后期在界面设计中字体样式还是会以无衬线体为主。


◆ 字体家族:根据系统区分Mac or Windows,如果用户使用的是Mac系统可以优先使用Mac默认字体渲染 ;如果使用的是Win,字体兼容性选择顺序(有购买版权字体的可优先考虑),例:

◆ 字号:为了提升用户的阅读体验,满足用户的可读性,更为舒适、清晰,也能保证界面的层次感(结合WCAG 2.0标准),将 PC/Web 端主字体从以前的12px改为 14px。

◆ 行高:为上下文之间提供了呼吸的空间,规范的行高,可以使得界面层次清晰、重点突出

◆ 字体颜色:WCAG 2.0 中将颜色对比等级分为 3 种,A级,AA级,AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。字体颜色数量不建议太多,根据文字主次关系定义3-4个为宜(例:主文字、辅助性文字、提示文字、轻提示/禁用文字)

◆ 字重:字重不建议太多种,2-3种为宜(例:Regular、Medium、Light)

3. 图型

图形中有图片、图标、图表,都对整体风格有一定影响,设定统一的图形使用规范,可以使视觉效果更加和谐


五. 交互


交互,即交流互动,也就是说我们自己通过我们的五觉:视觉、听觉、触觉、嗅觉、味觉来感受其他事物并和他们之间产生信息沟通的过程。在互联网中交互对象个体主要是人和机器,所谓人机互动,相互配合,共同达成某种目的。

◆ 交互方式:保持产品的统一性,同类别的交互不可有不同的操作感受。要符合大众的认知习惯,可创新但不可违背潜意识,例:wab端页面鼠标交互操作一般有下拉、上滑、按压、悬停,移动端一般左右上下滑动、下拉、上拉、双指缩放...

◆ 交互状态按钮状态变化,页面状态变化,组件状态变化...交互内容确实太大了,我个人也只接触到的也只是冰山一角,只能抛砖引玉,勾起大家思维,相互探讨学习

◆ 引导引导一般常见5 种:新手引导)、步骤引导、帮助/操作引导、新功能引导、空白页引导



六. 组件

什么是组件?组件是抽象概念,对面向过程而言是对数据和方法的简单封装。对面向对象而言是一些符合某种规范的类组合在一起就构成了组件。它可以提供某些特定的功能。组件出现的原因软件工程中重复、反复出现、普遍的、有相似的问题的出现,导致开发过程中有大量的代码需要不断的重新设计,开发周期延长,开发复杂度增加。需要岀现一种模型通过剥离掉各个问题的特性,抽取各个问题之间的共性。从而在保证代码的灵活性下极大的增加代码的可重用性。组件的岀现就是为了解决这些实际问题的。

在前端眼里,组件通常是指页面上的视图单元,可以说,UI组件是组件的子集。组件库大致可以分为这几大类:

◆ 导航:固钉、面包屑、下拉菜单、下拉导航、电梯、菜单、分页器、步骤条

◆ 数据录入:自动完成、级联选择、多选框、日期选择框、表单、输入框、数字输入框、提及、步进器、评分、下拉选择、滑动条、穿梭框、文件上传

◆ 数据展示: 头像、标题、卡片、轮播、折叠面板、表格、拖拽排序、高亮关键词、时间轴、走马灯、空状态、徽标数、树、标签、标签页、图片、气泡...

◆ 反馈: 警告提示、抽屉、全局提示、对话框、通知提醒框、气泡确认框、进度条、结果、加载中..

◆ 其他: 锚点、回到顶部、图标...

七. 总结 

设计规范是为了更高效的做设计,但不是一成不变的,它在落地使用的时或多或少都会有问题,需要我们慢慢的去反复检验它的合理性,发现不合理的及时更正,不断迭代,不断沉淀,不断优化,这样才能不断提高产品的用户体验。此次分享借鉴一些前辈的经验,主要是整理归纳学习,如有需要补充或纠正的,欢迎大家相互探讨!


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

作者:小鱼ID   来源:站酷

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

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



必看的平台设计规范

纯纯

UI 设计师必备的一项基础能力:规范能力

为了避免重复造轮子,反复掉入同样的陷阱,阅读并熟知主流平台的设计规范,是非常有帮助的。

本文内容主要介绍了iOS 、Android、Ant Design的相关规范,为的是不重复累赘描述同一个知识点,涉及到移动端和PC端,主要为了帮助基础同学学习,适当地删减了一些有难度的规范。

设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

一、设计规范的价值 

1.确保界面的统一性(界面) 

通过设计规范的约束,保证产品的色彩使用、图标图形、空间、文字、页面布局等内容保证严格的一致性。 

2.技术及品牌的延续 

规范能延续产品风格及特性,保证产品视觉及交互层面的统一,包括技术带来的变革,增强用户的认知性,不同程度得提升用户体验。

3.协同工作提高效率(设计) 

多人合作完成一个项目时,需要视觉规范。遵循设计规范,保证视觉统一、提高工作效率。

4.指导搭建框架及布局(开发) 

辅助技术层搭建框架及布局的规则更清晰明确,如按钮、颜色、字体大小等,提高开发效率,确保应用软件最终实现效果与视觉设计相符合。



二、视觉规范 

视觉设计规范是指对设计的具体技术要求,是设计工作的规则。包含了目标、功能、技术指标,以及限制条件等。

(1)视觉规范的作用 

① 视觉设计规范,是量化的设计指标,具有指导性、约束性。

视觉设计规范要确定⼀般可用性原则和审美常识下的避免犯错的方法,以及一旦出现错误后的补救方案。规范的第一个目的是减少设计过程中出错的次数,针对新手设计师、第三方团队,可以很好地做到经验传递,迅速了解上手。减少标注时间,提高前端开发质量。

② 视觉设计规范,是确定关键因素,要有有效性、复用性。

获得该设计规范针对范围内的关键点,包括设计方向和设计元素,以通过项目设计的过程,达到团队成员的更加密切的配合效果。促进多人协作,解决视觉不统⼀现象。

(2)视觉常见类别 

① 品牌规范:塑造形象以及应用的规范。主要包含了标识的标准制图,配色字体等。以及常用的搭配方式。

⼀个企业或者⼀个产品,都有相应的品牌视觉识别系统(VIS)。品牌视觉识别系统是视觉设计最好的参考基础,既然是⼀种指导体系或者说是参考,那么也相应地会有品牌的规范。

② 平台设计语言规范:平台理念、遵循规范的好处、某种应用的生态。比如 Google 和 Apple 制定的规范。针对第三方的规范,主要旨在让这些第三方的设计更兼容平台应用。通常制定了大的方向和规则。并且会提供很多基础的设计元素和插件。

③ 产品业务规范:侧重在产品设计和实现层,内容清晰并且实用,标注详尽,方便设计师们使用。更注重个性化的部分。

三、平台设计语言规范-Material Design 

https://material.io/

Material Design 规范在于统一 Google 多种平台下的一致性,代表 Google 全新的体验。 包含丰富的色彩、空间的层次、流畅的动效、多样的组件。

谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。

1.Material Design 的作用 

从设计角度:建立共同的设计语言,将产品风格、品牌及交互形式统一起来。

从使用角度:提高产品认知度,提升品牌延续性及产品体验的一致性。

2.Material Design 的特征 

(1)环境 

Material Design 是基于三维空间的设计语言。 包含光线、材质、阴影。在 Material 环境中,虚拟灯光照射整个场景。

(2)属性

Material 有自身固定不变的外在特征和内在行为逻辑 ,理解这些固有的属性有助于实际的设计项目。

• 立体性 

• 空间位置的唯一性 

• 不可穿透 

• 形状可变化 

• 沿水平方向做变化 

• 不可弯曲 

• 能与其他材质对象合并 

• 分裂,再合并 

• 可沿任何轴上移动

(3)高度和投影

Material 借鉴了现实物理世界中的物质特性,并将其运用在虚拟三维空间中的 Material 元素上, 有利于帮助用户理解信息层级,同时可以统一各应用之间的体验。

投影提供了元素深度和运动方向的重要视觉线索;在运动中,投影提供了元素移动方向及高度变化。

四、平台设计语言规范-iOS 平台设计规范 

https://developer.apple.com/desig

iOS 设计规范逝之苹果开发者官网上面的 iOS 人机交互指南(iOS Human Interface Guideline)。制作这个规范的目的是为了让所有安装到 iOS 系统的 App 都遵从某些特定的视觉特性、交互特性,以达到风格一致的使用体验。另一层面,也是便于让设计人员和开发人员能够更好地理解 iOS 系统,更合理的运用系统提供的功能和接口,更高效地制作出 App。


1.iOS 平台设计规范的三大基本设计主题 

(1)清晰 (Clarity)

在整个 iOS 系统中,每一种尺寸下的文本信息都应该是易读的,图标应该是精确易懂的,每一个装饰应该是精巧适当的,而且更加需要注重功能驱动设计的原则。利用留白、色彩、字体、图像和界面元素巧妙的突出重要内容并传达其不同的交互性。

(2)遵从(Deference)

在简洁美观的界面中清晰流畅的动画效果可以帮助用户更容易理解内容并与之进行交互,而不会对用户的操作产生干扰。内容全屏显示时,半透明或者模糊处理的方式可以提示用户更多的内容。减少使用边框,渐变及阴影可以使界面轻 量化,突出显示内容(内容优先)。

(3)深度(Depth)

不同的视觉层次和逼真生动的动画效果 可以表达界面更深层次的内容,赋予了界面活力,使用户对界面内容更容易理解。易于发现并易于触摸的元素可以提升用户体验的愉悦感,用户在操作功能时不至于迷失。当用户在浏览内容时,流畅的转场效果提供了一种纵深感。

2.iOS 平台的设计原则 

为了最大限度地提高影响力和覆盖面,在应用设计规范时应牢记以下原则:

(1)审美完整(Aesthetic Integrity)

审美完整性体现了 App 的外观和行为与其功能的整合程度。例如,一个帮助用户执行严肃任务的 App 可以通过微妙、不显眼的图形、标准控件和可预测的行为来保持他们的专注。

另一方面,沉浸式的 App,比如游戏 App等,就可以提供吸引人的外观,传递乐趣和刺激感,同时鼓励发现。

(2)一致性(Consistency)

系统提供的界面元素、众所周知的图标、标准的文本样式和统一的术语来实现熟悉的标准和范例可以使得一个 App 的设计符合一致性。

(3)易用性(Direct Manipulation)

易用性指的是用户可以理解屏幕的内容,用手势、触动屏幕等动作直接操作,并且,用户通过直接操纵,可以看到他们的行动的直接的、可见的结果。

(4)反馈(Feedback)

反馈指对用户的行动进行了确认,并且通过显示行动结果以使用户了解情况。iOS 系统的 App 要为用户的每一项操作提供可感知的反馈。如:轻触时会突出显示交互元素;进度指示器会传达长时间运行的项目的状态;动画和音效有助于阐明操作的结果。

(5)隐喻(Metaphors)

当一个 App 中的虚拟元素以及动作都是用户对熟悉事物的隐喻的时候(包括现实世界和数字世界),用户会学习的更快。比如,用户移动视图来查看更多内容;拖拽内容;切换开关、移动滑块并且直接滚动来选取值;甚至可以像翻书或杂志一样轻快的翻页。

(6)用户操控(User Control)

在整个 iOS 中,用户是掌控者,而不是 App,App可以建议一个行动方案或者警示危险后果,但 App 不能替用户做决策。

好的 App 可以在用户授权和避免不必要的结果之间找到正确的平衡。

App 可以通过交互元素,确认、取消的提醒以使得用户觉得自己在控制。

五、平台设计语言规范-Ant Design平台设计规范 

https://ant.design/index-cn

Ant Design服务于企业级产品的设计体系,常用于PC端设计规范,基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。

1.Ant Design平台的设计原则 

(1)亲密性

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。

(2)对齐

正如「格式塔学派」中的连续律(Law of Continuity)所描述的,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

(3)对比

对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

(4)重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。

(5)直接了当

正如 Alan Cooper 所言:「需要在哪里输出,就要允许在哪里输入」。这就是直接操作的原理。

eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。

(6)足不出户

能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。

(7)简化交互

根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。

(8)提供邀请

很多富交互模式(eg:「拖放」、「行内编辑」、「上下文工具」)都有一个共同问题,就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在。

邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。

(9)巧用过渡

人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

  • Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。
  • Receding: 与当前页无关的信息元素应采用适当方式移除。
  • Normal: 指那些从转场开始到结束都没有发生变化的信息元素。

(10)即时反映

「提供邀请」的强大体现在 交互之前 给出反馈,解决易发现性问题;「巧用过渡」的有用体现在它能够在 交互期间 为用户提供视觉反馈;「即时反应」的重要性体现在 交互之后 立即给出反馈。

就像「牛顿第三定律」所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

写在最后 

当然,这并不代表了解这些就能做出优秀的设计方案了,英文水平比较好的同学建议直接读原文,直接从 Material Design 和 iOS 的官网进行规范学习,效果更佳。当然如果英文水平有限,网上也有很多译版方便大家阅读。

而关于Ant Design的设计规范,可以去官网查阅更多的详细内容,但PC端的设计规范平台还有很多,字节、腾讯等设计官网都有。

记得对于规范不需要死记硬背,练多了自然能够记住。

作者:知群

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司





B端设计师·如何从0到1建立3D规范及组件库

涛涛

大家好,新年了,先祝大家新年快乐。这次分享一下自己学习道路上的小总结,仅此而已,以做纪念。希望能和大家多多交流。感谢。瑞思拜~


本次给大家带来一篇关于如何从0到1的建立一个符合自己产品调性的3D组件库,以及如何运用到日常的工作中去,并可以大幅度提升设计师产出的效率,起到降本增效的作用,还可以赋能给你的业务(尽量体现在汇报PPT中),让你在写年中年度总结的时候不会被问到,“你的价值又在哪里呢?”这种不得不回答的问题。虽然自己感觉还是做的不成熟,但是还是想分享给大家,自己也做一个沉淀,继续努力。我想在你看完这篇文章并且可以做出尝试以后,你和你的老板一定会喜欢。



一.首次升级改版

我们现在看到的无论是阿里云,华为云,腾讯云,金山云等等这些优秀的云产品设计当中,都在大量的使用3D建模渲染与2.5D风格互相搭配的运用。京东云官网也分别在4月和10月份各做了一次大的改版升级,很有幸都有参与到当中,那么就先说4月份的品牌站改版,以下的效果,用C4D的默认渲染器完全可以做到。


1.早期2.5D的积累

这次的改版是第一次从2.5D风格转向3D风格的探索性尝试。再此之前,设计师们有着3年多的2.5D风格组件库的大量积累。面向新用户以全新的面貌向用户传递科技引领,助力全球产业数字化升级,推动实体经济高质量发展的使命。

早期同学们积累的2.5D组件库。


第一次升级后的组件库。


第二次升级后的组件库。


2.组件库及规范的建立

在3D规范的产出过程中,我们严格围绕着新的设计策略「通用」和「差异」两个点相互融合,以提炼设计通用的元素,差异以规范为基础。根据不同的场景化的突出特点,3D及留白节奏的合理使用,突出3D的干脆,严谨,从而约束好网站的整体调性,让用户无论是在视觉感官体验上还是使用体验上都十分舒适。所以我们最后得到的四个关键词即为:探索、开放不封闭、共生攻坚和用户信赖。


3.建立组件库的四个维度

为了利用三维与二位的冲突感凸显视觉表现的主体信息,强化是觉得一致性。表达出通透和呼吸的开放组合。因而我们映射到了色彩,质感,字体,构成四个维度上。


/1.色彩:

在色彩上以京东红为底色,黑色代表着科技专业以及智慧未来。在规范出主色调的同时为了保持京东科技品牌调性的一致性规定了品牌的业务色及辅助色,同时也规范了使用颜色建议的搭配以及占比关系,作为设计师使用时的有效参考。


/2.字体:

在字体上,规定京东朗正体为品牌名称级产品名称字体,在楼层中的字体为方正兰亭黑系列,英文字体为思源黑体。字体行高的1.5倍行距,段落间的上下间距为字号的1倍。



/3.构成:

在构成上,用高度概括简单干脆的几何形式展现,既可以突出文字的信息层级,又渲染了整体的气氛进而增强了页面层级更加清晰的效果,强化了严谨的几何形体,让用户感受到秩序化。


/4.质感:

在质感上,三种不同的材质——金属材质、发光材质以及磨砂玻璃材质。


4.渲染及模型参数

在规范好了基础的四个关键点后,进行了渲染的尝试,最后投票确定了一套大家都认可的效果。并且产出了预设工程文件,方便设计师建立白模且通过设计评审后直接导入进行渲染。


5.动画的渲染及精灵图的制作

为了满足页面中部分鼠标移入移出的交互效果,我们渲染了动效以及精灵图的制作。关于精灵图的制作,在之前的文章当中我们有详细的说明和制作方法,这里就不再赘述。

以上就是我们的第一次3D视觉升级,这一次升级做的还是比较系统且完善的。从构建组件的价值开始到设计策略——竞品分析——实现策略——规范要求——模型——颜色——质感——构成——渲染——动画——应用场景和最后的开发上线。



第二次升级改版

那么到了10月份,为了更加贴合业务和升级产品调性。进行了第二次的改版,这一次的改版我使用了新的OC渲染器以及在原有的基础上做了完善和调整。


1.通用底座的新增

幸运的是这一次改版我就顺手了很多,还是老生常谈规定了规范说明、模型、品牌颜色、质感、构成方式等等。新增了对通用底座的规范。更加规范了使用。


2.HDR环境贴图

由于使用了OC渲染器,对环境的设定以及HDR贴图的使用变的十分重要,尝试了很多效果。


3.灯光参数

至于打光,没有做过度的布置。在环境亮度满足的情况下,只用了2盏补光,并且做了参数的说明。


4.组件配色占比

规定了每种颜色的占比参考。


5.组件渲染实例

下面看一些我们渲染出来的实例。以及我们优秀的小伙伴建模并渲染的Banner。

那么以上就是本文的全部内容,希望能对大家的日常工作有一些帮助。很多地方还不成熟,会继续沉淀把更好的东西分享给大家。瑞思拜。

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

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

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



B端设计规范

涛涛

1.准备工作


设计工具

Sketch

精不精通Sketch,就看插件用的溜不溜,推荐个网站:http://sketch.cm/

无论是学习Sketch,还是搜插件、找素材,都是Sketch使用者的优选项。

Sketch是OS X平台独占,需要下载Sketch可以到这个网站去下载。

这里推荐个Mac平台应用的下载网站,使用Mac的小伙伴可以去这里下:http://xclient.info/

我个人是很推荐使用Sketch做UI设计的,软件本身已经提供了大量的IOS和Android系统设计资源,配合各类插件,几乎无所不能。



Photoshop

相比于Sketch来说,体型胖了点,在UI设计上略逊一筹。不过因为Sketch是OS X独占,所以因为平台限制的原因,用PS设计也没有问题。

我很久没用它做UI设计了,也没啥可推荐的了。



Adobe XD

全称为Adobe Experience Design;这是一款集原型、设计和交互于一体的小清新时代风格的设计软件。虽然有人说,Adobe XD将会是Skech的劲敌。然而在windows系统当中,Adobe XD的确是产品原型设计领域最顺手的设计软件。它使用简单,界面整洁,虽然之前一直使用的是Axure 8.0,但看来,Adobe XD在界面、素材以及设计操作上的确甩了Axure好几条街,至少它成功的吸引到了我。



做好版本管理、文件归档的工作

专业水平不仅体现在设计能力之上,优秀的管理能力也是重要的职业素养。

合理规划好设计版本,进行明确的文件归档工作,有助于提高设计师的工作效率。

这里不赘述了,每个人有自己的版本管理方式,不过目标只有一个:清晰高效




2.关于手机的基础概念

这里的概念性内容不要强行记忆,理解即可,它是做移动UI设计的理论常识。


手机分辨率

手机屏幕的像素点数。比如750*1334、720*1280等等,细分还有物理分辨率和逻辑分辨率,这里不扩展讲解了,想了解自行百度吧。

手机分辨率牵扯到的就是工作时设计稿的尺寸,只要记住设计尺寸就可以了。


屏幕尺寸

手机对角线的物理尺寸,单位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

屏幕尺寸和设计其实关系不大,主要是用来计算屏幕密度的。


屏幕密度(DPI或PPI)

每英寸的像素点数。简单理解就是屏幕密度越大,画面越逼真细腻。

下面是屏幕密度的计算方法,范例是5英寸,分辨率为1920*1080的手机:



屏幕密度牵扯最多的是安卓系统,安卓手机屏幕本身的密度种类非常多,这也是导致了安卓系统需要提供多套切图的原因。(使用SVG格式图片可以解决多套切图和适配的问题,这个我们下面会提到)




3.基础设计规范——IOS系统

这是苹果的开发者官网:https://developer.apple.com/

这里有持续更新的最新设计规范和资源模板,虽然是全英文的,但并不影响阅读。

设计师应该学会从官方获得设计资料,这比其他途径获得的资料更加全面和权威。


最新系统版本:IOS 11.4.1

中文字体:苹方黑体

英文字体:San Francisco

官方系统设计模板下载:

https://developer.apple.com/design/resources/


官方系统设计字体下载:

https://developer.apple.com/fonts/


下图是截止到目前,可能还需要支持的机型和对应的设计尺寸:




设计稿尺寸

只推荐750*1334的尺寸来做设计稿,这是向上向下都最容易适配的尺寸,包括用这个尺寸去适配Android版。

除了IPhone X的比例特殊外,其他的IPhone比例几乎差不多的,比较容易适配。



Sketch设计

使用375 * 667尺寸即可,开发在Xcode里也是使用这个尺寸。

导出的@2x图适配IPhone 5/5S/5C/SE   6/6S/7/8

导出的@3x图适配Iphone 6/6S/7/8 Plus    IPhone X



Photoshop设计

画布就建成750 * 1334尺寸的即可,在这个前提之下,

导出原尺寸图片加后缀@2x,适配IPhone 5/5S/5C/SE   6/6S/7/8

导出1.5倍图片加后缀@3x,适配IPhone 6/6S/7/8 Plus    IPhone X



常用数据

下面的内容苹果官方提供的模板文档其实都有对应的数据,可以去官网下载。


字号使用建议(这个不是硬性规定,根据视觉效果酌情使用)

导航文字            34-38px

标题文字            28-34px

正文文字            26-30px

辅助文字            20-24px

Tab bar文字       20px



图标尺寸建议

APP应用图标,建议使用1024*1024尺寸去做,逐级缩小去应用到各种场景中。

SKetch已经提供了IOS和Android系统的APP尺寸图标模板,直接使用就可以了。


界面适配

程序内部的功能界面:这种界面通过写成自适应的界面可以很好的适配各种机型;如果有特殊的布局要求,也可以让开发根据特定机型去调整,不需要单独为各类机型再做设计稿。


覆盖全屏类的界面:比如闪屏、启动页、引导界面、插画页面等等,这类覆盖全屏的界面必须要单独为IPhone X的比例重新绘制或者调整设计稿。

其他的IPhone机型,遇到这种界面,整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图就可以了。


IPhone X的安全区域:IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后,中间的内容显示区域。如果你不得不使用IPhoneX的尺寸做设计稿,请一定设置好参考线,不要把内容做进这两块区域内部。

IPhone X规范:iPhone X 人机交互指南及其设计细节



简单理解APP构成

下图是IOS开发工具Xcode里的一个空白页面,图片的文字标注请仔细阅读。

本质上,开发写APP界面和设计做设计稿是一样的,只不过两者实现方法不同。



APP的构成远远要比上图写的复杂的多,我们这里使用最简单的理解方式。



设计稿的标注

根据上图我们可以理解设计稿和程序之间的关系:

设计稿里的按钮、文字、图标、列表、背景色、线条等等所有的设计元素,

在Xcode里都有对应的控件,设计元素必须使用对应控件,才能在APP的界面里显示出来。


设计稿的标注,实质上是标注的各类控件的属性以及相对于其他控件的关系:

设计稿中:

文字的自身属性:颜色、字号、字体、行间距、对齐方式、透明度;

图片的自身属性:宽高、间距、距离、透明度。

至于标注在上篇文章有详解:一款APP从设计到切图标注适配全记录,这里就不累赘了!




程序的对应控件

Label的自身属性:颜色、字号、字体、行间距、对齐方式、透明度;

Image View的自身属性:宽高、间距、距离、透明度。

实际上各类控件的属性也要比这个复杂的多,这里是最简单理解的举例说明。


如今使用本地化插件Sketch Measure,几乎不用手工标注,标注导出HTML后,扔给开发,他们想看什么属性自己点击查看就是了,所以我们这里了解下标注原理就行。

而一些线上工具的插件,比如蓝湖、墨刀、Mockplus等等,功能更加丰富,各位根据自身情况灵活运用吧。

Sketch Measure去http://Sketch.im下载





设计稿的切图

IOS目前常用的还是输出2套PNG图片。@2x、@3x的后缀,是为了在Xcode导入图片资源时,识别对应机型所用的图片。

Xcode里提供了相应的位置,相同命名图片会根据后缀填入到对应的位置。



目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。

但是对于UI设计来说,常用的图片格式就以下几种:


PNG      常用图片格式,没什么解释的,目前大部分产品还在使用此格式;

WebP    安卓的图片格式,同等质量图片下体积非常小,非常推荐给安卓使用;

SVG      矢量格式,完美解决适配问题,但也有部分缺点。

想具体了解WebP和SVG,可以查看之前的文章。



切图输出规范

前提:同一类型、位置的切图,请保证切图尺寸、规格一致,图片尺寸为偶数大小。


1.有操作功能、可点击的功能性切图:最小点击区域问题

苹果官方提供的能准确点击的最小点击区域:88 * 88px;

小于这个范围也可以点击,但是点击不灵敏,体验较差。

对于比这个范围小的可点击按钮,周围需要用透明区域填充后再输出切图。



解释下为什么用透明区域填充来扩大点击区域范围:

图标这东西,对设计师来说没区别,都是图片。

但对开发来说,可操作和不可操作的图标是两种类型的控件,图标的样式不过是传给该控件的显示图片罢了。


可操作的功能图标在Xcode对应控件是UIButton。

对控件来说,如果不在代码里明确固定控件的大小、点击区域等等各类属性,设计师传给我多大的图,这个控件就会被这张图撑到多大。


你给我一张40*40的按钮切图,如果开发什么都不做,那这个UIButton在手机界面里就被撑到40*40的大小。

我也可以在Xcode里写几行代码,固定图片的大小就是40*40,扩大UIButton这个控件的大小变成88*88,这样这个控件的点击区域也扩大了。


但是一张规范的切图就能解决的事情,为什么还要在代码里再手动加几行呢?

一个可点击按钮需要加一行代码,整个APP就可能多加上百行上千行的代码。


规范的切图也是可以提升产品开发效率的。


2.非功能性切图,比如列表图标、说明图标等,按统一规格的最小尺寸切。

这么切还可以减少一些程序因图片资源大小导致的体积大小问题。



这类切图,对应的是UIImageView控件,就是一张图片,无操作,只是占位和显示。

所以你按照相同规格,最小尺寸切就可以了。


有朋友问:一定要切正方形的吗?如果图标都是30*20的,那我统一切30*20的行不行

答案是:可以,这个没有完全的硬性规定。虽然我是设计师,但也会去写一些IOS程序。正方形规格切图就是为了方便开发,当然还是推荐你使用正方形规格来切图。

但实际开发过程中,只要保证同一位置,切图规格统一就可以。


切图输出状态:

同一按钮、元素的不同状态,要明确命名对应状态之后,分别输出对应图片。

下图示例按钮的选中状态多出现在游戏APP中,这里仅表示说明。




命名规范

不要使用中文、特殊字符,请使用英文、下划线、数字对切图命名,数字不要打头。


命名方式尽量清晰,推荐采用:种类_位置_功能_状态

示例说明:

btn_homepage_seach_normal@2x.png


开发看到就会明白:这是位于首页,处于正常状态的搜索按钮2倍切图。



4.基础设计规范——Android系统


这是Android Material Design中文版的地址

https://www.mdui.org/design/


Android的英文版地址

https://material.io/


最新系统版本:Android 9.0

中文字体:思源黑体

英文字体:Robot


Android不整理各类机型的尺寸规范了,数据零散,难以整理。所以我们从屏幕密度这里理解设计规范就可以了。


Android手机屏幕密度

上文我们提过屏幕密度的计算方式,安卓手机因为各种屏幕尺寸和分辨率,导致如果单纯按照数值计算,可能屏幕密度种类会多到让设计师崩溃。


所以为了解决这个问题,安卓手机出厂时,屏幕有自己初始的固定密度,系统会根据这些屏幕密度自行适配,下图是对应的屏幕密度表:




Android的开发单位以及设计尺寸


正因为Android手机分辨率多样,为了保证同一设计在不同屏幕密度的手机上显示效果一致,Android系统使用了下面两个单位:

dp:android开发单位,相当于比例换算单位。使用该单位,可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果;

sp:android开发文字单位,和dp类似,也是为了保证文字在不同密度的屏幕上显示相同的效果。


当屏幕密度为MDPI(160DPI)时,1dp=1px

当屏幕密度为MDPI(160DPI)时,1sp=1px


按照上面两个公式的换算,同样dp大小的图片在不同屏幕密度的手机上如下图所示,

基本可以保证图片显示效果在各类手机上相同。




设计稿尺寸

通过上面的分析,在xHDPI这个密度等级下,倍数关系为2,推荐使用720*1280尺寸做设计稿,换算方便,适配容易。


不过目前的现状是,如果公司的产品有IOS和Android两个版本,基本上设计师只会做IOS的版本,然后套用给Android,这样做也是可以的。两者的切图,在这个设计尺寸之下是可以通用的。



设计稿的标注

推荐使用dp和sp进行标注。但是呢,如果你用720*1280做设计,使用像素单位标注,现在也不会影响什么。

因为前面已经提到过IOS的标注了,这里也就不再赘述了。



设计稿的切图

理论上,对于Android系统来说,如果你想完美适配各种机型,应该为不同的屏幕密度提供不同尺寸大小的切图,而Android的开发工具也为不同的屏幕密度提供了对应的资源文件夹。


但实际上,并不需要提供上面密度表那么多套的切图,程序安装包的大小基本就是由于图片占用了太多的位置。

所以需要提供多少套图片,请和公司的开发沟通,确定你们的产品实际支持哪些屏幕密度。



图片格式

WebP和SVG

我个人是推荐现在为Android系统使用WebP格式,体积小,显示效果好;

而SVG这种矢量图片格式完美解决了Android多套切图的问题,一套切图,完美适配各种屏幕密度。



最小可点击区域

48dp:这和IOS的最小点击区域性质是一样的,都是考虑到手指点击的灵敏性的问题,设计可点击控件的时候要考虑到这一点。


更多的注意事项和IOS切图是相同的,这里不再赘述了。




5.UI设计师的职业道路

如今的移动UI设计行业已经很成熟了,针对移动UI设计的便捷工具层出不穷;移动UI设计的理论体系知识也已经渐渐完善。但这些都是外部因素,社会发展了,我们跟着一起向前适应就好了;


但对于设计师工作能力的提升,还需要有明确的方法体系,更要有清晰的职业规划!

很多设计师工作了几年,却一直在原地踏步,苦苦挣扎,甚至没有职业目标。


目前我工作5年,就从我自身的体会来分享我自己的方式,当然资深的、精英设计就别跟我较真了,我代表的是那90%还在向上努力爬的普通设计师~


工作能力,不仅仅指的是自身的专业技术水平,还包含了各种综合性能力,请务必对自己有明确的职业规划和能力发展轨迹。



工作0~2年

这个阶段对于新人来说,是一个设计能力和工作经验的快速积累过程,不夸张的说,这两年内的经验可以决定你之后的职业发展道路是否顺利。


此阶段目的:提升设计专业能力、完善理论知识、积累实际项目经验

这个阶段就别想着一专多能了,先把那个“一专”搞好就可以了,当然不是不让你学习别的知识,而是说重心应该发在提升目前的专业能力上。


提升设计能力:

一方面,通过公司的实际商业项目提升能力,这个没什么可说的;


另一方面,业余时间务必进行大量的作品练习,无论是临摹、还是重设计都可以,目的就是一个:量大 从优!

临摹请用高质量作品,临摹一堆垃圾还不如不做,临摹请务必做到99%以上的相似度,不然那不叫临摹,临摹的过程是考验软件功力、设计技法能否完美复制的过程。


重设计请使用成熟知名产品,不要重设计一堆垃圾应用,成熟产品每个界面的布局、样式、功能、逻辑都是经过深思熟虑后呈现给你的。

重设计的目的是要体会产品背后反映的设计意图,不是为了重设计而重设计。

所以重设计之前请自己思考原产品这么做的目的再动手。


完善理论知识:

没有理论体系方法的支持,在设计道路上是走不远的。

现在关于UI设计的知识网站已经很多了,当然不局限在这类专业性网站上。

人人都是PM、UI中国、25学堂等等很多这类网站都是学习理论知识的好地方。

当然,你也可以关注我嘛~(给自己打个广告,吼吼~)



工作2~3年

3年对于互联网从业者是一个坎儿,其实这是相对于职业规划来说的。

通过前两年的积累,对于UI设计本职工作已经可以胜任了,接下来的要考虑的是个人的职业发展规划了。


此阶段目的:拓展技能、明确职业目标、为进大厂做准备


拓展技能:

这个阶段可以考虑“一专多能”的多能了,作为UI设计师,可以学习的东西实在太多了,交互、动效、产品设计、开发等等。

不要求你达到那些专业从业者的地步,你要学到专业程度,还干什么UI设计啊。

目的是为了拓展自己的技能树,为自己提供更多的竞争力,这个习惯要一直保持伴随之后的工作……


明确职业目标:

设计师最怕的就是迷茫,如果说前两年因为刚入行,对行业,对自身都不完全了解,那情有可原。但工作两年后,对自身的情况再不清醒那就说不过去了。


可以从以下方面考虑:

是始终坚持在一线岗位的设计技术大牛,还是想做设计管理者,亦或者想从UI设计师转职成交互设计、产品设计等等。

工作两年已经对自身,对行业有理解了,自己的能力是否适合设计岗位,对设计的热爱是否能经久不变都可以作为参考调节了。


为进入大厂做准备:

刚工作,可能限制于能力实力问题,委身于小公司。

但是!虽然我们身在小公司,但心要在BAT CAO  TMD,

Apple、Google也不是不可以!

Skr!Skr!


这阶段可以为大厂准备一下,当然不是让你工作两年多就去面试啊,如果你的能力特别突出,就当我放屁吧~

意思是,可以以进入大厂为目标,综合性的考虑自身的缺陷并尽量弥补。


千万别以为就在小公司将就着干吧,反正拿的钱也差不多,大公司的滋味你是体会不到的。

拿同样的薪水,在小公司和大公司的感受可是完全不同的,小公司对个人的眼界、人脉、能力提升的帮助都不可能和大公司相提并论。




工作3~5年


对互联网人来说,3年一个坎,5年一个坎,都是职业规划的节点时间。

3到5年的设计师,如果你真的用心工作了,一个人可以实实在在的顶起来一个项目。

我们上面说,为进入大厂做准备。在这个阶段,可以考虑进入一些中大型企业,提升个人的综合能力、拓展人脉。

部分企业也比较喜欢要这个阶段的设计师,有工作能力,职业道路又刚开始,搞不好可以在公司培养起来。


此阶段的目的:提升综合能力、拓展人脉圈子

这时的个人专业水平其实已经不是问题,继续在工作中磨练积累就可以了;

这里需要的是打开个人在职场上的道路。

说实话,即使是互联网行业,搞技术除了要保证自身技术过硬之外,会不会发展人脉,能不能提升综合能力才是最后职业道路能不能走远走高的决定因素。


提升综合能力:

与各部门的沟通能力、对设计资源的协调能力、在公司业务上的话语能力、对项目的把控能力等等,都算综合能力,这是对内部的能力。

不要以为对设计师来说,我闷着头接需求,做设计就可以了。

这样的设计师,也许你可以踏踏实实当个接需求的小设计,但你永远也只是一个这类的设计,对于有更高更强的职业追求的人来说,没有帮助。

所以,张开嘴、迈开腿,一步一步尝试去推动自身进步吧,这个没什么技术性方法,必须要自己亲自去做。


拓展人脉圈子:

人脉对个人职业道路的帮助,远远要比专业能力的帮助要大的多,这是对外的能力。


设计师的圈子,说实话不算大。搞技术的,本身就坐办公室,而做设计的人本身性格也有一部分原因,但还是请你努力拓展自己的人脉。


对于自身的专业圈子,努力分享自己的设计经验、工作心得,总结自己的体会,发布到各类设计专业论坛上,积极的帮助别人,这都算一种拓展方式。

时间久了,就会结识非常多的设计界朋友,设计大牛也会逐渐注意到你,这些都是你职业道路上的宝贵资源。


还可以认识几个不错的猎头朋友,有好的职位,他们都会优先想到你的。


作者自述

这也是我写的最后一篇关于基础规范类文章,也算是整理一下工作到现在的基础常识类内容,以后不再写这类基础文章了。

人总要进步的,设计师还是要靠干货作品来撑腰的,对吧。

以后发的内容都是我做过的实际商业项目,我会把设计经验和工作方法融入到这些作品实例里来写,这总比我单纯讲理论知识要强。




文章来源:站酷 作者:Z085740511 

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

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

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


原来设计规范要这样理解,早知道就好了!

seo达人


@彩云Sky:Hi,我是彩云。经常在读者群里看到有人讨论,面试时被问到设计规范相关问题,不知道怎么回答才好。是不是要回答设计规范的具体尺寸,再把各种适配规则全背下来呢?今天彩云就和大家一起探讨下,到底要如何理解并运用设计规范。

 

1.什么是设计规范?

设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。

于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。通过这套标准,能减少错误发生率并提高设计质量和输出稳定性。

举个例子,我在做QQ的3D厘米秀项目的时候,一开始合作方提交的设计资源正确率很低,风格也各不相同。然后为了解决这个问题,我在项目中定义了流程标准,资源标准,cp合作标准等等。通过这些规范让多个不同设计团队能合作到一起,提升了整体协作的效率和质量,这些标准就成了设计规范的一部分。

图片

可以说,每个项目因合作方式,人员习惯,落地形式的不同,所形成的规范是有区别的。所以,设计规范更应该是针对项目来说的,除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的,回答更应该是一种思路的描述,比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升

 

2.设计规范的作用

1)遵守用户习惯,减少认知成本

Don’t make me think。大家都知道,好用得产品都是尽可能的减少用户思考,不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时,你会熟悉的去左上角找返回操作,但如果把返回操作放在右上角就会很不习惯;再比如对国内用户来说,他们习惯正确按钮用绿色,错误按钮用红色,如果你非要反过来制造所谓的差异化,用户就会感到困惑,误操作的概率也可能会大量增加。

图片

 

2)统一品牌性格

品牌性格不论是大到公司层面,还是小到具体某一个产品,都需要有一套品牌识别体系来约束,只有统一的视觉印象才能更好的让用户记住。这些品牌识别体系其实也是设计规范的一部分,在具体执行中,可以根据一些品牌核心概念规范快速做一些风格决策。

比如腾讯QQ的品牌形像风格关键词是青春、互动,叙事和干净,那么在选择画面配色的时候就可以根据关键词指导画面的选择,使得整体的画风得到统一。

图片

 

3)降低新人学习成本

这里所说的新人不单纯指刚入职场的设计新人,也包括刚参与到一个新项目的设计老手,设计规范是能够以最低的沟通成本实现快速上手。有成熟的控件资源和标杆的设计参考,就算是之前完全没做过的设计师也能搭建出一个还不错的页面。

图片

 

4)提高开发效率

有了好的设计规范,开发就能把一些常用的样式进行封装,在需要复用的场景中直接调用。这样做,一方面可以通过调用的方式减少样式代码的复制使用,提升效率的同时降低软件包体积,另一方面也可以减少不必要的工作量,方便后期维护。

图片

 

5)保证设计的一致性

有设计规范的约束,能让团队在一个既定的框架内做设计,统一大家的输出质量,从而保证设计的一致性。

 

3.怎么学习设计规范

设计规范的学习肯定不是靠死记硬背,而是要讲究方法,从我自身的经验来说,我觉得大致可以有以下2个步骤:

 

1)在新手期,多去看一些大厂的设计规范,先建立认知,不要求全部记住。把这些规范当成字典,先大致了解一遍,等真正做的时候拿不准再去查阅就好了。这里推荐几个必看的大厂设计规范官网,建议收藏。

苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网:https://material.io/design

微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent

IBM设计官网:https://www.ibm.com/design/language

Facebook设计官网:https://design.facebook.com

蚂蚁金服设计官网:https://ant.design/index-cn

图片

其实网上很多设计规范,原理之类的文章,源头都来自于这些大厂规范,想获得一手信息,最好是自己去这些网站多看看

这也就是我为什么不写具体规范数值的原因,因为网上的资料实在是太多太详细了,写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己,需要更多的主动性,这样才能提升自己的学习能力和解决问题的能力

 

2)根据自己要做的模块,有针对性的找市面上大厂的应用作为参考,直接截图标注,自己总结规律印象会更加深刻

我开始做UI的时候就这样学习的,不知道字体该用多大,间距用多大,颜色怎么用,就直接去找相类似的界面截图参考,量它们的尺寸,吸它们的颜色,然后就这样一步步的把规范经验积累起来了。

比如从QQ的动态tab页面中,我们可以借鉴到很多信息,比如列表的高度,列表左侧的图标尺寸和圆角,间隔线高度和配色,右侧的箭头大小和配色,列表文字的字号和配色,用户头像大小和结合的样式,图标与文字的间距等等。这些借鉴并非是抄袭,要你做的跟这个界面一模一样,只是参考这里面的某几个属性然后结合自己的产品综合运用,减少出错

图片

发现了吗?一个优秀的界面设计,上面的任何信息其实都可以拿来参考,就看你会不会用了。

需要强调的是,这些参考来的标准,并非是标准答案,还是要根据自己的实际项目做调整,只是至少知道一个范围,在这个范围内不大会犯错

这就像刚开始做设计时一样,去参考这些规范相当于做临摹的练习,这种临摹是需要的,临摹的过程中不断加入自己的思考,然后通过总结,变成自己的知识体系

 

4.怎样定义出设计规范

随着对设计规范理解的加深,自身设计能力的不断提高,就要开始从设计规范的使用者转变为规范的制定者了。如何制定针对项目的设计规范呢?我的经验是在项目过程中把做的好的和踩坑后的正确解法进行总结,并形成文字,积累多了就形成了规范要把每一次遇到的问题都当成是一次改进流程和规范的机会。

我自己是有随时记录的习惯,项目中一旦发现问题就会赶紧把它记录下来。有时候甚至还蛮期待出现问题的,因为出了问题才能找到优化的机会,自己也能从中找到解决问题的成就感

曾经在QQ的3D厘米秀项目中遇到过非常多的坑,然后从填坑的过程中慢慢总结出各种设计规范,去帮助项目减少错误率,提升设计质量。从最终的产出和结果来看,自身的进步是可观的,对产品的帮助也比较大,所以很值得去做。

图片

 

5.使用规范会影响设计的创意性吗?

刚掌握设计规范的时候,干活是特别舒服的一件事,因为做需求可以很快,好像拼拼组件就能完成。但稍微做久一点时间,又会觉得好像没啥进步,天天拼组件,担心影响设计的创意性,真是挺矛盾的。

其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程

 

总结

设计规范绝对不需要死记硬背,而是要充分理解并灵活使用,才能发挥它的价值。随着UI行业的不断成熟,设计工具的简单化,各种组件化资源和思维越来越普及,可以预见的是未来一般的UI界面会高度组件化,设计师单纯在界面上花费的时间可能会越来越少。

这从行业的发展来说,减少了很多体力劳动,让设计和开发有更多的时间去打磨产品细节,肯定是好事。但对设计师自身来说,省下了以前那种常规设计需求的时间后还能做些什么,设计师的价值又在哪?值得每个设计师去思考

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》原来设计规范要这样理解,早知道就好了!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


如何搭建 B 端设计规范

涛涛

在B端产品设计中,有效的设计规范有利于降低团队沟通成本,提高开发效率,并在一定程度上保证产品应用的一致性,最终推动产品设计的优化。本篇文章里,作者总结了从0开始搭建B端设计规范的注意事项与策略方法,一起来看一下。


前言

哈哈哈哈,最近事情太多了,已经快三个月没更新了,现在也忙的差不多了,咱们更新继续~~

今天给大家分享的是关于如何从零开始搭建 B 端设计规范

时间转眼即逝,掐指一算,我接触 B 端已有 4 年之久了,当年刚接触的时候,B 端的从业人员比例还是很少的。近两年 B 端越来越火热,无论从设计风格还是产品数量上,都有了很大的提升。

随着 B 端的产品越来越完善,要求设计师的专业性也要越来越强。设计规范作为基础中的基础,是大家都要熟练掌握的技能,我们不仅要会运用各种规范,还要会撰写适合产品的规范。

分享开始,敲黑板~~

一、设计规范的目标

在搭建设计系统之前,我们要想清楚设计规范的目标是什么?使用者是谁?

  • 目标:保持产品风格统一性提高设计输出效率减少无效沟通
  • 使用人群:UI交互前端测试。

如何搭建 B 端设计规范

二、设计原则

设计规范要符合基本的设计原则,否则你的规范会杂乱无章。这里我总结了 6 条原则供大家参考。

如何搭建 B 端设计规范

  1. Unity(统一性):页面风格、色彩、布局等要保持全局统一,不可为了某一功能的美观而去破坏整体性。
  2. Accessibility(易用性):易用是首要考虑的因素,能一步解决的事情绝不两步。
  3. Proximity(亲密性):如果信息的关联性强,则他们的距离就要相应的缩短,让他们看起来是一个视觉单元;反之,则距离要加大。要让用户对信息的区域划分一目了然。
  4. Alignment(对齐原则):在界面中,将元素进行对齐,即符合用户的认知,也可以引导视觉流向,让用户更加流畅地阅读信息。
  5. Contrast(对比原则):对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。
  6. Repetition(重复原则):相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

三、框架布局

这里一般采用栅格布局。说到栅格,有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍,如果之前不是很了解栅格的,拿个小本本记下来,要考~~

栅格布局能够适应各种屏幕尺寸及分辨率,确保整体布局的一致性。

栅格建议使用 1、2、3、4、6 切分布局,可以进行多种布局组合,并在整个设计中保持布局的结构的一致性。

如何搭建 B 端设计规范

页面中一般采用 24 列自适应网格,你可以使用它为各种屏幕尺寸创建灵活的布局。

如何搭建 B 端设计规范

边距 Margins、列 Columns、间隔 Gutters 分别是什么?

如何搭建 B 端设计规范

边距 Margins:边距是内容与左右边缘之间的空间。

控制台内容区的边距选用 8 的倍数为设定值,一般采用 16/24px 的居多。

如何搭建 B 端设计规范

需要注意的是:

  • 减去 margin 后,列在页面区域均分,保证每列的宽度是一致的;
  • 在区域有 margin 的情况下,划分列的区域不能包含 margin。

如何搭建 B 端设计规范

列 Columns:在电脑端列的数量是个常量(24列),每一列宽度的尺寸随屏幕大小进行自适应调整。

如何搭建 B 端设计规范

间隔 Gutters:间隔是列与列之间的空隙,控制台产品 gutter 使用固定值也要是 8 的倍数,一般采用 16/24px。

如何搭建 B 端设计规范

需要注意的是:

  • 布局的左右两边的分界线 gutter 可以为 0;
  • 必须保证 column 的宽度是一致的。

如何搭建 B 端设计规范

边距 Padding:padding 指一个元素的内容和其边界之间的空间,padding 最小值是 4px,然后其余均为 8px 的倍数,建议值为 8/16/24px。

如何搭建 B 端设计规范

内容区定宽:此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变,根据页面宽度改变 margin 的值。

如何搭建 B 端设计规范

四、设计风格

1. Color(颜色)

色彩内容主要包含基础色(如品牌色、黑色、白色)和功能色(如链接色、提醒色等)。图表配色为单独的配色体系。

在前期制定颜色规范的时候,精益求精的设定颜色,切忌颜色过多。

颜色的状态色尽量用原色进行转换,设置一个合理的变色公式,让所有颜色的状态色都根据这个公式进行转换。例:

  • Hover:H不变 S加10 B减5
  • Click:H不变 S加20 B减10
  • Disable:HSB均不变,不透明度 30%

在设计规范中,尽量把颜色的色值和 rgba 值都写出来(这里是强迫症患者要标的,因为有时候色值完全一样,但 rgba 数值略有不同,虽然效果一样,但是对于强迫症的你来说,舒服吗)。

状态色有 4 状态色:Normal、Hover、Click、Disable

在设定图表颜色的时候,要考虑不同的使用样式(柱状图、环形图、饼图等……),同时也要考虑它的延展性,比如你设定 12 个 chart 色值,在使用的时候按着顺序来使用,当超过 12 个后可以为同一个颜色。

2. Font(文字)

设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。

首先,要设置一个字体家族,保证产品界面的最优展示。

例如(仅作为展示,不是建议):font-family: “Chinese Quote”, -apple-system,BlinkMacSystemFont,“Segoe UI”,“PingFang SC”,“Hiragino Sans GB”,“Microsoft YaHei”,“Helvetica Neue”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”。

1)字号

现在主流的产品中,主体字为 12px / 14px 的居多,可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数,否则在一些显示器上会有对不齐像素的状况发生。

2)行高

行高常规的有两种规范:

  • 字号+8px;
  • 1.5倍 / 2倍 * 字号。

如何搭建 B 端设计规范

我喜欢用第一种,就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一,因为在算间距的时候,行高是要被算进去的。

3)字重

字重有很多,但是在真正的产品使用中,字重尽量不要太多种,2~3 种即可。

4)字体颜色

字体颜色数量建议在 3~4 个,不宜过多,但是每个层级之间区分要大一些。

文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。

测试对比度的网站:https://contrast-ratio.com

WCAG 2.0 中将颜色对比等级分为 3 种,A级、AA级、AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

  • A级:对比度 3:1,是普通观察者可接受的最低对比;
  • AA级:对比度 4.5:1,是普通视力损失的人可接受的最低对比度;
  • AAA级:对比度 7:1,是严重视力损失的人可接受的最低对比度。

3. icon(图标)

设定统一的图标使用规范,让视觉效果更和谐。

1)icon 大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。

同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。

单独 icon 使用的时候,尽量不要太小,最小值建议为 12px。

2)icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。

所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。

如何搭建 B 端设计规范

4. size(尺寸)

页面内布局间、模块间、模块内的各部件距离。

尺寸大部分规范中都用的是 8 的倍数,不用纠结,直接用就行。我这里有个公式:Sn = 8px * n,n为正整数。

特殊:最小支持4px。

如何搭建 B 端设计规范

五、交互

交互我分为两个方面:交互方式交互状态

1. 交互方式

交互方式指的是对某一个操作所进行的具体行为,比如刷新方式有下拉上滑按压点击等方式,这就是所谓的交互方式。交互方式有很多种,没有最优,只有最适合。

交互方式要保持产品的统一性,同类别的交互不可有不同的操作感受。同时交互方式要符合大众的认知习惯,可创新但不可违背潜意识。

随着时代的发展,交互方式也在不断的更新。比如最开始的手机是按键式的,随着大众对屏幕大小的需求不断提升,到了现在的全面屏手机,如果这个时候你再去做当年火爆的按键手机,那你就只能跟市场说拜拜。

总结交互方式的几个关键点:创新统一紧跟趋势

2. 交互状态

一个完整的产品生态是不会遗漏每一个交互状态的。

同样是做售票的软件,为什么高铁管家就比 12306 做的好呢?是因为高铁管家把很多交互状态友好地做了展现反馈,而不是冰冷的数据吞吐。

同类产品中,每个都有自己独特的交互状态,可能你一直用某个软件的原因只是有个功能的交互状态打动了你,从此你就深深爱上了它。

现在工作中,我们都在讲人效,拼命地去更新迭代,去研发新功能,开拓新产品,往往会忽略交互状态这个点,因为很多时候付出收获比是很低的,但是真正好的产品,这部分是不可或缺的。

交互真的太大了,单独写一篇文章都写不完,这篇我只能抛砖引玉,勾起你的思维,如果有任何要探讨的,欢迎来叨扰。

六、引导

引导分为 5 种:Newbie guide(新手引导)Steps guide(步骤引导)Help / Operation guide(帮助/操作引导)New function guide(新功能引导)Blank guide(空白页引导)

1. Newbie guide(新手引导)

新手引导是针对新用户的,首次进入产品的时候,我们要着重地把自己产品的亮点以及操作快速的介绍给新用户,让他用最短的时候上手我们的产品。

新手引导要言简意赅,并且如果非必要的话,尽量给用户一个可以直接关闭的按钮,让用户有选择权。我就非常讨厌有一些产品的新手引导,必须走完全部流程后才能关闭,恶心得不行。

如何搭建 B 端设计规范

2. Steps guide(步骤引导)

步骤引导一般用在有固定操作步骤的场景下,指引用户一步一步地完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。

如何搭建 B 端设计规范

3. Help/Operation guide(帮助/操作引导)

帮助/操作引导的展现方式是比较丰富多彩的,可以是提示语、辅助性文本、tooltips 等等,它的作用就是辅助用户去了解并且知道如何操作这个功能。

这个也是在产品中使用频率最高的,运用好它,可以让你的产品事半功倍。

4. New function guide(新功能引导)

它就是常用在新功能上线后,用户第一次登陆相关页面后做的一些引导,目的是为了告诉用户我们做了新东西,你快来试试吧。

如何搭建 B 端设计规范

5. Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。

比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。

如何搭建 B 端设计规范

七、组件

组件是设计系统里面最为庞大的东西。组件可以分为了 5 类:

  1. Navigation(导航);
  2. Data Entry(数据录入);
  3. Data Display(数据显示);
  4. Feedback(反馈);
  5. Other(其它)。

基本上这几类已经覆盖了多数的组件,下面我把我自己整理的这几类分别都包含哪些组件、以及组件的简单介绍给列出来,快来保存吧。

1. Navigation(导航)

  • Affix(固钉):将页面元素钉在可视范围。
  • Breadcrumb(面包屑):显示当前页面在系统层级结构中的位置,并能向上返回。
  • Menu(导航菜单):为页面和功能提供导航的菜单列表。
  • Pagination(分页):采用分页的形式分隔长列表,每次只加载一个页面。
  • Steps(步骤条):引导用户按照流程完成任务的导航条。

2. Data Entry(数据录入)

  • Checkbox(多选框):可选择多个。
  • Radio(单选框):只可选择一个。
  • Switch(开关):开关选择器。
  • Form(表单):具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
  • Input(输入框):通过鼠标或键盘输入内容,是最基础的表单域的包装。
  • Select(选择器):下拉选择器。
  • Skeleton(加载占位图):在需要等待加载内容的位置提供一个占位图。
  • Time selectors and sliders(日期时间选择过滤器):当用户需要输入一个时间或日期,可以点击标准输入框,弹出时间面板进行选择。
  • Transfer(穿梭框):双栏穿梭选择框。
  • Upload(上传):文件选择上传和拖拽上传控件。

3. Data Display(数据显示)

  • Badge(微标):图标右上角的圆形徽标数字。
  • Card(卡片):通用卡片容器。
  • Collapse(折叠面板):可以折叠/展开的内容区域。
  • Popover(气泡卡片):点击/鼠标移入元素,弹出气泡式的卡片浮层(可操作)。
  • Tabs(标签页):选项卡切换组件。
  • Table(表格):展示行列数据。
  • Tag(标签):进行标记和分类的小标签。
  • Timeline(时间轴):垂直展示的时间流信息。
  • Tooltip(文字提示):简单的文字提示气泡框。
  • Tree(树形控件):文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

4. Feedback(反馈)

  • Alert(警告提示):警告提示,展现需要关注的信息。
  • Notification(通知提示框):全局展示通知提醒信息。
  • Drawer(抽屉):抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。
  • Modal(对话框):模态对话框和非模态对话框。
  • Progress(进度):展示操作的当前进度。
  • Spin(加载):用于页面和区块的加载中状态。

5. Other(其它)

  • Button(按钮):按钮用于开始一个即时操作。
  • chart(图表):图标数据显示。
  • Copyright(版权):版权信息。
  • Divider(分割线):区隔内容的分割线。
  • logo(标志):logo 的使用。
  • LocaleProvider(国际化):为组件内建文案提供统一的国际化支持。
  • Text link(文字链):点击有链接跳转的文字。
  • Scrollbar(滚动条):在特定界面区域内进行内容的更多展示。

以上组件可根据自己的产品进行增删,把组件规范设计完成后,整个设计规范就完成了 90% 以上,可以算一个比较完整的设计规范了。

八、总结

每一个设计规范都是有灵魂的,规范是为了更好地做设计,而不是限制设计师双手的枷锁。

设计规范也不是一成不变的,它在落地使用的时候多少都会有问题,需要慢慢地去反复检验规范的合理性,发现不合理的及时更正。


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

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


文章来源:人人都是产品经理   作者:友设青年

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

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



利用原子设计体系构建自己的组件库设计语言

涛涛

原子设计理论并不是什么高大上的规则。


随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,它最早就是为了让网页设计师更容易理解网页的构成,后来才延伸到UI设计当中。


简单来说,当公司的业务产品逐渐扩大时,我们需要制定一套完整的设计系统,提升设计和开发的协作效率,统一所有设计师的输出物。 开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。因此,原子设计理论的出现就是为了帮助我们去搭建设计系统,这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。



  • 原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质,并且它们一旦被分解就会失去其意义。




  • 分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质,并且相较于原子来说,更具实际意义和可操作



  • 有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。



原子设计使我们可以将我们的界面UI细分为原子元素,并通过这些元素组合在一起形成最终的界面。

原子作为整个理论最基础的元素,当我们改变其中的原子时,整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙,当我们改变其中一个元素时,其他所有包含这个元素的页面都会发生变化,可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理,这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。


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

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



文章来源:站酷   作者:请叫我海锅锅

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

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


日历

链接

个人资料

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

存档