20230220学习总结02

UI原型设计

以下答案来自知乎：

1.首先了解 UI 设计的基本概念

包括用户体验，视觉设计，交互设计，用户界面设计等。

2.学习 UI 设计的基本原理

包括色彩，空间，结构，对比，简洁，可用性，可访问性等

3.学习 UI 设计的工具

包括 Adobe Photoshop，Adobe Illustrator，Sketch，Axure 等

4.学习 UI 设计的流程

包括调研，原型设计，视觉设计，交互设计，用户测试等

5.实践 UI 设计

可以参加 UI 设计比赛，参加 UI 设计实习，或者自己设计一些小项目。

====== =====================================================

学习UI设计有下几点方法：

1、明确个人学习UI的目的；

2、掌握基础的图片处理软件操作；

3、多收集UI作品；

4、锻炼自己的发散思维；

5、多参加一些网上公开课的学习；

6、提升自己的素描技巧。

========================================

可以自学，建议通过以下几种方式：

1、学习软件知识

包括掌握Photoshop、Axure、Illustrator、sketch、蓝湖等常用软件。另外，制作原型，界面，图标制作，素材制作，切图等等相关步骤的软件都需学会。

软件是是设计师的基础，新手刚入门可以先从这点入手。娴熟的技法，是完美展现设计作品的必备条件，要熟练掌握好。

2、临摹作品

对于刚入门的UI设计师来说只要去图库网站找一些素材，借助工具进行修饰即可，其实这只能锻炼你的借鉴能力，当你的技法娴熟到一定程度，就可以尝试临摹。通过临摹，一则用来强化技法层面的能力，二来也能提升初学者的创新能力。

临摹的内容，可以有两方面选择：一种是系统自带的图标，另一种则是行业牛人的设计作品，捉摸他们的设计风格、思想和细节，都能加深对设计的认识

3、掌握平面设计理论知识

包括要掌握构图、排版、色彩和图形的基础理论知识。学习的途径毋庸置疑我们首选从书本获得！

4、锻炼手绘能力。

成为一个优秀的UI设计师需要一定的手绘能力，为什么？首先，在纸上的动手能力比在软件上完成较快速，效率有一定提升。

另一方面，通过手绘，能突出自己创作的与众不同，甚至能够从“乱涂乱画”中得到灵感。没有美术基础的小伙伴也不要太担心，这些后天可以勤加练习弥补的。

=====================================================================

进阶版

UI设计师是一个非常需要综合能力的职位，需要具备多方面的技能，以下是一些UI设计师需要的技能：

设计思维：UI设计师需要拥有创造性的思维，能够通过对用户需求的理解和分析来创造出用户体验优秀的产品设计。
视觉设计：UI设计师需要具备基本的美学和视觉设计能力，包括对色彩、排版、图标设计、构图、配色等的理解和运用，能够通过设计语言为用户提供优美的视觉体验。
用户研究：UI设计师需要理解和分析用户的需求，通过用户调研和数据分析等方式来了解用户群体的喜好和习惯，以便更好地设计用户体验。
交互设计：UI设计师需要了解交互设计的原理，能够设计出易用、直观的交互流程，提高用户体验。
技术能力：UI设计师需要对Web、移动端等前端技术有一定的了解，能够将自己的设计转化为开发人员可以实现的具体实现方案。
项目管理能力：UI设计师需要协调沟通，具备较好的项目管理能力，能够按时交付高质量的设计工作。
学习能力：UI设计师需要持续关注设计行业的新动态，不断学习新技术和新理念，保持自己的设计能力与市场需求的同步。

=======================================================================

一、UI是什么？

UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。

UI的高级形态可以理解为User Invisible。对用户而言，在这一层面UI是“不可见的”，这并非是指视觉上的不可见，而是让用户在界面之下与系统自然地交互，沉浸在他们喜欢的内容和操作中，忘记了界面的存在（糟糕的设计则迫使用户注意界面，而非内容）。这需要更多地研究用户心理和用户行为，从用户的角度来进行界面结构、行为、视觉等层面的设计。大数据的背景下，在信息空间中，交互会变得更加自由、自然并无处不在，科学技术、设计理念及多通道界面的发展，直至普适计算界面的出现，用户体验到的交互是下意识甚至是无意识的。

