首页

fogg模型的运用,让用户行动起来

资深UI设计者

通过研究分析,发现fogg模型可以帮助我们了解为什么用户不行动,又如何利用fogg模型让用户行动起来

前言

我近期在做的一个项目,是成人直播在线学习的平台,主要以书画为主。

我们发现用户的到课率和完课率较低,所以我们花了挺多时间在研究分析用户,讨论用户为什么没来上课?用户来了为什么没有坚持看完直播?她们出于什么动机来学习的?又在学习过程中遇到了什么困难?……

 

通过研究分析,我发现用fogg模型来解释特别清晰,所以我特意深入了解了这一模型。所以就有了这篇文章。


首先了解,什么是fogg模型?

福格行为模型,是以BJ Fogg(斯坦福说服力科学实验室主任)命名的,表明一个行为得以发生,行为者首先需要需要有进行此行为的动力和操作此行为的能力。接着,他们有足够的动力和能力来实施既定行为,他们就会在被诱导/触发时进行。

 

fogg总结为一个人的行为产生需要三个要素:动力、能力、触发。B=mat,即行为=动机、能力、触发,三个要素必须同时满足才会形成一次有效的转化行动,否则不会发生。

undefined


具体来看,fogg模型的3个要素

一、动机

fogg总结的动机分为3类:感觉期待归属感,人的本能都是追求快乐,逃避痛苦的;抱有希望,逃避恐惧的;寻求认同,避免拒绝的。

undefined

拿书画学习来说,为什么用户会来上课学习?首先是感兴趣,甚至喜欢和热爱才来的,学习书画

可以让她们感到快乐,愉悦身心,陶冶情操;其次会抱着学会和掌握的希望,幻想自己习得一技之长以后的样子;另外通过书画创作希望得到他人的认可和欣赏……

 

结合马斯洛需求层次理论,可以发现不同的人在不同的时刻有不同的需求,就会表现为不同的动机,越接近动物本性的需求,动机则更为强烈,只有低层次的需求得到满足,才会追求更高层级的需求。

undefined

还是说回书画学习的例子,用户只有能感受都书画魅力,在学习的过程中感到愉悦,她才会追求更高层次的需求,比如得到他人的认可,最后成名成家(自我实现)。

 

二、能力

能力是指有能力(人本身的能力)完成,并且完成这件事的成本是可接受的范围内的。

可以有两种方式提高用户的能力:1、降低成本;2、通过利益等诱惑增加用户动机

undefined

1、降低成本

至于成本,有几个方面的成本:时间成本、金钱成本、体力付出、脑力付出、社会压力、习惯力量。

肯来学习书画的人多少都是愿意付出时间和金钱成本的。

体力付出呢,比方说,我们的产品当中没有给用户提供购买材料的链接,用户就需要额外付出体力,可能是淘宝京东之类的电商平台去选购,又可能是到线下画材店去选购,那很有可能她就因此放弃了学习的念头…

社会压力:比如说我之前一位做设计的同事,后来辞职去北京油画村专注学油画去了,那其实在外人看来就不是很好理解,这时候他其实是顶着一定的压力的,也就付出了更多的成本。

习惯的力量:比如平时有空都是跳广场的王阿姨在李阿姨的鼓动下,也想学书画,但是学书画这件事破坏了她跳广场舞的习惯,产生了额外的成本。所以除非王阿姨的动力很足,不然她很容易就打消了学习书画的念头。

2、通过诱惑增加用户的动机

诱惑可以是利益相关的诱惑,比如说学习书画,平台定期举办活动或者比赛,评选优秀作品并送出丰厚奖品;甚至平台有帮助用户卖画的渠道,可以额外增加收入或名气,那用户的学习动力也会大很多。

 fogg认为用户最在的是成本,与其用更多的诱惑增加用户的动机,不如想办法降低用户的成本。


三、触发因素

现在用户既有动机也有能力了,但还不一定能产生相应的行为,还需要触发因素。

触发因素主要有:刺激、辅助、信号

undefined

 

刺激:当用户有学画动机了,也有能力,但是她可能还是会犹犹豫豫,这时候我们通过文案“零基础,3-70岁都能学得会”,或许一下子就打消了她的顾虑,分分钟领课体验。

也就是说,用户动机弱能力强时,我们需要刺激用户产生或加强动机。

辅助:当用户有足够的学画动机,但是不知道怎么领课体验学习,那我们就需要简化领课的流程,或者增加辅助,只需打个电话就能找到专属的客服进行问询和帮助。

也就是说,用户动机强能力弱时,我们需要帮助用户,降低用户的操作成本。

信号:当用户既有了学画的动机也知道怎么领课体验,但是还是难免会因为其他事情冲突而忘记了来上课,这时我们就需要在合适的时机给她一个提醒。

也就是说,用户动机强能力强的时,我们只需要在合适的时机给出提醒就行,不要有过渡劝说行为,反而会适得其反。

 

说完这3个要素,再来分析我所做的项目,我利用fogg模型分析对比不同的用户的动机、能力、触发因素。

undefined

 详细项目方案:https://www.zcool.com.cn/work/ZNTU3NDY5NDg=.html


单看动机,每类用户的动机不足的原因是不一样的,三十几岁可能是感觉上不够愉悦,毕竟她年轻不太能静心领略国画带来的乐趣,这个和阅历有关,心气还不够沉稳;而50岁以上的中老年人非常享受作画的带来的身心愉悦,但是期待感可能会不够,总担心自己老了学东西费力,学不会,没信心。

再看能力,也是各有不同的,对于三十几岁的用户而言时间就是金钱,所以她会比较看重学习效率,如果我们的每节直播课都是一个多小时两个小时,那她就会觉得需要付出的时间成本实在是太高了,就容易放弃,反而我们告诉她,可以利用碎片化时间学习,那她还是愿意尝试的;而四十几岁、五十几岁的用户学习新东西的能力远不如年轻人,并且他们的行为习惯已经非常固化,所以他们需要付出的成本更多的是脑力付出和习惯改变/养成。

那这样一顿分析之后,也就容易找到对应的策略了,这对产品设计真的很有帮助。

 

fogg认为增加用户的动机比降低用户成本要难。

确实如此,人的意愿很难被改变。用户如果对书画一点兴趣都没有,那这样的用户我们就可以直接放弃,而不是想方设法提升她的兴趣,多次劝说反而还会让用户反感。我们要做的是找到潜在用户,至少是有兴趣,愿意尝试的用户,想办法让她们来上课体验,并且在短期内入门,学习有效果,才有可能转化成我们的VIP用户。

 

fogg模型在电商领域运用特别多,商家的各种套路不是在强化我们的购买动机就是在降低我们的购买成本。不知不觉中就买买买,尤其是各种活动促销时,你有没有发现双十一买了很多东西,但东西寄到家后其实并没那么需要或者喜欢,所以又退掉了……

 

除了电商领域,fogg模型可以运用在各种媒介和场景中,比如我所做的这个书画学习项目,提升用户到课率和完课率为目标,可以用这个模型指导,换成提升转化率或者转介绍率同样也可以用这个模型来指导。


最后总结

B=mat,行动=动机、能力、触发因素三者同时出现

动机主要体现在:感觉、期待、归属感

能力提升主要有两种方式:1  降低成本,2  提升用户动机(利益等诱惑)

成本主要有:时间成本、金钱成本、体力付出、脑力付出、社会压力、习惯力量

触发因素主要有:刺激,辅助,信号

文章来源:站酷 作者:酥酥d
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



2021-2022设计趋势报告:动态篇

资深UI设计者

1. 动态在 UI/UX 扮演的角色

动态能激发用户的情绪,为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态,能让你的产品展现与众不同的魅力。另一方面,动态有助于支持可用性,通过自然流畅的物理运动,突显元素在过渡时的关联性与状态变化,增强用户对产品功能的感知。

因此,动态设计必须是有意义的,同时兼具可用性与美感,UX 行业也将动态设计视为多学科的交集,细分成一个专业的设计门类。作为 UI 和 UX 设计中重要的组成部分,动态设计从三个层面发挥影响力:

提高连贯性(Increase Continuity)

让界面元素在用户流程中顺畅地转变与过渡,将用户操作导向期望的任务结果。

连接场景(Connect Scenes)

在转换场景的过程中扮演润滑剂的角色,阐明场景之间的位置、层级与空间的关系。

视觉吸引(Visually Appealing)

聚焦用户视线,将其注意力放在重要的事情上,从而起到信息传达、提升识别度的作用。

腾讯出品!2021-2022设计趋势报告:动态篇

2. 动态设计趋势

植基于 UI 和 UX 设计而发展的第三维度,动态设计的趋势自然与两者密不可分。综观近年,多数作品巧妙地运用绚丽的动态图像(Motion Graphics)与动效设计,让新的视觉手法得以表现更为出彩。再者,随着移动端芯片性能提升,跳脱二维平面的表现形式不再难以实现,让设计师能够解开束缚,发挥无限的想像空间。2021 年的动态设计可归纳为三个趋势:

增强表达(Enhance Expression)

运用引人注目的表现手法将信息传递给用户,包括变形、动态文字和背景动画。

创造层次(Create Hierarchy)

在视觉平面中创建空间层次结构,遮罩与视差是常用的表现手法。

扩展维度(Expand Dimensions)

突破二维限制,将界面元素多维化营造空间感,例如 3D 动态图形和摄像机运动。

腾讯出品!2021-2022设计趋势报告:动态篇

增强表达

1. 变形 Morphing

变形创造了一种连续的叙事状态,告知用户元素的状态或作用发生变化,是一种最引人注目的表现手法,能将形状、图像、色彩无缝地融合与过渡。

动画插图 Animated Illustrations

2021 年看到许多有趣、吸引人的插图,而更多的设计师开始为静态图像添加动态,也让 GIF 和动画插图越来越受欢迎。

动画插图看起来更生动,并带有叙事性质。在示例中,运用动画插图来呈现这杯果汁是由哪些水果打成,比起文字描述更能吸引观众的注意力。

腾讯出品!2021-2022设计趋势报告:动态篇

by Lobster

通过动画插图来呈现同一系列的转变,有利于延续外形上的特征,让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化,同样风格的系列家具利用动画来体现一致性。

腾讯出品!2021-2022设计趋势报告:动态篇

by Graceful illustrations ™

流体动态 Liquid Motion

动态的有机形状,包括流体、烟雾和火焰等粒子效果,能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换,而是颜色在流动的液体中扩散,进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡,并为设计增添有机感,也是 2021 年最引人注目的动画趋势之一。

运用流体动态来展现抽象的有机体,除了轻易地攫取受众目光,还让人不自觉地伫足在画面上,感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画,或是吸引目光焦点的主角。

腾讯出品!2021-2022设计趋势报告:动态篇

by ✞anton mishin✞

流体动态运用到网站设计所营造的视觉冲击力更为惊艳,能为用户带来独特、新鲜的视觉感受, 使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动,因此会在许多特效网站见到流体动态的踪迹。

腾讯出品!2021-2022设计趋势报告:动态篇

by Gilles Tossoukpé

动态渐变 Dynamic Gradients

扁平化设计缺少现实质感的元素,搭配渐变色能有效缓解不足,为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓,充满活力却又平静。使用动态渐变能让设计师展示一系列不断变化的情绪,许多内容创作者和品牌已经注意到这一点,开始在广告活动、识别设计和数字内容使用动态渐变。

腾讯出品!2021-2022设计趋势报告:动态篇

by Pixelz Studio

微交互 Micro Interactions

用户体验设计中微交互变得日益重要,而动态设计正是微交互的灵魂所在,即使只是微小的视觉提示或反馈,都是人机交互易于使用的关键。从经典案例来看,微交互的动画细节必须带有明确的目的性,让用户获得实时反馈,指导用户进行下一步。从近几年的设计趋势来看,微交互已成为不可或缺的存在。

腾讯出品!2021-2022设计趋势报告:动态篇

by Илья Бабушкин

腾讯出品!2021-2022设计趋势报告:动态篇

by Google

动画商标 Animated Logos

过去几年动画商标是最流行的动画趋势之一,通过各种视觉效果,设计师能创造出不同类型的动画商标,许多企业开始采用动画商标作为吸引注意力的手段。多数情况下,商标是进入网站时最先看到的东西,因此商标应该令人难忘、引人入胜,并使用符号或排版来揭示品牌个性。结合动画的优势,设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征,并为静态排版和商标注入一股活力。

