《交互数字内容设计》课件-第九章 交互界面元素设计

第九章交互界面元素设计9.1图标设计什么是图标？图标，顾名思义是指图形化的标识，英文名为icon。图标的概念分为广义图标与狭义图标两种。广义上的图标，指的是具有指代意义的图形符号，标志、符号、艺术品、照片等都可以称作图标，他是图形信息的汇总与结晶。广义的图标无处不在，大到公共场所，小到电子设备，随处都可以见到图标的影子。而狭义的图标，则通常特指应用于计算机等电子设备上的启动图标，通过图标来引导用户运行各种操作。可以说，图标是除文字显示以外的重要辅助认知图形。9.1.1图标设计的意义1.图标设计是交互界面视觉设计的重要组成部分，用于提示与强调功能和信息；2.图标设计使产品的功能更为具象，用户更易理解与操作；3.图标设计使产品界面更具有吸引力，富含娱乐性与人性化；4.图标设计可以形成产品的统一特征，给用户以信赖感，便于功能的记忆；5.图标设计能拉开产品间的个性与差异，起到装饰性作用；6.图标设计是一种艺术创作、能提高产品的品味；7.图标设计的表现方式灵活自由、可以传达不同的产品理念；8.图标设计是在屏幕上展示产品的最佳方式。9.1.2

图标的类型图标按照功能属性、表现形式与设计语言可大致分为3类。1.按照功能属性分类（1）启动图标（2）功能图标（3）装饰性图标2.按照表现形式分类（1）字符图标（2）像素化图标（3）手绘图标（4）拟物化图标（5）扁平化图标（6）线性图标（7）立体图标3.按照设计语言分类（1）具象形象化图标（2）功能图形化图标（3）字体符号化图标9.1.3图标的风格(1)活泼的气质大多数应用都属于这个类别，如常见的社交，娱乐，直播，美食，所塑造的都是积极向上活泼的感觉。此类产品的图标大多都会采用圆角设计。如下图

(2)硬朗的气质一些格调应用或者偏男性的应用会刻意塑造一种不一样的棱角感。所以一般会采用直角设计。塑造一种严谨安全的感觉。如下图

1.独特的设计语言强调应用图标的独特性，突出产品的核心特征和属性。9.1.4图标设计的原则与方法2.简洁的设计形式简洁的图形设计形式也会提升图标的设计品质。3.准确的产品属性传达应用图标代表的是一个产品的属性和功能作用。一个高品质的应用图标应该能够让用户在第一眼就能够感知到这个应用的属性和功能。图标设计应当高度提炼产品特色找到最能代表产品属性的图形元素，并对这个元素进行突出设计。4.统一的设计规范为了更好的统一应用图标的设计样式，苹果公司专门精心设计了ios图标栅格作为设计参考。5.品牌形象的延续充分的利用已有的品牌形象加以运用。让品牌的深厚积淀继续发挥作用并且让品牌形象延续从而赋予品牌更强的生命力。6.避免使用照片在应用图标设计中应该尽量避免直接使用照片作为图标使用。7.艳丽的色彩鲜亮明快的色彩搭配能够为应用图标带来更多的关注度。

8.多场景测试在设计应用图标的时候也要考虑到应用图标的展示场景，避免图标不能完美展示的情况。应用图标不仅仅是展示在各种尺寸的手机屏幕上，也会在应用市场、设置栏、手机状态栏等多处进行展示。在不同场景下应用图标需要根据需求做相对应的设计优化。9.避免使用大量文字应用图标看起来拥挤用户也很难看清楚信息大大降低应用图标的设计美感2.图标设计的过程（1）需求分析——头脑风暴在进行图标设计之前，应先仔细分析该任务的各项指标，包括：市场定位、竞品分析、用户群体、功能特色、价值体现等。（2）搜集素材——构思风格（3）设计定位——绘制草图当我们把一切前期工作准备妥当后，便可开始进行设计风格定位、色彩定位、图形提取、草图绘制的阶段了。（4）细节调整——规划制图（5）反馈修改——加减设计一套图标绘制好了之后还是在放在一起看一下整体的感觉，最后通过加减法适当的修修补补，对于视觉上看上去过于繁琐的图标要保留大轮廓的同时减少结构达到视觉平衡；对于确实很简单但有没办法添加任何的东西元素来增加的为它做加法的时候是否可以放大，来增加它的视觉丰满感。3.图标设计规范（1）iOS系统图标设计规范（2）Android系统图标设计规范9.2界面构成元素设计

