首页

UI、UE、UXD能力模型分析

资深UI设计者

要想看起来毫不费力,你就需要非常努力,每一个领域,都会有很多专业的人。你必须马不停蹄的学习,才有能保持和他们的距离,不努力不学习,一不留神就会掉队。特别在设计这个青春行业,新知识、新风格、新技能更新的很快,更需要我们保持警惕心,时刻迎接新的挑战,敢于突破自己。

 

UI交互动画/UI交互动效/UI设计/UI界面设计

资深UI设计者

动效有多重要? 动效可以帮我们提升UX(用户体验),使UI界面显得更加一致和真实,并给整个产品带来创新的感觉

详解国内外十大设计系统

ui设计分享达人

设计系统(Design System)是一套综合性的指导原则、组件和规则,它协助团队以一致、高效的方式设计和开发数字产品。设计系统通常包括以下几个关键要素:
 

带你了解全案策划设计流程

ui设计分享达人

全案策划设计是指在市场营销领域中,为一个项目或品牌提供全方位的策划和执行服务。它涵盖了从市场调研、品牌定位、目标受众分析、营销策略制定、创意设计、媒体选择到推广活动执行等一系列环节。全案策划设计的核心理念在于不仅解决企业短期的业绩问题同时也解决企业的长期经营管理问题。

AI实操:用WHEE辅助设计app启动页

前端达人

今天我们继续用WHEE,带你玩转AI实操,设计春天出行启动页运营海报!
这次的主题是春天出行!
(文末已附上同款配方链接)
 
Part 01
AI实操:用WHEE辅助设计app启动页
 
 
第一,先找一下灵感参考图
第二,从三个方向来分析
  1.  
    版式
  2.  
    元素
  3.  
    色调
 
收集灵感图时,有4点要注意
  •  
    风格:整体风格是否符合我们的主题和目标用户群?
  •  
    版式:版式是否清晰、易读?
  •  
    元素:运用的元素是否与主题相关?
  •  
    色彩:色彩搭配是否和谐、美观?
 
我们先来看一下“春天”
AI实操:用WHEE辅助设计app启动页
 
 
-版式
从版式上面来看一下他们共同的特征, 基本上都是一个上下结构的版式特征
这种结构简单明了,合适各种类型的内容
上方主标题,下方logo落款,这种排版方式我感觉是最稳的一种结构
即使是新人也能很容易出排版效果
标题的排版方式呢,有横向排版和竖向排版
它除了使用常规的黑体字
还有手写体,我感觉手写体更加符合主题
-元素
从元素结构来看
天空,河流,山川,阳光、花草等等
这些元素能够让人联想到春天的清新、活力和愉悦,增加了海报的吸引力和代表性
-色调
色调呢基本也是以蓝色,白色,绿色为主旋律
也就是阳光、白云、绿色植物
 
接着来看看“出行”
AI实操:用WHEE辅助设计app启动页
 
 
-元素
元素呢也是在上面“春天”的基础上面
多出车,人,露营等周边关于户外的元素
这些元素能够更加生动地展现春季户外活动的场景和氛围
-色调
色调也基本蓝、白、绿
这个主题我觉得还是要有生机感、有活力一点的色调才对
 
总结设计方向和关健词提取
AI实操:用WHEE辅助设计app启动页
 
 
版式
整体的版式规划采用上下的结构
主标题放在上方,横排版,用手写黑体
AI实操:用WHEE辅助设计app启动页
 
 
关键词
核心词:草地,拖车、车辆、山川
效果词:可爱的卡通设计、梦幻的视觉效果、鲜艳的色彩
 
Part 02
接下我们看一下WHEE的参数
AI实操:用WHEE辅助设计app启动页
 
 
提示词、模型这里维持默认就好
当然也还可以使用它的智能联想功能
看看有什么新灵感,亦或者是反向词等等
AI实操:用WHEE辅助设计app启动页
 
 
风格模型
在模型商店里面,这里我用了citypop的风格模型
当然这里面还有很多的模型,比如新中式风格,工笔画盲盒等等
所以在关键词里就不需要在写风格的关键词了
直接选择相对应的风格模型会更加高效率
出来的画面结果也更加接近目标视觉
AI实操:用WHEE辅助设计app启动页
 
 
参数这里保持默认就好
我们第一次跑图主要还是测试关键词
后续看情况在进行调整
AI实操:用WHEE辅助设计app启动页
 
 
这是我一共刷了两次图
从呈现的结果上面来看
第一排比较符合想要的感觉
画面上方也好做文字的排版
添加关键词“露营、帐篷”
添加关键词“露营、帐篷”
 
 
氛围的感觉还是少了一点,因为少了露营和帐篷的元素
我们可以在右侧这里,选“重新编辑”按钮
这样我们就可以延续之前的设置继续编辑
然后我们把露营和帐篷关键词加上,其它不变
AI实操:用WHEE辅助设计app启动页
 
 
从结果来看第一张有帐篷的氛围更好
第三张和第四张有点脱离了
但是第三张处理一下拿来做弹窗感觉效果也会非常好
AI实操:用WHEE辅助设计app启动页
 
 
然后我们在右侧这个放大一下像素
这样就可以得到一个更高清的分辨率
 
