首页

用第一性原理告诉你:什么是交互设计?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

为什么是第一性原理

最早提出这个概念的是亚里士多德。他说:在任何一个系统中,存在第一性原理,是一个最基本的命题或假设,不能被省略,也不能被违反。

后来「硅谷钢铁侠」埃隆·马斯克在一次采访中提到「第一性原理」:

我们运用第一性原理,而不是比较思维去思考问题是非常重要的。我们在生活中总是倾向于比较,对别人已经做过或者正在做的事情我们也都去做,这样发展的结果只能产生细小的迭代发展。第一性原理的思想方式是用物理学的角度看待世界,也就是说一层层拨开事物表象,看到里面的本质,再从本质一层层往上走。

所以,我希望用第一性原理的思维方式,发现交互设计的本质,从而更好地理解和运用它。

什么是交互设计

交互设计,又称互动设计(英文Interaction Design,缩写 IxD 或者 IaD)是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the「interaction」即人工制品在特定场景下的反应方式)相关的界面。——百度百科

读完上面关于交互设计的权威解释,相信有读者和我一样,在短时间内很难弄明白:到底什么是交互设计?

下面,我们一起用第一性原理,拆解和分析交互设计的本质。

小学语文老师教会我们一种名次解释的方法——拆词法,那么,交互设计可以拆解成:交互层和设计层。

交互层是什么

交互,即交流与互动。具体点说,在某个场景下,一个对象为了某个事件目标,与其他对象产生信息的交流与互动。在笔者看来,交互的本质是信息的交流与互动,包含用户、目标、场景,它们共同构成交互设计的交互层,这是交互设计的前提。

而用户、目标、场景,也正是辛向阳教授定义的交互设计5要素其中的3个。

案例1:我们为「餐厅点餐」这个事件进行交互设计,那首先要知道这个案例的交互层是什么,也就是信息的交流与互动是怎样的。

这个例子的交互层是:用户(我们)需要在某个场景(餐厅),与其他对象(餐厅/服务员)产生信息的交流与互动,才能达到目标(完成点餐)。

案例2:我们为「地铁上听音乐」这个事件进行交互设计,按照上面的思路,我们知道这个事件的交互层是:用户(我们)需要在某个场景(地铁上),与其他对象(音源)产生信息的交流与互动,才能达到目标(听音乐)。

我小结一下,帮你理解交互设计的交互层。

当我们为某个事件进行交互设计时,首先要知道自己在一个什么样的事件前提下开展交互设计,而这个前提就是我所说的交互层,即用户在某个场景下,与其他对象产生信息的交流与互动,从而达到目标。

所以,在交互设计里的交互层,本质是信息的交流与互动,包含用户、目标、场景,主角是信息交流互动的双方或多方。

设计层是什么

在说交互设计的设计层之前,我们先来看「什么是设计」。

设计是把一种设想,通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。——百度百科

现在我们将上述解释放到「交互设计」里去理解。交互设计里的设计,就是在交互层的前提下,为一个事件合理的规划/计划(行为),并传达(媒介)出各种感觉(用户体验)。

所以,在交互设计里的设计层,本质是找到解决问题的手段,包括媒介和行为,主角是设计媒介和行为的设计师。

我们继续用前面的两个案例,理解交互设计的设计层。

案例1:为了完成「餐厅点餐」的交互设计,我们依据交互层这个前提,开始找到解决问题的手段,并为之设计媒介和行为。

在一些餐厅,用户还是通过纸质菜单,用口述的方式完成点餐。这里的媒介是纸质菜单和服务员,行为是口述。

在另外一些餐厅,用户用手机扫码点餐、下单、结账、评价等。这里的媒介是餐厅点餐的二维码和用户的手机,行为是用手机扫码、点餐、结账等一系列动作。

案例2:为了完成「地铁上听音乐」的交互设计,在非智能手机的时代,我们基本上是通过一个可存储的音乐播放设备和耳机完成这个目标的,那时候的媒介是播放器和耳机,行为是打开播放器播放音乐、在播放器调整音乐。

随着互联网和智能手机的普及,蓝牙传输技术的升级(aptX/LDAC等),以及用户诉求的升级和多样化,我们可以设计出更多贴近交互层(用户、目标、场景)的媒介和行为。比如音乐APP、蓝牙播放器、蓝牙耳机、线控耳机等。

此外,笔者认为:媒介和行为是相辅相成的关系,二者在交互设计的过程中会互相促进和限制。举个例子,一些带线控的蓝牙耳机自动连上手机后,按一下耳机上的播放键,就能直接启动音乐APP 开始播放了。这个「开始播放」的行为就可以设计在耳机上,而不仅仅是音乐APP里。

小结

用第一性原理,我将交互设计拆解成交互层和设计层,并结合辛向阳教授定义的交互设计5要素,得出结论:交互的本质是信息的交流与互动,由用户、目标、场景构成;设计的本质是找到解决问题的手段,由媒介、行为构成。

交互设计的本质:设计师为用户设计出在某个场景下信息交流与互动的媒介和行为,从而达成目标。

如何做好交互设计

1. 把握交互设计的行业差异化

本文从我个人的角度和经验,给大家分享了我对交互设计这个底层概念的理解,在我研究的过程中,最大的体会是,交互设计不仅仅表现在屏幕上,其实在线下场景下,同样有很多体现,比如现在热门的服务设计,我觉得它是对交互设计的场景化应用和延伸。

由此看来,交互设计会因行业和产品形态的不同,而存在差异化。拿B端产品来说,用户行为是完成某一项规范化的工作,而这项工作,往往具备行业和岗位专业性,设计师需要更好地理解行业和专业,才能贴近交互层(用户、目标、场景),设计出好的媒介和行为。

2. 具备相关思维

项目思维。交互设计师的工作往往贯穿调研、需求、设计、研发、测试等环节,我们需要把每一个设计Case 当成自己的项目一样去对待,而项目经理就是自己,充分发挥主动解决问题的意识和能力。

用户思维、产品思维、逻辑思维等。这3个思维网络上有很多解释,在这里就不赘述了。

3. 充实知识储备

点击下方标题,查看已更新的知识篇文章:

4. 提升专业技能和底层能力

《从今天起培养这5个好习惯,让你在 2019 年快速成长!》

写在最后

本文从构思到写完,断断续续有1个多月了,总希望找到一个合适的方式去解读交互设计,把这个概念说明白,但事实是越研究越觉得复杂,我需要了解的还有很多。

所以,我写这篇文章的目的不仅仅是分享我对交互设计的浅见,还希望用「第一性原理」这个拆解、分析、解决问题的思维方式,去研究「什么是交互设计」这个问题。

交互设计这个概念或领域,远比我写的要复杂和深入,我在研究「交互设计」路上才刚起步,希望能与读者朋友一起交流这个话题。

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

商业化思维:如何创造价值,驱动产品/业务运转?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

商业化思维的本质就是:创造价值,通过为客户创造价值和交换价值来驱动产品以及业务的运转。那么,如何为用户创造价值和交换价值呢?价值属性会跟着用户属性的不同而产生变化,所以,在探究这个问题之前,要根据将用户划分为不同的群体,再从不同的方面着手。

商业化思维这个字眼乍看上去很高大上,确实往大了说,商业化思维可以套用到各种宏观微观的商业模式当中。但我们的目的是让商业化思维能够成为一个活动运营真正日常可用的能力项,所以我们对这个部分要解读的商业化思维的定义稍微做一些边界设定。

——基于商业化思维的本质:创造价值。

我们将探讨:如何通过创造价值去驱动一个产品/业务?

通过创造价值驱动产品/业务运转是一种完全不同于体验驱动(也就是产品思维)的模式,也是绝大部分互联网从业者少有接触的(电商&广告类的业务接触可能较多一些),能够综合使用价值驱动和体验驱动来帮助你策划一个业务形态,就会极大拓展你的思路(比如:你能够策划出趣头条类似的广告费转移为用户成本的模式)。

同时,也能够朝着我们的核心目的:让一个业务叫座又叫好去演进。

再次回顾一下产品思维和商业化思维模式的概念:

  • 体验驱动(产品思维):如何让用户使用便捷、有趣、解决用户的某种问题和需求?
  • 价值驱动(商业化思维):如何为用户/客户创造价值和交换价值?

用户/客户分类

那么如何为用户创造和交换价值?

价值属性是跟着用户属性在变化的,要探讨如何创造和交换价值,我们需要先对用户/客户做一个分类:

C用户:个人用户。

  • 素人用户:就是最普通的个体用户,看新闻的、买东西的、薅羊毛的、刷视频的普通大众们。
  • 达人用户:依赖一些内容平台生存的,往往以创造内容换取价值的内容生产者角色。

B用户:机构/商家/团体等任何非个人用户。

  • 职业经理人B用户:一般是大企业/机构里的业务负责人/对接人,他们并不在意公司的业绩,主要在意的是领导的认可。
  • 生意人B用户:一般是小企业/个人店铺的直接负责人或者就是老板本人,整虚的对他们从来没有用,他们只想要赚钱。

一般互联网的各种业务形态,会面对的用户种类基本上就是以上四种,代表着完全不同的四种价值诉求。

我们对这四种角色分别进行价值创造以及交换的理解和研究,就能够帮助你在业务规划当中,真正有效的运用到商业化思维。

当然这只是商业化思维最基础的入门,感兴趣的可以基于这个原理再深入研究。

C用户——素人用户的价值

在面对素人用户的时候,商业化思维主导的用户价值和产品化思维主导的用户价值有一些交叉和模糊的地带,为了便于理解和明确另外一种思维模式,我们相对粗暴的定义商业化思维的价值更多在于“创造”,区别于产品化思维的“满足”。

怎么理解呢?

用户有购物的需求,打造一个电商购物产品属于“满足”需求。而在购物需求满足之后,我们让用户去进行商品分享,通过用户分享进来的订单我们给予一定的分拥,这就“创造”了额外的赚钱的价值,可以交换用户社交关系链曝光的价值。

当然,实际并没有这么明确的区分,用户购物本身也是一种商业行为,商品的品牌溢价、促销手段(买三减一)等也都可以归类为价值创造的范畴。不过,这个不重要,我们关键要理解的是创造价值的思维模式。

常见的可以额外创造的素人用户价值:赚钱、省钱、炫耀、情感共鸣等不属于用户刚性需求(购物,变美,解决问题)的这类可以额外创造的价值。

而常见的你可以置换的用户价值:额外的成本付出、用户的个人关系链(自主推广)、用户的时间、用户的内容创造等。

商业化思维在素人用户部分,提供一种截然不同的业务策划模式:并不是考虑用户的需求是什么,然后针对性的策划一个产品。而是先思考你想要交换的用户价值是什么,然后,思考你如何创造额外的价值可以有效的置换到用户的价值。

在这个思维模式下,我们并不以体验和操作为优先去考虑业务形态,用户付诸成本是核心考虑因素,成本小于价值这个业务模式就有效,反之则无效。

这个思维模式也解释了:为什么很多体验优秀的产品就是没有用户愿意去使用?

目前业内新兴的一些社交产品拥有比微信更优秀的体验,但是产品在社交上创造的额外价值并没有大过用户的关系链迁移成本(想要去交换的价值)。而一些价值巨大但体验糟糕的产品用户还是愿意一遍又一遍的尝试想要成功走通——一个分佣50%的商品,再复杂的操作用户也愿意去钻研和使用。

当然,通过成本-价值的模式去思考和规划业务模型,并不妨碍我们同步去进行产品体验的完善,以帮助进一步减少用户在操作上付诸的成本。

