界面设计

UI界面设计教学重点

UI（User Interface）界面设计是一门将人机交互原则与美学设计原理结合的学科。它关注如何合理地设计和组织用户界面，让用户在使用软件、应用或网站时能够获得良好的用户体验。在UI界面设计的教学中，有一些重点是非常关键的，下面将详细介绍这些重点。

1. 用户研究和需求分析

UI界面设计的核心在于用户体验，所以在教学中首要的重点是用户研究和需求分析。了解用户的需求和行为习惯，能够帮助设计师更好地为用户提供满意的界面设计。通过调研、观察和用户测试等方法，设计师能够了解用户的期望和需求，从而有针对性地进行界面设计。

2. 色彩和视觉设计

色彩在界面设计中起到非常重要的作用。通过合理选择和搭配颜色，能够给用户带来愉悦的视觉体验。教学中要重点教授色彩搭配的原则和技巧，帮助学生学会使用颜色设计界面，以表达品牌形象和情感色彩。

除了色彩，视觉设计也是UI界面设计的重点。设计师需要合理运用空间、比例、对比度等视觉元素，使界面具有良好的平衡感和层次感。教学中要注重教授视觉设计的原则和方法，让学生掌握视觉设计的技巧和应用。

3. 布局和信息架构

界面布局是UI界面设计中不可忽视的一部分。布局决定了界面元素的排列和组织方式，直接关系到用户的浏览和操作效率。教学中要重点教授布局的原则和方法，让学生学会合理地组织和安排页面内容，使界面具有良好的可读性和遵循常规的浏览逻辑。

信息架构是界面布局的基础，它指的是如何组织和呈现界面上的信息。教学中要重点教授信息架构的设计和规划，帮助学生学会创建清晰、明了的界面信息结构，让用户能够迅速找到需要的信息。

4. 交互设计

交互设计是UI界面设计中的重点和难点。教学中要注重培养学生的交互设计能力。学生需要了解用户的操作习惯和行为模式，设计出符合用户习惯的交互方式。教学中要重点教授交互设计的原则和方法，帮助学生学会设计直观、易用的交互界面，提升用户体验。

5. 响应式设计和多平台适配

