首页

想要为元宇宙做设计,这些可以帮到你

纯纯

人类与其他物种最显著的不同点之一是人类拥有与他人沟通和交流的能力。在整个人类社会的发展史中,沟通和交流行为需要双方处在同一个物理空间中。但进入21世纪,虚拟空间的出现让我们社交方式正在发生翻天覆地的变化,它已经成为我们每天生活的一部分,对设计师而言,虚拟空间设计仍是一个全新的、亟待探索的领域,我们有很多事可以做。

你或许听说过元宇宙这一新兴概念,它是一个增强的、或者说是一个完全虚拟的空间,我们需要使用VR头戴设备和数字形象才能进入。在这个有社交距离的时代,元宇宙可以让我们感受到更加紧密的社交关系:不论我们相隔多远,我们都可以看到和感受到对方。包括META(前身为Facebook)在内的很多商业巨头正在入局元宇宙,在他们洞察到的的商业机会上投资数十亿美金,这些投资在未来将为大量的元宇宙设计创造机会。

考虑到这一点,这篇文章主要描述关于元宇宙设计的一切:包括元宇宙的概念、设计元宇宙的技术,以及设计元宇宙的工具。

一、什么是元宇宙?

元宇宙一词首次出现在Neal Stephenson于1992创作的科幻小说《雪崩》中,讲述了主人公在被称为“元宇宙”的虚拟空间和现实空间中来回穿梭旅行。斯皮尔伯格的电影《头号玩家》也描绘了一个在不久的将来会出现的类似元宇宙的概念,在电影中,主角生活在类似于虚拟现实中,与其他玩家一起在元宇宙世界中探索。



《头号玩家》

虽然最初元宇宙可能起源于科幻小说,但它无法被单一的定义,它更像是创建一个沉浸式虚拟空间的想法,人们可以在其中自然地互动。你可以想象一个充满数字形象的 3D 世界,它能提供全方位的数字体验。

事实上,元宇宙并不是一个新兴的概念,早在2000年,一款名为“第二人生”的平台就已经拥有了许多在我们今天看来与元宇宙有关的功能。作为一个用户,你可以在“第二世界”中完成与现实世界中相同的事情,但它与现在我们所说的元宇宙有一个关键区别——“第二人生”并不是一个必须要借助VR/AR设备体验的互动世界,最主要的原因是当时的 AR/VR 设备还无法创造沉浸式的交互体验。

从2022年开始,我们逐渐意识到,AR和VR才是组成元宇宙的关键元素,因为它们可以创造更加真实的虚拟体验(并且我们已经拥有可以使其实现的技术)。只要用户戴上头戴装置,他们就能立刻进入一个完全不同的世界。尽管用户周围的所有物体都是虚拟的,但它们对用户来说是真实自然的。

下面是一些日常交互行为如何在元宇宙中应用的示例:

工作

办公室这个场景其实可以自然的进化成元宇宙,因为现在流行的混合办公模式(一部分员工在实体办公室办公,一部分员工远程办公)非常适合在元宇宙中实现。无论人们住在哪里,他们都可以作为一个团队一起工作,因为元宇宙给了他们一种共享物理空间的感觉。Oculus 的 Horizon WorkRoom就是一个很好的例子。

培训课程

元宇宙可以成为学习的绝佳场所,它可以让学生与老师或教练在元宇宙中进行实时互动,就像在现实中上课一样真实自然,你甚至可以认为他们是同处于一个空间中的。

游戏

元宇宙很可能会首先在游戏行业中脱颖而出,自然而然地继承许多游戏设计的许多属性。比如元宇宙里的内容可能会由用户生成,并且元宇宙鼓励用户长期参与。


二、设计师如何为元宇宙进行设计?


从设计师的视角来看,元宇宙是拥有许多可交互的服务的巨大平台,用户可以在其中完全自主的选择他们想要的服务。进入元宇宙需要用户创建数字形象,它不仅仅是用户名和图片,更像是用户真实形象的数字孪生,用来与虚拟世界中的任何对象进行交互。就像真人一样,数字形象有一个身份来帮助用户进行访问。



Oculus Quest来创建属于你自己的形象

元宇宙有很大概率成为Web3.0的关键元素,这是基于区块链的新一代更加民主化的互联网版本。产品设计师将专注于创建 3D 空间,这些空间可以是现有物理场所(即家庭、办公室、俱乐部),也可以是一个全新的世界(空间站、卡通世界等),但无论是什么样的虚拟空间,它都应该让用户感到舒适。



虚拟办公空间. 图片取自Meta.

为元宇宙设计意味着设计一个完全沉浸的世界,设计师需要更全面更综合的能力。

下面列举了设计师在设计元宇宙时需要特别关注的几个领域:

1.可用性 

可用性是优秀设计的基本属性,创造一个易用的元宇宙体验是非常巨大的挑战,因为许多关键的设计因素都会对用户产生消极影响,比如晕动病(motion sickness):用户长期佩戴 VR设备所带来的头晕、恶心等症状,设计师在设计元宇宙的体验时就应该想到这一点,并想办法进行优化。

元宇宙设计目前仍旧处于早期阶段,这提供了从一开始就构建易用性体验的绝佳机会。设计师不应该只是在已有的经验基础上进行适配,而应该找到新的、更舒适的方法来帮助用户长时间停留在虚拟空间中。



技术造成的晕动病。图片来自Harmony.

2.元宇宙中的内容 

互联网时代的用户习惯浏览网站和应用程序来获取内容,那么元宇宙中,用户会期待什么样的内容呢?答案很有趣:和现在他们每天正在获取的内容一样就可以了。在元宇宙世界中,用户会选择他们熟悉的内容进行互动,比如文章、视频、音乐、电影等等。但他们消费这些内容的方式可能不同,比如元宇宙中用户无需购买大屏幕电视即可观看电影,他们可以依靠他们的头戴设备。

从设计的视角来看,在元宇宙中内容以最适合的形式展示给用户这一点尤为重要,但目前还没有简单且正确方法可以实现这一目标,因此设计师必须尝试各种内容形式,才能找到适合在元宇宙展示内容的形式。

3.数字商品 

元宇宙是一个拥有数字商品的数字世界。数字商品有它的局限性,你不能把它们带到物理世界中去,但它们也拥有巨大的优势——你在元宇宙中购买的数字商品可以以不同的方式在不同的环境中使用。例如,你可以购买一顶棒球帽,在你最喜欢的游戏和办公室中佩戴它,使其成为你个人风格的重要组成部分。当然,这个功能目前只是一个构想,需要那些在元宇宙运营的公司愿意支持数字商品在不同场景下的切换时才有可能实现。

4.去中心化的支付系统 

去中心化支付是元宇宙体验的重要一环。在虚拟空间中用加密货币支付数字商品比用真钱支付要方便得多。加密货币可以在用户加入的所有不同虚拟世界中发挥作用,在今天,一些虚拟世界也证明了这种商业模式的可持续性。Decentraland就是一个很好的例子,它是一个 3D 虚拟世界平台,提供自己专有的货币,名为 Mana。

5.为增强现实和虚拟现实设计 

从技术角度来看,AR 和 VR 设备的质量在未来一定会大幅提升,它们是用户进入元宇宙的硬件基础。在过去,AR技术被认为是迈向虚拟世界的第一步,但随着技术不断进步,我们逐渐发现虚拟世界的真正力量将通过 VR 展现。可以预见的是 VR 技术在未来会更加吸引用户,因为它可以创造一种逼真的感觉,一种让用户沉浸在交互中的体验。

以下几个方面值得在设计时重点关注:

环境理解

理解物理环境中的用户。景深和透视是物理环境的两大特征,因此,VR 设备中的传感器将能够映射用户周围的世界,以便设计师可以在创造沉浸虚拟世界的同时保证用户的安全。

真实的面部表情设计

众所周知,人类之间的互动很多都是不依赖语言的,面部表情可以帮助人们传达感受,因此,数字形象要像真实的人与人交互一样传达人类情感。

VR手势设计标准化(头部、手部和身体移动)

设计标准化将会制定一些通用交互模型,这样当设计师为元宇宙制作产品时,用户将更轻松地学习如何使用它。

声音交互

以声音为基础的交互很可能成为虚拟世界中的一个重要组成部分。对用户来说,在私密环境中用语音进行交互要比在公开场合更加舒适。

6.隐私保护 

在元宇宙中,侵犯在线隐私的行为会让用户感到被冒犯,所以从元宇宙设计第一天开始,隐私、安全和数据保护就应该是重要的组成部分。

不仅如此,防止网络霸凌也应是元宇宙设计中不能忽视的一部分,用户应该有自由决定他们在何时想和谁在一起的权利(或一个人独处,或去公司上班),并将那些对他们产生负面影响的人从他们的社交圈中移除。产品设计师需要与数据安全专家以及行为心理学家密切合作,以创建更安全和人性化的服务。

