首页

交互设计师该如何提升“软实力”?

seo达人

我将交互设计师应该具备的能力总体上划分为“硬实力和软实力”两个大方向:

硬实力是指专业能力,包括交互设计能力、对所负责的业务线与对应产品的理解程度、对产品面向的用户群体与用户使用场景的了解程度、对设计规范与组件的熟练应用、数据分析能力、对设计工具的熟练使用、以及具备一定的视觉审美。

软实力是指通用能力和个人影响力,通用能力主要包括“沟通与表达能力、推动与执行能力、项目管理能力、复盘总结能力”;个人影响力主要包括“分享、指导、创新能力”。

本文将结合我的工作经验,以及不同公司招聘要求中都有的共性点,向大家介绍如何在日常工作中培养和提升自己的软实力。

下图是我简要绘制的“交互设计师能力框架图”:关于硬实力这部分内容,在我之前的文章中已经梳理过一些,感兴趣的可以回头翻看。

 

一、通用能力

1. 沟通与表达

首先你需要分析自己的性格特点,一般外向的人擅长沟通,即便不是外向型,也最好不要是内向不爱说话。只有你发自内心的愿意主动与他人沟通,别人才能感受到你的亲和力

其次不管与怎样性格的人沟通,把握的第一个原则是“就事论事”:没必要为了事情大声争论,甚至上升为人身攻击,我们沟通的初心是为了解决问题,应该尽可能的“求同存异”。

你需要做的是想办法解决影响事情顺利发展的各种障碍,过程中遇到的非主观因素记录下来便于后续总结。

表达是指将思维所得的成果用语言等方式反映出来的一种行为,是向他人正确传达自己的想法。

比如与同事沟通表达自己的观点、公开演讲、获奖感受等,表达的定义里包含一个关键词“思维所得”:这意味着你需要在平时就有一定的思考沉淀,不然你无法做到“准确且清晰”的传递自己的观点

需要把握的第二个原则是“不卑不亢”:既然是一个Team,团队最终目标是一致的,只不过不同成员的岗位角色不同,分工内容不同,没有谁一定要给谁妥协,或者谁一定要强硬到底。按照已经发生的客观事实有理有据的陈述自己的观点即可。

最后需要把握的第三个原则是“换位思考”:用户体验设计领域的设计师经常提到一个词“同理心”。我们需要站在用户角度审视自己设计的产品,我们需要站在不同岗位角色角度理解他人的难处…无论对内还是对外沟通与表达,能做到换位思考的人,必然考虑问题更加周全、更加有深度。

 

2. 推动与执行

执行力是指完成任务目标的操作能力,评判执行力强弱的标准是效率与效果。执行其实是践行的过程,践行的过程中效率可能没那么高、最终的效果可能也没有多满意,但无论如何,做这件事都为你积累了宝贵的“践行经验”,举重若轻的背后一定经历过多次失败与不堪。

执行力是每一位员工都必须具备的基础能力,而推动力则是针对中高阶水平设计师提出的更高要求。

“从单纯的执行任务”升级为“从头到尾推动事情落地”,这是职场打怪升级的必经之路!推动力不再是单一的能力要求,而是“多项能力”的综合体现,推动落地的过程中涉及到沟通表达、组织协调、向上管理、项目管理等能力。

 

3. 项目管理

往小了说是对自己承接任务的管控,范围相对小,包括项目前期涉及到的“与上游业务同事和产品经理梳理需求、提出合理建议、预估排期”;项目推进过程中涉及到的“准时交付产出、问题沟通与解决、风险点预估与分析、及时向上汇报进展、设计验收”;项目后期涉及到的“上线验收、遗留问题记录与跟进”。

以上提到的是设计师在设计层面应该做好的事情。再往大了说,你可能会作为一个分支项目的牵头人,你要管控的不单是项目在设计阶段的开展,还会更多涉及到与上游业务方、产品经理;与下游开发同事、测试同事;与外部合作方的协作等。

随着项目复杂度提升,对负责人项目管理能力要求会越高,因为会涉及到方方面面,可能包括业务对接洽谈、细节协商达成一致、进度把控等。

作为交互设计师,有机会深入参与到项目推进的全流程中,这既是对你专业能力的深化,也进一步加强了你对所负责业务线的理解程度。

如果你遇到这样的机会,请珍惜把握,尤其是首次承担类似职责。谁都是从0到1、从无经验到身经百战走过来的,不要有过多的担心害怕,撸起袖子加油干!当你经历过再回首时,你会感谢当初自己的勇敢与自信。

 

4. 复盘总结

近期面试一些交互设计师,聊到关于项目需求的复盘时,有的应聘者在公司现有机制下没有机会接触到需求上线后的数据表现或者用户反馈;有的应聘者总结分析的不够深入或者视野局限于设计层面的改进。

我之前也在小的创业公司工作过,以上类似现象在许多公司还是比较普遍的。我的看法是:围绕个人能力发展思考并决策。

  • 如果你所在的公司没有建立复盘机制,你也很少能接触到相关数据,一方面你可以尝试着利用上面说的推动能力,试着推动建立这个机制,至少可以先从你所在的小部门开始试行;另一方面如果你是在类似国有企业,反馈信息涉及到保密,这是客观因素与你的努力无关,这时候需要认真考虑换工作的事情了。
  • 另外一种情况是有机会获取相关反馈信息,但有时候承接的业务需求不间断,再加上许多公司的复盘机制算是锦上添花,不是非做不可的,所以针对设计师个人而言,做好这件事更多依靠的是“自驱力”。

复盘总结不单针对工作项目,另外重要的方面是自我反思。从过往的工作经验中思考做的好的地方,不好有待提升的地方,需要补齐的短板是什么,职业生涯下一阶段的规划是什么… 我认为尤其对于交互设计师而言,阶段性的反思总结,有助于更好的认清自己能力优势与劣势,有助于逐步搭建上面提到的自己的能力框架。

 

 

二、个人影响力

1. 分享

分享其实就是将某方面复盘总结的结果拿出来与他人沟通交流,分享形式和分享内容围绕分享目的可以灵活调整。比如我之前的文章《如何做好一场部门内部分享?》中提到过关于分享形式与内容的创新,感兴趣的可以翻看。

当初之所以要做出这个改变,是因为我们认为原有的单个人框定大概分享内容范围进行分享的方式,不能很好的帮助分享人和被分享人提升能力,同时分享内容容易脱离现有业务。当然不同公司分享目的考虑的侧重点不同,所以算是因公司而异吧。

对个人而言,如果你平时针对项目、设计专业、工作流程、存在的问题等有过一定程度的思考,你会积累一些沉淀,无论是优秀的值得借鉴的内容、还是失败的值得引以为戒的内容,都可以与同事或者专业领域的朋友交流讨论。反过来在这个过程中,又会激发你更多的想法,拓展你的眼界与思维。

 

2. 指导

团队内有工作经验或者熟悉工作流程的中高阶设计师,针对初入职场的新人或者刚来公司还处于适应部门环境的有工作经验的职场老人,进行专业层面和工作流程的指导。

许多公司比较注重公司文化对新人的输出,但针对日常工作的指导带教却没有十分明确的规定。

辅导的效果很大程度上取决于指导人,如果某天你有机会带教新人,不要轻视这项工作,首先在心态上能够做到上面提到的换位思考,你自己也是从新人一路走过来的,能够切身感受到新人的诉求。

其次也是对你责任心的侧面考察,在职场有一句话我认为是适用的:你能承担多大的责任,就值得拥有多大的回报。

 

3. 创新力

提到创新许多人觉得有些虚无缥缈,因为现实情况是处理不完的待解决问题,哪还有时间和精力做创新,就算提了创新的点也很难有资源支持。很久一段时间我也是这么想的,后来看到两个观点使我茅塞顿开:

  • 创新不是颠覆,也不一定是惊天动地的大动作,更多的可能是微创新,一个有可行性有突破性的想法。
  • 如果你对所做的事情保持有好奇心或者热情,千万不要被日常的工作消磨掉。好奇心是创新的源动力。

生活中太多的人会告诉你,只能顾好眼前的苟且,没有精力和金钱畅想诗与远方,如果你也这么想并且这么去做,你只会被大众牵着鼻子走。更为可怕的是,慢慢的你丢掉的是那些原本可以让你更为成功的优势点。

 

 

三、总结

以上是我提炼出的我认为一名优秀的交互设计师应该具备的“软实力”, 这部分能力应该是成为高阶设计师的衡量标准之一。无论是职场新人还是老鸟,重视和持续打磨自身的通用能力与个人影响力,才能不断提升自己的不可替代性。

 

原文地址:人人都是产品经理

作者:Viksea

 转载请注明:学UI网》交互设计师该如何提升“软实力”?

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

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

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

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

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



UI新视角-界面三重构

seo达人


图片

 

01 如何理解界面设计?

互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等,每个职能岗位对界面设计的理解深度也各不相同。

交互视角

交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

图片

组件化视角

产品经理、交互设计师、UI设计师、前端工程师共同搭建设计系统语言时,他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件,比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。

图片

视觉视角

UI设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。

图片

前端视角

前端工程师会从代码视角理解界面结构,相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。

图片

界面三重构构思

基于以上视角,现在我会以一种新的视角带你去理解和学习界面设计,它就是界面三重构。简单说就是分别从X轴、Y轴、Z轴三个维度去理解和解读界面设计。但是在模型抽象时遇到了困难,如图模型一是从界面、交互、前端的X轴、Y轴、Z轴去解读,模型二是从X轴、Y轴、Z轴的界面、交互、前端的去解读。

图片

模型的抽象不够简洁,有很多重复的点。这种结构很像组件化中的类别和状态。我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ,因为交互和前端都是建立在界面之上的,所以就有了界面+交互—X、界面+前端—X。当写到界面X轴相关知识时,如果有交互、前端的知识点,可以在此基础上接着写。

图片

根据平面逻辑图我抽象出一个更简单的模型。可以从界面的X、Y、Z、XY、XZ、YZ去输出相关知识点,交互、前端在界面三重构的基础上阐述。

图片

 

02 X轴设计

X轴设计中有位置的结构关系,位置的排序,段落文本行长的易读性,交互和前端中的应用。

位置

X轴从位置上可以简化为左右、左中右的结构关系。

左右结构

在左右的结构关系中,自古就有左为上,人的视线浏览顺序是从左到右,从上往下。所以重要的信息内容可以优先放在左边。在舞台剧表演中,重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边,右边放箭头指向。

图片

左中右结构

左中右的结构布局让层级更加丰富,从而增加层次感。左中右的位置顺序是可以被定义的,常见的有左中右对应一二三的位置关系,也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。

图片

左右并列秩序

我们来看看App界面的底部Tab栏的结构,当我们随意打开一个App时,你还记得底部Tab从左到右的栏目分别是什么呢?可能经常使用的App我们很熟悉,对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律,就是第一个栏目往往是首页,最后一个是我的个人中心,其他的相对比较模糊。

图片

由此我们推断出从左往右的顺序并不是一二三四依次递减,而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计,同样也适用于B端的界面设计。B端产品界面的导航结构第一个是首页(工作台)或最重要的内容分类,最后一个是更多或设置。同样遵循以上规则。

图片

右侧位置重要最典型就是模态设计,在对话框设计中,确定和取消按钮往往把最重要的放置在界面的右侧,这时位置的排序确定为一,取消为二。

图片

易读性

文字段落编排时更多的需要考虑段落文本的易读性,当你设计C端产品时,因为屏幕尺寸的原因会忽略段落文本的行长,但在Web、B端设计中,行长的定义可以影响到读者的阅读效率和体验。

美国芝加哥有学者做过一个试验,人的眼睛是在不停地跳动,在跳动的时候是看不见字的,停下来的时候才能看见字,而且每次停下来只能看六个字。所以一段文字不要排得太长,过长眼睛在阅读时会很疲劳,在阅读时我们更适合阅读较短的文字。

网页新闻详情页面的行长,我研究了纽约时报为640px、华盛顿邮报680px、Medium680px,所以我们设计师可以控制行长最大在640—680px。但是西文和汉字还是有区别的,站在前人的规则上去学习定义规则更加重要。

图片

交互改变位置秩序

位置的重要秩序其实是很容易打破的,在界面固定不变时结构中相对稳定,当交互大兄弟来了,说我想尝试改变改变,如图把手机的网易云音乐和QQ音乐进行组合成组,原来的一二三四的结构就被打破了,变成了一三二的视觉结构关系。点开组合后,这时候用户大兄弟来了,网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异,所以大家一定要带着客观的心态去学习,不同视角和不同思考维度都会有异样的结果。

图片

响应式与断点

X轴设计从前端的角度就是响应式和断点,因为载体的容器大小不同,前端代码主要用Media来打断点,不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。

图片

 

03 Y轴设计

视觉中心

物理几何中心是居中的,但是人的视觉中心是偏上的,有时候眼见为实是假的,视错觉中有大量的案例,在色彩和图形设计中需要视错觉的矫正。

图片

如下图APP的闪屏页的Logo居中布局,考虑到有向下的重力和视觉中心偏上的理论,往往把Logo居于物理中心上方。

图片

倒金字塔信息层级

倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构,重要的信息放上面,越往下信息层级越低。网页设计中还会有折线之上的运用,以前人们看报纸是折叠的,但是为了告知读书报纸展示也是有内容的,所以折叠设计时看到一些图片引导读者打开。

Apple官网的信息层级也遵循倒金字塔信息层级,上方Logo加导航,中间为最新发布的产品,下方为历史发布产品。信息重要层级依次递减。Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。

图片

纵向模式

纵向模式是用户习惯自上而下滚动来浏览更多信息,当用户还未确定目标信息时,纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。如图微信APP的发现界面,用户会选择一列一列快速浏览直到找到某一目标信息后,再横向浏览细节。那么问题来了,上文中提到倒金字塔信息层级,重要的信息应该放置上方,为什么APP的Tab栏很重要却放置在界面底部,下文隐喻设计中“驾驶舱隐喻”会讲到。

图片

 

04 XY轴设计

X轴与Y轴组合后就形成了一个平面,所以平面设计的理论知识在此次也适用。

盒子原理

当我们做界面设计时,为了让界面的元素统一为一个整体时,给他们整体来个框框就形成了一个一个盒子的样式,这样更有利于组合信息。典型的设计有卡片、列表、模块化等。

图片

四角压边

在Dribbble的作品展示中,由于作品图片展示比例为4:3,为了平衡界面中的元素,常常在四个角放一些小的相关元素来平衡画面。我们来看一下R神的插画作品中大量使用了四角压边的设计技巧。

图片

运用到界面设计中最典型的就是卡片设计,比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计,四角放置信息,整体给人简洁大气的感觉。

图片

四角压边在设计中是可以灵活运用的,可以把四角压边变成三角压边,两角压边。如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时,四角压边就变成了两角压边,多用于列表页。

图片

跷跷板原理

四角压边的本质是跷跷板原理,通过调整元素让界面达到平衡。跷跷板原理本质是平衡,需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大,右边的重量小,但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。

图片

8点网格(4点网格)

8点网格理论来源于谷歌Material Design的设计语言,4点网格理论来源于苹果iOS的设计语言。个人还是更加喜欢iOS的4点网格,因为原子单位越小,可呈现的方式越多,可解决的问题方案也越多。8点网格可以理解为最小单位,其他使用的单位都为8的倍数。8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。

图片

苹果和谷歌都是在定义产品系统中的度量单位,西方人一直想定义度量这个问题,其中最有名的就是勒·柯布西耶的《模度》,他的理论是以西方人的的比例结构来定义规范,并不能适用于全世界更多的人种比如东方人、非洲人。但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的,最小为44pt。iOS定义了人类使用触控屏的基本度量,44pt也是4的倍率,这才是我喜欢iOS的4点网格的真正原因。

视觉流引导

读者在看界面的时候,眼睛的视线受到画面内容的吸引,就会产生一个视觉先后的次序,将这些视觉集中点的先后依次连起来,就形成了视觉流导向。

设计师经常会考虑版面或界面上的文字是否会被阅读,实际上很多文字都不会被阅读,但是可能会被浏览。视觉眼动仪可以检测到人们如何浏览一个页面的,从找到切入点,到了解界面中信息关注的先后次序,从而调整界面元素,来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。

F模式

尼尔森F型视觉模型由Jakob Nielsen于2006年提出,他指出用户在浏览界面时,视线动线会呈现宛如英文字母F的形状,这种视觉浏览模式主要包括以下三个方面:

1、读者的眼睛会先从顶部开始,从左到右水平移动,浏览的上半部分会形成一条横向的运动轨迹,这就是F形状的第一条横线。

2、读者的目光会向下移动,并再开始从左到右观察,但浏览的视觉动线长度会相对短些,这就是形成了F形状的第二条横线。

3、读者从界面左边的部分进行垂直扫描,以较短的长度向下扫描,此时读者的阅读速度较慢,而且更有条理性和系统性,这样就形成了F形状的一条竖线。

图片

根据尼尔森F模型,我们可以得出几个心理暗示:

1、读者在浏览界面时是快速扫视,不会仔细阅读每一个界面内容。

2、界面的头两段文字无比重要,多用小标题、短句引起阅读者注意。

