设计思维

B端设计中的树形选择

纯纯

树形选择

关于树形选择,我们必须先知道它的基础概念,“树” 究竟是什么?我们先来看看树状结构的定义


树状结构:

树状结构其实是作为一种层次结构化的表达方式,它能够将树的抽象出来表达完整的构造关系,为什么叫做树,是因为它更像是一个上下颠倒的树,根部在最顶端,枝叶反而变为下方。

同样在对树状结构的整体命名上,也遵循了与之类似的表达方式:



节点(Node):是树状结构当中的基本单位,使用节点可以表示 不同数据间的 组成关系(从属关系与并列关系)通常节点会分为几类特殊情况。


1.根节点:整个树状结构的开端被称为根节点。一个树状结构一定只有一个根,在思维导图中,根节点就代表着它的开端,用于延展出更多的树状结构。不过在目前的树形选择当中,因为对易用性的要求,通常会隐藏根节点,只展示子节点。而根节点隐藏在 标题、选项文本 当中。


2.子节点:根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制,在树形选择当中是直接展示出来的部分。


3.叶节点:没有连接到其他子节点的节点。叶节点属于一类特殊的子节点,它是整个树状结构的最末端节点,在树形选择当中是一个重要的概念,下面会展开来讲。

分支(Branch):节点之间的链接,在我们树形选择当中,分支的线条可以选择显隐。其搭配的使用方式也有所不同


同时我们还会用到节点的几个基础的概念:

节点层级:指当前节点所在的层级,比如根节点为第一层级,根的子节点为第二层级,以此类推;

节点高度:对于某一节点的高度,便是该节点下所有叶节点从上到下的个数;

节点深度:指该节点到根节点的唯一路径长度,深度与层级较为类似。


树状结构究竟出现在生活中的什么地方呢?树状结构对于我们又有什么用呢?大家可能理解上会觉得很枯燥,我给大家举一个例子:


回忆一下我们小学使用字典时的场景,首先我们是先通过声母,去确定这个汉字的大概的页数范围,然后通过韵母去确定这个汉字的详细位置,最后通过音调找到想要寻找的汉字:


其实字典的设计,便是一个典型的树形结构。而在 B端系统中我们常见的公司组织架构、省 市 县 地址选择、在线教育的班级结构 等等,这些都是使用了完整的树形结构。


采用树形可以快速进行结构化的表达,其目的是为了用户能够快速地增删改查,想要更多了解结构化表达的同学推荐大家看一本书《金字塔原理》,里面讲了非常多的逻辑化思维、表达的方法与内容,内容比较多,而这种思维其实在我们工作生活中都能够用到。



树状结构组成:

1.层级缩进

为了将树的整个结构完整的表达出来,会使用层级缩进的方式进行区分,通常会使用 8px 对下一级节点进行缩进,这样能够表达更为完整的层级关系。

这里要注意,如果想要更为强调树形选择的层级关系或者树形内容本身就比较多的情况下,可以见解 Coding 编辑器的思路,即:将缩进内容使用“分支线”进行表达,更明确清晰。 这里使用层级线后,折叠图标也会有所不同,下面有明确解释。


2.折叠图标(节点按钮)

主要是将节点下的所有树叶与子节点进行展示,在整个树的结构中,折叠图标一般分为两种:三角折叠、方形折叠

三角折叠:为页面层级较少时使用。因为在较少的层级下,用户不用特意去思考当前节点所在层级究竟在哪。

方形折叠: 更多与页面层级线进行配合使用,通过层级缩进,将页面层级线标识清楚,能够更好的在多层级情况下进行合理区分。


3.选择控件

整个树形结构依旧是在选择录入框架下,分为单选和多选。因此需要对其类型有所展示,特别是在多选的场景下,一定要标明它的类型,方便用户进行理解使用。

通常这个控件可以在单选的时候进行隐藏,这里先按下不表,我在树形选择的类型当中深入给同学们进行分析理解。


4.选项文本

注意字数限制、超出后如何处理即可,我就不做过多介绍。



树形选择的类型:

在讲树形选择之前,我先为大家讲解关于与其相关的同类型产品,为了方便大家的记忆,我选择出了两类不同的组件进行对比,感兴趣的同学可以关注“CE青年” 后台回复树形对比进行查看。我通过视频的形式为大家进行了讲解,相信大家在看完之后一定会有所收获。

1.单选树

单选树只能选择叶节点,也就是需要将每个树展开过后才能进行选择。

它是一个较为传统的选择方式,因为它的选择热区较小并且理解成本较高,因此这种方式不太满足现如今对于B端产品效率提升方面的要求,并且要求十分特殊,因此使用较少,现多以单选节点树为主。

2.单选节点树

单选节点树与单选树最大的区别在于其能够选择子节点,这样可快速选择该子节点以及其各种叶节点

同时传统的单选节点树中是采取单选按钮的方式,随着对B端要求的不断提高,并且在树的功能越发的复杂过后,几乎取消了 单选按钮 的形式,取而代之的是将整个 文本标签 作为选择的热区,用户点击过后即可进行选择。

因此在树形选择当中,逐渐将单选节点树演变成由两部分热区所组成的一个控件:



在左侧,主要以树类型的展开折叠操作,热区通常就是图标折叠图标这一部分;

在右侧,以选择该选项、节点的操作为主,热区范围以整个选项文本作为基础,进行延展即可。

这里还是提示以下新读者,这类选择一定要进行 Hover 状态处理,不然用户无法根据光标的变化判断是否可点击,当然老读者跳过就行~

3.多选节点树

大家在对比单选与多选时会发现,为什么不会存在多选树?不存在只选择选项的多选呢?

思考时间又到了,别忘下划,自己先想想呢~

虽然在理论上会存在多选树的情况,但是它存在的价值比较诡异。首先在树的节点当中,我选择一个子节点就是选择该节点下的所有。因此可以说是选择了一个节点;或者说它选择了该节点下的多个选项,因此在实际情况中这类场景过于的少,更多会用多选节点树进行代替。


当然,多选节点树与单选节点树在结构上是十分接近的,就是将复选框展示出来,方便大家进行选择。考虑到大家经验不足,建议这里复选框放在折叠图标前侧,原因有二:


  • 在树形选择后续的拓展当中,经常会遇到选择增加一些操作功能,比如 新增、删除、复制、粘贴、拖动排序。我看很多设计师最开始因为种种原因将选择组件部分放在后侧,导致之后的操作无法进行更多的拓展,随之崩溃,对树形选择又是一顿乱造~

  • 现有的基础架构基本都是沿用了这类设计,可减少前端同学的工作量,同时也减少他 BUG 的产生。


多选节点树的使用场景非常多,我举一个大家在树形选择中都会犯的例子,希望大家能够多理解其中存在的特殊逻辑:


比如在一个大型上市公司当中,我作为老板会去设定整个“设计部”的权限,并且想要得到的效果是之后有任何新员工都是使用这个权限。如果作为一个新人设计师,很容易就会使用多选节点树,将整个组织架构进行选择,但是这样的选择与用户实际想要的内容是存在较大差异的。


在产品设计中,对于上诉的“设计部”这个概念其实是一个动态数据,即在之后新增到“设计部”的所有员工,我不必再去权限管理中重新配置。我们遇到动态数据的情况时,首先不建议大家采取树形选择,因为首先对于这个概念的理解成本很高,无法通过树形选择这样的方式让用户理解;同时系统对于这类动态数据的情况都建议特殊处理,至于怎么处理,大家可以在评论区讨论,我也会在后续文章当中为大家进行讲解。


树形选择的优点

易理解:

因为树状结构本身就已经存在很久,早在 DOS 计算机时代就有它的影子,经过长期累月的发展,用户在理解上也会相对更加容易


快浏览:

在数据量特别大的时候,能够根据子节点优先找到自己想要的叶节点,从而提升选择效率,与《选择录入02》当中讲到的 Tab选择十分类似,没看过的同学建议先去看看。


看结构:

结构,能够辅助人们进行快速记忆,从而对整体框架有着更深了解。而树形选择正是有了这种结构能够更为方便的让更多人熟知,从而更快了解业务。


树形选择常见误区:

数据量

首先对于树形选择本身的控件形式,你就需要去分析其能承载的内容数据量。应该是在什么范围内较为合适。

当数据量过大时一定会出现异步加载、数据分页等诸多情况,因此在设计中,需对这类情况进行设计。

全选功能

全选功能本身较为简答,无外乎就是一个复选框的事情,但是在上面提到的数据量过大 + 全选的存在,会有些问题还需要大家进行留意。

键盘映射

在树形选择当中,都可以采取键盘操作从而提高效率。基本规则是:

↑键:向上切换同级节点;从第一子节点,顺序返回父节点;

↓键:向下切换同级节点;顺序进入已展开的第一子节点;

←键:关闭当前级别节点;返回上一级父节点;

→键:展开子节点列表;顺序进入已经展开的第一子节点;

回车键:提交当前 foucs 的节点选项;

树形选择是较为常见的一类方式,但由于大家对 基本的树形结构 认识不足,导致对其设计会有许多误区。

作者:CE青年    来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 


B端设计指南 - 按钮

纯纯

按钮是任何用户界面当中(无论是桌面还是移动用户界面)必备的交互元素:甚至可以说,如果页面中没有一个按钮,整个页面设计将是不完整的。在日常生活中,按钮也是随处可见的,一个电灯开关、遥控器按钮,现实生活中按钮反复的出现也可以帮助我们不断去理解屏幕世界中按钮应该如何操作,从而衍生出屏幕世界中的按钮的具体形态

人机交互中最重要的就是把我们从小到大对于这个世界的认识映射到屏幕世界中,比如苹果最为经典ios的滑动解锁


而到了屏幕世界中,控件的设计更应该与物理世界保持相对的一致,这也是按钮设计中,尤为重要的一个环节

最近常问身边的朋友,按钮究竟是什么?


因为对于他们而言,按钮不就是一个操作区域加上文字,没什么特别的,也正因如此,对于按钮的具体构造也不太了解。这篇文章主要是根据自身的工作经验,结合当下对于按钮设计的理解,去分析如何进行更合理的按钮设计


按钮的痛点

对于每个设计师来说按钮并不陌生,在每天的设计中,都会使用按钮进行页面设计;但又不是每一个设计师都能够将按钮设计好,因为它存在三个方面的复杂性:

使用场景过多:

不是每个场景都需要相同的按钮,比如在登录页当中,登录和注册就是使用不同的按钮形式。这些情况特别在B端产品中,业务在每个步骤中需要突出和强调的点不同,导致设计师很难通过具体场景进行按钮设计;

出现频率太高:

B端产品中,每个页面当中都会有按钮不停的重复,而高频的出现会让我们感到麻木,导致很多设计师都将其忽略;

形式太多:

在我总结的按钮形式当中,一共分为10类,且情况多种多样,很多时候都没有意识到不同形式之间的差距,导致乱用混用


因此一个看上去小小的按钮,其实经常会困扰着我们,如果刚开始没有将按钮进行整体的梳理,那么在你的设计过程中,按钮会经常打断自己的设计思维,为了让大家能够对按钮有更深的理解,我将按钮进行系统的拆解,结合实际案例,能够使按钮更浅显易懂

在文章按钮类型的分析中,我将按钮分为两大类、十小类,将其分类也是为了更好的为大家去分析每一个按钮所涉及到的状态,当我们理解按钮之前,你需要了解它的内部构造



首先,抛出一个问题给大家,下图中,共有几种按钮形式?分别是什么?给大家五秒钟时间思考


如果你对上图的按钮形式并不完全了解,建议你拿好小本本,做好笔记~

在开始讲常见按钮类型前,我们必须要搞清楚一个重要的知识点:按钮状态


按钮状态:可以让用户知道这个按钮当前是在进行哪一种操作,方便帮助用户进行判断

常见的按钮状态分为:正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled),下面分别对这六大状态进行拆解


正常状态 (Normal):除了其他五种状态外的情况都是正常状态,它是按钮最为常规的状态形式,也是设计师必须设计的一种状态


聚焦状态 (Focus):主要是用于展示当前电脑光标所在的具体位置。听起来有点玄乎,我来讲他背后的原理,主要是方便一些键盘使用的用户,可以使用Tab键或者方向键来对网页进行访问输入

比如在Mac OS 以及 Windows的使用中,通过点击Tab,便展示出文件的Focus状态

Focus状态是一个非常重要的交互形式,但是很多设计师都会忽略,甚至在很多网站,直接就是将这个样式所去除,导致使用Tab键无法获取聚焦的反馈,比如常见的百度、Google再到各大操作系统都会有这类反馈,去除这类反馈,会导致用户无法用方向键控制光标位置,在很大程度上降低用户使用的可能性


悬停状态 (Hover):在桌面端的设计当中,即使用户知道它是可以点击的,但是你还是需要设计悬停状态,表明鼠标现在正在按钮上。平板电脑和移动端的设备上用永远不会展示悬停状态,因为你的手指是无法在屏幕上进行悬停的(虽然IPad OS 更新了13.4版本后,会有Hover态的出现,但是是通过鼠标进行操作,因此这里不予以讨论)


激活状态 (Active):激活状态因为叫法不同,在有的地方也称之为Press状态,它的表现就是将按钮按压下,将颜色变深同时会涉及到内阴影等效果的出现


禁用状态 (Disable):按钮禁用状态作为最难设计的状态之一,主要在于禁用状态的表现形式以及禁用状态与激活状态之间如何的切换,我具体来分析一下两个难点


难点一:禁用状态在颜色上首先会给人灰色块的感觉,行业里也称之为置灰,在设计上,也需要注意光标移动时需要展示禁用光标,即让前端大哥将Cursor的hover状态更改为not-allowed,你可以优雅的在前端面前装个X(之后会出一期,简单聊聊我与前端如何协作如何装X)

难点二:禁用与激活状态的切换,比如在一个注册页面中,需要姓名与电话必填,当用户没有填写完成姓名与电话时,应该将按钮置灰,提示用户不可以点击,当用户填写完成必填字段后,将禁用按钮转变为激活按钮,提示用户可以点击登录


加载状态/Loading:按钮需要时间进行加载的一种状态,通常会被用户忽略,但是在B端产品中,Loading状态尤为重要,这里有很多细节和小技巧,展开讲篇幅太大,在文中4.3小节(按钮细节)会详细解答


主按钮为页面中按钮区最为核心的操作,在日常场景中,主要按钮一般都为新建、编辑、保存这一类正向的操作,强调页面中最为核心的功能,能够让用户一看到主按钮就明白大致在页面中需要如何操作

但在主按钮的使用中,要遵循以下两个原则:


1.在页面当中,按钮区域的主按钮最好只有一个,否者会对页面的主要功能造成干扰


2.并不是每一个页面都需要有主按钮,不要因为页面缺失主按钮而强行加上。因为在实际使用中,时常遇到按钮之间为平级的关系,强行添加,容易造成页面层级混乱


在主按钮中,按钮状态的设计也会跟随物理世界进行相应的映射,因此在设计时需考虑现实生活中的状态

比如用户的Hover时,一般都将按钮抬起并亮度增加,其目的是为了提示用户可以点击,而用户在按下时,用加黑来表示用户按下的状态,与现实生活中按钮的状态类似,因此按钮状态也应该映射物理世界


次按钮在页面中出现最为频繁,在日常使用中,如果你不太确定使用何种按钮时,那使用它,大概率没有错。因为它运用广泛,出现频率也最高,因此也被人们称为标准按钮

在次按钮的设计形式中,我们团队将设计形式分为两类:


第一类 字线型

此按钮整体以文字+边框的形式,这类形式在视觉层面上感知较弱,适合几个按钮同时展示,在B端项目中,字线型也是在使用中最为频繁的形式


第二种 字面型

字面型更偏向表达按钮整体,常见于各类移动端的按钮当中,整体的表达也更适合移动端这类屏幕尺寸较少的设备当中,更符合卡片化设计的思路,反而不太适合桌面端的设计


文字按钮为页面中视觉层级较低的按钮形式,因而可以在页面中大面积的重复使用,文字按钮与链接(Link)基本一致,且没有太多区分,所以在设计上,文字按钮与链接基本相同

文字按钮重复的出现,以表格页面当中的操作列表最为突出,因为表格当中常用的操作最好能够直接展示出来,因此表格中基本都采取文字按钮的形式


图标按钮为页面中控件占比最小的按钮,所以在页面中的使用也是最为高效的。因为没有了文字元素,会导致用户在图标的理解上出现偏差。为了解决这一问题,主要是通过用户在Hover时使用展示Tooltip提示按钮的含义,同时建议在图标按钮的使用上多为高频且易理解的图标

我举一个简单例子:

在桌面端产品中,帮助文档一定是非常重要的一个入口,当用户对页面中的功能有所疑惑时,可以通过此来帮助用户进行理解,通常需要在大多数页面当中展示帮助中心的入口,这时图标按钮就变得最为合适

因此,我们可以得出图标按钮的应用场景通常为:当页面中需要高效的展示一个或几个图标时,同时图标按钮的展示最为频繁时,当同时满足以上两点,使用图标按钮就是一个更优的解决方案


按钮菜单为页面中许多操作的集合,通常是将高频的操作以及一些低频的操作进行整合,组成的按钮菜单。这样既能够减少页面元素的冗杂,同时也能够满足业务对于功能的需求

举个例子,在表格页面当中,B端设计师最常见到的按钮菜单就是新建,这类新建按钮其实是必不可少的,同时业务需要,还需要多个业务按钮进行展示,按钮菜单的出现,帮助用户进行按钮的整理,同时也满足业务需求


这其实是主按钮的一种衍生,通过图标对主按钮的含义进行解释,从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调,那便可使用在按钮中添加图标,这样既能够强化图标的含义,同时也加深了用户对于按钮的印象



在六个常见按钮形式中,我们根据重要的优先级,给常见按钮进行一个简单的排序:

图标按钮-按钮菜单-主按钮-次按钮-文字按钮-图标按钮



危险按钮在删除操作中最为常见,通常是为了警告用户,这个数据删除不可恢复,让用户谨慎考虑。在常见的删除操作中,都需要用户进行二次确认,避免用户误操作

当然,在实际业务中,危险按钮不宜过多,如果业务当中无法避免,需要展示多个删除按钮时,推荐采取图标按钮进行展示或者Hover过后将其呼出


幽灵按钮,看它的名字就能想到它的作用:像幽灵一般透明的存在

它没有使用复杂的颜色、样式,而是用线条表示外部轮廓,证明它还是一个按钮。同时内部只用文字展示按钮名称。它只出现在按钮背景复杂的页面当中,比如:渐变色、纹理、动态图片背景的情况下,幽灵按钮能够完美融入到环境当中

而现如今,传统意义上的幽灵按钮已经很少,毕竟在现如今的官网当中,幽灵按钮已经不再流行,更多的是出现在复杂页面的“实心按钮”,而在某种意义上讲,这类按钮才是幽灵按钮现在的状态

幽灵按钮和次按钮有何不同?

在形式上,幽灵按钮和次按钮看来起没有并什么不同,因此会有很多疑惑,那我什么时候用幽灵按钮什么时候用次按钮呢?

首先幽灵按钮是属于特殊按钮体系中,因此它不会受整个按钮体系的束缚,比如我在一个设计系统中,分别定义了常规按钮的尺寸分别是24px、32px、40px,但是我在一个官网落地页当中需要有一个46px的按钮出现,次按钮就完全不合适。其次幽灵按钮边框粗细、字体大小都是和常规按钮体系不同,因此幽灵按钮就和次按钮有所不同


第二个方面在次按钮的设计形式中,不仅仅只有描边按钮这一种形式,因此幽灵按钮与次按钮它们可能会有交集,但是属于两种不同类型的场景,因此也不能将它们混用


Material Design 出现之初,悬浮按钮受到了很多人的追捧,它也是安卓设计的代名词。主要是用于页面当中最常用的操作,是整个APP中最核心的按钮,能够代表这个产品的核心功能,比如印象笔记的新增笔记(安卓)、滴答清单的新增清单等等...

但沉浸式设计的出现,使得移动端寸土寸金的地方,需要固定一个按钮的情况就变得更加少见


而在B端的设计过程中,逐渐衍生出了B端行业特有的方式

悬浮按钮在B端场景中,主要是帮助用户进行辅助咨询的功能,例如在一些用户需要得到帮助的页面中,可以通过悬浮按钮,使用户的又疑问的页面进行快速提问,帮助用户能够进行快速的跳转,在飞书的应用列表中,其实用户刚开始理解应用列表其实存在一个理解成本,就可以通过悬浮按钮进行展示


