首页

这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!

lanlanwork



我们先来看原作效果:

图片

再来看临摹练习的效果:

图片

好了,分析开始:

可优化点1:头图的透气感

我们看下头图的对比:

图片

相比之下原作中的头图有很多白色,让画面更加的有透气感,练习作品中的头图会有点闷。

头图的选取也影响了卡片投影的效果:

图片

原作的投影会稍有细节一点,会耐看很多。

 

可优化点2:色彩耐看度

当我们的颜色全都用彩色的时候,就会看起来有点腻,添加黑白灰是最好的一种解腻方式,我们看下面的这些插画:

图片

基本所有的都黑白灰色。

回来看我们的案例:

图片

原版会有很多灰色的搭配使用,但是练习作品全都是用的橙色系,所以看起来会稍微有点满。

 

可优化点3:图标的精致度

当图标有圆形底座的时候,我经常使用的方式就是把图标本身稍微小一点,别让它填充的太慢,比如我们举个最简单的例子,看下面两种方式:

图片

是不是左面的看起来会精致一些。

回到案例本身,我们看下箭头图标:

图片

也是一样的道理,左侧原版的会稍微精致一些。

 

可优化点4:关于信息层级对比

我们看下信息层级对比:

图片

原版的很多信息层级十分明显,练习的作品层级有点没拉开。

当然,这里需要强调下,真正落地的时候还是要考虑能否看清,原版的灰色字是有点太浅了,如果真正落地的话,可能不太行,但是作为概念高,把信息层级拉开一点的做法,是OK的。

 

可优化点5:一些散点

临摹稿的一些间距可能也会有一些问题,比如卡片和下面信息之间的间距:

图片

就稍微有点大了,看起来有点不太合理。

还有这里的状态可能也不是很全等等,没有选中爱心的状态:

图片

当然,说了一些问题之后,回来看,临摹作品其实也是有一些优点的:

比如这个页面的底部按钮:

图片

我觉得变成重色按钮会让整个画面层次更加丰富,并且操作区域也更加明显。

再比如选中态家了一个爱心图标:

图片

这也算是一种小的创意点,是有经过思考的。

这些小的思考和优化,积累多了,后期一定可以激发巨大能力和进步。

好了,以上就是今天分享的这个小案例,很多细节,希望可以给大家一点启发, 后面大家在做界面练习的时候,也可以多多思考并实践。

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!

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

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

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

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

设计师如何提升总结力

lanlanwork


前言 

 

总结能力,是人的一种底层能力和通用能力。跟创造力、沟通表达、学习能力等等一样,它是无论从事什么职业,做什么工作,都应该具备的一种重要能力。

 

很多设计师只顾着提升自己的专业能力,却忽略了这些通用能力的培养,导致自己很快就陷入了发展瓶颈。现实中有很多这样的例子,比如甲乙两个人,甲的专业能力上更强一些,但乙因为很擅长跟人沟通,结果乙发展的反正要更好。

 

打个比方,专业能力就像是游戏里的技能和装备,而通用能力,就像是游戏里人物的基本属性。技能和装备随着游戏的进程可能会不断更新替换,而基本属性则是永远跟随着你的成长,它的提升给你带来的是全方位的提升。

 

文末 原文地址可观看此视频讲解

 

 

一、什么是总结力

总结力,也就是归纳总结的能力。

那么,我们再追问一下,什么是总结呢?它的目的是什么?

 

我们通常所说的总结主要有两种

图片

 

一种信息资料的总结,也就是将一些体量较大的信息,归纳概况为简单的信息。比如我们日常中的学习总结、会议总结、工作总结、年终总结等等,都是这一类。

另一种是经验规律的总结,从大量相关的信息、资料中,寻找共性、规律,最终得出具有指导性的经验方法和结论。比如人类社会的科学、学术成果,我们所学的设计理论,设计讲座、文章里分享的设计经验,毕业设计论文等等,都是属于这一类总结。

 

前者,信息资料的总结,是我们日常生活中最常见、最常用的,主要作用是整理归纳,就像是整理自己房间,整理超市货物,整理图书馆资料一样,让它看起来更加的整洁有序。

而后者,经验规律的总结,它是一种层次更高的总结,就像凝水成冰,百炼成钢一样,在原有的基础上进一步得到了升华。

 

二、为什么要提升总结力

接下来我们来聊为什么要提升总结能力,它的目的、作用是什么?

随着工作经验的增长,技术能力渐渐成熟,拉开差距、决定上限的,往往就是审美、创意、设计思维等等这些更高维度的能力。

而总结能力,就是这种更高维度的能力之一。

 

先从宏观上来看

进入设计的大门时,我们首先接触的往往就是各种设计理论。

而这些设计理论,就是前辈设计师们一代一代总结下来的宝贵经验。

图片

我们站在今日,看昨日之设计,能够很直观的感受到,设计像是一个有生命的东西,它是在不断发展和进步的。

图片

 

这种进步,是技术的进步,也是整个行业的不断总结与迭代。

 

有了总结,所以我们知道,大红大绿不好看、要突出主体,排版要尽量对齐,熬夜要喝枸杞。。。。

 

总之,我们每个人都受益于前人的总结,不必再去走前辈们曾踩过的坑。

 

 

再从个人的角度来看

锻炼总结能力对自己有哪些帮助?这里我列举了几个方面:

 

1、学习能力

首先是学习能力。

无论从事什么行业,摆在我们面前的第一道关卡就是学习。

人与人之间的学习能力差异是很大的。

有的人花几周的时间就可以快速上手一门新的软件,而有的人可能学了几个月还是感觉自己啥也不会。

这里面的影响因素有很多,比如你是否能找到好的教程资源,每天真正花在学习上的时间有多少,学完之后是否有通过练习来巩固,等等。

 

而总结能力,则是影响学习能力的其中一个重要因素。

它能够帮你简化复杂庞大的信息,更有效的消化知识,快速搭建起自己的知识技能树。

 

如果你要学一个新的软件和工具,在挑选书或教程的时候,可以先去看看它的目录。

图片

 

虽然它非常简短,但却是对整本书或整个教程内容的概括总结。

一个好的教程,一定是目录结构清晰有条理的,而不是东讲一点,西讲一点,想到哪讲到哪。

看完目录,你就可以对这个软件的功能模块上有一个宏观的认知。并可以筛选哪些内容是你需要的,哪些是暂时用不上的,这样就可以有针对性的学习,节省了很多时间。

 

2、成长提升

学习入门之后,接下来就是积累经验,成长提升的过程。

在设计这个行业里,能力跟工作年限,是没有绝对的关系的。

其中,善于不断总结过往经验,复盘项目的人,往往成长的会更快。

 

一个人是否善于总结,其中一个关键在于:他是怎么看待问题的?

是仅仅看到眼前的这一个问题,还是能够看的更远,看的是这一类问题?

图片

如果是前者,那么你解决的就只是当下的这一个问题。这就是为什么,有的人一个问题犯了几十遍了,然而下次遇到类似的问题,还是会继续犯错。

如果是后者,那么你解决掉的就不仅是当下的这一个问题,而是未来所有类似的问题。这样不断的总结,成长下去,最后积累的力量必然是惊人的。

 

比如我们来解决这样一个问题:这里有几个小元素,我们想让其中一个元素看起来更显眼。

图片

应该怎么做?

 

我们可能会想到一些办法,比如:让其中一个圆更大一点

图片

 

让其中一个圆描边更粗:

图片

 

或者降低其它圆的透明度,让其中一个更亮:

图片

 

这些方法都能达到我们的目的。

不善总结的人到这里可能就已经结束了,因为当前问题已经解决了。

 

但是善于总结的人到这里问题才刚开始。

他会思考:为什么这些操作会让元素看起来更显眼?它们中的共性和规律是什么?

 

经过这种更深一层的总结和思考,我们可以发现,无论是改变大小,改变粗细,还是改变亮度等等,它们的共性与本质,都是形成了“对比”。

这种对比形成的反差,让画面中与众不同的的元素会更加的突出。

图片

当我们经过总结思考,提炼出了“对比”这个本质之后,就能够基于“对比”这个概念,延伸出更多的方案。

图片

比如让它改变颜色、进行填充、改变清晰度等等,总之只要是符合“对比”这个核心的方案都是可以的。

 

我们还可以将它运用到各种其它领域的设计中,解决掉所有“让元素更突出”的问题。比如文字排版中,主标题对比其它的文字一定是最显眼的;海报设计中,主角要放在c位,

 

甚至我们还能反向运用,把元素弱化,比如弹窗广告的关闭按钮永远藏的让你找不到。。。。

 

你会发现,通过这种总结,我们找到了问题的本质与关键。从中得到的经验将不再只是几个具体的解决方案,而是这个问题的“通解”。从“有限”变为“无限”,从“具象”变为“抽象”。下次再看到这个问题,我们就能够站在一个更高的维度去思考。

 

 

3、沟通与表达

当然,对于设计师来说,专业设计能力的成长固然重要,但它绝不是一个设计师能力的全部。

设计离不开与人的沟通和交流,所以沟通和表达能力也非常重要。

 

而总结能力,可以让你在沟通上非常的有逻辑性,能够有效的把想表达的信息传递给对方,反之,则会让别人听了后面忘了前面,听了半天也没弄清楚你到底想说什么。

 

比如你要告诉别人一个设计要怎么优化,如果是这么去说:

图片

这种想到哪说到哪的方式,一旦信息量比较多的话,听的人会很头疼,而且get不到重点。

 

而清晰易懂的表达,一定要经过一个总结整理的过程,减轻听的人的接收负担。

 

这里介绍一个比较好的表达结构:就是我们小时候写作文的时候常用的“总分总”结构。

图片

先说总结、结论,再进行分类、分段阐述,最后结尾再进行一次总结,加深印象。

 

下面我们看看用“总分总”的结构应该是怎么表述的:

图片

 

先做总结:这个设计整体最大的问题是什么?然后细节上主要有哪些方面的问题?

然后做分类阐述。这个分类可以有很多种,比如可以跟之前一样按ABCD不同的区域去划分。但是不要跟之前一样来来回回绕,从A讲到D,又从D跳到B,而是应该按顺序讲完一个再讲下一个。

也可以按设计的不同层面去分类,比如根据构图、配色、排版、质感、动效等不同方面分别去展开讲。

最后结尾把整体最大的问题、一些关键的问题再总结一下,加深印象。

 

按照这样的结构沟通起来就会很有条理性。

 

前面我们是站在“说”的一方的角度,而如果是“听”的一方,其实也是一样的。

如果接收到的设计需求很多很杂,那么首先要做的就是整理归纳,做主次优先级的排序等等,整理清楚再动手。

 

 

好了,说完了总结能力的一些应用场景,再回头看看我们前面所说的总结的两种类型:

信息资料的总结经验规律的总结。

 

学习能力,成长提升,沟通表达,这三个方面中:

图片

学习能力和沟通表达,所用到的总结主要属于信息资料的总结,所以它通过归纳整理,带来了效率上的提升。

而成长提升,所用到的总结主要是经验规律的总结,我们前面说过,它能够在原有的基础上进一步得到升华,正是这种升华产生的力量,推动了我们的成长

 

三、如何提升总结力

我们再来看怎么做的问题,如何去提升总结能力。

首先要说的是,总结能力其实是人的一种本能,人们的大脑会自动对信息做归纳和分类,方便自己理解。

比如有西瓜、苹果、香蕉、草莓,鸡肉五个东西,我们会自动把西瓜、苹果、香蕉、草莓归为一类,因为它们都是水果。

 

再比如这张图:

图片

 

我们会认为左边的图形是一组,而右边的是另一组。

 

所以游戏机按钮就是这么设计的:

图片

 

其实我们每个人都是天生就拥有总结归纳的能力,

只是很多时候我们可能大脑想偷懒,没有刻意的去进行总结。

只要你开始真正做起来,它并不是一件难事。

 

总结步骤

总结的步骤其实很简单:

步骤一大量的资料收集,汇总

步骤二提炼规律、共性,归类分组得到总结

 

我们开头所说的两类总结中,信息资料的总结,一般用到这两步就够了,而经验规律的总结还需要用到第三步:

 

步骤三将得到的总结代入大量的资料,印证完善

 

加入了第三步之后,它就形成了一个闭环,会让你的总结不断完善下去。也就是所谓的:实践是检验真理的唯一标准。

图片

 

比如,我们前面讲总结能力对成长提升的帮助中,提到的例子“怎么让设计中的元素更明显”,这里面我们找到的各种方法:放大,改颜色,加描边等等,就是第一步:资料的收集汇总。

接下来我们进入了第二步:从这些方法中寻找共性,寻找规律,得到了“对比能够让元素更突出”这个总结。

最后是进入第三步,我们把得到的这个总结带回“让设计中的元素更明显”这一类问题中,得到了更多的方案,从而继续完善“对比”这个经验总结。

 

从实践中得到的经验总结,要再回到实践中去,指导实践,并让自身不断完善。

这也是设计中实践和理论之间的关系。

从这三步形成的闭环来看,在设计师成长的前期阶段,实践重于理论,因为这时候没有足够的实践和资料去支撑,也就无法完成第三步:用实践去印证理论。

而越往后面,随着自己掌握的经验、资料越来越多,这个闭环被打通,理论就会越来越重要。不断循环,不断完善下,让自己获得不断地提升。

 

而在这三个步骤中,第一步和第三步,并没有什么操作的难度,主要是时间和耐心的问题。

那么主要的问题就是在第二步,我们按照什么样的原则去总结?怎么去归类分组?这里是需要不断尝试的。

 

几个经典的总结框架

所以接下来我们介绍几个比较经典的总结框架,如果你自己没有好的方案,就可以直接套用这些成熟的总结框架。

 

 1、MECE原则

MECE原则是衡量归纳总结是否完善的一个经典原则。

它是在《金字塔原理》这本书里提到了一个思考工具,中文意思是“相互独立,完全穷尽”。

指的是分类归纳要做到:不重叠,不遗漏。

图片

不重叠是指每一个分类之间相互独立,不能有重复、交叉的部分。

不遗漏是指要完全穷尽,不能有遗漏的部分。

 

如果我们对人进行分类,分为“男人、女人、小孩”,这就不符合MECE原则,因为男人和女人里面也包含了小孩,有重复的部分。

 

再比如站酷对各大设计领域的分类。因为设计的分类非常广泛,为了避免一些相对小众的设计分支,找不到对应的分类。会增加一个“其它”分类。这就满足了“不遗漏”原则。

图片

 

 

 

我们每天调色时都要使用的RGB色彩模式,它就是完全符合MECE原则的。

图片

红绿蓝作为三基色,是相互独立,互不重叠的;而它们相互组合,就可以得到所有的色彩,满足了不遗漏的原则。

 

 

而在设计的分工合作上,使用mece原则也非常有效。

如果一个工作需要多个人分工合作来完成,根据mece原则,分工就应该满足两个条件:

图片