3、将重要的内容放在最上边,将重要的信息显示在标题和段落的前部显示给读者。

Z模式

Z模式是基于用户从左到右自上而下的阅读习惯,用户首先关注的上半部页面的内容,依照从头部的左边到右边,再沿着对角线浏览下一部分的中部左到中部右,循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。

图片

古腾堡图表法

古登堡图表法(Gutenberg Diagram)又称对角线平衡法则(Diagonal Balance),由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限:

1.第一视觉区(Primary Optical Area):左上方,读者首先注意到的地方。

2.最终视觉区(Final Optical Area):右下方,视觉流程的终点。

3.强休息区(Strong Follow Area):右上方,较少被注意到。

4.弱休息区(Weak Follow Area):左下方,最少被注意到。

如图小程序的授权页从Logo到允许高亮按钮就是对角线平衡构图。

图片

 

05 Z轴设计

Z轴设计可分为视觉度层级(单界面)、结构层级(单界面)、产品用户流程(多界面)。

 

图片

视觉度层级(单界面)

视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。

主体与背景

界面中使用背景色是让元素向前进,背景色多为灰色且有颜色倾向,偏冷色或暖色。微信界面使用了偏冷色背景,Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

图片

投影

界面中使用投影可以增加内容的视觉层级,之前追波流行的弥散投影也是为了增加界面视觉层级。谷歌Material Design就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。

图片

色彩大于字重大于字号

色彩最典型的就是App的消息红色圆点,红色的波长最长,所以用最突出的红色来提醒用户有新动态。字重是从面积的大小衡量的,标题文字常常加字重来提升视觉。在定义组件时,鼠标悬浮、Hover的各种状态就是用颜色来区分,目的是让用户操作后有反馈的感知。

图片

结构层级(单界面)

界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载;导航层是位于内容之上,位置相对静止;遮罩层配合弹出层一起使用,又叫模态层;弹出层属于轻量化设计,比如消息通知、下拉菜单和加载、报错等状态提醒。

模态对话框

如图模态对话框是用户在完成任务时,不希望跳转页面而打断工作流程,而是用Modal对话框在一个界面上承载相应的操作。对于信息量不大,容器可展示的操作可用模态对话框。

图片

产品用户流程(多界面)

产品的界面设计需要从概念到信息分类到信息架构,目的是方便用户快速的搜索、筛选、辨别出有用的信息。交互设计需要学习辛向阳教授的交互设计五要素:用户、行为、目标、场景、媒介。

产品的Z轴设计其实是从平面(界面)、空间(层级)、架构(关系)梳理出结构关系,但站在产品层面最重要的是信息与用户的交互设计,关注用户旅程地图中用户流程。用户流程需要多界面之间跳转,这就形成了产品的Z轴界面设计。

什么是用户流程

用户流程是用户从打开APP到完成任务关闭APP的使用全过程,包括了用户看到什么信息,做了什么事。

疫情期间每天都需要使用随申办小程序,用户流程是打开微信,进入到微信首页,下拉查看常用小程序,点击随申办,查看随申办,退出小程序。

图片

根据用户流程优化体验,用户流程越短越好,操作流程尽量不超过5步。用户流程要顾及头尾,即用户进入到一个新界面会看到什么信息,用户成功完成任务后会跳转到哪里,或显示哪些反馈信息。这些都是最容易被遗忘的接触点。

如何确定用户流程

基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例,需要思考用户有哪些场景,如果知道谁发的,就会先通过找到人,然后进入其朋友圈找到信息。如果忘记谁发的呢,那只能凭记忆里在朋友圈慢慢滑动,直到找到该信息。

图片

以上从交互设计五要素行为和场景对用户流程进行分析,还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。

 

06 XZ轴设计

上文已经讲了Z轴相关设计,为什么还要写XZ轴、YZ轴的设计呢,从X、Y、Z、XY、XZ、YZ更有逻辑性和完整性,也确定存在一小部分的案例可以解析。

Banner轮播图

Banner轮播图除了横向的X轴出场次序,还有Z轴点点一对一的当前状态。移动端受容器大小限制多为Z轴设计,Web端容器变大可以变成左右的交互设计形式。

图片

导航栏

导航栏是Z轴的视觉与交互结合,当前状态需要重点突出,视觉向前进,点击导航栏后底部的横线会有动效移动,可以侧滑导航栏选择类别,这样效率会更高;也可以侧滑下方内容切换选择。

图片

列表侧滑删除

列表侧滑是使用内嵌的布局方式,界面设计中用户习惯是先查看再操作,当容器大小放置不下可先隐藏操作按钮。QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

图片

 

07 YZ轴设计

YZ轴多结合界面交互一起设计,通过用户操作形成Z轴信息架构的变化。YZ轴设计多用于信息流、键盘输入等

页面滑动

信息流的设计多为Y轴设计,Y轴急促、紧张的情绪会让用户不停的刷信息。信息流设计中采用相似的界面结构保持统一,比如固定的头像位置,固定的操作按钮位置,标题文本形式等。微信朋友圈信息流一整块一整块的加载提高阅读效率;而抖音的视频流是一个一个加载,更注重精准推送和沉浸式的观看体验。

图片

键盘输入

键盘输入也是采用YZ轴设计方式,不同场景下的键盘输入交互也有差别,微信聊天界面的键盘输入框放置在底部,每次调用键盘组件时界面会从下往上移动;而朋友圈评论时,键盘组件除了从下往上移动,还要对齐到对应评论的内容上。前端的定位技术会有所不同。

图片

 

08 模型升级

界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等,当然也可以替换成桌面端、Web、小程序、APP、B端设计等。这样就可以把中间的要素抽象成N,界面三重构模型升级为N——X轴、Y轴、Z轴,N可以为单一的内容比如界面,也可以是N=N+N比如界面加交互一起思考。简化的模型更适合微观层面的细节设计,并不适合于宏观视角的分析设计。

图片

如何使用该模型?

我们来举一个组件的例子,比如导航设计共分为二级导航,我们常规会显示出一级导航。一级导航可以从X轴、Y轴两个维度去思考,X轴的多为横向全局导航,Y轴多为侧边导航栏。当交互大兄弟来显示二级导航时可以平铺(XY)、上浮(Z)、内嵌(Z),二级导航展示方式还需要考虑容器大兄弟的意见,容器够大就可以选择平铺,容器小就展开收起的交互模式,展开就会有上浮和内嵌的两种形式。

图片

模型抽象的N是随时发生变化,对应的界面设计形态也会发生变化,但是X轴、Y轴、Z轴的方法和设计技巧是相对不变的。只是你知道或不知道,会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。

等价设计

等价设计是帮助用户完成任务的结果是一致的,但过程可能不同,又或者是产品的逻辑结构是一致的,但设计的外在形式有差别。

如图京东购物车的数量添加减少功能是展示出来的,直接可以添加可减少商品数量;但是淘宝购物车的数量是展示结果,修改商品数量需要点击后出现步进器组件。这两个设计形式就是等价设计,等价设计的好坏需要考虑很多因素,用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理,合适最重要。

图片

同形异构

同形异构是指不同的信息、数据类型设计出相同的外在形式。微信消息列表也中有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等,这些消息的数据类型、对象各不相同,可是外在的结构形式是一样的,这样做的目的是简化、统一,通过图标和头像来区分人、应用、工具的消息差异。

 

图片

以上总结的界面三重构相关知识、理论、技巧都有其使用范围,那么有没有一种设计方法可以凌驾于界面三重构模型之上呢,答案是肯定的,那就是隐喻设计。

 

09 隐喻设计

什么是隐喻设计?我们应该怎么去理解它呢?隐喻可以理解为隐含的相似性,它用想象的方式将某一物体与另一物体相联系,并把二者的特征、情感等相互结合转移。如果对隐喻设计感兴趣可以搜索我之前写过的文章《揭开隐喻设计的面纱-你不知道的隐喻设计》

隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本,为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的ios操作系统和谷歌的Material design。

iOS六大设计原则之一

iOS六大设计原则:AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。

Metaphors(隐喻设计)当一个app的虚拟对象和动作都是对熟悉事物的隐喻时(不管基于现实世界还是数字世界),用户学习的更快;隐喻设计在iOS系统中很好的得到体现,因为用户是直接与屏幕产生物理交互的。

用户移动视图来查看更多的内容;拖拽内容;切换开关、移动滑块并且直接滚动来选取值;甚至可以像翻书或杂志一样轻快翻页。

关于隐喻设计还可以用另一个概念来表达,那就是心智模型。因为人类几千年的发展,虽然科技进步很快,外部环境也发生剧烈变化,但是人类的心智进步其实是很慢很慢的。

心智模型

心智模型最早是由苏格兰心理学家苏珊·凯里在1943年提出的,是指在人们心中根深蒂固存在的, 影响人们认识世界、解释世界、面对世界, 以及如何采取行动的陈见、假设和印象。心智模型是一种内部表征, 但这种表征并不是对外部世界的完全模拟, 具备不正确性和不科学性等。因为用户心智模型存在这些不足, 所以需要了解其偏差与错误的来源, 以便今后采取适当的措施提高用户与系统的交互效率。

在产品设计的系统领域,心智模型是指人们对于产品系统的理解,用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。每个用户将具有不同的思维模式,他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。

心智模型其实是通过学习、感悟不断提升自我认知的过程,还记得我刚开始学习软件时候,如合成软件Photoshop、三维软件C4d。当我第一次接触这类软件时,感觉整个人摸不着头脑,太多的概念都不清楚,比如通道、图层样式、曲面建模、打灯光、动态图形等。踏踏实实的去学习这款软件是最有效的方式,通过不断的试错和总结,慢慢的得心应手,这样我们对于软件的心智模型就会逐渐形成。

但是有些心智是和我们生活方式、习惯、文化息息相关的。日本设计师深泽直人就提出了一种叫做无意识设计的设计理念,又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。所以设计师需要有好奇心、有共情、有洞见,才能很好理解设计来源于生活这句话。

XY情绪

X轴与Y轴的情绪可以从日常生活中找到答案,星巴克、瑞幸的店铺使用了X轴的横向排列,而在肯德基、麦当劳的店面排队使用了Y轴竖向排列的方式。我们尝试用抽象思维把它们进行图形化,可以表达的更加直观。

图片

图片

星巴克、瑞幸的店铺使用了X轴的横向排列,用户可以看到工作人员不停工作,哪怕需要等待一会也不会很压抑,整个体验过程会给人一种舒适、安逸、闲散。而肯德基、麦当劳的店面排队使用了Y轴竖向排列,会营造一种热闹的感觉,因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉,买完就走的即视感。

 

图片

通过对日常生活和物理世界的映射,设计师在产品设计时可以考虑使用X轴和Y轴的情绪设计,比如文本采用横向排列会给用户带来一种平静、舒适的体验。APP底部的Tab栏横向排列希望用户花更多的时间浏览每个栏目的内容,这时候内容的好坏、吸引度也是重要的衡量指标。

图片

在信息流的设计中大量采用Y轴,因为Y轴紧张、急促的感觉会让用户下意识的快速下滑,比如微信的朋友圈;抖音上滑来切换视频;直播互动通过大量评论来营销热闹氛围。

 

图片

隐喻设计

驾驶舱隐喻—APP Tab栏

在前文中提到人阅读浏览的顺序是从左往右,从上往下的。那么应该把重要的东西放置在左边或者上边。Tab栏作为APP应用的主导航为什么却放置在界面的底部,这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学,哲学的尽头是佛学一样。

日常生活中开车、骑车,手永远是在控制方向和操作,而视线前方就是驾驶员需要浏览阅读的内容,比如行人、马路、车流等。把驾驶舱隐喻映射到产品界面中,底部Tab栏是引导用户去往哪里,上方动态变化来满足不同用户对不同内容的需求。

图片

问答隐喻—知乎问答

在线下学校的教室里,老师提出问题学生们举手回答的场景,抽象一层其实是一个提问者、多个回答者的逻辑,是一对多的关系。知乎问答界面就采用了教室的问答隐喻设计,一个问题多个回答。

图片

观看隐喻—B站直播

在电影院看电影时,屏幕在正前方,很多人共同观看一个屏幕。其实也是一对多的关系。B站的直播界面平台,也是数以万计的人共同观看一个直播,下面的评论弹幕映射电影院的欢声笑语。

图片

会议隐喻—Zoom视频会议

协同办公领域,在会议室开会是再寻常不过了,会议室开会时能同时看到同事的面部表情,每个同事都可以投屏进行共享会议内容。Zoom的视频会议软件采用了线下会议隐喻设计,Zoom视频会议支持多人视频讨论,每个人都可以共享屏幕进行实时分享内容。

图片

互联网行业才短短十几年,但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。当设计产品时遇到问题没有方向时,不妨停下脚步看看人们在日常生活中是如何运作?能不能从生活中吸取灵感。

 

总结

界面三重构给设计师提供一个崭新视角,相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。从用户体验五要素的视角去看,界面三重构算是从结构和表现层进行挖掘设计的可能性,偏微观层面的设计。在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。

界面三重构的想法起源于2019年,2020年于Gllue UED团队内部分享,2021在RDD内部分享,整理制作发表于2022年6月。

感谢阅读,很片面,共勉。

 

原文地址:水手哥学设计(公众号)

作者:水手哥

转载请注明:学UI网》UI新视角-界面三重构

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

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

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

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

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


UI/UX设计师如何打造一个完美的开局账号

seo达人


图片

完美开局的账号就需要有3个前提:

1.多金,够氪 

2.很欧,运气爆表 

3.很肝,以勤补拙

对于设计师来说,怎么样才是完美的开局账号呢?在我们身边也会经常看到一些非常牛的设计师,他们可能很年轻,但是设计能力很强,又有非常好的学历背书,一毕业就能够拿着别人3、4年都拿不到的薪水。我们就会觉得这样的开局就是相当完美了。

图片

但是这样的开局账号也几乎是极少数的,好的学历背书大部分都是要靠父辈们的积累,例如美术生学设计专业的学生其实开销是很大的,相比其他的专业在这个学习过程中需要不断的氪金,这点不可否认。

另外,一个人在成长过程中的教育、受到的熏陶、环境的影响也会影响一个人的发展,有的人说天赋好所以他们起点高,进步快。

但是天赋也需要不断修炼,比如你在幼年的时候就展现出对艺术创意的敏感,但是后天家庭并没有资源培养你,那么等你长大了这个天赋可能也就不是你的优势了。

所以别看那些年轻有能力的设计师这么厉害,大部分其实都是家庭殷实,前期投入了非常多的资源才能达到的。大部分家庭都比较普通,所以抛开这些条件,我们来聊一聊如何让自己的开局能够比其他人更好。

开局的几个阶段

那么我们分为几个阶段来讲,分别是:大学期间、初入职场、职场3年

 

图片

账号需要养成,但是开局非常重要,其实这几年我接触了这么多设计师大部分都不是科班毕业的,因为大家考大学的时候其实对这些专业和以后职业的发展是不清晰甚至很迷茫的,所以很多专业的选择一般也会根据父母还有亲戚的建议做选择。想当初我报了电子信息工程专业以为是去玩电脑的,结果课程内容却是焊接电路板,写代码。所以已经是美术专业的同学们要庆幸自己已经比大部分设计师的起点要高了。

那么无论你目前是什么专业,但是后面想从事和设计相关的工作,在大学期间我们可以做一些什么事让自己有更高的起点。

1.1.提前转变思维

高中三年又经历了高考难免会让大部分同学觉得终于解脱了,可以到大学去吃喝玩乐了,从快乐的角度我也会这么选择,毕竟这么多年读书读下来确实很压抑,所以我自己大学四年也几乎都是玩过来的,但是再让我选一次,我一定不这么做。

在大学期间,最重要的事情是什么?我认为是提前找到自己喜欢的事并且付诸实践,思考他将来成为你职业的可能性。可能很多学生目前还不会去考虑职业,只想着怎么修好学分,顺利毕业,但是毕业之后去从事什么工作还没有勇气或者没有头绪去思考。那么即使你不是设计专业的学生,你也可以在大学期间输出设计相关作品。但前提就需要自己花时间去学,相比于科班的同学会更加辛苦一些。

图片

这几年见过的一些大学生也都相当的“卷”(这里的卷不是贬义),很多学生从大二开始就自己做自媒体做设计公众号,然后输出大量的设计作品和观点文章传到设计平台,还没有毕业就已经拿了不少的平台推荐,也正因为这些输出给自己的实习工作拿到了不错的大厂机会。然而目前很多工作5、6年的设计师这几年的作品加起来还没有这些大学生来的多,因为很多设计师都是被动转行,没有设计的初心,工作项目不总结,业余时间不练习,遑论高级或资深?

所以我建议想要从事这个行业的人在大学就要思考清楚,自己是否喜欢做设计。设计这个行业和一般的职能类工作不一样,它的上下限都是很高的,如果你去做后勤职能,就算你不喜欢做,按部就班依然可以完成,可以混口饭吃。但是设计不行,设计师只能上不能下,如果你原地踏步3年必然会被淘汰,你不喜欢它你就不会把时间和精力放在上面去提升,这些个例子在很多咨询我课程的同学中已经屡见不鲜了。

