《UI-设计界面设计》由会员分享，可在线阅读，更多相关《UI-设计界面设计（110页珍藏版）》请在金锄头文库上搜索。
1、第三章 界面设计3.1 界面设计概述3.2 界面设计分类3.3 界面设计规范目录 CONTENTS3.4 界面设计项目实战3.1界面设计概述界面设计概述界面是人与机器之间传递和交换信息的媒介，是人与机器互动的接口。我们通过手机界面来浏览信息，通过在手机界面上点击、拖曳等方式来实现各种操作，所以，手机界面是我们与手机发生互动的中间介质，如图所示。3.1界面设计概述界面设计概述界面设计开始于软件设计之后，UI界面设计的发展过程是与软件设计慢慢分化的。随着人们对界面易用性、简洁性的要求越来越高，界面设计的重要性才越来越被重视，如图所示的是“搜狐”网站界面十年前后的对比效果，可以看出，简洁、美观、高效
2、已经成为界面设计的主流趋势。5 53.1.1 界面设计的内容启动图标是手机应用程序的入口，它会出现在手机解锁后的主界面上。如果需要启动应用程序，只需点击该图标即可。启动页是指从用户启动应用之后到应用程序主界面打开之前看到的过渡页面或动画，如图所示。启动图标是用户认识应用程序的第一步，是应用程序的标志和门户，其重要性不言而喻。其设计的原则和方法与我们前面讲到的图标设计是一致的。1.启动图标和启动页6 63.1.1 界面设计的内容启动页的作用是为了增强应用程序启动时的用户体验。最常见的启动页形式如图所示，这些页面主要用来体现应用程序的名称及价值，让用户能迅速熟记该应用。1.启动图标和启动页7 73
3、.1.1 界面设计的内容还有一些启动页，并没有文字内容，如图所示。曾经有调查数据显示，启动时间超过3秒用户就会有焦急感。所以，启动页停留的时间最好控制在3秒以下。1.启动图标和启动页8 83.1.1 界面设计的内容并不是所有应用程序的启动时间都能控制在3秒以下，所以我们要使用其他方法来进行处理，如可以添加状态提醒，如左图所示，或者利用渐隐效果拖延时间等，如右图所示。1.启动图标和启动页9 93.1.1 界面设计的内容框架设计也称为结构设计，框架是指界面的骨架，框架设计是在进行用户研究和任务分析后制订出的界面整体架构。对于手机界面来说，其基本的结构可以分为4 个部分，状态栏、标题栏、标签栏和内容
4、区域，如图所示。界面中的状态栏主要用于显示手机信号、电池容量、时间等信息，标题栏用于显示标题信息和放置返回、设置等按钮，标签栏用于显示选项信息。2.框架设计10103.1.1 界面设计的内容界面中除了状态栏、标题栏、标签栏之外的区域就是内容区域，所以我们这里说的框架设计，主要是指内容区域的架构设计。通俗而言，框架设计就是界面里的信息和元素位置如何摆放、大小如何设置、颜色如何搭配等。框架设计没有定式，但会因界面类型、功能的不同而有一些常见的形式，在接下来的界面设计分类中会有所阐述。2.框架设计11113.1.1 界面设计的内容在进行框架设计时，很多设计方面的原理、法则会对我们有所帮助，如在设计中
5、应用比较广泛的格式塔原理，就非常适合应用于框架设计。下面，先介绍两种在界面设计常用的法则。2.框架设计（2）相似法则（1）接近法则12123.1.1 界面设计的内容（1）接近法则。接近法则是指人的潜意识里常常倾向于将空间上或时间上接近的元素整合成集合或整体。例如，右图所示的图形中，虽然所有的圆形大小都一样，但是能够清晰地看出将其分成了3 组，这是由于它们之间不同的距离为我们的视觉创造了分组效果。2.框架设计13133.1.1 界面设计的内容（2）相似法则。相似法则是指人的潜意识里会将视线内一些相似的元素（如相似的形状、颜色、大小、亮度等）自动整合成集合或整体。如图所示，图中各行图形虽然间距相等
6、，但是每行图形的形状有所不同，在视觉上就形成了分组效果。2.框架设计14143.1.1 界面设计的内容利用相似法则，即使界面中各元素摆放得杂乱无序，也可以很容易地进行区分并分组，如图所示，虽然文件类型多样，但是通过图标的形状和颜色就能非常容易地将其分成若干组合，一目了然。2.框架设计15153.1.1 界面设计的内容相似法则是基于共同的视觉特征出发的，在界面设计中，可以利用相似法则给予不同的布局元素相同或相似的视觉特征，激发用户对界面进行适当的分组和联结的本能。右图所示的两个界面就很好地运用了相似法则，通过形状、颜色等区别对界面元素进行分组，使界面的结构变得灵活。2.框架设计16163.1.1
7、 界面设计的内容控件是指在框架设计中出现的各种元素，如按钮、菜单、对话框、列表、信号条、电池状态、标签、面板、滑块等都是控件，如图所示。这些控件的功能相对独立，并且可以重复使用。3.控件设计17173.1.1 界面设计的内容如果细化来说，在界面上出现的所有元素都可以称为控件。在完成了框架设计，并对界面的结构有所把握之后，就要通过控件的制作来填充框架，完成界面设计了。控件的效果主要依赖于界面设计的规范和控件细节的表现。界面设计的规范主要是指适合于手机设备和系统特性的、合理的设计标准，包括控件的大小和间距、界面的布局等内容。控件细节的表现主要是指控件的颜色、特效、材质等效果，需要通过Photosh
8、op、Illustrator 等制作软件来完成。3.控件设计18183.1.1 界面设计的内容需要强调的是，控件的表现看似简单，实则不然。为了将控件效果做好，细节的表现尤为重要，右图所示的两个按钮是使用Photoshop 软件来制作的，左侧的按钮只添加了“斜面和浮雕”的图层样式，右侧的按钮在此效果上又增加了高光和阴影线，立刻增强了按钮的质感，在细节表现上要优于左侧的按钮效果。手机的界面空间有限，在有限的界面中要想将所有控件表现出最佳效果，每一个像素都是关键，所以需要细致、耐心、考虑周到。3.控件设计19193.1.2 界面设计的注意要点界面设计首先要关注的就是目标平台，也就是说，做界面设计要明
9、确手机、Pad、电脑等设备的特性，要明确iOS、Android、Windows 等不同系统的设计规范。如图所示，左侧为该应用程序在Pad上的界面，右侧为其在手机上的界面。同一款应用程序在不同设备上布局一样并不合适，而是要因设备的不同，适当修改布局方式。1.适用性20203.1.2 界面设计的注意要点界面是人与机器交互的接口，为用户提供简便、易懂的操作才是最终目的。界面的易用性表现在界面的功能、信息、层级等方面。在进行界面设计时，要以满足用户的目标需要为准，避免嵌套过深的多级菜单，缩减不必要的功能，同时尽可能创建多种信息访问途径。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操
10、作。如图所示的Windows8系统界面，就很好地体现了界面信息层级扁平化的原则，用户关注的信息一目了然，易用性强。2.易用性21213.1.2 界面设计的注意要点界面设计要能够预测用户可能出现的错误，提供相应的机制尽可能避免用户出错，在用户操作错误或产生迷惑时可以自己寻求解决方法。右图所示的某程序注册界面提供了友好的信息提示，使注册过程变得简单、出错率小，提高了用户对该应用程序的信任度和好感。3.友好性22223.1.3 界面设计的表现手法唯一主色调是指在一个界面中，只采用一种色相，通过不同的亮度、饱和度的调整，配以黑色、白色和灰色来展现信息层次，绝不使用更多的颜色，如右图所示。唯一主色调的颜
11、色一般会出现在界面的状态栏、标题栏、标签栏或其他重要区域提醒的位置。1.唯一主色调23233.1.3 界面设计的表现手法多彩色与唯一主色调的区别在于，不同页面、不同信息组块采用多彩色撞色，或同一个界面的局部采用多彩色，如右图所示。多彩色的设计方法比唯一主色调的设计方法要难很多，颜色的使用主要取决于想表现的风格和意境。颜色的搭配有很多可参考的理论知识，如邻近色、对比色、暖色调、冷色调等。但这些理论也不是绝对的。归根结底，颜色的运用需要依靠长时间的积累与实践，如果运用得当，多彩色的界面还是非常美观的。2.多彩色24243.1.3 界面设计的表现手法现在，越来越多的App 在数据的呈现方式上，开始尝
12、试数据的可视化、信息的图表化，让枯燥的数据和文字变得直观，增强了用户体验，如图所示。数据的可视化只是用来辅助进行界面设计的，不能单纯地为了数据能可视化，而大量地使用图表，却忽视了这些图表是否有存在价值，或者说是否能够准确表达你所要呈现给用户的信息。3.数据的可视化25253.1.3 界面设计的表现手法（1）在界面设计时，可以将不同的内容信息放置于不同的卡片上，使用空白间隔将不同的内容块划分开，如图所示，这样的设计使得各部分内容清晰，没有多余的元素影响视觉，界面简洁。4.内容至上26263.1.3 界面设计的表现手法（2）还有一种表现形式是干脆将卡片也去掉，只保留图片和文字，如图所示。这样的设计
13、可突出内容，放大图片和字号，视觉体验更加清晰，提高了界面的易用性。4.内容至上27273.1.3 界面设计的表现手法5.大视野背景图这种表现手法是用图片作为界面的背景，以渲染氛围，丰富情感化元素，如图所示。大视野背景图对字体和排版设计的要求比较高，难度也比较大，使用的背景效果不能喧宾夺主，影响界面内容的清晰度。使用大视野背景图最简单的方法是可以将背景图做模糊处理，这样可以起到很好的衬托作用。3.1 界面设计概述3.2 界面设计分类3.3 界面设计规范目录 CONTENTS3.4 界面设计项目实战3.2界面设计分类界面设计分类在一个App中，界面可以分为两类：一类是典型界面，是指在 App（应用
14、程序）中经常出现的、有代表性的界面；另一类是特殊界面，是指App 中的启动、登录、注册界面等。例如，在QQ 软件中，信息列表页、个人设置页就是典型界面，如左图所示；启动页、登录页就是特殊界面，如右图所示。30303.2.1 主界面主界面是指打开应用程序后的第一个界面，在这个界面上一般会呈现该应用程序的核心功能，如右图所示。在主界面上，用户应该能够轻易找到该款App 最主要的功能。在设计主界面时，最先做的应该是了解App 的开发目的和用户使用的心理，在挖掘核心功能后，再进行布局设计。31313.2.1 主界面这种布局方式泛指对界面进行横纵等分的布局类型，如图所示。所有的核心功能井然有序、间隔合理
15、、清晰呈现，用户能够快速查看和选择，视觉效果稳定。1.九宫格式32323.2.1 主界面最早的九宫格是指横纵各3个格，但是慢慢地这种布局方式也发生了改变，不再绝对地控制格子的数量。如果App的功能个数少于或多于9个，也可以改变横纵的格子数量，让布局更加合理，如图所示。1.九宫格式33333.2.1 主界面这种布局方式是将信息以竖排列表的方式进行呈现，如图所示。列表可以包含比较多的信息，在视觉上整齐美观，视觉流线从上向下，浏览体验快捷，用户接受度很高。列表式的界面常用于并列元素的展示，包括目录、分类、内容等。2.列表式34343.2.1 主界面这种布局方式表面上和列表式很相似，但是它可展开显示二
16、级内容，在不用的时候，这些内容可以隐藏，如图所示。它的优势在于能够在一屏内显示更多细节，无需进行页面的跳转，既能保持界面简洁又能提高操作效率。3.手风琴式35353.2.1 主界面手风琴式和列表式在符号表示上是有所区别的。如果有二级内容，则右侧的符号通常会用向下的箭头来表示，如果是界面要发生跳转，则右侧的符号会用向右的箭头来表示。当然，这只是常用的表现形式，在一些页面中，也会看到右图所示的手风琴式界面。3.手风琴式36363.2.1 主界面这种布局方式是将部分内容先藏在界面边缘，在需要时再展开，如左所示。它的优势是不占用宝贵的屏幕空间，让用户聚焦于内容，在交互体验上更加自然，和原界面融合得较好，如右图所示。4.侧滑式37373.2.1 主界面这种布局方式是利用了格式塔原理中的相似法则，通过形状进行分组，如图所示。它的优势在于形式活泼、不拘谨，常用于分类较多、不好管理的界面布局。5.混合式38383.2.2 详情界面详情界面是指除了主界面以外的承载信息的界面，根据其实现的功能，主要分为查看界面和编辑界面。其中，查看界面是指用来浏览、查看信息的界面；编辑界面是指用来编辑、修改信息的界面。观
