从设计指南说起,详解Material Design体系组件

iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。
一般把Control翻译成控件,把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成,控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体,统称为组件。摊手。


iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。

一般把Control翻译成控件,把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成,控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体,统称为组件。摊手。

从设计指南说起,详解Material Design体系组件

先看一张Material Design所有组件的思维导图:

从设计指南说起,详解Material Design体系组件

底部动作条

定义:一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。

使用规则:底部动作条(Bottom Sheets)提供三个或三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作,或者需要详加描述的,可以考虑使用菜单(Menu)或者提示框替代。底部动作条可以是列表样式的也可以是宫格样式。

从设计指南说起,详解Material Design体系组件

底部动作条的内容:在一个标准的列表样式的底部动作条(Bottom Sheets)中,每一个操作应该有一句描述和一个左对齐的icon。如果需要的话,也可以使用分隔符对这些操作进行逻辑分组,也可以为分组添加标题或者副标题。一个可以滚动的宫格样式的底部动作条,可以用来包含标准的分享操作。

交互行为:显示底部动作条的时候,动画应该从屏幕底部边缘向上展开。根据上一步的内容,向用户展示用户上一步的操作之后能够继续操作的内容,并提供模态的选择。点击其他区域会使得底部动作条伴随下滑的动画关闭掉。如果这个窗口包含的操作超出了默认的显示区域,这个窗口需要可以滑动。

说明:底部动作条是一种模态形式之一。模态:模态的对话框需要用户必须选择一项操作后才会消失,比如Alert确认等;而非模态的对话框并不需要用户必须选择一项操作才会消失,比如页面上弹出的Toast提示。

按钮

定义:由文字和/或图标组成,按钮告知用户按下按钮后将进行的操作。我们可以把按钮理解为一个操作的触发器。

主要的按钮有三种:

悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。

悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮,这些动作通常和变换、启动、以及它本身的转换锚点相关。

从设计指南说起,详解Material Design体系组件

浮动按钮(Raised button),常见的方形纸片按钮,和悬浮响应按钮相反。非悬浮,固定于一个位置。 点击后会产生墨水扩散效果。浮动按钮看起来像一张放在页面上的纸片,点击后会浮起来并表现出色彩。

浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。

从设计指南说起,详解Material Design体系组件

扁平按钮(Flat button), 就是把文字用作按钮。点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。尽量避免把他们作为纯粹装饰用的元素。按钮的设计应当和应用的颜色主题保持一致。

从设计指南说起,详解Material Design体系组件

扁平按钮一般用在警告框中,推荐居右对齐。一般右边放操作性的按钮,左边放取消按钮。如果用在卡片中,扁平按钮一般居左对齐,以增加按钮的曝光。不过,卡片有很多种不同的样式,设计师可以根据内容和上下文来安排扁平按钮的位置。只要保证在同一个产品中,卡片内的扁平按钮的位置统一就可以了。

按钮使用规则:按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。

  1. 如果是非常重要而且应用广泛需要用上悬浮响应按钮。
  2. 基于放置按钮的容器以及屏幕上层次堆叠的数量来选择使用浮动按钮还是扁平按钮,避免过多的层叠。
  3. 一个容器应该只使用一种类型的按钮。 只在比较特殊的情况下(比如需要强调一个浮起的效果)才应该混合使用多种类型的按钮。

卡片

定义:是包含一组特定数据集的纸片,数据集含有各种相关信息,例如,关于单一主题的照片,文本,和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容,但如果需要它可以临时扩展(例如,显示评论栏)。类似分组的集合。

用途:卡片是用来显示由不同种类对象组成的内容的便捷途径。它们也适用于展示尺寸或操作相当不同的相似对象,像带有不同长度标题的照片。

显示这些内容时使用卡片布局:

  • 作为一个集合,由多种数据类型组成(例如,卡片集包含照片,电影,文本,图像)
  • 包含可变长度内容,例如评论
  • 由富内容或互动操作组成,例如+1按钮,滑块,或评论
  • 如果使用列表需要显示超过三行文本
  • 如果使用网格列表需要显示更多文本来补充图像

从设计指南说起,详解Material Design体系组件

纸片

定义:Chips(我们暂时叫他纸片视图)是一种小块的用来呈现复杂实体的块,比如说日历的事件或联系人。它可以包含一张图片,一个短字符串(必要时可能被截取的字符串),或者是其它的一些与实体对象有关的简洁的信息。Chips可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的Chip对应实体的视图,或者是弹出与Chip实体相关的操作菜单。