大学也是为了让一个稚气未脱的学生能够转变成独立思考的成年人的一个过程,在这个过程中你会学到很多社会、职业上的规则,比如怎么去运营自己?怎么给自己创造机会?怎么获得更多的资源?通过什么手段渠道提升自己等等。

1.2.学会输出作品

在大学中如何输出作品呢?一般有几种途径:

1.参加各大平台举办的设计比赛,例如站酷

2.跟着自己的导师输出项目作品 

3.参加一些培训课程输出作品 

4.自学输出作品

那么我首先推荐的是通过参加比赛去积累自己的作品。虽然参加比赛不一定能够获奖,但是你可以看到自己的设计作品和其他设计师相比有什么不足,从而优化改进自己的弱项。如果能够获得一些奖项,那么你去实习或者毕业找工作都是很好的加分项,同时也能增加你个人的曝光,很多甲方或者设计团队负责人会从这里来挑选合适设计师进行合作和招聘。

图片

然后有同学也想问,如果想找实习没有真实项目怎么办。大部分真实项目一般都是来自导师的外部项目。运气好的话你的导师给你的项目刚好是和你以后实习岗位相关的,如果没有真实项目也不要太担心。因为除了一些要求特别高的大厂实习岗位,一般企业的实习工作其实只要你输出的作品和手活好就足够了,是不是真实项目没那么重要。

不过话又说回来,这也是让各位同学在高中就好好读书,尽量去一个好的学校读这个设计专业。好的学校有好的老师,有好的老师就有好的资源就有好的项目,就有更多的机会去好的公司实习,就是这么回事。所以如果你是一般大学的设计专业,就得看老师的资源怎么样了。如果没有一些好的项目,也可以选择去上上课,但是这个怎么选择课程水就很深了,这里不多赘述了(你们懂得)。

所以你们想想,当你其他室友在打游戏看剧,而你在做设计练习,别人可能会笑你别那么努力,但是你一定能够先找到工作然后请他们吃个饭。

图片

1.3.找实习工作

如果你能够做好前两点,不夸张的说基本已经超过95%的同龄人了,完美开局账号也已达成了1/3。在大学期间最后一件事那就是找实习工作,这里我要说的是实习尽量去大厂。如果没有这个机会也尽量去找有一定规模的设计团队的企业。

实习的目的不是为了毕业答辩,也不是为了赚点外快,而是为了毕业之后的第一份正式工作做准备,积累真实项目的经验。大厂的实习机会是不简单的,他们主要面向211、985等设计相关专业的本科及以上的学历学员进行实习招生,像交互、用户研究岗位只向某个固定专业的硕士研究生开放。

图片

那如果不是这些高等院校的学生就没有机会了吗?当然不是,设计这个岗位学历是需要的但不是最重要,还是要看设计以及综合能力的,即便你不是211、985,但是你的设计足够优秀,那还是可以获得大厂的青睐的,学历只是一种筛选条件。

如何找到比较好的实习机会,我这里建议大学生们可以多上像站酷一样的设计平台,去结识更多优秀的设计师。为什么要这么做呢?因为大学生往往想投简历都是通过一些招聘网站去投的,这样的效率很低,因为即便你的履历还不错,但是依然要等hr重重筛选过之后才会到设计负责人这边。所以我建议你在设计平台有足够多的积累之后多去结识一些和你方向比较接近的设计师,他们可能就在某个大厂在职。例如你是画插画的,那么你可以关注这个领域的一些站酷推荐设计师,加一加联系方式,现在很多大厂的设计师也背负着招人的指标,实习可能不算正式指标,但他们也会通过社交平台进行发布,这机会不是来了么~

如果有多个实习机会怎么筛选。

1.选择和自己规划方向一致的岗位。大部分企业招聘实习生,是为了解决一些琐碎的工作,而不是为了培养,所以实习生的工作内容是很杂的,如果你本身的方向是做UI/UX的,但是你到一家公司却不停的做平面的工作,这样就会很浪费时间,甚至无效产出。不过有一些大厂其实也会让实习生去接触更多岗位的工作,是为了找到更契合的点,并且让实习生去熟悉不同岗位的工作内容,提高协同效率和个人综合能力。

2.选择有机会留下来的。同样的能力,校招比社招便宜很多并且成本低,很多实习生无法转正是因为企业没有多余的hc,也就是这段时间不招人。不过也要看设计团队的需求,如果只是缺人干一些重复性工作的话,留下的概率比较大。但是如果缺的是一些专业技术人才或者弥补团队能力空缺的话,实习生机会就比较小了。

图片

 

图片

2.1.很肝才会很欧

咱们已经靠自己的努力步入了职场。但是第二阶段我要讲的是第一阶段没有做好的同学们,在这个阶段要做什么。假如你是从三流大学毕业的,但是某些机缘巧合你入职了一家公司,正从事着设计的工作,这个时候怎么样再把自己的账号打造的“完美”。

每个人的机遇不同,但是时间是相同的。有一句话叫做成年人只能被筛选,不能被教育。我觉得有失偏颇,因为只有那些固步自封的成年人才不能被教育,比如我曾经遇到过两个背景比较相似的同学,都是从培训班出来之后才进入职场做设计的,基础可以说几乎没有,只学会了软件。一个同学的基础和天赋好一些,但会有一点优越感,每次作业没有按量完成,给我的理由是这些界面他以前画过不少了,所以就只交了几张。而另一个同学呢除了完成我布置的作业以外自己还去画更多的界面,两个人同一个作业的结果在量上就差了好几倍,最后结果显而易见。

刚进入职场的第一件事就是不停的肝,肝什么?肝到什么程度?我举个例子,例如你现在是一名初级UI设计师,你的工作是绘制UI界面、图标、插画和一些运营海报之类与视觉相关的工作,那么你第一个阶段的目标就是能够连续拿到3个站酷的编辑精选推荐。无论是成套的UI界面也好,图标也好,只要连续拿到3个编辑精选就可以,中间需要连续,比如第一次2火,第二次1火,说明你设计的结果不稳定。同时,时间周期必须在2个月以内,务必利用自己所有娱乐的时间去肝这些练习。当然你除了上传站酷,也可以发给我评估,或者一些行业内优秀的设计师去评估都可以。

图片

再下一个阶段的目标就是拿站酷首推,站酷首推的含金量还是挺高的,拿10个编辑推荐也没有拿1个首推来的高,如果你可以靠设计作品连续拿到3个首推,那么基本拿到了大厂的门票。这个时候你会收到很多猎头以及大厂设计负责人的私信,不要怀疑,朝这个目标去努力就对了。至于怎么拿首推,我以后再做一个分享。

刚进入职场,重心不要太放在项目上,而是不断打磨设计的专业技能,在设计初期最重要的是两件事:1.掌握各种设计技巧与风格 2.提升自己的审美与认知。

2.2最好找个“师父”

如果设计团队里的领导或者组长愿意带你,那么恭喜你你的运气真的很好,因为去外面找个师父是很难的,而且也很贵。有人说怎么拜师还要收费?我看电视上、小说里,不是别人要抢着收徒弟吗,这怎么还要徒弟给钱呢?古时候收徒是觉得这个人根骨不错,以后能有大作为,同时可以传承衣钵弘扬门派。现在徒弟们学会了就自己飞走了,师傅们也没有衣钵要继承,反而师傅们还要养家糊口,所以找个师父变相成为了一种“交易”。

公司里有人带和外面找师父有什么区别?简单说就是利益关系,大家自己揣摩。师父的主要作用是引导,在关键时期和阶段可以给你指明方向,而不是帮你解决疑难杂症。所以一个好师父可以让你少走很多弯路,这是可遇不可求的。

图片

 

图片

3.1.做好职业规划

其实大部分人对职业规划很迷茫,不管是初入职场还是目前已经工作了5、6年的老油条们,职业规划就像是海市蜃楼,看得到摸不到,大概知道什么意思但是自己也不会做。

最近有一位工作了6年的设计师小伙伴遭遇了裁员,说实话6年在任何行业里都已经算是中流砥柱的员工的,对自己的专业、职业能力也有了比较深刻的认知,但是他就非常的焦虑,被辞职后简历和作品都无人问津,这就是很典型的缺少规划所导致的走一步看一步的普遍现象。

职业规划是需要有丰富的职业经历和实践才能在阶段性的生涯节点中做出计划和调整的,如果你没有任何经验是无法去做职业规划的。职业规划最重要的是我们对该职业的定位以及寻找正确的方向。比如你现在是个洗碗工,你想对自己做个职业规划,如果你足够敏感,那么你一定要思考到这个职业的瓶颈和上升通道的阻碍,什么时候会出现自动洗碗机,出现了你如何应对,有什么差异化能力比的过自动洗碗机等等。

图片

3.1.1职业定位

对于UI/UX设计师来说,职业定位很重要,它能够帮你看清楚职业的特质,可以指导你5-10年的职业变化与发展。所以比如你现在是做UI设计的,那么你要思考这几个问题:

1.UI设计的工作内容、作用和职责具体是什么,在不同规模企业中有什么区

2.UI设计师的工作可替代性是否强

3.UI设计岗位在行业中的天花板是怎么样的

4.UI设计师的岗位晋升条件与级别是怎么样的

5.你作为UI设计师的城河是什么

6.该岗位是否有政策风险

7.该岗位与上下游的其他岗位相比价值如何

8.如何量化、突出该岗位的价值

所以如果你把UI设计师换成洗碗工或者其他岗位,再来念一下上面的8条。

3.1.2个人特质

个人与职业需要契合才能走的更远,如果你生性胆小、内向、怯懦,那么就不太适合去做销售,当然如果你有勇气去锻炼、改变自己那也可以,但这很难,所以我们有句话叫做江山易改本性难移。该职业的工作内容、职责对我们来说,如何发挥自己的优势,你个人有什么特质在该职业中能发挥出来,这点很重要。

其实任何特质的个人都可以去从事大部分职业,只是职业的高度有限,例如你本身不善于言谈、辩论,个人内向、社恐,不善于人际关系处理,那么,不进行专门的改变和调整,你的职业生涯和管理岗位或者专家等高级别岗位就无缘了。特质当然也是可以改变的,例如你可以自己上台进行演讲,大量的挑战会逐渐改变你不善于社交的现状。

所以你先要认清自己个人特质的范围,再结合这个职业的定位,我们就可以知道自己应该去改变什么,在该职业中的优劣势是什么。不过我遇到的大部分人都是,我很清楚,但我不改。可见一斑。

3.1.3晋升网格

谢丽尔·桑德伯格在《向前一步》中提到:职业通道不是线性,而是一种网格式的。我理解的大概就是这样。

图片

这种形式的职业通道设定的目标不是具体岗位,而是个人综合素质的能力提升。也就是说我们的目标不是朝着下一个级别去努力,而是在一个序列中前行几步在平行到另一个节点去工作。例如你UI设计可能从初级晋升到资深,但是下一步你可能会去做交互的序列,当你交互也达到资深后你又可以去做产品,但是这整个职业推进的阶段我们都是一个人能力为核心目标去工作,而不是为了某一个岗位更高级别。

图片

这样的职业通道好处就是你的能力会非常的综合,能力会更全面。换句话说,你如果想达到UI设计专家,那么你不能只会画UI界面,你不会交互、用户研究或者更多视觉技能肯定是不行的,但我们最初的目标并不是为了达到专家,而是让自己有更多选择。

3.2.黄金3年

我们需要利用前三年来打造一个完美账号,那如果把整个规划做到5、6年,那就不能算是开局账号了对吧。为什么要规划三年呢?我希望大家在前三年可以找到自己的定位和目标,这三年里面你可以根据自己的能力和需求去寻找不同的平台,看看以三年为期限,自己能不能也达成每年翻倍或者3年番两番的目标。(这里不是鼓励大家盲目的跳槽)

首先我建议大家先利用1年左右的时间去提升设计技法,一项为主多项为辅助,例如你主要修炼UI界面的技法,同时辅助插画、动效和更多表现类技法。为什么只用1年左右呢?

所以这1年其实时间很短,除了自己的工作以外,你需要把时间都拿出来做技法的修炼,是很枯燥并且没有回报的。

图片

设计师要学的更聪明,公司项目不行就要利用业余时间做额外的输出,很多人就指望等下次跳槽的时候拿着现在公司项目的包装放到作品集里去面试,如果你这样做了,那么你开局账号也就废了一半,为什么呢?因为你的第一次跳槽是整个职业生涯中最重要的一次,甚至比第一份工作要重要的多,第一份工作你可能不会选,对这个职业、行业的认知也几乎没有,随机性很强。但是当你要选择第二份工作的时候,你是个成熟的宝宝了,自己也有了初步的规划,你有机会、有能力去选择更优秀的平台去输出、学习。但是前提就是你能够在第一份工作的时间里去积累能量,让自己的能力有一个质的变化,否则第二份工作也几乎和第一份工作差不多。

图片

在第二年的时候,如果你第一年足够努力了,那么你可以找到第二份更好的公司,虽然不一定是大厂,但是至少可以在一个有规模的设计团队里工作这个时候你接触到最多的应该是更多的项目、方法和各种不同的思维。你需要和更多的人打交道,接触更多复杂的业务以及学习更高深的设计技法。那么在第二年的阶段,我希望大家可以去深入项目,去关注项目的本质和目标用户。需求是怎么来的,设计方案为什么这么做,如何培养自己的产品和体验思维。同时,业余时间也依然要进行输出,但是和第一年不同,工作与业余时间的分配要更侧重到工作上。

图片

第三年,要学会自我驱动,关注设计价值的量化以及一些实用的方法,通过项目来将设计方法打磨的更成熟,形成自己的一套理论。同时自己的设计输出也要围绕着这些去做。

以上三年的阶段性成长基本就是这样,但这些都是比较理想化的情况,实际可能需要更长的时间或者更复杂的因素要去考虑。最后,大家觉得这样3年肝出来的账号可以算“完美”吗?

 

原文地址:应谋鬼计(公众号)

作者: 应骏

转载请注明:学UI网》UI/UX设计师如何打造一个完美的开局账号

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

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

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

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

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


如何配色

seo达人


图片

认识色彩饱和度的情绪:

因为不同的配色会带给观者不同的情绪感受,只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉,这种感觉对应什么颜色?只有搞懂了逻辑,在之后的工作中,才能为我们的配色方案指明方向,而不会一开始就被难住。如果我想配一个积极热闹活泼的画面,颜色怎么配呢? 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢?他们都有什么特点,为什么会这样?往下看

 

积极活力:

我们先来看几组图片

用吸管工具提取一下它们的颜色观察

图片

我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。

通过颜色提取,再观察它们选色的位置,可以发现它们的的配色的纯度和饱和度都非常高。

这是为什么呢?接下来我们降低饱和度看看会发生什么:

图片

可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了,整体更趋于平稳和安静。

所以,高饱和度的配色会带给观者活力,动感,热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中,用来渲染or打造年轻、活力、热闹、动感等氛围。

 


温柔平静:

我们再来看一组:

图片

这一类图片就会给人一种文艺小清新的feel,这类配色和热闹、运动的感觉完全不同。

都是低饱和度高明度的颜色。所以,低饱和度的颜色会给人传达平和、放松、舒适的心情。

 

轻松休闲

图片

这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性,不过高,也不会过低。

其实原理就是在取色器里,

图片

我们看同一张图片,给我们的感觉:

图片

高饱和度配色给人感觉冲击力很强,具有活力,对比非常强烈。

中饱和度画面就弱了一级,视觉冲击力没那么强。画面会放松一些,适合传递休闲的感觉。

使用低饱和度的颜色时,我们看到画面更冷静了,有些高级灰的感觉。

在以往的实际工作当中,我也是先用饱和度来定画面的大情绪基调,只有大的感觉对了,后面才不会出大问题。比如像一些战斗、pk、热血类的banner,都用高饱和颜色:

图片

我们可以来吸取他们的颜色看看:

图片

基本都是靠右边的颜色。

而像我在做下面这种类型的banner时,就会使用到中饱和度的颜色,给人一种轻松休闲的感觉:

图片

我们再看下他们的色域:

图片

都是趋于中间的位置。

最后一种低饱和的颜色,像下面这种作品,就有一种文艺、清新的感觉:

图片

再来看看他们的颜色色域

图片

都是比较靠左的颜色。

用饱和度来定画面的大基调,还是非常好用的,可以说是屡试不爽,大家可以好好理解并且用起来!

 

 总结:

图片

高纯度,高饱和度的颜色,会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官,常常应用于一些电商、运动品牌的视觉项目中,用来衬托年轻、活力、热闹、动感等氛围。

图片

中饱和度的颜色饱和度和纯度都适中,显得中正平和,又不会有低饱和度那样的“平缓“,想要视觉年轻一些,但又不想饱和度那么的强烈,可以尝试选择中度的颜色。

图片

低饱和度的颜色,会给人平和,舒适的感受,常常会结合大量无彩色一起使用,让画面传递出简约,自然,小清新文艺的感觉。

“你想给别人传递什么”

