首页

按钮设计指南:我的按钮究竟该放哪儿!?

ui设计分享达人

按钮是一种使用广泛的基础界面元素,正因其使用的普遍性和重要性,我们需要并一直在探索建立按钮设计规范。面向企业级应用时我们需要精心考虑按钮的设计, Ant Design 提供了丰富的按钮类型以覆盖各种场景,尽管每种按钮都有其存在的必要性,但在使用中也带来诸多疑问:


  • 应在什么时候将按钮放在左边,又什么时候放在右侧;

  • 按钮顺序是按照使用频次摆放吗?如果无明显的使用频次呢?

  • 当需要提供特别多按钮的时候应该如何处理?

  • 虚线按钮 与 普通按钮 在用法上有什么明确区别;

  • RadioGroup 和 ToggleButton 以及 ButtonGroup 使用上有何区别?


如果没有规范以上问题,仅按钮顺序和位置问题就会出现无数种组合。图左侧为蚂蚁中台业务实况,图右侧对左侧按钮的布置方案作了提取,每种场景都存在过多解决方案和组合,无法通过参考他人的设计来确定应该如何摆放按钮,因为设计无章可循。



因此,有必要建立约束又包容的规范,以广泛满足多层级、跨场景的设计需要。


制定约束又包容的设计规范

Ant Design 是一个设计体系,应用于蚂蚁中台,并对外服务于超过 100 万名开发者。在制定规则时,原则是简单易记(约束)并满足企业级场景的广泛兼容(包容),把问题最少化。我们的解决方案是:


1)「默认规则」:提供一套默认的设计规则,在现有的模板、组件等设计资产中提供示例方案,满足简单场景需求,直接使用即可;

2)「设计建议」:为默认规则无法满足的复杂场景提供设计建议,让使用者在一定的策略上自定义,同时又与默认规则保持一致的认知逻辑;

3)「设计目标」:明确设计目标,设计者依据设计目标决策设计。

例如:“提交按钮与表单输入项对齐”是默认规则;当需要考虑按钮是否适合放在右下角时,则可以遵循“右下角放置“完成类”意义的操作”的使用建议;“按钮的设计应尽量帮助用户避免犯错。”则是设计目标。 

目前,Ant Design 会提供组件、模板等设计资产、官方设计指南来演示这些规则。这是也是解决一致性落地方面的基本思路。



(一致性落地策略) 



本文将尝试分享我们是如何思考和制定默认规则的,碍于篇幅,首先我们会聊一聊按钮是什么,以此推论出按钮设计应为用户解决的问题。接着,根据按钮设计时的几项基本变量,介绍我们是如何组织这些变量的设计逻辑,从而推导出一个较为通用的按钮设计规则。最后讲个小例子来说明按此逻辑该如何考虑设计一组按钮。本文主要讨论按钮设计的三个基本逻辑:按钮位置、按钮顺序、按钮强调,后续可能会单独开篇介绍其他常见按钮的使用疑问。


按钮和链接定义是不同的,按钮用于发起动作,触发相应的业务逻辑。其与链接的区别在于,链接的作用是导航,但链接并不影响后端或前端展示上的逻辑。

然而,现在,按钮和链接的界限越来越模糊,按钮面临的使用场景越来越复杂,也常出现用链接作为按钮的场景,例如表格的操作列,通常这样的设计通常并无大不妥。 
但是笔者认为 Material 的 TextButton 的解决方案也非常棒,对 TextButton 和 Link 做了区分,当 hover 或点击TextButton 时,会出现浅色背景指示控件响应区。如果你的设计系统刚起步,可以考虑这个方案:https://link.zhihu.com/?target=https%3A//material.io/components/buttons/ 


按钮设计要解决的问题

按钮的位置、顺序、组织方式、视觉强调程度是用户寻找按钮的线索,通过警告色可引起注意,避免误操作,准确的文案则能够预告按钮的执行结果。按钮设计的目标是指导用户采取我们希望用户采取的行动,尽量帮助用户快速找到需要操作的按钮,并了解执行该操作的结果,同时尽可能避免误操作。


按钮区位置

按钮区是专用于放置按钮的区域,一个按钮区内可以有多个按钮。因此,这里使用按钮区位置比按钮位置更加准确。

(按钮区) 


我们确定了一个清晰的设计策略来决策按钮区位置:应将按钮放置于用户浏览路径中,便于被用户发现,并且应尽量靠近其所控制的对象。在未刻意建立信息层级引导视觉路径时,经典“F”“Z”网页浏览模式作为了我们按钮位置放置规则的基础指导。

1)“F” Pattern

Jacob Nielsen 首先提出该模式后并提供了眼球追踪研究结果,关注流顺序如下图。按钮跟随内容模式在以下的这个研究中被证明非常自然。

(F Pattern 图源:Buttons on the web--Artem Syzonenko) 


2)“Z” Pattern

源自 Gutenberg diagram,用户关注流(通常含鼠标移动)遵循一个 Z 字形模式,它描述了西方用户的阅读模式,从页面的左上角到右下角。1和4区域是相对重要的视觉落脚点,4 区域相当于是浏览的终点站。(Gutenberg Diagram 是 Gutenberg 根据多年的报纸等排版经验总结出的假设,笔者尚未找到眼动实验数据)


(Z Pattern 图源:Buttons on the web--Artem Syzonenko) 



3)规则的外围边界

我们需要认识一个概念叫「内容块」。内容块的概念略抽象,可以将整个页面视为一个内容块,也将一张卡片视为一个内容块,或者仅仅是界面中的一个小小的内容单元也可以视为一个内容块。界面中,一个内容块的基本构成有三部分:Header、Body、Footer。常规来说,一个内容块通常阐述一个主题,Header 申明主题,Body 放置该主题的具体内容,Footer 主题的延伸信息和操作。

