3.1.220319 《争论点:用户体验设计师的交互指南》读书笔记

3.1.220319 《争论点:用户体验设计师的交互指南》读书笔记

◆ 内容简介

>> 本书主要介绍用户体验设计师需要掌握的一些技能,以及用户体验的优化策略,主要内容包括用户体验设计入门、概念、元素、体系、组件。

◆ 前言

>> 当时我希望可以通过大量地看视频和阅读文章来提升自己的能力,但是效果一直不太明显。因为我没有对这些松散知识点进行总结,使之“系统化”。界面里的每一个元素都不是以独立的个体而存在的,它们相互联系,相互影响。罔顾整体的影响,就会使得我们对个体的学习很片面,不得要领。因此,“设计理论系统化”是我一直追求的目标,

>> 

第1章:不管是产品经理还是设计师,我们的目的都是为了提升产品的用户体验。那么用户体验到底是什么?我们怎么衡量一款产品的用户体验水平?本章开门见山地介绍了产品用户体验的基本概念,将用户体验分为六大基本原则:有用性、可见性、易感知、易用性、容错性和一致性,并且针对每个原则进行了详细而系统的阐述。

第2章:本章主要列举了几个让设计师比较头疼的问题,例如:设计规范、界面适配、手势设计、异常场景设计。这些问题也会让很多工作好几年的设计师经常犯晕,这里我结合了大量的产品实例对其进行了深入的讲解。

第3章:界面中的元素主要分为8类:色彩、布局、文字、图标、按钮、间距、插画、动画,这些元素共同构成了产品的界面。设计师的职责就是在界面中合理地分配这些元素,让用户更好地使用。本章主要介绍了界面设计中基本元素的设计思路。

第4章:界面里的每一个元素都不是以一个独立个体而存在的,它们相互联系,相互影响。所以,设计师在设计的过程中,着眼点应该是整个产品。本章主要通过介绍常见设计体系的构建,探讨设计师如何从产品的维度进行设计。

第5章:本章主要介绍常用组件的使用方法。很多设计师对于组件只做到了浅尝辄止:只会使用Toast通知用户,只会使用文本框让用户录入信息。他们不会深究每个组件最适用的场景。对一名优秀的设计师来说,一旦一个功能可以由多个组件完成,他就需要选择出那个最合适的组件

◆ 1.1 什么是用户体验

>> 用户体验(User Experi-ence,简称UE/UX)是用户在使用产品过程中建立起来的一种纯主观的感受。要理解这句话的含义,就要弄明白这里所提到的“产品”和“纯主观感受”是什么意思。

>> 任何可以解决用户痛点(需求)的事物我们都可以称为产品。而用户在使用产品过程中所产生的心理反馈就是用户体验。

>> [插图]

>> 一千个人眼里有一千个哈姆雷特”。

>> 独立思考的习惯和态度应该是一个合格设计师所具备的基本素养,或许有的时候思考到最后也无法得出一个令自己满意的答案,但是这个思考的过程对我们来说比得到“那个答案”可能更加重要。在不断犯错,不断否定之前的自己的过程中完成进步。

>> 用户体验评价模型有很多,每个模型都有自己的细分指标。我总结出有六大用户体验要素:有用性、可见性、易感知、易用性、容错性和一致性,如图1-4所示,本书的内容主要就是围绕这六个要素来展开的。

◆ 1.2 有用性

>> 为什么把有用性放在第一位呢?因为产品是功能的集合,功能的存在意义在于解决用户的痛点,满足用户的需求。如果我们的产品无法解决用户的痛点,那么将它做得再精细又有什么用呢?

>> 有用性是一款产品或者一个功能底层的特性——满足用户的需求

>> 根据KANO模型,我们可以把需求分为基本型需求、期望型需求和魅力型需求。为了方便理解,你可以把它们理解成基本工资、绩效工资和奖金。

>> 需求的定位是会随着时间而改变的,就像在以前冰箱、彩电和洗衣机属于期望型需求,但现在是基本型需求了。

>> 用户体验地图可以可视化地展示用户使用产品或接受服务的体验情况,以此来发现用户在使用过程中的问题点和满意点。

>> 一个合格的用户体验地图由以下几个模块组成:用户画像、用户目标(需求)、操作阶段、动作、痛点、情绪和优化点

◆ 1.3 可见性

>> 信息架构是一款产品的骨架,其本质就是分类。为什么要分类?因为产品是众多功能的集合体,如果不对其进行分类整合,那么用户很难找到自己想要的功能。

