首页

Vue报错Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解决方案

前端达人

错误提示:


  1. ERROR Failed to compile with 1 errors 下午6:51:57
  2. error in ./src/views/Login.vue
  3. Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
  4. at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
  5. at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
  6. @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
  7. Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
  8. 13:3-17:5 14:22-397
  9. @ ./src/views/Login.vue
  10. @ ./src/router/index.js
  11. @ ./src/main.js
  12. @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 解决方案:

找到问题所在:Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

这个问题是因为Sass的版本过高导致,所以根据提示将版本改为对应的版本就可以了,我这里是改为4.0.0版本。

下面是怎么改版本:

1.首先在IDE中找的package.json文件:

2. 然后打开该文件找到“sass-loader”,后面跟着的便是你现在的版本,根据提示将其改为对应版本即可 :

3.在Terminal(终端)中输入:cnpm install(注意用cnpm 淘宝的镜像,用npm可能会下载不成功)

 4.运行成功:npm run dev


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

文章来源:博客园

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

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

2021-2022设计趋势ISUX报告·社交APP篇

seo达人



互联网社交发展方向

先来看看技术发展和现阶段人口结构的变化对线上社交有什么影响。

技术上:

2G时代的社交实现了跨地域聊天,用户可以在QQ里和天南地北的人聊天,强调在线状态。QQ号是用户社交虚拟身份的id,是用户自我创造的线上人设。2G时代的社交寻求更为方便的沟通方式。

3G进入了移动社交,著名风投公司合伙人约翰·杜尔提出SoLoMo概念(社交化、本地化、移动化)。用户可以基于位置进行交友,比如附近的人;基于行为匹配,比如微信摇一摇。没有在线状态,可以随时随地的联系,随时在朋友圈获取对方线下的生活状态。

4G时代,手机硬件、大数据和AI的发展,大大提升了匹配的效率,高效地建立潜在社交关系。不论是看脸社交还是灵魂匹配,都能在很短时间内找到合适的人聊天。信息传输越来越快,沟通互动的方式不断革新,用户从文字、图片聊天进而习惯于实时语音和视频。

随着5G到来,高带宽互联网、云、AR/VR/MR的高速发展,视频作为主要的信息和沟通载体变得日益普及,疫情让在线沟通和协作越来越方便,更多的线下社交场景转移到线上,线上社交的频次大大增加的同时,副作用也开始呈现,社交隔离让人们感到更孤独,对云社交的需求愈发强烈。

 

人口结构变化:

独生子女群体在80年代出现,但由于父母辈基本是有数量较多的亲兄弟姐妹,因此第一代独生子女的同辈中有较多的表兄弟姐妹或堂兄弟姐妹互为玩伴。而由第一代独生子女繁衍出的第二代独生子女,也就是现在的大部分00后,家庭规模越来越小,亲属同辈越来越少,加上人口流动频繁,少有的亲属同辈也较为疏远。

00后这一阶段的出生率跌至了最低点,平时家庭、学校二点一线的生活,繁重的课业负担,原本在亲属同辈圈的社交就少,在学校的熟人同辈圈的社交也越来越少。

 

 

2018年发布的《00后来袭-腾讯00后研究报告》中说到,“75%的00后渴求有更多的时间跟同伴在一起”。00后在现实生活中缺失的同辈圈社交,更有强烈的诉求去互联网上寻找。他们有着更为复杂的社交需求,通过与同辈圈的互动,建立同辈伙伴关系,从中获得陪伴感、归属感和自我认同,形成自我认知。

回顾这几年社交的变化,技术让社交体验从“线上线下割裂”向“虚拟空间映射真实世界”发展,00后的线上社交需求更加强烈,我们如何解读用户、解读人群,寻找他们的需求痛点。接下来,本文从自我展示、匹配连接、沟通互动的社交体验路径来探讨社交的设计趋势和特点。

 

最初的互联网社交身份是简单的虚拟身份ID:虚拟头像、昵称、个性签名、QQ秀,当时的社交体验线上和线下完全割裂,用户的自我展示强调纯线上人设打造。随着硬件设备和图像技术发展,用户慢慢丰富社交资产,用真实身份交友,高清美颜自拍、沙雕表情包和声音名片,线上的自我展示与线下生活紧密联系。而现在,更多人用虚拟形象代表自己,技术的进步让虚拟形象的展示更完美、更逼真。

 

1-1 真实身份展示从单一趋向于全面

用户在展示自我的时候往往需要填写大量文字信息和传输多张精修过的照片,导致编辑成本高、浏览效率低。视频化的普及让用户随时随地记录自己,在这种沉浸式的自我展示中,身份信息传达更加有效和真实,也进一步放大用户的自我炫耀感。

Feels的个人资料由全屏照片、视频、问答组成,用story的交互方式进行浏览。

 

1-2 从声音名片到声音形象,更加赋予了情感和灵魂

语音的优点在于比文字传输效率高,一篇完整的文字自我介绍用语音三言两语就说完了。而语音的缺点是无法在嘈杂的公共环境中使用,所以老年人最爱用语音,因为他们私人空间较多。疫情让人们大大减少了旅游和外出娱乐,享受个人空间的时间变多了,从而缩小了语音使用环境受限的缺点,放大了传输效率的优点。在今年,出现大量语音房社交,语音从“萝莉音”“正太音”的声音社交名片变成展示个人形象的方式。

Clubhouse带来语音社交热潮,Facebook、Twitter也相继上线语音房hotline和Spaces,用户可以找到一个感兴趣的主题房进行聊天或围观,那些通过短短几分钟发言就吸粉的高质量用户,通过声音赋予了个人的情感和有趣的灵魂。

Reddit Talk 

 

1-3 从“我是谁”到“我们的关系”

展示自我除了从展示者的角度来设计“如何更好的展示社交资产”外,也要从看的人的角度考虑“如何更好地了解他”。

ios15从spotlight输入联系人的名字,对方个人信息会智能拉取你们相关联的信息,包括最近的聊天、共享的位置和照片。

 

Snapchat能根据生日、出生时间、地点生成个人星座运势和个性,还能和好友进行星座合盘。通过个人资料之间的交互,强化双方身份的情谊特点。

 

1-4 虚拟和真实之间,越来越强调“真实”

虚拟形象的概念不新鲜了,2003年QQ秀是虚拟形象的雏形,Y世代网民根据自己的喜好拼出属于自己的QQ秀形象,用于QQ聊天时的自我形象炫耀和情感表达。Z世代逐渐成为互联网的主力军时,他们的个性习惯和独特的表达方式让虚拟形象在社交中的使用需求愈发强烈。《Z世代圈层消费大报告》提出z世代五大典型兴趣圈层为:电竞、国风、二次元、模玩手办、硬核科技。Z世代已经从他们的兴趣中建立了对虚拟形象的情感,兴趣成为他们建立自我人设的重要手段,他们跳出固定人设,在不同兴趣圈层展示多样个性,使用特定冲浪语,以此获得归属感和认同感。

高新技术的发展让虚拟形象变得越来越高质量。苹果的Memoji、Snapchat的Bitmoji和Facebook的avatars让虚拟形象成为自己的化身,用于个人资料展示以及聊天表情包、合照、视频互动等场景。Snapchat最新的资料设计中展示了3DBitmoji。

 

依靠面部捕捉、表情捕捉、动作捕捉的技术,实现了真人与虚拟形象的动态同步,降低了真人化虚拟形象的设置成本。在SXSW2021音乐节上,展示了Facebook新avatar系统推出的VR社交应用Horizon。人与人能通过虚拟形象进行实时互动,除了有自己逼真的形象外,还具备真实的眼神表情和肢体动作,还会根据肢体动作变化不同情绪。

 

大数据和人工智能时代,融合了AI技术的虚拟形象也在近几年层出不穷。与真人虚拟形象不同的是,它不受对方在线的限制,能随时进行实时互动,来满足用户对陪伴和娱乐的需求。麦当劳推出一位唱跳型爱豆的虚拟形象,她可以和小朋友进行沟通互动,一起跳舞,跟小朋友讲故事,增加与消费者之间玩伴、陪伴关系。

 