商业化思维在业务中的一种典型运用场景,基于一个明确的用户价值交换业务目的,我们进行价值交换过程的建立,以找到合适的业务模式。

例如:我们希望用户能够主动进行分享(而这个过程往往基于已经满足了用户基本需求的状态上,比如说一个电商网站用户已经完成了购物,但是我们还想要额外榨干用户的价值),贡献他们的社交关系链价值。

首先,我们需要进行的思考是:用户进行分享需要付诸的成本是什么?

——分享到朋友圈后造成的个人形象影响,思考和检索适合的分享对象的成本,分享动作的操作成本(可以通过体验优化极大降低)。

那么思考,基于业务特性,我们能够提供给用户合适的交换价值是什么?

——可以通过和商家分摊成本的额外现金激励?基于稀缺或者高价产品的炫耀内容?或是商品本身附带的情感属性?明确的定义清楚这个具体的价值是什么。

然后完整的对比,你创造的额外价值是否大于综合成本,当然这个对比不是一个绝对的数学对比过程,还掺杂了很多主观因素。

所以,一定程度的用户调研或者简单一些的自我洞察能够帮助你得出有效的结论。如果做不到价值大于成本,那么这个业务就是不成立的。其实这个思维模式的逻辑是显而易见的,但又往往被忽略。所以,很多分享10元满减优惠券的策划被创造出来,而根本没有人思考过10元满减优惠券的价值其实远远低于我分享到朋友圈的成本。

琢磨一下以上的过程,是不是提供了一种全新的思路。帮助你的不仅是简单的思考“我想让用户做什么,所以理所当然的策划一个产品去引导用户”,而是真正的考虑清楚业务是否成立的根基,然后再从容不迫的去优化体验。

时刻保持“成本-价值交换”的思维模式,不仅能够帮助你打造有效的价值交换业务形态,还有一个非常有用的场景。

基于一个明确的用户诉求,我们进行价值交换过程的分析,以找到业务的关键点。

我们还是用电商业务场景来举例:在电商场景中,用户付诸的最大成本是金钱,而购物操作的成本实际上优先级并不靠前。用户在价值交换过程中最优先的价值是:“买到想要的东西”和“足够的划算”。

所以,在电商业务的重点一定是:提供更丰富的商品库和更优惠的价格,能够极大提升价值的含金量。

而优化购物操作体验,页面动线逻辑等是其次的,可以一定程度减少用户成本但解决不了价值不足的问题。

这也解释了:为什么一个创造了诸多优秀产品(常规产品主要面对的用户成本确实是操作成本,而价值是比较单一明确的,例如邮箱)的大厂投入了诸多心血打磨产品体验但最终还是在电商战场战败了?

一个擅长做价值交换的电商大厂在一个社交产品(用户的主要价值是社交,成本是难以独立完成的关系链迁移)上投入了大量的推广资源和利益诱导确留不下用户。

你看,大家都在说的基因的本质问题,其实本质并不复杂。当然大厂的成败并不只取决于思路的差异,还有历史以来积累的资源类型和用户心智,这些也都是基因的构成部分。

我们也不需要操心这么多,学会运用这个新的思路足以在业务策划中帮助自己抓住真正的重点。

C用户——达人用户的价值

首先明确我们这里所讨论的达人用户,并不是普通用户当中乐于分享和创造低质量内容的那群人(当然也有高质量的但并不普遍),而是以内容生产为职业,创造真正专业有价值内容,能够构成你的平台核心竞争力的那群人。

区别于普通用户,我们希望置换的达人用户价值是比较高的,平台依赖这些达人用户去不断供给符合平台导向的优质内容,而内容生产的成本极大,也就需要更大的价值来进行置换。
达人用户常见价值诉求:变现、曝光、独特的内容生产能力、有效的粉丝互动和管理能力。

达人用户需要付诸的成本:内容生产成本。

基于创造价值大于成本的逻辑,要打造优秀的面相达人用户的业务,就可以从几个方面着手(增加提供的价值):

提供足够价值的变现能力:

专业的达人往往以此生存,和普通用户一样的分佣价值只能作为额外的补充价值,并不能达到达人的标准。

所以,如果你的业务希望依靠变现价值来让达人自发留下,那么你需要考虑的核心问题和需要寻找打造的案例就是:有没有达人可以在你的平台赚钱养活自己。

当然如果没有内容独家协议的限制,达人可以依靠多平台存活,对你的要求就不会那么高,但变现的价值也一定是生存级别的(几千元)而不是福利级别的(几百元甚至以下)。达不到这个标准,你的业务逻辑确实就不成立。

提供足够多的曝光量级:

当然这个和你的用户规模以及流量分配机制有关,需要考虑的问题是:你给的曝光是不是有效的曝光?你的达人用户能否有效的把曝光转化为强关系的粉丝,或者是个人品牌认知用户?

这个目的达不到只是粗暴的给曝光并没有用(例如:很多内容平台会找我要稿子,一些平台只会放作者名字而不愿意曝光作者个人公众号,我就非常抗拒为他们提供稿件)。

很多冷启动的业务面对的是达人内容量级和用户量级循环驱动增长的问题,在这个逻辑下一定程度的达人内容补贴是常用的手段。但不能偏离的是,你的激励要做用户这个循环,要求仍然是激活的内容一定要对用户有价值而不只是凑数,达人的补贴规模也要达到生存级别。

提供独有的内容生产能力(生产素材):

或者说独特的有效的粉丝互动管理能力等产品层面的价值也是一种办法。但说实话国内互联网KOL行业发展多年已成定局,大的MCN机构已经垄断了大的流量和真正专业的内容生产者,平台迁移成本极低;大流量主产品能力的抄袭门槛又不算高。

所以,除非你能纯粹的全面培养素人成为达人,否则这类型的手段可能只作为补充,要真的撬动达人价值还是要回归到以上两个点。

降低创作的成本:

当你的产品不足以让一个达人在这里养活自己,那么你可能就很难得到独家的内容。

要让达人愿意在你这里搬迁内容或者一定程度的定制创作,可走的路就只有尽量减少内容生产的成本——快速搬迁,极低门槛的排版能力,和行业通用规则一致的产品形态等等。

接下来,我们看一下另外一个截然不同的面对B客户的领域。

B客户相比于C客户,目的更加明确,愿意投入更大的成本交换更大的价值。在B的领域,商业化思维的主导就更加明确,价值的创造和交换成为了唯一的话题,产品体验起到的作用微乎其微,除非你提供的价值本身就是产品的体验(比如说:一些企业服务工具)。

B客户——生意人价值

要理解生意人B的价值诉求,先从一个个人经历的故事开始:

曾经牵头过一个面向B商家服务的工具平台,商家支付费用使用工具和流量等整合的服务。

在工具平台搭建的早起,我们以非常产品导向的思维进行了规划,重点考虑的是工具的各种功能、平台使用体验、对平台的流量等价值贡献等问题,设定了工具平台的点击率、跳转率、转化率等关键考核指标,在这些导向下不断的去优化工具平台。

然后,我们召开了第一次的商家推广大会,准备了精美的PPT,详尽的介绍了工具平台各种先进的能力,复杂的逻辑和优秀的体验,其华丽程度首先把我们自己都感动了。

但是,现场反应平平,几乎所有商家全程都在玩手机,似乎对我们精彩的演讲丝毫不感兴趣。

会后我们找到几个资深的商家咨询了原因,其中一句关键的点播对我们产生了至关重要的影响:

“我们只想知道在你这里能不能赚钱,投入多少回报多少,流量成本吧如何,比其他平台有没有优势。其他的真的不太在意。”

这一句话真正引起了我们关于“什么是商业化?”“怎么样才叫做生意?”的思考。

面对着实打实要和你做生意的商家,一切形式化的虚无的东西都没有任何意义,只有唯一关键的话题:赚钱(当然不同的业务模式又有其他的一些核心价值例如获客等但逻辑都是可以套用的)。

回去以后我们快速调整了整个业务的导向,弱化了所有关于体验的考核指标——点击率,转化率(还要保留的原因是:这个产品还涉及到C端的用户体验),而把一切涉及到投入产出,能不能挣钱的指标——流量成本,拉新成本,费用的投入产出比,作为主要的考核导向来指导所有的工作方向。

至此为起点,这个产品开始真正的在市场上迎来了爆发,每一次宣讲会后(新的宣讲会我们只强调投入产出效果)开放的名额都被一抢而空。

以上的故事即是我对与生意人B合作的商业化思维理解:剥离掉生意场各种复杂的规则和概念,要撬动生意人B的投入,实际上也是在和他们做生意。能不能帮他们赚钱是唯一应该考虑的问题。任何经过包装的,浮夸的,虚无的内容在真实的投入产出效果下都没有任何意义。

B客户——职业经理人价值

当你合作的对象从一个想要赚钱的生意人变成了一个大公司内部的职业经理人,你将面对的价值又从单纯的赚钱变成了更复杂的职业经理人价值。

一个职业经理人心里在意的价值第一优先级,并不是帮助公司更多的盈利和获取价值(虽然这个理念并不道德但这是现状你不得不面对),而是他在和领导汇报这次合作价值的时候是否能得到认可。

所以,面对职业经理人这样的B端客户,并不能仅仅考虑实现业务目标,你还需要从他的角度考虑:能否过让这次的合作有更多的标杆价值、项目意义能够挖掘和包装出来,以帮助他形成一个漂亮的汇报文件。

所以,和B端客户做生意,需要更多讲故事的能力。除了业务目标的承诺外,你还能够在方面销售合作谈判的时候,能够完整的描述出:未来他在做汇报时候能够拿到的完美的报告是什么样子的?

以此去考虑:你在一开始要销售方案应该如何设计?业务应该增加哪些模块?合作应该提供哪些支持?就能够更好的帮助你搞定一个职业经理人的客户。

以上便是基于活动运营应该掌握的最基本的一些商业化思维业务运用介绍,除了常规的运用外,更重要的还是要强调互联网非技术工种人员应该都要具备“创造体验”和“创造价值”两种思维模式,能够真的帮助你创造出叫好又叫座的策划。

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

为什么你的设计改了又改?这4个方法帮你一稿过

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大多数设计师在实际工作中,经常会碰到设计稿改来改去,改得焦头烂额,甚至怀疑自己的设计水平,这是为什么呢?又有什么解决的方法?这篇文章为你答疑解惑。

「设计」这一门工种,似乎是永远避免不了「改稿」这一环节的,即便是非常顶尖的设计师,不为甲方不为外部原因所妥协,也会在自我实践中寻求改变。但是,「改设计」也未必是越改越好,如果沟通不当,也会存在越改越糟的结果。所以,作为设计师,一方面我们要吸取不同的意见,另一方面也要全面提升自己的知识架构、坚守自己的原则。

接下来以「UI设计」为例,剖析我们日常工作中「改了又改」的问题。在实际工作中,UI设计师通常会面临来自老板、产品、运营、开发等各方人员的意见,也常常会因为字体的粗细、间距的大小、颜色的选择等等问题各执一词、争论不休,就像下图一样:

为什么会这样呢?其实,在UI设计中,频繁改稿主要存在三种情况:

  • 第一种:在与产品经理需求对接的时候沟通不到位导致理解有偏差,产生方向性错误,这是信息传递的问题;
  • 第二种:设计师经验不足、设计能力有限导致产品经理的需求得不到最佳程度的实现,这是UI设计师本身的问题;
  • 第三种:UI都已经做到一半或者已经输出了,产品需求又变动了,这是产品经理或老板的需求不确定的问题。

