首页

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咨询、用户体验公司、软件界面设计公司


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

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咨询、用户体验公司、软件界面设计公司



大屏监控系统数据可视化界面设计

seo达人

大屏监控系统数据可视化是蓝蓝设计的一个重要发展方向,近几年了积累了一些经验和作品,除了部分作品是保密的之外,可以放在网站上的作品请浏览,蓝蓝设计也建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信号ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系010-63334945。

点击查看原图

点击查看原图


安全管理主题.jpg

点击查看原图

点击查看原图

htmy.png

dp_icon1.png

hzyd.png

HZpolice.jpeg

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

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

那些高效的界面设计工具

seo达人


Part1 界面设计工具的发展历程

随着互联网行业的日益繁荣,界面设计领域逐渐走向成熟,界面设计工具也一直在以惊人的速度发展。界面设计工具的发展历经了三个阶段:
  • 1. 第一阶段是最早期界面设计领域刚刚起步,设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具,因此界面设计师在界面的绘制、文件的交付上都存在一定不便。
  • 2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件,但其作为一款专门针对界面设计的工具,以其高效、小巧的优势迅速占领界面设计市场,逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺,出现了Principle、Flinto、Protopie等专门设计界面动效的工具,一般设计师都会将其搭配使用。
  • 3. 当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野,它们专注于界面设计领域,不断挖掘和突破Sketch的短板,为设计师们打造更良好的使用体验。

 

Part2 界面设计工具的未来发展趋势

界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展,旨在实现更高效的设计生产活动。

 

1. 云端性

随着云计算的发展,界面设计工具也在逐步走向云端化。设计从本地转向云端,不再依赖于本地硬件的性能,云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制,只要有网络,设计师可以随时随地的工作,临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。

设计文件的共享从传送本地文件给对方,变成发送链接给对方。前者耗费本地内存与下载时间,后者有网即可打开。设计工具的云端性使得设计的灵活度增强,设计效率大大提高。

 

2. 协作性

注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具(如Figma、Framer Web)试图将产品、设计、开发、测试融为一个整体,让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生,扫除各工种之间的协作障碍。

 

3. 通用性

今年9月Figma举办的第二届Config Europe大会,其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性,设计工具不仅可以帮助设计师输出设计稿本身,而且致力于打破设计与代码之间的壁垒,降低交接成本。让设计实现变得更加轻松高效。

 

Part3 界面设计工具推荐 

1. UI工具篇

1.1 Figma
Figma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示,Figma的使用率从12%增长至26%,在今年的Config Europe大会上Figma也预告了一些即将推出的功能迭代,其便捷高效的特性使其受到众多设计师的追捧,正在逐步抢占sketch的用户市场。

 

Figma与Sketch相比,亮点功能有哪些?

1)Windows用户也可随心使用

与sketch只支持苹果生态系统相比,Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用,理论上只要你能打开浏览器,就可以使用Figma愉快地设计。 

 

2)云端文件使用不卡顿,支持离线编辑

Figma创建的文件全部存储在用户的云端账户中,不占用本地内存。当文件过大时,sketch会出现卡顿现象,拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小,大文件也几乎不存在卡顿的情况。

设计师们最关心的无网或若网情况下Figma的使用问题,Figma也给出了相应的解决方案。其支持离线编辑,离线时会自动把内容保存在本地,当网络恢复后自动同步到云端。  
1

3)一键导入sketch文件

Figma可导入Sketch文件,大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。

 

4)更强大的组件功能

Figma和Sketch都拥有组件功能。当原始组件更改时,复制组件就会同步变化,在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步,复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时,原始组件不受影响。此时二者的关联逻辑仍然存在,当再次修改原始组件,复制组件仍然会同步变化。相比于Sketch,Figma把组件做的更加灵活限制更少。

同时Figma也在不断优化其组件功能,在Config Europe大会上,Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件,在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。

如下图中的按钮组件,设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。

 

5)与代码紧密结合