7.更少的干扰性广告 

谈到元宇宙,或许我们脑中会想到一些基于广告曝光的商业模式,因为在元宇宙中植入广告将会是一件收入颇丰的生意,然而事实上,将广告植入虚拟世界需要谨慎、谨慎再谨慎。

想象一下,在你未来生活的元宇宙中,一些公司为了能更有针对性的为你提供服务,会跟踪你并记录下你的一举一动。这是一件让人非常恐惧的事,虽然元宇宙的创建者可能并不会这么做,但我们必须意识到这样做的风险非常高,特别对于那些把广告曝光作为商业模式重点一环的商业巨头来说(比如Meta),需要非常严肃的去思考是否可以接受过度广告植入带来的风险。


三、元宇宙设计工具

这里列举了5个设计工具,对于想要设计元宇宙的设计师来说,这些工具都应该派上用场。

1. 故事板 

故事板是来自电影行业的创作工具。它是一个图形组织板,其中包含按顺序显示的动作场景的图片,这些能让工作人员更容易理解场景的性质和演员必须传达的情感。就像拍摄电影一样,如果没有好的故事讲述,就不可能创造出身临其境的虚拟世界体验。



故事版案例。图片来自NN Group.


2. 3D建模工具 

元宇宙是一个天然的3D世界,这个世界越真实,用户越能够进入沉浸式的体验。对于想要创造元宇宙体验的设计师来说,最好能成为3D建模大师,熟练使用如Blender、Cinema 4D、Houdini等建模工具。



使用 Blender 创建房屋模型。图片来自Blender.

3. 社会学 

设计师如果只通过搭建一些高质量的3D物体(例如房子、汽车和其他人类环境属性)就想创造出一个元宇宙,那几乎是不可能的。让元宇宙看起来和现实世界一样真实的关键因素是如何能让设计的物体之间的相互协作达到和谐统一。为了设计出一个拥有健康社会的的虚拟世界,设计师应该了解现实世界是如何运作的,这就是产品创造者必须学习人类学、建筑学和城市设计的原因。

诸如用户访谈、问卷、非参与性观察研究(在不知道被观察者的情况下进行观察)等方法对于创建好的用户体验来说非常重要。

4. 交互原型 

创造真实的交互对设计师来说是首要目标。在设计互动体验时,很重要的一点是不要白费力去做重复的事情,使用一些在过往设计中验证过的经验和方法会更有效。

现在,有一些工具可以帮助我们做到这一点,其中很重要的一个工具是“交互SDK模块”(Interaction SDK),这是一个模块化组件库,元宇宙设计师可以在其产品中使用。在这个组件库中有很多元宇宙会用到的的基本框架和对象,比如基础手部控制模型、距离计算器、手势检测等等。



使用交互 SDK 创建的虚拟手部和控件。图片来自Macprotricks.

5. 情景研究 

对于设计师来说,仅仅将一个产品设计出来是远远不够的,我们还需要对设计的产品不断的进行测试,看看它是否能为用户提供出色的使用体验。情景研究是一个非常好的方法和技术,这项技术可以帮助设计师直接了解虚拟世界中发生了什么,以及哪些设计领域需要改进。通过沉浸在你所创造的体验中,你会看到它的优点和缺点。

元宇宙代表了数字技术进化历程的下一个阶段,最终元宇宙设计将融合人们的真实生活和虚拟生活。人们不仅会在元宇宙中互动,还会在元宇宙中生活。目前,我们正处于这一旅程的早期阶段,它为产品设计师提供了一个塑造互联网未来的绝佳机会。

作者:Nick Babich    来源:站酷

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

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

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




设计师应该掌握的需求分析方法

纯纯

所谓的“产品设计导向”指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点,明确产品核心价值;在产品上线之后,通过数据分析和功能反馈,发掘更多的需求,去规划下一步的”功能增删改“,将产品的设计方向引导到更正确的位置,提升用户留存率,延伸挖掘出产品更多的可能。


另一方面,从现在的设计环境而言,对所有的设计师既是机遇,又是挑战。大量的UI专用工具(Sketch、Principle、Flinto、Origami等)的出现,大大提升了产品前期的UI设计师的工作效率,所以现在“全链路思维”已经从刚出现时的“概念化思维”变成了“主流化趋势”。所以现在很多的UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析(功能设计、用户画像等)内容。


但是很多设计师的分析环节明显就是为了证明“有”而去“做”,缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品,典型用户画像里主流用户是:“男、七十岁、目标是给自己的儿子购买婚房”。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的,只是从形式上走个过场罢了。


本篇主要讲述产品设计中的一些分析方法,范围从“个人练习式设计”到“团队合作式运作”,知识点大概有:空雨伞思维、文章大概六千字左右,建议阅读时间:15分钟。适读人群:初级产品经理、交互设计师、在工作中职能范围与产品规划有关的UI设计师、想要学习产品设计的新人(文中含有大量配图用来辅助观点,因此建议PC端阅读)。



产品运作流程概览

我遇到的比较普遍的问题是:很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽然相同。所以说要从浅到深的学习产品功能设计,就必须先理清当前工作的常规流程,例如常见的产品运作流程(如下图)

上面是一个相对规范的产品开发流程,实际上你在看到上述流程图后,对照自己公司的情况,会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本,现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分,才能更好地提升沟通效率。



个人思考方法(一):空·雨·伞

上面讲到了设计师的“全链路思维”现在已经成为了一种主流的观点,将来的前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。所以现在很多的设计师开始尝试自己去DIY一个需求或者做ReDesign这样的设计,希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候,大部分人会发现自己突然变得没有思路,从产品方向点确定到产品视觉产出之间出现了断层。

其实做过设计练习的人都知道,由于一些现实场景的不同,一些人在做设计练习的过程中会受到很多条件的局限,尤其是在孤立无援的情况下,你面对自己的练习作品往往会无从下手。当然,不同的场景下有不同的分析方法。

在团队协作的时候,分析方法要全面、严谨、反复推敲。

在个人练习的时候,分析方法要高效、直接、简化不必要的流程,以培养自己的分析能力为主,在这种场景下,空·雨·伞就是一个非常好的思考提升方法(如下图)

简单概述“空雨伞”思考方式:观察(事实) → 思考(内在) → 产出(解决方案)

运用在设计上就是:发现痛点 → 思考原因 → 提出解决方案。“空·雨·伞”因为简单、成本低、易上手,可以作为设计入门培养思考能力的一种方法,但是在使用空·雨·伞的分析方法时需要结合一定的具体调研(或者轻量级的用户研究)相配合,不然又会变成一味的“拍脑门儿”式的主观臆测,对于分析能力提升没有丝毫帮助。



个人思考方法(二):逻辑树

逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是“逻辑树”。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。


简单来形容一下逻辑树:把一个已知问题当成树干,然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点,就给这个问题(也就是树干)加一个“树枝”,并标明这个“树枝”代表什么问题。一个大的“树枝”上还可以有小的“树枝”,如此类推,找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路,不进行重复和无关的思考。


如果你要运用逻辑树方法去分析产品,主要的一点在于学会细化拆解目标。


举个例子:

在2017年我创建了自己的个人站酷号,但在发布了一部分的文章之后,我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析,去发现自己提升的空间。

如上图,就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分,拆分出三级逻辑树是比较容易的,甚至你可以沿着已经列出来的大纲继续深入细化,再拆分出更细更深层的各种提升点。


逻辑树分析法在个人作品中的主要作用是发散思维;在实际工作中的作用则是针对特定问题进行分析,理清思路。总而言之,是让你在分析的过程中更加有条理,避免重复思考。但是逻辑树分析也有一个缺陷,就是在逻辑树分析的过程中,根据现象分裂出子层级的步骤十分依赖你的认知能力,就如同做设计一样,当你感觉界面的视觉出现出题的时候,需要利用你学出来的知识去进行视觉优化,如果你对设计理论知识掌握程度并不是很强,那就不能采用逻辑树分析法解决问题。


总而言之,逻辑树分析法适用于对问题研究十分深入的情况下,如果你对当前的环境认知并不充足,那么就很容易走入歪路,跑偏主题。



实际项目:用户调研访谈

在一些实际项目中,用户调研是需求来源的主要渠道。提起用户调研,很多人会觉得这不属于UI设计师应该做的事情。其实行业逐渐规范的现在,用户调研、分析需求的能力也成为了衡量UI设计师能力的一个标准。现在的互联网产品种类繁多,从早期只做主流行业,到现在基本所有的冷门行业都有涉及;作为设计者而言,大多数设计师已经开始在设计的过程中心有余而力不足。