第一是不重叠,就是说每个人负责的任务要相互独立,不要有交叉重叠的部分。

不满足这一点,就会导致可能有两个人做了同一件事,造成了时间的浪费。

 

第二是不遗漏,也就是说分解工作的过程中不要漏掉某项,保证最后所有人的工作合起来是完整的。

不满足这一点,就会导致有一部分工作最后没有人做。

 

2、五帽架原则

接下来我们介绍下“五帽架原则”。

「帽架]这个词是根据类比而来,「帽」表示资料,「架」表示组织资料的方法,所以可以理解为「组织资料的五种方法]。

 

“五帽架”的概念最初是由理查德·沃尔曼在他的“ 信息焦虑”一书中提到的。

图片

 

 

它是做资料整理时可用的五种高效的逻辑顺序。

我在之前写的“设计师如何有效提升执行力”一文中也提到过这种方法。

它们分别是种类、时间、空间、字母、连续性

 

种类,就是按相似性,关联性划分,这是我们最容易想到的一种分类方法,比如b站的各类分区。

图片

 

 

然后是时间顺序,这也是我们最常用的一种结构,比如总结自己的工作经历时,我们可以按时间顺序从前往后,或者从后往前讲;再比如做年度设计总结,也可以按时间顺序,罗列每个月份或者每个季度的工作。

图片

 

 

有时间顺序,自然就有空间顺序,空间的不同位置,前后、远近。

比如摄影摄像中有一个非常重要的概念,就是“景别”。它就是使用空间顺序来分类的。

图片

 

根据摄像机离被摄物体远近的不同,我们可以划分出远景、全景、中景、近景、特写五种景别。

有了这样的统一划分,导演,摄影师,剪辑师等等不同职能的人员之间,才能拥有一套通用的语言,无障碍的沟通。

 

 

接下来是字母顺序,就是按字母、数字等符号的顺序进行分类,最典型的例子就是字典。

这种方式没有什么逻辑性,优点就是非常直白,便于查找。很适合用于资料之间本身没有太大相关性的。比如各种档案、资料的管理,通常就会用不同的编号来归类。

还有游戏里面用会SSR,SR,R这样的编号来区分角色的强度和稀有度。

 

最后是连续性,指的是按照从小到大,从少到多,从高到低,从浅到深等等,这种数学规律去总结整理。

图片

 

这种方式,通常都是为了能够从总结中得出一些重要的结论。

比如我们做完了一个项目,想进行一下复盘,就可以罗列一下项目中哪些地方花的时间最多?根据时间的占比做一个排序;然后就可以针对这些消耗时间最多的地方,看看哪里可以再优化一下,哪里效率还可以再提升提升。

 

 

3、5W2H分析法

5w2h分析法是一种广泛用于企业管理和技术活动中的策略方法。

它由五个W和两个H组成。分别是:

图片

(1)WHAT——是什么?目的是什么?做什么工作?

(2)WHY——为什么要做?可不可以不做?有没有替代方案?

(3)WHO——谁?由谁来做?

(4)WHEN——何时?什么时间做?什么时机最适宜?

(5)WHERE——何处?在哪里做?

(6)HOW ——怎么做?如何提高效率?如何实施?方法是什么?

(7)HOW MUCH——多少?做到什么程度?数量如何?质量水平如何?费用产出如何?

 

通过这七个方面的思考,我们就可以总结出事情的主要框架,让工作计划具有完整性,思考的更加全面、清晰、有条理,避免出现遗漏,这也是符合前面所说的mece法则的。

 

比如工作中做总结汇报,制定一个项目的开展计划,我们都可以使用5w2h这个总结框架,让自己能够对全局有一个清晰的认知,也就是我们常说的做事要有“全局观”。

 

如何高效训练

我们知道了总结的一些常用框架,常用方法,接下来就是去实际的运用。

怎么去高效的锻炼自己的总结能力呢?

这里介绍两个我自己常用的训练方法。

 

1、培养找关键的习惯

总结,说白了就是一个浓缩凝练的过程,从一堆信息中寻找它们的核心思想和关键点。

就像写文章一样,每篇文章都会有一个“标题”,这个标题就是整篇文章的核心和关键。

图片

 

所以,我们在生活中要刻意培养找关键的习惯。

 

比如工作中跟别人交流的时候,可以刻意锻炼自己做到“长话短说”,用最简洁的话来概括你要表达的重点,而不是给别人发一大段未经整理的文字。能一句话讲完的不要分两句讲。

 

再比如对设计做优化,可以先去找设计中最大的问题是什么,再去抓画面局部的小细节。

图片

我刚开始学平面设计的时候,我的老师就曾教过我,如果要看一个设计做的好不好,就先把图缩小,离远了看,看看整体的感觉怎么样,如果整体效果不行,是哪里不行,最主要的问题是什么?如果整体效果ok了,再去把图放大看里面的细节。

 

2、费曼学习法

费曼学习法,简单来说其实就是四个字:以教为学。

这是一种最高效的学习方法,

 

图片

 

为什么这么说呢,这是有科学依据的。有一个著名的研究成果,叫“学习金字塔”。它通过实验,研究出了不同的学习方式,学习者在两周后能记住内容的多少。

 

也就是说这篇文章你看完之后,因为属于被动学习,过段时间你还记得的内容最多只有30%,但是如果你看完之后还能再把它教给别人,你就能记住90%

 

图片

 

但是这里的教,并不是说随便怎么教,而是有目标的。

目标是要让别人很容易听懂,并且能够记住。如果有些地方别人没听懂,或者说记不住,那就说明这些地方你的归纳总结做的还不够好。那就要继续去简化表达,直到对方很容易听懂为止。

这个过程会倒逼你对自己掌握的知识去做概括总结,否则你是无法做到让别人很容易听懂并记住的,

如果没有尝试过的可以试一下,它其实是很有难度的,如果你成功了,你会发现自己对所教的内容的理解会更加深刻和清晰

 

 

这个方法也是我一直在用的方法。因为我自己做过好几年的讲师,对此深有体会。有些技术点自己操作起来已经很熟了,但是想要轻松的教会一些零基础的人,还有很有难度。需要不断的去深挖,真正理解透彻。

在教别人的过程中,我自己的收获也是巨大的,每写一篇文章,都是对自己经验的再次提炼和总结,从总结中得到升华。

 

总结

本次的内容信息量比较大,所以最后再总结回顾一下。

图片

我们从“是什么,为什么,怎么做”三个方面展开,去聊总结能力。

先讲了什么是总结,大致分为信息资料的总结和经验规律的总结两种。

然后讲了为什么要做总结,从学习能力,成长提升和沟通表达三个应用场景出发,举例说明了总结的作用

最后是怎么做的问题,我们介绍了三个经典的总结框架:mece法则,五帽架法以及5w2h分析法。然后讲了两种高效的训练方法“培养找关键习惯”以及费曼学习法。

 

归纳总结,其实是一件偏理性,比较考验逻辑的事情,虽然我们平时做设计更多的是动用感性思维。但是如果能够把理性与感性相结合,往往能产生出更强大的力量。

 

希望本文对大家有所帮助。

 

原文地址:动态设计书屋(公众号)

作者: 崔小骏

转载请注明:学UI网》设计师如何提升总结力

15条APP体验设计的思路分析

lanlanwork


“微信”

公众号的音乐

关键词:#用户体验#
产品体验:
在微信公众号内的文章中或者链接中,会遇到插入音乐模块的内容,点击播放后可以拖拽快进或者重放,同时点击下方有15的按钮可以快进15s或快退15s。
图片 
设计思考:
在原有的公众号内插入音乐模块是无法快进或者快退的,用户只能听完或者关闭音乐的单独模块,推出该公众号也是不能关闭的。在优化后这里明显体验更好,没有两极分化严重的选择,增加了快进快退这样的功能,还有一个原因我认为,在公众号内增加音乐模块的内容多数还是以推荐为目的的,增加拖拽功能后,用户在阅读时快速了解到到歌曲是否是自己喜爱的类型,提高用户的选择速度。  
 

“高德地图”

询问前方路况
关键词:#活跃度# #用户体验#
产品体验:
使用高德地图导航后,如果路段中发生事故等原因堵塞时,在该路段会弹出一个提示框,提示该路段可能通畅的时间段,点击提示框后进入实时交通对话框。 
图片 
设计思考:
之前有体验过一次高德的交通实况功能,这次也是看到了在导航初期就提示了路段的状况,在系统的提示之外,结合实况交通的方式,更准确的提供路况信息,也是为了进一步的提高用户在产品内的活跃程度,更有可能提供潜在的陌生人社交,毕竟产品也上线的旅游路线等功能。  
 

“微信”

可以手动拒收其他应用的消息
关键词:#用户体验优化#
产品体验:
在微信的对话框内,好友发送来的非微信产品的分享消息,可以点击该消息右下角的小手,点击后弹出“接受/拒收来自此应用的所有消息”用户可以自主选择是否接受。 
图片 
设计思考:
产品分享链接无非是QQ、微信、微博、小红书等一些社交类产品,其中微信的基数是最大的一个,多数小伙伴还是选择微信登陆其他产品,再以微信为分享终端。不过这样做有一个问题,就是朋友分享来的程序可能是自己不感兴趣的内容,还会拉低朋友之间的好感度。微信在这里直接上线了拒收这类消息的功能,让用户自己决定要不要接收,不再整个产品上做限制。也是按照用户自主意愿进行了有效的分类选择。  
 

“抖音”

关注的提示增强
关键词:#视觉强化# #提示#
产品体验:
在抖音观看视频时,长时间停留在该up主的页面时,在作者信息下会显示出关注的颜色饱和度较高的按钮。 
图片 
设计思考:
抖音的用户基础是非常庞大的数字,众多用户每天在产品中浏览观看是up主发视频的动力之一,其次,用户的关注度更是刺激up主更新优质视频的动力源之一。所以在这里产品强化了关注这一行为,原有的up主头像下的关注按钮保留之外,增加了一个面积更大的按钮在创作者、视频信息的区域,刺激用户的视觉感受提示用户喜欢就关注,不过这个按钮是在用户长时间停留之后才显示的按钮,产品会根据用户页面停留时长做初步判断,用户是否对这个视频感兴趣,停留时间长感兴趣才会显示关注按钮提示用户。 
  

“微信”

折叠群
关键词:#强提示#
产品体验:
微信群中可以进入群设置,在消息免打扰下新增折叠群的功能,点击后将不出现在消息区,可以在群列表中找到,也不会收到@的强提示。
图片 
设计思考:
微信与QQ在群聊天上之前最大的不同就是,QQ可以完全屏蔽群信息,微信却不可以,虽然有消息免打扰,但是群@消息会有强提醒的功能,用户还是可以看到群中的信息。而这一次的优化彻底解决了这个问题,实际的使用环境确实会有用加入群是不得已的情况,退也不好退,又不想被打扰,所以需要一个完全屏蔽的功能来解决这个问题。而这个功能推出之后,估计对运营的同学是不太友好了,私域流量的限制估计会在未来越来越大,微信也总给我一种和QQ越来越像的感觉。  
 
 

“知乎”

我的页面中的回答问题
关键词:#交互方式#
产品体验:
打开知乎后切换至我的页面,在页面中间可以看到卡片形式的回答问题的部分,左右滑动卡片可以切换下一张。 
图片
 
设计思考:
知乎这里的回答问题采用左右滑动的方式,更像是社交产品中的交互方式,但是不同点是这里的左右滑没有附加更多的功能,只是为了看下一个内容。不过这样的操作也在一定程度上增加了用户与产品之间的互动性,让回答问题变得有趣。还有一点就是如果回答问题是很长的feed流,用户会在漫长的浏览中产生疲倦感,从而导致流量的流失,这样左右滑的形式可以很好的避免长页面的浏览疲倦,让用户的精力集中在内容本身。  
 

“微信”

视频等待接通期间可看朋友状态
关键词:#用户体验#
产品体验:
在微信中,与好友视频通话时,在等待对方接电话的时间里,界面中会显示对方近期发布朋友圈的内容,同时点击下方按钮可以收起内容不查看。  
图片  
设计思考:
在生活中,微信已经成为我们日常最主要的沟通手段之一,而随着流量降费,视频电话也更多的兴起。随之而来的就是在等待电话的过程中,用户是无事可做的状态,增加对方用户的朋友圈发布内容观看,除了知道对方近期做了什么,也是消除等待电话的真空期,提升用户体验。  
 

“腾讯地图”

搜索路线更综合
关键词:#用户体验#
产品体验:
在腾讯地图中搜索路线,在公共交通这里会有更综合的搜索结果,把骑行也包含在目标路线内。 
图片
 
设计思考:
腾讯地图的公共交通搜索更综合,对于日常上班出行的人群来说更友好,往往增加一个交通工具的选择可以有更多一种节省时间的出行方式,而且标注了每一条结果路线的预计费用,这也是给用户多一个选择思考的方向。 
  

“闲鱼”

长辈模式
关键词:#适老设计#
产品体验:
在闲鱼中我的页面内,设置按钮进入后可以在列表中可以找到长辈模式,点击后进入确认开启页,点击开启后重启app进入长辈模式。
图片 
设计思考:
面对老龄结构严重的社会,互联网产品不只是年轻人的专属,疫情之后更多老年人学会了智能手机,从而带来的问题就是多数产品没有适老设计,老年人面对小手机会看不清内容,操作按不准等现象凸显出来,玲琅满目的运营活动也是让老年人招架不过来。
那么,面对这么庞大的人群基数,推出适合老年人的产品就显得更为重要。这里并不单单是为老年人优化设计更好的用户体验,而是从根本上,心里上解决老年人在互联网产品使用的问题,闲鱼在这里推出的长辈版本删除了很多花里胡哨的设计元素,也没有简单用大字解决一切,更好的满足老年人使用需求。 
  

“App Store”

搜索结果增加细分标签(ios)
关键词:#标签#
产品体验:
在ios系统的Appstore内,搜索目标内容后,搜索结果页面搜索框下新增了结果的细分标签,点击标签可以进一步筛选。  
 
图片 
设计思考:
苹果商店中在近几个月不断的更新,首先是之前增加的搜索结果页广告位,这里有增加了搜索结果的细分标签,可以让用户进一步细分筛选,节约目标明确的用户,因浏览导致选择困难或无限下滑寻找目标的痛苦。  
 

“绿洲”

我的页面增加时间线
关键词:#用户体验#
产品体验:
在绿洲中,进入我的页面,可以看到自己发表内容的时间线,切换tab到第二个icon也保留了瀑布流的列表样式。 
图片 
 
设计思考:
在最初的绿洲中没有设置发布时间线的展示样式,只有瀑布流的列表样式,用户在这里虽然可以有更前卫,更沉浸的阅读感受,但是作为内容发布,并不能很好的看到自己发布内容的时间,尤其是时间久了之后,会有忘记原来发布的时间。那么增加时间线后,用户可以很清楚的看到自己发布每一个内容时的时间点,作为内容发布的产品来说,这种功能的增加也会激发用户的成就感,刺激用户继续发布。  
 
 