腾讯出品!2021-2022设计趋势报告:动态篇

by Yulia K.

腾讯出品!2021-2022设计趋势报告:动态篇

by Meta

2. 动态文字 Kinetic Typography

动态文字是使用移动文本来吸引注意力的动画技术,许多卓越的品牌在网页设计中使用动态文字,为网站外观增添动感和视觉冲击力,是近年 UI 动画的趋势之一。

设计师使用动态文字为单词或句子添加生动的元素,借此定下情绪氛围与设计基调,吸引用户的注意力。几种常见的表现手法,挤压和拉伸一个词能会唤起一种俏皮感,而连续重复这个词则具有催眠感和前卫感。另外,使用大号和粗体字体来增强份量以强调某些信息,也是动态文字的特征之一。

无论在电商网站、电视广告或音乐视频,动态文字都占有举足轻重的地位,有利于加深用户对品牌的关注与印象。

腾讯出品!2021-2022设计趋势报告:动态篇

by HOLOGRAPHIK®

腾讯出品!2021-2022设计趋势报告:动态篇

by Hrvoje Grubisic

3. 背景动画 Background Animation

通过背景动画来强化叙事,成为许多行业常用的品牌传播手段。你可以创建动态的品牌故事,展示有趣的制造过程、产品的使用场景。背景动画深获大众喜爱,它能让用户在进入登录页或网站首页时,轻易地了解更多有关公司或产品的信息。调研显示,从银行、医疗保健公司、电商零售商、餐馆到 B2B 供应商,这些跨越不同细分市场和行业的网站都开始使用背景动画。

腾讯出品!2021-2022设计趋势报告:动态篇

by Carlo Soleri

腾讯出品!2021-2022设计趋势报告:动态篇

by Kirill Zhukovsky

创造层次

1. 遮罩 Masking

遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物,等同于舞台幕布设计,能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效,是最常见的过渡动画之一。

切换场景 Scene-Switching

其中一种遮罩过渡,是将当前场景完全置换,如同揭开蒙在上层的布,逐渐展露叠在下方的景,并利用景物相似性和动作延续性,让两个场景能够顺畅地衔接,不致于差异过大,造成用户心理负担。

腾讯出品!2021-2022设计趋势报告:动态篇

by intent

腾讯出品!2021-2022设计趋势报告:动态篇

by Minh Pham ✪

状态变换 State Transformation

另一种遮罩的表现形式,较无明显的场景过渡,而是利用遮罩来表现景物的状态变化,界面元素和布局基本保持一致,以此塑造无缝过渡的视觉效果,这种手法被广泛地使用,例如气候变化、人物换装、产品组合等。

腾讯出品!2021-2022设计趋势报告:动态篇

by Daniel Tan

腾讯出品!2021-2022设计趋势报告:动态篇

by Outcrowd

2. 视差 Parallax

视差是利用不同的界面元素以不同的速率移动,创造前后景深的分离效果,借此在平面中塑造空间层次,已成为网站首页最为普遍的表现形式。

视差之所以能形成一股风潮,广为各个行业所接受,一方面是信息层级更加清晰,明确定义各种元素的关系,让用户专注于主要操作和内容,将背景或非交互元素往后退,同时保持设计的完整性。另一方面是丰富的层次变化,当用户滚动或滑动时,能在扁平化界面拉开空间关系,利用不同的速率和纵深,塑造多层次的感官体验。

腾讯出品!2021-2022设计趋势报告:动态篇

by Studio VØR

腾讯出品!2021-2022设计趋势报告:动态篇

by Studio VØR

扩展维度

1. 3D 动态图形 3D Motion Graphics

近年来,结合 3D 动态图形的界面设计呈现爆炸式增长,虽然创建 3D 动画需要更多的时间、技巧与协作,但不可否认的,3D 动画比 2D 图形更加逼真,从而提供更具吸引力和互动性的用户体验,并有效地展示品牌的活力。

更生动的表情 Lively Emoji

动画的吸引力在于能够创建各种角色,并为无生命物体注入生命力,表情符号就是一个很好的例子。作为独特的网络语言,表情符号生动地描摹日常面对面交流的非言语信息,随着图形界面的设计趋势逐渐结合 2D 与 3D,运用 3D 动态图形来创造更加动感、拟人化的表情,能让这些非言语信息更加丰富,有机会引领下一波风潮。

腾讯出品!2021-2022设计趋势报告:动态篇

by Outcrowd

营造空间感 Spatial Awareness

3D 动态图形为平面设计建构了空间叙事框架,在扁平化界面中展现立体感,从而表达空间中元素的位置与层级关系。多维化的发展趋势,推动了视觉表达形式的演变,空间感让界面设计更符合人类的认知逻辑,运用各种 3D 运动特效,包括旋转、翻转、折叠、透视、Z 轴位移等,打造令人难忘的感官冲击。

腾讯出品!2021-2022设计趋势报告:动态篇

by UI8

腾讯出品!2021-2022设计趋势报告:动态篇

by Bruno Ortolland

拟人动画 Anthropomorphic Animations

拟人化能让物体、植物、动物等非人类事物,表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的,1927 年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引,越来越多设计师在界面中添加拟人元素,利用这种效果让画面更加生动有趣,增强用户体验的愉悦感。

腾讯出品!2021-2022设计趋势报告:动态篇

by Gregory Riaguzov

2. 摄像机运动 Camera Movements

在动态设计中,摄像机运动是最自由、灵活的一种表现形式,能让画面过渡更有张力,突破 2D 平面在视角上的限制,创造一个无界线的立体空间。常见于影视、动画和广告的摄像机运动,包括推近、拉出、平移、跟拍等方式,备受动态设计师青睐,让用户以多变的视野探索数字产品。

推近/拉出 Dolly In/Dolly Out

推镜头是指被拍摄的对象不动,摄像机由远而近,朝着对象不断推进, 用来突出人或物的主体。镜头推近的运动方式,用来呈现从整体到局部、由分散到集中的变化,引领用户进入故事情景,给人一种身临其境的感受。

相反地,拉镜头则是将摄像机后退,使画面逐渐远离被摄主体,侧重的是从局部到整体、由点到面的转变,强调主体所处的空间环境。随镜拉出的景象,能激起人们无限的想像。

腾讯出品!2021-2022设计趋势报告:动态篇

by Michael Crawford

腾讯出品!2021-2022设计趋势报告:动态篇

by Ali Zafar Iqbal

水平/垂直移动 Truck/Pedestal

水平向左或向右,垂直向上或向下移动摄像机,使画面不断变化,让用户跟随镜头视角一起移动,产生一种置身其中的感觉。这种运镜方式,通常用于具体的场景,利用角色或景物的延续性来消除场景过渡时的边界,表现出一种流动感,无论是手势滑动或鼠标滚动都能有顺畅的操作体验。

腾讯出品!2021-2022设计趋势报告:动态篇

by Netguru

腾讯出品!2021-2022设计趋势报告:动态篇

by Minh Pham

结合多种运镜 Multiple Camera Movements

运用多种摄像机运动相当普遍,既能扩大视野,又有很强的空间感,可以更加自由与多样地展示不同视角和情景。比方说结合横摇(Pan)、直搖(Tilt)和跟随(Tracking)镜头,连续而详尽地展示一个产品,由于画面始终跟随一个主体,有利于突出产品特征,并让用户从不同的角度和距离观看产品,是一种增强临场感和参与感的有效方法。

腾讯出品!2021-2022设计趋势报告:动态篇

by Sang Nguyen

腾讯出品!2021-2022设计趋势报告:动态篇

by Paul Ilnitski

一镜到底 One Shot

在电影中为了不将观众的情感和注意力割裂,使用一个镜头来完成全片的场景刻画和叙事,这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡,以此增强操作过程的流畅性,例如一气呵成的购物体验,或是贯穿全场的人物角色,其特点是给用户最沉浸的感官体验,无间断地体验整个流程。

腾讯出品!2021-2022设计趋势报告:动态篇

by Orizon: UI/UX Design Agency

腾讯出品!2021-2022设计趋势报告:动态篇

by Minh Pham ✪

结语

动态设计作为近年热门的创作形式,广泛应用到各个领域,逐渐成为设计的主流趋势。受益于技术演进与发展,从创意生产到落地实现,动态设计的门槛不再遥不可及。设计师得以将想法转化为生动、有趣的作品,并有机会创造新的表现手法,玩出许多新花样,成为 2021 年动态设计的特色。

本文归纳的设计趋势,有助于启发设计师对动态设计的想像,激发更多创作灵感,为静态界面赋予灵魂,打造令人难忘的视觉体验和品牌形象。



文章来源:优设 作者:腾讯ISUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




导航栏 Navigation Bar 的设计方法

资深UI设计者

导航栏(Navigation Bar)作为一个基础控件,极高的复用率和看似单调的设计样式,往往会让人习惯性忽略其中隐藏的诸多细节,以及背后的设计原因。本篇文章主要探讨导航栏视觉和交互上的各种组合可能性和相关设计细节点,希望能提炼出一般性的设计规律。观点仅是个人粗浅的分析,如果有哪里说得不对的地方,希望大家多多指点。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

理解导航栏的作用

导航栏是用来帮助用户定位、导航、操作的基础组件。既负责告知用户当前所在位置,防止迷失,又负责连通页面跳转路径,允许用户在不同层级的界面之间来去自如。同时还承载了针对当前页面全局性的操作。

简要概述导航栏的作用,有以下 6 个:

  1. 定位:告知用户当前所在位置
  2. 导航:提供离开当前页面的出口,即返回上级(适用于非一级页面)
  3. 提供全局操作:一般是以图标、文字、按钮或组合的形式存在
  4. 扁平层级:以分类 tab 为代表,本质是将多个相关的同级页面聚合在一起
  5. 增加品牌曝光:一般放置在首页左上角
  6. 解释页面当前状态:属于瞬时状态,动态变化

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

梳理导航栏常见的布局方式

实际上,导航栏的布局方式非常丰富,除了上文提到的几种基础布局之外,还有许多复杂的布局方式。

不同的布局方式体现了不同页面的信息架构。

为了方便描述,我将导航栏可以放置信息的部分划分为左、中、右三个区域。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

接下来,我将从「结构简单」到「结构复杂」的顺序来讨论导航栏的各种布局方式。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

突出视觉重点的 4 种设计策略

视觉服务于功能,不同视觉权重背后对应的是不同功能权重。以搜索功能为例,不同产品、不同场景下,搜索功能的权重都是不同的。对于电商产品来说,首页搜索是非常关键的流量入口,必须足够突出,减少用户的认知和操作负担,使用户更加顺畅高效地使用产品。而对于不同产品或不同场景来说,搜索的优先级就未必有这么高。

提升视觉权重的本质是将重要信息和次要信息「区分」开来,而建立区分的本质则是「建立对比」。

我们以“搜索”功能为例。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

拆解视觉细节

我们从以下几个方面来拆解导航栏:

  1. 标题样式
  2. tab 样式
  3. 控件样式
  4. 背景样式

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

整理交互细节

首先,我们要了解,页面固有的层级结构决定了某些信息是常驻于屏幕的,另外的信息是随着用户竖直方向滑动手势而滚动的。而导航栏绝大多数情况下是常驻于页面顶部的。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

尽管导航栏一般都是常驻于页面顶部,但仍有不同的情况要分类讨论:

  1. 常驻区域无变化:导航栏不会随着用户手势的滑动而发生变化。
  2. 常驻区域有变化:导航栏会随着用户手势的滑动而发生变化。

首先要明确,哪些内容属于常驻内容。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

上方这种情况比较明显,头部区域是常驻区域,但要注意并不包括四个主图标。

我们再来看下面的案例。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

上述变化的本质是从「状态 a」过渡到「状态 b」。

状态 b 决定了常驻于屏幕的元素数量,这和内容层显示效率息息相关,需要在页面设计之初就考虑好。

确定好了「常驻区域」和「被折叠区域」之后的交互就比较简单,直接折叠相应内容即可。

