首页

10大交互设计原则,大厂都在用

周周

本文讲述交互设计用的最多的原则——尼尔森十大可用性原则。

手把手教你撰写交互设计文档(保姆级教程)

周周

前言:为什么要写交互设计文档?交互设计文档有什么用?


第一,交互设计师的交互设计文档就好像UI设计师的PSD文件一样用于保存记录自己的设计思路,但交互设计师负责的任务不仅仅停留在页面当中,还包括产品的需求分析、用户画像、竞品分析、产品数据分析、用户交互逻辑等等..我们都可以写在交互设计文档中做记录,为我们的交互设计提供依据。(其实就是避免开发怼你问你设计依据是啥,你就马上把分析摆他脸上,避免尴尬)


第二点是交互设计师作为产品的上游(一般开发流程是产品经理负责收集需求给予交互设计师进行交互设计,撰写交互设计文档,然后文档评审通过后,UI同学负责UI设计,接着提供前端同学进行界面开发,后端同学则根据交互稿搭建框架和业务逻辑,开发完成后进行测试,反馈测试结果,如此循环,因此交互设计师一般处于产品线的上游阶段),撰写一份标准和规范的交互设计文档是非常重要的,因为我们需要利用交互设计文档去表达我们的设计思路,通过交互文档我们可以让UI同学知道页面需要给用户表达什么情绪,达到怎样的目的,告诉前端同学页面跳转逻辑以及交互模块怎么写,帮助后端同学清晰搭建后台框架与数据库以及产品业务逻辑是怎么样的,最后测试童鞋还会拿着你的交互稿进行单元测试,编写测试用例,所以只有我们先把文档写好了,才能避免后面产品开发出现问题。


第三点也是最重要的一点就是未来我们用于跳槽加薪面试作品。内行看门道,外行看热闹,如果你面试交互设计师的时候还是带着一条长长的JPG或者是网上千篇一律排版的PDF作品集,在面试官眼中显得不入行(或许你会遇到性格好的面试官,毕竟千人千面,面试特别看人),因为专业的交互设计师在平时工作中为了避免干扰UI同学设计,只会使用黑白灰做交互稿,也很少做成一条长长的PNG或JPG,我们可以适当包装作品集,但如果过度了会让人觉得不落地,或许只停留在刚入行阶段,所以在技术面试,我们可以拿着我们的交互设计文档跟面试官叙述产品从需求层面怎样思考完成交互设计的,解决了用户什么痛点,最后取得了什么样的成果,得到了怎样的数据,我相信成功几率会大很多。(PS:用交互设计文档进行面试前请注意把公司机密信息做脱敏处理,避免发生纠纷)


1、交互文档包含什么内容?以及怎样撰写交互文档?


说了那么多,那究竟交互设计文档包含哪些内容?


一般来讲,一个基础、规范的交互设计文档应该包含文档封面、更新文档、设计说明文档、业务流程图、交互原型、垃圾桶等模块,当然了,这些模块也不是永恒不变的,有些是必须要,有些是选择性添加的,至于这些模块有什么功能和怎样进行撰写,这篇文章会逐一分享给大家~


