首页

HarmonyOS Sans - 华为把鸿蒙系统自带的字体开放给全社会免费商用了

资深UI设计者

最近华为发布了鸿蒙系统并且开源了代码,成为了科技圈的热闻。不过我注意到了,系统内置的字体也是开放免费商用的。



关于 HarmonyOS Sans

华为鸿蒙字体 (HarmonyOS Sans) 是华为和汉仪字库合作定制,专门为鸿蒙操作系统设计打造,设计上聚焦于功能性、普适性,字形和之前介绍过的谷歌思源黑体阿里巴巴普惠体以及 OPPO 手机公司的 OPPO SANS 等免费商用字体有点类似,是一款适合阅读的多字重中性字体。

HarmonyOS 字体特性

  • 5种字重粗细调节。HarmonyOS Sans 支持可变特性,让用户选择他们喜欢的字体粗细来进行文本的显示。

  • 支持等宽与变宽两种样式。变宽数字在阅读文本段落中能让阅读体验更加连贯。而等宽数字在强调数值以及数据需要经常变化的表格、时钟数字的 UI 界面使用时,效果会更好。

  • 支持多国语言。HarmonyOS Sans 支持简体中文、繁体中文、拉丁、西里尔、希腊、阿拉伯等5大书写系统,105种语言全球化覆盖。

  • 通用性极佳,中英文混排效果优秀。鸿蒙系统是一款面向全场景的分布式操作系统,无论在手持设备、电视大屏幕还是手表的小屏上, HarmonyOS Sans 鸿蒙字体都具备极强的通用性和协调性。无论是粗体还是细体均需拥有出色的一致性。

undefined
harmonyos-sans 5种字重

字形特点

在保障字体体验的功能性前提下,HarmonyOS Sans 在人文和现代中找到新的平衡。在短笔画时保持横平竖直,简约无装饰,撇捺弯钩长笔画中融入书法的笔势美学,带来全新的视觉感受。

undefined
harmony-sans 字形特点
undefined
harmonyos-sans 笔画特点

在排版设计中常见的“字体不协调”问题之一就是中英文混合的排版,鸿蒙字体对此做出了针对性的优化,把西文字体设计得更显大更显宽,与中文对齐的匹配度更高,细看起来更加和谐。

undefined
harmony-sans 英文字形

一张图对比其他同类字体字形:

undefined
和其他类似字体比较

字体应用效果

undefined
harmonyos-sans 应用例子
undefined
harmonyos-sans 应用例子

使用场景和用途

HarmonyOS Sans 易读性强,字型简约富有科技感,在各种不同尺寸的屏幕上都能获得清晰的显示效果,既适合用于设计制作、平面印刷,也可用于阅读,显示大量文字也依然干净清爽。拥有5种字重,用在正文阅读通透流畅,粗细结合的标题也更醒目。

而对于移动 UI 界面设计来说,HarmonyOS Sans 本身优化了显示效果和协调性,特别是对数字的优化(比如时钟显示的冒号,往往需要手动调整),使得对 UI 作品整体气质有所提升,因此也可以用在效果图或作品集中。

当然了,你也可以设置为日常的办公文档字体,也可以下载用来替换自己手机设备的默认字体,即使没有华为设备,也能体验一下鸿蒙系统的文字显示效果。鸿蒙字体的格式为 .ttf,可以在 Android、WindowsmacOSLinux 等系统上使用。

免费商用说明

华为鸿蒙字体 (HarmonyOS Sans) 是随鸿蒙系统发布的中西文字体,有华为联合汉仪字库专为鸿蒙系统设计,现在华为将其公开发布,任何个人和公司都可以免费下载使用,包括商用。

需要注意的是,windows 系统内置的微软雅黑字体以及 macOS 内置的平方字体都是不能商用的,用在设计或者印刷上会面临侵权风险。喜欢这一类中性字体的,除了思源黑体阿里巴巴普惠体,现在又多了一款鸿蒙系统字体可以选择了。




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

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


文章来源:站酷   作者:weyman_me

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

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





太强了!这些Dribbble顶尖插画大神的作品,是我学习的源泉

seo达人

今天彩云跟大家分享的是Dribbble上,我非常喜欢的插画设计大佬们。优秀的太多,这里仅放10位我觉得最值得看的,可谓是精选中的精选,所以我建议你一定要收藏学习。(彩云花了3个多小时艰难选择出的10位,太难取舍了,最后入选的标准是一些更具风格特点插画大佬们)

 

1、Mikael Gustafsson

https://dribbble.com/MikaelGustafsson

首先推荐的这位大佬是我超喜欢的插画师,他在dribbble上发的作品不算多,但不发则已,一发惊人。每一张作品中,不论是画面构图、场景、配色都非常优秀而且还把插画做成了动态(其实是在Unreal引擎中落地的游戏场景动画),细节做到了极致。尤其喜欢他作品中的配色,我经常参考他的作品找配色的感觉,推荐你一定要去看看。

图片

图片

 

2、Beresnev

https://dribbble.com/Beresnev

这位大佬也是我在Dribbble上关注比较早的插画师,他的作品大多数都是动态的,其实发现他的动态也是做到了极致。插画的风格偏简洁矢量,很有自己的个人风格。可以从他的作品中学到很多动画动态细节,画面的动态速度、动作曲线、转场,极简的配色等等。他发布的作品量也不算大,但每一个都值得学习。

图片

图片

图片

 

3、Jenny Yu

https://dribbble.com/jennyyu

这位小姐姐很擅长在画面中运用光影关系打造意境,效果超喜欢,而且每一张图都能让看的人感受到一个故事,富有情感。画风比较轻盈,喜欢在画面中添加一些彩色的噪点,像是水彩撒上去的感觉,值得学习。

图片

图片
图片
图片

图片

 

4、Andrey Prokopenko

https://dribbble.com/Pro_Art

这位插画大佬擅长在结合图形本身构成的不规则暗色框里作画,从几年前就开始流行这种风格的画法。大概在5年前,彩云也画了不少类似这种风格的插画,当时跟这位大佬还经常互动,每次他发作品我会点赞,我发作品他也会给我点赞。只是他现在还在坚持更新这种风格图,我已经好久没画了,惭愧。总之,学习他的构图,细节,配色都是非常不错的,值得关注。

图片

图片
图片

图片

 

5、MBE

https://dribbble.com/Madebyelvis

Mbe插画风格应该很多人都已经熟知了,而他就是引流这股趋势的创始人。这种风格技法上较为简单,应用范围较广,曾经有段时间,各大厂的应用在空状态页,启动页面等等都进行了跟进。从这位大佬的作品中可以学习他的构图,配色细节,尤其是可以学习他对于可爱风格的表达。

图片

图片
图片

图片

 

6、Burnt Toast ®

https://dribbble.com/BurntToast

这位大佬在Google,Facebook,Samsung,Microsoft都工作过,跳遍国外大厂啊。他的插画具有很明显的个人风格:明亮的色彩,简单平滑的曲线描边,清新有趣可爱。我很早就关注了他,非常喜欢他的风格,给了我很多的灵感。他发布的作品量挺多的,很多都比较适合用到UI领域,推荐关注学习。

图片

图片
图片

图片

 

7、Brian Edward Miller

https://dribbble.com/bemocs

他是美国科罗拉多州的一位独立插画师,作品风格偏古典,擅长使用噪点笔触给画面增加细节。画面细节较为厚重,在一些风景,场景的表达上,比较适合参考。相比较于前面的一些插画风格,这位大佬的作品算是比较特别的,推荐给大家。

图片

图片
图片

图片

 

8、Canopy

https://dribbble.com/canopy

这是一家在纽约的插画工作室,他们的作品以矢量插画为主。我很喜欢他们画的这种图形规则的矢量风格,对于不擅长画插画的同学比较友好,很适合来临摹学习,也能用到一些UI项目中。他们对于颜色的不同明暗过渡运用的非常好,值得学习。

图片

图片

图片

 

9、Matt Carlson

https://dribbble.com/matt-carlson

这位大佬的插画作品,风格较为多变,擅长画一些风景画,尤其是对于树的表达有自己的特点。也是我关注的比较早的一位插画师,功底很好,值得关注。

图片

图片
图片

图片

 

10、Ana Miminoshvili

https://dribbble.com/Anano

最后推荐的是一位自由插画师,她的作品喜欢加一些噪点,并结合一些特别的图形外框,用出界的构图方式营造立体感,增强了视觉表现力。她的小插画,也很适合用到UI和运营里。在她的作品中从图形上,构图上,能看出是一位功底深厚的插画师,值得学习。

图片

图片
图片
图片
图片

总结

文章中列出来的这些是我从关注列表中再三筛选出来的比较有代表性的顶尖插画大神,在我的工作学习过程中,他们给了我很多的灵感。当然,这份推荐名单只是我自己的个人喜好,无关粉丝数量,排名也不分先后。

这篇分享,一定是值得收藏的,不论是找灵感,还是临摹学习,不用到处找,这10位大佬的作品就足够你研究了。当然,插画能力的提升离不开大量的练习,可以把这篇文章中分享的作品收藏起来(彩云挑选出的比较有代表性的作品),慢慢临摹学习都是极好的。

 

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

作者:彩云Sky


转载请注明:学UI网 » 太强了!这些Dribbble顶尖插画大神的作品,是我学习的源泉


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

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



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

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



如何建立完善的设计验收机制

seo达人



在日常工作中,设计师经常会有这样的烦恼:上线的产品和原先设计的不一样,不是这个交互提示没有显示,就是那个图标大小显示错了。更有甚者,产品功能的交互逻辑就有问题。用户在使用过程中体验大打折扣。导致这个问题的原因很可能是在产品开发链路中,设计师完成对设计稿的交付后就认为这个任务告一段落,开始着手下一个任务。而后续环节中的队友对设计意图、设计细节理解不足或产生误解,将关注度仅集中在主要功能的提供上。解决这个问题,设计师们需要设立设计验收环节,进行设计输出和产品实现的比对和检测。

而在传统的瀑布式开发流程中,由于产品实现周期较久,产品上线前设计师可以安排充足的时间进行验收;但是在敏捷开发过程中,每个迭代的任务多、时间紧,设计验收往往草草收场,以至于问题不断累积,影响产品整体用户体验。本文将会结合酷家乐工具型产品-酷大师在敏捷开发过程中的实践经验说明如何搭建设计验收体系,在设计师与队友们的高效沟通的前提下,保障产品高品质在线。

 

搭建设计验收框架

很多设计师反馈:产品上线前验收过,有些小问题没法立即解决;上线后会发现一些新问题;随着产品功能的增加,问题越来越多,通常呈现分散式、零星式的特点,有些防不胜防的感觉。

实际上,这是因为大多数设计师认为设计验收就是上线前的事情,结束了就完成了,没有建立系统验收框架,缺少全生命周期去跟进设计实现的概念。

由于酷大师项目是我从0到1一直跟进的项目,在启动初期就做好了搭建设计验收框架的准备,按照单一功能验收、部分模块功能验收、全局功能验收、阶段性整体复查这样的顺序,网格状、系统性、地毯式进行验收。验收阶段贯穿上线前、上线后,形成点、线、面、体相结合的布局。

图片

单一功能验收阶段——模块验收阶段——全局验收阶段——周期性复查阶段

 

一.单一功能验收阶段

大多数项目进行敏捷开发时,一个sprint结束后会上线该sprint研发的功能,此时可以进行该sprint中开发的功能的验收。在酷大师敏捷开发过程中,一个sprint往往会完成1个复杂功能或多个独立的简单功能,我通常会给每个功能建立设计验收文档,逐个进行验收。这个阶段的验收往往比较细致,会关注每个功能的设计输出中涉及的所有细节点。

这样一轮精细化验收结束后,往往能够发现产品实现中90%以上的问题。我称这个阶段为点状验收

 

二.模块验收阶段

有些功能比较复杂,会拆解为多个子功能,花费多个sprint进行研发。比如说酷大师中的渲染功能,先实现构图外景等能力,再实现阳光调节能力。

所以会先进行构图场景和阳光调节的单一功能验收,当这些能力研发完成,渲染功能比较完整时,再进行整个模块功能验收。此时的验收既是对单一功能的复查,也是对模块功能的检测。我称这个阶段为线状验收

 

三.全局验收阶段