从设计指南说起,详解Material Design体系组件

联系人的纸片视图用于呈现联系人的信息。当用户在输入框(收件人一栏)中输入一个联系人的名字时,联系人纸片视图就会被触发,用于展示联系人的地址以供用户进行选择。而且联系人的纸片可以被直接添加到收件人一栏中去。

联系人的纸片视图主要用于帮助用户高效的选择正确的收件人。

提示框

定义:用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 提示框可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 。

用途:提示框最典型的应用场景是提示用户去做一个些被安排好的决定 ,而这些决定可能是当前任务的一部分或者是前至条件。 提示框可以用于告知用户具体的问题以便他们作用重要的决定(起到一个确认作用),或者是用于解释接下来的动作的重要性及后果(起到一个警示作用)。

提示框的内容是变化多样的。但是通常情况下由文本 和(或) 其它UI元素组成的,并且主要是用于聚焦于某个任务或者是某个步骤。

从设计指南说起,详解Material Design体系组件

MD规范把警告框分成两种:有标题的和没有标题的。

从设计指南说起,详解Material Design体系组件

标题:主要是用于简单描述下选择类型。它是可选的。

内容:主要是描述要作出一个什么样的决定 。

事件:主要是允许用户通过确认一个具体操作来继续下一步活动。

交互行为:触摸提示框外面的区域可以关闭提示框。

分割线

定义:主要用于管理和分隔列表和页面布局内的内容,以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则,弱到不会去打扰到用户对内容的关注。

当在列表中没有像头像或者是图标之类的元素时,单靠空格并不足以用于区分每个数据项。这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目,使其它看起来更独立和更有韵味。

分割线的类型:

1.等屏宽分隔线:等屏宽分隔线或以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。

从设计指南说起,详解Material Design体系组件

2.内凹分隔线:在有头像或者是图标元素,并且有关键字的标题列中,我们可以使用内凹分隔线。

从设计指南说起,详解Material Design体系组件

3.子标题和分隔线:在使用分隔的子标题时,可以将分隔线置于子标题之上,可以加强子标题与内容关联度。

从设计指南说起,详解Material Design体系组件

网格

定义:网格是一种标准列表视图的可选组件。

用法:网格列表最适合用于同类数据(homogeneous data type),典型的如图片,并且对可视化理解(visual comprehension )和相似数据类型的区别进行了优化。

从设计指南说起,详解Material Design体系组件

从设计指南说起,详解Material Design体系组件

如果卡片中的文本需要与其他主要内容有着足够显著的区别,可以考虑使用一个容器,比如列表(Lists)或者卡片(Cards)。这样可以优化文本显示、增强阅读理解的便利性;列表,增强阅读理解的便利性,尤其是在比较一组具有多种数据类型的数据时;卡片,用于不同格式的内容,比如带有不同长度标题的图片;用于不同类内容的数据集合中,比如具有图片、视频和图书的混合式数据集。

列表

定义:列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

从设计指南说起,详解Material Design体系组件

从设计指南说起,详解Material Design体系组件

列表最适合应用于显示同类的数据类型或者数据类型组(homogeneous data type or sets of data types),比如图片和文本,目标是区分多个数据类型数据或单一类型的数据特性,使得理解起来更加简单。

如果有超过三行的文本需要在列表中显示,换用卡片(cards)代替。

如果内容的主要区别来源于图片,换用网格列表(grid list)。

交互行为:

  • 滚动(列表只支持垂直滚动)
  • 在列表中,每个列表的滑动(swipe)动作应当是一致的。
  • 在操作正确时,可以被选中并且在列表中可以手动改变顺序。
  • 列表可以通过数据、文件大小、字母顺序或者其它参数来编程改变其顺序或者实现过滤。

列表控制

定义:对列表进行操作控制的组件。

列表控制分为如下两种:

  1. 状态/主操作(包括文本字符串)
  2. 次要操作/信息

状态和主操作放在标题列表的左边。在这里,列表里面的文本内容也被认为是主操作的操作目标的一部分。

次要操作以及信息应该放在标题的右边,次要操作通常要和主要操作分开单独可点击,因为越来越多的用户希望每个图标都能触发一个动作。

列表控制的类型