用户研究工程师一般是心理学人文学背景比较合适。

综上所述UI设计师就是：软件图形设计师、交互设计师、用户研究工程师。

设计方向

UI是用户界面，是英文User和interface的缩写。用户与界面之间的交互关系

可分为3个方向，他们分别是：用户研究、交互设计、界面设计。

用户研究

用户研究包含两个方面：

一是可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；

二是通过可用性工程学研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。

用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。

用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。

他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准

交互设计

这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

界面设计

在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

设计规范

一致性原则坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。

字体

-保持字体及颜色一致，避免一套主题出现多个字体；　

　-不可修改的字段，统一用灰色文字显示。

对齐

　　-保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。

表单录入

-在包含必须与选填的页面中，必须在必填项旁边给出醒目标识（*）；　

-各类型数据输入需限制文本类型，并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等，在用户输入有误时给出明确提示。

鼠标手势

-可点击的按钮、链接需要切换鼠标手势至手型；

保持功能及内容描述一致

-避免同一功能描述使用多个词汇，如编辑和修改，新增和增加，删除和清除混用等。建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。

准确性原则

使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。

显示有意义的出错信息，而不是单纯的程序错误代码。
避免使用文本

输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用。

使用缩进和文本来辅助理解。
使用用户语言词汇，而不是单纯的专业计算机术语。
高效地使用显示器的显示空间，但要避免空间过于拥挤。
保持语言的一致性，如“确定”对应“取消”、“是”对应“否”。

可读性原则

文字长度

文字的长度，特别是在大块空白的设计中很重要，太长会导致眼睛疲惫，阅读困难。太短又经常会造成尴尬的断裂效果，断字的使用也会造成大量的复合词，这些断裂严重的影响了阅读的流畅性。

空间和对比度

每个字符同线路长度，间距也是重要的。所以每个字符之间的空间至少等于字符的尺寸，大多数数字设计人员习惯选择一个最小的文字大小的150%为空间距离，这就可以留下足够的空间。当每一行中读取大段的文字，且线路长度过多或线之间的空间太少，都会造成理解困难。

对齐方式

无论是在文本中心，还是偏左，或者是沿着一个文件的右侧对齐，文本的对齐相当重要，可以极大地影响可读性。一般而言，文本习惯向左对齐，因为它反映了你的阅读方式 – 从左至右。你熟悉每一行开始和结束的地方。

布局合理化原则

在进行设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。

菜单

　　-保持菜单简洁性及分类的准确性，避免菜单深度超过3层。　

　-菜单中功能是需要打开一个新页面来完成的，需要在菜单名字后面加上“…”。【只适用于C/S架构，B/S请无视】。

按钮

　　确认操作按钮放置左边，取消或关闭按钮放置于右边。

功能

　　-未完成功能必须隐藏处理，不要置于页面内容中，以免引起误会。

排版

　　-所有文字内容排版避免贴边显示（页面边缘），尽量保持10~20像素的间距并在垂直方向上居中对齐；各控件元素间也保持至少10像素以上的间距，并确保控件元素不紧贴于页面边沿。

表格数据列表

　　-字符型数据保持左对齐，数值型右对齐（方便阅读对比），并根据字段要求，统一显示小数位位数。

滚动条

-页面布局设计时应避免出现横向滚动条。

页面导航（面包屑导航）

-在页面显眼位置应该出现面包屑导航栏，让用户知道当前所在页面的位置，并明确导航结构，如：首页>新闻中心>欧科智能招商服务平台正式发布，其中带下划线部分为可点击链接。

信息提示窗口

-信息提示窗口应位于当前页面的居中位置，并适当弱化背景层以减少信息干扰，让用户把注意力集中在当前的信息提示窗口。一般做法是在信息提示窗口的背面加一个半透明颜色填充的遮罩层。

系统操作合理性原则

尽量确保用户在不使用鼠标（只使用键盘）的情况下也可以流畅地完成一些常用的业务操作，各控件间可以通过Tab键进行切换，并将可编辑的文本全选处理。
查询检索类页面，在查询条件输入框内按

回车应该自动触发查询操作。