通常我会在一个相对具体的时间节点,比如半年、一年或者大版本更新迭代时,去查看整个产品功能迭代情况。这样的时间节点就很适合进行一场全局性的功能验收。

平日的验收结束后陆续会进行优化,但是由于优化时间点不一定是即时的,也有很多情况下是问题优先级较低,很久才修复。全局功能验收就能从全局角度了解半年或一年进展情况,查漏补缺。

由于酷家乐体系下,半年会对产品做一次回顾,所以我会在1个季度结束后进行一轮全局验收,检查出的问题可以下一个季度进行优化,保证每半年回顾时整体状态可控。我称这个阶段为面状验收

 

四.周期性复查阶段

前面三个环节结束后其实会沉淀下数量客观的验收问题,一部分在上线前会解决掉,一部分上线前不容易解决的会在上线后短期内解决,还有一部分问题可能涉及资源、产品方向等短期难以解决的问题,会留档,等待合适的时机进行解决。

为了防止短期内没有解决的问题被时间所遗忘,我会安排周期性复查,比如在半年的节点上,复查这半年的验收文档,对问题进行跟踪整理,适合近期进行优化的推进优化解决,短期内还是没法解决的再进行备注说明。

这样体系化的全生命周期的验收,就可以保证产品稳定的质量呈现。

 

明确基础验收流程

图片

建立验收文档——验收问题录入——同步&沟通验收问题【确定问题优先级&跟进机制】——过程中跟进调整情况———上线前复查

 

一.建立验收文档

有些团队内部协作习惯于直接口头沟通,面对简单且量少的问题时比较快速,但是也存在信息遗漏、沟通误差等问题。所以建议每次设计验收时先建立验收文档。

如果团队共同使用线上协同工具,那么验收记录留档和信息同步都能及时有效进行;如果没有团队协作工具,可以自己使用在线或本地文档工具,比如石墨、语雀、Pages等。建立文档时也需要按照一定规则,方便后续查找,比如命名按照功能、模块、时间顺序等。

随着文档的增加,为了方便进行管理,可以建立一张验收文档管理表,记录单个文档的基础情况。有些团队分工较细,交互设计师和视觉设计师会分别建立验收文档,在我们的团队协作中发现共同维护一份文档比较高效,只需要在问题类型中进行交互、视觉的分类即可。

 

二.验收问题录入

设计师在对最初的设计输出和设计实现进行比对时,往往会发现与最初设计意图有出入的地方,建议将差异点都作为验收问题进行录入,在后续沟通跟进弄清缘由的情况下,再去判断是否列入验收问题。

验收问题录入的过程,实际也是对功能的二次思考,在这过程中真切验证原先规划的操作路径是否真的易用。有时也会在录入过程中,发现需要增加延展的能力,那么也是可以录入并备注,为未来的体验优化积累突破点。

验收文档的撰写标准将在后文具体说明。

 

三.同步&沟通验收问题

验收问题常常会涉及多个岗位团队成员,比如前端、后端、运营等,如果是团队使用在线协作工具,在问题录入的同时设计师可以先做好原因预判,立即@相关队友,在正式进行沟通之前,能够给相关队友预留一些排查原因的时间。

在一次设计验收完成后,可以依据整个验收文档,与相关队友共同沟通验收问题。可以召集相关几位队友直接沟通,或者召开会议。在沟通的过程中,通常需要复现问题,判断原因,以及确定跟进优化的负责人。

同时会根据问题的影响程度、调整难易程度、资源配比程度,综合判断各个问题的优先级,再根据优先级进行排期调整。设计师在排定优先级时需要遵循体验原则,尽量保证新功能上线时以较好的效果呈现。这样用户初次接触功能时,在首因效应影响下,会对该功能体验抱有好感,对产品整体体验也会给到好评。

 

四.调整跟进

验收问题调整的过程中,对于复杂问题往往需要进行频繁的沟通,工程师需要在过程中与设计师确认方向正确性,防止偏差导致的再次误差。

此时设计师应给予充足的支持,比如详细解释设计意图,比如帮助工程师寻找类似场景的实现效果,比如相关组件资源等。既是团队协作共同解决难题,同时也在解决问题的过程中了解底层原因,为预防后续遇到类似问题积累经验。

 

五.上线前复查

体验问题调整结束,依据体验文档,再次验证修复情况。在这个时期,如果还遇到其他问题,也是可以进行问题录入和优化。

 

制订验收文档标准

图片

标明序号——定位问题范围——定位问题分类——问题清晰说明——差异截图对比——原因与解决方案——定位负责人——记录优先级———跟进记录

 

一.标明序号

验收文档支持以多种形式呈现,比如word、excel、ppt等,尝试过多种形式后,选择使用excel表格。对问题属性、范围、负责人等进行说明时可以单独呈现,很容易最终进行分类整理。

比如复查时,可以拉取一段时间的验收文档,整理后可以知道视觉问题占比10%,那么视觉还原程度还是不错的。比如渲染模块问题占比20%,那么说明这个模块下还需要集中进行优化调整。

确定呈现形式后,可以在文档中标明序号,方便后期整理。

 

二.定位问题范围

验收问题影响范围往往并不相同,比如影响当前功能、多个功能、当前模块,也有些问题涉及产品全局,甚至还有些问题会涉及公司其他产品线,此时需要说明清楚。

工程师在修改问题时就可以针对该范围进行问题解决,防止解决问题覆盖面太小,产生遗漏。而涉及到公司跨业务线的问题时,可以@对应负责人,进行沟通解决。

 

三.定位问题分类

在酷大师验收过程中,通常遇到的问题分类为:交互类问题、视觉类问题、运营类问题、技术类问题、产品方向类问题等。相关人员通常会直接关注对应问题,帮助高效处理。

 

四.问题清晰说明

清晰描述问题,尽量具体,避免类似于“不符合”、“不好看”、“与设计稿不一致”等主观笼统的概括;提出问题的同时尽量说明解决方案,当然有些方案设计师能够直接给予,而有些涉及其他岗位时就可以@队友进行解决方案的描述。

 

五.差异截图对比

将设计稿与开发界面进行截图对比,标注出差异问题点,帮助相关队友快速直观理解问题。有些情况下截图不能说明清楚操作过程中的问题,也可以采取录制gif的方式,演示操作行为。

 

六.原因与解决方案

通常问题涉及的相关人员会在这个区域进行跟进说明,比如造成当前问题的原因、解决方案、排期等。

 

七.定位负责人

记录当前跟进的跟进入。

 

八.记录优先级

优先级的评定可以有多种维度。通常可以直接做判断的维度有两个,易于调整的问题优先级较高,对完成功能影响大的问题优先级高。其他维度可以根据具体产品,与团队共同进行分析,总结其中的规律。

 

九.跟进状态记录

主要集中于对问题解决情况的跟进,通常分为已解决、跟进中。

 

其他思考

为了实现产品高品质在线,除了在研发实现后落地系统的验收机制以外,设计师可以在很多环节发挥作用:

1.设计稿本身的高标准输出,考虑清楚开发成本和可实现性;

2.交互评审环节尽量解释详尽,与相关工程师达到理解上的一致;

3.开发过程中参与沟通,帮助工程师先做一波问题的排除;

4.出现问题帮助促成解决,包括跨团队资源的收集、组件支持之类;

5.明确产品设计还原度对于用户体验的重要性;

6.以多种方式邀请合作伙伴参与到验收环节中,比如bugbush、专家走查、可用性测试。

 

原文链接:酷家乐用户体验设计(公众号)

作者:怀瑾

转载请注明:学UI网》如何建立完善的设计验收机制


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

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



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

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

 


复杂系统如何设计 | 论B端产品的体系化构建(上)

ui设计分享达人

导读


为什么B端产品总是容易“失控”?B端产品设计与C端有何差异?如何在不断复杂的系统中,权衡效率、成本、体验之间的关系? 


本文将带你从B端产品的本质出发,了解产品发展过程中容易出现的问题,并从复杂系统的角度去探讨设计体系的构建方式。



目录


一、「 困局 」容易“失控”的B端产品

A .「 关注重点的差异性 」

B .「 微小差异的不断叠加 」

C .「 产品发展进入恶性循环 」

D .「 进入效率拐点,产品失控 」


二、「 启发 」从复杂科学的角度思考设计

A.「 自然算法 」

B.「 物质的构成原理 」


三、「 探究 」什么是产品设计体系?

A.「 定义 」

B .「 组成部分 」

C .「团队能力要求 」

D .「 构建方向 」


四、「 剖析 」B端产品的生命周期

「 产品生命周期概述 」

A .「 初创期 」解决核心问题,产生价值

B .「 成长期 」能力完善,产品扩张

C .「 成熟期 」效率提升,快速增长

D .「 暮年期 」商业价值降低,发展逐渐停滞


NEXT、「 下期预告 」设计体系的构建法则




前言


随着产业互联网时代的到来,市场对B端产品的重视程度逐渐提升。然而,谈及B端产品,特别是SaaS产品,大多数设计师对此并不是特别感兴趣。一来,SaaS更注重功能层面,似乎本身对设计的要求并不高;二来,SaaS产品的最终实现效果总是不尽人意,就算设计得再好看,实现出来也难以出彩。


确实,若设计师仅仅只是关注视觉层面本身,那么B端产品确实不像C端那么吸引人。但是,若你能以整个产品构建的角度去思考B端产品设计,那么设计师能够在其中发挥的空间是巨大的。


假如把C端产品比作精致的小房子,那B端产品就是一幢巨大的高层建筑。建造小房子,你可以尽情地发挥创意,追逐潮流,大不了推倒重来。而建造大房子,则需要设计师考虑更多的维度,因为这是一个长期而复杂的工程。


建筑的外观不仅需要好看,更需要足够耐看、稳定;为了适应更多人的需求,你不仅要考虑房子的软装,还要考虑户型的合理性、通用性;而为了降低成本,你还需要考虑家具、硬装的标准化、房间的兼容性等等…


“你是否有信心建造一个宏伟的高楼大厦?” 


这是我在B端设计中,反复强调体系化思维的原因之一。想要建造一个大型建筑,没有体系化思维、没有更完善的多职能协作流程,那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现,涉及到的沉没成本也将会非常巨大。


当然,对于C端产品来说,体系化也愈发重要了。随着互联网时代的持续发展,一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点:“C端B化,B端C化”。在未来的数字产品设计中,B端产品将会逐渐开始重视产品的外观与体验,因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设,因为产品体量越来越大,需要寻求效率与成本之间的平衡点。


产品设计体系,本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此,不管是B端产品还是C端产品,设计体系能够在提升设计品质的同时,让产品更“可控”,提升效能,降低成本。


这套设计方法论,是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验,也探讨一下数字产品设计未来的形态。




一、「 困局 」容易“失控”的B端产品

-


作为较为复杂的数字产品,B端产品在快速发展的过程中,总是容易出现一些问题。特别是当产品体量到达一定阶段后,问题就会逐渐暴露出来,比如:


1. 产品丑、设计质量低;

2. 组件样式繁多,操作习惯不一致;

3. 新老系统差异大,不同模块体验差异大;

4. 页面结构混乱。


等等…


很多问题大家都能明显地意识到,但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。


随着问题逐渐积累,产品的优化成本也变得越来越高,最终使整个产品已经积重难返。若只是多部分页面/组件进行优化,小修小补,虽然成本低,但成效甚微;若是进行大修大补,那么优化成本将远大于研发新功能的成本。


这种普遍的B端产品现象,被称为“产品失控”,即——团队已经对整个产品的形态失去控制力。


那么,为什么B端产品特别容易出现这种问题呢?



A .「 关注重点的差异性 


首先,产品的本质决定了其关注重点的差异性。


与C端产品不同的是,B端产品往往更看重“能力”(为企业用户解决问题),而产品的销售方式与付费模式,也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户,需要更长的研发过程,产品的体量和复杂性也相对较高。因此,除了产品解决问题的“能力”之外,产品还需要关注研发的效率及成本。


因此,在产品的发展初期,企业通常对效率最为关注,其次是成本,最后才是体验(能用就行)。绝大多数B端企业,只有在产品跑通商业逻辑,并具备一定用户与盈利预期之后,才会对产品的体验逐渐重视起来。



B .「 微小差异的不断叠加 


