首页

如何建立招聘平台的用户标签体系?

资深UI设计者

目前基于用户画像的标签体系在各行各业开始得到应用,对于涉及范围广,专业知识深的互联网招聘领域来说,建立标签体系的难点是什么呢?应该如何建立标签体系?怎么验证标签体系的准确性?文章对这三个问题展开了分析探讨,与大家分享。

一、招聘领域建立标签体系的难点

电商行业客观来说属于比较简单的toC领域,知识网络是比较容易理解的通用知识,可通过用户的购买习惯、偏好、商品品类等建立标签体系。医疗行业属于专业性强的领域,建立标签体系必须要懂医疗技术的专家团队才可以,但是易于操作的是,只需要医疗一个领域专家就可以完成专业的标签体系建设。

但对于招聘行业来说,行业、职位涉及范围广,且专业性强,因为各行各业的公司和求职者都会通过招聘平台建立联系,而且有很多高精专的职位和候选人,怎么评估B/C端之间专业技能、工种、行业之间的匹配度,确是一大难点,而且理论上来说需要集齐各个行业、各种职位的专家人员才能建立起招聘行业的标签体系,但这在现实中要怎么操作呢?

那么机器是否可以自动完成招聘领域的标签体系建设呢?用NLP抽取职位JD中的描述并将其聚类,比如抽取Java、spring、Unix、Visio、Excel等工具技能,原型设计、交互设计、需求分析等工作内容技能,用户运营、产品运营、数据运营等工作方向技能,这是互联网从业者最熟悉的开发、产品、运营的工作内容和技能,如果机器可以识别这些类别标签就很完美了。

但现实却是看似的完美与和谐,万一Java是出现在了招聘专员的职位描述中呢?用户写的是“负责招聘Java工程师”,假如Visio出现在Java工程师的描述中呢?假如Excel出现在运营专员的职位描述中呢?这些技能还是不是这个岗位的核心能力?

首先,Java出现在招聘专员出其实是可以用硬规则过滤掉的,比如限制职位和技能的关系,也就是说不是所有技能都满足所有职位,有的技能只适用于某些职位,在其他职位内就是无效信息。

其次,需求分析是不是产品经理的技能标签呢?有的人说肯定是了,这个回答可以说对也可以说不对,对是因为需求分析确实是产品的必备能力和工作内容,不对是因为所有的产品经理都需要需求分析,那这个能力还是该产品经理区别于其他产品经理的能力吗?

最后Excel会出现在运营专员内、也会出现在招聘专员内,也会出现在统计专员内,那么它还是个核心的技能标签吗?

通过以上分析可得到以下归纳性的总结:

  1. 不是所有技能都适用于所有的职位,应该定义每个职位的核心技能标签体系,因为非核心的技能有时候不仅无效还会起到反作用;
  2. 不是所有该职位需要的技能或者做的工作内容都是该职位的技能标签,因为它是该岗位的通用能力没有区别度,技能标签应该是该职位工种的核心技能且是可以区别不同职位或简历的。

所以通过以上分析可知,纯NLP机器识别的方式不能完成招聘领域的标签体系建设,因为机器没办法在一个岗位的众多技能中筛选出哪些是重要的知识技能,哪些是不重要的知识技能。

二、如何建立招聘领域的标签体系

1. 基于静态信息的通用标准化标签

招聘领域的标签大家首先可以想到的就是学历、工作年限、薪资范围等比较通用的职位/简历端匹配维度,当然这些显性通用的标签早已被各招聘平台做成了结构化的筛选项。

其次还有一些比较小众的维度要求,比如有的职位要求海外经历、党员、国企工作经历、籍贯、年龄等,有些平台也把其中的某些维度做成了平台上的结构化标签。

不过这些不是我们研究的重点,我们主要研究的是每个职位专业的知识方向的技能。

2. 基于静态信息的专业知识精细化标签

建立专业知识标签体系的重点就是建立专业的岗位研究专家团队,想要做某个岗位的专业知识标签研究,肯定需要熟悉该岗位的人员,是选择从事该岗位工作的人员呢,还是对这类岗位有所了解的HR人员呢?

因此就这两类人员进行了调研与分析,最终发现从事该岗位的人虽然对所从事的岗位了解比较深入,但对其他相关的岗位未必了解,也不太了解招聘过程中用户的感知与思维;

HR人员虽然在专业深度上对岗位的了解不是很深入,但所了解的岗位范围广,只要从事过某个行业的HR工作,基本都熟悉该行业所有的岗位与关注的重点技能,且HR经常使用招聘平台,有用户感知,对用户行为与逻辑都非常了解,所以HR更适合做岗位专业知识研究,而且该专家团队最好是来自各个不同行业的HR人员。

团队建好了,大概的研究思路也有了,接下来就可以好好研究标签体系具体的生产流程与规则了,对此进行了如下图的总结:

体系建立的目的肯定是运用在算法的推荐与搜索中,初期可以通过离线的漏斗数据转化对比(命中标签与未命中标签的转化对比)来验证该标签体系的离线匹配效果,再者可通过灰度实验,小流量上线实验来验证实际线上的匹配效果。

专业知识标签关注的只是匹配度的准,最终线上使用肯定还要考虑用户是否活跃,B端HR是否着急要人,C端求职者是否在找工作,如何平衡专业知识的准与用户行为的活之间的权重也一大难点,要找到那个准与活平衡的比例区间,在这个区间内线上能实现最大的用户达成,这方面在此不多做分析,需要算法同学多次调整模型才能达成。

3. 基于动态信息的用户行为标签

基于用户行为的用户画像标签体系在电商领域中运用广泛,在招聘领域此类标签体系同样适用,只不过电商领域中的“查看-联系卖家-购买”行为在招聘领域变成了“查看-开聊-达成约面”行为。

电商平台中的协同过滤理论在招聘平台也同样适用,只是变成了基于相似职位的过滤和基于相似候选人的过滤。有的企业以往达成的多数是名校候选人,那么我们就知道该企业偏好有名校教育经历的;有的企业招聘销售岗更倾向于在专业知识体系中的有软件销售经验的候选人,那么我们就知道该企业偏好软件行业的销售候选人。

通过用户画像体系我们可以评估用户的偏好,以期在该用户以后的推荐中使用其偏好,达到更好的效果。

三、招聘领域静动态标签体系的综合运用

静态通用标签是所有职类共用的标签特征,属于大批量标准化的生产与运营,通用标签生产完善了,可以实现粗矿式大步快跑节奏的匹配达成;

而专业知识标签是每类职位专业的标签特征,是小批量精细化的生产与运营,在前面大步快跑达到一定匹配度之后,再结合精细化的小步快跑方式,逐步将每个职类的颗粒度划分为更精细化的颗粒度,达到更高匹配程度;

在前面标准化、精细化两轮分类之后数据已经被分成了一个个小类,但却没有衡量单个用户偏好的特征标签,而动态的用户行为标签就是单个用户个性化的偏好特征标签,用户的偏好有可能是通用的学历、年限特征,也可能是专业知识中某个技术框架、某种产品品类特征。

最终,静态标准化通用标签、专业知识精细化标签、动态行为个性化偏好标签,三者相互作用、相辅相成,提升招聘领域线上效果的匹配准确度。

文章来源:人人都是产品经理    作者:艳杰


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


TikTok 的真正优势,从来都不是算法(上)

资深UI设计者

在如今大数据的时代,一些软件会根据我们的地理位置、性别、喜好等等进行算法推荐;能够对一定规范的输入,在有限时间内获得所要求的输出;比如TikTok,以用户为中心进行推荐,度很高;本文作者分析了TikTok 的真正优势,我们一起来看一下。

字节跳动往往被说成是一家算法公司,很多人认为, TikTok是靠算法的黑科技才取得成功的。

事实真的是这样吗?

eugenewei认为不是:TikTok的算法跟其他公司使用的并没有太大的不同;TikTok最大的优势是它采取了对算法友好的设计模式,在自己内部建立了一个飞轮,帮助其机器学习算法看到了优化自己所需要看到的东西。

原文发表在其个人博客上,标题是:Seeing Like an Algorithm;篇幅关系,我们分两部分刊出,此为上半部分。

划重点:

  • TikTok的算法本身没什么不一样;
  • TikTok的不一样在于它的app设计让算法“看到”有效地执行匹配工作所需的所有细节;
  • 现代社交网络巨头的傲慢导致自己陷入到错综复杂的问题不能自拔;
  • 为了让自己的算法发挥最大的效用,TikTok成为了自己的训练数据源;
  • 以用户为中心的设计模式一直占据主导,但算法友好型设计正在逆袭;
  • 为了最大限度地服务好用户,请先服务好你的算法;
  • TikTok的设计使得它的视频、用户和用户首选项对For You Page算法清晰可见。

在我上一篇关于TikTok的文章中,我讨论了为什么它的For You Page算法是让TikTok发挥作用的结缔组织;它就是主板的总线,用来连接和关闭所有的反馈回路。

但是,在急于了解为什么各家公司都想收购TikTok的情况下,如果字节跳动把这款热门的短视频app拆分出来的话,围绕着它的算法的炒作已经有点被异化成那种往往被归纳为最近西方对中国科技分析的套路了。

在这篇文章中,我想讨论一下TikTok的设计究竟是如何帮助它的算法表现得跟它一样好的。

上次我讨论了为什么FYP(For You Page)算法是TikTok飞轮的核心,但是如果这一算法不够有效的话,那整个反馈回路就会崩溃;哪怕你对TikTok或短视频领域不感兴趣,了解一下这个算法是如何实现性也很重要,因为各行各业的公司都日益面临着核心优势是机器学习算法的竞争对手的竞争。

我想讨论的是TikTok的设计是如何帮助它的算法“看”东西的。

一、《国家的视角》 Vs 算法的视角

James C. Scott的《国家的视角》(Seeing Like a State)是那种很独特的书,看过之后你会意识到硅谷就有那种使用(滥用)清晰性这个术语的类型。

我是在看到Venkatesh Rao的书摘之后第一次听说这本书的,如果你不打算看原著的话,那篇书摘仍然是很好的tldr入门读物(Scott Alexander的书评也不错,只不过他的书评也已经长到可以做自己的tldr );不过,我建议你还是要好好看看原著。

Scott那本书的副标题是“那些试图改善人类状况的项目是如何失败的”。

这本书可以提高你对日常生活当中的各种意外后果的意识,当我们也有着伟人一般的傲慢时,不妨保持更谦卑的态度;这个世界比我们想象的要更丰富、更复杂。