针对以上问题,在实际项目中怎样避免陷入频繁改稿的死循环,从而提高工作效率、推动项目进展,提升自己作为设计师的成就感呢?

认清工作流,保持全方位的沟通

首先我们来了解一下UI设计的工作流,只有清楚自己岗位的流程,才能更好地拿捏设计。每个公司的类型和规模可能都不太一样,但基本一致,无非就是5个阶段:需求 – 设计 – 开发 – 测试 – 上线。如果按职位划分就是:产品经理 – 交互设计师 – UI设计师 – 前后端开发工程师 – 测试人员 – 产品上线。

所以我们UI设计师是处于流水线中游的状态,向上对接产品,向下对接开发。在这个流程中,要做到减少设计修改的频率:

向上要明确产品经理的需求,将原型需求准确恰当的视觉化;

向下要考虑开发实现以及时间成本,因为如果一个设计做的非常绚丽,但是开发实现不出来或者很难实现或者实现的时间成本很大,那么肯定需要对设计方案做出调整,采纳折中方案。

所以,不想让自己的设计改了又改,那么一定要全方位的多沟通,一定不要「闭门造车」。

确定需求,吃透交互原型

UI设计师接到产品原型后,一定要弄清这几点,再开始设计:

1. 原型是否确定,会不会存在变动?

我们在接收到产品经理递交过来的交互原型稿之后,先和对方确定收到的需求是否完整,是否是最终稿件以及是否会存在变动。一般来讲,在大型企业里面流程都比较规范,产品经理输出最终原型之后,后期变动的可能性较低。但在中小型企业,通常因为项目时间紧张,流程不够完善,反复的可能性较多。一些大型需求,产品经理有可能会分模块、一部分一小点的流转到UI设计,这样存在的问题隐患比较多,因为经验较少的产品经理全局概念较差,虽然口头上说这一部分的需求已经完善了,实际上当所有需求汇总之后极有可能需要再次调整。所以作为UI设计师,我们尽可能不要去接局部输出的原型,需要再次确认无误后,我们再着手设计,这样就避免了原型需求的变动造成设计的变动。

还有一点,在产品经理给到交互原型时,我们是被动的接受,还是在需求沟通之中也能及时参与呢?最好在产品需求的评审阶段,对应的UI设计师可以积极参与讨论,一起沟通。一来可以熟悉产品思考的整个过程,二来可以在原型的沟通中站在设计的角度及时发现问题,提出建议,避免在原型定稿后再去修改的尴尬。

2. 项目的时间周期

在接到产品的原型后,一定要及时确认项目的时间周期,通常产品经理会主动告知项目的周期,询问UI设计完成时间,我们根据需求的复杂程度给出UI输出的预计时间,再根据这个时间节点来划分每一天完成的工作量。如果产品经理给的时间周期比较短,那么尽可能的阐述原因申请设计时间。如果时间过于仓促的话,设计思考的时间就少,考虑的问题很难全面,不利于界面效果的最佳呈现,导致后续改稿的可能性也很大。

3. 理清设计意图,处理好信息层级

接到产品原型,一定要理清设计意图,处理好信息层级。

当产品经理递交给我们确定的需求原型之后,切莫盲目开始设计,UI设计并不是把原型框架进行简单的排列,我们需要理清设计意图,熟悉功能架构、掌握交互逻辑,明白产品经理想要解决什么问题,达到什么程度以及具体的设计方向。

信息层级这个问题,好像我们在实际工作中经常会提起,但是要做到恰如其分的标准还是有点难度的。准确把握界面的信息层级还需要跟产品经理多方面的沟通,因为有些时候我们以为的,并不是产品想要的,所以一定要多次确认,才能精准把握。

△ 上图左侧是lofter首页列表,右侧是我统一梳理层级关系之后的效果

改动的重点:

  • 将配图采用四周留白的卡片式布局,让界面更通透,增强呼吸感,视觉焦点更为集中;
  • 优化标题与标签话题的展现形式,通过文字大小及字色深浅拉开主题文字与话题标签的层级关系;
  • 将热度与喜欢、评论、转发的实时数量跟随图标后面,增加用户参与的积极性。

多个设计稿比较,让每一处设计有理有据

在实际设计过程中,当碰到一个设计模块拿捏不准的时候,可以在 sketch 或者 ps 中建立多个画板,将几种不同的设计方案平铺展开,进行视觉对比分析。如果自己拿不准,可以叫组员或者其他部门的「小白」来进行选择投票或者提出改善性建议。不要小看「小白」,不要觉得他们不懂设计,提的建议对设计无用。其实不然,我们的设计最终目的是给人用的,而且要好用,所以一定要多结合小白用户的多方面意见,才能让自己的设计更经得起推敲。

上图为笔者在处理个人中心界面效果拿捏不准的时候,布局了多个效果进行对比,通过对比的呈现后,就可以清晰判断每一个界面存在的问题。

另外,UI设计中,不要停留于表面,不要用「好看或不好看」去做简单评断,在设计过程中我们的界面布局、颜色把控、字符间距、icon设置等多方面都要经得起推敲:为什么这样设计?换一种设计合不合适?

只有让每一处设计都有理论的支撑,深思熟虑后,才会让设计更切实际,才能让人信服,才能实现产品指数的增长,也更能体现设计师的价值。

以产品为核心,尊重各方立场

当设计稿出来之后,一般会组织 UI评审,UI设计师一定要将自己的设计理念表达清楚,将设计中考究的观点输送给参与评审的各方人员,这样会让你的设计更有信服力。如果在评审过程中,产品、运营或开发对设计稿提出不同的意见,我们首先不要急于否定,要确定立场:大家都是以产品为核心去思考问题,也不要人云亦云,要清楚他们为什么会提出这个意见,是不是自己的设计哪里没有展现好?即便对方的建议本身没有可取性,那么你也要站在你的视角用你的观点解释给对方听。这决定于每个设计师的自身知识架构和理论支撑,所以一定要让自己不停地吸收,才能让自己的设计更经得起推敲。

以上是我在实际工作中的一些比较浅薄的总结,如有阐述不周的地方大家可以相互探讨。

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

字体用的好,感觉不会少!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


在设计中,字体的样式往往起到辅助文案传递的作用,所以如何在不同的设计风格中用好字体尤为重要。字体如果用得好,在设计中常常会给读者所需要的感觉,这里我们例举几种常见的感觉:


目录

1.「注」入重量感

2.「空」出高级感

3.「圆」有亲近感

4.「装」出华丽感

5.「质」换画面感

6.「写」出文艺感

Image title

一.「注」入重量感

突出重量感是大多数设计师常用的技巧,在设计中,为了提高文案或者标题的视觉层级,很多设计师往往会从字体的重量感进行思考,给字体注入内容往往能加大字体视觉重量,字体的重量感也就是版面中的“存在感”,“存在感”一旦提高,视觉层级也伴随着提高。


一般我们在突出字体重量感的方法上常常会选择线条较粗的字体、加大描边或者设计成立体字来突出“重量”,甚至可以缩小字体间距,营造紧张的感觉,使文字更具“重量"。另外在颜色上,黑色物品相对于浅色物品在视觉上显得更重,这一点在字体上也同样适用的。

Image title

二.「空」出高级感

字体的高级感一般体现在品等产品的设计上,利用大量的留白,在字体的颜色上尽量选择近乎无彩色如灰色,做到简洁大方、少即是多。而在字体类型的选择上,衬线体往往比非衬线体更具有格调,宋体往往比黑体更加高雅,利用传统字体也能给读者一种信赖感。


看到这里也许有人会说:“从用户体验角度思考应该使用非衬线体,因为其更易读、字形更简洁。”而在《设计师要懂心理学》一书中表明研究发现:常规的衬线体和非衬线体两者在理解难易度、阅读速度和使用倾向并无差异。

Image title

三.「圆」有亲近感

字体所展示出的亲近感主要体现在于字体端角的圆滑上,先从生活常见的例子讲起,在人类的常识里尖锐的物品往往会给人冰冷、危险和难以靠近的感觉,而圆滑的东西往往让人有亲近感,更利于吸引读者接近。这里最形象的例子要数按钮和图标的演变,按钮和图标的设计从直角到圆角的演变,其中不乏也有以上原因。


在突出亲近感时,圆角类型的字体所表达的感觉如果还不够强烈,这里不妨可以选用较粗的线条字体再加上暖色系的颜色,这样亲近感就更加强烈了。

Image title

四.「装」出华丽感

一般文字是用于阅读,而为了博人眼球,设计师也慢慢让文字字体有了装饰,利用线条的不规则粗细来突出文字的“美”,从而体现出华丽感,华丽感较强的字体大多数用于女性品牌的产品,装饰性高的文字,不仅引人注目的效果,还能强调了产品的“贵”。要注意的是修饰性的文字不利于阅读,不适合大量文字,容易视觉疲劳。

Image title

五.「质」换画面感

材质感的字体往往用在游戏的设计上比较多,将武器或游戏场景等有质感的东西贴在字体上,间接展示游戏场景、风格等。因此,运用材质的字体往往更具有画面感,从而影响读者视觉对大脑的影响,产生了身临其境的感觉,于是在脑海中留下对产品认知。


质感的字体往往容易让人感觉到“力量”,这也和第一点注入内容说法一样。

Image title

六.「写」出文艺感

手写的字体,会让读者感觉到手的温暖与肤触的温柔,这里被利用到的应该算淘宝商家的感谢信了,利用牛皮纸加上手写字体,可谓是为了好评诚意满满。


手写的字体还常常与手绘贴图一起出现在手帐本,或可爱优雅、或呆萌粗线条;另外,你或许还能在文艺菜单上看到它,朴实无华却清晰温暖,文艺感十足。

Image title

后言 

没有最好的字体,只有合适的字体,字体的难度并不在于设计和选择上,而是在于你选择或设计的字体给读者的感觉是否符合产品所想表达的亦或是读者所需要的。


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

 

拨动情绪的内容设计

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

短视频产品成为年轻用户社交娱乐的主场景,QQ在短视频社交的耕耘过程中,打造了丰富的发表能力,让用户更方便的记录生活精彩瞬间,同时也更方便的与好友互动,今天我们对设计过程进行复盘,将过程难点与设计思路从能力建构、设计切入、设计亮点引入、设计亮点深挖简述供各位参考。

Image title



二 发表能力建构

————————

同质化竞争突围


发表能力构建方面从最轻的发表成本以及最多的发表回馈两个维度做横向的铺陈,建构了除了拍摄以外,轻量主观表达的文字视频,不受时空与题材影响发表动机的影集,勾引起共同参与及话题的游戏,最多社交参与感的问答等发表能力等四种发表方式。打造轻量发表成本的文字视频可以确保发表量足够,以解决发表量与观看量不对等的问题,在小游戏与问答等发表方式,除了可以营造社交场景以外,创新的玩法也能与竞品拉开差异,在众多的短视频产品中具有自身的特色。

Image title


然而单纯的发表能力差异容易被模仿,能够保持自身优势与特色的时间十分短暂,建立起与用户情感上的连接可以有效的加深用户对服务的认可以及归属感,举个例子,前段时间笔者至上海出差数日,意料之外的一份小礼物却促使我成为该酒店的常客,这证明了建立情感连接确实可以成为与同业同质化竞争时不错的突围点。


Image title



三 设计切入角度

————————

建立情感连接,是视频设计“双面性”的一面