造成这种现象的主要原因为是因为随着行业的细分以及范围的扩大,我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。因此对于很多的设计师来说,学会了解用户以及分析需求成为了十分重要的事情。


然后整理了一下我在用户调研过程中的几点认知:


第一,保证调研的目标的准确性

我们需要明确,我们希望通过调研达到怎样的目的?(例如:提升部分页面转化率、收集用户对于产品不满意的地方、通过用户使用产品发现用户潜在的痛点)

第二,有目标的选择用户

一般来讲互联网公司都有收集客户反馈的部门,他们掌握着所有客户的反馈意见。我们在选择调研用户的时候,最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标

第三,适当的准备调研内容

当我们确定了调研目标和调研用户之后,就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好(开始调研之后根据实际情况进行改动)

一般市场调研细分的维度通常有四种,分别是:地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例:我们在调研中可能要把调研对象分为客户(老板)和用户(业务员)去进行不同情况的信息跟踪,而且根据产品的属性不同,需要提前预设好调研内容的侧重


第四,调研过程中

在调研过程中,我们可以适当结合上文讲述到的“空雨伞”方式去进行调研观察,收集用户需求(如下图)

在调研过程中,除了思考之外更多需要注意的是对用户洞察的记录与剖析,在记录用户行为的过程中,需要遵循“不干扰”、“不引导”、“记录客观”等原则,这样可以才可以保持用户行为记录的准确性。


第五,获取反馈整理结果

在调研结束后,我们应该产出一份完整的调查报告,按照本次调研预设目标进行整理,规划出合适的大纲,把调研收获转化为明确的产出,产出形式最好以报告(PPT、PDF),而不是口述或者微信消息,这两者之间差别很大~



需求归类:KANO模型

虽然说现在很多的公司都开始建立了用户体验类的部门,但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后,往往很少会出现我们幻想中的“逆袭”、“口碑急剧上升”,有时还会因为受到一部分用户观点的带偏导致产品口碑下降,用户表示不满;又或者会出现需求级规划混乱,重要功能反而后上线这种尴尬的情况。


所以这驱使着团队中负担“用研用体”职能的角色对用户需求进行正确的分类和排序

这个时候就可以运用到卡诺模型(KANO模型)。

KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系,狩野教授将产品服务的质量特性分为五类:


1.基本型需求

用户对企业提供的产品或服务因素的基本要求。是用户认为产品“必须有”的属性或功能。当其特性不充足(不满足顾客需求)时,用户很不满意;当其特性充足(满足用户需求)时,用户也可能不会因而表现出满意。对于基本型需求,即使超过了用户的期望,但用户充其量达到满意,不会对此表现出更多的好感。

例如对于网盘类产品来说,用户的基本需求是有快速的上传和下载。如果下载速度达不到用户的期望,则用户满意度将一落千丈。对于顾客而言,这些需求是必须满足的,理所当然的。对于这类需求,企业的做法应该是注重不要在这方面失分,需要企业不断地调查和了解顾客需求,并通过合适的方法在产品中体现这些要求。


2.期望型需求

提供该功能,用户满意度提高,如果不提供该功能,用户会感觉到不满。当然在这里要补充一句,这里的需求并不都是我们整理出的主观需求,也有可能是用户在使用的过程中产生的客观类需求,例如遇到不会的体验,需求得到响应时我们给的反馈

例如对于一些O2O类的产品,虽然做的都比较成熟,但是由于体量庞大的原因,偶尔也会受到糟糕体验,用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程(旅程预计时间偏差)、美团(酒店体验差)、饿了么(用餐体验差)等。在用户遇到这种糟糕体验之后,期望能通过投诉建议获得官方的反馈,那么官方把这种问题解决的越圆满,用户的满意度也会随之提高。

3.兴奋型需求

又称魅力型需求。指不会被用户过分期望的需求。对于兴奋型需求,随着满足用户期望程度的增加,用户满意度也会急剧上升,但一旦得到满足,即使表现并不完善,用户表现出的满意状况则也是非常高的。反之,即使在期望不满足时,用户也不会因而表现出明显的不满意。


4.无差异型需求

不论提供与否,对用户体验无影响。是质量中既不好也不坏的方面,它们不会导致顾客满意或不满意。


5.反向型需求

用户没有这个需求,提供后用户满意度反而会下降。

按照kano模型分析可以对收集到的产品需求进行分类,筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。

作者:千夜Ryan_Vision    来源:站酷

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

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

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




光影和空气,是完美排版的最后一块拼图

纯纯

咱一起来聊聊排版的问题:


NO.1


如果你看过我过往的文章,也许会对我的排版多少有点印象,夸张的大字,极强的对比,还有一些微妙的层级关系;坦诚的讲,我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格


1.瑞士风格

整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在;这种一丝不苟,传达准确的风格,即所谓瑞士国际主义风格。简单的说,由于 Swiss Design 这种风格简单明确,传达功能准确,因而很快得到世界范围内的普遍认可,成为战后影响最大的一种平面设计风格,也是国际最流行的风格,因此,又被称为国际主义平面设计风格;

简单的说,瑞士的这种设计风格典型的代表就是我们看到的杂志,其中有 3 个特点:讲究网格 / 非常理智的克制颜色的使用 / 层级关系;有趣的是,审美和潮流是循环的,随着时代的发展,越来越多的app开始重新挖掘出来瑞士风格并加以使用,比如我们iOS系统自带的应用们,Spotify:

年少的时候,我经常看着这些个app会不禁的问,为什么在没有一张图片的情况下还能如此好看?这些年终于明白了前人良苦用心:文字是内容,同样也是构成;是信息,同样也是装饰;简单可以理解为,不管在平面还是网页亦或者是UI界面,在没有可用的装饰下,信息本身要承担起装饰和传达的双重功能,这就是瑞士风格的核心本质


2.拟物风格

iOS是拟物的典型代表,网上对于这块的讲解已经过于饱和了,我也没必要赘述;那么这一趴,来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳,潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…

但当我打开下图这个页面的时候,我意识到我对拟物的理解还是浅薄了,第一次被光影的层次震撼到:

通过光影塑造了一个三维空间,让整个画面丰富饱满,也打破了我幼稚的设计观,PS.不管锤子科技现在如何,我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献,respect!

毫无保留的说,我的设计就是二者的融合,以 层次对比 作为核心理念。


NO.2

啰嗦了半天,赶紧进入正题;如果你是一名产品体验设计师,一定听说过 “奥卡姆剃刀” ,这个定律通常用在交互链路的设计上(意思就是在用户路径中没必要的步骤,省了就完事了),“如无必要,勿增实体” 即简单有效原理;


同样,在嘈杂的视觉结构里,画面也需要奥卡姆剃刀,当你在对画面的饱和上困扰不已,并急于找到一些背景和纹理填充的时候,我建议你先冷静一下…因为页面的空虚未必是需要实体化的东西来填充的;上文有说过以  “层次对比” 作为核心理念出发,要区别于平面设计,营造一个立体空间,所以先理一下画面结构: 

通常来讲,如果想要不平,把二维空间转化成三维空间是必要的一步,需要在Z轴上下功夫;如果你恰巧也是一名摄影爱好者,可以想象下照相机的焦距和景深,工作原理是相同的,需要 前景 / 主体和背景 三个层次;当然,虚实的对比对信息的呈现和层次的拉开是极其重要的,这里需要通过景深来控制效果,你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到:

另外,空间的感觉想要被突显,那么“光影和空气”的价值就可以无限放大了,按照如上所说的结构,把内容和自然物质摆进去就好了,甚至可以做到举一反三(比如不同颜色的氛围,我就不展开了):

整个case下来,你会发现用光来聚焦在信息上,自然而然就形成了我们说所得 “信息优先级”;有点时候空气和光影的饱满程度超乎你的想象,这种自然存在的物质可以很好的帮助画面分层,以达到填充的效果,并不是一定要依赖于实体化的装饰。


对了,如果你跟我一样闲着没事干的话,借用 keynote 的动画效果做一个吊炸天的动效,一定可以成为汇报场上最靓的崽( 注意:视频有音乐)! 

NO.3

本来不打算再开一个章节说这个,但还是觉着很有必要再说下(我好纠结),作为PPT来讲,ta的主要用途分为两种:其一是给人看的,其二是给人讲的;不管是哪种,尽可能的简化文字,是对输入者关爱;

以上图为例(实名diss自己的作品),坦诚的讲左边的部分大多数观者是不会有心思来看的,按照视觉系统的处理,这部分就会被当成一个“面”而被忽略掉,这种情况下右边显得有力很多,也能帮助观者聚焦信息,所以还是那句话,能不写的就别写,能少些的别多写,保持信息的密度也是设计师必要的职责之一。