麦当劳虚拟偶像“开心姐姐”

用户在社交网站分享动态,维系自己的人设,获得群体的存在感和认同感。在未来,这些记录和创作的内容是否会形成自己的虚拟空间?每一个人不同的故事动态与空间产生联系,形成自己独有的虚拟空间社交资产。

 

1-5社交人格从「完美人设」到「透明人设」

随着好友列表数量增多,很多人开始逃离朋友圈,人们在朋友圈的人设经营也越来越谨小慎微,开始疲于“完美”人设的表达,社交产品开始减压。正如越来越多的年轻服装品牌进行的「透明商品运动」,他们在品牌宣传时,将商品从生产到制作的全过程透明化公开给消费者。「透明人设」是反对当今社交信息流充斥着的完美人设,鼓励自我展示更加真实和未经编辑。

Dispo复古相机拍摄后需要24小时才出片,并且没有任何美图的编辑工具。传达现实生活中不完美的时刻也是值得捕捉和分享的。

 

Poparazzi能连续拍照变成GIF进行分享,同样也传达未经过编辑的更真实的自我展示。用户用emoji进行互动,仅展示动态收到的emoji表态数量。

 

你是否会因为动态无人互动而焦虑?是否会因为很久不更新动态而失去展示的动力,慢慢社恐?instagram和Facebook允许用户隐藏帖子的赞数,来减轻用户的压力和焦虑。

 

 

2-1 匹配趋向于多元化

调查发现,现实中两位互不相识的陌生人要花50小时,才可以在路上叫出对方名字,再投入40小时,才能蜕变为真正的友情。互联网帮助用户高效匹配,缩短认识的时间,降低认识的成本。

近几年,用户的喜好正在极速分裂和细化。《00后来袭-腾讯00后研究报告》表明73%的00后会主动地获取资源来发展自己感兴趣的领域。由于现实中同辈社交圈狭窄,他们需要在互联网的社交阵地上寻找更垂类的兴趣伙伴,比如云学习伙伴、游戏玩伴、coscp等,线上社交在不断垂直细分以便更快捷的连接同辈伙伴。

随着传输速度的发展,匹配连接的体验具有更实时的交互和面对面的互动体验。Distance Disco是一款云蹦迪平台,疫情期间,大家在各自房间里通过在线视频就能开启一场线上舞会,结识一起蹦迪的朋友。界面上的视觉元素和色块会随着音乐节奏变化,增强迪斯科的互动氛围。

Honk匹配陌生人聊天的动画,传达了穿越了人山人海,遇见了你的感觉。头像出现时,出现招手动画,像是刚刚见面的人招手打招呼。、

 

 

2-2 匹配提升安全感和隐私保护

现实生活中我们都有意识地保护自己的隐私,而到了互联网,却容易放下戒心将自己的信息分享给他人,线上社交会放大陌生人有趣、友善的一面,却也隐藏了人性的缺点。社交产品的在帮助用户建立社交关系的同时,也要提升用户隐私保护和社交安全的体验。

Instagram帐户注册时,未满16岁的未成年人默认使用私人帐户,仅粉丝才能查看其发布的信息,在平台内容分发和互动上与成年人帐户进行隔离。当用户更改成公共帐户时,会给到提示强调私人帐户的好处。

 

Snapchat推出“好友检查”,用户可以快捷私密地删除不联系的人,确保好友列表里仍是真正的朋友。

 

Tinder的一项调查显示,40%的人在Tinder中发现了前任,24%的人遇到了家人。为了保障用户隐私,用户可以上传他们的联系人名单以选择不想在app中遇到哪些人,屏蔽所选的联系人。

 

在社交产品中,聊天是关键的一环,匹配到合适的用户后,如何加强双方情感连接和信任的纽带让用户为关系而留?从书信到电报到电话到视频通话,都是通过技术的发展获得了更高效真实的沟通体验,线上沟通的用户体验一直不断还原线下的真实体验,疫情加速了多人在线视频通话的发展,既让人在沟通时保持社交距离,又让人感觉对方近在迟尺。

 

3-1 更临场

相较于面对面沟通交流,线上的交流在听觉、视觉、触觉、情绪传递的体验上,决定了用户社交临场感的强弱。

Honk用文字交流时,能看到对方一个字一个字实时的输出,模拟真实的说话方式。

 

2021年Google I/O大会的3D视频聊天设备Project Starline,利用多个高分辨率摄像机和深度传感器在不同角度捕捉用户,以3D的效果进行人物呈现,营造对方真的就在对面的裸眼3D感。

 

2021年F8大会上,Facebook提出用于AR视频通话的MultipeerAPI,更方便创作者制作AR特效,用于多用户、多屏幕的共享AR体验。用户在多人视频通话时,视频中会出现太空或篝火的AR特效,让视频者感受到大家都在同一个共享空间。还支持轻量级游戏,多位玩家屏幕由一根曲线贯穿,玩家用脸引导甜甜圈共同完成接力游戏。

 

2021年IOS15的更新,Facetime使用的空间音频让通话的听感更加自然、逼真,仿佛在同一房间面对面聊天。

 

面对疫情人们在生活中的社交礼仪都以非身体接触式动作替代,线上社交的频次和密度大大增加,视频通话在视、听处理上越来越自然和逼真,在触觉上也向着《头号玩家》的男主角在虚拟空间中感受到的虚拟触觉传递到现实中那样在进化。美国西北大学的研究中,一位妈妈与孩子视频通话时,通过抚摸屏幕,能把来自妈妈的抚摸传递到孩子身上的“AR皮肤”上。未来在虚拟社交中也能获得真实的触碰,加强情感的连接。

 

3-2 更个性

个人展示是单向的,沟通交流是双向的,双方在不断交换彼此之间的状态和感受,从中获得被了解和认可。个性聊天气泡、表情包、自定义聊天背景,帮用户在沟通交流时展现自己独一无二的个性。线上社交的用户语言设计要打造个性化的社交氛围,让用户的个性在沟通中被挖掘和展现。

MUZE在聊天中可以自由摆放文字、贴图、涂鸦,让交流更个性化和自由。

 

Google I/O大会推出的全新设计语言Material You中,系统会基于用户选择的壁纸进行自由取色,并应用到UI中。是否聊天的UI也能随着聊天中的图片,或是聊天发送的表情文字提取心情语义,进行UI的变化,加强情绪的传达。

 

3-3 场景化

人和人的社交通常依附于不同的场景,群聊或好友分组就是将特定的社交关系进行场景设定。比如“火锅突击队”“老废物乐园”“吃瓜小分队”依附社交场景来进行互动,帮助用户带入社交氛围。

咖啡馆社交,通过构建咖啡馆场景,传达和陌生人进行一场闲聊的慢社交体验。

 

Facebook的视频通话,用烟花和礼帽的AR特效来构建派对的社交场景。

 

2021年WWDC大会上,现场用不同的Memoji营造了线上观众参与会议的场景。

 

3-4 感官刺激

2021年Google的一份统计数据表明,用户平均注意力时长从12s下降到9s,而00后的平均注意力仅8s。面对这样的用户,需要让他们在短时间内获得极大的感官刺激来延长注意力,以及在沟通交流时有更极致的情绪表达。

Honk可以同时发送大量的emoji表情。

 

QQ团队运用Lottie技术推出每秒60帧超高帧率、动效更细腻的小黄脸表情包。

 

微信的表情包不仅带来视觉上逼真的3D动画效果,屏幕上其他内容也会随之震动,还有触感上的冲击。

网络表情包 

 

3-5 轻娱乐、游戏社交

《社交媒体趋势报告》提到“和朋友保持联系”一直被列为是使用社交媒体首要原因,但在16-24岁的用户中,主要驱动力变为“寻找搞笑和有趣的内容”。青少年通过线上社交弥补线下社交缺口,获得同辈认同,排解孤独和学习压力。“组队开黑”“一起微光”“找长期固聊固玩”,00后们的社交需求更多放在娱乐、游戏化社交上。社交体验也从物理空间的连接转变到精神空间的连接。

