《UI设计可用性及视觉要点课件》由会员分享，可在线阅读，更多相关《UI设计可用性及视觉要点课件（114页珍藏版）》请在金锄头文库上搜索。
1、DesignUI设计基础课程UI设计基础课程1Contents目录UI的概念、设计流程及设计原则iOS 8 UI界面设计在优秀设计中学习UI2PartOneUI的概念、设计流程、设计原则01013UI即UserInterface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。4从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此
2、都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。5UI设计从工作内容上来说分为3个方向。它主要是由UI研究的3个因素决定的，其分别是研究工具，研究人与界面的关系，研究人。研究工具研究界面-图形设计师Graphic UI designer美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。6人与界面关系在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，
3、软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。7研究人任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。8一致性设计目标软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。元素外观交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡
4、量方法。因此需要对目标用户进行调查取得反馈。交互行为在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。9设计流程确认目标用户在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。采集交互方式不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的
5、交互流程。当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。提示引导用户软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。10可用性可理解软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。可达到用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在
6、此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。可控制软件的交互流程，用户可以控制。控制功能的执行流程，用户可以控制。如果确实无法提供用户控制，则用能被目标用户理解的方式提示用户。11必备品质1.清晰清晰是用户界面设计必须要具备的一条品质，如果说你的界面设计的很模糊，用户就无法在其中体验到较好的使用体验，这样会影响用户的整体印象。2.简洁UI设计除了清晰还不够，还需要简洁，看上去一目了然。如果界面上充斥着太多的东西，会让用户在
7、查找内容的时候比较困难和乏味，而简洁的画面就能很好的解决这个问题。3.熟悉这里说的熟悉是只在设计UI的时候，要遵守一定的设计规范，就如有下划线的字符是有超链接的、叉号就是要退出或者删除，这样用户在使用的时候不但有熟悉的感觉，而且便于操控。4.响应良好的用户界面设计一定要响应迅速，不能让用户产生一种响应较慢的感受。而且界面应该有提醒的功能，让用户了解到一些反馈信息。5.一致在设计UI时，保持界面风格的一致性也是整个应用设计中很重要的环节，一致的风格不会让用户有错愕感。6.美观美好的事物总会让人有种愉悦之感，在页面设计的时候也要注重美观度的加强。12侧重流程一个产品设计师的心得分享UI产品设计 心
8、得13ABCPre-processDrawingsPicturesMoodboardWorkWireframesCanvasFoldersUser-testingPost-processDiagramGuidelines14Pre-processDrawingsPicturesMoodboard可以专门用一个笔记本来收集你的创意，不时的翻翻，可能会找到一些非常有趣的旧想法，你可以根据这些旧点子想一些新创意。15Pre-processDrawingsPicturesMoodboard一位艺术家必定是一位收藏家。他懂得品味藏品，而不是单纯的贮藏，他们懂得有选择的去收藏。他们会根据自己内心的喜好去收
9、藏东西。还有一项前期要做的工作就是要收集图片，收集图片的方法可能有好几百种，我还是习惯最Old-School的方法Dropbox文件夹分类，每当有新项目的时候，我就会看看这些图片，用来寻找灵感。16Pre-processDrawingsPicturesMoodboardDribbble，Behance，Pttrns，Pinterest我们有很多可以寻找灵感的地方。而且在这些网站中你很容易找到和你的项目相关的作品，多去看看，你可能会从别人的经验中学会解决问题。当我开始新项目的时候，我总会准备四个文件夹PSD，屏，资源，灵感，我会把和这个项目相关的东西全部按照下面分类丢到文件夹里面。17Pre-p
10、rocessDrawingsPicturesMoodboard18不必在乎线框图的质量线框图的作用就是让彼此更好的理解目的，而不是最终结果。线框图能够帮助架构层级，让你了解大概需要多少屏界面。设计师必须懂得去“敏捷”设计，如果真的太在意线框图的细节，那么整个设计流程会拉长，设计师应该学会取舍。WorkWireframesCanvasFoldersUser-testing19PSD大尺寸画布最好用PS做一个大尺寸画布，用来承载流程中的一些细节。大尺寸画布不是用来画出整个应用的UI套件，而是用来记录元素在不同阶段的不同状态也就是流程。设计复用很方便开发看到这种东西也会工作的更快。WorkWiref
11、ramesCanvasFoldersUser-testing所有屏都放入一个PSD中在设计移动应用时，我喜欢把整个流程中所有屏的界面设计全部装入到一个PSD中整体的对比效果会更好，也更容易让他人理解你的设计理念，元素的复用也非常方便。20和朋友沟通我非常重视那些能够给出专业反馈意见的人。留意他们的反应和初次看到你的设计时的想法，这未尝不是一种用户测试。而且多聆听别人的意见，能够让你从不同角度看待问题。WorkWireframesCanvasFoldersUser-testing21Post-processDiagramGuidelines图示用来暗示交互流程，且能充分感受到视觉设计的细节。22
12、Post-processDiagramGuidelines视觉规范完成了设计工作后，要做的事情就是做出一份视觉规范，然后检查一下整体的视觉层级。UI 套件套件UI套件非常重要，尤其对于工作对接来说，能够保持视觉高度的一致性。配色表字体表要完善的记录LOGO使用的字体，标题使用的字体等等，对于开发会大有裨益，个人复查作品时也会很有帮助。23UI设计新手不可错过的7条法则24法则1：光线来自天空这可能是学习UI设计时，最容易忽略却又极为重要的一点了:光线来自天空。光线总是从天空（上方）来的，从下面照上来的光看起来会非常诡异。当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴影。上半部分颜色
13、浅一些，而下半部分深一些。25从下面打一束光到人脸上是不是看起来很渗人？UI设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是3D的，在每个元素的下方加一些阴影。26就拿这个按钮举例，这是一个相对“扁平化”(flat)的按钮，但依然可以看出一些光线变化的细节:没有按下去的按钮底部边缘更暗，因为没有光线照到那里。没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面（见侧视图）。没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。按下去的按钮整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容易照到。也有人说，在现
14、实中，按下去的按钮颜色更深，因为手遮挡住了光线。这么一个简单的按钮就有4种不同的光线变化。实际上，我们可以把这种原则运用到各处。27iOS6有点过时了，但还是学习光线不错的案例。这张图是iOS6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线变化。控制面板的上边缘有一小块阴影。“开启”滑动槽上部也有阴影。“开启”滑动槽的下半部分，反射了一些光线。按钮是突出的，上边缘较亮，因为是与光源垂直的，接收了大量光线，折射到你的眼睛中。因为光线角度的问题，分割线处出现了阴影。28通常会内嵌的元素：文字输入框按下的按钮滑动槽单选框（未选择的）复选框通常会外凸的元素:未按下的按钮滑动按钮下拉控件卡片选
15、择后的单选按钮弹出消息等等，现在不是追求扁平化的设计吗？iOS7引发了科技界对于“扁平化设计”(flatdesign)的追求。也就是说图标是平的，不再模仿实物而外凸或内凹，只有线条和单一颜色的形状。29我很喜欢这种干净、简洁的风格，但是我认为这种趋势不会长久。通过细微的变化模拟出3D的效果非常自然，不会被完全取代的。在不久的将来，我们很可能会看到半扁平的UI（这也是我推荐你使用的设计风格）我把它称为“flattydesign”，依然非常干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提示。30现在，Google也在各个产品上推行他们的MaterialDesign，提供一种统一的视觉设计语言
16、。MaterialDesign的设计指导为我们展示了它如何运用阴影表现不同的层次。这也是我所认同的类型。用现实世界的元素来传递信息，关键在于:细微。你不能说它没有模仿现实世界，但也绝不是2006年的网页风格，没有纹理，没有梯度，更没有光泽。我认为“flatty”是未来的方向。扁平化？早晚会过时的。31法则2：黑白优先在上色前用灰度模式设计可以简化大量的工作，让你更加关注空间和元素布局。设计师现在都喜欢“移动优先”的概念，这就意味着你要先考虑好在手机上如何显示页面，然后才考虑在超清的Retina屏幕上的显示效果。这种限制非常好，能够帮你理清思路。先解决一些棘手的问题（在小屏幕上显示）。然后再解决简单的问题（在大屏幕上的可用性）。我希望你先用黑色和白色设计，先把复杂的问题解决了。在不借助颜色帮助的情况下把app做得美观易用。最后再有目的地上色。32这种方法能保持app“干净”、“简洁”。加入过多的颜色很容易毁掉简洁性。“黑白优先”会促使你关注空间、尺寸和布局这些更重要的问题。先来看一些经典的用灰度模式设计的页面。33“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明特色的设计就需