参考诺曼的理论,情感化设计分为本能,行为,反思三个层面。在打造视频制作工具的过程中,满足本能的外观愉悦以及确保行为过程的顺畅性属于基本要求,可以参照过去设计工具的手法,保证架构流程界面反馈每一环节的使用效能和低理解成本,而反思的范畴则与内容相关。为制作视频内容而设计,需要将用户的经验,喜好,文化转化成特殊符号,以触及情感连结最重要的反思环节。


Image title


用户与产品接触的过程按时间展开分为初次接触、逐渐了解、熟悉依赖三个阶段,若在每个阶段都能与用户保持情感连接,必能逐步加深用户印象,达到竞争差异化的目的。下文两个案例演示我们如何在引入期和成长期选择合适触点,制定相应设计策略和方案,从而达到此目的。




四 设计亮点引入

————————

唤起情感,拉近与用户的距离


为了让用户更主动的发表相册视频,QQ团队在影集发表模块上规划了智能相册的能力,借助用户回忆塑造超级符号,把用户的亲身经历与产品功能建立联系,提高使用意愿。在影集的引导步骤中,寻找合宜的契机,把零散的照片按特定线索重新组织,经过精心包装以回忆墙的方式重新呈现给用户。

影集功能的重新包装:

Image title



4.1 场景搭建


QQ经授权后访问用户相册,沿时间和位置线索用聚类算法对照片归类,产生与特定场景关联的照片组,再用图像识别技术从照片组中精选特定n张合成视频,为后续情绪升级埋下基础。

Image title



4.2 意境传达


为视频搭配转场音乐是主要增色手段。

转场效果设计要以情绪传达为目的,过渡动画和快慢节奏的灵活搭配打造大片质感,叠加细节让画面生动不僵硬。

Image title


Image title


在配乐标准上,我们基于用户习惯推导,明晰场景+节奏的音乐选择维度。


Image title


转场和音乐的挑选需贴合场景特征。在“聚会”场景中,设计师选用翻转重组的效果传递欢快愉悦氛围,曝光和光晕细节可以模拟真实光影效果。“往年今日”则表现出安静氛围,沉浸的复古滤镜和低调的叠黑效果让情绪表达含蓄收敛,涟漪波动仿若时光倒流。


Image title


4.3 捕捉时机,宣传专属回忆


在信息架构层的设计使用卡片横滑的方式,一方面可以暗喻时光隧道,另一方面考虑到大卡片比其他尺寸的缩略图在陈列和交互行为上更利于突出视频的优势。

Image title


4.4 案例回顾


我们采用情感符号引导发表的策略,得到数据的支撑,影集发表总量和发表转化率均有明显提升。经过市场横向对比,QQ团队在对影集的功能规划和整体设计理念上占据了优势位置。



五 设计亮点深挖

————————

打造情感体验峰值,强化用户印象


在任何体验中,都应该重视体验过程中的情感峰值,如同丹尼尔卡曼说,体验产品时能够被记住的只有峰值与终值的体验,我们在智能相册的环节之中建立起与用户情感上的链结,而链结后的情感峰值,则选择在发表成本最高发表频率的文字视频中深挖,让体验情感的峰值在高频率的场景中发生获取最高的投入回馈。


5.1 过程颇折


文字视频上线后发现用户发表意愿未达预期,症结在于其过程缺少能激发用户主观意愿表达的情绪触发点。我们提出两个优化思路,

1 降低理解成本,体验对齐于常见动态发表界面。

2 支持自定义背景,用带场景暗示的背景烘托情绪氛围。对比实验后发现2既可增加文字视频的意境表达又不干扰基础操作,是为更佳方案。


文字视频的初期方案和优化方向:

Image title



5.2 策略制定


QQ团队基于对用户发表场景统计,确定以传达心情和高频发表时间点为线索,策略制定是考虑到既要与用户表达有耦合但不能具体有所指。

Image title




5.3 意境传达


背景模版设计有以下原则:

1 界限分明,背景效果不要干扰主体信息。

Image title


2 意象与认知相符,有情理之中意料之外的惊喜,引起用户好奇心。

Image title


3 表义避免太具象。抽象表达腾出更大想象空间,让用户创意不受缚于环境。

Image title


以下是全部模版效果展示。

Image title

Image title


5.4 案例回顾


经优化后文字视频的背景从纯视觉角度转变成带动用户情绪刺激发表的触发点,后续团队结合运营策略,在特殊节日或特殊事件前更新模版可以持续刺激拉升文字视频发表量,该策略的运用屡建奇效。




六 总结心得

————————

设计经验


产品体验路径中植入情感因素意义重大。在引入期唤起情感降低用户心理戒备,产生熟悉亲切感。接触期有效调动用户情绪制造情感峰值,加深印象。成熟期创造互动机会,让情感得到延伸寄托进而巩固市场地位。此过程环环相扣层层递进,在用户心理推波助澜。


Image title

好设计是能影响用户非理性,改变情绪最终影响他的行为。设计的高境界在于只影响不明说,用户不需要领会设计意图,但情绪已经被感染了,在情绪的作用下,按照设计者预定的轨迹,自然做出选择。


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

在这些大师身上,我找到了非凡创意诞生的原因

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们的文化中会将大师们捧上天,凸显他们和常人差别最大的那个部分。大师当然是有属于他们的秘诀的,可是他们的成功同样植根于他们生而为人的烟火气。从一个人的视角来解读大师,在崇敬的同时,我们也应当对自己有信心——他们已经替我们走出了一条,可供参考的道路。

创造力是我们每个人与生俱来的,我们天生就是创造者。人人都可以创造,而且大多数人都以不同方式进行着创造。毫无疑问,创造新事物时,我们是最快乐的。

不幸的是,许多人会找借口不去创造,比如:「我没有足够的创造力或天赋。」这是不对的。在重新审视简·奥斯汀(Jane Austin)、毕加索(Picasso)、爱迪生(Edison)、蒂凡尼(Tiffany)和丘吉尔(Churchill)等著名人物的经历之后,我意识到,创造力和我们常说的天赋,只是勇气和不懈努力的副产物。

每个人都是有创造力的。众生平等,人人皆可创造。个体性和独立性只是用来发掘和完善内心世界的。因此我们每个人都是有创造力的。

正如我在上文中提到的,勇气是与创造力和创新直接相关的。对此 Paul Johnson 赋予了最好的定义:

创意往往反映出巨大的勇气,尤其是当艺术家不向最终的敌人——年龄或衰老,低头的时候。

我开始探索,我想知道创造力是什么。为什么有些人能够通过他们的创造改变历史的进程?是什么引导他们创造?他们的工作背后有什么秘诀吗?为什么有的人名垂青史而另一些则不然?

最终我发现了一个残酷的事实——以创造为事业的人每天都在不知不觉中辛苦工作,而且前途未卜。正如约翰逊所写的,你必须能够战胜时间和任何可能出现的身体缺陷。比如贝多芬不得不和他的听觉缺陷作斗争;爱迪生失败了几千次才发明出最后的灯泡;瓦格纳生活贫困,经常向人要钱;艾米丽·狄金森从不顾及公众的态度,无论是鼓励或批评,始终独自一人写诗。

在我致力于研究不同性格的人的时候,最让我惊讶的是每个创作者总是在前人的基础上创作。没有人凭空创造出好作品,而这打破了我一直以来所持有的刻板印象。

所以让我们深入研读一下创造者们的经历,看看他们是如何工作的,让他们如此特别的秘密,就在其中。

毕加索:绘画第一,咖啡第二

「如果我没有足够的天赋,又有很多竞争对手,那么我将每天创作一幅画,直到让世人知道我是活着的最伟大的画家。」这无疑是毕加索踏上成为历史上最成功的艺术家的道路时,一直秉持的信条之一。

毕加索出生于西班牙的马拉加,仅有的绘画启蒙知识是由他的父亲传授的。至于其他方面,我们可以很容易地说毕加索是自学成才、自我推销,在他所居住城市的街道上接受教育的。从很小的时候起,他就一直密切关注着市场,因此他总能知道什么才是可以卖出去的。

不同于等待灵感的到来,找寻上帝赋予才华的人们,毕加索每天都在创作。他的工作原则是速度胜于准确和努力。他是我们所知道的最不安分、最具实验性的创造者之一。他做的每件事都必须尽快完成,不会对作品精雕细琢。

毕加索做过许多工作。除了绘画,他还做雕塑、面具。无论是在画布上、纸上,石头上,陶瓷上还是在金属上,他都是卓越的艺术大师。对他来说,没有任何物质障碍。他是一个绝对的实验主义者,每十年都会改变他的风格,对于颠覆从前的自己从不畏惧。

他还设计过海报、标志、广告、戏剧服装和服装。毕加索离世前留下了超过3万件作品,这是有来源的(catalogue raisonne – 1932-1978)。毕加索是一个有数量观念、强烈的职业道德和实验精神的人。

温斯顿·丘吉尔:终生写作

也许你不会想到这份名单上会出现这位政坛人物,但我这样做是有充分理由的。他是一位首相,二战后他在历史上赢得了一席之地,但他确实值得被列入名单,因为他也是一位画家和文字大师。

丘吉尔是如何开始写作的?父亲离世后,丘吉尔悲痛万分。他觉得丧失了自我,也失去了内心的平静。因此,他决定写一本完整的传记献给他的父亲。在那之后,他发现了自己对文字的热爱和激情。丘吉尔不知道什么是创造力,他只知道「努力工作」这几个字。

温斯顿日以继夜地工作。感谢上帝,他很好,只有在8小时睡眠不足的情况下才会感到疲倦。——丘吉尔的妻子 Clementine Churchill

很少有人知道丘吉尔一生中写作超过1000万字。这其中包括他的演讲稿、书籍和文章。这种写作量比任何作家写的都多。他从小就有写下所有他感兴趣或参与之事的习惯。

他不仅练就了写作技能,而且还从中赚钱。每次他去不同的国家,或者参与一场战争,他都会写相关的文章卖给报纸或期刊。他写了三本关于二战的书,共有约200万字,是关于那个时期覆盖范围最广、最有价值的资料之一。

语言是唯一不会消亡的东西。——温斯顿·丘吉尔

当他不写作、不娱乐、不与政治斗争时,他就画画。他发现画不仅可以作为爱好,而且可以成为面对困境时的避风港。因为画画的时候你要保持心无旁骛,这样便可以放松你的大脑。

他从不逃避艰苦的工作,相反,他竭尽全力地工作:议会、行政、地缘政治、写作、绘画、建造田园诗般的房屋和花园。丘吉尔自命不凡,他的创造力流淌在他的血液中。他希望自己所见的一切,都能亲自动手实现,这就是他有别于他那个时代的其他人的特质。

克里斯托巴尔·巴伦西亚加:不见天日地工作

在所有创意大师中,克里斯托巴尔·巴伦西亚加是最专注于创造美好事物的创造者。工作渗透了他生活的方方面面,他将自己全部的精力交付于工作。

作为著名品牌巴黎世家的创始人,他是怎么进入时尚圈的?三岁时他参加了一个缝纫班,他对此表现出极大的热情。在接下来的74年里,他的缝纫技术炉火纯青。在他的余生中,他每天都要做一件针线活以保持手的灵活度。他是当时唯一一个在服装设计上独当一面的设计师,他做过缝纫、剪裁、选料等一切与制衣相关的工作。他唯一不会做的事就是画画,需要助理代为完成。