任何微小的差异,在无数次的叠加之后,都会被快速放大。特别是当团队的人员逐渐增多后,放大速度将会呈指数级上升。


为了配合产品的快速发展,产品往往会采用“堆量”的研发模式。增加研发效率,最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面,团队人员也在不断地扩充。


但是,人类不是机器,并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升,但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员,对于产品的认知是不同的。随着团队人员的不断增加,“个体差异性”将会被不断地叠加与放大。


就像“传话筒”的游戏一样,同一个事物,不同的人理解总是不同的,经过多次的“传话”以后,往往与原本的意思已经大相径庭了。


这种情况表现在产品设计中,则会出现:当相同的组件由不同的人做时,总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件,不同的模块在开发时总是会存在差异,最后差异越来越大,形成了五花八门的导航菜单形式。



C .「 产品发展进入恶性循环 


令人遗憾的是,虽然问题很明显。但是在不断的“成本考量”中,产品团队往往优先关注新功能的开发,而忽略底层问题的优化。


随着产品的快速发展,产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构;要么降低标准,继续以这种模式不断叠加新功能。


在这种情况下,大部分B端产品往往会选择后者。于是,产品的发展将会进入一个“恶性循环”


  • 产品快速发展,功能不断叠加;

  • 各模块由不同的产品、不同的开发研发,导致各模块之间差异增加;

  • 产品丑、体验不统一,但老系统优化成本过高。综合衡量,优先进行新功能研发;

  • 所有模块标准不统一,产品迭代效率持续降低,维护成本持续增加。



D .「 进入效率拐点,产品失控 


产品的发展犹如一辆快速奔驰的巨型列车,一旦加速便难以停止。


随着问题的反复出现,以及在一次次的“利益权衡”中选择性的忽略,产品的恶性循环不断重复,而问题也逐渐叠加、沉积下来。


当这个问题已经大到我们无法回避时,我们才发现:产品的单位迭代/优化成本,已经远远大于新功能的研发成本。而新功能带来的增量,已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。


就像一个庞大而复杂的机器,虽然依旧可以运行,但整体效率已经很低了,而与之对应的维修成本则非常巨大。小修小补根本无法解决问题,而大修大补则很有可能会带来更大的亏损。


最终,产品逐渐在“失控”中难以自拔,竞争力逐渐降低,但整个团队对此却无能为力,严重影响了企业的发展。


那么,在产品发展中,我们应该如何避免这种情况呢?换而言之,一个高度复杂的数字产品,我们应该如何设计,才能避免其逐步走向混乱? 




二、「 启发 」从复杂科学的角度思考设计

-


如果我们将B端产品看作是一个复杂系统,那么产品“失控”的本质即——在不断复杂化的形态中,缺乏有效的控制机制,最终导致整个系统失去控制。 


但是,在大自然面前,B端产品这种复杂程度显然不值得一提。


像大自然这样的复杂系统,是如何构成的?所有的物体都由原子所构成,为什么简单的一百多种原子,能够构成如此复杂的世界?生命又是如何在无机物的世界中诞生,并逐步进化成如此复杂的个体的?



A.「 自然算法 


道生一、一生二、二生三、三生万物...无论是老子的《道德经》,还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点:


任何看似复杂而又可控的系统,一定存在着精简的“算法”,通过不断的叠加从而形成复杂系统。


就像爱因斯坦说的:“宇宙最不可理解之处,就是它居然是可以被理解。”


在大自然中,有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案,这种图案在森林当中到处可见,我们看到很多树的形状跟叶子的形状是一致的,这就是一种分形图案。而这种分形的图案本质上是一个公式,通过不断地自我引用进行迭代,这便是分形。


科赫曲线(Koch curve)就是一种分形。其形态似雪花,又称科赫雪花(Koch snowflake)、科赫星(Koch star)、科赫岛(Koch island)或雪花曲线(Snowflake curve)。


它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段,然后向中间挤压形成等边的倒V形状;接着再将每个倒V的边进行相同的操作,不断地重复之后,我们发现:第一步是倒V型、第二步变成了大卫星,第三部变成了枫叶,第四步… 经过无数步以后,最终成了越来越复杂的“雪花”形态。


科赫曲线便是“自然算法”的一种。海岸线虽然很复杂,但是却有一个重要的特性——自相似性。从不同比例尺的地形图上,我们可以看出海岸线的形状大体相同,其曲折、复杂程度也很相似,换句话说,任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线,它是通过天然的演化,不断折叠最终形成了这种形状。


可以发现,他们都是由 基础物质 x 简单算法 x 随机变量,经过无数次叠加后,最终形成了一个复杂而多变的整体。



B.「 物质的构成原理 


宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性,普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式,就好像行星围绕太阳运动一样。


不管是整个宇宙,还是生命体,将其置于复杂科学的研究框架中,那些基本定律最终也会变得极其简单


在宇宙中所知最为复杂的形态,便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是,通过氨基酸的形态,这些基本原料竟能自然地将自己组合成一个自组织系统。


混沌中隐藏的算法,使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数,又使得宇宙成为极为丰富的世界。


也正是因为算法的精简,一切物质的创造才能具备复制性、延续性、进化性


那么,我们反过来思考——想要使复杂的系统简单可控,是否就需要一套简洁、有效的“算法”?通过“算法”,将基础的“物质”不断地“有序叠加”,形成一个可控的复杂体系。


因此,对于复杂的SaaS系统设计,我开始引入“设计体系”这一概念,希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立,才能保证产品可控性,才能在不断复杂系统中,保证效率、成本、体验之间的平衡。




三、「 探究 」什么是产品设计体系?

-


产品设计体系,在国内仍旧是较为陌生的词汇。什么是设计体系?


A.「 定义 


一个成熟的数字产品,需要有一个稳定、且持续迭代的形态。创造这个形态的过程,我们称之为广义上的产品设计(这里指产品的整个策划和设计过程,包含策划、交互、视觉及部分前端开发)。而负责控制和维护这个形态的这套系统,便是产品设计体系。


我们接触到的更多是设计系统(Design System),比如平台级的设计体系,Apple、Google、Microsoft等系统级的设计系统,及其设计开发套件、应用生态。公司级的设计系统,如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。


但是,在一个企业内部,想要Design System能够系统性地运转,还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合,才能建立真正的设计体系。



B .「 组成部分 


如果将数字产品比作复杂的“生命体”,产品的发展比作竞争中“自我进化”,那么设计体系便是产品的DNA。它既是产品形态的控制源,又是不断自我迭代的进化源,它的作用是:


  • 控制产品外观——感知性模型(视觉风格/规范)

  • 制造基础构件——功能性模型(基础/复合组件)

  • 模块的构建规则——模式语言(产品框架规范)

  • 产品标准定义、生产方式制定——协作模型(高度协同的工作流程)


它不仅能控制产品的“生产结果”,提升产品质量;还能规范产品的“生产过程”,形成一套完整的多职能协作流程,提升产品的生产、迭代和维护效率。 


从宏观来看,设计体系像是一个“规范的复合体”,它是各职能之间规范的有效整合,产品框架、交互规范、视觉规范、前端规则,同时也是基于整合规范所创造的一套创新的工作模式。



C .「团队能力要求 


设计体系的建立,需要整个产品团队拥有一致的目标,并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度


同时,体系化的建立和推动,也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节,是非常有条件成为推动者的角色的。


当然,这就要求设计师拥有更丰富的横向能力。


一方面,设计师需要将自身的能力边界进行拓展,与上下游的职能保持密切的沟通,并解他们的诉求。只有当设计体系满足各方利益时,体系化才有推动的空间。


另一方面,对于产品侧与开发侧人员,设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限,增强产品的综合竞争力。



D .「 构建方向 


设计体系并非超脱于产品之上,而是根植于产品的成长过程中。


想要推动体系化的建立,必须充分了解产品发展的基本规律。产品处于不同的生命周期,所要解决的问题是不同的。在正确的时间做正确的事情,并对未来的形态进行规划,才能逐步让设计体系根植于产品、融合于产品。


因此,在下一章,我们首先来了解一下B端产品的生命周期。




四、「 剖析 」B端产品的生命周期

-


对于设计师来说,首先要更宏观地了解产品所处的生命阶段,才能知道设计需要解决的问题是什么,并以此有针对性制定不同的设计策略,最终帮助产品构建完善设计体系。


本章更多的是对B端产品的发展阶段做一个剖析,而不同阶段具体的实施策略,会在后面讲解。



「 产品生命周期概述  


类似于人的成长历程,一个新的B端产品从诞生到逐步扩大,通常都会经历几个不同的生命阶段。


B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。


B端产品从立项到下线,产品会处于几个典型的不同状态中,这就是产品的生命周期。通常来看,大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期,直至最终进入暮年期。


而产品的商业价值,也会伴随着产品的发展而变化。在通常情况下,伴随着产品的逐渐成长,其商业价值也会随之增长,并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时,则基本算是进入了暮年期。


那么,不同的生命周期中,产品将会遇到哪些问题?而为了保证产品的持续发展,产品团队又需要做哪些事情呢?



A .「 初创期 」解决核心问题,产生价值


初创期,即产品已经从构思到研发,并成为了初步的产品。这个时期,产品虽然还不能覆盖完整业务,但已经能够顺利运行


从构思到创意,再到实践落地。B端产品的诞生,通常源于在行业内深耕多年的资深玩家。在不断地实践中,通过创意与实践,找到了一条能够帮助行业解决问题、提升效率的路径。


在这个时期,产品需要解决以下几个问题: 


1)用户是谁?


B端业务的本质,就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品?哪一类用户的问题最需要通过这种方式得到解决的?这些都是需要在早期非常明确的。


站在普罗大众的角度去规划产品固然是好的,但成功的产品都始于一小部分早期用户;B端产品的用户通常来自某一垂直领域,首先让他们喜欢上你的产品,然后慢慢向外拓展至更大的人群当中。


想想看,最初一千名喜欢你产品的种子用户可能是哪些人?


2)产品能够解决什么问题?


我们要为用户解决什么问题?“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点?


这个时期,团队需要拜访大量的目标用户,通过交流获取痛点。我们必须验证这个需求的真实性,以及我们的解决方案是否具备一定的可实施性


我们可以通过更具象的UI或流程,初步展示想法,不断优化。最终形成一个可验证的初步产品Demo,并通过Demo进一步与潜在用户进行沟通。


3)这个问题是否普遍?是否具备标准化的可能?


不同企业的需求是有差异的,如何将个性化的需求抽象成共性的解决方案?如何权衡范围与成本之间的关系?我们要将不同企业的需求进行抽象,形成标准化的解决路径。


这个阶段,我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品,要为种子用户带来端到端的精准体验。如果他们不理解产品功能,不知道如何或为什么使用,或是发现其性能低劣、bug 太多,无法达到“可行”的程度,那么你的假设就难以得到有效验证。


4)是否能够形成完整的商业闭环?


用户是否真的会为这个产品买单?换句话说,产品是否能赚钱并且养活整个团队?


B端产品在初创期,最重要的是快速验证产品与业务的亲密性,能否完成既定的商业战略。产品团队需要通过磨合业务,快速调整业务解决方案和产品架构。


不仅是产品的打磨,整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功,我们需要真实地完成这一套闭环的操作,并基于此做团队毛利模型的测算。 


解决问题,带来价值,并且能够将价值转化为收益,这才是产品可持续发展的关键。只有跑通完整的商业模式,拥有长期的盈利预期,产品才能顺利进入下一个阶段。



B .「 成长期 」能力完善,产品扩张


成长期,即产品形态初具完善,并具备完整商业闭环之后,处于快速成长的时期。这个时期,产品将进行快速的迭代,覆盖的业务一天比一天完整,能满足的业务需求越来越多,而产品为业务带来的价值越来越大。


与新生期的区别在于,新生期时的迭代方向还未完全明确,迭代更多的是尝试,磨合业务与产品。而在成长期时,产品的迭代方向已经是非常清晰了的


1)更多用户,更多真实需求


产品在真正投入运营之后,所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖,我们将会接触到越来越多的真实用户,以及更多的真实需求。而这些用户与他们的诉求,将会成为产品发展的指引。


2)解决更多问题,业务范围扩张