“淘宝”

双11前的视觉变化
关键词:#视觉气氛#
产品体验:
更新淘宝产品之后,启动可以发现淘宝有点不一样了,首页、逛逛频道视觉更新。   
图片 
设计思考:
随着淘宝的双十一购物节的到来,从远古的光棍节的感念到现在全民购物的形成,产品在这个节点前增强节日气氛,用户在启动打开产品后会潜移默化的感觉到购物的气氛,在气氛烘托的作用之下用户会逛一逛,动作有了开始的第一步随之而来的就会有后续的一连串动作。  
 

“开眼”

底部标签栏的交互方式
关键词:#趣味性# #用户习惯#
产品体验:
启动产品后,切换底部标签栏,可以看到选中状态是中文汉字加选中点,未选中的则为icon符号。在切换时也采用了模仿滚动的样式。  
图片 
设计思考:
底部标签作为整个产品的导航,承接这很重要的功能性,用户进入产品除了看到首页的视觉、滑动两下看内容,接下来就是点一点底部的导航。有序的底部导航会对产品的使用有不少的加分,比如爱奇艺、优酷的点击交互,比如早一点之前版本的站酷app都是比较有序的方式,当然,极简的样式也是有的比如小红书、Behance这样的。
而开眼虽说也是极简的类别中,但是更适应中文用户的交互方式,作为传统的中文用户,习惯性的还是要看一下文字的提示来确保点击正确,减少大脑的二次思考。所以开眼并没有像Behance一样完全符号化,也没有像小红书全完中文汉字,将两者结合之后加上一定的动效丰富切换的之间的有趣度,感觉会更符合大众用户的使用习惯 
 

“斗鱼”

将用户关注内容分类
关键词:#细分#
产品体验:
在斗鱼中,用户关注的主播列表进行了很好的分类,未开播、录播、正在直播、精选视频和很久未上线的主播分类设计。 
图片 
设计思考:
目前市场中的软件产品中,不论是不是内容类的,都设计了收藏的功能,当然也不是说收藏功能只有内容类的可以用。斗鱼作为直播平台,收藏喜欢的主播可以节约用户的操作路径,快速触达用户目标。但是问题也来了,并不是所有的产品都会细分收藏之后的内容,收藏列表里大多数还是按照时间点按序排列。而斗鱼这里之前版本也是这样的方式,但是更新之后的斗鱼收藏列表则一改面貌,更好的细分可以让用户更快的找到目标,较少思考提高效率也就会留住用户。 
 

“支付宝”

积分去看看
关键词:#按钮#
产品体验:
在支付宝中付款完成后,支付完成页面中金额下第一个卡片是领积分,点击立即领按钮后领取积分,领取完成后按钮变为去看看,点击后跳转积分页面。 
图片 
 
设计思考:
支付完成后的领取积分,这里点击领取并不会跳转到积分页面,不会对用户造成页面之间的跳转导致多一步返回的操作,而点击之后将按钮由“立即领”变为“去看看”可以让用户多一个选择,是否要去积分页,减少用户的来回操作的烦躁感。同时在视觉上,领取积分为实心的暖色按钮,点击感视觉冲击上比较强烈,领取之后的去看看变为空心的线框按钮,在视觉强度上减弱,也在一定程度上考虑了购物之后需要展示付款成功页面的使用环境,需要降低用户的视觉冲击。 
  
本期产品设计细节分享结束,我们下期再见。  
 

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

作者:神奇的小豪同学

转载请注明:学UI网》15条APP体验设计的思路分析

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

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

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

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



教程 | 设计中的规矩与秩序

lanlanwork



今天我们讲讲关于设计中的规矩与秩序

图片

 

中国人经常讲没有规矩不成方圆,规矩不是固执也不是保守,在规矩之内任意的流动,所形成的是规律,这便是规矩的内涵。

图片

 

世间万物,变幻万千,形成无序的混乱体系和错综关系,合理分配成规范化的形态和关联体系,支撑起这一切的作用,这是秩序。

图片

 

所谓秩序为方,规矩成圆,这不仅是上千年留下来的一个古语,也透彻了一切事物本源的真相,如何运用在设计中,我们先做个示范。

图片

 

教程示范一

1、甜甜圈放置规矩之内,神奇的绿色总能让男人瞬间清醒。

图片

 

2、增加文字与图形,版式中以合理分配主次内容。

图片

 

3、搭建框架在四周形成秩序关系,合理的变化流动,一切都掌握在规矩的作用中。

[优化输出图像]

 

4、增加背景,合理的在规矩之内适当变化。

[optimize output image]

 

图片

 

 

想要更多的变化方式,当然可以。

▽ 

教程示范二

1、将物体随意放置到规矩之内。

图片

 

2、内部的可以随着主体的变化,改变各物体大小规律。它,便是流动的,且变化的,但依然在规矩之中有序的绽放。

图片[optimize output image]

 

3、在秩序的外框架中,编排我们的需求文案,在编排时,注意整体的一个流动方向。

图片

 

4、放置后的编排文字布局,要保持上下的比例平衡来稳定中心的视觉,否则会造成整体画面的失衡,以此改变了本身的秩序。

图片

图片

 

5、中心的视觉可在规矩之内形成了多个空间层次,富有丰富的变化感。

图片

 

6、背景的色彩帮助规矩有了更体系化的完整展现,使之形成了微妙的化学反应。

图片

图片

 

在这规律之中,感受并掌握这样的变化方法,你便有了上千种的设计形式。

图片

[优化输出图像]

 

这就是今天带来的设计中的规矩与秩序。

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》教程 | 设计中的规矩与秩序

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

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

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

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



独家首发 | 2022年视觉设计趋势,美得很高级!

lanlanwork


#1.幻彩立体

图片
幻彩立体也是3D设计的演化,在2022年它会依然会疯狂的出现。不过风格上有些微妙的变化,质感更轻盈纯粹、色彩更少量、图形上更几何块面化,保持更真实的空间立体感受,直观自然。
图片

我们可以从Dribbble 上面看到像UI8、craftwork、Is等,他们的3D作品逐渐趋近走向更简洁风格调性,减少复杂的光影,这也是在扁平化中找到的思路。

图片
图片

图片

 

#2.几何分形

图片
美国电视频道 Turner Classic Movies 
今年发现越来越多几何形状在平面作品或者UI中出现,新的几何图形更具表意,更趋于表达真实情感少了一些图形的抽象化装饰,更多的是传达设计理念,品牌符号穿透。当分形形状与色彩完美结合,可以创建出极具吸引力的视觉效果。
图片
Goodfood Market

图片

图片
HANBOK CULTURE WEEK
图片
unipapa 推出的卫生纸,以简洁纯白的包装令人眼前一亮。

 

#3.NFT艺术

图片
Gucci 发布首款只能在数字环境中穿着的虚拟运动鞋
AR和VR这个大家都知道,前几年就火起来了。今天主要提一下今年备受关注的NFT艺术,什么NFT?其中文名称是非同质化代币,一种应用区块链技术验证的数字资产。它最容易理解的外号,是数字艺术品。
图片
Andrés Reisinger 在 2 月份售出支持 NFT 家具

将NFT与平面设计联系起来,就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化,横向能力要求有所提高,比如了解虚拟数字化设计,以及对全新审美和新三维技术有更高的要求。

图片
 Beeple 一幅拼贴画,经过区块链验证的艺术品在拍卖会上以超过 6900 万美元的价格成交。
图片
Beeple 的其中一幅作品
Moooi与 3D 艺术家Andrés Reisinger合作完成了这把不能生产的虚拟椅子

 

#4.超萌趣图标

来源:腾讯ISUX出品

图标设计一直是社交领域的重头戏,自从去年大量在设计作品中后,截止今年依然很强劲。因为很多设计师意识到单一的枯燥图标无法满足一些特殊场景的情感化设计表达,平面超萌趣图标来了,带来更强的视觉观欣赏性与生动性。
来源:腾讯ISUX出品

图片

图片
图片

 

#5.经典衬线字体

图片
衬线字体在今年Behance作品集首页上,可谓出镜率可比以往高,唤起一种怀旧的感觉。也许是因为看多了衬线字体版式,设计师更多想尝试用衬线字体来打破僵局,设计出新颖的视觉效果。
图片

图片

图片

图片

图片

 

#6.自然设计

图片

 Vocation

自然设计,主张可持续性发展与环境建立联系,是一种新生活态度,是百转千回,回归本源的理想之态。设计师通过设计表达对环境的敬意,与产品建立强相关,既能表达产品自然纯粹之意,又可以宣传品牌贴近我们生活自然之意。

图片

&SMITH 凉茶包装“循环生活”理念

图片

TRØVE

图片

 

#7.超变形字体

图片

dia Design studio

今年很多平面海报设计、品牌符号的动态系统设计中,都可以看到字体被扭曲、变形,以一种新的形态出现在眼前,没错,这就是超变形字体。它打破常规,以不同寻常的路子出现在大众视野中,带来全新视觉体验。

图片

图片

图片

 

#8.动态包装

说到动态包装,这是在国内外这两年火起来一个大趋势,首先微软早期各种产品宣传视频,在到Google、IBM、Apple的视觉语言更新宣传视频。现在越来越多厂商喜欢厂商动态包装产品,这样比平面展示更多细节与生动。

 

Rise

格拉斯哥设计工作室Need为Rise全新重塑品牌,同时通过动态展示品牌延展设计。

今天的趋势分析差不多到这结束了,设计趋势没有好坏之分,选择合适的应用在设计中,将发挥不可估量的作用。希望今天的分享能给大家带来一些启发。

 

原文地址: 功夫UX(公众号)
作者: 功夫UX
转载请注明:学UI网》独家首发 | 2022年视觉设计趋势,美得很高级!

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

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

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

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


万字解析元宇宙及对设计的影响

资深UI设计者

hi,朋友,你听说过“元宇宙”吗?你或许在网上听过或者在视频听过讲解,也许它只是昙花一现的概念,但是随着越来越多的大厂开始下场执行和站台,所以很多人开始重视和关注。

2021年,一个新奇的概念名词在网络上迅速蹿红,引发科技界和投资界的广泛关注。这个概念名词,就是“元宇宙”。


1.10  元宇宙的起源


1981年,一本名叫《真名实姓》的科幻小说,描绘了一个未来世界的样子。在这里,人类可以通过脑机接口登录虚拟数字世界,不仅可以有真实的生存体验,而且可以按照自己的喜好幻化成不同的形象。


时间来到 1991年,美国著名科幻作家尼尔·斯蒂芬森(Neal Stephenson)推出了自己的小说《雪崩(Snow Crash)》。


在书中,尼尔·斯蒂芬森描述了一个平行于现实世界的网络世界,并将其命名为“元界”。所有现实世界中的人,在元界中都有一个“网络分身”。


这个“元界”,英文原著中叫“Metaverse”。它由Meta和Verse两个词根组成,Meta表示“超越”、“元”, verse表示“宇宙universe”。


没错,Meta Verse就是我们今天文章的主角——元宇宙。



值得一提的是,书中所说的“网络分身”,英文单词叫做Avatar。大家有没有很眼熟?


是的,Avatar就是“阿凡达”。2009年,美国著名导演詹姆斯·卡梅隆的那部经典电影,就是以它命名。


在现在众多的讨论声中,元宇宙并不是一个真实存在的世界,而是一个虚拟的世界,是一个人们对未来定义的虚拟世界。


说到虚拟世界,相信大家马上又想2018年美国大导演史蒂文·斯皮尔伯格执导的——《头号玩家》。在头号玩家里描叙的的元宇宙:它是下一代互联网,是虚拟时空,是全真互联网。



但是不管怎么说,现在大家默认尼尔·斯蒂芬森仍被公认为是元宇宙的正式提出者。



1.20  元宇宙是什么?


元宇宙到底是什么呢?我看过很多解释,基本都是将“Meta(超越)”与“universe(宇宙)”相互结合,这个理解过于片面,那么直译过来不就是“超越宇宙”,这肯定是不符合情理的,要搞清楚这个问题,我们需要弄清楚“Meta”是什么意思,Facebook将公司名字改名为Meta,在侧面可以说明,在扎克伯克看来,元宇宙中的元才是核心,在我们中文中,想要找到一个完全与“Meta”对应的词是比较困难的,所以我们只能意会,“Meta”来自于古希腊语,比起元或者超越,我觉得翻译成”关于XX的XX“是更为合理的,例如“Meta Date”就是关于数据的数据,这个概念用于文艺作品中就是,“元戏剧”和“元小说”,比较有代表的就是卡尔维诺的“寒冬夜行人”,在心理学上,还有一个概念,叫元认知,这样去理解,就可以理解“Meta”为什么被翻译成“元”了,“宇宙”,我们可以理解它与物理的宇宙是不一样的意思,比如,我们都知道“漫威宇宙”,指的是漫威及一系列作品和角色组成的世界,还有国内比较火的IP“唐探宇宙”,都是指的是一个公司旗下多个IP所组成的世界观,所以“宇宙”的理解应该是“一个领域多个IP的合集”。


按照“元宇宙第一公司”Roblox公司的说法,一个真正的元宇宙产品应该具备八大要素,分别是:身份、朋友、沉浸感、低延迟、多元化、随地、经济系统、文明。



身份:需要一个能代表的你身份,无论是打工人还是老板或者是总统都行,它与现实世界的身份是完全不一样的。


朋友:在可以在拥有自由的社交和谈恋爱,无论他和你在现实世界里是否有交集(也就是社交)。


沉浸感:可以让你有在现实世界一样的真实体验,让你可以忘记这是虚拟的世界。


低延迟:一个合格的元宇宙需要在整个空间范围上进行时间统一,不能让人感受到延迟。


多元化:元宇宙可以提供多种世界场景,供玩家有多种身份而已选择。


随地:元宇宙的入口需要可以随时随地的方便登录,不受任何限制。


经济系统:像现实世界一样,无论是用BTC和ETH还是什么别的货币,元宇宙需要都自己的交易系统和规则


文明:元宇宙里所有人们在一起,一起努力,创造虚拟且先进的文明。


我们按照现在的技术水平对比一样,发现很多东西都是无法去完成的,就例如文明来说吧,我们无论是哪一个虚拟的社区还是游戏里,基本这么多年的发展都无法形成自己的文明,最多是有自己的游戏文化或者社区文化。


当然,按照现在的研究和技术可以实现的,我们对于元宇宙的规划可以总结成一句话:人以自由独立的数字身份自由的参与可能存在的数字世界。


1.21  元宇宙的数字身份


我们将它拆分出来理解:元宇宙是一个数字世界,这个是没错的,它不是现实的世界,也不是物理的世界,而是一个虚拟的数字世界。

