首页

B端帮助体系二三事

seo达人

前言

业务性强,内容复杂度高是To B产品的典型特征。新用户需要快速认知平台能力并顺利上手,老用户则需感知信息的变化、功能的拓展并迅速响应。体系化的帮助是通过在操作的不同阶段提供差异化的引导及反馈,助力用户在应用中成长。

帮助体系是什么

通过大量的案例积累及系统调研,发现“帮助”并不是单一的某个功能,而是一种体系化的能力,需要通过不同手段来实现。概括来说就是“在产品使用不同阶段为用户提供恰当的提示与指引,通过组件的灵活应用及能力创新,帮助用户降低认知成本,提升操作效率。”

用户对产品的应用周期经历前、中、后三个阶段,每个阶段的设计目标都各不相同:操作前注重提升用户的全局认知,深化理解,助力精准触达;操作中助力提效,让用户知道做什么,怎么做;操作后明确反馈,帮助用户明确结果。

图片

操作前:引导用户深化理解,提升全局认知

用户有新老之分,对系统的熟悉程度及应用诉求不同。因此针对不同用户各阶段的使用诉求进行场景化的拆分,提供差异化帮助。

 

 

帮助用户深入自主的认知平台

我们到陌生的地方会找导视标识或者找人寻求帮助,新用户到平台内也会面临同样的困境,遇到问题无从下手时会寻找含有【帮助】【客服】字样的内容,那么帮助中心、智能助手这类有明显特性的功能则会成为用户遇到问题时的第一选择。通过业务思考及行业调研,以简洁、高效、情感化为目标最大化的发挥其属性优势,让用户在使用过程中更易理解和接受,平稳有效的帮助用户渡过新手期。

1、帮助中心

帮助中心,一个时常被忽略并被严重低估的功能。它是平台全量信息集合地,不仅能帮助用户系统了解平台概况,也能引导用户行为,树立品牌形象。为保证用户高效、便捷的获取帮助信息,在页面表现上需突出内容本身,忌过度装饰。从设计角度来看,一个好的帮助中心应该符合以下条件:框架简洁清晰、信息突出并辅以锚点定位。在框架设计上一般将页面分为导航区、内容展现区两部分,导航与帮助内容对应性强,层级简单,能让用户在短时间内了解平台能力构成;帮助文档内容一般复杂冗长,锚点定位可以充当文章大纲,辅助用户精准定位。

图片

 

2、智能助手

通过内置的帮助和指导性说明来解答用户使用产品过程中遇到的简单、共性问题,降低人工客服响应成本。智能助手包含两部分:入口与悬浮窗口。入口一般悬浮于页面右下角,点击后触发悬浮窗口。

图片

 

市面很多助手能力较单一,仅能机械处理通用问题,无法提供多样化帮助,很容易让人觉得是个没啥用的摆设,对它慢慢失去信任。为重新唤起用户的信任,需要在设计上注入一定的生命力,让用户觉得易接受、有选择、有温度,从而真正用起来。

1)悬浮窗口能力多元化。作为承载智能助手核心能力的悬浮窗口,优化方向有以下三点:首先,智能助手与用户的交流不再局限于单纯的问答,而是根据账户属性向用户提供高频问题集合,并根据用户的回应拓展更多问题,提供多维化的帮助。这个主动性的帮助不仅让用户感受平台的温度,无形中也降低了用户的思考成本,更快的熟悉平台能力。

其次,每个问题旁边都提供“是否有用”的按钮供用户评判。此功能不仅为平台答案提供了优化空间,也强化了用户对平台建设的参与度,让助手与用户共同成长。

最后,对话窗口也可拓展辅助能力,例如常见问题、快讯、快捷入口等,为用户所想的同时也提供更便捷的站内流动通路。

图片

2)入口形象IP化、情感化。除了自身能力外,入口的设计则会提升功能的存在感,从而吸引用户的关注。首先品牌ip形象的植入会让入口更生动,在唤起用户注意的同时强化品牌印象。其次拟人化的主动问候能提升平台的亲切感,拉近与用户的距离。

