UI设计可用性及视觉要点课件

DesignUI设计基础课程UI设计基础课程1DesignUI设计基础课程UI设计基础课程1Contents目录UI的概念、设计流程及设计原则iOS8UI界面设计——在优秀设计中学习UI2Contents目录UI的概念、设计流程及设计原则iOS8PartOneUI的概念、设计流程、设计原则013PartOneUI的概念、设计流程、设计原则013UI即UserInterface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。4UI即UserInterface（用户界面）的简称。UI设从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。5从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感UI设计从工作内容上来说分为3个方向。它主要是由UI研究的3个因素决定的，其分别是研究工具，研究人与界面的关系，研究人。研究工具研究界面----图形设计师GraphicUIdesigner美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。6UI设计从工作内容上来说分为3个方向。它主要是由UI研究的人与界面关系在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。77研究人任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。88一致性设计目标软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。元素外观交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。交互行为在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。9一致性9设计流程确认目标用户在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。采集交互方式不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。提示引导用户软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。10设计流程10可用性可理解软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。可达到用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。可控制软件的交互流程，用户可以控制。控制功能的执行流程，用户可以控制。如果确实无法提供用户控制，则用能被目标用户理解的方式提示用户。11可用性11必备品质1.清晰清晰是用户界面设计必须要具备的一条品质，如果说你的界面设计的很模糊，用户就无法在其中体验到较好的使用体验，这样会影响用户的整体印象。2.简洁UI设计除了清晰还不够，还需要简洁，看上去一目了然。如果界面上充斥着太多的东西，会让用户在查找内容的时候比较困难和乏味，而简洁的画面就能很好的解决这个问题。3.熟悉这里说的熟悉是只在设计UI的时候，要遵守一定的设计规范，就如有下划线的字符是有超链接的、叉号就是要退出或者删除，这样用户在使用的时候不但有熟悉的感觉，而且便于操控。4.响应良好的用户界面设计一定要响应迅速，不能让用户产生一种响应较慢的感受。而且界面应该有提醒的功能，让用户了解到一些反馈信息。5.一致在设计UI时，保持界面风格的一致性也是整个应用设计中很重要的环节，一致的风格不会让用户有错愕感。6.美观美好的事物总会让人有种愉悦之感，在页面设计的时候也要注重美观度的加强。12必备品质12侧重流程——一个产品设计师的心得分享UI产品设计