行为号召按钮简称:CTA按钮

主要目的是为了号召人们在某些特定的页面中使用此按钮来提高转化,比如立即购买、联系我们、立即订阅等等...

大多数时候,CTA按钮都是成对出现的。“是与否“ 、“登录与注册”、“确认与取消”等。因此,分析清楚CTA按钮后设计出视觉层级合理的页面称为非常重要的点。在设计中,一般会采取渐变色、主题色、主题色的互补色等等,它经常独立出现

在B端软件的场景中,官网是CTA按钮出现最为重要的页面,一般在官网中,使用CTA按钮将用户引导从潜在客户向付费客户进行转变(点击过后一般是一个联系表单进行信息的填写),这也是在B端产品中非常重要的指标:潜客向付费客户转变。可以引导用户进入到下一个阶段,如果CTA按钮设计不好,人们对于官网只是浏览,不会有任何转化

因此,在设计CTA按钮的形式与位置时,需要与产品、设计、运营等共同确定并讨论使用,大家站在不同的立场希望得到一个完美的方案,因为设计出清晰的结构层次将直接引导用户朝着理想的使用路径前进,从而极大提高转化率



在我们日常设计中,常常会遇到一些棘手的文案问题:登陆、登录、确认、确定、发送、发布,在许许多多的工作场景中,犹豫究竟应该在按钮上使用哪种文案,这就需要我们通过具体的案例场景进行展示相应文案


登陆(Land) :这是网络中错别字最为频繁的用此,很多人都会把登陆放到登录页面中,其实是错的。这个词里的“陆”字,就是陆地的意思,其基本含义只是登上陆地而已,拓展出来还会有“登陆到某一个市场”,但登陆网站的说法是绝对错误的

登录(Login):这是“登记记录、记载”的含义,我们正常输入账号密码就是为了去记录我们的一个信息,一般为官网登录页


确认(Confirm):这是带有一些不可逆我操作的提示,一般用于用户配置、选择项等

确定(Yes):这是询问用户是否进行某项不可逆操作,一般为一个单独的操作


发送(Send):这是尽快传递对方的聊天消息,一般为即时性的聊天发送

发布(Publish):这是用于用户填写的观点、意见、文章等反馈信息发布到一些正式场合,如论坛、社区等

这些细节的文案就是帮助用户去理解页面中所传达的真正含义,多将文字放置到场景中,文案也更好的辅佐他们作出抉择


圆角在每一个软件中,随处可见。圆角大小所带来的不仅仅是视觉表现,还更多影响着用户的使用体验以及对于产品而言的整体的认知,如果在开始设计之前,没有对按钮圆角有具体的规划,很容易踩坑,如何设计好圆角,我们来进行系统分析

在下文中我们将按钮的圆角大小,分为以下三类:直角、圆角、半圆

直角:

按钮四角的方向,具有很强烈的引导性,看上去也会更加刺眼,使得在页面当中注意力会减弱。同时,直角在按钮排列当中看上去更加统一,相同的东西在视觉上不太能引起我们的注意


圆角:

相比与直角按钮,在使用圆角的按钮中,视觉上总是给人一种柔和亲近的感觉,当几个圆角按钮进行排列时,能够感受到圆角按钮更容易被点击。因此在使用的按钮中,建议添加圆角的细节元素


知识扩展

为何直角的物体会给人更严肃的感受——每一个人都认为圆角会更好,但是并不是每一个人都能够解答为什么圆角更好

在巴罗神经病学研究所对拐角的科学研究发现,“拐角的感知程度随着角度线性变化。锐角比钝角产生更强的幻觉显着性”。换句话说,拐角越尖,则感觉越亮,拐角越多,越难看

圆角还有另一种解释,是因为现实生活中有圆角的物体会更友好。从小,我们就知道尖角的物体会让人受伤,圆角的物体会更安全。这就是小孩在玩皮球与刀的时候,家长的反应完全不同。

小朋友玩刀会让家长十分的紧张,赶紧让孩子放下;而小朋友玩皮球时,家长则是非常的放心。这激起了神经科学所谓的尖锐边缘“回避反应”。因此,我们倾向于“避免锋利的边缘,因为在自然界中它们可能会构成危险”


圆角不是越大越好

通常在移动端场景中,半圆按钮随处可见,移动端手指触摸操作上,对于圆角的影响小之又小;而到了桌面端的场景下,鼠标的使用,半圆按钮就会有所不妥

如果相同面积中,按钮的圆角增大,相应的对于按钮的可操作区域就会随之减小,在同等尺寸下的按钮中,小圆角的按钮明显比大圆角的按钮更容易操作


当然,麻烦事还不仅仅于操作区域,在结合实际业务,我们的按钮常常作为原子(原子设计理论)用来组成为下拉菜单进行联动,半圆按钮在下拉菜单的设计中,也会因为半圆的局限,使下拉菜单的设计会更加困难,同样在设计上,半圆角对于下拉菜单的适配也会相当突兀,因此在考虑这方面设计时,需要你多去思考之后的业务场景


按钮的状态中,Loading状态通常不会对用户进行直接展示,因为大多数情况下,Loading状态就发生在一秒钟以内,但是对于B端场景中有很多重要操作,在长时间等待中不展示loading状态,会导致用户在使用时犯下错误


需要在合理的时间进行反馈

当按钮响应时间小于1秒时,通常正常反馈即可

当按钮响应时间长于1秒时,我们通常会采取加载动画,减缓用户等待的焦虑感

举个例子:比如一个确认提交的按钮,由于网络或者服务器等原因,需要长时间加载资源,而用户不知道我刚才按下的按钮是否有效,这时用户慌张,想要多按下几次这个按钮,系统就会不停提交数据,最后网络变好时,窗口就会一瞬间疯狂展示,导致用户体验下降

为了防止这类事情的发生,需要在设计师考虑到按钮在加载一秒以后的状态,应当提示用户在网页已经收到请求,正在加载,同时在按钮状态中应该为不可操作状态。同时会给出加载转圈的动画,缓解用户的焦虑

当你完成了第一步的设计后,想想在按钮的状态中,是否更能够帮助用户进行体验上的提升呢?

这也是在面试某大型互联网公司时,被问到过的一个问题~敲黑板

对用户操作的适当反馈是用户界面设计的最基本准则。让用户了解当前状态、位置、是否成功、进度如何,减少不确定性;并引导他们在正确的方向上交互,而不是浪费精力在重复操作上

在Loading的加载过程中,等待焦虑一直是用户想要了解到的,为了缓解类似情况,可以将等待的进度状态进行展示,使的用户在等待的过程中,能够清晰的清楚自己的按钮目前处于何种状态,我大概还需要等待多久,缓解用户在等待过程中的焦虑

以上两个方式均是尼尔森十大原则的内容,能够在按钮Loading状态中,缓解用户在按钮加载过程中、重复提交、等待焦虑的问题,通过一些设计小细节,帮助产品提升用户体验


通过上文对于按钮的解释,大致明白按钮在设计中的作用,接下来我结合一个工作中的实际案例,来看看我们应该如何优化常见按钮在页面当中的设计

项目背景:在桌面端,我们需要对整个导航栏进行设计改版,但其中涉及到对于导航的一个整体优化,主要是由于业务功能发生变化,我们需要在导航栏上增加快捷添加入口和通知中心,来满足导航的后续的功能需求,由于保密协议的原因,就不放自家产品


第一步根据用户浏览模式确定按钮顺序

在桌面端中,浏览模式大致分为两类,F型浏览模式、Z型浏览模式(下方知识拓展会有讲到)

首先,因为导航在整个页面的顶部,结合两种浏览模式在顶部时统一都为从左到右的浏览顺序

因此确定整个导航按钮初步的按钮重要层级排序


第二步交互路径优化

我们对于用户的按钮层级有着明显的划分,因为在整个导航右侧,又因为其的特殊性,我们把操作空间分为三部分:

左侧为操作路径最短的区域,因为桌面端的产品需要通过鼠标进行交互操作,而其中移动鼠标的长短直接决定用户是否愿意点击这个按钮,因此,靠左的按钮适合放置用户最常使用的操作

中部为按钮内部区,可以放置一些低频,但是又必须出现在这个区域的按钮操作(比如:帮助中心、通知中心等等...)

右侧为按钮最为重要层级最弱的区域,同时它也有一些特殊性

一般在浏览器的右侧,为用户最容易定位的操作区域,因为靠近边缘导致在用户定位当中能够帮助用户进行快速选择

回到页面中信息层级较高、同时需要精准定位的按钮就会将个人中心放置在最右侧,方便用户进行快速定位

因此我们讲导航当中按钮重要层级进行简单排序,得到下图:


第三步信息整合优化按钮结构

通过亲密性原则,我们将除去左右两侧确定好的按钮之外的按钮进行简单分类,将有关联的按钮进行组合,形成较强的关联性~


第四步视觉调整

视觉调整作为最重要的一步,主要是为了在最后的按钮重要层级上,将一部分按钮突出、一部分按钮弱化,达到我们想要的整个层级效果

通过团队内部讨论,将我们的新增按钮定位CTA按钮,因为它关联到我们每个使用系统的人都会用到,属于最高频的操作按钮,也因此将其突出


知识拓展:

F型浏览模式:

是新闻平台、博客等文字为主的网站布局所采取的阅读模式

该阅读模式由尼尔森团队的眼动追踪研究结果从而进行普及,在这个研究中记录了超过200位用户浏览网页时,发现用户的主要阅读行为在许多网站和场景中表现得相当一致。这个阅读模式看起来有点像字母F,因此也被叫做F型浏览模式。

首先用户以水平方向进行阅读,通常是在阅读区域的上半部分

接下来,他们在屏幕左侧垂直浏览,寻找段落开篇几句中感兴趣的内容。当他们找到感兴趣的内容时,他们在第二个水平方向上快速浏览,通常这块内容区比上一个内容区更短小、更简洁。这部分元素形成了F的下半部分

最后,用户在垂直方向上浏览内容的左侧区域


Z型浏览模式

是扫描滚动的网站的典型模式

正如你所期望的,“z”型模式的布局遵循字母Z的形状。“Z”型模式的设计跟踪了人眼扫描页面时的路线——从左到右,从上到下:

首先,人们从左上角到右上角进行扫描,形成一条水平线

接下来,向页面的左下侧扫描,链接成一条对角线

最后,再次向右转,形成第二条水平线

当观众的视角以这种模式移动时,它形成一个虚构的“Z”字形


在实际工作中,经常遇到自己设计的按钮与开发实际还原的按钮差距很大,一些没有经验的设计师会和开发说,你看我设计稿,每一个按钮都要按照设计稿的来,这样设计师与前端开发之间的矛盾就会越来越深。其实在按钮设计的细节中,开发怎么完美的还原,里面还有很多细节


首先要想让开发完全还原你的设计稿,就必须了解开发实现的思维方式,针对它的思维方式进行相应的思考。

又由于Sketch与开发常使用的VScode之间逻辑上存在较大差异,导致设计师设计出来的很多设计稿开发根本无法实现,这也是B端设计师摆在你面前的第一个问题

对你没看错,无法实现,我举一个例子

这是一位同学问我的一个问题,他说我这个按钮为啥实现不了,前端不就是多几个代码去适配我的设计稿就可以了吗?

如果你看了上图也有很多疑问,那就接着看下去~


什么是Padding

在按钮当中,通俗的理解Padding就是文字与按钮之间的间距

因为Sketch等软件在按钮的设计中,只有图形位置的概念,没有内间距Padding的概念,因此需要对按钮还原要明确的描述

比如上图,前端同学在开发是就会将Padding设置为24px,所以整个按钮长度便为24px*2+20px(文本宽度)=68px

而为什么说上面的设计规范实现不了,因为对于前端而言,Padding通常都是统一且固定的,只会根据按钮文字长度进行相应的调整,比如我上面举的错误栗子,其实在前端同学面前这类设计是不能够被共用,而且对前端同学项目会变得越来越不能维护,所以按钮设计应该更规划


但是如果真的需要去实现两个文字按钮长度和四个字的一样怎么办,需要去设定按钮的最小宽度

按钮最小宽度的设定一般为4个字文字的长度,假设字体大小为16px,左右的Padding为24px

最小宽度为:88px,因此在按钮的标注中,需要展示最小间距为88px,方便前端进行CSS开发


在我们的sketch中,按钮边框有三种,内边框、居中边框、外边框,默认为居中,但是在前端的CSS代码中没有居中边框,没有居中边框,没有居中边框(重要的事情说三遍),默认为内边框,如果需要调整为外边框,最好能够标注


作者:CE青年   来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

超实用的新版AI 3D功能小技巧,快来Get!

seo达人


这次的海报案例呈现主要围绕以下三点展开的。

01、3D 膨胀功能

02、3D 凸出功能

03、3D 绕转功能 

 

图片

图片

 

图片

图片

除了大家熟悉的凸出和斜角,2022 版本这次的更新新增了对象-膨胀、材质、以及光照,简单的给大家示例看下膨胀的效果。

这是一个简单的几何图形膨胀得到的,效果看上去还是可以的哈,以及添加一些光照。

图片

 

步骤拆解:大的轮廓由三个描边组合而成,描边粗细设定为 126pt,描边的粗细这里没有绝对的合适的就可以。

图片

选中描边扩展,选择膨胀。

图片

以下是参数设置展示部分,功能本身比较的简单。参数部分仅供参考,没有绝对的数值,具体看实际情况的效果决定。

#01. 对象:深度 10px、音量 100%、其他参数不变

#02. 材质:默认、基本属性-粗糙度 1、金属质感 0

#03. 光照:强度 120% 、旋转 145° 、高度 45° 、软化度 40%、 勾选环境光-强度 50%

图片

最后点击白色尖头标注的部分(渲染),不然最后出来的效果不自然(不理想)。

图片

这是光照选项下的勾选环境光与不勾选产生不同的效果示意图,可以看出区别还是蛮大的。

图片

图片

眼睛部分变成了透明, 这里粗糙度设置为 0,光照设置为标准强度 70%。

图片 
 下图是几种不同的参数设定,可以看出区别很明显,根据自己的需要去设置参数即可,这里仅供参考。

图片

由于参数设定差不多就不一一阐述了,椭圆眼睛的参数设置如下。

图片

图片

星星的参数设置如下。

图片

图片

给大家一一介绍了参数的设置部分以及不同参数设置产生的不同效果,相信大家心里有了一个大致的了解了。最后简单的排版即可。

图片

这里做了另外一版的海报,功能和参数和案例中差不多,希望可以给大家一些启发。

图片

 

图片

下图是海报的最终呈现效果。

图片

首先我先做了个虎的字体,此处不暂不讲字体部分。

图片

原先的凸出与斜角呈现的效果并不带任何的质感。

图片

选中字体,选择 3D和材质-凸出和斜角给字体添加材质效果。材质:镀锌铲形图案点击渲染即可。

图片

下图给出了参数设置部分,仅供参考。分辨率可以给的低一些 1024 就可以了,2048 相对效果会好很多,但是电脑会有那么点卡。

图片

Aa. 铲形图案滤镜:哑光、Bb. 渲染设置下的品质:高。

图片 

下图是铲形图案滤镜三个不同的表现,案例中我选择了#03 相对来说会更好。大家也可以去玩一玩其他的材质以及滤镜。

图片

接着进行适当的排版。

图片

图片

给原图层添加色相饱和度以及黑色纹理(图层模式——线性减淡)。

图片
图片

然后给文字层添加一个斜面浮雕效果,贴合主形象虎字体,让画面更加的自然。

图片
图片

最后做了简单的示意动图。

图片

 

 

图片

图片

下图是案例中平面的图形部分展示。

图片

图片

图片

图片

图片

三个图形的参数一样,下图给出了参数设置部分,仅供参考。

图片

这里我并没有点击渲染设置,我们看下前后的对比。选择前者不渲染,出来的效果比要渲染的更自然。

图片

下图是处理好文字编排与图形之前的构图部分(简单的提一提),置入图形部分就完成啦。

图片

图片

 

文章小提示:

01:手残党可以画一些简单的图形玩一玩(把控好构图啊,文字编排啊)

02:软件自带的材质非常多,个人觉得默认的比较 OK

03:软件对电脑系统的基本要求

04:不要点击高质量的渲染、高分辨率,软件会卡(你试试就知道了) 

那么今天的教程到这就结束了,我们下次见

 
 
原文地址:胡晓波工作室(公众号) 
作者: 阿贵 
转载请注明:学UI网》超实用的新版AI 3D功能小技巧,快来Get!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计进阶:一个案例,掌握设计价值密码

seo达人


图片

在日常工作中,与设计师接触最多的角色就是产品经理(以下统称PM)了,根据他们的需求产出设计,也是设计师的主要工作内容之一。有些设计师会直接在产品原型的基础上进行细化,这样确实能节省很多思考和沟通的成本,有利于在短时间内快速交付。而有的设计师,则习惯把产品的原型先放在一边,先追溯需求的背景和目标,最终再在具体的需求上发力,产出一个截然不同的方案。

哪一种方式更好呢?这是借用一个大家都耳熟能详的故事:福特在设计汽车之前,到处去问人们“需要一个什么样的更好的交通工具?”,几乎所有人的答案都是 ── 一匹“更快的马”。

图片

“更好的交通工具”代表“需求”;“更快的”是人对于“需求”的“期望值”;“马”是人对于解决这个“需求”的假设形态。类比到我们的工作,PM产出的原型,就是最终形态的假设,这个假设形态是否合理,取决于PM对于目标的理解程度和思路的开阔程度,也就是说,如果PM刚刚接手这个项目、还没来得及充分消化,或是欠缺行业解决经验、解决思路不够开阔,那么TA的原型很有可能存在漏洞,这也是很多需求反复变动的原因之一。当然,也有很多PM出原型,只是为了给设计师提供一种思路,实际合作时会给足设计师发挥空间。因此,设计师在设计之前的深思熟虑和充分沟通,是很有必要的。

图片

今天要分享的这个案例,就属于PM给我一个思路,让我自由发挥的情况。需求背景如下:线上面试作为家政业务连接和转化的核心场景,家政从业者(以下简称阿姨)在面试环节中的临场表现是成单的关键因素。面试过程中,客户会问一些自己关注的问题,比如阿姨的工作经历、职业技能等,PM希望在客户侧提供一些常见的问题,并在阿姨侧提供与问题对应的回答要点,从理论上来讲,这种一一对应的问答,能够提升阿姨回答的准确率和客户满意度。PM给了我以上原型图(如图2),问我是否可以通过加强发送按钮的引导,来保证阿姨侧可以针对性地显示对应问题的指导答案。

图片图片

经过分析可知,一一对应的问答引导是为了提升阿姨的面试表现,以达到提升客户满意度,从而提升面试签单转化的目的。那么,这是否是一个恰当的假设呢?问答能一一对应的前提是:客户要在面试环节点击先发送按钮,阿姨侧才会有对应的答案,这显然会增加客户侧的认知和操作成本,并打破面试的沉浸体验;同时,阿姨侧显示对应答案就能让阿姨对答如流,只能停留在理想层面:屏幕上密密麻麻的文字,有加重阿姨认知负担的风险,而客户也不会为对面死死盯着屏幕、念着标准答案的阿姨买单。经过一番分析讨论,PM同学也放弃了这种假设。

 

 

图片

要想真正地解决问题,要先找到问题的本质。连接转化的关键因素是“人”,只有了解到他们的真实诉求,才能提供有价值的功能。

首先,我们要“源于用户”:把自己当成用户,通过真实场景的还原,思考“我”要的是什么(目标),什么能帮助“我”作出正确的决策(必要条件),什么能让“我”更容易更快速决策(重要条件)。

图片图片

在这个案例中,我们要让自己在客户和阿姨两个角色之间切换。

当我们把自己想象成客户的时候,会发现在经历了线上查找阿姨-查看阿姨详情之后,我们已经按照我们的预期对阿姨们进行了一次初筛;再进入到面试间时,我们的关注点不再是些通用的问题,而是去确认一些在之前环节看不到的「隐藏信息」,比如:阿姨的性格、沟通能力、应变能力、处理特殊情况的经验等。