在使用sketch输出设计稿时,设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合,本身自带交付功能。其文件中的每个模块都有代码模式,只需要将开发同学的账号开通查看权限并发送链接,就可以直接在设计文件上获取标注,也可自行导出所需的CSS、ios、Android样式。

 

6)一键恢复历史版本

Figma会将设计师的每一次修改存成对应的历史版本,当老板说想要某一版时,设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件,也有机会一键抢救。  
1

7)团队协作

团队协作功能可谓是Figma最大的核心竞争力。当几位设计师需要维护同一份设计文件时,Figma可以支持几位设计师同时在线修改,只要将文件链接分享给对方并给到相应权限(查看、编辑权限)即可。如果使用sketch,设计师一般会发送源文件给对方修改来达到协作效果。来回传输源文件不仅容易造成文件同步出错,而且有一定的下载时间成本和存储成本,相比之下Figma的优势显而易见。

除了设计师之间的协作,Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比,Figma的评论功能使得同事可以在设计文件中实时标注讨论方案,提高了线上评审效率。

 

小结
设计师受文件本地存储的限制,在工作中把源文件给同事、设计稿给产品、切图给开发、一项简单的输出对接任务变得琐碎起来。Figma的出现打破了设计师长久以来的孤岛工作状态,设计师只需分享一个链接,同事可以修改设计稿、产品可以评审、开发可以查看界面模块的属性甚至查看代码,大大提升了设计师的工作效率。如果您的团队正在考虑更换设计工具,Figma是一个不错的选择。

 

2. 动效工具篇

2.1 Framer Web
Framer Web是一款在线动效设计软件,于今年5月上线正式版,相比于Framer家族的前两款产品Framer classic、Framer X, Framer Web突破了其以代码为操作核心的理念,上线的新版本对设计师来说更加易用友好。

 

Framer Web的核心亮点是什么?

1)网页端全平台可用

相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑,Framer Web是一款基于浏览器的在线设计工具,因此windows用户也可以安心使用。同时个人版本免费,大大降低了设计师的使用成本。

 

2)文件导入

Framer Web可通过import选项导入Sketch甚至Figma文件,可搭配Sketch和Figma快速制作高保真动效。

 

3)轻松实现复杂动效

Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效,但对于设计师们来讲十分不友好,学习成本过高。此次发布的Framer Web为了解决这一问题,增加了适合设计师使用的可视化界面控制动效,设计师可以通过Magic Motion轻松实现复杂动效。

Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后,可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态,那么在画板切换时该元素就会生成补间动画发生相应变化。

 

同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video,本身会有一些独特的交互行为如End、Pause、Play(播放、停止、暂停),当进行这些操作时,会触发相应的页面变化。

 

4)从设计到代码

代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板,设计师还是可以在设定了动效后,通过点击顶部的handoff调出相应代码。如果你是一个需要使用代码的设计师,你仍然可以通过编辑代码实现更复杂的动效。
对于设计师来说,Framer提供的丰富动效已经可以满足绝大部分诉求。绝大部分设计师已经无需再关注代码部分,通过可视化界面完全可以做出很丰富的交互效果。而Framer Web最终的野心是希望设计师通过可视化界面设计出参数化的动效,可以直接导出相应的能交付生产端的代码。

目前Framer Web 已经可以实现导出相应动效代码,但导出的效果仍有待完善,只是可以导出Transiton的参数而已。

 
5)高效协作
Framer Web和Figma一样,也非常注重团队协作。设计师可以将链接分享对方进行查看、编辑,方便几位设计师合作一个项目的情况。与需要反复传输文件相比,Framer Web省时省力,大大提高了设计师的工作效率。
 
小结

Framer Web放弃了攻占界面设计领域的策略,转而和Figma官方达成积极的战略合作,专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整,相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能,非常值得期待。

 

3. 插件篇

虽然云端化的设计工具正逐渐兴起,但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外,也会介绍一些好用的sketch插件,大家可以根据自己的需求自行尝试体验。

  