心得13侧重流程——一个产品设计师的心得分享UI产品设计13ABCPre-processDrawingsPicturesMoodboardWorkWireframesCanvasFoldersUser-testingPost-processDiagramGuidelines14ABCPre-processWorkPost-processPre-processDrawingsPicturesMoodboard可以专门用一个笔记本来收集你的创意，不时的翻翻，可能会找到一些非常有趣的旧想法，你可以根据这些旧点子想一些新创意。15Pre-process可以专门用一个笔记本来收集你的创意，不Pre-processDrawingsPicturesMoodboard"一位艺术家必定是一位收藏家。他懂得品味藏品，而不是单纯的‘贮藏’，他们懂得有选择的去收藏。他们会根据自己内心的喜好去收藏东西。"还有一项前期要做的工作就是要收集图片，收集图片的方法可能有好几百种，我还是习惯最Old-School的方法——Dropbox文件夹分类，每当有新项目的时候，我就会看看这些图片，用来寻找灵感。16Pre-process"一位艺术家必定是一位收藏家。他懂得品Pre-processDrawingsPicturesMoodboardDribbble，Behance，Pttrns，Pinterest——我们有很多可以寻找灵感的地方。而且在这些网站中你很容易找到和你的项目相关的作品，多去看看，你可能会从别人的经验中学会解决问题。当我开始新项目的时候，我总会准备四个文件夹——PSD，屏，资源，灵感，我会把和这个项目相关的东西全部按照下面分类丢到文件夹里面。17Pre-processDribbble，Behance，PtPre-processDrawingsPicturesMoodboard18Pre-process18不必在乎线框图的质量线框图的作用就是让彼此更好的理解目的，而不是最终结果。线框图能够帮助架构层级，让你了解大概需要多少屏界面。设计师必须懂得去“敏捷”设计，如果真的太在意线框图的细节，那么整个设计流程会拉长，设计师应该学会取舍。WorkWireframesCanvasFoldersUser-testing19不必在乎线框图的质量Work19PSD—大尺寸画布最好用PS做一个大尺寸画布，用来承载流程中的一些细节。大尺寸画布不是用来画出整个应用的UI套件，而是用来记录元素在不同阶段的不同状态——也就是流程。设计复用很方便开发看到这种东西也会工作的更快。WorkWireframesCanvasFoldersUser-testing所有屏都放入一个PSD中在设计移动应用时，我喜欢把整个流程中所有屏的界面设计全部装入到一个PSD中整体的对比效果会更好，也更容易让他人理解你的设计理念，元素的复用也非常方便。20PSD—大尺寸画布Work所有屏都放入一个PSD中20和朋友沟通我非常重视那些能够给出专业反馈意见的人。留意他们的反应和初次看到你的设计时的想法，这未尝不是一种用户测试。而且多聆听别人的意见，能够让你从不同角度看待问题。WorkWireframesCanvasFoldersUser-testing21和朋友沟通Work21Post-processDiagramGuidelines图示用来暗示交互流程，且能充分感受到视觉设计的细节。22Post-process图示22Post-processDiagramGuidelines视觉规范完成了设计工作后，要做的事情就是做出一份视觉规范，然后检查一下整体的视觉层级。UI套件UI套件非常重要，尤其对于工作对接来说，能够保持视觉高度的一致性。配色表字体表——要完善的记录LOGO使用的字体，标题使用的字体等等，对于开发会大有裨益，个人复查作品时也会很有帮助。23Post-process视觉规范配色表字体表——要完善的记录UI设计新手不可错过的7条法则24UI设计新手不可错过的24法则1：光线来自天空这可能是学习UI设计时，最容易忽略却又极为重要的一点了:光线来自天空。光线总是从天空（上方）来的，从下面照上来的光看起来会非常诡异。当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴影。上半部分颜色浅一些，而下半部分深一些。25法则1：光线来自天空25从下面打一束光到人脸上是不是看起来很渗人？UI设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是3D的，在每个元素的下方加一些阴影。26从下面打一束光到人脸上是不是看起来很渗人？UI设计也是同理就拿这个按钮举例，这是一个相对“扁平化”(flat)的按钮，但依然可以看出一些光线变化的细节:没有按下去的按钮底部边缘更暗，因为没有光线照到那里。没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面（见侧视图）。没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。按下去的按钮整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容易照到。也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。这么一个简单的按钮就有4种不同的光线变化。实际上，我们可以把这种原则运用到各处。27就拿这个按钮举例，这是一个相对“扁平化”(flat)的按钮iOS6有点过时了，但还是学习光线不错的案例。这张图是iOS6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线变化。控制面板的上边缘有一小块阴影。“开启”滑动槽上部也有阴影。“开启”滑动槽的下半部分，反射了一些光线。按钮是突出的，上边缘较亮，因为是与光源垂直的，接收了大量光线，折射到你的眼睛中。因为光线角度的问题，分割线处出现了阴影。28iOS6有点过时了，但还是学习光线不错的案例。这张图是通常会内嵌的元素：文字输入框\按下的按钮\滑动槽\单选框（未选择的）\复选框通常会外凸的元素:未按下的按钮\滑动按钮\下拉控件\卡片\选择后的单选按钮\弹出消息等等，现在不是追求扁平化的设计吗？iOS7引发了科技界对于“扁平化设计”(flatdesign)的追求。也就是说图标是平的，不再模仿实物而外凸或内凹，只有线条和单一颜色的形状。29通常会内嵌的元素：29我很喜欢这种干净、简洁的风格，但是我认为这种趋势不会长久。通过细微的变化模拟出3D的效果非常自然，不会被完全取代的。在不久的将来，我们很可能会看到半扁平的UI（这也是我推荐你使用的设计风格）我把它称为“flattydesign”，依然非常干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提示。30我很喜欢这种干净、简洁的风格，但是我认为这种趋势不会长久。通现在，Google也在各个产品上推行他们的MaterialDesign，提供一种统一的视觉设计语言。MaterialDesign的设计指导为我们展示了它如何运用阴影表现不同的层次。这也是我所认同的类型。用现实世界的元素来传递信息，关键在于:细微。你不能说它没有模仿现实世界，但也绝不是2006年的网页风格，没有纹理，没有梯度，更没有光泽。我认为“flatty”是未来的方向。扁平化？早晚会过时的。31现在，Google也在各个产品上推行他们的Materia法则2：黑白优先在上色前用灰度模式设计可以简化大量的工作，让你更加关注空间和元素布局。设计师现在都喜欢“移动优先”的概念，这就意味着你要先考虑好在手机上如何显示页面，然后才考虑在超清的Retina屏幕上的显示效果。这种限制非常好，能够帮你理清思路。先解决一些棘手的问题（在小屏幕上显示）。然后再解决简单的问题（在大屏幕上的可用性）。我希望你先用黑色和白色设计，先把复杂的问题解决了。在不借助颜色帮助的情况下把app做得美观易用。最后再有目的地上色。32法则2：黑白优先32这种方法能保持app“干净”、“简洁”。加入过多的颜色很容易毁掉简洁性。“黑白优先”会促使你关注空间、尺寸和布局这些更重要的问题。先来看一些经典的用灰度模式设计的页面。33这种方法能保持app“干净”、“简洁”。加入过多的颜色很容“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明特色的设计就需要好好地运用各种颜色。不过，大部分app并没有这样鲜明的特点，只要保持干净和整洁就好，绚丽的颜色被公认是很难设计的，所以，还是先用黑色和白色来吧。34“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明3535第二步:如何上色上色最简单的方法就是只加一种颜色。在灰色的基础上只加一种颜色可以简单快速的吸引眼球和注意力。你也可以更进一步，在灰色的基础上加两种颜色，或者添加统一色调的多种颜色。36第二步:如何上色36实践中的颜色法则——什么是色调？网页主要用的是十六进制RGB表。但RGB不是个好的颜色设计框架，HSB模式会更好用，其中H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度。HSB模式是比RGB模式更适合我们看待颜色的方式。如果你对这方面不太了解，以下是一些HSB模式简单的入门知识。通过调整单一色相的饱和度和亮度，你可以生成各种不同的颜色——深色、浅色、背景色、强调的地方、吸引眼球的地方等，但是又不会很扎眼。使用一种或两种基础色调的多种颜色是强调和淡化某些元素，而又不把设计搞得一团糟的最可靠的方法。37实践中的颜色法则——什么是色调？37关于颜色的其它几点建议颜色是视觉设计中最复杂的。我从复杂的理论和长期的实践中挑出了一些好的建议送给你:小工具箱：不要用纯黑色：在现实世界中几乎见不到绝对的黑色。调整不同的饱和度可以增加设计的丰富程度，也更接近现实世界。AdobeColorCC：寻找、调整、创造颜色组合的绝佳工具。在Dribble通过颜色搜索：寻找某种颜色如何搭配的好方法，非常实用，如果你已经决定了要用那种颜色，可以通过颜色搜索看看世界顶级的设计师是如何配色的。38关于颜色的其它几点建议38法则3：增加空白空间39法则3：增加空白空间39为了让UI看起来更加有设计感，留出一些空白的空间。在第2条法则中，我说到了黑白优先的原则，让设计师在考虑颜色之前先想想空间和布局，那么现在我们就来说说如何安排空间和布局。HTML（超文本标记语言Hypertext

Markup

Language，是用于描述网页文档的一种标记语言）的默认版式是这样的：所有东西都堆在屏幕上，字号、行距都很小，段与段之间有一些间隔，但是也不是很大。这么布局实在是太难看了。如果你想设计出精美的UI，那就需要留出更多空白的空间。40为了让UI看起来更加有设计感，留出一些空白的空间。40留白空间、HTML和CSS（层叠样式表单），是一种用来表现HTML或XML等文件样式的计算机语言。如果习惯用CSS来调整布局，那最好改掉这个坏习惯，因为CSS默认是没有留出空间的。试着把空白当作默认状态，在空白页面添加各种元素。从没有修饰过的HTML开始，先做好内容，然后再做排版。下图是PiotrKwiatkowski设计的一个音乐播放器。41留白空间、HTML和CSS（层叠样式表单），是一种用来表请注意左侧的菜单栏。字号是12px，行间距有文字的两倍高。再看看列表的名称，“PLAYLISTS”和下划线之间有15px的空白，播放列表名称之间还有25px的间距。在顶部导航栏也有很大的空间，搜索图标和“Searchallmusic”占到了导航栏高度的20%。42请注意左侧的菜单栏。字号是12px，行间距有文字的两倍高。留白的空间收到了良好的效果，不同的元素有机的组合在一起，使得这个页面成为最好的音乐播放器UI之一。大量的空白可以把混乱的界面做得简洁美观，比如这个论坛：43留白的空间收到了良好的效果，不同的元素有机的组合在一起，使得