经过长期的打磨,产品的形态和可用性已经初步成熟了,商业模式也已经初步跑通。随着更多的真实需求,产品将会选择有价值的方向扩张业务范围,从“解决一个问题”逐渐走向“解决一系列问题”


3)功能完善,产品体量快速增加


伴随产品的快速迭代,产品的基础功能会逐渐完善,同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面,最终逐渐叠加为一个完整的大型产品。


4)组织逐渐完善,人员专业化


随着业务扩张,组织架构逐渐完善。为了提高专业性与效率,团队人员从“多面手”逐渐转化为专业化方向。与之对应的是,团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功,这一套完整的团队模型在各模块中不断地复制。



C .「 成熟期 」效率提升,快速增长


成熟期,即产品的形态已经稳定,并能够创造持续的商业价值。处于成熟期的产品,肯定是已经进行商业化运行的。反之,没有达到预期的商业价值的产品,不能算成熟期。


进入这个阶段时,产品已经实现了产品-市场匹配。但是,我们需要对整个产品、以及团队进行一系列的调和与优化,才能让整个产品的形态与运作方式更加合理,以便将产品推向更广阔的市场


1)产品效率、组织效能提升


经过一系列的快速发展,产品体量通常都会比较大,而团队成员也快速扩张。随着一致性成本、沟通成本增加,势必会造成研发效率、组织效能会下降。因此,如何降低产品的单位研发成本?如何让整个团队的组织效能达到最佳状态?是需要解决的问题。特别是当产品具备一定的客户数量以后,单位研发成本的降低将会极大提升产品整体的利润率


2)产品设计-研发标准化,构建完整链路


通过产品设计-研发标准化、数据架构标准化,打通不同模块的壁垒,提升模块化与灵活性。将单点之间的竞争力相互配合,形成“场域”竞争力


产品的单点也许不能保证都有最佳的竞争力,但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环,将会形成强大的整体竞争优势。同时,产品设计-研发标准化,能够增加产品售卖的灵活性,通过灵活的组合方式吸引不同的用户,提升销售灵活性与成单率


3)提供高质量的用户体验


产品最终是给人用的,用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧,以及用户群体的逐渐年轻化,用户体验将成为企业在选择产品时的重要考量因素,也是口碑传播的重要途径。


由于在“产品-市场匹配”阶段需要尽快地推出产品,所以在设计开发过程中可能遗留诸多问题,需要进一步打磨优化。产品设计需要与开发具备高度的一致性,视觉交互是否合理,前端代码是否准确合理,操作反馈是否高效等问题,都需要这个阶段来进行调和。


4)教育市场,卖给更多的人


当产品逐渐成熟并具备一定体量之后,单靠销售跑单是远远达不到发展要求。这个阶段,需要市场部人员对市场进行教育,聚焦不同的行业领域,从“点式营销”转变为“面式营销”,并配合销售人员进行产品的售卖。因此,在这个阶段,产品的品牌力、核心能力的传播将至关重要



D .「 暮年期 」商业价值降低,发展逐渐停滞


暮年期,即产品发展停滞甚至倒退,逐渐失去商业价值的产品。


B端产品进入暮年期的原因,主要有两个。一是,伴随着业务的发展,产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是,伴随产品的使用时长,产品将变得臃肿和迟钝,逐渐难以敏捷地满足业务需求。


很多时候,商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品,根据商业战略,产品经理既有可能要延长产品的寿命,也有可能持续保障产品完成顺利换代。当然,更多暮年期的B端产品,由于业务的调整,最终迎来生命的终结。


需要注意的是,很多产品因为在成长期、发展期无法建立有效的产品控制机制,导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”,非常有可能加速产品暮年期的到来。


因此,是否能在前三个阶段建立健康、完善的设计体系,是产品能够获得更长生命力、更多价值的关键。




NEXT

「 下期预告 」设计体系的构建法则  

-


你的B端产品处于什么生命周期?在这个阶段产品要解决的问题是什么?而在这些过程中设计体系又应该如何构建?


设计体系的建设并非一蹴而就,通常是伴随着产品的而发展逐步建立的。在下一篇文章中,我们将基于B端产品的发展阶段,带你详细了解设计体系的正确构建方式


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

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


文章来源:站酷   作者:Jady13_剑杰

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

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


如何设计友好易用的表单

ui设计分享达人

表单对于用户和产品同样重要。当我们需要收集数据时,表单是我们最常采取的方式(也许是由于在互联网普及之前,表单就已经长期应用于我们日常生活中 )。因此,将表单设计得友好易用是提高用户信息填写完成率的关键。


表单拆解

表单的样式会根据业务目标、内容的不同而发生变化,但是有一些基础的组成部分能帮助用户快速顺利地完成表单的填写。


1.类别标题:类别标题能够帮助用户浏览表单并同时解释整个表单的大致内容是什么。当你需要把被收集的信息分类为多个部分时,比如个人信息、职业信息和财务状况,这时类别标题就可以派上用场。


2.文本标签: 文本标签能够提示用户在每个输入框中应该填写什么样的信息。


3.提示文字:文本标签的附加说明。


4.错误信息提示:向用户反馈为什么输入框中输入的信息有误。


5.重要行为召唤按钮:表单末尾的按钮,用来提交表单上输入的内容。



表单状态


在用户使用表单时,有三种最基本的状态能够帮助用户完成操作。


1.默认状态:默认状态是用户未进行任何操作时的状态。


2.激活状态:当用户点击输入框后,输入框就变成激活状态并通过样式的变化强调显示。如果用户视线离开了屏幕一小会儿,这个状态可以帮助用户快速浏览定位。


3.反馈状态:此状态一般在完成一个信息的填写,并进行下一个字段输入的时候出现,让用户了解输入的信息是否正确。对于一些无法立即验证的信息可以在用户提交表单的时候进行反馈。



设计原则


1.保持简单:将表单设计得短且简单。只收集必要的信息,避免让用户分开填写姓氏和名字(分开填写姓氏和名字一般只存在于外国网站)。允许用户查看已输入的密码,而不要让用户填写两次密码去确认。


2.使用内嵌提示:当用户输入信息有误时要给出错误提示,同时要将错误原因注明在相应的输入框旁。


3.组合相关项:将有相关性的填写项组合在一起,然后将它们以合理的顺序整理,这可以帮助用户不必花费太多认知成本去填写必要的内容, 这个过程不仅轻松而且只需要用户很短的专注时间。


4.使用左对齐的文本标签:始终在输入字段上方放置文本标签。不要用文本标签替换提示文字,不然用户在提交表单之前很难检查他们输入的信息,会浪费较多的时间。请把标签放在输入字段上方并且左对齐。


5.根据输入信息的格式设计输入框:简单来说,确保输入框的格式与输入信息的格式协调。比如说,地址的输入框应该比手机号码的输入框更长。


6.CTA按钮(行为召唤按钮)

一般表单的后面会有一个或多个按钮,比如“提交”、“下一步”之类的。在按钮有多个的情况下,最重要、或者是最想要用户点击的按钮应该要突出,而其他按钮弱化处理。

当使用模态视图状态下的表单时,有时会有一个关闭按钮用于关闭模态视图。另一种设计方式是使用叉号图标并将其放置在顶部的右侧边缘,它可以代替关闭按钮,如图所示。


7.搜索字段:当网站内容比较多的时候,把搜索字段做的明显些,方便用户对网站内容进行筛选。同样的,在用户使用了搜索功能获取到结果后,不要清除搜索框内的搜索关键字,因为用户可能会查看最初他们搜索了什么。


8.清晰:向用户清晰地表达信息,不要出现含糊不清的词。用户可能不愿意填写表单,所以尽可能清晰简单。如下图的绿色按钮文字使用“提现”而不要使用“确定”。


原文:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

作者:Momoh Silm

译者:Ballen贝林、春风似蛋挞

本文翻译已获得作者的正式授权

授权截图

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

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


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

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

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

outlook HTML签名制作方法

前端达人

   最近公司要求统一邮件签名格式,好一顿折腾啊!因为统一提供的签名是HTML格式 而outlook不直接提供HTML的签名生成和修改。但其实outlook的签名是有HTML格式的,并且可以直接编辑,方便而且更好控制,只是outlook对HTML的支持限制很多,很多元素无法使用。以前基本上不会写HTML,为了这个签名,HTML倒是学会了不少,也算意外收获吧。痛并快乐着!

      首先,要制作outlook签名,需要在outlook先生成一个签名,起个名字就行,反正内容是要重新修改的。打开outlook,依次打开工具-》选项-》邮件格式,就能看到签名按钮。点击签名按钮,打开签名和信纸对话框,选电子邮件签名选项卡,然后点击新建,输入个名字,OK。第一步到此结束。


      然后打开“C:\Users\你的用户名称\AppData\Roaming\Microsoft\Signatures”目录就可以看到三个文件,一个文件夹,其中那个htm文件就是我们签名的htm版本。用记事本打开这个文件后可以看到很多的html代码,这些都是outlook自动生成的,对我们没有用处,全选然后删除吧。.rtf和.txt两个文件是签名的富文本和纯文本格式,可以直接删除那两个文件。和.htm同名的文件夹千万不要删除,那个html文件需要那个文件夹,它们是一体的,这个文件夹里会缓存一些图片,看需求吧,不需要就可以直接删除,特别对于签名图片是网络引用的那种,一定要删了,要不然outlook只是用那些缓存图片,即使网络图片更换,它也不会变化。

      最后可以将以下代码复制进那个htm文件

<head> 
</head> 
<body> 
<hr style="width: 210px; height: 1px;" color="#b5c4df" size="1" align="left"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="1"> 
<tbody> 
<tr> 
<td valign="top" width="55" height="60"> 
<img src="http://www.xxxxxx.cn/email/logo.gif" width="45" height="45"> 
</td> 
<td valign="top" height="60" style="mso-line-height-rule:exactly; line-height:2.5;font-size:12px;"> 
<strong><span><font face="宋体">你的名字</font> ┃ <font face="宋体">营销中心</font><br></span></strong> 
<strong><span style="color:#C42634;"><font face="宋体">xxxxxxxxxx有限公司</font></span></strong> 
</td> 
</tr> 
</tbody> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="1"> 
<tbody> 
<tr> 
<td valign="top" style="mso-line-height-rule:exactly; line-height:2.5;font-size:12px;>  
 <span><font face="宋体">移动电话</font> <font face="Tahoma">Mobile:139-8765-4321</font> <font face="宋体">办公座机</font> <font face="Tahoma">Office Tel:029-1234 5678 Ext.604</font> <font face="宋体">公司网站</font> <font face="Tahoma">Web:http://www.xxxx.com</font></span><br> 
<span><font face="宋体">电子邮箱</font> <font face="Tahoma">E-mail:xxxxxx@xxxxx.com</font> <font face="宋体">公司地址</font> <font face="Tahoma">Address:</font><font face="宋体">xxxxxxxxxxx</font><font face="Tahoma">x</font><font face="宋体">层</font><font face="Tahoma">xxxx</font></span><br> 
</td> 
</tr> 
<tr> 
<td valign="top" style="mso-line-height-rule:exactly; line-height:1.5;font-size:10px;color:#CCCCCC;"> 
<span><font face="宋体">保密提示:本邮件及其附件含有保密信息,受商业秘密相关法律法规保护,不得泄露,仅限于发送给上面地址中列出的个人或群组合法使用。禁止任何其他人以任何形式使用(包括但不限于全部或部分地泄露、复制或散布)本邮件中的信息。如果您错收了本邮件,请您立即电话或邮件通知发件人并删除本邮件!谢谢您的合作。</font><font face="Tahoma"> Confidentiality Notice: This e-mail and its attachments contain confidential information, which is protected under commercial secrets related laws and regulations, and intended only for the legitimate use of person or entity whose address is listed above. Any use of the information contained herein in any way (including, but not limited to, total or partial disclosure, reproduction, or dissemination) by persons other than the intended recipient(s) is prohibited. If you receive this e-mail in error, please notify the sender by phone or email immediately and delete it.</font><br></span> 
</td> 
</tr> 
</tbody> 
</table> 
<img src="http://www.xxxxxx.cn/email/ad.gif"><br> 
</body> 
</html> 

      在outlook签名中最难处理的行高,line-height属性,outlook的这个属性只能支持在块上设置,比如可以给td标签设置line-height,但是不能给span设置line-height,否则行高设置是不起作用的。

     具体内容可以根据实际情况改写。修改签名文件后,最好关闭outlook重新打开一下,要不然outlook里面会有缓存,造成显示错误。



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

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