3.1 Design Lint(Figma)
设计师在做较大项目时可能会绘制几十个页面,难免会存在界面丢失元素的情况。Design Lint就能帮助你解决这一问题。它可以在你工作的时候进行实时更正,检查不同界面直接的差异,包括颜色、字体、填充、半径值等样式差异并纠正错误。
如果你做了一些修改,Desgn Lint也会根据你的修改实时更新。这款插件可以让你更专注于设计本身,而不用浪费时间检查不同页面的元素是否使用正确,大大提高了设计师的工作效率。
https://www.figma.com/community/plugin/801195587640428208/Design-Lint

 

3.2 TinyImage Compressor(Figma)
设计师在做较大项目时导出的设计稿过大,存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件,导出多个图片时还会自动生成一个zip压缩包。
https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl

 

3.3 Design System Organizer(Figma)
这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时,会遇到如图所示的:“Buttons-Small-Default…”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后,该组中所有组件的名称都会随之改变,十分方便。
https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

 

3.4 Juuust Handoff(Figma)
Figma本身自带交付功能,但该插件的好处是生成的是离线文件,导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。
https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff

 

3.5 Image Optim (Sketch)
设计师在导出设计稿时有时图片过大,Image Optim可以在导出图片时压缩图片,但不会影响图片的质量。使用时需先安装app再安装Sketch插件。
https://oursketch.com/plugin/imageoptim

3.6 FontFinder(Sketch)
设计师在做较大项目时可能会绘制几十个页面,难免会存在字体使用错误的情况,Font FInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体,你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改,大大提升了工作效率。
https://oursketch.com/plugin/font-finder

 

3.7 Craft(Sketch)
Craft插件十分强大,其中填充功能可以大大提升设计师的效率。在设计如列表页时,设计师为了效果需要编辑不同的标题、图片,都要冥思苦想编内容。Craft可以一键填充文字,如姓名、文章、日期、邮箱、地址、国家等。不同类别下面也设置了一些分类,方便设计师选择。除此之外,Craft还可以一键填充真实不重复的照片,为设计师节省了很多时间。
https://www.invisionapp.com/craft
3.8 BaseAlign(Sketch)
Sketch自带的对齐工具对形状来说很好用,但对于文字来讲一般是文字的文本框对齐,并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐,这样就以保证不同大小的文字都可以对齐,设计效果更完美。
https://oursketch.com/plugin/basealign

 

4. 协作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种,提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW,就可以将文件链接分享给产品经理、开发等同学。

产品经理在手机小程序上就可以预览方案,设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。

网址:https://xshow.tencent.com

 

XSHOW是如何实现高效协作的?

对于设计师

1)可视化上传文件

设计师先在Sketch中安装XSHOW插件,可使用快捷键或直接点选需要上传的文件画板,接着直接选择XSHOW中的“导出”,就可直观快速的将文件上传到XSHOW。

 

2)记录所有版本迭代,轻松找回第一稿

设计师每一次上传的文件都会有云端记录,设计师可以通过时间轴便捷找回历史文件,轻松找回第一稿。 
1

 

3)灵活丰富的分享权限

对于项目分享的权限,XSHOW的设置更为灵活,除了支持私密、公开、指定人或团队可见外,也可以控制权限的时效。

 

对于项目管理者

1) 直观了解团队输出,组建团队展示能力空间

XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况,同时可以组件团队展示能力空间。 

 

2)方案变更及时知道

XSHOW有记录所有版本迭代的能力,因此作为项目管理者可以及时知道团队成员对方案的修改变更,解决了团队内部有时同步不及时的问题。 
 

3)便捷组建项目和管理团队成员

项目管理者可以在XSHOW便捷组建项目和管理团队成员,大大提高了项目管理者的管理效率。

 

对于合作产品经理或甲方

1)多端查看更方便

XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果,如果合作方身边没有电脑也可以及时查看稿件。 
 

 

2)查看历史变更

XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况,大大提升了信息同步效率。

 

对于开发工程师
1)便捷查看标注与管理切片
设计师将文件上传到XSHOW后,只要将链接分享给开发,开发就可以直接在线查看文件标注、下载切片。

