在开头先放获得IF大奖作为证据，佐证作品质量，让读者有一个比较好的心理印象。我们在作品中展示作品时，也可以把自己获得的荣誉放在最前面，有一个霸气的开场。

项目目标。关键词的推导，这部分的推导一定要简洁合理，太多人喜欢在这部分写很多文字，然后又没有把关键词可视化，容易被忽略。

品牌愿景。说明产品最终想要达到什么样的状态，通过平台作为桥梁满足用户的诉求。

品牌特色。介绍这个产品主要的特点。

品牌设计原则。从品牌特色中提炼核心原则，并通过这些最核心的关键词，指导接下来的所有视觉设计。

全局概览。把品牌设计过程稿和结果都放在一起，展示工作量以及全局概念。

最终结果。动态展示最终的Logo。

二、规范体系

介绍完项目整体情况后，这一步开始介绍整个设计体系。

Logo系统。讲这个logo是如何设计出来的，会发现它的每一个词用的都挺准确的，很有代入感。

主要应用形式

颜色系统。给颜色一些解释说明。

在Logo上的应用

视觉主题系统。品牌的超级符号延展出的风格调性。

A、倾斜式设计

B、折纸符号

异化的叠纸符号

图标体系。图标这里的风格很容易看出是品牌风格的延续，也是品牌特征常用的做法，利用品牌超级符号中的某个特征应用到其他各个视觉触点上。

字体规范。通过排版将故事传递给用户。一致使用适当的字体可以建立强烈的品牌个性。合适的排版，例如使用各种不同字重和信息层次结构，将 KakaoPage 变成一个友好、体贴和值得信赖的品牌。

动效系统。它也有2个不同的动态形式，动态的背景切割方式，能看出来都与品牌有高度一致性。

三、品牌应用

品牌应用图标。会根据Android和iOS系统要求，用不同的规范背板设计应用图标。

APP设计，能看出来APP的设计其实也是品牌的一种延续应用，品牌是一个可以包揽全局的概念，几乎无处不在。

这也是高级UI设计师常用到的技法，抽象出品牌的超级符号，比如这里就是品牌颜色和斜角的运用，用在角标、背景图案、选项卡和图标等元素中。使得整个设计与品牌保持高度的一致性。

在一些媒体平台，都会尽可能地让品牌图形进行露出，并且保持品牌风格的一致性。

在名片、信封、卡片、包装袋、书籍、易拉宝、广告牌、运用广告等各种不同场景下的运用，也都会用到品牌符号，使得品牌更加具备识别度和统一性。

最后再次展示Logo，通过动效，品牌符号等给用户加深印象。

到这里，一套非常完整优秀的设计作品展示就做完了。以上包装思路是该团队5年前的作品，到今天依然是各大品牌方案的包装套路，堪称经典！

作者：彩云Sky

转载请注明：学UI网》韩国顶尖设计团队PlUS X，5年前的作品集包装套路，今天依然好用！

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

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

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

Facebook 正在内测让用户可以将最多五个单独的个人资料绑定到一个帐户。资料不需要包含用户的真实姓名和身份信息。

用户可以将不同的个人资料专用于他们想要联系的特定群体，例如一个专用于他们的朋友的 Facebook 订阅源和另一个只为他们的同事提供的订阅源。

允许用户“根据他们的兴趣和关系个性化他们的体验”，预期增加用户间的互动和帖子数。

二、ins上线了dual相机功 

ins相机上线了dual相机功能，用户可同时打开前后摄像头，合成画面。

今年爆火的新产品BeReal的主打功能之一就是同时打开前后置摄像头，以达到展示展示自己的目的。

三、Apple 申请 VR 指尖追踪设备专利 

Apple 正在申请一项新专利，此种手套可用于手势控制，在某些场景还能提供触觉反馈。根据专利描述，Apple 想开发一种附着于指尖的设备，设备上有传感器，支持触觉反馈。传感器附着于手背面的手指上，传感器可以侦测动作，提供某种形式的触觉反馈。指环可以戴在指尖，由指甲固定住，以便判断是一根手指还是多根手指进行互动，而信息将反馈到手背上的控制单元，従而连接到计算机。

四、iOS近期开发者预览版值得关注的三个更新点 

1、电池支持展示百分比 

由于空间限制，多年来搭载刘海屏的 iPhone 一直无法使用电池百分比，此次更新后，状态栏中的可显示确切的电池百分比，该功能可以在“设置”应用的“电池”部分进行开启。

2、锁定屏幕的音乐视觉化播放图形 

iOS 16 Beta 3 添加了全屏音乐播放器，Beta 5 引入了实时迷你可视化图形，可随音频播放变化。且会与新的按钮动画相结合，当点击播放 / 暂停按钮或前进后退按钮时，它们会有新的动画，动画感觉非常优美和流畅，并提供了很好的细节。

3、屏幕截图新增【复制并删除】 

当截取屏幕截图，对其进行编辑后点击“完成”时，出现了一个新选项，可以“复制和删除”屏幕截图，而不仅仅是删除它。这允许用户复制图像以粘贴到任何其他应用程序，而无需先将图像保存到照片应用程序。

五、YouTube支持视频双指缩放 