配色的方法有很多,搭配在一起千变万化,但都离不开一个点。你想给别人传递什么感觉?是要年轻、活跃,还是安静、唯美?只有明确方向,在想想这个方向上的颜色有什么规律可循?搞清楚目的,我们再去做配色是不是就会轻松很多?

 

原文地址: 菜心设计铺(公众号)

作者:慢热


转载请注明:学UI网》如何配色

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

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

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

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

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


如何有效提升产研效率和质量

seo达人


图片

 

目录

  • 一、什么是系统化解决方案,什么样的团队适合做
  • 二、如何输出、推进设计解决方案
  • 三、解决方案的管理和发展

 

一、什么是系统化解决方案,什么样的团队适合做

1、什么是系统化解决方案?

大多数日常需求大多是从单点出发,当点变多变复杂了,就容易出现上述说到的现状问题。所以解决方案需要基于业务全盘进行设计抽象:从元素——组件——区块——页面——功能流程沉淀设计规则并代码化,来灵活提供拼装N个不同页面的机制,帮助团队更系统化的进行产品设计。从组成内容不难看出,解决方案是需要建立在基础组件基础上,与基础组件、复杂组件、行为模式共同组成设计系统的【功能模式】部分。

图片

图片

 

2、什么样的团队适合做

解决方案是一套相对稳定的设计机制,所以在产品初期或团队建立初期,产品可能经常会调整的情况下,并不适合做。初期可以借助成熟的设计系统来减少投入成本。而到成长期可以根据业务的发展梳理基础元素、组件,选择性的建立部分稳定且利用率高的解决方案,并持续发展,保证解决方案可以起到指导和提效的作用。随着产品或团队逐渐成熟,解决方案也应该随着一起成长,相互影响相互作用。

 

二、如何输出、推进设计解决方案

1、由大到小的进行信息拆解

1)对产品页面(尤其是重点功能)进行盘点,划分页面类型:比如列表、表单、详情、dashboard;

2)对页面中的内容进行区块归类

3)对区块中的信息进行拆解

图片

这三个过程下来,对于问题、规则、规律都会有一定的概念。以一个后台系统为例

1)页面大类主要是:列表、表单、详情。

2)其中列表的内容大致区块分为:页面标题区、列表操作、列表筛选、列表内容,到这个阶段已经可以发现,相同区块位置就存在不稳定,在后台系统中可能影响面不会非常大,但对于内容复杂繁多的工具或C端界面就会容易出现找不到的情况。

3)不同区块的内容拆解,同样也会发现一些细节问题,比如筛选的样式、规则不一致,列表操作的方式、位置、样式、交互不一致等等

图片

 

2、抽象、重组:从布局——区块——组件——设计规则

从第一步全盘的信息拆解和归纳, 已经发现问题, 这一阶段主要2点:第一是如何通过设计规则来避免同样的问题产生,第二是如何通过简单的规则重组减少多人合作记忆复杂度。思路类似于设计一个界面,首先得有一个布局划分,不同的区块要放哪些内容,再到区块里的细节内容规则,从而抽象出由布局到区块的设计规则和可复用的组件。

以前面说的列表为例

1)区块主要是4类,明显的问题是区块位置不稳定,所以在布局结构上,需要定义1-2个稳定的可配置的布局框架来适应不同的内容

图片

2)不同区块梳理组成内容,内容细则

图片

3)标记出可组件化的内容及规则

图片

4)提炼整个过程中通用的设计规则,作为全局的指导。如:国际化、排版规则、超限规则、适配规则、文案规则等等。

图片

通过布局——区块——组件——设计规则,可以灵活的进行页面拼搭

图片

 

3、落地代码库

区分通用层和业务层,通用层落地到通用模板市场,利用脚手架生产新页面。业务层面的落地则是基于通用库封装具备业务属性(如:业务主题、业务数据、业务拓展方案)的业务库来生产新页面。

目前群核设计团队建立了一套平台通用的解决方案,适用于所有中后台产品。业务属性比较强的产品也基于通用解决方案封装业务层面的解决方案,同样的思路也应用在不同体系的工具场景中。整体实践下来,产研效率提升近50%,甚至完全解放了一条业务线的设计资源。产品体验的一致性、上线质量也有明显的提升

图片

 

三、解决方案的管理和发展

解决方案作为设计系统的一部分,与设计系统一同管理,业务设计师使用系统来输出,反馈问题或需求给系统,有系统设计师判断可行性,周期性的管理,及时更新并在内部互通,促进互相成长和发展。

解决方案与设计系统的发展有一点不同的是解决方案有更多业务化的内容,业务团队根据业务迭代维护解决方案。当业务的方案达到通用级别,则列入到通用库。

图片

这些方法和思路也并不限制行业或产品类型,仅是在我们当前服务的产品体系下总结的方法。当然解决方案并不能解决所有问题,只是希望在提供更系统化的设计方法和模式的同时能减少重复工作提升效率,让产研团队有更多的精力和时间投入更有价值的事情。

 

原文链接:酷家乐用户体验设计(公众号)

作者:十元

转载请注明:学UI网》如何有效提升产研效率和质量

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

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

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

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

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


从4个方面完整解析栅格设计

ui设计分享达人

本文主要介绍等距栅格,旨在为有需要的同学解析栅格,从概念、结构和设计上更有效、自信地解决栅格问题,其实主要还是自己对栅格体系的查缺补漏。大家可以对照目录跳着阅读。

事实上,绝大多数的设计师都知道栅格很重要,简单点就是等分运用在内容层。当我们仔细研究栅格相关原理时,只要不嫌麻烦,就会发现在栅格系统下能更快解决设计问题,并让设计更具功能性、逻辑性和视觉美感。

万字干货!从4个方面完整解析栅格设计

栅格是什么

1. 栅格与网格

栅格与网格的本质其实是相同的,实现有组织的设计最简单方法之一就是应用网格系统,约束性地为你提供了一个非常基本的设计框架,这是一种久经考验的技术,最初运用在印刷版式中。网格与栅格英文都以“Grid”来表示。但一般我们更愿意在平面设计中更多的称为 “网格”,会存在上下或倾斜,在网页端或移动端中更多的称为为“栅格”。

常见网格系统有三种:直接分割,等距分割,数学分割。本文主要介绍等距栅格,网页中的网格是指使用垂直和水平(较少)等距辅助线对布局进行的划分,它形成了用户界面的基本结构或框架。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

平面设计一般用到的是固定的纸张规格,宽度和高度都是固定的,网格会存在上下或倾斜的视图;在界面中栅格宽度跟随不同设备,高度由内容多少来决定,是上下视图。

万字干货!从4个方面完整解析栅格设计

界面栅格系统是从平面网格系统中发展而来,以依据一定的规律、合理设置基准线来指导和规范界面中的如文本、图像、按钮和其他元素,保证页面的每个区域能够稳健地排布起来。栅格系统的使用,让界面信息呈现更美观易读、更具可用性,对于前端来说,网页也将更加灵活与规范。

2. 栅格的设计哲学

将栅格视为一种秩序系统来进行使用,是设计师某种特定的精神和态度的表达,它体现了设计师是以一种结构性、预见性的方式来进行构思和设计。同时,这也是一种职业信仰的体现,设计作品应该是易懂的、客观的、功能性的和具有数学逻辑美感的。

用结构化、系统化的栅格手段进行设计,对设计是具有极为重要的意义的。使用栅格系统就意味着设计遵循普遍与合理。系统化和清晰化、集中精力看透关键问题、用客观取代主观、理性地去看待设计过程。

3. 栅格的价值

产品设计中,参与设计的人员越多,用户设备越多,屏幕越多,设计师就越需创建一套栅格系统来组织内容,使设计内容与细节能适应更多场景。合理的栅格系统可以通过调整布局满足产品各设备尺寸的需求。

有序可依,提升协同效率

对于设计师与团队:栅格系统定义了一套底层的、统一的测量单位,当设计团队内对此达成共识时,可以避免因屏幕适配、比例换算产生的像素偏移,适配多种屏幕,提升精致细腻程度,同时保证了设计稿件中元素属性的一致性和规范化,并有效降低设计师的决策成本,提高不同设计师之间的协同效率。同时避免了设计师与前端工程师在细节上的反复沟通确认,提升了整个开发效率。

布局规律,减少认知成本

对于用户:运用网格系统能够让设计更有秩序和节奏感,规避了不同设计师理解不同造成产出差异的问题,如页面节奏,空白等。在保持与原先展示内容基本一致的情况下,页面信息结构更加清晰,提高阅读效率,减少认知成本,提供一致性体验。

4. 栅格的的组成

栅格使用列在水平方向上拆分页面,以有组织的方式对元素进行布局,并模块化设计多个页面和组件。同时栅格还定义了一组固定的测量单位,指示每个设计元素遵守的尺寸,间距和对齐方式。

最小单元

网格的基本构成就是单元格,由格子组成网。间距都可以用最小单元来增加或者减小,最小单元格是所有设计元素(从排版到列,框,图标和插图)的几何基础,它为所有创造性的决策提供了结构和指导。所以栅格系统的重要一步就是需要先定义好栅格的原子单元大小,我们以最小单元去定义网格系统。

最小单位推荐 8px

目前 web 端最普适易用最小单位的是 8px,我们利用 8px 建立网格,8 的倍数组成了列、行、框的尺寸以及它们的边距和填充,使用 8 的倍数来定义模块的间距与元素的尺寸。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

当我们熟悉最小的栅格单位 8px 以后,能有力的减少决策时间。整个设计的元素大小,尤其是间距可以快捷的在脑海中反应出来,8、16、24、32、40、48、56、64、72、80、88、96、192 等,这里都是 8 的倍数或能被 8 整除。让设计师带着工程实现的思维去考虑页面布局,设计侧和工程侧对页面一致性的解读,能够有效降低设计到实现的转化成本,提高开发效率。也要注意间距不能无脑套 8 的倍数,优先用 8,当跨度太大也可以使用 4 和 12。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

那为什么不选择 4,6 或 10?

注意的是最小单位应由实际工作来决定,没有绝对的最小单位数值。在适用性方面,4、6、8、10 这四个数值都基本可以满足。

当使用 4px 时,页面就会被分割的非常细碎,当 8 不够用的时候,就要使用 4 了。

最小单元格的数值选择需要从两方面考虑:

  • 最小单位在具体使用时是否具有一定的灵活性
  • 最小单位能否被大多数屏幕的宽度整除,即广泛的适用性

屏幕尺寸和分辨率种类有增无减。使得设计师对 “维护适配性” 的难度越来越大,设计稿导出会有@0.5、@0.75、@1、@1.5、@2、@3 倍多种需求,在 1@倍设计稿,奇数(比如 5px)就会出现半像素偏移。而 6 除以 2 得 3,3 就是奇数了,10 除以 2 的 5,6 和 10 不能被 2 除尽。

万字干货!从4个方面完整解析栅格设计

使用偶数 8px 可以轻松一致地缩放各种倍数而不失真,大多数流行的屏幕尺寸都可以被 8 整除,足够普适,以 8px 为增量进行缩放可提供大量选项,所以推荐 8px。

万字干货!从4个方面完整解析栅格设计

列 + 列间距 + 大边距

栅格系统由 3 个部分组成:列、列间距、左右大边距。栅格系统是由列和列间距交替分布形成的,列是栅格的数量单位,虚拟的垂直块,用于对齐内容,我们以百分比或固定值定义列宽。竖直方向根据页面内容是可以无限延伸,所以栅格系统在竖直方向的栅格可以不体现出来,设计时只要在水平方向保持规律变化就可以了。

通常设定栅格数量说的就是列的数量,如 12 栅格就有 12 列、24 栅格就有 24 个列。列间距把控页面留白,数值越大,页面留白越多,视觉效果越松散;反之,页面越紧凑,画片分割的越碎。

万字干货!从4个方面完整解析栅格设计

大边距就是设计内容区以外的空间。我们在设计中一般将大边距宽度定义为固定值,该值决定每个设计的最小呼吸空间,灵活的边距占据了由列,列间距组成的网格后的剩余空间。左右大边距是计算在栅格的总宽之内的,删格系统的宽度就是列、列边距、大边距之和。

也有弹性大边距,会根据不同的屏幕尺寸而变化,就是页面边距可以随着屏幕尺寸的变化而变化。页面边距在移动设备上通常是 12px 到 40px 之间,在平板设备和桌面设备页面边距变化就相对多了。

容器

我们按照页面结构从组件 – 容器 – 区块 – 页面 – 场景进行依次拼装成最终形成产品设计方案。容器集合了下级组件,也可以是多个复杂元素的集合,文字、图片、按钮。如登录区块是由多个标签、输入框、按钮组成。容器是成组的设计元素,形成了独立的内容或功能盒子。区块嵌套容器,由区块组成了页面内容。

栅格规范的是容器间比例,而非具体宽度。容器大小收到栅格系统的限制,栅格系统可以根据需求被 2 等分、3 等分、4 等分、6 等分、12 等分,具体采用哪种比例的组合需要根据需求来定。栅格系统 / 设备分辨率大小在变换的同时会带动区块大小的变化,从而使容器发生变化,如元素尺寸变化,文字换行等。

如下图,共有 32 个容器。对于紧密相关的内容,请考虑组成区块。页面被分割的越碎时,设计中越难把控。

万字干货!从4个方面完整解析栅格设计

5. 拓展知识

960 栅格系统

这是一个比较单纯的框架。从 1990 年代后期开始就基于表格的布局开始使用的栅格系统 960 Grid System。与早期计算机相比,虽然今天的屏幕分辨率达到了很高的尺寸,但使用 960 像素的宽度依旧可以确保在许多屏幕上能够正确显示。

960 Grid System,是由 Nathan Smith 开发的 CSS 框架,因为早期的电脑荧幕宽度约为 1024,扣除浏览器的卷轴及边框,为 960px,960 Grid System 有 12 栏位、16 栏位版本,960 正是意味着,12 能被 3、4、6 整除,能建立 3 栏、4 栏、6 栏的版面配置,网页的使用也比较灵活。网页版面可以轻松配置,合并,也不会有畸零数,非常适合排版。

960 Grid System 是使用固定宽度 960px,置中对齐画面的方式呈现在网页上,去除左右两边各 10px 的边距空间,留下中间 940 px 的设计内容区,以 20px 作为槽。

而超出 960 的部分的设计元素,就使用定宽设计。

Bootstrap 网页框架

今天市面上看见的响应式网站,多数使用了一些开源的代码或者框架。而应用最广泛的,就数 Bootstrap 了。

Bootstrap 是 Twitter 推出的一套强大网页框架,是全球最受欢迎的前端开源工具库,它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件,也提供了快速建立响应式网页的功能。已经更新到 V5.0.1 版本了 Bootstrap 中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。市面上很多前端框架会对 Bootstrap 进行补充或基于 Bootstrap 开发。

Bootstrap 提供的栅格系统,也是一样将内容区分 12 等分。

万字干货!从4个方面完整解析栅格设计

它将系统分为 12 列,当然也可以通过变量来改变列数和列宽,水槽宽度,屏幕浮动宽度;其实设置屏幕浮动宽度就是我们看到的屏幕自适应,就是根据屏幕宽度来选择显示参数。Bootstrap 中的栅格流只能作为大的布局定义,那么针对最小单位是该用 8、10、15 还是多少也是需要根据需求去做分析。

12 列结构可以进一步分解 4 等分,3 等分大小的模块。

如何搭建栅格

1. 确定屏幕宽度

栅格设计的第一步就是创建画布,对于不同设计的项目,宽度设定是不同的。需要注意第一屏重点内容全部显示,浏览器和 Windows 底栏都会占用屏幕的高度空间,第一屏缩减默认高度 -100px (可调整)。

屏幕宽度

设计师有存在从最大的屏幕 1920 着手设计界面的习惯,最后考虑最小的屏幕上的显示效果。这意味着绝大多数的设计都是从大尺寸开始设计的,通常大尺寸的内容和功能更全面。从小往大适配容易,但是从大往小适配问题就特别多。以 1920px 宽设计的界面在面向小尺寸屏幕的时候多数都很不友好,甚至到了部分页面无法正常预览和使用的地步。所以优先设计最小适配屏幕,然后给出适配方案进行调试。

万字干货!从4个方面完整解析栅格设计

C 端设计的屏幕宽度是找全网平均数值,而 B 端的目标受众更细分、更具体。类似政府、学校、企业等等,计算机都是统一购买的,这种情况并不需要你去统计全网和其它渠道数据,只要了解具体受众使用什么分辨率即可,以它作为主要输出的画布宽度。如果 B 端设计受众屏幕宽度实在不清楚,可以参考蚂蚁中台设计团队统一的画板尺寸为 1440。

是否定宽(版心)

如果是定宽的设计,便不需要考虑自适应与响应式适配屏幕宽度。版心是源用平面上的说法。根据实际情况,定宽设计如果以 1024 的屏幕为内容主体,1366、1440、1536、1600、1920 的屏幕适配 1024 的内容主体,多余的空间为左右大边距,这种方式设计上容易输出,适配方式更加高效,随之就是可用性较低,对于使用高分辨的用户来说,布局会留下很大的空白。如知乎:

万字干货!从4个方面完整解析栅格设计