用户在Housparty进行视频聊天时,如果感到无聊,可以玩一场轻松的游戏,游戏过程中可以通过视频看到对方的状态。

 

Snapchat正推出一种叫Connected Lenses的新型增强现实镜头,它可以让不在同一个物理空间的用户一起进行AR游戏,比如共同组建乐高模型。

 

IOS15中Facetime加入Shareplay功能,可以与朋友共享屏幕,一起线上追剧、听音乐、玩游戏。

 

Tinder在今年推出第二季Swipe Night活动,用户通过观看每周一集的互动故事,向左或向右滑为故事中的角色做决定,每一集结束后会匹配到在故事中做出类似选择的用户,并可以继续相关话题的聊天。

 

结尾

科技重塑了我们的生活。线上社交让我们日常沟通更为方便,也让我们轻松维系现实中的社交关系,越来越多的人依靠它构建新的虚拟关系,互联网带来沟通便利的同时,也减少了人与人面对面交流的机会。

美国传播学家艾伯特·梅拉比曾给出一个公式:信息沟通传递=55%视觉+38%声音+7%语义。大意是人们在现实生活中进行面对面沟通交流时,7%是语言上的内容,剩下的是面部表情、肢体动作、目光接触、语速语调等非语言内容的交流。随着技术的进步,社交不断在补充非语言内容交流的缺失。在自我展示中,无论是视频化、声音形象、富有表情和肢体动作的虚拟形象,还是沟通场景中越来越临场的体验和充满感官刺激的表情符号,线上社交的趋势都在不断映射线下社交的体验。

最后,你还想看ISUX什么趋势的文章? 欢迎在评论区留言呀~

感谢阅读,以上文章由腾讯ISUX团队创作,版权归腾讯ISUX所有,转载请注明出处,违者必究,谢谢您的合作。 

 

原文地址:ISUX

作者:腾讯ISUX

 

转载请注明:学UI网》2021-2022设计趋势ISUX报告·社交APP篇

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

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

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

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



设计师必备的Chrome插件,超好用!!!

seo达人



01.Go Full Page

设计师在网上冲浪时,看到一些排版精美、设计优秀的界面总想要保存下来,以便日后寻找灵感。

不知道大家都是怎样保存整个网页的。

我之前的笨办法是这样的:先是一屏一屏地截图,然后再拼接起来,特别是拼连接处时需要小心翼翼地对齐,简直是太麻烦了。

现在的高效方法就是使用Go Full Page,它是整个网页的截图工具,可以轻松松松地保存整个页面。

轻轻动一下手指

图片

便生成了一个长图

图片

 

02.WhatFont

如果我们想查看网页中的字体,这就是神器WhatFont。仅仅通过鼠标停留在字体上就可以查看Web字体,简单又优雅。

图片

 

03.ColorPick EyeDropper

我经常有一种苦恼,比如同样是蓝色,为什么别人家的颜色这么干净清透,令人愉快?这时候就不得不舔屏了……

ColorPick EyeDropper就是一款吸色工具,能够直接从网页中选取颜色值。

图片

 

04.Window Resizer

当想对各屏幕的尺寸测试设计稿时,可以使用Window Resizer快速调节,了解设计稿在不同屏幕上的兼容性。

图片

 

05.CSS Peeper

如果想更加全面的获得网站上的一些信息,比如图标、svg、图片、字体样式、元素间距等等,CSS Peeper便是一个完美工具。

可以查看字体样式,可以查看元素之间的间距

图片

可以查看网页中使用的颜色

图片

可以查看网页中出现的图片或图标

图片

 

Chrome拓展程序的安装也是超简单,在拓展程序中搜索,然后点击应用就可以啦。

拓展程序地址:https://chrome.google.com/webstore/category/extensions

 

原文地址:栗子设计喵 (公众号)

作者:栗子

转载请注明:学UI网》设计师必备的Chrome插件,超好用!!!

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

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

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

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



适老化设计研究实践

涛涛

编辑导语:现今以至遥远的将来,我们将面对一个残酷的现实问题:人口老龄化。未来将有很多人群去关注这个群体,但是在市场上,对老年人的产品还是很少的,还存在很多问题。本文应对这个问题,展示不同适应老年人的产品设计细节,我们一起来看看。

当前,我们正面临老龄化问题的严峻挑战。

统计表明,中国的老龄化人口已达到2.64亿,且这一数据仍在持续增长,而老年人在生活、情感上都面临诸多问题。

  • 首先,老年人在视觉、听觉、肢体、认知方面都出现了不同程度的退化,无法平等地获取信息和服务;
  • 其次,年轻人涌向大城市寻找机会,老年人被迫成为空巢者,疫情的发生更使亲人长期两地分离,老人情感孤独缺少陪伴;
  • 另外,疫情的爆发也促使线下服务转为线上化,老年人不能很好适应这一转变,遇到很多困难。

但是研究发现,市场上目前没有产品很好解决了上述问题。

当下移动APP产品缺少对老年人体验的深层次关注与设计,只通过单一加大字号与简化功能等解决基础体验,缺乏通过新技术应用和更全面的适老化设计服务老年群体,老年人的需求依旧未得到关注和满足。

因此,百度基于自身雄厚的AI技术和精细、系统的适老化设计适时推出百度大字版,使老年人更平等地获取信息和服务、获得情感陪伴。

百度大字版精细系统的适老化设计研究实践

百度大字版精细系统的适老化设计研究实践

一、精细系统的适老化设计:易阅读、易收听、易操作、易理解

目前行业内缺失成体系的老年人研究报告,针对老年人的研究资料分散在建筑/平面/医疗/家居等各个行业,同时业内也缺少针对老年人系统的设计标准或设计指南。

现有无障碍设计标准针对残障人士,且部分标准只适用于PC端,不适用于老年人和移动产品。

因此在进行百度大字版的适老化设计时,我们系统的研究了老年人面临的问题、PC端无障碍设计标准及其他相关资料,产出了系统的移动端适老化设计标准体系,同时结合百度大字版实际场景产出了解决方案。

适老化设计包含:易阅读、易收听、易操作、易理解四个方面,后续将详细阐述。

百度大字版精细系统的适老化设计研究实践

1. 易阅读

随着年龄增长,老年人会出现视力下降、色彩感知弱、动态视觉减弱的问题。

老花眼、眼睛进光量减少等问题会导致视力下降。

眼睛晶体浑浊,晶体变黄的现象会导致色彩感知弱。视力减退,注意力降低,导致眼睛失去快速对焦的能力,动态视觉减弱。

因此为了使老年人更易获得视觉信息,我们对界面元素做了一系列的改造,使内容更易阅读。

1)增大字号

增大字号是适老化设计最有效的手段。

PC端WCAG无障碍设计标准建议字号可以放大到200%。

按不同的阅读媒介与人眼距离进行推导,移动端字号大小建议在60px-81px之间,标题、正文、辅助信息等不同信息层级采用不同的字号标准。

此字号标准经过眼动实验和用户访谈进行了双向论证,形成完整覆盖各信息层级的字号大小标准,已经在百度大字版落地。

百度大字版精细系统的适老化设计研究实践

字号与眼睛距离对照图

百度大字版精细系统的适老化设计研究实践

字号标准体系

百度大字版精细系统的适老化设计研究实践

字号应用场景

2)使用符合老年人生理、心理特征的颜色

老年人眼睛晶体变浑浊、变黄,导致对色彩的感知减弱,且研究表明老年人更喜爱温暖明亮的颜色,更希望感受到活力而不是苍老。

因此在颜色的设计上,我们通过增加色彩对比度到不小于3:1、大量使用暖色调、减少紫色和青色的使用3个手段,来进行界面色彩的设计。

百度大字版精细系统的适老化设计研究实践

颜色的选取和使用

3)提供有效的反馈提示

老年人的动态视觉减弱,对动态内容的捕捉和感知速度明显下降。