然后我们再来看看另外一个词:“数字身份”,我们现在在上网的时候大多数都是实名的,但是在平台上,我们会有自己虚拟的ID和昵称,这些虚拟的ID和昵称会遍布整个互联网,可能是在淘宝京东买买买的你,也有可能是在腾讯视频或者爱奇艺为某个明星疯狂打call的你。


所以,这些虚拟的ID不拥有权力,也不会承担义务,他们不是一个独立的身份,他们都需要依附在线下那个拥有独立身份的你。


那么,我们现在在想理解那句话:元宇宙是人以数字化身份参与一个虚拟的数字世界。并不是单单用数字账号参与,是一个独立、不受干预的数字账号。

不同的是,在现实世界你只有一个身份一个你,而在元宇宙里,你可以拥有多个不一样的数字身份。


1.22  元宇宙的参与性


上面那句话还有另外一个关键词,数字化身份参与,如果想要更准确一点,我觉得应该是“自由参与”。我们在这个互联网上,现在是可以自由的去访问,去发表自己的看法,但是很多互联网产品的规则制定和产品的细节定制和我们却没有任何关系。

比如,微信每次新出一个功能,都可以引起全民的热度,甚至可以上热搜,是因为用户期待那个功能太久了,所以才会有这样的讨论热度,但是微信也有很多用户想要的功能没有去实现,所以我们才说,互联网产品的规则制定和产品细节的开发,我们并没有“自由的参与”。

但是在元宇宙的设定里,你可以自由的参与规则的制定,每一个该元宇宙世界的玩家都可以参与到游戏规则的制定,让每一个都有会有参与感。

这个就像,几个朋友一起参与剧本杀剧情的编写,玩法的设计,我们每个人都会讨论角度与角色的关系,

讨论这个细节怎么演比较好,需要一个什么样的场景,如果有人觉得这个方案或者设定不满意,他可以提出否定细节,然后大家在针对讨论,如果大家都统一了,这句剧本杀就可以开始玩了。



1.30  元宇宙的分类


如果我们按照现在有的资料,我们想要将元宇宙去归类,我们可以把元宇宙分为两类,一类是传统型元宇宙,另外一类是开放型元宇宙。



1.31 传统型元宇宙


传统型元宇宙,一般指的是将线下的生活直接映射到元宇宙中,最后线下线上融为一体,其实这个事情在我们的生活中也是一种在重演。

我们现在通过不同设备(手机、PC、物联网),我们在线下搬到线上,最后回归到线下生活,传统型元宇宙是一个比现在网络环境更完善、体验更沉浸,具备生活、社交、工作、娱乐的虚拟数字的世界,也有可能有一天,我们在虚拟世界体验比较好的方案会成为推动我们现实世界的助力器,会落地在现实的生活中。



1.32 开放型元宇宙


与传统型元宇宙对立的,便是开放型元宇宙,它与现实的物理世界的是没有什么关系的,他是一个独立是虚拟的数字世界,比如,我们现实的生活是一个地球OL,那么我们在开放型元宇宙所建立的世界可能是土球OL或者是绿洲OL,是与现在世界平行存在的一个世界。

开放型的元宇宙在理论上是可以有无数个的,只要是符合建立条件的人都是可以建立的广义元宇宙,可能有的开放型元宇宙是因为是某些KOL建立的,人气会比较高,有的可能会无人问津,只有创建者一个人,每天“采菊东临下,悠然见南山”。



传统型元宇宙是需要有现实社会的映射才能存在的,现实世界才是主要的,虚拟世界只是现实世界是依附品。而开放型元宇宙则和现实世界是分开的,甚至有些开放型元宇宙的拥护者觉得开放型元宇宙研发出来之后,物理世界里的身体都不需要存在了,人的意识作为了一个代码字符或者程序活在广义元宇宙中,个人的荣誉感、社交、幸福感全部来自于开放型元宇宙,当然,这是一些非常极端的拥护者。



现在能看到元宇宙与元宇宙相关的新闻,基本都是和游戏相关的。例如,目前第一个将元宇宙写进招股书的Roblox,它现在已经在纽交所上市了,而且投资名单里还有我们国内做游戏比较出名的腾讯,这家公司主要是提供一个让玩家可以自由建立内容的游戏平台。



所以很多人会认为游戏就是元宇宙,或者元宇宙就是进阶版的元宇宙。


我们前面说“开放型元宇宙”的时候说过,开放型元宇宙是可以自由切换的,上一秒我可能是在为大家出谋划策的军事智囊,下一秒我便可以切换到一个充满斗气和斗皇满天飞的世界,来履行我的“三年之约”。

正因为有这样的特性,所以很多人认为游戏它和元宇宙是一样的,比如,我在“王者荣耀”里连着跪了几把之后,非常的沮丧,我便打开了“哈利波特”在里面骑着扫把自由自在的飞。我们可以在“王者荣耀”里和自己室友或者陌生的人一起组团玩游戏,一起推搭,是不是有点元宇宙的意思了。


其实我们体验到了游戏和VR设备所营造的氛围来说,它们都只是元宇宙构成组成。硬件设备和技术都是只是构成了元宇宙的一部分。而还有另外两个组成元宇宙的基础部分,是游戏所不具备的,一个是身份系统,另外一个经济系统。



2.01  身份系统


我们前面说过,我们现在以账号的形式参与互联网上的任何活动,都是需要与现实世界中的个体是密不可分的,我们是需要现实中的个人有需求才会去选择登录账号,比如,我们需要中午想吃饭,才会打开外卖软件点外卖,都是有目的的才会去建立这个身份。


而元宇宙真正的价值就是要隔离和现实世界的身份,让数字身份作为一个长期独立的个体存在,不同身份之间产生各种关系和联系,这才会让整个元宇宙运转起来,就如同我们现实的物理世界一样,这便是元宇宙的身份系统。



2.02  经济系统


经济系统,它是维系整个元宇宙经济正常运转的规则。就像我们们在元宇宙里创造什么价值,都可以和别人进行交易,且整个经济系统不会突然崩溃,例如货币会突然的归零或者突然的飙涨,我们可以自由的拿着货币去任何地方放心的交易,都是受到保护的。



2.10  元宇宙和游戏的根本区别

说到这里,大家肯定会有疑问,我们平时所玩的游戏也有身份系统和经济系统,那他们和元宇宙有什么区别吗?虽然游戏里也具备这两个基础的条件,但是,他们和元宇宙的这两个系统是完全无关的事情,他们最大的区别就是游戏里的身份系统和经济系统是“中心化”的。

就拿最经济系统来说吧,一些道具的价值和商店上架什么新品道具,完全都是在游戏厂家的掌握中,而且他们只许在游戏中用指定的交易方式交易,玩家只是按照游戏厂家制定的规则去完成任务而已。

另外,“中心化”就会存在一个问题,我们在游戏里有所的产品最终都是归游戏厂家所有,游戏厂家会拥有“超级权限”,如果我们不按照游戏厂家的规则进行交易,有极大可能会被封号,那么我们在那个账号里的经济价值并会瞬间湮灭,所有,在本质上来说,游戏里的财产属不属于自己,是由游戏厂家说了算。


身份系统也是同样的道理,每款游戏有什么角色,有什么装备可以选择,都是由游戏厂家制定好了,另外在换一个角度来说,拥有“超级权限”的厂家随时可以决定你这个号存不存在,所以游戏里的身份不是你的。


所以中心化的游戏根本不会是元宇宙的进阶版。而去中心化的元宇宙,是不会有编辑好的剧本,也没有现成的角色供你选择。从早起元宇宙建立的一片荒芜,到后期的人气如潮,这些由元宇宙所有人来参与制定和修改,该元宇宙所有的玩家都会享受极大的自由度。


我们在前面说到的Roblox能在元宇宙这个概念中这么火是有原因的。虽然它仅仅是一款普通的开放性世界的游戏,但是他采用了去中心的运营和发展形式,所以大家会公认Roblox是一款基于元宇宙原理的游戏,也有可能是元宇宙的初级形态。而我们现在无论玩的什么种类的游戏,基本都是中心化的,游戏规则和进度都是在游戏厂家规定好了的。


在去中心化的元宇宙里,我们都会以新的身份和新的权力去过一种全新的生活,在这里,我们会有新的朋友,新的家园,全新的社交关系。



我们前面说过,元宇宙要存在需要有两个基础条件,一个是身份系统。另外一个是经济系统,它们构成了元宇宙存在的基础保障。

元宇宙的经济系统,主要是引导元宇宙的用户或玩家一起进行经济创造、市场交易的系统,那经济系统是怎么运行的?它的基本运行原理和现实物理世界也是一样的,靠的是稀缺性。

比如,石油,产量少且只有部分国家掌握石油资源,那它的价值就高,因为它具有稀缺性和不可替代性,只有稀缺性的物品才能产生交易价值和交换价值,但是我们需要明白的是,数字世界是不利用经济系统的建立的,原因是数字世界的物品都是由代码构成的,它可以限制的复制和无限制的拥有,如果不考虑版权问题,它是可以有无数个的。

那我们元宇宙是怎么去解决这个问题的呢?要想知道怎么解决这个问题,我们需要知道底层的技术逻辑。说到这里,我们需要也要引入最近比较火的方案,这个方案也是最近比较公认的,Non-Fungible Tokens(简称NFT),

简单地说,NFT是元宇宙里的数字版权、数字物权的一个合约。因为NFT不可替代的特性,这意味着它可以用来代表独一无二的东西,比如博物馆里的蒙娜丽莎原画,或者一块土地的所有权。


3.10  NFT助力设计版权增值


我们平时在网上冲浪的时候基本都知道一个道理,在数字世界的所有东西都可以低成本的复制,并可以在短时间内无限制的拷贝,是没法声明版权和唯一性的。但是这个一切的顾虑NFT都可以解决,它给数字世界的所有物品包裹一层数字代码的合约,有了NFT合约的包裹,数字世界的物品就有了不可分割、不可复制的特性,这样便解决了数字世界物品容易被盗版的问题,也就具有交易和交换的价值。

我们都知道早期腾讯赚的第一桶金就是靠的是QQ秀,经历过QQ秀疯狂的年代的人都知道,一个绝版的太阳神的QQ秀可以卖到1万块,然后到现在王者荣耀皮肤让腾讯赚的盆满钵满,说明人们对好看形象的热爱。


那我们跳出元宇宙回到现实来看一个最近的一个现象,就是NFT的头像。好多人都不明白,一个糊的不行的头像,为啥可以卖的那么贵,我喜欢我知道截图,我直接自己用不可以吗?现在我们也许明白了,截图或者拷贝出来的是赝品,是没有任何价值的,是不具备交易价值的。


当然。数字世界的物品能不能作为商用,还需要看作者在NFT商用合约里规定了了什么,可以做什么用途,NFT合约一般会分为两个部分,一个是标准化的,另外一个是非标准化的。



3.11  NFT标准化合约


标准化合约就是我们前面说的那两个特性,不可以分割和不可以复制性,这是我们用户无法改变的,交割时只是交割了版权给你。



3.12  NFT非标准化合约


非标准化的合约部分就是由作者去制定的。例如,我们设计了一个LOGO,我们可以要求别人在公司盈利了10万之后,在支付LOGO的设计费用,也可以要求别人的使用场景,比如,只能用于APP上,用在其他上面需要支付另外的版权费,然后在给他开通权限,不同的作者会根据环境时间和他自己的性格,来撰写不同的NFT合约和调整合约内容。


3.20  元宇宙有哪些就业机会

以前,我读凯文·凯利的《必然》这本书中曾经说过,“人们会在新的生产力水平上找到新工作”,在以前读到这句话的时候,我不太理解,现在我在想起这句话,我可能读出了新的领悟,那不就是现在说的元宇宙吗?在元宇宙里我们会有新的雇佣模式和就业模式。人们也有可能在元宇宙里衍生出全新的职业,创造全新的价值。

现在我们越来越多提到的是人工智能将要来到,大部分重复的工作将要被取代,尤其在《人类简史》这本书中提到了“,“未来20到30年之间,超过50%的工作机会被人工智能取代。”这件事已经在发生了,无人超市、无人货架、无人驾驶,都正在成为现实。不只是重复性劳动,还有像医生、律师、文字工作者,在人工智能发展越来越强大的未来,也有被替代的风险。”


所有,对我们来说,元宇宙因为创造和关系,为我们创造了更多在的强烈的存在感。更重要的是,它提供了我们去应对人工智能对人替代的策略。


前面我们说过,当身份系统和经济系统这两个基础条件满足的时候,一个元宇宙就基本成立了,而且随着元宇宙的热度越来越高,全球的头部企业都开始布局元宇宙,比如,国内外的社交巨头Facebook和腾讯,都已经公开自己已经开始慢慢的转型做元宇宙,而且都开始慢慢的开始研发元宇宙相关的应用和技术。

老话说过,早起的鸟儿有虫吃,彭博社预测说,到2030年,元宇宙的市场规模可能会达到2.5万亿美元。但随之而来的一个问题是,元宇宙所带来的机会是不是还是像现在一样,被几家巨头垄断,还是我们普通人也可以参与元宇宙的建设中去。


这个我们需要分析元宇宙的构成,除了身份系统和经济系统外,元宇宙的最终的形态肯定还是需要很多其他的资源来支持,比如,最基础的底层基础设施,是不是需要足够的电力资源、算力和高速网络,其次,我们需要进入到元宇宙,是不是需要一个引导的设备?我们想在元宇宙里生活工作,那是不是需要各种场景的布局,是不是也需要提供各种各样的工作岗位,这意味着元宇宙有需要非常多的第三方的技术支持,有些风口,也是很多其他企业和普通人能够去参与的。


元宇宙的建设,是一个庞大的工程,绝对不是一家两家公司能搞定的,那么这个庞大的工程在建设的过程中,会遇到什么样的机会和挑战呢?在元宇宙的建设过程中,我们先来梳理下元宇宙需要的生命周期



4.10  元宇宙的准备期


准备期,这阶段主要涉及元宇宙的基础设施供应商的准备工作,我们知道,元宇宙的基础设施主要包括通讯网络、云计算和新的开放的网络协议。理想中的元宇宙,能同时容纳百万级、千万级甚至亿级的人,所以它对网络和算力的需求会有指数级的增长。

举个简单的例子,我们国内现在比较火热的大逃杀游戏“和平精英”,目前一个房间能容纳100人同时一起在线,而元宇宙需要的算力支持可能是“和平精英”的千倍万倍。另外就是不同元宇宙直接如果需要联系的话,还有需要支持统一的协议接口,这些都是需要一个统一的协会来制定,就像W3C来制定hTML代码规范一样,这些比较基础的问题都要解决了才能算是度过的准备期。当然实际上在实施过程中可能会遇到更加棘手的问题需要解决。



4.20  元宇宙的启动期


启动期,需要解决元宇宙运行期的一些规则性的问题,比如,经济系统的正常运转和NFT的交易系统。经济系统,按照我们现在能想到的技术,就是通过区块链形式的记账系统去解决。