除了上面讲述的图标设计外，界面卡片、界面导航、按钮以及其他构成界面的元素都要进行仔细的设计。卡片式界面就是一个包含着丰富的图片和文字内容的小矩形，在实际应用中，它常常是作为详情页的入口使用。由于这种形式跟我们现实世界的卡片极为相似，所以用“卡片”这个词形容最合适不过了。1.什么是卡片？9.2.1界面的卡片设计卡片是一个小的信息容器。简单点理解就是卡片是一个相对完美的处理信息集合。a.构成分析

卡片的组成简单点来讲是由：由信息与操作组成。视觉上由：内容层+承载层组成。

承载层我们可以理解为承载内容的容器，而内容层则是我们设计时的必要元素。内容层多数为图片、文字、按钮等元素。b.功能分析

卡片最大的作用就是作为功能入口的存在。由于卡片设计的独立性，使得单独的卡片能够承担功能入口的作用。2.卡片的特点（1）.卡片设计视觉统一性强

由于每一个卡片都是由承载层和内容层组成，形式上统一，所以在视觉上有很强的一致性。例如京东金融和下厨房：（2）.卡片设计能够突出重点内容

卡片具有很强的独立性，具有空间感。在页面设计中，我们可以通过卡片与周围环境的差异，来突出我们想要展现的内容。例如转转：（3）.卡片设计能够区分不同维度的内容与归纳相同维度的信息

由于每张卡片的操作互相独立，互不干扰，有利于区分不同纬度的内容；同时也可以利用卡片来讲相同纬度的信息进行归类。

（4）.卡片能让用户更加专注当前内容

卡片的圆角设计更容易吸引人的目光，并且通过卡片营造的空间感以及视觉层级的优先级，卡片能够更加吸引我们的注意力，让我们更加专注当前内容。例如appstore（5）.卡片设计可以提高空间的利用率

卡片可以利用横（X）轴交互来提高空间的利用率，将部分内容隐藏在横轴的空间当中，在屏幕可视的空间范围内通过交互展示更多的内容。例如淘票票：

（6）卡片可变化，适配性强卡片是可变化的，具有无限扩展的属性，在适配上更是得天独厚；在同倍率下只需要按照设计稿件的间距标注做自然适配，不同倍率下只需要进行简单的换算即可。（7）.卡片设计能够提升界面的可操作性

卡片是一种拟真元素，交互设计可以被覆盖、堆叠、移动、划去，这样能更好的拓展内容模块的视觉深度和可操作性。例如途家和网易戏精：3.卡片的分类（1）传统卡片传统移动端卡片由一张图片、提示文字和按钮构成，且卡片四周均有留白。图片迅速抓住用户的注意力，文字进行描述，按钮承担用户点击、点赞等交互行为。通常用阴影和留白来表现卡片的立体感。（2）通栏卡片与传统卡片相比，通栏卡片没有了左右两端留白，可显示图片、文字的空间更大，卡片与背景的关系用一条背景色块抽象表现。它更像一种在极简列表式和卡片式设计之间的折中选择，既保留了卡片式的分层方式和强交互性，又使页面变得更简洁。但通栏卡片的视觉冲击和趣味性较弱，比较适用于以文字为主要信息的页面，或者页面本身层次较多内容丰富的情况。（3）穿插卡片（水平滚动卡片）水平滚动的卡片也很常见，比如下厨房、豆瓣等app。

它最大的特点就是解决了卡片式信息浪费空间的缺点，用户通过水平滚动，原本只能放置一张卡片的空间被极大扩展，并且可以通过“查看更多”按钮获得更多卡片信息。穿插卡片打破了竖直滚动页面的单一交互行为，让用户拥有了多样的浏览选择。（4）卡片流这两年特别流行的一种页面布局方式就是瀑布流，这种设计能够带来极为流畅的浏览体验，同时减少点击步骤以最大限度留住用户。卡片式设计和瀑布流的结合就是卡片流了。4。卡片式的新发展卡片式设计在2014年提出，但至今app界面仍然热衷于使用这种方式，这一定程度上说明了卡片式设计良好的适应性和生命力。

