Bsport体育

　　UI=User Interface，即：用户界面。UI设计，也叫用户界面设计，是指对软件人机交互、操作逻辑、界面美观的整体设计。

　　【应用场景】我们日常生活中所用到的：手机、电脑、电视、车载系统、iPad、ATM机、工业中控系统......只要是带有电子屏幕的显示设备，都需要有UI设计。

　　【实际意义】UI/用户界面，就是我们：获取信息、调用设备资源、控制设备运作的一个可视化入口界面。

　　【①图形设计】，对软件产品的外形进行“视觉设计”。由图形设计师（Graphic UI Designer）完成

　　【②交互设计】，设计软件的操作流程、树状结构、操作规范等。通常由交互设计师（interaction Designer）完成。

　　【③用户测试/研究】，测验交互设计的合理性，以及图形设计的美观性。主要通过以目标用户问卷形式衡量UI设计的合理性。比如Flyme、MIUI、IOS系统重大更新都会有相应的反馈通道。

　　要想知道UI是如何产生的我们就要从灯泡说起，因为我认为用户界面就是从一个灯泡，到N个灯泡排列在一起的这么一个过程。

　　这是人类历史上第一台成功的商业微型电脑，那时候所谓的界面就是由物理按钮加灯泡组成，大家可以看看当时的UI/用户界面是什么？所有人可以交互的设备，就像最早的这台微型电脑，主要的操作界面就是按钮和灯泡。所以说，用户界面（UI）在早期还没有显示屏。

　　但是随着发展，灯泡越来越小，排列的越来越密集，不管从显示器大小还是显像质量都有了明显改进所以显示屏就出现了。

　　随着时间的推移，人们发现图像是机器与用户最好的沟通方式，并且图像被广泛的应用于设备与人的信息交流。所以后来出现了GUI，也就是所谓的图形化界面。

　　但是现在几乎所有的信息都是通过显示屏传递，所以就以UI代指图形化界面GUI了。

　　2000年是电脑的开始普及时间，2007年就是iphone的出现。尤其是2007年之后，我们的生活发生了天翻覆地的变化，大家去商店少了，在网上买东西多了，Bsport体育大家吃饭前也不聊天了，都拿着手机打愤怒的小鸟，要不就是或者拍食物。 造成这种现象的发生就是因为智能设备的飞速发展，手机电脑的功能高度集成。也就是说所有的信息基本上都可以从电脑端和手机端接入互联网获取。

　　2012年左右，随着国内智能手机、电脑的进一步普及和网速的提成，互联网热潮又再度爆发。越来越多的企业开始关注用户的实际需求，并把各种需求以互联网产品的形态呈现给用户。而所有的互联网产品都是以app和web展现给用户，那对于用户和商家而言界面则成为彼此之间的沟通桥梁，所以在这个社会背景下交互行业需求量飞速增长。

　　1998年9月－2000年三月，硅谷掀起了一场淘金热，那时候遍地是钱，那是美国互联网爆发的时间点，当时产生了巨大的互联网泡沫，可以类比中国现在的情况。现在美国的互联网行业依然强筋，原因在于互联网行业回归理性，产品的产生严格遵循市场和用户需求，而不是盲目加上互联网。这也就归功于美国院校这几年在设计类专业的大力投入。

　　交互设计、工业设计这些学科都是起源于西方，中国全面引入此类学科较晚，所以目前的教育体系不够完善，国内一类高等院校开设交互设计本科专业的学校不超过15所。所以目前在UI／交互行业的人才需求量极大。

　　一个好的互联网产品除了要有非常好的UI视觉，还需要有给用户带来良好的使用体验，也就是我们所说的用户体验。那什么是用户体验呢？

　　把买回来的菜想想具体怎么做，他吃饭的时候喜欢用刀叉还是筷子，如果用刀叉，那么他的摆放顺序是什么，如何能让他方便实用，口味咸淡如何调节，他会不会口渴，需不需要一个精美的桌布保护桌子还能让他觉得很温馨。让他在整体的使用过程中得到良好的用户体验。

　　大家可以看到图上的饭菜很漂亮，会让你看上去就想吃，并且桌子上的东西一目了然。桌布和食材搭配的很好，摆盘也十分恰当，重要的是还放了一杯水还有盐和油，会让你感觉很贴心。