Part 03
接着我们来做一下主标题的字体设计
就用手写黑体
AI实操:用WHEE辅助设计app启动页
 
 
我们先找一些毛笔字字形作为笔画垫字
AI实操:用WHEE辅助设计app启动页
 
 
 
用钢笔工具描出字形(这里先以春字为例)
我们挑选出重要的笔画特征就好
其实是不需要跟原来的一样
这样会更有灵性
比如这里“春”字,上部首里的三横
我这里只要第三横连笔的特征
后面的几个字也是以此类推
AI实操:用WHEE辅助设计app启动页
 
 
描绘完之后呢,我们加一粗一点描边的大小
同时将端点和边角都设为平头
基本的字体结构完成了
下一步就是细节的调整了
AI实操:用WHEE辅助设计app启动页
 
 
首先调整一下字间距
排版的话,我给它是上下错落
这样会给人比较轻松的感觉
AI实操:用WHEE辅助设计app启动页
 
 
整理细节的话,就需要注意
笔画之间的关系和空间感
例如“春”字上部首的第三横与“日”中间那一横
“出”和“行”的连接,以及它们相互之间的关系
AI实操:用WHEE辅助设计app启动页
 
 
完成主标题的设计之后,我们先来对画面进行二次构图
天空部份我们不需要太多
第一是文案放在上方识别度较低
第二放大主体元素露营车和帐篷后,它也能够更好的突出主题氛围
AI实操:用WHEE辅助设计app启动页
 
 
按照原先的计划做上下结构的版式设计
上面我们放主标题文案信息
但是单看着主标题设计还不够丰富
所以需要在添加一些细节
在“日”字上方和“出行”下方
我们在用文案做成曲线跟随字形弧度
同时他们也是相互呼应的
描述信息直接放在主标题下方
居中对齐的样式就好
AI实操:用WHEE辅助设计app启动页
 
 
 
下面就放辅助的信息
同时也是居中对齐的样式
这样上下就有元素关系的呼应
统一的居中对齐的样式
也会让文字阅读效率大大提高
AI实操:用WHEE辅助设计app启动页
 
 
最后在放入一些固定落款的元素就完成啦~
 
Part 04
总结
1. 设计方向和关键词提取
通过收集和分析同类题材,得出设计方向和关键词
前期的方向确定是很重要的,有效的方向可以减少后期改稿
2. 视觉风格
选择对应的风格模型,得到想要的视觉风格
WHEE模型库中有很多风格模型,这大大的提升了工作的效率
3. 主标题字体设计
以毛笔字字形作为基础字形,设计出主标题
毛笔字结合黑体的感觉非常合适这轻松、放松类型画面
4. 画面排版
根据前期版式分析确定的方向,对画面进行文字排版
文案与文案之间,标题字体设计
都需要注意它们之间的关系,以及统一性
 
今天的分享到这儿就结束啦
我们下篇见咯
 
以下同款配方链接
01
 
02
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发



作者:智明了智明
链接:https://www.zcool.com.cn/article/ZMTYxMzc2NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2024年动效设计前瞻

前端达人

在数字化时代,动效设计已经成为吸引用户眼球、提升用户体验不可或缺的一部分,动态元素的呈现效果,相比纯图片也新增了很多乐趣与惊喜,融入进我们生活中的方方面面。
2023年,我们看到了许多令人眼前一亮的动效设计形式,例如尼桑Ariya车机交互中,当驾驶员启动车辆时,信息娱乐系统的启动界面会展示一个动态的汽车品牌标志,伴随着流畅的过渡效果和音效,营造出一种高科技感和品牌认知度。
 
Current Time 0:00
/
Duration Time 0:08
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
从微交互到增强现实,从三维动画到自然运动,随着技术的不断发展与用户的不断变化,动效设计也在不断演进和创新。那未来的动效设计会是怎样的形式呢?在本文中我们一起来探讨一下吧!
温馨提示:以下图片均来源网络,GIF格式文件需要加载,感谢耐心阅读~
一、2023年动效设计表现形式
动效设计在用户界面、广告营销、游戏开发等领域都发挥着重要作用,常见的表现形式有微交互动效、3D动效、数据可视化动效以及场景化动效。
1、微交互动效
在2023年,微交互动效成为了设计师们关注的焦点。通过细腻的动画效果,提升用户体验,增强用户对界面的感知,使用户操作更加直观和愉悦。
2024年动效设计前瞻
 
 
在移动应用界面中,按钮、导航栏、滑动卡片等交互元素中常见微交互动效,例如美团小象超市,当用户点击底部标签栏按钮时,文字的颜色发生变化,图标右下角增加主题绿色填充,页面同步切换,给予用户直观的反馈,告知其操作已被识别;
美团-小象超市-手机录屏
美团-小象超市-手机录屏
 
