导图社区 UI设计
七天UI设计训练营,小白入门必备宝典
编辑于2020-08-03 16:04:21色彩在互联网UI设计师的日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,他们日常工作中大部分都是在与色彩的博弈中度过的,虽然用户可能不懂色彩原理,可是用户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了用户,所以好好研究色彩以及每一种色彩传递的情感对做好设计至关重要。 这不,亿图从7个方面讲述UI设计中色彩的用处: 一、 色彩定义 二、 色彩三属性 三、 三种常见色彩模型 四、 色彩的语意及它的应用 五、 色彩在 线下 - 商场 和 线上 - B端设计 的应用 六、 色彩在B端设计中的作用 七、 B端色彩设计使用的原则
在数字化浪潮的推动下,企业数字化转型已不再是选择题,而是企业生存和发展的必答题。各种企业纷纷投入资源,采购各类数字化工具,希望能够借此步入数字化的大门。但是企业的数字化绝对不仅仅采购或升级数字化工具就能完成的,要真正实现数字化转型,企业必须在组织管理、战略管控上也实现数字化变革。只有建立起数据驱动的企业经营组织管理体系,实现企业数字化管理,再辅以信息化系统、数字化工具等支撑公司的经营管理,才能让企业释放出数字化的真正潜力,开启高质量发展的新局面。 这不,亿图给你提供了一个制造业 - 企业数字化经营组织管控平台方案,助力制造业企业早日完成数字化转型,找到数字时代的第二增长曲线,带动业务二次飞腾起来!!!!
低空经济的核心是航空器与各产业的“组合式”经济形态,如“物流航空”、“消防航空”、“公安航空”等,这些组合不仅丰富了低空经济的内涵,也为各行业的发展提供了新的动力和机会。 亿图从四大领域入手,梳理了低空经济在四大领域的使用: 低空经济军用领域、低空经济民用领域、低空经济征用领域、低空经济商用领域。
社区模板帮助中心,点此进入>>
色彩在互联网UI设计师的日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,他们日常工作中大部分都是在与色彩的博弈中度过的,虽然用户可能不懂色彩原理,可是用户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了用户,所以好好研究色彩以及每一种色彩传递的情感对做好设计至关重要。 这不,亿图从7个方面讲述UI设计中色彩的用处: 一、 色彩定义 二、 色彩三属性 三、 三种常见色彩模型 四、 色彩的语意及它的应用 五、 色彩在 线下 - 商场 和 线上 - B端设计 的应用 六、 色彩在B端设计中的作用 七、 B端色彩设计使用的原则
在数字化浪潮的推动下,企业数字化转型已不再是选择题,而是企业生存和发展的必答题。各种企业纷纷投入资源,采购各类数字化工具,希望能够借此步入数字化的大门。但是企业的数字化绝对不仅仅采购或升级数字化工具就能完成的,要真正实现数字化转型,企业必须在组织管理、战略管控上也实现数字化变革。只有建立起数据驱动的企业经营组织管理体系,实现企业数字化管理,再辅以信息化系统、数字化工具等支撑公司的经营管理,才能让企业释放出数字化的真正潜力,开启高质量发展的新局面。 这不,亿图给你提供了一个制造业 - 企业数字化经营组织管控平台方案,助力制造业企业早日完成数字化转型,找到数字时代的第二增长曲线,带动业务二次飞腾起来!!!!
低空经济的核心是航空器与各产业的“组合式”经济形态,如“物流航空”、“消防航空”、“公安航空”等,这些组合不仅丰富了低空经济的内涵,也为各行业的发展提供了新的动力和机会。 亿图从四大领域入手,梳理了低空经济在四大领域的使用: 低空经济军用领域、低空经济民用领域、低空经济征用领域、低空经济商用领域。
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/运营页通用
统一风格有开头/有结尾 记录成长记录
阐述深度
综合展示