首页

原来设计规范要这样理解,早知道就好了!

周周

1.什么是设计规范?


设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。


于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。通过这套标准,能减少错误发生率并提高设计质量和输出稳定性。


举个例子,我在做QQ3D厘米秀项目的时候,一开始合作方提交的设计资源正确率很低,风格也各不相同。然后为了解决这个问题,我在项目中定义了流程标准,资源标准,cp合作标准等等。通过这些规范让多个不同设计团队能合作到一起,提升了整体协作的效率和质量,这些标准就成了设计规范的一部分。

 

514dce736beaa30c87958009b78fc82e.jpg

 

可以说,每个项目因合作方式,人员习惯,落地形式的不同,所形成的规范是有区别的。所以,设计规范更应该是针对项目来说的,除非是问你AndroidiOS这种已经广泛适用的平台级规范。不然是很难有标准答案的,回答更应该是一种思路的描述,比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升


2.设计规范的作用



1)遵守用户习惯,减少认知成本

Don't make me think。大家都知道,好用得产品都是尽可能的减少用户思考,不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时,你会熟悉的去左上角找返回操作,但如果把返回操作放在右上角就会很不习惯;再比如对国内用户来说,他们习惯正确按钮用绿色,错误按钮用红色,如果你非要反过来制造所谓的差异化,用户就会感到困惑,误操作的概率也可能会大量增加。

 

3a186e36427aa7cb980f9fef4aab06f0.jpg

 

2)统一品牌性格

品牌性格不论是大到公司层面,还是小到具体某一个产品,都需要有一套品牌识别体系来约束,只有统一得视觉印象才能更好的让用户记住。那这些品牌识别体系其实也是设计规范的一部分,在具体执行中,可以根据一些品牌核心概念规范快速做一些风格决策。
比如腾讯QQ的品牌影像风格关键词是青春、互动,叙事和干净,那么在选择画面配色的时候就可以根据关键词指导画面的选择,使得整体的画风得到统一。

 

64d113f1c0ef185dbafc8e506b1b64ab.jpg

 

3)降低新人学习成本

这里所说的新人不单纯指刚入职场的设计新人,也包括刚参与到一个新项目的设计老手,设计规范是能够以的沟通成本实现快速上手。有成熟的控件资源和标杆的设计参考,就算是之前完全没做过的设计师也能搭建出一个还不错的页面。

 

85aa22462457a692f4cbc5f1b33d2697.jpg

 

4)提高开发效率

有了好的设计规范,开发就能把一些常用的样式进行封装,在需要复用的场景中直接调用。这样做,一方面可以通过调用的方式减少样式代码的复制使用,提升效率的同时降低软件包体积,另一方面也可以减少不必要的工作量,方便后期维护。

 

321b7b91cfcb6febb9232766a53408da.jpg

 

5)保证设计的一致性

有设计规范的约束,能让团队在一个既定的框架内做设计,统一大家的输出质量,从而保证设计的一致性。

3.怎么学习设计规范


设计规范的学习肯定不是靠死记硬背,而是要讲究方法,从我自身的经验来说,我觉得大致可以有以下2个步骤:
1在新手期,多去看一些大厂的设计规范,先建立认知,不要求全部记住。把这些规范当成字典,先大致了解一遍,等真正做的时候拿不准再去查阅就好了。这里推荐几个必看的大厂设计规范官网,建议收藏。
苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines
谷歌Material Design设计官网:https://material.io/design
微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent
IBM设计官网:https://www.ibm.com/design/language
Facebook设计官网:https://design.facebook.com
蚂蚁金服设计官网:https://ant.design/index-cn

 

cec0eee09ad1a5fe35afea81d7be1e51.jpg

 