内容块的构成 


设计规则

根据以上三个条件,推导出按钮在「内容块」中位置的「默认规则」如下。该规则几乎收敛了大部分图 1 中的位置设计不一致问题。这套位置规则与 Fiori、Predix、QuickBooks 等企业级产品设计体系中都相近。

(默认位置规则) 


同时,每个位置有一定行为意义,我们据此提供了「使用建议」来指导设计:

(使用建议) 


关于 FooterToolBar 中右侧放置按钮区的争议

(Slack profile settings 图源:Buttons on the web--Artem Syzonenko) 


在弹窗中,将按钮区放置在右侧的规则已属于习惯用法。但在整个网页场景中,将 FooterToolBar 里的按钮放置在右侧是最受质疑的,FooterToolBar 是一个吸附在页面底部的工具栏,可以保持出现。许多设计师认为这种状况找到按钮很困难,特别是在表单场景中。众所周知企业级产品的表单常会遇到非常复杂的状况,FooterToolBar 正好解决了这个问题,因此这里要弄清楚的是什么时候需要用到 FooterToolBar:


1)Body 区的有部分内容被折叠or隐藏,如内容单屏无法展示完整内容,表单区被多个页签分割;

2)Body 区的内容复杂度高,比如有多个分组,每个分组都有独立的按钮区,或复杂的交互方式。这时候需要将该主题的“完成”操作区与 body 区,区分出来。


简而言之,Footer 的存在就是为了要和 Body 区分别开来。如果不是为了解决这类问题,那么让按钮跟随内容是最自然的。这个挑战也引出了另一个课题,工具栏的设计规范尚待完善,emm,真是一坑更比一坑深。


按钮顺序

关于顺序,最常见的疑问是确定按钮应该在取消按钮左边还是右边,这是一个争论已久的话题。在弹窗中,确定按钮和取消按钮的顺序在各设计体系中都不一样,下图是操作系统三巨头:Apple、Google、Micrisoft 的方案。三巨头证明了两种主次顺序都能被接受,只要在系统中统一。那 Ant Design 应该如何选择呢?

(弹窗中的按钮,从左往右依次:MacOS、Material、UWP) 


在决策按钮默认的阅读顺序时我们考虑了以下四方面:

1)风险操作

2)方向性意义

3)对话习惯

4)响应式规则

上面顺序呈现了各因素在决策时的权重,例如,一旦按钮出现方向性含义,则权重大于对话习惯,但一旦操作存在风险,则需优先决策。


1)风险操作

可能造成损失的操作,特别是破坏性操作,如果不是用户期望点击的按钮,应该尽量远离常用按钮。


2)方向性含义

什么是方向性含义?具有返回意义的按钮,应该放在左侧,暗示其方向是回到之前。左图的方案非常容易误操作,方向错乱挑战用户的认知习惯,因为不论是在网页还是移动端界面,我们已经都习惯了返回在左侧的模式。

(方向性含义的按钮) 


3)对话习惯

按照对话习惯排列按钮。界面中的按钮阅读顺序类似于一个用户和电脑的对话过程,按照日常对话的顺序设计按钮阅读顺序更自然,同时让电脑尽量显得礼貌一点。例如,日常对话中,我们一般不会先问负面性的问题,当用户修改了一项设置,用户最有可能的行为是保存这项变更,如果电脑一上来就问用户是否要取消变更会显得不太礼貌的亚子。因此,不太推的操作,自然会排列在靠后的顺序。

(电脑与用户的对话过程) 


4)响应式规则

指是按钮如何在响应式环境中优雅的溢出。这一项条件对规则设计的影响是,我们把溢出按钮“…”统一放置在最右侧。

(图源:UWP 响应式设计技术) 


设计规则

综上所述,我们制定了第一版「默认规则」,无论左对齐右对齐,统一从左往右阅读。

(按钮阅读顺序初稿) 


但这个方案遇到了问题。Ant Design 现有的浮窗类组件里,优先操作的按钮都在最右侧,全部不符合这条规则。如果调整,意味着全部组件升级,这个变更将挑战全部已在使用 Ant Design 的用户习惯。这是无法被接受的,同时为了保持规则的简单性,我们产出了产出了第二版「默认规则」,即现在发布的版本,左对齐从左往右阅读,右对齐从右往左阅读:


按钮强调

调整按钮的样式变量,呈现不同的视觉重量,达到分级强调目的。我们将按钮视觉强调程度分为四级,了解其原理后,可以根据样式变量和按钮类型组合出需要的按钮。

(按钮强调度分级) 


一级按钮

一级按钮通常是主按钮,突出“完成”、“推荐”的操作。一个按钮区最多应该使用一个主按钮。那么一个页面可以有多个主按钮吗?因为没有足够的反面案例支撑一个页面不能有多个主按钮,比较建议在一个焦点任务中,最多一个主按钮,也可以没有主按钮。


二级按钮

也称之为次要按钮,可用于所有次要的按钮行动,如果我们有许多具有相似重要性的行动在一个屏幕上,或不确定要选择哪种按钮,次要按钮永远是最安全的选择。目前二级按钮的视觉强调程度有些偏弱,后续我们也会考虑调优此问题。


三级按钮

没有外边框,用链接色突出,例如文字按钮。比较适合诸如“取消”“还原”等无需强调的操作。文首提到的表格操作列这类无需强调的操作也推荐使用。


不强调按钮

并不是非常规范的按钮,用于满足复杂的个性化需求,当按钮数量特别多,并且保证用户直识别的情况。

最后将位置、顺序、视觉强调三项变量组合,可以得到一个最基础的「默认规则」,用于覆盖最简单的场景:


案例验证