比方说,Scott的讨论有很多都跟我们的现代社交网络巨头的某种傲慢感有关;这些占主导地位的应用的目的就是要提高自身用户群的清晰性,其中包括促进互动、防止用户流失并最终提供定向广告;反过来,这又导致他们的母公司陷入到错综复杂的问题之中,至今都未能摆脱困境。

不过这是需要另行讨论的话题了;Scott关注的是民族国家如何用简化的抽象在概要的层面 “看清”自己的公民,而我想讨论的是TikTok的app设计是如何让它的算法“看到”有效地执行匹配工作所需的所有细节的——这篇文章讨论的则是是应用和服务在设计时最大限度利用机器学习新模式。(我知道,这种讨论有点讽刺意味,因为这种“看法”有可能被塑造为另一种决定用户看法的看法,一种美国的科技公司只能作壁上观的看法。)

二、TikTok把自己变成算法的训练源

近年来,至少在像我这样的门外汉看来,我们意识到,只需要通过把训练的数据量增加几个数量级,机器学习就可以取得很大程度的进步;也就是说,就算算法本身跟几年前没有太大的不同,仅通过在更大的数据集上对其进行训练,人工智能研究人员就能取得像GPT-3这样的突破(GPT-3暂时给科技Twitter们带来了高潮) 。

当大家说TikTok的算法是取得成功的关键时,很多人会把某些神奇的代码段看作是公该司的秘密武器。

俄罗斯当代后现代主义作家Viktor Pelevin说,所有的现代电影都是同一个主角:一个装满钱的公文包;从《死吻》的放射性物质公文包,到《低俗小说》里面的那个类似的里面金光闪闪的、不知道装着什么的公文包;从《魔头对捕头》(The Formula)的创世纪方程,到大卫·马梅特(David Mamet)的《西班牙囚犯》(The Spanish Prisoner)里面的秘密的金融处理,我们长期以来一直对有魔力的麦格芬(McGuffin,推动情节发展的对象或事件)感到痴迷。

最近几周,对TikTok算法的讨论已经把它提升成了类似的东西,这个算法就好像是《夺宝奇兵》系列电影(如《法柜奇兵》、《圣战奇兵》…)里面那些神秘的考古文物一样。

但是这个领域大多数的专家的态度不会是这样,他们不相信TikTok在机器学习推荐算法方面取得了迄今为止我们所不知道的进步;实际上,大多数人会说,TikTok的做法大概跟别人的解决问题方法无异。

但是要记住的是,机器学习算法的有效性不仅仅取决于算法,还要取决于利用某些数据集训练过后的算法;GPT-3也许并没有什么新鲜,但是通过接受大规模的数据训练,以及设置大量的参数,其输出往往令人惊讶。

同样地,基于自身数据集训练过的TikTok FYP算法,在将视频与认为该视频有趣的人进行匹配方面非常准确有效(而且,同样重要的是,在不向那些不认为视频有趣的人推送方面也很有效) 。

有些领域,比方说文本,可以轻松获得大量训练得很好的数据;比方说,要想训练出像GPT-3这样的AI模型,你可以到互联网、书籍等上面找到大量可用的文本集;如果你想训练视觉AI,可以在网上和各种数据库里面找到大量照片;训练仍然很费钱,但是至少你手头有足够的训练数据。

但对于TikTok (或者抖音)来说,它那擅长推荐短视频给受众的算法可就没有公开可用的这么大规模的训练数据集了。

去哪里可以找到模因、小孩跳舞、对口型、可爱的宠物、推销品牌的网红、士兵越障训练、小孩模仿品牌等内容的短视频呢?就算你有这样的视频,又该去哪里找到关于大众对此类视频感受的可比数据呢?除了Musical.ly的数据集以外(主要是美国喜欢玩对口型的青少年),这样的数据并不存在。

这是一个独特的鸡生蛋还是蛋生鸡的问题,如果没有这款app的的摄像头工具和滤镜,以及拿到版权的音乐剪辑的话,TikTok的算法需要训练的那种视频就很难创建。

那么,这就是TikTok设计的魔力所在:app会激发和促进视频的创作与浏览,算法然后用这些视频进行训练,再反过来激发和促进视频的创作与浏览,形成反馈回环

为了让自己的算法发挥最大的效用,TikTok成为了自己的训练数据源

三、以用户中心 Vs 对算法友好

要了解TikTok是如何做出这么强大的学习飞轮,我们需要对它的设计进行深入研究。

关于科技的UI设计,主导的思想流派(至少是我成长的过去二十年里)关注的重点是消除用户所做事情的摩擦,并让他们在此过程中感到愉悦;其设计目标是优雅,什么是优雅:优雅就是直观、巧妙,甚至时尚。

也许没有一家公司比苹果把这种设计风格体现得更加淋漓尽致,巅峰状态下的苹果总能把自己的软硬件做出优雅的感觉——“就是这么好用(it just works)”,但同时又很迷人,让用户觉得很雅致。

(苹果控制风格的名声就没那么光彩了——手机、笔记本电脑不可替换的电池,目前有关应用商店规则的争论)在发布新品的主旨演讲时,展示一块硬邦邦的铝块是如何变成崭新的MacBook Pro机身的视频的理由是什么?

因为听到工业激光把那块铝雕刻成一体化机身时发生的声音很性感?然后,当你在咖啡店用那台笔记本电脑敲击一封电子邮件时,在你的潜意识里,有关那段视频的一点残留的记忆里面会不会让你的多巴胺受到一点点的触动?

这种以用户为中心的设计模式在这么长时间以来一直占据着主导地位是有原因的,尤其是在消费类技术里面。

首先,这的确有用——苹果的市值最终超过了2万亿美元(还记得假冒的Sean Parker说过十亿美元很酷吗?那还是十年前,现在十亿美元不再是金牛了,财富的量级在飞速发展。)

此外,我们生活在大规模网络效应时代,应用了Ben Thompson的聚合理论并获得大量用户群的科技巨头,可以在他们所参与的市场当中发挥出不可思议的杠杆作用——要先做到这一点,最佳的办法之一就是设计出能比竞争对手更好地满足用户需求的产品和服务

长期以来,这种设计流派一直占据着主导地位,以至于我几乎忘记了过去时代惯常采用过的一些蛮不讲理的软件设计了。(不要把它跟野兽派设计混为一谈,后者其实就像它在建筑方面的表亲一样,在设计上是相当美的。)

但是,如果要想最大限度地服务好用户的关键要取决于对机器学习算法的训练呢?如果这个ML算法需要庞大的训练数据集该怎么办?在机器学习方兴未艾的时代,这日益成为关键的设计目标。

在考虑如何设计app时,你日益必须考虑怎么才能最好地帮助算法去“看”——为了最大限度地服务好用户,请先服务好你的算法

TikTok让我着迷,因为不管是意外还是有意而为之,这都是一个为了尽可能多地给自己的算法提供有用信号的现代app的典范——这就是我所谓的算法友好型设计的范本。(我曾经想过把它叫做以算法为中心的设计,但觉得这种说法有点过头了;一个帮助算法看见东西的设计到头来仍然是为了给用户提供尽可能好的体验。)

我们仍然可以认为这只是以用户为中心的设计的一种变体,但是对于那些大量采用机器学习算法组件进行产品开发的团队来说,明确地承认这一点也许有用;毕竟,当产品经理,设计师和工程师开会讨论app设计时,算法是不会出席的;但是,对算法的训练需求必须得到体现。

James Scott在谈到《国家的视角》,谈到了城市设计等领域的巨大变化,比如让土地面积和业主数量对征税者“清晰可见”;TikTok的设计使得它的视频、用户和用户首选项对For You Page算法清晰可见;这种app设计履行了它的主要职责之一:“像算法一样看东西”。

我们不妨仔细看看,TikTok打开后就是“For You Page”页面,然后直接进入视频。这就是它的样子。

这个是到目前为止有史以来最热门的TikTok视频,截止到我发布这篇文章时,它的34.1M个点赞可能已经不止了;你可以看看有关这条TikTok是如何诞生的故事,看过之后你仍然会觉得这是一个充满悖论的文化难题,但是你看过后会喜欢的。

我把这个给我侄女看了,然后我们一起循环播放了好几十次,然后我们一起开始大喊“从M到B,从M到B”,然后一起笑了起来,这是我在这场疫情当中真正的感受不是绝望的少数几次之一。

整个屏幕被一个视频填满。只有一个视频,视频用竖屏全屏显示;注意,这是不能滚动的,而是分页。视频几乎是立即自动播放(接下来的几个视频被加载到后台,所以轮到的时候可以很快播放出来)。

这种设计让用户要面对一个紧迫的问题:你对这个短视频的感觉如何?就这个短视频。

从视频开始播放到现在,你所做的一切都是你对该视频的感受的信号;你是不是在它还没播放完就滑向了下一个视频?是的话就隐含(尽管边界是显性的)表示你对它不感兴趣。

你是不是看了不止一次,让它循环播放了好几次?似乎不知怎的它就吸引了你。你有没有通过内置的分享面板分享了这段视频?这是正面情绪的另一个有力指标。

如果你点击右下角旋转的LP图标,看了更多有着同样背景音乐的视频的话,就是该视频对你胃口的进一步信号;音乐线索往往是模因的代名词,现在TikTok又有了一条为你推荐视频的轴线了。

还有,你是不是跑去看了看视频创作者的个人资料页面?你是不是看过她其他的视频,然后还关注了对方?是的话说明你除了欣赏视频以外,也许你还特别欣赏对方这个人。

但是,我们不妨再退后一步,看看这你还没有看到这个视频之前,TikTok的算法自己是怎么“看见”这个视频的;在这个视频通过FYP算法发送到你的手机之前,TikTok的运营团队有人已经看了这个视频,并添加了大量相关标签或标记。

这个视频是跟跳舞有关的吗?是对口型?还是视频游戏?有小猫吗?还是花栗鼠?是搞笑的吗?主体是男的还是女的?大概几岁?是群视频吗?背景在哪里?用的是什么滤镜或视觉效果?如果里面包括有食物,是什么食物?等等,所有这些标签都成为了算法现在可以看到的功能。

视频还要在视觉AI这里处理一下,并为自己能看到的东西做出贡献;TikTok有些摄像头滤镜能够跟踪人脸、手或者手势,所以视觉AI往往在视频被创建出来之前就被调用过了。