复选框(Checkbox):既可以被定义成是主操作也可以是次要操作。

类型:状态/主操作;次要操作/信息

单独可点击

从设计指南说起,详解Material Design体系组件

开关

类型:次要操作/信息

单独可点击

从设计指南说起,详解Material Design体系组件

重新排序

类型:次要动作

通常都是单独可点击,视当前列表所处的模式而定。

该动作允许用户给列表中项通过拖动变换位置。通常,这个按钮出现在列表编辑的模式下。

从设计指南说起,详解Material Design体系组件

展开/折叠

类型:次要动作

单独可点击

垂直展开或者折叠列表来显示或者隐藏当前列表

从设计指南说起,详解Material Design体系组件

Leave Behinds

类型: 其他

Leave-behind 是在当某一项列表被滑开之后的操作提示。Leave-behind可以被转换成一项操作。

无论从哪个方向滑动列表,都会出现操作图标。滑动了之后,操作图标就会居中显示于列表空白处。

从设计指南说起,详解Material Design体系组件

查看更多

类型: 主要操作(连同行内其他内容)

非单独可点击

点击之后跳转到与当前列表相关详细信息的页面,通常这都是一个新的页面或者面板。

从设计指南说起,详解Material Design体系组件

选中

类型: 状态

非单独可点击

仅适用于菜单。用来表示当前列表是否通过不同的操作之后被选中。

从设计指南说起,详解Material Design体系组件

菜单

用法:菜单是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发。

每一个菜单项是一个离散的选项或者动作,并且能够影响到应用、视图或者视图中选中的按钮。

从设计指南说起,详解Material Design体系组件

触发按钮或者控件的标签(label)可以简明准确的反映出菜单中包含的菜单项。菜单栏通常使用一个单词作为标签,像“文件”、“格式”、“编辑”和“视图”,然后其他内容或许有更冗长的标签。

菜单显示一组一致的菜单项,每个菜单项可以基于应用的当前状态来使能。

从设计指南说起,详解Material Design体系组件

交互行为:菜单出现在所有的应用内部的UI元素之上。通过点击菜单以外的部分或者点击触发按钮,可以让菜单消失。通常,选中一个菜单项后菜单也会消失。一个特例是当菜单允许多选时,比如使用复选标记。

说明:将动作菜单项显示为禁用状态,而不是移除它们,这样可以让用户知道在正确条件下它们是存在的。比如,当没有重做任务时禁用重做(Redo)动作。当内容被选中后,剪切(Cut)和复制(Copy)动作可用

从设计指南说起,详解Material Design体系组件

进度和动态

定义:在刷新加载或者提交内容时,需要一个时间过度,在做这个过程中需要一个进度和动态的设计。

尽可能地减少视觉上的变化,尽量使应用加载过程令人愉快。每次操作只能由一个活动指示器呈现,例如,对于刷新操作,不能即用刷新条,又用动态圆圈来指示。

指示器的类型有两种:线形进度指示器和圆形进度指示器。可以使用其中任何一项来指示确定性和不确定性的操作。

在操作中,对于完成部分不确定的情况下,用户需要等待一定的时间,无需告知后用户台的情况以及所需时间,这时可以使用不确定的指示器。

线形进度条:应该放置在页眉或某块区域的边缘。线形进度指示器应始终从0%到100%显示,绝不能从高到低反着来。如果一个队列里有多个正在进行的操作,使用一个进度指示器来指示整体的所需要等待的时间。

从设计指南说起,详解Material Design体系组件

圆形进度指示器

从设计指南说起,详解Material Design体系组件

滑块

定义:滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

连续滑块(Continuous Slider)

在不要求精准、以主观感觉为主的设置中使用连续滑块,让使用者做出更有意义的调整。

从设计指南说起,详解Material Design体系组件

带有可编辑数值的滑块

用于使用者需要设定精确数值的设置项,可以通过点触缩略图、文本框来进行编辑。

从设计指南说起,详解Material Design体系组件

间续滑块(Discrete Slider):间续滑块会恰好咬合到在滑动条上平均分布的间续标记(tick mark)上。在要求精准、以客观设定为主的设置项中使用间续滑块,让使用者做出更有意义的调整。应当对每个间续标记(tick mark)设定一定的等级区间进行分割,使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的,使用者不可对其进行编辑。

附带数值标签的滑块:用于使用者需要知晓精确数值的设置项。

