赞助商
立即赞助

如何构建和验证设计风格?来看高手的实战案例!

UI设计3年前 (2021)更新 流光
2.4K 0 0

58UXD:我们认为,视设计在产品中主要以下用,视用、信息设计、品牌输出等。

借空状态改版,我们试落实视觉设品牌输出层面的价。具体言,逐抽象出品牌概念后,我们通过构建对应感与表达方式的映射关系构建契合品牌的视觉风格;且秉承对于设验证的理念,我们探索了针对视觉风格的验证思与方法,这不仅使得设目标得以验证,保证了整设过程能够形闭环,同时也使得设方案能够设过程中速迭。

如何构建和验证设计风格?来看高手的实战案例!

△ 整体构建流程

文章目录

  1. 品定义
  2. 品牌映射(设计风格构)
  3. 验证方案设计
  4. 空状态设
  5. 验证实施及结果
  6. 遗留问题及后续注

品牌定义

此,除了产品及言人的形象露出外,产品层面未过明确且体系化的品牌概念传达,因此无既的概念或相关信息可遵循或参考,需从理清。

1. 收集相关数据

如所述,由于目所处阶段,本次将以品牌自身单方面输出主,因此我们访谈了相关业务负责人,探讨了产品当服务层面关注的方向以及力争用户营造的体验。

同,也想了解用户在使用安居过程中所形成的总体印象并将其作为补充,因此,抓取了应用市上安居用户的正面反馈并从中提炼出高频词。

如何构建和验证设计风格?来看高手的实战案例!

△ 用户评价词云图

2. 建立品牌心智地图(Mental Map)

通过绘制品牌心智地图,可将以上零散的息类及提炼,以此来组织并简化对产品品牌认知的心智结构,最终描绘出一幅由品牌内核所延展出的图景,其组成可以是品牌的各个方面,凝练了关于一个品牌之所以是一个品牌的构成。

如何构建和验证设计风格?来看高手的实战案例!

△ 品牌心智地图

3. 提炼品牌精髓(Brand Mantra)

进一步的,从品牌心智地图中提炼出构成品牌的核心部,别从品牌功能(Brand Functions)、描述性修饰语(Descriptive Modifier)及情性修饰语(Emotional Modifier)这三个维度去诠释。

牌功描述了产或务的性质,即牌够向户供的体验或益处的类;描述性修语将进一步分类及明确牌传达样貌之性质;情感性修语则解释了给户带来的益处是么。

安居客而言,作为连接房地业介与需求端平台,其本质上是个信息服务平台;而由其信息深度、广度及有效性努力以及信息传效率追求可看出,其力求提供是专业信息服务;结合监管制设力争为用户造可靠、安心体验。

如何构建和验证设计风格?来看高手的实战案例!

△ 品精髓

小结

过以上步骤,基本能够逐渐抽象出所要表物。可简单将上述过程目理解为定义视觉风格。

如何构建和验证设计风格?来看高手的实战案例!

△ 品概念抽象过程

品牌映射(设计风格构建)

明确所要表现象后,便可开始构从内容到形这转化过程,最终构出契合品设计风格。

1. 文案风格构建

首先,尝试将品概念格化,以作为后续导过程灯塔,避免偏离航。基于所提炼出品精髓,演绎出以下设定:

  • 牌性别:男性
  • 品色:专家
  • 品牌:沉着、从容
  • 与用户的关系:安居客之于用户就一专业、贴的「私人顾问」,用户遇到问题时沉冷静其指点迷津,用户产疑惑时体贴入微其答疑解惑。

改版前文案风格分析

现有案可窥见以下特征:

如何构建和验证设计风格?来看高手的实战案例!

△ 改版前文案风格

设计策略

为了贴合所设定格化形象,笔者制定了以下策略来调文案写作风格:

  • 书面语语体替代口语语体——遣词更丰富、正式。如:挑房源(看看房子);楼盘优惠供你参与(快看看哪些房子有);查看楼盘详情(你还可看看他的哦~)。
  • 以平铺叙叙事风格替代销口吻及俏皮语。如:除了旁观,你也能发表自己真知灼见(快参与你喜欢话题发表评论吧!);可查看全部楼盘资讯(先看看其他动态~)。
  • 构建统一的句式结构。

此前,空状态经手不设计师,团队尚可遵从写作风格指南,原有文案多少显混杂零乱,而句结构也是文案风格构成要素,此,笔者尝试构统句结构来满足现已发现五十多处以及将来仍会不断生空状态在表时需求。