　　大家看，最后这幅图，如果把这幅静态图脑补成整个就餐过程，那就还会涉及到就餐的顺序，如何与内容进行互动，他们动态的效果和反应是什么等等，所以这些因素也都在影响一个产品带给用户使用体验的好坏。

　　那再次强调一下，大家要记住UX是一个设计过程，而不是在设计之中某个节点需要做的是，他应该贯穿始终，UI则是为了达到一个良好的用户体验的直接展现工具，但是对于一个UI设计师出了要有很强的表现能力外还需要考虑交互逻辑，就是我们说的交互流程图，交互流程是看一个设计师是否具有很好的产品设计能力的一个指标、动态效果或者交互方式就是考察一个设计师是否懂得正确的理解信息传达和用户使用习惯的能力等等。

　　Utility（实用性）一个好的产品首先要具有实用性，简单说就是有用，用户有这个需求并且愿意使用。这就需要前期做很多市场挖掘和用户的需求方面的调研工作。

　　Usability（可用性）可用性是指用户能否简单、高效的完成一个目标，这就牵扯到使用效率，展现方式，交互方式和使用逻辑等，这样我们就需要在产品的制作过程中不断的测试产品的可用性，而使用效率往往是测试的标准。

　　UserInterface（用户界面）则是展示前两者的载体，并且给用户带来最直接的

　　不过大家要注意，现在不管是国内还是国外，大家对上述四点的关系理解会有差异，因为用户体验是一个相对来说比较虚的东西，很难精确量化，所以只要言之有理，都可以接受。但是确定的事，用户体验不是设计的一个步骤，而是一个过程。希望大家能理解吸收以上这些共同支撑了一个好产品。

　　其实你的作品如果可以凸显以上几点，那就已经很好了，但是如果你现在达不到，那最重要的是学习设计方法，建议你们了解下Design Thinking等设计方法，学习设计不能单单的理解为是软件操作，其关键在于在不断实践的过程中经验积累和找到合适的设计方法。作品的好坏不在于是不是给公司做的还是自己做着玩，一个好的产品一定是符合用户需求并且市场针对性极强的。

　　往往在做设计的时候大家会感觉到界面设计完了，总觉得哪怪怪的，一般这种时候都是因为在视觉上没有区分每个模块的层级和主次。

　　首先你要理解UI宏观上虽然看似是一个平面，但微观来看其实他也是立体的，主要体现的就是层级关系。所以在我们制作UI的时候就要注意这三个纬度。X和Y轴主要是用来表现顺序，Z轴则是来标示层次。一般大家在制作UI的时候都会考虑X和Y，但会忽视Z轴的存在。

　　既然有了Z轴就会有高低的不同，这主要反映出了内容的层次。在展现的时候也相应的可以用阴影来展现。大家先来感受下阴影，阴影是表示不同模块层级的直观表现形式。

　　我们再来看看如何正确的表示内容模块的高低、层级和阴影。如果我们换个角度来看就会对此有了更直观的感受，内容的高低由阴影的大小表现，阴影的大小则反映内容层级的高低。

　　对于初学者来讲，阴影的大小的使用会成为你心里的阴影。那我们就看一下这种情况有没有发生在你身上，阴影大小区分不大会造成方向效果，尤其是有选择恐惧的人，他会反复的调节阴影的大小，总觉得不舒服。那么也就是说阴影一定要大胆，而不要让阴影失去了价值。大胆使用高度的差异化

　　大家看这个图，这样看上去是不是层级关系就很明显了，一般刚开始做UI的同志经常会认为内容最重要，然后把内容模块的阴影弄的非常大，但是实际效果则恰恰相反，那样会让人感觉内容要溢出来了，一般来说内容的体量最大，也相对丰富，所以内容的层级就比较靠下，这是要突出整体产品的功能，大家脑补下，如果把图中的黄色按钮阴影调小，或者没有那会是用户注意不到这个功能性按键，并且有可能认为他是内容的一部分。所以可见阴影的大小在UI上面的重要性，这也是一般初学者经常犯的错误。

　　今天跟大家分享了我对UI和互联网产品的理解，希望大家能多接触些设计方法和设计思维的东西，因为只会软件的只能称为美工，作为一个设计师，必须慢慢培养你的设计方法和设计思维。希望今天分享的东西能够给大家带来帮助。