>> 第一,平衡好信息架构的广度与深度。广度指的是页面的长度,深度代表页面的层级。页面越长,可以展示的功能越多,但是这也并不是好事。埋点数

>> 第二,信息架构的逻辑性经常会被我们忽略。用户并不是互联网“小白”,在使用你这款产品之前,他们可能都用过上百款APP了。他们在使用那些产品时所积累的经验会让其在心中建立出一个产品画像,这个产品画像就是逻辑。不符合逻辑的设置会对用户造成干扰。

>> 为了不破坏当前页面的布局,其一般会出现在页面的顶部栏或底部栏中,因为页面中间一般为内容区,而内容百变,很难做到与其完美融合。

◆ 1.4 易感知

>> 尼尔森的一项统计显示,互联网用户平均只读了每个页面文本内容的28%。这意味着用户很少会读完大段的文字,他们更多地是“扫描”。所以,互联网产品必须要思考如何提升用户对信息的感知效率,让用户在短时间内就可以获取到他们期望的信息或者我们希望他们感知到的信息。

>> 根据“二八原则”,80%的用户平时只用到了一个产品20%的功能。这就要求我们要梳理信息的优先级,把重要的20%的信息在视觉设计上进行凸显,让用户在快速浏览的模式下,可以看到他们感兴趣或者我们希望他们关注的内容。如何凸显这些信息呢?可以通过合理运用位置、间距、配色、形状和阴影等视觉要素来建立信息层级以完成区分。我们的目的是让用户在短时间就能清楚这个页面中各个元素之间的联系。

>> 一款优秀的产品应该做到让页面里的每一个元素都有自己的意义,都是一个小功能,都可以向用户传递信息。

>> 为了更利于用户消化信息,可以将一个页面中的信息拆解到几个页面中来展示,这样单个页面中的信息量就会大大减少,这就是我们常说的“一个页面,一个任务”原则。

◆ 1.5 易用性

产品经理需要了解足够多的交互组件。之前一直靠感觉,没有系统去学习

>交互设计师和产品经理的一个基本功就是明确每个组件的最适用场景,并在原型图中予以明确。具体每个组件的使用方法,会在第5章中详细说明。

>> 交互设计师和产品经理的一个基本功就是明确每个组件的最适用场景,并在原型图中予以明确。具体每个组件的使用方法,会在第5章中详细说明。

>> 如对一些风险较大或不可逆的操作,系统都需要用户二次确认。

>> 以上内容的重点是减少操作步骤,接下来主要说一说降低交互成本。这里的交互成本可以被理解为单次动作的成本,同样的一个点击动作,如何减少成本呢?交互成本主要有两方面:移动距离和落点范围。

>> 谓限制用户的选择场景,不是不让用户选择,而是选择后置。

>> “定制化”也可以减少场景转换。所谓“定制化”,就是给用户权限,让他们根据自己的实际需求调整产品的页面布局、内容模块和视觉样式等。

◆ 1.6 容错性

>> 容错性原则分为三个阶段:引导、报错和解决。首先通过简洁、易懂的引导来帮助用户规避那些错误;当用户不得已犯错之后,会给予提示,告知用户犯错的原因及解决方案,如图1-47所示。

>> 不同的产品对字数有着不同的限制,我倾向于设置15个字,也就是说Toast最多只可以显示15个字。

>> 错文案不能只描述场景,还必须包含报错原因及解决方案,报错文案要简洁、干练、概括性强。

◆ 1.7 一致性

>> 从设计师和开发人员的角度来说,一致性原则的确立可以极大地节省功能迭代的时间。从用户的角度来说,一致性可以减少用户的学习成本,更能增加用户对于产品的认可度。

>> 主流的设计规范有iOS Humen Interface Guidelines(简称iOS)和Material Design(简称MD)两种。iOS设计规范主要用于iPhone,而MD设计规范主要用于安卓手机。

◆ 2.2 适配

>> 为什么要做适配?适配是为了让同一个界面在不同尺寸、不同分辨率的设备上具备相同的显示效果。要掌握适配,首先我们得了解像素和分辨率这两个基本概念。

>> 日常所说的2倍图、3倍图就是指屏幕中一个点中有2个像素或3个像素。

>> 其实iOS风格推荐的最小可点击元素的尺寸是44px×44 px。

>> 所有的适配都要在同一倍率的方案下完成,同一倍率下组件的尺寸(多数情况)要保持统一。