前面我们提到,「默认规则」在组件、模板等设计资产中演示,通常无需思考直接使用即可。 那默认规则不能满足我的需求,我不知道如何安排按钮顺序怎么办?现在,我们用一个小案例来验证如何依据设计建议决策按钮区设计。

场景假设:我需要一个复杂的筛选条件来过滤数据,我考虑在弹窗中处理这个任务。设置完筛选条件后,我可以将这个条件保存下来以备下次使用,或直接点击确定生效。这里面会涉及的操作包括:保存,重置条件,确定,取消。 

(按钮设计三步走) 


结语

规则设计想要简单而又令所有人满意是一件非常困难的事,从设计系统的长远效益来看,简单的规则更有意义,同时我们也在尽可能让规则能够符合习惯用法,让用户更容易接受和学习。关于按钮设计规则的探讨,依然存在很多问题尚待解决,欢迎大家提提供反馈,帮助我们一起完善。写完文章后突然有点忐忑~~最后,我们在 Ant Design 官网上发布了一篇关于按钮的设计指南,欢迎前往查看指正。

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

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



文章来源:站酷  作者:Ant_Design

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

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


这个设计我是这样进行修改的

seo达人


随着设计职场对 UI 设计师的要求不断升级,我们需要掌握的技能层层叠加,从最初的视觉层加对接层演变成我们还需要具备动效层、交互层、产品层等能力。所以说三年入行五年精专,想要做好这个细分岗位也是不易的。

图片

 当然,无论高度的天花板有多高,一切都还需要脚踏实地。就算是面对视觉层这样的底层技能需求,依然还是有部分设计师达不到精细化的程度。无论是整体的风格把控,还是局部的细节思考,都容易被忽略。

图片

 今天黑马哥就来和大家一起攻破一下视觉层面的精细化,挑选了黑马家族成员第一次尝试的界面为案例进行解析。以案例实战的形式进行解析,很多设计原则和思考仅代表个人经验总结,大家需要结合自身项目情况酌情运用。

一、找问题

二、如何改

三、总结

四、标注文件分享

 

 一  找问题 

 1.1、先看整体

当我们设计完一个界面之后,我们需要先看整体再打磨细节,整体的视觉引导和信息层级关系需要处理到位。如果整体信息层级把控不准,可以将界面模糊态之后观察。案例中界面头部到 Banner 区域信息对比模糊;金刚区下方的异形广告位过度干扰,导致视觉焦点不明显。

图片

 

1.2、再看局部

整体排查之后,从上往下再进行局部细节走查。导航栏和 Banner 区域需要进行视觉比重区分,这里忽略 Banner 设计本身的质量;金刚区图标无需灰色卡片背景,图标设计细节规范和表现力不够深入等;异形广告比重太大,需要弱化处理;列表排版信息对比不明显,局部信息需要图标化引导,配图处理过于单一等;底部标签栏没有区分点击和默认状态,图标设计细节规范问题,中间图标采用“凹”式效果不够柔和等。

图片

 

1.3、设计规范

对于 UI设计来说,规范性是设计的基础,确定好界面尺寸的模版比例之后,标准的控件不要用错。根据案例的尺寸比例属于 iPhone X 的设计,在项目设计中尽量真实还原设计稿,状态栏和底部主页控制器不要用错。整体布局过程中的数字关系比较混乱,在布局的过程中定好数字系数,按照系数的倍数关系来进行排版布局。

图片

 以上问题仅作为列举示意,更多问题大家自行分析归纳,这里就粗略统计啦!

 

二  如何改 

 根据分析出的问题,接下来我们逐步进行调整。在进行界面布局的过程中,我们需要根据需求先设计出高保真原型图,忽略颜色、配图、图标等耗费时间的设计内容,快速将整体的信息对比关系做出来。个人的习惯是根据低保真原型图、高保真原型图、UI 设计稿、细节打磨等环节进行。

图片

 

 2.1、头部细化(状态栏)

头部我们通常采用深色(品牌色)、浅色、白头、Banner 图填充等形式。为了使整体设计通透性更好,我选择白头加局部色彩点缀的形式,处理手法使用了极光效果。既可以让头部的效果更具特色,露出品牌色增强曝光度,也不会和 Banner 图互相干扰。

图片

 

2.2、Banner 尺寸标准化

在确定 Banner 图尺寸的时候虽然我们可以自定义,但是我们也尽可能的在探索更规范的形式,利用一些数列关系来确定比例关系。这里我采用了斐波那契数列进行计算,在推荐的宽高比例中我使用了 8:3 进行计算。在算出的值中取能被 4 整除的数值,确定 Banner 尺寸为:686*256px(基于二倍图)。

图片

 

2.3、金刚区图标优化

金刚区图标设计风格很多,大体上分为线性和面性风格,而面性里面也会有扁平的和质感的。如果在图形统一性上面把控较弱,也可以采用统一的外轮廓背景来进行约束。外轮廓有圆形、圆角矩形、椭圆形、超椭圆等,这里我选择了超椭圆作为图标设计的外轮廓。

 在配色上面为了和整体色系搭配,选择了莫兰迪色系,图标设计风格偏向于微质感。

图片

 

2.4、通知栏优化

根据之前案例中异形广告的文案“中华医学会指南全新上线”,偏向于通知形式,优化后改为通知栏板块。既可以突出查看按钮,也不会过度视觉化干扰金刚区功能模块。为了突出通知内容,根据内容的强化等级在前面添加火苗图标,起到重点强化的目的。

图片

 

2.5、健康须知模块优化

该模块优化了卡片式设计,改灰色卡片为白色卡片,这样显得更加干净整洁。除了对标题等信息对比加强以外,也将一些文案进行图标化,增强设计感。

 之前的配图采用统一模版的文字表达形式,这样过于单一,而且设计感欠佳。调整后采用图片表达,更能引导用户点击阅读。

