界面图标设计.ppt

《界面图标设计.ppt》由会员分享，可在线阅读，更多相关《界面图标设计.ppt（76页珍藏版）》请在三一办公上搜索。

1、什么是界面设计,界面设计的研究领域,用户界面设计的原则,界面设计的分类,优秀界面设计欣赏,界面设计作业要求,界面设计是人与机器之间传递和交换信息的媒介，包括硬件界面和软件界面，是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。,什么是界面设计,界面设计的研究领域,人机界面的定义、起源、发展、研究内容及发展趋势；人机界面设计中认知心理学、人机工程学、人机界面的艺术设计、色彩设计等；人机界面设计，硬件人机界面的设计风格、人文关怀等；软件人机界面的形式与

2、标准、软件人机界面设计、Internet网页界面设计、图标设计等；人机界面设计评价与可用性测试；新交互技术及展望，介绍了多通道用户界面、下一代人机界面展望及附录。,什么是界面设计,什么是界面设计,什么是界面设计,什么是界面设计,用户界面设计的原则,软件用户界面（Software User Interface）是指软件用于和用户交流的外观、部件和程序等等。如果你经常上网的话，会看到很多软件设计很朴素，看起来给人一种很舒服的感觉；有点软件很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的软件页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。软件界面的设计，既要从外观上进行创意以

3、到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。通常的讲，企业软件用户界面的设计应遵循以下几个基本原则：,用户界面设计的原则,1用户导向（User oriented）原则,设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计软件。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。网页的设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作

4、会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成混乱。,用户界面设计的原则,1用户导向（User oriented）原则,用户界面设计的原则,2KISS（Keep It Simple And Stupid）原则,KISS原则就是“Keep It Simple And Stupid”的缩写，简洁和易于操作是网页设计的最重要的原则。毕竟，软件建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片。该原则一般的要求

5、，网页的下载不要超过10秒钟（普通的拨号用户56 Kbps网速）；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。,用户界面设计的原则,2KISS（Keep It Simple And Stupid）原则,用户界面设计的原则,3布局控制,关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。,用户界面设计的原则,3布局控制,用户界面设计的原则,4视觉平衡,网页设计时，也要各种元素（如图形、文字、空白）都会有视觉

6、作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，在设计网页时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个道理。例如，你的很多的文字是采用左对齐Align=left，需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。一般情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分常放置一些Banner广告或导航条，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值。如果你的网页上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起

7、读者反感，破坏该软件的形象。在网页设计上，适当增加一些空白，精炼你的网页，使得页面变的简洁。,用户界面设计的原则,4视觉平衡,用户界面设计的原则,4视觉平衡,用户界面设计的原则,5色彩的搭配和文字的可阅读性,颜色是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网页设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。为方便阅读软件上的信息，可以参考报纸的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性

8、的因素是所选择的字体，通用的字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。,用户界面设计的原则,6和谐与一致性,通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。或者说，软件的众多

9、单独网页应该看起来像一个整体。软件设计上要保持一致性，这又是很重要的一点。一致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个软件的各种功能操作。破坏这一原则，会误导浏览者，并且让整个软件显的杂乱无章，给人留下不良的印象。当然，软件设计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时间的推移不断的改版软件，会给浏览者带来新鲜的感觉。,用户界面设计的原则,7个性化,界面设计的分类,软件界面设计手机界面设计播放器界面设计游戏界面设计系统界面设计UI界面设

10、计家用电器界面设计,界面设计的分类,软件界面设计,界面设计的分类,手机界面设计,界面设计的分类,播放器界面设计,界面设计的分类,游戏界面设计,界面设计的分类,系统界面设计,界面设计的分类,UI界面设计,界面设计的分类,界面图标设计：,界面设计的分类,文化界面设计,界面图标设计：,界面设计的分类,卖场图标设计,界面图标设计：,课程作业,1、自选内容分别设计两套不同风格主题的界面（包括背景和图标）场景风格，模拟现实生活的场景，采取摄影，手绘或其他表现方式设计出场景化的多媒体界面（例图）,课程作业,1、自选内容分别设计两套不同风格主题的界面（包括背景和图标）其中一套为个性化自我介绍的界面。场景风格，