>> 我们给APP做界面设计基本上都是在750px×1334px(在iPhone 6/7/8中的尺寸)的尺寸上做的。所以,适配流程就是以750px×1334px的设计稿为基准,切2倍图对iPhone 5、iPhone SE和iPhone XR进行适配,切3倍图对iPhone Plus、iPhone X和iPhone XS Max进行适配。这里提到的都是iPhone的机型,安卓手机的碎片化太严重了,但是适配原则都是一样的。

>> “刘海”区高度为44pt, Home Indicator高度为34pt。这两部分都是危险区,界面内容不能进入危险区。如图2-24所示的例子就是产品界面底部按钮没有针对iPhone X做适配。[插图]

◆ 2.3 手势

>> 手势的使用主要有两大作用:(1)节省界面空间;(2)简化交互方式。

>> 2017年,苹果公司发布的iPhone X则直接把Home键也去掉了,整个屏幕底部的空间也被解放了,手势在产品交互中的重要性进一步得到了提升。那么我们如何才能正确地构建手势体系?目前来说常见的手势有:点击、滑动、拖曳、长按和多点触控等。

>> 手机屏幕上的活动范围热图,我们根据各区域到拇指的距离,将手机屏幕分为容易区(容易操作)、伸展区(拇指需要伸直才能操作)和困难区

◆ 2.4 异常场景

>> 所谓细节决定成败,用户体验尤为如此。更何况正常的使用场景大家都在做,我们很难做出差异化来赢得用户的芳心。倒不如用心把所有的异常场景都做好,处理好这些同行们都注意不到的小细节,从而弯道超车。

>> 微信用户对网络故障提示的诉求是:在给予用户持续性提示的前提下,还不能干扰用户的正常操作。也就是让用户知道这个问题,但是用户不需要立即去处理。

>> 骨架屏,顾名思义就是展示页面的框架,当数据请求完成时再渲染页面。这种先占好位置再加载数据的模式也被称为占位符。

>> 我们需要特别注意:提示网络由Wi-Fi切换至4G网络时绝对不可以使用Toast!因为在某些安卓手机中,用户在系统设置中关闭推送信息时会把Toast也给禁用了,这些用户是收不到提示的。所以,优先级高的反馈我们都只考虑使用对话框,因为对话框所承载的信息百分之百会让用户看到。

>> 当检测到网络恢复正常时,页面会自动完成刷新和加载,不需要用户自己手动刷新。这种处理方式有两个好处:(1)减少用户的操作步骤。(2)避免使用弹框。

>> 如果可以通过控件自身状态的改变而让用户感知状态的变更,那么我们就没有必要使用弹框。使用弹框来通知用户是我们最后的选项。

◆ 第3章 元素

>> 色彩、文字、图标、布局、图片和按钮是界面设计中的六大视觉元素,

◆ 3.1 色彩

>> 之前曾盛传谷歌会推出新的All-White设计风格,即在界面设计中大面积地使用白色,将极简主义发挥到极致。虽然后来被证实这并不是谷歌官方推出的设计规范,但是在界面设计中配色越来越少却是一个不争的事实。以网易云音乐6.0的这次改版为例,其界面中大面积的“网易红”已经不复存在,取而代之的是白色,画风更加轻盈,如图3-1所示。[插图]图3-1 网易云音乐6.0版本与之前版本对比我们常说视觉稿只是给高保真原型图上了一遍色,而用户对于色彩的诉求正在降低,所上的色越来越少,这就导致现在很多产品的高保真原型图和最终的视觉稿差距很小。

>> 通常来说,产品配色体系的建立主要有以下三个目标:· 视觉区分。· 调整界面风格。· 吸引用户的注意力。

>> 一个产品可能会有好几个同级别的功能模块和分区。设计师需要对产品的信息内容和功能模块进行整体规划,建立界面的信息层级,以帮助用户在视觉上更好地区分。

>> 产品的自身定位和目标用户群决定了其视觉风格

>> 当我们的电脑出现故障时,会出现蓝屏,为什么是出现蓝屏而不是红屏或者绿屏呢?因为蓝色是冷色系,会让人联想到天空、海洋,可以给人一种冷静、沉稳的感觉。而当电脑出现故障时,最需要做的就是安抚用户的情绪,让其不要慌张。如果使用红屏,则会刺激用户原本就不稳定的情绪。

>> 阴影效果也可以用来吸引用户的注意力。阴影效果可以提升目标元素的“海拔”,进而使其从背景中凸显出来,这来自对现实生活的隐喻。目前QQ音乐的搜索框是半透明的背景,将其改成纯白色背景属于在配色上进行区分,再加上阴影效果可以进一步地使其凸显,