因此,对界面中短暂出现的提示性信息,我们在现有提示时长的基础上延长了一档。

例如现有提示的停留时间小于3秒时,百度大字版延长到3秒,现有提示的停留时间在3-5秒之间时,百度大字版延长到5秒。

现有提示的停留时间在5-7秒时,百度大字版延长到7秒。超出以上时间则提供适当的关闭机制,避免打扰。

百度大字版精细系统的适老化设计研究实践

提示时长适当延长

2.易收听

随着年龄增长,老年人也会逐步出现听力下降的问题,听力损失程度受地域、受教育程度、疾病等多重因素影响,且高频和低频听力损失程度更深。

因此我们通过增加音量、适当降低语速等方式帮助用户更好的获取听觉信息。

1)增大音量

针对老年人听力下降这一现象,我们适当增大了音/视频的音量。

研究表明,老年人听觉平均感知音量在67.5~75.3分贝之间,因此在视频开始播放时,我们对低于设定值的音量适当增加到约44%。

百度大字版精细系统的适老化设计研究实践

iOS系统音量分布

2)降低语速

为了保证老年人有效的接收到声音信息并进行理解,音/视频的播放速度也需要适当下降。

因此,我们减少了高档位语速,并提供了高、中、低3档语速,使老年人选择适合自己的速度,更有效的获取声音信息。

百度大字版精细系统的适老化设计研究实践

速度档位选择

3.易操作

移动应用需要通过手势交互来完成任务,但老年人的肢体运动能力也会逐渐下降。

动作精准度下降使老年人无法准确的完成手势操作,对动作的精细控制程度降低。

同时老年人相较年轻人运动更加迟缓,逐渐出现操作迟疑、犹豫或暂停,运动幅度或速度也会下降。

因此为了保证老年人可以准确的完成操作,我们采用了增大触控区、降低手指运动距离和精准度要求、提供有效的反馈提示、操作功能显性化等方式。

3)增大触控区

增大触控区是使移动应用易操作的最简单有效的方式,同时视觉设计上也需要让老年人感知到触控区增大。

我们通过对iPhone XS Max三倍屏的分辨率和物理尺寸换算,结合人拇指和食指的点击区域大小,推导出移动应用上,触控区应大于等于112px×120px。

百度大字版精细系统的适老化设计研究实践

触控区域示意

2)降低手指运动距离和操作精准度要求

老年人的肢体运动能力下降,难以完成长距离、长时间、连续、高级的操作。

因此我们集中界面的主要操作在屏幕下半部分,保证用户在使用时手指移动的距离更短,同时减少使用具有明确方向性、精准度要求的高级手势,如双击、旋转图片到正向等。

百度大字版精细系统的适老化设计研究实践

降低手势操作的精准度要求

3)提供明确的操作反馈

为了提醒老年人注意、告知其已完成操作、增强操控感,我们在特定场景增加了振动反馈,如临界值、出错、滑块、警告场景。

百度大字版精细系统的适老化设计研究实践

振动反馈

4)隐性操作显性化

为了减轻用户的学习难度,我们将所有隐性功能或需要手势操作触发的功能进行了显性化设计,如点击底bar刷新,功能隐性不易发现,百度大字版采用动态刷新图标的形式,增强底bar可点击刷新的感知。

百度大字版精细系统的适老化设计研究实践

隐性操作显性化

5)辅助用户输入

现实生活中,很多老年人不会使用输入法,而且肢体运动能力的退化也为输入带来了不便,移动设备的输入法操作区域小难以精准操作。

因此我们依托百度的AI技术,提供了语音搜索和图像搜索能力,使老年人可以方便的通过语音和图像搜索主动探索获取新知,答疑解惑,跟上时代进步。

百度大字版精细系统的适老化设计研究实践

依托百度AI技术提供语音和图像搜索能力

4.易理解

随着年龄的增长,人的认知能力也会逐步下降,老年人会出现反应慢、学习力下降、判断力下降的情况。

他们很难一遍学会新内容,也难以判断信息的真伪。因此我们通过简单直白的文案话术、清晰明确的图标设计、可信的来源设计来使内容易理解,安全可信。

1)采用通俗易懂的文案

由于老年人触网时间短、受教育程度不同,难以理解专业的互联网术语,为了帮助他们更好的使用产品,我们对专业术语都进行了简化,采用了通俗易理解的文案。

百度大字版精细系统的适老化设计研究实践

文案适配前后对比

2)提供清晰明确的图标设计

为了帮助老年人更好的理解和使用产品,百度大字版的图标设计都采用了简单易理解的图形,同时功能入口大部分采用图形和文字结合的方式,通过双重手段帮助老年人理解产品功能。

百度大字版精细系统的适老化设计研究实践

图形对比示意

3)提升信任感

在内容信息来源中或涉及经济交易的环节,百度大字版通过增加官方标签、提供官方平台保障的方式来提升产品整体的可信度,增强老年人对产品的信任感。

百度大字版精细系统的适老化设计研究实践

官方标识和保障示意

4)提供即时的帮助

为了随时解决老年人遇到的问题,百度大字版提供了暖阳热线,使老年人可以随时打电话获取专业人员的帮助和解答。

二、AI赋能,情感陪伴

由于很多年轻人去大城市寻找机会,导致产生很多空巢老人,他们情感孤独,缺少陪伴。

疫情的爆发,更使老年人在节假日也难以与家人团聚。

因此百度大字版通过语音合成等AI能力,还原儿孙亲友的真实声音,用于全局内容播报朗读,使老年人感受到至亲至爱仿佛陪伴在他们身边,缓解老年人的孤单和思念之情。

全局语音朗读也能解决老年人的阅读障碍和长时间阅读导致的视觉疲劳问题,同时可以解放双手,使老年人随时随地听朗读。

百度大字版精细系统的适老化设计研究实践

语音合成

百度大字版精细系统的适老化设计研究实践

全局内容朗读场景

三、丰富内容,充盈生活

百度大字版围绕老年人的实际生活需求,依托百度的内容生态和个性化推荐技术,提供了符合老年人兴趣的图文和音视频内容,一站式满足了老年人的内容消费需求。

  • 在设计上,我们通过AI技术,对视频增加智能字幕,方便老年人获取视频信息;
  • 在内容流的操作上,通过统一的容器和流式交互,为老年人提供便捷的操作体验,使他们更方便、平等的获取信息和内容。

百度大字版精细系统的适老化设计研究实践

智能字幕

四、生活助手,便捷服务

百度大字版还提供了多种实用工具,满足老年人疫情时代和日常的生活诉求。

疫情导致线下服务线上化,因此为了帮助老年人适应这一生活方式的转变,百度大字版提供了在线政务工具。

很多老年人承担了教育孙辈的责任,因此我们提供了一些辅助教学工具,帮助他们带孩子。

更有疫情地图、垃圾分类等贴合日常生活场景的工具,使智能技术更贴近、融入老年人的生活。

百度大字版精细系统的适老化设计研究实践

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

文章来源:人人都是产品经理   作者:百度MEUX

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

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

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

B端体验细节:列表构建器的设计模式

涛涛

什么是列表构建器

在了解“列表构建器”之前,我们先来了解下什么是“列表”和“构建器”。

列表是一种数据项构成的有限序列,即按照一定的线性顺序,排列而成的数据项的集合。常见的列表有新闻流、表格、事件列表、好友列表等。

在 java 中,构建器主要用于把复杂对象的构建过程抽象出来,使得复杂对象的构建可以分部件分别创建,从而根据需要构建出来非常复杂的对象。由此我们可以推演出日常中大家口口相传的图表构建器、地图构建器等实际是在阐述图表、地图等依据某种规范或规则生成此类对象的过程。

因此,我们今天要聊的“列表构建器”就是通过某种途径,达到用户所需的列表对象的过程。

在 B 端界面中,穿梭框就是列表构建器的一种展现形式,用户从较大的数据集合中挑选出符合自己所需的较小的数据集合。通常大数据集合在左边(待选区),称之为源数据区;小数据集合在右边(已选区),称之为目标数据区。

