uiapp界面设计总结 第1篇
1、版式（文案版式）
（1）左右排版的差异性：左文有图——配图示意模糊时用 ， 左图右文——配图吸引视觉，示意明确辨识度高
（2）版式试错：左右排版，居中布局，倾斜，三角构图，前后错层
2、字体
（1）字体情绪：衬线字体——古典经典，无衬线字体——现代简约，粗体字——厚重强壮，细体字——柔美，粗细结合——刚劲力，促销感，倾斜体——速度，促销感
（2）字体百分比：高度占整图比50%，大小层级差异10px
（3）字体处理技巧：1、字体覆盖（部分遮挡）一般选择覆盖英文或数字 2、微倾斜（文案倾斜素材向四周散发） 3、微倾斜创造空间感（微墙角） 4、错层阴影：整体适用字体略少的，局部每个字的错层地方3~4个 5、字体重构：1° 确定字体明确粗细规律（内部等距） 2° 调整字体重心 3° 微调笔划，注重呼吸感，改变字体性格 4° 设计笔划特点，小规模规律添加 5° 考虑笔划衔接处是否添加断开，增添细节
（4）banner呼吸感：居中排版（图文前后错层居中）——面积占比70~80% ， 左文右图/左图右文/居中——占比50% ， 放射状排版——面积占比40~60%
3、配图
配图样式：（1）花朵型 （2）发散型 （3）模糊分布（近实远虚）
图文位置（模特图）参考黄金分割比6:4开，或裴波那契数来快速定位
组合商品配图：多点吸引——总有一款适合你，带动价格——高价带动低价
营造复杂空间感（瓷片区同样适用）：（1）展台三大面——受光面，侧光面，背光面 （2）商品图片处理——高光，投影 （3）多商品组合——商品前后空间关系
3-1插画（矢量插画）——同看下面插画板块
根据文案绘制矢量插画，处理角度：（1）调研需求——调研风格，颜色 （2）提炼关键词——去形容词，；留动名词，具象到人姿及物品 （3）寻找参考——双图库（真实，设计） （4）确定方向——抄现实，三角形上色法
颜色填充时注意前后景色明暗关系，人物饱和度高，背景饱和度低，点缀比背景深（填色时同色色相不要做改变）默认光源在左上方，暗面物体右下角
先将配色条制作出来，上色时刻完全复制配色条色彩样式（渐变，描边等），使上色便捷统一
噪点笔刷——一般运用在物体的暗面
噪点笔刷设置：以三角形为轮廓在3个点的位置上点3个点，然后保存噪点笔刷，打开画笔设置工具，1° 形状动态——大小抖动，最小直径，角度抖动，圆度抖动，最小圆度 2° 散布
3-2插画（插画）
优势—空间感强
非全部，分板块，场景——，人物-矢量（非，为更好融入场景，通过阴影，投影的控制及形状图形的明暗渐变）
关键点——明暗面的确认（5大面）：（1）受光面/白面 （2）侧光面/灰面 （3）背光面/黑面 （4）投影 （5）反光
场景工具——（1）网络参考线 （2）AI的3D凸出与斜面工具（绘制一些曲面效果使用）
AI中场景网格的绘制——（1）绘制六边形 （2）各顶点连线（注：打开视图-智能参考线） （3）旋转90° （4）按Alt移动复制，Ctrl+D重复上一步（注：移动复制，不要有间隔） （5）充满画布，Ctrl+5转为参考线，Ctrl+2锁定参考线，便可以绘制场景了
4、点缀
常见点缀：椭圆点缀，双椭圆融合，长圆角矩形，圆形
抽象图形点缀：年轻/活泼——水波纹/小山角 ， 发散/纹理细节——网格化/比背景深/适当隐去
其他点缀：标签点缀（卖点提炼点缀），微质感+短线，粗细结合的形状，logo容器
运营banner
风格：
马卡龙风格——适用年轻女性
孟菲斯风格——高明度，高饱和度，几何结构，波形曲线，描边。 适用比马卡龙的年龄伟大一些的人群，男女皆可
蒸汽波镭射虹彩渐变——荧光，流体，梦幻感，镭射材质，Windows背景。三段式上色渐变。 17,18年天猫电商类开始流行的banner风格
波普风格——夸张的，视觉感强的，写实主义，强烈夸张的颜色处理，具有游戏色彩，饱和度比孟菲斯更强
uiapp界面设计总结 第2篇
品牌设计带来价值溢价和用户信任感
eg：美团专送 的服务+保障体系——（1）超时赔付 （2）配送可追踪 （3）服务保障
给用户感触——快+安全
品牌设计出现的场景：logo提取法 ——tab栏，刷新IP形象动图，侧边栏智能场景图标（eg：盒马生鲜——盒马厨师形象，增强品牌感知+连接业务）（eg：闲鱼金刚区——描边型，趣味性强，强品牌色体现 eg：大众点评金刚区——年轻化撞色，色彩多样 eg：京东金融——粗描边，棱角分明 eg：饿了么——侧轴视角）
品牌感内容 有：
1、品牌色——品牌色基因 ：闪屏页（logo型），金刚区，tab栏，图标颜色，卡片区，运营区
2、形象物——下拉/加载loading，智能机器人，弹窗，缺省页
3、特色图标——启动图标，金刚区，tab栏，会员卡
4、特色文字——导航栏，闪屏，占位图（兜底加载）
字体设计（田字格参考图）
1、字体基础变形状（控制字形方正或高版，规律横竖笔划，注意笔划连接，注意笔划间的呼吸感，小规模规律添加特征点把控字体性格（字体性格可根据用户画像分析））
2、图形造字法
3、字体重心控制
4、字体表现（eg：错层阴影设计，一个字融入3~4个点即可 eg：噪点阴影效果 eg：金属棱角效果）
字体设计可结合文案所描绘的主题，在海洛创意搜图，提炼特征元素，融入字体细节中
产品角度的思考：品牌感的塑造到底好不好？每个产品有产品的属性极特点，当品牌感与特征属性相悖时，考虑产品的风格差异，应准确思考品牌的方向，舍弃盲目的高大上“品牌感”（eg：拼多多——实惠经济，营造促销感。 而不是错误的将拼多多设计的巨有品牌感，反而给用户一种高品质昂贵的感觉 eg：网易严选——品质生活，着重介绍产品特性及评论，采用统一化的配图抠图，强“严”选风）
品牌的色彩情绪：粉色——甜美 淡雅——小资 黑金——金融贵气 淡绿+白——健康卫生 色彩鲜亮——生鲜 亮橙色——青春活力
uiapp界面设计总结 第3篇
1、异形——弧度过渡
2、背景点缀（样式多总结）
3、弥散投影卡片
4、嵌入式（倒圆角）——为后续交互埋伏笔
5、文字层次——大小、粗细、颜色、呼吸感、特殊字体包 banner类主副文字倍数
6、标签的多种样式（注意呼吸感） 字号24px，上下4px，左右6~8px 数字字体：DIN，lato，dosis
ios11——大标题风（比较浪费空间，不必盲目跟风）
ios7——扁平风
iOS 平台规范
1、清晰——尺寸清晰，表意清晰，交互清晰
2、顺从——形式服从功能，减少视觉点缀，确保内容突出
3、深度——动效传达深度，层次顺序展示
iOS 设计趋势（大而简，简而精）
大——产品+规范（大小，颜色，粗细，呼吸感，特殊字体包）（用色考虑色盲弱——蓝红橙绿，色彩联系）
简——视觉重点
精——交互操作角度更加便捷（eg：交互减步长——智能场景，收听类APP——保留暂停播放或未放完的音乐，文章，视频APP个人中心页——离线缓存,观看历史,首页——猜你在追，课程直播APP——小窗提示马上开始的直播课程）
uiapp界面设计总结 第4篇
单点场景使用——差异化创新，便捷&交互减步长（eg：功能模块搭配4W场景分析推测用户下一步or可能有的操作，便于搭建——智能场景/便捷功能，实现更快的流量分发）搭配任务测试，检查交互效果
如何快速完成操作——明确功能、明确布局强弱、提高图标辨识度（突显型，趣味性，预见性）
who（什么人） when（什么时间） where（什么地点） what（什么事情）
uiapp界面设计总结 第5篇
what 产品背景 1、行业梳理（艾瑞研究，猎豹大数据） 2、产品内外环结构（内：核心功能，没了不行 外：盈利/粘性功能，没了也行） 3、主副功能
who 目标人群 (参考情绪板) （艾瑞研究，易观智库） 人群年龄，性别分布，兴趣特征
why 预期目标
where 使用场景 用户在使用场景中心态及目的
when 需求节点 了解产品优先级，搭配kano模型，十字交叉分析
how 如何验证 从数据角度量化改版效果