将重新设计的所有文案按句式结构的异同分类,从中现明显的规律,其对应的正是针对不同场所使用的差异化策略,对单独出现的句型,在分析其所属场及所需引导策略,判断其是必要句型还是复用其他句型,最终形成能够覆盖当前所有场的种句式结构,指导未来同类场的应用。

如何构建和验证设计风格?来看高手的实战案例!

△ 句式结构构建程

2. 视觉风格推导

风格构

构思路:以品精髓情感饰语及描述性饰语作为核心意象,时解构应表现形形态要素,其后分以形态要素为象将核心意象进演绎。由于品精髓所处抽象层较高,法接指具体表选择——再以到具体情感意象作为标尺,寻求契合表。

:将品牌精髓以颜能够触的感受为视角进行演绎,并根据颜与人类心理感的映射关系确定基相范围。

对颜色具体的义可相同的表达诉求下一控制色彩素获取,如中性色的视觉表于色相的控制,我们通过色相加入蓝获取「高级感」;由于安居客本身的品牌色即属绿色,因此我们直接选用;对于蓝色,考虑到实际应用时与绿色的搭配,色相融入绿色使两者呈时能够相互融合。

如何构建和验证设计风格?来看高手的实战案例!

△ 色的义

形:在实际建构「形」的表达方式情绪受的映射关系笔者发现,不同于颜色的千变万化,「形」在各维度的表达方式上更多的呈现一种二对立的局面,这种情况下,不对品牌髓进行演绎亦可对表达方式作出选择。

如何构建和验证设计风格?来看高手的实战案例!

△ 形的定义

风格应用

色的应用:由空状计中对所有景的象定,可对景刻画中所需的素进行如下类:

  • 光影
  • 背景

针对插画,且处于空状态这种非正场景,当前浓郁的牌色直接使,因此从明层面对进行处,得到适的颜色。

如何构建和验证设计风格?来看高手的实战案例!

△ 牌色的处

作为场景构组成部分,并主体,需要与物形成比,此使用白色。

如何构建和验证设计风格?来看高手的实战案例!

△ 颜色应用

物在场的构筑中承担以下角:

  • 与交互形成为意象传;
  • 为对境的勾勒,构成对场的代或境意象的传达。

应到结构,分为:

  • 作为体的单一物件;
  • 构成近景与远景不物件。

对于前者,中性色呈现体,色点缀于次一级元素;而后者,远景作为要场景元素施中性色,景混合应色。如此,既保证情绪色的露,丰富画面的细腻程。

如何构建和验证设计风格?来看高手的实战案例!

△ 物的颜色应

影

  • 背景光:在表达虚无的场景中,线性渐变来表达此概念,此时混合应两个色来呈现调性。
  • 照:于自然呈现,另取暖色来表现影,进步增加质感。
  • 投影:阴影当使用中。

如何构建和验证设计风格?来看高手的实战案例!

△ 光照的颜色应

背景:白色或明亮颜色更让有安全感,我们希望图示能融入界,此设定为白色。

形的应用:元素形状、元素方向、主占比、主位置。

元素形状:避免锐利的切角,多的用矩形及圆形这类相对稳的形状。

如何构建和验证设计风格?来看高手的实战案例!

△ 元素形状义

素方向:以水面或不同面构成的稳定体系为主,避免独应用斜切面。

如何构建和验证设计风格?来看高手的实战案例!

△ 素方向定义

体占:占据画面中较大例。

如何构建和验证设计风格?来看高手的实战案例!

△ 体占定义

主体位:于画心偏下。

如何构建和验证设计风格?来看高手的实战案例!

△ 主体位定义

验证方案设计

1. 验证思路推导

我们的设计目标是形成契合牌的视觉格,若目标达成,户应当被具备明确视觉格的界面激发相应感受,从而可得到如测试过程:被试浏览相界面,测量情感感受。

那如何测量情感呢?

在对情感测量方法的搜寻中,笔者现心理测量(相对的是生理测量)中常用的语义差异量表(semantic differential scale),其由若干表达情感验的词汇和量尺组成,由用户根据感受程度选取相应的等级,从而获取到情感信息。

终,可得到如下验证思:

如何构建和验证设计风格?来看高手的实战案例!

△ 验证思

2. 样本量设定