使用这种「状态过渡」的思路,相当于明确了变化的起点和终点,之后就可以将精力投入在如何使两种状态之间的过渡更加自然。

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

从5个方面循序渐进,帮你掌握导航栏 Navigation Bar 的设计方法

当我们确定了「过渡变量」之后,我们只需要考虑如何安排变量如何入场(进入状态 b)。变量的出场(撤出状态 a)并不需要考虑,因为变量是跟随内容层一齐滚动的,自然会被上层的导航栏遮挡。

上方微信读书的案例用了硬切的方式,过渡变量直接出现在状态 b 中。通过观察 iOS14 的信息,我们不难发现,iOS 系统采用的标题栏过渡方式是渐现。本质上没有区别,细节上,渐现相对于硬切更加柔和丝滑。

结语

以上是我个人对导航栏相关的一些整理和总结。

分别从功能作用、布局样式、如何突出重点、视觉细节、交互细节几个层面梳理了导航栏设计策略和设计思考。基础且复用率极高的控件蕴含了许多细节和门道,通过大量细致观察总结出一般性的规律,希望我的文章能帮助大家看到一些平时可能会忽略的细节。

文章来源:优设 作者:设计师doo
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




用户调研实战指南

资深UI设计者

由于产品性质和业务阶段,身为B端设计师更加需要贴近一线场景,深入了解业务逻辑和用户使用场景,在不断深入的用户调研中,也收获了一些心得和经验,所以和大家分享一下我常见的三种用研方式,相关物料可以通过文章底部的原文链接得到获取方式


一、认识用研


1.1设计师为什么需要了解用研


我们对产品进行设计探索的本质是利用已知信息去挖掘未知信息,最终利用获得的信息进行决策的过程,信息的完整、准确程度与判断力、等共同决定了决策过程中错误决策的概率高低


用研的过程就是一个信息的收集与处理的过程,在信息不足时我们可以通过同理心来“侧写”用户心智推测信息,这一点从事C端设计的小伙伴应该感同身受,但由于B端用户画像与设计师自身往往偏差较远,单纯的通过同理心来感知用户心智的门槛和难度较大


此时我们就需要通过用户研究的手段获取更准确更完善的信息,通过用户研究,设计师可以贴近一线场景,了解用户的真实场景和工作诉求,切身感受到产品的业务逻辑和使用链路,以便我们进行更准确的设计决策,同样的,这样也可以让我们的设计方案在讲述时有理可依,有据可靠,更容易获得上下游的信任


接下来是我对于可用性测试、用户访谈、问卷调研的学习总结,简单与大家分享,大家有什么见解也可以互相交流


1.2用研的纬度


这是《赢在用户》书中经常被人用到的用户研究二维分布图,这幅图很好的展示了用户研究的纬度,横轴是研究用户的结果;纵轴是理解用户的方式,行为、态度,即观察用户做什么、听用户说什么,因此,用研主要通过定性调研和定量调研分别关注用户的行为或者态度


那么什么是定量,什么是定性,行为和态度之间又有什么样的关系,在正式进入用研工作之前,有必要对这四个方向进行一个简单的了解


定性与定量


定性与定量是用户研究中常用的两种方法,两者之间性质和分析方法有一定的差异


  • 定性研究主要回答“是什么”和“为什么”的问题,是对种类或者质的差异的分析,说白了就是通过经验、逻辑、同理心等非量化的方式去分析【主观】的信息

  • 定量研究,除了能告诉我们是什么以外,还能告诉我们“是多少”,一般指具体【客观】的数据信息



通过上述示意可以发现,定量更加在意得出的数据,至于为什么会得出这个结果,就需要通过定性数据去验证,因此定性分析在一定程度上会更偏向于阐述某件事物的意义


二者是站在不同的角度看待问题——定量关注数,定性关注人,在实际工作中定性与定量往往相互配合,例如通过定量挖掘关键数据,再用定性剖析原因,最后定量进行验证,两者结合以求得研究效果的最大化


行为和态度


行为主要是指用户的某种动作,比如操作时的点击、滑动,以及视觉的关注点、肢体语言等,这些都是下意识,无需思考的行为数据,这些数据可能与信息层级、传递效率、操作时长、交互链路等息息相关,观察收集这些行为数据的最终目的是了解用户为何按照自己的方式进行操作,与我们预期设想的路径有什么不同之处,进而探究是什么促使用户做出的行动


态度则是用户的主观想法或者情绪,情绪会诱发用户产生一系列行为,例如操作遇阻时的焦虑,对产品体验不满的愤慨或者Aha moment时的惊喜这些都反映出了用户对于产品当下体验的一个态度,关注这样用户态度就能收集到产品体验的信息,所以,用户行为导致了某种结果,态度则揭示了影响行为的根本原因



在了解了定量与定性,行为与态度之后,我根据目前工作中常用到的可用性测试、用户访谈、问卷调研,并对每个方法的适用场景和进入调研的关键动作进行详细分析



二、如何选择用研


在开始进行用户调研之前,我们需要根据具体情况确定调研形式,以便实施后续的展开工作,根据用研目的、产品设计阶段、频次、所需样本量和成本等多方面因素进行考虑,选定适合当下情况的调研方式



三、用研执行关键动作


A. 可用性测试


1.准备阶段


1.1明确测试目的

首先应该以目标为导向,确定需要测试的产品是什么,想要验证什么样的结论或者达到怎样的预期,是为了发现产品或原型中可用性的问题,还是借此与竞品进行有效性、效率、满意度的比较,或是对某些功能点进行测试


1.2设计测试任务

在明确测试目的后开始设计测试任务,测试任务是可用性测试的核心内容,需要根据已经确定的测试目的结合用户在实际使用过程中可能存在的场景和需求,将任务场景化,然后对复杂任务的整体流程进行拆解,列出任务列表,以此来编写任务提纲


任务包括场景,操作和具体目标,设计的任务要有代表性,对应的功能或模块必须是功能使用的典型场景、尽量模拟用户真实的使用场景;在任务描述时做到语言简洁,避免指定的操作或引导用户,若任务流程较长,可以进行拆解形成多个用户触点,但触点操作不需要告知用户,仅在用户操作时进行观察即可

1.3 设定衡量指标

在设计好测试任务后,我们需要为任务匹配对应的可用性指标,目的是为了通过指标反应测试内容的可用性问题,帮助实施者有重点的进行观察和记录,还可以结合ASQ量表帮助测试者对每个测试任务的完成情况和满意度进行反馈


可用性指标主要包括有效性、效率性、满意度;这三者构成了衡量指标的一级指标,而每个一级指标下还包括更加细分的二级指标及衡量方式和标准,这就构成了可用性指标对照表;我们依照可用性指标对照表对每个任务的重点有了基本的概念,并且可以根据具体任务描述和衡量指标得到测试记录表

现在我们对每个任务的可用性指标有了基本的概念,但是可用性问题除了从实施者角度去观察用户行为和结果,还需要帮助测试者结合任务进行自评和反馈


而在帮助测试者进行任务反馈时,需要将有效性、效率性、满意度站在测试者的角度进行更加通俗易懂的拆分和信息传递,并且能够做到量化分析,这也就是ASQ评估量表的作用和目的


有效性可以理解为任务的完成情况,即成功完成、求助后完成,未能完成

效率性则是针对特定任务,观察其完成时间是否在正常范围内,其任务完成路径是否符合标准路径,是否存在偏离和犹豫的地方,在进行定量研究时常用指标有任务完成效率、理想路径偏移率等

满意度则是用户自我报告数据,包括任务完成难易度评价、任务完成满意度评价、及评价原因


根据场景描述、测试任务、节点反馈和ASQ评估量表,我们可以得到“任务卡片”,“任务卡片”可以帮助用户快速进入角色,明确内容,量化反馈,在每次任务完成后,将测试者所勾选的ASQ选项对应的分值相加,便可以得到任务评估分值

1.4准备测试脚本

可用性测试一般情况下需要两人协同配合进行,通常一人安排任务鼓励用户发声,一人观察记录,由于涉及内容较多,成本高样本含量低,对被试用户进行的活动任务也比较复杂且环环相扣,所以为了保障测试任务更好的实施,一般情况下会准备一份较为完整的测试脚本以供团队更好的配合


一般测试脚本包括自我介绍、访谈预热、测试规划、测试任务、量表问卷(可选)、结束语、记录文档、相关文档


1.5准备测试原型


1.6招募用户

用户可以大概分为新手用户和专家用户两种类型,当然也可以进行更精细的划分,例如(萌新、高浅、活跃、专业)在招募时为了结果可靠,应避免产品设计相关人员的参与,选择有代表性的用户,其中真实的产品目标用户为最佳,测试者不宜过多,一般5名左右就够了


例如调研XX产品的直播教室的可用性问题,就需要招募已在平台入驻且售卖直播课的老师,在招募时还需要进一步的筛选,如果招募的5名老师都是长期使用平台产品进行直播上课,用户对于产品功能足够了解,关注点会与新手用户会产生较大的差异


1.7准备场地

包括预约测试场地、记录设备、分配主测员和观察记录员、准备相关话术及活动礼物

  • 测试场地:一般选择安静明亮的房间/会议室进行,访谈者和用户最好呈90度的座位

  • 记录设备:安装测试产品的电脑、手机;记录设备可以使用录音笔、相机或DV。设备要稳定,电量充足


2.测试中


2.1暖场

在了解用户情况和布置任务前,不要太直接的进入测试氛围,营造一个相对轻松的交流环境。先聊点轻松的话题,“您从哪里过来的呀”“平常工作忙不忙”等问题,缓解气氛,把用户带入测试场景。可和用户聊聊被测产品相关的小问题,平时怎么用的?一般什么时候用?感受怎么样等等


2.2布置任务

向测试者发放任务卡,结合任务卡中的角色和使用环境对任务进行简单的介绍,如果是专家用户任务就不用过多描绘场景,可以具象更具体的任务——“上传一门新的课程、将课程分成基础班和进阶版分别售卖”等等


2.3观察并记录用户使用过程

这个过程观察记录和引动测试者随时的发声很重要,与其他用研方式不同的地方在于可用性测试可以了解到用户在操作时的想法和行为,用户的发声思考可直接影响可用性测试的效果和结论


我们可以适当引导用户进行思考发声,甚至可以为用户做一些简单的示范,例如 在新建时,可以说“我准备新建一门课程”,“我正在寻找建班功能,我现在遇到一些问题”等等,将自己操作时的想法表达出来,不需要刻意去思考,这有助于主测员去了解测试者的想法和感受

每个任务完成后,通过“任务卡片”重点回答测试者任务的完成情况,遇到的问题,询问测试者的态度和感受,还需记录任务完成的时间;与任务不相关的反馈可以记录在备注中,而在记录时尽量采用词组、短句的快速记录方式记录核心内容,整理后作为优化任务帮助产品进一步提升可用性和易用性


2.4进行量表问卷

ASQ量表

上面在介绍可用性指标及任务卡片时我们有提到ASQ量表,其主要涉及有效性、效率性、满意度3个方面,安排在用户完成单个情景任务之后,这时用户对于任务流程的操作感受是最明确和清晰的


SUS量表(可选)

SUS量表一般在相对完整产品整体的大型可用性测试后才会使用,因为一般的中小型测试任务比较集中和针对,用户无法感知整个系统,量表针对测试设置10个问题(有效性、效率、满意度),包含5个选项:1分(非常不同意)、2分(不同意)、3分(一般)、4分(同意)、5分(非常同意)

在布置问题时,奇数问题采用正面阐述,偶数问题采用反面阐述,以此来确保用户评价的可靠性

单个测试者提交量表后,我们需要计算量表分值,奇数项计分采用“用户打分”-1,偶数项计分采用“5-用户打分”,由于是5点量表,每个题目的得分范围为0-4,共10题,所以最大值为40,而SUS的范围在0-100,所以需要将所有转换分相加后乘以2.5,即可获得SUS分数

3.测试后

3.1问题归类分析

简单测试直接根据发现的问题优化设计即可;如果目的是用于讨论和汇报,需要对记录内容进行整理和输出,这时需关注问题的出现频次、优先级和用户反馈,按照问题维度分类,将不同用户暴露的相应问题进行合并,罗列问题所对应的功能点、可用性指标、用户比例、用户反馈及相关现场记录文件,之后基于问题对业务和体验的影响划分优先级并且标出对应的PM同学,最后针对这些问题给出优化建议