转自:csdn 作者:ssmile

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

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

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


使用outlook制作签名

前端达人

制作签名的几种方法

你好,最近公司需要我制作公司签名,之前就想着不就是签名嘛,多简单的事。
但是经过一系列的尝试之后,发现还真不容易。主要是因为outlook新建签名的编辑栏不支持直接使用html编辑。下面我介绍我尝试的几种方法

直接在编辑器中编辑

只有文字的话,那就直接在编辑器中输入文字进行排版就好了,没什么难度;

有文字与图片结合,这种情况就要看是怎样的排版了,outlook默认的图片插入模式是嵌入式,这样的话就在文字就在图片的右下角,不能并排显示,很不实用。那么想修改图片的插入模式可以在 “文件》选项》邮件》编辑器选项》高级“中修改 具体位置如图
修改图片插入/粘贴的方式这种方法的限制很多,比如你将图片插入修改为“四周紧密型”,那么你插入的图片在编辑器中看不到,实际使用的时候是可以看见的。这就很别扭了,还有就是图片好像会成为附件,如果有你的照片你不想别人每次下载附件将你的照片下载过去吧·······
由于这种方法并不能满足我的需求,所以我找啊找找到了另一种方法

在Word中编辑好了复制过去

在word中编辑好图片文字的样式与排版,直接复制,然后到outlook编辑签名的编辑器中邮件粘贴,注意粘贴的时候选择保留源格式。
这样有一个问题,就是你新建邮件选择你的签名时会发现排版可能跟你的不一样,或者到手机上文字直接成了一个字一行的现象
所以也直接pass

直接在生成的文件上编辑

在后来一次偶然的机会我发现,每次新建签名就会在一个文件夹中生成四个文件,修改了这里面的文件也就修改了签名。所以我决定直接在源文件上修改。那个文件夹地址是:“C:\Users\×××\AppData\Roaming\Microsoft\Signatures”自己把×××换成自己的电脑用户名,如果不知道的话就Win+R,输入cmd,Users\后面的就是自己的电脑用户名。四个文件如下图:
四个源文件
其中.files文件是存放一些图片以及其他的几个必要文件;.htm文件就是代码源文件,类似于html;.rtf就是视图;.txt就是里面的纯文本。这里面最主要的就是files与htm。
所以我新建了一个空白签名,然后在htm里面修改代码,这需要一些html基础。把需要的图片放入files文件夹中。
但是这个有一个缺点,就是图片可能显示不了,你把图片放在服务器别人在outlook的PC端上看需要点击下载图片才能浏览,放在本地别人根本看不见。还有就是outlook限制了很多html的语法,很多样式什么的都不能用。
所以PASS

直接用word新建htm格式编辑

后来经过查找各种资料发现。word生成的htm文件其实是与outlook签名生成的htm类似的,他两的语法是一样的,毕竟是一家啊。还发现了任何签名其实对表格的适应性与兼容性是最好的。
所以我就用word新建了htm文件,然后用word编辑。首先是插入表格,然后在一整张表格中完成你的排版,添加图片什么得都没问题。排版完了之后,直接复制,到新建签名得编辑器中粘贴,注意保留源格式。。这里得图片插入模式要为嵌入式,怎么修改前面已经说了。
这种方法是最完美适应的!!!

图片不清晰问题

有时候会出现编辑的时候图片清晰,但是发送出去图片就模糊了;有两点:
1.修改图片的dpi为96,图片格式最好都为jpg吧 ,因为如果不是outlook会帮你改过来的;
2.插入的图片不要缩小,最好插入前就弄好像素大小,插入进去是怎样的大小就怎样。
否则都会被压缩。


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

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


转自:cadn 作者:ME小鬼

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

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

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

设计体系构建法则 | 论B端产品的体系化构建(下)

seo达人



上一篇我们已经讲述了产品发展的生命周期,而现阶段你的B端产品处于什么生命周期?在这个阶段产品要解决的问题是什么?在产品发展的过程中,设计体系又应该如何构建?本文将基于B端产品的发展阶段,带你详细了解设计体系的正确构建方式。

 

图片

 

前言

对于产品体量较大、发展周期相对较长的B端产品来说,任何一个设计决策的沉没成本都是巨大的。

若在产品初期就过多制地定规范,就容易限制产品设计的创意性;而在产品框架成熟之后盲目地进行“创意”,则容易造成体验一致性的缺失,以及大量的重复开发工作。

在合适的阶段做正确的事情,能够极大降低产品的设计和开发成本,保证最高的投入产出比。

在产品的不同生命周期中,产品需要解决的问题、工作内容、建设方向是不同的,而对于设计的需求也会存在差异。因此,针对不同的阶段,需要制定不同的策略,才能让设计发挥最大的价值,并逐步构建完整的设计体系。

你的产品处于哪个阶段?在这个阶段中,设计师应该重点做哪些事情,才能逐步构建设计体系呢?

图片

 

「新生期」确立风格,关注核心场景的最优体验

如果你的产品目前处于新生期,那么恭喜你~ 你将有机会从零开始构建一套完整的设计体系。

处于新生期的产品,首先要解决的两个核心问题是:用户是谁?需要解决什么问题?

产品的目标用户群,将决定你的产品风格;而需要关注的核心问题,便是产品的核心场景体验。因此,在产品设计上,也将围绕这两个重点来展开。

 

A.「 确立产品风格 」感知性模型的初步构建

首先,我们要为产品创建产品主风格,并以此基础进行延展,构建初步的感知性模型。感知性模型是控制产品外观的一套设计规范,不仅包含产品风格,还包含以主风格为基础制定的组件视觉风格。

影响产品风格的因素很多,但其中最为核心的一定是“人”。

用户是那些人?(用户画像:如性别、用户年龄区间、工作、喜好等)将会决定产品的定位,进而决定产品的调性倾向。

竞品长什么样?我们还需要在前期进行充分的竞品调研,分析目前市场上的产品现状,在设计上保证产品的独特性,让用户能更好地记住产品。

图片

需要注意的是,感知性模型的建立,通常与品牌特征具有强相关性。为了保证品牌调性的一致,设计师需要思考如何在产品中植入这个“感知点”,并恰当地出现在不同的体验场景中,加深用户对于“感知点”的印象。

比如在网易七鱼的所有设计中,为了使所有场景具有统一的品牌调性,在图形风格、配色、界面布局的设计上都采用了一致的延续性。

图片

感知性模型的建立,其实与品牌DNA有异曲同工之妙。优秀而独特的产品风格,可以让用户拥有更好的记忆点和归属感,并成为用户传播的基础

 

B.「 关注产品的核心体验 」

在新生期,产品的核心功能将会是最主要的竞争力。

这一阶段,设计师应该专注于核心功能,将核心场景体验做到最佳。用户使用产品时通常处于什么场景?如何让用户更好地解决问题?流程是否可以更精简?通过不断地思考、尝试、验证,找到最佳的产品设计方案。

而非核心场景的设计,因为业务还在不断发展中,将会伴随大量的试错和调整。所以只需制定基础性的规范即可,否则反而容易限制设计师的发挥,对效率的提升也不明显。

当然,在设计之前,进行广泛的竞品研究也是必要的。竞品是如何解决问题的?我们是否拥有更优的解决方案?我们可以将一些好的、更高效的设计方式结合到产品中。

什么时机进行竞品研究是最佳的?我建议设计师先经过完整的自主思考,并拥有自己的解决方案之后,再开始进行竞品的调研。这样有利于产出更具创意性的方案,而不仅仅只是“比竞品好的方案”。

图片

需要说明的是,这里的体验指综合性的产品体验,包含了产品核心逻辑、交互方式与视觉设计,将会涉及到产品不同的职能。

产品流程决定了用户解决问题的路径。是否能够解决用户核心痛点?是否合理?是都具备通用性?这些都决定了产品未来的用户广度与销售范围;而产品交互则决定最合理的人机交互形式。如何更高效?如何使操作更方便?如何让新用户拥有更低的学习成本,等等……

图片

这些工作虽然在视觉设计师工作的范畴以外,但对于产品至关重要。作为产品团队的重要成员,我建议设计师主动去学习并参与到这些环节。

在设计中主动思考,提出自己的看法与建议,这样才能真正的从根本上去提升产品的核心体验,增强产品的竞争力。

 

「成长期」通过组件库建立“引用”模式,构建团队协作模型

产品已经进入成长期,意味着产品的基础形态已经基本形成,并且有了清晰的迭代方向。

如果你的产品在这个时期,设计团队应该及早让产品的”生产流程“标准化。因为产品的页面、模块数量将会开始迅速增加,标准化越早,能够节约的成本也就越高。

通过组件化建立“引用机制”,可以让产品拥有统一的“零件”标准。之后,再围绕“零件”标准,构建团队的协作模型,使整个产品的“生产线”更加标准化,从而提升产品的效率与品质。

图片

 

A.「 启动产品组件化,建立“引用机制” 」

进入成长期,在产品形态初步稳固之后,就可以开始启动产品组件化了。

组件化,就是将页面拆分成可复用的最小单元。如果将页面比喻成物质,那么组件就类似于“原子”,每个组件独立封装,又可以集中维护,以此来管理和维护整个页面。

图片

组件本身又分为基础组件与复合组件,就像“原子”与“分子”的关系。基础组件可以作为一部分嵌套在复合组件中,这也可以保证复杂组件与基础组件之间的延续性和可控性

图片

与设计规范不同的是,因为组件库包含了封装的前端代码,其统一性在执行上往往比设计规范要彻底得多。

而组件化更长远的价值,在于“引用”机制的建立,以及基于组件库进行的工作模式升级。引用模式可以使所有相同的组件都有共同的控制节点,使整个产品形成可控的逐级链路,对所有末端组件进行集中控制。

图片

在封装的组件库中,我们还可以植入统一的API接口,使所有组件可以进行主题定义。比如整体的配色、圆角度数、间距、模式等等。这样,每个组件将会有非常多样化的配置方式,以此来适应不同场景、不同的风格

是不是很像前文中提到的自然构成算法?基础物质 X 随机变量 X 算法/秩序 = 可控的复杂系统。

图片

任何一个新的产业进入成熟期以后,都会逐渐将某些环节进行标准化,以此来提升效率、降低成本。通过无数个标准化的结合,逐渐形成体系,最终影响整个行业,而数字产品的发展,也必然会经历这个阶段。

通过组件库,不仅可以保证每个组件样式、交互、反馈上的一致性,还能统一对组件进行优化和维护。极大地提升了产品的可控性,降低产品开发成本,也增强了产品的使用体验。

当然,在组件库的创建上有不同的选择,使用开源组件还是自行研发,需要企业根据自身情况计算投入产出比。自研组件库是一个庞大的工程,虽然成本较高,但对于组件的匹配性、易用性、稳定性等方面都会有较强的优势。对于体量较大的B端产品来说,通过组件库节约的开发成本,往往远大于开发成本,而这也是大企业选择自建组件库的重要原因。

图片

从零到一进行组件库的创建,将会经历一个比较长的周期。常规的流程是:产品经理负责组件的定义,之后由交互设计进行单个组件的交互原型、交互规范的设计,在三方评审通过后才会进入视觉设计的阶段。

在组件的视觉设计中,不仅需要考虑单个组件的规范性,还需要考虑整个组件的数值一致性、代码的复用性、复合组件的嵌套关系,以及全局API植入等细节因素。关于组件库的从零到一创建,之后会有单独的文章进行概述。

 

B.「 团队协作模型的升级 」

随着产品模块的逐渐增加,不同模块的产品经理、交互设计师、视觉设计师等也将快速增加。团队较小时,产品的一致性与统一性可以通过小范围沟通去解决,一旦团队规模扩大以后,这种模式便难以解决问题

一方面,组件本身的标准需要符合不同模块的需求。另一方面,不同模块的产品框架、规则需要有一个统一的标准,才能避免产品“混乱度”的不断增加。

因此,在产品的成长期,我们需要一个对组件标准、体验一致性进行管理的团队,可以暂且称之为——产品设计标准委员会

图片