作者:负能量的补给站    来源:站酷

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

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

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




视觉层面的三维解析

纯纯

界面设计是一个很庞大的体系,具有很多原则,比如轻量、容错、清晰等等,其中包含了交互层面以及视觉层面等,今天我想单独把视觉剥离出来,来讲一讲我对界面设计“视觉层面”的理解与认知。


在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。


信息传递是让用户看的明白,快速清晰的获取信息;

视觉美化是让用户看的舒服,让界面足够美观;

创新创意是让用户看的惊喜,看到一些不一样的创意点。


如下图:



三个维度的目标如何实现呢?我提取了以下三个关键词:



清晰、和谐、独特是我们要达成的目标,达成目标一定会有一些原理所在,而有了原理就会有具体的执行方法,所以后面的每一个知识点,我都会按照“设计目标-执行原理-执行方法”的逻辑给大家讲解,大纲如下:


1 清晰 

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大


2 和谐

2.1 和谐-呼应-颜色呼应

2.2 和谐-节奏-变化对比

2.3 和谐-饱满-负形缩减


3 独特

3.1 独特-品牌延展-IP形象结合

3.2 独特-事物本意-事物图形化



1.清晰 

1.1清晰-降噪-容器整合  

设计目标:清晰

执行原理:信息降噪

执行方法:容器整合



当界面信息过于分散时,会对用户造成不必要的干扰,导致用户产生疑惑甚至直接离开界面。


作为设计师,要做的就是对信息进行整合,我们可以称之为信息减噪,目的就是让页面更加清晰,减少干扰。


这里我经常使用“容器整合法”来让内容更加清晰、聚焦。


当分散的内容装进一个“容器后”,就可以使内容聚焦在容器当中,让信息更加规整。而卡片就是一个很好的“容器”。


实际案例:

在改版腾讯动漫个人中心的时候,头部就存在信息分散不聚焦的问题,四个视觉触点(绿色圈处)分散在四个角落,形成极大干扰。



这里我就采用了”卡片容器“的方法,将信息装进容器中,减少分散信息的干扰,使界面更加清晰、工整,效果如下:


 

现在很多产品都在使用卡片化的布局,尤其是在信息数量、层级较多的时候,更加需要有容器将其规整起来,这样才会让界面保持不乱!



1.2 清晰-聚焦-局部放大  

设计目标:清晰

执行原理:聚焦

执行方法:局部放大




我们在平时做需求的时候,经常会遇到信息特别多,特别乱的时候,如果此时我们选择什么都想突出,最后的结果一定适得其反,什么都突出部不了,这时候就需要我们选择一些内容来进行局部放大,反而可以让整体信息更加聚焦、清晰。


这种方法经常用在有数字展示的页面当中,比如下面这种页面:



再比如,下面这个模块信息,如果”3“没有放大,整体的信息会乱到你眼花缭乱,我们看下对比:



所以,大家在遇到有数字,且信息杂乱的时候,就可以采用局部放大的方式来使整体更加聚焦、清晰。



2.和谐  

2.1 和谐-呼应-颜色呼应 

设计目标:和谐

执行原理:呼应

执行方法:以颜色呼应为例


 

很多时候我们会觉得自己做的东西很不和谐,其中一个很重要的原因就是因为页面中没有贯穿的元素,也就是没有呼应,很常用的一个呼应的方法就是颜色呼应。


例如这个画面总看起来不够和谐,你会觉得绿色很突兀,就是因为颜色上没有呼应:



而一旦你想办法,让绿色“事出有因”,比如取自眼镜的颜色:



那么,突兀的问题解决了,和谐的目标也就实现了。

而刚才那个人中心的界面:



我们会发现,图标的颜色也是取自背景色,所以整体看起来才会如此和谐。


除了颜色呼应,还有很多呼应的方式,比如图形、图标风格等等,这里就不再举例了。



2.2 和谐-节奏感-对比变化 

设计目标:和谐

执行原理:节奏感

执行方法:对比变化



对于音乐,节奏感是非常重要的,如果一段音乐一直是一个频率,那可能也算不上音乐了。


界面也是一样的,节奏感是让页面变得“和谐”很重要的因素之一,如何做到呢?


我们在展示文字列表的时候,你觉得下面两种哪个更舒服些呢?



我猜你会觉得第二个舒服一些,因为它有变化,有节奏感,所以它和谐、舒适。


我们会发现很多产品首页带有封面图的列表都有很多种排法,例如1带多,1x2,2x2,2x3等等:



就是为了防止每个模块过于重复,如果每个模块都是每排两张封面,一直下来:



看起来会非常乏味。


2.3  和谐-饱满-负形缩减 

设计目标:和谐

执行原理:饱满

执行方法:负形缩减



在做图标或者字体的时候,经常要讲一个原则就是“饱满”,界面上每个“不能拆分的元素”都需要尽量做到饱满,比如图标,再比如下面这个信息组件:



正文就属于不能拆分的单一原子,大家可能会问,这种信息不就是方方正正的一个信息块吗,怎么会不饱满呢,比如行间距过大:



再比如,我在优化腾讯动漫信息流的时候,发现正文出现的表情远远大于文字,如下图:



表情一旦出现,就会造成大量空隙(负形过大),导致整体不够饱满、和谐。

我们可以看下其他产品,表情和文字几乎都是一样的大小,他们都会尽量缩小负形空间(也就是空隙小大):



在这样的原则之下,优化后的效果如下:



以上是关于和谐的几点方法。


3.独特 

如果你的界面做到了清晰、和谐,在视觉层面就已经算是及格了,如果还能加上一点小创意,就可以让人眼前一亮。

如何能够做到独特?可以从两方面出发,1是品牌,2是内容本身含义。


3.1独特-品牌延展-吉祥物结合  

设计目标:独特

执行原理:品牌延展

执行方法:IP形象结合



从品牌出发,可以有很多方向,比如logo,图形,品牌吉祥物等,下面以品牌吉祥物为例:

在做小说阅读器的时候,有一个设置选项是选择文字的背景颜色,选择控件是圆形,而品牌形象也偏圆形,此时就可以将圆形控件与形象相互结合:



但是选择控件有两种状态,为了更加生动,就让给形象正面面对你的时候作为选择状态,而转过身作为非选择状态,大概效果如下:



此创意已在腾讯动漫小说落地实现。


3.2 独特-事物本意延展-事物图形化 

设计目标:独特

执行原理:事物本意延展

执行方法:事物图形化



除了品牌,还可以根据事物本身的意思来延展图形,比如日间夜间模式的切换按钮,男女性别的切换按钮,都可以利用事物本身的含义来延展图形设计:



此创意已在腾讯动漫个人中心模块落地。


再比如,弹幕的展示方式,就可以联想到电视机,再把电视机图形化,如下图:


这里需要注意下,有时候如果图形过于普通,可以配合动效来增加独特性,但一定要注意开发成本。

作者:黑泽双炽    来源:站酷

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

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

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



灵动岛,是创新还是妥协?

博博

2022苹果秋季新品发布会,最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。

01

什么是灵动岛(Dynamic island)

2022苹果秋季新品发布会,备受关注的新一代iPhone如期而至,此次发布会最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。虽然「药丸」在安卓阵营中并不是什么新鲜玩意,但一向以创新著称的苹果还是玩出了不一样的花样,带来了全新的交互方式,模糊了硬件和软件的界限,通过实时变化显示重要的提醒、通知以及简单的功能操作,苹果把这一创新称之为灵动岛(Dynamic island)。



02

灵动岛能做什么 / 不能做什么

灵动岛其实可以简单的理解为基于前置摄像头区域拓展的消息通知和快捷操作的新交互方式。

来电

当有来电时,灵动岛会发生变化,并在后台打电话时显示通话时间和声音波纹。



音乐

有点类似于锁屏后的音乐功能操作,保留了基本的播放、暂停、前进、后退等功能。



Airpods

连接AirPods后,AirPods的型号外观和当前电量会一起显示。



导航

显示导航方向和距离,并且能够在适当的时候放大显示更多导航信息。



Face ID

以前Face ID认证会显示在屏幕中间,现在集成于灵动岛的扩展功能之中。



充电

当充电时,会显示充电的状态以及当前电量百分比。



当然,目前除了官方展示的这些功能以外,还会有更多的应用方式,在此不一一列举。但灵动岛也并不是万能的,例如会存在以下的局限性:

重度使用场景

从官方给出的样例来看,灵动岛更多的是承担了消息通知和提醒的作用,并不适用于重度使用和复杂交互等场景,例如消息聊天、刷短视频、买卖交易等等。

过于复杂的图形

受限于前置物理摄像头,灵动岛这个区域并不能显示过于复杂的图形,并需要避开摄像头区域,因为该区域是不能显示任何图像的。