图片

 

 

助力用户精准触达

新用户对平台相对陌生,恰当的引导能让他们快速关注重点。老用户对平台的定位及能力相对熟悉,目标性更强,但在应用同时也抱有更高期待。因此恰当的引导能帮助他们快速了解平台变化并精准触达。作为产品设计者,也希望对用户行为进行有意识引导,让用户能发现、探索平台新能力,或能够按照我们的希望使用产品。公告弹窗、新手引导、全局提示这三类方法可帮助用户高效获取信息并助力精准触达。

1、公告弹窗

常用于系统升级告知,以模态弹窗表达,让用户聚焦当前内容并支持跳转了解详情。公告样式根据内容细分为三类:版本更新提示、重点升级告知、常规通告,不同类型需根据信息量多寡差异化表达。设计时可辅以插图或其他视觉元素烘托氛围,并在文案上注入情绪化的表达,从而提升用户的关注度。

1)「版本更新提示」承载简单介绍内容,让用户关注且快速获取变更信息。

图片

 

 

2)「重点升级」当有若干重要功能更新或新增时,可用此形式突出重点。

图片

重点内容露出建议2-4组为佳,弹窗宽度可根据内容适配。

图片

 

 

3)「常规通告」常用于文案较多的场景。设计上需要弱化视觉氛围,突出内容本身。

图片

 

 

2、引导类

针对局部功能升级的提示说明,一般与元素绑定关系较强,可让用户直观了解关注点,提升功能触达率。虽然此类引导轻量便捷,容易帮产品提升数据指标,但要注意适度应用。根据功能重要度、操作复杂度将引导总结为分步式、气泡、闪点、操作示意4类。

 

1)「分步式引导」常用于页面多个功能升级的引导组。当页面有多个升级点,直接平铺会让页面臃肿不聚焦。为了让用户高效获取信息,建议一次仅显示一条,通过「下一步」操作,逐步唤出剩余引导。为避免步骤过多导致用户疲劳,建议最多不超过5步。

图片

 

2)「气泡式」相对轻量的引导,有足够的提示性但不影响其他功能操作。

图片

 

3)「闪点提示」微辅助型提示,常与气泡引导配合使用。在需要关注的地方闪烁,点击闪点后唤出关联气泡提示。不对用户造成视觉干扰,又能引起一定的关注。

源图像

 

4)「操作示意」当无法用图文清晰描述操作路径时,以动态形式表达。

图片

 

3、全局提示

重点信息的汇总或提示。此类提示完美融合于页面,醒目且对操作无干扰,用户可根据披露内容判断是否处理。通过警示、徽标的应用向用户传达信息的变化并提供快速触达的能力,无形中提升用户响应效率。

1)「警示」不同颜色的提示条。常作为前置提示存在于页面或模块顶部,为用户顺利操作提供指引性帮助。既不打断用户当前操作,又足够明显,一般需手动关闭或事件结束后自行消失。不同颜色属性不同:一般蓝色代表消息通知、绿色代表成功、橙色代表警示、红色代表错误或异常等情况。另外,也可作为反馈应用在一些需要明确指示的操作后场景,此处暂不展开讨论。

图片

 

2)「徽标」形态各异的小红点。常出现在图标、按钮右上角的红色圆点、数字或文字,简单且醒目。表示内容更新或有待处理的信息,此类提示符合用户心智,无需教育就能向用户精准传达提示意图。

图片

使用时注意无数字与有数字的应用场景。有数字的徽标给用户带来的心理压力会更大,也会更吸引用户注意力,同时需注意数字长度控制。

 

操作中:具体的提示,助力高效填单

存在于操作的具体任务中,通过提示、推荐、预置信息等方式降低用户的认知及操作成本,提升填单效率。

 

 

提示说明

1、文案提示  