这个算法还可以看到TikTok所了解到的有关你的信息,你过去喜欢什么类型的视频?有关你的人口统计学信息或心理学信息有哪些?你是在哪里看这个视频的?你用的是什么类型的设备?等等,除此之外,还有哪些其他用户跟你相似?


文章来源:人人都是产品经理    作者:纸盒小卡车


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

2020-2021 演出用户体验趋势报告

资深UI设计者

新的十年,新技术也悄然到来。人工智能润物无声,5G 应用也渐渐崭露头角。新时代带来了新的技术,新的场景,新的用户。用户体验从未像今天如此丰富多彩又复杂细致,给设计师带来了全新的机遇与挑战。

 

而在疫情的大背景下,对演出行业而言,需要加速传统演出产业的线上化变革适应疫情背景的同时,也要利用新技术尝试增强线下的演出观演体验。这对演出形式的发展提出了更高的要求。

 

猫眼演出设计团队搜集近年来优秀的用户体验案例,并尝试预测未来一段时间用户体验发展的趋势与方向。希望对大家有所启发。

 

 

1. 在线展览突破物理局限


相较于演唱会、音乐节等演出,展览内容向线上迁移的成本较低。2020 年的毕业展览,各大高校采用了不同形式的线上展览,为青春画上圆满句号。


央美的线上毕业展中,几乎 1:1 还原了学校展厅原貌,观众可以在展厅内走动来观察展品。让观众身临其境感受艺术氛围。

 

清华美院的展览中采用视差风格,用户可以将手机横向滑动,感受内容在指尖流动。是更适合移动端浏览内容的形式。


 

2. 演出者与观众线上互动


说起类似「传统直播」的线上演唱会尝试,缺少演出者与观众的互动成为较大的遗憾。在钉钉 Live 与 Beyond 中,观演者可以通过摄像头参与到演出的背景中,并与演出者同屏互动,带来打破空间阻隔的互动试听体验。

 

3. 互动应援棒增强趣味感


荧光棒当然是演唱会不可缺少的一环。而能够与演出互动的荧光棒则能够大大提升参与感。

Beyond Live 推出的互动应援棒,可以跟随演出实时互动,大大增强了演出的临场感。

 

对演出行业而言,疫情的到来是不小的打击。但也激励着从业者往新的方向去探索,寻找为观众呈现演出的新形式。

 

 

人工智能的发展到今天,逐步开始为产品体验添砖加瓦。我们越来越能感受到产品更懂用户了,在合适的时机做正确的事情。而其中让产品更懂我们的,正是 AI 为产品添加的感官。

无论是视觉还是听觉,AI 赋予产品更细致的观察,从而创造更加人性化的体验。

 

1. 自然语义理解与交流


语音类产品可以进行连续对话,并根据上下文进行整体语境的理解。不仅让日常生活更加便利,同时也照顾到听障人士,在打电话这件事情上实现了「文字 - 语音跨感官」的交流。

 

Google Assistant 可以根据用户的要求,打电话与商户老板预约订餐。

 

在小爱同学的帮助下,现在可以用打字聊天的方式接听电话。不仅让不方便接电话的场景得到解脱,也解决了听障人士打电话的难题。

 

2. 对使用场景感知更准确


借助 AI 对周围环境的分析,可以感知到更细致的用户场景。华为 Mate 30 Pro 借助 AI 判断人脸与设备之间的角度,来决定屏幕内容是否需要旋转。相比较陀螺仪对重力的感知,这样的方式可以更准确判断使用场景。

 

3. 内容呈现更智能


在呈现复杂内容时,AI 智能判断画面主体,从而优化给用户呈现的画面。

在 Bilibili 实现的防挡弹幕利用 AI 去分析视频中的人物、动物等「画面主体」,给弹幕添加遮罩层。从而实现画面主体与弹幕的和谐共存。


4. 手势操控


当机器可以看懂人的手势,我们就可以隔空来发号施令了。

在 DJay Pro AI 中,一台 iPad 放在桌面上,DJ 就可以隔空打碟。在难以触控屏幕的场景中,手势也有着其不可忽略的痛点。


在 Mate 30 系列中,用户也可以通过手势来进行截图、上下翻动等常用操作。

 

5. 对 AR 内容的增强


AI 赋予了产品感官,对现实有了更深入的理解。同时也使得 AR 的内容不仅局限于「好看」的展示,而能更好地与周围环境结合起来。

Google Lens 可以根据定位和识别内容判断用户所在餐馆,并在菜单中标注推荐的菜肴。


Rekugaki AR 可以识别画面中的卡通形象,并创建一个纸片人与用户互动。



更新 iOS 14 之后,AirPods Pro 拥有了「空间音频」。结合播放设备与耳机的位置,通过陀螺仪等设备共同模拟一个虚拟声场,让用户有身临其境的空间音频感受。增强了 AR 在音频领域的体现。

 

 

在 2020 年,内容为王的时代,UI 所扮演的角色也渐渐变化。从过去,想尽办法吸引用户的点击和关注,到如今,会更多思考如何包装和凸显内容。

或许润物无形,让用户觉得理所当然的沉浸感,才是 UI 最好的归宿。

 

1. 减少全屏弹出界面


相比较 UI 设计早期对于弹窗的频繁使用,近些年在产品设计中越来越克制对于用户的打扰。从而让用户尽可能沉浸在当前的体验流程中。


在 iOS 14 中,如果用户正在使用手机,来电则以通知的形式呈现,在玩游戏的场景可能尤为有用。Siri 也不再占据全屏幕的内容,而是以底部的小圆球出现。这样假如我们把手机呈现的内容视为沉浸的世界,Siri 更像是一个身边的小助手,而不是专门要跑一趟的柜台了。


2. 全屏沉浸式设计


在很多专注内容的产品中,会更注重沉浸式的设计。减少线框和切割,弱化 UI 和导航元素,在全局视野里都填充内容。

 

Apple Music 的歌词界面中,随着歌声响起,歌词也随之滚动。与此同时,背景也呈现极光的流动感。使人沉浸在优美的歌曲中。


在很多专注于呈现内容的网站中,则更多采用了扁平化、去分割化的设计。让用户更专注于内容本身。Dribbble 的改版中,将导航栏改为白色,背景也变为纯白。让用户不去思考功能模块,而专注于内容本身。

 

 

3. 更贴近硬件的 UI


近几年随着屏幕技术的不断更新,逐步在硬件上呈现出稳定的产品形态。相较于传统的屏幕,手机屏幕的更新出现以下的关键词:

 

而这些新的硬件形态也对 UI 设计提出了新的要求。我们可以看到针对于这些硬件特性,UI 设计也有了新的变化:


 

大圆角风格 - 全面屏

相较于传统的直角屏幕,全面屏为了贴合手机的硬件形态。呈现一个圆角矩形的视野。在 UI 设计中,呈现大圆角风格的卡片设计,能更好贴合这样的屏幕,实现软硬件合一的观感。

 


操作区域下移 - 大屏

如今主流的手机屏幕已经到了 6 寸,于是这对单手操作带来了很大的挑战。各大厂商在不断优化交互细节的同时,也有厂商带来了新的思路。

在三星推出的 One UI 中,将上半屏主要用于内容展示,而下半屏幕放置操作内容。在高德地图上我们也看到了类似的思路。



深色模式 - OLED

OLED 屏幕可以显示非常纯净的黑色,而深色模式可以很好利用这一点。深色模式可以突出内容,也可以因为大部分区域不发光更省电。而用户过去很多年都看惯了白色的背景,突然“眼前一黑”也许眼前一亮。


多任务模式 - 大屏幕

有了更大的屏幕,就要做更多的事情。越来越多的厂商支持系统级浮窗。甚至在 Galaxy Fold 2 中,可以同时显示 4 个分屏,还能再添加浮窗。


 

 

灵活布局 - 折叠屏

新出现的折叠屏形态,则要求产品在布局上更加灵活,在大屏幕上呈现更多内容。在华为 Mate Xs 的「平行视界」功能中,用户可以在左右分屏中展现前后两级页面,购物比价更方便。利用折叠屏的特性,实现了 1 + 1 > 2 的效果。

 

 

信息时代,数码世界已经承载了我们太多的回忆与财富。频繁的身份验证保证了我们的财产与隐私安全,但也带来了诸多的不便。忘掉的密码,湿掉的指纹,忍不住让人大喊「我就是我啊,你怎么不明白」。如何让身份验证变得快速且无感,让生活变得方便且简单。

 

在演出行业中,特别是需要快速准确验证身份的检票场景中,使用 AI + 人脸识别技术也大大提升了检票效率。

 


1. 生物识别的普及使用


人脸总是最好的密码。不论是 Face ID 还是刷脸支付,快速、低错误率的特性,总是让人印象深刻。


Amazon 推出的无感支付超市 Amazon GO,用户不需要进行任何形式的身份验证,拿了商品,走出超市,购物就完成了。

 

2. 传统钥匙被手机替代


iOS 14 中,你可以用手机来解锁车辆,甚至可以通过信息,将车钥匙分享给他人并设置可用时间。


如今每个人都拥有更多的智能设备,如果设备只能独立使用,显然不能发挥最大的价值。好在如今设备之间的连接更快更强大,最终组成快速无缝的优质体验。

 


1. UWB 强化设备的空间感知


超宽带(Ultra Wide Band,UWB)技术是一种无线载波通信技术,能赋予设备空间感知的能力。当设备之间了解了彼此的方位,能在很多场景尤其是家居场景中提供便利。

iPhone 11 搭载的 U1 芯片赋予设备之间的空间感知能力。用户可以将手机对准想要分享的设备,在界面中就会优先展示。

小米发布的「一指连」技术,用户可以将手机对准想要控制的智能设备,在手机中就会自动弹出对应的控制面板。



2. 无感知连接切换


iOS 14 更新后,用户无需对 AirPods 进行断开或重新连接的操作。耳机会在用户在新设备播放声音时,自动连接到新设备。对于设备感知的弱化,就是对体验感知的提升。

 


3. 移动设备成为生产力助手


在 macOS 10.15 后,用户可以将 iPad 作为拓展屏幕使用。并且无线、低延迟、高画质。甚至可以利用 Apple Pencil 在 Mac 的 Photoshop 中进行绘画,作为 Mac 生产力内容的补充。



使用华为手机与 MateBook 时,用手机轻触触摸板即可实现无线投屏。并且在电脑端可以打开手机文件进行编辑、保存,同时支持手机、电脑文件之间的拖拽操作。实现了手机与电脑的快速无缝协同。

 

