设计中如何打造最合适的组件?

小编:网页、app、平面哪个设计不是由一个个小部件组成?一起跟随来自Tencent CDC的 @erztan去看看他们设计过程中如何通过拆解、改善、分析罗列、重组、判断来获得一个全新的组件的。

在看组件和元素之前,我们先了解在他们之上的一个概念-模块

模块大家应该都不陌生,任何一个完整的界面,都会有多个功能模块,而每个模块内有相应的组件,每个组件中又有相应的元素,其中任何一点的变化,都会使用户对产品的认知发生改变。

模块并不是一个新的概念,早在20世纪初期的建筑行业中,将建筑按照功能分成可以自由组合的建筑单元的概念就已经存在,同样也出现在早期的产品设计中,并且许多产品的设计都能将其很好运用,包括汽车,电脑,电器,鞋子等等。(如下图)

这些产品之所以使用模块是因为模块具有这些优点:

1.标准化:模块是具有标准尺寸和标准接口的预制功能单元,这是组装、互换等特征的基础;

2.可组装:多个模块可以方便、灵活地组合、配置,以构造不同大小、不同形状、不同功能的系统;

3.可替换:通过用一个模块去更换另一个模块,可以改变系统的局部功能而不影响系 统的其他部分;

4.可维护:可以对模块进行局部修改或设置,以满足用户需求,另外可以增加新模块,扩展系统功能。

那我们从身边熟悉的产品(插线板)出发,看看它里面有什么?

常用插线板的模块分为两部分:总开关模块和主要功能模块,为保证总开关的重要性,总开关模块下并没有连续的组件,只有控制总操作的元素(按钮),总指示灯以及品牌logo之类的品牌信息。

我们来看看总开关模块下的元素:

我们来看看主要功能模块的组件和元素:

产品的发展与创新 — 元素的变化和新组件的形成

注意:必须要先弄清楚你的目标用户是谁,什么样的元素,新组件,外形,材料能吸引你的目标用户并能最好的表现其功能,这些在用户体验的过程中会起决定性的作用。

在技术条件可行的前提下,人们增加,删除或改善元素,创造出了很多更好用的组件。同时也产生了很多新的品牌以及创新点。(插孔,接口等其余元素的视觉表现方式也变得更多样化)

当然,影响的因素还有模块的外形,材料变化(此处不深入讨论)————————————————————–

从以上例子中可以发现:

1.在满足用户和产品需求的前提下,发现最合适的元素和组件能打造更好的产品;

2.元素和组件的变化,能提升产品功能的体验,同时可能为产品带来创新;

3.如果你想发现一个产品的元素和组件,最好的办法就是将它“拆”了。

那么在设计中,如何选择设计元素打造最合适的组件?

项目实例 — 米大师WEB改版

先了解下米大师WEB是什么?

米大师WEB是计费平台部为公司以及合作方提供的,PC端泛娱乐业务计费解决方案。业务以JS的方式直接调用,并以WEB弹窗形式来适配所有业务。

我们来看看老版本,它有什么问题?(以会员为例)

要解决这些问题,打造最合适的组件,先需要做的是:

1.优化模块的结构

旧版本采用的是左右结构,商品信息和支付信息混杂在一起,视觉动线杂乱,影响用户处理效率。

在新版中,我们采用上下结构按照用户路径进行信息分区,优化视觉动线。

2.确立组件的表现形式

旧版本商品和支付信息采用的是列表式,信息排列杂乱紧凑,视觉不美观,且不好适用于多种业务。

在新版中,我们采用卡片式,将商品信息分档位,并将其单个打包,给用户带来更好的视觉一致性,易

于操作,也能有效的对同类信息进行区分,同时能够容纳多种内容,便于多业务的复用。

这些工作完成后,接下来就开始搞事情了——发现最合适的组件

第一步:拆解,模块内每个组件传达的内容不同,将组件拆解成多个区域,发现每个区域的主要元素。