为什么需要列表构建器

B 端界面上为何会需要列表构建器这种组件呢?从实践经验来看,无外乎以下 2 点:

1. 所见即所得

源列表和目标列表在同一个页面,用户无需通过跳转页面来回查看源和目标数据,不仅提升了用户操作效率,也提升了用户操作的愉悦性。

2. 数据展示量大

列表构建器可展示的源数据空间和目标数据空间都比 select 组件大的多,这非常方便用户在界面上自由与直观地操作。对于 B 端产品来说,数据量大是不争的事实,在展示、操作、呈现上也是急需解决的问题。列表构建器的出现在一定程度上解决了某些场景下的问题。

什么时候使用列表构建器

使用列表构建器设计模式的情景为:

  1. 源数据量大,且目标数据量也大的情况下,适合使用;
  2. 不想通过滚动、跳转等方式查看源和目标数据时,适合使用。

6 种常见的列表构建器

根据不同场景下的不同需求,衍生出了列表构建器的多种形态,下面分享一下 B 端常见的列表构建器场景设计模式。

1. 基础列表构建器

What 是什么

基础列表构建器是列表构建器的基础用法,展示了数据量不大的源数据,用户通过选择后确定目标数据。

When 使用场景

当源数据量小于大约 50 条时,且选择的目标数据要直接可见时,可以考虑使用。

How 如何使用

用户直接通过滚轮查看源数据中的目标数据,然后选中它们。当确认后,点击穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

2. 可搜索列表构建器

What 是什么

展示了数据量较大的源数据,且有搜索功能,用户通过选择后确定目标数据。

When 使用场景

当源数据量较大,用户已经无法通过在有限容器中滚动鼠标快速查阅和定位数据时,可以考虑使用。

How 如何使用

用户通过搜索确定目标数据,勾选后再通过穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

3. 可排序列表构建器

What 是什么

该列表构建器可对数据进行排序,让用户将自身关心的数据前置。

When 使用场景

当目标数据量较大,用户需要将自身所关心靠前展示,进行查看、对比、分析等操作时,可以考虑使用。

How 如何使用

用户通过搜索确定源数据中的目标数据,勾选后再通过穿梭按钮将已选择的数据转入已选区;再在已选区中将某些数据进行置顶展示或前置展示。

B端体验细节(四):列表构建器的设计模式

4. 可自动穿梭列表构建器

What 是什么

该列表构建器可直接将源数据穿梭到目标数据区。

When 使用场景

当勾选的源数据无需反复确认时,可以考虑使用,这大大加快了用户的操作速度。

How 如何使用

用户点击待选区数据的添加按钮,直接可将数据添加到已选区;点击已选区数据的删除按钮,也可将数据回归到待选区。

B端体验细节(四):列表构建器的设计模式

5. 表格式列表构建器

What 是什么

顾名思义,表格式列表构建器以表格的形式展现,方便用户多维度确认数据范围。

When 使用场景

当用户选取的结果数据需要数据本身的多维度属性来确定时,可以考虑使用。

How 如何使用

用户通过滚轮查看或搜索源数据中的目标数据,然后选中它们。当确认后,点击穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

6. 标题式列表构建器

What 是什么

标题式列表构建器除了展现普通的数据,还有图片等信息。

When 使用场景

当源数据的展现需要更加丰富时,可以考虑使用。

How 如何使用

用户通过滚轮查看或搜索源数据中的目标数据,然后选中它们。当确认后,点击穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

除了以上常用场景的列表构建器设计模式,根据业务的需求大家可以在此基础上继续拓展和衍生,丰富 B 端界面的表现力,及满足业务日益丰富的场景需求。

列表构建器以及衍生案例

基于基础的常用列表构建器,不同产品根据自身的实际需求衍生出了多类构建器,我们一起来感受下吧。

1. sketch 常用功能构建器

在 sketch 界面中,工具栏被设计成只显示用户认为常用的功能。用户只需通过拖拽添加的方式从工具集合中将常用的功能添加到工具栏上。

B端体验细节(四):列表构建器的设计模式

2. sketch 常用色彩构建器

sketch 提供了常用色彩构建功能,对于设计师常用的颜色可以自行添加出来,形成一份常用色彩库。

B端体验细节(四):列表构建器的设计模式

3. 应用参数关联构建器

应用需要在关联参数后才可运行。右边为参数集合,左边为应用与待关联参数列表,用户只需要从参数集合里面选择目标参数拖拽到对应的应用容器中,即可完成应用与参数的绑定。

B端体验细节(四):列表构建器的设计模式

4. 表格列显示字段构建器

当表格列非常多时,用户可以选择列显示字段构建器来将常用列字段选取出来。如此表格会变得轻盈,且数据加载变快。

B端体验细节(四):列表构建器的设计模式

5. word 底部栏元素构建器

鼠标右键点击 word 底部栏,会出现底部栏上可展现的所有元素。用户点击勾选后,元素被展现到了底部栏上。

B端体验细节(四):列表构建器的设计模式

6. 自定义模块构建器

富途牛牛允许用户自定义界面模块,方便用户按自身的习惯查看行情和操作等。用户只需从富途牛牛提供的组件库中挑选出自己需要的,配置成自己想要的模块界面即可。

B端体验细节(四):列表构建器的设计模式

7. 选成员构建器

很多 B 端产品的成员管理模块都需要涉及到添加成员,这时候会用到选成员构建器,将成员从一个池子添加到另一个池子。

B端体验细节(四):列表构建器的设计模式

总结

列表构建器在 B 端必不可少,产品经理和设计师根据产品本身的业务诉求,基于基础的列表构建器衍生出了很多种玩法,以不断提升 B 端的用户体验

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

文章来源:优设   作者:小果

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

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

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


用户界面设计中的对比类型

鹤鹤

了解对比如何在设计中发挥作用,在用户界面中可以找到哪些类型的对比,以及为什么它对积极的用户体验很重要。

一般而言,“对比”一词用于描述彼此截然不同的对象。谈到视觉感知,对比度基本上与颜色或光线的差异有关,可以使物体清晰可辨。

为什么对比度很重要?因为人眼自然会捕捉到对比度。图像的最高可能对比度称为对比度或动态范围。更重要的是,对于色盲等视力不佳的人来说,对比度成为他们看到的物体的核心特征,并让他们能够区分它们。

在学术艺术中,对比处理对立元素和效果的排列,例如明暗颜色、大小形状、粗糙或光滑的纹理。在这种情况下,对比不仅可以用来吸引注意力,还可以设置情绪和氛围,在艺术品中创造多样性、视觉趣味和戏剧性。

在设计中,对比度是影响效果的关键因素之一。 可扫描性网页或移动屏幕的视觉层次结构。它使设计师能够以一种方式呈现布局,告知用户哪些交互点是重要的,哪些是次要的。对比度可以有效地吸引用户的注意力并将其吸引到特定元素上,因此它在支持数字产品的直观导航和可用性方面发挥着重要作用。

Pass-On 应用程序登录页面的设计展示了有效的颜色和尺寸对比示例,为页面构建了坚实的视觉层次结构。

UI设计中的对比类型

对比可以基于 UI 元素的不同特性,包括:

A. 颜色:这种类型是人眼最自然和最明显的对比之一;它适用于颜色明显不同的情况,例如,通过互补、分裂互补或三元方案组合,这种类型的对比最广泛地用于制作按钮和其他关键导航元素。在网页布局或应用程序屏幕中立即看到,支持清晰直观的导航。

B. 大小:这种类型的对比是基于首先引起注意的元素明显大于其他元素。

C. 形状:通过使一个元素的形状与其他元素不同来吸引用户的眼球。

D. 位置:在这种类型中,设计师以这种方式更改一个元素的位置,使其看起来不同,例如,文本片段的新段落以缩进开头。

E. 纹理:这里的差异是由于使用彼此明显区分的纹理而建立的。