性研究方法并非如研究方法那般天然具备确样本的统技,目也无通用的技,业界较熟知的 Jakob Nielsen 所提出的「可用性研究只需测试5用户」的法,由于其限于可用性研究,「测试5用户」的法也只总结性的论述,实际也需酌判断,因此,了确保获取足够的数据,笔者试寻求精确通用的解决方案,终锁了市场研究公司 Research by Design 的 Donna Bonde 所提出的指南(Qualitative market research: When enough is enough)。

笔者认为其建性在于:

  • 从不同研究方法的用途出发,论证了性研究用样本的数级迥异于研究的合理性;
  • 从实际的操作过程来探究本量所发现问题数量的关系;
  • 在上述论述范围,再尝试解构对样本量构成影响的因素,这使够根据具体情况进行相对精确的样本量估算;
  • 这思路,使其脱离了具体使用场景——所使用具体定性研究法,单纯针「样本量设定」这问题本身,这使其具备了相用性。

因此,笔者参照分析进行了对样本量的设定。先根据实际项目及团队情况,对相因素进行赋值:

如何构建和验证设计风格?来看高手的实战案例!

△ 样本量设定

再根据以下公可出适用于本项目样本量:

如何构建和验证设计风格?来看高手的实战案例!

3. 量表设计

量尺计

量表类型:由于对评价对象提供了对立的形象,然需要使用双量尺,即要求被从0点开始向端方向发展的数值中做出评选。

标数:设定标数时需平衡两点,足够精细,充分满足被试表达的需求;控制数量,避免项太过琐碎。

常用标度数,七评分量表相比五评分量表能够到更准确结,而11量表所能收到数据虽然最接近正态分布,被试来说成本也会随增加,增大疲劳效应,此,笔者最终选择了七标度:

如何构建和验证设计风格?来看高手的实战案例!

△ 量尺标度数

修饰词:对量尺的数字,需要通形容词来赋予意义,否则被试很难进行判断;且修饰词需在意义上和相应数值对应,似乎很难现,幸而前人已对不同量尺形容词就其表示的程度水平进行系统的评估,使得笔者能直接绕个问题。

笔者按照所用的标度数,选择了对应能产间距的修饰词:

如何构建和验证设计风格?来看高手的实战案例!

△ 尺修饰词

测对象的语义转化

基于输出的文案风格与视觉意象及其对应策略,可分别确具体的测对象,再以此设能够显示其对立形象的形词:

如何构建和验证设计风格?来看高手的实战案例!

△ 语义转化过程

表结构设

了避免语义启动造被试价时产偏差,需将关系的条目随机摆,并将褒义词贬义词分布表两端不互相集中一,以起到语义抑制效果,避免被试作答不思考。

另外,在第一轮测中,笔者发现不止一位被在对某一条目评价混淆了其描述对象,除了其个人认知水外,某些条目在当前语下所展现出的描述关系依然不够确,因此笔者按照条目的描述对象对其进行了类,并说其描述对象。

如何构建和验证设计风格?来看高手的实战案例!

△ 量表结构

空状态设计

关于空状本身,相对于本文所涉及的其内容,其作为范式更被计所熟识,但在计策略及视觉表现上似乎并非如想象中简。

「空状态」之称乃立足于表现层之观察,承载的实际是若干种场景,反馈「空」只是中的一种是最后一种手,条件允许的情况,应当首先考虑如何引导户。因本项目落地于空状态,上述他设计策略在此展开,将详述空状态的设计。

1. 表现空状态

空状内容

空状由部构成——反馈和引导。基于当前情的反馈能让用户获悉所发生的事;在此基础之上,还需提供引导以帮助用户完成最终的任。

反馈:反馈通由图像与案组成,格应契合牌调性,容除了基本的反馈信息外应更多地考虑如何引导户。

引导:此处引导指是最终根据实情境提供操作,如可支持功能,可以文案形进表。

空状态结构类型

针安居客品场景,除了完空状态结构,于模块化页,由于模块本身高度有限,在数据为空时,取描述文案作为反馈,并在样上弱化按钮使其在前结构下保持原有视觉权,以其为另空状态结构。

如何构建和验证设计风格?来看高手的实战案例!

△ 空状态结构

视图结构类型

空状态本身结构和布局应致,于平台型品,伴随着业务复杂性是页结构多样性,这使空状态呈现于不容,为到致视觉效在视觉输出环节需要针性地定义布局逻辑。