或者维基百科：很多人认为在维基百科的这个新页面上，很多功能找不到了，但是你不能否认这是学习页面设计的一个好案例。在行之间留出空间。在各个元素之间留出空间。在各组元素之间留出空间。分析一下哪些是可行的。44或者维基百科：44法则4：学会在图片上呈现文字如果你想要成为好的UI设计师，你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错，而水平较低的设计师往往在这方面也比较差，甚至完全不会。在学习了这部分以后，相信你会有很大的提升。45法则4：学会在图片上呈现文字45方法0：直接在图片上放文字直接在图片上放文字时，有几点需要非常注意：图片应该比较暗，而且颜色不能有太大的反差。文字必须是白色的，我知道你也能找到用其它颜色的案例。但是我觉得，你最好还是用白色。在不同屏幕，不同尺寸的窗口调试页面，确保各种情况下文字都是清晰、易于辨识的。上面这3个方面调整好就OK了，不要再做其它处理。46方法0：直接在图片上放文字46方法1：暗化整张图片可能在图片上放文字最简单的方法就是暗化整张图片，如果原图颜色不够深，你可以用半透明的黑色在上面覆盖一层，比如下面这个案例就加了一层不透明度35%的黑色。47方法1：暗化整张图片47如果你直接放原图，底色太亮，和文字的反差不够明显，看不清文字。类似的方法同样适用于小图。48如果你直接放原图，底色太亮，和文字的反差不够明显，看不清文字加一层黑色是最简单、普适性最强的。当然你也可以用其它合适的颜色，比如这样：49加一层黑色是最简单、普适性最强的。当然你也可以用其它合适的颜方法2：给文字加个框这是一种简单有效的方法。在白色文字下方加上一个略透明的黑色方块，就可以放在各种各样的图片上了，而且显示效果非常清晰。当然，你也可以放别的颜色，只是需要小心谨慎。50方法2：给文字加个框50方法3：虚化图片虚化图片是增加文字易读性的好方法，把文字下方的图片虚化了，同时把虚化部分亮度调低。iOS7用毛玻璃的效果虚化了背景51方法3：虚化图片51虚化图片的方法也有局限性，你需要确保在不同屏幕上图片尺寸调整后，文字依然是在虚化的区域上的。5252看看下面这个例子，你能看清小标题吗？真不知道这样的设计是怎么通过审核上线的。5353方法4：底部褪色所谓底部褪色是将图片的下边缘变暗一些，然后在放上白色的文字。这是一种非常有独创性的方法，我不知道在Medium

之前有没有人用过，但我是先在Medium上看到的。乍一看，你可能觉得这就是把文字放在了图片上。其实不然，图片上有一些非常细微的变化，中间完全没有黑色覆盖，而底部有不透明度大约20%的黑色覆盖在上面。这样的变化很难看出来，但确实存在，而且确实提高了文字的可辨认性。此外，Medium还给文集图片上的文字加了些许阴影，进一步提高了文字的易读性。最终的效果就是Medium可以把任何文字放在任何图片上，阅读体验非常好。有人可能会问了，为什么是把图片的底部变暗呢？为什么不能是图片的其它区域？要回答这个问题，请看法则1：光线来自天空。光线从上面照下来，图片的上方亮一些，而底部较暗，看起来更自然。54方法4：底部褪色54此外，你还可以把虚化和底部褪色结合起来，做出底部虚化的效果，比如下面这张图的效果：55此外，你还可以把虚化和底部褪色结合起来，做出底部虚化的效果，方法5：把图片部分区域的光线变得更柔和Elastica的博客的题图并不是太暗，而且对比都较强。为什么文字的辨识度还这么高呢，就像下面两张图显示的这样：56方法5：把图片部分区域的光线变得更柔和56这里实际上是把图片局部区域的光线变得更柔和，突出了文字。如果我们在浏览器上缩小Elastica博客，会看出到底发生了什么。在图片左下角有一块阴影区域，文字置于其上，就很容易辨认了。这可能是在图片优雅呈现文字最细微的一种方法。我还没在别处见过，保存下来，说不定将来什么时候就用到了。57这里实际上是把图片局部区域的光线变得更柔和，突出了文字。如果法则5：做好强调与弱化把文字设计得又美观又得体通常就是通过放大或缩小文字，做出反差的效果。我认为，UI设计最困难的地方就在于文字的装饰，因为设计文字时需要考虑的因素太多了：字号颜色字体粗细大小写斜体字母间距页边空白（准确的说不是文字的一部分，但是容易影响阅读时的注意力，所以也算在这个列表里了）下划线

现在基本上等同于超链接了，我觉得你还是不要挑战人们的常识比较好。文字背景色