问题优先级的划分方式

通过前期记录观察以及录音录屏我们可以发现用户在任务测试中遇到的问题,根据问题对任务完成度的影响,我们可以划分为P0(紧急问题)、P1(重要问题)、P2(次要问题)的方式对问题进行优化和排期

  • P0:用户遇到阻力且无法解决,未能完成任务的问题

  • P1:用户遇到阻力且反馈频次较高,在求助后完成任务的问题

  • P2:用户遇到阻力但可以自行解决,完成任务但感到不顺利的问题


3.2输出测试报告

较大的可用性测试在得出结果后需要向团队内的成员分享,所以需要进行一次报告输出做到内容对齐,一般包含整体概括、重点发现、项目背景、测试过程、测试结论、优化方案几个模块,具体汇报形式是不受限制的,一般文档形式输出较为高效,keynote汇报从内容和形式上会更加丰富

  • 整体概括可以将测试背景及测试结论简单的阐述,其中测试背景包括(项目背景、测试内容、施测情况),测试结论包括(测试结论、优化建议)

  • 项目背景就不必多说了,将业务背景和测试目的进行简单概括即可

  • 测试过程包括准备阶段(如何招募用户、招募了多少名、用户的基本信息和类型;有哪些测试任务、如何进行测试和记录形式)及测试阶段(本次测试安排的任务、设计的量表问卷、现场的录像照片)两个环节进行展示

  • 测试结论需要将暴露的问题进行问题描述,结合整理的文档表格详述问题未读和用户反馈

  • 最后,结合问题提出完整深入的优化建议和解决方案

3.3后续跟进方案

  • 探讨解决方案:协调产品、设计等多个角色来探讨合适的解决方案,要注意,设计时要思考新方案是否会带来新问题,并再次通过可用性测试来验证新的方案。

  • 持续跟进:了解项目结果的落地情况;已改进的问题或遗留的问题可在下个版本的测试中继续跟进




B. 问卷调研


在进行问卷调研之前,我们需要认识到问卷调研包括两种调研类型,定量调研与定型调研,实际上大部分的问卷都是定量调研,需要大量的用户样本,在收集问卷后需要分析数据占比来验证用户想法,另外小部分就是定型研究,一般原因是因为用户样本量较小,通过小样本量来研究产品的可用性问题


1.问卷前的准备

1.1明确调研目的

问卷调研中设计者并不直接接触用户,所以在问题的深度和广度上是有限的,一份问卷不能解决多个问题,通常会围绕解决1-2个核心问题去研究,在设计问题之前需要明确此次问卷调研的目的,然后围绕这个目的去思考各种问题,通过怎样的问题达到怎怎样的结果


例如通过思考和确认,针对我们这款由0到1的知识教育平台型产品,其调研的目的主要在于

  • 需求验证,包含对用户进行市场分析、了解现状、发现问题,从而提供解决方案,再到两端用户是否满意现在的解决案

  • 用户接受并付费的意愿如何。收集用户信息、挖掘分析用户的付费意愿以及付费习惯


问卷的目的一般可以分为六个方面:

1.2目标用户分析

对调研用户进行分类是较为重要的环节,用户类型不同,问题内容也不同,只有在不同角度不同用户下设计的不同问题才会获得有价值的结果


这种情况在问卷中还是比较常见的,例如我们填完问题一后,根据选择的不同,可能会跳转到问题三或者问题五,这就是问卷设计者根据不同用户分类进行的多种问题设计


例如在收集知识平台满意度和相关竞品使用习惯时,个人机构和组织机构的视角是不一样的,B端客户和C端消费者的视角也是不一样的,所以在问题设计时需要分开对待

问题根据用户分类设计的好处在于问卷后期可以快速验证产品的用户类型和比例,提高调研质量和数据可信度,便于后期对用户进行更加深入的调研


举例

结合上面调研的目的及用户分类,以此我们思考在问卷的设置方面:

对于B端(老师)来说,首先要了解的是客户目前是否有在使用我们提供的服务、什么时候会使用、使用的频率是多少、目前使用的体验如何、有没有遇到什么问题、有什么建议、对我们提供的解决方案是否愿意接受

对于C端(学生)来说,首先需要了解的是用户基本信息,是否使用过课程相关的服务,用过哪些竞品、吸引用户的点在哪等等


1.3内部需求对齐

当需要有问卷调研的需要时,首先应该与团队内部各合作方对齐调研意向,一方面是为了避免过量的问卷投放打扰到用户,另一方面问卷调研属于团队项目,在团队内部充分讨论调研目的后或许你会了解到各业务方当下最关心的用户问题从而调整调研问卷的内容甚至得到更好的解决办法,这样一来才能将问卷调研的价值最大化

例如教育平台侧在新版本上线前为了调研售课老(机构)师对平台使用的满意度和深层次的需求问题,那么在发起调研之前,需要跟产品、教研、客服等业务合作伙伴对齐需求


2.设计问卷

2.1划分问卷模块


设计具体问题之前,我们需要预设几个问卷的模块,通常围绕几个类型:用户类、行为类、产品类、态度等,在得出完整的问卷之前,我们不需要考虑问题的先后逻辑是否合理,先根据调研目的和模块类型进行问题穷举,当用户模块相关问题写完后再继续写下一个模块的问题,直到所有模块的问题都已经设想完毕,在对问题进行重组

用户类:收集用户基本情况,方便我们了解用户群体,比如:职业、学历、团队构成

行为类:了解用户的行为或者与围绕产品相关但不涉及产品本身的问题。比如:有没有在其他平台入驻、售课时视频课比较多还是直播课比较多

产品类:了解用户直接与产品相关的体验问题。比如:对产品印象如何、一般使用某产品的哪些功能、频率怎样、还用过哪些竞品、喜欢哪些功能

态度类:用户对产品的看法。比如:评价、好感、想要的功能;尽量避免提一些无法判断、没头没尾的问题,一方面对产品优化没有帮助,另一方面会降低用户的的期望


2.2衡量问题类型

问卷的问题形式是多样的,题目类型主要有封闭/半封闭问题、量表式问题、开放式问题组成,需要根据具体目的来选择相对应的问题

封闭/半封闭题型的选择在于能否将答案穷举,避免出现用户因为没有合适的选项而随便勾选答案的情况

量表题型在答案上有明显的程度高低区分,设计者对该问题有进行统计的需求

在问卷中应尽量避免较多的开放问题,一般在针对某种方向/某个定性的问题做预探索时使用

这里只对问题的类型做简单的概述,具体的形式是多样的,例如选择题可以有单选、多选、图片选择;量表题除了打分之外,还有排序和点数分配等其他形式


2.3问题重组

在得到具体的问题后,我们需要对问题进行重新编排,通过改变问题的前后顺序来保证用户在可控的情况下进行真实的问卷回答,除了按照问题的难易度之外,还需要根据问题的属性由浅入深的重组问题

例如问卷开始先安排过滤题用于过滤用户,识别用户是否符合问卷的目的来保证问卷数据的质量,然后按照暖场型问题、渐入型问题、高难度问题、敏感问题来对问题进行重组,当然这些顺序并不是固定的,需要依据具体的问卷内容进行调整

关于过滤问题:

用户在实际问卷回答中,受到各方面因素的影响有很多,例如有时用户出于自我暗示、自尊心或者时间紧张状态下,很难根据自身实际情况完成问卷调研,而是随机挑选或者作出相反的选择,这种问卷在回收后会对定量分析造成干扰,所以我们需要依据问卷重要程度,安排适量的过滤题来避免此类情况的发生


比如在对于关于产品改版的满意度调研中,向用户询问有关产品功能的问题

如果用户回答“某某功能”,但在是否知道时选择了否,或者使用时长很久,但却不知道某某功能时,在后期数据中,可以将这部分无效问卷去除


  • 问题注意事项


3.问卷投放

3.1问卷评审

一切准备就绪,是不是准备投放问卷了?别急,许多问卷在投向用户之前,往往会忽视通过内部手段进行问卷自评,通过问卷自评可以发现这份问卷有没有偏离最初的调研目的,你所设想的问题用户是否可以正确理解、问卷是否有可优化的空间等

一般自评包括3个环节:问卷自审、问卷内审、问卷内测


  • 问卷自审

问卷设计完毕之后,需要根据最初确定的调研目的对问卷进行自审,可以站在用户的视角对问卷进行第一次填写,确定问题是正确有价值的,是有其他选项,也可以估算回答问卷所用时间,问题中的词语是否能被用户理解且没有歧义等


  • 问卷内审(可选)

不少公司内部有设立专门的用研团队,在确立调研需求初期就应该与需求方深度绑定,有明确的需求认知,有句话叫当局者迷,邀请用研团队参与审查可以从专业角度把控用研目标,评估问题是否能被用户接受等,他们可以从一些不同的角度发现问题


  • 问卷内测(可选)

内审之后,可以借助产品的代表性用户(一般3-5人)进行问卷内测,通过观察填写情况来检验问卷设计的合理性,例如观察答题时间、用户类型与题目是否关联等等,确保证问卷上没有其他问题


3.2预计采集样本量

内测完毕之后,就可以向用户投放问卷了,为了避免给过多的用户造成打扰,我们需要根据产品的用户数量判断问卷的投放数量

一般没有明确规范多少用户投放多少问卷,基本都是自己判断,一般如果总用户量不足30,需要至少覆盖50%(15个);如果总用户量30-100,30人以上就可以;如果是总用户量100-1000,覆盖20%-50%就可以。


3.3选择投放渠道

我一般常用投放渠道有:1)飞书推送;2)站内公告;3)其他内部资源


问卷调研基本分为线上调研,线下调研两种方法,线上通常是问卷投放或者电话询问的形式,线下一般与用户访谈相结合,做到定性定量相结合;选择投放渠道时,一般根据调研目的、投放预算、预计采集样本量、统计分析成本来进行判断


4.数据清洗产出报告


一般用研团队会使用专业的解决方案快速作出数据分析,比如SPSS,而设计师在实际工作中很少会接触到此类工具,因为此类视角下探索的方向和内容更加具体,变量在可控范围之内,不太需要复杂的分析模型,较为常见的更偏向Excel或者问卷平台自带的分析功能,所以我们可以对分析思路做一个简单的了解


4.1数据清洗

前面在问题设计时我们有讲到筛选题相关的内容,加入筛选题的目的就是在数据分析前便于我们将异常问卷剔除出去,保证最终结果的准确性,除了观察筛选题的选项之外,我们还可以根据问卷填写时长、量表打分规律、问卷填写完整度等几点进行问卷筛选


4.2问卷分析

  • 看整体

还记得我们设计问题的第一步划分问卷模块吗?模块通常围绕几个类型:用户类、行为类、产品类、态度等,在分析问卷时可以基于这些结构得出一个较为整体的情况分析,例如用户群体结构(用户类)、存在的问题和新的诉求(用户建议)等,通过对比相同角色的回答,找出共性的问题和信息


  • 看差异

在得出整体结论之后,我们可以通过差异分析深入挖掘更多信息,例如观察不同用户角色对于产品的建议或者评分,会发现用户角色对于产品的建议和需求是不同的,这种分析方法重点在于找到两个可能存在关系的因素,通过对比不同角色的回答,找出差异和影响因素,根据上述举例就是将(是什么)(怎么样)进行差异对比


  • 问题归类

根据反映问题的模块对用户问题进行归类分析,写明用户的问题描述和具体模块,并且对后续优化提供解决方案


4.3产出报告

问卷报告一般包含调研背景、问卷回收情况、调研结论(功能优先级、用户反馈、数据展示等)、整体评价(功能评价、体验评价)、等,分析时从数据出发找出差异,分析原因,给出结论,在具体汇报时可以按照先结论后具体问题的方式呈现报告,同时可以结合数据提供相对应的解决方案


  


C.用户访谈

1.访谈前

1.1明确访谈目标

明确访谈目标,可以保证访谈内容在大方向上是一致的,例如调研班主任实际外呼的场景及外呼时关注的信息,在访谈时就不会去问关于主讲排课的问题,也可以防止访谈过程中遇到富有表达欲的用户偏离主题,在访谈过程中难免有用户兴致勃勃的谈论自己对产品的看法,在这种情况下,拥有明确的访谈目标可以保证深陷用户的情境中不迷失访谈方向,保证访谈的最终结果是有价值的 