图片

 

2.6、底部标签栏优化

重新绘制了底部标签栏的图标,默认状态采用线性图标,点击状态采用面性。中间图标将“凹”式改为“凸”式,通过调整凸出的锚点使得整体过渡柔和。中间凸出图标设计风格和金刚区保持一致,形成上下风格关联。

图片

 

2.7、完成

在保持原有信息的基础上,仅做了视觉层面的优化,希望这个案例修改可以带给你更多思考。

图片

 

三  总结 

 这是一个功能相对比较简单的首页案例,本次案例忽略了产品层面、交互层面等思考,只在视觉层进行了优化。调整了色彩关系、布局细节和图标设计等内容,基于原始案例内容不变的情况进行调整,希望抛砖引玉,可以带给大家更多思考。

 

四  标注文件分享 

最后附上修改案例的标注文件,希望可以帮助大家更好的理解。关注“黑马家族”公众号,后台回复关键词“首页设计”获取标注文件。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》这个设计我是这样进行修改的

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

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


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

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

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



页面设计中的信息组织策略探索-言之有序

ui设计分享达人

人们是如何组织信息的?

在 Ant Design 的界面设计中,会包含大量的信息组织和编排工作,我们常常会遇到这样的问题:

  • 一个详情页面里应该包含哪些信息?

  • 什么样的信息应该放在卡片里,什么样的信息应该平铺显示?

  • 一个页面内的信息该怎么让用户快速找到重点?

  • ···


信息组织是我们在日常生活中经常会遇到的问题,商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等,各式各样的信息是如何被组织编排到一起,又是以何种方式把信息呈现给用户呢?


在解答这些关于页面设计的问题之前,我想先给大家讲一个生活中的小案例:


动线设计

逛过宜家的人,应该会注意到宜家类似迷宫的动线设计,这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时,就会被一条隐形“向导”默默地引导着向前走:一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域,直到一个不落地走完才抵达出口。但在这个主线之外,为了确保一些消费者在购物中,能够快速离开或快速去往感兴趣的区域,每个主区域间都有一些较隐蔽的捷径作为辅动线。


这种动线设计一方面能够把所有商品按照路径有效的串联起来,另一方面又能让消费者不知不觉的沿着这个路径去了解商品。


商品布局

动线布局是宜家的隐形骨架,而真正让宜家卖场丰富起来的,还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样,它不会把同类型产品进行大集合,而是根据人们的正常生活场景来分类,不同类型的产品在同一区域组合陈设,构成生活中的一个小场景,一方面能达到对各个商品功能的完美诠释,另一方面,一个产品尽量不会重复出现,尽可能减少商品展示的复杂性。


在整体商品布局上,有两个很有意思的地方:第一,在居家体验中心,样板间的陈列顺序完全是按照消费者回家后的场景而布置:客厅、餐厅、厨房、书房、卧室、卫生间......,第二,在家居用品中心,则会根据消费者在家的日常起居行为进行摆放:做饭、休息、读书、收纳......


现实生活中的这些例子,对我们的界面信息组织有什么启发呢?


关于动线和布局的思考

在宜家的案例中,关于动线,映射到人的行为上,有一个比较专业的概念叫做“流”(flow)。 Mihaly Csikszentmihalyi 的著作《心流:最优体验心理学》中对“流”的定义:当人们全身心投入到某个活动中时,会对周边干扰视而不见,这种状态被称为“流”。宜家的动线设计很好的营造了这种状态,让消费者完全沉浸于商品浏览,并且尽量不去打断这种行为流。


经过研究发现,构成“流”的行为动作,其前后必然存在某种连续性或者关联性,例如回家的行为动线,日常起居的行为关联等。这个概念在界面设计中依然适用,很多界面设计都在有意无意的去创造“流”的状态,带给你用户沉浸式体验,例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容,让用户沉浸其中无法自拔。


关于商品布局,映射到信息组织上,《韦氏大词典》 中提到一个词“编配”(orchestration),对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义,宜家的商品和谐的组织构成一个场景,它向消费者传递的不仅仅是商品本身的功用性,更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上,表单页的和谐组织能够帮助用户快速完成信息录入,详情页的和谐组织能够帮助用户快速理解一个描述对象......


各种各样的信息总能以某种关系组织到一起,而如何根据这种流为用户去组织和呈现信息呢?


“流”的本质其实是一系列具有关联性的行为动作串联,而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后,我们可以做一个初步假定:所有的信息是否都可以通过关联性和复杂度来进行组织编排?针对着这两个维度,我们又进行了更深层次的研究和验证,并得到基本定义:

  • 信息复杂度:信息量的大小,包括种类、数量等。

  • 信息关联性:信息之间的潜在关联或者相互影响。


我们设想,这两个维度能否运用到界面设计上的信息组织呢?


页面信息的组织方式

信息关联性

界面信息之间的潜在关联或者相互影响,通常体现在「逻辑关联」和「视觉关联」两个层面。


逻辑关联

顾名思义是指一个事件中的所有信息之间的关系,在界面设计中,无论什么样的信息,总能以某种方式进行分类和编排在一起,例如手机通讯录中的人名,可以按照字母顺序从 a 到 z 进行排列,电商网站的商品导航会根据类别进行分组,待办事项可以根据时间进行排序等。


如何找出信息之间的逻辑关联性呢?

被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括:

  • 地点(Location)

  • 字母(Alphabet)

  • 时间(Time)

  • 类别(Category)

  • 层级(Hierarchy)

简称LATCH。这五种方式基本可以涵盖所有的信息组织策略,信息是无限的,但是信息组织方式却是有限的。



