版式设计07UI版式设计

第七章

UI版式设计目录UI版式设计的基础知识01UI的构成及设计流程02UI版式设计要素及其风格0304UI版式设计赏析UI版式设计的基础知识01一、UI的由来UI设计是关于创建人与数字设备交互的界面，包括软件的图形设计和操作逻辑，旨在提升用户体验。UI设计概述iPhone上市开启新生活方式，UI从图形界面转向应用用户界面，成为设计与消费者沟通的新桥梁。UI的新时代UI历经40年发展，从施乐公司的XeroxAlto到微软、苹果的创新，图形界面从简单像素到现代透明设计，注重美感与用户体验。UI的发展历程二、UI的本质UI构建二维信息空间，通过链接形成三维信息关联，实现即时交流，强化交互体验。UI：信息交流的新载体视觉设计通过图标、色彩、布局，创造吸引人且易理解的界面，是UI设计的核心。视觉设计：UI的关键手段UI设计旨在提升用户体验，通过巧妙布局实现信息高效、便利、顺畅的交流，核心是满足用户需求。提升用户体验的UI设计UI设计核心是创造优质用户体验，通过交互和视觉设计提升信息传达效率。UI的本质：优质用户体验01020304三、UI的分类

（一）网页用户界面(WVU1)主要指PC端的网页用户界面设计，是最早的UI设计形式之一。如图7-1-6所示。（1）资讯门户网站：重点在于提供丰富的信息和内容，但常忽视视觉设计和用户体验。（2）政府及事业单位网站：除了发布权威信息，还提供在线办公和交互功能。（3）企业品牌网站：强调展示企业形象、品牌理念和产品服务，注重目标用户分析和交互体验。（4）商业性网站：如电商平台，关注商品展示、价格比较和交易流程，近年来在UI设计上取得显著进步。（5）功能性网站：如搜索引擎，侧重于提供高效的搜索服务和准确的功能性内容。（6）社区网络：包括论坛、社交媒体等，重在构建社区互动和分享环境。（7）游戏网站：专注于游戏内容的展示和用户游戏体验的优化。（8）个人网站：根据个人品牌或兴趣定制的网站，风格多样化。三、UI的分类（二）图形用户界面(GUI)图形用户界面(GUI)涉及移动应用和操作系统界面设计，如手机APP的UI及iOS、Android系统的界面。（三）电视与智能设备界面电视与智能设备界面设计关键在于简洁、直观和安全性，以适应不同设备的使用需求。（四）其他特殊界面设计简洁、直观的界面是关键，因为可穿戴设备屏幕小，输入方式有限，确保用户操作快速准确。可穿戴设备界面设计VR和AR界面设计创造沉浸式体验，让用户通过多重感官互动，仿佛置身虚拟世界中。VR与AR界面设计定制化UI设计针对特定场合，如VR/AR提供沉浸式体验，可穿戴设备强调小屏幕适应，医疗设备和科研监控设备注重易读性和操作准确性。特定场合的定制化UI设计UI的分类：其他特殊界面（3）医疗设备界面：医疗仪器和监控设备的专业界面设计，强调易读性和操作准确性。（4）环境、卫生及其他科学研究的监控设备的界面：同样强调易读性和操作准确性。如图7-1-11所示。VR界面设计设计要点沉浸感营造：通过360度全景画面、逼真的光影效果、立体音效等，让用户感觉完全置身于虚拟环境中。比如在虚拟旅游应用中，用户能看到四周的风景，听到鸟鸣流水声等。交互设计：设计自然直观的交互方式，如手柄操作、手势识别、语音交互等。例如在VR游戏中，玩家可以通过手柄模拟射击、挥剑等动作。信息展示：合理布局信息，避免信息过多造成干扰。可采用悬浮窗口、全息投影等形式展示关键信息，如在VR教育应用中，以悬浮卡片形式展示知识点。优秀案例VR看房应用：如贝壳找房的VR看房。用户戴上VR设备后，仿佛置身于真实房屋中，可以自由行走查看各个房间的布局、装修细节等。界面设计上，通过简洁的图标和提示文字，让用户可以方便地切换房间、查看房屋信息等。VR虚拟办公应用：如微软的MeshforTeams。用户进入虚拟办公空间后，能看到虚拟的会议室、办公桌等。通过手柄操作可以进行文件共享、屏幕演示等操作，界面设计简洁高效，符合办公场景需求。四、UI的构成UI设计是一个多元化的领域，涉及许多不同的学科和技能。以下是UI设计的几个关键组成部分的详细解释。（一）用户体验(UE)杰西·詹姆斯·加勒特的《用户体验要素》为设计师构建UE框架，理解实践基础。UE基石内容关注用户与产品的交互体验，涵盖可用性、功能、情感和价值感，提升整体满意度。UED设计策略以用户为中心，从概念到发布，始终围绕用户需求，确保设计符合用户期望。UCD设计方法（二）交互设计交互设计关注于优化用户与产品之间的互动过程，它起始于20世纪80年代计算机技术的初步发展期。随着技术普及，简单直观的操作成为普通用户的需求，推动了图形界面的发展。如图7-1-15所示。（三）视觉设计01UI构成UI融合用户体验与交互设计，通过色彩、形状传达产品风格，广泛应用于操作系统、网站及应用。02用户体验(UE)UE关注用户感受，确保设计直观、易用，提升用户满意度，是UI设计的核心目标之一。五、UI和版式设计UI版式设计需确保信息准确传达，创建流畅阅读体验，并通过网格系统展现秩序感和节奏。UI版式设计的基本要求01早期WUI常采用三栏式架构，现更倾向于一栏、二栏或灵活布局，以提升视觉吸引力。WUI版式设计的演变02UI设计师需结合产品定位和用户需求，创新版式设计，以应对GUI领域的激烈竞争和挑战。UI设计师的创新挑战03GUI设计受限于界面大小，常采用一栏布局，需精细研究以在有限空间中呈现更多内容。GUI设计的限制与创新04UI的构成及设计流程02一、网站构建的5个关键层面《用户体验要素》定义五层：表现层、框架层、结构层、范围层、战略层，指导UI产品开发，构建用户体验框架。网站构建关键层面01战略层是顶层设计，涉及目标用户群体识别和产品定位，决定了产品目标和发展方向。战略层02范围层确定产品边界和功能需求，聚焦于必要的内容和功能，以塑造产品信息架构。范围层03结构层关乎组织信息和数据，设计清晰界面结构，便于用户获取所需内容。结构层04框架层设计界面框架，布局按钮、表单等元素，确保产品界面结构清晰、交互流畅。框架层05表现层是用户界面的视觉呈现，包含颜色、图形等元素，它决定了产品的视觉风格和吸引力。表现层06二、从平面到空间的转换从二维到三维，考虑用户交互的深度和真实感，设计需考虑虚拟环境中的空间布局和感知。UI设计的转变01设计师需掌握新的技能，如立体建模和空间交互设计，同时平衡美学与功能性的融合。设计挑战升级02利用AR/VR技术，设计需创造沉浸式体验，适应多感官输入和输出，使用户与数字世界更无缝对接。技术驱动创新03设计教育更新课程，强调空间感知和用户体验，行业标准和工具持续更新，推动设计师持续学习。教育与实践适应04二、从平面到空间的转换（一）前后维度的阅读平面媒体阅读线性单一，UI设计则层次化，允许非线性阅读路径，影响信息获取效率和用户体验。0102（二）片段信息与跳转链接的阅读模式从全域阅读到片段跳转，UI设计需将信息模块化，通过层叠和链接处理，适应有限的屏幕空间。（三）全链条的互通印刷媒体产品生产流程印刷媒体产品生产涉及选题、编辑、设计、印刷、发行等步骤，各环节相互独立又协作。学习UI设计的方法与目标通过分析优秀UI设计，理解并应用其各层次内容及关联，以建立清晰的架构意识，适应数字时代。三、Ul设计流程UI设计是创建用户界面的过程，它涉及到从理解用户需求到产品上线的多个阶段。以下是UI设计的6个主要阶段。构架设计阶段是将用户需求和产品定位转化为网站或应用的结构规划，为视觉和交互设计确立基础。目标用户研究分析阶段，UE团队通过访谈、问卷等手段挖掘用户真实需求，为UI开发提供依据。产品定义和市场分析阶段是设计起点，需确定产品定位、目标用户，以及解决市场的需求空白。（一）产品定义和市场分析阶段（二）用户研究分析阶段（三）构架设计阶段三、Ul设计流程原型设计阶段着重确定界面内容，如导航、主要信息和布局，是UI界面的骨架，为视觉表现提供基础。（四）原型设计阶段内部测试、上线检验、记录反馈、分析运行，确保产品满足用户需求和体验。（六）测试上线阶段UI视觉阶段着重于将内在框架转化为吸引人的外在形象，以优秀的视觉设计吸引用户并提供愉悦感。（五）UI视觉表现阶段010203四、UI设计规范颜色使用规范交互反馈设计文字排版规范图标设计规范采用统一色板，符合品牌调性，不同功能区域使用特定颜色区分，确保信息层级清晰。图标需一致风格，使用标准符号，确保含义明确，提供无障碍模式支持。字体、字号、行间距统一，确保可读性，使用对比色以突出重要信息。操作反馈及时，状态变化可见，错误提示友好，遵循用户心理预期。四、UI设计规范图标设计原则简洁明了，快速传达信息，与企业LOGO保持一致风格，体现产品形象。通用图标规范设计需统一风格，手法一致，易于用户识别，准确表示功能或交互。01（一）图标设计图标应简洁明了，易于识别，保持风格一致，适应不同尺寸，考虑色彩对比和可访问性，图标设计需遵循平台指南，提升界面美观度和用户体验。02（二）文字设计文字大小、间距、字体、颜色、行距需精细规划，使用系统自带字体保持跨平台一致性，优化阅读体验，适应屏幕尺寸限制。03（三）色彩设计色彩选取符合产品属性，激发用户情感，使用十六进制颜色码标注，确保编程实现的准确性，满足不同人群色彩偏好。四、UI设计规范四、UI设计规范控件需有明确标签和行为提示，统一样式和行为，减少用户学习成本，提升体验，包括按钮、多选、单选等常用控件。（五）交互控件设计采用模块化布局，响应不同屏幕尺寸，保证可用性和可访问性，包括网格、流式、响应式等布局，整洁有序呈现内容。（六）版式布局网格系统帮助创建有序布局，确保元素对齐，管理空间，增强界面清晰度和层次感，提升设计美感和用户理解。（四）网格和空间设计四、UI设计规范设计原则是清晰明了的设计、记忆负担最小化、设计的一致性、美观大方的设计、从用户习惯考虑、安全性、灵活性、人性化，所有设计规范的最终目标是提升用户体验。设计师应在遵循规范的基础上，创造出具有艺术性和创新性的UI设计。如图7-2-21所示。通过遵循这些规范，设计师可以确保UI设计的高效性、一致性和吸引力，同时加快产品的开发周期，降低团队间的沟通成本。然而，创新同样重要，设计师应寻求在规范的框架内探索新的设计方法，以提供最佳的用户体验。（七）设计原则和目标UI作品UI版式设计要素及其风格03一、UI设计要素UI（用户界面）设计是确保软件和用户之间的有效交互的关键，它包括一系列设计要素，可以大致分为物理性要素和软件性要素。在UI设计中，物理性要素主要涉及与硬件相关的技术性要求和指标。这些要素对设计师来说至关重要，因为它们决定了设计的可行性和边界。以下是一些关键的物理性要素。（一）物理性要素（一）物理性要素1.屏幕大小UI设计要素：软件性要素关注设计适配、页面版式、导航结构，确保信息布局合理，导航清晰，适应不同设备和用户需求，提供流畅的用户体验。UI设计要素：物理性要素考虑屏幕尺寸、分辨率、像素密度、颜色范围、输入方式、屏幕比例、亮度和对比度，确保设计适配不同设备，保持用户体验一致性。（一）物理性要素2.分辨率分辨率是指屏幕上显示的像素数量，通常以宽度