数字世界如今已经承载着很多人的第二生活,而隐私的权利也在信息时代有了更广的延伸。在产品利用我们的个人信息创造便利的同时,也带来了很多隐私泄露的隐患。越来越多的人开始期待,能够享受大数据带来的便利,而不必担心自己的信息被用在不正当的途径。

 


1. APP 权限透明化


iOS 14 之后的 App Store 中,用户可以看到应用所请求的数据权限。在应用访问剪贴板时,也会在顶部弹出提示。


安卓生态中的反复唤醒是困扰用户的一大问题。MIUI 12 中可以查看应用之间的唤醒、定位、使用媒体的记录,谁是流氓软件一目了然。

 


2. 加大用户信息的获取门槛


MIUI 12 中可以开启虚拟身份或使用空白通行证进行应用授权,这样既可以使用对身份有要求的 APP,也可以避免隐私的泄露。


iOS 相册权限细分为「全部照片」「部分照片」「不允许访问照片」,这样当用户仅希望分享几张照片时,不需要让应用可以访问所有照片了。

iOS 14 之后,用户可以关闭「允许 App 请求跟踪」开关,以此减少 App 对个人信息的获取。



2020 年,90 后三十而立,将要面对更多的挑战,承担着更多的精神与情感压力。

00 后也跨入了 20 岁的年纪,这些 Z 时代的年轻人成为了网络主流。他们追求个性,情绪上更加敏感,表达情感的欲望也更加强烈。

 

1. 关注社会情感压力


面对着 996、内卷与房价,似乎大多数人都在感受着不同程度的压力。

在网易云这样一个主打听歌评论的社区中,出现了大量带有「抑郁情绪」的评论。网易云也被大家戏称为「网抑云」。在发现相关情况后,网易云推出了「关怀计划」,在 App 中接入专业心理咨询的同时,也设计了一些治愈的小功能,帮助大家纾解情绪。在评论中用双指捏合,可以给评论者一个抱抱。在疫情背景的今天,或许是难得的安慰。

 

2. 关注年轻人个性化的需求


年轻人的个性化需求和表达欲望总是更强烈,在产品中满足年轻人的想法,就能抓住年轻人的心。

在腾讯漫画 App 中,切换性别会让首页呈现完全不同的内容推荐。


在 QQ 里,连续 7 天和同一个人聊天可以有一个小火苗,30 天则可以变成大火苗。而针对新朋友和聊得最多的朋友还有四叶草和小船等标识。这些个性化、游戏化的展示,满足了年轻人的展示欲望,和对趣味的追求。

 

3. 减少疫情带来的社交疏离


2020 年,疫情让很多人分隔两地,很多亲密关系很难在线上维系。于是很多产品推出了「一起」功能,在线上可以一起听歌看电影,满足疫情时代,人们的社交需求。

在网易云中,可以分享歌曲给朋友一起听歌。双方都可以控制歌曲的切换与暂停,还能通过麦克风与对方聊天说话。


在 QQ 中可以选择「一起看」,分享给好友之后可以同进度观看视频,还能在下方聊天互动发送表情等。



在本文写完的 2020 年 10 月,我们能看见对疫情的控制程度在全社会的努力下渐渐往好的方向发展,线下的演出在渐渐复苏,行业对线上演出展览的探索也初见成效。

黄明昊 Just 18 Teen 新歌首唱会刚刚结束,猫眼演出 · 超级现场所实现的线上演出直播 + 线下影院观演,与偶像同屏的互动方式得到了粉丝的一致好评。

我们也即将迎来英雄联盟世界赛这样首个大型线下演出项目。相信 AI 人脸识别的技术在闸机入场的应用,能为召唤师们带来更好的观赛体验。


用户体验在 2020 年的发展,已经不局限于新技术的应用,也更考验用户体验设计师对于场景的细致洞察,对于用户情感的细微把控。


文章来源:站酷    作者:猫眼演出设计Team


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

手机appUI界面设计赏析(九)

前端达人


手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。
APP UI设计一直在变化,就像网页设计一样,不停的创作新鲜、友好的产品,设计师要跟上这个趋势,最好的方式就是多看优秀案例,下面大家一起来看看今天的精选,建议访问官网查看更详细的展示哦!
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品,为你的产品设计注入灵感。

精美的天气app赏析


jhk-1598326401155.png

jhk-1599449745424.png

jhk-1599463745307.jpg

jhk-1599464044049.jpg

jhk-1599464056890.jpg

jhk-1599464120576.png

jhk-1603584657783.jpg

jhk-1603584661385.png

jhk-1603584681514.jpg

jhk-1603584690740.jpg

jhk-1603584693258.jpg

jhk-1603584694948.jpg

WechatIMG528.png

WechatIMG530.jpeg

WechatIMG531.png

WechatIMG532.png

WechatIMG533.png









   --手机appUI设计--

  --精美的天气app设计--


(以上图片均来源于网络)


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



  更多精彩文章:

       手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

       手机appUI界面设计赏析(八)


为什么用户注册这么简单,想注销却如此麻烦?

资深UI设计者

最近国外的设计平台频繁出现一类内容,大概类似于「产品设计中的伦理道德与用户体验」,里面的内容有引起我的一些思考。

我先给大家举个例子,来解释一下上面这句话的意思。

以前,我们聊界面的设计,说界面当中如果有两个按钮,就要引导用户走向主要操作,弱化次要的。类似于下图:

为什么用户注册这么简单,想注销却如此麻烦?

这时候一定会有一些设计师告诉你说,这类界面,要以左边这种形式去设计,因为无论从视觉角度、优先级角度还是企业利益角度来说,左边这种都更符合用户操作的逻辑。

为什么用户注册这么简单,想注销却如此麻烦?

或者,如 PayPal 上底部的「移除卡」功能,故意在层级上做的很弱,颜色的处理让按钮看起来甚至是不可点击的。

虽然「移除」对于产品来说是一个危险操作,产品不希望用户进行这一操作。但是对于用户来说,当他们想要这个功能的时候,说明意愿强烈,这时候这种设计会让用户产生糟糕的体验。

于是就有人提出说:

  • 为什么呢?难道就不考虑想要跳过的那部分用户了么?
  • 产品设计就是只考虑对企业有利的用户,而忽视掉那些不想付费的用户?
  • 为什么我们的界面设计不能从更公平的角度去考虑呢?
  • 难道因为这些糟糕的设计频繁的出现,我们就要认为这是好的设计了么?

为什么,用户登录注册就这么简单,但是有些用户想要注销账号却如此麻烦?难道对于这些想要注销账号的用户来说,用户体验就不重要了么?

其实,我觉得这个问题,可以从两个角度来说明,分别是「目的」和「义务」。

作为产品团队的一员,我们的价值在于给公司创造利益,想方设法得到用户的支持与广告商的青睐。所以我们设计的产品都会有特定的目的。

比如,引导用户去购买产品或平台中的商品,以让企业能够存活,持续运营下去。

但这并不是说,企业把一些对用户无用的商品卖给了用户,用户买的这份商品,对他们来说一定是有价值的。产品并不是在欺骗用户购买无意义商品。

比如平台支付了音乐或视频的巨额版权费,方便用户在线上收听与观看,那么用户为这些内容付费是否应当?

企业做这些事,从用户与广告商身上获取利益,本质就是为了赚钱,这一点无可厚非。

所以在产品界面的设计中,如文章开头的示例,采用左图的形式,突出办理会员的按钮,引导用户付费成为会员,似乎也没什么问题。

它不过是利用了「信息优先级」的概念。我们需要帮助用户去理解界面上所呈现的信息,目的是为了让用户更好的操作。如果所有信息的权重是一样的,反而会影响用户的使用,甚至造成体验障碍。

而逆向的,比如不办理、跳过类似的出口也有给到用户,虽然从视觉上相对弱化了,但绝不应该阻碍用户去点击。

从这点来说,上图示例的问题不是在弱化了按钮的视觉效果上,而是按钮太小,可能会导致用户误触「去办理」,让不想办理的用户频繁点错;或者过分弱化界面上的重要元素,明明在眼皮底下,却给用户找不到的错觉,这才是根本性的问题。

比如一些引导页,在屏幕上设置了三个类似「跳过」的按钮,结果只有一个是有效的,产品为了让用户点击广告给企业创造收益,利用这样的方式达到目的,这才是所谓伦理道德的缺失。

为什么用户注册这么简单,想注销却如此麻烦?

我再举个例子。

为什么用户注册这么简单,想注销却如此麻烦?

连续包月,相比普通包月,策略大多都是第一个月有优惠价,以引导用户办理连续包月服务。好处是,大多数用户办理了连续包月,就会长期使用,它弱化了用户的决策意识。

除了部分办理完第一个月就取消服务的用户,只是为了这个月用,利用这样的漏洞省点钱,不过这也仅限于第一次办理了。

那么我们作为设计师,就应该从为公司盈利的角度去设计界面,引导用户办理连续包月服务,而不是普通包月,在界面上做出差别。

同样的,当每个月用户需要自动扣费时,就应该告诉用户,过两天又要一次扣费了,做一个提醒。而不单单是成功办理后,就再也不通知了,这是不对的,毕竟用户每个月都在为产品付费,这样的通知是产品的义务。

如果用户办理的是年会员,已经单次就付清年费,那就没必要反复提醒(也没什么可提醒的)。

在这个例子中,用户体验与伦理道德的界限很清晰,所以我并不觉得它们是相互矛盾的。

我们还可以举很多例子来说明这个问题。

比如 Windows 系统下卸载软件频繁的下一步,甚至还会有错误引导的设计。

为什么用户注册这么简单,想注销却如此麻烦?

再比如,在一些产品里关注了某个人,但是有一天想取关的时候,总是找不到取关按钮。或者,一些产品里并不重要的信息,总是闪着红点引导用户去点击等等。

我们常常会去分析按钮的各种样式,比如是否有圆角,是否有投影,是否要渐变等等;也会去梳理按钮与文案的关系,比如按钮中的文案与边框的间距,文案的大小要适配载体的比例等等;甚至,还会去分析按钮的位置,比如取消按钮应该在左边还是右边,取消按钮与关闭按钮的区别等等。

但似乎,我们很少会去探讨按钮背后的这些事件,我们都知道按钮是用户与某个事物间接的交互控件,但我们从来都只注意于按钮的外形与按钮位置所应有的逻辑,而没有真正去探讨按钮所承载的这些问题。