1.2确定访谈类型

根据不同的访谈目标,可以分为三种访谈类型:


  • 开放式访谈

在围绕的主题和问题上都是开放的,没有固定的问题也没有固定的答案,采访者可以根据受访者的表现进行相应的问题补充,受访者可以充分表达自己的观点和意见,氛围最为轻松,接近人们日常的对话,适合进行定性研究。但即使是选择了开放式访谈也需要事先准备访谈提纲来确保此次访谈是有效的


  • 结构式访谈

有严格的问题顺序,采访者必须按照顺序和题目提问,受访者回答的答案都是固定的A、B、C、D,这就需要采访者必须有一个很清晰的目标,在问题的设计上要仔细推敲和打磨受访者可能回答的形式,当然,再缜密的设想在实际访谈中也会有意外,所以也会设置一些开放性的问题让受访者可以自由的进行表述,并给出更加开放和深入的回答,适用于定量数据的研究


  • 半结构式访谈

是实际工作中运用的最多的一种形式,在形式上是结构式与开放式的结合,包含了固定的的问题之外,也设置了开放式的问题,根据访谈时的受访者的实际情况进行问题的增减,适合定性+定量研究

按照访谈的途径来划分,又可以分为线上和线下两种,在受访者不方便的情况下可以进行电话访谈的方式来进行,但是如果访谈包含较为复杂的经历和过程的询问,线上访谈比线下访谈要逊色不少


1.3设计访谈提纲

明确访谈目的与访谈类型后,就要基于访谈目的,拟定访谈提纲,访谈提纲是方便与用户交谈过程中抓住核心,保证访谈高效有序进行的关键,就类似一个标准流程,保证需要研究的问题都可以包含在内,访谈提纲一般包含五个部分,分别是访谈目的、开场白、提问访谈、用户演示、结束语(基本信息、过往经历、产品感受、流程体验、竞品体验),其中提问访谈可以根据具体的访谈内容展深挖细节或者发散问题

提问访谈是提纲中较为重要的一环,问题设计要由易到难,由浅入深,由边缘到核心,在开始阶段设计一些简单的开放式问题来营造访谈的氛围,这个过程中可以了解用户的基本情况或者对产品的使用情况,等访谈向一个方向聚焦时,再逐渐收缩问题范围,逐步追问核心问题

设计好的问题还需要整理成访谈记录表,在进行访谈、时,一方面按照访谈清单大纲尽可能的进行脱稿提问,另一方面则需要记录用户对于问题反馈,记录问题时记录员最好记录用户的逐字稿,以便于后期进行记录整理时不与用户表达产生偏差


1.4招募用户:

用户招募是较为重要的一环,承接访谈前后两个阶段的关键节点,用户招募准确,后面的访谈才有实际意义,招募哪些用户是由访谈目的所决定的,一般招募环节分为三部分


  • 1.41.明确目标用户

招募用户的选择是由访谈目的决定的,不同的访谈目的所招募的用户是不一样的,一般按照使用产品深度的纬度来划分用户

  • 核心用户:产品中较为活跃的用户

  • 边缘用户:产品中即将流失或者已经流失的用户

  • 潜在用户:当前并不是产品用户,但在产品定位的用户群体中


而访谈目的一般有两种情况

  • 研究产品所存在的问题,例如研究一下最近用户活跃度为什么下降

  • 研究产品目标用户所存在的需求,例如研究用户对新功能的满意度


所以如果访谈目的是发现产品现存的问题,那么应该去寻找核心用户,他们那对于产品有着明确的认知;但如果为了增长,则应该寻找边缘用户和潜在用户,他们会告诉你他们需要什么,你需要做什么


  • 1.4.2多渠道招募

面向内部用户的产品进行用户访谈时,一般直接找对应访谈者的leader或者pm沟通即可,而在对外产品时则需要根据确定的筛选条件进行用户招募工作


核心用户的招募相对边缘用户较为简单,一般可以通过行为日志数据、登录时留下的联系方式、产品用户群或产品内运营推送推送来招募核心用户


潜在用户由于对产品接触较少,一般通过问卷、外包招募、熟人推荐的形式进行招募

  • 1.4.3验证目标用户并邀约

在得知用户是否愿意接受访谈后,需要再次验证这些用户是否真的符合样本特征,要注意的是,筛选访谈对象要注意平衡,避免同一类型的对象占了过多比例,导致访谈结果不全面

例如做一次关于学习平台APP的功能优化访谈,就要避免对象大部分是管理者、80后的情况,因为用户不是目标用户、80后用户的需求频率不大

很显然,90后/95后/00后、大学生/刚进入职场的职场新人才是我们的目标用户,那就根据这类人群的角色模型来筛选邀约对象


1.5准备场地和物料

  • 场地选择

用户访谈的可选场地有很多,大部分是请用户到公司来使用公司的会议室,或者有的公司拥有休息区或者共享空间,环境较为舒适和温馨,也是可以的


需要注意的是,场所的选择也会对访谈有些影响。应该尽量选择温馨舒适的环境来打消用户的紧张感


  • 物料

采访者需要提前准备好物料,包括访谈记录表、访谈提纲、录音设备;访谈时可以一人负责提问,另一人负责记录,在使用录音设备对受访者进行录音时,需要提前告知并取得同意


2.访谈中

2.1开场白

在一切准备工作ready之后,可以进行访谈了,访谈中难免遇到一些不善表达的用户,如果一开始就切入正题进行访谈,访谈者可能在紧张的状态下无法与采访者达成信任关系,气氛就会有些尴尬


所以需要先进行简单的寒暄和自我介绍让气氛轻松起来,还可以简单介绍访谈的背景、流程、内容、时间,告知受访者今天只是探讨问题,没有对错之分,所以希望畅所欲言,不要掩饰真实想法

2.2访谈并记录

还记得咱们前面准备的访谈提纲吗?在进行简单的暖场之后,我们可以先对用户的基本情况和使用经历进行询问,从职业、流程、爱好等基础信息作为切入点,为用户营造特定的使用场景,然后再进入访谈环节


访谈时,抛出问题的目的不仅仅是得到用户的一个结论,而是希望用户借此将自己的体验和前因后果告诉采访者,然而很多时候,用户告诉我们的信息都比较浅显,比如“我想要个xxx功能”“我觉得xxx挺好的”,这时我们需要对用户想法刨根问底,从而证实用户说的“想要xxx功能”是否合理,或者看能否想到其他解决方案


  • 如何刨根问底?

1、结合梯子理论,通过问用户以下4个层层递进的问题,来了解用户需求和用户心理

  • 属性:对于这个产品,你最在乎什么功能?

  • 利益:你为什么在乎这个功能,它可以解决你什么问题?

  • 心理:解决这个问题,可以达成你什么目标?

  • 价值观:你为什么在乎这个目标?

2、情景再现

回答提问时,用户很少会去主动联想具体使用场景下的体验问题,比如当你问“上次旅行去哪玩了?”用户大概率会回答“去环球影城玩,人特多排队两小时,玩了个什么叫鹰马过山车,20秒,下次去绝对买优速通...”并不会告诉你怎么去的、以什么标准定的酒店、为什么选择这个项目/地点,等等这些更想要了解的问题告诉你


我们需要帮助用户在基本体验之上还原体验的动机,引导用户对使用场景进行还原,了解用户当时场景下的行为,再针对场景和行为去挖掘用户产生这种体验感受的动机

3、鹦鹉学舌

复述的时候,有时用户还会根据你的复述追加一些他当时没有想到的关联信息,比如“你的意思是。。。我的理解是。。。对不对?”这样可以避免双方理解的偏差,还可以总结提炼用户的观点。这样又可以挖掘到更多内容


2.3结束语

在访问结束后,我们可以与用户一起快速回顾访谈的内容,如果用户有提出一些意见或者建议我们可以再复述一遍进行查缺补漏,并将事先准备好的礼物或者酬劳送给用户表示感谢,向参与度高,善于沟通的优质用户表示保持联系,留下联系方式方便后续进行可用性测试或者再次访谈


3.访谈后

3.1整理访谈内容

一般是在两个用户访谈之间的间隙进行笔记的整理, 将用户的口头语言转换为书面语言,这样一方面减少后续因访谈内容大量堆积而形成的整理压力,另一方面可以根据上一场访谈进行复盘,从而对下一场即将开始的访谈进行内容调整,在整理时我们需要将重点放在用户的提出的问题和负向反馈上

3.2问题归类分析

整场访谈结束之后,我们会发现用户会提出各种各样的问题,我们需要依据问题的纬度进行分类,将不同用户遇到的相同问题进行归纳


问题归纳主要包含两个部分,主要问题和具体问题,主要问题就是访谈中出现的较为明显的反馈问题,例如“超7成用户对首页推荐的内容并不感兴趣”,而具体问题则需要明确用户反馈原因、对应的功能模块和问题类型


3.3产出报告

访谈报告是至关重要的,一方面可以和大家共同讨论发现用户真实想法,另一方面也方便产研团队根据问题关键点投入人力作出进一步优化,一般在访谈当天完成结论报告,时间有限是以关键结论为主,具体问题可以后续补充。访谈报告一般包含访谈背景、参与人员、用户信息、主要问题、具体问题、用户建议、优化建议


总结

本篇文章是我学习到的用户调研的三种方式,调研方式不重要,重要的在于如何理解用户需求,真正了解用户想要的是什么,无论B端还是C端,产品最终还是要服务于用户,作为设计师同样需要了解用户研究,只有对用户足够了解才能作出高体验质量的产品



文章来源:站酷 作者:Hia'laing
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




2021 出镜率最高的 7 种网页 UI 风格

资深UI设计者

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

看完这一波网页 UI 类设计,再也不愁接下来该如何做设计创新了。

图与线叠加

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

这是今年出镜率比较多的一种设计风格,不管你是在 Dribbble 还是 Behance 上都能见到它的影子。这种风格设计最大特点:形式感、聚焦、简约而不简单。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

当然还可以是将线圈与文字叠加图片,有一种层叠纵深布局感受。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

又或者说图形只是作为装饰作用。

纯文字版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

纯文字版式在今年版式中出镜率也是相当之高,包括深圳设计周官网也几乎都是几个大字排版。其实我们仔细思考,将文字放大处理,有点图形化的意思。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

上图是典型的文字图形化,将文字转化成线性设计。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计风格大胆、新颖,让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些,追求形式感与观赏性。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计,不光只是图片与文字混合排版,还可以是图标与文字、粗字体与细字体之间的混合穿插。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形设计趋势一直都存在,在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式,让画面瞬间活了起来。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

还可以将文字处理成圆形,与圆形图相呼应。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化版式今年出镜率尤其之高,将文字轮廓化设计处理,减轻了文字的视觉重量感,更像是将文字线条化设计处理。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化设计还可以用在背景,作为设计装饰效果。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感设计趋势,也是今年最火的设计风格之一。那么它在网页出镜率也是在下半年开始逐渐多了起来,也许是设计师发现这种质感细腻与折射光透露出的细节之美。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

使用线条

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线无疑是图形里面运用较多的,今年发现很多网页中都加了线条作为版式装饰,或者就是纯线条版式设计,让人眼前一亮,原来还可以这样玩。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线条在这里作用明显,除了美学设计装饰之外,它还用作信息层级区分。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格























































































































































































































































灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格








文章来源:站酷 作者:功夫UX
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




关于让设计工作流程更加高效的思考!

资深UI设计者

项目的运作是需要多人合作完成的,在这个过程中会遇到内部和外部的各种的问题,我们这里主要讨论的问题属于内部问题,分人和事。


一、沟通前,多站在对方角度思考


项目大小不同,投入资源会有所分别,但是项目成员专业构成上却都基本是一致的。大家的专业背景不同,相互并不了解各自的工作,思维方式也是不同的,大家在讨论工作的时候也是习惯用自己熟悉的方式进行沟通,相同的事物会存在认知的差异,在传递、执行的时候产生偏差,从而影响目标达成的效率。工作中各自的工作都有不同的专业目标和标准,大家讨论问题都是奔着解决自己的专业目标去的,目标不同,诉求肯定就不一样。