软硬件的边界

灵动岛的实际效果并不会像宣传图中那样好,特别是在反光强烈的户外。摄像头的挖孔清晰可见的,即使是在黑色不发光的OLED屏幕上,软件和硬件的界限还是能够明显区分。



03

对于灵动岛的各方反应

新事物的出现,总会伴随着支持和反对两种声音,此次灵动岛的创新交互,自然也是褒贬不一,还需要经受时间的考验,因为即使是苹果这样的公司也难免会犯错,比如3D Touch、MacBook上的Touch bar等。

支持方认为「灵动岛是继刘海屏之后的又一个成功设计,甚至会超越刘海屏,更受欢迎」。

「灵动岛的设计非常讨巧,同时也给挖孔屏带来了更多的想象空间」。

而反对方的理由也十分充分,首先是罗永浩第一时间发表了自己的观点,表面上是硬赞这个创新,但实则是讽刺了这样多此一举的方式,「先在脸上涂屎,然后再把屎的颜色调整得跟粉底差不多」



很多的舆论认为,灵动岛的创新是苹果的一种无奈和妥协,因为自从第一代iPhone革新性的使用触摸屏之后,十多年以来手机在工业设计方面并没有太多的创新,大部分厂家是在屏幕分辨率,后盖材质,摄像头像素上面做文章,而苹果作为一个工业设计创新的公司,也只能通过后置摄像头模组的排列来维持每一代iPhone的变化。所以此次灵动岛的创新,被认为是工业设计乏力之后推动交互设计创新的无奈之举。



但无论支持还是反对,前置摄像头挖孔屏终究是一个过渡性的方案,最终会被全面屏所替代,而在这个过渡时期,很明显苹果的解决思路与国内的绝大多数厂商都不一样。

04

为什么国产手机不做灵动岛

国产手机的前置摄像头解决方案除了「刘海」以外,单摄像头「圆孔」和双摄像头「药丸」设计都已经非常成熟,但是为什么经过这么多年的迭代,依然没有创新呢?

思维方式的差异

国产手机厂商的思路跟苹果相反,希望尽可能的把前置摄像头做得越小越好,甚至头部的厂商尝试探索升降摄像头和屏下摄像头的解决方案,目的就是为了把前置摄像头隐藏。而苹果的思路则是,既然现阶段的技术没有办法把前置摄像头隐藏,那么干脆就以此为基础,把这个区域运用到极致。

缺少创新和引领者

似乎国内的用户更关心的是电量是否持久、屏幕刷新率高不高、拍照功能强不强大等问题,秉持着「人民需要什么,我们就造什么」的成功理念,各大厂商也开始在这些方面内卷,从60Hz到120Hz刷新率,从千万像素到一亿像素,从莱卡加持到一英寸大底传感器... 大家都在做从1到100的事情,而很少有关注从0到1,因为这样做的性价比的确不高。



市场的接受和认可程度

当刘海屏第一次出现的时候,很多用户都在吐槽,其中也包括很多苹果的忠实用户,宁愿买iphone8P也不愿意使用刘海屏的iPhone X。而经过一两年的审美教育以及国产手机的跟风之后,才慢慢的被更多用户所接受。因此国内的厂商很难有信心通过一己之力去改变用户习惯,并赢得市场的认可。我相信,苹果发布以后,各大厂商已经在积极的学习和模仿,新的一轮内卷即将拉开帷幕。

即便如此,国产厂商也并不是完全没有在前置摄像头的区域努力尝试过。例如魅族曾经在前置摄像头上显示当前电量,称之为「环形电量」,并尽可能的使其与状态栏的其它信息融为一体。



荣耀的通话时间胶囊和自拍胶囊,都以前置摄像头为基础做延展,可以看得出在想尽办法的规避前置摄像头所带来的不好体验。




虽然VIVO的原子通知不是围绕前置摄像头区域拓展,但从效果和想法来看,也与灵动岛的概念比较类似。



HTC曾经出过一款HTC U Ultra,当然那时候还没有全面屏的概念,所以HTC把它称之为副屏,可以显示消息通知、音乐播放操作、App快捷入口等等。



除此以外,几乎所有刘海屏的手机都有把刘海隐藏起来的功能。



05

对设计师的影响

灵动岛的出现,对 iOS 原本通知、交互、卡片、弹窗等一系列交互规范进行了解构再重做,就好比「刘海屏」首次出现的时候,需要设计师对全新交互逻辑、卡片行为、动画等重新适配。那么对于「灵动岛」我想需要考虑的是这几个方面。

新的交互方式

之所以叫灵动岛,就是因为它是「灵动」的,拥有不同的状态变化,以适应各种功能提示和操作。设计师在使用这个功能的时候,需要充分考虑其场景,恰如其分的给予提醒而不给用户带来过多的打扰。

新的容器

不同形态的容器可以装载不同的内容,相比于以往常规的通知提醒,新的容器可以展示更多的信息,甚至是简单的功能操作。在提出解决方案的时候,留给设计师更多的想象空间。

新的表达方式

灵动岛相当于一个永远在桌面上的岛屿,比任何App的优先级都要高,所以会成为各个应用的必争之地,使用一种好的表达方式,必然能够达到事半功倍的效果,因此也是考验设计师在寸土寸金的区域中,通过视觉化手段表达的能力。

最后,我想苹果的初衷是为了更好的用户体验,消除一部分用户对于挖孔屏的焦虑,如果能够真正的站在用户的角度、克制的去使用新的交互方式,会得到用户的喜爱和市场的认可。

我认为灵动岛既是一种创新也是一种妥协,对于工业设计硬件创新乏力的妥协,更是对技术发展的妥协。我也相信,真正的全面屏时代终究会到来,期待那个时候苹果再一次给我们带来真正意义上的,里程碑式的,创新!


作者:捡蘑菇的人


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 


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


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

网易云音乐一起听陌生人版项目总结

博博

 一起听 」背后的设计故事

01.背景


电影《再次出发之纽约遇见你》中有一个浪漫的场景,男主和女主通过一根耳机分线器一起听着音乐,一起感受着当下同一段旋律。通过这根分线器,他们分享着自己的歌单,分享着当下的情绪,隔绝外界的纷扰,游荡在大街小巷。


这种听歌方式我也很喜欢,同样的歌曲让人产生了不一样的感受。我想,可能是陪伴和共鸣赋予了这首歌新的生命力吧!


如今,无需分线器,网易云音乐一起听可以让你和那个TA随时一起欣赏音乐、分享心情。前年7月份上线的这个功能获得了用户的一致好评,之后的数据表现也是远超预期。但是,在众多的用户反馈中,最多的一个痛点是:身边没有人陪我一起听,能不能做个匹配功能,找陌生人一起听?


站在业务的层面考虑,一起听作为一个熟人听歌的功能,在恋人和亲密好友之间普及度非常高,但同时也要考虑当这部分用户数据增长到达瓶颈后,一起听如何拓展新的用户群。陌生人一起听是一个很好的方向,能够突破熟人社交的限制,拥抱更多社交关系拓展的可能性。


02.第一期探索


为了满足这一部分用户的需求,陌生人一起听的项目在决策层的支持下进入了探索阶段。这一阶段主要想要知道什么样的产品形态适合陌生人一起听,是在原有的熟人一起听的框架内进行拓展,还是大胆颠覆更加让人眼前一亮呢?每位小伙伴都描述着自己的构想,朝着不同方向探索。经过一轮轮的方案讨论,最终我们选择了“星球”作为框架,来承载陌生人一起听的设计。大概的构想是这样的:当我在听一首歌,感觉孤单并希望有人陪伴时。可以通过一个入口进入到一个由光点组成的星球,每个光点代表一个当前也在听这首歌曲的用户。我可以展示自己的状态,和其他的用户进行互动。当我对一个用户感兴趣时,可以选择“跟随”TA,每当TA去往另一个星球(也就是听其他的歌时),我也会自动移动到那个星球,跟随着TA一起听。


根据上述设想,设计团队还产出了一些方案来还原大家心中的“星球”,下面是早期一个方案的动态演示,黑胶上的封面变化为一个同色系的星球,每个光点代表一个正在听这首歌的陌生人。


我们将这个大概构想告知开发同学后,得知需要的人力和时间成本远超我们预期。由于决策层希望能够在一起听的热度未退时尽快上线陌生人版,我们不得不把这个星球版的方案暂时搁置,重新构想在原有框架内的设计方案。


决定在原有框架内进行设计后,我们就需要收拢之前发散的想法。针对主要需求进行设计,把有限的资源用到刀刃上。最终确定的产品形态似乎很简单直接,点一下按钮,匹配一个愿意和我一起听歌的人,但是到了视觉设计阶段,就需要考虑更多的问题。