小结
XSHOW作为一款高效协作工具可以大大节省设计师稿件输出成本,提升工作效率。希望大家多多体验,体验地址:https://xshow.tencent.com

 

Part 4 结语

在未来界面设计工具会继续向云端性、协作性、通用性发展。大家可以根据自身情况尝试使用Figma、Framer Web等新兴工具来提高设计与协作效率,形成良性的协作体系,使自己更专注于设计本身,创造更大的设计价值。 

 

原文地址:腾讯ISUX(公众号)

作者:ISUX

转载请注明:学UI网》那些高效的界面设计工具

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

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

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

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

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


后台界面设计的7条原则

seo达人

图片

Illustration: Outcrowd

 

1、构思仪表盘界面的大脑

让我们深入研究设计解剖学。仪表盘的“父母”是客户端、设计人员和开发人员,每个组件设计都需要他们的合作产出,所有关键点在一开始要做出说明。

智人是由胚胎发展而来的。首先形成的是脑细胞和神经细胞,然后是身体的其他细胞。这正是任何可行的项目应该遵循的方式。第一个阶段是最重要的。如果你忽视这个阶段,再花哨的设计也不能挽救局面。这正是为仪表盘的长期发展奠定基础。

仪表盘如果会说话的话,它会问“我为什么出生?谁需要我?“。

试问你能回答吗?因此你需要明确:

  • 仪表盘将如何助力公司目标?
  • 什么结构,功能和视觉效果将帮助仪表盘服务好用户?
  • 哪种设计最适合目标受众?

这些问题的答案将构成你的设计理念基础。

图片

Perls

 

仪表盘中没有琐碎的细节。

仪表盘显示的信息应该使用户能够做出决策。设计师的工作是帮助用户解决问题,而不是让他们使用一堆很酷的小工具。任何对目标不起作用的事情都会与目标背道而驰。

从项目的最初阶段到最后阶段,设计师必须关注公司的目标、仪表盘的目标和用户的目标。

否则,仪表盘将永远不会做的更好。

图片

Clover

 

2. 数据及关键指标选择:循环系统

仪表盘数据就像循环的血液。我们必须理解它们来自哪里,当用户需要它们时如何处理,以及应该如何可视化。

设计师需要理解数据的目的。显然,这将帮助他们选择合适的组件,但还有更多的工作要做。例如,用户希望在屏幕上看到大量不同的读数。你不需要移除任何东西来清除一些空间,但你可以做的是突出最重要的元素,并在视觉上“弱化”次要的东西。然而,要做到这一点,你必须知道数据的优先级。

图片

Bidding Car

 

最重要的指标是哪些数据能帮助达成目标。例如:

  • 显示实际成功率;
  • 影响产品的感知方式;
  • 激励创造产品的团队。

参数的选择也需要了解用户。用户应该看到哪个关键指标,他们认为什么样的可视化表现最容易理解?

人们喜欢看到与他们的目标相符的数字。

图片

Panch

 

3. 仪表盘结构:骨架

想象进入一个酒店房间,看到一张床,一张桌子和椅子,一面镜子和一个壁橱。甚至不用打开壁橱,你就能猜到里面有什么。吹风机、拖鞋和毛巾都在你想要的地方——有人确保了这些。一个好的仪表盘就像那个房间。它是干净的,整洁的,可预测的。你马上就能看到所有的要点,凭直觉知道在哪里可以找到其余的内容。

设计师有自己的工具来确保整洁。

 

1) 层次结构

首先,你得整理思绪。在开始设计之前,一定要对所有数据进行排序,将其分类,了解什么是最先发生的,什么是最后发生的,接下来是什么等等。确定用户必须马上看到的关键内容。

视觉层次结构必须反映信息层次结构。

数据层次结构通过小组件的大小和位置表示。如果你的读者从左到右阅读,关键信息必须放在左上角,最不相关的信息将在右下角。