车机界面中,导航栏通常用于切换不同的功能页面或查看系统状态。例如问界驾驶模式调节,用户通过手势操作导航栏显示,按钮高亮效果,驾驶模式以微交互动效呈现预览,以使界面切换更加流畅、直观,同时帮助驾驶员更轻松地操作界面,提升驾驶安全性和用户体验。
问界驾驶模式,来源网络
问界驾驶模式,来源网络
 
2、3D动效
三维技术制作的动画效果,通常具有立体感和逼真感,能够在屏幕上呈现出立体空间中的物体运动和变化。这种动效在视觉上更加生动、震撼,常用于影视特效、游戏开发、虚拟现实等领域。
视频来源网络
视频来源网络
 
在电影、电视剧等影视作品中,3D动效常被用于创造出各种特效场景、人物动作或者虚拟世界,增强视觉冲击力和真实感。例如好莱坞大片《复仇者联盟》中,各种特效场景和超级英雄的动作都采用了大量的3D动效制作,如钢铁侠的攻击动作、蜘蛛侠的飞行、蜘蛛网特效等,让观众身临其境地感受到了超级英雄的力量与魅力。
2024年动效设计前瞻
 
 
 
游戏开发中,3D动效被广泛应用于游戏角色的动作表现、场景建模、特效设计等方面,提升游戏的沉浸感和视觉体验。
王者荣耀破晓版
王者荣耀破晓版
 
车机界面中,可以通过3D动效制作出全景效果,使驾驶员在车内就能感受到真实的车外景象,增强驾驶体验和安全感。例如导航系统中,使用3D地图和路况动效,让驾驶员更清晰地了解路况和行驶路径。
Apollo anp3.0-障碍物绕行
Apollo anp3.0-障碍物绕行
 
3、数据可视化动效
数据可视化动效通过直观的动画展示数据变化,增强数据的可读性和理解性,使数据更生动、直观地呈现在用户面前,帮助用户更好地理解数据的含义和趋势。这种动效在金融、统计等领域尤为常见。
2024年动效设计前瞻
 
 
在商业领域中,数据可视化动效常被用于制作各种分析报告、销售演示等,通过动态图表、实时数据更新等动态效果,可以让数据报告更具吸引力和说服力。例如企业的数据监控面板中,可以使用数据可视化动效来实时展示销售额、用户访问量、库存情况等数据指标的变化情况。
来自DataV-设计中心
来自DataV-设计中心
 
并且通过动态变化的图表、实时更新的数据指标等动效效果,可以让管理者更及时地了解业务状况,做出相应的决策。
来自DataV-设计中心
来自DataV-设计中心
 
在科学研究和教育领域,数据可视化动效可以帮助科学家和教育工作者更好地展示研究成果和教学内容。例如,通过动画效果展示监测数据的动态变化、预警统计等,可以使抽象的概念更具体化、更易于理解。
来自DataV-设计中心
来自DataV-设计中心
 
车机界面中,可以通过数据可视化动效来展示车辆的驾驶数据,如车速、油耗、行驶里程等。例如,通过动态图表、实时更新的数据指标等动效效果,可以让驾驶员更清晰地了解车辆的行驶情况,帮助其做出更安全、更经济的驾驶决策。
@ Musemind UI/UX Agency,dribbble
@ Musemind UI/UX Agency,dribbble
 
4、场景化动效
场景化动效通过模拟真实世界的场景,让用户在虚拟空间中获得更自然的交互体验。产品展示或推广中,场景化动效可以帮助展示产品的特点、功能和优势。例如,在欧莱雅巴黎振兴霜互动 AR邀请卡,可以使用场景化动效展示产品的成分含量,以吸引消费者的注意力和兴趣。
欧莱雅巴黎振兴霜互动 AR 邀请卡,@KIVISENSE
欧莱雅巴黎振兴霜互动 AR 邀请卡,@KIVISENSE
 
车机界面中,我们也能看到场景化动效展示驾驶模拟场景,帮助驾驶员更直观地了解车辆的行驶状态和安全提示。例如导航系统中,展示车辆在雨天、雪天或夜间等不同路况下的行驶情况,以提醒驾驶员注意安全驾驶。
HUDWAY Drive,来源网络
HUDWAY Drive,来源网络
 
二、2024年动效设计发展方向
2023年动效设计不仅追求美观,更注重与用户的深度沟通。每一个动效都在讲述品牌故事,引导操作,提升易用性和趣味性。站在这个时间节点上,我们不禁要思考:接下来的一年,动效设计又将如何进化?它将如何继续深化与用户的互动,提升整体的用户体验呢?
1、智能化动效
随着人工智能技术的不断发展,利用人工智能(AI)技术或者智能算法来设计和生成动画效果,以实现动效的智能化、个性化或自适应。这类动效可以根据用户的行为、喜好或者环境变化实时调整,以提供更符合用户需求和情境的动画体验。
音乐专属推送
音乐专属推送
 
在移动应用、网页设计等界面中,可以利用智能化动效来实现智能交互界面,根据用户的操作习惯和需求动态调整动画效果。例如,苹果音乐专属推送,根据我的浏览、检索等行为和歌曲收藏、喜好等,智能调整动态加载的内容,建立我的专注音乐空间,提升我整体的使用体验和满意度。
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
 
