新生代UI设计

互联网产品上线步骤

• 研究》概念 Demo》产品立项PM》交互设计UE》视觉设计UI》前端后台开发RD》测试走查QA》上线》产- 品迭代》研究
• 流程：方向》调研》用户研究》分析竞品》思维导图》低保真(Axure\墨刀 》（检查层次问题）》- Sketch和PS画高保真》输出规范
• 产品经理PM（Product Manager): 项目的核心，负责规划产品方向，市场定位，产品功- 能，上线时间 ，产品利益。一般在工作中起到发起和协调的作用，负责整合资源和规划项- 目。
• 体验设计师UE：关注用户使用前、使用中、使用后的整体感受，包括行为、情感 、成就等。
• 研发工程师 RD: 前端开发 + 后台人员
• 运营 OP：从内容建设，用户维护，活动策划三个层次来管理产品内容和用户。负责已有产品的优化和推- 广，运营UI设计师空缺大。
• 测试QA ：负责产品的错误排查，负责产品的多平台适配，兼容性测试。

UI

• GUI 图形设计师
• IXD交互设计师
• UE / UX 用户体验

什么是UI设计？

• 开发流程：战略层(老板)→→战术层（产品经理）→→结构层（交互设计师）→→表现层（UI 设计师）→→技术层（开发工程师）
• 设计目的：UI设计的核心目的就是把产品的商业价值最大化
• 技术属性：科学与艺术结合的综合技能

1、UI 、UX 、LXD、 UR 了解

• UI用户界面的设计：界面交互的屏幕，通常指用户的操作界面，包含网页、移动APP、智能的穿戴设备，- 是用户与系统进行交互和信息交流的媒介，主要是以视觉的形式展示。

• UX / UE: 用户体验是产品本身以外给用户带来的感觉，是用户在使用产品过程中建立起来的一种纯生主观感受。人们对产品的体验可以通过外观，声音，故事，互动和服务来获得，在社会中的比重大一些

• LXD: 交互设计师——交互设计通常是指用户与机器互动的过程，注重的是用户的心理和人体工程学等方面的内容。一个好的交互方式是可用、易用，让产品更容易被理解和用起来更顺手。

• UR：用户研究, 是一种理解用户，经常听到的问题，“我们的用户是谁？”基本的工作就是访问用户，用户调查研究市场数据等

UI与UX工作的区别

UI:视觉设计、布局设计、图标设计、设计系统、高保真界面设计
UX：以人为中心、可用性测试、用户故事、用户研究、低保真原型设计

交互设计

• 交互设计师：要善于表达，以网页语言表达产品 所要告诉用户的信息，同时显示用户的操作功能。网页上的文字就应该由交互设计师来编写，产品经理更了解产品，然而交互设计师才是最懂得如何向用户表达的人。

• 工作内容：对产品进行行为设计和界面设计，WEB的操作以点击为主。

• 页面布局：内容展示等众多界面展示。

• 语言表达能力：要多花心思，较好的语言表达能力是与同事沟通的必要素质，也是一种能力的体现。

• 日常工作能力：1、客户访谈2、现场研究3、头脑风暴4、撰写文档5、制作原型以及产品测试。

2、屏幕像素、分辨率了解