11、模拟现实生活的场景，采取摄影，手绘或其他表现方式设计出场景化的多媒体界面（例图）,2、界面背景要求：整体感强，色彩与图形与图标风格一致且有内在联系3、图标要求：图标与图标之间保持一定的整体性，按钮与连接内容之间有内在的呼应关系4、界面规格：1024X768 72dpi5、作业说明：界面背景 图标 6、评分标准：准确性 趣味性 艺术性7、交件形式：电脑稿件（图标和综合效果两套）8、交件时间：课时内完成,图标设计：,一、关于图标定义：图标设计从某个角度来说，图标有点类似标志、徽标都是为了让人们能够 被它吸引记住。,图标设计：,一、关于图标2、图标类型程序图标:指的是那些能够在桌面上单击、选择、移动

12、、双击执行命令的图标，类似于“我的电脑”“回收站”等等。多数运用于（电脑、掌上电脑、智能手机、操作系统等）工具栏图标：指的是那些位于工具栏，通过单击选择该工具，然后在画面可以进一步执行命令的图标。“格式刷”回撤“字体加粗”等（多数运用于操作软件等，常见的PS)按钮图标：那些位于面板上，形似现实生活中的按钮。（常见的遥控器、触摸屏）,图标设计：,程序图标:指的是那些能够在桌面上单击、选择、移动、双击执行命令的图标，类似于“我的电脑”“回收站”等等。多数运用于（电脑、掌上电脑、智能手机、操作系统等）,图标设计：,工具栏图标：指的是那些位于工具栏，通过单击选择该工具，然后在画面可以进一步执行命令的图

13、标。“格式刷”回撤“字体加粗”等（多数运用于操作软件等，常见的PS)按钮图标：那些位于面板上，形似现实生活中的按钮。（常见的遥控器、触摸屏）,图标设计：,图标属性：1、图标尺寸：48*48、32*32、24*24、16*16像素一般设计都为正方形2、色深度：windows支持32位图标。颜色是2的24次方加上一个8位alpha通道可以产生透明的 效果。,图标设计：,图标设计软件：1、ps、illustrator、Axialis IconWorkshop(图标编辑设计)等都可以，但是ps设计制作时需要运用像素绘图的工具,是一款功能强大的图标设计工具。它被用来创建、提取、转换、管理和发布 Wind

14、ows(R)图标。通过它，你能创建、导入和保存所有的Windows(R)图标(ICO)和图标库(ICL)。它支持新的带Alpha通道图像（a.k.a.平滑透明度）的WindowsXP图标。在这个版本中，你甚至可以打开Macintosh(R)图标并将其转换为Windows(R)格 式。AxialisIconWorkshop将许多的特殊功能完美的整合在一个工作区中。,图标设计：,图标设计风格：1、水晶系列图标设计,图标设计：,图标设计风格：2、透明水晶风格,图标设计：,图标设计风格：3、卡通风格,图标设计：,图标设计风格：4、怀旧风格,图标设计：,图标设计风格：5、马里奥透明风格,图标设计：,图标

15、设计风格：6、创意风格,图标设计：,图标设计风格：7、立体风格,图标设计：,图标设计风格：8、立体风格,图标设计：,图标设计风格：9、手绘卡通风格,图标设计：,图标设计风格：10、可爱卡通风格,图标设计：,图标设计注意点：1、构思时利用发散性思维进行创意联想2、创作时注意图标设计的可识别性3、设计时注意图标设计的一致性（比如光源一致性）4、图标设计注意尽量避免文字的出现5、设计过程（首先：草稿绘图，其次：电脑框架，再次：电脑上色）,移动设备界面设计：,1、移动设备界面设计概况2、移动界面设计的特征3、移动设备界面设计与一般图形化用户界面设计的异同4、移动媒体基本界面的设计5、欣赏,移动设备界面