当我们把自己想象成阿姨,那么我们的目标就是通过好的表现,来获得这个工作机会。在视频面试的过程中,我们很少遇到千篇一律的客户,他们有着不同的需求和侧重,因此提问的内容也千差万别。另外,在很短的时间内表现自己的优势,对我们而言也有一定的挑战,由于学历和职业属性限制,我们中有很多人无法在互动中做到灵敏的反应和充分的表达。因此,我们希望在面试之前,能有人指导我们总结个人优势、告诉我们面试中要注意的点、并通过模拟面试锻炼临场反应能力,为真正的面试做足准备。

不仅如此,一次成功的服务达成之前,通常需要客户和阿姨分别进行多人多轮面试,无论是客户和阿姨,都会面临对精力和记忆力的双重消耗。面试间的面试效率和记忆辅助工具,就显得尤为必要。

经过两个角色的场景还原,我们明确了用户的核心诉求,很显然,依靠客户侧的通用提示问题和阿姨侧的答案模板,离解决核心诉求还有很大距离。那要如何解决呢?

 

 

图片

明确了用户的核心诉求后,我们需要从用户的角色中抽离出来,从专业的角度,具象化他们的需求,并提供最优解。经过上述分析,我们分析出了面试间的四个核心要点:(客户侧的)获取隐形特征、提升面试效率、提供记忆辅助、(阿姨侧的)充分表达自我,接下来就是对这四点进行解决方案的发散。

当然,方案需要结合业务的现有资源和能力,不能漫无边际地发散。如果情况允许,可以拉上PM小伙伴一起发散,这不仅可以帮助我们弥补业务认知的盲区,也可以尽早建立共识,保证方案的可落地性。

图片图片

为了确保方案有序发散,避免遗漏,可以以实际的业务流程来梳理,本案例我们以“面试前-面试中-面试后”流程展开。本着为双方提供「沉浸式」面试体验的原则,面试过程中不去主动打扰双方用户。

在面试前将准备工作进行前置,通过为客户提供获得阿姨隐形特征的攻略,支持设置快捷问题,方便用户一键添加进「待问清单」;将一些常见/问信息提前录制成视频简历,方便客户对阿姨形成初步印象,在面试中只问一些个性化的问题,提高面试效率。在阿姨侧,在现有的培训体系中增加面试相关内容;在进入面试间之前,根据客户特征为阿姨提供面试建议,确保面试表现有重点、有亮点。

在面试中,提供必要的记忆辅助工具,如:录屏功能,方便用户回顾局部/全部视频内容;如用户在面试前定制了「待问清单」,可点击展开问题列表。

在面试后,我们需要帮助客户正确且快速地做出决策,避免犹豫不决造成的流失。除了面试回放,还可以在每一场面试后提供维度打分表,让用户明确自己对每一位阿姨的满意程度;并可以生成多个面试的横向对比结果,帮助客户做出理性的判断。

经过以上推导,我们获得了一系列能提升面试面体验的转化的方案,后续则可以和业务一起,评估方案的投入产出比和优先级。关于设计推动,我也有一些心得与大家分享,如果有兴趣,评论告诉我吧:)

 

图片

总结一下,在接到一个需求时,不要急着画图。先按照以下步骤进行思考:

1.甄别需求,结合业务目标挖掘需求的本质;

2.把自己想象成用户,进行场景还原,找到影响用户行为的关键性因素;

3.回到专家视角,按照业务流程并结合业务资源,提供有价值的解决方案。

形成深度思考的习惯,不仅能够摆脱“工具人”的标签,提升设计话语权;而且能倒逼自己真正了解业务、了解用户,成为对业务、对团队有价值的体验发言人。

 

原文地址:58UXD (公众号)

作者:环铁艺术家

转载请注明:学UI网》设计进阶:一个案例,掌握设计价值密码

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



今天带你一起来画个球

seo达人


教程

前段时间做了一组练习作品,其中有一个关于球体的图标吸引了大家的注意,发布之后有很多同学后台留言希望出一个教程。今天黑马哥的教程如约而至,就带大家一起来画个球吧!

 

一个不一样的球

这个球体图标无需三维软件的辅助,全程都是通过平面类软件完成,我个人是通过 AI 软件和 Sketch 软件配合完成的。实际上通过 AI 软件也可以直接完成,球体造型是通过 AI 软件的 3D 功能实现的。后期的配色、光影处理、质感强化等细节处理,大家可以自由选择熟悉的软件,无论是 PS 还是 Sketch 等均可完成细节刻画。

图片

下面黑马哥就来详细演练一下,案例分为球体造型绘制和质感刻画两个部分。

 

球体造型绘制

第一步:绘制纹理符号

通过矩形工具绘制几条细长的矩形,数量可以自由发挥,这个数量决定球体纹路的数量。然后全选之后拖进符号面板,无需改动参数直接点击确认即可(符号的名称可以自由设置)。

图片

 

第二步:绘制球体

通过椭圆工具绘制一个正圆,然后利用剪刀工具剪切一半,形成一个半圆。然后再执行效果 → 3D → 绕转,然后把预览勾选上就可以观察变化了。注意红框标注位置需要选择“右边”,不然无法出现球体效果。

图片

 

第三步:贴图

保持当前操作不变,点击 3D 绕转弹窗底部的“贴图”按钮,在弹出的面板中符号位置展开选择之前创建的球体纹理。然后调整纹理的大小,让其填充满图示区域,这里的纹理大小和位置可以一边调整一边观察球体的变化,调整到自己满意的效果即可。

图片

 

第四步:调整空间位置

设置好贴图之后,我们可以通过图示区域去拖动这个立方体,改变球体的空间位置,调整出自己满意的角度之后点击确定即可。确定之后我们需要操作对象 → 扩展/扩展外观 → 然后取消编组,把纹理层分离出来,单独之后便于后期调节。

 

图片

通过以上的步骤我们完成了球体部分的绘制,这个步骤需要在 AI 软件里面完成。接下来的步骤没有特殊的软件限制,只要能够方便进行渐变色调节和细节刻画即可。

 

质感刻画

第一步:导入到软件

质感刻画不限制操作软件,直接在 AI 软件里面也能操作,个人习惯运用 Sketch 软件进行细节刻画。直接将完成的球体通过复制,在 Sketch 软件里面粘贴即可(如果是 PS 软件操作类似)。

 

第二步:刻画球体立体感

突出球体立体感首先对圆形添加径向渐变,中心点设置在偏向于左上角位置,颜色的参数参考图示(颜色大家也可以自定义)。然后再对其添加两次内阴影,用于增强立体感,也能使得圆形更加通透。(内阴影的参数见图示,本案例圆形尺寸为 360*360px)

图片

球体背景层绘制完成之后,再针对纹理层添加渐变色,依然选择径向渐变。角度和中心点设置的范围和背景层的一致即可,颜色的参数参考图示,最终两个图形合起来即可初步完成球体立体感的刻画。

图片

 

第三步:纹理质感强化

为了进一步突出纹理的质感,将纹理部分复制两个出来,分别进行细节刻画。一个是为了强化色彩感,一个是为了强化光感,两个纹理部分设置参数见图示。

图片

 

 

第四步:底部压暗

为了让球体能够显得更加稳重自然,添加一个同等尺寸的圆形作为底部压暗。采用的是线性渐变,颜色和填充的不透明度参数见图示。

图片

最终我们便完成了球体部分的全部案例演练,添加一个圆角矩形作为应用图标的底座,完成整个案例的绘制。

图片

 

 

小结

本案例的技术难点主要是通过 AI 软件的 3D 功能实现带纹理的球体造型,其次就是质感刻画的技巧,关于渐变色的调节和内阴影的运用。通过案例的学习可以帮助我们熟悉 AI 软件的 3D 功能运用,也能强化关于营造质感的技巧。

大家也可以举一反三,在创建符号的时候也可以变换更多不一样的图形,也能带来更多不一样的球体纹理效果。希望今天的教程分享可以带给大家一些思路,创作出更多优秀的立体图标设计。

图片

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学U网》今天带你一起来画个球

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



排版设计总没想法,试试简单图形这样做!!

seo达人


图片

我们先从网上找到一些洋葱的图片,试着把它的形象拟人化,第一个我已经把它想成大脑袋了

图片

这时候我们可以先确定版式,然后用草图将人物场景画出来,不用在意细节。

图片

接下来我们来完善主体形象,提取洋葱特点,一个洋葱人流着泪切洋葱,动作如果不太确定,可以直接搜网上切菜的动作来参考。

图片

这一步做完之后,我们来设计主标题,垫字用矩形工具做出主体结构,再加上一些特征即可。

图片

我们将标题和主体都放入画面中,大感觉就出来了。

图片

接着根据剩余空间的形态,将剩余信息处理好,同时可以搭配英文来丰富层级。

图片

我们将信息放到相应的位置,调整好它们的大小。

图片

接下来开始搭配颜色,这里我们选用了玫红色和绿色来作为底色,两个颜色会使画面增加层次。

图片

这一步做完之后,我们可以再加一些元素来丰富画面,增加视觉感和趣味性。

图片

最后做一个简单的样机效果,那么这个版式练习就完成了。

图片

OK,分享就到这里了,赶紧找个元素来练练手吧,

 

原文地址:趣设记(公众号)

作者:趣趣熊

转载请注明:学UI网》排版设计总没想法,试试简单图形这样做!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



生产力体验—多端多角色的精益协作

seo达人


去年国务院印发的《“十四五”数字经济发展规划》文中,明确国家要大力推进产业数字化转型,全面深化重点行业、产业园区,协同推进数字产业化和产业数字化,赋能传统产业转型升级,为构建数字中国提供有力支撑。IoT事业部也提出了“智物智造”战略,助力更高效的硬件智能化和生产数字化,重点投入在工业行业,助力传统企业做数字化转型。

IoT技术在行业中广泛应用,使得我们有机会服务了横跨B端基础云产品、PaaS、SaaS到C端的应用等各领域。由于类型的多样性,服务对象和服务场景的不同,在产品设计上也有不同的设计侧重,尤其是在涉及到B端产品设计时,在尝试结合B端的特征将做C端体验设计的精益化方式融入进去。

图片

 

图片

工业制造场景下的B端软件设计有什么特点?

要了解行业KNOW HOW,光坐在办公室自我分析和信息检索是远远不够的。于是我们实地进入了多家工厂,与用户进行一对多的调研,输出了多份调研报告,整理了工厂用户的一些共性特征及问题。

图片

1. 多角色协同的网状结构

