UI计划表

UI初级设计师必看，一张图带你完全了解相关内容，通过思维导图帮你提高效率，赶紧来试一试吧~

UI设计

• 设计
  • 设计软件/系统
    • 界面设计类
      • PS/AI
      • Sketch
        • 老牌交互设计软件，仅支持Mac，丰富的功能及其强大的插件库，是许多UIUX设计师常用的设计软件之一。简洁干净的界面配合许多专属的设计工具，让其成为出色的UI一站式软件。
      • Figma
        • 最近几年热度比较高的软件，全平台均支持，网页端皆可操作，界面简洁明了，同时拥有丰富的素材及插件库，极大提升设计师的工作效率。
      • Adobe Xd
        • Adobe旗下转为UIUX打造的设计工具，Mac与Windows平台均可使用，不仅能完成基本的线框、高保真设计，也可以制作动画、原型创建等，同时具备一定的协作能力。
    • 在线设计类
      • Master Go
        • 蓝湖旗下设计产品，据蓝湖介绍，在MasterGo发布上线 rFigma文件导入功能]的声明后，MasterGo官网流量暴涨10倍。同时，MasterGo也是国内UI在线设计使用率最高的网站。
      • 即时设计
        • 即时设计可以说是在线版的Sketch，操作界面几乎和sketch完全一致，对于习惯使用sketch的用户来说，较容易上手。另外还提供大量的开源资源，用起来也非常方便。
      • Pixso
        • Pixso是一款面向团队的原型设计及交付一体化协作平台，支持多人协作、组件变体、低代码交付、自动布局、在线矢量设计、打造团队资源库，共用一套资源形成产品设计规范。
    • 原型与协作类
      • Axure
        • 在在线工具出来之前，Axure是原型设计类软件使用频次最高的设计软件，现在也是原型设计首选软件。
      • 摹客
        • 墓客可以自产出高保真设计，支持多款主流设计工具 (如sketch、Xd、Axure等) 的设计稿交付，团队成员在产品、设计到开发的各个环节中，利用多种设计工具，都能使用墓客平台协作工具。
      • 蓝湖
        • 高效的产品设计协作平台，无缝衔接产品、设计、研发流程，降低沟通成本，缩短开发周期，提稿工作效率。
  • 设计规范
    • 字体
      • 
      • ipone端
        • 中文：苹方(PingFang SC)
        • 数字：DIN Pro
        • 英文：San Francisco ，New York
      • 安卓端
        • 中文：思源黑体
        • 英文： Roboto
        • 数字：DIN Pro
      • PC端
        • 中文：微软雅黑
        • 英文：Arial
        • 数字：DIN Pro
      • 注意：行高通常为字体的1.0-1.6倍，字号越小，行高越大，字号越大眨班，行高越小。 行高较高的文本更容易阅读。
    • 颜色
      • 品牌色
      • 辅助色
      • 文字色
        • 
        • 文本：333、666、999
        • 背景:eee、ddd、fff
        • 空框：F6F6F6
      • 渐变
        • 渐变角度保持一致，根据用户的视觉习惯，从左到由开始由浅到深。 为了加深用户对品牌的感知，品牌色不能进行色相的偏移，通过明度的变化。
    • 组件
      • 01.按钮
        • 
      • 02.导航栏
        • 
      • 03.弹窗
        • 
      • 04.列表
        • 
      • 05.默认图
        • 
      • 06.图标
        • 
• 作品集
  • 三款APP
    • 对标账号：每日设计素材 包含页面：启动页、引导页、注册页、登录页、首页、VIP页、次级页面、 个人中心、弹窗
    • 美食
    • 运动
    • 音乐
  • 图标设计
    • 拟物态
    • 线性
    • 面性
    • 线面性
  • 样机
    • 第一套
  • 物料/网站
    • 个人网站
      • 凡科网：个人搭建（移动端/PC端）
    • 物料打印
• 设计理念
  • 设计体系
    • 1.设计理念与设计原则
      • 01 保障设计一致性
      • 02 提升开发效率
      • 03 传承设计理念
    • 2.设计样式与规范
      • 01基础全局样式
        • 这一块是组成界面的基本元素，比如色彩、文字ICON、页面布局、动效等
      • 02主要组件样式
        • 设计和开发同学可以直接复用的组件，这一块根据不同的产品细分程度不同，一般B端产品细分度更高，因为复用性更强，C端只定义大概
      • 03 其他规范
        • 非组件，但也是界面和体验的重要组成部分，比如插画、声音、文案、品牌等
    • 3.使用方式与迭代规则
      • 对于小公司来说，只需要大概说一下使用方法和改进方式，中型公司可能就有了协同工具与插件，需要规定不同部门协作方式等，大型公司的组件库可能是各个合作公司共同创建共同使用，相关规则就更复杂···
      • 这一块是运行机制与保障机制，也会提供资源下载，不同规模的公司差别较大。
  • 情感化设计
    • 举例：k12游戏化教学