还记得第一次做网页练习的时候我使用的定宽为 1000px。

2. 确定栅格区域

屏幕终端的宽度不等于我们要栅格的宽度。我们在确定栅格区域设计前,先来熟悉一下 web 产品界面的基础模块和分层逻辑,以常见的 B 端布局为例。

根据模块自身属性及功能定义,常见的模块有九类,分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。

万字干货!从4个方面完整解析栅格设计

全局控制层为常置的功能底层,是提供稳定性和可预测性、必不可少的层级,具体有顶部导航模块、左侧导航模块等;内容层可分为常置展示层,具体有主内容模块、左右内容模块或上下模块等;临时层为动态出现的功能顶层,始终叠加在基础层及内容层上方,是链接上下体验流程的模块,具体有抽屉模块、弹窗浮层模块。

万字干货!从4个方面完整解析栅格设计

梳理了相关模块所组合的栅格布局。Web 端有三种基础布局和多种扩展布局。一般来说,栅格区域就是指内容层。前面我们提到了定宽(版心),版心和内容层还是有差别的,版心+两端页边距=内容区。

万字干货!从4个方面完整解析栅格设计

那其他模块能用栅格吗?当然可以,有需要就用,不过需要注意使用效率。

3. 确定列数、列间距、大边距

首先,创建一个低保真或高保真的原型,设计一些基本元素和交互流程之后,考虑最优的列数。列间距的区域不可以放置内容,我们一般会给列间距设定一个定值来确定列宽大小,这个列间距也是模块间的间距。

栅格数量

常见的栅格系统通常被划分为 12 栅格或 24 栅格。划分的格子越多,承载的内容越精细。也有较少项目会根据实际情况也会划分成 16 栅格、20 栅格,移动设备屏幕尺寸小于 PC 屏幕,想要有更灵活发挥空间,就必须采用列宽较小的栅格。

12 栅格

12 栅格系统在流行的前端开发开源工具库 Bootstrap 与 Foundation 中广泛使用,一些商业网站、门户网站通常划分成 12 栅格,适用于业务信息分组较少,单个容器内信息体积较大的中后台页面设计。根据业务场景可以很容易的将 12 栅格区域划分成 2 等分、3 等分、4 等分、6 等分,以及根据等分容器组合的多种不等分场景,组合也是栅格作为一个界面辅助系统非常方便的原因。

万字干货!从4个方面完整解析栅格设计

24 栅格

24 栅格系统适用于业务信息量大、信息分组较多、单个容器内信息体积较小,场景复杂的页面设计。相对 12 栅格系统,24 栅格系统变化更加灵活,更适合内容比较多样复杂的场景。我们常见的 B 端 web 设计一般选用 24 栅格,栅格系统大小就是 24 列+23 列间距+2 大边距。

Ant 采用了 24 列、23 列间隔的栅格系统。其中间隔数值是固定的,内容区域减去 23 列间隔后,剩下的部分等分成 24 列。

万字干货!从4个方面完整解析栅格设计

注意:

其内容模块必须位于若干列上,可以任意分割,比如 6×2,3×4,4×3,下面是不同分割方式设计的信息模块。

只要父级模块对齐栅格,子级元素可以不对齐列,同时子模块也可以有自己的栅格系统。

万字干货!从4个方面完整解析栅格设计

列宽无法永远精准整除,而相差的像素值往往是无法被用户以肉眼察觉的,栅格不是为了每一像素的精确,而是为了保证浏览效果的秩序、协调与统一。

确定列间距与大边距

列间距与大边距选择 8(最小单位)的倍数,网格将更加一致。可以将间距值把常用的数值整理成号码表,间距复用化:小= 8px,中= 16px,大= 24px,x 大= 32px 等等…这样一来,保持一致性更加容易,更加合乎逻辑,并且开发人员也会高兴,因为他们可以根据屏幕元素之间的关系安全地假定间距。

注意:

列间距的数值越大,页面留白间隙越多

列间距的区域不可以放置内容模块,内容区从列间距开始到列间距结束

万字干货!从4个方面完整解析栅格设计

非常规设计时不需要栅格系统,根据设计场景可自定义。

栅格与适配

栅格系统适配过程中需要考虑三个原则:等比缩放、弹性控件、文字流自适应。随着设备多样化,通用的适配方式是自适应与响应式布局,随之就是栅格系统的变化。我们先聊下断点。

断点,用浏览器打开一个网站,检查元素,右上角会显示视窗当前的分辨率,慢慢缩小视窗的宽度,找到页面布局的变化点,就是我们上面说到的断点或者次断点。

断点设计主要考虑基础的 3 端,一般大于等于 1440 为 web 布局,1439-500 为平板布局,小于 500 为手机布局。每经过一个断点,可以改变栅格大小(比如 16 栅格改为 8 栅格),固定改为拉伸,样式(文字、颜色)。制作精良的话可以设计多个断点,如 480、600、840、960、1280、1440 和 1600px。

1. 栅格的行为

固定栅格

固定网格的最大特征是在网页收缩过程中,经过一个断点就会自动减少最边缘元素,其他元素基本保持不变。通过在嵌入式块中排列图块,在工具栏中放置图标等,可以用固定的框来形成网格。栅格列数随着浏览器宽度的减少而减少,边缘图块自动换行,或者有时会溢出滚动条。

首先通过最小单位选择一个基本尺寸,然后以基本尺寸的倍数构建每个盒子框,就会出现一个个网格。

万字干货!从4个方面完整解析栅格设计

流动栅格

流动栅格是元素随着设备尺寸变化而比例变化,当到屏幕大小变化的断点时,列可以增长或收缩以适应可用空间,边缘元素被减掉。但并不是每一个断点都需要去减少元素,可以适当的按照元素的比例进行大小调整。流动布局兼容性高,能更好的适配多分辨率。

万字干货!从4个方面完整解析栅格设计

流体栅格非常适合编辑内容,仪表板、图像、视频、数据可视化等。对用户而言,缩放事物的大小比缩放可见事物的数量更为有用。

在每个断点处,列数是固定的,在断点范围之间,实际列宽是栅格区域百分比缩放,而不是最小单位倍数。内容区域是动态运动,就需要运用栅格系统。

混合栅格

内容区域流动和固定栅格组合也是常见的做法,混合栅格既有流动的宽度,也有固定宽度。混合布局对用户十分友好,如下图左侧是固定栅格,右侧是流动栅格。

万字干货!从4个方面完整解析栅格设计

2. 响应式与自适应

在初期,网页使用的是绝对静态布局为主。静态布局中如果用户的屏幕大于或小于设计预期,结果会出现的滚动条,过长的行以及对空间的不良使用。后随技术发展,为了兼容各种浏览器,出现了针对各设备适配的解决方案,自适应布局。

后来移动互联网爆发,html5 标准发布,与移动设备、平板电脑和智能设备(游戏机)等需要提供了更丰富的功能,用户希望能够使用各种设备访问任何网站,结合自适应的思想,出现了响应式布局的概念——2010 年由 Ethan Marcotte 提出。

自适应

自适应布局是网页内容根据设备的不同而进行适应,来判断当前访问的设备是 PC 端、平板还是手机,为不同终端分别提供独立的前端代码。自适应设计可以更好地适应用户在现场的各种需求,缺点是成本较高。

万字干货!从4个方面完整解析栅格设计

自适应设计即创建多个布局,每个静态布局对应一个屏幕分辨率范围。比如你对自适应网站的窗口大小进行调整,每经过一个断点就可以得到不同的布局(页面元素位置发生改变),但在每个布局中,没有经过断点时页面元素不随窗口大小的调整发生变化。每经过一个断点,布局和位置是可改变的,也有特殊,如两个断点间等比缩放,可以保留用户在多个设备间的操作习惯。

万字干货!从4个方面完整解析栅格设计万字干货!从4个方面完整解析栅格设计

自适应设计,变化没必要过于复杂,保留必要的功能入口,不必要的可以隐藏给不同设备切换不同的样式,在同一设备下(断点范围下)实际还是固定布局。

响应式

响应式是通过一套代码,无缝匹配符合电脑、平板、手机效果的前端技术,开发成本更低,高适应性;设计成本更低,一套设计应对多端,最大化提升用户的操作体验;响应式不提供自适应性那么多的控制,多端同步生效,减少运营成本,保障业务效率。

万字干货!从4个方面完整解析栅格设计

一个典型的响应式布局,通过改变浏览器的宽度就会发生响应变化,而不是像自适应经过设备断点时内容才发生改变。响应式布局中会出现诸多差异较小的状态,同样让响应式布局更加的难以测试和预测。

万字干货!从4个方面完整解析栅格设计

响应式也存在断点,是网页在收缩的过程中的最小范围。当网页到达这个范围以后,网页内部的元素就要进行相应的变化,用来适应屏幕的变化。

万字干货!从4个方面完整解析栅格设计

响应式设计的前提有两点:1,页面布局具有规律性,元素宽高可用百分比代替固定数值;2,网页图片必须是可伸缩的。这正是栅格系统本身就具有的典型特点,所以利用栅格系统进行响应式是顺理成章和高效快捷。

响应式网页测试工具:我有反应吗?和 designmodo

万字干货!从4个方面完整解析栅格设计

总结一下:

自适应布局是内容根据终端不同进行适应,响应式布局是网页的布局针对屏幕大小进行响应。响应式布局等于流动栅格,而自适应布局使用固定断点来进行多个布局。 自适应布局给了我们更多设计的空间,因为只用考虑几种不同的状态;而在响应式布局中就会出现上百种不同的状态,虽然绝大部分差异较小。

自适应与响应式如何选择用哪个呢?

页面功能不多,用户交互少,不需要经常升级,响应式设计从运营的难易和维护的便利性考虑会更好,如逻辑简单并且内容大致相同的官网和展示页面;页面个性化多功能方面考虑,自适应设计更合适,用户体验更好,如功能复杂、用户交互频繁的网站。

全平台适配

除此之外,随着移动设备的生产力逐步加强,手机、折叠屏、平板、电脑之间的界限变得模糊,端与端的差距也在缩小。苹果推出 iPadOS,让移动端的便捷和桌面端的超强生产力进一步融合。而从应用的开发而言 Electron、Flutter 等跨系统框架层出不穷,开发者也在不断尝试在不同平台上用一套代码提供同一套服务,减少系统隔阂所带来的维护成本。

尽管全平台系统设计的概念还不成熟,但我们可以看到打造流畅的全平台体验的必要性。这也许会成为下一代应用的基础规则,正如当初的响应式设计。

设计工具中的栅格

1. Figma

figma 有三种不同形式的栅格可供选择:统一网格,列和行。支持单个画板栅格系统的使用和隐藏。

嵌套栅格

与其他工具不同,figma 不会在内容层只局限一个栅格,可以建立多层栅格嵌套。可以利用这一点,在盒子内部设计时,再用栅格用作视觉辅助,可以通过颜色和不透明度来区分不同栅格。

figma 可以通过相对调整画布大小,同步拉伸栅格系统。

万字干货!从4个方面完整解析栅格设计

内容自适应

当我们拖动窗口的宽度,模块会发生自动布局。定义下级元素针对父模块的响应,做到模块变化的同时下级元素的显示也是合理的。比如相对内容左右间距一致、对齐方向一致、尺寸固定等设置。这就是 Sketch/Figma/XD 中的自适应功能。

万字干货!从4个方面完整解析栅格设计

其实在设计稿时,使用自适应功能频率不高,不是每个区块都需要自适应的。

固定和拉伸混合使用,在内容自适应框架中,可以将一些元素设置为固定,将一些元素设置为填充容器并与固定和拉伸形式相结合使用。

万字干货!从4个方面完整解析栅格设计

同时可以修改图层透明度为 0,相当于占位,可以占位搭配组件。

共享样式

在创建栅格系统时,可能需要对不同设备尺寸或其他常见用例上的布局进行不同的更改。为了更轻松地将这些栅格应用于框架,文件和项目,可以将其中的几个合并为一个栅格样式(相当于组件),然后可以从团队库中共享该样式或者自己复用,简单快捷。

万字干货!从4个方面完整解析栅格设计

2. Sketch

同样有三种栅格可供选择,栅格系统统一使用和隐藏。Sketch 里自适应功能不能隐藏某对象占位,而 figma 可以,当位置隐藏后,布局就会进行调整。

sketch 使用栅格设计需先设置一个总宽度尺寸,点击左下角默认设置还可以将自定义的栅格系统设置为默认,方便以后重复调用,但 sketch 只能储存一组栅格系统的数值。

万字干货!从4个方面完整解析栅格设计

sketch 怎么以最小单位进行移动?

可以在首选项设置最小单位如 8px,按 shift+方向键就能以最小单位进行调整。

万字干货!从4个方面完整解析栅格设计

http://grid.guide/

这个网站,输入版心和分割数,自动生成栅格方案。

结束语

在实际设计过程中,栅格的使用会伴随着限制条件。我们应当明白,栅格只是为设计师提供便捷的辅助工具,而不是限制设计师的工具。

不过从栅格这个工具来说,完全的自由反而是降低效率。如果能够给出一定的限制,反而会使得我们的设计效率提升。我们不必关心每个区域盒子具体值是多少,只需保证它们存在正确的关系。栅格系统是对界面元素进行横向排布时需要遵循的模式,不适用于类似图标与文字间隔的小型元素安排,而是用于大型区块间距的安排。

文章来源:优设  作者:小龙哈

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



六个方法解决用户决策疲劳

ui设计分享达人

决策疲劳在现今互联网深度发展的时代似乎非常常见,面对眼花缭乱的APP页面,我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象,给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述,推荐对此感兴趣的伙伴阅读。


决策疲劳是用户体验圈一个路人皆知的词汇,用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明,它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题,是一件非公众都能做好的少数事件。

在产品设计中,我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务,能够越顺利、越直接。个人在特定时期内被要求做出的决定越多,即使这些决定是微不足道的(比如选择播放那个节目),他们的决策质量也会越低。

当你感到疲倦时,这会显著地影响你的决策能力,而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣,因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。

本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。

一、让用户少做选择

作为用户,每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝,降低我们的满意度,并可能导致我们对体验感到沮丧而不是变得更好。

当给用户太多选择时,他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能,但是当界面因为选择过多而过于复杂时,它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明,当我们有太多选择时,往往会导致决策失误和情绪沮丧。

六个方法解决用户决策疲劳

来自哈佛商业评论的模型

在追求最大化满足商业化可能的产品设计中,老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型,横轴为功能数量,三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化,公司能够根据他们想要的结果找到适合他们的功能数量最佳点。

研究表明,人们更有可能购买提供了有限数量的商品。在这种情况下,他们也会对自己的选择更满意,而不是从购买前的犹豫到购买后的忐忑,从而产生更大的满足感。

关键是很多产品为用户创造了太多的选择,这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品,而不是按照预期进行实际购买。

1. 扯淡的神奇数字7

在用户体验世界中,关于使用多少次点击以及人脑一次可以接收多少信息,存在许多相关的说法。但最重要的是,产品设计师需要在简单性和功能性之间取得平衡,这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。

最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。

这是个谬误,虽然我在某种程度上同意这种观点,因为坚持这样的限制似乎更自然,但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据,而不是早年的4.0英寸的小屏手机,用户可以轻松地一次看到他们的所有选项,并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。

同时现在也有一些研究表明,人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好,因为用户不必花时间深入查找相关信息。

比如主页上最多包含 几十个类别链接的淘宝列表)比仅提供有限选项(如没有子类别的类别)的网站更有用。但这里要强调的是需要考虑实际的用户场景,电商平台的属性导致了要为消费者提供更多的选择,而类似工具产品,尤其是垂直工具产品,在设计选项数量时一定要谨慎。

2. 击规则站不住脚

还有另一个站不住脚的理论:从业者普遍接受但完全不靠谱的“三击规则”,或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响,比方说付费流程,缺少必要的流程硬按点击次数把流程缩短,导致用户错误付费而产生的用户体验变差几乎是不可逆的。

3. 视觉布局用点心

比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论,信息线索的持续感知对你的用户体验很重要。

人们在日常生活中要做出很多选择,而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时,重要的是信息组织方式。

你可以去尝试减少选择的数量,但最重要的是你的信息结构。如果你的信息没有组织好,或者给到用户的决策过程中涉及的步骤过多,用户就不会费心去寻找他们想要的东西,因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。

为了在产品上让用户的决策中有更好的转化,我建议去掉任何不必要的东西,例如无关的标签和链接,这些标签和链接会分散用户的注意力,使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项,平衡简单性和功能性的关系。

二、允许用户后悔

现实中我们都会犯错。它可能发生在我们所有人身上!但是,如果用户犯了错误,优秀的产品设计师应该怎么做?

答案是:让用户轻松回到起点。

通过让用户走上正轨,你更有可能留住他们作为用户,而不是导致他们离开你的网站或应用程序。

下面是我在设计用户流程时的一些最佳实践:

  • 尽可能少制造意外情况;
  • 错误问题尽可能明晰,让用户更容易发现以修复它们并继续用户操作;
  • 在操作错误破坏用户体验之前通过提供保存数据选项来主动防止错误的数据输入;
  • 不要只是弹出一条覆盖整个页面的消息,而是向他们展示哪些字段是错误的;
  • 避免在你的消息中使用苛刻的措辞,因为文案可能会赶走甚至激怒某些用户。