C端场景中的客户就是最终用户,是单线程的线性关系。而在B端场景中,跑通整条链路需要从前期的数据创建,到过程中的生产操作,再到最终数据结果采集和分析。涉及到的用户角色就可能达到十几种,不同行业从业者会带有自己的认知习惯,不同角色之间多诉求也存在较大差异。

图片

2.端侧载体多样化

B端用户触点已由原来中心化的WEB端,扩展到各式各样的终端智能,彼此之间进行着协同的服务。在工业场景中,电脑端作为管理员做工单创建和任务查看等功能的工作后台。手持的扫码智能终端承担着每道工序的过站任务,穿戴设备手表接收任务并给一线工人下派任务,PAD端用来给车间主任查看任务排版和首件检测的载体等。

图片

3.链路长且场景差异大

工业场景的完整使用链路往往都较长,以工厂的一个基础工单流程举例,完成周期从几个小时到几个月不等。每一个链路对应的线下场景也是不同的:有些可以坐在办公室内用电脑完成,有些是站立在车间某个机器上或是一些货物仓库中完成。环境,噪音,光照,用户站立的位置等等都会对信息吸收造成影响,忽略场景做设计,容易出现很多无意义的产品功能。

图片

 

图片

物联网技术特征下的体验精益化设计

1.真实场景决定一切

在刚开始做工业SaaS设计时,由于对于行业领域了解不够深入,也走过不少弯路。以工单报工举例,我们参考了部分竞品,设计了一套比较通用的报工流程:通过手机获取到工人的工单数据,然后在手机端填写整套的报工流程:点开工单——找到对应工序——填写数据数量——填写和拍摄不良品照片——点击报工按钮——完成报工。

设计完成后,当我们去多家无尘车间调研时发现,手机是不允许被带进车间的,等到工人交接班时再拿出手机去报工,已经是一个非常延时的信息了。其次工人日常会带着硅胶纸套,在使用软件屏幕时是不太方便操作的。同时在工厂内工人的穿着对于感知会有一定影响,所以在这样的场景中手机的报工方案是不会被采用的。

图片

继续观察发现,“扫码终端PDA”是工人每天用的次数最多且非常频繁的手持端,我们通过PDA上“扫码过站”的功能,直接在后台自动判断道用户是否做完某道工序,获取对应人员信息/完成数/良品率等信息后,在后台完成提交。让用户无感知的完成了报工流程。优化后的流程至少节省了用户5个步骤。客户使用后,也非常满意这次报工方式的优化,所以对于行业属性强领域深的,充分调研至关重要。

图片

2.结合多端特征,增大信息感知

想象你来到一个车间,周围冲刺着嘈杂的机械制造声、各类报警设备的闪烁、频繁执行着的机械动作、获取的软件信息受限于眼前这台机器上的屏幕,不同设备的性能不同也进一步导致你在接触信息的效率是在逐渐衰减的。如何能确保自己能在一堆信息中快速获取有效信息并且完成工作呢?

图片

我们将信息分为三类:

(1) “强感知”类:判断为重要状态需要第一时间被察觉的数据。比如设备状态,待办通知,任务计时等。

(2) “可感知”类:容易被查询到的信息,必要的操作功能等。比如扫码操作,过站的数据等。

(3) “无感知”类:非必要且较为繁琐的次要交互行为。这类信息需要被“隐身”,为用户吸收信息减负。比如按键输入替换成扫码输入,手动报工替换由扫码报工等。

图片

以手表举例:作为最贴近用户的穿戴设备,可以配合硬件的振动触感快速传递数据,主要完成“消息下发的接收”,“任务开始的计时”,发生“危险情况的快速上报”等。当后台推送一个任务给用户,在手表桌面会出现任务计时器,当用户逾期未完成,那么任务计时器将提醒用户逾期时间,在顺利完成任务后用户能获得对应的绩效奖励,对于重要信息做强感知的展示,保证工单的实效性和完成率,也能调动用户的积极性。

图片

作为手持扫码终端的PDA:用户的使用场景集中在工序的“扫码过站”上,用户每天扫码次数非常频繁,最多一次高达几百次,我们着重在引导用户使用“批量扫码”过站,通过扫码枪依次扫码进入列表页,一次性扫批量扫入,大幅减低手工操作的频次。过站的状态在PDA上的状态栏采取非常醒目的色系+标识做展示,每个产品的详细信息在同一屏内的下半部分同时呈现出来,让用户易感知到。

图片

3.结合多角色,以任务效率为中心

和物联网场景下C端应用作对比,其用户是单线程的,以单点查看和控制设备为目的,家庭用户需要控制的智能设备数量基本不会太多,如果做了错误的操作,造成的后果相对不会太高。产品功能对于用户来说认知门槛也相对较低。所以在整体体验上对娱乐性要求更高。

再来看看工业场景,用户从D端的开发者到B端管理者、决策人员再到一线工人,角色之间同样是相互影响的,工厂设备数量非常多,一旦操作失误可能会造成不可逆的影响,所以用户对产品的诉求更注重效率的稳定性和操作的正确性。再加上行业属性的复杂程度,对于用户来说上手有一定的使用门槛。

图片

所以在B端场景中,我们定义为以任务效率为中心的设计。对于信息的展示,工业场景需要更关注在重要数据透传上,一定要保证信息是明确,完整且精准的。在设备状态传递上更要保证时效性和高透传性,而对于需要用户操控的区域,需要提供足够的引导和提示,减少误操作的可能性。

不同角色对数据展示的诉求也是不同的,比如在同一个数据分析屏中,对于一线工人,他所关心的是当前这个设备的状态和工单任务任务等具体的数据,车间主任最关心的则是这个车间整体设备是否运行正常及不良品率,而工厂管理层则是关心整个工厂的能耗/人效/产能等。当确定不同用户群体的需求后,针对每一类群体采取对应的数据分层方式,最终完成多套数据展示方案。

图片

在物联网新技术的加持下,制造工艺越来越精益化,工厂职能分工也越加明确,对于过程体验也会有更精细的要求。

从多角色,多端侧,长链路等几个方面,可以看出B与C端很明显的差异性,基于这些物联网的特征,通过精益化设计思路去打磨B端场景,达到较好的用户体验:

(1) 对于不熟悉的行业领域,需要深入理解行业,洞察问题,真实场景决定了产品的最终形态。

(2) 对于端侧的多样化,合理的运用各个端的优势,保证信息传递的有效性,进行结构化的设计.

(3) 对于多角色多场景相互关联的数据网络,针对不同角色的需求做出对应的方案。以用户任务效率为中心。

图片

后续我们也会继续在人,场,设备,数据四个方向,去完善从(设备)上云到(产线)全貌化展示再到(人员)效能的精益化管理,最终(数据)可视化做全方位的数字化升级的理想闭环。

图片

IoT让我们开始重构人与物,物与物的关系, 好的产品体验也就必然需要做到更好的设计品质,更高效的体验流程,并且能在同质化严重的B端产品中,赢得用户认可或好的口碑。

 

原文地址:AlibabaDesign (公众号)

作者:阿里云loT

转载请注明:学UI网》生产力体验—多端多角色的精益协作

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



案例锦囊|交互设计中「防呆手法」的巧妙应用!

seo达人


图片

  案例 2     支付宝理财产品阅读协议,在用户勾选前一直会显示「请勾选」,页面的确定按钮在协议签署前为不可点击状态

图片

案例 3     用户用 Gmail 写邮件时,可以设置邮件为「保密邮件」,收件人将无法进行转发、复制、下载或打印邮件;也可以设定保密邮件的可读时间,到期后邮件内容会自动消失,来确保信息的保密性:

图片

 

RULE 2 保险

「保险」是指按照顺序运行两个以上的动作才能完成操作,多加一步操作步骤,给用户创造更多的思考机会和时间。在交互设计中的典型用法是增加弹窗、链接等形式提供更多信息,让用户进一步确认。

案例 1     微信转账,连续转给好友同样金额的两笔钱,且第一笔好友未接收,系统会发出提醒,让用户再次确认,避免重复打款:

图片

案例 2     被从微信群踢出的用户,如果再次申请加入该群,该群的管理员可以在申请中查看 ta 曾经在群中的聊天记录,判断 ta 是否适合入群:

图片

案例 3     在一些重要的决策或不可逆的操作行为中,二次弹窗确认尤为常见。比如当用户在填写信息时点击「作废」,系统会给出提示让用户再次考虑

图片

 

RULE 3 标示

「标示」是指运用线条粗细、形状、颜色等区别以方便识别,提高易识别度。交互设计中多以颜色鲜亮的小色块、圆点等进行示意。

案例 1     钉钉的图片保存到本地的功能,做了很好的提示,下载过的图片会带有绿色的「对勾」,避免用户多次重复保存图片:

图片

案例 2     微信发朋友圈的分组功能,你可以选择「谁可以看」和「谁不可看」,可以看用的是绿色字,不可以看用的是红色字,很易于区分,不用担心会搞混或错用:

图片

案例 3     钉钉的会议未按时参会的提醒,用红色标签对时间进行重点标示:

图片

案例 4     使用 Sketch 导出同名同格式的文件时,系统会在弹窗中将「取消」作为主按钮的形式呈现,避免用户因为忘记重命名而覆盖之前的导出的同名文件:

图片

案例 5     钉钉和阿里的出差系统打通,当员工提交了出差申请,到了出差的那一天,钉钉上状态会自动切换成 「✈️出差中」,方便其他同事了解你的状态:

图片

案例 6     Google 的标签页,可以被分组,标记颜色和重命名,可以一定程度上缓解因标签页开得太多而找不到的情况:

图片

案例 7     疫情期间,很多小区的大门仅供行人通行,只有个别大门是行人和车辆都可通行。高德地图 App 会给每个小区的门标注好通行权限,方便开车的用户选择合适的门进入小区,不过个人感觉这个信息可以标注得更明显一些:

图片

 

RULE 4 警告

「警告」是指将不正常或即将要出问题的情况,通过颜色、灯光、声音、动效等明显、特殊的方式进行警告,提醒用户及时修正错误。交互设计可以借鉴工业设计中的报警器等产品的功能,用弹窗、灯光和声音等对用户进行提示。

案例 1     在铁路 12306 上购票时,如果选的列车时间距离现在 1 小时内,会弹出弹窗提示发车时间与现在较近,提醒用户注意行程时间:

图片

案例 2     京东 App 会在用户使用移动网络播放的环境下,提示用户注意流量损耗

图片

案例 3     上海的买菜 App 在疫情期间菜不好抢,盒马会在你加购每一件商品的过程中,都提示运力不足,让用户再做考虑:

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|交互设计中「防呆手法」的巧妙应用!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



设计驱动!体验UP!高手设计师必备工具包

seo达人



图片

作为一名设计师,除了支持日常业务需求,对产品体验进行整体把控也是我们工作很重要的一部分。

即使体验再优秀的产品,也会不断出现各种各样的体验问题。这些问题累积到一定程度,就需要通过「驱动体验优化专项」来解决问题。

比如:新产品上线,以功能实现为主,缺少对体验细节的推敲,容易引起体验问题;产品竞争白热化,需要与竞品的体验拉齐;产品日常运营过程中,不断收到用户反馈、不断发现体验问题。

主导和推进体验优化专项是对设计师综合能力的考验,也是成为高手设计师必会的事情。

但业内相关文章并不多。

于是我们针对「设计师如何主导和推进体验优化专项」进行研究,从「定」—「找」—「解」—「推」四个环节进行总结,并为大家提供相关工具包和实际案例,以期可以开箱即用,并抛砖引玉、启发大家更多的思考。

图片

共分为方法和案例两篇。本篇为方法篇。

 

图片

无论是发现了问题进行集中地优化,还是作为一种优化制度持续优化,优化专项持续的时间都不会太短。为保证顺利进行,在前期需要作出明确的规划。

规划需要结合产品的目标与规划,与产品侧形成合力。所以规划要与产品、技术共同制定。

制定体验规划的五个要素

一般需要明确以下内容:优化范围、问题获取、优化目标、参与人员、时间节点。

图片

体验专项的五个阶段

需要注意的是,规划要清晰、明确、可执行。

可以将整个项目划分为前期启动、问题获取、方案产出、需求落地、项目复盘五个阶段。

每个阶段均需明确:「时间」、「人物」、「任务」、「产出」。

图片

 

图片

在这个环节,我们需要整理已有的体验问题,并在必要时进行补充调研,对问题有更全面、更细节的认识。

如何获得体验问题?

体验问题通常来自五个方面:用户挖掘、设计走查、竞品参考、老板反馈和产品提供。

图片

如何使用这些方法?

以上方法可以综合使用,例如用户反馈某个功能有问题,可以设计自查看问题是否清晰,可以做用户观察看实际使用情况,可以通过数据分析获取操作细节,也可以参考竞品了解不同的解决方案。

将方法按照使用场景、问题的指向性和结论类型进行分类,大家可以根据具体情况灵活选择:

图片

 

图片

区分坏点、优化点和需求点

首先我们来明确三个概念:

坏点:有明显体验问题的问题点,体验层面。

优化点:针对一个或多个坏点的解决方案,设计层面。

需求点:一个或多个相关优化点组成的需求点,或目前没有满足的需求,产品层面。

从问题解决角度来说,它们不仅仅是不同阶段的产物:

我们获得问题的最初,坏点、优化点、需求点可能同时出现在各种信息源中,混杂在一起。后续需要把坏点转化为优化点,成为问题解决方案。解决方案再拆分整合成为一个个需求点,进入产品计划,推动落地。

而且对于把握问题的本质,也至关重要:

优化点、需求点,如果追根溯源,都可以对应到体验上的坏点。我们收集到的优化点和需求点,可能并不是当前最好的解决方案,需要挖掘出对应的坏点,制定最优方案。

如何还原为坏点——追问法

只要不断地追问,就可以挖掘出坏点。

例如在审批流程中:

用户:我想要个点一下系统就能发通知给处理人提醒TA审批的功能。(这显然是个需求,需要还原为坏点)

追问:什么情况下要提醒TA审批?

用户:有时候时间紧迫,不审批就耽误事了;有时候虽然不耽误事,可领导没批感觉心里不踏实。

追问:什么时候比较紧迫?

用户:比如考勤,我今天请假,但明天就是考勤截止日了,必须立即批才行。

追问:为什么想要系统发通知?

用户:因为如果我直接提醒老板,我不太好意思,感觉系统提醒能好一些。

图片

ok,至此,我们基本明确了用户的体验坏点:部分紧急流程需要及时去提醒审批,部分流程审批人想尽快结束,但申请人又不想以个人身份去提醒。

这个坏点需要深入洞察审批人未及时审批的原因,再给出解决方案很多,且不一定要采用用户提出的解决方案,而应该综合考虑,选用最佳方案。

归类—推导—转化

1.将问题点归类

分组是为了把同类或者相关的问题点聚合,寻找系统性的解决方案,而不是「头疼医头,脚疼医脚」。

举个例子:

可按照不同页面、控件、功能、流程、系统来进行归类,如:申请表(页面)、目录树(控件)、收藏(功能)、审批单(流程)、导航(系统)。

2.推导出优化方案

这个也是设计师最拿手的议题——「如何解决问题」,即针对一个/组用户痛点去设计方案。这里可以应用平时方案产出的各种推导方法,包括创意方法。

同时应该注意到,问题也许不能仅通过设计手段解决,所以此过程需要产研同学参与,确保方案有效且可实现。

3.转化为具体需求

方案只有转化为具体需求,才能进入产品规划、落地上线。这也是重要的一步。

优化方案和需求的粒度不同:有时候需要把优化方案拆成不同的需求分拆上线,有时候一个需求又能同时涵盖多个优化方案。这需要根据优先价值,结合产品侧的规划进行。

如何判断优化价值

每个问题优化价值是不同的,我们可以从产品侧、用户侧、数据侧三个方面去衡量:

产品侧:看可行性。是否契合产品的中长期目标?是否符合产品的发展节奏?是否易于技术实现?时间资源成本如何?

用户侧:看影响力。是否是用户使用的核心流程、关键页面?影响的用户范围多大?用户角色的权重(主要指B端)是否较大?

设计侧:看价值感。设计的ROI如何?能否体现设计的专业度?能否提升设计的话语权?

图片

 

图片

设计师虽然主导了体验优化专项,但又不掌握开发资源,如何更好地推动落地呢?需要掌握一些技巧。

推动落地中的四个对齐

对齐是为了及时对齐信息,减少团队中的信息差,使团队成员互通有无。不但可以提升协作效率,还能使大家感到被尊重和需要,使大家拧成一股绳。

四个对齐包括目标对齐、进度对齐、方案对齐和效果对齐。

图片

目标对齐:确保在项目启动和各个阶段产品、设计、技术各方达成统一的目标。可以通过启动会和重要节点会议进行对齐。

进度对齐:项目周期比较长时,需要注意各阶段的进度对齐,掌握进度和风险。方式有排期进度表、定期例会、定期邮件等。

方案对齐:这是比较容易忽略的一点。需要产品、设计、技术甚至用户做方案对齐。我们目标明确,是为了切实解决用户的体验问题的,方案一定要有效,且可以实现。所以要关注方案是否能解决用户问题(方案评估、测试)、是否能够技术实现(方案评审)、方案实现效果(方案验收)。这点做得不好,优化效果就要大打折扣。

效果对齐:上线后需要针对两个效果进行对齐:一是优化效果如何、是否达成了目标(效果评估)。二是项目运行得如何,有什么经验和教训(复盘总结)。及时的团队复盘,有利于大家扬长避短、取得更好的成绩。

形成长期的体验优化机制

对于体验问题,我们不能寄希望于体验优化专项「毕其功于一役」,而是要建立长期的体验优化机制。

包括:定期整理用户反馈、定期走查、定期与产品技术沟通优化计划、阶段性复盘等,建立良好的体验优化通路。

 

图片

相信看完文章后,大家对「主导和推进体验优化专项」的方法有了一定了解。后续我们将会发布实战篇,分享具体实例。

 

原文地址:58UXD 

作者:环铁艺术家

转载请注明:学UI网》设计驱动!体验UP!高手设计师必备工具包

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



选项篇 | 单选/复选/拨动开关的使用小技巧!

seo达人


图片

本篇文章将围绕单选、复选、拨动开关三种选项元素的设计细节及使用场景展开分析,希望能帮助新手设计师避开选项设计的误区,为用户打造出更好的操作体验。

 

一、单选:独一无二

1.什么是单选?

单选按钮最早来源于老式的汽车收音机上的电台频道的切换按键,按下其中的一个按键就成为了被选中状态,其他就会被弹出,用户可通过这种方式快速切换不同的电台。

UI设计中,单选是指当界面中存在两个或以上的选项时,且各项之间相互排斥,用户仅能在选项列表中选择其中的一个来使用,即便反复选择,最终的结果始终独一无二。单选框有选中、未选中两种状态(极少数不可选),主要通过填充和描边互换的样式将当前状态反馈给用户。

单选是一种较为精简的模式,它至少包含两个选项,为了提升操作效率,需要尽可能的将所有选项展示给用户,无需多余的操作和思考,即能快速完成任务。如果是必填选项,最好提供一个与当前用户较匹配或选中率最大的一个选项作为默认值,即便默认值有误,对用户也不会有什么影响,因为用户本来就需要去操作,可一旦匹配到对应的用户,就能免去这一步的作,且默认值是经过多方面分析、反复推敲后才进行预设,只会是有益无害。

图片

2.单选组件样式

1)按钮式

按钮样式适合用在选项不多、文案不长的场景,可平铺在界面中或以弹窗的方式呈现。例如,购买衣服时,品牌、尺码、颜色都可以设计成按钮样式。

图片

2)圆形组合

未选中都是浅灰色描边的圆形,选中后,Android常见的是描边变主色+内圆点填充,而iOS更多则是描边变填充+对勾图标组合。其实这些不重要,真的没必要纠结是用圆点组合还是对勾组合样式,只要在同一个产品中统一样式即可,用户不会因为这两种表现方式的不同而影响后续的操作。

图片

3)对钩

对勾样式经常出现在弹窗列表选项中,只有选中后才会有“✔”标记,相比圆形组合,给用户的引导性更强。

在单个任务中,首次进入选择页面时,列表中没有任何标记(有默认选项除外),选中条件后,标记对勾的同时,无需其他操作即自动进入下一步任务流程,再次回到选项列表时,系统会标记上次的选择作为参考。另外,这种样式不会太过于局限选项的数量和字数。

