首页

如何搭建 B 端设计规范

ui设计分享达人

一  设计规范的目标


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

    ·  目标:保持产品风格统一性提高设计输出效率减少无效沟通

    ·  使用人群:UI交互前端测试。



二  设计原则


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


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

    ·  Accessibility(易用性):易用是首要考虑的因素,能一步解决的事情绝不两步。

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

    ·  Alignment(对齐原则):在界面中,将元素进行对齐,即符合用户的认知,也可以引导视觉流向,让用户更加流畅的阅读信息。

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

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



三  框架布局


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


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


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


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


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


    ·  边距 Margins:边距是内容与左右边缘之间的空间。控制台内容区的边距选用 8 的倍数为设定值,一般采用 16/24px 的居多。

    需要注意的是:

        ··  减去 margin 后,列在页面区域均分,保证每列的宽度是一致的;

        ··  在区域有 margin 的情况下,划分列的区域不能包含 margin。


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


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


需要注意的是:

        ··  布局的左右两边的分界线 gutter 可以为 0;

        ··  必须保证 column 的宽度是一致的。


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


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



四  设计风格


4.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 个后可以为同一个颜色。



4.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";


4.2.1  字号

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


4.2.2  行高

行高常规的有两种规范:

    ·  字号+8px;

    ·  1.5倍 / 2倍 * 字号。


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


4.2.3  字重

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


4.2.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,是严重视力损失的人可接受的最低对比度。



4.3  icon(图标)

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


4.3.1  Icon 大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。


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


4.3.2  Icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。


4.4  size(尺寸)

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


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


五  交互


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


5.1  交互方式

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


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


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


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


5.2  交互状态

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


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


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


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


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


六  引导


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


6.1  Newbie guide(新手引导)

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


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


6.2  Steps guide(步骤引导)

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


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

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


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


6.4  New function guide(新功能引导)

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


6.5  Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。



七  组件


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

    ·  Navigation(导航)

    ·  Data Entry(数据录入)

    ·  Data Display(数据显示)

    ·  Feedback(反馈)

    ·  Other(其它)


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


7.1  Navigation(导航)

    ·  Affix(固钉):将页面元素钉在可视范围。

    ·  Breadcrumb(面包屑):显示当前页面在系统层级结构中的位置,并能向上返回。

    ·  Menu(导航菜单):为页面和功能提供导航的菜单列表。

    ·  Pagination(分页):采用分页的形式分隔长列表,每次只加载一个页面。

    ·  Steps(步骤条):引导用户按照流程完成任务的导航条。


7.2  Data Entry(数据录入)

    ·  Checkbox(多选框):可选择多个。

    ·  Radio(单选框):只可选择一个。

    ·  Switch(开关):开关选择器。

    ·  Form(表单):具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

    ·  Input(输入框):通过鼠标或键盘输入内容,是最基础的表单域的包装。

    ·  Select(选择器):下拉选择器。

    ·  Skeleton(加载占位图):在需要等待加载内容的位置提供一个占位图。

    ·  Time selectors and sliders(日期时间选择过滤器):当用户需要输入一个时间或日期,可以点击标准输入框,弹出时间面板进行选择。

    ·  Transfer(穿梭框):双栏穿梭选择框。

    ·  Upload(上传):文件选择上传和拖拽上传控件。


7.3  Data Display(数据显示)

    ·  Badge(微标):图标右上角的圆形徽标数字。

    ·  Card(卡片):通用卡片容器。

    ·  Collapse(折叠面板):可以折叠/展开的内容区域。

    ·  Popover(气泡卡片):点击/鼠标移入元素,弹出气泡式的卡片浮层(可操作)。

    ·  Tabs(标签页):选项卡切换组件。

    ·  Table(表格):展示行列数据。

    ·  Tag(标签):进行标记和分类的小标签。

    ·  Timeline(时间轴):垂直展示的时间流信息。

    ·  Tooltip(文字提示):简单的文字提示气泡框。

    ·  Tree(树形控件):文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。


7.4  Feedback(反馈)

    ·  Alert(警告提示):警告提示,展现需要关注的信息。

    ·  Notification(通知提示框):全局展示通知提醒信息。

    ·  Drawer(抽屉):抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

    ·  Modal(对话框):模态对话框和非模态对话框。

    ·  Progress(进度):展示操作的当前进度。

    ·  Spin(加载):用于页面和区块的加载中状态。


7.5  Other(其它)

    ·  Button(按钮):按钮用于开始一个即时操作。

    ·  chart(图表):图标数据显示。

    ·  Copyright(版权):版权信息。

    ·  Divider(分割线):区隔内容的分割线。

    ·  logo(标志):logo 的使用。

    ·  LocaleProvider(国际化):为组件内建文案提供统一的国际化支持。

    ·  Text link(文字链):点击有链接跳转的文字。

    ·  Scrollbar(滚动条):在特定界面区域内进行内容的更多展示。


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



总结


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


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

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

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

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

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





B端查询列表剖析和实战

ui设计分享达人

什么是查询列表?


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


简介:

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

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


设计目标:

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


设计原则:

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

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


常规布局顺序:

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

undefined


模板页面示例:


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



查询列表有什么?


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


一、数据过滤:

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


1、条件筛选:

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

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


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

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

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


2、搜索查询:

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

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

undefined


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

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

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


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


二、数据统计:

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

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

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

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


三、数据列表:

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

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


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

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


常规内容构成:

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

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

Table-Content:数据内容、按钮

Footer:多选数量,分页器


四、批量处理:

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

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



如何设计查询列表?


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


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


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


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


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

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

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

4、等等···


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


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

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

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


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


调研一

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

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


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


调研二

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

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

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


竞品分析:纷享销客CRM

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



竞品分析:广联达

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

undefined


总结一下:

undefined


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


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


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

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

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

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

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

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

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


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


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


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


Ending


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

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

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

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

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


HMI 设计规范

资深UI设计者

前言:

入行做车载 HMI 已有 2 年余久,也该沉淀输出一些行业内容,HMI 行业还是一片蓝海,很多设计师都不敢轻易的进入这个新型的行业,觉得有难度、门槛、视觉要求高、这篇文章先带你入行,文章还是以一些 HMI 基础知识作为讲解,在设计规范方面的内容,我会添加很多干货结合实际案例讲解。

先给大家打一个预防针(规范是用来打破的,本篇文章只做为参考价值)

1. 设计规范包含什么内容

设计规范包含视觉规范和交互规范,本章节先说一下视觉规范,车载交互内容会安排在后续写作中…

2. 视觉规范:

车载端设计和移动端、web 端设计显示差别还是蛮大的,最主要的差异就在于布局的不同,接下来我们从文字、颜色、布局、圆角、图标等角度讲解,PS:偶尔还会穿插一些工作心得的内容。

文字规范:

文字是 UI 界面设计中重要的组成元素,对于文字的使用是检验设计师基础功底的时候,用得好坏会直接影响到用户在使用产品的过程中的一个体验,文字的使用从这几个纬度出发:字体选择、字号大小、颜色、字重、行高.

1. 字体选择

(我要做一个良心的博主,让你们避免侵权问题,别再傻乎乎的犯字体侵权的错误了)

在做车机系统设计的时候,需要选定该款车机中文、英文、数字或多国语言需要用什么字体。如果在乙方公司呢,客户会指定给到你字体包,插播一段小插曲(职场心得:当客户选定字体后,如果该款字体是付费字体,你得先和客户确认是否得到使用许可,避免后续官司纠纷)在甲方爸爸工作的同学一般会遇到两种情况:

  • 公司已明确字体(请专业字体设计师设计一套)
  • 用常规设计的字体,建议使用中文字体:思源黑体、英文/数字:Roboto。如果有做海外项目的,对于 Roboto 未涵盖的语言,建议使用 Noto Sans 字体。Noto Sans 源自类似于 Roboto 的度量标准,旨在实现视觉上和谐的国际化。

这边肯定会有人问为什么不能用苹果字体呢?它不是免费字体嘛?

普及一下:首先该车机系统属于商业用途,未得到许可使用,这就是侵权,在 app store 上 发布的 app 是可以免费使用的,因为这是在苹果生态下使用,所以不属于侵权。

2. 字号大小与字阶

车机端的字号大小的制定也是要循规蹈矩

字号肯定要远大于移动端和 web 端,为了确保文字信息的扫描性,结合了:基于 IDX & 同济 (2020) 百度 Apollo 中控视觉基础研究项目,设置清晰的文字阶级参数,还有谷歌 Android Automotive OS 研究,以下是用字的规范(标红色区域是他们之间的区别)

上万字干货!超全面的 HMI 设计规范

可参考谷歌:字体大小的遵循 4px 倍数大小增量

我们在做项目的时候,规定的字体大小维持在 4px,这样有助于保持一致性和视觉层次感

用字的注意事项:

字体大小控制在 20px,这个要谨慎使用,一般都是使用在小标签辅助类的文字上,最小的正文字号为 24px

设定文字规范有两个好处:

  • 文字样式复用,不管对于设计师还是开发同学来说,都是极大提高工作效率的一件事情
  • 对于界面设计来说,有规可循,避免设计时降低整体的视觉感
3. 字体用色规则
  • 文字与背景颜色对比度要遵循 WCAG 的标准,需要考虑到无障碍设计需求,因此保持在 4.5:1 – 7:1 对比度,确保文字清晰易读
  • 将注意力集中到最重要的区域内容
  • 文本元素之间传达视觉层次感
4. 字体字重

字重是指一种字体的粗细样式,下面展示字重的种类:

上万字干货!超全面的 HMI 设计规范

上实际案列讲解:

谨慎使用中等字体粗细 ,尽量别用最粗的字体,这样会使得页面感觉差别很大,过度的不是那么自然,没有了细腻、轻盈的感觉。所以在制定字体规范的时候就尽量将 Bold 字重去掉,如果你想通过加粗字体的方式来和下面信息作为区分,请选择 Medium 字重(根据实际项目需求来定,我的规范只做参考价值)

上万字干货!超全面的 HMI 设计规范

5. 字体行高