拆解总类目模块

拆解商品档位信息模块

拆解支付信息模块(以Q币渠道为例)

第二步:结合新的模块结构和新的组件,改善已“拆解”的元素,发现新组件,定义新组件内的元素。

第三步:分析罗列,通过参考和梳理,整理出组件内主要元素所有的表现方式,并将其一一罗列。(此处开始以单商品卡片组件为例)

第四步:重组,将区域内整理出来的主要元素“重组”,进行尝试,发现多种组件形式,示例如下:

重组过程中,你会发现,你见过的,没见过的所有式样都在里面。

第五步:判断,根据判断标准(设计原则及产品属性)对各组件形式进行分析,选择最合适的,如下:

来看看最后的方案呈现:

随便聊聊

设计的方法有很多种,或许未来会有更好的方法出现,但希望我们在通过各种渠道(网络、书本、项目等等)积累和知识的同时,抽点空闲,去看看身边普通或者不普通的物品,你会发现在它们身上有很多好的玩意等待着被发现,而这些东西也会为你的工作和生活带来很大的帮助。

所以,赶快去发现新玩意吧~

Tencent CDC

作者:erztan

(0)

相关推荐

  • 【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Materia ...

  • 【译】UI设计中亮色的优点和缺点

    这篇文章展示了丰富多彩的UI的优缺点,描述了明亮的颜色如何提高用户体验,以及在选择亮色时应该考虑有哪些缺陷. 有效的颜色应用技巧是每个从事视觉合成相关工作的,包括插画家和UI设计师,都必须具备的.随着 ...

  • 制造运营设计中打动人心的情景体验

    小编话:今天的文章是来自aliued分享的如何制造运营设计中打动人心的情景体验.什么样的设计更能打动用户?这应该是作为设计师的你应该思考的核心问题.文中分享了四种设计法则,值得大家认真一读. 遇到问题 ...

  • 金钟罩铁布衫在设计中的应用

    听说学会金钟罩铁布衫这门神功可以在设计界横着走-- 极限挑战第三季第二期里面讲了很多神功,降龙十八掌.七伤拳.金钟罩铁布衫.吸星大法.蛤蟆神功等个个都是武林绝学,但每个神功都很厉害也都环环相克.这些神 ...

  • 产品设计中的可拓展性原则

    可拓展性原则是我自己瞎起的一个名字,高兴的话你说弹性原则也行.主要意思是指 界面设计要足够的灵活,具有弹性,以满足将来可能出现的场景.我第一次考虑这个问题是从去年7月份开始,当时接到领导的一个临时需求 ...

  • 如何在设计中使用色彩和色度?

    你已经接近你的设计项目的终点了,但最后一步你难倒了:选择一种配色方案. 让我猜一猜:当涉及到设计(任何事情)时,你很难选择正确的颜色? 你已经组织了布局,确定了内容,甚至选择了字体.但是颜色可能会让人 ...

  • 设计中“对比”的作用是?

    开工了~开工了~春节小长假眨眼间就过去了!春节过后还是为大家准备了一篇文章,这次来的有点晚了,希望大家见谅! 进入今天的主题:<设计中的对比>,关于"对比"这个词其实大 ...

  • 深度解析字体在APP设计中的奥秘

    小编:APP里面文字.图形.色彩是信息传达的三要素,字体则是这三要素中的最重要因素之一. 在用户界面中,每一个单词和字母都至关重要.好的字体等于好的设计.字体成了界设计的基石,而我们设计师,则是这些& ...

  • 极简网页设计技巧,打造简约之美

    极简主义网页设计风格,如何才能做到简约而不简单?简约风设计需要了解和掌握哪些禁忌和技巧,才能让网页设计简洁而不失魅力?继续阅读文章,小编将结合具体实例为大家一一讲解. 近几年,极简主义设计风格(也称简 ...