图片

4)选择器

通常作为表单项以弹窗的形式出现,适合二级、三级联动选项。例如:选择地址(省/市/区)、日期(年/月/日)、时间(时/分/秒)等选项较多且具有关联性的选项组。

图片

3.单选的使用准则

首先要确保单选组件的可用性,所有单选项需要清晰的呈现给用户,避免嵌套或隐藏二级单选,否则会影响结构的识别性。

其次为确保可读性,单选组件的布局要符合用户认知。选项较少且标签较短时,使用多行多列的按钮式布局比较常见,例如电商APP的商品属性选择等;标签较长则使用圆形图标、对钩样式单列多行显示,例如选择退款原因;联动选项需根据关联的等级数量,在选择器中多列显示,例如三级联动地址,省、市、区三列并行。如果将选项毫无章法的平铺、标签/图标上下排布,会造成视觉动线混乱、内容紧凑及一些不可预知的问题出现。

图片

4.提供默认选项

如果可以的话,尽量给用户提供一个默认选项,这并非随意设定,需要经过多方面分析综合决定。举个例子,你的产品属社交类型,大多数为男性用户,那么将男性设定为默认的性别选择,这类用户就可以直接跳过这一步,节约了大量用户的操作成本,即便面对的是女性用户,这也不影响原本就需要手动选择的步骤。默认选项需合理设定,切不可乱用,否则一些“偷懒”的用户并不会更换默认选项,导致后续数据分析的精准度。

图片

 

二、复选:循环往复

1.什么是复选?

复选操作不会像单选那样出现信息阻隔,也没有拨动开关那么强的视觉干扰,通常包含一个或多个选项供用户选择,其选项条件不是互斥的,用户可从中选择一项或者多项,具体情况则根据选项条件的限制而定。

1)选择一项

一些设计师将复选理解为多选,且先不论对错,笔者想说明的是,多选只不过是复选的一种选择方式。在真实的设计中,有很多场景是不设限的,我们可以将选中/未选中理解为“是/否、同意/不同意、开启/关闭……”等意思。例如,注册页面中必定存在的「用户服务协议」,单个选项可反复操作;管理系统或B端的批量操作、权限设置等,选择其中的一项也可进入下一步操作流程。

图片

2)选择多项

强制多选一般会设定需选择数量的下限和上限。例如:首次进入某些APP时,需选择个性化定制标签,通常最少不低于3项,最多不超过6项;还有,在填写调查问卷的多项选择时,最少选中两项、不设上限等,这些就是复选中真正意义上的多选。

图片

2.复选的使用准则

相比单选,复选需要配备提交按钮,提交后才会记录被选中的信息。对于批量性的选项操作,复选框的操作效率比拨动开关要高出许多,例如,在某些页面开启/关闭几个权限,每个权限用单独的拨动开关进行控制,完全没问题,但涉及到几十个权限的控制,这种批量操作使用复选框一定是最佳的选择,只要用户能清楚操作之后会发生什么即可。

图片

3.常见的使用场景

1)标签选择

个性化标签选择中最为常见,在标签文字、选项数量较少的情况下,使用外观大小完全相同的标签按钮多列显示,有助于用户浏览,还能节约页面纵向空间,用浅色描边/主色填充或明暗等级来区分选中/未选中状态,部分产品还会在选中的状态上增加一个小图标(✓、+/-),区分会更加明显。这种方式切记标签不能过长,否则可能会导致文字折行或容器内很拥挤,不利于用户阅读。

图片

2)列表选择

当选项过多、标签长短不一时,适合使用列表式选择。WEB端常见的是圆角矩形勾选填充,例如管理系统的商品列表;移动端更多则是原型勾选填充,例如购物车,当然并没有明显的界定,所有页面统一样式即可。

图片

4.未定状态

与单选视觉样式唯一不同的是多了一个未定状态。常见于管理系统或B端,当选项存在多个子级时,只是某些子级被选中,但并未全部选中,这时父级状态尚不确定,即为未定状态。

图片

 

三、拨动开关:白天与黑夜

1.什么是拨动开关?

拨动开关就像生活中控制灯泡的开关,它是在两个互斥的选项中始终存在默认值、且操作会立即生效的按钮,操作后必定是对立的选项,例如开启/关闭、是/否、同意/不同意等。

图片

2.拨动开关的使用准则

拨动开关必须表意明确,用户在操作之前就能清楚操作后会发生什么,使用时,需遵循以下原则:

  • 用于操作后立即生效的场景;
  • 标签和按钮是两个分离的视觉焦点,当用户有可能产生疑惑、或标签不足以言明时,需增加辅助文字予以说明;
  • 主要用于控制全局,权重较高,针对单个任务流程的控制,请使用单选/复选;
  • 默认就是开启/关闭状态,若存在子级,父级关闭的同时将子级隐藏(避免置灰);
  • 当操作有风险时,必须给予明确的提示;
  • 避免大面积使用,如果存在太多需要开启/关闭的条件,建议使用复选;

3.背景与文案

拨动开关的背景通常只介于两种状态,关闭状态下为置灰(全服通用),开启后为绿色,也有很多产品将其设定为品牌色,统一颜色样式即可。

辅助文案常见有两种类型,第一种为当前状态反馈,例如:获取设备通知权限“消息推送已开启/关闭”,这种反馈在应用中可灵活运用,尤其是在关闭状态下,可起到一定的引导作用。第二种为标签辅助提示,例如:操作后的好处或风险,告知用户会发生什么,提前让用户有一定的心理预期。

图片

 

四、单选控件的纠葛

1.单选框vs复选框

是用单选框还是用复选框,似乎是最好界定的,笔者查阅了很多资料,得到的信息是“需选择一个选项用单选、多个选项用复选”,答案出奇的一致,这好像什么都说了(确实如此)、又好像什么都没说(是个设计师都懂),当我们仔细分析之会发现,并非仅仅如此。

在PC端遇到两个对立的选项(如:是/否、同意/不同意、通过/不通过)时,除了用两个单选项之外,也可以使用复选框,尤其是在权限控制中,必定是复选。另外,移动端注册登录流程中,用户服务协议也是最具代表性的复选框(同意/不同意二选一)使用案例。除去这些特殊的使用场景,其他大部分就直接单选。

2.单选框vs拨动开关

仅存在两个选项时,单选与拨动开关的使用,有一些设计师就将其混淆了。笔者曾遇到过这样的设计案例,有产品将性别(男/女)、O2O取货方式(送货上门/到店自取)只有两个选项的任务用拨动开关来呈现,操作后,通过开关上的滑块左右移动+文案辅助来确定当前选中的条件。笔者认为,这种方式不可取,最大的弊端就是在当前状态下,用户并不知道另一个选项是什么,需要通过猜测或试错来确定,无疑让增加了任务的完成难度,也打破了用户对常用操作的固有认知。

至于什么时候需要用拨动开关,上述3-2《拨动开关的使用准则》中有详细说明,除此之外使用单选框,能解决设计中80%的单选与拨动开关的选择性问题。

3.单选框vs下拉列表

选项较少可直接在当前页面用单选框(选择性别)、按钮(标签)呈现,当用户需要在大量的选项中进行选择时,PC端可使用下拉列表,移动端更多使用的是操作栏弹窗或跳转到新页面让用户操作。其实这方面没有明确的界限,需根据使用场景以及选项的属性根据实际情况灵活变动。

 

五、必备常识和使用技巧

1.选项的几种状态

单选、复选、拨动开关各自都有不同的状态,在设计之前,设计师需要清楚地知道这些状态所代表的含义以及不同的使用场景,避免后续在使用中给用户造成困扰。

图片

2.符合用户认知的控件样式

首先,选项框样式应符合用户认知,不能为了所谓的差异化、个性化打破用户固有认知,而带来额外的认知负担。例如单选/复选常见的是圆形填充+对钩(PC端)、圆角矩形填充+对钩(移动端)两种方式,虽然这并不是唯一,但至少不会出错。虽然鼓励跳出常规的设计思维做出改变,但一切都以不增加用户使用难度、提供更好的用户体验为出发点,不然还不如不变。

图片

3.注意对齐方式

按钮式不用多说,文字跟容器上下左右居中。列表中的对齐方式无非两种,选项框在前,文字和选项框都是左对齐,单选/复选均可采用这种方式;选项框在后,则文字左对齐、选项框右对齐,采用这种方式的单选居多;拨动开关则是全网统一,标签左对齐,开/关右对齐。

图片

4.清晰简短的标签

选项标签需清晰简短、直接表达核心含义,尽量避免否定的表达方式,以免用户产生误解。像拨动开关这种两极分化的选项,当用户不清楚对立的选项内容时,可以使用副标题进行描述,让用户在操作之前有一定的心理预期。

5.批量选择、节约作成本

虽然都是将选择权交给用户,但面对不同的场景,需提供一个「全选」操作,帮助用户一次完成多个重复的操作,降低操作成本。

例如:B端的内容管理,批量操作能节省很多时间,还能降低因多次重复操作产生的失误概率;C端最具代表性的有购物车、以及初次进入部分应用时的个性化标签选择。

图片

6.触控热区的设定

针对移动端,点击区域切勿直接使用选项框的范围大小,需单独设定热区范围。大家都知道,大拇指在移动端应用中使用频率是最高的,相对来说,要有足够大(非绝对)的操作区域以供手指进行精准交互,以免无效操作或操作失误。需要将文本标签、选项框以及各选项区域均分后四周的留白都作为触动热区,操作起来就会轻松很多。

图片

 

六、结语

本文笔者主要总结了单选、复选、拨动开关的使用规范及常见问题,不过设计规范只是基于产品本身构建的一个标准,为了约束后续的视觉统一而存在的规范参考。在真实的设计中,这些设计规范并不是唯一,需要根据产品的特点和使用场景进行灵活变动,设计出最适合自身产品的控件才是最重要的。

遵循设计规范只是最基础的标准,遵循的同时跳出规范的束缚才会有创意,这就离不开我们平时的积累,钻研各产品中优秀的设计细节,通过查漏补缺、扬长避短,在其他产品的亮点中找到与自身产品的平衡点并将其融合,这才是我们学习和总结的最终目的。

 

原文地址:能量星球

作者:大漠飞鹰CYSJ

转载请注明:学UI网》选项篇 | 单选/复选/拨动开关的使用小技巧!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档