而上述所谓的一致效果即为空状态模块应当居中展示所有容器中,但由空状态模块的重心并非在其物理中心上,因此为达到视居中的效果,在将其物理居中的基础上还需在垂直方向上相应整。

完整视图:视图的高度随设备变化,因此使用相对,布局逻辑即将空状态模块相对于视图中垂直移固距离。

如何构建和验证设计风格?来看高手的实战案例!

△ 完整视图的布局逻辑

模块列表:对于相近的模块,可统一其高度(无法通用的景还需另外定义高度),此可使用绝对定位,布局逻辑即为空状模块相对容器顶部保持固定距离。

如何构建和验证设计风格?来看高手的实战案例!

△ 模块布的局逻辑

对于列表,由于固定,在空状态时规的处方式是将空状态置于背景之上或 cell 之中,前者适于基于白色背景的空状态设计,而后者的形式与实际层级系符,因此我们最终择了添 view 来实现效果,如此就需定义来满足此种场景中的有情况,布逻辑就与模中应的相同。

2. 图示的设计策略

图示的设计策略核心在于容的表达即意象的设定,规的空对象为意象的做法,无更多信息传达,亦无助于信息传达,是一种徒增冗余的可视;情绪为意象的做法由于抽象程和表意当应于有空状态,这种重复容易户厌烦且无趣;而来越来越多见的场景表现形式,设计者对于意象的设定依旧未脱离于上述范畴,更有甚者,一股脑钻进表现形式中可自拔,竟无明确意象的设定。

基于上述分析,笔者认为更合适做法是:内容上表现所引导为(如有),形上以场景构筑接表意象。此作法更丰满地引导了为,表上也更具感染力。

根据场笔者设定三类意象:

  • 平台内容:虚
  • 用户无操:行为
  • 异常况:环境

对「虚无」的概念,即以写的方式在空间面描绘出来,并让人置身其中,营造出一种孤寂的氛围。

如何构建和验证设计风格?来看高手的实战案例!

△ 「虚无」的意象表达

对于行及环境,笔者将抽象的概念具象化,以其意象。以「用户未曾对相关对象发表论」例,对事行主观或客观的阐述一种抽象的概念,难以直接可视化,因此笔者将视角落了行的表达或实施形式,从中选择了「书写」这一动作作意象,同时构建场景时,打破人的比例关系并夸张处理,形一种趣性的观感,一触发用户的共。

如何构建和验证设计风格?来看高手的实战案例!

△ 「论」的意象表达

其景示例:

如何构建和验证设计风格?来看高手的实战案例!

△ 其景示例

验证实施及结果

定性类验证方法相对于埋点数据这类定量方法附带的优势是可在计过程中帮助改进计,因此,整个过程中根据测结果和测过程中遇的问题迭代着计方案以及测流程本身。

第一轮测试中,被试被触发的情感感知与我们的目标方向相反,且还发现了超我们预期的视觉可性问题;案方面,多组条目户无法感知(本身为中性对象除外)。

如何构建和验证设计风格?来看高手的实战案例!

△  第一轮测试轮廓图

具体分析如下:

如何构建和验证设计风格?来看高手的实战案例!

△ 第轮测试结分析

经对结果和反馈的分析,我们着手整视表现:进一步地分插画中视表达构成的元素,并探究不同的处理手段与受众感受间的关系,以此摸索达成目标风的设计策略。并在此基础上,整对应的形容词词对,使其更精确的表达对应的情感感受。

如何构建和验证设计风格?来看高手的实战案例!

△ 迭代前方案对比

其后,我们选择了几具表性的场景行了应用便行了第二轮测试,得到了命中预范围的测试结果后,再对其他页面行了统一调整。

如何构建和验证设计风格?来看高手的实战案例!

△ 第二轮测试轮廓图

在所有方案产出后,针对整体视觉和文案风格进行了第三轮测,最终的结果基本都达了预期,测此结束。

如何构建和验证设计风格?来看高手的实战案例!

△  第三轮测轮廓图

遗留问题及后续关注

1. 明确「品牌精髓」的义及应用

撰写此文的过程中,伴随对品牌精髓产了深的理解,笔者对于描述性修饰语及感性修饰语的义及提炼方式产了疑问——如「专业」一词作描述性修饰语否会显得宽泛?且由于品牌精髓作后续加过程的源,决了整加过程的顺利准确,因此,对其的准确理解应用显得尤重。

2. 一探索感转换及其应用