他的工作量巨大,整日都待在工作室里。以至于人们一度认为「克里斯托巴尔·巴伦西亚加」是一个假名,也许并无其人。几乎没有人采访过他或是见过他,也几乎没有他的照片。他从不参加社交活动,除了和一两个老朋友相聚外,他很少出去吃饭。

这一切都使他得以专注于创作能永远流传的作品。他孜孜不倦地工作和创造。这就是为什么现在几乎没有设计师能够创造出像他在上世纪五六十年代那样的创作作品,这些作品正如同其他人所说的——那都是馆藏级的作品。

他工作非常努力。巴黎世家每个系列都有200-250个设计,所有这些都是他自己完成的,因为他几乎不信任任何助手。他甚至拒绝了年轻有为的纪梵希(Hubert de Givenchy)的帮助。

从他三岁到生命的最后几天,他每天都努力工作。在上世纪60年代最艰难的时期,他停止了工作,因为心脏病发作,大师最终离世而去。

蒂芙尼:玻璃之心

路易斯·康福特·蒂芙尼痴迷于用玻璃制作窗户和灯具,并以玻璃进行珠宝创作。他的父亲查尔斯·路易斯·蒂凡尼(Charles Lewis Tiffany)生于1812年,1837年在纽约开了一家商店,销售文具和精美的器皿。他似乎继承了他父亲的品味,把平凡与非凡融合在一起。

蒂芙尼是一位真正的创造者,他勇于尝试,乐于为自己设定不可能完成的任务。尽管他父亲是个商人,他早年还是选择了学习绘画。但从本质上讲,他也是组织者、领导者和商人,也是一个挥霍无度的人和收藏家。如果要给出一个定义,蒂芙尼是一位创造者和推动者,他的远见卓识和组织能力使这一切成为了可能。

在二十世纪初,他雇用了100多名玻璃行业的出色工人,鼓励他们试验自己的想法,并辅以化学方法,对这些想法进行进一步的研究和推动。

他利用他的珠宝工作室实验特殊的金属反应。这些金属与彩色玻璃结合在一起,形成了「宝石花瓶」。他一直在研究他在旅行或参观博物馆时挑选的古代玻璃碎片。他在寻找可以用于复刻它们的化学方法。

蒂凡尼对探索发现和实验有着一种无法言喻的渴望,这让他能够创作出如今每件价值超过100万美元的作品。他经常去不同的国家旅行,研究与玻璃有关的古代文化。他保存了旅途中的许多发现,参观博物馆都会留下详细的笔记。

重要的一点是,蒂芙尼喜欢与他人合作或从其他风格中获得灵感,但他从不抄袭。他写道:

神赐给我们的才干不是要我们模仿别人的才能,而是要我们运用自己的头脑和想象力。即使是在团队中工作,艺术家的个人风格也是通向真正美丽的道路。——Charles Lewis Tiffany

他还创造了一种表面粗糙的昂贵玻璃,之后他为其取名「熔岩」。「熔岩」的灵感来自他在维苏威火山附近发现的碎片。他对古代的研究发现,埋在灰烬中的瓷砖(如庞贝古城)经过了2000年的化学变化,产生了光泽。这个变化过程可以在工厂实现。不久,他卖的瓷砖比花瓶还多。

爱迪生:向艺术家借鉴才能

要成为一个创造者,就必须成为一个艺术家?大错特错。发明家和商人托马斯·阿尔瓦·爱迪生背后有1000多项专利。大多数发明家在现代社会发展中发挥了至关重要的作用。他们的灵感来自于解决他人需求的渴望,以及与艺术家合作。

他的灵感来源于给予人们闻所未闻的东西。例如,他发明第一台录音机的灵感来自伟大的歌手和乐器演奏家的声音。他想给他们更好的创作工具。

他在电力方面的贡献也是如此。他信任与其他创作者和艺术家的合作。他鼓励蒂芙尼将燃气灯换成电灯,这样生意会更好。后来他与蒂芙尼合作,设计了纽约第一家完全使用电灯照明的剧院,帮助许多舞者寻找新的可能性来发展自己的演艺事业。

天才是1%的灵感加上99%的汗水。——爱迪生

他的实验室看起来更像是画室,而不是科学家的工作室。有时他沉迷工作就会睡在地板上的衣服里。他的名言「天才是1%的灵感和99%的汗水」诠释了他的职业道德观。做一个创造者不是一句空话,而是一种生活方式。

我没有创造力,需要灵感?

有句话说,只有业余爱好者才需要别人给灵感,专业的创作者靠的是自己日复一日重复工作。我多么不希望这是真的,但别无他法。或者就像我的一个朋友说的:「如果你不利用各种信息,你就不可能保持灵感。」他所说的信息是指读书,看电影,听音乐,去画廊,和聪明有趣的人交谈,旅行和探索一个新的国家。这可以看作一种「消费」。一旦你「消费」了,你就必须创造并回馈世界。

创造者都是相似的吗?是,也不是。

在阅读了这些创造者的故事后,我们可以看到所有人都有一个共同点——努力工作。所有的创造者都有一个人生座右铭——不断创造。其他的部分只是他们的个性。

做一个创造者不是一个头衔,而是一种生活方式。这不是三天打鱼两天晒网的事,也不仅仅是一个爱好,这是你的生活。当然,他们能够坚持下去,也因为他们内心对于这件事情足够热爱。

我们不需要上帝般的灵感来创造非凡。真正的创造者总是在收集周遭各种各样的信息,无论是在自然中、在不同的国家、在书籍中、在电影中、在音乐中、在食物中,还是在与艺术家或其他像你这样的创造者的合作中。

同样值得注意的是,创作者在创作时通常都是以自我为中心的。他们不允许其他人越俎代庖,因为他们想确保他们的工作朝着自己认同的方向发展。而且,这是因为他们喜欢创造自己的生活,而不是让别人为他们创造生活。当然,在大多数现代环境中,在工作中以自我为中心是不现实的,也是不的。但每个人都有自己的方式。有些人是推动者,有些人是独裁者。

PS:当然还有更多伟大的创造者值得我们去写(无论男女)。这个名单仅代表个人观点。

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

页面跳转方式,如何设计更合理?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

常见的页面跳转方式有直接跳转、左右跳转、上下跳转等,再设计时需要考虑好其中的关联性,给出最符合用户心理预期的过渡方式,从而做出最合适的设计。

页面跳转在APP中属于最常见,也是最基础的一个交互细节点。

我们常见的跳转方式:直接跳转、左右跳转、上下跳转、翻转、联动;其它酷炫的效果我们看过很多,但是现实中能做到的又有几个呢?

先讲一下:视觉顺序

首先我们看一下,我们的视觉顺序「阅读顺序」是:左→右,上→下。因此延伸出目前APP最常见的两种页面跳转方式:左右跳转,上下跳转。

直接跳转

最原始、最简单的跳转方式,web端常见,在APP中出现较少,标签切换常见,这个比较简单,没什么讲的。

常用于快速开发,Android中常用。

实现难度:无;

维护成本:无。

左右跳转

最常见的跳转方式。(ios原生效果)

实现难度:简单 ;

维护成本:低;

运用场景:夫级→子级→子子级,依次类推。

常用场景:

  1. 对应功能的展开:常以导航形式的存在,如美团首页的美食、电影、住店等分流入口。
  2. 对于内容的展开:如聊天列表>聊天窗;文章列表>到文章详情。
  3. 对于活动广告的展开:banner图广告、弹窗广告等,比较常见。

这里有个细节要注意,就是我们的返回键在左上角,也就养成了用户一种习惯,左上角的键,与点击之后的效果,往往就应该是页面从右侧退出的样子,与进入时反向的效果。

这也是为什么大部分APP不会把入口按钮放在左上角的原因。

那么左上角这个位置,除了给返回键当做固有的位置外。还常常用于抽屉式导航,因为抽屉式导航的方向,与返回时的移动方向是一致的。常见抽屉式导航APP如:滴滴打车、摩拜单车等。

上下跳转

相对于左右跳转,上下跳转就比较难理解了。

实现难度:简单 ;

维护成本:低。

这种跳转方式也很常见,但是大部分人不清楚什么时候用,这里我们简单分析下。

运用场景:

1. 对当前页面创建新的条目时;

2. 独立启动的一个子内容。(如小程序:微信/支付宝等)

比如我们在微信聊天页,发起一个聊天的时候:

还有我们新添加群人员时,新建笔记本时,新建地址时等。

我们用微信聊天页面在举例:点击+号离的内容时:图片、拍照、位置、红包、收藏等,都是采用下到上的方式呈现,因为这些创建都是对当前聊天窗口一次性产生内容。(大家可以去感受一下这些细节)

下面我们看下百度的设置>地址管理>添加地址左右>左右>上下

翻转

实现难度:中等;

维护成本:低;

运用场景:完全切换内容,换到一个全新的内容集合里。

常见的有平安好医生中间的按钮,一级大姨妈APP中间的商城。

联动性

实现难度:高 ;

维护成本:高;

运用场景:元素之间从上级到下级关联性强。

如APP store 每日推荐到介绍页。类似的还有Behance APP的作品展示。国内APP很少有这种联动效果,因为一旦页面结构改变,整个效果基本无法复用。

类似于这种强联动,我们会在很多概念设计稿中看到,但是在实际的APP是很少见到的。因为开发成本/维护成本都很高。

搜索页面打开

这里强调一下搜索页面。搜索页面的进入往往有两种形式。一直是icon做入口,另一种是搜索框做入口。

icon做入口:更像是上下级关系,常用左右跳转来实现。比如:抖音。

搜索框做入口:点击就给与获取光标的感知,所已做好做简单的联动过渡效果。比如:微信、云音乐。

其它方式

关于其它方式,基本上只有极个别的APP中可以看到。

其它的方式,要结合实际的情况来考究。一定要注意关联性。比如微信新出的浮动展开效果,因为元素要浮动,为了更加贴合所以有了收缩的效果。

结语

形式上其实就是上下左右内外。考虑好之间的关联性,给出最符合用户心理预期的过渡方式,就可以帮助我们找到最合适的设计。

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

移动端表单设计准则:酒店表单重构实践

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

表单作为平台与用户联系最为紧密的一环,也是影响商业交易成功与否的重要分水岭。良好的表单设计可以给用户提供流畅自然的交易体验,保证用户购物情绪的正向增长,而混乱无序的表单则引起用户的负面情绪,影响甚至阻碍用户交易的完成,降低用户的品牌好感度和信赖度。


那么在设计过程中,需要怎样规避风险,提升表单页面的产品体验呢?下面我们将结合实际案例,从七个方面介绍表单设计中的常见注意事项。当然,这些规则都是在表单设计中的一般准则,每条准则都有例外。


undefined

01  |  单列浏览

表单承载的主要功能是向用户清楚地传达信息,保持有秩序的单列表单形式更利于用户浏览动线,它能帮助用户识别并填写内容,而多列的表单形式则会破坏用户填写规律,影响效率。

02  |  竖向排列

在表单中有多个选项以供用户选择时,将每个选项以竖向的排列方式位于每个选项下方时,更利于用户阅读浏览的习惯。

undefined


03  |  操作一致

表单填写过程中我们应当避免在整流程中出现按钮样式、颜色的变化。需要用户确认的操作行为的一致能有效减少用户在行动时的困惑和犹豫,确保用户在表单填写过程中的流畅体验,从而实现最终商业上的交易成就。

undefined




undefined


04  |  标题不可取代

虽然通过使用占位符代替标题的方式扩充了表单的填写空间,减少了视觉噪音,但是这种做法并不利于用户的短期记忆。一旦用户触发输入,占位符消失,用户可能会陷入这里该填写什么的迷茫,必须删除所有输入内容后才能再次显示标题,显然,这是违背人性的。