三、视觉提示有助于导航

导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统,对用户体验至关重要。

导航的设计应该直观且易于使用。用户应该始终知道它在哪里,它的意义,以及点击它会去哪。

一个好方法是通过颜色为用户对操作区域进行导航:比如当进行切换、更改等动作时配备不同的颜色,并用文案清楚地说明每个菜单项下是什么功能。

这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。

  • 使扫描和阅读页面更容易;
  • 改善视觉层次;
  • 加强页面导航;
  • 重要位置的鲜艳颜色可以提高转化。

一个例子是 Instapage 登陆页面。如果标题没有箭头,很难看出下方有更多内容:

六个方法解决用户决策疲劳

四、利用习惯动作减少学习成本

在设计新界面时,必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么?

下面是三个常见的 设计惯例,这些惯例可以让你的用户在与产品内交互时感觉更熟悉,这有助于减少他们的学习成本,并让他们更快地开始学习你试图传达给他们的任何内容。

1. 颜色不要缭乱

简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引,因此如果你在整个界面中使用简洁的配色方案,人们会更容易找到自己想要的信息而不是被颜色乱神。

2. 把设计风格重复使用

不仅要遵循常见的用户体验规则,而且要在一个产品里不停的重复,不要轻易作新颖的尝试,前辈们大多已经帮你尝试过了。

这样的意义在于:

人们使用你的产品感觉更轻松,因为这个产品没什么复杂的新东西(降低了学习成本)。

一个例子是,目前无论你在那个浏览器查看哪个页面,你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知,因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。

3. 使用生活中的事物表示符号,比如用于删除文件的垃圾桶。

图标是在你在表示操作对象是什么的好方法,它们易于理解且具有普遍可识别性,因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。

图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。

五、别自嗨

我们都知道应该以用户为中心进行设计,而不是你自己,但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时,其实往往会按照自己的喜好走偏。

一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。

或者某些设计师会讲角色分类,然后全情单线程的专注一个项目,以牺牲时间和效率为代价确保航道的正向。

以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时,请确保在进行原型设计之前先和你的用户聊聊。

可以尝试提出以下问题:

  • “你最喜欢我们上一款产品的哪一点?”
  • “如果我们更改 x 功能,你会有何感受?”

往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。

你可以使用多种用户体验研究方法来确保你在设计时考虑到用户:

  1.  做一定的市场调查;
  2.  创建角色故事;
  3.  使用线框或原型快速获得反馈;
  4.  定期和客户服务团队交流。

六、简约至上

不要提供太多的选项或功能让用户不知所措。

每个产品都有自己为用户解决的核心问题,用户希望在产品中获得帮助并快速做出决定。问题是,很多产品经常沉迷于他们产品功能以及他可以为用户实现什么,忘记了如果有太多选项和功能,新用户可能会感到不知所措。

如果你负责一个产品,可以考虑你的用户在面临过多选择或功能时的感受,并尽量优先突出他们最需要的选项或功能。

例如,在电子商务网站中,用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质,如果预先只有三四个选择,可能会带来更好的体验。也可以考虑隐藏一些选项,方法是使用视觉提示,例如类似“探索更多”文字的按钮。

确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状,首先呈现基本信息,不太重要的信息尽量放在不显眼的地方或者想办法隐藏。

七、结论

这里提供了六种方法,帮助你减少产品中的决策疲劳,从而使用户更有可能走上正轨,解决他们的问题,并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考,才能更好的服务于用户


文章来源:人人都是产品经理   作者:公众号:真的不一定


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



B端设计中台落地、响应式界面设计

ui设计分享达人


以下内容主要分成两大部分,第一是聊聊响应式和自适应的区别和原理,以及我们应该如何去设计响应式界面;第二部分也是比较关键的B端系统设计的核心,B端设计中台完整构建过程的具体步骤,以及应用到的格式塔原则,和命名的一些注意事项,内容较多,大家可以根据上述目录来选择性阅读。


1.1多端兼容设计的发展史



简单概括多端兼容设计的发展史,最早是桌面端,比如桌面的一些应用;后来出现了移动端,针对移动端大家用的都是WAP,指一种无线应用协议,大家在用手机浏览一些网站,会把网站翻译成一种低流量的浏览方式,比如去掉图片大图,只剩全文字,因为当时网络不好,早在3G和2G时代移动端用的都是WAP;在2008年之后出现了响应式,也就是做一套代码可以兼容三端(网页、移动端、iPad)设备,在发展的同时也遇到很多问题,但响应式同时也遇到了很多问题;于是又出现了自适应,指不同的设备打开不同的页面进行自适应,自适应能增加效率,但需要增加工作量;2017年以后直到现在看到最常用的就是渐进式,类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。


1.2 响应式布局的种类



1.2.1 响应式布局RWD


可以理解成用户在手机、电脑、ipad打开同一个界面,所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。


1.2.2 自适应布局AWD


自动布局算是响应式的一种,但平时看到很多响应式其实并不是真正的响应式,而是自动布局,因为界面在不同的设备用的是不同的模板,当我们用电脑打开呈现的是一套模板,而用手机打开则是另外一套模板,这种看起来是响应式,其实不是。因为当我在开发者模式下调节不同设备展示时,就会发现,其实是换了一个网址来根据不同的设备进行自适应的,而真正的响应式是不需要刷新的,在拖小窗口的时候就会变成手机端的那个样子。


1.2.3 渐进式布局PWD


渐进式布局是近几年比较新起的,这种布局设计,很像一个网站或者本身它就是一个网站,但用起来就像一个APP一样,看到这里大家很容易相到,小程序就是渐进式布局得一种,小程序明显是一个网页,但通过技术的一些嵌入和一些接口或者缓存的方式的操作,让用户在使用的时候感觉小程序就是一个APP,但核心技术还是web网页。



1.3 如何应用设计响应式


响应式的原理是通过定位的方式来做响应式的各种开发,需要在页面中至少标出这十个点:中心点,上下左右点,上左上右点和下左下右点,这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解,其实结合figma来看,这些点对应的就是这样(如下图),在figma中的布局点。设计师通过调节图形的布局点,可以做到在页面拉伸时,让想动的元素跟随变化,不动的元素静止不动,这就是响应式的原理。换言之,我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。



1.4 响应式和自适应的区别


01、响应式


如下图是响应式的优点和缺点。响应式其实就是只开发一套页面,这个页面兼容三端。虽然做了响应式,但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面,然后全部做好对应的自动布局,再进行页面拉伸,内容随之会发生变化,比如当拉伸到1024*768的时候,也就是iPad的尺寸,就会发现局部在设计上有些不合实际情况,这时就需要设计师在对应尺寸的设计稿上进行内容上的微调,比如按钮不可能那么长,就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时,然后再酌情针对网页尺寸的呈现样式,局部进行尺寸的调整,比如文字和按钮被拉伸到网页版都需要居中对齐,电脑端的样式就需要设计师重新排版了。


通常在B端系统,设计师需要做响应式设计时,往往是从大往小做设计,这也取决于这个B端产品是否需要进行移动端的设计,《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端,就需要我们将网页改成移动端设计,比如B端的侧边栏导航在拉伸到移动端时,就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中,做三端拉伸时候,可以用断点插件来进行演示,通过对断点插件的设置,就可以完美的看到页面在三端不同情况的适配呈现,断点插件用来做演示非常方便。



02、自适应


如下图是自适应的优点和缺点,其实就是一个项目开发三个页面,分别做定制设计,网页端、移动端和Ipad端。



2.1必读前言


我们都知道2021年也就是今年是我国新基建的元年,十四五规划2035远景目标里提到重点发展传统企业数字化转型,尤其是今年我们设计师更能深刻体会,C端和B端已经是完全两个不同的行业,C端发展近十年,已经很难再做到创新上的突破,该做的功能和创新都已经做了,而B端这片蓝海才刚刚开始发力,很多企业也都在考虑B端系统的搭建,降本提效率成了很多公司新的指标,因此数字化转型重点在于B端系统探索,B端重点在于中台的搭建!设计师通过设计中台,构建出基本的业务类型,再分类到业务中,构建出不同的业务界面,所以设计中台非常关键,很多公司经常会用这两个系统去构建,Antdesign和Elemnet就是设计中台,我们会发现用Antdesign可以做出很多的系统,那怎么进行设计中台的设计呢?和我们设计师有什么样的关联度呢?带着这个问题,我们深度探索B端设计中台的落地!


2.2 中台的概念及作用


概念:中台是互联网的术语,一般应用于大型企业,中国互联网的变革永远是从大型互联网开始,大型互联网公司引发了技术的变革,这也是中台的兴起,一般指搭建一个灵活快速应对变化的架构,快速实现前端提的需求,避免重复建设,达到提高工作效率目的。


作用:降本提效。如果没有组件库,普通设计师一天最多做十个页面,再多就不太可能了,如果有组件化得产生,一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前,组件库的作用尤为重要。但如果落地,就需要前端工程师的密切配合,因为设计师设计的组件只是一个样式,而前端需要把组件进行代码化,所以组件一定是代码化的,也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用,和前端代码的复用,可以大大提高设计师的工作效率。


2.3 设计中台的构建过程



2.3.1 基本库建立


基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等,之所以强调系统两个字,有系统就要统一规则和统一规范,然后进行调用应用在系统中的各个地方,比如我们想调用一个颜色,不是去随选用一个颜色,应该严格的从色彩系统中去调用,如果系统组件库里没有这个颜色,我们也绝对不可以使用,可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用,这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面,组件库中如果没有相应的组件,我们应该试着反推一下,是否要加进组件库中去,来进行系统的调用。在做中台的过程中,我们一直使用Antdesign,我们对组件的名称,组件的分类其实一点都不陌生,其实Antdesign也在借鉴国外的Bootstrap组件库(大家感兴趣可以下载Bootstrap组件库进行查看),所以并不是Antdesign组件库形成了一定的规则,它也是在沿用别人的规则,而这些规则也需要不断的有大公司去继承出来,所以慢慢衍生出来现在这样的组件库,那中台设计,首先要搭建基本库,把基本库里的基础一些系统搭建好后,我们继续去做扩展库。


2.3.2 扩展库建立


如下图,扩展库中包含了很多内容,比如分了四类,导航系统,数据录入,数据展示和反馈系统。其中导航系统又包含了,面包屑导航、下拉菜单、导航菜单、顶部导航等等,包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库,也不需要做成像Antdesign的组件库里包含的那么多,或者和新出得字节Arco组件库,因为它们面向的是系统级的解决方案,各行各业都可以用它,它面向的是一个大系统,也许我们只涉及到了其中的20%,因为也没有一个系统能用到它所有的组件,所以我们自己在设计组件库的时候,一定是按照我们自己项目的范围去做组件库,而不是做一个大而全的,大而全的组件库对我们也没有意义。它们做的是公共平台,而我们要做的是一个专属平台。



2.3.3 方法库建立


形成完基本库和扩展库后,第三步是建立方法库。方法库告诉我们的是什么时候用,比如我做了一个多选框,这个多选框应该什么时候用,是不是只要遇见一个选择就去用多选框,肯定不是,应该加以说明什么时候用这个多选框。类似于是组件的设计说明。


2.3.4 案例库建立


最后再做一个案例库,最佳实践库,具体组件什么时候用我们知道了,接着案例库就是在告诉我们应该如何正确的使用,或者说的方法是什么。比如标签的左对齐和右对齐,这种情况都对,什么时候用顶对齐,什么时候用左对齐,什么时候用右对齐呢?那么根据眼动仪实验数据数据来看,并且结合给出一些工作中业务中的最佳实践得案例放进去,给使用的人去做指引。


所以设计师做的事情,不仅仅是应用组件库和创造组价库,还应该指导其他设计师,指导开发人员在去复用每个页面组件的的时候,应该怎么正确的使用,这也是在B端设计中一个关键的环节,同时我们的视觉系统一定也是和业务有关联度的,所以在B端中做设计一定也不会脱离业务去做,我们一定要联系到实际的业务场景中,这个业务场景指的就是业务和视觉的结合,在做C端的时候,业务场景一定不会比B端多,C端的业务场景大多是定制化的业务场景,它要求的是个性化,不要求通用,尽量得个性化,比如图标、按钮、页面,而B端需要统一化,中台组件库的落地,可以大大提高设计师的工作效率和开发人员的协同效率,严谨的调用组件使用组件,可以使得系统页面保持高度的一致。



2.4 认识格式塔原则


2.4.1接近性


如图1:可以看出纵列的关系更紧密,因为纵间距小于行间距。


如图2:可以看出行间距大于列间距,它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢?这属于用户心理学的应用,如果元素相邻的更近,元素之间的关系就会更加的紧密。


如图3:如果元素相邻的关系都是保持一样的,那么它们的关系是相对对等的。


由此可以得出结论,如果相邻的关系越近,它们的关联度就越近,如果相邻的越远,它们的关联度就越远。


应用案例:如图4卡片中得标题和内容,设计中把标题和内容进行区分,所以我们会做大量的留白,这样的留白就会让信息结构具有层次感,层次感就是指它们信息结构的关联度,如果想让它们有关联度,就让它们距离近一点不要做区分,如果不想让它们有关联度,或者关联度出现一个等级的区分,那么就可以加一条线,让它们之间的关联度分隔开。这就是格式塔接近性的应用。



2.4.2 相似性


如图5:如果去区分右边的形状,通常我们会根据形状进行区分,因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。


应用案例:如果文字的标题大小是保持一致的,包括它有统一的大小,统一的色彩,统一的字号,那系统中的其他同样功能的地方,都应该用统一的文字,这就是格式塔相似性的应用,比如图标也是一样,只有用了相似的图形大小,相似的颜色,在相同的位置,用相同的图标进行表达,图标之间的设计才具有相似性。


2.4.3 主体与背景


如图6:可以看到有一个L,是主体与背景进行了区分,如果在设计的时候让L看的更加明显,我们采用的办法就是将主体的色彩或者形状变的更加独特,或者将背景的颜色变得更加分明,这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。


应用案例:比如警告弹出,可以用色彩去区分,目标就是让用户看的更加得清晰,当警告的时候给用户一个警告的信息,当成功的时候给用户一个成功的信息。还有类似对话框的弹出,采用背景变暗和加阴影的方式,都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中,前景和背景进行区分的时候,我们就可以通过色彩进行区分,色彩的区分要保持统一,比如背景色彩透明度50%同时加一些背景模糊,其他的背景也需要保持一致,阴影也是一样,如果把阴影放在一个平面上,距离平面越近,它得阴影越短,距离平面越远,它得阴影越长,这也是阴影的层级关系。


2.4.4 封闭性


如图7:可以看出这是一个四分之一的圆形。


如图8:这个图可以看出是一个五角星。


封闭性应用案例:当一个形状被另外一个形状或者被另外一个色彩阻断的时候,并不影响人们对这个形状额外得认知,一定会脑补出另外一个形状,这个原则和我们UI的关系是什么呢?比如一个loading,半圆一直在旋转,或者图表中的圆占比,我们就可以判断出谁大谁小,谁多谁少,判断出当前的进程和位置,封闭性原则通常应用在图标的设计,图表的设计和步骤条的设计中。


2.4.5 连续性


如图9:可以看出用一些简单得形状来体现,其中三角形具有明显的指向性,三角形箭头指向右边,上面五个是一组,可以看出它们具有连续性;另外一组三角形箭头指向右下角,可以看出它们是连续的一组。不同的形状会有连续性,箭头也特别有指向性,这就是为什么返回和前要进放在不同的位置,当我们的数据需要有连续的时候,我们也要使用相似的形状来表达,这就是连续性原则的应用。


同理如图10:连续性一定是要有连续等阶的变化,从左上角开始,向下和向右我们可以看出有明显的颜色连续等阶变化,通过色彩的透明度也可以做到连续性。




2.5 组件的命名规则



2.5.1 如何正确的命名


很多公司或者不同公司有不同的命名方式,这个需要和团队开发提前做沟通,主要以方便开发习惯操作为主,如果不命名也不能非得说成是错误的,命名可以理解成是一件锦上添花的事情,因为一切都以效率优先,命名自然会影响工作效率,通常情况,组件的命名可以分成组件的名称、级别、尺寸、状态,这样的命名顺序来进行,这样命名开发使用也比较方便,因为是按照了开发的统一规则来进行命名的。如图所示:



2.5.2 更多命名英文词汇


当英文不好的时候,推荐大家记常用组件英文名,以及常用状态名、级别名、内部名、尺寸名和位置名,那这些英文也几乎涵盖了工作中80%的英文词汇,收藏记忆哦~



文章来源:站酷   作者:飞鱼十七

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



留白/线性/卡片分割选哪个?

ui设计分享达人

近两年,vivo 浏览器一直选择的是留白分割的设计方式,但核心竞品已经逐渐都采用了线性分割,甚至卡片分割的设计,是要坚守留白还是追随“趋势”,面对内外部声音的追问,我们开始了关于分割方式的详细研究与探索。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表,而是回归到分割方式的本源,希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结,我们可以将结论简要概括如下:

  1. 优先使用留白分割。
  2. 当留白分割不能起到明显的分割作用时,建议采用线性分割。
  3. 当线性分隔不能起到明显的分割作用时,建议采用卡片分割。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图2 三种分割方式示意