比如我们在某个元宇宙空间的数字身份买了一包纸巾,那么元宇宙的账本会记录一笔,然后把这瓶的所有的权转给我,然后并向整个区块链去广播这一笔交易。

目前在为元宇宙做记账系统的公司已经有很多都开始进入行动阶段了,比如,阿里的蚂蚁链、腾讯的至信链,国外为元宇宙做准备也就更多了,比较比较知名的就是以太坊。NFT交易系统就更多了,比如,OpenSea(开放海)、

SuperRare(超级稀有),国内的NFT交易系统还属于刚刚起步的阶段,我相信明年会有很多实力雄厚的厂家崛起。



4.30  元宇宙的爆发期


爆发期,是元宇宙设备供应商百家争鸣的时候,有两类目的厂家应该会大有作为,元宇宙的设备供应商和场景应用的开发商。

元宇宙相关的设备我们在电影上也看过不少,像眼睛、手表手环、脑机接口之类的,场景应用的开发商可能就更多了,比如娱乐设施、工作场景和模式、教育场景、购物场景,这些都可以构成元宇宙的丰富的场景,这都是场景应用开发商的机会。当然另外做出创新的厂家可能会成为某个单独类目的龙头,例如,让脑机接口变的更小巧携带更方便,以方便随时随地的可以进入到元宇宙的空间里。



我们前面说到,要想迎来元宇宙需要经历三个阶段,分别是准备期、启动期和爆发期。我们现在处于元宇宙的什么阶段呢?距离元宇宙的开始正式商用还需要多久呢?正式进入爆发期我们需要做好哪些准备呢?我一个个来解决这些问题吧!

关于我们目前处于元宇宙什么阶段,就目前技术的发展,我们应该处于元宇宙的启动阶段,为什么这么判断呢?因为在经过过去几年技术的沉淀,我们有成熟的区块链的记账系统,NFT系统已经得到了市场的认证,并已经开始大量启动商用阶段,在2020上半年,全球NFT的市场交易额只有1370万美元,而到了2021年上半年,这个数字飙升25亿美金。


5.10 元宇宙来临标志


我们知道在元宇宙的产品生命周期有一个启动期和爆发期,但是,在爆发期之前肯定有一个临界点,当这个临界点到来的时候,就代表我们即将迎来元宇宙的时代,那我们怎么判断什么时间是元宇宙的临界点呢?我们还是需要从两个基础条件开始判断。

首先是身份系统。要想达到这个临界点,必须有一个全民级作为元宇宙的入口能接入元宇宙,就像现在FacebooK一样 ,全球使用的人数超过了一半,这便是我们现实世界互联网的全民级的应用。


第二个标志,当然是经济系统,衡量经济系统的一个关键指标是NFT的交易规模。。现在我们全球的GDP超过了80万亿美元,而NFT市场规模仅有约200亿美元,如果要达到临界点的标准,这个NFT市场的规模,也就是元宇宙的GDP,肯定要达到万亿美元的水平。这样估算,距离元宇宙的临界点,至少还有五年。



5.10 元宇宙临界点会遭遇哪些挑战?


在我们向元宇宙的慢慢过渡的时候,我们整个社会会遇到哪些挑战和需要做好哪些准备呢?我认为比较重要的两点比较关键,一是建立共识,二是文化和伦理的冲击



(1) 建立共识


为什么说建立共识比较重要呢?我们都了解,创造是元宇宙最大的优势,但是也是有风险的。比如,在元宇宙里,我们每个人都有编写剧本和玩法的权力,这样就会产生很多矛盾,每个编写的元宇宙的剧本不一样,这个是可以的,但是不同的剧本的矛盾是,元宇宙空间里可能是一个美好的元宇宙,也有可能是充满杀戮和暴力的元宇宙,也有可能是劳动最光荣的元宇宙,也有可能是不劳而获的元宇宙。

所以我们需要在法律、文化、价值观等等层面,让社会各个阶级都可以参与讨论,提前达成一个符合大家正能量共识的价值共识。


(2) 文化和伦理的冲击


第二个需要解决的问题可能是面的文化和伦理的冲击,我们可以想想,如果某一个元宇宙充满打打杀杀的事情,在里面的玩家回到现实也是不是会有暴力倾向。比较严重的是,在数字世界中,暴力和杀戮它的成本会比较低,所以在里面的犯罪成本也会更低。但是,在现实世界中,发生暴力冲突,无论在哪个国家都要付出比较重的代价,可能是需要接受法律的制裁,也可能是经济上的损失。但是在元宇宙的数字世界中,可能一个屏幕上的一个角色消失而已。

再往深一层的看,在元宇宙的世界中,我们说的自由是绝对的还是相对的呢?我觉得应该是相对的,在元宇宙世界里,还是需要法律和规则的,甚至要相对的比较严格,而这种规则和法律的制定恰恰是因为元宇宙不是一个开发商,不能通过监管一家公司、一个机构就可以解决的,而是要回到共识的层面,通过建立个人、社会和国家之间的公约,创建文明的元宇宙。

5.20 元宇宙技术层的挑战


元宇宙的虚拟现实是什么呢?我觉得是欺骗大脑的感官,它光有视觉的呈现是不够的,触觉也需要跟的上,例如,我们在元宇宙里看到一个菠萝,我们闻起来是菠萝味,摸起来也是尖尖刺刺的,可能我们认为它只是元宇宙里的一串代码,但是我们的大脑会通过感官来告诉我们,这就是菠萝,所以除了戴在设备,可穿戴设备也是极为重要的,它会给我们一个真实的力作用的反馈,但其实,欺骗五感并不是最大的难题,最难解决的应该是移动和交互问题,我们可以想象下,我们戴好设备,来到了元宇宙,一切的听觉视觉触觉都非常逼真,这时候我们街道一个任务,要去野外去打BOSS,问题来了,我们该怎么过去,在真实的物理世界里,我们是需要移动的,但是,我们的房间只有20平方米,所以虚拟空间再大,我们物理空间是有限的,大部分的方案是通过传送门直接过去,所以,元宇宙的开放世界就很难实现了。

但是即使是传送,也不能解决所有的问题,我们都听过3D眩晕症,这个原理是我们生理在视觉上感觉到了移动,但是身体没有移动,如果大脑足够敏感或者第一次接触,那么就是产生眩晕感,这种情况在第一个玩穿越火线的时候会比较常见,通常这种情况是视觉上越真实,眩晕感就越严重,在头号玩家里,主角之所以可以在小小的车厢里可以移动,是因为他在跑步机上,现在的虚拟现实游戏的移动也是靠这种方案解决的。


交互方面就更加复杂了,这里包括了人与物、人与环境、人与人直接的问题,比如,扎克伯格演示的开会场景,我们实际上还行需要椅子和桌子,不然,我们的感官虽然可以给椅子的反馈,但是坐下来确实空气,当开会玩了,需要互相给实体文件怎么办,需要握手怎么办,这都是一些交互逻辑上需要解决的问题,是不是每次开会我们都需要先把场景和东西搭建好,才可以使用,这样的话,实用的成本也显得太高了。每多一个步骤,用户的体验都是坠崖式的下跌。

所以,在现在目前看来,我们需要解决体验层方便的东西还是太多了。

5.30 元宇宙能带来哪些改变

前面我们对元宇宙的概念及需要的条件进行了结构,那么我们来落到实处,谈谈元宇宙能给生活带来哪些便利,首先,在扎克伯克发布的关于元宇宙的视频中,我们可以发现,元宇宙最先落地的可能是现场感,例如现在疫情比较严重,我们可以通过虚拟会议室来开会,还有我们很多现有的商业模式都可以借助现场感来进行重构和升级,比如,我们现在去购物,一般是自己打开APP购物,或者分享自己的购物车给朋友,未来我们可以一起在虚拟世界中逛街,足不出户,可以一起试衣服,帮对方挑漂亮的首饰,现在看任何直播赛事,都需要通过屏幕去看,最多有人气和在线人数,未来我们可以身临其境,感受到四面八方的欢呼,现在我们看网红都是隔着手机刷视频,未来我们可以更加直接,走到小姐姐身边,更加近距离的接触和交谈。


关于元宇宙是否有未来,是很多人一直争论的话题,但是我们可以肯定的是,随着全球科技水平和人民精神物质的逐步提高,人的精神层面和娱乐层面的阈值时被不断提升的,肯定会有企业做去做能满足人更高维度精神层次的工作,因为人对精神层面的追求的欲望时没有顶峰的,而我们现实能满足的条件时有限的,而虚拟现实则可以极大成本的去满足这个条件,我们现在人平时周末的娱乐时什么,无非是玩游戏逛街和看电影,而这些在虚拟世界里也可以实现,甚至可以不用出门,但是,有人可能会说,虚拟世界的东西终究是虚拟的,怎么可以和现实的相比呢?我们所能感受到了娱乐带来的精神满足无非是眼、手感知到了,在传输给大脑,如果我们技术足够发达,在虚拟世界中的东西反馈足够真实,骗过大脑就不是问题。

说到这里,我想起我以前读书的时候,我特别爱一款名叫冒险岛的网络游戏,刚好在那天,我们那个工会要去打里面的一个BOSS“扎昆”,打完BOSS会掉落一个专属的BOSS装备,扎昆头盔,但是那天,我刚开团,我表姐要去买鞋,她问我,游戏里的东西有那么重要吗?我没有回答,但是我心里已经有答案了,当打完BOSS掉落的扎昆头盔,队友的兴奋是真实的,当这款游戏没落时,大家在QT里面的告别的落寞是真的,现在想到大家一起组队刷本互相帮助的温暖是真的,我珍惜我在冒险岛的每一件橙装还有一起和我打副本的朋友,所以,世界上哪有那么多的真真假假,当有一天,你在元宇宙花的时候比你在现实里要多,你的元宇宙的身份比你现在的身份要重要的时候,你那时候觉得那边是虚拟哪边是现实的,当你有一天想去现实中买鞋和衣服的时候,会有人问你,现实中的鞋子和衣服不就是一堆垃圾吗?为什么要那么认真呢?

文章来源:站酷 作者:Endings 

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

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

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

如何高效地进行网页设计?

资深UI设计者

把握中心目标

大多数网页设计是以目标为导向,也就是网页做出来能为用户提供什么、能解决用户的哪些问题。例如电商网站的终极目标是卖出更多的商品,资讯类网站的目标是让用户能更多地阅读最新讯息,目标不同,两类网站在设计上也会有截然不同的差异。

在设计上,电商网站会更注重页面氛围的营造,把红红火火的促销氛围搞起来,用户看到会更兴奋。

如何高效地进行网页设计?重点关注这7个要素

在电商网站中,设计重点放在帮助用户浏览店铺并轻松找到特定商品上,放在详情页上用尽可能好的方式展示商品;付款流程也经过简化和仔细计算(例如某宝最近更新的订单页把价格聚集在一起),因此用户不需要经过太多思考就能快速下单购买。

打造平衡的效果

网页中炫酷的视觉效果能让用户印象深刻,但效果实现需要付出更成本。能明确知道什么时候更简洁的视觉效果能让整个设计变得更好,能让用户专注于正确的事情,这一点很重要。

有时候在网页中添加过多元素,会分散有价值的信息,用户也难以识别他们想看的内容。

如何高效地进行网页设计?重点关注这7个要素

对齐和对称是页面保持平衡的重要因素。对齐既保证了布局统一,又将有联系的元素紧密连接起来;对称营造一种平衡的感觉,元素整齐有序。

如何高效地进行网页设计?重点关注这7个要素

网站的登录注册页往往都设计得很简洁,有大面积的留白处理,只保留关键的信息输入框,这样用户能更专注于输入内容。

如何高效地进行网页设计?重点关注这7个要素

在宜家网页中,清晰的视觉层级结构以及留白的运用让整个页面看起来非常整洁有序。好的结构能让用户知道他们在看什么,留白提供了视觉上的缓解作用,有助于引导用户的注意力。

了解基本的设计原理

格式塔原理基本上定义了我们感知事物的六种不同的认知规则。在网页设计中,这意味着需要以一种合理的方式来安排元素,帮助用户从整体上理解设计。

如何高效地进行网页设计?重点关注这7个要素

设计中需要考虑不同元素的对齐关系、相似元素或按钮的排放位置、一组信息要如何展示、列表类信息该如何展示…

另一个重要的原则是希克定律,也就是向用户展示的选项越多,做出决定需要的时间就越长。因为我们的大脑需要考虑和分析所有选择,然后再选出最好的选择,当选择太多时,这就会成为一个问题。

这就像我们在餐厅里点菜一样,如果拿来一个 20 页的菜单,我们可能会从头到尾把这 20 页全看了,仍然不知道该点哪个,然后又把这个 20 页的菜单重新翻一遍。去餐厅吃饭是件放松高兴的事,我们肯定不想在点餐上给自己带来压力,这样吃饭的乐趣也会大打折扣。

如何高效地进行网页设计?重点关注这7个要素

如果需要填写很长的表单,考虑将长表单拆分成几个短的问题,让用户按步骤依次作答,避免一下看到过多问题给用户带来负担。

了解面对的用户

网页设计需要知道面对的用户是谁、他们想获取什么、想处理什么问题以及他们是想法是什么等等。

对最终用户的印象越清晰,越有可能创造出成功的设计,就像设计一个面向儿童的网站与设计一个供老年人使用的网页会完全不同。所以在一开始,要先学会把自己的观点先放在一边,倾听目标用户的意见,然后再慢慢验证自己的想法。

如何高效地进行网页设计?重点关注这7个要素

抖音千人千面的推荐机制,能为用户精准推送他们感兴趣的内容,把握住了用户的兴趣,产品才能越来越受欢迎。

排版很重要

排版需要长期的积累和沉淀,如何合理地安排页面中的品牌标识、图片、文字等元素,是始终需要考虑的事。比如不管网页设计的目标是什么,或者选择什么样的视觉效果,在选择字体时我们总要考虑字体的粗细、大小或对比度等因素。

如何高效地进行网页设计?重点关注这7个要素

根据设备不同,最佳字体的选择可能会发生变化。在移动端设计中,文字可读性是首要的,屏幕越小越要保证信息的可读性。

信息架构和导航

网页的导航设计和信息架构共同构成了产品的主干,让用户能够了解产品和功能并找到需要的信息。

如何高效地进行网页设计?重点关注这7个要素

无论信息的长短如何,合理的层级结构有助于在产品中创建逻辑结构,以便用户可以查找信息。导航能反映出产品架构,这样用户无需花费大量精力,就能轻松找到主要信息和功能。

如何高效地进行网页设计?重点关注这7个要素

点击按钮之后会切换到哪一页、怎么返回到当前页、点击哪些按钮页面不跳转。架构流程不仅自己要明确,更需要用户看得懂。

降低认知成本

咱们前面提到,如果面临的选择太多,就需要经过大量思考,这样用户很可能会变得有压力甚至困惑。其实这里面还包含着另一层意思,过多的选择会增加用户的认知成本。