(说明:作者比较习惯使用Axure软件撰写交互设计文档,大家可以根据自身爱好或者公司规定进行选择(例如sketch、figma、PS等等..都是可以的)。这里要引用一句话:软件仅仅是工具,并不能限制我们的思维,好的工具能让我们走得更快但不能使我们走得更远——沃·兹基硕德。


1.1、文档封面(必须)


文档封面就相当于一本书的封面一样,用于记录产品名称、版本号、日期以及文档负责人(这样开发童鞋就能精准找到你进行撕X),只要能展示以上信息,其他信息(例如产品经理是谁等..)可以自行添加。


1.2、更新日志(必须)


以前我都习惯把更新日志放到产品文档后面,但是随着工作时间变久,我发现开发童鞋在SVN上打开设计文档后第一时间就是查看更新日志,所以后来把这一页提了上来。(是的,设计文档也是需要跟产品一样不断优化迭代的)


更新日志主要用于记录产品迭代修改的内容,让开发同学快速了解这次迭代修改了什么内容,他需要做哪些工作。我的更新日志特别简单,就只有日期、变更内容、所在页面以及备注四个字段,这里唯一注意的是,日期必须是最新修改的内容放在上面,以前的日期在下面,很多同学每次迭代的时候会在下面列进行内容添加,这样开发同学每次都必须滚到最下面查看信息,大哥,你是交互设计师,专业一点好吗。


1.3、产品项目背景(必须)


产品项目背景是一个项目的核心关键,告诉所有的团队成员我们要做一个什么样的产品,需要创造什么样的价值,就好比我们写作文时的中心句,时刻提醒着我们要不忘初心,为团队成员开发项目指明方向。


前段时间有个同学来问我,他们本来是刚开始是做校园教育系统的,但是随着产品慢慢迭代,功能逐渐强大了,最近老板希望在系统中加上财务功能,本来用户学习成本就高,如果再加上去会不会适得其反?虽然我不知道那位同学的老板产品战略是啥,背后是怎样思考的,但是在我看来这样的行为就不能是不忘初心,这顶多能算不忘出薪吧。(拒绝谐音梗从我做起)


好了,至于里面产品背景、产品目标以及定位的内容应该如何撰写?对,我抄的。一般情况下,这些内容我们都能够在项目立项文档或者在招投标书上就能找到,我们不用亲自写(但可以加以设计),再不行也能找到产品经理去了解。


或者你会说,小公司既没有立项、也没有招投标书,产品经理也是你,那该怎么办?那么你就得发挥出自己当年高考的作文水平,积极了解清楚产品背景定位,努力完成这一部分,因为信息的传递是有消耗性的,只有我们作为产品的上游做好了,才能为团队成员后面的努力提供方向。



1.4、产品需求(必须)


产品需求列表用于记录产品需要做哪些【功能点】,这些功能点我们一般能在产品经理或者项目经理上获得,我们收集需求后需要对其按照重要程度P0、P1、P2等级进行分类,我分类的原则是KANO法则(不知道的同学可以百度),P0等级是非做不可的需求,例如像微信的聊天,淘宝的支付功能等,P1是锦上添花的需求,时间紧迫的话可以下次再做的,例如微信的语音、视频聊天等..,排到最后Pn就是一些不必要可做可不做,就算做了也没太大影响的功能,就可以与领导层商讨是否确认要做。(例如炸屎,你们现在还有人炸屎吗?什么?炸屎你都不知道?那当我没说)


1.5、用户画像(可选)


所谓知己知彼百战不殆,通过用户画像我们可以快速了解产品目标用户群体特征,分析目标用户群体的期望、需求、动机等,再根据用户场景去进行设计,有了用户画像的支撑,能避免我们在设计过程中出现一些不必要的因素,例如我们目标用户是中老年人的话,那么按钮、字体就应该适当的放大、排版简单明了,而针对青少年就可以偏个性化风格设计。


当然,如果是小公司的话可能没有那么多的资源去做用户的调研,在这里分享一下我当年在创业公司经常使用的一种快速获取用户画像的方法,既快速又特别专业。


这里需要借助一个网站:艾瑞数据(https://index.iresearch.com.cn),打开后选择自己产品的类型(例如学习教育类),网站会把该类型的产品按照用户数量从高到低展示给你,然后我们选择一个差不多的竞品点击去查看他们的用户特征,最后Ctrl C+Ctrl V到我们的文档中,完成。


1.6、竞品分析(可选)


竞品分析相信大家都特别熟悉,我之前的文章也教过大家怎么进行详细的竞品分析,这里就不细讲了,虽然在交互文档中竞品分析可做可不做,但是在产品初期阶段我们如果认真做竞品分析的话能够快速了解产品业务、熟悉用户的使用习惯,同时当我们在做交互原型的时候能提供快速借(cao)鉴(xi),因此有条件的同学还是建议尽量做一下。


1.7、数据分析(可选)


数据分析时交互设计师必不可少的一项技能,也是验证设计成果的重要因素。如果缺少了数据分析而单凭个人主观因素的话,我们难以说明设计效果的好坏,毕竟现实中会出现各种意想不到的情况。


 所谓“无对比,不分析”,一般数据分析都是通过数值进行对比,去查看数据相对是上升、下降、还是持平,是否跟当初设计预期的一样,对于初期的产品会更关注产品的一些DAU(日活数)、GMV(成交总额)、以及支付人数等,因为这些数据的增减是直接影响到整个产品的存活,如果产品的DAU不断下降的话,那你就要马上查找原因,及时调整,避免恶性循环。


一般情况下,像日活数那些简单的数据可以直接问后台同学就能获得,而用户某些环节的存活率、转化率等就需要利用【数据埋点】,市场上也有很多第三方做数据埋点的,例如神策数据、Growing IO等,这里就不展开说了,但是面试的时候你能说出这些就会显得很专业。


1.8、信息架构(必须)


信息架构属于用户体验的结构层,就像产品的骨架一样,而信息架构设计就是对产品信息进行构架、归类的设计,信息架构能够防止我们对产品功能点遗漏,同时也可以通过产品大体的信息架构观察出产品设计是否合理。


一般来说(干货来了),产品架构分支可以分为度和层,而好产品的信息架构在广度和层度都是恰到好处,下面我举两个反例大家就懂了:


  1.产品架构的广度太广(不懂的看下图):信息架构的广度太广意味着页面的承载信息量特别的多,没有侧重点,这样用户点进页面后会思考很久而不知所措,最经典的就是某某宝和某同城,新用户进入到首页真的模棱两可。


    2.产品架构的层太深:信息架构的层太深会导致另外一个问题就是页面非常的多,要找到一些功能的话操作非常的困难,最常见的就是某些视频的取消会员流程(包括当年的ofo退费),你们是不是为了退费或者取消某APP会员百度过很多次?(反过来思考,如果某些功能你不想被用户发现,但是又必不可少的话应如何设计,你懂得)


1.9、业务流程图(可选)


绘制业务流程图的目的就是:梳理并分析优化业务流程。我知道很多同学做UI设计师的时候可以完全不管业务,直接做设计,但是作为交互设计师了解产品业务是非常重要的,因为不了解业务你就无法完成交互设计,优化业务场景。


举个例子:在教育考试系统中一般流程是:教育局出通知→学生报名考试→老师审核→报名通过→老师编排学生考试名单→学生开始考试对号入座→教育局公布成绩→学生查询成绩→考试结束,看这一些列的流程,因为关联特别多,如果对业务不熟悉的话设计起来会非常的不便,如果前期因为业务流程不熟悉而设计出错误的交互稿的话,后面就会特别麻烦。


那么如何去绘制完整的业务流程:


  1. 如果你的产品经理比较专业的话,可能会直接给你一个现成的业务流程图,那样就能省事很多。

  2. 要是没有产品经理的话,最直接的就是问用户,这里介绍我最常用的方法就是“一听二问三确认”。一听:先听客户代表或者业务方的介绍。听得过程中,不打断对方,以最简单的方式勾出主体脉络,即基本要素中的角色、活动、协作关系梳理出即可。二问:完成上一步后,就可以进行提问了。主要是沿着流程进行发问,重点放在分支、产物关系上。看看是否存在分支的情况,各协作之间是否有交付物。一边问,一边修正。三确认:最后一步就是自己讲一遍流程,和客户代表或者业务专家进行最后的确认。


1.10、交互原型(必须)


几乎可以说,上面所有的东西都是为了完成交互原型做铺垫的,我相信对大家来讲交互原型都非常熟悉,但是给大家分享几个经常犯错的点。


【1】页面尽量只采用黑白灰配色,避免干扰UI同学设计。这是大家经常犯错的一个点,毕竟很多同学以前是UI出身,做交互稿时也顺便配配色,这样会非常影响UI同学设计的(不在其位不谋其政,你做UI的时候也不希望有人在旁边指指点点吧),所以我们做交互稿时只采用黑白灰就够了,灰度大小就代表信息的重要程度,简洁规范即可。


【2】页面的跳转用连线表示其实就很方便了,真正厉害的人不会到处炫技。有些同学在交互稿上各种跳转、动态面板、中继器等花里胡哨一大堆,这样开发同学看起来特别的难受,所以很多时候用连线的方式表示往往是最简单明了的。


【3】如果涉及到多端设计(IOS、Andriod、PC端)的话,除非产品非常庞大,不然就放在同一个设计文档中,避免以后评审还要弄多个文件。


【4】创建一个适合自己的组件库,在日常设计中,80%的控件是可以重复利用的,做一个合适的组件库能节省大量时间(我整理了工作多年的B端以及移动端常用的组件,你们需要也可以分享给你们)。


1.11、垃圾桶(可选)


做交互文档时垃圾桶就相当于后悔药,因为一些页面如果删掉保存后是不能还原了的,因此在改稿时如果一些暂时不需要的页面可以丢到垃圾桶中,避免到最后用回以前的方案时重新再做浪费时间。


最后总结


好啦,文章分享的内容比较多,但是并不是每一部分都非做不可,文档也并不是绝对的规范,每一家公司交互设计师的职责可能都不太相同,所以大家可以根据自身需求因地制宜,曾经有人说过,设计的本质并不是把简单的事情做复杂,而是把复杂的事情做简单,所以我希望有一天你们能把交互设计文档做到很简单,而把产品做得非常好,然后跟我分享经验,这才是我写文章的初心。


文章来源:站酷 作者:北沐而川

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

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

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


移动端交互控件规范总结:弹窗(二)

周周

以下内容主要以 iOS 官方设计指南和网络上的相关文章为参考,但同时也包含个人理解与思考,并非绝对、唯一的标准。

交互设计|产品细节体验笔记

周周

随着互联网行业的发展,每一个软件背后都有一个优秀的项目团队和公司,腾讯或是阿里巴巴,他们旗下的APP我们也耳熟能详,但是关于每个软件的细节之处我们应该大多数都没有关注到,每个产品的人性化设计为我们增加了方面,想要了解和学习的崽崽们可以看看哦!

交互体验思考|产品体验

周周


本文大纲

一、好的收藏体验这么做

二、互动信息隐私的保护

三、确定按钮放左边or右边?

四、手机实体键分布的合理性

五、静音键存在的必要性

六、经典的旋钮式交互



表单篇 | 掌握基本原则,帮你设计出更优质的表单!

周周

表单是UI设计中很常见的元素,不管是PC端还是移动端,表单几乎是无法规避的UI控件,用户可以通过表单完成线上购物、信息交换、文章订阅等任务,使用范畴极为广泛且牵扯到方方面面。

2021-2022 设计趋势 · 数字未来篇

seo达人


背景

回顾互联网发展历程,从桌面端拨号上网到高速5G的移动互联网,随时随地互联互通对现实生活的影响力也逐步提升,虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。本文将从虚拟世界的视角,对设计挑战和机遇进行总结和预测。

概述

电影《头号玩家》里的“绿洲”描绘了一个庞大的虚拟数字世界,在这里人们用数字化身来控制、并相互竞争以提高自己的地位,这被视为未来虚拟世界该有的样子。不过目前落地概念是由Roblox在招股书里描述的8个关键词:身份,朋友,沉浸感,多样性,低延迟,随地,经济,文明。我们尝试把这8个词提炼5个虚拟世界的设计趋势,分别展开论述。

2021-2022 设计趋势ISUX报告·数字未来篇

一、虚拟世界人物:数字替身(Avatar)设计

数字替身(avatar)是用户在虚拟世界中的化身。它可以代表用户的位置方向、运动状态和姿势,是用户在虚拟世界的交互载体。avatar的设计有追求品牌塑造和技术突破的趋势。

1.1 形象多样化,追求品牌风格化

在avatar形象设计方面,当前大火的Roblox和Horizon worlds的设计非常有特点。Roblox基于多面体建模,显得不够精致。而Horizon worlds的人物直接没有下半身,一群上半身人物在空中悬浮游走。但从另一个角度来讲,这也许正是他们品牌风格的记忆点。

2021-2022 设计趋势ISUX报告·数字未来篇

Roblox的avatar形象

2021-2022 设计趋势ISUX报告·数字未来篇

Horizon worlds的avatar形象还有一些时尚品牌借助avatar穿戴自己的产品,以次来凸显品牌调性。著名奢侈品牌Gucci就与虚拟形象科技公司 Genies 合作,允许用户创建自己的个性化虚拟形象进行穿搭售卖。

2021-2022 设计趋势ISUX报告·数字未来篇

Avatar的不同呈现形态的根据“卡通感-写实感”、“儿童化-成人化”这两组维度,可以得到视觉特征定位图。其中第四象限是虚拟世界avatar形象超写实化的一个重要的发展方向。

2021-2022 设计趋势ISUX报告·数字未来篇

1.2 从指尖驱动到自然驱动

Avatar是用户在虚拟世界的替身,长久以来玩家依赖于“指尖”去控制自己avatar,比如前后左右移动方向,跑跳等动作。这需要一定的学习和转化成成本,这对用户的沉浸感带来一定的损耗。苹果Memoji是对表情AR技术的应用,TrueDepth相机硬件可以通过你的脸驱动Memoji的嘴巴、眼睛、头部和舌头。

你可以在FaceTime通话中与Memoji重叠,Memoji的嘴唇也能够与你的声音同步。统计表明,用户之间的信息或FaceTime对话越来越多的由文本或视频转向由虚拟avatar进行。

2021-2022 设计趋势ISUX报告·数字未来篇

Memoji脸部驱动的虚拟头套除了avatar的面部表情外,整个肢体也可以被现实人体通过动作捕捉技术来驱动。近期,美国广播公司Fox推出了全球首档虚拟人物歌唱比赛《Alter Ego》。节目中的虚拟形象可以设定不同的肤色、身体体型和性别。参赛选手可以自由设定他们认为最能代表自己内在,或最能引起观众注意的虚拟形象。然后使用动作捕捉技术,由自己的身体驱动虚拟形象进行表演。‍

2021-2022 设计趋势ISUX报告·数字未来篇

《Alter Ego》全身驱动虚拟‍形象在虚拟世界中,让每个人都能够拥有理想中的Avatar是未来的一种时尚,也是作为设计师的机会。

1.3 数字人的高仿真高智能趋势

作为虚拟世界里的NPC,数字人是智能化的独立avatar。在“外貌”方面数字人也会逐渐往高写实的方向发展。而在“精神”方面,依托AI机器学习算法和大数据,数字人的对话质量也与真人相差无几。服务应用的数字客服、游戏中的超级NPC,都可以以假乱真,表现甚至优于真人。这对设计师的智能化交互设计能力提出了更高的要求。

2021-2022 设计趋势ISUX报告·数字未来篇

UNEEQ公司基于知识计算和语音合成提供的数字人对话产品

二、虚拟世界空间:从界面设计到“界体”设计

在虚拟世界的概念下,界面(interface)设计师讲逐渐升级为“界体“(interbody)设计师。设计师的工作效率和发挥空间将会被大大扩展。

2.1 空间3D建模更加普及

虚拟世界基于VR/AR等可穿戴设备,可以实现整个身体与“界体”的交互。这将会大大简化建模步骤和时间成本,帮助设计师在沉浸式的体验中完成设计构想,释放创造力。而目前主流的通过手指对电子屏幕界面进行点触的交互模式将会被取代。皇家艺术学院研发推出的Gravity Sketch是一款支持在3D空间中建模型的工具。

沉浸式VR体验,让设计师可以将自己提前以客户的视角在虚拟场景中按真实的比例直观感受并调整设计。这个工具已经应用到了汽车和工业设计、服装设计、建筑设计等行业。借助Gravity Sketch,福特汽车公司已将汽车内外饰设计阶段的概念开发时间从四个月缩短至仅20小时。

2021-2022 设计趋势ISUX报告·数字未来篇

△福特汽车用Gravity Sketch设计汽车

2021-2022 设计趋势ISUX报告·数字未来篇

服装设计的运用

2021-2022 设计趋势ISUX报告·数字未来篇

Gravity Sketch在建筑上的运用使用VR Gravity Sketch主要优点之一,就是能够帮助设计师更好地理解比例。同时Gravity Sketch在灵活性方面具有非常好的潜力,弥补了2D绘制和3D建模之间的空白。等技术更成熟些,相信Gravity Sketch 会有更大的可能。

2.2 数字孪生向高等级发展

虚拟世界不仅仅局限于在形态和环境方面的复刻。它应当是平行于真实世界的互联互通的“平行宇宙”。数字孪生通过为现实的建筑物在数字世界里锚定虚拟建筑实现互联互通。数字孪生也像自动驾驶一样分为几个等级。

终极形态的数字孪生,是真正意义上的平行世界。目前,数字孪生的进展正在向更高等级发展。最近发布的第四代万达广场“慧云4.0”介绍到:数字化运维管理平台,融合了BIM、数字孪生、Iot、大数据、人工智能、5G等技术,实现了对商业广场消费场景、运维服务和资产的管理。

2021-2022 设计趋势ISUX报告·数字未来篇

举一个温度报警的例子:传感器发现故障,收集信息并发出警报,同步反馈至管理平台。管理平台定位设备位置、显示影响区域及对应的环境参数,同步现场视频,显示设备连接管网。操作人员,处理报警信息,下发维修工单。现场维修人员收到工单信息,可通过电脑、手机、平板等方式进行远程查看及操控设备,实现快速检修。

3.3 数字空间的智能化发展趋势

虚拟世界的空间也会在数字孪生的基础上朝着智能化的方向发展,就像数字人可以完成自我进化和成长一样,这就是数字空间的智能化发展趋势。百度AIR智能交通系统定位于路端的“自动驾驶系统”。

跟传统的道路信息化设备强调软硬件结合不同,这是一套可在数据驱动下自学习进化的系统,应用L4级自动驾驶级别的感知预测规划技术,让路端交通基础设施实现数字化、智能化和网联化升级。在AIR智能道路系统加持下,自动驾驶将更快落地。

2021-2022 设计趋势ISUX报告·数字未来篇

百度AIR智能交通系统

三、虚拟世界交互方式:更丰富和自然

随着交互设计的发展,虚拟世界中中的交互方式会越来越趋向丰富和自然。就像点触交互逐渐替代按键交互一样,眼控、语音、手势等自然交互也一定会逐渐替代点触交互成为主流。

3.1眼控交互:更人性、更直觉

简单来讲,眼控交互开发的原理就是在开发引擎中,将视线范围设置为一条射线状或圆锥状物体,和VR/AR中的各种物体进行碰撞检测,当程序一旦检测到碰撞,则视为用户的视线落到了这个物体上,由此进行眼控交互。

2021-2022 设计趋势ISUX报告·数字未来篇

在虚拟世界的环境中相比于其他交互来说,眼球追踪门槛低无需复杂外设,受环境影响小,应用场景几乎无限制,更为重要的是眼控交互非常人性化,眼动交互非常符合人的直觉。比如在应用中想要隐藏菜单功能,需要通过其他的交互方式刻意发出指令隐藏和调用菜单,而眼控交互可以非常自然,当注视点偏离,菜单会自动隐藏。

2021-2022 设计趋势ISUX报告·数字未来篇

又比如在射击游戏中,可以体验真实的眼球锁定目标进行打击的快感。

2021-2022 设计趋势ISUX报告·数字未来篇

尽管目前存在实时渲染、眩晕、米达斯接触等等技术问题的限制,但随着软硬件技术的升级迭代,用户体验正在逐渐完善,眼控交互一定是未来的交互趋势。

3.2 语音交互:更自然、更便捷

语音交互作为更趋近于人与人之间最自然的交流方式,近些年有许多发展的突破点。在虚拟世界发展主线上,语音交互趋向更自然、更人性化、更个性化。从GUI到VUI,不依赖触摸屏的输入,出现无导航、无按钮、无菜单界面。

过去反人类的一些沟通方式慢慢被“调教”。此外,多人会话场景下的技术方案日渐增多。Google的智能语音助手可实现连续对话,可以打电话给饭店或理发店等商家帮你预约,目前,Google Duplex可以跨app完成帮你租车、回复消息、找照片分享给好友、写邮件等一系列任务。

2021-2022 设计趋势ISUX报告·数字未来篇

Google智能语音助手语音识别可让你感觉自己仿佛就是故事的一部分。能够与内容进行真实的对话将会大大地提升沉浸感。在 VR 领域内,语音交互更可能替代现有固化的 UI 界面。只需要通过简单的语音交流就能完成繁复的操作,无需再去点击屏幕上放置好的浮动界面图标,这样的设计或许才是未来虚拟世界玩家所需要的。

2021-2022 设计趋势ISUX报告·数字未来篇

《Starship Commander》语音VR游戏

3.3 手势交互:更自由、更灵活

借助能够感知深度信息的摄像头,手机可以更好地读懂用户的手势语言。2019年国内外手机厂商的发布大会上,LG手机G8 ThinQ以及华为发布Mate30系列推出的隔空手势,可实现一些简单的诸如滑动、切歌、截屏等效果。

2021-2022 设计趋势ISUX报告·数字未来篇

在VR应用中,目前还需要手柄设备进行控制交互。但就像触屏手机终将取代按键手机一样,VR手势交互取代手柄按键交互将成为未来趋势。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

下面是微软hololens尝试的一些可以更自然地与我们日常生活中使用的某些手势匹配的命令:

  • 选择:通过用食指指向,捏以创建光线,将鼠标悬停在上面,将手/手指移到形状中。
  • 确认:通过竖起大拇指,确定的手势,点头。
  • 取消:拇指向下,通过摇动否定,交叉双手。
  • 删除:通过丢弃,轻弹,挥舞。

未来虚拟世界的人机交互方式一定是多种自然交互的混合,我们称之为“多模交互”。用户可以通过声音、肢体语言、信息载体(文字、图片、音频、视频)、环境等多个通道与计算机进行交流。混合 GUI、VUI、手势、体感等多种交互方式,更加自然和充分的模拟人与人之间的交互方式。

四、虚拟世界感知体验:更临场和沉浸

在现实世界中,人类通过视觉、听觉、触觉、嗅觉和味觉感知真实的世界。同样在虚拟世界中,要做到沉浸感和临场感需要在感知层面缩小物理世界和虚拟世界之间的差距。五种感官中,视觉、听觉和触觉所占比例最大,虚拟世界的虚拟体验也主要集中在前三种。

2021-2022 设计趋势ISUX报告·数字未来篇

人类感知外界信息的途径

4.1 视觉:裸眼真实面对面

虚拟世界在感知层面最先要突破的就是视觉层面的极度真实感,毕竟这占据着人类信息感知83%的压倒性比例。谷歌Starline是一个软硬件结合的技术项目,目的是实现远方的人们之间的面对面交流。Starline使用摄像头捕获用户,进行虚拟世界的三维重建。通过实时数据压缩和传输,最后使用一种光场显示系统,让用户可以在裸眼状态下感受面对面的真实感。

2021-2022 设计趋势ISUX报告·数字未来篇

4.2 听觉:置身空间环绕声场

虚拟世界的临场感仅靠视觉是远远不够的。为了实现更逼真的效果,还原人耳的听觉效果、塑造360度的空间音频体验可以被认为是还原临场的关键。声音的临场感来源于真实世界的听觉环境:我们时刻都被声音笼罩,无论我们是否有意识地倾听。这种无处不在的声音能够提供重要的位置和空间线索,对于声音的感知能够提供给我们在特定情况下的位置信息。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

在虚拟世界的架构中,声音能够通过空间音效来呈现,以还原现实的声音效果,声音融入故事情节,并将虚拟空间从平面感扩展到三维的立体感。3D的空间音频创造出比单独的视觉效果更广阔的认知领域,让用户完全沉浸在音效空间之中。

举个例子,当你在雷雨中,传统的游戏音效让你仅仅感受到雷声在你身边,但在虚拟世界世界里,雷声从天上传来,雨声喧嚣不绝,你还能够听到雨滴落在地面和头顶的声音。这样逼真的音效有助于让游戏玩家沉浸在更熟悉的情景中。

4.3 触觉:在空气中感受触摸

在PC和手机已经非常普遍的现在,人们感受过游戏中的震动特效,或者手机静音时的嗡嗡声。但这些触觉震动对虚拟世界来说还过于简单,无法复制触摸真实世界对象并与之交互的丰富感觉。

因此想要将虚拟空间打造为“现实环境”,触觉也是关键的感官之一。我们无时无刻不在触摸物品,而虚拟世界里的触觉反馈是一种力的反馈,能够将虚拟接触转换为物理的感知。这是一种特殊的触觉反馈形式,通过技术,简单的穿戴设备就可以让身体感受到不同层次的触觉。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

目前,可用于各种应用的薄型触觉手套和热显示器已经逐渐问世。即由硅胶和电极制成的柔软、灵活的人造皮肤,通过自我监控以提供准确的信息,使用微电流技术将逼真的触摸感受反馈给用户。这种手套能够通过上百个力反馈点来感受虚拟物体的形状、纹理和运动、尺寸、重量、冲击力,甚至温度。

五、虚拟世界产品玩法延伸

虚拟世界奉行“开放共创”的理念,并受到加密技术的支持。这在产品玩法和数字资产领域也带来新的发展方向,值得设计师关注。

5.1 游戏和社交更高度的融合

虚拟世界产品领域,游戏和社交是主要的突破口。社交的内容是游戏,游戏是特定情境内的社交。因此,社交游戏化是将社交通过游戏的方式来展现,让用户在玩游戏的过程中进行社交。

而社交游戏化则是通过将游戏的机制融入社交系统中,从而让用户在社交的过程中,有游戏般的体验。游戏和社交的的高度融合是未来虚拟世界产品发展的重要趋势。以《Roblox》为代表的开放世界游戏与传统的MMO(大型多人在线游戏)相比,最大的不同点在于更加开放的社交生态。

作为游戏UGC创作平台,在这里玩家可以开发自己的游戏,也可以玩别人开发的游戏建立了稳定的虚拟世界社交关系。以人气较高的《Adopt Me!》为例。《Adopt Me!》的玩法是玩家扮演家长或者孩子,选择收养孩子或是被收养,整体玩下来形式类似过家家。玩家可以购买手推车、妆发等各式各样的付费道具装扮自己。这是一种更加沉浸和开放的社交模式。

2021-2022 设计趋势ISUX报告·数字未来篇

微软旗下公司开发的《我的世界》是一款和《Roblox》画风非常相似的开放世界游戏。2020年加州大学伯克利分校还在《我的世界》里举行了虚拟的毕业典礼,包含了现实流程中的校长致辞、学位授予、抛礼帽等。

2021-2022 设计趋势ISUX报告·数字未来篇

年轻新世代更青睐于轻松、趣味娱乐的社交类游戏,通过小游戏+语音互动等方式来制造丰富和封闭的娱乐场景,释放社交压力的同时增加趣味性和沉浸感。

2021-2022 设计趋势ISUX报告·数字未来篇

5.2 加密潮牌和艺术收藏崛起

和元宇宙一起走红的还有NFT。NFT全称为非同质化代币,简单来说,他具有唯一性和不可拆分性,这使得它可以和现实世界中的一些商品绑定。NFT 流动性高可随时交易以及鉴别,独一无二的艺术创作使其具备收藏属性,加密处理使得其难以复制仿造,最终成就了它的稀缺和价值。

前不久,Nike 宣布收购了仅仅成立两年的虚拟运动品牌 RTFKT。RTFKT 这个名字因为与英文「artifact(人造物)」发音相似而来,同时这个名字也代表着其品牌理念。有人这样评价 RTFKT:如果在你小的时候曾想拥有一双 AirJordan 的话,那么当你的孩子出生他会想要一双 RTFKT。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

无聊猿猴被很多 NFT 玩家认为是在 CryptoPunk 之后最成功的 NFT 收藏品项目,甚至部分用户认为它比 CryptoPunk 还要成功。无聊猿游艇俱乐部(Bored Ape Yacht Club)简称BAYC,是一个基于以太坊的NFT集合,包含10,000只独特的无聊猿(Bored Apes)。每只无聊猿都有一系列特征,这些特征由170多个特征以编程方式生成,包括表情、服装、头饰等。

2021-2022 设计趋势ISUX报告·数字未来篇

前不久,adidas 三叶草宣布与 Bored Ape、The Sandbox、Coinbase 合作,正式进军“元宇宙”,加入 NFT 世界!

2021-2022 设计趋势ISUX报告·数字未来篇

几周前虚拟艺术创作团体RTFKT Studios 与村上隆合作推出的「cloneX」系列发售。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

5.3 设计版权得到更好的保护和增值

加密艺术家和设计师可以利用NFT创造出独一无二的数字艺术品,助力设计版权增值。鹅厂23周年,腾讯公司为员工发放了 23 周年纪念版NFT“数字藏品”,由腾讯旗下NFT交易平台「幻核」团队设计发行,腾讯旗下联盟链“至信链”提供链上存证。

该系列NFT以QQ企鹅形象为基础,进行了IP衍化,每一个形象都各不相同,每只QQ企鹅共有6个自定义部分,每个部位随机展现不同元素并组合成独有形象,共发行72000枚。其中有1000枚彩蛋款特殊造型“致敬”名人:李小龙、卓别林、诸葛亮、牛顿、爱因斯坦等等。

2021-2022 设计趋势ISUX报告·数字未来篇

近日,京东也正式上线「灵稀」数字藏品交易平台,该平台所有数字藏品将由京东云提供的区块链技术服务京东智臻链进行唯一标识。目前国内布局数字藏品交易平台的科技巨头已经有三家:蚂蚁旗下的「鲸探」、京东的「灵稀」以及腾讯旗下的「幻核」。除了后者是独立APP,前两者均为小程序。

2021-2022 设计趋势ISUX报告·数字未来篇

六、总结

虚拟世界时代将是一个以“设计”驱动的时代,设计师们将成为虚拟世界里的造梦师。面对虚拟世界的机会和挑战,设计师责无旁贷。正如《人类简史》提到过的,“想象”是人类能一步步发展到今天的关键。我们无法确定未来世界的具体样貌,亦无法确定虚拟世界是否会到来,但虚拟世界的丰富将是必然,未来亦会有更多的设计师参与建设。

 

作者:腾讯ISUX,微信公众号: 腾讯ISUX

本文由 @ 腾讯ISUX 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


iOS界面设计:12个优秀案例激发你的灵感

seo达人


那么,如何设计出一款界面精美的移动端App呢?

如果你是为iOS设计应用程序,那么此文你可以好好看一看。我们都知道用户界面会直接影响到用户体验。所以本文中,我首先精心挑选了12款最佳iOS移动应用程序模板和案例,它们都有着优秀的iOS用户界面设计(iOS设计模式)和良好的用户体验,涵盖生活类,杂志类,体育类,天气类,网上购物类等等。此外,本文还提供了一些iOS人机界面设计指南。希望能对您有所帮助。

1. City App

类别:导航

系统要求:支持iOS 9.0以上

City App是一个iOS应用程序模板,也是一款以用户为中心的信息类集合软件。City App用于提供城市指南解决方案,并可以显示你所在城市的有趣地点,并加以描述性介绍。

用户还可以直接通过相机照片搜索图片所在定位,一张图片就是一个数据的集合。Admin后台可集中管理地点数据,但您可以对其编辑,更新或删除。来自世界各地的风景优美的图片是界面色彩的主要构成,非常美观。

 

2. Triibe

类别:生活方式

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

Triibe是一个引领全新的社区类iOS应用程序,它是专门为制作达人设计的一款产品。它提供一种最简洁、直观的方式展示你的手工创作和学习创意。任何题材设计,包括工艺,烹饪,家居,时尚等等,都可以得到展示。该App的一大特色使其精美的界面,用户在这里上传和展示其手工作品,搭配纯净的浅色背景,几乎和任何的设计作品都能呼应。

 

3. Design Events near you

类别:活动

系统要求:没有限制

Design Events,顾名思义,就给人一种充满设计感的印象。它是由来自印度的一位才华横溢的设计师Johny vino设计的。它一款典型的iOS应用程序,主要用于发现你身边的各种设计活动以及您所在城市和附近地区的各种户外活动。它可以智能的进行有趣的活动推荐。该App的动画交互和过渡都非常简洁流畅,搭配明快的配色,让人觉得眼前一亮。

 

4. Trove

类别:播客和时尚

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

这是一个非常酷炫时尚的iOS应用程序。借助Trove,您可以随时随地找到自己喜欢的风格,获取来自世界顶级风格影响者的无尽灵感和建议,追随顶级时尚博主。浏览“精选”服装,可以发现并关注与您风格一致的博客。此外,“My feed”选项卡,可以让您随时查看收藏夹,并将物品添加到您的收藏夹中,以便稍后再购买或可以选择立即购买,你的所有选择都是自由的。

 

5. Nowait Guest

类别:食品和饮料

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

Nowait Guest是一个简化生活的iOS App。使用该应用程序,可以为您节约大量的订餐等待时间,很餐厅都已经开始投入使用该App,以方便其顾客可以提早了解其订餐情况,包括Chili’s,Buffalo Wild Wings,First Watch等。用户在家时,就可以随时查看附件餐厅的当前等待时间,然后做出决定是否前往。餐厅的图片使用非常吸睛,整个界面看起来让人觉得“垂涎三尺”。

 

6. The New York Times

类别:杂志和报纸

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

这是一款家喻户晓的应用程序,帮助您随时随地掌握最新信息,对于新闻爱好者和喜欢阅读的用户而言,这是一款比书美观,但和书一样能用文字传达信息的程序。该程序与iPhone,iPad和Apple Watch的NYT应用程序一起获得过闻类应用程序奖项。它具有新闻快讯,多任务处理,晨报和晚报,播客,保存文章以供日后在任何设备上阅读等功能。

 

7. iPhone X – Todo Concept

类别:杂志和报纸

系统要求:iOS 9.0或更高版本。与iPhone,iPad和iPod touch兼容

iPhone X – Todo Concept是由Jee-Jeong为Norde设计。它是基于iPhone X概念而制作的一个新原型。该原型的草图和psd模型都可以免费下载。它是设计师特别为iPhone X的发布而设计的。它的动画过度和转换都非常流利,其色彩选择鲜明大胆,极富感染力。留白的界面设计模式,和各种纯色背景都能形成鲜明对比,突出了重要信息,又美化了界面。

 

8. Cloud Music Offline MP3 Music

类别:音乐

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

对于喜欢听音乐的人来说,这是一款不容错过的音乐应用程序。您可以轻松地将音乐从云端下载到您的设备并脱机播放。您的设备上就是一个无限量的音乐库。其音乐播放列表非常有趣,设置了动画多样的操作按钮。整个界面白色纯背景,干净而简洁,用户的注意力会停留在其喜欢的音乐上,不会分散。该程序支持所有最流行的音乐文件格式:.flac .mp3,.aiff,.m4a,.wav 等等。

 

9. KicksOnFire: Buy Sneakers

类别:运动

系统要求:iOS 8.0或更高版本,与iPhone,iPad和iPod touch兼容

这个应用程序是是专为运动鞋发烧友设计的,主要是推送新款运动鞋的特别发布日期及其相关新闻。该程序是App Store下载量最大的运动鞋发布日历类应用程序,不仅是获得第一手运动鞋咨询,您还可以在这里购买您最喜爱的运动鞋。其推送会基于您的个人资料智能进行个性化的发布和价格估算。

 

10. Airbnb

类别:旅行

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

家喻户晓的一款App,风靡全球。当您准备旅行,从Airbnb开始享受难忘的旅行体验吧。这里,所有关于旅行的事情都变得更加美好,比如寻找旅行冒险,远游或找到一个全新的地方。游客可以获得度假屋租赁,体验一种新体验,并在世界各地参观的地方。如果您有房屋待租,Airbnb也是一个最佳平台,在这里,你绝对会当一个优秀的“房东”。

 

11. Local Weather Radar & Forecast

类别:天气

系统要求:iOS 9.0或更高版本,与iPhone,iPad和iPod touch兼容

该程序是一个当地突破性的天气新闻播报App,也是一个美国本地,乃至世界各地的交通应用程序。只需一个点击,就可以来回切换地位,以便随时查看您的朋友和家人所在地的天气情况。该程序还可以以小时来记录您所在地区的气温变化情况,形成以个独特的“气温变化”列表。

 

12. Sofa

类别:电影,电视和书籍

系统要求:iOS 9.3或更高版本,与iPhone,iPad和iPod touch兼容

这是一款iPhone应用程序,是可以让您沉浸在书籍,电影或电视节目中度过美好时光的一款App。您可以自定义创建电影,电视节目,书籍等列表,也可以将电影,电视节目和书籍添加到任何列表中。当您需要搜索某一条目时,可以通过向下滑动操作来直接解锁。

以上是2018年12个非常棒的iOS移动应用程序,它们中的大部分都位于App Store排行榜的首位,下载次数和使用人数都几位可观。看了这么多成功的iOS应用程序,作为设计师,你有没有思考过,这些App成功的秘诀的是什么?

不难发现,出色的用户界面和用户体验至关重要。iOS设计主题将就明晰、尊重和深度,这意味着,在整个iOS系统中,文字在任何尺寸的设备上都是清晰易读的,图标是精确而清晰的,并且需要流畅的动画和交互,有序的视觉层次等等。总之,您设计出来的App需要满足用户对质量和功能的高期望值,才有可能成功。

 

那么,设计一个美观精细的iOS移动界面都有哪些必须注意的点呢?

1. 排版

1)字体

字体选择不宜多,多则杂乱。只需使用单个字体并使用几种字体变体即可。苹果公司使用San Francisco,并根据产品功能选择字体。例如,在iOS 7中使用Myriad(Pro)Light,在iOS 9中使用SF-UI。在iOS 10中,旧金山变体是SF UI Text和SF UI Display。你只需按照规则即可。但为了达到文字的易读性和可读性俱佳,关于字体选择和字体布局,你还是要根据具体情况仔细斟酌。

 

2)字体大小