委员会可以是虚拟的项目组,也可以是一个群,在有需要的时候进行讨论,并进行文档的沉淀。当遇到有可能跨模块的内容,或者能够复用于其他模块的通用方案时,都要通过委员会进行评审。同时,委员会可以定期对产品内容进行排查,查看在产品中是否含有可统一、可标准化的内容。

图片

比如在七鱼工作台中,抽屉式内容是每个模块都会出现的。但是,因为不同模块是由不同产品经理负责,所以内容模块的标准就会存在差异,比如模块的布局、信息展示的排版、甚至ICON都不一致。

这就会造成两方面问题。一方面,用户在切换模块后,需要重新对信息格式进行适应,甚至无法关联相同的信息,导致学习成本增加。另一方面,当一个模块需要接入另一个模块的抽屉内容时,内容标准与样式的差异性,也为大大增加开发和维护成本

图片

这种全局的统一设计标准,单独一个模块的设计师或者产品,都是很难推动的。必须拥有一个标准审核的机制,使不同模块的同类内容具有相同的设计标准,才能使产品在发展中始终保持有序发展,避免产品走向混乱,最终导致产品“失控”

团队协作模型的建立,将会逐渐沉淀出一系列的“跨模块设计标准”,而这些标准将会成为逐渐整合为“规范体系”,最终构建成为完整“模式语言”。

 

C.「 设计中台化 」

在产品的成长期,随着设计团队的人数的增加,设计团队的中台化也是需要考虑的事情。特别是随着Figma以及其他云端协作软件的出现,也使团队设计文档管理与协作的方式更简单了。

图片

对于设计团队来说,设计中台的建立主要有以下几个优势:

  • 标准文档管理:设计中台将会作为所有设计标准的来源,让所有设计师可以进行调用。比如组件库设计稿的存放与维护、ICON绘制规范、全局Banner规范、框架规范等。
  • 资源共享:将一些通用的、质量好的设计元素进行共享,提升利用率和统一性。
  • 项目协作:大型项目的多设计师协作
  • 资产沉淀:随着项目的进行,我们会积累大量的设计资源。设计中台不仅是设计稿的存放库,也可以将优质的设计资源进行分类,形成团队资产,方便设计师进行学习与调用。

图片

设计中台的建立,能够引导标准的统一,降低团队的沟通和协作成本,是推动设计体系建设的重要因素。

 

「成熟期」构建模式语言,整合功能性模型+协作模型

在经历成熟的的快速扩张之后,产品形态将最终进入一个相对稳定的阶段。其模块数量、页面数量已经足够巨大,虽然可能还伴随着一些功能的增加或完善,但这座“大楼”已经基本成型了,“楼层”已经基本确定,剩下的可能是基于“楼层”建立更多的房间等等。

在这个阶段,设计团队需要将前期积累的“标准框架”构建为统一的功能性模型,并整合功能性模型(组件库)和协作模型,形成真正的设计体系。

 

A.「 逐步建立模式语言,构建产品搭建模型 」

随着协作模型的建立,不同模块在进行设计时,都会进行标准的统一。在成熟期之前,因为产品形态还在扩张,这个标准都是比较零碎的。当产品进入成熟期后,设计团队就需要将这些零碎的规范进行梳理,形成规范体系

比如下图的产品构建框架规范,便是产品搭建的标准之一。比如一二级菜单的出现位置,页面中标题、操作区、列表应如何布局等等…

图片

以及在具体的功能页面中,不同页面的细则规范、应用切换方式,页面的预加载样式如何统一等。

图片

最终,我们会将所有的全局规范、框架规范、信息架构,都整合为完整的模式语言(规范体系),以此来指导设计师/产品经理进行产品的统一设计。

图片

 

B.「 功能性模型+模式语言 」产品快速构建

完成模式语言(规范体系)的构建后,结合我们的功能性模型(组件库),就可以初步形成了产品的快速搭建能力——即一些常规的页面,产品经理可以在没有设计时参与的情况下,自主进行快速搭建。设计师只需要在搭建完成后,针对页面进行走查即可。

图片

整个搭建过程类似于乐高积木,通过单个组件进行框架搭建,然后遵循页面的结构进行组件填充,之后形成产品的功能模块,再更进一步,将多个功能模块再搭建成业务系统。

通过“样式组件化”+“规范体系化”,再配合逐步完善的协作模型,整个产品团队最终将形成了完善的设计体系。

图片

快速搭建体系的建立,可以创造更高效的资源分配模式

一方面,对于产品来说,这意味着大量的资源可以从简单、重复性高的工作中脱离出来。通过快速搭建体系,标准化和简单的设计任务就无需设计师参与,可由经过培训的产品经理直接进行搭建,而前端开发因为组件化与设计标准的统一,代码复用率也大大提升,节约了大量的开发资源。

图片

另一方面,因为“生产原料”与“生产流程”的统一,使得产品的设计一致性得到极大的提升

 

C.「 提供高质量的用户体验 」

在产品进入成熟期后,产品通常已经具备了庞大的用户量。而在B端产品竞争日趋激烈的今天,用户体验将会越来越成为产品的核心竞争力之一。因此,提供高质量的用户体验,将会成为非常有价值的事情。

特别是在产品快速发展的成长期,为了配合版本迭代,而忽略的大量体验问题,都要在这个阶段有针对性的进行解决。

而设计体系的建立,使得设计师拥有更多的时间专注于关键场景的体验升级

图片

产品设计团队可以定期针对产品进行体验评估扫描目前产品出现的问题。确定列表后与各相关方确定优先级,之后根据优先级进行排期,并跟踪结果,最终验证体验问题的解决成果。

图片

比如为了解决页面在加载中的卡顿问题,设计团队为七鱼的主要页面设计了一套页面预加载模式。提升页面流畅性,尽量减少用户等待中的焦虑感,也对模块的结构有一个预期。

undefined

为了解决不同屏幕的最佳适配问题,我们与前端开发一起设计了一套多段式自适应适配方案,让屏幕适配不那么生硬,同时提升屏幕的使用效率。

undefined

以及在网易七鱼的产品中,会伴随着大量的筛选任务,经常会占用巨大的屏幕空间。为了解决这个问题,设计团队打造了可收缩式的“自适应超级筛选”。使客服人员在保证精准筛选的前提下,最大限度地提升屏幕使用效率。

undefined

而在使用场景最多、占比最高的表单组件中,我们制定了层级式表单规则,根据不同类型的字段,赋予合适的宽度,最大化地提升了屏幕的使用效率

undefined

这些产品体验的优化任务,大多都由设计团队进行推动,取得了非常良好的效果。这使得我们的产品在大的维度拥有极高一致性的同时,在不同的场景也具备高品质的设计体验。

 

「生态扩张」基于设计体系,快速创建新产品

一套成熟的设计体系建立,意味着产品的“基础零件”和“生产流程”都已经成熟。这种模式一旦落地,企业不仅可以快速生产新的B端产品,还可以基于这个模型对老的B端产品进行改造,最终构建完整B端产品生态。 

 

A.「 快速创造全新的产品 」

通过分析B端产品的构建方式,我们可以发现:不同B端产品的构成方式是相同的,区别仅在于产品的风格(感知性模型)和模式语言(产品的框架规范)的差异。而产品的组件库、协作模型以及快速搭建流程,都是可以在不同的产品中进行复制粘贴的

undefined

因为组件API的存在,我们可以将同一个组件适配不同的产品风格,并且基于改造后的组件库,构建产品的整体框架规范。比如下图中的三个产品,虽然他们的风格不同,但都是使用FishDesign组件库进行API定义的。

undefined

同时,当协作模型在一个产品中运转成熟后,我们可以将这种协作方式快速复制到新的团队中。之后,随着新产品逐渐进入成长期,我们可以同样按照上文所讲的方式为产品构建整体的框架规范(模式语言),并应用相同的快速搭建系统等等。

我们可以发现,当拥有一套成熟的设计体系之后,构建一个新产品的成本将大大降低

基于这种模式,所有的组件仍然引用自同一个组件“源”,也就是说,企业仍旧可以通过组件库保证所有产品的可控性。我们仍旧只需要维护一个组件库即可,而这也将为企业节约大量的开发资源。

 

B.「 产品融合,打通企业服务全流程 」

一个B端产品,通常是为了解决“某一类”问题而诞生的。而B端企业的最终目标,一定是为企业解决“一系列”的问题,甚至是“全流程”的问题。因此,在一个大型B端企业中,当所有的子产品都逐渐成熟以后,产品的整合通常会成为下一个目标。

在传统的B端企业中,产品整合通常会是一个非常大的问题。因为不同的产品可能采用不同的前端框架、不同的风格、不同的操作行为等等。可以说,产品整合的成本约等于重新开发一个产品。

但是,如果所有的产品都采用同一套设计体系,那么产品整合将会容易很多

undefined

因为所有产品都是基于同一套设计体系进行构建的,不同产品的区别仅在于框架规范(模式语言)以及核心场景操作方式的差异。所以,我们只需要对这些产品的整体框架规范进行统一,就能逐步打通不同产品

undefined

最终,通过产品设计体系+一致的产品框架规范,我们将几个不同的B端产品整合成了一个大型的B端平台。在这个平台中,原先所有子产品的能力都在其中,同时我们也可以将所有的能力在同一个平台中串联起来,形成完整的解决方案。

而对于我们服务的企业来说,我们不仅拥有众多可单独购买的“多样化服务”,也拥有一系列全流程的“大型服务能力”。我们既能解决小问题,也能解决大问题,产品的竞争力将会大大提升,我们所能服务的客服范围也将越来越大

 

「未来前瞻」B端产品设计的发展局势

随着B端产业的快速发展,在未来一定会出现更多的创新的设计趋势。在文章的最后,结合自己浅显的认知,跟大家来聊一聊未来的新趋势吧~

A.「 设计“算法”化,框架智能化 」

即便是目前基于组件库的UI设计,产品模块的“拼装”上,更多的还是依靠个人感官,以及设计师的配合。虽然存在栅格系统,但显然在设计与前端层面并没有形成完整的融合。

因此,在未来的B端设计中,UI设计中部分“感知性”的模型,将会逐渐转化为“算法”

比如在所有的UI界面设计中,我们可以将4间距设定成一个代数值U(U=4px)。以此为基础,我们将模块内元素的间距设定为2U,模块间的间距设定为4U。通过这种方式,我们可以将所有的间距、层级以U进行表示。将所有的设计稿、前端开发都使用同一个代数U进行设定之后,所有UI的间距就实现了“代码化”。

undefined

以这种方式,全局的UI间距可以转化为“算法”,让机器自动生成间距。同时,当我们的界面在不同场景需要调整疏密感时,直接调整U的数值,配合栅格系统,就能实现全局等比调整

undefined

 

B.「 能力交叉,新型岗位诞生 」

在职能的细分上,一个很明显的趋势是,不同职能的能力范围将逐渐蔓延。在成熟的产品中,不管是产品经理还是设计师,他们的能力都会越来越向两端扩展,并趋于融合。

比如产品经理更懂交互了,视觉设计师也更懂交互,并且一部分成为了体验设计师。这就导致部分交互设计岗位会减少,产品经理将会承担部分交互工作,而另一部分则由体验设计师完成。比如为了让产品还原度更高,一部分设计师将会开始研究前端代码,而一部分前端则会拥有更高的设计与审美素养。

undefined

因为各职能之间的“交叉面”增加了,所以产品的“下限”更高了,而产品的整体品质也得到了提升

而在设计软件未来的发展中,这个趋势也将得到加强。产品设计师(产品经理+体验设计师)将能够在软件上完成从产品策划-UI设计-Demo演示-开发对接的全流程

undefined

另一个趋势是新型岗位的诞生。随着B端产品的逐渐成熟,一些大型的、成熟产品将会对各方面提出更高的要求。而未来可能将会出现以下两种职位:

数字体验工程师:

在未来,越来越多的体验将在虚拟场景、或者虚拟现实场景进行。产品体验的提升很大程度上将会依赖技术与设计的结合。因此,在一些大型的互联网公司,很可能会出现同时精通产品体验与前端技术的“数字体验设计师”。

undefined

产品架构设计师:

在大型的B端产品中,各产品经理往往负责不同的业务线,专注于本模块的架构。而设计师虽然制定规范,却难以推行至产品框架层面。导致了产品的顶层框架-产品UI规范-产品前端框架,这三者通常是分离的状态,二者将带来非常巨大的弥合成本