undefined


05  |  输入域符合预期

输入域的长度与预期输入的内容成正比,确保输入字段长度符合用户心理预期,并能在表单中能完整呈现。

undefined


06  |  不隐藏基础帮助信息

作为一个购物流程中的信息确认和采集环节,需要用户对于购买的产品有明确的认知。因此在设计过程中对于用户填写表单有基础帮助的信息应该做强调或显示设计,避免出现因为隐藏帮助信息导致的客户投诉。

undefined



undefined

07   减少二次确认

基于OTA行业特性,出行表单业务对标电商购买表单业务需要填写的信息更为冗长,层级更为复杂,为了减少用户填写过程中的心理负担,降低填写难度,我们需要对不必要的信息进行删减或合并,为用户信息输入提供便利。

以注册环节为例,在Web设计时往往会有二次确认密码的环节,但在移动端这样的操作会增加用户填写的负担,因此大部分移动端界面上我们不建议对用户的密码信息进行二次确认,转而通过使用明文显示或者优化密码消失交互的方法来改善这一环节的体验。

undefined


08  |  *号的使用

沿用通用符号习惯,在表单设计中若是对业务必填的信息,我们往往采用 * 号的形式来帮助用户区分信息优先级。但当表单中必填信息多于非必填信息时,大量 * 号的应用反而会给用户认知增加负担,使得无法快速识别哪些是必须填写的,哪些是不必须填写的。因此在表单设计中,当必填项多于非必填项时,隐藏 * 号标记,转而通过暗提示标记非必填项的形式来帮助用户识别。

undefined



undefined

09   暗提示的应用

暗提示作为辅助用户填写表单的主要方式,在设计上,需要尽可能地减少视觉噪音,确保文案言简意赅,表现形式不干扰用户。因此,对比度过深或过浅,色彩过于突出的都不适合用于暗提示的视觉表现。

在交互上,暗提示也并不是一直存在的。当光标触发表单项时,暗提示保持显示,指导用户输入。而当用户输入字段后,暗提示内容隐藏,让用户专注于已填内容。

undefined


10  |  设置默认选项

在复杂表单中,对于如证件类型、手机区号、国籍等较为通用的选项,为用户提供默认选择的交互可以有效简化操作步骤,减轻用户填写表单的负担,更快地帮助用户完成表单内容的填写。

undefined


11  |  替代输入

对于表单填写过程中可以固化选择的信息,应让用户进行选择操作以代替手动输入,尽可能地让用户减少输入成本。

如:出游人信息采集时,提供添加常用出游人选项可以帮助减少重复填写的负担;证件类型采集时提供证件类型选项可以减少用户困惑,在已有的选项中快速选择;邮箱采集时自动联想显示Email网址可以辅助用户规范文本格式,快速完成表单填写。

undefined


12  |  键盘匹配

根据表单填写类型的不同,自动匹配键盘类型。如“中文输入”呼出中文键盘,“姓名(英文)”输入呼出锁定大写的英文键盘,“手机号码”输入呼出数字键盘……免去用户切换键盘操作的步骤。

同时根据填写步骤,合理的定义键盘右下角的功能键,帮助用户实现换行/完成的操作,省去用户收起点开键盘的重复动作和表单上下填写项的切换,让填写表单的过程更为顺畅,用户思考不被打断。


13  |  按钮层级

在用户面对多个按钮的场景选择时,我们应当帮助用户预先区分出主要行动和次要行动,通过视觉语言强调主要按钮,弱化次要按钮,引导用户进行选择。


14  |  二次确认

因移动端特性,用户在填写场景较为不稳定如吃饭途中、行驶途中等,当用户花费精力填写了部分表单信息后,为了防止用户误操作而丢失已填信息的场景,需要在此时进行二次操作确认,确认用户操作意图。当然,如果用户没有对表单进行任何编辑,这样的退出操作是不需要二次确认的。

undefined



undefined

15  |  多行文本

在复杂表单中,面对填写内容过长的同类表单,用户会在预览时产生输入压力。运用字号、颜色、间距等视觉手段将相似层级的信息进行逻辑分组,帮助用户更好地区分多行文本的信息层级,便于输入。

undefined


16  |  号码组合规律

对于一些常用的号码字段,可以采用线下通用的数字组合规律帮助用户阅读和记忆,如电话号码的组合规律为 3 4 4 ,银行卡号的组合规律为 4 4 4 4 3。空格在数字呈现处的应用虽然细微,但是在长数字的阅读场景中仍能给用户带来识别便利。

undefined



undefined

17  |  选项露出

在网页端表单设计中,用户在表单填写中需要对选项进行选择时,常用的交互形式是在选择器的下拉列表中进行选项的二次点击。而在移动端设计中,触发选择器后的二次点击会增加用户的填写成本。所以在设计时,当选项少于8时,在表单中直接显示所有可选项,当选项超出过多时则在列表浮层中进行选择。


18  |  减少页面跳转

在表单填写中我们期望用户保持专注,尽量避免产生引导用户离开当前页面的填写交互,这种交互跳转很容易打断用户固有的行为轨迹。因此运用浮层、弹窗等交互来完成辅助信息的采集是我们较为推崇的交互形式。undefined



undefined

19  |  关联标记

当用户提交表单信息后,如已填写的内容有偏差,需要明确的标记有问题的数据及错误原因,帮助用户找到问题并解决问题。杜绝报错信息描述模糊,信息不关联的报错信息引发用户困惑。

undefined


20  |  实时校验

在某些业务场景中,为了帮助用户在提交信息前校正他所填写的内容,避免大面积报错场景的出现。我们可以使用实时校验的方法,在用户输入完成后进行判断及结果反馈,如登陆注册流程的验证码校验就可以运用实时校验的报错方式。

当然需要注意的是,运用实时校验的表单需在用户明确离开此项输入状态时再进行结果反馈,而非在填写过程中进行实时校验,避免出现填写时持续报错的情况。

undefined


21   密码保护

在输入密码的表单中,部分平台会在密码输入时显示暗文字段以此保护用户隐私,而鉴于前述第七条准则,移动端的密码已简化至只输入一次,暗文的显示会让用户无法确认所输密码信息。因此在需要隐私保护的场景下,我们需要完善密码交互的呈现形式,当输入时,输入位短暂显示为明文,保持1秒或者保持到下一位密码输入后再变成暗文,这样的交互改善可以确保用户在输入中明确内容,也满足了其隐私需求。

undefined


22  |  提交反馈

在用户完成整个任务环节时,提供成功或失败的反馈能让用户在枯燥的表单填写后有更强烈的情感反馈。所以在设计时,我们需要提供正向的激励夸赞用户表单填写成功,在表单没有完成时鼓励用户修改内容,重新提交,不可以负面情绪责怪用户。

undefined




今年上半年,本着提升途牛产品调性,为内容传达提效的初衷,由途牛UED组织并发起了一次针对现有关键页面升级的项目,在架构升级全量推进初期,我们优先选取了酒店表单业务作为此次设计重构的首选试验点。

表单作为一个偏理性的产品,直接影响着用户决策到产品转化的数据,在此环节,更需要降低用户成本,维持产品决策热情以实现商业价值上的成功。在酒店表单业务改版过程中,除了应用上述七方面的设计准则帮助提升用户体验,我们也结合了酒店现有问题和产品特性进行了更为精细化的设计重构。




整合信息框架

体制让步

对用户来说,途牛是一个整体的产品,所有表单的基础体验应该是一致的。以往,基于企业平台的发展,酒店细分的国内酒店和国际酒店两个业务相对独立,虽然同样隶属于下单环节,但是业务迭代进程及侧重方向的不同导致表单前台呈现差异较大。

借助途牛整体关键页面升级的项目,在此次酒店业务重构初期,协同两个业务的产品、设计、研发我们共同整合资源,解决历史遗留体验问题,为国内、国际酒店表单业务进行整体体验的统一和提升助力。另一方面,UED也通过酒店业务的试点思路,将基础表单框架进行模块细分,逐步影响并推广至全站表单业务升级。

undefined


框架构建

回顾现有酒店表单业务的问题,主要体现在内容层级模糊,类型样式混乱上。这些随着每一次迭代需求增加而新增的表单项,只是基于业务类型进行了单模块的设计,而对于用户来说,差异化的表单项样式无形中增加了填写时信息获取的成本。

基于人体本身的生理构造,我们在获取文本信息时,并不会逐字阅读,往往采用“扫视”的方式识别段落轮廓从而获取信息,规律性的排列方式也会帮助持续这种“扫视”的节奏,提升信息转化效率。

因此在设计上我们遵循相似信息一致性的原则,简化重复冗余的视觉噪音,将每个单元表单项模型遵循“上类型+下内容”的形式帮助用户快速对所需填写的表单类型建立心理预期。在大量相同的填写区域,统一左侧内容标题对齐方式,并通过字色、字重等形式确保未触发时内容标题为主,暗提示为辅,填写后填写内容为主,内容标题为辅的视觉表达,从而在表单的不同阶段仍旧保证了用户对于主次信息的识别体验。

undefined


品牌信息传达

为了减弱表单填写页冰冷感,在框架信息整合的基础上,我们此次改版也将品牌解构,用色彩的形式融入表单页面设计,将品牌功能化,辅助产品以深化品牌用户心中形成立体感知。

当然品牌功能化的融入也需要有所限制,此次我们主要从氛围、控件、操作、提示这四个方面展开,在不影响表单主要信息呈现的基础上,遵循适度、适量两个原则。

undefined




内容层级排序


用户吸引

回顾整个购买流程,填写订单业务承担着维系用户在产品详情所产生的内容吸引到内容转化的责任,而如何在枯燥的酒店表单中维稳甚至加固用户的内容吸引?为此,我们参照了《Actionable Gamification》关于人性八大核心驱动力中的“拥有感&占有欲”和“失去&避免”这两条来帮助我们。

undefined

结合对用户使用场景的需求分析,我们将信息在用户心中的关注度进行了重新排序,首屏弱化了用户已经在详情页明确的酒店名称,转而对用户需在此环节明确的房型、入住时间、离店时间等内容进行了强化和整合,明确产品归属。同时为了加固用户的内容吸引,我们前置了酒店“超值价”、“可免费取消”等信息来解除用户对于产品价格和沉没成本的疑虑,从而正向地激励用户完成后续的表单填写。

undefined


细分模块

除了对首屏信息的排序重置外,对于需要用户填写的每个单元模块我们也做出了一些调整。

如取消险模块,此前为避免客诉,将所有需要用户确认和查看的信息都进行了高亮提示和行动引导。这些信息虽然是我们需要用户知道的,但并不一定是用户在填写时想要详细了解的,过多的信息干扰反而影响了有用信息识别,也降低了用户填写表单的效率。因此新版表单重构时我们将协议信息整合至末尾统一确认,同时对文字、icon进行视觉减负,统一弱化辅助信息呈现,转而强调用户需要确认的取消险金额和投保人模块。

undefined

从上图国际酒店改版前后的方案进行对比可见,每个细分模块都有着或多或少细节的调整,当然还有没有展现的辅助信息交互浮层框架的统一。这些信息呈现的形态与交互的逻辑也都遵循着前文“保持秩序、描述清晰、化繁为简、帮助用户、信息分组、减少跳转、及时反馈”这七大原则,每一个细节都可以展开来细细剖析,这里就不多加赘述了。




结语

