主要分两个部分介绍,第一个轻松点的主题,回顾下UI的风格变迁,再聊一聊行业情况,然后科普一下app界面设计的提案思路;第二个部分就稍微严谨些,是UI设计师必须掌握的一些基本知识,包括分辨率适配,倍率适配等关键知识点
先来认识下UI是什么,我给大家精简成了三句话,如上图所示
首先第一是媒介,也就是我们直接能看到的各种界面,UI就主要设计界面
第二是行为,也就是我们使用一个产品时,通过怎样的行为来操作,UI还需要思考界面的交互
目前大家比较熟悉的,手持(手机),穿戴(vr,眼镜)等
最后则是用户,也就是我们常做的用户调研,不只是UI,所有的设计行业都需要这个环节
所以,如果有人问到UI是干什么的,那么你就可以告诉他,主要做三件事情:
日常需要做界面设计;进阶一点的会研究交互设计;高级的UI会去更深入研究用户
而我们这次主要就了解界面设计上那点事情,先给大家回顾一下UI设计风格的一个变迁,至今为止UI已经从黑白时代演变到了今天至少经历了至少5代蜕变,主要的风格如我右边列出的种类,而我觉得其实主要分成三个大时代来看就行
其中第一个大时代统称像素时代,也就是最早UI诞生的时候做就是这样的界面,大家熟知的表情包“有内鬼终止交易”就是一个经典的时代缩影
第二个大时代是拟物水晶时代,也就是UI发展最快,行业规模变化最大的一个时代,很多早期一批UI设计师都在这个时代吃到了所谓时代红利,当然不包括我,我已经晚了。这个时代界面的特点特别明显,就是比较写实的质感,投影以及一个大高光的罩子结合起来,给人一种硬玻璃的感觉
最后一个时代则是扁平,新拟物,现实增强等的混合时代(跟抖音内容的生态变迁差不多,从明显的高端视频风格到现在和快手差不多的鱼龙混杂),这个时期其实很多风格会延续下去,尤其是扁平,也就是我们现在办公常看到的界面,会作为一个基础,不断的吸收和混合其他的风格去进行延展
VR中的界面则是稍微前卫一些的,因为会有一个360度的环绕视角以及一个虚拟的现实场景,可自定义的程度很高,目前是刚刚兴起的时期,也是一个新的UI比较建议入手的高门槛业务领域,为什么说高门槛,因为做个界面都要戴着头盔来看效果
比较值得给大家科普一下的则是最近比较趋势的两个风格,一个是新扁平:在扁平界面的基础上,大面积用色,渐变,微质感,少边框,结合3D等一些其他元素来凸显主题
还有一个是新拟物,时代的风格总是偶尔会有轮回,拟物风格也进化成了新的形态:只有部分写实,整体强调3D立体感和光影感觉
还有一个是新拟物,时代的风格总是偶尔会有轮回,拟物风格也进化成了新的形态:只有部分写实,整体强调3D立体感和光影感觉
风格介绍完现在简单给大家讲下这个行业,它的覆盖领域主要分为四个,其中主要的行业人才都集中在移动端和PC端;游戏是一个特殊行业,要单独划为一个领域,它跨越多端风格也多样;其他端则主要包含一些国有传统行业和一些未来的,科技的比较冷门的领域
然后UI这个职业的主要行业特点是怎样呢?作为一个过来人可以见证的主要有以上七个部分,但是一句话总结就是:热度下降,规模稳定,门槛变低,人人切图。说得更残酷一点,现在大家报个班学完都可以投UI设计岗位了,时代的红利已经远去。当然如果觉得我说的不对也没事,可能我站得还不够高~
比较值得一提的则是风格的分布情况,虽然已经经历了5代变迁,但是仍有很多传统和冷门的行业停留在水晶拟物的时代,只有主流和热门的行业保持着最新的风格,而前卫的行业则会去尝试最新的UI和交互
这连续的两张里的图就是一个天南一个地北,但确实同一个时代的产品
那么职业科普和行业情况都有了之后,我们具体UI设计师,做界面大概是什么个流程,让大家了解下UI设计的思路,我称之为“眼睛会了脑子没会系列”,就跟你看到网上那些大佬的教程视频一样的,全程只有鼠标在飞,然后东西它自己就做完了。(开玩笑)
这个设计思路是我UI设计时期总结出来的最快的提案设计思路,接下来讲解每个环节该做什么
首先是快速切入,就是把我们前期收集好的资料参考,比如我这里有个情侣的app需要展现出青春,活力的感觉,那么我从最左边的参考图,提炼出符合自己要求的元素、颜色、特征等,填充到已有的交互框架(在UI设计业务中,交互框架一般由交互设计师或者产品给到),然后形成一个有视觉颜色等大体感觉的初版效果
然后在这个初版的基础上,我们在自己的库或者素材网上找到icon和图片进行填充,整体调整颜、排版等,一个进阶效果图就完成了,同理还有如下两个界面的产生过程,都是初稿
接下来第二个环节独特性,就是在自己进阶效果图的基础上,去强化一些关键的特征,让它的特点更明显更出彩,比如刚才的界面,把素材icon优化成更有主题特色和个人风格的类型,那这里涉及到icon的设计了
icon设计讲究快准狠,不需要太复杂
第三个环节则是高效性,这里开始就是要去优化我们交互体验上的东西了,也就是颜色的分布和使用在UI设计中是以逻辑和效率为主导的,好看不是首要的,比如这个经典的界面,出自淘宝app,它的颜色使用,就非常尊重用户,提高了识别和操作上的效率
然后是加分环节,细节环节,则是自己尝试要融合一些小的心思到你的UI界面中,哪怕是图片的使用,文案上的小趣味,都会让你整个app的调性有提高
第二个加分环节则是动效,主要是展示界面操作上的流程和自己的一些特色效果,这些都做完,就可以拿着你的静态界面稿子和动画一起去找老板汇报了
其实整个链路真的很简单,UI设计师每次提案做下来就这些事,只是不同人他的先后顺序不一样
首先我们已经知道UI设计师每天都在搞界面,也知道他们如何搞出一个界面,那具体搞的过程中,又是做哪几件事呢?这里给大家概括成三件事:规范,切图和标注
今天我们只普及规范知识,也就是在画界面之前,建立画板之前都要先搞清楚的事情,UI设计师真的数学逻辑要好
我们先要知道,规范为什么是要先掌握的事情,那是因为在设计界面这件事上,规范已经在手机生产出来的时候就有了,不同于我们说的设计规范是一些视觉上的规范,UI的规范是和尺寸,像素,倍率等知识密切相关的
首先从界面上去分割,UI说的规范主要是讲这几个部分和一个整体的设计尺寸
先讲设计尺寸,我们以苹果手机为案例,第一台手机出厂后,就会存在这样的规格分布,告诉你分辨率是多少,每个部分各占多少高度,有了这些,大大小小的app和系统等界面才有了设计的基础
所以问题来了,那每出一台手机就要有一个新的设计尺寸吗?理论上是的,但是实际上不管手机厂商和UI设计师,都会去找里面的规律来避免麻烦,于是厂商创造了一个规律,也就是这个pt为单位的尺寸,这里就要先解释下这两种单位的关系
说的简单点,就是pt是一个虚拟单位,它永远取最小值,也就是分辨率长宽都取了公约数之后的那个最小值
所以我们再回头看这几个机型,就能发现一个规律,就是如果pt不变,设计尺寸是不需要改变的,因为整体可以进行放大或者缩小来进行适配。比如左侧两台手机,我用640x960为设计尺寸,做来的界面,两台手机都可以用,不会有拉伸之类的变形;右侧之所以高度上pt不同,是因为顶部的之前我们说的状态栏,导航栏之类的高度变了而已,实际中间的区域是没变的
然后再换成我们现在主流的机型看也是这个道理,但出现了一个新词,叫渲染分辨率,自此以后我们要分清楚,设计尺寸永远是渲染分辨率,因为通常渲染分辨率和屏幕分辨率是一致的。这就是为什么官方说plus的屏幕更清楚,就是因为是从分辨率高的界面缩小下来的,px密度更高
在了解了这几点基本概念后,我们就可以去看整个行业的机型规范了,我们现在UI界面是主要以750x1334为设计尺寸的,就是因为这个分辨率所占据的机型是最多的,也就是大部分的pt都是在这个档位
同理安卓市场也一样,只不过安卓的机型更多,所以更复杂,他们对应的一个虚拟单位则是dp
推导过程是一样的,所以我们直接说结论,双端的设计尺寸如图所示,你用720x1280和750x1334都可以,因为这两者都约等于9:16,现在UI设计师的软件比如sketch大多都自带了完整的各个机型的pt/dp,所以已经现在很多UI设计师都不大了解这个知识
刚才我们介绍完的部分,只是适配的一种情况,还有一种情况则是通过切图,又称为倍率图。
作为一个合格的切图仔,切图是最常见的操作,不同的倍率图,不仅仅是大小不同,也被用来适配不同的机型
切图倍率是随着机型一起产生的,所以每个机型在适配的时候,主要的规律就是:pt相同看切图倍率;切图倍率相同看pt;如果两个都不同,则先按pt适配,然后再通过倍率适配。这里重申一下,pt适配的意思就是:只输出一套图,然后整体界面进行一个放大或缩小的方式适配不同机型;而切图倍率适配:则是不需要整体放大或缩小,而是通过输出多套图去给不同机型用
双端其实都有自己机型对应的切图倍率,两者通过各自的虚拟单位pt和dp还能统一转化为px,这样才能进行多机型的适配
前面我们说了,双端的主流设计分辨率基本上是一样的比例,但他们各自有不同的切图倍率,ios端的机型比较统一,所以切图倍率一直都没有太多;而安卓因为各种机型层出不穷,所以用于适配的切图倍率非常多,适配的难度也很大,但目前主流的输出结果如图所示,但当全面屏越来越多的时候,这个结构也会逐渐改变
最后讲一下UI的工具,在工作的环境中碰到使用比较多的就是sketch和新兴的figma,两者都相似,都以pt和dp为单位去建立画板,也有全面的切图倍率供输出使用
也常见有人一定喜欢用PS来设计界面的,也可以用这样的切图插件来一键轻松输出
最后标注也是一个大工程,主要是眼花,难度不大,现在各种主流软件都搭配标注插件,这里不多讲
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
按钮是一种使用广泛的基础界面元素,正因其使用的普遍性和重要性,我们需要并一直在探索建立按钮设计规范。面向企业级应用时我们需要精心考虑按钮的设计, 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”网页浏览模式作为了我们按钮位置放置规则的基础指导。
Jacob Nielsen 首先提出该模式后并提供了眼球追踪研究结果,关注流顺序如下图。按钮跟随内容模式在以下的这个研究中被证明非常自然。
源自 Gutenberg diagram,用户关注流(通常含鼠标移动)遵循一个 Z 字形模式,它描述了西方用户的阅读模式,从页面的左上角到右下角。1和4区域是相对重要的视觉落脚点,4 区域相当于是浏览的终点站。(Gutenberg Diagram 是 Gutenberg 根据多年的报纸等排版经验总结出的假设,笔者尚未找到眼动实验数据)
我们需要认识一个概念叫「内容块」。内容块的概念略抽象,可以将整个页面视为一个内容块,也将一张卡片视为一个内容块,或者仅仅是界面中的一个小小的内容单元也可以视为一个内容块。界面中,一个内容块的基本构成有三部分:Header、Body、Footer。常规来说,一个内容块通常阐述一个主题,Header 申明主题,Body 放置该主题的具体内容,Footer 主题的延伸信息和操作。
根据以上三个条件,推导出按钮在「内容块」中位置的「默认规则」如下。该规则几乎收敛了大部分图 1 中的位置设计不一致问题。这套位置规则与 Fiori、Predix、QuickBooks 等企业级产品设计体系中都相近。
同时,每个位置有一定行为意义,我们据此提供了「使用建议」来指导设计:
关于 FooterToolBar 中右侧放置按钮区的争议
在弹窗中,将按钮区放置在右侧的规则已属于习惯用法。但在整个网页场景中,将 FooterToolBar 里的按钮放置在右侧是最受质疑的,FooterToolBar 是一个吸附在页面底部的工具栏,可以保持出现。许多设计师认为这种状况找到按钮很困难,特别是在表单场景中。众所周知企业级产品的表单常会遇到非常复杂的状况,FooterToolBar 正好解决了这个问题,因此这里要弄清楚的是什么时候需要用到 FooterToolBar:
1)Body 区的有部分内容被折叠or隐藏,如内容单屏无法展示完整内容,表单区被多个页签分割;
2)Body 区的内容复杂度高,比如有多个分组,每个分组都有独立的按钮区,或复杂的交互方式。这时候需要将该主题的“完成”操作区与 body 区,区分出来。
简而言之,Footer 的存在就是为了要和 Body 区分别开来。如果不是为了解决这类问题,那么让按钮跟随内容是最自然的。这个挑战也引出了另一个课题,工具栏的设计规范尚待完善,emm,真是一坑更比一坑深。
关于顺序,最常见的疑问是确定按钮应该在取消按钮左边还是右边,这是一个争论已久的话题。在弹窗中,确定按钮和取消按钮的顺序在各设计体系中都不一样,下图是操作系统三巨头:Apple、Google、Micrisoft 的方案。三巨头证明了两种主次顺序都能被接受,只要在系统中统一。那 Ant Design 应该如何选择呢?
在决策按钮默认的阅读顺序时我们考虑了以下四方面:
1)风险操作
2)方向性意义
3)对话习惯
4)响应式规则
上面顺序呈现了各因素在决策时的权重,例如,一旦按钮出现方向性含义,则权重大于对话习惯,但一旦操作存在风险,则需优先决策。
可能造成损失的操作,特别是破坏性操作,如果不是用户期望点击的按钮,应该尽量远离常用按钮。
什么是方向性含义?具有返回意义的按钮,应该放在左侧,暗示其方向是回到之前。左图的方案非常容易误操作,方向错乱挑战用户的认知习惯,因为不论是在网页还是移动端界面,我们已经都习惯了返回在左侧的模式。
按照对话习惯排列按钮。界面中的按钮阅读顺序类似于一个用户和电脑的对话过程,按照日常对话的顺序设计按钮阅读顺序更自然,同时让电脑尽量显得礼貌一点。例如,日常对话中,我们一般不会先问负面性的问题,当用户修改了一项设置,用户最有可能的行为是保存这项变更,如果电脑一上来就问用户是否要取消变更会显得不太礼貌的亚子。因此,不太推的操作,自然会排列在靠后的顺序。
指是按钮如何在响应式环境中优雅的溢出。这一项条件对规则设计的影响是,我们把溢出按钮“…”统一放置在最右侧。
综上所述,我们制定了第一版「默认规则」,无论左对齐右对齐,统一从左往右阅读。
但这个方案遇到了问题。Ant Design 现有的浮窗类组件里,优先操作的按钮都在最右侧,全部不符合这条规则。如果调整,意味着全部组件升级,这个变更将挑战全部已在使用 Ant Design 的用户习惯。这是无法被接受的,同时为了保持规则的简单性,我们产出了产出了第二版「默认规则」,即现在发布的版本,左对齐从左往右阅读,右对齐从右往左阅读:
调整按钮的样式变量,呈现不同的视觉重量,达到分级强调目的。我们将按钮视觉强调程度分为四级,了解其原理后,可以根据样式变量和按钮类型组合出需要的按钮。
一级按钮通常是主按钮,突出“完成”、“推荐”的操作。一个按钮区最多应该使用一个主按钮。那么一个页面可以有多个主按钮吗?因为没有足够的反面案例支撑一个页面不能有多个主按钮,比较建议在一个焦点任务中,最多一个主按钮,也可以没有主按钮。
也称之为次要按钮,可用于所有次要的按钮行动,如果我们有许多具有相似重要性的行动在一个屏幕上,或不确定要选择哪种按钮,次要按钮永远是最安全的选择。目前二级按钮的视觉强调程度有些偏弱,后续我们也会考虑调优此问题。
没有外边框,用链接色突出,例如文字按钮。比较适合诸如“取消”“还原”等无需强调的操作。文首提到的表格操作列这类无需强调的操作也推荐使用。
并不是非常规范的按钮,用于满足复杂的个性化需求,当按钮数量特别多,并且保证用户直识别的情况。
最后将位置、顺序、视觉强调三项变量组合,可以得到一个最基础的「默认规则」,用于覆盖最简单的场景:
前面我们提到,「默认规则」在组件、模板等设计资产中演示,通常无需思考直接使用即可。 那默认规则不能满足我的需求,我不知道如何安排按钮顺序怎么办?现在,我们用一个小案例来验证如何依据设计建议决策按钮区设计。
场景假设:我需要一个复杂的筛选条件来过滤数据,我考虑在弹窗中处理这个任务。设置完筛选条件后,我可以将这个条件保存下来以备下次使用,或直接点击确定生效。这里面会涉及的操作包括:保存,重置条件,确定,取消。
规则设计想要简单而又令所有人满意是一件非常困难的事,从设计系统的长远效益来看,简单的规则更有意义,同时我们也在尽可能让规则能够符合习惯用法,让用户更容易接受和学习。关于按钮设计规则的探讨,依然存在很多问题尚待解决,欢迎大家提提供反馈,帮助我们一起完善。写完文章后突然有点忐忑~~最后,我们在 Ant Design 官网上发布了一篇关于按钮的设计指南,欢迎前往查看指正。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
与客户的对话和反馈是产品成功的关键要素。然而,研究表明,42% 的公司不调查其客户或收集反馈。
伟大的产品不是凭空打造的——您需要一个持续的过程来从用户那里获取反馈,以指导您的产品路线图、调整消息传递并保持满意度水平的脉搏。
什么是产品反馈?
产品反馈是您的用户分享的有关他们对产品的体验和满意度的任何信息。您可以通过各种研究方法收集产品反馈,例如用户访谈、客户调查、评估客户支持票等。
产品反馈的 3个主要好处
虽然积极收集和分析产品反馈有很多好处,但可以总结为三个主要好处:
A. 改善客户体验和满意度
B. 优先考虑产品路线图并验证新想法
C. 打造成功的产品
让我们更详细地看看它们。
1. 提升客户体验和满意度
为用户提供出色的客户体验不再是一种独特的优势——这是意料之中的。产品发布后,收集产品反馈可帮助您识别任何问题,收集有关要添加或改进的新功能的信息,并找到帮助用户充分利用其体验的方法。
支持票通常擅长揭示需要尽快解决的重复问题。如果一个问题多次出现,那么您就会知道它困扰着您的大部分客户群。此外,净推荐值 (NPS)或客户满意度得分 (CSAT) 等调查是产品反馈的重要来源,可以帮助您了解如何改善客户体验。
2. 优先考虑产品路线图并验证想法
收集用户的反馈有助于产品经理确定产品路线图的优先级,并根据实际用户需求做出明智的决策。
您可以收集关于功能想法的反馈并量化数据以了解哪些是最需要的。
3. 打造成功的产品
如今,最好的产品是基于与日复一日使用您产品的人(您的客户)的持续互动和用户体验而构建的。客户期望的上升意味着企业必须不断收集和识别客户需求,以构建能够解决实际存在的问题的产品。
产品反馈是一种很好的机制,通过它可以从用户那里获取见解,并将其纳入您的决策过程。无论是通过征求还是主动提供的反馈,倾听用户的意见将确保您能够始终如一地交付价值。
产品反馈:类型和方法
您可以使用多种产品反馈方法来设置产品反馈循环并让您的客户与您取得联系。
通常,产品反馈可以是征求的,也可以是主动提出的:
A. 征求反馈是指您要求用户提供反馈。这可能是向您的客户群发送调查或与用户进行访谈。
B. 不请自来的反馈是用户在没有被要求的情况下分享的任何类型的反馈。例如,他们可能会在网上发表评论或在社交媒体上分享评论。
当用户在您的产品中遇到问题、要求新功能或需要帮助完成某事时,通常会出现不请自来的反馈。
另一方面,通过征求反馈,您需要为用户提供背景信息并提出正确的研究问题。根据您的团队需要反馈的内容,以下是您可以用来收集征求的产品反馈的方法的概要:
1) 调查
2) 客户访谈
3) 产品分析
4) 专门小组
5) 客户支持对话
6) 销售和客户沟通电话
让我们更详细地看一下前三个。
1. 调查
调查是一种有效的研究工具,可为您提供针对各种用例的特定产品反馈:分析新发布的性能、在开始构建过程之前验证想法和新概念、测试产品消息传递等。
大多数反馈调查使用开放式和封闭式问题的组合。在创建和发送调查时要记住几个最佳实践,即:
A. 避免引导性问题,例如“您有多喜欢使用该产品?” 相反,请让您的用户提供有关他们体验的详细信息,而不要引导他们做出肯定或否定的回答。
B. 保持简短:注意受访者提供反馈的时间和意愿。在调查中包含的问题不超过五到七个,以使其相对简短,并且仍然可以获得可操作的反馈。
C. 使用开放式和封闭式问题的组合。太多的开放式问题将导致调查时间过长,因为参与者必须为每个问题输入答案。另一方面,仅由封闭式问题(如是/否问题)组成的调查只会为您提供定量数据,而不会揭示参与者给出这些答案的原因。将这两种类型的问题结合起来可以创建有效的调查。
2. 客户访谈
客户访谈是一种通用的研究方法,可以在整个产品开发过程中获得有见地的反馈。从进行最初的设计研究到获得发布后的反馈——与用户交谈总能产生新的见解。
对于产品营销人员来说,访谈是一种有用的方式来获取有关新产品或功能的消息传递的信息。
3. 产品分析
产品分析是了解产品性能和改进方式的绝佳来源。产品分析对产品经理和营销人员都很有用,可以帮助您了解用户在做什么与他们所说的相比,这可能并不总是相同的。
如果您在发布之前进行了定性测试,产品分析可以帮助您验证您的初始假设。
此外,产品分析是识别产品中严重问题的良好来源。例如,衡量留存率之类的分析可以让您随着时间的推移跟踪它或将比率与行业标准进行比较。当任何异常发生时,数据是进行更多研究以了解问题所在的起点。
创建产品反馈循环的重要性
您可以使用多种方法来收集产品反馈,从我们上面看到的三种方法到社交媒体监控、客户支持票、销售电话、客户沟通电话等其他方法。更重要的是创建一个流程,通过该流程,反馈始终如一地到达您的组织并被采取行动,从而征求更多用户反馈。这也称为产品反馈循环。
反馈循环是一个迭代过程,其中从客户反馈中收集的见解被实施到产品开发过程中,并用于在一致的基础上为产品决策提供信息。随着新的反馈影响新的产品策略,这个过程会无限重复,而变化会促使客户提供额外的反馈。
这种持续不断的客户反馈将帮助您把握客户满意度的脉搏,并在您和您的客户之间建立一个开放的渠道。
如何收集好的反馈
并非所有反馈都是平等的,或者就此而言——有用。就像进行任何其他研究方法一样,收集很好的反馈需要理解并遵循关键的最佳实践。这是你应该知道的。
建立明确的目标
在您开始收集反馈之前,第一步是定义您的目标并建立明确的衡量方法。
一个好的起点是查看您负责的 KPI。对于产品团队来说,这可能意味着激活或用户保留。对于产品营销人员,这也可能是合格的注册和使用指标。
此外,您建立的目标还将帮助您选择正确的方法来收集反馈。例如,客户访谈非常适合在进行初步发现研究时获得定性反馈。另一方面,原型测试最适合在开发前与用户一起验证设计。确立目标是获得做出明智决策所需的反馈的第一步。
提出正确的问题
其次,提出正确的研究问题是获得有效、可靠反馈的关键步骤。确定目标后,下一步是制定您需要发送给用户的调查或为客户访谈准备研究计划。
在制定研究问题时,需要牢记一些重要的指导方针。其中一些是:
A. 避免引导参与者寻找答案
B. 避免封闭式问题,尤其是在客户访谈中
C. 参考特定时刻,例如使用功能或新产品
总结
产品反馈是洞察客户行为和痛点的重要来源,可帮助您在整个产品开发过程中做出明智的决策。
今天在产品和营销领域工作的每个人都将从与客户交谈和倾听他们的意见中受益。随着产品的成熟和客户需求的变化,这些对话不应该是一次性的,而是构建伟大产品的关键部分。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:站酷 作者:对啊分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 Ant Design 的界面设计中,会包含大量的信息组织和编排工作,我们常常会遇到这样的问题:
一个详情页面里应该包含哪些信息?
什么样的信息应该放在卡片里,什么样的信息应该平铺显示?
一个页面内的信息该怎么让用户快速找到重点?
···
信息组织是我们在日常生活中经常会遇到的问题,商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等,各式各样的信息是如何被组织编排到一起,又是以何种方式把信息呈现给用户呢?
在解答这些关于页面设计的问题之前,我想先给大家讲一个生活中的小案例:
逛过宜家的人,应该会注意到宜家类似迷宫的动线设计,这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时,就会被一条隐形“向导”默默地引导着向前走:一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域,直到一个不落地走完才抵达出口。但在这个主线之外,为了确保一些消费者在购物中,能够快速离开或快速去往感兴趣的区域,每个主区域间都有一些较隐蔽的捷径作为辅动线。
这种动线设计一方面能够把所有商品按照路径有效的串联起来,另一方面又能让消费者不知不觉的沿着这个路径去了解商品。
动线布局是宜家的隐形骨架,而真正让宜家卖场丰富起来的,还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样,它不会把同类型产品进行大集合,而是根据人们的正常生活场景来分类,不同类型的产品在同一区域组合陈设,构成生活中的一个小场景,一方面能达到对各个商品功能的完美诠释,另一方面,一个产品尽量不会重复出现,尽可能减少商品展示的复杂性。
在整体商品布局上,有两个很有意思的地方:第一,在居家体验中心,样板间的陈列顺序完全是按照消费者回家后的场景而布置:客厅、餐厅、厨房、书房、卧室、卫生间......,第二,在家居用品中心,则会根据消费者在家的日常起居行为进行摆放:做饭、休息、读书、收纳......
现实生活中的这些例子,对我们的界面信息组织有什么启发呢?
在宜家的案例中,关于动线,映射到人的行为上,有一个比较专业的概念叫做“流”(flow)。 Mihaly Csikszentmihalyi 的著作《心流:最优体验心理学》中对“流”的定义:当人们全身心投入到某个活动中时,会对周边干扰视而不见,这种状态被称为“流”。宜家的动线设计很好的营造了这种状态,让消费者完全沉浸于商品浏览,并且尽量不去打断这种行为流。
经过研究发现,构成“流”的行为动作,其前后必然存在某种连续性或者关联性,例如回家的行为动线,日常起居的行为关联等。这个概念在界面设计中依然适用,很多界面设计都在有意无意的去创造“流”的状态,带给你用户沉浸式体验,例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容,让用户沉浸其中无法自拔。
关于商品布局,映射到信息组织上,《韦氏大词典》 中提到一个词“编配”(orchestration),对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义,宜家的商品和谐的组织构成一个场景,它向消费者传递的不仅仅是商品本身的功用性,更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上,表单页的和谐组织能够帮助用户快速完成信息录入,详情页的和谐组织能够帮助用户快速理解一个描述对象......
各种各样的信息总能以某种关系组织到一起,而如何根据这种流为用户去组织和呈现信息呢?
“流”的本质其实是一系列具有关联性的行为动作串联,而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后,我们可以做一个初步假定:所有的信息是否都可以通过关联性和复杂度来进行组织编排?针对着这两个维度,我们又进行了更深层次的研究和验证,并得到基本定义:
信息复杂度:信息量的大小,包括种类、数量等。
信息关联性:信息之间的潜在关联或者相互影响。
我们设想,这两个维度能否运用到界面设计上的信息组织呢?
界面信息之间的潜在关联或者相互影响,通常体现在「逻辑关联」和「视觉关联」两个层面。
顾名思义是指一个事件中的所有信息之间的关系,在界面设计中,无论什么样的信息,总能以某种方式进行分类和编排在一起,例如手机通讯录中的人名,可以按照字母顺序从 a 到 z 进行排列,电商网站的商品导航会根据类别进行分组,待办事项可以根据时间进行排序等。
如何找出信息之间的逻辑关联性呢?
被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括:
地点(Location)
字母(Alphabet)
时间(Time)
类别(Category)
层级(Hierarchy)
简称LATCH。这五种方式基本可以涵盖所有的信息组织策略,信息是无限的,但是信息组织方式却是有限的。
任何一个界面呈现给用户的时候,用户都会下意识的去判断界面上什么信息是最重要的,接着会去关注这些信息都有什么关联,因此,除了按照逻辑去组织信息之外,还应该合理的去呈现信息的视觉层级关系。
视觉层级关系有几种常见的区分方式:
强调:使用基本视觉元素(颜色、形状、大小等)区分层级
亲密性:位置接近的元素通常是有关系的,而且位置越近,关系越强
图胜于言:视觉符号和对象关联,例如:齿轮或扳手=设置,垃圾桶=删除
浏览顺序:根据浏览顺序,从左到右(部分地区)或从上到下信息重要程度依次减弱
···
如何验证界面元素的视觉关联性是否合理呢?
《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试,为了确保界面视觉信息有效的拉开层次关系,图形设计师经常会用到一个方法“眯眼测试”(squint test)。闭上一只眼睛,眯着另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成组,哪些元素看上去零散。从多个角度去观察,总能够发现之前没有注意到的布局和构成问题。
通常以信息量的大小或样式多少来衡量,这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息,但是信息量较大(超过三屏),则认为这个页面的复杂度较高,或者一个详情页面内同时包括文本、表格、代码展示、图表等元素,也会认为这个页面的复杂度较高。
信息的复杂度和关联性并不是两个完全独立的维度,根据关联性去组织信息,本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究,可以帮助我们如何选择合适的方式把信息呈现给用户。
具体到界面设计层面,信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例,详情页内的信息该如何合理的组织信息并有效的传达给用户呢?
根据关联性和复杂度的概念,我们抽象出一个简单的「复杂度模型」,用来判断信息复杂程度和关联性对页面结构的影响。
横坐标表示页面信息之间的关联性,纵坐标表示信息的复杂程度,两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块,代表复杂程度低且关联性强的内容,例如一段纯文本的产品描述信息;远离原点颜色最深的色块,代表复杂程度高且相互独立的信息,例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。
与之对应的,我们对信息展示方式也进行了维度划分,用来解决在复杂的企业级产品界面设计中,何时使用卡片区分,何时拆分为 tab 等布局问题。
根据承载信息复杂程度的不同,我们对容器组件也进行复杂度划分,用来解决在不同页面布局中,不同类型的信息用何种方式呈现的问题。
这个模型可以帮助设计者在决策布局组件时,有章可循。最终让用户感知,当用户来到一个页面时,即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地:
关于以上的模型在实际设计中该如何操作,这里提供一个推荐步骤可以参考:
「复杂度判断」明确设计对象信息量的大小
「关联性判断」判断各个信息之间的关联性,并合理分组
「组件选择」选择合适的容器组件来呈现信息
「模板选择」选择合适的页面模板,组织编排信息
「眯眼测试」检查整体布局是否合理(仅参考)
大到一个系统,小到一个按钮,背后的每一条规则既要从人的角度去思考设计的易用性,同时也要从信息本身去推敲组织的合理性。作为设计规范的制定者,不能凭感觉简单了事,而是需要找到一套通用的模式,帮助用户快速找到并理解信息帮助用户提效,同时提升用户的浏览体验,是我们一直在探索的课题。
虚拟界面的信息组织和现实世界一样,既需要符合人们对事物的认知,也需要遵循人们的行为习惯,这些认知和行为习惯,构成了自然交互的基础,这也是我们一直在探索方向。当然,信息组织除了以上这种思路,还有更多的思路和方向等待挖掘,期待大家的反馈和建议,帮助我们一起完善。
导读
为什么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设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
表单对于用户和产品同样重要。当我们需要收集数据时,表单是我们最常采取的方式(也许是由于在互联网普及之前,表单就已经长期应用于我们日常生活中 )。因此,将表单设计得友好易用是提高用户信息填写完成率的关键。
表单拆解
表单的样式会根据业务目标、内容的不同而发生变化,但是有一些基础的组成部分能帮助用户快速顺利地完成表单的填写。
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设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
服务设计大家也不陌生了吧,关注我们的同学也看过我们写过很多关于服务设计的文章这其中也有一些枯燥的科普文还有理性讨论的文章,当然也有很多不了解服务设计的小伙伴,所以这篇文章就来帮大家介绍一下:服务设计。
《从用户体验到服务设计:没有人会告诉你这赤裸裸的真相》
《如果你想学服务设计,有哪些可选专业?[备查]》
《为什么要应用服务设计?》
《服务设计和用户体验设计:有什么区别?》
吸引客户并与公司建立联系
服务设计方法帮助公司更有效地执行新思想、满足客户期望、打破藩篱并创造商业价值。通过可视化新的想法和客户旅程,并从第一天就与客户和员工进行测试,这种方法突出了潜在的挑战,并产生想法来缓解它们,从而增强了对想法的信心和对行动的更高承诺。
结论
服务设计关注客户需求,执行想法并创造商业价值。
从最开始,服务设计就通过与客户和员工进行测试来降低商业风险。
在整个公司中共享客户洞见,可以打破藩篱,并使工作一致。
没有良好执行的聪明策略很少能实现卓越的服务。需要工艺、正确的方法和技能,才能以具体的方式将客户与企业联系起来。服务设计是帮助公司实现新的客户体验、满足客户期望、处理内部挑战和创造商业价值的强大工具。
顾客的视角
服务设计方法将人的关注点引入到服务的开发中。它帮助公司以客户的眼光来看待全局,并提供工具来设计客户与整个公司之间的每一个小小的互动。
客户洞见是有价值的
市场调查告诉你客户喜欢什么,但可能无法告诉你为什么。
服务设计者使企业能够更深层次地了解客户。从深度访谈和观察到创意客户研讨会,这些方法帮助公司理解为什么人们经常言行不一,以及寻找下一个大创意。
在整个公司中分享客户洞见也可以有效地打破藩篱并协调工作,这样公司就能够交付通过多种渠道与客户互动的体验。
观察顾客去了哪里,他们看到了什么,听他们说了什么。获得深刻的客户洞见,推动新想法。
眼见为实
让想法看得见摸得着是在组织内部澄清和获得新概念认同的有力方式。这种方法也突出了可能出现的潜在挑战,并有助于产生缓解这些挑战的想法,从而增强对这些想法的信心,提高对行动的承诺。
这就是为什么服务设计者总是在想法和解决方案出现时就将其可视化的原因。一种策略可以以可视的格式更有效地进行沟通,客户和员工之间的交流配上一段动画就会更容易理解,一个提议可以通过web界面的设计细节得到强化。
服务场景可以让企业立即了解新服务对客户和员工意味着什么。
服务蓝图
客户互动或接触点的关键时刻,越来越多地蔓延到公司的不同部分。
服务蓝图是一个可视化的工具,帮助公司协调不同的部门作为一个整体一起工作,以创建一个好的、一致的客户体验。蓝图是一幅地图,描述了客户通过新服务的旅程,以及公司如何通过各种渠道与他们接触。新客户体验的愿景共享有助于部门之间的协调,并使他们更致力于项目。
服务蓝图使公司能够看到各个渠道必须如何协同工作才能提供良好的服务体验。
测试体验
尽管在研发方面投入了大量资金,但仍有很多产品和服务在客户或交付成本方面失败的例子。
服务设计者通过让客户和员工从第一天就参与到测试中来降低这些风险。因此,在大量资金投入技术或公司变革之前,公司就可以学习、改变和完善理念。
可以快速而廉价地构建服务原型。设计师使用简单的模型和场景对少量客户和员工进行测试。在后期阶段,客户和部门数量有限的试点也可以产生更多的证据,证明服务可以在更大的范围内发挥作用。
一项针对英国无工作人群的为期9个月的试验证明了不同的人群是如何成功进入职场的。
它很有趣!
服务设计师被训练成以高度协作的方式工作,并拥有广泛的创造性方法来将这种思维模式带到公司中。
系统的、创造性的解决问题的方法的结合产生了大量的解决方案,并激励着团队不断创新。让我们玩得开心!服务设计方法放大了你克服障碍的潜力,使雄心勃勃的想法成为成功的现实。
我认为服务设计是当今商业世界中最重要的设计分支。-Kerry Bodine, Forrester Research副总裁兼客户体验部首席分析师
持久的客户关系
服务设计提供了创造性的、以人为中心的方法、工具和技能来执行策略。用这种方法来弥补公司所能做的和人们需要和想要的之间的差距。其结果将是创造更好的体验,建立持久的客户关系。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:站酷 作者:马克笔设计留学
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在工作中,由于每个人对用户目标、用户需求的理解点不同,而且每个人多多少少从自身体验出发,设计师、产品、技术人员很难对产品达成一致,导致产品需求评审、设计评审过程中发生很多争论、分歧,而且很难说服彼此。大家可以回想一下,是不是也经历过这些?
设计师和开发、产品经历,通常来自不同背景和经验的团队,他们必须就项目目标、用户需求和行为,甚至所涉及的组件流程达成共识。这种共同理解通常是通过可视化(通常称为映射)构建的。映射理解并描述了与产品相关的各个方面和过程。
本文概述了四种常用映射、它们的定义特征以及何时使用:
同理心地图
客户旅程地图
体验地图
服务蓝图
外,本文将概述在创建这些映射之前必须做出的准备。
同理心地图帮助团队成员了解用户的心态。
定义: 同理心地图是用来表述我们所知道的一个特定类型的用户的工具。它将用户知识外化,以便 1) 建立共同的理解,以及 2) 辅助决策。
特征:
地图分为 4 个象限:所说、所想、所做、感觉。
它显示了用户对与产品相关任务的看法。
它不是按时间顺序或任务顺序排列的。
每个角色或用户类型都有一个移情图(1:1 映射)。
为什么使用它:
与用户建立同理心
强制团队内部人员对齐和理解用户类型
何时使用:
任何设计过程的开始
在对用户访谈中的研究笔记进行分类时
客户旅程地图侧重于特定客户与产品或服务的互动。
定义: 客户的旅程地图是过程的可视化:一个人为了实现特定的业务或产品目标的过程。它用于理解和解决客户的需求和痛点。
在最基本的形式中,旅程地图首先将一系列用户目标和操作编译到时间线框架中。接下来,用用户的想法和情感充实骨架以创建叙事。最后,该叙述被浓缩为一个可视化、用于传达将为设计过程提供信息的工具。
特征:
该地图与特定产品或服务相关联。
它分为 4 个泳道:阶段、行动、思想、心态/情绪。
它反映了用户的观点:
包括她的心态、想法和情感
省略大部分流程细节
它是按时间顺序的。
每个角色/用户类型有一张地图(1:1 映射)。
为什么使用它:
确定导致痛苦或愉悦的特定客户旅程接触点
打破孤岛,对客户旅程建立一种共享的、组织范围内的理解
将旅程中关键接触点的所有权分配给内部部门
何时使用:
在设计过程的任何时候,作为整个产品设计周期中团队之间的参考点
体验地图概括了跨用户类型和产品的客户旅程地图的概念。
定义: 体验地图是“一般”人为实现目标而经历的整个端到端体验的可视化。这种体验与特定业务或产品无关。它用于理解一般的人类行为(与客户旅程地图相反,后者更具体并专注于与特定业务相关)。
特征:
它与特定的产品或服务无关。
它分为 4 个泳道:阶段、行动、思想、心态/情绪。
它提供了一个普遍的人类视角;它不是特定于特定用户类型或产品/服务的。
它按时间顺序描述事件。
为什么使用它:
了解一般人类行为
创建对产品/服务不可知的体验的基线理解
何时使用:
在客户旅程地图之前,以获得对一般人类行为的理解
将多种体验(工具和特定用户不可知)融合到一个可视化中时
服务蓝图是客户旅程地图的对应物,专注于员工。
定义: 服务蓝图可视化不同的业务组件之间的关系-人、道具(物理或数字证据)和流程-这是直接与接触点在特定客户的旅程。
将服务蓝图视为客户旅程地图的第二部分。与客户旅程地图类似,蓝图在涉及许多服务相关产品的复杂场景中发挥着重要作用。蓝图是实现全渠道、涉及多个接触点或需要跨职能工作(即多个部门的协调)的体验的理想方法。
特征:
它与特定服务相关联。
它分为 4 个泳道:客户行动、前台行动、后台行动和支持流程。
它反映了组织的观点:
专注于服务提供商和员工
遗漏了大多数客户详细信息
它是按时间顺序和等级划分的。
为什么使用它:
发现组织中的弱点
确定优化机会
弥合跨部门的努力
打破孤岛并创建一种对如何提供服务的组织范围内的共享理解
何时使用:
客户旅程映射之后
在进行组织或流程变更之前
在内部查明漏斗或断点时
在开始任何映射工作(无论类型如何)之前,必须做出 3 个决定:
这个决定涉及可视化中描述的动作和状态:它们反映了当前状态还是理想状态?
当前映射基于您正在映射的实际“今天”状态。当映射目标是识别和记录现有问题和痛点时,这种方法是理想的。使用当前状态图帮助分析研究或围绕数据验证问题调整团队。
未来的映射基于用户类型、体验或未来服务结构的“理想”状态。未来状态图有助于重塑和构思用户或体验在未来的感受。使用未来状态图为您的产品或服务的理想形式设置基准或目标。
此决定取决于您将用于构建映射的输入类型。
假设映射基于团队或组织内现有理解的积累。这种方法是合并多个现有团队视图、创建研究计划(基于假设图中出现的差距)以及迈向更高保真度、基于研究的地图的第一步的好方法。
研究制图基于专门为构建地图而收集的数据。当有时间和资源专门用于制定研究计划时,这种方法是最好的。虽然这种方法可以创建最好的地图,但它需要时间和大量的支持。无论您从哪里开始,您的地图都应该是迭代的,并随着新发现不断更新。
该决定与最终地图可视化的质量有关。
低保真地图未经打磨,通常以灵活、未经修饰的方式使用便签创建。这些地图在过程的早期阶段是最好的。低保真度意味着人们能够根据需要进行协作、修改和更新。使用便利贴(物理贴在墙上或使用 Mural.co 等工具以数字方式进行)或协作 Excel 表格。
高保真地图经过打磨、数字化创建,看起来很完美。高保真地图最适合创建将在许多人之间共享的工件。高保真可以更容易阅读,但由于产品的“完成”性质,灵活性较差。这些地图通常以数字方式创建,然后分散。
所有 UX 映射都有两个好处。首先,创建地图的过程会迫使对话和一致的心理模型。其次,映射产生的共享工件可在团队、组织或合作伙伴之间使用,以传达对用户或服务的理解。随着团队的前进,这个工件也可以成为决策的基础。
在一种映射方法上使用另一种映射方法不会对项目造成破坏,理想情况下,可以根据需要在产品设计流程的不同节点使用所有四项的组合,以深入了解用户需求。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
文章来源:站酷 作者:ZZiUP
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一些典型问题也相应显现:上手就干、主观设计、缺少方法、忽视跟进等等。
所以我们撰写了「UI标准设计流程」,希望能为UI设计师提供对于设计支撑思路的共识,让设计更有价值:
从接到需求到上线后跟踪,我们把流程拆分为五个节点:需求分析-交互设计-视觉设计-视觉规范-方案验证。
当然,在设计流程中我们只表达不同流程中的行为目的及标准,相关方法论我们会配套一份「设计师成长指南」,不久之后再与大家分享。
1.需求分析
我们在接到一个设计需求后,要做的第一步是进行分析并确定设计目标。
我们需要:了解背景、用户和竞品,能准确理解产品定位和需求目标,评估需求的合理性和准确性,并提供相应策略;甚至洞见机会点,通过设计对业务产生正向价值。
背景分析
目的:背景分析是为了让我们在刚接触产品的时候,去洞察表面背后的东西。通过背景分析,能帮助我们快速切入产品,并根据已有信息去制定准确并具有说服力的设计策略。
行为:我们需要了解:产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结。
用户分析
目的:对UI设计师而言,用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点。
行为:我们通常需要了解:用户画像、用户需求、用户行为、用户路径等。
竞品分析
目的:竞品分析能够让我们获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品。
行为:UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。
需求评估
目的:在了解以上的通用信息后,我们要对需求进行评估,去决定采用哪种方式、制定什么样的策略。
行为:我们接到的需求,通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。
对不同类型的需求,我们都可以用5个问题去评估:
1.是否可被证伪?
2.目标是否明确?
3.投产比如何?
4.是否有更优解法?
5.是否有可预见风险?
基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。
目标对齐
目的:设计为目标服务,所以我们要在设计开始前与需求方对齐目标,这也能为设计价值的佐证提供标准。
行为:设计目标通常有3种,我们可以从中去对需求目标转译:提升数据型、解决问题型、创新项目型。
针对不同目标我们可以去制定不同的设计策略,并对策略的落地进行数据监测与分析,进行方案校正。
2.交互设计
在产品流程中,交互设计的作用在于,通过信息架构的组织去产出体验流畅的界面原型。
我们需要:充分理解整体流程与交互原型,基于设计原则去发现可优化的部分;同时能平衡产品、设计与开发的效益最大化,并驱动产品的体验提升。
设计原则
目的:设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则,能使我们在设计支撑时,拥有更丰厚的专业度和更敏锐的洞察力。
行为:我们需要去了解市面常见的Guildline如iOS、Material、UWP等,以及一些常用原则如菲兹定律、格式塔理论等等。
流程梳理
目的:流程的再梳理,可以帮助我们在视觉设计前,快速地理解和诊断流程逻辑。
行为:在流程再梳理的过程中,我们需要注意以下4个问题:
1.功能是否完整?
2.链路是否流畅?
3.步骤是否冗余?
4.是否易于理解?
基于以上问题,我们可以用自身的专业储备去推动流程的优化。
原型优化
目的:交互原型是需求内容的外在表现,通过原型优化,可以最大程度地避免视觉评审后的设计返工。
行为:在对交互原型优化的过程中,我们要重点注意以下4个问题:
1.架构是否符合目标
2.层级是否足够精简
3.信息是否传达准确
4.状态是否有所缺失
在视觉设计时,我们基于以上四点可以去同步优化原型,并根据经验去寻求体验和成本的最佳平衡。
3.视觉设计
视觉设计是产品与用户直接连接的媒介,优质而恰当的视觉设计,可以极大地提升产品吸引力。
我们需要:基于分析确定视觉方向、定义设计语言,输出准确且高质量的视觉页面。
设计情绪板
目的:设计情绪板可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。
行为:我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。
设计语言
目的:设计语言是情绪板的具象表达,它将构建起用户对产品的视觉感知。
行为:在明确设计方向后,我们就要基于情绪版去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等。
典型页面
目的:典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考。
行为:我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础。
4.设计系统
在设计典型页面的同时,其背后其实已经对应了一套设计规范和组件,而我们基于此去整理并沉淀出设计系统,能极大地提升统一性和迭代效率。
我们需要:制定完整、清晰的基础规范,沉淀图标库、组件库等,并持续优化和更新,形成可持续沿用的产品设计系统。
基础规范
目的:基础规范是设计语言的沉淀,也是视觉变量的基本粒子。它可以保证页面的基本统一,同时我们可以基于不同业务快速地拓展其他主题。
行为:在我司,一份基础规范的构成包括:色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。
图标库
目的:图标规范可以帮助其他成员快速、准确地进行图标拓展,而沉淀的图标库也可以极大地提升产出效率。
行为:基于具体需要,我们可以设定多套图标风格,规范其栅格、笔画、圆角等,并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀,如空态插画、悬浮入口、徽章、商品等。
组件库
目的:组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。
行为:在我司,一套组件库通常包括:通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外,我们也会对常用模块进行梳理,沉淀业务组件库。
5.落地跟踪
在设计完成之后,我们需要对设计方案进行评审、验收及数据跟踪,以保证设计方案的落地并跟进调整。
我们需要:运用合理策略以保证设计方案的高质量落地,对方案上线后的用户反馈进行有效跟进,运用多种方式验证目标,迭代产品。
设计评审
目的:设计评审通常包含了交互与视觉,其目的在于审查设计方案中的可用性问题。
行为:在我司,视觉评审即终评,我们需要在视觉稿中标注出所有交互逻辑,并对潜在问题有预判,能与各方确认目标、分桶与数据埋点;同时我们要对开发实现有预判,能与研发确认实现细节。
设计验收
目的:设计验收是为了确保需求满足、体验流畅,并且设计细节能高质量落地。
行为:视觉设计师主要验收视觉细节的还原度,并且要在一定程度上对开发的适配、样式解法有预知,减少二次验收。同时需要保证验收有沉淀,利于后续跟进。
数据验证
目的:数据验证除了分析分桶之外,也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。
行为:我们通常基于设计策略,去对数据进行筛选与分析,以此衡量设计对于目标达成的增益度。对于有问题的,能反思并且修改;对于结果好的,能总结并且沉淀。
设计复盘
目的:设计复盘以结果为导向,我们可以通过复盘对设计策略的价值进行总结验证,并去发现、优化流程中的不足之处。
行为:我们需要陈述设计目标和策略,对设计价值进行验证,并能总结过程中的亮点与不足,制定后续计划、沉淀相关经验。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
使用互联网产品过程中,会有很多因素造成操作错误或失误,导致无法顺利完成任务。因此产品的容错性设计是交互设计中的重要内容。
用户在实际使用互联网产品的过程中,会有很多因素造成操作错误或者失误,而导致无法顺利完成任务,或者完成任务的效率很低。产品自身所具备的容错能力对于各种使用场景的有效覆盖,可以提升产品纠错效率、降低用户操作出错概率,因此产品的容错性设计是交互设计中的重要内容,也是提升用户体验不可忽视的一个环节。
容错性概念源于计算机领域,容错性是指计算机系统在发生故障的情况下,依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。
本篇内容我们讨论的是容错性在互联网产品领域的内涵和意义。延伸到互联网产品设计领域,容错性的范畴更为宽泛,涉及产品对错误操作承载能力的多个方面,包括:如何降低用户操作的出错率,如何及时提供纠错帮助,以及如何给用户提供解决方案等内容。
「 即便你的产品90%的时间都运行良好,但是如果在用户需要帮助时置之不理,他们是不会忘记这一点的。——《Getting Real》」
一个产品设计的无论多么简单,用户都难免在使用过程中因为各种原因而犯错。互联网产品面向的用户群体是复杂多样化,教育背景的不同,行为习惯的差异,复杂的使用场景,都会使得用户的真实操作相比产品设计之初的预期有一定出入。此外,一些产品本身存在的因素,例如产品路径复杂,逻辑不畅等,也有可能造成用户无法顺利完成任务,亦或是完成任务的效率低,出错率高。产品在遇到错误如不能够及时纠错帮用户挽回损失,会给用户带来不好的用户体验,也是产品的一种设计缺陷。因此设计师应具有良好的容错性设计思维,尽量避免用户错误操作的出现,当用户出现错误操作时,帮助用户识别、诊断,及时反馈问题所在,并提出有效的解决方案,帮助用户快速从错误中恢复。最终达到使产品更可用、更易用的目的,给用户带来更优的用户体验,使用户与产品的交流更加顺畅。
互联网产品的容错设计可从用户使用产品的三个阶段来考虑,即操作前、操作中、操作后。可大致归纳为以下几方面内容:首先在用户操作前给予正确有效的引导;其次在重要的操作步骤给予用户及时有效的提示;当用户发生操作错误或失误时及时为用户纠错并提供有效的解决方案;最后帮助用户在错误发生后迅速回到正确状态。
在用户开始任务操作前给出用户正确有效的提示,可减少错误操作的发生。需要注意的是,引导应尽量醒目且简单易理解,确保能引起用户注意,并且在用户注意到后快速获取信息,到有效的防错帮助。
产品常见的引导主要针对两种情况。第一种是针对于新手用户的功能介绍,不同于曾使用过产品的用户或者高级用户,新用户首次使用产品的过程其实是一个学习的过程,此时需要让用户快速了解产品核心功能及主要的操作,帮助他们更快地上手。
例如下图导航APP新版本的新手引导【如图1】,在用户首次启动产品时,产品用趣味性的图文形式给用户展示了打车、公交乘车、实时公交路线等功能的信息介绍,能够让新用户快速熟悉核心功能,并在正式使用产品的过程中提升效率,降低出错率。
图1-导航APP新手引导
第二种情况是针对产品上线的新功能或者较大的功能变动而设计的初次引导,产品的功能改动可能会是用户产生不同程度的陌生感,适当的提示可帮助用户快速熟悉新功能点或页面信息的调整。初次引导常见的方式有很多种,包括:遮罩式引导、弹窗式引导、气泡、浮层式引导等等。
例如版本升级后的音乐APP【如图2】,首页使用情感化图文设计加遮罩式的引导,可以有效将注意力集中到特定功能上,用户进入页面第一时间就注意到,确保了信息传达的有效性。
图2-新版首页的遮罩引导
以上列举的内容属于狭义层面的引导,用户尚处在被动接受引导的学习阶段,在此阶段引导的目的是提醒和防错。从广义的层面来讲,我们可将对用户的引导理解为”消减信息的不对称性“,当用户面对可影响其决策的因素时,给予用户关键性的信息提示和说明,可以促使用户做出正确的决策。
针对需要加工时间的特殊品类,如烘焙蛋糕,京东到家在用户决策的关键页面和步骤展示时效提醒【如图3】,避免用户在完成订单信息填写或结算后才发现商品的配送时间超出用户的期望,会给用户带来极为不好的购物体验。
图3-京东到家页面中的时效提醒
当用户进行一些如修改、删除、覆盖等不可逆操作时,系统需要在用户做出这类操作指令后告知其产生的后果,让用户自主决策是否选择继续执行。在此阶段的提示需要注意从以下两个角度考虑:一是提示的方式,二是提示的时机。
在用户完成任务的操作路径中,大部分产品首先会选择以弹框的形式对用户进行信息提示。弹框可以分为模态弹框和非模态弹框两种大的类型【如图4】,主要区别在于是否强制用户进行交互操作。如何选择合适的弹框形式对用户进行提示,要依据提示信息的优先级和视觉权重的大小,同时要清楚不同类型的弹框适合的场景。
图4-弹框分类
模态弹窗是较重的提示方式,在用户进行重要且有风险的操作时可优先考虑使用。其优点是可以快速获取用户的视觉焦点,缺点是会打断用户当前的操作流程,用户需要进行如单击“确定”、“取消”、“关闭”按钮等操作指令将该对话框关闭后才可继续操作。
而非模态弹框属于轻量级的提示方式,其优点是不强制用户进行交互操作,或者用户依然可以在页面进行其他操作。弹框出现一段时间后会自动消失,所以但不利于承载过多文字信息。非模态弹框对用户造成的干扰较小,但也因此容易被用户忽视。
给用户的信息提示还有一点不可忽视的是反馈时机,应确保用户在关键的操作步骤得到及时的反馈,因为滞后的反馈可能会导致用户因为某一个环节的错误操作不得不重复操作一遍之前的流程,或者要修改关的一系列信息。
【如图5】中的登录页面,用户登录需要依次输入手机号、密码、图片验证码,但如果用户输错了密码并不能马上得到反馈,依然可以继续填写验证码,只有在全部信息填写完之后点击登录,系统才会校验密码,并提示用户密码错误重新确认,用户需要再次输入密码以及识别并输入一次验证码。但如果系统验证密码可以提前到输入图片验证码的步骤之前,在用户在得到密码填写错误提示后则可以停止操作后面的步骤,马上修改密码。
图5-登录页面中的提示滞后
同时,尽量为用户提供相应的解决方案,这样可以提升纠错信息有效性。BOSS直聘会因为手机储存空间不足给用户报错,并且会告知用户如何去管理储存空间,以解决此问题【如图7】。
图6-多行表单报错页面
在产品设计中,为降低操作的出错率,限制也是一种方式。在可能造成错误操作的入口适当设置操作障碍或者禁止操作,增加不可逆操作的难度,可以有效规避错误操作发生风险、减少误操作概率。例如常见的页面信息置灰、按钮置灰的设计,可以有效避免用户的误操作。
此外通过让控件、动作、选项等变得可见,尽可能减少用户记忆负担,把需要记忆的内容作为辅助信息提供给用户,或帮助用户自动完成信息填写也可以帮助用户快捷高效地完成既定任务,降低出错率。例如【如图8】在信息填写的步骤,可在用户已复制的内容和上传的图片中自动识别姓名、电话、地址等内容,并在用户确认后自动帮用户填写对应信息,为用户大大节省时间和记忆成本,快捷高效地完成既定任务,降低出错率。
在用户执行操作后,应尽可能的为用户保留已操作的信息,以便在发生错误或失误后可撤销之前的操作。针对一些流程较为复杂的操作任务,记录用户在每一步骤的操作信息,让用户可以从出错的步骤上及时恢复到正确的流程上,或恢复到距离错误操作最近的步骤,可有效的帮用户挽回失误。例如很多图片编辑的APP都支持用户撤销当前的操作,在用户对照片进行多编辑后页面上会有回到上一步和下一步操作的按钮,可让用户有机会恢复到上一步操作结果上。
图9-图片编辑页面顶部切换上一步和下一步的操作按钮
以上是关于互联网产品中容错设计的概念、重要性以及设计方法的一些阐述和思考。在产品设计的实际应用的中,可以模拟使用场景,对目标用户使用产品的真实操作进行行为观察,分析对比产品设计的操作路径与用户真实操作的差别,发现并收集用户可能发生错误或失误操作的关键步骤,验证产品的容错能力是否能达到有效覆盖。同时,也要通过产品数据的对比分析得出用户操作错误及失误的真实原因,指导并提升产品容错能力的设计优化,进而不断提升产品的可用性和易用性。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com