在车机界面中,可以利用智能化动效设计车载智能助理系统,根据车辆状态、道路情况和驾驶员行为实时调整动画效果,提供更智能、更安全的驾驶辅助功能。例如,根据车辆的自动驾驶状态实时调整驾驶模拟场景的动画效果,帮助驾驶员更好地理解车辆的行驶情况和驾驶状态。
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
2024款小鹏G9 超智驾豪华纯电SUV,小鹏汽车官网
 
根据车内温度和湿度调整空调和座椅加热系统,实现智能化的温度控制和舒适度提升。
2、增强现实(AR)和虚拟现实(VR)的融合
2016年至今,AR和VR技术的发展持续加速,增强现实和虚拟现实融合动效成为热门话题。越来越多的行业开始关注和应用AR/VR技术,如教育、医疗、零售、汽车等领域,这种动效在现实环境中叠加虚拟物体和效果,使用户能够与虚拟内容进行互动,创造出更加丰富和沉浸式的体验。
2024年动效设计前瞻
 
 
虚拟试衣间
@Amol Arora
@Amol Arora
 
用户可以利用增强现实和虚拟现实融合技术,在现实环境中体验虚拟试衣间。通过智能设备查看虚拟衣服和配饰,以便在不实际试穿的情况下预览其外观和适合度。
虚拟家居设计
@ Bell'Arte Living - Estofados
@ Bell'Arte Living - Estofados
 
利用AR/VR融合技术,用户可以在现实空间中体验虚拟家居设计,例如在现实环境中预览家具、装饰品等虚拟物体的摆放效果,并根据实际需要进行调整。
车机领域
@ Shutterstock
@ Shutterstock
 
在车机场景中,汽车制造商可为客户提供汽车内容定制体验,客户通过AR应用或VR头盔在虚拟环境中预览汽车内部的不同配置和颜色方案,并根据个人喜好进行定制选择。
Acura Parts & Service
Acura Parts & Service
 
关于车辆维修和保养方面,通过AR应用,车主可以在现实车辆上查看虚拟的维修部件和保养步骤,以便更容易地进行维护保养。
The future of AR in Cars,Behance
The future of AR in Cars,Behance
 
同时也可应用于驾驶辅助和车载娱乐,例如智能导航、虚拟HUD、驾驶模拟和增强现实车载娱乐,进一步提升车机系统的智能化水平和用户体验,为驾驶员和乘客带来更安全、便捷、有趣的车载生活体验。
3、交互式动效
2024年动效设计前瞻
 
 
交互式动效在2024年仍会继续保持流行,并有望进一步发展,使用户能够更直观地参与到动效的生成和表现中。例如在车机系统中,通过交互式动效显示车辆的驾驶状态、周围环境和导航路线等信息,驾驶员可以通过触摸屏或语音指令与系统进行交互,调整设置并获取所需信息,提升驾驶安全和便捷性。
UI Motion Reel-百度Apollo,@ SeanCham
UI Motion Reel-百度Apollo,@ SeanCham
 
使用手势控制技术,驾驶员和乘客可以通过手势在车内控制屏幕显示和功能操作,例如多屏影音同步、开关车窗等,提高驾驶员的操作便捷性和安全性。
Li L9, Flagship Intelligent Cockpit.
Li L9, Flagship Intelligent Cockpit.
 
4、环保与可持续性动效
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
International Competition for the Xinxiu District Masterplan Con,@ McGregor Coxall
 
 随着环保意识的日益增强,对于具有环保和可持续性理念的动效设计也将受到更多关注和青睐。例如通过动效设计呈现城市绿色化规划的效果,城市绿道、绿色建筑等,向用户展示城市环境的改善和生态环境的保护。
@ Ahmad Sulaiman
@ Ahmad Sulaiman
 
在车机界面中,设计能源监测动效,显示车辆的能源利用情况,包括电池电量、油耗情况等,提醒驾驶员合理使用能源,节约能源资源。
5、跨界融合动效
未来的动效设计也将更加注重跨界融合,设计师可以借鉴其他艺术领域的元素和创意,将不同领域的美学观念融入到动效设计中,创造出新颖而富有创意的动效形式。
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
BTS - NB Numeric - NM1010 Tiago Lemos Signature Model
 
例如在品牌推广中,混合媒体新形式,模糊现实世界和虚拟世界的界限,Nike结合了实拍场景视频、草图、模型等形式的融合,创造跳出屏幕的动态内容。
来源网络
来源网络
 
车机系统中,应用全息投影技术,将导航地图以立体全息的形式显示在车内,提供更直观、更生动的导航体验;
Waymo cars,Google Design
Waymo cars,Google Design
 
Waymo汽车收集了大量关于周围物体和交通模式的数据,反馈乘客看到的是整洁的视觉图像和清晰标记的行程更新,增强驾驶安全与便捷性。
 