蚍蜉亦可撼树,在产品升级的过程中,用户体验的提升往往需要依靠像表单这样一个个微小的业务作为突破点,从而裂变反哺至全局。此次酒店表单重构项目从产品角度来看,功能上并没有改变,而通过代入用户场景,用户感知,用户行为习惯等方面进行细节的体验升级。后续我们还将进行更加深入地探索与迭代,将体验升级持续扩散至其他业务,为每一位途牛用户带来更便捷、更自然的出行体验。

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

上万字干货!超全面的网页设计规范:文字篇

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为三步:

  1. 系统全面地了解文字的基础知识、显示方式、影响因素及当前网页设计中适合的文字系统;
  2. 梳理出自己团队所有产品文字使用情况;
  3. 综合第1步、第2步总结出适合团队业务的文字系统。

字符屏幕显示原理

1. 字符

字符是指计算机中使用的字母、数字、标点符号等等。

计算机最初发明出来是用来解决数字计算问题的。

后来发现,计算机还可以做更多的事,例如文本处理。其实计算机挺笨的,它读到的所有字符都是由1和0组成的字符串,因为计算机电路只有两种状态,「开」和「闭」,对应「1」和「0」。计算机也只可以直接存储和处理二进制数字。

2. 二进制

「二进制」是数字世界里的基本规则。

下面这些不同格式的文件,在本质上都是一串由1和0组成的代码,要了解这些文件首先要了解二进制。人有十根手指头,但计算机电路只有「开」和「闭」两种状态,所以满十进一位的计数方式更适合人类计算,而满二进一的二进制更适合计算机。计算机只需要1和0这两个数字就可以传递一切信息。

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以图像为例,我们用电脑或手机看到的图像都是在某个角落里存储着下面这样的一串数据。开头的16位翻译过来就是 BMP文件开始的标识。

BMP文件标识后面的数字就是图像的各项基本信息。

△ 图像的各项基本信息

△ 颜色深度

最开始的24位,都是1,像素显示为红、绿、蓝三种颜色,相加后显示为白色。

接下来的24位,前8位是1,后面都是0,像素显示为红色。

再后面24位的前16位都是1,最后8位为0,像素显示红、绿两色,相加后显示为黄色。

根据这样的规则整个55×55的格子铺满颜色就得到一张完整的图片。所以一个 BMP图像文件中的1和0就在逐个记录图像中每一个像素点的颜色。

△ 二进制图片生成方式

△ 色光三原色和颜料三原色区别

下面所有文件的显示都和图像显示例子一样,文件中的1和0按照人们事先设计好的规则排列好,只需要找到正确的打开方式按照特定的规则来解读这些数据,我们就可以获得其中的信息。我们怎么才能知道某一个文件的1和0究竟是按什么规则排列的?我们又要用怎样的方式来解读?这就用到了扩展名,在文件的名字后面加几个特定的字符,就可以帮助系统辨别出文件的类型,从而提示电脑去按照某种特定的规则来正确解读其中的信息。

△ MP4格式扩展名

△ MP3格式扩展名

△ JPG格式扩展名

△ TXT格式扩展名

△ AVI格式扩展名

更多其他文件拓展名:

3. 字符编码

为了在计算机上显示字符,必须将字符转换成二进制数字。所以就有了统一、标准字符转换规则,即字符编码。字符编码是给所有的汉字定一个的数字编号,并用1和0来表示这个数字编号。

文字的一个字符对应一个编码(码点),而编码对应字符集里的一个「字」,字符通过字符集与「字」相连。像图中所示Unicode、GB 2312、Shift_JIS 都是字符集,其主要作用是为每一个「字」分配一个编码。

△ 文本编码流程

字符集里的每一个编码对应的是一个「字」而不是「字形」,也就是一个「字」在不同的地区或标准中可能有不同的「字形」,但字符集中只能对其分配一个编码(除非相差过大,比如简化字),要显示其不同的「字形」要通过使用为不同地区或标准设计的字体来实现。

△ 字异形(左简体中文,右日文)

4. 编码发展史

ASCII

ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)出现在上个世纪60年代的美国,ASCII 一共定义了128个字符,包括英文字母 A-Z,a-z,0-9,一些标点符号和控制符号。ASCII 采用的编码模型是简单字符集,在英语系国家里 ASCII 标准很完美。但是世界上有好几千种语言,其他语言系的国家想使用计算机,ASCII 就远远不够了。所以编码进入了混乱的时代。

△ ASCII编码

混乱时代

计算机的一个字节是8位,可以表示256个字符。ASCII 使用了7位,所以人们决定把剩余的1位也利用起来。人们对于 ASCII 已规定好的128个字符没有异议,但是不同语系的人对于其他字符的需求不一样,所以对于剩下的128个字符的扩展千奇百怪。而且在亚洲语言系统中有更多的字符。于是就又产生了各种多字节表示一个字符的方法,每个语系都有自己特定的编码页(code pages),这就使整个局面更加混乱不堪。这时 Unicode 出现了。

Unicode

Unicode 就是给计算机中所有的字符各自分配一个代号。Unicode 可以认为是字符的编号,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,Unicode 字符集和编码方式解决了跨语言、跨平台的交流问题。但在 Unicode 里每一个字符都是用4个字节来编码,原本英文字母仅需1个字节编码,中文需2~3个字节编码即可,这对于存储或传输资源而言是很不划算的。

UTF-8

UTF-8 基于 Unicode 编码的一种节约字节的编码,是一种可变长度字符编码方式。在UTF-8编码中,英文字母是一个字节,中文(非生僻字)是2~3个字节。可以认为, UTF-8 是对 Unicode 的一种压缩算法。UTF-8 等编码方式有效的节约了存储空间和传输带宽,因而受到了极大的推广应用。并且 UTF-8 兼容 ASCII 字符集。

UTF:Unicode Transformation Format

5. 中文编码类型

△ 中文编码类型

文字基础知识

1. 文字

「文字」是信息交流的工具,可读性、易读性至关重要。在网页设计中文字使用需要考虑几个要素:首先考虑字体,其次是字重、字号、行高、字间距、行间距、段间距等。

△ 字体、字重

△ 字间距、字号、行高

△ 行间距、段间距

2. 字体

「字体」是文字的外在形式特征,不同的字体有不同的性格。

字体种类

综合中文、英文都适用的广义分类。

衬线、无衬线

△ 衬线和无衬线差异1

△ 衬线和无衬线差异2

字体 – 中文

字体构成:

△ 笔画

中宫,是指等分成九个小方格最中间的那一格。

△ 中宫

△ 中宫和字体关系

△ 中宫紧凑、中宫松散

间架结构,汉字种类众多,笔划不等,空间排布极为重要。字体的间架结构可分为两类:单体字、合体字。

△ 单体字 间架结构

△ 合体字 间架结构

汉字字形众多,有些字形会产生视觉大小变化,顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调,让他们看起来更加均衡、等大、视觉更完整。

△ 调整前

△ 调整后

字形调整实例:

衬线、无衬线字形演变:

△ 衬线 字形演变

△ 无衬线 字形演变

字体对比:

微软雅黑、方正兰亭黑简体、思源黑体、苹方-简,笔画宽度均匀,横平竖直。同一字号,微软雅黑最粗,小字号时阅读会较为吃力。方正兰亭黑从微软雅黑派衍生出来,可以更好地适应其他应用场合。

黑体、华文黑体、冬青黑体笔画末端宽度不同。

字体 – 英文

「字谷」概念来自西文字母设计,字谷指字母中部分或完全封闭的空间,即字母当中留白部分。

英文的字体结构是由4条平行线组成,有时候是5条,但是一般大写线会忽略。「基线」在西文中是标准,单个字母的所有立脚点都是在这条线上(除了 g、j、p、y)。英文文字结构多种多样,4条平行线的位置也会发生改变。

升部:上缘线和主线之间的内容。

降部:下缘线和基线之间的内容。

字体对比:Helvetica Neue、Arial、DIN

Helvetica Neue:中性,无衬线,现代主义风格字体。字体末端严格保持横平竖直,性格严谨、保守,没有任何的修饰,适合不同分辨率的显示器。该字体是 Helvetica 字体的升级版本,拥有更多的字重,更易于不同场合的应用。字形则相对偏胖,笔画更清晰,而且小字号的情况下可读性也很高。

Arial:Arial 是一套随同多套微软应用软件所分发,无衬线。该字体比例及字重和 Helvetica 极相似,其实是 Monotype Grotesque 系列的衍变。在字体及字距上都做了一些细微的调整和变动,以增加它在电脑屏幕的不同分辨率的可读性。

DIN:字形瘦长,无衬线,适合显示比较长的数字,但是小字号的情况下识别度较低。DIN 字体在德国有着悠久历史,是交通标志、路牌、门牌和车牌的标准字体。虽然曾经是德国纳粹使用的字体,但是经过设计和重新升级。DIN 在杂志、海报以及其他各种设计领域都被广泛地使用。

Helvetica Neue、Arial、DIN 数字对比:

3. 字重

「字重」是同一种字体的不同字形粗细,即字体重量。字重的划分根据不同字体厂商各有不同,不同的字重称呼也可以不一样,常见的划分如下:

在排版中,一种字体会在标题、正文、说明注释等不同内容下使用,单一的字重不能很好适应排版需求,于是衍生出了同一个字体的不同字重。

4. 字号

「字号」是字体的高度,不同平台字号规范不同。

在界面设计中,文字字号决定了信息层次和权重。首先要设定基准字号(最小字号),然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、14px、16px等。

字号也受阅读距离影响,眼睛到屏幕距离40~70cm,为较适合的阅读距离。

Ant Design 定义的电脑显示器阅读距离(50 cm)从原先的12上升至14,以保证在多数常用显示器上的用户阅读效率最佳。

5. 行高

「行高」可以理解为一个包裹在字体外面的无形的盒子。字号和行高决定着一套字体系统的动态与秩序之美。

西文:西文基本行高是字号的1.2倍左右,字体有上伸部(ascender)和下延部(descender)可来创造行间空隙。

中文:中文因为字符密实且高度一致,所以一般行高需要更大,根据不同人群的特点(儿童、年轻人、老年人)以及使用环境,可达到1.5~2倍甚至更大。

Ant Design 受到5音阶以及自然律的启发定义了10个不同字号以及与之相对应的行高。

6. 字间距

「字间距」是指一组字母之间相互间隔的距离,受字偶距和字体影响。

字偶距:是指两个字母(或其他字符,比如数字,标点符号等)之间的空白。不同的字母有不同的外形,所以字体使用相等的字间距是不协调的。所以需要调整字偶距来提升可读性。

按字间距可分类为:比例字体(Proportional)和等宽字体(Monospaced)。

比例字体:根据字符外形特点设置不同字距的字体,这种字体外形协调,可读性好。

等宽字体:每个字符设置相同字距的字体,其优点是可以很好的控制排版对齐。

7. 行间距

行间距(line spacing / leading):行与行之间的距离,作为一段文本中的留白,行间距让字与字之间有了可呼吸的空间,行间距对文章的易读性有很大影响。

排版推荐使用行间距1.2~2倍。

如何设定行间距,如何规范行间距

行间距由行高决定,为了确保可读性增加行间距,就需要增加行高。举个例子:字号12,行高设定20,那么行间距=「(行高-字号)÷2」×2,除2又乘2,我就简单的简化成行间距 = 行高 – 字号,那么行间距就是20-12=8,并且可以将这个数值固定下来,重复使用。