iOS的字体大小有其比较明确的规范,具体查看下表:

 

2. UI设计中的颜色

色彩的魔力不言而喻,人都是视觉性的动物。颜色可以传达活力和信息,提供视觉连续性,响应用户行为提供反馈、帮助人们可视化数据。自iOS 7以来,Apple一直在为其操作系统界面和预设应用程序设置色彩明朗鲜艳的调色板。关于颜色的选择比较自由,你可以使用下面列出的默认iOS调色板,也可以自己定制,以便在同类App中可以脱颖而出。

了解更多:如何在UI设计中明智地使用颜色来创建完美的UI界面?

 

3. 图标

iOS的图标风格是简单易懂,并且专注于某个功能点或者信息点。通常情况下,iOS应用程序需要使用到不同尺寸的图标。比如,用户在安装某一App后,在主屏幕可能需要使用较小的图标,但该程序在App Store里又需要更大的图标。关于iOS图标大小,也有比较明确的规范:

 

4. iOS 11中的更新

1)加粗的导航设置

这几乎是iOS 11中最令人印象深刻的变化。使用粗体标题可以让用户快速了解其当前位置,并进行快速标签切换。

 

2)界面布局中的空白区域

iOS 11的标题文本包含一组元素,其中包含图片和描述,这些元素可以保持组元素之间的较大间距。在这种情况下,设计元素保持足够的间距并且可以用于区分不必要的装饰元素之间的层次关系。

 