总之,2024年的动效设计将继续成为各行业中不可或缺的重要组成部分,呈现出更加多元化、智能化和个性化的特点。作为设计师,我们需要不断学习和探索新的设计理念和技术手段,以创作出更加出色的动效作品,为用户带来更丰富、生动和愉悦的体验。同时,我们也需要关注环保、可持续性等社会问题,积极推动动效设计的绿色发展。
以上视频、图片均来源网络,若侵可联系修改删除,欢迎交流探讨,谢谢~
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发



作者:Shirley_雪r
链接:https://www.zcool.com.cn/article/ZMTYxMzQzMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

工作提效!设计师必备的项目文件整理指南

资深UI设计者

文件的整理和系统命名,不是为了规范而规范,而是需要结合我们的项目情况去指定。

设计师如何做到“小优秀”

资深UI设计者

进步、提高往往只在于要勇敢的迈出那一步,不用在乎平凡的眼光。

除了Sora,这8大AI工具值得每个设计师和产品经理尝试!

博博

 

 

近日,全球科技圈最火的热点非Sora莫属,它是OpenAI发布的首个文生视频模型Sora,其视频生成能力、效果呈现的成熟度震撼了全世界。有人说,这是视频生成领域的iPhone moment,AGI(通用人工智能)又向前划了一个时代。
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
Sora的使用非常简单,与ChatGPT一样,只需要输入合适的prompt(提示词),它就能跟根据文本指令创建视频。
此前也有一些AI生成视频工具,但大都只能生成10秒以内,还“卡成 PPT”,但 Sora 弯道超车,直接将时长拉到 60 秒。这个突破相当厉害,毕竟时间越长,内容越复杂,想表达准确把控好节奏难上加难。
Sora生成的视频画面截图 | 东京街头的时尚女性
Sora生成的视频画面截图 | 东京街头的时尚女性
Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象
Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象
更厉害的是,根据Sora技术报告的介绍,Sora不仅可以理解用户在提示中所要求的内容,还能理解这些内容在物理世界中的存在方式。因此,它生成的视频不仅逼真,还包含精细复杂的场景、生动的角色表情以及复杂的镜头运动。
Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影
Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影
不少人高呼影视行业变天了,明星即将失业,有网友甚至把美国电影工业的象征Hollywood(好莱坞)改成了这样:
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
其实,不止影视行业,包括教育、营销、互联网甚至所有行业都会或多或少受到影响。
作为在互联网浸润多年的“老油条”来说,笔者最近一直在思考,Sora等AI工具对我们究竟是机会还是挑战?个人认为,机会大于挑战。
比如,对产品经理和UX设计师来说,可以考虑怎么把Sora的能力用到自己的产品上去: 一款社区产品,可以通过Sora快速输出大量视频内容;
一款教育类产品,可以通过Sora生成定制化的教学视频;
一款新闻APP或者视频网站,可以利用Sora进行个性化推荐;
……
 
不过这一切的前提是,你必须掌握AI。
除了上述提到的AI生成视频工具Sora,笔者还总结了很多优秀的AI工具,这些工具能大大帮助我们提升工作效率,生成创意灵感,一起来看看吧~
 
1、小摹AI
小摹AI是一款集成了人工智能技术的产品设计工具,能够根据文本指令轻松生成可编辑的原型图,对产品经理来说可谓解放了生产力!
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
目前有智能原型、智能文本、智能图片、智能翻译和智能表格五大功能,能有效地提升设计效率,没有设计经验也能轻松上手哦。
1)智能原型:根据用户的描述,智能生成一张原型设计页面。
2)智能文本:根据用户的描述,智能生成一段文本内容,对写产品需求文档很有帮助。
3)智能翻译:有“画板翻译”和“输入内容”两项子功能,可以轻松地实现整页内容的翻译,也可以输入内容进行翻译。
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
价格:
现阶段可免费使用
推荐理由:
小摹AI界面简洁,上手非常容易,它最大的亮点是利用AI优化设计流程,快速实现从概念到原型的转变,大幅度提升了产品经理和设计师的工作效率!
推荐评级:
⭐⭐⭐⭐⭐
 
2、Galileo AI
Galileo AI也是一个AI设计工具,它能根据用户的输入智能创建UI设计,生成的界面清晰,间距、字体大小、图片使用等方面都不错。另外,它还有个非常实用的功能,你可以将生成的设计导出到你的 Figma 中继续编辑~
官网:https://www.usegalileo.ai/explore
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)即时设计生成:根据自然语言提示迅速生成复杂的UI设计。
2)AI生成的插图和图像:为设计添加AI生成的艺术元素,增强视觉吸引力。
3)完整的产品文案自动化:利用大型语言模型自动生成产品文案,节省设计师的时间和精力。
价格:
现阶段免费
推荐理由:
如果你想获得一些灵感,想看到一些新鲜的设计,真的可以试试这个工具。
推荐评级:
⭐⭐⭐⭐
 
3、Uizard
Uizard是一个基于Web的设计工具,用户可通过它的AI技术快速创建网站界面,还能快速将手绘草图转换为交互式原型,提高设计效率和创新能力。
官网:https://uizard.io/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)手绘转数字原型:将纸上的草图转换为数字界面原型。
2)用户界面自动化设计:基于用户输入自动生成设计元素和布局。
3)交互式原型创建:快速构建可交互的原型,用于用户测试和演示。
价格:
提供免费试用版本,付费版12美元/月起。
推荐理由:
Uizard是一款设计神器,它的AI功能,丰富的可复用模板和设计元素,能帮你节省大量时间。
推荐评级:
⭐⭐⭐⭐⭐
 