　　UI 设计中的 UI 是英文User Interface的缩写，连起来就是用户界面设计，用户界面是用户与数字设备或产品之间发生交互的界面，例如智能手机上的触摸屏，或者是咖啡机上选择咖啡种类的触控板，它由两个部分组成：

　　视觉设计，用于传递产品的外观和感觉；交互设计，是元素的功能和逻辑组成。UI 设计的目标在于创建一个能够让用户轻松、高效且愉快地与产品交互的界面。

　　在进行 UI 设计时，首要的是考虑用户的视觉体验，一个优秀的视觉设计，应尽量减少用户在与产品交互上所付出的成本，帮助用户轻松实现他们的目标。

　　设计师可以使用多种用户研究方法（用户访谈、焦点小组、问卷调查、可用性测试等），来了解设计的界面最终面对的目标受众，确保在设计中引入适合受众的视觉语言，提高产品的易用性，避免给用户带来疑惑。在实际执行过程中，视觉设计涵盖产品界面所有视觉交互元素的设计，包含按钮、图标、间距、排版、配色方案和响应式设计。

　　至于交互设计，主要在于设计用户的操作流程、交互逻辑、交互时触发的反馈或动效，具体而言，UI 设计师需要思考用户可能遇到的所有单个屏幕和触点，确定点击按钮弹出的页面、向下滚动页面或在图库中滑动所使用的动画效果。

　　单纯看理论性的东西，可能会觉得有些「虚」，不够接地气，我们也可以结合UI 设计中需要用到的软件工具，从实践练习的角度，对 UI 设计形成一个更全面的认识。在 UI 设计工作流中，UI 设计师既要承接产品经理、交互设计师的产品需求，又要对接研发以推进产品的最终实现，所以传统的 UI 设计工作流，需要使用很多工具，UI 设计师要完成一个项目，往往需要在多款设计工具上来回横跳：

　　不过随着 UI 设计工具的发展，诞生了不少 All in one 的一站式工具，其中就有一款名为Pixso的 UI 设计软件，集原型、UI、交付和管理于一身，替代了原先需要用到多款软件的工作流，真正做到“一个团队一个工具，一个项目一个文档”！

　　首先，Pixso 是一款基于云端的 UI 设计工具，无需下载客户端，支持导入 Sketch、SVG 等文件，随时可以迁移至 Pixso 进行设计。

　　Pixso 拥有灵活的钢笔工具，不同于 Sketch 只能在线上增加点或移动单个点，在 Pixso 中移动绘制的矢量线条，所有连接的点会自动跟随。

　　在 Pixso 中，不仅支持一键商用海量全球知名大厂设计资源、快速绘制高保真原型，还能设置页面跳转、转场与时长等原型动效。

　　同时，设计组件和样式都可以复用，设计师修改后原始组件即可同步更新副本组件。在进行版本迭代的时候，也只需要修改组件和样式，不用一切从头再来。

　　团队内部可以创建一套共享的资源库，各个成员制作的组件可以放到一处，统一管理设计资源，并形成产品独有的设计规范。

　　后续如果有新成员加入设计团队，再也不需要将资源库手动分发给新成员，直接邀请加入团队，就可以看到内部共享的所有资源啦。( • ̀ω•́ )✧

　　传统的设计研发交付，流程比较繁琐，以 Sketch 为例，需要先从 Sketch 导出设计图，再将文件导入第三方工具 Zeplin，才能实现自动切图和标注。

　　而且使用 Sketch + Zeplin 进行交付的工具流，也存在不少缺点：Sketch只支持 macOS 系统，与 Windows 用户无法很好地协作；Zeplin 的服务器在国外，有时会由于网络问题导致无法正常使用。

　　现在，产品研发场景使用 Pixso只需要一个链接，就可以同时完成预览、评审、标注查看和切图。

　　除了以上，Pixso 还具有自动标注功能，标注会按更新的设计稿自动生成，研发可以自动获取代码并复制，有效缩短开发周期。设计师只需生产一个图标，研发就可以直接导出多倍图（x1、 x2、x3...），大大提高工作效率！