对数据排序的方法将取决于仪表盘的用途。重要的是根据信息的优先级组织信息,并创建逻辑场景。

把信息面板看作是一个故事,而不是一系列数据点。

 

2) 网格

网格对于创建页面的总体布局、排序、平衡和对齐元素非常有用。

图片

 

3) 信息模块

模块系统类似于公寓的分区。卧室是用来睡觉的,餐厅是用来吃饭的——每个区域都有自己的功能。你的舒适度取决于他们所处位置的便利程度。糟糕的布局不能通过装修或家具来修复。相应地,必须提前考虑模块划分。

模块帮助显示内容层次结构,根据数据的重要性、相关性和逻辑连接对数据进行分组。每个模块都应该在给定的流程中服务于特定的目的。

图片

图片

 

4) 连续性和接近性

如果你去厨房需要经过有两扇门的走廊,这是一个糟糕的布局。互连的流程假定逻辑接近。如果一个模块中的流程需要来自另一个模块的信息,那么布局上应该保证数据的连续性。这一点必须提前考虑,这样用户就不必在晦涩的存储空间中寻找他们需要的信息。

图片

Illustration: Outcrowd

 

所有相关信息都应按重要到不重要的顺序进行分组,并就近放置。

 

5) 分离模块

没有人需要一个延伸到卧室的厨房。为了将一个模块与另一个模块分开,你需要负空间。确保从一开始就考虑到这一点:将负空间视为需要视觉平衡的设计元素的组合。

图片

Wingle

 

4. 功能:肌肉

功能和工具的数量由仪表盘的用途及其用户的关键目标决定。

要想自由活动,人类只需要两条腿,狗需要四条腿,蜘蛛需要八条腿。一个功能太多的仪表盘就像一条六条腿的狗一样,这有点令人毛骨悚然。

不要在控制面板上放置过多的工具。用户只需要手边有必要的东西。过多的可用工具会让人们感到困惑,并吓走他们,因为它看起来太复杂了。个性化总是比标准化好。

图片

Band

 

5.小组件:重要的器官

如果屏幕上有超过5到7个小组件,人们就很难理解内容。因此,我们的工作是让相关数据易读,但不过量。用户应该在几秒钟内理解他们所看到的内容。

数据可视化工具包括:

  • 表格
  • 图表
  • 示意图
  • 卡片
  • 指标
  • 地图
  • 图片
  • 分组
  • 筛选器
  • 列表
  • 选择树

图片

Activity

 

小组件的选择取决于仪表盘的用途和用户。想想以下几点:

  • 哪个组件能最好地显示一个特定的KPI?
  • 用户可以立即看到什么?
  • 哪个组件是用户最容易理解的?
  • 什么可以帮助用户更快地找到他们需要的东西?

选择易于理解和阅读的小组件。

这里是一个令人困惑的小组件的例子:

图片

想想主要的“目标”来吸引用户的注意力。例如,如果你的优先级是绩效目标,你应该使用数字;如果你需要比较值,用直线或柱状图会很好;为了激励团队,可以使用带有相关亮点的排行榜。

不正确选择的小组件或默认小组件模板可能会使用户混淆或导致他们误解数据。

最好的解决方案是分析和测试的结果。

图片

最好的小组件设计是极简和易于阅读的。例如,一个3D图表可能看起来令人印象深刻,但它占用了用户太多的注意力,最终证明会分散用户的注意力。这也适用于渐变、过度使用颜色和过多的细节。

 

6. 视觉设计:一般技巧

我们已经创建了仪表盘的思想和身体。唯一要做的就是皮肤——最外层。这可以根据优秀设计的基本原则来实现,但仍有一些新的需要注意的细节。

 

1) 简单

仪表盘应该像你喜欢工作的桌子一样干净:它必须只有必要的文件和工具,没有干扰。

图片

MEMO

 

2) 颜色

仪表盘颜色的选择必须有一个目的:尽可能清晰地显示信息。颜色跨度越大,就越难把数据展示清晰。所以不要让仪表盘的颜色过多。使用同一颜色的深浅是一个好的办法。