更多课程内容：百度UE讲堂 UI界面设计-百度客户端界面设计总结 今天为大家带来的课程是——百度传课客户端KK4.0首页设计。 在设计的过程中和设计之后我们应该做些什么，才可以更好的与其他设计师、工程师进行沟通跟衔接。 第一点，界面设计的整体思考方式。UI界面设计与单纯的视觉设计会有一些不一样，考虑的点会比较的系统。第二点，设计稿上应该体现出什么，才会让你跟你的下游更好过。这里的下游指的是FE跟RD同学，也就是我们平常所说的前端跟发开。在设计过程中，我们设计稿上除了体现必要的设计之外，还应该放些什么呢？ 设计界面的思考方式，在此之前，我们先了解一下设计流程跟分工： 在我们UI的上游有PM和UE，还有我们下游的FE和RD同学，这些是在我们整体设计流程中与设计同学接触比较多的一些。 更多课程内容：百度UE讲堂 相信大家一定听过一句话：形式追随功能。这里的功能指的就是PM，他们负责产品需求也就是功能的探索，形式指的是UE交互同学，他们负责根据产品需求来进行形式上的合理布局跟合理交互。在二者完成之后会交付我们进行设计，我们设计之后就会把这些东西交给前端开发同学进行实现。 我们设计的思考方式应该是什么呢？只是做美丽的设计好看的设计就可以吗？其实不然，这里我举一个例子，如果设计师就是裁缝的话，我们应该做一件合身且美丽的衣服，而不是只美丽。我们好好思考一下这句话，这里的合身指的就是我们设计跟产品的交互不是单纯好看，只有满足以上这些点的设计才是一个合格的也是一个好的设计。除此之外我们还应该考虑整个设计的可实现性，还有在整体的体系设计当中的通用性。这些就是我们应该拥有的UI设计的思考方式。 下面让我们看一下百度传课登录界面的界面分析。 左侧是KK登录窗口的一个线框图，右侧是我们的设计结果。 可以看到线框图当中大部分元素在设计结果当中有所保留，是因为他关乎于功能，我们不能轻易拿掉。面积最大的蓝色区域是一张底图，这个需求来源于运营，一方面我们希望在节日的时候做一些烘托节日气氛的底图，另一方面运营希更多课程内容：百度UE讲堂 望在实现变现的时候，把这块做成广告位。这个区域的大小是由设计师来控制的，所以最后在设计结果中我们可以看到我们把它变大了。 第二个关闭菜单、缩小和KK这些常规按钮和名字的摆放位置。 第三个就是用户头像和用户名称，这两个元素在登录界面设计当中已经司空见惯了，他要表达“我”的意思以及体现用户的归属感，所以在最后的设计结果当中可以看到我把它放的很大。 最后一个“正在登陆”这几个文字，它的本质其实是一个loading，在设计结果当中我把它变成了一种图形化的语言，也就是这个圆形，它会一直转呀转，表示正在登陆。之所以把文字变成图形有两个原因，第一这个界面也就是这个元素的上个界面的相同位置也是一个圆形，它在这种交互变换的过程当中同图形会比较平滑，视觉会比较舒服。第二个就是正在登陆这几个文字不能很好的表现一个状态，给人感觉冷冰冰的。可以看到在保留很多元素的同事也拿掉了两个元素，第一个就是注册，在用户登录的过程当中用户很少进行注册，这两个行为其实在本质上是相反的，所以把它拿掉。第二个可以看到在底图上面有三个小点，运营想把它做成轮播图来放更多的图片内容进行变现，但是我们在用户研究的时候发现，第一个图片太多的时候会增加用户的认知负担反而不如一张图好看美观也更实用。第二个图片的这种轮播我们不能保证它图片的色调名是一致的，所以它有可能对用户造成一种视觉的刺激，基于以上两点，我们拿掉了这个功能。 可以看到对于元素的中解读的分析还有它这种功能的深入理解是有益于我们设计的。 在这里和大家分享两个小技巧：1、拿到需求的第一步是分析，而不是直接做。有的时候如何设计就在这个分析结果中自然而然体现出来2、视觉化的语言，往往比一堆文字看着更让人舒服。但是它有基础，就是你所用的这个图形一定要是表意明确的不能让人产生歧异。 在设计过程当中元素的摆放我们采用了一种黄金分割的视觉理论，黄金分割有很多种，在这里我们采用的是1：1/2和√5/2的比例。 更多课程内容：百度UE讲堂 可以看到用户头像跟用户名称这个重要的元素是和比例当中进行底部对齐的，这样可以让视觉看着更加舒服。在这里分享个小技巧：从黄金分割法入手布局页面，之后再调整是比较快捷的方法。在UI设计界面当中，如果你不知道如何布局元素，不如从黄金分割法入手，把元素大致摆放一下再进行快速的调整，这是一个比较快速有效的方法。 以上通过思考方式、界面分析还有视觉理论这三个维度，为大家阐述了我手机的整体思路。下面我们说第二个点，设计稿上应该体现些什么会让你和你的下更多课程内容：百度UE讲堂 游更好过一些。 这是我制作中的设计稿，大家可以发现在整个设计的背景色上面，并没有使用纯白或者纯黑，而是用一种中性的颜色——灰色。灰颜色一个是护眼还有一个是在你设计的过程当中背景使用了灰颜色可以有效的来提高你前景色使用的明度，这样拿掉背景色之后，你整个设计的颜色是比较明快的。第二个就是在整个设计稿的布局，可以看到上面我放的就是普通的这种常规设计界面的区域，下面是放置在上面设计稿里所体现的各种空间的二态跟多态的状态。这么做有两个好处，第一个是你把多态放在这里你下游的FE跟RD可以很明确的感知到你所要切得图到底是什么样子的，它有几种变化，方便他们制作和认知。第二个就是设计师在做完界面之后很有可能要进行视觉规范的总结，这样的时候你把这些东西直接登过去进行标注就可以了，利人利己。 小技巧：1、在设计的时候不用纯白纯黑背景色，试一试中性灰色。2、页面设计的布局上尽量展现界面交互的每一个环节。3、随手把按钮和图标的二态或多态放在一个位置，利人利己。 该文档的版权为百度UE讲堂所有，如需转载请注明出处。

界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应操作，起到向导作用。

界面设计主要是为了达到以下目的：

1) 以用户为中心。设计由用户控制的界面，而不是界面控制用户。

2) 清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解和使用。

3) 拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。

4) 较快的响应速度。

5) 简洁、美观。

以下规则应该重视：

界面风格一致性 操作项 基本规范

UI色彩与字体 1） UI 字体，色彩要一致。

2） 整体色彩搭配要融为一体，同时诸如Caption，Button 起提示、提交作用的部分要清楚，醒目。

3） 不可修改的字段，统一使用灰色文字显示。(例：浏览页面、删除页面均需显示灰色)

窗口风格 1） 所有窗口最大化、最小化风格要一致。

2） 报错页面的风格一致，最好有统一的报错页面。

3） 类似功能的窗口打开的风格要一致。

4） 相同功能在不同模块的名称要一致。

5） 子窗体应尽量在显示在主窗体的左上或居中放置。

6） 弹出式窗口应尽量在不借助水平和垂直滚动条的情况下显示所有内容。

7） 窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；不能只放大窗体而忽略控件的缩放。

8） 父窗体支持缩放时，子窗体不必缩放。

9） 实现自定义界面风格（可参考电子社区系统）

布局与1） 窗体控件布局和间距尽量与Windows标准保持一致。 间距（待定） 2） 按钮与窗体上、下、左、右之间的间距为

3） 按钮之间的间距为

4） ……

菜单深度 1） 菜单深度一般不要超过三层

2） 菜单层次太多时，应给出返回主窗口、主分支的快捷链接。

界面设计方案

目录

一、概述........................................................................................................................................... 3

二、用户界面设计原则 ................................................................................................................... 3

三、关于软件界面设计 ................................................................................................................... 5

1．用户导向（User oriented）原则 ...................................................................... 5

2．KISS（Keep It Simple And Stupid）原则 ..................................................... 6

3．布局控制 ................................................................................................................... 6

4．视觉平衡 ................................................................................................................... 7