在进行一些不可逆或者删除操作时应该有信息提示用户，并让用户确认是否继续操作，必要时应该把操作造成的后果也告诉用户。
信息提示窗口的“确认”及“取消”按钮需要分别映射键盘按键“Enter”和“ESC”。
避免使用鼠标双击动作，不仅会增加用户操作难度，还可能会引起用户误会，认为功能点击无效。
表单录入页面，需要把输入焦点定位到第一个输入项。用户通过Tab键可以在输入框或操作按钮间切换，并注意Tab的操作应该遵循从左向右、从上而下的顺序。

系统响应时间原则

系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：

2~5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作；
5秒以上显示处理窗口，或显示进度条；

一个长时间的处理完成时应给予完成警告信息。

二、原型设计是什么？

原型：用线条、图形描绘出的产品框架，也称线框图。

设计：综合考虑产品目标、功能需求场景、用户体验等因素，对产品的各版块、界面和元素进行的合理性排序过程。

原型设计的重要性是怎样？

产品阶段：Idea→需求采集→功能结构→原型设计→产品需求文档（PRD文档）→Roadmap

原型设计在整个产品流程中处于最重要的位置，有着承上启下的作用。

原型设计之前需求或是功能信息都相对抽象，原型设计的过程就是将抽象信息转化为具象信息的过程，之后的产品需求文档（PRD）是对原型设计中的版块、界面、元素及它们之间的执行逻辑进行描述和说明。

原型设计的作用有以下几点：

1、原型是需求和功能的具象化表达，所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路。

2、因为原型相较于UI稿来说修改更方便，所以原型能提高产品经理的功能设计没通过评审时返工的工作效率。

1、手绘原形（草图）

所需工具：铅笔、橡皮、白纸

铅笔相比于中性笔的好处在于方便修改，白纸的好处在于安静的随心所欲，不过对于移动产品的设计来说，本人倾向于使用印有手机框架的白纸上绘制，以便于快速进入情景状态，也能对首屏的界面分配做到心中有数。

PS：给草图（App）拍照，配合POP使用，也可以实现交互效果，有兴趣的童鞋可以试下。

由于草图的非正式性，多使用原型设计的前期论证阶段（功能设计可行性），个人也比较喜欢先画草图（纸上推演）再画工具原型（完善）。

2、工具原型

所需工具：Axure RP（推荐）、Justmind（App）、Keynote（最近比较火，适用于Mac OS）

多说一句，凡是软件（不论PC或是App），我都建议用最新版，产品经理更应该如此。

Axure RP无论是PC端产品经理还是App产品经理都会比较熟悉，通过工具绘制的产品原型已经比较正式，如果添加了色彩和交互动作（高保真），可以与最终产品形态无异。

在这里有必要说一下原型有没有必要做到高保真的状态，个人观点是：没有需要，就没有必要；时间宽裕，做交互但不加颜色。

原型的目标在于清楚的表达产品的设计理念和功能的执行逻辑，所以我认为能够达到这个目标的原型都是合格的，在原型中加入色彩和交互的目的无非是让产品经理与技术的沟通更加顺畅。

三、UID

U I设计师简称 UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。UI 设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计，是目前中国信息产业中最为抢手的人才之一。

20230220学习总结02相关推荐

JavaWeb黑马旅游网-学习笔记02【注册功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
Servlet和HTTP请求协议-学习笔记02【Servlet_体系结构与urlpartten配置、HTTP请求协议】
Java后端学习路线笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
Tomcat学习笔记02【Tomcat部署项目】
Java后端学习路线笔记汇总表[黑马程序员] Tomcat学习笔记01[Web相关概念.Tomcat基本操作][day01] Tomcat学习笔记02[Tomcat部署项目][day01] 目录 ...
XML学习笔记02【xml_解析】
Java后端学习路线笔记汇总表[黑马程序员] XML学习笔记01[xml_基础.xml_约束][day01] XML学习笔记02[xml_解析][day01] 目录 03 xml_解析 xml_解 ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
JDBC学习笔记02【ResultSet类详解、JDBC登录案例练习、PreparedStatement类详解】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...

20230220学习总结02

20230220学习总结02相关推荐

最新文章

热门文章