• 分辨率：显示器上所显示的像素数量
• PX（Pixel）像素是屏幕上组成的最小单位，它是没有实际的物理尺寸的（没有固定的大小。）分辨率不同像素的尺寸就不一样
• DPI: 像素密度，每英寸上的点的数量，最初用于衡量打印物上的每英寸的点数密度，当DPI的概念用于- 在计算机频幕上时，就应称为PPI：PPI =（v根号(长度像素数的平方 + 宽度像素数的平方））除以屏幕尺寸
• DP：设备独立像素，是安卓系统开发时用的抽象单位，它和设备的屏幕像素密度有关，根- 据不同的分辨率，与px有不同的应对关系。dp与 / px的换算公式：dp * ppi / 160=px

3、新生代UI设计的职责

• 视觉设计
  一、风格定位（最讲究创造力的设计）：分析并设计出用户对该产品期望的产品质感。 两个关键点：1.抓准方向（需要 洞悉产品的本质，推导出用户内心最根本的愿望）、2.极致技术。
  二、产品迭代：完善产品的过程
  三、Banner：是指挂在网页上的横幅广告（主要是宣传产品和活动）
  四、 专题活动：以某个主题来包装一些网络活动，来达到某种商业效果，通常是为了促销产品或者拉新盘活用户
• 团队交接：切图标注
• 平面设计
• 一般ui设计师的工作都会视当前的公司工作有关，一般都会：负责web端和移动端的产品界面视觉设计（有时会涉及交互设计）需要掌握的设计能力包括版式设计、icon设计、插画- 设计、动效设计，还有活动推广设计、H5、平面设计等。

4、UI设计的风格演变

• 拟物化设计：模拟真实物体的材质、质感、细节、光影等。
• 扁平化设计：去除多余的透视、纹理、渐变效果的元素，在设计上强调了抽象、极简和符号化。
• 轻拟物设计：轻微而不厚重的拟物效果，就是介于拟物化和扁平化之间，既没有太多逼真的材质- 感，但是比纯扁平化多些细节。
• 多色 / 撞色设计：一个元素或一个画面上使用多种的颜色搭配，或者互补色相撞，使得视觉感更加- 强烈。（以前的抽像话的感觉，更年轻时代的演变）
• 卡片式设计：随着Material Design的流行，卡片式UI已经成为目前设计的一部分；每一张卡片里- 都独立包含该元素的信息。
• 无边框设计：把用来划分区域的边框和边线去掉，界面上可以通过距离的分割，各个区域的区分还- 是清晰可读的。

5、UI设计的成长路径

• 软件技术：UI设计类相关软件
• 临摹阶段：直接照着原图画--训练对参数的理解
• 积累作品：多做作品，有特色和展示自己的水平
• 设计理论：看别人的排版自己调整--训练对布局的敏感度，看别人的颜色自己调整--训练对颜色的敏感度

6、UI设计需要养成的习惯

• 素材的储备：dribbble\behance\Pinterest\站酷、花瓣、ui中国、腾讯CDC, 其他，还有书籍等。
• 设计思维：时刻留意生活中的设计感受，提升自己的设计敏感度，并思考这些作品背后的原理，提升设计的领悟力。
• 行业了解：关注设计行业，学习更多的专业知识，关注互联网行业，帮助你开拓视野。

UX和设计思维导论

1.UX的演变

• 能够实现想要的功能
• 以人为本的宗旨，考虑人的情感，对这些情感上增加愉悦感减少挫败感。
• 瞬息万变的环境：我们要面临着一系列新挑战，将所有的内容捆绑在一起提供无缝的体验。

2.UX设计的通用原则

• 视觉语言：在视觉上创建的所有内容均是由一系列核心元素组成：点线面通过组合这些元素，我们可以创建图标，组件，插图，图表，模式等。

• 内容和版式：
  （1）内容要传达的信息，用什么样的文案来正确表达信息。
  （2）版式采用醒目的无衬线字体吸引人们的目光，将其与经典的衬线体结合使用可帮助提高可读性。强大的层次结构可帮助读者在页面快速找到想要的内容。对比鲜明的红色强调了单色的调色板，为页面增添一些亮点。

• 内容与版式技巧：
  1.当开始进行新项目时，请在项目开始的时候花一些时间选择好传达的内容文字。这样可以确保您选择的文字清晰，并能一致的传达品牌的效果。
  2.确保每个页面或屏幕上都有清晰的标志性用语。问问自己：“用户想要实现什么？”并在设计时牢记一点。使用简洁明了的语言，将大大的改进您的设计，并且您的用户会更加快乐。
  3.考虑排版时，少即是多，配对字体并不容易。如果您只是刚刚起步，请找到一个“字体家族”并围绕它建立。考虑标题和正文的对比字体。比如，网页上衬线字体很适合用于正文内容，这可以与无衬线字体的标题和副标题形成对比。

叙事设计

• 作为设计师：我们要考虑的两个方面：速度、叙述的发展速度和缓慢程度；节奏，一系列看屏幕上的节奏或屏幕上的元素，为了创建引人入胜的故事并把用户吸引到内容中，两者都很重要。
• 叙事设计技巧：
  1.当您开始设计一个新项目时，重要的是要考虑叙述的结构和节奏。对内容的结构和逻辑分组进行一些思考。进行纸质原型制作时通过用户的叙述来感受用户流量的最快方法。低成本的纸张非常适合在转向软件工具之前建立骨架。
  2.问问自己：每一个页面需要传达的最重要的信息是什么？建立好内容后，您便可以有效的交付内容。请记住用户的通常时间不多，并且在大多数的情况下都希望快速交付的关键内容。
  3.一切都是故事，请问自己：您在手头的项目中讲的是什么内容。

3.UI设计的（用户体验）法则

• 希克定律：强调需要最小化的选择以减轻客户的认知负担并帮助推动决策。
• 菲特定律：如何通过仔细调整界面元素的大小和位置赖简化交互提供的宝贵意见。页面上的大小影- 响用户的准确和使用的时间。文字的比例的大小，标题和正文的关系区分。
• 米勒定律：强调“分块”可简化复杂任务的好处。列如：银行卡的卡号分几个数在一组。

APP开发

• 1、消费人群定位
• 2、需求分析
• 3、产品定位
• 4、产品特色
• 5、市场分析 / 竞品分析
• 6、产品的结构图
• 7、产品的交互结构
• 8、UI界面设计稿 / 设计阶段
• 9、开发实现、测试