比如用户点击了「会员办理」的按钮,会发生什么事情?我们是否应该在下个月用户扣款之前提醒他们?或者,频繁的在产品里滥用并不重要红点提示,会不会影响用户对于该产品的使用频率?

这才是我们需要延伸出来思考的事情,而不单单是按钮或者某个控件本身。我们思考的远不止目的,还有义务。

所以。

我并不觉得在产品界面上引导用户执行操作有什么问题,相反,问题在于在引导的同时,不能阻碍用户进行其他的操作,给予用户合理的控制权,才是最重要的。

产品设计的目的在于正向逻辑的用户操作体验,而产品设计的义务在于给予用户拒绝的权利。


文章来源:优设    作者:和出此严


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



让用户爱不释手的医疗类应用程序

周周

的App类别是游戏,而健康&健身几乎没有进入前10。2020年虽是艰难的一年,但它提供了很多机会,可以为移动应用市场引入一种新的经济回报和有意义的医疗解决方案,直接影响人们的健康行为、并帮助他们生活得更轻松、更愉悦。

为此,你需要一个功能强大的App,因为如果不能运行的话他就是无用的产品。但是这种强大的功能还需要通过设计来将它呈现出来。一个优秀的医疗App设计将医药类App最重要的细节呈现出来,并引导用户使用,以及建议用户接下来如何操作,最终完成必要操作。

一个App能凭借自身成为一个的客户开发工具和公司的核心产品。对于与健康或医学相关的产品,UI/UX设计更为重要。

640.png

呼吸监测应用程序-作者: George Frigo

在这篇对设计师和公司都有帮助的文章中,我们将探讨一些医疗App设计中的最佳实践是如何发挥作用的。

医疗类应用类型

值得注意的是,“医疗保健App”是一个多方面的概念,包含了大量与健康和医学相关的数字产品。

这里有很多类型的医疗类App,包括:

医疗专业人员远程病人会诊的App(远程医疗)

电子病历App(EMR)

记录和管理患者生命体征的App

提醒患者服药、锻炼等的App

医疗计算App

提供医疗信息参考的App

健身和运动类App

健康的生活方式和健康App(每日饮水量、睡眠管理等)

这似乎是一个过于宽泛的主题(例如,将卡路里计数器app与医学教育解决方案相比较),但是也有一些通用设计经验可以使得医疗健康类App更、让人们有办法得到他们想要的。

医疗应用程序作者: Victor Nikitin

如何为医疗健康打造移动应用

即使一个App不是企业的主要产品,它也有可能产生巨大的价值。例如,如果它是一个医疗办公室的配套应用程序,它可以减轻员工的负担,为客户提供信息和服务。如果一个健康App是企业的主要产品,比如健身或冥想应用程序,那就比较危险了。有时候,健康App的缺陷是人们放弃使用这些App的原因。

为了避免这种情况,我们来看看医疗App设计中的一些最佳实践技巧,以及它们如何帮助App聚焦、直观和快速。

医疗保健: Anatoly

调研—成功的第一步

在设计原型应用程序界面之前,你需要知道谁是你的目标用户,以及他们的地理环境、社会经济背景和心理特征,毕竟没有产品可以迎合每个人。用户的兴趣和能力决定了他们如何与软件互动。所以解答以下问题将有所帮助:

谁是你的目标人群?

他们喜欢什么?

怎么样的app他们每天都会使用?

使用目的?


通常,医疗健康软件要么被患者使用,要么被医生使用(如果我们将生活服务类软件的用户也计作患者的话)。这两种用户的需求在功能和UI设计上都有不同。因此,医务人员通常需要快速获得某些数据项:EHR/EMR(电子健康档案/电子病历),药品规格标准,诊断和治疗建议,参考资料等。然而患者需要的是尽可能精简的、易于理解的信息项。因为这一群体中有相当一部分老年人或者有某种特殊障碍。

只有进行了恰当的用户调研,得出了相应的结论,设计师才能继续医疗健康软件的真实有效的设计。


Chahua的健康管理软件

细化明晰每个案例

医学对普通人来讲是复杂的学科,最好的方法反而是将医疗健康设计得相对简单,以安抚用户并让他们保持专注。

“世人总将事物搞复杂,殊不知,简单才是至理。” ——Richard Branson

想要给人留下深刻印象,将医疗UI设计得过于详细是没有意义的,最好的是界面和逻辑易于理解,即使软件是专为医务人员设计的(当然,不要居高临下)。

医疗App/档案和活跃度-作者: Igor savalev

设计医疗健康软件的UI,提供有益的新用户引导流程,使界面可直观理解。否则,用户会对糟糕的体验失望,甚至等不到进入核心功能就会退出。

所有相关方,不管是医生还是患者,都会喜欢清晰极简的软件,这样,你就不需要让用户学习如何操作软件,这对医疗机构来讲是个解决办法,他们已经习惯了这些事。

帮助用户稳定发现功能,循序渐进地给予指导。以用户引导流程开始,将app中每个动作划分成可处理块,一次提供一个操作说明。

使用恰当的颜色(更进一步)

利用被动输入和自动补齐功能限制用户必须输入的信息的数量,调整键盘,动态验证字段值。这篇文章里还有更多表单设计相关。

所有医疗信息都得由拥有一定学历和专业知识的专家提供,否则,这些内容要么不完整,要么包含错误,这在医疗健康中是不容允许的。


医务人员使用的医疗软件-作者: yurig

功能的重要性(及特色)

医疗保健应用程序的特性和功能类型取决于它的用途和目标用户。例如,医疗中心的应用程序需要一个账户,病人可以在那里查看他们的就诊、推荐和预约记录。如果没有安全加密的视频会议和通信功能,远程医疗应用程序就毫无用处。

与其他一般APP不一样的地方,“首页”是医疗类的app的主要功能的位置。先来回答一个问题: 为什么有人使用您的应用程序(或类似的医疗类App) ,如果一个人访问一个应用程序来记录或接收一些信息,联系医生,检查他们的进展等,这个功能都放在“首页”上?

呼应前面的观点,就是避免过多功能同时出现时的混乱。不可否认,这种情况在传统的医疗类App中更为常见,这些应用程序有时候会分散注意力,不断添加新的和新的功能,直到只有资深的用户才能理解并熟练使用。

根据二八定律的法则告诉过你,80%的用户倾向于使用不超过20%的功能。区分优先次序,决定哪些功能对用户最重要。

医药应用App作者: Manoj Dalvadi

导航的研究和鉴赏

清晰的导航结构是医疗应用程序用户界面设计的骨干必需组件。没有它,这个App将会不再受欢迎。导航代表和易用,因此从用户的角度来看是有价值的。一个医疗专业人士需要一个能辅助工具,因为他们已经有太多的时间花在处理EHR(电子健康记录)上了,【类似国内的病历本】。

经斯坦福医学院进行的调查发现,医生花在每个病人身上的时间中,有62%的时间花在EHR(电子健康记录)上。如果设计的导航不够,那么这个App就没有任何使用价值。就算病人目前在使用导航的频率很低,但他们也不会乐意看到混乱的导航而放弃二次使用的机会。

重要的导航信息应放在屏幕上显眼的地方,并根据要求提供详细信息。有一个“三次点击规则”说系统的设计应该使任何信息都可以在三次转换中使用。如果用户在三次点击之后找不到他们想要的东西,他们可能会感到沮丧,放弃他们原本要做的任务。

目前采用标准的应用程序导航有:

-汉堡菜单

-标签栏

-导航抽屉

医疗应用-作者: Alex Samofalov

色彩的运用方法

一般来说,应用程序的颜色选择取决于目标用户和应用程序的主题来决定。

医疗保健应用程序的设计通常是在中性色调与流行的冷色调的蓝色和绿色,白色为背景。在大多数情况下,设计师这样做是为了达到某些效果: 利用舒缓柔和的颜色与医疗保健行业的共同联系,缓解焦虑,增加可信度。所以你很少能看到明亮的红色或黄色在医疗类App的界面。


蓝色为主的医疗类App,作者Adam Sokoowski

然而,考虑到医疗软件的通用性,在颜色的选择方面没有特别的限制。要考虑到的是,应用程序的整体外观应该创造一个积极的印象,而不是引起担忧,恐惧,或其他不良情绪的感觉。

例如,下面这个健身应用程序的深色调的设计看起来很漂亮,也不过时:

深色为主的医疗类App

健康与锻炼应用程序-作者: Saepul Rohman

或者用明亮的颜色来增加一些活力:


移动健身应用-作者: Michal Parulski

追求个性

移动App的个性化设计是近年来最显著的设计趋势之一。某些功能需要适应特定的用户模式。

这样设计的目标是帮助用户更地利用App解决他们的问题。这个系统提示了一个人接下来要指示的操作,否则这些可能会被忽略。要做到这一点,必须识别和分析用户特征,并通过数据跟踪用户的行为变化。就像每个人都有自己不同的身体状态一样,他们也希望自己使用的App能根据他们的身体状态提供相应的差异化体验。即使不是医疗保健行业,也有33% 的客户会因为个性化不足而放弃某款产品。

在医疗App设计中,个性化定制选项有很多: 颜色主题、通知、交互元素、使用 AI 创建个性化推荐等等。

最大化可访问性设计

易访问性设计对于每个App设计都很重要,特别是医疗App。

医疗App的用户通常有不同程度的视力和听力,年龄,身体和心理障碍。医疗App的功能设计需要让不同的用户在使用过程中都有比较好的用户体验。考虑不同用户的局限性,并帮助他们努力克服局限性带来的负面影响非常重要。例如,晕动病患者不太喜欢过多动效。

这并不意味着在医疗App设计中只能有两种颜色,所有的字号都必须非常大,但这确实意味对于医疗App,设计师会面临更多挑战。不过这是一个额外锻炼机会,而不是负担。从WC3的网页内容无障碍指南开始,使用像这样的色盲模拟器。

App无障碍设计的例子: 把主要元素放在拇指区,不要忘记选择改变视图为水平模式,字号需要更大,等等。


色盲模拟器-作者: keithar

积极态度的力量

医学不仅复杂,而且通常让人望而生畏。比较聪明的设计手法是让你的应用看起来和医学毫无关系。这样可以消除人们对医学压力的刻板印象,让用户体验更加愉悦。

比如在用户使用的不同阶段运用积极的文案、有趣的图片、舒缓的颜色或其他元素。医疗App界面设计中的图片和图标需要能够用户调动积极、愉快的情绪,营造一种无痛感和安全感。


冠状病毒APP-作者: Mahdieh Khalili