从关系的角度讲。熟人之间比较亲密,陌生人之间要保持一定距离,慢慢了解对方。与熟人一起听有着稳定的预期,但是陌生人带来的是不稳定,这种不稳定可能是缘分和惊喜,也可能是骚扰和惊吓。考虑到这种不同,做陌生人一起听的功能就不能够完全套用熟人的设计,而是要针对性地进行重新思考。


首先,功能的入口能够给用户第一印象,我们用了一个动画表达两个陌生人沉浸在音乐中的含义,两个匿名小人安静地呆在一起,音符环绕着它们运动,暗示他们正在一起听歌。通过这种表达帮助用户快速了解功能,同时渲染氛围,吸引用户使用。


在熟人一起听歌过程中,为了表达亲密,表现形式上采用了耳机共享,头像叠放的表现形式。但在陌生人之间,为了避免过于亲密,就去掉了耳机线。为了控制社交距离,头像不再叠着放了。陌生人的头像也模糊处理来保持神秘感。


为了保证没有社交意愿的用户不被打扰,同时为了避免社交过程过于快餐化,陌生人一起听采用了一方申请,另一方同意才可以公开身份的规则。为了配合这个规则,我们设计了陌生人揭面机制来引导用户和传达信息。匹配成功后,双方会先隐藏身份听歌。以此来鼓励用户尽量关注音乐本身,而不是纯粹为了交友而进行一起听。当一起听了5分钟后,对方的面具会小幅度上下移动,暗示用户可以点击。点击对方的面具后会发出公开身份的申请,对方同意后才可以揭开面具。后续听歌过程中,双方就在身份公开的情况下一起听歌。如果相处愉快,可以去对方主页了解更多信息,甚至互关成为好友,下一次以熟人的身份邀请一起听。


“于千万人之中,遇见你所遇见的人”,这是我们想在匹配的过程中体现的缘分感。受限于开发成本,匹配动画只能在一个小小的圆形容器里去设计。下面四个方案是前期的探索稿,主要是把人抽象成一个个点,点可能代表一种颜色、一颗星星、一个光点,点的运动表达寻找的过程。


最后选用了第四个,进行最终优化后的呈现如下。通过雷达的转动表达寻找,浮动的光点代表一个个陌生人,最终受到召唤的那个TA飞入雷达范围,发出代表回应的音波后,变大形成一个蒙面的头像。(由于时间关系,此动画后半段仅在安卓端实现)


如果你仔细地用过一起听,可能会发现双红心彩蛋,这份惊喜感也是我们希望让双方感受到的。当你喜欢了一首对方也喜欢的歌曲,都会出现一个两个爱心碰撞出音符的动画,在惊喜的同时也会体验到来自陌生人的认同感。


至此,在这一版的一起听中,我们希望用户能够获得的感受是:“两个陌生人虽然素不相识,不方便通过言语交流,但是彼此分享同一首歌曲,互相陪伴,产生共鸣,温暖而美妙。”正如孤城的诗《门前》里的那句:“草在结它的种子,风在摇它的叶子。我们站着,不说话,就十分美好”。


03.倾听用户的声音


陌生人一起听上线后一个月左右,我们和用研团队一起在杭州的几个大学周边进行了用户访谈,包括面访和拦访,在一线倾听用户的声音。主要调研使用过一起听用户的使用情况、未使用过一起听用户对于一起听的认知情况,总结问题后为一起听后续的功能迭代和运营策略提供参考和建议。


根据调研结论,我们按照用户使用一起听前中后的顺序将问题进行排列,分析用户的问题和痛点,确定了之后的优化方向。


04.第二期探索


4.1 一起听聊天


我们结合数据表现和用户调研,计划在接下来的迭代中实现更多有趣的玩儿法。首先亟待解决的是用户聊天的需求。在熟人一起听中,用户一般使用微信作为聊天工具,一般不会考虑在云音乐里进行聊天。当陌生人一起听上线后,能够即时地与陌生人聊天就是一个最刚需的社交需求了。虽然云音乐已经有私信功能可以供我们进行复用,但是我们希望能够将一起听时的聊天做得足够轻量且能够随时触达,以此来提高聊天功能的使用率。


设计过程中我们结合场景进行思考和创新,经过几轮方案的筛选,最后大家对于一个问题产生争论:是进入聊天模式才可以收发消息呢?还是直接在播放页展示消息,随时聊天呢?


下图中,方案1能够减轻打扰,但是无法在播放页第一时间看到对方发的消息。


方案2有一定的打扰,但是能够第一时间看到消息,让听歌场景和聊天场景无缝衔接。


为了减少用户的操作步骤,把功能做得轻量化,最终选择了更加直接的方案2,同时为了避免打扰,每一方的消息气泡的展示数量设置上限为2条,超过2条就会收起到记录中。


下面的视频是聊天的简单演示,可以发现气泡通过背景模糊来区分前后内容,气泡的出现和消失不改变黑胶页的原有结构。


4.2 个人信息逐步展示


很多人用社恐来自嘲,表达自己想与人社交,但是又存在迈出第一步的障碍。陌生人一起听是一个匿名功能,很适合希望轻度社交的用户。在匿名的基础上,我们希望在听歌过程中,能够为用户带来更多轻量的、无压力的社交方式,帮助希望社交的用户逐渐熟悉彼此,找到志同道合的朋友。


个人信息逐步展示就是基于上述的需求诞生的创新功能。随着匿名一起听的进程,用户可以逐步解锁对方的信息,一部分是双方的共同信息用以产生共鸣,另一部分是对方的特色信息用以展示自身特点。在听歌的过程中逐渐了解对方,最后决定是否揭面进行更深度的交流。


首先,在共同信息的提示方式的设计上,我们并没有简单地用一个红点去提醒用户。而是用头像的发光来表示共鸣的含义,头像四周飘散的粒子来隐喻共同信息。让每一处的设计都能贴合一起听的风格。


共同信息在一个浮层上展示,我们把当前展示的信息控制为一个,通过上下滑动来切换。除了共同信息,用户可以直观地设置自己的状态,让自己更加像一个活生生的人。


4.3 一起听结果页


当完成一起听后,会有一个结果页来记录听歌过程中产生的各种数据。旧版的结果页用户反馈信息不够丰富,分享欲望不强。


新的结果页增加了双方的相似度、聊天条数这些数据,并且根据这些数据不同,会生成一个表达关系的成语,颜色有对应的变化。比如我们相似度很高,并且互发了很多条聊天消息的话,就会得到一拍即合的成语和红色的结果页。


与陌生人度过一段听歌之旅很容易让人产生分享欲,在社交媒体搜索一起听可以发现很多用户都用结果页配图发帖,并诉说自己与陌生人之间的互动故事。


05.总结


一起听经过这两次比较大的更新后,获得一些不错的成绩。截止至2021年12月,周末的平均DAU数据从130W提升到了200万,增量的70W中有大约30%来自于陌生人一起听。在2021年3月的云音乐整体满意度监测中,22%的用户表示自己经常使用一起听,满意度得分4.66(满分5分),在云音乐所有主要功能中居首位。


未来,我们会继续一起听的创新脚步,还有更多的可能性等待我们探索。希望未来能够为用户带来更多元的一起听体验。最后,我想用下面的这张图来结尾,它是同样主打与陌生人社交和陪伴的游戏《光遇》的一张美宣图,是我最近无意间在它的官网发现的。当时看到这张图后突然发现它和陌生人一起听的入口介绍图表达方式竟然这么接近。在这个温馨的画面里,代表“光”的白鸟围绕着你和我正如音乐环绕着你和我,彼此陪伴、传递温暖、分享喜悦~



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

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

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

动态引导设计

博博

01 前言

在产品设计中,当有新上线的功能或隐藏功能时,我们通常会给予用户提示。常见的有小红点、角标、黑色遮罩+文字提示等这类静态提示。

而人类是视觉生物,相比于静态内容,我们的注意力更容易被动态内容吸引。

今天来聊一下页面中常见的动态引导。

02 一个小案例

当你看到这个页面时



我想你会先被色彩凸出的元素吸引,然后是面积占比大的元素,最后根据阅读习惯从上到下,从左到右,依次查看其他内容。(大致如下图)



而当页面元素都赋予细节时



假如我想让你关注到其中某个较小元素



其实只需要为它添加动态,便能使其脱颖而出,这就是产品设计中的动态引导。



03 动态引导的作用

  • 新功能提示
  • 重要内容强调
  • 诱导用户操作
  • 操作教学指引
  • 信息高效传递

新功能提示 

当产品上线新功能时,设计师们都会根据功能重要程度,来决定使用什么形式让入口元素和其他元素区分开来。常见的有小红点、标签、气泡这类静态点缀元素(通常这类形式只出现一次,当用户点击后就会消失)。当然,也有将上述点缀元素动态处理的。如果入口是图标,甚至可以为图标制作动画,这在很多电商产品的品类区经常可以看到。