产品架构设计师的出现,将会以 [产品+设计师+前端架构师] 的角色,统筹所有的产品线,制定 [产品-UI-前端] 一体式的整体架构,让整个产品的标准完美兼容所有的模块,使整体架构更精简、更可控

 

C.「 跨端模块化,兼容性框架,全平台融合 」

随着移动互联网、物联网的加速,数字产品将会逐渐延伸至更多的场景。而多端的兼容性、一致性、成本也逐渐纳入到未来的思考之中

因此,跨端模块化、全平台融合将会是未来的趋势。随着Google的Flutter、华为的Harmony OS,都正朝着这个方向发展,而苹果也在尝试iOS、iPadOS、MacOS的三端融合。

undefined

很显然,对于产品体量巨大的B端产品来说,多端开发的成本是非常高昂的。而且,高昂成本带来的,却仍然是大量的体验不一致、版本难以管理等,而跨端的模块化,将是这一系列问题的答案。

比如网易会议在产品设计之初,移动端就直接采用了Flutter进行跨端开发,而桌面端(Windows、Mac端)则采用了兼容性框架。同时,为了使未来全端融合可以实现,我们对很多场景与组件都进行跨端的模块话设计,不管是设计稿还是前端数值,都实现了1:1的跨端统一。

undefined

可以预见,在未来的系统架构中,一定会以跨端模代码统一、全平台融合作为目标,而产品的设计也会逐渐往这个趋势发展,带来更多的可能性。

undefined

最后,希望华为的Harmonys能够成为第一个真正意义上的全场景融合系统,也希望中国所有的科技公司一起加油~

 

 

「末」写在最后

这段时间的变化也挺大的,经历了公司内的组织变革、拆分,伴随着离别、重组、成长、新生。心态上确实又成长了许多,也看开了很多事情。没有任何事情是一成不变的,你的安全感来能力和内心的强大。只是做好随时应对变化的准备,才能坦然的活在暂时的稳定中。

从整个宇宙的尺度来看,变化是永恒的。所有的物质都处于大爆炸的余晖中不断膨胀,就连时间也是如此。

熵增是宇宙的基调,而生命以负熵为生。生命就是要在不断克服变化,在变化中寻找平衡。努力与舒适、工作与生活、做人与做事,任何事情都是相对的,平衡是事物长期发展的关键。

随着年纪的逐渐增长,好像突然能够读懂一些“老书”了。不管是孔孟老庄,还是伟人的《毛泽东选集》,对于自然、社会、人的认识反思,都比我们要深刻的多。智能并不等于智慧,抖音和头条看再多,都比不上认真完整的去读一本书。

孔子曰:“子温而厉,威而不猛,恭而安。”

王蒙老师对此的解释很通俗:做人时刻做到面面俱到,是不容易的。从长远看,也就是求几个方面的平衡、均衡。温和很好,失去了坚定性与原则性就不好了,所以还要补上厉。威严是必要的,太凶猛莽撞了就伤人害人,提醒您悠着点,别那么猛恐怕是必要的。恭敬小心,如果变得哆里哆嗦,进退失据,闹心乱意,当然也是走向了反面,您还得安详踏实些。这三条乃是做人的辩证法。

希望大家能在工作之余,多看一些好书,多一些学习成长。

感谢大家的观看,下次再见~

 

推荐阅读书籍/文章:

《智能商业》—— 曾鸣;《设计的思考》——周陟;《设计体系》—— [英] 阿拉·霍尔马托娃;《深奥的简洁》—— [英] 约翰·格里宾;《机械宇宙》—— [美] 爱德华·多尼克;《万物皆数》—— 米尔埃卡·洛奈;《产品从0到1的4个发展阶段》;《B端产品生命周期》;《复杂》——梅拉尼·米歇尔

 

原文地址:设计剑道(公众号)

作者:徐剑杰


转载请注明:学UI网 »设计体系构建法则 | 论B端产品的体系化构建(下)



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

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



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

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

 



量化设计价值- 如何创建体系化的监控系统

资深UI设计者

随着用户体验设计的发展,我们已经过了仅依赖需求和直觉就可以完成产品设计决策的阶段了。数据对用户体验设计师的价值可以总结为两点:1. 数据可以在「产品设计决策阶段」提供了更多元的参考意见;2. 数据可以在「产品设计复盘阶段」提供更客观的评价标准


设计师使用数据的场景

无论所处哪一种设计阶段,总的来说设计师的数据需求主要可以分为两大类:

undefined


1.探索事物间关系的“内因/外因”:

是什么东西影响了用户的购买决策 ?我的新版网站首页的改版是否为产品提升了注册的转化率 ?这类需求的本质是探究一种事物间的欢喜和因果性,常用「推论性统计」、「相关&非参数校验」进行分析。对于这类需求,往往会有专业的数据分析师,用户研究设计师,数据产品经理承接。


2.发现数据中的“模式/异常”:

在一天之中随着时间的变化,用户的访问量有什么规律 ?这类需求的本质是在对已经发生的事物规律做一种总结 ,使用的统计方法更多的是「描述性统计」。对于绝大多数设计师而言,能够做到发现数据中的 “模式/异常” 基本可以覆盖绝大多数日常工作的需求。


本文主要关注解决设计师的第二类使用场景——发现数据中的“模式/异常”。目前各大互联网企业内部都会提供自研或者第三方的BI工具,因此笔者建议设计师可以通过建立一个包含关键的体验指标的数据看板系统,对自己负责的业务进行系统的总结和复盘。


以我曾经的工作内容为例,我们的产品是服务商家进行“前后端对接生产”的订单审核系统。【效率】是制造业至关重要的关注面,在一个企业用户的付费决策中也起到了相当重要的分量,客户使用我们的工具进行订单审核和流转的效率是整个用户体验模型中的重要部分。因此我们需要构建一系列合理的指标来判断订单系统的处理效率。除【效率】外,【用户行为】【用户特征】等都是设计师关系的信息。以【效率】为起点,最终我们构建了一个笼统的包含设计师所有要监测的信息看板系统


关键概念

本质上互联网产品中的看板(kanban)与自然科学领域研究人员的用 R 或者 Seaborn绘制的精美图表没有本质上的区别,差异点可能在于看板更加关注时效性,同时更加具备可交互性。

随着仪表盘工具和各种BI软件产品在人群中的普及,人们对仪表盘,指标(Metric)和关键绩效指标(KPI)的组成有不同的理解。为了确保我们都说相同的语言,我将定义一组术语,这些术语将构成我们讨论的基础:


  • 度量(Measure):度量是一段数字上可量化的数据。销售额、利润、留存率,都是具体衡量的例子。

  • 维度(Dimension):维度表示给定指标的不同方面属性。例如,时间通常被用作分析不同度量的维度。其他一些常见的维度包括地区、产品、部门、细分市场等。

  • 层次结构(Hierarchy):维度可以进一步分解为层次结构。例如,时间维度还可以形成层次结构,例如 年>季度>月>日。

  • 粒度(Grain):层次结构中的每个级别都称为维度的粒度。例如,年 > 季度 > 月 > 日 ,中的“年”是一个特定的粒度。

  • 指标(Metric):指标是我们经常在仪表板中显示的数据类型,它表示一个度量Measure)的数据段与一个或多个特定维度(Dimension)和相关粒度(Grain)的关系。



上图是在Tableau中一个标准的指标示例-“每周销售总额” 的构建方式。在这个指标中,我们需要量化的“”是美元——即总销售额,用来观察量化数据的“维度”— 即时间,而时间维度可以被进一步分解为“年>季度>周”的层级结构“每周销售总额”需要关联的维度中的特定“粒度 ——即周。


  • 看板(Cards or KanBan): 观察一个或多个指标(Metric)运行情况的图表

  • 仪表板(Dashboard): 仪表板是多个图形,图表,量表或其他直观表示的集合。多个看板可组成一个仪表板

  • 报告(Report): 报告可以是对应图表和其他可视化的表示,也可以是可能直接相关或不直接相关的大量图表和可视化。多个仪表盘可组成一个报告。

“实时、受众群体、流量获取、行为……” 上图为Google Analytics 中提供的多种类型的数据分析报告,报告可以非常广泛地涵盖广泛的相关信息。每一种特定报告内包含了若干个回答特定问题的dashboard,一个dashboard内可以包含多个相互关联的指标的看板。


一个可分析、可追踪的数据系统中,最原子的构成单位理解成一个“看板”。如何从0-1构建一个客观有效的数据看板系统?我们可以类比【一个人学习做菜】的过程,做菜的过程可以总结为三个阶段:


  1. 学习菜谱&列一个采购清单

  2. 采购食材&烹饪食材

  1. 摆盘料理&品尝美食


对应到数据看板系统的创建,我们亦可以总结为三个阶段:

  1. 了解数据的特性、明确自己需要哪些数据

  2. 通过技术手段获取数据、将粗数据加工成意义明确的指标

  1. 将指标数据可视化,观察数据并尝试分析现象



度量Measure & 维度Dimension

“ Data is more than numbers, and to visualize it, you must know what it represents. ”

数据不仅仅是数字,数字、数组、表格、都可以被称之为数据。要将数据形象化,你必须知道它代表什么。为了构建有效的效率指标,第一步是:明确为了解决当前的问题,要观察的【度量】是哪些,已及这些度量又需要从哪些【维度】进行观察。

了解数据类型

一个线上的项目每天都在收集成百上千种数据,怎样确定自己需要什么数据作为 度量(Measure)呢?首先值得注意的是,不是所有类型的数据都适合作为度量Measure)被加工成指标。


不同学科,不同课程,不同领域,对于数据类型的定义基本一样,但称呼并不完全一样。统计学中,数据类型分为四种:定类,定序,定距,和定比。这四种类型是从低到高的递进关系,高级的类型可以用低级类型的分析方法来分析,而反过来却不行。

定性数据与定量数据


从宏观角度分析,数据类型分为 定性 和 定量 两种。一个通俗的例子,以自身为例:例如衣服的颜色,头发的类型和鼻子的形状这些标识标识的是定性数据;例如身高,体重,年龄和鞋子的尺码,这些可测量的是定量数据。


1.定量数据:定量数据是统计数据,通常具有自然结构性意味着它更加严格和明确,可再细分为连续/离散两种。此类数据使用数字和值进行测量,这使其更适合进行数据分析。可以通过以下方式获取定量数据:

  • 测量

  • 实验

  • 调查

  • 市场报告

  • ……


2.定性数据:定性数据是非统计数据,本质上通常是非结构化或半结构化的。定性数据可以用来问“为什么”的问题。它是调查性的,在进行进一步研究之前通常是开放性的。从定性研究中生成的数据用于理论化,解释,发展假设和初步理解。可以通过以下方法获取定性数据:

  • 文字和文件

  • 音频和视频记录

  • 图片和符号

  • 访谈笔录和焦点小组

  • ……


想要了解订单流转的效率是怎样,最简单的方法是通过和我们的客户进行面聊一下使用情况并记录一下反馈,但这样的产物并不方便进行统计分析和展示。尽管有一些对定性数据“结构化”的方法,比如对定类数据进行的非参数校验,但实施起来成本较高。定量数据因为本身结构化的特点更适合分析,因此在这里建议设计师在构建自己的dashboard系统时,需要跟踪分析的数据尽量选择定量数据


确定需要观察的度量&维度

明确需要观察的度量有哪些,首先需要从要解决的问题出发。但是没有一个整体的分析模型,往往会导致我们的分析遗漏很多信息和细节,导致数据分析师无法理解彼此的需求,最终导致最后产出的看板难产或答非所问:


使用的问题分析工具—— KPI wheel

在这里介绍一种名为KPI Wheel的简单工具,可用于收集将用于定义和可视化指标的前期必备信息。您可以将 KPI wheel 的图片打印在纸上,然后开始尝试依次思考这四个方面:


  1. “ 要解决的问题是什么”

  2. “谁在关心这个问题?”

  1. “我需要去哪里获取这些数据?”

  2. “为什么这个数据很重要?”


在解答的上述的几个问题的过程中随手记录:(1)可能引发什么进一步的疑问、(2)使用此信息可以采取什么行动或决定。不断的提出问题并进行进一步分析,这么做的目的是让用户不断分解问题,直到他们有足够的信息来采取行动或做出决定。经过几轮完整的分析后,用户就可以大致确定指标的「度量」和 所需要的「维度」。