图片

首先要选择底色,然后是补色。每种颜色都必须有特定的用途。一种颜色可以用来组合元素,另一种颜色可以用来高亮。颜色还能体现一个元素是积极的还是消极的。

避免使用可能有负面含义的颜色。例如,在这个例子中,红色看起来像是代表坏的和不受欢迎的东西:

图片

如果仪表盘提供了可定制的颜色,确保所有可用的选择看起来都比较舒服。

选择颜色组合的一个好工具是Adobe color CC。

 

3) 突出

语义高亮应该与视觉高亮相对应。为了突出一个元素,你可以使用颜色(对比度,亮度),形状,大小,负空间等。

 

4) 可读性和数字格式化

这是确保视觉清晰度的重要因素:干净的布局,视觉层次,重点突出,对比元素,适当的字体,这些字体也必须具有对比性和易读性。

高精度的数字格式很难理解。最好把所有的数字都四舍五入,然后把较长的数字尾巴去掉。

 

7. 适应性

在实践中,当用户优先考虑桌面版本时,在移动版本之前创建网页版本是合理的。如果你的目标用户主要使用的是手机版本,那么你可以先从移动设备着手构建仪表盘,然后再开发桌面版本。

图片

Snap

 

总结

设计一个好的仪表盘不是一件容易的事情。我们把它比作人类的发展,因为它是一个很好的方式来呈现重要的东西。当你在设计仪表盘时,请不断地问自己:是否一切都已就绪?有多余的肢体吗?身体的各个部位协同工作吗?用户会喜欢这个结果吗?它有用吗?

正如你所看到的,视觉设计实际上是设计师最不应该担心的事情。

最后,彩云再分享一组常用的后台图表界面组件库,相信会对大家的日常设计工作有帮助,

图片

图片

图片


 

本文翻译已获得作者的正式授权。

 

原文地址:medium

作者:Erik Messaki

译文地址:彩云译设计(公众号)

译者:彩云Sky

转载请注明:学UI网》后台界面设计的7条原则

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

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

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

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

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



体验设计师的成本思维

鹤鹤

为什么设计师要有成本思维,以及成本思维在做我们做设计时对我们有什么帮助。



不仅仅在工作中我们需要思考成本,在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩,所以贝克尔在《人类行为的经济学分析》中提到:人的任何行为都是理性选择的结果,无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人,但是大多数人就是如此。



在夜深人静的夜晚你饥肠辘辘想吃夜宵,你可以选择下楼到周边小吃店就餐,也可以选择叫外卖,前者付出的成本是你需要通过身体行动来交换最后的结果,后者则是花费一定的金钱来代替前者的行动。


那么我们通常会如何选择呢?如果这两种成本有很大的差异,比如需要到很遥远的地方那么除了身体行动成本外,时间成本也会计算其中,所以相比后者成本陡然增大,于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵,外卖点餐会特别影响口感,那么你可能会选择前者,这里由于外卖口感和主观意愿影响到了我们理性的选择。‘



1.为什么要关注成本


成本决定了收益的效率、大小和方式,小到你伸手拿一支笔你会选择最近的,大到我们人生的投资。成本与收益之间并非是直接关系,收益的大小的不取决于成本的大小,还有风险因素。例如我们在对UI界面进行优化,可以选择的方式有很多:


1.只调整视觉,替换样式

2.对页面逻辑进行重构

3.整体功能进行重新分类组合

......


我们的目标是让用户获得更好的体验并且提升业务价值。3种方式需要的成本高低不同,我们都希望付出最小的成本达到最好的效果,于是我们就会考虑到风险因素,假如新流程用户不会用怎么办,假如新版本导致的数据下滑怎么办,假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。



你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间,提供更好的环境与服务,让他们产出更多的价值。还有假如你的车坏了,你最直接的方法就是花钱找人帮你修而不是自学自修,因为你将花费太高的成本。