如下图,只有三方达成共识才能做出“好的产品体验”对用户有价值、高满意度的产品,缺少一方都无法完成这个目标。


举例:开发在实现一个页面的时候,他们首先要考虑的不是页面好不好看的问题,而是从实现角度考虑技术方案、难度、性能;设计则是考虑视觉上的美观性、易用性;产品需求方则是考虑是否能满足需求,达成目标数据;在这个项目执行过程中,如果大家都坚持自己目标不让步,这个项目就很难进行下去,然后就有了“妥协”,项目的执行其实就是成员之间相互妥协、博弈的过程。这个过程需要项目团队不断的“磨合”,然后形成共识、工作上的默契。


“妥协”这里不是退让和降低标准,而是需要站在对方的角度思考,他为什么会要这样做?他和自己的方案哪个更有利于项目,如果他的方案有利,自己需要做出那些改变和投入?(这里要考虑可行性);如果自己的方案更有利项目,那就需要阐述自己方案的优势,有理有据说服对方接纳;这个过程必然是顺畅的,提升在执行项目时候的效率。


二、项目过程中,及时同步信息并达成一致


项目常见问题:项目从开始到结束会有很多个项目节点,在过程中因成本和难度,不断修改设计导致的结果偏差;参与决策者较多,之间没有达成共识,在项目不同阶段完成决策,导致的结果偏差;因外部因数导致目标的变化等等问题…


每个项目的流程都有不同的差异,但是多多少少都有上面提到的沟通问题和信息传递的问题,工作中我一直在思考如何更加有效进行沟通和同步信息。这里和大家分享交流一些心得和看法。


1、优化流程中的沟通、信息同步

明确流程节点上需要参与的人员,确保信息的同步触达范围;明确流程节点上需要完成的任务,并且有统一的输出标准、评价标准,让每一个人都清楚自己在做什么、如何去做;明确每一个阶段所需要达成的目标,让项目成员在项目进行过程中也清晰自己的任务,同时让新加入、合作的同事快速了解项目,提升协作上的效率,完成一致的目标任务


2、根据项目大小对流程进行分类

项目流程模块化,针对不同内型项目,明确任务需求模板:小项目(A任务) 、中型项目(A+B任务)、大型项目(A+B+C任务),


3、加强目标在项目中的一致性,建立高效的决策机制

通过项目阶段任务评审,及时将信息同步给项目成员,建立由“项目核心成员”和“决策者”组成的“评审团”,有分歧和问题的时候快速决策,解决问题;避免只讨论不做决策的会议,因为永远都是没有结论的


项目经历和思考


再过往的项目经历中,不同公司在不同文化背景下对于项目的流程管控和要求有着比较大的区别。


  • 互联网公司文化是比较看中体验的,这种思想是从上至下的,所以再遇到有分歧问题的时候大家有一个共同的判断标准“这样做是否会伤害用户体验?”,在此基础上再去讨论我们应该这么做,相对比较容易达成共识;

  • 在手机厂商做项目时,对用新增用户的压力没有互联网公司那么大,用户量的增加主要看手机卖的好不好,怎么盘活现有用户,提升活跃增加转化才是目标。所以更加看中的是用户运营,在挖掘用户需求的同时,更多的是考虑如何吸引用户;

  • 放在制造企业里软件项目只是整个产品项目流程中的一部分,项目按时上市是优先级最高的目标,其他节点在此时间倒推,硬件的时间往往是很难压缩的,不然卖出的产品质量无法保证就是很大的问题,所以往往可能被压缩的就是软件和产品开发的时间了(硬件产品项目相比互联网产品其实已经提前很长时间规划了,但是市场的变化太快)这样的事情时常发生,也无法避免,所以只能尽早做好规划、储备才能从根本上解决硬件产品在软件流程上遇到的尴尬问题。


最后谈点个人的观点,现在科技发展迅速的大环境下,用户被培育的忠诚度不高且善变。从鹅厂开始新起“微创新快速迭代”并不适合制造行业,也可能不在适合现在互联网,因为现在的“爆点”事件都是发生在创新的产品上,微信不是QQ迭代出来的,大疆也是通过自己的不断创新赢得了市场。想要做出领跑市场的创新产品,就需要挖掘更深层的用户需求实现“创新产品的规划和储备”,想的更远才能更有效率的创造对用户有价值的产品。





文章来源:站酷 作者:Midea_IoT_UED
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

如何在企业官网刻入品牌DNA?

资深UI设计者

我们可以从哪些维度强化品牌特质?我们在保留天虹品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。

如果聊起中国的零售巨头,我们一定不会忽略天虹商场(现“天虹数科商业股份有限公司”)最初所占据的一席之地。天虹是国有控股的上市公司,自1984年天虹注册成立后一年,第一家天虹商场——天虹深南店开业,正式开启零售业的征程,成为全国零售业的先行者之一。


天虹成立的30余年来,历经了经济发展的巨大变化所带来的市场繁荣,这也使消费需求多元化成为不可逆的潮流,越来越多中国零售企业采取了多业态发展战略,零售市场从过去的百货商店、副食店一统天下的局面迅速发展成为多业态并存的市场格局。


目录


01  项目展示

02  天虹品牌分析

03  天虹品牌DNA及核心竞争力

04  天虹新业态的呈现升级

05  从多维度强化品牌特质



天虹品牌分析 


过去几年,天虹不断在全渠道方向转型,突破传统购物模式,践行数字化、体验式、供应链三大业务战略,大力发展线上线下一体化的智慧零售商业模式。如今,它更把自己定位为一家提供生活解决方案的服务商。


天虹零售行业数字化转型正在如火如荼的进行,产品线的扩张让目标客户发生了变化,反观消费人群对天虹的印象,仍然停留在天虹仅是一家老牌的实力零售国企的形象,天虹这次找到我们进行官网改版,目的就在于此——在保留品牌DNA的同时,实现新业态的呈现升级,向市场展示一个崭新的天虹。



天虹品牌DNA及核心竞争力 


天虹自2008年确定新的品牌战略以来,始终将“亲和、信赖、享受生活”的品牌核心价值贯彻到底,天虹从事零售行业,贴近生活的脉搏,与生活息息相关,更是以“分享生活之美”作为企业使命。


品牌DNA不可复制,我们率先从品牌的视觉资产切入,计划在天虹新官网具体的视觉设计元素上,例如图标、颜色、配图等,结合品牌强化天虹DNA记忆符号,让记忆符号给访客在视觉、“触觉”等感官上加深印象。


一进入天虹的新官网,首屏上,一句“天虹,分享生活之美”的slogan配合自动播放的短视频,点明了天虹十余年以来一直坚持的品牌使命,天虹对自己品牌核心价值的阐述,也穿插在新官网的各个版块中。



天虹的品牌Logo是一抹橙色极简的彩虹形状,同时也是一丝纽带,意在构建一座通往利益相关者之间的桥梁,营造和客户之间平等、亲和、互相信赖的客群关系。


在首屏接着往下,一句精简的文案充分阐述了“天虹,分享生活之美”的品牌使命,同时应用了天虹logo一抹橙色极简的“彩虹”元素,把品牌基因融进网站交互与视觉设计,能让用户自然地产生与品牌间的联想,加深品牌印象。



这样给访客加深品牌印象的设计不在少数,例如从“了解更多”进入到天虹企业简介的Banner以及每个页面的底部导航,都有从天虹Logo特征延展出来的图形设计。



色彩是一个非常重要的品牌基因。从品牌色延展的色彩方案贯穿应用到网站中,是最为常用的建立品牌印象的方法。


用品牌色作为组件和高亮色自然是不用多说的:



但是,色彩并非越丰富越好,过于丰富反而会干扰访客对网站内容的吸收,我们根据品牌调性控制好品牌色的应用数量,有时候单色或者双色的配色方案更能形成突出的风格和印象。



大面积的色彩虽然能刺激用户的视觉感知,但是也可能分散用户注意力,因此,如果网站有更多资讯阅读类的内容就不适合用过多的色彩,否则会破坏用户的沉浸体验。


“分享生活之美”的主旨在网站中更多的表现在配图上,除了刚刚展示的首页视频,我们还在各个版块穿插了不同生活场景中有温度的图片素材,这些图片素材流露出专注、有朝气和亲和力的氛围,一定会让访客对天虹的好感油然而生。



在各行各业竞争日益激烈的当下,企业历经单一的价格竞争、广告竞争和产品竞争等方面的竞争之后,企业的品牌具有区别和领先于其他竞争对手的独特能力,能在市场竞争中展示品牌的内在品质、技术、性能和完善服务,引起消费者的品牌联想,促进其购买行为,因此,品牌竞争力会逐渐成为企业的核心竞争力。


在现如今的新零售时代,顾客体验感的提升、用户和线上+线下移动端多渠道的互动影响,让企业核心竞争力不再是孤立的某一个因素。而天虹30余年以来,能够保持自身的核心竞争力——品质与服务,这是天虹站在顾客的立场角度,去思考自身企业真正能够带来的价值,我们专门为此设计了一个【品质与服务】页面。


在品质上,除了阐述天虹一直贯彻并强调的经营理念,以及一直以来的践行,我们通过呈现权威的认证证书、六项质量大数据以及天虹的质量管理规范,更强有力的证明天虹品质。



同时,加入时间轴的交互设计,更清晰明了地向访客展示天虹从1987年至今,为顾客保证商品品质所付诸的行动,以及所获得的品质认证奖项。



在服务上,我们分为顾客选择天虹的服务之前、天虹服务顾客时、完成服务之后这三个步骤,明确说明天虹可以向顾客保证的服务品质。


在顾客选择天虹之前,我们运用七种颜色的交互动效,展示天虹可以给顾客的七重品质保证,每项保证都有针对性的服务承诺。


这里还有一个在背后小小的设计想法,七种颜色正好对应彩虹的颜色,也正好和天虹的“虹”相呼应。



为顾客提供服务过程中,直接列出了天虹五项顾客服务的基本准则,体现了天虹为实现品质服务的切实行动。



天虹完成服务之后,分别展示四个场景、渠道保证顾客无忧售后。



天虹新业态的呈现升级 


天虹不同以往的是新业态的改变,要呈现具备科技力的天虹,我们在策划品牌网站时要确定这两大要素:


  • Who—天虹的目标访客群体?

  • What—天虹正在做什么?



Who 天虹的目标访客群体?


一个网站的诞生,是为了服务特定的用户,在网站设计阶段,产品经理通常需要把网站设计构想和思路提交给产品研发团队、视觉和交互设计团队进行网站的设计开发,我们的设计开发团队如何才能清晰理解访客的真实需求?


那么,除了网站需求文档、原型图为主,还要把用户画像作为辅助说明,让我们设计团队成员在设计网站的过程中,对网站目标访客群体有一个更形象化的认识。我们在这不做对访客基本人物属性的分析,而是主要分析访客的使用场景以及访客故事,从而对网站版块、访客体验、访客通过网站完成任务时的浏览路径进行设计。



经过一系列的访客画像分析,我们可以肯定的是,扩张了产品线之后的天虹,新官网的目标访客也会面向更多群体,因此我们将会从这四个应用场景来决定建站方向:



只有让这四个目标访客群体浏览了天虹的新官网,才能真正实现向市场展示出一个崭新的天虹。


What 天虹正在做什么?


我国社会数字化转型进程的不断加快,数字化转型是包括零售企业在内的所有企业,都绕不开的一个重大课题,它能够为企业带来新的发展机遇。


对于天虹这样的零售企业来说,便是借助数字化技术提升企业的运营效能、降低企业运营成本,构建新的数字化环境下新的商业模式是最终目的。在【智慧零售】版块,正式介绍天虹数字化转型发展的新业态。


在为顾客服务上,天虹零售形式的变革是以交付为主要方向的变革,重塑全渠道零售形式之后,【天虹APP】与【超市数字化】把到店与到家等零售形式相融合,实现了顾客“所想即所得”的交付需求,助力了消费升级。


我们在对应的展示版块,附上相对应的使用场景图片,以及天虹APP、天虹小程序的二维码,更有利于访客即刻体验由单一的到店交付,到到家等多场景的便捷交付。