这个有时候也被当作超链接，只不过不是那么常见。就我个人经验来说，当我觉得一段文字设计的不好时，通常不是因为用了大写字母，或者颜色太重，而是因为各种要素的搭配出了问题。强调和弱化你可以把所有的文字样式分成两类：增强可读性的样式：大字号、粗体、大写等；减弱可读性的样式：小字号、与背景对比不明显、空白较少等。58法则5：做好强调与弱化58上图“MaterialDesign”这个标题就很突出：字号大、反衬明显、字体较粗59上图“MaterialDesign”这个标题就很突出：字号上图页脚的字就是弱化处理的，字号小、反衬不明显、字体较细我认为文字设计的核心在于：标题是唯一需要全部强调的元素，其它的部分则应该将强调与弱化结合使用。如果网页上某个元素需要强调，把强调和弱化结合在一起，可以避免整个页面看起来太有压迫感，同时又让各个元素的呈现效果恰到好处。60上图页脚的字就是弱化处理的，字号小、反衬不明显、字体较细我认上面这张BluHomes的首页堪称是这方面的典范：上方文字较大，突出显示，但是用了小写字母。没有给人强烈的压迫感。网页上的数字字号较大，是网页上的重要信息。但是请注意，数字的字体很细，与背景色对比也不明显；而数字下方的单位虽然写得很小，却全部加粗，用大写字母。这就是设计中的平衡。61上面这张BluHomes的首页堪称是这方面的典范：上方文通常情况下，改变字体大小、大小写、粗细时会改变文字所占空间的大小，让人们理解鼠标正悬停在这里。此外，下面这些要素也能够影响人们的感受：文字颜色背景色阴影下划线细小的动画——上升、下降等装饰文字是非常难的，但是每当我感到“这些文字不可能再变好看时”，我的判断都是错的。我需要做的就是不断优化，不断尝试。所以想开点吧，如果你设计出来的文字不好看，不要担心，你需要不断地提升自己的能力，让自己变得更好。62通常情况下，改变字体大小、大小写、粗细时会改变文字所占空间的法则6：只用合适的字体有些字体很不错，就用它们吧。有的网站很有个性，会用到比较特别的字体。但是，大多数产品的UI设计只要保持干净、简洁就可以了。所以，把那些太花哨的字体放到一边吧。我希望你把这些字体下载下来，在你开始项目设计之前，浏览一下它们。63法则6：只用合适的字体63Ubuntu（上图）——字体偏粗，对于有些app来说太张扬了，但是对于大多数app来说还是不错的。在GoogleFonts上可以找到.64Ubuntu（上图）——字体偏粗，对于有些app来说太张OpenSans——非常易于辩读，是一款很流行的字体，用在正文非常合适，在GoogleFonts上也能找到。65OpenSans——非常易于辩读，是一款很流行的字体，用在BebasNeue——适合作标题，都是大写字母，在Fontfabric上能找到，这个网站上还有一些BebasNeue的应用实例。66BebasNeue——适合作标题，都是大写字母，在FonMontserrat——只有两种粗细，但也足够了。是Gotham和ProximateNova最好的免费替代品，但不如那两种好。在GoogleFonts上能找到。67Montserrat——只有两种粗细，但也足够了。是GotRaleway——适合作标题，但不适合用于正文。有一个极细的版本（上图没有展现），在GoogleFonts可以找到。68Raleway——适合作标题，但不适合用于正文。有一个极细的Cabin——在GoogleFonts可以找到。69Cabin——在GoogleFonts可以找到。69Lato——在GoogleFonts可以找到。70Lato——在GoogleFonts可以找到。70PTSans——在GoogleFonts可以找到。71PTSans——在GoogleFonts可以找到。7EntypoSocial——一个社交网络图标集，在E上能找到。72EntypoSocial——一个社交网络图标集，在Ent这里还有其它一些资源：BeautifulGooglewebfonts——有GoogleFonts的运用实例，我经常在这里找灵感。FontSquiirrel——收集了不少可以免费商用的好字体。Typekit——如果你用AdobeCreativeCloud（也就是用Photoshop或Illustrator等），你就可以从Typekit中获得包括ProximateNova在内的大量字体。73这里还有其它一些资源：73法则7：像艺术家一样偷师我第一次坐下来试着设计按钮、图标、弹窗等各个app元素时，我感到我对于什么是“好”知之甚少。但是我也很幸运，我并不需要完全设计全新的UI，因为有很多优秀的作品可以借鉴。下面列出一些资源，肯定会对你的设计非常有用(按照重要性从高到低排列)1.Dribbble这个专为设计师而做的网站集合了网上最好的UI设计作品，在Dribbble上你能找到几乎各种类型的案例。VictorErixon——有着非常明显的个人风格，非常厉害。他的作品很漂亮、简洁，扁平设计。他做UI设计师已经3年了，是这方面数一数二的人才。74法则7：像艺术家一样偷师74FocusLab——这些人是Dribbble中的名人，他们的作品非常多样化，绝对是一流的。75FocusLab——这些人是Dribbble中的名人，FocusLab——这些人是Dribbble中的名人，他们的作品非常多样化，绝对是一流的。76FocusLab——这些人是Dribbble中的名人，2.FlatUIPinboard这里面有一些特别棒的手机UI设计，你能找到很多精美的UI设计实例。772.FlatUIPinboard773.Pttrns这里面有大量app截屏，它的一大好处在于，它是按照UX模式分类的，因此，你在搜索你手头正在做的这一类作品时非常方便。我坚定地认为每个艺术家初期都该像鹦鹉一样，不断的模仿和学习，直到能把顶尖的作品模仿得惟妙惟肖，然后再开始找到自己的风格，引领新的潮流。所以，像个艺术家一样偷师吧！783.Pttrns78PartTwoiOS8UI界面设计——在优秀设计中学习UI0279PartTwoiOS8UI界面设计——在优秀设计中学习2.1为iOS而设计（DesigningforiOS）iOS的革新关键词如下：