视觉关联

任何一个界面呈现给用户的时候,用户都会下意识的去判断界面上什么信息是最重要的,接着会去关注这些信息都有什么关联,因此,除了按照逻辑去组织信息之外,还应该合理的去呈现信息的视觉层级关系。


视觉层级关系有几种常见的区分方式:

  • 强调:使用基本视觉元素(颜色、形状、大小等)区分层级

  • 亲密性:位置接近的元素通常是有关系的,而且位置越近,关系越强

  • 图胜于言:视觉符号和对象关联,例如:齿轮或扳手=设置,垃圾桶=删除

  • 浏览顺序:根据浏览顺序,从左到右(部分地区)或从上到下信息重要程度依次减弱

  • ···


如何验证界面元素的视觉关联性是否合理呢?


眯眼测试

《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试,为了确保界面视觉信息有效的拉开层次关系,图形设计师经常会用到一个方法“眯眼测试”(squint test)。闭上一只眼睛,眯着另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成组,哪些元素看上去零散。从多个角度去观察,总能够发现之前没有注意到的布局和构成问题。


信息复杂度

通常以信息量的大小或样式多少来衡量,这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息,但是信息量较大(超过三屏),则认为这个页面的复杂度较高,或者一个详情页面内同时包括文本、表格、代码展示、图表等元素,也会认为这个页面的复杂度较高。

信息的复杂度和关联性并不是两个完全独立的维度,根据关联性去组织信息,本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究,可以帮助我们如何选择合适的方式把信息呈现给用户。


页面信息组织实践 - 详情页设计

具体到界面设计层面,信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例,详情页内的信息该如何合理的组织信息并有效的传达给用户呢?


根据关联性和复杂度的概念,我们抽象出一个简单的「复杂度模型」,用来判断信息复杂程度和关联性对页面结构的影响。


横坐标表示页面信息之间的关联性,纵坐标表示信息的复杂程度,两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块,代表复杂程度低且关联性强的内容,例如一段纯文本的产品描述信息;远离原点颜色最深的色块,代表复杂程度高且相互独立的信息,例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。


与之对应的,我们对信息展示方式也进行了维度划分,用来解决在复杂的企业级产品界面设计中,何时使用卡片区分,何时拆分为 tab 等布局问题。


根据承载信息复杂程度的不同,我们对容器组件也进行复杂度划分,用来解决在不同页面布局中,不同类型的信息用何种方式呈现的问题。


这个模型可以帮助设计者在决策布局组件时,有章可循。最终让用户感知,当用户来到一个页面时,即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地:


关于以上的模型在实际设计中该如何操作,这里提供一个推荐步骤可以参考:

  • 「复杂度判断」明确设计对象信息量的大小

  • 「关联性判断」判断各个信息之间的关联性,并合理分组

  • 「组件选择」选择合适的容器组件来呈现信息

  • 「模板选择」选择合适的页面模板,组织编排信息

  • 「眯眼测试」检查整体布局是否合理(仅参考)



结语

大到一个系统,小到一个按钮,背后的每一条规则既要从人的角度去思考设计的易用性,同时也要从信息本身去推敲组织的合理性。作为设计规范的制定者,不能凭感觉简单了事,而是需要找到一套通用的模式,帮助用户快速找到并理解信息帮助用户提效,同时提升用户的浏览体验,是我们一直在探索的课题。

虚拟界面的信息组织和现实世界一样,既需要符合人们对事物的认知,也需要遵循人们的行为习惯,这些认知和行为习惯,构成了自然交互的基础,这也是我们一直在探索方向。当然,信息组织除了以上这种思路,还有更多的思路和方向等待挖掘,期待大家的反馈和建议,帮助我们一起完善。


小数据里的大秘密

资深UI设计者

本次活动中,嘉宾通过众多丰富、有趣的案例介绍了数据可视化的概念、作用和设计方法,信息量满满。

分享框架:

嘉宾首先分享了2个数据可视化案例:

  1. 设计师把阅读困难症患者普遍能看到的东西进行实体化、视觉化,让别人能进入他们的世界。
  2. Aaron Koblin的作品《Flight Patterns》,让人眼突破视域的界限,以“鸟瞰视角”来看北美居民的迁徙过程。

 

活动笔记:

1. 什么是数据视觉化?

其实它就是把不可见的数据转化为可间接被观察数据的过程。它不提供回答,只是提供一种观察的新方式。

举例一个来自小数据观察的自我探索项目:太极。

将太极拳的动作进行数据采集完成了第一张数字国画,有人质疑说好看但无用,嘉宾解释由于好看吸引了人群,从人群的行为进行观察可能会有意想不到的发现。

数据视觉化的初衷并不是为了解决问题,而是为了探索。

前田约翰(John Maeda)曾经说过:“好艺术的使命是唤起思考,好设计则是让事物变得清晰,并能解决实际的问题!”

 

2. 数据视觉化有什么用?

介绍两张数据视觉化历史上教科书级别的神图:

  1. 《拿破仑东征》诞生于1861年,由法国工程师查理·米兰德绘制,描述了1812年拿破仑东征俄罗斯的失败战役。图中透过2个维度呈现了6类资料:拿破仑军的人数、距离、温度、经纬度、移动方向,让人在一个静态的平面上同时观察多种数据变成可能。
  2. 另一位南丁格尔女士,是一名护士。作为军医,她清楚地知道大部分士兵都不是战死沙场,而是死在医疗环境极差的军营里,她自己懂,可是怎样才能影响国会呢?她发明了玫瑰图,用以表达军医院季节性的死亡率,对象是那些不太能理解传统统计报表的公务人员。她的方法打动了当时的军官统领和维多利亚女王本人,于是医事改良的提案才得到大力支持。为了纪念她的贡献,后来她的头像被印在了英镑上。