平铺在元素附近,对重点或复杂功能提供直观描述或建议。带有引导性的文案处理,会促进用户优化填写方案,输入更合适的内容。应用类型有三:重点提示、辅助说明、占位提示。重点提示与辅助说明使用户无需猜测;占位提示可使用户能够快速明确输入规则。因表达侧重不同,表单设计时三者搭配效果更佳。

图片

 

2、工具提示

此类信息作为文本解释层级较低,无需直接展示。通过悬浮或点击元素触发对应说明,以气泡形式出现。触发式的展现既能避免非必要信息堆叠导致的页面臃肿,又能保证需要的时候有迹可循。

图片

 

 

智能化

当一个系统背后的产品设计者考虑足够全面,能够预判用户的预期,那么它就能主动的给用户提供建议和帮助,甚至帮助用户自动执行一些任务,最大化减轻用户的决策压力。但值得注意的是,“智能化”需要一定的产品能力及丰富的数据作为支撑,设计时需结合实际情况应用。

1、信息预置

系统根据账户属性自动为用户预置内容。如下左图可见,仅需要填写一条内容,其他对用户利益无损的内容可通过预置选项来提升填单效率。

图片

 

2、智能推荐

此类设计的前提是平台有足够的数据积累,通过大数据或业务特色为备选内容打标签建标识。常用的设计方法有两种-为用户提供可视化标签,助力用户快速决策;交互手段简化,由多信息录入变为直接选择,强化推荐内容展示性,从而降低操作中的思考和录入成本。

场景一:「帮助决策」

表单中有大量需要用户录入的字段,在无任何参考的情况下用户用于决策的时间及输入内容的合规性无疑对填单效率造成一定影响。下图可见推荐标签能帮用户提供方向及边界,辅助用户决策,降低思考成本。

图片

 

场景二:「提升填单效率」

以单元创建为例,传统路径如下:新建>填写表单>保存>再次新建>再次填写表单…以此往复。用户每建立一个单元均需要把同类型的内容填写一遍,耗时费力。而智能推荐将常规表单输入变为模版选择,仅需2步就可完成多个内容创建:输入关键词>选择模版。选择和浏览的成本远远低于数据的频繁输入,模版设计则通过简洁的样式及内容层次化的展现提升信息获取效率。通过路径及交互方式的转变,上线后数据反馈操作效率大幅提升。

图片

 

3、预览能力

当操作过程较为复杂或结果难以预测时,可视化的预览可及时展现结果样式,方便用户实时调整,提升操作安全感。

图片

 

操作后:及时有效的反馈

及时响应操作成果,将功能的运行情况、数据的对错反馈给用户,及时有效的帮助修复输入中的问题。常见的反馈有以下四类:toast、表单错误校验、模态弹窗、独占式页面,每种样式因干预强度不同而适用不同的场景。

图片

 

1、Toast:一般3s左右消失,因体积小、展示位置靠上、自动消失等特点时常被用户忽视。常用于操作结果、系统性等等无明确后续指引的反馈,例如“提交成功”、“操作失败”、“服务器无反应”。

图片

 

2、错误校验:当表单出现输入错误时,按照就近原则在错误附近为用户展示明确的提示性消息,纠正和引导用户的输入内容。

图片

 

3、弹窗提示:提示性和阻断性都很强,能够让用户聚焦信息本身。通常提示内容可为用户提供指向性引导,需要强关注。

图片

 

4、独占式反馈:提交后页面切变为独立展示的页面级状态反馈。比弹窗的阻断性更强,信息获取更沉浸。在设计时建议搭配状态插图强化氛围,并提供操作按钮为用户提供通路。

图片

 

 

章尾总结

帮助体系的出发点就是在尽量降低人为干预的基础上,减少用户在不同使用阶段中的刻意思考与寻找,从而提升操作的顺畅性及用户的认可度。综上就是在不同操作阶段可用到的设计方法,尽管有些手段并不起眼,但也正是这些点滴的聚集和系统的应用为用户带来无声的帮助,让B端产品使用体验变得高效且富有温度。

 