>> 我们还可以使用模糊效果来吸引用户的注意力。用户总是会不由自主地被焦点部分吸引,而忽视被虚化的部分。人眼的对焦机制好像一个调节器,可以捕捉那些离你忽远忽近的物体,这样才能让你感受到周围一切事物的深度和距离。设计师可以根据这个理论,将界面中一些不重要的内容进行模糊处理以凸显那些重要的内容

◆ 3.2 布局

>> 我把界面的布局分为两种:列表式布局和宫格式布局

>> APP就像是一本书,而且是一本大部头的书,如果不对信息进行分割及整合,那么用户很难去“阅读”。列表式布局是将信息整合成纵向的信息栏中,而宫格式布局则是将信息整合到不同的模块中,每一个模块代表了一类信息。那么列表式布局和宫格式布局最适用的场景分别是什么呢?下面从视觉吸引力和可拓展性两个方面来具体分析。

>> 知道读者有没有注意到一个现象:一般产品的一级页面大多使用宫格式布局,而二级、三级页面大多使用列表式布局。这是因为一级页面是产品的门户和“脸面”,而且又多属于功能的聚合页面,特别是首页,这就要求一级页面在展示足够多入口的同时,还要兼顾视觉上的吸引力。而以icon、插画、图像为主要表现形式的宫格式布局在视觉设计上更容易出彩,如图3-21所示。列表式布局在视觉吸引力上的确弱了一点,经常会被“吐槽”不好看。

>> 宫格式布局更可以表现信息的优先级,我们可以通过更改宫格的尺寸来调整用户的注意力分布。而列表式布局更显得中规中矩,在表现信息的重要程度上显得力不从心,其只能通过更改信息的排列次序来表现信息的优先级。

>> 宫格式布局最大的缺点就是可拓展性差。什么是可拓展性?在产品设计中,可拓展性就是为了应对将来未知的改变。一个产品的布局不会因为功能的改变而发生巨大的变化。布局的改变一般来自功能的改变,因为产品是由一个个功能组成的。功能的改变可以被分为两类:数量的改变和状态的改变。当然,这里不涉及具体的功能设计,只是探讨功能入口的展示。

>> 列表式布局就没有这方面的顾虑,它可以在不影响界面布局的情况下,无限制地增加新功能入口。例如,在微信的“个人中心”页中,根据用户等级不同,所展示的功能也不一样,这里使用列表式布局更加合适,

◆ 3.3 文字

>> 这是因为具象的元素可以让用户更快地感知信息,但是无法保证精确性。

>> 当然,如果你觉得界面中的品牌色出现过于频繁,那么还可以使用蓝色。蓝色在配色领域绝对是“万金油”,不管你的产品界面主色系是什么,用户一看到蓝色文字就会明白是可以点击的。

◆ 3.7 插画

>> 16∶9这个尺寸比例读者应该很熟悉,因为现在主流手机的屏幕比都是16∶9。为什么是16∶9?因为根据人体工程学的研究,人的两只眼睛的视野范围是一个长宽比例为16∶9的长方形,所以电视、显示器行业都根据这个黄金比例设计产品。16∶9的配图在视频类APP中应用得最多,因为16∶9是电影的常见构图比例,使用16∶9更符合用户的浏览习惯,如图3-75所示。

◆ 3.8 动画

>> 任何设计元素的特性都是来自于其自身的差异性。动画与其他元素的最大区别在于其具有连续性。连续性意味着什么?用户与产品进行交互是一个动态的过程,其他元素可以让用户感知到状态A和状态B,但是动画可以演示这个过程,让用户感知到从状态A到状态B究竟发生了什么,具体的路径是什么。

◆ 4.1 导航体系

>> 大多数导航类应用程序都有两个最基本的功能:告诉用户当前所处的位置和规划出前往目的地的路线

>> (1)现在我在哪个页面?(2)从哪里来到这个页面?是否可以回去?(3)从这个页面可以到哪个页面去?

>> 大多数导航体系都可以被拆解成三个基本元素:tab、(下拉)列表和标签。不管产品的导航菜单有多么复杂,都可以看成这三种基本元素的不同组合形式。

>> 根据方向,可以将tab分为横向栏tab和侧边栏tab。横向栏tab可展示2~5个选项,如果超过了5个,就需要用户左右滑动页面才能看到。所以,当筛选维度过多时,我们可以考虑使用侧边栏tab