数据可视化研究的不仅仅是“数据如何能被看清”,还有“数据如何能被看懂”。

 

2.1 数据如何被看清?

可以通过颜色,大小,方向去提高数据的差异性。最简单的例子就是报表中的标红。

  1. 有效标红的第一步:去颜色干扰,第二步:去分隔线干扰;
  2. 去掉没有用的东西,例如框框、加粗;
  3. 对齐很重要:数据右对齐、信息左对齐,注意表头对齐;
  4. 间隔和行距也很重要;
  5. 单位很重要,尽量减少数字本身的长度,不超过4位;
  6. 去重非常重要(尽可能减少画面里的重复信息,可以让重要的信息更突出);
  7. 字体修正(看个人喜好)。

 

2.2 数据如何被看懂?

嘉宾介绍了4个项目:

项目1:国内外艺术院校的数据可视化展示。

由于经常会有同学问各大美院或艺术类院校之间的区别。嘉宾抓取了17所国内国外院校的数据来做展示,蓝色是代表“设计类”,白色代表“纯艺术类”。从中也可以看到院校的结构是否扁平。

 

项目2:嘉宾基于wikidata数据库编写的小工具。

最初只是用来快速查找艺术家的基础信息,后来加入视觉化功能,把所有查询到的人排列到一根时间轴上,横向观察她所关注的艺术家的生活年代及寿命。

通过可视化的展示,她发现自己关注的都是集中在某一个时期的艺术家,除了看到自己的喜好之余还很有效地发现自己的知识盲区(只有看到了自己知道什么,才能知道自己还不知道些什么)

我们可以发现在人类历史上,很多人物在时间即便在空间上没有交集,却在时间上相遇了。

比如Jackson Pollock,艺术史上动态艺术里面用身体的律动去做油画的一个非常重要的艺术家,他和计算机之父图灵原来都是同一年出生的,酒鬼Jackson Pollock居然比图灵还多活了两年。

我们还能八卦一些爱情故事,原来摇滚界的神话列侬跟小野洋子是姐弟恋,而且列侬只陪伴了洋子生命的一小段时间。

我们可以清楚地看到“看得见”的魅力。

很多信息的缺失并不是不存在,而是无法被看见,被观察。

因为看不见,很多信息甚至是完全错误的。在测试代码的过程中作者更意外地发现爱迪生的生日被错写为2016。

 

项目3:纽约大都会艺术博物馆做的Unfinished项目。

Unfinished是大都会艺术博物馆别馆在首次开幕时的处女展,Unfinished讨论的是“艺术很重要”的话题:在艺术的世界里,什么是未完成,展期为半年。嘉宾认为这个线下展展期太短非常可惜,希望可以通过技术的手段延长展期,更希望能降低门槛,让更多世界各地无法前来观展的人可以有机会参与讨论。

于是嘉宾将Unfinished展做成了Google的插件,安装插件之后,当新打开空白页的时候,空白页会自动被Unfinished的作品填满,把一个简单的空白窗口变成艺术之窗,同时让人不需要任何搜索便进入展览。

此外嘉宾赋予了这次改造更多的交互空间,让人可以实现在传统线下博物馆没有的体验,让他们自由地在“未完成”的作品上进行创作并分享,延长了作品的寿命,让艺术品重回人们的生活中,赋予其新的价值和灵魂。

 

项目4:通过整理全国美展的数据总结的一些获奖规律

得到的3个有趣的结论是:

  1. 高亮的红色、黄色很受欢迎
  2. 1999年,30多、40多的艺术家容易获奖
  3. 画一张少数民族在沙发上抱着一头牛的作品在数据上是很可能获奖的

 

3. 数据如何被视觉化?

在实际工作里,大部分人会接触到的数据视觉化实际上是信息图表,关于信息图表的一些规范和小技巧嘉宾也有提及到:

在做图表时,动机往往比较重要。

下图是为了说明布什总统下台的话,居民税收会增长多少,其实只有不足5%的区别,但对图表做了去零线处理,使得看起来差异很大。

作图的时候要先说明结论。

比如下面的表格是员工为了向老板说明自从少了两位员工之后,单子处理不过来了,意思就是说老板你得给我加人。

千万不要出现彩虹柱状图,折线图在多周数据对比的时候会非常实用。

 

最后是一些推荐的网站和资源:

最后释疑:

2021年设计师们最值得做的练习TOP3

seo达人


日常的设计需求需要设计师们准确、快速的解决问题,这也代表着我们很难在日常的工作中尝试新鲜或更具挑战的设计风格,所以设计练习就成为了设计师们提高自己技能水平的重要途径!新的软件、风格或者配色,总让人跃跃欲,今天我们就一起看一下,2021年全世界最受设计师们欢迎的练习方式TOP3

 

01.3D自画像

自古以来,自画像始终深受各种艺术家的喜爱。从油画、雕塑,到现在的数字插画,设计师们也用五花八门的方式展示着自己独特的性格和审美。这两年最火爆的形式毫无疑问是3D风格,3D自画像也成了越来越多设计师们表达自我、提升能力的重要途径!如果你想做些3D练习,自画像一定是很不错的选择。

图片

图片

图片

图片

图片

图片

 

02.抽象几何

方、圆、三角…这些基本的形状也是整个设计殿堂根基的重要组成部分。过去的一年中,越来越多的设计师用这些基本的几何形状,来挑战排版设计。大道至简,简单的色彩和图形更加考验设计师们对元素的控制能力,看似随意摆放的图形,其实都由设计师们精心布局和修饰!

图片

图片

图片

图片

图片

图片

 

03.暗色设计