×

高度的形式表示（如1920×1080）。高分辨率屏幕可以显示更多的细节，允许更复杂的设计，而低分辨率屏幕可能需要简化设计以避免模糊不清的元素。截至2024年，智能手机最常见的屏幕分辨率为2460×1080、2388×1080、2340×1080、3168×1440、3192×1368等。常见的平板电脑分辨率是1920×1200、2160×1620、2388×1668：荣耀平板9采用12.1英寸LCD屏幕，分辨率达2.5k；小米平板6SPro的11英寸屏幕采用2.8k高清屏幕，144hz高刷新率vivoPad3Pro的13英寸屏幕采用3.1k分辨率，配合144hz的高刷新率；华为MatePadPro11英寸2024款采用2.5kIPS显示屏，提供清晰锐利的图像和丰富的色彩表现。如图7-3-3所示。（一）物理性要素3.像素密度（PPI/DPI）像素密度是指每英寸长度中的像素数量，单位为PPI（像素每英寸）或DPI（点每英寸）。高像素密度的屏幕（如视网膜屏幕）能够提供更清晰的图像和文字，设计师可以利用这一点创建更细腻的界面元素。因为，在设计界面时，为了确保设计元素在不同设备上能够正确显示，应当考虑设备的像素密度（PPI）而不是直接设计具体的像素大小。（一）物理性要素4.颜色范围不同的显示技术（如LCD、OLED、AMOLED等）支持不同的颜色范围和对比度。045.输入方式设备输入方式（如触摸屏、鼠标、键盘、触控笔等）会影响用户与UI元素的互方式。056.屏幕比例不同的设备有不同的屏幕宽高比，这可能会影响内容的布局和适配。067.亮度和对比度屏幕的亮度和对比度会影响用户在各种光照条件下阅读内容的能力。设计时应考虑使用足够的对比度来提高可读性，并适应不同的环境光线条件。07（二）软件性要素1.设计适配由于市场上智能手机迭代速度快，品牌和机型众多，导致屏幕大小和分辨率千差万别。因此，UI设计不能为每一款屏幕单独开发一套应用，而是需要制定一个基准方案，通过比例换算自动适应不同分辨率的屏幕。这通常涉及到iOS系统手机、Android系统手机以及两者之间的适配工作。在UI设计中，适配性贯穿整个流程，从预设计考虑屏幕多样性，到设计时决定元素如顶部轮播Banner是否响应式；再到设计后解决实际开发与设计的不一致，如Banner数量调整。适配不是单一步骤，而是贯穿始终的关键考量。因此一定要遵循等比缩放、弹性控件、文字流自适应这三个适配原则。2.页面版式版式结构是UI设计的基础，决定了信息的布局和导航方式。三栏结构曾经是网页设计的常规模式，但随着互联网的发展，版式趋向于更灵活的二栏或一栏布局，以适应不同设备的浏览需求。智能手机因屏幕限制，常采用单栏或网格列表布局，以便用户操作。二、Ul设计风格UI设计风格是视觉元素和美学理念的体现，是满足用户需求过程中的产物，如“形式随功能而定”。风格定义现代UI设计风格包括扁平化、极简主义、材料设计等，每种风格都是为解决特定时代用户需求的有效途径。主流风格二、Ul设计风格

（一）扁平化设计扁平化设计通过纯色和复古色调，以色彩为情感载体，创造视觉风格。扁平化设计中的色彩运用扁平化设计中，字体应简洁清晰，常用无衬线字体，如黑体。设计需以功能为主，简化视觉元素，引导用户正确使用。扁平化设计的字体选择扁平化设计以简洁、直观为原则，通过基本形状和鲜明色彩实现高效信息传递，提升用户体验。扁平化设计的核心理念01.02.03.（二）材质设计由谷歌开发的材质设计风格结合了扁平化设计的一些特点，并引入了轻微的阴影（称为材质）、动画和其他深度提示来模拟三维空间效果。这种设计风格旨在创造更富有层次感和动感的用户界面，同时保持视