动态处理的形式,比原本的静态更容易引起用户对元素的注意力(与动态方式有关),甚至传递某种情绪。由于是循环播放的动画,因此可以持续吸引用户注意力。

ps:据说,每当页面多出一个会动的元素,后台就会多出这样一些留言,捅了开发窝了[Doge]。



诱导用户操作 

动态引导还常常被设计师用来强调重要内容(有可能被产品、运营拿刀架脖子),来达成某些数据指标,通过利用动态诱导用户操作。

例如:在会员卡片中添加光效、在广告中让按钮进行缩放、为签到入口图标设置动画。



这些都能充分引起用户注意,甚至提升功能点击率。



隐藏功能提示 

我们知道,在大屏上有更多空间可以展示信息。但在移动端,受屏幕大小限制,设计师通常会折叠或隐藏不常用的功能,来保持页面简洁。



对于这些不可见的功能,在初次使用时需要进行引导,才能被用户感知与使用。



操作教学指引 

讲到引导,还必须要提的是手势引导,通过动态直观展示不同手势的作用,提示用户如何与产品进行交互。



这在游戏教学中就常常使用,它可以帮助用户快速理解游戏玩法。



回到视频 App 中,你是否留意到,当你第一打开视频时, App 会提醒你双击屏幕可以点赞,上下滑动可以切换视频。



在产品交互设计中,如果使用到一些新颖的交互方式,这类引导可以大幅降低用户学习成本,帮助用户快速上手。

信息高效传递 

动态叙述的直观性,使得我们可以减少对复杂信息进行大量文字描述。通过动态设计,我们可以创建视觉故事,这有助于将复杂信息以更简单、清晰的方式进行传递,从而帮助用户快速完成任务。

也因此,在一些含有复杂操作的弹窗中,渐渐开始应用。



但是需要注意的是,上述这些大多都只在第一次使用时才会触发。

当然有特例,例如:

在 App Store 每次下载应用进行验证时(面容解锁的情况下),系统会通过动态提醒用户电源键位置,并告知用户需要双击进行人脸识别。



在扫码时,弱光场景下出现的手电筒,通过动态引起用户注意,指引用户使用。



以及作为动态演示,帮助用户理解如何使用手掌滑动截屏



如何进行NFC感应等等..



04 总结

动态引导像是设计师用来控制我们眼睛的法宝,有的人用它改善产品体验,有的人用它提升商业转化。

但法宝虽好,我们只有理性使用,才能避免用户迷失在这眼花缭乱的世界中。








作者:
零三



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

为了让用户买买买,小红书做对了哪些事?

博博

在网络购物发达的互联网时代,大部分年轻人(包括小摹)在购买商品前都会在各种平台上找测评贴,其中小红书就是代表平台之一。

小红书入驻了许多博主,从明星到素人,他们经常发布笔记帮大家种草或者拔草,UGC+电商的模式也实现了完美的购物流程闭环,使得小红书拥有了一大批忠诚用户(小红薯)。那么为了让用户买买买,小红书都做对了哪些事情呢?

本篇文章将从小红书App的界面设计和交互设计进行分析。

一、小红书至简的界面设计

『色调』

小红书色调以红色为主,与其名称呼应,同时红色受到年轻女性欢迎,与用户的产品形象相吻合。

该设计还采用了女性喜爱的可爱清新风格

小红书为其垂直官方帐号(穿搭薯、娱乐薯、校园薯等)也设计了可爱的卡通人物形象,为用户打造了小红薯表情包。

『界面』

小红书与其它同类的竞品风格不太类似,其界面给人简洁而又清晰的印象。这种简洁和清晰源自对于功能设置上的克制。在Feed流上,为用户提供最佳的信息阅读体验。

『Icon』

小红书在一些内容丰富的页面,icon一般为线性,降低视觉感;面性的icon则会出现在比较醒目的地方,提醒用户点击;拟物风格的icon一般为礼物图标等。

二、交互设计,如何做到简单?

小红书的整体界面比较简洁,使用起来很简单。首页只有三大功能模块,用户操作路径清晰。底部导航条之间分类明确,互不干扰,常用功能都能很快找到,不常用功能放在侧边栏中,节省了页面空间。

小红书的3种内容方式

图文:图文笔记的浏览界面就是图片与文字分开的形式,图片左右滑动浏览,一般用户会增加标签辅助说明。文字也只能利用图形来增加可看性。此外在文章内还可以增加商品链接,直接引导转化。

视频:短视频的浏览界面与抖音非常类似了,文字说明的内容超过一定字数会折叠。当然也有一些短视频没有的功能弹幕。右上角有分享功能,点赞、收藏和评论则在左下角。

直播:小红书直播内容主要是以互动为主,不同于其他的直播模式,而是以主播分享体验向用户推荐商品,这样的方式更能提高用户对商品质量的信任程度。直播过程中用户可以右滑进入简洁模式,这样直播的弹幕以及礼物点赞特效则会隐藏。

三、小红书的购物方式

小红书电商体量没有淘宝大,商城首页很干净使各个活动入口更加清晰,使用卡片的布局形式展示,可以有效的与轮播广告相区分。小红书在商品界面设计上更加清新、层次分明,让用户能明确操作流程。

购物模块与笔记社区有着非常巧妙的联系,在添加笔记时,小红书也鼓励用户关联商品订单,如果关联,商品购买链接就会显示在笔记中,不仅缩短了用户查找时间,也直接进行了流量引导转化



作者:jongde          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

深度解析蚂蚁财富设计语言

博博







作者:菜菜不甜          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

B端设计思考总结

博博


本文主要从业务分析、交互体验和设计规范三个层面进行总结。



一、业务分析层面

与C端不同,B端产品主要围绕业务为核心展开,面向专业的人员,有固定的业务属性,我们只有将业务理解透彻,熟悉业务的运作流程,才能在B端设计过程中,输出良好清晰的设计架构,更好的解决业务问题。因此,设计师的业务分析能力在B端设计中至关重要。进行业务分析可以从以下几点着手:

1.深入透彻的理解业务场景

我们可以从多方面收集业务相关的信息,包括梳理需求文档,与业务人员沟通等,来了解行业背景、业务目标、组织架构,理清一些专业名词等。业务场景理解的越深入透彻,我们才能建立起一个系统性的逻辑思维,对我们接下来的设计脉络的梳理以及整体设计的把控是越有利的。

2.梳理业务流程

我们可以通过绘制业务流程图,将零散的业务信息通过具象的流程图清晰地呈现出来,有助于我们宏观系统的了解整个功能流程,同时也能够确保业务的标准流程都能够走通,不会出现逻辑问题及功能场景的缺失。

3.理清角色权限

B端用户因其岗位角色的不同,使其具有清晰的角色权限。比如普通成员、管理员、超级管理员,分别对应不同的权限,不同的权限背景下,其功能和业务路径也是不同的。理清角色权限,聚焦当前角色本身的任务流程,避免被无关的信息干扰,可以使我们的业务功能更加清晰,避免冗杂无用功能在不同角色间的穿插,有助于分解信息结构呈现的复杂性。

二、交互体验层面

我们知道,B端设计的核心目标为降本增效,在交互体验层面可以理解为降低认知成本,提高使用效率。而B端设计的一个显著特点就是功能、场景复杂,要达到降本增效,需要我们在交互体验层面上注意以下几点:

1.视觉降噪与引导

B端注重对页面的高效操作,因此在设计的过程中要保持简洁克制,排除过多的干扰元素,聚焦主要功能,弱化或隐藏非必要功能,保证页面信息呈现轻量化,降低用户认知负荷。

同时,通过视觉设计,比如颜色、字号、字重、合理排版等,使页面信息呈现有层次、有重点,能够合理有效的进行优先级的引导,页面信息呈现更加清晰有序,降低页面的复杂性。

2.设计一致性

设计过程中,遵守设计规范,在视觉与交互上保持一致性至关重要。

一方面保持视觉上的一致性,包括字体、颜色、间距、结构等,能够使页面信息呈现严谨有序,保证易读性;另一方面,保持整个系统交互操作的一致性,则可以大大降低用户的学习成本,同时还能够提升开发效率。

3.符合用户心智模型

B端功能交互逻辑复杂,在设计过程中,尽量保持已成标准的用户操作习惯,尊重用户已有的认知,保证内容的可理解性,可以增加用户的熟悉度,降低学习成本。

4.信息层级划分

B端的信息结构复杂,如果将信息完全平铺呈现,不仅占用页面空间,还会大大加重用户的认知负担。这就需要我们站在用户的角度,基于用户的行为路径,进行信息层级的划分。