形产品设领域,早世八十初便始关注人的感性需求及意象与产品设的形态素间的关系,并形了体系化的理论——感性学,并从日本汽车行业的应用渗透到了日本各产品设领域,逐渐传播到方家及中家。但「用户体验设」行业,停留对「感化设」一词朗朗口却又浑然无知的阶段。

而目前业界所「熟知」的 Donad. A. Norman 教授提出的三层次理论——亦是情化计领域除性工学理论外另一个被公认的理论体系,更近于一种界观,解决「是什」的问题,而非方法论;解决「怎」的问题。这和 Jesse Jame Garrett 提出的「用户体验要素」在软件产品计领域知识框架中的定位类似,因此,在实际应用于交互计界面计还需弥补中间的断层。

借此次空状态改版,笔者在牌输的过程中摸索着情绪感受与设计格的映射系,形成了初步的构建思路,且在于感性工程的相献中得到了印证,但在格应层面,此次只是初作尝试,尚存在很大优空间。未来,将此为基础针对界面进行尝试,并在情感转换层面进行更深入的挖掘与探索。

3. 尝试建立视觉情感语义词库

在设计量表的过程中,笔者明显感受到为测量对象设定形容词词对的困难——准确把握测量对象与对应形象间的联想系,甚至在实际测试过程中基于户的测试结果和反馈,笔者持续迭代着问卷条目及对应形容词词对的。

而以笔者目前语义量表理解和应用,其作为「测量某客体受众意义」工具,于视觉风格构将会是要设计验证手段。

基此,有必要寻求并建立一套视情感语义词库,以证量表设计的有效。

4. 确认情感测试中建立基准的必要

在测试程中,笔者明显察到不同被试对相同概念显著的理差异,大致分为下两种情形:

  • 认识不样:如某被试于文案是否有趣判断标准为是否白。
  • 锚定偏差:某被试认为文案就应该是比俏皮、小清新的,当他看到的方案没达到其预期时,便认为其是沉闷的——际上是中的。

这接影响到数据收准确性。

笔者当下的反应是应当对被试先建立基准,从而能够对数据进行加权处理,但鉴需要针对问卷条目设计对应的问题及素材,笔者选择更敏捷的做法——把通访谈所认定的存在明显偏差的结果为异常值剔除出最的统计。

因此,如后将语义差别表列入针对视觉风格构建的标准验证方法之中,保证数据的准确性,必对否加设「建立被试对相关概念理解及程度的基准线」这一环节行研究确认。

本文以项目为描述对象,因此,并未冗述所涉及方法的更多细节(诸如其概念、优劣、使用则、注事项等),待机成熟会陆续输出相关方法及工(如定性研究中本量的定、量表中量尺的计、访谈中的注事项、语义差别量表的计和使用等)的使用指南,包括封装好的文档工,望能抛砖引玉。

注「58UXD」的微信公众号:

如何构建和验证设计风格?来看高手的实战案例!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:这是来自设计师 Eugen Eşanu 的 Jimmy & Sarah 系列文章。两位设计师通过对谈的形式来为你揭示一些产品和设计的...
Eugen Eşanu
作者将向你展示 QQ团队在打磨短视频拍摄能力的思考和经验沉淀,展现一个完整的设计过程。 文章概述 短视频产品成为年轻用户社...
实战案例
@Jenny黄静雯 :分享美啦兔形象设计及运营的详细记录,从项目背景、形象更新、形象规范到设计应用的深度总结记录。 一. 项目...
卡通形象设计
@Jenny黄静雯 :​​​相信很多同学会有,看理论的时候觉得很有道理,看完后却不知该怎么实践,久而久之便会产生「看过很多设计...
ICON
背景 “操作系统对我们而言已不是最重要的了,更重要的是应用和服务。” [1]- 微软 CEO Satya Nadella 去年微软发布的便携折叠...
实战案例
照片是记录生活的重要手段,在智能手机如此普及的今天,谁的手机里面又没有几百上千张照片呢?这些记录关键时刻的图片,对于...
Tubik Studio
编者按:微视作为今年腾讯对抗抖音的核心产品,其重要性不言而喻。在短视频App 百花齐放的今天,腾讯微视该如何做品牌设计才...
品牌故事
朋友们,是否还记得朋友圈不断刷屏的网易H5活动,作为一位互联网设计师,不争气的眼泪从嘴角流了出来,馋呀、羡慕呀!同样九...
H5案例