不要将App设计成网页

在有医疗网站的情况下设计医疗App,老板甚至是设计师可能会将网页页面复制到App当中,这样通常会导致用户放弃使用App。

移动端和网页端的交互存在一定的差异性。手机的物理尺寸比电脑屏幕小。在手机上,我们的任何交互都是通过手指来完成,所以不愿意输入冗长的文案,同时期望产品运行得更快。

在大多数情况下,人们使用网站获取信息,使用App完成工作。此外,App集成了手机的功能,比如加速器和摄像头,使App的设计不同于网页。

健康医疗应用-作者: Grace Saraswati

适得其反

保持吸引力与功能平衡都很重要。医疗保健应用程序必须不能分散用户对其内容的注意力。仔细看看上面的要点,注意好分寸就行。

图形元素、包括动效,应该始终履行他们的使命,即数据输入,并说明微交互的用户与系统,而不是仅仅只为了使一个应用程序看起来很炫酷。

不要过度使用渐变和阴影,只将用户的注意力集中在主要文字信息上。只使用一种字体,你可以通过改变字体的大小和其他特征来改变它,比如斜体、粗体。

多使用简单的配色可以获得更清晰的品牌信息和导航。


健康与活动跟踪互动-作者: Dibbendo Pranto

抄还是不抄?

你可能会在某个时候想,如果觉得抄这个方案有用的话?是不是应该拿一些成功的竞争对手的应用程序复制一份。

其实,照抄其他产品是不明智的行为,因为他们的设计可能很容易就不够好。你最终可能正好抄了竞争对手的错误方案,从而阻碍未来应用程序市场运作。

另一方面,你肯定应该对其他应用程序进行分析,进行竞争对手的研究。一个应用程序应该与用户以前使用其他应用程序的经验相关。如果事实并非如此,而且你添加了太多的原创性,那么使用这个应用程序的用户就会觉得很麻烦,用户也不会容忍“一切都错了”的设计。苹果和谷歌都有人机界面指南和材质设计。

用户把大部分时间花在其他事情上 ——Jacob’s Law

有必要根据你的品牌、服务和产品的具体情况进行设计。好比如一个健身APP与一医疗APP,两者使用方向有很大的差异。所以说必须完全符合目标受众的要求、细节,以及应用程序的主题情况进行针对性设计。

药物提醒程序-作者: Martyna Zielińska

实用性测试

最后,要记住最重要的一点,每个设计师都可以认为这个决定是否合理。他们可能会对应用程序的架构和导航的一致性,深思熟虑的设计,以及最重要的实用价值深信不疑,以至于完全忘记了通过实践进行测试,设计师可以提高他们的同理心水平,更好地感受客户的需求。但事实上,这种陷阱会给应用程序带来很多负面影响。

只有在分析了与用户与应用程序界面交互相关的数据之后,才能得出结论。多进行一些测试将有助于及时地获得反馈,解决应用程序中的所有可出现陷阱一样的场景。

积极的用户参与是成功的关键。在年龄、职业、地理位置、性别、文化和宗教背景等方面,选择尽可能接近目标受众的相关测试对象。越接近越好。让他们执行你的应用程序的主要功能并收集反馈。


病历本App应用-作者: Alex Samofalov

最后

设计不单单是讨论颜色搭配和字体的运用,而是能够带来价值和解决业务问题。健康和医疗类App是一个敏感而富有挑战性的课题,需要特别关注。设计师们一直在努力平衡医疗应用程序极高的安全性和可用性要求与其界面的美学性,经过深思熟虑体验和用户界面设计成就一个很好的医疗类工具,让用户在一个简单和直观的界面的帮助下参与使用。

文章来源:花火圆桌(ID:huahuoyuanzhuo)  作者:Kate Shokurova

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

手机appUI界面设计赏析(八)

前端达人

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。
APP UI设计一直在变化,就像网页设计一样,不停的创作新鲜、友好的产品,设计师要跟上这个趋势,最好的方式就是多看优秀案例,下面大家一起来看看今天的精选,建议访问官网查看更详细的展示哦!
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品,为你的产品设计注入灵感。

精美的天气app赏析

jhk-1601983307364.jpg

jhk-1601983312900.png

jhk-1601983323083.png

jhk-1601983337207.jpg

jhk-1601983348891.png

jhk-1601983510160.jpg

jhk-1601983486846.jpg

jhk-1601983405557.png

jhk-1601983393730.png

jhk-1601983386589.png

jhk-1601983370201.png

jhk-1601983358704.jpg

jhk-1601983550558.jpg

jhk-1601983559861.png

jhk-1601983611819.png

jhk-1601983637236.jpg

jhk-1601983644448.jpg

jhk-1601983655750.jpg

jhk-1601983666396.png

jhk-1601983938924.png

jhk-1601983853332.jpg

jhk-1601983698986.jpg

jhk-1601983681824.png

jhk-1601983675132.jpg



   --手机appUI设计--

  --精美的天气app设计--


(以上图片均来源于网络)


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



  更多精彩文章:

       手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)



今年的双11品牌联合猫头海报,简直就是一波天秀!

资深UI设计者

每年的双11在设计师们的眼里,都不仅仅是购物狂欢节还是一场视觉盛宴。这不,今年的双11重头戏来了。

天猫联合各品牌发布了超级符合“猫头海报”,一共55家下面让我们一次看个够。

1. 泡泡玛特,很有意思的创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

2. The North Face场景感十足

今年的双11品牌联合猫头海报,简直就是一波天秀!

3. 好奇很温馨的设计

今年的双11品牌联合猫头海报,简直就是一波天秀!

4. 外星人,一直都想买的电脑

今年的双11品牌联合猫头海报,简直就是一波天秀!

5. VANS,我喜欢他家的黑格子鞋

今年的双11品牌联合猫头海报,简直就是一波天秀!

6. Levi’s,我服了

今年的双11品牌联合猫头海报,简直就是一波天秀!

7. 麦当劳,烟雾的创意很契合产品

今年的双11品牌联合猫头海报,简直就是一波天秀!

8. 惠氏铂臻3,一团线织出来的创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

9. 拉面说,来碗面

今年的双11品牌联合猫头海报,简直就是一波天秀!

10. 宜家家居,仔细看,是购物袋

今年的双11品牌联合猫头海报,简直就是一波天秀!

11. 巴黎欧莱雅,万能的C4D

今年的双11品牌联合猫头海报,简直就是一波天秀!

12. 朗仕,细节很多

今年的双11品牌联合猫头海报,简直就是一波天秀!

13. 华为,冷暖对比很有冲击力

今年的双11品牌联合猫头海报,简直就是一波天秀!

14. 乐高,积木的海洋

今年的双11品牌联合猫头海报,简直就是一波天秀!

15. Marshall,燥起来

今年的双11品牌联合猫头海报,简直就是一波天秀!

16. Jordan,乔丹

今年的双11品牌联合猫头海报,简直就是一波天秀!

17. 肯德基,WOW好吃!

今年的双11品牌联合猫头海报,简直就是一波天秀!

18. 林氏木业,俯视的构图角度,空间感很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

19. 元气森林,故事性很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

20. 强生,满是爱

今年的双11品牌联合猫头海报,简直就是一波天秀!

21. fresh,高端的护肤品牌

今年的双11品牌联合猫头海报,简直就是一波天秀!

22. 万代,为“酷”而生

今年的双11品牌联合猫头海报,简直就是一波天秀!

23. 始祖鸟,化石来了

今年的双11品牌联合猫头海报,简直就是一波天秀!

24. 三生花,旗袍肯定很漂亮

今年的双11品牌联合猫头海报,简直就是一波天秀!

25. HOLLISTER,一起冲浪

今年的双11品牌联合猫头海报,简直就是一波天秀!

26. 施华洛世奇,每个女孩都值得拥有

今年的双11品牌联合猫头海报,简直就是一波天秀!

27. PINKO,乱的有创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

28. MINI,我有个进MINI车友群的梦

今年的双11品牌联合猫头海报,简直就是一波天秀!

29. 孩之宝变形金刚,汽车人变形

今年的双11品牌联合猫头海报,简直就是一波天秀!

30. Onisuka Tiger,日本的运动产品品牌

今年的双11品牌联合猫头海报,简直就是一波天秀!

31. 优衣库,线下实体店的货架创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

32. 三顿半

今年的双11品牌联合猫头海报,简直就是一波天秀!

33. OLAY

今年的双11品牌联合猫头海报,简直就是一波天秀!

34. Dyson,很亲切的表达方式

今年的双11品牌联合猫头海报,简直就是一波天秀!

35. 迪士尼商店,可爱、好玩

今年的双11品牌联合猫头海报,简直就是一波天秀!

36. NIKE

今年的双11品牌联合猫头海报,简直就是一波天秀!

37. 法国娇兰,看起来很贵气

今年的双11品牌联合猫头海报,简直就是一波天秀!

38. 荣耀

今年的双11品牌联合猫头海报,简直就是一波天秀!

39. LINE FRIENDS

今年的双11品牌联合猫头海报,简直就是一波天秀!

40. M.A.C

今年的双11品牌联合猫头海报,简直就是一波天秀!

41. 红星美凯龙,空间感很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

42. NET-A-PORTER,泡泡龙的感觉

今年的双11品牌联合猫头海报,简直就是一波天秀!

43. 稀奇,太喜感了

今年的双11品牌联合猫头海报,简直就是一波天秀!

44. 百威,哟哟切克闹

今年的双11品牌联合猫头海报,简直就是一波天秀!

45. 芭比

今年的双11品牌联合猫头海报,简直就是一波天秀!

46. 李子柒,依然还是熟悉的味道

今年的双11品牌联合猫头海报,简直就是一波天秀!

47. 爱他美3,阳光帅气

今年的双11品牌联合猫头海报,简直就是一波天秀!

48. 花西子,雕刻工艺品

今年的双11品牌联合猫头海报,简直就是一波天秀!

49. 伊利谷粒多,太美了

今年的双11品牌联合猫头海报,简直就是一波天秀!

50. Apple,表情包集合

今年的双11品牌联合猫头海报,简直就是一波天秀!

51. 滴露,传统国风的感觉

今年的双11品牌联合猫头海报,简直就是一波天秀!

52. Moleskine

今年的双11品牌联合猫头海报,简直就是一波天秀!

53. 大疆,很喜欢无人机,有一起拼单的吗?

今年的双11品牌联合猫头海报,简直就是一波天秀!