遵从：UI能够更好地帮助用户理解内容并与之互动，但却不会分散用户对内容本身的注意力。清晰：各种大小的文字应该易读，图标应该醒目，去除多余的修饰，突出重点，很好地突显了设计理念。深度：视觉的层次和生动的交互动作会赋予UI新的活力，不但帮助用户更好理解新UI的操作并让用户在使用过程中感到惊喜。802.1为iOS而设计（DesigningforiOS）2.1.1以内容为核心（DefertoContent）虽然明快美观的UI和流畅的动态效果是iOS体验的亮点，但内容始终是iOS的核心。这里有一些方法，以确保你的设计能够提升你的应用功能体验并关注内容本身。a，充分利用整个屏幕天气应用是最好的例子：漂亮的天气图片充满全屏，呈现用户所在地当前天气情况这最重要的信息，同时也留出空间呈现了每个时段的气温数据。812.1.1以内容为核心（DefertoContent）b，尽量减少视觉修饰和拟物化设计的使用UI面板、渐变和阴影有时会让UI元素显得很厚重，致使抢了内容的风头。应该以内容为核心，让UI成为内容的支撑。82b，尽量减少视觉修饰和拟物化设计的使用82c,尝试使用半透明底板半透明的控件——比如控制中心——关联了使用场景，帮助用户看到更多可用的内容，并可以起到短暂的提示作用。在iOS中，透明的控件只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸一样——它并没有遮挡屏幕剩余的部分。83c,尝试使用半透明底板832.1.2保证清晰度（ProvideClarity）保证清晰度是另一个方法，以确保你的应用中内容始终是核心。以下是几种方法，让最重要的内容和功能清晰，易于交互。a,使用大量留白留白让重要内容和功能显得更加醒目。此外，留白可以传达一种平静和安宁的视觉感受，它可以使一个应用看起来更加聚焦和高效。842.1.2保证清晰度（ProvideClarity）84b,让颜色简化UI一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个应用一个统一的视觉主题。内置应用使用家族化的系统颜色，无论在深色和浅色背景上看起来都干净，纯粹。85b,让颜色简化UI85c,通过使用系统字体确保易读性iOS的系统字体自动调整行间距和行的高度，使阅读时文本清晰易读，无论何种大小的字号都表现良好。无论你是使用系统或是自定义字体，务必使用动态型，这样你的应用可以在用户选择不同字号时做出应对。86c,通过使用系统字体确保易读性86d,使用无边框的按钮默认情况下，所有bar上的按钮都是无边框的。在内容区域，无边框按钮以文案、颜色以及操作指引标题来表明按钮功能。当按钮被激活时，该按钮呈现高亮的浅色状态来作为操作响应。87d,使用无边框的按钮872.1.3用深度来体现层次（UseDepthtoCommunicate）iOS经常在不同的层级上展现内容，用以表达分组和位置，并帮助用户了解在屏幕上的对象之间的关系。通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。882.1.3用深度来体现层次（UseDepthtoCo2.2适应性和布局(AdaptivityandLayout）2.2.1在不同环境提供良好体验（ProvideaGreatExperienceinEachEnvironment）当你使用自适应来开发UI时，你可以保证UI跟随显示环境变化而适当地响应。遵照这些指南，你可以给用户良好的设备响应体验。a,在所有环境下都保持对主体内容的专注b,避免布局上不必要的变化c,如果你的应用只在一个方向上运行，那么请直接一点避免提示人们旋转设备的提示UI出现支持同一个方向上的变化d,如果你的应用将设备方向翻转视为用户输入（的一种指令），那么就按照程序设定的方式来响应设备翻转892.2适应性和布局(AdaptivityandLayou2.2.2使用布局来沟通（UseLayouttoCommunicate）a,布局包含的不仅仅是一个应用屏幕上的UI元素外观你的布局，应该告诉用户什么是最重要的，他们的选择是什么，以及事物是如何关联起来的。b,提升重要内容或功能，让用户容易集中注意在主要任务上有几个比较好的办法是在屏幕上半部分放置主要内容，以从左到右的习惯，从靠近左侧的屏幕开始。902.2.2使用布局来沟通（UseLayouttoCoc,使用视觉化的重量和平衡向用户展示相关的屏显重要元素大型控件吸引眼球，而比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击，这让它们在应用中更加有用——就像电话和时钟（上面的按钮）——用户经常在容易分心的环境中能（正常）使用它们。91c,使用视觉化的重量和平衡向用户展示相关的屏显重要元素91d,使用对齐来让阅读更舒缓，让分组和层次之间更有秩序对齐让应用看起来整洁而有序，也让用户在专注于屏幕时更有空间，从而专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰，也让用户更容易找到某个控件。e,确保用户能明白处于默认尺寸的首要内容的含义例如，用户无需水平滚动就能看到重要的文本，或不用放大就可以看到主体图像。准备好改变字体大小。用户期望大多数应用能有设置字号大小的功能。为了适应一些文本大小的变化，你也许需要调整布局.92d,使用对齐来让阅读更舒缓，让分组和层次之间更有秩序92f,尽量避免UI上不一致的表现在一般情况下，有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因，而且他们倾向于花时间去尝试（译者按：因此为了避免用户做无用的尝试所以建议类似功能外观一样）。

g,给每个互动的元素充足的空间，从而让用户容易操作这些内容和控件常用的点按类控件的大小是44x44点（points）。93932.3起始与停止（StartingandStopping）2.3.1即时启动（StartInstantly）

有种说法是用户往往不会花超过一两分钟去审视一个新应用，当你将应用从打开到启动这段时间压缩得很短，并且同时在载入过程中呈现一些对用户有帮助的内容，你就会激发用户的兴趣并给所有用户一个惊喜。942.3起始与停止（StartingandStoppina,尽可能避免使用闪屏或者其他启动体验b,避免让用户做过多设置c,谨慎使用新手引导d,不要太早要求用户去给你的应用评分e,一般建议按照屏幕默认的定向方式启动你的应用f,如果可能，不要让用户在初次启动应用时阅读免责声明或者确认用户协议g,在应用重启后，需要恢复到用户退出使用时的状态，让他们可以从中断之处继续使用95952.3.2时刻准备好停止（AlwaysBePreparedtoStop）iOS应用无需关闭或退出选项。当用户切换应用，回到主屏幕或者将设备调至睡眠模式的时候，其实就是停止了当前应用的使用。当用户切换应用时，iOS的多任务系统会将其放置到后台并将新应用的UI替换上来。在这种情况下，你必须做到以下几点：随时并尽快保存用户信息，因为在后台的应用随时有可能被终止或退出。当应用停止的时候保存当前状态，使用户可以在回到应用时能从中断之处继续使用。例如，在使用可滚动的数据列表时，退出后保存列表所在的位置。962.3.2时刻准备好停止（AlwaysBePrepara,不要强制让应用退出。因为这样会让用户误以为是crash。如果有问题产生，需要告诉用户具体状况以及如何解决。以下有两个建议，取决于出现的问题有多严重而酌情使用：如果应用中所有的功能当前都不可用，那么应该显示一些内容来解释当前的情形，并建议用户如何进行后续操作。这部分内容给予了用户以反馈，使用户相信你的应用现在没问题。同时这也可以稳定用户情绪，让他们决定是否要采取纠正措施，继续使用应用，还是切换到另一个应用。b,如果只有部分功能不可用，那么只要当用户使用这些功能时显示提示即可。不然的话，用户就应该能正常使用应用的其他功能。如果你决定使用警告框来进行提示，请确保只在用户尝试使用不可用的功能时再显示。97972.4模态情境（ModalContexts）模态是一个承载某些连贯操作或内容的优缺点并存的模式。它可以给用户提供一种不脱离主任务的方式去完成一个任务或者获得信息，但是也会临时性地阻止用户对应用的其他部分进行交互操作。理想情况下，用户可以与iOS应用进行一种非线性的交互，所以，尽可能减少应用中的模态体验是最好的。通常情况，在以下情形下可以考虑使用模态情境：必须引起用户关注的时候。一个独立的任务需要完成或者很明确需要被放弃，为了避免在模棱两可的状态下遗漏用户信息的时候。982.4模态情境（ModalContexts）98a,保持模态任务的简单，简短和高度聚焦b,始终提供明显、安全的途径退出模态任务c,一个任务需要多层级的模态视图时，确保用户理解点击完成按钮的结果d,保证提醒对话框的内容都是重要且可操作的e,尊重用户关于接收通知的选择99992.5交互性和反馈(InteractivityandFeedback）2.5.1用户知道标准手势（UsersKnowtheStandardGestures）用户使用点击、拖拽、捏合等手势与iOS设备进行交互。使用手势拉近了用户和设备之间的距离，并且增强了直接操纵感。用户通常期待手势在不同应用之间都是通用的。1002.5交互性和反馈(InteractivityandFe除了用户熟悉的标准手势，iOS还定义了一些系统范围内的操作，例如呼出控制中心或消息中心。在任意应用下都可以使用这些操作。a,不要给标准手势赋予不同的行为。除非你的应用是游戏，否则重新定义标准手势会使用户迷惑，且增加使用难度。b,不要创建和标准手势功能相似的手势操作。用户已经习惯了标准手势的行为，没有必要让用户学习达到同样效果的不同操作。c,可以用复杂手势作为完成某任务的快捷方式，但不能是唯一触达方式。最好给用户提供一些简单、直接的方式完成某操作，即使这种方法需要额外的动作。简单的手势能让用户集中于当前的体验和内容，而不是交互操作本身。d,除非是游戏，否则避免定义新的手势。在游戏或其他沉浸式的应用中，操作手势也是有趣体验的一部分。但是在普通应用中，帮助用户达成目标要比操作本身重要的多，所以最好使用标准手势，尽量避免让用户去发掘和记忆新的操作。e,在特定的环境中，可以考虑使用多指操作。虽然复杂的操作并不一定适用于所有应用，但对用户会花大量时间使用的应用来说可以丰富体验，例如游戏或创建内容环境。但因为非标准手势可发现性差，要尽量少用，并且不要让这类手势成为完成任务的唯一方式。101除了用户熟悉的标准手势，iOS还定义了一些系统范围内的操作，2.5.2可交互元素吸引用户点击（InteractiveElementsInviteTouch）为了暗示交互性，设计时会使用很多线索，包括颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。一个关键的颜色可以给用户提供很强的视觉指引，尤其是没有冗余的其它颜色时。为了有对比，使用蓝色标记可交互的元素，并且使用统一的、易识别的视觉风格。返回按钮使用多个线索指明其可交互性并传达其功能：它出现在导航中，显示了一个指向后方的图标，使用了关键色，显示了上一级页面的标题。1022.5.2可交互元素吸引用户点击（Interactive一个图标或者标题提供了清晰的名称指引用户点击它。例如，地图中的标题“立交桥路线”，“定位到这里”，清晰地说明了用户可做的操作。结合关键色，就可以省去按钮边界或其他多余的修饰。103一个图标或者标题提供了清晰的名称指引用户点击它。例如，地图中在内容区域，有必要给按钮添加边界或背景。操作条中的按钮、动作表单和提醒对话框可以不需要边界，因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域，按钮有必要使用边界或背景将按钮从其他内容中区分出来。例如，系统自带的音乐、时钟、照片和AppStore应用会在一些特别的场景中使用这种按钮。时钟应用在秒表和计时页面中给按钮增加背景来强调开始和暂停按钮，并且使按钮在周围的内容中更容易点击。AppStore应用中使用有边界的按钮，将按钮和整个内容条区分开来，点击整条内容查看详细信息，点击按钮进行下载安装。照片应用中给分享按钮增加了边框，与其他解释性文本进行了区分。104在内容区域，有必要给按钮添加边界或背景。时钟应用在秒表和计时2.5.3反馈有助于理解（FeedbackAidsUnderstanding）反馈会帮助用户了解应用当前在做什么，发现接下来可以做什么以及理解动作产生的结果。UIKit提供了很多反馈。

a,尽可能将状态或其他的反馈信息整合到UI中。用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如，邮箱应用将当前邮箱的状态显示工具条上，这样就不会影响当前内容。

b,避免显示不必要的警告框。警告框是一种很强的反馈机制，只有在传递非常重要也是理论上可行的信息时才需要使用它。如果用户常看到很多不是重要信息的警告框，他们很快就会忽略所有对话框提醒。1052.5.3反馈有助于理解（FeedbackAidsUn2.5.4输入信息的方式要简单（InputtingInformationShouldBeEasy）不管用户是点击控件还是使用键盘，输入信息都会花费时间和精力。如果发挥有用的效用前就让用户输入大量信息会减弱用户继续使用的欲望。a,让用户更容易地进行选择。例如，使用选择器或者表格代替纯文本，避免要求用户打字来提高选择效率，降低选择成本。b,适宜地从iOS中获取信息。设备上存储了大量的用户信息。可以的话，不要让用户提供你可以轻易找到的信息，例如联系人或日历信息。c,提供有用的反馈来平衡用户的输入。付出和回报的概念可以帮助用户感到进程在被推进。1062.5.4输入信息的方式要简单（InputtingInf2.6颜色与字体(ColorandTypography)2.6.1色彩有助于增进沟通（ColorEnhancesCommunication）在iOS系统中，颜色会用于表征交互，传递活性以及提供视觉连续性。内置的应用程序选择使用那些看起来更具个性的、纯粹、干净的颜色，并辅以或亮或暗的背景组合。1072.6颜色与字体(ColorandTypography)a,如果你要创建多样的自定义颜色，要确保它们能够和谐共存b,注意在不同情境下的颜色对比c,当你使用自定义的栏颜色时，着重考虑半透明的栏和应用内容d,注意颜色的盲区e,考虑选择一种基准色颜色来表征交互性与状态f,色彩可以向用户传达信息，但不一定会以你希望的方式g,大多数情况下，不能让颜色喧宾夺主，让用户分心1081082.6.2文字应该清晰易读（TextShouldAlwaysBeLegible）文字首先必须是清晰可辨的。如果用户不能看清楚应用中的字词，那么文字再好看也是无意义的。当你在你的应用中采用DynamicType时，你可以实现：能自动调整文字的粗细，字母间距以及行高。为语义上有区别的文本模块指定不同的文本样式，比如正文、脚注或者标题。文本可以根据用户在动态文字和可访问性设置中指定字体大小的变化作出适当的响应。1092.6.2文字应该清晰易读（TextShouldAlwaa,文本尺寸的响应式变化需要优先考虑内容b,在适当的情况下，当用户选择一个不同的文本尺寸时要调整页面布局c,确保一个自定义字体在不同尺寸下的所有类型都具备可读性d,通常情况下，应用中整体应该使用单一字体1101102.7图标和图形(IconsandGraphics）2.7.1应用图标（TheAppIcon）每个应用都需要一个漂亮的图标。用户常常会在看到应用图标的时候便建立起对应用的第一印象，并以此评判应用的品质、作用以及可靠性。以下几点是你在设计应用图标时应当记住的。当你确定要开始设计时，请参考AppIcon来获取更详细的设计规格与指导。应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事，以及与用户建立情感连接的机会。最好的应用图标是独特的，整洁的，打动人心的，让人印象深刻的。一个好的应用图标应该在不同的背景以及不同的规格下都同样美观。为了丰富大尺寸图标的质感而添加的细节有可能让图标在小尺寸时变得不清晰。1112.7图标和图形(IconsandGraphics）112.7.2栏图标（BarIcons）iOS提供了一系列小的icon，用以代表各种常见任务与操作，它们常用在标签栏(TabBar)、工具栏(Toolbars)与导航栏(NavigationBar)中。用户通常都已经了解这些内置图标的含义了，因此可以尽可能的多使用它们。如果需要自定义动作或者内容，你也可以设计自定义图标。设计这些小的线性图标与设计应用图标有很大的区别。请注意，你有时候也可以用文字来代替工具栏和导航栏的图标。就像iOS的日历里面，工具栏上便是使用“今天”、“日历”和“收件箱”来代替图标进行表意的。想要决定在工具栏和导航栏中到底是用图标还是文字，可以优先考虑一屏中最多会同时出现多少个图标。如果数量过多，可能会让整个应用看起来难以理解。使用图标还是文字还取决于屏幕方向是横向还是纵向，因为水平视图下通常会拥有更多的空间，可以承载更多的文字。1122.7.2栏图标（BarIcons）112写在最后成功的基础在于好的学习习惯Thefoundationofsuccessliesingoodhabits113写在最后成功的基础在于好的学习习惯113结束语当你尽了自己的最大努力时，失败也是伟大的，所以不要放弃，坚持就是正确的。WhenYouDoYourBest,FailureIsGreat,SoDon'TGiveUp,StickToTheEnd演讲人：XXXXXX时间：XX年XX月XX日

114结束语114DesignUI设计基础课程UI设计基础课程115DesignUI设计基础课程UI设计基础课程1Contents目录UI的概念、设计流程及设计原则iOS8UI界面设计——在优秀设计中学习UI116Contents目录UI的概念、设计流程及设计原则iOS8PartOneUI的概念、设计流程、设计原则01117PartOneUI的概念、设计流程、设计原则013UI即UserInterface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。118UI即UserInterface（用户界面）的简称。UI设从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。119从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感UI设计从工作内容上来说分为3个方向。它主要是由UI研究的3个因素决定的，其分别是研究工具，研究人与界面的关系，研究人。研究工具研究界面----图形设计师GraphicUIdesigner美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。120UI设计从工作内容上来说分为3个方向。它主要是由UI研究的人与界面关系在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。1217研究人任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。1228一致性设计目标软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。元素外观交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。交互行为在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。123一致性9设计流程确认目标用户在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。采集交互方式不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。提示引导用户软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。124设计流程10可用性可理解软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。可达到用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。可控制软件的交互流程，用户可以控制。控制功能的执行流程，用户可以控制。如果确实无法提供用户控制，则用能被目标用户理解的方式提示用户。125可用性11必备品质1.清晰清晰是用户界面设计必须要具备的一条品质，如果说你的界面设计的很模糊，用户就无法在其中体验到较好的使用体验，这样会影响用户的整体印象。2.简洁UI设计除了清晰还不够，还需要简洁，看上去一目了然。如果界面上充斥着太多的东西，会让用户在查找内容的时候比较困难和乏味，而简洁的画面就能很好的解决这个问题。3.熟悉这里说的熟悉是只在设计UI的时候，要遵守一定的设计规范，就如有下划线的字符是有超链接的、叉号就是要退出或者删除，这样用户在使用的时候不但有熟悉的感觉，而且便于操控。4.响应良好的用户界面设计一定要响应迅速，不能让用户产生一种响应较慢的感受。而且界面应该有提醒的功能，让用户了解到一些反馈信息。5.一致在设计UI时，保持界面风格的一致性也是整个应用设计中很重要的环节，一致的风格不会让用户有错愕感。6.美观美好的事物总会让人有种愉悦之感，在页面设计的时候也要注重美观度的加强。126必备品质12侧重流程——一个产品设计师的心得分享UI产品设计

心得127侧重流程——一个产品设计师的心得分享UI产品设计13ABCPre-processDrawingsPicturesMoodboardWorkWireframesCanvasFoldersUser-testingPost-processDiagramGuidelines128ABCPre-processWorkPost-processPre-processDrawingsPicturesMoodboard可以专门用一个笔记本来收集你的创意，不时的翻翻，可能会找到一些非常有趣的旧想法，你可以根据这些旧点子想一些新创意。129Pre-process可以专门用一个笔记本来收集你的创意，不Pre-processDrawingsPicturesMoodboard"一位艺术家必定是一位收藏家。他懂得品味藏品，而不是单纯的‘贮藏’，他们懂得有选择的去收藏。他们会根据自己内心的喜好去收藏东西。"还有一项前期要做的工作就是要收集图片，收集图片的方法可能有好几百种，我还是习惯最Old-School的方法——Dropbox文件夹分类，每当有新项目的时候，我就会看看这些图片，用来寻找灵感。130Pre-process"一位艺术家必定是一位收藏家。他懂得品Pre-processDrawingsPicturesMoodboardDribbble，Behance，Pttrns，Pinterest——我们有很多可以寻找灵感的地方。而且在这些网站中你很容易找到和你的项目相关的作品，多去看看，你可能会从别人的经验中学会解决问题。当我开始新项目的时候，我总会准备四个文件夹——PSD，屏，资源，灵感，我会把和这个项目相关的东西全部按照下面分类丢到文件夹里面。131Pre-processDribbble，Behance，PtPre-processDrawingsPicturesMoodboard132Pre-process18不必在乎线框图的质量线框图的作用就是让彼此更好的理解目的，而不是最终结果。线框图能够帮助架构层级，让你了解大概需要多少屏界面。设计师必须懂得去“敏捷”设计，如果真的太在意线框图的细节，那么整个设计流程会拉长，设计师应该学会取舍。WorkWireframesCanvasFoldersUser-testing133不必在乎线框图的质量Work19PSD—大尺寸画布最好用PS做一个大尺寸画布，用来承载流程中的一些细节。大尺寸画布不是用来画出整个应用的UI套件，而是用来记录元素在不同阶段的不同状态——也就是流程。设计复用很方便开发看到这种东西也会工作的更快。WorkWireframesCanvasFoldersUser-testing所有屏都放入一个PSD中在设计移动应用时，我喜欢把整个流程中所有屏的界面设计全部装入到一个PSD中整体的对比效果会更好，也更容易让他人理解你的设计理念，元素的复用也非常方便。134PSD—大尺寸画布Work所有屏都放入一个PSD中20和朋友沟通我非常重视那些能够给出专业反馈意见的人。留意他们的反应和初次看到你的设计时的想法，这未尝不是一种用户测试。而且多聆听别人的意见，能够让你从不同角度看待问题。WorkWireframesCanvasFoldersUser-testing135和朋友沟通Work21Post-processDiagramGuidelines图示用来暗示交互流程，且能充分感受到视觉设计的细节。136Post-process图示22Post-processDiagramGuidelines视觉规范完成了设计工作后，要做的事情就是做出一份视觉规范，然后检查一下整体的视觉层级。UI套件UI套件非常重要，尤其对于工作对接来说，能够保持视觉高度的一致性。配色表字体表——要完善的记录LOGO使用的字体，标题使用的字体等等，对于开发会大有裨益，个人复查作品时也会很有帮助。137Post-process视觉规范配色表字体表——要完善的记录UI设计新手不可错过的7条法则138UI设计新手不可错过的24法则1：光线来自天空这可能是学习UI设计时，最容易忽略却又极为重要的一点了:光线来自天空。光线总是从天空（上方）来的，从下面照上来的光看起来会非常诡异。当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴影。上半部分颜色浅一些，而下半部分深一些。139法则1：光线来自天空25从下面打一束光到人脸上是不是看起来很渗人？UI设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是3D的，在每个元素的下方加一些阴影。140从下面打一束光到人脸上是不是看起来很渗人？UI设计也是同理就拿这个按钮举例，这是一个相对“扁平化”(flat)的按钮，但依然可以看出一些光线变化的细节:没有按下去的按钮底部边缘更暗，因为没有光线照到那里。没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面（见侧视图）。没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。按下去的按钮整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容易照到。也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。这么一个简单的按钮就有4种不同的光线变化。实际上，我们可以把这种原则运用到各处。141就拿这个按钮举例，这是一个相对“扁平化”(flat)的按钮iOS6有点过时了，但还是学习光线不错的案例。这张图是iOS6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线变化。控制面板的上边缘有一小块阴影。“开启”滑动槽上部也有阴影。“开启”滑动槽的下半部分，反射了一些光线。按钮是突出的，上边缘较亮，因为是与光源垂直的，接收了大量光线，折射到你的眼睛中。因为光线角度的问题，分割线处出现了阴影。142iOS6有点过时了，但还是学习光线不错的案例。这张图是通常会内嵌的元素：文字输入框\按下的按钮\滑动槽\单选框（未选择的）\复选框通常会外凸的元素:未按下的按钮\滑动按钮\下拉控件\卡片\选择后的单选按钮\弹出消息等等，现在不是追求扁平化的设计吗？iOS7引发了科技界对于“扁平化设计”(flatdesign)的追求。也就是说图标是平的，不再模仿实物而外凸或内凹，只有线条和单一颜色的形状。143通常会内嵌的元素：29我很喜欢这种干净、简洁的风格，但是我认为这种趋势不会长久。通过细微的变化模拟出3D的效果非常自然，不会被完全取代的。在不久的将来，我们很可能会看到半扁平的UI（这也是我推荐你使用的设计风格）我把它称为“flattydesign”，依然非常干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提示。144我很喜欢这种干净、简洁的风格，但是我认为这种趋势不会长久。通现在，Google也在各个产品上推行他们的MaterialDesign，提供一种统一的视觉设计语言。MaterialDesign的设计指导为我们展示了它如何运用阴影表现不同的层次。这也是我所认同的类型。用现实世界的元素来传递信息，关键在于:细微。你不能说它没有模仿现实世界，但也绝不是2006年的网页风格，没有纹理，没有梯度，更没有光泽。我认为“flatty”是未来的方向。扁平化？早晚会过时的。145现在，Google也在各个产品上推行他们的Materia法则2：黑白优先在上色前用灰度模式设计可以简化大量的工作，让你更加关注空间和元素布局。设计师现在都喜欢“移动优先”的概念，这就意味着你要先考虑好在手机上如何显示页面，然后才考虑在超清的Retina屏幕上的显示效果。这种限制非常好，能够帮你理清思路。先解决一些棘手的问题（在小屏幕上显示）。然后再解决简单的问题（在大屏幕上的可用性）。我希望你先用黑色和白色设计，先把复杂的问题解决了。在不借助颜色帮助的情况下把app做得美观易用。最后再有目的地上色。146法则2：黑白优先32这种方法能保持app“干净”、“简洁”。加入过多的颜色很容易毁掉简洁性。“黑白优先”会促使你关注空间、尺寸和布局这些更重要的问题。先来看一些经典的用灰度模式设计的页面。147这种方法能保持app“干净”、“简洁”。加入过多的颜色很容“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明特色的设计就需要好好地运用各种颜色。不过，大部分app并没有这样鲜明的特点，只要保持干净和整洁就好，绚丽的颜色被公认是很难设计的，所以，还是先用黑色和白色来吧。148“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明14935第二步:如何上色上色最简单的方法就是只加一种颜色。在灰色的基础上只加一种颜色可以简单快速的吸引眼球和注意力。你也可以更进一步，在灰色的基础上加两种颜色，或者添加统一色调的多种颜色。150第二步:如何上色36实践中的颜色法则——什么是色调？网页主要用的是十六进制RGB表。但RGB不是个好的颜色设计框架，HSB模式会更好用，其中H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度。HSB模式是比RGB模式更适合我们看待颜色的方式。如果你对