◆ 4.2 搜索功能

>> 搜索功能与导航功能其实很相似,都是为了帮助用户更快地找到期望的功能或内容,两者的区别在于搜索功能对于位置的定位更加快速和精确。

>> 一个完整的搜索功能/流程应该由以下三个方面/阶段组成:(1)搜索入口;(2)信息录入;(3)搜索

>> 产品的搜索功能都为用户提供了搜索记录和推荐搜索这两个服务。其中推荐搜索可以通过在搜索框里提供默认值来实现,

>> 为了更方便用户操作,我们还可以在用户录入阶段提供自动填充功能。这样可以节省用户的操作时间,避免打错字,

◆ 4.3 返回功能

>> 从易用性的角度来说,滑动比点击更受用户的喜爱。因为点击手势对落点要求较高,特别是在返回按钮经常被放在界面左上角的情况下。单手操作和大屏手机的用户用拇指很难直接触及,用户需要更改手机握持姿势或者改为双手操作。可能会有人说,安卓手机有物理的返回键,用户可以很容易操作,简直完美。

◆ 4.4 反馈机制

>> 操作反馈与用户反馈。其中用户反馈更多是指通过在线反馈、客服咨询、问卷调查、用户访谈等渠道,收集用户对于产品的投诉和建议。

>> 怎么样才能设计出让用户满意的反馈体系呢?我们需要解决两个问题:(1)什么时候给用户反馈?(2)通过什么方式给用户反馈

>> 反馈必须具备实时性,要让用户时刻感知到系统的状态。如果反馈滞后,用户没有了解到系统最新的状态,则可能会造成无效操作。

>> 常见的反馈方式有6种:弹框、页面、标签、(功能性)动画、红点和声音。

◆ 4.5 分享功能

>> 福格行为模型来帮助我们了解用户的行为机制。用户完成任何一个既定的行为,必须具备三个元素:动机、能力和触发器。只有用户有足够的动机,而且有能力去完成,并且有一个触发器去提醒他,一个行为才可能发生,

>> 动机就是理由,用户做任何事情都需要一个理由。

>> 在设计分享功能之前,我们要梳理用户的“动机点”。如果用户刚跑完了10千米并生成了路线图,那么他会很有成就感,他会很想跟朋友炫耀这件事情。所以,这里就产生了一个“动机点”,我们需要让这个路线图可以被分享。

>> 用户的“动机点”是非常分散的,这就要求我们对于分享场景要尽量细化,我们对于分享的主体也应该化繁为简,兼顾所有的“动机点”。

>> 分享按钮从位置上来说有三种:界面右上角、界面底部和跟随信息流。

◆ 4.6 引导页

>> 启动页是用户每次打开APP都会看到的,如图4-61所示。为什么要有启动页呢?因为用户每次打开APP时都需要加载资源,这个加载过程需要时间。在加载完成前界面里没有内容就会显得很奇怪:到底是什么情况?这个页面怎么空荡荡的?所以我们就会向用户展示启动页。从这个角度来说,启动页和占位符很像,都是为了缓解用户在等待过程中所产生的焦躁情绪。

>> 植物要靠动物传播种子,需要在种子的外面包裹一层果肉吸引“用户”来采食,种子随着动物的粪便被排泄出去,完成传播的过程。同样,要让用户心甘情愿地读取引导页中的信息,我们也需要给用户的眼睛准备“甜品”。

◆ 4.7 顶部栏

>> 用户向下滑动页面代表了用户正在阅读,为了增加阅读区域,我们选择隐藏顶部栏。而且用户向上滑动页面这个手势说明他中止了当前的阅读流程。出现这种情况有两个原因:一是内容写得太差了,用户不感兴趣,要返回到上一级页面。二是内容写得太好了,用户想要知道文章的标题或者作者信息。我发现这种“下滑隐藏,上拉出现”的设置在ONEAPP和知乎APP里都存在,不过简书APP里展示的是作者专栏,而知乎APP里展示的是文章标题,如图4-79所示。

◆ 5.1 弹框

>> 弹框可以分为模态弹框与非模态弹框,如图5-1所示。两者最大的区别在于是否强制用户交互:模态弹框出现以后,如果用户不在弹框上操作,则其余功能都使用不了;而非模态弹框在出现一段时间以后会自动消失或者不影响用户的正常操作。[插图]图5-1 模态弹框与非模态弹框