以我曾经的工作内容为例:我们的产品是服务商家进行“前后端对接生产”的订单审核系统,我们需要构建一系列合理的指标来判断订单系统的处理效率。以下是与产品经理讨论过程中的具体流程:


第一轮 KPI Wheel ——

1.Answer KPI Wheel:“ WHAT? WHO? WHERE? WHY? 


what:我们需要一种途径了解用户进行订单审核的效率如何

针对这个问题我们联想到:

1.想要了解订单处理效率,首先需要定义什么叫订单的效率;在行业中有一种叫做「订单生命周期」的专有名词来表示订单从创建到结束的时长,是一个可借鉴的概念

2.针对我们的业务,一个工单的生命周期经历了从创建-流转&审核-通过,一个工单从创建到通过所经历的时间是我们需要记录的【度量】


who:产品/运营/设计 三个业务方都关注订单的效率

针对这个问题我们联想到:

1.对于不同的角色,在检测数据的时候都关注那些维度?

2.订单类型分审核单&生产单这两种,两种类型的订单,订单类型是一个必要维度

3.时间是上述三个相关方都需要关注的维度,一个订单在通过审核时的时间,是一种重要的分析维度;而“时间”维度,我们可以继续拆分为: 年-月-周-日 的层次结构

4.对于运营,了解不同行业的商家的订单效率对进行深入运营是必要的。而"行业"维度根据分类方式的不同,又可以归类为一级行业(软装设计/板式家具/…),二级行业(整木定制/办公家具定制/暖通/地板/瓷砖……)

4.对于产品,为了更好的维护客情,对于特定的大客户的数据需要重点关注。因此商家账号的ID,也是重要的分析维度。


where:我们需要的数据要在在哪里获取?

针对这个问题我们联想到:

1.与一般的用户行为数据不同,订单的数据都储存在后台的操作日志中

2.需要的"行业"维度,可以复用其它团队已经制定好的标签


why:效率是企业的生命,制造业中存在各种效率指标,如“人效”/“平效”等。糟糕的使用效率会造成我们的产品在根本上是不可接受的,因此效率指标非常重要


针对这个问题我们联想到:

1.通过【订单生命周期】统计的时间,可以在整体上评估订单系统的流转效率。但是仅仅依靠一个这样的指标,缺少一些更细致的视角。可以增加对方案(订单的载体)的停留时长的统计,来计算审核在整个生命周期中所耗时间的占比。


2.The Rising Questions & Action:“ 根据问题1的答案,这还会引发什么其他问题,或者您将采取什么行动?”

在回答上面的4W的过程中,会引发其它衍生问题,例如 “订单审核周期的时间的最小单位是什么?”  等等。针对上述的其中衍生问题,可以再进行一轮kpi wheel的自问自答。比较简单的衍生问题,不需要4个方面都进行问题分析。


最终 ——

在多次重复上述的两个过程后,最终我们确定了要在产品中量化哪些 度量(Measure),以及这些度量需要哪些分析维度,并将所有需要的度量和相关的维度都用表格的形式记录下来。

例如,'订单从创建到最终通过的时长(h)',是一个需要被量化的度量。它需要关联的维度(Dimension)有时间、商家ID、一级行业、二级行业。



指标Metric

研究完成菜谱,记录✍️采购清单后,接下来的带班过程就是准备食材并进行烹饪。当你已经明确了要观察的 度量(Measure)、和需要关联的维度(Dimension),下一步就是通过数据建设获取这些度量,然后将度量加工成指标。

建设埋点

获取度量的过程就是取数’的过程。想要创建看板,数据分析师需要通过各种方式获取一张包含所有你需要的信息的宽表。如何获得这张包含一切关键信息的表格?我们需要借助埋点获取数据。


所谓埋点就是在应用中特定的流程收集一些信息,用来跟踪应用使用的状况。您可以把用户在与您的网站或应用互动时触发交互行为理解为一个 “ 事件 ”,一个时间存在一个触发的条件,当达到这个触发条件后就会上传请求,请求中会携带需要的 “ 参数 ”。例如“用户点击按钮将商品加购到购物车”这个行为,每次用户触发这个行为后都会发送一个请求,而这个请求中会记录:1.加购商品的金额/2.加购商品的类型/3.加购商品的商品ID…等信息。这些结构化的信息构成了我们需要的度量(Measure)与 维度(Dimension)。


在完成了最基础的埋点后,我们就获得了最基础的数据。

如何建立有效指标建议

“指标”是量化衡量标准,未经加工的数据不具备可观察的价值。通过埋点,我们单纯只是得到了若干张包含所有用户信息的巨型表格,我们是分析不出什么有用信息的。为了更有效的去观察和分析作为 度量Measure)的数据,就需要对埋点数据进行一定的加工,变得更加易于理解和表达。


当一个度量Measure)的数据段与一个或多个特定维度(Dimension)之间互相联系了起来,度量就成为了指标。例如,同样的一份关于【访问用户人数】这一度量,可以根据关联的时间维度的不同,创建 DUV 和 MUV 等多个不同的指标。


如何创建一个有效的指标,结合笔者的工作经验,下面给出三点建议:


(1)为一个指标设想一个高级概念:

  • 首先指标的名称需要客观,要让人乍一听就能大概会意,例如:「加购商品操作每日点击次数」。而如果您定义的是类似:“软件上手度”,这种概念比较晦涩、在业内又没有约定俗成的定义的指标,可能需要重新考虑概念是否恰当。

  • 每周访问站点的用户总数/ 每日访问站点的用户数/ 每日访问站点的新手用户数…,这些指标即相互独立,但反应的又是同一件事的客观熟悉的时候,我们可以把这些详细的指标统一用一个高级的指标概念来做一个归纳,例如“站点访问用户数”

 

(2)检查并确定定义指标的细节:

  • 确定了指标的基础概念后,需要检查一遍指标的细节。

  • 例如,“订单生命周期”这个指标的定义中,生命周期是指一个订单从创建到最后通过审核耗时,而与其关联的维度有时间,订单类型等。需要强调的是,一个订单可能会存在:创建时间、通过时间,这两种不同的时间戳。而在“订单生命周期”这个指标我们需要关联的时间维度是【通过时间】。如果关联是【创建时间】,则会得到另外一种完全不同的生命周期计算方式。

(3)将测量到的度量数据,通过计算总结为一个指标:

  • 通过埋点收集到的是大量的数据,是一个巨大的整体,而指标则是描述总体特性的参数。而把原始数据组织并总结成更易处理的形式的技术叫做描述性统计,一种最常见的方法是通过计算平均数的方法总结一组数据。

  • 这些描述总体特性的参数中又存在不同的用途,有的用来描述频数分布,有的用来描述集中趋势:平均数,众数、中位数,有的用来描述变异性:四分卫距、方差。我们需要根据自己的用途选择合适的统计方式来构建指标。

根据统计方法的不同,常见的指标类型有以下几种,他们拥有不同的分布类型和方差的计算公式


  • 【 计数 Count 】

  • 【 概率 Probability 

  • 【 平均数 Average 】

  • 【 中位数(或其它位数)Percentile

  • 【 比率 Rate 】

  • 【 一般比例 Ratio 】



可视化 Visualize

烹饪好食材并后,接下来的工作就是摆盘与上菜。优秀的摆盘可以让料理更加精致和高级,优秀的数据可视化可以帮助我们更好的观察与分析数据,反之糟糕的数据可视化可能会让我们丢失很多重要信息。

Why visual ?

为什么一定要使用看板(图表)来观察和分析数据?仅关注几个关键指标的数据是否就已经足够?


使用看板对指标进行观察和分析的意义在于:相比单纯的数字,图表可以携带更多的展示维度(大小、长度、颜色、面积…),能帮助我们多维度的观察数据、避免疏漏。


例如,安斯库姆四重奏(Anscombe's quartet)是四组基本的统计特性一致的数据,但由它们绘制出的图表则截然不同。如果仅依靠基本的统计特性来观察数据,我们很容易忽略一些重要信息。



选择合适的图表类型

BI工具中支持多种图表类型,比如展示浏览路径的“桑基图”、展示转化率的“漏斗图”,甘特图、散点图等。如何选择合适的图表来展示并分析你的数据可以参考下图:


图表种类繁多,但只要掌握其中的一小部分就能满足绝大多数需求。对于大部分设计师,以下3种最基础的图表类型是最常用的:


1.条形图:

条形图是最常用的图表类型。条形图易于阅读,我们用眼睛比较条形图的末端,很容易快速得出结论:哪一类最大、哪一类最小以及类别之间的增减区别。


2.线图:

线图最常用于绘制连续的数据。因为线连接了点,这就暗示了点与点之 间存在着离散数据(一系列数据分隔成不同的类别)间没有的联系。通常,连续性数据都以时间为单位:天、月、季度和年度。


3.饼图:

饼图在总量间各部分的占比时比较高效


最后,当我们创建了许多看板后如何进行归纳?我们可以将关注相同的问题的看板归纳在一起,就形成了一个关注同一类问题的Dashboard;对不同的 Dashboard 提取共性,将同一个业务的不同Dashboard组织起来,就形成了一个Report。一个Report内可以笼统的包含当前业务需要关注的所有信息。


例如:【订单生命周期】关注的是企业的订单效率问题,但并不是唯一关注效率的指标。另外还有诸如:“审单员平均审核时长”这样的人效指标的看板,这些看板同样反馈的是订单的效率。我们将关注相同的问题的看板归纳在一起,就形成了一个Dashboard,Dashboard内的看板与指标都有关注同样的问题—效率。除了效率,身为设计师的我们还需要关注很多其他的问题:比如使用的用户的特征、流量的来源、用户发起的行为等等,这些问题都可以拥有自己独立的Dashboard。最后这些Dashboard组织在一起,就成为了一个支持系统的观察分析当前业务的体验指标的完整报告。


观察与分析数据

“ 我们需要的不是数据 , 而是数据告诉我们的实事 ”。通过建立一个系统的监测体系的目的主要是为了从数据中探索: 模式/ 异常。不管图表的形式是什么,我们都需要留心观察这两者。


1.何为「模式」:

模式即数据中的某项规律。比如机场每月的旅客人数,虽然随着时间推移变化不定,但是通过几年的数据对比,我们可能发现旅客人数存在着季节性或周期性的变化,某些月份的旅客数量一致偏低/某些月份则一直偏高。

根据数据画像我们可得知某个产品的成熟期用户占绝对多数的现状,

了解了这个「模式」就可以更好的制定符合绝大多数用户心智的设计策略


2.何为「异常」:

异常即问题数据。异常数据并非是错误数据,也有可能是设备记录或人工录入数据时,出现的问题。我们通过异常异常分析,一方面可以分析异常原因;一方面可以发现现有系统的漏洞。

苹果公司通过监控异常值、发现了位于深圳的AppleCare灰色产业,

进而改善了AppleCare的产品策略,避免了巨大的损失


最后在观察分析数据的过程中,有三个需要特别关注的数据的特性不要忘记:


(1) 数据具有可变性(VARIABILITY)

数据的可变性这一重要的特性让我们可以从数据中获取规律和关系。如果您构建的指标本身并不具备可变性了,那您很可能需要尝试其他指标进行跟踪和分析。


(2)数据具有不确定性(UNCERTAINTY )

很多数据都是只能提供一个估计而不是绝对准确的数量。例如:分析人员通常会通过样本的数据,进而对整体的数据分布进行进行猜测。


(3)数据需要联系上下文( CONTEXT )

数据分析离不开情境。我们知道,数据的产生必然是有其情境的,不过统计数据时,我们通常都要剥离情境;而当我们进一步分析数据时,又必须回到具体的情境中去。


例如:某个羽绒服经销商发现某一年冬季的销售额产生了明显的下降,这本应该是一个异常的信号,但我们不能简单粗暴的定义这是一个糟糕的数据。因为实际上,销售额下滑的哪一年是一个暖冬,且和同类的竞品相比自己的产品销售额下滑趋势的更低。结合情景分析数据,往往能得到意想不到的结论。



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

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


文章来源:站酷   作者:酷家乐UED

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

蓝蓝设计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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

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

存档