F. 方向:改变元素的物理位置,使其在其他方向,这样以不寻常的方式吸引用户的注意力。

经常想到的关于对比度的第一个想法是黑白的东西。在没有阴影和多种颜色的情况下,单色图像使用对比度作为表现潜力的主要助推器。这在用户界面中的工作方式相同。更重要的是,与艺术品或摄影作品相比,对比度不仅会影响美感,而且对布局的可用性也有重大影响。因此,深思熟虑的对比度使用是使网站和应用程序用户友好且易于使用的强大方法。

排版对比

另一种特定类型的对比是排版对比,它基于设计作品文本部分所用字体的区别特征的差异。

加拿大字体设计师卡尔·戴尔定义了 7 种核心类型的排版对比:

A. 尺寸对比:它是关于由表格创建的基本图案的物理放大和用于文本的类型的重量。这里最常见的情况是使标题或标题明显大于文本。

B. 重量对比:粗体在同款较轻的对比中突出。它有助于将注意力吸引到文本的特定部分,并让用户了解它们的重要性。

C. 形式对比:这里的形式是指大写字母和小写字母之间的区别,或者罗马字母和它的斜体变体,压缩和扩展版本,与标准类型协调的脚本类型——所有提到的都可以用于戏剧性的形式的改变。

D. 结构对比:结构意味着不同类型字体的不同字母形式,例如单线无衬线与高对比度现代,或斜体与黑体。

E. 纹理对比:这是关于字体的线条如何看起来像一个整体,这部分取决于字体本身,部分取决于它们的排列方式。

F. 颜色对比:第二种颜色通常不如基本的白底黑字(或黑底白字)强调,因此必须仔细考虑需要强调的元素并注意色调值使用的颜色。

G. 方向对比:这种类型是关于垂直和水平之间的对立以及它们之间的角度。出文本块也有它们的垂直或水平方面,将宽的长线块与高的短线列混合可以产生对比。

另外,还有一些不太流行的对比,比如所谓的孤立对比,就是把一个词或词组放在远离其他元素的地方,这样就可以从人群中脱颖而出,以及对比按节奏(空间间隔)——破碎的部分形成对比并吸引注意力。

对比辅助功能

阅读上面提到的所有内容,很容易假设这里的经验法则是对比度越高,设计越好。然而,事实并非如此:以及任何其他设计方面太多并不意味着更好。虽然低对比度会使内容难以感知和阅读,但过高的对比度会引起眼睛疲劳,使交互更加困难。

根据网页内容无障碍指南 2.0,文字的视觉呈现和文字的图像应该坚持至少 7:1的对比度,以下情况除外:

大文本:大文本和大文本图像的对比度至少为 4.5:1;

装饰:作为界面组件的一部分的文本或文本图像,作为装饰没有对比度要求。

标识:作为徽标或品牌名称一部分的文本没有最低对比度要求。

注意留白

空白是留空的布局区域,不仅在对象周围,还包括对象之间和内部。空白是页面或屏幕上所有对象的一种呼吸空间,因此它极大地影响了 UI 中应用的不同类型对比度的有效性。

总结

生活充满了对比,无论你会采取什么方面。对于所有的生命,我们必须学会如何接受这一点,并尝试享受如此多样化和不可预测的生活。与现实相呼应,设计也充满对比,并尽可能多地借鉴。

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

文章来源:站酷   作者:对啊设计君

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

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

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

10条你绝对不能打破的交互设计规则

鹤鹤

  在生活中,有一些规则是你绝对不能打破的,如果你打破了,将会付出惨痛的代价。在用户界面设计中,也有一些必须遵守的规则。它们被称为“启发式”或提高用户界面可用性的一般原则。这些是经过了长时间测试的可重复的模式,可以帮助用户更好地浏览界面。一个良好的设计一定会考虑到以下原则,一个不那么好的设计总是会缺少其中的一个或多个原则,那么作为一个UI设计师,为什么要忽略这些原则让你的用户如此头疼呢?

1.系统状态的可见性

该系统应在合理的时间内通过适当的反馈使用户了解正在发生的事情。

你要不断地给你的用户展示适当的信息、提示和背景,使他们在任何时候都知道他们在系统中的位置。这可以让用户感觉自己处于控制之中,知道下一步该做什么。这个项目被添加到购物车了吗?编辑的内容被保存了吗?这个过程需要多长时间?我的订单的状态是什么?现在正在发生什么?不断地为用户回答这样的问题,不要让他们猜测或蒙在鼓里。

2.将系统与现实世界相匹配

你设计的系统应该使用用户熟悉的语言,使用用户熟悉的单词、短语和概念,而不是使用专业地术语。你要遵循现实世界的惯例,使信息以自然和逻辑的顺序出现。

使用熟悉的词语和语言,不要让措辞过于复杂。屏幕上的单词或图标的含义应该对目标受众清晰易懂。人们还带有心理模型和经验,可以让他们解释图标。

技术的最大进步之一是图形用户界面的出现。在图形用户界面之前,计算机屏幕上只有晦涩难懂的文字命令,每当你想执行一个动作时都要记住并重复。然后,一切都改变了。屏幕上显示的是文件夹和文件的小图像以及一个手形光标。这些都是人们能够立即理解的视觉符号。不需要解释,因为它引用了现实世界的心理模型。


3.一致性和标准

用户不应怀疑不同的词语、情况或行动是否意味着同样的事情。

有两种类型的一致性:内部和外部。内部一致性是指你的网站或应用程序中的模式要一致。这很简单,比如在所有的页面上保持相同颜色的链接,或者在每个屏幕上对相同的概念使用相同的图标,比如HOME。外部一致性是指大多数人使用的其他软件和系统中的惯例,如购物车。大多数人都熟悉购物车的使用方式。你不需要重新发明什么东西。如果你这样做,你可能会让你的用户更难学会你的购物车如何工作。保持一致,为用户节省不必要的混乱。


4.用户控制&自由

用户经常会错误地选择系统功能,并且需要一个明确的“紧急出口”提示才能离开不需要的状态,并且无需通过扩展对话就能支持撤销和重做。


始终为用户提供一条出路。不要强迫用户执行他们不需要的功能,或者把他们引向死胡同。例如,如果你正在设计一个结账流程,如果用户愿意,就让他们继续购物。如果他们试图在一个应用程序上执行一个动作,当他们在最后一刻不确定是否要继续时,就让用户取消。


5.错误预防

比起错误提示信息更好的是一个精心的设计,它可以从一开始就防止问题的发生。要么消除容易出错的条件,要么检查这些条件,并在用户承诺行动之前向他们提供一个确认选项。


当系统操作到很关键的一步时,如删除文件或向1000个收件人发送电子邮件,要确保用户知道他们将做一些重大的事情。向他们展示确认对话或提供额外的信息,清楚地定义在行动之后将发生什么。这将防止他们在不确定自己的行动时进一步行动。这也将为他们省去大量的遗憾。


6.利用识别而减少回忆

通过使对象、行动和选项可见,尽量减少用户的记忆负荷。用户不应该记住从对话的一个部分到另一个部分的信息。在适当的时候,系统的使用说明应该是可见的或容易检索的。


作为UI设计师,我们的目标之一是减少用户的认知负荷。记忆以两种方式工作:识别和回忆。识别是指你立即熟悉的东西。比如一个人的脸。你看着一个朋友的脸,你马上就知道你以前见过他们。回忆的作用则不同。它是你必须从记忆中检索出来的东西,比如一个人的名字。回忆通常需要更多的时间和工作,因为你的大脑必须处理更多的信息来破译它所看到的东西。

另一方面,识别是即时的。我们希望在我们的用户界面上具有更多的识别,而减少回忆。实践这个原则的一个很好的例子是使用普遍可识别的按钮和图标来表示功能,例如用房子表示 "家",用铅笔表示 "编辑"。如果你必须为你的用户界面设计新的图标,而大多数人以前从未见过这些图标,那么请使用文本描述符来澄清并减少认知的负担。


7.使用的灵活性和效率