54. 绘儿乐,这个创意现实中我玩过

今年的双11品牌联合猫头海报,简直就是一波天秀!

55. 乐事,好吃

今年的双11品牌联合猫头海报,简直就是一波天秀!

每个品牌对于猫头的创意表达都不一样,很多都是生活中随处能见到的,但在设计师的眼中,就是创意灵感来源。

下面还有视频版,大家一起看看:

以下视频来源于

看完今年的猫头海报,让我更加期待接下来各品牌双11活动的玩法和创意。接下来让我拭目以待吧。


文章来源:优设    作者:
美工美邦


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


手机appUI界面设计赏析(七)

前端达人

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品,为你的产品设计注入灵感。

还有精美的天气app赏析

jhk-1601983971748.png

jhk-1601983997786.png

jhk-1601984016327.png

jhk-1601984124858.jpg

jhk-1601984237705.png

WechatIMG373.jpeg

WechatIMG374.png

WechatIMG375.jpeg

WechatIMG376.png

WechatIMG377.jpeg

WechatIMG391.jpeg

WechatIMG392.png

WechatIMG395.png

WechatIMG396.png

WechatIMG455.png

WechatIMG456.png

WechatIMG457.png

WechatIMG458.jpeg

WechatIMG459.jpeg

WechatIMG460.png

WechatIMG461.png

WechatIMG462.jpeg

WechatIMG463.jpeg

WechatIMG464.png

WechatIMG466.jpeg



   --手机appUI设计--

  --精美的天气app设计--


(以上图片均来源于网络)


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



  更多精彩文章:

       手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)




设计师要懂的原子设计(AtomicDesign)理念

周周

“我们不设计页面,我们设计构成元素的系统。”——Stephen Hay 

原子设计理论并不是什么高大上的规则。

随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,它最早就是为了让网页设计师更容易理解网页的构成,后来才延伸到UI设计当中。


简单来说,当公司的业务产品逐渐扩大时,我们需要制定一套完整的设计系统,提升设计和开发的协作效率,统一所有设计师的输出物。 开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。因此,原子设计理论的出现就是为了帮助我们去搭建设计系统,这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。

原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质,并且它们一旦被分解就会失去其意义。

分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质,并且相较于原子来说,更具实际意义和可操作性。
有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。 


 宇宙中的物质都可以被分解成为原子元素。

碰巧的是,我们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”完美阐述了我们所有的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。

△Josh Duck的“HTML元素周期表”

接下来和大家细聊一下什么是原子设计;原子设计到底好在哪里;为什么要有设计系统;以及该如何利用原子理论创建自己的项目组件库。

原子设计(Atomic Design)理念最早是由国外网页设计师Brad Frost提出的,他从化学元素周期表中得到启发,发现原子结合在一起,可以形成分子,进一步形成组织,从科学的角度来讲,在宇宙中的所有事物都是由一组有序的原子组成。

Brad将这个概念应用到界面设计中,仔细观察后我们不难发现,界面其实就是由一些基本的元素组成,文字,颜色和图标等都是一个个原子。

 

通过原子设计,我们可以把界面看作是一个连贯的整体,同时也是一些元素的集合,每个元素都不尽相同,互相结合产生更多层次和结构,模块之间相互统一。说到底,原子设计其实是一种设计方法论,它由原子、分子、组织、模块和页面共同协作,由此创作出统一和富有层次的设计系统。 

简单来说:原子结合在一起,形成分子,进一步结合形成的生物体。原子理论意味着在已知宇宙中的所有事物都可以分解为一组有限的原子元素。

原子设计是一种方法,由五个不同的阶段一起工作,以更慎重和更具层次的方式创建界面设计系统。从而创造出更有效的用户界面系统的一种设计方法。

它的五个不同阶段是:

原子(Atoms):为页面构成的基本元素,例如标签、输入框、文字、颜色等;
分子(Molecules):由原子构成的简单UI元素,例如按钮;
组织(Organisms):相对分子而言,较为复杂的构成物,由原子及分子所组成;
模板(Templates):以页面为基础的架构,将以上元素进行排版;
页面(Pages):将实际内容(图片、文章等)放置在特定模板内;

 

原子设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个阶段哦~

原子

如果原子是物质的基础组成部分,那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了 。在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线等。 


在团队开始新项目时,为了保证各个页面具有统一的设计风格,我们会制定一套简易的视觉规范,在关键的设计元素上,各个设计师达成一致,这样就能很大程度保证不同页面的风格统一,并在这个基础上去探索更有创新意义的设计方案。

 


在模式库中,原子一目了然地展示了所有的基本样式,当你回来继续开发和维护你的设计系统时,这是一份很有用的设计参考指南。

分子

分子是原子组合建立的元素,两个原子即可组成一个分子。

在界面中,分子就像是一个由UI元素组成的相对简单的组织。例如,搜索框里的文字和图标共同打造一了个搜索表单分子。

 


 以按钮为例,它的组成元素包含了文字、色块、图标和栅格。合并后,这些抽象的原子从毫无关联到又一个共同的目的,图标和文字互相配合传达意义,颜色定义了按钮的特性,栅格为按钮定义了一个尺寸和规范。

 


将单个元素组装为简单的功能组是我们一直以来构建用户界面的方式,可帮助UI设计人员和开发人员坚持单一职责原则,这种方式简单且复用性高,可以保证界面具有良好的可用性。

以界面设计中的表单为例,表单是一个非常常见的设计元素,一个表单分子是由文字、图标和线条原子组成。这些原子合并后,得到的是一个可以应用在任何信息展示或者功能入口的组合。

 

组织

组织是由分子或原子或其它有机体组成的相对复杂的UI部分 。这些组织组成了界面的不同部分。

通过结合分子和原子,我们可以构建更复杂和可扩展性的模块,这个称之为组织,其实也可以称之为组件,这些组件组成了界面的不同部分。同样以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。从建立分子到建立更精细的组件,这为设计师和开发人员提供了重要的内容构建思路。

 

组件在解放设计师生产力方面有着重要的作用,我们可以把界面中常见的组件进行分类整理,如搜索、表单、图片和卡片等,这些常用组件基本能满足日常的设计需求。以Aribnb为例,他们主要分为3类:卡片、表单和内容。每个标签内容的设计形式尽量都保持统一,因此负责不同内容模块的设计师只要选择同一个组件就能完成页面的设计。在短时间内就可以完成页面超多的复杂项目,极大的提升了团队的设计效率。

 

在网页端最典型的例子就是网站导航,搜索表单,我们几乎访问的每个网站都会看到这些类型的组件。 

模板

原子,分子和组织的这种语言有助于我们有意识地构造设计系统的组件。但是,最终我们必须采用一个更适合描述我们最终产出的语言,这样才好汇报给老板、客户和同事,简单来说就是说人话。

 

模版的本质就是线框图,在这一步我们基本可以看到一个产品的形态。我们可以不断调整组件和分子组合在一起的效果来尝试不同的方案,找到一个相对合适的方案。模版的意义就在于可以专注于页面的内容结构布局,而不是页面的最终内容,此时模版内容是随时可以调整的,尝试不同的方案,在多个模版中进行对比,在这个阶段改动和沟通保证了成本。因此,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。

 

模板是页面级别的对象,它将组件放置在布局中,并显示设计的底层内容结构。在设计一个有效的设计系统时,必须在布局的环境中展示组件的外观和功能,以证明这些部件组成了一个功能良好的整体。

 

模板的另一个重要特征是它们专注于页面的底层内容结构,而不是页面的最终内容。设计系统必须考虑内容的动态性质,因此,把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。

页面

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的「视觉稿」,将占位符替换为有代表性的真是内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的视觉方案。

 

页面阶段是原子设计中最具体的阶段,由于一些众所周知的原因这个阶段非常重要。别忘了,这可是用户在访问你的界面时会实际看到和交互的内容。

除了演示用户所看到的最终界面之外, 页面对于测试底层设计系统的有效性是必不可少的 。在页面阶段,我们可以看到当将真实内容应用于设计系统时,所有这些模式如何运作。所有的一切看起来都很棒吗?如果答案是否定的,那么我们可以回过头去修改我们的分子、生物体和模板,以更好地满足我们内容的需求。

 

页面还提供了一个表达模板变量的地方,这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子:

用户在其购物车中有一个商品,另一个用户在其购物车中有十个商品。
网页APP的仪表板通常显示最近的活动,但是该部分对于首次使用的用户是禁用的。
一篇文章标题可能是40个字符长,而另一篇文章标题可能是100个字符长 

在所有这些例子中,底层的模板是相同的,但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子,有机体和模板的构建方式。因此,创建解释这些变量的页面有助于我们建立更具弹性的设计系统。


 这就是原子设计!这五个不同的阶段同时协同工作,以产生有效的用户界面设计系统。


原子是最基础的UI元素,并且是可以用作界面的元素构建块;
分子是用于形成相对简单的UI组件的原子集合;
组织是形成界面各个部分的相对复杂的部件;
模板将组件放置在布局中,并演示设计的底层内容结构;
页面将真实内容应用于模板,设计出视觉稿,并最终成为开发落地的依据;

 

原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤,能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来,因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制。


通过模块化的设计系统调动组件,可以使我们开发新的产品时,从开始就可以对产品进行严格的把控与一定程度上的控制,进而规避了事后风险。开发之前不确定好系统模块化,毫无逻辑的去开发,开发到一半发现功能与需求对不上等问题逐渐产生,会导致产品的延期、人员成本的浪费、资金成本的增加,产品的迭代率的下降、进而影响市场先机与市场占有率。 

原子化设计与原来的样式库设计思路不一样,原子化设计从抽象到具象,从元素到组件,让设计师从底层开始思考,对整个设计会有更清晰的理解。同时也能让设计更加统一,在新增组件的时候更谨慎。

原子设计的原理可以保证任何一个设计组件的构成与开发构建组件一一对应。同时应用原子设计的设计软件(e.g., Sketch, Figma)可以给新设计师足够的自由满足需求变通,并且可以保证同一个设计组件的更新会覆盖到任何一个使用这个组件的设计中。 

原子设计为我们提供了一些关键的见解,帮助我们创建更有效、更深思熟虑的UI设计系统。

那么、 


如果产品规模小只需要1,2个设计师,大概率是前期不需要大费周章搞一个需要开发配合的设计系统。可以只利用Sketch或者Figma做一个像贴纸一样的设计组件库。但是功能多了怎么办,公司来新人了,当新设计师产出后就会发现与原设计师设计的风格不一样,慢慢发现整体设计风格不统一了,只靠一个简单的组件库很难能满足新功能需求,新功能贴纸上没有设计或者设计需要变通,又或者是新设计师忙着交工忘记检查自己新组件和已有组件的异同。

 