那么，现在流行的卡片式设计又有什么特征呢？（1）.使用圆角有研究显示，用户点击圆形按钮的次数要远超方形按钮——圆形具有更强的吸引力和亲和力。尤其在ios系统圆角风格大热后，卡片也越来越多地使用圆角。（2）.用背景模糊替代投影这也是苹果引领的设计潮流变化——我们都很熟悉的苹果控制面板“毛玻璃”效果。当用投影表现卡片空间感的方式泛滥后，ui设计师开始尝试模糊背景来凸显卡片。淘宝最新一版会员卡页面就采用了背景模糊效果。（3）.卡片和图片不再是两个层级卡片不再作为展示图片文字的背板，而是将信息融入卡片中。一种做法是卡片采用渐变色彩，另一种则是使用背景照片，无论哪一种，文字都是直接展示在卡片上的，卡片的嵌套模式由三层变成了两层。卡片式设计似乎朝着两种方向发展，一种是尽量用圆角、投影、丰富的色彩来增强“卡片”拟物，另一种则是更加极简，卡片的概念隐匿于线条、大量留白之中。我们对于后者，往往第一时间无法判断出这实际上是一种卡片式设计。但观察其归纳分类信息的方式就可以明白，这实际上是卡片式设计的套路。5.卡片式设计最佳实践

（1）·有目的地使用卡片

虽然卡片在UI设计中功能强大，但是不要仅仅为了用而用。绝大多数设计师是为了利用卡片本身的强大组织性才采用这一设计元素。当你的UI中有大量不同类型的元素，诸如图片、文本、列表、CTA按钮等，你需要借助卡片来整合。所承载的元素展示的长度可变用户不用考虑各种元素之间的尺寸差别需要承载某些交互，比如输入框、按钮和链接等（2）·保持简约

每个卡片承载一种元素，执行一个任务。各种不同的元素通常不应该混杂在一起，不同的卡片将它们分散开来，让它们互补干扰。如果同时需要不同属性的内容共同完成一个任务，那么要让它们靠在一起，多卡片协同。限制卡片中文本的数量，尽量不要添加段落。（3）·引导用户关注最重要的信息或操作

善用卡片的层次结构，突出关键内容和信息。例如将承载管家信息的卡片放在顶部，还可以使用排版来突出关键的信息和交互。（4）·精心选图图片是UI当中视觉化元素的代表，它能让界面吸引人，也能让卡片脱颖而出。但是不是图片素质越好，对于UI就越好，图片必须要传达正确的信息，这是第一要务。图片在卡片内的位置，通常取决于它是主要内容还是支撑性的内容。（5）·支撑微交互卡片本身是交互式元素，卡片上的链接和按钮可以指向更为详细的信息，卡片内自然也可以承载更为多样的微交互。比如，将光标悬停于卡片之上的时候，可以触发显示其他的内容。（6）·支持手势移动端设计当中，手势是主要的交互。手势不仅具备可用性，而且有趣的手势和交互能够创造有趣和愉悦的体验。通过滑动来移动卡片，以及使用点击、长按来组织卡片，通过上下滑动来关闭卡片，早在webOS时代就已经有了。不过，要让整个手势交互的逻辑顺滑自恰，这样才能让体验无懈可击。（7）·精心打磨

有创意的设计会让人眼前一亮。尺寸合理、大小合适的高清图片让人赏心悦目。精心打磨的细节令人看着就舒服。你应该尽量让卡片给人快乐和愉悦的体验。

6.卡片设计的建议

卡片虽好，但不要生搬硬套