第一,对页面信息进行梳理,明确主要信息和次要信息,必要信息和非必要信息,将次要信息和非必要信息进行隐藏、收起、删除等,可以有效聚焦核心内容,避免分散用户注意力;

第二,对需要展示的主要、必要信息进行分类归纳、信息分组,通过合理的页面排版布局,使信息结构清晰有序的呈现;

第三,注意层级步骤的拆分,让用户逐级获得信息,路径清晰,避免过多信息杂乱无序的呈现,增加用户认知负荷。

5.预测用户行为

首先,我们通过预测用户行为,在关键交互节点增加功能曝光,给予用户操作建议和提示,可以帮助用户高效流畅的完成任务目标;其次,对用户行为进行预测,主动帮助用户完成一部分操作,比如信息默认值填充等,可以提升用户体验,减轻用户的操作负担。

6.保留旧版返回入口

B端产品结构功能复杂,有使用学习的过程,如果对B端产品进行大的改版升级,会让已经熟悉旧版本且已经产生使用习惯的用户产生一些不适应感。保留旧版本返回入口,让用户慢慢习惯过渡到新版本,可以减小用户学习的压力,避免因习惯问题影响产品的正常使用,无论是对用户的接受度还是对我们改版的顺利落地都是一种不错的方式。

三、设计规范层面

B端系统庞大且复杂,建立起统一的设计组件和设计规范至关重要。

组件规范的建立:

第一,能够保证交互及视觉设计的一致性,提升设计效率和降低用户学习成本;

第二,能够提升团队的协作效率,提高设计还原度,降低对接成本;

第三,组件化设计,可复用性强,能够提升开发效率,在后期的迭代开发中,也可以进行统一的更新和应用,能够减少开发工作量,便于维护。

设计规范比较具体,且不同的项目在规范细节方面也会有所不同,下面主要整理了一些比较常涉及且可以通用的规范和组件。

1.布局

B端系统用户的主流分辨率为1920、1440和1366,我们在选择分辨率时,首先确定目标用户使用场景是否对分辨率有特殊要求,如果没有特殊的场景分辨率要求,基于上下好适配性,通常会选择1440的尺寸进行设计。

由于B端业务场景复杂,信息量比较大,通常选用24栅格系统。

考虑结构布局,根据不同的结构布局,给出动态缩放适配方案。常用的布局为:左右布局和上下布局。

左右布局:通常是将左边的导航栏固定,对右边的工作区域进行动态缩放。

上下布局:通常是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。



2.色彩

B端用色讲究简洁克制,使用户能够高效聚焦功能内容,Ant Design上面对色彩应用的描述为“色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率,影响信息的清晰传达的这些原则之上,理性的选择颜色是关键。”基于色彩使用的目的,B端用色主要分为主色、功能色和中性色。

主色:通常是品牌色,或者根据用户群体、产品定位以及使用场景来定义,主要用在主要按钮、选中状态、高亮信息、空状态等。

功能色:代表了明确的信息以及状态,如成功、错误、提醒、链接等。功能色的使用需要遵守用户对色彩的基本认知。

中性色:主要用于文字、分割线、边框、背景等。

3.文字

字体:中文常用字有:Ping Fang SC、微软雅黑、思源黑体;英文常用字体有:San Francisco UI(SF字体)、Helvetica Neue、Arial。

字号:最小字号不小于12px,常规字号大小一般为14px。辅助文字12px,正文(常规)14px,小标题16px,标题18px、主标题20px,字号的选择可根据具体情况进行定义。

字重:字重通常选用regular、medium、semibold,分别对应代码中的400、500、600。

行高:行高设置一般为字号的1.5倍左右,我们也可以采用,字号+8px做行高。

4.按钮

(1)按照基础样式分为:主按钮、次按钮、虚线按钮、文本按钮、链接按钮



(2)定义按钮的交互状态:Normal(默认状态)、Disable(禁用状态)、Hover(悬停状态)、Press(点击状态)、Loading(加载状态)



(3)对按钮进行规范的制定:包括尺寸、圆角、文字、颜色、背景等


5.表单

表单通常由输入框、选择器、单选框、多选框等组成,具有收集、校验、提交数据的功能。

(1)表单的状态:设计时,要明确规范表单的三种状态

默认状态:即用户输入信息之前的状态;

焦点状态:即用户正在输入信息时的状态;

反馈状态:即用户填写信息后的校验状态。


(2)输入顺序:表单设计时信息的输入顺序按照先易后难,先必填后选填,先公开信息后隐私信息进行,可以减轻用户填写表单的心理压力。

(3)对齐方式:对齐方式分为三种:顶部对齐、右对齐和左对齐。

对齐方式的选择,需要根据浏览效率、屏幕空间以及标签长度来实际判断,做出选择。

首先,需要明确,浏览效率上,顶对齐>右对齐>左对齐。

然后结合屏幕空间和标签长度做判断:

顶对齐:效率最高,标签长度可以更灵活一些,但垂直空间占用多;

右对齐:效率次之,文本字数不可控但又不是很多时可使用右对齐;

左对齐:浏览时间最长,效率最慢,标签字数可控或者需要用户谨慎确认信息时,可使用左对齐。

需要注意的一点是,顶对齐的标签布局之间要有合适的垂直间距,才能浏览舒适,效率更高,通常使用输入框 50%至 75%的高度作为相邻输入框的垂直间距。


(4)校验反馈:校验反馈要具有准确性和及时性。

准确性:主要体现在,要给予用户准确清晰的错误原因和解决方案,以及准确的错误位置。

及时性:表单填写时,出现错误是难免的,为了避免用户盲目填写信息或者出现大面积报错,可以进行实时的校验反馈,比如用户输入完成鼠标失焦后进行信息校验,但反馈的前提条件是不打扰到用户。

需要注意的一点是,成功或者错误等的反馈,不能仅用颜色来区分,需要加入明确的图标和文字来提示,以达到视觉无障碍设计。

(5)标签与占位符:标签和占位符都要尽量简洁,避免文字过多,给用户造成视觉负担,信息描述应该准确、直观且完整。

(6)表单分步:当表单内容多而复杂时,会让用户感到烦躁和不知所措,表单分步不仅有利于减轻用户的填写负担,缓解焦虑情绪,还能够明确了解表单填写的步骤流程。

(7)数据与默认值填充:在用户进行信息录入时,可以通过后台数据库进行匹配,自动填写已知信息,也可以设置合理的默认值,满足多数人需要的默认选择,帮助用户节省时间,快速完成表单填写。

(8)输入框宽度与高度设定:输入框的大小通常对用户输入信息的多少有着暗示作用,输入框尺寸越大,用户会认为是可以输入很多字的。因此,并不是所有输入框宽度一致,就是好的设计,需要根据实际情况,设定输入框宽度,但是也不能设定太多宽度,宽度太多会使表单视觉效果凌乱,宽度设定要合理适当。

输入框的宽度是固定的,但是高度可以根据内容进行自适应调整,来保证信息的显示完整性,给用户以良好的体验。



(9)选项便捷性:表单填写要始终遵循能不填写就不填写,能选择就不要输入的原则。当选项多于5个时,适合使用下拉框的形式进行展示。当选项内容过多,超过下拉框的高度,用户筛选比较困难时,可以考虑是否输入更快,采用输入的方式。

6.表格

B端表格的设计本着清晰易读的原则进行,设计上需要我们注意以下四点:

(1)表格宽度:表格宽度的处理需要考虑自适应问题,主要有三种方式:

a.设定表格的最小宽度,最大宽度不做限制,可以无限延伸,当表格达到最小宽度时,做极限处理;

b.根据需要设定多个等级的最小单元格宽度,当单元格达到最小宽度时,做极限处理;

c.也可以按照表格宽度的百分比,设置单元格宽度,或者固定部分无放大需求的单元格宽度,对剩余单元格按照百分比进行缩放;

(2)极限处理:极限处理主要针对最小宽度,当表格达到最小宽度时,信息展示不全的情况下,常见的处理方式有:文本信息缩略显示、文本信息换行显示、横向滚动显示。


(3)单元格高度:单元格的高度直接影响表格的高度,信息呈现量,以及阅读体验。单元格高度一般在38px~58px之间,高度太大或者太小都不利于阅读,个人实践建议高度为字体行高的2.5倍。

(4)对齐方式:为了提升浏览效率和数据的对比效率,通常采用文字左对齐,长数字右对齐的方式,空数据使用“-”填充。


总之,做好B端产品的设计,需要我们多思考、多总结,规范与标准不是一成不变的,设计过程中要与业务、产品、前端多沟通,才能够做出体验更好的产品。





作者:陈小花儿          来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

日历

链接

个人资料

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

存档