只有降低认知成本,才不会给用户带来过多压力,才能快速做出判断。在网页大框架已经设计好的基础上,降低认知成本的地方往往更在于细节。

如何高效地进行网页设计?重点关注这7个要素

准确拿捏细节。在面包屑导航中,鼠标悬浮上去是一种状态,点击后又是一种状态;选中的标签与未选中的标签在颜色上做出区分;当前页码重点突出的同时,告知用户前后页码还支持左右切换。




文章来源:优设 作者:Clippp


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

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

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





怎么将画像与体验工具打通赋能设计

ui设计分享达人

什么是体验可视化地图

它们是一种体验洞察和形成参考材料的工具,能够帮助业务人员探讨决策使用,它们都是结合真实用户反馈形成的。另外这些地图本身并不能直接提供答案,而是用于促进对话或作为决策导向,它能跨部门让人们聚在一起讨论业务目标,指出潜在的机会或达成一致的价值观与目标,使解决方案更可行。即促进共同参与、共同思考、共同目标、共同发力。像心智模型、空间地图、服务蓝图、用户体验地图、客户旅程地图都属于体验可视化地图,也有称为对齐图。


用户画像&用户体验地图介绍

用户画像 本身可以反映出服务对象的特征,便于改进业务服务,帮助研究用户需求或产品痛点,因此在一些体验可视化地图中会配合使用。并且可以帮助设计师指导产品功能、导航、交互、甚至视觉设计方面的决策,是一种联系用户诉求与设计方向的有效工具,总之它能让你知道产品是给什么人用的,他们有什么特征或诉求。


用户体验地图 以个体在某个产品或领域中的体验经历为主,关注产品是如何契合个体用户体验的,通过用户个体的行为触点与视角来洞察商业机会。是一种比较视觉化、有助于引发共鸣和聚焦用户体验的工具,比较贴合情感化设计的理念,适用于洞察用户视角下与产品系统交互的可视化地图。


所以在作品集里经常看见这些体验地图就能够理解了,一方面是作为战略层的研究报告说明,用于佐证设计或决策的依据。另一方面是为了其他读者达成共识,便于共情设计目标。当然丰富和美化作品集也是一方面,更多的则是希望不要滥用起来,形同虚设,成了一个没有深入作用的装饰工具。


两者工具的差异与特性

用户画像的因素

用户体验地图的因素

如何打通用户画像与用户体验地图

方便直观易懂的去解释用户画像与用户体验地图之间的关系作用,这里我通过流程、相互作用来解释一下;

从流程上看

体验地图是基于用户研究开展的,所以要考虑研究谁,研究什么问题,在什么场景或领域进行,因此就需要借助用户画像去界定范围,以及形成用户材料,再去考虑用何种体验可视化地图展现,而用户画像也将一直贯穿始终提供可参考的用户信息;

相互作用上看

用户体验地图一般都是聚焦于既定范围的目标群体,一份完整的用户体验地图应该包含用户画像信息,应交代清楚目标用户的背景、场景、需求、痛点等关联信息,方便读者了解,以便于代入用户视角深入到用户体验地图的讨论中。


而用户画像尽管提供了由外而内的视角或部分设计见解,但并不能满足项目多样化视角的需求,且不足以形成一系列的设计见解洞察,所以用户画像始终需要与心智、情景、体验地图或研究报告等结合使用。也就是说用户画像需要与用户体验地图配合输出,两者谁也替代不了谁。


体验可视化工具的一般流程简述

一个正式且有效的体验可视化地图一般必须经过四个阶段才能完成,最后再得出结论达成一致;

一、项目启动;通过内部识别或收集用户反馈找到需求点,计划研究目的,制定目标。

二、开始调研;通过研究手段向用户收集优化资料或数据,为创造体验可视化地图提供可靠的数据。

三、阐述分析;选择阐述方式,通过体验可视化地图将研究结果与核心价值进行呈现,为后面探讨做准备。

四、达成一致;使相关业务人员共同参与研讨,结合地图报告进一步的思考,指出潜在机会或达成一致的观点。

五、展望未来;根据研讨结果设计解决方案,提出价值主张,进一步跟进和实施起来。

真实应用中不用急着画图准备填充,先明确目标再从用户研究或资料收集开始。如果没办法找到目标用户进行访谈或测试研究,那么至少找到一线的人员进行访谈或测试,不要依赖自己的见解或认知套用,这些地图的精髓在于打破内部视角建立起一场具有包容性的对话,不同部门的参与者多多益善,所以这些地图只是研讨中心的参考物。


如何正确Get用户原型与画像

构建和使用画像时大致可以分为两类;

1. 根据用户研究建立正式的用户画像

2. 建立人物角色原型

具体取决于用途与条件情况等,制作任何一组用户画像都非依托想象力,都是基于事实或用户研究的。并且不只是简单的人口数据或个人信息描述,如果一组不能达到共情效果的用户画像也就失去了核心价值《如何有效快速共情-点击查看》,就像一份简历,没能体现出个人能力与专业素养一样。


人物角色原型

制作一个正式的用户画像是一个漫长的过程,还需要开展用户研究,如果你没有现成的调研对象或调研条件,你就可以采用人物角色原型,该方法是由《Lean UX》的作者Jeff Gothelf提出的,他描述到;

“人物角色原型是一个正式人物角色的变式,其最大不同在于人物角色原型不是用户研究的结果,而是更多的源于头脑风暴的结果。公司成员会从公司理念出发,基于自身领域的专业性和直觉,来明确谁是公司产品或服务的目标用户,用户的动机和需求是什么。”引:Jeff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

这类角色原型不用花费大量时间去做用户调研,它们是基于已知的特征情况或预期的目标用户,适合临时性使用,便于开展前期工作或达成一致的见解,但是人物角色原型并不能代替基于可靠数据的用户画像。


构建人物角色原型的方法

就是跨部门集体参与贡献观点与数据来构建。前线相关业务人员是必备的,人数控制在5-8个人就行,要有主持人把控节奏和参与度,尽可能收集到不同业务视角下的问题反馈,讨论开始前可以提出一两个角色原型来激发讨论,然后充实起来,尽管最后可能形成了多个角色甚至有些看起来有冲突,不过没关系,重点是让这些人物角色清晰明确下来,不一致的地方可以进一步的讨论。


人物角色原型的构成内容

一般人物角色原型在一页的篇幅内就可以显示完,主要五个板块。值得注意的是,一定不要脱离了产品主题的范围;

一、角色基本资料:角色头像、姓名、头衔、单位或一些可用的辅助资料。

二、人口统计特征:一般包含性别、年龄、职业、收入等与主题相关的人口统计指标(类似简历中的个人信息)。

三、心理统计特征:与主题相关联的因素,主要指不可轻易观察的心理活动、态度、信仰、动机、观念的个人特征。

四、产品相关行为:指与产品体验有主要关系的行为或是行动,包括兴趣爱好、个人习惯、专业活动等。

五、需求与痛点:用户有哪些与主题相关的需求或痛点,你的设计可以满足用户那些需求和痛点缓解。



用户画像

用户画像本身可以帮助发现问题或进行决策,同时也反应出了对用户或用户视角的共同理解,并且可以在日常研发工作中持续使用,例如一些材料归档、分享、更新、辅助其他可视化地图等,以发挥出更多的余热。


如何打造可用的用户画像

定性还是定量类型

根据产品需求选择定性还是定量分析,亦或者结合,一般定性适用于用户需求深挖或业务创新等情况,讲究的是“为什么”,而定量更像是通过数据验证“有多少”,常用于数据分析、趋势分析、数据验证、做精细化运营和用户精准投放。  

定量需要足够的数据支撑,如果项目需要画像且企业不稳定、用户量级不够不能满足数据需求,则可以借助市场数据报告、白皮书、第三方数据服务平台、调研服务公司等来参考,这些数据也都是可靠的。大数据杀熟就是数据画像的反面引用,通过画像对用户进行分层,再挑出用户中的软柿子或老实人欺负。


识别用户群体优先级

对目标群体要有认知,要根据特征划分层级或类型,例如典型用户、潜力用户、专家用户。这些用户的界定范围需要业务相关人员去制定,类似一份简历我们可以根据能力对标级别,一般我们可以通过4个比较有影响力的指标进行划分,至于权重我们可以采用常见的四象限或卡诺模型;

在制作用户画像前可以合理的根据人物角色原型的特征过滤目标用户群体,但不要过分依赖,你只是需要找到符合的目标群体,而不是根据原型找到理想的那个人。

最终调研对象的关系表呈现;

定性类画像不用邀请很多用户参与研究,一般在5人左右,只有研究资源充沛时才会考虑邀请更多研究对象,一方面是研究发现5人左右就能反映出绝大多数问题了,另一方面是出于时间精力和预算情况考虑。


定性类用户画像要做什么

一、确认研究对象的优先级,根据需求背景或目标确认重点跟次要群体来挖掘不同用户视角下的问题;



二、通过线上招募(APP内或相关平台发布有偿邀请,亦或者寻求第三方服务公司帮助)、客户群(相关的用户答疑群邀请)、论坛社区(发布招募帖子等)、专家咨询、产品线上推送等方式,寻找目标群体并建立联系;


三、选择线上访谈、可用性测试、问卷调查、焦点小组等有效的用户洞察方式,并设计好相关问题或材料准备与用户进行深入研究(主要围绕已知问题或新的设计方案验证,再就是新的业务需求洞察为主);



四、整理用户资料,围绕研究主题建立用户画像信息,完成主要信息模块,可以根据业务需要,将用户技术特征、职业特征、环境因素进行补充(需要考虑是否与业务有一定关联或影响,否则无意义);



五、完善用户画像的细节,将价值信息同步到画像中,并对有效信息的细节进行补充,增加可信度还原真实性;


用户画像并没有一个模版标准,具体还是要看业务需求,而且网上的模版挺多的,自己甄别吧。另外在用户洞察的过程中,我们可以结合可用性测试、绘制故事板(这两种研究方法有兴趣可以查阅资料,一两句讲不清楚,有机会展开讲)等方式一同进行,而不只是把目的停留在建立用户画像上,这样反而获取的有效信息受限了。


定量类用户画像要做什么

一、数据采集

通过有效途径将用户产生的数据集中,不论是产品数据库、数据埋点、第三方数据统计或是定量调研的结果,这些数据都是重要构成部分,同时也决定了信息的范围,比如你拿不到用户的出行数据,那么就根本没办法构建相关标签或指标。

二、数据定义

对数据进行清洗整理,识别出用户行为数据、用户偏好、生命周期等数据,并进行标签化分类整理,这些标签或指标可以体现出某些维度的趋势或用户行为预测。不过值得注意的是,在构建这些标签或指标时尽量结合业务流程或生命周期来梳理,考虑画像建成目的与业务场景同时,也要思考标签的权重问题,标签不等于越多越好。 

三、构建画像

根据产品阶段或业务需要,把相关业务标签结合用户群特征信息整合成用户画像,一般的业务标签类型有增长策略、用户偏好、用户价值、营销触点等,这类画像可以包揽多个维度信息,还能对周期数据可视化显现趋势变化,但是在用户痛点或需求上,可能不会很直观,需要进一步的结合用户场景带入思考。



通常互联网产品前期,没有构建标签或数字画像的经验,可以考虑让团队引入相关第三方数据画像服务,它们可以更便捷的接入到你的产品中并帮助你打标签做统计;

以下截图来自第三方大数据画像工具(神策)

*第三方数据分析辅助产品也不少,这里只做交流使用


如何让画像角色更生动

画像中的角色应该更加生动,能够让我们感受到真实的存在,只有这样才能产生共鸣,赋予画像价值,为此我们可以通过控制以下六点来做的更好。


一、不要特殊化

特殊能加深印象,但是特殊化并不代表产品的典型群体,同时在实际应用时容易扰乱共情或分散注意力,例如用户群体是普通青年,就不要描述成一个帅气的学霸,也不要为用户添加一些奇怪的癖好,这些不相干的信息并不能让画像更加生动;



二、合理应用头像

通常作品集中的头像都比较美观个性,这没事儿。但实际画像应用中,头像也是很重要的一部分,会马上映入眼帘,这些头像不要使知名人群的,且贴合真实用户标签,不用暴露性感或是丑陋异样的,也不要使用插画、卡通、3D形象,不要有奇怪或不自然的行为动作。


三、充实细节

以一款线上教育产品作为背景,举例原本我们的用户信息写到:

那么即可根据产品属性结合实际情况进行丰富补充,例如调整为以下描述;

虽然没有过大的变化,但是已经将贴合教育产品的地域信息、课程阶段、收入情况进行了完善刻画;

接着再例如,虞溪女士的需求写到;

简单来看确实是透出了线上教育产品的需求,但是需求并不深刻,也没有刻画出虞溪女士的核心诉求,为此我们可以结合创造情景故事的方法,融合角色、场景、行动、事件、评价、情节这些元素去深度刻画描述,例如以下调整;

结合创造情景故事的办法是为了刻画出更多细节,不仅可以让浏览者更好的沉浸在角色视角,也能在完善的过程中深挖出更多有价值的思考;


四、创造情景故事

情景故事不会很枯燥会更抓人心,能够传达更多信息的同时,将产品信息与真实情景交融在一起,方便团队记忆理解以及更好的促进讨论。创造情景故事的元素通常有:角色、场景、行动、事件、评价、情节。看起来就像是在描述“我与xx产品的一天”。

  1. 角色:故事的主人翁或是参与者,不可缺少的重要部分;

  2. 场景:故事发生的时间地点物理环境,例如早上八点半我在拥挤的地铁上抢到了座椅,并打开了手机;

  1. 行动:能够观察到且与主题有影响的行为动作,例如我被这个问题难住了,解锁手机并打开了这个APP;

  2. 事件:发生了什么事儿,角色间做出了什么反应产生了何种结果;

  1. 评论:角色怎样评估并作出决策,有了怎样的目标,并如何进行下一步。其中任务目标是驱动的核心;

  2. 情节:一系列行为与事件的演变过程再到结果,从问题的发生到角色推进目标到结局。例如经典的戏剧结构:

*创造情景故事是要花费时间精力的,如果时间充裕你可以慢慢将相关描述进行转换,时间有限责挑取重点转化;


五、不要孤立使用画像

在前文就有描述到画像需要配合其他体验可视化地图一起才能更好的发挥效用,画像通常始终保持着个体视角,而且没有办法传达一系列完整的体验报告,所以为了更好的满足项目多样化视角的需求,尽量不要孤立的使用画像。



六、定期更新

产品发展中,会经历不同的阶段与市场变化,用户群体自然会变。如果说产品在研发新的功能去开拓年轻化的市场,那同样意味着目标群体趋向年轻群体,这种时候就需要变更或新增用户画像,就不要使用旧的画像起步了。