也就是说从选择的优先级而言:留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文(小结图见文末),希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割,指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息进行分组。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图3 亲密性原则体现的留白分割

如上图所示,当纵向间距增加 1.5 倍后,信息被分为上下 2 组,当横向间距也增加 1.5 倍后,信息被分为上下左右四组,这就是留白分割。

值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,间距留白是区隔单一信息元素的默认选择。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割,随着元素的增多,多个元素按照特定的组合形成条目,条目与条目之间,或者条目组与条目组之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图5 iOS和Android系统的分割方式差异

在 iOS 中,线性分割是条目间默认的分割方式(参见 iPhone 通讯录和设置),当多个条目成组后,为了区分不同组别,则会采用更高层级的卡片分割方式。

在 Android 系统,留白分割是条目间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见 Pixel 5 的通讯录和设置)

从 2014 年 Material Design 发布后“卡片式设计”的风靡,再到 2019 年前后“去线化设计”盛行,结合设计趋势,再对比上图中 iOS 和 Android 的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队 Google,在设计 Android OS 时也并没有滥用卡片)。

3. 留白分割的分类及适用场景

留白分割的分类,指的是留白间距大小的设计规范,信息之间有多少种间距,每种间距适用于什么情境。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图6 留白分割的分类

日常设计中,视觉设计师经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。

理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。而且每增加一个视觉层次,要求其间距至少要是上一层次间距的 2 倍,接近法则才能生效产生明显的分组效果。所以当条目信息层次较少(≤2)时,留白分割是比较合适的,当信息层次较多(≥3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割,顾名思义,就是指用线来分割不同的信息内容。在 Material Design 中,对分割线(Dividers)有明确的定义和规范。(iOS 中没有相关定义,根据上图 4 的视觉效果,我更偏向 Android 的分割方式,所以更倾向于采纳 Android 的设计规范建议和效果)

分割线是一条细长、轻量的线,用于对列表和页面布局中的内容进行分组。从视觉效果上看,分割线可以将页面内容分割成层次更清晰的组块。

此外,MD 还定义了其 UI 细节,规定分割线的粗细是 1dp,颜色根据日夜间模式,可分别使用黑色或白色,不透明度为 12%,以确保 Android 平台所有分割线的显示效果一致。(国内的实际情况是:大部分 App 的分割线是 1px 粗细,相比 MD 的 1dp,视觉效果更符合下方的微妙原则)

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰,影响页面信息传达,所以 Android 系统明确规定了分割线的使用原则:

  1. 微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
  2. 次要的:只有当留白不能起到分割作用时才采用分割线。
  3. 少用的:谨慎使用分隔线,用它来创建分组而不是分割条目。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型:

  1. 通栏分割线(Full-bleed dividers):用于分隔彼此完全独立的内容。
  2. 内嵌分割线(Inset dividers):用于分割有锚点(头像或图标)的相关内容。
  3. 中间分割线(Middle dividers):用于分割无锚点(头像或图标)的相关内容。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图8 三种分割线示意

多数时候(信息层级≤2),采用分割线进行分割的信息,采用留白也是可以分割的,只不过需要留白间距足够大,比如我们把上述分割线的方式换成留白,因为间距够大,视觉效果也很清晰(没有多余线性元素的干扰)。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图9 用大留白替换分割线示意

但是如果为了提高屏效,希望在一屏内尽可能多的展示信息,那么同样的信息布局,分割线带来的分割效果会更清晰,如下图所示:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后,使用线性分割就要谨慎一些,可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧,除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片之上。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图12 卡片可以包含的元素示意

  1. 包含的:卡片是一个可识别的、单独的、包含内容的单元。
  2. 独立的:一张卡片可以独立存在,而不依赖于上下文环境。
  3. 不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。

使用卡片需要满足以上三个原则,但并不是满足以上原则就可以使用卡片,具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距,可以简单分为通栏卡片和非通栏卡片。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图13 卡片样式分类

从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。

不管是哪种卡片类型,它们都是独立的、包含单个主题的内容(操作)的容器,它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线,什么时候使用卡片分割呢?这里有三个参考建议给你:

  1. 当这个主题内部的内容已经有分割线时,建议采用卡片分割,以让主题信息层次更清晰。
  2. 当单个主题内部的内容类型较多,上下所占空间较大(比如≥1/2屏),建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
  3. 当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择,因为项目成员偏好不同,大家各执一词都无法说服对方,所以设计师设计了三种不同的分割方案(仅分割方式这一个变量),分别进行了定性研究、定量研究和灰度数据调研。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图15 设计师设计的三种分割效果

在定性研究中,我们在线下对十余位用户进行了访谈,左右滑动三张设计稿,让用户对比观察三张图的差异,(不管是线性分割还是卡片分割,设计师都遵循了以内容为主导,弱化分割方式以凸显内容这一大原则,期望用户能始终聚焦在内容本身,不受分割方式的干扰),结果所有用户都说觉得三张图是一样的,表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后,三种分割方式的选择也比较分散,并没有显著的差异(样本较少,不具有说服力)。

在定量的问卷研究中,我们提取了用户对三种分割方式描述的看法,基本也符合大家对分割形式的预期。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图16 筛选的用户典型反馈

在最终的灰度测试中,留白分割以相对较好的数据结果胜出(结果数据保密,暂不方便告知)。所以在最终大家看到的全量版本中,vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点(视觉干扰性、分割强弱感、滑动沉浸感)、上下文条目之间的关系,单个条目的内容复杂度,屏幕空间的利用率,我们可以对分割方式做一个简单的小结,如下:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图17 分割方式特点小结

简而言之:

  1. 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  2. 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  3. 当信息条目复杂度进一步提升,(比如已经有了线性分割,或者有更多操作),需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。





文章来源:优设 作者:VMIC UED

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


近两年,vivo 浏览器一直选择的是留白分割的设计方式,但核心竞品已经逐渐都采用了线性分割,甚至卡片分割的设计,是要坚守留白还是追随“趋势”,面对内外部声音的追问,我们开始了关于分割方式的详细研究与探索。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表,而是回归到分割方式的本源,希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结,我们可以将结论简要概括如下:

  1. 优先使用留白分割。
  2. 当留白分割不能起到明显的分割作用时,建议采用线性分割。
  3. 当线性分隔不能起到明显的分割作用时,建议采用卡片分割。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图2 三种分割方式示意

也就是说从选择的优先级而言:留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文(小结图见文末),希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割,指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息进行分组。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图3 亲密性原则体现的留白分割

如上图所示,当纵向间距增加 1.5 倍后,信息被分为上下 2 组,当横向间距也增加 1.5 倍后,信息被分为上下左右四组,这就是留白分割。

值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,间距留白是区隔单一信息元素的默认选择。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割,随着元素的增多,多个元素按照特定的组合形成条目,条目与条目之间,或者条目组与条目组之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图5 iOS和Android系统的分割方式差异

在 iOS 中,线性分割是条目间默认的分割方式(参见 iPhone 通讯录和设置),当多个条目成组后,为了区分不同组别,则会采用更高层级的卡片分割方式。

在 Android 系统,留白分割是条目间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见 Pixel 5 的通讯录和设置)

从 2014 年 Material Design 发布后“卡片式设计”的风靡,再到 2019 年前后“去线化设计”盛行,结合设计趋势,再对比上图中 iOS 和 Android 的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队 Google,在设计 Android OS 时也并没有滥用卡片)。

3. 留白分割的分类及适用场景

留白分割的分类,指的是留白间距大小的设计规范,信息之间有多少种间距,每种间距适用于什么情境。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图6 留白分割的分类

日常设计中,视觉设计师经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。