地址:Mockplus

作者:jongde

 转载请注明:学UI网》iOS界面设计:12个优秀案例激发你的灵感

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



如何在界面设计中使用留白

seo达人


  01 .认识留白 

在介绍如何使用留白提升用户体验之前,我们需要先明确留白的意义。

留白是页面元素与元素之间,以及元素周围的空间。当设计师谈论留白时,实际上说的是负空间,术语“负空间”起源于传统艺术形式,它让我们更准确地捕获物体的形状。

“Suprematism: Self Portrait in two dimensions”

负空间就是元素之间的部分  by Kasimir Malevich

 

虽然我们称之为留白,但并不意味着就是白色的。只要该空间没有任何的文字和图像,即使被填充了任何颜色,这也算是一个留白。所以留白与实际的白色并没有关联,“留白”就是“负空间”。

 

 02 . 为什么留白很重要 

留白是一个好设计的基本要素,与传统艺术一样,物体在GUI里也需要负空间,文字,Button,Logo,和其他元素需要空间去呼吸,所有优秀的用户界面里,从顶部到底部,页面中所有的元素都有适当的留白。

空白可分为两种类型:大留白和小留白。

大留白

 

小留白

 

Note
小留白:文本和网格之间的空白,它有助于内容的可读性。
大留白:页面上主要元素之间的空白,与小留白不同,大留白是整体设计的容器。

 

 03.七种影响用户体验的留白 