黑色场景虽然较少,但是不可或缺。随着暗色模式的普及,设计师们随时会面对黑色场景的设计需求,在练习中熟悉其设计规范就变得尤为重要。如何进行色彩搭配,如何整理层级关系,如何兼顾亮暗双模式,这些问题对设计师来说都是不小的挑战,提前练习自己对暗色设计的熟练度吧,在黑暗中也能散发光芒!

图片

图片

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》2021年设计师们最值得做的练习TOP3

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

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



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

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

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

seo达人



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

 

数据使用的场景

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

图片

 

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. 采购食材&烹饪食材
  3. 摆盘料理&品尝美食

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

  1. 了解数据的特性、明确自己需要哪些数据
  2. 通过技术手段获取数据、将粗数据加工成意义明确的指标
  3. 将指标数据可视化,观察数据并尝试分析现象

图片

 

度量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. “谁在关心这个问题?”
  3. “我需要去哪里获取这些数据?”
  4. “为什么这个数据很重要?”

在解答的上述的几个问题的过程中随手记录:

(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 )

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

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

 

本文参考文献:

文章:Dashboard Design: Key Performance Indicators and Metrics —— Thomas Gonzalez文章:【统计学】区分定类、定序、定距、定比变量——YYIverson书籍:Tableau:数据可视化之极速BI —— 沈浩书籍:Which chart or graph is right for you?——Tableau图表白皮书

书籍:Data Points:Visualization That Means Something  —— Nathan Yau

书籍:Storytelling With Data —— Cole Nussbaumer Knaflic

 

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

作者:晓虎

转载请注明:学UI网》量化设计价值(三) 如何创建体系化的监控系统

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

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



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

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

库存领域的业务——库存模块

资深UI设计者

导语:近期公司需要把一个事业部的发货及库存相关业务实现线上化,在我们部门内部进行业务调研及充分讨论后,库存中心的产品规划方案基本确定,本文把我们实战过程中的方案分享给大家,期望能够为读者在设计库存模块时提供些许思路。


01 场景说明

XX事业部主要业务以化工贸易为主,在市场上对部分产品处于核心地位。XX事业部自己不进行产品生产,主要提供营销服务,仓库、物流均以整合社会资源为客户提供服务为主。整体的业务流程如下:

  1. 客户自己在平台下单,或业务员代客户下单,提交订单时需要判断发货仓是否有足够的货物发出。
  2. 内勤确认订单无误后,进行发货操作,业务要求后期需要进行自动发若客户有特殊需求则需要指定具体批次货物进行发货。
  3. 根据发货单,由仓库人员处理出库,并进行实际的库存扣减。
  4. 物流人员根据发货单中的收发货信息安排承运商进行配送,并回收配送相关状态。
  5. 在客户需求变更或配送的货物发生异常情况时能够进行售后申请,把货物进行相应处理。
  6. 对于库存管理人员要求能够定时进行库存盘点,能够及时发现库存货物由于一些管理上的异常情况而导致货物数量异常的情况。
  7. 货物需要定期进行存货核算以及仓储费用结算。

在整体的业务模式中主要可分为以下三种货物供应模式:

  1. 计划性的向供应商采购货物后进行备货,再销售给客户。
  2. 在客户下单时若除常规备货的商品外还有其它货物需求,可由销售反馈给采购后进行零采。
  3. 向兄弟公司调货销售给客户(具体可分为对方公司直接发货给客户和由销售公司发货给客户两种方式)。

在库存管理的业务中,事业部相关人员要求需要及时知道有多少货能够进行销售,其中有多少是已经在仓库可以随时发货,有多少可能是已经采购但货还在配送过程中,还有一些可能是产品管理人员能够预测未来会到货的货物数量。

02 业务分析

通过对上述场景进行分析后,我们能够把和库存配送相关的业务进行如下分类:发货业务、出库业务、到货计划、入库业务、库存管理业务、调拨业务、售后处理、其它出入库业务。

整体的业务架构图如下:

产品设计:库存模块

在整体的业务架构中,各个部分具体的使用角色以及所需要负责的业务具体如下:

发货:一般由销售助理/内勤人员完成,其主要任务是执行销售订单,在客户没有特定要求下,可以设置为系统自动生成,按先进先出的规则进行批次匹配,在客户对批次有特殊要求下需要人工干预,选择对应批次的货物发给客户。

注:在化工行业不同批次货物其性质会有所差异,故客户会有一些特殊要求。而发货单也是事业部对接仓库、承运商的单据,仓库根据发货单进行货物分拣并以发货单与提货司机进行匹配,防止货物错发,同时物流调度人员也会把发货单分配给具体的承运商,承运商下的司机根据发货单到对应的仓库进行提货,并配送到对应的收货地址。

出库:公司以出库单为依据影响库存,同时也根据出库单生成实际发生的应收。主要分为销售出库、退货出库、调拨出库、其它出库。销售出库主要为根据发货的实际情况进行库存扣减,是记录货物从真实的从对应的仓库中已经发出的凭证;退货出库主要为记录售后需要进行退货处理的记录凭证,把退货业务放在出库单中进行记录有一个好处就是能够直接通过负数的单据关联原有单据进行冲销,而根据出库单生成应收后也能直接进行应收冲销,由此不会改变财务核算的逻辑;调拨出主要记录跨组织调拨、转库调拨等情况,能够记录清楚该出库时由哪家公司发起调拨而产生的,最终能够反映在内部结算上;其它出则包含了盘亏出、报损出等不同的情况。

退货质检:主要记录在客户把货物发回到指定地点后到货物再次入库之间的业务信息。能够在该单据上记录货物异常的情况以及责任所属。

到货计划:主要用于记录计划性采购订单货物接收计划,能对在途可售库存进行管理。到货计划需要记录货物是否可售,到货具体的时间、数量、位置等信息。

