UI设计可用性及视觉要点课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《UI设计可用性及视觉要点课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- UI 设计 可用性 视觉 要点 课件
- 资源描述:
-
1、1DesignUI设计基础课程UI设计基础课程2Contents目录UI的概念、设计流程及设计原则iOS 8 UI界面设计在优秀设计中学习UI3Part OneUI的概念、设计流程、设计原则01014UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。5从心理学意义来分,界面可分为感觉(视觉、触觉、听觉等)和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程,认知心理学、设计学、语言学
2、等在此都扮演着重要的角色。用户界面设计的三大原则是:置界面于用户的控制之下;减少用户的记忆负担;保持界面的一致性。6UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素决定的,其分别是研究工具,研究人与界面的关系,研究人。研究工具研究界面-图形设计师Graphic UI designer美工,但实际上不是单纯意义上的美术工人,而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的,其中大部分是有美术设计教育背景,例如工业外形设计,装潢设计,信息多媒体设计等。7人与界面关系在图形界面产生之前,长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程,树
3、状结构,软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计,并且确立交互模型,交互规范。8研究人任何的产品为了保证质量都需要测试,软件的编码需要测试,自然UI设计也需要被测试。这个测试和编码没有任何关系,主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组,用目标用户问卷的形式来衡量UI设计的合理性。9一致性设计目标软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。元素外观交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别
4、统一的衡量方法。因此需要对目标用户进行调查取得反馈。交互行为在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。10设计流程确认目标用户在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。采集交互方式不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有
5、软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。提示引导用户软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。11可用性可理解软件要为用户使用,用户必须可以理解软件各元素对应的功能。如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。可达到用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素
6、达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。可控制软件的交互流程,用户可以控制。控制功能的执行流程,用户可以控制。如果确实无法提供用户控制,则用能被目标用户理解的方式提示用户。12必备品质1.清晰清晰是用户界面设计必须要具备的一条品质,如果说你的界面设计的很模糊,用户就无法在其中体验到较好的使用体验,这样会影响用户的整体印象。2.简洁UI设计除了清晰还不够,还需要简洁,看上去一目了然。如果界面上充斥着太多的东西,
7、会让用户在查找内容的时候比较困难和乏味,而简洁的画面就能很好的解决这个问题。3.熟悉这里说的熟悉是只在设计UI的时候,要遵守一定的设计规范,就如有下划线的字符是有超链接的、叉号就是要退出或者删除,这样用户在使用的时候不但有熟悉的感觉,而且便于操控。4.响应良好的用户界面设计一定要响应迅速,不能让用户产生一种响应较慢的感受。而且界面应该有提醒的功能,让用户了解到一些反馈信息。5.一致在设计UI时,保持界面风格的一致性也是整个应用设计中很重要的环节,一致的风格不会让用户有错愕感。6.美观美好的事物总会让人有种愉悦之感,在页面设计的时候也要注重美观度的加强。13侧重流程 一个产品设计师的心得分享UI
8、产品设计 心得14ABCPre-processDrawingsPicturesMoodboardWorkWireframesCanvasFoldersUser-testingPost-processDiagramGuidelines15Pre-processDrawingsPicturesMoodboard可以专门用一个笔记本来收集你的创意,不时的翻翻,可能会找到一些非常有趣的旧想法,你可以根据这些旧点子想一些新创意。16Pre-processDrawingsPicturesMoodboard一位艺术家必定是一位收藏家。他懂得品味藏品,而不是单纯的贮藏,他们懂得有选择的去收藏。他们会根据自己内
9、心的喜好去收藏东西。还有一项前期要做的工作就是要收集图片,收集图片的方法可能有好几百种,我还是习惯最Old-School的方法Dropbox文件夹分类,每当有新项目的时候,我就会看看这些图片,用来寻找灵感。17Pre-processDrawingsPicturesMoodboardDribbble,Behance,Pttrns,Pinterest我们有很多可以寻找灵感的地方。而且在这些网站中你很容易找到和你的项目相关的作品,多去看看,你可能会从别人的经验中学会解决问题。当我开始新项目的时候,我总会准备四个文件夹PSD,屏,资源,灵感,我会把和这个项目相关的东西全部按照下面分类丢到文件夹里面。1
10、8Pre-processDrawingsPicturesMoodboard19不必在乎线框图的质量线框图的作用就是让彼此更好的理解目的,而不是最终结果。线框图能够帮助架构层级,让你了解大概需要多少屏界面。设计师必须懂得去“敏捷”设计,如果真的太在意线框图的细节,那么整个设计流程会拉长,设计师应该学会取舍。WorkWireframesCanvasFoldersUser-testing20PSD大尺寸画布最好用PS做一个大尺寸画布,用来承载流程中的一些细节。大尺寸画布不是用来画出整个应用的UI套件,而是用来记录元素在不同阶段的不同状态也就是流程。设计复用很方便开发看到这种东西也会工作的更快。Wor
11、kWireframesCanvasFoldersUser-testing所有屏都放入一个PSD中在设计移动应用时,我喜欢把整个流程中所有屏的界面设计全部装入到一个PSD中整体的对比效果会更好,也更容易让他人理解你的设计理念,元素的复用也非常方便。21和朋友沟通我非常重视那些能够给出专业反馈意见的人。留意他们的反应和初次看到你的设计时的想法,这未尝不是一种用户测试。而且多聆听别人的意见,能够让你从不同角度看待问题。WorkWireframesCanvasFoldersUser-testing22Post-processDiagramGuidelines图示用来暗示交互流程,且能充分感受到视觉设计
12、的细节。23Post-processDiagramGuidelines视觉规范完成了设计工作后,要做的事情就是做出一份视觉规范,然后检查一下整体的视觉层级。UI 套件套件UI套件非常重要,尤其对于工作对接来说,能够保持视觉高度的一致性。配色表字体表要完善的记录LOGO使用的字体,标题使用的字体等等,对于开发会大有裨益,个人复查作品时也会很有帮助。24UI设计新手不可错过的7条法则25法则1:光线来自天空这可能是学习 UI 设计时,最容易忽略却又极为重要的一点了:光线来自天空。光线总是从天空(上方)来的,从下面照上来的光看起来会非常诡异。当光线从天上照下来的时候,物品的上端会偏亮,而下方会出现阴
13、影。上半部分颜色浅一些,而下半部分深一些。26从下面打一束光到人脸上是不是看起来很渗人?UI 设计也是同理。我们的屏幕是平的,但是我们可以通过一些艺术手法让它看起来是 3D 的,在每个元素的下方加一些阴影。27就拿这个按钮举例,这是一个相对“扁平化”(flat)的按钮,但依然可以看出一些光线变化的细节:没有按下去的按钮底部边缘更暗,因为没有光线照到那里。没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面(见侧视图)。没有按下去的按钮下方有一些细微的阴影,在放大图中看得更清楚。按下去的按钮整体颜色都更暗了,但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上,光线不容
14、易照到。也有人说,在现实中,按下去的按钮颜色更深,因为手遮挡住了光线。这么一个简单的按钮就有 4 种不同的光线变化。实际上,我们可以把这种原则运用到各处。28iOS 6 有点过时了,但还是学习光线不错的案例。这张图是 iOS 6“勿扰模式”和“通知”的设置,看看上面有多少种不同的光线变化。控制面板的上边缘有一小块阴影。“开启”滑动槽上部也有阴影。“开启”滑动槽的下半部分,反射了一些光线。按钮是突出的,上边缘较亮,因为是与光源垂直的,接收了大量光线,折射到你的眼睛中。因为光线角度的问题,分割线处出现了阴影。29通常会内嵌的元素:文字输入框按下的按钮滑动槽单选框(未选择的)复选框通常会外凸的元素:
15、未按下的按钮滑动按钮下拉控件卡片选择后的单选按钮弹出消息等等,现在不是追求扁平化的设计吗?iOS 7 引发了科技界对于“扁平化设计”(flat design)的追求。也就是说图标是平的,不再模仿实物而外凸或内凹,只有线条和单一颜色的形状。30我很喜欢这种干净、简洁的风格,但是我认为这种趋势不会长久。通过细微的变化模拟出 3D 的效果非常自然,不会被完全取代的。在不久的将来,我们很可能会看到半扁平的 UI(这也是我推荐你使用的设计风格)我把它称为“flatty design”,依然非常干净简洁,但是也有一些阴影,有轻点、滑动、按下操作的提示。31现在,Google 也在各个产品上推行他们的 Ma
16、terial Design,提供一种统一的视觉设计语言。Material Design 的设计指导为我们展示了它如何运用阴影表现不同的层次。这也是我所认同的类型。用现实世界的元素来传递信息,关键在于:细微。你不能说它没有模仿现实世界,但也绝不是 2006 年的网页风格,没有纹理,没有梯度,更没有光泽。我认为“flatty”是未来的方向。扁平化?早晚会过时的。32法则2:黑白优先在上色前用灰度模式设计可以简化大量的工作,让你更加关注空间和元素布局。设计师现在都喜欢“移动优先”的概念,这就意味着你要先考虑好在手机上如何显示页面,然后才考虑在超清的 Retina 屏幕上的显示效果。这种限制非常好,能
17、够帮你理清思路。先解决一些棘手的问题(在小屏幕上显示)。然后再解决简单的问题(在大屏幕上的可用性)。我希望你先用黑色和白色设计,先把复杂的问题解决了。在不借助颜色帮助的情况下把 app 做得美观易用。最后再有目的地上色。33这种方法能保持 app“干净”、“简洁”。加入过多的颜色很容易毁掉简洁性。“黑白优先”会促使你关注空间、尺寸和布局这些更重要的问题。先来看一些经典的用灰度模式设计的页面。34“黑白优先”法则并不适用于所有情况,比如运动、卡通等有着鲜明特色的设计就需要好好地运用各种颜色。不过,大部分app并没有这样鲜明的特点,只要保持干净和整洁就好,绚丽的颜色被公认是很难设计的,所以,还是先
18、用黑色和白色来吧。3536第二步:如何上色上色最简单的方法就是只加一种颜色。在灰色的基础上只加一种颜色可以简单快速的吸引眼球和注意力。你也可以更进一步,在灰色的基础上加两种颜色,或者添加统一色调的多种颜色。37实践中的颜色法则什么是色调?网页主要用的是十六进制 RGB 表。但 RGB 不是个好的颜色设计框架,HSB 模式会更好用,其中 H(hues)表示色相,S(saturation)表示饱和度,B(brightness)表示亮度。HSB 模式是比 RGB 模式更适合我们看待颜色的方式。如果你对这方面不太了解,以下是一些 HSB 模式简单的入门知识。通过调整单一色相的饱和度和亮度,你可以生成各
19、种不同的颜色深色、浅色、背景色、强调的地方、吸引眼球的地方等,但是又不会很扎眼。使用一种或两种基础色调的多种颜色是强调和淡化某些元素,而又不把设计搞得一团糟的最可靠的方法。38关于颜色的其它几点建议颜色是视觉设计中最复杂的。我从复杂的理论和长期的实践中挑出了一些好的建议送给你:小工具箱:不要用纯黑色:在现实世界中几乎见不到绝对的黑色。调整不同的饱和度可以增加设计的丰富程度,也更接近现实世界。Adobe Color CC:寻找、调整、创造颜色组合的绝佳工具。在Dribble通过颜色搜索:寻找某种颜色如何搭配的好方法,非常实用,如果你已经决定了要用那种颜色,可以通过颜色搜索看看世界顶级的设计师是如
20、何配色的。39法则3:增加空白空间40为了让UI看起来更加有设计感,留出一些空白的空间。在第 2 条法则中,我说到了黑白优先的原则,让设计师在考虑颜色之前先想想空间和布局,那么现在我们就来说说如何安排空间和布局。HTML(超文本标记语言Hypertext Markup Language,是用于描述网页文档的一种标记语言)的默认版式是这样的:所有东西都堆在屏幕上,字号、行距都很小,段与段之间有一些间隔,但是也不是很大。这么布局实在是太难看了。如果你想设计出精美的UI,那就需要留出更多空白的空间。41留白空间、HTML 和 CSS(层叠样式表单),是一种用来表现HTML或 XML 等文件样式的计算
21、机语言。如果习惯用 CSS 来调整布局,那最好改掉这个坏习惯,因为 CSS 默认是没有留出空间的。试着把空白当作默认状态,在空白页面添加各种元素。从没有修饰过的 HTML 开始,先做好内容,然后再做排版。下图是 Piotr Kwiatkowski 设计的一个音乐播放器。42请注意左侧的菜单栏。字号是 12px,行间距有文字的两倍高。再看看列表的名称,“PLAYLISTS”和下划线之间有 15px 的空白,播放列表名称之间还有 25px 的间距。在顶部导航栏也有很大的空间,搜索图标和“Search all music”占到了导航栏高度的 20%。43留白的空间收到了良好的效果,不同的元素有机的组
22、合在一起,使得这个页面成为最好的音乐播放器 UI 之一。大量的空白可以把混乱的界面做得简洁美观,比如这个论坛:44 或者维基百科:很多人认为在维基百科的这个新页面上,很多功能找不到了,但是你不能否认这是学习页面设计的一个好案例。在行之间留出空间。在各个元素之间留出空间。在各组元素之间留出空间。分析一下哪些是可行的。45法则4:学会在图片上呈现文字如果你想要成为好的 UI 设计师,你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错,而水平较低的设计师往往在这方面也比较差,甚至完全不会。在学习了这部分以后,相信你会有很大的提升。46方法0:直接在图片上放文字直接在图片上放文字时,有几
23、点需要非常注意:图片应该比较暗,而且颜色不能有太大的反差。文字必须是白色的,我知道你也能找到用其它颜色的案例。但是我觉得,你最好还是用白色。在不同屏幕,不同尺寸的窗口调试页面,确保各种情况下文字都是清晰、易于辨识的。上面这 3 个方面调整好就 OK 了,不要再做其它处理。47方法1:暗化整张图片可能在图片上放文字最简单的方法就是暗化整张图片,如果原图颜色不够深,你可以用半透明的黑色在上面覆盖一层,比如下面这个案例就加了一层不透明度 35%的黑色。48如果你直接放原图,底色太亮,和文字的反差不够明显,看不清文字。类似的方法同样适用于小图。49加一层黑色是最简单、普适性最强的。当然你也可以用其它合
24、适的颜色,比如这样:50方法2:给文字加个框这是一种简单有效的方法。在白色文字下方加上一个略透明的黑色方块,就可以放在各种各样的图片上了,而且显示效果非常清晰。当然,你也可以放别的颜色,只是需要小心谨慎。51方法3:虚化图片虚化图片是增加文字易读性的好方法,把文字下方的图片虚化了,同时把虚化部分亮度调低。iOS 7 用毛玻璃的效果虚化了背景52虚化图片的方法也有局限性,你需要确保在不同屏幕上图片尺寸调整后,文字依然是在虚化的区域上的。53看看下面这个例子,你能看清小标题吗?真不知道这样的设计是怎么通过审核上线的。54方法4:底部褪色所谓底部褪色是将图片的下边缘变暗一些,然后在放上白色的文字。这
25、是一种非常有独创性的方法,我不知道在 Medium 之前有没有人用过,但我是先在 Medium 上看到的。乍一看,你可能觉得这就是把文字放在了图片上。其实不然,图片上有一些非常细微的变化,中间完全没有黑色覆盖,而底部有不透明度大约 20%的黑色覆盖在上面。这样的变化很难看出来,但确实存在,而且确实提高了文字的可辨认性。此外,Medium 还给文集图片上的文字加了些许阴影,进一步提高了文字的易读性。最终的效果就是 Medium 可以把任何文字放在任何图片上,阅读体验非常好。有人可能会问了,为什么是把图片的底部变暗呢?为什么不能是图片的其它区域?要回答这个问题,请看法则1:光线来自天空。光线从上面
展开阅读全文