留白是平衡设计元素的好工具,帮助我们更好得组织内容,提升视觉信息传达的体验。

— 1 强调特定元素 —

强调某种元素,是设计师最常见的任务之一,虽然设计师可以用许多视觉方法让用户聚焦在某些特定元素上,在焦点的周围运用留白往往都能获得比较好的效果。

距离和注意力之间有特定的联系,较大的距离能吸引人的注意,周围的缺失使现有的元素更佳突出。设计师会运用合适的留白去强调重要的元素,例如一段内容,较大的Padding值会加强这个区域的吸引力,因为屏幕上没有其它元素可关注。

物体周围的留白越多,就越容易吸引眼球。

在下面的例子里,Google在设计中大力倡导留白,留白很好地传达了设计的意图,我们的注意力在页面的主要目标上,不会分散给其他区域。

MailChimp的主页运用了相同的方法,来突出操作按钮(call to action),你会注意到“Sign Up Free”这个按钮立刻吸引了人的注意。

 

— 2 链接相关元素 —

当我们在检查元素布局时,通常把它看做是一些对象的组合,这是因为我们的大脑会根据物体之间的相对位置,来创造一个关系模型。格式塔的法则解释了,临近的物体会被看做是一个整体。留白也提供了一种视觉线索,看一下这张图:

很可能你看到的是两组点阵,而不是12个原点,这是12个相同的点,唯一不同的是他们的间距不同。

这个法则也可以用于交互设计,我们来看下面的Web表单。

  • 相关元素成组:我们知道,一组元素靠在一起时,看上去是有关系的,所以相关的标签要靠得近。左图较难传达出标签与输入框的关系,而通过调整间距,如右图,表单的可浏览性提高了。

  • 相关信息成组:众所周知,长的表单让人感到压迫。用户在填这些表格的时候会变得犹豫。把相关的字段组合在一起,能帮助用户了解他们必须填写的信息。以下的形式中,两种表格都有相同数量的字段。不同的是右边划分了三个组,内容的数量是相同的,但是给用户的印象大不相同。

 

— 3 防止视觉杂乱 —

许多的App和网站承载着太多的信息和元素,没有足够的呼吸空间。这通常由于产品创造者希望传递太多的信息,不幸的是,用户的关注度有限,越多的元素争抢着注意力,用户能够关注到的就越少。

可以看下面的例子,这是一个元素太多引起的极端案例。

当每个看上去都一样的时候,用户选不出重要的那一个

 

许多网站有着相同的问题,缺乏留白会给用户的眼睛和耐心带来压力,充斥着文字和图片的网站使用户产生挫败感,使他们逃离。