从设计指南说起,详解Material Design体系组件

Snackbar 与 Toast

定义:Snackbar 是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作也不能从屏幕上滑动关闭,文本内容左对齐。

从设计指南说起,详解Material Design体系组件

用法

短文本

通常 Snackbar 的高度应该仅仅用于容纳所有的文本,而文本应该与执行的操作相关。Snackbar 中不能包含图标,操作只能以文本的形式存在。

从设计指南说起,详解Material Design体系组件

暂时性

为了保证可用性,Snackbar 不应该成为通往核心操作的唯一方式。作为在所有层的上方,Snackbar 不应该持续存在或相互堆叠

最多0-1个操作,不包含取消按钮

当一个动作发生的时候,应当符合提示框和可用性规则。当有2个或者2个以上的操作出现时,应该使用提示框而不是 Snackbar,即使其中的一个是取消操作。如果 Snackbar 中提示的操作重要到需要打断屏幕上正在进行的操作,那么理当使用提示框而非 Snackbar。

从设计指南说起,详解Material Design体系组件

副标题

定义:副标题是特殊的列表区块,它描绘出一个列表或是网格的不同部分,通常与当前的筛选条件或排序条件相关。

副标题可以内联展示在区块里,也可以关联到内容里,例如,关联在相邻的分组列表里。

*在滚动的过程中,副标题一直固定在屏幕的顶部,除非屏幕切换或被其他副标题替换。

为了提高分组内容的视觉效果,可以用系统颜色来显示副标题。

从设计指南说起,详解Material Design体系组件

开关

定义:开关允许用户选择选择项。

一共有三种类型的开关:复选框、单选按钮和 on/off 开关。

注释:下面示例中所示的图形环代表一个动画,并不是实际按钮的外观。

复选框:允许用户从一组选项中选择多个。

如果需要在一个列表中出现多个 on/off 选项,复选框是一种节省空间的好方式。

如果只有一个 on/off 选择,不要使用复选框,而应该替换成 on/off 开关。

复选框通过动画来表达按压和按下的状态。

从设计指南说起,详解Material Design体系组件

单选按钮:只允许用户从一组选项中选择一个。

单选按钮通过动画来表达聚焦和按下的状态。

从设计指南说起,详解Material Design体系组件

开关:On/off 开关切换单一设置选择的状态。开关控制的选项以及它的状态,应该明确的展示出来并且与内部的标签相一致。开关应该单选按钮呈现相同的视觉特性。

开关通过动画来传达被聚焦和被按下的状态。开关滑块上标明 “on” 和 “off” 的做法被弃用,取而代之的是下图所示的开关。

从设计指南说起,详解Material Design体系组件

Tabs

定义:在一个 app 中,tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单。

用法:tab 用来显示有关联的分组内容。tab标签用来简要的描述内容。

从设计指南说起,详解Material Design体系组件

使用规则:

  • Tabs 也不是用于内容切换或是内容分页的(例如:应用中页面之间的切换)。
  • Tabs 应该显示在一行内。
  • 一组 tabs 至少包含 2 个 tab 并且不多于 6 个 tab。
  • Tabs 控制的显示内容的定位要一致,为并列关系。
  • Tab 中当前可见内容要高亮显示。
  • Tabs 应该归类并且每组 tabs 中内容顺序相连。

文本框

文本框可以让用户输入文本。它们可以是单行的,带或不带滚动条,也可以是多行的,并且带有一个图标。点击文本框后显示光标,并自动显示键盘。除了输入,文本框可以进行其他任务操作,如文本选择(剪切,复制,粘贴)以及数据的自动查找功能。

文本框可以有不同的输入类型。输入类型决定文本框内允许输入什么样的字符,有的可能会提示虚拟键盘并调整其布局来显示最常用的字符。常见的类型包括数字,文本,电子邮件地址,电话号码,个人姓名,用户名,URL,街道地址,信用卡号码,PIN码,以及搜索查询。

单行文本框:当文本输入光标到达输入区域的最右边,单行文本框中的内容会自动滚动到左边。

从设计指南说起,详解Material Design体系组件

带有滚动条的单行文本框:当单行文本框的输入内容很长并需跨越多行的时候,则文本框应该以滚动形式容纳文本

在滚动文本框中,一个图形化的标志出现在标线的下面。点击省略号,光标返回到字符的开头。

从设计指南说起,详解Material Design体系组件