4、Whimsical
Whimsical是一款多功能的在线设计工具,它可以帮助用户完成思维导图、流程图、线框图的制作,成品逻辑清晰,层次分明,还能帮助设计师及时标记灵感,是一款万能的专业辅助设计工具。
官网:https://whimsical.com/home
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)上下文工具栏、可直接用于展示的输出、无限画布以及实时更新;
2)庞大的符号库工具帮助用户更好的完成设计操作;
3)Whimsical的AI功能可以快速生成图表,用以直观展示概念、思维导图和网页等内容。
价格:
提供免费版本,付费版10美元/月起。
推荐理由:
Whimsical是一款全能绘制工具,其中还有非常庞大的符号库工具,能帮助你更好更快地的完成设计。
推荐评级:
⭐⭐⭐⭐
 
5、Khroma AI
Khroma是一款利用人工智能技术来生成配色方案的工具,它能根据你的喜好和需求,提供高效、直观的配色解决方案,并创建无限的调色板让你尽情探索。
官网:https://www.khroma.co/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)AI生成配色方案:根据用户偏好和流行趋势自动生成配色方案。
2)自定义配色选项:允许用户根据自己的需求调整和优化配色。
3)保存和分享功能:用户可以保存自己的配色方案,并与他人分享。
价格:
提供免费版,进阶功能需付费订阅
推荐理由:
Khroma的深度学习算法很厉害,它能够学习用户的配色偏好,并根据流行趋势提供创新的配色方案。
推荐评级:⭐⭐⭐⭐
 
6、AI Colors
AI Colors是一个人工智能色彩调色板生成器,它可以根据你的描述生成贴心的配色方案,同时你也可以参考提供的配色案例,每一种配色方案都有对应的效果展示,让你能够快速找到想要自己的配色方案。
官网:https://aicolors.co/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)提供四种配图案例,分别是移动应用、仪表盘、落地页、作品集;
2)单击复制颜色或者直接导出配色方案,不喜欢的颜色还可以手动修改。
推荐理由:
通过AI Colors,你可以轻松生成调色板,并将其应用于产品界面,查看它们的配色效果,非常适合希望轻松掌握调色板的新手。
推荐评级:
⭐⭐⭐
 
7、Fontjoy
Fontjoy是一个帮助设计师选择最佳字体组合的工具,它可以让用户在一次点击中生成字体组合,还可以混合和匹配不同的字体,达到完美组合效果。
官网:https://fontjoy.com/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)帮助用户调整字体外观,还有字体的类型、大小、颜色等
2)丰富的字体资源:包括中文字体、英文字体、日文字体等;
推荐理由:
只需点击生成,就能看到不同的字体,让字体搭配毫不费力。
推荐评级:
⭐⭐⭐
 
8、Huemint
Huemint是一个内置AI色彩模型的在线配色网站,它通过AI技术帮助用户快速生成吸引人的配色方案,你还可通过调节滑块控制配色方案的对比度,适用于设计师和创意专业人士。
官网:https://huemint.com/brand-intersection/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)AI配色方案生成:根据用户输入和偏好,AI算法生成配色方案。
2)控制配色对比度:用户可以通过调节滑块来控制配色方案的对比度。
3)多样化的配色选项:支持生成等阶色、渐变色和2到11色的配色方案。
价格:
在线免费使用
推荐理由:
Huemint的AI色彩模型能够根据最新的设计趋势和用户偏好提供创新的配色方案,帮助设计师快速找到灵感,轻松提高设计效率。
推荐评级:⭐⭐⭐⭐
 
以上就是笔者的“掏心”分享了,希望读到这里的小伙伴能真正尝试用一下AI。毕竟,现在我们必将和AI一起成长同行,只有了解AI掌握AI才能不落后于时代,也让我们一起期待人工智能下一个“Sora”吧!


作者:摹客设计云
来源:站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

标签设计的超全分析总结

博博

在日常生活中,我们经常会给他人贴上标签。这些标签可能是基于个人特征、行为或经历而形成的,它们可以帮助我们更好地理解和分类他人。例如,当我们初次见到一个人时,我们可能会根据他们的外貌、穿着和言谈举止来给他们贴上一个“自信”、“开朗”或“胆小”、“内向”的标签。我们不可避免地会贴标签或被贴标签,因为这是一种快速且低门槛的有效记忆方式。
设计干货分享|标签设计的超全分析总结
关注不同平台的标签设计,发现平时不太注意的小标签承担了许多重要的作用。在电商类设计中,标签可以强化商品折扣、优惠信息、服务特色等吸引用户。对于偏向浏览和文章发布类产品,标签设计旨在方便读者更好地理解文章内容,平台还可以根据标签聚合同类文章,建立目录索引,引导读者快速查看标签文章。
看似简单的标签却有这么强的作用,以下将根据标签的定义、属性特征及使用场景作出一些思考和探索,帮助大家对标签有一个更清晰的认识。
 