16、设计：,1、移动设备界面设计概况,移动设备界面，主要指手机、PDA(个人掌上电脑）等移动设备的图形UI界面，这个是我们接触最为紧密的数字界面，也是使用最为广泛的数字界面。,手机的发展过程：,1973年手机被发明，80年代初商用移动电话出现。,移动设备界面设计：,手机的发展过程：,1973年手机被发明，80年代初商用移动电话出现。,战地通讯设备,第一部完全意义上的手机（无显示屏）,移动设备界面设计：,手机的发展过程：,1973年手机被发明，80年代初商用移动电话出现。,只有按键、听筒、和话筒等硬件界面，是固定电话的延续。,80年代末，带有简单显示屏的手机出现了，但是只能是显示一些数字和固定文字,

17、大哥大摩托罗拉3200,移动设备界面设计：,手机的发展过程：,1973年手机被发明，80年代初商用移动电话出现。,只有按键、听筒、和话筒等硬件界面，是固定电话的延续。,80年代末，带有简单显示屏的手机出现了，但是只能是显示一些数字和固定文字,移动设备尚未发展到图形界面阶段,90年代后，手机开始完善基本通讯功能基础上加入一些附加功能，比如电话簿、短信游戏等，但是显示屏仍然是小屏幕、低分辨率、单色显示、铃声单一、靠键盘输入。,第一款翻盖手机保护按键（3-4）万,移动设备界面设计：,手机的发展过程：,进入21世纪，移动设备依赖一个大爆发的发展，手机开始大屏幕、双屏幕、彩屏等手机铃声效果也越来越好，播

18、放MP3；输入方式变为键盘、触控、语音输入并存；手功能也涵盖了通讯、娱乐、协同工作、生活、学习等诸多方面，所谓的智能机。,移动设备界面设计：,移动设备界面独特特征：,移动设备界面与图形化用户界面在特征上有许多相似之处，都是具有可视性、交互性、透明性、直接操作性，但是自身又有独特性。,1、显示设备：常见手机屏幕分辨率96*65、96*96、128*96、128*128、160*160、160*128、176*144、220*176、240*176、320*240等。这么混乱的分辨率，无法设计通用性界面。2、输入设备：低端产品使用按键作为输入、高端采用按键与触控笔结合，有的配备小规模的电脑键盘。因

19、此移动设备我们就必须考虑产品的输入特点(诺基亚E61）,移动设备界面设计：,移动设备界面独特特征：,移动设备界面与图形化用户界面在特征上有许多相似之处，都是具有可视性、交互性、透明性、直接操作性，但是自身又有独特性。,3、交互方式：一般方式有图像、声音、震动输入形式主要是按键和触控笔操作，如今发展迅速诸如靠改变手持角度实现屏幕的变化，移动屏幕内容和放大缩小功能。4、消费形态A、用途不同B、用户细分和个性化（潮流型、商务型、娱乐型等）C、地域差异明显,移动设备界面设计：,移动设备界面与一般图形化用户界面设计的异同：,1、为特殊的屏幕而设计：,移动设备的屏幕小，分辨率低，也让屏幕空间是宝贵的摩羯们

20、元素的体量就不能过大，一方面，需要在有限的空间了表现界面元素，另一方面界面元素要承担起语义的表达、易于操控、视觉美好的功能，界面设计要尽量让用户得打最大的可用屏幕空间，进入独立操作窗口。,移动设备界面设计：,移动设备界面与一般图形化用户界面设计的异同：,2、为特殊操作方式设计：,移动设备采用按键或者触控笔配合来进行操作，界面设计应充分考虑这些操作方式的特点，找到最合适的方案。比如要选取一定的选项，如果是使用一个两向的方向键，那么选项设计成滚动菜单比较有效，如果使用一个四向的方向键，那么选项设计成宫格式的图标有效率，如果使用一个两向的方向键去选择宫格式图标，用户就会产生困惑。,移动设备界面设计：

21、,移动设备界面与一般图形化用户界面设计的异同：,3、为特殊导航方式设计：,在屏幕较小的情况下，移动设备界面的功能结构往往采取单一树形结构的组织方式无法再各功能项中自由跳转，往往要回到上级菜单重新选择。为了尽可能改善这种情况，在导航上，应提供方便的返回功能；在同一级菜单中，尽量在一屏中显示全部选项；各级菜单都有直观明确的标题；在组织功能上，应合理将功能分级、归纳符合用户思维习惯，并能对用户起到正确的引导作用。,移动设备界面设计：,移动设备界面与一般图形化用户界面设计的异同：,4、为目标用户进行个性化设计：,5、与产品外观相适应,我们的移动设备界面有其特定的产品作为载体，图形界面与产品外观相互呼应

22、。同一风格的界面设计与产品外观相得益彰，构成一个完美的整体。比如，一款金属感高科技感的手机，界面设计成一种非常女性化的设计，那么给人感觉就是不伦不类。,移动设备界面设计：,手机界面设计几个要点：,1、定制界面版式,2、视觉效果,3、视觉元素的设计,移动设备界面设计：,手机界面设计几个要点：,1、定制界面版式,A、iIdle（手机待机界面）、mainmenu（主菜单）、submenu（二级菜单）、third levelMenu（三级菜单）,移动设备界面设计：,手机界面设计几个要点：,1、定制界面版式,B、界面构成的基本单位,状态区,标题区,操作功能区,公共导航区,移动设备界面设计：,手机界面设计

23、几个要点：,1、定制界面版式,B、界面构成的基本单位,状态区,标题区,操作功能区,公共导航区,表示手机目前运行状态及事件的区域，可以包含信号、电池强度、运营商名称。状态区不是必须存在，可依据交互需求进行取舍。,主要是LOGE、版本以及相关的图文信息,是软件的核心部分，也是界面面积最大部分，包含列表、焦点、滚动条、图标等不同元素不同层级的界面包含的元素不同，需要根据具体情况搭配使用。,也称之为软键盘区域，它是对软件操作进行宏观控制区域，所见即所得，它可以保存当前结果、切换当前操作模块、退出系统、实现对软件的灵活操控,移动设备界面设计：,手机界面设计几个要点：,2、视觉效果,手机的视觉效果应该遵循

24、給用户舒适、生机与活力的原则，通过视觉感官刺激增加用户的亲和力，适应不同用户的不同心理特征。,移动设备界面设计：,手机界面设计几个要点：,2、视觉效果,A、简约明快型(适合色彩支持较少颜色的彩屏手机）,基于大块颜色和线条的组合方式，不乏大气，简约且精到、精彩。点线面基本元素的形状构成结合色彩的纯净搭配，干净利落，给用户带来轻松的感受。,移动设备界面设计：,手机界面设计几个要点：,2、视觉效果,A、简约明快型(适合色彩支持较少颜色的彩屏手机）,在设计的过程中基于上述风格设计的思路，在视觉效果的设计上需要参考如下方法：,1、结合界面图形设计的隐喻性，图标图形尽量是间接的平面图形，尽量使用像素化的表

25、现形式,2、展现图形界面的精到之处，合理的使用线条和色彩的渐变，确保细节的完美体现,3、把握界面设计整体色调的同时注意在图标和线条色彩配置上下功夫，以活跃整个画面，避免整个界面色彩单一,移动设备界面设计：,手机界面设计几个要点：,2、视觉效果,B、趣味独创型（创意型）,移动设备界面设计：,手机界面设计几个要点：,2、视觉效果,c、高贵华丽型（支持色彩数量较多的彩屏手机，最好支持带8位Alpha通道的png透明图）,移动设备界面设计：,手机界面设计几个要点：,2、视觉效果,在设计的过程中基于上述风格设计的思路，在视觉效果的设计上需要参考如下方法：,1、塑造界面体积感和质感，根据需要表现透明、半透

26、明、粗糙、光滑等不同的视觉效果,2、图标制作过程中尽量避免生硬的边缘轮廓，提倡渐变、羽化加强图形的仿真性能，使设计趋于人性化,3、考虑界面的整体色调，最好用临近色或者同类色进行色彩搭配采用色彩的弱对比，因为界面图形本身 就结合了体积感和质感的塑造，如果整体色调对比太强，很容易给用户造成眼睛疲劳。,移动设备界面设计：,手机界面设计几个要点：,3、视觉元素的设计,A、图形设计原则,风格统一、简洁、直观、隐喻,A、图形元素设计流程,确定风格、确定图标功能、确定图标造型、进行制作,移动设备界面设计：,手机界面设计几个要点：,确定风格、确定图标功能、确定图标造型、进行制作,移动设备界面设计：,手机界面设计几个要点：,确定风格、确定图标功能、确定图标造型、进行制作,在设计图形之前这一点显得尤为重要，我们设计图标的目的是实用美观，考虑图标的隐喻性，他代表的意思必须是用户可知的、熟知的,移动设备界面设计：,作业：,1、调研目前手机产品的性格分类，人群分类选择具有代表性的手机，或者选择一款手机作为设计的产品载体。得出你的界面设计风格（界面背景设计）。,2、考察手机中的基本界面设计，包括图标设计、基本元素、界面结构设计、帮助设计，形成故事版的设计结构，并表达出来。,