新手用户看不到的加速器通常可以加速深度用户的交互,这样系统就可以同时满足没有经验和有经验的用户的需求。允许用户定制频繁的操作。


当某些任务在你的应用或系统中反复出现时,你可能想让用户更有效地进行互动。例如,使用滑动手势来保存或删除移动应用程序上列表中的项目。删除一个项目的正常方式是打开一个项目,然后按下删除按钮。专业的方式(也是更有效的方式)是通过简单的滑动并立即从列表中删除项目。


8.极简主义的设计和审美

对话不应包含不相关或很少需要的信息。对话中每一个额外的信息单元都会与相关的信息单元竞争,并降低它们的相对可见度。


当为艺术而设计时,如果我们走巴洛克风格,可以用人工制品、纹理和图像填满屏幕。但是当为交互而设计时,我们的目标是降低信噪比。这样做会使我们的界面对用户来说更容易理解。你可以应用这个原则,把屏幕上显示的内容减少到最低限度,不管是图像还是文字,这样用户就可以专注于手头的工作而不会分心。


9.帮助用户识别、诊断和恢复错误

错误信息应该用简单的语言表达,精确地指出问题,并建设性地提出解决方案。

错误会发生,那是不可避免的。用户遇到错误后发生什么是UI设计师的责任。因此,我们应设计可以理解的错误页面和提醒来帮助用户,并提供解决问题的选项或方案。例如,让我们来看看无处不在的404页面。作为设计者,我们知道错误的404页面意味着什么,但用户一般都不知道。为了帮助用户,我们必须把404翻译成简单的语言,加入一些文案,使其清楚地知道刚刚发生了什么,比如 "对不起,我们找不到你要找的页面。这里有一些具有类似内容的页面建议......"。


10.帮助&文件

尽管系统不需要说明就能使用的话会更好,但可能还是有必要提供帮助和说明。任何这样的信息都应该易于搜索,集中在用户的任务上,列出要执行的具体步骤,而且不要太多。


始终让人们能便捷地获得帮助,把帮助放在顶栏或主导航区的显要位置。当用户遇到问题而不能轻易找到解决方案时,他们必须被引导到一个可以解决问题的地方。这可以采取FAQ页面的形式,用一个搜索框提供可能的建议和答案。在没有答案的情况下,系统必须有一个选项,可以通过支持在线询问或电子邮件或电话,直接与支持部门联系以获得额外的帮助。

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

文章来源:站酷   作者:磨刀modao

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

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

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

分享3个方法,打开全球视野

鹤鹤

设计如果要做好,除了提升审美还有一个非常重要的点就是多看、多使用好的产品,特别是一些全球顶级大公司的产品一定要去体验,很多国内设计师受限于各种原因,无法下载国外App,没关系,今天分享一个我经常使用的工具网站,让你也能不出国门打开全球设计眼界。

设计师要拓宽眼界

我相信很多朋友在面试时候都会被问到,你常用的产品有哪些?一般问这个问题,其实面试官在考察3个方面: 

第一:你对于互联网好产品的关注度。

第二:你是否有足够好奇心去研究体验产品

第三:你的审美,美感如何?

因此作为一个设计师,必须不断去把玩使用各种APP才能让眼界打开。如果说Pin是去构建设计灵感库,那么每个人还需要有一个App图书馆,当你设计灵感枯竭时候;可以去尝试体验更多好的产品提升自己眼界,今天就分享几个小方法帮你打开全球视野。


第一个神器

https://mobbin.design/ 这个网站是我私藏多年的一个宝藏网站,里面几乎包括了目前国外最优秀的一些APP,而且不用你去商店下载就可以看见里面全部界面流程。有的APP你还得需要各种账号才可以去看见完整页面,这个网站很全,你点击进去,它把全部页面模块都已经截图好了,非常方便。 

比如我今天想看twitter某个动态卡片如何设计的,按照一般做法,我可能需要科学上网,甚至有的还需要去注册美区账号。但是在这个网站里,直接搜索就可以看见twitter的全部设计,包括各个场景截图。 

APP的全部页面状态,以及里面各种场景,按照用户的体验流程一一的截图展示。

点击后可以查看大图模式,点击旁边的列表标签,能够搜索很多列表的效果图。

点击标签后全网所有关于列表相关的设计截图,都给你找出来了,然后 你就可以找到你想要的图片,顺藤摸瓜,找到更多的APP。

同时你如果要下载到手机,点击头像即可跳到对应的APP下载页面,非常方便! 

同时搜索功能也支持很多的APP查询,比如我想看看google news的界面设计,直接搜索即可找到。 

就能查询到Google news的全部页面设计和细节,非常方便。大家可以多去这个网站试试,你会发现很多惊喜。 

第二个工具:Senstower

除了上面那个网站,还有另外一个神器工具:https://sensortower-china.com/它可以看见全球的APP排行榜,最神奇地方是可以看见各个产品的用户数,以及盈利情况。让我们可以更好的了解商业。 

详情页可以看见这个公司旗下全部产品,以及公下载用户量,每月赚的钱。非常的厉害,这个工具适合很多初创公司,当你不知道做什么项目时,可以去上面看看其他国家一些产品,找找灵感,那设计上我们又可以学什么呢? 

比如我很喜欢的一家韩国公司Nvaer,相当于中国的阿里腾讯,点击搜索后,你能很完整的看到这个公司的全部app,非常全。 

点击进去可以看见下载数。以及公司的盈利情况,以及用户对于这个产品的全部评价。 

当然也有屏幕截图,比如你是做直播的产品,那么就可以去看看这个产品的页面,做为设计参考。同样的支持APP商店下载,可以跳转到对应的APP的链接。 

经常做设计没有灵感,但是我们找竞品只能看到国内的,那么这个软件你搜索后可以 查询全球的所有APP,比如我做音乐软件,那么我搜索music出来的关键词就是全球的音乐软件排行榜。非常强大! 

同时你可以通过类别选择产品类型,是娱乐的还是音乐,以及那个国家的?他能帮我们的眼界放眼到全球,如果说上面那个工具,帮我们收集优秀截图,那么 这个网站帮我们了解很多商业思维,用户评价,以及这个公司矩阵产品。

第三个工具:producthunt

这个网站是我的最爱,所以放到最后分享,它是一个优秀产品的分享网站,https://www.producthunt.com/ ,里面基本都是一些优秀创业公司的最新产品,免费开放给所有人体验,包括产品,设计,工具,以及各种新奇好玩的趣味工具。 

比如这个网站,是谷歌的一个最新产品「谷歌照片」,你可以像故事一样发布你的照片,非常好玩。 

比如这个产品,设计师提供了几百个3D的图标网站可以供大家下载体验,全部免费。 

一键扣除背景图片和视频的工具,非常的棒,这些产品都是全球一些顶级的开发者设计出来的,给大家免费使用和评测的。我经常能在里面发现很多宝藏,也一起分享给大家!

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

文章来源:站酷   作者:我们的设计日记

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

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

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

设计沉淀录:如何让你的设计更有价值

鹤鹤

前言:如何让你的设计更有价值,设计有价值代表你的方案有价值,你的方案有价值代表你的理论有价值、你的理论有价值代表你的专业能力体现,归根到底,说明了什么人作出什么样的作品的同时会带来相应的价值。站在设计师的角度看,在公司里,属于站在用户体验上的提出的设计建议或者设计方案,基于“以用户为中心”理念和交互设计原则,通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。

目录:

一、设计行业的发展趋势

a)设计与产品的关系

b)找到自身价值的重要性

二、了解设计师的价值分层

a)设计协同

b)推动业务增长

c)设计驱动产品

三、设计师需要具备的哪些思维?

a)双钻模型解决问题

b)“五度”设计成果评估模型

c)培养数据思维,利用数据提升设计的价值


一、设计行业的发展趋势

a)设计与产品的关系

以前,设计师在团队里的位置会比较尴尬,因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临,设计的价值变得显性化,作为与用户关系密切的设计师,善用好数据,可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切,是整个行业发展的必然趋势。