其实网上很多设计规范,原理之类的文章,源头都来自于这些大厂规范,想获得一手信息,最好是自己去这些网站多看看
这也就是我为什么不写具体规范数值的原因,因为网上的资料实在是太多太详细了,写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己,需要更多的主动性,这样才能提升自己的学习能力和解决问题的能力
2
针对自己要做的模块,有针对性的找市面上大厂的应用作为参考,直接截图标注,自己总结规律印象会更加深刻
我开始做UI的时候就这样学习的,不知道字体该用多大,间距用多大,颜色怎么用,就直接去找相类似的界面截图参考,量它们的尺寸,吸它们的颜色,然后就这样一步步的把规范经验积累起来了。
比如从QQ的动态tab页面中,我们可以借鉴到很多信息,比如列表的高度,列表左侧的图标尺寸和圆角,间隔线高度和配色,右侧的箭头大小和配色,列表文字的字号和配色,用户头像大小和结合的样式,图标与文字的间距等等。这些借鉴并非是抄袭,要你做的跟这个界面一模一样,只是参考这里面的某几个属性然后结合自己的产品综合运用,减少出错

 

0d51a9a4f66b658e69bf2bf339d7e540.jpg

 

发现了吗?一个优秀的界面设计,上面的任何信息其实都可以拿来参考,就看你会不会用了。

需要强调的是,这些参考来的标准,并非是标准答案,还是要根据自己的实际项目需要做调整,只是至少知道一个范围,在这个范围内不大会犯错

这就像刚开始做设计时一样,去参考这些规范相当于做临摹的练习,这种临摹是需要的,临摹的过程中不断加入自己的思考,然后通过总结,变成自己的知识体系

4.怎样定义出设计规范


随着对设计规范理解的加深,自身设计能力的不断提高,就要开始从设计规范的使用者转变为规范的制定者了。如何制定针对项目的设计规范呢?我的经验是在项目过程中把做的好的和踩坑后的正确解法进行总结,并形成文字,积累多了就形成了规范要把每一次遇到的问题都当成是一次改进流程和规范的机会。
我自己是有随时记录的习惯,项目中一旦发现问题就会赶紧把它记录下来。有时候甚至还蛮期待出现问题的,因为出了问题才能找到优化的机会,自己也能从中找到解决问题的成就感
曾经在QQ3D厘米秀项目中遇到过非常多的坑,然后从填坑的过程中慢慢总结出各种设计规范,去帮助项目减少错误率,提升设计质量。从最终的产出和结果来看,自身的进步是可观的,对产品的帮助也比较大,所以很值得去做。

 

12198423a536ff1d106cd06770d7098d.jpg

 

5.使用规范会影响设计的创意性吗?


刚掌握设计规范的时候,干活是特别舒服的一件事,因为做需求可以很快,好像拼拼组件就能完成。但稍微做久一点时间,又会觉得好像没啥进步,天天拼组件,担心影响设计的创意性,真是挺矛盾的。
其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程

总结


设计规范绝对不需要死记硬背,而是要充分理解并灵活使用,才能发挥它的价值。随着UI行业的不断成熟,设计工具的简单化,各种组件化资源和思维越来越普及,可以预见的是未来一般的UI界面会高度组件化,设计师单纯在界面上花费的时间可能会越来越少。
这从行业的发展来说,减少了很多体力劳动,让设计和开发有更多的时间去打磨产品细节,肯定是好事。但对设计师自身来说,省下了以前那种常规设计需求的时间后还能做些什么,设计师的价值又在哪?值得每个设计师去思考

 

文章来源:彩云译设计     作者:彩云


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



从品牌到UI-用设计的思想与这个世界和解

周周

今天分享的题目是从品牌到UI,用设计的思想与这个世界和解;这里的我说的和解比较宽泛,大家可以理解成与客户和解,也可与产品经理和解,也可以是与自己和解;

为什么选这个主题呢,原因是之前在网上听一群人总是说互联网走到了下半场,我和好奇,就去查这个下半场到底是什么,后来总算知道了,互联网行业走到现在,已经从增量时代转为存量时代,这个存量时代就是下半场,人口、流量、资本的红利都逐渐收紧。

在这种情况下我的产品如何从同类产品中脱颖而出,或许增加品牌属性是种方法,希望大家在听完这个分享后,会有一些启发。

在互联网的增量时代,品牌设计与UI设计是两条平行线,几乎没有交集,你做你的画册、slogan、包装,我做我的网站、app、微信小程序,偶尔互相模仿,但也不是主流,毕竟两者载体不同,目的不同,用户也不同;

但是到了存量时代,影响用户选择的一个重要因素是「品牌」,一个产品要想从同类产品中区别出来,需要有个性,UI+品牌成为产品生命周期中重要的一环,下面我们看看如何在用户心中植入产品品牌; 

 

 