目录:
一、标签的定义
二、标签的组成
三、标签设计的作用
四、标签设计要点
设计干货分享|标签设计的超全分析总结
百度百科对网络标签(Tag)定义是:
一种互联网内容组织方式,是相关性很强的关键字,它帮助人们轻松的描述和分类内容,以便于检索和分享,Tag已经成为web 2.0的重要元素。
 
Ant Design 对标签给出的定义是:用来进行标记和分类。使用场景:1.用于标记事物的属性和维度;2.进行分类。
TDesign对标签给出的定义是:用于表明主体的类目,属性或状态。
设计干货分享|标签设计的超全分析总结
所以标签是什么?
标签是结合产品内容及属性特征经提炼后产出的关键词,是信息的一种集合方式,便于用户查找、定位以及系统识别。
标签可以帮助传达信息、建立可预知操作、产品分类和营销引流、优化搜索等。通过使用标签,方便用户快速识别,提升信息转化的效率,在UI设计中,标签是最常用的设计组件之一。
设计干货分享|标签设计的超全分析总结
标签由容器、文本、图标等元素组成。
三者都是可选的,它们可以随机组合,常见的是这5种组合:文本、图标、容器+文本、容器+图标、容器+文本+图标。
设计干货分享|标签设计的超全分析总结
文本标签:
更直观地表达含义,主要用于抽象的、或分类较多的标签,这种类型标签通常也以#+文字的形式呈现为超链接,主要出现在文字内容较多的列表页面、详情页的开头或结尾。它们也可以被理解为常说的话题标签。通过这些标签,用户可以快速了解到内容的主题和核心,并能够方便地链接到与该内容相关联的信息。
 
图标标签:
更富有设计感且吸引眼球,但这种图标必须是用户熟识的、一看就明白含义的;
 
容器+文本标签:
主要为突出特色、卖点来进行促销,类型及样式比较多元化,且单个产品可能多达 4~5 个标签,以此来吸引用户购买。
 
图标+文本标签:
面积会较大,视觉冲击很强,有的出于交互功能的需要,有的则是用在节日和特别专题。
 
容器+文本+图标标签:
而图标则是为了进一步强调或补充标签文本的信息,增强用户的视觉感知。
设计干货分享|标签设计的超全分析总结
设计干货分享|标签设计的超全分析总结
 
01 标签的颜色
标签的颜色选择和搭配对于信息传递和品牌塑造具有重要影响。不同的颜色和用色的面积/重量会给用户带来不同的感知,比如,绿色代表清新、免费,黄色棕色代表尊贵VIP,红色象征火爆热门。同时也会对品牌形象产生影响。
  • 在白色背景下,我们可以自由地选择任何颜色作为标签的主体色、辅助色和点缀色。当面对同一组信息多个标签时,我们可以通过混合不同颜色来更好地区分它们。例如,我们可以将主要标签设置为红色,次要标签设置为蓝色,然后将它们组合在一起以形成一个更丰富的视觉层次结构。
设计干货分享|标签设计的超全分析总结
  • 在图片背景下,我们的选择受到了很大的限制。由于图片本身已经具有了丰富的颜色和纹理,因此我们需要谨慎选择标签的颜色以避免与图片产生冲突。通常情况下,我们会使用白色/黑色+不透明度或主体色作为标签容器,并将文字设置为黑色或反白处理以确保其可读性。
设计干货分享|标签设计的超全分析总结
总之,无论是白色背景还是图片背景都有其独特的优势和适用场景。在选择背景时应根据具体情况进行权衡并做出最佳决策。
 
02 标签形状
标签的形状设计在信息视觉传达中扮演着重要的角色,不同的形状代表着不同的信息特性和情感色彩。常用的标签形状有圆形、矩形(半圆角、全圆角)、气泡或异形等。
设计干货分享|标签设计的超全分析总结
形状是标签信息传递中的视觉轮廓表现,它作为承载信息的容器,对文字元素的包容性极强,能够使标签信息更加聚焦,让用户在获取内容和进行信息归类时更加专注。
设计干货分享|标签设计的超全分析总结
 
在UI设计中,标签的特征跟生活中的标签也很相似,用以标注内容分类或内容要点,方便用户快速定位自己需要的内容目标。 标签还有满足用户的隐形需求的作用,当用户在犹豫是否要进行下一步操作的时候,标签在一定程度上加强了用户的需求欲望,促进下一步操作。那标签到底有什么作用?
01
传达信息,突出产品特色
 
标签的基本功能是分类和突出内容要点,以方便用户快速定位他们需要的信息或功能。标签常用于传达产品基本信息、折扣信息、优惠信息、产品卖点等。对产品而言,它能优化信息层级,又能简单明确地传达产品特点;对用户而言,可以第一时间获取关键信息,降低用户阅读门槛,所以标签的首要任务就是为满足用户的隐性需求而传达特色信息。
例如,美团天天神劵、折扣信息等,淘宝里的直降低多少钱、同款低价,让用户潜意识地认为能够降低经济成本。
设计干货分享|标签设计的超全分析总结
02
引导用户操作,建立用户操作的预期
 