>> 模态弹框的优缺点都十分明显:优点是可以很好地获取用户的视觉焦点;缺点是打断了用户当前的操作流程。模态弹框属于一种重量性反馈,一般用于用户进行重要且不可逆的操作或者系统状态发生了明显变更时。

>> 根据底部按钮样式,可以将对话框分为单按钮对话框、双按钮对话框和多按钮对话框

>> 底部动作栏的本质就是一个操作选项的容器,操作选项的布局样式有两种:列表式布局和宫格式布局。列表式布局适合展示的选项不多,一般为2~5个,多用于用户进行操作确认或者发起一项新的任务时。

>> 底部动作栏和对话框的另一个区别在于:如果该项操作具有风险性,则底部动作栏是确认(confirm),而对话框是询问(ask)。

>> 下面对上面的三种模态弹框样式做一个小结。(1)如果需要向用户告知当前系统的状态或者用户在进行一些重要且有风险的操作时,则优先考虑使用对话框;(2)如果需要向用户展示多个操作项,则优先考虑使用底部动作栏;(3)如果需要让用户明确不同视图之间的关系,给予用户更具指向性的提示,则优先考虑使用浮层。

>> 使用对话框还是Toast取决于信息的重要程度:如果这条信息的优先级很高,必须要保证用户可以看到,那么应该使用对话框。

>> 所以,设计师不仅要知道那些设计规范,还要花一点时间跟开发人员沟通,因为设计规范是死的,而技术是不断在革新的。

>> 能不用弹框就不要用弹框,能用非模态弹框就不要用模态弹框。

◆ 5.2 表单

>> 任何一个表单都可以被拆解成三个最基本要素:标签(标题)、输入框和按钮,如图5-17所示。[插图]图5-17 表单的基本要素

>> 根据标签所处的位置,可以将其分为左标签、顶部标签和行内标签,如图5-18所示。[插图]图5-18 左标签、顶部标签和行内标签

>> 为了避免用户犯错和提升用户的信息录入效率,我们可以提供自动完成录入功能,当用户在文本框里输入时,系统可以猜测可能的答案,显示可选列表,避免了用户手动输入造成的错误,

>> 表单中的报错提示可以分为两种:单行表单报错提示和多行表单报错提示。

>> 单行表单中意味着在当前界面中表单只有一行输入框,其一般用于手机号、银行卡号、身份证号和金额的录入。对于此类场景,建议使用输入框底部的文字报错提示样式,并且要对录入的信息进行实时校验,不要等到用户进入下一个界面才告知用户在上一个界面中手机号输错了

◆ 5.3 tab

>> 从导航体系的层级来说,底部栏tab属于一级导航,顶部栏tab属于二级导航,而侧边栏tab属于三级导航。这种划分标准其实是由用户的拇指活动范围决定的,或者说是由“拇指法则”来决定的,如图5-34所示。[插图]图5-34 拇指法则

>> 设计不是闭门造车,要做好设计,必须要精准定位产品的用户群体,明白他们的诉求

>> tab可以被分为选中状态和非选中状态,一般来说,为了凸显选中状态,可以合理地利用以下四种元素:字号、字色、线条和背景色,其中线条的位置可以在文字上方也可以在文字下方,如图5-38所示。

>> tab隶属于导航体系,是为了让用户可以更快地找到他们期望的内容或功能。而设计的目的就是为了更好地表现产品的内容,导航体系在设计上应该尽量低调,让用户的注意力可以放在内容本身。而色块的视觉权重很大,所以目前很少有产品会这样设置。线条相对来说还好一点,对用户的干扰不是很大

◆ 5.4 标记系统

>> 从使用场景的角度对这四个元素进行一下总结:角标:表现力最强,适合展示信息层级最高或者最重要的功能;标签:常规标记元素,适合展示不太重要且数目较多的功能;红点:着重于展示状态的变更;印章:是表单类多文本信息的标记首选。

◆ 5.5 信息录入

>> 要提升信息录入的效率,设计师要牢记一个原则——尽量避免让用户手动输入。因为每个用户都期望以最方便、最快速的方式完成信息录入,他们不愿意打开键盘自己一个字一个字地敲。

>> 从上面的分析中,可以简单地总结一下单选按钮和下拉列表各自的使用场景:在选项较少,且界面空间比较充足的情况下,推荐使用单选按钮;在选项过多,且存在层级结构关系的情况下,使用下拉列表更加合适。

酷口

酷口家读书会,让国人都爱读书,腹有诗书气自华,知识改变命运。

Power by 酷口家 , 粤ICP备17140089号