入库:入库单能够直接影响库存,同时能够根据入库单生成实际发生的应付;主要分为采购入库、退货入库、调拨入库和其它入库,具体逻辑和出库类似。

库存逻辑:主要分为库存设置、明细、库存量和库存报表。库存量的定义和具体逻辑是该部分最为复杂的业务,在讨论库存量前我们需要明确几个定义:

  • 现存量:指仓库(可以是虚拟仓)中实际存放的货物数量,理论上能够进行实际出库的货物数量,有些文档中也称之为物理库存、账面库存。
  • 在途可售:指货物未在仓库,当时也能够销售的库存,支持外部采购在途、内部调拨在途。
  • 待发货量:指已经下单需要进行发货的货物数量,支持销售待发、调拨待发。

以上三个库存量均有实际单据进行对应,由于我们需要管控到批次基本,所以我们需要同时在SKU和批次两个维度进行库存量的记录,在途可售不需要在批次维度进行记录。

基于此我们通过计算得出我们能够用于销售的可售量,再通过一些库存分配策略我们就能实现很好的库存管理,例如:可设置预留量20%,各个渠道设置不同的数量,各个渠道可售数量之和可以大于总库存,但每个渠道的库存则不能大于最大可售量。我们也能够设置相应的库存预警机制,在库存低于一定比例是能够进行预警或者是限售。

03 功能设计

通过对具体的业务进行分析后,我们即可对产品功能进行详细设计,根据业务的实际情况,整体的功能结构如下图:

产品设计:库存模块

从业务分析中我们可发现主要涉及两个领域的业务:物流配送领域和库存领域,物流配送领域我们暂且不做具体的功能设计说明,对库存中心整体分为四个大的模块:出库管理、入库管理、库存管理、其它管理。

出库管理主要满足库存扣减相关的业务场景,例如:销售出库、调拨出库或其他出库,但有一种特殊情况就是售后退货也是放在出库模块,主要是出于财务核算逻辑考虑,如果公司财务核算是应收和收款核销,应付和付款核销,没有应收和应付核销的模式,那么售后退货就应该用出库模块解决,如果公司由应收和应付核销的模式则也可以把售后退货放在入库模块;但第二种模式会增加财务核算的难度,同时在进行库存统计是也会造成入库数据虚高,实际出库不足,主要还是看具体业务的模式。

由于我们服务的事业部暂没有做应收和应付核销的模式所以我们就采用了第一种方式,而对于出库单之前是否一定需要有发货单也是要根据具体业务进行规划,如果仓库管理、物流配送都是自己公司内部完成,也可以使用出库单+配送单的模式进行处理。

由于我们的业务是物流配送和仓库管理都是外包给第三方所以对外是以发货单为标准单据进行管理,所以出库单只是发货单的具体执行情况的记录。

入库管理主要满足库存增加的相关业务场景,例如:采购入库、调拨入库和其它入库,同出库一样在采购发生退货时也是以入库单的形式进行处理,如此设计的理由和销售侧是一样的。

对于库存管理,则属于库存中心最为核心的业务模块,根据业务分析中的相关概念,我们把单据对库存的影响整理一张图:

产品设计:库存模块

上图中有一个核心公式:可用量=现存量+在途可售-待发货量,由于化工行业的产品有分批次的特性故需要考虑SKU级的库存结构设计和SKU+批次级的库存结构,批次级的现存量合计一定要等于SKU级的现存量,而待发货量则不一定相等;在提交订单时(提交或支付)以SKU级的库存(不考虑库存分配规则)进行校验即可,在进行发货时则需要同时满足订单上的可发货量和SKU+批次及的可用量以防止超发或者超卖。

在SKU级的可用量的基础上我们可以根据具体的业务设计库存分配策略,库存策略以可分为预留和可售,预留则表示不对外进行销售,可售又可按渠道、活动级其它逻辑进行分配,各个方式之间的总和可超总可售量,但每种方式不可超总可售量,通过如此设计我们可以最大限度利用库存,而避免出现超卖现象。

库存的核心计算逻辑主要在图示蓝色部分,基本上把各种单据对库存的影响都罗列进去了,但以上的整体逻辑还是基于有货(或在途)的情况下开展的,但还有一种特殊情况是该逻辑不能覆盖的即预售/期货模式,预售/期货模式是以销定采的模式,是在确定了销量的情况下再去进行集中采购;所以对于预售/期货模式 我们需要单独设计一个虚拟库存的模块,而该模块根据实际经营可以轻量级的方式在商品中心进行实现,最终在进行货物交付的时候在通过出库单进行管理即可。

在库存中心还有库存预警、盘点、期初处理等功能,在此不一一展开说明,大家可根据自己的实际情况进行产品功能设计。

04 总结

库存领域的业务是一个相对比较专业和复杂的领域,市场上也有十分之多的传统软件或SaaS,在很多企业认为通过采购的方式去部署一套软件性价比会比自建库存中心要高。

但笔者认为在数字化转型的浪潮之下,通过数字化的工具提升供应链的效率、降低供应链管理的成本一定是一个十分之重要的目的之一,营销测的数字化转型大多数企业已经通过消费互联网认识到了其价值,我想供应链测的数字化转型在接下来的这几年也一定会逐渐显现其宝贵的价值。

传统的库存管理软件不管其架构还是对业务的实现都有其弊端,很难实现和营销侧的互联网架构的系统进行完美对接;所以自建基于互联网架构的库存中心,并培养懂库存业务知识的互联网人员是大多数要做数字化转型或产业互联网的企业必须要完成的任务之一。


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

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


文章来源:人人都是产品经理   作者:不可分类者

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

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






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

 


日历

链接

个人资料

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

存档