再举一个例子,我们想提升能力,有的人选择自学、白嫖,有的人选择报培训班,这也只是时间和金钱上的成本选择,如果你的自学(白嫖)在短时间收益很大那就毫无疑问帮你省了一大笔钱,但是如果自学很久都毫无效果,那么时间就是你花费的成本,时间和金钱不同的是,时间不可逆。看起来花钱比花时间更好?不是,花钱也有风险,比如课程质量和服务很差,钱没了还学不到,甚至赔上了时间。但如果你选对了,那么收益就远远会大于自学。




2.设计师可以关注哪些成本


1.实现成本


实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗,例如我们希望提升用户下单的转化率,我们可以选择:1.减少整个流程的步骤 2.将按钮设计的更明显 3.给用户发放优惠券 4.给用户营造抢购氛围,在这几个方案中最低成本是2,因为只需要调整样式和简单开发就可以实现,但收益并不是最高的,而其他的方案需要更多的角色花费更多的时间来参与,但是收益也不是显而易见的。所以如果你的产品比较成熟,那么我们一定选择成本更低的方案,反之我们会进行更高成本的尝试。



还有比如我们找工作,新公司福利待遇比现在公司好50%,平台也更大,是否不需要思考直接去呢?当然不是,你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你50%薪资涨幅换来的是996、每天通勤时间3、4个小时,不仅仅是时间精力,还有我们的身体健康的成本,我会觉得远远不值,成本太高。




2.机会成本


我们先来看一下定义:机会成本是指面临多方案抉择时,被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子,比如当前版本我们有1个开发一个设计一个产品,我们面临着两个需求,但是资源和时间只够我们做一个需求,这时候2选1,那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本,相当于我们放弃了那个需求所拥有的价值。


再通俗一点讲,我现在有100万,面临着两个选择:1.银行理财,年收益4%,4000. 2.做生意投资,年收益8%,8000,那么就相当于我花费了这4w的潜在成本获得了8万的收益。



3.边际成本


边际成本的理解很简单,我们可以理解为我们每付出一定的成本收货的收益或者每收获1个单位的收益所付出的成本。用一个通俗一点的例子来讲,比如你一共学习10天,第一天学完你考了30分,第二天学完你考了50分……第8天学完你考了94分,第9天学完你考了98分第10天学完你考了100分,花费的单位天数一样但是每次增加的分数却越来越少,收益也就越来越少。



在做产品设计的时候,我们往往会有一个板块叫为你推荐,比如微信阅读中的这个板块,它一次提供了用户6本书,虽然算法可以算出有许多书,但是这里每次只提供给用户6本,是因为涉及到了边际成本,少量多次提供能够让用户更聚焦,更快的选择好书本进行阅读,每多提供几本书,用户选择阅读的时间成本就会越大。有同学会问:那我只给1本不就好了,用户就能马上读了,何必要推荐6本?



我们如何保证那一本刚好是用户想读的,没有办法做到如此精准,如果每次只推荐一本书,而用户尝试了几次都不喜欢,他们就会放弃,所以这里就会选择一个临界值,比如我们可以选择每次放不同数量的书,根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。




4.体验成本

体验成本也是我们设计师需要时刻关注的,俞军老师在产品方法论中提到,用户价值=新体验-旧体验-替换成本,体验成本可以包含很多信息,最主要的就是认知与交互的成本。


4.1认知成本

如何降低认知成本可以从以下这些点进行优化


4.1.1.文案

文案的设计要求是简单易懂,避免产生歧义,之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析,大家可以再思考一下,是否会产生歧义。还有确定、确认大家是否知道怎么用呢?


文案也需要有情感化,避免生硬、带负面情绪的问题等等


4.1.2.样式

视觉最为直观,一个按钮一个控件的样式是否能满足用户的心智和预期,将会影响用户的认知,例如以下的几个按钮,出现在不同场景用户会出现一系列问题:为什么我点了没用?为什么还不能点?我到底该点哪里?