杂乱的页面没有吸引力,并且不会让用户想要阅读内容,尤其是当没有视觉层次时。

过多的信息负载让界面变得混乱,那么减少混乱就能提高界面的可理解性:通过消除干扰,你可以强制用户只关注即时可见的内容,你可以用留白来减少压迫性,留白可以减少噪音,让用户更能聚焦。当布局达到了留白平衡,各个元素更容易被解读时,就会带来更好的用户体验。

Tip
请尝试“5秒测试”,观察一个页面5秒钟,然后回忆你记得的内容,是否是你想要强调的元素,这将帮你了解页面中是否有合适的留白。

 

— 4 通过互动内容引导用户 —

如果你希望用户的视线从一个点流向另一个点,你需要给他一个这么做的线索,这个线索就是留白,留白运用的得当时,能为页面创造自然的视线流动。

特定的留白可以实现有效引导、保持读者的兴趣,如下图所见,Dropbox通过锯齿模型引导用户浏览一系列产品的关键特征。

空白可以帮助设计师讲故事

 

不对称是另一种留白技巧,可以用来引导用户对某一部分的注意,当一个元素运用了不对称留白,它会立马就会从周围的元素中跳脱出来,看起来更有活力。如果你要在页面中设计一个链接或者按钮,这种方法可以有效引起别人的注意。