基本上做好以上细节,你的用户画像就大功告成了,这就像是结合STAR法则优化项目经历一样。最简单的标准就是业务人员能够去理解这些角色并代入角色视角思考,可以有效共情或决策。


如何用好用户体验地图

首先我们回顾一下用户体验地图的关键词:既定的用户群体、应用场景或领域,用户以某个持续性目标驱动与你的产品或服务发生交互,并且涉及多个阶段来实现目标,地图会通过由外而内的视角洞察产品服务是否契合用户的体验。



由此可见在与用户研讨时,我们的问题或测试任务应该覆盖相关阶段或重要的任务流程,以此来获取体验地图的相关重点信息。另外很多产品比较庞大,服务颇多,因此控制好体验的阶段范围也很重要,不仅会拉长工期也会使得焦点分散。

用户体验地图的构成简述

用户体验地图主要包含三个层面的内容,一、用户目标阶段,二、用户与产品服务交互,三、痛点机会洞察;

其实碍于不同产品和服务类型,体验地图的构成元素也有差异,不过在漫长的应用发展中也逐步趋于稳定。



常见的构成元素:

一、用户需求或目标:
在体验地图中,用户以需求或目标驱动与产品发生交互,需求或目标既定了要做什么,应该需要什么服务。


二、行为阶段:

行为阶段是界定场景的重要部分,以目标任务阶段的生命周期或者关键节点展开,不一定所有阶段托盘而出,阶段太多则不聚焦,细分太多则费时间也不一定快速见效。


三、采取的行为触点或步骤:

用户使用产品或服务展开的行为或接触的设备、泛功能应用等。


四、想法与问题:

在体验服务的过程中出现的问题或是一些真实的想法感受。


五、情绪波动与精神状态:

情绪和精神状态通常是反映服务好坏或用户满意度的重要因素,但同时也难以观察或量化,通常会根据用户对问题的描述来共情情绪,亦或者向用户提供情绪表情标签。


六、痛点或机会揭示:

结合上层阶段行为与用户的反馈信息向下垂直洞察产品服务的痛点或机会。


七、设备或其他图例补充:

例如跨端跨设备或包含特殊标签信息的补充说明。


*示例模版


用户情绪板怎么用才对

表情包早已成为网友互动和情绪表达的重要部分,但是在实际的可用性测试或访谈中,用户会相对拘束一些,也不会把各种各样的表情挂在脸上,所以才说用户情绪很难研究和洞察,更别说量化执行了。有些人可以进行表情管理,情绪更是难以琢磨;


那么体验地图中的情绪板怎么搞定呢?


就用户体验地图中的情绪块来讲,通常一定不只是表情icon来做表达,这样费解还缺乏实际价值,所以一定会加上相关描述来揭示用户情绪与观点。心智模型中用户情绪感受便是靠的文本描述来传达。


早期Pieter·Desmet在其《Designing Emotions》一书中提出了如何衡量情绪的研发方法,他开发了一款叫做产品情绪度量仪的工具,其原理就是为用户提供各种表情表达的卡通形象,用户在体验过程中根据自己情绪选出最匹配的那个卡通形象来示意自己情绪。这个工具经过不断迭代并丰富声音后已授权到:https://www.premotool.com/,我们可以在度量用户情绪或其他体验可视化地图中配合使用。 


另外在使用表情标签应用时,并不大推荐常见的微信表情、QQ表情等,这些表情在长时间的使用中,用户都会形成一些偏好,这会影响使用决策


在服务体验的过程中,很多时候情绪变化并非是单一线型上起伏变,例如:

我在观看电影高潮的部分突然网络异常,那么我的情绪应该是多样化的,一边是代入高潮部分的激动,另一方面是网络带来的失落感,同时还有等待网络恢复的焦急。

为此我们通常有两种方法来传递情绪变化;

1、将喜、怒、哀、乐、悲、恐、惊或需要的情绪标签化,每种情绪用一个颜色表示,然后使用同轴的趋势图结合用户行为阶段来表示;


2、即使一次展示多种情绪,也难免有积极情绪与消极情绪同时出现的情况,这种时候可以围绕一条分界线划分两类情绪区间,使用情绪曲线结合关键因素描述来显示更加全面而复杂的情绪心理,对应每个关键情绪节点可以使用不同表情图标细化辅助,使得情绪起伏的信息更充实有价值;


怎样完善用户体验地图

1、建立正确的项目目标是第一步,用户体验地图的优势与作用都有在前面讲过(如果忘了可以在“两者工具的差异与特性”中开始回顾),使用用户体验地图是有目的性地,它不是优化体验的万金油,通常都是收集用户反馈知道某一些阶段或环节存在问题,而建立优化目标开展的工作;



2、锁定存在问题的阶段,建立用户问卷、焦点小组或用户测试进行聚焦研究,尝试收集用户的意见或优化方案;



3、通过白板或线上协作工具建立简易的用户体验地图框架,并将研究用户的画像信息与碎片信息填入地图。白板共创的办法其实就是根据用户体验地图的框架,结合用户视角将自己的观点写到便签贴到对应的区域,避免你一句我一句难以记载和整理;



4、关注每个阶段的过渡,通常问题很容易出现在这些地方,例如付费前到付费后阶段,如何进入后者阶段就成了关键点,另外没啥优化空间或体验良好的阶段可以折叠起来留出更多空间关注核心;



5、用户体验地图的画龙点睛之处在于跨部门协作完成,而不是闭门造车,邀请一两个其他部门的人说明要求和完善地图并不是什么难事,只有这样最后的结果才能达成战略一致,而不是自己绘制完后要求其他人被动接受结果;


检验用户体验地图的标准

一、首先看你是否与用户建立联系,用户体验地图的个体对象是用户不是你自己,尽可能的获取真实的用户的信息。

二、一个产品运作是需要多个部门协作的,所以至少要有三个不同部门的人员参与进来。

三、协作完成用户体验地图和达成共识后,你会惊奇的发现问题如何解决,各个部门该怎么配合实现都清晰明朗了。


前一阵子跟UXren社区主理人宝珠老哥讨论过,就如截图所示,更重要的是将企业各部门协同在一起,达成一致的战略目标,共同参与探讨出解决方向为业务赋能,这才是体验地图的精髓所在。


什么是触点模版工具

用户体验地图通常包含了一系列阶段,而每一个阶段都会由多个触点编排成一段微型体验,而触点模板工具将会很好的为你建立和打开一片微型的体验模型,这种模型是由罗伯特·罗斯曼(j·Robert·Rossman)[美]与马修·迪尤尔登(Mathew D·Duerden)[美]在《最佳体验》中提出的一种体验洞察工具,它可以很好的结合体验地图去进一步的深挖某段流程或阶段里需要优化的体验,它们之间的关系就像一条路线图与一份详细的指引说明。当你完成某个触点模版时,你会对该触点上的体验设计有清晰的认识,并且会形成一份书面报告与执行团队共享和交流,触点模板可以很好的解释体验是如何设计的,并且将相关执行团队的角色联系在一起,这不是噱头,你可以根据后文指引进行尝试。


体验类型的框架

体验是复杂的,在用户触点模版工具中,体验被划分为平淡的、专心的、难忘的、有意义、革新性五种类型,并且它们具有连续性,是通过关键特征与关键属性定义出来的,它们结合了心理学理论基础,目的是方便更好的理解体验,并在设计实践中起到指引作用促进交流,因此我们在设计时也应该对用户体验结果有意向性的去设计,框架如图;

*关于参与感的两种系统思维是两种不同的思维状态,系统1更像是惯性思维,凭借认知或经验更加快速和自动化的思考,而系统2就会开始更主动的更深入的进行思考,参与阶段越高思维越深思。


而三个阶段分别是;

一、接受:个体意识到和接受体验过程中正在发生的事情。

二、思考->处理->计划:个体开始积极的思考体验,并对正在进行中的事物做出处理与反应,同时可能开始计划各种应对方案。

三、行动:深入的参与到体验中并引入新的触点和元素来维持互动,从而共同创造体验,例如《鱿鱼游戏》上映后,影片中的“扣糖饼”又带火了糖饼。

当新的事物被第三阶段引入后,又会重新开始接受并循环,不过这并不代表所有的体验都能够完整经历这三个阶段。


触点模板框架

触点是用户进行交互的重要部分,其周期可长可短,会产生不同感受,而一系列的心理感受会促成最终阶段或完整的体验。触点模版由11个部分组成,它们互相作用指导和揭示体验设计的方向与细节,并把设计结果引向预期的体验方向。


抬头信息

  • 编号:对应到体验地图的阶段编号或是触点编号,随着触点设计逐步完善,对应的位置可能会发生转移。

  • 标题:对应该触点模版主题的标题或是任务触点的名字。

  • 体验类型:触点的体验类型或整体的体验目标,从平淡的到革新性的五个体验类型。

  • 期望的反应:我们把期望的反应视为触点预期结果的北极星指标,它可以是多个。我们通过用户反应逐步提炼出预期的结果供予用户体验,例如期望的反应是笑容,那么我就可以提炼出“讲个笑话、开黑游戏”等可以促成反应的体验结果,同时期待的反应应该尽可能的传递用户价值。

核心组成部分

  • 期望的结果:根据期望的反应,我们要提供给用户哪些体验来实现。同时期望的结果应该跟类型相匹配。一般我们可以根据 “1. 产生积极情绪、2. 吸引注意力、3. 帮助发展和加强关系、4. 从更宏大的视角给人来带意义、5. 提升能力、6. 孤立自由选择” 这些类型内容作为起点,并根据体验项目的情况细化,例如“心情低落想要刷刷手机产生积极情绪”Change“在App上刷会儿短视频,看点有趣搞笑的段子来缓解下低落的情绪”


  • 体验场景元素:触点模板工具没有特定的行业或业务模式,因此这些元素根据需要完善即可。而实际的元素应用中也会有不同的权重,注意重点元素的设计应用。

  • 互动设计:可以是人与人互动、人机交互或更为复杂的互动,就是有意向性的将元素进行编排与用户产生互动获取必要的信息或传递。


  • 贡献者:整个体验阶段中,可见的幕前服务人员与后台的服务员,他们是组成完整体验的重要部分,例如餐饮店的服务员与传菜员就是可见的幕前服务贡献者,而厨师们就是幕后的贡献者。


  • 共同创造:共同创造和可供性是促进用户参与的两个重要的方法,并且参与度有高有低。好的体验更多是与用户共同创造的,建立合适的触点与用户共同创造体验是重要的!以微信的“拍一拍”来看就是个很好的例子,拍一拍功能本身是加强了微信聊天的可供性,给用户提供了更多的互动可能,同时用户可以自己编辑被拍以后的文本,加强了体验的趣味性,这便是共同创造的过程。可供性为用户提供更多互动体验的可能,而共同创造为用户提供DIY的空间。

  • 优化:对触点进一步的优化,加深体验感受。一般分成了两大类型,一类是技术优化、一类是艺术优化。例如让一个App加载短视频更快更流畅,这就是技术型优化,如果为一个服务器未响应的404界面配上缓解焦虑的插图,这便是艺术型优化。


  • 过渡:触点与触点之间的过渡可能波动、异常、缓慢、复杂等,如何引导用户正常的过渡到下一个触点也是重要的一部分,它可以是自动化的隐式过渡也可以是引导性的显式过渡,就像是安全通道的指示灯一样将用户从一个地点带往另一个地点。


*触点模版(可直接下载原图进行打印使用)


如何构建一个触点模版

通过一段音频聊天室互动体验之旅来揭示触点模版用法与效果,音频聊天室大家应该都熟悉了,这里就不聚焦用户画像与用户体验地图了,触点发生在用户第一次进入歌厅音频房间,那么应该怎么设计体验来为用户留下好印象呢?



触点是发生在注册后的第二个阶段,即首页房间列表(编号A02),完成注册阶段后见到的第一个界面。标题则暂定为“一次非凡的音频互动之旅”,我们希望新用户在选择好一个房间进入后能够有一次愉悦难忘的体验经历,而相应的期待反应则是“有人带我玩真棒!这个声音我好喜欢,下次还来找Ta们”。体验类型则希望是从平淡的体验类型升华到难忘的。

其中体验场景除了设备自身与软件环境,更多真实的环境因素碰撞我们无法预测和控制,因此仅锁定软件自身的场景元素。互动设计则是关键,软件本身更多是工具支持,我们需要利用好运营资源跟用户产生互动来促成体验结果,这里我们会根据技术可行性优先考虑能为用户提供的体验结果,再到互动设计部分。其次就是过渡部分,预期的过渡触点实际上会有多个方向,我们优先以充值消费作为一个触点(转化)、私信关注为另一个触点(形成互动联系方式),完善后的触点模版如图;


在该触点模版中,主要揭示了如何为用户打造理想的体验之旅,不仅涉及到运营方法也包含了软件的重点优化部分,它很好的展示了如何通过角色之间在软件中的互动来促成体验与商业价值,当你把这份资料在团队里分享后,完全可以清晰的对体验设想进行解释,以促进团队内的深入讨论与细节推进。至于相关功能的细节推敲同样可以采用触点模版继续深入。



接着A02触点模版中提到的标签体系优化,我们再一次的结合触点模版进行标签的体验设计,编号设定为“A03”,这是一个泛触点,它涉及到用户注册进入时、房间互动、系统消息、消费与充值、装扮标签的着落页,但归根还是在应用内。标题为“让标签为用户赋能意想不到的体验”,在这段泛触点中我们期望围绕标签为用户打造难忘的体验,让标签产生更多的价值与业务转换,经过初步的体验设计后,新的触点模版如下;


在这个触点模版上我们对标签的作用价值进行了定义,并对功能及业务流程上进行了设想,已经初步的形成了标签体验的设计,接下来只要将装扮标签的着陆页与房间内的应用进行完善设计,在辅以条件判断与消息通知打通闭环就算是完成主要工作了,再此后的内容你是继续用触点模版还是设计交互原型都是可以的,至少目标是明确的。相信写到这里,触点模版的应用与功效你已经一目了然了。


触点模版小结

触点模版的板块跟信息维度较多,但是考虑到触点或项目的实际情况,模板内的信息填充不用完整。并且它的确可以很好的将体验设计的思路整理出来并形成材料分享,对于多个触点只需要根据体验地图上的顺序打上编号后,即可将多个触点模版的关系连接起来,你可以将打印填充后的模版依次排列或张贴在白板上的体验地图上。


触点模版就像是一份交互自检表,它从多个维度去考虑和解释了触点体验的设计,尽管没有勾画出详细的设计细节,但是体验设计思路与执行团队的任务已经很明确了。


另外完成触点模版时,并非是要按照模版里的板块顺序作业,比如有时候我们是根据体验结果考虑运用哪些体验场景,如果有固定的场景,那么你就可以根据场景情况开始考虑,一般更倾向于先设定体验结果进行倒推。再就前面啰嗦过的,我们根据项目情况完善需要的模块即可。


服务蓝图介绍