　　✔线上协作，云端储存，减少设备运行、储存成本✔团队资源库，提升工作效率，统一项目视觉效果✔一键交付，节约沟通成本和信息误差✔进度实时查看，自动代码交付，让项目进度透明化

　　看完前面的 UI 理论和实战环节会用到的 UI 设计工具，不知道你对「什么是 UI 设计」是否有了更清晰的认识呢？

　　讲UI设计一定离不开互联网，因为UI设计本身属于互联网研发的一部分，是技术的发展（电脑界面、系统的不断革新）逐渐催生了UI设计行业。

　　一直到现在，UI设计的岗位职责都在随着互联网技术的革新，发生着变化，比如目前UI全链路设计师的发展趋势，以及越来越大的屏幕（手机）对于界面设计和交互的挑战等，很难去一概而论界定UI设计真正工作中的职业范畴。

　　如果非要从概念界定理解，UI设计通常指的是图形用户界面设计，重点在于信息准确、清晰、有效的视觉传达。

　　从广义上来讲产品的功能架构、页面布局、内容信息也都属于UI的范畴。但是实际上前面那些工作都会去交给交互设计师来完成，UI设计师主要负责视觉部分，包括：产品视觉风格的定义、图标设计（包括 App 启动图标和页面内部的具体图标）页面设计（包括banner、各种控件元素、特殊页面、特殊状态、市场图等等）、视觉规范制定甚至设计系统。

　　而交互设计师和UI设计师都属于以UI设计能力为核心的互联网设计岗位，只是具体的岗位职责划分不同。

　　UI设计师更注重关注产品视觉呈现的效果，交互设计师更注重关注用户与产品的交互、交互的流程和信息架构等。

　　但UI设计只关注产品视觉层面，在目前的岗位要求下，是完全不够的。大家可以去网上，查一查岗位的要求，你会发现，UI设计师除了视觉能力，还需要你了解设计协作、业务能力，还要懂交互，懂产品。毕竟不了解用户体验和用户研究，对于设计背后的原理很难阐释清晰，比如每个按钮的功能，如何返回上一级等。

　　器的层面，即：要掌握该岗位的各种软件工具，比如PS 和 Sketech 等软件，这是武器；

　　术的层面，即：要掌握该岗位的各种体系化的方法，比如信息架构、可用性测试、卡片分类法等这是战术；

　　道的层面，即：要具备各种底层思维，比如以用户为中心的思想、各种启发式原则，这是战略。

　　对于UI设计新手来说，了解基本的设计规则和理论，相当于要掌握UI能力的“术”。“术”层面的学习，可以先从UI设计的工作内容去做具体了解。

　　这是因为UI设计属于软件/产品项目中流程中的一部分，有具体设计过程，每个设计阶段都需要在掌握相应理论和规则的基础上才能完成，比如视觉层面设计，需要了解UI设计的基础知识和平台设计规范，才会有符合规范的视觉稿的输出；需求分析需要了解商业分析、用户调研等，才能正确做好需求分析。

　　最后关于UI设计“道”层面的学习，这里大家推荐参加知群的5天免费产品设计训练营，学习UI设计的前景和规划，帮助你了解阿里、腾讯的设计工作方法论，更好的入门或者提升。在这里了解详情和报名：

　　现在很多的大学都想重事轻松，薪资高的互联网产业，而从事互联网的产业有，UI设计、H5前端开发、JAVA、Python、大数据、云计算，物联网、软件测试等，在纵多的技术职业中，UI设计是最简单，且最容易入门，而且有一定经验者，薪资过万还是没有问题的。

　　刚才从大学出来的大学生，怀着一颗澎湃的心，在工作有很多疑问，专业也不对口更是零基础，现在学UI设计还来得及么？都要学哪些东西？从哪里开始学UI？

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

　　UI设计主要从三个方面进行研究及设计，他们分别是：用户研究、交互设计、界面设计。

　　通俗易懂地讲，如果是一个人，穿着打扮便是界面设计，举止行为便是交互设计，更多地研究如何更好地和机器打交道。

　　今天就跟大家分享一份系统的UI/UE设计学习教程路线图，零基础也可以无压力的走进UI设计，学习UI设计！

　　到底要怎么如何去学习好UI设计呢？在看过上面的学习路线图之后，相信大家更有一个直观的了解，不是懵懵懂懂不知从何入手！