(点击上图前往原文查看视频）

近 YouTube 推出了【双指缩放影片】的功能，能夠直接放大来观看影片细节，并开放给会员抢先试用。

目前 YouTube 已正式向 Premium 推出这项功能，只要双指轻触拨动屏幕，就能自行縮放画面大小，不管是横屏还是竖屏都有支援，画面最高可以放大到 8 倍。和全屏模式相比，缩放功能可以让用戶更清楚地看到画面上的细节。如果你已经是 YouTube Premium 的会员，可通过手机版 YouTube 【会员福利】>【试用新功能】，就會看到此功能，点选后即可使用。

六、YouTube TV正在开发同时观看四个直播流的功能

YouTube TV 正在开发一些新功能——“Mosaic Mode”，可以让观众同时观看多个直播（最多四个）。虽然谷歌仍未回应，但多画面同时播放在体育直播中特别受欢迎。像FuboTV 是一项以体育为重点的直播电视流媒体服务，具有多视图功能，最多允许同时进行四个流。在索尼的 PlayStation Vue 服务关闭之前，它有一个类似的功能，在想要同时传输多个频道的用户中很受欢迎，这一战略举措对谷歌来说是有意义的。

七、NGL匿名问答应用登顶APP Store

NGL的全称为“Not Gonna Lie”，是一款流行匿名社交软件。NGL只需要用户填写上自己在Instagram社交平台的昵称就可以成功注册。进入App后，NGL会为用户提供不同的问题选择，并最终将用户需要提问的问题生成一个专属链接和一个分享截图。

八、0Zero 零重力浏览器

传统浏览器打开多个页面时，会以tab的形式切换。此款浏览器打开多个网页时，会在一个画布上平铺展示所有打开的网页。

(点击上图前往原文查看视频）

九、糖果APP设置 avatar新方式

糖果APP是一个虚拟形象陌生人社交应用。传统创建avatar的方式都是用户自行捏脸。而糖果是在注册时，通过用户选择兴趣标签自动匹配一个avatar形象。极大的降低了创建成本。

十、Snapchat推出网页版及首款AR游戏 

1、Snapchat推出网页版 

Snapchat最近布推出“网络版 ”，支持消息聊天、发送快照、视频通话、表情反应等核心功能，且计划在未来将其Lenses功能引入视频通话。登录网络版Snapchat后会同步你手机上的信息，继续你在手机上的对话。通过桌面使用Snapchat时，用户的Bitmoji将出一个笔记本电脑的图标，向其他人表明你是通过Snapchat for Web访问聊天的。

此外，网络版本的体验还包括隐私屏幕特性：如你点击离开去完成另一项工作，软件就会隐藏Snapchat窗口；通过Snapchat for Web发送的信息将在24小时后自动删除；防止人们进行截图。

Snap发言人对外介绍产品情况时说，Snapchat上的通话者平均每天要花30多分钟的时间进行通话。尽管仍将自己视为一个移动优先的平台，但Snap表示，在听取了用户的反馈后，它决定是时候将Snapchat的核心功能引入电脑端。但网络版当前仅对部分地区的Snapchat+用户提供，暂时不支持中国区。

2、Snapchat推出首款AR游戏《Ghost Phone》 

Snapchat 推出一款新的游戏内应用程序《Ghost Phone》，这是snapchat发布的第一款 AR 游戏，可将智能手机变成 AR 驱动的设备。《Ghost Phone》是使用 Snap 的专用滤镜创建工具 Lens Studio 构建的，使用 World Mesh 技术，可以进行更准确的跟踪。在游戏中，玩家需要搜索隐藏在短信中的线索，并使用智能手机的相机捕捉超自然实体。

「Ghost Phone」根据Snap旗下镜头创建工具Lens Studio构建，该应用支持World Mesh技术，从而实现更准确追踪。

十一、Whatsapp在线状态支持设置可见范围及语音状态  

WhatsApp的在线状态功能，近期新增了设置状态权限设置，凭借此功能，用户不仅可以设置可以看到自己的最近状态，还可以设置谁可以看到我在线，让用户可以更精细的控制自己的隐私。

除此之外，WhatsApp 最近还在测试新增的“语音状态”功能。如下图右图所示，状态选项卡底部有一个新图标，可以让我们快速向我们的状态更新语音状态。此语音状态只会与你在状态隐私设置中选择的人共享。

十二、WhatsApp 发布 Windows 桌面版应用程序 

过去 Windows 用户必须下载 WhatsApp 的网页端桌面应用，或是通过网页浏览器来访问 WhatsApp，如今面向 Windows 用户的桌面端应用全新发布，通过原生的应用程序，WhatsApp 能带给用户更快、更流畅的体验。重新设计的 WhatsApp 提供了更简洁的界面，WhatsApp 表示正在为 MacOS 开发原生应用。

十三、Meta 聊天机器人 BlenderBot 3 登场 

Meta 释出了第三代聊天机器人 BlenderBot 3，奠基于 1,750 亿个参数的 OPT-175B 语言模型，BlenderBot 3 使用了更多的资料集，其对话效能比上一代提升 31%，知识能力是前一代的两倍，错误率则少了 47%，BlenderBot 3 互动界面目前仅于美国市场开放。Meta 指出，BlenderBot 系列在各种对话技巧上日益进步，除了个性、同理心与知识，还结合了长期记忆，并能通过网络搜索来进行有意义的对话。

链接：https://geo-not-available.blenderbot.ai/

聊天机器人不免会模仿或学习到不安全、带偏见或冒犯的言论，Meta 对此展开了大规模的研究，发展各种新技术建立保障措施。即便如此，BlenderBot 3 仍可能说出无礼或冒犯的内容，Meta 因而决定让用户与其互动，让用户能在 BlenderBot 3 的回答上给予好评或负评，并注明评论的理由，协助 Meta 改善 BlenderBot 3。

十四、Messenger 测试默认点对点加密功能 

Messenger 自 2016 年起提供点对点加密功能，但用户需对每个会话逐一设置，手动打开点对点加密功能。

如今 Facebook 计划挑选少数 Messenger 用户，默认启用点对点加密通信功能。除了向文本和图片消息提供点对点加密，语音通话也会提供点对点加密。此外，Facebook 还会测试其他相关功能，例如消息在一个设备删除后，也会在其他设备消失、点对点加密环境下取消发送、回复 Facebook Stories 等。

Facebook 也会为 Messenger 部分功能进行更新，例如消息在一定时间后自动消失，也会测试新的安全存储功能，让用户将已加密的对话内容备份到云计算存储。

十五、Telegram更新了互动表情 

Telegram此次更新包括：自定义动画表情符号、交互式自定义表情符号、iOS上的新贴纸、Gif和表情符号面板、赠送Telegram Premium 作为礼物的能力以及语音消息的新隐私设置等等。

1、自定义动画表情 

Telegram推出开放表情符号平台，任何人都可以为Telegram premium用户上传独特的自定义表情符号。并且新的动画表情符号可以包含在消息文和媒体标题中，高级版用户最初可访问10个初始自定义表情包，其中包含了500多个高级表情符号。

当在输入框输入信息时，贴纸按钮将变成一个表情按钮，点击即打开表情符号面板，因此用户可以快速浏览并添加自己上传的表情包。

2、新增了一批可交互式表情 

Telegram在表情制作中投入了很多精力，在新版本中又新增了一批可交互式的emoji表情，当用户发送出去后，好友点击即自动播放表情符号的全屏效果。

3、语音信息的隐私设置 

Telegram Premium用户增加一个新设置，允许他们控制谁能够向他们发送语音和视频消息、同样也可以选择从不或始终向您发送语音消息的特定人员或用户组。

4、向亲友赠送会员 

今年夏天，Telegram的活跃用户突破了7亿，并推出了 Telegram Premium会员服务，已是会员的用户还可以向亲友赠送Premium预付费订阅服务，除了享受一定的折扣价购买外，赠送的订阅将以特殊消息的形式出现在与亲友的聊天中，并生成一个特殊的动画礼品盒，极具送礼的仪式感。

十六、OPPO发布全新一代ColorOS 13操作系统 

2022年8月30日，OPPO开发者大会（ODC22）上，全新一代ColorOS 13操作系统与「潘塔纳尔」智慧跨端系统正式发布。全面升级的ColorOS 13以「水生万物」为理念，对整体UI以及一些体验进行了优化。全新的「水生设计」，从水在自然界中的运动方式汲取灵感，进一步增强了UI和动画在视觉上的流畅与包容性。在界面、图标、按钮颜色上也用了大量的蓝色，呼应“水”的主题。

另外，此次更新也带了一些新的功能和亮点体验。

1、个性形象使用场景更多且更具包容性 

ColorOS 13对Omoji也进行了更多创意升级，新增大量与社会身份和兴趣爱好等相关的创意素材，比如代表医护工作人员的“大白”形象，及流行的汉服、滑雪服，更丰富的五官、脸型、头型、饰品等素材。用户可以在社交应用中直接套用自己的Omoji个性形象，亦可为联系⼈创建Omoji，来电时即可显示对方的专属形象。或是在拍摄时使用自己的个性形象拍摄。

2、更智慧和有趣的息屏 

ColorOS 13对息屏做了全新升级，推出“智慧息屏“。在打开智慧息屏的场景化信息功能后，当用户处于外卖、叫车或听歌场景时，智慧息屏就会主动感知相关应用状态，并实时显示订单或歌单进程，无需反复亮屏查看。而当你在听歌时，「智慧息屏」还会显示音乐播放控制器，你可以很便捷地进行暂停、切歌、收藏等操作，ColorOS 13还会根据你的喜好为你智能地推荐歌单，做到了真正的省心和贴心。

此外，息屏还可设置多种样式，包括丰富的图形、动态动物家园、以及时光息屏。其中家园息屏会根据每日气温变化，揭示动物们赖以生存的家园变迁，呼吁大家关注气候变化。时光息屏会在你每一次唤醒手机后，在彩带上留下独特刻痕，使用时间越长刻痕越宽。

3、有趣又实用的绽放壁纸 

时下人们对数字健康越发关注，手机使用时长的增长和不可控性已成为当下话题。绽放壁纸让屏幕使用时长可视化，嫩芽成长为叶片的过程，模拟时间的流逝。设定一个使用时长目标，当超过目标后，叶片从有机转为工艺品材质，暗含美的稍纵即逝。同时叶片颜色代表过去一小时内使用最多的应用图标颜色，实时变化，将个性化和数字健康完美融合。

4、更便捷的大文件夹 

在新的系统中，支持对原有文件夹进行放大为九宫格大文件夹，可以直接点击打开 App。

5、智能会议助手支持整理会议纪要

会议当中的纪要整理一直都是让打工人头疼的难题，毕竟漏记、错记、反复回听录音是大部分职场人在整理会议纪要时常常遇到的痛点。为此，ColorOS 13 智能会议助手带来了纪要智能整理的功能，让你不遗漏会议中的每个重点。开会时，呼出智能侧边栏「字幕转记」功能，自动记录会议截图和笔记，会后生成图文并茂的会议纪要，便于回顾复盘，再也不需要反复回听会议录音，无需提笔即可记录重要信息。目前，纪要智能整理支持钉钉、飞书会议、腾讯会议、Zoom、Goole Meet以及Team。

更多ColorOS 13功能可以移步查看：https://www.youtube.com/watch?v=9da1ktqjPy0

十七、微信iOS迎来8.0.27正式版本更新 

1、我的二维码支持更换样式 

在微信-扫一扫-我的二维码页面下方点击【换个样式】后，二维码可更换不同风格，还有全屏背景颜色版，更现代更美观了。目前有 10 种样式可供用户选择。

2、统一音视频悬浮窗体验 

此前小视频、一起听、直播悬浮窗各异，此次对悬浮窗样式进行了统一优化，同时在还在细节体验上也做了优化，不在支持多个音视频同时播放，最多只能展示一个悬浮窗。且在已有一个视频悬浮窗，如直播悬浮窗时，再进入进入小视频，悬浮窗会自动暂停并收折。

3、公众号支持长截图 

苹果手机一直不支持长截图（虽然手机 Safari 浏览器可以长截图）。这次更新后，阅读公众号文章时，手机先截屏，右下角会出现一个「保存整页为图片」的按钮，公众号文章都好用。

4、个人状态及朋友圈权限更新 

个人状态除了状态表情图标外，现在还可以展示文字；朋友圈动态中，针对已发送的动态，支持修改可见范围。

十八、Snapchat支持双摄像头拍摄

Snapchat在8月29日推出了双摄像头功能，该更新使用户能够同时使用手机的前置和后置摄像头拍摄照片和视频，让用户从多角度拍摄需要分享的内容。打开你的 Snapchat，在相机工具栏中看到一个新图标。只需轻轻一按，就可以开始创建快照和故事，或者更精美的 Spotlight 视频。双摄像头是一种创造性的方式，让我们可以更好的捕捉激动人心的时刻。双摄像头有垂直、水平、画中画和抠图四种布局。Snapchatter 还可以添加心爱的 Snapchat 创意工具，包括音乐、贴纸和镜头。双摄像头已经支持 iOS 端，未来几个月将支持 Android。

十九、百事的元宇宙是品牌年轻化的新尝试 

最近，知名饮料品牌百事发起一场基于元宇宙生态的颠覆性营销活动，就为品牌营销4.0时代贡献了一出经典案例。以元宇宙为营销触角，通过对百事概念店的全面升级，开启百事元宇宙新纪元，邀请Z世代体验一场沉浸式虚实交互的演唱会，百事家族虚拟偶像TEAM PEPSI搭档活力无限的年轻用户，通过潮流音乐的无缝跨界，共创无限可能的未来第三空间。

百事通过元宇宙来对百事的“百事盖念店”进行升级。百事的宣传重点偏向于Z世代。在由元宇宙驱动更立体多面的新场域中，Z世代期待能享有更多主导权，共同参与创建“未来”的过程，创造力即第一生产力，而热爱驱动创造。

百事设计了4个虚拟形象，它们分别对应了百事家族四大品牌的视觉主色调。还特意弄了一个演唱会，让人梦回炫舞团的感觉。

为了鼓励更多年轻人参加，在「百事可乐潮音梦境」的预约阶段，百事就向全国年轻人发出了一份盛大邀请，让用户可以通过DIY填词的方式，参与演唱会的联合共创，释放对百事品牌和未来音乐的想象。参与者不仅可以得到以百事家族虚拟偶像为封面的专属演唱会门票，所写歌词还会随机出现在Live House现场，让更多人看到。

二十、网易二次元元宇宙社交软件Fancy 

继日本的REALITY和韩国的#Me大火以后，网易也开始研发类似的二次元元宇宙社交软件，悄悄地在泰国App Store又上线了一款名为“Fancy – avatar live party”的虚拟化身语音聊天社区应用，再度加码针对年轻用户群体的虚拟社交产品。

Fancy与REALITY和#Me相比画风的区别还是很明显的。该产品的主要特点为“语音聊天社区”和“虚拟化身”在“Fancy”中，当用户创建了自己的虚拟形象后，就可以加入社交活动中，除了传统的文字聊天，“Fancy”主打的功能之一就是“派对房（Party Room）”。

该房间最高支持9人同时在线。在派对房里，用户不仅可以和好友语音聊天、互动，当开启AI人脸识别功能后，AI会识别用户的眨眼、说话等状态，虚拟化身的表情也会与玩家的表情同步。

二十一、TikTok 推出AI绿幕图像生成器 

最近， TikTok 的特效菜单下，增加了一个名叫“AI 绿幕” (AI Greenscreen) 的新选项。点击这个选项，然后在屏幕中间的对话框里输入一段文字描述，只用不到5秒的时间，TikTok 就可以根据文字描述生成一张竖版画作，用作短视频的背景：

只要想象力到位，短视频的背景就可以放飞，让你尽情穿梭于各个虚拟场景。所有应用AI绿幕制作的视频，都会打上#aigreenscreen标签。

TikTok 用的这个文字转图片模型，还是非常简单的。尽管目前AI绿幕所生成的背景还偏油画风格，没有任何写实色彩。但风格迁移的痕迹明显，而且用的颜色也都鲜亮明快，给人一种耳目一新的感受。

以上就是2022年8月ISUX行业设计趋势速递，喜欢记得收藏转发，以备不时之需查看。

原文地址：腾讯ISUX

作者：ISUX设计

转载请注明：学UI网》ISUX「八月」行业设计趋势速递

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

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

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

操作很简单，大家看完记得练习哦。直接开始今天的教程吧，yeah…

● 相信大家小时候都玩过超级马里奥、魂斗罗等游戏。

下图是马赛克像素风典型的代表游戏之一。回想起来那都是童年的欢乐时光啊~

● 下面用文字简单的介绍了一些关于像素画的知识

● 给大家整理的一些像素风格的海报（案例来源于互联网，仅做参考）

● 除了像素画海报之外还有与之对应的像素字体下图来源于互联网，仅做示意。

● 这里我们用到上图03和06的技法思路，像素的赶脚类似PS的半调效果，或者是仿色扩散，以文字设计为基础使用的仿色扩散的效果来呈现。

设计思路&步骤解析

01：先设计完字体部分(这里暂不讲字体设计部分)，不会字体设计的同学，使用一款好看的字库字体也是可以的。

02：合并所有笔画，在AI中使用路径偏移，参数设置如下，对象-路径-偏移路径。

03：取消编组，用2种颜色区分。

04：勾勒钢笔连接每个边，红色圆圈标注部分为示意。

05：接着给字体填充黑白渐变，注意白与黑之间的明暗过度。

06：最终效果如下，将渐变后的字体在PS中选中，图像-模式-灰度-拼合。

07：图像-模式-位图-扩散仿色。

大家不要局限于做像素风格就非得像我用这种方法去呈现，我们只要抓住海报的主体，呈现是由一个小的单元格组合拼接而成就可以了。AI同样也可以做出矢量像素海报。。。

这是在AI做出的像素化效果，这里给大家抛砖引玉一下。

选中渐变完之后的字体，AI菜单栏-对象-栅格化，参数设置如下，最终位图再转矢量就可以啦。

08：最终并为其添加色彩与排版就完成了~

我们先看几组网上的案例展示吧，大概认识下这类风格的一些表现形式，版面的构图元素，以及颜色的一些使用等。

不难发现我们目前所看到的孟菲斯风格是非常潮的，强烈的色彩组合与碰撞，几何形状的构成，甚至一些海报当中也会出现潮流的插画小元素，非常具有趣味性，以及强一些画面视觉冲击表现。

孟菲斯风格版面元素构成

孟菲斯平面设计特征可以归纳为：

1、高明度的色彩组合；线条、图案的随机排列搭配；几何元素的大量运用和空间填充。

2、各式各样的几何图案是“孟菲斯设计”经典元素之一，以正方形、圆形或三角形这类规则图形为主。

3、与传统设计强调有序不同，“孟菲斯”的设计背景喜用凌乱与自由的组合方式。

不管是细瘦的直线、粗体的波浪线，还是点状图案亦或3D结构图形，你都能在孟菲斯作品里找到。

下图举例了孟菲斯在平面中的一些表现！

咱们分析完孟菲斯的一些构成元素表现形式之后就好开始下手了，下图是以人物为主体的表现形式。

为了方便大家观察我将版面中的元素进行了拆解，大致分为人物、文字对话框、一些线条元素和版面中的配色。

文字对话框&文字编排：

版面中的人物主体：

版面中的色彩搭配、字体&线条：

以上就是拆解完的样式，这里我们为了增加版面的趣味性，我使用了手写字体以及随意装饰的线条活跃版面气氛，色彩的组合上使用了纯色与渐变的组合碰撞，图形构成上表现模拟了电脑页面对话框的组合形式搭配上文字编排，以上都是为了尽可能的符合孟菲斯的一些风格表现而存在的。

这是我做的另外一张孟菲斯的海报，根据之前给大家总结的要素：

*几何图形构成

*强烈的色彩组合

*简单图形&插图

*简单图形&插图

图形的制作比较简单用 AI 3D工具就可以完成。

*几何图形构成

*几何图形构成

*靓丽/怪诞/潮流

当时找素材的时候找到这只鸟的时候，发现嘴非常的有意思，以及鸟本身的颜色也是符合孟菲斯的色彩要求的（一个巧合罢了），扣完图之后给鸟加上一个外描边增强趣味性。

*强烈的色彩组合

纯色与渐变色（高饱和度&低饱和度）、（明与暗）以及色彩在版面中的一个过度关系。

最终组合版面中的主体与文字排版&构图，以及配色孟菲斯风格的海报就完成了，只要掌握了他们的元素构成风格与表现就好做了，希望这2张海报可以给到大家一个启发。

所以我们只要能模拟出撕纸的效果差不多就能做了。

下图是案例展示部分。

我们来看下撕纸效果的一个具体制作方式，基本上都是在PS中完成的。

下图是关于PS画笔的预设：

常规画笔、干介质画笔、特殊效果画笔、湿介质画笔。

给人物添加一个蒙版，这里我使用的是干介质画笔，分别给他们换上颜色即可。

选择下图第二种干介质画笔，以及它们在不同模式下的样式效果。

接着在人物的边缘用干介质画笔（溶解模式）涂抹边缘，撕纸的效果就出现了，接着加入黑白相间的素材。

为了模拟撕纸的效果，我随意设置了一些纹理，让纹理保持一种不规则的状态。咱们动手制作一些素材使用(特殊效果画笔)，新建一个画布，使用画笔涂满即可，导出图片当做素材就OK了，涂抹的时候画笔的大小折中就行，避免效果不理想（大家多尝试就行）。

最终规划版面的文字编排就完成了。

大家多多练起来吧，希望对你有所帮助。

作者：大熊

转载请注明：学UI网》拿捏3种设计风格！

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

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

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

1.优化对象

云效是企业内部的效能研发平台，辅助公司员工研发产品。本项目的优化内容是针对它的项目协同能力，该部分的主要功能是“创建并管理项目”和“线上协同推动项目流转”。

2.设计依据

由于是自用产品，因此缺乏有效的数据验证，需要找到合理的设计依据。所以我们联系业务方开展针对员工的访谈，以职位为基础分类，梳理他们的工作流程；根据不同的工作阶段，收集各个用户角色的使用痛点；最后将痛点进行了分析和整理，将重点问题进行了分类汇总，最终总结出结论——效率低。因此本期的优化目标也明确下来了，就是对项目协同进行办公提效。

3.提效内核

在开始设计前要搞明白一件事，那就是项目协同的基础构成是什么？它们分别是“流转”和“角色”。

为了方便理解，笔者把项目协同系统比喻成工厂，把项目推进比喻成商品制造，项目从策划到上线，就如同商品在一条流水线上会经历多个加工点，从原材料到最终完工上市。这条流水线在项目协同中可以它称为“流转”，而在流水线上的加工点们，其实就是公司员工，我们称他们为“角色”，角色需要完成相应的任务，才能将项目从一个节点流转至下一个节点。因此“流转”和“角色”共同构成了项目协同系统。

所以提效的关键就在于“角色能否顺利完成任务”，同时“项目能否进行顺利流转”。满足这两点，项目协同系统才能高效运行，从而到达办公提效。

因此我们可以得出一个公式：“办公提效=角色完成任务的效率x流转顺畅程度”。即用户能在顺畅的流转过程中，高效地完成各节点的任务。再结合访谈结果，本次的设计目标逐渐清晰：

提升项目流转效率：梳理生命周期，满足全流程覆盖；搭建消息体系，提升信息触达率

提升任务完成效率：概念优化，降低学习成本；搭建高坪效页面，提升阅读和操作效率；多维度展示，提升决策管理能力

 

1.项目流转全覆盖

旧版云效只覆盖了产品和开发，而本期我们要做全流程角色的覆盖，因此笔者从角色和工作两个层面重新梳理了产品生命周期，角色层面包括了从产品，设计师，开发和测试，即产品研发的全流程参与的员工；工作层面包括了从需求策划一直到上线的全工作流程。主要目标是梳理出各角色需要完成的任务，同时确认在流程上的流转节点。

在本期方案中项目流转还是采用手动为主。举个例子，如产品在云效上创建了一个需求，并在线撰写了文档，此时他可以将需求流转给设计师，设计师收到需求后和产品沟通需求细节和排期，然后开始设计介入，此时产品即可将该需求的状态就变为了「设计中」，以此类推角色持续推动需求流转，直至完成上线。

在未来我们将会实现高度自动化的流转方式。比如完成某些任务后能进行自动化流转，再举个例子：设计师在云效上直接上传设计终稿，产品确认后可自动流转到下一流程节点。

2.打通办公消息提醒体系

经访谈发现，项目流转存在信息传递不及时的卡点，需要提升用户触达。考虑到公司现有触达方式中，美事和企业邮箱的普及度较高，依托这两款产品能做到全公司的消息触达。于是笔者与业务方梳理了消息提醒的场景，包括了「待办提醒」和「异常提醒」两部分。以下可以举两个案例进行分享。

自动化待办提醒：需求负责人完成创建后会自动流转到参与人，告知对方被分配了相应的事项。

自动化监测提醒能力：旧版项目流转是由负责人全权监测，无形中增加工作成本。优化后方案以系统监测为主，负责人为辅。当系统监测到异常时（主要是临近逾期或已经逾期），会自动在美事里推送未完成的内容，用户可点击查看详情，并及时处理。

1.概念提效

旧版的产品概念复杂，存在重复性内容，如「项目」和「产品」，如“产品”和“项目”这两个概念的相似度就很高，很多新用户难以理解。同时不符合业界定义的认知，如「迭代」，本应该是需求的合集，但是旧版二者却是并列关系，造成了理解成本高的问题。

在优化方案中，我们将概念扁平化，合并相似度较高的概念，放弃部分不常用概念。同时调研市面现有平台的概念体系，做到尽可能符合业界认知。从而降低理解成本。

2.搭建高坪效页面

工作事项作为平台最基础组成部分，主要问题是页面交互方式老旧，体现在结构分散且层级复杂；使用过程中跳转频繁，需要重新搭建高坪效的页面。同时在阅读浏览、新增内容和语义理解方面都存在设计细节问题。笔者以需求详情页为例，说一下搭建高坪效页面的方法。

页面层级重构：笔者采用了卡片分类法将页面组件重新归类组合，重构新页面，同时考虑到用户的快速浏览习惯，将原有跳转新页面改为抽屉的展示方式，减少反复页面跳转带来的体验不佳。

看到有用的信息：合理控制信息密度，同时保证添加内容的便捷性。设计吸顶的创建入口，点击后可跳转到预设位置去添加内容。页面上不会出现多余信息，有效降低页面的信息密度。

快速看到想看的：随着用户在抽屉内新增的内容越来越多，页面也会变的越来越长，为提升浏览效率，在左侧设计快捷帧导航栏，点击后能快速跳转到相应位置，提升浏览效率。

低成本理解文案：本次在语义设计上做了调整，确保用户低成本理解。以操作日志为例，日志里记录了所有操作记录，表达内涵是“哪些用户在什么时间进行了如何的操作”，因此设计由「用户名」+「行为」+「结果」+「操作时间」组成的字段句式，使语义做到标准化且降低理解成本。

3.多维度展示

在旧版方案中大量使用列表作为展示方式。但单一维度列表仅仅强调了事项的主题，考虑到在实地的工作场景中，用户是需要从多种维度去管理工作事项。

层级关系展示：需求存在父子级关系（一个需求可以被拆分成多个子需求，分期完成），因此需要能表达清楚层级关系的展示方式。笔者使用了树形图的展示方式，明确父子级关系。

进度展示：因为我们所参与的事项都是有起止日期的，什么时候开始，什么时候结束，中间需要干多长时间，都需要让用户有清晰的感知，从而提升管理效率。笔者采用了甘特图，以事项进度的维度来管理决策，同时设计了拖拽功能方便用户及时编辑进度。

流转状态展示：工作事项需要流转的，因此需要以流转状态的维度去展示事项，能更好地帮助用户感知事项所处的状态，及时规划流转动向，从而提升事项流转效率。笔者采用了看板的展示方式，以事项流转状态的维度来管理决策，用户可拖拽事项，及时进行流转。

 

回归到办公提效公式：“办公提效=角色完成任务的效率x流转顺畅程度”。在“流转”和“角色”两个方面的优化。

通过梳理产品生命周期将做到全流程覆盖，同时搭建信息体系，提升流转信息的触达，进而提升项目流转效率。再通过优化概念，降低学习成本；搭建高坪效页面，提升阅读和操作效率；搭建多维度展示方式，提升决策管理能力，保障用户在各节点完成任务的效率。

最终做到精准的办公提效。

 

本次改版还在继续中，我们会继续以提效为目标持续优化。B端产品不同于C端，尤其是企业类办公产品，会经常缺乏埋点导致缺乏有效的数据支持，因此不能像C端产品以数据作为设计依据。

需要设计师深入产业了解业务背后的运行逻辑，访谈目标用户观察其行为并收集其诉求。由此才能足够了解业务，为企业用户产出更优秀的设计方案。

希望这份B端设计改版的内容能够对大家有所帮助～

作者：58UXD

转载请注明：学UI网》只要一个公式，带你看懂协同办公提效

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

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

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

借用一句传统设计行业的经典语录，一个好的产品一定是“有用的、好用的、用过还想用的”，有用的主要由产品经理把控，而好用、用过是否还想用就是交互设计的职责和价值了。工作内容，交互大概可以总结为下面这几点：

1、是针对行为的设计，让原本的物理逻辑向用户行为逻辑转化；

2、平衡业务价值和用户价值，脑海中永远不要忘记“用户价值”这几个字；

3、以目标为导向，保证产品贴合用户心智，用户能更好的理解、使用产品，并获得愉悦的使用体验；

4、是通过功能架构向信息架构的重组，提升产品框架的扩展性、稳定性等，交互更多的考虑到在不同场景下对可用性的要求，让产品能长久持续的使用下去；

5、是对使用流程设计；

6、数据分析和用户研究相关的工作，这两者是交互展开工作的基础支撑。

交互的价值是长期的和可持续的，没有交互，短期内看似不会出现问题，长期来看，对用户留存、用户满意度等会有重大影响，市场环境不同于垄断环境，功能堆砌过多后甚至都无法再动摇产品“难用”这个印象，但凡有类似竞品，放弃产品可能性较大。

二、交互设计的产出物特点——交互稿与产品原型稿有什么差别

1、从内到外的逻辑思维差异

行为逻辑是交互设计师思考的出发点，也是交互设计方式能否取得创新的关键点。物理逻辑或者业务逻辑是产品经理更关注的要点，交互设计需要具备丰富的同理心，产品功能不同、用户不同、场景不同都会影响到用户使用时的感受和操作行为。简单来说，交互设计师更多的站在用户角度去思考原型的价值，是否容易被理解、好用甚至转化，而产品的角度不可避免的会更多考虑业务、技术实现等方面，一个人做到面面俱到，是极其难且思维是很容易固化的，长期形成的思维差异会直接在原型图中表现，最终影响到产品可用性。

以QQ音乐几年前的版本（2017）和现版本（2021）为例，左侧过往版本在首页的信息组织形式上主要以分类的方式，而右侧现版本中信息的组织形式中首页的分类方式已经很弱了，基本倾向于按用户行为、需求去组织，比如根据用户过往听过的歌曲去推荐歌曲、歌单，每日30曲更是研究了用户每日习惯、耐心做的信息整合，30首怎么得来的？根据什么样的歌曲去推荐？这些都是行为研究的范畴，需要对用户深度了解后方有最好的解决方案。

2.、设计规范的积累与创新

设计范式是交互设计师基本功的体现，包含设计规范和模块范式两个方面。设计规范是设计范式中的基础，对规范的理解和创新也是衡量专业度最基础的方面，这对原型稿是否成熟有很大关系，现有的交互规范大多基于iOS、Material design、微软设计规范的基础上优化的，国内比较流行的设计规范还有Ant design等，本文不对此做过多讨论，这里重点谈谈设计范式。

范式，指用户在长期对于互联网产品使用过程中产生的用户心智，比如用户对设置模块的预期、对个人信息模块的预期等。也可以理解为对于不同产品功能模块的记忆，设计时需要非常熟练的从脑海中调用，这样做的好处是不容易太偏离用户长期积累的心智，熟练应用范式是创新的前提。

比如表格编辑器的设计范式，不管是现在的飞书、谷歌文档、钉钉、石墨等协同办公产品，都在20年前微软office的ribbon设计模式中兜兜转转，尤其是表格编辑器，在长期的使用过程中记类的习惯是很难轻易被改变的，笔者亲身经历过一款表格编辑器产品的迭代，易用性（易操作、易学、易见）中易学性指标评分是最高的，现在想起来也跟行业范式接近不无关系。另外关于一些编辑器右键操作、键盘操作快捷键是否满足了用户需求都是极其重要的。不过办公类产品发展到现在已不再像20年前纯工具类属性了，协同属性必将带来编辑器再一次的创新。

设计范式需要长期的积累，对范式理解不够深入，通常是要么画不出来可用的原型，要么画出来的原型会被问到一个问题——“这个…看起来有点说不出来的奇怪”。在理解了基础范式之后，我们才能做出真正的创新，虽然近两年交互形式越来越稳定，但真正理解了范式之后的创新也能帮助产品快速占领用户心智，形成特定印象，继而占领市场。设计范式并非不可创新，而是在不必要的时候尽量遵循范式能最大限度去降本增效，减少不必要的用户误解或开发成本。

3.、多端设计交互方式

比如基本的差异点有：

• Mobile的用户行为多为单线任务，而PC是多线任务，比如pc可以多窗口很便捷的切换，用户可以一边聊天一边收邮件；
• Mobile端用户操作时间更加碎片化，PC操作时间更加系统、专一；
• PC的界面也远大于Mobile，导致信息结构差异较大；
• 两者交互事件也存在很大差别，PC可以针对对象进行hover，多上下滚动，少左右滑动（依据鼠标特性）等；
• 设计控件的规范差异较大。

本文并不详细赘述差异点，总的来说，这些差异点在具体的原型稿设计中会体现的比较明显，这些也是专业性的一个方面。下面将举2个例子来说明：

1.树状结构

树状结构是一个PC端经常应用的控件，适用于层级结构的展示、选择等交互操作，高效而清晰，但其在移动端展示时却不能照搬，由于屏幕、移动端手指交互等限制，在移动端该控件既不高效也不清晰。比如常见的将文件移动到文件夹的操作，桌面端的交互可以用树状结构，而移动端更适合层级结构。

2.面包屑导航

面包屑在桌面端是一个非常普遍的控件，可以有效的承载层级关系展示、快速导航定位的功能，比如不同层级的文件夹展示与导航等。但在移动端，因为屏幕大小、移动端用户操作碎片化等原因，导致用户对面包屑节点的记忆、层级操作上都远不如桌面端，甚至会影响到信息的展示效率，因此移动端在层级关系的展示与切换上通常不会用面包屑，而是左上角返回按钮或系统级别的返回。当然面包屑在移动端也并非一无是处，如果面包屑各节点承载的展示作用具备极强的参考意义，比如这些文件夹节点同时承载着组织关系的显示，则面包屑也还是可以用的。

总结下来：面包屑在移动端尽量别用，但如果其各层级节点同时有极强的参考意义，则可用。

4.、方法论的掌握和运用

方法论在交互稿中的体现是比较隐晦的，准确来说，这一点是针对思维差异点的补充，如交互设计十原则、“F型”页面设计理论（近几年有争议）等视觉动线，也包含发现问题的一些方法，比如KANO模型、用户体验地图、卡片分类等方法论的应用，这些对于用户行为维度的研究结果也会支撑着交互稿的科学性，这里不做展开阐述。比如用户体验模型示意图如下，用户体验模型是建立在用户角色模型之上的，前提是需要大量的用户深度访谈资料为基础，用以系统、全面、科学的研究用户行为和探索用户需求。

用户体验地图

除了以上列举出来的，还有一项重要的方法是数据分析，这一点是容易被轻视的，但确是最具备参考价值和衡量工作结果的，交互关注的数据和产品有很多差异，具体一点，比如对于一个项目中，产品更多关注的是衡量功能结果的数据，通常包含使用数据PV/UV、转化率等，而设计师更多关注CTR、停留时长、转化漏斗中跟操作行为相关的数据，行为是交互研究的对象，所以行为数据结果能为具体的方案设计提供衡量指标。

5、交互稿中的UI考量

简单来说，就是不能给UI挖坑，没有交互的设计，UI上与产品之间的沟通会非常频繁，也主要会出现以下几个常见问题。

1.信息结构与优先级的落地

信息布局既需要考虑功能的业务优先级，也需要考虑用户行为优先级，同时还需要考虑到UI排版的难度。这中间基本都会有矛盾存在，做好平衡是必备技能。有时候需要逼着产品给出功能优先级，排版是有限的，也有一定审美要求的专业度，交互稿需要为UI规避一些明显的坑，比如最典型的例子——功能都很重要、文案过长等，当产品同学也不确定自己所画功能是否能被用户理解、操作的时候，会喜欢用文案去进行解释，比如button上写10个字这种，交互需要给UI提前做避坑。

2.规范

设计是一个系统，任何需求在画交互稿时都应考虑到对系统的适应或冲击，这就要求交互设计师不仅要非常熟悉设计系统，而且必须是系统的制作人之一，设计系统是一项耗时耗力的工作，前期耐心打磨，后期适应、修改，如此才能把握住用户体验的一致性。

3.边界情况

主要包含用户交互中与前端、服务端的交互，比如操作事件的定义、反馈；加载的形式与技术方案；空状态；弱网、断网等等，这些边界页面的考虑都定义清楚，能有效避免UI的返工。

4.保真度与实现效果

交互稿如果保真度较低，会导致UI在实际设计的时候对交互稿修改较大，导致页面架构、交互注释等返工修改，造成不必要的时间资源浪费，也会对项目进度造成影响。一般来说，成熟的交互稿是比较接近UI稿而又不是UI稿的一种状态，将UI中的坑避免之后，UI设计师需要做的就是更表现层的设计，比如与前端工程师的实现匹配、色彩、栅格、间距、字体字号等等。

6、详尽的Use Case考量

Use Case（用例）指功能、交互的定义和详细描述，用例描述的细节程度决定开发时反复沟通的频率，具体包含的细节很多，大到功能流程的设计，小到某个交互事件的定义和枚举；从前端用户与系统的交互事件，到服务端与前端的功能联动等，都涉及到，总之，只要用户看到的、点击/滑动/hover等交互行为涵盖到的，都应该被定义，以期减少开发过程中遇到的问题和沟通成本，这里不做过多阐述。

三、交互稿背后的价值——交互设计只是画稿子的吗？

显然不是！如果说一个项目交互阶段持续了3天，那绘制交互稿最多能花费1天。

交互是一个横向能力比较高的职业，很多交互设计师也改行去做了产品、用研或者UI，所以多多少少都会具备这几者的一些技能。交互设计师通常会有多重隐藏的技能是必须掌握的。

1、项目中坚守用户价值

用户价值在项目中很容易就让步于业务价值、项目排期、技术方案等，交互就是在这中间说“不”的人，润物细无声，在每个项目中尽量减少用户价值的损耗，最后汇聚而成的产品整体体验还是有很大差别的。

—交互在组织架构上，一般是会归属于设计部门的，所以在部门中也承担了一线跟用户和数据接触的人，即便有数据分析师、用研同学的帮助，也需要有主动跟踪这些问题的意识，不然设计出来的交互稿很难不出问题。

3、可用性测试等结果追踪

可用性测试在一些稍大的项目中是体验设计环节中的定性维度核验步骤，需要结合用户反馈对方案进行可用、好用测试，并不是指在流程上能跑通的技术测试，而是校验用户对于方案的接受程度、满意程度，也顺便发现一些问题，后续进行优化。

更多的结果追踪形式，比如还有SUS可用性量表（B端产品可用阿里云UES量表等）、用户满意度、NPS跟踪等等，目的在于定量的给用户体验打分，确保用户体验的衡量是有章可循的。

易用性量表

4.、直接驱动业务增长

增长黑客和用户增长设计的概念前几年也已在业内为大家所熟知，AARRR增长模型（获客、激活、转化、留存、推荐/传播）中，交互可依赖对用户的了解和用户行为的洞察，通过比如文案、微动效、转化漏斗优化、信息梳理、布局设计等，也可以帮助业务在各阶段直接提升对应的业务指标，甚至将体验设计师熟悉的体验地图转化绘制为用户增长地图，在用户使用的全链路行为节点做设计所擅长的增长赋能。

5、项目流程管理

交互需要更早的参与到需求中，在需求出现之前的交互参与能让需求更加合理，而在交互稿画完之后，也需要实时的去跟进UI、开发，有一些技术难题需要跟开发密切合作，开发说“”实现不了”是经常碰到的一句话，那是否是真的实现不了，可能跟不同的团队、人、项目排期有关了，有时候并不是真的实现不了，或许只是开发不想做或者他之前没做过，这个就需要PK了，当然有的真的很难实现或者性价比很低的设计，就需要对交互稿进行调整了。除此之外，有的公司还要求交互有整体管理能力，这就另说了。

四、没有交互会带来什么？

产品团队或许不都有交互岗位，但不可以没有好的交互设计！

1、短期内产品使用体验很奇怪

很多人画出来的原型稿甚至是交互稿都遇到过“用起来很奇怪”这个问题，其实是因为设计者对用户心智、用户行为、控件规范、产品范式等的不熟悉造成的这个问题，一个“夹生”的东西即便逻辑合理也必然会带来“夹生”的体验。此外，范式和规范的使用只是执行时的一个选择而已，对某规范的使用未必真正解决当前场景下的问题，交互设计师更多的是通过对业务的梳理、用户的洞察来做选交互范式和规范的筛选，找到合适的，才能价值最大化。

2、长期下产品“难用”印象的形成

任何行业，任何产品，产品研发者可能都不是实际使用者，术业有专攻，对用户的理解是一项长期经验积累的过程，合乎逻辑的，不一定是易用的，易用的不一定是好用的。笔者的经验来看，用户的使用行为既是“傻”的，也是孕育着无穷无尽智慧的，尤其是B端产品，用户使用的方式可能超乎想象。因此对用户行为理解的深度决定了产品与用户之间的默契度，围绕一个痛点市场上总不至于只有一个产品，如何让你的产品成为用户真正的朋友，需要有专业的人来研究用户行为，交互这个专业便也是因此而生的。

如今互联网红利愈发消失殆尽，或许由于资金原因交互岗位并没有存在于所有公司或团队，但交互设计的专业度一定永远存在，岗位的横向兼并融合并不能磨灭交互的专业度，因为交互坚守的是用户体验的底线，让产品变得或好用、或高效，最终驱动业可持续增长，便是这最大的价值！

作者：陈悦

转载请注明：学UI网》交互设计的价值是什么？

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

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

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

用户体验设计首先字面意思是用户+体验。

01 座舱内的用户除了驾驶员还要考虑非驾驶员， 非驾驶员也有多种角色：老人/儿童/青年。

02 体验：用户发生使用操作的感受。

但实际用户体验一定是脱离不了场景的，场景是用户发生行为的一个大环境。

03 考虑场景的时候除了考虑的当下现实场景还有未来场景。

场景案例：充电全屏展示充电信息

场景案例：导航交互体验，先展开详细信息，然后再收起信息

场景案例：蔚来的360泊车系统开启时不能唤醒nomi

而且产品的研发和功能创新，用户的体验都是依据场景体系建立的。所以HMI设计过程当中，场景体系化的建立尤为重要。

二、智能座舱的场景体系化搭建

1、搭建流程

01 场景发掘：竞品分析、用户画像定位、产品定位、用户旅程图

场景发掘首先要把场景和使用的用户做定位，结合实际项目进行用户画像定位，确定场景主题，寻找到目标用户进行实车访谈和拍摄。

02 场景数据细化：网络数据、用户访谈、实车测评数据、常见高频数据

这一步主要是把用户访谈收集上来的数据，进行拆分和细化，然后筛选出有价值的数据进行录入。

用户访谈数据录入到数据库里，产品经理和设计师会针对收集上来的用户反馈，进行痛点/和爽点的挖掘。提出需求解决方案。

03 场景应用设计：原型设计、界面设计

基于场景的应用设计会分为两个步骤、一个是原型设计、一个界面设计、原型设计时我们更多是组内评估、找专家来提供指导性意见，到了界面设计时候除了专家评审、可以做出demo给用户进行测试来获得反馈。

04 场景走查：还原场景

在设计方案产出完成之后，给用户还原到我们发掘的场景去进行走查，根据用户旅程图查看有没有遗漏的用户场景和不同的用户反馈。

2、搭建工具

整个智能座舱的场景体系化搭建需要几个工具，竞品分析、用户画像定位、产品定位、用户旅程图。

用户调研方法有很多，我们需要掌握（调查问卷、用户画像、用户体验地图、用户访谈、焦点小组、）

今天核心介绍使用频率最高的三种用研方法。

2.1 用户旅程图

关注用户在驾驶阶段的行为、方式、心情、痛点、期待。

关键步骤：

① 设定场景、目标、期望（用户画像）

② 确定行为路径

③ 建立核心地图

④ 包装地图

⑤ 绘制故事板

2.2 可用性测试

可用性测试已经成为获得用户反馈的流行手段，主要因为他们上手快，能快速反应出问题。

关键步骤：

① 明确测试目的

② 问卷框架的设计

③ 投放调研问卷

④ 组织测试

⑤ 整理输出结论

2.3 5W+1H法则

5W+1H 是选定的项目、工序或操作，可以从原因(Why)、对象(What)、地点(Where)、人员(Who）、时间（When）、方法(How)等六个面进行思考。

① 原因—立项背景？

② 对象—什么功能？

③ 地点— 什么场景下？

④ 人员–驾驶员？/非驾驶员？

⑤ 时间–什么时机？哪个流程之后？

⑥ 如何–什么方式操作？

三、细化座舱用户体验的三阶段

1、用户体验的三阶段

体验的时间性有三个主要组成成分，及熟悉程度、功能依赖和情感依赖。

1.1 初识体验：

我们在产品使用初期的阶段，都会对产品有个使用预期。例如期望产品能提供一个好的体验，或者怕产生不好的体验。

1.2 使用体验：

使用体验分为两个阶段：使用产品初期和使用产品深度期

进入到车内试驾或者试乘，试驾员和销售除了会让用户体验车机的基础功能外，主要介绍的就是和竞品车型的竞争功能。

产品深度体验期的时候，长期的可用性变得更加重要，而不是最初的易学性。从而产品的实用性成为影响我们整体评估判断的主要因素。

1.3 获得体验：

最后，当我们接受了产品，在我们的日程生活中它参与了我们的社交活动。成为了生活当中的固定解决问题的工具，这个阶段产品体验就具有可识别性了。

2、体验的三条路线

2.1 体验线路是感官线

我们现在座舱内的交互感官有、触感、听感、视觉、嗅觉、语音。用户在人机交互的时候第一时间获得直观感受。

2.2 体验线路是情感线

情感线是诺曼强调感情在塑造体验中的重要性。比如灯光秀、宠物模式、和拟人化的汽车助手。带给用户都是情感上的满足。这些情感构成了与汽车的首次互动体验。

2.3 体验线路的流畅

就像C端和B端一样，我们交互体验的线路效率和流畅程度，能给用户增强驾驶乐趣。或者最大限度减少信息元素的干扰，让驾驶员沉浸在当下。

3、把握用户体验的多样性

3.1 个人价值观的差异

首先个人的因素，因为我们成长的环境不同，造成了对价值观的差异，有的人喜欢刺激新颖的产品，有的人喜欢乏善可陈的产品。

3.2 产品属性问题

第二可能是产品属性的问题，游戏产品带给用户就是不断的快感刺激，工具类型的产品用户使用流程流畅会更好。

3.3 跟随时间线的体重心变化

用户的使用体验对于时间的变化，通过用户旅程图，他们对产品的关注点会产生变化，例如用户刚开始对产品互动中更关注新的功能和刺激的体验。但在使用过一段时间后他们可能不会再关注他的新颖程度，更关注产品的实用性和效率。所以需要我们在不同的使用阶段重新帮助用户提升体验。

原文地址：七酱设计笔记

转载请注明：学UI网》基于智能座舱场景的用户体验设计

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

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

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

最关键的是，点进去每一个app，里面有这个app的所有截图：

简直就是一个吸取灵感的天堂，太nice了。（网址在文末）

那我们有了这个好东西，怎么去参考借鉴呢？

今天菜心就给大家一些启发，希望能对大家有所帮助。

一、图标双线条风格

比如像下面这个app，体育竞技类的：

我们仔细观察底部主图标：

会发现他的风格是双线条的，在国内还很少见过，而这种形式我们就可以参考参考，省的来被别人说你得东西太同质化！

当然，也不能乱参考，一定要说清楚理念和原因，比如像人家体育类的app，用双线条风格，把这个双线条比喻成跑道，我感觉没毛病，哈哈。

二、学习人家的一些小创意

比如，像这个地图上的小创意点，人物拿着一个巨大的咖啡杯，和人物形成强烈的大小对比，就很有趣味性：

放大看，人物还伸出来个舌头，挺馋的感觉：

这种小创意，当你做一些场景的时候，就可以借鉴，比如一些地图啊、外卖啊，都可以尝试参考参考。

三、老板说你的闪屏太单调

闪屏是app的重要页面之一，我们看到的大部分闪屏都是一个简单的logo，比如：

咱就是说，万一哪天你的老板不喜欢这种简单的形式，像来点设计感的闪屏，那你就可以去这个网站上找灵感，你就在主页划拉就完了，你框框一顿划拉，
就能发现有很多参考形式，比如这种图形类的：

这种插画类的：

这种图片类的：

你就咔咔参考呗，灵感老了去了！

四、看看别人的插画风格

也可以看看别人的app里面融入的插画风格是什么样的，千万别一画插图就是这样的：

看看别人的风格和造型，最起码可以提高一些审美，也可以提高一些对于差异化的视觉敏感度：

当然，最好可以自己动手练一练，那样会吸收的更好！

总结

除了这些，看看差异化的风格，也都是可以的，像这些

说不定，后面什么时候就能够用到，参考一番。

好啦，以上就是给大家的一些灵感启发， 主要是告诉大家，拿到一个优秀的网站后，怎么寻找灵感，吸取灵感，好好的把它用起来，而不是放到收藏夹里面吃灰。

网址：https://mobbin.com/

好好用起来，希望可以帮到大家！下期见！

转载请注明：学UI网》这10年，我都在这里看全球最顶尖的app产品！

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

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

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