原文地址:百度MEUX(公众号)

作者:商业用户体验部

转载请注明:学UI网》B端帮助体系二三事

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

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

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

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

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


聊一聊所谓的B端C化

seo达人

写在前面

最近很流行一个词——B端C化,解释出来就是可以用C端的模式和思维来对B端产品进行设计,讨论者大致分为两种观点:

1.C端产品市场已经趋于饱和,可拓展空间剩余不多了,B端产品市场还是一片蓝海,于是产生了一些C端设计师转型去做B端了,将一些C端的模式和思维带到了B端设计中,导致越来越多的B端逐渐C化;

2.B端产品市场互相竞争,为了在同市场中打出差异化,于是一些B端市场开始招揽C端设计师培养转型,并且尝试融入C端产品的模式和思维在同市场内竞争,是产品设计的“内卷化”现象,导致市面上的C化的B端产品越来越多;

但上述无论哪一种观点,都在阐述一种现象或者趋势:不管是交互还是视觉还是UI,目前部分C端设计师正在往B端设计师转型。这个现象的发生对整个设计行业来说无异于新增了很多新亮点——市场上越来越多的B端交互、数据可视化视觉等需求,进而导致对市场培训行业开始产生B端培训的诉求,同时也破空而出了很多优秀的B端设计师。那么B端C化到底是什么,和传统B端C端有什么区别,有这方面想法诉求的同学怎么去实现转型?

由于我本人之前是做C端UI设计师,到后来转型成为B端交互设计师,而接触的业务恰好涉及B端和C端的联动以及多角色之间的协作,所以这篇文章借助结合我个人的经验和看法,谈一谈自己对B端C化的理解

 

B端C端的区别

在谈B端C化之前,需要先了解B端和C端的区别是什么。B端C端的区别网上有很多文章和概述了,大致归纳下来主要以四个维度去区分:受众主体、上线周期、业务类型和产品侧重点这四个维度,其余的维度也会有区分,但是影响较小,主要还是围绕以上四个维度进行B端和C端区分

 

受众主体

受众主体也就是相对应产品的用户群体。C端的受众主体是大众用户,特征为多样化,用户与用户之间跨度也大,但是场景和路径较为单一的,比如C端产品就以年龄层、城市、性别等来划分用户,每个阶段的用户都有不同的诉求、认知和习惯等等;在做任何决策方面都属于偏感性(Heart)的个人决策(Personal);用户稳定性则比较差,要是对产品不满意,可以立马换另一款产品,转换门槛低,有多个竞争对手产品可供选择;

而B端产品的受众主体则是为组织群体,特征为多场景和多维度,用户群体较为清晰明确,可以按照岗位、角色、权限等划分用户群,但是之间的关系更加复杂,比如设计一个银行内部管理系统,用户群就很明确清晰——银行各级职员角色,根据职级关系设计不同的功能以及权限;在做任何决策方面都属于偏理性(Head)的团队性决策(Team);用户稳定性较强,要是对产品不满意,也只能被迫适应和忍受,转换成本较高,几乎没有其他产品可供选择

 

上线周期

上线周期就是指产品从需求阶段到设计阶段。到开发阶段直至最后产品上线所需要的周期。C端产品上线周期模式有个很明确的特点:快速迭代、敏捷,很多C端产品功能更新迭代的速度很快,上线周期非常短,往往半个月甚至一周就完成开发上线,加上用户群的多样性和跨度大,所以在上线的时候往往会需要AB实验去验证方案可行性;

B端产品上线周期则是和C端一个对立面——长,少则双月/季度多则半年/一年等,因为B端产品流程上都属于重型流程,角色之间关系复杂,交互系统较为繁琐,需求的改动和迭代并没有那么频繁,也不需要像C端产品那样快速上线抢占市场,所以B端上线周期会很慢,也导致在工作强度上相比C端较为轻松一些,但是缺点就是结果没有C端来的那么快和明显

 