理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。而且每增加一个视觉层次,要求其间距至少要是上一层次间距的 2 倍,接近法则才能生效产生明显的分组效果。所以当条目信息层次较少(≤2)时,留白分割是比较合适的,当信息层次较多(≥3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割,顾名思义,就是指用线来分割不同的信息内容。在 Material Design 中,对分割线(Dividers)有明确的定义和规范。(iOS 中没有相关定义,根据上图 4 的视觉效果,我更偏向 Android 的分割方式,所以更倾向于采纳 Android 的设计规范建议和效果)

分割线是一条细长、轻量的线,用于对列表和页面布局中的内容进行分组。从视觉效果上看,分割线可以将页面内容分割成层次更清晰的组块。

此外,MD 还定义了其 UI 细节,规定分割线的粗细是 1dp,颜色根据日夜间模式,可分别使用黑色或白色,不透明度为 12%,以确保 Android 平台所有分割线的显示效果一致。(国内的实际情况是:大部分 App 的分割线是 1px 粗细,相比 MD 的 1dp,视觉效果更符合下方的微妙原则)

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰,影响页面信息传达,所以 Android 系统明确规定了分割线的使用原则:

  1. 微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
  2. 次要的:只有当留白不能起到分割作用时才采用分割线。
  3. 少用的:谨慎使用分隔线,用它来创建分组而不是分割条目。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型:

  1. 通栏分割线(Full-bleed dividers):用于分隔彼此完全独立的内容。
  2. 内嵌分割线(Inset dividers):用于分割有锚点(头像或图标)的相关内容。
  3. 中间分割线(Middle dividers):用于分割无锚点(头像或图标)的相关内容。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图8 三种分割线示意

多数时候(信息层级≤2),采用分割线进行分割的信息,采用留白也是可以分割的,只不过需要留白间距足够大,比如我们把上述分割线的方式换成留白,因为间距够大,视觉效果也很清晰(没有多余线性元素的干扰)。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图9 用大留白替换分割线示意

但是如果为了提高屏效,希望在一屏内尽可能多的展示信息,那么同样的信息布局,分割线带来的分割效果会更清晰,如下图所示:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后,使用线性分割就要谨慎一些,可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧,除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片之上。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图12 卡片可以包含的元素示意

  1. 包含的:卡片是一个可识别的、单独的、包含内容的单元。
  2. 独立的:一张卡片可以独立存在,而不依赖于上下文环境。
  3. 不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。

使用卡片需要满足以上三个原则,但并不是满足以上原则就可以使用卡片,具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距,可以简单分为通栏卡片和非通栏卡片。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图13 卡片样式分类

从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。

不管是哪种卡片类型,它们都是独立的、包含单个主题的内容(操作)的容器,它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线,什么时候使用卡片分割呢?这里有三个参考建议给你:

  1. 当这个主题内部的内容已经有分割线时,建议采用卡片分割,以让主题信息层次更清晰。
  2. 当单个主题内部的内容类型较多,上下所占空间较大(比如≥1/2屏),建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
  3. 当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择,因为项目成员偏好不同,大家各执一词都无法说服对方,所以设计师设计了三种不同的分割方案(仅分割方式这一个变量),分别进行了定性研究、定量研究和灰度数据调研。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图15 设计师设计的三种分割效果

在定性研究中,我们在线下对十余位用户进行了访谈,左右滑动三张设计稿,让用户对比观察三张图的差异,(不管是线性分割还是卡片分割,设计师都遵循了以内容为主导,弱化分割方式以凸显内容这一大原则,期望用户能始终聚焦在内容本身,不受分割方式的干扰),结果所有用户都说觉得三张图是一样的,表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后,三种分割方式的选择也比较分散,并没有显著的差异(样本较少,不具有说服力)。

在定量的问卷研究中,我们提取了用户对三种分割方式描述的看法,基本也符合大家对分割形式的预期。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图16 筛选的用户典型反馈

在最终的灰度测试中,留白分割以相对较好的数据结果胜出(结果数据保密,暂不方便告知)。所以在最终大家看到的全量版本中,vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点(视觉干扰性、分割强弱感、滑动沉浸感)、上下文条目之间的关系,单个条目的内容复杂度,屏幕空间的利用率,我们可以对分割方式做一个简单的小结,如下:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图17 分割方式特点小结

简而言之:

  1. 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  2. 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  3. 当信息条目复杂度进一步提升,(比如已经有了线性分割,或者有更多操作),需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。





文章来源:优设 作者:VMIC UED

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


近两年,vivo 浏览器一直选择的是留白分割的设计方式,但核心竞品已经逐渐都采用了线性分割,甚至卡片分割的设计,是要坚守留白还是追随“趋势”,面对内外部声音的追问,我们开始了关于分割方式的详细研究与探索。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表,而是回归到分割方式的本源,希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结,我们可以将结论简要概括如下:

  1. 优先使用留白分割。
  2. 当留白分割不能起到明显的分割作用时,建议采用线性分割。
  3. 当线性分隔不能起到明显的分割作用时,建议采用卡片分割。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图2 三种分割方式示意

也就是说从选择的优先级而言:留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文(小结图见文末),希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割,指的是只通过增加间距的方式,利用人的视知觉原理(接近法则:人的大脑会倾向于把彼此靠近的元素视为一组),自然的将信息进行分组。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图3 亲密性原则体现的留白分割

如上图所示,当纵向间距增加 1.5 倍后,信息被分为上下 2 组,当横向间距也增加 1.5 倍后,信息被分为上下左右四组,这就是留白分割。

值得一提的是,同类单一元素(图片、文字、图标等)之间默认采用的都是留白分割。比如相册中单张照片之间,文章中每个文字之间,间距留白是区隔单一信息元素的默认选择。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割,随着元素的增多,多个元素按照特定的组合形成条目,条目与条目之间,或者条目组与条目组之间进行区隔时,就涉及到今天的主题:留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图5 iOS和Android系统的分割方式差异

在 iOS 中,线性分割是条目间默认的分割方式(参见 iPhone 通讯录和设置),当多个条目成组后,为了区分不同组别,则会采用更高层级的卡片分割方式。

在 Android 系统,留白分割是条目间默认的分割方式,线性分割用于划分信息组块,而不仅仅是区隔上下文内容。(参见 Pixel 5 的通讯录和设置)

从 2014 年 Material Design 发布后“卡片式设计”的风靡,再到 2019 年前后“去线化设计”盛行,结合设计趋势,再对比上图中 iOS 和 Android 的分割效果,建议在不影响核心数据指标的前提下,条目之间尽可能采用留白分割,会让界面更清爽,浏览更沉浸(毕竟即使是卡片设计的创始团队 Google,在设计 Android OS 时也并没有滥用卡片)。

3. 留白分割的分类及适用场景

留白分割的分类,指的是留白间距大小的设计规范,信息之间有多少种间距,每种间距适用于什么情境。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图6 留白分割的分类

日常设计中,视觉设计师经常会将页面网格化,然后以最小网格为基准,设计不同倍数的间距大小,以此来增强页面的秩序感。

理论上讲,只要分隔的间距够大,都可以根据接近性原则形成信息分组。但信息层次越多,需要的间距种类就越多,间距种类一多,信息层次就越不清晰(只能单纯根据间距大小判断信息层次,就好像只用邻近色进行色彩区分一样,不对比就不容易发现差异,不够直白)。而且每增加一个视觉层次,要求其间距至少要是上一层次间距的 2 倍,接近法则才能生效产生明显的分组效果。所以当条目信息层次较少(≤2)时,留白分割是比较合适的,当信息层次较多(≥3)时,留白分割既会浪费空间,也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割,顾名思义,就是指用线来分割不同的信息内容。在 Material Design 中,对分割线(Dividers)有明确的定义和规范。(iOS 中没有相关定义,根据上图 4 的视觉效果,我更偏向 Android 的分割方式,所以更倾向于采纳 Android 的设计规范建议和效果)

分割线是一条细长、轻量的线,用于对列表和页面布局中的内容进行分组。从视觉效果上看,分割线可以将页面内容分割成层次更清晰的组块。

此外,MD 还定义了其 UI 细节,规定分割线的粗细是 1dp,颜色根据日夜间模式,可分别使用黑色或白色,不透明度为 12%,以确保 Android 平台所有分割线的显示效果一致。(国内的实际情况是:大部分 App 的分割线是 1px 粗细,相比 MD 的 1dp,视觉效果更符合下方的微妙原则)

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰,影响页面信息传达,所以 Android 系统明确规定了分割线的使用原则:

  1. 微妙的:分割线在布局中应该很容易被注意到,但又不凸显。
  2. 次要的:只有当留白不能起到分割作用时才采用分割线。
  3. 少用的:谨慎使用分隔线,用它来创建分组而不是分割条目。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型:

  1. 通栏分割线(Full-bleed dividers):用于分隔彼此完全独立的内容。
  2. 内嵌分割线(Inset dividers):用于分割有锚点(头像或图标)的相关内容。
  3. 中间分割线(Middle dividers):用于分割无锚点(头像或图标)的相关内容。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图8 三种分割线示意

多数时候(信息层级≤2),采用分割线进行分割的信息,采用留白也是可以分割的,只不过需要留白间距足够大,比如我们把上述分割线的方式换成留白,因为间距够大,视觉效果也很清晰(没有多余线性元素的干扰)。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图9 用大留白替换分割线示意

但是如果为了提高屏效,希望在一屏内尽可能多的展示信息,那么同样的信息布局,分割线带来的分割效果会更清晰,如下图所示:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后,使用线性分割就要谨慎一些,可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①,它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧,除了卡片容器本身,其他元素都是可选的,所有元素都以易于扫描和操作的形式放置在卡片之上。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图12 卡片可以包含的元素示意

  1. 包含的:卡片是一个可识别的、单独的、包含内容的单元。
  2. 独立的:一张卡片可以独立存在,而不依赖于上下文环境。
  3. 不可分割的:一张卡片不能与另一张合并,也不能拆分成多张卡片。

使用卡片需要满足以上三个原则,但并不是满足以上原则就可以使用卡片,具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距,可以简单分为通栏卡片和非通栏卡片。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图13 卡片样式分类

从视觉效果上来看,由于圆角的聚焦效应,非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好,画面的分割感会更强。

不管是哪种卡片类型,它们都是独立的、包含单个主题的内容(操作)的容器,它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线,什么时候使用卡片分割呢?这里有三个参考建议给你:

  1. 当这个主题内部的内容已经有分割线时,建议采用卡片分割,以让主题信息层次更清晰。
  2. 当单个主题内部的内容类型较多,上下所占空间较大(比如≥1/2屏),建议采用卡片分割,以更好的圈定该主题的内容范围,给用户明确的内容边界感。
  3. 当需要扩展页面的横向空间时,暗示页面可以横向滑动时,需要采用非通栏卡片,利用横向内容连续性原则,帮助用户建立可以横向滑动的意识。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择,因为项目成员偏好不同,大家各执一词都无法说服对方,所以设计师设计了三种不同的分割方案(仅分割方式这一个变量),分别进行了定性研究、定量研究和灰度数据调研。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图15 设计师设计的三种分割效果

在定性研究中,我们在线下对十余位用户进行了访谈,左右滑动三张设计稿,让用户对比观察三张图的差异,(不管是线性分割还是卡片分割,设计师都遵循了以内容为主导,弱化分割方式以凸显内容这一大原则,期望用户能始终聚焦在内容本身,不受分割方式的干扰),结果所有用户都说觉得三张图是一样的,表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后,三种分割方式的选择也比较分散,并没有显著的差异(样本较少,不具有说服力)。

在定量的问卷研究中,我们提取了用户对三种分割方式描述的看法,基本也符合大家对分割形式的预期。

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图16 筛选的用户典型反馈

在最终的灰度测试中,留白分割以相对较好的数据结果胜出(结果数据保密,暂不方便告知)。所以在最终大家看到的全量版本中,vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点(视觉干扰性、分割强弱感、滑动沉浸感)、上下文条目之间的关系,单个条目的内容复杂度,屏幕空间的利用率,我们可以对分割方式做一个简单的小结,如下:

留白/线性/卡片分割选哪个?扫清你的选择困惑!

图17 分割方式特点小结

简而言之:

  1. 当信息条目复杂度较低时,优先采用留白分割,视觉清爽无干扰。
  2. 当信息条目复杂度增加,只利用留白分割效果不明显时,建议引入线性分割,让信息层次更清晰且屏效高。
  3. 当信息条目复杂度进一步提升,(比如已经有了线性分割,或者有更多操作),需要进一步强化信息条目本身的边界感,建议引入卡片,以强化条目信息的视觉层次和可操作性。





文章来源:优设 作者:VMIC UED

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端体验设计-与复杂共处

ui设计分享达人

“复杂是世界的一部分,但它不应该令人困惑,好的设计帮我们驯服复杂,不是让事物变简单(如果复杂是符合需求的),而是去管理复杂”--唐纳德·A·诺曼



与复杂共处,这是一个有趣的话题。在这个奉行“少即是多”的时代,设计师对于复杂噤若寒蝉,认为优秀的设计应该简洁明了,若无必要,勿增实体,而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思,甚至试图通过削弱功能的方式来降低产品的复杂度,得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗?从心理学的角度来看,复杂的事物往往功能强大,而功能强大意味着更好的服务与更高的价值,用户也更愿意为之付费。当我们购买商品时,我们会仔细斟酌,拿着产品的功能列表反复比对,这个时候我们忘记了产品复杂与否,更多考虑的是功能是否满足自身需求。


对于大部分B端产品而言,复杂或许难以避免,复杂是出于实实在在的业务的需要,而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂,是因为产品需要完成复杂的工作任务,界面内承载的信息内容较多,在视觉上会带给用户压力,直观感受上觉得产品很复杂。但是这些信息又都是必需的,如果缺少这些必要的信息,会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱,密密麻麻的按钮如此复杂,但是每一个按钮都有着相应的功能,不可或缺。既然复杂难以避免,那么作为设计师我们不应该被动接受或盲目拒绝复杂,我们应该学会如何与复杂共处,去尝试驯服复杂、管理复杂。


理性看待复杂


相信很多设计师和我一样,经历过现代主义浪潮的洗礼,对于简约的设计有着或多或少的偏好。因为这种偏好,在自己进行设计时也希望能够选用这种风格,在设计时刻意的去追求界面简约,却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看,复杂的事物更容易理解,简单的事物反倒令人困惑,一味的追求简单反而会让事物变得复杂。


B端产品的目标是降本提效,追求简约的设计思想在B端产品的设计中并没有那么适用,为了提升用户的操作效率,我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度,但是相较于产品视觉界面会因此变得复杂,产品的易用性和操作效率对于B端产品而言会更为重要。


与复杂共处的前提是能够理性地看待复杂,复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态,它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定,就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单,因为两者的功能需求不是一个层面的,所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。


分清复杂与困惑


我们之所以对复杂怀有畏惧,其实更多的是畏惧令人困惑的复杂,复杂与困惑有着本质的区别,理解他们之间的区别很有必要,复杂描述的是事物的状态,而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑,理解这些规则和逻辑,能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑,用户难以理解产品的运转机制,需要花费很大力气才能完成有效操作,容易让用户产生挫败感。产品可以是复杂的,但是不应该让用户困惑。


在很多复杂的传统线下业务数字化转型的过程中,为了让产品易于使用,设计师需要深入到一线,去了解真实用户在线下业务场景中是如何处理日常任务的,在流程线上化过程中也需要遵循这样的业务流程,这样能够让用户更快上手,而如果我们在设计过程中不去参考用户在线下的操作场景,按照自己的想法去意测用户的行为,这样设计出的产品背离了用户的心理模型,缺乏内在逻辑,会让用户感到混乱困惑,陷入深深的麻烦。


基于产品本身功能需要,我们可能无法很主观的去降低产品的复杂度,这就需要我们在进行产品设计时花费更多的心思,通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰,不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计,用户在编辑器内完成一系列针对表单的编辑、配置操作,然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列,这种方式结构简单,但是扩展性较差,过多的栏目也容易让用户陷入困惑,不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构,在步骤导航上给出完成表单编辑配置的主要步骤,在大的步骤下用侧栏导航承载小的编辑项,结构清晰,且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致,视觉观感上甚至方案B更为复杂,但是方案B在这里可能是更合适的方案,因为方案B在配置流程的指引上更为清晰,也更贴近用户心理模型,即使没有使用过在线表单的用户也能理解产品流程,因而用户能够更容易的完成表单配置并发布表单。



功能决定产品的复杂程度


我们在使用产品时,都会有一个大概的心理预期,会认为某一类型的产品会较为复杂,某一类型的产品会相对简单。为什么我们会有这样的认知呢?是因为我们知道这些产品大概有哪些功能,而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定,而不是依照设计师的自我喜好,像如淘宝、京东这类的购物网站、拥有着很多的栏目,所以淘宝、京东的界面相对来说较为复杂;而像百度这样的搜索引擎功能相对来说比较简单,所以界面设计相对简单干净。


我们可以容许一个功能强大的产品设计得相对复杂,但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计,即不过度设计,也不执着于追求简约,而是基于需求恰到好处的进行设计。


复杂产品也能有好的体验


复杂的产品会有好的用户体验吗?答案是肯定的,用户体验的好坏与产品是复杂还是简单并没有直接的关系,很多时候复杂的产品也能带给我们良好的用户体验,在互联网产品中,我们可以看到很多复杂的产品,这些复杂的软件产品,一点点的改变着我们的生活与工作方式,让我们生活与工作变得便捷与高效。


首先可以看看我们的国民级电商应用淘宝,乍看淘宝的界面,可能会觉得十分复杂,甚至会给人一种眼花缭乱的感觉,但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际,做社区团购的淘鲜达,专做拍卖的阿里拍卖等数十个板块,业务繁多,功能复杂,但这几乎很难改变,因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看,虽然淘宝的业务和功能繁多,却有着清晰的布局、信息对齐、内容组织,产品尽管复杂,但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿,贴近用户的心理模型,用户容易了解产品功能、容易与之交互,整体上有着良好的用户体验。



又如我一直在使用的一款笔记软件Notion,Notion相对于印象笔记、有道云笔记而言更为复杂,需要花费一定的时间成本学习才能够从容上手使用,但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前,甚至都不会想到会出现在一款笔记产品里面,如甘特图,多维表格等,这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式,让笔记能够自由拖拽,拥有了极强的自由度,用户可以很自由的用各种各样的形式来记笔记,要是你肯再花一些心思,你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识,打造个人专属知识库。将我们习以为常的线性笔记思维,转变成纵向思维,甚至是网格状思维。Notion无疑是复杂的,但是这样做是为了给用户提供的强大功能和极高的自由度,这些功能恰恰也切合了用户的需求,创造了一种全新的笔记体验,带给用户愉悦的使用感受。



过度简化的潜在风险


简单是产品追求的最终形态吗?其实未必,很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计,不可避免的就需要隐藏一些信息或者拉长操作路径,这是一个权衡的过程,我们在做设计时也会经常面临这样的抉择,是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要,人们对于美的事物往往更有耐心,也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言,准确的传达信息,帮助用户进行判断,频繁使用的功能设计得更高效便捷,这些点能带给用户更实际价值,也是我们在设计产品时应该优先考虑的点。



特别是在一些专业性的软件中,如果我们为了追求简约而弱化或者省略掉一些关键信息,还有可能会导致用户错误操作的出现,造成严重的后果。试想一下当你在使用软件编写一个计算字段时,软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例,导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用,为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。


如何与复杂共处


前面我们了解了关于复杂的定义,认识了复杂与困惑之间的区别,也明确了在B端产品中复杂或许难以避免,复杂是出于实实在在的业务的需要而非某位设计师的错误喜好,既然复杂无法避免,我们就应该学会与复杂共处,管理与驯服复杂。那么如何与复杂共处呢,有一些策略或许可以给予我们一些思路。


1.为产品注入规则


复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑,而困惑缺少这样的规则与逻辑,让人无法预测与揣摩,对应到软件产品的设计,一款成功的优秀的软件产品,应该是易学易用、能够满足用户预期,用户能够直观的理解产品的流程与主要功能,并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢?


这里可以看看我们团队正在使用的研发管理工具TAPD,TAPD是一款敏捷研发协作工具,凝聚了腾讯研发方法及敏捷实践精髓,其中敏捷开发的方法就是TAPD的内在规则与逻辑,有过敏捷开发经验,理解敏捷开发流程的的开发人员能够快速的上手使用TAPD,对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想,进而理解产品的功能与流程,因此虽然TAPD功能与页面结构相对复杂,但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径,实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处,将原本零散的功能点通过特定逻辑链接成操作流程,帮助用户更好地理解与使用产品。



相同的在我们公司自己的一个项目中我们也运用了同样的方法,在我们公司之前研发的一款crm产品中,为了给用户提供最佳的销售实践,帮助用户更快上手使用我们的产品,我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询,并依照硅谷蓝图的销售转化路径来构建我们的产品体系,确定产品功能,梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户,让用户能够更好地使用我们的产品,实现产品的最高价值,为中小企业销售团队赋能。


通过前面两个案例其实我们可以感受到,当一款复杂的产品有了内在的规则与逻辑以后,用户理解和使用我们的产品会变得更顺畅,用户不会迷失在茫茫的功能之中,通过理解规则与逻辑,用户能够对自己操作结果有一个大概的预期,而不是处于困惑状态,作为设计师的我们也可以将这种规则逻辑作为我们设计的引导,让我们的设计更为系统和有条理,让产品不再是一堆功能的堆叠,各自为战。


2. 贴近用户心理模型设计



复杂是用户的一种心理感受,用户觉得产品复杂除了产品本身结构信息复杂之外,也是因为产品在设计上没有贴合用户的心理预期,用户很难理解产品的流程与交互,所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念,实现模型、表现模型和心理模型,三个概念的释义如下:

实现模型:产品是怎样工作的
心里模型:用户认为产品是怎样工作的
表现模型:通过设计来让用户认为产品是怎样工作的


表现模型越接近心理模型,用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型,用户越难理解产品,产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制,很多B端产品在设计时更多的偏向于实现模型,用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致,使用过程中会遇到很多的阻碍,影响整体的使用体验。对于一款复杂的产品而言,我们需要让我们产品的表现模型更接近于用户的心理模型,这样用户能够更容易了解产品的功能,并与之交互。


大家使用电脑时有没有遇到过类似下图这样的电脑报错信息,里面是一堆的专业名词,看得人一头雾水。这时候我们能做的只有默默的打开百度,去了解弹窗里面讲的内容究竟是什么,了解后才明白原来这样,然后按照百度上操作步骤一通操作,侥幸解决了问题。但是当下次我们遇到相同问题时,可能还是不知道如何解决,无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰,用户不是专业的开发者,他们不了解也不需要了解产品背后的实现逻辑,这对用户而言是没有价值的,给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难,变相的是在人为的增加产品的复杂度,与复杂共处,我们需要学会贴近用户心理进行设计。



3.统一交互模式


复杂的产品往往功能、页面繁多,如果页面内的视觉元素以及交互各自为战,那么放大到整个产品就是一个灾难,不仅是产品给用户感官上不统一、整体性差,过多的交互模式也会增加用户的学习与记忆成本,用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑,对用户使用产品造成困扰。针对这个问题,现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互,一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题,通过模块化解决方案,也能降低冗余的生产成本,实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题,但实际上就算一个产品有了一个自己的组件库,依旧还会遇到体验上统一性问题,这是为什么呢?


在原子化设计理论中,粒子是构成页面的最小颗粒,粒子构成简单组件,简单组件到复杂组件,再到区块、页面。虽然用组件能去构建页面,但是还会遇到页面结构、交互不一致的问题,设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题,在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。



这里我们拿B端产品中常见的列表页来举例,纵观所有后台列表页面,抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区,在不同的业务场景下,对筛选器的需求也各不相同,简单的可能只需要使用标签选择就能够完成筛选,复杂的可能添加很多的筛选项甚至选项之间还有且或关系,我们需要根据实际的业务场景设计适合的筛选器,但是需要注意的是一个产品中用到的筛选器形式不应太多,我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。



B端后台产品中比较常见的还有表单,我们可以归纳出产品内可能会使用到的表单类型,然后定义出具体的框架结构与交互,在具体的设计过程中在根据实际情况选用不同的表单区块。


1.分组表单

一种常见的信息录入以及信息展示表单,这种形式是我们最长用。



2.分步表单

分布表单适用于信息录入项以及信息展示项过多,在一个页面内已经不能合理清晰的组织传递信息,或者表单内容的录入方式或者展示方式存在较大差异,不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。



3.组合表单

组合表单因其结构能够承载更多的信息,每一个栏目都可以承载一个独立的表单页,有效的管理信息。


4.弹窗表单

很多时候我们也会用弹窗来承载表单,好处是交互衔接流畅,不用跳页。



将产品中类似的区块做成最佳的交互模式范例,能够最大的程度的规范我们产品中的交互,这样才能真正的实现产品体验上的统一,化繁为简,让复杂的产品也能够调理清晰,上手简单容易。在面对复杂的系统级软件时,在统一组件样式的基础上还应该统一产品内的交互模式。



信息归纳突出重心


复杂的产品页面内信息往往都特别繁多,如果不做好信息归纳,用户将很难把握住重点内容,信息获取效率低下,十分影响用户的使用体验,所以信息的强弱的整理十分重要,那么什么样的信息是对用户而言重要的信息呢?


信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”,他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。


如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型,通过调研的来得用户模型是对于我们产品客户的抽象归纳,通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出,哪些内容相对不是那么重要可以弱化处理,通过对于页面内容强弱的划分,用户能够更快的获取到对自己有用的内容,尽管页面仍旧复杂,但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验,帮助用户高效的处理任务。


说在最后


复杂是产品的本来特性,本身不含褒贬,但是如果复杂不加以控制,让其发展为困惑与混乱,这对于一款产品而言绝对不是一件好事情,这样即使产品功能上很优秀,用户也无法长期忍受,一旦市场上出现替代产品,那么忍受已久的用户也将抛弃产品转向体验更好的新产品。


曾经我也是一个极简主义的追捧者,但是经历过越来越多的设计项目,我开始发现某些产品复杂性是必需的,将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂,而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素,让其在视觉界面上变得简洁干净,而是要让产品拥有内在规则、一致且能够被理解。



文章来源:站酷   作者:Yone杨

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档