多行文本框:当光标到达最下缘,多行文本框会自动让溢出的的文字断开并形成新的行,使文本可以换行和垂直滚动。

工具提示

用法:对同时满足以下条件的元素使用工具提示:1.具有交互性。2.主要是图形而非文本。

从设计指南说起,详解Material Design体系组件

后记:

iOS和Material Design组件都已经讲完了,接下来的几篇文章都会按照组件控件的功能属性,详解设计规范之组件控件体系。

相关阅读

从设计指南说起,详解iOS系统组件分类体系(属性分类篇)

#专栏作家#

UX,微信公众号:UEDC,人人都是产品经理专栏作家。华为ITUX交互组组长。

本文原创发布于人人都是产品经理。未经许可,禁止转载

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21410/

(0)
CatherineCatherine
上一篇 2017-04-28 09:55
下一篇 2017-04-28 11:39

相关推荐

  • 【实习精选】网易、中信、博彦科技、雅培、太平洋证券等名企实习汇总(04-02)

    序列               实习单位工作地1德国电信咨询北京2腾讯北京3中信研究部北京4东亚银行(中国)有限公司上海5雅培中国上海 嘉兴6太平洋证券上海7广州越秀金融控股集团有限公司广州8广东南方都市报经营有限公司广州9国金证券股份有限公司深圳10博彦科技股份有限公司西安11网易雷火游戏部杭州12科锐国际大连01德国电信咨询一、企业和团队介绍德国电信国际咨询公司(DETECON),德国电信集团的全资子公司,是全球领先的ICT行业专...

    2018-04-08
  • 用户场景化思维,在交互设计中的体现

    当不清楚我们要得到什么的时候,那就先从交互设计三要素开始。

    2017-05-16
  • 【译文】UI设计评审成就微创新

    产品设计流程中,有必要对设计进行评审是大家的共识。在我每周的工作内容中,参加各类大大小小的设计评审是必不可少的一环。既有脑力激荡的评审让设计方案脱胎换骨的,也有针锋相对的评审让设计方案摇摆不定的。怎样进行一场高质量的设计评审?设计师应该如何应对设计评审,更好的表达设计意图,并收集意见改进方案?怎样避免设计评审变成竞稿或PK?如何确保设计评审这样的流程能带来更大价值?带着这些问题,我们一起看看原文作者Jason的观点。*在你点评的设计细节上开始询问背后的原因及意图。为什么我们需要这条信息?对于允许索取这条信息我们设置了哪些期望?我们会用它做什么?如果我们能回答它们,再进入讨论解释各种元素的优劣以及与之对应的不同意见会比较好。“为什么”引出一个故事,解释某件事情的真实性。如果你问为什么,一切都无法奏效,你更想要创造一个故事,无论真实与否。这是让你感到糟糕的危险领域。 与询问“为什么”不同的是,考虑询问“如何”能够引出一个创造流程的故事,不必为它的存在辩护。然后你可以问设计师之前考虑过的各种可能,认真倾听设计师在提供方案之前做过的尝试。他们也许过于看重某些东西,不过没必要深究。优秀的适时交互是让产品(服务)吸引或失去客户的关键区别。将间歇性的互动变为持久关联的秘诀在于一系列精彩微交互,以及当用户需要时恰好出现的信息内容。 在设计评审流程中,应当询问每一个行动、每一次询问或者每一次数据展示是否出现在正确的时机,以确保界面在切换时传递信息时顺畅。随着扁平化设计与用户体验趋势的摇摆变化,我们能预感到页面部件缺少视觉线索的风险,因此动画能减少这种风险。 这种动效可能是颜色、透明度的变化,也可能是用猴子的手臂延伸页面这种细节,或者用户完成任务后展示太阳升起的效果。询问在UI设计中加入逐步动效的可能将极大的推动设计师改善设计,使得设计师思考时间维度的设计细节,而不只是局限在空间维度。这是一个很好的问题,我认为它是每个人都应该吸收的教训,尽管并非如此。我总喜欢提到:对用户的真实目标来说,页面或屏幕上的任何元素都不是解决方案的一部分,而是噪音和干扰。 在设计的每一步中,我们都需要自问:我们如何能够创造更小思考成本下能发挥同样作用的产品?在设计评审中,这是要求把方案简化的最佳表达。在设计中保持界面清晰很重要,使用尽可能少的点击、文案和输入框来达成目标更好。踏踏实实的把用户需要完成工作的消耗降到最低,用户会感激不尽。我们认为,很棒的产品描述(比如产品手册)对用户来说就跟“坐在60码时速的车上看到的广告牌一样”,UI设计师们比较难理解用户是如何忽略这些产品界面细节的,尽管设计师为此付出诸多努力。 优秀的设计评审放慢节奏,考虑每个元素,但是能认识到这些设计细节可能不会被用户注意到。如果参加评审的人员在颜色、字体及体验设计方面没有专业知识,他们可以考虑以下重要因素:经验告诉我,不要试图一概而论。例如我会问“我不确定开放的banner是否足以传达品牌?”,而不是问“哇,用户根本不会理解我们的品牌价值。”这就是为什么我认为每个设计师应该花时间观察用户并且使用自己的产品(又称可用性测试)。

    2017-05-18
  • 行云流水般的交互体验:当智能头机邂逅百度音乐

    音乐,作为一直延续的人类共有的精神食粮。从爱迪生发明第一部留声机到后来的黑胶唱片、再到磁带、CD、MP3经历了整整140年,储存和传输音乐的介质从磁性变成了光学;储存歌曲的数量越来越多,体积也越来越小。但是笔者有一个长期被困扰的问题:作为运动爱好者和音乐发烧友,在跑步锻炼时常常需要将iPod或者Sony Walkman笨重的机身绑在胳膊上,然后再插上耳机、选歌、调节音量等等至少4、5步操作才能听到想听的歌;还常常因为线头缠绕,越解越乱。...

    2018-01-30
  • 加拿大皇后大学开发出一款柔性全息交互式概念手机

    硬件设计师和制造商一直梦想着把全息移动设备带到现实生活中来,不过来自加拿大皇后大学的一支研究团队,却已经拿出了一款名叫HoloFlxe的设备。顾名思义,它同时具备“柔性”(Flexible)和“全息”(Holographic)两种…

    2016-05-11
  • 聊聊意见反馈,小功能也有大门道

    反馈是几乎所有应用的标配功能,往往藏在“设置”或者“关于”里面的小角落。意见反馈在产品开发中的作用是不能忽视的,这几乎是所有应用最好的用户意见收集入口,但是不同应用对意见反馈的处理各不相同。最近在做反馈系统的梳理工作,也包括意见反馈页面优化,将这一段的分析整理成此文。

    2017-06-01
  • Axure画产品原型最新常用组件分享(一)

    画产品原型是产品经理必备的一项硬技能,一般使用axure进行制作,很多人可能都知道axure,但是怎么利用axure把产品原型画的又快又好并不是一件容易的事;原型要画的好,最重要的不是你掌握多复杂的功能,而是要制定好设计规范;下面我把移动产品原型制作中常见的一些元素按照一定的设计规范制作成组件分享给大家,你只要把相应的元件拖动到自己的工作界面,简单修改文字就可以使用了,这是第一个部分,包括以下内容:一. 手机外壳二. 空页面模板三. 常...

    2018-04-05
  • 聊聊UI界面中搜索入口的设计

    搜索几乎是现在所有网站,APP甚至操作系统的标配,不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站上搜索呈现的方式都有所不同。

    2017-05-16
  • Axure如何制作圆形加载效果?

    01新建一个矩形,去掉底部边框02调整矩形的圆角半径03设置颜色,命名为“半圆1”04复制半圆,垂直翻转,命名“半圆2”05新建矩形,命名“矩形遮挡”06设置“半圆1”的交互样式07“矩形遮挡”遮挡“半圆1”,“半圆2”隐藏08设置“矩形遮挡”交互样式09点击预览

    2018-03-29
  • 用户体验提升才是“蔚来”

    nEqual 是业界领先的赋能“智慧商业”的数据智能技术提供商,是精硕科技集团下专注数据技术的事业部。nEqual以数据和技术为支撑,为企业实现营销自动化、智能新零售、AI人工智能等“智慧商业”模式打造和运营,帮助企业提升营销体验、销售体验及服务体验等全面的超级用户体验,进而助力企业构建可持续发展的商业竞争力。近年来,人工智能迅速占领大家视野,虽然业界已经探索了几十年,但近五年来才开始飞速发展,这得益于数据和技术的进步。近日,朋友圈被蔚...

    2018-01-30