业务类型

C端产品的核心竞争力就是产品本身,关键总结就是让用户爽就完事了,所以C端产品的需求类型往往围绕用户群的痛点产生;因为C端用户跨度大,不同的用户群体有不同的痛点,所以导致C端的需求类型不是很明确清晰,需要不断从用户身上去探索挖掘需求,在不断的试错中逐渐得出正确的结论;

B端产品的核心竞争力除了产品本身,还依赖复杂的关系、渠道、技术和资源,你的关系够硬、渠道够广、技术够领先、资源够丰富,哪怕你的产品很一般,一样能领先其他同行业的竞争对手,关键总结下来就是让用户赢就够了;B端产品的需求类型虽然也是围绕着用户群的痛点产生,但需求的目标是更加明确清晰的,加上需求变更的频率、范围往往都有契约/合同所约束,所以相较于C端产品来说,B端产品是需求更加明确且容易达成目标

 

产品侧重点

产品侧重点无异于区分C端和B端最明显的门槛了,C端产品的侧重点主要在于体验,而B端产品的侧重点主要在于效益

前面提到过C端产品核心让用户爽就完事了,加上基于用户更换产品的成本很低:你这款产品我用不爽就换掉了,所以C端产品的侧重点永远以用户体验为主,前面说的需求业务类型也几乎是围绕用户体验产生的;大家对比市场上同类型的C端产品,界面、交互、功能都不会差很多,是因为经过长时间的更新迭代,已经沉淀下来目前最好的用户体验类型了,随着产品量级越大,改变用户体验类型就越谨慎;C端产品就是为了寻找并解决用户痛点、痒点和爽点,加上品牌性、用户隐私等因素考量,产品侧重点聚焦于用户体验

B端产品侧重点则是围绕效益了,因为作为一个团队使用的产品,不管是从易用性、功能性还是安全性,为这个团队解决问题为首要基础,那么使用者的体验、产品的美观度等等相较于优先级就没有那么高了,所以导致了有一段时间大家对B端的理解依旧是老旧、丑、难用的认知上;B端产品就是为了使用产品的团队解决效率、成本、营收的问题,加上产品的稳定性、安全性等因素的考量,产品侧重点自然更聚焦在效益上

什么是B端C化

前面了解了B端和C端产品的区别,接下来聊一聊什么是B端C化;简单来说从字面意思理解就是B端的设计层面逐渐靠近C端,网上也有很多B端可视化、趋势潮流的设计和文章,但是B端C化不仅仅是从视觉设计上的改良,下面我逐渐从大到小聊一下我对B端C化的理解

 

功能架构

在做过很多B端产品之后发现,往往很多产品经理是对整个产品架构、功能形态一切都清晰地了如指掌,但是有时候在搭建产品架构的时候,功能形态单一粗糙,步骤复杂且笨拙;站在业务产品的视角来看,架构逻辑上都是没有问题的,但是站在用户视角来看,整体框架是混乱破碎的,步骤繁琐且复杂,导致用户对产品的认知变差,但是又不得不去用这个产品,只能被迫去学习使用

比如一个产品案例,就是一个产品的底层逻辑是前端输入素材id,后端返还一个素材后就可以使用了,站在产品业务视角来看,这样设计没有什么问题,符合产品的底层逻辑;但是站在用户视角就特别难受了,用户想用一个素材,还要去寻找id然后输入搜索,像C端那样全部铺出来给用户选不好嘛?

 

行为习惯

行为习惯自然是指用户群在该行业下的行为习惯,电商行业、社交行业等等不同行业的习惯、专业术语等都不相同,这个在C端产品中都很能得到体验,比如电商行业的大红大紫,社交行业的左右滑动等等,这类有着很明显的行业属性和大众认知,一样是B端设计中应该注意的点