• ui设计趋势把控
  • 国内外大厂学习
    • ISUX 腾讯： https://isux.tencent.com/
      • 腾讯用户体验设计中心，分享设计干货，设计趋势、设计文章~
    • 腾讯 CDC： https://3dicons.col
      • 腾讯用户研究与体验设计中心，分享行业案例、行业洞察
    • 京东JELLY： https://jellyjd.com/
      • 京东设计中心，经常发布季度、年度总结文章，618等活动复盘~
    • 苹果 HIG：https://developerapple.com/design/
      • HumanInterface Guidelines苹果官方设计指南，新手UI设计师一定要了解~
    • 谷歌 Material Design：https://www.material.io/design
      • 谷歌官方设计指南，安卓系统的设计标准指南!
    • Face Book Meta Design：https://design.facebook.com/
      • 原facebook团队的设计官网，设计感超棒还有各类可以样机下载~
    • Airbnb Design：https://airbnb.design/articles/
      • https://airbnb.design/articles/
  • 流行风格
    • 3D动画风格
      • 3D元素和动画是这两年比较火的话题，动画是UI设计中，用户体验的重要部分之一，3D是设计领域中的重要类别之一
    • 超大字体风格
      • 设计师们正在通过字体和字体的选择带来更多的效果，让鼠标移动或向下滚动画面，使字体移动并与用户交互 选择大字体效果设计风格，是一种急速流行的设计风格，也可以称之为大标题设计风格。画面中将标题放大，再搭配上其他元素，在最短的时间内了解到设计的元素，抓住观者的注意力 关键词:吸引力、记忆点、品牌色
    • 新拟态设计风格
      • 新拟态设计，结合了扁平设计和拟物设计。它是一种视觉样式，结合了背景颜色、形状、渐变和阴影，以确保UI元素的图形强度。所有这一切都可以实现一个柔软、挤压塑料外观和几乎 3D 的造型
    • 毛玻璃风格
      • 毛玻璃它最大的特征就是通透感和微透光，透过上层设计能看到底部色彩微妙的变化，丰富了设计质感的细腻度。这样的质感可以丰富UI界面的细节元素，打破这几年单一扁平化的设计
    • 深色模式风格
      • 外观优雅，时尚，现代。随着我们花在智能手机和笔记本电脑上的时间越来越多，深色模式在用户体验中扮演着至关重要的角色
    • 怀旧复古复古
      • 我们可以通过孟菲斯设计的模式、简单表情符号和原始互联网框架体验90年代的设计效果，选择颜色饱和度较低的颜色，与浓郁饱满的色系碰撞，纹理、色彩、形状、特定的噪点效果结合营造一股复古氛围。 关键词:韵味感、吸引力、怀旧感
    • 人性化表情符号
    • More text 更多的字
      • 通过把文字转换为图形元素，使用大,粗和实验性的排版，并结合整体布局设计，能更直观地让用户发现设计所表达的中心信息。
    • 抽象元素运用
      • 使用抽象艺术的相关元素，元素灵感可以来自于很多历代的抽象艺术风格和艺术家的作品。比如毕加索的cubism，康定斯基的点线面，或者意大利的孟菲斯风格。
    • Emotional Design 共情设计
      • 情感设计是某种数字产品带给用户的感受。它可以极大地影响应用程序或网站的成功，从而直接影响企业的底线。 将情感设计应用于您的网站或移动应用程序的其他一些方法： 1. 在细节处建立连接，比如在一些很小但很重要的地方加入一些细微的动效。 2.通过设计让本身糟糕的用户体验更容易忍受 使用微文案，能让页面或者内容更具相关性 3 .推展个性化体验的UI设计。
    • Simplification 简约化
      • 简约化现在被越来越多的领域所接纳，其核心的特征是简约且富有意义。作为一种视觉设计的新方向，极简主义在20世纪60年代的纽约很受欢迎，当时的新老艺术家都在探索如何将抽象几何元素融入绘画和雕塑艺术里去。所以，极简主义在当时的诸如包豪斯运动、建构主义运动中都留下了浓墨重彩的一笔。极简风并不是简单的做减法，这也是极简设计最棘手的地方。 简约化设计需要做到以下几点: 1.移除无功能的额外元素 2.每屏幕上只能有一个视觉焦点 3.简约的配色方案 4.大胆的使用留白 (也叫负形)
    • Vivid Colors 鲜艳的颜色
      • 当下的我们不断受到来自四面八方的数字信息的轰炸，让设计师更难于创作在杂乱中脱颖而出的艺术品、网站和应用程序。因此，吸引用户注意力的视觉设计与内容的质量同等重要。 鲜艳夺目的色彩方案能让你的设计作品脱颖而出。越来越多的设计师和数字艺术家们，正通过绚丽的糖果色彩创造出大胆而醒目的平面设计作品。