《UI界面设计》课件-Chapter 1 第一章 设计师的“剧本”1界面设计概念

UI点击愉悦HomeServiceProkectAbout情感体验介入的界面编辑设计01设计师的“剧本”CONTENTS·目录·02设计师的“思维”03设计师的“财富”04设计师的“智慧”05设计师的“宝藏”06用户的“梦想”设计师的“剧本”01一、界面设计界面的含义界面（interface）：一种平台，是人与机器、人与物体之间用于沟通的一种媒介。“界面是人与物体互动的媒介，换句话说，界面是设计师赋予物体的新面孔。在设计里,界面是人与物体互动的媒介。”

——概念源自百度百科“界面广义上泛指物体与物体的接触面，狭义上特指人们用一个产品完成任务的方式。我们可以把界面定义为：存在于人和机器互动的过程（HumanMachineInterac_x0002_tion）中的一个层面，它不仅是人与机器进行交互沟通的操作方式，同时也是人与机器相互传递信息的载体。由于界面总是针对特定用户而设计，因此，我们也把界面称为用户界面。”——概念源自《数字界面设计》一、界面设计用户界面设计的三大原则：置界面于用户的控制之下减少用户的记忆负担保持界面的一致性一、界面设计狭义的人机界面广义的人机界面界面人与机之间的一个相互作用的媒介，人可以通过它以视觉和听觉、触觉等感官接受来自机器的信息，经过人脑的识别、加工、决策，然后做出反应，实现人—机器的信息传递。计算机系统中的界面。一、界面设计［用户界面（UserInterface，简称UI）］对软件的人机交互、操作逻辑、界面美观的整体设计。一、界面设计[人机交互]人与计算机之间使用某种对话语言，以一定的交互方式，完成确定任务的人与计算机之间的信息交换过程。一、界面设计如何设计出一套功能强大，又能有利于简化用户操作步骤的界面？一、界面设计以用户为中心。多通道设计。要尽量地挖掘人体的各部分器官的功能特点，来符合用户多方面的生理机能，达到身心舒适的效果。第三，界面的细微设计上要遵循一定的原则例如文字大小、色彩明暗、线条粗细、曲线与直线、位置等方面的摆放都有一定的原则。一、界面设计一、界面设计人机界面设计思想：“以人为本”一、界面设计案例“HumanNature”阿姆斯特丹发起的（人类自然）的活动阿姆斯特丹发起的“HumanNature”（人类自然）活动打造的一款交互式网站——“IdeasUnited(创意联盟）”，以Timeline（时间线）的形势呈现了在此次大会上来自不同领域不同专家的精彩演讲。▶随心和随机是这个设计师的风格。观者喜欢这种外观和它天然自然的样子。设计师遵循着自然的法则，展现出个性化界面。▶一、界面设计案例八小时工作日网站八小时工作日的网页，鲜艳醒目的色彩，充分调动用户的视觉感官，有利于整体系统导航。热情活泼的橘色给人留下了深刻的印象。在橘色色调变化形成的背景中，使用白色文字，整个气氛变得干净利索，更能抓住用户的视线。这个网页设计注意到了对于亮色、字体和装饰的机智运用，聪明地吸收这些元素并将它们进行现代化的创作。在这个作品中主要目标是用最快最好的方式将设计理念传达给观众，同时，也适当在作品里留些小玄机，给那些仔细观察的人去发掘更有趣的东西。▶一、界面设计案例/home.html界面抓住用户好奇、乐于探索的视觉心理，应用黑色为背景，简单、古朴、神秘。它纯粹并且能够搭配各种颜色。这个网站的主体形象是个多面体，好似外星飞船。点到不同的面时会发光，像开启一扇窗，让人禁不住想要往里看。人们可以从不同的层面去欣赏这个网站。可以让人找到一种绝佳的组合方式。在两个极端之下寻找平衡。这和利用颜色是一样的，大部分是单色调的，而另外一部分有着夸张的色彩。整个网站的中心是个动画形式，鼠标触碰就有旋转，使这个网站充满着生命力。▶一、界面设计案例/bondcars/网站运用纯色大色块当背景，采用大面积的空白，更加突出主题的汽车，让观者一目了然。▶一、界面设计案例.au/网站上会有不同种类的卡片，在这里你可以找到有关商业卡片、个性的身份卡片、请帖、有设计感的卡片，还可以找到发行额有限的限定版。有很多信息供你选择，每个小方块都可以点击进入到下一页面，操作方便。▶一、界面设计案例/这个设计基本上是引入了“方块”的元素，由网格样式的纯色块加上照片或文本。它清晰简易从而易获得用户的认可。结合图像、文本与色块之间产生强烈的视觉对比，引起用户视觉兴趣，刺激用户探索下去。界面具有很强的可读性，行距本身也具有很强的表现力。为了加强版式的装饰效果，界面有意识地缩窄或者加宽行距，体现了独特的审美意趣。例如，加宽行距可以体现轻松的情绪，还可以应用于娱乐和抒情性的内容。另外，通过精心的安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出界面独到的匠心。▶界面操作界面显示界面控制作用用户通过操作界面发出信息，操作机器执行指令。操作界面包括：触控屏幕鼠标键盘操作手柄遥控器……信息显示用户通过显示界面监控机器对指令的执行状况，同时也通过显示界面了解机器在执行指令之后的状况。包括：图文声光……一、界面设计界面的分类一、界面设计一、界面设计一、界面设计一、界面设计界面的分类功能性界面情感性界面环境性界面界面实现的是使用性内容在于把握使用者的感情外部环境因素对人的信息传递一、界面设计如图网页界面设计《HighQualityExecutionbasedon

YearsofExperience》就是典型的功能性界面设计，界面功能分区清晰易懂，从上面的导航栏设计，四块分栏，到中间的核心内容展开，以及具体内容按钮分区一字排开，明了整齐，让用户完全轻松使用。▼案例/gallery/MyDigiSource/119731