标签还可以用于建立用户操作的预期,让用户在使用产品之前就知道点击后可能发生的效果,从而增加用户点击的兴趣和满意度。
 
例如:音频标签、视频标签“独播”、“vip”等,让用户在点击前预知点击后的效果。标签还可以用作行为引导,告知某操作的结果,如淘宝里“常逛的店”,让用户提前知悉操作之后得到的结果,加强点击的动机。
设计干货分享|标签设计的超全分析总结
03 传递品牌与可靠性
品牌性质的标签,让消费者对产品产生信任感。同时,标签也是品牌与消费者之间的沟通桥梁,通过简洁明了的文字和视觉元素,传达产品的特点和优势。
 
例如如:“百亿补贴”、“官方店”、“品牌”。许多用户在浏览列表时,会通过标签快速判断是否有必要点击查看详情。此外,标签内展示强公信力的信息(榜单排名/评分等),可以加强内容可靠性及优质性。
设计干货分享|标签设计的超全分析总结
04
方便分类
标签广泛用于用户区分产品内容,进行分类,进而确定关键词,优化搜索。避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。
例如:京东水果蔬菜“时令热卖”标签和淘宝里的评价标签,用户可选择自己感兴趣的标签去查找自己想要的信息,提高浏览效率,节约时间成本。
设计干货分享|标签设计的超全分析总结
05
营销引流
 
为用户打上不同的标签,用于区分不同用户群体,分类精准定向推送产品。标签既能突出产品特色信息、又不会占用太多空间,所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。
如:小红书文末的文字标签、淘宝搜索的“探索发现”
设计干货分享|标签设计的超全分析总结
05
从众心理引导转化
 
在营销中,利用从众心理可以引导用户做出购买决策,这类信息广泛应用在标签设计中,积极引导用户点击和转化。
例如,可以展示其他用户的购买记录或评价,让用户看到其他人对该产品的认可和好评,从而增加他们的信任感和购买欲望。像淘宝里的“多少人回购”,银行理财里的“多少人次购买”等等,都会对当前用户的心理产生极大影响,很多时候,用户的想法和行为受到周围人的影响程度,往往超过理性的认知。 当用户无法决策时,从众心理会成为影响用户决策的重要因素。
设计干货分享|标签设计的超全分析总结
06 告知状态
当内容状态变化且产品希望提示用户知悉时,标签可以作为告知当前状态的提示,如上新的“New”、“直播中”等。
此外,告知当前状态还有营造稀缺性的作用。如“限购多少件”、“即将售罄”,促使用快速决策。
设计干货分享|标签设计的超全分析总结
 
07 营造氛围
标签不仅仅是产品信息的载体,更是营造氛围的重要元素。通过选择适合的色彩、字体和图案,标签可以传达出不同的情感和氛围,吸引消费者的注意力,激发购买欲望。
 
例如:“38换新节”、“上新啦”,有的产品确实是基于热度展示的标签,也有的产品只是为了吸引用户注意力而展示。
设计干货分享|标签设计的超全分析总结
 
 
设计干货分享|标签设计的超全分析总结
在UI设计中,标签是一个不可或缺的元素,那如何设计才能达成业务目标?
01 简洁明了
标签设计的文案(字段)长短尽量简短清晰,具有一定的识别性、易通性,避免使用复杂的词汇和句子。用户在浏览界面时,应该能够快速理解标签的含义。这里所说的精炼并非一味地求短,虽然“短”是标签必备的因素,但有时候过于简短的标签根本没办法给用户传达足够的信息,甚至会导致用户更加疑惑,这也失去了添加标签的初衷。
 
02 一致性与差异性
在不同的页面和场景中,标签的设计应该保持一致的风格和格式。这包括颜色、字体、大小、布局和位置等方面的一致性。这样做有助于用户建立认知模型,提高他们的使用效率。然而,尽管标签设计需要保持一致性,但也需要一定的差异性。这种差异性是针对不同类型和视觉权重的标签,通过不同的视觉样式和色彩来体现信息的层级关系。因此,虽然表面上看起来存在冲突,但实际上并不矛盾。
 
03适当的颜色
标签的颜色应该与背景颜色形成对比,以便用户能够清楚地看到。同时,颜色的选择也应该考虑到品牌的形象和用户的视觉感受。
 
04 适当的位置
标签的位置应该方便用户操作。例如,重要的标签应该放在显眼的位置,而不太重要的标签信息可以放在次要的位置。
 
结语
UI 设计中的标签跟我们日常生活中的标签很相似,它不仅能对产品作分类、特色标记,还能在用户犹豫不决的时候起到一定的推动作用,是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。根据产品的目的和需求,在不同时间和场景下使用合适的标签是至关重要的。通过简单精炼的表达方式,标签能够在有限的空间内提供更多的信息维度,吸引用户的注意并激发他们的好奇心、提升信息转化的效率。
 
作者:满满滴滴
来源:站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

日历

链接

个人资料

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

存档