为什么要加这一 pa,因为这个问题一直有小伙伴问到我,我就一次性解决了,文字模块需要增加安全距离,这块比较复杂。不行我后期录一期视频讲解,下文也有详细的讲解。

字体文本的高度一直困扰着设计师,我该用什么方式去对接开发?在设计过程我们是否可以使用文字字号的高度进行对齐方式,而不是使用文字区域的行高?NO 肯定是不可以的。

上万字干货!超全面的 HMI 设计规范

微信朋友圈主页作为案列:

文本的行高肯定是要大于字号的,个人动态的字号为 16px(在@1x 设计稿中)如果是多行文本的时候,微信是手动调整了文本行高(正常 Line:22px 微信实际 Line:20px),当行高为 20px 的时候,需要将文本上移 3px 才能使得图片和文本视觉在一条线上面,如果按照这个进行开发的话,开发小哥需要在 CSS 属性过程中注意图片和文本之间的实际差异,这种左右高度不一致的设计,会直接导致在开发布局过程中变得更加繁琐。

上万字干货!超全面的 HMI 设计规范

最后的结论:按照文本的行高来对接开发

普及一下小知识点:车载段落的行高一般为字号的 140%-180%的视觉呈现,提供舒适的阅读环境给到用户(取整数)

下面是一些专业性的知识 了解一下:

在设计字体过程中,字体设计师一般都会给字体预留安全距离,让字体展示更加稳定。

上万字干货!超全面的 HMI 设计规范

我们在做设计的时候,将字号设置为 30px,但实际字体的空间是需要包含上下部分的安全距离,最终实际高度就变成了 42px(Font:pingfang) 穿插一个小干货:在不同字体下相同字号,行高(Line height1)是不同的,Ant Design 的 30 号字,行高为 38px (详见配图计算方式)

上万字干货!超全面的 HMI 设计规范

颜色规范:

1. 使用场景

场景:白天阳光暴晒(阳光强度有很多档位早、中、下午) 、 梅雨季节阴雨连天 、夜晚模式、地下隧道等。

驾驶汽车在室外不确定因素会比较的多,光线强度的干扰尤其重要,照明会根据一天中的时间,天气,窗户的色调等等而有很大不同。当你设计的车载应用程序在现实世界中使用时,设计时在计算机上看到的颜色并不总是相同。考虑颜色亮度如何影响驾驶条件,以及低对比度的颜色在阳光直射下如何被洗掉。始终在多种光照条件下预览您的应用以查看颜色的显示方式。如有必要,请进行调整以便在大多数案例中提供最佳的观看体验。

上万字干货!超全面的 HMI 设计规范

最初车机厂商系统大多数都是偏爱深色背景,具有代表性的两家系统谷歌的 Android Auto 系统和苹果 Carplay 系统,我在做项目最初也是沿用了深色系。

上万字干货!超全面的 HMI 设计规范

2. 色彩中的“TF BOY”组合

我想用一句苹果的官方话说:“配色可以提供交互性,提供视觉连贯性,并且对界面赋予生命力。”这句话总结得真的非常到位。集中注意力认真听,重点来了,UI设计中颜色的使用法则,在一个页面设计中需要讲究 60-30-10法则, 在60%+30%+10%的比例下创造一种平衡感,是为了视角能够从一个焦点舒适地过渡到下一个点,避免给驾驶中的我们产生视觉落差很大的感觉。

一个项目车载系统的色彩规范,包括了品牌色、语义色、中性色。

品牌色:又称为 “强调色“ ,通常一个车载系统只有一个品牌色,也是出现频率较高的一种颜色,强调色一般使用场景为:tab 的切换选中,按钮开启状态、音乐在播放中的音符小动画等等 (拿我练习稿讲解)

上万字干货!超全面的 HMI 设计规范

语义色:语义色需要在 UI 界面中承载着具有准确的信息传达,在复杂场景里颜色的倾向性应十分明显,减少用户的理解成本和理解时间,给出行体验者带来良好的驾驶体验。

根据交通标志的定义,红色表示禁止、停止、危险,那么用户需要在第一时间识别出这种信息,黄色为警示或不良结果等,绿色则代表通行、成功,上诉说的颜色为状态色。下面要讲一下功能色:说到链接色,大家第一时间肯定想到的是蓝色。

上万字干货!超全面的 HMI 设计规范

中性色:主要用于除文字外,还被运用到背景色、分割线、置灰填充、边框、等场景中 (注:根据背景色的变化,系统其余颜色也随之而变,这是两套用色规范切换)。

上万字干货!超全面的 HMI 设计规范

3. 如何制作 HMI 色彩规范?

尽量使用较少的颜色,颜色饱和度不要过高,避免对驾驶的视觉干扰,吸引驾驶者的注意力,让老司机翻了车。

上万字干货!超全面的 HMI 设计规范

避免让交互性元素和非交互性元素使用相同的配色(如果交互式和非交互式元素具有相同的颜色,则很难知道在何处点击)。

上万字干货!超全面的 HMI 设计规范

保持色彩一致性(请勿使用不同的颜色来任意区分单个屏幕中的重复组件。当颜色不能增加价值时,请谨慎使用)。

上万字干货!超全面的 HMI 设计规范

建立视觉层次(通过不透明度值或者是同一色系,但不要过多的使用不透明度或对比度)。

上万字干货!超全面的 HMI 设计规范

尽量使用深色背景,这是市面上很多车厂的选择(不过蔚来、特斯拉、小鹏、carplay 都相继推出了白色版本,来适配白天,我们项目中后期也加入白天模式,经过路测在阳光很刺眼情况下,黑色会反光,无法看清显示屏幕内容),最终在实际各种照明条件下,对应用配色方案进行测试。

上万字干货!超全面的 HMI 设计规范

车载 UI 系统中使用足够色彩对比度,上述在使用场景中有所提到。

继续讲干货

(在后续文章安排里我会单独拿出 WCAG 从感知,可操作性,易于理解和稳定性去详细讲解,这次先挑重点说)

WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)它们是一组是网页内容更容易访问的建议,主要针对残疾人。一共分为三个级别 A(最低)、AA、AAA(最高)