注:至于为什么是20,因为最初一个字节用8个二进制位来表示,所以现在的很多网页设计中常用到8。12+8=20,参考 Ant Design,网上有很多设计师总结的行间距计算方法,对于一个数学不好的我来说,参考已有总结和经验得出的数值,固定这个数值重复使用,这样最简单。

8. 段间距

段间距(paragraphs spacing):段落与段落之间的距离,可保持页面节奏,与字体、行高相互关联。为保证文章易读性,正文段间距,可以简单地取一个空行(也就是一个行高),这是比较常规也比较合适的做法。举个例子:字号12,行高设定20,段间距 = 行高 + 行间距。

小结

要设置「有节奏感的文本内容」就要遵循这些规则:段间距大于行高,行高大于行间距,行间距大于字间距。

字体选用基础原则

1. 网页文字显示方式

网页设计内容一般都是通过电脑各种浏览器来承载显示的,浏览器显示字体是直接读取用户操作系统里的字体。

2. 字体选用原则

字体是界面设计中最基本的构成之一,科学的字体系统:始终保证信息具有优秀的易读可读性,提升用户的阅读体验及工作效率。

  • 原则一:字体优先使用各操作系统默认的字体。
  • 原则二:有版权、笔画严谨、清晰可读、经典。

3. 操作系统

下图数据来源:世界互联网市场份额统计网站 Net MarketShare。

△ 操作系统市场占有率 TOP10

各操作系统默认字体:

4. 浏览器

电脑浏览器直接读取用户操作系统里的字体,不同浏览器对文字的渲染方式不同,因此了解市场浏览器使用情况很有必要。

下图数据来源:世界互联网市场份额统计网站 Net MarketShare

5. 字体版权

除了操作系统默认字体,其次需要优先选择使用的就是已购版权字体,如果没有已购买的字体,可考虑一些免费字体,非免费字体使用时需谨慎。

△ 公司常购版权字体

文字规范

1. 字体规范

字体使用三原则

体系化:在同一个系统UI设计中先建立体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做统一的规划,再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性,提高字体应用的性价比,减少不必要的样式浪费。

重复:重复设计中出现的一个或多个内容。任何事情都可以重复。字体、字重字号、颜色、一条线、各种形状(如圆形、正方形或三角形)等。字体使用最好不要超过3种,一般同一个系统UI设计内容的字体数量建议2种即可,中文一种、英文数字一种。且字体样式上也遵循重复原则,避免毫无意义的使用大量字号、颜色、字重、行高等。

韵律:在需要拉开差距的时候可以尝试选择对比大的字体字号,令字号之间产生一种微妙的韵律感。为保证良好的阅读体验,每行保持适当的字符数量。每行上拥有适当的字符数量是文本可读性的关键。如果每行文字太短,视线必须反复折回来,打破读者的节奏。如果一行文字太长,用户的眼睛将很难专注于文本。英文无特殊要求避免使用全大写字符,因为会大大延缓用户扫描和阅读的速度。

现有产品字体统计

字体规范

综合考虑不同操作系统选用最佳字体体验。

代码声明:

  • Font-family:Helvetica Neue, Helvetica, Arial, 「苹方-简」, 「Microsoft YaHei」, 「微软雅黑」, sans-serif。
  • 英文字体:首先查找Helvetica Neue(Mac),然后查找Helvetica(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
  • 中文字体:选用平台默认中文字体 苹方-简(Mac),微软雅黑(Win)。
2. 字重规范

一般情况下会选用「一粗一细」两种字重。

粗体:在视觉面积上较重,笔画加粗,字腔(笔画间空间)小,突出显示,产生强调作用。常用于标题和标语。

细体:在视觉面积上较轻,笔画轻细,字腔(笔画间空间)大,结构疏朗清透,阅读时不会让读者产生压迫感。常用于正文和说明。

中文、英文推荐使用字重:

3. 字号规范

现有产品字号统计

字号规范

4. 行高规范

参考:Ant Design 受到5音阶以及自然规律启发定义了10个不同字号以及与之相对应的行高。

5. 字间距规范

使用比例字体,根据字符外形特点设置不同字距的字体,这种字体外形协调,可读性好。

6. 行间距规范

颜色规范

1. Ant Design 两大色彩体系

Ant Design 两大色彩体系:系统级、产品级。

系统级色彩体系

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。

  • 基础色板:12个主色(薄暮/火山/日暮/金盏花/日出/青柠/极光绿/明青/拂晓蓝/极客蓝/酱紫/法式洋红)以及衍生色共120个颜色。
  • 中性色板:黑、白、灰,从白到黑共10个颜色。
  • 数据可视化色板:敬请期待。

产品级色彩体系

产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

  • 品牌色应用:品牌色取自基础色板的蓝色#1890FF,应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。
  • 中性色:中性色主要应用在文字部分,此外背景、边框、分割线等场景中也非常常见。
  • 功能色:功能色代表着明确的信息及状态,如成功、出错、失败、提醒、链接等。
2. 系统级 中性色

中性色包含了黑、白、灰。在网页设计中被大量使用,合理的选择中性色能够令页面信息具备良好的主次关系,助力阅读体验。中性色板一共包含了从白到黑的10个颜色。

3. 产品级 中性色

Ant Design 的中性色主要应用在文字、背景、边框、分割线等场景中。产品中性色的定义需要考虑深色浅色背景的差异,同时结合 WCAG 2.0标准。中性色在落地的时候是按照「透明度」的方式实现。

VIP大数据用户体验部 的中性色也是主要应用在界面的文字、背景、边框、分割线等场景中。考虑到深浅色背景的差异,中性色根据设计需求在落地的时候可按照色值和透明度两种方式实现,两种方式优先使用色值方式,尽量避免两者混搭使用。

4. 产品级 功能色

功能色代表了明确的信息以及状态,比如成功、警告、失败、提醒、链接等。

功能色的选取需要遵守用户对色彩的基本认知。在一套产品体系下,功能色尽量保持一致,不要有过多的自定义干扰用户的认知体验。

文案

文案内容来源于 Ant Design,一文一字之间可研究琢磨的空间还很大。

分享一个感触很深的例子,里面有一个专业用语「阈yù值」和「阀fá值」,这两个字一开始我看了很久才看出来区别,查资料了解到,其实「阀fá值」在专业行业里是一个错别字,是一个错误的用词,其正确用法是「阈值」是所属行业认可通用词。「阈yù值」又叫临界值,是指一个效应能够产生的值或最高值。

所以精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,在使用和定义文案时要注意以下几点:

  • 从用户角度出发;
  • 表述一致;
  • 重要的信息放在显著位置;
  • 专业、精准、完整;
  • 精简、友好、正面。

在有限的空间内将重要的信息放在最前面,让用户第一眼看到最重要的内容。(或通过高亮、留白等方式突出重要信息)。

结语

因为硬件软件一直在变化,设计规范和内容也要定时更新,规范是为了在繁多复杂业务中寻求一种平衡,帮助各团队更的完成任务,有些内容适合强制规定,有些内容适合规范一个范围,有些内容适合制定一种规律方法……当出现特殊情况时需要重新审视和不断完善灵活使用。

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

 

为人设计,请说人话

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

UXRen

打造有价值产品的首要规则是,它应该对某些人有真正的使用价值。也就是说,一个真实的人(或许多个人)会因为你的工作而解决了某些问题或实现了某些需求。

这个道理是显而易见的,但是,如果你去听一听这些产品设计们的日常用语,就会发现,在日常生活中,我们不常这样说。

反而,在语言交流中,设计师经常会“走捷径”。有时会直接使用行业语言或专家术语来提高表达度,但大多数情况都是为了避免废话。

举例来讲:

  • 我们要如何增加用户对这种功能的使用?
  • 为什么这两方面看起来不够统一?
  • 这里的点击率这么低,可能我们太过强调了。
  • 我感觉这里干扰信息太多了,要怎么解决这个问题?
  • 这个设计需要更多“呼吸空间(留白)”。
  • 我们应该将这点设计地更简洁一些。
  • 这一指标需要提升,现在的曲线走向并不理想。

想象一下,当用户听这些话时,他们能相信我们的最终目的是为他们创造价值吗?

当然,我们在使用语言捷径时,其实是在把我们脑海中的各个点连接起来,这种基于对内容的理解,在脑海中将一个概念与另一个概念联系起来的思考方式——就像是火车在有序的系统中飞驰而过,直到停留在人们期待的站台上一样。

但在实际交流中,有可能出现两种完全预料不到的结果:

第一种情况是,当与一个认知和你不太一致的人交流时,你认为重要的事情,对方有可能完不理解为什么这样。

比如说,作为一个设计师,当我说“为什么这些东西不一致”的时候,我自己的逻辑是这样的:

不够一致=> 这些东西虽然看起来很像,但当点击的时候,可能有人会选A,也有人会选B=>这就会使用户困惑,并且影响他们从我们构建的内容中获得最大的价值。

其他精通设计语言的人,一般而言都会跟我一样的思考问题。比如,让东西“简洁”其实是指让它专注于最重要的点,以便人们能一眼就知道如何使用它。让界面“可以呼吸”则是指让人们在阅读或者浏览时能更轻松愉悦。

但如果你并没有建立这些认知连接,你可能会不解:一致性、简洁性和可呼吸空间为什么这么重要呢,这些价值观看起来是不是有点随意?而且这些疑惑有可能是对的,为了一致性而保持一致也许并没有必要。如果这世上没有人会对两个看起来相似但反应不同的事物感到困惑的话(假设开发成本投入不算很大的话),那么这不会是一个问题。

许多工程师和产品经理跟我讲过,关于“一致性”的讨论经常意见很难统一,但当我说“目标是让用户感觉没有困惑”时,争议就不存在了。

使用“语言捷径”的第二个意想不到的后果是,我们有可能会忽视真正的最终目标。你看待问题的方式和角度会更多地从公司出发而不是用户真正面临的问题。

举个例子,我们要如何提高这一功能的使用率?这可能并不是任何一个你的用户会关心的问题,在讨论这一问题的时候,你有可能会开始从公司角度思考解决方案,比如让功能更显眼,不断提醒用户这一功能的存在等。

但其实这些做法只有在强调的功能的确很重要的时候,才会起作用。但如果这一功能的使用率本来就低,那么更有可能说明这一功能对用户而言没那么重要。如果你没有真正以人为中心来思考问题,很难发现这一点。

归根结底,虽然语言只是一个小的方面,但我相信它是非常重要的。多关注一点在工作时使用的谈话方式,如果你是为人设计的,那么请用人们更熟悉的语言。

举例来讲:

  • 我们要如何增加用户对这个功能的使用?=> 是什么让这个功能对人们更有价值?
  • 为什么这两方面不够统一?=> 让我们确保,用户不会因为这两个看起来相似但有不一样功能的东西而感到困惑。
  • 点击率真的很低,可能是因为强调得不够。=> 人们可能会意识不到这个功能的存在,因为这实在太容易被忽略了。
  • 我们发现很多用户流失,我们该怎么办?=> 那些试用过我们产品的用户不会再回购,为什么会这样呢?
  • 这个设计需要更多的呼吸空间。=> 用户阅读浏览信息的体验应该更轻松、愉悦。
  • 我们应该将这点设计地更简洁一些。=> 用户应该能在第一眼就注意到最重要的信息,并知道他们应该做什么。不该用过多的选择给用户压力。
  • 这一指标需要提升,现在的曲线看起来并不理想。=> 我们的产品还没能让用户觉得足够有用,从而进一步回购,所以我们应该提升我们所提供的价值。
  • 蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档