还有你的品牌是否识别度高,也决定了用户对你的认知,最近小米花了百万请大师做了新的logo,在视觉上更加圆润,在圆logo的基础上做了很多的微调,实际上也是避免了太大的logo变化导致品牌认知成本的提高,认知成本一旦太高,品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。



4.1.3.信息

比如我们希望新用户去关注一些大咖、kol获得更好的推荐,但是如果我们只是将推荐者的头像和昵称给新用户,那么这个策略就是失败的。因为我们没有考虑新用户的认知:1.我为什么要关注她 2.关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。




4.2.行为成本

我们通过利用肢体来和媒介进行交互,目的是完成某项任务。其实只需要你抬手,那么就是产生了成本,只不过某些成本是固定的无法减少的,比如你要去骑车那就需要去解锁,如果没有锁车可能就会被偷走,这是出于安全考虑。


行为成本在具体数字产品中我们可以发现很多,例如你只需要将手机拿起,屏幕就会亮,相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私,所以还需要通过指纹或者人脸进行识别。


例如几种不同的验证方式,利用滑动拼图来解锁和输入相关验证码解锁,前者比后者的学习成本和操作成本都低。


在移动端我总结了几个减少交互成本的方法,不妨来看下:



1.利用滑动代替点击


soul音频处理

日期选择

iPhone底部横条切换窗口




2.利用点击代替输入

游戏昵称随机

股票买入数量



这里也有同学会问,既然都可以代替,那滑动能否代替输入?必须也是可以的,例如iOS自带的计时器中选择时间的控制器,还有闹钟设置,这里要注意的是,滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的,比如房价筛选,房价本身量级很大,用户筛选也不会精确到个位数,在这里用点击和输入会比滑动的成本更低。


反例就是音量、明暗控制,大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入,需要大致的范围选点击,非常模糊的感受选择滑动。



3.在必要时利用语音代替输入

例如我们在开车进行导航的时候,打字输入非常不便,于是加入了语音输入。还有在微信进行账号切换时,我们可以选择利用语音输入数字来验证身份。



4.给予详细的提示

对于新用户操作复杂功能和界面的时候,提供更多提示能够很大程度上减少用户的操作成本。



5.尽量不使用二级手势

在iOS或者安卓的手势控制中,我们会发现又一些常用的手势比如:点击、拖动、轻扫、双击、缩放,这里我们可以定义为一级手势。还有一些不常用的比如:重按、长按、三指滑动、三指缩放等,这些手势的认知成本和行为成本都很高,定义为二级手势,不建议频繁使用。




总结

设计师在日常工作中接到的需求繁多,无论是在做需求之前还是在思考设计方案的时候,成本思维可以帮助我们很好的规避一些问题和风险,我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。

文章来源:站酷      作者:应骏

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

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

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



从6个层面,帮新手快速入门B端设计系统

周周

设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产,是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案,能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发!

用超多案例,帮你学会经典格式塔理论的7个视觉原则

周周

格式塔理论为界面设计准则提供的相关的基础理论和原理支撑,一起来了解下吧!

「格式塔」一词并没有确切的翻译,因此我们采用了它的德文音译(Gestalt),也有将其译成「完形」也就是完形心理学。完形心理学和格式塔心理学只是不同译法的区别而已。

经验总结|UX设计师必备的交互开发知识

周周

设计师在日常工作中,避免不了与开发、测试同事沟通交流。他们说的话,你真的听明白了吗?如何更快、更好的无障碍交流?这就需要我们设计师,多多了解开发、测试同事们常用的术语,以及一些与设计相关的代码知识。

网站视觉设计的本质是什么?如何平衡「艺术」与「商业」?

周周

相信网站视觉设计的重要性大家应该都清楚,对于普通访客来说,网站的框架、交互逻辑等这些都是其次的,访客首先感受到的是网站的视觉设计,同时视觉也能够直观地表达出我们所要传递的价值。因此,我们在建设网站时,一方面需要确保网站的视觉效果足够优秀,另一方面需要保证视觉能够传递正确的商业价值。


日历

链接

个人资料

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

存档