在在品牌植入方便,国外很多产品已经走在了我们前面,我们来看看谷歌,谷歌开发者大会上对 Material( Design做了更新,我印象特别深刻的是Google对图形语言单独拿出来做一个模块解释它,它提取了圆形作为视觉DNA,并沿用到产品的每一个控件;


当然,如果我们想传达我们产品的品牌理念,只在图标组件里运用是远远不够的。

诞生于1886年的可口可乐,每年都做产品运营推广,不断大量的重复它logo的弧线元素和瓶子的外形;

还有刚刚过去的双11,从2012年11月11日开始的天猫节,现在是全球最大的B2C平台,天猫猫头运用也是渗透到全产品线里面去了,问大家个问题,大家有没有人知道这个猫头品牌是谁创立的?其实就是马云的继任者,现任阿里巴巴集团董事局主席张勇;讲的有点远了,我们再回到我们的主题;

这个图很好的解释了品牌与产品与用户的关系,产品需要品牌牵引、支撑,现在互联网产品越来越趋于同质化,UI 设计师已经不能局限于界面的表现层,更要了解产品背后的逻辑,然后以业务为依据设计品牌,以品牌为基准去设计产品。

  

第一章意义Significance,这个章节我们讲讲从品牌到UI的意义


 

第一个意义是对内:可以规范统一,协作

品牌本身就可以作为设计规范的一个重要指导原则,通过对配色、文字、图标、控件等建立设计规范,可以有效减少设计决策时间,传达一致的品牌调性。

 

 

 

第二个意义是对外:可以提高认知,溢价增值

如果一个产品失去了个性,不看 logo,单纯看界面的话,很多时候根本分不清是到底是哪一家公司的产品。如果能够关注设计细节对品牌的影响,肯定能更好地提高用户对产品的认知,当你对一件产品注入了感情,同时也就为产品提供了营销推广的立足点;也可以这么说,设计师创造的情感性价值,直接实现了产品的溢价增值;

第二章感知Perception


有位设计界的前辈讲过,品牌知名度其实就是信任度的体现,他说世界上最成功的品牌就是宗教,这里没有诋毁任何宗教的意思,但是宗教建立的品牌信任度,远远超过了任何商品;

这里我们从用户的角度出发,看下用户是如何从产品感知品牌的;

在设计产品的时候常常会发现我们觉得理所当然的地方,用户往往没按我们想的方式去使用。那是因为设计师通常有整体观,站在金字塔顶端去规划一个产品的设计,而用户则恰恰相反,在金字塔底端往上爬,他们不知道这个金字塔多高,也不知道从哪一面开始最好爬,所以会遇到各种问题。

同样,用户对品牌的感知由低向高的,用户通过各种场景接触到产品,再通过产品的视觉呈现、功能体验、信息内容等感知品牌,最后在心中形成印象,构建品牌信念,从而影响下次产生相应需求时对产品的选择;

可以联想下我们的购物体验,是不是总是从同一个地方shopping,这就是购物APP品牌价值已经使你已经形成了习惯选择;

作为设计师,我们需要充分理解品牌内核,由内向外将抽象的品牌内核转化为具象的视觉符号,再延伸到用户与产品的各个接触点,从而将品牌理念植入用户内心。

第三章融合Integration既然上面我们讲品牌和UI最终要走的一起,这一章我们讲他们如何在工作融合

 第一步,明确定位,提取关键词,建立情绪板

当代广告教皇,美国奥美广告创始人大卫.奥格威说,“最重要的决定是如何定位你的产品。”

在大师的指引下,我们发现首先找到品牌定位,定位自己的细分市场和目标用户;

2.围绕品牌定位提取关键词;

3.建立情绪版,将抽象的概念转化为可感知的视觉;

第二步,提取视觉表现元素,并设计融入品牌定位。我们重点从颜色、图形、纹理、字体四个方面讲一下。

有时甚至不需要任何图形,单凭颜色就能产生对某一事物的联想。


现在UI设计流行的极简风,我们发现这些应用采用极简化设计的同时,图标也变得更鲜艳,更引人注目,说明这些产品也在寻求一个平衡,在 UI 设计变得极简趋同的同时,仍然能保留核心的品牌基因。


颜色在 UI 中的表现有 logo、导航栏底色、图标、文字、可视化图表、插图、按钮等等。 

现在UI设计流行的极简风,我们发现这些应用采用极简化设计的同时,图标也变得更鲜艳,更引人注目,说明这些产品也在寻求一个平衡,在 UI 设计变得极简趋同的同时,仍然能保留核心的品牌基因。 

图形

我们知道颜色是抽象感知,图形是相对具象的表现方式。

一旦某个特有的图形在用户心中形成烙印,用户见到相似的图形组合都能往该图形联想,从而关系到图形背后所代表的品牌,这也是很多企业做品牌升级的时候 logo 都越来越简洁的原因,因为这样能有效降低用户的认知负担,提高品牌认知。


图形通常从 logo 本身提取,并在 UI 中延伸应用。比如马蜂窝、百度网盘、京东做品牌升级的时候都不约而同地从 logo 中提取了一个代表微笑的弧度,传递友好、温暖的品牌形象。

 

飞猪提取了 logo 中「猪的发型」用于搜索框,韩国的电商品牌11街也将 logo 延长作为界面中的搜索框。

纹理

在 UI 设计或者运营推广运用中,通过提取品牌图形元素,再运用分形、排列、重复、平铺等设计手法形成品牌纹理。

我们看看京东的启动页用 Joy 的外形旋转做成的纹理背景;

国外著名的聊天应用 Whatsapp,在聊天页的背景用涂鸦插图纹理做背景;

还有腾讯文档的启动页、登录页用了渐变的菱形作为纹理,辅助品牌的视觉表现。

我们还在聊图形复制变形的时候,国外的UI设计已经细化到了十分惊人的程度

例如UBER 在做的品牌升级,设计师出来将每个国家富有代表性的图形提炼, 然后重复运⽤平铺,形成带有地域特色的⼏何纹理,运⽤到闪屏和线上线下的产品当中。

 


 

字体

字体是最容易被忽视的设计元素,很多人会认为 UI 中的字体用系统默认的就行。其实字体对于产品气质的体现着很大的作用,很多品牌都把字体设计当成品牌基因中重要一部分。

字体的选择需要契合产品功能特点与品牌调性。

 

微信读书使用了方正宋三,让人阅读起来有种文字秀丽的浸入感;每日故宫使用了方正清刻悦宋体,字里行间隐含着历史古韵,渗透着文化气息;澎湃新闻使用方正准雅宋体,体现其作为新闻产品「专注时政与思想」的严肃一面。


英文字体也可以使用契合产品气质的英文字体。比如常被用作数字字体的 Din、经典的衬线字体 Playfair Display、⾕歌御用的 Roboto 等。

 

第三步,融入品牌触点

这里我解释下品牌触点这概念,是指一款产品中品牌信息接触点,是决定用户对产品品牌印象的关键;

我们看几个案例,

启动页:知乎的启动页采用 slogan 加 logo 的方式来体现品牌,这也是绝大多数应用的做法;每日故宫启动的时候伴随着一声钟声,页面会有一个光线流动的动画,极具仪式感,一下子就把用户带入故宫庄严的氛围当中。

图标:东家的每一个图标都融入了印刷式字体的元素,体现其匠人的品牌基因;mono 则直接把产品名称「 M O N O」用于导航栏。

插图:Dropbox 的儿童风格的插画与 B站 的二次元插画都非常契合品牌特征。

 

品牌触点式多样的,除了上面的启动页、图标、插图之外,还有预加载图、loading、动效、新手引导等等都能体现品牌触点,这些品牌触点,都是讲述品牌故事的关键载体,帮助产品从同行业中脱颖而出,这里由于时间的关系我们就不展开讲了,有兴趣的同学,我们可以单独交流哦

 

互联网行业已经过了拓荒时代,行业沉淀下了许多有价值的知识,也有许多非常好的 UI 组件和规范文档可以直接使用;

另一方面,很多公司对于 UI 设计在整个产品生命周期中的价值,普遍觉得不是非常重要,UI 设计部门只是一个业务支持部门,起不到主导作用。而如果 UI 设计师做的工作还是停留在把产品的原型文档变漂亮,肯定是不行了。

设计师不仅需要对产品业务和商业有深入了解,更重要的是对于品牌在整个产品链路中的应用与把控。

我们需要走出舒适圈,主动去挖掘更深层次的设计价值,提升自我价值。


 

诚然改变一个大的设计生存环境是非常漫长的过程。要不停的尝试,就像不停的迭代做新产品一样,不能因为一两次的失败打消掉设计的积极性。

设计的终极最后就是和解 Compromise

 

 

 

开篇我提到了与世界和解,分享下我是怎么和这个世界和解的,我相信三句话,可以跟这个世界和解 

再次谢谢大家听我叨叨,如果大家喜欢,下次我们可以叨叨点关于设计的更有意思的事,谢谢



文章来源:tob.design        作者:无名大师29aef85c40


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

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

涛涛

新的十年,新技术也悄然到来。人工智能润物无声,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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UX TRENDS | 注重隐私的用户体验设计

鹤鹤

用户隐私安全在产品设计中是很重要的一个环节,本文从用户体验角度切入,从匿名模式、减少永久性和减少公开性三个方面展开分析。



我们先看⼀组来⾃⽪优的2019年6⽉的调研数据:70%的美国⼈认为,与5年前相⽐个⼈信息变得更不安全。尤其是⾼学历⾼收⼊群体。由此可⻅⽤户对个⼈信息数据的隐私担忧⽐以往更甚。



⽤户隐私安全很重要,涉及的范围和⻆度也很多。本次的分析从⽤户体验⻆度切⼊,涉及如下三个⽅⾯:

  1. Incognito Mode匿名模式;

  2. Reducing Permanence减少永久性;

  3. Reducing Publicity减少公开性。



01 匿名模式


下图是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切换,从交互体验上来说有如下⼏个特点:

  1. 统⼀在右上⻆;

  2. 可以便捷切换⾄匿名模式,反过来也很容易切回登陆状态;

  3. 匿名模式的状态提示,例如YouTube 在匿名模式下在界⾯底部有⼩字提示“您 当前处于匿名模式”。


匿名模式不是最近才流⾏的功能,最早提供隐匿模式的是苹果safari浏览器,早在 2005年就⽀持了匿名模式。Chrome浏览器在2008年就开始⽀持此模式。虽然由来已久,为什么到了2020年,匿名模式依然是国外互联⽹⼀⼤趋势呢?


我们看⼀组数据:

这是来⾃DuckDuckGo 2019年9⽉的调研(DuckDuckGo是美国的⼀款不记录⽤户⾏为保护⽤户隐私的搜索引擎)。样本来⾃美国、英国、德国和澳⼤利亚的成年⼈⽤户,共计3,411⼈的调研得出。各国⽤户对使⽤搜索引擎的个⼈隐私安全⾮常在意(是否搜集个⼈的数据和记录搜索⾏为)。

2020年5⽉DuckDuckGo⽇均搜索次数为6200万。对⽐看2019年11⽉底⽇均搜索次数4900万,2018年10⽉是2900万。

最近⼏年的持续活跃度⾼幅增⻓证明了不记录个⼈隐私的搜素引擎越来越受到⽤户的⻘睐。

国内,头条、UC浏览器在搜索框输⼊状态也提供了“⽆痕浏览”⼊⼝。

不仅是搜索引擎领域,保护⽤户隐私也成为Facebook最重要的战略⽅向之⼀。Facebook CEO Mark Zuckerberg在2019年 F8开发者⼤会上喊出“THE FUTURE IS PRIVATE”。2019年3⽉Mark Zuckerberg发⽂,主题就是《聚焦于保护隐私的社交⽹络》。



02 减少永久性


我们先看国外社交媒体Stories(⼩故事)产品形态的流⾏。

⼈们总是对于所分享的内容永远记录在⽹上感到担忧。Stories24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享。

Stories由Snapchat⾸创,由 Facebook发扬光⼤。早在2019年4⽉,Facebook+Messenger Stories, Instagram Stories⽇活⽤户数就突破5亿。 2020年2-3⽉LinkedIn,Twitter也先后宣布将上线类似功能。



03 减少公开性


来⾃⽪优的调研报告:41%的美国⼈经历过⽹络骚扰,最常⻅的就是在社交媒体上。23%的⽤户最近经历的⽹络骚扰来⾃评论区的评论内容。27%的⽤户经历⽹络骚扰后决定不再发布任何内容。

我们以限定评论互动的公开性为例:

2020年5⽉Twitter上线了新的评论功能,可以限定谁可以回复帖⼦的功能,提供了三种选项:谁都可以评论,只有被关注者可以评论,只有被提及者可以评论三种公开度的限定。

Instagram也在测试“评论限制”新功能,批量屏蔽/限制评论。⽬前已经上线的⼀个例⼦:⽤户(评论发布者)如果发布的评论含有攻击性敏感词,发布前伴有提示,提醒评论含有攻击性敏感词是否真的要发布。


注重隐私提供仅好友可⻅/仅⾃⼰可⻅/仅作者可⻅/等多重维度的隐私设定有助于⽤户更安⼼地参与互动。

另外⼀个例⼦是付费频道会员:付费频道会员-限定频道的公开性让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员、会费的收⼊,形成“忠实粉丝”社区,有助于内容⽣态的社区化建设。

我们主要看YouTube的频道会员案例:

YouTube有两种会员模式。⼀种是YouTube整个平台的付费会员,去⼴告,看原创美剧影视,消费⾳乐,可下载内容的模式。第⼆种模式是Youtuber个⼈频道付费会员,吸引忠实粉丝加⼊。我想说的就是第⼆种。


为什么⼤V⽹红有意愿开通频道会员?


除了获得忠实粉丝收⼊变现的商业价值以及付费频道会员可以为忠实粉丝提供各种专属功能,背后也和⽹红⼤V对个⼈隐私顾虑有关。

⽹红⼤V在完全公开的社交⽹络上需要始终保持⾜够克制谨慎,避免引起争议。但在忠实粉丝付费频道专属会员群中,⽹红⼤V会减轻隐私顾虑,更加回归⾃我。

⽐如在频道会员中发布更多与个⼈⽣活相关的内容,表达更多不便在完全公开的社交⽹络中的想法和感受等,因为忠实粉丝通常更具包容度,更不容易引起争议。


YouTube频道会员费⽤可以从三种会费(按⽉)区间选择,⽀持多选:

  1. 低阶 Low Levels $0.99~3.99;

  2. 中阶 Medium Levels $4.99~14.99;

  3. ⾼阶 High Levels $19.99~49.99;

频道会员功能在2018年开始测试,⾯向粉丝数过10万的YouTuber开放。



以上综述,我们可以说:


1.匿名模式:

虽然匿名模式由来已久,但仍然是当前的⼀⼤基本⽤户体验设计趋势,尤其是匿名模式的切换便捷性⾮常重要。


2.减少永久性:

Stories⼩故事24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享,已经成为国外社交媒体平台的必备功能,Facebook, Instagram平台的最主要、最具影响⼒的功能之⼀。


3.减少公开性:

⽤户总是对在社交媒体平台发表评论有所顾忌,限定评论的公开性能够有助于促进⽤户发帖表达,其他⽤户也可以更安⼼地参与互动。


付费频道会员可以限定频道的公开性,让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员会费的收⼊,形成“忠实粉丝”社区,有助于内容⽣态的社区化建设。


从UE⻆度,我们可以为频道会员提供专属身份设计例如专属徽章,专属表情等。

THE FUTURE IS PRIVATE, 注重⽤户隐私的体验设计越来越重要!

文章来源:站酷    作者:百度MEUX

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



从这 3 个角度,找到提高用户体验的诀窍

涛涛

用户体验是用户在使用产品或者服务中的所有的主观感受。因此我们设计的过程中要以用户为中心进行设计,不能单单为了设计一个产品而设计,只关注产品设计本身的功能性。

在生活中好的用户体验设计的产品让人使用舒适,而用户体验不好的设计往往让人很糟糕。

用户体验比较好的:比如我们坐地铁的过程中很准时,这就是好的用户体验;在吃海底捞时,看到好吃的西瓜,他们会给你打包,这就是好的用户体验。

用户体验比较不好的设计:比如在生活中有些插座设计,一个两孔一个三孔,只能一次插一个,很气人有没有,难道上下错位和间距拉大有这么难吗?再比如蚊香的设计,很容易断,每到夏天不断几个,都不好意思!

提升用户体验的方向

在产品设计中是否满足用户需求我们可以分为 3 个点来进行分析,主要是有用性;易用性;满意度。

1. 有用性

有用性就是产品有用的设计功能,也是产品基础的设计原则。

对于有用性而言,我们在这个过程可以主要在三个方向进行把控,就是:基本需求;期望需求;兴奋需求。

基本型需求

基本型需求是用户必需需求,用户在产品中认为这是必需的功能,(这些基本需求是用户认为必备的,有了用户觉得是应该的,如果没有这些需求,那么用户在使用产品过程中间大部分会直接放弃,选择其他家产品)。

比如淘宝产品中的订单和商品功能就是基本型需求;微信中的聊天和通讯录就是基本型需求;QQ 音乐中的播放页、播放菜单就是基本需求。

期望型需求

基本型需求是用户意愿型需求,用户自己也不知道,但是期望获得的功能。(这类需求就没有基本需求那样必备,是产品中期望需求体验越多越好,用户越满意,反之用户满意度也会下降)。

这类需求是期望型需求,也是我们产品竞争力所在,因此往往人们在谈论哪个产品好不好,通常是期望需求和兴奋型需求。比如淘宝产品中能买到便宜产品,而且符合详情页中描述;比如微信产品中聊天语音/微信/视频,聊天更加方便;比如 qq 音乐中的曲目和歌单数量增加,用户就会很满意,这也是期望需求。

兴奋型需求

兴奋型需求是用户非常期望的需求。(这类需求满意度高,有这些兴奋型需求时即使不太完善,用户也会满意,做得非常好就会让用户兴奋;没有这些需求用户也不会表现得不满意)。

比如淘宝产品能够更多满足用户多样化的生活,各种生活服务提供给用户;商品评价页用户互动,方便用户可以熟悉产品好坏;比如微信产品中暗黑模式,满意希望黑暗模式体验的用户需求;比如 qq 音乐中单曲热评,让我们对歌曲背后的故事,歌友的心路有了了解互动。

此外兴奋性需求在产品中还有一些重要的点,比如微动效、情感化设计等等这些都可以让产品提升很大的用户体验,和宣传力度,因为用户在谈论产品好坏时候比较多的是说产品的兴奋型需求。

需求分析模型

需求分析工具 KANO 模型,主要是帮助我们直观的了解产品不用类型需求实现程度和用户满意度的对比,我们了解这些需求的时候,可以让我们更好的看到这些功能点有哪些影响力。

2. 易用性

易用性就是产品好不好用,容易使用吗。同时我觉得在有用性上产品经理需要考虑得比较多一点,而易用性上就是我们 UI、UE 需要重点负责和掌握的东西。

对于易用性而言,我们可以主要在三个方向进行把控,就是:上手快 ;操作快;负担少。

上手快

上手快就是用户使用产品容易上手,没有啥学习成本。简单的意思就是让用户不怎么动脑去想就知道下一步我要做什么,用户操作满足自己的心智模型。

心智模式是指深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。简单理解就是在使用产品中满足我们对产品的认知思维。当然文中介绍的只是心智模型的很一小部分,主要是想让大家多去了解心智模型,更好地在以后的产品设计中运用它们。

比如淘宝的下单弹窗、微信的红包、QQ 音乐的音乐播放,都是用户容易上手,即使小白用户在使用时,根据它们简单的提示就可以操作,没有太多复杂选项,一目了然。

操作便捷

操作便捷就是用户在使用产品中操作效率高,没有太多干扰项目。(这类设计一般就是操作方便,尽可能地减少干扰项目,增加快捷入口等)。

比如淘宝产品中的物流信息,没有太多干扰直接出现在订单的头部位置,提高用户查看商品物流信息的操作效率,提升了用户体验。比如微信聊天中的发送图片功能,直接显示最近图片,快捷发送,提高用户发送图片的操作效率。比如 QQ 音乐的播放直接在首页出现,方便用户选歌切换,操作效率高。

负担少

负担少通常是减少记忆负担,不让用户累着,为用户分忧。

比如淘宝红包展示就是在我的页面里面直接显示;比如微信钱包余额直接在钱包按钮下方显示,不用进入三级页面;比如 qq 音乐自建歌单显示歌单数量,减少用户记忆负担。

3. 满意度

满意度简单理解就是用户需求被满足后的愉悦感。它是相对的概念,就是用户需求和产品完成度之间的衡量。

对于满意度而言,在产品设计上有很多方面,今天我们简单讲一下两个方向的把控:视觉感官的刺激;奖励。

视觉感官刺激

视觉感官刺激主要是超乎用户想象的好看的视觉。而在 UI 设计中主要体现在动效设计、插画等等。

比如淘宝产品中的图标动效,趣味设计,提升用户对产品的情感交流。比如微信聊天中的表情包功能,简单的动作表达用户的心理,好看又好玩。比如 QQ 音乐的加载像音符一样有韵律地跳动着,给用户带来不一样的审美体验。

奖励

奖励是指用户在完成一些操作时给予奖励的设计。超出用户预期,带来愉悦。

比如淘宝用户每次下单/参加活动获得淘气值,满 1000 可以购买 88 会员,原件 888。比如 QQ 音乐的活动中心,用户每日签到累计可以获得会员体验奖励,更优质内容的声音享受激励。

总结

用户体验设计最根本的就是以用户为中心进行设计,本文主要从有用性、易用性、满意度三个维度来把控用户体验设计,但是在日常工作中,因为产品业务的复杂程度,我们要因地制宜地进行设计,深入挖掘我们产品自己的体验设计特色,增加自己的设计市场竞争力。

文章来源:优设    作者:阿韩设计

怎样借助故事板做好用户体验设计?

涛涛

在做用户体验设计的时候,研讨会和用户访谈是用研中最常用的两种手段,随后,将用户研究的结果合成为用户故事和用户流程,在这个基础上,我们可以构建合理的解决方案,然后将线框图、原型和设计结果传达给整个设计团队。换句话来说,所有的研究、设计和方案都是基于真实的用户,也就是我们定位为“目标用户”的人群,基于他们的表现、反映和反馈。为了让产品更优秀,我们必须明白产品的运作机制,了解用户都是怎么想的,而故事板,则是这一切的关键。

用户体验设计的五个着手点

涛涛

想要做好用户体验设计,需要从那几个方面入手呢?

当互联网产业来到下半场,人口红利逐渐减少作用的时候,相信用户体验一定是产品设计的重点内容之一了。良好的用户体验不仅仅可以保证用户的数量,同时也能够保证优秀的用户粘度。那么,什么是用户体验呢?

优化夜间阅读体验——夜间模式设计通用方法

涛涛

你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方法来分享给大家,相互启发。

情感化设计—“愉悦性”的陷阱

涛涛

说起“愉悦性”,我们通常会想到一些让人感到温暖、开心的东西,譬如毛绒玩具、纸杯蛋糕、拥抱,等等。

不过,具有愉悦性的事物在某些情况下同样会带来负面效应。某些笑话可能冒犯到他人,温馨的广告可能误导部分观众,即便是可爱的音效也会因为运用不当而使人抓狂。

在UX领域,我们总会对那些体现着愉悦性的设计细节赞赏有加;而另一方面,对其负面效应的了解也将有助于我们更好、更全面的掌握这一设计原则,避开陷阱。

百度智能手表OS创新设计(交互篇)

用心设计

2015
年Google、Apple、阿里、华为均推出了智能手表或其操作系统,同时来自研究公司Strategy
Analytics的数据显示,Apple Watch
2015年的全球出货量达到1500万支,可以说2015年是智能手表的元年。由于早期Android Wear
的部分服务无法在国内使用,各大互联网公司设计的智能手表操作系统更是风起云涌,如出门问问、YunOS、TencentOS等等。但是由于业内对智能手
表的形态尚处于探索阶段,多数产品对于手表平台所要承载的任务和信息并没有进行清晰的定义。百度MUX智能硬件团队从去年年初开始接手百度智能手表OS的
设计工作,认为相对于智能手机的“碎片化”场景,智能手表在信息和任务维度更加轻量,呈现“微粒化”的点状用户体验。需要重新设计承载他们的容器。本文希
望从智能手表系统的设计思路和方法层面与设计师们分享“微粒化”设计的经验。

日历

链接

个人资料

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

存档