非对称留白非常适合聚焦页面上的特殊区域

 

— 5 提高可读性 —

内容为王,内容是大多数应用程序和网站的价值,这就是为什么良好的可用性的一个关键方面是内容的可读性,很多因素可以提高可读性,比如字体的大小和颜色,或使用标题,留白是其中一个重要因素,因为它对内容的可读性有直接的影响:

行间距可以大大提高一段文本的可读性,一般来说,行间距越大,用户阅读时候的体验就越好,但是太大会破坏统一性,使得设计中断。

段落和文字块之间的留白有助于帮助人们更好地理解阅读的内容,根据2004年的研究,这种空白增加了近20%的可理解性

 

— 6 运用视觉分隔线 —

设计师经常使用横向或纵向的线去创造分隔线,虽然这样的分隔线在大多数情况下是可以的,有一个主要的缺点,大量分隔线的使用会导致视觉的噪音,造成密集拥挤的页面。

随着用户的偏好向更简洁的界面转移,对UI中的基本元素进行解构是成功的关键。可以用负空间来布局,而不是线,更少的分隔线能营造清爽、现代和更实用的感受,大方地使用留白可使一些复杂的界面看起来更简洁友好。这一变化背后的真正意义在于,在关注内容和功能同时消除冗余的元素。

 

— 7 创造成熟优雅的感受 —

虽然留白经常被看作是改善用户体验的技巧,但它也可以被用于纯粹的审美目的,大量留白的网站能反映出极简和奢华感。

留白有助于提高整体设计的基调——通过把更多的焦点放在产品本身,使产品看上去更奢华。

 

04. 关于利益相关者的几句话 

现在你可能知道了留白的重要性,而另一方面,留白可能引起设计师和利益相关者的矛盾。“留白太多了,我们可以用来做什么?”是我们经常从利益相关者(客户或经理)那里听到的。

把这种要求作为一个机会去教育利益相关者,作为设计师,我们的工作就是帮助他人理解为什么留白是用户体验重要的组成部分,宣扬并解释你的思考过程,如果这不起作用,你可以采用A/B测试,测试一个设计的两个版本,一个由设计师提出,一个由客户提出,用户可能会喜欢那个不那么混乱的版本。

 

05.结论 

留白不是一个空白的画布,而是一个强大的设计工具,但是这个工具很难掌握:现实应用中的留白既是艺术也是科学,掌握如何使用留白来创建良好的布局需要实践。你实践的越多,学到的也就越多。

 

原文地址:medium

译文地址:51UXC(公众号)

译者:51UXC 翻译社

 转载请注明:学UI网》如何在界面设计中使用留白

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



为什么界面设计大多喜欢用蓝色?

seo达人


 为什么选择蓝色?

理由很多,我这里罗列一些:

1、人们就是喜欢蓝色

问卷调查显示大部分人把蓝色当做它们最喜欢的颜色。因此蓝色被认为是全球最安全的颜色。

色彩偏好是视觉体验中的重要一环:

 

2、与大自然的关联

蓝色与净水、晴空等自然景观能够产生强烈的关联,这提高了人们对它的喜好。

 

3、界面设计的通用颜色

从一个界面设计师的角度来看,蓝色绝对是一个有用的颜色。红色、橙色和绿色通常都是有含义的,例如错误、警示和完成。蓝色相对来说就成为了非常好的选择。

 

4、科技创新感

这也是很多公司使用这个颜色的原因。

 

5、安全感

在旅游网站上,蓝色是一种非常通用的色彩,因为它可以表达可以依赖的感觉,这对于旅游来说是件好事。

 

6、让产品看起来更加可信

很多情况下,说服用户使用我们的产品至关重要。这时,蓝色就可以表现出信赖感。很多像Dell、IBM、Intel、AT&T和支付宝这样的科技公司利用蓝色来传递信誉信息,因为他们的产品是人们每天都要依赖的。

 

7、色弱

很多种色弱患者(如最常见的红绿色盲)都可以看得到蓝色,这一点上蓝色明显优于诸如绿色和红色等其他颜色(Z Yuhan:幸运的是,色盲虽然在百种男性中的发病率高达10%,在亚洲人里却十分少见)。

普通人看到的颜色 VS 色弱患者看到的颜色:

Facebook用蓝色,因为扎克伯格就是色盲患者,他说:“蓝色对我来说是最丰富的颜色,我可以看到所有种类的蓝色。”

 

结论

我希望读完本文,你能了解为何蓝色在设计师中如此流行。然而这并不意味着你应该把你的方案的主色调改成蓝色。

蓝色也不是最好的万能色,万能色并不存在。

在一个网站或App上行得通的颜色,可能在另一个上就不能用了。最安全的方法还是根据目标用户的喜好来选择。

所以最终,用在你设计上的最佳色彩应该是你的用户所认为的最佳色彩。

Z Yuhan:我发现我的手机上橙色比较多,文化差异,还是这几年激烈竞争的变化?

 

原文地址:babich

译文地址:知乎

译者:Z Yuhan

 转载请注明:学UI网》为什么界面设计大多喜欢用蓝色?

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档