这时候就会需要一个设计师领头去重新整理设计系统,走查发现同一个正文所用的十几个不同字号,又或者是十几个透明度不同的灰黑色字体,所有组件跟现有上线产品对比整理好后一并交给开发,开发再一一整理代码库。

设计系统(Design Systems)对于很多年轻设计师可能十个新名词,但是设计规范和组件等我们应该还是有一定认知的。在设计的过程中,我们会被其影响。在我们日常所使用的App产品中,如Apple、Google、Airbnb、Uber、滴滴等,他们的产品体验非常流畅,用户使用产品时能够地满足需求,在其良好的体验背后都有着一套强大的设计系统做支撑。


为什么需要设计系统

 

1、团队协作,体验一致。以滴滴为例,虽然只是一个简单的打车应用,但是其旗下的业务却很多,快出、出租车、顺风车等,每个业务都由不同的团队和设计师负责。可以想象如果没有设计系统,任由各模块设计师自由发挥,风格各异,出来的结果可想而知。而有了设计系统的帮助,就会感觉界面风格非常统一,感觉是出自同一个设计师之手,可见其设计系统的功劳不小。

 


2、系统的管理多样性。在设计过程中,我们会发现过程中,我们会发现每个业务的形态都是基于不同的场景,因为场景的多样性,在表现上就会催生出不同的样式。如果每个业务都用一种样式表达,久而久之当业务增长过快时,我们现有的设计模式就会难以满足。Airbnb的设计方式就是非常值得参考的一个案例,从最开始是提供民宿,到后来新增的餐馆服务,你会发现房源和餐馆都用了同一套图文信息结构,只是在内容的细节上有一些不同。这样可以降低设计的难度。设计师不用为每个场景思考一个设计模式而烦恼。同时,用户在浏览不同场景的内同时,在相互切换中也不会产生为违和感,一切都是很自然的操作。

 

 

3、帮助产品成长,避免一次性设计。互联网产品的成长模式是一种渐进式迭代,在产品初期的主要诉求是快速上线,等到产品上线获取一定的用户,证明它可以活下去时再逐步完善,增加更多的功能。每一次的迭代都是站在我们之前的思考之上,每一次的优化都会让我们的设计更进一步,这是我们期望达到的结果。

 


以Uber为例,新版本继承了黑色按钮的设计,并和地图进行了结合,地图的配色和旧版本相比也变得生动了,这种改变并不是一蹴而就,而是建立在原有版本之上。

一致性(Consistency):由于分解界面成单一元素,不论在哪一个页面,UI元素的互动性是相同的,例如颜色变化、字体的排序、以及反馈。不但让使用者体验相同,在视觉上更为和谐。


效率(Efficiency):由于建立了组件库,一旦要更改某一个元素,可以马上施行、应用。


跨部门的共通语言(Collaboration):不仅方便设计师思考页面的和谐性,也可以让工程师、测试检验清楚页面的逻辑架构及变化,减少不必要的来回沟通

在此,顺便浅谈下设计系统。

通常,设计系统包含的内容由设计原则、设计语言和组件库,这是一个整体的概念。

 

设计原则

设计原则是一个产品的核心设计理念,设计的本质就是解决问题,在制定设计原则时要建立在这个中心思想之上。这些问题也许是一个业务形态,例如打车的场景,也许是一个设计形式,如表单。设计形式又很多,我们应该如何选择呢?相对合理的方法就是建立一个规则,所有的问题和形式都想这个规则靠拢,减少不确定性,这就是设计原则的出发点。因此我们可以理解为,设计原则就是一系列的规则,是我们设计过程中要遵循的中心思想。

例如:苹果把审美作为第一要素存在于设计原则中,它的产品往往也是品味的代名词,看看它的设计原则就知道了:

审美的完整性

一致性

直接操作

即使的反馈

隐喻

用户可控

 

△ 官网:https://developer.apple.com/design/ 

再来看看Material Design,Google对其定义是一个完整统一的系统,结合了理论、资源和工具的数字体验产品,相比而言它的设计原则就是更加独特,这是它的设计原则:

材料是一种隐喻

大胆/图形/强调/

运动赋予意义

灵活的基础

跨平台 

△ 官网:https://material.io/design

由此可以看出,和iOS相比,Material Design的设计原则更加的抽象,因为他拥有一个独特的设计世界观,用还原的方法和物理方法呈现出它的本质,通过抽象的视觉卡片传递出设计的目的和原则。

设计语言

 在建立设计原则后,下一步就是制定一套设计语言规范,设计规范是设计系统的表现层,面向的对象是团队设计师和开发者,他能帮助设计师的设计输出保持风格统一。同样也能帮助开发者高度还原设计。非常有利于设计师和开发者的协作。这套规范包含的有:字体、颜色、图标和栅格。 

组件化设计

组件化设计主要作用有两点,一是保证多人协作效率,组件化设计可以快速完成一个简单页面的设计,提升设计效率;二是保持产品体验的统一性。同时,组件化设计环节在设计系统中是一个相对重要的工作,需要有一个全局观,要有较强的设计水平和沟通协作能力,这样,组件化的落地才会得到很好的推进。

 

在多屏时代,我们时时刻刻都在设计产品界面,需适配多系统,其中很重要的一点是如何在多系统之间保持体验一致性,很多人想到的就是规范,要想做一套严谨逻辑好,灵活的设计规范,那么原子设计可以帮助我们来很好的实现它,它在构建设计系统中算是比较科学的一种方法,国外很多设计团队都在使用这样的设计方法。比如以下这几个团队: 

1、Airbnb

Airbnb设计副总裁Alex Schleifer在IXDC2017国际体验设计大会上分享了这一创新React Sketch app 管理设计系统, 这是为Airbnb的设计系统而设计的,其实就是个实时更新的代码数据库,可以实时查询sketch数据、代码,也可以下载图标、设计模块,所有工程师、设计师都可以免费下载。

△ 官网:https://airbnb.design/events/when-we-use-systems/

2、Frames

Frames 使用了精致的组件和先进技术,并结合 Sketch 构建了强大的 Web 设计系统,同样能满足修改原子,全局同步更新的功能,支持响应式布局。提供了近百个网页模板,可以非常迅速地完成效果图制作。

△ 官网:http://framesforsketch.com

3、Nested Symbols

这是一套免费的设计系统,它将按钮、输入框、下拉菜单、通知等控件,都制作成了嵌套符号,方便自定义和编辑。

△ 官网:https://www.janlosert.com/ 

原子设计理论最大的价值,就是为设计体系/组件库的构建提供思路和方法,如果你不满足于市场上现有的设计系统,我们还可以自己创建。因此我们首先要为产品设计出一个独特的视觉语言作为起点。这个视觉语言一定要有力度、易于扩展,必须能在所有地方奏效!


接下来就以 Sketch Library 功能来实现组件库的创建。

第一步:定义颜色(color)

将颜色添加 Main、Text、Status 等一级分类,例如:Color/Status;再添加二级分类,例如:Color/Status/Success 等,命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。

 


第二步:定义字体(font)

根据设计规范,将不同字号的文字样式罗列出来,例如:Title 1、Body、Body2 等,按照「样式名称/颜色/对齐方式」的层级结构,将文字赋予 Text Style,整理出所有的字体样式。

第三步:定义图标(icon)

将图标放置在 24*24px 大小画板内,从定义好的颜色系统中选择合适的 Symbol,这样替换图标颜色时直接选定义好的颜色就可以了。在属性面板中锁定尺寸(size)大小,并把调整尺寸(Resizing) 设为上下左右同时吸附,以确保图标在使用时可以等比缩放。

 

第四步:加入其他元素(Elements)

 

根据以上对原子的定义和命名方式,依次完成对其他原子、分子和组织的定义,例如:按钮、表单、空状态等,整个过程都是通过 Symbol 的不断嵌套,最终实现组件库的创建。

 

第五步:加入组件库

 

使用快捷键「cmd+, 」打开 Preferences 面板,选择「Libraries」(组件库)标签,点击「Add Library」(添加组件库)按钮添加刚才的 Sketch 文件,完成后就可以从其他的 Sketch 文件中,对此库里的元素进行调用了。

 

 

写在最后,原子设计是一套具有科学严谨的创建设计系统的方法论,是一个构建UI系统的心理模型。

 


原子设计使我们可以将我们的界面UI细分为原子元素,并通过这些元素组合在一起形成最终的界面。

原子作为整个理论最基础的元素,当我们改变其中的原子时,整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙,当我们改变其中一个元素时,其他所有包含这个元素的页面都会发生变化,可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理,这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。

经常有同学问ios设计规范,安卓设计规范在哪看这类问题,最后,来推荐一些大平台的设计网站,上文出现过的下面就不重复了。我们耳熟能详的优秀设计都是来自于这些世界互联网公司,说真的,审美这东西还真是人家说了算~


反正看看又不要钱,都去康康呗~

 

Google Design

谷歌设计中心,它非常全面的展示了谷歌的设计工作和概念。包括Material Design在内的所有关于设计、体验、产品等互联网领域的探索。 

△ 网址:https://design.google/

Fluent Design

微软基于Windows10的设计语言,包括人机界面布局、控件、样式及资源下载。

 

 

△ 网址:https://www.microsoft.com/design/fluent/#/

 

IBM Design Language

IBM设计语言是伟大设计的代名词,他将人们的需求转化成精心打造的产品。在这里可以学习IBM设计团队一用户为中心设计的新思维方式。

 


△ 网址:https://www.ibm.com/design/

 

Facebook Design

脸书设计官网,在国内,我们常常看到脸书的设计文章被翻成中文为中国设计师所学习

 

 

△ 网址:https://facebook.design/

 

Uber Design

作为全球第一家即时打车应用,优步其超前的设计理念和优秀的用户体验成为同类产品竞相模仿的对象。

 

△ 网址:https://www.uber.deign.com/


Ant Design

蚂蚁金服设计平台是阿里旗下子公司,基于蚂蚁金服生态系统的跨设计与开发的体验解决方案。

 

△ 网址:https://design.alipay.com/


参考资料

《原子设计》官网

Airbnb 设计规范

Apple 设计规范

Material Design设计规范

Google及其他

文章来源:tob.design

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

日历

链接

个人资料

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

存档