导图社区 UI设计
七天UI设计训练营,小白入门必备宝典
编辑于2020-08-03 16:04:21这是一张关于AI智能制造技术全景图,在制造业的发展进程中,不同阶段呈现出鲜明的特征与驱动要素。智能化阶段以数据驱动为核心。在这一阶段,多个系统实现深度打通,打破了信息孤岛,使得数据能够在企业内自由流动与共享。此阶段依赖企业级互联与规划,借助ERP进行企业资源规划,实现跨部门业务管理和前后台流程自动化;通过SCP整合多部门数据,进行供应链规划,做到国步需求与供应预测。自动化产线阶段主要由设备驱动。单机或产线集成成为常态,像真空乳化、自动灌装/贴标等技术得到普及,极大地提高了生产效率,推动企业走向规模化生产。然而,多SKU排产难题也随之而来,如何合理安排不同产品的生产顺序和资源分配成为挑战。手工/半自动阶段则以经验驱动为主导。人工在生产过程中占据主导地位,单机仅起到辅助作用。由于人工操作的局限性,导致批次间产品质量波动较大,而且追溯能力较弱,一旦出现问题,难以快速准确地定位根源。从手工/半自动到自动化产线,再到智能化阶段,制造业不断升级,借助核心制造运营平台以及机器集成与控制等相关技术和系统,逐步提升生产效率、质量控制能力和管理水平,以适应日益复杂多变的市场环境。
可信数据要素流通平台是数据要素在安全合规前提下高效流通的关键支撑平台,精心构建了多个核心模块,为数据要素的全生命周期管理提供了全面且可靠的解决方案。该平台打造了统一的数据要素流通门户,作为数据要素流通的总入口,整合了各类资源与服务,为数据提供方、使用方等不同角色提供了便捷的操作界面,极大地提升了用户体验和操作效率。可信数据交易平台是其中的重要组成部分,它承担着数据产品登记、存证、发布等关键职能。通过严格的登记流程,确保数据产品的来源合法、权属清晰;利用先进的存证技术,为数据交易提供可信的证据支撑,保障交易的公平性和合法性;而规范的发布机制,则让优质的数据产品能够被市场广泛知晓。流递服务平台专注于数据交易后的交付与服务,实现了交易数据的精准传递和计费功能。它能够根据不同的交易场景和需求,灵活计算费用,确保交易的公正透明。通过这些模块的协同运作,平台实现了数据产品从登记到计费的全流程安全合规流通服务。无论是金融、医疗、交通等不同行业的数据流通需求,还是政务、企业等不同主体的数据共享场景,该平台都能够提供定制化的解决方案,推动数据要素在各领域的高效配置和充分利用。
业务架构的核心价值在于优化业务视图的展现形式。通过精心描绘业务上下层之间的逻辑关系,它能够将原本错综复杂的业务系统进行合理拆解与整合,梳理出一套完整且简洁的业务视图。这不仅极大地降低了业务系统的复杂度,让业务运作的脉络一目了然,还显著提高了外部客户和内部人员对业务的理解程度。对于外部客户而言,能够更清晰地了解企业的业务范围和服务流程,增强合作信心;对于内部人员,尤其是新员工,可以快速熟悉业务架构,明确自身在业务链条中的位置与职责,从而提升工作效率。业务架构图的构建遵循三大核心原则,即分层、分模块、分功能。分层让业务架构具有清晰的层级结构,从战略层到执行层,层次分明;分模块将业务划分为不同的业务板块,便于独立管理与分析;分功能则进一步细化每个模块的具体功能,使业务细节得以清晰展现。为了帮助大家更好地应用业务架构图,万兴脑图贴心地列举了30个覆盖不同场景和行业的业务架构图示例。无论是互联网行业的电商业务架构,还是制造业的生产管理业务架构等,都一应俱全。这些示例为各行业的企业和从业者提供了丰富的参考借鉴,大家可以根据自身业务特点,猛猛拿去用起来,打造出适合自己业务发展的业务架构图。
社区模板帮助中心,点此进入>>
这是一张关于AI智能制造技术全景图,在制造业的发展进程中,不同阶段呈现出鲜明的特征与驱动要素。智能化阶段以数据驱动为核心。在这一阶段,多个系统实现深度打通,打破了信息孤岛,使得数据能够在企业内自由流动与共享。此阶段依赖企业级互联与规划,借助ERP进行企业资源规划,实现跨部门业务管理和前后台流程自动化;通过SCP整合多部门数据,进行供应链规划,做到国步需求与供应预测。自动化产线阶段主要由设备驱动。单机或产线集成成为常态,像真空乳化、自动灌装/贴标等技术得到普及,极大地提高了生产效率,推动企业走向规模化生产。然而,多SKU排产难题也随之而来,如何合理安排不同产品的生产顺序和资源分配成为挑战。手工/半自动阶段则以经验驱动为主导。人工在生产过程中占据主导地位,单机仅起到辅助作用。由于人工操作的局限性,导致批次间产品质量波动较大,而且追溯能力较弱,一旦出现问题,难以快速准确地定位根源。从手工/半自动到自动化产线,再到智能化阶段,制造业不断升级,借助核心制造运营平台以及机器集成与控制等相关技术和系统,逐步提升生产效率、质量控制能力和管理水平,以适应日益复杂多变的市场环境。
可信数据要素流通平台是数据要素在安全合规前提下高效流通的关键支撑平台,精心构建了多个核心模块,为数据要素的全生命周期管理提供了全面且可靠的解决方案。该平台打造了统一的数据要素流通门户,作为数据要素流通的总入口,整合了各类资源与服务,为数据提供方、使用方等不同角色提供了便捷的操作界面,极大地提升了用户体验和操作效率。可信数据交易平台是其中的重要组成部分,它承担着数据产品登记、存证、发布等关键职能。通过严格的登记流程,确保数据产品的来源合法、权属清晰;利用先进的存证技术,为数据交易提供可信的证据支撑,保障交易的公平性和合法性;而规范的发布机制,则让优质的数据产品能够被市场广泛知晓。流递服务平台专注于数据交易后的交付与服务,实现了交易数据的精准传递和计费功能。它能够根据不同的交易场景和需求,灵活计算费用,确保交易的公正透明。通过这些模块的协同运作,平台实现了数据产品从登记到计费的全流程安全合规流通服务。无论是金融、医疗、交通等不同行业的数据流通需求,还是政务、企业等不同主体的数据共享场景,该平台都能够提供定制化的解决方案,推动数据要素在各领域的高效配置和充分利用。
业务架构的核心价值在于优化业务视图的展现形式。通过精心描绘业务上下层之间的逻辑关系,它能够将原本错综复杂的业务系统进行合理拆解与整合,梳理出一套完整且简洁的业务视图。这不仅极大地降低了业务系统的复杂度,让业务运作的脉络一目了然,还显著提高了外部客户和内部人员对业务的理解程度。对于外部客户而言,能够更清晰地了解企业的业务范围和服务流程,增强合作信心;对于内部人员,尤其是新员工,可以快速熟悉业务架构,明确自身在业务链条中的位置与职责,从而提升工作效率。业务架构图的构建遵循三大核心原则,即分层、分模块、分功能。分层让业务架构具有清晰的层级结构,从战略层到执行层,层次分明;分模块将业务划分为不同的业务板块,便于独立管理与分析;分功能则进一步细化每个模块的具体功能,使业务细节得以清晰展现。为了帮助大家更好地应用业务架构图,万兴脑图贴心地列举了30个覆盖不同场景和行业的业务架构图示例。无论是互联网行业的电商业务架构,还是制造业的生产管理业务架构等,都一应俱全。这些示例为各行业的企业和从业者提供了丰富的参考借鉴,大家可以根据自身业务特点,猛猛拿去用起来,打造出适合自己业务发展的业务架构图。
UI设计
DAY01:进阶化组件思维
页面组件化-11个模块
1、状态栏(20px)
2、导航栏(48px)
3、工具栏
4、Banner
5、分页器
6、金刚区
7、UGC模块
8、栏目分类
9、悬浮广告
10、推荐位
11、Tab栏
页面包含18个UI元素
1、文字
2、颜色
3、按钮
4、列表
5、导航栏
6、Tab栏
7、选项卡&翻页
8、筛选
9、输入框
10、布局层级
11、填单页
12、Z轴层级
13、toast浮层
14、空白页
15、加载
16、运营图片展示规范
17、banner规范
18、金刚区
UI基础组件
字体
1、多行文本行间距=字体大小1.2-1.5倍,当字体很小的时候,比如18px时,多行文本行间距=字体大小1.5倍;大部分行间距是字体1.2倍
2、字体层次不小于4px(主文案>附属文案字体 4px以上),配合使用颜色、粗细拉开层次;
3、注意字体间呼吸感,呼吸感指行间留白、字间留白;字号、字重、颜色
4、 #333333 主文案颜色; #666666 辅助文案颜色 ;#999999 次要文案颜色
卡片
1、底部间距大于顶部间距,多个卡面拉开层级关系
2、间距留白采用8的倍数原则,减少沟通成本
配图
1、商品主图比例1:1,也就是正方形
2、干净简洁、凸显细节、图片质量高
3、好的配图=产品精修+设计细节
标签
1、左右间距大于上下高度,一般是左右间距:上下高度=2:1,保持呼吸感
2、字体变形/设计,统一字体重心,使字体更统一
3、卖点提炼要直击客户痛点
推荐设计软件:mac系统用sketch、windows系统用ps或adobe xd;设计用1倍图,导出文件时用2倍图
DAY02:界面拆分Feed流
何为Feed流?
Feed字面解释:一次喂给、喂养的;流:是按照某种时间线去呈现内容给用户
Feed流:即持续更新并呈现跟用户内容的信息流
感受:沉浸感和吸引力比较强,让用户不知不觉花费了大量时间在上面
软件类型
社交类:微信、qq
资讯类:今日头条、腾讯新闻
Feed流的设计细节
1、多字段
字体
颜色
1、#333333 适用于标题、主文案;
2、#666666 适用于层级较弱的内容文字;
3、#999999 适用于辅助性、说明性文字
深浅有别,视觉差异
大小
1、40px 适用于标题
2、32px 适用于内容
3、28px 适用于次级内容
4、24px 适用于辅助、说明
好的文字层级差>=4px
小结
标题:40px #333333
内容:32px/28px #333333/#666666
辅助信息:24px #999999
间距
元素的水平间距
1、40px 适用于标题和内容区
不同模块使用较多
2、20px 适用于头像信息与内容
3、10px 适用于文字内容与图片内容
相同模块使用较多
4、30px 适用于内容区和评论区
不同模块使用较多
5、20px、30px用的比较多
元素的纵向间距
1、20px 适用于不同元素之间
2、10px 适用于相同元素之间
2、等级标签
3、配图:背景干净 + 主体突出 + 细节清晰
配图比例:1:1(头像等);9:6(长:宽)
4、思维
1、主思路
希望用户去看:做大、做粗、做成有色板块
不希望用户去看:做小、做细、做浅、做深(入口深)、不透明度低;
合理引导用户视线
2、格式塔设计原则
接近性
彼此靠近
视觉分组
封闭性
连续性
3.黄金螺旋曲线
DAY03:界面拆分实操-会员中心
会员基本具备的特点
1、有独有的尊享感:体现在等级、配色、称号、勋章的视觉形式
2、等级特权带来的优越感:体现在各等级之间权限开放差异性
3、能够给用户带来优惠、福利:体现在积分进度、积分任务、积分换购、积分活动
会员中心页面构成
1、基础信息:一般由昵称、头像、等级、标签、勋章等组成
1、背景渐变色:同色系的渐变配色,可以采用左上右下的配色技巧进行配色
2、弥散阴影:颜色略带主色调偏向;高斯模糊的尽量控制在20左右;形状需要根据情况进行调整
3、内容层级:根据内容层次保持布局的平衡和美观
2、等级特权:会罗列出可享受的特权,部分也会各等级之间有所比较
1、图标绘制:外环90px,内环54px。合理呼吸感,图标内外比约=0.618
2、图标是否容易识别、视觉大小是否一致、线条粗细是否一致、圆角大小是否统一
3、积分任务:一般是列表流的方式呈现任务区
列表流间距留白合理,文字层级对比强:1、上下左右保持32px 2、内部间距保持16px 3、主28px 副24px 文案字号相差4px以上
标签、按钮:背景高度30px、文字22px 注意呼吸感、颜色选择、文案选择
4、积分商城:主要为积分兑换的商品货架
DAY04:图文混排设计强化
列表流图文混排
图片比例规范
1、1:1 构图规整,突出被拍摄体
2、4:3 图片占比比较大,适用广泛,图片重于内容
3、3:2 来自专业相机,强调专业性,内容重于图片
4、竖向图片调换对应长宽即可
左右布局
主体突出
案例实操
1、布局选择:根据需突出重点选择布局
2、文字层级:使用字号、字重、标签表达层级,注意色彩联系
3、人物处理:素材清晰度、神态、色调一致性
4、背景制作:彩色点缀,色彩
Day05:设计强化-瓷片区
瓷片区:移动界面中的广告位
瓷片区设计要点
排版
通用型
对角线
左右:瓷片区距离页面边距30px、文字距离瓷片区边距20px
电商类
上下
文字和图片上下排版:文字在上、图片在下,瓷片成高瘦矩形
旅游类
叠加
大多数产品:常搭配3块瓷片进行设计
配图
鲜艳有活力,充满正能量;能明确表达主题图片增强用户代入感
免费图库
https://unsplash.com
http://www.sozai-page.com/index.html
https://pixabay.com
https://www.sitebuilderreport.com/stock-up
https://www.pexels.com
https://picjumbo.com
https://gratisography.com
破局处理空间感较强
文字+标签
主标题:方体粗黑 32px
副标题:苹方中等 26px 与主标题字体大小对比大于6px
标签:DIN 22px
文字VS背景颜色:对比明显
文字层次:大小对比、粗细对比、颜色对比、行距对比(字体大小、颜色、字重)
背景板
同色系渐变:相同色相、不同饱和度微渐变处理
高饱和度渐变配色参考:ffea6b+ffc600 9bd6ff+009eff ffa87e+ea5959 ce96ff+7a61ff 57a6ff+4f57ff 64f2b4+07cbcb ff8c9f+ff3276 ffb642+ff5e46
Day06:设计强化Banner
来源
线下广告位
线上广告位-Banner
作用
较短时间内抓住用户心理
界面重要位置、吸引用户点击
颜值担当、提升产品调性
设计要点
文字
标题:方正兰亭粗黑 80-120px
标签:苹方中等 28px
标签呼吸感:高50px 圆角25px
字体
纤细类
小米兰亭
方正兰亭纤黑
华文黑体
促销类
造字工坊版黑/劲黑
方正粗谭黑
爱度综艺简体
书法字体
汉仪尚巍手书
李科旭书法
叶根友书法体
女装纤巧类
汉仪瑞意宋
汉仪宋韵朗黑
方正清刻本悦宋
免费商用字体:http://www.fonts.net.cn/commercial-free-32767/fonts-zh-1.html 字体天下
文字效果处理
错层阴影
简单快速操作
较好的视觉效果
单个字3处左右较为合适
配图
根据需求 主题关键字选择合适的素材
抠图技巧
抠图干净,无多余背景
图片清晰,无锯齿杂边
图片组合
近大远小、近实远虚、错落有致
细节美化
曲线明暗对比度
细节光影融入背景色
投影增加立体感
背景
颜色选取
微质感:颜色渐变
同色系或邻近色
点缀
色卡配色 马卡龙风格
规范复用
字体样式统一
布局、配色风格统一
排版、尺寸大小统一
替换文案内容、配色方案和商品素材
Day07:长图设计强化
为什么需要做长图
1、设计成长记录、优秀作品沉淀
2、综合审美能力、视觉统一能力强化
3、平台影响力建立+简历作品集素材库
创建思路
结构:总->分->总
总
封面:整体视觉展示
分
图标、主页面、运营页面拆解&说明:重要模块拆分
总
其他汇总:剩余页面展示
有经验设计师的教诲
1、排版新颖、差异化
2、独立思考、阐述深度
3、重点突出绘制能力强化
长图设计要点
封面颜值:好看、新颖、差异性
封面制作 细节拆解
1、构图:推荐左右,普适度90%
2、配色:2-3色配比
3、标题:要点体现
4、层次:拉开z轴层级
5、氛围:用好元素&质感
绘制能力:图标、重要界面、运营视觉、结尾
统一图标,增强视觉
重要界面有理有据
1、细节放大展示,体现视觉精细度
2、微动效凸显,体现趣味性
3、设计思路展示,阐述设计思路
运营视觉强化
重复就是力量,适合banner
细节元素拆解,banner/运营页通用
统一风格有开头/有结尾 记录成长记录
阐述深度
综合展示