朋友们，卡片设计虽然形式感强，具有明显的设计语言，但是卡片设计也是有缺点的！最为致命就是“占空间”！第一种：app标签导航标签导航位于页面底部，通常包含5个标签是比较合适的数量。这种导航是非常常见的，如果你的应用需要用户频繁的在不同分页切换，可以采用这种导航。它的缺点是会占用一定高度的空间。如微信最新版的APP界面设计图。9.2.2导航的设计第二种：APP舵式导航目前流行一种标签导航的变体，个人把它称为“舵式导航”，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。如下图葡萄社APP。第三种：APP抽屉式导航模式抽屉导航是讲菜单隐藏在当前页面后，点击入口即可像拉抽屉一样拉出菜单，这种导航的优点是节省页面展示空间，让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单画出的过渡动画。自从path应用以来，这种抽屉式导航菜单非常受到大家的喜爱。第四种：APP宫格导航（比如九宫格）这种宫格导航是将主要入口全部聚合在页面，让用户做出选择。这样的组织方式无法让用户在第一时间看到内容，选择压力较大，采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。第五种：APP混合组合导航当用户需要聚焦内容，同时又需要一些快捷入口能够连接到某些页面时，就可以采用组合导航。组合导航上方用宫格的形式展现快捷入口，与标签导航不同的是，这些宫格入口之间不需要是平级的关系，也不必包含整个层级的内容，你可以将它理解为一种图形化的文字链。这种导航比较灵活，能适应架构的快速调整。第六种：列表式APP导航列表式APP导航是我们在APP设计中必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。不过目前来看，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。第七种：tab导航用于二级页，本质和标签导航相同，当应用层级较多的情况下，可以采用tab导航，典型场景是用于改变的当前的视图，或对当前页面内容进行分类查看。第八种：大图轮播导航或是大图上面的导航设计当你的应用信息足够扁平，可以尝试轮播导航，如果应用得当，能够给人耳目一新的体验。这种导航能够最大程度的保证应用的页面简洁性，操作也是最方便的。但是缺点是不能够快速的定位对应的分页内容。很多产品设计的症结在于，一方面界面要简单，另一方面功能要丰富。为了解决这个问题，隐藏菜单被发明了，可以把无穷多个信息塞到这个看不见的秘密容器中。隐藏菜单在PC时代简直是标配，上屏幕绝大部分空间，只要不是灰色背景，基本上只要点右键就能唤起隐藏菜单。这简直影响了一代用户的操作直觉——哪里不会点哪里，左键不行点右键。iPhone开启了手指触屏时代，再也不用鼠标指针好开心……但是隐藏菜单怎么办！？9.隐藏菜单按钮隐藏菜单类似下拉框，虽然大部分内容是隐藏，但是给了一个可以理解的入口。a.侧栏菜单应用于顶级菜单，适合大部分产品。优点：容易理解，能够容纳较多信息，可以结合手势缺点：只能用于顶级菜单或导航b.浮钮菜单应用于页面菜单。因为分量重，适合工具类、重操作的产品，例如P图软件。如果是重内容的阅读类产品，就不太合适了。优点：很显眼，容易操作缺点：对不需要隐藏菜单的用户过重了，可能误操作c.更多菜单应用于模块菜单，可以摆放的位置很多。优点：轻便灵活，可以在模块边缘轻松找到位置缺点：不太起眼、如果前面没有其它图标会难理解一点。完全隐藏菜单有时候找不到可以摆放图标的位置，或者想要完全弱化菜单存在感，这时可以将菜单入口完全隐藏。a.滑出菜单应用于列表菜单，也是IOS上很常见的一种设计规范。优点：操作方便，容易理解缺点：可以放置的操作数量非常有限。必须左右通栏上下较矮的列表才适用。b单击菜单应用于模块/按钮/图标菜单，只适合没有主要操作（如通常不需要进入下一级），用户操作意图不明确的情况。优点：容易发现，操作快捷缺点：放弃主操作存在风险c长按菜单应用于模块/按钮/图标菜单，适合辅助操作较为明确的的场景，如扫码、下载图片等。优点：对产品本身的布局和基础操作影响较小缺点：较为隐晦，需要用户主动尝试触发d.创意菜单除了常见样式，很多设计师也发挥想象里，创造更加有个性的菜单。9.2.3按钮的设计1.按钮的种类按钮属于命令控件，包括普通按钮，图标按钮，文字按钮三类。（1）用视觉样式告诉人们此处可以点击在扁平化设计之前，按钮都具有三维凸起的特征，这一特征我们仍可以学习。给按钮添加适当的阴影，阴影可以使元素突出于背景，这样更容易使用户识别他的可点击性。2.按钮的设计规范（2）保持一致性一个网站的按钮形状尽量保持一致，用矩形就都用矩形，用圆角矩形就都用圆角矩形，用户会将特定形状的元素识别为【按钮】，一致性会为用户提供更加熟悉的体验，减少用户学习成本。一致的不一致的（3）使用高效率，易懂的文案按钮上的文字“确定、取消”用更加生动确切的文字替换。（4）使用合适的图标箭头朝右，可能意味着离开此页；箭头朝下，可能意味着打开下面的内容，或者打开下面的菜单。网易邮箱里的【发送】按钮用了图标纸飞机，不仅提高了按钮的易读性，同时也和其他按钮做了很好的区分，提高了发送按钮的优先级3、按钮的反馈状态按钮在操作中一定要有反馈，来让用户明白自己的操作发生了什么按钮的状态有：默认状态、悬停状态、点击状态、禁用状态、忙碌状态禁用状态又有以下几点要注意明显区分禁用状态和可用状态的样式要有明显的区别，让用户清晰的知道这个按钮不可点击。禁用状态下要给用户相应的反馈当鼠标移动到禁用状态下的按钮时，用提示工具向用户解释禁用的原因。如百度里某图片不能下载，当鼠标移动到下载按钮上时，提示工具会解释按钮不可用的原因禁用状态的按钮是可见还是隐藏禁用状态下的按钮的可见性取决于他在界面中的位置与功能属性如：谷歌浏览器禁用状态的按钮是可见的这是因为这两个浏览器都有三个按钮，如果禁用状态下不可见，那右侧的按钮的位置就会不固定，这违反了设计的一致性原则，用户想要在固定的位置看到固定的功能，如果每次登陆进来按钮的位置都会变化，会让用户非常困惑，按钮时有时无，在点击页面的时候工具栏会有明显的变化，体验也不好。而firfox浏览器在改版之前前进按钮在禁用状态下是不可见的因为火狐浏览器这里只有两个按钮，不会出现明显的跳动上面是以前的版本，改版后的火狐如下所以禁用状态下的按钮的可见性，要根据按钮的功能和在界面中的位置进行具体分析。4、按钮的左右顺序windows是确定在左，取消在右mac系统是确定在右，取消在左为了使用户有一致的体验，最好的方式是不同的平台使用不同平台的规范，但是当我们的设计的时候，该如何安排确定和取消的位置呢？更多的设计倾向于【确定】在右，【取消】在左，【确定】意味着进入到下一步，【取消】意思是返回到上一步，基于用户对【上一步】和【下一步】的使用习惯，也应该是确定在右，取消在左。5、不同优先级按钮的设计当我们的界面功能比较多时，就会出现比较多的功能按钮，这些功能按钮肯定会有优先级，这个时候我们就需要设计一套一级按钮，二级按钮和三级按钮，甚至更多6、按钮设计中的一些技巧按钮是系统设计中非常重要的组成部分。如何让我们的按钮设计得充满趣味性、吸引力呢？我们来看看按钮设计中的一些小技巧。（1）.少用通用措辞没有人会在乎提交这一行动，他们关心的是将得到什么样的回报（反馈）。不要使用或者尽量少的使用通用措辞，尽量使用一些具体的、有明确指向的按钮文本。因为用户在体验接下来的内容时，用户更希望产品是以面向结果的方式，即明确告知用户进行此行为的结果。（2）.尽量多的使用第一人称，尽量少的使用第二或第三人称当用户在使用产品或者选择产品中的某一项服务时，用户想的并不是服务本身，而是这个东西能提供什么，简单来说就是“我这个钱花的值不值”。第一人称更有归属感比如，相对于“获取您的万元优惠券”的按钮文字，用户更喜欢“获取我的万元优惠券”按钮文本，这会让用户更有归属感和亲