最经典的案例就是红色绿色的定义区分,在数据产品认知中,绿色代表数据涨了,红色代表数据跌了,比如GMV数据,DAU数据等,红色为重点关注的数据;而在金融行业中,基金股票红色代表涨了,绿色则代表跌了,所以设计的原则一定得是基于不同行业的用户行为习惯

 

信息层级

B端产品的信息量一般是很庞大的,尤其是数据、表单、审批等B端产品,涉及到不同角色不同权限的开放等,所以用户能否能一眼看清关键信息,能否帮助用户快速达成目标,是交互层面针对信息层级的设计处理一个重要的环节

之前很常见B端产品中信息处理的方法就是堆积处理,直接将信息、数据等平铺展示,比如很久之前的某牛商家端后台等老旧系统;现在很多新的B端产品都是以模块化处理方法将信息层级区分,使得模块之间间隔更明显,信息处理的效率更高,宛若C端中的卡片式设计

 

设计语言

设计语言自然是B端设计中标题、字号、颜色等规范标准,早些年把B端产品组件化后且开源的自然是阿里老大哥了,当时最早的AntDesign、以及后来的ElementDesign组件库,到现在都被很多中小企业甚至大厂某些产品一直使用中,但随着B端产品的普及和发展,越来越多的企业开始将自己产品沉淀出完善成套的设计语言,并搭建出自己的组件库投入使用了

 

用户体验

如何去衡量用户体验是否是好的,最客观来讲当然是通过数据去衡量,而数据往往在C端产品中很常见,不管是体验数据还是表现数据,都是C端产品中最为关注的;然而在B端产品中,更多收集的一般都是业务表现数据,几乎没有衡量用户使用平台的相关数据,大多衡量体验的方法都是依靠问卷反馈的形式;但在B端C化的过程中,用户体验的数据也逐渐被加入到B端产品当中来,成为体验标准的考核之一:比如某个任务完成的时长,报错出现的频次、某某工具的使用率等

 

视觉设计

最后就是B端C化表现层的设计,包括目前主流的设计趋势如大数据可视化、3D建模、材质质感、Dark模式等都逐渐融入到B端产品中,使得B端产品不再追求简单的“功能优先”和“能用就行”,而是像C端那样追求更美观的视觉,更极致的体验

 

为什么要B端C化

总结下来“B端C化”就是B端产品无论是从功能架构还是视觉体验,越来越趋于人性考虑设计,越来越关注使用者的感受和反馈,因为说白了不管B端产品代替成本高不高,用户是一群专业人士还是普通职员,使用者归根到底还是“人”在使用产品,那么必然会带来体验相关的问题;所以B端C化会逐渐形成一种趋势,在企业平台资源支持的情况下,会将B端产品的功能放大,追赶市场竞争,逐利行业内卷,在体验和视觉感官上也会更加的人性化,结果自然是产品设计者们更加的卷了(手动狗头)

 

总结

无论是现在的B端C化还是将来其他多元的设计趋势,随着市场的竞争和行业内卷,已经反推着设计师们不单单局限于照顾自己的“三分田地”了,无论是之前视觉设计师开始学习3D建模,还是UI设计师尝试接触代码设计,设计师最大的品质就是应该紧跟时代的趋势变化,及时调整补充自己的能力,提升自我的竞争力,才是在当今环境下立足的根本

 

原文地址:站酷

作者:雨灰

转载请注明:学UI网》聊一聊所谓的B端C化

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

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

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

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

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


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

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个方面完整解析栅格设计

鹤鹤

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

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

万字干货!从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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



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

鹤鹤

决策疲劳在现今互联网深度发展的时代似乎非常常见,面对眼花缭乱的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端设计中台落地、响应式界面设计

鹤鹤


以下内容主要分成两大部分,第一是聊聊响应式和自适应的区别和原理,以及我们应该如何去设计响应式界面;第二部分也是比较关键的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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

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

存档