更完整的服务流程可视化工具,可以结合用户体验地图对服务流程进行优化或调整,相比传统的业务流程图,它在用户角色关系与前后端分离上有明显优势。是一种服务可视化的工具,利于让产品保持精益(识别价值点、优化流程)

多角色的引入,虽然使得蓝图更加复杂,但是能够反映出更多角色的交互与流程关系。

服务蓝图的因素:

服务蓝图的构建元素:


结语

客观来讲,这些体验地图时常保持争议,特别是逐步大范围在业内曝光后,形式化、假把式、滥用等标签也愈发明显呐,这些体验洞察工具并不总是能够在项目中发挥预期作用,它们也需要区分使用场景跟项目需求情况,如果你没有尝试过,可以积极引用,当你熟悉应用后你会发现收获更多的是一种体验设计的思维,一旦需求或痛点摆到面前时不再像一只无头苍蝇。

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

文章来源:站酷 作者:泡泡bing

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

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

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

“留量”时代,做设计需要运营思维

ui设计分享达人

写在前面


今年的“双十一”,朋友圈异常安静,没有了以前电商活动的氛围,没有漂亮的数据,没有晒图,有人说是用户消费疲软了?数据不会骗人,今年”双十一”一天的GMV还是比去年高了将近500亿,而且一大波尾款人在11月1日就已经结束。再加上直播电商,用户购买渠道变多了。李佳琦直播带货一晚就超100亿的GMV,说明用户的消费意愿和消费力还是很强的。算一下,50个李佳琦直播一晚上就能抵上“双十一”一整天的GMV,有点厉害。中国伟大复兴的道路还在继续,随着人民生活水平的提高,文化素养提高,互联网普及,消费力只会增不会减,只是战场在变化。


前些日子发了PP微助手的优化作品,本篇将结合改版思路和最近对互联网设计行业的思考进行一些分享,希望对大家有一定的帮助,欢迎大家来指正吐槽~


点击可以查看   PP微助手改版优化







流量变“留量”




互联网产品最重要的就是流量,没有流量,就算产品设计的再好,早晚也会运营不下去。纵观这些年移动互联网的发展,市场已经被分割的差不多了,各个行业都有龙头企业(社交:微信、购物:京东淘宝、出行:滴滴哈罗、外卖:饿了么美团、旅游:携程等等),各大互联网公司业务也趋于稳定,红利期已经过去,流量市场已经变成了“留量”市场。就像淘宝这种大流量的产品,也在吃流量老本。




回归到设计,在互联网公司做设计,一直在强调需要有产品思维、用户思维,然而在“留量”的时代,更需要我们具有运营思维,同行业的业务趋同、需求趋同,可挖掘的需求少之又少,可以打开同一行业的各类app一看,就知道产品形态大同小异。所以只能在“留量”里下功夫,既要减少存量用户的流失,还要在这基础上让存量用户创造更大的价值。必然,我们在做设计改版的时候就需要结合一些运营知识。






曝光



“曝光”一词相信大家都听过,在拍照时,“曝光”时间越长,照片细节就越丰富,当然过度“曝光”,也会让照片失真。在运营一个互联网产品时,也需要用到“曝光”,这里的“曝光”是指产品内容的“曝光”。


用户在进入某款产品的时候,都是带有一定目的性,通常情况都会经历三步操作,从看见内容,到与产品互动,最后得到想要的结果。




这里的“看见”,就要说到产品承载信息的曝光,合理的信息曝光才能更精准快速的触达用户。同时,运营同学最关心的数据和流量,也是需要安排合理的信息曝光才能有有效的数据和流量。在手机这么一小块屏幕想把所有内容都曝光出来,是不太现实的,就算能,也不合理。把过多的信息一下子全部曝光给用户,效果反而会很差。通常做法就是对页面进行楼层的分割,流量进行合理的分发。大流量的产品,每个楼层都需要单独部门去运营的,这样就会出现业务主次和优先级,不然各部门就会为了争夺"屏幕地盘",无限撕逼。




作为设计师,就需要和运营部门做好以下确认:


1、楼层怎么分割,哪些楼层是产品部门控制,哪些楼层是运营部门控制,每个楼层显示哪些内容,设计师需要根据每个楼层的重要性,去定义屏占比


2、哪些模块需要首屏曝光,哪些是需要第二屏曝光,依此类推,这个至关重要,设计师就要考虑各类机型适配问题,比如iPhoneX一屏能显示下的内容,在其他手机未必能显出来,这样会直接影响曝光,导致数据不好(等着背锅吧~),严格来讲要根据实际用户使用机型占比去定义首屏显示的内容。


3、每个模块内容的信息层级,明确信息优先级才能结果为导向去做交互布局和视觉呈现,这时候就是你发挥的时候,对比、亲密关系、留白等等,都可以上了。






这里结合PP微助手的一些改版优化(非全套),分享一些改版思路。


PP微助手改版思路解析


项目背景:PP微助手是取代电视遥控器一部分功能开发的一款小程序,核心需求有几点


1、账号统一,PPTV时代的用户,大多都是使用的PPTV的账号,为了方便管理苏宁易购账号体系,会引流把PPTV尚未升级的账户统一升级合并至苏宁易购账号。

2、投屏功能,看影片终端还是以电视机为主,所以只做投屏,不做在线播放功能

3、智能语音,结合苏宁小biu智能语音系统,可以和电视机语音互动,实现交互功能

4、会员业务,移动端开通会员比电视端更方便,同时可以用一些运营手段促进用户开通会员

5、推送活动,电视机打开频次不如移动端,推送活动给用户,移动端可以实时看到



电商行业通常会把用户分成“大明”、“笨笨”、“小闲”三大类用户,在视频类产品,绝大多数用户都是“小闲”用户,来平台都是找乐子打发时间的。




思路一:架构改变(产品思维):


PP微助手本来就是辅助电视机的,用户觉得用遥控器操作麻烦才会选择用小程序操作。在设计的时候,把用户当成是一个并不想动脑子并且很懒的傻子,产品设计越简单越好,否则用户干嘛要用小程序,遥控器挺好的,遥控器的大多交互都已经习惯,也没啥学习成本。






从用户角度分析,进入小程序无非就是找片源、看片以及看片过程中的一些基础控制操作(播放、暂停、快进等等),所以简化了产品整体框架,从原来底部5个tab(首页、片库、遥控、搜索、我的),改为3个tab(首页、遥控、我的)。产品呈现给用户的样貌更加简单直观,也相应的培养了用户心智,让用户对PP微助手这款小程序有个基本定位。





思路二:楼层分割(运营思维):


首页改版前,按照iPhoneX的尺寸,首页第一屏也就曝光了3个分类,而且下滑到底总共也就几个分类,片源的曝光度不高,banner呈现也相对普通,就是那种正常电商类头部banner。同时交互成本也高,要点击“更多”才能看该分类影片的全部列表,要知道多一步操作就会多损失一部分用户转化。


改版后,针对第一楼层推荐影片采用电影宣传时的大海报样式,视觉焦点更强烈,同时曝光也更强烈一些,你去电影院的时候,看到的电影宣传海报,大多都是这类竖版的,用户已经有一定的心智模型,所以在这里采用竖版更为好一些。这些推荐影片在这里也作为“hook”,后面会讲。当然像电商类产品,首页需要考虑严谨的屏占比,这类尺寸肯定不合适。


第二楼层是影片的分类,采用文字tab左右滑动的方式,这种分类方式虽然没啥设计感,也普普通通,但是在一个分类众多的产品里,这种处理方法相当不错。减小了楼层的冲突,也提高了内容的曝光。像腾讯视频、爱奇艺、优酷,分类tab都是吸顶固定的,很直观的传达给用户影片信息。下拉的时候,这里采用feed流,用户在交互习惯上,连续操作时,对同一种交互会有惯性和依赖,上滑时查看更多影片,能满足用户的预期,也不会因为调整新的交互(上述的点击跳转查看更多)方式让用户反感。在视觉形式上,采用了横版的样式,是为了和第一楼层形成对比,也是为了节省屏幕空间,能曝光更多的内容。二楼的影片内容也可以分布一些“hook”



搜索也是一种用户找片源的方式,后面再讲,这里要考虑到流量分发的情况。





思路三:引导用户(运维思维)


按照福格模型B=MAT,完成行为的三要素:动机、能力和触发器。



用户进了影片详情,说明已经有动机了,这时候需要抓住机会,按照产品需求可以完成两个行为目的,一个是让PPTV账号升级成苏宁易购账号,二是转化成会员用户。


这里要看一下进入详情的数据,是“hook”进来的用户多还是非“hook”进来的用户多。如果是“hook”进来的多,说明用户主观意愿不是很强,这部分用户可能会流失,如果是非“hook”或者搜索进来的更多,说明平台用户主观意愿更强,有较高的粘性,更容易促进会员的转化。



对平台来说,希望用户进来完成两条路径:


1、未登录的用户,点“推送”和“开通会员”按钮,进入下一步登录或者升级账号流程。当然这一步会流失用户,部分用户会反感登录这种操作。


2、已登录的用户,可以快速推送影片,完成自己的看片目的,如果是会员影片,这里就需要用户先开通会员,当然只是引导,还会有一部分用户不想开通会员,选择离开。





防止用户过多的流失,就需要平台一定的干涉,加强登录或者开通会员的意愿,可以从以下几点入手:


1、沉浸式体验,进入详情,头部区域自动播放影片花絮或者预告,快速让抓取用户眼球,增加下一步操作的意愿。

2、醒目的豆瓣评分,“hook”影片选择一些评分高的,用户针对豆瓣评分已经有一定的认知,评分优质的影片,用户更有意愿观看,更容易促进下一步动作,提高会员的转化率。

3、各类标签,比如:首播、独家、会员免费、会员半价、4K高清等等,能清晰定位影片,捕捉各类用户看片心智。

4、会员相关信息展示,未登录的提示“登录领券、限时活动等”,非会员提示“会员权益、开通会员的利益点等”刺激用户。



思路四:优惠券吸引用户(运维思维)


改版前优惠券和体验券在不同入口,流量分散了,券的目的就是要让用户去使用,需要缩短路径,更直观的展示给用户,能让用户快速做决策。如果券种类多的话,还需要区分各种券样式,需要让用户快速定位想使用的券。

其中已使用和已过期的券对用户来说就是已经没用的券,并不需要再用单独的tab分类,并且弱化处理。因为PP微助手会员券相对比较少,不像电商一样,会送很多商品券,所以用最简单的形式展示给用户就行。


值得注意的一点,不是说已过期的券就没用了,如果运营把控好节奏,发券有一定规律,用户看到过期的券会有一定的挫败感,就会经常来关注券。“废券再利用”也能增加用户的粘性。针对快过期的券,必要时候可以做二次提醒,给用户造成紧张感,会激发用券欲望。


说服用户下决定,一般从以下三个点去考虑:时间紧迫性、暗示稀缺性、后果恐吓性







流量分发和流量承接



产品的流量来源有很多,除了自身用户进入产品的流量,还有线下广告、线上广告、分享链接等等各种来源。目前主要的流量分发方式包括:搜索分发、算法分发、社交分发、人工分发、付费分发。PP微助手主要应用算法分发、搜索分发、人工分发。




先讲一下“hook”,在电商里是“钩子商品”,这里我把“hook”当做是“钩子影片”,运营精准推荐的一些“hook”,会取到不错的转化效果。



用户在产品内的行为路径是不可控的,一大波流量进入首页,每个用户都有自己的目的,所以需要对用户进行分流。一部分用户去了搜索,这类用户目的很明显,知道自己想看的影片名称,这部分就是搜索分发的流量;一部分用户被“hook”勾走了,"hook"激发了用户的看片动机,这部分就是人工分发的流量,需要运营去干预;一部分用户在不停的浏览,在浏览过程中找自己的影片,产品会分析用户行为,显示千人千面的首页,这部分就是算法分发的流量。


有流量分发,那必然就有流量承接,流量承接都是相对流量分发的,在电商产品里,站内的流量承接一般都在商详,以及对应的后置链路(订单确认、结算等等),从各渠道进来的流量,最终汇总在商详。在商详,会突出各种利益点和产品自身优势去刺激用户下单。至于利益点,活动时候的各种优惠信息就是典型例子,产品自身优势,比如:淘宝的先享后付、京东有京东物流次日达等等。在PP微助手这里流量承接就是影片详情以及后置链路会员套餐页,具体可以看上面的“思路三”的分析,怎么去承接流量,怎么去促进转化。

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

文章来源:站酷 作者:胖冷不冷

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

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

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


B端设计规范

资深UI设计者

1.准备工作


设计工具

Sketch

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

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

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

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

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



Photoshop

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

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



Adobe XD

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



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

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

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

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




2.关于手机的基础概念

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


手机分辨率

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

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


屏幕尺寸

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

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


屏幕密度(DPI或PPI)

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

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



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




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

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

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

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


最新系统版本:IOS 11.4.1

中文字体:苹方黑体

英文字体:San Francisco

官方系统设计模板下载:

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


官方系统设计字体下载:

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


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




设计稿尺寸

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

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



Sketch设计

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

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

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



Photoshop设计

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

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

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



常用数据

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


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

导航文字            34-38px

标题文字            28-34px

正文文字            26-30px

辅助文字            20-24px

Tab bar文字       20px



图标尺寸建议

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

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


界面适配

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


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

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


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

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



简单理解APP构成

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

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



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



设计稿的标注

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

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

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


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

设计稿中:

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

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

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




程序的对应控件

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

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

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


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

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

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





设计稿的切图

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

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



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

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


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

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

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

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



切图输出规范

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


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

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

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

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



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

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

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


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

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


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

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


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

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


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


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

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



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

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


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

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

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


切图输出状态:

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

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




命名规范

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


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

示例说明:

btn_homepage_seach_normal@2x.png


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



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


这是Android Material Design中文版的地址

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


Android的英文版地址

https://material.io/


最新系统版本:Android 9.0

中文字体:思源黑体

英文字体:Robot


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


Android手机屏幕密度

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


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




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


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

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

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


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

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


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

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




设计稿尺寸

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


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



设计稿的标注

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

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



设计稿的切图

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


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

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



图片格式

WebP和SVG

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

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



最小可点击区域

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


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




5.UI设计师的职业道路

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


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

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


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


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



工作0~2年

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


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

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


提升设计能力:

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


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

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


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

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

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


完善理论知识:

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

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

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

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



工作2~3年

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

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


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


拓展技能:

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

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

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


明确职业目标:

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


可以从以下方面考虑:

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

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


为进入大厂做准备:

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

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

Apple、Google也不是不可以!

Skr!Skr!


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

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


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

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




工作3~5年


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

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

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

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


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

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

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

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


提升综合能力:

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

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

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

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


拓展人脉圈子:

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


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


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

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


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


作者自述

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

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

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




文章来源:站酷 作者:Z085740511 

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

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

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


日历

链接

个人资料

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

存档