讲个概念:两个白色的对比度是 1:1 , 白色(#FFFFFF)与黑色(#000000)的对比度为 21:1

做颜色对比的网站链接,搭梯子访问:https://next.rsuitejs.com/en/tools/palette

要满足 AAA 级准则,文本视觉呈现及文本图像至少要有 7:1 的对比度,针对大号文本以及大文本图像至少有 4.5:1 的对比度

上万字干货!超全面的 HMI 设计规范

总结:

对于颜色运用的细节,是证明了一位设计师的深度、且具备耐久力。上述内容对于颜色的规则不适用全部的设计方案,还是具体项目具体分析,用户人群不同,运用场景也不一致,比如驾驶者和后排人的屏幕设计内容肯定会有差别。还有一个点在设计需要阅读内容页面,例如:微信发来的消息、设置中文本,最好能够达到 AAA 标准。

布局规范:

HMI 的设计和其余终端设计,最大的差异就在于布局,布局是整个页面设计的框架,也是最重要的内容之一,在讲该模块内容,我会从实际项目案例出发。开始制作车载 UI 系统,需要和汽车厂商确认车载 UI 可在屏幕中,设计的尺寸区域(注:其中“屏幕”是指应用正常工作空间而不是到边缘的全部空间,有的厂商把固定按键也镶嵌这块区域中)。

1. 屏幕尺寸有多少种类别?

我们先要了解一下热门和主流车机分辨率。众所周知我们车机上的屏幕尺寸和分辨率种类可以说是种类繁多,在设计过程中设计师主要还是关注屏幕的分辨率是多少?( 需要我们设计的屏幕为仪表盘、中控、有的车载还包含有副驾驶和后排娱乐屏幕 )

特斯拉(Tesla)

Model3 1920*1200 15 英寸(底部控件的尺寸为 120 像素是固定 )Model S/X 用竖屏设计 分辨率 1200*1920

蔚来

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比较特殊,它拥有 4 块屏幕,仪表盘 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副驾驶娱乐屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鹏

G3 竖屏幕 15.6 1920×1080 P7 控屏,在目前汽车产品中属于分辨率较高的梯队 2400×1200 精度超过 2K(普及一下 2K 分辨率标准为 2048×1080 像素)

接下来给大家观看苹果的 CarPlay 系统分辨率和谷歌车载系统

上万字干货!超全面的 HMI 设计规范

CarPlay 系统分辨率:800 * 480、1280 * 720、960 * 540、1920 * 720

上万字干货!超全面的 HMI 设计规范

上万字干货!超全面的 HMI 设计规范

相信大家已经找出规律了:在设计横屏的时候高度基本都为 720px,其余横屏幕按照比列缩小。

这块内容非常重要,以至于关乎到后面整个系统的布局方式,苹果的 CarPlay、谷歌 Android Auto、国内的百度 carLife+等都有自己的车载系统,如有的车企屏幕分辨率不一致,就无法适配成功,会出现拉伸等现象,除非通过定制化服务重新按照厂商的尺寸去重新搭建一套。我们项目中涉及到的屏幕和 CarPlay 尺寸大致很像,但布局方面我们有自己的想法,后面在自适应布局中会提到。

2. 间距的规范制定

制定一组间距值,用于布局中元素和组件之间的固定纵向和横向的间距,参考规格布局 8 像素点网格上构建,这意味着规范中的 UI 组件和元素之间相隔 8px 的倍数

谷歌 Android Auto 间距规范一共制定了常用的九种数值,P0 – P8

上万字干货!超全面的 HMI 设计规范

注意事项:提供 4px、12px 间距大小,是为了对齐较小的元素之间的距离,这两个数值谨慎使用,在大屏幕车载系统内,也有很多间距需要大于 96px,因此在对于这些数值制定规范的要求就是 8px 的倍数即可使用。

说到这边肯定会有人有疑问,我们在做规范时能不能将间距不设定成 8 的倍数,4、5、6……倍数是否可行呢,当然是可以的,“规矩是死的,人是活的“。只要是按照倍数叠加完全都 OK,如果选定一种倍数,就不能加入其他倍数,如果页面出现多种间距会使得页面没有节奏感,打破了亲密性原则。

3. 车载模块中布局

这部分对于想接触车载设计同学非常友好。讲一下通用的布局,具体交互设计等待我后续更新文章,这次就简单按照 1920×720 分辨率每个模块我都会稍微带一下。

上万字干货!超全面的 HMI 设计规范

上万字干货!超全面的 HMI 设计规范

上万字干货!超全面的 HMI 设计规范

4. 自适应布局

讲完前面每个模块的大致布局,接下来我们来探讨一下自适应布局,这个真的非常非常!!!超级重要,工作后期经常会遇到这个问题,甲方爸爸后续有增加屏幕分辨率的需求。我们前期在布局上花费的时间相对较多(但后期维护起来可以减少你很多工作量,前期需要你规划好基础框架)

下面拿实际做过的案列来陈述:抛出一个问题,我们如何将分辨率1920×720页面的内容转变成1280×720 呢?

(有同学说,直接丢开发然后他们写自适应布局)导航相关页面需要调用地图的接口,这个开发是可以直接去写自适应,但其余元素还是需设计师重新来排版

上万字干货!超全面的 HMI 设计规范

(还有人说直接缩放比列,调整页面布局)这个方案在比例相差很大的时候是行不通的,但同比例或者很相近是完全 OK 的,正巧我们项目上有 800×480 分辨率,和 1280×720 极其相似。

上万字干货!超全面的 HMI 设计规范

(还有人表示不服:折叠某块区域内容,将该区域内容做成 icon 点击后弹出来)该方法可以使用在部分内容。

上万字干货!超全面的 HMI 设计规范

有的模块内容没法降低层级,这个办法就不行,遇到这类的情况我们就直接将这块内容适配做成 1280×720 尺寸。

上万字干货!超全面的 HMI 设计规范

如果前两种办法都行不通,有的内容就得需要做弹性布局控件了,例如设置页面,当中间空间很大的时候,放置到短屏中可以根据弹性布局拉伸该控件长度,拉至适配该屏幕的设计,如有需要请留言,后续弹性布局我会写一篇文章详细说明使用。

上万字干货!超全面的 HMI 设计规范

我们项目多种分辨率进行转化基本都按照这些方案推进下去的,来一句鸡汤:办法总比困难多,真的只要用心做事情,没有什么困难能难倒你的,还有不要做理想主义者,要做实践者,实践才会见真理。

不好意思,一下子说多了没收住 ,进入正题。谨慎重新改变布局 : 第一是增加开发工作量,其次就是增加用户的学习成本,当然,屏幕是竖屏的时候则就需要重新布局,因为横宽比例变成了相反数值。(旋转屏幕大家可以去看看比亚迪的唐、汉车型)

上述的内容都是我们一步一个坑踩过来的,“且看且珍惜”。

圆角的规范

1. 如何制定圆角的大小规则

更圆的角和全圆角的使用

对主要动作和组件使用更圆的角(更大的角半径 or 全圆角),是需要重点突出的,圆形对大多数直线形状具有更大的视觉影响,如果在页面有足够空间的前提下,全圆角形式会和其他按钮做出反差,鼓励用户去点击。比如:全局消息通知按钮、电话模块中接听、挂断、下拉负一屏中的按钮等 (下方是练习稿案列)

上万字干货!超全面的 HMI 设计规范

较低的圆角和直角的使用

对于不需要 or 低强调的元素,使用较低角半径 or 0px 圆角=直角,例如:工具栏或列表可以用较小的圆角,专辑封面不需要再强调,所以直接将它降到 0px,我们项目音乐专辑大封面就用的直角,具体问题需要具体去分析,像音乐控件的外轮廓就是带圆角的,因此专辑封面在容器里面就必须带有圆角,不然设计风格则就不统一。

上万字干货!超全面的 HMI 设计规范

还有一个模块,就是在音乐分类的情况下会有很多专辑封面,我们对比一下两种方案:有圆角 or 无圆角,两张图对比下来,带有圆角的专辑封面有更明显的边缘产生了视觉差的感觉,而直角的专辑看起来就没有,不易突出,因此不太可能引起我们的注意。所以在网格布局中,圆角的效果更好

上万字干货!超全面的 HMI 设计规范

谷歌对于圆角的定义

在设定圆角规则时,需要注意一个事项:大小种类不宜太多,不然显得杂乱无章。

上万字干货!超全面的 HMI 设计规范

注意:即使应用布局是在 8dp 网格上构建的,但仍会提供 4dp 的半径大小,以帮助在较小的组件中形成元素。该值应谨慎使用,因为它不是 8dp 的倍数

总结:圆角还是直角没有对错之分,合适的才是最好的。

图标规范:

1. 图标的种类(车载图标分为应用程序图标、系统性图标)

应用程序图标

现在 HMI 的设计趋势已经去掉了应用程序图标,取而代之的是卡片化的设计方案,简单说一下卡片式设计有两大好处,第一,把学习成本降至最低,第二,增大的接触面积让驾驶时误触率也降到最低,给到用户最直观的体验就是简单易用。不过有的汽车厂商对这一块还是有需求,我们就稍微再提一下。

上万字干货!超全面的 HMI 设计规范

我自己也负责过有应用程序图标的项目,在 1920×720 中为 160px 分辨率和苹果@3x 分辨率相同 ;在相对较小的屏幕中应该按照比例同比缩小,如同 800×480 分辨率中首页中的应用程序图标为 80px,这是如何计算的呢?

项目中还有一款车型的屏幕分辨率为 1280×720,由于屏幕变窄,应用程序图标需要缩小到 120px,高度 720 and 480 有一个共同 240 的倍数,所以最终小屏幕的应用程序图标为 80px,圆角大小也随之而变:R:24/18/12。其余分辨率按照实际情况使用。

上万字干货!超全面的 HMI 设计规范

系统性图标(后续 HMI 组件库搭建文章中我会详细的讲解)

该系统提供了许多小图标(代表常见任务和内容类型),供导航栏和选项卡栏中使用。最好尽可能使用这些内置图标,因为它们是人们熟悉的。

2. 图标的尺寸

大厂是如何制定图标尺寸

很多博主在讲到图标尺寸的时候都是一笔带过,拿着别人得出的结论,却没说怎么计算出来,对于车载来说,前期发布这些研究报告的内容极少,所以我对图标的计算想找到了计算方式,如果大家想知道怎么换算的话可以查看:https://zhuanlan.zhihu.com/p/158099749

根据百度 IDX 驾驶体验中心,在对于《车载 HMI 界面效果客观指标实验报告》在基于视距为 50cm,计算出最小图标为 9mm 推荐使用 12mm。视觉上的 1cm 的实际像素是多少呢?这就是一个错误的想法,上面文章中也有提到屏幕分辨率无法与物理长度单位进行转换,(实际项目工作经验告诉我,因为相同的屏幕大小但是分辨率不一样,所以得出的结果不能共用)

PPI 的计算

我就大概讲一下计算原理,这个根据屏幕的分辨率,我做过一款相同屏幕尺寸的车机,都是 8 寸屏幕,但分辨率一个为 1280×720,另外一个则为 800×480,每一个格子为一个像素。

上万字干货!超全面的 HMI 设计规范

最小图标尺寸计算

接下来找一下分辨率 1280×720 最大公约数为 80,最后得出结论屏幕的比列 16:9

两边比例的平方相加 = 屏幕英寸的平方

根据勾股定理 (16X)^2 +(9X)^2=8×8 最后 x 算出的结果为 0.4357

16:9 的 8 英寸屏幕 长度(单位:英寸)=0.4357×16 =6.9712 宽 =0.4357×9=3.9213

国际计算单位 1 英寸 = 2.54cm

所得出屏幕的长度(单位:厘米)=6.9712×2.54≈17.7cm 宽 =3.9213×2.54≈9.96cm

分辨率:1280×720 宽度约等于 10cm 来计算,720/10 = 72px

分辨率:800×480 由于他们屏幕大小一致(英寸)480/10=48px

上万字干货!超全面的 HMI 设计规范

得出结论:视觉上的 1cm 的实际像素是有所差距的。

按照设计规则:按 4 的倍数来制定,因此最小图标为 40px(这个结论只是作为推荐使用,在做项目的时候,变数有很多,甲方爸爸就喜欢超级大的,你也没办法,所以还是按照项目来制定)

为了计算这个我还特地的回顾了高中学习的开根号、初中的最大公约数都搬出来了,幸好当时数学还算是个小学霸,哈哈哈~~~

下面展示一下:

谷歌 Android Auto 图标大小规范

上万字干货!超全面的 HMI 设计规范

基础的图标:主图标:44px 次要图标:36px 第三方图标:24px

头像的使用:小头像:56px 中头像:76px 大头像:96px

百度车载生态开放平台下载了他们组件库,进行了研究。

基础为图标:48px 次要图标 40px(最小图标尺寸)

这边还要说一下,对于大图标的尺寸设定,会有很多尺寸 icon,后续我还会在输出关于车载图标详细的内容,敬请关注吧。

3. 图标的点击区域

图标触摸区域分为驾驶中使用和静止中使用

例如说驾驶中需要调节空调的内外循环,原本老车机的硬按键替换成了屏幕中的按钮,原有的硬按键已经通过长期使用有了记忆性,有触感并且操作硬按键大小适中,所以在操作中减少了操作时间,降低了危险系数。新能源汽车在设计的时候可以通过增大触摸区域降低误操作、无法点击使得驾驶员视野长时间远离方向盘的情况,研究表明视野超过 2 秒以上停留,就会存在危险。

静止使用例如:在设置页面中调节车辆设置中的属性,巡航模式、电动尾门打开百分比的调节等等。

谷歌制定触摸区域的规则

最小触摸目标尺寸为 76 x 76px,需要在单个图标设计基础上再额外增加一块触摸区域,易于驾驶中可操作,在静止使用的话,我们可以遵循苹果设计规范中最小手指触摸的区域为 44x44px

这是我根据实际项目并在车内进行路测(路测:驾驶中测试)中得出结论。

还有一种特殊情况:文字+图标组合点击区域,在 icon 很小的时候也可以考虑将文字也组合一起,增大点击区域

上万字干货!超全面的 HMI 设计规范

4. 图标设计的统一规则:
  • 统一风格
  • 统一光源
  • 统一线条粗细
  • 统一圆角/直角
  • 统一倾斜角度
  • 断点的距离、大小统一

上万字干货!超全面的 HMI 设计规范

5. 最后最一个小插曲:命名的规范

之前经常有小伙伴问我,落地项目的 icon 切图命名规范怎么制作?就拿我之前做的风格稿首页来说,首页音乐卡片中的“下一首”的图标如何命名。

上万字干货!超全面的 HMI 设计规范

首先分析这个 icon 在哪个页面当中 or 用在哪里,接下来就是他的属性是什么 icon 还是 button,其次就是这个 icon 代表什么,这个 icon 的大小,因为在一个系统里面会有重复功能 icon,所以是有必要增加大小(这块内容是选填项),最后在增加这个 icon 是处于什么状态下,状态分为:禁用、常态、按下、选中

最后呈现:首页_音乐_下一首_常态 ,对接开发应该是翻译成英文。

上万字干货!超全面的 HMI 设计规范

有时候英文命名也可以用缩写比如设置:setting 你直接可以写成 set icon ic button bt(如果全局使用就使用   All)

上万字干货!超全面的 HMI 设计规范

总结

听完小米的发布会,是我触动较深的一次,视频弹幕中满屏刷着““干翻特斯拉”,小米造车一诞生就背负着全民的期望,创始人雷军已经功成名就,但还是愿意押上全部的声誉和未来十年的人生,全力 all in,我心中只有敬意,祝小米早日造车成功,“干翻特斯拉”,我们设计师也愿意和这个行业赌一次,行业深耕下去,砥砺前行。


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

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



文章来源:优设  作者:设计界的影帝

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

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

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



Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

资深UI设计者


前几天版本号为 「OS Build 21996.1」的 Windows 11 系统在网上泄漏,虽然微软官方辟谣说这并非正式版本,但是这个非正式的泄漏版本依然可以让我们窥见新的 Windows 系统的一些有趣的特质。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

风格更加统一,功能小幅完善

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

在整体观感上,和补丁摞补丁的 Windows 10 相比, Windows 11 拥有着更加明确统一的视觉设计,足够简约又不会显得简陋,充满了一种浓郁的「形式跟随功能」的设计特质。微妙又高级的「亚克力美学」 Fluent Design 则显而易见地贯穿整个系统,所以 Windows 11 应该就是 Fluent design 的第一次集中式、成体系的呈现和总结。

在系统功能上,一眼就可以看到新增的桌面小组件功能模块,经过这么多年这么多系统的迭代 和验证,相信微软这次的桌面小组件不会是那么鸡肋的存在,应该可以整出一个颇为不错的桌面信息中心:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

新的软件商店也根据当前风格进行了优化:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

在游戏领域玩儿得风生水起的 Xbox 是肯定会出现在新的 Windows 11 当中,完善的游戏服务应该成为 Windows 11 的加分项,不过具体如何应该需要新版本正式发布之后再去验证:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

在动效和交互上,Windows 11 彻底摆脱了 Windows 10 时代似是而非的状态,经历过 Surface 系列产品的反复迭代和测试,Windows 11 在触摸交互上终于有点样子了,不再拉胯。得益于之前在 Surface Neo 和 Duo 上的探索,在分屏交互上,也提供了非常成熟的原生交互体验:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

不过,这次更新对于绝大多数用户感觉最为不同的,应该是挪到底部最中间的开始菜单。这个历经近30年的功能组件,变成今天这个样子本身是一件非常有意思的事情。接下来我们回顾一下这一部分的变化。

顺应潮流的「开始菜单」

其实「开始菜单」这个东西谈不上是微软的独创,在 Windows 之前,这种系统级别的菜单设计由来已久,Macintosh 在左上角:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

BeOS 在右上角:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

不过和当年大量交互逻辑千奇百怪的桌面系统相比,MacOS 和 BeOS 这种终究是少数,而面向兼容机市场的 Windows 95 把这种易于上手、高度集成的功能发扬光大,不得不说既是时势,也是机遇。

Windows 95 上的「开始菜单」设计可以说是当时同类设计中的最佳实践,易于理解的树状结构和明确的位置结构,让整个操作系统具备了更强的可用性。

Windows 系列在 开始菜单上的成功影响了后续包括 Gnome 、 KDE 在内的诸多 Linux 桌面环境,它们大都是顺应着这种潮流来进行桌面端控件的设计。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

随着市场份额的增长,「开始菜单」也成了 Windows 系列最具认知度的组件之一。这种事情最直接反馈在键盘的设计上,在圈内有 WK 和 WKL 两种常见的配列,前者即是 Win key Layout(有Win键键盘布局),WKL 则是 Win Key Less Layout(无Win键键盘布局):

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

在 2000 年之前有大量的键盘这样的键盘,而如今我们在零售市场上已经很少能见到这类产品了。为「开始菜单」单独安置一个按键虽然也不是 Windows 的独创,但是从这类键盘的市场份额的变化,也能看出 Windows 的市场变化。

功能缓慢迭代的「开始菜单」

在「开始菜单」上尝到甜头之后,微软几乎在每一代 WIndows 操作系统都会将这个默认位于界面左下角的组件进行升级,并且按照自己的想法进行了「优化」(当然后来的某些设计也确实是毁誉参半)。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

Windows 98

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

Windows Me/2000

Windows 98/2000/Me 基本上还是在延续 Windows 95 上的简单的层级结构,但是由于受限于硬件性能和操作系统领域的流行风格,这一波系统的开始菜单在视觉上也保留了当时桌面系统的浮雕式控件的视觉风格。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

Windows XP

值得一提的是,促使微软痛定思痛认真搞 Windows XP 的视觉风格的重要原因之一,其实是苹果这边的 Mac OS X 在视觉设计上搞得风生水起。要说微软一新追求技术无心设计肯定是假的,因为在去年泄漏的部分 XP 源代码当中,有微软模拟的 Mac OS X 风格的主题:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

两相印证,也不难看出微软在 Windows XP 的原有视觉风格上的探索还是相当上心的。而这个阶段的「开始菜单」从单栏变成双栏,一方面承载了更多的固定快捷方式、快捷文件夹,而且开关机按钮和控制面板 等一系列常用的关键功能也相对简约地集成,而全部程序则隐藏在下级菜单当中:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

Windows xp

在 2000 年前后,随着个人电脑的全面铺开,操作系统战争开始在开源和商业领域充分展开,商业巨头和个人开发者几乎全都参与进来,无论功能还是视觉设计上,都必须一较高下。

视觉风格升级的「开始菜单」

Windows XP 在「开始菜单」的功能设计上是成功的,随后带来的影响持续了十几年。不过市场份额上的增长并不足消除对于微软对于设计的焦虑,所以下一代的 Vista,微软拼着消耗性能也要让新的视觉风格让全世界看到:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

Windows Vista

以 Aero 为命名的视觉风格,最讲究的是玻璃式的光影变幻,Vista 当中的「开始菜单」也随之进行了更为「现代」的改进,精简了右侧文件夹的图标,通过双色对比来区分功能属性,也增加了信息层级,半透明的玻璃窗口也可以更好地传递界面之间的前后关系。

从成熟度上来说,比 XP 更进一步,随后是小幅迭代之后的 Windows 7:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

菜单上变化不大,功能和设计上的延续性显而易见,随后就是翻车了的 Windows 8:

需要强调的是,Windows 8 所处的整个时代,是移动端设计开始繁荣的开端、拟物化设计开始不足以满足大众新鲜感的阶段,而从微软的 Zune 部门开始流行的 Metro 设计风潮开始影响整个公司走向,催生了 Windows 8 这样的新设计:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

将简约的LOGO和多彩多变的动态磁贴结合到一起,用层级清晰的文字排版来快速传递更多的信息,不同尺寸的磁贴结合成不同的组,这种「开始菜单」的设计是近乎颠覆式的,但是对于用户认知上也同样是颠覆式的。

而完整的程序菜单需要向下滚动才能呈现,而用户看到的是布满整个屏幕的小色块和文字:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

而用户对于 Windows 8 的「开始菜单」的质疑也正是从这里开始的,不仅全部程序列表不是可见的且没有引导,连原本的关机、重启等功能也被隐藏了,可用性大打折扣。

最终,在作为增补升级版而存在的 Windows 8.1 当中,开始按钮重新回到了桌面,但是「开始屏幕」依然保留,而全部程序的列表也有了视觉指引,没有「开始菜单」的 Windows 依然没有灵魂,没有从根本上解决问题。同时,Windows Phone 这边份额也是一路下跌,每况愈下。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

原本期望借助「开始屏幕」让 Windows 系统更加兼容彼时正在上行的移动端生态,可惜平板模式本身极度拉胯,加上同样缺陷一堆的「开始屏幕」让整个 Windows 8/8.1 世代呈现出一种干啥啥不行的状态。而这个阶段同样也是微软换帅、内部重新整合设计部门、战略全面转移革新的阶段,产品出现这样的问题也并非单一原因造成的。

后移动端时代的「开始菜单」

Windows Phone完蛋了。Windwos 8 也终于成为过去了。推倒重来升级系统,把问题留到过去似乎永远是最好的选择。

在 Windows 10 当中,动态磁贴的优点和传统 Windows 「开始菜单」重新组合到一起,久经验证的功能——或者说符合长久以来用户认知的功能,又重新集成回来,让「开始菜单」回归了「用户舒适」的状态。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

一方面,Windows 10 即使进行重要的功能和设计改进,也并没有像之前那样做名称更换,而是自 2014 年以来一直以 Windows 10 的名称面向大众,几遍内里随着更新彻底翻新了好几波。

另一方面,在「开始菜单」的设计上,Windows 10 前期和后期在视觉层面上有大量的细节差异。功能上虽然保留了动态磁贴的优点,但是在具体的性能、图标元素、功能体验、视觉风格上,进行了大幅度的升级和改变:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

2014 年刚刚发布时的 Windows 10 的开始菜单,大概是 Windows 8 时代所有用户都期待拥有的样子。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

2016年之后,随着 Fluent Design 的逐步发展、成熟,Windows 10 在视觉上几乎是每版都不一样。「开始菜单」的优雅级别以肉眼可见的速度提升了上来。

但是功能上,「开始菜单」不管怎么换,它的默认位置倒是没怎么变过。在原本的计划当中,Windows 10 之后应该是会有一个针对移动端优化、面向双屏设备的 Windows 10x 系统。原本,Windows 10x 系统会伴随着双屏设备 Surface Neo 来发布的:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

Surface Neo

而这个更加偏向移动端使用场景的「开始菜单」其实上用于这里的。只是出于种种原因,Neo 跳票了,Windows 10x 也一直没有出来。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

泄漏的 Windwos 10x 界面

在原本的 Windows 10x 当中,全新的「开始菜单」被挪移到中间的同时,并没有包含关机等按钮和功能。不过并入 Windows 11 之后,开始菜单的核心功能还是得到了很好的延续,而目前泄漏的 Win11 系统界面也很好的印证了这一点:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

不过最重要的是,Windows 10x 和 Windows 11 在「开始菜单」上的设计,算是一次向着「移动端设计最佳实践」的妥协。

交互上选择了最佳实践

虽然居中的「开始菜单」看起来很像 macOS 的 Dock 的设计,但是,实际情况并不是这么简单。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

一方面,微软内部来看,试图重新进入移动端领域的微软选择了 Surface Neo 和 Surface Duo 两款设备作为切入点。前者使用的是 Windows ,而后者使用的是魔改后的 Android:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

在移动端计算设备占据主流的今天,居中的底部快捷方式是经过了十几年验证的「最佳实践」。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

另一方面,在桌面端操作系统上,这种趋势也相当的明显。macOS 自不必说,而借助低价入门硬件和教育类电脑采购而快速崛起的 ChromeOS 设备,也是使用底部居中 Dock 的大户:

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

ChromeOS

围绕着 APP 和服务的整个软件生态让用户对于复杂的系统级菜单功能没有早年间那么强烈的依赖,大量的移动端用户的基础认知和桌面端操作系统交互的逐步统一,让 Windows 早已没有必要在这个简单的事情上去做不必要的差异化,这可能才是 Windows 11 顺应趋势的主要原因。

Windows 11 系统泄漏,来看看有哪些亮眼的设计变化!

当然,Windows 的老用户依然可以遵循自己的喜好,让开始按钮老老实实待在原来的位置。

Widonws 11 目前泄漏的开始菜单的设计相比于以往,更加简约,复杂的层级结构被精简掉了,APP 快捷方式保留了,点击 All apps 可以访问全部程序,原本固定的文件夹选项被人工智能推荐所替代,顺应着时代潮流,最重要的关机等功能依然存在。

控制面板这类对于移动端原住民有认知负荷的功能,也在这个后 Win10 时代,化作一个「设置」快捷方式,和其他的 APP 待在一起,如同其他的手机或平板一般。

Windows 11 正式发布会就在几天之后,关于全新的视觉设计、用户体验细节上的东西,应该有更多看点,不过最好还是再等几天,正式版上手之后,再详聊。




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

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



文章来源:优设   作者:陈子木

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

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



交互手势全解析之位移类手势

资深UI设计者


1 位移类手势的描述维度


手势作为图形界面与用户之间沟通的方式之一,在便携电子设备上大量应用。与实体按键相比,它有着纯粹的简洁性和无尽的创造性,手指的个数变化、不同变量的组合能够创造出无数的操控方式。


位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势,本篇文章主要讲解单指操作的位移类手势,多指的位移类手势(如捏合)将放到后续文章中讲解。


一谈到位移类手势,大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而,当我们想仔细谈论他们三者之间的区别时,大部分设计师可能无法准确地描述。为了能够准确描述三者的区别,我们在这里引入三个维度的概念,它们分别是控制方式稳定化效果、以及阈值类型,这三者的不同的变化组合可以创造不同的位移类手势,拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时,不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势,因为这三个维度的变化就会产生不同的变种,而且不同变种在体验上也存在很大差别,若不分场景随意使用,很容易就影响用户体验。那接下来我们首先了解一下这三个维度。


1.1 控制方式


第一个维度是控制方式,它分为绝对控制相对控制,也可以通俗的表达为跟手不跟手,区别如下。


绝对控制/跟手:施加控制的一方(后文简称施控物)的某个属性变化与被施加控制的一方(后文简称受控物)的某个属性变化是对应的


相对控制/不跟手:施控物的某个属性变化与受控物的某个属性变化不是对应的


比如在网易云音乐的播放页(下图左),左右滑动黑胶时,手指是施控物,黑胶是受控物,手指的横向位置变化和黑胶的横向位置变化是对应的,即绝对控制。上滑调出评论页时(下图右),评论页的位置和手指的位置没有对应关系,手指的上滑仅仅控制评论页是否出现,即相对控制。


与相对控制相比,绝对控制允许用户去操控受控物的属性变化过程,因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑,手指的横向位置与书籍封面的变化过程对应,模拟现实生活中慢慢合上书的感觉,如下图。


但是在有些场景,为了避免混乱,属性变化过程是不适合被用户绝对控制的,此时我们应采取相对控制的方案。比如 iOS 的相机中,左右滑动切换拍摄模式,由于前后不同模式之间的页面框架变化较大,切换时会有过多元素的属性变化,如果使用绝对控制就会导致切换拖沓且混乱,使用相对控制就能避免这个问题。


1.2 稳定化效果


1.2.1 定义


当我们使用手势控制某个受控物时,由于手势的某个属性(如手指位移)达到阈值,进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」,或者也可以称为「吸附」。


稳定化效果能够保持界面的视觉秩序,避免过多的中间状态导致界面的杂乱,进而帮助用户聚焦信息。


是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度,当某个位移类手势有稳定化效果,我们就将其称作轻扫


以滑动切换抖音视频为例,当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后,下一条视频会往上移动到一个固定的位置然后进入稳定状态,而不会出现停留在不完整的中间状态,如下图所示。


在 iOS 端的微信消息页左滑某条消息后会出现更多操作按钮,按钮会在手指滑动的距离达到阈值并松开后稳定在一个固定的大小,而不会停在类似下图左所示的混乱的中间状态。


在多内容选择的场景中,如果滑动与选中是绑定的话,一般需要使用稳定化效果。例如在 iOS 相机里选择滤镜时,滑动滤镜选项不但能够控制滤镜选项的位置,并且会自动选中一个位于中间位置的滤镜,位置的稳定化避免了被选中选项的不明确。


如果滑动与选中是分开的,比如美图秀秀的滤镜选项需要先滑动后选中,这种情况下稳定化效果不是必要的。


1.2.2 与效率的关系


不同的稳定化规则带给用户的体验差异是非常大的,最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解,稳定化效果越强,单次滑动能够切换的选项个数越少,效率越低。稳定化效果越弱,单次滑动能够切换的选项个数越多,效率越高。


比如在比较常见的 banner 切换功能中(下图左),无论手指位移和释放速度的值有多高,banner 只能切换并稳定到下一个,不能够一次切换多个 banner。而在网易云音乐的首页排行榜中,一次滑动能够切换多个内容卡片。因此,我们可以说前者的稳定化效果比后者强。


拖拽和甩动虽然没有稳定化效果,但是也存在效率的高低。我们可以将其与轻扫放在一起做对比,如下图所示,拖拽、稳定化效果强的轻扫、稳定化效果弱的轻扫、甩动它们切换效率依次增加。


那么我们决定添加稳定化效果后,如何选择强弱程度呢?选择没有绝对的对错,整体来说主要考虑两点,业务诉求和用户诉求。例如在常见的 banner 切换中,banner  的总数量一般不会很多,业务的诉求是希望尽可能曝光每一个 banner ,使感兴趣的用户进行消费,因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里,不同用户感兴趣的榜单是不同的,稳定化效果弱的轻扫可以方便用户单次滑动切换多个,快速切换到自己感兴趣的榜单的大概位置。


百度 App 的表情面板原本是左右轻扫浏览表情,在一次改版中改为了上下甩动浏览。主要目的之一就是为了提高浏览效率、降低非首屏表情的曝光难度。


微信视频号的改版是一个典型的案例,旧版的微信视频号的视频流并不是类似抖音那样的全屏化形式和轻扫手势(下图右),而是占据屏幕尺寸三分之一到二分之一之间的卡片形式(下图左),并且使用甩动而非轻扫。视频号问世初期优质内容匮乏,社交推荐算法不完善,贸然模仿抖音式的全屏化形式和轻扫手势的话,会导致用户浏览到劣质视频时负面感受被增强且切换效率变低,反之卡片形式加甩动手势给予了用户更自由的选择空间,提高了用户的切换效率,降低了负面体验。等到如今时机成熟,再从卡片形式和甩动手势换成全屏化形式和轻扫手势就势在必行了。


在某些场景,用户需要先通过高效的方式选择特定区域的内容,然后进入聚焦状态进行内容浏览和慢速的切换,此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图,在 iOS 的照片 App 中,先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置,点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。


1.2.3 触发时机


触发稳定化的时机可以分为释放前和释放后,不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时,手指位移达到阈值后,手指无需离开屏幕,稳定化即可被触发。如下图左,iOS 的相机滑动切换滤镜使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时,手指位移或释放速度达到阈值后,手指必须离开屏幕,稳定化才能被触发。如下图右,常见的 banner 切换。


释放前稳定化可以避免拖沓,增加切换效率,但是缺点是无法反悔回退且缺乏掌控感。反之,释放后稳定可以反悔回退,掌控感强,但是缺点是比释放前稳定化拖沓了一些。


1.3 阈值类型


阈值是能够触发变化的最小值。比如当水的温度达到 100 度时就开始变成水蒸气,100 度就是一个阈值,温度是阈值类型。在手指与屏幕的交互中,手指在屏幕上的某个停留时间、位移、释放速度、点击次数等都可以成为一个阈值类型,达到相应阈值后就可以触发相应的变化,常见的变化有受控物的位置、大小、不透明度等,理论上变化可以是任意的。


在位移类手势中,通常会用到的阈值类型有手指位移释放速度,手指位移是用户在手指触摸屏幕时的位置与之后某个时间手指位于屏幕的位置之间的距离,释放速度是用户的手指在屏幕表面进行位移后离开屏幕那一瞬间的速度。


市面上的 App 暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式,因为其不太符合常识。因此我们在设计位移类手势时,能够选择的阈值判定方式常见的有两种:① 判定手指位移和释放速度满足任意一个即可;② 仅判定手指位移。


当我们设计手势时,就需要考虑两者的区别。由于 ① 比 ② 增加了释放速度带来的额外移动距离,因此 ① 的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短,所以相对应的缺点就是易误操作和不精确。②就恰恰相反,由于不存在释放速度造成的不确定因素,它的优点是不易误操作和精确,缺点是低效。


甩动和拖拽之间的区别就在于阈值判定方式,甩动是 ① ,拖拽是 ② 。如下图,当在微信消息列表找相应的消息时,用户的诉求就是能够快速找到特定消息的位置,对特定消息的出现在屏幕的位置也没有特定要求,只要能够被手指点击到即可,因此选用甩动较为合适,但是对于调节音量、亮度这一类的操作,滑动的范围有限,因此用户对效率没有太高的要求,但是对于滑块位置的精确度有要求,因此选用拖拽是更为恰当的。


再举一个反例,在 Steam 移动端横滑首页的泳道卡片时(下图左),使用的手势是拖拽而不是甩动,浏览起来特别低效。更适合的做法应为甩动,会更符合此场景下的快速浏览的诉求,如下图右的豆瓣。


对于轻扫来说,使用哪种阈值判定方式有多种情况(如下图所示)。在本文中,根据阈值类型、稳定化效果以及控制方式的不同我将把轻扫分为 A-E 共 5 类(A-E的命名方式仅存在于本文章,因此在向其他人传达时,尽量使用在后文我介绍的手势描述而不是类别名称,以便于对方理解。)。后续会为大家仔细举例讲解,大家现在仅了解一下即可。


当我们在刷抖音视频时使用的手势就是轻扫,是否滑动到下一条视频进行播放的判定方式是① 判定手指位移和释放速度满足任意一个即可,对应的手势类别是上面表格中的轻扫A。如下图所示,在刷抖音时,如果使用判定手指位移的方式,我们可以将手指在垂直方向位移大于半个屏幕高度的距离,从而切换到下一个视频。如果使用判定释放速度的方式,我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式,因为既省力又便捷。


如果将阈值判定方式改为 ②仅判定手指位移,对应的手势类别是上面表格中的轻扫 B,并且位移的阈值设置得比较大的话,给用户带来的负面体验可能将是非常大的。比如下图中打开美图秀秀的短视频评论浮层后,想要下滑收起时,App 仅判定手指位移,而且这个位移阈值设置得比较大,对于希望通过快速滑动一小段距离收起浮层的用户来说体验很差。即使由于开发资源有限我们只能做到仅判定手指位移,我们也可以通过减少手指位移的阈值来降低负面体验。


但是某些场景下,②仅判定手指位移是更加合适的。比如想要在微信中下拉打开小程序选择页,就只能通过手指位移达到一个特定的阈值才能够触发,无论怎么用力滑动去增加释放速度都无法打开小程序选择页。这样处理的原因是在微信消息列表页,上下滑动浏览微信消息是一个高频操作,如果释放速度也能作为打开小程序页面的阈值的话,用户可能就极易在下滑消息列表时误操作,无意间打开小程序选择页。


因此,对于位移类手势,选用哪种阈值判断方式要依据用户使用场景和诉求,不能想当然地设计。



2 常见位移类手势解析


了解完三个基础维度后,我们再将其进行组合,从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势,我列举出了常见的 7 类,如下图所示,这 7 类基本涵盖了 95% 以上的场景,我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置,因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。


2.1 拖拽


2.1.1 定义


使用手指在受控物位置按下后,操控受控物沿着某个方向移动,无论释放时手指是否仍有速度,受控物都会立即停止移动。(下图的动态演示由 Principle 制作,观看会有些不太直观,大家可以在文章结尾处下载 Principle 源文件后导入到手机里体验,源文件包含文章提到的所有位移类手势)


2.1.2 特点


精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果,拖拽适用于对操作精度要求高,对效率要求低的功能。


2.1.3 案例


在 iOS 设置中调节亮度时,在有限范围内,手指左右拖拽可以控制亮度变化。


2.2甩动


2.2.1定义


使用手指在受控物位置按下后,操控受控物沿着某个方向移动。若释放时手指仍有速度,受控物将移动一段距离后才慢慢停止,移动的距离与释放速度呈正相关。若释放时手指速度为 0 ,则受控物立即停止移动。


2.2.2 特点


精确度低但效率高。由于阈值类型判定释放速度和手指位移,甩动适用于需要快速浏览较多内容的场景,如滚动浏览列表。


2.2.3 案例


在微信的消息列表页,使用甩动手势控制列表上下移动,若释放时仍有速度,列表将仍移动一段距离后才慢慢停止。


2.3 轻扫 A


2.3.1 定义


使用手指在受控物位置按下后,操控受控物沿着某个方向移动。若释放时的速度和手指位移有任意一个达到阈值,受控物将稳定在一个新位置。若释放速度和手指位移没有任何一个达到阈值,受控物将回到原位置。


2.3.2 特点


由于轻扫拥有稳定化效果,因此它能够保持界面的视觉秩序,避免过多的中间状态导致界面的杂乱,进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性,就不一一赘述了。轻扫 A 与接下来要讲解的轻扫 B-E 的最大不同之处在于轻扫 A 的阈值类型为「释放速度和手指位移」,这让轻扫 A 与轻扫 B-E 有两点不同,一是轻扫 A 可以通过释放速度的快慢去控制内容的切换数量的多少,更加高效,二是轻扫 A 可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容,因此更加省力。


2.3.3 案例


在刷抖音时,如果使用判定手指位移的方式,我们可以将手指在垂直方向移动大概半个屏幕高度的距离,从而切换到下一个视频。如果使用判定释放速度的方式,我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。


2.4 轻扫 B


2.4.1 定义


使用手指在受控物位置按下后,操控受控物沿着某个方向移动。若释放时手指位移达到阈值,受控物将稳定在一个新位置。若释放时手指位移没有达到阈值,受控物将回到原位置。


2.4.2 特点


轻扫 B 与轻扫 A 相比唯一的区别是阈值类型减少了释放速度的判定方式,这提高了触发切换的难度,使操作成本变高,但是在某些场景下,这也降低了误操作的概率。如下拉刷新等。


2.4.3 案例


比如想要在微信中下拉打开小程序选择页,就只能通过手指位移达到一个特定的阈值才能够触发,无论怎么用力滑动去增加释放速度都无法打开小程序选择页,这样处理的原因是在消息列表页上下滑动浏览消息是一个高频操作,如果释放速度也能作为打开小程序页面的阈值判定方式,用户可能就极易在下滑消息列表时误操作,无意间打开小程序页面。

因此,当页面已存在一个滑动操作的情况下,还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时,为了避免误操作,会将后者的手势设计为轻扫 B 。


上文提到,轻扫 A 的阈值类型为判定「释放速度和手指位移」,轻扫 B 的阈值类型为仅判定「手指位移」,由于前者的实现成本比后者高,导致本应适合做成轻扫 A 的功能有时只能妥协做成轻扫 B ,比如之前提到过的美图秀秀的短视频评论浮层案例,但我们也可以通过减少手指位移的阈值来降低负面体验,后文会讲解如何与开发同学沟通。


2.5 轻扫 C


2.5.1 定义


使用手指在受控物位置按下后,操控受控物沿着某个方向移动,但是受控物并不随着手指的控制而同步移动,仅当释放时手指位移达到阈值时,受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值,受控物位置则一直保持不变。


2.5.2 特点


上文讲到过释放后稳定化和相对控制的缺点,释放后稳定化比较拖沓,相对控制让用户缺乏掌控感。两者如果应用到了同一个手势(即轻扫 C ),就会导致用户在滑动屏幕时得不到任何反馈,用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作,整体的交互流程给用户一种滞后与延迟的感觉。


因此轻扫 C 与其他类别的轻扫相比存在劣势,但是它也存在很多的 App 的 H5 页面中,我的猜测是由于 H5 对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多,因此只能退而求其次选择轻扫 C 这个较差的方案,实际上在同样的应用场景中用轻扫 A 替换轻扫 C 可以带来更好的体验。


2.5.3 案例


下图左是 QQ 的个性装扮的 H5 页面,卡片的切换使用的就是轻扫 C ,如果能够优化为轻扫 A 体验会更好,比如下图右的音街首页卡片的设计。


2.6 轻扫 D


2.6.1 定义


使用手指在受控物位置按下后,操控受控物沿着某个方向移动,但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值,无需手指释放,受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值,无论是否释放,受控物位置则一直保持不变。



2.6.2 特点


相对控制的方式降低了用户的掌控感,释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时,我们不希望用户过于自由地操控对象之间的属性变化过程,并且牺牲掌控感从而增加单次的切换效率。


2.6.3 案例


比如 iOS 的相机中,左右滑动切换拍摄模式时,由于前后不同模式之间的页面框架变化较大,切换时会有不同元素的属性变化,如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓,使用相对控制和释放前稳定化就能避免这个问题。


2.7 轻扫E


2.7.1 特殊说明


上文我们讲到,通过轻扫手势 A-D 对受控物的绝对/相对控制都是存在于稳定化前,受控物一旦稳定化,就脱离了手指的控制,需要手指离开屏幕后再次接触屏幕开始下一次控制。


轻扫E的不同之处在于它可以在受控物稳定化后,仍然控制受控物朝着下一个节点稳定化,在每个节点之间切换时能够明显感觉到分段感,如下图案例所示。

由于轻扫E相对于轻扫 A-D 的特殊性,控制方式中的绝对控制和相对控制无法覆盖这个特殊现象,因此我们使用「多段相对控制」来命名轻扫E的这种特殊的控制方式。


2.7.2 定义


使用手指在受控物位置按下后,操控受控物沿着某个方向移动,若手指位移达到阈值,无需手指释放,受控物就稳定在了一个新位置,但是此时手指还是仍然可以操控受控物继续移动的,并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。


2.7.3 特点


轻扫 E 适用于需要在多个对象之间快速切换和确认的场景,它的使用感觉很接近拖拽。如下图所示,我们可以这样理解,当被切换的对象数量接近于无穷大同时每个对象之间的距离接近无穷小时,轻扫 E 就可以视为拖拽。


2.7.4 案例


iOS相机人像模式切换打光方式、微信的通讯录滑动字母索引导航,它们都使用轻扫 E 来满足多个对象之间快速切换和确认的需求。



3 实战案例


了解完上述的维度和常用手势后,我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时,就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。


本案例是网易云音乐陌生人版一起听中的一个功能,一起听的双方在听歌过程中会收到彼此共同信息,比如听歌口味相似度、是否同城、都喜欢哪些歌手等,目的是为了增加可玩性和互动性、降低退出率,鼓励用户互相了解、提高一起听过程中的社交体验。


为了营造仪式感和避免信息过载,共同信息的展示方式设计为了一次只能看一条,进入浮层后默认展示最新的一条,可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态(如下图左),我们为其添加了释放后稳定化效果(如下图右),同时为了方便用户可以快速浏览旧的共同信息,这里使用的稳定化效果是较弱的,用户可以通过滑动一次切换多个共同信息。


由于需要满足用户快速浏览旧的共同信息的诉求,阈值类型选用了「判定手指位移和释放速度满足任意一个即可」,用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类,此手势为稳定化效果较弱的轻扫 A 。



4 手势角度的处理


位移类手势的方向一般为上下或左右,但并不是一定要完全垂直或水平才能够触发手势。当上下滑动和左右滑动同时存在于一个页面时,默认会有一个容错角度,比如上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑,如下图所示。


但是有时开发同学出现失误,导致容错角度没有均分,例如下图中触发上滑和下滑的角度极小,导致用户在上下滑动时非常容易误操作为左滑和右滑。


云音乐也曾有过类似的遗留问题,iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌(如下图 A ,现已修复),安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏(如下图 B )。


因此,在验收阶段,除了上述的三个维度外,角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下,最好要切换不同的手持方式分别体验一次,因为有些问题只有在特定的手持方式下才能够被发现。


客户端的角度判定方式实际上是一个比较复杂的过程,上述的内容是简化的版本。后续将延展为一篇独立文章给大家仔细聊一聊。



5 客户端的差异


上文讲到,基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别,是设计阶段一定要定义清楚的。但是除此之外,设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线?手指位移与受控物之间的位移的比率是多少呢?这些都是开发阶段不得不面对的。幸运的是,安卓和 iOS 有系统封装好的一套系统组件可以调用,操作系统自行解决了刚才讲到的细节问题,但是 H5 框架下是无法调用系统组件的,手势的各种细节都需要前端开发人员自己编写,难度较大,大部分情况只能实现一些比较简陋的效果,这也是为什么在很多 H5 框架下的界面滑动的体验比较差的原因。



6 高效沟通


由于信息不对称,与开发的沟通过程中,很容易出现理解偏差。比较常见的错误有:将甩动误解为轻扫 A ,将轻扫 A 误解为轻扫 B 或甩动。如果造成效果达不到预期的情况,很多设计师不知道如何让开发同学修改,只能说“这个手势不丝滑,优化一下”,开发同学也是一头雾水,不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移,需要释放时的速度也能够触发跳转;这个位移的阈值太高了,滑动时很难触发跳转,需要把阈值改为 16pt ”类似这样准确的描述,就能够大大降低沟通成本,顺利验收。为了避免沟通出现问题,下面我将日常经验总结出现希望能够帮助到大家。


首先,一旦涉及到位移类手势,除了必要的文字描述外(可参考上述的手势定义的描述),最好给开发体验 demo 或者其他 App 上类似的效果,否则很容易产生理解偏差。各种 App 上的类似效果大家可以用本文的每个手势的案例给开发同学展示,但是 App 可能会更新,案例可能在未来某个时间就找不到了,所以我用 Principle 做了一个简易的基础 demo 集合(如下图,源文件在文章末尾下载),和我上述介绍的手势是对应的,大家可以拿着这个 demo 给开发同学演示大概的效果,也可以在这个 demo 源文件修改。

下载链接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密码: asto。


拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了,一般不需要我们给到额外的标注。但是对于轻扫,我们需要将细节定义清晰,下面将详细讲解。


6.1 阈值类型


上文讲到,阈值类型一般有两种:① 判定手指位移和释放速度满足任意一个即可② 仅判定手指位移。①的开发成本高于②。


如果我们选用轻扫的阈值类型是①,开发同学编写代码需要两个参数的阈值,分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2,例如下图的全屏短视频和 Banner 。

当然我们也可以自定义一个阈值,比如 100pt 、受控物高度的 1/6 等,没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明,但是如果有特殊需要想要修改默认值,就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值,通常默认就非常的小,几乎是大于 0 即可触发,一般情况下使用默认值即可。


在本应该选用①的场景中,如果由于技术成本原因不得不选用②,需要注意的是由于缺少了释放速度的判定,手指位移的阈值我们需要设置得小一些方便用户触发,否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验,手指位移阈值一般定为 16pt 是比较适中的,既不会太容易误操作也不会难以触发。


6.2 稳定化效果


轻扫是一定存在稳定化效果的,关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲,系统会监测用户的行为,用户在使用滑动时会有按下(down)、移动(move)、抬起(up)三个行为,释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作,开发成本几乎没有区别。


上文提到过稳定化效果强弱的概念。稳定化效果越强,单次滑动能够切换的选项个数越少,效率越低。稳定化效果越弱,单次滑动能够切换的选项个数越多,效率越高。首先,我们需要确定单次滑动允许切换多个还是只允许切换一个,如果允许切换多个,开发同学会设定一个控制切换难度的系数,而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数,但如果想让操作更加难或容易触发,可以告知开发同学修改这个系数。


6.3 控制方式


绝对控制比相对控制的开发成本高,如果开发资源并不是很紧张,需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式,否则很可能被视为相对控制处理。



7 手势排查


通过本文的学习,我们不但可以在开发工作进行前与开发同学高效沟通,保证开发工作的顺利进行,也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录,并且找到合适解决方案,然后用准确的语言描述给开发同学。下图是我在进行手势排查后输出的表格,挑选出一些有代表性的案例给大家作参考,开发同学可以通过它快速明确问题,理解解决方案。





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

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


文章来源:站酷   作者:Ballen成明

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

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


优秀网站设计赏析

前端达人

很多网站仍然在使用老旧的页面设计,比如国内一些企业官网,万年不变的相类似的模板,外国的则是hero页面,带CTA按钮,三栏式的布局。这些设计不能说是不好的设计,很实用,用户能够预测展示的内容,也容易找到需要的内容。但是正因为可预测,用户没有新鲜感,没有期待,所以我们找了一些不仅打破常规,也依然有良好用户体验的网页设计。

蓝蓝设计(北京兰亭妙微科技有限公司)是一家专注而深入的UI设计公司,公司对UI设计的追求一向很高,致力于为卓越的国内外企业提供卓越的手机app/安卓ui设计、软件界面设计、网站设计,用户研究、交互设计服务。

接下来是精彩的UI设计赏析

WechatIMG1969.jpegWechatIMG1970.jpegWechatIMG1971.jpegWechatIMG1972.jpegWechatIMG1973.jpegWechatIMG1974.jpegWechatIMG1975.jpegWechatIMG1977.jpegWechatIMG1976.jpeg






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

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

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



  更多精彩文章:

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计,打造“视”不可挡的网页设计

      超赞的网页设计+精美流程图赏析

       超赞的网站设计赏析


优秀网站设计赏析

前端达人

很多网站仍然在使用老旧的页面设计,比如国内一些企业官网,万年不变的相类似的模板,外国的则是hero页面,带CTA按钮,三栏式的布局。这些设计不能说是不好的设计,很实用,用户能够预测展示的内容,也容易找到需要的内容。但是正因为可预测,用户没有新鲜感,没有期待,所以我们找了一些不仅打破常规,也依然有良好用户体验的网页设计。

蓝蓝设计(北京兰亭妙微科技有限公司)是一家专注而深入的UI设计公司,公司对UI设计的追求一向很高,致力于为卓越的国内外企业提供卓越的手机app/安卓ui设计、软件界面设计、网站设计,用户研究、交互设计服务。

接下来是精彩的UI设计赏析

jhk-1620644436964.jpgjhk-1620644459588.jpgjhk-1620644470955.jpgjhk-1620644473663.jpgjhk-1620644484506.jpg


蓝蓝设计秉承设计优秀,不断超越的理念,诚信敬业、专业耐心的工作作风,一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合。10余年专注努力,300+案例磨练。我们在ui创意设计,用户体验与交互设计,各种类型软件界面设计,国际化标准和流行趋势,进行过不断的学习和实践。蓝蓝设计提供的是可以信赖的ui设计服务,我们内部有一套管理要求,比如去客户现场每周一次的检视和沟通、内部提案会议、每天下班前的整理反馈成果发邮件、随时沟通的qq、电话,阶段性的汇报和进度记录整理。多劳多得的奖励机制,客户满意度评价奖励机制,鼓励大家用心、平和、耐心、勤奋、创新的做事.



(以上图片均来源于网络)

(精美流程图设计)



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



  更多精彩文章:

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计,打造“视”不可挡的网页设计

      超赞的网页设计+精美流程图赏析

       超赞的网站设计赏析


B 端设计稿尺寸究竟是多少?

资深UI设计者

设计尺寸一直都是设计师最热衷讨论的问题,讨论到最后结论总是一个死板的尺寸,很少有人去讲也真正明白背后的逻辑。今天的设计杂谈就带大家来了解一下,设计尺寸背后的逻辑以及设计尺寸如何去定义。希望之后在大家的交流中不要再去纠结我的设计尺寸究竟应该是多少?还是那句老话,耐心看完,你一定有所收获~

我先说结论,常见 B 端设计稿尺寸建议采用 1440×820,因为去除浏览器顶部页签以及地址栏高度 80px,因此高度上为 820px 而不是大家常见的 900px

设计尺寸从何而来

相信很多 B 端产品设计师都是从 C 端产品中转型而来。想要搞懂设计尺寸的基本逻辑,我们先搞清楚大家熟悉 C 端产品的情况。在移动端设计尺寸上的定义,我们只需要考虑 iOS 设备与安卓设备之间分辨率的区别。而在目前,大多数移动端设计稿都是采取 iPhone 12 尺寸即:375 x 812 的分辨率

(这里就不讨论什么物理分辨率以及设计分辨率等内容)

B 端设计稿尺寸究竟是多少? 看完这篇你就懂了!

因为移动端也会存在多个分辨率的情况,我们针对其他不同的尺寸,通常采取简单页面一稿适配多端,只针对核心页面进行多分辨率的适配。上面我们算是理解了作为移动端的分辨率的基本情况。而设计稿的尺寸是从何而来?大家想想,为什么我们在移动端设计稿的尺寸会从以前的 iPhone 8(375×667)转移到 iPhone 12(375×812)呢?

我个人认为会有以下几点:

1. 主流性

由于 iPhone 12 类的手机尺寸占比逐年增高,早期的 iPhone 8 的分辨率已经不再合适现如今手机的屏幕尺寸。因此决定分辨率尺寸的第一个因素便是这个分辨率的市场占有率。由于手机全面屏时代的到来大多数手机的屏幕比例都演化成类 16:9 的尺寸,因此参照 iOS 的生态下,我们的设计稿就会有如此的转变

2. 兼容性

作为移动端最为基准的设计尺寸,它一定要具备兼容性才能成为基准的尺寸。兼容性即能够通过该尺寸进行向上、向下的拓展,方便在一些主要页面中多尺寸的设计,比如:iPhone X 的尺寸,可以进行拓展成为 iPhone 8、iPhone 12 Pro Max 以及各类安卓端产品。减少设计稿因分辨率所带来的差异性

设备数据推导设计尺寸

搞清楚了移动端的逻辑,我们再去思考一下桌面 WEB 端的情况呢?

B 端设计稿尺寸究竟是多少? 看完这篇你就懂了!

因为 B 端产品的特殊性,在互联网中的分辨率数据只能作为一个辅助的参考(比如百度浏览研究院的数据),更多对于尺寸的定义还是来自你用户使用的设备。比如我们在一个针对销售的 CRM 系统中,销售使用的场景有两种:

  • 一种是销售需要经常外出拜访客户,移动办公场景为主
  • 另一种是在公司办公,通过电话的方式对客户进行办公,主要是固定位置进行办公

首先通过用户访谈了解到大多数销售都是采取移动办公的形式,因为销售需要对不同的企业进行登门拜访,拜访完成会跟进一些销售记录。因此对于电脑分辨率会相对较小。对其分辨率的数据埋点得知,分辨率以:1440×900、1366×768 两种为主。第二种场景下,用户以 1920×1080 分辨率为主,主要是市面上的办公显示器多为 24 寸即 1920×1080然后想要去寻找作为设计稿的尺寸也与移动端一样,需要满足:主流性、兼容性两种不同特性的需求。因此在我的设计稿中,会采用 1440×900 的尺寸,因为它更容易兼容且更为主流

OK,我再举一个反例,在我之前做过的一个线下诊所系统中,通过走访我们了解到,几乎所有的医生都是配备的 24 寸显示器,分辨率也都为 1920×1080。

因此在尺寸的选择上就没有必要去一味的选择 1440 这一尺寸。

对于浏览器的适配

首先显示器的分辨率并不能代表我们的实际设计尺寸,就像在 iPhone 的设计稿中,会有 StatusBar 的存在,会预留上半部分空间

因为目前,大多数 B 端产品都是通过浏览器的方式进行呈现,大家也都知道电脑的浏览器中(Chrome 浏览器为主),还会存在页签高度以及当前网址、书签栏(书签栏大多数是隐藏的,因此不算进内),而想要真实了解设备中一屏的高度,就还需要对上面的分辨率尺寸进行处理:

电脑分辨率 – 页签高度 – 网址栏 – 书签栏 = 设计稿真实高度,即:1440×820 尺寸进行设计

因此想要让自己的设计稿被前端进行完整还原,就必须将浏览器页面当中的很多因素考虑进去。类似于我们去设计移动端的小程序,他也会有顶部固定的区域进行展示。

文章来源:优设   作者:CE青年

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

B端项目的设计思路和方法

资深UI设计者

前言

对于一直做 C 端产品设计的同学来说,面对复杂又陌生的 B 端业务,难免会有些头“秃”,设计师该如何应对?或者说我们如何更好地完成项目?并挖掘和发挥设计价值?B 端产品通常具有较高的业务门槛和业务深度,对于设计师也具有一定的挑战性,本文根据自己的这一年的 B 端工作经历,总结了一些设计方法以及自己的经验。希望会对处在这个领域感到迷茫的设计师有所指引和帮助。

B 端产品业务目的明确,业务逻辑和场景相对比较复杂,所以对设计师的要求更高,要更清晰理解 B 端业务,下面是我转 B 端产品设计时的一些思路:

转变自己角色定位

针对之前一直做 C 端的我来说转战到 B 端业务,也面临着两个端的设计反差,B C 端的商业属性、产品定位、用户人群、视觉呈现、业务逻辑/流程都不尽相同,这将是一场知识迁移的过程。

需要转变自己之前的整个设计思路和角色定位,从之前被动接需求做图,只做执行输出设计稿,转被动为主动。也深知设计和产品的配合就是互相成就,互相补位。面对之前不太熟悉的 B 端那些较为复杂的业务场景和逻辑,尽量让自己在和产品需求对接时,提前介入,思维前置,全链路思考主动提出对产品的一些想法,难点或疑惑点都可以,也可以帮助自己梳理需求,了解从根本要解决的问题是什么,需求背后其核心是达到什么用途与目的,也想办法去收集来自用户、业务方的反馈,或主动去进行竞品调研,用户调研,这样不仅可以让我们更清晰的了解用户需求和业务场景,在这个过程中,往往也会更容易挖掘出需求的突破点,找到更好的解决方案和更有价值的驱动点,为业务赋能。不再只做被动接受的工具人,也会要求自己去做“项目推动型设计师”,尽量让自己全链路的参与其中,在每个环节寻找可挖掘和贡献的价值点。

大厂出品!帮你快速掌握B端项目的设计思路和方法

大厂出品!帮你快速掌握B端项目的设计思路和方法

系统学习业务相关知识

转变了自己的定位后,由于自己负责的 B 端项目,是之前没有接触过的业务,很多业务场景无法使用设计 C 端产品时的同理心来对待,又有较高的业务门槛和业务深度的,首先我认真系统的学习业务涉及到的一些相关知识,可以帮助了解自己手里的设计工作的业务细节,和产研团队多方面沟通产品的需求,弄清每个步骤的业务逻辑,不懂可以多问多学,在产品评审需求的环节,一定要将业务逻辑理解透彻再考虑应该如何进行设计实现。要问问为什么业务流程是这样,每一个页面的跳转每一个功能的用途以及业务含义是什么等等,多出几版样式进行探讨最优方案。

大厂出品!帮你快速掌握B端项目的设计思路和方法

分析洞察产品业务场景

设计工作的开展前,首先需要分析产品的背景是什么,要做什么,要提供用户什么服务?调研分析一下它的竞品状况是怎样的?现在是什么发展阶段(一般 b 端的产品竞品是极少的),不管是网上查找还是书籍搜寻了解一些行业内的资料,也可以找一些间接竞品吸取灵感。了解产品的目标用户群有哪些(用户画像)?不同角色的用户会有哪些权限?以及分析业务存在哪些重要的流程,背后设计的意图和产生的价值是什么,要解决用户或业务上的哪些痛点。进行了初步的业务分析以后,大致分析下使用场景,在需求分析阶段,要对产品本身和行业本身有一些基本的认知。

大厂出品!帮你快速掌握B端项目的设计思路和方法

设计执行&落地策略

B 端产品的逻辑较为复杂,在交互及体验上的要求也要更为谨慎。所以设计上需要更加克制和理性,B 端产品虽然视觉上交互上的整体要求没有 C 端那么高,但是需要做到每一个功能点能够清晰明确的展示,并且让用户知道每个功能按钮或页面的使用意图。避免功能堆砌关系混乱。

在产品设计之初,需要全面考虑,把握产品设计的大方向与业务发展的一致,同步搭建页面通用的设计框架,统一的视觉设计语言,通用的组件的规范,可快速复用提效设计,即可把更多的精力投入到梳理产品逻辑及交互方式和功能的视觉表现上。也要时刻与产研团队保持沟通,从技术和设计层面综合考虑,哪种视觉呈现方式更合理,哪种方式更提效更稳定,支持的场景更全面…确保当前产品方案可行性。全面打造产品体验的一致性,实现有序、统一的操作体验,总之核心重点:界面清晰易懂,用户的操作门槛低,能够快速的使用产品,高效、专注完成任务。

复盘结果定期总结经验

项目上线后,及时复盘总结也尤为重要,这也是我接下来要重点去做的事情,可以通过回顾和思考,来归纳分析自己做的成功与不足的地方,把那些对后续有帮助的、复用性高的经验加以总结,沉淀自己的一套方法论。复盘是设计师自我提升的有效方式,也可以赋能团队为团队提效,提升自己的价值。

大厂出品!帮你快速掌握B端项目的设计思路和方法

写在结尾

啰嗦说了这么多,比较细碎,不乏逻辑凌乱的片段,但也算自己对 B 端设计的一些想法吧~B 端产品承载的信息和逻辑比较复杂一些,所以需要对功能层级的划分呈现多考虑一点,需要有清晰的逻辑,多站在企业用户的角度去考虑,使任务能够精准化触达,毫不拖泥带水是设计 B 端产品最重要的工作。

文章来源:优设  作者:58UXD

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

小外包的一点扁平建筑设计

前端达人

商业扁平建筑

收藏
收藏


转自:站酷

作者:蒲公英在海上


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

日历

链接

个人资料

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

存档