天虹在进行数字化转型中,还瞄准了一个重点是以数据驱动购物百货运营模式的重塑,能够实现原先由人决策、执行、协同,转变为由数据决策、数据执行与数据协同。


天虹购物百货的运营模式在进行数字化重塑之前,仅是依靠商户品牌形象+店内交易才得以完成交易,在【购百数字化】的说明中,我们展示了天虹“Before+After" 的数字化运营模式,向访客充分说明天虹从智能方面寻求新的突破,通过智能设备与数据智能,从而提高了入驻天虹商户的运营效率、降低运营成本的重要措施。



我们明白,信息架构作为网站交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。在商户服务上,天虹还做到服务产品化,我们分别从这两类业务入手为访客做好阐述:


  • 平台业务:天虹在自己构建的平台上为商户提供各种经营工具及服务管理方案;

  • 数据业务:天虹会提供海量数据集成展示的看板给商户。


天虹具体赋能商户的四项支持,我们遵循整站的简约风格来做展示:



【天虹科技子公司】则直接跳转到灵智数科的官网,这是由天虹数字化经营中心孵化的数字化零售SaaS产品,为零售企业提供数字化转型方案,这更能表明天虹未来在实体数字化深耕的决心。



天虹在购物中心&百货、超市、便利店的运营模式中迅速铺开数据化、信息化、智能化的建设道路。其中,我们将天虹超市数字化运营细分为四个方面,真正做到可触达、可交互、可洞察、可追溯。



天虹微喔便利店同样运用线上+线上双模式,从四个方面共同打造天虹微喔的品牌力。



在天虹新业态的展示中没有做花哨的视觉和交互设计,因为当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出正确的设计,一家老牌的实力零售国企的数字化转型,我们更倾向通过展示一些应用场景,将具象化的价值传递给访客,能简则简。



从多维度强化品牌特质


消费升级时代的到来,数字化技术已经与传统的产品和服务产生了紧密相连的联系,正因有天虹这样的企业率先进行改变,我们早已能在日常生活中切实感受到服务的优化和改变。


我们团队通过品牌梳理进行本次天虹官网的改版,从天虹的品牌DNA、核心竞争力以及升级新业态的呈现等多个维度来强化品牌特质和传递品牌价值。我们在新官网做到对三个方面的升级,真正做到向市场展示一个亲和力与科技力并存的新天虹:


a.更温暖

天虹从事零售行业,以“亲和、信赖、享受生活”作为品牌核心价值,更是以“分享生活之美”作为企业使命,与我们的生活息息相关。在天虹新官网里,我们呈现了更多有温度的生活化应用场景,让天虹的形象更贴近用户,更贴近生活的脉搏。


b.更清晰

天虹的数字化新业态转型、品牌符号和视觉形象在新官网更清晰有力的传达给各个访客群体。天虹作为一家成立至今已有30余年的老牌零售国企,我们更倾向于谦虚地阐述天虹的营销理念,保持良好的信息层级可以让整体的浏览体验感更好,而不是对品牌展示的过度包装。


c.更立体

网站设计的过程是先发散后收敛,我们在动手画原型、写文档之前,需要进行大量的思考和调研访客实际的浏览逻辑究竟是怎样的,也就是回归应用场景。在天虹新官网的建设中,我们确定四个目标访客群体来指导网站布局设计的方向,其中【洽谈合作】、【投资者关系】与【人才发展】版块的设计,让天虹诚信、分享、创新和开放的形象更加立体,访客或许会因此对天虹多一份信赖。


文章来源:站酷 作者:增长超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


B端两大设计系统哪家强?

资深UI设计者

编辑导语:有效地利用 B 端设计系统,产品设计师将可以更高效地做出更好的交互设计。那么前段时间发布的 Arco Design 设计系统,和已有的阿里 Ant Design 系统,二者有什么区别呢?本文作者对两大设计系统典型页面发表了他的看法,一起来看一下。

简介

前两周字节发布了自己的中后台设计系统 Arco Design,在仔细阅读官网文档了过后,想和大家聊聊我自己对于 Arco Design 设计系统的与阿里的 Ant design 的一些对比和差异分析。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

ArcoDesign 是一套设计系统的简称,是基于字节跳动所有的中后台产品。ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现,主要由 UED 设计和开发同学共同构建及维护。

Ant Design 是阿里打磨出的一个服务于企业级产品的设计体系, 通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验

B端两大设计系统哪家强?来看这篇超全面的对比!

总览

Ant 和 Arco 两者的前端框架都是基于 React 和 Vue,设计价值观和设计原则也有所不同。Arco Design 基于「清晰」、「一致」、「韵律」和「开放」的设计价值观,试图建立务实而浪漫的工作方式。在「设计价值观」的坚持上,Ant Design 有四点与众不同:「自然」、「确定性」、「意义感」、「生长性」。

我的个人理解 Arco Design 是站在设计规范的基础出发点考虑,希望给用户传递出来的价值出发,让用户深刻感受到系统是「清晰」、「一致」、「韵律」和「开放」的,而 Ant Design 所传递出来的价值观似乎更加玄学或者说格局更高,上升到更高的思维境界,即大自然思想和社会责任。

当然这部分的内容相对比较虚,每个人侧重点想法都不同,大家可以自己去理解一下这部分内容。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

B 端典型页面分析

接下来会从工作台、表格、表单几个典型高频的 B 端界面进行分析,看看两者的差别。

1. 工作台

1)布局

Arco 的卡片列布局灵活,基于 24 栅格进行布局,将整个栅格区域 2:2:1 的比例进行分割,信息卡片的宽度根据栅格宽度进行自适应,这样的工作台页面既灵活也能够满足业务需求。

Ant 的卡片列布局采用 3:2 比例进行布局,同样是基于 24 栅格。目前主流的 B 端页面都是以 24 栅格为基础进行设计。3:2 还是 2:2:1 这两种卡片布局方式没有绝对的优劣,主要是根据我们页面的信息量以及行业属性去确定。如果工作台所展示的单个信息量较多可采用少列大宽度进行布局,满足信息展示的最优布局。

作为 B 端的工作台页面,核心诉求是能够清晰找到用户想要的信息,想要做的内容,所以我们设计师要优先保证用户能够快速定位到核心的信息,快速到达要到达的功能。

2)信息展示

Arco 针对同系列的模块设计了两种尺寸的间距,例如欢迎问候信息与下方的数据信息之间是大间距,数据信息与下方的团队动态最近项目之间是小间距。

格式塔心理学的接近原则指出:接近的事物会被认为是同一个整体,拥有相似的功能或特征。所以在这里设计师通过两种间距的留白对我们视觉进行暗示,强调信息之间的关联程度,便于区分信息层级。

Ant 在卡片方面没有为卡片间距设置两种尺寸,从上下到左右都是一种尺寸,这样做的好处可以让视觉更加对齐,显得页面更加规整,不好的一点就是内容区域外间距与卡片之间的间距一样宽视觉上并没有聚焦,显得内容区域很散。标题方面没有进行加粗重色强调,将内容进行突出,使用户更加聚焦于内容。

B端两大设计系统哪家强?来看这篇超全面的对比!

3)导航方式

两个系统默认都采用侧边栏导航方式,侧边导航在国内的 B 端产品当中最为常见的。将菜单栏放置在左侧,页面布局上基本为左右结构,将导航菜单放置左侧固定。侧边栏导航扩展性强、展示灵活、能够快速定位,缺点是不易阅读、阅读沉浸感低。

B端两大设计系统哪家强?来看这篇超全面的对比!

Arco 导航区域与内容区域都使用同类浅色,采用线的方式进行分割,整体视觉比较清爽。Ant 导航区域使用了传统的重色与内容区进行区分。

目前的设计趋势流行浅色导航,有几个产品的 WEB 端进行了一系列的大改,YouTube、Twitch、Twitter 都进行了重新设计,他们不约而同地将块面去除,去掉多余的的灰色,通过留白和空间将页面拉开。这否是下一个 WEB 端所要追寻的趋势,我还不得而知,但是对于导航层级多的侧边栏导航,我仍然建议使用深色背景区分导航栏。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

有一个细节,在页面背景有一个以登录的用户名形成的一个背景水印,在 B 端的页面中,对信息的保密程度要求很高,这里是为了防止公司核心数据资料泄露,在截图的时候会有水印的存在,增强了信息的保密级别,这是一个很好的设计洞察点。

B端两大设计系统哪家强?来看这篇超全面的对比!

2. 表格

1)表格样式

表格作为组织整理数据的手段,可以有效地向用户展示数据信息,是 B 端产品中出现最高频的模块之一。

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷地实现以上场景中的诉求。

Arco 和 Ant 的表格设计样式与市面上多数产品都类似,采用表格列无分割线条、表头与内容左对齐、数字右对齐的方式。

B端两大设计系统哪家强?来看这篇超全面的对比!

合格的表格设计要定义合理的表格行高,在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。

文字行高可以设定为字号的 1.2~1.8 倍,文字与分割线间距离可以设定为字号的 1~1.5 倍。

B端两大设计系统哪家强?来看这篇超全面的对比!

2)信息展示

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。

在 B 端用户使用场景中,数据量极大的表格的展示问题是体验优劣的关键因素。对于 1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于 1366×768、1280*720 等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。

B 端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

Ant 的表格功能很齐全,很多功能都是 B 端产品的痛点,例如表格可以通过调整单元格行高来调整密度,紧凑模式下可以显示更多的数据。

B端两大设计系统哪家强?来看这篇超全面的对比!

3)操作路径

作为一个查询表格,我不是很理解为什么 Arco 将查询条件放置在表格右上角这么隐秘的位置,而将明显的左上角放一个添加按钮,如果存在多个查询条件是不是要从右往左放置呢?这里我不是很理解,大家也可以说一下自己的想法,相互探讨一下。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

Ant 的表格使用路径符合 F 型视觉动线布局,在 B 端的市场中这种表格的设计方式已经符合用户的操作习惯了。

B端两大设计系统哪家强?来看这篇超全面的对比!

在 2006 年时候,尼尔森诺曼发表了一篇人们如何扫描和阅读网站习惯的分享,他们通过研究发现,用户倾向于一种 F 模式去查看网站。F 模式,能很好地帮我们创建好的视觉层次结构设计,因为这是人们可以轻松扫描设计一种布局,它能让大多数用户感到舒适,因为我们用户一直从上到下,从左到右阅读。

在设计之前,我们先要去确定哪些内容最重要,明确信息的优先级,只有清楚知道你希望用户看到什么,才能将它们放在用户视线热点中。

个人认为在表格设计的完整度和设计的合理性方面来看,阿里的 Ant 系统做得比字节的 Arco 更好。

3. 表单

表单在界面中主要负责数据采集的功能,任何一个表单都可以被拆解成三个最基本要素:

标签(标题)、输入框和按钮。

B端两大设计系统哪家强?来看这篇超全面的对比!

B端两大设计系统哪家强?来看这篇超全面的对比!

1)表单布局

Arco 的表单属于复杂表单,当表单条目数在 7 个以上,可归类到复杂表单,这时候就需要根据表单的复杂度、逻辑性、关联性进行判断,选择合适的分组方式,进行归纳简化,降低表单填写负荷。采用 3 列布局,便签与文本框上下左对齐,这样的对齐方式有利于用户浏览的效率、对齐的美观以及国际化拓展页面的对齐问题。

Ant 的表单也是较为常规的布局方式,有一点差异就是文本框并没有右对齐,这里阿里自己也做出了解释:文本框是根据需要填写的字段进行长度展示的,需要填写内容比较长的文本框就会比较长。实际业务中,大部分 input 所需填写内容都存在理想长度,input 的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

2)标签对齐方式

Arco 和 Ant 都使用了顶标签的形式对齐。

标签分为左标签、右标签、顶标签三种,不同的对齐方式,使用场景不同。

B端两大设计系统哪家强?来看这篇超全面的对比!

该如何选择呢?我们需要从 3 个方面进行考虑:操作效率、标签长度、屏效、视觉对齐。

① 操作效率

根据 Matteo Penzo 的研究总结得到的浏览时间表发现,标签移动到输入框的时间,顶部对齐最快只要 50ms,其次是右对齐 240ms,左对齐耗费时间最长 500ms。