举一个设计以小成提高业务的实例。这是我之前做的分拣软件迭代首页的自定义配置组件。在改动前分拣首页功能多,甚至有时候需要滑动寻找。寻找点击率大概是不到16%,改动后提高到了40%,不消耗任何其他人力、物力成本,就可以用设计让CTR翻倍。

设计目标:减少首页模块寻找的时间,加大成功点击率,考虑延展性发展

现有问题:主次功能混淆、视觉点不够集中、点击按钮不明显

优化方案:1、主次布局调整,主上次下;2、面积放大提高模块命中率;3、色彩区分主次按钮;4、添加“➕”自定义配置首页主功能,加入人性化设计理念。



b)找到自身价值的重要性

自身价值顾名思义就是你的工作成果会带来什么价值,按照公司更看重我们的设计能给产品的发展带来多大的价值。虽然职位的性质已经很明确你的价值的体现,但是这里注重成果的价值,设计师的成果更多是设计方案,方案成果的价值的接受度也是需要从易到难的渐进的。


举一个设计价值体现的实例。这是我之前做的新Station组件库——GM Design。设置组件和设计规范不仅保持了产品的统一性,且减少用户在使用过程中的行为认知负担,快速同事达成合作,还可以减少不必要的操作和排查,提高易用性。

设计目标:保持产品的统一性,减少认知负担,降低时间和人力成本,提高易用性

现有问题:同个功能存在组件多样、组件学习成本高、反复修改,

优化方案:1、建立组件库;2、功能类型划分,采用同一个组件的变形处理;3、组件集中化; 


二、了解设计师的价值分层

设计师的价值可以分为以下三层:设计协同、设计推动业务增长、设计驱动产品。

a)设计协同

一个完美的执行者,能够在拿到需求后高效又完美地实现落地。简单地说就是手上功夫好。

做好这个阶段需要有优秀的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。


举一个设计协调的实例。Q2阶段的B-Shop商城交互迭代。前期输出设计基础和设计规范,有助于开发高效实现,实时跟进UI进度和设计协助。在产品的探索中发现数字键盘组件的问题点,由于自己写的数字组件具有局限性,导致体验上无法满足部分需求,如:输入框的定位在数字键盘之上。基于这个问题点,我们提出A/B方案,A方案是自己写的数字组件,B方案是自己写的数字组件延用原生的逻辑,从用户测试得出,A方案是更符合用户操作习惯。

设计目标:组件高效快捷输入,侧重交互体验提升,视觉优化,提高易用性

现有问题:学习成本高、缺少设计基础、信息分层不明显、体验差

优化方案:1、划分主次信息,阅读更直观;2、建立设计规范;3、组件优化,符合用户操作习惯;4、图文结合,按钮优化,加强页面指导性



b)推动业务增长

这个阶段的设计师,会比上一个阶段更能体现设计师的设计价值,并对产品产生一定的影响力。能在以用户为中心的基础上,推动业务的增长,所以这个阶段的设计也被称为UGD(User Growth Design)。


需要设计师具备用户洞见力,数据分析能力,从这两个维度出发,去熟悉业务、分析业务,从而推动业务

举一个推动业务增长的实例。Q2阶段的采购APP的交互迭代。表头的功能布局与标签栏的“➕”添加功能的调整,其实在用户调研阶段的热力图数据和观察法分析得出,工具类移动端侧重点在功能区,需要一目了然知道我的当前任务数是很重要的信息,且是高频操作,所以放置顶部;标签栏的添加功能是为了快速添加采购单据和询价为目的,用户群体特殊性,需要一键新建添加的需求。

设计目标:侧重交互体验提升,提高工作效率,提高易用性

现有问题:学习成本高、缺少设计基础、操作路径长、体验差

优化方案:1、操作路径简化,采用路径集合弹框;2、建立设计规范;3、组件优化,符合用户操作习惯;4、一键新建“➕”的功能,达到快速新建

体验连接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(账户/密码zhangsan0001/ liuge1)



c)设计驱动产品

这个阶段的设计师,在团队中的价值可以说是非常大了。从被动的需求接收方,转化为从战略层,能主动提出需求的一方。也是UXD发展的终极方向。


三、设计师需要具备的哪些思维?

a)双钻模型解决问题

什么是双钻模型?

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题、发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。


双钻设计模型把设计过程分成4个阶段:发现问题(挖掘)、定义问题(创意)、构思方案(制作)和交付方案(落地)。



采购APP进行双钻模型思维构建的基础,提供交互迭代的底层设计理论支持,在挖掘需求阶段,属于用户调研阶段;创意阶段,关注点在于问题梳理、实现目的、设计层面;制作阶段,寻找潜在的解决方案;落地阶段,解决方案的分析和验证,输出最适合一个。


b)“五度”设计成果评估模型

用户体验周期(由阿里巴巴UED提出概念)


用户体验周期指的是用户与产品的关系随着时间变化而形成的不同周期阶段。用户体验周期可以分为「当前」和「长远」两个阶段,每个阶段中有不同的细分。

  • 「当前」阶段,分为 3 个过程:

    • 触达:用户来访问网站,包括第一次访问网站的新用户和再一次访问网站的老用户;

    • 行动:用户在网站上进行相关操作;

    • 感知:用户在操作完成后对产品形成的主观感受。


  • 「长远」阶段:分为 2 种表现:

    • 回访:用户自己再次使用该产品;

    • 传播:用户推荐给其他人使用该产品。


如何在具体项目中体现呢?下图,运用一个具体项目举例:

c)培养数据思维,利用数据提升设计的价值

项目与需求上线后,去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较,没有比较就不能进步。

关于数据的用处有很多,举个例子,当两个人对各自的方案争执不休,分别觉得对方不好,但站在各自的逻辑上似乎都能说得通,那怎么办呢?分别做一个A/B测试,数据不会说谎,哪一个方案更有效,一目了然。

那么如何将数据结合到我们的设计中呢?首先在设计前,我们需要先定一个目标,而每一个目标就应有一项对应的数据指标。比如,提高了某一块的CTR(点击通过率),提高CVR(转化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。


拿到了数据之后,还需要分析数据。不管是有没有达到目标,都要去分析原因,进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验—失败了就找失败的原因,方便以后避开同样的错误;成功了就分析成功的原因,并将成功的策略复制运用到今后的工作中,增加以后的成功率。如此,不管有没有成功,都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。


小结:

以上就是今天所要分享的全部内容。再带大家回顾一下,一共分为三部分:第一个是了解设计师的发展趋势,第二个是趋势下的设计师价值分层(设计协同、设计推动增长、设计驱动),第三个就是在价值分层的逐步递升中所需要培养的双钻模型、GSA的策略、数据增长思维等。



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

文章来源:站酷   作者:麦海欣

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

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

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

npm run dev 和 npm run serve

前端达人

1、ERR引发的思考

创建好的 vue 项目直接执行 vue run dev 报错?运行 vue run serve 就可以启动...如下

npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log

2、dev build serve?

其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。
npm run XXX是执行配置在 package.json 中的脚本,比如:

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

 

npm run xxx 中的 xxx 可以理解为键值对的 key,实际上 run 的是在 package.json 里面 scripts 配置的 value;

比如,npm run serve 实际运行的是 vue-cli-service serve;

而放在 3.0 以前运行的则是 node build/dev-server.js 文件;

这时候我们再来看上边的问题是不是豁然了呢, scripts 中并没有配置 dev ,所以控制台报了 [ missing script: dev ] 的错误 ;

 

3、总结

npm run xxx,并不是你想运行就运行的,只有在 package.json scripts 配置了,你才能 run 的,所以不是所有的项目都能 npm run dev/build。

要了解这些命令做了什么,就要去scripts中看具体执行的是什么代码。

这里就像是一些命令的快捷方式,免去每次都要输入很长的的命令(比如 serve 那行)

一般项目都会有 build, dev, unit 等,所以起名,最起码要从名字上基本能看出来是干什么的。




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

文章来源:博客园

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

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


日历

链接

个人资料

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

存档