因此当以操作效率为主时,推荐使用顶对齐的方式。

B端两大设计系统哪家强?来看这篇超全面的对比!

② 标签长度

当标签长度超过 8 个字,或者需要考虑中英文双版本时,推荐使用顶对齐的方式,其容纳的标签文字更多,拓展性更好,比如 Ones 的建任务的标签,就采用标签顶对齐的方式:

B端两大设计系统哪家强?来看这篇超全面的对比!

③ 屏效

如果只考虑屏效,那么标签左对齐右对齐均可,但是如果还考虑表单录入效率,那么推荐使用标签右对齐的方式,比如蜂鸟汇报:

B端两大设计系统哪家强?来看这篇超全面的对比!

颜色主题配置

Arco 的颜色主题配置可以说是让人眼前一亮了,可调整的范围非常广非常牛逼。可以编辑的维度从基础的颜色、字体、阴影、 到组件的按钮、导航、分类、表格 一共有接近 40 款组件的样式,并且都是可以进行可视化编辑与实时预览的。

如果你用了 Arco 过后,或许不用苦苦地站在前端后面,让他帮忙调整页面,作为设计师自己就能够搞定,并且每一个组件可以调整的粒度是非常之细,包含各种宽度、图标大小、颜色、投影,等等…在这里可以编辑自己的主题,也可以在商城社区查看到别人发布的主题,真的是很方便啊。

真的有些 amazing!假如你需要去设计一套官方的设计系统,完全可以通过 Arco 进行设计和预览、落地。

B端两大设计系统哪家强?来看这篇超全面的对比!

Ant 并没有做这方面的功能,颜色主题配置这一块确实是 Arco 很大的亮点。

B端两大设计系统哪家强?来看这篇超全面的对比!

总结

无论是 Arco Design 还是 Ant Design 设计系统,都代表了字节跳动和阿里两家互联网巨头公司在 B 端领域的沉淀和竞争。对于 B 端交互设计师来说,两个设计系统都值得我们去研究和学习,建议大家都去看看设计规范里面的内容,对于我们认识和熟悉控件以及和开发对接都很有帮助。

文章来源:优设 作者:哄哄
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



如何去做好响应式设计?

资深UI设计者

对于大多数网页设计师来说,你的成品需要在各种类型和尺寸的设备上进行外观和工作,这是显而易见的。创建多个设计来实现同一目标的日子已经一去不复返了。


这一切都归结为选择响应式或自适应设计模型,以实现任何规模的一致网站设计。


但是响应式和自适应之间有什么区别?它们真的只是一回事吗?让我们来看看并解释你需要知道的一切。喜欢记得关注UI范,每天更新,打造你的知识武器库!




1.与设备无关的设计的两种方法



就其核心而言,响应式和自适应技术在最终用户看来可能是一样的。创建设计和开发方法都是为了使网站在所有设备类型上都具有良好的外观和功能。
主要区别在你如何使用响应式或自适应技术创建网站。




2.响应式设计



响应式设计是任何使用网站的人的“家庭”术语。也许几乎令人惊讶的是,它并没有那么老。它是由Ethan Marcotte在 2010 年创造的:

现在比以往任何时候都更重要的是,我们正在设计旨在沿着不同体验的梯度观看的作品。响应式网页设计为我们提供了一条前进的道路,最终让我们能够“为事物的潮起潮落而设计”。


而这正是我们目前关于响应式网站的思想学派的起点。




响应式设计是一种技术,其中网站在任何给定尺寸下“响应”浏览器的尺寸,以便针对屏幕优化设计。理想情况下,用户应该从单个网站获得相同的体验,无论他们是在只有几百像素宽的移动设备上手持它还是在超宽屏幕显示器上观看它。

响应式网站使用了许多你可能熟悉的元素:媒体查询、灵活的网格和响应式图像。它可能是针对多种屏幕尺寸进行设计的最流行方法。(纯粹主义者会注意到响应式设计与设备本身无关,只与大小有关,而不是自适应,它在完美渲染的道路上检测设备类型等。)

根据交互设计基金会的说法,响应式设计更容易,实现的工作更少。这可能是它被更广泛使用的原因。


响应式设计师创建一个单一的设计,用于所有屏幕,通常会从分辨率的中间开始,并使用媒体查询来确定将对分辨率标度的低端和高端进行哪些调整。这往往会让用户感到高兴,因为熟悉的网页设计似乎保证可以转换到任何设备的屏幕上。均匀性和无缝性是提供良好用户体验的关键考虑因素。

此外,由于涉及开发时间,响应式设计通常是大型网站的选择。响应式设计植根于网格系统,响应式测量(考虑百分比或最小值和最大值)可帮助设计以不同的尺寸扩展、收缩和堆叠。
这种设计技术是新开发的规范。



3.响应式设计的优点

  • 无论设备或浏览器如何,该设计都适用于任何视口尺寸。

  • 响应式设计对搜索引擎友好(谷歌甚至推荐它)。

  • 允许设计中的很多精确度,以便设计师可以调整任何或每一个细节。

  • 高度移动友好的设计选项。

  • 与你可能用于网站项目的大量主题、网站构建器和工具兼容的常见设计实践。

  • 该设计将具有统一和无缝的外观,这将提升整体用户体验。





3.响应式设计的缺点

  • 确保响应式元素在不同尺寸(尤其是较小尺寸)下仍保持可读性和可访问性非常重要。
  • 通常需要比其他网站更多的编码,这可能需要时间或导致重量。重要的是要注意并注意这里。
  • 你无法控制所有设备尺寸,最终可能会设计出与旧尺寸或更模糊尺寸不符的设计。
  • 元素可能会在你身上四处移动,并不时以奇怪的位置结束,甚至由于核心内容管理系统或网站框架更新,因此重要的是要随时了解变化。



4.适应性设计


自适应设计几乎与响应式设计一样古老。该技术于 2011 年首次使用,涉及针对特定设备尺寸和类型进行设计,以获得更加个性化的体验。
这是来自MDN Web Docs 档案的一个很好的解释:“自适应设计更像是渐进增强的现代定义。自适应设计不是一种灵活的设计,而是检测设备和其他特征,然后根据一组预定义的视口大小和其他特征提供适当的特征和布局。”

设计植根于六种固定变化(宽度):

  • 320 像素

  • 480 像素

  • 760 像素

  • 960 像素

  • 1,200 像素

  • 1,600 像素


自适应设计最常见的用途是将旧设计转换为更适合移动设备的设计。这并不是说它不会发生在新的开发中。




5.自适应设计的优点


  • 移动设备会告诉设计它们是什么,以便设计非常适合该设备和浏览器类型。
  • 自适应设计在事物的设计方面提供了几乎精确的控制。
  • 智能广告是一种可能性,允许来自智能设备的链接。
  • 自适应设计在速度测试中的得分往往高于响应式设计。
  • 该设计可以使用更多的个性化功能,连接到智能设备的使用选项和适配。
  • 对于需要刷新的小型网站来说是不错的选择,因为你只需“设计”较小的尺寸。



6.自适应设计的缺点

  • 由于配置错误,您在设计时可能会遇到一些不太常见的设备(例如平板电脑)的问题。

  • 自适应设计可能是劳动密集型的,需要更多的开发时间和成本。

  • 由于内容重复,搜索引擎在使用自适应网站时会遇到更多困难。

  • 有一个偷偷摸摸的现实,你设计同一个网站六次。

文章来源:站酷 作者:UI范

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

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

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


创建设计系统前,6 件必须知道的事情

资深UI设计者

编者按:资深产品设计师 Taras Savytskyi 将自己在初创团队中的设计经验浓缩成为今天的这篇文章,如果你也是设计团队中唯一或者主要的设计负责人,需要考虑到设计系统的问题,那么这篇文章的6个总结,应该能够给你不少帮助:

创建设计系统前,6 件必须知道的事情

成为公司当中唯一负责产品设计的设计师,其实并不是一件容易的事情。你可能会非常忙碌,因为你需要处理很多事情。你需要考虑产品的设计,交付物料,和研发人员协作,在沟通会上做QA,做用户访谈等等。

此外,你可能还需要保持你的设计技能持续精进。比如 Figma 或者 Sketch 更新了新的功能,推出了新的插件,你可能需要持续关注。我们通常会使用 Figma 来作为主要的设计和协同工具,所有的设计、探索、头脑风暴都在其中完成。

我加入 Statflo 之后不久,作为公司唯一的设计师,我需要设计一个全新的 APP,在这个过程中我需要设计一个全新的设计系统,帮我足够快速地创建后续的原型。

1、无需犹豫,直接基于现有的开源设计系统

创建设计系统前,6 件必须知道的事情

刚开始的时候,你不需要太多的素材。你可以直接调用绝大多数的原子组件,比如按钮、下拉菜单、表单、字体、配色,等等。默认初始状态的样式无关紧要,因为后续点击几下就能够快速调整样式。

但是这也意味着,你需要在第三方设计系统当中,找到重要的、足够灵活的、合适的组件来套用。你可以从下面几个设计系统开始着手:

免费: Ant Design Open Source, Lexicon DSL

付费:Tetrisly , Venus Design System73px

2、主要关注基础组件、颜色和排版

创建设计系统前,6 件必须知道的事情

在此之后,你如果要继续推进你的设计系统,你需要首先关注几件简单的事情:配色、排版和基础组件。

完成这几个部分能够帮你更快地完成整个体系的搭建。比如你预设了不同状态的配色,那么当你完成某个UI组件的默认状态的设计之后,可以快速添加其他状态的样式。

又比如,如果你不确定在输入字段当中使用什么图标,那么你只需要创建一个 16×16 的正方形,使用灰色填充,作为占位符,等后续图标素材确定之后,再填充进去就好了。

3、总是从一个组件开始设计

创建设计系统前,6 件必须知道的事情

当你是初创团队中唯一的设计师的时候,你有很大概率需要自己构建一套设计系统。如果你想在这件事情上节省时间,那么最好的方法,就从你当前正在做的这一个 UI 组件开始,将其中所有的元素转化为固定的组件,逐步拓展出设计系统。

以这种方式来执行,可以节省大量的时间,并且这种方式能够帮你更快明确哪些元素在一开始可能就是重要的。

在理想情况下,你的设计流程是绘制小元素,然后逐步组件成为你所需要的组件,这样的处理机制让你无需花费时间来反复更新组件的设计。

4、使用 Figma 当中的「Master」插件

创建设计系统前,6 件必须知道的事情

不过,以这种方式来创建设计系统的时候,你可能会碰到一个问题:你可能会忙于设计,而忘记将创建特定的组件,相反可能会复制一堆完全相同的画板。这个时候,手动撤销操作可能是一件极度麻烦和无聊的事情。这个时候,你就需要一个专门解决这种问题,这个插件名为 Master,创建者是 Gleb Sabirzyanov,它可以帮你将这些重复的画板转化成为一个固定的组件。

但是这还不够。如果你执行的操作足够多,这些你所复制的元素可能已经应用多个画板和页面当中,这个时候,你需要借助名为 The Similayer 的插件,来帮你搞定相似组件的识别问题:它可以一键识别出分散在各处相同的元素,然后你可以将他们转化成你所指定的 UI 组件了。

创建设计系统前,6 件必须知道的事情

5、利用项目间歇来完善设计系统

有时候项目和项目之间是有间隔时间的,这个时间段就特别适合你去覆盘之前设计的组件,将其逐步改进融合成为一个系统。相信我,你在这件事情上所花费的时间,将会在你下一次创建新的功能和组件或者原型的时候,得到回报。

我一直试图在自己每周的日程表当中,腾出几个小时的时间专门来做这件事情,帮我完成我的设计系统的增量更新和迭代。

创建设计系统前,6 件必须知道的事情

6、一开始不要纠结于正确命名

在创建设计系统的过程中,尤其是当你在不同的项目过程中,各种组件总是没法正确的命名。根据我的经验,在设计的时候,怎么命名方便怎么来其实是很合理的,一开始一定不要纠结,留着在后面的阶段再行解决都好,之后单独梳理命名、路径、结构、嵌套等等关系,比起你一开始做某个小组件的时候就纠结这些事情要更加合理,也更加方便。


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

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

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

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





日历

链接

个人资料

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

存档